/* 소방 지식 그래프 상황판 — 인천소방 AX(showcase.html) 설계 구조 아래 '이 스튜디오의 지식 구조'(#knowledge)의 section#kg.kg-board.
 * 2026-10-26 운영자 지시로 옛 입구 페이지 knowledge-graph.html 의 히어로였던 상황판을 홈 맨 아래로 옮겼고, 같은 날 기획 13절 4 로 인천소방 AX 로 옮겼다
 * (파일 목록 규칙은 assets/kg-files.css — 홈 / 03, 세 층 그림은 assets/home-scene.css). 절 안(.wrap)에 있지만 화면 폭 전체로 펼친다(아래 '펼침').
 * 제목 단계는 그 절(h3 '이 스튜디오의 지식 구조') 아래라 상황판 제목 h4 · 이동 순서·고른 자료 카드 h5.
 * 색은 토큰만(theme-ratchet 상한 0). 상황판(.kg-board.theme-dark)은 라이트 테마에서도 어두운 섬이라 그 안의 토큰은 다크 값이다.
 * 캔버스가 쓰는 구역 색은 --kz-* 로 정하고 assets/knowledge-graph.js 가 계산된 값을 읽는다(같은 색이 정지 그림·범례·캔버스에 쓰인다).
 * 페이지 오로라(.blob)는 그 페이지의 CSS 가 그린다 — 이 파일은 .blob 을 건드리지 않는다.
 * 규칙: .claude/rules/hubs/knowledge-graph.md */

/* 구역 색 — 상황판(다크 섬)과 그 아래 개체 파일 타일(.kg-kinds, 두 테마)이 같은 이름을 쓴다. 타일에서는 테마 값으로 풀린다. */
.kg-board,.kg-kinds{
  --kz-site:var(--viz-2); --kz-reference:var(--viz-3); --kz-trend:var(--viz-1); --kz-study:var(--tag-peach);
  --kz-sources:var(--green); --kz-usage:var(--crim); --kz-concept:var(--txt); --kz-route:var(--ember); --kz-hot:var(--glow2)}
.kg-board{
  position:relative;color:var(--txt);
  background:
    radial-gradient(60% 70% at 56% 52%,rgba(var(--ember-rgb),.07),transparent 70%),
    radial-gradient(40% 40% at 10% 6%,rgba(var(--ink-rgb),.025),transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--glass-line);overflow:hidden;
}
/* 상황판 주사선 — 벽면 화면의 결. 장식이라 점·선 위로 올라오지 않는다. */
.kg-board::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(var(--ink-rgb),.018) 0 1px,transparent 1px 3px)}
.kg-board-in{position:relative;height:min(92vh,920px);min-height:660px;max-width:1600px;margin:0 auto}
/* 펼침 — 인천소방 AX 의 '이 스튜디오의 지식 구조'는 .wrap 안 절이라 상황판을 화면 폭 전체로 꺼낸다(글 칸·지도·옆 칸의 폭이 vw 로 정해진 판이다).
 * 데스크톱 스크롤바만큼 넘치는 몇 px 은 body 의 overflow-x 가 자른다(hub.css) */
.scd-know .kg-board{width:100vw;margin-left:calc(50% - 50vw);border-top:1px solid var(--glass-line)}

.kg-copy{position:absolute;left:30px;top:30px;width:min(360px,26vw);z-index:2}
.kg-eyebrow{margin:0 0 12px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:var(--ember)}
.kg-copy h4{margin:0;font:700 clamp(40px,4.4vw,64px)/1.02 var(--font-sans);letter-spacing:-.045em;text-wrap:balance}
.kg-lead{margin:16px 0 0;color:var(--read);font-size:15px;line-height:1.75;text-wrap:pretty}
/* 숫자 줄(BUILD:KGSTATS) — 프롬프트·주소·파일 절은 홈 / 02·/ 03 에 있다 */
.kg-copy .hero-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;padding-top:16px;border-top:1px solid var(--glass-line)}
.kg-copy .hero-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.kg-copy .hero-stats b{font:700 32px/1 "Space Grotesk",var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kg-copy .hero-stats span{font-size:12px;color:var(--txt-dim)}

.kg-stage{position:absolute;inset:0}
.kg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;opacity:0;transition:opacity .4s}
.kg-preview{position:absolute;left:50.5%;top:48%;width:min(86vh,47vw,900px);height:auto;transform:translate(-50%,-50%);transition:opacity .4s}
.kg-board.is-live .kg-canvas{opacity:1}
.kg-board.is-live .kg-preview{opacity:0}
.kg-preview .kg-ring{stroke:rgba(var(--ink-rgb),.08);stroke-width:.004}
.kg-preview .kg-ring-in{stroke:rgba(var(--ink-rgb),.07);stroke-width:.003;stroke-dasharray:.006 .016}
.kz-site{fill:var(--kz-site);background:var(--kz-site)}
.kz-reference{fill:var(--kz-reference);background:var(--kz-reference)}
.kz-trend{fill:var(--kz-trend);background:var(--kz-trend)}
.kz-study{fill:var(--kz-study);background:var(--kz-study)}
.kz-sources{fill:var(--kz-sources);background:var(--kz-sources)}
.kz-usage{fill:var(--kz-usage);background:var(--kz-usage)}
.kz-concept{fill:var(--kz-concept);background:var(--kz-concept)}
.kg-preview circle[class^="kz-"]{opacity:.85}
.kg-tip{position:absolute;z-index:4;pointer-events:none;padding:6px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--glass-line);font-size:12px;white-space:nowrap;transform:translate(14px,-50%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.kg-tip small{color:var(--txt-dim);margin-left:6px}

.kg-controls{position:absolute;left:30px;right:30px;bottom:20px;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px;pointer-events:none}
.kg-controls>*{pointer-events:auto}
.kg-starts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kg-starts[hidden]{display:none}
.kg-starts>span{font-size:12px;color:var(--txt-dim);margin-right:4px}
.kg-chip{font:inherit;font-size:13px;color:var(--txt);padding:8px 14px;border-radius:999px;border:1px solid var(--glass-line);background:var(--panel);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.kg-chip:hover{border-color:rgba(var(--ember-rgb),.55)}
.kg-chip[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:var(--on-accent);font-weight:700}
.kg-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--txt-dim);justify-content:flex-end;max-width:560px}
.kg-legend span{display:inline-flex;align-items:center;gap:6px}
.kg-legend i{width:9px;height:9px;border-radius:50%}
.kg-stale{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;margin:0;max-width:min(420px,80%);padding:14px 18px;border-radius:14px;background:var(--panel);border:1px solid rgba(var(--ember-rgb),.5);color:var(--txt);font-size:14px;line-height:1.6;text-align:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kg-drawn{position:absolute;left:30px;bottom:68px;z-index:2;width:min(360px,26vw);margin:0;font-size:12px;line-height:1.6;color:var(--txt-faint);text-wrap:pretty}

.kg-side{position:absolute;right:30px;top:28px;width:min(330px,23vw);max-height:calc(100% - 170px);z-index:2;display:flex;flex-direction:column;gap:12px}
.kg-side[hidden]{display:none}
.kg-panel{position:relative;background:var(--panel);border:1px solid var(--glass-line);border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--hilite)}
.kg-log{padding:14px 14px 10px;min-height:0;max-height:58%;display:flex;flex-direction:column}
.kg-log-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kg-log-head h5{margin:0;font-size:13px;font-weight:700}
.kg-log-start{font-size:12px;color:var(--txt-dim);text-align:right}
.kg-log-list{list-style:none;margin:10px 0 0;padding:0;font:12px/1.55 "JetBrains Mono",ui-monospace,monospace;overflow:auto;min-height:0}
.kg-log-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 8px;padding:6px 0;border-top:1px solid rgba(var(--ink-rgb),.06)}
.kg-log-list li>:not(.n){grid-column:2;min-width:0}
.kg-log-list .n{grid-row:1/span 3;color:var(--txt-faint);font-variant-numeric:tabular-nums}
.kg-log-list .rel{color:var(--kz-hot)}
.kg-log-list .rel.is-name{color:var(--txt-dim)}
.kg-log-list button{all:unset;cursor:pointer;font:500 13px/1.45 var(--font-sans);color:var(--txt)}
.kg-log-list button:hover,.kg-log-list button:focus-visible{color:var(--kz-hot)}
.kg-log-list .k{color:var(--txt-faint);font-family:var(--font-sans)}
.kg-card{padding:16px 16px 14px;overflow:auto;min-height:0}
.kg-card[hidden]{display:none}
.kg-card .kind{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--txt-dim);padding-right:24px}
.kg-card .kind i{width:9px;height:9px;border-radius:50%;flex:none}
.kg-card h5{margin:8px 0 0;font-size:17px;line-height:1.4;text-wrap:balance}
.kg-card p{margin:8px 0 0;font-size:13px;color:var(--read);line-height:1.65}
.kg-card .use b{color:var(--kz-hot);font-weight:500;margin-right:6px}
.kg-card dl{margin:10px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:12px}
.kg-card dt{color:var(--txt-faint)}
.kg-card dd{margin:0;color:var(--read);overflow-wrap:anywhere}
.kg-card .addr{margin-top:12px;font:11px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--txt-dim);overflow-wrap:anywhere;background:rgba(var(--ink-rgb),.04);border-radius:8px;padding:8px 10px}
.kg-card .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kg-card .close{position:absolute;right:8px;top:6px;border:0;background:none;color:var(--txt-dim);font-size:18px;line-height:1;cursor:pointer;padding:6px 8px;border-radius:8px}
.kg-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);color:var(--txt);font:inherit;font-size:12px;cursor:pointer;text-decoration:none}
.kg-btn:hover{border-color:rgba(var(--ember-rgb),.6);color:var(--ember)}
.kg-btn.is-primary{background:var(--ember);border-color:var(--ember);color:var(--on-accent);font-weight:700}
.kg-btn.is-primary:hover{background:var(--plasma);border-color:var(--plasma);color:var(--on-accent)}
.kg-btn[hidden]{display:none}

.kg-find{position:absolute;right:30px;bottom:64px;z-index:3;width:min(330px,23vw)}
.kg-find[hidden]{display:none}
.kg-find-label{display:block;font-size:12px;color:var(--txt-dim);margin-bottom:6px}
.kg-find-input{width:100%;padding:9px 12px;border-radius:12px;border:1px solid var(--glass-line);background:var(--panel);color:var(--txt);font:inherit;font-size:13px}
.kg-find-results{list-style:none;margin:0 0 6px;padding:6px;border-radius:12px;background:var(--pop);border:1px solid var(--glass-line);max-height:240px;overflow:auto;position:absolute;left:0;right:0;bottom:100%}
.kg-find-results[hidden]{display:none}
.kg-find-results button{all:unset;display:block;width:100%;box-sizing:border-box;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--txt)}
.kg-find-results button small{color:var(--txt-dim);margin-left:6px}
.kg-find-results button:hover,.kg-find-results button:focus-visible{background:rgba(var(--ember-rgb),.14)}


/* 좁은 화면 — 상황판을 세로로 쌓는다: 제목 → 지도(정사각) → 출발점·범례 → 로그·카드 */
@media (max-width:1000px){
  .kg-board-in{height:auto;min-height:0;display:flex;flex-direction:column}
  .kg-copy,.kg-side,.kg-controls,.kg-find,.kg-drawn{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-height:none}
  .kg-copy{order:1;padding:28px 20px 0}
  .kg-stage{order:2;position:relative;width:100%;aspect-ratio:1/1}
  .kg-preview{width:94%;top:50%}
  .kg-controls{order:3;padding:0 20px 14px;flex-direction:column;align-items:flex-start}
  .kg-legend{justify-content:flex-start}
  .kg-drawn{order:4;padding:0 20px 16px}
  .kg-find{order:5;padding:0 20px 16px}
  .kg-find-results{position:static;margin:6px 0 0}
  .kg-side{order:6;padding:0 20px 26px}
  .kg-log{max-height:300px}
}
@media (max-width:620px){
  .kg-copy{padding:22px 16px 0}
  .kg-controls,.kg-drawn,.kg-find,.kg-side{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){.kg-canvas,.kg-preview{transition:none}}

/* 개체 파일(KGKINDS — builders/knowledge-graph-page.js renderKinds) — 이 절 맨 아래, 상황판 다음. 2026-10-27 운영자 지시로 홈 / 03 '지식 그래프 파일'에서
 * 옮겼다. 섬이 아니라 두 테마(일반 표면 토큰). 종류마다 타일 하나 — 이름(구역 점 색) · 건수 · 카드 파일 링크(나뉜 파일은 번호). 용량은 싣지 않는다. */
.kg-kinds{margin-top:40px}
.kg-kinds h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--txt)}
.kg-kinds h4 span{margin-left:10px;font-size:12.5px;font-weight:400;color:var(--txt-faint)}
.kg-fl-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 12px;font-size:12px;color:var(--txt-dim)}
.kg-fl-legend i,.kg-ft-k i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;flex:none}
.kg-ft-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px}
.kg-ft{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "n" "f" "p";align-items:baseline;gap:2px 8px;padding:13px 15px;
  border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kg-ft-k{grid-area:k;display:flex;align-items:center;font-size:12.5px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kg-ft-n{grid-area:n;font:600 26px/1.15 "Space Grotesk",var(--font-sans);letter-spacing:-.02em;color:var(--txt);font-variant-numeric:tabular-nums}
.kg-ft-n small{margin-left:3px;font:500 12px var(--font-sans);color:var(--txt-dim)}
.kg-ft-file{grid-area:f;margin-top:6px;font-size:12.5px;color:var(--read);overflow-wrap:anywhere}
a.kg-ft-file{font-weight:600;color:var(--txt);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--ember-rgb),.5)}
a.kg-ft-file:hover{color:var(--ember)}
.kg-ft-parts{grid-area:p;display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.kg-ft-parts a{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:7px;border:1px solid var(--glass-line);
  font:600 12px "Space Grotesk",var(--font-sans);color:var(--txt);text-decoration:none;background:rgba(var(--ink-rgb),.03)}
.kg-ft-parts a:hover{border-color:rgba(var(--ember-rgb),.6);color:var(--ember)}
:is(a.kg-ft-file,.kg-ft-parts a):focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:620px){.kg-ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kg-ft{padding:10px 12px}.kg-ft-n{font-size:21px}.kg-ft-file{margin-top:3px}.kg-ft-parts{margin-top:4px}}