/* 홈(index.html) / 02 'AI에게 맡기기' 프롬프트 절(#ai) — 2026-10-26 옛 소방 지식 그래프(knowledge-graph.html) 맨 아래 절(#prompt)을
 * 활용 방법으로 옮겼고, 같은 날 기획 13절 1 로 활용 방법의 세 절이 홈 히어로 아래로 왔다.
 * 그 전 2026-10-25 운영자 결정으로 홈 히어로 아래 그림 절을 그 페이지로 옮겨 'AI에게 주는 주소' 절과 합쳤다(기획 docs/superpowers/specs/2026-10-25-start-guide-design.md 2절 6–7).
 * 2026-10-26 기획 12절 4: / 02 는 할 일이 정해지지 않은 넓은 질문용 — 왼쪽 글(이름표·제목·설명·프롬프트 복사·예시 질문 .ai-asks), 오른쪽 대화창 예시(.hh-flow).
 * 세 층 그림(.hs-stage)은 / 03 의 figure.hs-scene 으로 옮겼다가 같은 날 기획 13절 4 로 인천소방 AX '이 스튜디오의 지식 구조'로 갔다 — 그 규칙은 assets/home-scene.css.
 * 규칙은 assets/page-index.css 에서 그대로 옮겼다(.hs-*·.hh-*). 기획 13절 6 으로 / 02 의 범용 프롬프트 복사 단추(.btn·.btn-glass — 이 절 안에만 다시 두었던 규칙)를
 * 지웠다 — 범용 프롬프트 복사는 홈 히어로 카드 하나다. 선택자는 .hs-copy·.hs-section 아래로 좁힌다. 색은 토큰만(theme-ratchet 상한 0).
 * 규칙: .claude/rules/hubs/site-shell.md '소방 지식 그래프 프롬프트 절' · .claude/rules/hubs/knowledge-graph.md */

/* ===== 프롬프트 절 — 주소 전달 그림(BUILD:HOMEHANDOFF)·예시 질문(BUILD:AIASKS) =====
 * 일반 절이다 — 다크 섬이 아니고 바탕을 칠하지 않아 페이지 배경(오로라·그레인)이 보인다. 그림 뒤에는 토큰 색 옅은 빛만 깐다(불투명 바탕 없음).
 * 세 층 그림(BUILD:HOMESCENE)의 규칙은 2026-10-26 기획 13절 4 로 assets/home-scene.css 로 나눴다(그림은 인천소방 AX). */
/* / 02 두 칸(2026-10-26 기획 12절 4) — 글 칸(.hs-copy)이 두 칸 격자다: 왼쪽 줄들(이름표·제목·설명·예시 질문), 오른쪽 대화창 예시(.hh-flow).
 * assets/home-handoff.js 는 대화창의 1단계 이름('프롬프트 복사')에서 대화창의 주소 자리로 '프롬프트' 조각(.hh-token — 이 글 칸에 붙인다)을 날린다.
 * 남는 높이는 맨 아래 1fr 줄이 받는다(왼쪽 줄 사이가 벌어지지 않게). */
.hs-section{position:relative;margin-top:96px;scroll-margin-top:96px}
.hs-copy{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-rows:auto auto auto auto auto 1fr;column-gap:64px;align-items:start}
.hs-copy>:not(.hh-flow):not(.hh-token){grid-column:1}
.hs-copy>.hh-flow{grid-column:2;grid-row:1/-1;align-self:center}
.hs-label{margin:0 0 14px;font:600 12px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.12em;color:var(--txt-dim)}
.hs-section h2{margin:0 0 26px;font:700 clamp(28px,2.9vw,40px)/1.25 var(--font-sans);letter-spacing:-.03em;word-break:keep-all;text-wrap:balance}
.hs-section h2 .em{background:linear-gradient(100deg,var(--amber),var(--ember) 55%,var(--crim));-webkit-background-clip:text;background-clip:text;color:transparent}
/* 주소 전달 그림(.hh-flow, 2026-10-25 운영자 요청 '복사하고 AI에게 전달하는 동적인 인포그래픽') — 버튼 아래 세 단계와 AI 대화창 예시.
 * 빌드가 다 찬 상태로 쓰고(builders/home-scene.js renderHandoff) assets/home-handoff.js 가 [data-playing] 일 때만 비웠다가 채운다.
 * 사용자 쪽(주소·질문)은 --ember, AI 쪽(읽는 파일)은 --green — 그림의 소방 업무 층·AI가 읽는 파일 층과 같은 색. 찾은 자료 점은 그림과 같은 묶음 색. */
.hh-flow{position:relative;max-width:420px;margin:0}
/* 설명 — 이 절을 쓰는 때(넓은 질문) */
.ai-lede{max-width:34em;margin:-6px 0 22px;font-size:15px;line-height:1.75;color:var(--txt-dim);word-break:keep-all;text-wrap:pretty}
/* 예시 질문(BUILD:AIASKS) — 줄마다 '질문' 표지·질문 글, 누르면 그 질문까지 넣은 프롬프트를 복사(링크는 줄 전체를 덮는다 — 질문 글은 링크 밖이라 복사 뒤 글자가 바뀌어도 남는다) */
.ai-asks{margin:26px 0 0;max-width:34em}
.ai-asks-h{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--txt-dim);word-break:keep-all}
.ai-asks-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ai-ask{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;padding:7px 8px 7px 12px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,background .2s,transform .2s}
.ai-ask:hover{border-color:rgba(var(--ember-rgb),.5);background:rgba(var(--ember-rgb),.06);transform:translateY(-1px)}
.ai-ask:focus-within{border-color:rgba(var(--ember-rgb),.6)}
.ai-ask-k{padding:2px 7px;border:1px solid rgba(var(--ember-rgb),.45);border-radius:6px;font:600 10.5px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--ember)}
.ai-ask-q{font-size:14px;line-height:1.5;color:var(--txt);word-break:keep-all;overflow-wrap:anywhere}
.ai-ask-copy{display:inline-grid;place-items:center;min-width:7.6em;min-height:32px;padding:4px 12px;border:1px solid var(--glass-line);border-radius:999px;background:rgba(var(--ink-rgb),.04);color:var(--txt);font-size:12.5px;font-weight:650;white-space:nowrap;transition:border-color .2s,color .2s}
.ai-ask-copy::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ai-ask:hover .ai-ask-copy{border-color:rgba(var(--ember-rgb),.55);color:var(--ember)}
.ai-ask-copy:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.hh-steps{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;padding:0;list-style:none;counter-reset:hh}
.hh-steps li{display:inline-flex;align-items:center;gap:7px;font:600 12px/1.3 var(--font-sans);color:var(--txt-dim);counter-increment:hh;transition:color .3s}
.hh-steps li::before{content:counter(hh);display:grid;place-items:center;width:19px;height:19px;border:1px solid rgba(var(--ember-rgb),.5);border-radius:50%;color:var(--ember);font:700 10.5px/1 "Space Grotesk",var(--font-sans);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.hh-chat{display:grid;gap:10px;padding:0 0 14px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);overflow:hidden}
.hh-bar{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 8px 6px 14px;border-bottom:1px solid var(--glass-line);font-size:11.5px;font-weight:600;color:var(--txt-dim)}
.hh-bar>span{display:flex;align-items:center;gap:6px}
.hh-bar i{width:6px;height:6px;border-radius:50%;background:rgba(var(--ink-rgb),.2)}
.hh-bar i:last-of-type{margin-right:6px}
/* 멈춤 버튼 — hidden 속성을 덮지 않게 display 를 정하지 않는다(움직임이 시작될 때 스크립트가 연다). 누르는 높이 26px */
/* 멈춤 단추 — 아이콘 26px 원, 창 막대의 오른쪽 끝(2026-10-26 운영자 요청). 이름은 aria-label('멈춤'·'재생'), 보이는 아이콘은 그 이름으로 고른다 */
.hh-pause{margin-left:auto;width:26px;height:26px;padding:0;line-height:0;border:1px solid var(--glass-line);border-radius:50%;background:transparent;color:var(--txt-dim);cursor:pointer;transition:color .2s,border-color .2s}
.hh-pause:hover{color:var(--txt);border-color:rgba(var(--ember-rgb),.5)}
.hh-ico{display:block;width:11px;height:11px;margin:0 auto;fill:currentColor} /* 단추에 display 를 주지 않는다(hidden 을 덮는다) — 가운데 맞춤은 아이콘 쪽에서 */
.hh-pause[aria-label="재생"] .hh-ico-pause,.hh-pause:not([aria-label="재생"]) .hh-ico-play{display:none}
.hh-pause:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.hh-ask{justify-self:end;display:grid;gap:4px;max-width:calc(100% - 28px);margin:0 14px;padding:9px 12px;border:1px solid rgba(var(--ember-rgb),.3);border-radius:14px 14px 4px 14px;background:rgba(var(--ember-rgb),.08);transition:opacity .35s,transform .35s}
.hh-url{font:500 11.5px/1.45 "JetBrains Mono",ui-monospace,monospace;color:var(--ember);overflow-wrap:anywhere}
/* 붙여 넣은 프롬프트(히어로 카드가 복사하는 글 — 말풍선은 여기 한 번) — 사용자가 적는 질문(.hh-q)보다 한 단계 옅게. 번호 순서형(2026-10-26)이라 줄바꿈을 살린다(pre-line) */
.hh-prompt{padding:0 2px;border-radius:6px;font-size:12px;line-height:1.55;color:var(--txt-dim);word-break:keep-all;white-space:pre-line;transition:background .5s}
.hh-q{min-height:1.5em;font-size:13px;line-height:1.5;color:var(--txt);word-break:keep-all}
.hh-reply{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;row-gap:7px;align-items:start;margin:0 14px;transition:opacity .35s,transform .35s}
.hh-ai{grid-row:1/span 3;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--green);border-radius:50%;color:var(--green);font:700 10px/1 "Space Grotesk",var(--font-sans);box-shadow:0 0 0 4px rgba(var(--green-rgb),.1)}
.hh-trail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-height:26px}
.hh-trail code{padding:2px 7px;border:1px solid rgba(var(--green-rgb),.4);border-radius:6px;background:rgba(var(--green-rgb),.07);color:var(--green);font:500 11px/1.4 "JetBrains Mono",ui-monospace,monospace;transition:opacity .3s,box-shadow .3s}
.hh-trail i{font-style:normal;font-size:11px;color:var(--txt-faint);transition:opacity .3s}
.hh-found{display:grid;gap:7px;grid-column:2}
.hh-doc{display:grid;grid-template-columns:7px max-content minmax(0,1fr);align-items:center;column-gap:7px;min-width:0;font-size:12px;line-height:1.45;color:var(--txt);transition:opacity .35s,transform .35s}
.hh-doc::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hs-c,var(--green))}
.hh-doc b{font-size:11px;font-weight:600;color:var(--txt-dim)}
.hh-doc span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* 개체 주소 — 이름 아래 줄(프롬프트의 '근거를 개체 주소와 함께 정리') */
.hh-doc code{grid-column:2/-1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 10.5px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--txt-faint)}
.hh-doc:nth-child(2){transition-delay:.16s}
.hh-doc:nth-child(3){transition-delay:.32s}
.hh-more{grid-column:2;font-size:11px;color:var(--txt-faint);transition:opacity .35s .45s}
/* 답은 사이트에서 파악한 맥락으로 원문과 다른 자료를 검색·수집하며 이어진다(콘텍스트 엔지니어링, 2026-10-25) */
.hh-next{grid-column:2;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--green);transition:opacity .35s .6s}
.hh-next::before{content:"→"}
.hh-flow [data-group="site"]{--hs-c:var(--viz-2)}
.hh-flow [data-group="reference"]{--hs-c:var(--viz-3)}
.hh-flow [data-group="trend"]{--hs-c:var(--viz-1)}
.hh-flow [data-group="study"]{--hs-c:var(--viz-4)}
.hh-flow [data-group="sources"]{--hs-c:var(--green)}
.hh-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* 움직일 때만(스크립트가 붙이는 [data-playing]) — 스크립트가 없거나 움직임 줄이기면 위의 다 찬 그림 그대로다 */
.hh-flow[data-playing] .hh-steps li{color:var(--txt-faint)}
.hh-flow[data-playing] .hh-steps li::before{border-color:var(--glass-line);color:var(--txt-faint)}
.hh-flow[data-playing] .hh-steps li.is-done{color:var(--txt-dim)}
.hh-flow[data-playing] .hh-steps li.is-done::before{border-color:rgba(var(--ember-rgb),.5);color:var(--ember)}
.hh-flow[data-playing] .hh-steps li.is-active{color:var(--txt)}
.hh-flow[data-playing] .hh-steps li.is-active::before{border-color:var(--ember);background:var(--ember);color:var(--on-accent);box-shadow:0 0 0 4px rgba(var(--ember-rgb),.16)}
.hh-flow[data-playing]:not(.is-url) .hh-ask,.hh-flow[data-playing]:not(.is-reply) .hh-reply{opacity:0;transform:translateY(6px)}
.hh-flow.is-paste .hh-prompt{background:rgba(var(--ember-rgb),.16)}
.hh-flow.is-typing .hh-q::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--ember);animation:hh-caret .8s steps(1) infinite}
.hh-flow.is-reading .hh-ai{animation:hh-read 1s ease-in-out infinite}
.hh-flow[data-playing] .hh-trail :not(.is-lit){opacity:.2}
.hh-flow[data-playing] .hh-trail code.is-lit{box-shadow:0 0 0 3px rgba(var(--green-rgb),.12)}
.hh-flow[data-playing] .hh-doc:not(.is-shown){opacity:0;transform:translateX(-6px)}
.hh-flow[data-playing]:not(.is-found) .hh-more,.hh-flow[data-playing]:not(.is-found) .hh-next{opacity:0}
.hh-token{position:absolute;left:0;top:0;z-index:2;padding:3px 10px;border:1px solid rgba(var(--ember-rgb),.55);border-radius:999px;background:var(--pop);color:var(--ember);font:600 11.5px/1.4 "JetBrains Mono",ui-monospace,monospace;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(var(--ember-rgb),.7);opacity:0;pointer-events:none}
@keyframes hh-caret{50%{opacity:0}}
@keyframes hh-read{50%{box-shadow:0 0 0 7px rgba(var(--green-rgb),.2)}}

/* 960px 이하 — / 02 한 칸: 이름표 · 제목 · 설명 · 대화창 예시 · 예시 질문(문서 순서) */
@media (max-width:960px){
  .hs-copy{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .hs-copy>.hh-flow{grid-column:1;grid-row:auto;align-self:start;margin:10px 0 0}
}
@media (max-width:860px){
  .hs-section{margin-top:72px}
}