/* ===== 디자인 토큰 + 미감 폴리시 (design.md 기반) =====
   main.css 뒤에 로드. 토큰은 추가만 하고, 폴리시는 은은한 감속 모션 + 단일 액센트 안에서만. */
:root {
  /* Radius — Shape Lock (단일 시스템) */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;
  /* Spacing (8px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px;
  /* Shadow (3단) */
  --shadow-sm: 0 2px 18px rgba(27,25,22,0.04);
  --shadow-md: 0 10px 30px rgba(217,72,43,0.09);
  --shadow-lg: 0 24px 60px rgba(27,25,22,0.16);
  /* Motion */
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; --dur-reveal: 700ms;
  --stagger: 80ms;
}

/* P0-4 택타일 :active — 물리적 눌림 (터치·클릭 공통) */
.btn:active,
.ai-btn:active,
.choices button:active,
.suggest-list button:active,
.step-card:active,
.regen-btn:active,
.reading-mail button:active,
.summary-actions button:active {
  transform: translateY(1px) scale(0.99);
}

/* P0-3 스텝 전환 — 안전한 keyframes(끝 상태=자연 상태라 콘텐츠가 안 보이는 사고 없음).
   step-in 클래스는 스텝 이동(scrollTop) 때만 잠깐 붙었다 떨어진다. */
#stepBody.step-in { animation: stepIn var(--dur-base) var(--ease-out); }
#stepBody.step-in .suggest-list button,
#stepBody.step-in .choices:not(.chips) button {
  animation: riseIn var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* P0-2 AI 로딩 스켈레톤 — 최종 카드 모양 + shimmer (제네릭 스피너 금지) */
.sk-wrap { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.sk { position: relative; overflow: hidden; background: var(--bg-2, #efece5); border-radius: var(--r-md, 14px); }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-line { height: 14px; }
.sk-kw { height: 46px; width: 58%; margin: 8px 0 4px; }
.sk-map { height: 200px; border-radius: var(--r-lg, 18px); }
.sk-box { height: 150px; border-radius: var(--r-lg, 18px); }
.loading-say { color: var(--ink-dim); font-size: 14px; margin-top: 10px; }

/* P1-1 리딩 결과 리빌 시퀀스 — 블록 순차 등장 + 키워드 blur→선명.
   animation both라 미실행 시 자연 상태(보임)로 안전. */
.reading.reveal-seq > * {
  animation: riseIn var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
.reading.reveal-seq .reading-kw { animation: kwReveal var(--dur-reveal) var(--ease-out) both; }
@keyframes kwReveal {
  from { opacity: 0; filter: blur(10px); transform: scale(0.96); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #stepBody.step-in,
  #stepBody.step-in .suggest-list button,
  #stepBody.step-in .choices button,
  .reading.reveal-seq > *,
  .reading.reveal-seq .reading-kw { animation: none; }
  .sk::after { animation: none; }
  .btn:active, .ai-btn:active, .choices button:active,
  .suggest-list button:active, .step-card:active { transform: none; }
}

/* ===== 랜딩 미감 업그레이드 (main.css override, 리서치 기반) ===== */
/* 1) 거대 유령 숫자(01~05) → 작고 선명한 에디토리얼 폴리오 (AI 티 패턴 제거) */
.section[data-num]::before {
  font-size: clamp(22px, 2.2vw, 34px);
  top: 60px; right: 6%;
  color: var(--accent); opacity: 0.32;
  letter-spacing: 0.02em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (max-width: 720px) { .section[data-num]::before { top: 40px; right: 6%; font-size: 22px; } }

/* 2) 헤드라인 leading 타이트하게 (에디토리얼 무게감) */
.hero h1 { line-height: 1.06; letter-spacing: -0.045em; }
.section h2 { line-height: 1.14; letter-spacing: -0.035em; }
.section-lead { font-size: 17.5px; max-width: 62ch; }

/* 3) 이력 = 안 읽히던 미니 텍스트 → 읽히는 신뢰 배지 */
.hero-ledger {
  display: block; width: fit-content; margin: 24px auto 0;
  border: 1px solid var(--line-strong, rgba(27,25,22,0.22));
  border-radius: var(--r-pill, 999px);
  padding: 9px 20px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}
.hero-ledger i { color: var(--accent); }
@media (max-width: 480px) { .hero-ledger { border: none; padding: 0; font-size: 12px; color: var(--ink-dim); } }

/* 4) 카드 — 라디우스/그림자 토큰 통일 + hover 생동 */
.step-card {
  border-radius: var(--r-lg, 18px);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.loop-step { border-radius: var(--r-lg, 18px); }

/* 5) 섹션 명암 교차 — 02·04를 진짜 다크 블록으로 (편집 디자인 리듬, 액센트 강조) */
.section h2 { font-size: clamp(30px, 5vw, 52px); }
.section-dark { background: #1b1916; }
.section-dark .eyebrow { color: #ff8163; }
.section-dark .eyebrow::after { background: rgba(255,129,99,0.5); }
.section-dark h2 { color: #f6f1e9; }
.section-dark .section-lead { color: rgba(246,241,233,0.66); }
.section-dark .section-close { color: #f6f1e9; }
.section-dark .section-close strong { color: #ff8163; }
.section-dark[data-num]::before { color: #ff8163; opacity: 0.20; }
.section-dark .loop-arrow { color: rgba(246,241,233,0.5); }
.section-dark .loop-num { background: #f6f1e9; color: #1b1916; }
.section-dark .loop-return { color: rgba(246,241,233,0.82); border-color: rgba(255,129,99,0.5); background: rgba(255,129,99,0.08); }
.section-dark .loop-return b { color: #ff8163; }

/* ===== 모바일 로버스트니스 (전 기종: URL바·노치·개미 원 텍스트) ===== */
.hero-sticky { height: 100svh; }                 /* URL바 떠도 히어로 안 잘림 (svh) */
.nav { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
@supports (padding: max(0px)) {
  .container, .nav-inner { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
}
@media (max-width: 640px) {
  .loop-caption-flow { font-size: 13.5px; line-height: 1.35; }
  .loop-caption-sub { font-size: 11.5px; margin-top: 8px; line-height: 1.5; }
}

/* ===== 소셜 로그인 버튼 (admin 전용으로만 남음) ===== */
.gate-oauth { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.gate-kakao, .gate-google {
  width: 100%; padding: 13px 18px; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: transform .15s, box-shadow .2s;
}
.gate-kakao:active, .gate-google:active { transform: translateY(1px); }
.gate-kakao { background: #FEE500; color: #191600; border: none; }
.gate-kakao:hover { box-shadow: 0 6px 20px rgba(254,229,0,0.4); }
.gate-google { background: #fff; color: #1b1916; border: 1px solid rgba(27,25,22,0.2); }
.gate-google:hover { border-color: rgba(27,25,22,0.4); }
.gate-or {
  text-align: center; font-size: 12.5px; color: var(--ink-dim);
  margin: 14px 0 10px; position: relative;
}
.gate-or::before, .gate-or::after {
  content: ""; position: absolute; top: 50%; width: 32%; height: 1px; background: var(--line);
}
.gate-or::before { left: 0; } .gate-or::after { right: 0; }

/* ===== 개미 카드 공유 모달 ===== */
.share-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.share-modal .sm-backdrop { position: absolute; inset: 0; background: rgba(24, 21, 18, 0.72); }
.share-modal .sm-box {
  position: relative; max-width: 340px; width: 100%;
  background: var(--card); border-radius: 18px; padding: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; gap: 12px;
}
.share-modal .sm-img { width: 100%; border-radius: 12px; display: block; border: 1px solid var(--line); }
.share-modal .sm-actions { display: flex; flex-direction: column; gap: 8px; }
.share-modal .sm-actions .btn, .share-modal .sm-actions .btn-ghost { width: 100%; }
.share-modal .sm-close {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-dim); font-size: 13px; text-decoration: underline; font-family: inherit;
  padding: 2px;
}

/* ===== 메일 폼 (위저드 게이트 + 개미굴 글 끝) ===== */
.read-mailform { display: flex; gap: 10px; margin-top: 16px; }
.read-mailform input {
  flex: 1; min-width: 0;
  padding: 13px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink);
}
.read-mailform input:focus { outline: none; border-color: var(--accent); }
.read-mailform button {
  padding: 13px 20px; font-size: 15px; font-weight: 800; font-family: inherit;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #fff; white-space: nowrap;
  transition: transform .15s;
}
.read-mailform button:active { transform: translateY(1px); }
.read-mailform button:disabled { opacity: .75; cursor: default; transform: none; }
@media (max-width: 480px) {
  .read-mailform { flex-direction: column; }
}