@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ============================================================
 * css/base.css — 디자인 토큰 · 리셋 · 공통 컴포넌트 (ui-designer 소유)
 *
 * 소유 범위(blueprint §0, §4.2):
 *   - :root 디자인 토큰 (--lv-*)  ← widgets.css / motion.css 가 소비
 *   - 리셋 + 기본 타이포
 *   - .loader* / .skip-link / .site-nav* / .scroll-progress*
 *
 * 경계 준수:
 *   - [data-animate] 초기 숨김·리빌 상태는 절대 건드리지 않는다 (motion.css 소유).
 *   - 키프레임은 `lava*` 로 명명한다 (`lv-*` 는 motion.css 예약 네임스페이스).
 *   - 로더의 '형태/위치/색'만 여기서 정의하고, '퇴장' 트랜지션은 motion.css 가 담당.
 *
 * 아트 디렉션: 화산암 옵시디언 베이스 + 흑체복사 용암 램프(crust→ember→#ff4d00→hot)
 *   보라·파랑·유리모피즘 금지. 초대형 디스플레이 서체 대비 + 시네마틱한 열기.
 * ========================================================== */

/* ============================================================
 * 1. 디자인 토큰
 * ========================================================== */
:root {
  /* ── 색: 배경 (화산암) ── */
  --lv-c-bg-deep:    #0c0806;  /* 최심부 옵시디언 — body 베이스 */
  --lv-c-bg-raise:   #16100b;  /* 카드/패널 상승면 */
  --lv-c-bg-raise-2: #201811;  /* 한 단계 더 밝은 상승면 (hover, 상세) */

  /* ── 색: 용암 램프 (흑체복사 순서) ── */
  --lv-c-crust:      #3d2618;  /* 식은 크러스트/현무암 갈색 — 경계·라인 */
  --lv-c-ember:      #9a2400;  /* 심부 붉은 잉걸 */
  --lv-c-magma-mid:  #ff4d00;  /* 시그니처 용암 오렌지 */
  --lv-c-magma-hot:  #ffb43d;  /* 고온 황색 오렌지 */
  --lv-c-magma-white:#ffe9c2;  /* 백열 — 램프 최상단 */

  /* ── 색: 텍스트 (따뜻한 회백) ── */
  --lv-c-text:       #f5ece0;  /* 본문 — 순백 대신 온기 있는 오프화이트 */
  --lv-c-text-dim:   #ab9c8b;  /* 보조 텍스트 */
  --lv-c-text-faint: #6f6357;  /* 라벨·비활성 */

  /* ── 색: 라인 (따뜻한 헤어라인) ── */
  --lv-c-line:        rgba(255, 138, 61, 0.14);
  --lv-c-line-strong: rgba(255, 138, 61, 0.30);

  /* ── 그라디언트 ── */
  --lv-grad-magma:  linear-gradient(135deg, #ff4d00 0%, #ffb43d 100%);
  --lv-grad-ember:  linear-gradient(180deg, #ffb43d 0%, #ff4d00 40%, #9a2400 100%);
  --lv-grad-hot:    linear-gradient(120deg, #ff4d00 0%, #ffb43d 55%, #ffe9c2 100%);
  /* 히어로/캔버스 위 텍스트용 스크림 — 하단을 강하게 눌러 가독 확보 */
  --lv-grad-scrim:  linear-gradient(
                      to top,
                      rgba(8, 5, 3, 0.94) 0%,
                      rgba(8, 5, 3, 0.62) 34%,
                      rgba(8, 5, 3, 0.16) 62%,
                      rgba(8, 5, 3, 0.42) 100%);
  /* 씬 로드 실패 시 스테이지/섹션 폴백 — 의도된 마그마 발광 */
  --lv-grad-fallback: radial-gradient(
                      125% 90% at 50% 118%,
                      #ff7a1e 0%, #ff4d00 18%, #9a2400 42%,
                      #2a1108 72%, var(--lv-c-bg-deep) 100%);

  /* ── 글로우 / 그림자 ── */
  --lv-glow-sm:    0 0 14px rgba(255, 77, 0, 0.45);
  --lv-glow-md:    0 0 32px rgba(255, 77, 0, 0.40);
  --lv-glow-lg:    0 0 64px rgba(255, 77, 0, 0.32);
  --lv-shadow-raise: 0 22px 60px -24px rgba(0, 0, 0, 0.72);
  --lv-shadow-deep:  0 40px 120px -40px rgba(0, 0, 0, 0.85);

  /* ── 서체 ── */
  --lv-ff-display: "Pretendard Variable", Pretendard, -apple-system,
                   BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
                   system-ui, sans-serif;
  --lv-ff-body:    "Pretendard Variable", Pretendard, -apple-system,
                   BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
                   system-ui, sans-serif;
  /* mono: 계기판/라벨/번호용. 웹폰트 예산 소모 없음(시스템 스택). */
  --lv-ff-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
                   Menlo, Consolas, "Liberation Mono", monospace;

  /* ── 타이포 스케일 (clamp 반응형) ── */
  --lv-fs-h1:      clamp(2.85rem, 8.5vw, 7.5rem);   /* 히어로 타이틀 */
  --lv-fs-h2:      clamp(2rem, 5vw, 3.9rem);        /* 섹션 헤딩 */
  --lv-fs-h3:      clamp(1.25rem, 2.4vw, 1.7rem);   /* 카드 제목 */
  --lv-fs-display: clamp(3.2rem, 13vw, 9rem);       /* 온도 카운터 등 초대형 숫자 */
  --lv-fs-lead:    clamp(1.06rem, 1.9vw, 1.35rem);  /* 인트로/리드 */
  --lv-fs-body:    clamp(1rem, 1.1vw, 1.12rem);     /* 본문 */
  --lv-fs-small:   0.82rem;                          /* 라벨/캡션 */
  --lv-fs-eyebrow: 0.74rem;                          /* mono 아이브로우 */

  --lv-lh-tight:   1.04;
  --lv-lh-snug:    1.28;
  --lv-lh-body:    1.68;

  /* ── 간격 (4px 배수 스케일) ── */
  --lv-s-1: 4px;
  --lv-s-2: 8px;
  --lv-s-3: 12px;
  --lv-s-4: 20px;
  --lv-s-5: 32px;
  --lv-s-6: 48px;
  --lv-s-7: 80px;
  --lv-s-8: 128px;

  /* ── 형태 ── */
  --lv-radius-s: 6px;
  --lv-radius-m: 14px;
  --lv-radius-l: 24px;
  --lv-radius-pill: 999px;

  /* ── 레이아웃 ── */
  --lv-maxw: 1100px;

  /* ── 모션 토큰 (motion.css / widgets.css 가 소비) ── */
  --lv-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --lv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lv-dur-s: 240ms;
  --lv-dur-m: 480ms;
  --lv-dur-l: 780ms;

  /* ── z-index 스케일 ── */
  --lv-z-nav:      100;
  --lv-z-progress: 200;
  --lv-z-loader:   1000;
}

/* ============================================================
 * 2. 리셋
 * ========================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100vh;
  font-family: var(--lv-ff-body);
  font-size: var(--lv-fs-body);
  font-weight: 400;
  line-height: var(--lv-lh-body);
  color: var(--lv-c-text);
  word-break: keep-all;          /* 한국어 본문 기본값 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 화산암 대기: 딥 베이스 + 가장자리 잉걸 글로우 + 미세 그레인 */
  background-color: var(--lv-c-bg-deep);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(58% 46% at 88% -6%, rgba(255, 77, 0, 0.11), transparent 62%),
    radial-gradient(66% 58% at 2% 106%, rgba(154, 36, 0, 0.16), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 140px 140px, cover, cover;
  background-attachment: fixed;
  background-blend-mode: normal;
}

img, canvas, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

ul, ol { list-style: none; padding: 0; }

a { color: var(--lv-c-magma-hot); text-decoration: none; }

[hidden] { display: none !important; }

::selection {
  background: var(--lv-c-magma-mid);
  color: #170a03;
}

/* ============================================================
 * 3. 기본 타이포 (요소 기본값 — .section* 스타일은 sections.css 소유)
 * ========================================================== */
h1, h2, h3, h4 {
  font-family: var(--lv-ff-display);
  font-weight: 800;
  line-height: var(--lv-lh-tight);
  letter-spacing: -0.02em;
  color: var(--lv-c-text);
  text-wrap: balance;
}

p { text-wrap: pretty; }

strong, b { font-weight: 700; color: var(--lv-c-text); }

dt { font-weight: 700; }

/* ── 포커스: 용암색 아웃라인 (전역) ── */
:focus-visible {
  outline: 2px solid var(--lv-c-magma-hot);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
 * 4. 스킵 링크
 * ========================================================== */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--lv-z-loader) + 1);
  transform: translateY(-140%);
  margin: var(--lv-s-3);
  padding: var(--lv-s-3) var(--lv-s-4);
  border-radius: var(--lv-radius-s);
  background: var(--lv-c-magma-mid);
  color: #170a03;
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--lv-glow-md);
  transition: transform var(--lv-dur-s) var(--lv-ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
 * 5. 고정 내비게이션 — 우측 도트 레일
 *    데스크톱: 도트 + hover/focus/active 시 라벨 좌측 전개.
 *    모바일(<768): 숨김 (스크롤 내비로 충분, 콘텐츠는 항상 선형 접근 가능).
 * ========================================================== */
.site-nav {
  position: fixed;
  top: 50%;
  right: clamp(10px, 2.4vw, 30px);
  transform: translateY(-50%);
  z-index: var(--lv-z-nav);
  display: none;
}

@media (min-width: 768px) {
  .site-nav { display: block; }
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.site-nav__link {
  --dot: 7px;
  display: flex;
  flex-direction: row-reverse; /* 도트가 우측 고정, 라벨은 좌측으로 전개/클립 */
  align-items: center;
  gap: 11px;
  max-width: 22px;             /* 기본: 도트만 노출 (라벨은 좌측 클립) */
  padding: 7px 5px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--lv-c-text-faint);
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-eyebrow);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px);
          mask-image: linear-gradient(to right, transparent 0, #000 20px);
  transition:
    max-width var(--lv-dur-m) var(--lv-ease-out),
    color var(--lv-dur-s) var(--lv-ease-out);
}

.site-nav__link::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--lv-c-line-strong);
  transition:
    background var(--lv-dur-s) var(--lv-ease-out),
    border-color var(--lv-dur-s) var(--lv-ease-out),
    box-shadow var(--lv-dur-s) var(--lv-ease-out);
}

/* 레일 hover 시 전체 라벨 전개, 개별 focus/active 도 전개 */
.site-nav:hover .site-nav__link,
.site-nav__link:focus-visible,
.site-nav__link:hover,
.site-nav__link.is-active {
  max-width: 260px;
  color: var(--lv-c-text);
}

.site-nav__link:hover::before {
  border-color: var(--lv-c-magma-hot);
}

.site-nav__link.is-active {
  color: var(--lv-c-magma-hot);
}
.site-nav__link.is-active::before {
  background: var(--lv-c-magma-mid);
  border-color: var(--lv-c-magma-hot);
  box-shadow: var(--lv-glow-sm);
}

/* ============================================================
 * 6. 스크롤 진행바 — 상단 고정 (choreography.js 가 __bar scaleX 갱신)
 * ========================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--lv-z-progress);
  background: rgba(255, 138, 61, 0.08);
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);         /* JS 미작동 시 0 유지 (무해) */
  background: var(--lv-grad-magma);
  box-shadow: 0 0 12px rgba(255, 77, 0, 0.65);
}

/* ============================================================
 * 7. 로더 — 용암 방울 펄스 (형태/색은 여기, 퇴장은 motion.css)
 * ========================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--lv-z-loader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lv-s-6);
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(255, 77, 0, 0.10), transparent 70%),
    var(--lv-c-bg-deep);
}

/* 용암 방울: 백열 코어 + 맥동하는 글로우 */
.loader__core {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; /* 방울 형태 */
  background:
    radial-gradient(circle at 50% 38%, #ffe9c2 0%, #ffb43d 30%, #ff4d00 62%, #9a2400 100%);
  box-shadow: var(--lv-glow-lg);
  animation: lavaLoaderThrob 1.6s var(--lv-ease-in-out) infinite;
}

/* 퍼져나가는 열 파문 */
.loader__core::before,
.loader__core::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(255, 138, 61, 0.5);
  animation: lavaLoaderRipple 1.9s var(--lv-ease-out) infinite;
}
.loader__core::after { animation-delay: 0.95s; }

.loader__text {
  font-family: var(--lv-ff-mono);
  font-size: var(--lv-fs-small);
  letter-spacing: 0.08em;
  color: var(--lv-c-text-dim);
  text-align: center;
}

@keyframes lavaLoaderThrob {
  0%, 100% { transform: scale(0.9);  box-shadow: 0 0 34px rgba(255, 77, 0, 0.30); }
  50%      { transform: scale(1.06); box-shadow: 0 0 74px rgba(255, 77, 0, 0.55); }
}

@keyframes lavaLoaderRipple {
  0%   { transform: scale(0.9);  opacity: 0.7; }
  100% { transform: scale(2.3);  opacity: 0; }
}

/* 로더 애니메이션은 접근성 설정을 존중 (정적 발광 유지) */
@media (prefers-reduced-motion: reduce) {
  .loader__core { animation: none; }
  .loader__core::before,
  .loader__core::after { animation: none; opacity: 0; }
}