/* 인천소방 AX(incheon-ax.html, AX 플랫폼 묶음, 2026-10-27) — tokens.css·hub.css 위에 얹는다. 색은 토큰만(theme-ratchet 상한 0).
 * 첫 화면 무대(.iax-stage)는 테마를 따르는 반투명 판이다 — 그리는 동안의 선은 본문 글자색, 완성 그림의 청사 고유색(흰 판넬·주황 띠·파란 유리)과
 * 펜 빗금은 assets/incheon-ax.js 가 SVG 속성과 그림 전용 변수(--iax-line·--iax-trunk)로 칠한다. 그림 고유색은 두 테마에서 같다.
 * 규칙: .claude/rules/hubs/incheon-ax.md */
.iax{--wmax:.6}
[data-theme="light"] .iax{--wmax:.24}
.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:620px;height:620px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-260px;left:-200px;animation:iaxb1 22s ease-in-out infinite alternate}
.blob.b{width:500px;height:500px;background:radial-gradient(circle,var(--glow3),transparent 60%);top:46%;right:-210px;animation:iaxb2 26s ease-in-out infinite alternate}
@keyframes iaxb1{to{transform:translate(70px,60px) scale(1.08)}}
@keyframes iaxb2{to{transform:translate(-60px,-50px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob.a,.blob.b{animation:none}}

.iax-main{padding-bottom:56px}

/* ── 첫 화면 ─────────────────────────────────────── */
.iax-hero{max-width:1440px;margin:0 auto;padding:4px 24px 0}
.iax-stage{position:relative;height:clamp(700px,86vh,800px);border:1px solid var(--glass-line);border-radius:6px;overflow:hidden;background:rgba(var(--bg-rgb),.55)}
.iax-stage::after{content:"";position:absolute;inset:10px;border:1px solid var(--glass-line);pointer-events:none}
.iax-copy{position:absolute;left:40px;top:34px;z-index:3;max-width:440px;transition:opacity .9s ease .5s,transform .9s ease .5s}
.iax-copy .crumb{margin-bottom:0}
.iax-eyebrow{margin:18px 0 0;font-size:14px;font-weight:600;color:var(--amber)}
.iax-hero h1{margin:6px 0 0;font:800 clamp(40px,4.6vw,62px)/1.02 var(--font-sans);letter-spacing:-.04em}
.iax-hero-lead{margin:16px 0 0;font-size:15.5px;line-height:1.72;color:var(--read);word-break:keep-all}
.iax-art{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.iax-bld{width:min(90%,1100px);height:auto;overflow:visible;transform:translateY(-3%)}

/* 지반선 아래 'AX 0→100%' — 자리는 스크립트가 지반선 좌표에서 잡는다. 스크립트가 없으면 보이지 않는다 */
.iax-ax{position:absolute;left:0;top:0;z-index:3;margin:0;display:flex;align-items:center;gap:10px;white-space:nowrap;pointer-events:none;opacity:0;transition:filter 1s ease}
.iax-stage[data-state] .iax-ax{opacity:1}
.iax-ax-t{font:800 15px/1 "Space Grotesk",var(--font-sans);letter-spacing:.22em;margin-right:-.22em;
  background:linear-gradient(90deg,var(--ember) 0 50%,var(--txt) 50% 100%);background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;transition:background-position 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.iax-ax-sep{width:16px;height:1px;background:var(--ember);opacity:.7;transition:width .9s cubic-bezier(.2,.7,.2,1) .15s}
.iax-ax-pct{font:500 15px/1 "JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--ember);min-width:4.4ch}
.iax-stage[data-state="done"] .iax-ax{filter:drop-shadow(0 0 10px rgba(var(--ember-rgb),.35))}
[data-theme="light"] .iax-stage[data-state="done"] .iax-ax{filter:drop-shadow(0 0 8px rgba(var(--ember-rgb),.16))}
.iax-stage[data-state="done"] .iax-ax-t{background-position:0 0}
.iax-stage[data-state="done"] .iax-ax-sep{width:26px}

/* 목차 — 신호가 닿으면 윗선이 빛난다 */
.iax-index{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;height:88px;display:flex;border-top:1px solid var(--glass-line);transition:opacity .9s ease .8s}
.iax-index-a{position:relative;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 22px;color:var(--txt);text-decoration:none;border-left:1px solid var(--glass-line)}
.iax-index-a:first-child{border-left:0}
.iax-index-no{font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--txt-dim);transition:color .3s}
.iax-index-a strong{font-size:16px;font-weight:700;text-wrap:balance}
.iax-index-a:hover strong,.iax-index-a:focus-visible strong{color:var(--link)}
.iax-index-a:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.iax-index-a::before{content:"";position:absolute;left:50%;top:-1px;height:2px;width:0;background:var(--ember);transform:translateX(-50%);box-shadow:0 0 12px rgba(var(--ember-rgb),.7);transition:width .35s ease}
.iax-index-a.ping::before{width:46%;transition:width .12s ease}
.iax-index-a.ping .iax-index-no{color:var(--ember)}

/* 그리는 동안에는 글·목차를 감췄다가 다 그려지면 올린다(스크립트가 data-state 를 단다) */
.iax-stage[data-state="draw"] .iax-copy{opacity:0;transform:translateY(10px)}
.iax-stage[data-state="draw"] .iax-index{opacity:0}

/* ── 청사 그림(SVG — assets/incheon-ax.js 가 그린다) ── */
.iax-bld .lines{fill:none;stroke:var(--txt);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;transition:stroke 1.2s}
.iax-bld .lines .faint{stroke-opacity:.38}
.iax-bld .lines .gnd line:first-child{stroke-width:1.6}
.iax-stage[data-state="done"] .iax-bld .lines g:not(.keep){stroke:var(--iax-line)}
.iax-bld .fill{opacity:0;transition:opacity 1.5s ease}
.iax-stage[data-state="done"] .iax-bld .fill{opacity:1}
.iax-stage[data-state="done"] .iax-bld .fill-color{filter:saturate(.86)}
.iax-bld .trees{fill:none;stroke:var(--txt);stroke-linecap:round;transition:stroke 1.2s}
.iax-stage[data-state="done"] .iax-bld .trees{stroke:var(--iax-trunk)}
.iax-bld .leaves{opacity:0;transition:opacity 1.6s ease .6s}
.iax-stage[data-state="done"] .iax-bld .leaves{opacity:.6}
.iax-bld .sign{opacity:0;transition:opacity 1s ease .5s}
.iax-stage[data-state="done"] .iax-bld .sign{opacity:1}
.iax-bld .sign text{font-family:var(--font-sans)}
/* 정문 전광판 불빛과 깃발(2026-10-27 사진 대조) — 다 그려진 뒤 간판 층과 함께 오르고, 불빛은 천천히 밝아졌다 어두워지고 깃발은 살짝 나부낀다 */
.iax-bld .sign .led{animation:iax-led 2.8s ease-in-out infinite}
@keyframes iax-led{0%,100%{opacity:.5}50%{opacity:1}}
.iax-bld .sign .flag{transform-box:fill-box;transform-origin:0 50%;animation:iax-flag 3.2s ease-in-out infinite}
@keyframes iax-flag{0%,100%{transform:skewY(0)}50%{transform:skewY(-7deg) scaleX(.94)}}
.iax-bld .prog{stroke:var(--ember);stroke-width:1.8;stroke-linecap:round;transition:opacity 1.2s ease .5s}
.iax-bld .prog-head{fill:var(--ember);filter:drop-shadow(0 0 6px rgba(var(--ember-rgb),.9));transition:opacity .6s ease}
.iax-stage[data-state="done"] .iax-bld :is(.prog,.prog-head){opacity:0}

/* 완성 뒤 계속 도는 효과 — 창 불빛·유리 빛·빛줄기·철탑 전파·AX 연결망 */
.iax-bld .fx{opacity:0;transition:opacity 1.2s ease 1s}
.iax-stage[data-state="done"] .iax-bld .fx{opacity:1}
.iax-bld .wins rect{opacity:0;animation:iax-twk var(--d) ease-in-out var(--dl) infinite}
@keyframes iax-twk{0%,100%{opacity:0}40%,62%{opacity:var(--wmax)}}
.iax-bld .glint{animation:iax-glint 7s ease-in-out 2.2s infinite;transform:translateX(120px)}
@keyframes iax-glint{0%{transform:translateX(120px)}30%{transform:translateX(1180px)}100%{transform:translateX(1180px)}}
.iax-bld .streams rect{animation:iax-stream 3s linear infinite;transform:translateX(-90px)}
@keyframes iax-stream{from{transform:translateX(-90px)}to{transform:translateX(var(--dist))}}
.iax-bld .waves path{fill:none;stroke:var(--ember);stroke-width:1.3;stroke-linecap:round;transform-box:view-box;transform-origin:743px 2px;animation:iax-wave 2.4s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.iax-bld .waves .w2{animation-delay:.8s}
.iax-bld .waves .w3{animation-delay:1.6s}
@keyframes iax-wave{0%{transform:scale(.35);opacity:.95}100%{transform:scale(1.7);opacity:0}}
.iax-bld .beacon{fill:var(--ember);animation:iax-blink 1.3s steps(1) infinite}
@keyframes iax-blink{0%{opacity:1}50%{opacity:.12}}
.iax-bld .ax .edge{fill:none;stroke:var(--ember);stroke-width:1.1;stroke-dasharray:3 4;opacity:0;animation:iax-flow 1.4s linear infinite;transition:opacity .7s ease var(--dl)}
.iax-stage[data-state="done"] .iax-bld .ax .edge{opacity:.85}
@keyframes iax-flow{to{stroke-dashoffset:-14}}
.iax-bld .ax .node{opacity:0;transition:opacity .5s ease var(--dl)}
.iax-stage[data-state="done"] .iax-bld .ax .node{opacity:1}
.iax-bld .ax .ring{fill:var(--bg);stroke:var(--ember);stroke-width:1.5}
.iax-bld .ax .core{fill:var(--ember)}
.iax-bld .ax .halo{fill:none;stroke:var(--ember);stroke-width:.8;transform-box:fill-box;transform-origin:center;animation:iax-halo 2.6s ease-out infinite}
@keyframes iax-halo{0%{transform:scale(.55);opacity:.85}100%{transform:scale(2.3);opacity:0}}
.iax-bld .ax .trace{fill:none;stroke:var(--ember);stroke-width:1;stroke-dasharray:3 4;animation:iax-flow 1.4s linear infinite;opacity:0;transition:opacity .8s ease 1.4s}
.iax-stage[data-state="done"] .iax-bld .ax .trace{opacity:.8}
.iax-bld .ax .pad{fill:var(--ember);opacity:0;transition:opacity .8s ease 1.4s}
.iax-stage[data-state="done"] .iax-bld .ax .pad{opacity:.9}
.iax-bld .ax .pk{opacity:0}
/* 청사 뒤 큰 'AI'(운영자 2026-10-27) — 다 그려진 뒤 윤곽이 선으로 그려지고, 옅은 주황 결·빗금이 차오른 뒤, 빛 띠가 9초마다 지나간다 */
.iax-bld .aibg{opacity:0;transition:opacity .6s ease .8s}
.iax-stage[data-state="done"] .iax-bld .aibg{opacity:1}
.iax-bld .aibg .ai-ol{fill:none;stroke:var(--ember);stroke-width:1.2;stroke-opacity:.55;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.8s cubic-bezier(.45,0,.2,1) 1s}
.iax-stage[data-state="done"] .iax-bld .aibg .ai-ol{stroke-dashoffset:0}
[data-theme="light"] .iax-bld .aibg .ai-ol{stroke-opacity:.42}
.iax-bld .aibg .ai-echo{fill:none;stroke:var(--ember);stroke-width:.8;stroke-dasharray:2 5}
.iax-bld .aibg :is(.ai-tint,.ai-hatch,.ai-echo){opacity:0;transition:opacity 2s ease 3.2s}
.iax-stage[data-state="done"] .iax-bld .aibg .ai-tint{opacity:1}
.iax-stage[data-state="done"] .iax-bld .aibg .ai-hatch{opacity:.5}
.iax-stage[data-state="done"] .iax-bld .aibg .ai-echo{opacity:.32}
.iax-bld .ai-stop{stop-color:var(--ember)}
.iax-bld .ai-hatch-line{stroke:var(--ember);stroke-opacity:.4}
.iax-bld .aibg .ai-sweep{transform:translateX(-260px);animation:iax-aisweep 9s cubic-bezier(.45,0,.3,1) 5s infinite}
@keyframes iax-aisweep{0%{transform:translateX(-260px)}55%,100%{transform:translateX(760px)}}
@media (prefers-reduced-motion:reduce){
  .iax-bld :is(.wins rect,.waves path,.beacon,.glint,.ax .edge,.ax .trace,.ax .halo,.sign .led,.sign .flag){animation:none}
  .iax-bld .streams{display:none}
  .iax-bld .aibg .ai-ol{transition:none}
  .iax-bld .aibg .ai-sweep{animation:none;opacity:0}
}

/* ── 세 절 ─────────────────────────────────────── */
.iax-sec{max-width:var(--wrap);margin:0 auto;padding:84px 30px 0;scroll-margin-top:84px}
.iax-sec-in{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.6fr);gap:52px;align-items:start;padding-top:34px;border-top:1px solid var(--glass-line)}
.iax-head{position:sticky;top:96px}
.iax-no{margin:0;font:700 66px/1 "Space Grotesk",var(--font-sans);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--txt-dim)}
.iax-scope{margin:16px 0 0;font-size:13px;font-weight:600;color:var(--txt-dim)}
.iax-head h2{margin:6px 0 0;font-size:clamp(26px,2.8vw,34px);line-height:1.22;letter-spacing:-.02em}
.iax-lead{margin:14px 0 0;font-size:16px;line-height:1.78;color:var(--read);word-break:keep-all}

.iax-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
/* 카드 밖의 사실 — '주요 내용' 표(왼쪽 이름 · 오른쪽 값, 윗선만) */
.iax-rows{margin:14px 0 0;border-bottom:1px solid var(--glass-line)}
.iax-row{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:14px;padding:11px 4px;border-top:1px solid var(--glass-line)}
.iax-row dt{font-size:13.5px;font-weight:600;color:var(--txt-dim)}
.iax-row dd{margin:0;font-size:15px;font-weight:600;line-height:1.55;color:var(--txt);word-break:keep-all}
.iax-row.is-key dd{color:var(--amber)}
/* 절 그림 — 왼쪽 글 아래, 그림이 길어 그림이 있는 절은 왼쪽 글을 붙잡아 두지 않는다.
 * 첫 화면 청사 그림과 같은 방식(assets/incheon-ax-figures.js): 화면에 들어오면 선으로 그려지고 → 색이 오르고 → 주황 연결선·신호 점·불빛이 계속 움직인다 */
.iax-sec.has-figure .iax-head{position:static}
.iax-figure{margin:22px 0 0;border:1px solid var(--glass-line);border-radius:12px;overflow:hidden;background:var(--glass)}
.iax-figure.is-anim{aspect-ratio:1/1}
/* 사례 카드의 소개 영상(03 풍수해 시스템, 2026-10-27) — 누르기 전에는 포스터만 */
.iax-case-video{margin:14px 0 4px;border:1px solid var(--glass-line);border-radius:10px;overflow:hidden;background:var(--bg-2)}
.iax-case-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--bg-2)}
.iax-case-video figcaption{padding:9px 12px 10px;font-size:12.5px;font-weight:600;line-height:1.55;text-align:center;color:var(--txt);word-break:keep-all}
.iax-fig{display:block;width:100%;height:100%}
.iax-fig .l{fill:none;stroke:var(--txt);stroke-width:.8;stroke-linejoin:round;stroke-linecap:round;transition:stroke 1.2s}
.iax-fig[data-state="done"] .l{stroke:var(--iax-line)}
.iax-fig .f{opacity:0;transition:opacity 1.3s ease}
.iax-fig[data-state="done"] .f{opacity:1}
.iax-fig .fx{opacity:0;transition:opacity 1s ease .8s}
.iax-fig[data-state="done"] .fx{opacity:1}
.iax-fig .emb{fill:var(--ember)}
.iax-fig .wire{fill:none;stroke:var(--ember);stroke-width:1.1;stroke-dasharray:3 4;opacity:0;animation:iax-flow 1.4s linear infinite;transition:opacity .8s ease calc(.9s + var(--dl,0s))}
.iax-fig[data-state="done"] .wire{opacity:.85}
.iax-fig .pk{opacity:0}
.iax-fig :is(.halo,.ring,.beam,.diag,.fil){fill:none;stroke:var(--ember)}
.iax-fig .halo{stroke-width:.8;transform-box:fill-box;transform-origin:center;animation:iax-halo 2.6s ease-out infinite}
.iax-fig .ring{stroke-width:1.1}
.iax-fig .beam{stroke-width:1;stroke-dasharray:2 4;animation:iax-flow 1.1s linear infinite reverse}
.iax-fig .diag{stroke-width:.9;opacity:.7}
.iax-fig .fil{stroke-width:.8;stroke-linecap:round;stroke-linejoin:round}
.iax-fig .node{fill:var(--ember)}
.iax-fig .node.on{filter:drop-shadow(0 0 4px rgba(var(--ember-rgb),.9))}
.iax-fig .glow{opacity:0;transition:opacity .6s ease}
.iax-fig .glow.on{opacity:.9;transition-duration:.08s}
.iax-fig .bub{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scale(.6)}
.iax-fig .bub.on{animation:iax-bub 2.4s cubic-bezier(.2,.8,.3,1)}
@keyframes iax-bub{0%{opacity:0;transform:scale(.6)}14%,78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.96)}}
.iax-fig .led{animation:iax-blink 1.6s steps(1) infinite}
.iax-fig .bulb{animation:iax-bulb 4.2s ease-in-out infinite}
@keyframes iax-bulb{0%,100%{opacity:.2}45%,60%{opacity:1}}
.iax-fig .flood{animation:iax-flood 3.6s ease-in-out infinite}
@keyframes iax-flood{0%,100%{opacity:.4}50%{opacity:.85}}
.iax-fig .dot{animation:iax-blink 2.2s steps(1) infinite}
.iax-fig .dot.on{filter:drop-shadow(0 0 4px rgba(var(--ember-rgb),.9))}
.iax-fact{margin:0;padding:18px 18px 16px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px)}
.iax-fact dt{font-size:12.5px;color:var(--txt-dim)}
.iax-fact dd{margin:6px 0 0;font-size:17px;font-weight:700;line-height:1.42;color:var(--txt);word-break:keep-all}
.iax-fact.is-key{border-color:rgba(var(--ember-rgb),.42);background:rgba(var(--ember-rgb),.07)}
.iax-fact.is-key dd{color:var(--amber)}

.iax-diagram{margin:16px 0 0;padding:22px 22px 24px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px)}
.iax-diagram figcaption{margin-bottom:18px;font-size:13px;font-weight:600;color:var(--txt-dim)}
.iax-nodes{list-style:none;margin:0;padding:0;display:grid}
.iax-node{position:relative;display:flex;align-items:center;gap:10px}
.iax-node-no{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ember);background:var(--bg);color:var(--txt);font:700 13px/1 "JetBrains Mono",ui-monospace,monospace}
.iax-node-t{font-size:14.5px;font-weight:600;line-height:1.4;word-break:keep-all}
/* 잇는 선 — 점선이 흐르고 신호 점 하나가 지나간다(AX 연결망과 같은 말투) */
.iax-node:not(:last-child)::after{content:"";position:absolute;animation:iax-dash 1s linear infinite}
.iax-node:not(:last-child)::before{content:"";position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px rgba(var(--ember-rgb),.9);opacity:0}
.is-flow .iax-nodes{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
.is-flow .iax-node{flex-direction:column;text-align:center;padding:0 8px}
.is-flow .iax-node:not(:last-child)::after{top:16px;left:calc(50% + 22px);right:calc(-50% + 22px);height:1.5px;background:repeating-linear-gradient(90deg,var(--ember) 0 6px,transparent 6px 11px)}
.is-flow .iax-node:not(:last-child)::before{top:13.5px;left:calc(50% + 22px);animation:iax-pkx 2.2s ease-in-out calc(var(--i) * .55s) infinite}
@keyframes iax-pkx{0%{left:calc(50% + 22px);opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(150% - 29px);opacity:0}}
.is-tiers .iax-nodes{grid-template-columns:minmax(0,420px);justify-content:center;gap:34px}
.is-tiers .iax-node{padding:13px 18px;border:1px solid var(--glass-line);border-radius:12px;background:var(--panel)}
.is-tiers .iax-node:last-child{border-color:rgba(var(--ember-rgb),.5)}
.is-tiers .iax-node:not(:last-child)::after{left:34px;top:100%;width:1.5px;height:34px;background:repeating-linear-gradient(180deg,var(--ember) 0 5px,transparent 5px 9px)}
.is-tiers .iax-node:not(:last-child)::before{left:31.5px;top:100%;animation:iax-pky 1.8s ease-in-out calc(var(--i) * .5s) infinite}
@keyframes iax-pky{0%{top:100%;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:calc(100% + 28px);opacity:0}}
@keyframes iax-dash{to{background-position:11px 11px}}
.iax-diagram-note{margin:20px 0 0;font-size:13.5px;line-height:1.7;color:var(--read);word-break:keep-all}

.iax-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 22px;margin-top:22px}
.iax-list{padding:16px 0 0;border-top:1px solid var(--glass-line)}
.iax-list h3{margin:0 0 8px;font-size:14px;font-weight:700}
.iax-list ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.78;color:var(--read)}

/* 사례 카드 — 자체 개발 시스템·교육 과정(이름 · 한 줄 요약 · 표 · 목록) */
.iax-case{margin:22px 0 0;padding:22px 22px 20px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px)}
.iax-case-tag{margin:0;font-size:12.5px;font-weight:600;color:var(--txt-dim)}
.iax-case h3{margin:6px 0 0;font-size:19px;line-height:1.35;word-break:keep-all}
.iax-case-sum{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:var(--read);word-break:keep-all}
.iax-case-table{width:100%;margin:16px 0 0;border-collapse:collapse;font-size:14px;line-height:1.6}
.iax-case-table caption{caption-side:top;text-align:left;padding-bottom:8px;font-size:13px;font-weight:600;color:var(--txt-dim)}
.iax-case-table th{width:9.5em;padding:10px 12px 10px 0;text-align:left;vertical-align:top;font-weight:700;color:var(--txt);border-top:1px solid var(--glass-line);word-break:keep-all}
.iax-case-table td{padding:10px 0;color:var(--read);border-top:1px solid var(--glass-line);word-break:keep-all}
.iax-lists.is-case{margin-top:14px}
.iax-list h4{margin:0 0 8px;font-size:14px;font-weight:700}
@media (max-width:620px){
  .iax-case-table th{display:block;width:auto;padding-bottom:0}
  .iax-case-table td{display:block;border-top:0;padding-top:4px}
}

/* 페이지 맨 아래 출처 표시 한 줄(공공누리 제1유형) */
.iax-credit{max-width:calc(var(--wrap) - 60px);margin:72px auto 0;padding:18px 0 0;font-size:12.5px;color:var(--txt-dim);border-top:1px solid var(--glass-line)}
.iax-credit a{color:var(--link)}

/* ── 좁은 화면 — 글 → 그림 → 목차 순서로 쌓는다(신호선은 접는다) ── */
@media (max-width:1100px){
  .iax-stage{height:auto;padding:26px 22px 0;display:flex;flex-direction:column}
  .iax-copy{position:relative;left:auto;top:auto;max-width:640px}
  .iax-art{position:relative;inset:auto;margin:26px 0 46px}
  .iax-bld{width:100%;transform:none}
  .iax-bld .ax .trace,.iax-bld .ax .pad,.iax-bld .ax .pk-trace{display:none}
  .iax-index{position:relative;left:auto;right:auto;bottom:auto;height:auto;flex-direction:column;margin:0 -12px 10px}
  .iax-index-a{border-left:0;border-top:1px solid var(--glass-line);padding:15px 14px}
  .iax-index-a:first-child{border-top:0}
}
@media (max-width:860px){
  .iax-sec{padding:64px 22px 0}
  .iax-credit{margin:56px 22px 0}
  .iax-sec-in{grid-template-columns:1fr;gap:26px}
  .iax-head{position:static}
  .iax-facts{grid-template-columns:1fr}
  .iax-row{grid-template-columns:7em minmax(0,1fr)}
  .iax-figure{max-width:460px}
  .iax-no{font-size:52px}
  .is-flow .iax-nodes{grid-auto-flow:row;grid-auto-columns:auto;gap:26px}
  .is-flow .iax-node{flex-direction:row;text-align:left;padding:0}
  .is-flow .iax-node:not(:last-child)::after{left:16px;right:auto;top:100%;width:1.5px;height:26px;background:repeating-linear-gradient(180deg,var(--ember) 0 5px,transparent 5px 9px)}
  .is-flow .iax-node:not(:last-child)::before{left:13.5px;top:100%;animation:iax-pky 1.8s ease-in-out calc(var(--i) * .5s) infinite}
}
@media (max-width:620px){
  .iax-hero{padding:4px 12px 0}
  .iax-hero h1{font-size:40px}
}

/* 움직임 줄이기 — 파일 맨 끝에 두고 선택자를 위 규칙(.is-flow/.is-tiers … :not(:last-child)::before, 좁은 화면 규칙 포함)보다 무겁게 해 반드시 이긴다.
 * 도표의 점선은 멈춘 채 남기고, 지나가는 신호 점은 감춘다. */
@media (prefers-reduced-motion:reduce){
  .iax-sec .iax-diagram .iax-node:not(:last-child)::after{animation:none}
  .iax-sec .iax-diagram .iax-node:not(:last-child)::before{animation:none;opacity:0}
  .iax-sec .iax-fig :is(.wire,.halo,.beam,.led,.bulb,.flood,.dot){animation:none}
  .iax-sec .iax-fig .bub{opacity:1;transform:none}
  .iax-sec .iax-fig .bulb{opacity:.75}
}