/* 말 사육시설 복지지수 웹사이트 디자인 토큰과 기본 요소 스타일.
   출처: docs/33_웹사이트_설계.md 3절. 외부 자원(웹폰트·CDN)을 쓰지 않고 시스템 서체 대체 스택만 쓴다.
   의미색 다크 값은 docs/33에 없어 같은 색상각을 유지한 채 명도만 올려 파생했다.

   판·글자·여백의 근거는 docs/35_디자인_벤치마킹_근거.md에 있다.
   - 겉틀 1200px: KRDS 표준형 최대 콘텐츠 폭.
   - 읽기 열 760px: GOV.UK "no more than 75 characters per line".
   - 레일 280 + 간격 48 + 본문 760 = 1088px을 두 칸으로 쓰고, 그림과 표는 이 1088px을 다 쓴다(GOV.UK 2/3+1/3).
   - 글자 36/24/19/17/15/13: KRDS 제목 단계와 본문 17px·줄간격 150%.
   - 여백은 8/16/24/32/48/64 여섯 값만 쓴다: KRDS·Carbon·USWDS 8-Point grid. */

:root{
  color-scheme:light;
  --bg:#EEF2EE;
  --surface:#FFFFFF;
  --ink:#16232A;
  --muted:#556670;
  --accent:#1F5F4A;
  --link:#2E5E8E;
  --line:#CDD8D0;
  --worry:#A8352A;
  --caution:#B57A12;
  --normal:#6B7B75;
  --good:#2F7D5A;
  --best:#1F5F4A;
  --accent-wash:#E2EBE5;
  --caution-wash:#F6EEDD;
  --surface-2:#F6F8F6;
  --cell-ink:#FFFFFF;

  /* 판 */
  --shell:1200px;                 /* KRDS 최대 콘텐츠 폭 */
  --read:760px;                   /* GOV.UK 한 줄 75자 */
  --rail:280px;
  --rail-gap:48px;
  --fig:1088px;                   /* 레일 + 간격 + 읽기 열 */
  --gutter:clamp(16px,4vw,48px);

  /* 글자 */
  --fs-display:44px;
  --font-head:"Noto Serif KR","Apple SD Gothic Neo","Nanum Myeongjo",serif;
  --font-body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1614;
    --surface:#16211E;
    --ink:#E6ECE8;
    --muted:#98A9A0;
    --accent:#6BB79A;
    --link:#7FA9D6;
    --line:#26332E;
    --worry:#E08276;
    --caution:#D7A445;
    --normal:#93A69E;
    --good:#5FB48A;
    --best:#6BB79A;
    --accent-wash:#1B2A26;
    --caution-wash:#2A2517;
    --surface-2:#1B2723;
    --cell-ink:#0E1614;
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1614;
  --surface:#16211E;
  --ink:#E6ECE8;
  --muted:#98A9A0;
  --accent:#6BB79A;
  --link:#7FA9D6;
  --line:#26332E;
  --worry:#E08276;
  --caution:#D7A445;
  --normal:#93A69E;
  --good:#5FB48A;
  --best:#6BB79A;
  --accent-wash:#1B2A26;
  --caution-wash:#2A2517;
  --surface-2:#1B2723;
  --cell-ink:#0E1614;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  overflow-x:clip;
  /* 한글은 기본값에서 낱말 가운데가 끊기므로 낱말 단위로 줄을 바꾼다 */
  word-break:keep-all;overflow-wrap:break-word;
}

/* 판: 겉틀 1200px을 화면 가운데 두고, 1080px 이상에서 레일 280 + 간격 48 + 읽기 열 760을 가운데 둔다 */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.layout{display:block;padding-block:8px 64px}
.read{max-width:var(--read);min-width:0}
.rail{display:none}
@media (min-width:1080px){
  /* 머리·본문·바닥이 모두 같은 1088px 겉틀 안에서 왼쪽 선을 맞춘다 */
  .masthead .shell,footer.site .shell,.shell.layout{
    padding-inline:0;width:calc(100% - 2 * var(--gutter));max-width:var(--fig);margin-inline:auto}
  /* 바닥글은 겉틀 안에서 본문 열과 왼쪽 선을 맞춘다(진단 10) */
  footer.site .shell{padding-left:calc(var(--rail) + var(--rail-gap))}
  /* 차례는 왼쪽 칸에 띄우고 본문은 오른쪽 760px 열에 둔다. 격자 대신 띄움을 쓰는 까닭은
     두 칸을 다 쓰는 그림이 clear로 차례 아래에서 시작하게 하기 위해서다(겹침 방지). */
  .layout{display:flow-root}
  .rail{display:block;float:left;width:var(--rail);padding-top:32px}
  .read{margin-left:calc(var(--rail) + var(--rail-gap))}
  /* 표가 본문인 내부 쪽만 겉틀을 풀어 열이 잘리지 않게 한다. 머리·바닥도 같이 푼다 */
  .shell.layout.wide,body:has(.layout.wide) .masthead .shell,body:has(.layout.wide) footer.site .shell{
    max-width:none;width:auto;padding-inline:var(--gutter)}
  body:has(.layout.wide) footer.site .shell{padding-left:var(--gutter)}
  .chipbar{display:none}
}
/* 표가 본문인 쪽은 읽기 열을 넓혀 마지막 열이 잘리지 않게 한다 */
.layout.wide .read{max-width:none}

/* 그림과 표는 본문 열이 아니라 두 칸을 합친 1088px까지 쓴다.
   폭을 정해 둔 그림(격자·픽토그램·나란한 두 장·좁은 막대)은 늘리지 않는다. */
@media (min-width:1080px){
  .layout:not(.wide) .read figure.wide,
  .layout:not(.wide) .read figure:not(.pict),
  .layout:not(.wide) .read>.scroll,
  .layout:not(.wide) .read>section>.scroll{
    width:var(--fig);margin-left:calc(-1 * (var(--rail) + var(--rail-gap)));clear:left;
  }
  .layout:not(.wide) .read figure.wide,
  .layout:not(.wide) .read figure:not(.pict){padding:24px}
  /* 3층 펼침 안의 근거 그림은 아래 계층이므로 읽기 열 안에 둔다 */
  .layout:not(.wide) .read details.more .body figure{width:auto;margin-left:0;padding:16px}
}

/* 상단 머리 */
.masthead{border-bottom:1px solid var(--line);background:var(--bg)}
.masthead .shell{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding-block:16px}
.wordmark{font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--ink);text-decoration:none}
.wordmark:hover{color:var(--accent)}
.scope{font-size:13px;color:var(--muted)}

/* 좁은 화면 상단 칩 */
.chipbar{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px var(--gutter);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{white-space:nowrap;font-size:15px;color:var(--link);text-decoration:none;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.chips a[aria-current="page"]{border-color:var(--accent);color:var(--accent)}

/* 왼쪽 레일 */
.rail nav{display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line);padding-left:16px}
.rail nav a{font-size:15px;color:var(--muted);text-decoration:none;line-height:1.4}
.rail nav a:hover{color:var(--link)}
.rail nav a.on{color:var(--accent);font-weight:600}
.rail .railnote{margin-top:24px;padding-left:16px;border-left:3px solid var(--accent);font-size:15px;line-height:1.55;color:var(--muted)}
.rail .railnote b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:8px}

/* 글자: KRDS 제목 단계 36/24/19/17, 본문 17px */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.3;text-wrap:balance;margin:0}
h1{font-size:36px;margin:32px 0 16px}
h1::after{content:"";display:block;width:56px;height:3px;background:var(--accent);margin-top:16px;border-radius:2px}
h2{font-size:24px;margin:48px 0 8px}
h3{font-size:19px;margin:24px 0 8px}
h4{font-size:17px;margin:24px 0 8px}
p{margin:0 0 16px}
.thesis{font-family:var(--font-head);font-size:21px;line-height:1.5;margin:0 0 24px;text-wrap:balance}
.lede{color:var(--muted);margin:0 0 24px}
a{color:var(--link)}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--link);outline-offset:2px}
strong,b{font-weight:600}
.num{font-variant-numeric:tabular-nums}

/* 핵심 숫자 목록(상자 없이) */
.keys{margin:24px 0;border-top:1px solid var(--line)}
.keys div{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.keys .n{font-family:var(--font-head);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;min-width:96px;color:var(--ink)}
.keys .t{flex:1 1 320px;font-size:15px;color:var(--muted)}

/* 패널은 두 종류만: 이 숫자의 뜻, 주의 */
.meaning,.warn{border-radius:0 8px 8px 0;padding:16px 24px;margin:24px 0}
.meaning{background:var(--accent-wash);border-left:3px solid var(--accent)}
.warn{background:var(--caution-wash);border-left:3px solid var(--caution)}
.meaning b,.warn b{display:block;font-family:var(--font-head);font-size:15px;margin-bottom:8px}
.meaning b{color:var(--accent)}
.warn b{color:var(--caution)}
.meaning p,.warn p{margin:8px 0;font-size:15px;line-height:1.6}
.meaning p:last-child,.warn p:last-child{margin-bottom:0}

/* 그림 */
figure{margin:32px 0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}
/* 그림은 viewBox 폭 그대로 그린다. 좁아지면 줄기만 하고 1.0배를 넘겨 커지지 않으므로
   14px로 적은 그림 안 글자가 화면에서도 14px이다(ONS 최소 기준). */
figure svg,.hero svg{max-width:100%;height:auto;display:block;overflow:visible}
/* 설명용 삽화와 작은 설명 그림. 안에 글자가 없으므로 줄어도 읽기에 문제가 없다.
   .side는 겉틀 폭을 쓰지 않고 본문 열 안에 그대로 두는 작은 그림이다(site/illustrations/README.md). */
figure img{max-width:100%;height:auto;display:block;border-radius:8px}
figure.illus svg,figure.illus img{margin-inline:auto}
svg.ico{max-width:100%;height:auto;display:inline-block;vertical-align:top}

/* 용어와 문항을 설명하는 작은 그림. 한 장이 96~200px이고 본문 옆에 둔다(계획 11 정정) */
.read figure.side{padding:16px}
@media (min-width:1080px){
  .layout:not(.wide) .read figure.side{width:auto;max-width:var(--read);margin-left:0;padding:16px}
}

/* 영역마다 무엇을 물었나: 왼쪽에 작은 그림, 오른쪽에 문항 설명 */
.qitem{display:flex;gap:24px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--line)}
/* 그림이 한 장이든 두 장이든 글이 같은 자리에서 시작하도록 그림 칸 너비를 고정한다 */
.icos{flex:0 0 96px;display:flex;flex-direction:column;gap:8px}
.qtext{min-width:0;flex:1 1 auto}
.qtext h3{margin:0 0 8px}
.qtext>p{margin:0 0 8px;color:var(--muted);font-size:15px;line-height:1.6}
.qtext details.more{margin:8px 0 0;border-bottom:0}
ol.qlist{margin:0 0 16px;padding-left:24px}
ol.qlist li{margin-bottom:8px;line-height:1.6}
@media (max-width:719px){
  .qitem{flex-direction:column;gap:8px}
}
figcaption{font-size:15px;line-height:1.55;color:var(--muted);margin-top:8px}
.hero{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.lbl{font-size:14px;fill:var(--ink);font-family:var(--font-body)}
.val{font-size:14px;fill:var(--ink);font-variant-numeric:tabular-nums;font-family:var(--font-body)}
.pct{fill:var(--muted)}
.cellval{font-size:14px;fill:var(--cell-ink);font-variant-numeric:tabular-nums;font-family:var(--font-body)}
.axis{font-size:14px;fill:var(--muted);font-family:var(--font-body)}

/* 표 */
.scroll{overflow-x:auto;margin:32px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
th,td{padding:8px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{color:var(--muted);font-weight:600;font-size:15px;background:var(--surface-2);position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
td.wrap,th.wrap{white-space:normal}
td.r,th.r{text-align:right}

/* 계산 4단계: 실제 순서이므로 번호를 쓴다 */
ol.steps{margin:16px 0;padding:0;list-style:none;counter-reset:step}
ol.steps li{counter-increment:step;position:relative;padding:0 0 16px 48px;border-left:1px solid var(--line);margin-left:16px}
ol.steps li::before{content:counter(step);position:absolute;left:-13px;top:0;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#FFFFFF;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
ol.steps li:last-child{border-left-color:transparent;padding-bottom:0}
ol.steps b{display:block;font-family:var(--font-head);margin-bottom:8px}
ol.steps span{color:var(--muted);font-size:15px}

/* 목록 */
ul.plain{margin:16px 0;padding-left:24px}
ul.plain li{margin-bottom:8px}

/* 펼침 */
details{border-bottom:1px solid var(--line);padding:8px 0}
details summary{cursor:pointer;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";color:var(--accent);font-weight:600;margin-right:8px}
details[open] summary::before{content:"\2212"}
details p{color:var(--muted);margin:8px 0 0}

/* 바닥: 본문 열과 같은 겉틀 안에 두어 왼쪽 선을 맞춘다 */
footer.site{border-top:1px solid var(--line);background:var(--surface-2)}
footer.site .shell{padding-block:32px 48px}
footer.site p{font-size:15px;color:var(--muted);margin:0 0 8px;max-width:var(--read)}
footer.site p:last-child{margin-bottom:0}

/* 내부 사이트 표시 */
.internal-mark{display:inline-block;font-size:13px;color:var(--worry);border:1px solid var(--worry);border-radius:999px;padding:0 8px}

/* 내부 시설 검색 */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px}
.filters input,.filters select{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px}
.filters input{flex:1 1 240px;min-width:0}
.hitline{font-size:15px;color:var(--muted);margin:0 0 16px}
tbody.fac{border-bottom:1px solid var(--line)}
tbody.fac tr.sum{cursor:pointer}
tbody.fac tr.sum:hover td{background:var(--surface-2)}
tbody.fac tr.det{display:none}
tbody.fac.open tr.det{display:table-row}
tbody.fac tr.det td{white-space:normal;color:var(--muted);font-size:15px;background:var(--surface-2);line-height:1.6}
tbody.fac tr.det td p{margin:0 0 8px;max-width:66ch}
tbody.fac tr.det td p:last-child{margin-bottom:0}
tbody.fac.hide{display:none}
.g{display:inline-block;min-width:52px;text-align:center;border-radius:999px;padding:0 8px;font-size:13px;border:1px solid currentColor}
.g-우려{color:var(--worry)}
.g-주의{color:var(--caution)}
.g-보통{color:var(--normal)}
.g-양호{color:var(--good)}
.g-우수{color:var(--best)}
.g-부분{color:var(--muted)}

/* 대시보드 이식본 */
.dash h3{font-size:17px;margin:0 0 8px}
.dash .row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.dash .card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:280px;flex:1 1 280px}
.dash .note{background:var(--accent-wash);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:16px 24px;font-size:15px;line-height:1.6;margin-bottom:24px}
.dash .bar{height:12px;background:var(--accent);display:inline-block;border-radius:3px;vertical-align:middle}
.dash table{font-size:13px}
.dash input[type=range]{width:150px;accent-color:var(--link);vertical-align:middle}
.dash button{font:inherit;font-size:15px;color:var(--link);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.dash button:hover{border-color:var(--link)}
.dash #gloss p,.dash #bottom p{font-size:15px;color:var(--muted);margin:8px 0}
.dash #gloss b{color:var(--ink)}
.dash #sliders div,.dash #grades div,.dash #sido div,.dash #hist div{font-size:15px;padding:0;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:no-preference){
  details[open] p{animation:fade .18s ease-out}
  @keyframes fade{from{opacity:.3}to{opacity:1}}
}
@media print{
  .chipbar,.rail{display:none}
  .read{margin-left:0}
  body{background:#FFFFFF}
}

/* 쪽 사이 이동 */
.pagenav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-left:auto}
.pagenav a{font-size:15px;color:var(--muted);text-decoration:none;white-space:nowrap}
.pagenav a:hover{color:var(--link)}
.pagenav a[aria-current="page"]{color:var(--accent);font-weight:600}
@media (max-width:719px){.pagenav{margin-left:0;width:100%;gap:8px 16px}}

/* ────── 좁은 화면 전용 그림(계획 8 과제 3) ──────
   한 장의 SVG로 1088px과 390px을 모두 1.0배로 그릴 수는 없다. 그래서 그림마다 판을 둘 낸다.
   720px에서 갈리고 한 번에 하나만 보인다. 두 판의 값은 같다.
   - 막대 계열의 좁은 판은 SVG가 아니라 HTML 줄이다. HTML 글자는 그릇 폭에 비례해 줄지 않으므로
     14px로 적으면 390px에서도 14px이다(ONS: 차트 글자 최소 14px).
   - 선 계열과 폭이 정해진 그림은 같은 함수를 328px로 한 번 더 불러 그린 SVG다. */
.fign{display:none}
@media (max-width:719px){
  .figw{display:none}
  .fign{display:block}
  /* 390px에서 328px 그림이 들어가도록 그림 안쪽 여백과 펼침 들여쓰기를 줄인다 */
  figure,.hero{padding:8px;overflow-x:auto}
  .layout .read details.more .body{padding-left:8px}
  .opener figure{padding:0}
}
/* 보이지는 않지만 보조기기는 읽는 글. 좁은 판의 설명을 여기에 둔다 */
.vh{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 좁은 판의 한 줄: 이름과 값이 윗줄, 막대가 아랫줄 */
.nrow{margin:0 0 16px}
.nrow.sub{margin:0 0 8px}
.nfig>.nrow:last-child,.ngroup>.nrow:last-child{margin-bottom:0}
.nhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:0 0 8px}
.nlab{font-size:14px;line-height:1.4;color:var(--ink)}
.nval{font-size:14px;line-height:1.4;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ntrack{position:relative;height:16px;border-radius:3px;background:var(--surface-2)}
/* 0선은 막대 위에 그린다(::after라 막대보다 나중에 칠해진다) */
.ntrack.zero::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--line)}
.nbar{display:block;height:16px;border-radius:3px}
.nref{position:absolute;top:0;width:3px;height:16px;border-radius:1px;background:var(--ink);transform:translateX(-50%)}
/* 아령: 두 점과 그 사이를 잇는 선 */
.npair{display:block;position:relative;top:6px;height:5px;border-radius:3px;background:var(--line)}
.ndot{position:absolute;top:1px;width:14px;height:14px;border-radius:50%;transform:translateX(-50%)}
/* 상자그림(계획 12): 수염은 바탕 위의 가는 선, 상자는 농도를 낮춘 칠, 한가운데 값은 굵은 눈금,
   평균은 빈 동그라미다. 색은 줄마다 인라인으로 토큰 변수를 받는다 */
.nwhisk{display:block;position:relative;top:7px;height:2px;background:var(--line)}
.nboxr{position:absolute;top:1px;height:14px;border-radius:3px;border:1px solid;opacity:.45}
.nmed{position:absolute;top:0;width:3px;height:16px;border-radius:1px;transform:translateX(-50%)}
.nmean{position:absolute;top:3px;width:10px;height:10px;border-radius:50%;
  border:2px solid;background:var(--surface);transform:translateX(-50%)}
.naxis{font-size:14px;line-height:1.4;color:var(--muted);margin:0 0 16px}
.nlist{font-size:14px;line-height:1.5;color:var(--muted);margin:8px 0 0}
.ngroup{margin:0 0 24px}
.ngname{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 8px}

/* 좁은 판의 누적 막대: 조각 안에 글자를 넣을 자리가 없으므로 이름표를 위에 한 번 둔다 */
.nlegend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 16px;padding:0;list-style:none}
.nlegend li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;color:var(--ink)}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px}
.sw.top{box-shadow:inset 0 0 0 1px var(--ink)}
.nstack{display:flex;height:24px;border-radius:3px;overflow:hidden}
.nseg{display:block;height:24px}
.nseg.top{box-shadow:inset 0 0 0 1px var(--ink)}

/* 좁은 판의 흐름도: 칸을 옆으로 늘어놓지 않고 위에서 아래로 쌓는다 */
.nflow{margin:0}
.nfcol{margin:0}
.nfhead{font-size:14px;font-weight:600;color:var(--accent);margin:0 0 8px}
.nfbox{border:1px solid var(--line);border-radius:6px;background:var(--surface-2);padding:8px 16px;margin:0 0 8px}
.nfbox b{display:block;font-size:15px;line-height:1.4;color:var(--ink)}
.nfbox span{display:block;font-size:14px;line-height:1.45;color:var(--muted)}
.nfbox .nffrom{color:var(--accent);margin-top:8px}
.nfarrow{font-size:14px;line-height:1.4;color:var(--muted);text-align:center;margin:0 0 8px}

/* 좁은 판의 연도 흐름: 가로 축 대신 위에서 아래로 읽는 목록 */
.ntl{margin:0;padding:0;list-style:none}
.ntl li{border-left:1px solid var(--line);padding:0 0 16px 16px;margin:0}
.ntl li:last-child{border-left-color:transparent;padding-bottom:0}
.ntl .ntyear{display:block;font-size:14px;line-height:1.4;color:var(--muted)}
.ntl b{display:block;font-family:var(--font-head);font-size:28px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.ntl li>b+span{display:block;font-size:14px;line-height:1.5;color:var(--muted);margin-top:8px}

/* 핵심 발견: 상자 없이 가는 선으로만 나눈다 */
.findings{margin:24px 0 32px;border-top:1px solid var(--line)}
.findings .f{padding:16px 0;border-bottom:1px solid var(--line)}
.findings .claim{font-family:var(--font-head);font-size:19px;line-height:1.5;margin:0 0 8px}
.findings .claim b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.findings .so{font-size:15px;color:var(--muted);margin:0}
.findings .so a{margin-left:8px;white-space:nowrap}
.takeaway{font-size:15px;color:var(--muted)}
.leg{font-size:14px;fill:var(--muted);font-family:var(--font-body)}

/* ────── 읽기 층(계획 6): 1층 큰 그림, 2층 근거 그림, 3층 펼침 ────── */

/* 1층 머리 구역. 두 칸 레이아웃 위에 놓아 겉틀 폭을 다 쓴다. 배경은 강조 연하게, 높이는 내용이
   정하고 화면 높이에 맞추지 않는다. 글은 읽기 열 폭을 지키고 그림만 겉틀 폭을 쓴다. */
.opener{background:var(--accent-wash);border-top:3px solid var(--accent);padding-block:32px}
.opener h1{margin-top:0}
.opener .thesis{font-size:21px;line-height:1.5;margin:0 0 16px;max-width:var(--read)}
.opener .lede{margin:0 0 24px;max-width:60ch}
.opener .takeaway,.opener .warn{max-width:var(--read)}
.opener figure{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.opener figcaption{max-width:64ch}
/* 논지 바로 아래에서 "이 숫자가 무슨 뜻인가"에 먼저 답하는 자리(계획 10) */
.opener h2.ask{font-size:24px;margin:32px 0 8px;max-width:var(--read)}
.opener h2.ask+.lede{margin-bottom:16px}
/* 머리 구역의 펼침. 글과 표는 읽기 열 폭을 지키고 그림만 겉틀 폭을 쓴다 */
.opener details.more .body p,.opener details.more .body .scroll{max-width:var(--read)}
.opener details.more .body figure{margin:16px 0}

/* 쪽 끝의 "이 쪽에서 읽은 것"(계획 11 4절). 새 사실을 더하지 않고 그 쪽 안의 값만 되짚는다.
   차례에 잡히지 않게 <section>이 아니라 <aside>로 두고, 본문 절과 달리 그림을 두지 않는다. */
.readout{margin:48px 0 0;padding-top:24px;border-top:3px solid var(--accent)}
.readout h2{font-size:19px;margin:0 0 8px}
.readout ul{margin:0;padding-left:24px}
.readout li{margin-bottom:8px;line-height:1.6}
.readout li:last-child{margin-bottom:0}
.readout b{color:var(--accent);font-variant-numeric:tabular-nums}

/* 지표마다 무엇을 재고 무엇을 말할 수 없는지 적는 표(계획 11 3-2).
   칸이 모두 문장이라 좁은 화면에서 폭을 나눠 가지면 한 줄에 두세 글자가 되어 읽을 수 없다.
   그래서 최소 폭을 주어 칸을 좁히는 대신 표를 가로로 밀어 보게 한다(.scroll이 감싸고 있다). */
table.guide{min-width:880px}
table.guide td,table.guide th{white-space:normal;vertical-align:top}
table.guide td:first-child{font-weight:600;white-space:nowrap}

/* 그림이 답하는 물음(계획 11 3-3). 캡션 첫 줄에 두어 무엇을 보러 온 그림인지 먼저 말한다 */
figcaption .q{display:block;color:var(--ink);font-weight:600;margin-bottom:8px}

/* 용어 목록. 두 칸 표보다 읽는 흐름이 덜 끊긴다 */
.terms{margin:24px 0;border-top:1px solid var(--line)}
.terms dt{font-weight:600;padding-top:16px}
.terms dd{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line);color:var(--muted)}

/* 눈금선. 값 축에만 긋고 축선·눈금 막대는 두지 않는다(BBC bbplot) */
.gl{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.gleg{font-size:15px;fill:var(--ink);font-family:var(--font-body)}
.glegn{font-weight:600;font-variant-numeric:tabular-nums}

/* 새 그림 조각의 선과 바탕 */
.pair{stroke:var(--line);stroke-width:5;stroke-linecap:round}
.axrule{stroke:var(--line);stroke-width:1}
.slope{fill:none;stroke-width:2.5;stroke-linecap:round}
.track{fill:var(--line)}
.ref{fill:var(--ink)}

/* 표시용 숫자 */
.big{display:block;font-family:var(--font-head);font-weight:600;font-size:var(--fs-display);
  line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
.big small{display:block;font-family:var(--font-body);font-weight:400;font-size:13px;
  line-height:1.4;color:var(--muted)}

/* 핵심 발견 표: 상자 없이 가는 선. 문장이 먼저 읽히고 숫자는 그 문장 안에서 문장을 받친다.
   예전에는 44px 숫자가 왼쪽 문장보다 먼저 눈에 들어와 무엇을 센 값인지 알 수 없었다(docs/36 3절). */
table.keyfind{margin:24px 0 32px;border-top:1px solid var(--line)}
table.keyfind caption{text-align:left;font-family:var(--font-head);font-weight:600;font-size:19px;padding:0 0 8px}
table.keyfind td{padding:16px 0;border-bottom:1px solid var(--line);white-space:normal;vertical-align:baseline}
table.keyfind td.claim{font-family:var(--font-head);font-size:19px;line-height:1.5}
table.keyfind td.claim b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
table.keyfind td.cmp{width:26%;padding-left:24px;font-size:15px;line-height:1.5;color:var(--muted)}
table.keyfind td.cmp b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
table.keyfind td.src{width:1%;padding-left:24px;white-space:nowrap;font-size:15px}
@media (max-width:719px){
  table.keyfind,table.keyfind tbody,table.keyfind tr,table.keyfind td{display:block;width:auto}
  table.keyfind tr{padding:16px 0;border-bottom:1px solid var(--line)}
  table.keyfind td{padding:0;border:0;text-align:left}
  /* 좁은 화면에서는 칸이 줄에서 블록으로 바뀌므로 넓은 판의 폭 지정을 되돌린다 */
  table.keyfind td.cmp,table.keyfind td.src{width:auto;padding-left:0}
  table.keyfind td.claim{font-size:17px}
  table.keyfind td.cmp{padding-top:8px}
  table.keyfind td.src{padding-top:8px}
}

/* 2층 비교 표: 차이 열에 방향을 적는다 */
table.compare{margin:24px 0;border-top:1px solid var(--line)}
table.compare th,table.compare td{padding:8px 16px 8px 0;border-bottom:1px solid var(--line)}
table.compare thead th{position:static;background:transparent}
table.compare th.l,table.compare td.l{white-space:normal}
table.compare td.d{width:1%;white-space:nowrap}
table.compare .dir{color:var(--ink);font-variant-numeric:tabular-nums}
table.compare .dir span{font-size:11px}
table.compare .dir.good{color:var(--good)}
table.compare .dir.bad{color:var(--worry)}

/* 3층 펼침: 요약 줄이 안에 무엇이 있는지 말한다 */
details.more{margin:24px 0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.more>summary{padding:16px 0;font-family:var(--font-body);font-size:15px;font-weight:400;color:var(--muted)}
details.more>summary:hover{color:var(--ink)}
details.more[open]>summary{color:var(--ink);font-weight:600}
details.more .body{margin:0 0 8px;padding:0 0 24px 16px;border-left:2px solid var(--line)}
details.more .body p{margin:0 0 16px;color:var(--ink)}
details.more .body>:last-child{margin-bottom:0}
details.more .body figure,details.more .body .scroll{margin-top:8px}

/* 도식(과제 3): 흐름도·연표·도넛·픽토그램. 색은 토큰만 쓰고 명시적으로 칠한다 */
.fbox{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.fhead{font-size:14px;font-weight:600;fill:var(--accent);font-family:var(--font-body)}
.flab{font-size:15px;fill:var(--ink);font-family:var(--font-body)}
.fsub{font-size:14px;fill:var(--muted);font-family:var(--font-body)}
.arrow{fill:none;stroke:var(--muted);stroke-width:1.5}
.arrowhead{fill:var(--muted)}
.tline{stroke:var(--line);stroke-width:2}
.tnote{font-size:14px;fill:var(--muted);font-family:var(--font-body)}
.ringn{font-family:var(--font-head);font-size:28px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}
.ringu{font-size:14px;fill:var(--muted);font-family:var(--font-body)}
.pnum{font-family:var(--font-head);font-size:28px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}

/* 계산 단계의 입력과 출력 한 줄 */
ol.steps span.io{display:block;font-size:13px;color:var(--muted);margin-top:8px}

/* 눈금을 거의 다 채운 막대의 값 글자. 막대 왼쪽 바탕 위에 오므로 막대 색과 대비를 따질 필요가 없다 */
.valin{font-size:14px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums;font-family:var(--font-body)}

/* 시도 타일 지도(계획 11). 네모 안에 시도 이름·우려 비율·시설 수를 적는다.
   .oncell은 진한 칸 위의 글자색이고, .tilek 뒤에 두어 뒤에 오는 규칙이 이기게 한다. */
.tilek{font-size:15px;fill:var(--ink);font-family:var(--font-body)}
.tilev{font-size:19px;font-weight:600;fill:var(--ink);font-family:var(--font-body);font-variant-numeric:tabular-nums}
.tilen{font-size:14px;fill:var(--muted);font-family:var(--font-body);font-variant-numeric:tabular-nums}
.oncell{fill:var(--cell-ink)}

/* 우수 등급은 다크에서 양호와 명도가 거의 같아, 그 조각·점에만 가는 테두리를 더해 구분한다 */
.top{stroke:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .top{stroke:var(--ink);stroke-width:1}
}
:root[data-theme="dark"] .top{stroke:var(--ink);stroke-width:1}

/* 꺾은선 */
.ln{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* 상자그림(계획 12 과제 2·3). 상자는 같은 색의 농도만 낮추고 테두리로 가른다.
   한가운데 값은 굵은 선, 평균은 바탕색을 채운 빈 동그라미라 서로 겹쳐도 갈린다 */
.boxr{fill-opacity:.22;stroke-width:1.5}
.boxmed{stroke-width:3;stroke-linecap:round}
.boxmean{fill:var(--surface);stroke-width:2}
.boxln{fill:none;stroke-width:1.5;stroke-dasharray:6 4}
.whisk{stroke-width:1.5}

/* 문항으로 묶은 발산 막대(계획 12 과제 4). 묶음 이름 줄은 보기 이름보다 한 단계 굵고 크다 */
.qhead{font-size:15px;font-weight:600;fill:var(--ink);font-family:var(--font-body)}

/* 머리 구역의 두 그림: 넓은 화면에서는 나란히, 좁은 화면에서는 세로로 쌓는다 */
.opener .pair2{display:grid;gap:16px;margin-bottom:24px}
.opener .pair2 figure{margin:0}
@media (min-width:1080px){.opener .pair2{grid-template-columns:1fr 1fr;align-items:start}}
@media (min-width:1080px){
  /* 추세와 격자는 나란히, 변화량 막대는 그 아래 폭 전체를 쓴다 */
  .opener .pair2{grid-template-areas:"a b" "c c"}
  .opener .pair2>figure:nth-child(1){grid-area:a}
  .opener .pair2>figure:nth-child(2){grid-area:c}
  .opener .pair2>figure:nth-child(3){grid-area:b}
}

/* 연도별 변화 쪽의 고르는 줄. 고른 축 단추가 눈에 띄게 다르게 보여야 한다 */
.picker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:24px 0 8px}
.picker label,.picker .pklab{font-size:15px;color:var(--muted)}
.picker select{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:8px;max-width:100%}
.axbtns{display:flex;flex-wrap:wrap;gap:8px}
.axbtn{font:inherit;font-size:15px;color:var(--link);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.axbtn:hover{border-color:var(--link)}
.axbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:600}

/* 좁은 화면에서는 머리 구역을 줄여 변화량 막대가 첫 화면에 가깝게 오도록 한다 */
@media (max-width:719px){
  .opener{padding-block:24px}
  .opener h1{font-size:28px}
  .opener .thesis{font-size:19px;line-height:1.5}
  .opener figcaption{margin-top:8px}
}