/* ============================================================
   VERADI 검토 시스템 — Apple-grade UI v2
   ----------------------------------------------------------
   외과적 원칙: 기존 클래스명 / 마크업 100% 유지.
   추가: 폰트 stack 6종, 타이포 스케일 8단계, 다층 spacing,
        glass blur 다층, Apple easing, 마이크로 인터랙션.
   ============================================================ */

/* ---------- Pretendard Variable (한글 Apple-style) ---------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ============================================================
   1. CSS 변수 — Apple Design System
   ============================================================ */
:root {
  /* ----- Pastel palette (검토자 눈 부담 적게) — 기존 유지 ----- */
  --bg: #FAF7F1;           /* 안2 warm ivory (was #E8F1FB lavender) */
  --card: #FFFDFA;         /* warm white (was #FFFFFF) */
  --line: rgba(60,50,34,.16);      /* warm neutral border */
  --line-soft: rgba(60,50,34,.08);
  --dark: #2A2620;         /* warm near-black text (was #16243B) */
  --gray: #57503F;         /* warm secondary text (was #46586F) */
  --gray-soft: #726858;    /* warm muted (was #73849E) */
  --primary: #1B6FD4;      /* action blue (kept, AA on white 4.9) */
  --primary-dark: #155BB0;
  --primary-soft: #E9F1FB;
  --primary-line: #BCD6F0;
  --accent-purple: #27A6C4;
  --accent-pink: #E08FC0;
  --ok: #3C7D45;           /* warm green (AA solid) */
  --ok-soft: #E7F0E4;
  --warn: #C67F1A;         /* warm amber (was #E0922E) */
  --warn-soft: #F7EEDD;
  --high: #C0452A;         /* warm red (was #D2603F) */
  --high-soft: #F6E6DF;
  --med: #B98B1E;          /* warm yellow */
  --med-soft: #F4ECD3;
  --low: #8C8373;
  --low-soft: #EFEBE3;
  --neutral-soft: #F2EBDC; /* warm grouped bg (kept) */
  /* ===== ptype A/B/C — 단일 정본(안2): A=blue, B=violet, C=teal ===== */
  --pt-a-fg: #1B6FD4; --pt-a-bg: rgba(27,111,212,.12);
  --pt-b-fg: #6A46BE; --pt-b-bg: rgba(106,70,190,.13);
  --pt-c-fg: #0B7182; --pt-c-bg: rgba(11,113,130,.13);

  /* ----- Glass / Elevated ----- */
  --bg-elevated: rgba(255, 255, 255, 0.72);
  --bg-glass-strong: rgba(255, 255, 255, 0.85);

  /* ----- Gradient (hero / accent) ----- */
  --grad-primary: linear-gradient(115deg, #1B6FD4 0%, #27A6C4 100%);
  --grad-success: linear-gradient(115deg, #4E9B5A 0%, #27A6C4 100%);
  --grad-warn: linear-gradient(115deg, #E0922E 0%, #D2603F 100%);
  --grad-hero-text: linear-gradient(115deg, #16243B 0%, #1B6FD4 55%, #27A6C4 100%);

  /* ----- Font stack (KR + EN 정밀 매칭) ----- */
  --font-display: 'Space Grotesk', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-text: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-tabular: 'JetBrains Mono', 'Noto Sans KR', system-ui, sans-serif;

  /* ----- Typography scale (Apple 8pt grid) ----- */
  --text-hero: clamp(3.2rem, 6vw, 5.6rem);
  --text-display: clamp(2.2rem, 4vw, 3.4rem);
  --text-headline: 1.7rem;
  --text-title: 1.3rem;
  --text-body: 1rem;
  --text-callout: 0.95rem;
  --text-caption: 0.83rem;
  --text-micro: 0.72rem;

  /* ----- Spacing 8pt grid ----- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 88px;
  --sp-12: 96px;
  --sec-y: clamp(40px, 6vw, 96px);
  --card-pad: clamp(18px, 2vw, 28px);

  /* ----- Border radius ----- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ----- Shadow (Apple 다층) ----- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -2px rgba(0,0,0,0.05), 0 12px 24px -4px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.08), 0 30px 60px -12px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 48px -12px rgba(0,0,0,0.12), 0 48px 96px -24px rgba(0,0,0,0.18);
  --shadow-glow: 0 0 0 4px rgba(27,111,212,0.12), 0 8px 32px rgba(27,111,212,0.16);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ----- Easing (Apple) ----- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ----- Duration ----- */
  --dur-fast: 0.18s;
  --dur-base: 0.32s;
  --dur-slow: 0.5s;
}

/* ============================================================
   2. Reset + Body
   ============================================================ */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-text);
  background: var(--bg);
  color: var(--dark);
  font-size: var(--text-body);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01", "kern";
}

/* 영문 mix 시 weight 매칭 (Pretendard 자동 처리) */
::selection { background: rgba(27, 111, 212, 0.18); color: var(--dark); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-smooth);
}
a:hover { color: var(--primary-dark); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "zero", "ss01";
}
code {
  background: var(--neutral-soft);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-size: 0.88em;
}

img { max-width: 100%; height: auto; }

/* 숫자 tabular (정확도 / 비용 / 비교) */
.tabular, .summary-stat, .nav-badge, .badge,
.cost-meter-value, .pdf-toolbar, .progress-table td,
.compare-metrics, .tl-time, .tl-hash {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   3. Top Nav (Apple.com 스타일 — 얇은 height + glass blur)
   ============================================================ */
.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--sp-6);
  background: var(--bg-elevated);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 48px;
  transition: background var(--dur-base) var(--ease-smooth);
}
.topnav .brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--dark);
  text-decoration: none;
  letter-spacing: -0.022em;
  transition: opacity var(--dur-fast) var(--ease-smooth);
}
.topnav .brand:hover { opacity: 0.75; }
.topnav .links { display: flex; align-items: center; gap: 2px; }
.topnav .links a {
  margin-left: 4px;
  padding: 7px 12px;
  color: var(--dark);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast) var(--ease-smooth);
  white-space: nowrap;
  position: relative;
}
.topnav .links a:hover {
  background: rgba(27, 111, 212, 0.08);
  color: var(--primary);
}
.topnav .who {
  margin-left: 12px;
  color: var(--gray);
  font-size: 12.5px;
  font-weight: 500;
}
.topnav .inline { display: inline; margin-left: 8px; }
.nav-badge {
  display: inline-block;
  background: var(--high);
  color: #fff;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0.01em;
  animation: pulse-soft 2s var(--ease-smooth) infinite;
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.92; }
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 17px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.nav-toggle:hover { background: var(--neutral-soft); }

button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--gray);
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 500;
  transition: all var(--dur-fast) var(--ease-smooth);
}
button.ghost:hover {
  background: var(--neutral-soft);
  color: var(--dark);
  border-color: var(--gray-soft);
}
button.ghost:active { transform: scale(0.97); }

/* ============================================================
   4. Layout
   ============================================================ */
main {
  max-width: 1340px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-9);
  animation: fadeIn var(--dur-slow) var(--ease-out-quart);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpSmall {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-smooth);
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) both;
}
section:hover { box-shadow: var(--shadow-md); }

/* Hero section (dashboard 상단) */
section.hero {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
section.hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(27,111,212,0.08), transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}
section.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.0rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 var(--sp-3);
  background: var(--grad-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
}
section.hero > p.muted {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.5;
  color: var(--gray);
  margin: 0 0 var(--sp-5);
  position: relative;
  z-index: 1;
}

h1 {
  font-family: var(--font-display);
  margin: 0 0 var(--sp-2);
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--dark);
}
h2 {
  font-family: var(--font-display);
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--text-headline);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--dark);
}
h3 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: var(--sp-4) 0 var(--sp-2);
  color: var(--dark);
}
.muted {
  color: var(--gray);
  font-size: var(--text-callout);
  letter-spacing: -0.008em;
}
.error {
  color: var(--high);
  font-size: var(--text-callout);
  font-weight: 500;
}

/* ============================================================
   5. Dashboard Cards
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  position: relative;
  z-index: 1;
}
.card {
  display: block;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--dark);
  border: 1px solid var(--line);
  background: var(--card);
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-smooth);
  position: relative;
  overflow: hidden;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) both;
}
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.2s; }

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-line);
}
.card:active { transform: translateY(-2px) scale(0.99); }
.card.primary {
  background: var(--primary-soft);
  border-color: var(--primary-line);
}
.card.primary::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(27,111,212,0.14), transparent 70%);
  pointer-events: none;
}
.card.warn {
  background: var(--warn-soft);
  border-color: #f7d4a9;
}
.card.neutral {
  background: var(--card);
  border-color: var(--line);
}
.card-icon {
  font-size: 28px;
  margin-bottom: var(--sp-2);
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-spring);
}
.card:hover .card-icon { transform: scale(1.1) rotate(-4deg); }
.card h2 {
  font-family: var(--font-display);
  margin: 0 0 var(--sp-1);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.014em;
}
.card p {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--gray);
  line-height: 1.55;
  font-weight: 400;
}

/* ============================================================
   6. Exam list (dashboard)
   ============================================================ */
.exam-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.exam-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none;
  color: var(--dark);
  transition: all var(--dur-base) var(--ease-out-quart);
  position: relative;
}
.exam-card:hover {
  border-color: var(--primary-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.exam-card:active { transform: translateY(-1px) scale(0.995); }

/* 업로더 취소 버튼 — 카드 우상단 */
.exam-card { position: relative; }
.exam-cancel-btn {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-text);
  color: var(--color-text-muted, #6e6e73);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.exam-card:hover .exam-cancel-btn,
.exam-cancel-btn:focus-visible { opacity: 1; }
.exam-cancel-btn:hover {
  background: rgba(255, 59, 48, 0.12);
  color: #ff3b30;
  border-color: rgba(255, 59, 48, 0.3);
}
@media (prefers-color-scheme: light) and (min-width: 999999px)) {
  :root:not([data-theme="light"]) .exam-cancel-btn {
    background: rgba(28,28,30,0.7);
    color: #98989d;
    border-color: rgba(255,255,255,0.1);
  }
  :root:not([data-theme="light"]) .exam-cancel-btn:hover {
    background: rgba(255,69,58,0.15);
    color: #ff453a;
    border-color: rgba(255,69,58,0.4);
  }
}
.exam-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.exam-card .exam-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
}
.exam-card-meta { font-size: 12.5px; color: var(--gray); }
.exam-card.status-done { border-left: 3px solid var(--ok); }
.exam-card.status-failed { border-left: 3px solid var(--high); }
.exam-card.status-solving,
.exam-card.status-auditing,
.exam-card.status-explaining,
.exam-card.status-preparing { border-left: 3px solid var(--primary); }
.exam-card.status-waiting_hitl { border-left: 3px solid var(--warn); }

/* ============================================================
   7. Tables
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-callout);
  margin-top: var(--sp-2);
}
th, td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--neutral-soft);
  font-weight: 600;
  color: var(--gray);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-feature-settings: "ss01";
}
.table-scroll { overflow-x: auto; border-radius: var(--r-sm); }

/* ============================================================
   8. Badges
   ============================================================ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--text-micro);
  font-weight: 600;
  color: #fff;
  background: var(--gray-soft);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: all var(--dur-fast) var(--ease-smooth);
}
.badge.uploaded, .badge.preparing { background: #8d9aa8; }
.badge.solving, .badge.auditing, .badge.explaining { background: var(--primary); }
.badge.waiting_hitl { background: var(--warn); }
.badge.done { background: var(--ok); }
.badge.failed { background: var(--high); }

.badge.sev-high { background: var(--high); }
.badge.sev-med, .badge.sev-medium { background: var(--med); color: var(--dark); }
.badge.sev-low { background: var(--low); }
.badge.stage { background: #5b6776; }

.badge.conf-high_ok { background: var(--ok); }
.badge.conf-med_ok { background: var(--med); color: var(--dark); }
.badge.conf-low_ok { background: var(--high); }

/* status badge — solving/auditing 시 subtle shimmer */
.badge.solving, .badge.auditing, .badge.explaining, .badge.preparing {
  position: relative;
  overflow: hidden;
}
.badge.solving::after, .badge.auditing::after,
.badge.explaining::after, .badge.preparing::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  100% { left: 100%; }
}

/* ============================================================
   9. Forms / auth
   ============================================================ */
.auth {
  max-width: 420px;
  margin: var(--sp-9) auto;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart);
}
.auth-sub { margin: -4px 0 var(--sp-4); color: var(--gray); }
.form { display: grid; gap: var(--sp-4); }
.form label {
  display: grid;
  gap: 6px;
  font-size: var(--text-caption);
  color: var(--gray);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.form input, .form select {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-family: var(--font-text);
  background: var(--card);
  color: var(--dark);
  transition: all var(--dur-fast) var(--ease-smooth);
}
.form input:hover, .form select:hover { border-color: var(--gray-soft); }
.form input:focus, .form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

button.primary {
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 14.5px;
  font-family: var(--font-text);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-quart);
  box-shadow: var(--shadow-sm);
}
button.primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
button.primary:active { transform: translateY(0) scale(0.98); }
button.primary:focus-visible { box-shadow: var(--shadow-glow); }

/* ============================================================
   10. Upload
   ============================================================ */
.upload .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.help-tip {
  background: var(--primary-soft);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.help-tip summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-dark);
  letter-spacing: -0.005em;
}
.help-tip ul {
  margin: var(--sp-2) 0 0;
  padding-left: 18px;
  font-size: var(--text-callout);
  color: var(--dark);
}
.help-tip li { margin: 4px 0; line-height: 1.7; }

.dropzone {
  padding: var(--sp-7) var(--sp-5);
  border: 2px dashed var(--primary-line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #fbfcfd, var(--card));
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out-quart);
}
.dropzone:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-1px);
}
.dropzone.hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: var(--shadow-glow);
  transform: scale(1.005);
}
.dropzone p { margin: 4px 0; color: var(--gray); }
.dropzone .dropzone-big {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--dark);
  margin-bottom: var(--sp-1);
}
.dropzone .filename {
  color: var(--primary-dark);
  font-weight: 600;
  margin-top: var(--sp-2);
  font-feature-settings: "tnum";
}

/* ============================================================
   11. Download buttons
   ============================================================ */
.downloads {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-1);
}
.btn {
  display: inline-block;
  padding: 9px 16px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  border: 1px solid var(--primary-line);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-quart);
}
.btn:hover {
  background: var(--primary-line);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0) scale(0.97); }

/* ============================================================
   12. Result page
   ============================================================ */
.exam-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.exam-header h1 { margin-bottom: 0; }
.block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-3);
  transition: box-shadow var(--dur-base) var(--ease-smooth);
}
.block:hover { box-shadow: var(--shadow-sm); }
.summary-block {
  background: linear-gradient(135deg, var(--primary-soft) 0%, rgba(88, 86, 214, 0.08) 100%);
  border-color: var(--primary-line);
  position: relative;
  overflow: hidden;
}
.summary-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.summary-stat {
  font-family: var(--font-tabular);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-dark);
  letter-spacing: -0.012em;
}

.progress-bar {
  background: #e6ebf2;
  border-radius: var(--r-pill);
  height: 10px;
  overflow: hidden;
  margin: var(--sp-2) 0 var(--sp-4);
  position: relative;
}
.progress-fill {
  background: var(--primary);
  height: 100%;
  transition: width 0.6s var(--ease-spring), background var(--dur-fast);
  border-radius: var(--r-pill);
  position: relative;
}
.progress-fill::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 2.4s infinite;
}
.progress-fill.good { background: var(--ok); }
.progress-fill.med { background: var(--med); }
.progress-fill.bad { background: var(--high); }

.progress-table {
  width: 100%;
  font-size: 13.5px;
  min-width: 480px;
  font-variant-numeric: tabular-nums;
}
.progress-table td, .progress-table th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.match-yes {
  color: var(--ok);
  font-weight: 700;
  font-size: 17px;
}
.match-no {
  color: var(--high);
  font-weight: 700;
  font-size: 17px;
}
.empty { color: var(--gray-soft); font-style: italic; }

.q-article {
  background: linear-gradient(180deg, #fbfcfd, var(--card));
  border-left: 3px solid var(--primary);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-2) 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: all var(--dur-base) var(--ease-smooth);
}
.q-article:hover {
  background: var(--card);
  border-left-width: 4px;
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.q-article h3 {
  margin: 0 0 var(--sp-1);
  font-size: 14.5px;
  font-weight: 700;
}
.q-article .reasoning {
  white-space: pre-wrap;
  font-size: 13.5px;
  color: var(--dark);
  line-height: 1.7;
}
.q-article .meta {
  color: var(--gray);
  font-size: 12px;
  margin: var(--sp-2) 0 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.q-article ul { margin: 4px 0 var(--sp-2); padding-left: 18px; font-size: 13px; }

.md-body {
  white-space: pre-wrap;
  background: linear-gradient(180deg, #fbfcfd, var(--card));
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  max-height: 480px;
  overflow: auto;
}

/* Finding cards (list-style) */
.finding-row {
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--med);
  background: var(--med-soft);
  margin: var(--sp-2) 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: all var(--dur-base) var(--ease-smooth);
}
.finding-row:hover { transform: translateX(2px); }
.finding-row.sev-high { border-left-color: var(--high); background: var(--high-soft); }
.finding-row.sev-medium, .finding-row.sev-med { border-left-color: var(--med); background: var(--med-soft); }
.finding-row.sev-low { border-left-color: var(--low); background: var(--low-soft); }
.finding-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}
.finding-body { font-size: 13.5px; color: var(--dark); line-height: 1.7; }

/* ============================================================
   13. HITL inbox
   ============================================================ */
.hitl-card {
  background: linear-gradient(180deg, #fffdf6, #fffbe9);
  border: 1px solid #f3deb0;
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-base) var(--ease-out-quart);
  animation: fadeUpSmall var(--dur-base) var(--ease-out-quart);
}
.hitl-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.hitl-card.answered {
  opacity: 0.55;
  background: var(--ok-soft);
  border-color: #c5e2cf;
  transform: scale(0.99);
}
.hitl-card header {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.hitl-card h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  flex: 1;
  min-width: 200px;
}
.hitl-card .body {
  background: var(--card);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre-wrap;
  margin: var(--sp-2) 0;
}
.answered-msg {
  color: var(--ok);
  font-weight: 600;
  font-size: 14px;
}
.options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  align-items: center;
}
.option {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all var(--dur-fast) var(--ease-out-quart);
}
.option:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-1px);
}
.option:active { transform: scale(0.96); }
.option.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}
.freeform {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-width: 200px;
  font-family: var(--font-text);
  font-size: 14px;
  background: var(--card);
  color: var(--dark);
  transition: all var(--dur-fast) var(--ease-smooth);
}
.freeform:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  background: linear-gradient(180deg, var(--ok-soft), #f0f9f3);
  border: 1px solid #c5e2cf;
  border-radius: var(--r-md);
  margin-top: var(--sp-3);
  animation: fadeUp var(--dur-slow) var(--ease-spring);
}
.empty-state-icon {
  font-size: 44px;
  margin-bottom: var(--sp-2);
  display: inline-block;
  animation: pulse-soft 2.4s var(--ease-smooth) infinite;
}
.empty-state p {
  margin: 4px 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.008em;
}

/* ============================================================
   14. Letter view
   ============================================================ */
.letter-body {
  white-space: pre-wrap;
  background: linear-gradient(180deg, #fbfcfd, var(--card));
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.75;
}

/* ============================================================
   15. Help page
   ============================================================ */
.help-page .help-section {
  border-bottom: 1px solid var(--line-soft);
  padding: var(--sp-4) 0;
}
.help-page .help-section:last-child { border-bottom: none; }
.help-page h2 { margin-top: 0; }
.help-page ul, .help-page ol { padding-left: 22px; }
.help-page li { margin: var(--sp-1) 0; font-size: 14px; line-height: 1.75; }
.conf-legend { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.conf-legend > div {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
.compare-table table { font-size: 13.5px; }
.compare-table th { background: var(--primary-soft); color: var(--primary-dark); }

/* ============================================================
   16. Info / Error notes
   ============================================================ */
.info-note { background: var(--primary-soft); border-color: var(--primary-line); }
.error-note { background: var(--high-soft); border-color: #f1cccc; color: var(--high); }

/* ============================================================
   17. HITL widget category 색
   ============================================================ */
.badge.cat { background: #7a5b9e; }
.badge.cat-arrow_mapping { background: #b04c70; }
.badge.cat-table_cell { background: #4a8e80; }
.badge.cat-graph_axes { background: #6c5db8; }
.badge.cat-circuit_topology { background: #c46b3e; }
.badge.cat-region_labels { background: var(--primary); }
.badge.cat-choice_verbatim { background: #7a5b9e; }
.badge.cat-color_pattern { background: #c95f3c; }
.badge.cat-multi_evidence { background: var(--ok); }

.hitl-widget {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: linear-gradient(180deg, #fbfcfd, var(--card));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.hitl-widget .freeform { min-width: 100%; }
.hitl-widget pre {
  background: var(--card);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12.5px;
  font-family: var(--font-mono);
  line-height: 1.55;
}
.crop-overlay { display: grid; gap: 6px; }
.crop-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.crop-img, .crop-img-multi {
  max-width: 220px;
  max-height: 180px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  cursor: zoom-in;
  background: var(--card);
  transition: all var(--dur-base) var(--ease-spring);
}
.crop-img:hover, .crop-img-multi:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}
.crop-img.zoomed, .crop-img-multi.zoomed {
  max-width: 90vw;
  max-height: 70vh;
  position: relative;
  z-index: 10;
  cursor: zoom-out;
  box-shadow: var(--shadow-xl);
}

/* arrow_mapping */
.arrow-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.arrow-row { display: flex; gap: var(--sp-2); align-items: center; }
.arrow-label { min-width: 30px; font-weight: 600; }
.arrow-dir { flex: 1; padding: 4px 6px; }

/* table_cell */
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.col-pdf, .col-vision {
  background: var(--card);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.col-pdf h5, .col-vision h5 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
}

/* graph_axes */
.axes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.preset-options { display: flex; flex-wrap: wrap; gap: 6px; }
.option-preset {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--card);
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12.5px;
  transition: all var(--dur-fast) var(--ease-smooth);
}
.option-preset:hover { border-color: var(--primary); }
.option-preset.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* circuit_topology 5x5 grid */
.grid-5x5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-width: 320px;
}
.grid-cell {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  font-size: 11px;
  border-radius: var(--r-xs);
  transition: all var(--dur-fast) var(--ease-out-quart);
}
.grid-cell.placed {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.grid-cell:hover {
  background: var(--primary-soft);
  transform: scale(1.06);
}
.rotation-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}

/* region_labels */
.region-row { display: flex; gap: var(--sp-4); }
.direction-toggle { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* choice_verbatim */
.choice-table { width: 100%; }
.choice-table pre { max-height: 80px; }
.bulk-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* color_pattern */
.color-rows { display: grid; gap: 6px; }
.color-row { display: flex; gap: var(--sp-2); align-items: center; }
.color-pick {
  width: 40px;
  height: 28px;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  border-radius: var(--r-xs);
}
.pattern-label { min-width: 60px; font-weight: 600; }

/* multi_evidence */
.multi-crop-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.crop-entry {
  display: grid;
  gap: 6px;
  background: var(--card);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.crop-judgment {
  width: 100%;
  min-height: 60px;
  padding: 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  font-family: var(--font-text);
}
.synthesis-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ============================================================
   18. 회사 자료 오류 — 친화 카드 (audit_runner findings)
   ============================================================ */
.finding-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--med);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-2) 0;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-base) var(--ease-out-quart);
}
.finding-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}
.finding-card.sev-high { border-left-color: var(--high); background: var(--high-soft); }
.finding-card.sev-med, .finding-card.sev-medium { border-left-color: var(--med); background: var(--med-soft); }
.finding-card.sev-low { border-left-color: var(--low); background: var(--low-soft); }
.finding-card-head {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-1);
  flex-wrap: wrap;
}
.finding-card-head .badge {
  font-size: var(--text-micro);
  padding: 2px 9px;
}
.finding-card-cat {
  color: var(--gray);
  font-size: 12.5px;
  background: var(--neutral-soft);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.finding-card-q {
  font-weight: 700;
  color: var(--dark);
  font-size: 14px;
  font-family: var(--font-display);
}
.finding-card-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  margin: 6px 0 var(--sp-2);
  color: var(--dark);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.4;
}
.finding-card-excerpt {
  margin: 6px 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--card);
  border-left: 2px solid var(--gray-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--dark);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  white-space: pre-wrap;
  line-height: 1.5;
}
.finding-card-row { font-size: 13px; color: var(--dark); margin: 4px 0; line-height: 1.65; }
.finding-card-row.correction {
  font-weight: 600;
  color: var(--primary-dark);
}
.finding-card-meta {
  color: var(--gray-soft);
  font-size: 11.5px;
  margin-top: 6px;
  font-style: italic;
}
.limit-list {
  background: var(--neutral-soft);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-top: var(--sp-3);
  font-size: 13px;
  border: 1px dashed var(--line);
}
.limit-list h3 {
  font-size: 13px;
  color: var(--gray);
  margin: 0 0 6px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.limit-list ul { margin: 0 0 0 18px; padding: 0; }
.limit-list li { color: var(--gray); margin: 2px 0; line-height: 1.65; }
.letter-actions { margin-bottom: var(--sp-3); }
.letter-actions a, .letter-actions button {
  display: inline-block;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--r-sm);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  margin-right: var(--sp-2);
  transition: all var(--dur-fast) var(--ease-out-quart);
  box-shadow: var(--shadow-sm);
}
.letter-actions a:hover, .letter-actions button:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.letter-actions a.secondary { background: var(--gray); }
.letter-actions a.secondary:hover { background: var(--dark); }

/* ============================================================
   19. Mobile (≤ 960px / ≤ 640px / ≤ 360px)
   ============================================================ */
@media (max-width: 960px) {
  main { max-width: 100%; padding: var(--sp-5) var(--sp-5) var(--sp-8); }
  .cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 640px) {
  main { padding: var(--sp-3) var(--sp-3) var(--sp-7); }
  section { padding: var(--sp-4); border-radius: var(--r-md); }
  section.hero { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.1rem; }
  body { font-size: 14.5px; }

  .topnav { padding: 10px var(--sp-3); flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
  .topnav .links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line-soft);
    gap: 0;
    animation: fadeUpSmall var(--dur-base) var(--ease-out-quart);
  }
  .topnav .links.open { display: flex; }
  .topnav .links a {
    margin: 0;
    padding: 12px 8px;
    border-radius: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .topnav .who { margin: var(--sp-2) 0 4px; padding: 0 8px; }
  .topnav .inline { margin: var(--sp-2) 0 0; }
  .topnav .inline button { width: 100%; padding: 12px; }

  .cards { grid-template-columns: 1fr; gap: var(--sp-3); }
  .card { padding: var(--sp-4); }
  .exam-list { grid-template-columns: 1fr; }
  .upload .row { grid-template-columns: 1fr; }
  .dropzone { padding: var(--sp-5) var(--sp-3); }
  .dropzone .dropzone-big { font-size: 14.5px; }

  .auth { margin: var(--sp-5) var(--sp-3); max-width: none; }

  .block { padding: var(--sp-4); }
  .progress-table { font-size: 12.5px; }
  .progress-table td, .progress-table th { padding: 6px 8px; }

  .arrow-rows, .axes-grid, .two-column, .multi-crop-list { grid-template-columns: 1fr; }
  .grid-cell { width: 48px; height: 48px; }
}

@media (max-width: 360px) {
  main { padding: var(--sp-2); }
  section { padding: var(--sp-3); }
  .card { padding: var(--sp-4) var(--sp-3); }
  .dropzone { padding: var(--sp-4) var(--sp-2); }
  h1 { font-size: 1.3rem; }
  .summary-stat { font-size: 1rem; }
}

/* ============================================================
   20. HITL mini PDF context
   ============================================================ */
.hitl-pdf-context {
  margin: var(--sp-3) 0;
  padding: 6px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  transition: border-color var(--dur-fast) var(--ease-smooth);
}
.hitl-pdf-context:hover { border-color: var(--gray-soft); }
.hitl-pdf-context summary {
  cursor: pointer;
  font-size: 12.5px;
  padding: 2px 4px;
  font-weight: 500;
  color: var(--gray);
}
.hitl-pdf-iframe {
  width: 100%;
  height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  margin-top: 6px;
  background: var(--card);
}

/* ============================================================
   21. Quick actions (review_result.html 상단)
   ============================================================ */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-2);
}

/* ============================================================
   22. PDF embed panel (review_result + explain_result)
   ============================================================ */
.pdf-panel {
  background: linear-gradient(180deg, #fafbfc, var(--card));
}
.pdf-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.pdf-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 9px 16px;
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--gray);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: all var(--dur-fast) var(--ease-smooth);
}
.pdf-tab:hover { background: var(--neutral-soft); color: var(--dark); }
.pdf-tab.active {
  background: var(--card);
  border-color: var(--line);
  color: var(--primary);
  font-weight: 600;
  margin-bottom: -1px;
}
.pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.pdf-toolbar .btn { padding: 5px 12px; font-size: 12.5px; }
.pdf-canvas-wrap {
  background: #f0f2f5;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  text-align: center;
  overflow: auto;
  max-height: 700px;
}
.pdf-canvas-wrap canvas {
  max-width: 100%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-xs);
}

/* ============================================================
   23. Audit timeline (Apple Watch style)
   ============================================================ */
.audit-filter {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: 6px 0 var(--sp-3);
  font-size: 13.5px;
}
.audit-filter label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.timeline {
  list-style: none;
  padding: 0 0 0 var(--sp-4);
  margin: var(--sp-2) 0;
  border-left: 2px solid var(--line);
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--primary-line), var(--line), transparent);
  pointer-events: none;
}
.tl-item {
  position: relative;
  margin: 0 0 var(--sp-3) 0;
  padding: 0 0 0 var(--sp-4);
  animation: fadeUpSmall var(--dur-base) var(--ease-out-quart) both;
}
.tl-dot {
  position: absolute;
  left: -22px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--primary-line), 0 0 0 4px rgba(27,111,212,0.08);
  transition: transform var(--dur-base) var(--ease-spring);
}
.tl-item:hover .tl-dot { transform: scale(1.2); }
.tl-dot.change {
  background: var(--warn);
  box-shadow: 0 0 0 1px #f7d4a9, 0 0 0 4px rgba(255,159,10,0.10);
}
.tl-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: all var(--dur-base) var(--ease-out-quart);
}
.tl-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-line);
  transform: translateX(2px);
}
.tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 4px;
}
.tl-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gray);
}
.tl-kind {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tl-kind.change { background: var(--warn-soft); color: #8a4717; }
.tl-user { font-weight: 600; color: var(--dark); }
.tl-hash {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray-soft);
  background: var(--neutral-soft);
  padding: 2px 8px;
  border-radius: var(--r-xs);
}
.tl-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--dark);
  margin: 2px 0;
  font-weight: 500;
  letter-spacing: -0.008em;
}
.tl-sub {
  font-size: 12.5px;
  color: var(--gray);
  margin-top: 4px;
  word-break: break-all;
  line-height: 1.55;
}
.tl-note {
  font-size: 12.5px;
  color: var(--primary-dark);
  margin-top: 4px;
  font-style: italic;
}
.verify-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13.5px;
  margin-right: var(--sp-3);
  letter-spacing: -0.005em;
}
.verify-badge.ok {
  background: var(--ok-soft);
  color: #1f6d44;
  border: 1px solid #b8dcc6;
  box-shadow: 0 0 0 3px rgba(52,199,89,0.08);
}
.verify-badge.bad {
  background: var(--high-soft);
  color: #8a1f1f;
  border: 1px solid #f1c1c1;
  box-shadow: 0 0 0 3px rgba(255,59,48,0.08);
}

/* ============================================================
   24. HWPX side-by-side compare
   ============================================================ */
.compare-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
}
.compare-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.compare-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
}
.compare-nav .btn { padding: 5px 12px; font-size: 12.5px; }
.compare-split {
  display: grid;
  grid-template-columns: 1fr 1fr 260px;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
.compare-pane {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  box-shadow: var(--shadow-sm);
}
.compare-pane-head {
  background: var(--neutral-soft);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.008em;
  color: var(--dark);
  border-bottom: 1px solid var(--line);
}
.compare-pane-body {
  flex: 1;
  background: #f0f2f5;
  padding: var(--sp-3);
  overflow: auto;
  text-align: center;
  border: none;
  min-height: 600px;
  width: 100%;
}
.compare-pane-body.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
}
.compare-pane-body canvas {
  max-width: 100%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-xs);
}
iframe.compare-pane-body { background: #fff; }
.compare-aside {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  font-size: 13px;
  max-height: 700px;
  overflow: auto;
  box-shadow: var(--shadow-sm);
}
.compare-aside h3 { margin: 0 0 var(--sp-2); font-size: 14.5px; }
.compare-aside h4 {
  margin: var(--sp-3) 0 6px;
  font-size: 13px;
  color: var(--gray);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.diff-list { margin: 0 0 0 18px; padding: 0; }
.diff-list li { margin: 4px 0; color: var(--dark); font-size: 13px; line-height: 1.6; }
.tone-table { width: 100%; font-size: 12.5px; margin-top: 6px; }
.tone-table th, .tone-table td { padding: 5px 7px; }
.pdf-fallback { padding: var(--sp-3); }

@media (max-width: 1000px) {
  .compare-split { grid-template-columns: 1fr; }
  .compare-pane { min-height: 420px; }
}
@media (max-width: 640px) {
  .compare-pane-body { min-height: 320px; }
  .compare-toolbar { flex-direction: column; align-items: stretch; }
  .pdf-canvas-wrap { max-height: 500px; }
}

/* ============================================================
   25. Dark mode (Apple iOS 18 / Vision Pro)
   ============================================================ */
@media (prefers-color-scheme: light) and (min-width: 999999px)) {
  /* OS 다크여도 사용자가 화이트(data-theme=light) 고르면 라이트 유지 (2026-06-16) */
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --card: #1c1c1e;
    --line: #38383a;
    --line-soft: #2c2c2e;
    --dark: #f5f5f7;
    --gray: #98989d;
    --gray-soft: #6e6e73;
    --primary: #0a84ff;
    --primary-dark: #0070d8;
    --primary-soft: #11233f;
    --primary-line: #2f5db8;
    --accent-purple: #bf5af2;
    --ok: #30d158;
    --ok-soft: #0e2a14;
    --warn: #ff9f0a;
    --warn-soft: #2e1f08;
    --high: #ff453a;
    --high-soft: #2f1010;
    --med: #ffd60a;
    --med-soft: #2a230a;
    --neutral-soft: #2c2c2e;
    --bg-elevated: rgba(28, 28, 30, 0.72);
    --bg-glass-strong: rgba(28, 28, 30, 0.88);
    --grad-hero-text: linear-gradient(135deg, #f5f5f7 0%, #5e8efd 60%, #bf5af2 100%);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px -2px rgba(0,0,0,0.4), 0 12px 24px -4px rgba(0,0,0,0.5);
    --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.5), 0 30px 60px -12px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 0 4px rgba(10,132,255,0.18), 0 8px 32px rgba(10,132,255,0.24);
  }
  :root:not([data-theme="light"]) body { background: var(--bg); color: var(--dark); }  :root:not([data-theme="light"]) section, :root:not([data-theme="light"]) .block, :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .exam-card, :root:not([data-theme="light"]) .tl-card, :root:not([data-theme="light"]) .compare-pane, :root:not([data-theme="light"]) .compare-aside, :root:not([data-theme="light"]) .pdf-toolbar, :root:not([data-theme="light"]) .hitl-card {
    background: var(--card);
    color: var(--dark);
    border-color: var(--line);
  }  :root:not([data-theme="light"]) section.hero { background: var(--card); }  :root:not([data-theme="light"]) .topnav { background: var(--bg-elevated); border-color: var(--line); }  :root:not([data-theme="light"]) .pdf-tab.active { background: var(--card); color: #5e8efd; }  :root:not([data-theme="light"]) .pdf-canvas-wrap, :root:not([data-theme="light"]) .compare-pane-body { background: #18181a; }  :root:not([data-theme="light"]) .pdf-canvas-wrap canvas, :root:not([data-theme="light"]) .compare-pane-body canvas { background: #fff; }  :root:not([data-theme="light"]) iframe.compare-pane-body { background: #fff; }  :root:not([data-theme="light"]) table th { background: #232325; color: var(--gray); }  :root:not([data-theme="light"]) .progress-bar { background: #2c2c2e; }  :root:not([data-theme="light"]) .summary-block {
    background: linear-gradient(135deg, var(--primary-soft) 0%, #1f1736 100%);
  }  :root:not([data-theme="light"]) .q-article {
    background: linear-gradient(180deg, #1f1f21, var(--card));
  }  :root:not([data-theme="light"]) .q-article:hover { background: var(--card); }  :root:not([data-theme="light"]) .dropzone { background: linear-gradient(180deg, #1f1f21, var(--card)); }  :root:not([data-theme="light"]) .help-tip { background: var(--primary-soft); border-color: var(--primary-line); }  :root:not([data-theme="light"]) .help-tip ul { color: var(--dark); }  :root:not([data-theme="light"]) .md-body, :root:not([data-theme="light"]) .letter-body, :root:not([data-theme="light"]) .hitl-widget {
    background: linear-gradient(180deg, #1f1f21, var(--card));
    color: var(--dark);
  }  :root:not([data-theme="light"]) .hitl-widget pre { background: #232325; color: var(--dark); }  :root:not([data-theme="light"]) .hitl-card { background: linear-gradient(180deg, #261f0a, #1f1a08); border-color: #4a3a14; }  :root:not([data-theme="light"]) .hitl-card.answered { background: var(--ok-soft); border-color: #14422a; }  :root:not([data-theme="light"]) .finding-row, :root:not([data-theme="light"]) .finding-card { background: var(--card); }  :root:not([data-theme="light"]) .finding-card.sev-high { background: var(--high-soft); }  :root:not([data-theme="light"]) .finding-card.sev-med, :root:not([data-theme="light"]) .finding-card.sev-medium { background: var(--med-soft); }  :root:not([data-theme="light"]) .finding-card.sev-low { background: var(--low-soft); }  :root:not([data-theme="light"]) .empty-state { background: var(--ok-soft); border-color: #14422a; }  :root:not([data-theme="light"]) .option, :root:not([data-theme="light"]) .freeform, :root:not([data-theme="light"]) .form input, :root:not([data-theme="light"]) .form select {
    background: #232325;
    color: var(--dark);
    border-color: var(--line);
  }  :root:not([data-theme="light"]) .option:hover { background: var(--primary-soft); }  :root:not([data-theme="light"]) .verify-badge.ok { background: var(--ok-soft); color: #6deb96; border-color: #14422a; }  :root:not([data-theme="light"]) .verify-badge.bad { background: var(--high-soft); color: #ff8a82; border-color: #4a1818; }  :root:not([data-theme="light"]) .pdf-panel { background: linear-gradient(180deg, #1f1f21, var(--card)); }  :root:not([data-theme="light"]) code { background: #232325; color: #d2d2d6; }  :root:not([data-theme="light"]) .tl-hash, :root:not([data-theme="light"]) .finding-card-cat, :root:not([data-theme="light"]) .limit-list { background: #232325; }  :root:not([data-theme="light"]) .tl-kind { background: var(--primary-soft); color: #5e8efd; }  :root:not([data-theme="light"]) .tl-kind.change { background: var(--warn-soft); color: #ffb74a; }
}

/* ============================================================
   26. HWPX block
   ============================================================ */
.hwpx-block .hwpx-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.hwpx-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r-pill);
  background: #F1ECE3;
  color: #57503F;
  border: 1px solid #E2DACD;
  letter-spacing: -0.005em;
  transition: all var(--dur-fast) var(--ease-smooth);
}
.hwpx-badge:hover { transform: translateY(-1px); }
.hwpx-badge.ok { background: var(--ok-soft); color: #1f6d44; border-color: #b8dcc6; }
.hwpx-badge.warn { background: var(--warn-soft); color: #8a4717; border-color: #f7d4a9; }
.hwpx-badge.bad { background: var(--high-soft); color: #8a1f1f; border-color: #f1c1c1; }
.hwpx-preview {
  width: 100%;
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #f5f5f7;
  margin: var(--sp-3) 0 var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.btn.primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ============================================================
   27. 비용 미터 + 큐 position (Glass)
   ============================================================ */
.cost-meter {
  margin: var(--sp-3) 0 4px;
  padding: 10px var(--sp-4);
  background: var(--bg-elevated);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: 13.5px;
  color: var(--gray);
  box-shadow: var(--shadow-sm);
}
.cost-meter-label {
  color: var(--gray-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
}
.cost-meter-value {
  color: var(--dark);
  font-weight: 700;
  font-family: var(--font-tabular);
  font-size: 15px;
}
.cost-meter-cap {
  color: var(--gray-soft);
  font-family: var(--font-tabular);
}
.cost-meter-bar {
  width: 120px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  overflow: hidden;
  position: relative;
}
.cost-meter-fill {
  height: 100%;
  background: var(--ok);
  transition: width 0.6s var(--ease-spring);
  border-radius: var(--r-pill);
}
.cost-meter-warn { color: var(--warn); font-weight: 600; }
.cost-meter-ok { border-color: var(--ok-soft); }
.cost-meter-ok .cost-meter-fill { background: var(--ok); }
.cost-meter-warn .cost-meter-fill { background: var(--warn); }
.cost-meter.cost-meter-warn {
  border-color: #f7d4a9;
  background: rgba(253, 240, 228, 0.72);
}
.cost-meter.cost-meter-bad {
  border-color: #f1c1c1;
  background: rgba(251, 233, 233, 0.72);
}
.cost-meter.cost-meter-bad .cost-meter-fill { background: var(--high); }

.queue-position {
  background: var(--primary-soft);
  border: 1px solid var(--primary-line);
  color: var(--primary-dark);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-tabular);
  letter-spacing: -0.005em;
}
.queue-position-inline {
  color: var(--primary-dark);
  font-weight: 600;
  font-family: var(--font-tabular);
}
.cost-inline {
  color: var(--gray);
  font-family: var(--font-tabular);
}

/* ============================================================
   28. 추가 유틸리티 (외과적: 옵션, base.html 외 미사용)
   ============================================================ */
/* Tabular emphasis for stat-heavy areas */
.stat-number {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.text-mono { font-family: var(--font-mono); }

/* Apple-style focus ring (a11y) */
*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
  border-radius: var(--r-sm);
}

/* Skip-to-content (a11y): 키보드 포커스 시에만 노출 */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2000;
  padding: 10px 18px;
  background: var(--dark);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.2));
  transform: translateY(-150%);
  transition: transform 0.18s var(--ease-smooth, ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
main:focus { outline: none; }  /* skip 타깃 main: 포커스는 받되 윤곽선 불필요 */

/* Screen-reader only 유틸 (기존 부재 → 추가) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* Print */
@media print {
  .topnav, .quick-actions, .pdf-toolbar, .letter-actions, .site-footer { display: none !important; }
  body { background: #fff; }
  section, .block, .card { box-shadow: none; border-color: #ddd; }
}

/* ============================================================
   29. Site footer (Apple minimal)
   ============================================================ */
.site-footer {
  background: transparent;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  text-align: center;
  font-size: 12px;
  color: var(--gray-soft);
  letter-spacing: -0.005em;
  border-top: 1px solid var(--line-soft);
  margin-top: var(--sp-7);
}
.site-footer-inner {
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.footer-user { font-weight: 600; color: var(--gray); }
@media (max-width: 640px) {
  .site-footer { padding: var(--sp-5) var(--sp-3); }
}

/* ============================================================
   ============================================================
   PREMIUM UI v3 — Linear / Stripe / Mercury / Arc / Raycast
   ============================================================
   외과적 원칙: 기존 클래스/마크업 100% 보존. 추가만.
   - 30. 디자인 토큰 확장 (palette + dark mode + Inter)
   - 31. Mesh gradient + Noise + Grid (premium 배경)
   - 32. Sidebar (Arc 패턴 240px fixed)
   - 33. Command Palette (Raycast Cmd+K)
   - 34. Bento Grid (Mercury/Apple iCloud)
   - 35. Circular Progress + Charts (Mercury)
   - 36. Hero v3 (mesh + gradient text + 3D buttons)
   - 37. Skeleton shimmer (Linear)
   - 38. Reveal on scroll (Apple WWDC)
   - 39. Polish (auth / hitl / explain / micro)
   ============================================================ */

/* ---------- Inter Tight (영문 큰 hero용) ---------- */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter-tight@5.0.18/index.min.css');

/* ============================================================
   30. 디자인 토큰 확장
   ============================================================ */
:root {
  /* Linear / Stripe palette (라이트) */
  --purple-50:  #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-800: #5b21b6;
  --purple-900: #4c1d95;

  --blue-50:    #eff6ff;
  --blue-100:   #dbeafe;
  --blue-400:   #60a5fa;
  --blue-500:   #3b82f6;
  --blue-600:   #2563eb;
  --blue-700:   #1d4ed8;

  --pink-100:   #fce7f3;
  --pink-400:   #f472b6;
  --pink-500:   #ec4899;
  --pink-600:   #db2777;

  --green-100:  #dcfce7;
  --green-400:  #4ade80;
  --green-500:  #22c55e;
  --green-600:  #16a34a;

  --orange-400: #fb923c;
  --orange-500: #f97316;

  --red-400:    #f87171;
  --red-500:    #ef4444;

  /* 의미 토큰 (Linear primary + Stripe accent) */
  --brand-primary: var(--purple-600);
  --brand-primary-soft: var(--purple-100);
  --brand-accent: var(--green-500);
  --brand-accent-soft: var(--green-100);

  /* Mesh gradient orbs (라이트 톤 — 부드럽게) */
  --orb-1-color: rgba(124, 58, 237, 0.52);  /* vivid violet */
  --orb-2-color: rgba(34, 211, 238, 0.44);  /* cyan (techy) */
  --orb-3-color: rgba(99, 102, 241, 0.40);  /* indigo */

  /* Sidebar */
  --sidebar-w: 248px;
  --sidebar-bg: rgba(255, 255, 255, 0.72);
  --sidebar-border: rgba(0, 0, 0, 0.06);

  /* Premium shadows */
  --shadow-premium: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(0,0,0,0.06), 0 12px 32px -8px rgba(0,0,0,0.12);
  --shadow-premium-hover: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 8px rgba(0,0,0,0.08), 0 24px 48px -12px rgba(0,0,0,0.18);

  /* Z layers */
  --z-sidebar: 90;
  --z-cmd-overlay: 200;
  --z-cmd-modal: 201;
  --z-toast: 250;
}

/* 다크 모드 (자동 + 수동 toggle) */
@media (prefers-color-scheme: light) and (min-width: 999999px)) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0c;
    --card: #131318;
    --line: #25252c;
    --line-soft: #1c1c22;
    --dark: #f5f5f7;
    --gray: #98989d;
    --gray-soft: #6e6e73;
    --neutral-soft: #1c1c22;
    --bg-elevated: rgba(20, 20, 24, 0.72);
    --bg-glass-strong: rgba(28, 28, 34, 0.88);
    --primary-soft: rgba(88, 86, 214, 0.18);
    --primary-line: rgba(139, 92, 246, 0.35);
    --orb-1-color: rgba(139, 92, 246, 0.62);
    --orb-2-color: rgba(34, 211, 238, 0.54);
    --orb-3-color: rgba(99, 102, 241, 0.48);
    --sidebar-bg: rgba(20, 20, 24, 0.72);
    --sidebar-border: rgba(255, 255, 255, 0.06);
  }
}
[data-theme="dark"] {
  --bg: #17130E;
  --card: #221C15;
  --line: rgba(240,232,216,.12);
  --line-soft: rgba(240,232,216,.07);
  --dark: #ECE6DB;
  --gray: #B8AF9E;
  --gray-soft: #A89E8E;
  --neutral-soft: #221C15;
  --pt-a-fg: #6BA7EE; --pt-a-bg: rgba(27,111,212,.24);
  --pt-b-fg: #B39AF0; --pt-b-bg: rgba(106,70,190,.28);
  --pt-c-fg: #4FC3D6; --pt-c-bg: rgba(11,113,130,.30);
  --bg-elevated: rgba(20, 20, 24, 0.72);
  --bg-glass-strong: rgba(28, 28, 34, 0.88);
  --primary-soft: rgba(88, 86, 214, 0.18);
  --primary-line: rgba(139, 92, 246, 0.35);
  --orb-1-color: rgba(139, 92, 246, 0.62);
  --orb-2-color: rgba(34, 211, 238, 0.54);
  --orb-3-color: rgba(99, 102, 241, 0.48);
  --sidebar-bg: rgba(20, 20, 24, 0.72);
  --sidebar-border: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   31. Mesh gradient + Noise + Grid
   ============================================================ */
.mesh-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.mesh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  mix-blend-mode: normal;
  animation: orb-float 22s var(--ease-in-out) infinite;
}
.mesh-orb.orb-1 {
  width: 620px; height: 620px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, var(--orb-1-color) 0%, transparent 65%);
}
.mesh-orb.orb-2 {
  width: 540px; height: 540px;
  top: 80px; right: -180px;
  background: radial-gradient(circle, var(--orb-2-color) 0%, transparent 65%);
  animation-delay: -7s;
  animation-duration: 26s;
}
.mesh-orb.orb-3 {
  width: 460px; height: 460px;
  bottom: -140px; left: 28%;
  background: radial-gradient(circle, var(--orb-3-color) 0%, transparent 65%);
  animation-delay: -13s;
  animation-duration: 30s;
}
@keyframes orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(40px, -56px, 0) scale(1.1); }
  66%      { transform: translate3d(-28px, 36px, 0) scale(0.95); }
}

.noise-overlay {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
[data-theme="dark"] .noise-overlay { opacity: 0.08; }
@media (prefers-color-scheme: light) and (min-width: 999999px)) {
  :root:not([data-theme="light"]) .noise-overlay { opacity: 0.08; }
}

.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
[data-theme="dark"] .grid-overlay {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}
@media (prefers-color-scheme: light) and (min-width: 999999px)) {
  :root:not([data-theme="light"]) .grid-overlay {
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  }
}

/* ============================================================
   32. Sidebar (Arc 패턴)
   ============================================================ */
.app-shell {
  display: grid;
  /* ★fe80: 1fr 이 아니라 minmax(0,1fr). 1fr 은 min-width:auto 라 칸반(min-content 1608px)이
     트랙을 밀어 셸이 통째로 뷰포트를 넘었다(폰에서 가로 스크롤 +1258px). */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
.app-shell main {
  max-width: none;
  padding: var(--sp-6) clamp(var(--sp-5), 3vw, var(--sp-8)) var(--sp-9);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--sidebar-border);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  z-index: var(--z-sidebar);
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 8px var(--sp-4);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--dark);
  font-size: 17px;
}
.sidebar-brand .brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--purple-500), var(--pink-500));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}
.sidebar-user .avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--blue-500), var(--purple-600));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.sidebar-user .who-name { font-weight: 600; font-size: 13.5px; color: var(--dark); line-height: 1.2; }
.sidebar-user .who-role { color: var(--gray); font-size: 11.5px; }

.sidebar-section { margin-top: var(--sp-3); }
.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-soft);
  padding: 0 var(--sp-3) var(--sp-2);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--dark);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--r-md);
  letter-spacing: -0.011em;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
  position: relative;
}
.sidebar-nav a:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}
[data-theme="dark"] .sidebar-nav a:hover {
  background: rgba(139, 92, 246, 0.16);
  color: var(--purple-300);
}
@media (prefers-color-scheme: light) and (min-width: 999999px)) {
  :root:not([data-theme="light"]) .sidebar-nav a:hover {
    background: rgba(139, 92, 246, 0.16);
    color: var(--purple-300);
  }
}
.sidebar-nav a.active {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-weight: 600;
}
.sidebar-nav a .ic { width: 18px; height: 18px; flex: none; }
.sidebar-nav a .sn-badge {
  margin-left: auto;
  background: var(--high);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-pill);
}

.sidebar-exam-list {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--sp-2);
}
.sidebar-exam-list a {
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--gray);
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.sidebar-exam-list a:hover { background: var(--neutral-soft); color: var(--dark); }
.sidebar-exam-list .dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--gray-soft);
}
.sidebar-exam-list .dot.ok { background: var(--ok); }
.sidebar-exam-list .dot.warn { background: var(--warn); }
.sidebar-exam-list .dot.bad { background: var(--high); }

.sidebar-cmd-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin-top: var(--sp-3);
  background: var(--neutral-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--gray);
  font-size: 12.5px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-smooth);
}
.sidebar-cmd-hint:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  border-color: var(--primary-line);
}
.kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray);
  letter-spacing: 0;
}

.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
.sidebar-bottom .row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--gray);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.sidebar-bottom .row:hover { background: var(--neutral-soft); color: var(--dark); }
.sidebar-bottom form { width: 100%; }
.sidebar-bottom form button {
  width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 8px 10px; cursor: pointer;
  font-size: 12.5px; color: var(--gray);
  font-family: var(--font-text);
  border-radius: var(--r-sm);
}
.sidebar-bottom form button:hover { background: var(--neutral-soft); color: var(--high); }

/* Mobile drawer */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(4px);
  z-index: 89;
  animation: fadeIn 0.2s var(--ease-smooth);
}
.sidebar-toggle-mobile {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: var(--z-sidebar);
  width: 40px; height: 40px;
  background: var(--bg-glass-strong);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--dark);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 960px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }   /* ★fe80: 동일 이유 */
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    width: min(86vw, 320px);
    transform: translateX(-105%);
    transition: transform 0.35s var(--ease-out-quart);
    box-shadow: var(--shadow-xl);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.open { display: block; }
  .sidebar-toggle-mobile { display: flex; }
  .app-shell main { padding-top: 64px; }
}

/* ============================================================
   33. Command Palette (Raycast Cmd+K)
   ============================================================ */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 20, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-cmd-overlay);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  animation: fadeIn 0.18s var(--ease-smooth);
}
.cmd-overlay.open { display: flex; }
.cmd-palette {
  width: min(92vw, 640px);
  background: var(--bg-glass-strong);
  backdrop-filter: saturate(200%) blur(30px);
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  z-index: var(--z-cmd-modal);
  animation: cmd-pop 0.25s var(--ease-spring);
  display: flex;
  flex-direction: column;
  max-height: 72vh;
}
@keyframes cmd-pop {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmd-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.cmd-input-row .ic { width: 18px; height: 18px; color: var(--gray); flex: none; }
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--dark);
  letter-spacing: -0.011em;
}
.cmd-input::placeholder { color: var(--gray-soft); }
.cmd-shortcut-hint {
  color: var(--gray-soft);
  font-size: 11px;
}
.cmd-results {
  overflow-y: auto;
  padding: 6px;
}
.cmd-group-label {
  padding: 8px 12px 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gray-soft);
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--dark);
  font-size: 13.5px;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.cmd-item .ic { width: 18px; height: 18px; flex: none; color: var(--gray); }
.cmd-item .cmd-label { flex: 1; }
.cmd-item .cmd-sub { color: var(--gray-soft); font-size: 11.5px; }
.cmd-item.active,
.cmd-item:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}
.cmd-item.active .ic, .cmd-item:hover .ic { color: var(--brand-primary); }
.cmd-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--gray-soft);
  font-size: 13.5px;
}
.cmd-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--gray-soft);
}
.cmd-footer .seg { display: inline-flex; align-items: center; gap: 5px; }

/* ============================================================
   34. Bento Grid (Mercury / Apple iCloud)
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.bento-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-smooth),
              border-color var(--dur-base) var(--ease-smooth);
  box-shadow: var(--shadow-sm);
}
.bento-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium-hover);
}
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.row-2 { grid-row: span 2; }
.bento-card .accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple-500), var(--pink-500));
}
.bento-card.accent-blue .accent-bar { background: linear-gradient(90deg, var(--blue-500), var(--purple-500)); }
.bento-card.accent-green .accent-bar { background: linear-gradient(90deg, var(--green-500), var(--blue-500)); }
.bento-card.accent-orange .accent-bar { background: linear-gradient(90deg, var(--orange-500), var(--pink-500)); }
.bento-card.accent-red .accent-bar { background: linear-gradient(90deg, var(--red-500), var(--orange-500)); }

.bento-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray);
  margin-bottom: 8px;
}
.bento-eyebrow .ic { width: 14px; height: 14px; }
.bento-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--dark);
  margin: 0;
  line-height: 1.15;
}
.bento-big-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--purple-600), var(--pink-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin: var(--sp-2) 0;
}
.bento-sub { color: var(--gray); font-size: 13.5px; }
.bento-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.span-4 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card.span-2,
  .bento-card.span-4 { grid-column: span 1; }
}

/* 핵심 기능 3개 — 컴팩트 아이콘 카드 (가로 3개, 설명 없이) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: var(--sp-4);
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  min-height: 136px;
  padding: 28px 22px;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.38);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-smooth);
}
/* 광택 (대각선 하이라이트) */
.feature-card::before {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 55%; height: 220%;
  background: linear-gradient(120deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  transform: rotate(10deg);
  pointer-events: none;
}
/* 호버 시 살짝 밝아짐 */
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--dur-base) var(--ease-smooth);
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px -10px rgba(0,0,0,0.5);
}
.feature-card:hover::after { background: rgba(255,255,255,0.12); }
.feature-card.fc-blue  { background: linear-gradient(135deg, #4f8cff, #7b5cff); }
.feature-card.fc-green { background: linear-gradient(135deg, #10b981, #2dd4bf); }
.feature-card.fc-amber { background: linear-gradient(135deg, #f59e0b, #fb6f4d); }
.feature-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
.feature-go {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(2px);
}
.feature-go i { font-style: normal; transition: transform var(--dur-base) var(--ease-out-quart); }
.feature-card:hover .feature-go i { transform: translateX(5px); }
@media (max-width: 700px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 확인 필요 슬림 알림 (대기 있을 때만) */
.hitl-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--sp-4);
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--orange-500);
  text-decoration: none;
  color: var(--dark);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.hitl-strip:hover { transform: translateY(-1px); }
.hitl-strip .hs-count { font-weight: 800; color: var(--high); }
.hitl-strip .hs-arrow { margin-left: auto; color: var(--gray); }

/* ============================================================
   35. Circular Progress + Charts
   ============================================================ */
.circ-progress {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.circ-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.circ-progress .track { fill: none; stroke: var(--line); stroke-width: 12; }
.circ-progress .fill {
  fill: none;
  stroke: url(#circGrad);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--ease-out-quart);
}
.circ-progress .center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.circ-progress .pct {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--dark);
  line-height: 1;
}
.circ-progress .pct-sign { font-size: 0.55em; vertical-align: 0.2em; color: var(--gray); margin-left: 2px; }
.circ-progress .label {
  color: var(--gray);
  font-size: 12px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.spark-wrap { width: 100%; height: 56px; }
.spark-wrap svg { width: 100%; height: 100%; overflow: visible; }
.spark-wrap .line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark-wrap .area { opacity: 0.18; }
.spark-wrap .dot { fill: var(--card); stroke-width: 2; }

.areachart-wrap { width: 100%; height: 180px; }
.areachart-wrap svg { width: 100%; height: 100%; display: block; }
.areachart-wrap .grid line { stroke: var(--line-soft); stroke-dasharray: 3 5; }
.areachart-wrap .axis-label { fill: var(--gray-soft); font-size: 10.5px; font-family: var(--font-mono); }

.stacked-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--neutral-soft);
}
.stacked-bar .seg {
  height: 100%;
  transition: width 0.8s var(--ease-out-quart);
}
.stacked-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--gray);
}
.stacked-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.stacked-legend .swatch { width: 10px; height: 10px; border-radius: 3px; }

/* ============================================================
   36. Hero v3 (mesh + gradient text + bento)
   ============================================================ */
.hero-mesh {
  position: relative;
  padding: clamp(24px, 3.5vw, 40px) clamp(20px, 4vw, 48px);
  border-radius: var(--r-2xl);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
  margin-bottom: var(--sp-6);
  isolation: isolate;
}
.hero-mesh > *:not(.mesh-bg) { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  background: var(--bg-glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: var(--sp-4);
}
.hero-eyebrow .pill {
  background: linear-gradient(135deg, var(--green-500), var(--blue-500));
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-title {
  font-family: 'Inter Tight', var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0 0 var(--sp-3);
  color: var(--dark);
}
.hero-title .gradient-text {
  background: linear-gradient(115deg, var(--purple-600) 0%, var(--pink-500) 40%, var(--blue-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero-title .line-1, .hero-title .line-2 { display: block; }
.hero-sub {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--gray);
  max-width: 580px;
  margin: 0 0 var(--sp-6);
  letter-spacing: -0.011em;
  line-height: 1.55;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--sp-6);
}
.btn-primary-3d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font-text);
  letter-spacing: -0.011em;
  background: linear-gradient(135deg, var(--purple-600), var(--pink-600));
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 1px 3px rgba(0,0,0,0.1), 0 8px 24px rgba(139, 92, 246, 0.35);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-smooth), filter var(--dur-fast) var(--ease-smooth);
  position: relative;
}
.btn-primary-3d:hover {
  transform: translateY(-2px) scale(1.01);
  color: #fff;
  filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 8px rgba(0,0,0,0.12), 0 16px 40px rgba(139, 92, 246, 0.45);
}
.btn-primary-3d:active { transform: translateY(0) scale(0.98); }
.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font-text);
  letter-spacing: -0.011em;
  background: var(--bg-glass-strong);
  color: var(--dark);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--dur-fast) var(--ease-smooth);
}
.btn-glass:hover {
  transform: translateY(-2px);
  background: var(--card);
  color: var(--brand-primary);
  border-color: var(--primary-line);
  box-shadow: var(--shadow-md);
}

/* Hero bento (asymmetric) */
.hero-stats-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero-stat {
  background: var(--bg-glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--dark);
  line-height: 1.1;
}
.hero-stat .lbl {
  font-size: 11.5px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .hero-stats-bento { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   37. Skeleton shimmer (Linear)
   ============================================================ */
.skel {
  background: linear-gradient(90deg, var(--line-soft) 0%, var(--neutral-soft) 50%, var(--line-soft) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.skel-line { height: 12px; margin: 6px 0; }
.skel-line.w-60 { width: 60%; }
.skel-line.w-40 { width: 40%; }
.skel-block { height: 64px; }
.skel-circle { border-radius: 50%; width: 64px; height: 64px; }

/* ============================================================
   38. Reveal on scroll
   ============================================================ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px) scale(0.985);
  transition: opacity 0.55s var(--ease-out-quart), transform 0.55s var(--ease-out-quart);
  will-change: opacity, transform;
}
.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   39. Polish — auth / hitl swipe / explain mockup
   ============================================================ */
/* Auth pages with mesh */
.auth-mesh-wrap {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--sp-7) var(--sp-4);
  isolation: isolate;
}
.auth-mesh-wrap > section.auth {
  position: relative;
  z-index: 1;
  width: min(420px, 96vw);
  margin: 0;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-premium);
  border: 1px solid var(--line);
}
.auth-mesh-wrap .auth h1 {
  font-family: 'Inter Tight', var(--font-display);
  font-size: 32px;
  letter-spacing: -0.035em;
}

/* HITL swipe stack */
.hitl-swipe-stack {
  position: relative;
  perspective: 1200px;
}
.hitl-card {
  transition: transform 0.45s var(--ease-spring), opacity 0.35s var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.hitl-card.swipe-left  { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.hitl-card.swipe-right { transform: translateX(120%) rotate(8deg); opacity: 0; }

/* Explain HWPX mockup (3D laptop) */
.explain-mockup {
  position: relative;
  background: linear-gradient(160deg, var(--neutral-soft), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin: var(--sp-4) 0;
}
.explain-mockup .laptop {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #1a1a1f, #2a2a30);
  border-radius: 14px 14px 6px 6px;
  padding: 8px 8px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.explain-mockup .laptop::after {
  content: '';
  position: absolute;
  left: -8%; right: -8%; bottom: -10px;
  height: 8px;
  background: linear-gradient(180deg, #38383e, #1a1a1f);
  border-radius: 4px 4px 12px 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}
.explain-mockup .screen {
  width: 100%; height: 100%;
  background: var(--card);
  border-radius: 6px;
  padding: 10px;
  font-size: 9px;
  line-height: 1.4;
  color: var(--gray);
  overflow: hidden;
  position: relative;
}
.explain-mockup .screen .head {
  font-weight: 700; color: var(--dark);
  font-size: 11px; margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.explain-mockup .screen .row { height: 6px; background: var(--line); border-radius: 2px; margin: 3px 0; }
.explain-mockup .screen .row.w-60 { width: 60%; }
.explain-mockup .screen .row.w-40 { width: 40%; }
.explain-mockup .download-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.fab {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--purple-600), var(--pink-600));
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-text);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-smooth);
}
.fab:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 12px 32px rgba(139, 92, 246, 0.45); }
@media (max-width: 720px) { .explain-mockup { grid-template-columns: 1fr; } }

/* Status shimmer badge */
.badge.shimmer {
  position: relative;
  overflow: hidden;
}
.badge.shimmer::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  animation: badge-shimmer 2.4s linear infinite;
}
@keyframes badge-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Findings bento on review_result */
.finding-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.finding-bento .mini {
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-smooth);
}
.finding-bento .mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.finding-bento .mini .num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.finding-bento .mini .lbl {
  font-size: 12px; color: var(--gray);
  margin-top: 6px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.finding-bento .mini .delta { font-size: 12px; margin-top: 6px; color: var(--gray-soft); }
.finding-bento .mini.warn { border-color: rgba(255,159,10,0.35); background: linear-gradient(180deg, rgba(255,159,10,0.06), transparent); }
.finding-bento .mini.bad { border-color: rgba(255,59,48,0.35); background: linear-gradient(180deg, rgba(255,59,48,0.06), transparent); }
.finding-bento .mini.ok { border-color: rgba(52,199,89,0.35); background: linear-gradient(180deg, rgba(52,199,89,0.06), transparent); }
@media (max-width: 720px) { .finding-bento { grid-template-columns: 1fr 1fr; } }

/* Topnav hide when sidebar in shell */
.app-shell .topnav { display: none; }

/* Premium scroll-bar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-soft); }

/* Tooltip-ish kbd group */
.kbd-row { display: inline-flex; gap: 4px; align-items: center; }
.kbd-row .sep { color: var(--gray-soft); font-size: 10px; }

/* Toast micro */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--dark);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  animation: toast-in 0.32s var(--ease-spring);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
 * Compact result page (review_result + explain_result)
 * 30초 PM 검수용 — 핵심만 최상단, 상세는 fold
 * ───────────────────────────────────────────────────────────── */

.result-hero-compact {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px clamp(20px, 2.4vw, 32px);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.result-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.result-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.result-hero-meta .pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.result-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 4px 0 14px;
  color: var(--dark);
}
.result-hero-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--neutral-soft);
  overflow: hidden;
  margin-bottom: 6px;
}
.result-hero-progress-text { font-size: 12px; }

/* Core summary — accuracy + wrong + downloads */
.result-summary-compact {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(260px, 320px);
  gap: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px clamp(20px, 2.4vw, 32px);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  align-items: center;
}
.rsc-accuracy {
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: 20px;
}
.rsc-accuracy-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.rsc-accuracy-num.good { color: var(--green-500, #22c55e); }
.rsc-accuracy-num.med  { color: var(--orange-500, #f97316); }
.rsc-accuracy-num.bad  { color: var(--red-500, #ef4444); }
.rsc-accuracy-label {
  font-size: 11px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 6px;
}
.rsc-accuracy-sub {
  font-size: 13px;
  margin-top: 4px;
}
.rsc-wrong-label {
  font-size: 11px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 8px;
}
.rsc-wrong-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
}
.rsc-wrong-q {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--red-500, #ef4444);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rsc-downloads {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.result-download {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--dark);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.result-download:hover {
  background: var(--neutral-soft);
  border-color: var(--gray-soft);
}
.result-download:active { transform: scale(0.98); }
.result-download.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto; /* tooltip 보이도록 */
}
.result-download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.result-download-label { flex: 1; }

/* HITL inline 알림 */
.result-hitl-inline {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--med-soft, rgba(255,159,10,0.08));
  border: 1px solid rgba(255, 159, 10, 0.35);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.result-hitl-inline[hidden] { display: none; }
.result-hitl-inline { align-items: flex-start; }
.result-hitl-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
/* 막힘→앱 알림 (2026-06-16): pending HITL 목록 */
.hitl-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.hitl-list-item {
  font-size: .9em; line-height: 1.5;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255,159,10,0.10);
}
.hitl-list-item b { color: #b45309; margin-right: 6px; }
.hitl-inbox-link { font-weight: 700; }
@media (max-width: 768px) {
  /* 모바일: 답하러 가기 링크 터치 타깃 확대 */
  .hitl-inbox-link { display: inline-block; padding: 8px 0; min-height: 44px; line-height: 28px; }
  /* 막힘→앱 응답 UX: HITL 카드 위젯 터치 타깃 ≥44px + iOS 줌 방지(16px) */
  .hitl-card { padding: 14px; }
  .hitl-card .submit,
  .hitl-card button,
  .hitl-card select,
  .hitl-card input[type="text"],
  .hitl-card input[type="number"],
  .hitl-card textarea { min-height: 44px; font-size: 16px; }
  .hitl-card .submit { width: 100%; margin-top: 10px; }
  .hitl-ask { font-size: 16px !important; }
}

/* Fold (네이티브 details/summary) */
.result-fold {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.result-fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px clamp(20px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  transition: background 0.15s;
}
.result-fold > summary::-webkit-details-marker { display: none; }
.result-fold > summary:hover { background: var(--neutral-soft); }
.result-fold-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  flex-shrink: 0;
}
.result-fold-hint {
  font-size: 12.5px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-fold-chev {
  font-size: 22px;
  color: var(--gray-soft);
  line-height: 1;
  transition: transform 0.25s var(--ease-spring, ease);
  flex-shrink: 0;
}
.result-fold[open] > summary > .result-fold-chev {
  transform: rotate(90deg);
}
.result-fold-body {
  padding: 0 clamp(20px, 2.4vw, 28px) 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  animation: fold-fade 0.25s ease-out;
}
@keyframes fold-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Extras list (R34) */
.result-extras-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.result-extras-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--neutral-soft);
  border-radius: var(--r-md);
  font-size: 13.5px;
}
.result-extras-list li a {
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
}
.result-extras-list li a:hover { text-decoration: underline; }
.result-extras-list li a.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.result-auto-status {
  text-align: center;
  font-size: 12px;
  margin-top: 20px;
  margin-bottom: 28px;
}

/* Mobile responsive */
@media (max-width: 860px) {
  .result-summary-compact {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rsc-accuracy {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 16px;
  }
}
@media (max-width: 520px) {
  .result-fold > summary { flex-wrap: wrap; }
  .result-fold-hint { flex-basis: 100%; order: 3; }
}

/* Dark mode */
@media (prefers-color-scheme: light) and (min-width: 999999px)) {
  :root:not([data-theme="light"]) .rsc-wrong-q {
    background: rgba(239, 68, 68, 0.18);
  }
  :root:not([data-theme="light"]) .result-extras-list li {
    background: rgba(255, 255, 255, 0.04);
  }
}

/* ================= VERADI 디자인 통일 override (대시보드 매칭, 2026-07-01) ================= */
:root { --bg:#FAF7F1 !important; }
html, body { background:#FAF7F1 !important; }
.app-shell, .main, main { background:#FAF7F1; }
/* 사이드바 = 대시보드 글래스 (warm) */
.sidebar { background:rgba(255,253,250,.78) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-right:1px solid rgba(60,50,34,.10) !important; box-shadow:none !important; }
.sidebar-brand { color:#2A2620 !important; }
.brand-mark { background:linear-gradient(135deg,#1B6FD4,#27A6C4) !important; color:#fff !important; }
.sidebar-section-label { color:#9C9384 !important; font-size:10.5px !important; letter-spacing:.14em; font-weight:700 !important; }
.sidebar-nav a { color:#57503F !important; border-radius:11px !important; font-weight:500; text-decoration:none; }
.sidebar-nav a:hover { background:rgba(60,50,34,.06) !important; }
.sidebar-nav a.active { background:linear-gradient(135deg,rgba(27,111,212,.14),rgba(39,166,196,.12)) !important; box-shadow:inset 3px 0 0 #1B6FD4 !important; color:#2A2620 !important; font-weight:700 !important; }
.sidebar-user { background:rgba(255,253,250,.66) !important; border:1px solid rgba(60,50,34,.10) !important; }
.sidebar-user .avatar, .avatar { background:linear-gradient(135deg,#1B6FD4,#27A6C4) !important; color:#fff !important; }
.who-name { color:#2A2620 !important; }
.who-role { color:#726858 !important; }
.sidebar-cmd-hint { background:#FFFDFA !important; border:1px solid rgba(60,50,34,.14) !important; color:#726858 !important; }
.kbd { background:#F1ECE3 !important; color:#57503F !important; border:1px solid rgba(60,50,34,.14) !important; }
.topnav { background:rgba(250,247,241,.88) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(60,50,34,.10) !important; }
.sn-badge, .nav-badge { background:#1B6FD4 !important; color:#fff !important; }
.card, .panel { background:#FFFDFA !important; border-color:rgba(60,50,34,.12) !important; }
h1,h2,h3 { font-family:'Space Grotesk','Noto Sans KR',sans-serif !important; }
.dash-hero, .dash-hero h1, .dash-hero span, .dash-hero b, .dash-hero div { color:#fff !important; }
/* 다크 토글 숨김 + 다크 테마여도 라이트(warm) 강제 (통일) */
#themeToggle { display:none !important; }
html[data-theme="dark"], body[data-theme="dark"], [data-theme="dark"] { --bg:#FAF7F1 !important; --card:#FFFDFA !important; --dark:#2A2620 !important; --gray:#57503F !important; --primary:#1B6FD4 !important; background:#FAF7F1 !important; color:#2A2620 !important; }