/* 교사 법령 길잡이 — 외부 글꼴·스크립트 없이 학교 내부망에서도 열리도록 시스템 글꼴만 쓴다. */
:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-2: #edf0f3;
  --ink: #1b2531;
  --ink-2: #394856;
  --muted: #64717e;
  --line: #d8dde3;
  --navy: #16324f;
  --navy-ink: #ffffff;
  --accent: #1d6f8f;
  --focus: #2f6fd0;
  --pinned-bg: #16324f;   --pinned-ink: #ffffff;
  --soon-bg: #fff0d4;     --soon-ink: #8a4b00;
  --case-bg: #efe9fb;     --case-ink: #4f3a9c;
  --quote-bg: #f7f8fa;    --quote-line: #9aa9b8;
  --warn-bg: #fff5e3;     --warn-line: #dd9f30;
  --tip-bg: #eef6f1;      --tip-line: #4e9d74;
  --ask-bg: #edf3fb;      --ask-line: #5b86c9;
  --case-box: #f6f3fd;
  --new-bg: #e3f3ec;      --new-ink: #1f6b48;
  --del-bg: #fdecea;      --del-ink: #8c2a1f;
  --ch-sv: #b3261e; --ch-ed: #1d6f8f; --ch-gd: #2e7d4f; --ch-ab: #8a4b00; --ch-cp: #6b4fa0;
  --ch-sf: #0f766e; --ch-pv: #475569; --ch-cs: #4f3a9c; --ch-mcp: #16324f;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 30, 45, .06), 0 4px 14px rgba(20, 30, 45, .05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11161c; --surface: #19212a; --surface-2: #212a34;
    --ink: #e6ebf0; --ink-2: #c2cbd5; --muted: #919eab; --line: #2c3743;
    --navy: #22476f; --accent: #6cc0dd; --focus: #7aa7ee;
    --pinned-bg: #2b5580;
    --soon-bg: #3a2c12;     --soon-ink: #f3c46a;
    --case-bg: #2c2550;     --case-ink: #c9bdfb;
    --quote-bg: #151c24;    --quote-line: #52606e;
    --warn-bg: #33291a;     --warn-line: #d8a24a;
    --tip-bg: #172d25;      --tip-line: #5fb88b;
    --ask-bg: #1a283c;      --ask-line: #7aa0dd;
    --case-box: #1e1b33;
    --new-bg: #173226;      --new-ink: #8fd9b3;
    --del-bg: #3a1c1a;      --del-ink: #f2a59d;
    --ch-sv: #f28b82; --ch-ed: #6cc0dd; --ch-gd: #7fd1a0; --ch-ab: #f3c46a; --ch-cp: #c3a8f0;
    --ch-sf: #5fd1c4; --ch-pv: #aab6c4; --ch-cs: #c9bdfb; --ch-mcp: #9cc0ea;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--accent); }
code { font: .92em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* ── 머리 ── */
.top { background: var(--navy); color: var(--navy-ink); }
.top__inner { max-width: 1120px; margin: 0 auto; padding: 22px 16px 0; display: grid; gap: 14px; }
.brand__kicker { margin: 0; font-size: 14px; font-weight: 700; opacity: .8; letter-spacing: .02em; }
.brand__title { margin: 2px 0 0; font-size: clamp(26px, 4vw, 34px); line-height: 1.25; letter-spacing: -.01em; }
.brand__tagline { margin: 4px 0 0; opacity: .86; }
.search { position: relative; }
.search input {
  width: 100%; font: inherit; font-size: 17px; padding: 13px 44px 13px 16px;
  border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.search__key {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 12px/1 ui-monospace, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px;
}
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs__item { color: var(--navy-ink); text-decoration: none; padding: 10px 14px 12px; border-radius: 10px 10px 0 0; font-weight: 700; opacity: .75; white-space: nowrap; }
.tabs__item[aria-current="true"] { background: var(--bg); color: var(--ink); opacity: 1; }
.tabs__count:not(:empty) { font-size: 12px; font-weight: 700; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--soon-bg); color: var(--soon-ink); }

/* ── 본문 ── */
.page { max-width: 1120px; margin: 0 auto; padding: 18px 16px 40px; }
.situations { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip--link { font-weight: 500; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.chapters { position: sticky; top: 12px; display: grid; gap: 2px; }
.chapters__item {
  font: inherit; font-size: 15px; text-align: left; cursor: pointer; border: 0; background: transparent; color: var(--ink-2);
  padding: 8px 12px; border-radius: 10px; display: flex; justify-content: space-between; gap: 8px;
}
.chapters__item:hover { background: var(--surface-2); }
.chapters__item[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); }
.chapters__count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.results:focus { outline: none; }
.results__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.results__count { margin: 0; color: var(--muted); font-size: 14px; }
.link-button { font: inherit; font-size: 14px; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 4px 0; text-decoration: underline; }
.section-label { font-size: 13px; color: var(--muted); margin: 0 0 6px; font-weight: 700; }
.recent { margin-bottom: 14px; }

/* ── 카드 ── */
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); scroll-margin-top: 12px; }
.g-card.is-open { border-color: var(--navy); }
.g-card__head { width: 100%; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; padding: 14px 16px; display: grid; gap: 5px; border-radius: var(--radius); }
.g-card__title { font-size: 18px; font-weight: 800; line-height: 1.4; }
.g-card__answer { color: var(--ink-2); }
.g-card:not(.is-open) .g-card__answer { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; line-height: 1.6; white-space: nowrap; }
.badge--chapter { background: transparent; border: 1px solid currentColor; padding: 1px 7px; }
.badge--sv { color: var(--ch-sv); } .badge--ed { color: var(--ch-ed); } .badge--gd { color: var(--ch-gd); }
.badge--ab { color: var(--ch-ab); } .badge--cp { color: var(--ch-cp); } .badge--sf { color: var(--ch-sf); }
.badge--pv { color: var(--ch-pv); } .badge--cs { color: var(--ch-cs); } .badge--mcp { color: var(--ch-mcp); }
.badge--pinned { background: var(--pinned-bg); color: var(--pinned-ink); }
.badge--soon { background: var(--soon-bg); color: var(--soon-ink); }
.badge--case { background: var(--case-bg); color: var(--case-ink); }
.badge--new { background: var(--new-bg); color: var(--new-ink); }

.g-card__body { padding: 14px 16px 16px; display: grid; gap: 14px; border-top: 1px solid var(--line); }
.g-section__title { margin: 0 0 6px; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.g-section p { margin: 0; }
.steps, .points { margin: 0; padding-left: 22px; display: grid; gap: 5px; }
.steps li::marker { font-weight: 800; color: var(--navy); }
.callout { border-left: 4px solid; border-radius: 8px; padding: 10px 12px; }
.callout .g-section__title { color: inherit; opacity: .8; }
.callout--case { background: var(--surface-2); border-color: var(--quote-line); }
.callout--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.callout--tip { background: var(--tip-bg); border-color: var(--tip-line); }
.callout--ask { background: var(--ask-bg); border-color: var(--ask-line); }

/* 표 */
.table-wrap { overflow-x: auto; }
.g-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.g-table caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 6px; }
.g-table th, .g-table td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.g-table thead th { background: var(--surface-2); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.g-table tbody th { font-weight: 700; white-space: nowrap; }

/* 판례 */
.cases { display: grid; gap: 8px; }
.case { background: var(--case-box); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; }
.case p { margin: 0; }
.case__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.case__link { font-weight: 800; }
.case__title { font-size: 13px; color: var(--muted); }

/* 조문 원문 */
.quotes { display: grid; gap: 6px; }
.quote { background: var(--quote-bg); border: 1px solid var(--line); border-radius: 10px; }
.quote__summary { cursor: pointer; padding: 9px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; list-style-position: inside; }
.quote__label { font-weight: 700; }
.quote[open] .quote__summary { border-bottom: 1px dashed var(--line); }
.quote__body { padding: 10px 14px 12px; display: grid; gap: 6px; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Serif KR", serif; font-size: 15px; line-height: 1.7; }
.quote__head { font-weight: 700; margin: 0; }
.quote__line { margin: 0; }
.quote__hos, .quote__mok { margin: 0; padding-left: 16px; list-style: none; display: grid; gap: 3px; }
.quote__mok { margin-top: 3px; }
.quote .rev { color: var(--muted); font-size: 12.5px; }
.quote__note, .quote__meta, .quote__change { margin: 4px 0 0; font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 13px; color: var(--muted); }
.quote__change { color: var(--soon-ink); background: var(--soon-bg); padding: 5px 9px; border-radius: 8px; }
.annex { margin: 0; overflow-x: auto; font: 12.5px/1.45 ui-monospace, "D2Coding", "Nanum Gothic Coding", monospace; white-space: pre; background: var(--surface); padding: 10px; border-radius: 8px; border: 1px solid var(--line); }
.tag { font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tag--soon { background: var(--soon-bg); color: var(--soon-ink); }
.tag--case { background: var(--case-bg); color: var(--case-ink); }
.tag--new { background: var(--new-bg); color: var(--new-ink); }
.quote__change--new { color: var(--new-ink); background: var(--new-bg); }

/* 법령 MCP 질문 */
.asks { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.ask__q { margin: 0; }
.ask__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 4px; }
.ask__how { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }

.g-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.g-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-button { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.mini-button:hover { border-color: var(--navy); }
.empty { color: var(--muted); padding: 24px 0; }

/* ── 바뀐 법·기한 ── */
.panel { max-width: 860px; }
.panel h2 { margin: 6px 0 4px; }
.panel__lead { color: var(--muted); margin: 0 0 16px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: grid; gap: 14px; }
.timeline__item { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.timeline__item::before { content: ""; position: absolute; left: -26px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--quote-line); }
.timeline__item.is-upcoming::before { border-color: var(--soon-ink); }
.timeline__item.is-upcoming { border-color: var(--warn-line); }
.timeline__date { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; display: grid; gap: 4px; justify-items: start; align-content: start; }
.timeline__text p { margin: 0; }
.timeline__law { font-size: 13px; font-weight: 700; color: var(--muted); }
.timeline__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px !important; }
.timeline__link { font-size: 14px; }
.timeline__link--preview { font-weight: 700; }
.timeline__now { position: relative; font-size: 13px; font-weight: 800; color: var(--soon-ink); margin-left: -2px; }
.timeline__now::before { content: ""; position: absolute; left: -25px; top: 50%; width: 12px; height: 2px; background: var(--soon-ink); }
/* 기준일 미리 보기 */
.preview { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius); background: var(--soon-bg); color: var(--soon-ink); border: 1px solid var(--warn-line); }
.preview a { color: inherit; font-weight: 700; }
/* 원문 갱신 기록 */
.changes { margin-top: 30px; }
.changes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.change { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 6px; }
.change p { margin: 0; }
.change__date { font-weight: 800; font-variant-numeric: tabular-nums; }
.change__summary { color: var(--ink-2); }
.change__laws { margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--ink-2); }
.change__quote { background: var(--quote-bg); border: 1px solid var(--line); border-radius: 10px; }
.change__quote summary { cursor: pointer; padding: 8px 12px; }
.change__quote[open] summary { border-bottom: 1px dashed var(--line); }
.change__cards { padding: 0 12px 10px !important; font-size: 13.5px; color: var(--muted); }
.diff { padding: 8px 12px; display: grid; gap: 4px; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Serif KR", serif; font-size: 14.5px; line-height: 1.65; }
.diff__line { padding: 4px 8px; border-radius: 6px; }
.diff__line--del { background: var(--del-bg); color: var(--del-ink); }
.diff__line--add { background: var(--new-bg); color: var(--new-ink); }
.print-stamp { display: none; }
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 12px; margin: 0 0 22px; display: grid; gap: 10px; scroll-margin-top: 12px; }
.calc__title { margin: 0; font-size: 18px; }
.calc__lead { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.calc__form { display: grid; gap: 10px; }
.calc__dates { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.calc__field { display: grid; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.calc__field select, .calc__field input { font: inherit; font-size: 15.5px; font-weight: 500; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 100%; }
.calc__field--what select { width: 100%; }
.calc__result { display: grid; gap: 10px; }
.calc__summary { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--soon-bg); color: var(--soon-ink); }
.calc__item { border-left: 4px solid var(--accent); padding: 4px 0 4px 12px; display: grid; gap: 4px; }
.calc__item p { margin: 0; }
.calc__head { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.calc__end { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 20px; }
.calc__left { font-size: 13.5px; font-weight: 700; color: var(--accent); }
.calc__how { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); display: grid; gap: 2px; }
.calc__ext { font-size: 14px; color: var(--ink-2); }
.calc__basis { margin: 0; font-size: 13.5px; }
.calc__note { margin: 0; font-size: 13px; color: var(--muted); }
.deadline__calc { margin-left: 8px; padding: 3px 9px; font-size: 12.5px; vertical-align: 1px; }
.deadline-group { margin-bottom: 20px; }
.deadline-group h3 { margin: 0 0 6px; font-size: 17px; }
.g-table--deadlines { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.g-table--deadlines tbody th { white-space: normal; font-weight: 600; }
.deadline__when { font-weight: 700; }
.deadline__basis { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }

/* ── 바닥 ── */
.foot { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; }
.foot__inner { max-width: 1120px; margin: 0 auto; padding: 18px 16px 28px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; }
.legend div { display: flex; gap: 6px; align-items: center; }
.legend dd { margin: 0; }
.legend__tip { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--tip-bg); color: var(--ink-2); border-left: 3px solid var(--tip-line); }

/* ── 좁은 화면 ── */
@media (max-width: 780px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chapters { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .chapters__item { white-space: nowrap; flex: none; background: var(--surface); border: 1px solid var(--line); padding: 6px 12px; }
  .situations { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
  .situations .chip { flex: none; }
  .search__key { display: none; }
  .g-card__title { font-size: 17px; }
  .timeline__item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .timeline__date { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .deadline__basis { white-space: normal; }
}

@media print {
  .top, .situations, .chapters, .results__head, .recent, .foot, .g-card__foot, .mini-button, .tabs, .preview { display: none !important; }
  .layout { display: block; }
  body { background: #fff; }
  .g-card { box-shadow: none; break-inside: avoid; }
  .quote { break-inside: avoid; }
  /* ‘이 카드 인쇄’ — 고른 카드 한 장만, 해야 할 일은 확인란이 붙은 점검표로 */
  .print-one .g-card:not(.is-printing) { display: none !important; }
  .print-one .g-card.is-printing { border: 0; break-inside: auto; }
  .print-one .print-stamp { display: block; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #999; font-size: 12px; color: #444; }
  .print-one .steps { list-style: none; padding-left: 0; gap: 8px; }
  .print-one .steps li::before { content: "☐  " counter(list-item) ". "; font-weight: 800; }
  .print-one .g-card__answer { -webkit-line-clamp: unset; display: block; }
  .print-one .callout--ask, .print-one .g-section--related { display: none !important; }
  .calc, .deadline__calc { display: none !important; }
}