/*
 * 고교 분석 리포트 공통 스타일 — 원장 화면(index.html)과 학생 공유 화면(material.html)이 함께 쓴다.
 * 예전에는 index.html 안에만 있어서, 링크로 받아 본 학생 화면은 113개 클래스 중 105개가
 * 스타일 없이 나왔다(2026-08-16 확인 — "그냥 나열식이라 눈에 안 읽힌다").
 * 마크업은 app.js 가 만들므로 클래스 이름을 바꾸면 두 화면이 같이 무너진다.
 *
 * 아래 색 이름은 각 화면이 자기 값을 쓴다. 여기 값은 그 화면에 없는 이름만 채우는 기본값이다.
 * (두 화면 모두 이 파일 뒤에서 자기 :root 를 정의하므로 그쪽이 이긴다)
 */
:root {
  --line: #e5eaf2; --line-strong: #b6c5d4; --card: #ffffff; --card2: #f2f5fa;
  --text: #0d1b2e; --muted: #52627a; --mid: #52627a;
  --accent: #4c60e7; --accent-text: #3a4ed0; --accent-soft: #eef0ff; --accent-line: #c9d2ff;
}

      /* 고교 분석 (학교알리미 공시자료) */
      .si-actions { display: flex; gap: 6px; }
      .si-actions button { font-size: 11.5px; padding: 3px 10px; }
      .si-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
        padding-bottom: 12px; border-bottom: 2px solid var(--accent-text, #1f2a44); margin-bottom: 12px; }
      .si-school { font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -0.02em; }
      .si-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
      .si-year { background: var(--accent-soft); color: var(--accent-text); border-radius: 6px;
        padding: 4px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
      .si-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px;
        font-size: 13px; color: var(--text); margin-bottom: 16px; }
      .si-info b { color: var(--muted); font-weight: 700; margin-right: 6px; }
      .si-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
      .si-tile { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: var(--card2); }
      .si-tile-label { font-size: 11.5px; color: var(--muted); font-weight: 700; }
      .si-tile-value { font-size: 21px; font-weight: 900; color: var(--text); margin-top: 3px; letter-spacing: -0.02em; }
      .si-tile-value .si-unit { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 3px; }
      .si-tile-note { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
      .si-h3 { font-size: 15px; font-weight: 800; margin: 22px 0 10px; color: var(--text); }
      .si-bars { display: flex; flex-direction: column; gap: 7px; max-width: 520px; }
      .si-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
      .si-bar-label { flex: 0 0 48px; color: var(--muted); font-weight: 700; }
      .si-bar-track { flex: 1 1 auto; height: 16px; background: var(--card2); border: 1px solid var(--line);
        border-radius: 8px; overflow: hidden; }
      .si-bar-fill { display: block; height: 100%; background: var(--accent-text); border-radius: 8px; }
      .si-bar-value { flex: 0 0 62px; text-align: right; font-weight: 800; color: var(--text); }
      .si-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
      .si-table th, .si-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
      .si-table th { background: var(--card2); color: var(--muted); font-weight: 700; }
      .si-table td:first-child, .si-table th:first-child { white-space: nowrap; }
      .si-memo { white-space: pre-wrap; font-size: 13px; line-height: 1.7; color: var(--text); }

      /* 번호 붙은 섹션 */
      .si-sec { margin-top: 24px; }
      .si-sec-head { display: flex; align-items: baseline; gap: 9px; padding-bottom: 7px;
        border-bottom: 1px solid var(--accent-text); margin-bottom: 12px; }
      .si-sec-no { font-size: 11px; font-weight: 900; color: #fff; background: var(--accent-text);
        border-radius: 4px; padding: 2px 6px; letter-spacing: 0.04em; }
      .si-sec-title { font-size: 15.5px; font-weight: 800; color: var(--text); }
      .si-sec-en { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.12em; }
      .si-h4 { font-size: 13px; font-weight: 800; color: var(--accent-text); margin: 16px 0 7px; }
      .si-sec .si-h4:first-child { margin-top: 0; }
      .si-facts { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
      .si-facts > div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
      .si-fact-k { flex: 0 0 148px; color: var(--muted); font-weight: 700; font-size: 12.5px; }
      .si-fact-v { flex: 1 1 auto; color: var(--text); }
      .si-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
      .si-chips { display: flex; flex-wrap: wrap; gap: 6px; }
      .si-chip { font-size: 11.5px; font-weight: 700; border-radius: 5px; padding: 3px 9px;
        background: var(--card2); border: 1px solid var(--line); color: var(--muted); }
      .si-chip.ok { background: var(--accent-soft); border-color: var(--accent-text); color: var(--accent-text); }
      .si-chip a { color: inherit; text-decoration: underline; font-weight: 400; }

      /* 공시 첨부자료에서 뽑아낸 부분 */
      .si-vision { font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--text);
        padding: 12px 14px; border-left: 3px solid var(--accent-text); background: var(--card2); border-radius: 0 8px 8px 0; }
      .si-prog { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
      .si-prog-item { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--card2); font-size: 12.5px; }
      .si-prog-item b { display: block; color: var(--text); font-size: 13px; margin-bottom: 3px; }
      .si-prog-item span { color: var(--muted); line-height: 1.5; }
      .si-subj { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--card2); }
      .si-subj-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
      .si-subj-head b { font-size: 13.5px; color: var(--text); }
      .si-ratio { font-size: 11.5px; font-weight: 700; color: var(--accent-text);
        background: var(--accent-soft); border-radius: 4px; padding: 1px 7px; }
      /* 수행평가 항목 목록은 .hs-items / .hs-item 으로 옮겼다 (이 파일 아래쪽 "고교 분석 리포트" 구역) */

      .si-source { margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--line);
        font-size: 11.5px; color: var(--muted); }
      .si-ach-row { gap: 6px; margin-bottom: 6px; }

    /* ══════════════════════════════════════════════════════════════════════
       고교 분석 (schoolinfo) — 2026-08-15 시안 개편
       접두사는 전부 .hs- 로 통일. 마크업 일부는 app.js 가 만들어 넣으므로
       클래스 이름을 바꾸면 리포트가 무너진다.
       색은 최대한 테마 변수(--card/--line/--text/--muted/--accent…)를 쓰고,
       "의도적으로 고정"인 것만 하드코딩한다:
         · 선택 카드의 다크 네이비 + 금색 버튼
         · 성취도 A~E 막대·범례 색 (자료의 의미를 나타내는 색이라 테마와 무관)
       ══════════════════════════════════════════════════════════════════ */

    /* ── 탭 머리말 ── */
    .hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 2px 0 16px; }
    .hs-head-main h2 { font-size: 25px; letter-spacing: -.06em; margin: 0 0 6px; }
    .hs-head-main p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.65; max-width: 760px; }
    .hs-head-note { text-align: right; font-size: 11.5px; line-height: 1.6; max-width: 320px; }
    .hs-head-note b { display: block; color: var(--accent-text); }
    .hs-head-note span { color: var(--muted); }

    /* ── 선택 카드 (다크 네이비 고정) ── */
    .hs-select-card {
      background: linear-gradient(115deg, #0c1b32, #1b3b68);
      border-radius: 18px; color: #fff; padding: 22px 26px;
      display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
      box-shadow: 0 15px 32px rgba(11, 25, 48, .22);
    }
    .hs-select-main { min-width: 0; }
    .hs-select-card .hs-eyebrow { color: #e9c973; }
    .hs-select-card h3 { margin: 5px 0 5px; font-size: 18.5px; color: #fff; letter-spacing: -.04em; }
    .hs-select-card > .hs-select-main > p { margin: 0 0 14px; color: #b8c5d9; font-size: 11.5px; line-height: 1.6; }
    .hs-select-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .hs-select-row select {
      border: 1px solid transparent; background: #fff; color: #0d1b2e;
      border-radius: 9px; padding: 10px 12px; min-width: 148px; font: inherit; outline: 0;
    }
    .hs-select-row select:disabled { background: #dfe5ee; color: #7d8899; cursor: not-allowed; }
    .hs-select-row select:focus { border-color: #e9c973; box-shadow: none; }
    .hs-select-row #siSido { flex: 0 0 158px; }
    .hs-select-row #siSgg { flex: 0 0 176px; }
    .hs-select-row #siSchool { flex: 1 1 250px; }
    .hs-select-row button {
      border: 0; border-radius: 9px; background: #d7b46a; color: #0c1a30;
      padding: 10px 18px; font: inherit; font-weight: 800; cursor: pointer;
    }
    .hs-select-row button:hover:not(:disabled) { background: #e2c37e; }
    .hs-select-row button:disabled { background: #6d7d95; color: #ccd6e4; cursor: not-allowed; opacity: 1; }
    .hs-select-status { margin-top: 9px; font-size: 11.5px; color: #aebbd0; min-height: 1em; }
    .hs-select-aside { text-align: right; }
    .hs-select-aside strong { display: block; font-size: 24px; color: #fff; letter-spacing: -.03em; }
    .hs-select-aside span { font-size: 11px; color: #aebbd0; }

    /* ── 6칸 지표 카드 ── */
    .hs-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
    .hs-metric {
      background: var(--card); border: 1px solid var(--line); border-radius: 14px;
      padding: 15px; min-width: 0;
    }
    .hs-metric small { display: block; color: var(--muted); font-size: 10.5px; }
    .hs-metric strong { display: block; font-size: 22px; margin: 4px 0 2px; letter-spacing: -.04em; color: var(--text); }
    .hs-metric em { font-size: 10.5px; color: var(--muted); font-style: normal; }
    .hs-metric.accent strong { color: var(--accent-text); }

    /* ── 구역 제목 ── */
    .hs-section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 24px 0 11px; }
    .hs-section-title h3 { font-size: 16.5px; margin: 0; letter-spacing: -.05em; }
    .hs-section-title span { font-size: 11.5px; color: var(--muted); }

    /* ── 흰 패널 ── */
    .hs-panel {
      background: var(--card); border: 1px solid var(--line); border-radius: 16px;
      padding: 19px 20px; min-width: 0;
    }
    .hs-panel + .hs-panel { margin-top: 12px; }
    .hs-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
    .hs-panel-head h3 { font-size: 15.5px; margin: 3px 0 0; letter-spacing: -.05em; }
    .hs-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--accent-text); }

    /* ── 좌우 정렬 통계 행 ── */
    .hs-stat-row {
      display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
      padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted);
    }
    .hs-stat-row:last-child { border-bottom: 0; padding-bottom: 0; }
    .hs-stat-row b { font-size: 12.5px; color: var(--text); text-align: right; }

    /* ── 특색 프로그램 2열 ── */
    .hs-programs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .hs-program { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: var(--card2); min-width: 0; }
    .hs-program b { display: block; font-size: 11.5px; color: var(--text); }
    .hs-program span { display: block; color: var(--muted); font-size: 10.5px; margin-top: 3px; line-height: 1.5; }

    /* ── 성취도 설명 박스 ── */
    .hs-ach-intro {
      background: var(--mid-bg); border: 1px solid var(--mid-line); border-radius: 14px;
      padding: 15px 17px; display: flex; gap: 13px; align-items: flex-start;
    }
    .hs-help {
      width: 31px; height: 31px; border-radius: 50%; background: #d7b46a; color: #0c1a30;
      display: grid; place-items: center; font-weight: 900; flex: none; font-size: 15px;
    }
    .hs-ach-intro strong { font-size: 12.5px; color: var(--text); line-height: 1.55; }
    .hs-ach-intro p { margin: 5px 0 0; color: var(--mid); font-size: 11.5px; line-height: 1.6; }

    /* ── A~E 범례 (색 고정: 막대 색과 짝을 이룬다) ── */
    .hs-legend { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
    .hs-legend span { border-radius: 999px; padding: 5px 9px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
    .hs-legend span.a { background: #dce6ff; color: #3658c9; }
    .hs-legend span.b { background: #e3f6e9; color: #23805a; }
    .hs-legend span.c { background: #fff2d6; color: #9a6a18; }
    .hs-legend span.d { background: #ffe8de; color: #bb633d; }
    .hs-legend span.e { background: #f5e4eb; color: #9c5271; }

    /* ── 학년 / 학기 탭 ── */
    .hs-grade-tabs { display: flex; gap: 8px; margin: 16px 0 12px; flex-wrap: wrap; }
    .hs-grade-tab {
      border: 1px solid var(--line); background: var(--card); border-radius: 11px;
      padding: 10px 22px; color: var(--muted); font-weight: 800; font-size: 13px; cursor: pointer;
    }
    .hs-grade-tab:hover { border-color: var(--accent-line); color: var(--text); }
    .hs-grade-tab.on { border-color: var(--accent); background: var(--accent); color: var(--btn-fg); }
    .hs-sem-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
    .hs-sem-tab {
      border: 1px solid transparent; background: var(--card2); color: var(--muted);
      border-radius: 8px; padding: 7px 13px; font-size: 11.5px; font-weight: 800; cursor: pointer;
    }
    .hs-sem-tab:hover { color: var(--text); }
    .hs-sem-tab.on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-line); }

    /* 성취도 구역 전체 래퍼 */
    .hs-ach { margin-top: 2px; }

    /* 학년별·학기별 묶음 — 숨김은 hidden 속성으로 (app.js) */
    .hs-ach-pane[hidden], .hs-sem-pane[hidden] { display: none; }
    /* 학기별 표 위 제목 — 예: "고1 · 1학기 과목별 성취도 20과목" */
    .hs-pane-title {
      display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
      font-size: 14px; font-weight: 800; color: var(--text); margin: 2px 0 11px;
    }
    .hs-pane-title span { font-size: 11px; font-weight: 400; color: var(--muted); }

    /* ── 성취도 표 ── */
    .hs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hs-ach-table { width: 100%; border-collapse: collapse; min-width: 620px; }
    .hs-ach-table th, .hs-ach-table td {
      padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left;
      font-size: 11.5px; vertical-align: middle; color: var(--text);
    }
    .hs-ach-table th { color: var(--muted); background: var(--card2); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
    .hs-ach-table tbody tr:last-child td { border-bottom: 0; }
    /* 칸과 칸 사이 세로 구분선 — 과목·평균·분포·해석이 눈으로 확실히 갈리도록 */
    .hs-ach-table th + th, .hs-ach-table td + td { border-left: 1px solid var(--line); }
    .hs-ach-table tbody tr:hover td { background: var(--card2); }
    /* 아래 세 줄은 클래스를 두 개 겹쳐 써야 한다 — `.hs-ach-table td`(클래스1+요소1)보다
       우선순위가 높아야 색이 먹는다 */
    .hs-subject, .hs-ach-table .hs-subject { font-weight: 800; white-space: nowrap; }
    .hs-average, .hs-ach-table .hs-average { color: var(--accent-text); font-weight: 800; white-space: nowrap; }

    /* 누적 가로 막대 — 색 고정 */
    .hs-stack { display: flex; height: 14px; min-width: 140px; border-radius: 999px; overflow: hidden; background: var(--card2); }
    .hs-stack i { display: block; height: 100%; }
    .hs-stack i.sa { background: #6c81ff; }
    .hs-stack i.sb { background: #72c49d; }
    .hs-stack i.sc { background: #efc872; }
    .hs-stack i.sd { background: #ea9979; }
    .hs-stack i.se { background: #bc7898; }
    .hs-percent { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
    .hs-na, .hs-ach-table .hs-na { color: var(--muted); opacity: .75; font-size: 10.5px; }

    /* ── 해석 카드 3칸 ── */
    .hs-interpret { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
    .hs-interpret > div { padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--card2); min-width: 0; }
    .hs-interpret b { display: block; font-size: 11.5px; margin-bottom: 4px; color: var(--text); }
    .hs-interpret span { font-size: 10.5px; color: var(--muted); line-height: 1.55; }

    /* 성취도 입력 박스의 "직접 넣기" 접이식 */
    #siNotesBox details.si-manual { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; }
    #siNotesBox details.si-manual > summary { cursor: pointer; font-weight: 800; font-size: 13px; color: var(--text); list-style: none; }
    #siNotesBox details.si-manual > summary::-webkit-details-marker { display: none; }
    #siNotesBox details.si-manual > summary::before { content: "▸ "; color: var(--muted); }
    #siNotesBox details.si-manual[open] > summary::before { content: "▾ "; }

    /* ── 맨 아래 주석 ── */
    .hs-note {
      margin-top: 14px; background: var(--card); border: 1px solid var(--line);
      border-radius: 14px; padding: 14px 15px; color: var(--muted); font-size: 11px; line-height: 1.65;
    }

    /* ── 인쇄: 학년 탭은 감추고 고1·고2·고3을 모두 펼쳐서 찍는다 ── */
    body.print-mode .hs-grade-tabs, body.print-mode .hs-sem-tabs,
    body.print-mode .hs-select-card { display: none !important; }
    body.print-mode .hs-ach-pane[hidden] { display: block !important; }
    @media print {
      .hs-grade-tabs, .hs-sem-tabs { display: none !important; }
      .hs-ach-pane[hidden] { display: block !important; }
      .hs-ach-pane { break-inside: auto; }
      .hs-panel, .hs-metric, .hs-interpret > div, .hs-note { box-shadow: none; }
      .hs-ach-table tr, .hs-metric, .hs-program { break-inside: avoid; }
      .hs-stack, .hs-legend span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }

    /* ── 반응형 ── */
    @media (max-width: 1100px) {
      .hs-metrics { grid-template-columns: repeat(3, 1fr); }
      .hs-select-card { grid-template-columns: 1fr; }
      .hs-select-aside { text-align: left; }
      .hs-interpret { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .hs-metrics { grid-template-columns: repeat(2, 1fr); }
      .hs-head { flex-direction: column; align-items: flex-start; }
      .hs-head-note { text-align: left; max-width: none; }
      .hs-select-row select { flex: 1 1 130px; min-width: 130px; }
      .hs-select-row #siSido, .hs-select-row #siSgg, .hs-select-row #siSchool { flex: 1 1 130px; }
      .hs-select-row button { flex: 1 1 100%; }
      .hs-programs { grid-template-columns: 1fr; }
      .hs-grade-tab { flex: 1; padding-inline: 8px; }
    }

    /* ══ 고교 분석 리포트 — "표"가 아니라 "설명"으로 읽히게 하는 부분 ══
       06 성취도 해설 · 08 동아리 활동 · 09 수행평가 안내글.
       상담에서 원장님이 그대로 읽고, 학부모가 그대로 이해해야 하는 문장이라
       본문 크기(12.5~13px)와 줄간격(1.7)을 넉넉히 준다. */

    /* ── 06 성취도: 학교 총평 (구역 맨 위) ── */
    .hs-ach-summary {
      margin-top: 12px; padding: 14px 16px; border-radius: 12px;
      background: var(--accent-soft); border: 1px solid var(--accent-line);
      border-left: 4px solid var(--accent-text);
      color: var(--text); font-size: 13px; line-height: 1.75;
    }
    .hs-ach-hint { margin-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
    .hs-ach-hint b { color: var(--text); }

    /* ── 06 성취도: 과목을 누르면 펼쳐지는 해설 ── */
    .hs-ach-table tbody tr.hs-has-note { cursor: pointer; }
    .hs-ach-table tbody tr.hs-has-note:hover td,
    .hs-ach-table tbody tr.hs-has-note:focus-visible td { background: var(--accent-soft); }
    .hs-ach-table tbody tr.hs-has-note:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
    .hs-note-caret {
      display: inline-block; width: 11px; margin-right: 4px; color: var(--accent-text);
      font-size: 10px; transition: transform .15s ease;
    }
    .hs-ach-table tbody tr.hs-has-note.on .hs-note-caret { transform: rotate(90deg); }
    .hs-ach-noterow[hidden] { display: none; }
    .hs-ach-table td.hs-ach-notecell { padding: 0; background: var(--card2); }
    .hs-ach-note {
      padding: 13px 15px 14px; border-left: 3px solid var(--accent-text);
      font-size: 12.5px; line-height: 1.75; color: var(--text); white-space: normal;
    }

    /* ── 09 수행평가: 과목 총평 + 항목별 "무엇을 평가하나 / 어떻게 준비하나" ── */
    .hs-subj-summary {
      margin: 2px 0 10px; padding: 11px 13px; border-radius: 0 9px 9px 0;
      background: var(--accent-soft); border-left: 3px solid var(--accent-text);
      color: var(--text); font-size: 13px; line-height: 1.7; font-weight: 600;
    }
    .hs-items { display: flex; flex-direction: column; gap: 8px; }
    .hs-item { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--card); min-width: 0; }
    .hs-item-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .hs-item-name { font-size: 13px; font-weight: 800; color: var(--text); }
    .hs-item-meta { font-size: 11.5px; font-weight: 700; color: var(--muted); }
    .hs-item-what { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--text); }
    .hs-item-prep {
      margin-top: 8px; padding: 9px 11px; border-radius: 0 8px 8px 0;
      border-left: 3px solid var(--accent-text); background: var(--accent-soft);
      font-size: 12.5px; line-height: 1.7; color: var(--text);
    }
    .hs-prep-label {
      display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800;
      color: var(--accent-text); letter-spacing: .02em;
    }

    /* ── 08 동아리: 이름 + 학년 배지 + 인원 + 활동 설명 ── */
    .hs-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 8px; }
    .hs-club { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--card2); min-width: 0; }
    .hs-club-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
    .hs-club-name { font-size: 13px; font-weight: 800; color: var(--text); }
    .hs-club-badge {
      font-size: 10.5px; font-weight: 800; white-space: nowrap; border-radius: 999px; padding: 2px 8px;
      background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line);
    }
    .hs-club-badge.plain { background: var(--card); color: var(--muted); border-color: var(--line); }
    .hs-club-act { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--text); }
    .hs-club-empty { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

    /* ── 교과군·분야 아이콘 ──
       사진을 깔면 글이 묻히고 인쇄가 지저분해져서, 아이콘 한 글자와 왼쪽 색 띠로만 구분한다. */
    /* 본문 글꼴에 이모지가 없으면 네모(두부)로 나와서, 색 이모지 글꼴을 먼저 찾게 한다 */
    .hs-icon {
      font-size: 15px; line-height: 1; margin-right: 2px;
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
      font-variant-emoji: emoji;
    }
    .si-h4 .hs-icon { margin-right: 5px; }
    /* 교과군별 왼쪽 색 띠 — 흑백 인쇄에서는 사라지고 아이콘만 남는다 */
    .si-subj[class*="hs-g-"] { border-left-width: 4px; }
    .hs-g-kor   { border-left-color: #c2703f; }
    .hs-g-math  { border-left-color: #3f6fc2; }
    .hs-g-eng   { border-left-color: #8a5cc2; }
    .hs-g-sci   { border-left-color: #2f9e7d; }
    .hs-g-soc   { border-left-color: #c2a33f; }
    .hs-g-pe    { border-left-color: #d1607f; }
    .hs-g-tech  { border-left-color: #4a8fa8; }
    .hs-g-lang2 { border-left-color: #9a8358; }
    .hs-g-lib   { border-left-color: #6f7f92; }
    .hs-g-etc   { border-left-color: var(--line); }

    /* ── 07 특색사업: 이름 + 무엇을 하는지 + 어떤 학생에게 좋은지 ── */
    .hs-progs { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; }
    .hs-prog {
      border: 1px solid var(--line); border-left: 4px solid var(--accent-text);
      border-radius: 0 10px 10px 0; padding: 12px 14px; background: var(--card2); min-width: 0;
    }
    .hs-prog-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
    .hs-prog-name { font-size: 13.5px; font-weight: 800; color: var(--text); }
    .hs-prog-tag {
      font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
      background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line);
    }
    .hs-prog-detail { font-size: 12.5px; line-height: 1.75; color: var(--text); }
    .hs-prog-benefit {
      margin-top: 9px; padding: 9px 11px; border-radius: 0 8px 8px 0;
      border-left: 3px solid var(--accent-text); background: var(--accent-soft);
      font-size: 12.5px; line-height: 1.7; color: var(--text);
    }
    .hs-prog-none { font-size: 11.5px; color: var(--muted); }

    /* ── 09 수행평가 학년 탭 ── */
    .hs-as { margin-top: 2px; }
    .hs-tab-n { font-weight: 700; opacity: .75; font-size: 11px; }

    /* 인쇄 범위 고르개 */
    .hs-print-scope { display: inline-flex; align-items: center; gap: 6px; }
    .hs-print-scope label { font-size: 12px; font-weight: 700; color: var(--muted); }
    .hs-print-scope select { flex: 0 0 auto; width: auto; }

    /* ── 자동 가져오기: 학년별 버튼 ── */
    .hs-auto {
      margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line);
      border-radius: 11px; background: var(--card2);
    }
    .hs-auto-title { font-size: 13.5px; font-weight: 800; color: var(--text); }
    .hs-auto-lead { margin-top: 5px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
    .hs-auto-lead b { color: var(--text); }
    .hs-auto-group { margin-top: 13px; }
    .hs-auto-name { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 7px; }
    .hs-auto-eta {
      margin-left: 6px; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
      background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line);
    }
    .hs-auto-cells { display: flex; flex-wrap: wrap; gap: 10px; }
    .hs-auto-cell { min-width: 132px; }
    .hs-auto-btn {
      display: flex; align-items: baseline; gap: 7px; width: 100%;
      font-size: 13px; font-weight: 800; cursor: pointer;
      padding: 9px 13px; border-radius: 9px;
      border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text);
    }
    .hs-auto-btn:hover { border-color: var(--accent-text); }
    .hs-auto-btn.done { background: var(--card); border-color: var(--line); color: var(--muted); }
    .hs-auto-btn.done:hover { border-color: var(--accent-text); color: var(--text); }
    .hs-auto-btn:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); }
    .hs-auto-btn:disabled:hover { border-color: var(--line); }
    .hs-auto-act { font-size: 11px; font-weight: 700; opacity: .85; }
    .hs-auto-meta { margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--muted); text-align: center; }
    .hs-auto-none { opacity: .7; }
    .hs-auto-foot { margin-top: 13px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
    .hs-auto-foot b { color: var(--text); }

    /* ── 자동 가져오기: 진행 표시 ── */
    .hs-job {
      padding: 12px 14px; border-radius: 10px;
      border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text);
    }
    .hs-job.error { border-color: #d98b6a; background: var(--card2); }
    .hs-job.done { border-color: var(--accent-text); }
    /* 진행 표시만 끊긴 경우 — 오류(붉은색)가 아니라 안내로 보이게 (2026-08-17) */
    .hs-job.lost { border-color: #c9a227; background: #fdf8e7; }
    .hs-job-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12.5px; color: var(--muted); }
    .hs-job-head b { font-size: 13px; color: var(--text); }
    .hs-job-time { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
    .hs-job-spin {
      width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%;
      border: 2px solid var(--accent-line); border-top-color: var(--accent-text);
      animation: hs-job-spin .8s linear infinite;
    }
    @keyframes hs-job-spin { to { transform: rotate(360deg); } }
    .hs-job-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--accent-text); }
    .hs-job-dot.err { background: #b4451f; }
    .hs-job-bar {
      position: relative; overflow: hidden; margin-top: 9px; height: 7px;
      border-radius: 999px; background: var(--card); border: 1px solid var(--line);
    }
    .hs-job-bar > span {
      display: block; height: 100%; border-radius: 999px;
      background: var(--accent-text); transition: width .4s ease;
    }
    .hs-job-bar.wait > span {
      width: 34%; animation: hs-job-slide 1.4s ease-in-out infinite;
    }
    @keyframes hs-job-slide { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
    .hs-job-count { margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--accent-text); }
    .hs-job-msg { margin-top: 6px; font-size: 12.5px; line-height: 1.65; color: var(--text); white-space: pre-line; }
    .hs-job-msg.err { color: #b4451f; font-weight: 700; }
    .hs-job-tip { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
    .hs-job-tip b { color: var(--text); }
    .hs-job-acts { margin-top: 9px; }
    .hs-job-acts button { font-size: 11.5px; padding: 5px 12px; }

    /* 다른 탭에 가 있어도 진행 상황이 보이게 떠 있는 알림 */
    .hs-job-float {
      position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 290px; max-width: calc(100vw - 28px);
      background: var(--card); border: 1px solid var(--accent-text);
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }
    @media (max-width: 680px) {
      .hs-job-float { right: 10px; left: 10px; bottom: 10px; width: auto; }
      .hs-auto-cell { flex: 1 1 100%; min-width: 0; }
    }
    @media print { .hs-auto, .hs-job-float, .hs-job { display: none !important; } }

    /* ── 인쇄: 접어둔 해설도 모두 펼쳐서 찍는다 (app.js 에서도 hidden 을 풀지만 이중으로 막아둔다) ── */
    body.print-mode .hs-ach-noterow[hidden] { display: table-row !important; }
    body.print-mode .hs-note-caret, body.print-mode .hs-ach-hint { display: none !important; }
    @media print {
      .hs-ach-noterow[hidden] { display: table-row !important; }
      .hs-note-caret, .hs-ach-hint { display: none !important; }
      .hs-item, .hs-club, .hs-subj-summary, .hs-ach-note, .hs-ach-summary, .hs-prog { break-inside: avoid; }
      .hs-ach-summary, .hs-subj-summary, .hs-item-prep, .hs-club-badge, .hs-ach-note,
      .hs-prog, .hs-prog-benefit, .hs-prog-tag, .si-subj[class*="hs-g-"] {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
      }
      /* 학년을 골라 인쇄할 때 그 학년임을 문서 안에서도 알 수 있게 */
      .hs-print-lead { font-weight: 800 !important; }
    }

    @media (max-width: 680px) {
      .hs-clubs { grid-template-columns: 1fr; }
    }

/* ══════════════════════════════════════════════════════════════════════
   좁은 화면(휴대폰) — "구역이 안 나뉘고 그냥 나열식이라 눈에 안 읽힌다"
   (2026-08-16 원장 제보). 과목 하나하나가 카드로 딱 끊겨 보이게 한다.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 759px) {
  /* 과목 카드 — 교과군 색 띠를 굵게 하고 카드끼리 확실히 띄운다 */
  .si-subj {
    border-radius: 12px;
    padding: 13px 14px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(16, 33, 61, .06);
  }
  .si-subj[class*="hs-g-"] { border-left-width: 6px; }

  /* 과목 이름은 카드의 제목답게 — 한 줄 띠를 깔고 아래로 구분선 */
  .si-subj-head {
    align-items: center;
    margin: -13px -14px 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    border-radius: 11px 11px 0 0;
    background: var(--card2);
  }
  .si-subj-head b { font-size: 15px; }

  /* 평가 항목도 서로 붙어 보이지 않게 */
  .hs-items { gap: 10px; }
  .hs-item { border-radius: 11px; padding: 12px 13px; }
  .hs-item-name { font-size: 13.5px; }

  /* 학년·학기 탭은 위에 붙여 두어 어느 학기를 보는지 늘 알 수 있게 */
  .hs-grade-tabs, .hs-sem-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hs-pane-title {
    position: sticky; top: 0; z-index: 2;
    margin: 0 0 10px; padding: 9px 2px;
    background: var(--card); border-bottom: 2px solid var(--accent-text, #1f2a44);
  }

  /* 성취도 표는 가로로 넘칠 때만 스스로 밀리게 (본문이 통째로 밀리면 안 된다) */
  .hs-table-wrap { overflow-x: auto; }
}

/* 과목 카드 접기 (좁은 화면 전용 — material.js / material-preview.js 가 켠다) */
.mt-subj-caret { color: var(--accent-text); font-weight: 900; margin-right: 2px; }
.si-subj-head[role='button'] { cursor: pointer; user-select: none; }
.si-subj.mt-subj-closed > *:not(.si-subj-head) { display: none; }
.si-subj.mt-subj-closed .si-subj-head { margin-bottom: -13px; border-bottom: 0; border-radius: 11px; }
@media (min-width: 760px) { .mt-subj-caret { display: none; } }
@media print { .mt-subj-caret { display: none; } .si-subj.mt-subj-closed > * { display: block !important; } }

/* ── 09 수행평가: 과목 차례 — 국어·영어·수학·과학·사회·예체능 ──
   app.js 가 새로 그릴 때 이미 이 차례로 세우지만, **이미 보낸 공유 링크**는
   그때 저장된 차례 그대로라 화면에서 다시 세워 준다. 두 방식이 같은 차례를 쓴다. */
.hs-as .hs-sem-pane { display: flex; flex-direction: column; }
.hs-as .hs-sem-pane > .hs-pane-title { order: -1; }
.hs-as .hs-sem-pane > .si-subj { order: 10; }   /* 표에 없는 교과군은 맨 뒤 */
.hs-as .hs-sem-pane > .hs-g-kor   { order: 1; }
.hs-as .hs-sem-pane > .hs-g-eng   { order: 2; }
.hs-as .hs-sem-pane > .hs-g-math  { order: 3; }
.hs-as .hs-sem-pane > .hs-g-sci   { order: 4; }
.hs-as .hs-sem-pane > .hs-g-soc   { order: 5; }
.hs-as .hs-sem-pane > .hs-g-pe    { order: 6; }
.hs-as .hs-sem-pane > .hs-g-tech  { order: 7; }
.hs-as .hs-sem-pane > .hs-g-lang2 { order: 8; }
.hs-as .hs-sem-pane > .hs-g-lib   { order: 9; }

/* ── 과목 칸 안의 "눌러서 해설 보기" 안내 ──
   표 위에 한 줄로 적어둔 안내는 아무도 못 봤다(2026-08-17 원장 제보).
   그래서 과목 이름 바로 아래에 붙인다. 글자는 여기서 넣어 펼침 상태에 따라 바뀌게 한다. */
.hs-subject .hs-tap-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-text);
  letter-spacing: -.01em;
}
.hs-subject .hs-tap-hint::after { content: '▸ 눌러서 해설 보기'; }
tr.hs-has-note.on .hs-subject .hs-tap-hint::after { content: '▾ 접기'; }
/* 종이에는 해설이 모두 펼쳐져 나오므로 이 안내가 필요 없다 */
body.print-mode .hs-tap-hint { display: none !important; }
@media print { .hs-tap-hint { display: none !important; } }

/* ── AI가 쓴 설명 글의 문단 (siProse가 만든다) ──
   한 덩어리로 붙어 있으면 컴퓨터에서도 휴대폰에서도 안 읽힌다는 제보(2026-08-17).
   문장마다 줄을 띄우고, 첫 문단은 여백을 주지 않아 상자에 딱 붙게 한다. */
.si-p { margin: 0 0 9px; }
.si-p:last-child { margin-bottom: 0; }
.hs-ach-summary .si-p + .si-p,
.hs-ach-note .si-p + .si-p,
.hs-subj-summary .si-p + .si-p { margin-top: 0; }
/* 상자 안 첫 문단이 라벨(✔ 이렇게 준비하세요) 바로 뒤에 올 때는 조금 띄운다 */
.hs-item-prep .si-p:first-child,
.hs-prog-benefit .si-p:first-child { margin-top: 4px; }
@media (max-width: 759px) {
  .si-p { margin-bottom: 11px; }  /* 휴대폰에서는 더 넉넉히 */
}

/* ── 교과서 출판사 · 정기고사 (2026-08-17 원장 요청 — 학원에서 가장 중요한 두 가지) ── */
.hs-book {
  font-size: 11.5px; font-weight: 800; color: #8a4b16;
  background: #fff4e2; border: 1px solid #f0d6ae;
  border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.hs-exams {
  margin: 8px 0 10px; padding: 10px 12px;
  border: 1px solid var(--accent-line); border-left: 3px solid var(--accent-text);
  border-radius: 0 10px 10px 0; background: var(--accent-soft);
}
.hs-exam { font-size: 12.5px; line-height: 1.65; }
.hs-exam + .hs-exam { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--accent-line); }
.hs-exam > b { color: var(--text); }
.hs-exam-when { margin-left: 7px; font-weight: 800; color: var(--accent-text); }
.hs-exam-scope { margin-top: 3px; color: var(--text); }
.hs-exam-scope > span {
  display: inline-block; margin-right: 6px; font-size: 10.5px; font-weight: 800;
  color: var(--muted); letter-spacing: .04em;
}
@media (max-width: 759px) {
  .si-subj-head .hs-book { white-space: normal; }
  .hs-exams { margin: 10px 0 12px; }
}

/* ── [새 자료 확인] — AI 없이 공시 회차만 견주는 버튼 (2026-08-17) ── */
.hs-auto-check { margin: 10px 0 14px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--card); }
.hs-auto-check > button { margin-right: 8px; }
.hs-check-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.hs-check-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 12px; color: var(--muted); }
.hs-check-row > b { flex: 0 0 130px; color: var(--text); }
.hs-check-row.on > b { color: var(--accent-text); }
.hs-check-row.on { font-weight: 700; }
@media (max-width: 759px) { .hs-check-row > b { flex: 1 1 100%; } }

/* ══════════════════════════════════════════════════════════════════════
   구역 탭 — 리포트가 길어 스크롤이 끝없다는 제보(2026-08-17 원장, 데스크톱 포함).
   좁은 화면에서만 쓰던 것을 **넓은 화면에도** 켠다. material.html 에도 같은 이름이
   있었는데 여기로 옮겨 원장 화면·학생 링크가 같은 모양을 쓰게 했다.
   ══════════════════════════════════════════════════════════════════ */
.mt-tabs {
  position: sticky; top: 0; z-index: 19; /* 앱 상단바(z 20)보다 아래 — top 값은 app.js가 재어서 넣는다 */
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.mt-tab {
  border: 1px solid var(--line); background: var(--card2); color: var(--muted);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; box-shadow: none;
}
.mt-tab:hover { background: var(--card); color: var(--text); }
.mt-tab b { color: var(--muted); font-weight: 800; margin-right: 4px; font-size: 11px; }
.mt-tab.on { background: var(--text); border-color: var(--text); color: #fff; }
.mt-tab.on b { color: #9fb4e8; }
.mt-hide { display: none !important; }
@media (max-width: 759px) {
  .mt-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mt-tabs::-webkit-scrollbar { display: none; }
}
/* 종이에는 탭이 없으니 모든 구역을 펼쳐서 찍는다 */
@media print { .mt-tabs { display: none !important; } .mt-hide { display: block !important; } }
body.print-mode .mt-tabs { display: none !important; }
body.print-mode .mt-hide { display: block !important; }

/* ── 교과서 출판사 표 (2026-08-17 원장 요청 — 학부모가 가장 먼저 묻는 정보) ── */
.hs-book-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hs-book-table th {
  text-align: left; padding: 9px 10px; font-size: 11.5px; font-weight: 800;
  color: var(--muted); letter-spacing: .04em;
  border-bottom: 2px solid var(--accent-text, #1f2a44); background: var(--card2);
}
.hs-book-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hs-book-table tbody tr:last-child td { border-bottom: 0; }
/* 세로줄 — 가로줄만으로는 과목·출판사·교과서 열이 안 갈린다는 제보 (2026-08-17 원장).
   맨 오른쪽 칸은 선을 안 그어 표가 잘린 것처럼 보이지 않게 한다. */
.hs-book-table th:not(:last-child),
.hs-book-table td:not(:last-child) { border-right: 1px solid var(--line); }
.hs-book-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hs-book-table tbody tr:nth-child(even) td { background: var(--card2); }
.hs-bk-subject { font-weight: 700; color: var(--text); white-space: nowrap; }
.hs-bk-pub { font-weight: 800; color: #8a4b16; white-space: nowrap; }
.hs-bk-book { color: var(--muted); }
@media (max-width: 759px) {
  .hs-book-table { font-size: 12.5px; }
  .hs-book-table td, .hs-book-table th { padding: 9px 7px; }
  .hs-bk-subject { white-space: normal; }
}

/* ── 자료 채우기 현황 표 (2026-08-17 원장 제보 — 뭐가 없는지 알 수 없다) ── */
.hs-status-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hs-status-table th {
  text-align: left; padding: 9px 10px; font-size: 11.5px; font-weight: 800;
  color: var(--muted); letter-spacing: .04em;
  border-bottom: 2px solid var(--accent-text, #1f2a44); background: var(--card2);
}
/* ★ 2026-08-18 원장님: "칸과 칸 사이 줄이 너무 흐리다" — var(--line) 은 아주 연한 회색이라
   상담 중에 표를 짚을 때 칸 구분이 안 보인다. 진단 결과표에서만 한 단계 진하게 쓴다. */
.hs-status-table td { padding: 10px; border-bottom: 1px solid var(--line-strong, #ccd3de); vertical-align: middle; }
.hs-status-table tbody tr:last-child td { border-bottom: 0; }
/* 현황 표도 같은 모양으로 (교과서 표와 눈에 익게) */
.hs-status-table th:not(:last-child),
.hs-status-table td:not(:last-child) { border-right: 1px solid var(--line-strong, #ccd3de); }

/* ★ 영역 이름(자연친화력·공간지각력 등)은 상담에서 가장 먼저 짚는 값이다.
   원장님 요청으로 눈에 확 들어오게 굵고 크게 한다. */
.hs-status-table td .area-name {
  font-weight: 800; font-size: 14.5px; color: var(--ink, #1b2536); letter-spacing: -0.2px;
}
.hs-status-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hs-st-name { font-weight: 700; color: var(--text); white-space: nowrap; }
.hs-st-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.hs-st-now { font-weight: 600; color: var(--text); }
.hs-st-how { color: var(--muted); font-size: 12.5px; }
.hs-st-go { white-space: nowrap; padding: 6px 12px; font-size: 12.5px; }
/* [채우기] 를 누르면 목적지를 잠깐 반짝여 어디로 왔는지 알려 준다 */
.hs-flash { animation: hsFlash 1.6s ease-out; border-radius: 10px; }
@keyframes hsFlash {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 3px rgba(58, 78, 208, .35); }
}
@media (max-width: 759px) {
  .hs-status-table { font-size: 12.5px; }
  .hs-status-table td, .hs-status-table th { padding: 8px 6px; }
  .hs-st-name { white-space: normal; }
  .hs-st-how { display: none; }  /* 좁은 화면에서는 방법 설명을 접는다 */
}

/* ══════════════════════════════════════════════════════════════════════
   ★ A4 인쇄 · PDF 저장 — **구역이 페이지 경계에서 잘리지 않게** 한다
      (2026-08-24 원장님 지시)

   > "A4로 저장될 때 내용마다 구간을 나눠서 저장되도록 해줘.
   >  A내용이 나오고 B내용이 어중간하게 걸쳐서 넘어가는 거라면
   >  알아서 딱 한 페이지에 잘 들어가도록 페이지 넘겨서"

   전에는 작은 항목(표의 한 줄, 지표 칸)에만 나눔 규칙이 있어서 **구역 자체가
   반으로 잘렸다.** 「01 학교 개관」이 페이지 끝에서 시작하면 제목만 남고
   내용은 다음 장으로 넘어가는 식이다.

   ⚠ `break-inside: avoid` 는 요소가 **한 페이지보다 길면 브라우저가 무시**한다.
     그래서 큰 구역(성취도·동아리)은 어차피 여러 장에 걸친다. 그 안쪽의
     작은 덩어리에도 avoid 를 걸어 **적어도 과목·동아리 하나는 안 잘리게** 한다.
   ══════════════════════════════════════════════════════════════════ */
@media print {
  /* 용지를 A4 로 못 박는다 — 브라우저 기본(Letter)이면 오른쪽이 잘린다 */
  @page { size: A4; }

  /* ① 구역은 통째로 — 걸치면 다음 장에서 시작한다 */
  .si-sec { break-inside: avoid; }
  .si-sec + .si-sec { margin-top: 14px; }

  /* ② 제목만 페이지 끝에 혼자 남지 않게 (뒤에 내용이 반드시 따라온다) */
  .si-sec-head, .si-h4, .hs-pane-title, .hs-panel-head, .si-subj-head { break-after: avoid; }

  /* ③ 긴 표는 머리행을 **매 장 반복** — 2장째부터 무슨 칸인지 모르면 소용없다 */
  .si-table thead, .hs-status-table thead, .hs-ach-table thead, .sr-table thead {
    display: table-header-group;
  }
  .si-table tr, .hs-status-table tr, .hs-ach-table tr { break-inside: avoid; }

  /* ④ 안쪽 덩어리도 중간에서 안 끊기게 */
  .si-facts, .si-facts > div, .hs-metrics, .hs-panel, .si-subj,
  .hs-stat-row, .hs-club, .hs-program, .hs-prog, .hs-item, .si-memo,
  .hs-interpret > div, .hs-note, .hs-ach-note, .hs-ach-summary, .hs-subj-summary {
    break-inside: avoid;
  }

  /* ⑤ 마지막 줄 하나만 넘어가는 것도 막는다 */
  p, li, td { orphans: 2; widows: 2; }
}
/* ══════════════════════════════════════════════════════════════════════
   인쇄할 구역 고르기 (2026-08-24)
   전부 찍으면 103장이 나온다 — 실측(대원여고). 그래서 골라 찍게 한다.
   장수는 화면 밖에서 A4 폭으로 그려 **실제로 재서** 붙인다(학교마다 딴판이다).
   ══════════════════════════════════════════════════════════════════ */
.hs-print-pick {
  margin-top: 14px; padding: 13px 15px;
  border: 1px solid var(--ivory-line, #e6e2d6); border-radius: 11px;
  background: var(--ivory, #faf8f2);
}
.hs-print-pick-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hs-print-pick-head b { font-size: 13.5px; }
.hs-print-pages { font-size: 12.5px; font-weight: 700; }
.hs-print-pages.warn { color: #b0480a; }
.hs-print-pick-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px;
}
.hs-print-sec {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border: 1px solid var(--line, #e3e9f2); border-radius: 9px;
  background: #fff; font-size: 13px; cursor: pointer;
}
.hs-print-sec:hover { border-color: var(--accent, #3566f0); }
.hs-print-sec span { flex: 1; }
.hs-print-sec i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted, #6f7d91); }
/* 세 장 넘는 구역은 미리 알린다 — 모르고 켰다가 종이를 버린다 */
.hs-print-sec.big i { color: #b0480a; }
.hs-print-sec.big { border-color: #f0d3b8; background: #fffaf4; }
.hs-print-pick-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.hs-print-pick-btns button { font-size: 12px; padding: 6px 11px; }

@media (max-width: 680px) { .hs-print-pick-list { grid-template-columns: 1fr; } }
@media print { .hs-print-pick { display: none !important; } }
/* ══════════════════════════════════════════════════════════════════════
   ★ 제본용 전체본 — 표지 · 목차 (2026-08-24)
   원장님: "교재처럼 해서 제본해서 줘도 상관은 없는데"
   화면에는 안 쓰고 **인쇄에만** 나온다(`#printArea` 안에서만 만들어진다).
   ══════════════════════════════════════════════════════════════════ */
.si-book .si-cover {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 245mm; padding: 0 6mm; text-align: left;
  break-after: page;
}
.si-cover-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .22em; color: #8a94a6; margin-bottom: 14px;
}
.si-cover-title { font-size: 34px; font-weight: 800; letter-spacing: -.04em; margin: 0 0 10px; line-height: 1.25; }
.si-cover-sub { font-size: 15px; color: #55607a; }
.si-cover-line { height: 3px; background: #1a2540; margin: 26px 0 22px; width: 64px; }
.si-cover-meta { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.si-cover-meta > div { display: flex; gap: 14px; }
.si-cover-meta b { min-width: 74px; color: #55607a; font-weight: 700; }
.si-cover-foot { margin-top: 34px; font-size: 11.5px; color: #8a94a6; }
/* 주소·전화·개교 — 목차 밑에 있으면 어수선해서 표지로 옮겼다 */
.si-cover-info {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid #e3e9f2;
  display: flex; flex-wrap: wrap; gap: 7px 26px; font-size: 12.5px; color: #55607a;
}
.si-cover-info b { color: #8a94a6; font-weight: 700; margin-right: 6px; }

.si-book .si-toc { break-after: page; padding-top: 4mm; }
.si-toc-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 20px; font-weight: 800; letter-spacing: -.03em;
  padding-bottom: 10px; border-bottom: 2px solid #1a2540; margin-bottom: 16px;
}
.si-toc-head span { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: #8a94a6; }
.si-toc-row { display: flex; align-items: baseline; gap: 9px; padding: 8px 0; font-size: 14px; }
.si-toc-no { font-size: 11.5px; font-weight: 800; color: #8a94a6; min-width: 22px; }
.si-toc-name { font-weight: 700; }
.si-toc-dot { flex: 1; border-bottom: 1px dotted #c3cbd8; transform: translateY(-3px); }
.si-toc-page { font-weight: 800; font-variant-numeric: tabular-nums; }
.si-toc-note { margin-top: 18px; font-size: 11.5px; color: #8a94a6; line-height: 1.6; }

@media print {
  /* ★ 제본용에서는 **구역마다 새 장에서 시작**한다 — 교재처럼 읽히게 */
  .si-book section.si-sec { break-before: page; break-inside: auto; }
  .si-book section.si-sec:first-of-type { break-before: auto; }
  .si-book .si-cover, .si-book .si-toc, .si-book .si-cover-line {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* 표지·목차에는 결과지 공용 머리말 장식을 얹지 않는다 */
  .si-book .si-cover, .si-book .si-toc { break-inside: avoid; }
}

/* 제본 안내 문구 */
.hs-print-booknote {
  margin-top: 9px; font-size: 12px; line-height: 1.65; color: var(--muted, #6f7d91);
}
.hs-print-booknote b { color: var(--text, #1a2540); }
@media print { .hs-print-booknote { display: none !important; } }