/* KP2 — Apple HIG 스타일 시트 (빌드 없음, CDN 없음) */

/* ===== 1. 토큰 — "Calm Study" v1.4 (docs/DESIGN.md §2) ===== */
/* 글꼴: Pretendard Variable 자체 호스팅(OFL). 가변 폰트 하나로 45~920 굵기. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations"), url("/static/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* 바탕(순백·순흑 금지) */
  --bg: #f5f5f7;          /* 앱 바탕 */
  --bg-2: #efeff2;        /* 사이드바·그룹 배경 */
  --surface: #ffffff;     /* 카드·시트 */
  --surface-2: #f7f7f9;   /* 카드 안 구분 */
  /* 라벨 */
  --label: #1d1d1f;
  --label-2: rgba(60, 60, 67, .78);   /* 보조 텍스트: 사이드바(--bg-2)·채움(--fill-3) 위에서도 4.5:1 (.72 는 4.1~4.4 로 미달) */
  --label-3: rgba(60, 60, 67, .45);   /* 장식·아이콘·그래버 전용(텍스트 금지: 2.4:1) */
  --label-4: rgba(60, 60, 67, .18);
  --separator: rgba(60, 60, 67, .18);
  --separator-opaque: #d5d5da;
  --fill: rgba(120, 120, 128, .2);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(118, 118, 128, .12);
  --fill-4: rgba(116, 116, 128, .08);
  --placeholder: var(--label-2);     /* 입력 자리표시자도 텍스트: 4.5:1 */
  /* 행동 액센트 1개(blue, 흰 글자·본문 텍스트 모두 4.5:1 이상) + 학습 색 1개(study) */
  --accent: #0a66c2;
  --accent-fg: #0a5cb0;   /* 텍스트·아이콘용(한 단계 짙게): accent-tint 위 --bg-2 에서도 4.9:1 */
  --accent-bg: #0a66c2;   /* 채움용: 흰 글자 5.7:1 */
  --accent-tint: rgba(10, 102, 194, .12);
  --on-accent: #ffffff; --on-accent-2: rgba(255, 255, 255, .88);
  --study: #0b7a5f; --study-fg: #0a735a; --study-tint: rgba(11, 122, 95, .12); --on-study: #ffffff;   /* #0f8a6a 는 흰 글자 4.3:1 미달 → 채움 5.3 · 텍스트 5.8 */
  /* 시스템 색(배지·경고) — 기존 유지 */
  --red: #ff3b30; --orange: #ff9500; --yellow: #ffcc00; --green: #34c759;
  --blue: #007aff; --gray: #8e8e93; --indigo: #5856d6; --purple: #af52de;
  --red-fg: #d70015; --red-bg: #d70015;   /* red-bg: 흰 글자를 얹는 채움(5.4:1) */
  --red-text: #b3261e; --orange-text: #9a3412; --yellow-text: #7a4c00;
  --gray-text: #3f3f46; --green-text: #166534; --blue-text: #1e40af;
  --red-tint: rgba(255, 59, 48, .14); --orange-tint: rgba(255, 149, 0, .18);
  --yellow-tint: rgba(255, 204, 0, .26); --gray-tint: rgba(142, 142, 147, .2);
  --green-tint: rgba(52, 199, 89, .18); --blue-tint: rgba(0, 122, 255, .12);
  /* 기억 수준(연습 통계): 미학습 gray · 학습중 orange · 안정 blue · 숙달 green */
  --lv-new: var(--gray); --lv-learning: var(--orange); --lv-stable: var(--blue); --lv-mastered: var(--green);
  --lv-new-text: var(--gray-text); --lv-learning-text: var(--orange-text); --lv-stable-text: var(--blue-text); --lv-mastered-text: var(--green-text);
  /* 구조 보기(정의·이유·사례 제안) 막대 */
  --st-def: var(--accent); --st-why: var(--orange); --st-case: var(--study); --st-etc: var(--label-4);
  --seg-on: #ffffff;
  --mark: #fff3b0;
  --nav-bg: var(--bg);
  /* 채도 높은 채움 위 글자·손잡이·스크림·차트 이미지 바탕(라이트/다크 공통) */
  --on-color: #ffffff; --knob: #ffffff; --img-bg: #ffffff;
  --scrim: rgba(0, 0, 0, .35); --overlay-ink: rgba(0, 0, 0, .18);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .14);
  --shadow-seg: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04);
  --shadow-knob: 0 3px 8px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .06);
  --shadow-pane: -8px 0 24px rgba(0, 0, 0, .12);
  /* 구 토큰 별칭(기존 컴포넌트 규칙 호환) */
  --bg-3: var(--surface);
  --gbg: var(--bg); --gbg-2: var(--surface); --gbg-3: var(--surface-2);

  /* 타이포 스케일(설정 글자 크기 → root font-size 에 비례) */
  --t-largetitle: min(2.125rem, calc(0.75rem + 22px));   /* 16px→34, 20px→37, 32px→46: 본문보다 느리게 커진다(디자인 QA 보류 항목 해소) */ --t-title: 1.375rem; --t-title3: 1.25rem; --t-head: 1.0625rem; --t-body: 1rem; --t-sub: .9375rem; --t-foot: .8125rem; --t-cap: .75rem; --t-cap2: .6875rem; --t-tab: .625rem;
  --t-num-lg: 2.125rem; --t-num: 1.75rem; --t-num-sm: 1.5rem;   /* 숫자 디스플레이(타일·타이머) */
  --lh-body: 1.55; --lh-answer: 1.65;

  --hairline: .5px;   /* 구분선 두께(고대비 테마는 1px) */
  --radius-card: 14px; --radius-ctl: 10px; --radius-pill: 999px;
  --radius-s: 8px; --radius-xs: 6px; --radius-xxs: 4px; --radius: var(--radius-card); --radius-l: 14px; --radius-xl: 18px;
  --nav-h: 44px; --tab-h: 49px; --tool-h: 48px;
  --sidebar-w: clamp(320px, 26vw, 360px); --inspector-w: max(320px, 11em);
  --content-max: 960px; /* v1.7.1 본문 폭(SPEC §15.1): main.js 가 설정 content_width 로 덮어쓴다(narrow 760 · medium 960 · wide 1200 · full none) */
  /* 모션: 진입 220ms ease-out · 퇴장 150ms · 마이크로 120ms */
  --dur-micro: 120ms; --dur-enter: 220ms; --dur-exit: 150ms; --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease: var(--ease-out);
  --dur: var(--dur-enter);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ===== 1b. 스킴·테마 (v1.7, SPEC §15.2) =====
   main.js 가 <html> 에 data-theme(선택값 6종)와 data-scheme(light|dark, system 은 OS 미디어 쿼리로 해석)을 함께 둔다.
   다크 조건 규칙은 전부 `:root[data-scheme="dark"]` 하나로 통일하고, 테마별 토큰은 `:root[data-theme="…"]` 가 그 위를 덮는다
   (sepia·contrast 는 라이트 토큰 위, midnight 는 다크 토큰 위 — 같은 특이도이므로 선언 순서로 이긴다). */
/* 첫 페인트 폴백: JS 가 data-scheme 를 붙이기 전, OS 가 다크면 바탕·글자만 먼저 어둡게(흰 화면 깜빡임 방지). 전체 토큰은 아래 블록 */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) { color-scheme: dark; --bg: #0b0b0d; --bg-2: #141417; --surface: #1c1c1f; --surface-2: #26262a; --label: #ececf1; --label-2: rgba(235, 235, 245, .68); --separator: rgba(84, 84, 88, .6); --nav-bg: #0b0b0d; }
}
:root[data-scheme="light"] { color-scheme: light; }
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0d; --bg-2: #141417; --surface: #1c1c1f; --surface-2: #26262a;
  --label: #ececf1;
  --label-2: rgba(235, 235, 245, .68);
  --label-3: rgba(235, 235, 245, .42);
  --label-4: rgba(235, 235, 245, .18);
  --separator: rgba(84, 84, 88, .6);
  --separator-opaque: #3a3a3e;
  --fill: rgba(120, 120, 128, .36); --fill-2: rgba(120, 120, 128, .32);
  --fill-3: rgba(118, 118, 128, .24); --fill-4: rgba(116, 116, 128, .18);
  --accent: #5aa7ff; --accent-fg: #5aa7ff; --accent-bg: #2470d0; --accent-tint: rgba(90, 167, 255, .18);   /* accent-bg: 흰 글자 4.9:1 (#2f7fd9 는 4.1) */
  --study: #3dd6a8; --study-fg: #3dd6a8; --study-tint: rgba(61, 214, 168, .16); --on-study: #06281f;   /* 민트 채움 위는 짙은 글자(8.5:1) */
  --red: #ff453a; --orange: #ff9f0a; --yellow: #ffd60a; --green: #30d158;
  --blue: #0a84ff; --gray: #8e8e93; --indigo: #5e5ce6; --purple: #bf5af2;
  --on-accent: #ffffff; --on-accent-2: #ffffff;
  --red-fg: #ff6961; --red-bg: #d6342c;   /* 흰 글자 4.8:1 */
  --red-text: #ff7a72; --orange-text: #ffb340; --yellow-text: #ffd60a;
  --gray-text: #d1d1d6; --green-text: #4cd964; --blue-text: #64b5ff;
  --red-tint: rgba(255, 69, 58, .22); --orange-tint: rgba(255, 159, 10, .22);
  --yellow-tint: rgba(255, 214, 10, .2); --gray-tint: rgba(142, 142, 147, .28);
  --green-tint: rgba(48, 209, 88, .2); --blue-tint: rgba(10, 132, 255, .22);
  --seg-on: #3a3a3f;
  --mark: #5c4a00;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .6);
  --shadow-seg: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-knob: 0 3px 8px rgba(0, 0, 0, .5); --shadow-pane: -8px 0 24px rgba(0, 0, 0, .5);
}
/* 세피아: 따뜻한 종이색 라이트. 액센트는 짙은 청록(흰 글자 6.3:1), 학습색은 올리브 그린(흰 글자 5.9:1). 모든 글자 쌍 ≥ 4.5:1 */
:root[data-theme="sepia"] {
  --bg: #f3ebdd; --bg-2: #ece2d0; --surface: #fbf6ec; --surface-2: #f4ecdc;
  --label: #3a2e22;
  --label-2: rgba(58, 46, 34, .8);
  --label-3: rgba(58, 46, 34, .45);
  --label-4: rgba(58, 46, 34, .18);
  --separator: rgba(90, 70, 50, .22);
  --separator-opaque: #d6cbb6;
  --fill: rgba(120, 100, 70, .22); --fill-2: rgba(120, 100, 70, .18);
  --fill-3: rgba(120, 100, 70, .14); --fill-4: rgba(120, 100, 70, .09);
  --accent: #0f6b74; --accent-fg: #0d606a; --accent-bg: #0f6b74; --accent-tint: rgba(15, 107, 116, .13);
  --study: #2f6f3e; --study-fg: #2b6638; --study-tint: rgba(47, 111, 62, .13); --on-study: #ffffff;
  --red-fg: #b9281d; --red-bg: #c3271b;
  --red-text: #a8231d; --orange-text: #8f3410; --yellow-text: #6e4600;
  --gray-text: #4a4038; --green-text: #1f5f2f; --blue-text: #1f3f9e;
  --red-tint: rgba(255, 59, 48, .13); --orange-tint: rgba(255, 149, 0, .17);
  --yellow-tint: rgba(255, 204, 0, .22); --gray-tint: rgba(120, 100, 80, .18);
  --green-tint: rgba(52, 199, 89, .16); --blue-tint: rgba(0, 122, 255, .11);
  --seg-on: #fffbf2;
  --mark: #f6e29a;
  --shadow-1: 0 1px 2px rgba(60, 40, 10, .08);
  --shadow-2: 0 8px 24px rgba(60, 40, 10, .16);
}
/* 고대비: 순백 바탕·순흑 글자, 보조 글자 ≥ 7:1(#333 12.6:1), 구분선 1px 60% 검정, 액센트 #0040A0(흰 글자 10:1). 틴트 위 글자도 ≥ 4.5:1 */
:root[data-theme="contrast"] {
  --bg: #ffffff; --bg-2: #f4f4f4; --surface: #ffffff; --surface-2: #f0f0f0;
  --label: #000000;
  --label-2: #333333;
  --label-3: #555555;
  --label-4: rgba(0, 0, 0, .3);
  --separator: rgba(0, 0, 0, .6);
  --separator-opaque: #666666;
  --hairline: 1px;
  --fill: rgba(0, 0, 0, .16); --fill-2: rgba(0, 0, 0, .12);
  --fill-3: rgba(0, 0, 0, .08); --fill-4: rgba(0, 0, 0, .05);
  --accent: #0040a0; --accent-fg: #0040a0; --accent-bg: #0040a0; --accent-tint: rgba(0, 64, 160, .1);
  --study: #0a5c3a; --study-fg: #0a5c3a; --study-tint: rgba(10, 92, 58, .1); --on-study: #ffffff;
  --red-fg: #a00000; --red-bg: #b00000;
  --red-text: #9a0000; --orange-text: #7a2a00; --yellow-text: #5a3a00;
  --gray-text: #2f2f33; --green-text: #0f4a22; --blue-text: #0a2f8a;
  --gray-tint: rgba(0, 0, 0, .1);
  --seg-on: #ffffff;
  --mark: #ffe866;
  --shadow-1: 0 0 0 1px rgba(0, 0, 0, .6);
  --shadow-2: 0 0 0 1px rgba(0, 0, 0, .8), 0 8px 24px rgba(0, 0, 0, .2);
  --shadow-seg: 0 0 0 1px rgba(0, 0, 0, .6);
}
/* 미드나이트: 남색 다크(다크 토큰 위에 덮음). 액센트 #7FB2FF(본문 글자용, 채움은 #2A62C8 흰 글자 5.6:1), 학습색 #4FD8B0 */
:root[data-theme="midnight"] {
  --bg: #0d1424; --bg-2: #121b2f; --surface: #172339; --surface-2: #1f2d47;
  --label: #ecf1ff;
  --label-2: rgba(220, 230, 255, .72);
  --label-3: rgba(220, 230, 255, .45);
  --label-4: rgba(220, 230, 255, .18);
  --separator: rgba(120, 140, 180, .45);
  --separator-opaque: #2e3d5c;
  --fill: rgba(140, 160, 200, .32); --fill-2: rgba(140, 160, 200, .28);
  --fill-3: rgba(140, 160, 200, .2); --fill-4: rgba(140, 160, 200, .14);
  --accent: #7fb2ff; --accent-fg: #7fb2ff; --accent-bg: #2a62c8; --accent-tint: rgba(127, 178, 255, .15);
  --study: #4fd8b0; --study-fg: #4fd8b0; --study-tint: rgba(79, 216, 176, .16); --on-study: #06281f;
  --red-text: #ff8a82; --orange-text: #ffb84d; --yellow-text: #ffd84a;
  --gray-text: #d4dbea; --green-text: #5fdc78; --blue-text: #7fb2ff;
  --seg-on: #2a3a58;
  --mark: #5a4a10;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .6);
}
@media (max-width: 899px) { :root { --t-body: 1.0625rem; } } /* iOS Body 17pt */
@media (min-width: 900px) { :root { --t-largetitle: min(1.75rem, calc(0.6rem + 18.4px)); } } /* 데스크톱 Large Title 28(16px) · 32px 에서 37.6 */

/* ===== 2. 기본 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: var(--font); font-size: 1rem; line-height: var(--lh-body);
  color: var(--label); background: var(--bg);
  word-break: keep-all; overflow-wrap: anywhere; /* 한국어: 어절 단위 줄바꿈 */
  font-feature-settings: "ss05"; /* Pretendard: 한글 간격 보정 */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .4; cursor: default; }
a { color: var(--accent-fg); text-decoration: none; }
svg.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.icon.sm { width: 18px; height: 18px; stroke-width: 2; }
svg.icon.xs { width: 14px; height: 14px; stroke-width: 2.2; }
[hidden] { display: none !important; }
#print-root { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.noscript { padding: 24px; text-align: center; }
::selection { background: var(--accent-tint); }
/* 44pt 히트 영역 확장(시각 크기는 유지) */
.hit { position: relative; }
.hit::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--label-4); border-top-color: var(--label-2); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; color: var(--label-2); font-size: var(--t-sub); }
.loading .spinner { width: 20px; height: 20px; border-width: 2.5px; }
@media (prefers-reduced-motion: reduce) {
  /* 공간 이동(슬라이드·스케일)은 끄고 페이드만 남긴다. 전역 'transition-duration: .01ms' 는 상속 속성(visibility) 전환이
     DOM 깊이마다 한 프레임씩 늦게 반영되는 문제(QA B5/B6)가 있어, 전환은 끄고 아래에서 opacity 만 명시적으로 켠다. */
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .spinner { animation: none; border-color: var(--label-2); border-top-color: var(--label-4); }
  .sheet, .action-sheet, .toast, .sheet.popover, .palette { transform: none !important; }
  .sheet-backdrop, .action-root, .toast, .palette-backdrop { transition: opacity var(--dur-exit) !important; }
}

/* ===== 3. 셸 레이아웃 ===== */
#app { position: fixed; inset: 0; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); background: var(--bg); }
.pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.pane-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pane-view > .view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#sidebar { --pane-bg: var(--bg-2); background: var(--pane-bg); border-right: var(--hairline) solid var(--separator); }
#content { --pane-bg: var(--bg); background: var(--pane-bg); }
#inspector { display: none; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; padding-left: var(--safe-l); padding-right: var(--safe-r); }
.only-mobile { display: none !important; }

.side-tabs { display: flex; gap: 2px; padding: calc(8px + var(--safe-t)) 12px 0; }
.side-tabs .segmented { width: 100%; }
/* 데스크톱 주요 탭 5개: 아이콘 + 짧은 라벨(세로 배치), 좁은 사이드바에도 맞음 */
.side-tabs .segmented.tabs { min-height: 48px; border-radius: var(--radius-ctl); }
.side-tabs .segmented.tabs button { flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 2px; font-size: var(--t-cap2); font-weight: 500; border-radius: var(--radius-s); display: inline-flex; align-items: center; justify-content: center; color: var(--label-2); }
.side-tabs .segmented.tabs button svg { width: 20px; height: 20px; stroke-width: 1.9; }
.side-tabs .segmented.tabs button[aria-checked="true"] { color: var(--accent-fg); font-weight: 600; }
.side-tabs .segmented.tabs button::after { top: -4px; bottom: -4px; }

/* 네비게이션 바 */
.navbar {
  position: relative; z-index: 6; flex: none;
  min-height: calc(var(--nav-h) + var(--safe-t)); padding: var(--safe-t) 8px 0;
  display: flex; align-items: center; gap: 2px;
  background: var(--pane-bg);
  border-bottom: var(--hairline) solid transparent; transition: border-color var(--dur-micro);
}
.navbar.collapsed, .navbar.inline { border-bottom-color: var(--separator); }
.navbar .nav-lead, .navbar .nav-trail { display: flex; align-items: center; gap: 0; flex: none; min-width: 44px; }
.navbar .nav-trail { justify-content: flex-end; }
.navbar .nav-center { flex: 1; min-width: 0; text-align: center; opacity: 0; transform: translateY(3px); transition: opacity var(--dur-exit), transform var(--dur-exit); }
.navbar.collapsed .nav-center, .navbar.inline .nav-center { opacity: 1; transform: none; }
.navbar .nav-title { font-size: var(--t-head); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.navbar .nav-subtitle { font-size: var(--t-cap); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.navbar .nav-subtitle.saving { color: var(--label-2); }
.navbar .nav-subtitle.error { color: var(--red-text); }
.large-title { font-size: var(--t-largetitle); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; padding: 2px 16px 4px; }
.only-wide { display: none !important; }
.large-sub { font-size: var(--t-foot); color: var(--label-2); padding: 0 16px 10px; }
.back-btn { display: inline-flex; align-items: center; gap: 0; min-height: 44px; padding: 0 8px 0 2px; border: 0; background: none; color: var(--accent-fg); font-size: var(--t-head); border-radius: var(--radius-ctl); max-width: min(40vw, 8em); }
.back-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--accent-fg); border-radius: var(--radius-ctl); padding: 0; transition: background var(--dur-micro); }
.icon-btn.on { background: var(--accent-tint); }
.icon-btn.label-color { color: var(--label); }
.icon-btn.sm { width: 36px; height: 36px; position: relative; }
.icon-btn.sm::after { content: ""; position: absolute; inset: -4px; } /* 히트 44pt */
.text-btn { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--accent-fg); font-size: var(--t-head); border-radius: var(--radius-ctl); }
.text-btn.bold { font-weight: 600; }
@media (hover: hover) {
  .icon-btn:hover, .text-btn:hover, .back-btn:hover { background: var(--fill-4); }
}
.icon-btn:active, .text-btn:active, .back-btn:active { opacity: .5; }

/* 탭 바 (모바일) */
.tabbar { display: none; }

/* ===== 4. 컴포넌트 ===== */
/* 세그먼트 컨트롤 (시각 32pt, 히트 영역 44pt) */
.segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--fill-3); border-radius: var(--radius-ctl); padding: 2px; min-height: 32px; gap: 0; position: relative; }
.segmented button {
  flex: 1 0 auto; min-width: 40px; padding: 0 10px; min-height: 28px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--label); font-size: var(--t-foot); font-weight: 500; white-space: nowrap;
  position: relative; transition: background var(--dur-micro), box-shadow var(--dur-micro);
}
.segmented button::before { content: ""; position: absolute; top: 15%; bottom: 15%; left: -1px; width: 1px; background: var(--label-4); border-radius: 1px; transition: opacity var(--dur-exit); }
.segmented button::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.segmented button:first-child::before, .segmented button[aria-checked="true"]::before, .segmented button[aria-checked="true"] + button::before { opacity: 0; }
.segmented button[aria-checked="true"] { background: var(--seg-on); box-shadow: var(--shadow-seg); font-weight: 600; }
.segmented button:focus-visible { outline-offset: -2px; z-index: 1; }
.segmented.lg { min-height: 36px; border-radius: var(--radius-ctl); }
.segmented.lg button { min-height: 32px; font-size: var(--t-sub); border-radius: var(--radius-s); }
.segmented .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* 배지 */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 22px; padding: .05em 8px; line-height: 1.3; border-radius: var(--radius-xs); font-size: var(--t-cap); font-weight: 700; letter-spacing: -.01em; flex: none; white-space: nowrap; }
.badge.imp-top { background: var(--red-tint); color: var(--red-text); }
.badge.imp-high { background: var(--orange-tint); color: var(--orange-text); }
.badge.imp-mid { background: var(--yellow-tint); color: var(--yellow-text); }
.badge.imp-low { background: var(--gray-tint); color: var(--gray-text); }
/* 다크 계열(dark·midnight)에서는 배지 배경을 불투명 혼색으로: 행 호버(--fill-4) 위에서도 대비 ≥5.1 (QA_REPORT_v18 O1) */
:root[data-scheme="dark"] .badge.imp-top { background: color-mix(in srgb, var(--red) 22%, var(--surface)); }
:root[data-scheme="dark"] .badge.imp-high { background: color-mix(in srgb, var(--orange) 22%, var(--surface)); }
:root[data-scheme="dark"] .badge.imp-mid { background: color-mix(in srgb, var(--yellow) 22%, var(--surface)); }
:root[data-scheme="dark"] .badge.imp-low { background: color-mix(in srgb, var(--gray) 22%, var(--surface)); }
.badge.lvl-high { background: var(--green-tint); color: var(--green-text); }
.badge.lvl-low { background: var(--blue-tint); color: var(--blue-text); }
.badge.round { min-width: 0; min-height: 18px; padding: 0 6px; font-size: var(--t-cap2); font-weight: 600; background: var(--fill-3); color: var(--label-2); border-radius: var(--radius-xxs); }
.dot-changed { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* 칩 (시각 32pt, 히트 영역 44pt) */
.chips { display: flex; gap: 8px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.chips-h { font-size: var(--t-cap); font-weight: 600; color: var(--label-2); padding: 10px 16px 6px; letter-spacing: .01em; }
.chips::-webkit-scrollbar { display: none; }
.chips .gap { width: 1px; flex: none; background: var(--separator); margin: 6px 2px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: .1em 12px; border-radius: var(--radius-pill); border: 0; background: var(--fill-3); color: var(--label); font-size: var(--t-sub); font-weight: 500; position: relative; white-space: nowrap; transition: background var(--dur-micro), color var(--dur-micro); }
.chip::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.chip .n { font-size: var(--t-cap); color: var(--label-2); font-variant-numeric: tabular-nums; }
.chip.on { background: var(--accent-bg); color: var(--on-accent); }
.chip.on .n { color: var(--on-accent-2); }
.chip.on .dot { background: var(--on-accent) !important; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
@media (hover: hover) { .chip:not(.on):hover { background: var(--fill-2); } }
.chip:active { opacity: .7; }

/* 검색 필드 */
.search { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; }
.search.in-tools { flex: 1; min-width: 0; padding: 0; }
.search .field { flex: 1; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; background: var(--fill-3); border-radius: var(--radius-ctl); color: var(--label-2); }
.search .field:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.search input { flex: 1; min-width: 0; min-height: 100%; padding: 2px 0; border: 0; background: none; outline: none; color: var(--label); font-size: var(--t-body); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--placeholder); }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search .clear { display: none; width: 28px; height: 28px; border: 0; background: none; color: var(--gray); padding: 0; align-items: center; justify-content: center; position: relative; }
.search .clear::after { content: ""; position: absolute; inset: -8px; }
.search.has-text .clear { display: inline-flex; }
.search .cancel { display: none; height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent-fg); font-size: var(--t-head); }
.search.active .cancel { display: inline-block; }

/* 문항 목록 */
.qlist { list-style: none; margin: 0; padding: 0 8px 24px; }
.qlist .section-h { font-size: var(--t-foot); font-weight: 600; color: var(--label-2); padding: 16px 8px 8px; letter-spacing: .01em; display: flex; justify-content: space-between; }
.qlist .section-h .n { font-weight: 400; font-variant-numeric: tabular-nums; }
.qrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--radius-ctl); transition: background var(--dur-micro); color: var(--label); text-decoration: none; cursor: default; -webkit-user-select: none; user-select: none; }
.qrow .main { min-width: 0; }
.qrow .title { font-size: var(--t-sub); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.qrow .title .no { color: var(--label-2); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.qrow .title .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qrow .sub { font-size: var(--t-foot); color: var(--label-2); display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .sub > * { vertical-align: middle; }
.qrow .sub > * + * { margin-left: 6px; }
.qrow .sub .badge { min-height: 18px; min-width: 24px; font-size: var(--t-cap2); }
.qrow .sub .deleted-tag { color: var(--red-text); font-weight: 600; }
.qrow .ev { font-size: var(--t-foot); color: var(--label-2); font-variant-numeric: tabular-nums; text-align: right; }
.qrow.deleted .title { color: var(--label-2); text-decoration: line-through; }
@media (hover: hover) { .qrow:hover { background: var(--fill-4); } }
.qrow:active { background: var(--fill-3); }
.qrow.selected { background: var(--accent-bg); color: var(--on-accent); }
.qrow.selected .title .no, .qrow.selected .sub, .qrow.selected .ev, .qrow.selected .sub .deleted-tag { color: var(--on-accent-2); }
.qrow.selected .badge { background: var(--on-accent); color: var(--accent-bg); } /* 선택 행(accent 채움) 안 배지: 흰 바탕 + accent 글자 5.7:1 */
.qrow.selected .dot-changed { background: var(--on-accent); }
.qrow:focus-visible { outline-offset: -2px; }
.qrow.cursor:not(.selected) { box-shadow: inset 0 0 0 2px var(--accent); }
.empty-state { padding: 48px 24px; text-align: center; color: var(--label-2); font-size: var(--t-sub); }
.empty-state svg { width: 40px; height: 40px; color: var(--label-3); margin-bottom: 8px; stroke-width: 1.4; }
.empty-state h2 { font-size: var(--t-title3); font-weight: 600; margin: 8px 0 4px; color: var(--label); }

/* 그룹화된 인셋 카드 */
.group { margin: 0 16px 24px; }
.group-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; font-size: var(--t-foot); color: var(--label-2); padding: 0 16px 8px; letter-spacing: .01em; }
.group-h .count { font-variant-numeric: tabular-nums; }
.group-f { font-size: var(--t-foot); color: var(--label-2); padding: 8px 16px 0; line-height: 1.4; }
.card { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-1); }
.card.flat { background: transparent; }
.row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; }
.row + .row::before, .field + .field::before, .field + .row::before, .row + .field::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hairline); background: var(--separator); }
.row .lbl { flex: 1; min-width: 0; font-size: var(--t-head); }
.row .lbl small { display: block; font-size: var(--t-foot); color: var(--label-2); }
.row .val { color: var(--label-2); font-size: var(--t-head); text-align: right; }
.row.link { cursor: pointer; }
.row.link .chev { color: var(--label-3); }
@media (hover: hover) { .row.link:hover { background: var(--fill-4); } }
.row.link:active { background: var(--fill-3); }
.row.action { justify-content: center; color: var(--accent-fg); font-size: var(--t-head); cursor: pointer; -webkit-user-select: none; user-select: none; }
.row.action.destructive { color: var(--red-fg); }
.row.action[aria-disabled="true"] { opacity: .45; }
@media (hover: hover) { .row.action:hover { background: var(--fill-4); } }
.row.action:active { background: var(--fill-3); }
.row .icon-lead { width: 28px; height: 28px; border-radius: var(--radius-s); display: inline-flex; align-items: center; justify-content: center; color: var(--on-color); flex: none; }
.row .icon-lead svg { width: 18px; height: 18px; stroke-width: 2; }

/* 편집 필드 */
.field { position: relative; padding: 12px 16px; transition: box-shadow var(--dur-micro); }
.field:focus-within { box-shadow: inset 3px 0 0 var(--accent); }
.field-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: 4px; min-height: 24px; }
.field-h .name { font-size: var(--t-foot); font-weight: 600; color: var(--label-2); }
.field-h .hint { font-size: var(--t-cap); color: var(--label-2); }
.field-h .count { margin-left: auto; font-size: var(--t-cap); color: var(--label-2); font-variant-numeric: tabular-nums; transition: color var(--dur-exit); }
/* 글자수 기준은 안내용: 이내 = systemGreen, 기준 초과 ~110% = systemOrange, 110% 초과 = systemRed (QA B7) */
.field-h .count.ok { color: var(--green-text); }
.field-h .count.warn { color: var(--orange-text); font-weight: 600; }
.field-h .count.over { color: var(--red-text); font-weight: 600; }
.field-h .copy { width: 32px; height: 32px; margin: -4px -6px -4px 0; border: 0; background: none; color: var(--label-2); border-radius: var(--radius-s); display: inline-flex; align-items: center; justify-content: center; padding: 0; position: relative; }
.field-h .copy::after { content: ""; position: absolute; inset: -6px; }
.field-h .copy svg { width: 16px; height: 16px; stroke-width: 2; }
@media (hover: hover) { .field-h .copy:hover { color: var(--accent-fg); background: var(--fill-4); } }
.ed { font-size: var(--t-body); line-height: var(--lh-answer); min-height: 1.6em; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; outline: none; border-radius: var(--radius-xxs); caret-color: var(--accent); }
.ed:empty::before { content: attr(data-placeholder); color: var(--placeholder); pointer-events: none; }
.ed.q { font-size: calc(var(--t-body) + .125rem); font-weight: 600; line-height: 1.45; }
.ed.memo { color: var(--label); }
.ed b, .ed strong { font-weight: 700; }
.ed mark { background: var(--mark); color: inherit; border-radius: 2px; } /* 하이라이트 모서리는 글자 높이에 맞춘 2px(토큰 예외) */
.ed:focus-visible { outline: none; }

/* 근거 카드 */
.evidence { padding: 12px 16px; font-size: var(--t-sub); }
.evidence .stats { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--label-2); margin-bottom: 6px; }
.evidence .stats b { color: var(--label); font-weight: 600; }
.evidence .ex { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; line-height: 1.45; }
.evidence .ex .badge { margin-top: 2px; }
.evidence .more { margin: 2px 0 0 -2px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent-fg); font-size: var(--t-sub); display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-s); }
.evidence .all { margin: 4px 0 0; padding: 0 0 0 4px; list-style: none; max-height: 40vh; overflow-y: auto; }
.evidence .src { color: var(--label-2); }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 16px 32px 8px; font-size: var(--t-foot); color: var(--label-2); }
.meta-line .sep { opacity: .5; }

/* 컨트롤 행 */
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px; }
.ctl-row .lbl { font-size: var(--t-foot); color: var(--label-2); margin-right: 2px; flex: none; }
.ctl-row .ctl { display: inline-flex; align-items: center; gap: 8px; }
.ctl-row .mtime { margin-left: auto; font-size: var(--t-cap); color: var(--label-2); white-space: nowrap; }

/* 배너 */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px 16px; border-radius: var(--radius-ctl); background: var(--red-tint); color: var(--red-text); font-size: var(--t-sub); font-weight: 500; }
.banner svg { flex: none; }
.banner .spacer { flex: 1; }
.banner button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-s); background: var(--red-bg); color: var(--on-color); font-weight: 600; font-size: var(--t-sub); position: relative; }
.banner button::after { content: ""; position: absolute; inset: -4px 0; }
.banner.info { background: var(--accent-tint); color: var(--accent-fg); }
.banner.info button { background: var(--accent-bg); }

/* 서식 툴바 */
.fmt-toolbar {
  display: none; align-items: center; gap: 4px; padding: 4px 8px; flex: none; min-height: var(--tool-h);
  background: var(--surface);
  border-bottom: var(--hairline) solid var(--separator); z-index: 5;
}
#content.editing .fmt-toolbar { display: flex; }
.fmt-toolbar .fmt-scroll { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.fmt-toolbar .fmt-scroll::-webkit-scrollbar { display: none; }
.fmt-toolbar .grp { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.fmt-toolbar .sep { width: 1px; height: 24px; background: var(--separator); margin: 0 4px; flex: none; }
.fmt-toolbar .lab { font-size: var(--t-cap); color: var(--label-2); margin: 0 2px 0 4px; }
.fmt-toolbar button { height: 40px; min-width: 40px; padding: 0 8px; border: 0; border-radius: var(--radius-s); background: var(--fill-4); color: var(--label); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-sub); flex: none; position: relative; }
.fmt-toolbar button::after { content: ""; position: absolute; inset: -4px -2px; }
.fmt-toolbar button.cmd svg { width: 20px; height: 20px; stroke-width: 2; }
.fmt-toolbar button.on { background: var(--accent-tint); color: var(--accent-fg); }
@media (hover: hover) { .fmt-toolbar button:hover { background: var(--fill-2); } }
.fmt-toolbar .sw { width: 32px; min-width: 32px; height: 32px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--separator); }
.fmt-toolbar .sw::after { inset: -6px; }
.fmt-toolbar .sw.hl { border-radius: var(--radius-s); }
/* 색상 선택기 스와치: 무지개 견본이므로 토큰 예외 */
.fmt-toolbar .pick { position: relative; width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(#f44, #fa0, #ff4, #4d4, #4cf, #44f, #c4f, #f44); overflow: hidden; }
.fmt-toolbar .pick.hl { border-radius: var(--radius-s); }
.fmt-toolbar .pick input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; padding: 0; border: 0; }
.fmt-toolbar .done { flex: none; margin-left: 4px; padding: 0 10px; color: var(--accent-fg); font-weight: 600; background: none; border-left: var(--hairline) solid var(--separator); border-radius: 0; height: 44px; }
.fmt-toolbar .done::after { content: none; }

/* 시트 / 모달 */
.sheet-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity var(--dur-enter); }
.sheet-backdrop:not(.open) { transition-duration: var(--dur-exit); }
.sheet-backdrop.open { opacity: 1; }
.sheet { display: flex; flex-direction: column; width: 100%; max-height: 92%; background: var(--bg); border-radius: var(--radius-card) var(--radius-card) 0 0; padding-bottom: var(--safe-b); transform: translateY(100%); transition: transform var(--dur-enter) var(--ease-out); box-shadow: var(--shadow-2); }
.sheet-backdrop.open .sheet { transform: none; }
.sheet .grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); margin: 6px auto 0; flex: none; }
.sheet-h { display: flex; align-items: center; min-height: 48px; padding: 0 8px; flex: none; }
.sheet-h .title { flex: 1; text-align: center; font-size: var(--t-head); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-h .side { min-width: 60px; display: flex; }
.sheet-h .side.r { justify-content: flex-end; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 16px; flex: 1; min-height: 0; }
.sheet-body .group { margin: 8px 16px 16px; }
.menu-list { list-style: none; margin: 8px 16px 8px; padding: 0; background: var(--surface); border-radius: var(--radius-card); overflow: hidden; }
.menu-list li { position: relative; }
.menu-list li + li::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: var(--hairline); background: var(--separator); }
.menu-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 16px; border: 0; background: none; text-align: left; font-size: var(--t-head); color: var(--label); }
.menu-list button svg { color: var(--label-2); }
.menu-list button.destructive, .menu-list button.destructive svg { color: var(--red-fg); }
.menu-list button .check { margin-left: auto; color: var(--accent-fg); }
.menu-list button .lbl { flex: 1; }
@media (hover: hover) { .menu-list button:hover { background: var(--fill-4); } }
.menu-list button:active { background: var(--fill-3); }

/* 액션 시트 / 알럿 */
.action-root { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; padding-bottom: calc(8px + var(--safe-b)); background: var(--scrim); opacity: 0; transition: opacity var(--dur-enter); }
.action-root.open { opacity: 1; }
.action-sheet { transform: translateY(24px); transition: transform var(--dur-enter) var(--ease-out); }
.action-root.open .action-sheet { transform: none; }
.action-sheet .ag { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 8px; }
.action-sheet .msg { padding: 16px; text-align: center; font-size: var(--t-foot); color: var(--label-2); line-height: 1.4; }
.action-sheet .msg b { display: block; font-size: var(--t-foot); font-weight: 600; color: var(--label); }
.action-sheet .msg b + span { display: block; margin-top: 2px; }
.action-sheet button { display: block; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-top: var(--hairline) solid var(--separator); background: none; font-size: var(--t-title3); color: var(--accent-fg); }
.action-sheet .msg + button { border-top: var(--hairline) solid var(--separator); }
.action-sheet .ag > button:first-child { border-top: 0; }
.action-sheet button.destructive { color: var(--red-fg); }
.action-sheet button.cancel { font-weight: 600; background: var(--surface); }
.action-sheet button:active { background: var(--fill-3); }

/* 토스트 */
#toast-root { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; pointer-events: none; padding-bottom: calc(24px + var(--safe-b)); }
.toast { pointer-events: none; max-width: calc(100% - 32px); min-height: 44px; padding: 10px 20px; border-radius: var(--radius-pill); background: var(--label); color: var(--bg); font-size: var(--t-sub); font-weight: 500; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); box-shadow: var(--shadow-2); margin-top: 8px; }
.toast.show { opacity: 1; transform: none; }

/* 입력 요소 */
.input { width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-ctl); background: var(--fill-3); color: var(--label); font-size: var(--t-head); -webkit-appearance: none; appearance: none; }
.input:focus { box-shadow: 0 0 0 2px var(--accent); outline: none; }
.input::placeholder { color: var(--placeholder); }
.card .input { background: transparent; padding: 0; min-height: 44px; border-radius: 0; }
.card .input:focus { box-shadow: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-ctl); background: var(--accent-bg); color: var(--on-accent); font-size: var(--t-head); font-weight: 600; width: 100%; transition: opacity var(--dur-micro); }
.btn.study { background: var(--study); color: var(--on-study); }
.btn:active { opacity: .7; }
.btn.secondary { background: var(--fill-3); color: var(--accent-fg); }
.btn.destructive { background: var(--red-bg); color: var(--on-color); }
.btn.sm { min-height: 36px; padding: 0 16px; font-size: var(--t-sub); width: auto; border-radius: var(--radius-ctl); position: relative; }
.btn.sm::after { content: ""; position: absolute; inset: -4px 0; }
.btn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7em), 1fr)); gap: 8px; padding: 12px 16px; }
.btn-grid .btn { background: var(--fill-3); color: var(--accent-fg); min-height: 44px; font-weight: 500; font-size: var(--t-sub); border-radius: var(--radius-ctl); padding: 0 10px; }
input[type="range"].slider { -webkit-appearance: none; appearance: none; flex: 1; height: 44px; background: transparent; margin: 0; }
input[type="range"].slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--fill); }
input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-knob); margin-top: -12px; }
input[type="range"].slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fill); }
input[type="range"].slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-knob); }
.slider-row { display: flex; align-items: center; gap: 12px; padding: 4px 16px; }
.slider-row .a { color: var(--label-2); flex: none; }
.slider-row .a.small { font-size: var(--t-foot); }
.slider-row .a.big { font-size: var(--t-title); }
.switch { position: relative; width: 51px; height: 31px; border-radius: var(--radius-pill); border: 0; background: var(--fill); padding: 0; flex: none; transition: background var(--dur-micro); }
.switch::before { content: ""; position: absolute; inset: -7px -4px; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-knob); transition: transform var(--dur-enter) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.form-error { color: var(--red-text); font-size: var(--t-foot); margin: 6px 0 0; min-height: 20px; }
.form-ok { color: var(--green-text); font-size: var(--t-foot); margin: 6px 0 0; }
.kbd { font-family: var(--font-mono); font-size: var(--t-cap); padding: 1px 6px; border-radius: var(--radius-xxs); background: var(--fill-3); color: var(--label); }

/* ===== 5. 로그인 ===== */
#login-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; padding-top: calc(24px + var(--safe-t)); padding-bottom: calc(24px + var(--safe-b)); background: var(--gbg); overflow-y: auto; }
.login-card { width: 100%; max-width: 360px; background: var(--surface); border-radius: var(--radius-xl); padding: 32px 24px 24px; box-shadow: var(--shadow-1); }
.login-card .app-icon { width: 72px; height: 72px; border-radius: var(--radius-xl); margin: 0 auto 14px; display: block; box-shadow: var(--shadow-1); }
.login-card h1 { font-size: var(--t-title); font-weight: 700; text-align: center; margin: 0 0 2px; letter-spacing: -.01em; }
.login-card .sub { text-align: center; color: var(--label-2); font-size: var(--t-foot); margin: 0 0 24px; }
.login-card .fields { background: var(--fill-4); border-radius: var(--radius-ctl); overflow: hidden; margin-bottom: 16px; }
.login-card .fields .row { padding: 0 16px; }
.login-card .fields .row + .row::before { left: 16px; }
.login-card .fields input { background: none; padding: 0; height: 48px; width: 100%; border: 0; font-size: var(--t-head); outline: none; color: var(--label); }
.login-card .fields input::placeholder { color: var(--placeholder); }
.login-card .fields .row:focus-within { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.login-card .fields .lbl { flex: none; width: auto; min-width: 4.6em; font-size: var(--t-sub); color: var(--label-2); }
.login-card .btn { margin-top: 6px; }
.login-card .version { text-align: center; color: var(--label-2); font-size: var(--t-cap); margin-top: 16px; }

/* ===== 6. 디테일 ===== */
.detail-head { padding: 12px 16px 0; }
.detail-head .meta-line { padding: 4px 16px 10px; }
.detail-wrap { position: relative; }
.detail-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--label-2); text-align: center; padding: 40px; }
.detail-placeholder svg { width: 56px; height: 56px; stroke-width: 1.2; color: var(--label-3); margin-bottom: 12px; }
.detail-placeholder h2 { margin: 0 0 4px; font-size: var(--t-title3); font-weight: 600; color: var(--label); }
.detail-placeholder p { margin: 0; font-size: var(--t-sub); }
.save-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-cap); color: var(--label-2); }
.save-status.error { color: var(--red-text); cursor: pointer; }
.save-status .spinner { width: 12px; height: 12px; }
.version-card .group-h { font-size: var(--t-sub); font-weight: 600; color: var(--label); }

/* 이력 */
.history-list { list-style: none; margin: 8px 16px; padding: 0; background: var(--surface); border-radius: var(--radius-card); overflow: hidden; }
.history-list li { position: relative; }
.history-list li + li::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hairline); background: var(--separator); }
.history-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; background: none; text-align: left; color: var(--label); }
.history-list button .t { font-size: var(--t-sub); font-weight: 500; font-variant-numeric: tabular-nums; }
.history-list button .t .rel { color: var(--label-2); font-weight: 400; }
.history-list button .s { font-size: var(--t-foot); color: var(--label-2); }
.history-list button[aria-current="true"] { background: var(--accent-tint); }
@media (hover: hover) { .history-list button:hover { background: var(--fill-4); } }
.preview { margin: 8px 16px; }
.preview .card { padding: 4px 0; }
.preview .pf { padding: 8px 16px; position: relative; }
.preview .pf + .pf::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hairline); background: var(--separator); }
.preview .pf .k { font-size: var(--t-cap); font-weight: 600; color: var(--label-2); margin-bottom: 2px; }
.preview .pf .v { font-size: var(--t-sub); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.preview .pf.diff .k { color: var(--orange-text); }
.preview .pf.diff { background: var(--yellow-tint); }
.sheet-actions { padding: 8px 16px 4px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== 7. 분석 ===== */
.analysis { padding: 0 16px 48px; max-width: 1100px; }
.analysis h1 { font-size: var(--t-title); font-weight: 700; margin: 8px 0 4px; letter-spacing: -.01em; }
.analysis .meta { color: var(--label-2); font-size: var(--t-foot); margin-bottom: 20px; line-height: 1.5; }
.analysis h2 { font-size: var(--t-title3); font-weight: 700; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); scroll-margin-top: 12px; letter-spacing: -.01em; }
.analysis h3 { font-size: var(--t-head); font-weight: 600; margin: 24px 0 8px; }
.analysis h4 { font-size: var(--t-sub); font-weight: 600; margin: 16px 0 6px; color: var(--label-2); }
.analysis p, .analysis li { font-size: var(--t-body); line-height: 1.6; }
.analysis p { margin: 8px 0; }
.analysis ul, .analysis ol { padding-left: 22px; margin: 8px 0; }
.analysis li { margin: 4px 0; }
.analysis .callout { background: var(--accent-tint); border-left: 4px solid var(--accent); padding: 12px 14px; border-radius: var(--radius-ctl); margin: 12px 0; font-size: var(--t-body); line-height: 1.6; }
.analysis blockquote { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--separator-opaque); color: var(--label-2); }
.analysis figure { margin: 16px 0; }
.analysis figure img { display: block; width: 100%; height: auto; max-width: 900px; border-radius: var(--radius-ctl); background: var(--img-bg); border: var(--hairline) solid var(--separator); }
.analysis figcaption { font-size: var(--t-foot); color: var(--label-2); margin-top: 6px; }
.analysis .cap { font-size: var(--t-foot); font-weight: 600; color: var(--label-2); margin: 16px 0 6px; }
.analysis .tfilter { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--radius-ctl); background: var(--fill-3); color: var(--label-2); margin: 6px 0 8px; max-width: 360px; }
.analysis .tfilter:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.analysis .tfilter input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: var(--t-sub); color: var(--label); }
.analysis .tfilter input::placeholder { color: var(--placeholder); }
.analysis .twrap { overflow-x: auto; border-radius: var(--radius-ctl); border: var(--hairline) solid var(--separator); background: var(--surface); margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.analysis table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-foot); }
.analysis table.small { font-size: calc(var(--t-foot) - .5px); }
.analysis th, .analysis td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: var(--hairline) solid var(--separator); line-height: 1.45; overflow-wrap: break-word; }
.analysis th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-weight: 600; color: var(--label-2); white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; }
.analysis th .arrow { display: inline-block; width: 1em; color: var(--accent-fg); opacity: 0; margin-left: 2px; }
.analysis th.asc .arrow, .analysis th.desc .arrow { opacity: 1; }
.analysis th.asc .arrow::after { content: "↑"; }
.analysis th.desc .arrow::after { content: "↓"; }
.analysis tr:last-child td { border-bottom: 0; }
.analysis td.kw { color: var(--accent-fg); cursor: pointer; font-weight: 500; }
@media (hover: hover) { .analysis td.kw:hover { text-decoration: underline; } }
.analysis td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.analysis .tnote { font-size: var(--t-cap); color: var(--label-2); margin: -8px 0 12px; }
.toc { list-style: none; margin: 0; padding: 8px 8px 24px; }
.toc li a { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: var(--radius-s); color: var(--label); font-size: var(--t-sub); line-height: 1.3; }
.toc li a.active { background: var(--accent-tint); color: var(--accent-fg); font-weight: 600; }
@media (hover: hover) { .toc li a:hover { background: var(--fill-4); } }
.toc-h { font-size: var(--t-foot); font-weight: 600; color: var(--label-2); padding: 16px 18px 4px; }
.toc .row-icon { display: inline-flex; width: 28px; height: 28px; border-radius: var(--radius-s); align-items: center; justify-content: center; color: var(--on-color); margin-right: 10px; flex: none; }

/* 제외 문항 키워드 표 (편집 가능, 인셋 카드) */
.analysis .group.dropped { margin: 12px 0 8px; }
.dropped .dhead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1fr) 44px; gap: 12px; padding: 10px 16px 8px; font-size: var(--t-foot); font-weight: 600; color: var(--label-2); border-bottom: var(--hairline) solid var(--separator); }
.dropped .drow { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1fr) 44px; gap: 12px; align-items: start; padding: 8px 16px 8px; transition: box-shadow var(--dur-exit); }
.dropped .drow + .drow::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hairline); background: var(--separator); }
.dropped .drow:focus-within { box-shadow: inset 3px 0 0 var(--accent); }
.dropped .dcell { display: block; min-width: 0; padding: 4px 0; }
.dropped .dcell .dl { display: none; font-size: var(--t-cap); font-weight: 600; color: var(--label-2); margin-bottom: 2px; }
.dropped textarea { display: block; width: 100%; min-height: 1.45em; padding: 0; border: 0; background: transparent; resize: none; overflow: hidden; font-size: var(--t-sub); line-height: 1.45; color: var(--label); outline: none; -webkit-appearance: none; appearance: none; border-radius: var(--radius-xxs); caret-color: var(--accent); field-sizing: content; }
.dropped textarea::placeholder { color: var(--placeholder); }
.dropped .del { color: var(--label-2); margin: -4px 0; justify-self: end; }
@media (hover: hover) { .dropped .del:hover { color: var(--red-fg); background: var(--red-tint); } }
.dropped .status { transition: color var(--dur-exit); }
.dropped .status.error { color: var(--red-text); cursor: pointer; }
.dropped .empty { padding: 20px 16px; color: var(--label-2); font-size: var(--t-sub); text-align: center; }

/* ===== 8. 설정 ===== */
.settings { padding-top: 4px; padding-bottom: 40px; }
.settings .row .segmented { flex: none; }
.font-preview { margin: 0; padding: 10px 16px 12px; font-size: var(--t-body); color: var(--label-2); line-height: var(--lh-answer); }
.import-row { padding: 12px 16px; display: grid; gap: 10px; }
.file-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.file-pick .name { flex: 1; min-width: 0; font-size: var(--t-sub); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-pick input[type="file"] { display: none; }
.pw-form { padding: 4px 0; }
.pw-form .row input { flex: 1 1 8em; min-width: 0; background: none; border: 0; outline: none; font-size: var(--t-head); min-height: 28px; color: var(--label); padding: 0; }
.pw-form .row .lbl { flex: none; width: auto; min-width: 5.5em; font-size: var(--t-sub); color: var(--label-2); }
.pw-form .row:focus-within { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pw-form .foot { padding: 8px 16px 12px; }

/* ===== 9. 모바일 (<900px) ===== */
@media (max-width: 899px) {
  :root { --sidebar-w: 100%; }
  #app { display: block; }
  .only-desktop { display: none !important; }
  .only-mobile { display: initial !important; }
  .pane { position: absolute; inset: 0; }
  #sidebar { z-index: 1; border-right: 0; transition: transform var(--dur-enter) var(--ease-out); }
  #content { z-index: 2; transform: translateX(100%); visibility: hidden; transition: transform var(--dur-enter) var(--ease-out), visibility 0s linear var(--dur-enter); box-shadow: var(--shadow-pane); }
  #app.show-detail #content { transform: none; visibility: visible; transition: transform var(--dur-enter) var(--ease-out), visibility 0s; }
  #app.show-detail #sidebar { transform: translateX(-28%); }
  #app.tab-analysis #sidebar, #app.tab-settings #sidebar, #app.tab-today #sidebar, #app.tab-practice #sidebar { transform: translateX(-28%); }
  @media (prefers-reduced-motion: reduce) {
    #content { transform: none; opacity: 0; transition: opacity var(--dur-enter), visibility 0s linear var(--dur-enter) !important; }
    #app.show-detail #content { opacity: 1; transition: opacity var(--dur-enter), visibility 0s !important; }
    #sidebar { transition: none !important; transform: none !important; }
  }
  .scroll { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 8px); }
  #app.editing .scroll { padding-bottom: calc(var(--tool-h) + var(--safe-b) + 8px); }
  .navbar .nav-lead { min-width: 44px; }
  .tabbar { display: flex !important; position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--bg); border-top: var(--hairline) solid var(--separator); transition: transform var(--dur-exit); }
  .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tab-h); border: 0; background: none; color: var(--label-2); font-size: var(--t-tab); font-weight: 500; padding: 4px 0 2px; min-width: 0; }
  .tabbar button span { white-space: nowrap; }
  .tabbar button svg { width: 24px; height: 24px; stroke-width: 1.7; transition: stroke-width var(--dur-micro); }
  .tabbar button[aria-selected="true"] { color: var(--accent-fg); }
  .tabbar button[aria-selected="true"] svg { stroke-width: 2.2; }
  .tabbar button:focus-visible { outline-offset: -3px; }
  #app.editing .tabbar { transform: translateY(100%); }
  /* 키보드 위 액세서리 바: --kb = visualViewport 로 계산한 키보드 높이, --kb-safe = 키보드가 없을 때만 safe-area */
  #content.editing .fmt-toolbar { position: absolute; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 30; border-bottom: 0; border-top: var(--hairline) solid var(--separator); padding-bottom: calc(4px + var(--kb-safe, var(--safe-b))); }
  .search .field { height: 40px; }
  .group { margin: 0 16px 24px; }
  .meta-line { padding: 12px 16px 8px; }
  .qrow { min-height: 56px; }
  .qrow .title { font-size: var(--t-body); }
  .qrow.selected { background: var(--surface); color: var(--label); } /* 반투명 채움 위에 배지 틴트가 겹치면 4.2:1 → 불투명 surface 로 */
  .qrow.selected .title .no, .qrow.selected .sub, .qrow.selected .ev { color: var(--label-2); }
  .qrow.selected .badge.imp-top { background: var(--red-tint); color: var(--red-text); }
  .qrow.selected .badge.imp-high { background: var(--orange-tint); color: var(--orange-text); }
  .qrow.selected .badge.imp-mid { background: var(--yellow-tint); color: var(--yellow-text); }
  .qrow.selected .badge.imp-low { background: var(--gray-tint); color: var(--gray-text); }
  .qrow.selected .badge.lvl-high { background: var(--green-tint); color: var(--green-text); }
  .qrow.selected .badge.lvl-low { background: var(--blue-tint); color: var(--blue-text); }
  .qrow.selected .dot-changed { background: var(--accent); }
  .analysis { padding-left: 16px; padding-right: 16px; }
  .analysis .tfilter { height: 44px; }
  .analysis th { padding: 13px 10px; }
  .analysis td { padding: 13px 10px; }
  .analysis td:not(.num) { min-width: 10em; }
  .btn.sm { min-height: 44px; }
  .dropped .dhead { display: none; }
  .dropped .drow { grid-template-columns: minmax(0, 1fr) 44px; gap: 4px 8px; padding: 10px 16px 12px; }
  .dropped .dcell { grid-column: 1; }
  .dropped .dcell .dl { display: block; }
  .dropped .del { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: -6px 0 0; }
  #toast-root { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 12px); }
  #app.editing ~ #toast-root { padding-bottom: calc(var(--tool-h) + var(--safe-b) + 12px); }
}

/* ===== 10. 데스크톱 (≥900px) ===== */
@media (min-width: 900px) {
  .sheet-backdrop { align-items: center; }
  .sheet { width: min(600px, calc(100% - 48px)); max-height: 85vh; border-radius: var(--radius-card); padding-bottom: 0; transform: scale(.97); opacity: 0; transition: transform var(--dur-enter) var(--ease-out), opacity var(--dur-enter); }
  .sheet-backdrop.open .sheet { transform: none; opacity: 1; }
  .sheet .grabber { display: none; }
  /* 앵커 팝오버 메뉴(풀다운): 디밍 없이 버튼 아래에 붙음 */
  .sheet-backdrop.pop { background: transparent; display: block; }
  .sheet.popover { position: absolute; width: min(max(280px, 13em), calc(100vw - 24px)); max-height: min(70vh, 520px); border-radius: var(--radius-card); background: var(--surface); border: var(--hairline) solid var(--separator); transform: scale(.96); transform-origin: var(--po, top right); }
  .sheet.popover .sheet-h { display: none; }
  .sheet.popover .sheet-body { padding: 0; }
  .sheet.popover .menu-list { margin: 6px 0; background: transparent; border-radius: 0; }
  .sheet.popover .menu-list li + li::before { left: 48px; }
  .sheet.popover .menu-list button { min-height: 44px; font-size: var(--t-sub); padding: 6px 16px; }
  .sheet.popover .menu-list button svg { width: 20px; height: 20px; }
  .action-root { align-items: center; justify-content: center; padding: 24px; }
  .action-sheet { width: min(max(300px, 14em), calc(100vw - 48px)); transform: scale(.97); transition: transform var(--dur-enter) var(--ease-out); background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-2); overflow: hidden; }
  .action-sheet .ag { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; margin-bottom: 0; border-radius: 0; box-shadow: none; }
  .action-sheet .ag.cancel-group { background: transparent; }
  .action-sheet .msg { padding: 20px 16px 16px; }
  .action-sheet .msg b { font-size: var(--t-head); color: var(--label); }
  .action-sheet .msg b + span { margin-top: 4px; font-size: var(--t-foot); }
  .action-sheet button { font-size: var(--t-head); min-height: 44px; }
  .action-sheet button.cancel { background: none; border-top: var(--hairline) solid var(--separator); margin-top: 0; }
  .large-title { line-height: 1.2; padding-top: 8px; }
  .detail-wrap { max-width: var(--content-max, 760px); margin: 0 auto; width: 100%; }
  /* 서식 툴바: 편집 중인 필드 바로 위에 떠오름(레이아웃 밀림 없음) */
  #content.editing .fmt-toolbar.float { position: absolute; left: 16px; right: auto; top: var(--tb-top, 0px); max-width: calc(100% - 32px); z-index: 7; border-radius: var(--radius-card); border: var(--hairline) solid var(--separator); border-bottom-color: var(--separator); box-shadow: var(--shadow-2); background: var(--surface); min-height: 0; padding: 4px 8px; transition: none; }
  .fmt-toolbar.float .fmt-scroll { overflow: visible; flex-wrap: wrap; }
  .analysis { margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  .settings { max-width: 720px; margin: 0 auto; width: 100%; }
  .qlist { padding-left: 10px; padding-right: 10px; }
  .chips { flex-wrap: wrap; row-gap: 8px; }
  /* 데스크톱 토스트: 본문 열의 오른쪽 아래(사이드바를 가리지 않음). 집중 모드·연습 오버레이에서는 전체 폭 기준 */
  #toast-root { left: var(--sidebar-w); align-items: flex-end; padding: 0 24px 24px 0; }
  #app.focus ~ #toast-root, html.practicing #toast-root { left: 0; align-items: center; padding-left: 0; padding-right: 0; }
  #app.focus ~ #toast-root { padding-bottom: 28px; }
}


/* ---- 연습 타이머 */
.timer { margin: 0 16px 12px; padding: 12px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.timer .tm-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.timer .tm-title { font-size: var(--t-foot); font-weight: 600; color: var(--label-2); }
.timer .tm-presets { display: inline-flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.timer .tm-preset { min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--fill-3); color: var(--label); font-size: var(--t-foot); font-weight: 500; position: relative; }
.timer .tm-preset::after { content: ""; position: absolute; inset: -8px 0; }
.timer .tm-preset.on { background: var(--accent-bg); color: var(--on-accent); }
/* v1.7: −10 · 시간 · +10 · 시작 · 재설정 을 줄바꿈 flex 로(글자가 크면 시작·재설정이 둘째 줄). 시간은 내용 폭을 지키고 남는 폭을 가져간다 */
.timer .tm-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timer .tm-row2 .tm-time { flex: 1 1 auto; min-width: max-content; }
.timer .tm-row2 .tm-start { flex: 1 1 auto; }
.timer .tm-row2 .tm-reset { flex: 0 1 auto; }
.timer .tm-reset, .timer .tm-start { white-space: nowrap; }
.timer .tm-time { min-width: 0; white-space: nowrap; text-align: center; font-size: var(--t-num); font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--label); line-height: 1.1; }
.timer .tm-step { min-width: 44px; min-height: 36px; padding: 0 6px; border: 0; border-radius: var(--radius-ctl); background: var(--fill-3); color: var(--label); font-size: var(--t-foot); font-variant-numeric: tabular-nums; position: relative; }
.timer .tm-step::after, .timer .tm-start::after, .timer .tm-reset::after { content: ""; position: absolute; inset: -4px 0; } /* 36pt 시각 → 44pt 히트 */
.timer .tm-start { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-ctl); background: var(--accent-bg); color: var(--on-accent); font-weight: 600; font-size: var(--t-sub); min-width: 72px; position: relative; }
.timer .tm-reset { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-ctl); background: var(--fill-3); color: var(--label); font-size: var(--t-sub); position: relative; }
.timer .tm-bar { height: 4px; border-radius: 2px; background: var(--fill-3); margin-top: 10px; overflow: hidden; }
.timer .tm-fill { height: 100%; width: 100%; background: var(--study); transition: width var(--dur-enter) linear; }
.timer.running .tm-start { background: var(--orange-tint); color: var(--orange-text); } /* 흰 글자+orange 는 2.2:1 → 틴트+진한 글자 6.3:1 */
.timer.warn .tm-time, .timer.warn .tm-title { color: var(--red-fg, var(--red)); }
.timer.warn .tm-fill { background: var(--red); }
.timer.over .tm-time, .timer.over .tm-title { color: var(--red-fg, var(--red)); }
.timer.over .tm-fill { background: var(--red); }
.timer.over.running .tm-time { animation: tm-flash 1s ease-in-out 3; }
@keyframes tm-flash { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .timer.over.running .tm-time { animation: none; } .timer .tm-fill { transition: none; } }
/* 모바일 상세 상단 컴팩트 타이머: 데스크톱에서는 사이드바 타이머가 보이므로 숨김 */
.timer.compact { margin: 0 0 12px; padding: 8px 10px 10px; }
.timer.compact .tm-time { font-size: var(--t-num-sm); }
.timer.compact .tm-presets { margin-left: 0; }
@media (min-width: 900px) { .timer.compact { display: none; } }
/* ---- 칸별 수정 시각 */
.field-h .fmt { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-cap); color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.field-h .fmt.recent { color: var(--accent-fg); }
.field-h .fmt.week { color: var(--label-2); }
.field-h .fmt.old { color: var(--label-2); }
.field-h .fmt.none { color: var(--label-2); }
.field-h .fmt.none svg { opacity: .6; }

/* ---- v1.3: 가변 목록(추가 설명·꼬리질문) — 항목마다 카드(헤더: 이름 + 삭제) + 그룹 끝의 '추가' 행 */
.list-group .card + .card { margin-top: 10px; }
.list-group .group-h .count { font-variant-numeric: tabular-nums; }
.list-item-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 2px 4px 0 16px; }
.list-item-h .name { font-size: var(--t-sub); font-weight: 600; color: var(--label); }
.list-item-h .del { width: 44px; height: 44px; color: var(--label-2); }
.list-item-h .del svg { width: 22px; height: 22px; }
@media (hover: hover) { .list-item-h .del:hover { color: var(--red-fg); background: var(--red-tint); } }
.list-item-h .del:active { color: var(--red-fg); }
.list-item-h + .field::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hairline); background: var(--separator); }
.list-empty { padding: 14px 16px; color: var(--label-2); font-size: var(--t-sub); }
.list-add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 16px; border: 0; background: none; color: var(--accent-fg); font-size: var(--t-head); font-weight: 500; text-align: left; }
.list-add svg { color: var(--accent); }
@media (hover: hover) { .list-add:hover { background: var(--fill-4); } }
.list-add:active { background: var(--fill-3); }
.list-add:focus-visible { outline-offset: -2px; }

/* ---- v1.3: 즐겨찾기 — 채워진 별은 accent */
svg.icon.fill { fill: currentColor; }
.icon-btn.fav { color: var(--label-2); }
.icon-btn.fav.on { color: var(--accent); }
.qrow .trail { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.qrow .fav-star { display: inline-flex; color: var(--accent); }
.qrow .fav-star svg { width: 16px; height: 16px; }
.qrow.selected .fav-star { color: var(--on-accent); }
@media (max-width: 899px) { .qrow.selected .fav-star { color: var(--accent); } }
.chip .chip-ic { display: inline-flex; color: var(--accent); margin-left: -2px; }
.chip.on .chip-ic { color: var(--on-accent); }

/* ---- v1.6 태그 칩(SPEC §14.3): 목록 행 보조 줄(최대 2 + "+n") · 필터 미니 칩 · 상세 미리보기 · 연습 카드 메타 · ⌘K 결과. 토큰만 사용 */
.tags { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; vertical-align: middle; }
.tag-chip { display: inline-block; box-sizing: border-box; min-height: 18px; line-height: 1.5; padding: 0 7px; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-fg); font-size: var(--t-cap2); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12em; min-width: 2.5em; flex: 0 1 auto; }
.tag-chip.more { background: var(--fill-3); color: var(--label-2); flex: none; min-width: 0; font-variant-numeric: tabular-nums; }
.tags.lg { flex-wrap: wrap; overflow: visible; gap: 6px; }
.tags.lg .tag-chip { min-height: 24px; line-height: 1.6; padding: 0 10px; font-size: var(--t-cap); max-width: 100%; }
/* 목록 행: 보조 줄(기출·패턴) 아래 한 줄. 행 폭(390px 사이드바 포함)을 넘지 않게 overflow hidden + 칩 말줄임 */
.qrow .main > .tags.row-tags { display: flex; max-width: 100%; margin-top: 4px; }
.qrow .main > .tags.row-tags .tag-chip { min-width: 3.5em; }
.qrow .main > .tags.row-tags .tag-chip:first-child { flex-shrink: 0; max-width: 100%; } /* 첫 태그는 늘 온전히, 둘째만 말줄임 */
.qrow.selected .tag-chip { background: var(--on-accent); color: var(--accent-bg); }
.qrow.selected .tag-chip.more { background: var(--on-accent-2); color: var(--accent-bg); } /* QA v1.6: 반투명 흰 채움 + 흰 글자는 3.0:1 → 흰 채움 + accent 글자 4.8:1 */
@media (max-width: 899px) { .qrow.selected .tag-chip { background: var(--accent-tint); color: var(--accent-fg); } .qrow.selected .tag-chip.more { background: var(--fill-3); color: var(--label-2); } }
/* 상세 '태그' 칸: 칩 미리보기 + 쉼표 구분 한 줄 입력 + 기존 태그 제안 */
.field-tags .tag-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.field-tags .tag-preview:empty { display: none; }
.field-tags .tag-input { display: block; width: 100%; min-height: 36px; padding: 2px 10px; border: 0; border-radius: var(--radius-s); background: var(--fill-4); color: var(--label); font: inherit; font-size: var(--t-body); outline: none; -webkit-appearance: none; appearance: none; caret-color: var(--accent); transition: box-shadow var(--dur-micro); }
.field-tags .tag-input::placeholder { color: var(--placeholder); }
.field-tags .tag-input:focus { box-shadow: 0 0 0 2px var(--accent); }
.field-tags .tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.field-tags .tag-suggest:empty { display: none; }
.field-tags .tag-suggest .lbl { font-size: var(--t-cap); color: var(--label-2); margin-right: 2px; }
.field-tags .tag-suggest .sug { min-height: 24px; line-height: 1.5; padding: 0 10px; border: 0; background: var(--fill-3); color: var(--label); font: inherit; font-size: var(--t-cap); font-weight: 500; max-width: 100%; position: relative; cursor: pointer; transition: background var(--dur-micro); }
.field-tags .tag-suggest .sug::before { content: "+ "; color: var(--label-2); }
.field-tags .tag-suggest .sug::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; } /* 히트 44pt */
@media (hover: hover) { .field-tags .tag-suggest .sug:hover { background: var(--fill-2); } }
.field-tags .tag-suggest .sug:active { opacity: .7; }
/* 연습 카드 메타 · ⌘K 결과 */
.pr-meta .tags.pr-tags { flex-wrap: wrap; overflow: visible; }
.palette .pal-item .tags.pal-tags { flex: none; max-width: 38%; }
/* QA v1.6: 선택 행(accent-tint) 위에 tint 칩이 겹치면 다크에서 3.7:1 → 불투명 surface 채움(라이트 6.6 · 다크 6.8) */
.palette .pal-item[aria-selected="true"] .tag-chip { background: var(--surface); color: var(--accent-fg); }
.palette .pal-item[aria-selected="true"] .badge { background: var(--surface); }   /* v1.7: 다크·미드나이트에서 틴트 위 틴트 배지 4.0~4.3:1 → 불투명 surface 채움 */
.palette .pal-item[aria-selected="true"] .tag-chip.more { background: var(--surface); color: var(--label-2); }
.menu-list button svg.fill { color: var(--accent); }

/* ===== 11. v1.4 — 목록 도구 행(검색 + 필터 + 정렬), 필터 팝오버/시트, 활성 필터 요약 ===== */
.list-view { position: relative; }
.list-tools { display: flex; align-items: center; gap: 8px; padding: 0 16px 8px; }
.list-tools .search .field { min-height: 36px; min-width: 0; }
.list-tools .search .cancel { flex: none; padding: 0 2px; }
.list-tools .search input { font-size: var(--t-sub); }
.flt-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-ctl); background: var(--fill-3); color: var(--label); font-size: var(--t-sub); font-weight: 500; transition: background var(--dur-micro); }
.flt-btn::after { content: ""; position: absolute; inset: -4px 0; }
.flt-btn svg { width: 18px; height: 18px; stroke-width: 2; color: var(--label-2); }
.flt-btn .n { display: none; min-width: 18px; min-height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent-bg); color: var(--on-accent); font-size: var(--t-cap2); font-weight: 700; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
.flt-btn.has .n { display: inline-block; }
.flt-btn.has { background: var(--accent-tint); color: var(--accent-fg); }
.flt-btn.has svg { color: var(--accent-fg); }
.flt-btn[aria-expanded="true"] { background: var(--fill-2); }
@media (hover: hover) { .flt-btn:hover { background: var(--fill-2); } }
.list-tools .icon-btn { width: 36px; height: 36px; color: var(--label-2); background: var(--fill-3); position: relative; }
.list-tools .icon-btn::after { content: ""; position: absolute; inset: -4px; } /* 히트 44pt */
.list-tools .icon-btn svg { width: 20px; height: 20px; }
@media (max-width: 899px) { .search.active ~ .flt-btn, .search.active ~ .icon-btn { display: none; } }
/* 활성 필터 요약: 제거 가능한 미니 칩 한 줄 */
.flt-summary { display: flex; align-items: center; gap: 6px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; }
.flt-summary::-webkit-scrollbar { display: none; }
.flt-summary[hidden] { display: none; }
.mini-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 4px 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-fg); font-size: var(--t-cap); font-weight: 600; white-space: nowrap; position: relative; }
.mini-chip::after { content: ""; position: absolute; inset: -8px 0; }
.mini-chip svg { width: 14px; height: 14px; stroke-width: 2.4; opacity: .8; }
.mini-chip .dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 2px; }
.mini-chip.clear { background: transparent; color: var(--label-2); padding: 0 8px; font-weight: 500; }
@media (hover: hover) { .mini-chip:hover { background: var(--accent-bg); color: var(--on-accent); } .mini-chip.clear:hover { background: var(--fill-3); color: var(--label); } }
/* 필터 패널: 데스크톱 = 도구 행 아래 팝오버 / 모바일 = 하단 시트 (사이드바 안에 렌더링 — 목록 상태와 같은 DOM) */
.flt-pop { display: none; position: absolute; z-index: 40; left: 12px; right: 12px; top: var(--flt-top, 120px); max-height: min(70vh, 560px); overflow-y: auto; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-2); border: var(--hairline) solid var(--separator); padding: 4px 0 10px; transform-origin: top center; transform: scale(.98) translateY(-4px); opacity: 0; transition: transform var(--dur-enter) var(--ease-out), opacity var(--dur-enter); }
.flt-pop.open { display: block; }
.flt-pop.open.in { transform: none; opacity: 1; }
.flt-pop .flt-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 0 16px; }
.flt-pop .flt-h .title { font-size: var(--t-head); font-weight: 600; }
.flt-pop .flt-h .text-btn { height: 36px; }
.flt-pop .chips { flex-wrap: wrap; row-gap: 8px; padding: 2px 16px 6px; overflow: visible; }
.flt-pop .chips .gap { display: none; }
.flt-pop .chip { max-width: 100%; } /* 긴 프로젝트 라벨(PUT /api/projects 는 120자까지)이 390px 시트 밖으로 넘치지 않게(QA_REPORT_v15 D2) */
.flt-pop .chip > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.flt-dim { display: none; position: absolute; inset: 0; z-index: 39; background: var(--scrim); opacity: 0; transition: opacity var(--dur-enter); }
.flt-dim.open.in { opacity: 1; }
@media (max-width: 899px) {
  .flt-dim.open { display: block; }  /* 디밍은 모바일 시트에서만(데스크톱 팝오버는 비모달) */
  .flt-pop { top: auto; left: 0; right: 0; bottom: 0; max-height: 80vh; border-radius: var(--radius-card) var(--radius-card) 0 0; border: 0; padding-bottom: calc(10px + var(--safe-b)); transform: translateY(100%); opacity: 1; transform-origin: bottom center; }
  .flt-pop .grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); margin: 6px auto 0; }
  .flt-pop.open.in { transform: none; }
  .flt-pop .chips { padding-left: 16px; padding-right: 16px; }
  .flt-pop .chip { min-height: 36px; }
}
@media (min-width: 900px) { .flt-pop .grabber { display: none; } }
@media (prefers-reduced-motion: reduce) { .flt-pop { transform: none !important; transition: opacity var(--dur-exit) !important; } }

/* ---- 접이식 타이머(사이드바) */
.timer.collapsible { padding: 0; }
.timer.collapsible .tm-head { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px 0 4px; }
.timer.collapsible .tm-toggle { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--label); font-size: var(--t-sub); font-weight: 500; border-radius: var(--radius-ctl); text-align: left; }
.timer.collapsible .tm-toggle svg:first-child { color: var(--label-2); }
.timer.collapsible .tm-toggle svg:last-child { color: var(--label-3); margin-left: auto; transition: transform var(--dur-micro); }
.timer.collapsible.open .tm-toggle svg:last-child { transform: rotate(90deg); }
.timer.collapsible .tm-head-title { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer.collapsible .tm-head-time { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--label-2); letter-spacing: .02em; }
.timer.collapsible.running .tm-head-time { color: var(--study-fg); }
.timer.collapsible.warn .tm-head-time, .timer.collapsible.over .tm-head-time { color: var(--red-fg); }
.timer.collapsible .tm-start-mini { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-fg); font-size: var(--t-foot); font-weight: 600; position: relative; }
.timer.collapsible .tm-start-mini::after { content: ""; position: absolute; inset: -6px 0; }
.timer.collapsible.running .tm-start-mini { background: var(--orange-tint); color: var(--orange-text); }
.timer.collapsible .tm-body { padding: 0 12px 12px; }
.timer.collapsible .tm-body .tm-row1 .tm-title { display: none; }
.timer.collapsible .tm-body .tm-presets { margin-left: 0; }
@media (hover: hover) { .timer.collapsible .tm-toggle:hover { background: var(--fill-4); } }

/* ---- 인스펙터(≥1280px): 오른쪽 320px 열 */
#inspector { --pane-bg: var(--bg-2); background: var(--pane-bg); }
#inspector .pane-view { border-left: var(--hairline) solid var(--separator); }
.inspector-view .insp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--nav-h); padding: calc(var(--safe-t)) 8px 0 16px; font-size: var(--t-foot); font-weight: 600; color: var(--label-2); }
.inspector-view .group { margin: 0 12px 20px; }
.inspector-view .group:first-child { margin-top: 10px; }
.inspector-view .group-h { padding-left: 12px; padding-right: 12px; }
.inspector-view .card { box-shadow: none; border: var(--hairline) solid var(--separator); }
.inspector-view .evidence { padding: 10px 12px; font-size: var(--t-foot); }
.inspector-view .evidence .ex { padding: 3px 0; }
.insp-list { list-style: none; margin: 0; padding: 4px 0; }
.insp-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 12px; font-size: var(--t-foot); }
.insp-list li + li { border-top: var(--hairline) solid var(--separator); }
.insp-list li .k { color: var(--label); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-list li .v { color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.insp-list li .v.recent { color: var(--accent-fg); }
.insp-list li .v.none { color: var(--label-2); }
.insp-list li button { flex: none; min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--fill-3); color: var(--accent-fg); font-size: var(--t-cap); font-weight: 600; position: relative; }
.insp-list li button::after { content: ""; position: absolute; inset: -8px 0; } /* 히트 44pt */
.insp-list li.hist { flex-direction: column; align-items: flex-start; gap: 2px; }
.insp-list li.hist .t { font-size: var(--t-foot); font-weight: 500; font-variant-numeric: tabular-nums; }
.insp-list li.hist .s { font-size: var(--t-cap); color: var(--label-2); }
.insp-list li.hist .row2 { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.insp-empty { padding: 12px; font-size: var(--t-foot); color: var(--label-2); }
.insp-placeholder { padding: 40px 20px; text-align: center; color: var(--label-2); font-size: var(--t-foot); }
.insp-placeholder svg { width: 32px; height: 32px; color: var(--label-3); stroke-width: 1.4; margin-bottom: 6px; }
@media (min-width: 1280px) {
  .only-wide { display: inline-flex !important; }
  /* 인스펙터 열은 항상 3번째 트랙(닫힘 = 0px)으로 두고 폭만 전환한다 → 토글 시 본문이 점프하지 않고 220ms 에 걸쳐 자리를 잡는다.
     열린 뒤에야 visibility 가 켜지므로(전환 끝 + 30ms) 보조기술·테스트는 완성된 320px 상태만 본다. reduced-motion 은 전역 규칙으로 즉시. */
  #app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--insp-col, 0px); transition: grid-template-columns var(--dur-enter) var(--ease-out); }
  #inspector { display: flex; visibility: hidden; transition: visibility 0s linear 0s; }
  #inspector .pane-view { width: var(--inspector-w); flex: none; }
  #app.inspector-on.tab-questions { --insp-col: var(--inspector-w); }
  #app.inspector-on.tab-questions #inspector { visibility: visible; transition: visibility 0s linear calc(var(--dur-enter) + 30ms); }
}

/* ---- 집중 모드: 사이드바·탭·인스펙터 숨김, 본문만 중앙 */
#app.focus { grid-template-columns: minmax(0, 1fr) !important; }
#app.focus #sidebar, #app.focus #inspector, #app.focus .tabbar { display: none !important; }
#app.focus #content { transform: none !important; visibility: visible !important; box-shadow: none; }
#app.focus .detail-wrap { max-width: var(--content-max, 760px); margin: 0 auto; width: 100%; padding-top: 8px; }
#app.focus .ed:not(.q) { line-height: var(--lh-focus, var(--lh-answer)); }
#app.focus .meta-line, #app.focus .timer-slot, #app.focus .recorder-slot { display: none; }
#app.focus .navbar { background: var(--bg); }
.focus-hint { display: none; }
#app.focus .focus-hint { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--fill-3); color: var(--label-2); font-size: var(--t-cap); font-weight: 500; margin-right: 4px; }
#app.focus .focus-hint .kbd { font-size: var(--t-cap2); }

/* ---- 연습 모드 전체 화면(사이드바·탭 바 숨김) */
#app.practice-full { grid-template-columns: minmax(0, 1fr) !important; }
#app.practice-full #sidebar, #app.practice-full #inspector, #app.practice-full .tabbar { display: none !important; }
#app.practice-full #content { transform: none !important; visibility: visible !important; box-shadow: none; }
#app.practice-full .scroll { padding-bottom: var(--safe-b); }

/* ---- 구조 보기: 모범답안을 정의·이유·사례 제안 세 문장으로 나눠 좌측 색 막대로 구분(읽기 전용) */
.struct { padding: 2px 0 4px; }
.struct .st { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 0 12px; margin: 0 0 8px; }
.struct .st .bar { border-radius: 2px; background: var(--st-etc); }
.struct .st.def .bar { background: var(--st-def); }
.struct .st.why .bar { background: var(--st-why); }
.struct .st.case .bar { background: var(--st-case); }
.struct .st .k { font-size: var(--t-cap); font-weight: 600; color: var(--label-2); margin-bottom: 1px; letter-spacing: .01em; }
.struct .st.def .k { color: var(--accent-fg); }
.struct .st.why .k { color: var(--orange-text); }
.struct .st.case .k { color: var(--study-fg); }
.struct .st .v { font-size: var(--t-body); line-height: var(--lh-answer); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.struct .st .v mark { background: var(--mark); color: inherit; border-radius: 2px; }
.struct .legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-cap); color: var(--label-2); padding: 6px 0 0; }
.struct .legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; background: var(--st-etc); }
.struct .legend .def::before { background: var(--st-def); } .struct .legend .why::before { background: var(--st-why); } .struct .legend .case::before { background: var(--st-case); }
.struct-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px; margin: -6px -8px -6px 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--accent-fg); font-size: var(--t-cap); font-weight: 600; position: relative; }
.struct-toggle::after { content: ""; position: absolute; inset: -8px 0; }
.struct-toggle svg { width: 14px; height: 14px; stroke-width: 2.2; }
.struct-toggle[aria-pressed="true"] { background: var(--accent-tint); }
@media (hover: hover) { .struct-toggle:hover { background: var(--fill-4); } }
.field.struct-on .ed[data-key="answer"] { display: none; }

/* ---- 녹음 슬롯(상세) */
.recorder-slot:empty { display: none; }
.recorder-slot { margin: 0 16px 24px; }

/* ---- 명령 팔레트(⌘K) */
.palette-backdrop { position: fixed; inset: 0; z-index: 120; background: var(--scrim); display: flex; align-items: flex-start; justify-content: center; padding: min(12vh, 120px) 16px 16px; opacity: 0; transition: opacity var(--dur-enter); }
.palette-backdrop.open { opacity: 1; }
.palette { width: min(640px, 100%); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-2); border: var(--hairline) solid var(--separator); overflow: hidden; transform: translateY(-6px) scale(.98); transition: transform var(--dur-enter) var(--ease-out); }
.palette-backdrop.open .palette { transform: none; }
.palette .pal-in { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: var(--hairline) solid var(--separator); }
.palette .pal-in svg { color: var(--label-2); }
.palette .pal-in input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; outline: none; font-size: var(--t-head); color: var(--label); }
.palette .pal-in input::placeholder { color: var(--placeholder); }
.palette .pal-in .kbd { flex: none; }
.palette .pal-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; min-height: 0; }
.palette .pal-sec { font-size: var(--t-cap); font-weight: 600; color: var(--label-2); padding: 8px 12px 4px; letter-spacing: .01em; }
.palette .pal-item { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-ctl); cursor: default; }
.palette .pal-item svg { width: 20px; height: 20px; stroke-width: 1.9; color: var(--label-2); flex: none; }
.palette .pal-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sub); }
.palette .pal-item .lbl .no { color: var(--label-2); font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.palette .pal-item .sub { font-size: var(--t-cap); color: var(--label-2); flex: none; }
.palette .pal-item .badge { min-height: 18px; min-width: 24px; font-size: var(--t-cap2); }
.palette .pal-item[aria-selected="true"] { background: var(--accent-tint); color: var(--accent-fg); }
.palette .pal-item[aria-selected="true"] svg, .palette .pal-item[aria-selected="true"] .lbl .no, .palette .pal-item[aria-selected="true"] .sub { color: var(--accent-fg); }
.palette .pal-empty { padding: 24px; text-align: center; color: var(--label-2); font-size: var(--t-sub); }
.palette .pal-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 16px; border-top: var(--hairline) solid var(--separator); font-size: var(--t-cap); color: var(--label-2); }
@media (max-width: 899px) { .palette-backdrop { padding: 12px; align-items: flex-start; } .palette { max-height: 80vh; } }

/* ---- 오늘 탭 대체 상태(서버 업데이트 필요 / 모듈 없음) */
.today-fallback { max-width: var(--content-max, 760px); margin: 0 auto; padding: 0 16px 40px; }
.today-fallback .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7em), 1fr)); gap: 12px; margin: 8px 0 20px; }
.today-fallback .tile { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: 16px; }
.today-fallback .tile .k { font-size: var(--t-cap); color: var(--label-2); font-weight: 600; }
.today-fallback .tile .v { font-size: var(--t-num); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.today-fallback .tile .v small { font-size: var(--t-foot); font-weight: 500; color: var(--label-2); margin-left: 2px; }
.today-fallback .tile.study .v { color: var(--study-fg); }
.today-fallback .notice { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: 16px; }
.today-fallback .notice svg { flex: none; color: var(--orange); width: 28px; height: 28px; stroke-width: 1.6; }
.today-fallback .notice h2 { margin: 0 0 4px; font-size: var(--t-head); font-weight: 600; }
.today-fallback .notice p { margin: 0; font-size: var(--t-sub); color: var(--label-2); line-height: 1.5; }
.today-fallback .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.today-fallback .actions .btn { width: auto; }

/* ---- 기억 수준 배지(연습·오늘) */
.badge.lv-new { background: var(--gray-tint); color: var(--lv-new-text); }
.badge.lv-learning { background: var(--orange-tint); color: var(--lv-learning-text); }
.badge.lv-stable { background: var(--blue-tint); color: var(--lv-stable-text); }
.badge.lv-mastered { background: var(--green-tint); color: var(--lv-mastered-text); }

/* ---- 설정: 연습 섹션 입력 */
.settings .row input[type="date"], .settings .row input[type="number"] { min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-ctl); background: var(--fill-3); color: var(--label); font-size: var(--t-sub); -webkit-appearance: none; appearance: none; font-variant-numeric: tabular-nums; }
.settings .row input[type="number"] { width: 84px; text-align: right; }
.settings .row input[type="date"] { min-width: 150px; }
.settings .row input:focus { box-shadow: 0 0 0 2px var(--accent); outline: none; }
.settings .row .val.dday { color: var(--study-fg); font-weight: 600; }
.settings .lh-preview { padding: 0 16px 12px; font-size: var(--t-body); color: var(--label-2); line-height: var(--lh-focus, 1.65); }

/* ===== 12. v1.5 — 프로젝트 섹션(sticky·접기) · 프로젝트 칩/메뉴 · 연습 피드백 목록(상세·인스펙터·오늘·시트) ===== */
/* 프로젝트 섹션 헤더: 버튼(aria-expanded) 하나가 헤더 전체. 사이드바 바탕색으로 sticky — 행이 아래로 지나간다 */
.qlist .section-h.proj-h { position: sticky; top: 0; z-index: 3; padding: 6px 0 2px; background: var(--pane-bg, var(--bg-2)); }
.qlist .section-h.proj-h .sec-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 6px 10px 6px 6px; border: 0; border-radius: var(--radius-ctl); background: none; color: var(--label-2); font: inherit; font-size: var(--t-foot); font-weight: 600; letter-spacing: .01em; text-align: left; cursor: default; transition: background var(--dur-micro), color var(--dur-micro); }
.qlist .section-h.proj-h .sec-toggle svg { width: 14px; height: 14px; stroke-width: 2.4; color: var(--label-3); flex: none; transition: transform var(--dur-micro); }
.qlist .section-h.proj-h.collapsed .sec-toggle svg { transform: rotate(-90deg); }
.qlist .section-h.proj-h .sec-toggle .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qlist .section-h.proj-h .sec-toggle .n { flex: none; font-weight: 400; font-variant-numeric: tabular-nums; }
.qlist .section-h.proj-h.collapsed .sec-toggle .n { min-width: 24px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--fill-3); color: var(--label); line-height: 1.5; text-align: center; font-weight: 600; font-size: var(--t-cap); }
@media (hover: hover) { .qlist .section-h.proj-h .sec-toggle:hover { background: var(--fill-4); color: var(--label); } }
.qlist .section-h.proj-h .sec-toggle:active { background: var(--fill-3); }
.qlist .section-h.proj-h .sec-toggle:focus-visible { outline-offset: -2px; }
@media (max-width: 899px) { .qlist .section-h.proj-h .sec-toggle { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .qlist .section-h.proj-h .sec-toggle svg { transition: none; } }

/* 상세: 중요도·작성 수준 행의 프로젝트 메뉴 버튼 + 메타 줄의 프로젝트 label */
.proj-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; max-width: min(240px, 100%); padding: 0 8px 0 12px; border: 0; border-radius: var(--radius-ctl); background: var(--fill-3); color: var(--label); font: inherit; font-size: var(--t-sub); font-weight: 500; position: relative; transition: background var(--dur-micro); }
.proj-btn::after { content: ""; position: absolute; inset: -6px 0; } /* 히트 44pt */
.proj-btn .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-btn svg { width: 14px; height: 14px; stroke-width: 2.4; color: var(--label-2); flex: none; }
@media (hover: hover) { .proj-btn:hover { background: var(--fill-2); } }
.proj-btn:active { opacity: .7; }
.meta-line .meta-proj { color: var(--accent-fg); font-weight: 600; }

/* 평가 배지(연습 피드백): srs_labels RATINGS 의 r-again·r-hard·r-good·r-easy 색 변수(practice.css) 재사용 */
.badge.rt { background: var(--rt-tint, var(--fill-3)); color: var(--rt-text, var(--label-2)); }
/* 다크: 11px/700 배지 글자가 .22 틴트(--surface 위)에서 3.9~4.5:1 로 미달(QA_REPORT_v15 D1) → 색 14% 틴트로 5.7:1 이상(DESIGN §1 "대비 4.5:1").
   .pr-rate(더 어두운 --gbg 위, 15px)는 6:1 이라 그대로 둔다 */
:root[data-scheme="dark"] .badge.rt { background: color-mix(in srgb, var(--rt, var(--gray)) 14%, transparent); }

/* 연습 피드백 목록 */
.fb-list { list-style: none; margin: 0; padding: 0; }
.fb-item { padding: 10px 16px 12px; position: relative; }
.fb-item + .fb-item { border-top: var(--hairline) solid var(--separator); }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 24px; margin-bottom: 4px; font-size: var(--t-foot); color: var(--label-2); }
.fb-qt, .fb-sp { flex: 1 1 6em; }
.fb-q { flex: none; font-weight: 700; color: var(--accent-fg); font-variant-numeric: tabular-nums; border-radius: var(--radius-xs); padding: 0 2px; margin-left: -2px; }
.fb-q[role="link"] { cursor: default; }
@media (hover: hover) { .fb-q[role="link"]:hover { background: var(--accent-tint); } }
.fb-qt, .fb-sp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-date { flex: none; font-variant-numeric: tabular-nums; }
.fb-head .badge.rt { min-height: 20px; min-width: 0; padding: 0 7px; font-size: var(--t-cap2); flex: none; }
.fb-del { width: 28px; height: 28px; flex: none; margin: -2px -8px -2px 0; color: var(--label-2); position: relative; }
.fb-del svg { width: 18px; height: 18px; }
.fb-del::after { content: ""; position: absolute; inset: -8px; } /* 히트 44pt */
@media (hover: hover) { .fb-del:hover { color: var(--red-fg); background: var(--red-tint); } }
.fb-text { font-size: var(--t-sub); line-height: var(--lh-body); color: var(--label); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; border-radius: var(--radius-xs); margin: 0 -6px; padding: 2px 6px; }
.fb-text[role="button"] { cursor: text; }
@media (hover: hover) { .fb-text[role="button"]:hover { background: var(--fill-4); } }
.fb-text[role="button"]:focus-visible { outline-offset: 0; }
.fb-text.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.fb-edit { display: block; box-sizing: border-box; width: calc(100% + 12px); margin: 0 -6px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--radius-s); background: var(--surface-2); color: var(--label); font: inherit; font-size: var(--t-sub); line-height: var(--lh-body); resize: none; outline: none; box-shadow: 0 0 0 2px var(--accent); }
.fb-empty { padding: 14px 16px; color: var(--label-2); font-size: var(--t-sub); line-height: var(--lh-body); }
.fb-empty.loading-row { display: flex; align-items: center; gap: 8px; }
.fb-item.link { cursor: default; transition: background var(--dur-micro); }
@media (hover: hover) { .fb-item.link:hover { background: var(--fill-4); } }
.fb-item.link:active { background: var(--fill-3); }
.fb-item.link:focus-visible { outline-offset: -2px; }
.fb-list.compact .fb-item { padding: 8px 12px 10px; }
.fb-recent .group-h .text-btn { min-height: 28px; height: auto; padding: 0 6px; font-size: var(--t-foot); margin: -6px 0; }
.inspector-view .fb-item { padding: 8px 12px 10px; }
.inspector-view .fb-text { font-size: var(--t-foot); }
.inspector-view .fb-head { min-height: 20px; }
/* 전체 피드백 시트 */
.fb-sheet { padding: 0 16px 8px; }
.fb-sheet .fb-list { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; }
.fb-sheet-h { font-size: var(--t-foot); color: var(--label-2); padding: 4px 4px 10px; }
@media (max-width: 899px) { .fb-sheet { padding-bottom: 16px; } }

/* ===== 13. v1.7 — 테마 스와치 그리드 · 글자 크기 13~32 · 큰 글자 레이아웃(SPEC §15) ===== */
/* 설정 → 외관: 6장 스와치(라디오 그룹). 카드 = 미니 미리보기 + 이름 + 선택 체크. 글자가 커지면 열 수가 줄어든다(7em 최소) */
.theme-pick { padding: 10px 16px 14px; }
.theme-pick-h { font-size: var(--t-head); margin-bottom: 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5em), 1fr)); gap: 10px; }   /* 16px: 6열 · 20px: 4+2 · 26px+: 3+3 · 390px: 3+3 */
.theme-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 44px; padding: 8px 8px 10px; border: 0; border-radius: var(--radius-ctl); background: var(--surface-2); color: var(--label); text-align: left; box-shadow: inset 0 0 0 1px var(--separator); transition: box-shadow var(--dur-micro), background var(--dur-micro); }
.theme-card[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-tint); }
.theme-card:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .theme-card:not([aria-checked="true"]):hover { background: var(--fill-3); } }
.theme-card:active { opacity: .8; }
.theme-name { font-size: var(--t-sub); font-weight: 600; padding-right: 26px; line-height: 1.3; }
.theme-card[aria-checked="true"] .theme-name { color: var(--accent-fg); }
.theme-check { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bg); color: var(--on-accent); display: none; align-items: center; justify-content: center; }
.theme-check svg { width: 12px; height: 12px; stroke-width: 3; }
.theme-card[aria-checked="true"] .theme-check { display: inline-flex; }
/* 미니 미리보기(aria-hidden): 바탕(--p-bg) 위 네비 줄(액센트 점) + 카드(--p-surface: 글자 줄 3개 + 액센트 버튼). 시스템은 라이트/다크 반반 */
.tp-wrap, .tp-split { display: flex; height: 64px; border-radius: var(--radius-s); overflow: hidden; box-shadow: inset 0 0 0 1px var(--separator); }
.tp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px; background: var(--p-bg); }
.tp-bar { display: flex; align-items: center; height: 6px; flex: none; }
.tp-bar i { width: 18px; height: 4px; border-radius: 2px; background: var(--p-accent); }
.tp-card { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 5px 6px; border-radius: 5px; background: var(--p-surface); box-shadow: 0 0 0 1px var(--p-border); }
.tp-card i { display: block; height: 3px; border-radius: 2px; background: var(--p-text); flex: none; }
.tp-card i.l1 { width: 70%; } .tp-card i.l2 { width: 55%; background: var(--p-text2); } .tp-card i.l3 { width: 40%; background: var(--p-text2); }
.tp-card b { display: block; width: 26px; height: 7px; border-radius: 4px; margin-top: auto; background: var(--p-accent); flex: none; }
/* 글자 크기: 20px 초과 안내 한 줄 */
.font-hint { margin: 0; padding: 0 16px 12px; font-size: var(--t-foot); color: var(--orange-text); font-weight: 500; line-height: 1.4; }
/* 설정 행: 라벨(최소 14em) + 컨트롤이 한 줄에 안 들어가면 컨트롤이 다음 줄로. 가져오기 행은 파일·모드·버튼 세로 쌓임 */
.settings .row { flex-wrap: wrap; }
.settings .row .lbl { flex: 1 1 14em; }
.settings .row .segmented { flex: 0 1 auto; max-width: 100%; }
.settings .row .val { max-width: 100%; }
.import-row .file-pick { flex-wrap: wrap; }
.import-row .seg-mode .segmented { max-width: 100%; }
.pw-form .row { flex-wrap: wrap; }
.theme-pick, .slider-row, .font-preview, .font-hint { position: relative; }
.theme-pick + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hairline); background: var(--separator); }
/* 하단 탭 바: 라벨이 넘치면 숨기고 아이콘만(main.js fitTabbar 가 잰다. aria-label 유지) */
.tabbar.no-labels button span { display: none; }
.tabbar.no-labels button { gap: 0; }
/* 사이드바 주요 탭은 한 줄 6칸(세그먼트 공통 wrap 예외). v1.8 '주기동' 3자 라벨이 큰 글자에서 칸에 안 들어가면 main.js fitTabbar 가
   .two-rows 를 붙여 3×2 그리드로 — 라벨을 말줄임하지 않는다(QA v1.8. 컨테이너 쿼리(rem)는 글자 크기 변경 때 행 높이가 갱신되지 않아 JS 측정) */
.side-tabs .segmented.tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 2px; }
.side-tabs .segmented.tabs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.side-tabs .segmented.tabs.two-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.side-tabs .segmented.tabs.two-rows button:nth-child(3n + 1)::before { opacity: 0; }
/* 목록 섹션 헤더·인스펙터 헤더 버튼·녹음 줄 */
.qlist .section-h { flex-wrap: wrap; gap: 2px 8px; }
.inspector-view .group-h .text-btn.hist-all { min-height: 28px; height: auto; padding: 0 6px; font-size: var(--t-cap); margin: -6px 0; }
.inspector-view .insp-h { flex-wrap: wrap; }
.insp-list li { flex-wrap: wrap; row-gap: 2px; }
.insp-list li .v { max-width: 100%; }
/* 상세 컨트롤 행: 프로젝트 버튼은 셀 안에서 줄어들 수 있게 */
.ctl-row .ctl { max-width: 100%; min-width: 0; }
.ctl-row .ctl .segmented { max-width: 100%; }
.ctl-row .ctl-proj .proj-btn { flex: 0 1 auto; min-width: 0; }
/* 필드 머리글: count 는 오른쪽 정렬을 유지하되 줄바꿈되면 왼쪽부터 */
.field-h .count { margin-left: auto; }
.field-h .copy { flex: none; }
/* 탐색 바 가운데 제목은 글자가 커도 한 줄 말줄임(기존) · 뒤로 버튼은 최대 8em */
.navbar .nav-center { padding: 0 2px; }
/* 토스트·배너·시트 액션은 줄바꿈 */
.toast { line-height: 1.35; }
/* 연습 타이머 머리글: 제목이 줄어들고 시간·버튼은 유지 */
.timer.collapsible .tm-head { flex-wrap: nowrap; }

/* ===== v1.7.1 사이드바 폭 조절(데스크톱 ≥900px) · 본문 폭 설정 ===== */
/* main.js 가 --sidebar-user(px)를 문서 루트에 둔다(기본값 360 은 비워 두어 기존 clamp 유지). 모바일은 이 규칙이 없어 100% 그대로.
   상한: 640px · 화면 50% · (≥1280 인스펙터가 열려 있으면) 본문 열 최소 400px 확보 — 어떤 폭에서도 가로 넘침 없음 */
@media (min-width: 900px) {
  #app { --sidebar-w: clamp(240px, min(var(--sidebar-user, clamp(320px, 26vw, 360px)), 50vw, 100vw - var(--insp-col, 0px) - 400px), 640px); }
  #app.resizing { transition: none !important; cursor: col-resize; }
  #app.resizing, #app.resizing * { -webkit-user-select: none !important; user-select: none !important; }
  #app.resizing .pane { pointer-events: none; }
}
.sidebar-resizer { display: none; }
@media (min-width: 900px) {
  .sidebar-resizer {
    display: block; position: absolute; top: 0; bottom: 0; z-index: 9;
    left: calc(var(--sidebar-w) - 4px); width: 8px; cursor: col-resize; touch-action: none;
    background: transparent; outline: none;
  }
  .sidebar-resizer::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; border-radius: 1px;
    background: transparent; transition: background var(--dur-micro);
  }
  @media (hover: hover) { .sidebar-resizer:hover::after { background: var(--separator-opaque, var(--label-4)); } }
  .sidebar-resizer:focus-visible::after, #app.resizing .sidebar-resizer::after { background: var(--accent); }
  .sidebar-resizer:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-tint); }
  #app.focus .sidebar-resizer, #app.practice-full .sidebar-resizer { display: none; }
}
/* 설정 → 외관: 본문 폭 세그먼트 · 사이드바 폭 */
.settings .row .sb-val { font-variant-numeric: tabular-nums; color: var(--label-2); }
.settings .row .btn.sm { flex: none; }