/* Focus Camp — 랜딩 스타일.
   색·폰트는 앱 토큰(lib/theme/app_colors.dart, app_text_styles.dart)에서 그대로 가져왔다.
   씬 좌표계는 앱 프레임(402×786)을 잘라 만든 와이드 배경(frame 1002×470,
   원점 오프셋 x+300 / y-170)을 기준으로 한다. 좌표 하나만 바꿔도 앱과 어긋나니 주의. */

/* ── 폰트 (앱 번들 폰트 서브셋) ─────────────────────────── */
@font-face {
  font-family: 'Chiron';
  src: url('fonts/chiron-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chiron';
  src: url('fonts/chiron-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chiron';
  src: url('fonts/chiron-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/pretendard-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/pretendard-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── 토큰 ───────────────────────────────────────────────── */
:root {
  /* night/* — 밤 숲 */
  --night-0: #0A291F;
  --night-1: #103B2C;
  --night-2: #275A4B;
  --scene-in: #113D2E;   /* 씬 이미지 위쪽 가장자리 색 */
  --scene-out: #1D4C3E;  /* 씬 이미지 아래쪽 가장자리 색 */

  /* surface/* · content/* — 종이 */
  --paper: #FAF9F0;
  --card: #F5F3E0;
  --sunken: #E8DCC0;
  --bark: #5C4F3A;
  --bark-2: #8A795D;
  --bark-3: #B0A085;
  --border: #E0D2B4;
  --border-strong: #CBB896;
  --cream: #FDF8EC;

  /* 불 */
  --ember: #FFD266;
  --ember-edge: #E0A838;
  --orange: #FF9500;

  --sans: 'Chiron', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fine: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --page: min(1080px, 100% - 48px);

  /* 캠프 씬 밴드 높이 — 씬 안의 모든 크기가 여기서 나온다(캐릭터·모닥불·링). */
  --band: clamp(300px, 48svh, 520px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--cream);
  background: var(--night-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }
/* ol 도 같이 비운다 — .steps 는 ::before 로 번호를 그리므로 기본 마커가 남으면
   "1. ①" 처럼 번호가 두 번 찍힌다(/delete-account · /challenge). */
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }   /* display 를 준 요소도 hidden 이면 감춘다 */

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 99;
  background: var(--ember); color: var(--bark);
  padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 16px; }

/* 한국어는 어절 단위로 끊어야 읽힌다 — 문장 중간에서 잘리지 않게. */
html[lang='ko'] { word-break: keep-all; }

/* ── 상단 바 ────────────────────────────────────────────── */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  width: var(--page); margin-inline: auto;
  padding-top: 22px;
}
.nav__brand img { width: 108px; height: auto; }

/* ── 언어 토글 ──────────────────────────────────────────── */
.lang { display: flex; align-items: center; gap: 6px; }
.lang__btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: var(--fine); font-size: 14px; font-weight: 600;
  color: rgba(253, 248, 236, .45);
  padding: 6px 2px;
  transition: color .18s ease;
}
.lang__btn:hover { color: rgba(253, 248, 236, .8); }
.lang__btn[aria-pressed='true'] { color: var(--ember); }
.lang__sep { color: rgba(253, 248, 236, .25); font-size: 13px; }
/* 초대·가입 페이지는 상단 바가 없다 — 카드 위 오른쪽에 붙인다. */
.lang--invite { justify-content: flex-end; margin-bottom: 6px; }

/* ── 히어로 ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--scene-in);   /* 씬 이미지 위 가장자리 색 — 카피 블록 아래를 메운다 */
}

/* 카피 블록이 밤하늘 그라디언트를 진다 — 블록의 끝 색(=--scene-in)이 씬의 첫 줄과
   맞아떨어져야 이음매가 안 보인다. 그래서 그라디언트는 .hero가 아니라 여기에 있다. */
.hero__copy {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%;
  padding: clamp(88px, 10svh, 110px) 24px clamp(12px, 2svh, 22px);
  text-align: center;
  position: relative; z-index: 3;
  background: linear-gradient(180deg, var(--night-0) 0%, #0C3226 56%, var(--scene-in) 100%);
}
.hero__title, .hero__sub, .cta__note { max-width: 860px; margin-inline: auto; }

.hero__title {
  font-size: clamp(35px, 3.6vw, 49px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero__sub {
  margin-top: 16px;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(253, 248, 236, .72);
}

/* 스토어 버튼 — 앱의 흰 바탕 버튼(AppButton tertiary) 결 */
.cta {
  margin-top: 26px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 20px 11px 17px;
  background: #FFFFFF;
  border: 1.5px solid #EBEBEB;
  border-bottom-width: 3px;
  border-radius: 16px;
  color: var(--bark);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}
.store:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.store:active { transform: translateY(1px); border-bottom-width: 1.5px; }
.store[aria-disabled='true'] { cursor: default; }
.store__mark { width: 24px; height: 24px; fill: var(--bark); flex: none; }
.store__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store__text small { font-size: 10.5px; font-weight: 600; color: #77664B; }
.store__text strong { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.cta__note {
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(253, 248, 236, .5);
}

/* ── 웨이트리스트 (출시 전 모드 — main.js WAITLIST_MODE) ──
   입력은 스토어 버튼의 흰 카드 결, 버튼은 불씨(--ember) 결. */
.waitlist { margin-top: 26px; }
/* hybrid 모드 리드 — 스토어 버튼 아래 "Android 대기" 안내 한 줄 */
.waitlist .waitlist__lead {
  margin-bottom: 12px;
  font-size: 13.5px;
  color: rgba(253, 248, 236, .6);
}
.waitlist__row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.waitlist__input {
  width: min(340px, 100%);
  padding: 13px 18px;
  font: 500 15.5px/1.3 var(--fine);
  color: var(--bark);
  background: #FFFFFF;
  border: 1.5px solid #EBEBEB;
  border-bottom-width: 3px;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}
.waitlist__input::placeholder { color: var(--bark-3); }
.waitlist__btn {
  padding: 13px 22px;
  font: 700 16px/1.3 var(--sans);
  letter-spacing: -0.01em;
  color: var(--bark);
  background: var(--ember);
  border: 1.5px solid var(--ember-edge);
  border-bottom-width: 3px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  transition: transform .16s ease, box-shadow .16s ease;
}
.waitlist__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.waitlist__btn:active { transform: translateY(1px); border-bottom-width: 1.5px; }
.waitlist__btn:disabled { opacity: .7; cursor: default; transform: none; }
/* 허니팟 — 화면 밖으로. display:none 은 일부 봇이 거르므로 좌표로 숨긴다. */
.waitlist__camp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* .last p(0,1,1)가 소스 뒤에 있어 이긴다 — 두 클래스로 스코프를 높인다. */
.waitlist .waitlist__msg {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(253, 248, 236, .72);
  min-height: 1.2em;
}
.waitlist .waitlist__msg--ok { color: var(--ember); }

/* ── 캠프 씬 ───────────────────────────────────────────────
   .stage 는 프레임 1002×470 좌표계. 자식은 --x/--y(앱 프레임 402×786 px)로 놓는다:
   left = (x + 300) / 1002,  top = (y - 170) / 470
   통나무 6자리가 차지하는 세로(프레임 y 276~540)는 씬 높이의 56%를 먹으므로,
   min-height 를 줄이면 위·아래 자리가 잘린다.                              */
.scene {
  position: relative;
  flex: 0 0 auto;
  height: var(--band);
  overflow: hidden;
}
/* 스테이지 너비 = 화면을 덮는 크기(cover) — 단, 통나무 6자리가 잘리지 않는 선까지만.
   자리 블록은 씬 높이의 56%를 먹으므로, 스테이지 높이를 씬 높이의 1.6배로 묶는다
   (1002/470 × 1.6 = 3.411). 상한에 걸려 좌우가 남으면 .scene__sides 가 잇는다. */
.stage, .scene__sides {
  --w: min(
    max(100vw, calc(var(--band) * 1002 / 470)),
    calc(var(--band) * 3.411)
  );
  --h: calc(var(--w) * 470 / 1002);
}
/* 상한에 걸려 이미지가 좌우를 못 덮을 때 남는 자리 — 배경 이미지 가장자리 열의 색
   그대로다. 스테이지와 같은 높이·같은 위치라 같은 줄에서 색이 맞아 이음매가 없다. */
.scene__sides {
  position: absolute; left: 0; right: 0; top: 50%;
  height: var(--h);
  translate: 0 -50%;
  /* camp_scene.webp 의 맨 왼쪽/오른쪽 열을 그대로 읽은 값
     (scripts/build_site_scene.py 가 다시 구울 때 같이 확인). */
  background: linear-gradient(180deg,
    #133E30 0%, #133E30 10%, #154132 20%, #164434 30%, #174536 40%,
    #184838 50%, #1A4A3C 60%, #1D4C3F 70%, #1E4E40 80%, #1F5142 90%, #215141 100%);
}
.stage {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: var(--w);
  height: var(--h);
}
.stage__bg { width: 100%; height: 100%; object-fit: cover; }

/* 씬 이미지의 위·아래 잘린 면을 앞뒤 섹션 색으로 살짝 녹인다. 길게 잡으면
   위쪽 통나무의 캐릭터가 뿌옇게 덮이므로 짧게(=이음매만 가릴 만큼). */
.scene__fade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--scene-in) 0, rgba(17, 61, 46, 0) 20px),
    linear-gradient(0deg, var(--scene-out) 0, rgba(29, 76, 62, 0) 24px);
}

/* 앉은 캐릭터 — 자리 박스 64×50, 통나무 윗면으로 16px 들어 올림(=자기 높이의 32%) */
.camper {
  position: absolute;
  left: calc((var(--x) + 300) / 1002 * 100%);
  top: calc((var(--y) - 170) / 470 * 100%);
  width: calc(64 / 1002 * 100%);
  height: calc(50 / 470 * 100%);
  object-fit: contain;
  translate: -50% -82%;
  animation: breathe 4.4s ease-in-out infinite;
  animation-delay: var(--bob, 0s);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .28));
}
.camper.flip { scale: -1 1; }

/* 굽는 꼬치 — 원본이 45°쯤 서 있어 살짝 눕힌다(앱 _kSkewerTilt = 0.06rad) */
.skewer {
  position: absolute;
  left: calc((var(--x) + 300) / 1002 * 100%);
  top: calc((var(--y) - 170) / 470 * 100%);
  width: calc(51 / 1002 * 100%);
  height: calc(47 / 470 * 100%);
  object-fit: contain;
  translate: -50% -50%;
  rotate: 3.44deg;
}
.skewer.flip { scale: -1 1; }

.grass {
  position: absolute;
  left: calc((var(--x) + 300) / 1002 * 100%);
  top: calc((var(--y) - 170) / 470 * 100%);
  width: calc(10 / 1002 * 100%);
  height: calc(16 / 470 * 100%);
  object-fit: contain;
  translate: -50% -50%;
}

/* 비어 있는 자리 — 조용히 숨 쉬는 온기 */
.empty-seat {
  position: absolute;
  left: calc((var(--x) + 300) / 1002 * 100%);
  top: calc((var(--y) - 170) / 470 * 100%);
  width: calc(76 / 1002 * 100%);
  height: calc(46 / 470 * 100%);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 210, 102, .42), rgba(255, 149, 0, .16) 55%, transparent 78%);
  animation: seat-breathe 3.6s ease-in-out infinite;
}

/* 모닥불 — 흙 자리 중심(201, 410)에 장작이 오도록 220×220 박스를 앵커 83%로 올림 */
.fire {
  position: absolute;
  left: calc((201 + 300) / 1002 * 100%);
  top: calc((337.4 - 170) / 470 * 100%);
  width: calc(220 / 1002 * 100%);
  height: calc(220 / 470 * 100%);
  translate: -50% -50%;
}
.fire__glow {
  position: absolute; left: 50%; top: 78%;
  width: 260%; height: 210%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 196, 80, .32), rgba(255, 145, 30, .13) 48%, rgba(255, 145, 30, 0) 72%);
  animation: glow 3.1s ease-in-out infinite;
}
/* 불꽃은 장작 **위** 레이어(HTML에서 로그 다음에 온다). 너무 내리면 장작을
   통째로 삼키므로, 장작 윗면쯤에서 시작하게 bottom 을 잡는다. */
.fire__flame {
  position: absolute; left: 50%; bottom: 17%;
  width: 42%; height: 70%;
  translate: -50% 0;
  transform-origin: 50% 94%;
  animation: flicker 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 170, 40, .5));
}
.flame__core { animation: core 2.7s ease-in-out infinite; transform-origin: 50% 70%; }
.fire__logs {
  position: absolute; left: 50%; top: 83%;
  width: 54%; height: auto;
  translate: -50% -50%;
}

.embers { position: absolute; left: 50%; bottom: 22%; width: 0; height: 0; }
.embers i {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 6px 1px rgba(255, 190, 80, .8);
  opacity: 0;
  animation: ember 6s linear infinite;
  animation-delay: var(--ed);
}

@keyframes flicker {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(0deg); }
  25%      { transform: scaleY(1.05) scaleX(.975) rotate(-1.1deg); }
  50%      { transform: scaleY(.965) scaleX(1.03) rotate(.6deg); }
  75%      { transform: scaleY(1.035) scaleX(.99) rotate(1deg); }
}
@keyframes core {
  0%, 100% { transform: scale(1); opacity: .95; }
  50%      { transform: scale(1.12); opacity: 1; }
}
/* 중심 잡기는 translate 속성이 한다 — 여기서 transform: translate 를 또 쓰면
   두 번 밀려 불빛이 왼쪽 숲으로 새어 나간다. 그래서 scale/opacity 만 흔든다. */
@keyframes glow {
  0%, 100% { opacity: .82; scale: 1; }
  50%      { opacity: 1; scale: 1.06; }
}
@keyframes ember {
  0%   { opacity: 0; transform: translate(var(--ex), 0) scale(.6); }
  12%  { opacity: 1; }
  70%  { opacity: .7; }
  100% { opacity: 0; transform: translate(calc(var(--ex) * 2.4), -120px) scale(.25); }
}
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5%); }
}
@keyframes seat-breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ── 불에 대한 한 문장 ──────────────────────────────────── */
.ember-band {
  background: linear-gradient(180deg, var(--scene-out) 0%, var(--night-1) 42%, var(--night-0) 100%);
  padding: clamp(56px, 9vw, 104px) 0 clamp(64px, 10vw, 120px);
  text-align: center;
}
.ember-band__line {
  width: var(--page); margin-inline: auto;
  font-size: clamp(22px, 2.9vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.ember-band__sub {
  width: var(--page); margin-inline: auto;
  margin-top: 18px;
  font-size: clamp(14px, 1.4vw, 17px);
  color: rgba(253, 248, 236, .5);
  line-height: 1.7;
}

/* ── 종이 시트 (캠핑하는 법 + 짐) ─────────────────────────
   밤 숲 위에 얹힌 한 장의 종이 — 앱의 크림색 시트와 같은 결. */
.sheet {
  width: var(--page); margin-inline: auto;
  background: var(--paper);
  color: var(--bark);
  border-radius: 32px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.how {
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 64px) clamp(20px, 3vw, 40px);
}
.pack {
  padding: clamp(8px, 2vw, 24px) clamp(20px, 4vw, 64px) clamp(56px, 7vw, 88px);
}

.how__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--bark);
}

.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(34px, 4.6vw, 56px) 0;
  border-bottom: 1.5px dashed var(--border);
}
.beat:last-child { border-bottom: 0; }
.beat--flip .beat__art { order: 2; }

.beat__text h3 {
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.beat__text p {
  margin-top: 12px;
  font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.78;
  color: var(--bark-2);
}

.beat__art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 190px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 26px;
}
/* 앱 잠금 — 폰을 든 캠피(집중 중엔 이 화면이 가림막으로 덮인다) */
.beat__art--lock img { width: clamp(130px, 15vw, 180px); height: auto; }

/* 꼬치 — 구울 것들 */
.beat__art--skewers {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 20px 16px;
}
.beat__art--skewers img {
  width: 100%; height: auto;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.beat__art--skewers img:hover { transform: translateY(-5px) rotate(-6deg); }

/* 폴라로이드 */
.beat__art--polaroid {
  background: none; border: 0; padding: 8px;
}
.beat__art--polaroid img {
  width: clamp(200px, 24vw, 296px); height: auto;
  rotate: -3deg;
  filter: drop-shadow(0 14px 30px rgba(92, 79, 58, .28));
  transition: rotate .3s ease, transform .3s ease;
}
.beat__art--polaroid img:hover { rotate: 0deg; transform: translateY(-4px); }

/* 짐 — 노트에 적어 둔 목록 */
.pack__note {
  position: relative;
  max-width: 640px; margin-inline: auto;
  background: #FEF7D1;                    /* surface/note */
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 40px clamp(24px, 4vw, 48px) 36px;
  box-shadow: 0 10px 30px rgba(92, 79, 58, .12);
  rotate: -0.6deg;
}
.pack__tape {
  position: absolute; left: 50%; top: -13px;
  width: 92px; height: 26px;
  translate: -50% 0;
  background: rgba(224, 210, 180, .85);
  border: 1px solid rgba(203, 184, 150, .6);
  border-radius: 2px;
  rotate: -1.5deg;
}
.pack__note h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  text-align: center;
  color: var(--bark);
}
.pack__list {
  margin-top: 22px;
  display: grid; gap: 2px;
}
.pack__list li {
  position: relative;
  padding: 9px 0 9px 22px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--bark);
  border-bottom: 1px solid rgba(224, 210, 180, .6);
}
.pack__list li:last-child { border-bottom: 0; }
.pack__list li::before {
  content: '';
  position: absolute; left: 0; top: 15px;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--ember);
  border: 1.5px solid var(--ember-edge);
}

/* ── 마지막 초대 ───────────────────────────────────────── */
.last {
  position: relative;
  padding: clamp(72px, 11vw, 132px) 0 clamp(64px, 9vw, 104px);
  text-align: center;
  background:
    radial-gradient(72% 58% at 50% 44%, rgba(255, 170, 50, .16), rgba(255, 170, 50, 0) 70%),
    var(--night-0);
}
.last__inner { width: var(--page); margin-inline: auto; }
.last h2 {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.last p {
  margin-top: 14px;
  font-size: clamp(14px, 1.4vw, 17px);
  color: rgba(253, 248, 236, .58);
}
.cta--center { margin-top: 30px; }

/* ── 푸터 ───────────────────────────────────────────────── */
.foot {
  border-top: 1px solid rgba(253, 248, 236, .1);
  background: #071F18;
  padding: 34px 0 44px;
}
.foot__row {
  width: var(--page); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.foot__logo { width: 84px; height: auto; opacity: .9; }
.foot__links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot__links a {
  font-size: 14px; font-weight: 600;
  color: rgba(253, 248, 236, .62);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.foot__links a:hover { color: var(--ember); border-bottom-color: var(--ember); }
.foot__copy {
  width: var(--page); margin: 22px auto 0;
  font-family: var(--fine);
  font-size: 12.5px; font-weight: 500;
  color: rgba(253, 248, 236, .3);
}

/* ── 초대 페이지 (/invite/<token> · /join/<code>) ─────────
   둘은 목적이 다르지만(캠프 이동 vs 가입 리퍼럴) 같은 모닥불로 부르는 링크라
   같은 카드·같은 불을 쓴다. 다른 건 카드 안의 문구와 버튼뿐. */
.invite-page {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(72% 52% at 50% 42%, rgba(255, 170, 50, .16), rgba(255, 170, 50, 0) 70%),
    linear-gradient(180deg, var(--night-0) 0%, #0C3226 60%, var(--night-1) 100%);
}
.invite { width: 100%; max-width: 420px; text-align: center; }
.invite__logo { width: 116px; height: auto; margin: 0 auto 26px; }

.invite__card {
  background: var(--paper);
  color: var(--bark);
  border-radius: 28px;
  padding: 22px 26px 28px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

/* 카드 위쪽의 밤 캠프 창 — 그 안에서 불이 탄다. 만료된 초대는 불이 꺼진다. */
.camp-panel {
  position: relative;
  height: 156px;
  margin-bottom: 22px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--scene-in) 0%, #1A4738 60%, #215141 100%);
}
.camp-panel__camper {
  position: absolute; left: 16%; bottom: 26px;
  width: 62px; height: auto;
  translate: -50% 0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3));
  animation: breathe 4.4s ease-in-out infinite;
}
.firelet {
  position: absolute; left: 50%; bottom: 22px;
  width: 120px; height: 112px;
  translate: -50% 0;
}
.firelet__glow {
  position: absolute; left: 50%; bottom: -30%;
  width: 240%; height: 200%;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 196, 80, .34), rgba(255, 145, 30, .14) 48%, rgba(255, 145, 30, 0) 72%);
  animation: glow 3.1s ease-in-out infinite;
}
.firelet__logs {
  position: absolute; left: 50%; bottom: 0;
  width: 78px; height: auto;
  translate: -50% 0;
}
.firelet__flame {
  position: absolute; left: 50%; bottom: 14px;
  width: 56px; height: 92px;
  translate: -50% 0;
  transform-origin: 50% 94%;
  animation: flicker 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 170, 40, .5));
}
/* 비어 있는 통나무 자리 — 초대받은 사람의 자리. 랜딩의 빈자리처럼 온기가 숨 쉰다. */
.camp-panel__seat {
  position: absolute; right: 9%; bottom: 24px;
  width: 74px;
}
.camp-panel__seat svg { position: relative; width: 100%; height: auto; }
.camp-panel__seat-glow {
  position: absolute; left: 50%; top: 46%;
  width: 150%; height: 150%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 210, 102, .34), rgba(255, 149, 0, .12) 55%, transparent 78%);
  animation: seat-breathe 3.6s ease-in-out infinite;
}

/* 만료된 초대 — 불이 꺼진 캠프 */
.is-out .firelet__flame,
.is-out .firelet__glow,
.is-out .camp-panel__seat-glow,
.is-out .camp-panel__camper { display: none; }
.is-out .camp-panel { background: linear-gradient(180deg, #10281F 0%, #16342A 100%); }
.is-out .firelet__logs,
.is-out .camp-panel__seat svg { filter: grayscale(.55) brightness(.7); }

.invite__card h1 {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.015em;
}
/* 크림 바탕에서 bark-2(#8A795D)는 대비가 3.5:1 로 모자라다 — 본문은 bark 로. */
.invite__card > p {
  margin-top: 10px;
  font-size: 15.5px; line-height: 1.65;
  color: var(--bark);
}
.invite__code {
  margin: 20px auto 0;
  padding: 12px 18px;
  display: inline-block;
  background: var(--card);
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  font-size: 19px; font-weight: 700;
  letter-spacing: .12em;
  color: var(--bark);
  user-select: all;
}
.btn-primary {
  display: block;
  margin-top: 22px;
  padding: 15px;
  background: var(--ember);
  border: 1.5px solid var(--ember-edge);
  border-bottom-width: 3px;
  border-radius: 16px;
  color: var(--bark);
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  transition: transform .16s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(1px); border-bottom-width: 1.5px; }

.btn-secondary {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  background: var(--buttonSecondary, #F5ECD8);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--bark);
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: background .16s ease;
}
.btn-secondary:hover { background: var(--sunken); }

.invite__hint {
  margin-top: 18px;
  font-family: var(--fine);
  font-size: 13.5px; font-weight: 500;
  line-height: 1.6;
  color: #77664B;   /* bark-2 보다 한 단계 진하게 — 작은 글자라 4.5:1 이상 필요 */
}
.invite__card .cta { margin-top: 14px; }
.invite__card .store { box-shadow: none; border-bottom-width: 2px; padding: 9px 16px 9px 14px; }
.invite__card .store__text strong { font-size: 15px; }

.invite__back {
  display: inline-block;
  margin-top: 22px;
  font-size: 14.5px; font-weight: 600;
  color: rgba(253, 248, 236, .85);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(253, 248, 236, .35);
}
.invite__back:hover { color: var(--ember); text-decoration-color: currentColor; }

/* ── 약관·방침 페이지 ───────────────────────────────────── */
.nav--solid {
  position: static;
  padding-top: 20px;
  padding-bottom: 24px;
}
.legal {
  width: min(760px, 100% - 36px);
  margin: 0 auto clamp(56px, 8vw, 88px);
  padding: clamp(34px, 5vw, 64px) clamp(24px, 4.5vw, 60px) clamp(40px, 5vw, 64px);
  background: var(--paper);
  color: var(--bark);
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.legal h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.legal__date {
  margin-top: 8px;
  font-family: var(--fine);
  font-size: 13px; font-weight: 500;
  color: var(--bark-3);
  display: flex; align-items: center; gap: 8px;
}
.legal__lead {
  margin-top: 24px;
  padding-bottom: 26px;
  border-bottom: 1.5px dashed var(--border);
  font-family: var(--fine);
  font-size: 16px; font-weight: 500;
  line-height: 1.8;
  color: var(--bark);
}
.legal h2 {
  margin-top: 38px;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.legal p, .legal li {
  font-family: var(--fine);
  font-size: 15px; font-weight: 500;
  line-height: 1.85;
  color: var(--bark-2);
}
.legal h2 + p, .legal h2 + ul { margin-top: 12px; }
.legal ul { display: grid; gap: 10px; }
/* 불릿은 절대 위치로 — li 를 flex 로 만들면 안에 든 <b> 가 별도 아이템이 돼
   문장이 두 덩이로 쪼개진다(줄바꿈이 어긋난다). */
.legal li {
  position: relative;
  padding-left: 17px;
}
.legal li::before {
  content: '';
  position: absolute; left: 0; top: 0.75em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--border-strong);
}
.legal b { color: var(--bark); font-weight: 700; }
/* 본문 링크(문의 메일 등) — 종이 카드 위 기본 파랑 대신 브랜드 톤으로. */
.legal p a, .legal li a {
  color: var(--bark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}
.legal p a:hover, .legal li a:hover { text-decoration-color: currentColor; }
/* delete-account 의 절차 — 사각 불릿 대신 번호 매긴 원. */
.legal ol.steps { display: grid; gap: 12px; margin-top: 12px; counter-reset: step; }
.legal ol.steps li { position: relative; padding: 3px 0 3px 42px; min-height: 28px; }
.legal ol.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--ember); color: var(--bark);
  font-family: var(--sans);
  font-weight: 700; font-size: 14px;
}
.todo {
  display: inline-block;
  padding: 1px 9px;
  background: #FEF7D1;
  border: 1px dashed var(--ember-edge);
  border-radius: 7px;
  font-family: var(--fine);
  font-size: 13px; font-weight: 700;
  color: #8A6D2B;
}
.legal__back {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1.5px dashed var(--border);
}
.legal__back a {
  font-family: var(--sans);
  font-weight: 600; font-size: 15px;
  color: var(--bark-2);
  text-decoration: none;
}
.legal__back a:hover { color: var(--bark); }

/* ── 챌린지 페이지(/challenge) ──────────────────────────── */
/* 단계 제목만 한 줄을 차지한다 — 문장 중간의 <b> 강조(@focuscamp.app)는 그대로 인라인. */
.challenge .steps .step-title { display: block; margin-bottom: 2px; font-size: 15.5px; }
.challenge .steps > li > span { display: block; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag {
  padding: 6px 12px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-family: var(--fine);
  font-size: 13.5px; font-weight: 700;
  color: var(--bark);
  white-space: nowrap;
  user-select: all;   /* 탭 한 번에 통째로 집히게 — 옮겨 적을 값이다 */
}

/* 리워드 표 — 좁은 화면에서 페이지가 아니라 표 자신이 가로로 밀린다. */
.rewards-wrap { margin-top: 14px; overflow-x: auto; }
.rewards {
  width: 100%; min-width: 320px;
  border-collapse: collapse;
  font-family: var(--fine);
  font-size: 15px;
  text-align: left;
}
.rewards th, .rewards td {
  padding: 13px 16px;
  border-bottom: 1.5px solid var(--border);
}
.rewards thead th {
  background: var(--card);
  font-size: 13.5px; font-weight: 700;
  color: var(--bark-2);
  border-bottom-color: var(--border-strong);
}
.rewards thead th:first-child { border-radius: 12px 0 0 0; }
.rewards thead th:last-child { border-radius: 0 12px 0 0; }
.rewards td { font-weight: 500; color: var(--bark-2); }
.rewards td + td { font-weight: 700; color: var(--bark); }
.rewards tbody tr:last-child { background: #FEF7D1; }   /* 평생 이용권 — 불빛 한 줄 */
.rewards tbody tr:last-child td { border-bottom: 0; }
.rewards tbody tr:last-child td:first-child { border-radius: 0 0 0 12px; }
.rewards tbody tr:last-child td:last-child { border-radius: 0 0 12px 0; }

.mailbox {
  margin-top: 16px;
  padding: 22px 20px;
  background: var(--card);
  border: 1.5px dashed var(--border-strong);
  border-radius: 18px;
  text-align: center;
}
.mailbox .btn-primary {
  display: inline-block;
  margin-top: 0;
  padding: 14px 24px;
  font-family: var(--fine);
  font-size: 15.5px;
  word-break: break-all;   /* 좁은 화면에서 메일 주소가 카드를 밀지 않게 */
}
.legal .mailbox__note { margin-top: 14px; font-size: 13.5px; line-height: 1.7; }

.challenge__end {
  margin-top: 42px;
  padding-top: 32px;
  border-top: 1.5px dashed var(--border);
}
.legal .challenge__end {
  font-family: var(--sans);
  font-size: clamp(17px, 2.1vw, 20px); font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--bark);
}

/* ── 등장 ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ── 좁은 화면 ──────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --page: min(1080px, 100% - 36px); }
  .beat {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 34px 0;
  }
  .beat--flip .beat__art { order: 0; }
  .beat__text { text-align: center; }
  .beat__art { min-height: 0; }
  .beat__art--skewers { grid-template-columns: repeat(6, 1fr); }
  .hero__copy { padding-top: clamp(96px, 13svh, 120px); }
  .scene { min-height: clamp(300px, 42svh, 420px); }
  .nav__brand img { width: 92px; }
}

@media (max-width: 420px) {
  .cta { flex-direction: column; align-items: stretch; }
  .store { justify-content: center; }
  .waitlist__row { flex-direction: column; align-items: stretch; }
  .waitlist__input { width: 100%; }
  .beat__art--skewers { grid-template-columns: repeat(4, 1fr); }
}

/* ── 모션 최소화 ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .embers { display: none; }
}