/* 블록 라이브러리 — 작품 16개는 이 블록의 조합·순서만 바꿔서 만든다.
   업종이 달라도 필요한 블록은 거의 같다. 여기 없는 걸 만들었으면 여기로 올릴지 먼저 검토. */

/* ============ 1. 하단 고정 CTA 바 — 전환의 90%. 가장 중요한 블록 ============ */
.cta-bar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; gap: 1px;
  background: var(--line-strong);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 24px rgba(0, 0, 0, .08);
}
.cta-bar__btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--cta-h);
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  background: var(--surface-alt); color: var(--ink);
}
.cta-bar__btn--primary { background: var(--brand); color: var(--brand-ink); flex: 1.6; }
.cta-bar__btn svg { width: 18px; height: 18px; }

/* CTA 바에 본문이 가리지 않게 */
body.has-cta-bar { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom)); }

/* ============ 2. 히어로 ============ */
.hero { padding-block: clamp(64px, 14vw, 128px) var(--section-y); }
.hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.hero__lead { margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--ink-2); }

/* ============ 3. 신뢰 지표 ============ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.stats__n { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1; }
.stats__n small { font-size: .5em; font-weight: var(--fw-medium); margin-left: 2px; }
.stats__k { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: var(--ls-wide); }

/* ============ 4. 요금표 — 항목을 분리해서 보여주는 게 신뢰의 핵심 ============ */
.price { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-alt); overflow: hidden; }
.price + .price { margin-top: var(--sp-4); }
.price__head { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line); }
.price__name { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.price__note { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-3); }
.price__rows { padding: var(--sp-3) var(--sp-5); }
.price__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); font-size: var(--fs-base); }
.price__row dt { color: var(--ink-2); }
.price__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.price__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--surface);
  font-weight: var(--fw-bold);
}
.price__total b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); }
.price__krw { display: block; font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--ink-3); }

/* ============ 5. 리스트 행 — 골프장·메뉴·객실·차종 전부 이걸로 ============ */
.rows { border-top: 1px solid var(--line); }
.rows__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.rows__name { font-weight: var(--fw-medium); }
.rows__sub { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-3); }
.rows__val { flex: none; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ============ 6. 절차 — 이용방법 · 비자절차 · 예약순서 ============ */
.steps { counter-reset: step; }
.steps__item { position: relative; padding-left: var(--sp-8); }
.steps__item + .steps__item { margin-top: var(--sp-5); }
.steps__item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  color: var(--accent); letter-spacing: var(--ls-wide);
}

/* ============ 7. 후기 — 카톡 대화 캡처 느낌이 제일 잘 먹힌다 ============ */
.quote { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-alt); border: 1px solid var(--line); }
.quote + .quote { margin-top: var(--sp-3); }
.quote__text { font-size: var(--fs-base); color: var(--ink); }
.quote__by { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-3); }

/* ============ 8. FAQ — details/summary. JS 필요 없음 ============ */
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-4); font-weight: var(--fw-medium); cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: var(--fs-md); color: var(--ink-3); }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { padding-bottom: var(--sp-4); color: var(--ink-2); font-size: var(--fs-base); }

/* ============ 9. 이미지 자리 — 사진 확보 전까지 라벨만 ============ */
.img-slot {
  display: grid; place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  background: var(--surface-alt);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--ink-3);
}

/* ============ 10. 태그 칩 ============ */
.tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--ink-2);
}
.tag + .tag { margin-left: var(--sp-1); }

/* ============ 11. 푸터 ============ */
.foot { padding-block: var(--sp-7) var(--sp-8); font-size: var(--fs-sm); color: var(--ink-3); }
.foot dl { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-2) var(--sp-4); }
.foot dt { color: var(--ink-3); }
.foot dd { margin: 0; color: var(--ink-2); }