/* ============================================================
   lapt-stage.css: 무대(소개 화면)의 뼈대

   일곱 서비스의 소개 화면이 이 파일 하나로 같은 문법을 쓴다.
   lapt.css · lapt-shell.css 다음, 서비스 CSS 앞에 읽는다.

   한 화면에 들어갈 것 (DESIGN.md §3)
     .st-hero    이름 · 한 문장 · 로그인 · 실제 부품의 시연
     .st-rate    크레딧 차감 기준표
     .st-steps   사용 순서 3–5단계
     .st-notes   알아 둘 것
     .st-close   마무리 (로그인 한 번 더)
   섹션마다 다른 형식을 쓴다. 같은 모양이 되풀이되면 읽는 사람이 멈춘다.
   ============================================================ */

html:has(body.stage) { scroll-padding-top: calc(var(--bar-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(body.stage) { scroll-behavior: smooth; }
}

body.stage { font-size: 16px; }

.st {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ── 첫 화면 ─────────────────────────────────────────────── */
/* 글은 왼쪽, 시연은 오른쪽. 제목 두 줄, 소개 두 문장, 단추 둘. 그 이상 싣지 않는다. */

.st-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  min-height: min(100svh, 860px);
  padding: calc(var(--bar-h) + clamp(32px, 7vh, 88px)) 0 clamp(48px, 8vh, 88px);
}
.st-hero--solo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* 제목이 긴 서비스: 글 칸을 넓히고 제목을 한 단계 줄여 두 줄에 담는다. */
.st-hero--long { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.st-hero--long .st-hero__copy { max-width: 680px; }
.st-hero--long .st-hero__title { font-size: clamp(34px, 4.2vw, 56px); }
/* 주의 · 긴급 공지 띠가 헤더 아래에 떠 있으면 그만큼 내려 선다. 제목이 띠에 덮이면 안 된다. */
body.stage:has(.gnb--stage + .ann-bar:not([hidden])) .st-hero {
  padding-top: calc(var(--bar-h) + 44px + clamp(28px, 6vh, 80px));
}
.st-hero__copy { min-width: 0; max-width: 620px; }
.st-hero__title {
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.12;
  letter-spacing: -.032em;
}
.st-hero__lede {
  max-width: 34em;
  margin-top: 20px;
  font-size: clamp(16.5px, 1.5vw, 18.5px);
  line-height: 1.65;
  color: var(--mute-2);
}
.st-hero__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.st-hero__note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: 13.5px; color: var(--mute);
}
.st-hero__note .lapt-ico svg { width: 16px; height: 16px; }

/* 시연: 실제 부품의 축소판을 담는 면. 가짜 화면이 아니라 그 서비스의 부품이다. */
.st-demo {
  position: relative;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.8);
}
.st-demo__tag { position: absolute; top: 14px; right: 14px; }
.st-demo__cap { margin-top: 12px; font-size: 13px; color: var(--mute); }

/* 첫 화면의 글은 한 번만 떠오른다. 이미 보이는 자리에서 짧게. */
@media (prefers-reduced-motion: no-preference) {
  .st-hero__copy > * { animation: st-rise 640ms var(--ease-out) both; }
  .st-hero__copy > :nth-child(2) { animation-delay: 60ms; }
  .st-hero__copy > :nth-child(3) { animation-delay: 120ms; }
  .st-hero__copy > :nth-child(4) { animation-delay: 170ms; }
  .st-hero .st-demo { animation: st-rise 760ms var(--ease-out) 140ms both; }
}
@keyframes st-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── 섹션 ────────────────────────────────────────────────── */

.st-sec {
  padding: var(--stack) 0;
  border-top: 1px solid var(--line-soft);
}
.st-sec__head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.st-sec__title {
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -.03em;
}
.st-sec__lede { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--mute-2); max-width: 36em; }

/* 두 칸: 글과 부품이 나란히 선다 (좁으면 쌓인다) */
.st-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.st-split .st-sec__head { margin-bottom: 0; }
.st-split--top { align-items: start; }
.st-split--top .st-sec__head { margin-bottom: clamp(20px, 3vw, 32px); }

/* ── 크레딧 차감 기준표 ──────────────────────────────────── */
/* 돈에 관한 숫자라 차감량만 라임이다. 없음은 회색으로. */

.st-rate {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  font-size: 15.5px;
}
.st-rate caption { caption-side: bottom; padding-top: 14px; text-align: left; font-size: 13.5px; color: var(--mute); line-height: 1.6; }
.st-rate th, .st-rate td {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: left; vertical-align: baseline;
}
.st-rate thead th { padding-top: 0; font-size: 13px; font-weight: 500; color: var(--mute); }
.st-rate td { font-weight: 500; }
.st-rate td small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--mute); }
.st-rate .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 16px; }
.st-rate td.n { font-size: 17px; font-weight: 650; color: var(--credit); letter-spacing: -.01em; }
.st-rate td.n.is-free { color: var(--mute-2); font-weight: 500; font-size: 15.5px; }
.st-rate td.n small { display: inline; margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--mute); }

/* ── 사용 순서 ───────────────────────────────────────────── */
/* 차례가 곧 정보라서 번호를 쓴다. 넓으면 가로로, 좁으면 세로로 잇는다. */

.st-steps {
  counter-reset: st-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 28px 24px;
}
.st-steps > li {
  counter-increment: st-step;
  position: relative;
  padding-top: 52px;
}
.st-steps > li::before {
  content: counter(st-step);
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* 번호를 잇는 선 */
.st-steps > li::after {
  content: ""; position: absolute; top: 17px; left: 46px; right: -12px;
  height: 1px; background: var(--line);
}
.st-steps > li:last-child::after { display: none; }
.st-steps h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.015em; line-height: 1.45; }
.st-steps p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--mute-2); }
.st-steps b, .st-notes b { color: var(--text); font-weight: 600; }

/* ── 알아 둘 것 ──────────────────────────────────────────── */
/* 두 칸의 정의 목록. 카드 없이 위 괘선 하나로 묶는다. */

.st-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}
.st-notes > div { padding: 20px 0 22px; border-top: 1px solid var(--line-soft); }
.st-notes dt { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.st-notes dd { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--mute-2); }
.st-notes--one { grid-template-columns: minmax(0, 1fr); }

/* ── 큰 문장 목록 ────────────────────────────────────────── */
/* 규칙 몇 개를 카드 대신 굵은 문장으로 세운다. */

.st-claims { display: flex; flex-direction: column; }
.st-claims > li {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px clamp(24px, 4vw, 64px);
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
}
.st-claims > li:last-child { border-bottom: 1px solid var(--line-soft); }
.st-claims h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }
.st-claims p { font-size: 15.5px; line-height: 1.7; color: var(--mute-2); max-width: 38em; }

/* ── 마무리 ──────────────────────────────────────────────── */

.st-close {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px;
  flex-wrap: wrap;
  margin: var(--stack) 0;
  padding: clamp(28px, 5vw, 56px);
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.st-close__title { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.25; }
.st-close__sub { margin-top: 8px; font-size: 15px; color: var(--mute-2); max-width: 36em; }
.st-close__act { display: flex; flex-wrap: wrap; gap: 10px; }

.st-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--gut) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--mute);
}
.st-foot a { color: var(--mute-2); text-decoration: underline; text-decoration-color: var(--line-hard); text-underline-offset: 3px; }
.st-foot a:hover { color: var(--text); }
/* 상표 고지: 바닥글의 마지막 줄을 한 줄 전부 쓴다 (lapt-stage.js가 없으면 단다). */
.st-foot__tm { flex-basis: 100%; font-size: 12.5px; line-height: 1.6; color: var(--mute); }
/* 바닥글의 링크 묶음: 약관 · 정책 · 문의. 좁으면 여러 줄로 감긴다. */
.st-foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ── 섹션 등장 ───────────────────────────────────────────── */
/* 화면에 들어올 때 한 번, 짧게 떠오른다. lapt-stage.js가 html에 st-js를
   붙인 뒤에만 숨긴다. 스크립트가 없으면 처음부터 보인다. */

@media (prefers-reduced-motion: no-preference) {
  .st-js [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity 560ms var(--ease-out), transform 640ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .st-js [data-reveal].is-in { opacity: 1; transform: none; }

  /* 시연의 한 줄씩 (lapt-stage.js의 data-seq). 자리는 미리 잡아 두어 아래가 밀리지 않는다. */
  [data-seq] { transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out); }
  [data-seq].is-waiting { opacity: 0; transform: translateY(-6px); }
}

/* ── 좁은 화면 ───────────────────────────────────────────── */

@media (max-width: 900px) {
  .st-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px; }
  .st-hero__copy { max-width: none; }
  .st-split { grid-template-columns: minmax(0, 1fr); }
  .st-claims > li { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
}

@media (max-width: 640px) {
  /* 세로로 잇는다: 번호 옆에 글을 두고, 선은 아래로 흐른다. */
  .st-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st-steps > li { padding: 0 0 26px 52px; min-height: 60px; }
  .st-steps > li::after { top: 40px; bottom: 4px; left: 17px; right: auto; width: 1px; height: auto; }
  .st-steps > li:last-child { padding-bottom: 0; }
  .st-steps h3 { padding-top: 5px; }
  .st-hero__act .btn { flex: 1 1 auto; }
  .st-close { padding: 24px; }
  .st-close__act, .st-close__act .btn { width: 100%; }
}

/* 가로로 눕힌 휴대폰: 첫 화면의 높이를 강요하지 않는다 */
@media (max-height: 520px) and (orientation: landscape) {
  .st-hero { min-height: 0; padding-top: calc(var(--bar-h) + 24px); }
}