/* 첫 화면·PC 첫 화면·여행 만들기·구매·결제 완료·테스터·더 보기 화면(OPS-1885 디자인 개편, A 소유). 접두 ld-(첫 화면·여행 만들기)·tester-·buy-·menu-.
   색·간격·글자는 var(--nd-*) 만 쓴다(web/css/tokens.css). 움직임은 prefers-reduced-motion: no-preference 안에서만. */

/* ── 첫 화면(시안 1·10): 질문 하나와 결과 카드가 먼저, 주 단추는 무료 시작 하나(하단 고정) ── */
.ld-top { border-bottom-color: transparent; }
.ld-lang { position: relative; }
.ld-lang > summary { list-style: none; cursor: pointer; }
.ld-lang > summary::-webkit-details-marker { display: none; }
.ld-lang-chip { display: inline-flex; align-items: center; min-height: var(--tap); }
.ld-lang-chip > .nd-chip { min-height: 32px; padding: 0 10px 0 12px; }
.ld-lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 168px; padding: 6px; background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: var(--nd-r-card); }
.ld-lang-btn { min-height: var(--tap); padding: 0 var(--nd-s3); border: 0; border-radius: 10px; background: none; font: inherit; font-size: var(--nd-fs-ui); font-weight: 700; color: var(--nd-ink); text-align: left; cursor: pointer; }
.ld-lang-btn[aria-pressed="true"] { background: var(--nd-pine-tint); color: var(--nd-pine); }

/* 하단 고정 단추 자리는 바닥글 아래 여백(body:has(.ld-cta) .site-footer)이 맡는다. 본문 끝에 또 비우면 바닥글 앞에 빈 띠가 생긴다 */
.ld { padding-top: 0; padding-bottom: var(--nd-s6); }
.ld-copy { padding: 14px 0; }
.ld-eyebrow { font-size: var(--nd-fs-label); }
.ld-h1 { font-size: var(--nd-fs-display); line-height: var(--nd-lh-tight); font-weight: 800; letter-spacing: -.04em; margin: var(--nd-s2) 0; }
:root:lang(en) .ld-h1 { font-size: 42px; }
.ld-lead { font-size: var(--nd-fs-h3); font-weight: 400; line-height: var(--nd-lh); margin: 0 0 10px; }
.ld-unoff { display: flex; align-items: flex-start; gap: 6px; color: var(--nd-ink-2); }
.ld-unoff::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ld-unoff .unofficial-top { margin: 0; }

.ld-demo { position: relative; margin: 4px 0 14px; }
.ld-demo > .nd-badge.ex { position: absolute; top: -9px; right: var(--nd-s3); z-index: 1; }
.ld-soon, .ld-next { display: none; }
.ld-now { padding: 14px 14px 12px; }
.ld-now .nd-over { font-size: var(--nd-fs-label); }
.ld-now-name { margin: 6px 0 2px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.ld-now-where { margin: 0; font-size: var(--nd-fs-label); color: var(--nd-ink-2); }
.ld-metrics { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border-top: 1px solid var(--nd-line); }
.ld-metric { padding-top: 10px; }
.ld-metric + .ld-metric { padding-left: var(--nd-s4); border-left: 1px solid var(--nd-line); }
.ld-metric-k { display: flex; align-items: center; gap: 5px; font-size: var(--nd-fs-label); font-weight: 700; color: var(--nd-ink-2); }
.ld-metric-v { display: block; margin-top: 4px; font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ld-metric-v small { margin-left: 2px; font-size: var(--nd-fs-ui); font-weight: 700; letter-spacing: 0; }

.ld-vals { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--nd-s2); }
.ld-vals li { display: flex; align-items: center; gap: var(--nd-s2); min-height: var(--tap); padding: 10px; border: 1px solid var(--nd-line); border-radius: var(--nd-r-btn); background: var(--nd-surface); font-size: var(--nd-fs-label); font-weight: 700; line-height: 1.3; }
.ld-vals .ic { color: var(--nd-pine); }

.ld-price { margin: 14px 0 0; text-align: center; }
.ld-priceline { margin: var(--nd-s3) 0 0; font-size: var(--nd-fs-label); color: var(--nd-ink-2); font-variant-numeric: tabular-nums; }
.ld-what { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--nd-fs-label); color: var(--nd-ink-2); }
.ld-what li { margin: 2px 0; }
.ld-what b { color: var(--nd-ink); font-weight: 700; }
.ld-apponly { margin: 2px 0 var(--nd-s2); font-size: var(--nd-fs-label); font-weight: 700; color: var(--nd-ink); }
.ld-country { display: flex; align-items: center; justify-content: center; gap: 4px var(--nd-s2); flex-wrap: wrap; font-size: var(--nd-fs-label); color: var(--nd-ink-2); }
.ld-country-sel { width: auto; min-height: var(--tap); padding: 0 var(--nd-s3); font-size: var(--nd-fs-ui); }
.ld-buy { font-size: var(--nd-fs-label); }
.ld-rules { margin-top: var(--nd-s2); text-align: left; }
.ld-rules > p { margin: 0 2px var(--nd-s2); }
body:has(.ld-cta) .site-footer { padding-bottom: calc(100px + var(--safe-b)); }

/* 테스터 카드(첫 화면 보조 카드, 명세 2-1): 잉크 1.5px 테 + 외곽선 단추 */
.tester-card { border: 1.5px solid var(--nd-ink); }
.tester-card .tester-kicker { margin: 0; font-size: var(--nd-fs-meta); font-weight: 800; color: var(--nd-coral-ink); }
.tester-card h2 { margin: 2px 0 4px; font-size: var(--nd-fs-h3); }
.tester-card > p { margin: 4px 0; font-size: var(--nd-fs-label); color: var(--nd-ink-2); }
.tester-card .tester-go { border: 1.5px solid var(--nd-ink); color: var(--nd-ink); font-weight: 800; }

/* PC 첫 화면(1024px 이상): 왼쪽 질문과 단추, 오른쪽 파인 연한 판 위 예시. 단추는 같은 #landing-start 하나 */
@media (min-width: 1024px) {
  .ld-top .topbar-row { max-width: 1104px; min-height: 72px; }
  .ld-top .brand-logo { height: 28px; }
  .ld { max-width: 1136px; padding: 48px var(--nd-s4) var(--nd-s7); display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: 64px; align-items: start;
    grid-template-areas: "copy demo" "cta demo" "vals demo" "tester demo" "price demo"; }
  .ld > * { grid-column: 1; }
  .ld-copy { grid-area: copy; padding: 0 0 var(--nd-s6); }
  .ld-eyebrow { font-size: var(--nd-fs-ui); }
  .ld-h1, :root:lang(en) .ld-h1 { font-size: 84px; line-height: 1.05; letter-spacing: -.045em; margin: 14px 0 18px; }
  .ld-lead { font-size: 21px; line-height: 1.55; margin: 0 0 var(--nd-s4); max-width: 30em; }
  .ld-demo { grid-area: demo; grid-column: 2; grid-row: 1 / span 5; margin: 0; padding: 28px var(--nd-s6) var(--nd-s6); border-radius: var(--nd-r-sheet); background: var(--nd-pine-tint); }
  .ld-demo > .nd-badge.ex { top: -10px; right: var(--nd-s5); }
  .ld-soon { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px var(--nd-s3); border-radius: var(--nd-r-btn); background: var(--nd-pine); color: var(--nd-on-pine); font-size: 14px; font-weight: 700; }
  .ld-soon-in { margin-left: auto; color: var(--nd-on-pine-2); font-size: var(--nd-fs-label); }
  .ld-now { padding: 18px var(--nd-s4) var(--nd-s4); }
  .ld-now-name { font-size: var(--nd-fs-title); }
  .ld-metric-v { font-size: var(--nd-fs-num); }
  .ld-next { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: var(--nd-s3) 14px; }
  .ld-next-k { font-size: var(--nd-fs-meta); font-weight: 700; color: var(--nd-ink-2); }
  .ld-next-m { margin-left: auto; font-size: var(--nd-fs-label); color: var(--nd-ink-2); }
  .ld-cta { grid-area: cta; position: static; padding: 0; background: none; }
  .ld-cta > * { max-width: none; margin: 0; }
  .ld-cta .btn-primary { display: inline-flex; width: auto; min-height: 56px; padding: 0 28px; }
  .ld-vals { grid-area: vals; display: grid; grid-template-columns: repeat(2, max-content); gap: var(--nd-s3) 40px; margin: 28px 0 0; padding-top: var(--nd-s5); border-top: 1px solid var(--nd-line); }
  .ld-vals li { min-height: 0; padding: 0; border: 0; background: none; font-size: var(--nd-fs-ui); }
  .ld .tester-card { grid-area: tester; max-width: 560px; margin-top: var(--nd-s6); }
  .ld-price { grid-area: price; text-align: left; max-width: 560px; }
  .ld-country { justify-content: flex-start; }
  body:has(.ld-cta) .site-footer { padding-bottom: calc(28px + var(--safe-b)); }
}

/* ── 테스터 참가(T01) ── */
.tester-progress:not(.nd-sr) { width: 100%; height: 8px; accent-color: var(--nd-pine); }
.tester-count .row-btns { align-items: center; }
.tester-count .row-btns > .btn { flex: 0 0 var(--tap); }
.tester-count-v { min-width: 2.5em; text-align: center; font-size: var(--nd-fs-h2); font-weight: 800; font-variant-numeric: tabular-nums; }
.tester-stars > .btn { flex: 1 1 0; min-width: 0; }
.tester-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tester-review-card { border-color: var(--nd-pine); }

/* ── 여행 만들기(시안 4): 단계·단추 글자는 그대로, 파크는 지형 그림 카드, 방문일은 오늘·내일 칩 ── */
.ld-setup .nd-prog { margin-top: var(--nd-s3); }
.ld-step { margin: 4px 0 0; font-weight: 700; }
.ld-setup h1 { margin-top: var(--nd-s3); }
.ld-parks { display: grid; gap: var(--nd-s2); margin: var(--nd-s3) 0; }
.ld-park { display: grid; grid-template-columns: 56px 1fr 24px; gap: var(--nd-s3); align-items: center; min-height: 64px; padding: 10px var(--nd-s3); border: 1.5px solid var(--nd-line); border-radius: 14px; background: var(--nd-surface); font: inherit; font-size: var(--nd-fs-body); font-weight: 800; color: var(--nd-ink); text-align: left; cursor: pointer; }
.ld-park.is-on { border-color: var(--nd-pine); box-shadow: inset 0 0 0 0.5px var(--nd-pine); }
.ld-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--nd-line-strong); }
.ld-park.is-on .ld-radio { border: 7px solid var(--nd-pine); }
.ld-days { margin: var(--nd-s3) 0 var(--nd-s1); }
.ld-setup .onb-nav { padding-top: var(--nd-s3); background: linear-gradient(180deg, transparent 0, var(--nd-paper) 12px); }
.ld-setup .onb-nav > .btn-ghost { flex: 0 0 96px; border-color: transparent; background: transparent; color: var(--nd-pine); }
.ld-setup .onb-nav > .btn-primary { flex: 1 1 auto; }
.ld-setup .onb-skip { margin-top: var(--nd-s4); text-align: center; }
.ld-setup-unoff { margin-top: var(--nd-s6); }
.ld-setup .must-list .check { padding: 12px 2px; border-bottom: 1px solid var(--nd-line); }
.ld-setup .must-list .check small { font-size: var(--nd-fs-meta); }
@media (prefers-reduced-motion: no-preference) {
  .ld-park { transition: transform var(--nd-dur-press) var(--nd-ease), border-color var(--nd-dur-press) var(--nd-ease); }
  .ld-park:active { transform: scale(.98); }
}
/* 언어 단계: 고른 언어는 선택 모양(주 단추는 「다음」 하나) */
.ld-setup > .btn-block.btn-primary { background: var(--nd-pine-tint); border: 2px solid var(--nd-pine); color: var(--nd-pine); min-height: var(--tap); font-size: var(--nd-fs-ui); }

/* ── 구매 시트(시안 2): 앱 요금 띠 · 며칠? 칩 · 큰 가격 카드 · 하단 고정 결제 단추 ── */
.buy-apponly { margin-top: 0; }
.buy-days { display: flex; align-items: center; gap: var(--nd-s2); flex-wrap: wrap; margin: var(--nd-s3) 0 var(--nd-s2); font-size: var(--nd-fs-ui); font-weight: 700; }
.buy-days .nd-pick > button { padding: 0 var(--nd-s3); }
.products { padding-top: var(--nd-s2); }
.product { position: relative; gap: 4px; }
.product > .tag { position: absolute; top: -11px; left: var(--nd-s3); max-width: calc(100% - 24px); padding: 3px var(--nd-s2); border-radius: 7px; background: var(--nd-pine); color: var(--nd-on-pine); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-row { display: flex; align-items: center; gap: var(--nd-s2); width: 100%; }
.product-row > .product-name { flex: 1; min-width: 0; }
.product-radio { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--nd-line-strong); }
.product.is-sel .product-radio { border: 7px solid var(--nd-pine); }
.product-price small { font-size: var(--nd-fs-label); font-weight: 700; color: var(--nd-ink-2); letter-spacing: 0; }
.product > .tag + .product-row { margin-top: 6px; }
.price-compare { margin-top: 0; }
.sheet-body > .pay-reassure { margin-bottom: 0; color: var(--nd-ink-2); }
.sheet-body > .buy-pay { position: sticky; bottom: 0; z-index: 2; margin: var(--nd-s2) 0; box-shadow: 0 0 0 8px var(--nd-surface); }
.buy-features > summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.buy-result b { display: block; }

/* ── 더 보기(세 묶음 목록) ── */
.menu-groups > .nd-list-h:first-child { margin-top: var(--nd-s1); }
.menu-groups + .muted { margin-top: var(--nd-s4); }

/* ── 결제 완료: 완료 카드 맨 위, 계약 내용은 접기 ── */
.contract-fold > summary { display: flex; align-items: center; }
.contract-fold .contract > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nd-done .btn-primary { margin-top: var(--nd-s3); }

/* ── 테스터 사전조사(시안 3)·그날 후기(시안 9): 진행 막대, 문항은 48px 선택 칩, 이전(글자)·다음(주 단추) ── */
.tester .nd-prog { margin-top: var(--nd-s2); }
.tester .nd-steps > span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tester .nd-steps > span:first-child { text-align: left; }
.tester .nd-steps > span:last-child { text-align: right; }
.tester-local { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--nd-s2); }
.tester .tester-q { margin: var(--nd-s5) 0 0; padding: 0; border: 0; background: none; border-radius: 0; }
.tester .tester-q > legend { padding: 0; margin-bottom: 10px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -.015em; }
.tester .tester-q > p.muted { margin: -4px 0 10px; }
.tester .tester-q:not(.tester-consents) > .check { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin: 0 var(--nd-s2) var(--nd-s2) 0; padding: 0 14px; border: 1.5px solid var(--nd-line); border-radius: var(--nd-r-btn); background: var(--nd-surface); font-size: var(--nd-fs-ui); font-weight: 700; line-height: 1.3; vertical-align: top; }
.tester .tester-q:not(.tester-consents) > .check > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tester .tester-q:not(.tester-consents) > .check:has(input:checked) { border-color: var(--nd-pine); background: var(--nd-pine-tint); color: var(--nd-pine); }
.tester .tester-q:not(.tester-consents) > .check:has(input:checked)::before { content: ""; flex: 0 0 auto; width: 6px; height: 11px; margin: -3px 3px 0 1px; border: solid currentColor; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.tester .tester-q:not(.tester-consents) > .check:has(input:focus-visible) { outline: 3px solid var(--nd-coral-ink); outline-offset: 2px; }
.tester .tester-q:not(.tester-consents) > .check:has(input:disabled:not(:checked)) { color: var(--nd-disabled-ink); background: var(--nd-sunk); border-color: transparent; }
.tester .tester-q.tester-counts .field { margin: var(--nd-s2) 0; }
.tester .tester-consents { margin-top: var(--nd-s4); }
.tester .tester-consents > .check { padding: 12px 0; border-bottom: 1px solid var(--nd-line); }
.tester .onb-nav > .btn-ghost { flex: 0 0 96px; border-color: transparent; background: transparent; color: var(--nd-pine); }
.tester .onb-nav > .btn-primary { flex: 1 1 auto; }
.tester-stars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tester-stars > .btn { min-height: var(--tap); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tester-review-meta { margin-top: var(--nd-s3); }
.tester-review-due { text-align: center; margin: 0 0 var(--nd-s2); }
.tester-daysum { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: var(--nd-s3) 0; background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: var(--nd-r-card); }
.tester-daysum > div { padding: 10px var(--nd-s3); }
.tester-daysum > div + div { border-left: 1px solid var(--nd-line); }
.tester-daysum b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tester-daysum b small { font-size: 14px; color: var(--nd-ink-2); }
.tester-daysum span { font-size: var(--nd-fs-meta); font-weight: 700; color: var(--nd-ink-2); }
.tester-fair .field-row { align-items: end; }
/* 후기 불편 목록(시안 9): 칩이 아니라 한 줄씩 체크 목록, 고른 줄은 파인 옅은 바탕 */
.tester .tester-q.tester-issues > .check { display: flex; width: 100%; margin: 0; padding: 0 var(--nd-s3); border: 1px solid var(--nd-line); border-top-width: 0; border-radius: 0; background: var(--nd-surface); font-weight: 700; }
.tester .tester-q.tester-issues > p + .check { border-top-width: 1px; border-radius: var(--nd-r-card) var(--nd-r-card) 0 0; }
.tester .tester-q.tester-issues > .check:has(+ .field) { border-radius: 0 0 var(--nd-r-card) var(--nd-r-card); }
.tester .tester-q.tester-issues > .check > input { position: static; flex: 0 0 auto; width: 22px; height: 22px; margin: 0 var(--nd-s2) 0 0; opacity: 1; accent-color: var(--nd-pine); }
.tester .tester-q.tester-issues > .check:has(input:checked) { border-color: var(--nd-line); background: var(--nd-pine-tint); color: var(--nd-pine); }
.tester .tester-q.tester-issues > .check:has(input:checked)::before { content: none; }
.tester .tester-q.tester-issues > .field { margin-top: var(--nd-s3); }
.tester-scale { display: flex; justify-content: space-between; gap: var(--nd-s2); margin: 6px 0 var(--nd-s2); }
.tester .tester-stars > .btn-ghost { background: var(--nd-surface); border-color: var(--nd-line); color: var(--nd-ink); }
/* 사용 뒤 설문 r2(10/12): 추천 의향 0~10 은 6칸 두 줄(누를 곳 48px), 쪽 제목, 연락처 칸 */
.tester-nps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tester-nps > .btn { min-width: 0; min-height: var(--tap); padding: 0; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tester .tester-nps > .btn-ghost { background: var(--nd-surface); border-color: var(--nd-line); color: var(--nd-ink); }
.tester-review-h { margin: var(--nd-s4) 0 0; font-size: var(--nd-fs-h3); }
.tester .tester-contact .field { margin: var(--nd-s2) 0; }
.tester-pledge-note { margin: 6px 0 0; }
/* 파크 날 화면 설문 카드: 방문일 17:00 부터 「지금 갈 곳」 위에 크게 */
.tester-review-card.is-big { padding: var(--nd-s5) var(--nd-s4); border: 2px solid var(--nd-pine); background: var(--nd-pine-tint); }
.tester-review-card.is-big .tester-kicker { margin: 0; font-size: var(--nd-fs-meta); font-weight: 800; color: var(--nd-pine); }
.tester-review-card.is-big h2 { margin: 4px 0 6px; font-size: var(--nd-fs-h2); line-height: 1.3; }
.tester-review-card.is-big > p { margin: 0 0 var(--nd-s3); font-size: 16px; }
.tester-review-card.is-big > .btn { min-height: 56px; font-size: 18px; }
/* 결제 완료: 완료 카드가 겉 카드 안에 겹치지 않게 겉 카드 틀을 걷는다 */
.card:has(> .nd-done) { padding: 0; border: 0; background: none; box-shadow: none; }