/* 한글마루 스타일시트 — index.html 에서 분리 (2026-10-21).
   www/ 로는 npm run build 가 복사한다. 순서가 곧 우선순위이므로 블록 순서를 바꾸지 말 것. */

/* ===== 🎨 색상 토큰 (라이트 기본 + 시스템 다크 자동 / .force-dark 수동) ===== */
:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-muted: #f1f5f9;
    --surface: #ffffff;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text-primary: #1e293b;
    --text-body: #334155;
    --text-sub: #475569;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --ink-text: #2a2f3a;
    --ink-border: var(--border-strong);
    --brand-mint: #ecfdf5;
    --mint-border: #a7f3d0;
    --info-soft: #f0f9ff;
    --info-bg: #eff6ff;
    --info-border: #bae6fd;
    --amber-soft: #fffbeb;
    --lime-soft: #f7fee7;
    --teal-soft: #f0fdfa;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --indigo-bg: #eef2ff;
    --overlay: rgba(0, 0, 0, 0.4);
    --toast-bg: rgba(30, 41, 59, 0.95);
    --kbd-bg: linear-gradient(180deg, rgba(220, 236, 247, 0.95) 0%, rgba(196, 220, 239, 0.96) 100%);
    --kbd-edge: rgba(255, 255, 255, 0.85);
    --kbd-key: linear-gradient(180deg, #ffffff 0%, #eaf4fb 55%, #d8e9f5 100%);
    --kbd-key-border: rgba(255, 255, 255, 0.9);
    --kbd-gloss: rgba(255, 255, 255, 0.85);
    --kbd-key-text: #27516e;
    --kbd-key-fn: linear-gradient(180deg, #e6f1f9 0%, #cfe2f0 100%);
    --kbd-key-fn-active: #b9d3e6;
    --kbd-snow: rgba(255, 255, 255, 0.8);
    /* 🌤 어휘 고도 그림의 하늘 — 라이트는 낮하늘 */
    --alt-sky-top: #cfe6fb;
    --alt-sky-bottom: #eaf7ff;
    --alt-orb: #fcd34d;          /* 해 */
    --alt-orb-halo: 0.3;
    --alt-star: transparent;     /* 낮에는 별이 안 보인다 */
    --alt-sea-top: #7dd3fc;      /* 낮바다 */
    --alt-sea-bottom: #0284c7;
    --alt-sea-foam: #bae6fd;
}

@media (prefers-color-scheme: dark) {
    :root:not(.force-light) {
    --bg: #121212;
    --bg-subtle: #1a1a1a;
    --bg-muted: #262626;
    --surface: #1e1e1e;
    --border: #303030;
    --border-strong: #464646;
    --text-primary: #f0f0f0;
    --text-body: #dadada;
    --text-sub: #bdbdbd;
    --text-secondary: #9e9e9e;
    --text-muted: #8c8c8c;
    --ink-text: #f0f0f0;
    --ink-border: var(--border-strong);
    --brand-mint: #13291f;
    --mint-border: #1e5335;
    --info-soft: #1b2733;
    --info-bg: #1d2836;
    --info-border: #2c4759;
    --amber-soft: #2f2712;
    --lime-soft: #212a14;
    --teal-soft: #132a25;
    --danger-bg: #331e1e;
    --danger-border: #553231;
    --indigo-bg: #292a3a;
    --overlay: rgba(0, 0, 0, 0.66);
    --toast-bg: rgba(52, 52, 52, 0.97);
    --kbd-bg: linear-gradient(180deg, rgba(38, 38, 38, 0.95) 0%, rgba(24, 24, 24, 0.97) 100%);
    --kbd-edge: rgba(255, 255, 255, 0.08);
    --kbd-key: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 55%, #303030 100%);
    --kbd-key-border: rgba(255, 255, 255, 0.10);
    --kbd-gloss: rgba(255, 255, 255, 0.13);
    --kbd-key-text: #ececec;
    --kbd-key-fn: linear-gradient(180deg, #343434 0%, #282828 100%);
    --kbd-key-fn-active: #505050;
    --kbd-snow: rgba(255, 255, 255, 0.35);
    
    /* 🌙 다크는 밤하늘 — 달과 별로 바뀐다 */
    --alt-sky-top: #0a1330;
    --alt-sky-bottom: #16305c;
    --alt-orb: #dbe6f7;          /* 달 */
    --alt-orb-halo: 0.18;
    --alt-star: #e2e8f0;
    --alt-sea-top: #16436e;      /* 밤바다 */
    --alt-sea-bottom: #0a2647;
    --alt-sea-foam: #3b6f9e;
}
}

:root.force-light {
    color-scheme: light;
}

:root.force-dark {
    color-scheme: dark;
}

:root.force-dark {
    --bg: #121212;
    --bg-subtle: #1a1a1a;
    --bg-muted: #262626;
    --surface: #1e1e1e;
    --border: #303030;
    --border-strong: #464646;
    --text-primary: #f0f0f0;
    --text-body: #dadada;
    --text-sub: #bdbdbd;
    --text-secondary: #9e9e9e;
    --text-muted: #8c8c8c;
    --ink-text: #f0f0f0;
    --ink-border: var(--border-strong);
    --brand-mint: #13291f;
    --mint-border: #1e5335;
    --info-soft: #1b2733;
    --info-bg: #1d2836;
    --info-border: #2c4759;
    --amber-soft: #2f2712;
    --lime-soft: #212a14;
    --teal-soft: #132a25;
    --danger-bg: #331e1e;
    --danger-border: #553231;
    --indigo-bg: #292a3a;
    --overlay: rgba(0, 0, 0, 0.66);
    --toast-bg: rgba(52, 52, 52, 0.97);
    --kbd-bg: linear-gradient(180deg, rgba(38, 38, 38, 0.95) 0%, rgba(24, 24, 24, 0.97) 100%);
    --kbd-edge: rgba(255, 255, 255, 0.08);
    --kbd-key: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 55%, #303030 100%);
    --kbd-key-border: rgba(255, 255, 255, 0.10);
    --kbd-gloss: rgba(255, 255, 255, 0.13);
    --kbd-key-text: #ececec;
    --kbd-key-fn: linear-gradient(180deg, #343434 0%, #282828 100%);
    --kbd-key-fn-active: #505050;
    --kbd-snow: rgba(255, 255, 255, 0.35);
}

/* 🌑 다크모드 마무리 — 남아 있던 남색(slate) 계열을 중립 회색으로 */
@media (prefers-color-scheme: dark) {
    :root:not(.force-light) button.btn-secondary:hover { background-color: #7a7a7a; }
    :root:not(.force-light) .dashboard { background-color: #262626; }
}
:root.force-dark button.btn-secondary:hover { background-color: #7a7a7a; }
:root.force-dark .dashboard { background-color: #262626; }

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

html,
body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    font-family: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', sans-serif;
    overscroll-behavior: none;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: stretch;
    background-color: var(--bg);
}

.app-wrapper {
    width: 100%;
    max-width: 550px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* 데스크톱 웹 환경에서 화면 중앙에 카드 형태로 보이도록 설정
   ⚠️ 높이 하한이 650px 이던 시절엔 «노트북에서 창을 조금만 줄이거나 북마크바를 켜면»
      카드 스타일이 통째로 꺼지고 모바일 레이아웃이 화면 한가운데 떴다.
      480px 로 낮춘다 — 폰 가로(높이 390~430)는 여전히 제외된다. */
@media (min-width: 560px) and (min-height: 480px) {
    body {
        background-color: var(--surface);
    }

    #app-screen {
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* 상단 헤더의 가로 100% 위치 그대로 보존 */
    #app-screen>header {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0;
        background: var(--surface);
    }

    /* app-wrapper를 화면 한가운데에 카드 형태로 배치하되, 헤더 바로 아래 밀착되도록 설정 */
    .app-wrapper {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        /* 세로 위쪽(헤더 바로 아래)에 밀착 */
        max-width: 100%;
        /* 웹 브라우저 전체 너비 사용 */
        height: auto;
        background-color: var(--surface);
        padding: 10px 20px 20px 20px;
        /* 상단 여백을 10px로 최소화하여 밀착 */
        box-sizing: border-box;
        /* 🖥 넘치면 «래퍼»가 스크롤한다 — 카드 안쪽이 굴러가지 않게.
           주변이 텅 빈데 480px 상자 안만 스크롤되는 게 데스크톱에서 가장 어색했다. */
        overflow-y: auto;
        /* ⚠️ 이 래퍼는 base 에서 flex-direction: column 이다(여기서 안 바꾼다).
           그래서 justify-content 는 «세로» 축이다. center 로 두면 내용이 길어질 때
           위쪽이 잘려 스크롤로도 닿지 않는다. 반드시 flex-start. */
        justify-content: flex-start;
    }

    /* 메인 카드 컴포넌트 */
    .quiz-container {
        width: 100%;
        max-width: 480px;
        /* 전형적인 모바일 웹뷰 가로폭 */
        height: auto;
        /* ⚠️ max-height 를 걸지 않는다. 예전엔 calc(100vh - 100px) 로 못 박아서
           통계가 뜨는 순간 카드 «안쪽»에 스크롤이 생겼다(1440×700 에서 623>598 실측).
           내용만큼 늘어나게 두고, 넘치는 건 .app-wrapper 가 스크롤한다.
           ⚠️ base 의 `flex: 1` 과 `overflow-y: auto` 도 반드시 함께 풀어야 한다 —
           max-height 만 지우면 flex:1 이 래퍼 높이만큼 늘려 놔서 증상이 그대로다.
           ⚠️ !important 가 필요하다: 이 미디어쿼리는 `.quiz-container` 기본 규칙보다
           «위»에 있고 특정도가 같아서(둘 다 0,1,0) 나중에 오는 기본 규칙이 이긴다.
           (같은 블록의 margin·padding 이 이미 !important 인 것도 같은 이유다) */
        flex: 0 0 auto !important;
        overflow-y: visible !important;
        margin: 0 auto !important;
        /* 중앙 정렬 */
        padding: 30px 24px !important;
        border-radius: 28px;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
        /* 고급스러운 부드러운 그림자 */
        border: 1px solid var(--border);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        /* 스크롤바 방지 */
    }

    /* 카드 안의 큰 텍스트들 높이나 여백 미세 조절하여 데스크톱 뷰포트 내 스크롤 최소화 */
    .sentence {
        font-size: 20px;
        /* 데스크톱에서 약간 슬림하게 */
        margin-bottom: 12px;
        min-height: auto;
    }

    .meaning {
        font-size: 14px;
        margin-bottom: 20px;
        padding: 10px;
    }

    .progress-bar {
        margin-bottom: 20px;
    }
}

/* 🏔 넓은 화면 풍경 — 좁은 화면에서는 존재하지 않는 것처럼 둔다 */
#home-scene-wrap {
    display: none;
    position: relative;
    width: 100%;
    height: 316px;
    padding: 0;
    border: 1px solid var(--info-border);
    border-radius: 28px;
    overflow: hidden;
    background: var(--info-soft);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}
#home-scene-overlay {
    position: absolute;
    left: 30px;
    top: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    pointer-events: none;
}
#home-scene-label { font-size: 13px; font-weight: 800; color: #0369a1; }
#home-scene-value {
    font-size: 46px; font-weight: 900; color: #047857;
    line-height: 1.1; letter-spacing: -1px; font-variant-numeric: tabular-nums;
}
#home-scene-tier {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--surface); border: 1px solid var(--mint-border);
    border-radius: 999px; padding: 4px 12px;
    font-size: 13px; font-weight: 800; color: #047857; margin-top: 4px;
}
#home-scene-left { font-size: 13px; font-weight: 600; color: #0369a1; margin-top: 7px; }
#home-scene-hint {
    position: absolute; right: 16px; bottom: 14px;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(15, 23, 42, 0.42); color: #ffffff;
    border-radius: 999px; padding: 4px 11px;
    font-size: 11.5px; font-weight: 700; pointer-events: none;
}
#home-scene-wrap:active #home-scene { transform: scale(0.99); }
/* 🖥 A안 학습 분석 패널 — 넓은 화면에서만 나타난다 (좁은 화면은 통계 모달이 담당) */
#home-analysis { display: none; }   /* 기억 단계·갈래별도 이 안에 있다 */
/* 🖥 P34: 열 래퍼는 좁은 화면에서 «없는 셈»이 된다 — 지금 배치가 그대로다 */
#home-col-left, #home-col-right { display: contents; }
.ha-sec { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border); }
.ha-sec:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.ha-t { display: block; font-size: 11px; font-weight: 800; color: var(--text-muted);
        letter-spacing: 0.3px; margin-bottom: 7px; }
.ha-empty { font-size: 11.5px; color: var(--text-secondary); background: var(--bg-subtle);
            border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; line-height: 1.6; }
.ha-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 11.5px; }
.ha-row .nm { width: 74px; flex-shrink: 0; color: var(--text-sub); font-weight: 700;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-row .bar { flex: 1; height: 9px; border-radius: 5px; background: var(--bg-muted); overflow: hidden; }
.ha-row .bar i { display: block; height: 100%; border-radius: 5px; }
.ha-row .pc { width: 34px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.ha-note { margin-top: 8px; font-size: 11px; color: var(--text-secondary); background: var(--danger-bg);
           border: 1px solid var(--danger-border); border-radius: 10px; padding: 7px 10px; line-height: 1.5; }

/* ⚠️ 이 기본 규칙은 반드시 아래 미디어쿼리 «앞»에 있어야 한다 —
   특정도가 같아서(둘 다 0,1,0) 뒤에 오는 쪽이 이긴다. 뒤에 두면 display:none 이 이겨 풍경이 안 뜬다. */

/* ══════════════════════════════════════════════════════════════
   🖥 넓은 화면(마우스) — 2열. 왼쪽 문제, 오른쪽 통계·유의어.
   좁은 창·태블릿·폰은 이 블록에 들어오지 않으므로 지금 모습 그대로다.
   ══════════════════════════════════════════════════════════════ */
/* ⚠️ JS 의 WIDE_MQ 와 «같은 조건». 2026-09-30: 터치 태블릿 가로(iPad 가로 1133~1366px)도 2열로 쓴다 */
@media (min-width: 1100px) and (min-height: 480px) and (hover: hover) and (pointer: fine),
       (min-width: 1100px) and (min-height: 700px) and (pointer: coarse) {
    .app-wrapper {
        padding: 22px 28px 28px !important;
    }
    /* quiz-box 는 카드를 벗고 «격자»가 된다 — 카드 옷은 quiz-main 이 입는다 */
    #quiz-box {
        max-width: 1180px !important;
        /* ⚠️ display 에 !important 를 붙이면 인라인 `display:none` 을 이겨 버려
           홈 화면에서도 퀴즈 상자가 사라지지 않는다. 붙이지 말 것. */
        display: grid;
        grid-template-columns: minmax(0, 1fr) 440px;
        column-gap: 32px;
        align-items: start;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    #quiz-main {
        grid-column: 1;
        flex: 0 0 auto;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 28px;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
        padding: 30px 32px;
        box-sizing: border-box;
    }
    /* ⚠️ 인라인 style 이 배경·여백·테두리를 들고 있어 !important 가 필요하다 */
    #inline-stats-container {
        grid-column: 2;
        grid-row: 1;   /* 격자의 실제 흐름 자식은 quiz-main 과 이것 둘뿐이다 */
        margin-top: 0 !important;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 28px !important;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08) !important;
        padding: 26px 24px !important;
    }
    /* 입력줄을 바닥으로 밀던 것 — 키보드가 없는 화면에서는 문제 바로 아래가 맞다 */
    #quiz-main .input-group {
        margin-top: 22px;
    }
    .sentence { font-size: 26px; min-height: auto; }
    .meaning  { font-size: 15.5px; }
    /* 신고 깃발은 quiz-box(격자) 기준이 아니라 왼쪽 카드 기준으로 */
    #quiz-main { position: relative; }

    /* ── 🏔 홈: 창을 가로지르는 풍경 한 장 + 그 아래 2열 ── */
    #home-box {
        max-width: 1180px !important;
        /* ⚠️ display 에 !important 금지 — 인라인 display:none 으로 숨겨야 한다 (quiz-box 와 같은 함정) */
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 28px;
        row-gap: 16px;
        align-items: start;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    /* ── A안: 왼쪽 풍경(고도), 오른쪽 학습 분석 ──
       행을 명시로 잡는다. 자동 배치에 맡기면 풍경과 분석의 높이 차이 때문에
       아래 항목이 엉뚱한 행으로 밀린다. */
    /* ── 두 열을 «독립»시킨다 ──
       예전처럼 행을 공유하면 행 높이가 두 열 중 높은 쪽에 맞춰져,
       오른쪽 분석 패널이 길 때 왼쪽 산과 학습 시작 버튼 사이가 텅 빈다. */
    #home-identity   { grid-column: 1 / -1; grid-row: 1; }
    #home-col-left, #home-col-right {
        display: flex;
        flex-direction: column;
        gap: 16px;
        grid-row: 2;
        min-width: 0;
    }
    #home-col-left  { grid-column: 1; }
    #home-col-right { grid-column: 2; }
    /* 🖥 2026-09-26: 학습 시작 버튼은 풍경 «바로 아래». 예전엔 요약·이야기 뒤(맨 끝)에 두어,
       요약 칸이 늘자(익히는 중·익힌·알던 3칸) 맥북 창에서 버튼이 화면 밖으로 밀렸다.
       좁은 화면 A안과 같은 원칙(고도 → 행동 → 분석)이다. 아래 내용이 늘어도 버튼은 안 밀린다.
       DOM 순서는 그대로 두고 넓은 화면에서만 order 로 바꾼다(좁은 화면 불변). */
    #home-col-left > #home-scene-wrap { order: 1; }
    #home-col-left > #home-action     { order: 2; }
    #home-col-left > #home-stats      { order: 3; }
    #home-col-left > #home-story-wrap { order: 4; }
    /* 🖥 P38: 창 높이에 맞춰 풍경을 줄인다 — 「오늘의 학습 시작하기」까지
       한 화면에 들어와야 한다. 330px 고정이라 세로가 조금만 짧아도
       버튼이 잘려 스크롤해야 보였다.
       왼쪽 열에서 풍경 말고 쓰는 높이의 합 = 584px (2026-09-26 실측, 1440×790)
         풍경 위(상단 바·이름 줄) 172 + 요약 200 + 이야기 54 + 버튼 82 + 사이 여백 16×3 + 아래 여백 28
       ⚠️ 이 값은 요약·이야기가 커지면 틀어진다(499 → 584 가 그랬다). 그래도 버튼은 풍경 바로 아래라
       가려지지 않고, 틀어지는 것은 «요약·이야기까지 한 화면에 들어오는가»뿐이다.
       창이 914px 이상이면 330px 그대로다. */
    #home-scene-wrap { display: block; height: clamp(170px, calc(100dvh - 584px), 330px); }
    /* 인라인 style 이 width/height 를 들고 있어 !important 가 필요하다 */
    #home-scene {
        position: absolute !important; inset: 0;
        width: 100% !important; height: 100% !important;
    }   /* height:auto 로 두면 상자보다 커져 산머리가 잘린다 — 높이를 채우고 meet 로 맞춘다 */
    #home-analysis   { display: block; }
    #home-mountain,
    #home-altitude-hero { display: none !important; }   /* 좁은 화면용 크롭·히어로는 풍경이 대신한다 */
    #open-dev-panel-btn { grid-column: 1; grid-row: 3; }
    #home-analysis {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
        padding: 22px 24px;
        box-sizing: border-box;
        /* 🖥 P38: 오른쪽 분석 패널이 길어 창이 짧으면 이쪽이 넘친다.
           패널 안에서만 스크롤시켜 왼쪽 열(버튼 포함)은 늘 다 보이게 한다. */
        max-height: calc(100dvh - 171px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #home-stats {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
        padding: 22px 24px;
    }
    #start-study-btn { height: 82px; font-size: 21px; }

    /* ── 🖥 로그인: 기존 화면은 그대로 두고, 그 «위에» 팝업으로 묻는다 ──
       하랑이·워드마크·소개 문구는 배경으로 남는다. 선택지만 창으로 뜬다. */
    .login-card { max-width: 620px; }        /* 배경 내용이 너무 넓게 퍼지지 않게만 */
    /* 배경 인사말은 팝업 «위»에 온전히 들어가야 한다 — 잘린 워드마크는 오류처럼 보인다.
       말풍선 55 + 하랑이 110 + 워드마크 30 + 소개 19 ≈ 246px 로 맞춘다. */
    .login-card > svg { width: 110px !important; height: 110px !important; margin-top: 12px !important; }
    .login-card .hm-wordmark { font-size: 24px; margin-top: 4px; }
    .login-card #login-tagline { font-size: 12.5px; margin-top: 4px; }

    /* 팝업 본체 — display 는 인라인 스타일(JS)이 쥐고 있으므로 건드리지 않는다 */
    #login-btn-group, #start-prompt {
        position: fixed;
        /* ⚠️ transform 으로 가운데 두면 안 된다 — 등장 애니메이션(cta-fade-in)이
           transform 을 덮어써 팝업이 한쪽으로 밀린다(렌더로 확인).
           inset+margin:auto 는 애니메이션과 겹치지 않는다. */
        inset: 0;
        margin: auto;
        height: fit-content;
        z-index: 60;
        width: 380px;
        max-width: min(380px, calc(100vw - 48px)) !important;   /* 인라인 max-width:360px 를 이긴다 */
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: 26px 26px 20px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 22px;
        /* 두 번째 그림자가 화면 전체를 덮는 «어둠» 역할을 한다.
           팝업이 display:none 이면 함께 사라지므로 JS 토글이 필요 없고,
           transform 이 걸린 요소 안에서도 잘린 적 없이 그려진다. */
        box-shadow: 0 30px 70px rgba(15, 23, 42, 0.30);
        box-sizing: border-box;
    }
    /* ── 🖥 P33: 로그인 팝업의 배경 = 학습 홈 ──
       .login-over-home 이 붙은 동안 #login-screen 은 «모달 층»이 된다.
       DOM 상 #app-screen 이 뒤에 오므로 z-index 없이는 홈이 팝업을 덮는다. */
    html.login-over-home #login-screen {
        position: fixed;
        inset: 0;
        z-index: 900;   /* 상단 바(sticky, 100)보다 위 · 실제 모달(1000+)보다는 아래 */
        background: rgba(6, 78, 59, 0.30) !important;   /* 어둠 — 브랜드 초록 */
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        pointer-events: none;          /* 뒤 홈도 못 누르게 — 팝업만 살린다 */
    }
    html.login-over-home #login-btn-group { pointer-events: auto; }
    /* 인사말은 스플래시 전용이 된다 */
    html.login-over-home .login-card > *:not(#login-btn-group):not(#start-prompt) { display: none; }
    /* 배경은 보되 만질 수는 없게 */
    html.login-over-home #app-screen {
        pointer-events: none;
        user-select: none;
    }
    /* 로그인 전이라 「님」·「로딩중…」 처럼 빈 값이 보인다 — 배경에서는 감춘다 */
    html.login-over-home #home-identity,
    html.login-over-home #home-story-wrap { visibility: hidden; }
    #login-popup-title { display: block !important; }
    #start-prompt {
        width: auto; padding: 22px 30px;
        box-shadow: 0 30px 70px rgba(15, 23, 42, 0.30),
                    0 0 0 100vmax rgba(6, 78, 59, 0.30);
    }

    /* 이메일 로그인 화면도 같은 팝업 모양으로 */
    #email-login-screen {
        justify-content: center;
        align-items: center;
        padding: 32px;
        background: var(--brand-mint);
    }
    #email-login-card {
        width: 100%;
        max-width: 420px;
        height: auto;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding: 28px 28px 24px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 22px;
        box-shadow: 0 30px 70px rgba(15, 23, 42, 0.30);
    }
    #email-login-card .login-spacer { display: none; }
}
/* 📱 태블릿 세로 (2026-09-30) — 폰 폭(480px) 카드가 큰 화면 가운데 작게 떠 있던 것을 키운다.
   JS 의 TABLET_MQ 와 같은 조건. 넓은 화면(가로)은 위 2열 규칙이 맡는다. */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 900px) {
    .quiz-container { max-width: 640px; }
    .sentence { font-size: 26px; }
    .meaning  { font-size: 17px; }
    #answer-input { font-size: 20px; }
}



#login-tagline {
    margin: 10px 0 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    word-break: keep-all;
    max-width: 320px;
}

#login-screen,
#setup-screen {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    box-sizing: border-box;
    background: var(--surface);
}

#app-screen {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--surface);
}

.dashboard {
    display: none !important;
    justify-content: space-between;
    background-color: #1e293b;
    color: white;
    padding: 15px 25px;
    border-radius: 16px 16px 0 0;
    font-weight: bold;
    font-size: 14px;
}

.exp-bar-container {
    width: 100px;
    height: 8px;
    background-color: #475569;
    border-radius: 4px;
    margin-top: 5px;
    overflow: hidden;
}

.exp-fill {
    height: 100%;
    background-color: #f59e0b;
    width: 0%;
    transition: width 0.5s ease;
}

/* 🖥 넓은 화면에서 왼쪽 카드가 되는 묶음. 좁은 화면에서는 «투명한 통과 상자»로,
   quiz-container 가 갖고 있던 세로 흐름(특히 .input-group 의 margin-top:auto)을 그대로 이어받는다. */
#quiz-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.quiz-container {
    background-color: var(--surface);
    margin: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    padding: 24px 20px;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    border: 1px solid var(--border);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: var(--border);
    border-radius: 4px;
    margin-bottom: 30px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #10b981;
    width: 0%;
    transition: width 0.3s ease;
}

/* 문장 및 의미 왼쪽 정렬 */
.sentence {
    font-size: 22px;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 15px;
    line-height: 1.6;
    word-break: keep-all;
    min-height: 90px;
    text-align: left;
}

.meaning {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    background-color: var(--bg-subtle);
    padding: 12px;
    border-radius: 8px;
    display: inline-block;
    line-height: 1.6;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

/* 뜻풀이 안에 인라인으로 들어가므로 본문 줄 높이(15px × 1.6 = 24px)를 넘지 않게 —
   넘으면 뜻풀이가 두 줄 이상일 때 첫 줄만 벌어져 보인다 */
.level-badge {
    background-color: #3b82f6;
    color: white;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10.5px;
    line-height: 1.45;
    font-weight: bold;
    margin-right: 6px;
    vertical-align: 1px;
    display: inline-block;
}

/* 📜 사자성어 — 레벨 배지와 같은 치수, 색만 다르게 */
.idiom-badge {
    background-color: #8b5cf6;
    color: white;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10.5px;
    line-height: 1.45;
    font-weight: bold;
    margin-right: 6px;
    vertical-align: 1px;
    display: inline-block;
}

.review-badge {
    background-color: #f59e0b;
    color: white;
    padding: 1px 6px;
    border-radius: 5px;
    line-height: 1.45;
    vertical-align: 1px;
    display: inline-block;
    font-size: 10.5px;
    font-weight: bold;
    margin-right: 6px;
}

.retry-badge {
    background-color: #f43f5e;
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 8px;
    vertical-align: middle;
}

.retry-badge.syn {
    background-color: #3b82f6;
}

/* 커스텀 UI 아이콘 (이모지 대체) — 폰트 크기에 맞춰 스케일 */
/* 🔷 조각 획득 스프라이트: 아래에서 떠올라 → 잠시 머문 뒤 → 위로 사라짐 */
@keyframes shardFloatUp {
    0%   { opacity: 0; transform: translateY(12px) scale(0.7); }
    18%  { opacity: 1; transform: translateY(0) scale(1.08); }
    30%  { transform: translateY(0) scale(1); }
    68%  { opacity: 1; transform: translateY(-3px) scale(1); }
    100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

.shard-float {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 800;
    opacity: 0;
    animation: shardFloatUp 1.7s ease forwards;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
}

@keyframes ctaFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cta-fade-in { animation: ctaFadeIn 0.55s cubic-bezier(.22, 1, .36, 1) both; }

/* 통계 등장 동안 하랑이 SVG 애니메이션 정지 → 메인 렌더 스레드 확보(끊김 방지) */
#harang-companion.anim-freeze svg,
#harang-companion.anim-freeze use { animation-play-state: paused !important; }

@keyframes startPulse {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes hcBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

.ui-ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.input-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: auto;
    /* 🌟 항상 최하단에 고정 */
}

/* 🌟 인앱 한글 자체 키보드 UI 스타일 (모던 iOS 글래스 시안 - 화면 최하단 네이티브 크기 안착) */
#custom-keyboard {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    /* 메인 앱뷰 최대 가로폭과 매칭 */
    z-index: 1000;
    touch-action: none;
    /* 🌟 키보드 영역에서 브라우저 스크롤/줌 제스처 판정을 원천 차단 — 터치 지연 제거 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 🌟 네이티브에 가깝게 줄 간격 확대 */
    background: var(--kbd-bg);
    /* 애플 순정 키보드 특유의 회색조 반투명 글래스 — 블러 강도를 낮춰 리페인트 비용 절감(반응속도) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateX(-50%) translateZ(0);
    /* GPU 레이어 승격으로 키 애니메이션 시 블러 재계산 방지 */
    padding: 16px 8px calc(16px + env(safe-area-inset-bottom)) 8px;
    /* 🌟 상단 및 좌우 패딩을 넓혀 네이티브 크기로 증대 */
    border-radius: 28px 28px 0 0;
    /* 상단 좌우 모서리만 둥글게 처리하여 화면 바닥 안착 극대화 */
    border-top: 1px solid var(--kbd-edge);
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.08);
    /* 위쪽 방향으로 그림자 */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    box-sizing: border-box;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 키보드가 활성화되었을 때 퀴즈 카드 바닥 패딩 추가로 입력 영역 가림 방지
   (--kb-height는 JS가 실제 키보드 높이를 측정해 설정, 330px는 폴백) */
/* 📊 통계 패널이 키보드 자리를 그대로 대체 — 위 레이아웃(하랑이 포함) 픽셀 고정 */
#inline-stats-container.kb-slot {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    /* 탭 + 제목 + 표본 줄 + 표 머리 + 막대 두어 줄 + 다음 버튼이 한 화면에 들어가야 한다.
       키보드 자리보다 커져도 괜찮다 — 정답이 공개된 뒤라 위쪽은 어차피 비어 있다.
       다만 작은 기기에서 문장까지 덮지 않도록 뷰포트 58%로 상한을 둔다. */
    /* ⚠️ height 는 var(--kb-height) 를 쓴다 — 값이 한 번이라도 잘못 들어가면(NaNpx 등)
       이 선언 전체가 무효가 돼 height:auto 로 떨어진다 — 패널이 내용 높이만큼만 뜨는 버그.
       그래서 var 를 쓰지 않는 min-height 를 안전망으로 함께 둔다. */
    height: min(52vh, max(var(--kb-height, 330px), 440px));
    min-height: min(52vh, 440px);
    margin: 0 !important;
    padding: 12px 16px 0 !important;
    box-sizing: border-box;
    /* 인라인 style 의 border/radius/shadow 를 이겨야 '바닥에서 올라온 시트'로 보인다 */
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 26px 26px 0 0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1) !important;
    z-index: 1001;   /* 키보드(1000)보다 위 — 키보드 하강과 통계 등장이 겹쳐도 통계가 자연스럽게 덮음 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 🌟 등장 연출: opacity + transform만 사용 (컴포지터 전용 → 레이아웃/페인트 0)
       ⚠️ 중앙정렬 translateX(-50%)는 모든 상태에서 반드시 유지할 것 */
    transform: translateX(-50%) translateY(14px) translateZ(0);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(.16, .84, .28, 1),
                opacity 0.26s ease-out;
    will-change: transform, opacity;
}
#inline-stats-container.kb-slot.slid-in {
    transform: translateX(-50%) translateY(0) translateZ(0);
    opacity: 1;
}
/* 연출이 끝나면 will-change 해제 — 레이어 상시 승격으로 인한 메모리 낭비 방지 */
#inline-stats-container.kb-slot.slid-in.anim-done {
    will-change: auto;
}
/* 시스템 '동작 줄이기' 설정 존중 — 모션 없이 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
    #inline-stats-container.kb-slot {
        transition: none;
        transform: translateX(-50%);
    }
    #inline-stats-container.kb-slot.slid-in {
        transform: translateX(-50%);
    }
}
/* 통계 본문은 스크롤, 다음 버튼은 하단 고정 */
#inline-stats-container.kb-slot .stats-scroll {
    flex: 1 1 auto;
    min-height: 0;   /* 🌟 플렉스 자식이 내용만큼 커지지 않고 스크롤되도록 (버튼 하단 고정 보장) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#next-btn.stats-next {
    flex: none !important;
    width: 100%;
    margin: 12px 0 0;
    padding: 16px;
    border-radius: 14px;
    font-size: 16px;
    /* 홈 인디케이터/안전영역 회피 */
    margin-bottom: max(10px, env(safe-area-inset-bottom));
    animation: none;
}

/* 🌟 키보드 슬라이드 전환 (통계 ↔ 키보드) */
#custom-keyboard {
    transition: transform 0.34s cubic-bezier(.45, 0, .75, .55), opacity 0.3s ease;
    will-change: transform, opacity;
}
#custom-keyboard.kb-sliding-out {
    transform: translateX(-50%) translateY(112%) translateZ(0) !important;
    opacity: 0;
    /* 하강 중엔 유리 블러 끔 — 매 프레임 blur 재계산 방지 (끊김 주범) */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
@keyframes kbSlideIn {
    from { transform: translateX(-50%) translateY(112%) translateZ(0); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0) translateZ(0); opacity: 1; }
}
#custom-keyboard.kb-sliding-in {
    animation: kbSlideIn 0.42s cubic-bezier(.16, .84, .28, 1);
}

#quiz-box.keyboard-active {
    padding-bottom: var(--kb-height, 330px) !important;
    /* 입력줄을 키보드 바로 위로 내려 엄지 도달 거리 최소화 (중앙 데드 스페이스 제거) */
    display: flex !important;
    flex-direction: column;
}

#quiz-box.keyboard-active .input-group {
    margin-top: auto;
}

/* 키보드에 제출 키가 있으므로 상단 제출 버튼은 숨겨 중복 제거 */
#quiz-box.keyboard-active #submit-btn {
    display: none !important;
}

/* 🌐 모바일 웹 전용 — 시스템 키보드가 올라온 상태
   앱(resize:none)은 웹뷰가 안 줄어드니 padding-bottom으로 밀어야 하지만,
   웹은 visualViewport만 줄고 body(position:fixed)는 그대로라 같은 패딩을 더하면
   카드가 화면보다 길어져 문제-입력칸 사이에 빈 공간이 생긴다.
   → 웹에서는 패딩 대신 화면 자체를 보이는 영역(--vvh)으로 줄인다. */
body.web-kb #app-screen {
    height: var(--vvh, 100%) !important;
    /* 사파리가 포커스를 보이려고 레이아웃을 밀어 올린 양(--vvtop)을 되돌려
       화면이 항상 「보이는 영역」에 정확히 붙게 한다 (스크롤 의존 제거) */
    transform: translateY(var(--vvtop, 0px));
    will-change: transform;
}

body.web-kb #quiz-box.keyboard-active {
    /* 키보드 높이만큼의 패딩만 걷어내고, 카드 자체의 아래 여백은 유지 —
       0으로 만들면 입력줄이 카드 모서리에 잘린다 */
    padding-bottom: 14px !important;
    padding-top: 14px !important;
    /* 키보드가 홈 인디케이터를 덮고 있으므로 safe-area 여백은 필요 없다.
       그 자리를 문제 영역에 돌려준다 */
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* 키보드가 떠 있는 동안 퀴즈 헤더(진행바) 아래 여백 축소 */
body.web-kb #quiz-box.keyboard-active #quiz-head {
    margin-bottom: 14px !important;
}

body.web-kb #quiz-box.keyboard-active .meaning {
    padding: 9px 12px;
}

/* 문제 영역만 줄어들고 입력줄은 항상 카드 바닥에 고정 —
   문장이 길어도 입력줄이 화면 밖으로 밀려나지 않는다 */
#quiz-box.keyboard-active #quiz-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#quiz-box.keyboard-active .input-group {
    flex: 0 0 auto;
}

/* 통계창이 떠 있는 동안 — 문제 영역이 남는 공간을 먹지 않고 내용 크기대로,
   입력줄은 뜻풀이 바로 아래에 붙는다 (남는 공간은 통계창 뒤로 밀림) */
#quiz-box.keyboard-active.stats-open #quiz-body {
    flex: 0 1 auto;
}

#quiz-box.keyboard-active.stats-open .input-group {
    margin-top: 0;
}

/* 키보드가 떠 있는 동안은 고정 여백을 줄여 한 화면에 담는다 */
#quiz-box.keyboard-active .sentence {
    min-height: 0;
    margin-bottom: 10px;
}

#quiz-box.keyboard-active .meaning {
    margin-bottom: 0;
}

/* 🫧 키 팝: 누른 자모가 키 위로 떠오르는 미리보기 (iOS 순정 타건감) */
#key-pop {
    position: fixed;
    display: none;
    width: 54px;
    height: 58px;
    transform: translateX(-50%);
    background: var(--kbd-key);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.22), 0 0 0 0.5px rgba(15, 23, 42, 0.06);
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--kbd-key-text);
    z-index: 1200;
    pointer-events: none;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 7px;
    /* 🌟 자판 버튼 간 격차 소폭 증대 */
    width: 100%;
}

.keyboard-row.middle-row {
    padding: 0 4.5% !important;
    /* 🌟 ㅁㄴㅇㄹ 행의 좌우 여백을 넓혀서 가로 너비를 살짝 줄임 */
    box-sizing: border-box !important;
}

.key-btn {
    flex: 1;
    height: 54px;
    /* 🌟 자판 세로 길이를 54px 네이티브 수준으로 대폭 확대 */
    background: var(--kbd-key);
    border: 1px solid var(--kbd-key-border);
    border-radius: 13px;
    position: relative;
    overflow: hidden;
    /* 🌟 둥글둥글한 스퀘어클 키캡 */
    font-size: clamp(17px, 5.2vw, 22px);
    /* 🌟 시인성 극대화를 위해 자판 글꼴을 큼직하게 조정 */
    font-weight: 600;
    /* 🌟 네이티브 느낌의 굵은 글꼴 적용 */
    color: var(--kbd-key-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1.5px 3px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: background 0.12s ease-out;
    /* 🌟 뗄 때 부드러운 복원 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none !important;
    /* 🌟 iOS 길게 누르기 기능 방어 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    /* 🌟 iOS 기본 회색 클릭 하이라이트 깜빡임 완전 제거 */
    padding: 0 !important;
    /* 🌟 중요: 글로벌 button 패딩 상속 제거하여 가로 터짐 방지 */
    min-width: 0 !important;
    /* 🌟 중요: 버튼 최소 가로 크기를 없애 유연하게 수축 허용 */
    box-sizing: border-box !important;
    touch-action: manipulation;
    /* 🌟 더블탭 줌 등 제스처 판정 제거 — 터치 즉시 입력 보장 */
}

/* 🧊 얼음 윗면 광택 하이라이트 */
.key-btn::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 6px;
    width: 34%;
    height: 8px;
    background: var(--kbd-gloss);
    border-radius: 8px;
    transform: rotate(-4deg);
    pointer-events: none;
}

.key-btn:active {
    background: var(--kbd-key-fn);
    /* 🌟 transform: scale 제거: 네이티브 키보드처럼 타겟 면적을 안정적으로 유지 */
}

/* 🌟 모바일 터치 오동작(초록색 굳음 현상) 방지용 호버/포커스 스타일 리셋 */
.key-btn:hover,
.key-btn:focus {
    background: var(--kbd-key) !important;
    color: var(--kbd-key-text) !important;
}

.shift-btn:hover,
.shift-btn:focus,
.backspace-btn:hover,
.backspace-btn:focus,
.control-btn:hover,
.control-btn:focus {
    background: var(--kbd-key-fn) !important;
    color: var(--kbd-key-text) !important;
}

.shift-btn.active:hover,
.shift-btn.active:focus {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

.enter-btn:hover,
.enter-btn:focus {
    background: linear-gradient(150deg, #6EE7B7 0%, #10b981 55%, #0b9c68 100%) !important;
    color: #ffffff !important;
}

/* 🌟 모든 자판(일반/기능 키 포함) 터치 시 선명한 초록색 시각 피드백 효과 보장 (호버/포커스 리셋보다 아래에 위치 및 상세 선택자 사용으로 100% 우선순위 확보) */
#custom-keyboard .key-btn.pressed,
#custom-keyboard .key-btn.pressed:hover,
#custom-keyboard .key-btn.pressed:focus {
    background-color: #10b981 !important;
    /* 선명하고 고급스러운 초록색 */
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
    transition: none !important;
    /* 🌟 누를 때는 딜레이 없이 즉각(0ms) 점등 */
}

/* 🌟 모바일 터치 오동작(초록색 굳음 현상) 방지용 호버/포커스 스타일 리셋 */
.key-btn:hover,
.key-btn:focus {
    background: var(--kbd-key) !important;
    color: var(--kbd-key-text) !important;
}

.shift-btn:hover,
.shift-btn:focus,
.backspace-btn:hover,
.backspace-btn:focus,
.control-btn:hover,
.control-btn:focus {
    background: var(--kbd-key-fn) !important;
    color: var(--kbd-key-text) !important;
}

.shift-btn.active:hover,
.shift-btn.active:focus {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

.enter-btn:hover,
.enter-btn:focus {
    background: linear-gradient(150deg, #6EE7B7 0%, #10b981 55%, #0b9c68 100%) !important;
    color: #ffffff !important;
}

/* 기능 버튼 (iOS 어두운 회색 스타일, 1.25배 가로 확대) */
.shift-btn,
.backspace-btn {
    flex: 1.25 !important;
    background: var(--kbd-key-fn);
    color: var(--kbd-key-text);
    font-size: 18px;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.shift-btn:active,
.backspace-btn:active {
    background: var(--kbd-key-fn-active);
}

.shift-btn.active {
    background: #0284c7;
    color: white;
}

/* 하단 주요 컨트롤러 버튼 (설정 1.25배, 스페이스 5.5배, 제출 2.25배로 모바일 에어핏 매칭) */
.control-btn {
    flex: 1.25 !important;
    background: var(--kbd-key-fn);
    color: var(--kbd-key-text);
    font-size: 14px;
    font-weight: bold;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.control-btn:active {
    background: var(--kbd-key-fn-active);
}

.space-btn {
    flex: 6.2 !important;
    background: var(--kbd-key);
    letter-spacing: 2px;
    font-size: 14px;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.enter-btn {
    flex: 2.6 !important;
    background: linear-gradient(150deg, #6EE7B7 0%, #10b981 55%, #0b9c68 100%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.35);
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.enter-btn:active {
    background: linear-gradient(150deg, #34d399 0%, #0b9c68 100%);
}

/* 입력창 readonly 모드에서 회색 처리 비활성화 */
input[readonly] {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    cursor: default;
}

input[type="text"] {
    padding: 15px 20px;
    font-size: 18px;
    border: 2px solid var(--border-strong);
    border-radius: 12px;
    width: 50%;
    text-align: center;
    outline: none;
    transition: all 0.2s;
    font-weight: bold;
    background-color: var(--surface);
    color: var(--text-primary);
}

input, select, textarea {
    background-color: var(--surface);
    color: var(--text-primary);
}

input[type="text"]:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

button {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #10b981;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

button:hover {
    background-color: #059669;
}

button.btn-secondary {
    background-color: var(--text-muted);
}

button.btn-secondary:hover {
    background-color: #64748b;
}

.correct input {
    border-color: #10b981;
    background-color: var(--brand-mint);
    color: #047857;
}

.synonym input {
    border-color: #3b82f6;
    background-color: var(--info-bg);
    color: #1d4ed8;
}

.wrong input {
    border-color: #ef4444;
    background-color: var(--danger-bg);
    animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

.show-answer input {
    border-color: #ef4444;
    background-color: var(--danger-bg);
    color: #b91c1c;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.result-screen {
    display: none;
    text-align: center;
}

.result-screen h2 {
    color: #10b981;
    margin-bottom: 10px;
}

.result-screen .stats {
    font-size: 18px;
    color: var(--text-sub);
    margin-bottom: 30px;
    line-height: 1.6;
}

@keyframes breathe {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 15px 40px rgba(59, 130, 246, 0.35);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
    }
}


/* ===== 🏠 홈 화면 배치안 (A 행동 우선 = 기본 / B 고도 중심 / C 정돈) =====
   요소는 셋이 동일하다. 순서(order)와 밀도만 바꾼다 —
   마크업을 안마다 복제하지 않아야 이벤트 핸들러와 상태가 갈리지 않는다. */
#home-box { gap: 0; }
#home-identity { display: flex; }
#home-avatar-wrap { flex-shrink: 0; }
#home-avatar-btn { width: 52px; height: 52px; }
#home-harang { width: 44px; height: 44px; }
#home-nameblock { flex: 1; min-width: 0; text-align: left; }
#home-title-row { display: flex; align-items: center; gap: 7px; }
#home-greeting { display: none; }
/* 고도 히어로는 기본 숨김 — 각 배치안이 자기 것만 켠다.
   인라인 style로 숨기면 클래스 규칙이 이기지 못하므로 여기서 처리한다. */
/* 📊 통계창 첫 화면 선택 칩 */
.pane-opt {
    border: none; cursor: pointer; padding: 5px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; background: transparent; color: var(--text-muted);
    font-family: inherit; white-space: nowrap;
}
.pane-opt.on { background: var(--surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.10); }

/* ⛰ 하랑이 산 히어로 — 크롭 창이 눌린다는 걸 보이게 한다 */
#home-mtn-hint {
    position: absolute; right: 8px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px 3px 6px; border-radius: 999px;
    background: rgba(4, 120, 87, 0.72);
    color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 0.2px;
    pointer-events: none;
}
#home-mtn-svg { transition: transform 0.12s ease, filter 0.12s ease; }
#home-mtn-btn:active #home-mtn-svg { transform: scale(0.985); filter: brightness(0.96); }
@media (prefers-reduced-motion: reduce) { #home-mtn-svg { transition: none; } }
#home-altitude-hero, #home-mountain { display: none; }
#home-altitude-title { display: none !important; }

.home-stat { border: none; padding: 12px 13px; text-align: left; border-radius: 0; cursor: pointer; }
.home-stat-label { font-size: 11px; color: var(--text-secondary); font-weight: 700; display: block; margin-bottom: 3px; }
.home-stat-value { font-size: 18px; font-weight: 800; }
/* 🗂 2026-09-22 — 단어 세 칸(익히는 중 · 익힌 단어 · 알던 단어). 연속 학습은 위에 따로 한 줄 */
#home-stats-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden;
}
#home-stats-grid > *:not(:last-child) { border-right: 1px solid var(--border-strong); }
.home-stat-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; }
#home-streak-card {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px; margin-bottom: 10px;
    border: 1px solid var(--border-strong); border-radius: 14px; cursor: pointer;
}
#home-stats-head { cursor: pointer; }
#vocab-pager::-webkit-scrollbar { display: none; }

/* 측정 전(배치고사 미실시)에는 고도 자리를 비운다 */
.home-unmeasured #home-altitude-hero { display: none !important; }

/* ── A안 · 행동 우선 (기본) — 시작 버튼을 첫 화면 위쪽으로 ── */
.home-a #home-identity { align-items: center; gap: 12px; margin-bottom: 16px; }
.home-a #home-topic-wrap { flex-shrink: 0; }
.home-a #home-altitude-hero { display: flex; order: 2; margin-bottom: 14px; }
.home-a #home-identity { order: 1; }
.home-a #home-action { order: 3; }
.home-a #home-story-wrap { order: 6; margin-top: 14px; }
.home-a #home-stats { order: 5; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-strong); }

/* ── B안 · 고도 중심 — 하랑이 산 크롭을 첫 화면 히어로로 ── */
.home-b #home-mountain { display: block; order: 1; margin: -6px -8px 10px; }
.home-b #home-identity { order: 2; align-items: center; gap: 10px; margin-bottom: 14px; }
.home-b #home-avatar-btn { width: 40px; height: 40px; }
.home-b #home-harang { width: 34px; height: 34px; }
.home-b #home-level-badge { display: none; }
.home-b #home-nickname-row { font-size: 17px; }
.home-b #home-action { order: 3; }
.home-b #home-story-wrap { order: 6; margin-top: 14px; }
.home-b #home-stats { order: 5; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-strong); }
.home-b #home-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border: none; border-radius: 0; }
.home-b .home-stat { padding: 0; }
.home-b .home-stat-label { font-size: 10.5px; color: var(--text-muted); }
.home-b .home-stat-value { font-size: 16px; }
.home-b #home-stats-grid > * { border: none !important; }

/* ── C안 · 정돈 — 지금 순서를 지키되 중첩 카드를 걷어냄 ── */
.home-c #home-identity { order: 1; flex-direction: column; align-items: center; margin-bottom: 20px; }
.home-c #home-avatar-btn { width: 76px; height: 76px; }
.home-c #home-harang { width: 66px; height: 66px; }
.home-c #home-nameblock { text-align: center; margin-top: 16px; }
.home-c #home-title-row { justify-content: center; }
.home-c #home-greeting { display: block; }
.home-c #home-altitude-title { display: inline-block !important; }
.home-c #home-topic-wrap { margin-top: 12px; }
.home-c #home-action { order: 2; }
.home-c #home-story-wrap { order: 5; margin-top: 14px; }
.home-c #home-stats { order: 4; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-strong); }
.home-c #home-stats-grid { border: none; border-radius: 0; gap: 14px 10px; }
.home-c .home-stat { padding: 0; }
.home-c #home-stats-grid > * { border: none !important; }
.home-c #home-action, .home-c #home-story-wrap, .home-c #home-stats-head { text-align: left; }

.avatar-glow {
    animation: breathe 4s ease-in-out infinite;
}

.badge-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.badge-card:hover {
    transform: translateY(-4px) scale(1.05);
}

.locked-badge {
    filter: grayscale(100%);
    opacity: 0.4;
}

/* 🛠️ 개발자용 단어 제보 및 검토 패널 CSS */
.flag-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    border: 1px solid var(--border);
    background-color: var(--bg-subtle);
}

.flag-btn:hover {
    transform: scale(1.1);
    background-color: var(--border-strong);
}

.flag-btn.active {
    background-color: #fef08a;
    /* 연노랑 강조색 */
    border-color: #eab308;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.2);
    animation: bounce 0.3s ease;
}

@keyframes bounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}

/* 주제별 학습 선택 버튼 */
.topic-btn {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    white-space: nowrap;
}
.topic-btn:active { transform: scale(0.95); }
.topic-btn.active {
    background: #10b981;
    color: white;
    border-color: #10b981;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
}

/* 학습 분석 요약 피드 카드 — 클릭(터치) 순간에만 눌림 효과, 손을 떼면 즉시 원상복귀
   (기존 인라인 onmouseout이 'white'로 되돌려 다크모드에서 하얗게 굳던 버그의 대체) */
.feed-stat-card {
    background: var(--surface);
    transition: background 0.15s ease, transform 0.12s ease;
}
@media (hover: hover) {
    .feed-stat-card:hover { background: var(--bg-muted); }
}

/* 🖥 마우스 환경 hover — 「눌러도 되는 것」의 유일한 단서다.
   ⚠️ 카드·칩 상당수는 마크업에 인라인 background 가 있어 배경색으로는 못 이긴다.
      인라인이 건드리지 않는 filter/transform/box-shadow 로 표현한다. */
@media (hover: hover) and (pointer: fine) {
    #home-mtn-btn:hover,
    #home-doing-card:hover,
    #home-known-card:hover,
    #home-story-chip:hover,
    #home-avatar-btn:hover,
    .count-chip:hover,
    .pane-opt:hover,
    [data-pane]:hover,
    .badge-card:hover,
    .hm-ghost:hover {
        filter: brightness(0.975);
        transform: translateY(-1px);
        transition: filter .15s ease, transform .15s ease;
    }
    /* ⚠️ 이 저장소의 다크는 «미디어쿼리 + .force-dark» 두 경로다.
       미디어쿼리 없이 :root:not(.force-light) 만 쓰면 라이트에서도 걸린다. */
    @media (prefers-color-scheme: dark) {
        :root:not(.force-light) #home-mtn-btn:hover,
        :root:not(.force-light) #home-doing-card:hover,
        :root:not(.force-light) #home-known-card:hover,
        :root:not(.force-light) .count-chip:hover,
        :root:not(.force-light) [data-pane]:hover {
            filter: brightness(1.12);   /* 어두운 배경에선 밝히는 쪽이 눌리는 느낌이다 */
        }
    }
    :root.force-dark #home-mtn-btn:hover,
    :root.force-dark #home-doing-card:hover,
    :root.force-dark #home-known-card:hover,
    :root.force-dark .count-chip:hover,
    :root.force-dark [data-pane]:hover {
        filter: brightness(1.12);
    }
    /* 🩹 전역 `button:hover { background:#059669 }` 는 (0,1,1) 이라
       `.hm-ghost` (0,1,0) 를 이긴다 — 「로그인 없이 둘러보기」가 초록으로 칠해졌다. */
    .hm-ghost:hover {
        background: none;
        color: var(--text-primary);
    }
    /* 다음 버튼이 Enter 로도 눌린다는 걸 알려 준다 */
    #next-btn::after { content: "  ⏎"; font-size: .85em; opacity: .7; }
}
.feed-stat-card:active {
    background: var(--bg-muted);
    transform: scale(0.97);
}

/* 문제 좌상단 태그 뱃지 */
.word-tag-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    background: var(--indigo-bg);
    border: 1px solid #c4b5fd;
    border-radius: 6px;
    padding: 2px 8px;
    margin-right: 4px;
}

.dev-panel-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
    transition: border-color 0.2s;
}

.dev-panel-item:focus-within {
    border-color: #475569;
}

/* ===== 🦭 하랑이 마스코트 디자인 시스템 (design_handoff_login_flow 기준) ===== */
/* 웰컴 화면에서는 문서 최상위까지 민트로 통일 (웹뷰 가장자리 흰 여백 방지) */
html.auth-mint,
html.auth-mint body {
    background-color: var(--brand-mint) !important;
}

/* 🖥 로그인 카드 래퍼 — 좁은 화면에서는 부모의 flex 배치를 그대로 물려받아
   아무것도 바꾸지 않는다. 카드 모양은 아래 넓은 화면 미디어쿼리에서만 붙는다. */
.login-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
#email-login-card { justify-content: flex-start; align-items: stretch; }

#login-screen {
    background: var(--brand-mint);
    width: 100%;
    max-width: none;
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
}

.harang-bubble {
    position: relative;
    background: var(--surface);
    border: 2.5px solid var(--ink-border);
    border-radius: 18px;
    padding: 12px 20px;
    box-shadow: 3px 3px 0 #3B4252;
    font-family: 'Jua', 'Noto Sans KR', sans-serif;
    font-size: 20px;
    color: var(--ink-text);
}

.harang-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10.5px;
    width: 18px;
    height: 18px;
    background: var(--surface);
    border-right: 2.5px solid var(--ink-border);
    border-bottom: 2.5px solid var(--ink-border);
    transform: translateX(-50%) rotate(45deg);
}

.hm-wordmark {
    font-family: 'Jua', sans-serif;
    font-size: 34px;
    color: var(--ink-text);
    margin-top: 10px;
}

.hm-btn {
    width: 100%;
    height: 56px;
    border-radius: 18px;
    border: 2.5px solid var(--ink-border);
    box-shadow: 3px 3px 0 #3B4252;
    font-family: 'Jua', 'Noto Sans KR', sans-serif;
    font-size: 19px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.06s, box-shadow 0.06s;
}

.hm-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #3B4252;
}

.hm-btn-primary { background: #10B981; color: #fff; }
.hm-btn-white { background: var(--surface); color: var(--ink-text); }

/* Apple 로그인 — 애플 디자인 규격: 검정 배경·흰 글씨·공식 로고 */
.hm-btn-apple { background: #000; color: #fff; }
.hm-apple-mark {
    width: 18px; height: 22px; flex-shrink: 0;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hm-g-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: #4285F4;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    flex-shrink: 0;
}

.hm-ghost {
    background: none;
    border: none;
    height: 44px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

@keyframes screenIn {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

.screen-in { animation: screenIn 280ms ease; }

#email-login-screen {
    display: none;
    height: 100%;
    width: 100%;   /* body(flex) 직속 자식 — 지정 없으면 내용 폭으로 줄어 양옆이 빔 (#login-screen과 동일 처리) */
    max-width: none;
    flex-direction: column;
    background: var(--surface);
    padding: calc(68px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.hm-input {
    height: 52px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--bg-subtle);
    padding: 0 16px;
    font-size: 15px;
    color: var(--ink-text);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.hm-input:focus { border-color: #10B981; }

.hm-login-submit {
    height: 54px;
    border-radius: 14px;
    background: #10B981;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

.hm-flat-google {
    height: 54px;
    border-radius: 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 하랑이 프레임 스텝 애니메이션 */
@keyframes s1of2 { 0%, 49.9% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes s2of2 { 0%, 49.9% { opacity: 0 } 50%, 100% { opacity: 1 } }
@keyframes s1of3 { 0%, 33.2% { opacity: 1 } 33.3%, 100% { opacity: 0 } }
@keyframes s2of3 { 0%, 33.2% { opacity: 0 } 33.3%, 66.5% { opacity: 1 } 66.6%, 100% { opacity: 0 } }
@keyframes s3of3 { 0%, 66.5% { opacity: 0 } 66.6%, 100% { opacity: 1 } }

/* 정답/오답 모션 오버레이 */
#harang-motion-box {
    position: fixed;
    left: 50%;
    top: 16%;
    width: 150px;
    height: 150px;
    z-index: 1500;
    pointer-events: none;
    display: none;
}

@keyframes shardFloat {
    0% { opacity: 0; transform: translateY(10px) scale(0.8); }
    25% { opacity: 1; transform: translateY(0) scale(1); }
    75% { opacity: 1; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-14px); }
}

@keyframes harangPop {
    0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.85); }
    12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.96); }
}

/* 프로필 하랑이 포즈·목도리 색 선택 */
.pose-opt {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: var(--bg-subtle);
    cursor: pointer;
    padding: 3px;
}

.pose-opt svg { width: 100%; height: 100%; }

.pose-opt.selected {
    border-color: #10B981;
    background: var(--brand-mint);
}

.scarf-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.scarf-swatch.selected {
    border-color: var(--ink-border);
    transform: scale(1.15);
}

/* 칭호 선택 리스트 (프로필 설정 모달) */
.title-opt {
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    border: 2px solid var(--border-strong);
    background: var(--bg-subtle);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-body);
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.title-opt.selected {
    border-color: #10B981;
    background: var(--brand-mint);
    color: #065f46;
}

.title-opt.locked {
    opacity: 0.45;
    cursor: default;
}

/* 1회 학습 단어 수 칩 (학습 설정 모달) */
.count-chip {
    flex: 1;
    padding: 12px 0;
    border-radius: 12px;
    border: 2px solid var(--border-strong);
    background: var(--bg-subtle);
    font-size: 15px;
    font-weight: 800;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.count-chip.selected {
    border-color: #10B981;
    background: var(--brand-mint);
    color: #065f46;
}

/* 좁은 화면에서 헤더 요소 압축: 워드마크는 유지하고 프로필 칩을 축소 */
@media (max-width: 430px) {
    #display-nickname { display: none; }
    #edit-profile-trigger { padding: 6px 9px; gap: 4px; }
    #header-shard-chip, #header-word-shard-chip { padding: 5px 8px; }
    #header-wordmark { font-size: 19px; }
    /* 🔔 소식 버튼이 선 웹에서는 자리가 모자란다 — 워드마크를 접고 마름모만 남긴다 */
    body.has-notice #header-wordmark { display: none; }
    body.has-notice #header-notice-btn { width: 31px; height: 31px; }
}

/* 🍞 비차단 토스트 알림 (blocking alert 대체) */
#app-toast {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    max-width: min(340px, calc(100vw - 40px));
    background: var(--toast-bg);
    color: white;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-align: center;
    word-break: keep-all;
}

#app-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#app-toast.toast-error { background: rgba(190, 45, 45, 0.95); }
#app-toast.toast-info { background: var(--toast-bg); }

/* ===== 목표 개수 버튼 (#setup-screen) — 원래 마크업 안의 <style> 에 있던 것 ===== */
.target-btn {
    padding: 20px 40px;
    font-size: 18px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.target-btn:hover {
    border-color: #10b981;
    color: #10b981;
    transform: translateY(-2px);
}