/* index.html 전용 스타일 — 인라인 <style> 에서 옮겼다(라이트 테마 P3-C). 공용 크롬은 hub.css·nav.css.
 * 홈은 히어로만 남는다(2026-10-25) — 그 아래 그림 절의 규칙(.hs-*·.hh-*)은 절과 함께 assets/kg-prompt.css(소방 지식 그래프 맨 아래 프롬프트 절)로 옮겼다.
 * 같은 날 기획 7절: 직군 줄 자리에 AI 사용 방법 카드(.hp-*), 제목 등장 효과(.hl). 2026-10-26 단추 줄을 지우고 카드의 프롬프트 복사가 주 단추. */
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}

/* ===== 배경 열화상 오로라 ===== */
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:calc(var(--glow-opacity)*1.7);mix-blend-mode:var(--glow-blend)}
.blob.a{width:620px;height:620px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-180px;left:-120px;animation:drift1 18s ease-in-out infinite alternate}
.blob.b{width:520px;height:520px;background:radial-gradient(circle,var(--glow3),transparent 60%);top:120px;right:-160px;animation:drift2 22s ease-in-out infinite alternate}
.blob.c{width:460px;height:460px;background:radial-gradient(circle,var(--glow2),transparent 60%);bottom:-200px;left:30%;opacity:calc(var(--glow-opacity)*1.25);animation:drift3 26s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(80px,60px) scale(1.1)}}
@keyframes drift2{to{transform:translate(-70px,90px) scale(1.15)}}
@keyframes drift3{to{transform:translate(60px,-50px) scale(1.05)}}
.grain{position:fixed;inset:0;z-index:-1;opacity:var(--grain-opacity);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}

/* ===== 히어로 — 사진 배경·불씨(계획 A 이전 그대로, 2026-10-24 운영자 2차 결정으로 되살림). 숫자 여섯은 2026-10-25 운영자 결정으로 없앴다 ===== */
.hero{padding:244px 0 64px;text-align:center;position:relative;overflow:hidden;background-color:var(--bg)} /* 섬 바탕 — 사진·비네트가 다시 들어오는 동안(다시 보기·끌 때) 라이트의 밝은 body 가 비치지 않게 */
/* 히어로 배경 — image-set 미지원 브라우저는 첫 선언(jpg 원본)으로 폴백. 원본 파일은 보존 */
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:url("hero-bg.jpg") center 22%/cover no-repeat;background-image:image-set(url("hero-bg.avif") type("image/avif"),url("hero-bg.webp") type("image/webp"),url("hero-bg.jpg") type("image/jpeg"))}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(140% 95% at 50% 32%,transparent 24%,rgba(var(--bg-rgb),.48) 74%,rgba(var(--bg-rgb),.9) 100%),linear-gradient(to bottom,rgba(var(--bg-rgb),.82) 0%,rgba(var(--bg-rgb),.36) 30%,rgba(var(--bg-rgb),.5) 60%,rgba(var(--bg-rgb),.99) 100%)}
.hero>.wrap{position:relative;z-index:2}
/* 불씨 캔버스 — 비네트 위·콘텐츠(.wrap, DOM상 뒤) 아래. H1 이 움직일 수 있는 화면(1200px 이상·움직임 줄이기 아님)에서는 감춘다 — 한 화면에 움직이는 장면은 하나 */
.embers{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){.hero .embers{display:none}}
/* 히어로 장면(H1, 2026-10-25) — 숨은 캔버스·데이터·단추 자리. 그리기는 assets/home-hero.js. */
.hc-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;color:var(--bg)} /* 옛 불씨 캔버스와 같은 층 — 비네트 위·.wrap 아래. color 는 캔버스가 읽는 바탕색. 크기를 정하지 않으면 width·height 속성(W·기기 픽셀 비율)이 제 크기가 된다 */
.hc-ink{color:var(--txt);font:600 15px var(--font-sans)}
.hc-key[data-zone="site"]{color:var(--viz-2)}
.hc-key[data-zone="reference"]{color:var(--viz-3)}
.hc-key[data-zone="trend"]{color:var(--viz-1)}
.hc-key[data-zone="study"]{color:var(--viz-4)}
.hc-key[data-zone="sources"]{color:var(--green)}
.hc-key[data-zone="usage"]{color:var(--ember)}
.hc-key[data-zone="axis"]{color:var(--txt)}
.hero::before,.hero::after{transition:opacity .6s}
.hero.is-live::before,.hero.is-live::after{opacity:0} /* 캔버스가 칸을 그리기 시작하면 CSS 사진·비네트가 겹쳐 사라진다 */
/* 멈춤·다시 보기 단추 줄 — 오른쪽 아래. 위 끝은 히어로 아래 끝(100% − 단추 36 − 20)과 첫 화면 아래 끝(창 − 내비 90 − 단추 36 − 20) 가운데 위쪽:
 * 글 묶음(약 765px)이 창보다 긴 노트북 창(1280×690 등)에서도 단추가 첫 화면 안에 있다(2026-10-25 최종 검토 — bottom:20px 이면 y≈799 로 화면 밖). 앞 줄은 svh 를 모르는 브라우저용 */
.hc-ctrl{position:absolute;right:24px;top:min(calc(100% - 56px),calc(100vh - 90px - 56px));top:min(calc(100% - 56px),calc(100svh - 90px - 56px));z-index:3;display:flex;gap:8px}
/* 단추는 아이콘만(2026-10-27 운영자 '멈춤, 다시보기를 아이콘으로') — 이름은 aria-label·title(스크립트가 멈춤 ↔ 재생을 바꾸고 아이콘은 그 이름을 따른다).
 * 그림은 nav.css 메뉴 아이콘과 같은 data URI 마스크라 색은 currentColor(토큰) */
.hc-ctrl button:not([hidden]){display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--glass-line);border-radius:999px;background:var(--glass);color:var(--txt);cursor:pointer}
.hc-ctrl button::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--hc-ic) center/contain no-repeat;mask:var(--hc-ic) center/contain no-repeat}
.hc-pause{--hc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E")}
.hc-pause[aria-label="재생"]{--hc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E")}
.hc-replay{--hc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6L3.5 8.5'/%3E%3Cpath d='M3.5 3.5v5h5'/%3E%3C/svg%3E")}
.hc-ctrl button:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
/* 1200px 이상: 홈 히어로는 최소 창 높이(내비 90px 제외) — 처음 화면에는 히어로만 보인다. 글·단추는 그대로 가운데 */
@media (min-width:1200px){.hero{display:flex;flex-direction:column;justify-content:center;min-height:max(640px,calc(100vh - 90px));min-height:max(640px,calc(100svh - 90px))}}
.hero>.wrap{width:100%} /* flex 열에서도 본문 틀이 줄지 않게(가운데 정렬은 .wrap 의 auto 여백 그대로) */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--glass);border:1px solid var(--glass-line);
  border-radius:100px;padding:7px 16px;font-size:12.5px;color:var(--txt-dim);
  margin:0 0 28px;backdrop-filter:blur(10px);
}
.pill .live{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{
  font-size:clamp(42px,7.5vw,94px);line-height:1;letter-spacing:-.03em;font-weight:700;
  font-family:"Space Grotesk";
  text-shadow:0 2px 30px rgba(var(--shade-rgb),.55),0 1px 3px rgba(var(--shade-rgb),.5);
}
.hero h1 .em{
  font-family:"Instrument Serif";font-weight:400;font-style:italic;letter-spacing:0;
  background:linear-gradient(100deg,var(--amber),var(--ember) 45%,var(--crim));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.16em;
  /* 글자 그림자(h1 의 text-shadow)는 글자 모양으로 자른 배경 위에 칠해져 불꽃 그라디언트를 탁하게 덮는다 — 사진 위 가독성은 같은 세기의 그림자 필터로(2026-10-25 기획 7절 3, 'AI'가 불꽃색으로 켜진 뒤의 모습) */
  text-shadow:none;filter:drop-shadow(0 2px 14px rgba(var(--shade-rgb),.55));
}
.hero p.lede{
  max-width:620px;margin:30px auto 24px;font-size:18px;color:var(--read);font-weight:400;word-break:keep-all;
  text-shadow:0 1px 14px rgba(var(--shade-rgb),.72);
}
/* ===== AI 사용 방법 카드(BUILD:HOMEPROMPT) — 2026-10-25 기획 7절 2 → 2026-10-26 운영자 '상세 URL 이 있어 복잡해 보인다 — 처음 보는
 * 사용자가 쉽게 이해하고 쓰게' → 세 단계 그림형. 히어로의 주 단추는 이 카드의 '프롬프트 복사' 하나다('내 업무에 맞게 시작하기'는 지웠다).
 * 2026-10-27 시안 A: AI 대화창 예시(붙여 넣은 질문 → AI가 연 파일 → 근거가 붙은 답, assets/home-chat.js 가 한 번 차례로 보임 — 옛 머리·한 줄 설명·세 칸을 바꿈) →
 * 프롬프트 복사(불꽃 그라디언트) + 복사되는 프롬프트 보기(팝업) → 가는 선 아래 작은 입구 주소(글만 읽는 AI용). 사진 위 다크 섬 유리 카드 — 홈 .hero 는 토큰 섬이라
 * 라이트 테마에서도 다크 값으로 그린다. H1 장면이 이 카드 상자를 글 상자에 넣는다(home-hero.js measure).
 * 단추 글은 '프롬프트 복사' ↔ '복사했습니다'(copy-address.js)로 바뀌므로 최소 폭을 둬 줄이 흔들리지 않게 한다. */
.hp-card{position:relative;max-width:720px;margin:0 auto;padding:20px 24px 14px;border-radius:22px;background:linear-gradient(180deg,rgba(var(--bg2-rgb),.76),rgba(var(--bg-rgb),.62));border:1px solid rgba(var(--ember-rgb),.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--hilite),0 24px 60px -34px rgba(var(--ember-rgb),.65),0 0 46px -22px rgba(var(--ember-rgb),.34)}
.hp-card::before{content:"";position:absolute;top:-1px;left:16%;right:16%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--amber-rgb),.7),transparent);pointer-events:none}
.hp-chat{text-align:left;border:1px solid var(--glass-line);border-radius:16px;background:rgba(var(--shade-rgb),.38);box-shadow:inset 0 1px 0 var(--hilite)}
.hp-bar{display:flex;align-items:center;gap:7px;padding:8px 14px;border-bottom:1px solid var(--glass-line);font-size:11.5px;line-height:1.3;color:var(--txt-faint)}
.hp-bar i{flex:none;width:8px;height:8px;border-radius:50%;background:rgba(var(--white-rgb),.14)}
.hp-body{display:grid;gap:11px;padding:13px 15px 14px}
.hp-u{justify-self:end;max-width:92%;display:grid;justify-items:end;gap:6px}
.hp-attach{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border:1px solid rgba(var(--ember-rgb),.42);border-radius:9px;background:rgba(var(--ember-rgb),.1);font-size:12px;line-height:1.4;color:var(--amber)}
.hp-attach svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hp-q{padding:8px 13px;border-radius:14px 14px 4px 14px;background:rgba(var(--white-rgb),.08);font-size:14px;line-height:1.55;color:var(--txt);word-break:keep-all}
.hp-rest{visibility:hidden}
.hp-chat.is-typing .hp-q>span:first-child::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--amber)}
.hp-reads{display:flex;flex-wrap:wrap;gap:6px}
.hp-reads>*{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--glass-line);border-radius:8px;font:400 11.5px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--txt-dim)}
.hp-reads>*::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--green)}
.hp-ans{display:grid;gap:8px;padding:10px 13px;border:1px solid var(--glass-line);border-radius:12px;background:rgba(var(--white-rgb),.02)}
.hp-ans p{margin:0;font-size:12.5px;line-height:1.55;color:var(--txt-dim);word-break:keep-all}
.hp-ans ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.hp-ans li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;font-size:13.5px;line-height:1.5;color:var(--txt);word-break:keep-all}
.hp-ans li>span{min-width:0}
.hp-ans b{padding:1px 7px;border:1px solid var(--glass-line);border-radius:6px;font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;color:var(--hs-c,var(--txt-dim))}
.hp-ans code{display:block;margin-top:1px;font:400 11px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--txt-faint);overflow-wrap:anywhere}
.hp-chat [data-group="site"]{--hs-c:var(--viz-2)}
.hp-chat [data-group="reference"]{--hs-c:var(--viz-3)}
.hp-chat [data-group="trend"]{--hs-c:var(--viz-1)}
.hp-chat [data-group="study"]{--hs-c:var(--viz-4)}
.hp-chat [data-group="sources"]{--hs-c:var(--green)}
/* 넓은 화면(900px 이상): 질문과 답을 나란히 — 왼쪽 붙여 넣은 질문, 오른쪽 AI가 연 파일과 답. 카드가 낮아 첫 화면에 단추가 든다(2026-10-25 낮은 창 규칙) */
@media (min-width:900px){
  .hp-body{grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"u r" "u a";column-gap:18px;row-gap:9px;align-items:start}
  .hp-u{grid-area:u;justify-self:stretch;justify-items:start;max-width:none;padding-right:16px;border-right:1px solid var(--glass-line);align-self:stretch}
  .hp-q{border-radius:14px 14px 14px 4px}
  .hp-reads{grid-area:r}
  .hp-ans{grid-area:a}
}
.hp-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hp-act{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;margin:2px 0 14px}
.hp-copy{display:inline-flex;align-items:center;justify-content:center;min-width:9.5em;min-height:46px;padding:12px 30px;border-radius:999px;font:700 15px/1.2 var(--font-sans);color:var(--on-accent);background:linear-gradient(120deg,var(--ember),var(--crim));box-shadow:0 10px 40px -8px rgba(var(--glow1-rgb),.6);text-decoration:none;transition:transform .2s,box-shadow .2s}
.hp-copy:hover{transform:translateY(-2px);box-shadow:0 16px 50px -8px rgba(var(--glow1-rgb),.75)}
.hp-more{padding:0;border:0;background:none;font-family:inherit;cursor:pointer;font-size:13px;line-height:1.4;color:var(--txt-dim);text-decoration:underline;text-decoration-color:rgba(var(--ink-rgb),.25);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.hp-more:hover{color:var(--txt);text-decoration-color:rgba(var(--ember-rgb),.7)}
.hp-file{margin:14px 0 0;padding-top:11px;border-top:1px solid var(--glass-line);font-size:11.5px;line-height:1.4;color:var(--txt-faint);word-break:keep-all}
.hp-file a{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:-.01em;color:var(--txt-dim);text-decoration:none;overflow-wrap:anywhere;transition:color .2s}
.hp-file a:hover{color:var(--txt)}
.hp-copy:focus-visible,.hp-more:focus-visible,.hp-file a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
/* 복사되는 프롬프트 팝업(2026-10-26 운영자 — 활용 방법 중간으로 옮겨 가던 '프롬프트 보기 →' 대신, 복사한 글이 무엇인지 그 자리에서 보이게).
 * HTML popover: 스크립트 없이 열고 Esc·바깥 누르기로 닫힌다. 맨 위 층(top layer)에 그려져 카드의 자르기·등장 효과·.hero 의 overflow 에 걸리지 않고,
 * 색 토큰은 DOM 조상(.hero 섬)에서 이어받아 라이트 테마에서도 다크다. 닫힌 팝업은 display:none 을 직접 둔다 — popover 를 모르는 옛 브라우저에서
 * 카드 안에 글이 펼쳐지지 않게(그 브라우저에는 :popover-open 규칙이 통째로 버려진다). 그런 브라우저에서는 여는 단추도 숨긴다. */
.hp-pop{display:none;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);overflow:auto;margin:auto;padding:20px 22px 18px;border-radius:18px;border:1px solid rgba(var(--ember-rgb),.28);background:rgb(var(--bg2-rgb));color:var(--txt);text-align:left;box-shadow:0 30px 80px -20px rgba(var(--shade-rgb),.8)}
.hp-pop:popover-open{display:block}
.hp-pop::backdrop{background:rgba(var(--shade-rgb),.55)}
.hp-pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp-pop-head h3{margin:0;font:700 16px/1.35 var(--font-sans);color:var(--txt)}
.hp-pop-x{flex:none;width:32px;height:32px;padding:0;border:1px solid var(--glass-line);border-radius:50%;background:none;color:var(--txt-dim);font:400 20px/1 var(--font-sans);cursor:pointer;transition:color .2s}
.hp-pop-x:hover{color:var(--txt)}
.hp-pop-x:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.hp-pop-sub{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--txt-dim);word-break:keep-all}
.hp-prompt{margin:12px 0 0;padding:14px 16px;border-radius:12px;background:rgba(var(--shade-rgb),.35);border:1px solid var(--glass-line);font-size:13.5px;line-height:1.7;color:var(--read);white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere}
@supports not selector(:popover-open){.hp-more{display:none}}
@media (max-width:560px){
  .hp-card{padding:18px 16px 14px;border-radius:18px}
  .hp-body{padding:12px 12px 13px}
  .hp-u{max-width:100%}
  .hp-copy{width:100%}
}
/* 낮은 창(1200px 이상 · 높이 880px 이하 — 1280×720·1366×768·1536×864) — 1280×720 에서 AI 사용 방법 카드가 첫 화면 밖이던 것(2026-10-25 운영자).
 * 이 폭·높이에서 사진(16:9, cover)은 히어로 높이에 맞춰 그려져, 히어로가 짧아지면 얼굴도 같은 비율로 작아지며 올라간다 —
 * 위 여백을 창 높이의 28%(196–244px)로 함께 줄이고 제목·간격을 줄여도 글은 얼굴 아래에 남는다. 앞 줄은 svh 를 모르는 브라우저용. */
@media (min-width:1200px) and (max-height:880px){
  .hero{padding-top:clamp(196px,28vh,244px);padding-top:clamp(196px,28svh,244px)}
  .hero h1{font-size:min(7.5vw,94px,9.2vh);font-size:min(7.5vw,94px,9.2svh)}
  .pill{margin-bottom:16px}
  .hero p.lede{margin:16px auto 14px}
  .hp-card{padding:14px 22px 10px}
  /* 대화창(2026-10-27 시안 A)은 낮은 창에서 창 제목줄·설명 줄·주소 줄을 뺀다 — 단추는 이미 대화창 위(빌더 순서) */
  .hp-act{margin-bottom:10px}
  .hp-bar,.hp-ans p,.hp-ans code{display:none}
  .hp-body{row-gap:7px;padding:10px 14px 11px}
  .hp-ans{gap:6px;padding:8px 12px}
  .hp-copy{min-height:42px;padding:10px 28px}
  .hp-file{margin-top:10px;padding-top:8px}
}
/* ===== 등장 효과(2026-10-25 기획 7절 3 · 2026-10-26 운영자 '설명 줄에도, 세련된 디자인과 애니메이션') — 카드 규칙 뒤에 둔다 =====
 * 차례: 제목 글자가 하나씩 아래에서 솟으며 흐림이 걷히고(약 1초, 둘째 줄이 이어서) 'AI'(.em)가 불꽃색으로 켜지며 빛이 한 번 훑는다 →
 * 설명 줄이 왼쪽에서 오른쪽으로 쓸리듯 나타난다(가림막 mask 는 키프레임 안에만 — 끝나면 남지 않아 글자 그림자를 자르지 않는다) →
 * 카드가 가운데에서 펼쳐지듯 나타나고(투명도·clip-path 뿐, 자리는 그대로) → 프롬프트 복사 단추에 빛이 한 번(대화창 안의 차례는 assets/home-chat.js).
 * 모두 한 번만(반복 없음), 끝나면 원래 값(backwards — 끝난 뒤 남는 값 없음). 효과는 화면 매체·움직임 허용·스크립트 켜짐에서만 건다 —
 * 움직임 줄이기·스크립트 꺼짐·인쇄(와 scripting 을 모르는 옛 브라우저)에서는 아래 미디어 블록이 닿지 않아 처음부터 다 보인다.
 * 숨기는 값은 키프레임의 첫 칸뿐이라 먼저 보였다가 숨는 깜박임이 없다.
 * H1 장면(assets/home-hero.js)이 재는 글 상자(알약 라벨·제목·설명·카드의 합집합)는 효과 도중에도 같다 — 제목·설명은 세로로 조금 움직일 뿐 합집합 안이고,
 * 카드 상자는 움직이지 않으며(대화창의 단계·단추만 카드 안에서 투명도로 움직인다), clip-path·투명도는 상자를 바꾸지 않는다.
 * 지연은 글자 번호 --i(nth-child)·줄 번호 --l·칸 번호 --s. 화면 읽기 프로그램은 조각 대신 h1 의 aria-label 한 줄을 읽는다(조각 묶음은 aria-hidden). */
.hero h1 .hl>span{display:inline-block}
.hero h1 .hl>:nth-child(2){--i:1}
.hero h1 .hl>:nth-child(3){--i:2}
.hero h1 .hl>:nth-child(4){--i:3}
.hero h1 .hl>:nth-child(5){--i:4}
.hero h1 .hl>:nth-child(6){--i:5}
.hero h1 .hl~.hl{--l:1}
@media screen and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .hero h1 .hl>span{animation:hero-rise .56s cubic-bezier(.2,.8,.2,1) calc(.08s + var(--l,0) * .3s + var(--i,0) * .036s) backwards}
  .hero h1 .em{background-image:linear-gradient(100deg,transparent 42%,rgba(var(--white-rgb),.92) 50%,transparent 58%),linear-gradient(100deg,var(--amber),var(--ember) 45%,var(--crim));background-size:300% 100%,100% 100%;background-repeat:no-repeat}
  .hero h1 .em{animation:hero-ignite .8s cubic-bezier(.3,.7,.3,1) .9s backwards,hero-sweep .9s cubic-bezier(.45,0,.25,1) 1.05s backwards}
  .hero p.lede{animation:hero-wipe 1.1s cubic-bezier(.33,.7,.2,1) .95s backwards}
  .hp-card{animation:hero-card .8s cubic-bezier(.2,.8,.2,1) 1.3s backwards}
  .hp-copy{animation:hero-glow 1.2s cubic-bezier(.3,.6,.3,1) 2.15s backwards}
  /* 대화창 차례(assets/home-chat.js 가 화면에 들어올 때 is-wait 를 걷는다 — 움직임 줄이기·스크립트 꺼짐에서는 이 규칙이 닿지 않아 처음부터 다 보인다) */
  .hp-chat [data-hp-step]{transition:opacity .45s ease,transform .45s ease}
  .hp-chat .is-wait{opacity:0;transform:translateY(4px)}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(.42em);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes hero-ignite{0%{filter:brightness(.5) saturate(0) drop-shadow(0 0 0 rgba(var(--ember-rgb),0))}45%{filter:brightness(1.3) saturate(1.2) drop-shadow(0 0 .16em rgba(var(--ember-rgb),.7))}to{filter:brightness(1) saturate(1) drop-shadow(0 2px 14px rgba(var(--shade-rgb),.55))}}
@keyframes hero-sweep{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}
@keyframes hero-wipe{from{transform:translateY(.3em);-webkit-mask-image:linear-gradient(90deg,var(--bg) 40%,transparent 60%);mask-image:linear-gradient(90deg,var(--bg) 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}to{transform:none;-webkit-mask-image:linear-gradient(90deg,var(--bg) 40%,transparent 60%);mask-image:linear-gradient(90deg,var(--bg) 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes hero-card{from{opacity:0;clip-path:inset(22% 6% 22% 6% round 22px)}to{opacity:1;clip-path:inset(0 round 22px)}}
@keyframes hero-glow{from{box-shadow:0 0 0 0 rgba(var(--ember-rgb),.5),0 10px 40px -8px rgba(var(--glow1-rgb),.6)}45%{box-shadow:0 0 0 7px rgba(var(--ember-rgb),.2),0 16px 52px -8px rgba(var(--glow1-rgb),.9)}to{box-shadow:0 0 0 16px rgba(var(--ember-rgb),0),0 10px 40px -8px rgba(var(--glow1-rgb),.6)}}

.btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:100px;
  font-weight:600;font-size:15px;transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-fire{
  background:linear-gradient(120deg,var(--ember),var(--crim));color:var(--on-accent);
  box-shadow:0 10px 40px -8px rgba(var(--glow1-rgb),.6);
}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 16px 50px -8px rgba(var(--glow1-rgb),.75)}
.btn-glass{background:var(--glass);border:1px solid var(--glass-line);color:var(--txt);backdrop-filter:blur(10px)}
.btn-glass:hover{transform:translateY(-2px);background:rgba(var(--ink-rgb),.08)}

/* ===== 상황판 — 콘텐츠 성장 스파크라인(BUILD:SPARK 가 주입) ===== */
.sboard{max-width:620px;margin:26px auto 0;padding:15px 20px 12px;background:var(--panel);border:1px solid var(--glass-line);border-radius:14px;backdrop-filter:blur(10px);box-shadow:0 0 40px -14px rgba(var(--ember-rgb),.4),inset 0 1px 0 var(--hilite)}
.sboard .spark{display:block;width:100%;height:46px;filter:drop-shadow(0 2px 7px rgba(var(--ember-rgb),.5))}
.sboard-cap{display:flex;align-items:center;gap:8px;margin-top:10px;font-family:"Space Grotesk";font-size:11px;letter-spacing:.09em;color:var(--txt-dim);text-transform:uppercase}
.sboard-cap b{margin-left:auto;color:var(--amber);font-weight:600;letter-spacing:.05em}
.sb-live{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 9px 1.5px rgba(var(--ember-rgb),.85);animation:sbPulse 2.2s ease-in-out infinite}
@keyframes sbPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){.sb-live{animation:none}}

/* ===== 푸터 ===== */
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot .brand{margin-bottom:14px}
.foot p{font-size:13.5px;color:var(--txt-dim);max-width:320px}
.flinks{display:flex;gap:60px;flex-wrap:wrap}
.fcol h5{font-family:"Space Grotesk";font-size:12px;color:var(--txt);letter-spacing:.06em;margin-bottom:14px}
.fcol a{display:block;padding:5px 0;font-size:13.5px;color:var(--txt-dim);transition:color .2s}
.fcol a:hover{color:var(--ember)}
.copy{margin-top:40px;font-family:"Space Grotesk";font-size:11.5px;color:var(--txt-faint);letter-spacing:.04em}

@media (max-width:900px){
  .menu,.enter{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
}