/* ============================================================
   Design Tokens — Neutral-first. 과목별 원색 배지 없음, calm/academic.
   ============================================================ */
:root {
  /* Color — Toss 스타일: 블루 액센트 + 클린 그레이스케일 */
  --bg: #f2f4f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-tint: #eff6ff;
  --text-primary: #191f28;
  --text-secondary: #4e5968;
  --text-tertiary: #8b95a1;
  --text-disabled: #b0b8c1;
  --border-subtle: #e5e8eb;
  --border-strong: #d1d6db;
  --accent-primary: #3182f6;
  --accent-primary-strong: #1b64da;
  --accent-primary-ink: #ffffff;
  --state-success: #12b886;
  --state-warning: #ff9800;
  --state-error: #f04452;
  --state-info: #3182f6;
  --learning-stable: #12b886;
  --learning-check: #ff9800;
  --learning-weak: #f04452;
  --learning-insufficient: #b0b8c1;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-sheet: 20px; --radius-pill: 999px;

  /* Typography (size/line-height/weight) */
  --font: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --fs-display: 700 32px/40px var(--font);
  --fs-page-title: 700 26px/34px var(--font);
  --fs-section-title: 700 20px/28px var(--font);
  --fs-card-title: 600 17px/25px var(--font);
  --fs-body-lg: 500 16px/26px var(--font);
  --fs-body: 400 15px/24px var(--font);
  --fs-supporting: 400 14px/21px var(--font);
  --fs-caption: 500 13px/18px var(--font);
  --fs-question: 500 18px/30px var(--font);
  --fs-passage: 400 17px/32px var(--font);

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a;
    --surface: #1e2126;
    --surface-raised: #262a31;
    --surface-tint: #182437;
    --text-primary: #f2f4f6;
    --text-secondary: #b0b8c1;
    --text-tertiary: #7a828d;
    --text-disabled: #4e5968;
    --border-subtle: #2b2f36;
    --border-strong: #3a3f47;
    --accent-primary: #4593fc;
    --accent-primary-strong: #6ba6fd;
    --accent-primary-ink: #0b1220;
    --state-success: #29d6a8;
    --state-warning: #ffb84d;
    --state-error: #ff6b78;
    --state-info: #4593fc;
    --learning-stable: #29d6a8;
    --learning-check: #ffb84d;
    --learning-weak: #ff6b78;
    --learning-insufficient: #7a828d;
  }
}
:root[data-theme="dark"] {
  --bg: #14161a; --surface: #1e2126; --surface-raised: #262a31; --surface-tint: #182437;
  --text-primary: #f2f4f6; --text-secondary: #b0b8c1; --text-tertiary: #7a828d; --text-disabled: #4e5968;
  --border-subtle: #2b2f36; --border-strong: #3a3f47;
  --accent-primary: #4593fc; --accent-primary-strong: #6ba6fd; --accent-primary-ink: #0b1220;
  --state-success: #29d6a8; --state-warning: #ffb84d; --state-error: #ff6b78; --state-info: #4593fc;
  --learning-stable: #29d6a8; --learning-check: #ffb84d; --learning-weak: #ff6b78; --learning-insufficient: #7a828d;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text-primary);
  font: var(--fs-body); -webkit-font-smoothing: antialiased;
  padding-bottom: calc(64px + var(--safe-bottom));
}
h1,h2,h3,p,ul { margin: 0; }
button { font-family: inherit; cursor: pointer; }
/* 진단(첫 실력 확인) 진행 중에는 아직 초기화되지 않은 내비게이션을 숨긴다 */
body.diagnostic-active .bottom-nav, body.diagnostic-active .app-tabs { display: none !important; }
a { color: inherit; }

/* ---------------- AppShell / TopBar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-title { font: var(--fs-card-title); }
.topbar-sub { font: var(--fs-caption); color: var(--text-tertiary); }
.topbar-brand { display: flex; align-items: center; gap: var(--space-2); }
.topbar-logo {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--surface-tint); color: var(--accent-primary); flex-shrink: 0;
}
.topbar-logo svg { width: 18px; height: 18px; }
.icon-btn {
  background: none; border: none; color: var(--text-secondary);
  font: var(--fs-caption); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--surface-raised); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.tab-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------------- BottomNavigation ---------------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--surface); border-top: 1px solid var(--border-subtle);
  padding-bottom: var(--safe-bottom);
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--text-tertiary);
  font: var(--fs-caption); padding: var(--space-2) 0 var(--space-2);
  min-height: 52px; justify-content: center; position: relative;
}
.bottom-nav-item .tab-icon { width: 22px; height: 22px; }
.bottom-nav-item.active { color: var(--accent-primary); font-weight: 700; }
.bottom-nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--state-error); position: absolute; top: 4px; left: 50%; margin-left: 6px; display: none; }
.bottom-nav-item.has-badge .dot { display: block; }

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .topbar { padding: var(--space-4) var(--space-8); }
  .app-tabs {
    position: sticky; top: 57px; z-index: 19; background: var(--bg);
    border-bottom: 1px solid var(--border-subtle);
    display: flex; gap: var(--space-2); padding: 0 var(--space-8);
  }
  .app-tabs button {
    background: none; border: none; padding: var(--space-3) var(--space-3);
    font: var(--fs-body-lg); color: var(--text-tertiary); border-bottom: 2px solid transparent;
    display: flex; align-items: center; gap: var(--space-2);
  }
  .app-tabs button .tab-icon { width: 18px; height: 18px; }
  .app-tabs button.active { color: var(--text-primary); border-bottom-color: var(--accent-primary); }
}
.app-tabs { display: none; }
@media (min-width: 768px) { .app-tabs { display: flex; } }

/* ---------------- Layout / Page ---------------- */
.page { padding: var(--space-5) var(--space-4) var(--space-10); max-width: 720px; margin: 0 auto; }
@media (min-width: 768px) { .page { padding: var(--space-8); max-width: 100%; } }
.page-title { font: var(--fs-page-title); margin-bottom: var(--space-1); }
.page-sub { font: var(--fs-body); color: var(--text-secondary); margin-bottom: var(--space-6); }
.section-title { font: var(--fs-section-title); margin: var(--space-8) 0 var(--space-3); }
.section-title:first-child { margin-top: 0; }

/* iPad dashboard grid */
.dash-grid { display: block; }
@media (min-width: 768px) {
  .dash-grid {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6);
    align-items: start;
  }
  .dash-grid .col-wide { grid-column: 1; }
  .dash-grid .col-narrow { grid-column: 2; }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .dash-grid { grid-template-columns: 1.2fr 0.8fr; }
}

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.card + .card { margin-top: var(--space-3); }

/* Primary learning card */
.priority-card {
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: 0 1px 2px rgba(25,31,40,0.04);
}
.priority-icon-badge {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--surface-tint); color: var(--accent-primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3);
}
.priority-icon-badge svg { width: 22px; height: 22px; }
.priority-eyebrow { font: var(--fs-caption); color: var(--text-tertiary); margin-bottom: var(--space-2); }
.priority-title { font: var(--fs-section-title); margin-bottom: var(--space-1); }
.priority-sub { font: var(--fs-body); color: var(--text-secondary); margin-bottom: var(--space-3); }
.priority-reason {
  font: var(--fs-supporting); color: var(--text-secondary);
  background: var(--bg); border-radius: var(--radius-md); padding: var(--space-3);
  margin-bottom: var(--space-4); border: none; text-align: left; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.priority-reason:hover { background: var(--border-subtle); }
.priority-reason-teaser { flex: 1; }
.priority-reason-cta {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  color: var(--accent-primary); font-weight: 600; white-space: nowrap;
}
.priority-reason-cta .chevron-icon { color: var(--accent-primary); }
.priority-meta {
  font: var(--fs-caption); color: var(--text-tertiary); margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: var(--space-1);
}
.demo-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--surface-tint); color: var(--accent-primary-strong);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font: var(--fs-supporting); font-weight: 600; margin-bottom: var(--space-4);
}
.demo-tag {
  flex-shrink: 0; background: var(--surface-tint); color: var(--accent-primary-strong);
  font: var(--fs-caption); font-weight: 700; border-radius: var(--radius-pill); padding: 2px var(--space-2);
}
.demo-banner-exit {
  border: none; background: none; color: var(--accent-primary-strong); font: var(--fs-caption);
  font-weight: 700; text-decoration: underline; flex-shrink: 0; padding: 0;
}
.chevron-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-tertiary); }
.meta-icon { width: 14px; height: 14px; flex-shrink: 0; }

.btn-primary {
  background: var(--accent-primary); color: var(--accent-primary-ink);
  border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5);
  font: var(--fs-body-lg); font-weight: 700; width: 100%; min-height: 48px;
  transition: background-color .12s ease, transform .08s ease;
}
.btn-primary:active { background: var(--accent-primary-strong); transform: scale(0.99); }
.btn-secondary {
  background: var(--surface-tint); color: var(--accent-primary-strong);
  border: none; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5); font: var(--fs-body-lg); font-weight: 600; width: 100%; min-height: 48px;
  transition: transform .08s ease;
}
.btn-secondary:active { transform: scale(0.99); }
.btn-text { background: none; border: none; color: var(--accent-primary); font: var(--fs-supporting); font-weight: 600; padding: var(--space-2); }

/* Subject state row */
.subject-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle);
}
.subject-row:last-child { border-bottom: none; }
.subject-row-name { font: var(--fs-body-lg); }
.subject-row-state { font: var(--fs-caption); display: flex; align-items: center; gap: var(--space-2); }
.state-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.state-dot.STABLE { background: var(--learning-stable); }
.state-dot.CHECK_NEEDED { background: var(--learning-check); }
.state-dot.LIKELY_WEAK { background: var(--learning-weak); }
.state-dot.INSUFFICIENT_EVIDENCE { background: var(--learning-insufficient); }

/* Review / Change item */
.list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle);
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; color: var(--text-primary);
}
.list-item:last-child { border-bottom: none; }
.list-item-title { font: var(--fs-body-lg); }
.list-item-sub { font: var(--fs-caption); color: var(--text-tertiary); margin-top: 2px; }
.empty-note { font: var(--fs-supporting); color: var(--text-tertiary); padding: var(--space-3) 0; }

/* ---------------- Onboarding ---------------- */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  overflow-y: auto; display: flex; flex-direction: column;
}
.onboard-step { padding: var(--space-8) var(--space-5); max-width: 480px; margin: 0 auto; width: 100%; flex: 1; }
.onboard-progress { display: flex; gap: var(--space-1); padding: var(--space-5) var(--space-5) 0; max-width: 480px; margin: 0 auto; width: 100%; }
.onboard-progress-seg { flex: 1; height: 3px; border-radius: var(--radius-pill); background: var(--border-subtle); }
.onboard-progress-seg.done { background: var(--accent-primary); }
.onboard-sample-link {
  display: block; margin: 0 0 var(--space-4); margin-left: auto;
  border: none; background: none; color: var(--text-tertiary); font: var(--fs-caption);
  font-weight: 600; text-decoration: underline; padding: 0;
}
.option-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.option-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; text-align: left; min-height: 60px;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-primary);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); font: var(--fs-body-lg);
}
.option-card[aria-pressed="true"] {
  border-color: var(--accent-primary); background: var(--surface-tint); color: var(--accent-primary-strong); font-weight: 700;
}
.option-card-check { color: var(--accent-primary); flex-shrink: 0; opacity: 0; width: 22px; height: 22px; }
.option-card-check svg { width: 22px; height: 22px; }
.option-card[aria-pressed="true"] .option-card-check { opacity: 1; }
.option-card-disabled { color: var(--text-disabled); background: var(--bg); cursor: default; }
.chip-badge { font: var(--fs-caption); font-size: 11px; color: var(--text-tertiary); background: var(--surface); border-radius: var(--radius-pill); padding: 3px var(--space-2); flex-shrink: 0; }
.field-label { font: var(--fs-caption); color: var(--text-secondary); display: block; margin: var(--space-5) 0 var(--space-2); }
.field-input {
  width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-3); font: var(--fs-body); background: var(--surface); color: var(--text-primary);
}
.onboard-footer { padding: var(--space-4) var(--space-5); max-width: 480px; margin: 0 auto; width: 100%; }

/* ---------------- Question / Practice ---------------- */
.q-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; background: var(--bg); z-index: 15;
}
.q-progress-track { flex: 1; height: 4px; background: var(--border-subtle); border-radius: var(--radius-pill); margin: 0 var(--space-3); overflow: hidden; }
.q-progress-fill { height: 100%; background: var(--accent-primary); }

.q-layout { padding: var(--space-4); max-width: 720px; margin: 0 auto; }
@media (min-width: 1024px) and (orientation: landscape) {
  .q-layout.has-passage { max-width: 1200px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); padding: var(--space-6) var(--space-8); }
}
.q-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.q-tag { font: var(--fs-caption); color: var(--text-tertiary); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2px var(--space-2); }
.passage {
  font: var(--fs-passage); color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-5); margin-bottom: var(--space-5); white-space: pre-line;
}
.passage .word, .explanation-line .word { cursor: pointer; border-radius: 3px; }
.passage .word:hover, .passage .word.saved, .explanation-line .word:hover, .explanation-line .word.saved { background: rgba(49,130,246,0.16); }
.q-prompt { font: var(--fs-question); margin-bottom: var(--space-4); white-space: pre-line; }
.choice-list { display: flex; flex-direction: column; gap: var(--space-2); }
.choice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); background: var(--surface);
  font: var(--fs-body-lg); text-align: left; min-height: 48px;
}
.choice-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font: var(--fs-caption); color: var(--text-secondary);
}
.choice[aria-pressed="true"] { border-color: var(--accent-primary); background: var(--surface-tint); }
.choice[aria-pressed="true"] .choice-num { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--accent-primary-ink); }
.choice.is-correct { border-color: var(--state-success); background: rgba(18,184,134,0.1); }
.choice.is-wrong { border-color: var(--state-error); background: rgba(240,68,82,0.08); }

.q-nav { display: flex; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-8); max-width: 720px; margin: 0 auto; }
@media (min-width: 1024px) and (orientation: landscape) { .q-nav { max-width: 1200px; padding: var(--space-5) var(--space-8); } }
.q-nav .btn-secondary { flex: 1; }

/* ---------------- Bottom Sheet ---------------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(15,18,24,0.45); z-index: 39;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--surface); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.8,.3,1);
  max-height: 88vh; display: flex; flex-direction: column;
  padding-bottom: var(--safe-bottom);
}
.sheet.open { transform: translateY(0); }
.sheet[data-level="peek"] { max-height: 30vh; }
.sheet[data-level="compact"] { max-height: 46vh; }
.sheet[data-level="expanded"] { max-height: 72vh; }
.sheet[data-level="full"] { max-height: 94vh; }
@media (min-width: 768px) {
  .sheet { left: 50%; right: auto; width: 100%; max-width: 480px; transform: translate(-50%, calc(100% + var(--space-6))); border-radius: var(--radius-sheet); bottom: var(--space-6); }
  .sheet.open { transform: translate(-50%, 0); }
  .sheet-backdrop { background: rgba(15,18,24,0.4); }
}
.sheet-drag { display: flex; justify-content: center; padding: var(--space-3) 0 var(--space-2); touch-action: none; }
.sheet-handle { width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--border-strong); }
.sheet-body { overflow-y: auto; padding: 0 var(--space-5) var(--space-6); overscroll-behavior: contain; }
.sheet-eyebrow { font: var(--fs-caption); color: var(--text-tertiary); margin-bottom: var(--space-1); }
.sheet-headline { font: var(--fs-section-title); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.sheet-headline.correct { color: var(--state-success); }
.sheet-headline.incorrect { color: var(--state-error); }
.fb-icon { width: 26px; height: 26px; flex-shrink: 0; }
.sheet-block { font: var(--fs-body); color: var(--text-secondary); margin-bottom: var(--space-4); }
.answer-summary { font-weight: 600; color: var(--text-primary); }
.explanation-box {
  background: var(--bg); border-radius: var(--radius-md); padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.explanation-line {
  font: var(--fs-body); color: var(--text-secondary); font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.explanation-line:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.sheet-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

/* Vocabulary sheet */
.vocab-word { font: var(--fs-section-title); }
.vocab-meaning-input { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-3); font: var(--fs-body); margin: var(--space-2) 0 var(--space-4); background: var(--surface); color: var(--text-primary); }
.vocab-context { font: var(--fs-supporting); color: var(--text-tertiary); background: var(--bg); border-radius: var(--radius-md); padding: var(--space-3); }

/* ---------------- Status page ---------------- */
.status-skill-card { padding: var(--space-4); }
.status-skill-card + .status-skill-card { margin-top: var(--space-4); }
.status-skill-name { font: var(--fs-card-title); margin-bottom: var(--space-2); }
.status-skill-state { font: var(--fs-caption); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.status-skill-evidence { font: var(--fs-supporting); color: var(--text-tertiary); line-height: 1.5; }
.status-skill-card-clickable {
  width: 100%; text-align: left; border: 1px solid var(--border-subtle); cursor: pointer;
  font: inherit; color: inherit; display: block;
}
.status-skill-card-clickable:active { background: var(--bg); }
.status-skill-card-clickable .status-skill-state .chevron-icon { margin-left: auto; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(80px + var(--safe-bottom)); transform: translateX(-50%);
  background: var(--text-primary); color: var(--bg); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill); font: var(--fs-supporting); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

.hidden { display: none !important; }

/* ---------------- View switching (탭/화면 전환) ---------------- */
.view { display: none; }
.view.active { display: block; }