/* ============================================================
   stage.css: 랩트의 공개 화면에만 있는 것

   뼈대는 lapt-stage.css가 맡는다. 여기에는 랩트 소개 · 요금 · 체험 · 기록 ·
   가이드 화면의 부품만 있다.
     .room       첫 화면의 시연: 카카오톡 방 한 칸과 공지 시각
     .plans      요금 요약: 크레딧 · 매크로 패스 · 통합 패스 (카드가 아니라 줄)
     .faq        자주 묻는 질문 (details)
     .invite-bar 초대 링크로 들어온 사람의 띠
     .calc       요금 계산기
     .demo-*     체험 화면
     .log        업데이트 기록
     .doc        가이드 · 정책 · 약관의 긴 글
   ============================================================ */

:root {
  --accent:      #eceef2;
  --accent-dim:  #b4b8c1;
  --accent-wash: rgba(236,238,242,.06);
}

.st-sec__act { margin-top: 20px; }

/* 홈의 첫 화면: 제목이 길어 글 칸을 넓히고 한 단계 줄여 두 줄에 담는다. */
@media (min-width: 901px) {
  .st-hero--home { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}
.st-hero--home .st-hero__copy { max-width: 780px; }
.st-hero--home .st-hero__title { font-size: clamp(32px, 3.6vw, 50px); }

/* ── 초대 띠 ─────────────────────────────────────────────── */
/* 고정 헤더 바로 아래, 흐름 안에 선다. 떠 있지 않으므로 몇 줄로 감겨도 제목을 덮지 않는다.
   초대받았다는 사실과 받을 크레딧 하나만 말한다. */

.invite-bar {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: var(--bar-h);
  padding: 12px var(--gut);
  background: var(--ink-2);
  border-bottom: 1px solid var(--credit-line);
  font-size: 14px; line-height: 1.55; color: var(--mute-2);
}
.invite-bar__text b { color: var(--text); font-weight: 600; }
.invite-bar__text b.num { color: var(--credit); }
body.stage:has(.invite-bar:not([hidden])) .st-hero { padding-top: clamp(28px, 6vh, 72px); }

/* ── 첫 화면 시연: 카카오톡 방 한 칸 ─────────────────────── */

.room__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-right: 56px;
  border-bottom: 1px solid var(--line-soft);
}
.room__name { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.room__meta { font-size: 13px; color: var(--mute); }

.room__chat { display: flex; flex-direction: column; gap: 12px; padding: 18px 0 6px; }
.room__msg { max-width: 86%; }
.room__msg b { display: block; font-size: 12.5px; font-weight: 500; color: var(--mute); margin-bottom: 4px; }
.room__msg p {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 4px 14px 14px 14px;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  font-size: 14.5px; line-height: 1.55;
}
.room__msg--mine { align-self: flex-end; text-align: right; }
.room__msg--mine p {
  border-radius: 14px 4px 14px 14px;
  background: var(--ink-4);
  border-color: var(--line);
  text-align: left;
}
.room__by { display: block; margin-top: 6px; font-size: 12px; color: var(--mute); }

.room__line { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.room__line-k { font-size: 12.5px; color: var(--mute); }
.room__ticks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.room__ticks li { display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 600; }
.room__ticks small {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 500; color: var(--mute-2);
}

/* ── 요금 요약: 세 줄 ────────────────────────────────────── */
/* 같은 크기의 카드 세 장 대신 줄로 세운다. 원화는 크게, 크레딧은 작게 라임으로. */

.plans { border-top: 1px solid var(--line-soft); }
.plans__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}
.plans__what h3 { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.plans__what p { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--mute-2); max-width: 40em; }
.plans__price {
  text-align: right; white-space: nowrap;
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.plans__price small {
  display: block; margin-top: 2px;
  font-size: 13px; font-weight: 500; letter-spacing: 0;
  color: var(--credit);
}
.st-rate--home { margin-top: 40px; }
.price-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ── 처음 만든 곳 ─────────────────────────────────────────── */

.origin { border-top: 1px solid var(--line-soft); }
.origin li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.origin time { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.origin b { font-size: 15.5px; font-weight: 600; }
.origin p { margin-top: 4px; font-size: 14px; color: var(--mute-2); line-height: 1.6; }

/* ── 자주 묻는 질문 ──────────────────────────────────────── */

.faq { max-width: 820px; border-top: 1px solid var(--line-soft); }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 0;
  font-size: 16px; font-weight: 600; letter-spacing: -.015em;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex-shrink: 0;
  width: 10px; height: 10px; margin-right: 4px;
  border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq__item p { padding: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--mute-2); max-width: 46em; }
.faq__more { margin-top: 20px; font-size: 14.5px; }

/* ── 공개 화면의 머리 (요금 · 체험 · 기록 · 정책) ─────────── */
/* 첫 화면이 아닌 공개 화면은 큰 시연 없이 제목과 한 문단으로 연다. */

.pg-head {
  max-width: 760px;
  padding: calc(var(--bar-h) + clamp(40px, 8vh, 88px)) 0 clamp(28px, 4vw, 44px);
}
.pg-head__title { font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.pg-head__lede { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--mute-2); }
.pg-head .notice { margin-top: 20px; }

/* ── 요금 계산기 ─────────────────────────────────────────── */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.calc__form {
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.calc__group + .calc__group { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.calc__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; font-weight: 600; }
.calc__value { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.calc__hint { margin-top: 6px; font-size: 13px; color: var(--mute); line-height: 1.55; }
.calc input[type="range"] { width: 100%; margin-top: 12px; accent-color: var(--text); height: 28px; }
.calc .seg { margin-top: 12px; flex-wrap: wrap; }
.calc .check { min-height: 40px; font-size: 14.5px; }
.calc .check small { color: var(--mute); font-size: 13px; }

.calc__result {
  position: sticky; top: calc(var(--bar-h) + 16px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.calc__rows { border-top: 1px solid var(--line-soft); margin-top: 16px; }
.calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.calc__row dt { font-size: 14.5px; color: var(--mute-2); }
.calc__row dt small { display: block; font-size: 12.5px; color: var(--mute); }
.calc__row dd { text-align: right; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc__row dd small { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--credit); }
.calc__row.is-best dt { color: var(--text); font-weight: 600; }
.calc__pick { margin-top: 18px; font-size: 15px; line-height: 1.6; }
.calc__pick b { font-weight: 650; }
.calc__result .btn { margin-top: 16px; }
.calc__formula { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--mute); }

/* 요금 표 (패키지 · 패스) */
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.price-table caption { caption-side: bottom; padding-top: 12px; text-align: left; font-size: 13.5px; color: var(--mute); line-height: 1.6; }
.price-table th, .price-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: baseline; }
.price-table thead th { font-size: 13px; font-weight: 500; color: var(--mute); }
.price-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table td.c { color: var(--credit); font-weight: 600; }
.price-table td small { display: block; font-size: 13px; color: var(--mute); }
.price-table s { color: var(--mute); }

.rules { max-width: 820px; }

/* ── 업데이트 기록 ───────────────────────────────────────── */

.log { max-width: 820px; border-top: 1px solid var(--line-soft); }
.log__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 24px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.log__date { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; padding-top: 2px; }
.log__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 650; letter-spacing: -.015em; }
.log__svc { font-size: 13px; color: var(--mute); }
.log__body { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--mute-2); white-space: pre-line; }

/* ── 긴 글: 가이드 · 정책 · 약관 ─────────────────────────── */

.doc { max-width: 760px; padding-bottom: var(--stack); }
.doc h2 { margin-top: 44px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.35; }
.doc h3 { margin-top: 28px; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.8; color: var(--mute-2); }
.doc p { margin-top: 12px; }
.doc ul, .doc ol { margin-top: 10px; padding-left: 1.3em; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--mute); }
.doc b, .doc strong { color: var(--text); font-weight: 600; }
.doc a:not(.btn) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-hard); text-underline-offset: 3px; }
.doc .notice { margin-top: 20px; }
.doc table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 14.5px; }
.doc th, .doc td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; color: var(--mute-2); }
.doc th { color: var(--text); font-weight: 600; }
.doc__meta { margin-top: 10px; font-size: 13.5px; color: var(--mute); }
.doc__toc { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }

.guide-list { max-width: 820px; border-top: 1px solid var(--line-soft); }
.guide-list a { display: block; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.guide-list b { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.guide-list span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--mute-2); line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .guide-list a:hover b { text-decoration: underline; text-decoration-color: var(--line-hard); text-underline-offset: 4px; }
}

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

@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc__result { position: static; }
}
@media (max-width: 640px) {
  .plans__row { grid-template-columns: minmax(0, 1fr); }
  .plans__price { text-align: left; }
  .log__item { grid-template-columns: minmax(0, 1fr); }
  .origin li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .invite-bar { justify-content: flex-start; }
  .room__msg { max-width: 100%; }
}