/* ═══════════════════════════════════════════════════════════
   궁금해 AI (studybesty) — 법률 문서 공통 스타일
   디자인 언어는 static/ui.css 와 동일한 값을 씁니다.
   (--brand:#ff8c42 · --paper:#fef6e4 · --ink:#4a4436 · --line:#f0e4cc)
   폰 · 태블릿 · 노트북 · 터치 안 되는 모니터를 모두 상정합니다.
   ═══════════════════════════════════════════════════════════ */

:root{
  --brand:#ff8c42;  --brand-600:#f07722; --brand-200:#ffd6a5; --brand-50:#fff3e2;
  --paper:#fef6e4;  --surface:#ffffff;   --surface-warm:#fdf7ec;
  --ink:#4a4436;    --ink-700:#5c4a2a;   --ink-500:#7a6f5d;   --ink-300:#a89f8e;
  --line:#f0e4cc;   --line-soft:#f0e8d8;
  --mint:#2a6b4a;   --mint-bg:#e3f6ec;
  --info:#3c6a89;   --info-bg:#e8f6ff;
  --warn:#a85b12;   --warn-bg:#fff3e2;
  --bad:#b3413f;    --bad-bg:#ffe9e9;
  --r-lg:24px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --tap:48px;
}
/* 마우스로 쓰는 화면에서는 촘촘해도 정확히 눌린다 (ui.css 와 같은 규칙) */
@media (pointer: fine){ :root{ --tap:40px; } }

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:linear-gradient(160deg,#fef6e4 0%,#e0f7fa 100%);
  background-attachment:fixed;
  color:var(--ink);
  line-height:1.75;
  -webkit-text-size-adjust:100%;
  padding:0 14px 64px;
}

.wrap{ width:100%; max-width:820px; margin:0 auto; }

/* ── 머리말 ── */
.topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 0 4px;
}
.topbar a.home{
  display:inline-flex; align-items:center; gap:6px;
  min-height:var(--tap); padding:0 16px; border-radius:var(--r-pill);
  background:var(--surface); border:2px solid var(--brand-200);
  color:var(--ink-500); font-weight:700; text-decoration:none; font-size:.95rem;
}
.topbar a.home:active{ transform:scale(.96); }

header.doc{
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:0 6px 20px rgba(61,53,39,.08);
  padding:26px 22px; margin:12px 0 18px;
  border-top:6px solid var(--brand);
}
header.doc h1{ font-size:1.55rem; color:var(--brand-600); line-height:1.35; margin-bottom:6px; letter-spacing:-.01em; }
header.doc .svc{ color:var(--ink-500); font-size:1rem; }
header.doc .dates{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  color:var(--ink-500); font-size:.92rem; display:flex; gap:16px; flex-wrap:wrap;
}
header.doc .dates b{ color:var(--ink-700); }

/* ── 안내 상자 ── */
.note{
  border-radius:var(--r-md); padding:16px 18px; margin:0 0 18px;
  font-size:1rem; border:2px solid transparent;
}
.note.info{ background:var(--info-bg); border-color:#cfe6f4; color:var(--info); }
.note.warn{ background:var(--warn-bg); border-color:var(--brand-200); color:var(--warn); }
.note.bad { background:var(--bad-bg);  border-color:#f4cccb; color:var(--bad); }
.note b{ font-weight:800; }
.note p + p{ margin-top:8px; }

/* ── 목차 ── */
nav.toc{
  background:var(--surface-warm); border:2px solid var(--line);
  border-radius:var(--r-md); padding:16px 18px; margin-bottom:20px;
}
nav.toc h2{ font-size:1rem; color:var(--ink-700); margin-bottom:10px; }
nav.toc ol{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
nav.toc a{
  display:inline-block; padding:7px 13px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink-500); text-decoration:none; font-size:.9rem; font-weight:600;
}
nav.toc a:hover{ border-color:var(--brand-200); color:var(--brand-600); }
/* 손가락으로 누르는 화면에서는 목차 칩도 충분히 커야 한다 (실측 37px → 44px) */
@media (pointer: coarse){
  nav.toc a{ min-height:44px; display:inline-flex; align-items:center; padding:0 15px; }
}

/* ── 조항 ── */
section.art{
  background:var(--surface); border-radius:var(--r-md);
  box-shadow:0 4px 14px rgba(61,53,39,.06);
  padding:22px; margin-bottom:14px; scroll-margin-top:16px;
}
section.art > h2{
  font-size:1.15rem; color:var(--ink-700); margin-bottom:12px;
  padding-bottom:10px; border-bottom:2px solid var(--line);
  letter-spacing:-.01em;
}
section.art h3{ font-size:1rem; color:var(--brand-600); margin:16px 0 8px; }
section.art p{ margin-bottom:10px; }
section.art ol, section.art ul{ margin:0 0 10px 1.15em; }
section.art li{ margin-bottom:7px; }
section.art ol ol, section.art ul ul{ margin-top:7px; }
section.art strong{ font-weight:800; color:var(--ink-700); }
.blank{
  display:inline-block; background:#fff6e0; border:1px dashed var(--brand);
  color:var(--warn); border-radius:8px; padding:1px 8px; font-weight:700;
  font-size:.95em; white-space:nowrap;
}

/* ── 쉬운 말 요약 ── */
.easy{
  background:var(--mint-bg); border-left:5px solid #8fd0ac;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:11px 15px; margin:12px 0 4px;
  color:var(--mint); font-size:.97rem; line-height:1.65;
}
.easy::before{
  content:"쉬운 말"; display:inline-block; margin-right:8px;
  background:#8fd0ac; color:#123c28; font-weight:800; font-size:.78rem;
  border-radius:var(--r-pill); padding:1px 9px; vertical-align:2px;
}

/* ── 표 ── */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0 6px;
     border:1px solid var(--line); border-radius:var(--r-sm); }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:.94rem; background:var(--surface); }
th,td{ border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
th{ background:var(--surface-warm); color:var(--ink-700); font-weight:800; white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }
td small{ color:var(--ink-500); }
.tw + .scrollhint{ font-size:.82rem; color:var(--ink-300); margin:0 0 8px 2px; }
@media (pointer:fine){ .scrollhint{ display:none; } }

/* ── 꼬리말 ── */
footer.doc{
  margin-top:22px; padding:20px 22px;
  background:var(--surface); border-radius:var(--r-md);
  border:2px solid var(--line); color:var(--ink-500); font-size:.92rem;
}
footer.doc .links{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
footer.doc .links a{
  display:inline-flex; align-items:center; min-height:var(--tap); padding:0 16px;
  border-radius:var(--r-pill); background:var(--surface-warm);
  border:1px solid var(--line); color:var(--ink-700);
  text-decoration:none; font-weight:700; font-size:.92rem;
}
footer.doc .links a:hover{ border-color:var(--brand-200); color:var(--brand-600); }

/* ── 반응형 ── */
@media (max-width:520px){
  body{ line-height:1.7; padding:0 10px 56px; }
  header.doc{ padding:20px 16px; border-radius:var(--r-md); }
  header.doc h1{ font-size:1.3rem; }
  section.art{ padding:17px 15px; }
  section.art > h2{ font-size:1.05rem; }
  nav.toc ol{ gap:6px; }
  nav.toc a{ font-size:.85rem; padding:6px 11px; }
  .easy{ font-size:.93rem; }
}
@media (min-width:1024px){
  body{ padding-bottom:80px; }
  .wrap{ max-width:860px; }
}

/* ── 인쇄 (보호자가 종이로 보관할 수 있게) ── */
@media print{
  body{ background:#fff; padding:0; color:#000; }
  .topbar, nav.toc, footer.doc .links{ display:none; }
  section.art, header.doc, footer.doc{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  .easy{ background:#f4f4f4; }
}