/* Λ 터널 인트로 — 2026-08 아카이브(_archive/2026-08-tunnel-field) 복원본.
   클래스는 tn- 접두로 격리한다: site.css의 .label 등과 이름이 겹쳤다.
   ID(spacer·stage·hero·cue·spd·est·st0~6·nav·loader)는 tunnel.js가 직접 참조하므로 바꾸지 않는다. */
.is-tunnel { --tn-ink:#050505; --tn-label:#8f8f8f; --tn-bright:#e8e8e8; }
.is-tunnel { background:var(--tn-ink); }

#spacer { height:900vh; }
.no-3d #spacer, .no3d #spacer { height:0; }     /* 폴백 시 빈 스크롤 구간 제거 */
#stage { position:fixed; inset:0; z-index:1; }
#stage canvas { display:block; }

.tn-ov { position:fixed; pointer-events:none; z-index:9; opacity:0; }
.tn-center { left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; }
.tn-label { position:fixed; font-size:10px; letter-spacing:.32em; text-transform:uppercase;
            color:var(--tn-label); }
.tn-spd { bottom:34px; left:var(--gutter,40px); z-index:9; font-variant-numeric:tabular-nums; }
.tn-est { bottom:34px; right:var(--gutter,40px); z-index:9; }

.tn-hero h1 { font-family:var(--f-display); font-weight:500; font-size:clamp(20px,2.6vw,31px);
              letter-spacing:.44em; text-indent:.44em; color:var(--tn-bright); white-space:nowrap;
              text-transform:uppercase; text-shadow:0 0 28px rgba(0,0,0,.9); margin:0; }
@media (max-width:700px){
  .tn-hero h1 { white-space:normal; font-size:17px; letter-spacing:.34em; text-indent:.34em; line-height:1.9; }
  .tn-hero .tn-tag { font-size:12.5px; letter-spacing:.2em; }
  .tn-hero .tn-tag .txt { white-space:normal; text-indent:.2em; }
}
/* 태그라인 — 양쪽 헤어라인 + AI(영문 디스플레이)·業(앰버) 강조 */
.tn-hero .tn-tag { display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.6vw,22px);
                   margin:22px 0 0; font-weight:300; font-size:clamp(13.5px,1.4vw,17px);
                   letter-spacing:.3em; color:#bcbcc4; text-shadow:0 0 18px rgba(0,0,0,.9); }
.tn-hero .tn-tag .txt { white-space:nowrap; text-indent:.3em; }
.tn-hero .tn-tag .line { flex:none; width:clamp(28px,4.5vw,72px); height:1px; }
.tn-hero .tn-tag .line:first-child { background:linear-gradient(to right,transparent,#9a9aa2); }
.tn-hero .tn-tag .line:last-child { background:linear-gradient(to left,transparent,#9a9aa2); }
.tn-hero .tn-tag .en { font-family:var(--f-display); font-weight:600; letter-spacing:.22em; color:#eeeef2; }
.tn-hero .tn-tag .hj { font-weight:500; color:var(--accent,#d6842f); }
.tn-cue { left:50%; bottom:60px; transform:translateX(-50%); font-size:11px; letter-spacing:.34em;
          text-transform:uppercase; color:#c2c2c8; }
.tn-cue::after { content:''; position:absolute; left:50%; top:calc(100% + 10px); width:1px; height:26px;
  background:linear-gradient(#c2c2c8,transparent); transform-origin:top;
  animation:tn-cuepulse 1.8s ease-in-out infinite; }
@keyframes tn-cuepulse { 0%,100%{transform:scaleY(.25);opacity:.3} 50%{transform:scaleY(1);opacity:.9} }

/* 터널 포인트 — 아치 개구부에 투영되는 번호+제목 버튼 (tunnel.js가 생성·이동)
   디스플레이체 대형 타이틀 + 앰버 번호 + hover 시 밑줄 드로잉·자간 확장 — "누르는 맛" */
.tn-pt { position:fixed; left:0; top:0; z-index:9; opacity:0; pointer-events:none;
         display:flex; align-items:center; gap:14px; padding:12px 18px;
         background:none; border:0; cursor:pointer; white-space:nowrap;
         color:var(--tn-bright); will-change:transform,opacity; }
.tn-pt .pt-mark { width:13px; height:13px; border-radius:50%; border:1px solid rgba(232,232,232,.9);
                  position:relative; flex:none; transition:background .25s, box-shadow .25s; }
.tn-pt .pt-mark::after { content:''; position:absolute; inset:-6px; border-radius:50%;
                         border:1px solid rgba(232,232,232,.3); animation:tn-ptpulse 2.4s ease-in-out infinite; }
@keyframes tn-ptpulse { 0%,100%{transform:scale(.7);opacity:.2} 50%{transform:scale(1);opacity:.8} }
.tn-pt .pt-no { font-family:var(--f-display); font-weight:500; font-size:14px; letter-spacing:.2em;
                color:var(--accent,#d6842f); font-variant-numeric:tabular-nums;
                text-shadow:0 0 16px rgba(0,0,0,.9); }
.tn-pt .pt-t { font-family:var(--f-display); font-weight:500;
               font-size:clamp(24px,3vw,42px); letter-spacing:.3em; text-transform:uppercase;
               text-shadow:0 2px 26px rgba(0,0,0,.95);
               transition:letter-spacing .35s ease, color .3s, text-shadow .3s; }
.tn-pt::after { content:''; position:absolute; left:18px; right:18px; bottom:4px; height:1px;
                background:linear-gradient(to right, var(--accent,#d6842f), rgba(232,232,232,.75));
                transform:scaleX(0); transform-origin:left; transition:transform .38s ease; }
.tn-pt:hover .pt-t, .tn-pt.on .pt-t { letter-spacing:.37em; color:#fff;
                                       text-shadow:0 0 22px rgba(255,255,255,.3); }
.tn-pt:hover::after, .tn-pt.on::after { transform:scaleX(1); }
.tn-pt:hover .pt-mark, .tn-pt.on .pt-mark { background:var(--tn-bright);
                                            box-shadow:0 0 14px rgba(232,232,232,.5); }
.tn-pt:active .pt-t { color:var(--accent,#d6842f); }
.tn-pt:focus-visible { outline:1px solid var(--tn-bright); outline-offset:2px; }
@media (max-width:700px){ .tn-pt { gap:10px; padding:10px 14px; }
  .tn-pt .pt-t { font-size:19px; } .tn-pt .pt-no { font-size:12px; } }

/* 케이스 요약 카드 — 포인트 클릭 시 그 아래에 펼쳐진다 (위치는 tunnel.js가 투영) */
.tn-st { position:fixed; left:0; top:0; z-index:9; opacity:0; pointer-events:none;
         width:min(420px,calc(100vw - 32px));
         padding:20px 24px 18px; background:rgba(7,7,9,.78);
         border:1px solid rgba(232,232,232,.13); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
         transition:opacity .3s ease; }
.tn-st.open { opacity:1; pointer-events:auto; }
.tn-st .no { font-size:10px; letter-spacing:.4em; color:#8f8f96; text-transform:uppercase; }
.tn-st .en { margin-top:8px; font-size:clamp(20px,2.2vw,26px); font-weight:300;
             letter-spacing:.14em; color:var(--tn-bright); text-transform:uppercase; line-height:1.1; }
/* 케이스 한 줄 소개는 길이가 제각각이라 4줄로 제한한다 — 카드가 화면을 덮으면 터널이 안 보인다 */
.tn-st .pitch { margin-top:12px; font-size:14px; font-weight:300; color:#e0e0e5;
                line-height:1.6; letter-spacing:-.005em;
                display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.tn-st .meta { margin-top:10px; font-size:11.5px; font-weight:300; color:var(--tn-label); letter-spacing:.06em; }
.tn-st .go { display:inline-block; margin-top:12px; font-size:12px; letter-spacing:.14em;
             color:var(--tn-bright); text-transform:uppercase;
             border-bottom:1px solid rgba(232,232,232,.3); padding-bottom:3px; }
.tn-st .go:hover { border-bottom-color:var(--tn-bright); }

/* 정거장 인디케이터 */
.tn-nav { position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:10;
          display:flex; flex-direction:column; gap:14px; }
.tn-nav button { width:8px; height:8px; padding:0; border:0; border-radius:50%;
                 background:#33333a; cursor:pointer; transition:background .3s, transform .3s; }
.tn-nav button.on { background:var(--tn-bright); transform:scale(1.3); }
.tn-nav button:hover { background:#8f8f96; }
.tn-nav button:focus-visible { outline:1px solid var(--tn-bright); outline-offset:3px; }

/* 프리로더 */
#loader { position:fixed; inset:0; z-index:20; background:var(--tn-ink);
          display:flex; align-items:center; justify-content:center; transition:opacity .8s; }
#loader.off { opacity:0; pointer-events:none; }
#loader svg { animation:tn-ldr 1.6s ease-in-out infinite; }
@keyframes tn-ldr { 0%,100%{opacity:.22} 50%{opacity:1} }
.no3d #loader, .is-tunnel.no-3d #loader { display:none; }

/* 여정 이후 정적 섹션 — 3D 스테이지 위로 올라온다.
   mh-wrap은 max-width가 있어 배경만으로는 좌우로 터널이 비친다 → 전폭으로 칠한다. */
.is-tunnel .mh-wrap, .is-tunnel .foot {
  position:relative; z-index:12; background:var(--bg,#0d0e11);
  box-shadow:0 0 0 100vmax var(--bg,#0d0e11); clip-path:inset(0 -100vmax);
}
/* .foot의 margin-top 80px 틈으로 터널이 비쳤다 — 여백을 패딩으로 옮겨 배경이 끊기지 않게 한다.
   아래쪽도 열어 둔다: 문서 끝단에 남던 몇 px 띠로 터널이 보였다. */
.is-tunnel .foot { margin-top:0; padding-top:108px; clip-path:inset(0 -100vmax -100vmax -100vmax); }

/* 3D가 없을 때(WebGL 미지원·reduced-motion): 스테이지·오버레이를 숨기고 정적 히어로만.
   no-3d/no3d는 <html>에, is-tunnel은 <body>에 붙으므로 조상 셀렉터로 쓴다(같은 요소로 쓰면 매칭 안 됨). */
.no-3d #stage, .no-3d .tn-ov, .no-3d .tn-st, .no-3d .tn-nav, .no-3d .tn-label,
.no3d #stage, .no3d .tn-ov, .no3d .tn-st, .no3d .tn-nav, .no3d .tn-label { display:none; }
.tn-fallback { display:none; }
.no-3d .tn-fallback, .no3d .tn-fallback {
  display:block; max-width:1240px; margin:0 auto; padding:150px var(--gutter,40px) 90px;
}
.no-3d .tn-fallback h1, .no3d .tn-fallback h1 {
  font-size:clamp(46px,7vw,88px); line-height:1.0; letter-spacing:-.04em; margin:18px 0 26px; color:#fff;
}
.no-3d .tn-fallback .lead, .no3d .tn-fallback .lead {
  font-size:clamp(19px,2.2vw,24px); line-height:1.5; margin:0 0 14px; color:rgba(255,255,255,.92);
}
.no-3d .tn-fallback .sub, .no3d .tn-fallback .sub {
  font-size:15.5px; color:rgba(231,227,218,.6); margin:0 0 30px; max-width:54ch;
}

@media (prefers-reduced-motion:reduce){
  .tn-cue::after { animation:none; }
  #loader svg { animation:none; opacity:.8; }
}
@media (max-width:900px){
  #spacer { height:760vh; }
  .tn-spd { left:20px; } .tn-est { right:20px; }
  .tn-nav { right:12px; gap:12px; }
}
/* 좁은 화면: 요약 카드는 포인트에 따라붙지 않고 하단 시트로 (tunnel.js isNarrow와 짝) */
@media (max-width:700px){
  .tn-st { left:16px; right:16px; top:auto; bottom:72px; width:auto; transform:none !important; }
}