/* ============================================================
   읽는 화면
   소개 · 안내 · 약관처럼 글이 본체인 화면의 CSS.

   components.css 와 나눈 이유는 성격이 달라서다.
   저쪽은 예약 흐름에서 계속 쓰이는 조각이고, 이쪽은 몇 화면에서만
   한 번씩 쓰인다. 한 파일에 넣으면 예약 화면이 쓰지 않는 규칙을
   매번 받아 간다.

   색과 간격은 tokens.css 의 변수만 쓴다.
   ============================================================ */

/* ── 화면 머리 ──────────────────────────────────── */

.gb-pagehead {
  padding: var(--s-6) 0 var(--s-5);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line-soft);
  margin-bottom: var(--s-6);
}
.gb-pagehead .gb-container { max-width: var(--w-content); }
.gb-pagehead__eyebrow {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
}
.gb-pagehead__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.5px;
  color: var(--c-plum);
  text-wrap: balance;
}
.gb-pagehead__lead {
  margin: var(--s-3) 0 0;
  max-width: 44ch;
  color: var(--c-text-2);
  font-size: var(--fs-md);
  line-height: 1.7;
}

/* ── 본문 ───────────────────────────────────────── */

.gb-page { padding-bottom: var(--s-6); }
.gb-page p { margin: 0 0 var(--s-4); line-height: 1.85; }
/* 본문 링크만 강조색으로. :not 을 빼면 버튼 글자까지 분홍이 되어
   분홍 바탕 위 분홍 글자가 된다. */
.gb-page a:not(.gb-btn) { color: var(--c-accent); }
.gb-page strong { font-weight: 700; color: var(--c-text); }

.gb-page__lead {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  padding-left: var(--s-4);
  border-left: 3px solid var(--c-accent);
}

.gb-page__h {
  margin: var(--s-7) 0 var(--s-3);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--c-plum);
}
.gb-page__h:first-child { margin-top: 0; }

.gb-page__hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
}

.gb-page__list {
  margin: 0 0 var(--s-4);
  padding-left: 1.2em;
  line-height: 1.9;
}
.gb-page__list li { margin-bottom: var(--s-1); }

.gb-page__note {
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.gb-page__meta {
  color: var(--c-text-mute);
  font-size: var(--fs-sm);
}

/* 약관 본문은 줄바꿈이 곧 서식이다. 글자를 한 단계 줄이고 줄간격을 넓힌다. */
.gb-page__terms {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--c-text-2);
}

.gb-page__sign {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  text-align: right;
  color: var(--c-text-2);
}

.gb-page__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* ── 카드 묶음 ──────────────────────────────────── */

.gb-page__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.gb-page__card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gb-page__card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gb-page__card-body { padding: var(--s-4); }
.gb-page__card-title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-plum);
}
.gb-page__card-desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-2);
}

/* ── 번호가 붙은 절차 ───────────────────────────── */

.gb-page__steps {
  counter-reset: step;
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.gb-page__steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
}
.gb-page__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--c-accent);
  color: var(--c-accent-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.gb-page__steps strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-md);
  color: var(--c-plum);
}
.gb-page__steps span {
  display: block;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

/* ── 요금 ───────────────────────────────────────── */

.gb-price-hero {
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  background: var(--c-accent-soft);
  border-radius: var(--r-lg);
  text-align: center;
}
.gb-price-hero__label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-plum);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.gb-price-hero__value {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-accent);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.gb-price-hero__unit { color: var(--c-text-2); font-size: var(--fs-md); }
.gb-price-hero__note {
  margin: var(--s-3) 0 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* ── 경고 상자 ──────────────────────────────────── */

.gb-warnbox {
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  background: var(--c-danger-soft);
  border: 1px solid var(--c-danger);
  border-radius: var(--r-lg);
}
.gb-warnbox__title {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--c-danger);
}
.gb-warnbox__list {
  margin: 0 0 var(--s-4);
  padding-left: 1.2em;
  line-height: 1.9;
  color: var(--c-text);
}
.gb-warnbox__foot {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-danger);
  font-size: var(--fs-sm);
  color: var(--c-danger);
  font-weight: 600;
}

/* ── 표 ─────────────────────────────────────────── */

/* 좁은 화면에서 표가 본문을 밀어 가로 스크롤을 만들면 안 된다.
   표만 자기 안에서 밀린다. */
.gb-table-wrap { overflow-x: auto; margin-bottom: var(--s-4); }
.gb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.gb-table th,
.gb-table td {
  padding: var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.gb-table th {
  background: var(--c-surface-2);
  font-weight: 700;
  color: var(--c-plum);
}
.gb-table td:last-child { font-variant-numeric: tabular-nums; }

.gb-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.gb-tag--ok   { background: var(--c-verified-soft); color: var(--c-verified); }
.gb-tag--warn { background: var(--c-warn-soft);     color: var(--c-warn); }
.gb-tag--no   { background: var(--c-danger-soft);   color: var(--c-danger); }

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

.gb-faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.gb-faq__item {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}
.gb-faq__q {
  padding: var(--s-4);
  font-weight: 700;
  color: var(--c-plum);
  cursor: pointer;
  list-style: none;
}
.gb-faq__q::-webkit-details-marker { display: none; }
.gb-faq__q::after {
  content: "+";
  float: right;
  color: var(--c-accent);
  font-weight: 700;
}
.gb-faq__item[open] .gb-faq__q::after { content: "\2212"; }
.gb-faq__a {
  padding: 0 var(--s-4) var(--s-4);
  color: var(--c-text-2);
  line-height: 1.85;
  font-size: var(--fs-sm);
}

/* 후기 목록은 components.css 의 .gb-review 를 그대로 쓴다.
   호스트 상세에서 쓰던 것과 같은 조각이라 여기서 다시 정의하지 않는다.
   같은 이름을 두 파일에 적으면 나중에 실린 쪽이 앞의 것을 조용히 덮는다. */

/* ── 쪽 이동 ────────────────────────────────────── */

.gb-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin-top: var(--s-5);
}
.gb-pager a,
.gb-pager__now {
  min-width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.gb-pager a { color: var(--c-text-2); border: 1px solid var(--c-line); }
.gb-pager a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.gb-pager__now { background: var(--c-accent); color: var(--c-accent-text); font-weight: 700; }

/* ── 연락처 ─────────────────────────────────────── */

.gb-contact {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.gb-contact__row {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
}
.gb-contact__row:last-child { border-bottom: 0; }
.gb-contact__k {
  flex: 0 0 88px;
  color: var(--c-text-mute);
  font-size: var(--fs-sm);
}
.gb-contact__v { font-weight: 600; color: var(--c-text); text-decoration: none; }
a.gb-contact__v { color: var(--c-accent); }

@media (max-width: 560px) {
  .gb-pagehead__title { font-size: var(--fs-xl); }
  .gb-page__steps li { padding-left: 40px; }
  .gb-review__date { margin-left: 0; width: 100%; }
}