/* 공용 디자인 토큰과 기본 컴포넌트 — 모든 화면이 base.css 하나만 필수로 불러온다 */
:root {
  --ink: #171a20; --ink-soft: #5c6472; --rule: #dde1e8; --surface: #fff; --bg: #f4f5f7;
  --brand: #2f6fed; --brand-deep: #1d4ed8; --on-brand: #fff; --danger: #d1453b;
  --radius: 10px; --tap-min: 44px;
  /* 시험·성적·출석·학생명부 화면이 함께 쓰는 확장 토큰 (v3 디자인 언어를 그대로 옮김) */
  --ink-faint: #8b93a1; --rule-soft: #eceef2; --sunk: #f1f3f6;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, "Segoe UI", sans-serif;
  --radius-sm: 6px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-up: 0 -2px 10px rgba(0,0,0,.07);
  --ok: #1f9254; --ok-tint: #e6f6ec; --accent: #a8720a; --accent-tint: #fbf1da;
  --brand-tint: #e8f0fe; --danger-tint: #fdecea;
}
* { box-sizing: border-box; }
/* icon() 헬퍼(partials/icons.php)가 내는 <svg class="ic">의 기본 크기.
   viewBox만 있고 width/height가 없는 SVG라 이 규칙이 없으면 브라우저 기본 크기(가로세로
   300x150 안팎)로 거대하게 뜬다 — 실제로 홈 화면 QR 카드의 "이 기기에서 열기" 버튼
   아이콘이 화면을 거의 다 채우는 사고가 있었다. .iconsq 안에서는 더 구체적인 크기로
   덮어쓴다. */
.ic { width: 1rem; height: 1rem; flex: 0 0 auto; vertical-align: -0.15em; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.5;
}
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 1.25rem;
}
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.field input {
  font: inherit; min-height: var(--tap-min); padding: 0 .8rem;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.field input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.btn {
  font: inherit; font-weight: 600; min-height: var(--tap-min); padding: 0 1.25rem;
  border-radius: 8px; border: 1px solid transparent; background: var(--brand); color: var(--on-brand);
  cursor: pointer; width: 100%;
}
.btn:hover { background: var(--brand-deep); }
.alert { padding: .7rem 1rem; border-radius: 8px; font-size: .9rem; margin-bottom: 1rem; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f3c8c4; }
.alert-note { background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--rule); }
.signup-back { margin: .9rem 0 0; text-align: center; font-size: .875rem; color: var(--ink-soft); }

/* ── 온보딩·계정·설정·구독 그룹이 쓰는 공용 부품 ─────────────
   여러 화면(setup·load·account·settings·subscribe)이 같은 낱말을 쓴다.
   화면마다 따로 정의하면 다음 라운드(커리큘럼·학습계획서·교재·시험/성적)도
   같은 것을 또 만들게 되므로 여기 base.css 에 둔다. */
:root {
  --ink-faint: #6b7185; --rule-soft: #eef0f4; --sunk: #f1f2f5;
  --brand-tint: #edeffe; --accent: #9a5b00; --accent-tint: #fdf1de;
  --ok: #067647; --ok-tint: #e3f5ec;
}
.field select, .field textarea {
  font: inherit; min-height: var(--tap-min); padding: .55rem .8rem;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 5rem; line-height: 1.55; resize: vertical; }
.field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .375rem; letter-spacing: -.015em; }
.page-sub { color: var(--ink-soft); margin: 0 0 1.5rem; max-width: 42rem; font-size: .9375rem; }
.pagehead, .hero {
  display: flex; gap: .75rem 1rem; align-items: flex-start; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--rule);
}
.pagehead .page-title, .pagehead .page-sub, .hero .page-title, .hero .page-sub { margin: 0; }
.pagehead > .ph-t, .hero > div:first-child { flex: 1 1 18rem; min-width: 0; }
h2.sec { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .75rem; }
.hint { font-size: .8125rem; color: var(--ink-faint); }
.fieldrow { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: start; }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.btn-quiet:hover { background: var(--bg); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #fdecea; }
.btn-sm { font-size: .8125rem; min-height: 34px; padding: .35rem .75rem; width: auto; }
.alert-note { background: var(--ok-tint); color: var(--ok); border: 1px solid #b7e4cc; }
.req { color: var(--danger); }
.formbar { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.25rem; }
.tbl-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--rule); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.tbl th, table.tbl td { padding: .6rem .75rem; text-align: left; }
table.tbl thead th {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); background: var(--sunk); border-bottom: 1px solid var(--rule);
}
table.tbl tbody td { border-top: 1px solid var(--rule-soft); }
table.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.picks { border: 1px solid var(--rule); border-radius: var(--radius); padding: .75rem 1rem; }
.picks legend { font-weight: 600; font-size: .875rem; padding: 0 .3rem; }
.pick { display: flex; align-items: flex-start; gap: .75rem; min-height: 44px; padding: .5rem .4rem; border-radius: 6px; cursor: pointer; }
.pick:hover { background: var(--brand-tint); }
.pick input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--brand); flex: 0 0 auto; }
.pick span { display: grid; gap: .1rem; }
.pick b { font-weight: 600; }
.pick em { font-style: normal; font-size: .8125rem; color: var(--ink-faint); }
.toggle { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1rem; padding: .55rem .4rem; border-radius: 6px; cursor: pointer; }
.toggle:hover { background: var(--brand-tint); }
.toggle input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--brand); flex: 0 0 auto; }
.toggle span { display: grid; gap: .1rem; }
.toggle em { font-style: normal; font-size: .8125rem; color: var(--ink-faint); }
.chip { display: inline-block; font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 100px; white-space: nowrap; }
.chip-on { background: var(--brand-tint); color: var(--brand); }
.num { font-variant-numeric: tabular-nums; }

/* ── 시험·성적·출석·학생명부 그룹이 추가로 쓰는 부품 (위 공용 부품과 겹치지 않는 것만) ── */
.ph-act, .hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.card.filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.card.empty { text-align: center; color: var(--ink-soft); }
a.btn, a.btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  text-decoration: none; width: auto; }
/* .formbar·.ph-act·.hero-actions 안의 <button class="btn"> 은 가로 버튼줄의 한 항목이라
   기본 .btn 의 width:100%(로그인처럼 단독 제출 버튼일 때 쓰는 값)를 걷어낸다. */
.formbar > button.btn, .ph-act > button.btn, .hero-actions > button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: auto;
}
.chip-off { background: var(--sunk); color: var(--ink-faint); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
.topbar-spacer { flex: 1 1 auto; }
.seg { border: 1px solid var(--rule); border-radius: 100px; overflow: hidden; }
.seg a { padding: .4rem .9rem; text-decoration: none; color: var(--ink-soft); font-size: .875rem;
  white-space: nowrap; }
.seg a.on { background: var(--brand); color: var(--on-brand); }