/* 자동 생성 — tools/extract_styles.py가 prototype/index.html에서 옮김. 손으로 고치지 말 것(앱 전용은 app.css).
   토큰·컴포넌트 클래스는 프로토타입과 같아야 구현 화면을 나란히 대조할 수 있다. */
/* Layout: 왼쪽 조작판 + 가운데 폰 틀(390pt). 폰 폭에서는 틀 없이 앱만, 조작판은 위쪽 접이식 띠.
   앱 = 옅은 종이 바탕 위 카드 + 하단 탭 5개. 학습 대상 글자는 사전처럼 명조, 화면 글자는 고딕.
   강조색은 학습 언어 따라: 중국어 = 옥색(jade), 한국어 = 쪽빛(indigo). 중국어 병음·한자는 성조 색. */
:root {
  --desk: #E4E8E5; --panel: #F1F3F1; --paper: #F4F6F3; --card: #FFFFFF; --sunk: #E8ECE9;
  --ink: #16201C; --ink2: #56625D; --ink3: #87918C; --line: #DDE3DF; --scrim: rgb(10 16 13 / .38);
  --jade: #0B7A68; --jade-soft: #DCEFE9; --jade-ink: #FFFFFF;
  --indigo: #2C4A9E; --indigo-soft: #E2E8F6; --indigo-ink: #FFFFFF;
  --lotus: #A33468; --lotus-soft: #F6E1EA; --lotus-ink: #FFFFFF;
  --t1: #D23B2A; --t2: #D27A05; --t3: #2A9442; --t4: #2A63C8; --t5: #8A948F; --t6: #8A3FB8;
  --ok: #24804E; --ok-soft: #DFF1E6; --warn: #9A5F06; --warn-soft: #FBEED6; --bad: #C2362B; --bad-soft: #FBE2DE; --bad-ink: #FFFFFF;
  --photo-paper: #FBF7EC; --photo-ink: #2B2A26; --marker: #FFE86B;
  --frame: #1A1F1C;
  --f-vi: "Noto Serif", "Noto Serif KR", serif;
  --f-ui: "Be Vietnam Pro", "Noto Sans KR", "Noto Sans SC", system-ui, sans-serif;
  --f-zh: "Noto Serif SC", "Noto Serif KR", serif;
  --f-ko: "Noto Serif KR", "Noto Serif SC", serif;
  --f-zhs: "Noto Sans SC", "Noto Sans KR", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --desk: #080B0A; --panel: #111614; --paper: #0F1412; --card: #18201D; --sunk: #222B27;
  --ink: #E4EBE7; --ink2: #A1ADA7; --ink3: #6E7A74; --line: #2B3531; --scrim: rgb(0 0 0 / .55);
  --jade: #3DC2A4; --jade-soft: #12312A; --jade-ink: #04211B;
  --indigo: #94AAF2; --indigo-soft: #1B2442; --indigo-ink: #0D152E;
  --lotus: #F28DB8; --lotus-soft: #3A1726; --lotus-ink: #2A0B18;
  --t1: #F2705F; --t2: #F0A23A; --t3: #5CC874; --t4: #6F9EF2; --t5: #7F8A85; --t6: #C08BF0;
  --ok: #5CC88A; --ok-soft: #14301F; --warn: #E8AB4C; --warn-soft: #33270F; --bad: #F07A6E; --bad-soft: #3A1A17; --bad-ink: #2A0B08;
  --photo-paper: #ECE6D6; --photo-ink: #2B2A26; --marker: #E9D45A;
  --frame: #000000; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --desk: #080B0A; --panel: #111614; --paper: #0F1412; --card: #18201D; --sunk: #222B27;
  --ink: #E4EBE7; --ink2: #A1ADA7; --ink3: #6E7A74; --line: #2B3531; --scrim: rgb(0 0 0 / .55);
  --jade: #3DC2A4; --jade-soft: #12312A; --jade-ink: #04211B;
  --indigo: #94AAF2; --indigo-soft: #1B2442; --indigo-ink: #0D152E;
  --lotus: #F28DB8; --lotus-soft: #3A1726; --lotus-ink: #2A0B18;
  --t1: #F2705F; --t2: #F0A23A; --t3: #5CC874; --t4: #6F9EF2; --t5: #7F8A85; --t6: #C08BF0;
  --ok: #5CC88A; --ok-soft: #14301F; --warn: #E8AB4C; --warn-soft: #33270F; --bad: #F07A6E; --bad-soft: #3A1A17; --bad-ink: #2A0B08;
  --photo-paper: #ECE6D6; --photo-ink: #2B2A26; --marker: #E9D45A;
  --frame: #000000; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 14px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acc, var(--ink)); outline-offset: 2px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.fill { fill: currentColor; stroke: none; }

/* ── 앱 ── */
.app { --acc: var(--jade); --acc-soft: var(--jade-soft); --acc-ink: var(--jade-ink);
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--paper); overflow: hidden; }
.app[data-target="ko"] { --acc: var(--indigo); --acc-soft: var(--indigo-soft); --acc-ink: var(--indigo-ink); }
.view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.gx { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { display: flex; flex-direction: column; gap: 14px; padding-block: 14px 28px; }
.tz { font-family: var(--f-zh); }
.tk { font-family: var(--f-ko); }
.zs { font-family: var(--f-zhs); }
.t1 { color: var(--t1); } .t2 { color: var(--t2); } .t3 { color: var(--t3); } .t4 { color: var(--t4); } .t5 { color: var(--t5); }
.h1 { font-size: 26px; line-height: 1.25; font-weight: 700; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.h2 { font-size: 16px; font-weight: 700; margin: 0; text-wrap: balance; }
.sec { font-size: 12.5px; font-weight: 700; color: var(--acc); letter-spacing: .02em; margin: 4px 0 -6px; }
.sub { color: var(--ink2); font-size: 12.5px; }
.muted { color: var(--ink3); }
.num { font-variant-numeric: tabular-nums; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.list { padding: 0; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; }
.row:first-child { border-top: 0; }
[role="button"] { cursor: pointer; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-t { font-weight: 600; font-size: 14.5px; }
.chev { color: var(--ink3); }
.btn { font-weight: 600; font-size: 13px; border-radius: 12px; padding: 8px 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); white-space: nowrap; }
.btn.pri { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn.soft { background: var(--acc-soft); border-color: transparent; color: var(--acc); }
.btn.block { width: 100%; padding: 13px; font-size: 14.5px; border-radius: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icbtn { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink2); flex: none; padding: 0; }
.icbtn.bare { border-color: transparent; background: none; }
.icbtn.playing { color: var(--acc); border-color: var(--acc); background: var(--acc-soft); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--acc-soft); color: var(--acc); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); } .badge.plain { background: var(--sunk); color: var(--ink2); }
.bar { height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--acc); border-radius: 4px; }
.bar.ok > i { background: var(--ok); }
.seg { display: flex; background: var(--sunk); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; min-width: 0; border: 0; background: none; padding: 9px 4px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.seg button.on { background: var(--acc); color: var(--acc-ink); }
.seg.sm button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.chips { display: flex; gap: 8px; }
.chips button { flex: 1; min-width: 0; padding: 11px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-weight: 700; font-size: 14px; }
.chips button.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.gt { width: 44px; height: 44px; border-radius: 13px; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; font-size: 21px; font-weight: 700; flex: none; }
.dash { display: flex; gap: 4px; margin-top: 6px; }
.dash i { width: 22px; height: 4px; border-radius: 2px; background: var(--sunk); }
.dash i.on { background: var(--acc); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.tile .row-t { font-size: 14px; }
.note { font-size: 12.5px; color: var(--ink2); background: var(--sunk); border-radius: 12px; padding: 10px 12px; }
.empty { text-align: center; color: var(--ink2); padding: 24px 8px; }

/* 하단 탭 */
.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-block: 6px 8px; }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--ink3); font-size: 11px; padding: 4px 0; }
.tab .ic { width: 24px; height: 24px; }
.tab.on { color: var(--acc); font-weight: 700; }
.tbadge { position: absolute; top: 0; left: calc(50% + 4px); background: var(--bad); color: var(--bad-ink); font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 5px; min-width: 18px; line-height: 17px; }

/* 쌓이는 화면 · 시트 · 첫 실행 */
.page { position: absolute; inset: 0; z-index: 20; background: var(--paper); display: flex; flex-direction: column; animation: slidein .18s ease-out; }
@keyframes slidein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.ph { display: flex; align-items: center; gap: 6px; padding-block: 8px; border-bottom: 1px solid var(--line); background: var(--paper); min-height: 54px; }
.ph h2 { flex: 1; min-width: 0; text-align: center; font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph .ph-r { min-width: 36px; display: flex; justify-content: flex-end; font-size: 12.5px; color: var(--ink2); }
.ph .ph-r .btn { background: none; border: 0; padding: 4px; color: var(--acc); }
.pbody { flex: 1; min-height: 0; overflow-y: auto; }
.sheet { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; }
.sh-back { position: absolute; inset: 0; background: var(--scrim); border: 0; padding: 0; }
.sh { position: relative; background: var(--card); border-radius: 24px 24px 0 0; max-height: 88%; overflow-y: auto; padding-block: 8px 22px; display: flex; flex-direction: column; gap: 14px; animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 4px; }
.ob { position: absolute; inset: 0; z-index: 60; background: var(--paper); display: flex; flex-direction: column; }
.ob-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-block: 28px 16px; }
.ob-foot { display: flex; align-items: center; gap: 12px; padding-block: 12px 18px; border-top: 1px solid var(--line); }
.dots { display: flex; gap: 6px; flex: 1; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line); }
.dots i.on { width: 22px; background: var(--acc); }
.opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); text-align: left; width: 100%; }
.opt.on { border-color: var(--acc); background: var(--acc-soft); }
.opt:disabled { opacity: .5; cursor: not-allowed; }
.opt .row-main span { font-size: 12.5px; color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { .page, .sh { animation: none; } }

/* 홈 */
.home-hd { display: flex; align-items: center; gap: 12px; }
.mark { width: 52px; height: 52px; border-radius: 14px; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; font-size: 28px; font-weight: 700; flex: none; transform: rotate(-4deg); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--acc-ink) 35%, transparent); }
.home-hd .mode { font-size: 12px; font-weight: 600; color: var(--acc); }
.home-hd .hd-t { flex: 1; min-width: 0; }
.streak { display: flex; align-items: center; gap: 3px; color: var(--t2); font-size: 12.5px; white-space: nowrap; }
.streak b { font-size: 20px; font-variant-numeric: tabular-nums; }
.today-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.today-top .h2 { flex: 1; }
.today-top .big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.today-msg { font-size: 13px; font-weight: 600; margin-top: 10px; color: var(--ink2); }
.today-msg.ok { color: var(--ok); }
.alert { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.alert .h2 { color: var(--warn); font-size: 15px; }
.alert p { margin: 0; font-size: 13px; color: var(--ink); }
.stepn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--ink2); flex: none; }
.wrow .wl { width: 84px; flex: none; display: flex; flex-direction: column; }
.wrow .wl small { font-size: 11px; line-height: 1.2; }
.wrow .wl b { font-size: 23px; line-height: 1.3; font-weight: 700; }
.app[data-target="ko"] .wrow .wl b { font-size: 18px; }
.wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--ink2); }
.sdot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink3); flex: none; }
.sdot.learning { border-color: var(--t2); background: var(--t2); }
.sdot.known { border-color: var(--ok); background: var(--ok); }

/* 학습 */
.lhd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.goalchip { font-size: 12px; font-weight: 600; border: 1px solid var(--t2); color: var(--t2); border-radius: 999px; padding: 4px 10px; background: var(--card); white-space: nowrap; }
.mock-sec { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mock-sec header { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 11.5px; font-weight: 600; background: var(--ok-soft); color: var(--ok); border-radius: 6px; padding: 3px 8px; }
.rounds { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.rounds button { flex: none; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: 13px; }
.rounds button.on { border-color: var(--t2); background: var(--warn-soft); color: var(--warn); }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.filters button { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.filters button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 단어 시트 · 카드 */
.wbig { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; text-align: center; }
.wbig .py { font-size: 17px; font-weight: 500; letter-spacing: .02em; }
.wbig .hz { font-size: 60px; line-height: 1.15; font-weight: 700; }
.app[data-target="ko"] .wbig .hz { font-size: 40px; }
.mean { display: flex; align-items: baseline; gap: 8px; justify-content: center; font-size: 15.5px; font-weight: 600; flex-wrap: wrap; }
.exbox { background: var(--sunk); border-radius: 14px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.exbox .ex-t { font-size: 17px; line-height: 1.5; }
.exbox .ex-p { font-size: 12.5px; color: var(--ink2); }
.exbox .ex-m { font-size: 13px; margin-top: 2px; }
.fsrs-line { font-size: 12px; color: var(--ink2); text-align: center; }
.fc { background: var(--card); border: 1px solid var(--line); border-radius: 24px; min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 18px; text-align: center; }
.fc .hz { font-size: 64px; line-height: 1.15; font-weight: 700; }
.app[data-target="ko"] .fc .hz { font-size: 42px; }
.listen-btn { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; }
.listen-btn .ic { width: 38px; height: 38px; }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rate button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-weight: 700; font-size: 13.5px; }
.rate button small { font-weight: 500; font-size: 11.5px; color: var(--ink2); }
.rate .r1 { color: var(--bad); } .rate .r2 { color: var(--warn); } .rate .r3 { color: var(--ok); } .rate .r4 { color: var(--acc); }
.sess-top { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink2); }
.sess-top .bar { flex: 1; }

/* 덱 */
.banner { background: var(--acc); color: var(--acc-ink); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px; border: 0; text-align: left; width: 100%; }
.banner .bt { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.banner .bt b { font-size: 18px; }
.banner .bar { background: color-mix(in srgb, var(--acc-ink) 25%, transparent); height: 6px; }
.banner .bar > i { background: var(--acc-ink); }
.banner small { font-size: 12px; opacity: .9; }
.memo { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 14px; padding: 12px 14px; display: flex; justify-content: space-between; font-weight: 600; font-size: 13.5px; }
.memo span { font-weight: 500; color: var(--ink2); font-size: 12px; }
.cat-h { display: flex; align-items: center; gap: 10px; }
.cat-h .row-main b { font-size: 15px; }
.lvgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.lv { border: 1px solid var(--line); border-radius: 10px; padding: 8px 2px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.lv b { font-size: 13px; }
.lv span { font-size: 11px; font-weight: 600; color: var(--t2); }
.lv em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ok); }
.forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 92px; margin-top: 10px; }
.forecast div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; font-size: 10.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.forecast i { width: 100%; max-width: 26px; background: var(--acc-soft); border-radius: 5px 5px 2px 2px; }
.forecast .today i { background: var(--acc); }

/* 회화 · 영상 */
.theme-hero { display: flex; align-items: center; gap: 14px; }
.theme-hero .gt { width: 64px; height: 64px; font-size: 32px; border-radius: 18px; }
.steps .row-t { font-size: 14px; }
.done-mark { color: var(--ok); }
.exrow .ex-t { font-size: 17px; line-height: 1.45; }
.exrow .ex-p { font-size: 12px; color: var(--ink2); }
.exrow .ex-m { font-size: 13px; }
.learned { color: var(--ok); font-size: 11px; font-weight: 700; }
.thumb { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 80%, var(--ink)), color-mix(in srgb, var(--acc) 35%, var(--ink))); color: var(--acc-ink); display: grid; place-items: center; position: relative; overflow: hidden; }
.thumb .tg-big { font-size: 64px; font-weight: 700; opacity: .25; position: absolute; right: 14px; bottom: -8px; }
.thumb .playc { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--acc-ink) 22%, transparent); display: grid; place-items: center; }
.thumb .playc .ic { width: 26px; height: 26px; }
.thumb small { position: absolute; left: 12px; bottom: 10px; font-size: 12px; font-weight: 600; }
.line-card { display: flex; flex-direction: column; gap: 6px; }
.ts { align-self: flex-start; font-size: 12px; font-weight: 700; background: var(--sunk); border-radius: 999px; padding: 3px 10px; display: inline-flex; gap: 4px; align-items: center; border: 0; }
.ts .ic { width: 12px; height: 12px; }
.line-card .ex-t { font-size: 18px; line-height: 1.5; }
.line-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.line-acts .btn { padding: 6px 12px; font-size: 12.5px; background: var(--sunk); border-color: transparent; }
.expl { font-size: 13px; background: var(--acc-soft); border-radius: 10px; padding: 8px 12px; }

/* 퀴즈 · 시험 */
.qopts { display: flex; flex-direction: column; gap: 8px; }
.qopt { display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); width: 100%; font-size: 14.5px; }
.qopt .k { width: 26px; height: 26px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.qopt.sel { border-color: var(--acc); background: var(--acc-soft); }
.qopt.right { border-color: var(--ok); background: var(--ok-soft); }
.qopt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.stem { font-size: 19px; line-height: 1.6; }
.exam-top { display: flex; align-items: center; gap: 10px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: var(--warn); display: flex; gap: 4px; align-items: center; }
.qnav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.qnav span { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--card); }
.qnav span.cur { border-color: var(--acc); color: var(--acc); font-weight: 700; }
.qnav span.done { background: var(--sunk); }
.tonegrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tonecell { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 8px 2px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tonecell svg { width: 100%; max-width: 54px; height: 40px; }
.tonecell b { font-size: 16px; }
.tonecell .tz { font-size: 22px; }
.tonecell small { font-size: 10.5px; color: var(--ink2); }
.jamo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jamo button { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.jamo b { font-size: 30px; font-family: var(--f-ko); line-height: 1.2; }
.jamo small { font-size: 11.5px; color: var(--ink2); }
.compose { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 28px; font-family: var(--f-ko); font-weight: 700; }
.compose i { font-style: normal; color: var(--ink3); font-size: 20px; font-family: var(--f-ui); }

/* AI · 채팅 */
.aiv { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ai-hd { display: flex; align-items: center; gap: 10px; padding-block: 14px 10px; }
.ai-hd .mark { width: 40px; height: 40px; font-size: 21px; border-radius: 12px; }
.ai-row { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; }
.ai-row .seg { flex: 1; }
.ctx { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; }
.chatbox { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-block: 6px 14px; }
.bub { max-width: 86%; padding: 10px 13px; border-radius: 16px; white-space: pre-wrap; line-height: 1.6; font-size: 14px; }
.bub.me { align-self: flex-end; background: var(--acc); color: var(--acc-ink); border-bottom-right-radius: 6px; }
.bub.ai { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bub .tr { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 4px; }
.bub img { display: block; max-width: 180px; border-radius: 10px; margin-bottom: 4px; }
.sugg { display: flex; flex-direction: column; gap: 8px; }
.sugg button { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; font-size: 13.5px; }
.ai-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px 0 6px; }
.ai-empty .mark { width: 64px; height: 64px; font-size: 34px; border-radius: 18px; }
.inbar { display: flex; gap: 8px; align-items: center; padding-block: 8px; border-top: 1px solid var(--line); background: var(--paper); }
.inbar input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--card); border-radius: 22px; padding: 10px 14px; }
.sendb { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; flex: none; }
.filelab { position: relative; overflow: hidden; }
.filelab input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hints { display: flex; gap: 6px; overflow-x: auto; padding-block: 8px 0; }
.hints button { flex: none; border: 1px dashed var(--acc); color: var(--acc); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.role { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding-top: 8px; }
.fixin { width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px; font-size: 16px; line-height: 1.5; }
.diff del { color: var(--bad); background: var(--bad-soft); text-decoration: line-through; border-radius: 4px; padding: 0 2px; }
.diff ins { color: var(--ok); background: var(--ok-soft); text-decoration: none; border-radius: 4px; padding: 0 2px; }
.fb-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* 마이 */
.prof { display: flex; align-items: center; gap: 14px; }
.avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; font-weight: 700; font-size: 20px; flex: none; }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat { background: var(--sunk); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; }
.stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--ink2); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 110px; }
.week div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 11px; color: var(--ink2); }
.week i { width: 100%; max-width: 24px; border-radius: 6px 6px 2px 2px; background: var(--acc-soft); }
.week .today i { background: var(--acc); }
.week .zero i { background: var(--sunk); }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kv .v { color: var(--ink2); font-size: 13px; text-align: right; }
.sw { width: 44px; height: 26px; border-radius: 13px; background: var(--line); border: 0; position: relative; flex: none; padding: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); transition: left .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.sw[aria-pressed="true"] { background: var(--acc); }
.sw[aria-pressed="true"]::after { left: 21px; }
input[type="range"] { width: 100%; accent-color: var(--acc); }
select { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 8px; font-size: 13px; max-width: 58%; }
.drop { border: 1.5px dashed var(--acc); border-radius: 18px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--card); position: relative; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .ic { width: 30px; height: 30px; color: var(--acc); }

/* 베트남어 학습(한→베) — 강조색 연꽃, 성조 6개 색 */
.app[data-target="vi"] { --acc: var(--lotus); --acc-soft: var(--lotus-soft); --acc-ink: var(--lotus-ink); }
.tv { font-family: var(--f-vi); }
.v1 { color: var(--ink); } .v2 { color: var(--t4); } .v3 { color: var(--t2); } .v4 { color: var(--t3); } .v5 { color: var(--t6); } .v6 { color: var(--t1); }
.gt.long { font-size: 13px; letter-spacing: -.01em; }
.theme-hero .gt.long { font-size: 18px; }
.view, .pbody { overflow-x: hidden; }
.app[data-target="vi"] .wrow .wl { width: 96px; }
.app[data-target="vi"] .wrow .wl b { font-size: 17px; }
.app[data-target="vi"] .wbig .hz, .app[data-target="vi"] .fc .hz { font-size: 40px; }
.app[data-target="vi"] .mark { font-size: 27px; }
.app[data-target="vi"] .thumb .tg-big { font-size: 46px; }
.tonegrid.six { grid-template-columns: repeat(3, 1fr); }

/* 사진으로 단어 추가 */
.snap { background: var(--photo-paper); color: var(--photo-ink); border-radius: 6px; padding: 14px 16px; transform: rotate(-1.5deg); box-shadow: 0 8px 22px rgb(0 0 0 / .18); display: flex; flex-direction: column; gap: 5px; font-size: 13px; margin: 6px 4px; }
.snap-h { font-weight: 700; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--photo-ink) 25%, transparent); padding-bottom: 6px; margin-bottom: 2px; }
.snap-l { display: flex; gap: 8px; align-items: baseline; }
.snap-l .n { width: 16px; flex: none; opacity: .55; font-size: 11px; font-variant-numeric: tabular-nums; }
.snap-l .w { font-size: 15px; font-weight: 700; }
.snap-l .m { opacity: .75; }
.snap mark { background: linear-gradient(transparent 55%, var(--marker) 55%); color: inherit; }
.snap .blur { filter: blur(.8px); }
.snap-img { max-width: 100%; max-height: 200px; object-fit: contain; border-radius: 10px; align-self: center; }
.reading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; color: var(--acc); font-weight: 600; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--acc-soft); border-top-color: var(--acc); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ck { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--ink3); display: grid; place-items: center; flex: none; background: var(--card); color: var(--acc-ink); padding: 0; }
.ck[aria-checked="true"] { background: var(--acc); border-color: var(--acc); }
.ck .ic { width: 15px; height: 15px; stroke-width: 3; }
.ck[aria-checked="false"] .ic { visibility: hidden; }
.fixinput { border: 1.5px solid var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 4px 8px; width: 100%; font-size: 16px; }
.photo-row .row-main .w { font-size: 17px; font-weight: 700; }
.src-b { font-size: 10.5px; font-weight: 700; color: var(--acc); background: var(--acc-soft); border-radius: 5px; padding: 1px 6px; }

/* 단어 공부 설정 · 테스트 */
.ropt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); width: 100%; text-align: left; background: none; }
.ropt:first-child { border-top: 0; }
.rdot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink3); flex: none; margin-top: 1px; display: grid; place-items: center; }
.ropt.on .rdot { border-color: var(--acc); }
.ropt.on .rdot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); }
.ropt .row-t { font-size: 14px; }
.ropt.on .row-t { color: var(--acc); }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mopt { text-align: left; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.mopt b { font-size: 13.5px; }
.mopt span { font-size: 11.5px; color: var(--ink2); line-height: 1.4; }
.mopt.on { border-color: var(--acc); background: var(--acc-soft); }
.mopt.on b { color: var(--acc); }
.mopt.wide { grid-column: 1 / -1; }
.filters.fwrap { flex-wrap: wrap; overflow: visible; }
.kv-col { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.kv-col:first-child { border-top: 0; }
.prev-why { font-size: 11.5px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wt-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.typein { width: 100%; border: 1.5px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px 14px; font-size: 19px; }
.typein:focus { border-color: var(--acc); outline: none; }
.reveal { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.reveal .hz { font-size: 30px; font-weight: 700; line-height: 1.25; }
.verdict { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--bad); } .verdict.part { color: var(--warn); }
.tbar { height: 5px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.tbar > i { display: block; height: 100%; background: var(--warn); transition: width 1s linear; }
.wavy { color: var(--bad); text-decoration: underline wavy var(--bad); text-underline-offset: 4px; }