/* 11-09(Y 17:06 "하나하나 반영해서 로컬 포트로 띄워봐", 종합 지시서, 20:45 "배포해. GO."). 장면(scene.css) 위에 더한 구역들:
   [구간 2] 문제 공감 .hk(히어로 숲이 안개에 잠기는 빈 구간 .tv-hold 안), [구간 3] 핵심 동작 .hw(아침 햇살 숲, 화면에 붙은 판에서 1 → 2 → 3),
   [구간 4] 제품 도입 제목과 투칸, [구간 5] 이런 순간에 .ip(장면 뒤 글 흐름, scene.js XV), 바닥 시작하기 .foot-cta.
   움직임(옅기, 단계 넘김)은 sections.js. 스크립트가 없으면 모두 보이는 채로 흐른다 */

/* ── [구간 2] 문제 공감: 안개가 짙어지는 동안 화면 가운데에 붙는다 ── */
#body-v[data-dir="trail-scene"] .tv-hold { height: 190vh; }
.hk { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; box-sizing: border-box; padding: var(--nav-h, 58px) 24px 0; }
.hk-in { max-width: 880px; text-align: center; pointer-events: auto; opacity: var(--hk-o, 1); transform: translateY(calc((1 - var(--hk-o, 1)) * 22px)); will-change: opacity, transform; }
.hk-q { margin: 0 0 clamp(18px, 2.6vh, 28px); font-size: clamp(32px, 3.9vw, 58px); font-weight: 760; line-height: 1.16; letter-spacing: -.04em; color: #1d3527; text-wrap: balance;
  text-shadow: 0 1px 22px rgba(236, 243, 238, .7); }
.hk-p { margin: 0; font-size: clamp(16px, 1.32vw, 20px); font-weight: 560; line-height: 1.8; color: rgba(29, 53, 39, .88); text-wrap: balance; text-shadow: 0 1px 16px rgba(236, 243, 238, .75); }
html[data-theme="dark"] .hk-q { color: #eef4ef; text-shadow: 0 1px 22px rgba(2, 8, 12, .6); }
html[data-theme="dark"] .hk-p { color: rgba(238, 244, 239, .84); text-shadow: 0 1px 16px rgba(2, 8, 12, .6); }

/* ── [구간 3] 핵심 동작: 아침 햇살 숲(IR 덱 bg_18) 위 유리 판. 하늘과 판이 함께 화면에 붙고, 위 끝은 안개 빛에서 풀린다 ── */
.hw { position: relative; z-index: 1; height: 360vh; }
.hw::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 70vh; pointer-events: none;
  background: linear-gradient(to bottom, var(--tv-mist, #c6d6cf) 0%, rgba(198, 214, 207, .55) 38%, rgba(198, 214, 207, 0) 100%); }
html[data-theme="dark"] .hw::before { background: linear-gradient(to bottom, var(--tv-mist, #0f1f24) 0%, rgba(15, 31, 36, .55) 38%, rgba(15, 31, 36, 0) 100%); }
.hw-sky { position: sticky; top: 0; height: 100vh; height: 100lvh; background: #6f7a5a url("../forest-morning.webp") center 40% / cover no-repeat; }
html[data-theme="dark"] .hw-sky { filter: brightness(.62) saturate(.9); }
.hw-stick { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100lvh; display: flex; align-items: center; box-sizing: border-box; padding: calc(var(--nav-h, 58px) + 12px) 0 16px; }
.hw-in { width: min(1240px, calc(100% - 48px)); max-height: 100%; margin: 0 auto; box-sizing: border-box; padding: clamp(22px, 3.2vh, 34px) clamp(22px, 2.6vw, 38px);
  border-radius: 22px; background: var(--sc-glass, rgba(248, 246, 240, .7)); box-shadow: inset 0 0 0 1px var(--sc-glass-line, rgba(255, 255, 255, .55)), var(--sc-glass-shadow, 0 24px 60px -18px rgba(12, 28, 18, .45));
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); color: var(--text); }
.hw-title { margin: 0 0 10px; font-size: clamp(26px, 2.55vw, 40px); font-weight: 760; line-height: 1.24; letter-spacing: -.035em; color: #1d3527; }
html[data-theme="dark"] .hw-title { color: #eef4ef; }
.hw-lead { margin: 0 0 clamp(16px, 2.6vh, 26px); max-width: 60em; font-size: clamp(14.5px, 1.08vw, 16.5px); line-height: 1.72; color: var(--muted); }
.hw-body { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 36px); align-items: center; }
.hw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hw-step { border-radius: 14px; padding: 12px 14px; opacity: .5; transition: opacity .35s var(--ease-out, ease), background-color .35s var(--ease-out, ease), box-shadow .35s var(--ease-out, ease); }
.hw-step.on { opacity: 1; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(24, 53, 37, .1); }
html[data-theme="dark"] .hw-step.on { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(223, 238, 227, .12); }
.hw-go { all: unset; display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 8px; }
.hw-go:focus-visible { outline: 2px solid var(--brand, #1e6e43); outline-offset: 3px; }
.hw-step .addr-num { opacity: 1; transform: none; min-width: 26px; height: 26px; padding: 0 7px; font-size: 12.5px; }
.hw-go b { font-size: clamp(16px, 1.2vw, 18px); font-weight: 740; letter-spacing: -.02em; color: var(--text); }
.hw-step p { margin: 6px 0 0 36px; font-size: clamp(13.5px, .98vw, 15px); line-height: 1.62; color: var(--muted); }
.hw-shot { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #f5f2ec; box-shadow: 0 18px 40px rgba(0, 0, 0, .22), inset 0 0 0 1px #2c3236; }
.hw-shot .plights { position: absolute; left: 12px; top: 9px; z-index: 3; display: flex; gap: 6px; }
.hw-shot .plights i { width: 9px; height: 9px; border-radius: 50%; background: #e0dcd3; }
.hw-frame { position: relative; aspect-ratio: 2283 / 1000; margin-top: 26px; background: #f5f2ec; }
/* 단계 그림: 겹쳐 두고 옅기로 넘긴다. 처음(단계 전)에는 세 칸 실루엣(지시서 '3-Column 화면 실루엣이 드러남') */
.hw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; opacity: 0; transition: opacity .45s var(--ease-out, ease); }
.hw[data-step="0"] .hw-img[data-step="0"], .hw[data-step="1"] .hw-img[data-step="1"], .hw[data-step="2"] .hw-img[data-step="2"] { opacity: 1; }
[lang="ko"] .hw-en, :root:not([lang="ko"]) .hw-ko { display: none; }
:root:not([lang="ko"]) .hw-frame { aspect-ratio: 3584 / 1994; }
:root:not([lang="ko"]) .hw:not([data-step="-1"]) .hw-img.hw-en { opacity: 1; }
/* 영어 캡처 위 단계 자리(좌표 = spotlight-shot.js POLISHED 영어 R 에 여백 조금): 1 긋는 구절(형광펜 노랑), 2 오른쪽 칸, 3 왼쪽 탐색 기록(지금 질문 초록) */
.hw-ring { position: absolute; z-index: 2; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out, ease); box-shadow: 0 0 0 2.5px #1e6e43, 0 0 0 7px rgba(30, 110, 67, .16); }
.hw-ring.r-hl { left: 28.2%; top: 37.1%; width: 8.2%; height: 4%; border-radius: 6px; box-shadow: 0 0 0 2.5px #d4a800, 0 0 0 7px rgba(251, 229, 138, .5); }
.hw-ring.r-right { left: 79.8%; top: 5.8%; width: 19.9%; height: 37.7%; }
.hw-ring.r-left { left: .2%; top: 26.4%; width: 15.3%; height: 34.2%; }
.hw[data-step="0"] .hw-ring[data-step="0"], .hw[data-step="1"] .hw-ring[data-step="1"], .hw[data-step="2"] .hw-ring[data-step="2"] { opacity: 1; }
.hw-sil { position: absolute; inset: 0; display: grid; grid-template-columns: 15fr 58fr 21fr; gap: 1.4%; padding: 1.6% 1.4%; box-sizing: border-box; transition: opacity .45s var(--ease-out, ease); }
.hw:not([data-step="-1"]) .hw-sil { opacity: 0; }
.hw-sil i { display: flex; flex-direction: column; gap: 7%; padding: 5% 6%; border-radius: 10px; background: #fdfcf9; box-shadow: inset 0 0 0 1px rgba(24, 53, 37, .08); }
.hw-sil i.c { gap: 4.4%; padding: 4% 6%; }
.hw-sil b { display: block; height: 4.2%; min-height: 6px; border-radius: 4px; background: rgba(24, 53, 37, .1); }
.hw-sil b:nth-child(1) { width: 62%; height: 7%; margin: 0 auto 2% 18%; border-radius: 999px; }
.hw-sil b:nth-child(2) { width: 92%; } .hw-sil b:nth-child(3) { width: 84%; } .hw-sil b:nth-child(4) { width: 70%; } .hw-sil b:nth-child(5) { width: 88%; }
.hw-sil i.l::before { content: ""; height: 9%; border-radius: 8px; background: rgba(30, 110, 67, .22); }
html[data-theme="dark"] .hw-shot, html[data-theme="dark"] .hw-frame { background: #e9e5dd; }

/* ── [구간 4] 제품 도입: 제목이 두 줄로 길어져 크기를 줄이고, 책 읽는 투칸은 제목 왼쪽 빈 자리(탐색 기록 카드가 나중에 오는 칸)에 ── */
#body-v[data-dir="trail-scene"] #lt-root { --rf: clamp(25px, 2.45vw, 38px); --bm: calc((var(--rf) * 1.3 - 38px) / 2); }
#body-v[data-dir="trail-scene"] .root-intro { max-width: none; line-height: 1.3; letter-spacing: -.035em; text-wrap: pretty; }
#body-v[data-dir="trail-scene"] #lt-root .br-head { position: relative; }
.root-toucan { position: absolute; right: calc(100% + clamp(24px, 3vw, 44px)); top: 50%; width: clamp(120px, 11vw, 168px); height: auto; transform: translateY(-50%); pointer-events: none; }
@media (max-width: 1000px) { .root-toucan { display: none; } }

/* Reader 판의 학사모 투칸: 화면 그림 오른쪽 위 끝에 앉는다 */
#body-v[data-dir="trail-scene"] .sc-panel .kid-media { position: relative; }
.kid-toucan { position: absolute; z-index: 2; right: 18px; top: 0; width: clamp(70px, 6.2vw, 96px); height: auto; transform: translateY(-86%); pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .16)); }
/* Shrub 판: 준비 중이라 세 마리 투칸을 반투명 티저로 */
.shrub-flock { display: block; width: min(330px, 84%); height: auto; margin: 6px auto 0; opacity: .5; filter: saturate(.7); }
html[data-theme="dark"] .shrub-flock { opacity: .42; }

/* ── [구간 5] 이런 순간에: 제품 판과 같은 오른쪽 칸의 유리 판(장면 숲 위로 올라온다) ── */
#body-v[data-dir="trail-scene"] .ip { position: relative; z-index: 3; box-sizing: border-box; width: clamp(460px, 46vw, 700px); margin: 22vh max(28px, calc((100vw - 1240px) / 2 + 32px)) 16vh auto;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px); border-radius: 22px; background: var(--sc-glass); box-shadow: inset 0 0 0 1px var(--sc-glass-line), var(--sc-glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); color: var(--text); }
.ip-title { margin: 0 0 clamp(14px, 2vh, 20px); font-size: clamp(24px, 2.1vw, 31px); font-weight: 760; letter-spacing: -.035em; line-height: 1.25; color: var(--text); }
.ip-cards { display: grid; gap: 12px; }
.ip-card { display: grid; grid-template-columns: clamp(78px, 7vw, 104px) minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 16px 16px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(24, 53, 37, .08); }
html[data-theme="dark"] .ip-card { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(223, 238, 227, .1); }
.ip-tc { width: 100%; height: auto; margin-top: 2px; }
.ip-who { margin: 0 0 6px; font-size: clamp(15.5px, 1.15vw, 17.5px); font-weight: 740; letter-spacing: -.02em; line-height: 1.4; }
.ip-say { margin: 0 0 8px; font-size: clamp(14.5px, 1.05vw, 16px); font-weight: 600; line-height: 1.6; color: #2f6b46; }
html[data-theme="dark"] .ip-say { color: #9bcca9; }
.ip-do { margin: 0; font-size: clamp(14px, 1vw, 15.5px); line-height: 1.68; color: var(--muted); }

/* ── 바닥 시작하기(날아오르는 투칸) ── */
.foot-cta { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding: 2px 0 22px; margin-bottom: 4px; border-bottom: 1px solid rgba(59, 42, 28, .16); }
html[data-theme="dark"] .foot-cta { border-bottom-color: rgba(234, 223, 206, .14); }
.foot-tc { width: clamp(70px, 6vw, 92px); height: auto; margin: -34px 0 -8px; }
.foot-cta-t { flex: 1 1 auto; margin: 0; font-size: clamp(18px, 1.6vw, 24px); font-weight: 740; letter-spacing: -.025em; }
.foot-cta .wood-btn { padding: 11px 20px; font-size: 15px; }


/* ── 좁은 화면 ── */
@media (max-width: 1000px) {
  .hw-body { grid-template-columns: 1fr; }
  .hw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hw-step p { margin-left: 0; }
}
@media (max-width: 700px) {
  #body-v[data-dir="trail-scene"] .tv-hold { height: 150svh; }
  .hw { height: auto; }
  .hw::before { height: 40vh; }
  .hw-sky { position: absolute; inset: 0; height: auto; }
  .hw-stick { position: relative; height: auto; margin-top: 0; padding: 22vh 0 18vh; }
  .hw-in { width: calc(100% - 20px); padding: 20px 16px; }
  .hw-steps { grid-template-columns: 1fr; }
  .hw-step { opacity: 1; }
  .hw-shot { display: none; }
  .hw-title { text-wrap: balance; }
  .hw-title br, .hw-lead br { display: none; }   /* 큰 화면의 두 줄 끊기는 좁은 화면에서 어색하게 끊긴다(390 폭 확인) */
  #body-v[data-dir="trail-scene"] .ip { width: auto; margin: 18vh 10px 12vh; }
  .ip-card { grid-template-columns: 64px minmax(0, 1fr); }
  .foot-tc { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-in { transform: none; will-change: auto; }
  .hw-step, .hw-img, .hw-sil, .hw-ring { transition: none; }
}