/* =============================================================
   GuDoC Components v2.1 — 종합 컴포넌트 라이브러리
   ─────────────────────────────────────────────────────────────
   Stage 1~4c 전체에서 발견된 모든 컴포넌트를 한 곳에 정리.
   tokens.css + tokens-v2.1.css 뒤에 로드.

   네이밍 규칙:
   - .gd-*  : 컴포넌트 root 클래스
   - .gd-*__*  : 컴포넌트 부분 (BEM Element)
   - .gd-*--*  : 컴포넌트 변형 (BEM Modifier)
   - 컴포넌트 내부 지역 변수 (--*-radius 등)은 컴포넌트 root에 선언
   ============================================================= */

/* ============================================================
   1) BUTTONS
   ============================================================ */
.gd-btn {
  --btn-radius: var(--gudoc-radius-md);
  --btn-h: 40px;
  --btn-pad-x: 16px;
  --btn-font: 14px;
  --btn-weight: 600;

  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: var(--btn-h); padding: 0 var(--btn-pad-x);
  font-size: var(--btn-font); font-weight: var(--btn-weight);
  border-radius: var(--btn-radius);
  font-family: inherit;
  transition: background-color 150ms, transform 80ms, box-shadow 150ms;
  white-space: nowrap;
  cursor: pointer;
}
.gd-btn:active { transform: translateY(1px); }
.gd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gd-btn--sm { --btn-h: 32px; --btn-font: 13px; --btn-pad-x: 12px; }
.gd-btn--lg { --btn-h: 48px; --btn-font: 15px; --btn-pad-x: 20px; }
.gd-btn--block { width: 100%; }
.gd-btn--pill { --btn-radius: var(--gudoc-radius-pill); }

.gd-btn--primary {
  background: var(--color-brand); color: var(--color-text-on-brand);
}
.gd-btn--primary:hover { background: var(--color-brand-hover); }
.gd-btn--dark {
  background: var(--color-text-strong); color: var(--color-bg);
}
.gd-btn--dark:hover { background: var(--color-text); }
.gd-btn--ghost {
  background: var(--color-surface);
  color: var(--color-text-strong);
  border: 1px solid var(--color-border);
}
.gd-btn--ghost:hover { background: var(--color-hover-bg); }
.gd-btn--subtle {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.gd-btn--subtle:hover { background: var(--color-active-bg); }
.gd-btn--link {
  background: transparent; color: var(--color-brand-text);
  padding: 0; height: auto; text-decoration: underline;
}

/* ============================================================
   2) CHIPS / PILLS
   ============================================================ */
.gd-chip {
  --chip-pad-y: 6px;
  --chip-pad-x: 12px;
  --chip-h: 32px;

  display: inline-flex; align-items: center; gap: 6px;
  height: var(--chip-h); padding: 0 var(--chip-pad-x);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-pill);
  font-size: 13px; font-weight: 500; color: var(--color-text);
  font-family: inherit; cursor: pointer; white-space: nowrap;
  /* GuDoc anti-flicker: 구체 속성만(SSR↔WASM 스타일 차이 애니메이션화 방지). 디자인 시스템 원본의 `transition: all 150ms`에서 교체 */
  transition: border-color 150ms, background-color 150ms, color 150ms;
}
.gd-chip:hover { border-color: var(--color-border-strong); }
.gd-chip[aria-pressed="true"],
.gd-chip--active {
  background: var(--color-chip-active-bg);
  color: var(--color-chip-active-text);
  border-color: var(--color-chip-active-bg);
}
/* Applied(적용된 필터) chip — 선택형과 시각 구분 */
.gd-chip--applied {
  background: var(--color-pill-applied-bg);
  border-color: var(--color-pill-applied-border);
  color: var(--color-pill-applied-text);
  font-weight: 600;
}
.gd-chip__remove {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-pill-applied-border);
  color: var(--color-text-on-brand);
  display: inline-grid; place-items: center;
  font-size: 9px; line-height: 1;
}
.gd-chip__count {
  font-size: 11px; padding: 1px 6px;
  border-radius: 9999px;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-weight: 600;
}
.gd-chip[aria-pressed="true"] .gd-chip__count {
  background: color-mix(in srgb, var(--color-chip-active-text) 20%, transparent);
  color: var(--color-chip-active-text);
}

/* ============================================================
   3) TAGS (info-bearing pill, not interactive)
   ============================================================ */
.gd-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-radius: var(--gudoc-radius-pill);
  font-size: var(--gudoc-tag-xs);
  font-weight: 500;
}
.gd-tag--sm { font-size: var(--gudoc-tag-sm); padding: 5px 11px; }
.gd-tag--md { font-size: var(--gudoc-tag-md); padding: 6px 12px; font-weight: 500; }
.gd-tag--lg { font-size: var(--gudoc-tag-lg); padding: 8px 14px; font-weight: 600; }
.gd-tag--brand {
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
}
.gd-tag--success { background: var(--color-success-bg); color: var(--color-success); }
.gd-tag--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.gd-tag--danger  { background: var(--color-danger-bg);  color: var(--color-danger); }

/* ============================================================
   4) CYCLE PILL (구독 주기 라벨)
   ============================================================ */
.gd-cy {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 600;
  background: var(--color-surface-sunken);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.gd-cy::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--cy-dot, var(--color-text-muted));
}
.gd-cy[data-c="weekly"]    { --cy-dot: var(--color-cycle-weekly); }
.gd-cy[data-c="monthly"]   { --cy-dot: var(--color-cycle-monthly); }
.gd-cy[data-c="quarterly"] { --cy-dot: var(--color-cycle-quarterly); }
.gd-cy[data-c="yearly"]    { --cy-dot: var(--color-cycle-yearly); }
.gd-cy[data-c="onetime"]   { --cy-dot: var(--color-cycle-onetime); }

/* ============================================================
   5) BADGES (상태 표시 라벨)
   ============================================================ */
.gd-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 600;
  background: var(--color-success-bg); color: var(--color-success);
}
.gd-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.gd-badge--warn { background: var(--color-warning-bg); color: var(--color-warning); }
.gd-badge--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.gd-badge--info { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.gd-badge--neutral {
  background: var(--color-bg-subtle); color: var(--color-text-muted);
}

/* ============================================================
   6) FILTER PILL (적용된 필터 with X)
   ============================================================ */
.gd-fpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9999px;
  background: var(--color-pill-applied-bg);
  border: 1px solid var(--color-pill-applied-border);
  color: var(--color-pill-applied-text);
  font-size: 13px; font-weight: 600;
}
.gd-fpill__x {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-brand); color: var(--color-text-on-brand);
  display: inline-grid; place-items: center;
  font-size: 9px; cursor: pointer;
}

/* ============================================================
   7) SORT DROPDOWN
   ============================================================ */
.gd-sort {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-md);
  font-size: 13px; color: var(--color-text); font-weight: 500;
  cursor: pointer;
}
.gd-sort::after { content: '▾'; font-size: 10px; color: var(--color-text-muted); }

/* ============================================================
   8) VIEW TOGGLE (grid/list)
   ============================================================ */
.gd-vtoggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-md);
  overflow: hidden;
}
.gd-vtoggle button {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--color-surface); font-size: 14px;
  color: var(--color-text-muted);
  font-family: inherit;
}
.gd-vtoggle button[aria-pressed="true"] {
  background: var(--color-text-strong); color: var(--color-bg);
}

/* ============================================================
   9) RANGE SLIDER (가격대 등)
   ============================================================ */
.gd-range {
  --range-fill-from: 20%;
  --range-fill-to: 70%;
  margin: 12px 0 4px;
}
.gd-range__track {
  position: relative; height: 4px;
  background: var(--color-border); border-radius: 2px;
}
.gd-range__fill {
  position: absolute;
  left: var(--range-fill-from); right: calc(100% - var(--range-fill-to));
  top: 0; bottom: 0;
  background: var(--color-brand); border-radius: 2px;
}
.gd-range__handle {
  position: absolute; width: 16px; height: 16px; top: -6px;
  border-radius: 50%; background: var(--color-surface);
  border: 2px solid var(--color-brand);
  box-shadow: var(--shadow-sm);
  transform: translateX(-50%);
}
.gd-range__values {
  display: flex; justify-content: space-between;
  margin-top: 12px;
  font-size: 12px; color: var(--color-text-muted);
}
.gd-range__values strong {
  color: var(--color-text-strong); font-weight: 600;
}

/* ============================================================
   10) CHECKBOX / RADIO (custom)
   ============================================================ */
.gd-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  display: inline-grid; place-items: center;
  font-size: 11px; color: var(--color-text-on-brand);
  flex-shrink: 0; cursor: pointer;
  /* GuDoc anti-flicker: 구체 속성만. 디자인 시스템 원본의 `transition: all 100ms`에서 교체 */
  transition: background-color 100ms, border-color 100ms, color 100ms;
}
.gd-check--on {
  background: var(--color-text-strong);
  border-color: var(--color-text-strong);
}
.gd-check--on::after { content: '✓'; }
.gd-radio {
  width: 18px; height: 18px;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  flex-shrink: 0; cursor: pointer;
}
.gd-radio--on { border-color: var(--color-brand); }
.gd-radio--on::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-brand);
}

/* ============================================================
   11) PRODUCT CARD (Stage 2: A Standard, B Featured, C Story)
   ============================================================ */
.gd-pc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms var(--gudoc-ease-standard), box-shadow 200ms;
  cursor: pointer;
}
.gd-pc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gd-pc__media {
  aspect-ratio: 16 / 9;
  background: var(--bg, var(--gudoc-cover-warm));
  position: relative;
}
.gd-pc__badge {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 9999px;
  background: rgba(20,20,19,0.7); color: white;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}
.gd-pc__heart {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: var(--color-text);
  display: grid; place-items: center; font-size: 14px;
  backdrop-filter: blur(6px); cursor: pointer;
}
.gd-pc__body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.gd-pc__seller { font-size: 11px; color: var(--color-text-muted); }
.gd-pc__title {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--color-text-strong); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.gd-pc__price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gd-pc__price { font-size: 14px; font-weight: 700; color: var(--color-text-strong); }
.gd-pc__price-sub { font-size: 11px; color: var(--color-text-muted); }
.gd-pc__social { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-text-muted); }

/* ============================================================
   12) SUMMARY PANEL (장바구니/체크아웃 우측)
   ============================================================ */
.gd-summary {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-lg);
  box-shadow: var(--shadow-sm);
}
.gd-summary__title {
  font-size: 16px; font-weight: 700;
  color: var(--color-text-strong); margin: 0 0 14px;
}
.gd-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; font-size: 13px; color: var(--color-text);
}
.gd-summary__row--save { color: var(--color-cycle-monthly); }
.gd-summary__row--save .gd-summary__val { font-weight: 600; }
.gd-summary__divider {
  height: 1px; background: var(--color-divider); margin: 10px 0;
}
.gd-summary__row--total {
  font-size: 16px; font-weight: 700;
  color: var(--color-text-strong); padding-top: 8px;
}
.gd-summary__row--total .gd-summary__val {
  font-size: 22px; color: var(--color-brand-text);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   13) RECURRING SCHEDULE PREVIEW
   ============================================================ */
.gd-recur {
  margin-top: 12px; padding: 12px;
  background: var(--color-bg-subtle);
  border-radius: var(--gudoc-radius-md);
  font-size: 11px; color: var(--color-text-muted); line-height: 1.55;
}
.gd-recur__head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--color-text-strong);
  margin-bottom: 6px; font-size: 12px;
}
.gd-recur__icon {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-cycle-monthly);
  color: white; display: inline-grid; place-items: center;
  font-size: 9px; font-weight: 700;
}
.gd-recur__bills {
  display: grid; grid-template-columns: auto auto;
  gap: 2px 12px; font-variant-numeric: tabular-nums;
}
.gd-recur__bills > span:nth-child(odd) { color: var(--color-text); }
.gd-recur__bills > span:nth-child(even) { text-align: right; font-weight: 500; color: var(--color-text); }

/* ============================================================
   14) SCHEDULE CALENDAR (시작일 + 결제일 미리보기)
   ============================================================ */
.gd-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.gd-calendar__head {
  border: none;
  font-size: 10px; color: var(--color-text-subtle);
  font-weight: 600; text-transform: uppercase;
  display: grid; place-items: center;
}
.gd-calendar__cell {
  aspect-ratio: 1;
  border: 1px solid var(--color-cell-border);
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; color: var(--color-text); font-weight: 500;
  cursor: pointer; position: relative;
  background: var(--color-cell-bg);
}
.gd-calendar__cell--muted {
  color: var(--color-text-subtle);
  background: transparent; border-color: transparent;
}
.gd-calendar__cell--start {
  background: var(--color-cell-start-bg);
  color: var(--color-cell-start-text);
  border-color: var(--color-cell-start-bg);
  font-weight: 700;
}
.gd-calendar__cell--bill {
  border-color: var(--color-cell-bill-border);
  color: var(--color-cell-bill-text);
}
.gd-calendar__cell--bill::after {
  content: ''; position: absolute; bottom: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-cell-bill-border);
}

/* ============================================================
   15) ADDRESS CARD
   ============================================================ */
.gd-addr {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-md);
  display: flex; gap: 10px;
  cursor: pointer;
  background: var(--color-surface);
}
.gd-addr--on {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle);
}
.gd-addr__body { flex: 1; min-width: 0; }
.gd-addr__name {
  font-size: 13px; font-weight: 700;
  color: var(--color-text-strong);
  display: inline-flex; align-items: center; gap: 6px;
}
.gd-addr__tag {
  font-size: 10px; padding: 2px 6px;
  background: var(--color-text-strong); color: var(--color-bg);
  border-radius: 4px; font-weight: 600; letter-spacing: 0.04em;
}
.gd-addr__line {
  font-size: 13px; color: var(--color-text); margin: 4px 0 2px;
  line-height: 1.4;
}
.gd-addr__phone {
  font-size: 11px; color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   16) PAYMENT METHOD CARD
   ============================================================ */
.gd-pay {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-md);
  cursor: pointer;
  background: var(--color-surface);
}
.gd-pay--on {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle);
}
.gd-pay__icon {
  width: 36px; height: 24px; border-radius: 4px;
  background: linear-gradient(135deg, #4a5fc1, #3344a8);
  color: white; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
}
.gd-pay__name { font-size: 13px; font-weight: 600; color: var(--color-text-strong); flex: 1; }
.gd-pay__digits {
  font-family: var(--gudoc-font-mono); font-size: 12px;
  color: var(--color-text-muted); letter-spacing: 0.05em;
}
.gd-pay__primary {
  font-size: 10px; padding: 2px 6px;
  background: var(--color-text-strong); color: var(--color-bg);
  border-radius: 4px; font-weight: 600;
}

/* ============================================================
   17) COUPON CARD (양옆 cutout)
   ============================================================ */
.gd-coupon {
  position: relative;
  background: var(--color-surface);
  border: 1px dashed var(--color-brand);
  border-radius: var(--gudoc-radius-lg);
  padding: 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  align-items: center;
}
.gd-coupon::before, .gd-coupon::after {
  content: ''; position: absolute;
  width: var(--gudoc-coupon-cutout); height: var(--gudoc-coupon-cutout);
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px dashed var(--color-brand);
  top: 50%; transform: translateY(-50%);
}
.gd-coupon::before { left: calc(var(--gudoc-coupon-cutout) / -2 - 1px); clip-path: inset(0 50% 0 0); }
.gd-coupon::after  { right: calc(var(--gudoc-coupon-cutout) / -2 - 1px); clip-path: inset(0 0 0 50%); }
.gd-coupon__discount {
  font-size: 24px; font-weight: 800; color: var(--color-brand);
  letter-spacing: -0.02em; line-height: 1;
}
.gd-coupon__discount-sub {
  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
}
.gd-coupon__title {
  font-size: 13px; font-weight: 700;
  color: var(--color-text-strong); margin: 4px 0 2px;
}
.gd-coupon__expire {
  font-size: 10px; color: var(--color-cycle-monthly);
  margin-top: 4px; font-weight: 600;
}

/* ============================================================
   18) SERIES CARD (큐레이션 시리즈)
   ============================================================ */
.gd-series {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--gudoc-radius-lg);
  overflow: hidden; color: white;
  background: var(--bg, var(--gudoc-cover-coral));
  cursor: pointer;
}
.gd-series::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6));
}
.gd-series__body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px; z-index: 1;
}
.gd-series__tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.gd-series__title {
  font-size: 16px; font-weight: 700;
  margin: 0 0 4px; letter-spacing: -0.01em; line-height: 1.25;
}
.gd-series__count { font-size: 11px; opacity: 0.85; }

/* ============================================================
   19) EMPTY STATE
   ============================================================ */
.gd-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border);
  border-radius: var(--gudoc-radius-lg);
}
.gd-empty__illust {
  width: 96px; height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 40px;
  background: linear-gradient(135deg, var(--color-brand-subtle), var(--color-bg-subtle));
}
.gd-empty__title {
  font-size: 18px; font-weight: 700;
  color: var(--color-text-strong); margin: 0 0 6px;
}
.gd-empty__hint {
  font-size: 13px; color: var(--color-text-muted);
  max-width: 36ch; margin: 0 auto 24px; line-height: 1.6;
}

/* ============================================================
   20) NOTIFICATION ROW
   ============================================================ */
.gd-notif {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  align-items: flex-start; position: relative;
}
.gd-notif--unread::before {
  content: ''; position: absolute;
  left: -8px; top: 22px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-brand);
}
.gd-notif__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px;
}
.gd-notif__icon--bill { background: color-mix(in srgb, var(--color-cycle-monthly) 18%, transparent); color: var(--color-cycle-monthly); }
.gd-notif__icon--ship { background: color-mix(in srgb, var(--color-cycle-weekly) 18%, transparent); color: var(--color-cycle-weekly); }
.gd-notif__icon--seller { background: color-mix(in srgb, var(--color-cycle-quarterly) 18%, transparent); color: var(--color-cycle-quarterly); }
.gd-notif__icon--promo { background: color-mix(in srgb, var(--color-cycle-yearly) 18%, transparent); color: var(--color-cycle-yearly); }
.gd-notif__body { min-width: 0; }
.gd-notif__title {
  font-size: 14px; font-weight: 600;
  color: var(--color-text-strong); margin: 0 0 3px; line-height: 1.4;
}
.gd-notif--read .gd-notif__title { font-weight: 500; color: var(--color-text); }
.gd-notif__sub { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin: 0; }
.gd-notif__time {
  font-size: 11px; color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================================================
   21) SECTION HEADING (페이지 안 섹션 표준)
   ============================================================ */
.gd-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.gd-section-head__title {
  font-size: 16px; font-weight: 700;
  color: var(--color-text-strong); margin: 0;
  letter-spacing: -0.005em;
}
.gd-section-head__more {
  font-size: 12px; color: var(--color-text-muted);
  background: transparent; cursor: pointer;
}

/* ============================================================
   22) TRUST STRIP (CTA 직후 안심 시그널)
   ============================================================ */
.gd-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 14px;
  font-size: 11px; color: var(--color-text-muted);
  flex-wrap: wrap;
}
.gd-trust__item { display: inline-flex; align-items: center; gap: 4px; }
.gd-trust__icon {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-cycle-monthly); color: white;
  display: inline-grid; place-items: center;
  font-size: 8px; font-weight: 700;
}

/* ============================================================
   23) BOTTOM SHEET (모바일 시트)
   ============================================================ */
.gd-sheet {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-xl) var(--gudoc-radius-xl) 0 0;
  padding: 10px 16px 16px;
  box-shadow: var(--shadow-lg);
}
.gd-sheet__grip {
  width: 36px; height: 4px;
  background: var(--color-border-strong);
  border-radius: 9999px; margin: 0 auto 12px;
}
.gd-sheet__title {
  font-size: 15px; font-weight: 700;
  color: var(--color-text-strong); margin: 0 0 12px;
}

/* ============================================================
   24) PAGINATION
   ============================================================ */
.gd-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 32px 0 16px;
}
.gd-pagination button {
  min-width: 32px; height: 32px; padding: 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gudoc-radius-md);
  font-size: 13px; color: var(--color-text);
  font-family: inherit; cursor: pointer;
}
.gd-pagination button[aria-current="page"] {
  background: var(--color-text-strong);
  border-color: var(--color-text-strong);
  color: var(--color-bg);
  font-weight: 600;
}

/* ============================================================
   25) INPUT FIELD
   ============================================================ */
.gd-field { margin-bottom: 14px; }
.gd-field__label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--color-text); margin-bottom: 6px;
}
.gd-field__input {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  font-size: 13px; color: var(--color-text-strong);
  font-family: inherit;
}
.gd-field__input:focus { outline: none; border-color: var(--color-brand); }
.gd-field__hint { margin-top: 6px; font-size: 11px; color: var(--color-text-subtle); }
.gd-field__hint--err { color: var(--color-danger); }
.gd-field__hint--ok { color: var(--color-cycle-monthly); }