/* 세 층 그림(figure.hs-scene — BUILD:HOMESCENE · builders/home-scene.js, 캔버스 assets/home-scene.js) — 인천소방 AX(showcase.html) 설계 구조 아래
 * '이 스튜디오의 지식 구조'(#knowledge). 2026-10-26 기획 13절 4(운영자 — 소방 지식 그래프 상황판과 함께)로 홈 / 03 에서 옮기며 assets/kg-prompt.css 의
 * 규칙을 글자 그대로 이 파일로 나눴다(홈 / 02 프롬프트 절 규칙은 kg-prompt.css 에 남는다).
 * 섬이 아니다 — 바탕을 칠하지 않아 페이지 배경(오로라·그레인)이 보이고, 그림 뒤에 토큰 색 옅은 빛만 깐다. 라이트에서는 라이트 토큰으로 그린다.
 * 아래 소방 업무 · 가운데 자료 허브 · 위 AI가 읽는 파일. 정지 그림(.hs-still)은 빌드가 그린 SVG 이고 캔버스(.hs-canvas)가 같은 상자(.hs-stage) 위에 겹친다.
 * 색은 토큰만(theme-ratchet 0): 업무 선·점 --ember, 허브 점은 묶음 색(--viz-1~4·--green), AI 쪽은 --green.
 * 규칙: .claude/rules/hubs/site-shell.md '소방 지식 그래프 프롬프트 절' · data-pages.md(인천소방 AX '이 스튜디오의 지식 구조') */
/* 장면 상자 — 정지 그림과 캔버스가 같은 자리. 한 줄 설명(.hs-cap)은 그 아래 */
.hs-scene{margin:0 0 64px}
.hs-cap{max-width:46em;margin:12px auto 0;font-size:13px;line-height:1.7;text-align:center;color:var(--txt-dim);word-break:keep-all}
.hs-stage{position:relative;max-width:980px;margin:0 auto;
  background:radial-gradient(46% 50% at 52% 56%,rgba(var(--ember-rgb),.07),transparent 72%),radial-gradient(30% 32% at 54% 16%,rgba(var(--green-rgb),.05),transparent 70%)}
.hs-still{display:block;width:100%;height:auto;overflow:visible}
.hs-canvas{position:absolute;inset:0;width:100%;height:100%}
/* 캔버스가 켜지면(.is-live, assets/home-scene.js) 정지 그림에는 층 판만 남고 층 이름·점·선·이름은 캔버스가 그린다.
 * 한 바퀴 뒤 상자가 마우스를 따라 기울었다가(스크립트가 transform) 손을 떼면 부드럽게 돌아온다. */
.hs-stage.is-live{transition:transform .35s ease-out}
.hs-stage.is-live .hs-still>:not(.hs-plane){visibility:hidden}
.hs-still [data-group="site"]{--hs-c:var(--viz-2)}
.hs-still [data-group="reference"]{--hs-c:var(--viz-3)}
.hs-still [data-group="trend"]{--hs-c:var(--viz-1)}
.hs-still [data-group="study"]{--hs-c:var(--viz-4)}
.hs-still [data-group="sources"]{--hs-c:var(--green)}
.hs-plane{stroke-width:1;vector-effect:non-scaling-stroke}
.hs-plane-task{fill:rgba(var(--ember-rgb),.05);stroke:rgba(var(--ember-rgb),.32)}
.hs-plane-hub{fill:rgba(var(--amber-rgb),.035);stroke:rgba(var(--amber-rgb),.26)}
.hs-plane-ai{fill:rgba(var(--green-rgb),.07);stroke:rgba(var(--green-rgb),.38)}
.hs-pl{font:600 20px var(--font-sans);letter-spacing:.04em}
.hs-pl-task{fill:var(--ember)}
.hs-pl-hub{fill:var(--amber)}
.hs-pl-ai{fill:var(--green)}
.hs-l{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.hs-start{stroke:rgba(var(--ember-rgb),.62);stroke-width:1.3}
.hs-next{stroke:rgba(var(--ember-rgb),.26);stroke-dasharray:4 4}
.hs-guide{stroke:rgba(var(--green-rgb),.16)}
.hs-graph{stroke:rgba(var(--green-rgb),.42)}
.hs-jsonld{stroke:rgba(var(--blue-rgb),.22)}
.hs-llms{stroke:rgba(var(--ink-rgb),.06)}
.hs-col{stroke:var(--hs-c);stroke-width:2.2;stroke-linecap:round;opacity:.5;vector-effect:non-scaling-stroke}
.hs-n{stroke:var(--bg);stroke-width:2;vector-effect:non-scaling-stroke}
.hs-task{fill:var(--ember)}
.hs-hub{fill:var(--hs-c)}
.hs-ai{fill:var(--green);stroke:rgba(var(--green-rgb),.28);stroke-width:7}
.hs-t{font:500 16.5px var(--font-sans);fill:var(--txt-dim);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.hs-t-task{font-weight:600;font-size:18px;fill:var(--txt)}
.hs-t-hub{fill:var(--read)}
.hs-t-ai{font-weight:600;font-size:18px;fill:var(--green)}
/* 평면 목록(세 줄을 위아래로 쌓은 도식) — 좁은 화면에서만. 넓은 화면은 정지 그림이 같은 내용을 그린다 */
.hs-flat{display:none}
/* 휴대폰 목록의 펼치기 단추(<details> 의 summary) — 프롬프트 복사 버튼과 같은 유리 단추, 누르는 자리 44px */
.hs-flat>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--glass-line);border-radius:100px;background:var(--glass);color:var(--txt);font:600 14px/1.2 var(--font-sans);cursor:pointer;list-style:none}
.hs-flat>summary::-webkit-details-marker{display:none}
.hs-flat>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.hs-flat[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.hs-flat>summary:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.hs-flat[open]>summary{margin-bottom:18px}
.hs-flat section{position:relative;padding:16px 18px 14px;border:1px solid var(--glass-line);border-radius:18px;background:rgba(var(--ink-rgb),.025)}
.hs-flat section+section{margin-top:22px}
/* 위아래 칸을 잇는 짧은 선 — 정지 그림의 세로 선을 대신한다 */
.hs-flat section+section::before{content:"";position:absolute;left:30px;top:-23px;width:2px;height:22px;background:linear-gradient(rgba(var(--green-rgb),.6),rgba(var(--ember-rgb),.6))}
/* 층 이름은 제목 요소가 아니라 칸의 이름(p.hs-flat-layer, section aria-labelledby) */
.hs-flat .hs-flat-layer{margin:0 0 10px;font:600 12px/1.4 var(--font-sans);letter-spacing:.08em}
.hs-flat section:nth-child(1){border-color:rgba(var(--green-rgb),.3)}
.hs-flat section:nth-child(1) .hs-flat-layer{color:var(--green)}
.hs-flat section:nth-child(2) .hs-flat-layer{color:var(--amber)}
.hs-flat section:nth-child(3){border-color:rgba(var(--ember-rgb),.3)}
.hs-flat section:nth-child(3) .hs-flat-layer{color:var(--ember)}
.hs-flat ol,.hs-flat ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hs-flat li{display:inline-flex;align-items:baseline;gap:6px;padding:2px 11px;border:1px solid var(--glass-line);border-radius:100px;font-size:13px;color:var(--txt)}
/* 링크는 위아래 4px 를 더해 누르는 높이 24px(WCAG 2.5.8) */
.hs-flat li a{display:inline-block;padding:4px 0;line-height:16px;color:inherit;text-decoration:none}
.hs-flat li a:hover{color:var(--ember)}
.hs-flat li span{font-size:11px;color:var(--txt-faint)}
.hs-flat section:nth-child(2)>ol{display:grid;gap:12px}
.hs-flat section:nth-child(2)>ol>li{display:block;padding:0;border:0;border-radius:0}
.hs-flat .hs-gname{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:12px;font-weight:600;color:var(--txt-dim)}
.hs-flat .hs-gname::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hs-c)}
.hs-flat [data-group="site"]{--hs-c:var(--viz-2)}
.hs-flat [data-group="reference"]{--hs-c:var(--viz-3)}
.hs-flat [data-group="trend"]{--hs-c:var(--viz-1)}
.hs-flat [data-group="study"]{--hs-c:var(--viz-4)}
.hs-flat [data-group="sources"]{--hs-c:var(--green)}
.hs-flat [data-group] li::before{content:"";align-self:center;width:6px;height:6px;border-radius:50%;background:var(--hs-c)}
/* 업무 칸 — 업무마다 한 줄 더: 먼저 읽을 자료(정지 그림의 실선) */
.hs-flat section:nth-child(3)>ol{display:grid;gap:6px}
.hs-flat section:nth-child(3)>ol>li{display:block;padding:2px 12px 4px;border-color:rgba(var(--ember-rgb),.28);border-radius:14px}
.hs-flat section:nth-child(3)>ol>li>a{font-weight:600}
.hs-flat .hs-reads{display:block;font-size:12px;line-height:1.5;color:var(--txt-dim);word-break:keep-all}
.hs-flat .hs-reads a{color:var(--read);text-decoration:underline;text-decoration-color:rgba(var(--ember-rgb),.45);text-underline-offset:3px}
/* 861–1100px(가로 태블릿): 글 칸 옆에서는 그림이 600px 남짓으로 좁아져 이름이 겹쳤다(2026-10-25) — 글을 위에, 그림을 아래 한 칸에 넓게 */
@media (max-width:1100px){
  .hs-stage{width:100%;max-width:860px}
}
@media (max-width:860px){
  .hs-stage{background:none}
  .hs-cap{margin:14px 0 0;text-align:left}
  .hs-still{display:none}
  .hs-flat{display:block}
}