/* 재난과 소방법령(fire-law-history.html) — 첫 화면 관계망(다크 섬 .flh-hero.theme-dark) + 개정 점 · 대형재난 지도 · 재난 카드 · 소방법령정보 출구 · 자료 기준.
 * 색은 토큰만(theme-ratchet 상한 0). 캔버스 색은 범례 견본(.flh-key [data-k])의 계산값을 assets/fire-law-history.js 가 읽는다.
 * 그림 없는 재난의 개정 기록 판(.flh-board)은 기술 선화와 같은 다크 섬이다. 규칙: .claude/rules/hubs/fire-law-history.md */

.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:640px;height:640px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:70%;right:-200px;animation:flhb1 24s ease-in-out infinite alternate}
.blob.b{width:520px;height:520px;background:radial-gradient(circle,var(--glow3),transparent 60%);top:150%;left:-220px;animation:flhb2 28s ease-in-out infinite alternate}
@keyframes flhb1{to{transform:translate(-60px,40px)}}
@keyframes flhb2{to{transform:translate(70px,-50px)}}
@media (prefers-reduced-motion:reduce){.blob.a,.blob.b{animation:none}}

.flh-main{padding-bottom:84px;word-break:keep-all;overflow-wrap:anywhere}

/* 색 이름 — 정지 그림·범례·캔버스가 같은 값을 쓴다. */
.flh-hero,.flh-section,.flh-board{
  --flh-g0:var(--ember); --flh-g1:var(--amber); --flh-g2:var(--blue); --flh-g3:var(--viz-1);
  --flh-k0:var(--amber); --flh-k1:var(--ember); --flh-k2:var(--blue); --flh-k3:var(--viz-1)}
.flh-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;font-size:12px;color:var(--txt-dim)}
.flh-key span{display:inline-flex;align-items:center;gap:6px}
.flh-key i{display:inline-block;width:9px;height:9px;border-radius:50%}
.flh-key i[hidden],.flh-tip[hidden]{display:none}
.flh-key [data-k="g0"],.flh-key [data-k="k1"]{background:var(--flh-k1)}
.flh-key [data-k="g1"],.flh-key [data-k="k0"]{background:var(--flh-k0)}
.flh-key [data-k="g2"],.flh-key [data-k="k2"]{background:var(--flh-k2)}
.flh-key [data-k="g3"],.flh-key [data-k="k3"]{background:var(--flh-k3)}
.flh-key [data-k="line"]{background:var(--txt)}
.flh-key [data-k="axis"]{background:var(--txt-dim)}
.flh-note{margin:10px 0 0;font-size:13px;line-height:1.7;color:var(--txt-dim);max-width:900px;text-wrap:pretty}

/* 첫 화면 */
.flh-hero{position:relative;color:var(--txt);overflow:hidden;border-bottom:1px solid var(--glass-line);
  background:
    radial-gradient(55% 70% at 70% 45%,rgba(var(--ember-rgb),.08),transparent 70%),
    radial-gradient(40% 50% at 8% 90%,rgba(var(--blue-rgb),.06),transparent 70%),
    var(--bg)}
.flh-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(var(--ink-rgb),.016) 0 1px,transparent 1px 3px)}
.flh-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:28px;align-items:center;max-width:1600px;margin:0 auto;padding:34px 30px 30px;min-height:min(88vh,860px)}
.flh-eyebrow{margin:14px 0 12px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:var(--ember)}
.flh-copy h1{margin:0;font:700 clamp(36px,4vw,58px)/1.06 var(--font-sans);letter-spacing:-.04em;text-wrap:balance}
.flh-lead{margin:16px 0 0;color:var(--read);font-size:15px;line-height:1.75;text-wrap:pretty}
.flh-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.flh-btn{display:inline-flex;align-items:center;min-height:44px;padding:11px 18px;border:1px solid var(--glass-line);border-radius:10px;background:var(--panel);color:var(--txt);font-size:14px;font-weight:600;transition:border-color .2s,transform .2s}
.flh-btn:hover{border-color:rgba(var(--ember-rgb),.6);transform:translateY(-2px)}
.flh-btn.is-primary{background:var(--ember);border-color:var(--ember);color:var(--on-accent)}
.flh-copy .hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin-top:26px;padding-top:18px;border-top:1px solid var(--glass-line)}
.flh-copy .hero-stats div{display:flex;flex-direction:column-reverse;gap:4px}
.flh-copy .hero-stats b{font:700 34px/1 "Space Grotesk",var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--txt)}
.flh-copy .hero-stats span{font-size:12px;color:var(--txt-dim)}
.flh-stat-note{margin:12px 0 0;font-size:12.5px;line-height:1.65;color:var(--txt-dim);text-wrap:pretty}
.flh-net{position:relative;margin:0;min-width:0}
.flh-net-stage{position:relative}
.flh-net-still{display:block;width:100%;height:auto}
.flh-net-still .g0{fill:var(--flh-g0)} .flh-net-still .g1{fill:var(--flh-g1)}
.flh-net-still .g2{fill:var(--flh-g2)} .flh-net-still .g3{fill:var(--flh-g3)}
.flh-net-still circle{opacity:.82}
.flh-net-label{fill:var(--txt);font:600 13px var(--font-sans);paint-order:stroke;stroke:var(--bg);stroke-width:4px;transition:opacity .5s}
.flh-net.is-intro .flh-net-label{opacity:0}
.flh-net-canvas{position:absolute;left:0;top:0;display:block;opacity:0;transition:opacity .4s}
.flh-net.is-live .flh-net-canvas{opacity:1}
.flh-net.is-live .flh-net-still circle{opacity:0}
.flh-tip{position:absolute;z-index:4;display:flex;flex-direction:column;gap:3px;max-width:300px;padding:9px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--glass-line);font-size:12.5px;line-height:1.45;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.flh-tip span{color:var(--txt-dim)}
.flh-tip a{color:var(--ember);font-weight:600}
.flh-top{margin-top:12px;font-size:13px;color:var(--txt-dim)}
.flh-top summary{cursor:pointer;color:var(--txt)}
.flh-top ol{margin:8px 0 0;padding-left:20px;line-height:1.8}
.flh-top a{color:var(--txt)}

/* 아래 절 — 페이지 배경(오로라·그레인)이 보이는 일반 표면 */
.flh-section{padding-top:84px;scroll-margin-top:72px}
.flh-head{max-width:860px;margin-bottom:22px}
.flh-label{margin:0 0 8px;font:600 12px/1 "Space Grotesk",var(--font-sans);letter-spacing:.12em;color:var(--ember)}
.flh-head h2{margin:0;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em}
.flh-head p:not(.flh-label){margin:12px 0 0;color:var(--read);line-height:1.75;text-wrap:pretty}
.flh-dots,.flh-time{margin:0;padding:22px;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.flh-dots-stage{position:relative}
.flh-dots-canvas{display:block}
.flh-dots:not(.is-live) .flh-dots-stage{display:none}
.flh-years{margin-top:14px;font-size:13px}
.flh-years summary{cursor:pointer;color:var(--txt)}
.flh-table-scroll{max-height:420px;overflow:auto;margin-top:10px}
.flh-years table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.flh-years th,.flh-years td{padding:4px 10px;border-bottom:1px solid var(--glass-line);text-align:right}
.flh-years th[scope="row"],.flh-years thead th:first-child{text-align:left}

/* 대형재난 지도 — 시도 음영은 사건 수(l0~l4), 점 크기는 사망자 수. 재생은 assets/fire-law-history-map.js. */
.flh-map-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:24px;align-items:start}
.flh-map-stage{border-radius:14px;background:radial-gradient(60% 55% at 50% 45%,rgba(var(--ember-rgb),.07),transparent 72%)}
.flh-map{display:block;width:100%;height:auto;max-height:80vh;margin:0 auto}
.flh-prov{fill:rgba(var(--ink-rgb),.045);stroke:rgba(var(--ink-rgb),.3);stroke-width:.7;stroke-linejoin:round;fill-rule:evenodd}
.flh-prov.l1{fill:rgba(var(--ember-rgb),.06)} .flh-prov.l2{fill:rgba(var(--ember-rgb),.1)}
.flh-prov.l3{fill:rgba(var(--ember-rgb),.15)} .flh-prov.l4{fill:rgba(var(--ember-rgb),.2)}
.flh-prov-label{fill:var(--txt-dim);font:600 10px var(--font-sans);paint-order:stroke;stroke:var(--bg);stroke-width:3px;pointer-events:none}
.flh-map-grid.is-year .flh-n{display:none}
.flh-pin{fill:rgba(var(--ink-rgb),.4);stroke:var(--bg);stroke-width:.6;transform-box:fill-box;transform-origin:center;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s}
.flh-pin.is-case{fill:var(--ember)}
.flh-pin.is-sea{fill:rgba(var(--blue-rgb),.3);stroke:var(--blue);stroke-width:1.2}
.flh-pin.is-case.is-sea{fill:var(--ember);stroke:var(--blue)}
.flh-pin.is-multi{stroke:var(--txt);stroke-width:1.1;stroke-dasharray:2 1.6}
.flh-pin.is-off{transform:scale(0);opacity:0}
.flh-pin.is-now{stroke:var(--txt);stroke-width:1.8}
.flh-pin-a:hover .flh-pin,.flh-pin-a:focus-visible .flh-pin{stroke:var(--txt);stroke-width:2}
.flh-pin-a:focus-visible{outline:none}
.flh-map-panel{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--glass-line);border-radius:14px;background:var(--panel)}
.flh-map-year{margin:0;font:700 clamp(40px,5vw,64px)/1 "Space Grotesk",var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--txt)}
.flh-map-year b{font-weight:inherit}
.flh-map-stats{display:grid;gap:10px;margin:0}
.flh-map-stats div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--glass-line)}
.flh-map-stats dt{font-size:13px;color:var(--txt-dim)}
.flh-map-stats dd{margin:0;font-size:13px;color:var(--txt-dim);white-space:nowrap}
.flh-map-stats b{margin-right:2px;font:700 22px "Space Grotesk",var(--font-sans);font-variant-numeric:tabular-nums;color:var(--txt)}
.flh-map-stats div:nth-child(2) b{color:var(--ember)}
.flh-map-now{min-height:96px;font-size:13px;line-height:1.6;color:var(--read)}
.flh-map-now p{margin:0;color:var(--txt-dim)}
.flh-map-now ul{margin:0;padding-left:18px;display:grid;gap:4px}
.flh-map-now a{color:var(--ember);font-weight:600}
.flh-map-ctrl{display:flex;align-items:center;gap:12px}
.flh-map-ctrl[hidden]{display:none}
.flh-play{min-height:40px;padding:8px 14px;border:1px solid var(--glass-line);border-radius:10px;background:var(--glass);color:var(--txt);font:600 13px var(--font-sans);cursor:pointer;transition:border-color .2s}
.flh-play:hover{border-color:rgba(var(--ember-rgb),.6)}
.flh-map-ctrl input[type="range"]{flex:1;min-width:0;accent-color:var(--ember)}
.flh-map-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.6;color:var(--txt-dim)}
.flh-map-key li{position:relative;padding-left:19px}
.flh-map-key b{margin-right:4px;font-weight:600;color:var(--txt)}
.flh-map-key i{position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%}
.flh-map-key [data-k="inc"]{background:rgba(var(--ink-rgb),.4)}
.flh-map-key [data-k="case"]{background:var(--ember)}
.flh-map-key [data-k="sea"]{background:rgba(var(--blue-rgb),.3);border:1.5px solid var(--blue)}
.flh-map-key [data-k="multi"]{border:1.5px dashed var(--txt)}
.flh-map-key [data-k="where"]{border-radius:2px;background:rgba(var(--ember-rgb),.2);border:1px solid rgba(var(--ink-rgb),.3)}
.flh-map-list{margin-top:14px;font-size:13px}
.flh-map-list summary{cursor:pointer;color:var(--txt)}
.flh-map-cols{columns:3 240px;column-gap:26px;margin-top:12px}
.flh-map-cols section{break-inside:avoid;margin:0 0 14px}
.flh-map-cols h3{margin:0 0 4px;font-size:13.5px}
.flh-map-cols h3 span{font-weight:400;color:var(--txt-dim)}
.flh-map-cols ul{margin:0;padding-left:16px;line-height:1.65;color:var(--read)}
.flh-map-cols time{font-variant-numeric:tabular-nums;color:var(--txt-dim)}
.flh-map-cols a{color:var(--ember)}
@media (prefers-reduced-motion:reduce){.flh-pin{transition:none}}

/* 재난 카드 */
.flh-index{margin:0 0 20px}
.flh-index ol{display:flex;gap:8px;overflow-x:auto;margin:0;padding:2px 0 8px;list-style:none}
.flh-index a{display:inline-flex;gap:6px;align-items:center;white-space:nowrap;padding:7px 12px;border:1px solid var(--glass-line);border-radius:999px;background:var(--glass);font-size:13px;color:var(--txt)}
.flh-index time{font:600 12px "Space Grotesk",var(--font-sans);color:var(--ember)}
.flh-case{display:grid;grid-template-columns:440px minmax(0,1fr);gap:26px;margin:0 0 20px;padding:20px;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);scroll-margin-top:76px}
.flh-case:target{border-color:rgba(var(--ember-rgb),.7)}
.flh-art{margin:0}
.flh-art img{display:block;width:100%;height:auto;border-radius:12px;background:var(--bg)}
.flh-art figcaption{margin-top:6px;font-size:11.5px;color:var(--txt-dim)}
.flh-board{position:relative;display:grid;place-items:center;aspect-ratio:3/2;padding:40px 22px 22px;border-radius:12px;color:var(--txt);overflow:hidden;
  border:1px solid rgba(var(--ember-rgb),.35);
  background:
    radial-gradient(48% 52% at 50% 46%,rgba(var(--ember-rgb),.12),transparent 72%),
    repeating-linear-gradient(0deg,rgba(var(--ink-rgb),.045) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(var(--ink-rgb),.045) 0 1px,transparent 1px 24px),
    var(--bg)}
.flh-board-k{position:absolute;left:18px;top:16px;margin:0;font:600 11px/1 "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:var(--ember)}
.flh-board-in{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:94%;text-align:center}
.flh-board-doc{display:block;width:58px;height:auto}
.flh-doc-sheet{fill:rgba(var(--ink-rgb),.05);stroke:rgba(var(--ink-rgb),.55);stroke-width:2;stroke-linejoin:round}
.flh-doc-fold{fill:none;stroke:rgba(var(--ink-rgb),.55);stroke-width:2;stroke-linejoin:round}
.flh-doc-bar{stroke:var(--ember);stroke-width:5;stroke-linecap:round}
.flh-doc-lines{stroke:rgba(var(--ink-rgb),.3);stroke-width:3;stroke-linecap:round}
.flh-board ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.flh-board b{display:block;font-size:17px;line-height:1.35;letter-spacing:-.01em;text-wrap:balance}
.flh-board li span,.flh-board-more{display:block;margin-top:2px;font-size:12px;color:var(--txt-dim)}
.flh-board-more{margin:0}
.flh-board-time{display:flex;align-items:center;gap:8px;width:min(100%,340px);margin-top:4px;font-size:11.5px;color:var(--txt-dim)}
.flh-board-time span{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px}
.flh-board-time time{font:600 13px "Space Grotesk",var(--font-sans);font-variant-numeric:tabular-nums;color:var(--txt);white-space:nowrap}
.flh-board-time i{flex:1 1 24px;min-width:14px;height:1px;background:rgba(var(--ember-rgb),.65)}
.flh-board-time b{display:inline;font:700 15px "Space Grotesk",var(--font-sans);color:var(--ember);white-space:nowrap}
.flh-case-meta{margin:0;font-size:13px;color:var(--txt-dim)}
.flh-case-meta time{color:var(--ember);font-weight:600}
.flh-casualty small{font-size:12px}
.flh-case h3{margin:6px 0 0;font-size:22px;letter-spacing:-.02em;text-wrap:balance}
.flh-measure{margin:12px 0 0;padding:10px 14px;border-radius:10px;background:rgba(var(--ember-rgb),.08);line-height:1.6}
.flh-measure span{display:block;margin-bottom:2px;font-size:11.5px;font-weight:700;color:var(--ember)}
.flh-links{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.flh-link{padding-top:12px;border-top:1px solid var(--glass-line)}
.flh-grade{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.flh-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--glass-line)}
.flh-chip.is-ga{border-color:rgba(var(--ember-rgb),.6);color:var(--ember)}
.flh-chip.is-na{border-color:rgba(var(--blue-rgb),.6);color:var(--blue)}
.flh-chip.is-listed,.flh-chip.is-followup{border-style:dashed;color:var(--txt-dim)}
.flh-link blockquote{margin:8px 0 0;padding:2px 0 2px 14px;border-left:3px solid rgba(var(--ember-rgb),.45);color:var(--read);font-size:14px;line-height:1.7}
.flh-link blockquote p{margin:0}
.flh-cases-note{margin:0 0 16px}
.flh-cite,.flh-law,.flh-excl,.flh-days,.flh-facts,.flh-namu{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--txt-dim)}
.flh-cite a,.flh-facts a,.flh-namu a{color:var(--txt)}
.flh-law a{color:var(--ember);font-weight:600}
.flh-law-k{display:block;font-size:11.5px;font-weight:700;color:var(--txt-dim)}
.flh-law ul{margin:4px 0 0;padding-left:18px}
.flh-law li{margin:2px 0}
.flh-note-src,.flh-law-note{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--amber)}
.flh-law-note{color:var(--txt-dim)}
.flh-days b{font:700 18px "Space Grotesk",var(--font-sans);color:var(--txt)}
.flh-namu span{display:block;font-size:12px}

/* 소방법령정보 출구 */
.flh-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.flh-more a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);color:var(--txt);transition:border-color .2s,transform .2s}
.flh-more a:hover{border-color:rgba(var(--ember-rgb),.6);transform:translateY(-2px)}
.flh-more span{font-size:13px;line-height:1.6;color:var(--txt-dim)}

/* 자료 기준 */
.flh-basis-list{display:grid;gap:14px;margin:0;max-width:900px}
.flh-basis-list div{padding:14px 16px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass)}
.flh-basis-list dt{font-weight:700}
.flh-basis-list dd{margin:6px 0 0;color:var(--read);line-height:1.75}
.flh-basis-list ul{margin:0;padding-left:18px}

@media (max-width:980px){
  .flh-hero-in{grid-template-columns:minmax(0,1fr);min-height:0;padding:26px 16px 22px}
  .flh-map-grid{grid-template-columns:minmax(0,1fr)}
  .flh-map-panel{position:static}
  .flh-case{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .flh-copy .hero-stats b{font-size:26px}
  .flh-dots,.flh-time{padding:14px}
  .flh-case{padding:14px;gap:16px}
}