/* index2 — 대문 + 2번째 장면을 하나로: 완공된 건물에서 시작해 카메라가 땅속 단면으로 내려간다.
   구조: .dig(긴 스크롤 구간) > .dig-stage(화면 고정) > .dig-world(건물 사진 + 지층 단면, 위로 밀려 올라감)
   위치·투명도는 js/dig.js 가 스크롤에 맞춰 정한다. JS·움직임이 꺼지면 그냥 위에서 아래로 쌓인 그림이 된다. */

:root {
  --soil-fill: #6b4a33;
  --soil-clay: #5d5446;
  --soil-weather: #9a6a3c;
  --soil-wrock: #6f675d;
  --soil-rock: #34302c;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* page.js 가 .hero 를 기준으로 재므로 클래스는 남기고, 예전 대문 배치만 끈다 */
.hero.dig { display: block; align-content: normal; min-height: 0; padding: 0; text-align: left; }

.dig { position: relative; height: 430svh; }
.dig-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--soil-rock); }
.dig-world { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }

/* ── 1. 지상: 완공된 건물 ───────────────────────────── */
.dig-sky { position: relative; height: 100svh; overflow: hidden; background: #6f93bf; }
/* 사진 아래 16%(바닥 콘크리트 · 생성 표식)는 잘라 내고, 잘린 면을 곧바로 지층 단면으로 잇는다 */
.dig-photo {
  position: absolute; left: 0; top: 0; width: 100%; height: 119%;
  object-fit: cover; object-position: 72% top;
  transform-origin: 70% 80%;
  animation: dig-dawn 2.8s var(--ease) both;
}
/* 첫 화면 "타임랩스" 느낌 — 새벽빛에서 한낮으로, 살짝 다가서며 */
@keyframes dig-dawn {
  from { filter: brightness(0.42) saturate(0.55) sepia(0.35) hue-rotate(-12deg); transform: scale(1.12); }
  to { filter: none; transform: scale(1); }
}
.dig-sky::before { /* 글자 쪽 그늘 */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(12, 10, 8, 0.72) 0%, rgba(12, 10, 8, 0.38) 38%, rgba(12, 10, 8, 0) 62%);
}
.dig-sky::after { /* 지표면: 잘린 면의 아랫단을 흙빛으로 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9svh; z-index: 1;
  background: linear-gradient(to bottom, rgba(70, 52, 38, 0), rgba(70, 52, 38, 0.85));
}

/* ── 2. 지하: 지층 단면 ─────────────────────────────── */
.dig-strata { position: relative; }
.dig-ground-line { /* 지표 — 잘린 단면의 윗선 */
  position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, #c9b79a, #e8dcc6 60%, #c9b79a);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
/* 층 두께 = 실제 깊이(m) × 9.2svh. 단면 전체 26 m ≈ 화면 2.4개 */
.layer { position: relative; overflow: hidden; height: calc(var(--h) * 9.2svh); }
.dig-note { position: absolute; right: 64px; top: 14px; z-index: 3; font-size: 12px; color: rgba(236, 234, 234, 0.6); }
.layer::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); mix-blend-mode: multiply; opacity: 0.9; }
.layer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, 0.12); }
.layer.l-fill { background: var(--soil-fill); }
.layer.l-clay { /* 가는 퇴적 줄 + 물을 머금은 렌즈 */
  background:
    radial-gradient(ellipse 90px 9px at 50% 50%, rgba(120, 140, 150, 0.28), transparent 70%) 0 0 / 380px 150px,
    radial-gradient(ellipse 60px 6px at 50% 50%, rgba(120, 140, 150, 0.22), transparent 70%) 190px 75px / 380px 150px,
    repeating-linear-gradient(178deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 11px, rgba(0, 0, 0, 0.08) 11px 13px, transparent 13px 29px),
    linear-gradient(to bottom, #6a5f4f, var(--soil-clay) 40%, #4b4339);
}
.layer.l-weather {
  background:
    radial-gradient(circle at 20% 30%, rgba(60, 38, 20, 0.5) 0 2px, transparent 3px) 0 0 / 34px 29px,
    radial-gradient(circle at 70% 60%, rgba(200, 150, 90, 0.35) 0 2px, transparent 3px) 0 0 / 23px 31px,
    linear-gradient(to bottom, #a77442, var(--soil-weather));
}
.layer.l-wrock {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(30, 28, 26, 0.55) 0 5px, transparent 6px) 0 0 / 61px 47px,
    radial-gradient(ellipse at 60% 70%, rgba(170, 160, 148, 0.4) 0 4px, transparent 5px) 0 0 / 43px 53px,
    linear-gradient(to bottom, #7a7166, var(--soil-wrock));
}
.layer.l-rock {
  background:
    linear-gradient(162deg, transparent 0 46%, rgba(0, 0, 0, 0.35) 46% 46.4%, transparent 46.4%) 0 0 / 420px 260px,
    linear-gradient(to bottom, #3e3934, var(--soil-rock) 55%, var(--room));
}

/* 층 이름표 — 왼쪽. 흙 무늬 위에서도 읽히도록 어두운 판 위에 얹는다 */
.layer-tag {
  position: absolute; left: var(--m); top: clamp(14px, 2.4svh, 28px); z-index: 4;
  max-width: min(34ch, 46vw);
  padding: 10px 14px 11px;
  background: rgba(14, 11, 9, 0.74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-left: 2px solid rgba(236, 234, 234, 0.35);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
}
.layer-tag.is-in { opacity: 1; transform: none; }
.layer-tag .d { display: block; font-size: 12.5px; color: rgba(236, 234, 234, 0.7); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.layer-tag h3 { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin: 2px 0 4px; }
.layer-tag p { font-size: var(--step-small); line-height: 1.55; color: rgba(236, 234, 234, 0.88); }
.layer-tag .warn { display: inline-block; margin-top: 8px; padding: 2px 8px; background: #c9604a; color: #fff; font-size: 12px; font-weight: 600; }
.layer-tag.is-short p { display: none; }

/* 깊이 눈금 — 오른쪽 끝 */
.dig-ruler { position: absolute; right: 0; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none; }
.dig-ruler i { position: absolute; right: 0; width: 10px; height: 1px; background: rgba(255, 255, 255, 0.35); }
.dig-ruler i.major { width: 22px; background: rgba(255, 255, 255, 0.7); }
.dig-ruler b { position: absolute; right: 28px; transform: translateY(-50%); font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 기초 — 건물 바로 아래(가로 위치는 JS 가 사진 속 건물에, 세로 위치는 깊이(m)에 맞춘다)
   위에서부터: 기초판 → 다짐 골재 → 하이셀 매트(주력) → PET 매트 → 하중 분산
   그 아래 오른쪽 "더 연약한 구간"에만 메가헬리컬파일 */
.dig-found { position: absolute; top: 0; height: 0; z-index: 2; }
.dig-found > * { position: absolute; left: -3%; right: -3%; }
.dig-slab {
  background: linear-gradient(to bottom, #c9c3b8, #9b958a);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); z-index: 3;
}
.dig-agg { /* 다짐 골재 */
  background:
    radial-gradient(circle, rgba(60, 54, 48, 0.75) 0 2px, transparent 2.5px) 0 0 / 11px 9px,
    radial-gradient(circle, rgba(225, 218, 205, 0.55) 0 1.5px, transparent 2px) 5px 4px / 13px 11px,
    linear-gradient(to bottom, #a39a8c, #8a8174);
  z-index: 2;
}
.dig-hicell { z-index: 2; overflow: hidden; outline: 2px solid rgba(216, 171, 76, 0); transition: outline-color 0.4s; }
.dig-hicell.is-on { outline-color: rgba(216, 171, 76, 0.9); }
.dig-hicell .hc-fill { /* 셀에 채운 배합 골재 — 셀이 펼쳐진 뒤에 찬다 */
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(circle, rgba(48, 44, 40, 0.8) 0 2.5px, transparent 3px) 0 0 / 12px 10px,
    radial-gradient(circle, rgba(214, 206, 192, 0.6) 0 1.8px, transparent 2.3px) 6px 5px / 10px 12px,
    linear-gradient(to bottom, #a8a090, #8c8577);
}
.dig-hicell .hc-cells { /* HDPE 벌집 셀 — 펼친 셀을 옆에서 본 마름모 줄 */
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(58deg, transparent 0 17px, #15130f 17px 20px),
    repeating-linear-gradient(-58deg, transparent 0 17px, #15130f 17px 20px);
  border-top: 3px solid #15130f; border-bottom: 3px solid #15130f;
  clip-path: inset(0 100% 0 0);
}
.dig-pet { height: 4px; background: #e9e4da; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); z-index: 2; opacity: 0; } /* PET 매트 */
.dig-spread { /* 하중이 넓게 퍼져 내려가는 모양 */
  left: -14%; right: -14%; z-index: 1; opacity: 0;
  clip-path: polygon(11% 0, 89% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(90deg, rgba(216, 171, 76, 0.32) 0 2px, transparent 2px 46px),
    linear-gradient(to bottom, rgba(216, 171, 76, 0.28), rgba(216, 171, 76, 0));
}
.dig-pocket { /* 더 연약한 구간 — 물을 많이 머금은 어두운 렌즈 */
  left: 52%; right: -8%; z-index: 0;
  border-radius: 46% 54% 50% 50% / 18% 22% 78% 82%;
  background:
    repeating-linear-gradient(180deg, rgba(150, 170, 180, 0.08) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 50% 30%, rgba(26, 30, 34, 0.78), rgba(26, 30, 34, 0.45) 60%, rgba(26, 30, 34, 0) 75%);
  outline: 0;
}
.dig-pocket span { /* 말뚝과 겹치지 않게 렌즈 왼쪽 바깥에 */
  position: absolute; right: calc(100% - 4px); top: 16%;
  padding: 3px 8px; font-size: 12px; font-weight: 600; color: #fff; background: #c9604a; white-space: nowrap;
}
.dig-pile { position: absolute; width: 12px; margin-left: -6px; height: 0; overflow: visible; left: auto; right: auto; z-index: 1; }
.dig-pile .shaft {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--len, 0px);
  background: linear-gradient(90deg, #5d6166, #d9dde1 45%, #8b9096 70%, #4a4e53);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.dig-pile .shaft::after { /* 그라우팅 띠 */
  content: ""; position: absolute; left: -5px; right: -5px; top: 0; bottom: 0;
  background: rgba(214, 205, 188, 0.16); z-index: -1;
}
.dig-pile .helix { /* 헬릭스 날개 — 말뚝 끝이 그 깊이를 지나야 보인다 */
  position: absolute; left: 50%; width: 46px; height: 11px; margin-left: -23px;
  border-radius: 50%; background: radial-gradient(ellipse, #c8ccd1 30%, #6c7177 72%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  opacity: 0; transition: opacity 0.25s;
}
.dig-pile .helix.is-in { opacity: 1; }
.dig-pile .tip { position: absolute; left: 0; width: 12px; height: 16px; top: var(--len, 0px);
  background: linear-gradient(90deg, #5d6166, #c9cdd2, #4a4e53); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ── 화면에 고정된 글자 ─────────────────────────────── */
.dig-copy {
  position: absolute; left: var(--m); top: 50%; z-index: 4;
  transform: translateY(-46%);
  max-width: min(640px, 92vw);
  display: grid; gap: 18px;
}
.dig-copy .hero-wordmark { margin: 0; color: rgba(236, 234, 234, 0.75); }
.dig-copy h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 5.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.dig-copy .hero-sub { max-width: 30em; color: rgba(236, 234, 234, 0.9); }
.dig-copy .hero-row { justify-content: flex-start; gap: 36px; color: rgba(236, 234, 234, 0.75); }

.dig-cue {
  position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 4;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
  font-size: var(--step-small); color: rgba(236, 234, 234, 0.85); letter-spacing: 0.06em;
}
.dig-cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(var(--accent), transparent); animation: dig-cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes dig-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.dig-line { /* 지표를 지날 때의 한 문장 */
  position: absolute; left: var(--m); right: var(--m); top: 50%; z-index: 4;
  transform: translateY(-50%);
  text-align: center; pointer-events: none;
  font-size: var(--step-statement); line-height: 1.3; letter-spacing: -0.02em; font-weight: 500;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  opacity: 0;
}
.dig-line span { display: block; max-width: 17em; margin: 0 auto; }

.dig-depth { /* 지금 깊이 */
  position: absolute; right: 72px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 4;
  display: grid; justify-items: end; gap: 2px; opacity: 0;
  font-variant-numeric: tabular-nums;
}
.dig-depth small { font-size: var(--step-small); color: rgba(236, 234, 234, 0.7); }
.dig-depth strong { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }

.dig-end { /* 지지층에 닿았을 때 */
  position: absolute; left: var(--m); right: var(--m); bottom: 18svh; z-index: 4;
  text-align: center; opacity: 0; pointer-events: none;
}
.dig-end p:first-child { font-size: var(--step-small); color: var(--accent); letter-spacing: 0.08em; margin-bottom: 10px; }
.dig-end p:last-child { font-size: var(--step-statement); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }

/* 공법 설명 카드 — 하이셀(주력) → 메가헬리컬(깊은 연약 구간만). 흙 위가 아니라 단단한 판 위에 글자를 둔다 */
.dig-card {
  position: absolute; left: var(--m); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 5;
  width: min(420px, calc(100vw - 2 * var(--m)));
  padding: 18px 20px 20px;
  background: rgba(18, 14, 11, 0.92);
  border-top: 3px solid var(--accent);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}
.dig-card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dig-card.is-sub { border-top-color: #9aa3ab; }
.dig-card .k { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent); }
.dig-card.is-sub .k { color: #c3cad0; }
.dig-card h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; margin: 4px 0 8px; }
.dig-card p { font-size: var(--step-small); line-height: 1.6; color: rgba(236, 234, 234, 0.9); }
.dig-card dl { display: flex; gap: 22px; margin: 12px 0 0; }
.dig-card dt { font-size: 12px; color: var(--muted); }
.dig-card dd { margin: 0; font-size: 1.0625rem; font-weight: 500; }

/* ── 모바일 ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .dig { height: 400svh; }
  .dig-photo { object-position: 80% top; }
  .dig-sky::before { background: linear-gradient(180deg, rgba(12, 10, 8, 0.15) 0%, rgba(12, 10, 8, 0.25) 40%, rgba(12, 10, 8, 0.72) 100%); }
  .dig-copy { top: auto; bottom: calc(14svh + 64px); transform: none; gap: 14px; }
  .dig-copy .hero-wordmark { display: none; }
  .dig-copy .hero-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dig-copy .hero-row .btn { order: 0; }
  .dig-copy .hero-row span { display: none; }
  .layer-tag { max-width: 64vw; }
  .l-clay .layer-tag p { display: none; } /* 하이셀 매트를 가리지 않게 — 설명은 아래 카드가 맡는다 */
  /* 모바일: 설명 카드가 아래를 차지하므로 깊이는 오른쪽 위로, 카드 문장은 조금 줄인다 */
  .dig-depth { top: calc(84px + env(safe-area-inset-top)); bottom: auto; }
  .dig-card { padding: 14px 16px 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .dig-card dl { gap: 18px; margin-top: 10px; }
  .dig-line { top: 22%; } /* 지표 아래 첫 층 이름표와 겹치지 않게 위쪽(하늘)에 */
  .dig-note { top: auto; bottom: 14px; right: 52px; } /* 말뚝 머리와 겹치지 않게 단면 맨 아래로 */
  .dig-ruler { width: 44px; }
  .dig-ruler b { right: 24px; font-size: 10.5px; }
  .dig-depth { right: 52px; }
}

/* 움직임을 끈 사람 · JS 없음: 고정·이동 없이 위에서 아래로 쌓아 보여 준다 */
@media (prefers-reduced-motion: reduce) {
  .dig { height: auto; }
  .dig-stage { position: relative; height: auto; overflow: visible; }
  .dig-world { position: relative; transform: none !important; }
  .dig-photo { animation: none; }
  .dig-copy { position: absolute; top: 50svh; }
  .dig-line, .dig-depth, .dig-end, .dig-cue, .dig-card { display: none; }
  .layer-tag { opacity: 1; transform: none; }
}
html:not(.js) .dig { height: auto; }
html:not(.js) .dig-stage { position: relative; height: auto; overflow: visible; }
html:not(.js) .dig-world { position: relative; }
html:not(.js) .dig-copy { top: 50svh; }
html:not(.js) .layer-tag { opacity: 1; transform: none; }
html:not(.js) .dig-line, html:not(.js) .dig-depth, html:not(.js) .dig-end, html:not(.js) .dig-cue, html:not(.js) .dig-card { display: none; }

/* 관리자 부품: 하단 플로팅바가 붙으면(landing-parts.js → html.has-lp-float) 그 높이만큼 아래 글자를 올린다.
   높이는 dig.js 가 재서 --lp-float-h 로 넘긴다. 플로팅바를 닫으면 클래스가 빠져 제자리로 돌아온다. */
html.has-lp-float .dig-card,
html.has-lp-float .dig-cue { bottom: calc(var(--lp-float-h, 70px) + 16px + env(safe-area-inset-bottom)); }
@media (min-width: 901px) {
  html.has-lp-float .dig-depth { bottom: calc(var(--lp-float-h, 70px) + 18px + env(safe-area-inset-bottom)); }
}