/* ============================================================
 * css/sections.css — 섹션 셸 + 8개 섹션 블록 + 씬 폴백 (ui-designer 소유)
 *
 * 소유 범위(blueprint §4.2):
 *   .section* / .scene-canvas / .widget-mount / .scene-failed
 *   + 섹션 블록: .hero__* .what__* .types__* .volcano__*(.volcano__badge 포함)
 *     .eruption__* .landforms__* .quiz__*(셸만) .outro__*
 *
 * 설계 원칙:
 *   - 모바일 우선. 브레이크포인트 768px / 1200px.
 *   - 비대칭 레이아웃 + 초대형 타이포 대비로 개성. 중앙정렬 일변도 회피.
 *   - [data-animate] 초기 상태는 손대지 않음(motion.css 소유). 여기선 '보이는 최종 형태'만.
 *   - 키프레임은 `lava*` 명명(`lv-*` 는 motion.css 예약).
 * ========================================================== */

/* ============================================================
 * 1. 섹션 셸 (공통 — 1회 정의)
 * ========================================================== */
.section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: clamp(80px, 13vh, 168px);
  padding-inline: clamp(20px, 6vw, 72px);
}

.section__inner {
  width: 100%;
  max-width: var(--lv-maxw);
  margin-inline: auto;
}

/* ── 섹션 헤더 (아이브로우 번호 + 헤딩 + 인트로) ── */
.section__header {
  position: relative;
  max-width: 760px;
  margin-bottom: clamp(36px, 6vh, 72px);
}

/* 배경에 겹치는 초대형 인덱스 번호 (에디토리얼 장치) */
.section__header::before {
  content: "";
  position: absolute;
  top: -0.62em;
  left: -0.04em;
  z-index: 0;
  font-family: var(--lv-ff-mono);
  font-size: clamp(3.4rem, 9vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--lv-c-line-strong);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}
.section--what      .section__header::before { content: "01"; }
.section--types     .section__header::before { content: "02"; }
.section--volcano   .section__header::before { content: "03"; }
.section--eruption  .section__header::before { content: "04"; }
.section--landforms .section__header::before { content: "05"; }
.section--quiz      .section__header::before { content: "06"; }

.section__heading {
  position: relative;
  z-index: 1;
  font-family: var(--lv-ff-display);
  font-weight: 800;
  font-size: var(--lv-fs-h2);
  line-height: var(--lv-lh-tight);
  letter-spacing: -0.025em;
  color: var(--lv-c-text);
  text-wrap: balance;
}

/* 헤딩 위 짧은 용암 막대 마커 */
.section__heading::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-bottom: var(--lv-s-4);
  border-radius: var(--lv-radius-pill);
  background: var(--lv-grad-magma);
  box-shadow: var(--lv-glow-sm);
}

.section__intro {
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin-top: var(--lv-s-4);
  font-size: var(--lv-fs-lead);
  line-height: 1.72;
  color: var(--lv-c-text-dim);
}

/* ── 위젯 마운트: 위젯 내부 스타일은 widgets.css. 여기선 리듬/폭만. ── */
.widget-mount {
  width: 100%;
  margin-top: clamp(32px, 5vh, 56px);
}

/* ============================================================
 * 2. 씬 캔버스 + 실패 폴백
 * ========================================================== */
.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* 씬 로드 실패 → main.js 가 [data-scene] 섹션에 .scene-failed 부여.
   캔버스/오버레이 숨기고 의도된 마그마 그라디언트로 대체(사이트는 항상 뜬다). */
.scene-failed .scene-canvas,
.scene-failed .volcano__overlay { display: none; }

.section--hero.scene-failed { background: var(--lv-grad-fallback); }
.scene-failed .volcano__stage,
.scene-failed .eruption__stage {
  background: var(--lv-grad-fallback);
}

/* ============================================================
 * 3. HERO — 100svh 풀블리드, 콘텐츠 좌하단 앵커(비대칭)
 * ========================================================== */
.section--hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  display: block;
  overflow: hidden;
}

/* 캔버스 위 텍스트 스크림 (canvas z0 < scrim z1 < content z2) */
.section--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--lv-grad-scrim);
}

.section--hero .hero__content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  max-width: 1000px;
  margin-inline: 0;               /* .section__inner 의 auto 센터링 무효화 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 6vw, 76px);
  padding-bottom: clamp(56px, 12vh, 128px);
}

.hero__title {
  font-family: var(--lv-ff-display);
  font-weight: 900;
  font-size: var(--lv-fs-h1);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--lv-c-text);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.65);
}

.hero__subtitle {
  max-width: 44ch;
  margin-top: var(--lv-s-5);
  font-size: var(--lv-fs-lead);
  line-height: 1.6;
  color: var(--lv-c-text-dim);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6);
}

.hero__scroll-hint {
  display: flex;
  align-items: center;
  gap: var(--lv-s-3);
  margin-top: clamp(32px, 6vh, 64px);
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lv-c-text-dim);
}
/* 아래로 흐르는 라인 인디케이터 */
.hero__scroll-hint::before {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--lv-c-magma-hot), transparent);
  animation: lavaHintDrift 2.2s var(--lv-ease-in-out) infinite;
  transform-origin: top center;
}

@keyframes lavaHintDrift {
  0%   { transform: scaleY(0.3); opacity: 0.3; }
  50%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(0.3); opacity: 0.3; transform-origin: bottom center; }
}

/* ============================================================
 * 4. WHAT IS LAVA — 비교 카드 + 초대형 온도 카운터
 * ========================================================== */
.what__compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lv-s-4);
}

.what__card {
  position: relative;
  padding: clamp(22px, 4vw, 34px);
  border-radius: var(--lv-radius-l);
  background: var(--lv-c-bg-raise);
  border: 1px solid var(--lv-c-line);
  overflow: hidden;
  box-shadow: var(--lv-shadow-raise);
}

/* 상단 램프 라인 + 코너 글로우 (변종별 색차) */
.what__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.what__card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 80%;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.5;
  pointer-events: none;
}
.what__card--magma::before { background: linear-gradient(90deg, #9a2400, #ff4d00); }
.what__card--magma::after  { background: rgba(154, 36, 0, 0.55); }
.what__card--lava::before  { background: var(--lv-grad-magma); }
.what__card--lava::after   { background: rgba(255, 122, 30, 0.5); }

/* main.js 주입 (확정 마크업): <h3 class="what__card-name">…</h3><p class="what__card-desc">…</p> */
.what__card-name {
  position: relative;
  font-family: var(--lv-ff-display);
  font-weight: 800;
  font-size: var(--lv-fs-h3);
  letter-spacing: -0.01em;
  color: var(--lv-c-text);
}
.what__card--magma .what__card-name { color: var(--lv-c-magma-hot); }
.what__card--lava  .what__card-name { color: var(--lv-c-magma-mid); }
.what__card-desc {
  position: relative;
  margin-top: var(--lv-s-3);
  color: var(--lv-c-text-dim);
}

/* ── 온도 카운터 콜아웃 (초대형 숫자, 비대칭) ── */
.what__temp-callout {
  display: flex;
  flex-direction: column;
  gap: var(--lv-s-2);
  margin-top: clamp(48px, 9vh, 104px);
}
.what__temp-label {
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lv-c-text-dim);
}
.what__temp-value {
  font-family: var(--lv-ff-display);
  font-weight: 900;
  font-size: var(--lv-fs-display);
  line-height: 0.88;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--lv-grad-hot);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 44px rgba(255, 77, 0, 0.4));
}

.what__deeper {
  max-width: 62ch;
  margin-top: clamp(40px, 7vh, 72px);
  padding-left: var(--lv-s-4);
  border-left: 2px solid var(--lv-c-line-strong);
  color: var(--lv-c-text-dim);
}

@media (min-width: 768px) {
  .what__compare { grid-template-columns: 1fr 1fr; gap: var(--lv-s-5); }
}
@media (min-width: 1200px) {
  /* 온도 콜아웃을 좌측으로 밀어 그리드를 깨는 비대칭 */
  .what__temp-callout { margin-left: -2vw; }
}

/* ============================================================
 * 5. LAVA TYPES — 카드 그리드 (내부 마크업 비고정 → 컨테이너+제네릭)
 * ========================================================== */
.types__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lv-s-4);
}

.types__card {
  --type-accent: var(--lv-c-magma-hot);   /* data-type 이 덮어씀 */
  position: relative;
  padding: clamp(24px, 3.4vw, 36px);
  border-radius: var(--lv-radius-l);
  background: var(--lv-c-bg-raise);
  border: 1px solid var(--lv-c-line);
  box-shadow: var(--lv-shadow-raise);
  overflow: hidden;
  transition:
    transform var(--lv-dur-m) var(--lv-ease-out),
    border-color var(--lv-dur-m) var(--lv-ease-out);
}
.types__card:hover {
  transform: translateY(-4px);
  border-color: var(--lv-c-line-strong);
}
/* 종류별 색 변주 (data-type). 점도 순: 파호이호이(유동·고온) < 베개 < 아아(점성·거침) */
.types__card[data-type="pahoehoe"] { --type-accent: var(--lv-c-magma-hot); }
.types__card[data-type="pillow"]   { --type-accent: var(--lv-c-magma-mid); }
.types__card[data-type="aa"]        { --type-accent: #ff5a2a; }

/* 하단 발광 스트립 (accent 사용) */
.types__card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--type-accent), transparent 92%);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--lv-dur-l) var(--lv-ease-out);
}
.types__card:hover::after { transform: scaleX(1); }

/* ── 카드 상단 사진 (content-integrator 주입: .types__media > img.types__img) ──
   카드 패딩만큼 바깥으로 당겨 풀블리드. 상단만 카드 radius(−1px border)에 맞춰 라운딩. */
.types__media {
  position: relative;
  margin:
    calc(-1 * clamp(24px, 3.4vw, 36px))
    calc(-1 * clamp(24px, 3.4vw, 36px))
    clamp(20px, 3vw, 28px);
  overflow: hidden;                 /* hover 스케일·라운딩 클립 */
  border-radius: calc(var(--lv-radius-l) - 1px) calc(var(--lv-radius-l) - 1px) 0 0;
  background: var(--lv-c-bg-raise-2);  /* 로드 전/투명 여백도 어둡게 */
}
.types__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;              /* CLS 방지 + 크롭 일관 */
  object-fit: cover;
  transition: transform var(--lv-dur-l) var(--lv-ease-out);
}
.types__card:hover .types__img { transform: scale(1.03); }
/* 하단 스크림: 사진이 다크 카드로 자연스럽게 잠기며 텍스트로 연결 */
.types__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--lv-c-bg-raise) 0%,
    rgba(22, 16, 11, 0.5) 42%,
    transparent 100%);
}
/* --type-accent 발광 스트립: 미디어 하단 = data-type 색과 카드의 연결감 (스크림 위) */
.types__media::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--type-accent), transparent 94%);
  box-shadow: 0 0 10px -1px var(--type-accent);
}

/* 확정 마크업: .types__name(> span.types__name-en) / .types__desc / .types__funfact */
.types__name {
  font-family: var(--lv-ff-display);
  font-weight: 800;
  font-size: var(--lv-fs-h3);
  letter-spacing: -0.01em;
  color: var(--type-accent);
}
.types__name-en {
  display: block;
  margin-top: var(--lv-s-1);
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-small);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lv-c-text-faint);
}
.types__desc {
  margin-top: var(--lv-s-4);
  color: var(--lv-c-text-dim);
}
.types__funfact {
  margin-top: var(--lv-s-4);
  padding: var(--lv-s-3) var(--lv-s-4);
  border-radius: var(--lv-radius-m);
  background: var(--lv-c-bg-raise-2);
  border-left: 3px solid var(--type-accent);
  font-size: var(--lv-fs-small);
  line-height: 1.6;
  color: var(--lv-c-text-dim);
}

@media (min-width: 768px) {
  .types__grid { grid-template-columns: repeat(2, 1fr); gap: var(--lv-s-5); }
}
@media (min-width: 1200px) {
  .types__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
 * 6. VOLCANO ANATOMY — 3D 스테이지 + 핫스팟 패널 (비대칭 2열)
 * ========================================================== */
.volcano__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}

/* 스테이지 (세로 단면이므로 포트레잇 지향) */
.volcano__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 340px;
  border-radius: var(--lv-radius-l);
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(255, 77, 0, 0.08), transparent 70%),
    #0a0604;
  border: 1px solid var(--lv-c-line);
  overflow: hidden;
  box-shadow: var(--lv-shadow-deep);
}

/* 배지 오버레이: 씬이 여기에 버튼 생성, transform 으로 위치만 갱신 */
.volcano__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;   /* 배지만 개별적으로 pointer 활성 */
}

/* ── 핫스팟 배지 (씬이 클래스 부여, 시각 스타일은 여기) ── */
.volcano__badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  /* 센터링은 씬이 쓰는 transform(translate(-50%,-50%) translate(x,y))이 전담 —
     여기서 margin 등으로 재보정하면 이중 오프셋. transform은 매 프레임 갱신되므로 transition 금지. */
  border-radius: 50%;
  pointer-events: auto;
  background: var(--lv-c-magma-mid);
  border: 2px solid rgba(255, 233, 194, 0.85);
  box-shadow: var(--lv-glow-sm), 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition:
    opacity var(--lv-dur-s) var(--lv-ease-out),
    box-shadow var(--lv-dur-s) var(--lv-ease-out);
}
/* 맥동 링 */
.volcano__badge::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 61, 0.6);
  animation: lavaBadgePulse 2s var(--lv-ease-out) infinite;
}
.volcano__badge:hover { box-shadow: var(--lv-glow-md), 0 2px 10px rgba(0, 0, 0, 0.6); }

/* 선택됨: 확대 + 백열 */
.volcano__badge.is-focused {
  background: var(--lv-c-magma-hot);
  box-shadow: var(--lv-glow-md), 0 0 0 4px rgba(255, 77, 0, 0.25);
}
.volcano__badge.is-focused::before { border-color: var(--lv-c-magma-white); }

/* 카메라 뒤/가려짐: 축소 페이드, 상호작용 차단 */
.volcano__badge.is-behind {
  opacity: 0.18;
  pointer-events: none;
}
.volcano__badge.is-behind::before { animation: none; opacity: 0; }

@keyframes lavaBadgePulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(2);    opacity: 0; }
}

/* ── 핫스팟 패널 (main.js 글루 렌더) ── */
.volcano__panel {
  display: flex;
  flex-direction: column;
  gap: var(--lv-s-4);
}

.volcano__hotspot-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lv-s-2);
}
.volcano__hotspot-btn {
  padding: 10px 16px;
  border-radius: var(--lv-radius-pill);
  border: 1px solid var(--lv-c-line-strong);
  background: var(--lv-c-bg-raise);
  color: var(--lv-c-text-dim);
  font-size: var(--lv-fs-small);
  font-weight: 600;
  transition:
    color var(--lv-dur-s) var(--lv-ease-out),
    border-color var(--lv-dur-s) var(--lv-ease-out),
    background var(--lv-dur-s) var(--lv-ease-out);
}
.volcano__hotspot-btn:hover {
  color: var(--lv-c-text);
  border-color: var(--lv-c-magma-hot);
}
.volcano__hotspot-btn.is-active {
  color: #170a03;
  background: var(--lv-grad-magma);
  border-color: transparent;
  box-shadow: var(--lv-glow-sm);
}

.volcano__hotspot-detail {
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--lv-radius-m);
  background: var(--lv-c-bg-raise);
  border: 1px solid var(--lv-c-line);
  border-left: 3px solid var(--lv-c-magma-mid);
  min-height: 140px;
}
.volcano__hotspot-name {
  font-family: var(--lv-ff-display);
  font-weight: 800;
  font-size: var(--lv-fs-h3);
  color: var(--lv-c-magma-hot);
}
.volcano__hotspot-desc {
  margin-top: var(--lv-s-3);
  color: var(--lv-c-text-dim);
}

@media (min-width: 1200px) {
  .volcano__layout {
    grid-template-columns: 1.25fr 1fr;   /* 스테이지 우세 비대칭 */
    align-items: start;
  }
  .volcano__stage { aspect-ratio: 3 / 4; }
  .volcano__panel { position: sticky; top: 96px; }
}

/* ============================================================
 * 7. ERUPTION STYLES — 선택기 + 시네마틱 파티클 스테이지
 * ========================================================== */
.eruption__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 300px;
  margin-top: clamp(28px, 4vh, 48px);
  border-radius: var(--lv-radius-l);
  background:
    radial-gradient(70% 80% at 50% 100%, rgba(255, 77, 0, 0.12), transparent 72%),
    #0a0604;
  border: 1px solid var(--lv-c-line);
  overflow: hidden;
  box-shadow: var(--lv-shadow-deep);
}

@media (min-width: 1200px) {
  .eruption__stage { aspect-ratio: 21 / 9; min-height: 420px; }
}

/* ============================================================
 * 8. LAVA LANDFORMS — 카드 그리드 + 절차적 아이콘
 * ========================================================== */
.landforms__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lv-s-4);
}

.landforms__card {
  position: relative;
  padding: clamp(24px, 3.4vw, 34px);
  border-radius: var(--lv-radius-l);
  background: var(--lv-c-bg-raise);
  border: 1px solid var(--lv-c-line);
  box-shadow: var(--lv-shadow-raise);
  transition:
    transform var(--lv-dur-m) var(--lv-ease-out),
    border-color var(--lv-dur-m) var(--lv-ease-out);
}
.landforms__card:hover {
  transform: translateY(-4px);
  border-color: var(--lv-c-line-strong);
}

/* ── 카드 상단 사진 (content-integrator 주입: .landforms__media > img.landforms__img) ──
   카드에 overflow:hidden 이 없으므로 미디어가 자체적으로 클립·라운딩한다. */
.landforms__media {
  position: relative;
  margin:
    calc(-1 * clamp(24px, 3.4vw, 34px))
    calc(-1 * clamp(24px, 3.4vw, 34px))
    clamp(20px, 3vw, 26px);
  overflow: hidden;
  border-radius: calc(var(--lv-radius-l) - 1px) calc(var(--lv-radius-l) - 1px) 0 0;
  background: var(--lv-c-bg-raise-2);
}
.landforms__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;              /* CLS 방지 + 크롭 일관 */
  object-fit: cover;
  transition: transform var(--lv-dur-l) var(--lv-ease-out);
}
.landforms__card:hover .landforms__img { transform: scale(1.03); }
/* 하단 스크림: 사진이 다크 카드로 자연스럽게 잠김 */
.landforms__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--lv-c-bg-raise) 0%,
    rgba(22, 16, 11, 0.5) 42%,
    transparent 100%);
}
/* 사진이 정상일 때(=미디어 존재) 절차적 아이콘은 시각 중복 → 숨김.
   이미지 로드 실패로 통합자가 .landforms__media 를 제거하면 :has 미매치 →
   기존 .landforms__icon 폴백이 자동 복귀한다(마크업 계약 준수). */
.landforms__card:has(.landforms__media) .landforms__icon { display: none; }

/* 확정 마크업: .landforms__name / .landforms__location / .landforms__desc */
.landforms__name {
  font-family: var(--lv-ff-display);
  font-weight: 800;
  font-size: var(--lv-fs-h3);
  color: var(--lv-c-text);
}
.landforms__location {
  display: inline-block;
  margin-top: var(--lv-s-1);
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-small);
  letter-spacing: 0.03em;
  color: var(--lv-c-magma-hot);
}
.landforms__desc { margin-top: var(--lv-s-3); color: var(--lv-c-text-dim); }

/* ── 절차적 아이콘: 기본(발광 도트) + data-icon 변종 ── */
.landforms__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--lv-s-4);
  border-radius: var(--lv-radius-m);
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(255, 77, 0, 0.18), transparent 70%),
    var(--lv-c-bg-raise-2);
  border: 1px solid var(--lv-c-line);
  color: var(--lv-c-magma-mid);
}
/* 기본 글리프: 발광 용암 도트 (미지 키워드 자연 폴백) */
.landforms__icon::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lv-grad-magma);
  box-shadow: var(--lv-glow-sm);
}

/* cave — 만장굴/용암동굴: 아치형 터널 입구 */
.landforms__icon[data-icon="cave"]::before {
  width: 26px;
  height: 20px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: none;
  border: 3px solid var(--lv-c-magma-mid);
  border-bottom: none;
  box-shadow: 0 0 12px rgba(255, 77, 0, 0.5);
}

/* columns — 주상절리: 수직 육각 기둥 다발 */
.landforms__icon[data-icon="columns"]::before {
  width: 26px;
  height: 26px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,
      var(--lv-c-magma-mid) 0 4px,
      transparent 4px 7px);
  box-shadow: none;
  filter: drop-shadow(0 0 6px rgba(255, 77, 0, 0.45));
}

/* peak — 성산일출봉: 뾰족한 응회구 봉우리(삼각형) */
.landforms__icon[data-icon="peak"]::before {
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 26px solid var(--lv-c-magma-mid);
  background: none;
  filter: drop-shadow(0 0 8px rgba(255, 77, 0, 0.5));
}

/* river — 한탄강 협곡: 굽이치는 물길 */
.landforms__icon[data-icon="river"]::before {
  width: 28px;
  height: 18px;
  border-radius: 0;
  background: none;
  border-bottom: 3px solid var(--lv-c-magma-mid);
  border-radius: 0 0 40% 40% / 0 0 100% 100%;
  box-shadow: 0 8px 0 -6px var(--lv-c-magma-hot);
  filter: drop-shadow(0 0 6px rgba(255, 77, 0, 0.45));
}

@media (min-width: 768px) {
  .landforms__grid { grid-template-columns: repeat(2, 1fr); gap: var(--lv-s-5); }
}
@media (min-width: 1200px) {
  .landforms__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
 * 9. QUIZ — 섹션 셸만 (위젯 내부는 widgets.css)
 * ========================================================== */
.section--quiz .section__inner {
  max-width: 760px;   /* 퀴즈는 집중형 협폭 컬럼 */
}

/* ============================================================
 * 10. OUTRO — 마무리 메시지 + 용어집
 * ========================================================== */
.section--outro { text-align: left; }

.outro__message {
  max-width: 58ch;
  margin-top: var(--lv-s-5);
  font-size: var(--lv-fs-lead);
  line-height: 1.8;
  color: var(--lv-c-text-dim);
}
.outro__message::first-line { color: var(--lv-c-text); }

.outro__glossary {
  margin-top: clamp(48px, 9vh, 96px);
  padding-top: clamp(32px, 5vh, 56px);
  border-top: 1px solid var(--lv-c-line);
}
.outro__glossary-heading {
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lv-c-magma-hot);
}

.outro__glossary-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lv-s-4);
  margin-top: var(--lv-s-5);
}
/* 확정 마크업: .outro__term > dt.outro__term-name + dd.outro__term-def */
.outro__term {
  padding: var(--lv-s-4);
  border-radius: var(--lv-radius-m);
  background: var(--lv-c-bg-raise);
  border: 1px solid var(--lv-c-line);
  border-top: 2px solid var(--lv-c-crust);
  transition: border-top-color var(--lv-dur-m) var(--lv-ease-out);
}
.outro__term:hover { border-top-color: var(--lv-c-magma-mid); }
.outro__term-name {
  font-family: var(--lv-ff-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--lv-c-magma-hot);
}
.outro__term-def {
  margin-top: var(--lv-s-2);
  font-size: var(--lv-fs-small);
  line-height: 1.6;
  color: var(--lv-c-text-dim);
}

.outro__footer {
  margin-top: clamp(48px, 8vh, 88px);
}
.outro__credit {
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-eyebrow);
  letter-spacing: 0.06em;
  color: var(--lv-c-text-faint);
}

@media (min-width: 768px) {
  .outro__glossary-list { grid-template-columns: repeat(2, 1fr); gap: var(--lv-s-4); }
}
@media (min-width: 1200px) {
  .outro__glossary-list { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
 * 11. 접근성: 감속 모션에서 sections.css 소유 유휴 애니메이션 정지
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-hint::before,
  .volcano__badge::before { animation: none; }
  /* 카드 사진 hover 스케일 비활성 */
  .types__img,
  .landforms__img { transition: none; }
  .types__card:hover .types__img,
  .landforms__card:hover .landforms__img { transform: none; }
}