/* Otchi 소개 사이트. 색·간격·타이포·반경은 tokens.css(앱 정본)에서 온다.
   DESIGN.md 규율: 흰 바탕 · 1px 괘선(그림자 X) · 반경 8/28만 · 액센트는 마침표와 시그니처 링에만.
   움직임은 스토리 스테이지 하나. 그 밖의 장식은 전부 뺐다. */

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

:root {
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI",
          system-ui, "Noto Sans KR", Roboto, sans-serif;
  --display: clamp(40px, 7.4vw, 96px);
  --title:   clamp(24px, 2.6vw, 32px);
  --lead:    clamp(17px, 1.7vw, 20px);
  --page: 1080px;
  --stage-w: 300px;
  --stage-h: 652px;   /* 스크린샷 720×1565 비율 */
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-body-lg);
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--concrete); }
a:hover { text-decoration-color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-block); }
.dot { color: var(--accent); }

/* ── header ─────────────────────────────────────────────── */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-block); padding: var(--space-block) 0; }
.brand { font-size: 24px; font-weight: 600; color: var(--text); text-decoration: none; }
.nav { display: flex; align-items: center; gap: var(--space-section); font-size: var(--text-body); }
.nav a { color: var(--text-secondary); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav .lang { border: 1px solid var(--border-emphasis); border-radius: var(--radius-pill); padding: 0 14px; min-height: 32px; color: var(--text); }

/* ── 스토리 (히어로 = 스테이지) ─────────────────────────── */
.story { display: grid; grid-template-columns: minmax(0, 1fr) var(--stage-w); gap: var(--space-48); padding-top: clamp(24px, 4vw, 56px); }
.chapters { display: flex; flex-direction: column; }
.chapter { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.chapter:first-child { min-height: 70vh; justify-content: flex-start; padding-top: clamp(8px, 4vh, 48px); }

h1 {
  margin: 0 0 var(--space-section);
  font-size: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02;
  word-break: keep-all; text-wrap: balance;
}
.lead { margin: 0; font-size: var(--lead); color: var(--text-secondary); max-width: 44ch; word-break: keep-all; text-wrap: pretty; }
.lead strong { color: var(--text); font-weight: 600; }

.chapter h2 { margin: 0 0 var(--space-group); font-size: var(--title); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; word-break: keep-all; }
.chapter p { margin: 0; color: var(--text-secondary); max-width: 40ch; word-break: keep-all; text-wrap: pretty; }
.chapter p + p { margin-top: var(--space-related); }

.cta { display: flex; align-items: center; gap: var(--space-block); flex-wrap: wrap; margin: var(--space-section) 0 0; }
.pill-outline, .pill-primary {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px;
  border-radius: var(--radius-pill); font-size: var(--text-body-lg); font-weight: 600; text-decoration: none;
}
.pill-outline { border: 1px solid var(--border-emphasis); color: var(--text); }
/* 링크가 생기면 이걸로 교체 — 페이지 유일의 액센트 면이 된다 */
.pill-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--elevation-brand-glow); }
.cta-note { font-size: var(--text-body); color: var(--text-secondary); }

/* 스테이지 — 폰 비율 프레임. JS는 [data-step]만 바꾼다. */
.stage-wrap { position: sticky; top: 6vh; height: 88vh; display: flex; align-items: center; }
.stage { position: relative; width: var(--stage-w); height: var(--stage-h); }

.frame { position: absolute; inset: 0; border: 1px solid var(--list-border); border-radius: var(--radius-card); opacity: 0; transition: opacity .4s ease-out .3s; overflow: hidden; }
.frame .mark { position: absolute; top: 18px; left: 18px; font-size: var(--text-body-lg); font-weight: 600; }
.frame .real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease-out .25s; }

.card {
  position: absolute; left: 50%; top: 50%; width: 130px; height: 96px; margin: -48px 0 0 -65px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden;
  opacity: 0; transform: scale(.9);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .45s ease-out;
}
.card .thumb { height: 54px; background: var(--surface-muted); }
.card .label { padding: 9px 10px 0; font-size: var(--text-body-sm); letter-spacing: -0.031em; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2 { transition-delay: 40ms; } .c3 { transition-delay: 80ms; } .c4 { transition-delay: 120ms; } .c5 { transition-delay: 160ms; } .c6 { transition-delay: 200ms; }
.ring { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; pointer-events: none; }

/* 1 · 묻는다 — 앱마다 다른 서랍 */
[data-step="1"] .c1 { opacity: 1; transform: translate(-72px, -230px) rotate(-5deg); }
[data-step="1"] .c2 { opacity: 1; transform: translate(70px, -180px) rotate(4deg); }
[data-step="1"] .c3 { opacity: 1; transform: translate(-64px, -50px) rotate(3deg); }
[data-step="1"] .c4 { opacity: 1; transform: translate(74px, 10px) rotate(-6deg); }
[data-step="1"] .c5 { opacity: 1; transform: translate(-76px, 150px) rotate(6deg); }
[data-step="1"] .c6 { opacity: 1; transform: translate(66px, 230px) rotate(-3deg); }
/* 2 · 잊는다 — 멀어지고 흐려진다 */
[data-step="2"] .c1 { opacity: .3; transform: translate(-110px, -280px) rotate(-12deg) scale(.88); }
[data-step="2"] .c2 { opacity: .3; transform: translate(108px, -230px) rotate(10deg) scale(.88); }
[data-step="2"] .c3 { opacity: .3; transform: translate(-112px, -60px) rotate(8deg) scale(.88); }
[data-step="2"] .c4 { opacity: .3; transform: translate(114px, 30px) rotate(-11deg) scale(.88); }
[data-step="2"] .c5 { opacity: .3; transform: translate(-112px, 200px) rotate(13deg) scale(.88); }
[data-step="2"] .c6 { opacity: .3; transform: translate(106px, 285px) rotate(-8deg) scale(.88); }
/* 3 · 다시 파낸다 — 한 서랍에 2열 */
[data-step="3"] .frame, [data-step="4"] .frame { opacity: 1; }
[data-step="3"] .c1 { opacity: 1; transform: translate(-70px, -130px); }
[data-step="3"] .c2 { opacity: 1; transform: translate(70px, -130px); }
[data-step="3"] .c3 { opacity: 1; transform: translate(-70px, -10px); }
[data-step="3"] .c4 { opacity: 1; transform: translate(70px, -10px); }
[data-step="3"] .c5 { opacity: 1; transform: translate(-70px, 110px); }
[data-step="3"] .c6 { opacity: 1; transform: translate(70px, 110px); }
[data-step="3"] .ring { animation: ring .5s ease-out .55s 1; }
@keyframes ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(12); } }
/* 4 · 실제 화면 — 카드가 물러나고 홈 스크린샷이 프레임을 채운다 */
[data-step="4"] .card { opacity: 0; transform: scale(.96); }
[data-step="4"] .frame .mark { opacity: 0; }
[data-step="4"] .frame .real { opacity: 1; }

/* ── 스크린샷 스트립 (App Store 관용) ──────────────────── */
.strip { border-top: 1px solid var(--border); padding: clamp(40px, 6vw, 80px) 0; }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-chapter); }
.strip img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); margin-bottom: var(--space-block); }
.strip h2 { margin: 0 0 var(--space-related); font-size: var(--text-body-lg); font-weight: 600; }
.strip p { margin: 0; color: var(--text-secondary); font-size: var(--text-body); word-break: keep-all; text-wrap: pretty; }

/* ── 조용한 문단 섹션 ───────────────────────────────────── */
.plain { border-top: 1px solid var(--border); padding: clamp(40px, 6vw, 80px) 0; }
.plain h2 { margin: 0 0 var(--space-block); font-size: var(--title); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; max-width: 24ch; word-break: keep-all; text-wrap: balance; }
.plain p { margin: 0; color: var(--text-secondary); max-width: 62ch; word-break: keep-all; text-wrap: pretty; }
.plain p + p { margin-top: var(--space-group); }
.plain p strong { color: var(--text); font-weight: 600; }

/* ── 문서형 페이지 (지원 / 개인정보) ────────────────────── */
.doc { padding: var(--space-chapter) 0 clamp(48px, 8vw, 96px); border-top: 1px solid var(--border); }
.doc h1 { font-size: var(--title); letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 var(--space-related); }
.doc .updated { color: var(--text-secondary); font-size: var(--text-body); margin: 0 0 var(--space-chapter); }
.doc h2 { font-size: var(--text-title); font-weight: 600; margin: var(--space-chapter) 0 var(--space-block); }
.doc h3 { font-size: var(--text-body-lg); font-weight: 600; margin: var(--space-section) 0 var(--space-related); }
.doc p, .doc ul, .doc ol, .doc dl { max-width: 66ch; word-break: keep-all; }
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li { margin-bottom: var(--space-related); }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--text-body); margin: var(--space-block) 0; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--border); padding: var(--space-related) var(--space-group); text-align: left; vertical-align: top; }
.doc th { background: var(--surface-muted); font-weight: 600; }
.doc dt { font-weight: 600; margin-top: var(--space-section); }
.doc dd { margin: var(--space-related) 0 0; color: var(--text-secondary); }
.doc code { font-size: 0.9em; }

/* 배포 전 채워야 하는 자리 — 눈에 띄어야 남겨두고 배포하는 사고를 막는다. */
.todo { background: var(--destructive); color: var(--pure-white); border-radius: 4px; padding: 2px 8px; font-size: var(--text-body-sm); font-weight: 600; letter-spacing: -0.031em; }

/* ── footer ─────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--border); padding: var(--space-chapter) 0; font-size: var(--text-body); color: var(--text-secondary); }
.site-foot .colophon { margin: 0 0 var(--space-section); max-width: 60ch; word-break: keep-all; }
.site-foot .row { display: flex; flex-wrap: wrap; gap: var(--space-block); justify-content: space-between; align-items: center; }
.site-foot p { margin: 0; }
.site-foot nav { display: flex; gap: var(--space-section); flex-wrap: wrap; }
.site-foot a { color: var(--text-secondary); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.site-foot a:hover { color: var(--text); }

/* ── 좁은 화면 ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .stage-wrap { position: sticky; top: 0; height: 48vh; justify-content: center; z-index: 1; background: var(--canvas); }
  .stage { transform: scale(.52); transform-origin: center; }
  .chapters { order: 1; }
  .chapter { min-height: 50vh; justify-content: flex-start; padding-top: var(--space-section); }
  .chapter:first-child { min-height: 50vh; padding-top: var(--space-section); }
  .strip ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-block); margin: 0 calc(-1 * var(--space-block)); padding: 0 var(--space-block); -webkit-overflow-scrolling: touch; }
  .strip li { flex: 0 0 78%; scroll-snap-align: start; }
  .nav { gap: var(--space-block); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .frame, .frame .real { transition: none; }
  [data-step="3"] .ring { animation: none; }
}