:root {
  --bg: #F3F5FB;
  --surface: #FFFFFF;
  --surface-alt: #EDF0FA;
  --ink: #1A1D2E;
  --ink-muted: #676C82;
  --primary: #3651E0;
  --primary-soft: #E6E9FC;
  --live: #E8752A;
  --live-soft: #FDEADC;
  --danger: #D14343;
  --danger-soft: #FBE6E6;
  --border: #E1E4EF;
  --shadow: 0 16px 36px -18px rgba(26, 29, 46, 0.22);

  /* 여백 스케일 — 컴포넌트 전체에서 이 값들만 씁니다. 새 화면을 만들 때도 이 안에서 고르면 됩니다. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 24px;
  --space-12: 28px;
  --space-13: 36px;

  /* 모서리 둥글기 스케일 */
  --radius-sm: 10px;   /* 탭, 작은 버튼 */
  --radius-md: 12px;   /* 인풋, 작은 배지형 카드 */
  --radius-lg: 14px;   /* 리스트 행, 카드 (가장 많이 쓰임) */
  --radius-xl: 16px;   /* 헤더 카드, 강조 카드 */
  --radius-pill: 999px; /* 뱃지, 알약형 버튼 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14151F;
    --surface: #1C1E2B;
    --surface-alt: #242739;
    --ink: #EDEFF7;
    --ink-muted: #9AA0B8;
    --primary: #7C90FF;
    --primary-soft: #262B4C;
    --live: #FF9452;
    --live-soft: #3A2617;
    --danger: #FF8080;
    --danger-soft: #3B1F1F;
    --border: #33364A;
    --shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  --bg: #14151F;
  --surface: #1C1E2B;
  --surface-alt: #242739;
  --ink: #EDEFF7;
  --ink-muted: #9AA0B8;
  --primary: #7C90FF;
  --primary-soft: #262B4C;
  --live: #FF9452;
  --live-soft: #3A2617;
  --danger: #FF8080;
  --danger-soft: #3B1F1F;
  --border: #33364A;
  --shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.app-header {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-13) var(--space-10) var(--space-8);
}
.brand { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-4); }
.brand-mark {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.brand-mark svg { width: 22px; height: 22px; }
.app-header h1 {
  font-family: "Do Hyeon", "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  margin: 0;
  text-wrap: balance;
}
.app-header .subtitle {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.app-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-10) 60px;
}

.crumb-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-8);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow);
}
.back-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none; color: var(--ink);
}
.back-btn svg { width: 16px; height: 16px; }
.back-btn[hidden] { display: none; }
.back-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.crumb-text { flex: 1; min-width: 0; }
.crumb-title { font-size: 1.02rem; font-weight: 700; }
.crumb-sub { font-size: 0.78rem; color: var(--ink-muted); margin-top: var(--space-1); }

.fav-btn {
  width: 36px; height: 36px; border-radius: 50%; flex: none; margin-left: auto;
  border: 1px solid var(--border); background: var(--surface-alt); color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.fav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fav-btn.active { color: var(--live); background: var(--live-soft); border-color: var(--live); }
.fav-btn.active svg { fill: currentColor; }
.fav-btn[hidden] { display: none; }
.fav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.favorite-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  background: var(--live-soft); border: 1px solid var(--live); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-9); cursor: pointer; text-align: left; width: 100%; color: var(--ink); font-family: inherit;
}
.favorite-card .fav-label { font-size: 0.72rem; font-weight: 700; color: var(--live); letter-spacing: .03em; }
.favorite-card .school-name { font-size: 1rem; margin-top: var(--space-1); }
.favorite-card .chev { color: var(--live); flex: none; }

.search-input {
  width: 100%; font-family: inherit; font-size: 0.92rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-7);
}
.search-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.region-list { display: flex; flex-direction: column; gap: var(--space-5); }
.region-list[hidden] { display: none; }

.region-section { display: flex; flex-direction: column; gap: var(--space-4); }
.region-section-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-muted); padding: 0 var(--space-1); }
.region-selected {
  display: flex; align-items: center; gap: var(--space-5); width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-8); cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
}
.region-selected:hover { border-color: var(--primary); }
.region-selected:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.region-selected-label { font-size: 0.72rem; font-weight: 700; color: var(--ink-muted); flex: none; width: 4.4em; }
.region-selected-value { font-size: 0.95rem; font-weight: 700; flex: 1; }
.region-change { font-size: 0.78rem; font-weight: 700; color: var(--primary); flex: none; }

.content { display: flex; flex-direction: column; gap: var(--space-5); }

.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-9); cursor: pointer; text-align: left; width: 100%; color: var(--ink);
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
}
.list-row:hover { border-color: var(--primary); }
.list-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.list-row .chev { color: var(--ink-muted); flex: none; }
.list-row[hidden] { display: none; }

.chev svg { width: 16px; height: 16px; display: block; }

.school-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-9); cursor: pointer; text-align: left; width: 100%; color: var(--ink); font-family: inherit;
}
.school-card:hover { border-color: var(--primary); }
.school-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.school-name { font-size: 0.98rem; font-weight: 700; }
.school-addr { font-size: 0.8rem; color: var(--ink-muted); }

.meta-line { font-size: 0.8rem; color: var(--ink-muted); font-weight: 500; padding: 0 var(--space-1); }

.now-badge {
  display: flex; align-items: center; gap: var(--space-4); background: var(--live-soft); color: var(--live);
  border-radius: var(--radius-md); padding: var(--space-6) var(--space-7); font-size: 0.85rem; font-weight: 700;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.8s ease-in-out infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.now-hero {
  background: var(--primary); color: #fff; border-radius: var(--radius-xl); padding: var(--space-9) var(--space-10);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.now-hero.muted { background: var(--surface-alt); color: var(--ink); }
.now-hero .hero-label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: .03em; opacity: .85;
}
.now-hero.muted .hero-label { color: var(--ink-muted); opacity: 1; }
.now-hero .hero-subject { font-size: 1.35rem; font-weight: 700; text-wrap: balance; }
.now-hero .hero-time { font-size: 0.8rem; opacity: .85; }
.now-hero.muted .hero-time { color: var(--ink-muted); opacity: 1; }

.tab-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.tabs { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1); }
.tab {
  flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-7); font-size: 0.85rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cls-select {
  font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-6);
}
.view-toggle { margin-bottom: var(--space-1); }

table.timetable {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
table.timetable th { text-align: left; color: var(--ink-muted); font-weight: 600; font-size: 0.74rem; padding: var(--space-5) var(--space-7); background: var(--surface-alt); }
table.timetable td { padding: var(--space-6) var(--space-7); border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
table.timetable tr.now td { background: var(--live-soft); }
table.timetable tr.now td:first-child { border-left: 3px solid var(--live); padding-left: var(--space-6); }
table.timetable td.subject { font-weight: 700; }
table.timetable tr.lunch td { color: var(--ink-muted); }
.now-tag {
  font-size: 0.68rem; font-weight: 700; color: var(--live); background: var(--live-soft);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); margin-left: var(--space-3); display: inline-block;
}

.week-scroll { overflow-x: auto; border-radius: var(--radius-lg); }
table.week-grid { min-width: 560px; font-size: 0.84rem; }
table.week-grid th { text-align: center; white-space: nowrap; }
table.week-grid td.subject { text-align: center; font-weight: 600; padding: var(--space-5) var(--space-4); }
table.week-grid th.today-col { color: var(--primary); }
table.week-grid td.today-col { background: var(--primary-soft); }
.week-badge { display: block; margin: var(--space-2) auto 0; width: fit-content; font-size: 0.62rem; padding: 1px var(--space-4); }

.state-box {
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-9); text-align: center; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.7;
}
.state-box.error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.state-box button {
  margin-top: var(--space-5); font-family: inherit; font-size: 0.85rem; font-weight: 700;
  background: var(--surface); border: 1px solid currentColor; color: inherit;
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-8); cursor: pointer;
}

.calendar-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5);
}
.calendar-summary-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%;
  background: none; border: none; font-family: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--ink); cursor: pointer; padding: 0; text-align: left;
}
.calendar-summary-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.calendar-toggle-icon { font-size: 0.76rem; font-weight: 700; color: var(--primary); flex: none; }
.calendar-row {
  display: flex; align-items: center; gap: var(--space-5); font-size: 0.86rem;
  padding-top: var(--space-5); border-top: 1px solid var(--border);
}
.calendar-row:first-of-type { padding-top: 0; border-top: none; }
.calendar-date { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-weight: 600; flex: none; width: 4.2em; }
.calendar-event { color: var(--ink); flex: 1; }
.badge {
  font-size: 0.72rem; font-weight: 700; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5); flex: none;
}
.badge-closure { background: var(--live-soft); color: var(--live); }
.badge-holiday { background: var(--surface-alt); color: var(--ink-muted); }

.footnote {
  margin-top: var(--space-12); font-size: 0.78rem; color: var(--ink-muted); line-height: 1.7;
  border-top: 1px solid var(--border); padding-top: var(--space-8);
}
.footnote a { color: var(--primary); }