/* /story/ — 스토리형 사용 설명서
   1인칭 서사 + 실제 모바일 캡처(폰 프레임). 라이트 톤, 서사 최대폭 640px.
   .reveal → .is-in 리빌은 story.js(IntersectionObserver)가 토글. */

.page-story { background: #fbfcfe; }

.story {
  --st-ink: #14213b;
  --st-ink-soft: #4a5670;
  --st-ink-mute: #8b96ab;
  --st-navy: #0b1e3f;
  --st-blue: #2f7fe3;
  --st-line: #e4eaf4;
  --st-quote: #eef4fc;
  color: var(--st-ink);
  overflow-x: hidden;
}

.story__wrap { max-width: 640px; margin: 0 auto; padding: 0 22px; }

/* ---------- 히어로 ---------- */
.story-hero { text-align: center; padding: 92px 0 68px; }
.story-hero__eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em;
  color: var(--st-blue); text-transform: uppercase; margin-bottom: 18px;
}
.story-hero h1 {
  font-size: clamp(1.9rem, 6vw, 2.7rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 16px;
}
.story-hero__sub { color: var(--st-ink-soft); font-size: 1.02rem; line-height: 1.75; }
.story-hero__scroll {
  margin-top: 44px; color: var(--st-ink-mute); font-size: 0.82rem;
  letter-spacing: 0.08em;
}
.story-hero__scroll::after {
  content: ""; display: block; width: 1px; height: 44px;
  background: linear-gradient(var(--st-ink-mute), transparent);
  margin: 12px auto 0;
}

/* ---------- 막 라벨 ---------- */
.story-act { padding: 58px 0 8px; }
.story-act__label {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.2em; color: var(--st-blue);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 5px 14px; margin-bottom: 14px;
}
.story-act h2 {
  font-size: clamp(1.45rem, 4.6vw, 1.9rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.35; margin: 0 0 8px;
}

/* ---------- 서사 ---------- */
.story p.narr { font-size: 1.0rem; line-height: 1.95; color: var(--st-ink-soft); margin: 18px 0; }
.story p.narr strong { color: var(--st-ink); }
.story .quote {
  background: var(--st-quote); border-left: 3px solid var(--st-blue);
  border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 22px 0;
  font-size: 0.98rem; line-height: 1.8; color: var(--st-ink);
}

/* ---------- 폰 프레임 캡처 ---------- */
.shot { margin: 34px auto; text-align: center; }
.shot__frame {
  display: inline-block; width: min(300px, 78vw);
  background: #0d1526; border-radius: 34px; padding: 10px;
  box-shadow: 0 24px 60px -24px rgba(11, 30, 63, 0.45);
}
.shot__frame img {
  display: block; width: 100%; border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.shot figcaption {
  max-width: 420px; margin: 14px auto 0;
  font-size: 0.85rem; line-height: 1.7; color: var(--st-ink-mute);
}
.shot figcaption b { color: var(--st-ink-soft); font-weight: 700; }

/* 두 장 나란히 (before → after) */
.shot-pair { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 34px 0; }
.shot-pair .shot { margin: 0; flex: 0 1 260px; }
.shot-pair .shot__frame { width: 100%; }
.shot-pair .shot__arrow {
  align-self: center; color: var(--st-ink-mute); font-size: 1.3rem; font-weight: 700;
}

/* ---------- 사용법 카드 (설명서 요소) ---------- */
.howto {
  border: 1px solid var(--st-line); border-radius: 14px;
  background: #ffffff; padding: 18px 20px; margin: 26px 0;
}
.howto__title {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--st-blue); margin-bottom: 10px;
}
.howto ol { margin: 0; padding-left: 20px; }
.howto li { font-size: 0.93rem; line-height: 1.85; color: var(--st-ink-soft); }
.howto li b { color: var(--st-ink); }

/* ---------- 에필로그 페르소나 ---------- */
.story-personas { display: grid; gap: 12px; margin: 30px 0; }
.persona {
  border: 1px solid var(--st-line); border-left: 3px solid var(--st-blue);
  border-radius: 12px; background: #fff; padding: 16px 18px;
}
.persona__who { font-size: 0.8rem; font-weight: 700; color: var(--st-blue); margin-bottom: 6px; }
.persona__line { font-size: 0.94rem; line-height: 1.75; color: var(--st-ink-soft); }

/* ---------- CTA ---------- */
.story-cta {
  text-align: center; background: var(--st-navy); color: #fff;
  border-radius: 20px; padding: 46px 26px; margin: 60px 0 90px;
}
.story-cta h2 { font-size: clamp(1.35rem, 4.4vw, 1.7rem); font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; }
.story-cta p { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; line-height: 1.75; margin: 0 0 26px; }
.story-cta__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.story-cta__btns a {
  display: inline-block; padding: 13px 28px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.story-cta__primary { background: #fff; color: var(--st-navy); }
.story-cta__ghost { border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; }

/* ---------- 리빌 ---------- */
.story-anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }
.story-anim .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .story-anim .reveal { opacity: 1; transform: none; transition: none; }
}