/*
 * 쪼개보카 화면 스타일. 정본: docs/04-design-guide.md
 * 너비: S < 600 (한 열·하단 탭) / M 600~839 (두 열·하단 탭) / X ≥ 840 (왼쪽 메뉴·두 창)
 * 화면 코드는 font-family 를 직접 쓰지 않고 변수만 쓴다 (D-54).
 */
:root {
  /* 색 체계 v2(D-228): 정본 docs/04 「색」·「디자인 시스템」, 토큰 wsh.morph.design/system/tokens.css와 같은 값.
     화면 코드는 Semantic 토큰을 쓰고 Atomic을 직접 쓰지 않는다. 옛 이름은 맨 아래 별칭으로 이어 화면 코드를 한 번에 바꾸지 않는다. */
  /* ── Atomic ───────────────────────────── */
  --violet-50: #F6F3FF; --violet-100: #EDE7FF; --violet-200: #DCD1FD; --violet-300: #C3B2F7; --violet-400: #9F87EC;
  --violet-500: #7A5FDC; --violet-600: #5B3CC4; --violet-700: #4A2FA8; --violet-800: #3D2685; --violet-900: #2A1A5E;
  --neutral-0: #FFFFFF; --neutral-50: #F8F9FB; --neutral-100: #F2F3F6; --neutral-200: #E5E7EB; --neutral-300: #CFD3DA;
  --neutral-400: #B8BCC7; --neutral-500: #8B8F9C; --neutral-600: #6B6F7D; --neutral-700: #545867; --neutral-800: #2E313C; --neutral-900: #15171F;
  --gold-100: #FEF3C7; --gold-400: #F59E0B; --gold-700: #B45309; --gold-900: #78350F;
  --sky-100: #E2F2FC; --sky-500: #1592D6; --sky-800: #0F4E8C;
  --coral-100: #FFE6DD; --coral-500: #F0643C; --coral-800: #8A2B0F;
  --green-100: #DCF4E8; --green-500: #22A06B; --green-700: #1F7A4C; --green-800: #0F5B3A;
  --red-50: #FDECEC; --red-600: #C62828; --red-800: #8E1B1B;
  --mopi-body: #B9A7F2; --mopi-deep: #8E7BC7; --mopi-tint: #DED4FF;

  /* ── Semantic: Foreground(글자·아이콘) ─────── */
  --fg-strong: var(--neutral-900);
  --fg-primary: var(--neutral-900);
  --fg-secondary: var(--neutral-700);
  --fg-tertiary: var(--neutral-600); /* 메타 글자 대비 4.5 이상(흰 바탕 5.2:1). 시안 neutral-500은 3.23:1이라 한 단계 진하게(PM 11-12) */
  --fg-quaternary: var(--neutral-400);
  --fg-inverse: var(--neutral-0);
  --fg-brand: var(--violet-600);
  --fg-brand-inverse: var(--neutral-0);
  --fg-positive: var(--green-700);
  --fg-cautionary: var(--gold-700);
  --fg-negative: var(--red-600);
  --fg-disable: var(--neutral-400);
  --fg-inactive: var(--neutral-500);
  --fg-reward: var(--gold-700);

  /* ── Semantic: Background · Surface ─────── */
  --bg-primary: var(--neutral-0);
  --bg-secondary: var(--neutral-50);
  --surface-primary: var(--neutral-0);
  --surface-secondary: var(--neutral-100);
  --surface-tertiary: var(--neutral-50);
  --surface-strong: var(--neutral-200);
  --surface-inverse: var(--neutral-900);
  --surface-elevated: var(--neutral-0);
  --surface-brand: var(--violet-600);
  --surface-brand-strong: var(--violet-700);
  --surface-brand-heavy: var(--violet-800);
  --surface-brand-subtle: var(--violet-50);
  --surface-positive: var(--green-100);
  --surface-cautionary: var(--gold-100);
  --surface-negative: var(--red-50);
  --surface-disable: var(--neutral-100);
  --surface-reward: var(--gold-100);

  /* ── Semantic: Line ─────── */
  --line-primary: var(--neutral-200);
  --line-secondary: var(--neutral-300);
  --line-tertiary: var(--neutral-100);
  --line-brand: var(--violet-600);
  --line-focus: var(--violet-600);
  --line-negative: var(--red-600);

  /* ── Semantic: Effect ─────── */
  --effect-dimmer: rgba(21, 23, 31, 0.4);
  --effect-ground: rgba(21, 23, 31, 0.08); /* 모피·배지 접지 그림자만. 카드·버튼 그림자 금지 */

  /* ── 쪼개보카 고유: 조각(학습 의미 전용) ─────── */
  /* 조각 3색 v3(대표 결정 11-12): Color Hunt 팔레트 ff8383·fff574·a1d6cb·a19ad3에서 연보라 자리는 모피, 나머지 셋을 조각에.
     선은 원색(대비가 낮아 보조 신호), 종류 글자는 같은 색 계열 진한 톤(7:1). 늘 글자 이름표와 함께 쓴다. */
  --mint-50: #E9F8F4; --mint-200: #A1D6CB; --mint-800: #096256;
  --coralpop-50: #FFEFEE; --coralpop-200: #FF8383; --coralpop-800: #A12E36;
  --lemon-50: #FFFBD9; --lemon-200: #FFF574; --lemon-800: #6A5600;
  --piece-prefix-line: var(--mint-200); --piece-prefix-fg: var(--mint-800); --piece-prefix-surface: var(--mint-50);
  --piece-root-line: var(--coralpop-200); --piece-root-fg: var(--coralpop-800); --piece-root-surface: var(--coralpop-50);
  --piece-suffix-line: var(--lemon-200); --piece-suffix-fg: var(--lemon-800); --piece-suffix-surface: var(--lemon-50);
  --reward-art: var(--gold-400);

  /* ── 글자 단계 ─────── */
  --type-display: 800 32px/1.25 var(--font-ui);
  --type-title1: 700 24px/1.3 var(--font-ui);
  --type-title2: 700 20px/1.35 var(--font-ui);
  --type-heading: 700 18px/1.4 var(--font-ui);
  --type-body1: 500 16px/1.6 var(--font-ui);
  --type-body2: 500 15px/1.6 var(--font-ui);
  --type-label: 700 14px/1.4 var(--font-ui);
  --type-caption1: 500 13px/1.5 var(--font-ui);
  --type-caption2: 500 12px/1.5 var(--font-ui);
  --type-term-l: 700 40px/1.15 var(--font-term);
  --type-term-m: 700 24px/1.25 var(--font-term);
  --type-term-s: 700 19px/1.3 var(--font-term);

  /* ── 모서리(모션 토큰은 아래 --t-*) ─────── */
  --radius-xs: 8px; --radius-s: 12px; --radius-m: 16px; --radius-l: 20px; --radius-full: 999px;

  /* ── 기존 app.css 이름 → 의미 토큰(구현 때 화면 코드를 한 번에 바꾸지 않아도 되게) ─────── */
  --bg: var(--bg-primary); --card: var(--surface-primary); --line: var(--line-primary); --line-strong: var(--line-secondary);
  --fill: var(--surface-secondary); --fill-soft: var(--surface-tertiary);
  --ink: var(--fg-primary); --ink-2: var(--fg-secondary); --ink-3: var(--fg-tertiary);
  --accent: var(--surface-brand); --accent-hover: var(--surface-brand-strong); --accent-ink: var(--surface-brand-heavy); --accent-bg: var(--surface-brand-subtle); --on-accent: var(--fg-inverse);
  --accent-2: var(--fg-reward); --accent-2-bg: var(--surface-reward); --accent-2-ink: var(--gold-900);
  --error: var(--fg-negative); --error-bg: var(--surface-negative); --notice-bg: var(--surface-cautionary); --notice-ink: var(--gold-900);
  --prefix-bg: var(--piece-prefix-surface); --prefix-line: var(--piece-prefix-line); --prefix-ink: var(--piece-prefix-fg);
  --root-bg: var(--piece-root-surface); --root-line: var(--piece-root-line); --root-ink: var(--piece-root-fg);
  --suffix-bg: var(--piece-suffix-surface); --suffix-line: var(--piece-suffix-line); --suffix-ink: var(--piece-suffix-fg);
  /* 시안 토큰에 없는 옛 이름(D-228 별칭 보충). 리그 무대는 「깊은 보라로 맞추기」(D-228 무대 색, PM 결정 11-12): 주 색 보라의 가장 깊은 단계. */
  --line-dash: var(--neutral-400); --accent-2-hover: var(--gold-900); --mopi-body-deep: var(--mopi-deep);
  --stage-bg: var(--violet-900); --stage-bg-2: #1C1142; --stage-block: var(--violet-800); --stage-block-top: var(--violet-700); --stage-glow: #4A2FA8; --stage-ink: var(--violet-200);
  --stage-curtain: #3B2A7A; --stage-curtain-2: #33246B;
  --gold: #E2B33C; --gold-deep: #B98A1E; --gold-ink: #1C1142;
  --font-ui: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-term: 'Source Serif 4', Georgia, serif;
  --letter-spacing: -0.5px;
  --w-ui: 500;
  --radius-card: 20px;
  --radius-block: 12px;
  --radius-btn: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  /* 간격 규칙(polish 간격 2차, docs/04 「간격 규칙」). 폭 구간 S ~599 / M 600~839 / X 840~. 관리자 화면은 admin.css가 예전 값으로 되돌린다. */
  --gutter: var(--space-5);              /* 페이지 좌우 여백 S 20 / M 24 / X 32 */
  --pad-page-top: var(--space-6);        /* 페이지 위 여백 S·M 24 / X 32 */
  --gap-title-content: var(--space-6);   /* 페이지 제목 ↔ 첫 내용 24 */
  --gap-section: var(--space-8);         /* 섹션 사이 S·M 32 / X 40 */
  --gap-card: var(--space-3);            /* 같은 섹션 카드 사이 S·M 12 / X 16 */
  --pad-card: var(--space-5);            /* 카드 안 패딩 S 20 / M·X 24 */
  --pad-row-one: var(--space-3);         /* 한 줄 목록 세로 12(최소 56) */
  --pad-row-two: var(--space-4);         /* 두 줄 목록 세로 16(최소 64) */
  --row-height-two: calc(var(--menu-height) + var(--space-2));
  --gap-card-body: var(--space-3);       /* 카드 제목 ↔ 본문 12 */
  --gap-section-title: var(--space-3);   /* 묶음 제목 ↔ 첫 카드 12 */
  --gap-cta-list: var(--space-3);        /* 주 버튼 ↔ 바로 아래 목록(한 흐름) 12 */
  --control-height: 52px; --control-compact: 44px; --menu-height: 56px;
  --width-form: 440px; --width-reading: 640px; --width-app: 1280px;
  --t-fast: 0.12s;
  --t-base: 0.2s;
  --t-slow: 0.3s;
  /* 젤리 결(D-226): 자리를 옮기는 것·모피 결 출렁임. 곡선이 목표를 살짝 지나쳤다 돌아온다(nav-transition.css 선택 칸과 같은 값) */
  --t-jelly: 0.52s;
  --ease-jelly: cubic-bezier(0.3, 1.25, 0.5, 1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

body.font-locale-ja { --font-ui: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; --letter-spacing: 0; }
body.font-locale-zh-hant { --font-ui: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --letter-spacing: 0; }
body.font-locale-vi { --font-ui: 'Source Sans 3', 'Pretendard', sans-serif; --letter-spacing: 0; }
body.font-locale-en { --font-ui: 'Source Sans 3', 'Pretendard', sans-serif; --letter-spacing: 0; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: var(--w-ui);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing);
  -webkit-tap-highlight-color: transparent;
}
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ja), :lang(zh-Hant) { word-break: normal; line-break: strict; }
:lang(en), :lang(vi) { word-break: normal; overflow-wrap: anywhere; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.3; text-wrap: balance; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
p { margin: 0; }
a { color: var(--ink); text-decoration: none; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.icon { display: inline-block; vertical-align: -4px; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
.strong { font-weight: 700; }
.accent { color: var(--accent); font-weight: 700; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.note { font-size: 13px; color: var(--ink-2); }
.business-lines { font-size: 12px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.business-info.narrow { width: 100%; max-width: var(--width-reading); margin-top: var(--space-8); gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: var(--gap-card-body); }
.pad { padding: var(--pad-card); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.term-font { font-family: var(--font-term); font-weight: 600; letter-spacing: 0; }
.badge { display: inline-block; font-size: 13px; padding: 2px 8px; border-radius: 8px; background: var(--fill); color: var(--ink-2); white-space: nowrap; }
.badge-reviewed { background: var(--notice-bg); color: var(--notice-ink); }
.badge-published { background: var(--accent-bg); color: var(--accent-ink); }
.badge-draft-tag { margin-left: 6px; vertical-align: 2px; }

/* 앱 안에서만 / 브라우저에서만 보이는 것 (bridge.js 가 html.is-app 을 붙인다) */
html:not(.is-app) .app-only { display: none; }
.is-app .web-only { display: none; }

/* 버튼: 주 버튼은 화면에 하나 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); max-width:100%; min-width:0; padding: 12px 20px; text-align:center; overflow-wrap:anywhere;
  border-radius: var(--radius-btn); border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--fill-soft); border-color: var(--line-strong); }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--fill); border-color: var(--line); color: var(--ink-2); cursor: default; }
.btn-block { width: 100%; }
.btn-small { min-height: var(--control-compact); padding: 6px 12px; font-size: 14px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: -12px; border-radius: 12px; color: var(--ink); background: none; border: 0; }

/* 틀: 탭 화면 */
.shell { min-height: 100dvh; }
.main { width: 100%; min-width: 0; max-width: var(--width-reading); margin: 0 auto; padding: var(--pad-page-top) var(--gutter) calc(96px + var(--safe-bottom)); }
.main-focus, .main-plain { padding-bottom: calc(32px + var(--safe-bottom)); }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--card); border-top: 1px solid var(--line);
  padding: 4px 8px calc(8px + var(--safe-bottom));
}
.nav-brand { display: none; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 0; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.nav-item.is-active { color: var(--accent); font-weight: 700; }
.nav-info { display: none; }

.page { display: flex; flex-direction: column; gap: var(--gap-title-content); min-width: 0; }
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.page-head > p { max-width: var(--width-reading); color: var(--ink-2); }
.narrow { width: 100%; max-width: var(--width-form); margin-inline: auto; }
.reading-page { width: 100%; max-width: var(--width-reading); margin-inline: auto; }
.page-head .back-link { margin-bottom: var(--space-1); }

/* 홈 */
.home-head { display: flex; justify-content: space-between; align-items: center; }
.home-title { font-size: 20px; }
.hero { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.hero-row { display: flex; align-items: baseline; gap: 10px; }
.hero-num { font-family: var(--font-term); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: 0; }
.home-block-title { font-size: 18px; }
.home-block-foot { margin-top: auto; }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 홈 카드(D-153): 파셜 하나 = .home-card 하나 */
.home-card { min-width: 0; }
.home-card[hidden] { display: none; }
.home-card-wide { grid-column: 1 / -1; }
/* 상황 카드(D-160): 복귀 환영·연속 마일스톤 중 한 장, 다음 공부 버튼 위 */
.home-situation:not(.is-open) { display: none; }
.home-situation-card { display: flex; align-items: center; gap: var(--space-4); background: var(--accent-bg); border-color: transparent; }
.home-situation-card[hidden] { display: none; }
/* 마일스톤은 보상이라 세컨드 보라(D-163). D-214에서 차분하게: 흰 카드(넓은 화면 히어로 안은 테두리 없는 --fill-soft 띠) + 제목 앞 작은 보라 점 + 보라 제목 글씨.
   점과 제목은 한 부품이라 보라 「한 곳」이다. 홈의 보라 강조는 마일스톤·주간 게이지 두 곳뿐(한 문제 정답은 조각 표시 옆 정답 상태색이라 보라 금지) */
.home-milestone { background: var(--card); border: 1px solid var(--line); }
.home-milestone .home-block-title { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-2-ink); }
.home-milestone .home-block-title::before { content: ""; flex: 0 0 var(--space-2); width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--accent-2); }
.home-situation-card { padding: var(--pad-card); gap: var(--space-3); }
.home-situation-art { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
.home-situation-copy { gap: 6px; align-items: flex-start; min-width: 0; }
.home-situation-copy .home-block-title { font-size: 16px; }
.home-situation-copy .muted { font-size: 14px; }
.home-situation-actions { flex-wrap: wrap; gap: var(--space-2); }
/* 끝낸 카드·진행 요약은 한 줄로 접힌다(D-160). 펼침은 사용자가 고른다 */
.home-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: var(--control-compact); }
.home-fold .home-block-title { margin: 0; }
.home-fold-note { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.home-fold svg { flex: 0 0 auto; transition: transform .2s ease; }
.home-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
.home-card.is-folded { align-self: start; }
@media (prefers-reduced-motion: reduce) { .home-fold svg { transition: none; } }
.home-gauge { height: 12px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.home-gauge > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--surface-brand); } /* 진행 막대 = 주 색(D-228) */
.home-gauge-value { font-size: 18px; color: var(--fg-brand); }
/* 오늘의 한 문제는 홈 맨 위 카드(D-165): 모피 48px, 말풍선 안에 질문 + 색칠한 단어, 보기 2×2 44px로 높이를 줄인다 */

/* 이번 주 한 블록(D-160 보완): 게이지 → 「목표까지 n일 | 연속 n일 · 보호 n개」 한 줄 → 요일 7칸 → 오늘의 퀘스트 세 줄 + 「퀘스트 보기」 한 줄 */
.home-gauge-row { align-items: baseline; flex-wrap: wrap; row-gap: 2px; }
.home-week-stats { margin: 0; text-align: right; white-space: nowrap; }
.home-week-quests { gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.home-quest-title { font-size: 15px; margin: 0; }
.home-week-quests .quest-list { gap: var(--space-3); }
.home-week-quests .home-quest-link { min-height: 44px; padding: 8px 0 0; border-top: 1px solid var(--line); }

.home-progress-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.home-bar { height: 8px; margin-top: 6px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.home-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.home-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); text-align: center; font-size: 13px; color: var(--ink-2); }
.home-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.home-day > i { display: block; width: 100%; max-width: 28px; aspect-ratio: 1; border-radius: 50%; background: var(--fill); }
.home-day.is-done > i { background: var(--accent); }
.home-day.is-today > i { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-day.is-today { color: var(--ink); font-weight: 700; }
.cards { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.row-card { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--menu-height); padding: var(--pad-row-one) var(--pad-card); color: var(--ink); text-decoration: none; }
/* 두 줄 줄(제목 + 보조 줄): 세로 16·최소 64 */
.row-card:has(> .stack) { min-height: var(--row-height-two); padding-block: var(--pad-row-two); }
.row-card > .stack { gap: var(--space-1); }
.row-card + .row-card { border-top: 1px solid var(--line); }
/* 목록 카드 안 구분선은 카드 패딩만큼 들여 1px(polish 간격 2차). 숨긴 줄은 건너뛴다 */
.cards > * { position: relative; }
.cards > .row-card + .row-card { border-top: 0; }
.cards > :not([hidden]) ~ :not([hidden])::before, .settings-list > :not([hidden]) ~ :not([hidden])::before {
  content: ""; position: absolute; top: 0; left: var(--pad-card); right: var(--pad-card); height: 1px; background: var(--line); pointer-events: none;
}
/* 홈 바로 가기 줄(polish S3·L1, 11-10): 왼쪽 「아이콘+제목 15px(+둘째 줄)」 | 오른쪽 「숫자·배지 + ›」. › 굵기·색은 모든 줄이 같다. */

.home-row-meta { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; color: var(--ink-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-row-meta > .icon { color: var(--ink-3); transition: transform var(--t-fast); }

@media (prefers-reduced-motion: reduce) { .home-row-meta > .icon { transition: none; } }
.toast { position: fixed; left: 50%; bottom: calc(92px + var(--safe-bottom)); transform: translateX(-50%); max-width: calc(100% - 40px); background: var(--ink); color: var(--fg-inverse); padding: 12px 16px; border-radius: 12px; font-size: 14px; z-index: 20; }
/* 축하 색종이(D-179): 화면 위에 덮되 누르기를 가로막지 않는다. */
.celebrate-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.toast.is-static { position: static; transform: none; max-width: none; }

/* 학습 공통 */
.focus-bar { display: flex; align-items: center; gap: 12px; }
.progress { flex-grow: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress-fill { width: 0; height: 100%; background: var(--accent); border-radius: 3px; transition: width var(--t-slow); }
.stage { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.stage-actions { position: sticky; bottom: 0; padding: 12px 0 calc(8px + var(--safe-bottom)); background: linear-gradient(to top, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent)); display: flex; flex-direction: column; gap: 12px; }
.kind-label { font-size: 13px; color: var(--ink-2); }

/* 조각 (D-133): 색은 종류 전용. 읽는 곳은 형광 밑줄, 누르는 곳은 이름표 달린 단어 타일 */
.block-prefix { --piece-bg: var(--prefix-bg); --piece-line: var(--prefix-line); --piece-ink: var(--prefix-ink); }
.block-root { --piece-bg: var(--root-bg); --piece-line: var(--root-line); --piece-ink: var(--root-ink); }
.block-suffix { --piece-bg: var(--suffix-bg); --piece-line: var(--suffix-line); --piece-ink: var(--suffix-ink); }
.block { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; font-family: var(--font-term); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: 0; color: var(--ink); transition: transform var(--t-fast), opacity var(--t-fast); }
.block-text { padding: 0 2px; background: linear-gradient(transparent 58%, var(--piece-bg) 58%); box-shadow: inset 0 -4px 0 var(--piece-line); }
.block-big { font-size: 40px; }
.block-big .block-text { box-shadow: inset 0 -5px 0 var(--piece-line); }
.block-kind { font-family: var(--font-ui); font-weight: 700; font-size: 11px; line-height: 1.3; color: var(--piece-ink); padding-left: 2px; }
.block-tile { min-height: 52px; padding: 8px 14px 7px; border-radius: 14px; border: 1.5px solid var(--line); border-bottom-width: 4px; background: var(--card); font-size: 19px; }
.slots .block-tile { background: var(--piece-bg); border-color: var(--piece-line); }
.slots .block-tile .block-text { background: none; }
button.block:active { transform: translateY(2px); }
.block.is-used { opacity: 0.35; }
.block.is-wrong { border-color: var(--error); box-shadow: 0 0 0 2px var(--error-bg); }
/* 오답 튕김(D-168): 돌아온 타일과 비워진 칸은 색으로도 알린다. 움직임은 app.js bounce()가 transform으로만 그린다. */
.block.is-returned { border-color: var(--error); box-shadow: 0 0 0 2px var(--error-bg); }
.block.is-bouncing { position: relative; z-index: 2; transform-origin: 50% 100%; pointer-events: none; }
.slot.is-wrong { border-color: var(--error); background: var(--error-bg); }
/* 조각은 맞고 순서만 다를 때: 빨강 대신 안내 색 */
.slot.is-wrong.is-order { border-color: var(--notice-ink); background: var(--notice-bg); }
.block.is-returned.is-order { border-color: var(--notice-ink); box-shadow: 0 0 0 2px var(--notice-bg); }
.part-sum { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
.part { display: inline-flex; flex-direction: column; gap: 2px; }
.part .block { font-size: 21px; }
.part-kind { font-size: 11px; font-weight: 700; color: var(--piece-ink); padding-left: 2px; }
.part-meaning { font-size: 12px; color: var(--ink-2); padding-left: 2px; }
.part-op { font-size: 20px; line-height: 1.3; color: var(--ink-3); }
.term-piece .block { display: inline; font-size: inherit; line-height: inherit; font-weight: inherit; }
.term-piece .block-text { padding: 0; }

.piece-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.piece-meaning { font-size: 24px; font-weight: 700; }
.piece-meta { display: flex; flex-direction: column; gap: 4px; }
.piece-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--font-term); font-weight: 600; letter-spacing: 0; font-size: 15px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.story { border-left: 3px solid var(--line); padding: 4px 0 4px 14px; display: flex; flex-direction: column; gap: 6px; }
.story[hidden] { display: none; }

/* 새 조각 짐작 (D-137): 모든 폭에서 가운데 한 열. 단어 속 조각 → 식 → 보기 2개 → 공개 */
.decode-goal { align-self: center; width: 100%; max-width: var(--width-reading); margin: 10px auto 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.page-learn .stage.piece-stage { gap: 16px; }
.piece-stage .piece-card { align-items: center; text-align: center; gap: 12px; padding: 20px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.piece-stage .listen-row { justify-content: center; }
.piece-word { margin: 0; font-family: var(--font-term); font-weight: 700; font-size: clamp(28px, 8vw, 44px); line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; }
.piece-word .block { display: inline; font-size: inherit; line-height: inherit; }
.piece-word .block-text { padding: 0; box-shadow: inset 0 -6px 0 var(--piece-line); }
.piece-word-rest { color: var(--ink-3); }
.piece-sum { justify-content: center; }
.piece-sum .part { align-items: center; }
/* 지금 조각이 아닌 조각은 큰 조각 글자(22px 굵게, 큰 글씨 3:1)만 흐리게 한다. 11~12px 종류·뜻 라벨까지 흐리면 접미사 라벨이 #7ba593(2.9:1)이 돼 AA에 못 미친다(QA 11-09). */
.piece-sum .part:not(.is-current) > .block { opacity: .55; }
/* 12px 「?」는 작은 글씨라 AA(4.5:1)를 맞춘다. 24px 굵은 「?」는 큰 글씨(3:1)라 --ink-3를 유지한다. */
.part-meaning.is-unknown { color: var(--ink-2); font-weight: 700; }
.piece-meaning.is-unknown { color: var(--ink-3); font-weight: 700; }
.piece-sum .is-current .part-meaning:not(.is-unknown) { color: var(--piece-ink); font-weight: 700; }
.guess-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice.guess-choice { text-align: center; font-size: 17px; border-width: 1.5px; border-bottom-width: 4px; overflow-wrap: anywhere; }
.guess-choice:disabled { cursor: default; }
/* 정답 표시는 피드백 띠(.feedback-ok)와 같은 남색 상태색. 조각 3색(초록=접미사)은 종류 전용이라 쓰지 않는다(D-131·D-133, D-181). */
.guess-choice.is-right { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); opacity: 1; }
.guess-choice.is-picked { border-color: var(--error); color: var(--error); }
.guess-choice:disabled:not(.is-right):not(.is-picked) { opacity: .45; }
.piece-reveal[hidden] { display: none; }
.mopi-more { margin-top: 6px; }
.mopi-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); min-height: var(--control-compact); display: flex; align-items: center; }
.mopi-more[open] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* 완료 조각 판 (D-137) */
.piece-board { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.done .piece-board { align-self: stretch; text-align: left; }
.piece-board-head { margin: 0; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.piece-board-head b { color: var(--accent-ink); }
.piece-board-row { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.piece-board-row .block { font-size: 18px; }
.piece-board-sum { margin: 4px 0 0; font-weight: 700; color: var(--accent-ink); }

.build-target { display: flex; flex-direction: column; gap: 8px; }
.build-native { font-size: 24px; font-weight: 700; }
.slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 64px; }
.slot { min-width: 76px; min-height: 56px; border: 2px dashed var(--line-dash); border-radius: var(--radius-block); background: transparent; }
.slot.is-filled { border: 0; min-width: 0; }
.connector { font-family: var(--font-term); font-weight: 600; font-size: 22px; color: var(--ink-2); letter-spacing: 0; }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.feedback { padding: 14px 16px; border-radius: 14px; font-weight: 700; }
.feedback-ok { background: var(--accent-bg); color: var(--accent-ink); }
.feedback-bad { background: var(--error-bg); color: var(--error); }
.feedback-order { background: var(--notice-bg); color: var(--notice-ink); }
/* D-186 틀린 이유 한 줄: 모피 말풍선 아래 작은 담김 안내, 역방향 결과의 이유 줄 */
.why-saved { margin: -4px 0 0; text-align: right; }
.why-line { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); line-height: 1.55; }
.choice { width: 100%; text-align: left; min-height: 56px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-weight: 700; }
.choice.is-wrong { border-color: var(--error); color: var(--error); }
/* 마우스가 있는 기기에서만 누를 수 있는 보기·조각에 호버 표시(터치에서 눌린 색이 남지 않게). 상태 색(is-*)·사용한 조각은 건드리지 않는다 */
@media (hover: hover) {
  .choice:not([disabled]):not([class*="is-"]):hover { border-color: var(--line-strong); background: var(--fill-soft); }
  .options .block-tile:not(.is-used):not([aria-disabled="true"]):hover { border-color: var(--line-strong); }
  .mopi-more > summary:hover { color: var(--ink); }
}
.page-practice .stage { width: 100%; max-width: var(--width-reading); margin-inline: auto; }
.practice-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.practice-pair > *, .practice-options > * { min-width: 0; overflow-wrap: anywhere; }
/* 헷갈리는 짝 대결 (D-161): 틀려도 빨간 경고 대신 안내색. 시간은 작게만. */
.duel-clock { font-variant-numeric: tabular-nums; }
.duel-card { align-items: center; text-align: center; }
.duel-meaning { font-size: 18px; font-weight: 700; color: var(--ink); }
.duel-word { margin: 0; font-size: 30px; line-height: 1.3; overflow-wrap: anywhere; }
.duel-blank { display: inline-block; min-width: 3.2em; border-bottom: 3px solid var(--line-strong); color: var(--accent); }
.duel-blank.is-filled { border-bottom-color: var(--suffix-line); }
.duel-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.duel-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; text-align: center; border-width: 2px; border-color: var(--line-strong); border-radius: 18px; min-width: 0; overflow-wrap: anywhere; }
.duel-choice b { font-size: 22px; }
.duel-choice small { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.duel-choice.is-right { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); }
.duel-choice.is-wrong { border-color: var(--notice-ink); background: var(--notice-bg); color: var(--notice-ink); }
.duel-choice:disabled:not(.is-right):not(.is-wrong) { opacity: .5; }
.duel-feedback-miss { background: var(--notice-bg); color: var(--notice-ink); }
.duel-score { margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 4px; }
.duel-score b { font-size: 40px; line-height: 1; color: var(--accent-2); } /* 「내 기록」 숫자: 세컨드 보라 쓰임(D-163) */
.duel-missed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.duel-missed li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; background: var(--fill-soft); border-radius: 12px; padding: 9px 12px; }
.practice-label { font-size: clamp(20px, 5vw, 28px); margin: 0; }
.practice-menu { margin-top: 0; }
/* 공부하기 「추가 연습」 머리는 「분야」 머리(.study-fields-title)와 같은 크기. 위 간격은 페이지 간격(24px)만 쓴다(polish 11-10). */
.settings-disclosure.practice-menu > summary { font-size: 18px; font-weight: 700; }
.practice-menu .cards { margin-top: var(--gap-card); }
.practice-hints ul { padding-left: 24px; margin-top: 12px; }
/* 조각 게임(D-157): 공통 카드·선택지·조립 보드를 그대로 쓰고 배치만 더한다. */
/* 허브(제목·게임 카드)는 다른 카드형 탭 화면처럼 가용 폭을 쓰고, 게임 판과 게임 중 제목만 읽기 폭에 둔다(D-164 후속). */
.game-stage, .page-games:has(.game-stage:not([hidden])) .page-head { width: 100%; max-width: var(--width-reading); margin-inline: auto; }
.games-hub { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.games-hub > * { min-width: 0; }
.game-card h2 { font-size: 20px; }
.game-stage { margin-top: var(--space-4); }
.game-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.game-hud-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.game-hud-item strong { font-size: 22px; }
.game-hud-item.is-low strong { color: var(--error); }
.meaning-choices .choice.is-answer { border-color: var(--accent); background: var(--accent-bg); }
.game-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.game-stat > * { min-width: 0; overflow-wrap: anywhere; }
.game-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--fill); }
.game-stat strong { font-size: 24px; }
.game-missed { list-style: none; padding: 0; margin: 0; }
.game-missed > li { min-width: 0; overflow-wrap: anywhere; }
.game-missed-parts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.game-missed-part { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.games-entry { margin-top: 0; }
@media (min-width: 720px) { .games-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } .games-note { grid-column: 1 / -1; } }

.result-term { font-family: var(--font-term); font-weight: 600; font-size: 40px; letter-spacing: 0; line-height: 1.2; display: flex; flex-wrap: wrap; }
.result-term .seg-prefix { background: linear-gradient(transparent 58%, var(--prefix-bg) 58%); box-shadow: inset 0 -5px 0 var(--prefix-line); }
.result-term .seg-root { background: linear-gradient(transparent 58%, var(--root-bg) 58%); box-shadow: inset 0 -5px 0 var(--root-line); }
.result-term .seg-suffix { background: linear-gradient(transparent 58%, var(--suffix-bg) 58%); box-shadow: inset 0 -5px 0 var(--suffix-line); }
.result-term .seg-none { color: var(--ink-2); }
.listen-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.listen-btn { width: 52px; height: 52px; border-radius: 26px; border: 1px solid var(--line); background: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.facts { display: flex; flex-direction: column; }
.fact { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px 20px; }
.fact + .fact { border-top: 1px solid var(--line); }
.fact > span:first-child { color: var(--ink-2); font-size: 14px; padding-top: 2px; }
.example { font-family: var(--font-term); font-weight: 600; letter-spacing: 0; }

.done { text-align: center; align-items: center; padding-top: 48px; }
.done .hero-num { font-size: 80px; }

/* 기억 그림 (D-35): 글자 없는 정사각 그림 */
.memory-img { width: 100%; max-width: 380px; aspect-ratio: 1 / 1; height: auto; border-radius: 24px; background: var(--card); border: 1px solid var(--line); object-fit: cover; }
.memory-img-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border: 2px dashed var(--line-dash); color: var(--ink-2); font-size: 14px; max-width: 240px; }

/* 복습 */
.review-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 32px 20px; min-height: 260px; }
.review-front { font-family: var(--font-term); font-weight: 600; font-size: 34px; letter-spacing: 0; overflow-wrap: anywhere; }
.rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rate { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 8px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-weight: 700; }
.rate small { font-weight: 500; font-size: 13px; color: var(--ink-2); }
.rate-good { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rate-good small { color: var(--accent-bg); }
.kbd-hint { display: none; font-size: 13px; color: var(--ink-2); text-align: center; }
.kbd-shortcut { display: none; }
@media (min-width: 840px) and (hover: hover) and (pointer: fine) {
  .kbd-hint { display: block; grid-column: 1 / -1; }
  .kbd-shortcut { display: inline; }
}

/* 공부하기: 주제 선택 후 해당 콘텐츠만 보여 준다. */
.study-categories, .study-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; list-style: none; }
.study-category { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 20px; color: var(--ink); text-decoration: none; }
.study-category-copy { gap: 6px; min-width: 0; }
.study-category strong { font-size: 20px; }
.study-category .icon { flex-shrink: 0; }
.study-category[aria-current="step"] { background: var(--fill); outline: 2px solid var(--ink); outline-offset: -2px; }
.study-category > .stack { flex: 1 1 auto; min-width: 0; }
.study-category:hover { background: var(--fill); }
/* 단계 숙달 막대(D-151): 배움은 옅은 색, 익힘은 그 위에 진한 색. 숫자는 옆 글줄이 읽어 준다. */
.stage-meter { position: relative; display: block; width: 100%; max-width: 240px; height: 6px; margin-top: 2px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.stage-meter[hidden] { display: none; }
.stage-meter > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; }
.stage-meter-started { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.stage-meter-done { background: var(--accent); }
/* 공부하기 첫 화면 C안 「주제 보드」(D-152 → D-185): 오늘 할 일 → 분야 카드 2×2 → 연속·이번 주.
   1024px 이상은 왼쪽 오늘 할 일(줄 목록)·두 칸 | 오른쪽 분야 카드. 1024 미만은 줄 목록 대신 한 줄 요약. */
.study-home { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "plan" "board" "duo" "extra"; gap: var(--gap-section); align-items: start; }
.study-home > .study-next { grid-area: plan; }
.study-home > .study-board { grid-area: board; }
.study-home > .study-duo { grid-area: duo; }
.study-home:not(:has(> .study-duo)) { grid-template-areas: "plan" "board" "extra"; }
/* 추가 연습·오답노트·조각 게임 묶음(polish S2): 넓은 화면은 왼쪽 칸 오늘 할 일 아래 */
.study-home > .study-extra { grid-area: extra; gap: var(--gap-card); min-width: 0; }
.study-next { gap: var(--gap-card-body); padding: var(--pad-card); border-radius: var(--radius-card); background: var(--accent-bg); color: var(--ink); }
.study-next .mopi-guide .mopi { width: 64px; height: 64px; flex-basis: 64px; }
.study-next .mopi-speech { padding: 12px 16px; }
.study-next .mopi-explanation { font-size: 15px; }
.study-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.study-plan-title { font-size: 20px; line-height: 1.3; }
.study-plan-head .note { flex-shrink: 0; white-space: nowrap; }
.study-plan-summary { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.study-plan { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.study-plan-link { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.study-plan-link:hover { background: var(--fill-soft); }
.study-plan-link .icon { flex-shrink: 0; color: var(--ink-3); }
.study-plan-check { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--on-accent); }
.study-plan-copy { flex: 1 1 auto; gap: 2px; min-width: 0; }
.study-plan-copy b { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.study-plan-row.is-done .study-plan-check { background: var(--accent); border-color: var(--accent); }
.study-plan-row.is-done .study-plan-copy b { color: var(--ink-2); font-weight: 600; }
.study-plan-note { margin: 0; text-align: center; }
/* 홈·공부하기 주 버튼의 둘째 줄(다음 할 일·내일 약속) */
.btn:has(> .cta-sub) { flex-direction: column; gap: 2px; min-height: 56px; padding-block: var(--space-2); }
/* 두 줄 주 버튼이 56에 들도록 줄 높이를 좁힌다(본문 1.6이면 62px, D-214 운영 대조) */
.btn:has(> .cta-sub) > .cta-main { line-height: 1.25; }
.btn:has(> .cta-sub) > .cta-sub { line-height: 1.2; }
.cta-sub { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.35; opacity: .88; }
/* 모든 폭에서 줄 대신 한 줄 요약 + 주 버튼 하나(polish S2, 11-10. 전에는 1024 이상만 줄 목록). 기록 읽기 선택 줄(설계 v3)만 줄로 남긴다. */
.study-next > .study-plan > .study-plan-row:not(.is-optional) { display: none; }
.study-next > .study-plan:not(:has(> .is-optional)) { display: none; }
/* 분야 카드 2×2: 머리글자 · 「이어서」 · 분야 이름 · 이어 갈 단계와 남은 수 · 그 단계 이름(넓으면 익힘 수) */
.study-board { display: grid; gap: var(--gap-section-title); min-width: 0; }
.study-board-more { margin-top: calc(var(--gap-card) - var(--gap-section-title)); }
.study-fields-title { font-size: 18px; }
.study-board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-card); margin: 0; padding: 0; list-style: none; }
.study-board-grid > li { display: flex; min-width: 0; }
.study-topic { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 132px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); color: var(--ink); text-decoration: none; }
.study-topic:hover { background: var(--fill-soft); }
.study-topic.is-current { outline: 2px solid var(--accent); outline-offset: -2px; }
.study-topic-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.study-topic-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-bg); color: var(--accent-ink); font-size: 14px; font-weight: 800; }
.study-topic-badge { padding: 2px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.study-topic-name { font-size: 17px; line-height: 1.3; }
.study-topic-now { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.study-topic-next { line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.study-topic .stage-meter { max-width: none; margin-top: auto; }
/* 「익힘 n/전체」는 모든 폭에서 한 줄(polish 11-10) */
.study-topic-count { white-space: nowrap; }
.study-board-more { display: grid; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); overflow: hidden; }
.study-field { min-height: 56px; padding: var(--pad-row-one) var(--pad-card); background: transparent; }
.study-board-more > * { position: relative; }
.study-board-more > :not([hidden]) ~ :not([hidden])::before { content: ""; position: absolute; top: 0; left: var(--pad-card); right: var(--pad-card); height: 1px; background: var(--line); pointer-events: none; }
.study-field:hover { background: var(--fill-soft); }
.study-field-copy { flex: 1 1 auto; gap: 6px; min-width: 0; }
.study-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.study-mini { min-height: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); align-items: flex-start; }
.study-mini > .stack { gap: 2px; min-width: 0; }
.study-mini b { font-size: 22px; line-height: 1.3; }
.study-mini:hover { background: var(--fill-soft); }
@media (min-width: 720px) {
  .study-topic { min-height: 148px; padding: 16px; }
}
@media (min-width: 1024px) {
  .study-home { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "plan board" "duo board" "extra board"; grid-template-rows: auto auto 1fr; gap: var(--gap-section) var(--space-8); }
  .study-home > .study-duo { align-self: start; }
  .study-home:not(:has(> .study-duo)) { grid-template-areas: "plan board" "extra board"; grid-template-rows: auto 1fr; }
}
/* 학습 끝 화면 다음 행동(D-185): 오늘 할 일 줄 → 주 버튼 → 「한 단계 더」·「오늘은 여기까지」 같은 크기, 다 채운 날은 내일 약속 */
.done > :is(.plan-after, .plan-promise, .plan-after-pair) { align-self: stretch; width: 100%; text-align: left; }
.plan-after { gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }
.plan-after .study-plan-link { background: var(--bg); }
.plan-after-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.plan-promise { gap: 10px; padding: 16px; border-radius: var(--radius-card); background: var(--accent-bg); }
.plan-promise-title { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.plan-promise-ok { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; color: var(--accent-ink); }
.plan-promise-btn { background: var(--card); }
.plan-promise-change summary { cursor: pointer; font-size: 14px; color: var(--ink-2); }
.plan-promise-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 8px; }
.plan-promise-time { min-height: var(--control-compact); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }
@media (min-width:720px) {
  .study-recommendation { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,320px); align-items:center; }
}
/* 몸 계통 지도(D-145): 인체 첫 화면 12칸. 모바일 2열 → 600 이상 3열 → 840 이상 4열 */
.study-system-map { gap: 12px; }
.study-stage-order { margin-top: 12px; }
.system-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.system-cell { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.system-cell.is-current { outline: 2px solid var(--accent); outline-offset: -2px; }
.system-tile { display: flex; flex: 1; flex-direction: column; gap: 4px; min-height: 112px; padding: 14px; color: var(--ink); text-decoration: none; }
.system-tile:hover, .system-collection-link:hover { background: var(--fill); }
.system-collection-link { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-top: 1px solid var(--line); color: var(--accent-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.system-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.system-name { font-size: 16px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.system-progress { font-weight: 700; font-size: 14px; color: var(--ink); }
.system-count { margin-top: auto; }
.system-tile.is-empty { color: var(--ink-2); }
.system-ring { flex: none; width: 36px; height: 36px; transform: rotate(-90deg); }
.system-ring circle { fill: none; stroke-width: 5; }
.system-ring-track { stroke: var(--fill); }
.system-ring-fill { stroke: var(--accent); stroke-linecap: round; }
@media (min-width: 600px) { .system-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 840px) { .system-map { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.study-content { margin-top: 28px; }
.study-items li { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.study-items h3 { margin: 0; font-size: 24px; }
.study-items p { margin: 0; }
.map-detail { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.map-pct { font-family: var(--font-term); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: 0; }

/* 관리자 */
.admin { width: 100%; }
.main-plain:has(.admin) { max-width: 1000px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.tabs a[aria-current] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tabs.small a { min-height: var(--control-compact); font-size: 14px; }
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; font-size: 15px; }
.table th, .table td { text-align: left; padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: 13px; color: var(--ink-2); font-weight: 500; border-top: 0; }
.inline { display: flex; gap: 6px; align-items: center; }
select { min-height: var(--control-compact); padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.lang-links { display: flex; gap: 12px; }
.lang-links a[aria-current] { font-weight: 700; color: var(--ink); text-decoration: none; }

/* M: 600~839 */
@media (min-width: 600px) {
  .study-categories, .study-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --gutter: var(--space-6); --pad-card: var(--space-6); }
  .main { max-width: none; }
  .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* X: 840 이상 — 왼쪽 세로 메뉴, 학습 화면은 두 창 */
@media (min-width: 840px) {
  .frame-tab .shell { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .nav {
    position: sticky; top: 0; height: 100dvh; grid-template-columns: none;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 28px 0; border-top: 0; border-right: 1px solid var(--line);
  }
  .nav-brand { display: block; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; padding-bottom: 20px; }
  .nav-item { position: relative; isolation: isolate; width: 80px; border-radius: 12px; padding: 12px 0; }
  /* 선택 칸 배경은 별도 칸(.nav-pill)이다. 화면을 옮길 때 이 칸만 미끄러진다(nav-transition.css) */
  .nav-pill { position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--surface-brand-subtle); view-transition-name: nav-pill; } /* 선택 칸 = Brand Subtle(D-228) */
  .nav-info { display: block; position: relative; margin-top: auto; }
  .nav-info > summary { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--ink-2); cursor: pointer; list-style: none; }
  .nav-info > summary::-webkit-details-marker { display: none; }
  .nav-info > summary:hover, .nav-info[open] > summary { background: var(--fill); color: var(--ink); }
  .nav-info-panel { position: absolute; left: calc(100% + 40px); bottom: 0; z-index: 20; width: 312px; max-height: calc(100dvh - 56px); overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
  .nav-info-panel .nav-info-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border: 0; padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
  .nav-info-panel .nav-info-link:hover { background: var(--fill); }
  .nav-info-panel .nav-info-link .icon { color: var(--ink-3); }
  .nav-info-panel .business-lines { margin-top: 6px; padding: 12px; border-top: 1px solid var(--line); }
  :root { --gutter: var(--space-8); --pad-page-top: var(--space-8); --gap-section: var(--space-10); --gap-card: var(--space-4); }
  .main { max-width: var(--width-app); padding: var(--pad-page-top) var(--gutter) 36px; }
  .frame-tab .main { margin-inline: auto; }
  /* 홈 넓은 화면(D-218 재배치): 본문 h1은 왼쪽 메뉴의 이름과 겹쳐 화면 낭독용으로만 둔다. */
  .page-home .home-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* 상황 띠: 그림 44px + 제목·문장 한 줄 + 버튼 */
  .home-situation-card { padding: 10px 16px; border-radius: 16px; }
  .home-situation-card.home-milestone { background: var(--fill-soft); border: 0; padding: var(--space-3) var(--pad-card); }
  .home-situation-art { flex-basis: 44px; width: 44px; height: 44px; }
  .home-situation-copy { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: 6px; }
  .home-situation-copy .home-block-title { font-size: 15px; }
  .home-situation-copy .muted { flex: 1 1 240px; margin: 0; }
  .home-situation-actions, .home-situation-copy > .btn { margin-left: auto; }

  .toast { bottom: 32px; }
}

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

/* 가입·문의·계정 관리 */
.field { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--control-height); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 500; }
.field textarea { min-height: 160px; resize: vertical; }
.settings-page input[type="time"] { appearance: none; box-sizing: border-box; min-width: 0; max-width: 100%; }
.check-field { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; }
.check-field input { width: 20px; height: 20px; margin: 3px 0 0; flex: 0 0 20px; accent-color: var(--accent); }
.membership-plans { display: grid; gap: var(--space-3); border: 0; margin: 0; padding: 0; min-width: 0; }
.membership-plans legend { font-weight: 700; margin-bottom: var(--space-3); }
.membership-plan { display: flex; gap: var(--space-3); align-items: center; cursor: pointer; }
@media (min-width:360px) {
  .membership-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .membership-plan { position:relative; padding:16px 12px; display:block; min-width:0; }
  .membership-plan input { position:absolute; top:16px; right:12px; }
  .membership-plan .stack { gap:8px; }
  .membership-plan strong { padding-right:24px; }
  .membership-plan .num { font-size:14px; }
}
.membership-plan:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.membership-plan:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.membership-plan input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--accent); }
.membership-plans:disabled .membership-plan { cursor: default; }
.consent-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.consent-group legend { font-weight: 700; padding-bottom: 8px; }
.form-error { color: var(--error); }
.btn-danger { color: var(--error); border-color: var(--error); }
.btn-danger:hover { background: var(--error-bg); border-color: var(--error); }
.policy-text { white-space: pre-line; overflow-wrap: anywhere; }

/* 설정은 목적별 목록으로 묶고, 관리·위험 동작은 상세 화면에서 다룬다. */
.settings-page { width: 100%; max-width: var(--width-reading); margin-inline: auto; }
.settings-panels, .help-topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.settings-panels > section, .help-topics > details { min-width: 0; }
.section-label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.settings-list { overflow: hidden; }
.menu-row, .preference-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--menu-height); padding: var(--pad-row-one) var(--pad-card); color: var(--ink); text-decoration: none; }
.menu-row > span, .preference-row > span { min-width: 0; }
.settings-list > * { position: relative; }
.menu-row { width: 100%; border: 0; background: var(--card); text-align: left; }
.menu-row:hover { background: var(--fill-soft); }
.menu-row-action { font-weight: var(--w-ui); }
.settings-list > form { display: flex; margin: 0; }
.menu-row-label { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.menu-row:focus-visible { outline-offset: -4px; }
.menu-row-danger { color: var(--error); }
.preference-row input { flex: 0 0 22px; width: 22px; height: 22px; accent-color: var(--accent); }
.settings-disclosure > summary { min-height: var(--control-height); }
/* 접힘 표시 통일(디자인 점검 ⑥): 브라우저 기본 ▶와 굵게 대신 메뉴 줄과 같은 보통 굵기 + 오른쪽 chevron, 펼치면 아래로 회전 */
.settings-disclosure > summary { display: flex; align-items: center; gap: 12px; list-style: none; font-weight: var(--w-ui); }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-inline: auto 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast); }
.settings-disclosure[open] > summary::after { transform: rotate(45deg); }
.settings-disclosure > summary:has(> .muted)::after { margin-inline-start: 0; }
.settings-disclosure > summary:focus-visible { outline-offset: -3px; }
.confusable-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 0 0 var(--space-3); }
.confusable-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-block); background: var(--card); }
.confusable-item .muted { font-size: 14px; }
.settings-disclosure.card { padding-block: 12px; }
.settings-disclosure.card > summary { padding-block: 12px; }
.settings-disclosure.card[open] > summary { margin-bottom: var(--space-3); }
.settings-disclosure.card > .stack { padding-bottom: var(--space-2); }
.settings-list > .settings-disclosure { padding: 0 var(--pad-card); }
.settings-list > .settings-disclosure > summary { min-height: var(--menu-height); padding: var(--pad-row-one) 0; }
.settings-list > .settings-disclosure[open] { padding-bottom: var(--pad-card); }
.settings-disclosure > summary .muted { margin-inline-start: auto; font-weight: 500; }
.settings-disclosure[open] > summary { margin-bottom: 12px; }
.language-options { display: flex; gap: 16px; padding-bottom: 12px; }
.language-options a { display: inline-flex; align-items: center; min-height: 44px; }
.language-options [aria-current] { font-weight: 700; color: var(--accent-ink); }
.back-link { padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-btn); background:var(--card); font-weight:700; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; align-self: flex-start; color: var(--ink-2); text-decoration: none; }
.profile-name { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.profile-secondary { margin-top: var(--space-4); }
.page-me > .profile-secondary { margin-top: calc(var(--gap-section) - var(--gap-title-content)); }
.profile-secondary .btn { color: var(--ink-2); font-weight: 500; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.profile-identity { display: flex; align-items: center; gap: var(--space-3); }
.profile-identity > div { min-width: 0; }
.profile-symbol { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--fill); }
.profile-identity .note { margin-top: var(--space-1); }
@media (min-width: 840px) { .profile-layout { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); } }
/* 내 정보 학습 현황 (D-149) */
.me-status { display: grid; gap: var(--space-4); min-width: 0; }
.me-status > [hidden] { display: none; }
.profile-mopi { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; }
.me-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); text-align: center; font-size: 13px; color: var(--ink-2); }
.me-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.me-day > i, .me-legend i { display: block; border-radius: 50%; background: var(--fill); box-sizing: border-box; }
.me-day > i { width: 100%; max-width: 30px; aspect-ratio: 1; border: 2px solid transparent; }
.me-day.is-done > i { background: var(--accent); }
.me-day.is-shield > i { background: var(--notice-bg); border-color: var(--notice-ink); }
.me-day.is-today > i { outline: 2px dashed var(--accent); outline-offset: 2px; }
.me-day.is-today { color: var(--ink); font-weight: 700; }
.me-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 12px; color: var(--ink-2); }
.me-legend li { display: inline-flex; align-items: center; gap: 6px; }
.me-legend i { width: 10px; height: 10px; border: 1px solid transparent; }
.me-legend .is-done i { background: var(--accent); }
.me-legend .is-shield i { background: var(--notice-bg); border-color: var(--notice-ink); }
.me-legend .is-today i { background: transparent; border: 1px dashed var(--accent); }
.me-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.me-stats > div { background: var(--fill-soft); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.me-stats dt { font-size: 12.5px; color: var(--ink-2); }
.me-stats dd { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.me-stats dd b { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.me-stats dd span { font-size: 13px; color: var(--ink-2); }
.me-league { width: auto; border: 1px solid var(--line); }
.me-league-body { flex: 1; display: grid; gap: var(--space-1); }
/* 약점 조각 처방전(D-159): 경고색 없이 조각·뜻·카드 수만 */
.weak-rx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.weak-report-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.weak-report-head .note { white-space: nowrap; }
.weak-report-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border-radius: 14px; background: var(--fill-soft); }
.weak-report-text { font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.weak-report-term { font-weight: 600; }
.weak-report-go { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.weak-report-detail { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
.weak-report-meter { display: grid; gap: 6px; }
.weak-report-meter .progress { display: block; height: 8px; border-radius: 4px; }
.weak-report-meter .progress-fill { display: block; border-radius: 4px; }
.weak-report-meter-text { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.weak-report-foot { margin: 0; font-size: 12px; }
@media (hover: hover) { .weak-report-item:hover { background: var(--fill); } }
/* 지난주의 나(D-158): 리그 TOP 5 아래 나와만 비교하는 작은 표 */
.lastweek { display: grid; gap: var(--space-2); }
.lastweek:not(.is-card) { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.lastweek .row-between { flex-wrap: wrap; gap: 4px var(--space-2); }
.lastweek-title { margin: 0; font-size: 17px; }
.lastweek-metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); }
.lastweek-metric { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--fill-soft); }
.lastweek-metric-title { font-size: 14px; }
.lastweek-bar { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.lastweek-bar-label { color: var(--ink-2); }
.lastweek-bar-track { height: 8px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.lastweek-bar-track > i { display: block; height: 100%; border-radius: inherit; background: var(--line-dash); }
.lastweek-bar.is-this .lastweek-bar-label { color: var(--ink); font-weight: 700; }
.lastweek-bar.is-this .lastweek-bar-track > i { background: var(--accent); }
.lastweek-tone { margin: 0; }
/* 리그 「지난주의 나」: 넓은 화면은 지표 3개를 3열(polish 11-10). 좁은 화면은 auto-fit 그대로 */
@media (min-width: 1024px) { .lastweek.is-card .lastweek-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 연속·해독 수는 「지금 읽을 수 있는 의학용어」 카드로 옮겨(D-218) 보호권·읽은 이야기 두 칸만 남는다 */
/* D-176 내 정보 배치. 1024 미만: 두 열 묶음을 풀고(display: contents) order로 한 줄 쌓기.
   1024 이상: 왼쪽 넓은 열(이번 주·그래프) | 오른쪽 좁은 열(프로필·처방전·리그/업적·메뉴). */
.page-me .me-board { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-card); }
/* 한 열: 프로필 ↔ 이번 주·약점·업적 묶음 ↔ 그래프 ↔ 메뉴 사이는 섹션 간격(D-214) */
@media (max-width: 1023px) { .page-me .me-dash, .page-me .me-charts, .page-me .me-menu { margin-top: calc(var(--gap-section) - var(--gap-card)); } }
.me-side, .me-main { display: contents; }
.me-board [hidden] { display: none !important; }
/* 한 열 순서(D-218 시안 me): 프로필 → 지금 읽을 수 있는 의학용어 → 담은 단어·D-day → 약점 리포트 → 업적 → 메뉴 → 이번 주 → 그래프 */
.me-profile { order: 1; } .me-membership { order: 2; } .me-readable { order: 3; } .me-rows { order: 4; } .weak-rx { order: 5; }
.me-pair { order: 6; } .me-menu { order: 7; } .me-dash { order: 8; } .me-charts { order: 9; }
.me-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap-card); align-items: stretch; min-width: 0; }
.me-pair > * { min-width: 0; margin: 0; }
/* 리그가 있으면 두 칸 요약: 리그는 세로로 쌓고, 업적은 가장 최근 1개만 */
.me-pair:has(> .me-league) .me-league { align-items: flex-start; }
.me-pair:has(> .me-league) .me-league .row-between { flex-direction: column; align-items: flex-start; gap: 2px; }
/* 두 칸 요약 타일에서는 「순위」 줄과 「남은 점수」 줄을 일부러 나눈다(가운데 점 숨김) */
.me-pair:has(> .me-league) .me-league-line > span { display: block; }
.me-pair:has(> .me-league) .me-league-sep { display: none !important; }
.me-pair:has(> .me-league) .me-league-gap { font-size: 13.5px; }
.me-pair:has(> .me-league) .ach-strip-list { grid-template-columns: minmax(0, 1fr); }
.me-pair:has(> .me-league) .ach-strip-list > li:nth-child(n+2) { display: none; }
.me-pair:has(> .me-league) .ach-strip > .row-between { flex-direction: column; align-items: flex-start; gap: 2px; }
.me-chart-tabs { display: none; }
@media (max-width: 719px) {
  .me-chart-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--fill); }
  .me-chart-tab { flex: 1 1 0; min-width: 0; min-height: var(--control-compact); padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
  .me-chart-tab[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px #151A2D1F; }
  .me-chart-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .me-charts:not([data-active="study"]) > [data-me-chart="study"], .me-charts:not([data-active="heat"]) > [data-me-chart="heat"], .me-charts:not([data-active="mastery"]) > [data-me-chart="mastery"] { display: none; }
  .me-chart .home-block-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 720px) and (max-width: 1023px) { .me-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .me-charts > [data-me-chart="mastery"] { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  /* 두 열: 왼쪽은 마지막 그래프(숙련도)가 남는 높이를 받아 빈 상태 안내를 아래에 붙인다.
     오른쪽은 위에서부터 쌓는다(메뉴를 열 바닥에 붙이면 「최근 업적」 아래가 비어 보임, polish 11-10). */
  .page-me .me-board { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--space-8); align-items: stretch; }
  .me-side, .me-main { display: flex; flex-direction: column; gap: var(--gap-card); min-width: 0; }
  /* 두 열(D-214): 왼쪽 이번 주 ↔ 그래프, 오른쪽 프로필 ↔ 약점·업적 ↔ 메뉴 사이는 섹션 간격. 메뉴는 위에서부터 쌓는다(polish S1) */
  .me-main { gap: var(--gap-section); }
  .me-side > .weak-rx { margin-top: calc(var(--gap-section) - var(--gap-card)); }
  .me-side > .me-menu { margin-top: calc(var(--gap-section) - var(--gap-card)); }
  .me-main > .me-charts { flex: 1 1 auto; grid-template-rows: auto auto 1fr; }
  .me-charts > [data-me-chart="mastery"] { display: flex; flex-direction: column; }
  /* 남는 높이는 숙련도 막대 줄 사이에 고르게 나눠 카드 안에 빈 덩어리가 생기지 않게 한다 */
  .me-charts > [data-me-chart="mastery"] .me-mastery { flex: 1 1 auto; align-content: space-between; }
  .me-main { grid-column: 1; grid-row: 1; }
  .me-side { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1150px) { .me-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .me-charts > [data-me-chart="mastery"] { grid-column: 1 / -1; } .me-main > .me-charts { grid-template-rows: auto 1fr; } }
/* 내 정보 학습 그래프 (D-156): 한 계열·한 색. 달력은 남색 밝기 4단계(고정 구간). */
.me-charts { display: grid; gap: var(--gap-card); min-width: 0; }
.me-charts[hidden] { display: none; }
.me-chart { min-width: 0; }
.me-chart-empty { background: var(--fill-soft); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-block); padding: 10px 12px; text-align: center; color: var(--ink-2); }
.me-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); border-bottom: 1px solid var(--line-strong); }
.me-bar { display: grid; grid-template-rows: 18px 96px; justify-items: center; align-items: end; gap: 2px; position: relative; padding-bottom: 22px; }
.me-bar-value { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 18px; }
.me-bar-track { width: 100%; max-width: 32px; height: 96px; display: flex; align-items: flex-end; }
.me-bar-fill { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.me-bar-fill.is-zero { height: 0; }
.me-bar-label { position: absolute; bottom: 0; font-size: 12px; color: var(--ink-2); line-height: 18px; }
.me-bar.is-today .me-bar-label { color: var(--ink); font-weight: 700; }
.me-heat-wrap { display: flex; gap: 6px; max-width: 390px; }
.me-heat-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 3px; font-size: 11px; line-height: 1; color: var(--ink-2); }
.me-heat-days li { display: flex; align-items: center; }
.me-heat { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 3px; }
.me-heat i, .me-heat-legend i { display: block; border-radius: 3px; background: var(--fill); }
.me-heat i { aspect-ratio: 1; }
.me-heat i.is-future { background: transparent; outline: 1px dashed var(--line); outline-offset: -1px; }
.me-heat i.is-today { outline: 2px solid var(--ink); outline-offset: 0; }
/* 학습 달력 단계는 주 색(--accent)을 흰색과 25·55·100%로 섞은 값(D-181, D-228 보라로 바뀜). 접두사 하늘과 헷갈리지 않게 한다. */
.me-heat .l1, .me-heat-legend .l1 { background: color-mix(in srgb, var(--accent) 25%, var(--card)); }
.me-heat .l2, .me-heat-legend .l2 { background: color-mix(in srgb, var(--accent) 55%, var(--card)); }
.me-heat .l3, .me-heat-legend .l3 { background: var(--accent); }
.me-heat .l4, .me-heat-legend .l4 { background: var(--accent); }
.me-heat-foot { flex-wrap: wrap; gap: var(--space-2); }
.me-heat-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-2); }
.me-heat-legend i { width: 10px; height: 10px; }
.me-heat-legend i:first-of-type { margin-left: 4px; }
.me-heat-legend i:last-of-type { margin-right: 4px; }
.me-mastery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.me-mastery-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 3.5em; align-items: center; gap: var(--space-2); font-size: 13.5px; }
/* 이름은 잘라 내지 않고 두 줄까지 허용(영어 「Common foundations」 등, D-214 운영 대조) */
.me-mastery-name { color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .me-mastery-row { grid-template-columns: 10em minmax(0, 1fr) 3.5em; } }
.me-mastery-track { height: 10px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.me-mastery-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.me-mastery-num { text-align: right; color: var(--ink-2); font-size: 12.5px; }
.back-link:hover { color:var(--ink); background:var(--fill-soft); border-color:var(--line-strong); }
.icon-btn:hover, .listen-btn:hover { background: var(--fill); }
button:disabled { cursor: default; }
.settings-list [hidden] { display: none; }

.report-dialog { width: min(100% - 32px, 480px); max-height: 90dvh; padding: 24px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--card); overflow-y: auto; overscroll-behavior: contain; }
.report-dialog::backdrop { background: rgba(0, 0, 0, .3); }

@media (max-width: 599px) { .report-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; padding-bottom: calc(24px + var(--safe-bottom)); } }

/* 도감·리그 */
/* 작은 도감 목록은 모두 렌더링해 WebKit 접근성에서 summary가 누락되지 않게 한다. */
summary { cursor: pointer; min-height: 44px; padding: 8px 0; font-weight: 700; }
.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li { padding: 12px; border-bottom: 1px solid var(--line); }
.ranking .is-me { background: var(--accent-bg); border-radius: 10px; }

.listen-controls { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pre-wrap { white-space: pre-wrap; }
audio { max-width: 100%; }

[data-page="tutor"], [data-page="notifications"] { max-width: 640px; margin-inline: auto; }
.ranking li > span { min-width: 0; overflow-wrap: anywhere; }

/* 관리자 작업 공간: 좁은 화면에서도 메뉴·본문·표를 구분한다. */
.admin-google-button { min-height: 44px; max-width: 100%; }
.admin-login-google > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.admin-login-google:not([open]) { gap: 0; }
.admin-member-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.admin-member-list a { text-decoration: none; color: var(--ink); }
.admin-member-list .stack { min-width: 0; overflow-wrap: anywhere; }
.admin-table-wrap { max-width: 100%; overflow-x: auto; }
.admin-table-wrap table { min-width: 640px; }
.admin-filter { flex-wrap: wrap; align-items: end; }
.admin-filter .field { flex: 1; min-width: 180px; }
.admin-workspace .num { font-size: 24px; }
.publisher-catalog .tabs .num { font-size: inherit; }
.publisher-catalog article h2 { overflow-wrap: anywhere; }
@media (min-width: 840px) { .main-admin { padding: 32px 24px; } }

/* 넓은 화면의 여백은 화면 목적에 맞춰 쓴다. 한 장/한 폼은 중앙, 목록과 비교는 다열. */
.page-learn .stage:not(.two-pane), .page-review .stage { width: 100%; max-width: var(--width-reading); margin-inline: auto; }
/* 결과 화면의 기억 그림 (D-139): 넓은 화면에서만 그림 | 내용 2열. 좁은 화면(앱)은 세로 그대로. 그림 없는 화면은 art-stage가 붙지 않는다. */
@media (min-width: 900px) {
  .page-learn .stage.art-stage { max-width: 960px; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 40px; row-gap: 16px; align-items: start; }
  .art-stage > .stage-art { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 8px; }
  .art-stage > :not(.stage-art) { grid-column: 2; }
  .art-stage .memory-img { max-width: 320px; }
  .decode-goal.art-wide { max-width: 960px; }
}
@media (min-width: 840px) {
  .settings-page[data-page="settings"], .page-help { max-width: none; }
  .settings-panels, .help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-help > .btn { align-self: center; width: min(100%, var(--width-form)); }
  .page-map > .btn-primary { align-self: flex-start; min-width: min(100%, 320px); }
  .page-review .stage.review-revealed { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
  .page-review .stage.review-revealed > .kbd-hint { grid-column: 1 / -1; }
  .publisher-candidates, .admin-member-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
  .publisher-candidates > article:only-child, .admin-member-list > li:only-child { grid-column: 1 / -1; width: 100%; max-width: var(--width-reading); margin-inline: auto; }
}

.skip-link, .admin-skip { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 12px 16px; background: white; color: var(--ink); border: 2px solid var(--ink); }
.skip-link:focus, .admin-skip:focus { top: 12px; }

/* 모피: 설명 카드 밖의 안내/완료 영역. 모션은 화면 진입당 1회만 실행한다. */
.mopi { display: inline-block; width: 112px; height: 112px; flex: 0 0 auto; align-self: center; }
.mopi-puppet { display: block; position: relative; width: 100%; height: 100%; transform-origin: 50% 87%; }
.mopi-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.mopi-eyelids { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.mopi-guide { display: flex; align-items: center; gap: 12px; }
.mopi-guide p { min-width: 0; }
.mopi-guide .mopi { width: 88px; height: 88px; }
.mopi-home-guide .mopi { width: 96px; height: 96px; }
.mopi-system-note { padding: 0 20px 16px; }
.mopi[data-mopi-motion="breathe"].is-moving .mopi-puppet { animation: mopi-breathe 3s ease-in-out 1; }
.mopi[data-mopi-motion="breathe"].is-moving .mopi-eyelids { animation: mopi-blink 3s linear 1; }
.mopi[data-mopi-motion="bounce"].is-moving .mopi-puppet { animation: mopi-bounce 1.1s ease-in-out 1; }
.mopi[data-mopi-motion="talk"].is-moving .mopi-puppet { animation: mopi-talk 1.4s ease-in-out 1; }
@keyframes mopi-breathe {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  20% { transform: translateY(2%) scale(1.16, 0.85) rotate(-5deg); }
  42% { transform: translateY(-10%) scale(0.9, 1.15) rotate(6deg); }
  64% { transform: translateY(-3%) scale(1.1, 0.92) rotate(-4deg); }
  82% { transform: translateY(-5%) scale(0.96, 1.06) rotate(2deg); }
}
@keyframes mopi-blink { 0%, 27%, 38%, 100% { opacity: 0; } 30%, 35% { opacity: 1; } }
@keyframes mopi-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  18% { transform: translateY(3%) scale(1.2, 0.8) rotate(-4deg); }
  38% { transform: translateY(-32%) scale(0.88, 1.16) rotate(-9deg); }
  56% { transform: translateY(2%) scale(1.18, 0.82) rotate(6deg); }
  72% { transform: translateY(-12%) scale(0.93, 1.1) rotate(-4deg); }
  87% { transform: scale(1.06, 0.95) rotate(2deg); }
}
@keyframes mopi-talk {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  18% { transform: translateY(2%) scale(1.14, 0.87) rotate(-7deg); }
  38% { transform: translateY(-10%) scale(0.92, 1.12) rotate(7deg); }
  60% { transform: translateY(-3%) scale(1.1, 0.92) rotate(-5deg); }
  80% { transform: translateY(-5%) scale(0.97, 1.05) rotate(3deg); }
}
.mopi-reduced-motion .mopi-puppet, .mopi-reduced-motion .mopi-eyelids { animation: none !important; transform: none !important; }
.mopi-reduced-motion .mopi-eyelids { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .mopi-puppet, .mopi-eyelids { animation: none !important; transform: none !important; }
  .mopi-eyelids { opacity: 0 !important; }
}

.mopi-preview { padding-bottom: 16px; }
.mopi-preview-stage { display: flex; justify-content: center; min-height: 112px; }
.mopi-preview-choices { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
.mopi-preview-choices .btn { flex: 1 1 72px; min-height: var(--control-compact); }
.mopi-preview-choices [aria-pressed="true"] { border-color: var(--accent-ink); background: var(--accent-bg); font-weight: 700; }

/* 리그의 신고·차단은 행 아래에서 펼친다. 점수 정렬·작은 화면 폭을 유지한다. */
.ranking li { flex-wrap: wrap; }
.ranking li > span:first-child { min-width: 0; overflow-wrap: anywhere; flex: 1; }
.ranking li > .settings-disclosure { flex: 1 0 100%; min-width: 0; }
.ranking li > .settings-disclosure > summary { min-height: 44px; font-size: 13px; color: var(--ink-2); }

/* D-101: 같은 설명은 모피 말풍선 한 곳에만 둔다. */
.mopi-guide { align-items: flex-start; }
.mopi-guide .mopi { flex: 0 0 88px; align-self: flex-start; }
.mopi-home-guide .mopi { flex-basis: 96px; }
.mopi-speech { position: relative; flex: 1; min-width: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface, #fff); }
.mopi-speech::before { content: ''; position: absolute; top: 25px; left: -6px; width: 10px; height: 10px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: inherit; transform: rotate(45deg); }
.mopi-explanation { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.collection-entry .mopi-explanation { margin-top: 0; }
.page-map > .mopi-guide { margin-block: 24px; }
.result-reference .facts { margin-top: 12px; }
@media (max-width: 479px) { .mopi-guide .mopi { flex-basis: 64px; width: 64px; height: 64px; } .mopi-speech { padding: 14px 16px; } }

/* D-102: 같은 말풍선 안에서 짧은 말만 교체. 본문과 터치 영역은 유지한다. */
.mopi-dialogue-line { display:block; min-height:3.3em; text-wrap:pretty; }
.mopi-dialogue-fact { display:block; margin-top:8px; }
/* 전체 문장의 높이는 남기고 시각적인 타자 표시만 겹친다. */
[data-mopi-typing] { position:relative; }
[data-mopi-typing] > .mopi-type-source { opacity:0; }
.mopi-type-ink { position:absolute; inset:0; pointer-events:none; user-select:none; }
.mopi-reduced-motion .mopi-type-source { opacity:1; }
.mopi-reduced-motion .mopi-type-ink { display:none; }
@media (prefers-reduced-motion: reduce) {
  [data-mopi-typing] > .mopi-type-source { opacity:1; }
  .mopi-type-ink { display:none; }
}
/* 검색/선택은 기존 폼 안에서 한 번에 조작한다. */
/* 용어 찾기(study_search)는 기존 도감 틀(D-97: 1024px 이상 왼쪽 검색 칸 + 결과)을 그대로 쓴다. */
.collection-grid { display: grid; gap: 1rem; align-items: start; }
.collection-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.collection-tools, .collection-results { min-width: 0; }
.collection-grid details[open], .collection-empty { grid-column: 1 / -1; }
.collection-grid details[open] p { max-width: 640px; margin-inline: auto; }
@media (min-width: 720px) { .collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1024px) {
  .collection-layout { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
  .collection-tools { position: sticky; top: var(--space-6); }
}
/* 어원 도감(D-177, B안): 위 한 줄 검색·필터 → 알파벳 사전 목록 + 세로 A–Z. 1024px 이상 목록 | 상세 두 칸. */
[data-page="collection"] .collection-tools { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
/* 검색창(D-177 보완): 둥근 입력 하나 + 왼쪽 돋보기 + 글자가 있을 때만 지우기. 포커스는 감싼 칸 전체에 링. */
[data-page="collection"] .collection-search { position: relative; display: flex; align-items: center; min-height: var(--control-compact); min-width: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-3); }
[data-page="collection"] .collection-search:focus-within { border-color: var(--accent); outline: 3px solid var(--accent-bg); outline-offset: 0; }
[data-page="collection"] .collection-search > .icon { flex: 0 0 auto; margin-left: 14px; }
[data-page="collection"] .collection-search input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 8px 0 10px; border: 0; background: transparent; color: var(--ink); font-size: 16px; outline: none; appearance: none; -webkit-appearance: none; }
[data-page="collection"] .collection-search input::placeholder { color: var(--ink-3); }
[data-page="collection"] .collection-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
[data-page="collection"] .collection-search-clear { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 42px; margin-right: 2px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
[data-page="collection"] .collection-search-clear:hover { background: var(--fill-soft); color: var(--ink); }
[data-page="collection"] .collection-search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
[data-page="collection"] .collection-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
/* 종류 칩은 한 줄 가로 스크롤(스크롤바 숨김), 계통·이야기 선택은 오른쪽 작은 묶음. */
[data-page="collection"] .collection-kinds { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 2px; border: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
[data-page="collection"] .collection-kinds::-webkit-scrollbar { display: none; }
[data-page="collection"] .collection-chip { position: relative; display: inline-flex; flex: 0 0 auto; }
[data-page="collection"] .collection-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
[data-page="collection"] .collection-chip > span { display: inline-flex; align-items: center; min-height: var(--control-compact); padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; white-space: nowrap; cursor: pointer; }
[data-page="collection"] .collection-chip:hover input:not(:checked) + span { background: var(--fill-soft); }
[data-page="collection"] .collection-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: var(--w-ui); }
[data-page="collection"] .collection-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-page="collection"] .collection-selects { display: flex; flex: 0 1 auto; gap: 6px; min-width: 0; }
[data-page="collection"] .collection-select { display: flex; min-width: 0; }
[data-page="collection"] .collection-select select { width: 100%; min-width: 0; min-height: var(--control-compact); padding: 0 28px 0 12px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--card); color: var(--ink); font-size: 14px; }
@media (max-width: 599px) {
  [data-page="collection"] .collection-kinds { flex-basis: 100%; }
  [data-page="collection"] .collection-selects { flex: 1 1 100%; }
  [data-page="collection"] .collection-select { flex: 1 1 0; }
}
[data-page="collection"] .collection-count { margin: 0; font-size: 14px; color: var(--ink-2); }
[data-page="collection"] .collection-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
[data-page="collection"] .collection-results { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 4px; align-items: start; min-width: 0; }
[data-page="collection"] .collection-list { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; scroll-margin-top: var(--space-4); }
[data-page="collection"] .collection-index { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-4); display: flex; flex-direction: column; align-items: center; }
/* A–Z(D-181): 글자 크기는 그대로, 누르는 칸만 32px까지. 결과 있는 글자 수(--letters)로 나눠 화면 높이를 넘지 않게 줄인다(최소 24px). */
[data-page="collection"] .collection-index a, [data-page="collection"] .collection-index span { display: grid; place-items: center; width: 32px; height: clamp(24px, calc((100dvh - 160px) / var(--letters, 26)), 32px); font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; border-radius: 6px; }
[data-page="collection"] .collection-index a { color: var(--accent-ink); }
[data-page="collection"] .collection-index a:hover { background: var(--accent-bg); }
[data-page="collection"] .collection-index span { color: var(--ink-3); opacity: .55; }
[data-page="collection"] .collection-letter { scroll-margin-top: var(--space-4); }
[data-page="collection"] .collection-letter-title { margin: 0 0 6px 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-2); }
[data-page="collection"] .collection-rows { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
[data-page="collection"] .collection-item + .collection-item { border-top: 1px solid var(--line); }
[data-page="collection"] .collection-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
[data-page="collection"] .collection-row:hover { background: var(--fill-soft); }
[data-page="collection"] .collection-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
[data-page="collection"] .collection-row.is-selected { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
/* 조각 지도(D-218 시안 study-map): 종류는 색 상자 대신 조각 색 점 + 글자 */
[data-page="collection"] .collection-kind { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0; background: none; color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.3; }
[data-page="collection"] .collection-kind::before, [data-page="collection"] .collection-chip [class^="block-"]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--piece-line); }
[data-page="collection"] .collection-chip > span { gap: 6px; }
[data-page="collection"] .collection-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-page="collection"] .collection-row-name { font-family: var(--font-term); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; }
[data-page="collection"] .collection-row-meaning { font-size: 13px; color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-page="collection"] .collection-row.is-new .collection-row-name { color: var(--ink-2); }
[data-page="collection"] .collection-row-marks { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
[data-page="collection"] .collection-mark { font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; border-radius: 999px; padding: 1px 8px; }
[data-page="collection"] .collection-mark.is-learned { background: var(--accent-bg); color: var(--accent-ink); }
[data-page="collection"] .collection-mark.is-read { color: var(--suffix-ink); padding-inline: 0; }
[data-page="collection"] .collection-item > .collection-entry { padding: 4px 16px 18px; border-top: 1px dashed var(--line); }
/* 좁은 화면의 펼침은 누른 줄 바로 아래라 이름·뜻 머리를 되풀이하지 않는다(검수 전 표시만 남김). */
[data-page="collection"] .collection-item > .collection-entry .collection-entry-name, [data-page="collection"] .collection-item > .collection-entry .collection-entry-meaning, [data-page="collection"] .collection-item > .collection-entry .collection-kind { display: none; }
[data-page="collection"] .collection-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
[data-page="collection"] .collection-entry-name { margin: 0; font-family: var(--font-term); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: 0; }
[data-page="collection"] .collection-entry-meaning { flex-basis: 100%; margin: 0; font-size: 15px; color: var(--ink-2); }
[data-page="collection"] .collection-entry > .mopi-guide { margin-top: 4px; }
[data-page="collection"] .collection-detail { display: none; }
[data-page="collection"] .collection-detail-empty { display: grid; place-items: center; min-height: 240px; }
[data-page="collection"] .collection-empty { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  [data-page="collection"] .collection-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
  [data-page="collection"] .collection-detail { display: block; position: sticky; top: var(--space-6); max-height: calc(100vh - 2 * var(--space-6)); overflow-y: auto; overscroll-behavior: contain; }
  [data-page="collection"] .collection-tools { position: static; flex-direction: row; flex-wrap: nowrap; align-items: center; }
  [data-page="collection"] .collection-search { flex: 0 1 340px; }
  [data-page="collection"] .collection-filters { flex: 1 1 auto; flex-wrap: nowrap; }
}
.piece-map-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-ink); font-size: 14px; font-weight: 700; }
/* 조각 지도(D-162): 가운데 조각 + 최대 6가지. 넓은 화면은 지도 | 안내·같이 쓰인 조각 두 열 */
.piece-map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.piece-map-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; }
.piece-map-head .block { font-size: 28px; }
.piece-map-meaning { margin: 0; font-size: 17px; font-weight: 700; }
.piece-map-count { margin: 0 0 0 auto; font-size: 14px; }
.piece-tree { position: relative; height: 340px; background: var(--card); border-radius: var(--radius-card); overflow: hidden; }
.piece-tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.piece-line { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.piece-line.is-read { stroke: var(--piece-line); stroke-width: 2; stroke-dasharray: none; }
.piece-branches { list-style: none; margin: 0; padding: 0; }
.piece-node { position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 40%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; border-radius: 14px; background: var(--fill-soft); border: 1.5px solid var(--line); font-size: 12.5px; line-height: 1.3; text-align: center; color: var(--ink-2); overflow-wrap: anywhere; }
.piece-node b { font-family: var(--font-term); font-size: 14px; color: var(--ink); letter-spacing: 0; }
.piece-node.is-count { background: var(--card); border-style: dashed; border-color: var(--line-dash); font-weight: 700; white-space: nowrap; max-width: none; }
.piece-center { left: 50%; top: 50%; max-width: 46%; padding: 10px 16px; border: 0; background: var(--piece-bg); color: var(--piece-ink); font-size: 13px; font-weight: 700; z-index: 1; }
.piece-center b { font-size: 22px; color: var(--piece-ink); }
.piece-more { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.piece-more li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.piece-more li:last-child { border-bottom: 0; }
.piece-more b { font-family: var(--font-term); overflow-wrap: anywhere; }
.piece-siblings { display: flex; flex-wrap: wrap; gap: 8px; }
.piece-sibling { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--piece-bg); color: var(--piece-ink); font-family: var(--font-term); font-weight: 700; font-size: 16px; letter-spacing: 0; text-decoration: none; }
.piece-sibling:hover { box-shadow: inset 0 0 0 2px var(--piece-line); }
.piece-sibling:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.piece-map-tiny { font-size: 13px; margin: 0; }
@media (min-width: 720px) { .piece-tree { height: 420px; } .piece-node { max-width: 32%; } .piece-node b { font-size: 16px; } .piece-node { font-size: 13.5px; } }
@media (min-width: 1024px) {
  .piece-map-layout { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
  .piece-map-head { grid-column: 1 / -1; }
  .piece-tree { height: 480px; }
}
.reference-actions { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; }

/* 업적·배지(D-155). 배지는 장식(aria-hidden)이고 이름·목표·남은 양은 글로 읽힌다. 미달성은 배지만 흐리게 하고 글씨 대비는 유지한다. */
.ach-badge { --ach-bg: var(--fill); --ach-ring: var(--line-strong); --ach-ink: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--ach-bg); box-shadow: inset 0 0 0 3px var(--ach-ring); color: var(--ach-ink); }
.ach-badge svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ach-badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ach-badge.is-small { flex-basis: 40px; width: 40px; height: 40px; box-shadow: inset 0 0 0 2px var(--ach-ring); }
.ach-badge.is-small svg { width: 20px; height: 20px; }
.ach-badge.is-locked { opacity: .5; filter: grayscale(1); }
.ach-badge.tier-bronze { --ach-bg: #F6E3CF; --ach-ring: #B6773D; --ach-ink: #6E4115; }
.ach-badge.tier-silver { --ach-bg: #E9ECF2; --ach-ring: #8E97A8; --ach-ink: #3D4556; }
.ach-badge.tier-gold { --ach-bg: #FFF0C2; --ach-ring: var(--gold); --ach-ink: var(--notice-ink); }
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 720px) { .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ach-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); min-width: 0; }
.ach-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ach-name { margin: 0; font-size: 16px; line-height: 1.35; text-wrap: balance; }
.ach-tier { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ach-goal { margin: 0; font-size: 14px; color: var(--ink-2); }
.ach-card .note { margin: 0; }
.ach-bar { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.ach-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ach-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.ach-strip-list:empty { display: none; }
.ach-mini { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ach-mini-text { display: grid; min-width: 0; font-size: 14px; }
.ach-mini-text .note { font-size: 12.5px; }
.ach-strip > .btn { align-self: flex-start; }

/* D-104: 텍스트 링크를 공통 버튼/메뉴로 통일한다. */
.brand-link { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-weight:700; text-decoration:none; }
.footer-actions { display:flex; flex-wrap:wrap; gap:8px; }
.business-info .footer-actions .btn { font-size:12px; color:var(--ink-2); font-weight:600; }
.guest-signin { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.guest-signin > p { min-width:0; }
.guest-signin > .btn { flex:0 0 auto; }
.language-options { flex-wrap:wrap; gap:8px; }
.language-options a[aria-current] { color:var(--ink); background:var(--fill); border-color:var(--line-strong); }
.back-link:active, .row-card:active, .menu-row:active, .study-category:active, .public-entry:active { background:var(--fill); }
summary:active { background:var(--fill); border-radius:12px; }
a.chip { color:var(--ink); text-decoration:none; }
/* 마케팅 소재: 관리 화면의 기존 컴포넌트·입력·행동 크기를 유지한다. */
.marketing-studio [hidden]{display:none!important}
.marketing-create-grid,.marketing-assets{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.marketing-create-grid>* ,.marketing-assets>*{min-width:0}
.marketing-options{border:1px solid var(--line,#DDE3DD);border-radius:12px;padding:16px;min-width:0}
.marketing-options legend{font-weight:700;padding:0 6px}
.marketing-actions{display:flex;flex-wrap:wrap;gap:8px}
.marketing-caption{white-space:normal;overflow-wrap:anywhere}
.marketing-previews{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px}
.marketing-preview.btn{display:block;flex:0 0 auto;width:200px;height:auto;min-height:44px;padding:0;overflow:hidden}
.marketing-preview img{display:block;width:100%;height:auto}
.marketing-video{display:block;width:100%;max-width:270px;max-height:480px;background:#222723;border-radius:12px}
.marketing-asset textarea{min-height:100px}
.marketing-asset details form{padding:16px 0}
.marketing-asset h2{overflow-wrap:anywhere}
.marketing-asset{scroll-margin-top:24px;align-content:start}
.marketing-how{align-self:start}
@media(min-width:840px){.marketing-create-grid{grid-template-columns:minmax(0,560px) minmax(0,1fr)}.marketing-assets{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Flow 장면은 생성 순서대로 살펴보고 각각 가져온다. */
.marketing-flow-grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.marketing-flow-scene { min-width: 0; }
.marketing-flow-steps { padding-left: 24px; }
.marketing-flow textarea[readonly] { min-height: 160px; font-size: 14px; }
@media (min-width: 1000px) { .marketing-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 무료체험: 선택한 구독의 오늘/첫 청구 조건을 같은 읽기 순서로 제공한다. */
.membership-timeline { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.membership-timeline[hidden] { display:none; }
.membership-timeline li { display:grid; gap:4px; padding-left:16px; border-left:2px solid var(--line); }
.membership-timeline span { overflow-wrap:anywhere; }

/* D-114: 첫 실행의 가치 체험. 학습·결제는 기존 공용 화면으로 연결한다. */
.onboarding { max-width:960px; margin-inline:auto; min-height:calc(100svh - 96px - var(--safe-top) - var(--safe-bottom)); }
.onboarding-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* 시작 단계 3칸(D-218 v3 시안 onboard): 막대 + 이름, 지난 칸·지금 칸은 보라 */
.onboarding-progress.ob-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 13px; color: var(--ink-3); }
.ob-steps li { display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.ob-steps li::before { content: ""; height: 4px; border-radius: 999px; background: var(--fill); }
.ob-steps li.is-done::before, .ob-steps li.is-now::before { background: var(--accent); }
.ob-steps li.is-now { color: var(--ink); font-weight: 700; }
.ob { display: flex; flex-direction: column; gap: 24px; max-width: 560px; margin: 0 auto; width: 100%; }
.ob-hello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ob-mopi .mopi, .ob-mopi img { width: 140px; height: auto; }
.ob-hello h1 { font-size: 30px; line-height: 1.25; white-space: pre-line; }
.ob-hello .muted { max-width: 360px; }
.ob-word { margin: 8px 0 0; font-family: var(--font-term); font-weight: 700; font-size: 36px; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; }
.ob-word > [class^="block-"] { padding-bottom: 2px; margin-right: 2px; background: linear-gradient(transparent 62%, var(--piece-bg) 62%); box-shadow: inset 0 -3px 0 var(--piece-line); }
.ob-mean { margin: 0; font-size: 16px; color: var(--ink-2); }
.ob-mean b { color: var(--ink); }
.ob-actions { display: flex; flex-direction: column; gap: var(--gap-cta-list); }
.ob-pick { display: flex; flex-direction: column; gap: 12px; }
.ob-pick h1 { font-size: 26px; }
.onboarding-goals fieldset.ob-topics, .ob-topics { border: 0; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-topic { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--card); cursor: pointer; min-height: 120px; }
.ob-topic b { font-size: 18px; }
.ob-topic small { font-size: 13px; color: var(--ink-2); }
.ob-topic-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); font-weight: 800; margin-bottom: 6px; }
.ob-topic.is-on { border-color: var(--accent); background: var(--accent-bg); }
.ob-topic.is-on .ob-topic-ic { background: var(--accent); color: var(--on-accent); }
.ob-topic.is-off { opacity: .5; cursor: default; }
.ob-topic:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.onboarding-plan-steps .is-muted a { color: var(--ink-2); }
.onboarding-stage { display:flex; flex-direction:column; gap:24px; margin-block:auto; padding-block:12px 24px; min-width:0; }
.onboarding-stage h1 { font-size:clamp(28px,4vw,42px); line-height:1.25; white-space:pre-line; text-wrap:balance; }
.onboarding-layout { display:grid; align-items:center; gap:32px; }
.onboarding-intro { display:flex; flex-direction:column; gap:24px; min-width:0; }
.onboarding-scene { display:flex; flex-direction:column; gap:16px; }
.onboarding-scene .mopi-guide { flex-direction:column; align-items:center; gap:8px; }
.onboarding-scene .mopi-guide .mopi { width:144px; height:144px; flex:0 0 144px; align-self:center; }
.onboarding-scene .mopi-speech::before { display:none; }
.onboarding-example { display:flex; flex-wrap:wrap; gap:8px; }
.onboarding-example .chip { font-size:18px; background:var(--accent-bg); }
.onboarding-word { font-family:var(--font-term); font-size:28px; overflow-wrap:anywhere; }
.onboarding-goals fieldset { border:0; margin:0; padding:0; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.onboarding-choice { display:flex; align-items:flex-start; gap:12px; padding:16px; cursor:pointer; min-width:0; }
.onboarding-choice > span { min-width:0; gap:6px; }
.onboarding-choice input { margin-top:4px; flex:0 0 auto; accent-color:var(--accent-ink); }
.onboarding-choice:has(input:checked) { border-color:var(--accent-ink); background:var(--accent-bg); }
.onboarding-choice:has(input:disabled) { opacity:0.6; cursor:default; }
.onboarding-choice:focus-within { outline:2px solid var(--accent-ink); outline-offset:3px; }
.onboarding-choice:hover:not(:has(input:disabled)) { border-color:var(--ink-2); }
.onboarding-choice:active:not(:has(input:disabled)) { background:var(--accent-bg); }
.onboarding-actions { min-width:0; }
.onboarding-plan { min-width:0; gap:16px; }
.onboarding-plan .badge { align-self:flex-start; }
.onboarding-plan-steps { display:flex; flex-direction:column; gap:8px; padding-left:24px; margin:0; }
.onboarding-results { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.onboarding-results .chip { overflow-wrap:anywhere; max-width:100%; }
.onboarding-stage > button { align-self:flex-start; }
@media (min-width:840px) { .onboarding-layout { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px; } }
@media (max-width:479px) {
  .onboarding-goals fieldset { grid-template-columns:1fr; }
  .onboarding-scene .mopi-guide .mopi { width:112px; height:112px; flex-basis:112px; }
  .onboarding-stage { gap:20px; }
  .onboarding-layout { gap:24px; }
  .onboarding-intro { gap:16px; }
}

/* 레벨 테스트(D-183): 온보딩 「어디서 시작할까요?」와 공부하기 「시작 단계 다시 찾기」가 같은 화면을 쓴다. 정답 색 공개 없음. */
.placement-offer { width:100%; text-align:left; font:inherit; color:inherit; border:1px solid var(--line); }
.placement-offer .badge { align-self:flex-start; background:var(--accent-bg); color:var(--accent-ink); font-weight:700; }
.placement-head { display:flex; flex-direction:column; gap:12px; }
.placement-levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; list-style:none; margin:0; padding:0; font-size:13px; font-weight:700; color:var(--ink-3, var(--ink-2)); text-align:center; }
.placement-levels > li { border-bottom:3px solid var(--line); padding-bottom:6px; }
.placement-levels > .is-done { color:var(--ink-2); border-color:color-mix(in srgb, var(--accent) 45%, var(--card)); }
.placement-levels > .is-on { color:var(--accent-ink); border-color:var(--accent); }
.placement-count { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-2); }
.placement-bar { flex:1; height:6px; border-radius:999px; background:var(--fill); overflow:hidden; }
.placement-bar > i { display:block; height:100%; background:var(--accent); }
.placement-body { display:flex; flex-direction:column; gap:16px; width:100%; max-width:var(--width-reading, 640px); margin-inline:auto; }
.placement-card { text-align:center; align-items:center; display:flex; flex-direction:column; gap:8px; }
.onboarding-stage .placement-card h1, .placement-ask { font-size:14px; font-weight:500; line-height:1.4; color:var(--ink-2); white-space:normal; }
.placement-term { justify-content:center; font-size:clamp(30px,8vw,44px); overflow-wrap:anywhere; margin:0; }
.placement-kinds { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:0; font-size:12px; font-weight:700; }
.placement-kind-prefix { color:var(--prefix-ink); } .placement-kind-root { color:var(--root-ink); } .placement-kind-suffix { color:var(--suffix-ink); }
.placement-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.placement-choice { min-height:56px; padding:8px 12px; border-radius:var(--radius-btn); border:1px solid var(--line); border-bottom-width:3px; background:var(--card); color:var(--ink); font:inherit; font-weight:600; overflow-wrap:anywhere; cursor:pointer; touch-action:manipulation; }
.placement-choice:hover { border-color:var(--ink-2); }
.placement-choice:active { background:var(--accent-bg); }
.placement-choice:focus-visible, .placement-link:focus-visible, .placement-offer:focus-visible { outline:2px solid var(--accent-ink); outline-offset:3px; }
.placement-link { align-self:center; min-height:var(--control-compact); padding:0 12px; border:0; background:none; color:var(--ink-2); font:inherit; font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; display:inline-flex; align-items:center; }
.placement-link:hover { color:var(--ink); }
.placement-tally { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; list-style:none; margin:0; padding:0; }
.placement-tally > li { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:12px; background:var(--fill); font-size:12px; color:var(--ink-2); text-align:center; }
.placement-tally strong { font-size:15px; color:var(--ink); }
.placement-tally > .is-skip strong { color:var(--ink-2); }
.placement-actions { min-width:0; }
.placement-stage { gap:10px; }
.page-placement { max-width:960px; margin-inline:auto; display:flex; flex-direction:column; gap:16px; }
.placement-title { font-size:15px; font-weight:700; min-width:0; overflow-wrap:anywhere; }
.study-placement { border-radius:var(--radius-card); border:1px solid var(--line); }
.placement-root .badge, .onboarding-intro > .badge { align-self:flex-start; }
@media (min-width:840px) { .placement-body { max-width:560px; } }
@media (prefers-reduced-motion:no-preference) { .placement-body { animation:placement-in .18s ease-out; } }
@keyframes placement-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* 선택 분석 안내: 카드가 아닌 본문 맨 아래 얇은 줄(사업자 정보와 같은 무게). 문구·동의 조건은 그대로, 크기만 줄인다(11-11 대표 지시). */

/* 뜻 고르기 (D-134): 단어를 가운데 크게, 모피는 한 줄 힌트, 보기는 번호와 함께 PC 2×2 */
.meaning-quiz { width: 100%; max-width: var(--width-reading); margin-inline: auto; gap: 20px; }
.meaning-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.meaning-head .listen-row { justify-content: center; }
.meaning-term { font-family: var(--font-term); font-weight: 700; font-size: clamp(40px, 9vw, 52px); line-height: 1.1; letter-spacing: 0; overflow-wrap: anywhere; }
.meaning-ask { font-size: 14px; color: var(--ink-2); }
.meaning-quiz .mopi-guide { align-items: center; justify-content: center; }
.meaning-quiz .mopi-guide .mopi { width: 44px; height: 44px; flex: 0 0 44px; align-self: center; }
.meaning-quiz .mopi-speech { flex: 0 1 auto; padding: 8px 14px; border-radius: 14px; font-size: 14px; }
.meaning-quiz .mopi-speech::before { top: 50%; margin-top: -5px; }
.meaning-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.meaning-choices .choice { display: flex; align-items: center; gap: 12px; min-height: 60px; border-width: 1.5px; border-radius: 16px; }
.choice-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; background: var(--fill); color: var(--ink-2); display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; }
.meaning-choices .choice:hover { border-color: var(--line-strong); }
.meaning-choices .choice.is-wrong { background: var(--error-bg); }
/* 조각 게임 틀린 보기 튕김(games-ui.js wrongBounce)이 화면 가장자리 밖으로 나가 가로 스크롤을 만들지 않게 본문 틀 가장자리에서만 자른다(여백 안에서는 보인다) */
.main:has(> .page-games) { overflow-x: clip; }
.meaning-choices .choice.is-wrong .choice-num { background: var(--error); color: var(--on-accent); }
@media (min-width: 720px) { .meaning-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.meaning-quiz .mopi-dialogue-line { min-height: 0; }

/* 복습 끝 요약·남은 카드 칩 (D-144) */
.review-remain:empty { display: none; }
.review-remain { flex: none; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--fill); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.review-streak { margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--accent); }
.review-summary { align-items: stretch; padding-top: 24px; text-align: left; }
/* 두 판째부터(D-185) 「이어서 n장」과 「오늘은 여기까지」는 같은 크기로 나란히 둔다. 좁으면 위아래. */
.review-continue { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.review-card.is-retry { border-style: dashed; }
.summary-grid { display: grid; gap: 12px; }
.summary-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.summary-card h2 { margin: 0 0 10px; font-size: 15px; }
.dist-bar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--fill); }
.dist-bar > i { display: block; min-width: 6px; }
.dist-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 14px; }
.dist-legend li { display: flex; align-items: center; gap: 6px; }
.dist-legend b { margin-left: auto; }
.dist-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dist-1 { background: color-mix(in srgb, var(--ink-2) 45%, var(--card)); }
.dist-2 { background: color-mix(in srgb, var(--accent) 35%, var(--card)); }
.dist-3 { background: color-mix(in srgb, var(--accent) 70%, var(--card)); }
.dist-4 { background: var(--accent); }
.forecast { margin: 0; font-size: 16px; font-weight: 600; }
.retry-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.retry-list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
@media (min-width: 720px) { .review-summary { max-width: 760px; margin-inline: auto; width: 100%; } .summary-grid:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; align-items: start; } }

/* 로그인 화면 껍데기(/login, 로컬 전용) */
.login-shell { display: grid; gap: var(--space-5, 20px); padding-block: var(--space-8, 32px); text-align: center; }
.login-brand { display: grid; justify-items: center; gap: 8px; }
.login-brand h1 { margin: 0; font-size: 32px; font-weight: 700; }
.login-brand p { margin: 0; }
.login-guest, .login-legal { margin: 0; }
.login-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.login-guest .btn { min-width: 160px; }

/* 홈 복습 카드의 다음 복습 예보 한 줄 */
.row-sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* D-147: 리그 첫 화면 — 상위 5명 무대 + 30명 순위표. 375px은 무대가 위, 720px부터 2열. */
.league-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 720px) { .league-board { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .league-stage { position: sticky; top: var(--space-4); } }
.league-stage { position: relative; overflow: hidden; border-radius: var(--radius-card); padding: 28px 8px 0; background: radial-gradient(120% 90% at 50% 100%, var(--stage-glow) 0%, var(--stage-bg) 55%, var(--stage-bg-2) 100%); color: #fff; }
.league-stage-pods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: end; }
.league-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.league-pod.pos-1 { grid-column: 1; } .league-pod.pos-2 { grid-column: 2; } .league-pod.pos-3 { grid-column: 3; } .league-pod.pos-4 { grid-column: 4; } .league-pod.pos-5 { grid-column: 5; }
.league-pod { grid-row: 1; }
.league-pod img { width: min(100%, 52px); height: auto; aspect-ratio: 1; object-fit: contain; filter: brightness(.8) saturate(.7); }
.league-pod.is-me img { width: min(100%, 60px); filter: none; }
/* 단상 이름·점수는 13px(보조 글자 최소). 좁은 단상에서는 이름을 두 줄까지 보이고 넘치면 말줄임(D-181). */
.league-pod-name { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; font-size: 13px; line-height: 1.2; font-weight: 800; text-align: center; padding-inline: 2px; }
.league-pod.is-me .league-pod-name { color: var(--mopi-tint); }
.league-pod-block { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; border-radius: 9px 9px 0 0; background: linear-gradient(180deg, var(--stage-block-top), var(--stage-block)); transform-origin: bottom; }
.league-pod.h1 .league-pod-block { height: 124px; } .league-pod.h2 .league-pod-block { height: 96px; } .league-pod.h3 .league-pod-block { height: 80px; } .league-pod.h4 .league-pod-block { height: 68px; } .league-pod.h5 .league-pod-block { height: 56px; }
.league-pod-block b { font-size: 22px; line-height: 1; font-weight: 900; color: #fff; }
.league-pod-block span { font-size: 13px; font-weight: 700; color: var(--stage-ink); }
.league-pod.is-first .league-pod-block { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.league-pod.is-first .league-pod-block b, .league-pod.is-first .league-pod-block span { color: var(--gold-ink); }
.league-pod.is-me .league-pod-block { background: linear-gradient(180deg, var(--mopi-body), var(--mopi-body-deep)); }
.league-pod.is-me .league-pod-block b, .league-pod.is-me .league-pod-block span { color: var(--gold-ink); }
.league-crown { position: absolute; top: -22px; fill: var(--gold); stroke: #fff; stroke-width: 2; width: 30px; height: 20px; }
.league-curtain { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; background: repeating-linear-gradient(90deg, var(--stage-curtain) 0 18px, var(--stage-curtain-2) 18px 36px); }
.league-curtain.l { left: 0; } .league-curtain.r { right: 0; }
.league-curtain[hidden] { display: none; }
.league-stage.is-reveal .league-pod.is-hidden, .league-stage.is-reveal .league-crown { opacity: 0; }
.ranking .is-top { box-shadow: inset 3px 0 0 var(--gold); }
.ranking .is-cut { border-bottom: 2px dashed var(--gold); }

/* D-172: 리그 화면 — 히어로(게스트 예시 · 참가 전 · 진행 중 · 마감) → 이번 주 순위 | 옆 칸(지난주의 나 · 점수 받는 법) → 친구 리그.
   무대 색은 깊은 보라(D-228)·금색·모피. */
.league-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.league-grid > * { min-width: 0; }
.league-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.league-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: 20px; }
.league-hero-mopi { width: 72px; height: 72px; object-fit: contain; }
.league-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.league-hero-copy h2 { margin: 0; font-size: 20px; line-height: 1.35; text-wrap: balance; }
.league-hero-copy p { margin: 0; }
.league-hero-copy form { margin: 0; }
.league-hero-rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.league-hero-rank b { font-size: 44px; line-height: 1; font-weight: 900; color: var(--accent-2-ink); }
.league-hero-of { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.league-hero-line { font-size: 15px; color: var(--ink-2); }
.league-hero-line b { font-size: 18px; color: var(--ink); }
.league-hero-cta { width: 100%; }
.league-hero-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.league-hero-facts > div { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: var(--fill-soft); min-width: 0; }
.league-hero-facts dt { font-size: 12.5px; color: var(--ink-2); }
.league-hero-facts dd { margin: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
/* 게스트 미리보기: 고정 예시(실제 사람·점수 아님)라 흐리게 두고 「예시 화면」 배지를 단다 */
.league-rules h2 { margin: 0; font-size: 17px; }
.league-rule-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.league-rule-tiles li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--accent-bg); min-width: 0; }
.league-rule-tiles b { font-size: 22px; line-height: 1.1; color: var(--accent-ink); }
.league-rule-tiles span { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.league-rule-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.league-weekly h2 { margin: 0; }
.league-weekly .row-between { flex-wrap: wrap; gap: 4px var(--space-3); }
/* 게스트 체험(시안 ①): 예시 배지·계산기·예시 리그. 보라는 「나 (예상)」 줄 한 곳뿐이다 */
.league-sample-badge { border: 1px dashed var(--line-dash); background: var(--card); font-weight: 800; }
.league-weekly h2 .league-sample-badge { margin-left: 6px; vertical-align: middle; }
.league-hero.is-guest { align-items: start; }
.league-try { display: grid; gap: 12px; width: 100%; }
.league-try-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.league-try-levels legend, .league-try-days > span { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.league-try-level { position: relative; display: block; min-width: 0; cursor: pointer; }
.league-try-level input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.league-try-level > span { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 6px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); text-align: center; }
.league-try-level b { font-size: 15px; }
.league-try-level small { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.league-try-level input:checked + span { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.league-try-level input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.league-try-days { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.league-try-days > span { grid-column: 1 / -1; }
.league-try-days input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); }
.league-try-days output { min-width: 3.5em; text-align: right; font-weight: 800; }
.league-try-side { grid-column: 1 / -1; display: grid; gap: 10px; min-width: 0; }
.league-try-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border-radius: 14px; background: var(--fill-soft); }
.league-try-score { font-size: 28px; line-height: 1.1; font-weight: 900; color: var(--ink); }
.league-try-rank { font-size: 15px; font-weight: 800; }
.league-try-gap { flex-basis: 100%; font-size: 14px; color: var(--ink-2); }
.league-try-formula { margin: 0; font-size: 13px; color: var(--ink-2); }
.league-try-board .is-me { background: var(--surface-brand-subtle); box-shadow: inset 3px 0 0 var(--line-brand); color: var(--surface-brand-heavy); font-weight: 800; }
.league-try-assume { margin: 0; }
@media (min-width: 720px) {
  .league-hero { grid-template-columns: 96px minmax(0, 1fr); padding: 24px; }
  .league-hero-mopi { width: 96px; height: 96px; }
  .league-hero-cta { width: auto; min-width: 220px; }
  .league-hero-facts > div { padding: 10px 12px; }
  .league-hero-facts dd { font-size: 18px; }
}
@media (min-width: 840px) {
  .league-try-side { grid-column: auto; align-self: center; }
  .league-hero { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 380px); gap: var(--space-6); padding: 24px 28px; }
  .league-hero-mopi { width: 112px; height: 112px; }
  .league-hero-facts { grid-column: auto; }
  .league-hero-copy h2 { font-size: 22px; }
  .league-hero-rank b { font-size: 56px; }
}
/* 1100 이상: 위 히어로 전체 폭, 아래 이번 주 순위 | 옆 칸. 순위표가 없으면(게스트·참가 전) 옆 칸 두 카드를 나란히 */
@media (min-width: 1100px) {
  .league-grid { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); grid-template-rows: auto auto auto auto 1fr; }
  .league-grid > .league-hero { grid-column: 1 / -1; }
  /* 순위표는 2~5행에 걸치고 남는 높이는 마지막 1fr 행이 받아 옆 칸 카드 사이가 벌어지지 않는다 */
  .league-grid > .league-weekly { grid-column: 1; grid-row: 2 / 6; }
  .league-grid > .league-side { grid-column: 2; grid-row: 2; }
  .league-grid > .league-friends, .league-grid > .league-blocked { grid-column: 2; }
  .league-grid:not(:has(> .league-weekly)) > * { grid-column: 1 / -1; grid-row: auto; }
  .league-grid:not(:has(> .league-weekly)) > .league-side { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
}
@media (min-width: 1100px) {
  .league-stage { padding: 36px 16px 0; }
  .league-stage-pods { gap: 10px; }
  .league-pod img { width: min(100%, 84px); } .league-pod.is-me img { width: min(100%, 96px); }
  .league-pod-name { font-size: 13px; }
  .league-pod.h1 .league-pod-block { height: 180px; } .league-pod.h2 .league-pod-block { height: 140px; } .league-pod.h3 .league-pod-block { height: 120px; } .league-pod.h4 .league-pod-block { height: 96px; } .league-pod.h5 .league-pod-block { height: 80px; }
  .league-pod-block { border-radius: 14px 14px 0 0; padding-top: 10px; } .league-pod-block b { font-size: 34px; } .league-pod-block span { font-size: 13px; }
  .league-crown { top: -30px; width: 46px; height: 30px; }
}

/* D-227 리그 등급·결정: 머리 결정 수 · 등급 띠 · 기준 점수 막대 · 하위권 순위 줄임 · 결과 정리 중 · 새 주 결과 연출 · 모피 꾸미기 시트.
   색은 배지 그림 안에만 두고 바탕·카드는 무채색(D-163·D-228). 보라 면은 막대·주 버튼뿐. */
.league-page .page-head.league-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; width: 100%; }
.crystal-count { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-compact); padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); font-weight: 800; color: var(--ink); text-decoration: none; flex: none; }
.crystal-count img { width: 22px; height: 22px; }
button.crystal-count { font: inherit; font-weight: 800; cursor: pointer; }
.league-gems { margin: 0; }
button.crystal-count:hover { border-color: var(--line-strong); }
button.crystal-count:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.league-notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); background: var(--fill-soft); font-weight: 600; }
.tier-strip { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--pad-card); }
.tier-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.tier-row li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--ink-3); text-align: center; overflow-wrap: anywhere; }
.tier-row img { width: 100%; max-width: 44px; height: auto; }
.tier-row li.is-past { color: var(--ink-2); }
.tier-row li.is-now { color: var(--ink); font-weight: 800; }
.tier-row li.is-now img { max-width: 64px; }
.tier-row li.is-now::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tier-now-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--space-3); margin: 0; font-size: 14px; color: var(--ink-2); }
.tier-now-line b { font-size: 16px; color: var(--ink); }
.tier-last { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .tier-row img { max-width: 56px; } .tier-row li.is-now img { max-width: 80px; } .tier-row li { font-size: 13px; } }
.goal { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.goal-bar { position: relative; height: 10px; border-radius: var(--radius-full); background: var(--fill); overflow: hidden; }
.goal-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.goal-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--space-2); margin: 0; font-size: 14px; color: var(--ink-2); }
.goal-done { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; min-height: 40px; margin: 0; padding: 4px 14px 4px 6px; border-radius: var(--radius-full); background: var(--accent-bg); color: var(--accent-ink); font-weight: 800; font-size: 15px; }
.goal-done img { width: 30px; height: auto; }
.goal-done.is-new { animation: league-jelly 480ms cubic-bezier(.3,1.4,.5,1) both; }
@keyframes league-jelly { 0% { transform: scale(.6); opacity: 0; } 55% { transform: scale(1.08, .92); opacity: 1; } 80% { transform: scale(.97, 1.03); } 100% { transform: none; } }
.league-try-tier { font-size: 14px; color: var(--ink-2); }
.rank-gap { text-align: center; color: var(--ink-3); font-size: 13px; padding: 4px 0; list-style: none; }
.league-more-rank > summary { min-height: var(--control-compact); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-s); font-weight: 700; cursor: pointer; list-style: none; }
.league-more-rank > summary::-webkit-details-marker { display: none; }
.league-more-rank[open] > summary { margin-bottom: var(--space-3); }
.league-settling { display: flex; align-items: center; gap: var(--space-4); padding: var(--pad-card); }
.league-settling > img { width: 72px; height: 72px; flex: none; object-fit: contain; }
/* 모피 소품: 모피 그림(정사각) 위에 같은 크기의 SVG를 겹친다 */
.mopi-wear { position: relative; display: inline-block; flex: none; }
.mopi-wear > img { display: block; width: 100%; height: auto; }
.mopi-wear > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mopi-wear > svg[hidden] { display: none; }
span.league-hero-mopi { display: block; }
.league-pod .league-pod-mopi { display: block; width: min(100%, 60px); }
.league-pod .league-pod-mopi > img { width: 100%; }
@media (min-width: 1100px) { .league-pod .league-pod-mopi { width: min(100%, 96px); } }
/* 새 주 결과(전체 화면 한 번). 막은 무대와 같은 깊은 보라 */
.league-result { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow-y: auto; padding: calc(var(--space-6) + var(--safe-top, 0px)) var(--gutter) calc(var(--space-6) + var(--safe-bottom, 0px)); background: var(--bg); }
.league-result[hidden] { display: none; }
html.league-result-open { overflow: hidden; }
.league-result-curtain { position: fixed; top: 0; bottom: 0; width: 50%; z-index: 2; background: repeating-linear-gradient(90deg, var(--stage-curtain) 0 18px, var(--stage-curtain-2) 18px 36px); }
.league-result-curtain.l { left: 0; } .league-result-curtain.r { right: 0; }
.league-result-curtain[hidden] { display: none; }
.league-result-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 100%; max-width: var(--width-form); text-align: center; }
.league-result-week { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.league-result-badge { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.league-result-badge > img { grid-area: 1 / 1; width: 150px; height: auto; }
.league-result-badge > .badge-rough { opacity: 0; }
.league-result-mopi { position: absolute; width: 92px; right: -34px; bottom: -6px; }
.league-result.is-keep .league-result-mopi { display: none; }
.league-result-body h2 { margin: 0; font: var(--type-title1); text-wrap: balance; }
.league-result-lines { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-l); }
.league-result-lines li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--menu-height); padding: var(--pad-row-one) var(--space-4); }
.league-result-lines li + li { border-top: 1px solid var(--line); }
.league-result-lines li > span:first-child { font-weight: 600; }
.gain { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 800; }
.gain img { width: 20px; height: 20px; }
.league-result-body > p.muted { margin: 0; }
/* 모피 꾸미기 시트: 폰은 아래에서 올라오는 시트, 600 이상은 가운데 창 */
.league-sheet { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; padding: var(--space-5) var(--gutter) calc(var(--space-6) + var(--safe-bottom, 0px)); border: 0; border-radius: 24px 24px 0 0; background: var(--card); color: var(--ink); overflow-y: auto; }
.league-sheet[open] { display: flex; flex-direction: column; gap: var(--space-4); }
.league-sheet:not(:modal)[open] { position: fixed; inset: auto 0 0 0; z-index: 50; border-top: 1px solid var(--line); }
.league-sheet::backdrop { background: var(--effect-dimmer); }
.league-sheet-head { display: flex; align-items: center; gap: var(--space-3); }
.league-sheet-head h2 { margin: 0 auto 0 0; font: var(--type-title2); }
.league-sheet-head form { margin: 0; }
.crystal-count.is-static { min-height: 40px; }
.dress-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-4) 0 var(--space-1); border-radius: var(--radius-l); background: var(--fill-soft); }
.dress-mopi { width: 140px; z-index: 1; }
.dress-floor { width: 130px; height: 14px; margin-top: -12px; border-radius: 50%; background: var(--effect-ground); }
.dress-line { min-height: 1.5em; margin: 0; padding-bottom: var(--space-2); font-size: 14px; color: var(--ink-2); }
.dress-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.dress-item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dress-item form { margin: 0; }
.dress-item .btn { min-height: 40px; padding-inline: 6px; font-size: 13px; }
.dress-try { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--card); font: inherit; color: var(--ink); cursor: pointer; text-align: center; }
.dress-try:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.dress-try[aria-pressed="true"], .dress-item.is-wearing .dress-try { border: 2px solid var(--accent); padding: 9px 5px; }
.dress-try .thumb { width: 64px; }
.dress-try .thumb > img { display: block; width: 100%; height: auto; }
.dress-try.is-static { cursor: default; }
.dress-skins { display: flex; flex-direction: column; gap: var(--space-2); }
.dress-skins h3 { margin: 0; font: var(--type-label); }
.dress-skins .note { margin: 0; }
.dress-try .name { font-size: 13px; font-weight: 800; }
.dress-try .price { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.dress-try .price img { width: 14px; height: 14px; }
.dress-tag { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: var(--radius-full); background: var(--fill); color: var(--ink-2); }
.dress-tag.is-on { background: var(--accent-bg); color: var(--accent-ink); }
.league-shield-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0; padding: var(--pad-row-one) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); }
.league-shield-row > span { display: flex; flex-direction: column; min-width: 0; }
.league-shield-row .btn { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.league-shield-row .btn img { width: 16px; height: 16px; }
.league-sheet > .note { margin: 0; }
.league-sheet-policy { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 600px) {
  .league-sheet { width: min(560px, calc(100% - 48px)); max-height: 90vh; margin: auto; padding: var(--space-6); border-radius: 24px; }
  .league-sheet:not(:modal)[open] { inset: 50% auto auto 50%; transform: translate(-50%, -50%); border: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .goal-done.is-new { animation: none; } }
.mopi-reduced-motion .goal-done.is-new { animation: none; }

/* D-218 v3 학습·복습 화면: 단어는 먹색 글자 + 조각마다 얇은 색 밑줄(형광 면 없음). 도감·홈 쪼개 보기의 블록은 그대로.
   보라 면은 주 버튼·진행 막대·정답 표시만. */
.page-learn .block-text, .page-review .block-text { background: none; }
.page-learn .slots .block-tile, .page-review .slots .block-tile { background: var(--piece-bg); }
.page-learn .options .block-tile, .page-review .options .block-tile { background: var(--card); border-color: var(--line-strong); border-bottom-color: var(--piece-line); }
.lv-word { margin: 0; font-family: var(--font-term); font-weight: 700; letter-spacing: 0; line-height: 1.25; overflow-wrap: anywhere; color: var(--ink); }
.lv-word .seg-prefix, .lv-word .seg-root, .lv-word .seg-suffix { background: none; color: var(--ink); padding-bottom: 2px; margin-right: 3px; }
.lv-word .seg-prefix { box-shadow: inset 0 -3px 0 var(--prefix-line); }
.lv-word .seg-root { box-shadow: inset 0 -3px 0 var(--root-line); }
.lv-word .seg-suffix { box-shadow: inset 0 -3px 0 var(--suffix-line); }
.lv-word .seg-none { color: var(--ink-2); }
.lv-word.lv-mid { font-size: clamp(20px, 5.5vw, 24px); }
.lv-word.lv-mid .seg-prefix, .lv-word.lv-mid .seg-root, .lv-word.lv-mid .seg-suffix { margin-right: 2px; }
.lv-word.result-term { display: block; text-align: center; }
.lv-word.review-front { font-size: clamp(30px, 8vw, 40px); }
.lv-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--type-label); color: var(--fg-brand); }
.lv-q { margin: 0; font: var(--type-title2); text-wrap: balance; }
.lv-in-terms { margin: 0; font-size: 14px; }
.lv-in-terms b { font-family: var(--font-term); color: var(--ink); letter-spacing: 0; }
.lv-build { display: flex; justify-content: center; padding: var(--space-5) var(--pad-card); }
.lv-build .slots { justify-content: center; gap: var(--space-2); }
.lv-result { align-items: stretch; }
.lv-ok { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); align-self: center; min-height: 40px; margin: 0; padding: 4px 16px; border-radius: var(--radius-full); background: var(--accent-bg); color: var(--accent-ink); font-weight: 800; }
.lv-explain { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) var(--pad-card) var(--pad-card); }
.piece-list { list-style: none; margin: 0; padding: 0; }
.piece-row { display: grid; grid-template-columns: 8px minmax(0, auto) auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-3); min-height: 48px; border-bottom: 1px solid var(--line); }
.piece-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--piece-line); }
.piece-row > b { font-family: var(--font-term); font-size: 18px; letter-spacing: 0; }
.piece-kind { font-size: 13px; color: var(--ink-2); }
.piece-mean { text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.lv-mean { margin: 0; font-size: 16px; color: var(--ink-2); }
.lv-sum { margin: 0; }
.lv-diff { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 15px; }
.lv-diff > i { width: 8px; height: 8px; border-radius: 50%; background: var(--piece-line); }
.lv-diff b { font-family: var(--font-term); letter-spacing: 0; }
.meaning-choices .choice.is-wrong:disabled { opacity: 1; }

/* 일일 퀘스트 (D-154): 홈 카드와 /quests. 막대·주간 점은 홈 요약(.home-bar·.home-week)을 재사용한다. */
.quests-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.quest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.quest-item { display: grid; gap: 6px; }
.quest-item .home-bar { margin-top: 0; }
.quest-label { font-weight: 600; }
.quest-item.is-done .quest-label { color: var(--ink-2); }
.quest-check { display: inline-flex; align-items: center; color: var(--accent-ink); }
.quest-reward { display: grid; gap: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.quest-box { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.quest-box.is-closed { color: var(--ink-2); }
.quest-box.is-open > .icon { color: var(--accent-ink); }
.quest-badge { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--accent-bg); color: var(--accent-ink); font-weight: 700; }
/* 프로그램으로 옮긴 포커스(클릭·자동 이동)에는 링을 안 보이고, 키보드 포커스에는 기본 링을 남긴다. */
.quest-badge:focus:not(:focus-visible) { outline: none; }
.quest-open { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
@media (min-width: 1024px) { .quests-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
/* 검색 결과 0개의 「혹시」 제안(StudySearch::suggest) */
.search-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.search-suggest-link { min-height: 44px; display: inline-flex; align-items: center; font-family: var(--font-term); text-decoration: none; color: var(--ink); }

.localization-market { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.localization-market .field { flex: 1 1 15rem; min-width: 0; }
.localization-practice .choices .btn { text-align: start; white-space: normal; }
.localization-practice .question-term { font-size: 1.45rem; font-weight: 700; overflow-wrap: anywhere; }
.localization-practice audio { width: 100%; max-width: 20rem; }
.localization-cards { margin-block-start: 1rem; }
.localization-cards li { border-block-start: 1px solid var(--admin-line, #e2e8f0); padding-block-start: .75rem; }

.localization-page > .card { margin-block: 1rem; }

.localization-parts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem .75rem; margin: 0; }
.localization-parts dt { font-weight: 700; }
.localization-parts dd { margin: 0; }
.localization-parts dd span { display: block; }

/* ---------- 친구·그룹 트랙(D-184) ---------- */
.friends-notice { margin: 0 0 var(--space-3); padding: 12px 14px; border-radius: 14px; background: var(--fill-soft); color: var(--ink); }
.friends-notice.is-error { background: var(--notice-bg); color: var(--notice-ink); }
.friends-layout { display: grid; gap: var(--space-4); align-items: start; }
.friends-layout > * { min-width: 0; }
@media (min-width: 840px) { .friends-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .friends-layout.is-single { grid-template-columns: minmax(0, 640px); } }
.friends-list { list-style: none; margin: 0; padding: 0; display: grid; }
.friend-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.friend-row:first-child { border-top: 0; }
.friend-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--accent); font-weight: 700; }
.friend-avatar.is-me { background: var(--accent); color: #fff; }
.friend-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.friend-name small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-2); }
.friend-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--fill); color: var(--ink-2); vertical-align: 1px; }
.friend-badge.is-done { background: var(--accent-bg); color: var(--accent-ink); }
.friend-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.friend-actions form { margin: 0; }
.friend-more { position: relative; }
.friend-more > summary { list-style: none; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border-radius: 12px; font-weight: 700; color: var(--ink-2); }
.friend-more > summary::-webkit-details-marker { display: none; }
.friend-more[open] > summary { background: var(--fill); }
.friend-more-menu { grid-column: 1 / -1; padding: 10px 0 0; }
.friend-row:has(.friend-more[open]) .friend-more { grid-column: 1 / -1; }
.friends-mycode { gap: var(--space-2); flex-wrap: wrap; }
.friends-mycode b { letter-spacing: .06em; }
.friends-preview-list { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; color: var(--ink-2); }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check-row input { width: 20px; height: 20px; flex: none; }
/* 그룹 트랙: 레인마다 번호표 색 4개, 모피가 결승 테이프까지 달린다. 움직임은 transform만, 움직임 줄이기면 멈춤. */
.friends-group-head { gap: var(--space-2); flex-wrap: wrap; align-items: baseline; }
.friends-group-head h2 { margin: 0; overflow-wrap: anywhere; }
.friends-lastweek { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--fill-soft); font-weight: 600; }
/* 그룹 트랙(D-184): 초록 경기장 안 붉은 레인, 흰 점선·출발선, 체크무늬 결승선. 번호표 색 4개는 조각 색(D-131)과 겹치지 않게.
 * 모피: 몸 푸는 중=focus 출발선, 달리는 중=default 9° 기울기+속도선, 완주=joy 몸 늘이기+금색 테이프, 비공개=회색. 움직임은 transform만, 줄이기면 없음. */
.track-field { border-radius: 18px; padding: 10px 10px 8px; background: #2B5B3F; color: #fff; }
.track-head, .track-foot { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: #fff; opacity: .92; padding: 0 4px; }
.track-head { padding-bottom: 8px; }
.track-foot { padding-top: 8px; font-weight: 500; opacity: .85; }
.track { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.track-lane { --bib: var(--accent); --size: 36px; --start: 18px; --fin: 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px; align-items: center; }
.track-lane.c2 { --bib: #3D7A8C; } .track-lane.c3 { --bib: #8A5A2B; } .track-lane.c4 { --bib: #9C3F5E; }
.track-who { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; }
.track-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-bib { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--bib); color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 1.5px #fff; }
.track-road { position: relative; height: 46px; border-radius: 6px; background: #C4553A; container-type: inline-size; overflow: hidden; }
.track-road { background-image: linear-gradient(90deg, transparent calc(var(--start) - 2px), rgba(255, 255, 255, .75) calc(var(--start) - 2px), rgba(255, 255, 255, .75) var(--start), transparent var(--start)); }
.track-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed rgba(255, 255, 255, .45); }
.track-road::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: var(--fin); background: repeating-conic-gradient(#151A2D 0 25%, #fff 0 50%) 0 0 / 7px 7px; }
.track-lane.is-me .track-road { box-shadow: inset 0 0 0 2px #E2B33C; }
.track-runner { position: absolute; z-index: 1; left: var(--start); bottom: 4px; width: var(--size); height: var(--size); transform: translateX(calc(var(--p, 0) * (100cqw - var(--start) - var(--fin) - var(--size)))); }
.track-runner img { width: 100%; height: 100%; object-fit: contain; display: block; }
.track-lane.is-go .track-runner img { transform: rotate(9deg); }
.track-lane.is-go .track-runner::before { content: ""; position: absolute; left: -12px; top: 12px; width: 11px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .7); box-shadow: 0 6px 0 rgba(255, 255, 255, .5), -3px 12px 0 rgba(255, 255, 255, .35); }
.track-lane.is-won .track-runner img { transform: translateY(-4px) scaleY(1.1); transform-origin: bottom center; }
.track-lane.is-won .track-runner::after { content: ""; position: absolute; left: -6px; right: -6px; top: calc(var(--size) * .8); height: 3px; border-radius: 2px; background: #E2B33C; transform: rotate(-8deg); }
.track-lane.is-hide .track-runner img { filter: grayscale(1); opacity: .55; }
.track-tag { position: absolute; z-index: 2; top: 50%; left: calc(var(--start) + var(--size) + 6px + var(--p, 0) * (100cqw - var(--start) - var(--fin) - var(--size))); transform: translateY(-50%); padding: 1px 8px; border-radius: 999px; background: rgba(21, 26, 45, .82); color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.track-lane.tag-before .track-tag { left: auto; right: calc(100cqw - var(--start) - var(--p, 0) * (100cqw - var(--start) - var(--fin) - var(--size)) + 4px); }
@media (min-width: 840px) { .track-lane { --size: 42px; grid-template-columns: 84px minmax(0, 1fr); } .track-road { height: 54px; } .track-who { font-size: 14px; } }
@media (prefers-reduced-motion: no-preference) {
  .friends-ready .track-runner { animation: track-run .6s cubic-bezier(.2, .8, .3, 1) both; }
  .friends-ready .track-tag { animation: track-tag .3s ease-out .5s both; }
}
@keyframes track-run { from { transform: translateX(0); } }
@keyframes track-tag { from { opacity: 0; } }
.mopi-reduced-motion .track-runner, .mopi-reduced-motion .track-tag { animation: none !important; }
.track-together { display: grid; gap: 6px; }
.track-together .bar { height: 10px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.track-together .bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.friends-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.friends-fieldset legend { padding: 0; font-weight: 700; margin-bottom: 4px; }
.friends-goals { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.friends-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
/* 응원·찌르기·친구 연속(4단계) */
.friend-cheer { position: relative; }
.friend-cheer > summary { list-style: none; }
.friend-cheer > summary::-webkit-details-marker { display: none; }
.friend-cheer-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20, 24, 40, .14); min-width: 9.5em; }
.friend-cheer-menu .btn { width: 100%; }
.friends-cheer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.friends-cheer-list li { display: flex; align-items: center; gap: 10px; }
.friend-streak { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.friend-streak-days { font-weight: 800; color: var(--accent); }
/* 좁은 화면: 응원·찌르기 버튼이 이름을 좁히지 않게 이름 아래 줄로 내린다. */
@media (max-width: 559px) {
  .friend-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .friend-row > .friend-actions:not(:empty) { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
  .friend-row > .friend-more { grid-column: 3; grid-row: 1; }
  .friend-row:has(.friend-more[open]) .friend-more { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 559px) {
  .friend-row > .friend-actions:has(.friend-cheer[open]) { flex-direction: column; align-items: stretch; }
  .friend-cheer-menu { position: static; box-shadow: none; border: 0; padding: 6px 0 0; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .friend-row.friend-streak { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .friend-row.friend-streak > .friend-more { grid-column: 4; }
}

/* 처음 보는 단어 쪼개 주기(D-187): 검수 조각은 기존 조각 색, AI 추측 조각은 점선 밑줄, 표시 배지는 안내 색 */
.word-split-parts { align-items: flex-end; }
.word-split-gap { flex-basis: 100%; height: 0; }
.word-split .block.is-guess .block-text { background: none; box-shadow: none; border-bottom: 2px dashed var(--piece-line); }
.word-split-badge { justify-self: start; align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--notice-bg); color: var(--notice-ink); font-size: 12px; font-weight: 700; }
.word-split-badge.is-rule { background: var(--suffix-bg); color: var(--suffix-ink); }
.word-split h2 { overflow-wrap: anywhere; }
/* 쪼개 보기(D-218): 홈·결과 화면 입력창과 결과 A(앱 용어)·B(앱에 없는 단어)·C(약어). 색은 기존 토큰과 조각 색(--piece-*)만 쓴다. */
.split-form { display: flex; flex-direction: column; gap: var(--space-2); }
.split-label { font-size: 15px; font-weight: 700; }
.split-form.is-small .split-label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.split-field { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 4px 4px 4px var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--card); color: var(--ink-3); }
.split-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.split-field input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; font-size: 16px; color: var(--ink); outline: none; }
.split-field input::placeholder { color: var(--ink-3); }
.split-field .btn { flex: none; min-height: 44px; padding: 6px 16px; font-size: 15px; }
.split-examples, .split-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.split-examples > span { font-size: 13px; color: var(--ink-2); }
button.chip { min-height: 44px; color: var(--ink); cursor: pointer; }
button.chip:hover { background: var(--fill-soft); border-color: var(--line-strong); }
button.chip.is-ko { font-family: var(--font-ui); letter-spacing: var(--letter-spacing); font-size: 14px; }
.page-split .split-result { display: flex; flex-direction: column; gap: var(--gap-section); max-width: var(--width-reading); }
.split-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--pad-card); }
.split-term { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.split-word { margin: 0; font-family: var(--font-term); font-weight: 700; font-size: clamp(30px, 8.5vw, 44px); line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; }
.split-word > [class^="block-"] { padding-bottom: 2px; margin-right: 2px; background: linear-gradient(transparent 62%, var(--piece-bg) 62%); box-shadow: inset 0 -3px 0 var(--piece-line); }
.split-abbr { margin: 0; font-family: var(--font-term); font-size: 40px; font-weight: 700; letter-spacing: 0; line-height: 1.1; overflow-wrap: anywhere; }
.split-abbr-full { margin: 4px 0 0; font-family: var(--font-term); font-size: 18px; color: var(--ink-2); letter-spacing: 0; }
.split-pieces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.split-piece { display: grid; grid-template-columns: 8px minmax(0, auto) auto 1fr; align-items: baseline; column-gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.split-piece > i { width: 8px; height: 8px; border-radius: 50%; background: var(--piece-line); align-self: center; }
.split-piece > b { font-family: var(--font-term); font-size: 19px; font-weight: 700; letter-spacing: 0; }
.split-piece > .split-piece-link { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 2px 12px; border-color: var(--piece-line); background: var(--piece-bg); color: var(--piece-ink); font-size: 18px; font-weight: 700; }
.split-pieces + .split-explain { padding-top: 0; border-top: 0; }
.split-piece > .split-piece-link:hover { box-shadow: inset 0 0 0 1px var(--piece-line); }
.split-piece-kind { font-size: 13px; color: var(--ink-2); }
.split-piece-mean { justify-self: end; font-size: 16px; font-weight: 700; text-align: right; }
.split-meaning { display: flex; flex-direction: column; gap: 4px; }
.split-meaning b { font-size: 20px; }
.split-meaning .muted { font-size: 15px; }
.split-explain { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.7; }
.split-status { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-2); }
.split-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.split-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-cta-list); }
.split-actions > .btn-primary { flex: 1 1 200px; }
.split-saved { flex: 1 1 240px; display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); margin: 0; padding: 8px var(--space-4); border-radius: var(--radius-btn); background: var(--accent-bg); color: var(--accent-ink); font-weight: 700; }
.split-known { margin: 0; font-size: 15px; color: var(--ink-2); }
.split-related { display: flex; flex-direction: column; gap: 10px; }
.split-related h2 { font-size: 16px; }
.split-none-title { font-family: var(--font-term); font-size: 28px; letter-spacing: 0; overflow-wrap: anywhere; }
.page-split .split-result > .btn { align-self: flex-start; }
.page-home > .split-form { max-width: var(--width-reading); }
/* 전체학습 첫 화면(D-218 시안 study): 이어서 공부하기 카드 · 기록 읽기 한 줄 · 따로 복습/더 보기 묶음 */
.study-continue { display: flex; align-items: center; gap: var(--space-3); padding: 20px var(--pad-card); border-radius: var(--radius-card); background: var(--accent); color: var(--on-accent); text-decoration: none; }
.study-continue:hover { background: var(--accent-hover); }
.study-continue.is-done { background: var(--accent-bg); color: var(--accent-ink); }
.study-continue-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.study-continue-eyebrow { font-size: 13px; font-weight: 700; opacity: .8; }
.study-continue b { font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.study-continue-meta { font-size: 14px; opacity: .85; }
.study-continue img { width: 72px; height: 72px; flex: none; }
.study-read-row { margin-top: var(--gap-card); }
.study-read-row strong { display: inline-flex; align-items: center; gap: var(--space-2); }
.study-group { display: flex; flex-direction: column; gap: var(--gap-section-title); }
.study-group-title { font-size: 17px; }
.study-more-practice > summary { list-style: none; cursor: pointer; }
.study-more-practice > summary::-webkit-details-marker { display: none; }
.study-more-practice[open] > summary .icon:last-child { transform: rotate(90deg); }
.study-more-practice > .cards { margin-top: var(--gap-card); }
.page-map > .split-form { max-width: var(--width-reading); }
/* 전체학습 · 분야 단계 목록(D-218 시안 study-stages): 진도 카드 + 상태 점 줄 */
.study-summary.study-recommendation { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: var(--pad-card); text-align: left; }
.page-map .study-summary, .page-map .cards.study-categories { max-width: var(--width-reading); }
.study-summary-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.study-summary-line b { font-size: 20px; }
.study-summary-meter { display: block; position: relative; height: 8px; max-width: none; border-radius: 999px; background: var(--fill); overflow: hidden; }
.study-summary-meter > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.study-summary-meter .stage-meter-started { background: var(--accent-bg); }
.study-summary-meter .stage-meter-done { background: var(--accent); }
.cards.study-categories { display: flex; flex-direction: column; gap: 0; }
.study-category.stg-row { justify-content: flex-start; gap: var(--space-3); padding: var(--pad-row-two) var(--pad-card); font-weight: 400; }
.stg-row b { font-size: 16px; }
.stg-copy { flex: 1 1 auto; min-width: 0; }
.stg-note { flex: none; text-align: right; }
.stg-row.is-lock { color: var(--ink-3); }
.stg-row.is-now { box-shadow: inset 3px 0 0 var(--accent); }
.stg-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; color: var(--on-accent); }
.stg-mark .icon { width: 14px; height: 14px; }
.stg-mark.is-done { background: var(--accent); border-color: var(--accent); }
.stg-mark.is-now { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--card); background: var(--accent); }
.stg-mark.is-lock { border-color: var(--line); color: var(--ink-3); }
.stg-badge { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; }
.stg-badge.is-muted { background: var(--fill); color: var(--ink-2); }
.read-list-note { margin-top: var(--gap-card); }
/* 전체학습 · 더 연습(D-218 시안 study-more) */
.study-more-list { display: flex; flex-direction: column; gap: var(--gap-card); max-width: var(--width-reading); }
.study-more-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--pad-card); color: var(--ink); text-decoration: none; }
.study-more-card:hover { border-color: var(--line-strong); }
.study-more-card > .stack { flex: 1 1 auto; min-width: 0; }
.study-more-card b { font-size: 17px; }
.study-more-art { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 72px; border-radius: 16px; background: var(--accent-bg); font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.study-more-art b { font-family: var(--font-term); font-size: 15px; color: var(--accent-ink); letter-spacing: 0; overflow-wrap: anywhere; text-align: center; }
/* MY(D-218 시안 me): 지금 읽을 수 있는 의학용어 — 큰 숫자, 숫자 4칸은 상자 없이 선 아래 글자 */
.me-readable { display: flex; flex-direction: column; gap: 6px; padding: var(--pad-card); }
.me-readable-big { margin: 0; display: flex; align-items: baseline; gap: 2px; }
.me-readable-big b { font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.me-readable-big small { font-size: 17px; font-weight: 700; }
.me-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 12px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.me-nums > div { min-width: 0; }
.me-nums dt { font-size: 13px; color: var(--ink-2); }
.me-nums dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) and (max-width: 1023px) { .me-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 처음 보는 단어 읽기(D-218 시안 read-new): 단계 끝 1~2문제 */
.read-new { gap: var(--gap-section); }
.read-new-head { gap: 4px; }
.read-new-eyebrow { font-weight: 700; color: var(--accent-ink); }
.read-new-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 16px; text-align: center; }
.read-new-word { margin: 0; font-weight: 700; font-size: clamp(30px, 8.5vw, 44px); line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; }
.read-new-word > [class^="block-"] { padding-bottom: 2px; margin-right: 2px; background: linear-gradient(transparent 62%, var(--piece-bg) 62%); box-shadow: inset 0 -3px 0 var(--piece-line); }
.read-new-choices .choice.is-right { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); opacity: 1; }
.read-new-hint { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.read-new-hint li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 12px; background: var(--piece-bg); color: var(--piece-ink); font-weight: 700; }
.read-new-hint li b { font-family: var(--font-term); letter-spacing: 0; }
.read-new-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* MY 하위(D-218 v3): 업적 격자·리그 배지 그림, 설정 스위치, 무료 기간 멤버십, 약점 리포트 화면 */
.page-achievements .ach-meter { display: block; position: relative; height: 8px; max-width: var(--width-reading); border-radius: 999px; background: var(--fill); overflow: hidden; }
.page-achievements .ach-meter > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.page-achievements .ach-meter .stage-meter-done { background: var(--accent); }
.page-achievements .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-card); }
@media (min-width: 600px) { .page-achievements .ach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .page-achievements .ach-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.page-achievements .ach-card { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px 14px; }
.page-achievements .ach-card .ach-body { align-items: center; }
.page-achievements .ach-card .ach-bar { width: 100%; }
.ach-badge:has(img) { background: none; box-shadow: none; border-radius: 0; }
.ach-badge:has(img).is-locked { opacity: 1; filter: none; }
.ach-badge img { border-radius: 0; }
.page-achievements .ach-badge { flex-basis: 64px; width: 64px; height: 64px; }
.settings-page .preference-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; margin: 0; transition: background-color var(--t-base); }
.settings-page .preference-row input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); transition: transform var(--t-base); }
.settings-page .preference-row input[type="checkbox"]:checked { background: var(--accent); }
.settings-page .preference-row input[type="checkbox"]:checked::after { transform: translateX(20px); }
.settings-page .preference-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .settings-page .preference-row input[type="checkbox"], .settings-page .preference-row input[type="checkbox"]::after { transition: none; } }
.free-launch-plans { gap: var(--gap-section-title); }
.free-launch-plan { display: flex; align-items: center; min-height: 64px; padding: 12px var(--pad-card); list-style: none; }
.free-launch-plan + .free-launch-plan { border-top: 1px solid var(--line); }
.free-launch-plan b { font-size: 17px; }
ul.cards { margin: 0; padding: 0; }
.page-weak .weak-body { max-width: var(--width-reading); }
.page-weak .weak-report-head .home-block-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* MY · 담은 단어(D-218 시안 saved) */
.saved-body { display: flex; flex-direction: column; gap: var(--gap-section); max-width: var(--width-reading); }
.saved-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); row-gap: 2px; min-height: var(--row-height-two); padding: var(--pad-row-two) var(--pad-card); }
.saved-row + .saved-row { border-top: 1px solid var(--line); }
.saved-term { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.saved-meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.saved-row > .btn-small { grid-column: 2; grid-row: 1 / span 2; }
.saved-state { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--ink-2); }
.saved-state.is-next { background: var(--accent-bg); color: var(--accent-ink); }
.saved-list { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); gap: 0; }
.saved-undo { position: sticky; bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 8px 8px var(--space-4); border-radius: 14px; background: var(--ink); color: var(--card); font-size: 15px; }
.saved-undo .btn { min-height: 44px; background: transparent; color: var(--card); border-color: currentColor; }

/* 오답노트(D-186): 카드 한 줄 목록·펼침 비교·다시 풀기. 공통 카드·버튼 규격을 쓰고 색은 기존 토큰만. */
.page-mistakes .mistakes { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.mistakes-meta { margin: 0; }
.mistakes-sort { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--fill); align-self: flex-start; }
.mistakes-sort-tab { min-height: var(--control-compact); padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.mistakes-sort-tab[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px #151A2D1F; }
.mistakes-sort-tab:focus-visible, .mistake-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mistakes-practice-note { margin: -4px 0 0; text-align: center; }
.mistakes-list { list-style: none; margin: 0; padding: 4px 16px; }
.mistake-row { border-bottom: 1px solid var(--line); }
.mistake-row:last-child { border-bottom: 0; }
.mistake-head { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.mistake-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mistake-term { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.mistake-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mistake-pick { font-size: 13px; padding: 2px 8px; border-radius: 8px; background: var(--error-bg); color: var(--error); }
.mistake-tag { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.mistake-tag.is-similar { background: var(--accent-bg); color: var(--accent-ink); }
.mistake-tag.is-wrong { background: var(--fill); color: var(--ink-2); }
.mistake-detail { padding: 0 0 14px; }
.mistake-native { margin: 0; color: var(--ink-2); }
.mistake-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.mistake-side { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; text-align: center; min-width: 0; }
.mistake-side.is-want { background: var(--suffix-bg); color: var(--suffix-ink); }
.mistake-side.is-got { background: var(--error-bg); color: var(--error); }
.mistake-piece { font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.mistake-vs { align-self: center; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.mistake-why-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mistake-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.mistake-stats div { padding: 8px 4px; border-radius: 10px; background: var(--fill); text-align: center; }
.mistake-stats dt { font-size: 12px; color: var(--ink-2); }
.mistake-stats dd { margin: 0; font-weight: 700; }
.mistake-actions { display: grid; gap: 8px; }
.mistakes-passed summary .note { font-weight: 400; }
@media (min-width: 720px) { .mistake-actions { grid-template-columns: 1fr 1fr; } }

/* 카드 안 튜터(D-187 T1): 질문 버튼 줄, 접힌 직접 묻기, 첫 사용 동의 */
.tutor-inline { padding-top: 12px; border-top: 1px solid var(--line); }
.tutor-inline-title { font-weight: 700; }
.tutor-inline-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tutor-inline-free summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.tutor-inline-free form { margin-top: 8px; }
.tutor-inline-consent { background: var(--notice-bg); }
.tutor-inline-consent-title { font-weight: 700; }
.tutor-inline-consent ul, .tutor-inline-terms { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.tutor-inline-answer:empty { display: none; }

/* 기록 읽기(설계 v3): 고정 「예시 기록」 띠, 지문 문서, 단어 시트(좁은 화면은 아래에서 올라옴, 1024px 이상은 오른쪽 칸). */
.page-read .read { display: flex; flex-direction: column; gap: 14px; }
.read-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.read-title { font-size: 20px; line-height: 1.3; }
.read-head .note { margin-left: auto; white-space: nowrap; }
.read-layout { display: grid; gap: 14px; }
.read-main { min-width: 0; }
.read-tools { display: flex; justify-content: flex-end; }
.read-ko-toggle { min-height: var(--control-compact); padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.read-ko-toggle[aria-pressed="true"] { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }
.read-doc { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.read-doc-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-2); }
.read-line { margin: 0; }
.read-word { display: inline; min-height: 0; padding: 0 1px; border: 0; border-bottom: 2px dotted var(--line-brand); border-radius: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.read-word.is-new { background: #FFF1C9; border-bottom: 2px solid #E0A80F; }
.read-word.is-on { background: var(--accent-ink); color: var(--on-accent); border-radius: 4px; }
.read-word:focus-visible, .read-sheet-close:focus-visible, .read-ko-toggle:focus-visible, .read-undo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.read-ko { display: none; margin: -2px 0 6px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.read-doc.show-ko .read-ko { display: block; }
.read-counts { margin: 0; }
.read-new-mark { padding: 0 4px; border-radius: 4px; background: #FFF1C9; color: inherit; }
.read-side:empty { display: none; }
@media (max-width: 1023px) { .read.has-sheet { padding-bottom: 220px; } }
.read-side { position: fixed; left: 0; right: 0; bottom: calc(68px + var(--safe-bottom)); z-index: 20; padding: 0 12px; }
.read-sheet { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 18px 18px 14px 14px; background: var(--card); box-shadow: 0 -6px 18px #1E234619; }
.read-sheet-top { display: flex; align-items: center; gap: 8px; }
.read-sheet-term { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 22px; overflow-wrap: anywhere; }
.read-sheet-close { display: grid; place-items: center; width: var(--control-compact); height: var(--control-compact); border: 0; border-radius: 12px; background: var(--fill); color: var(--ink-2); cursor: pointer; }
.read-sheet-mean { margin: 0; }
.read-pieces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.read-pieces li { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--fill); font-size: 12.5px; color: var(--ink-2); }
.read-pieces b { font-size: 16px; color: var(--ink); }
.read-added { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; }
.read-added.is-yes { background: var(--suffix-bg); color: var(--suffix-ink); }
.read-added.is-no { background: var(--fill); color: var(--ink-2); }
.read-undo { min-height: var(--control-compact); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.read-list { list-style: none; margin: 0; padding: 4px 16px; }
.read-row { display: flex; align-items: center; gap: 10px; }
.read-row .stack { flex: 1 1 auto; min-width: 0; }
.read-row.is-locked { color: var(--ink-2); }
.read-done-list { list-style: none; margin: 0; padding: 4px 16px; }
.read-done-row { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.read-done-row:last-child { border-bottom: 0; }
.choice.is-right { border-color: var(--suffix-line); background: var(--suffix-bg); }
.study-plan-row.is-optional .study-plan-link { border-style: dashed; }
.study-plan-optional { font-weight: 400; }
.study-topic-read { font-size: 12.5px; font-weight: 600; color: var(--notice-ink); }
@media (min-width: 840px) { .read-side { bottom: 16px; left: 104px; } }
@media (min-width: 1024px) {
  .read-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .read-side { position: sticky; top: 56px; left: auto; right: auto; bottom: auto; padding: 0; }
  .read-sheet { box-shadow: none; border-radius: 16px; }
}
.invite-code { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--ink); }

/* D-day 준비(D-218 5절, 시안 d218/screens/dday). 목표 2×2 선택 카드 · 날짜 한 칸 · 범위 체크 목록 · 하루 분량 */
.dday-form { display: flex; flex-direction: column; gap: var(--gap-section); max-width: var(--width-reading); }
.dday-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-section-title); min-width: 0; }
.dday-form legend { font-size: 18px; font-weight: 700; padding: 0; margin-bottom: var(--gap-section-title); }
.dday-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dday-goal { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-m); background: var(--card); cursor: pointer; }
.dday-goal b { font-size: 16px; }
.dday-goal span { font-size: 13px; color: var(--ink-2); }
.dday-goal.is-on, .dday-goal:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.dday-goal.is-on b, .dday-goal:has(input:checked) b { color: var(--accent-ink); }
.dday-goal:has(input:focus-visible) { outline: 3px solid var(--line-focus); outline-offset: 2px; }
.dday-date { width: 100%; min-width: 0; min-height: var(--control-height); padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; }
.dday-scope { display: flex; align-items: center; gap: 12px; min-height: var(--menu-height); padding: var(--pad-row-one) var(--pad-card); cursor: pointer; }
.dday-scope input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.dday-scope-name { flex: 1 1 auto; font-weight: 700; }
.dday-scope .num { color: var(--ink-2); font-size: 14px; }
.dday-sum { display: flex; flex-direction: column; gap: 4px; }
.dday-sum b { font-size: 20px; line-height: 1.35; }
.dday-off { max-width: var(--width-reading); margin-top: var(--gap-card); }
/* 홈 D-day 한 줄(partial home/dday) */
.home-dday { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }
.home-dday-copy { flex: 1 1 auto; min-width: 0; gap: 4px; }
.home-dday-bar { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.home-dday-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }
/* 오늘 한 판 사이 안내·끝 화면(D-218 8절, 시안 round-end) */
.round-next, .round-end { gap: var(--gap-cta-list); }
.round-title { margin: 0; font-size: 20px; line-height: 1.35; }
.round-sum { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.round-next, .round-end { width: 100%; max-width: var(--width-reading); margin-inline: auto; text-align: left; align-items: stretch; }
.round-end .round-title, .round-next .round-title { text-align: center; }
.round-sum .row-plain { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--menu-height); padding: var(--pad-row-one) var(--pad-card); }
.round-sum .row-plain > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.round-sum .row-plain .num { color: var(--ink-2); font-weight: 700; }
.round-sum .row-plain.is-muted > span:first-child { font-weight: 500; color: var(--ink-2); }
.round-actions { display: grid; grid-template-columns: 1fr; gap: var(--gap-card); }
@media (min-width: 600px) { .round-actions { grid-template-columns: 1fr 1fr; } .round-actions > :only-child { grid-column: 1 / -1; } }

/* 홈(D-218, 시안 d218/screens/home-first·home-return). 한 열: 인사(첫 방문만) → 쪼개 보기 → 상황 카드 → 오늘 한 판 → D-day → 이번 주.
   840px 이상은 두 열(왼쪽 1.25 · 오른쪽 1). 처음 온 사람(is-fresh)은 오른쪽 열 없이 읽기 폭 한 열. */
.home-layout { display: flex; flex-direction: column; gap: var(--gap-section); }
.home-col { display: flex; flex-direction: column; gap: var(--gap-section); min-width: 0; }
.home-hello { display: none; }
.page-home.is-fresh .home-hello { display: block; }
.page-home.is-fresh .home-col-side { display: none; }
.page-home.is-fresh .home-layout { max-width: var(--width-reading); }
.home-hello .mopi { width: 72px; height: 72px; flex: 0 0 72px; }
.home-hello .mopi-speech { padding: 12px 16px; }
.home-situation:empty, .home-situation:not(:has(> :not([hidden]))) { display: none; }
.home-round { gap: var(--gap-section-title); }
.home-round .home-block-title { margin: 0; font-size: 18px; }
.home-round-list .row-plain { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--menu-height); padding: var(--pad-row-one) var(--pad-card); }
.home-round-list .row-plain > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.home-round-list .row-plain .num { flex: none; color: var(--ink-2); font-weight: 700; }
.home-round-list .row-plain.is-done > span { color: var(--ink-3); font-weight: 500; }
.home-round .btn-primary { margin-top: var(--gap-cta-list); }
@media (min-width: 840px) {
  .page-home:not(.is-fresh) .home-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; column-gap: 32px; }
  .home-layout .split-field { min-height: 56px; }
}

/* 단계 끝(D-218 v3, 시안 d218/screens/learn-result). 조각 밑줄 표기 lv-word는 학습 v3와 같은 이름이고, 여기서는 목록 안(.lv-list)으로만 범위를 둔다. */
.lv-end-screen { gap: var(--gap-section); max-width: var(--width-reading); margin-inline: auto; width: 100%; }
.lv-end { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 12px; }
.lv-end img { width: 96px; height: 96px; }
.lv-end h2 { margin: 0; font-size: 24px; }
.lv-end p { margin: 0; }
.lv-list { list-style: none; margin: 0; padding: 0 var(--pad-card); }
.lv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; }
.lv-row + .lv-row { border-top: 1px solid var(--line); }
.lv-row-mean { font-weight: 700; text-align: right; }
.lv-list .lv-word { margin: 0; min-width: 0; font-family: var(--font-term); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: 0; overflow-wrap: anywhere; color: var(--ink); }
.lv-list .lv-word .seg-prefix, .lv-list .lv-word .seg-root, .lv-list .lv-word .seg-suffix { padding-bottom: 2px; margin-right: 2px; }
.lv-list .lv-word .seg-prefix { box-shadow: inset 0 -2px 0 var(--prefix-line); }
.lv-list .lv-word .seg-root { box-shadow: inset 0 -2px 0 var(--root-line); }
.lv-list .lv-word .seg-suffix { box-shadow: inset 0 -2px 0 var(--suffix-line); }
.lv-end-actions { display: grid; grid-template-columns: 1fr; gap: var(--gap-card); }
@media (min-width: 600px) { .lv-end-actions { grid-template-columns: 1fr 1fr; } .lv-end-actions > :only-child { grid-column: 1 / -1; } }
/* 이번 주 단순형(D-218 시안 home-return): 제목 · 「n일 · 연속 n일」 + 요일 7칸 */
.home-week-simple { gap: 14px; padding: var(--pad-card); }
.home-week-simple .home-week-head { align-items: baseline; }

/* 웹 넓은 화면 정리(대표 지시 2026-11-12 「웹 레이아웃 전체적으로」): 1024px 이상에서 한쪽만 쓰고 비는 칸을 없앤다. 폰·태블릿 세로 배치는 그대로. */
@media (min-width: 1024px) {
  /* 홈 처음 온 날: 왼쪽 모피 인사·쪼개 보기 / 오른쪽 오늘 한 판(다시 온 날 두 칸과 같은 비율) */
  .page-home.is-fresh .home-layout { max-width: none; }
  .page-home.is-fresh .home-col:not(.home-col-side) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 32px; row-gap: var(--gap-section); align-items: start; }
  .page-home.is-fresh .home-col:not(.home-col-side) > * { grid-column: 1; }
  .page-home.is-fresh .home-col:not(.home-col-side) > .home-round { grid-column: 2; grid-row: 1 / span 3; }
  /* MY: 왼쪽 기록 그래프 칸이 비면(손님·기록 없음) 그 칸을 접고 카드들을 두 단으로 흘린다 */
  .page-me .me-board:not(:has(.me-main > :not([hidden]))) { display: block; }
  .page-me .me-board:not(:has(.me-main > :not([hidden]))) > .me-main { display: none; }
  .page-me .me-board:not(:has(.me-main > :not([hidden]))) > .me-side { display: block; columns: 2; column-gap: 32px; }
  .page-me .me-board:not(:has(.me-main > :not([hidden]))) > .me-side > * { break-inside: avoid; margin: 0 0 var(--gap-card); }
}