/* BASIC css start */
/* ==========================================================================
   2026 SSF 이벤트 메인   헤더·푸터는 별도 파일. 여기는 .mainPageContainer 안만.
   여백(--ssfSp*)·글자 크기(--ssfFs*)는 아래 토큰으로만 쓰고, 값이 필요하면 토큰을 먼저 추가.
   ========================================================================== */
:root {
    /* 색 */
    --ssfBand: #b52024; /* 붉은 배경(전 제품 할인·푸터 하단 띠) */
    --ssfRed: #b9232c; /* 어두운 배경 위 타이틀·장식·강조 */
    --ssfSub: #dc4650; /* 어두운 배경 위 소제목   검은 배경에서 대비 4.5:1 이상(예전 #a3262d 는 약 2.6:1 이라 잘 안 보였음) */
    --ssfInk: #140205; /* 붉은 배경 위 글씨 */
    --ssfIvory: #f3ead6; /* 히어로 UI(다시보기·조작 안내) 아이보리 */
    --ssfTitle: var(--ssfRed); /* 섹션 타이틀 색   섹션별로 덮어씀 */
    --ssfSubtitle: var(--ssfSub);
    --ssfTitleScaleX: 0.75; /* 메인 타이포 장평 75% (자간은 -0.1em). 값만 바꾸면 타이틀·숫자가 같이 바뀜 */
    --ssfTitleW: 4; /* 타이틀 글자 폭(em, 장평 적용 전). 섹션별로 맞춰 별 장식과 안 겹치게 */
    --ssfStarW: 9rem; /* 타이틀 양옆 별 장식 폭 (높이는 폭의 1/10) */
    --ssfTitlePadX: calc(var(--ssfStarW) + 2rem); /* 별 장식 ↔ 글자 간격 포함한 타이틀 좌우 여백 */
    --ssfRuleInset: calc(var(--ssfStarW) * 2 + 2rem); /* 위아래 줄이 별 장식을 피해 줄어드는 양 */

    /* 여백 스케일 */
    --ssfSp1: 0.5rem;
    --ssfSp2: 0.75rem;
    --ssfSp3: 1.25rem;
    --ssfSp4: 2rem;
    --ssfSp5: 3.5rem;
    --ssfSp6: 5rem;
    --ssfSp7: 8rem;
    --ssfSectionY: var(--ssfSp7); /* 섹션 위아래 여백 */
    --ssfBlockGap: var(--ssfSp6); /* 타이틀 ↔ 본문 */

    /* 글자 크기 스케일 */
    --ssfFsTitle: 4.5rem; /* 섹션 타이틀(h2) */
    --ssfFsHead: 1.5rem; /* 소제목·카운트다운 */
    --ssfFsLead: 1.0625rem; /* 한글 소제목·안내 문구 */
    --ssfFsBody: 0.9375rem; /* 본문·라벨 */
    --ssfFsSmall: 0.8125rem;

    /* 글꼴 */
    --ssfFont:
        "Fraunces", "Noto Sans KR", sans-serif; /* 메인 폰트는 Fraunces 하나. Fraunces에 없는 한글만 Noto Sans KR로 */

    /* 타이틀 장식(마스크용   색은 currentColor가 입힘) */
    --ssfStar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M10.00,0.60 L11.76,5.57 L17.04,5.71 L12.85,8.93 L14.35,13.99 L10.00,11.00 L5.65,13.99 L7.15,8.93 L2.96,5.71 L8.24,5.57Z'/%3E%3Cpath d='M30.00,0.60 L31.76,5.57 L37.04,5.71 L32.85,8.93 L34.35,13.99 L30.00,11.00 L25.65,13.99 L27.15,8.93 L22.96,5.71 L28.24,5.57Z'/%3E%3Cpath d='M50.00,0.60 L51.76,5.57 L57.04,5.71 L52.85,8.93 L54.35,13.99 L50.00,11.00 L45.65,13.99 L47.15,8.93 L42.96,5.71 L48.24,5.57Z'/%3E%3Cpath d='M70.00,0.60 L71.76,5.57 L77.04,5.71 L72.85,8.93 L74.35,13.99 L70.00,11.00 L65.65,13.99 L67.15,8.93 L62.96,5.71 L68.24,5.57Z'/%3E%3Cpath d='M90.00,0.60 L91.76,5.57 L97.04,5.71 L92.85,8.93 L94.35,13.99 L90.00,11.00 L85.65,13.99 L87.15,8.93 L82.96,5.71 L88.24,5.57Z'/%3E%3Cpath d='M110.00,0.60 L111.76,5.57 L117.04,5.71 L112.85,8.93 L114.35,13.99 L110.00,11.00 L105.65,13.99 L107.15,8.93 L102.96,5.71 L108.24,5.57Z'/%3E%3Cpath d='M130.00,0.60 L131.76,5.57 L137.04,5.71 L132.85,8.93 L134.35,13.99 L130.00,11.00 L125.65,13.99 L127.15,8.93 L122.96,5.71 L128.24,5.57Z'/%3E%3Cpath d='M150.00,0.60 L151.76,5.57 L157.04,5.71 L152.85,8.93 L154.35,13.99 L150.00,11.00 L145.65,13.99 L147.15,8.93 L142.96,5.71 L148.24,5.57Z'/%3E%3C/g%3E%3C/svg%3E");
    --ssfFleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Cg fill='%23000'%3E%3Cpath d='M40 1.5 44.5 6 40 10.5 35.5 6Z'/%3E%3Cpath d='M26 6 31 3.2V8.8Z'/%3E%3Cpath d='M54 6 49 3.2V8.8Z'/%3E%3Ccircle cx='34' cy='6' r='1.1'/%3E%3Ccircle cx='46' cy='6' r='1.1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M31 6C27 0.5 20 1 20 4 20 6 23 6 23 4.2'/%3E%3Cpath d='M49 6C53 0.5 60 1 60 4 60 6 57 6 57 4.2'/%3E%3C/g%3E%3C/svg%3E");
}

body {
    background: var(--eventcolor1);
    overflow-x: hidden;
}

.mainPageContainer {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    background-color: #000;
    overflow-x: clip; /* 100vw 섹션·애니메이션이 가로 스크롤을 만들지 않도록 */
}
.mainPageContainer * {
    color: var(--black);
    font-family: var(--ssfFont);
}
.contentWrapper {
    width: 100vw;
    min-width: var(--pc-min-width);
    max-width: var(--pc-max-width);
}
.contentWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#player {
    display: none !important;
    opacity: 0;
}

/* 흐름형 섹션 공통 (타임세일·전 제품 할인·유의사항). 럭키박스는 무대라 따로 */
.mainPageContainer #contentWrapper5,
.mainPageContainer #contentWrapperIssues {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--ssfBlockGap);
    padding: var(--ssfSectionY) 0;
}

/* ---------- 섹션 타이틀 공통 ---------- */
/* 타이틀 글자 폭(em)   실측값(대문자 기준). 글자를 바꾸면 이 값도 맞출 것 */
#contentWrapper5 {
    --ssfTitleW: 4.35; /* TIME SALE */
}
#contentWrapper4 {
    --ssfTitleW: 4.68; /* LUCKY BOX */
}
#contentWrapperIssues {
    --ssfTitleW: 5.85; /* SPECIAL SALE */
}
.contentTitle {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: var(--ssfSp1);
}
/* 한글 소제목이 위, 영문 타이틀이 아래. 장식(별 8개 + 위아래 줄)은 h2::before 하나로 그림 */
:is(
        #contentWrapper5,
        #contentWrapper4,
        #contentWrapperIssues
    )
    .contentTitle {
    flex-flow: column-reverse nowrap;
    gap: var(--ssfSp3);
    text-align: center;
}
:is(
        #contentWrapper5,
        #contentWrapper4,
        #contentWrapperIssues
    )
    .contentTitle
    h2 {
    position: relative;
    /* 장평으로 글자 폭이 달라진 만큼((배율-1)/2 × 글자 폭) 좌우 여백을 보정해서 별 장식과 간격 유지 */
    padding: var(--ssfSp4)
        calc(
            var(--ssfTitlePadX) + (var(--ssfTitleScaleX) - 1) / 2 * 1em *
                var(--ssfTitleW)
        );
    font-size: var(--ssfFsTitle);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase; /* 메인 타이틀은 전부 대문자 */
    letter-spacing: -0.03em;
    word-spacing: 0.25em; /* 자간을 좁히면 단어 사이도 붙어버려서 단어 간격만 보정 */
    white-space: nowrap;
    color: var(--ssfTitle);
    transform: scaleX(var(--ssfTitleScaleX));
}
:is(
        #contentWrapper5,
        #contentWrapper4,
        #contentWrapperIssues
    )
    .contentTitle
    h2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask-image:
        var(--ssfStar), var(--ssfStar), linear-gradient(#000, #000),
        var(--ssfFleuron), linear-gradient(#000, #000), var(--ssfFleuron);
    mask-image:
        var(--ssfStar), var(--ssfStar), linear-gradient(#000, #000),
        var(--ssfFleuron), linear-gradient(#000, #000), var(--ssfFleuron);
    -webkit-mask-position:
        left center,
        right center,
        center top 5.5px,
        center top,
        center bottom 5.5px,
        center bottom;
    mask-position:
        left center,
        right center,
        center top 5.5px,
        center top,
        center bottom 5.5px,
        center bottom;
    -webkit-mask-size:
        var(--ssfStarW) calc(var(--ssfStarW) / var(--ssfStarRatio, 10)),
        var(--ssfStarW) calc(var(--ssfStarW) / var(--ssfStarRatio, 10)),
        calc(100% - var(--ssfRuleInset)) 1px,
        80px 12px,
        calc(100% - var(--ssfRuleInset)) 1px,
        80px 12px;
    mask-size:
        var(--ssfStarW) calc(var(--ssfStarW) / var(--ssfStarRatio, 10)),
        var(--ssfStarW) calc(var(--ssfStarW) / var(--ssfStarRatio, 10)),
        calc(100% - var(--ssfRuleInset)) 1px,
        80px 12px,
        calc(100% - var(--ssfRuleInset)) 1px,
        80px 12px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform: scaleX(
        calc(1 / var(--ssfTitleScaleX))
    ); /* 부모의 장평을 상쇄해 장식은 원래 크기 */
}
:is(
        #contentWrapper5,
        #contentWrapper4,
        #contentWrapperIssues
    )
    .contentTitle
    h4 {
    font-family: var(--ssfFont);
    font-size: var(--ssfFsLead);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ssfSubtitle);
}
/* 타이틀 위 설명글의 강제 줄바꿈(<br>)은 폰처럼 좁을 때만 적용   가로가 넉넉한 태블릿·PC 에서는 한 줄로 이어짐
   (HTML 에서 <br> 앞에 공백을 둬서 한 줄이 돼도 단어가 붙지 않음) */
.contentTitle h4 br {
    display: none;
}
@media (max-width: 599px) {
    .contentTitle h4 br {
        display: inline;
    }
}

/* 히어로 (3D 극장) */
#hero {
    /* 헤더 + 히어로가 한 화면(100vh)에 딱 들어오도록   헤더 높이(--ssfHeaderH)는 event-hero3d.js 가 실제 높이를
       재서 넣어 줌(배너를 닫거나 화면 폭이 바뀌어 헤더 높이가 달라져도 따라감). 값이 없으면 예전처럼 100vh.
       모바일은 주소창을 뺀 보이는 높이(svh)를 우선 씀. 화면이 작아지면 렌더 픽셀도 줄어 GPU 부담이 줄어듦 */
    height: calc(100vh - var(--ssfHeaderH, 0px));
    height: calc(100svh - var(--ssfHeaderH, 0px));
    min-height: Calc(var(--pc-min-width) / 2.4);
    max-height: Calc(var(--pc-max-width) / 2.4);
}

#hero canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* cursor: none; */
}

/* 모서리를 어둡게 눌러서 시선이 가운데 무대로 모이게 하는 비네팅 */
#hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

#replayBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid rgba(243, 234, 214, 0.5);
    color: var(--ssfIvory);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

#replayBtn:hover {
    background: rgba(243, 234, 214, 0.16);
}

/* 히어로 카운트다운   세일 시작 전에만 보임(event-hero3d.js 의 runSaleCountdown 이 .is-active 를 붙였다 뗌).
   기본은 display: none 이라, 시작 시각이 지난 뒤에 들어온 사람에게는 처음부터 안 보임. 3D 히어로 위를 덮는 검은 무대 */
#heroCountdown {
    display: none;
}
#heroCountdown.is-active {
    position: absolute;
    inset: 0;
    z-index: 20; /* #loading(10)·비네팅(1)·다시보기 버튼(2) 위 */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--ssfSp3);
    padding: 0 var(--ssfSp4);
    background: radial-gradient(ellipse at center, #14050a 0%, #050505 70%);
    text-align: center;
}
#heroCountdown .heroCountdownLabel {
    font-family: var(--ssfFont);
    font-size: var(--ssfFsLead);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-indent: 0.3em; /* 글자 사이 간격 때문에 한쪽으로 쏠리는 것을 보정 */
    color: var(--ssfSub);
}
#heroCountdown .heroCountdownTime {
    font-family: var(--ssfFont);
    font-size: clamp(2.25rem, 8vw, 6rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums; /* 숫자 폭을 같게 해서 1초마다 흔들리지 않게 */
    white-space: nowrap;
    color: var(--ssfIvory);
}
/* 숫자 위아래의 얇은 붉은 줄(극장 안내판 느낌) */
#heroCountdown .heroCountdownTime::before,
#heroCountdown .heroCountdownTime::after {
    content: "";
    display: block;
    width: min(60vw, 28rem);
    height: 1px;
    margin: var(--ssfSp3) auto;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(185, 35, 44, 0.8),
        transparent
    );
}

/* 히어로 조작 안내   인트로 뒤에 단계별로 한 장씩(JS가 만들어 붙임: event-hero3d.js setupGuide). 안내대로 조작하면 체크 표시 후 사라짐.
   모양은 다시보기 버튼(#replayBtn)과 같은 알약   배경·테두리·글자 크기·자간을 맞춤.
   위치는 왼쪽 위(다시보기 버튼과 좌우 대칭)   히어로 아래쪽은 헤더 때문에 첫 화면 밖으로 밀려나고, 가운데는 3D 로고·문구 자리라서 */
.heroGuide {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 14px;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid rgba(243, 234, 214, 0.5);
    border-radius: 999px;
    color: var(--ssfIvory);
    backdrop-filter: blur(4px);
    pointer-events: none; /* 3D 조작을 가리지 않음 */
    opacity: 0;
    transform: translateY(-0.75rem);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
.heroGuide * {
    color: inherit;
}
.heroGuide.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.heroGuideText {
    display: flex;
    flex-flow: column nowrap;
    gap: 2px;
    text-align: left;
}
.heroGuideText strong {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    white-space: nowrap;
}
.heroGuideText span {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    opacity: 0.65;
    white-space: nowrap;
}
.heroGuideStep {
    padding-left: 12px;
    border-left: 1px solid rgba(243, 234, 214, 0.3);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    opacity: 0.65;
    white-space: nowrap;
}
/* 아이콘: 선 위를 점이 오감. 1단계는 점만(마우스 이동), 2단계는 점을 누른 채(링) 양옆 화살표 쪽으로(드래그),
   3단계는 링이 커졌다 작아짐(확대·축소) */
.heroGuideIcon {
    position: relative;
    flex: none;
    width: 2.75rem;
    height: 1.5rem;
}
.heroGuideIcon::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(243, 234, 214, 0.35);
}
.heroGuideIcon i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: -0.325rem;
    border-radius: 50%;
    background: var(--ssfIvory);
    animation: heroGuideMove 1.8s ease-in-out infinite;
}
.heroGuide[data-step="drag"] .heroGuideIcon i {
    box-shadow: 0 0 0 0.22rem rgba(243, 234, 214, 0.25);
    animation-name: heroGuideDrag;
}
.heroGuide[data-step="drag"] .heroGuideIcon::after {
    content: " 9       :";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.3rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1;
    white-space: pre;
    opacity: 0.6;
}
.heroGuide[data-step="zoom"] .heroGuideIcon::before {
    opacity: 0;
}
.heroGuide[data-step="zoom"] .heroGuideIcon i {
    left: 50%;
    margin-left: -0.325rem;
    background: none;
    border: 1px solid var(--ssfIvory);
    animation-name: heroGuideZoom;
}
/* 완료: 점이 체크 표시로 */
.heroGuide.is-done .heroGuideIcon::before {
    opacity: 0;
}
.heroGuide.is-done .heroGuideIcon::after {
    display: none;
}
.heroGuide.is-done .heroGuideIcon i {
    left: 50%;
    width: 0.4rem;
    height: 0.8rem;
    margin: -0.55rem 0 0 -0.2rem;
    border: solid var(--ssfIvory);
    border-width: 0 2px 2px 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: rotate(45deg);
    animation: none;
}
@keyframes heroGuideMove {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.45;
    }
    50% {
        transform: translateX(2.1rem);
        opacity: 1;
    }
}
@keyframes heroGuideDrag {
    0%,
    10% {
        transform: translateX(0.4rem) scale(1.15);
    }
    80%,
    100% {
        transform: translateX(1.7rem) scale(0.85);
    }
}
@keyframes heroGuideZoom {
    0%,
    100% {
        transform: scale(0.7);
        opacity: 0.6;
    }
    50% {
        transform: scale(2.2);
        opacity: 1;
    }
}
@media (max-width: 640px) {
    /* 좁은 화면: 다시보기 버튼과 안 겹치게 설명 줄과 단계 표시를 뺌 */
    .heroGuideText span,
    .heroGuideStep {
        display: none;
    }
    .heroGuide {
        padding-right: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .heroGuideIcon i {
        animation: none;
    }
}

/* 바닥에 떨어진 프로그램북을 클릭하면 크게 보여주는 화면(방탈출 아이템 확대 느낌) */
.program-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    visibility: hidden;
    transition:
        background 0.4s ease,
        visibility 0s 0.6s;
}

.program-overlay.is-open {
    background: rgba(0, 0, 0, 0.78);
    pointer-events: auto;
    visibility: visible;
    cursor: zoom-out;
    transition: background 0.4s ease;
}

.program-sheet {
    /* 세로 88vh에 맞추되(종이 비율 1000:1414) 가로가 좁은 화면에서는 넘치지 않게 */
    width: min(92vw, 620px, 62vh);
    aspect-ratio: 1000 / 1414;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 0;
    /* 바닥의 종이 위치에서 날아와 커지는 시작 상태   --from-x/y는 JS가 계산 */
    transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(-18deg)
        scale(0.15);
    transition:
        transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1),
        opacity 0.35s ease;
}

.program-overlay.is-open .program-sheet {
    opacity: 1;
    transform: rotate(-1.2deg);
}

.program-sheet canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.program-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9c7a3d;
    font-size: 12px;
    letter-spacing: 0.3em;
    z-index: 10;
    background: #050505;
    transition: opacity 0.6s ease;
}

/* 타임세일(#contentWrapper5) 스타일은 timesale-event26.css 한 파일에서 관리 */

/* ---------- 럭키박스   무대(배경) 위에 상자, 타이틀·SNS는 같은 칸에 겹침 ---------- */
#contentWrapper4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    padding: 0;
    /* 바닥 빛(scale 애니메이션)·조명이 무대 밖으로 삐져나와 페이지 스크롤 크기가 계속 바뀌던 것을 막음 */
    overflow: hidden;
    /* 배경 위아래를 잘라냄   빛이 모이는 바닥이 무대 아래쪽에 오도록 위를 더 많이 자름 */
    background:
        url("https://ai.esmplus.com/sentimall/etc/event/luckybox-bg.jpg") center
            95% / cover no-repeat,
        #050001;
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.7s ease;
}
#contentWrapper4 > * {
    grid-column: 1;
    grid-row: 1;
}
#contentWrapper4 .contentTitle {
    align-self: start;
    z-index: 1;
    /* 타이틀 아래 ~ 상자 윗면이 다른 섹션과 같은 --ssfBlockGap(5rem)이 되도록.
       상자 윗면은 무대 높이의 44%(아래 img 의 top 66% " 상자 높이 25.2% × 0.874)이고 무대 높이는 폭에 비례하므로,
       타이틀 칸의 높이를 "무대의 44% " 5rem " 1.5rem"으로 잡고 글자를 칸의 아래쪽에 붙여서
       화면 폭이 바뀌어도 타이틀 아래끝이 항상 상자 윗면에서 5rem 위에 오게 함.
       (이 타이틀은 column-reverse 라서 flex-start 가 "아래쪽"임)
       상자 위치·크기(img top·width)를 바꾸면 이 44%도 같이 바꿀 것 */
    box-sizing: border-box;
    /* height 가 아니라 min-height: 모바일 페이지처럼 글자 기준(rem)이 커서 설명글·타이틀이 더 높아지는 경우(1024px 등)에
       고정 높이면 내용이 위로 넘쳐 섹션의 overflow:hidden 에 잘려 설명글이 안 보임 → 내용이 더 크면 칸이 같이 커짐 */
    min-height: calc(44% - var(--ssfBlockGap) - 1.5rem); /* 5rem 간격에 1.5rem 더 띄워 타이틀을 위로 올림 */
    justify-content: flex-start;
    padding-top: 0;
}
/* 무대 높이를 정하는 칸. 클릭·호버는 아래 ::after(상자 크기)만 받도록 평소엔 이벤트를 끔 */
#contentWrapper4 .imgWrapper {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 1972 / 1160;
    overflow: hidden;
    pointer-events: none;
}
/* 오브젝트 PNG는 투명 여백을 잘라낸 상자 크기(401×396) 그대로라서, 폭 15%로 직접 놓음.
   상자는 배경의 "바닥 빛 웅덩이" 위에 올라가 서 있어야 하므로, 상자 중심이 아니라 "바닥에 닿는 자리"
   (상자 바닥면의 중심 = 이미지의 가로 49.9% · 세로 87.4%)를 웅덩이 중심(가로 50.6% · 세로 66%)에 맞춤.
   위치가 바뀌면 이 left/top/width/translate 와 아래 ::after(클릭 영역)·빛 효과(::before)를 같이 맞출 것 */
#contentWrapper4 .imgWrapper img {
    position: absolute;
    left: 50.6%;
    top: 66%;
    width: 15%;
    height: auto;
    transform: translate(-49.9%, -87.4%);
    transform-origin: 49.9% 87.4%; /* 호버로 커질 때 바닥에 선 채로 위로 커짐 */
    transition:
        transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1),
        rotate 0.6s ease,
        filter 0.6s ease;
    animation: luckyFloat 4s ease-in-out infinite; /* 둥실 떠 있음 */
}
/* 조명이 닿는 바닥의 빛 웅덩이(타원)   상자 뒤에 깔려야 하니 오브젝트보다 먼저 그려지는 ::before */
#contentWrapper4 .imgWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 16.7% 7.3% at 50.6% 67%,
        rgba(255, 180, 180, 0.6),
        rgba(255, 140, 140, 0.38) 70%,
        rgba(255, 120, 120, 0) 100%
    );
    filter: blur(14px);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.6s ease;
}
/* 상자 자리만 클릭·호버를 받는 투명한 칸 */
#contentWrapper4 .imgWrapper::after {
    content: "";
    position: absolute;
    left: 43.1%; /* 50.6 - 15 × 0.499 */
    top: 44%; /* 66 - 25.2 × 0.874 */
    width: 15%;
    height: 25.2%; /* 상자 PNG 비율(401:396)을 무대 비율에 맞춰 환산한 값 */
    pointer-events: auto;
    cursor: pointer;
}

/* 스포트라이트 인터랙션 (CSS만)   상자를 선택(호버)했을 때만 조명이 들어옴 */
/* 바닥에 고인 붉은 빛   평소엔 숨 쉬듯, 선택하면 밝아짐 */
#contentWrapper4::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 26% 11% at 50.6% 66%,
        rgba(255, 60, 60, 0.55),
        rgba(255, 60, 60, 0) 70%
    );
    mix-blend-mode: screen;
    opacity: 0.55;
    transform-origin: 50.6% 66%;
    transition: opacity 0.6s ease;
    animation: luckyGlow 3.6s ease-in-out infinite;
}
/* 위에서 꽂히는 조명 기둥   상자 앞쪽(위)에 겹침. 가장자리는 blur로 부드럽게 */
#contentWrapper4::after {
    content: "";
    position: absolute;
    top: 0;
    left: 28.6%; /* 기둥 가운데 = 웅덩이 중심(50.6%) */
    width: 44%;
    height: 76%; /* 기둥 아랫변(높이의 88%)이 웅덩이(무대의 약 67%)에 닿도록 */
    pointer-events: none;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ff9696' stop-opacity='0'/><stop offset='.7' stop-color='%23ffa0a0' stop-opacity='.38'/><stop offset='1' stop-color='%23ff7878' stop-opacity='.2'/></linearGradient></defs><polygon points='43,0 57,0 88,88 12,88' fill='url(%23g)'/></svg>")
        center / 100% 100% no-repeat;
    filter: blur(14px);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#contentWrapper4:has(.imgWrapper:hover) {
    box-shadow: inset 0 0 16rem 4rem rgba(0, 0, 0, 0.7);
}
#contentWrapper4:has(.imgWrapper:hover)::before,
#contentWrapper4:has(.imgWrapper:hover)::after,
#contentWrapper4:has(.imgWrapper:hover) .imgWrapper::before {
    opacity: 1;
}
#contentWrapper4 .imgWrapper:hover img {
    transform: translate(-49.9%, -87.4%) scale(1.086); /* 호버 때 약 8.6% 커짐 */
    rotate: -1.5deg;
    filter: brightness(1.18) drop-shadow(0 0 2rem rgba(255, 70, 70, 0.5));
}
@keyframes luckyFloat {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -1.2%;
    }
}
@keyframes luckyGlow {
    0%,
    100% {
        scale: 1;
    }
    50% {
        scale: 1.12;
    }
}
@media (prefers-reduced-motion: reduce) {
    #contentWrapper4 .imgWrapper img,
    #contentWrapper4::before {
        animation: none;
    }
}

/* 재입고 안내   상자 바로 아래에 얹은 안내판. 유의사항 박스와 같은 붉은 이중 테두리로 통일하고,
   고객이 놓치지 않도록 문구·아이콘을 크게 */
#contentWrapper4 .content4btnsWrapper {
    align-self: end;
    justify-self: center;
    z-index: 1;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssfSp5);
    width: min(58rem, calc(100% - 4rem));
    margin-bottom: calc(var(--ssfSp6) + 2rem); /* 아래 여백을 늘려 알림 영역을 위로 올림 */
    padding: var(--ssfSp3) var(--ssfSp5);
    border: 1px solid rgba(185, 35, 44, 0.6);
    outline: 1px solid rgba(185, 35, 44, 0.25);
    outline-offset: 0.4rem;
    border-radius: 0;
    background: linear-gradient(rgba(24, 4, 8, 0.82), rgba(8, 1, 3, 0.9));
    backdrop-filter: blur(6px);
}
/* PC 폭이 좁을 때(약 1120px 미만): 무대 높이는 폭에 비례해 줄지만 안내판 높이(약 8rem)와 아래 여백은 고정이라,
   안내판이 상자 바닥(무대의 66%) 위로 올라와 상자를 덮음. 상자 바닥 아래 공간(무대의 34% = 폭의 약 20%)에서
   안내판 높이(8rem)와 상자 ↔ 안내판 간격(약 1.75rem)을 뺀 만큼(20vw " 9.75rem)으로 아래 여백을 줄여서, 상자 바닥과 안내판 사이를 항상 띄움 */
@media (min-width: 1024px) {
    #contentWrapper4 .content4btnsWrapper {
        margin-bottom: max(
            0.75rem,
            min(calc(var(--ssfSp6) + 2rem), calc(20vw - 9.75rem))
        );
    }
}
#contentWrapper4 .content4btnsWrapper h5 {
    order: 1; /* 안내 문구가 왼쪽, 아이콘이 오른쪽 */
    display: flex;
    flex-flow: column nowrap;
    gap: var(--ssfSp1);
    font-family: var(--ssfFont);
    font-size: var(--ssfFsLead);
    font-weight: 400;
    line-height: 1.5;
    color: #ffffffcc; /* 흰색 대신 붉은 기가 도는 연한 톤 */
}
#contentWrapper4 .content4btnsWrapper h5::before {
    content: "RESTOCK NOTICE";
    font-family: var(--ssfFont);
    font-size: var(--ssfFsSmall);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--ssfRed);
}
.content4btns {
    order: 2;
    flex: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: var(--ssfSp5);
    width: auto;
}
/* 아이콘은 HTML에 인라인 svg(검은색)로 들어 있고, 아래 .content4btns a svg 의 fill 로 붉은색을 입힘 */
.content4btns a {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: var(--ssfSp1);
    cursor: pointer;
    transition: transform 0.3s;
}
.content4btns a:hover {
    transform: translateY(-0.25rem);
}
.content4btns a svg {
    width: 3.5rem;
    height: auto;
    /* 예전엔 검은 svg 를 filter(invert·sepia·saturate·hue-rotate 체인)로 붉게 만들었는데, 브라우저마다 이 필터 결과가 달라서
       폰(iOS 사파리·네이버 앱)에서는 주황빛으로 보였음 → 그 체인이 크롬에서 만들어 내던 색(#fd3f46, 호버 #ff4b54)을 fill 로 고정함.
       svg 에는 fill 지정이 없어서(기본 검정) 이 fill 이 그대로 적용됨 */
    fill: #fd3f46;
    transition:
        fill 0.3s,
        filter 0.3s;
}
.content4btns a:hover svg {
    fill: #ff4b54;
    filter: drop-shadow(0 0 0.75rem rgba(255, 70, 70, 0.6));
}
#contentWrapper4 .content4btns a p {
    font-family: var(--ssfFont);
    font-size: var(--ssfFsBody);
    font-weight: 500;
    white-space: nowrap;
    color: #ffffffbb;
}

/* ---------- 전 제품 할인   붉은 배경, 검은 패널(sale_basic) / 호버하면 붉은 패널(sale_basic_hover) ---------- */
#contentWrapperIssues {
    --ssfTitle: var(--ssfInk);
    --ssfSubtitle: var(--ssfInk);
    background: linear-gradient(var(--ssfBand) 0%, #a21b20 100%);
}
.issueContents {
    display: flex;
    justify-content: center;
    gap: 7vw;
    max-width: var(--content-max-width);
    width: 100%;
    padding: 0 var(--smallgap);
}
.issueContent {
    flex: none;
    width: clamp(13.5rem, 15vw, 23rem); /* 1440px 이하에서도 패널 글씨가 읽히도록 최소 폭 216px */
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 581 / 762;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: url("https://ai.esmplus.com/sentimall/etc/event/sale_basic.jpg")
        center / 100% 100% no-repeat;
    color: var(--ssfRed);
    /* filter: drop-shadow 는 스크롤할 때마다 폰(특히 iOS 사파리)에서 그림자가 다시 그려져 심하게 깜빡임 → 같은 모양의 box-shadow 로 바꿈.
       패널이 직사각형이라 결과가 같고, drop-shadow 의 번짐(표준편차)이 box-shadow 블러의 절반이라 블러 값을 두 배(2.5rem)로 맞춤 */
    box-shadow: 0 1rem 2.5rem rgba(20, 2, 5, 0.5);
    container-type: inline-size;
    transition:
        transform 0.4s ease,
        color 0.4s ease;
}
/* 호버용 붉은 패널은 위에 겹쳐 두고 투명도로 교차 */
.issueContent::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: url("https://ai.esmplus.com/sentimall/etc/event/sale_basic_hover.jpg")
        center / 100% 100% no-repeat;
    transition: opacity 0.4s ease;
}
.issueContent:hover {
    background: url("https://ai.esmplus.com/sentimall/etc/event/sale_basic.jpg")
        center / 100% 100% no-repeat;
    color: var(--ssfInk);
    transform: translateY(-0.75rem);
}
.issueContent:hover::after {
    opacity: 1;
}
.issueContent .disc {
    display: none;
}
.issueContent::before {
    content: "SENTI SALE FESTA";
    position: absolute;
    z-index: 1;
    top: 11%;
    left: 0;
    width: 100%;
    font-size: max(5.4cqw, 10px); /* 패널이 좁아도 10px 밑으로는 안 내려감 */
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    color: inherit;
}
.issueContentText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    color: inherit;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 3cqw;
}
.issueContentText h3,
.issueContentText h5,
.issueContent:hover .issueContentText * {
    color: inherit;
}
.issueContentTextMain {
    font-size: 38cqw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em; /* 큼직한 숫자도 타이틀과 같은 장평·자간 */
    transform: scaleX(var(--ssfTitleScaleX));
}
.issueContentTextSub {
    font-family: var(--ssfFont);
    font-size: max(4.6cqw, 11px); /* 패널이 좁아도 11px 밑으로는 안 내려감 */
    font-weight: 500;
    opacity: 0.85;
}

/* ==========================================================================
   모바일·태블릿 (1023px 이하)   모바일 페이지도 이 파일을 그대로 씀.

   글씨 단계 (모든 글씨는 이 다섯 단계 중 하나만 씀   새 크기를 만들지 말 것)
   위계: 타이틀 묶음(영문 타이틀 + 한글 설명) > 섹션 안 소제목 > 본문 > 라벨.
   한글 설명(Lead)과 본문(Body)은 크기 1px + 색(붉은 강조 vs 아이보리)+ 굵기로 갈라 둠
     Title  34px  / 줄 1.0  / 600 이탤릭   섹션 영문 타이틀(h2)
     Head   18px  / 줄 1.3  / 600          섹션 안 소제목(유의사항 분류), 카운트다운 숫자
     Lead   14px  / 줄 1.5  / 500 붉은색   (타이틀 한글 설명 h4)
     Body   13px  / 줄 1.6  / 400 아이보리 본문(재입고 안내·유의사항 항목·할인 패널 안내)
     Small  11px  / 줄 1.4  / 500          라벨(세일 시작까지·RESTOCK NOTICE·SNS 이름)
   여백 단계 (4px 배수): 8 · 12 · 16 · 24 · 32 · 40 · 64, 화면 좌우 여백(--ssfGutter) 20
     섹션 위아래 64 / 타이틀 ↔ 본문 40 / 소제목 ↔ 영문 타이틀 12 / 카드·패널 사이 24~32
   줄바꿈: 한글은 단어 단위(keep-all)로만 끊고, 제목은 줄 길이를 고르게(balance),
          본문은 마지막 줄에 한 단어만 남지 않게(pretty)
   ========================================================================== */
@media (max-width: 1023px) {
    :root {
        --ssfSp1: 0.5rem; /* 8 */
        --ssfSp2: 0.75rem; /* 12 */
        --ssfSp3: 1rem; /* 16 */
        --ssfSp4: 1.5rem; /* 24 */
        --ssfSp5: 2rem; /* 32 */
        --ssfSp6: 2.5rem; /* 40   타이틀 ↔ 본문 (--ssfBlockGap) */
        --ssfSp7: 4rem; /* 64   섹션 위아래 (--ssfSectionY) */
        --ssfGutter: 1.25rem; /* 20   화면 좌우 여백 */

        --ssfFsTitle: clamp(2rem, 9vw, 3rem); /* 폰 약 34, 태블릿에서 조금 커짐 */
        --ssfFsHead: 1.125rem; /* 18 */
        --ssfFsLead: 0.875rem; /* 14 */
        --ssfFsBody: 0.8125rem; /* 13 */
        --ssfFsSmall: 0.6875rem; /* 11 */
        --ssfLhHead: 1.3;
        --ssfLhLead: 1.5;
        --ssfLhBody: 1.6;
        --ssfLhSmall: 1.4;

        --ssfStarW: clamp(3.5rem, 15vw, 6.5rem); /* 폰 약 56 */
        /* 모바일은 별을 양옆 4개씩만(PC는 8개)   폭:높이 5:1짜리 svg 에 맞춰 비율도 바꿈 */
        --ssfStarRatio: 5;
        --ssfStar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M10.00,0.60 L11.76,5.57 L17.04,5.71 L12.85,8.93 L14.35,13.99 L10.00,11.00 L5.65,13.99 L7.15,8.93 L2.96,5.71 L8.24,5.57Z'/%3E%3Cpath d='M30.00,0.60 L31.76,5.57 L37.04,5.71 L32.85,8.93 L34.35,13.99 L30.00,11.00 L25.65,13.99 L27.15,8.93 L22.96,5.71 L28.24,5.57Z'/%3E%3Cpath d='M50.00,0.60 L51.76,5.57 L57.04,5.71 L52.85,8.93 L54.35,13.99 L50.00,11.00 L45.65,13.99 L47.15,8.93 L42.96,5.71 L48.24,5.57Z'/%3E%3Cpath d='M70.00,0.60 L71.76,5.57 L77.04,5.71 L72.85,8.93 L74.35,13.99 L70.00,11.00 L65.65,13.99 L67.15,8.93 L62.96,5.71 L68.24,5.57Z'/%3E%3C/g%3E%3C/svg%3E");
        --ssfTitlePadX: calc(var(--ssfStarW) + 0.75rem);
        --ssfRuleInset: calc(var(--ssfStarW) * 2 + 1rem);
    }

    /* ---------- 섹션 타이틀   한글 소제목(Lead) ↔ 영문 타이틀(Title) 12 ---------- */
    :is(
            #contentWrapper5,
            #contentWrapper4,
            #contentWrapperIssues
        )
        .contentTitle {
        gap: var(--ssfSp2);
    }
    :is(
            #contentWrapper5,
            #contentWrapper4,
            #contentWrapperIssues
        )
        .contentTitle
        h2 {
        padding-top: var(--ssfSp3);
        padding-bottom: var(--ssfSp3);
    }
    :is(
            #contentWrapper5,
            #contentWrapper4,
            #contentWrapperIssues
        )
        .contentTitle
        h4 {
        padding: 0 var(--ssfGutter);
        line-height: var(--ssfLhLead);
        word-break: keep-all; /* 한글은 단어 단위로만 끊고 */
        text-wrap: balance; /* 두 줄이 되면 줄 길이를 고르게 */
    }

    /* 히어로: 화면 높이(vh)가 아니라 화면 폭 기준으로 가로:세로 3:4   이보다 길어지지 않음.
       세로 화면은 JS(onResize)가 카메라를 당겨 맞춰 줌 */
    #hero {
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 3 / 4;
    }
    /* 모바일은 다시보기 없이 조작 안내만   위에 두면 로고 위 3D 문구를 가려서 아래쪽 바닥(빈 자리) 가운데로 */
    #replayBtn {
        display: none;
    }
    .heroGuide {
        top: auto;
        bottom: var(--ssfSp3);
        left: 0;
        right: 0;
        width: max-content;
        margin: 0 auto;
        transform: translateY(0.75rem);
    }
    .heroGuide.is-visible {
        transform: translateY(0);
    }

    /* ---------- 럭키박스   타이틀 / 정사각형 무대 / 안내판을 위에서 아래로 ----------
       PC 무대(1972:1160)를 그대로 줄이면 상자가 너무 작아서, 배경을 무대 칸(.imgWrapper)으로 옮기고
       정사각형으로 가운데만 잘라 씀. 배경은 높이에 맞춰지고(cover) 좌우만 잘리므로,
       PC 기준 위치·크기(가로 %)를 1972/1160 배 키우고 잘린 만큼 옮긴 값:
       웅덩이 중심 50.6% → 51%, 상자 폭 15% → 34%(원래 25.5%에서 키움), 바닥 위치(66%)는 그대로 */
    #contentWrapper4 {
        --ssfStageW: min(100vw, 40rem); /* 무대(.imgWrapper) 폭   아래 max-width 와 같게 */
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        gap: var(--ssfSp5);
        padding: var(--ssfSectionY) 0;
        background: #050001;
    }
    /* 섹션 전체에 걸던 조명(기둥·바닥 빛)은 무대 칸과 위치가 어긋나므로 끔   바닥 빛은 .imgWrapper::before 가 대신함 */
    #contentWrapper4::before,
    #contentWrapper4::after {
        display: none;
    }
    #contentWrapper4 .contentTitle {
        align-self: center;
        height: auto;
        min-height: 0; /* PC 의 min-height(무대 높이 비율)는 모바일 세로 배치에선 안 씀 */
        z-index: 1;
    }
    /* 무대 위쪽 44%(상자 윗면까지)는 빈 배경이라 그대로 두면 타이틀과 상자 사이가 너무 뜸 →
       무대를 위로 끌어올려 타이틀이 빈 배경 위에 겹치게 하고, 타이틀 ↔ 상자 간격을 --ssfBlockGap 으로 맞춤 */
    #contentWrapper4 .imgWrapper {
        width: 100%;
        max-width: 40rem;
        aspect-ratio: 1 / 1;
        margin-top: calc(
            var(--ssfBlockGap) - var(--ssfSp5) - var(--ssfStageW) * 0.363
        ); /* 0.363 = 상자 윗면 위치(무대 위에서 36.3%). 상자를 키우면 윗면이 올라가므로 같이 바꿈 */
        background: url("https://ai.esmplus.com/sentimall/etc/event/luckybox-bg.jpg")
            center / cover no-repeat;
        box-shadow: inset 0 0 2.5rem 1.5rem #050001; /* 잘린 가장자리를 검은 배경에 녹임 */
    }
    #contentWrapper4 .imgWrapper img {
        left: 51%;
        width: 34%; /* 바닥 중심(51%, 66%)은 그대로 두고 위로 커짐 */
    }
    #contentWrapper4 .imgWrapper::before {
        opacity: 0.6; /* 호버가 없는 터치 화면에서도 바닥 빛이 은은하게 보이게 */
        background: radial-gradient(
            ellipse 37.9% 9.7% at 51% 67%,
            rgba(255, 180, 180, 0.6),
            rgba(255, 140, 140, 0.38) 70%,
            rgba(255, 120, 120, 0) 100%
        );
    }
    #contentWrapper4 .imgWrapper::after {
        left: 34%; /* 51 - 34 × 0.499 */
        top: 36.3%; /* 66 - 34 × 0.874 */
        width: 34%;
        height: 33.6%; /* 상자 높이 = 폭 × 0.987 */
    }
    #contentWrapper4:has(.imgWrapper:hover) {
        box-shadow: none;
    }
    /* 재입고 안내판: 안쪽 24 / 20, 라벨(Small) · 문구(Body) · 아이콘 줄 사이 16·24 */
    #contentWrapper4 .content4btnsWrapper {
        align-self: center;
        flex-flow: column nowrap;
        gap: var(--ssfSp4);
        width: calc(100% - var(--ssfGutter) * 2);
        max-width: 36rem;
        /* 상자 바닥(무대 66%) 아래 34%도 빈 바닥이라, 상자 ↔ 안내판 간격을 --ssfBlockGap 으로 맞추도록 끌어올림 */
        margin-top: calc(
            var(--ssfBlockGap) - var(--ssfSp5) - var(--ssfStageW) * 0.34
        );
        margin-bottom: 0;
        padding: var(--ssfSp4) var(--ssfGutter);
        outline-offset: 0.3rem;
        text-align: center;
    }
    #contentWrapper4 .content4btnsWrapper h5 {
        align-items: center;
        gap: var(--ssfSp2);
        font-size: var(--ssfFsBody);
        font-weight: 400;
        line-height: var(--ssfLhBody);
        color: #e6d9c3; /* 본문 아이보리(유의사항 항목과 같은 색)   붉은 한글 설명과 구분 */
        word-break: keep-all;
        text-wrap: balance;
    }
    #contentWrapper4 .content4btnsWrapper h5::before {
        line-height: var(--ssfLhSmall);
    }
    .content4btns {
        gap: var(--ssfSp6);
    }
    .content4btns a {
        gap: var(--ssfSp1);
    }
    .content4btns a svg {
        width: 2.5rem;
    }
    #contentWrapper4 .content4btns a p {
        font-size: var(--ssfFsSmall);
        line-height: var(--ssfLhSmall);
    }

    /* ---------- 전 제품 할인   패널 세 장을 세로로(한 줄에 하나씩), 사이 24 ---------- */
    .issueContents {
        flex-flow: column nowrap;
        align-items: center;
        gap: var(--ssfSp4);
        padding: 0 var(--ssfGutter);
    }
    .issueContent {
        width: min(52vw, 15rem);
    }
    /* 패널 폭 기준(cqw) 글씨   폰(약 195px 패널)에서 패널 라벨 약 12px, 안내 약 12px */
    .issueContent::before {
        font-size: max(6.2cqw, 10px);
    }
    .issueContent .issueContentTextSub {
        font-size: max(6cqw, 11px);
        font-weight: 400;
        text-align: center;
        word-break: keep-all;
        opacity: 1;
        color: #e0646b; /* 검은 패널 위에서 대비 4.5:1 이상으로 붉은색을 밝힘. 호버(붉은 패널)에선 위 공통 규칙이 다시 어두운 글씨로 바꿈 */
    }
    /* 터치 화면엔 호버가 없어서, 누르는 순간 패널이 살짝 눌리게 해 반응을 보여 줌 */
    .issueContent:active {
        transform: scale(0.97);
    }
}

/* ---------- 브라우저 기본 표면   글자 선택색과 키보드 포커스 링을 극장 톤에 맞춤 ---------- */
.mainPageContainer ::selection {
    background: #e6d9c3;
    color: var(--ssfInk);
}
:is(#contentWrapper4, #contentWrapper5, #contentWrapperIssues) a:focus-visible {
    outline: 2px solid var(--ssfIvory);
    outline-offset: 4px;
}

/* ---------- 태블릿 (600~1023px)   폰보다 넓어서 전 제품 할인 패널을 세로로 쌓으면 양옆이 텅 빔 → 가로 한 줄로 ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
    .issueContents {
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: var(--ssfSp4);
    }
    .issueContent {
        flex: 0 1 15rem;
        width: auto;
        min-width: 0;
    }
}

/* BASIC css end */