/* Wrapper: creates its own stacking context so the shadow sits behind the box */
.pin-notice-wrap {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    max-width: 100%;
    margin: 24px 0 40px;
}

/* Notice box: light gray fill with a blue top rule */
.pin-notice {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 40px 24px;
    background: #f8f8fb;
    border-top: 3px solid #3a52a4;
    text-align: center;
}

/* Blue serif message, centered with a readable line length */
.pin-notice-text {
    max-width: 820px;
    margin: 0 auto;
    font-family: "Times New Roman", Times, serif;
    font-size: clamp(1rem, 2.4vw, 1.65rem);
    line-height: 1.6;
    color: #3a52a4;
    overflow-wrap: break-word;
}

/* Curled-corner shadow: two tilted shadows at the bottom, darkest at the outer ends */
.pin-notice-wrap::before,
.pin-notice-wrap::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 10px;
    width: 50%;
    height: 20px;
    box-shadow: 0 14px 10px rgba(0, 0, 0, 0.45);
}

/* Left shadow, tilted slightly */
.pin-notice-wrap::before {
    left: 8px;
    transform: rotate(-2deg);
}

/* Right shadow, tilted the opposite way */
.pin-notice-wrap::after {
    right: 8px;
    transform: rotate(2deg);
}

/* Small phones (down to 280px): tighter padding and softer shadow */
@media (max-width: 480px) {
    .pin-notice {
        padding: 24px 16px;
    }
    .pin-notice-wrap::before,
    .pin-notice-wrap::after {
        box-shadow: 0 10px 8px rgba(0, 0, 0, 0.4);
    }
}