/* ═══ 웹진 디자인 규칙 v1 (2026-11-03) — 이 한 파일이 색·간격·글자·부품을 정한다 ═══
   쓰는 법: <body class="wz"> 로 켜고 이 CSS 를 마지막에 불러온다(기존 테마 토큰 뒤). 켜지 않은 쪽은 아무것도 달라지지 않는다.
   원칙: 한 화면 한 메시지 · 큰 제목 · 8px 간격 · 테두리와 그림자 없음 · 전환 200ms · 글은 접고 그림 먼저.
   색: 기본 다크, 강조는 웹진 노란색 «하나». 형광 띠(.wz-title mark)는 큰 제목에만. 여러 색은 그래프·지도 «안에서만». 라이트 전환 유지(html[data-theme="light"]).
   글꼴: Pretendard 한 가지, 3단계(제목 --t-title · 본문 --t-body · 보조 --t-aux). */
:is(body.wz,html[data-wz] body){
  --wz-bg:#141416; --wz-s1:#1d1d20; --wz-s2:#28282c; --wz-tx:#ECE8DF; --wz-mute:#9b968b;
  --wz-accent:#D9A227; --wz-on-accent:#1B1A1A;
  --u:8px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --t-title:clamp(36px,7vw,72px); --t-body:16px; --t-aux:13px;
  --r:16px; --ease:200ms cubic-bezier(.2,.7,.2,1);
  /* 기존 토큰 이름을 같은 값으로 잇는다 — 머리말·바닥글·검색 등 옛 부품이 이 규칙을 따라 바뀌게 */
  --ivory:var(--wz-bg); --paper:var(--wz-bg); --surface:var(--wz-s1); --carbon:var(--wz-tx); --ink:var(--wz-tx);
  --ink-70:var(--wz-mute); --grey:var(--wz-mute); --dim:var(--wz-mute); --gold:var(--wz-accent); --on-gold:var(--wz-on-accent);
  --line:transparent; --line-soft:transparent; --shadow-drop:transparent;
  background:var(--wz-bg); color:var(--wz-tx);
  font-family:Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif; font-size:var(--t-body); line-height:1.7;
  -webkit-font-smoothing:antialiased; word-break:keep-all; text-wrap:pretty;
}
html[data-theme="light"] body.wz,html[data-theme="light"][data-wz] body{
  --wz-bg:#FBF7EE; --wz-s1:#F1EADA; --wz-s2:#E6DDC8; --wz-tx:#1B1A1A; --wz-mute:#6B665B; --wz-accent:#F5B817; --wz-on-accent:#1B1A1A;
}
:is(body.wz,html[data-wz] body) *{box-sizing:border-box}
:is(body.wz,html[data-wz] body) *, :is(body.wz,html[data-wz] body) *::before, :is(body.wz,html[data-wz] body) *::after{box-shadow:none!important}
:is(body.wz,html[data-wz] body) a{color:inherit}

/* ── 머리글 ── 한 화면 한 메시지: 작은 위제목 + 큰 제목 + 한 줄 설명 */
.wz-head{padding:var(--s6) 0 var(--s4)}
.wz-kicker{font-size:var(--t-aux);letter-spacing:.14em;color:var(--wz-mute);font-weight:700;margin:0 0 var(--s2)}
.wz-title{font-size:var(--t-title);line-height:1.08;letter-spacing:-.035em;font-weight:900;margin:0 0 var(--s3)}
.wz-title mark{background:linear-gradient(transparent 58%,var(--wz-accent) 58%);color:inherit;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wz-lead{font-size:18px;line-height:1.6;color:var(--wz-mute);max-width:36em;margin:0}

/* ── 카드 · 칩 · 필터 ── 면(面)으로만 나눈다 */
.wz-card{display:block;background:var(--wz-s1);border:0;border-radius:var(--r);padding:var(--s3);text-decoration:none;transition:background var(--ease),transform var(--ease)}
a.wz-card:hover,.wz-card[role=button]:hover{background:var(--wz-s2);transform:translateY(-2px)}
.wz-card h3{font-size:20px;line-height:1.3;letter-spacing:-.02em;margin:0 0 var(--s1)}
.wz-card p{font-size:var(--t-aux);color:var(--wz-mute);margin:0;line-height:1.6}
.wz-chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:999px;background:var(--wz-s1);color:var(--wz-mute);font-size:14px;font-weight:700;transition:background var(--ease),color var(--ease)}
.wz-chip:hover{background:var(--wz-s2);color:var(--wz-tx)}
.wz-chip[aria-pressed=true],.wz-chip.on{background:var(--wz-accent);color:var(--wz-on-accent)}
.wz-chip:focus-visible{outline:2px solid var(--wz-accent);outline-offset:2px}
.wz-filter{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s3) 0}

/* ── 펼침 ── 글은 접어 두고 필요할 때 연다 */
.wz-fold{background:var(--wz-s1);border-radius:var(--r);margin:var(--s2) 0}
.wz-fold>summary{list-style:none;cursor:pointer;padding:var(--s2) var(--s3);font-weight:700;display:flex;justify-content:space-between;align-items:center;transition:color var(--ease)}
.wz-fold>summary::-webkit-details-marker{display:none}
.wz-fold>summary::after{content:"+";font-size:22px;line-height:1;color:var(--wz-mute);transition:transform var(--ease)}
.wz-fold[open]>summary::after{transform:rotate(45deg)}
.wz-fold>.wz-fold-body{padding:0 var(--s3) var(--s3);animation:wz-in var(--ease)}
@keyframes wz-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ── 지도(그래프) ── 점·선의 여러 색은 «여기 안에서만» */
.wz-graph{position:relative;background:var(--wz-s1);border-radius:var(--r);overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.wz-graph.drag{cursor:grabbing}
.wz-graph svg{display:block;width:100%;height:100%}
.wz-graph .edge{stroke:var(--wz-mute);stroke-opacity:.07;stroke-width:1;transition:stroke-opacity var(--ease),stroke-width var(--ease)}
.wz-graph .edge.hot{stroke:var(--wz-accent);stroke-opacity:.95;stroke-width:2}
.wz-graph.has-sel .edge:not(.hot){stroke-opacity:.03}
.wz-graph .node circle{transition:r var(--ease),opacity var(--ease)}
.wz-graph .node text{font-size:12px;font-weight:700;fill:var(--wz-tx);pointer-events:none;paint-order:stroke;stroke:var(--wz-s1);stroke-width:3px;stroke-linejoin:round}
.wz-graph .node.dim{opacity:.18}
.wz-graph .glabel{fill:var(--wz-tx);opacity:.14;font-weight:800;letter-spacing:-.02em;pointer-events:none;transition:opacity var(--ease)}
.wz-graph .node.sel circle{stroke:var(--wz-accent);stroke-width:3}
.wz-panel{background:var(--wz-s1);border-radius:var(--r);padding:var(--s3);min-height:160px}
.wz-panel .wz-kicker{margin-bottom:var(--s1)}
.wz-panel h2{font-size:28px;letter-spacing:-.03em;margin:0 0 var(--s1)}
.wz-panel p{color:var(--wz-mute);margin:0 0 var(--s2)}
.wz-legend{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);font-size:var(--t-aux);color:var(--wz-mute);margin:var(--s2) 0}
.wz-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* ── 연표(시간축) ── 좌우로 끌고, 구간을 누르면 펼친다 */
.wz-timeline{position:relative}
.wz-tl-scroll{overflow-x:auto;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;padding:var(--s2) 0}
.wz-tl-scroll::-webkit-scrollbar{display:none}
.wz-tl-scroll.drag{cursor:grabbing}
.wz-tl-track{display:flex;gap:4px;min-width:max-content;padding:0 var(--s2)}
.wz-tl-band{all:unset;box-sizing:border-box;cursor:pointer;flex:none;height:96px;border-radius:12px;background:var(--wz-s1);padding:var(--s2);display:flex;flex-direction:column;justify-content:space-between;transition:background var(--ease),transform var(--ease)}
.wz-tl-band:hover{background:var(--wz-s2)}
.wz-tl-band[aria-expanded=true]{background:var(--wz-accent);color:var(--wz-on-accent)}
.wz-tl-band b{font-size:15px;letter-spacing:-.02em}
.wz-tl-band small{font-size:12px;opacity:.7}
.wz-tl-detail{background:var(--wz-s1);border-radius:var(--r);padding:var(--s3);margin-top:var(--s2);animation:wz-in var(--ease)}
.wz-tl-detail[hidden]{display:none}

/* ── 지도(지리) ── 자리만 정한다(지형도 개편 때 채움): 바탕 면 + 점은 그래프와 같은 규칙 */
.wz-geo{background:var(--wz-s1);border-radius:var(--r);overflow:hidden;aspect-ratio:16/10}

/* ── 움직임을 줄여 달라는 기기 ── */
@media (prefers-reduced-motion:reduce){:is(body.wz,html[data-wz] body) *{animation:none!important;transition:none!important}}
@media (max-width:640px){.wz-head{padding:var(--s5) 0 var(--s3)}.wz-lead{font-size:16px}}