/* 무대 토큰 .hb-stage(11-04 · 지시서 §19 + §20 "antimetal 처럼 아래는 색 변하는 거") — 무대 담당.
   §20 = 딱 잘린 검은 상자 대신 쪽 전체 색 뒤집기: js/board-ui.js scheme() 이 html[data-scheme] 을 "dark"(#different 윗변이 화면 위 60% 선을 넘음)
     ↔ "light"(#gfx-dial 아랫변이 그 선을 넘음 · 무대 끝 띠와 B 밝은 구간이 들어옴)로 바꾸고, 위로 갈 때도 같은 선으로 거꾸로.
     → body 바탕이 0.5초 동안 크림 ↔ 숯색 · 무대 구간(.hb-stage)은 바탕 투명(쪽 색이 비침)이고 아래 토큰이 같은 0.5초로 스르르 바뀜.
   이 파일 = 정의만: 토큰(밝은 쪽 = 지금 홈 크림 그대로 · 어두운 쪽 = 리드 실측값) · 장면이 읽는 다섯(--gfx-*) · 장면 주인공 판 .st-frame · 글 크기·간격.
     배치(첫 줄 · 진행 줄 · B1 · 장면 자리 · 점선 · 무대 끝 주황 띠 · 머리줄·독 뒤집기)는 board.css 맨 끝 '무대' 블록.
   토큰은 색으로 등록(@property)해 값 자체가 0.5초 동안 섞임 — 전환은 무대 구간 요소에만 걸어 쪽 전체 다시 계산 0.
     html.anim(모션 줄이기 아님 · ?still=1 아님) + html.hb-sch(첫 판정 뒤 · 새로고침 때 번쩍 0) 일 때만 전환 · 그 밖 = 0초.
   장면 조각이 지킬 것: var(--gfx-ink, 밝은 기본값) 꼴로 읽기만 · 캔버스는 그릴 때 getComputedStyle — 값은 늘 rgb()(알파 없음 · --gfx-line 도 불투명 값).
     뒤집기 신호 = html[data-scheme] 변화(MutationObserver) 또는 document 의 'hb:scheme' {scheme, ms}(ms 동안 프레임마다 다시 읽으면 바탕과 같이 섞임).
   JS 꺼짐(html:not(.fxjs)) = 뒤집기 없음 → 무대 구간만 어두운 판(바탕 칠함 · 예전 포스터). */
@property --st-bg { syntax: '<color>'; inherits: true; initial-value: rgb(253, 251, 247); }
@property --st-bg2 { syntax: '<color>'; inherits: true; initial-value: rgb(243, 233, 220); }
@property --st-ink { syntax: '<color>'; inherits: true; initial-value: rgb(21, 20, 20); }
@property --st-sub { syntax: '<color>'; inherits: true; initial-value: rgb(77, 74, 70); }
@property --st-dim { syntax: '<color>'; inherits: true; initial-value: rgb(115, 109, 102); }
@property --st-line { syntax: '<color>'; inherits: true; initial-value: rgb(230, 220, 205); }
@property --st-hair { syntax: '<color>'; inherits: true; initial-value: rgb(230, 220, 205); }
@property --st-rule { syntax: '<color>'; inherits: true; initial-value: rgb(217, 207, 191); }
@property --st-ok { syntax: '<color>'; inherits: true; initial-value: rgb(31, 122, 77); }
@property --st-shade { syntax: '<color>'; inherits: true; initial-value: rgba(26, 22, 20, .2); }

:root {
  /* 전환 목록(무대 구간·진행 줄이 같이 씀) · 곡선 = 쪽 공통 UI 곡선이 아니라 고른 선형 가까운 곡선(바탕 body 와 같은 박자) */
  --st-ease: ease;   /* §21: antimetal --theme-ease 그대로(.5s ease) */
  --st-tr: --st-bg .5s var(--st-ease), --st-bg2 .5s var(--st-ease), --st-ink .5s var(--st-ease), --st-sub .5s var(--st-ease), --st-dim .5s var(--st-ease),
    --st-line .5s var(--st-ease), --st-hair .5s var(--st-ease), --st-rule .5s var(--st-ease), --st-ok .5s var(--st-ease), --st-shade .5s var(--st-ease);
  --st-dark-bg: rgb(26, 22, 20);   /* body 바탕(어두운 쪽) = --st-bg 어두운 값과 같음 */
}

.hb-stage {
  /* 밝은 쪽 = 지금 홈 B 구간 값 그대로(board.css .hb 의 --c-cream · --c-sand · --c-ink · --c-sub · --c-mute · --c-line · --c-rule · --c-ok) */
  --st-bg: rgb(253, 251, 247);     /* 바탕(크림 #fdfbf7) */
  --st-bg2: rgb(243, 233, 220);    /* 한 단 다른 판(모래 #f3e9dc · 입력 칸 · 중립 칩) */
  --st-ink: rgb(21, 20, 20);       /* 글자 #151414 */
  --st-sub: rgb(77, 74, 70);       /* 중간 글 #4d4a46 */
  --st-dim: rgb(115, 109, 102);    /* 흐린 글 #736d66 */
  --st-line: rgb(230, 220, 205);   /* 머리카락 선 #e6dccd */
  --st-hair: rgb(230, 220, 205);   /* 불투명 머리카락 선(캔버스 --gfx-line) */
  --st-rule: rgb(217, 207, 191);   /* 한 단 진한 선 #d9cfbf */
  --st-ok: rgb(31, 122, 77);       /* 초록 '사라짐' #1f7a4d */
  --st-shade: rgba(26, 22, 20, .2);
  --st-accent: #ff5e1f;            /* = board.css --c-or 브랜드 주황(새 색 0 · 두 쪽 같음) */
  --gfx-ink: var(--st-ink); --gfx-paper: var(--st-bg); --gfx-dim: var(--st-dim); --gfx-line: var(--st-hair); --gfx-accent: var(--st-accent);
  --st-col: min(100% - 80px, 1360px);                  /* 글 기둥(쪽 다른 구간과 같은 폭 · 좌우 40) */
  --st-pad: 128px;                                     /* 구간 위 여백 = 장면 사이 간격(점선 머리카락 선이 이 간격 한가운데) */
  --st-prog: 48px;                                     /* 진행 줄 높이(아래 선 1px 포함) */
  --st-top: calc(var(--hdx-band, 64px) + var(--st-prog));   /* 머리줄 + 진행 줄 아래 = 보이는 무대 맨 위(붙어 따라오는 장면의 top) */
  --st-eb: 15px; --st-h: 54px; --st-lead: 18px;        /* 단계 이름 · 장면 제목(antimetal 54) · 한 줄 */
  background: transparent; color: var(--st-ink); color-scheme: light;
}
/* 어두운 쪽(§20 리드 실측 antimetal · 1440×900 · 11-04): 바탕 rgb(26,22,20) · 한 단 밝은 판 rgb(37,33,31) · 글 rgb(250,251,247) · 흐린 글 rgb(187,187,183) · 선 rgba(250,251,247,.12)
   중간 글 = 글 55% + 흐린 글 · 불투명 선 = 바탕 위 글 12%(캔버스용 · 위 선과 같은 화면 색) · 진한 선 = 글 24%(antimetal line-strong) · 초록 = 무대에서 읽히게 밝힌 같은 초록 */
html[data-scheme="dark"] .hb-stage, html:not(.fxjs) .hb-stage {
  --st-bg: rgb(26, 22, 20);
  --st-bg2: rgb(37, 33, 31);
  --st-ink: rgb(250, 251, 247);
  --st-sub: rgb(222, 222, 218);
  --st-dim: rgb(187, 187, 183);
  --st-line: rgba(250, 251, 247, .12);
  --st-hair: rgb(53, 49, 47);
  --st-rule: rgb(80, 77, 74);
  --st-ok: rgb(52, 163, 107);
  --st-shade: rgba(0, 0, 0, .5);
  --st-accent: #ff6b2e;            /* §21: 어두울 때 주황 한 단 밝게(antimetal #c96726→#d77435 와 같은 폭 +14) */
  color-scheme: dark;
}
html:not(.fxjs) .hb-stage:not(.hb-anchor) { background: var(--st-bg); }   /* JS 꺼짐 = 뒤집기 없음 → 무대 구간이 스스로 칠함 */
/* 장면 조각 뿌리가 --gfx-* 를 다시 선언해도 무대 값으로 덮음(조각 뿌리 = 자리 section 의 직속 자식) */
.hb-stage.hb-gfx > * { --gfx-ink: var(--st-ink); --gfx-paper: var(--st-bg); --gfx-dim: var(--st-dim); --gfx-line: var(--st-hair); --gfx-accent: var(--st-accent); }

/* 0.5초 뒤집기 — 무대 구간 요소에만(진행 줄은 board.css 에서 자기 전환과 합침) · body 바탕 · 모션 줄이기 = 0초 */
html[data-scheme="dark"] body { background-color: var(--st-dark-bg); }
/* §21 끝에서 다시 어두움: 상담(#contact · hb-stage)과 바닥(.ft · frame.css 변수)도 같이 뒤집힘 */
/* 11-04 13:3x 사장님 폰 화면 '하단 글자 묻힘' — 마무리 구간(.s7x · About Us 꽃 글자 아래 제목·한 줄·단추 둘)은 home.css 변수(--ink·--sub·--cream)를 써서 숯색 위에 먹 글자로 남았음 → 어두울 때 그 변수를 뒤집음(먹 단추 = 밝은 알약 · 선 단추 = 밝은 선) */
html[data-scheme="dark"] .s7x { --ink: rgb(250, 251, 247); --ink2: rgb(222, 222, 218); --sub: rgb(187, 187, 183); --cream: rgb(26, 22, 20); --page: rgb(26, 22, 20); color: rgb(250, 251, 247); }
/* 13:4x 리드 폰 확인: .s7x .btn-kakao 는 color: var(--page) — --page 를 안 뒤집어 밝은 알약 위 밝은 글자(안 보임)였음 → 위에서 --page 도 숯색으로 */
html[data-scheme="dark"] .ft { --page: rgb(26, 22, 20); --ink: rgb(250, 251, 247); --line: rgba(250, 251, 247, .12); --sub: rgb(187, 187, 183); --mute: rgb(187, 187, 183); --sand: rgb(37, 33, 31); --paper: rgb(37, 33, 31); }
@media (prefers-reduced-motion: no-preference) {
  html.anim.hb-sch body { transition: background-color .5s var(--st-ease); }
  html.anim.hb-sch .hb-stage { transition: var(--st-tr); }
  html.anim.hb-sch .ft { transition: background-color .5s var(--st-ease), color .5s var(--st-ease), border-color .5s var(--st-ease); }
  html.anim.hb-sch .s7x .say h2, html.anim.hb-sch .s7x .say p, html.anim.hb-sch .s7x .btn-kakao, html.anim.hb-sch .s7x .btn-line, html.anim.hb-sch .s7x .kk-st { transition: background-color .5s var(--st-ease), color .5s var(--st-ease), border-color .5s var(--st-ease); }
}

/* ── 장면 주인공 그래픽 판 .st-frame(§20 ③ · 붙이기 = 장면 조각) ─────────────────────────────
   둥글기 20 · 1px 머리카락 선(--st-line) · 깊고 부드러운 그림자 · 둘레 구리→주황 아주 옅은 빛(브랜드 주황을 바탕에 섞은 색만 · 새 색 0).
   판 안 = 바탕보다 한 숨 밝은 면(글 2.5%) · 안쪽 내용은 판 모서리에서 잘림(overflow clip · 그림자·테두리 빛은 바깥이라 안 잘림).
   자리 잡기 속성(position · isolation · overflow)은 :where() = 세기 0 → 조각 CSS 가 같은 요소에 정한 값이 이김. ::after 는 판이 씀(조각은 ::before 만). */
:where(.st-frame) { position: relative; isolation: isolate; overflow: clip; }
.st-frame {
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--st-ink, #151414) 2.5%, transparent);
  box-shadow: 0 0 0 1px var(--st-line, rgba(21, 20, 20, .1)), 0 2px 6px -2px var(--st-shade, rgba(26, 22, 20, .2)),
    0 44px 88px -36px var(--st-shade, rgba(26, 22, 20, .2)), 0 0 64px -28px color-mix(in srgb, var(--st-accent, #ff5e1f) 12%, transparent);
}
.st-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--st-accent, #ff5e1f) 44%, var(--st-bg, #fdfbf7)) 0%,
    color-mix(in srgb, var(--st-accent, #ff5e1f) 22%, transparent) 26%,
    transparent 48%, transparent 64%,
    color-mix(in srgb, var(--st-accent, #ff5e1f) 34%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .5;
}
@media (max-width: 767px) { .st-frame { border-radius: 16px; } }

@media (max-width: 1180px) { .hb-stage { --st-pad: 112px; --st-h: 44px; } }
@media (max-width: 767px) { .hb-stage { --st-col: calc(100% - 32px); --st-pad: 72px; --st-prog: 40px; --st-eb: 14px; --st-h: 34px; --st-lead: 16px; } }
@media (max-width: 379px) { .hb-stage { --st-h: 31px; } }