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

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

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


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

.gb-page { padding-bottom: var(--s-6); }
.gb-page p { margin: 0 0 var(--s-4); line-height: 1.85; }
/* 본문 링크만 강조색으로.
 *
 * 클래스가 붙은 링크는 건드리지 않는다. 그것들은 이미 자기 모양을 가진
 * 조각이다 — 버튼, 탭, 카드 같은 것들.
 *
 * 처음에는 :not(.gb-btn) 으로 버튼만 빼 두었는데, 그 사이 탭이 이 안에 들어오면서
 * 골라 둔 탭이 분홍 바탕에 분홍 글자가 되어 글자가 사라졌다.
 * 조각이 하나 늘 때마다 여기에 이름을 더하는 방식은 언젠가 또 빠뜨린다. */
.gb-page a:not([class]) { 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 는 components.css 로 옮겼다 — 관리자 화면도 쓰는데
   관리자 머리말은 이 파일을 부르지 않아 규칙이 통째로 안 걸렸다. */

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

.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__cards--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.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; }

/* 배지와 같은 이유로 폭을 글자에 맞춘다 — components.css 의 .gb-badge 주석 참고. */
.gb-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  width: fit-content;
}
.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)은 components.css 로 옮겼다 — 관리자 감사 로그도
   쓰는데 관리자 머리말은 이 파일을 부르지 않아, 쪽번호가 8×18 픽셀짜리
   맨 글자로 나오고 있었다. */

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

.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-page__steps li { padding-left: 40px; }
  .gb-review__date { margin-left: 0; width: 100%; }
}

/* ── 내 예약 목록 ───────────────────────────────────
   상태 배지만 보여주면 다음에 무엇을 해야 하는지가 안 읽힌다.
   할 일이 있는 줄은 아래에 한 칸을 더 붙이고 왼쪽에 색 띠를 세운다. */

.gb-rsv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.gb-rsv {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gb-rsv.is-todo { border-left: 4px solid var(--c-accent); }

.gb-rsv__main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4);
  text-decoration: none;
  color: inherit;
}
.gb-rsv__main:hover { background: var(--c-surface-2); }
.gb-rsv__when strong { display: block; font-size: var(--fs-md); color: var(--c-plum); }
.gb-rsv__when span   { font-size: var(--fs-sm); color: var(--c-text-2); }
.gb-rsv__who {
  grid-column: 1;
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--fs-sm);
}
.gb-rsv__name   { color: var(--c-text-2); font-weight: 600; }
.gb-rsv__amount { color: var(--c-text-mute); font-variant-numeric: tabular-nums; }
.gb-rsv__state  { grid-row: 1 / span 2; align-self: start; }

.gb-rsv__todo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-accent-soft);
  font-size: var(--fs-sm);
  color: var(--c-plum);
}
.gb-rsv__todo--quiet { background: var(--c-surface-2); color: var(--c-text-2); }

/* ── 대화방 목록 ────────────────────────────────── */

.gb-rooms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.gb-room {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.gb-room.is-unread { border-color: var(--c-accent); }
.gb-room a { display: block; padding: var(--s-4); text-decoration: none; color: inherit; }
.gb-room a:hover { background: var(--c-surface-2); }
.gb-room__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 4px;
}
.gb-room__name { font-weight: 700; color: var(--c-plum); }
/* 안 읽음은 점 하나로 둔다. 숫자를 세어 보여줄 만큼 방이 많지 않다. */
.gb-room__dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--c-accent);
}
.gb-room__when { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-room__last { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--c-text-2); }
.gb-room__meta { margin: 0; font-size: var(--fs-xs); color: var(--c-text-mute); }

/* ── 대화방 ─────────────────────────────────────── */

.gb-chat { max-width: var(--w-content); padding-bottom: var(--s-6); }
.gb-chat__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
}
.gb-chat__back { color: var(--c-text-2); text-decoration: none; font-size: var(--fs-sm); }
.gb-chat__who  { flex: 1; min-width: 0; }
.gb-chat__who strong { display: block; color: var(--c-plum); }
.gb-chat__who span   { font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-chat__rsv {
  color: var(--c-accent);
  text-decoration: none;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* 글이 쌓이면 이 칸 안에서만 스크롤한다.
   페이지 전체가 길어지면 입력칸이 화면 밖으로 밀려난다. */
.gb-chat__log {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: var(--s-4);
  height: 52vh;
  min-height: 280px;
  overflow-y: auto;
  background: var(--c-surface-2);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.gb-msg { max-width: 78%; }
.gb-msg--mine   { align-self: flex-end;   text-align: right; }
.gb-msg--theirs { align-self: flex-start; }
.gb-msg__body {
  display: inline-block;
  padding: 9px 14px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-text);
  line-height: 1.65;
  text-align: left;
  overflow-wrap: break-word;
}
/* 한국어만. 일본어·중국어는 띄어쓰기가 없어 문장이 통째로 안 끊긴다. */
:lang(ko) .gb-msg__body { word-break: keep-all; }
.gb-msg--mine .gb-msg__body { background: var(--c-accent); color: var(--c-accent-text); }
.gb-msg__at { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--c-text-mute); }

/* 시스템 안내는 누구의 말도 아니므로 가운데에 얇게 둔다. */
.gb-msg--system {
  align-self: center;
  max-width: 90%;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  line-height: 1.7;
}

.gb-chat__form {
  display: flex;
  gap: var(--s-2);
  align-items: flex-end;
}
.gb-chat__input {
  flex: 1;
  padding: 11px 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-base);
  resize: vertical;
}

@media (max-width: 560px) {
  .gb-rsv__main  { grid-template-columns: 1fr; }
  .gb-rsv__state { grid-row: auto; }
  .gb-msg        { max-width: 88%; }
  .gb-chat__log  { height: 46vh; }
}

/* ── 파트너 활동 시간 ───────────────────────────────
   요일 일곱 줄. 끈 요일은 시간 칸을 흐리게 두되 지우지 않는다 —
   다시 켤 때 값을 새로 채우게 만들면 매번 같은 것을 다시 친다. */

.gb-week {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.gb-week__row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.gb-week__row.is-on { border-color: var(--c-accent); }
.gb-week__day {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 84px;
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
}
.gb-week__row.is-on .gb-week__day { color: var(--c-plum); }
.gb-week__times { display: flex; align-items: center; gap: var(--s-2); }
.gb-week__times .gb-input { width: auto; }
.gb-week__dash { color: var(--c-text-mute); }
.gb-week__row:not(.is-on) .gb-week__times { opacity: .45; }
.gb-week__err { width: 100%; margin: 0; color: var(--c-danger); font-size: var(--fs-sm); }

.gb-except-form {
  padding: var(--s-4);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}
.gb-except-form__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.gb-except-form__row .gb-input { width: auto; }
.gb-except-form__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.gb-except {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.gb-except__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.gb-except__date { font-weight: 600; color: var(--c-plum); }
.gb-except__time { color: var(--c-text-2); }
.gb-except__item .gb-inline-form { margin-left: auto; }

/* 규칙만 보고 실제로 언제 열리는지 세는 것은 어렵다. 2주를 그려 준다. */
.gb-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--s-2);
}
.gb-preview__day {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.gb-preview__day.is-off { background: var(--c-surface-2); color: var(--c-text-mute); }
.gb-preview__date em { font-style: normal; color: var(--c-text-mute); margin-left: 4px; }
.gb-preview__slots { font-variant-numeric: tabular-nums; }

/* ── 공지 목록 ──────────────────────────────────── */

.gb-notices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.gb-notice {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.gb-notice.is-pinned { border-color: var(--c-accent); }
.gb-notice a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--s-3);
  padding: var(--s-4);
  text-decoration: none;
  color: inherit;
}
.gb-notice a:hover { background: var(--c-surface-2); }
.gb-notice__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  color: var(--c-plum);
}
.gb-notice__excerpt {
  grid-column: 1;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.gb-notice__when {
  grid-row: 1;
  grid-column: 2;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  white-space: nowrap;
}

/* ── 관리자가 쓴 본문 ───────────────────────────────
   여기 들어오는 태그는 includes/html.php 의 허용 목록이 정한다.
   목록에 있는 것만 골라 모양을 준다. */

.gb-prose { line-height: 1.85; }
.gb-prose p  { margin: 0 0 var(--s-4); }
.gb-prose h2 { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-lg); color: var(--c-plum); }
.gb-prose h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-md); color: var(--c-plum); }
.gb-prose h4 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-base); color: var(--c-plum); }
.gb-prose ul,
.gb-prose ol { margin: 0 0 var(--s-4); padding-left: 1.3em; }
.gb-prose li { margin-bottom: 4px; }
.gb-prose a  { color: var(--c-accent); }
.gb-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.gb-prose hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-5) 0; }
.gb-prose blockquote {
  margin: 0 0 var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-left: 3px solid var(--c-accent);
  color: var(--c-text-2);
}
/* 표가 본문을 밀어 페이지가 가로로 흐르지 않게 한다. */
.gb-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-4); font-size: var(--fs-sm); }
.gb-prose th,
.gb-prose td { padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); text-align: left; }
.gb-prose th { background: var(--c-surface-2); font-weight: 700; }

/* ── 금액 요약 세 칸 ────────────────────────────────
   받은 것 · 곧 받을 것 · 기다리는 것.
   파트너가 가장 궁금해하는 순서로 두고, 가운데(곧 받을 것)만 강조한다.
   셋 다 강조하면 어느 것을 먼저 볼지가 사라진다. */

.gb-sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.gb-sum__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.gb-sum__card.is-accent { border-color: var(--c-accent); background: var(--c-accent-soft); }
.gb-sum__label { font-size: var(--fs-sm); color: var(--c-text-2); }
.gb-sum__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-plum);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.gb-sum__card.is-accent .gb-sum__value { color: var(--c-accent); }
.gb-sum__note { font-size: var(--fs-xs); color: var(--c-text-mute); line-height: 1.6; }

/* ── 별점 고르기 ────────────────────────────────────
   라디오 다섯 개다. 별 그림을 눌러 고르는 방식은 보기에 좋지만
   스크립트가 없으면 아무것도 못 고른다. 여기서는 그냥 되는 편을 택했다. */

.gb-stars {
  border: 0;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.gb-stars__opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.gb-stars__opt:hover { background: var(--c-surface-2); }
.gb-stars__mark {
  color: var(--c-accent);
  letter-spacing: 2px;
  min-width: 84px;
}
.gb-stars__word { font-size: var(--fs-sm); color: var(--c-text-2); }
/* 고른 줄이 무엇인지 보이게. 라디오 점만으로는 훑을 때 안 보인다. */
.gb-stars__opt:has(input:checked) { background: var(--c-accent-soft); }
.gb-stars__opt:has(input:checked) .gb-stars__word { color: var(--c-plum); font-weight: 600; }

/* ── 옮긴 글 ─────────────────────────────────────────
   원문 아래에 붙인다. 원문을 지우지 않는 이유:
   옮긴 것이 이상할 때 무엇을 보고 그랬는지 확인할 수 있어야 하고,
   지명과 시간은 원문이 더 정확할 때가 많다.

   가는 선 하나로 가른다. 색이나 배경으로 가르면 말풍선 안이 시끄러워진다. */
.gb-msg__tr {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 25%, transparent);
  font-size: var(--fs-sm);
  opacity: .85;
}

/* ── 파트너 모집 ────────────────────────────────────
   채용 화면은 '왜 해야 하는지' 를 먼저 말한다. 그 자리를 본문보다 크게 둔다. */
.gb-hire__hook {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-plum);
  text-wrap: balance;
}
.gb-hire__points { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.gb-hire__points li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  color: var(--c-text-2);
}
/* 체크 표시는 내용이 아니라 장식이다. 읽어 주는 기계는 건너뛴다. */
.gb-hire__points li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--c-accent); font-weight: 700;
}
.gb-hire__form { max-width: 560px; margin-bottom: var(--s-5); }

/* 사람에게는 안 보이는 칸(허니팟).
   display:none 을 쓰지 않는다 — 그것만 보고 건너뛰는 자동 도구가 있다.
   화면 밖으로 밀어 두고 읽어 주는 기계에서도 숨긴다. */
.gb-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}