/* 아래 구성 시안 "탐험: 다가오는 두더지"(trail-scene, 2026-10-20). body.html 머리말 참고.
   위 넘김, 제목, 끝 장면은 안개 넘김(bodies/trail-fog/body.css)의 규칙을 이 구성 이름으로 옮겨 왔다(그 파일은 안개 넘김일 때만 읽힌다). 새 것은 장면(.sc-*) */
@import url("./lite.css");

#body-v[data-dir="trail-scene"] {
  --tv-mist: #c6d6cf; --tv-mist2: #d3dfd3; --tf-nmist: #34505a; --tf-hole: #050906;
  --sc-glass: rgba(248, 246, 240, .7); --sc-glass-line: rgba(255, 255, 255, .55); --sc-glass-shadow: 0 24px 60px -18px rgba(12, 28, 18, .45);
}
html[data-theme="dark"] #body-v[data-dir="trail-scene"] {
  --tv-mist: #0f1f24; --tv-mist2: #11211f; --tf-nmist: #22363f; --tf-hole: #020403;
  --sc-glass: rgba(14, 20, 17, .66); --sc-glass-line: rgba(196, 220, 205, .14); --sc-glass-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6);
}

/* 히어로 아래 빈 구간(숲이 화면에 붙은 채 안개에 잠기는 동안 스크롤할 자리) */
#body-v[data-dir="trail-scene"] .tv-hold { height: 120vh; pointer-events: none; }
#body-v[data-dir="trail-scene"] .tr-map { position: relative; z-index: 2; margin-top: 0; overflow-x: clip; overflow-y: visible; isolation: isolate; background: transparent; }

/* 제목 머묾: 상자(높이 = 제목 + 머무는 스크롤, body.js)를 지나는 동안 제목이 화면 가운데(--tf-stick)에 붙는다. 또렷해지는 정도와 옅어지는 정도는 body.js */
#body-v[data-dir="trail-scene"] .sc-head { max-width: 1240px; margin: 0 auto; box-sizing: border-box; padding: clamp(120px, 12vw, 180px) 32px 0 calc(32px + 196px + 96px); }
#body-v[data-dir="trail-scene"] .tf-pin { position: relative; height: var(--tf-pin-h, auto); }
#body-v[data-dir="trail-scene"] #lt-root { position: sticky; top: var(--tf-stick, 40vh); z-index: 4; }
#body-v[data-dir="trail-scene"] .root-title { color: #1d3527; }
html[data-theme="dark"] #body-v[data-dir="trail-scene"] .root-title { color: #eef4ef; }
/* 앞 안개 막: 장면(탐색 기록, 제품 판, 두더지, 3D 숲)을 덮는다. 옅기와 빛은 body.js */
#body-v[data-dir="trail-scene"] .tf-fog { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; background: #c6d6cf; will-change: opacity; }
#body-v[data-dir="trail-scene"] .tf-fog.on { visibility: visible; }
#body-v[data-dir="trail-scene"] .sc-track { pointer-events: none; }
#body-v[data-dir="trail-scene"] .tf-endfog { height: var(--tf-endfog-h, 85vh); pointer-events: none; }

/* ── 장면(화면에 붙음) ── 앞 안개(z 3) 아래, 3D 숲 위. 보이는 동안만(.on) */
.sc-stage { position: fixed; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.sc-stage.on { visibility: visible; }
/* 두더지: 굴 앞 입술(3D 땅 자리)에 발을 둔다. 폭은 그 굴의 깊이로(멀면 작다, body.js --mw). 움직임은 shared/mole.js */
.sc-mole { position: absolute; left: 0; top: 0; z-index: 0; width: var(--mw, 60px); pointer-events: none; }
/* 굴길 머리에서 튀는 흙 조각(body.js puff): 두더지와 같은 층, 판 아래. 다각형은 안의 작은 svg, 밤빛은 색으로(clip-path 와 filter 를 걸지 않는다, body.js 설명) */
.sc-chip { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; will-change: transform, opacity; }
.sc-chip svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 탐색 기록: 안개 넘김과 같은 카드, 숲 위라 유리(뒤 숲은 3D 후처리가 흐린다, body.js setGlass) */
.sc-stage .tr-rec { position: absolute; left: max(24px, calc(50vw - 588px)); top: calc(var(--nav-h, 58px) + 28px); z-index: 2; width: 196px; box-sizing: border-box;
  padding: 14px 10px; border-radius: 16px; background: var(--sc-glass); box-shadow: inset 0 0 0 1px var(--sc-glass-line), var(--sc-glass-shadow); color: var(--text);
  pointer-events: auto; opacity: 0; transform: translateY(10px); }
.sc-stage .tr-rec-h { margin: 0 4px 8px; font-size: 13px; font-weight: 700; }
.tr-rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tr-rec-list li { min-width: 0; max-height: 0; overflow: hidden; opacity: 0; transform: translateX(-8px);
  transition: max-height .45s var(--lt-ease), opacity .45s var(--lt-ease), transform .45s var(--lt-ease), margin .45s var(--lt-ease); }
.tr-rec-list li.on { max-height: 44px; opacity: 1; transform: none; }
.tr-rec-list li.on + li.on { margin-top: 2px; }
.tr-rec-list li:not(.on) { pointer-events: none; }
.tr-rec-list button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; padding: 5px 6px; border-radius: 8px;
  font-size: 13px; line-height: 1.35; cursor: pointer; transition: background-color .16s ease, color .16s ease, transform .12s var(--lt-ease); }
.tr-rec-list li[data-d="1"] button { padding-left: 20px; }
.tr-rec-list button:hover { background: rgba(30, 110, 67, .09); color: #1e6e43; }
.tr-rec-list button:active { transform: scale(.97); }
.tr-rec-list button:focus-visible { outline: 2px solid #1e6e43; outline-offset: -2px; }
.tr-rec-list li.now button { background: #d9e7d2; color: #1e6e43; font-weight: 600; }
html[data-theme="dark"] .tr-rec-list button:hover { background: rgba(155, 204, 169, .1); color: #9bcca9; }
html[data-theme="dark"] .tr-rec-list button:focus-visible { outline-color: #9bcca9; }
html[data-theme="dark"] .tr-rec-list li.now button { background: #1b2a20; color: #9bcca9; }
.tr-rec-list .n { flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  background: #d9e7d2; color: #1e6e43; border: 1.5px solid #1e6e43; font: 700 10.5px/1 "Jost", sans-serif; }
html[data-theme="dark"] .tr-rec-list .n { background: #1b2a20; color: #9bcca9; border-color: #9bcca9; }
.tr-rec-list .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 제품 판: 오른쪽 한 자리(자리와 크기는 body.js 가 화면에 맞춰 준다: --sc-l, --sc-t, --sc-w, --sc-h). 판 넷이 그 안에서 차례로 바뀐다(옅기와 위아래 자리는 body.js) */
.sc-panels { position: absolute; left: var(--sc-l, 50vw); top: var(--sc-t, 90px); z-index: 1; width: var(--sc-w, 600px); height: var(--sc-h, 560px); border-radius: 22px; }
/* 유리 바탕: 판 글과 따로 옅어진다(상자 전체에 옅기를 걸지 않는다, body.js sceneOverlay 설명) */
.sc-glass { position: absolute; inset: 0; border-radius: inherit; background: var(--sc-glass); box-shadow: inset 0 0 0 1px var(--sc-glass-line), var(--sc-glass-shadow);
  opacity: 0; will-change: opacity; pointer-events: none; }
html.sc-noglass .sc-panels, html.sc-noglass .sc-stage .tr-rec { --sc-glass: rgba(248, 246, 240, .94); }
html.sc-noglass[data-theme="dark"] .sc-panels, html.sc-noglass[data-theme="dark"] .sc-stage .tr-rec { --sc-glass: rgba(14, 20, 17, .93); }
/* 안 보이는 판은 그리지 않는다(display none: 실앱 미리 불러오기가 보이는 판만 고르게). 크기를 잴 때만 잠깐 보이지 않게 펼친다(.sc-measure).
   들어오기 조금 앞(.pre)에는 옅기 0 으로 펼쳐 둔다 */
#body-v[data-dir="trail-scene"] .sc-panel { position: absolute; left: 0; top: 0; width: 100%; margin: 0; box-sizing: border-box; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 30px) clamp(18px, 2vw, 26px);
  color: var(--text); opacity: 0; display: none; will-change: opacity, transform; }
#body-v[data-dir="trail-scene"] .sc-panel.pre { display: block; }   /* 들어오기 조금 앞: 보이지 않게 펼쳐 그림을 미리 풀어 둔다(body.js), 누를 수는 없다 */
#body-v[data-dir="trail-scene"] .sc-panel.vis { display: block; pointer-events: auto; }
#body-v[data-dir="trail-scene"] .sc-panels.sc-measure .sc-panel { display: block; visibility: hidden; }
#body-v[data-dir="trail-scene"] .sc-panel > .br-head { padding-left: 0; }
#body-v[data-dir="trail-scene"] .sc-panel .kid-title b { font-size: clamp(24px, 2.1vw, 31px); }
#body-v[data-dir="trail-scene"] .sc-panel .kid-body { display: block; padding-left: 0; margin-top: 12px; }
#body-v[data-dir="trail-scene"] .sc-panel .kid-copy, #body-v[data-dir="trail-scene"] .sc-panel .kid-media { opacity: 1; transform: none; transition: none; }
#body-v[data-dir="trail-scene"] .sc-panel .desc { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.68; max-width: none; }
#body-v[data-dir="trail-scene"] .sc-panel .try { margin-top: 10px; }
#body-v[data-dir="trail-scene"] .sc-panel .kid-media { margin-top: 18px; max-width: none; }
#body-v[data-dir="trail-scene"] .sc-panel .mac-shot { box-shadow: 0 18px 40px rgba(0, 0, 0, .22), inset 0 0 0 1px #2c3236; }
#body-v[data-dir="trail-scene"] .sc-panel .spot-cap { display: none; }   /* 설명 글이 위에 있어 강조 장면 아래 한 줄은 겹친다 */
#body-v[data-dir="trail-scene"] .sc-panel.kid-soon .kid-media { min-height: 0; justify-content: center; }
#body-v[data-dir="trail-scene"] .sc-panel .shrub { width: min(240px, 70%); }

/* 끝 장면(안개 넘김 그대로): 비전, 미션, 연혁은 밤의 입체 숲 위 마지막 화면. 높이 = 화면에서 바닥글을 뺀 만큼(--tf-foot, body.js) */
#body-v[data-dir="trail-scene"] .tr-night { position: relative; box-sizing: border-box; min-height: calc(100vh - var(--tf-foot, 124px)); background: none; color: var(--night-ink, #eef4ef);
  padding: calc(var(--nav-h, 58px) + clamp(18px, 3.5vh, 40px)) 0 clamp(24px, 4vh, 48px); overflow: visible; }
/* 비전은 화면 크기와 관계없이 문장마다 한 줄, 두 줄로(10-20 Y 16:38 "폰 뷰의 문제인건가? 데스크톱 뷰처럼 이렇게 두 줄로 보이게 해줘."). 휴대폰은 글자 크기 30px 에서
   긴 문장(우리는 생각이 자라날 숲을 가꿉니다.)이 약 440px 이라 화면 폭(393 에서 좌우 여백을 빼면 357px)을 넘어 문장마다 꺾였다.
   그래서 긴 문장이 글자 크기의 약 14.6배 폭(실측, 글꼴 차이 몫을 더해 15.2)인 것으로 좁은 화면에서 글자 크기를 화면 폭에 맞춰 줄인다 */
/* 라이브(10-20): 문장마다 한 줄은 한국어판만. 영어, 일본어, 독일어, 프랑스어 문장은 휴대폰 폭에서 한 줄에 들어가지 않아(긴 줄이 글자 크기의 18~26배) 자연스럽게 줄을 바꾼다 */
[lang="ko"] #body-v[data-dir="trail-scene"] .tr-night .vision-line { font-size: min(clamp(30px, 3.2vw, 48px), calc((100vw - 36px) / 15.2)); }
[lang="ko"] #body-v[data-dir="trail-scene"] .tr-night .vision-line span { white-space: nowrap; }
/* 미션은 비전보다 한 단계 작게: 비전이 화면 폭에 맞춰 줄어드는 좁은 화면에서 미션(최소 22px)이 비전보다 커져 위계가 뒤집혔다(320 에서 비전 18.7px, 미션 22px).
   좁은 화면에서는 비전 크기의 0.8배, 연혁 글(15px)보다는 크게(최소 16px). 넓은 화면은 원래 크기 그대로 */
#body-v[data-dir="trail-scene"] .tr-night .mission blockquote { font-size: min(clamp(22px, 1.9vw, 28px), max(16px, calc((100vw - 36px) / 15.2 * .8))); }
/* 좁은 화면의 미션은 두 줄 길이를 고르게("…분기를 닮은 탐색 / 도구를 만듭니다." 대신 "…사고하는 방식, / 분기를 닮은 탐색 도구를 만듭니다.") */
@media (max-width: 700px) { #body-v[data-dir="trail-scene"] .tr-night .mission blockquote { text-wrap: balance; } }
/* 밤 글 상자(.night 는 z-index 1 로 화면 하나를 덮는다)는 누르기를 통과시키고 글만 받는다: 전에는 그 아래 3D 땅의 팻말(Mac에서 다운로드,
   뉴스레터 판자)을 누를 수 없었다(10-20 12:5x 실측, 판자 가운데 점의 맨 위 요소 = .tr-night). 글(비전, 미션, 연혁)은 그대로 고르고 복사할 수 있다 */
#body-v[data-dir="trail-scene"] .tr-night { pointer-events: none; }
/* 10-20 고침: 받는 쪽을 글 상자(.mission 등)에서 글 줄로 좁혔다. 미션 상자는 옆 연혁 칸 높이만큼 늘어나 글 아래 빈 자리까지 덮어서,
   그 빈 자리에 선 팻말을 누를 수 없었다(1366x768, 1024x768, 1180x820 에서 판자 가운데 맨 위 요소 = .mission) */
#body-v[data-dir="trail-scene"] .tr-night :is(figcaption, .vision-line, .mission blockquote, .hl-label, .timeline li, .tf-flow-sign) { pointer-events: auto; }
/* 글 흐름 속 판자(낮은 화면에서 3D 팻말 대신, body.js computeAnchors): 평소에는 숨기고 3D 무대를 쓴다 */
#body-v[data-dir="trail-scene"] .tf-flow-sign { display: none; }
html.tf-flow #body-v[data-dir="trail-scene"] .tf-flow-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(22px, 4vh, 34px); }
html.tf-flow #body-v[data-dir="trail-scene"] .tf-stage { display: none; }
#body-v[data-dir="trail-scene"] .tf-flow-sign .sign { white-space: nowrap; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); filter: brightness(.86); }
#body-v[data-dir="trail-scene"] .tf-flow-sign .sign-nl { padding: 7px 13px; font-size: 15px; transform: rotate(1.6deg); background-image: url("../cta-wood-plank-26.svg"); }
#body-v[data-dir="trail-scene"] .tf-flow-sign .sign-nl:hover { transform: rotate(1.6deg) translateY(-2px); }
#body-v[data-dir="trail-scene"] .tr-night .night-row { margin-top: clamp(30px, 4.5vh, 56px); }
#body-v[data-dir="trail-scene"] .tr-night .timeline li { padding: 8px 0; }
#body-v[data-dir="trail-scene"] .tr-night .vision-line, #body-v[data-dir="trail-scene"] .tr-night blockquote, #body-v[data-dir="trail-scene"] .tr-night .timeline { text-shadow: 0 1px 14px rgba(2, 8, 12, .45); }
body:has(#body-v[data-dir="trail-scene"]) .foot { position: relative; z-index: 2; background: none; color: #dfe9e2; text-shadow: 0 1px 10px rgba(2, 8, 12, .55); }
body:has(#body-v[data-dir="trail-scene"]) .foot .logo-l { display: none; }
body:has(#body-v[data-dir="trail-scene"]) .foot .logo-d { display: inline; filter: drop-shadow(0 1px 8px rgba(2, 8, 12, .5)); }
html.tv-nogl body:has(#body-v[data-dir="trail-scene"]) .foot { background: #34505a; }
html.tv-nogl[data-theme="dark"] body:has(#body-v[data-dir="trail-scene"]) .foot { background: #22363f; }

/* 3D 땅에 붙은 팻말과 굴(끝 장면, 안개 넘김 그대로) */
#body-v[data-dir="trail-scene"] .tf-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; visibility: hidden; }
#body-v[data-dir="trail-scene"] .tf-stage.on { visibility: visible; }
#body-v[data-dir="trail-scene"] :is(.tf-sp, .tf-den) { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform; }
#body-v[data-dir="trail-scene"] .tf-sp .signpost { position: relative; right: auto; bottom: auto; }
#body-v[data-dir="trail-scene"] .tf-sp .sign { white-space: nowrap; pointer-events: auto; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); filter: brightness(.86); }
#body-v[data-dir="trail-scene"] .tf-sp .post { filter: brightness(.7); }
/* 팻말 둘째 판자(뉴스레터 입구): 다운로드 판자 아래에 조금 작게, 반대로 살짝 기울여 여러 방향을 가리키는 길 팻말처럼. 투칸은 위 판자에 앉는다 */
#body-v[data-dir="trail-scene"] .tf-sp .sign-nl { margin-top: 7px; padding: 7px 13px; font-size: 15px; transform: rotate(1.6deg); background-image: url("../cta-wood-plank-26.svg"); }
#body-v[data-dir="trail-scene"] .tf-sp .sign-nl:hover { transform: rotate(1.6deg) translateY(-2px); }
#body-v[data-dir="trail-scene"] .tf-sp .sign-nl:active { transform: rotate(1.6deg) scale(.97); }
#body-v[data-dir="trail-scene"] .tf-shadow { position: absolute; left: 50%; bottom: -5px; width: 46px; height: 10px; margin-left: -23px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(2px); }
#body-v[data-dir="trail-scene"] .tf-den { width: 112px; height: 74px; }
#body-v[data-dir="trail-scene"] .tf-hole { position: absolute; left: 6px; right: 6px; bottom: -8px; height: 18px; border-radius: 50%; background: var(--tf-hole); box-shadow: 0 0 0 3px rgba(0, 0, 0, .18); }
#body-v[data-dir="trail-scene"] .tf-endmole-pos { position: absolute; left: 0; top: 0; width: 96px; pointer-events: none; }

/* 투칸(안개 넘김 그대로): 히어로 투칸을 넘겨받아 안개 속으로 떠나고, 끝에서는 밤하늘에서 날아와 팻말에 앉는다 */
#body-v[data-dir="trail-scene"] .tr-toucan { position: absolute; left: 0; top: 0; z-index: 5; width: 60px; pointer-events: none; }
#body-v[data-dir="trail-scene"] .tr-toucan .tc-fly { width: 100%; opacity: 0; transition: width 1.3s cubic-bezier(.4, 0, .2, 1), filter 1.1s ease, opacity .2s ease;
  filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255, 224, 168, 0)) drop-shadow(0 2px 3px rgba(24, 53, 37, .25)); }
#body-v[data-dir="trail-scene"] .tr-toucan .tc-fly.on { opacity: 1; }
#body-v[data-dir="trail-scene"] .tr-toucan .tc-fly.from-hero { transition: filter 1.1s ease, opacity .2s ease;
  filter: brightness(.84) saturate(1.04) drop-shadow(1.6px -1.8px 0 rgba(255, 224, 168, .92)) drop-shadow(0 0 16px rgba(255, 204, 140, .34)); }
html[data-theme="dark"] #body-v[data-dir="trail-scene"] .tr-toucan .tc-fly { filter: brightness(.9) saturate(1) drop-shadow(0 0 0 rgba(196, 214, 255, 0)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
html[data-theme="dark"] #body-v[data-dir="trail-scene"] .tr-toucan .tc-fly.from-hero { filter: brightness(.66) saturate(.85) drop-shadow(1.4px -1.6px 0 rgba(196, 214, 255, .8)) drop-shadow(0 0 14px rgba(150, 180, 240, .26)); }
#body-v[data-dir="trail-scene"] .tr-toucan .tc-fly.at-end, html[data-theme="dark"] #body-v[data-dir="trail-scene"] .tr-toucan .tc-fly.at-end {
  filter: brightness(.72) saturate(.9) drop-shadow(1.4px -1.6px 0 rgba(196, 214, 255, .8)) drop-shadow(0 0 14px rgba(150, 180, 240, .26)); }
html.tv-swap #body-v[data-dir="trail-scene"] .tr-toucan .tc-fly { transition: none !important; }
@media (prefers-reduced-motion: reduce) { #body-v[data-dir="trail-scene"] .tr-toucan .tc-fly { transition: none; } }

/* ── 넘김(안개 넘김과 같은 방법): 히어로 숲 캔버스와 어둠 막과 투칸을 화면에 붙인다. 본문은 히어로 위에 쌓인다 ── */
#body-v[data-dir="trail-scene"] { position: relative; z-index: 1; }
html.tv-on .hero-v[data-hero^="h1"] .h1-gl { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100vh; height: 100lvh; }
html.tv-on .hero-v[data-hero^="h1"] .h1-veil { position: fixed; inset: 0; }
html.tv-on .hero-v[data-hero^="h1"] .h1-toucan:not(.guide) { position: fixed; }
.tv-back { display: none; }
html.tv-on .tv-back { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.tv-back > * { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.tv-back .tv-mist { background: var(--tv-mist-c, #c6d6cf); }
html.tv-handed .hero-v .h1-toucan:not(.guide) { opacity: 0 !important; transition: none !important; }
html.tv-swap .hero-v .h1-toucan { transition: none !important; }
/* WebGL 이 없으면 숲이 없으니: 장면 바탕은 종이 빛, 끝은 밤 안개 빛 */
html.tv-nogl #body-v[data-dir="trail-scene"] .tf-fog { display: none; }
html.tv-nogl .sc-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #e9efe6; }
html.tv-nogl[data-theme="dark"] .sc-stage::before { background: #121814; }
html.tv-nogl #body-v[data-dir="trail-scene"] .tf-endfog { background: linear-gradient(to bottom, #e9efe6, #34505a); }
html.tv-nogl #body-v[data-dir="trail-scene"] .tr-night { background: #34505a; }
html.tv-nogl #body-v[data-dir="trail-scene"] .tf-stage { position: absolute; inset: auto 0 0 0; height: 100vh; }

/* 좁은 화면: 탐색 기록은 걷고(안개 넘김과 같다), 휴대폰과 세로 화면은 제품 판을 위에(땅은 화면 아래쪽이라 두더지가 판 아래에 보인다) */
@media (max-width: 1000px) { .sc-stage .tr-rec { display: none; } #body-v[data-dir="trail-scene"] .sc-head { padding-left: calc(32px + 70px); } }
@media (max-width: 700px) {
  #body-v[data-dir="trail-scene"] .tv-hold { height: 95svh; }
  #body-v[data-dir="trail-scene"] .sc-head { padding: 100px 14px 0 calc(14px + 38px); }
  #body-v[data-dir="trail-scene"] .tr-night { min-height: calc(100svh - var(--tf-foot, 150px)); padding-bottom: clamp(220px, 34svh, 300px); }
  #body-v[data-dir="trail-scene"] .tr-toucan { width: 42px; }
  #body-v[data-dir="trail-scene"] .tf-endmole-pos { width: 78px; }
  #body-v[data-dir="trail-scene"] .tf-den { width: 92px; height: 60px; }
  #body-v[data-dir="trail-scene"] .tf-sp .sign { font-size: 15px; padding: 8px 12px; }
  #body-v[data-dir="trail-scene"] .tf-sp .sign-nl { font-size: 13.5px; padding: 6px 11px; }
  #body-v[data-dir="trail-scene"] .sc-panel .kid-title b { font-size: 22px; }
  #body-v[data-dir="trail-scene"] .sc-panel .kid-title .mode { font-size: 13.5px; }
  #body-v[data-dir="trail-scene"] .sc-panel .desc { font-size: 14.5px; line-height: 1.6; }
  #body-v[data-dir="trail-scene"] .sc-panel .kid-media { margin-top: 12px; }
  #body-v[data-dir="trail-scene"] .sc-panel .spot-zoom { display: none; }   /* 판 아래로 땅과 두더지가 보이게 강조 장면의 아래 확대 조각은 걷는다 */
  #body-v[data-dir="trail-scene"] .sc-panel .kid-title { gap: 2px 10px; }
  .sc-panels { border-radius: 18px; }
}
/* 낮은 가로 화면(휴대폰 가로, body.js layoutPanels 의 short): 판은 글과 체험 링크만, 글자와 여백을 조금 줄인다.
   그래도 화면보다 높으면(아주 작은 옛 휴대폰) 판 안에서 굴린다 */
html.sc-short #body-v[data-dir="trail-scene"] .sc-panel .kid-media { display: none; }
html.sc-short #body-v[data-dir="trail-scene"] .sc-panel { padding: 14px 16px 14px; }
html.sc-short #body-v[data-dir="trail-scene"] .sc-panel .kid-title b { font-size: 21px; }
html.sc-short #body-v[data-dir="trail-scene"] .sc-panel .desc { font-size: 14px; line-height: 1.55; }
html.sc-short #body-v[data-dir="trail-scene"] .sc-panel .kid-body { margin-top: 8px; }
html.sc-short .sc-panels { max-height: calc(100svh - var(--nav-h, 58px) - 12px); overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .tr-rec-list li, .tr-rec-list button { transition: none; } }