/* 리눅스마스터 2급 학습실
   모양 규칙: 카드 20px · 버튼 14px · 입력 12px · 칩/배지는 알약형. 강조색은 파랑 하나.
   정답/오답 색(good/bad)은 의미 색이라 강조색과 별개. */
/* 공든탑 리뉴얼 (2026-10, taste-skill v2 'accent-ladder'): 화강암 바탕에 청금석 파랑 하나.
   진한 파랑은 작은 표시(주 버튼·데이터·선택)에만, 넓은 면은 옅은 단계(soft·track)로. 쉬는 카드에 그림자 대신 1px 테두리.
   모양 규칙: 카드 16px · 버튼 알약형 · 입력 12px. 정답/오답 색(good/bad)은 의미 색이라 강조색과 별개. */
:root {
  --bg: #f4f4f1; --surface: #ffffff; --surface-2: #f6f6f3; --surface-3: #ecece8;
  --s1: #2b5fd9; --s1-ink: #1d4396; --s1-soft: #eef3fd; --s2: #1f8a5b; --s2-ink: #136443; --s2-soft: #e6f4ec; --s3: #c2610f; --s3-ink: #8f4608; --s3-soft: #fcf0e4;
  --shadow-sm: none;
  --hero-a: #eef3fd; --hero-b: #eef3fd; --hero-track: #d3e0fa; --hero-ink-2: #4a4f57;
  --ink: #16181b; --ink-2: #474c54; --ink-3: #686d75; --line: #e4e4df;
  --accent: #2b5fd9; --accent-press: #2251bd; --accent-soft: #eef3fd; --accent-track: #d3e0fa; --accent-ink: #1d4396; --on-accent: #ffffff;
  --good: #1f7d52; --good-soft: #e4f4ea; --bad: #c8323c; --bad-soft: #fcecec; --warn: #9a5b00; --warn-soft: #fdf3df;
  --term-bg: #17191e; --term-ink: #d6dee8; --term-dim: #7a8594; --term-hi: #7fd8b2; --term-sel: #242a33;
  --shadow: 0 1px 2px rgb(22 24 27 / .05), 0 8px 24px rgb(22 24 27 / .08);
  --r-card: 16px; --r-btn: 999px; --r-input: 12px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: "JetBrains Mono", "D2Coding", ui-monospace, Consolas, monospace;
  --tabbar-h: 64px;
  --streak: #d9601a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e0e0d; --surface: #181817; --surface-2: #1f1f1e; --surface-3: #2a2a28;
    --ink: #f2f2ef; --ink-2: #bdbdb8; --ink-3: #96968f; --line: #2c2c2a;
    --accent: #6f9cff; --accent-press: #8fb2ff; --accent-soft: #1a2440; --accent-track: #263561; --accent-ink: #b3caff; --on-accent: #0b1430;
    --good: #2fc488; --good-soft: #13301f; --bad: #ff6673; --bad-soft: #3a1a1e; --warn: #ffb938; --warn-soft: #3a2c10;
    --term-bg: #0b0c0f; --term-sel: #1c2129;
    --s1: #6f9cff; --s1-ink: #b3caff; --s1-soft: #1a2440; --s2: #2fc488; --s2-ink: #6fdcae; --s2-soft: #13301f; --s3: #ff9a47; --s3-ink: #ffb57a; --s3-soft: #3a2412;
    --shadow-sm: none; --streak: #ff8a4c;
    --hero-a: #1a2440; --hero-b: #1a2440; --hero-track: #263561; --hero-ink-2: #bdbdb8;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e0d; --surface: #181817; --surface-2: #1f1f1e; --surface-3: #2a2a28;
  --ink: #f2f2ef; --ink-2: #bdbdb8; --ink-3: #96968f; --line: #2c2c2a;
  --accent: #6f9cff; --accent-press: #8fb2ff; --accent-soft: #1a2440; --accent-track: #263561; --accent-ink: #b3caff; --on-accent: #0b1430;
  --good: #2fc488; --good-soft: #13301f; --bad: #ff6673; --bad-soft: #3a1a1e; --warn: #ffb938; --warn-soft: #3a2c10;
  --term-bg: #0b0c0f; --term-sel: #1c2129;
    --s1: #6f9cff; --s1-ink: #b3caff; --s1-soft: #1a2440; --s2: #2fc488; --s2-ink: #6fdcae; --s2-soft: #13301f; --s3: #ff9a47; --s3-ink: #ffb57a; --s3-soft: #3a2412;
    --shadow-sm: none; --streak: #ff8a4c;
    --hero-a: #1a2440; --hero-b: #1a2440; --hero-track: #263561; --hero-ink-2: #bdbdb8;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--accent); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); font-size: .9em; letter-spacing: 0; }
code { background: var(--surface-3); border-radius: 6px; padding: .1em .4em; }
h1, h2, h3 { margin: 0; line-height: 1.3; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--ink-3); }
.soft { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: 14px; }
.ph { line-height: 1; }

/* ---------- 레이아웃 ---------- */
.app { max-width: 560px; margin: 0 auto; padding-inline: 20px; padding-block: 0 calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom, 0px)); min-height: 100dvh; }
.app.flow { padding-bottom: 40px; }
.topbar { display: flex; align-items: center; gap: 8px; height: 60px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); margin-inline: -20px; padding-inline: 20px; }
.brand { font-weight: 700; font-size: 18px; color: var(--ink); display: flex; align-items: center; gap: 6px; letter-spacing: -0.03em; }
.brand .mark { width: 28px; height: 28px; border-radius: 9px; background: var(--hero-a); color: var(--accent); display: grid; place-items: center; font-size: 17px; }
.topbar .spacer { flex: 1; }
.stat-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding-inline: 10px; border-radius: 99px; background: var(--surface); font-weight: 700; font-size: 14px; }
.stat-chip .ph { font-size: 18px; }
.stat-chip.streak .ph { color: var(--streak); }
.stat-chip.streak.off .ph { color: var(--ink-3); }
.stat-chip.xp .ph { color: var(--accent); }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--ink-2); transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.icon-btn:active { transform: scale(0.94); background: var(--surface-3); }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar nav { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabbar-h); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--ink-3); transition: color 160ms ease; }
.tabbar a .ph { font-size: 24px; }
.tabbar a.on { color: var(--ink); }
.tabbar a:active .ph { transform: scale(0.9); }

/* ---------- 공통 컴포넌트 ---------- */
.card { background: var(--surface); border-radius: var(--r-card); padding: 20px; }
/* 그리드 자식이 넓은 표·그림·터미널 때문에 화면 밖으로 밀리지 않게 */
.stack > *, .stack-lg > *, .sec > *, .qcard > *, .kblock > *, .fb > *, details.deep > div > * { min-width: 0; }
.stack { display: grid; gap: 12px; }
.stack-lg { display: grid; gap: 28px; }
.h-page { font-size: 26px; font-weight: 700; }
.h-sec { font-size: 20px; font-weight: 700; }
.h-card { font-size: 17px; font-weight: 700; }
.label { font-size: 13px; font-weight: 600; color: var(--ink-3); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding-inline: 18px; border-radius: var(--r-btn); font-weight: 700; font-size: 16px; background: var(--surface-3); color: var(--ink); transition: transform 160ms var(--ease-out), background-color 160ms ease, opacity 160ms ease; white-space: nowrap; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
/* 호버는 회색으로 덮지 않고 각 버튼 색을 한 단계 진하게 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-3), var(--accent) 7%); }
  .btn.primary:hover:not(:disabled) { background: var(--accent-press); }
  .btn.tint:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft), var(--accent) 12%); }
  .btn.ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
  .icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
  button.choice:hover:not(:disabled):not(.picked) { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--surface); }
  .rate:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
  :is(.todo-item, .subj-row, .exam-mini, .mode-card):hover:not(:disabled) { box-shadow: var(--shadow); }
  :is(a.setting, button.setting, .cert-row, .past-row):hover { background: color-mix(in srgb, var(--surface), var(--accent) 5%); }
}
.btn.block { width: 100%; }
.btn.lg { height: 56px; font-size: 17px; }
.btn.sm { height: 36px; padding-inline: 12px; font-size: 14px; border-radius: 10px; }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.tint { background: var(--accent-soft); color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding-inline: 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }

.bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* ---------- 홈 ---------- */
.hello { padding-top: 8px; }
.hello h1 { font-size: 26px; font-weight: 700; }
.hello p { margin-top: 6px; color: var(--ink-2); }
.goal { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; }
.ring { width: 76px; height: 76px; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring .track { stroke: var(--surface-3); }
.ring .val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease-out); }
.ring.done .val { stroke: var(--good); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.goal-t { display: grid; gap: 2px; }
.goal-t strong { font-size: 17px; }
.todo { display: grid; gap: 10px; }
.todo-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; background: var(--surface); border-radius: var(--r-card); padding: 16px; text-align: left; width: 100%; transition: transform 160ms var(--ease-out); }
.todo-item:active:not(:disabled) { transform: scale(0.985); }
.todo-item:disabled { cursor: default; }
.todo-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); color: var(--accent); }
.todo-item.done .todo-ico { background: var(--good-soft); color: var(--good); }
.todo-item.locked .todo-ico { background: var(--surface-3); color: var(--ink-3); }
.todo-item h3 { font-size: 17px; font-weight: 700; }
.todo-item p { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.todo-item .go { color: var(--ink-3); font-size: 20px; }
.subj-grid { display: grid; gap: 10px; }
.subj-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; background: var(--surface); border-radius: var(--r-card); padding: 16px 18px; }
.subj-row .bar { grid-column: 1 / -1; }
.subj-row b { font-size: 16px; color: var(--ink); }

/* ---------- 개념 목록 ---------- */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-3); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { height: 38px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ink-3); transition: background-color 200ms ease, color 200ms ease; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.unit-block { background: var(--surface); border-radius: var(--r-card); padding: 8px 0; }
.unit-head { padding: 12px 20px 8px; }
.unit-head h3 { font-size: 17px; font-weight: 700; }
.unit-head p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.crow { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 12px 20px; text-align: left; transition: background-color 160ms ease; }
.crow:active { background: var(--surface-2); }
/* 개념 찾기 (개념 탭) */
.find-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.find { display: flex; align-items: center; gap: 8px; min-width: 0; height: 48px; padding-inline: 14px; border-radius: var(--r-btn); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-3); font-size: 20px; }
.find:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.find input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.find input::-webkit-search-cancel-button { cursor: pointer; }
.find-cam { padding-inline: 14px; }
.find-res .t small { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.find-res .crow.term { cursor: default; }
.find-empty { padding: 16px 20px; }
.subj-sum { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; }
.subj-sum .bar { grid-column: 1 / -1; height: 6px; }
.crow .st { font-size: 22px; color: var(--ink-3); }
.crow .st.ready { color: var(--accent); }
.crow .st.due { color: var(--warn); }
.crow .st.learning { color: var(--accent); }
.crow .st.mastered { color: var(--good); }
.crow .t { font-size: 16px; font-weight: 600; }
.crow.none .t { color: var(--ink-3); font-weight: 500; }
.crow .meta { display: flex; gap: 6px; align-items: center; }

/* ---------- 개념 페이지 ---------- */
.c-head { padding-top: 4px; }
.c-head .crumbs { font-size: 13px; color: var(--ink-3); }
.c-head h1 { font-size: 28px; font-weight: 700; margin-top: 4px; }
.c-head .meta { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cp-wrap { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 10; background: var(--bg); margin-inline: -20px; padding: 4px 20px 10px; }
.cp-steps { display: flex; gap: 4px; }
.cp-steps span { flex: 1; height: 4px; border-radius: 99px; background: var(--surface-3); transition: background-color 300ms ease; }
.cp-steps span.on { background: var(--accent); }
.cp-label { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: 6px; }
.sec { background: var(--surface); border-radius: var(--r-card); padding: 22px 20px; display: grid; gap: 14px; }
.sec-k { font-size: 13px; font-weight: 700; color: var(--accent); }
.sec h2 { font-size: 20px; font-weight: 700; }
.sec .lead { font-size: 17px; font-weight: 600; line-height: 1.55; }
.def { font-size: 17px; line-height: 1.7; }
.easy { font-size: 16px; line-height: 1.75; color: var(--ink); }
.analogy { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; color: var(--ink-2); }
.analogy b:first-child { color: var(--ink); display: block; font-size: 13px; margin-bottom: 2px; }
.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.points li { position: relative; padding-left: 18px; color: var(--ink-2); }
.points li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.fig { background: var(--surface-2); border-radius: 14px; padding: 12px; overflow-x: auto; }
.fig svg { display: block; width: 100%; min-width: 480px; height: auto; font-family: var(--sans); }
.kblock { display: grid; gap: 6px; }
.kblock h3 { font-size: 16px; font-weight: 700; }
.kblock p, .kblock li { color: var(--ink-2); }
.kblock ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.table-wrap { overflow-x: auto; margin-inline: -4px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 700; white-space: nowrap; }
tbody th.wrap { white-space: normal; min-width: 9em; overflow-wrap: anywhere; } /* 긴 SQL 예처럼 첫 칸이 길면 줄바꿈해 옆 칸이 좁아지지 않게 */
.star { color: var(--warn); }

.choices { display: grid; gap: 8px; }
.choice { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; text-align: left; width: 100%; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 2px solid transparent; transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease; }
.choice:active:not(:disabled) { transform: scale(0.985); }
.choice .n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface); color: var(--ink-3); }
.choice.picked { border-color: var(--accent); background: var(--accent-soft); }
.choice.picked .n { background: var(--accent); color: var(--on-accent); }
.choice.right { border-color: var(--good); background: var(--good-soft); }
.choice.right .n { background: var(--good); color: #fff; }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.wrong .n { background: var(--bad); color: #fff; }
.choice:disabled { cursor: default; }
.ox { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ox button { height: 64px; border-radius: 16px; background: var(--surface-2); font-size: 26px; font-weight: 700; border: 2px solid transparent; transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease; }
.ox button:active:not(:disabled) { transform: scale(0.97); }
.ox button .ph { font-size: 30px; }
.ox .o { color: var(--accent); } .ox .x { color: var(--bad); }
.ox button.picked { border-color: var(--ink-3); }
.ox button.right { border-color: var(--good); background: var(--good-soft); }
.ox button.wrong { border-color: var(--bad); background: var(--bad-soft); }
.ox button:disabled { cursor: default; }
.q-item { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.q-item:first-of-type { border-top: 0; padding-top: 0; }
.q-item .q { font-weight: 600; }
.fb { border-radius: 14px; padding: 12px 14px; font-size: 15px; color: var(--ink-2); background: var(--surface-2); display: grid; gap: 8px; }
.fb.good { background: var(--good-soft); }
.fb.bad { background: var(--bad-soft); }
.fb strong { color: var(--ink); }
.fb.good strong { color: var(--good); } .fb.bad strong { color: var(--bad); }
.reason { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.reason .btn.sm.on { background: var(--ink); color: var(--bg); }

/* 모의 스프레드시트 (컴활): 미션 위에 시트, 아래 수식 입력줄 */
.xsheet-wrap { overflow-x: auto; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.xsheet { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.xsheet th, .xsheet td { border: 1px solid var(--line); padding: 5px 8px; white-space: nowrap; }
.xsheet thead th, .xsheet tbody th { background: var(--surface-2); color: var(--ink-3); font-weight: 600; font-size: 12px; text-align: center; }
.xsheet tbody th { width: 28px; }
.xsheet tr > :first-child { border-left: 0; } .xsheet tr > :last-child { border-right: 0; } .xsheet thead th { border-top: 0; } .xsheet tr:last-child > * { border-bottom: 0; }
.xsheet td.n { text-align: right; font-variant-numeric: tabular-nums; }
.xsheet td.f { color: var(--accent); }
.xsheet td.e { color: var(--bad); }
.xsheet td.new { background: var(--accent-soft); }
.term { background: var(--term-bg); color: var(--term-ink); border-radius: 16px; font-family: var(--mono); font-size: 13px; line-height: 1.6; overflow: hidden; letter-spacing: 0; }
.term-out { padding: 14px 16px; max-height: 380px; overflow: auto; white-space: pre; }
.term.static .term-out { max-height: none; }
.term .echo { color: var(--term-hi); }
.term .dim { color: var(--term-dim); font-style: italic; white-space: pre-wrap; }
.term .ok { color: var(--term-hi); font-weight: 700; }
.term .err { color: #ff8f8f; white-space: pre-wrap; }
.term-line { display: flex; gap: 8px; align-items: center; padding: 10px 16px 14px; border-top: 1px solid #262b33; }
.term-ps { color: var(--term-hi); white-space: nowrap; }
.term-in { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--term-ink); font: inherit; outline: none; font-size: 16px; }
.term-in::placeholder { color: var(--term-dim); }
.oline { display: block; width: max-content; min-width: 100%; text-align: left; font: inherit; color: inherit; white-space: pre; padding: 1px 6px; margin: 0 -6px; border-radius: 4px; }
.oline.read { color: var(--term-hi); }
.oline.sel { background: var(--term-sel); color: #fff; }
@media (hover: hover) and (pointer: fine) { .oline:hover { background: var(--term-sel); } }
.onote { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; color: var(--ink-2); min-height: 56px; }

.mission { background: var(--surface-2); border-radius: 14px; padding: 16px; display: grid; gap: 8px; }
.mission .top { display: flex; align-items: center; gap: 8px; }
.mission .goal-txt { font-weight: 600; }
.mission .hint { background: var(--warn-soft); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.mission .after { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 10px; color: var(--ink-2); }
.mdots { display: flex; gap: 4px; margin-left: auto; }
.mdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.mdots i.on { background: var(--accent); }

.locked-box { background: var(--surface-2); border-radius: 14px; padding: 18px; text-align: center; display: grid; gap: 8px; justify-items: center; color: var(--ink-2); }
.locked-box .ph { font-size: 28px; color: var(--ink-3); }

details.deep { background: var(--surface-2); border-radius: 14px; }
details.deep summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
details.deep summary::-webkit-details-marker { display: none; }
details.deep summary .ph { transition: transform 200ms var(--ease-out); color: var(--ink-3); }
details.deep[open] summary .ph { transform: rotate(180deg); }
details.deep > div { padding: 0 16px 16px; display: grid; gap: 10px; color: var(--ink-2); }
.flips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.flip { position: relative; height: 88px; border-radius: 14px; background: var(--surface); perspective: 600px; }
.flip span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; backface-visibility: hidden; border-radius: 14px; transition: transform 400ms var(--ease-out); }
.flip code { background: none; font-size: 14px; font-weight: 700; text-align: center; }
.flip small { font-size: 11px; color: var(--ink-3); }
.flip .back { transform: rotateY(180deg); background: var(--accent-soft); }
.flip.on .front { transform: rotateY(-180deg); }
.flip.on .back { transform: rotateY(0); }

.recall-row { display: flex; gap: 8px; align-items: stretch; }
.field { flex: 1; min-width: 0; height: 52px; border-radius: var(--r-input); border: 2px solid var(--line); background: var(--surface); padding-inline: 14px; font-size: 16px; outline: none; transition: border-color 160ms ease; }
.field:focus { border-color: var(--accent); }
.field.mono { font-family: var(--mono); }
textarea.field { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.pt-list { display: grid; gap: 8px; }
.pt { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; text-align: left; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); color: var(--ink-2); transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease; }
.pt:active { transform: scale(0.985); }
.pt i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: var(--surface-2); color: transparent; transition: background-color 160ms ease, color 160ms ease; }
.pt.on { border-color: var(--good); background: var(--good-soft); color: var(--ink); }
.pt.on i { background: var(--good); color: #fff; }
.blurt .core { gap: 12px; }
.ratings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rate { height: 76px; border-radius: 16px; background: var(--surface-2); display: grid; place-content: center; gap: 2px; text-align: center; border: 2px solid transparent; transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.rate:active { transform: scale(0.97); }
.rate b { font-size: 17px; }
.rate small { font-size: 12px; color: var(--ink-3); }
.rate.suggest { border-color: var(--line); }
.rate.r-unknown.on { border-color: var(--bad); background: var(--bad-soft); }
.rate.r-unsure.on { border-color: var(--warn); background: var(--warn-soft); }
.rate.r-sure.on { border-color: var(--good); background: var(--good-soft); }
.grade { display: grid; gap: 8px; }
.grade .score { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.grade .fix { color: var(--bad); }
.model { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; color: var(--ink-2); font-size: 15px; }
.done-card { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 28px 20px; }
.done-card .big { font-size: 44px; color: var(--good); }

/* ---------- 학습 플로우 (복습·퀴즈) ---------- */
.flow-top { display: flex; align-items: center; gap: 12px; height: 60px; position: sticky; top: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 20; }
.flow-top .bar { flex: 1; height: 10px; }
.combo { font-weight: 700; font-size: 14px; color: var(--streak); display: inline-flex; align-items: center; gap: 2px; min-width: 44px; justify-content: flex-end; }
.combo.pop { animation: pop 320ms var(--ease-out); }
@keyframes pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.qcard { display: grid; gap: 20px; padding-top: 12px; }
.qcard .tag { display: flex; gap: 6px; }
.qcard h2 { font-size: 22px; font-weight: 700; line-height: 1.45; }
.qcard.enter { animation: qin 280ms var(--ease-out); }
@keyframes qin { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.bottom-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.bottom-cta > div { max-width: 520px; margin: 0 auto; }

.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; transform: translateY(100%); visibility: hidden; transition: transform 320ms var(--ease-drawer), visibility 0s linear 320ms; }
.sheet.open { transform: translateY(0); visibility: visible; transition: transform 320ms var(--ease-drawer), visibility 0s; }
.sheet > div { max-width: 560px; margin: 0 auto; background: var(--surface); border-radius: 24px 24px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; box-shadow: 0 -8px 32px rgb(0 0 0 / .12); }
.sheet .s-head { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; }
.sheet .s-head .ph { font-size: 30px; }
.sheet.good .s-head { color: var(--good); }
.sheet.bad .s-head { color: var(--bad); }
.sheet .xp-gain { margin-left: auto; font-size: 15px; color: var(--accent); }
.sheet .s-body { color: var(--ink-2); font-size: 15px; line-height: 1.65; max-height: 40dvh; overflow: auto; }
.sheet .s-body > * + * { margin-top: 8px; }
.sheet.good .btn.primary { background: var(--good); }
.sheet.bad .btn.primary { background: var(--bad); }

.result { text-align: center; display: grid; gap: 20px; padding-top: 40px; justify-items: center; }
.result .trophy { width: 96px; height: 96px; border-radius: 32px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 52px; }
.result h1 { font-size: 28px; font-weight: 700; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.result-stats div { background: var(--surface); border-radius: 16px; padding: 14px 8px; display: grid; gap: 2px; }
.result-stats b { font-size: 22px; font-weight: 700; }
.result-stats span { font-size: 12px; color: var(--ink-3); }
.rv-list { width: 100%; background: var(--surface); border-radius: var(--r-card); padding: 6px 0; text-align: left; }
.rv-list div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 18px; }

/* ---------- 약점·내 정보 ---------- */
.kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi div { background: var(--surface); border-radius: 16px; padding: 14px; display: grid; gap: 2px; }
.kpi b { font-size: 22px; font-weight: 700; }
.kpi span { font-size: 12px; color: var(--ink-3); }
.list { background: var(--surface); border-radius: var(--r-card); padding: 6px 0; }
.list-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 20px; width: 100%; text-align: left; }
.list-row .bar { grid-column: 1 / -1; height: 6px; }
.list-row .t { font-weight: 600; }
.reason-bars { display: grid; gap: 12px; }
.reason-bars > div { display: grid; grid-template-columns: 64px 1fr 32px; gap: 10px; align-items: center; font-size: 14px; }
.reason-bars .bar > i.r-unknown { background: var(--bad); }
.reason-bars .bar > i.r-confused { background: var(--warn); }
.reason-bars .bar > i.r-slip { background: var(--ink-3); }
.empty { text-align: center; padding: 32px 16px; display: grid; gap: 8px; justify-items: center; color: var(--ink-2); }
.empty .ph { font-size: 40px; color: var(--ink-3); }
.profile { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
.avatar { width: 64px; height: 64px; border-radius: 22px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 22px; }
.profile.locked .avatar { background: var(--surface-3); color: var(--ink-3); font-size: 26px; }
.setting { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 20px; width: 100%; text-align: left; }
.setting p { font-size: 13px; color: var(--ink-3); }
.switch { width: 52px; height: 32px; border-radius: 99px; background: var(--line); position: relative; transition: background-color 200ms ease; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform 200ms var(--ease-out); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

.toast { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 60; transform: translate(-50%, calc(-100% - 24px - env(safe-area-inset-top, 0px))); background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 16px; font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: center; transition: transform 300ms var(--ease-out); max-width: calc(100% - 40px); }
.toast.show { transform: translate(-50%, 0); }
.toast .ph { font-size: 20px; color: var(--warn); }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

.skeleton { background: var(--surface); border-radius: var(--r-card); height: 120px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* =========================================================
   학습 앱 톤: 과목 색, 홈 패널, 아이콘 제목, 키워드 카드
   과목 색은 장식이 아니라 "지금 어느 과목인지" 알려 주는 길잡이 색이다.
   ========================================================= */
[data-subj="S1"] { --sc: var(--s1); --sc-ink: var(--s1-ink); --sc-soft: var(--s1-soft); }
[data-subj="S2"] { --sc: var(--s2); --sc-ink: var(--s2-ink); --sc-soft: var(--s2-soft); }
[data-subj="S3"] { --sc: var(--s3); --sc-ink: var(--s3-ink); --sc-soft: var(--s3-soft); }
::selection { background: var(--accent-soft); color: var(--ink); }
.card, .sec, .todo-item, .unit-block, .subj-row, .list, .kpi div, .result-stats div, .rv-list { box-shadow: var(--shadow-sm); }
.h-sec { font-size: 19px; }

/* 홈 패널: 파스텔 하늘색 → 민트. 글자는 진한 잉크색이라 대비가 충분하다 */
.hero { background: linear-gradient(150deg, var(--hero-a) 0%, var(--hero-b) 100%); color: var(--ink); border-radius: 22px; padding: 22px 20px 20px; display: grid; gap: 18px; }
.hero-row { display: grid; grid-template-columns: 1fr 84px; gap: 12px; align-items: center; }
.hero-t { display: grid; gap: 6px; }
.hero h1 { font-size: 23px; font-weight: 700; line-height: 1.35; }
.hero-streak { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 4px; font-size: 14px; font-weight: 700; color: var(--hero-ink-2); }
.hero-streak .ph { color: var(--streak); font-size: 18px; }
.hero .ring { width: 84px; height: 84px; }
.hero .ring .track { stroke: var(--hero-track); }
.hero .ring .val { stroke: var(--accent); }
.hero .ring.done .val { stroke: var(--good); }
.hero .ring b { color: var(--ink); font-size: 20px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero .ring.done b { color: var(--good); }
.hero .ring b small { font-size: 11px; font-weight: 700; color: var(--ink-3); display: block; text-align: center; margin-top: 2px; }
.hero-cta { background: var(--accent); color: var(--on-accent); font-weight: 700; white-space: normal; text-align: center; height: auto; min-height: 56px; padding-block: 12px; line-height: 1.35; }
.hero > *, .hero-row > * { min-width: 0; }
.hero-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hero-cta:hover { background: var(--accent-press); } }

/* 할 일 아이콘 색 */
.todo-ico.t-warn { background: var(--warn-soft); color: var(--warn); }
.todo-ico.t-good { background: var(--good-soft); color: var(--good); }
.todo-ico.t-accent { background: var(--accent-soft); color: var(--accent); }
.todo-ico.t-subj { background: var(--sc-soft); color: var(--sc-ink); }
.todo-item h3 { font-size: 16px; }

/* 과목별 진도 */
.subj-row { grid-template-columns: 44px 1fr auto; gap: 10px 14px; }
.subj-row .bar { grid-column: 1 / -1; height: 8px; }
.subj-row .bar > i { background: var(--sc); }
.subj-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--sc-soft); color: var(--sc-ink); display: grid; place-items: center; font-size: 22px; }
.subj-t { display: grid; gap: 1px; min-width: 0; }

/* 개념 목록 */
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.on { background: var(--sc); color: #fff; box-shadow: none; }
.unit-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px 20px 10px; }
.unit-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sc-soft); color: var(--sc-ink); display: grid; place-items: center; font-size: 20px; }
.unit-n { font-size: 13px; font-weight: 700; color: var(--sc-ink); background: var(--sc-soft); padding: 2px 9px; border-radius: 99px; }
.crow .st.ready, .crow .st.learning { color: var(--sc); }
.pill.subj { background: var(--sc-soft); color: var(--sc-ink); }

/* 개념 페이지 머리 */
.c-head { background: var(--sc-soft); border-radius: 18px; padding: 18px 18px 16px; display: grid; gap: 2px; }
.c-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--sc); color: #fff; display: grid; place-items: center; font-size: 22px; margin-bottom: 8px; }
.c-head .crumbs { color: var(--sc-ink); font-weight: 600; }
.c-head h1 { margin-top: 0; }
.c-head .pill { background: var(--surface); }
.cp-steps span.on { background: var(--sc, var(--accent)); }

/* 섹션 제목: 아이콘 + 굵은 제목 */
.sec-h { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.sec-ico { width: 34px; height: 34px; border-radius: 11px; background: var(--sc-soft, var(--accent-soft)); color: var(--sc-ink, var(--accent)); display: grid; place-items: center; font-size: 18px; flex: none; }

/* 퀴즈 흐름 */
.qcard .tag .pill .ph { font-size: 13px; }
.flow-top .bar > i { background: var(--good); }
.sheet.good > div { background: var(--good-soft); }
.sheet.bad > div { background: var(--bad-soft); }
.sheet .s-body { color: var(--ink); }
.choice { border-width: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-color: transparent; }
.choice.picked, .choice.right, .choice.wrong { box-shadow: none; }
.ox button { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ox button.right, .ox button.wrong, .ox button.picked { box-shadow: none; }
.sec .choice, .sec .ox button { background: var(--surface-2); box-shadow: none; }

/* 키워드: 누르면 뜻 카드 */
.kw { font: inherit; color: inherit; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--sc, var(--accent)); text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: 3px; transition: background-color 160ms ease; }
u.neg { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
@media (hover: hover) and (pointer: fine) { .kw:hover { background: var(--sc-soft, var(--accent-soft)); } }
.kw:active { background: var(--sc-soft, var(--accent-soft)); }
.kwpop { position: fixed; inset: 0; z-index: 55; }
.kw-backdrop { position: absolute; inset: 0; background: rgb(15 20 30 / .35); opacity: 0; transition: opacity 200ms ease; }
.kw-card { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--surface); border-radius: 24px 24px 0 0; padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; transform: translateY(100%); transition: transform 260ms var(--ease-drawer); }
.kwpop.open .kw-backdrop { opacity: 1; }
.kwpop.open .kw-card { transform: translateY(0); }
.kw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kw-top h2 { font-size: 21px; font-weight: 700; }
.kw-card > p { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.kw-go { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--sc-soft, var(--accent-soft)); color: var(--ink); }
.kw-go small { display: block; font-size: 13px; color: var(--sc-ink, var(--accent)); font-weight: 600; }
.kw-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sc, var(--accent)); color: #fff; display: grid; place-items: center; font-size: 20px; }

/* 자격증 칩 (상단) */
.cert-chip { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding-inline: 10px 8px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 700; color: var(--ink-2); margin-left: 4px; transition: transform 160ms var(--ease-out); }
.cert-chip:active { transform: scale(0.96); }
.cert-chip .ph { font-size: 12px; color: var(--ink-3); }
.cert-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 14px 20px; text-align: left; }
.cert-row small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.cert-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 22px; }
.cert-ico.lg { width: 52px; height: 52px; font-size: 26px; border-radius: 16px; }
/* 자격증 목록 아래 '쓰이는 곳' 한 줄과 직무로 찾기 */
.seg.mini.two { grid-template-columns: repeat(2, 1fr); }
.cert-jobs { display: flex; align-items: center; gap: 8px; margin: -4px 20px 12px 76px; padding: 8px 12px; border-radius: 10px; background: var(--surface-3); font-size: 13px; color: var(--ink-2); }
.cert-jobs span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-jobs b { color: var(--accent); font-weight: 700; white-space: nowrap; }
.job-group { display: grid; gap: 14px; }
.job-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.job-head small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.job-certs { display: grid; gap: 8px; }
a.cert-row, .job-cert, .cert-jobs { color: inherit; text-decoration: none; }
.job-cert { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-3); }
.job-cert small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.job-row { display: grid; gap: 2px; padding: 12px 20px; }
.job-row small { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 720px) { .job-certs { grid-template-columns: 1fr 1fr; } }
@media (hover: hover) and (pointer: fine) { :is(.cert-jobs, .job-cert):hover { background: color-mix(in srgb, var(--surface-3), var(--accent) 8%); } }

/* 시험 일정 */
.exam-mini { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; transition: transform 160ms var(--ease-out); }
.exam-mini:active { transform: scale(0.985); }
.exam-mini b { display: block; font-size: 16px; }
.exam-mini small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.exam-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); display: grid; place-items: center; font-size: 22px; }
.exam-mini.st-open .exam-ico { background: var(--good-soft); color: var(--good); }
.skeleton-line { height: 72px; animation: pulse 1.2s ease-in-out infinite; }
.dday { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.dday.big { font-size: 17px; color: var(--accent); }
.exam-mini.st-open .dday.big { color: var(--good); }
/* 합격 계획 */
.plan-mini { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; transition: transform 160ms var(--ease-out); }
.plan-mini:active { transform: scale(0.985); }
.plan-mini b { display: block; font-size: 16px; }
.plan-mini small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.plan-mini .bar { height: 6px; margin-top: 8px; }
.plan-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 22px; }
.plan-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--accent); }
.plan-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plan-stats > div { background: var(--surface); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-sm); min-width: 0; }
.plan-stats small { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.plan-stats b { display: block; font-size: 20px; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.plan-stats b span { font-size: 14px; color: var(--ink-3); font-weight: 700; }
/* 합격 계획: 세로 일정표. 왼쪽 동그라미가 한 줄 레일로 이어진다 */
.plan-line { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; }
.plan-line li { position: relative; }
.plan-line li::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.plan-line li:first-child::before { top: 50%; }
.plan-line li:last-child::before { bottom: 50%; }
.pstop { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 4px 8px 0; background: none; text-align: left; border-radius: 12px; }
.pnode { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: transform 160ms var(--ease-out); }
.pnode b { font-size: 15px; font-weight: 700; }
.pstop:active .pnode { transform: scale(0.94); }
.plab b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.plab small { display: block; font-size: 13px; color: var(--ink-3); }
.pstop.now .pnode { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pstop.now .plab b { color: var(--accent-ink); }
.pstop.done .pnode { background: var(--good); color: #fff; box-shadow: none; }
.pstop.k-mock .pnode, .pstop.k-final .pnode { color: var(--warn); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 45%, transparent); }
.pstop.k-review .pnode { color: var(--good); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--good) 40%, transparent); }
.pstop.k-exam .pnode { background: var(--ink); color: var(--bg); box-shadow: none; }
.pstop.now.k-mock .pnode, .pstop.now.k-final .pnode { background: var(--warn); color: #fff; box-shadow: 0 0 0 4px var(--warn-soft); }
@media (hover: hover) and (pointer: fine) { .pstop:hover .plab b { text-decoration: underline; text-underline-offset: 3px; } }
.plan-rows { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; }
.plan-foot { display: flex; justify-content: center; }
.ob-opt input[type="date"] { display: block; margin-top: 6px; font: inherit; font-size: 15px; padding: 8px 10px; border-radius: var(--r-input); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); width: 100%; max-width: 220px; }
/* 합격 예측 */
.pred-mini .bar, .pred-bar { position: relative; display: block; height: 8px; margin-top: 8px; border-radius: 99px; background: var(--surface-3); }
.pred-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pred-bar > i.t-good { background: var(--good); } .pred-bar > i.t-warn { background: var(--warn); } .pred-bar > i.t-bad { background: var(--bad); } .pred-bar > i.t-subj { background: var(--ink-3); }
.pred-bar > b { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--ink); opacity: .55; }
.plan-ico.t-good { background: var(--good-soft); color: var(--good); } .plan-ico.t-warn { background: var(--warn-soft); color: var(--warn); } .plan-ico.t-bad { background: var(--bad-soft); color: var(--bad); }
/* 시험 결과 묻기 (홈) */
.res-head { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.res-head p { margin-top: 2px; }
.res-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-opts .btn { width: 100%; }
.pred-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pred-k { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.pred-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent); }
.pred-v { font-size: 40px; font-weight: 700; line-height: 1.1; }
.pred-v small { font-size: 18px; color: var(--ink-3); margin-left: 2px; }
.pred-subj { display: grid; gap: 8px; }
.pred-subj > div { display: grid; grid-template-columns: minmax(0, 92px) 1fr 32px; gap: 10px; align-items: center; font-size: 14px; }
.pred-subj > div > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.pred-subj .pred-bar { margin-top: 0; }
.pred-subj b { text-align: right; font-weight: 700; }
/* 사진으로 묻기 */
.ask-pick { display: grid; justify-items: center; gap: 6px; padding: 32px 16px; border-radius: var(--r-card); border: 2px dashed var(--line); background: var(--surface); text-align: center; cursor: pointer; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.ask-pick:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .ask-pick:hover { border-color: var(--accent); } }
.ask-pick b { font-size: 17px; } .ask-pick small { font-size: 13px; color: var(--ink-3); }
.ask-ico { width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 28px; margin-bottom: 4px; }
.ask-img { border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.ask-img img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
#ask-prev .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ask-ans p { line-height: 1.7; }
/* 말로 하기 */
.btn.mic { justify-self: start; }
.btn.mic.on { background: var(--bad-soft); color: var(--bad); }
.exam-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 18px; display: grid; gap: 12px; }
.exam-card.st-done { opacity: .72; box-shadow: none; background: var(--surface-2); }
.exam-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exam-top b { font-size: 17px; }
.exam-rows { margin: 0; display: grid; gap: 2px; }
.exam-rows > div { display: grid; grid-template-columns: 104px 1fr; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.exam-rows > div.on { background: var(--accent-soft); }
.exam-rows dt { color: var(--ink-3); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.exam-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.exam-rows small { display: block; font-size: 13px; font-weight: 700; color: var(--accent); }
.info-rows { margin: 0; display: grid; gap: 8px; }
.info-rows > div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.info-rows dt { color: var(--ink-3); font-size: 14px; }
.info-rows dd { margin: 0; }
details.past > div { display: grid; gap: 10px; }
a.setting { color: var(--ink); }

/* ---------- 시험: 모의고사 · 기출 회차 ---------- */
.todo-item, .subj-row, .exam-mini, .mode-card, .resume-card { transition: transform 160ms var(--ease-out), box-shadow 200ms ease; }
.seg.tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ink-3); transition: background-color 200ms ease, color 200ms ease; }
.seg.tabs a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(25 31 40 / .08); }
@media (hover: hover) and (pointer: fine) { .seg.tabs a:not(.on):hover { color: var(--accent); } }
.mode-list { display: grid; gap: 10px; }
.mode-card, .resume-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; }
.mode-card:active, .resume-card:active { transform: scale(0.985); }
.mode-card b, .resume-card b { display: block; font-size: 17px; }
.mode-card small, .resume-card small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.mode-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--accent-soft); color: var(--accent); }
.mode-card[data-mode="r2"] .mode-ico { background: var(--s2-soft); color: var(--s2-ink); }
.mode-card[data-mode="mini"] .mode-ico { background: var(--s3-soft); color: var(--s3-ink); }
.resume-card { background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); box-shadow: none; }
.resume-card .mode-ico { background: var(--accent); color: var(--on-accent); }
.resume-card small { color: var(--hero-ink-2); }
.kpi b small { font-size: 14px; color: var(--ink-3); font-weight: 700; }
.mk-hist .t { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
a.mk-hist { color: var(--ink); }
a.mk-hist .small:last-child { color: var(--accent); font-weight: 700; }

.mock-top { gap: 8px; }
.mock-top .spacer { flex: 1; }
.timer { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17px; padding: 6px 12px; border-radius: 99px; background: var(--surface); }
.timer.low { background: var(--bad-soft); color: var(--bad); }
.mk-bar { height: 6px; margin-bottom: 4px; }
.mk-bar > i { background: var(--accent); }
.mk-nav { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 8px; }
.mk-nav.two { grid-template-columns: 1fr 1fr; }
.mk-nav .btn { padding-inline: 10px; }
#mk-panel:not(:empty) { margin-top: 12px; }
.omr { display: grid; gap: 12px; padding: 14px; }
.omr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.omr-grid button { height: 48px; border-radius: 10px; background: var(--surface-2); display: grid; place-content: center; line-height: 1.15; font-weight: 700; font-size: 14px; color: var(--ink-2); border: 2px solid transparent; transition: transform 160ms var(--ease-out); }
.omr-grid button:active { transform: scale(0.94); }
.omr-grid button small { font-size: 11px; font-weight: 700; color: var(--accent); }
.omr-grid button.done { background: var(--accent-soft); color: var(--ink); }
.omr-grid button.mark { border-color: var(--warn); }
.omr-grid button.cur { border-color: var(--accent); }
.omr-key { display: flex; flex-wrap: wrap; gap: 12px; }
.omr-key span { display: inline-flex; align-items: center; gap: 6px; }
.omr-key .k { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); border: 2px solid var(--line); }
.omr-key .k.done { background: var(--accent-soft); border-color: var(--accent-soft); }
.omr-key .k.mark { border-color: var(--warn); }
.submit-card { padding: 18px; }
.qcard .pill.warn { background: var(--warn-soft); color: #9a6200; }

.mk-result { padding-bottom: 96px; }
.score-ring { width: 148px; height: 148px; position: relative; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 12; }
.score-ring .track { stroke: var(--surface-3); }
.score-ring .val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 800ms var(--ease-out); }
.score-ring.pass .val { stroke: var(--good); }
.score-ring.fail .val { stroke: var(--warn); }
.score-ring b { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; }
.score-ring b small { font-size: 17px; margin-left: 2px; color: var(--ink-3); }
.mk-subj { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.mk-subj .bar { grid-column: 1 / -1; height: 8px; }
.mk-subj .bar > i { background: var(--sc); }
.mk-wrong summary > span { min-width: 0; }
.mk-wrong > div { padding: 0 16px 16px; }
.mk-wrong .choice { cursor: default; background: var(--surface); }
a.list-row { color: var(--ink); }
.mk-q { font-weight: 700; font-size: 17px; }
.mk-wrong .btn.sm { justify-self: start; }

.note { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 16px; border-radius: var(--r-card); background: var(--accent-soft); color: var(--ink-2); font-size: 14px; }
.note > .ph-bold { color: var(--accent); font-size: 20px; margin-top: 1px; }
.past-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 10px; align-items: center; padding: 10px 14px 10px 20px; }
.past-row + .past-row { border-top: 1px solid var(--line); }
.pr-t { display: grid; gap: 0; min-width: 0; }
.pr-t b { font-size: 16px; }
.pr-score { min-width: 44px; height: 36px; padding-inline: 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; gap: 1px; }
.pr-score .ph { font-size: 18px; }
.pr-score b { font-size: 16px; }
.pr-score small { font-size: 11px; font-weight: 600; margin-right: 3px; opacity: .85; }
.pr-score.good { background: var(--good-soft); color: var(--good); }
.pr-score.bad { background: var(--bad-soft); color: var(--bad); }
@media (hover: hover) and (pointer: fine) { .pr-score:not(.good):not(.bad):hover { background: var(--accent-soft); color: var(--accent); } }
.past-row:has(.pr-past) { grid-template-columns: 1fr auto auto auto; }
.pr-form { grid-column: 1 / -1; display: flex; gap: 8px; }
.pr-form[hidden] { display: none; }
.pr-form .field { height: 40px; flex: 1; min-width: 0; }
details.past-year > .list { margin: 0 8px 8px; }

/* ---------- 로그인 ---------- */
.account .h-card { display: block; margin-bottom: 4px; }
.login-btns { display: grid; gap: 8px; }
.login-btns .btn .ph-bold { font-size: 20px; }
.btn.login-google { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.login-kakao { background: #fee500; color: rgb(0 0 0 / .85); }
.btn.login-github { background: #24292f; color: #fff; }
/* Apple 로 로그인: Apple 디자인 지침대로 검정 바탕 흰 글자(다크 모드는 흰 바탕 검정 글자) */
.btn.login-apple { background: #000; color: #fff; }
:root[data-theme="dark"] .btn.login-apple { background: #fff; color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.login-apple { background: #fff; color: #000; } }
.apple-sym { width: 20px; height: 20px; flex: none; fill: currentColor; margin-top: -2px; }
.acct-ico .apple-sym { width: 22px; height: 22px; }
.del-list .apple-sym { color: var(--ink-3); margin-top: 1px; align-self: start; }
@media (hover: hover) and (pointer: fine) {
  .btn.login-google:hover:not(:disabled) { background: var(--surface-2); }
  .btn.login-kakao:hover:not(:disabled) { background: #f5d900; }
  .btn.login-github:hover:not(:disabled) { background: #3a4149; }
}
.acct-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.acct-row > div { min-width: 0; }
.acct-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--good-soft); color: var(--good); display: grid; place-items: center; font-size: 22px; }

/* ---------- 화면 안내(코치 마크) ---------- */
.coach { position: fixed; inset: 0; z-index: 65; touch-action: none; animation: coach-fade 200ms var(--ease-out); }
.coach.out { opacity: 0; transition: opacity 180ms ease-out; }
.coach-hole { position: fixed; box-shadow: 0 0 0 200vmax rgb(12 16 24 / .64); pointer-events: none; }
.coach-hole::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--accent); border-radius: inherit; animation: coach-ring 1.8s var(--ease-out) infinite; }
.coach-card { position: fixed; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .22); }
.coach-card.in { animation: coach-pop 260ms var(--ease-out); transform-origin: 50% 0; }
.coach-card.up.in { transform-origin: 50% 100%; }
.coach-caret { position: absolute; top: -8px; width: 14px; height: 14px; margin-left: -7px; background: var(--surface); border: 1px solid var(--line); border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; transform: rotate(45deg); }
.coach-card.up .coach-caret { top: auto; bottom: -8px; border: 1px solid var(--line); border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
.coach-card h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.coach-card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.coach-foot { display: flex; align-items: center; gap: 4px; margin-top: 14px; }
.coach-dots { display: flex; gap: 5px; margin-right: auto; }
.coach-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--surface-3); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.coach-dots i.on { background: var(--accent); transform: scale(1.35); }
.coach-skip { height: 36px; padding-inline: 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.coach-skip:active { background: var(--surface-2); }
.coach-next { min-width: 72px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes coach-fade { from { opacity: 0; } }
@keyframes coach-pop { from { opacity: 0; transform: scale(0.96) translateY(4px); } }
@keyframes coach-ring { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .coach, .coach-card.in { animation: none; } .coach-hole::after { animation: none; } }

/* ---------- 튜토리얼 · 로그인 게이트 ---------- */
.ob-top { gap: 12px; }
.ob-top.still { position: relative; }
.ob-pad { width: 40px; flex: none; }
.ob-dots { flex: 1; display: flex; gap: 6px; justify-content: center; }
.ob-dots i { height: 6px; flex: 1; max-width: 44px; border-radius: 99px; background: var(--surface-3); transition: background-color 240ms ease; }
.ob-dots i.on { background: var(--accent); }
.ob { display: grid; gap: 22px; padding: 16px 0 180px; }
.ob.enter { animation: qin 280ms var(--ease-out); }
.ob h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.ob-q { display: grid; gap: 6px; }
.ob-hello { display: grid; gap: 18px; justify-items: center; text-align: center; padding-top: 7vh; }
.ob-hello h1 { font-size: 30px; line-height: 1.25; }
.ob-hello .soft { max-width: 30ch; }
.ob-opts { display: grid; gap: 10px; }
.ob-opt { display: grid; grid-template-columns: 48px 1fr 24px; gap: 14px; align-items: center; width: 100%; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); border: 2px solid transparent; box-shadow: var(--shadow-sm); text-align: left; transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease; }
.ob-opt:active { transform: scale(0.985); }
.ob-opt b { display: block; font-size: 17px; }
.ob-opt small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.ob-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--accent-soft); color: var(--accent); }
.ob-chk { font-size: 24px; color: var(--accent); opacity: 0; transform: scale(0.8); transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.ob-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--surface), var(--accent) 5%); }
.ob-opt.on .ob-chk { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .ob-opt:not(.on):hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); } }
.ob-plan, .ob-tip { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 16px; border-radius: var(--r-card); background: var(--accent-soft); color: var(--ink-2); font-size: 15px; }
.ob-plan .ph-bold, .ob-tip .ph-bold { color: var(--accent); font-size: 20px; margin-top: 1px; }
.ob-tip u { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ob-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; background: var(--surface); border-radius: var(--r-card); padding: 8px; }
.ob-how li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 8px; }
.ob-how b { display: block; font-size: 16px; }
.ob-how b .num { color: var(--accent); margin-right: 2px; }
.ob-how small { display: block; font-size: 13px; color: var(--ink-3); }
.ob-how li:nth-child(2) .ob-ico { background: var(--s2-soft); color: var(--s2-ink); }
.ob-how li:nth-child(3) .ob-ico { background: var(--s3-soft); color: var(--s3-ink); }
.ob-how li:nth-child(4) .ob-ico { background: var(--good-soft); color: var(--good); }

.gate-tower { display: grid; justify-items: center; gap: 6px; width: 180px; margin: 0 auto; }
.gate-tower i { display: block; height: 26px; width: var(--w); border-radius: 9px; border: 2px dashed var(--line); }
.gate-tower i.on { border: 0; background: var(--accent); }
.gate-tower i.on:nth-last-child(2) { background: color-mix(in srgb, var(--accent) 72%, var(--surface)); }
.gate-tower i.on:nth-last-child(3) { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); }
.gate-tower i.on:nth-last-child(4) { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.ob-hello .gate-tower i.on { animation: stack 520ms var(--ease-out) backwards; }
.ob-hello .gate-tower i.on:nth-child(2) { animation-delay: 140ms; }
.ob-hello .gate-tower i.on:nth-child(1) { animation-delay: 280ms; }
@keyframes stack { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-hello .gate-tower i.on, .ob.enter { animation: none; } }
.gate { padding-top: 24px; }
.gate-t { text-align: center; display: grid; gap: 8px; }
.gate-t h1 { font-size: 26px; font-weight: 700; }
.gate-foot { text-align: center; }
.perks { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; background: var(--surface); border-radius: var(--r-card); }
.perks li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 8px; }
.perks b { display: block; font-size: 15px; }
.perks small { display: block; font-size: 13px; color: var(--ink-3); }
.perk-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: var(--good-soft); color: var(--good); }
.guest-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.guest-card p { color: var(--ink-3); margin-top: 2px; }
.login-btns.compact .btn { height: 44px; font-size: 15px; }
.lock-card { padding: 16px; }
.lock-row { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; }
.lock-row b { display: block; }
.lock-row small { display: block; font-size: 13px; color: var(--ink-3); }
.lock-card .mode-ico { background: var(--warn-soft); color: #9a6200; }
.mode-list.locked .mode-card { opacity: .55; }
.hero-dday { white-space: nowrap; margin-left: 6px; padding: 2px 9px; border-radius: 99px; background: #1b64da; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: 0.01em; box-shadow: 0 1px 2px rgb(27 100 218 / .25); }
.seg.mini { grid-template-columns: repeat(3, auto); padding: 3px; gap: 2px; border-radius: 12px; }
.seg.mini button { height: 32px; padding-inline: 10px; font-size: 13px; }
.seg.mini button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(25 31 40 / .08); }
.goal-set { grid-template-columns: 1fr auto; }
@media (max-width: 380px) { .goal-set { grid-template-columns: 1fr; } }
.ob-later { justify-self: center; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ob-later:hover { color: var(--ink-2); } }

/* 복습 알림 제안 · 오답 노트 */
.nudge-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); }
.nudge-card p { color: var(--ink-3); margin-top: 2px; }
.nudge-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: var(--warn-soft); color: var(--warn); flex: none; }
.nudge-ico.big { width: 64px; height: 64px; border-radius: 20px; font-size: 32px; background: var(--accent-soft); color: var(--accent); margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .nudge-card .nudge-ico { animation: none; } }
.nudge-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wrong-note .nudge-ico, .empty-note .nudge-ico { background: var(--bad-soft); color: var(--bad); }
.empty-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.wn-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.wn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-chips .pill { height: 30px; padding-inline: 12px; font-size: 13px; white-space: normal; }
@media (hover: hover) and (pointer: fine) { .wn-chips a.pill:hover { background: color-mix(in srgb, var(--surface-3) 80%, var(--ink) 6%); } }

/* 계정 삭제 */
.del-list { display: grid; gap: 12px; }
.del-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; color: var(--ink-2); }
.del-list i { font-size: 20px; color: var(--ink-3); margin-top: 1px; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.btn.danger { background: var(--bad); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 88%, #000); } }

/* 약관 링크 */
.legal-note { font-size: 12px; color: var(--ink-3); text-align: center; }
.legal-note a, .legal-links a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.legal-links { display: flex; gap: 8px; justify-content: center; color: var(--ink-3); }
.center { text-align: center; }

/* 결과 카드 미리보기 */
.share-prev { display: grid; gap: 10px; margin-bottom: 12px; }
.share-prev img { width: min(100%, 320px); justify-self: center; border-radius: 16px; box-shadow: var(--shadow); }

/* 관리자 통계 */
.adm-chart { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; height: 140px; align-items: end; }
.adm-chart > div { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 4px; text-align: center; min-width: 0; }
.adm-chart > div > span { font-size: 10px; font-weight: 700; color: var(--ink-3); min-height: 12px; line-height: 12px; }
.adm-chart i { position: relative; align-self: end; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--accent); overflow: hidden; }
.adm-chart i s { position: absolute; inset: auto 0 0; background: var(--good); }
.adm-chart small { font-size: 10px; color: var(--ink-3); }
.adm-legend { display: flex; gap: 14px; }
.adm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.adm-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.adm-legend i.fresh { background: var(--good); }
.adm-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(25 31 40 / .08); }
.adm-table th, .adm-table td, .adm-nowrap th, .adm-nowrap td { white-space: nowrap; }
.adm-nowrap td, .adm-nowrap thead th:not(:first-child) { text-align: right; }
.adm-table td, .adm-table thead th:not(:first-child) { text-align: right; }
.adm-table tbody tr { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .adm-table tbody tr:hover { background: var(--surface-3); } }
.adm-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adm-steps { display: grid; gap: 12px; }
.adm-steps > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.adm-steps .bar { grid-column: 1 / -1; height: 6px; }
.adm-steps span { font-size: 14px; color: var(--ink-2); }
.adm-steps b small { font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* 과목이 많은 자격증: 과목 탭 가로 스크롤, 과목 색 S4~S9 */
.seg.many { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.seg.many::-webkit-scrollbar { display: none; }
.seg.many button { flex: none; padding-inline: 14px; scroll-snap-align: center; }
[data-subj="S4"] { --sc: #7c5cff; }
[data-subj="S5"] { --sc: #e5508a; }
[data-subj="S6"] { --sc: #0e9fb3; }
[data-subj="S7"] { --sc: #c98300; }
[data-subj="S8"] { --sc: #4f63d8; }
[data-subj="S9"] { --sc: #e5484d; }
:is([data-subj="S4"], [data-subj="S5"], [data-subj="S6"], [data-subj="S7"], [data-subj="S8"], [data-subj="S9"]) { --sc-ink: color-mix(in srgb, var(--sc) 78%, var(--ink)); --sc-soft: color-mix(in srgb, var(--sc) 13%, var(--surface)); }
#remind-nudge:empty { display: none; }
.exam-badge { margin-bottom: 8px; }

/* 카카오 말풍선 심볼: 디자인 가이드대로 검정 */
.kakao-sym { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn.login-kakao .kakao-sym { fill: #000; }
.acct-ico .kakao-sym { width: 22px; height: 22px; }
.del-list .kakao-sym { color: var(--ink-3); margin-top: 1px; align-self: start; }

/* ---------- 단원 퀴즈 ---------- */
.crow.uq { border-top: 1px solid var(--line); margin-top: 4px; }
.crow.uq.locked { cursor: default; }
.crow.uq.locked .t { color: var(--ink-3); font-weight: 500; }
.crow.uq.locked:active { background: none; }
.uq-miss { width: 100%; max-width: 420px; text-align: left; }
.uq-res { padding-bottom: 150px; }

/* ---------- 실기 연습 ---------- */
.drill { gap: 16px; }
.drill #term .term-out { max-height: 160px; }
.dr-tasks { list-style: none; display: grid; gap: 10px; padding: 0; }
.dr-task { background: var(--surface); border-radius: var(--r-card); padding: 14px 16px; display: grid; gap: 8px; box-shadow: var(--shadow-sm); }
.dr-task.pass { opacity: .72; }
.dr-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dr-top b { margin-right: 4px; }
.dr-task .hint { background: var(--warn-soft); border-radius: 10px; padding: 8px 12px; font-size: 14px; overflow-wrap: anywhere; }
.dr-why { color: var(--bad); }
.dr-fin b { display: flex; gap: 6px; align-items: center; color: var(--good); }
.mode-card .pill { align-self: center; }
.dr-cur { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.dr-cur:empty { display: none; }
.dr-cur .pill { flex: none; }

/* ---------- 배지 ---------- */
.sec-row { display: flex; justify-content: space-between; align-items: baseline; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.badge { background: var(--surface); border-radius: 16px; padding: 14px 10px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.badge .b-ico { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; background: var(--surface-3); color: var(--ink-3); }
.badge.on .b-ico { background: var(--warn-soft); color: var(--warn); }
.badge b { font-size: 14px; }
.badge small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.badge:not(.on) b { color: var(--ink-3); }

/* ---------- 주간 리그 ---------- */
.lg-list { list-style: none; padding: 4px 0; }
.lg-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 11px 20px; }
.lg-row.me { background: var(--accent-soft); }
.lg-gap { text-align: center; color: var(--ink-3); font-size: 18px; line-height: 1; padding: 2px 0; }
.seg.lg-tabs { grid-template-columns: repeat(2, 1fr); }
.seg.lg-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(25 31 40 / .08); }
.lg-fire { color: var(--streak); margin-right: 3px; vertical-align: -2px; }
.lg-rank { font-weight: 700; color: var(--ink-3); text-align: center; }
.lg-rank.top1 { color: #d99a00; }
.lg-rank.top2 { color: #8b95a1; }
.lg-rank.top3 { color: #b8743a; }
.lg-row .t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lg-nick { grid-template-columns: minmax(0, 1fr); }
.lg-nick > * { min-width: 0; }
.lg-form { display: flex; gap: 8px; }
.lg-form .field { flex: 1; min-width: 0; }

/* ---------- 본문 코드 블록 (정처기 코드 읽기 등) ---------- */
.sec pre, details.deep pre { font-family: var(--mono); font-size: 13px; line-height: 1.6; letter-spacing: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; overflow-x: auto; max-width: 100%; white-space: pre; }

/* 실기 필답형 연습 (답 쓰기) */
.wr-item > p { margin: 0; }
.wr-code { font-family: var(--mono); font-size: 13px; line-height: 1.55; letter-spacing: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; overflow-x: auto; max-width: 100%; white-space: pre; overflow-wrap: normal; word-break: normal; }
.wr-in { font-family: var(--mono); letter-spacing: 0; }
textarea.wr-in { min-height: 64px; }
.wr-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-ans { display: grid; gap: 4px; }
.wr-ans p { margin: 0; }
.wr-ans code { white-space: pre-wrap; }
.wr-tables { background: var(--surface); border-radius: var(--r-card); padding: 12px 16px; box-shadow: var(--shadow-sm); }
.wr-tables summary { cursor: pointer; font-weight: 600; }
.wr-tbl { display: grid; gap: 4px; margin-top: 12px; }
.wr-tbl table { font-size: 13px; }
.wr-score > b { font-size: 22px; color: var(--good); }
.wr-score > b.wr-fail { color: var(--warn); }
a.nudge-card { color: inherit; text-decoration: none; }


.escape-in-app { display: grid; gap: 8px; margin-top: 10px; }

.ask-ans .fix { color: var(--ink-2); background: var(--warn-soft); padding: 10px 12px; border-radius: 12px; }
.stack-lg > div:empty, #home-exam:empty { display: none; }
.cram-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.cram-bar .ph-bold { color: var(--warn); }
.cram-bar a { margin-left: auto; font-weight: 700; white-space: nowrap; }
.cram-offer b { color: var(--ink); }
.plan-foot { gap: 8px; flex-wrap: wrap; }
.ask-saved { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--good-soft); color: var(--ink-2); font-size: 14px; }
.ask-saved > .ph-bold { color: var(--good); font-size: 18px; }
#pw-cta .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#pw-ans .model { background: var(--surface); box-shadow: var(--shadow-sm); }
.wk-top { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; color: var(--ink); }
.wk-top b { display: block; font-size: 17px; } .wk-top small { display: block; font-size: 13px; color: var(--ink-3); }
.wk-n { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--sc-soft, var(--accent-soft)); color: var(--sc-ink, var(--accent)); font-weight: 700; }
.wk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 알림 시간 고르기 (앱) */
.remind-hour { grid-template-columns: 1fr; gap: 10px; }
.seg.mini.four { grid-template-columns: repeat(4, 1fr); }

/* 멤버십 (기본·프로) */
.pill.pro { background: var(--accent); color: #fff; }
.event-strip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 14px; text-decoration: none; margin-bottom: 10px; }
.event-strip span { flex: 1; min-width: 0; }
.event-strip b { font-weight: 700; }
.plan-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 16px 20px; color: inherit; text-decoration: none; }
.plan-row small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.plan-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); color: var(--accent); }
.plan-row.is-pro .plan-ico { background: var(--accent); color: #fff; }
.pro-hero .pill { justify-self: start; }
.pro-offer { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-card); background: var(--accent); color: #fff; }
.pro-offer b { font-size: 18px; font-weight: 700; }
.pro-offer small { font-size: 13px; opacity: .9; }
.pro-status { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); }
.pro-status > i { font-size: 22px; color: var(--ink-3); margin-top: 2px; }
.pro-status.good > i { color: var(--accent); }
.pro-status small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.plan-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-card); overflow: hidden; font-size: 14px; }
.plan-table th, .plan-table td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line, var(--surface-3)); }
.plan-table thead th { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.plan-table tbody th { font-weight: 600; white-space: normal; }
.plan-table td { white-space: normal; min-width: 4.6em; word-break: keep-all; }
.plan-table th:first-child { padding-left: 16px; }
.plan-table .pro-cell { color: var(--accent); font-weight: 700; }
.plan-table tr:last-child > * { border-bottom: 0; }
.pro-gate .btn { min-width: 220px; }
.wk-lock .h-card i { color: var(--accent); margin-right: 6px; vertical-align: -2px; }
@media (hover: hover) and (pointer: fine) { :is(.plan-row, .event-strip):hover { background: color-mix(in srgb, var(--accent-soft), var(--accent) 8%); } .plan-row:hover { background: color-mix(in srgb, var(--surface), var(--accent) 5%); } }

/* 연표 (#/timeline, 한능검) */
.tl-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.tl-jump::-webkit-scrollbar { display: none; }
.tl-jump .btn { flex: none; }
.tl-era { scroll-margin-top: 72px; }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.terms-group { scroll-margin-top: 72px; }
.term-row { grid-template-columns: 1fr auto; }
.term-row .t { display: grid; gap: 2px; min-width: 0; }
.term-row .t small { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.term-row .t .term-go { color: var(--accent); font-weight: 600; }
div.term-row { cursor: default; }
.tl-list { list-style: none; margin: 0; padding: 8px 0; background: var(--surface); border-radius: var(--r-card); }
.tl-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 20px 10px 16px; color: inherit; text-decoration: none; transition: background-color 160ms ease; }
.tl-row:active { background: var(--surface-2); }
@media (hover: hover) { .tl-row:hover { background: var(--surface-2); } }
.tl-y { font-size: 13px; font-weight: 700; color: var(--ink-3); padding-top: 2px; }
.tl-t { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; }
.tl-t::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); box-sizing: border-box; }
.tl-t::after { content: ""; position: absolute; left: 4px; top: calc(.5em + 11px); bottom: calc(-20px - .5em); width: 1px; background: var(--line); }
.tl-list li:last-child .tl-t::after { display: none; }
.tl-row.on .tl-t::before { background: var(--accent); border-color: var(--accent); }
.tl-lead { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 6px; background: var(--surface-2); border-radius: 12px; }
.tl-lead li { display: grid; grid-template-columns: 36px 1fr; gap: 6px; font-size: 15px; line-height: 1.45; }
.tl-ex { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.tl-ex .num { display: inline-block; min-width: 84px; font-weight: 700; color: var(--ink-3); }

/* 개념 사진 (body figs, 문제 속 사진) */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.kfig { margin: 0; display: grid; gap: 6px; align-content: start; }
.kfig img, .q-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-3); border-radius: 12px; }
.kfig figcaption { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.kfig figcaption b { font-size: 14px; color: var(--ink); }
.credit { font-size: 11px; color: var(--ink-3); word-break: break-word; }
.credit a { color: inherit; }
.kfig.broken img, .q-fig.broken img { display: none; }
.q-fig { display: grid; gap: 4px; max-width: 360px; margin: 0 auto 12px; }
@media (min-width: 720px) { .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tl-ex .hit { font-weight: 700; }

/* 문제 신고 (문제가 이상해요) */
.rep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.rep .btn.ghost { color: var(--ink-3); padding-inline: 8px; }
.adm-err { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.adm-rep .adm-rq:empty { display: none; }
.adm-rep .adm-rq { grid-column: 1 / -1; margin: 0; }
.adm-ai span { white-space: nowrap; font-size: 10px; letter-spacing: -0.02em; }
.adm-rq .q-fig { max-width: 160px; margin: 6px 0; }

/* =========================================================
   리뉴얼 층 (2026-10, taste-skill v2 앱 화면 규칙)
   - 쉬는 면에는 그림자 대신 1px 테두리, 그라데이션 없음
   - 목록의 아이콘은 색 칠한 네모 없이 회색 선 아이콘 하나
   - 진한 파랑은 주 버튼·진도·선택 표시에만, 과목 색은 진도 막대(데이터)에만
   - 굵기는 400·600·700 세 단계, 700은 제목과 숫자
   ========================================================= */
.card, .sec, .todo-item, .unit-block, .subj-row, .list, .kpi div, .result-stats div, .rv-list,
.exam-mini, .plan-mini, .plan-stats > div, .mode-card, .exam-card, .ob-opt, .nudge-card, .guest-card,
.dr-task, .wr-tables, .badge, .pro-status, .tl-list, .ob-how, .perks, .plan-table, .ask-img, .cert-chip, .stat-chip {
  box-shadow: none; border: 1px solid var(--line);
}
.ob-opt { border-width: 1.5px; }
.ob-opt.on { border-color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) {
  :is(.todo-item, .subj-row, .exam-mini, .mode-card, .plan-mini):hover:not(:disabled) { box-shadow: none; border-color: #cfd0ca; }
}
:root[data-theme="dark"] :is(.todo-item, .subj-row, .exam-mini, .mode-card, .plan-mini):hover { border-color: #3a3a37; }

/* 아이콘 칸: 색 네모를 빼고 회색 선 아이콘만. 자리(격자 칸)는 그대로 둔다 */
:is(.todo-ico, .subj-ico, .unit-ico, .cert-ico, .plan-ico, .exam-ico, .mode-ico, .ob-ico, .perk-ico, .nudge-ico, .acct-ico, .ask-ico, .wk-n) {
  background: none !important; color: var(--ink-3) !important; border-radius: 0; width: auto; justify-self: center;
}
.todo-ico, .subj-ico, .cert-ico, .plan-ico, .exam-ico, .mode-ico, .ob-ico, .acct-ico { font-size: 24px; }
.todo-item.done .todo-ico { color: var(--good) !important; }
.todo-item:not(.done):not(:disabled) .todo-ico.t-warn { color: var(--ink-2) !important; }
.nudge-ico.big, .ask-ico { font-size: 36px; }
.wk-n { color: var(--ink-2) !important; font-size: 17px; }
.resume-card .mode-ico, .plan-row.is-pro .plan-ico { color: var(--accent) !important; }
.lock-card .mode-ico { color: var(--warn) !important; }
.wrong-note .nudge-ico, .empty-note .nudge-ico { color: var(--bad) !important; }
.badge .b-ico { background: none; color: var(--ink-3); }
.badge.on .b-ico { background: none; color: var(--warn); }
.result .trophy { background: none; width: auto; height: auto; color: var(--accent); }

/* 섹션 제목 아이콘·키워드 카드 아이콘도 같은 규칙 */
.sec-ico { background: none; color: var(--ink-3); width: auto; height: auto; font-size: 20px; }
.kw-ico { background: none; color: var(--sc-ink, var(--accent)); width: auto; font-size: 22px; }
.kw-go { background: var(--surface-2); border: 1px solid var(--line); }
.kw-go small { color: var(--ink-3); }

/* 홈: 그라데이션 패널 대신 흰 판 + 공든탑 */
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px 20px; gap: 18px; }
.hero-row { grid-template-columns: 1fr 96px; align-items: end; gap: 16px; }
.hero-t { gap: 8px; }
.hero h1 { font-size: 24px; font-weight: 700; line-height: 1.32; letter-spacing: -0.025em; }
.hero-streak { color: var(--ink-2); font-weight: 600; font-size: 14px; gap: 4px; }
.hero-streak .ph { color: var(--streak); }
.hero-dday { display: block; flex-basis: 100%; background: none; box-shadow: none; color: var(--accent-ink); padding: 0; margin-left: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.tower { margin: 0; display: grid; gap: 8px; justify-items: center; }
.tower > div { display: grid; gap: 3px; justify-items: center; width: 96px; }
.tower i { display: block; width: var(--w); height: var(--h, 8px); border-radius: 3px; background: var(--accent-track); overflow: hidden; }
.tower s { display: block; height: 100%; background: var(--accent); text-decoration: none; }
.tower figcaption { font-size: 13px; color: var(--ink-3); line-height: 1; }
.tower figcaption b { font-size: 17px; color: var(--ink); font-weight: 700; }
.hero-goal { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.hero-goal b { font-size: 15px; color: var(--ink); font-weight: 700; }
.hero-goal b small { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.hero-goal .bar { grid-column: 1 / -1; height: 6px; background: var(--accent-track); }
.hero-goal.done span { color: var(--good); }
.hero-goal.done .bar > i { background: var(--good); }
.hero-cta { font-weight: 700; border-radius: 999px; }

/* 굵기 정리: 800 → 700 */
.h-page, .brand, .hello h1, .c-head h1, .result h1, .ob h1, .gate-t h1, .sheet .s-head, .kw-top h2, .coach-card h2,
.sec-h, .kpi b, .result-stats b, .plan-stats b, .pred-v, .score-ring b, .combo, .lg-rank, .unit-n, .dday, .timer, .pro-offer b,
.choice .n, .ox button, .ring b, .stat-chip { font-weight: 700; }
.h-page { font-size: 24px; letter-spacing: -0.025em; }
.sec-h { font-size: 18px; }

/* 버튼: 알약형, 칠한 버튼은 주 버튼 하나 */
.btn.sm { border-radius: 999px; }
.btn.tint { background: var(--accent-soft); color: var(--accent-ink); }
.btn { font-weight: 600; }
.btn.primary, .btn.lg { font-weight: 700; }

/* 탭(세그먼트): 고른 칸은 흰 칸 + 진한 글자. 과목 색을 탭 바탕에 칠하지 않는다 */
.seg { background: var(--surface-3); border-radius: 999px; }
.seg button, .seg.tabs a { border-radius: 999px; }
.seg button.on, .seg.tabs a.on, .seg.mini button.on, .seg.lg-tabs button.on, .adm-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.seg button.on .ph, .seg button.on i { color: var(--sc, var(--accent)); }

/* 개념 목록 단원 머리: 진도 숫자는 회색 글자, 과목 색은 아이콘이 아니라 진도 막대에 */
.unit-n { background: none; color: var(--ink-3); padding: 0; font-size: 14px; }
.unit-ico { font-size: 22px; }

/* 개념 페이지 머리: 과목 색 판 대신 흰 판, 왼쪽에 과목 색 표시 한 줄 */
.c-head { background: var(--surface); border: 1px solid var(--line); }
.c-ico { background: none; color: var(--sc-ink, var(--accent)); width: auto; height: auto; justify-content: start; font-size: 26px; }
.c-head .crumbs { color: var(--ink-3); font-weight: 600; }
.c-head .pill { background: var(--surface-3); }
.sec-k { color: var(--ink-3); font-weight: 600; }

/* 이어서 하기 카드: 그라데이션 대신 옅은 파랑 한 칸 */
.resume-card { background: var(--accent-soft); border: 1px solid var(--accent-track); }
.resume-card small { color: var(--ink-2); }

/* 아래 고정 버튼 바탕: 흐려지는 띠 대신 평평한 바탕 */
.bottom-cta { background: var(--bg); box-shadow: 0 -1px 0 var(--line); }


/* 배지·알약: 작은 글자 굵기 */
.pill { font-weight: 600; }
.pill.accent { color: var(--accent-ink); }
.pill.pro { background: var(--accent); color: var(--on-accent); }
.pro-offer { color: var(--on-accent); }
.event-strip { color: var(--accent-ink); border: 1px solid var(--accent-track); }

/* 브랜드 표시: 쌓은 돌 아이콘을 칸 없이 파랑으로 */
.brand .mark { background: none; width: auto; height: auto; color: var(--accent); font-size: 22px; }
.stat-chip { height: 34px; }
.cert-chip { height: 30px; }

/* 리그 내 줄: 옅은 파랑 대신 옅은 바탕 한 단계 */
.lg-row.me { background: var(--accent-soft); }
.lg-row.me .t { color: var(--accent-ink); }

/* 입력·카드 테두리 굵기 맞추기 */
.find { box-shadow: none; border: 1px solid #d6d6d0; }
.find:focus-within { box-shadow: 0 0 0 1px var(--accent); border-color: var(--accent); }
.field { border-width: 1px; border-color: #d6d6d0; }
.field:focus { box-shadow: 0 0 0 1px var(--accent); }
:root[data-theme="dark"] :is(.find, .field) { border-color: #3a3a37; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.find, .field) { border-color: #3a3a37; } }

/* 숫자 묶음: 같은 카드 세 개 대신 한 판을 가는 선으로 나눈다 */
:is(.kpi, .result-stats, .plan-stats) { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
:is(.kpi, .result-stats, .plan-stats) > div { border: 0; border-radius: 0; background: none; }
:is(.kpi, .result-stats, .plan-stats) > div + div { border-left: 1px solid var(--line); }
.plan-eyebrow { color: var(--ink-3); font-weight: 600; }

/* 아이폰: 위아래로 튕길 때(바운스) 아래 고정 막대가 함께 들려 그 밑의 바탕이 비치지 않게.
   막대 바탕을 화면 밖 아래로 늘리고, 문서 전체 튕김은 끈다 */
html { background: var(--bg); overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
.tabbar::after, .bottom-cta::after, .sheet > div::after, .kw-card::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 160px; background: inherit; pointer-events: none; }
.sheet > div { position: relative; }
.bottom-cta::after { background: var(--bg); }
/* 아이폰 웹(사파리 26~): 주소창이 접히면 고정 막대가 화면 맨 아래에 붙지 않고, 그 밑(위 ::after 포함)을 사파리가 그리지 않아
   본문이 비친다. 문서 대신 body 가 스크롤되게 해 주소창이 접히지 않게 한다 (index.html 이 ios-web 을 붙인다) */
html.ios-web { height: 100%; overflow: hidden; }
html.ios-web body { height: 100%; overflow-y: auto; overscroll-behavior-y: none; }

/* 아이폰: 위쪽 고정 머리도 화면 맨 위(상태 표시줄·주소창 뒤)부터 채운다.
   예전에는 안전 영역만큼 내려 붙어서, 스크롤하면 그 틈으로 본문이 비치고 머리 글자가 주소창에 걸렸다 */
.topbar, .flow-top { top: 0; padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)); }
.topbar::before, .flow-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 160px; background: inherit; pointer-events: none; }

/* 고른 오답 풀이: 틀리게 고른 보기가 무슨 말인지 (피드백 시트 안) */
.picked { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.picked b { color: var(--ink); font-weight: 700; }
.picked-go { display: inline-flex; align-items: center; gap: 2px; justify-self: start; font-size: 14px; font-weight: 600; color: var(--accent-ink); }

/* 내 정보: 배지는 한 줄만 펼치고 나머지는 접기 */
.badge-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.badge-more summary::-webkit-details-marker { display: none; }
.badge-more[open] summary .ph { transform: rotate(180deg); }
.badge-more summary .ph { transition: transform 200ms var(--ease-out); }
.badge-more > .badges { margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { .badge-more summary:hover { background: var(--surface-3); } }

/* 약점 탭 개념별 정답률: 낮은 정답률은 숫자도 빨강 */
.list-row .pct { font-weight: 600; color: var(--ink-2); }
.list-row .pct.low { color: var(--bad); }

/* =========================================================
   등급(티어)·왕관: 브론즈 → 실버 → 골드 → 플래티넘 → 다이아 → 마스터
   등급 색은 문장(엠블럼)과 등급 카드에만. 금속 느낌은 그라데이션 대신 바탕 한 단계 + 진한 글리프
   ========================================================= */
:root {
  --t-bronze: #a5622d; --t-bronze-soft: #f6ebe1;
  --t-silver: #6c7684; --t-silver-soft: #eef0f3;
  --t-gold: #b07d00; --t-gold-soft: #fbf2d9;
  --t-platinum: #127a74; --t-platinum-soft: #e2f3f1;
  --t-diamond: #2b5fd9; --t-diamond-soft: #e9f0fe;
  --t-master: #c2362c; --t-master-soft: #fbe9e7;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --t-bronze: #e09a62; --t-bronze-soft: #33241a; --t-silver: #b9c1cc; --t-silver-soft: #262a30; --t-gold: #f0c34a; --t-gold-soft: #332a12;
  --t-platinum: #4cc9bf; --t-platinum-soft: #12302d; --t-diamond: #7ea6ff; --t-diamond-soft: #1a2440; --t-master: #ff7a6b; --t-master-soft: #3a1c19; } }
:root[data-theme="dark"] {
  --t-bronze: #e09a62; --t-bronze-soft: #33241a; --t-silver: #b9c1cc; --t-silver-soft: #262a30; --t-gold: #f0c34a; --t-gold-soft: #332a12;
  --t-platinum: #4cc9bf; --t-platinum-soft: #12302d; --t-diamond: #7ea6ff; --t-diamond-soft: #1a2440; --t-master: #ff7a6b; --t-master-soft: #3a1c19; }
.t-bronze { --tc: var(--t-bronze); --tc-soft: var(--t-bronze-soft); }
.t-silver { --tc: var(--t-silver); --tc-soft: var(--t-silver-soft); }
.t-gold { --tc: var(--t-gold); --tc-soft: var(--t-gold-soft); }
.t-platinum { --tc: var(--t-platinum); --tc-soft: var(--t-platinum-soft); }
.t-diamond { --tc: var(--t-diamond); --tc-soft: var(--t-diamond-soft); }
.t-master { --tc: var(--t-master); --tc-soft: var(--t-master-soft); }

.emblem { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tc-soft); color: var(--tc); font-size: 16px; line-height: 1; }
.emblem.sm { width: 22px; height: 22px; font-size: 13px; }
.emblem.xs { width: 20px; height: 20px; font-size: 12px; }
.emblem.lg { width: 64px; height: 64px; font-size: 34px; }
.stat-chip.xp { color: var(--ink); text-decoration: none; padding-left: 5px; gap: 5px; }

.rank-card { display: grid; gap: 16px; }
.rank-card .profile { grid-template-columns: 64px 1fr; }
.rank-card .h-card { font-size: 20px; color: var(--tc); }
.rank-nick { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.rank-bar { background: var(--tc-soft); }
.rank-bar > i { background: var(--tc); }
.rank-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.rank-ladder li { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center; }
.rank-ladder li .emblem { opacity: .4; }
.rank-ladder li.done .emblem, .rank-ladder li.now .emblem { opacity: 1; }
.rank-ladder li.now { color: var(--ink); }
.rank-ladder li.now .emblem { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tc); }

.crown { font-size: 15px; margin-left: 3px; vertical-align: -2px; }
.crown.c1 { color: #d4a017; } .crown.c2 { color: #8f99a6; } .crown.c3 { color: #b8743a; }
.lg-row .t { display: flex; align-items: center; gap: 8px; }
.lg-who { display: grid; min-width: 0; }
.lg-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; overflow-wrap: anywhere; }
.lg-row.me .pill.accent { background: var(--surface); }
.lg-tier { font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* 찾는 자격증 요청 (자격증 목록 아래) */
.wish-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wish-opts .btn.on { background: var(--accent-soft); border-color: var(--accent-track); color: var(--accent-ink); }
.wish-opts .btn i { margin-right: 2px; }
.wish-opts span.btn { cursor: default; }
.wish-form { display: flex; gap: 8px; }
.wish-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; height: 40px; padding: 0 12px; border-radius: var(--r-input); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.wish-form .btn { flex: none; }

/* 개념 도식 (js/dia.js): 층·흐름·주고받기·칸. 테두리와 연한 바탕만, 강조는 청금석 한 색 */
.dia { margin: 6px 0 0; display: grid; gap: 8px; min-width: 0; }
.dia figcaption { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.dia b { font-weight: 700; color: var(--ink); }
.dia span { color: var(--ink-2); }
.dia-stack, .dia-flow { list-style: none; margin: 0; padding: 0; display: grid; }
.dia-stack { gap: 4px; }
.dia-stack li { display: grid; grid-template-columns: minmax(88px, 36%) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; line-height: 1.45; }
.dia-flow { gap: 22px; }
.dia-flow li { position: relative; display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; line-height: 1.45; }
.dia-flow li + li::before { content: ""; position: absolute; left: 22px; top: -18px; width: 2px; height: 14px; background: var(--ink-3); border-radius: 1px; }
.dia-flow li + li::after { content: ""; position: absolute; left: 17px; top: -8px; width: 12px; height: 7px; background: var(--ink-3); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dia-stack li.on, .dia-flow li.on { background: var(--accent-soft); border-color: var(--accent-track); }
.dia-stack li.on b, .dia-flow li.on b { color: var(--accent-ink); }
.dia-seq { display: grid; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.dia-actors { display: flex; justify-content: space-between; gap: 12px; }
.dia-actors b { padding: 4px 12px; border-radius: 999px; background: var(--surface-3); font-size: 13px; }
.dia-msg { display: grid; gap: 4px; padding: 0 6px; }
.dia-lbl { display: grid; justify-items: center; text-align: center; font-size: 13px; line-height: 1.4; }
.dia-msg i { position: relative; display: block; height: 2px; background: var(--ink-3); border-radius: 1px; }
.dia-msg i::after { content: ""; position: absolute; top: -5px; width: 10px; height: 12px; background: var(--ink-3); }
.dia-msg.ltr i::after { right: -2px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dia-msg.rtl i::after { left: -2px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.dia-cells { display: grid; gap: 12px; }
.dia-row { display: grid; gap: 6px; }
.dia-rl { font-size: 13px; color: var(--ink-3); }
.dia-gs { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.dia-g { display: grid; gap: 4px; justify-items: center; }
.dia-c { display: flex; }
.dia-c span { min-width: 30px; height: 34px; padding: 0 6px; display: grid; place-items: center; border: 1px solid var(--line); margin-left: -1px; background: var(--surface); font: 600 14px/1 var(--mono); color: var(--ink); }
.dia-c span:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.dia-c span:last-child { border-radius: 0 8px 8px 0; }
.dia-c span:only-child { border-radius: 8px; }
.dia-c span.on { position: relative; background: var(--accent-soft); border-color: var(--accent-track); color: var(--accent-ink); }
.dia-g small { font-size: 12px; color: var(--ink-3); }
/* 용어 뜻 카드의 사진 */
.kw-fig { margin: 4px 0 0; display: grid; gap: 4px; }
.kw-fig img { display: block; width: 100%; max-height: 220px; object-fit: contain; background: var(--surface-3); border-radius: 12px; }
.kw-fig small { font-size: 12px; color: var(--ink-3); }

/* =========================================================
   정돈 층 (2026-11, impeccable 평가 반영)
   - 개념 페이지는 상자를 겹겹이 두지 않고 교과서처럼: 섹션은 위 가는 줄과 여백으로 나눈다
   - 상태는 글자 하나로(배경 칩 겹치기 없이), 빨강은 오답·과락에만
   - 머리띠의 숫자 칩은 테두리 없이
   ========================================================= */
.c-head { background: none; border: 0; border-radius: 0; padding: 6px 2px 2px; }
.c-head .pill { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sec { --surface-2: var(--surface); background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 28px 2px 4px; gap: 16px; }
.sec :is(.analogy, .fig, .mission, details.deep, .onote, .fb, .model, .locked-box, .tl-lead) { box-shadow: inset 0 0 0 1px var(--line); }
.sec .choice:not(.picked):not(.right):not(.wrong), .sec .ox button:not(.picked):not(.right):not(.wrong) { box-shadow: inset 0 0 0 1px var(--line); background-clip: padding-box; }
.sec-h { font-size: 19px; gap: 8px; }
.sec-ico { font-size: 20px; color: var(--ink-3); }

/* 개념 목록: 상태는 아이콘 옆 글자로만, 빈출은 테두리 태그 */
.crow .meta .pill:not(.hot) { background: none; padding: 0; height: auto; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.crow .meta .pill.warn { color: var(--warn); }
.crow .meta .pill.subj { color: var(--sc-ink, var(--accent-ink)); }
.pill.hot { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); height: 22px; padding-inline: 7px; }
.crow .meta { gap: 8px; }

/* 머리띠: 연속·XP 숫자는 칩 테두리 없이 글자로, 누르는 칸은 44px */
.topbar .stat-chip { background: none; border: 0; height: 44px; padding-inline: 6px; }
.seg button { color: var(--ink-2); }
.ob-dots i:not(.on) { background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* 리그 연속 공부: 최고 기록 아래 지금 이어 가는 날수 */
.lg-row > .num { text-align: right; }
.lg-now { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* 자격증 사다리: 다른 자격증에서 이어받을 개념 수 */
.cert-row small .ladder { color: var(--good); font-weight: 600; }

/* 개념 페이지 한 장씩 넘기기 (app.js pageConcept) */
.pg-toggle { cursor: pointer; border: 0; font-family: inherit; }
.paged .c-ico { display: none; }
.paged .cp-steps, .paged .cp-label { display: none; }
.pg-prog { display: flex; align-items: center; gap: 8px; }
.pg-prev { margin-left: -10px; flex: none; }
.pg-prev:disabled { opacity: .3; }
.pg-nav[hidden] { display: none; }
.pg-track { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pg-track i { display: block; height: 100%; border-radius: inherit; background: var(--sc, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.paged .pg-off { display: none !important; }
.paged > .sec { border-top: 0; padding-top: 8px; }
.paged #qs > .q-item { border-top: 0; padding-top: 0; }
.pg-in { animation: pgIn 260ms var(--ease-out, ease) both; }
@keyframes pgIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pg-in { animation: none; } .pg-track i { transition: none; } }
.seg.two { grid-template-columns: repeat(2, 1fr); }
.fb-count { text-align: right; }
.inbox-item.done { opacity: .6; }
.inbox-item .btn { justify-self: start; }
.inbox-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.inbox-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; overflow-wrap: anywhere; }
.inbox-who a { color: var(--accent); }
.inbox-sub { flex-basis: 100%; }