/* 이현 ON — 디자인 시스템 (원장 확정 시안 v0.1, 2026-09-18)
   ------------------------------------------------------------------
   쓰는 곳
   - 학부모·학생 앱(`app_base.html`): Pico 없이 **이 파일 하나로만** 그린다.
   - 교사·데스크(`teacher_base.html`·`base.html`): Pico 뒤에 얹는다. 토큰으로
     Pico 변수를 덮어써서 기존 화면도 같은 색·글꼴이 된다.

   규칙(원장 확정)
   - 색은 **상태에만** 쓴다. 브랜드·통과 = 민트, 지각·주의 = 골드, 미달·경고 = 코랄.
     그 밖은 흰색·연회색·글자색뿐이다.
   - 글꼴은 공유폴더 나눔스퀘어를 **self-host** 한다(운영 서버에서 외부 폰트 금지).
   - 클래스 이름: 새 컴포넌트는 `ih-` 접두사. 접두사 없는 이름(`card`·`badge`·`strip`…)은
     기존 화면이 이미 쓰던 것이라 **토큰만 갈아 끼운다**(화면을 다시 그리지 않아도 통일된다).
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------- 글꼴 */
@font-face {
  font-family: "NanumSquare";
  src: url("/static/fonts/NanumSquareR.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquare";
  src: url("/static/fonts/NanumSquareB.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquare";
  src: url("/static/fonts/NanumSquareEB.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- 토큰 */
:root {
  --mint: #6CB8AB;
  --mint-deep: #3E8F82;
  --mint-tint: #E9F4F1;
  --mint-ink: #245E56;
  --ink: #27332F;
  --muted: #66716E;
  --line: #D9E4E0;
  --ground: #F5F9F7;
  --card: #FFFFFF;
  --coral: #E4705F;
  --coral-tint: #FBE9E5;
  --coral-ink: #8C3226;
  --gold: #D9A93B;
  --gold-tint: #FBF2DC;
  --gold-ink: #8A6A14;
  --on-mint: #FFFFFF;

  --shadow: 0 1px 2px rgba(39, 51, 47, .06), 0 8px 24px rgba(39, 51, 47, .06);
  --shadow-sm: 0 1px 2px rgba(39, 51, 47, .08);

  /* 제목은 굵은 각진 고딕, 본문도 같은 가족을 쓰되 시스템 고딕으로 흘린다. */
  /* 끝의 기호 글꼴은 나눔스퀘어에 없는 문자(⋮ 같은 것)를 대신 그린다. */
  --font-head: "NanumSquare", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
               "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
  --font-body: "NanumSquare", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
               "Segoe UI Symbol", "Apple Color Emoji", sans-serif;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* 손가락 크기(교사가 복도에서 폰으로 누른다). */
  --touch: 44px;

  --fs-display: 38px;
  --fs-h1: 20px;
  --fs-h2: 17px;
  --fs-h3: 14px;
  --fs-base: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;
}

/* 다크 모드 — 시안 토큰 그대로. `data-theme="light"` 를 박아 둔 화면(Pico 쓰는
   데스크·교사)은 밝게 고정되고, 속성이 없는 학부모 앱만 기기 설정을 따른다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mint: #7CC6B9;
    --mint-deep: #8FD3C7;
    --mint-tint: #1E312D;
    --mint-ink: #BFE6DD;
    --ink: #E8EFEC;
    --muted: #9AA8A3;
    --line: #2E3D39;
    --ground: #131A18;
    --card: #1B2422;
    --coral: #F08A7B;
    --coral-tint: #3A2521;
    --coral-ink: #F5B7AD;
    --gold: #E6BC5A;
    --gold-tint: #3A3020;
    --gold-ink: #E6BC5A;
    --on-mint: #10201D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --mint: #7CC6B9;
  --mint-deep: #8FD3C7;
  --mint-tint: #1E312D;
  --mint-ink: #BFE6DD;
  --ink: #E8EFEC;
  --muted: #9AA8A3;
  --line: #2E3D39;
  --ground: #131A18;
  --card: #1B2422;
  --coral: #F08A7B;
  --coral-tint: #3A2521;
  --coral-ink: #F5B7AD;
  --gold: #E6BC5A;
  --gold-tint: #3A3020;
  --gold-ink: #E6BC5A;
  --on-mint: #10201D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------- Pico 다리
   Pico 를 쓰는 화면(데스크·교사)도 같은 색·글꼴·모서리를 쓰게 한다.
   Pico 뒤에 이 파일을 불러야 한다.

   선택자를 `:root` 하나로 두면 **Pico 가 이긴다** — Pico 는 색을
   `:root:not([data-theme=dark])`(명시도 0,2,0)로 정의하기 때문이다. 같은 모양으로
   맞춰야 나중에 불린 이 파일이 이긴다(안 그러면 단추가 Pico 파랑으로 남는다). */
:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  --pico-font-family: var(--font-body);
  --pico-font-family-sans-serif: var(--font-body);
  --pico-border-radius: var(--r);
  --pico-primary: var(--mint-deep);
  --pico-primary-hover: var(--mint-ink);
  --pico-primary-focus: rgba(108, 184, 171, .35);
  --pico-primary-background: var(--mint);
  --pico-primary-hover-background: var(--mint-deep);
  --pico-primary-underline: rgba(62, 143, 130, .4);
  --pico-primary-inverse: #fff;
  --pico-primary-border: var(--mint);
  --pico-secondary: var(--muted);
  --pico-secondary-background: var(--muted);
  --pico-secondary-border: var(--line);
  --pico-color: var(--ink);
  --pico-h1-color: var(--ink);
  --pico-h2-color: var(--ink);
  --pico-h3-color: var(--ink);
  --pico-h4-color: var(--ink);
  --pico-h5-color: var(--ink);
  --pico-h6-color: var(--ink);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--line);
  --pico-background-color: var(--ground);
  --pico-card-background-color: var(--card);
  --pico-card-border-color: var(--line);
  --pico-form-element-background-color: var(--card);
  --pico-form-element-border-color: var(--line);
  --pico-form-element-color: var(--ink);
  --pico-form-element-active-border-color: var(--mint);
  --pico-form-element-focus-color: var(--mint);
  --pico-table-border-color: var(--line);
  --pico-mark-background-color: var(--mint-tint);
  --pico-blockquote-border-color: var(--mint);
}

/* ---------------------------------------------------------------- 밑바탕 */
.ih-plain *,
.ih-plain *::before,
.ih-plain *::after { box-sizing: border-box; }

/* `.ih-plain` = Pico 없이 이 파일만으로 그리는 화면(학부모·학생 앱). */
body.ih-plain {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
.ih-plain h1, .ih-plain h2, .ih-plain h3, .ih-plain h4 {
  font-family: var(--font-head);
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}
.ih-plain h1 { font-size: var(--fs-h1); font-weight: 800; }
.ih-plain h2 { font-size: var(--fs-h2); font-weight: 700; }
.ih-plain h3 { font-size: var(--fs-h3); font-weight: 700; }
.ih-plain p { margin: 0 0 10px; }
.ih-plain a { color: var(--mint-deep); text-decoration: none; font-weight: 600; }
.ih-plain a:hover { text-decoration: underline; }
.ih-plain ol, .ih-plain ul { padding-left: 1.2rem; margin: 0 0 10px; }
.ih-plain li { margin-bottom: 6px; }
.ih-plain hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.ih-plain code { background: var(--mint-tint); border-radius: 6px; padding: 1px 5px; font-size: .9em; }

/* 제목 글꼴은 Pico 화면에서도 같이 쓴다. */
h1, h2, h3, h4, legend { font-family: var(--font-head); }

/* ---------------------------------------------------------------- 공통 유틸 */
.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.ih-eyebrow {
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; color: var(--mint-deep); text-transform: uppercase;
}
.ih-num { font-variant-numeric: tabular-nums; }
.ih-stack { display: grid; gap: 10px; }
.ih-hide { display: none !important; }

/* ---------------------------------------------------------------- 앱바 */
.ih-appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.ih-appbar .ih-logo { height: 22px; width: auto; display: block; }
.ih-appbar .ih-who { font-size: var(--fs-xs); color: var(--muted); }
.ih-appbar form { margin: 0; }
.ih-linkback {
  font-size: var(--fs-sm); color: var(--mint-deep); font-weight: 700;
  background: none; border: 0; padding: 0; cursor: pointer;
}

/* ---------------------------------------------------------------- 탭 */
.ih-tabs {
  display: flex; gap: 4px; background: var(--mint-tint);
  padding: 4px; border-radius: var(--r);
}
.ih-tabs a {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 9px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--mint-ink);
  text-decoration: none; white-space: nowrap; min-height: var(--touch);
  display: flex; align-items: center; justify-content: center;
}
.ih-tabs a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.ih-tabs a:hover { text-decoration: none; }

/* ---------------------------------------------------------------- 인사말 */
.ih-hello { display: grid; gap: 2px; }
.ih-hello .day { font-size: var(--fs-xs); color: var(--muted); }
.ih-hello h1, .ih-hello h2 { font-size: var(--fs-h1); font-weight: 800; }

/* ---------------------------------------------------------------- 카드 */
.card,
.ih-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ih-card { display: grid; gap: 10px; margin-bottom: 0; }
.ih-card.mint { background: var(--mint-tint); border-color: transparent; }
.ih-card > h3, .card > h3 { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 4px; }
.ih-card .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ih-card .t h3, .ih-card .t h4 { font-size: var(--fs-h3); font-weight: 700; margin: 0; }
.ih-card .t small { font-size: var(--fs-xs); color: var(--muted); }

/* ---------------------------------------------------------------- 점수 */
.ih-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ih-score b {
  font-family: var(--font-head); font-size: var(--fs-display); font-weight: 800;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--mint-ink);
}
.ih-score .unit { font-size: var(--fs-xs); color: var(--muted); }
.ih-score .ih-pill { margin-left: auto; }

/* ---------------------------------------------------------------- 필(pill) */
.ih-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.ih-pill.pass { background: var(--mint); color: var(--on-mint); }
.ih-pill.fail { background: var(--coral-tint); color: var(--coral-ink); }
.ih-pill.late { background: var(--gold-tint); color: var(--gold-ink); }
.ih-pill.ghost { background: var(--card); border: 1px solid var(--line); color: var(--muted); font-weight: 600; }

/* 기존 화면이 쓰는 `.badge` 도 같은 규격으로 갈아 끼운다. */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
}
.badge.ok { background: var(--mint); border-color: var(--mint); color: var(--on-mint); }
.badge.warn { background: var(--gold-tint); border-color: var(--gold-tint); color: var(--gold-ink); }
.badge.bad { background: var(--coral-tint); border-color: var(--coral-tint); color: var(--coral-ink); }
.badge.pilot { background: var(--mint-tint); border-color: var(--mint-tint); color: var(--mint-ink); }

/* ---------------------------------------------------------------- 줄(목록 행) */
.ih-list { display: grid; gap: 8px; }
.ih-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); text-decoration: none; color: inherit;
}
a.ih-row:hover { border-color: var(--mint); text-decoration: none; }
.ih-row .l { display: grid; gap: 2px; min-width: 0; }
.ih-row .l b { font-size: var(--fs-h3); font-weight: 700; }
.ih-row .l small { color: var(--muted); font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- 단추 */
.ih-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 11px 16px; border-radius: var(--r);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--card); color: var(--ink);
}
.ih-btn.primary { background: var(--mint); color: var(--on-mint); }
.ih-btn.primary:hover { background: var(--mint-deep); }
.ih-btn.quiet { background: var(--card); border-color: var(--line); color: var(--ink); }
.ih-btn.quiet:hover { border-color: var(--mint); }
.ih-btn.block { width: 100%; }
.ih-btn:hover { text-decoration: none; }
.ih-btn[disabled] { opacity: .5; cursor: default; }

/* Pico 화면의 `a.btn`·`button.btn` 도 손가락 크기를 지킨다. */
a.btn, button.btn { min-height: var(--touch); border-radius: var(--r); }

/* ---------------------------------------------------------------- 폼 */
/* `.field` 는 커리큘럼 화면(WP 2-11)이 쓰는 같은 컴포넌트다 — 이름만 둘이다. */
.ih-field, .field { display: grid; gap: 6px; margin-bottom: 12px; }
.ih-field > label, .field > span, .ih-label {
  font-size: var(--fs-xs); color: var(--muted); font-weight: 700;
}
.field > input, .field > select, .field > textarea { margin-bottom: 0; }
/* 자료 한 줄(커리큘럼 카드 안). 시안의 `.ih-row` 보다 가볍게 — 선 하나로 나눈다. */
.card > .row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-h3);
}
.card > .row form button { padding: 4px 8px; min-height: 32px; font-size: 12px; margin: 0; }
.ih-plain input[type="text"],
.ih-plain input[type="password"],
.ih-plain input[type="tel"],
.ih-plain input[type="email"],
.ih-plain input[type="date"],
.ih-plain input[type="number"],
.ih-plain select,
.ih-plain textarea {
  width: 100%; min-height: var(--touch);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px 14px; background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-h3); line-height: 1.4;
}
.ih-plain input:focus, .ih-plain select:focus, .ih-plain textarea:focus {
  outline: 0; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(108, 184, 171, .25);
}
.ih-plain input::placeholder, .ih-plain textarea::placeholder { color: var(--muted); }
.ih-plain form label {
  display: block; font-size: var(--fs-xs); color: var(--muted);
  font-weight: 700; margin-bottom: 12px;
}
.ih-plain form label > input,
.ih-plain form label > select,
.ih-plain form label > textarea { margin-top: 6px; }
.ih-plain fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; margin: 0 0 12px; }
.ih-plain legend { font-size: var(--fs-h3); font-weight: 700; padding: 0 6px; }
.ih-plain label.check {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 8px; font-size: var(--fs-h3); line-height: 1.45;
}
.ih-plain label.check input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--mint); }
.ih-plain button { font-family: var(--font-head); }

/* ---------------------------------------------------------------- 표(키-값) */
.ih-kv { display: grid; grid-template-columns: 84px 1fr; gap: 8px 12px; font-size: var(--fs-h3); margin: 0; }
.ih-kv dt { color: var(--muted); margin: 0; }
.ih-kv dd { margin: 0; }

/* ---------------------------------------------------------------- 말풍선 */
.ih-quote {
  border-left: 3px solid var(--mint); padding: 8px 12px;
  background: var(--mint-tint); border-radius: 0 10px 10px 0; font-size: var(--fs-h3);
}
.ih-quote b { display: block; font-size: var(--fs-xs); color: var(--mint-ink); margin-bottom: 2px; }

/* ---------------------------------------------------------------- 안내 띠 */
.ih-banner, .banner {
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 10px;
  display: grid; gap: 4px;
}
.ih-banner strong, .banner strong { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); }
.ih-banner .muted, .banner .muted { font-size: var(--fs-xs); }
.ih-banner.info, .banner.paused { background: var(--mint-tint); border-color: transparent; }
.ih-banner.warn, .banner:not(.paused):not(.info) { background: var(--gold-tint); border-color: transparent; color: var(--gold-ink); }
.ih-banner .ih-btn, .banner a.btn { justify-self: start; margin-top: 4px; }
.warn-line {
  background: var(--gold-tint); border: 1px solid transparent; color: var(--gold-ink);
  border-radius: var(--r); padding: 8px 12px; margin: 8px 0; font-size: var(--fs-h3);
}
.soft {
  background: var(--coral-tint); color: var(--coral-ink);
  border-radius: var(--r); padding: 10px 12px; margin: 10px 0; font-size: var(--fs-h3);
}

/* ---------------------------------------------------------------- 숫자 타일 */
.ih-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ih-stat, .strip .cell {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; display: grid; gap: 2px;
}
.ih-stat small, .strip .cell .muted { font-size: var(--fs-2xs); color: var(--muted); }
.ih-stat b, .strip .cell b {
  font-family: var(--font-head); font-size: var(--fs-h1); font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.2; display: block;
}
.strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.strip .cell { flex: 1 1 7rem; }

.ih-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ih-tile {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  display: grid; gap: 4px; background: var(--card);
}
.ih-tile small { font-size: var(--fs-xs); color: var(--muted); }
.ih-tile b {
  font-family: var(--font-head); font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.ih-tile .d { font-size: var(--fs-xs); color: var(--mint-deep); font-weight: 700; }
.ih-tile.warn .d { color: var(--coral); }

/* 두 칸 배치(넓은 패널 + 좁은 패널). 좁아지면 한 줄로 내려온다. */
.ih-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
@media (max-width: 860px) { .ih-two { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 표 */
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ih-plain table { width: 100%; font-size: var(--fs-sm); }
.ih-plain th {
  text-align: left; font-weight: 700; color: var(--muted);
  font-size: var(--fs-2xs); letter-spacing: .04em; padding: 6px; border-bottom: 1px solid var(--line);
}
.ih-plain td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ih-plain tr:last-child td { border-bottom: 0; }
.ih-panel {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  display: grid; gap: 10px; background: var(--card);
}
.ih-panel h2, .ih-panel h3 {
  font-size: var(--fs-h3); font-weight: 700; margin: 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.ih-panel h2 small, .ih-panel h3 small { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }
.ih-panel table { width: 100%; font-size: var(--fs-sm); }
.ih-panel th { text-align: left; font-weight: 700; color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .04em; padding: 6px; border-bottom: 1px solid var(--line); }
.ih-panel td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ih-panel tr:last-child td { border-bottom: 0; }
.alert-row { background: var(--coral-tint); }

/* 표는 좁은 폰에서 상자만 가로로 민다(글자가 세로로 쪼개지지 않게). */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 14px; }
.tablewrap > table { margin-bottom: 0; }

/* ---------------------------------------------------------------- 교사 그리드 */
.ih-grid {
  display: grid; gap: 0; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; background: var(--card);
}
.ih-dot {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: var(--fs-2xs); font-weight: 700; border: 1px solid var(--line);
  background: var(--card); color: var(--muted);
}
.ih-dot.ok { background: var(--mint); color: var(--on-mint); border-color: var(--mint); }
.ih-dot.no { background: var(--coral-tint); color: var(--coral-ink); border-color: var(--coral-tint); }
.ih-dot.mid { background: var(--gold-tint); color: var(--gold-ink); border-color: var(--gold-tint); }

/* ---------------------------------------------------------------- 데스크 뼈대 */
.ih-shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.ih-side {
  background: var(--mint-tint); padding: 18px 14px; display: grid; gap: 4px;
  align-content: start; border-right: 1px solid var(--line);
}
.ih-side .ih-logo { height: 20px; width: auto; margin: 4px 6px 14px; }
.ih-side a {
  display: block; padding: 10px 12px; border-radius: 10px;
  font-size: var(--fs-h3); color: var(--mint-ink); font-weight: 700; text-decoration: none;
}
.ih-side a:hover { background: rgba(255, 255, 255, .5); text-decoration: none; }
.ih-side a.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.ih-side .ih-sidefoot { margin-top: 14px; padding: 0 6px; display: grid; gap: 6px; font-size: var(--fs-xs); }
.ih-side .ih-sidefoot form { margin: 0; }
.ih-side .ih-sidefoot button {
  width: 100%; margin: 0; padding: 8px 10px; font-size: var(--fs-xs);
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
}
.ih-main { padding: 22px 26px 48px; background: var(--ground); min-width: 0; }
.ih-main > h1 { font-size: 22px; font-weight: 800; margin: 0 0 14px; }
.ih-topline {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
@media (max-width: 860px) {
  .ih-shell { grid-template-columns: 1fr; }
  .ih-side {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .ih-side .ih-logo { flex: 1 0 100%; margin: 2px 0 8px; }
  .ih-side .ih-sidefoot { flex: 1 0 100%; margin-top: 6px; grid-auto-flow: column; justify-content: start; align-items: center; }
  .ih-side .ih-sidefoot button { width: auto; }
  .ih-main { padding: 16px 14px 40px; }
}

/* ---------------------------------------------------------------- 학부모 앱 뼈대 */
.ih-app { max-width: 560px; margin: 0 auto; padding: 14px 16px 40px; display: grid; gap: 14px; align-content: start; }
.ih-app > h1 { margin: 0; }

/* 로그인·가입처럼 가운데로 모으는 화면. */
.ih-auth { max-width: 420px; margin: 0 auto; padding: 32px 16px 48px; display: grid; gap: 20px; justify-items: center; text-align: center; }
.ih-auth .ih-mark { height: 64px; width: auto; }
.ih-auth .ih-logo { height: 30px; width: auto; }
.ih-auth h1 { font-size: 22px; font-weight: 800; margin: 0; }
.ih-auth .sub { font-size: var(--fs-sm); color: var(--muted); margin: 4px 0 0; }
.ih-auth form, .ih-auth .ih-form { width: 100%; display: grid; gap: 12px; text-align: left; }
/* grid gap 이 간격을 맡는다 — 칸마다의 아래 여백은 빼서 두 번 벌어지지 않게 한다. */
.ih-auth form .ih-field, .ih-auth .ih-form .ih-field { margin-bottom: 0; }
.ih-auth .ih-err {
  width: 100%; background: var(--coral-tint); color: var(--coral-ink);
  border-radius: var(--r); padding: 10px 12px; font-size: var(--fs-sm); text-align: left;
}

/* ---------------------------------------------------------------- 로고 전환
   가로 로고는 두 벌이다 — 흰 바탕용(logo-h.png)과 민트/어두운 바탕용(logo-h-white.png).
   화면에는 둘 다 넣고 테마에 맞는 쪽만 보인다. */
.ih-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ih-logo-light { display: none; }
  :root:not([data-theme="light"]) .ih-logo-dark { display: block; }
}
:root[data-theme="dark"] .ih-logo-light { display: none; }
:root[data-theme="dark"] .ih-logo-dark { display: block; }

/* ---------------------------------------------------------------- 접근성 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}