/* ===================================================================
   포스룸 프로모션 섹션 공용 스타일
   - psr-  : 우편보관 카톡 알림 섹션 (mailService)
   - psrb- : 물품보관 카톡 알림 섹션 (storageService)
   - psrc- : 고객 후기 섹션 (두 페이지 공통)
   접두사로 분리되어 있어 기존 페이지 스타일과 충돌하지 않습니다.
   =================================================================== */

/* ═══════════════ 우편보관 카톡 알림 섹션 ═══════════════ */
.psr-mailnoti {
    --psr-navy: #12233A;
    --psr-mint: #5FD3A8;
    --psr-kakao-y: #FEE500;
    --psr-kakao-bg: #8FA9C4;

    /* 기존 우편 보관 서비스 배너 사진을 배경으로 사용 */
    --psr-bg: url('/image/mailStorageServiceImg-ac6ac3df95286dfb41952a95807aca25.png');

    position: relative;
    padding: 80px 24px 96px;
    background-color: var(--psr-navy);
    background-image:
        linear-gradient(100deg, rgba(9, 19, 32, .94) 0%, rgba(9, 19, 32, .80) 42%, rgba(9, 19, 32, .42) 100%),
        var(--psr-bg);
    background-size: cover;
    background-position: center;
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    word-break: keep-all;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

.psr-mailnoti * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

.psr-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 372px;
    gap: 64px;
    align-items: center;
}

/* ── 좌측 카피 ── */
.psr-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.psr-title {
    font-size: clamp(28px, 3.8vw, 42px);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -.035em;
    color: #fff;
    margin-bottom: 32px;
}

.psr-list {
    list-style: none;
    display: grid;
    gap: 14px;
}

.psr-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: clamp(15px, 1.6vw, 17px);
    font-weight: 500;
    color: #E6EDF4;
    line-height: 1.55;
}

.psr-list svg {
    flex: none;
    margin-top: 3px;
    color: var(--psr-mint);
}

/* ── 우측 폰 목업 ── */
.psr-phone {
    width: 100%;
    max-width: 372px;
    margin: 0 auto;
    background: #0B0B0C;
    border-radius: 40px;
    padding: 10px;
    box-shadow: 0 44px 88px -24px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255, 255, 255, .09);
}

.psr-screen {
    background: var(--psr-kakao-bg);
    border-radius: 31px;
    overflow: hidden;
}

.psr-bar {
    background: #93ACC6;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.psr-bar-back {
    color: #22303D;
    font-size: 19px;
    line-height: 1;
    font-weight: 600;
}

.psr-bar-name {
    font-weight: 700;
    font-size: 15px;
    color: #1A2733;
    line-height: 1.3;
}

.psr-bar-sub {
    font-size: 11.5px;
    color: #4B5C6C;
    line-height: 1.3;
}

.psr-chat {
    padding: 16px 13px 22px;
    display: grid;
    gap: 13px;
}

.psr-day {
    justify-self: center;
    background: rgba(0, 0, 0, .19);
    color: #fff;
    font-size: 11px;
    padding: 4px 13px;
    border-radius: 999px;
}

.psr-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.psr-row.psr-me {
    flex-direction: row-reverse;
}

.psr-av {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    flex: none;
    background: var(--psr-kakao-y);
    display: grid;
    place-items: center;
    font-size: 17px;
}

.psr-wrap {
    max-width: 75%;
}

.psr-who {
    font-size: 12px;
    font-weight: 600;
    color: #22303D;
    margin-bottom: 5px;
}

.psr-bub {
    background: #fff;
    border-radius: 4px 15px 15px 15px;
    padding: 10px 13px;
    font-size: 13.5px;
    line-height: 1.62;
    color: #1A2733;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}

.psr-row.psr-me .psr-bub {
    background: var(--psr-kakao-y);
    border-radius: 15px 4px 15px 15px;
}

.psr-wrap .psr-bub + .psr-bub {
    margin-top: 5px;
    border-radius: 15px;
}

.psr-row.psr-me .psr-wrap .psr-bub + .psr-bub {
    border-radius: 15px;
}

.psr-time {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .88);
    align-self: flex-end;
    padding-bottom: 3px;
    white-space: nowrap;
}

/* 사진 말풍선 (실제 카톡처럼 3장 묶음) */
.psr-photobub {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}

.psr-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.psr-ph {
    aspect-ratio: 3/4;
    background: #DDE3E9;
    display: grid;
    place-items: center;
    color: #8A97A4;
    font-size: 10.5px;
    text-align: center;
    line-height: 1.4;
    padding: 4px;
}

.psr-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.psr-hl {
    background: #FFF3BA;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* 발신처·고지서 종류가 들어가는 템플릿 칸 */
.psr-slot {
    background: #FFF3BA;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

@media (max-width: 960px) {
    .psr-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .psr-mailnoti {
        padding: 64px 20px 76px;
    }

    .psr-title {
        margin-bottom: 26px;
    }
}

@media (max-width: 480px) {
    .psr-mailnoti {
        padding: 52px 16px 64px;
    }

    .psr-wrap {
        max-width: 80%;
    }
}

/* ═══════════════ 물품보관 카톡 알림 섹션 ═══════════════ */
.psrb-storenoti {
    --psrb-navy: #12233A;
    --psrb-mint: #5FD3A8;
    --psrb-kakao-y: #FEE500;
    --psrb-kakao-bg: #8FA9C4;

    /* 기존 물품 보관 서비스 배너 사진을 배경으로 사용 */
    --psrb-bg: url('/image/mailStorageServiceImg-ac6ac3df95286dfb41952a95807aca25.png');

    position: relative;
    padding: 80px 24px 96px;
    background-color: var(--psrb-navy);
    background-image:
        linear-gradient(100deg, rgba(9, 19, 32, .94) 0%, rgba(9, 19, 32, .80) 42%, rgba(9, 19, 32, .42) 100%),
        var(--psrb-bg);
    background-size: cover;
    background-position: center;
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    word-break: keep-all;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

.psrb-storenoti * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

/* 카피가 왼쪽, 폰이 오른쪽 (우편보관 섹션과 동일한 배치) */
.psrb-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 372px;
    gap: 64px;
    align-items: center;
}

.psrb-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.psrb-title {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -.035em;
    color: #fff;
    margin-bottom: 32px;
}

.psrb-list {
    list-style: none;
    display: grid;
    gap: 14px;
}

.psrb-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: clamp(15px, 1.6vw, 17px);
    font-weight: 500;
    color: #E6EDF4;
    line-height: 1.55;
}

.psrb-list svg {
    flex: none;
    margin-top: 3px;
    color: var(--psrb-mint);
}

.psrb-phone {
    width: 100%;
    max-width: 372px;
    margin: 0 auto;
    background: #0B0B0C;
    border-radius: 40px;
    padding: 10px;
    box-shadow: 0 44px 88px -24px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255, 255, 255, .09);
}

.psrb-screen {
    background: var(--psrb-kakao-bg);
    border-radius: 31px;
    overflow: hidden;
}

.psrb-bar {
    background: #93ACC6;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.psrb-bar-back {
    color: #22303D;
    font-size: 19px;
    line-height: 1;
    font-weight: 600;
}

.psrb-bar-name {
    font-weight: 700;
    font-size: 15px;
    color: #1A2733;
    line-height: 1.3;
}

.psrb-bar-sub {
    font-size: 11.5px;
    color: #4B5C6C;
    line-height: 1.3;
}

.psrb-chat {
    padding: 16px 13px 22px;
    display: grid;
    gap: 13px;
}

.psrb-day {
    justify-self: center;
    background: rgba(0, 0, 0, .19);
    color: #fff;
    font-size: 11px;
    padding: 4px 13px;
    border-radius: 999px;
}

.psrb-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.psrb-row.psrb-me {
    flex-direction: row-reverse;
}

.psrb-av {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    flex: none;
    background: var(--psrb-kakao-y);
    display: grid;
    place-items: center;
    font-size: 17px;
}

.psrb-wrap {
    max-width: 75%;
}

.psrb-who {
    font-size: 12px;
    font-weight: 600;
    color: #22303D;
    margin-bottom: 5px;
}

.psrb-bub {
    background: #fff;
    border-radius: 4px 15px 15px 15px;
    padding: 10px 13px;
    font-size: 13.5px;
    line-height: 1.62;
    color: #1A2733;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}

.psrb-row.psrb-me .psrb-bub {
    background: var(--psrb-kakao-y);
    border-radius: 15px 4px 15px 15px;
}

.psrb-wrap .psrb-bub + .psrb-bub {
    margin-top: 5px;
    border-radius: 15px;
}

.psrb-btitle {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.psrb-time {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .88);
    align-self: flex-end;
    padding-bottom: 3px;
    white-space: nowrap;
}

/* 사진 말풍선 */
.psrb-photobub {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}

.psrb-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.psrb-ph {
    aspect-ratio: 3/4;
    background: #DDE3E9;
    display: grid;
    place-items: center;
    color: #8A97A4;
    font-size: 10.5px;
    text-align: center;
    line-height: 1.4;
    padding: 4px;
}

.psrb-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.psrb-hl {
    background: #FFF3BA;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

@media (max-width: 960px) {
    .psrb-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .psrb-storenoti {
        padding: 64px 20px 76px;
    }

    .psrb-title {
        margin-bottom: 26px;
    }
}

@media (max-width: 480px) {
    .psrb-storenoti {
        padding: 52px 16px 64px;
    }

    .psrb-wrap {
        max-width: 80%;
    }
}

/* ═══════════════ 고객 후기 섹션 (두 페이지 공통) ═══════════════ */
.psrc-reviews {
    --psrc-ink: #12233A;
    --psrc-kakao-y: #FEE500;
    --psrc-line: #E3E9F0;

    padding: 88px 24px 96px;
    background: #F4F7FA;
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    word-break: keep-all;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.psrc-reviews * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

.psrc-head {
    max-width: 1080px;
    margin: 0 auto 48px;
    text-align: center;
}

.psrc-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #2B6CF6;
    background: #E8F0FF;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.psrc-title {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -.035em;
    color: var(--psrc-ink);
}

.psrc-grid {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.psrc-card {
    background: #fff;
    border: 1px solid var(--psrc-line);
    border-radius: 20px;
    padding: 26px 24px 22px;
    display: flex;
    flex-direction: column;
}

/* 상황 태그 */
.psrc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.psrc-tag {
    font-size: 12px;
    font-weight: 600;
    color: #4A5866;
    background: #F0F4F8;
    padding: 5px 10px;
    border-radius: 7px;
}

/* 카톡 말풍선 */
.psrc-bub {
    position: relative;
    background: var(--psrc-kakao-y);
    border-radius: 16px 16px 16px 4px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.72;
    color: #1A2733;
    letter-spacing: -.01em;
    flex: 1;
}

.psrc-bub::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    border-width: 8px 10px 0 0;
    border-style: solid;
    border-color: var(--psrc-kakao-y) transparent transparent transparent;
}

/* 작성자 */
.psrc-who {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 22px;
}

.psrc-av {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    flex: none;
    background: #EDF1F6;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #7E8B99;
}

.psrc-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--psrc-ink);
    line-height: 1.4;
}

.psrc-meta {
    font-size: 12.5px;
    color: #8A97A4;
    line-height: 1.4;
}

.psrc-note {
    max-width: 1080px;
    margin: 36px auto 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.7;
    color: #8A97A4;
}

@media (max-width: 900px) {
    .psrc-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .psrc-reviews {
        padding: 64px 20px 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psr-mailnoti *,
    .psrb-storenoti *,
    .psrc-reviews * {
        animation: none !important;
        transition: none !important;
    }
}