/* ============================================================
   컴포넌트
   includes/components.php 가 만드는 마크업의 짝이다.
   색과 간격은 tokens.css 의 변수만 쓴다. 여기서 색상값을 직접 쓰지 않는다.
   ============================================================ */

/* ── 레이아웃 ───────────────────────────────────────── */

.gb-container {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.gb-admin .gb-container { max-width: var(--w-page); }

/* 랜딩은 읽는 화면이 아니라 보는 화면이다. 본문 폭(720px)에 가두면
   카드가 답답해지고 히어로가 좁아진다. */
.gb-landing .gb-container { max-width: 1080px; }

/* ── 머리말 ─────────────────────────────────────────
   메뉴가 두 개뿐일 때는 머리말이 비어 보였다. 서비스가 무엇을 하는
   곳인지 첫 화면에서 알 수 없고, 회사 정보가 어디에도 없어 신뢰가 붙지 않는다.
   대분류 여섯 개를 세우고 각각 아래를 펼친다. */

.gb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.gb-header__inner {
  width: 100%;
  max-width: var(--w-header);
  margin: 0 auto;
  padding: 0 var(--s-4);
  min-height: var(--h-header);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.gb-header__logo {
  display: flex;
  align-items: center;
  color: var(--c-plum);
  text-decoration: none;
  flex: 0 0 auto;
}
/* 로고는 마크와 글자 둘로 나뉜다. 글자를 SVG 에 그려 넣으면
   언어가 바뀌어도 로고만 한글로 남는다. */
.gb-logo { display: inline-flex; align-items: center; gap: 9px; }
.gb-logo__mark { display: block; flex: 0 0 auto; }
.gb-logo__mark svg { display: block; width: 100%; height: 100%; }
.gb-logo__word { font-weight: 800; letter-spacing: -.4px; white-space: nowrap; }

.gb-logo--header .gb-logo__mark { width: 30px; height: 30px; }
.gb-logo--header .gb-logo__word { font-size: var(--fs-md); }
.gb-logo--footer .gb-logo__mark { width: 26px; height: 26px; }
.gb-logo--footer .gb-logo__word { font-size: var(--fs-base); }

.gb-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}
.gb-header__link {
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}
.gb-header__link:hover { color: var(--c-text); }

/* ── 대분류 메뉴 ────────────────────────────────── */

.gb-nav { display: flex; }
.gb-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gb-nav__group { position: relative; }

.gb-nav__top {
  display: block;
  padding: 18px var(--s-3);
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -.2px;
  white-space: nowrap;
}
.gb-nav__top:hover,
.gb-nav__group:focus-within .gb-nav__top { color: var(--c-accent); }
.gb-nav__top[aria-current="page"] { color: var(--c-accent); }

/* 펼침판. 마우스를 얹거나 키보드로 들어오면 열린다.
   display 대신 visibility 를 쓰는 이유는, display:none 인 링크는
   Tab 으로 닿지 않아 키보드만 쓰는 사람이 하위 메뉴에 못 들어가기 때문이다. */
.gb-nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 168px;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s, transform .14s;
}
.gb-nav__group:hover .gb-nav__sub,
.gb-nav__group:focus-within .gb-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.gb-nav__sub a {
  display: block;
  padding: 9px var(--s-3);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.gb-nav__sub a:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.gb-nav__sub a[aria-current="page"] { color: var(--c-accent); font-weight: 600; }

.gb-nav__foot { display: none; }

/* 햄버거는 좁은 화면에서만 나온다. */
.gb-burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  cursor: pointer;
  position: relative;
}
.gb-burger__bars,
.gb-burger__bars::before,
.gb-burger__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--c-text);
  content: "";
}
.gb-burger__bars::before { transform: translateY(-6px); }
.gb-burger__bars::after  { transform: translateY(4px); }

@media (max-width: 980px) {
  /* .gb-header__cta 는 .gb-btn 도 함께 달고 있고, .gb-btn 의
     display:inline-flex 가 이 파일 뒤쪽에 있다. 클래스 하나짜리끼리는
     뒤에 온 쪽이 이기므로 여기서 한 단계를 더 얹어야 실제로 숨는다.
     이걸 빠뜨려서 390px 에서 가로 스크롤이 났다. */
  .gb-header .gb-header__cta,
  .gb-header .gb-header__link { display: none; }
  .gb-burger { display: block; }

  /* 펼친 메뉴는 머리말 아래로 통째로 떨어진다.
     좁은 화면에서 하위를 또 접어 두면 두 번 눌러야 해서 전부 펼쳐 둔다. */
  .gb-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--h-header));
    overflow-y: auto;
    padding: var(--s-4);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-md);
    flex-direction: column;
  }
  .gb-nav-open .gb-nav { display: flex; }

  .gb-nav__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-4);
    align-items: start;
  }
  .gb-nav__top { padding: 0 0 var(--s-2); }
  .gb-nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .gb-nav__sub a { padding: 7px 0; }

  .gb-nav__foot {
    display: flex;
    gap: var(--s-4);
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
  }
  .gb-nav__foot a {
    color: var(--c-text-2);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-sm);
  }
}

/* 섹션마다 자기 아래 여백이 있어 여기서 또 주면 두 겹이 된다.
   랜딩은 마지막 섹션이 여백을 갖고 있으므로 0 으로 둔다. */
.gb-main { padding: var(--s-5) 0 var(--s-6); }
.gb-landing .gb-main { padding-bottom: 0; }

/* ── 꼬리말 ─────────────────────────────────────────
   본문과 같은 밝은 분홍이면 페이지가 끝난 자리가 보이지 않는다.
   어둡게 깔아 바닥을 만들고, 여기서만 어두운 배경용 색을 쓴다. */

.gb-footer {
  margin-top: 0;
  padding: var(--s-7) 0 var(--s-5);
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  font-size: var(--fs-sm);
}
/* 본문은 720px 로 좁게 읽히지만 꼬리말은 페이지 폭을 쓴다.
   여섯 칸을 720px 에 밀어 넣으면 글자가 두 줄씩 접힌다. */
.gb-footer .gb-container { max-width: var(--w-header); }

.gb-footer__top {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 3fr;
  gap: var(--s-6);
}
/* 왼쪽 기둥. 로고와 한 줄 소개, 연락처가 여기 모인다. */
.gb-footer__brand { display: flex; flex-direction: column; }
.gb-footer__logo { color: var(--c-footer-head); text-decoration: none; display: inline-block; }
.gb-footer__tagline {
  margin: var(--s-3) 0 var(--s-4);
  max-width: 30ch;
  line-height: 1.7;
}
.gb-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
}
.gb-footer__contact a { font-weight: 600; color: var(--c-footer-head); }

.gb-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--s-5) var(--s-4);
}
.gb-footer__head {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-footer-head);
}
.gb-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gb-footer a { color: inherit; text-decoration: none; }
.gb-footer a:hover { color: var(--c-footer-head); text-decoration: underline; }
.gb-footer__strong { font-weight: 700; color: var(--c-footer-head); }

.gb-footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-footer-line);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--c-footer-mute);
}
.gb-footer__legal p { margin: 0 0 var(--s-2); }
.gb-footer__biz {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
}
/* 통신판매중개자 고지. 법으로 걸어야 하는 문장이라 흐리게 두지 않는다. */
.gb-footer__notice { max-width: 76ch; }
.gb-footer__copy { margin-bottom: 0; }

@media (max-width: 760px) {
  .gb-footer__top { grid-template-columns: 1fr; }
}

/* ── 버튼 ───────────────────────────────────────────── */

.gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.gb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 크기 수식자를 빼먹으면 패딩이 0 이라 글자가 안 보이는 납작한 알약이 된다.
   실제로 그렇게 나갔다. 기본값을 md 로 두어 빠뜨려도 버튼으로 보이게 한다. */
.gb-btn { padding: 12px 20px; font-size: var(--fs-base); }
.gb-btn--sm { padding: 8px 14px;  font-size: var(--fs-sm); }
.gb-btn--md { padding: 12px 20px; font-size: var(--fs-base); }
.gb-btn--lg { padding: 16px 28px; font-size: var(--fs-md); }
.gb-btn--full { width: 100%; }

.gb-btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-text);
}
.gb-btn--primary:hover:not(:disabled) { background: var(--c-accent-hover); }

.gb-btn--secondary {
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-text);
}
.gb-btn--secondary:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-accent); }

.gb-btn--ghost {
  background: transparent;
  color: var(--c-accent);
}
.gb-btn--ghost:hover:not(:disabled) { background: var(--c-accent-soft); }

.gb-btn--danger {
  background: var(--c-danger);
  color: #fff;
}

.gb-btn__label { display: inline-block; }
.gb-btn__icon  { display: inline-flex; line-height: 1; }

/* 누르고 아무 일도 안 일어나면 사람은 다시 누른다. 결제 화면에서 그러면 곤란하다. */
.gb-btn__spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gb-spin .7s linear infinite;
}
@keyframes gb-spin { to { transform: rotate(360deg); } }

/* ── 배지 ───────────────────────────────────────────── */

.gb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.gb-badge--accent   { background: var(--c-accent-soft);   color: var(--c-accent); }
.gb-badge--ok       { background: var(--c-verified-soft); color: var(--c-verified); }
.gb-badge--warn     { background: var(--c-warn-soft);     color: var(--c-warn); }
.gb-badge--danger   { background: var(--c-danger-soft);   color: var(--c-danger); }
.gb-badge--mute     { background: var(--c-surface-2);     color: var(--c-text-mute); }

/* 검증 배지는 다른 배지와 구분되어야 한다. 이게 전환을 가장 크게 움직인다. */
.gb-badge--verified {
  background: var(--c-verified-soft);
  color: var(--c-verified);
}
.gb-badge__check {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-verified);
  position: relative;
  flex: 0 0 auto;
}
.gb-badge__check::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 2px;
  width: 3px; height: 6px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* ── 호스트 카드 ────────────────────────────────────── */

.gb-host-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.gb-host-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--sh-md);
}
.gb-host-card__photo {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-2);
}
.gb-host-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gb-host-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gb-host-card__head { display: flex; align-items: baseline; gap: var(--s-3); }
.gb-host-card__name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
.gb-host-card__name strong { font-size: var(--fs-md); font-weight: 600; }
.gb-host-card__rating {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  white-space: nowrap;
}
.gb-host-card__rating em { font-style: normal; font-weight: 400; color: var(--c-text-mute); }
.gb-host-card__rating--none { font-weight: 400; color: var(--c-text-mute); }

/* 구사 언어는 이 서비스에서 가장 중요한 조건이라 눈에 띄게 둔다. */
.gb-host-card__langs { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-lang {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 8px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.gb-lang em { font-style: normal; font-weight: 400; opacity: .75; }

.gb-host-card__meta {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.gb-host-card__price {
  margin-left: auto;
  color: var(--c-text);
  font-weight: 600;
  white-space: nowrap;
}

.gb-host-list { display: grid; gap: var(--s-3); }

/* ── 폼 ─────────────────────────────────────────────── */

.gb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.gb-field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  display: flex; align-items: center; gap: 4px;
}
.gb-field__req { color: var(--c-danger); }

.gb-input {
  width: 100%;
  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);
  line-height: 1.5;
}
.gb-input:focus { border-color: var(--c-accent); }
.gb-input.is-error { border-color: var(--c-danger); }
.gb-input::placeholder { color: var(--c-text-mute); }
textarea.gb-input { resize: vertical; min-height: 96px; }

.gb-field__help  { margin: 0; font-size: var(--fs-xs); color: var(--c-text-mute); }
/* 무엇이 잘못됐는지와 어떻게 고치는지를 함께 적는다. */
.gb-field__error { margin: 0; font-size: var(--fs-xs); color: var(--c-danger); font-weight: 500; }

/* ── 알림 ───────────────────────────────────────────── */

.gb-alert {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border-left: 3px solid;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
}
.gb-alert__title { font-weight: 600; }
.gb-alert__body  { color: inherit; }
.gb-alert--info   { background: var(--c-accent-soft);   border-color: var(--c-accent);   color: var(--c-accent); }
.gb-alert--ok     { background: var(--c-verified-soft); border-color: var(--c-verified); color: var(--c-verified); }
.gb-alert--warn   { background: var(--c-warn-soft);     border-color: var(--c-warn);     color: var(--c-warn); }
.gb-alert--danger { background: var(--c-danger-soft);   border-color: var(--c-danger);   color: var(--c-danger); }

/* ── 빈 상태 ────────────────────────────────────────── */

/* 빈 화면만 두면 고장 난 것처럼 보인다. 다음에 할 일을 준다. */
.gb-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  padding: var(--s-7) var(--s-4);
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-lg);
  text-align: center;
}
.gb-empty__msg { margin: 0; color: var(--c-text-mute); font-size: var(--fs-sm); max-width: 34ch; }
.gb-empty__title { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--c-plum); }
.gb-empty__desc  { margin: 0; color: var(--c-text-mute); font-size: var(--fs-sm); max-width: 34ch; }

/* ── 금액 ───────────────────────────────────────────── */

.gb-amount {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: 9px 0;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.gb-amount__label { display: flex; flex-direction: column; }
.gb-amount__note  { font-style: normal; font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-amount__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb-amount--minus .gb-amount__value { color: var(--c-text-mute); }
.gb-amount--total {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
}

.gb-amount-box {
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

/* ── 아코디언 ───────────────────────────────────────── */

.gb-accordion {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
}
.gb-accordion__item + .gb-accordion__item { border-top: 1px solid var(--c-line-soft); }
.gb-accordion__q {
  padding: var(--s-4);
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.gb-accordion__q::-webkit-details-marker { display: none; }
.gb-accordion__q::after {
  content: "";
  width: 8px; height: 8px;
  border: solid var(--c-text-mute);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s;
  flex: 0 0 auto;
}
.gb-accordion__item[open] .gb-accordion__q::after { transform: rotate(-135deg) translateY(-2px); }
.gb-accordion__a {
  padding: 0 var(--s-4) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

/* ── 섹션 ───────────────────────────────────────────── */

.gb-section { padding: var(--s-7) 0; }
.gb-section__head { text-align: center; margin-bottom: var(--s-5); }
.gb-section__title {
  margin: 0 0 6px;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.gb-section__sub { margin: 0; color: var(--c-text-mute); font-size: var(--fs-sm); }

/* auto-fit 은 카드 3개를 2+1 로 흘려 보낸다. 마지막 한 장이
   혼자 남으면 실수처럼 보인다. 열 수를 직접 정한다. */
.gb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.gb-cards--2 { grid-template-columns: repeat(2, 1fr); }

.gb-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  overflow: hidden;
}
/* 카드 위쪽의 가는 띠. 전부 같은 흰 상자로 두면 눈이 어디부터
   읽어야 할지 모른다. 색을 카드마다 바꾸면 규칙이 없어 어수선해지므로
   한 색으로 통일하고 진하기만 다르게 한다. */
.gb-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c-accent);
}
.gb-card:nth-child(2)::before { opacity: .7; }
.gb-card:nth-child(3)::before { opacity: .45; }
.gb-card:nth-child(4)::before { opacity: .3; }

.gb-card__title { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.gb-card__desc  { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.gb-card__price {
  margin-top: auto; padding-top: var(--s-3);
  font-weight: 700; color: var(--c-accent);
  font-size: var(--fs-md);
}

@media (max-width: 820px) { .gb-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .gb-cards, .gb-cards--2 { grid-template-columns: 1fr; } }

/* 단계는 순서가 정보다. 번호를 크게 두지 않고 흐름만 보이게 한다. */
.gb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.gb-step { display: flex; flex-direction: column; gap: 6px; }
.gb-step__n {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.gb-step__title { font-weight: 600; font-size: var(--fs-base); }
.gb-step__desc  { font-size: var(--fs-sm); color: var(--c-text-2); margin: 0; }

/* ── 랜딩 ───────────────────────────────────────────── */

/* 히어로는 화면 높이를 채우지 않는다. 100vh 로 열면 첫 화면에서
   페이지 자체가 안 보이고, 스크롤을 내려야 무슨 서비스인지 알게 된다.

   글자만 있으면 차갑게 읽힌다. 그렇다고 커플 사진을 쓰면 이 서비스가
   가려는 방향과 어긋나므로, 실제로 파는 장면을 선으로 그려 넣는다. */
.gb-hero {
  padding: var(--s-7) 0;
  background:
    radial-gradient(900px 320px at 15% 0%, var(--c-accent-soft), transparent 70%),
    radial-gradient(700px 280px at 90% 20%, var(--c-secondary-soft), transparent 70%),
    var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.gb-hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 420px);
  gap: var(--s-6);
  align-items: center;
}
.gb-hero__text { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
/* 눈썹 문구는 연한 분홍으로 두면 분홍 배경 위에서 사라진다.
   장식이 아니라 읽으라고 넣은 글자이므로 대비를 확보한다. */
.gb-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
}
.gb-hero__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
}
.gb-hero__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 15ch;
}
.gb-hero__title em { font-style: normal; color: var(--c-accent); }
.gb-hero__sub {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--c-text-2);
  max-width: 34ch;
}
.gb-hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.gb-hero__note {
  margin: 0; font-size: var(--fs-sm); color: var(--c-text-mute);
  display: inline-flex; align-items: center; gap: 7px;
}
.gb-hero__note::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-verified); flex: 0 0 auto;
}
.gb-hero__art { color: var(--c-text-2); }
.gb-hero__art svg, .gb-hero__art img { width: 100%; height: auto; display: block; }

/* 사진은 모서리를 둥글게 깎고 그림자를 얕게 준다.
   각진 사진을 그대로 붙이면 스톡 이미지를 얹어 둔 것처럼 보인다. */
.gb-hero__photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

/* 사진이 붙은 카드. 카드 전체가 링크라 눌리는 느낌이 있어야 한다. */
.gb-card--photo {
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .16s, box-shadow .16s;
}
.gb-card--photo:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.gb-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gb-card__body { padding: var(--s-4); flex: 1; display: flex; flex-direction: column; }
/* 값은 카드 높이가 달라도 바닥에 나란히 붙는다. */
.gb-card--photo .gb-card__price { margin-top: auto; padding-top: var(--s-3); }

/* 섹션마다 배경만 번갈으면 리듬이 아니라 줄무늬가 된다.
   제목 위에 짧은 눈썹 문구를 두어 시작 지점을 만든다. */
.gb-section__eyebrow {
  display: block;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
  color: var(--c-plum); opacity: .7; text-transform: uppercase;
  margin-bottom: var(--s-2);
}

/* 분홍 위에 분홍을 올리면 위계가 사라진다.
   한 칸 건너 흰 바탕을 두어 숨 쉴 자리를 만든다. */
.gb-section--alt { background: var(--c-surface); }
.gb-section--alt .gb-card { background: var(--c-surface-2); border-color: transparent; }
.gb-section--host {
  background:
    radial-gradient(600px 240px at 80% 0%, var(--c-secondary-soft), transparent 70%),
    var(--c-accent-soft);
}
.gb-row--center   { justify-content: center; margin-top: var(--s-5); }

@media (max-width: 780px) {
  .gb-hero__inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .gb-hero__text  { align-items: center; text-align: center; }
  .gb-hero__title { max-width: 100%; }
  .gb-hero__cta   { justify-content: center; }
  .gb-hero__art   { order: -1; max-width: 360px; margin: 0 auto; }
}

.gb-lang-select {
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-family: inherit;
  font-size: var(--fs-xs);
  padding: 5px 8px;
}

@media (max-width: 560px) {
  .gb-hero { padding: var(--s-6) 0 var(--s-5); }
  .gb-hero__title { font-size: var(--fs-xl); }
  .gb-hero__cta .gb-btn { width: 100%; }
  .gb-hero__cta { width: 100%; }
}

/* ── 가입 · 로그인 ──────────────────────────────────── */

/* 인증 화면은 본문보다 좁게 둔다. 넓으면 입력란이 늘어져
   어디를 채워야 하는지 한눈에 안 들어온다. */
.gb-auth { max-width: 420px; padding-top: var(--s-6); padding-bottom: var(--s-7); }
.gb-auth--center { text-align: center; }
.gb-auth__title { margin: 0 0 var(--s-2); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.gb-auth__sub   { margin: 0 0 var(--s-5); color: var(--c-text-mute); font-size: var(--fs-sm); }
.gb-auth__change { margin-left: var(--s-2); color: var(--c-accent); font-size: var(--fs-xs); }
.gb-auth__form  { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--s-4); }
.gb-auth__form .gb-btn { margin-top: var(--s-2); }
.gb-auth__links {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin-top: var(--s-5);
  font-size: var(--fs-sm); color: var(--c-text-mute);
}
.gb-auth__links a { color: var(--c-accent); text-decoration: none; }
.gb-auth--center .gb-btn { margin-top: var(--s-3); }

/* 유형 선택. 버튼이지만 카드처럼 보여야 고르는 행동이 된다. */
.gb-choice { display: grid; gap: var(--s-3); }
.gb-choice__item {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.gb-choice__item:hover { border-color: var(--c-accent); box-shadow: var(--sh-md); }
.gb-choice__item strong { font-size: var(--fs-md); color: var(--c-text); }
.gb-choice__item span   { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.6; }

/* 약관 */
.gb-terms { list-style: none; margin: 0 0 var(--s-4); padding: 0; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.gb-terms__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.gb-terms__item + .gb-terms__item { border-top: 1px solid var(--c-line-soft); }
.gb-terms__label { display: flex; align-items: center; gap: var(--s-2); flex: 1; cursor: pointer; min-width: 0; }
.gb-terms__label input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--c-accent); }
.gb-terms__mark {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-text-mute); white-space: nowrap;
}
.gb-terms__mark.is-required { color: var(--c-accent); }
.gb-terms__title { font-size: var(--fs-sm); }
.gb-terms__view { font-size: var(--fs-xs); color: var(--c-text-mute); white-space: nowrap; text-decoration: underline; }

/* 번호 입력과 발송 버튼을 한 줄에 둔다. */
.gb-inline-field { display: flex; gap: var(--s-2); align-items: flex-start; }
.gb-inline-field .gb-field { flex: 1; margin-bottom: var(--s-4); }
.gb-inline-field .gb-btn { margin-top: 26px; flex: 0 0 auto; }

.gb-steps--compact { gap: var(--s-3); margin-bottom: var(--s-5); text-align: left; }
.gb-steps--compact .gb-step__n { width: 22px; height: 22px; }

/* ── 일반 페이지 ────────────────────────────────────── */

.gb-page__title {
  margin: var(--s-2) 0 var(--s-5);
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em;
}
.gb-form-page { max-width: 560px; padding-top: var(--s-5); }
.gb-form-page__title { margin: 0 0 var(--s-2); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.gb-form-page__sub   { margin: 0 0 var(--s-5); color: var(--c-text-mute); font-size: var(--fs-sm); }
.gb-form-page__section { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-md); font-weight: 600; }
.gb-form-page__note  { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-form-page .gb-btn + .gb-btn { margin-top: var(--s-2); }

.gb-result-count { font-size: var(--fs-sm); color: var(--c-text-mute); margin: var(--s-4) 0 var(--s-3); }

/* 필터는 한 줄에 늘어놓되 좁은 화면에서 자연스럽게 접힌다. */
.gb-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 var(--s-3);
  align-items: end;
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.gb-filters .gb-field { margin-bottom: var(--s-3); }
.gb-filters .gb-btn { margin-bottom: var(--s-3); }

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

.gb-tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  margin: var(--s-3) 0;
}
.gb-tbl { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--fs-sm); }
.gb-tbl th, .gb-tbl td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: top;
}
.gb-tbl thead th {
  background: var(--c-surface-2);
  font-weight: 600; font-size: var(--fs-xs);
  color: var(--c-text-mute);
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.gb-tbl tbody tr:last-child td { border-bottom: none; }
.gb-tbl__num  { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb-tbl__date { white-space: nowrap; color: var(--c-text-mute); }
.gb-tbl__sub  { display: block; font-size: var(--fs-xs); color: var(--c-text-mute); margin-top: 2px; }
.gb-tbl__danger { color: var(--c-danger); }
.gb-tbl a { color: var(--c-accent); text-decoration: none; font-weight: 600; }

/* ── 탭 ─────────────────────────────────────────────── */

.gb-tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; margin: var(--s-4) 0 var(--s-3); }
.gb-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.gb-tab:hover { border-color: var(--c-accent); }
.gb-tab.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 600; }
.gb-tab em { font-style: normal; font-size: var(--fs-xs); opacity: .8; font-variant-numeric: tabular-nums; }

/* ── 이름·값 목록 ───────────────────────────────────── */

.gb-kv {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}
.gb-kv__row { display: flex; gap: var(--s-4); padding: 11px var(--s-4); }
.gb-kv__row + .gb-kv__row { border-top: 1px solid var(--c-line-soft); }
.gb-kv__row--mark { background: var(--c-accent-soft); }
.gb-kv__k { flex: 0 0 34%; font-size: var(--fs-sm); color: var(--c-text-mute); }
.gb-kv__v { flex: 1; font-size: var(--fs-sm); font-weight: 500; word-break: break-word; }
.gb-kv__v--mono { font-family: var(--f-mono); font-size: var(--fs-base); letter-spacing: .02em; }

/* ── 서류 목록 ──────────────────────────────────────── */

.gb-doc-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.gb-doc { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
.gb-doc + .gb-doc { border-top: 1px solid var(--c-line-soft); }
.gb-doc__type { font-weight: 600; font-size: var(--fs-sm); }
.gb-doc__meta { font-size: var(--fs-xs); color: var(--c-text-mute); margin-right: auto; }
.gb-doc__del  { margin: 0; }

/* ── 상태 카드 ──────────────────────────────────────── */

.gb-status-card {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-left-width: 3px;
  margin-bottom: var(--s-5);
}
.gb-status-card__label { display: block; font-size: var(--fs-md); font-weight: 700; margin-bottom: 4px; }
.gb-status-card__desc  { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.gb-status-card--approved  { border-left-color: var(--c-verified); }
.gb-status-card--approved  .gb-status-card__label { color: var(--c-verified); }
.gb-status-card--pending   { border-left-color: var(--c-warn); }
.gb-status-card--pending   .gb-status-card__label { color: var(--c-warn); }
.gb-status-card--rejected,
.gb-status-card--suspended { border-left-color: var(--c-danger); }
.gb-status-card--rejected  .gb-status-card__label,
.gb-status-card--suspended .gb-status-card__label { color: var(--c-danger); }
.gb-status-card--draft     { border-left-color: var(--c-line); }

/* ── 체크박스 묶음 ──────────────────────────────────── */

.gb-checks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gb-check {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.gb-check input { accent-color: var(--c-accent); }
.gb-check:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); }

/* ── 호스트 상세 ────────────────────────────────────── */

.gb-host { padding-bottom: 96px; }
.gb-host__head { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5) 0; flex-wrap: wrap; }
.gb-host__photo img { width: 120px; height: 120px; border-radius: var(--r-lg); object-fit: cover; background: var(--c-surface-2); display: block; }
.gb-host__intro { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--s-2); }
.gb-host__name { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.gb-host__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.gb-host__langs { display: flex; gap: 6px; flex-wrap: wrap; }
.gb-host__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-text-mute); }
.gb-host__price { text-align: right; }
.gb-host__price strong { font-size: var(--fs-lg); font-weight: 700; }
.gb-host__price span   { color: var(--c-text-mute); font-size: var(--fs-sm); }
.gb-host__price em     { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--c-text-mute); }

.gb-host__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}
.gb-host__stats > div { padding: var(--s-4) var(--s-2); text-align: center; }
.gb-host__stats > div + div { border-left: 1px solid var(--c-line-soft); }
.gb-host__stats span   { display: block; font-size: var(--fs-xs); color: var(--c-text-mute); margin-bottom: 2px; }
.gb-host__stats strong { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }

.gb-host__section { padding: var(--s-6) 0 0; }
.gb-host__h2  { margin: 0 0 var(--s-3); font-size: var(--fs-md); font-weight: 600; }
.gb-host__bio { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.gb-host__none{ color: var(--c-text-mute); font-size: var(--fs-sm); }

.gb-dates { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); overflow-x: auto; }
.gb-date {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 76px; padding: var(--s-3);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface); text-decoration: none; color: inherit;
}
.gb-date:hover { border-color: var(--c-accent); }
.gb-date strong { font-size: var(--fs-md); }
.gb-date span   { font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-date em     { font-style: normal; font-size: var(--fs-xs); color: var(--c-accent); }

.gb-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.gb-review  { padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.gb-review__head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: 6px; flex-wrap: wrap; }
.gb-review__stars{ color: var(--c-secondary); letter-spacing: 1px; }
.gb-review__who  { font-size: var(--fs-sm); font-weight: 600; }
.gb-review__date { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-review__body { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }

/* 예약 버튼은 늘 보이는 자리에 둔다. 긴 프로필을 다 내려야
   예약할 수 있으면 거기까지 안 내려간다. */
.gb-sticky-cta {
  position: sticky; bottom: 0;
  padding: var(--s-3) 0 var(--s-4);
  background: linear-gradient(180deg, transparent, var(--c-bg) 30%);
}

/* ── 예약 단계 ──────────────────────────────────────── */

.gb-reserve { max-width: 560px; }
.gb-reserve__host { margin: 0 0 var(--s-4); color: var(--c-text-mute); font-size: var(--fs-sm); }

.gb-progress { display: flex; list-style: none; margin: 0 0 var(--s-5); padding: 0; gap: var(--s-2); }
.gb-progress li {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--c-text-mute);
  padding-top: var(--s-2); border-top: 2px solid var(--c-line);
}
.gb-progress li span {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-surface-2); color: var(--c-text-mute);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.gb-progress li.is-on { color: var(--c-accent); border-top-color: var(--c-accent); font-weight: 600; }
.gb-progress li.is-on span { background: var(--c-accent); color: #fff; }

.gb-slots { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gb-slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.gb-slot span {
  display: inline-block; padding: 9px 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.gb-slot input:checked + span { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 600; }
.gb-slot input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.gb-summary {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--c-accent-soft); color: var(--c-accent);
  border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600;
}

.gb-policy { margin: var(--s-4) 0; padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.gb-policy__title { margin: 0 0 var(--s-3); font-size: var(--fs-sm); font-weight: 600; }
.gb-policy__list  { list-style: none; margin: 0; padding: 0; }
.gb-policy__list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 5px 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.gb-policy__list strong { font-variant-numeric: tabular-nums; }
.gb-policy__note { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-mute); }

.gb-agree { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-4) 0; font-size: var(--fs-sm); cursor: pointer; }
.gb-agree input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--c-accent); flex: 0 0 auto; }

/* ── 결제 안내 ──────────────────────────────────────── */

.gb-pay { max-width: 560px; }
.gb-pay__sub { margin: 0 0 var(--s-4); color: var(--c-text-mute); font-size: var(--fs-sm); }
.gb-pay__box { border: 1px solid var(--c-accent); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-4); }
.gb-pay__amount {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s-4); background: var(--c-accent); color: #fff;
}
.gb-pay__amount span   { font-size: var(--fs-sm); opacity: .9; }
.gb-pay__amount strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.gb-pay__box .gb-kv { border: none; border-radius: 0; }
.gb-pay__note { margin: 0; padding: var(--s-3) var(--s-4); font-size: var(--fs-xs); color: var(--c-text-mute); background: var(--c-surface-2); }
.gb-pay__next { margin: var(--s-5) 0; }
.gb-pay__h2 { margin: 0 0 var(--s-3); font-size: var(--fs-md); font-weight: 600; }
.gb-pay__steps { margin: 0; padding-left: 20px; font-size: var(--fs-sm); color: var(--c-text-2); }
.gb-pay__steps li { margin: 5px 0; }

/* ── 관리자 ─────────────────────────────────────────── */

.gb-admin__shell { display: flex; min-height: 100vh; }
.gb-admin__side {
  flex: 0 0 216px;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  padding: var(--s-4) 0;
  display: flex; flex-direction: column;
}
.gb-admin__logo {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-4);
  color: var(--c-text); text-decoration: none; font-weight: 700;
}
.gb-admin__logo svg { width: 24px; height: 24px; }
.gb-admin__nav { display: flex; flex-direction: column; }
.gb-admin__nav a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 9px var(--s-4);
  color: var(--c-text-2); text-decoration: none; font-size: var(--fs-sm);
  border-left: 2px solid transparent;
}
.gb-admin__nav a:hover { background: var(--c-surface-2); }
.gb-admin__nav a[aria-current="page"] {
  color: var(--c-accent); font-weight: 600;
  background: var(--c-accent-soft); border-left-color: var(--c-accent);
}
.gb-admin__count {
  margin-left: auto;
  min-width: 20px; padding: 1px 6px;
  background: var(--c-danger); color: #fff;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.gb-admin__foot { margin-top: auto; padding: var(--s-4); font-size: var(--fs-xs); color: var(--c-text-mute); display: flex; flex-direction: column; gap: 2px; }
.gb-admin__me   { word-break: break-all; }
.gb-admin__role { color: var(--c-accent); font-weight: 600; }
.gb-admin__foot a { color: var(--c-text-mute); margin-top: var(--s-2); }

.gb-admin__main { flex: 1; padding: var(--s-5); min-width: 0; }
.gb-admin__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.gb-admin__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.gb-admin__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-4); }

.gb-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.gb-panel__title { margin: 0 0 var(--s-3); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-2); }
.gb-panel__note  { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-panel .gb-kv { border: none; }
.gb-panel .gb-doc-list { border: none; margin-bottom: 0; }

.gb-decision .gb-row { margin-top: var(--s-2); }
.gb-pay-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gb-input--sm { padding: 6px 9px; font-size: var(--fs-sm); width: 118px; }

@media (max-width: 860px) {
  .gb-admin__shell { flex-direction: column; }
  .gb-admin__side  { flex: none; border-right: none; border-bottom: 1px solid var(--c-line); }
  .gb-admin__nav   { flex-direction: row; overflow-x: auto; }
  .gb-admin__nav a { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .gb-admin__nav a[aria-current="page"] { border-bottom-color: var(--c-accent); }
  .gb-admin__foot  { flex-direction: row; align-items: center; gap: var(--s-3); }
  .gb-admin__main  { padding: var(--s-4); }
}

@media (max-width: 560px) {
  .gb-host__stats { grid-template-columns: repeat(2, 1fr); }
  .gb-host__stats > div:nth-child(3) { border-left: none; }
  .gb-host__stats > div:nth-child(n+3) { border-top: 1px solid var(--c-line-soft); }
  .gb-host__price { text-align: left; }
}

/* ── 예약 요청 목록 ─────────────────────────────────── */

.gb-req-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }

.gb-req {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* 답할 시간이 얼마 안 남은 것은 눈에 띄어야 한다.
   목록을 훑을 때 급한 것을 놓치면 자동 거절로 넘어간다. */
.gb-req.is-urgent { border-color: var(--c-danger); }
.gb-req.is-today  { border-color: var(--c-accent); }

.gb-req__link {
  display: flex; gap: var(--s-4);
  padding: var(--s-4);
  text-decoration: none; color: inherit;
}
a.gb-req__link:hover { background: var(--c-surface-2); }

.gb-req__when {
  flex: 0 0 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-2) 0;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  text-align: center;
}
.gb-req__when strong { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.gb-req__when span   { font-size: var(--fs-xs); color: var(--c-text-mute); }

.gb-req__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gb-req__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.gb-req__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.gb-req__time em { font-style: normal; font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-mute); margin-left: 5px; }
.gb-req__pay  { margin-left: auto; font-weight: 700; color: var(--c-accent); white-space: nowrap; }
.gb-req__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }

.gb-req__deadline { margin: 0; font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-req__deadline.is-urgent { color: var(--c-danger); font-weight: 600; }
.gb-req__deadline.is-over   { color: var(--c-text-mute); text-decoration: line-through; }

.gb-req__chat {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px; padding: 4px 11px;
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  font-size: var(--fs-xs); color: var(--c-accent); text-decoration: none;
}
.gb-req__chat:hover { border-color: var(--c-accent); }
.gb-req__unread {
  font-style: normal; min-width: 17px; padding: 0 5px;
  background: var(--c-accent); color: #fff;
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 700; text-align: center;
}

/* 요청 상세의 메모 상자 */
.gb-note-box {
  padding: var(--s-4);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

/* 거절은 접어 둔다. 수락과 나란히 두면 실수로 누른다.
   되돌릴 수 없는 버튼은 한 단계 뒤에 있어야 한다. */
.gb-decline {
  margin-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-3);
}
.gb-decline > summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-sm); color: var(--c-text-mute);
  text-align: center; padding: var(--s-2);
}
.gb-decline > summary::-webkit-details-marker { display: none; }
.gb-decline > summary:hover { color: var(--c-danger); }
.gb-decline__body { padding-top: var(--s-3); }

/* ── 유틸 ───────────────────────────────────────────── */

.gb-stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.gb-row     { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.gb-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}