/* ============================================================
   QuestRank v5 — Refined UI
   Design direction: Apple HIG 기반. 절제된 색, 명확한 타이포 위계,
   부드러운 모션, 모바일 최우선.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    /* ── Color — Label ── */
    --label:#0B0B14;
    --label-secondary:rgba(11,11,20,0.62);
    --label-tertiary:rgba(11,11,20,0.38);
    --label-quaternary:rgba(11,11,20,0.18);

    /* ── Color — Background ── */
    --bg:#FFFFFF;
    --bg-grouped:#F5F4F9;
    --bg-elevated:#FFFFFF;
    --surface:rgba(118,118,128,0.06);
    --surface-hover:rgba(118,118,128,0.1);

    /* ── Color — Separator ── */
    --separator:rgba(11,11,20,0.08);
    --separator-opaque:#EAEAEE;

    /* ── Color — Accent (Violet) ── */
    --primary:#7C3AED;
    --primary-dark:#6D28D9;
    --primary-soft:rgba(124,58,237,0.1);
    --primary-tint:rgba(124,58,237,0.06);
    --primary-text:#6D28D9;
    --primary-light:rgba(124,58,237,0.1);

    /* ── Color — Semantic ── */
    --correct:#22C55E;
    --correct-bg:rgba(34,197,94,0.12);
    --wrong:#EF4444;
    --wrong-bg:rgba(239,68,68,0.1);
    --warning:#F59E0B;

    /* ── Legacy aliases (호환) ── */
    --text:var(--label);
    --text-sub:var(--label-secondary);
    --text-dim:var(--label-tertiary);
    --border:var(--separator);
    --card-bg:var(--surface);
    --card-bg-solid:var(--bg-grouped);
    --card-border:var(--separator);

    /* ── Radius (continuous 느낌) ── */
    --r-xs:8px;
    --r-sm:12px;
    --r-md:16px;
    --r-lg:20px;
    --r-xl:24px;
    --r-2xl:28px;
    --r-pill:999px;
    /* Legacy */
    --radius:var(--r-md);
    --radius-sm:var(--r-sm);
    --radius-pill:var(--r-pill);
    --radius-card:var(--r-lg);
    --radius-input:var(--r-sm);
    --radius-btn:var(--r-sm);

    /* ── Shadow (subtle, layered) ── */
    --shadow-xs:0 1px 2px rgba(11,11,20,0.05);
    --shadow-sm:0 1px 3px rgba(11,11,20,0.05),0 1px 2px rgba(11,11,20,0.03);
    --shadow-md:0 4px 16px rgba(11,11,20,0.06),0 2px 4px rgba(11,11,20,0.04);
    --shadow-lg:0 12px 40px rgba(11,11,20,0.08),0 4px 12px rgba(11,11,20,0.04);
    --shadow-hero:0 20px 48px -12px rgba(124,58,237,0.32),0 8px 24px -8px rgba(124,58,237,0.22);
    --shadow-float:0 10px 32px rgba(11,11,20,0.14);
    --glow:0 0 0 3px rgba(124,58,237,0.16);
    --shadow:var(--shadow-sm);
    --shadow-hover:var(--shadow-md);

    /* ── Motion ── */
    --ease-out:cubic-bezier(0.16,1,0.3,1);
    --ease-spring:cubic-bezier(0.34,1.36,0.64,1);
    --ease-in-out:cubic-bezier(0.4,0,0.2,1);
    --t-fast:0.16s var(--ease-out);
    --t-base:0.24s var(--ease-out);
    --t-slow:0.36s var(--ease-out);
    --transition:var(--t-base);

    /* ── Layout ── */
    --max-width:1280px;
    --max-width-narrow:720px;
    --container:640px;          /* 홈 전 섹션 공통 폭 */
    --gutter:20px;
    --gutter-sm:16px;

    /* ── Safe area ── */
    --safe-top:env(safe-area-inset-top,0px);
    --safe-bottom:env(safe-area-inset-bottom,0px);
    --safe-left:env(safe-area-inset-left,0px);
    --safe-right:env(safe-area-inset-right,0px);

    /* ── Play 동적 변수 ── */
    --q-font:1.1rem;
    --q-padding:20px 4px;
    --opt-font:1rem;
    --opt-padding:16px 18px;
    --opt-min-h:56px;
    --ox-size:160px;
    --ox-icon:4.5rem;
    --fb-icon:3rem;
    --fb-text:1.05rem;
}

html{
    font-size:16px;
    -webkit-tap-highlight-color:transparent;
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
    overflow-x:hidden;
}
body{
    font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,sans-serif;
    font-feature-settings:"ss01","cv01","cv03","cv04";
    background:
        radial-gradient(ellipse 120% 80% at 50% -10%,rgba(168,85,247,0.10) 0%,transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 15%,rgba(124,58,237,0.06) 0%,transparent 50%),
        #FBFAFE;
    color:var(--label);
    line-height:1.55;
    letter-spacing:-0.01em;
    min-height:100dvh;
    padding-top:var(--safe-top);
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%}
button{font-family:inherit;color:inherit;cursor:pointer}

/* ═══ Focus — accessibility ═══ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
.mode-card:focus-visible,
.cat-chip:focus-visible,
.bubble:focus-visible,
.home-pack:focus-visible,
.home-packs__more:focus-visible,
.header__action:focus-visible,
.play__option:focus-visible,
.play__ox-btn:focus-visible{
    outline:none;
    box-shadow:var(--glow);
}

/* ============================================================
   Header — iOS-style blur nav
   ============================================================ */
.header{
    position:sticky;
    top:0;
    z-index:100;
    width:100%;
    background:rgba(255,255,255,0.72);
    backdrop-filter:saturate(180%) blur(24px);
    -webkit-backdrop-filter:saturate(180%) blur(24px);
    border-bottom:0.5px solid var(--separator);
}
.header__inner{
    display:flex;
    align-items:center;
    gap:12px;
    height:56px;
    max-width:var(--container);
    margin:0 auto;
    padding:0 max(20px,var(--safe-right)) 0 max(20px,var(--safe-left));
}
.header__left{display:flex;align-items:center;flex-shrink:0}
.header__logo{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:inherit;
    min-height:44px;
    padding:4px 2px;
}
.header__logo-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    background:var(--primary);
    color:#fff;
    font-size:0.92rem;
    font-weight:800;
    border-radius:9px;
    letter-spacing:-0.02em;
    box-shadow:0 2px 6px rgba(124,58,237,0.25);
}
.header__logo-text{
    font-size:1.05rem;
    font-weight:800;
    color:var(--label);
    letter-spacing:-0.03em;
}
.header__center{
    position:relative;
    flex:1 1 auto;
    max-width:520px;
    min-width:0;
}
.header__search-icon{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:var(--label-tertiary);
    pointer-events:none;
    transition:color var(--t-fast);
}
.header__search{
    width:100%;
    height:38px;
    padding:0 14px 0 36px;
    border:none;
    border-radius:var(--r-sm);
    background:var(--surface);
    font-size:16px;
    font-family:inherit;
    color:var(--label);
    outline:none;
    transition:background var(--t-fast),box-shadow var(--t-fast);
}
.header__search::placeholder{color:var(--label-tertiary)}
.header__search:hover{background:var(--surface-hover)}
.header__search:focus{
    background:#fff;
    box-shadow:0 0 0 2px var(--primary),0 4px 16px rgba(124,58,237,0.12);
}
.header__center:focus-within .header__search-icon{color:var(--primary)}
.header__right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.header__action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:none;
    border-radius:var(--r-sm);
    background:var(--surface);
    font-size:1.05rem;
    transition:background var(--t-fast),transform var(--t-fast);
}
.header__action:hover{background:var(--surface-hover)}
.header__action:active{transform:scale(0.92)}

/* ============================================================
   Screen — 공통 레이아웃
   ============================================================ */
.screen{
    display:none;
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 max(20px,var(--safe-right)) calc(56px + var(--safe-bottom)) max(20px,var(--safe-left));
    flex:1 0 auto;
    min-width:0;
}
.screen--active{display:block;animation:screenFadeIn 0.3s var(--ease-out)}
@keyframes screenFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

#screen-home.screen--active{display:block;padding-top:12px;padding-bottom:72px}
#screen-play{
    max-width:var(--max-width-narrow);
    margin:0 auto;
    overscroll-behavior:none;
    -webkit-overflow-scrolling:auto;
}
#screen-result{max-width:var(--max-width-narrow);margin:0 auto}

/* ============================================================
   Hero — 핵심 브랜드 경험 (모바일 세로, 태블릿+ 가로)
   ============================================================ */
.hero--purple{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0;
    padding:36px 24px 32px;
    margin:12px 0 40px;
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%,rgba(255,255,255,0.32) 0%,transparent 55%),
        radial-gradient(circle at 20% 110%,rgba(192,132,252,0.5) 0%,transparent 45%),
        linear-gradient(160deg,#8B5CF6 0%,#7C3AED 45%,#6D28D9 100%);
    border-radius:var(--r-2xl);
    overflow:hidden;
    box-shadow:var(--shadow-hero);
    isolation:isolate;
}
.hero--purple::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 100% 0%,rgba(255,255,255,0.18) 0%,transparent 40%),
        radial-gradient(circle at 0% 100%,rgba(255,255,255,0.1) 0%,transparent 40%);
    pointer-events:none;
    z-index:0;
}
.hero--purple .hero__npc{
    width:128px;
    height:128px;
    object-fit:contain;
    flex-shrink:0;
    z-index:1;
    filter:drop-shadow(0 16px 32px rgba(0,0,0,0.28));
    animation:heroFloat 4.5s ease-in-out infinite;
    margin-bottom:16px;
    border-radius:var(--r-lg);
}
.hero--purple .hero__content{z-index:1;position:relative;max-width:100%}
.hero--purple .hero__text{
    font-size:1.9rem;
    font-weight:900;
    color:#fff;
    line-height:1.18;
    letter-spacing:-0.04em;
    text-shadow:0 2px 16px rgba(0,0,0,0.12);
}
.hero__brand{
    display:inline-block;
    font-size:inherit;
    font-weight:900;
    color:#fff;
    letter-spacing:-0.045em;
    background:linear-gradient(180deg,#FFFFFF 20%,#EDE9FE 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.hero--purple .hero__sub{
    font-size:0.95rem;
    color:rgba(255,255,255,0.86);
    margin-top:14px;
    font-weight:500;
    line-height:1.55;
    letter-spacing:-0.01em;
}
.hero--purple .hero__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:22px;
    padding:14px 30px;
    min-height:50px;
    background:#fff;
    color:var(--primary);
    border:none;
    border-radius:var(--r-pill);
    font-size:0.98rem;
    font-weight:800;
    letter-spacing:-0.01em;
    cursor:pointer;
    transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
    box-shadow:0 10px 28px rgba(0,0,0,0.18),inset 0 -1px 0 rgba(0,0,0,0.02);
}
.hero--purple .hero__cta::after{
    content:"→";
    font-weight:700;
    font-size:1.05rem;
    transition:transform var(--t-fast);
}
.hero--purple .hero__cta:hover{background:#F5F3FF;transform:translateY(-1px);box-shadow:0 14px 32px rgba(0,0,0,0.22)}
.hero--purple .hero__cta:hover::after{transform:translateX(3px)}
.hero--purple .hero__cta:active{transform:scale(0.97);box-shadow:0 4px 10px rgba(0,0,0,0.14)}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-2deg)}}

/* 모바일 하단 sticky CTA */
.hero__cta-sticky{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:90;
    display:none;
    align-items:center;
    justify-content:center;
    padding:10px max(16px,var(--safe-right)) calc(10px + var(--safe-bottom)) max(16px,var(--safe-left));
    background:rgba(255,255,255,0.82);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:0.5px solid var(--separator);
    transform:translateY(100%);
    transition:transform 0.32s var(--ease-out);
}
.hero__cta-sticky--visible{display:flex;transform:translateY(0)}
.hero__cta-sticky__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    max-width:420px;
    padding:14px 28px;
    min-height:52px;
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:var(--r-pill);
    font-size:1rem;
    font-weight:700;
    letter-spacing:-0.01em;
    cursor:pointer;
    transition:background var(--t-fast),transform var(--t-fast);
    box-shadow:0 8px 24px rgba(124,58,237,0.36);
}
.hero__cta-sticky__btn:hover{background:var(--primary-dark)}
.hero__cta-sticky__btn:active{transform:scale(0.97)}
@media(min-width:768px){.hero__cta-sticky{display:none !important}}

/* ============================================================
   Mode Grid — 4 모드 카드
   ============================================================ */
.mode-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:0 0 40px;
}
.mode-grid--center{margin-left:auto;margin-right:auto}
.mode-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:14px;
    padding:22px 18px 20px;
    min-height:156px;
    background:var(--bg-elevated);
    border:0.5px solid var(--separator);
    border-radius:var(--r-lg);
    cursor:pointer;
    text-align:left;
    font-family:inherit;
    box-shadow:var(--shadow-sm);
    transition:transform var(--t-fast),box-shadow var(--t-base),border-color var(--t-fast);
    overflow:hidden;
}
.mode-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(124,58,237,0.06) 0%,transparent 60%);
    opacity:0;
    transition:opacity var(--t-base);
    pointer-events:none;
}
.mode-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(124,58,237,0.2)}
.mode-card:hover::before{opacity:1}
.mode-card:active{transform:scale(0.98);box-shadow:var(--shadow-xs)}
.mode-card__emoji{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    font-size:1.85rem;
    line-height:1;
    background:linear-gradient(135deg,#F5F3FF 0%,#EDE9FE 100%);
    border-radius:16px;
    box-shadow:inset 0 0 0 0.5px rgba(124,58,237,0.12);
    position:relative;
    z-index:1;
}
.mode-card__title{
    font-size:1.05rem;
    font-weight:800;
    color:var(--label);
    letter-spacing:-0.025em;
    position:relative;
    z-index:1;
    margin-top:auto;
}
.mode-card__desc{
    font-size:0.82rem;
    color:var(--label-secondary);
    font-weight:500;
    letter-spacing:-0.005em;
    position:relative;
    z-index:1;
    line-height:1.45;
}
.mode-card__action{display:none}
.mode-card--active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft),var(--shadow-sm)}
.mode-card--active::after{
    content:"";
    position:absolute;
    top:12px;
    right:12px;
    width:8px;
    height:8px;
    background:var(--primary);
    border-radius:50%;
}
.mode-card--loading{pointer-events:none;opacity:0.55}
.mode-card--loading .mode-card__emoji{animation:mc-pulse 0.9s ease-in-out infinite alternate}
@keyframes mc-pulse{from{opacity:1}to{opacity:0.4}}

/* ============================================================
   Bubble Section — 뜨는 퀘스트
   ============================================================ */
.bubble-section{
    margin:0 auto 40px;
    overflow:hidden;
}
.bubble-section:empty,.bubble-track:empty,.home-packs:empty{display:none}
.bubble-section__label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:0.78rem;
    font-weight:600;
    color:var(--label-secondary);
    text-align:center;
    margin-bottom:14px;
    letter-spacing:0.02em;
}
.bubble-section__label::before,
.bubble-section__label::after{
    content:"";
    display:inline-block;
    width:24px;
    height:1px;
    background:var(--separator);
}
.bubble-track{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    padding:0 8px;
}
.bubble{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 14px;
    min-height:40px;
    background:var(--primary-tint);
    border:0.5px solid rgba(124,58,237,0.18);
    border-radius:var(--r-pill);
    font-size:0.8rem;
    font-weight:600;
    color:var(--primary-text);
    cursor:pointer;
    transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast);
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:0;
    animation:bubbleIn 0.5s var(--ease-out) forwards;
    font-family:inherit;
}
.bubble:hover{background:var(--primary-soft);border-color:var(--primary);transform:translateY(-1px)}
.bubble:active{transform:scale(0.96)}
.bubble__emoji{font-size:0.9rem;line-height:1;flex-shrink:0}
.bubble--fade-out{animation:bubbleFade 0.35s var(--ease-out) forwards}
@keyframes bubbleIn{0%{opacity:0;transform:translateY(6px) scale(0.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bubbleFade{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.88) translateY(-4px)}}

/* ============================================================
   Home Packs — 카테고리 + 팩 그리드
   ============================================================ */
.home-packs{
    margin:0 auto;
    position:relative;
}
.home-packs__header{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:16px;
    padding:0 2px;
}
.home-packs__title{
    font-size:1.15rem;
    font-weight:800;
    color:var(--label);
    letter-spacing:-0.03em;
}
.home-packs__count{
    font-size:0.8rem;
    font-weight:600;
    color:var(--label-tertiary);
}

/* Category chips */
.home-packs .cat-scroll{
    display:flex;
    gap:8px;
    padding:0 0 18px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    scroll-snap-type:x mandatory;
    scroll-padding:0 16px;
}
.home-packs .cat-scroll::-webkit-scrollbar{display:none}
@media(max-width:767px){
    .home-packs .cat-scroll{
        flex-wrap:nowrap;
        padding-left:2px;
        padding-right:20px;
        -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent 100%);
        mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent 100%);
    }
}
@media(min-width:768px){
    .home-packs .cat-scroll{justify-content:center;flex-wrap:wrap}
}
.cat-chip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    min-height:36px;
    border:0.5px solid var(--separator);
    border-radius:var(--r-pill);
    background:var(--bg-elevated);
    font-size:0.85rem;
    font-weight:600;
    color:var(--label-secondary);
    cursor:pointer;
    transition:all var(--t-fast);
    font-family:inherit;
    white-space:nowrap;
    scroll-snap-align:start;
    letter-spacing:-0.01em;
}
.cat-chip:hover{border-color:rgba(124,58,237,0.32);color:var(--primary-text);background:var(--primary-tint)}
.cat-chip:active{transform:scale(0.96)}
.cat-chip--active{
    background:var(--label);
    border-color:var(--label);
    color:#fff;
    box-shadow:0 4px 12px rgba(11,11,20,0.18);
}
.cat-chip--active:hover{background:#000;border-color:#000;color:#fff}
.cat-chip__icon{font-size:1rem;line-height:1}

/* Pack grid */
.home-packs .pack-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}
.home-pack{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:var(--bg-elevated);
    border:0.5px solid var(--separator);
    border-radius:var(--r-lg);
    cursor:pointer;
    font-family:inherit;
    text-align:left;
    transition:transform var(--t-fast),box-shadow var(--t-base),border-color var(--t-fast);
    box-shadow:var(--shadow-xs);
    min-width:0;
    opacity:0;
    animation:packIn 0.4s var(--ease-out) forwards;
}
@keyframes packIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.home-pack:hover{border-color:rgba(124,58,237,0.22);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.home-pack:active{transform:scale(0.99);box-shadow:var(--shadow-xs)}
.home-pack__emoji{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    font-size:1.5rem;
    background:linear-gradient(135deg,#F5F3FF,#EDE9FE);
    border-radius:12px;
    box-shadow:inset 0 0 0 0.5px rgba(124,58,237,0.08);
}
.home-pack__body{flex:1;min-width:0}
.home-pack__title{
    font-size:0.95rem;
    font-weight:700;
    color:var(--label);
    line-height:1.35;
    letter-spacing:-0.015em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.home-pack__meta{
    font-size:0.76rem;
    color:var(--label-tertiary);
    margin-top:3px;
    font-weight:500;
}
.home-pack__new{
    display:inline-block;
    margin-left:4px;
    padding:1px 6px;
    background:var(--primary);
    color:#fff;
    font-size:0.62rem;
    font-weight:700;
    border-radius:999px;
    letter-spacing:0.04em;
    vertical-align:middle;
}
.home-pack__arrow{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--surface);
    color:var(--label-tertiary);
    font-size:1rem;
    font-weight:700;
    transition:all var(--t-fast);
}
.home-pack:hover .home-pack__arrow{background:var(--primary);color:#fff;transform:translateX(2px)}

/* Speed pack variant */
.home-pack--speed{
    border-color:rgba(245,158,11,0.2);
    background:linear-gradient(135deg,rgba(254,243,199,0.4) 0%,#fff 60%);
}
.home-pack--speed .home-pack__emoji{
    background:linear-gradient(135deg,#FEF3C7,#FDE68A);
    box-shadow:inset 0 0 0 0.5px rgba(245,158,11,0.16);
}
.home-pack--speed:hover{border-color:rgba(245,158,11,0.4);box-shadow:0 8px 24px rgba(245,158,11,0.12)}
.home-pack--speed:hover .home-pack__arrow{background:var(--warning)}
.home-pack__speed{
    display:inline-block;
    margin-left:6px;
    padding:2px 8px;
    background:linear-gradient(135deg,#F59E0B,#F97316);
    color:#fff;
    font-size:0.64rem;
    font-weight:700;
    border-radius:999px;
    letter-spacing:0.03em;
    vertical-align:middle;
}

.home-packs__more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:24px auto 0;
    padding:10px 24px;
    min-height:44px;
    border:0.5px solid var(--separator);
    border-radius:var(--r-pill);
    background:var(--bg-elevated);
    font-size:0.88rem;
    font-weight:600;
    color:var(--label-secondary);
    cursor:pointer;
    font-family:inherit;
    transition:all var(--t-fast);
}
.home-packs__more:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-tint)}

/* Skeleton card */
.skeleton-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:var(--bg-elevated);
    border:0.5px solid var(--separator);
    border-radius:var(--r-lg);
    min-height:72px;
    overflow:hidden;
}
.skeleton-card__emoji{width:44px;height:44px;border-radius:12px;background:var(--surface);flex-shrink:0}
.skeleton-card__body{flex:1;display:flex;flex-direction:column;gap:8px}
.skeleton-card__line{height:10px;border-radius:5px;background:var(--surface)}
.skeleton-card__line--short{width:56%}
.skeleton-card__line--long{width:88%}
.skeleton-card .skeleton-card__emoji,
.skeleton-card .skeleton-card__line{animation:shimmer 1.4s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:0.5}50%{opacity:1}}

/* ============================================================
   Play — 문제 풀이 화면
   ============================================================ */
.play__header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 0 6px;
}
.play__close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    min-width:40px;
    background:var(--surface);
    border:none;
    border-radius:50%;
    font-size:1.4rem;
    line-height:1;
    color:var(--label-secondary);
    cursor:pointer;
    transition:background var(--t-fast),transform var(--t-fast);
}
.play__close:hover{background:var(--surface-hover);color:var(--label)}
.play__close:active{transform:scale(0.92)}
.play__pack-title{
    flex:1;
    font-size:0.9rem;
    font-weight:600;
    color:var(--label-secondary);
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
    letter-spacing:-0.01em;
}
.play__score-counter{
    font-size:0.78rem;
    font-weight:700;
    color:var(--correct);
    background:var(--correct-bg);
    padding:5px 10px;
    border-radius:999px;
    min-width:56px;
    text-align:center;
    transition:background 0.3s,transform 0.2s;
    letter-spacing:-0.01em;
}
.play__score-counter--bounce{animation:comboBounce 0.35s var(--ease-out)}
.play__score-counter--warm{background:rgba(249,115,22,0.14);color:#EA580C}
.play__score-counter--fire{background:rgba(245,158,11,0.16);color:#D97706}
.play__score-counter--max{background:rgba(239,68,68,0.14);color:#DC2626}
@keyframes comboBounce{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

.play__lives{display:flex;gap:2px;font-size:1rem}
.play__heart{transition:all 0.3s}
.play__heart--empty{opacity:0.4;transform:scale(0.8)}
.play__heart--lose{animation:heartLose 0.3s ease-out}
.play__lives--danger{animation:heartPulse 0.6s infinite}
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes heartLose{0%{transform:scale(1.3) rotate(0)}40%{transform:scale(0.6) rotate(-15deg)}100%{transform:scale(0.8) rotate(0)}}

.play__progress{
    height:4px;
    background:var(--separator-opaque);
    border-radius:2px;
    overflow:hidden;
    margin:4px 0 6px;
}
.play__progress-bar{
    height:100%;
    background:linear-gradient(90deg,var(--primary),#A855F7);
    border-radius:2px;
    transition:width 0.4s var(--ease-out);
    width:0;
}
.play__progress-bar--correct{animation:pulseGreen 0.5s}
.play__progress-bar--wrong{animation:pulseRed 0.5s}
@keyframes pulseGreen{0%,100%{background:var(--primary)}50%{background:var(--correct)}}
@keyframes pulseRed{0%,100%{background:var(--primary)}50%{background:var(--wrong)}}
.play__progress-label{
    font-size:0.74rem;
    color:var(--label-tertiary);
    font-weight:600;
    text-align:right;
    margin-bottom:14px;
    letter-spacing:0.01em;
}

.play__area--enter{animation:slideUp 0.28s var(--ease-out)}
.play__empty{text-align:center;padding:64px 16px}
.play__empty p{font-size:1rem;color:var(--label-secondary);margin-bottom:16px}

.play__qnum{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:0.8rem;
    font-weight:700;
    color:var(--primary);
    padding:8px 0 0;
    letter-spacing:0.02em;
}

/* Speed 타이머 */
.play__speed-bar{padding:6px 0 4px}
.play__speed-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.play__speed-num{
    font-size:1.7rem;
    font-weight:900;
    color:var(--primary);
    line-height:1;
    min-width:32px;
    letter-spacing:-0.03em;
    font-feature-settings:"tnum";
}
.play__speed-num--urgent{color:var(--wrong);animation:timerShake 0.4s ease infinite}
.play__speed-label{font-size:0.74rem;font-weight:600;color:var(--label-tertiary)}
.play__speed-track{height:5px;background:var(--separator-opaque);border-radius:3px;overflow:hidden}
.play__speed-fill{
    height:100%;
    background:linear-gradient(90deg,var(--primary),#A855F7);
    border-radius:3px;
    animation:speedCountdown var(--speed-limit) linear forwards;
}
.play__speed-fill--urgent{background:linear-gradient(90deg,var(--wrong),#F87171)}
@keyframes speedCountdown{from{width:100%}to{width:0%}}
@keyframes timerShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}

.play__question{
    font-size:var(--q-font);
    font-weight:700;
    text-align:left;
    padding:var(--q-padding);
    line-height:1.55;
    letter-spacing:-0.02em;
    word-break:keep-all;
    overflow-wrap:break-word;
    color:var(--label);
}
.play__question--large{font-size:2.4rem;letter-spacing:0.25em;padding:24px 12px;text-align:center}
.play__consonants{
    font-size:2.5rem;
    font-weight:900;
    letter-spacing:0.3em;
    text-align:center;
    padding:24px 12px;
    line-height:1.4;
    max-width:100%;
    overflow-wrap:break-word;
    color:var(--label);
}
.play__image{
    display:block;
    max-width:100%;
    max-height:240px;
    margin:0 auto 16px;
    border-radius:var(--r-lg);
    object-fit:contain;
}

/* Options */
.play__options{display:flex;flex-direction:column;gap:10px}
.play__option{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:var(--opt-padding);
    min-height:var(--opt-min-h);
    background:var(--bg-elevated);
    border:1px solid var(--separator);
    border-radius:var(--r-md);
    font-size:var(--opt-font);
    font-weight:500;
    color:var(--label);
    cursor:pointer;
    transition:transform var(--t-fast),border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
    text-align:left;
    font-family:inherit;
    word-break:keep-all;
    overflow-wrap:break-word;
    letter-spacing:-0.01em;
    box-shadow:var(--shadow-xs);
}
.play__option:hover{border-color:rgba(124,58,237,0.3);background:var(--primary-tint)}
.play__option:active{transform:scale(0.98)}
.play__option--selected{border-color:var(--primary);background:var(--primary-tint);box-shadow:0 0 0 2px var(--primary-soft)}
.play__option--correct{border-color:var(--correct);background:var(--correct-bg);box-shadow:0 0 0 2px rgba(34,197,94,0.25)}
.play__option--wrong{border-color:var(--wrong);background:var(--wrong-bg);box-shadow:0 0 0 2px rgba(239,68,68,0.25);animation:optionShake 0.3s}
.play__ox-btn--correct{border-color:var(--correct);background:var(--correct-bg);box-shadow:0 0 0 3px rgba(34,197,94,0.3)}
.play__ox-btn--wrong{border-color:var(--wrong);background:var(--wrong-bg);box-shadow:0 0 0 3px rgba(239,68,68,0.3);animation:optionShake 0.3s}
@keyframes optionShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.play__option-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--surface);
    font-size:0.78rem;
    font-weight:700;
    color:var(--label-secondary);
    flex-shrink:0;
    font-feature-settings:"tnum";
}
.play__option--selected .play__option-num,
.play__option--correct .play__option-num,
.play__option--wrong .play__option-num{background:#fff}

/* OX */
.play__options--ox{flex-direction:row;justify-content:center;gap:32px}
.play__ox-btn{
    width:var(--ox-size);
    height:var(--ox-size);
    border-radius:50%;
    border:2.5px solid var(--separator);
    background:var(--bg-elevated);
    cursor:pointer;
    transition:all var(--t-base);
    font-family:inherit;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    box-shadow:var(--shadow-sm);
}
.play__ox-icon{font-size:var(--ox-icon);font-weight:900;line-height:1}
.play__ox-label{font-size:1rem;font-weight:700;letter-spacing:-0.01em}
.play__ox-btn--o .play__ox-icon,.play__ox-btn--o .play__ox-label{color:#3B82F6}
.play__ox-btn--x .play__ox-icon,.play__ox-btn--x .play__ox-label{color:#EF4444}
.play__ox-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}
.play__ox-btn--o:hover{border-color:#3B82F6;background:#EFF6FF}
.play__ox-btn--x:hover{border-color:#EF4444;background:#FEF2F2}
.play__ox-btn:active{transform:scale(0.97)}

/* Input */
.play__input-wrap{display:flex;gap:8px;margin-top:16px}
.play__input{
    flex:1;
    padding:14px 16px;
    border:1.5px solid var(--separator);
    border-radius:var(--r-md);
    font-size:1rem;
    font-weight:600;
    outline:none;
    text-align:center;
    font-family:inherit;
    background:var(--bg-elevated);
    color:var(--label);
    letter-spacing:-0.01em;
    transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.play__input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

/* Feedback */
#play-area{transition:opacity 0.15s ease}
#play-area.play__area--fade-out{opacity:0}
.play__feedback{
    text-align:center;
    padding:32px 20px;
    border-radius:var(--r-xl);
    animation:fadeIn 0.3s var(--ease-out);
    cursor:pointer;
}
.play__feedback--tap{cursor:pointer;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.play__feedback--correct{background:var(--correct-bg)}
.play__feedback--wrong{background:var(--wrong-bg)}
.play__feedback-icon{font-size:var(--fb-icon);font-weight:900;margin-bottom:8px;line-height:1}
.play__feedback--correct .play__feedback-icon{color:var(--correct)}
.play__feedback--wrong .play__feedback-icon{color:var(--wrong)}
.play__feedback-text{font-size:var(--fb-text);font-weight:700;margin-bottom:6px;letter-spacing:-0.01em;color:var(--label)}
.play__feedback-explain{font-size:var(--fb-text);color:var(--label-secondary);line-height:1.55;letter-spacing:-0.005em}
.play__feedback-tap-hint{
    margin-top:20px;
    font-size:0.78rem;
    color:var(--label-tertiary);
    font-weight:500;
    animation:fadeIn 0.4s 0.3s both;
}
.play__feedback-next{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:16px;
    padding:12px 28px;
    min-height:44px;
    background:var(--surface);
    border:none;
    border-radius:var(--r-sm);
    font-size:0.92rem;
    font-weight:600;
    color:var(--label-secondary);
    cursor:pointer;
    font-family:inherit;
    letter-spacing:-0.01em;
    transition:background var(--t-fast);
}
.play__feedback-next:hover{background:var(--surface-hover)}

/* Combo */
.play__feedback-combo{font-size:1rem;font-weight:800;color:var(--primary);margin-top:10px;animation:bounceIn 0.4s;letter-spacing:-0.02em}
.play__feedback-combo--start{font-size:0.85rem;color:var(--primary);opacity:0.85}
.play__feedback-combo--warm{font-size:1rem;color:#EA580C;animation:comboHot 0.45s}
.play__feedback-combo--fire{font-size:1.1rem;color:#D97706;animation:comboHot 0.5s}
.play__feedback-combo--hot{font-size:1.2rem;color:#F59E0B;animation:comboHot 0.5s}
.play__feedback-combo--max{font-size:1.4rem;color:#EF4444;animation:comboMax 0.6s}
.play__feedback-combo--perfect{font-size:1.3rem;color:#A855F7;margin-top:12px;animation:comboMax 0.6s}

/* Confetti (R13-S006) */
.confetti-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:200;overflow:hidden}
.confetti-overlay__particle{position:absolute;top:-10px;width:8px;height:8px;border-radius:2px;opacity:0;animation:confettiFall 2.5s ease-in forwards}
.confetti-overlay__particle:nth-child(1){left:8%;background:#EF4444;animation-delay:0s;width:6px;height:10px}
.confetti-overlay__particle:nth-child(2){left:18%;background:#F59E0B;animation-delay:0.1s;width:10px;height:6px;border-radius:50%}
.confetti-overlay__particle:nth-child(3){left:28%;background:#22C55E;animation-delay:0.2s}
.confetti-overlay__particle:nth-child(4){left:38%;background:#3B82F6;animation-delay:0.05s;width:6px;height:12px}
.confetti-overlay__particle:nth-child(5){left:48%;background:#A855F7;animation-delay:0.15s;border-radius:50%;width:10px;height:10px}
.confetti-overlay__particle:nth-child(6){left:58%;background:#EC4899;animation-delay:0.25s;width:7px;height:7px}
.confetti-overlay__particle:nth-child(7){left:68%;background:#FACC15;animation-delay:0.08s;width:10px;height:6px}
.confetti-overlay__particle:nth-child(8){left:78%;background:#14B8A6;animation-delay:0.18s;border-radius:50%}
.confetti-overlay__particle:nth-child(9){left:88%;background:#F97316;animation-delay:0.12s;width:6px;height:10px}
.confetti-overlay__particle:nth-child(10){left:12%;background:#8B5CF6;animation-delay:0.22s;border-radius:50%;width:8px;height:8px}
.confetti-overlay__particle:nth-child(11){left:33%;background:#06B6D4;animation-delay:0.3s;width:10px;height:6px}
.confetti-overlay__particle:nth-child(12){left:55%;background:#EF4444;animation-delay:0.07s;width:6px;height:8px}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}
@keyframes comboHot{0%{transform:scale(0.5);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
@keyframes comboMax{0%{transform:scale(0.3) rotate(-5deg);opacity:0}50%{transform:scale(1.3) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}

/* ============================================================
   Result — 결과 화면
   ============================================================ */
#screen-result{text-align:center;padding-top:44px}
.result__hero{display:flex;flex-direction:column;align-items:center;gap:14px}
.result__ring{
    position:relative;
    width:170px;
    height:170px;
    border-radius:50%;
    background:conic-gradient(var(--ring-color,var(--primary)) calc(var(--pct,0) * 1%),var(--separator-opaque) 0);
    display:flex;
    align-items:center;
    justify-content:center;
    animation:ringIn 0.6s var(--ease-out);
}
.result__ring-inner{
    width:138px;
    height:138px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 0 0.5px var(--separator);
}
.result__pct{
    font-size:3rem;
    font-weight:900;
    color:var(--label);
    line-height:1;
    letter-spacing:-0.04em;
    font-feature-settings:"tnum";
}
.result__pct-unit{font-size:1.2rem;font-weight:700;color:var(--label-tertiary);letter-spacing:-0.02em}
@keyframes ringIn{from{transform:scale(0.6);opacity:0}to{transform:scale(1);opacity:1}}

.result__emotion{
    font-size:1.25rem;
    font-weight:800;
    color:var(--primary);
    animation:fadeIn 0.3s 0.6s both;
    letter-spacing:-0.03em;
}
.result__meta{font-size:0.88rem;color:var(--label-secondary);font-weight:500;letter-spacing:-0.01em}
.result__stats{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:14px;
    font-size:0.82rem;
    color:var(--label-secondary);
    letter-spacing:-0.01em;
}
.result__stat strong{font-weight:800;color:var(--label)}
.result__stat-sep{color:var(--label-quaternary)}

.result__actions-row{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.result__actions-row--sub{margin-top:12px}
.result__action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:13px 24px;
    min-height:46px;
    border:0.5px solid var(--separator);
    border-radius:var(--r-pill);
    background:var(--bg-elevated);
    font-size:0.92rem;
    font-weight:700;
    color:var(--label);
    cursor:pointer;
    transition:all var(--t-fast);
    font-family:inherit;
    letter-spacing:-0.01em;
    box-shadow:var(--shadow-xs);
}
.result__action-btn:hover{border-color:var(--primary);background:var(--primary-tint);color:var(--primary)}
.result__action-btn:active{transform:scale(0.97)}
.result__action-btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 6px 16px rgba(124,58,237,0.3)}
.result__action-btn--primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;box-shadow:0 10px 24px rgba(124,58,237,0.36)}
.result__action-btn--random{background:var(--surface);border-color:transparent}
.result__action-btn--icon{width:46px;height:46px;padding:0;border-radius:50%;font-size:1.05rem}
.result__action-btn--active{border-color:var(--primary);background:var(--primary-tint);color:var(--primary)}

/* Wrong details */
.result__wrong-details{text-align:left;margin-top:28px}
.result__wrong-summary{
    font-size:0.88rem;
    font-weight:600;
    color:var(--label-secondary);
    cursor:pointer;
    padding:12px 0;
    list-style:none;
    letter-spacing:-0.01em;
}
.result__wrong-summary::before{content:'▶ ';font-size:0.7rem;color:var(--label-tertiary)}
.result__wrong-details[open] .result__wrong-summary::before{content:'▼ '}
.result__wrong-list{margin-top:8px}
.result__wrong-item{
    background:var(--bg-grouped);
    border:0.5px solid var(--separator);
    border-radius:var(--r-md);
    padding:14px;
    margin-bottom:8px;
    text-align:left;
}
.result__wrong-q{font-size:0.88rem;font-weight:600;color:var(--label);margin-bottom:4px;letter-spacing:-0.01em}
.result__wrong-my{font-size:0.82rem;color:var(--wrong);font-weight:500;margin-bottom:2px}
.result__wrong-a{font-size:0.82rem;color:var(--correct);font-weight:600}
.result__wrong-explain{font-size:0.8rem;color:var(--label-secondary);margin-top:6px;padding-top:6px;border-top:1px dashed var(--separator);line-height:1.55}

/* VS (대결 비교) */
.result__vs{
    margin-top:24px;
    padding:22px;
    background:var(--bg-grouped);
    border:0.5px solid var(--separator);
    border-radius:var(--r-lg);
    animation:fadeIn 0.4s var(--ease-out);
}
.result__vs-badge{font-size:1.1rem;font-weight:800;margin-bottom:14px;letter-spacing:-0.02em}
.result__vs-scores{display:flex;align-items:center;justify-content:center;gap:24px}
.result__vs-me,.result__vs-them{display:flex;flex-direction:column;align-items:center;gap:4px}
.result__vs-label{font-size:0.75rem;font-weight:600;color:var(--label-secondary);letter-spacing:-0.01em}
.result__vs-num{font-size:2.2rem;font-weight:900;letter-spacing:-0.04em;font-feature-settings:"tnum"}
.result__vs-me .result__vs-num{color:var(--primary)}
.result__vs-them .result__vs-num{color:var(--label-tertiary)}
.result__vs-divider{font-size:0.9rem;font-weight:700;color:var(--label-tertiary)}

.result__watermark{margin-top:16px;padding:8px;text-align:center;font-size:0.74rem;font-weight:700;color:var(--label-tertiary);letter-spacing:0.05em;opacity:0.6}

/* NPC */
.npc-spirit{animation:npcBounce 0.6s var(--ease-out)}
.npc-review{animation:npcNod 0.5s var(--ease-out)}
.npc-magic{animation:npcMagic 0.7s var(--ease-out)}
@keyframes npcBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-12px)}60%{transform:translateY(-4px)}}
@keyframes npcNod{0%,100%{transform:rotate(0)}25%{transform:rotate(6deg)}50%{transform:rotate(-4deg)}75%{transform:rotate(2deg)}}
@keyframes npcMagic{0%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.15);filter:brightness(1.3)}100%{transform:scale(1);filter:brightness(1)}}

.play__mini-npc{position:fixed;bottom:16px;right:16px;width:40px;height:40px;z-index:80;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.14));transition:transform 0.3s ease;pointer-events:none}
.play__mini-npc img{width:100%;height:100%;object-fit:contain}
.play__mini-npc--happy{animation:miniNpcHappy 0.5s ease}
.play__mini-npc--panic{animation:miniNpcPanic 0.4s ease}
.play__mini-npc--combo{animation:miniNpcCombo 0.6s ease}
@keyframes miniNpcHappy{0%,100%{transform:scale(1)}50%{transform:scale(1.2) translateY(-4px)}}
@keyframes miniNpcPanic{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes miniNpcCombo{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.3) rotate(-10deg)}60%{transform:scale(1.1) rotate(5deg)}100%{transform:scale(1) rotate(0)}}

.result__emotion--speech{
    position:relative;
    background:var(--bg-grouped);
    border-radius:20px;
    padding:10px 22px;
    font-size:1.05rem;
    font-weight:700;
    color:var(--primary);
    animation:fadeIn 0.3s 0.6s both;
    letter-spacing:-0.02em;
}
.result__emotion--speech::after{
    content:'';
    position:absolute;
    top:-8px;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid var(--bg-grouped);
}

.result__npc{width:88px;height:88px;margin:0 auto 4px}
.result__rank-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:50%;
    font-size:1.6rem;
    font-weight:900;
    color:#fff;
    margin-bottom:8px;
    animation:rankBadgeIn 0.5s var(--ease-out);
    letter-spacing:-0.03em;
}
.result__rank-badge--s{
    width:68px;
    height:68px;
    font-size:2.1rem;
    background:linear-gradient(135deg,#FACC15,#F59E0B);
    box-shadow:0 0 24px rgba(245,158,11,0.5),0 0 48px rgba(250,204,21,0.25);
    animation:rankBadgeIn 0.5s var(--ease-out),sRankGlow 2s ease-in-out infinite;
}
.result__rank-badge--a{background:linear-gradient(135deg,#22C55E,#16A34A);box-shadow:0 0 16px rgba(34,197,94,0.3)}
.result__rank-badge--b{background:linear-gradient(135deg,#7C3AED,#6D28D9);box-shadow:0 0 16px rgba(124,58,237,0.3)}
.result__rank-badge--c{background:linear-gradient(135deg,#E0A83F,#D97706);box-shadow:0 0 16px rgba(224,168,63,0.3)}
.result__rank-badge--f{background:linear-gradient(135deg,#EF4444,#DC2626);box-shadow:0 0 16px rgba(239,68,68,0.3)}
@keyframes rankBadgeIn{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.2) rotate(10deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes sRankGlow{0%,100%{box-shadow:0 0 24px rgba(245,158,11,0.5),0 0 48px rgba(250,204,21,0.25)}50%{box-shadow:0 0 32px rgba(245,158,11,0.7),0 0 64px rgba(250,204,21,0.4)}}

/* Next 퀘스트 */
.result__next-section{margin-top:24px;margin-bottom:16px}
.result__next-label{font-size:0.82rem;font-weight:700;color:var(--primary);margin-bottom:12px;text-align:center;letter-spacing:-0.01em}
.result__next-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.result__next-card{
    flex:0 1 auto;
    min-width:0;
    max-width:180px;
    padding:14px 14px;
    min-height:48px;
    border:0.5px solid rgba(124,58,237,0.2);
    border-radius:var(--r-md);
    background:var(--primary-tint);
    cursor:pointer;
    transition:all var(--t-fast);
    text-align:center;
    font-family:inherit;
    box-shadow:var(--shadow-xs);
}
.result__next-card:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.result__next-card:active{transform:scale(0.97)}
.result__next-title{font-size:0.88rem;font-weight:700;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em}
.result__next-meta{font-size:0.74rem;color:var(--label-secondary);margin-top:4px}

.result__actions-row--divider{height:1px;background:var(--separator);margin:20px 0 14px}
.result__actions-label{font-size:0.74rem;font-weight:600;color:var(--label-tertiary);text-align:center;margin-bottom:8px;letter-spacing:0.02em;text-transform:uppercase}
.play__feedback-next--disabled{opacity:0.35;cursor:not-allowed;pointer-events:none}
.play__feedback-next--ready{opacity:1;background:var(--primary);color:#fff;animation:btnReady 0.3s var(--ease-out)}
@keyframes btnReady{0%{transform:scale(0.95);opacity:0.5}100%{transform:scale(1);opacity:1}}
#result-actions{text-align:center}

/* Streak */
.hero__streak{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 12px;
    border-radius:999px;
    background:rgba(239,68,68,0.14);
    border:0.5px solid rgba(239,68,68,0.2);
    font-size:0.78rem;
    font-weight:700;
    color:#DC2626;
    margin-top:10px;
    animation:streakFadeIn 0.5s var(--ease-out);
    letter-spacing:-0.01em;
}
.hero__streak__icon{font-size:0.9rem}
@keyframes streakFadeIn{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:translateY(0)}}
.result__streak{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 12px;
    border-radius:999px;
    background:rgba(239,68,68,0.12);
    font-size:0.78rem;
    font-weight:700;
    color:#DC2626;
    margin-top:8px;
    letter-spacing:-0.01em;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border:none;
    border-radius:var(--r-md);
    font-size:0.95rem;
    font-weight:700;
    cursor:pointer;
    transition:all var(--t-fast);
    font-family:inherit;
    letter-spacing:-0.01em;
}
.btn--primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(124,58,237,0.3)}
.btn--primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 10px 28px rgba(124,58,237,0.36)}
.btn--primary:active{transform:scale(0.97)}
.btn--secondary{background:var(--surface);color:var(--label-secondary);border:0.5px solid var(--separator)}
.btn--large{padding:16px 36px;font-size:1.02rem;width:100%;max-width:340px}
.btn--glow{box-shadow:0 8px 24px rgba(124,58,237,0.3),0 0 48px rgba(124,58,237,0.12);font-size:1rem;padding:16px 32px;animation:ctaPulse 2.5s ease-in-out 3}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 24px rgba(124,58,237,0.3),0 0 48px rgba(124,58,237,0.12)}50%{box-shadow:0 10px 32px rgba(124,58,237,0.4),0 0 64px rgba(124,58,237,0.2)}}
.btn--glow:hover{box-shadow:0 10px 36px rgba(124,58,237,0.4),0 0 80px rgba(124,58,237,0.2);transform:translateY(-2px);animation:none}
.btn--ghost{padding:14px 26px;font-size:0.95rem;background:transparent;border:1.5px solid rgba(255,255,255,0.22);color:#fff;border-radius:var(--r-md)}
.btn--ghost:hover{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.08)}
.btn--loading{pointer-events:none;opacity:0.7}
.btn--loading .loading-spinner--sm{border-top-color:#fff}

/* ============================================================
   Footer
   ============================================================ */
.footer{
    padding:40px 20px calc(28px + var(--safe-bottom));
    border-top:0.5px solid var(--separator);
    margin-top:auto;
    background:var(--bg-grouped);
    flex-shrink:0;
}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:480px;margin:0 auto}
.footer__brand{font-size:0.85rem;font-weight:700;color:var(--label-secondary);letter-spacing:-0.02em}
.footer__links{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.footer__links a{
    font-size:0.78rem;
    color:var(--label-secondary);
    text-decoration:none;
    padding:8px 14px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    transition:all var(--t-fast);
    letter-spacing:-0.01em;
}
.footer__links a:hover{color:var(--label);background:var(--surface)}
.footer__copy{font-size:0.72rem;color:var(--label-tertiary);margin-top:2px}

/* ============================================================
   Legal Pages
   ============================================================ */
.legal{max-width:680px;margin:0 auto;padding:32px 20px 60px}
.legal__header{margin-bottom:32px;padding-bottom:20px;border-bottom:0.5px solid var(--separator)}
.legal__title{font-size:1.6rem;font-weight:800;color:var(--label);letter-spacing:-0.03em}
.legal__updated{font-size:0.8rem;color:var(--label-tertiary);margin-top:6px}
.legal__body{line-height:1.75;color:var(--label);font-size:0.94rem;letter-spacing:-0.01em}
.legal__section{margin-bottom:28px}
.legal__section h2{font-size:1.08rem;font-weight:700;color:var(--label);margin-bottom:12px;letter-spacing:-0.02em}
.legal__section p{margin-bottom:8px}
.legal__section ol,.legal__section ul{padding-left:20px;margin-bottom:8px}
.legal__section li{margin-bottom:6px}
.legal__section strong{color:var(--label);font-weight:700}
.legal__section a{color:var(--primary);text-decoration:none}
.legal__section a:hover{text-decoration:underline}
.legal__contact{margin-top:32px;padding:20px 24px;background:var(--bg-grouped);border:0.5px solid var(--separator);border-radius:var(--r-md);font-size:0.9rem}
.legal__contact p{margin-bottom:4px}
.legal__contact a{color:var(--primary)}
.legal__back{text-align:center;margin-top:36px}
.legal__back .btn--outline{
    display:inline-flex;
    align-items:center;
    padding:12px 26px;
    border:0.5px solid var(--separator);
    border-radius:999px;
    background:var(--bg-elevated);
    color:var(--label-secondary);
    font-size:0.88rem;
    font-weight:600;
    text-decoration:none;
    transition:all var(--t-fast);
    font-family:inherit;
    letter-spacing:-0.01em;
}
.legal__back .btn--outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-tint)}

/* ============================================================
   Utilities
   ============================================================ */
.loading-spinner{
    width:32px;
    height:32px;
    border:2.5px solid var(--separator);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:spin 0.7s linear infinite;
    margin:60px auto;
}
.loading-spinner--sm{width:16px;height:16px;border-width:2px;margin:0 auto}
.loading-spinner--inline{display:inline-block;vertical-align:middle;margin:0 0 0 6px}

.empty-msg{text-align:center;color:var(--label-secondary);padding:60px 16px;font-size:0.95rem;letter-spacing:-0.01em}
.empty-msg__npc{width:88px;height:88px;margin:0 auto 14px}
.empty-msg__cta{display:flex;gap:8px;justify-content:center;margin-top:16px}
.empty-msg__btn{
    padding:11px 22px;
    min-height:44px;
    border-radius:var(--r-sm);
    border:none;
    font-size:0.9rem;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    transition:all var(--t-fast);
    letter-spacing:-0.01em;
}
.empty-msg__btn--primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(124,58,237,0.25)}
.empty-msg__btn--primary:hover{background:var(--primary-dark)}
.empty-msg__btn--secondary{background:var(--surface);color:var(--label-secondary);border:0.5px solid var(--separator)}
.empty-msg__btn--secondary:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-tint)}

.error-msg{text-align:center;color:var(--wrong);padding:60px 16px;font-size:0.95rem;letter-spacing:-0.01em}
.error-msg__icon{font-size:1.8rem;margin-bottom:8px}
.error-msg__cta{display:flex;gap:8px;justify-content:center;margin-top:16px}
.error-msg__btn{padding:11px 22px;min-height:44px;border-radius:var(--r-sm);border:none;font-size:0.9rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all var(--t-fast)}
.error-msg__btn--retry{background:var(--wrong);color:#fff}
.error-msg__btn--retry:hover{opacity:0.9}
.error-msg__btn--home{background:var(--surface);color:var(--label-secondary);border:0.5px solid var(--separator)}
.error-msg__btn--home:hover{border-color:var(--primary);color:var(--primary)}

/* Toast */
.toast{
    position:fixed;
    bottom:calc(28px + var(--safe-bottom));
    left:50%;
    transform:translateX(-50%) translateY(20px);
    z-index:9999;
    background:rgba(11,11,20,0.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    color:#fff;
    padding:12px 22px;
    border-radius:var(--r-sm);
    font-size:0.88rem;
    font-weight:500;
    box-shadow:0 12px 32px rgba(0,0,0,0.24);
    opacity:0;
    pointer-events:none;
    transition:all 0.3s var(--ease-out);
    max-width:calc(100vw - 40px);
    text-align:center;
    display:flex;
    align-items:center;
    gap:12px;
    letter-spacing:-0.01em;
}
.toast--visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast__action{background:none;border:none;color:#C4B5FD;font-weight:700;font-size:0.88rem;cursor:pointer;padding:0;font-family:inherit;white-space:nowrap}
.toast__action:hover{text-decoration:underline}

/* ============================================================
   Quit Modal (R6-S004)
   ============================================================ */
.quit-modal__overlay{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(11,11,20,0.4);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    animation:fadeIn 0.22s var(--ease-out);
}
.quit-modal{
    background:#fff;
    border-radius:var(--r-xl);
    padding:32px 28px 24px;
    text-align:center;
    max-width:340px;
    width:calc(100% - 40px);
    box-shadow:0 24px 48px rgba(0,0,0,0.2);
    animation:screenFadeIn 0.26s var(--ease-out);
}
.quit-modal__text{font-size:1.15rem;font-weight:700;color:var(--label);margin-bottom:6px;letter-spacing:-0.02em}
.quit-modal__sub{font-size:0.88rem;color:var(--label-secondary);margin-bottom:24px;letter-spacing:-0.01em}
.quit-modal__actions{display:flex;gap:10px}
.quit-modal__btn{
    flex:1;
    padding:13px 0;
    min-height:48px;
    border:none;
    border-radius:var(--r-sm);
    font-size:0.95rem;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    transition:all var(--t-fast);
    letter-spacing:-0.01em;
}
.quit-modal__btn--quit{background:var(--surface);color:var(--label-secondary)}
.quit-modal__btn--quit:hover{background:var(--surface-hover)}
.quit-modal__btn--continue{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(124,58,237,0.28)}
.quit-modal__btn--continue:hover{background:var(--primary-dark)}

/* ============================================================
   Floating Home (R9-S007)
   ============================================================ */
.floating-home{
    display:none;
    position:fixed;
    bottom:calc(20px + var(--safe-bottom));
    right:20px;
    z-index:89;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    border:none;
    box-shadow:0 8px 24px rgba(124,58,237,0.36);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    transition:all var(--t-fast);
    font-family:inherit;
}
.floating-home:hover{transform:scale(1.08);box-shadow:0 10px 28px rgba(124,58,237,0.45)}
.floating-home:active{transform:scale(0.94)}
.floating-home svg{display:block}
@media(min-width:768px){.floating-home{bottom:28px;right:28px;width:52px;height:52px}}

/* ============================================================
   Touch optimizations
   ============================================================ */
button,.mode-card,.bubble,.cat-chip,.home-pack,.play__option,.play__close,.header__action,.floating-home,.hero__cta-sticky__btn{touch-action:manipulation}
.play__option,.mode-card,.bubble,.cat-chip,.home-pack{-webkit-user-select:none;user-select:none}
@media(hover:none) and (pointer:coarse){
    .cat-chip:hover{border-color:var(--separator);background:var(--bg-elevated);color:var(--label-secondary)}
    .cat-chip--active:hover{background:var(--label);border-color:var(--label);color:#fff}
    .play__option:hover{border-color:var(--separator);background:var(--bg-elevated)}
    .play__option:active{border-color:var(--primary);background:var(--primary-tint)}
    .home-pack:hover{border-color:var(--separator);box-shadow:var(--shadow-xs);transform:none}
    .home-pack:hover .home-pack__arrow{background:var(--surface);color:var(--label-tertiary);transform:none}
    .mode-card:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--separator)}
    .mode-card:hover::before{opacity:0}
    .bubble:hover{background:var(--primary-tint);border-color:rgba(124,58,237,0.18);transform:none}
}

/* ============================================================
   Animations (shared)
   ============================================================ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounceIn{0%{transform:scale(0.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* ============================================================
   Responsive breakpoints
   ≤360 (소형폰)
   ≤480 (일반 모바일)
   481~767 (대형 모바일 / 소형 태블릿)
   ≥768 (태블릿)
   ≥1100 (데스크탑)
   ≥1400 (와이드)
   ============================================================ */

/* ── ≤480 일반 모바일 ── */
@media(max-width:480px){
    :root{
        --q-font:1.05rem;
        --q-padding:18px 4px;
        --opt-font:0.96rem;
        --opt-padding:14px 16px;
        --opt-min-h:52px;
        --ox-size:150px;
        --ox-icon:4rem;
    }
    .header__inner{height:52px;gap:10px}
    .header__search{height:36px}
    .hero--purple{padding:32px 22px 28px;margin:8px 0 36px;border-radius:24px}
    .hero--purple .hero__npc{width:116px;height:116px;margin-bottom:14px}
    .hero--purple .hero__text{font-size:1.7rem}
    .hero--purple .hero__sub{font-size:0.9rem;margin-top:10px}
    .hero--purple .hero__cta{margin-top:18px;padding:12px 26px;min-height:46px;font-size:0.94rem}
    .mode-grid{gap:10px;margin:0 0 36px}
    .mode-card{min-height:144px;padding:18px 16px}
    .mode-card__emoji{width:52px;height:52px;font-size:1.7rem}
    .mode-card__title{font-size:1rem}
    .mode-card__desc{font-size:0.78rem}
    .home-packs__title{font-size:1.08rem}
    .cat-chip{padding:7px 12px;font-size:0.82rem;min-height:34px}
    .home-pack{padding:14px 14px}
    .home-pack__emoji{width:44px;height:44px;font-size:1.5rem}
    .home-pack__title{font-size:0.94rem}
    .home-pack__arrow{width:30px;height:30px;font-size:0.95rem}
    .bubble{padding:8px 12px;font-size:0.78rem;min-height:36px}
    .play__options--ox{gap:24px}
    .result__ring{width:150px;height:150px}
    .result__ring-inner{width:120px;height:120px}
    .result__pct{font-size:2.6rem}
    .result__action-btn{padding:11px 18px;font-size:0.88rem}
}

/* ── ≤360 소형폰 ── */
@media(max-width:360px){
    :root{
        --q-font:1rem;
        --q-padding:16px 4px;
        --opt-font:0.92rem;
        --opt-padding:12px 14px;
        --opt-min-h:48px;
        --ox-size:136px;
        --ox-icon:3.4rem;
        --fb-icon:2.4rem;
        --fb-text:0.95rem;
    }
    .screen{padding-left:16px;padding-right:16px}
    .header__inner{height:48px;padding:0 16px}
    .header__logo-icon{width:28px;height:28px;font-size:0.84rem;border-radius:8px}
    .header__logo-text{font-size:1rem}
    .header__search{height:34px;padding:0 12px 0 32px;font-size:16px}
    .header__search-icon{left:10px;width:14px;height:14px}
    .header__action{width:34px;height:34px;font-size:0.98rem}
    .hero--purple{padding:28px 18px 24px}
    .hero--purple .hero__text{font-size:1.5rem}
    .hero--purple .hero__sub{font-size:0.85rem}
    .hero--purple .hero__cta{padding:12px 22px;min-height:44px;font-size:0.9rem}
    .hero--purple .hero__npc{width:100px;height:100px}
    .mode-grid{gap:10px}
    .mode-card{min-height:132px;padding:16px 14px}
    .mode-card__emoji{width:48px;height:48px;font-size:1.5rem}
    .mode-card__title{font-size:0.95rem}
    .mode-card__desc{font-size:0.74rem}
    .home-packs__title{font-size:1rem}
    .play__question--large{font-size:1.9rem;letter-spacing:0.18em}
    .play__consonants{font-size:2rem;letter-spacing:0.22em}
}

/* ── 481~767 대형 모바일 → container 소폭 확장 ── */
@media(min-width:481px) and (max-width:767px){
    :root{--container:580px}
}

/* ── ≥768 태블릿 ── */
@media(min-width:768px){
    :root{
        --container:720px;
        --q-font:1.2rem;
        --q-padding:24px 20px;
        --opt-font:1.04rem;
        --opt-padding:18px 22px;
        --opt-min-h:58px;
        --ox-size:180px;
        --ox-icon:5rem;
        --fb-icon:3.2rem;
        --fb-text:1.1rem;
    }
    .header__inner{padding:0 32px;height:60px;gap:16px}
    .header__center{max-width:480px}
    .screen{padding-left:32px;padding-right:32px}
    .mode-grid{gap:14px;grid-template-columns:repeat(4,1fr)}
    .mode-card{min-height:168px;padding:24px 20px;gap:18px}
    .mode-card__emoji{width:60px;height:60px;font-size:1.95rem;border-radius:18px}
    .mode-card__title{font-size:1.1rem}
    .mode-card__desc{font-size:0.88rem}
    .hero--purple{
        flex-direction:row;
        text-align:left;
        align-items:center;
        justify-content:space-between;
        padding:44px 40px;
        margin:16px 0 48px;
        gap:28px;
    }
    .hero--purple .hero__npc{width:200px;height:200px;margin-bottom:0;order:2}
    .hero--purple .hero__content{flex:1;min-width:0}
    .hero--purple .hero__text{font-size:2.2rem}
    .hero--purple .hero__sub{font-size:1rem}
    .hero--purple .hero__cta{margin-top:24px;padding:15px 32px;min-height:54px;font-size:1.02rem}
    .home-packs .pack-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .home-pack{padding:18px 20px}
    .home-pack__emoji{width:52px;height:52px;font-size:1.7rem}
    #screen-play{max-width:720px;padding-left:28px;padding-right:28px}
    #screen-result{max-width:720px;padding-left:28px;padding-right:28px}
    .play__feedback{padding:40px 28px}
    .play__options--ox{gap:40px}
    .result__ring{width:180px;height:180px}
    .result__ring-inner{width:146px;height:146px}
    .result__pct{font-size:3.3rem}
    .footer{padding:44px 32px calc(32px + var(--safe-bottom))}
}

/* ── ≥1100 데스크탑 ── */
@media(min-width:1100px){
    :root{
        --container:900px;
        --q-font:1.28rem;
        --q-padding:28px 28px;
        --opt-font:1.08rem;
        --opt-padding:20px 26px;
        --opt-min-h:62px;
        --ox-size:200px;
        --ox-icon:5.5rem;
        --fb-icon:3.5rem;
        --fb-text:1.15rem;
    }
    .header__inner{padding:0 48px;height:64px;gap:20px}
    .screen{padding-left:48px;padding-right:48px}
    .mode-grid{grid-template-columns:repeat(4,1fr);gap:16px}
    .mode-card{min-height:180px;padding:28px 22px}
    .home-packs .pack-grid{grid-template-columns:repeat(3,1fr);gap:14px}
    .hero--purple{padding:56px 48px}
    .hero--purple .hero__text{font-size:2.5rem}
    .hero--purple .hero__npc{width:230px;height:230px}
    #screen-play{max-width:780px;padding-left:36px;padding-right:36px}
    #screen-result{max-width:780px;padding-left:36px;padding-right:36px}
    .play__header{padding:20px 0 10px}
    .play__feedback{padding:48px 36px;border-radius:var(--r-2xl)}
    .play__options{gap:12px}
    .play__options--ox{gap:48px}
    .play__image{max-height:320px}
    .play__input{padding:16px 20px;font-size:1.1rem}
    .play__consonants{font-size:3rem;letter-spacing:0.35em}
    .result__ring{width:200px;height:200px}
    .result__ring-inner{width:164px;height:164px}
    .result__pct{font-size:3.6rem}
    .footer{padding:48px 48px calc(32px + var(--safe-bottom))}
}

/* ── ≥1400 와이드 ── */
@media(min-width:1400px){
    :root{
        --container:1040px;
        --q-font:1.34rem;
        --q-padding:32px 32px;
        --opt-font:1.12rem;
        --opt-padding:22px 28px;
        --opt-min-h:64px;
    }
    .header__inner{padding:0 56px;height:68px;gap:24px}
    .header__logo-icon{width:34px;height:34px;font-size:1rem;border-radius:10px}
    .header__logo-text{font-size:1.12rem}
    .header__center{max-width:560px}
    .screen{padding-left:56px;padding-right:56px}
    .mode-grid{gap:18px}
    .mode-card{min-height:192px;padding:30px 24px}
    .mode-card__emoji{width:68px;height:68px;font-size:2.1rem}
    .mode-card__title{font-size:1.15rem}
    .hero--purple{padding:64px 56px;border-radius:32px}
    .hero--purple .hero__text{font-size:2.75rem}
    .hero--purple .hero__npc{width:250px;height:250px}
    #screen-play{max-width:820px;padding-left:44px;padding-right:44px}
    #screen-result{max-width:820px;padding-left:44px;padding-right:44px}
    .result__ring{width:220px;height:220px}
    .result__ring-inner{width:180px;height:180px}
    .result__pct{font-size:4rem}
    .footer{padding:56px 64px calc(36px + var(--safe-bottom))}
}

/* ── 접근성: 모션 감소 ── */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

/* ── 다크 모드 (시스템 연동) ── */
@media(prefers-color-scheme:dark){
    /* 라이트 테마 유지를 위해 의도적으로 비움 — 추후 다크 모드 지원 시 확장 */
}