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

/* ── hidden 은 언제나 이긴다 ─────────────────────────
   브라우저 기본 규칙 [hidden]{display:none} 은 클래스 규칙보다 약하다.
   .gb-prog__order 에 display:flex 를 준 순간 그 기본 규칙이 져서,
   자바스크립트가 el.hidden = true 를 넣어도 화면에서는 그대로 남는다.

   실제로 그랬다. 끌어다 놓기가 되면 ↑ ↓ 단추를 감추기로 해 놓고,
   속성은 붙었는데 단추는 계속 보였다. el.hidden 을 확인하면 true 라서
   고친 줄 알고 넘어갔다 — 화면을 안 보면 알 수 없는 종류다.

   한 줄로 그 갈래를 통째로 없앤다. 감추기로 한 것은 감춰진다. */
[hidden] { display: none !important; }

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

.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-logo__img { display: block; width: auto; }
.gb-logo--header .gb-logo__img { height: 30px; max-width: 220px; object-fit: contain; }
.gb-logo--footer .gb-logo__img { height: 26px; max-width: 180px; object-fit: contain; }

.gb-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}
.gb-header__link {
  padding: 5px 8px;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}
.gb-header__link:hover { background: var(--c-surface-2); 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); }

/* 메뉴 글자가 길어지는 언어를 위한 여유.
   영어 메뉴는 한국어보다 200px 쯤 넓다. 1160px 짜리 머리말 안에서
   그대로 두면 오른쪽으로 삐져나가 페이지에 가로 스크롤이 생겼다.
   글자를 줄이는 대신 좌우 여백을 줄여 폭을 만든다. */
@media (max-width: 1240px) {
  .gb-nav__top { padding-left: var(--s-2); padding-right: var(--s-2); }
}

/* 햄버거로 접는 지점을 머리말 폭(--w-header 1160px)에 맞춘다.
   그보다 좁으면 머리말에 여유가 없다는 뜻이고, 실제로 영어 메뉴는
   981~1160px 구간에서 오른쪽으로 넘쳐 페이지에 가로 스크롤이 났다.
   언어마다 지점을 따로 두면 시험할 것이 두 배가 되므로 한 줄로 맞춘다. */
@media (max-width: 1160px) {
  /* .gb-header__link 는 글자 링크라 그냥 숨으면 되지만,
     예전에 여기 있던 머리말 버튼은 .gb-btn 도 함께 달고 있어서
     한 단계를 더 얹어야 실제로 숨었다. 그 버튼은 메뉴의
     "인연 찾기" 와 주소·글자가 똑같은 중복이라 아예 뺐다. */
  .gb-header .gb-header__link { display: none; }
  .gb-burger { display: block; }


  /* 펼친 메뉴는 머리말 아래로 통째로 떨어진다.
     좁은 화면에서 하위를 또 접어 두면 두 번 눌러야 해서 전부 펼쳐 둔다. */
  .gb-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /*
     * dvh 를 함께 적는다.
     *
     * 폰에서 100vh 는 '주소창이 없을 때' 의 높이다. 주소창이 보이는 동안에는
     * 실제로 보이는 높이가 그보다 작아서, 서랍이 화면 아래로 삐져나간다.
     * 맨 아래 메뉴가 보이지도 눌리지도 않는다 — 스크롤해도 안 올라온다.
     *
     * 위 줄은 dvh 를 모르는 옛 브라우저용이다. 아는 브라우저는 아랫줄을 쓴다.
     */
    max-height: calc(100vh - var(--h-header));
    max-height: calc(100dvh - 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;
    flex-wrap: wrap;
    align-items: center;
    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 {
    /* 서랍 맨 아래 두 줄(비밀번호 변경·로그아웃)이 21px 이었다.
       서랍은 손가락으로만 여는 자리라 여기가 제일 눌리기 어려웠다. */
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    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); }

/*
 * 조용한 단추. 그래도 **단추로는 보여야 한다.**
 *
 * 전에는 테두리가 없어서 그냥 색 있는 글자였다. 문의 화면의
 * '완료로 닫기'·'목록으로'·'회원 정보 보기' 가 링크처럼 보였고,
 * 마우스를 올려 봐야 단추인 줄 알았다. 폰에는 올려 볼 마우스도 없다.
 *
 * 옅은 테두리를 준다. secondary(흰 바탕 + 진한 테두리 + 검은 글자)보다는
 * 여전히 조용하고, 아무것도 없는 글자와는 확실히 다르다.
 */
.gb-btn--ghost {
  background: transparent;
  border-color: var(--c-line-soft);
  color: var(--c-accent);
}
.gb-btn--ghost:hover:not(:disabled) {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
}

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

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

/*
 * 알약 모양은 글자만큼만 차지한다.
 *
 * width: fit-content 가 필요한 이유 — inline-flex 라도 flex 컨테이너 안에
 * 들어가면 flex 항목으로 바뀌어(blockify) 부모의 stretch 를 받는다.
 * 세로로 쌓는 칸에 넣으면 배지 하나가 카드 폭 전체로 늘어난다.
 * 실제로 파트너 홈의 "예약 확정" 이 그랬다.
 */
.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;
  width: fit-content;
}
.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: 84px; height: 112px;
  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-lang)와 나란히 놓이는 자리라 일부러 다르게 입힌다 —
 * 둘 다 강조색이면 카드에서 무엇이 조건이고 무엇이 근거인지 섞인다.
 * 근거는 한 단계 물러난 회색으로 두고, 언어 쪽을 그대로 앞에 둔다.
 */
.gb-why {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
.gb-why__label { font-weight: 600; }
.gb-why__chip {
  padding: 2px 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  /*
   * 근거가 길어도 카드를 넓히지 못하게 한다. "삼겹살, 파스타" 처럼
   * 손님이 적은 글에서 나온 낱말이라 길이를 우리가 정할 수 없다.
   */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 정렬 기준을 개수 옆에 한 줄로. 줄을 따로 만들면 목록이 밀린다. */
.gb-result-count__why { margin-left: var(--s-2); opacity: .8; }

/*
 * 상세 조건.
 *
 * 거르개 줄의 마지막 자리에 온다. 폭을 다 쓰게 해서(flex-basis: 100%)
 * 펼쳤을 때 칸들이 단추 옆에 끼어들지 않게 한다.
 */
.gb-more { flex: 1 0 100%; margin-top: var(--s-2); }
.gb-more > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent);
  /* 목록 표시가 글자에 붙어 세로줄이 안 맞는다. */
  list-style-position: inside;
}
.gb-more__body {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.gb-more__body .gb-field { margin-bottom: 0; flex: 0 1 auto; }

/*
 * 걸어 둔 조건.
 *
 * 조건 몇 개를 걸고 아래로 내려가면 결과가 적은 이유가 화면 밖에 있다.
 * 접어 둔 칸에 들어 있으면 더하다. 결과 바로 위에 적고 하나씩 뗀다.
 */
.gb-chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
}
.gb-chips__label { color: var(--c-text-mute); }
.gb-chips__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border-radius: var(--r-pill, 999px);
  text-decoration: none;
  font-weight: 600;
}
.gb-chips__item:hover { background: var(--c-accent); color: var(--c-accent-text); }
.gb-chips__item span[aria-hidden] { opacity: .7; font-weight: 400; }
.gb-chips__clear { color: var(--c-text-mute); text-decoration: underline; }

.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%;
  /* 고르는 칸·단추와 같은 높이. tokens.css 의 --h-field 한 곳에서 정한다. */
  min-height: var(--h-field);
  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 로 열면 첫 화면에서
   페이지 자체가 안 보이고, 스크롤을 내려야 무슨 서비스인지 알게 된다.

   글자만 있으면 차갑게 읽힌다. 그렇다고 커플 사진을 쓰면 이 서비스가
   가려는 방향과 어긋나므로, 실제로 파는 장면을 선으로 그려 넣는다. */

/* ── 스크롤을 내리면 나타난다 ─────────────────────────
   랜딩이 한 화면에 정보를 늘어놓기만 해서 죽어 보인다는 말이 있었다.
   섹션이 눈에 들어올 때 살짝 떠오르게 하면 읽는 속도에 맞춰 화면이 따라온다.

   ⚠️ 감추는 일은 `.js` 가 붙었을 때만 한다.
     자바스크립트가 막힌 사람에게는 처음부터 그냥 보여야 한다.
     흔한 방식(CSS 로 먼저 감추고 스크립트가 띄우기)은 스크립트가 안 돌면
     본문이 통째로 사라진다 — 검색 로봇에게도 빈 페이지가 된다.
     표는 includes/header.php 가 화면 그려지기 전에 붙인다. */

.js .gb-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.js .gb-reveal.is-in { opacity: 1; transform: none; }

/* 여럿을 한꺼번에 띄우면 '툭' 하고 나타난다. 차례로 오게 한다. */
.js .gb-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js .gb-stagger.is-in > * { opacity: 1; transform: none; }
.js .gb-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
.js .gb-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.js .gb-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
.js .gb-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
.js .gb-stagger.is-in > *:nth-child(6) { transition-delay: .40s; }

/*
 * 움직임을 싫어하는 설정에서는 아예 안 움직인다.
 * tokens.css 가 시간을 0으로 줄이지만, 그것만으로는 **감춰진 채로** 남을 수 있다.
 * 여기서 보이는 것까지 확실히 한다.
 */
@media (prefers-reduced-motion: reduce) {
  .js .gb-reveal,
  .js .gb-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.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;
}
/*
 * '지금 3명이 기다리고 있어요' 앞의 점.
 *
 * 이 줄이 첫 화면에서 **유일하게 살아 있는 사실**이다(DB 에서 센다).
 * 점이 천천히 뛰면 "지금" 이라는 말이 글자가 아니라 상태로 읽힌다.
 */
.gb-hero__note::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-verified); flex: 0 0 auto;
  animation: gb-live 2.4s ease-in-out infinite;
}
@keyframes gb-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 91, .45); }
  60%      { box-shadow: 0 0 0 6px rgba(46, 125, 91, 0); }
}

/*
 * 아래에 더 있다고 알려 주는 선.
 *
 * 히어로만 보고 나가는 사람이 있다. 화면이 딱 떨어지게 채워져 있으면
 * 여기가 끝인 줄 안다. 가느다란 선 하나가 아래를 가리키게 둔다.
 */
.gb-hero__cue {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: var(--s-6);
  font-size: var(--fs-xs); letter-spacing: .12em;
  color: var(--c-text-mute);
}
.gb-hero__cue i {
  display: block; width: 1px; height: 30px;
  background: linear-gradient(var(--c-accent), transparent);
  animation: gb-cue 1.8s ease-in-out infinite;
}
@keyframes gb-cue {
  0%, 100% { opacity: .3; transform: scaleY(.6); }
  50%      { opacity: 1;  transform: scaleY(1); }
}
/* 좁은 화면에서는 스크롤이 당연하다. 자리만 먹는다. */
@media (max-width: 860px) { .gb-hero__cue { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .gb-hero__note::before,
  .gb-hero__cue i { animation: none; }
}
.gb-hero__art { color: var(--c-text-2); position: relative; }
.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-select 가 그린다. 여기서는 크기만 손댄다.

   예전에는 이 규칙이 <select> 자체에 붙어 테두리를 그렸다.
   컴포넌트로 바꾸면서 클래스가 바깥 상자로 옮겨 갔는데 규칙을 그대로 두었더니,
   바깥 상자와 안쪽 버튼이 각각 테두리를 그려 선이 두 겹으로 보였다. */
/* 머리말 오른쪽에는 세 가지가 나란히 선다 — 언어, 로그인, 인연 찾기.
   셋 다 무게가 다르면 무엇을 누르라는 것인지 읽히지 않는다.
   눌러야 하는 것은 "인연 찾기" 하나뿐이므로 그것만 채우고,
   언어와 로그인은 같은 무게로 낮춰 둔다.

   언어 칸에만 테두리를 남겼더니 로그인이 홀로 맨몸이 되어
   조용한 것이 아니라 버튼이 빠진 자리처럼 보였다. */
.gb-lang-select .gb-select__btn {
  min-width: 0;
  min-height: 34px;
  padding: 5px 6px 5px 8px;
  border-color: transparent;
  background: none;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.gb-lang-select .gb-select__btn:hover,
.gb-lang-select.is-open .gb-select__btn {
  border-color: transparent;
  background: var(--c-surface-2);
  color: var(--c-text);
}
.gb-lang-select .gb-select__list { right: 0; left: auto; }

@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: var(--h-label); 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;
}
/*
 * 폼 화면의 본문 상자.
 *
 * ⚠️ 폭은 다른 화면과 **같다**(--w-content, 720px).
 *
 *   전에는 560px 였다. 그래서 '내 정보'·'알림 설정'·'안 마주치기' 세 화면만
 *   제목이 367px 에서 시작하고, 나머지 아홉 화면은 287px 에서 시작했다.
 *   손님이 위쪽 메뉴로 다니면 560px 짜리는 '내 정보' 하나뿐이라 혼자 튀었다.
 *   사장님이 "css 가 꼬였나" 하고 물으신 것이 이것이다.
 *
 *   좁게 둔 이유는 있었다 — 긴 입력칸은 읽기 어렵다. 그것은 **상자가 아니라
 *   칸**을 좁히면 된다(아래 form 규칙). 그러면 제목과 첫 칸의 왼쪽 끝도
 *   그대로 맞는다. 둘 다 상자의 왼쪽에서 시작하기 때문이다.
 */
.gb-form-page { max-width: var(--w-content); padding-top: var(--s-5); }

/*
 * 입력은 좁게. 한 줄이 너무 길면 눈이 되돌아올 자리를 놓친다.
 *
 * 상자가 아니라 폼에 건다. 폼 밖에 있는 것(목록·표·카드)은 넓게 써야 한다 —
 * 파트너 화면의 예약 목록과 정산 표가 그렇다.
 */
.gb-form-page form { max-width: 560px; }
.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); }

/* 필터는 한 줄에 늘어놓되 좁은 화면에서 자연스럽게 접힌다. */
/*
 * 거르는 줄.
 *
 * 예전에는 1fr 짜리 격자였다. 칸이 둘뿐인 화면에서는 트랙이 400px 씩 되어
 * 고르는 칸 사이가 텅 비고, 늘어나는 성질을 가진 단추만 트랙을 가득 채워
 * '검색' 이 화면 절반짜리 막대가 됐다. 감사 로그가 그 꼴이었다.
 *
 * 칸은 제 몸집대로, 단추는 제 크기대로 나란히 놓는다.
 */
.gb-filters {
  display: flex;
  flex-wrap: wrap;
  /*
   * **위**를 기준으로 세운다.
   *
   * 아래를 기준으로 세우던 때는 도움말이 칸 높이를 늘려 옆 칸과 줄이 안 맞았고,
   * 그래서 도움말을 자리에서 빼(absolute) 아래에 띄웠다. 자리에서 뺀 것은
   * 부모를 안 늘리므로 아래에 20px 을 손으로 비워 뒀는데 — 도움말이 두 줄만
   * 넘어가도 그 손보정이 모자란다. 제재 화면의 '두 글자부터 찾습니다…' 가
   * 세 줄이라 상자 아래 테두리를 넘어 다음 칸 위로 흘러내렸다.
   *
   * 위 기준이면 그 손보정이 통째로 필요 없다. 라벨은 어느 칸이나 한 줄이고
   * 칸 높이는 --h-field 로 같으니, 도움말이 몇 줄이든 **입력칸끼리는 저절로
   * 줄이 맞는다.** 도움말은 흐름 안에 있으니 상자도 그만큼 커진다.
   */
  align-items: flex-start;
  gap: var(--s-3);
  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: 0;
  flex: 0 1 auto;
}

/*
 * 아래에 바로 다른 칸이 오면 라벨이 이 상자의 테두리에 붙는다(간격 0px).
 * 그러면 그 라벨이 상자 안 것인지 밖 것인지 안 보인다.
 */
.gb-filters { margin-bottom: var(--s-5); }

/*
 * 표가 아니라 **폼에 값을 넣어 주는** 거르개 줄.
 *
 * 제재 화면의 '사람 찾기' 가 그렇다. 찾은 결과가 아래 '대상' 칸의 후보가 된다.
 * 그런데 이 줄만 화면 폭(1184px)을 다 쓰고 아래 폼은 720px 이라, 둘이
 * 상관없는 두 덩어리로 보였다. 폭을 맞춰 한 줄기로 읽히게 한다.
 */
.gb-filters--form { max-width: 720px; }

/*
 * 좁은 화면에서는 칸마다 줄이 바뀐다. 그러면 단추가 맞출 라벨 줄이 없고,
 * 내려 둔 만큼이 그냥 빈틈으로 남는다.
 */
@media (max-width: 640px) {
  .gb-filters .gb-btn { margin-top: 0; }
}

/*
 * 단추에는 라벨이 없다. 그만큼 내려야 옆 칸과 나란히 선다.
 * 안 내리면 단추만 라벨 줄에 올라가 붙는다.
 */
.gb-filters .gb-btn {
  margin-bottom: 0;
  margin-top: var(--h-label);
  flex: 0 0 auto;
}

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

.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-kv__v--warn { color: var(--c-danger); }
.gb-kv__v--warn strong {
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--c-danger-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
/* 태어난 해는 나이 옆에 조용히. 대조용이지 읽을 값이 아니다. */
.gb-kv__v em { font-style: normal; color: var(--c-text-mute); font-weight: 400; }

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

.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 는 inline-flex 라 제 글자만큼만 차지해야 한다. 그런데
 *   .gb-field 안에 넣으면 688px 짜리 알약이 됐다 — 둥근 테두리가 화면을
 *   가로지르니 체크 칸이 아니라 글 적는 칸처럼 보인다.
 *
 *   .gb-field 가 세로 flex 묶음이라(657줄) 그 안의 것은 flex 항목이 되고,
 *   flex 항목의 inline-flex 는 flex 로 바뀐다(blockify). 늘어나지 말라고
 *   적어 둔 inline 이 그 순간 사라지는 것이다. CSS 를 봐서는 안 보인다.
 *
 *   align-self 로 제자리에 세운다. .gb-field 는 건드리지 않는다 —
 *   그쪽을 고치면 다른 칸들이 다 같이 움직인다.
 */
.gb-check { align-self: flex-start; }
.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: 132px; height: 176px; 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; }

/* ── 무엇을 얼마에 ──────────────────────────────────
 *
 * 값이 종류마다 다른데 위에는 제일 싼 것 한 줄만 있었다.
 * 45,000원이 열 시간짜리라는 것을 예약 화면에 가서야 알면 늦다.
 */
.gb-sells { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.gb-sells__row {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
/* min-width:0 이 없으면 긴 설명이 값 칸을 밀어낸다. */
.gb-sells__what { flex: 1; min-width: 0; }
.gb-sells__what strong { display: block; font-size: var(--fs-sm); }
.gb-sells__what span {
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); color: var(--c-text-mute); line-height: 1.5;
}
/* 값은 오른쪽에 붙여 세로로 줄을 맞춘다. 훑을 때 눈이 한 줄로 내려간다. */
.gb-sells__price { flex: 0 0 auto; text-align: right; }
.gb-sells__price strong {
  display: block; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gb-sells__price span {
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); color: var(--c-text-mute); white-space: nowrap;
}
/* 실제로 나가는 돈. 단가보다 이쪽이 결정에 쓰이므로 흐리게 두지 않는다. */
.gb-sells__least {
  color: var(--c-text-2) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .gb-sells__row { flex-direction: column; gap: var(--s-2); }
  .gb-sells__price { text-align: left; }
}

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

/*
 * 프로필 안의 일기 몇 줄.
 *
 * 목록 화면(diary/)의 카드와 다르게 만든다. 저기는 글을 읽으러 온 자리라
 * 사진을 크게 쓰지만, 여기는 **이 사람이 어떤 사람인지 가늠하는 자리**라
 * 사진은 작고 제목이 앞선다. 같은 모양으로 두면 프로필이 일기 목록에 잡아먹힌다.
 */
.gb-host__diary { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.gb-host__diary-link {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
}
.gb-host__diary-link:hover { background: var(--c-surface-2); }
.gb-host__diary-img {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--r-sm);
}
/* 제목이 길어도 카드를 넓히지 못하게 한다. 파트너가 적는 글이라 길이를 우리가 못 정한다. */
.gb-host__diary-text { min-width: 0; display: grid; gap: 2px; }
.gb-host__diary-text strong {
  font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-host__diary-text em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-host__diary-text span { font-size: var(--fs-xs); color: var(--c-text-mute); }

/* 앞뒤 파트너로 넘어가는 줄 */
.gb-host__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.gb-host__nav a { color: var(--c-accent); text-decoration: none; }
.gb-host__nav a:hover { text-decoration: underline; }
/* 가운데 '목록' 은 앞뒤 링크와 달리 눌러도 옆 사람이 아니라 목록으로 간다.
   같은 색으로 두면 셋이 한 묶음처럼 보여서 잘못 누른다. */
.gb-host__nav-list { color: var(--c-text-mute) !important; }

/* 파트너 사진 여러 장 — includes/gallery.php */

/* 손님이 보는 자리. 옆으로 밀어서 본다. */
.gb-gal__strip {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--s-2); overflow-x: auto;
  /* 밀 수 있다는 것이 보이도록 마지막 장이 살짝 걸치게 둔다 */
  scroll-snap-type: x proximity;
}
.gb-gal__strip > li { flex: 0 0 auto; scroll-snap-align: start; }
.gb-gal__open { display: block; border-radius: var(--r-md); overflow: hidden; }
.gb-gal__open img {
  display: block; width: 120px; height: 160px; object-fit: cover;
  background: var(--c-surface-2);
}
.gb-gal__open:hover img { opacity: .9; }

/* 파트너가 고치는 자리 */
.gb-gal__grid {
  list-style: none; margin: 0 0 var(--s-3); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2);
}
.gb-gal__item { display: grid; gap: 4px; justify-items: center; }

/*
 * 이미 올린 사진을 다시 다듬는 단추.
 *
 * 지우기 체크상자 위에 둔다. 둘이 나란히 있으면 '지우기' 를 누르려다
 * '다듬기' 를 누르는 일이 생긴다 — 하나는 되돌릴 수 있고 하나는 없다.
 */
.gb-gal__edit,
.gb-prf__edit {
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  padding: 3px 10px;
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.gb-gal__edit:hover,
.gb-prf__edit:hover { border-color: var(--c-accent); color: var(--c-accent); }
.gb-gal__edit:disabled,
.gb-prf__edit:disabled { opacity: .5; cursor: default; }

/*
 * 다듬었지만 아직 저장 전이라는 표.
 *
 * 화면의 사진은 이미 바뀌어 있다. 그것만 보면 저장까지 끝난 줄 안다 —
 * 그 상태로 나가면 손본 것이 사라진다. 그래서 눈에 띄는 색으로 붙인다.
 *
 * ⚠️ 사진 **위에** 얹는다. 아래에 줄로 붙였더니 그 칸만 한 줄이 늘어서,
 *   다섯 칸 중 하나만 아래 단추가 내려앉았다. 표를 붙이는 일이 옆 칸의
 *   자리를 흔들면 안 된다.
 */
.gb-gal__item,
.gb-prf__shotwrap { position: relative; }

.gb-gal__wait {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--c-accent);
  color: var(--c-accent-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  /* 사진 위에 있으므로 누르는 것을 방해하지 않는다. */
  pointer-events: none;
}

/* 대표 사진 쪽은 사진 아래에 붙인다. 사진 상자는 크기가 고정돼 있어
   그 안에 넣으면 잘린다 — 그래서 감싸는 칸을 하나 더 둔다. */
.gb-prf__shotwrap {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.gb-gal__thumb {
  display: block; width: 100%; height: 128px; object-fit: cover;
  border-radius: var(--r-md); background: var(--c-surface-2);
}
.gb-gal__del {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--c-text-2); cursor: pointer;
}
.gb-gal__full { font-size: var(--fs-sm); color: var(--c-text-mute); }

/* 크게 보기 — assets/js/gallery.js 가 만든다 */
.gb-lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 96vw; max-height: 96vh;
}
.gb-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.gb-lightbox__img {
  display: block; max-width: 96vw; max-height: 78vh;
  margin: 0 auto; border-radius: var(--r-md);
}
.gb-lightbox__bar {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-2); color: #fff;
}
.gb-lightbox__at { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.gb-lightbox__nav, .gb-lightbox__x {
  border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-sm);
  background: transparent; color: #fff;
  padding: var(--s-1) var(--s-3); font-size: var(--fs-sm); cursor: pointer;
}
.gb-lightbox__nav:hover, .gb-lightbox__x:hover { background: rgba(255, 255, 255, .15); }
.gb-lightbox__x { margin-left: var(--s-2); }

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

/* 예약 버튼은 늘 보이는 자리에 둔다. 긴 프로필을 다 내려야
   예약할 수 있으면 거기까지 안 내려간다. */
/*
 * ⚠️ 가로로 세운다.
 *
 *   마크업의 뜻은 처음부터 "담기는 예약 버튼 **옆에**" 였는데, 실제로는
 *   세로로 쌓이고 **사이 간격이 0px** 이었다. 두 단추가 딱 붙어 있으니
 *   여백이 없어 보인다 — 사장님이 "여기도 여백이 없네" 라고 한 자리다.
 *
 *   담기는 제 너비만, 예약하기가 남은 자리를 다 쓴다. 예약이 주된 일이다.
 */
.gb-sticky-cta {
  position: sticky; bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-4);
  background: linear-gradient(180deg, transparent, var(--c-bg) 30%);
}
.gb-sticky-cta > .gb-btn { flex: 1; }
.gb-sticky-cta .gb-fav-btn { flex: 0 0 auto; }

/*
 * 아주 좁으면 담기 글자를 빼고 하트만 남긴다. 두 단추가 한 줄에 들어가야 한다.
 *
 * ⚠️ display:none 을 쓰면 안 된다.
 *   하트는 aria-hidden 이라, 글자를 display:none 으로 지우면 그 단추에
 *   **읽을 이름이 하나도 안 남는다.** 화면으로 보는 사람에게는 똑같아 보이고,
 *   소리로 듣는 사람에게는 "버튼" 이라고만 들린다.
 *   그것도 이 사이트에서 가장 많이 쓰일 폭(휴대폰)에서만 그렇게 된다.
 *
 *   눈에서만 치우고 이름은 남긴다.
 */
@media (max-width: 420px) {
  .gb-sticky-cta .gb-fav-btn__label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

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

.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; }
/*
 * 왼쪽 메뉴는 화면에 붙어 있는다.
 *
 * 전에는 본문 높이만큼 늘어났다. 설정처럼 긴 화면(3350px)에서는 메뉴도
 * 3350px 이 되고, 맨 아래에 붙은 꼬리(계정·로그아웃)가 `margin-top: auto`
 * 로 **2000px 아래**까지 밀렸다. 메뉴 밑으로 빈 띠가 화면 몇 개 분량이고,
 * 로그아웃을 누르려면 거기까지 스크롤해야 했다.
 *
 * position: sticky + 화면 높이로 잡으면, 메뉴는 늘 보이는 자리에 있고
 * 남는 공간도 딱 한 화면 안에서만 생긴다.
 * 메뉴가 화면보다 길어지면 메뉴 안에서만 스크롤한다.
 */
.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;

  position: sticky;
  top: 0;
  /* 늘어나지 않게. 이것이 없으면 flex 가 본문 높이에 맞춰 잡아당긴다. */
  align-self: flex-start;
  /* dvh 는 폰에서 주소창을 뺀 진짜 높이다. 모르는 브라우저를 위해 vh 를 먼저. */
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}
.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; }

/*
 * 하는 일별 묶음. 스물넷이 한 줄로 늘어서면 아는 사람만 찾는다.
 *
 * 처음에는 작은 대문자(text-transform: uppercase)로만 구분했다. 영어라면
 * 그것만으로 '이건 라벨이다' 가 읽히는데, 한국어에는 대문자가 없어서
 * 아무 일도 일어나지 않았다 — 그냥 조금 작은 글자가 하나 더 있을 뿐이었다.
 *
 * 그래서 글자 대신 자리로 가른다. 묶음 사이에 실선을 넣고 숨을 띄운다.
 */
.gb-admin__group { display: flex; flex-direction: column; }

.gb-admin__group + .gb-admin__group {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}

.gb-admin__group-title {
  margin: 0 0 var(--s-1);
  padding: 0 var(--s-4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  /* 메뉴 글자(--c-text-2)보다 흐리게. 라벨은 읽히되 앞서지 않아야 한다. */
  color: var(--c-text-mute);
  text-transform: uppercase;   /* 영어 묶음 이름이 생길 때를 위해 남겨 둔다 */
}

/*
 * 묶음 안의 항목은 라벨보다 한 칸 들어간다. 눈으로 딸려 보이게.
 * (모든 항목이 투명한 2px 왼쪽 테두리를 갖고 있어 글자는 서로 맞는다)
 */
.gb-admin__group a { padding-left: var(--s-5); }
.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);
  border-top: 1px solid var(--c-line);
  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-host-list)와 모양은 닮되, 담는 것은 관리 정보다.
 */
.gb-hostcards {
  list-style: none; margin: 0 0 var(--s-4); padding: 0;
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.gb-hostcard {
  display: flex; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.gb-hostcard__shot {
  flex: 0 0 90px; height: 120px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center;
}
.gb-hostcard__shot img { width: 100%; height: 100%; object-fit: cover; }
.gb-hostcard__noshot {
  font-size: var(--fs-xs); color: var(--c-text-mute); text-align: center; padding: 4px;
}
/* min-width:0 이 없으면 긴 메일 주소가 카드를 밀어 벌린다. */
.gb-hostcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gb-hostcard__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gb-hostcard__name { font-size: var(--fs-md); }
.gb-hostcard__mail {
  margin: 0; font-size: var(--fs-xs); color: var(--c-text-mute);
  overflow-wrap: anywhere;
}
.gb-hostcard__facts {
  margin: 0; display: grid; gap: 2px var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  font-size: var(--fs-xs);
}
.gb-hostcard__facts > div { display: flex; gap: 6px; }
.gb-hostcard__facts dt { color: var(--c-text-mute); }
.gb-hostcard__facts dd { margin: 0; font-weight: 600; }
.gb-hostcard__acts {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: auto; padding-top: var(--s-2);
}

/* 카드 하나가 한 줄을 다 쓰는 폭. 두 장을 억지로 욱여넣으면 단추가 겹친다. */
@media (max-width: 520px) {
  .gb-hostcards { grid-template-columns: 1fr; }
  .gb-hostcard__shot { flex-basis: 66px; height: 88px; }
}

.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);
    position: static;
    height: auto;
    overflow: visible;
    /*
     * align-self 도 되돌려야 한다. 이것을 빠뜨려서 한 번 깨뜨렸다.
     *
     * 위(가로 배치)에서는 세로로 안 늘어나게 하려고 flex-start 를 줬는데,
     * 폰에서는 배치가 세로로 바뀌므로 그 축이 **가로**가 된다. 그대로 두면
     * 메뉴가 폭을 안 채우고 제 내용만큼(1620px) 벌어져서, 화면 전체가
     * 옆으로 밀린다. 메뉴는 옆으로 스크롤되게 해 둔 것인데 그것도 무너진다.
     */
    align-self: stretch;
  }
  .gb-admin__nav   { flex-direction: row; overflow-x: auto; }

  /* 좁은 화면에서는 메뉴가 옆으로 미는 한 줄이 된다.
     묶음을 그대로 두면 묶음마다 세로 칸이 되어 두 층으로 어긋난다.
     display:contents 로 껍데기를 지워 링크만 한 줄에 늘어놓고,
     묶음 제목은 감춘다 — 한 줄짜리 메뉴에 소제목은 자리만 먹는다. */
  .gb-admin__group       { display: contents; }
  .gb-admin__group-title { display: none; }

  /* 세로 메뉴에서 주던 들여쓰기는 가로 한 줄에서는 그냥 빈틈이 된다. */
  .gb-admin__group a { padding-left: var(--s-4); }

  .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); }
  /* 줄바꿈을 빼먹으면 이메일 + 권한 + 링크 두 개가 한 줄에 늘어서서
     390px 화면에서 페이지 전체에 가로 스크롤이 생긴다. */
  .gb-admin__foot  { flex-direction: row; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

  /* 여기 넷(손님/파트너 화면으로·비밀번호 변경·로그아웃)이 20px 였다.
     넓은 화면에서는 손이 아니라 마우스로 누르므로 그대로 촘촘히 둔다 —
     관리자 화면은 한 번에 많이 보는 것이 목적이다. */
  .gb-admin__foot a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-top: 0;
  }
  .gb-admin__main  { padding: var(--s-4); }
}

@media (max-width: 860px) {
  /*
   * ── 손끝이 닿는 크기 ───────────────────────────────
   *
   * 앱으로도 낼 화면이라 손가락으로 눌러 봐야 한다. 눈으로는 멀쩡한데
   * 실제로는 못 누르는 것이 여럿 있었다 — 재 보니 높이가 16~20px 였다.
   * 40px 은 손끝이 닿는 최소치다.
   */

  /* 꼬리말 링크 묶음. 세로로 쌓이는데 한 줄이 17px 이었다. */
  .gb-footer__col li a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  /* 화면 아래 안내 줄의 링크 — 비밀번호 변경·알림 설정·탈퇴하기.
     셋 다 중요한 자리인데 16px 이었다. */
  .gb-form-page__note a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /*
   * 문장 속 링크. ("자세한 것은 여기를 보세요 — 요금 안내 · 취소·환불 규정")
   *
   * 처음에는 보이지 않는 판을 위아래로 11px 씩 덧댔다. 그랬더니 두 링크가
   * 잇달아 놓인 문단에서 아랫줄 판이 윗줄 링크를 덮어, '대표 인사말' 을
   * 누르면 '요금 안내' 가 눌렸다. 못 누르는 것보다 나쁘다.
   *
   * 그래서 줄 사이를 먼저 벌리고, 그 안에서만 닿는 넓이를 넓힌다.
   * 넓히는 폭은 줄 간격보다 좁아야 한다.
   */
  .gb-page p:not(.gb-page__cta) { line-height: 2.3; }
  .gb-page p:not(.gb-page__cta) a { padding: 5px 0; }

  /*
   * 손가락으로 누르는 화면에서는 표 안의 글자 링크도 눌러야 한다.
   * '#8' 같은 한두 글자짜리는 그냥 두면 15×17 픽셀이라 손끝이 안 닿는다.
   *
   * 넓은 화면에서는 건드리지 않는다. 관리자 화면은 한 번에 많이 보는 것이
   * 목적이라 줄 높이를 늘리면 그만큼 덜 보인다.
   */
  /* 새로 만든 자리들. 글자만 두면 높이가 17~23px 이라 손끝이 안 닿는다.
     카드 제목·안내문 속 링크·주소 표시가 여기 해당한다. */
  .gb-prog__title a,
  .gb-rstcard__title a,
  .gb-popcard__title a,
  .gb-alert__body a,
  .gb-admin__lead a,
  .gb-field__help a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  /*
   * 작은 단추는 폰에서 손끝에 맞춘다.
   *
   * sm 단추의 padding 만으로는 31px 다. 처음에는 자리마다 따로 키웠다 —
   * 표 안의 단추, 서비스 카드, 제휴 식당 카드… 그리고 팝업 카드를 만들자마자
   * 또 31px 이 나왔다. 자리를 하나 늘릴 때마다 빠뜨리는 규칙이면
   * 그건 자리의 문제가 아니라 단추의 문제다.
   *
   * 그래서 sm 단추 전체에 건다. 폰에서 이보다 작아야 할 단추는 없다.
   */
  .gb-btn--sm { min-height: 36px; }

  /*
   * 표 안에서 누르는 것들.
   *
   * 처음에는 a 와 summary 만 적었다. 그런데 줄마다 있는 '보임/숨김' 토글과
   * 폼으로 감싼 '지우기' 는 <button> 이라 여기서 빠졌고, 폰에서 25px·31px
   * 로 남았다 — 링크만 손끝에 맞고 단추는 안 맞는 상태였다.
   * 표가 있는 관리자 화면 전부에 해당한다.
   */
  .gb-tbl td a,
  .gb-tbl td summary,
  .gb-tbl td button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 높이만 주면 '#8' 같은 두 글자짜리는 폭이 15px 로 남는다.
       손끝은 가로세로 둘 다 필요하다. */
    min-height: 36px;
    min-width: 36px;
  }
}

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

/* ── 왜 여기인가 ─────────────────────────────────────
   글 목록과 사진을 나란히 둔다. 카드 여섯 장으로 만들면
   여섯 개가 각각 무게를 가져가서 하나도 안 읽힌다.
   목록으로 두면 위에서 아래로 훑고 지나간다. */

.gb-why__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
/* 글 쪽은 세로로 쌓인다. 좁은 화면에서 사진이 위로 갈 때도 흐름이 같다. */
.gb-why__text { display: flex; flex-direction: column; }
.gb-why__list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.gb-why__list li {
  position: relative;
  padding-left: 30px;
  line-height: 1.6;
}
/* 체크 표시는 글자가 아니라 그림이다. 스크린리더가 읽을 것이 없다. */
.gb-why__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.gb-why__cta { margin-top: var(--s-5); }
.gb-why__art { position: relative; }
.gb-why__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  display: block;
}

/* ── 후기 인용 ──────────────────────────────────────
   후기는 사람이 쓴 말이라 길이가 제각각이다.
   카드 높이를 맞추지 않고, 이름만 바닥에 붙인다. */

.gb-quote { display: flex; flex-direction: column; }
.gb-quote__stars { color: var(--c-accent); letter-spacing: 1px; }
.gb-quote__body {
  margin: var(--s-3) 0 var(--s-4);
  line-height: 1.8;
  color: var(--c-text-2);
}
.gb-quote__who {
  margin: auto 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-plum);
}

@media (max-width: 860px) {
  .gb-why__inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .gb-why__art { order: -1; }
}

/* ── 관리자 서비스 관리 ─────────────────────────────
   표 안에서 바로 공개/비공개와 순서를 바꾼다.
   편집 화면까지 들어갔다 나오게 하면 아무도 정리하지 않는다. */

.gb-admin__lead {
  margin: var(--s-2) 0 0;
  color: var(--c-text-mute);
  font-size: var(--fs-sm);
}
.gb-admin__note {
  margin-top: var(--s-4);
  color: var(--c-text-mute);
  font-size: var(--fs-xs);
  line-height: 1.7;
}
.gb-admin__form { max-width: 720px; }
.gb-admin__section {
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-plum);
}
.gb-admin__hint {
  margin-left: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-mute);
}
.gb-admin__actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}

/* 표 안의 작은 폼. 버튼 하나뿐이라 줄을 차지하면 안 된다. */
.gb-inline-form { display: inline; margin: 0; }
/* ── 쪽 이동 ──────────────────────────────────────
   이용자 화면과 관리자 화면이 함께 쓴다. 그래서 여기 둔다.
   content.css 에 두었더니 관리자 쪽에서는 규칙이 아예 안 걸려,
   쪽번호가 손가락으로 누를 수 없는 맨 글자로 나왔다. */

.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 {
  /* 44px 은 손끝이 닿는 최소치다. 숫자 한 자리라도 이만큼은 준다. */
  min-width: 44px;
  height: 44px;
  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-pager__gap {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 44px;
  color: var(--c-text-mute);
}

/* 총 건수. 몇 건인지 모르면 다 본 것인지 알 수 없다. */
.gb-pager__count {
  margin: var(--s-2) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
}

/* 큰 단추 줄. 이것도 양쪽이 함께 쓴다. */
.gb-page__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.gb-linkbtn {
  /* 손끝이 닿을 만큼은 준다. 순서 바꾸는 ↑ ↓ 는 글자가 한 자라
     padding 만으로는 24×25 짜리 점이 된다. */
  min-height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.gb-linkbtn:hover { background: var(--c-surface-2); }

.gb-tbl__thumb { width: 76px; }
.gb-tbl__thumb img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
  background: var(--c-surface-2);
}
.gb-tbl__order { white-space: nowrap; }
.gb-tbl__act   { text-align: right; white-space: nowrap; }

/* 내려 둔 항목은 흐리게. 지운 것이 아니라 안 보이는 것뿐임을 남긴다. */
.gb-tbl tr.is-off td { opacity: .55; }

/* 지금 쓰는 그림과 바꿀 칸을 나란히 둔다.
   무엇을 바꾸는지 보이지 않으면 엉뚱한 것을 덮어쓴다. */
.gb-thumb-edit {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
.gb-thumb-edit img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  flex: 0 0 auto;
}
.gb-thumb-edit > div { flex: 1; min-width: 0; }

.gb-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
}

/* 둘씩 묶어 놓을 때. 셋짜리 격자에 넷을 넣으면 마지막 하나가
   둘째 줄에 혼자 남아, 빠뜨린 칸처럼 보인다. */
.gb-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}

@media (max-width: 640px) {
  .gb-thumb-edit { flex-direction: column; }
  .gb-thumb-edit img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}

/* ── 고르는 칸 ──────────────────────────────────────
   진짜 <select> 는 그대로 두고 그 위에 우리 목록을 덧씌운다.
   스크립트가 막히면 is-ready 가 붙지 않아 원래 칸이 그대로 보인다. */

.gb-select { position: relative; display: inline-block; }
.gb-select__native {
  font: inherit;
  color: var(--c-text-2);
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  appearance: none;
  -webkit-appearance: none;
}
/* 화살표는 우리가 그린다. 기본 화살표는 브라우저마다 자리와 크기가 다르다. */
.gb-select__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0 10px 0 12px;
  pointer-events: none;
  color: var(--c-text-2);
}
.gb-select__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-select__arrow { flex: 0 0 auto; transition: transform .15s; }

/* 스크립트가 붙은 뒤에는 진짜 칸을 감추고 버튼이 자리를 잡는다. */
.gb-select.is-ready .gb-select__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  border: 0;
}
/*
 * 고르는 칸은 적는 칸(.gb-input)과 **같은 크기여야 한다.**
 *
 * 둘은 폼에서 나란히 선다. 전에는 select 가 38px, input 이 45px 이라
 * 7px 이 어긋났고, `align-items: flex-end` 로 바닥만 맞으니 위가 밀려
 * 라벨 높이까지 들쑥날쑥해졌다. 글자 크기와 모서리도 서로 달라서
 * 한 폼 안에 두 벌의 디자인이 섞여 보였다.
 *
 * 그래서 padding·font-size·border-radius 를 .gb-input 과 똑같이 맞춘다.
 * 여기 숫자를 고칠 일이 생기면 .gb-input 도 함께 고쳐야 한다.
 *
 * 머리말의 언어 고르개(.gb-lang-select)는 자기 크기를 따로 정해 두었으므로
 * 이 값에 영향을 받지 않는다.
 */
.gb-select__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 108px;
  min-height: var(--h-field);
  padding: 11px 10px 11px 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
}
.gb-select__btn:hover { border-color: var(--c-accent); }
.gb-select.is-ready .gb-select__face { position: static; flex: 1; padding: 0; }
.gb-select.is-open .gb-select__btn  { border-color: var(--c-accent); }
.gb-select.is-open .gb-select__arrow { transform: rotate(180deg); }

.gb-select__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  z-index: 60;
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.gb-select__opt {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  white-space: nowrap;
  cursor: pointer;
}
/* 키보드로 짚고 있는 자리와 실제로 고른 자리는 다르다. 둘을 다르게 보인다. */
.gb-select__opt.is-at { background: var(--c-surface-2); color: var(--c-text); }
.gb-select__opt[aria-selected="true"] {
  color: var(--c-accent);
  font-weight: 600;
}
.gb-select__opt[aria-selected="true"].is-at { background: var(--c-accent-soft); }

/* ── 날짜 고르는 칸 ─────────────────────────────────
   진짜 날짜 칸은 그대로 두고 그 위에 우리 달력을 덧씌운다.
   스크립트가 막히면 is-ready 가 안 붙어 원래 칸이 그대로 보인다.

   크기는 .gb-select__btn 과 같아야 한다 — 셋(적는 칸·고르는 칸·날짜 칸)이
   한 줄에 나란히 서는 자리가 실제로 있다(파트너 달력의 '안 되는 날'). */

.gb-datepick { position: relative; display: inline-block; }

.gb-datepick.is-ready .gb-datepick__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  border: 0;
}

.gb-datepick__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-width: 168px;
  min-height: var(--h-field);
  padding: 11px 12px 11px 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.gb-datepick__btn:hover { border-color: var(--c-accent); }
.gb-datepick.is-open .gb-datepick__btn { border-color: var(--c-accent); }

/*
 * 줄 안에 시각 칸(.gb-input--sm)과 나란히 서는 자리용.
 *
 * ⚠️ min-height 를 지우면 안 된다. .gb-input--sm 은 padding 과 글자만 줄이고
 *   높이는 --h-field 를 그대로 쓴다. 여기서만 min-height: 0 을 줬더니
 *   날짜 칸 34px · 시각 칸 47px 로 한 줄에 두 가지 키가 섰다.
 *   tokens.css 가 --h-field 를 만든 이유가 정확히 이것이다.
 */
.gb-datepick--sm .gb-datepick__btn {
  min-width: 152px;
  padding: 6px 9px;
  font-size: var(--fs-sm);
}

.gb-datepick__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 아직 안 고른 칸. 고른 날짜와 같은 진하기면 이미 고른 줄 안다. */
.gb-datepick__value.is-empty { color: var(--c-text-mute); }
.gb-datepick__icon { flex: 0 0 auto; color: var(--c-text-mute); }

/* ── 판 ──────────────────────────────────────────── */
.gb-datepick__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - var(--s-5) * 2);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.gb-datepick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.gb-datepick__month {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
}
.gb-datepick__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
}
.gb-datepick__nav:hover { background: var(--c-surface-2); }
/* 갈 데가 없으면 눌러도 아무 일이 없다. 눌리는 것처럼 보이면 고장으로 읽힌다. */
.gb-datepick__nav:disabled { opacity: .28; cursor: default; }
.gb-datepick__nav:disabled:hover { background: transparent; }

.gb-datepick__week,
.gb-datepick__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.gb-datepick__week { margin-bottom: var(--s-1); }
.gb-datepick__wd {
  padding: var(--s-1) 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
/* 일요일은 붉게. 달력에서 눈이 가장 먼저 세는 기준점이다. */
.gb-datepick__wd.is-sun { color: var(--c-danger); }

.gb-datepick__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.gb-datepick__day:hover:not(:disabled) { background: var(--c-surface-2); }
.gb-datepick__day.is-sun { color: var(--c-danger); }

/*
 * 오늘은 테두리로만 표시한다.
 * 고른 날과 같은 방식(채우기)으로 그리면 둘 중 무엇을 고른 것인지 모른다.
 */
.gb-datepick__day.is-today { box-shadow: inset 0 0 0 1px var(--c-line); }

.gb-datepick__day.is-on,
.gb-datepick__day.is-on.is-sun {
  background: var(--c-accent);
  color: var(--c-accent-text);
  font-weight: 700;
  box-shadow: none;
}

/*
 * 고를 수 없는 날.
 *
 * 지우지 않고 흐리게 남긴다 — 빈칸으로 두면 달력의 줄이 어긋나고,
 * "이 날은 안 되는구나" 와 "이 날은 아예 없구나" 를 구분할 수 없다.
 */
.gb-datepick__day:disabled {
  color: var(--c-text-mute);
  opacity: .35;
  cursor: default;
  text-decoration: line-through;
}

/*
 * 아래 줄. '지우기' 는 왼쪽, '오늘' 은 오른쪽.
 *
 * ⚠️ :only-child 로는 안 된다. 목록 모양에서 '지우기' 는 지워지는 게 아니라
 *   hidden 으로 숨는다 — 형제로는 그대로 남아 있어서 :only-child 가 안 맞고,
 *   '오늘' 이 왼쪽에 붙어 버렸다.
 *   오른쪽 정렬을 기본으로 두고, '지우기' 가 보일 때만 스스로 왼쪽을 잡는다.
 */
.gb-datepick__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
}
.gb-datepick__link[data-act="clear"] { margin-right: auto; }
.gb-datepick__link {
  border: 0;
  background: transparent;
  padding: var(--s-1) var(--s-2);
  color: var(--c-accent);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.gb-datepick__link:hover { text-decoration: underline; }

/*
 * 좁은 화면에서 판이 화면 밖으로 나가는 것은 **자바스크립트가 재서 민다**
 * (assets/js/datepick.js 의 nudge). 여기서 left:50% 로 가운데를 맞췄더니
 * 단추가 좁고 왼쪽에 붙은 자리에서 판이 화면 왼쪽으로 47px 잘렸다 —
 * 가운데의 기준이 화면이 아니라 단추이기 때문이다.
 */

/* ── 관리자 랜딩 이미지 ───────────────────────────
   이름이 .gb-slot* 이었는데 그것은 예약 시간 고르는 조각의 이름이었다.
   이 파일 뒤쪽이라 이쪽이 이겨서, 예약 화면의 시간 알약이 세로 한 줄로
   늘어져 있었다. 그래서 .gb-imgslot* 으로 갈랐다. */

.gb-imgslots { display: flex; flex-direction: column; gap: var(--s-4); }
.gb-imgslot {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-5);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.gb-imgslot__preview img {
  width: 100%;
  height: auto;
  /*
   * 정사각형 자리(파비콘)가 260px 짜리 큰 그림으로 떴다.
   * 파비콘은 탭에 16px 로 나가는 것인데 카드 절반을 잡아먹었다.
   * 키를 막고 비율은 지킨다 — cover 로 두면 막힌 만큼 잘려 나간다.
   */
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  display: block;
}
/*
 * 기본 그림이 없는 자리(로고)의 미리보기.
 *
 * 빈 칸을 보여 주면 "아무것도 안 나간다" 로 읽힌다. 실제로는 글자 로고가
 * 나가고 있으므로 그것을 그대로 그린다. 사진 자리와 높이를 맞춰 둔다.
 */
.gb-imgslot__builtin {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}

.gb-imgslot__body { min-width: 0; }
.gb-imgslot__title {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: var(--fs-base);
  color: var(--c-plum);
}
.gb-imgslot__note { margin: 0 0 var(--s-2); color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.7; }
.gb-imgslot__meta { margin: 0 0 var(--s-3); color: var(--c-text-mute); font-size: var(--fs-xs); }
/* align-items: flex-start 를 두었더니 파일 칸이 28px 로 찌그러졌다.
   flex 안에서는 width:100% 가 자기 몫을 못 받는다. stretch 로 두고
   버튼 줄만 따로 왼쪽에 붙인다. */
.gb-imgslot__form { display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; }
.gb-imgslot__form input[type="file"] { width: 100%; max-width: 420px; }
.gb-imgslot__actions { display: flex; gap: var(--s-2); }

/* 좁은 화면에서는 미리보기를 위로 올린다.
   260px 를 고정으로 떼 주면 남는 칸이 너무 좁아서, 안에 있는
   버튼("이 사진으로 바꾸기")이 칸 밖으로 밀려 나가 화면 전체가
   가로로 넘쳤다. 관리자도 휴대폰으로 들여다본다. */
@media (max-width: 720px) {
  .gb-imgslot { grid-template-columns: 1fr; gap: var(--s-3); }
  .gb-imgslot__preview img { max-width: 320px; }
  .gb-imgslot__title,
  .gb-imgslot__actions { flex-wrap: wrap; }
}

/* 랜딩에서 관리자에게만 보이는 "바꾸기". 사진 위 모서리에 얹는다.
   관리자 화면을 뒤지지 않아도 되고, 어느 사진이 어느 자리인지 헷갈리지 않는다. */
.gb-editpin {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 5;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: rgba(36, 21, 33, .78);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(4px);
}
.gb-editpin:hover { background: var(--c-accent); }

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

/* ── 관리자 대시보드 ────────────────────────────────
   숫자가 0이면 조용히, 0이 아니면 눈에 띄게.
   전부 같은 무게로 두면 처리할 것이 있는 칸을 못 찾는다. */

.gb-dash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.gb-dash__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);
  text-decoration: none;
  color: inherit;
}
.gb-dash__card:hover { border-color: var(--c-accent); }
.gb-dash__n {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
}
.gb-dash__label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-2); }
.gb-dash__note  { font-size: var(--fs-xs); color: var(--c-text-mute); }

.gb-dash__card.is-waiting { border-color: var(--c-accent); background: var(--c-accent-soft); }
.gb-dash__card.is-waiting .gb-dash__n     { color: var(--c-accent); }
.gb-dash__card.is-waiting .gb-dash__label { color: var(--c-plum); }

/* 신고와 분쟁은 돈이 묶여 있는 자리라 한 단계 더 세게 본다. */
.gb-dash__card.is-danger { border-color: var(--c-danger); background: var(--c-danger-soft); }
.gb-dash__card.is-danger .gb-dash__n     { color: var(--c-danger); }
.gb-dash__card.is-danger .gb-dash__label { color: var(--c-danger); }

/* ── 공지 편집기 ────────────────────────────────────
   실제로 보내지는 것은 언제나 textarea 다.
   스크립트가 붙어야 is-ready 가 서고 보면서 쓰는 칸이 나온다. */

.gb-editor {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}
.gb-editor__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
}
/* 스크립트가 없으면 도구가 아무 일도 못 한다. 아예 감춘다. */
.gb-editor:not(.is-ready) .gb-editor__bar { display: none; }
.gb-editor__btn {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.gb-editor__btn:hover { background: var(--c-surface); border-color: var(--c-line); }
.gb-editor__spacer { flex: 1; }

/* 두 칸은 hidden 으로 번갈아 보인다. display 를 준 이상
   [hidden] 규칙을 함께 적어야 실제로 숨는다 — 안 그러면 서식/HTML 을
   오갈 때 두 칸이 위아래로 함께 남는다. */
.gb-editor__rich[hidden],
.gb-editor__source[hidden] { display: none !important; }

.gb-editor__rich,
.gb-editor__source {
  display: block;
  width: 100%;
  min-height: 260px;
  padding: var(--s-4);
  border: 0;
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.8;
}
.gb-editor__rich:focus,
.gb-editor__source:focus { outline: 2px solid var(--c-accent); outline-offset: -2px; }
/* HTML 을 직접 볼 때는 고정폭이 읽기 쉽다. 한글은 여기 거의 안 들어간다. */
.gb-editor__source { font-family: var(--f-mono); font-size: var(--fs-sm); resize: vertical; }
.gb-editor__rich :first-child { margin-top: 0; }
.gb-editor__rich ul,
.gb-editor__rich ol { padding-left: 1.3em; }

/* 켜고 끄는 몇 개짜리. 고르는 것이 많은 .gb-checks(알약 모양)와 다른 물건이다.
   전에 여기에도 .gb-checks 라고 적어 두는 바람에, 파일 뒤쪽인 이쪽이 이겨서
   신청 화면의 지역 알약이 그냥 네모 체크박스로 나오고 있었다. */
.gb-toggles { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-4) 0; }
.gb-toggle  { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.gb-toggle input { accent-color: var(--c-accent); }

/* 지우기는 되돌릴 수 없다. 저장 버튼과 멀리 떼어 놓는다. */
.gb-admin__danger {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}

/* ── 신고 처리 ──────────────────────────────────────
   표로 만들지 않았다. 신고는 글이 본체라 한 줄에 밀어 넣으면 읽히지 않고,
   읽지 않고 닫는 순간 이 화면의 뜻이 사라진다. */

.gb-rpt {
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-danger);
  border-radius: var(--r-md);
}
.gb-rpt.is-done { border-left-color: var(--c-line); opacity: .7; }

.gb-rpt__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.gb-rpt__cat  { font-weight: 700; color: var(--c-plum); }
.gb-rpt__age  { font-size: var(--fs-xs); font-weight: 700; color: var(--c-danger); }
.gb-rpt__when { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-mute); }

.gb-rpt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
/* 묶여 있는 돈은 눈에 띄어야 한다. 이게 이 화면을 미루면 안 되는 이유다. */
.gb-rpt__hold {
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--c-warn-soft);
  color: var(--c-warn);
  font-weight: 700;
}

.gb-rpt__body {
  margin: 0 0 var(--s-2);
  padding: var(--s-3);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  line-height: 1.75;
  font-size: var(--fs-sm);
}
.gb-rpt__by { margin: 0 0 var(--s-3); font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-rpt__resolution {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.7;
}
.gb-rpt__resolution strong { display: block; color: var(--c-plum); margin-bottom: 2px; }

.gb-rpt__actions { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); flex-wrap: wrap; }
.gb-rpt__resolve {
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
}

/* ── 관리자 검색 ────────────────────────────────────
   문의하는 사람은 자기가 무엇으로 가입했는지 기억하지 못한다.
   그래서 칸 하나로 이메일·전화·이름을 다 찾는다. */

.gb-search {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
}

/* 칸이 제 몸집대로 남으면 20자쯤 되는 좁은 상자가 된다. 이메일 하나도
   다 안 보인다. 자리가 있으면 늘어나게 두고, 위아래로는 한도를 둔다. */
.gb-search .gb-input {
  flex: 1 1 260px;
  min-width: 200px;
  max-width: 360px;
}

/* 목록 위 조작줄 — 왼쪽에 거르는 단추, 오른쪽에 찾는 칸.
   따로 두면 두 줄을 쓰면서도 양쪽 다 짧다. 좁은 화면에서는 접혀 두 줄이 된다. */
.gb-listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-4) 0 var(--s-3);
}
.gb-listbar .gb-tabs { margin: 0; flex: 1 1 auto; }

/* 기준폭을 적어 주지 않으면 폼이 제 안의 최소폭까지 쪼그라든다.
   그러면 옆에 빈자리가 남는데도 찾는 칸은 200px 짜리 그대로다. */
.gb-listbar .gb-search {
  margin: 0;
  flex: 0 1 420px;
  justify-content: flex-end;
}

/* 표 안에서 사유를 받아야 하는 자리. 평소에는 접혀 있다.
   늘 펼쳐 두면 표가 세로로 길어져 훑을 수가 없다. */
.gb-mini { display: inline-block; }
.gb-mini > summary {
  cursor: pointer;
  color: var(--c-danger);
  font-size: var(--fs-sm);
  list-style: none;
  /* '정지' 두 글자라 그냥 두면 25×21 이다. 표 안이라도 누를 수는 있어야 한다. */
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--s-2);
}
.gb-mini > summary::-webkit-details-marker { display: none; }
.gb-mini__body {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.gb-mini__body .gb-input { min-width: 180px; }

/* 신고가 걸린 줄은 표에서 바로 보여야 한다. */
.gb-tbl tr.is-flagged td { background: var(--c-danger-soft); }

/* ── 예약 이력 ──────────────────────────────────────
   무슨 일이 있었는지가 이 화면의 전부다.
   상태를 손으로 바꾸는 대신 흐름을 다 보여준다. */

.gb-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
}

.gb-trail {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-4);
  border-left: 2px solid var(--c-line);
}
.gb-trail__item {
  position: relative;
  padding: 0 0 var(--s-4) var(--s-3);
  font-size: var(--fs-sm);
}
.gb-trail__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s-4) * -1 - 5px);
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--c-accent);
}
.gb-trail__when { display: block; font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-trail__what { display: block; margin: 2px 0; }
.gb-trail__what code {
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
}
.gb-trail__who { display: block; font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-trail__why {
  display: block;
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .gb-cols { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ── 파트너 프로필 ─────────────────────────────── */

/* 사진과 고르는 칸을 나란히. 지금 걸려 있는 사진을 보면서 바꾸게 한다.
   미리보기 없이 파일 칸만 두면 자기 사진이 뭐였는지 모르고 덮어쓴다. */
.gb-prf__photo { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; }
.gb-prf__photo .gb-field { flex: 1; min-width: 0; }
/* 목록 카드·상세와 같은 세로 비율. 여기서만 정사각형으로 보여주면
   올린 사람은 얼굴이 나올 줄 알았는데 손님에게는 잘려 나간다. */
.gb-prf__shot {
  flex: 0 0 auto;
  width: 99px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  overflow: hidden;
}
.gb-prf__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-prf__noshot {
  padding: 0 var(--s-2);
  color: var(--c-text-mute);
  font-size: var(--fs-xs);
  text-align: center;
  line-height: 1.5;
}

/* 걸음 제목(h2) 아래의 작은 제목. '사진 여러 장' 같은 것. */
.gb-prf__sub {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

/* 언어는 스물 가까이 된다. 한 줄에 하나씩 두면 화면이 끝없이 길어져서
   두 칸으로 접는다. 좁은 화면에서는 한 칸. */
.gb-prf__langs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2) var(--s-4);
  margin: var(--s-3) 0 var(--s-4);
}
.gb-prf__lang { display: flex; align-items: center; gap: var(--s-2); }
.gb-prf__lang-name {
  flex: 0 0 84px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.gb-prf__lang .gb-select { flex: 1; min-width: 0; }

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

/* ── 파트너 상세: 이런 사람이에요 ─────────────────── */

/* 이름과 값이 짝이라 dl 이다. 두 칸으로 접어 세로로 길어지지 않게 한다. */
.gb-traits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2) var(--s-5);
  margin: 0;
}
.gb-traits__row { display: flex; gap: var(--s-3); align-items: baseline; min-width: 0; }
/* 84px 로 뒀더니 "좋아하는 술·음료" 가 두 줄로 접혔다. 이름 칸이 접히면
   값과 줄이 어긋나 무엇이 무엇인지 읽기가 어려워진다. */
.gb-traits__k {
  flex: 0 0 auto;
  min-width: 96px;
  color: var(--c-text-mute);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
/* 좋아하는 음식은 길게 적는 사람이 있다. 줄바꿈을 허용하고 칸을 넘기지 않는다. */
.gb-traits__v { margin: 0; min-width: 0; font-size: var(--fs-sm); }

/* 아홉 가지 질문 — includes/qna.php
   취향 표와 달리 두 칸으로 접지 않는다. 답이 한두 문장이라 좁은 칸에서
   여러 줄로 접히고, 질문과 답이 좌우로 어긋나 읽는 차례가 흐려진다. */
.gb-qna { margin: 0; display: grid; gap: var(--s-4); }
.gb-qna__row { display: grid; gap: 4px; }
.gb-qna__q {
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.gb-qna__a { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
/* 파트너가 답하는 자리의 안내문 */
.gb-qna__lead {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
:lang(ko) .gb-traits__v { word-break: keep-all; }

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

/* ── 1:1 문의 ──────────────────────────────────── */

.gb-inqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.gb-inq__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-decoration: none;
  color: inherit;
}
.gb-inq__link:hover { border-color: var(--c-accent); }
.gb-inq__top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.gb-inq__cat { font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-inq__subject { font-size: var(--fs-sm); min-width: 0; }
:lang(ko) .gb-inq__subject { word-break: keep-all; }
.gb-inq__when { font-size: var(--fs-xs); color: var(--c-text-mute); white-space: nowrap; }
/* 새 답변 표시. 뱃지 색을 쓰지 않고 점 하나로 둔다.
   목록에 색 상자가 두 개면 어느 쪽이 상태인지 헷갈린다. */
.gb-inq__new {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent);
}
.gb-inq__new::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
}

/* 주고받은 글. 대화방(gb-chat)과 달리 길게 쓰는 글이라 말풍선이 아니라 단락이다. */
.gb-talk { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.gb-talk__item {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}
/* 답변은 바탕을 달리해 훑을 때 누가 말했는지 바로 보이게 한다. */
.gb-talk__item.is-them { background: var(--c-accent-soft); border-color: transparent; }
.gb-talk__who {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-bottom: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-2);
}
.gb-talk__when { margin-left: auto; font-weight: 400; color: var(--c-text-mute); }
.gb-talk__body { font-size: var(--fs-sm); line-height: 1.8; }
:lang(ko) .gb-talk__body { word-break: keep-all; }

.gb-minilist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }

/* 신고를 닫으면서 함께 거는 제재. 처리 칸과 붙여 두되 선으로 갈라
   "이건 선택" 임이 보이게 한다. 기본이 "건다" 로 읽히면 안 된다. */
.gb-rpt__sanction {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--c-line);
}

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

/* ── 첫 화면 팝업 ─────────────────────────────────── */

/*
 * ⚠️ [hidden] 로 여닫는 것에는 반드시 [hidden]{display:none} 을 함께 적는다.
 *
 * 브라우저 기본 규칙 [hidden]{display:none} 은 우리 클래스 규칙보다 약하다.
 * .gb-popup 에 display:flex 를 준 순간 el.hidden = true 로는 안 사라진다.
 * 실제로 그랬다 — 닫기를 눌러도 상자는 그대로 있고 덮개만 걷혀서,
 * 어둡지 않은 화면에 팝업만 얹힌 채로 남았다.
 */
.gb-popup[hidden] { display: none !important; }

/*
 * 덮개가 없다.
 *
 * 전에는 뒤를 어둡게 깔고 화면을 잠갔다(rgba(40,18,32,.55) + 스크롤 잠금).
 * 그런데 첫 화면을 열면 히어로가 통째로 어두워져서, 처음 오는 사람이
 * 보는 첫 장면이 '어두운 사이트' 가 됐다.
 *
 * 사장님 말: "뒤가 어둡게 깔리는 것만 빼면 될 듯. 어차피 저걸 띄울지
 * 말지는 관리자가 결정하면 되니까."
 *
 * ⚠️ 색만 지우고 덮개를 남기면 안 된다.
 *   투명한 덮개가 화면 전체를 덮은 채 클릭을 먹는다. 화면은 밝은데
 *   메뉴도 단추도 안 눌린다 — 왜 안 눌리는지 보이지도 않는다.
 *   어둡게 안 할 것이면 덮개는 하는 일이 없으므로 통째로 뺐다.
 *
 * 그래서 팝업은 이제 **막는 문이 아니라 위에 얹힌 알림**이다.
 * 닫기·오늘 하루 열지 않기·Esc 로 닫는다. 뒤 화면은 그대로 쓸 수 있다.
 */

.gb-popup {
  position: fixed;
  z-index: 91;
  inset: 0;
  /* 가운데 맞추는 기준도 '실제로 보이는 높이' 여야 한다.
     inset:0 만 두면 주소창이 보일 때 아래쪽이 화면 밖으로 밀린다. */
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  /* 덮개를 눌러도 닫히지 않게 상자만 이벤트를 받는다.
     실수로 닫히면 여기 실린 경고를 못 본 채로 지나간다. */
  pointer-events: none;
}
.gb-popup__box {
  pointer-events: auto;
  width: 100%;
  max-width: 400px;
  /* 폰에서 100vh 는 주소창을 뺀 높이다. 그대로 두면 상자가 보이는 영역보다
     커져서, 맨 아래 '닫기' 가 주소창 뒤로 들어가 눌리지 않는다.
     상자 안을 스크롤해도 상자 자체가 화면 밖이라 올라오지 않는다. */
  max-height: calc(100vh - var(--s-6));
  max-height: calc(100dvh - var(--s-6));

  /*
   * 단추 줄은 늘 바닥에 붙여 둔다.
   *
   * 상자 전체를 스크롤하게 두면 글이 긴 팝업에서 '닫기' 가 아래로 숨는다.
   * 짧은 폰에서는 처음 열었을 때 단추가 아예 안 보이고, 그것이 스크롤해야
   * 나온다는 것을 모르는 사람은 팝업을 못 닫는다.
   *
   * 그래서 상자는 넘치지 않게 잠그고, 글 부분만 스크롤시킨다.
   */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  /*
   * 테두리와 그림자가 이제 혼자 일한다.
   *
   * 덮개가 있을 때는 어두운 바탕이 경계를 만들어 줬다. 그것을 빼고 나니
   * 흰 상자가 밝은 화면 위에 떠서 어디까지가 팝업인지 안 잡힌다.
   * 그림자를 한 단계 더 깊게 줘서 '얹혀 있다' 가 보이게 한다.
   */
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow:
    0 2px 6px rgba(107, 48, 80, .10),
    0 18px 50px -12px rgba(107, 48, 80, .38);
}
/* 그림과 단추 줄은 줄어들지 않는다. 글 부분만 늘고 줄고 스크롤한다. */
.gb-popup__img { display: block; flex: 0 0 auto; }
.gb-popup__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gb-popup__body {
  padding: var(--s-5);
  flex: 1 1 auto;
  min-height: 0;      /* 이게 없으면 flex 자식이 안 줄어들어 스크롤이 안 생긴다 */
  overflow-y: auto;
  overscroll-behavior: contain;   /* 끝까지 내려도 뒤 화면이 딸려 움직이지 않게 */
}
.gb-popup__title {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-plum);
}
.gb-popup__body p  { margin: 0 0 var(--s-2); font-size: var(--fs-sm); line-height: 1.8; }
.gb-popup__body ul,
.gb-popup__body ol { margin: 0 0 var(--s-2); padding-left: 1.3em; font-size: var(--fs-sm); line-height: 1.8; }

/* 두 버튼을 같은 무게로 두지 않는다. "오늘 하루" 는 조용한 글자,
   "닫기" 는 누르라고 만든 자리다. */
.gb-popup__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line);
  flex: 0 0 auto;                 /* 글이 길어도 이 줄은 늘 바닥에 남는다 */
  background: var(--c-surface);
}
.gb-popup__today {
  flex: 1;
  /* 글자만 두면 높이가 16px 이라 손끝이 안 닿는다. 조용한 글자로 보이되
     누를 수는 있어야 한다 — 배경 없이 높이만 준다. */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text-mute);
  font-family: inherit;
  font-size: var(--fs-xs);
  text-align: left;
  cursor: pointer;
}
.gb-popup__today:hover { color: var(--c-text-2); text-decoration: underline; }
.gb-popup__close {
  padding: 8px 18px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--c-accent);
  color: var(--c-accent-text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.gb-popup__close:hover { background: var(--c-accent-hover); }

/* 관리자에서 지금 걸린 그림을 확인하는 자리 */
.gb-pop-preview {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
}

/* ── 약관 편집 ─────────────────────────────────── */

/* 약관은 길다. 넉넉히 열어 두고 고정폭으로 둔다 — 조문 번호와 들여쓰기가
   줄마다 어긋나면 어디를 고치는지 놓친다. */
.gb-term-text {
  min-height: 420px;
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  line-height: 1.9;
  resize: vertical;
}
/* 공개된 판본은 읽기만 된다. 눌러도 아무 일이 없으면 고장으로 보이므로
   바탕을 달리해 "여기는 못 고친다" 를 눈으로 알린다. */
.gb-term-text[readonly] { background: var(--c-surface-2); color: var(--c-text-2); }

.gb-term-new { display: flex; gap: var(--s-2); align-items: center; margin: var(--s-3) 0 var(--s-5); }
.gb-term-new .gb-input { max-width: 180px; }

/* 목록 안의 작은 소제목(언어별) */
.gb-admin__sub {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

/* 환불 규정표 안의 숫자 칸. 표 안이라 넓을 필요가 없고,
   좁혀 두어야 단위(시간·%)가 숫자 옆에 붙어 읽힌다. */
.gb-ref-num { width: 88px; display: inline-block; margin-right: 6px; }

/* 로그인 전 머리말의 회원가입. 로그인과 나란히 서지만 이쪽이 다음 걸음이다.
   버튼을 만들면 폭이 늘어 영어 메뉴가 다시 넘치므로 글자만 진하게 둔다. */
.gb-header__link--strong { color: var(--c-accent); font-weight: 700; }
.gb-header__link--strong:hover { background: var(--c-accent-soft); color: var(--c-accent); }

/* ── 인증번호 남은 시간 ─────────────────────────────── */
/*
 * 도움말과 같은 자리·같은 크기다. 다만 숫자가 줄어드는 것을 눈이 따라가야
 * 하므로 폭이 흔들리지 않게 고정폭 숫자를 쓴다 — 안 그러면 1:11 에서 1:09 로
 * 갈 때 글자가 좌우로 흔들린다.
 */
.gb-otp-left {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
}

/* 시간이 지났으면 남은 시간이 아니라 할 일을 말한다. */
.gb-otp-left.is-over {
  color: var(--c-danger);
  font-weight: 500;
}

/* ── 파일 고르기 ────────────────────────────────────── */
/*
 * 진짜 <input type="file"> 을 덮개 위에 투명하게 겹쳐 둔다.
 * 누르기·끌어다 놓기·키보드가 브라우저 것 그대로 돌아간다.
 *
 * is-ready 는 스크립트가 붙인다. 스크립트가 없으면 이 규칙들이 걸리지
 * 않으므로 브라우저 기본 칸이 그대로 보인다 — 고르는 데 지장이 없다.
 */
.gb-file { position: relative; }

.gb-file.is-ready .gb-file__input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* 덮개가 flex 라서 UA 의 [hidden] 을 이긴다. 이 사이트에서 이미 한 번 겪었다. */
.gb-file__zone[hidden] { display: none !important; }

.gb-file__zone {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-mute);
  transition: border-color .12s, background .12s;
}

/* 끌고 오는 동안 · 키보드로 왔을 때 — 받을 준비가 됐다는 표시 */
.gb-file.is-over .gb-file__zone,
.gb-file:focus-within .gb-file__zone {
  border-color: var(--c-accent);
  border-style: solid;
  background: var(--c-accent-soft);
}

.gb-file.is-bad .gb-file__zone {
  border-color: var(--c-danger);
  border-style: solid;
}

.gb-file__icon  { flex: none; color: var(--c-accent); }
.gb-file__lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gb-file__msg { font-size: var(--fs-sm); }
.gb-file.is-bad .gb-file__msg { color: var(--c-danger); font-weight: 500; }

/* 파일 이름은 길다. 흘려 두면 칸이 가로로 늘어나 화면을 밀어낸다. */
.gb-file__name {
  font-size: var(--fs-xs);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-file__name[hidden] { display: none !important; }

/* 고른 그림 미리보기. 이름만으로는 맞게 골랐는지 알 수 없다. */
.gb-file__shot {
  flex: none;
  margin-left: auto;
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
}
.gb-file__shot[hidden] { display: none !important; }

/* 보내기가 거절된 이유. 폼 아래에 붙는다(스크립트가 만든다). */
.gb-chat__error { margin: 6px 0 0; flex-basis: 100%; }

/* 찾을 수는 있되 먼저 눈에 띄지 않아야 하는 링크(탈퇴 등). */
.gb-quiet-link a { color: var(--c-text-mute); text-decoration: underline; }
.gb-quiet-link a:hover { color: var(--c-danger); }

/* 보증금 기록 폼 — 표 한 칸 안에서 고르기·금액·사유·버튼이 한 줄로 선다. */
.gb-dep-form {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.gb-dep-form .gb-input { width: auto; min-width: 90px; }
.gb-dep-form input[name="reason"] { min-width: 160px; flex: 1; }

/* 감사 로그의 마지막 칸 — JSON 조각이 들어가서 표를 밀어내지 않게 묶어 둔다. */
/* ── 사람 찾기 자동완성 ─────────────────────────────
   회원 300명을 고르는 칸에 통째로 넣던 것을 대신한다.
   이 목록이 안 떠도 옆의 '찾기' 단추로 똑같이 찾을 수 있다. */

.gb-people {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.gb-people__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  /* 손가락으로도 눌러야 한다. 목록이라 줄마다 넉넉히. */
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.gb-people__item:hover,
.gb-people__item:focus { background: var(--c-surface-2); outline: none; }
.gb-people__kind {
  margin-left: auto;
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}

/* 목록이 칸 바로 아래 붙게 자리 기준을 만든다. */
#gb-people-find .gb-field { position: relative; }

/* ── 서비스 관리 카드 ───────────────────────────────
   표는 칸이 좁아 사진이 우표만 해지고 값 여덟 개가 한 줄에 눌린다.
   서비스는 상품이라 사진과 이름이 먼저 보여야 한다. */

/*
 * 한 줄에 셋.
 *
 * 처음에는 한 줄에 하나씩, 가로로 긴 띠로 두었다. 넓은 화면에서는 카드가
 * 2000px 넘게 늘어나 사진 옆에 빈 벌판이 생겼다. 서비스는 셋뿐이라
 * 나란히 놓으면 한눈에 견줄 수 있다.
 */
.gb-progs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.gb-prog {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  /* 사진이 카드 끝까지 닿게 안쪽 여백은 각 부분이 갖는다. */
  overflow: hidden;
}
/* 꺼 둔 것은 흐리게. 지운 것과 다르다는 것이 보여야 한다. */
.gb-prog.is-off { opacity: .55; }

/*
 * 사진 비율은 원본에 맞춘다.
 *
 * 높이를 170px 로 못 박았더니 카드 폭 379px 에서 2.2:1 이 되어,
 * 4:3(1200×896) 짜리 원본의 위아래가 크게 잘렸다. 사람이 찍힌 사진이라
 * 얼굴이 날아가면 무엇을 파는 것인지 알 수 없다.
 *
 * aspect-ratio 로 두면 카드 폭이 바뀌어도 잘리는 곳이 없다.
 */
.gb-prog__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  /* 사진이 안 뜰 때 흰 구멍이 나지 않게. */
  background: var(--c-surface-2);
}

/* 글이 들어가는 칸. 이름이 길어도 카드를 밀지 않게 폭을 잠근다.
   flex:1 로 두어야 아래 단추 줄이 카드마다 같은 높이에 선다 —
   글 길이가 달라도 줄이 들쭉날쭉하면 나란히 놓은 뜻이 없다. */
.gb-prog__body {
  flex: 1;
  min-width: 0;
  padding: var(--s-4) var(--s-4) 0;
}

.gb-prog__title { margin: 0 0 2px; font-size: var(--fs-md); font-weight: 700; }
.gb-prog__title a { color: inherit; text-decoration: none; }
.gb-prog__title a:hover { color: var(--c-accent); }

.gb-prog__slug { margin: 0 0 var(--s-3); font-size: var(--fs-xs); color: var(--c-text-mute); }

/* 값 넷을 2×2 로. 한 줄에 늘어놓으면 좁은 카드에서 줄이 어긋난다. */
.gb-prog__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-3);
  margin: 0;
}
.gb-prog__facts dt { font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-prog__facts dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gb-prog__side {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
}
/* 순서 단추는 가운데, 편집은 오른쪽 끝. */
.gb-prog__order { display: flex; gap: var(--s-1); margin-right: auto; }

.is-sortable .gb-prog { position: relative; }
.is-sortable .gb-prog.is-dragging { opacity: .5; }

/*
 * 끄는 손잡이.
 *
 * 카드 아무 데나 잡아 끌게 하면 폰에서 화면을 스크롤할 수 없다 —
 * 손가락 한 번에 두 가지 뜻을 담을 수 없기 때문이다. 그래서 손잡이를 둔다.
 * 몸통을 잡으면 평소처럼 스크롤되고, 이것을 잡을 때만 끌린다.
 *
 * touch-action: none 이 있어야 브라우저가 이 제스처를 스크롤로 가져가지 않는다.
 * 이 한 줄이 빠지면 폰에서 끌기가 통째로 안 된다.
 */
.gb-drag {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  /* 손끝이 닿는 크기. 작으면 잡다가 카드를 눌러 편집으로 넘어간다. */
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-mute);
  font-size: 16px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.gb-drag:hover { border-color: var(--c-accent); color: var(--c-accent); }
.gb-drag:active { cursor: grabbing; }

.gb-sortable__hint {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}

/* 좁아지면 칸 수를 줄인다. 셋을 그대로 두면 카드가 눌려
   사진이 띠가 되고 값 넷이 두 줄로 접힌다. */
@media (max-width: 1180px) { .gb-progs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .gb-progs { grid-template-columns: 1fr; } }

/* ── 파트너별 요금 표 ───────────────────────────────
   서비스 편집과 파트너 편집이 같은 표를 쓴다. 칸을 비우면 물려받으므로,
   비어 있을 때 무엇이 쓰이는지가 자리글과 '적용값' 으로 보여야 한다. */

.gb-rate-tbl td { vertical-align: middle; }
.gb-rate-tbl .gb-input { max-width: 130px; }

.gb-rate-tbl__applied { white-space: nowrap; }
.gb-rate-tbl__applied strong { font-variant-numeric: tabular-nums; }
.gb-rate-tbl__applied .gb-tbl__sub { display: block; }

/*
 * '내용' 칸.
 *
 * 예전에는 {"nationality":"JP"} 같은 원문이 그대로 찍혔다. 이 사이트를
 * 운영하는 사람은 개발자가 아니다. 이름 : 값 으로 나란히 적고, 바뀐 것은
 * 전 → 후 로 보여준다. 원문은 접어 두되 지우지는 않는다.
 */
.gb-audit__detail { max-width: 360px; }

/* 사람이 적은 사유가 제일 중요하다. 맨 위에 또렷하게. */
.gb-audit__reason {
  margin: 0 0 var(--s-2);
  color: var(--c-text);
}

.gb-audit__kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--s-2);
  margin: 0;
  font-size: var(--fs-xs);
}
.gb-audit__kv dt {
  color: var(--c-text-mute);
  white-space: nowrap;
}
.gb-audit__kv dd {
  margin: 0;
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

/* 바뀌기 전 값은 지나간 것임이 보이게. */
.gb-audit__was   { color: var(--c-text-mute); text-decoration: line-through; }
.gb-audit__arrow { color: var(--c-text-mute); }

.gb-audit__raw { margin-top: var(--s-2); }
.gb-audit__raw > summary {
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  list-style: none;
  /* 접었다 폈다 하는 자리다. 넓은 화면에서는 촘촘히, 손으로 쓰는
     화면에서는 아래 미디어쿼리에서 키운다. */
  display: inline-block;
}
.gb-audit__raw > summary::-webkit-details-marker { display: none; }
.gb-audit__raw > summary::before { content: '⌄ '; }
.gb-audit__raw code {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  overflow-wrap: anywhere;
}

/* ── 마스킹 시험 ────────────────────────────────────── */
/*
 * 정규식은 눈으로 봐서는 맞는지 알 수 없다. 넣어 본 글이 실제로 어떻게
 * 나가는지 나란히 보여주는 자리다.
 */
.gb-msk__label { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--c-text-mute); }
.gb-msk__out {
  margin: 0 0 var(--s-3);
  padding: var(--s-3);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  word-break: break-all;
}

/* 정규식은 길고 띄어쓰기가 없다. 표를 밀어내지 않게 묶는다. */
.gb-msk__pattern {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* 관리자 화면에서 손님 화면으로 건너가는 문. 로그아웃과 헷갈리지 않게 색을 준다. */
.gb-admin__switch { color: var(--c-accent) !important; font-weight: 600; }

/* 사이트에서 관리자 화면으로 돌아가는 문. 손님에게는 보이지 않는다. */
.gb-header__link--admin { color: var(--c-plum); font-weight: 600; }

/* ── 시야 전환 (관리자만) ───────────────────────────── */
/*
 * 관리자·손님·파트너 세 벌 중 어느 것을 보고 있는지 고르고 표시한다.
 * 지금 어느 쪽인지 안 보이면, 빈 화면을 보고 고장 났다고 생각하게 된다.
 */
.gb-viewswitch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  background: var(--c-surface);
}
.gb-viewswitch__x {
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-mute);
  text-decoration: none;
  white-space: nowrap;
}
.gb-viewswitch__x:hover { color: var(--c-accent); }
.gb-viewswitch__x.is-now { background: var(--c-plum); color: #fff; }


/* ── 담아 두기 ───────────────────────────────────────
   상태를 색으로만 말하지 않는다. 담긴 것과 담는 버튼이
   색 하나로만 갈리면 색을 구분하기 어려운 사람은 알 수 없다.
   그래서 하트 모양과 글자를 함께 바꾼다. */

.gb-fav-btn { display: inline-flex; }
.gb-fav-btn__x {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  height: 48px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.gb-fav-btn__x:hover { border-color: var(--c-accent); color: var(--c-accent); }
.gb-fav-btn__x.is-on {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-soft, var(--c-surface));
}
.gb-fav-btn__icon { font-size: 1.15em; line-height: 1; }

.gb-fav { position: relative; }
.gb-fav__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.gb-fav__drop { margin-left: auto; }

/* ── 이메일 중복 안내 ────────────────────────────────
   칸 아래에 한 줄. 오류(gb-field__error)와 같은 자리에 오므로
   글자 크기와 여백을 맞춘다. 그러지 않으면 줄이 하나 나타날 때마다
   아래 칸들이 덜컥 밀린다. */

.gb-dupcheck {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.gb-dupcheck.is-free  { color: var(--c-ok, #1a7f4b); }
.gb-dupcheck.is-taken { color: var(--c-danger, #c0392b); }

/* 담기 버튼의 글자. 하트만으로는 담긴 상태인지 담는 버튼인지 가려지지 않아
   글자를 함께 둔다. 아주 좁은 화면에서도 줄이 바뀌지 않게 붙여 둔다. */
.gb-fav-btn__label { white-space: nowrap; }

/* ── 제휴 식당 목록 ──────────────────────────────────
   카드로 만들지 않는다. 한 줄에 이름·주소·혜택이면 충분하고,
   테두리를 두르면 열 곳만 있어도 화면이 조각조각 난다. */

.gb-rst-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.gb-rst {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.gb-rst:last-child { border-bottom: none; }
.gb-rst__head {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-1);
}
.gb-rst__name { font-size: var(--fs-base); color: var(--c-plum); }
.gb-rst__addr { margin: 0 0 var(--s-1); color: var(--c-text-2); font-size: var(--fs-sm); }
.gb-rst__benefit {
  margin: 0 0 var(--s-1);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.gb-rst__links { margin: 0; display: flex; gap: var(--s-3); font-size: var(--fs-sm); }

/* ── 만날 곳 고르기·검색 ─────────────────────────────
   결과는 누를 수 있는 줄이다. 링크가 아니라 버튼이다 —
   누르면 어디로 가는 것이 아니라 아래 칸이 채워진다. */

.gb-placefind__row { display: flex; gap: var(--s-2); }
.gb-placefind__row .gb-input { flex: 1 1 auto; min-width: 0; }
.gb-placefind__out {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.gb-placefind__item {
  display: block;
  width: 100%;
  padding: var(--s-3);
  border: none;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  text-align: left;
  cursor: pointer;
}
.gb-placefind__out li:last-child .gb-placefind__item { border-bottom: none; }
.gb-placefind__item:hover { background: var(--c-surface-2); }
.gb-placefind__item strong { display: block; font-size: var(--fs-sm); }
.gb-placefind__item span,
.gb-placefind__item em {
  display: block;
  color: var(--c-text-mute);
  font-size: var(--fs-xs);
  font-style: normal;
}

/* 값 옆에 붙는 보조 줄(주소 등). 같은 칸 안에서 한 단 아래로 내린다. */
.gb-kv__sub {
  display: block;
  margin-top: 2px;
  color: var(--c-text-mute);
  font-size: var(--fs-xs);
}

/* 제휴 식당 고르기 묶음. 아래 '만날 곳' 과 한 덩어리로 읽히게 붙여 둔다. */
.gb-placepick { margin-bottom: calc(var(--s-2) * -1); }

/* ── 관리자 띠 ───────────────────────────────────────
   머리말 위 한 줄. 관리자에게만 나온다.

   머리말 안에 두었더니 메뉴와 자리를 다퉜다 — 머리말 통이 1160px 로
   묶여 있어서, 영어 메뉴(764px)에 알약(164px)까지 들어가면 화면 전체가
   가로로 넘쳤다. 언어마다 메뉴 길이가 달라 계속 되풀이될 일이었다.
   자기 줄을 주면 다툴 것이 없다. */

.gb-adminbar {
  background: var(--c-plum);
  color: #fff;
}
.gb-adminbar__inner {
  width: 100%;
  max-width: var(--w-header);
  margin: 0 auto;
  padding: var(--s-2) var(--s-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;              /* 좁은 화면에서는 접힌다 */
  gap: var(--s-2) var(--s-3);
  font-size: var(--fs-xs);
}
.gb-adminbar__label { opacity: .85; }
.gb-adminbar__go {
  margin-left: auto;
  /* 관리자로 로그인한 채 이용자 화면을 볼 때만 나오는 자리라
     손가락으로 재 볼 일이 늦었다. 글자만 두면 높이가 20px 이다. */
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: #fff;
  font-weight: 600;
}

/* 띠 안에서는 바탕이 어둡다. 알약도 그 위에서 읽히게 바꿔 준다. */
.gb-adminbar .gb-viewswitch {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
}
.gb-adminbar .gb-viewswitch__x { color: rgba(255, 255, 255, .8); }
.gb-adminbar .gb-viewswitch__x:hover { color: #fff; }
.gb-adminbar .gb-viewswitch__x.is-now { background: #fff; color: var(--c-plum); }

/* ── 회원 승인 방식 ──────────────────────────────────
   설정을 그 효과 바로 옆에 둔다. 정책값 화면에 묻어 두면
   "이 사람들을 매번 확인해야 하나" 하고 떠올린 자리에서 멀어진다. */

.gb-mbr-mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.gb-mbr-mode__now strong { color: var(--c-plum); }
.gb-mbr-mode__help,
.gb-mbr-mode__warn {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
.gb-mbr-mode__warn { color: var(--c-danger, #c0392b); }

/* 본문 안의 중간 제목. gb-doc-h 는 문서 화면 전용이라 여기서는 못 쓴다. */
.gb-page__h2 {
  margin: var(--s-6) 0 var(--s-2);
  font-size: var(--fs-lg);
  color: var(--c-plum);
}

/* ── 시간 연장 ───────────────────────────────────────
   파트너에게 오는 물음은 눈에 띄어야 한다. 마주 앉은 자리에서
   화면을 잠깐 보는 상황이라, 못 보고 지나치면 요청 자체가 없던 일이 된다. */

.gb-ext { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.gb-ext .gb-field { flex: 1 1 220px; margin: 0; }

.gb-ext-ask {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border: 2px solid var(--c-accent);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.gb-ext-ask__q { margin: 0 0 var(--s-1); font-size: var(--fs-base); font-weight: 600; }
.gb-ext-ask__note { margin: 0 0 var(--s-3); color: var(--c-text-2); font-size: var(--fs-sm); }
.gb-ext-ask__btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ── 사진 다듬기 ─────────────────────────────────────
   사진을 고르기 전에는 아무것도 안 그린다. 자바스크립트가 없으면
   이 묶음 자체가 비어 있고, 고른 사진이 그대로 올라간다. */

.gb-photofix {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.gb-photofix__canvas {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.gb-photofix__controls { display: grid; gap: var(--s-2); }
.gb-photofix__row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
}
.gb-photofix__range { width: 100%; }
.gb-photofix__btns { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.gb-photofix__note {
  margin: var(--s-2) 0 0;
  color: var(--c-text-mute);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

/*
 * 다듬기 판을 담는 상자.
 *
 * ⚠️ 이 상자는 .gb-prf__photo 안에 있고 그것은 flex 다. 그냥 두면
 *   사진 칸 옆의 좁은 자리에 눌려 들어가 글자가 세로로 쌓인다.
 *   실제로 그렇게 나왔다 — 판을 한 번도 안 열어 봐서 몰랐다.
 *   열렸을 때만 줄을 바꿔 한 줄을 통째로 쓰게 한다.
 */
/*
 * 다 됐을 때 남는 판.
 *
 * 사장님 말 — "해당 라벨을 좀 더 강조해 주면 임시 저장된 느낌이 더 확실하지
 * 않을까?" 그래서 회색 잔글씨가 아니라 **표지판**으로 만든다.
 * 다듬는 것들이 접혀 사라진 자리에 이것만 남으므로, 눈이 여기로 온다.
 */
.gb-photofix__done {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-lg);
  background: var(--c-accent-soft);
}
.gb-photofix__done-msg {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent);
  line-height: 1.5;
}
/* 앞에 표를 하나 붙인다. 글자만 있으면 여느 도움말과 구별이 안 된다. */
.gb-photofix__done-msg::before {
  content: '✓';
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
}
.gb-photofix__done .gb-photofix__btns { margin-top: 0; }

/* 접힌 동안에는 판이 위아래로 붙지 않게 여백만 남긴다. */
.gb-photofix--done { gap: 0; }

.gb-photofix__host { display: none; }
.gb-photofix__host--open { display: block; flex: 1 0 100%; }

/* 여러 장을 고르면 나오는 줄. 몇 번째인지와 앞뒤로 넘기는 단추. */
.gb-photofix__nav {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  margin-top: var(--s-2);
}
.gb-photofix__at {
  font-size: var(--fs-sm); color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}

/* 한 군데 가리기 */
.gb-photofix__spot {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.gb-photofix__toggle {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); cursor: pointer;
}
/* 켜 두면 사진을 눌러 자리를 옮긴다. 커서로 그것을 알린다. */
.gb-photofix__canvas--pick { cursor: crosshair; touch-action: none; }

/* ── 네이버에서 찾아 채우기 (관리자 · 제휴 식당) ───────── */

.gb-findbox {
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface-2, var(--c-surface));
}
.gb-findbox .gb-admin__section { margin-top: 0; }
/* 폼 안의 힌트는 제목 옆이 아니라 아래에 온다. 들여쓰기를 지운다. */
.gb-findbox .gb-admin__hint { display: block; margin: 0 0 var(--s-3); }

.gb-findbox__row { display: flex; gap: var(--s-2); align-items: stretch; }
/* 검색어 칸이 단추를 밀어내고 늘어난다. 단추는 글자 폭만 차지한다. */
.gb-findbox__row .gb-input { flex: 1 1 auto; min-width: 0; }
.gb-findbox__row .gb-btn   { flex: 0 0 auto; white-space: nowrap; }

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

.gb-finds {
  max-width: 720px;
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gb-find {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line);
}
.gb-find:first-child { border-top: 0; }

/* 이름이 길어도 단추를 밀어내지 않는다. min-width:0 이 없으면 안 줄어든다. */
.gb-find__body { flex: 1 1 auto; min-width: 0; }
.gb-find__name { margin: 0; font-weight: 600; }
.gb-find__addr {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.gb-find__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
}
.gb-find__tel { color: var(--c-text-mute); }
.gb-find__act { flex: 0 0 auto; margin: 0; }

@media (max-width: 860px) {
  /*
   * 폰에서는 한 줄에 다 안 들어간다. 단추가 이름 아래로 내려오고
   * 폭을 다 쓴다 — 좁은 단추를 손끝으로 겨냥하게 두지 않는다.
   */
  .gb-find { flex-direction: column; align-items: stretch; }
  /* 손끝은 44px 쯤이다. sm 단추의 padding 만으로는 37px 밖에 안 나온다. */
  .gb-find__act .gb-btn { width: 100%; min-height: 44px; }
}

/* ── 제휴 식당 카드 (관리자 목록) ───────────────────────
   표로 두었더니 칸은 일곱인데 채워지는 것은 서넛이라, 넓은 화면에서
   오른쪽 절반이 텅 비고 단추만 저 멀리 끝에 붙었다. 어느 단추가 어느
   가게 것인지 눈으로 줄을 따라가야 했다.

   서비스 카드(.gb-prog)와 같은 얼개다. 다만 식당은 사진이 없으므로
   글자만으로 짜고, 그만큼 한 줄에 더 넣는다. */

.gb-rsts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.gb-rstcard {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gb-rstcard.is-off { opacity: .55; }

/* 몸통이 남는 자리를 다 먹어야 카드 높이가 같아지고, 아래 단추 줄이
   카드마다 다른 높이에 걸리지 않는다. */
.gb-rstcard__body {
  flex: 1 1 auto;
  min-width: 0;
  /* 손잡이가 오른쪽 위에 앉는다. 제목이 그 아래로 들어가지 않게 비운다. */
  padding: var(--s-4) 52px var(--s-2) var(--s-4);
}

.gb-rstcard__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  /* 긴 가게 이름이 카드를 밀어 넓히지 않게. */
  overflow-wrap: anywhere;
}
.gb-rstcard__title a { color: var(--c-text); text-decoration: none; }
.gb-rstcard__title a:hover { color: var(--c-accent); }

.gb-rstcard__sub {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}

.gb-rstcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: var(--s-2) 0 0;
}

.gb-rstcard__addr {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  overflow-wrap: anywhere;
}

.gb-rstcard__benefit {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-accent);
  font-weight: 600;
}

.gb-rstcard__side {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-3);
}
/* 켜고 끄기는 왼쪽, 순서 단추는 가운데, 편집·지우기는 오른쪽 끝. */
.gb-rstcard__order { display: flex; gap: var(--s-1); margin-right: auto; }
.gb-rstcard__acts  { display: flex; gap: var(--s-1); margin-left: auto; }

.is-sortable .gb-rstcard { position: relative; }
.is-sortable .gb-rstcard.is-dragging { opacity: .5; }

/* 좁아지면 칸 수를 줄인다. 셋을 그대로 두면 주소가 글자마다 접힌다. */
@media (max-width: 1180px) { .gb-rsts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .gb-rsts { grid-template-columns: 1fr; } }

/* ── 팝업 카드 (관리자 목록) ─────────────────────────
   팝업은 대개 그림이 본문이라, 제목만 늘어놓으면 어느 것이 어느 팝업인지
   알 수 없다. 그림을 먼저 보여준다. */

/*
 * 팝업 카드는 한 줄에 넷.
 *
 * 서비스·식당 카드보다 담는 것이 적어서(제목·배지·기간) 좁아도 읽힌다.
 * 대개 언어별로 넷씩 묶여 다니므로, 한 묶음이 한 줄에 들어오면
 * 무엇이 있고 무엇이 빠졌는지 한눈에 보인다.
 */
.gb-pops {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.gb-popcard {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* 지금 실제로 뜨고 있는 것은 한눈에 보여야 한다. */
.gb-popcard.is-live { border-color: var(--c-verified); }

.gb-popcard__thumb {
  /* 높이를 못 박으면 세로 그림이 뭉개진다. 비율로 잡고 채운다. */
  aspect-ratio: 4 / 3;
  background: var(--c-surface-2, var(--c-bg));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gb-popcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gb-popcard__noimg { font-size: var(--fs-xs); color: var(--c-text-mute); }
/* 그림이 없으면 4:3 을 비워 두지 않는다. 글만 있는 팝업이 카드의 절반을
   빈 상자로 쓰면, 정작 읽을 제목이 아래로 밀려 한 화면에 몇 개 안 들어온다. */
.gb-popcard__thumb.is-noimg { aspect-ratio: auto; padding: var(--s-3) 0; }

.gb-popcard__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-3) var(--s-4) var(--s-2);
}
.gb-popcard__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.gb-popcard__title a { color: var(--c-text); text-decoration: none; }
.gb-popcard__title a:hover { color: var(--c-accent); }

.gb-popcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: var(--s-2) 0 0;
}
.gb-popcard__period {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
}

.gb-popcard__side {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-3);
}
.gb-popcard__acts { display: flex; gap: var(--s-1); margin-left: auto; }

/*
 * 좁아지면 한 칸씩 줄인다.
 *
 * 1180 까지 넷을 버티게 둔 것은 재어 보고 정했다 — 1280 화면에서 카드
 * 240px, 넘치는 것 없고 아래 단추 셋도 한 줄에 들어온다.
 * 어림으로 1400 에서 끊었다가 1280 짜리 화면에서 셋만 보여, 정작 넷을
 * 보려고 한 자리에서 못 보는 일이 있었다.
 */
@media (max-width: 1180px) { .gb-pops { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px)  { .gb-pops { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .gb-pops { grid-template-columns: 1fr; } }

/* ── 팝업 미리보기 화면 ─────────────────────────────
   손님 화면과 같은 CSS 를 싣고 팝업만 열어 둔다. 위의 띠는
   "이것은 미리보기다" 를 알리는 것이라 팝업보다 아래에 깔린다. */
.gb-pv {
  position: relative;
  padding: var(--s-6) var(--s-4);
  max-width: 720px;
  margin: 0 auto;
  background: var(--c-surface);
  border-radius: var(--r-lg);
}

.gb-pv__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.gb-pv__label { font-weight: 700; }
.gb-pv__note  { font-size: var(--fs-sm); color: var(--c-warn); }
.gb-pv__back  { margin-left: auto; }
.gb-pv__hint  {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}

/* 관리 이름 아래에 손님이 보는 제목을 작게 붙인다. 둘은 다른 것이다. */
.gb-popcard__sub {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  overflow-wrap: anywhere;
}

/* 묶음 표시(원본 · 번역 n개 / ↳ …의 번역). 부수적인 정보라 작고 흐리게. */
.gb-popcard__group {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  overflow-wrap: anywhere;
}

/* ── 칸 옆에 선 단추는 칸 높이에 맞춘다 ────────────────
   한 줄에 '고르는 칸 · 적는 칸 · 단추' 가 나란히 서는 자리가 여럿이다
   (마스킹 규칙 더하기, 보증금 기록하기, 목록 위 거르개…).
   단추만 sm 이면 31px 이라, 45px 짜리 칸 옆에서 혼자 작아 보인다.

   :has() 를 쓰는 이유: "칸이 같이 있는 줄에서만" 이라는 조건을 CSS 로
   적을 수 있는 유일한 방법이다. 지원하지 않는 브라우저에서는 예전처럼
   보일 뿐 기능은 그대로다. */
.gb-filters .gb-btn,
.gb-tbl td:has(.gb-input) .gb-btn,
.gb-tbl td:has(.gb-select) .gb-btn {
  min-height: var(--h-field);
}

/* 날짜 칸은 브라우저가 달력 아이콘 몫으로 자기 높이를 더한다(2px).
   같은 줄의 다른 칸보다 그만큼 위로 뜨고, 라벨도 따라 뜬다.
   높이를 못 박아 맞춘다 — 안쪽 여백이 넉넉해 값이 잘리지 않는다. */
.gb-input[type="date"] { height: var(--h-field); }

/* ── 사람 기록 (분쟁 대응 리포트) ───────────────────── */

.gb-psn__bar { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }

/* 이름·이메일 같은 짝을 두 줄로 세운다. 표로 만들면 값 하나에 한 줄씩 먹는다. */
.gb-psn__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}
.gb-psn__facts > div {
  padding: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.gb-psn__facts dt {
  margin: 0 0 2px;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
.gb-psn__facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* 지난 제재는 흐리게. 기록은 남기되 지금 세는 것과 구별한다. */
.gb-tbl tr.is-off td { opacity: .55; }

/* ── 인쇄 ───────────────────────────────────────────
   화면에서만 쓰는 것과 종이에서만 쓰는 것을 가른다.
   [hidden] 이 언제나 이기므로(맨 위 규칙) 여기서는 display 만 다룬다. */

.gb-printonly { display: none; }

@media print {
  /* 종이에서는 메뉴·단추·돌아가기가 아무 일도 못 한다. 자리만 먹는다. */
  .gb-admin__side,
  .gb-noprint,
  .gb-admin__foot { display: none !important; }

  .gb-printonly { display: block; }

  /* 화면용 그림자와 색 바탕은 잉크만 먹고 읽기를 돕지 않는다. */
  body, .gb-admin__main { background: #fff; }
  .gb-admin__shell { display: block; }
  .gb-admin__main  { padding: 0; max-width: none; }

  /*
   * 표가 쪽 경계에서 잘리지 않게 한다.
   * 한 줄이 반으로 갈리면 그 줄은 두 쪽 어디에서도 안 읽힌다.
   */
  .gb-tbl-wrap { overflow: visible; border: none; }
  .gb-tbl      { min-width: 0; font-size: 10pt; }
  .gb-tbl tr   { break-inside: avoid; }
  .gb-tbl thead { display: table-header-group; }   /* 쪽마다 머리줄을 다시 */

  .gb-admin__section { break-after: avoid; }
  .gb-psn__facts > div { break-inside: avoid; }

  /* 흐리게 한 줄도 종이에서는 읽혀야 한다. */
  .gb-tbl tr.is-off td { opacity: 1; }

  a { text-decoration: none; color: inherit; }
}

.gb-psn__stamp {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid #000;
}
.gb-psn__stamp strong { display: block; font-size: 13pt; }
.gb-psn__stamp span   { font-size: 9pt; color: #444; }

/* PDF 안쪽 감싸개. 종이 여백은 @page 가 정하므로 여기서는 겹쳐 주지 않는다. */
.gb-pdf { padding: 0; }

/* ── 화면 머리 ──────────────────────────────────────
   눈썹 + 제목 + 한 줄 설명. 손님·파트너 화면이 전부 이것을 쓴다.

   전에는 content.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;
}
/* 머리 상자가 이미 아래 여백(--s-6)을 갖고 있다.
   본문 상자가 또 위 여백을 두면 제목과 본문이 멀어져 딴 덩어리로 읽힌다. */
.gb-pagehead + .gb-form-page { padding-top: 0; }

/*
 * 폼 화면의 머리도 다른 화면과 같은 폭이다.
 *
 * 전에는 560px 로 좁혀서 아래 폼 칸과 왼쪽 끝을 맞췄다. 그 안에서는
 * 맞았지만 **사이트 전체와는 어긋났다** — 열두 화면 중 셋만 80px 안쪽에서
 * 시작했다. 지금은 상자를 넓히고 폼 칸만 좁혀서(위 .gb-form-page form)
 * 둘 다 얻는다.
 *
 * 클래스는 남는다. 붙이는 자리가 스무 곳이라 떼어 내는 품이 얻는 것보다
 * 크고, "폼 화면" 이라는 표시는 나중에 다른 것을 걸 자리가 된다.
 */
.gb-pagehead--form .gb-container { max-width: var(--w-content); }

@media (max-width: 560px) {
  .gb-pagehead__title { font-size: var(--fs-xl); }
}

/* ── 만남 확인 ──────────────────────────────────────
   확인 단추와 '도움 요청' 은 상자를 나눈다. 급한 자리에서 옆 단추를
   누르는 일이 생기면 안 된다(연장과 취소를 나눠 둔 것과 같은 이유). */
.gb-meet { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.gb-meet__row { display: flex; align-items: center; gap: var(--s-2); }
.gb-meet__done {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: var(--h-field); padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--c-surface-2); color: var(--c-text-2);
  font-size: var(--fs-sm); font-weight: 600;
}
.gb-meet__wait { color: var(--c-text-mute); font-size: var(--fs-xs); }
.gb-meet__help { display: flex; flex-direction: column; gap: var(--s-2); max-width: 480px; }
.gb-meet__help .gb-field { margin-bottom: 0; }
.gb-meet__help .gb-btn { align-self: flex-start; }

/* ── 안 마주치기 목록 ────────────────────────────────
   이름과 '풀기' 를 한 줄에 두되, 이름이 길어도 단추가 안 밀리게 한다. */
.gb-blocks { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.gb-blocks__row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.gb-blocks__who  { flex: 1 1 auto; min-width: 0; }
.gb-blocks__name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.gb-blocks__meta { display: block; margin-top: 2px; color: var(--c-text-mute); font-size: var(--fs-xs); }
.gb-blocks__row form { flex: 0 0 auto; }
.gb-block__form { margin-bottom: var(--s-4); }

/* 나만 보는 메모. 폼 하나짜리라 상자를 따로 두지 않는다. */
.gb-note { max-width: 560px; margin-bottom: var(--s-5); }
.gb-note .gb-btn { margin-top: var(--s-2); }

/* ── 데이트 일기 ────────────────────────────────────
   카드는 사진이 있을 때와 없을 때가 섞인다. 사진 자리를 비워 두지 않고
   없는 카드는 글로만 채운다 — 빈 회색 네모가 줄지어 있으면 더 나쁘다. */
.gb-dcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.gb-dcard {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gb-dcard__img { display: block; }
.gb-dcard__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gb-dcard__body { padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; }
.gb-dcard__title { font-weight: 700; color: var(--c-plum); text-decoration: none; overflow-wrap: anywhere; }
.gb-dcard__text  { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.7; }
.gb-dcard__who   { margin: 0; color: var(--c-text-mute); font-size: var(--fs-xs); }

/* 파트너 자신의 목록. 초안·확인 중이 섞여 있어 상태가 먼저 읽혀야 한다. */
.gb-dlist { list-style: none; margin: var(--s-4) 0; padding: 0; }
.gb-dlist__row { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line-soft); }
.gb-dlist__body  { min-width: 0; }
.gb-dlist__title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.gb-dlist__meta  { display: flex; align-items: center; gap: var(--s-2);
                   margin: 4px 0 0; color: var(--c-text-mute); font-size: var(--fs-xs); }
.gb-dlist__why   { margin: 4px 0 0; color: var(--c-warn, var(--c-text-2)); font-size: var(--fs-xs); }

.gb-diary__photo { display: block; width: 100%; max-width: 560px;
                   border-radius: var(--r-md); margin-bottom: var(--s-4); }
.gb-diary__body  { line-height: 1.9; }

/* ── 채움 막대 ──────────────────────────────────────
   프로필 완성도처럼 "얼마나 왔는지". 숫자만으로는 눈이 안 잡는다.
   이름이 gb-progress 가 아닌 이유는 그 이름을 예약 단계 표시가 이미 쓴다. */
.gb-meter { margin: 0 0 var(--s-4); }
.gb-meter__label { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--c-text-2); }
.gb-meter__bar {
  height: 8px; border-radius: 999px;
  background: var(--c-surface-2);
  overflow: hidden;
}
.gb-meter__fill {
  display: block; height: 100%;
  /* 폭은 PHP 가 값으로만 넘긴다. 꾸미기는 여기서 한다. */
  width: var(--gb-meter, 0);
  background: var(--c-accent);
  border-radius: 999px;
  /* 값이 바뀌는 것을 눈으로 따라갈 수 있게. 움직임을 싫어하는 설정은 존중한다. */
  transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .gb-meter__fill { transition: none; }
}

/* ── 기능 설명서 (관리자) ─────────────────────────────
   마크다운 파일 하나를 그린다(includes/md.php). 읽는 글이라
   표·목록보다 **읽는 폭**이 먼저다 — 넓으면 눈이 줄을 놓친다. */
.gb-md { max-width: 62rem; }
.gb-md > p,
.gb-md > ul,
.gb-md > ol,
.gb-md > blockquote { max-width: 46rem; }

.gb-md h1 { display: none; }   /* 화면 제목과 겹친다 */
.gb-md h2 {
  margin: var(--s-7) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-plum);
}
.gb-md h2:first-child { margin-top: 0; }
.gb-md h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--fs-base);
  font-weight: 700;
}
.gb-md p { margin: 0 0 var(--s-3); line-height: 1.8; }
.gb-md ul, .gb-md ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.gb-md li { margin-bottom: var(--s-2); line-height: 1.75; }
.gb-md code {
  background: var(--c-surface-2);
  padding: .1em .4em;
  border-radius: 4px;
  font-size: .9em;
}
.gb-md hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-6) 0;
}

/* 인용은 '눈에 걸려야 하는 것' 이다. 설명서에서 ⚠️ 가 붙는 자리. */
.gb-md blockquote {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-warn);
  background: var(--c-warn-soft);
  border-radius: 0 8px 8px 0;
  line-height: 1.75;
}

/* 표가 넓으면 화면이 아니라 표가 옆으로 흐른다. */
.gb-md__tablewrap { overflow-x: auto; margin: 0 0 var(--s-4); }
.gb-md .gb-tbl th, .gb-md .gb-tbl td { vertical-align: top; }

/* ── 일기 본문에 끼워 넣는 사진 ────────────────────────
   블로그처럼 문단 사이에 들어간다(gb_diary_body_html).
   글 폭보다 살짝 넓게 두면 사진이 글을 끊어 주는 역할을 한다. */
.gb-diary__fig {
  margin: var(--s-5) 0;
}
.gb-diary__fig img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 10px;
}
/* 문단 바로 뒤에 오는 사진은 위 여백을 조금 줄인다 —
   글과 사진이 한 덩어리로 읽히게. */
.gb-diary__body p + .gb-diary__fig { margin-top: var(--s-4); }