/* ========================================
   common.css
   공통 컴포넌트 스타일
   :root 변수, body, 유틸리티, 버튼, 배지, 로딩,
   토스트, 모달, 폼, 헤더, 햄버거메뉴, 페이지섹션,
   애니메이션, 접근성, 프린트 스타일 포함
   ======================================== */

/* ========================================
   CSS 변수 정의
   ======================================== */
:root {
  /* ─────────────── 브랜드 (2026-09-04 리디자인) ───────────────
     흑 / 백 / 오렌지. 🔴 원칙 두 가지 — 어기면 예전 톤으로 돌아간다.
      ① 오렌지는 CTA 가 아니라 **액센트**. 주 버튼은 --ink-900 검정.
         (활성 필터·강조 수치·링크 호버·배지에만 오렌지)
      ② 중립은 쿨그레이가 아니라 **웜**. 오렌지만 얹고 중립이 파랗면 색이 겉돈다.
     변수명은 바꾸지 않는다 — JS/매크로냥이 클래스와 함께 이 이름들을 전제한다. */

  /* 오렌지 (액센트) */
  --brand-50:  #fdf6f2;
  --brand-100: #fae8df;
  --brand-200: #f2c9b4;
  --brand-400: #e08a66;
  --brand-500: #d97757;
  --brand-600: #c25a38;
  --brand-700: #9c4322;

  /* 잉크 (웜 중립) — 기존 --gray-* 와 같은 값을 공유한다 */
  --ink-50:  #fafaf9;
  --ink-100: #f4f4f2;
  --ink-200: #e7e5e2;
  --ink-300: #d3d0cb;
  --ink-400: #9a968f;
  --ink-500: #6b6862;
  --ink-600: #4a4741;
  --ink-700: #33312d;
  --ink-800: #1f1e1b;
  --ink-900: #14130f;

  /* 주요 색상 — primary 가 검정이 된다 (버튼·테두리·활성 상태 67곳 자동 반영) */
  --primary-color: #14130f;
  --secondary-color: #33312d;
  --accent-color: #d97757;
  --accent-secondary: #c25a38;

  /* 상태 색상 — 오렌지와 부딪히지 않게 채도를 낮춘다 */
  --success-color: #3f8f6b;
  --error-color: #c2453c;
  --warning-color: #c98a2e;
  --info-color: #4a6fa5;

  /* 그레이스케일 — 이름 유지, 값만 웜으로 */
  --gray-50: #fafaf9;
  --gray-100: #f4f4f2;
  --gray-200: #e7e5e2;
  --gray-300: #d3d0cb;
  --gray-400: #9a968f;
  --gray-500: #6b6862;
  --gray-600: #4a4741;
  --gray-700: #33312d;
  --gray-800: #1f1e1b;
  --gray-900: #14130f;

  /* 배경 및 표면 색상 */
  /* 🔴 --bg-primary 는 더 이상 그라데이션이 아니다. 옛 보라 그라데를 쓰던 자리는
     (body·.page-section) 밝은 바탕이 되고, 이미지 placeholder 3곳은 자기 배경으로 남는다. */
  /* 🔴 바탕은 카드(#fff)보다 확실히 어두워야 한다. #fafaf9 는 흰색과 차이가 너무 작아
     카드 경계가 흐려지고 화면이 통째로 비어 보였다 (픽셀링·웹픽 모두 회색 바탕 + 흰 카드).
     🔴 순백 (2026-09-04, 당근 방식) — 바탕에 색을 넣으려던 시도를 접는다.
     웜 베이지 → 밝은 회색까지 가 봤지만 "흐리멍텅"이 안 풀렸다. 원인은 바탕이 아니라
     **콘텐츠에 색이 없다는 것**이었다. 당근은 바탕이 순백인데도 비어 보이지 않는다 —
     아이콘·배너·썸네일이 색을 내기 때문이다.
     → 바탕은 비우고, 색은 콘텐츠(도구 카드 아이콘·상품 이미지·배지)가 낸다.
     ⚠️ 바탕이 카드와 같은 흰색이 되므로 **경계는 전적으로 테두리 몫**이다. */
  --bg-primary: #ffffff;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-alt: #f4f4f2;

  /* 텍스트 색상 — 🔴 3단계 대비를 확실히 벌린다.
     밀도를 높이면 위계가 약해진 만큼 **농도 차로** 눈을 안내해야 한다.
     제목(900)과 보조(500)가 가까우면 화면이 통째로 회색으로 읽힌다. */
  --text-primary: #14130f;   /* 제목·본문 — 거의 검정 */
  --text-secondary: #4a4741;
  --text-muted: #6b6862;
  --text-inverse: #ffffff;

  /* 간격 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* 폰트 크기 — 12단계 (옛 스케일은 4xl 다음이 xl 이라 본문·캡션·라벨이 뭉갰다) */
  --font-2xs:  0.6875rem;  /* 11px — 메타·ID 배지 */
  --font-xs:   0.75rem;    /* 12px — 태그 pill·캡션 */
  --font-sm:   0.8125rem;  /* 13px — 보조 본문 */
  --font-base: 0.875rem;   /* 14px — 기본 본문 (웹픽 밀도 기준) */
  --font-md:   0.9375rem;  /* 15px — 카드 제목 */
  --font-lg:   1.0625rem;  /* 17px */
  --font-xl:   1.25rem;    /* 20px — 섹션 타이틀 */
  --font-2xl:  1.5rem;     /* 24px */
  --font-3xl:  1.875rem;   /* 30px */
  --font-4xl:  2.25rem;    /* 36px — 히어로 */
  --font-5xl:  3rem;       /* 48px */

  /* 행간 */
  --line-tight: 1.25;
  --line-base:  1.5;
  --line-loose: 1.7;

  /* 자간 — 한글 헤드라인 인상을 좌우한다. 클수록 음수를 크게 */
  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.035em;

  /* 레이아웃 — 🔴 헤더와 본문이 **같은 값**을 써야 페이지를 옮길 때 좌측 라인이 안 튄다.
     예전엔 헤더 1200/20, 메인 1200/20, 소스메이커 1180/16, 공급사 1400/32 로 제각각이라
     전환할 때마다 로고와 본문이 미세하게 어긋났다.
     넓은 표가 필요한 페이지는 --container-wide 를 쓰되 좌우 패딩은 공통값을 유지한다. */
  --container-max:  1200px;
  --container-wide: 1400px;
  --container-pad:  20px;

  /* 🔴 **본문 읽기 폭(measure)** — 글이 한 줄에 얼마나 길어질 수 있는가.
     정설은 한 줄 45~75자다. 🔴 **`ch` 로 잡지 말 것** — `ch` 는 "0" 한 글자
     너비라서, 한글은 글자 폭이 숫자의 약 2배다. 68ch 는 라틴 68자지만
     **한글로는 34자**뿐이라 권장치의 절반이 된다(실제로 그래서 답답했다).
     800px = 14px 본문 기준 **한글 약 57자** — 권장 구간 한가운데이고,
     Medium(~680) · Notion(~708) · Stripe(~700) 같은 곳과도 같은 대역이다.
     🔴 **글에만 건다.** 표·카드·캔버스는 이 폭을 쓰지 않는다. */
  --measure:        800px;

  /* 반지름 */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;

  /* 그림자 — 바탕이 순백이 된 뒤로는 **경계를 테두리가 맡고** 그림자는 호버 등 보조 역할만 한다.
     얕고 좁게 유지할 것 — 짙으면 옛 '떠다니는 패널' 로 돌아간다. */
  --shadow-sm: 0 1px 2px rgba(20, 19, 15, 0.04);
  --shadow-md: 0 1px 3px rgba(20, 19, 15, 0.06), 0 1px 2px rgba(20, 19, 15, 0.04);
  --shadow-lg: 0 4px 12px rgba(20, 19, 15, 0.08), 0 1px 3px rgba(20, 19, 15, 0.05);
  --shadow-xl: 0 12px 28px rgba(20, 19, 15, 0.10), 0 2px 6px rgba(20, 19, 15, 0.05);

  /* 전환 효과 */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   기본 설정 및 리셋
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 🔴 스크롤바 자리를 항상 비워 둔다.
   짧은 페이지(스크롤바 없음) → 긴 페이지(스크롤바 있음) 로 이동하면 가운데 정렬된
   헤더·본문이 스크롤바 폭(약 15px)의 절반만큼 옆으로 밀린다. 이것이 페이지를 옮길 때
   내비가 "미세하게 튀어" 보이던 원인이다. */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-base);
  line-height: var(--line-base);
  letter-spacing: var(--tracking-tight);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 🔴 폼 컨트롤은 body 글꼴을 «상속하지 않는다»(UA 기본이 Arial·13px). 그래서 버튼·select 만 Arial 로 그려지고
   Arial 엔 800 굵기가 없어 가짜 굵기(faux bold)로 뭉개졌다(2026-09-15 [주문수집] 이 뿌옇던 원인). */
button, input, select, textarea { font-family: inherit; }

/* ========================================
   유틸리티 클래스
   ======================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.w-full { width: 100%; }
.h-full { height: 100%; }

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

/* ========================================
   버튼 컴포넌트
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 15px;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  background: none;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 버튼 변형 - Accent (상품등록용) */
.btn-accent {
  background: var(--brand-500);
  color: var(--text-inverse);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  font-weight: 600;
}

.btn-accent:hover:not(:disabled) {
  background: var(--brand-600);
}

.btn-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-accent:hover::before {
  left: 100%;
}

/* 버튼 변형 - Primary (주 CTA = 검정. 오렌지가 아니다) */
.btn-primary {
  background: var(--ink-900);
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background: var(--ink-700);
}

/* 버튼 변형 - Secondary */
.btn-secondary {
  background: var(--bg-surface);
  color: var(--ink-700);
  border: 1px solid var(--ink-300);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--ink-100);
  border-color: var(--ink-400);
}

/* 버튼 변형 - Outline (오렌지 테두리)
   🔴 **바탕을 채우지 않는다.** btn-primary(꽉 찬 오렌지)와 btn-secondary(회색 테두리)
      사이의 한 단계다. [결제 확인] 처럼 **찾기는 쉬워야 하지만 평소엔 누를 일이 없는**
      복구용 동작에 쓴다 — 항상 꽉 채우면 매번 눌러야 할 것처럼 읽히고,
      같은 화면의 [수정]·[복사] 오렌지 글자와도 경쟁한다. */
.btn-outline {
  background: var(--bg-surface);
  color: var(--brand-600);
  border: 1px solid var(--brand-500);
  font-weight: 600;
}

.btn-outline:hover:not(:disabled) {
  background: var(--brand-50);
  border-color: var(--brand-600);
}

/* 버튼 변형 - Danger */
.btn-danger {
  background: var(--error-color);
  color: var(--text-inverse);
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 버튼 상태 - Disabled */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--gray-200) !important;
  color: var(--gray-500) !important;
  border-color: var(--gray-300) !important;
}

.btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* 버튼 크기 변형 */
.btn-full {
  width: 100%;
}

.btn-lg {
  padding: 12px 24px;
  font-size: var(--font-base);
}

.btn-sm {
  padding: 8px 16px;
  font-size: var(--font-xs);
}

/* ========================================
   로딩 및 상태 표시 컴포넌트
   ======================================== */
.loading {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid var(--gray-200);
  border-top: 4px solid var(--primary-color);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

.loading-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  color: var(--text-secondary);
  gap: var(--spacing-md);
}

/* 빈 상태 표시 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  color: var(--text-secondary);
  text-align: center;
}

.empty-state-icon {
  font-size: var(--font-4xl);
  margin-bottom: var(--spacing-md);
  opacity: 0.3;
}

/* ========================================
   토스트 알림 컴포넌트
   ======================================== */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--gray-800);
  color: var(--text-inverse);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: 500;
  z-index: 3000;
  /* 🔴 **오른쪽 여백(20px)까지 밀어내야 한다.** `translateX(100%)` 는 제 너비만큼만
     미는데 `right: 20px` 가 남아 있어서 **평소에도 20px 이 화면에 걸쳐 있었다.**
     배경이 밝은 페이지에서는 묻혀 안 보였고, 매직브러시처럼 캔버스와 맞닿는
     화면에서 정체가 드러났다(사용자 신고) — 전 페이지 공통 버그였다. */
  transform: translateX(calc(100% + 20px));
  /* 🔴 `visibility` 로 확실히 잠근다. transform 만으로는 소수점 반올림이나
     `max-width` 가 걸릴 때 1px 이 남을 수 있고, 숨은 토스트가 **마우스를
     가로채는** 것도 막는다(오른쪽 끝 버튼이 안 눌리는 원인이 된다). */
  visibility: hidden;
  transition: transform var(--transition-base), visibility var(--transition-base);
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  word-wrap: break-word;
}

.toast.show {
  transform: translateX(0);
  visibility: visible;
}

/* 토스트 변형 */
.toast.success { background: var(--success-color); }
.toast.error { background: var(--error-color); }
.toast.warning { background: var(--warning-color); }
.toast.info { background: var(--info-color); }

/* ========================================
   배지 및 태그 컴포넌트
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 서비스 배지 */
.service-badge {
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
}

.service-badge.keypaid {
  background: #e3f2fd;
  color: #0277bd;
}

.service-badge.aipaid {
  background: #f3e5f5;
  color: #7b1fa2;
}

.service-badge.system {
  background: #e8f5e8;
  color: #2e7d32;
}

/* 역할 배지 */

/* 상품 태그 */
.tag-item {
  display: inline-block;
  background: rgba(217, 119, 87, 0.1);
  color: var(--primary-color);
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-xs);
  font-weight: 500;
  margin-right: 5px;
  margin-bottom: 3px;
}

/* 마켓 배지 */
.market-badge {
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 4px;
}

.market-badge.domeme {
  color: var(--primary-color);
}

.market-badge.coupang {
  color: #ff6b35;
}

.market-badge.smartstore {
  color: #03c75a;
}

.market-badge.gmarket {
  color: #e74c3c;
}

.market-badge.auction {
  color: #f39c12;
}

.market-badge.lotteon {
  color: #e91e63;
}

.market-badge.elevenst {
  color: #9b59b6;
}

.market-badge.aliexpress {
  color: #ff5722;
}

.market-badge.ownerclan {
  color: #607d8b;
}

.market-badge.other {
  color: var(--text-muted);
}

/* 쿠팡 파트너스 문구 - 썸네일과 정렬 */
.coupang-partners-notice {
  font-size: var(--font-xs);
  color: #e74c3c;
  margin-bottom: var(--spacing-sm);
  margin-left: 15px; /* 썸네일(60px) + 간격(15px) */
  line-height: 1.3;
  font-weight: 500;
  animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* 품절 배지 */
.sold-out-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
  background: var(--gray-400);
  color: var(--text-inverse);
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ========================================
   애니메이션 정의
   ======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalShow {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   헤더 컴포넌트
   ======================================== */
/* 웹픽 기준 슬림 헤더 — 전체 높이 약 52px (옛 헤더는 100px 가까이 먹었다).
   그림자 대신 1px 경계선. 떠 있는 느낌을 없애야 콘텐츠가 주인공이 된다. */
.header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  padding: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--ink-300);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px var(--container-pad);
  gap: var(--spacing-md);
}

/* 로고 영역 */
.logo {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.logo-image {
  height: 26px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
}

/* ── 데스크톱 가로 내비 ────────────────────────────────
   🔴 도구를 파는 사이트인데 그동안 도구가 전부 햄버거에 숨어 있었다.
   좁은 화면에서는 숨기고 햄버거가 대신한다 (mobile.css 아님 — 여기서 끝낸다). */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
  margin-left: var(--spacing-lg);
}

.header-nav a {
  padding: 6px 11px;
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--ink-600);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* 🔴 호버는 **글자까지 굵어지지 않는다** — font-weight 를 바꾸면 글자 폭이
   변해 옆 항목이 밀린다(레이아웃 흔들림). 색·배경만으로 강조한다. */
.header-nav a:hover {
  color: var(--ink-900);
  background: var(--ink-200);
}

/* 현재 페이지 — 서버가 붙인다(includes/header.php).
   🔴 배경만으로는 약해서 **밑줄 막대**를 같이 쓴다. 오렌지 배경은 연해서
      (brand-50) 흰 헤더 위에서 잘 안 보였고, 호버 회색과 헷갈렸다. */
.header-nav a.is-active {
  position: relative;
  color: var(--brand-700);
  background: var(--brand-50);
  font-weight: 600;
}

.header-nav a.is-active::after {
  content: '';
  position: absolute;
  /* 알약(radius-full) 안쪽에 앉도록 좌우를 넉넉히 들인다 */
  left: 11px;
  right: 11px;
  bottom: 1px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--brand-500);
}

/* 🔴 현재 페이지에 호버해도 **회색으로 덮이지 않는다.** 위 :hover 규칙과
   특정도가 같아 순서가 곧 우선순위다 — 이 블록이 뒤에 있어야 이긴다. */
.header-nav a.is-active:hover {
  color: var(--brand-700);
  background: var(--brand-100);
}

/* 🔴 nav 와 햄버거는 **한 쌍**이다. 같은 폭에서 정확히 교대해야 한다 —
   넓은 화면: nav 노출 + 햄버거의 중복 항목(menu-top·구분선) 숨김
   좁은 화면: nav 숨김 + 햄버거가 전부 담당 */
.hamburger-dropdown .menu-top,
.hamburger-dropdown .menu-divider {
  display: none;
}

@media (max-width: 820px) {
  .header-nav { display: none; }

  .hamburger-dropdown .menu-top { display: block; }
  .hamburger-dropdown .menu-divider { display: block; }
}

/* 인증 버튼 영역 */
.auth-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-nickname {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--ink-700);
}

/* ========================================
   햄버거 메뉴 컴포넌트
   ======================================== */
.hamburger-menu {
  position: relative;
}

.hamburger-btn {
  background: none;
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
  padding: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 15px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
}

.hamburger-btn:hover {
  background: var(--ink-100);
  border-color: var(--ink-400);
}

.hamburger-icon {
  font-weight: bold;
}

.hamburger-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  min-width: 200px;
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn var(--transition-base) ease;
}

.menu-section {
  padding: 8px 0;
}

.menu-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 8px 16px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.menu-item:hover {
  background: var(--gray-100);
  color: var(--primary-color);
}

.menu-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.menu-text {
  font-size: var(--font-sm);
  font-weight: 500;
}

.hamburger-dropdown.show {
  display: block;
}

/* ========================================
   페이지 섹션
   ======================================== */
.page-section {
  min-height: 100vh;
  background: var(--bg-primary);
  padding: var(--spacing-xl) 0;
}

/* ========================================
   공통 페이지 컨테이너 & 헤더
   (마이페이지, 관리자 페이지 공유)
   ======================================== */
.page-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-pad) 0;
}

/* 페이지 머리 우측에 붙는 보조 버튼 (관리자 [내 정보] 등) */
.page-head .btn-secondary {
  background: var(--bg-surface);
  color: var(--ink-700);
  border: 1px solid var(--ink-300);
  font-size: var(--font-sm);
  padding: 7px 18px;
}

.page-head .btn-secondary:hover {
  background: var(--ink-100);
}

/* ========================================
   모달 컴포넌트
   ======================================== */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: var(--bg-surface);
  margin: 2% auto;
  padding: 0;
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 500px;
  max-height: 95vh;
  box-shadow: var(--shadow-xl);
  animation: modalShow var(--transition-base) ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-large {
  max-width: 700px;
  max-height: 90vh;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: var(--bg-surface);
}

.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--gray-100);
}

.modal form {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* 모달 스크롤바 스타일 */
.modal form::-webkit-scrollbar {
  width: 6px;
}

.modal form::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
}

.modal form::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-sm);
}

.modal form::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ========================================
   폼 컴포넌트
   ======================================== */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  transition: all var(--transition-base);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.1);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background: var(--gray-100);
  color: var(--text-muted);
  cursor: not-allowed;
}

.auth-note {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  text-align: center;
  margin-top: 10px;
  line-height: 1.4;
}

.auth-note-highlight {
  color: var(--primary-color);
  font-weight: 500;
}

.auth-note-sub {
  color: var(--text-muted);
  font-weight: 400;
}

/* ========================================
   로그인 모달 아코디언
   ======================================== */
.auth-step-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 4px 0 16px;
}

/* Google Sign-In (메인 가입 경로) */
.google-signin-section {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.google-signin-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}
.google-signin-section #googleSignInButton {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 44px;
}
.google-signin-note {
  font-size: 0.85em;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}
.auth-divider {
  display: flex;
  align-items: center;
  margin: 0 20px;
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}
.auth-divider span {
  padding: 0 14px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.auth-welcome {
  padding: 12px 16px;
  background: var(--gray-50, #f8f9fa);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: var(--font-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

/* 구글 가입 경고 (로그인 모달) */
.google-signin-warning {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: rgba(255, 193, 7, 0.08);
  border-left: 3px solid #ffc107;
  border-radius: var(--radius-sm);
  font-size: 0.82em;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: left;
}
.google-signin-warning small {
  color: var(--text-muted);
  font-size: 0.92em;
}


/* 2열 그리드 */
.form-row {
  display: flex;
  gap: 12px;
}

.form-row .form-group {
  flex: 1;
  min-width: 0;
}

/* PIN 입력 */
.pin-input {
  text-align: center;
  letter-spacing: 8px;
  font-size: 20px;
  font-weight: 600;
}

.pin-forgot-link {
  display: block;
  margin-top: 6px;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* API 설정 접이식 */
.api-settings-section {
  margin-bottom: 16px;
}

.api-settings-toggle {
  cursor: pointer;
  padding: 10px 14px;
  font-size: var(--font-sm);
  color: var(--primary-color);
  font-weight: 600;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--gray-50, #f8f9fa);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-fast);
}

.api-settings-toggle:hover {
  background: var(--gray-100);
  border-color: var(--primary-color);
}

.toggle-arrow {
  font-size: 10px;
  transition: transform var(--transition-fast);
  display: inline-block;
}

.toggle-arrow.open {
  transform: rotate(90deg);
}

.api-settings-content {
  display: none;
  padding-top: 8px;
}

.api-settings-content.open {
  display: block;
}

.api-settings-note {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

.api-settings-note a {
  color: var(--primary-color);
}

/* 모바일 대응: 2열 → 1열 */
@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ========================================
   반응형 유틸리티
   ======================================== */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-100 {
  opacity: 1;
}

/* ========================================
   인터랙션 효과
   ======================================== */
.hover-lift {
  transition: transform var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* ========================================
   포커스 상태 개선
   ======================================== */
.focus-ring:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.keyboard-focusable {
  position: relative;
}

.keyboard-focusable:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========================================
   접근성 개선
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  :root {
    --gray-200: #000000;
    --gray-300: #000000;
    --text-secondary: #000000;
  }
}

/* ========================================
   프린트 스타일
   ======================================== */
@media print {
  .header,
  .add-product-btn,
  .modal,
  .toast {
    display: none !important;
  }

  .main-container {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .product-set-card {
    box-shadow: none;
    border: 1px solid #000;
    margin-bottom: 20px;
    page-break-inside: avoid;
  }
}

/* ========================================
   매크로냥 익스텐션 설치 유도 배너
   ======================================== */
.mn-install-banner {
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  border-bottom: 1px solid #f59e0b;
  color: #78350f;
  font-size: 13px;
  line-height: 1.4;
}
.mn-install-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
}
.mn-install-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.mn-install-text {
  flex: 1;
  min-width: 0;
}
.mn-install-text strong {
  color: #92400e;
}
/* 업데이트 배너의 보조 안내 — 「이미 설치했다면 크롬을 껐다 켜 주세요」.
   본문보다 약하게 둔다(헤드라인이 주인공이고 이건 안 사라질 때만 읽힌다).
   🔴 좁은 화면에서는 숨긴다 — 서버가 주는 headline 길이를 우리가 모르므로
   둘을 합치면 줄이 터진다. 확장을 쓰는 것은 PC 라 폰에서 잃는 것이 없다. */
.mn-banner-hint {
  opacity: 0.75;
  font-size: 0.92em;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .mn-banner-hint { display: none; }
}
.mn-install-cta {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #f59e0b;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  transition: background 0.15s;
}
.mn-install-cta:hover {
  background: #d97706;
}
.mn-install-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #78350f;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
}
.mn-install-close:hover {
  background: rgba(120, 53, 15, 0.1);
  opacity: 1;
}
@media (max-width: 600px) {
  .mn-install-inner {
    flex-wrap: wrap;
    padding: 8px 12px;
  }
  .mn-install-text {
    font-size: 12px;
    flex-basis: 100%;
    order: 2;
  }
  .mn-install-icon { order: 1; }
  .mn-install-cta { order: 3; margin-left: auto; }
  .mn-install-close { order: 4; }
}

/* ========================================
   결제코드 — 스마트스토어 주문 옵션에 입력하는 값
   진열(tools) · 마이페이지 양쪽이 쓴다. 한 곳에만 둔다.
   ======================================== */
.member-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-900);
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  /* 하이픈이 없으므로 더블클릭 한 번에 전체가 선택된다 */
  user-select: all;
}

/* ========================================
   페이지 머리 — 모든 페이지 공통

   🔴 **페이지마다 자기 헤더를 그리지 말 것.** 그렇게 해서 넷이 갈라졌었다:
      소스메이커 .sm-hero(설명이 우측 정렬) · 진열 .tools-hero(제목과 설명이 한 줄)
      · 공급사 .supplier-header · 마이페이지 <h1> 만.
      특히 우측 정렬은 제목과 시선이 이어지지 않아 **설명을 아예 놓쳤다** — 그게
      "소스메이커 설명이 잘 안 보인다" 의 원인이다.

   구조는 제목 + 설명 두 줄 + 경계선으로 고정한다. 좌측 정렬만 쓴다.
   도구 페이지는 이걸 직접 쓰지 않는다 — toolLayoutStart() 가 TOOL_CATALOG 을 읽어
   자동으로 그린다(도구가 껍데기를 몰라야 한다는 원칙).
   ======================================== */
.page-head {
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: var(--spacing-xl);
}

.page-head-title {
  margin: 0;
  font-size: var(--font-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

/* 설명 — 한 줄이 기본이다. 길면 알아서 두 줄로 넘어간다.
   🔴 줄 수를 CSS 로 강제하지 않는다 — 문구를 짧게 고치면 강제한 폭이
      오히려 엉뚱한 곳에서 줄을 끊는다. 길이는 문구가 정하고 CSS 는 상한만 둔다.
   🔴 max-width 는 유지한다. 1200px 을 꽉 채운 한 줄은 눈이 되돌아올 자리를
      못 찾아 오히려 안 읽힌다. */
.page-head-desc {
  margin: 6px 0 0;
  /* 🔴 `66ch` 였는데 한글로는 33자라 설명이 너무 일찍 꺾였다 — `ch` 는 "0"
     글자 기준이라 한글 폭을 못 잰다(--measure 주석 참조). 제목 아래 한 줄
     설명이라 본문(--measure)보다는 조금 좁게 둔다. */
  max-width: min(720px, 100%);
  font-size: var(--font-base);
  line-height: var(--line-loose);
  color: var(--ink-500);
  /* 🔴 **한 글자만 다음 줄에 떨어지는 것**(고아 글자)을 막는다.
     한국어는 어절이 길어 66ch 상한에 걸리면 '…됩니다' / '다.' 처럼
     끝의 한두 글자만 넘어가는 일이 잦다 — 매크로냥 설명에서 실제로 났다.
     🔴 `break-word` 가 아니라 `keep-all` 이다: 단어(어절) 중간을 쪼개지 않고
        어절 통째로 넘긴다. 한국어에서 어절이 쪼개지면 훨씬 읽기 나쁘다. */
  word-break: keep-all;
  /* 마지막 줄에 최소 두 어절은 남긴다(지원 브라우저에서만 — 없으면 무시된다) */
  text-wrap: pretty;
}

/* 제목 우측에 버튼 등을 붙이는 페이지용 (공급사) */
.page-head.has-aside {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

@media (max-width: 640px) {
  .page-head {
    padding-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }
}

/* ========================================
   사이트 푸터 — 전 페이지 공용 (includes/footer.php)

   🔴 도구 화면(앱셸)에는 안 나간다 — footer.php 가 $appShell 로 거른다.
   🔴 카드가 아니라 **줄**이다. 상단 경계선 하나로 본문과 갈라 놓고,
      배경을 칠하거나 상자를 두르지 않는다 (이중 중첩 금지).
   ======================================== */
.site-footer {
  margin-top: var(--spacing-2xl);
  border-top: 1px solid var(--ink-200);
  background: var(--bg-alt);
}

.site-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-pad);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.site-footer-links a {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
}

.site-footer-links a:hover {
  color: var(--brand-600);
}

/* 사업자 정보 — 라벨/값 쌍이 줄바꿈으로 흐른다.
   🔴 표(table)로 만들지 않는다. 항목이 6개뿐이고 표로 짜면 좁은 화면에서
   가로 스크롤이 생긴다. */
.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-md);
  margin: 0 0 var(--spacing-md);
}

.site-footer-legal-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--font-xs);
  line-height: var(--line-loose);
}

.site-footer-legal dt {
  color: var(--ink-400);
  font-weight: 500;
}

.site-footer-legal dd {
  margin: 0;
  color: var(--ink-500);
}

.site-footer-copy {
  margin: 0;
  font-size: var(--font-xs);
  color: var(--ink-400);
}

@media (max-width: 640px) {
  .site-footer-inner {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
}

/* ========================================
   로그인 모달 — 아이디 확인 줄

   🔴 **common.css 에 있어야 한다.** 로그인 모달은 includes/header.php 가
      그리므로 **전 페이지에 뜬다.** 예전엔 이 규칙이 main.css 에 있었는데,
      main.css 는 products.php 만 싣는다 → 랜딩·도구·마이페이지에서
      [확인] 버튼이 입력창 **아래로 떨어졌다**(flex 가 안 걸려서).
      로그인 모달 관련 스타일은 여기 둘 것.
   ======================================== */
.esm-input-group {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* 입력창이 남는 폭을 먹고, 버튼은 글자 폭만 차지한다 */
.esm-input-group input {
  flex: 1;
  min-width: 0;
}

.esm-input-group .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.esm-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  display: none;
  font-weight: 500;
}

.esm-status.success {
  background: #dcf0e4;
  color: #1c6b40;
  border: 1px solid #c3e6cb;
  display: block;
}

.esm-status.error {
  background: #fadfdd;
  color: #a33a33;
  border: 1px solid #f5c6cb;
  display: block;
}

.esm-status.loading {
  background: #fdf0d5;
  color: #8a6416;
  border: 1px solid #ffeaa7;
  display: block;
}

.esm-status.info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
  display: block;
}

.esm-status.warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  display: block;
}

/* ────────────── 내 정보 모달 ──────────────
   🔴 common.css 에 둔다. 모달은 **전 페이지**에 뜨므로 특정 페이지 CSS 에 두면
      다른 페이지에서 조용히 깨진다 (로그인 모달이 main.css 에 있어 [확인] 버튼이
      입력창 아래로 떨어졌던 것과 같은 함정 — prd-redesign.md §2). */

.myinfo-tabs {
  display: flex;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-lg);
  border-bottom: 1px solid var(--ink-200);
  flex: 0 0 auto;
}

/* 🔴 밑줄로 활성을 말한다. 배경 칠하기(pill)보다 조용하고, 탭이 3개뿐이라
   시각적 무게를 더 얹을 이유가 없다. */
.myinfo-tab {
  position: relative;
  padding: 12px var(--spacing-md);
  border: none;
  background: none;
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.myinfo-tab:hover {
  color: var(--ink-900);
}

.myinfo-tab.is-active {
  color: var(--ink-900);
  font-weight: 600;
}

.myinfo-tab.is-active::after {
  content: '';
  position: absolute;
  left: var(--spacing-sm);
  right: var(--spacing-sm);
  bottom: -1px;                      /* 경계선을 덮는다 */
  height: 2px;
  background: var(--brand-600);
  border-radius: 2px 2px 0 0;
}

/* 본문 — 탭 내용이 길어지면 여기만 스크롤한다(머리·탭은 고정). */
.myinfo-body {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  overflow-y: auto;
  flex: 1 1 auto;
}

.myinfo-panel {
  display: none;
}

.myinfo-panel.is-active {
  display: block;
}

/* 계정 탭 안의 '로그인 방법' 소제목 — 🔴 탭을 하나 더 만들지 않은 자리다.
   묶는 것이 묶이는 것보다 **약해 보여야** 한다(사이드바 라벨과 같은 처방):
   작게·자간 넓게 가고 위 여백으로 단락을 끊는다. */
.myinfo-subhead {
  margin: var(--spacing-lg) 0 var(--spacing-xs);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--ink-200);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

@media (max-width: 600px) {
  .myinfo-tabs {
    padding: 0 var(--spacing-md);
  }
  .myinfo-tab {
    flex: 1 1 0;
    padding: 12px var(--spacing-xs);
    text-align: center;
  }
  .myinfo-body {
    padding: var(--spacing-md);
  }
}


/* ────────────── 내 정보 · 도구/결제 탭 ──────────────
   🔴 common.css 에 둔다 — 모달이 전 페이지에 뜬다(위 '내 정보 모달' 과 같은 이유). */

/* 결제코드 · 결제 확인 — **맨 위 2열**.
   🔴 둘은 한 가지 일(결제한 것을 이용권으로 바꾸기)의 앞뒤다. 세로로 깔아 두니
      정작 페이지 설명이 안내하는 [결제 확인] 을 스크롤해서 찾아야 했다. */
/* 🔴 아래 경계선을 여기서 긋지 않는다. 바로 다음에 오는 `.myinfo-subhead`(내 도구)가
   이미 위쪽 테두리를 갖고 있어 **선이 두 줄로 겹쳐 보였다**(실측). 단락을 끊는 일은
   머리글 쪽에 맡긴다 — 선은 한 곳에서만 긋는다. */
.mypage-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-2xl);
}

/* 윗줄 = 라벨 + 값 (계정 탭 필드와 같은 규칙), 아랫줄 = 설명 */
.mypage-pay-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 34px;              /* 코드칸과 버튼칸의 윗줄 높이를 맞춘다 */
}

.mypage-pay-label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--ink-500);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 🔴 [확인] 만 오른쪽 끝으로 민다. **[복사] 는 코드에 붙인다** — 떼어 놓으면
   무엇을 복사하는 버튼인지 한 박자 늦게 읽힌다(실측). [확인] 은 짝이 되는 값이
   없으므로 칸 끝에 두어 좌우 두 칸의 버튼 위치가 나란해진다. */
.mypage-pay-head .btn {
  margin-left: auto;
}

.mypage-pay-head .member-code + .edit-btn {
  margin-left: 0;
}

.mypage-pay-desc {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-xs);
  line-height: var(--line-base);
  color: var(--ink-500);
  /* 🔴 확인 실패 시 힌트가 두 줄로 길어진다 — 칸을 넘치지 않게 감싼다. */
  overflow-wrap: anywhere;
}

/* 도구 목록 — **1열**.
   🔴 위 결제 영역과 같은 2열로 하지 않는다. 위는 '항목 둘을 짝지은 2열',
      아래는 '목록'이라 성격이 다르다 — 같은 모양인데 뜻이 다르면 규칙을 두 번
      배워야 한다. 게다가 보유 도구는 보통 1~2개라 2열이면 오른쪽이 빈다. */
.mypage-row-note {
  font-size: var(--font-xs);
  color: var(--ink-400);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 아직 아무것도 없을 때 — 🔴 빈 칸으로 두지 않는다. 살 사람이 어디로 갈지
   몰라 막히면 안 된다. */
.mypage-empty {
  padding: var(--spacing-lg) 0;
  text-align: center;
}

.mypage-empty-text {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-sm);
  color: var(--ink-500);
}

.mypage-empty-link {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}

.mypage-empty-link:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .mypage-pay {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-md);
  }
}

/* 🔧 개발판 경고 띠 — 확장이 로컬을 보는데 운영 화면을 열었을 때만 `js/common.js` 가 꽂는다.
   🟢 일반 사용자에게는 뜰 수 없다(개발판 표식은 커밋·배포 ZIP 양쪽에서 막힌다).
   🔴 `position: sticky` 로 맨 위에 붙인다 — 스크롤로 사라지면 «깜빡함»을 못 잡는다. */
.mn-dev-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--error-color);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.mn-dev-bar b { font-weight: 700; }