/* ============================================================
   GatsBeaN Care Order — 공통 디자인 시스템
   styles.css v1.0
   아이콘: Lucide Icons (inline SVG, stroke 기반)
   폰트: Noto Sans KR
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/* ============================================================
   1. CSS 변수 (Design Tokens)
   ============================================================ */
:root {
  /* 브랜드 색상 */
  --color-gold:         #C9A84C;
  --color-gold-light:   #E8C97A;
  --color-gold-dark:    #9A7A2E;
  --color-gold-bg:      rgba(201, 168, 76, 0.10);
  --color-gold-border:  rgba(201, 168, 76, 0.30);

  /* 다크 계열 */
  --color-dark:         #1A1A1A;
  --color-dark-2:       #2C2C2C;
  --color-dark-3:       #3D3D3D;

  /* 크림/배경 */
  --color-cream:        #F5F0E8;
  --color-bg:           #F4F6F9;
  --color-bg-subtle:    #FAFAFA;
  --color-white:        #FFFFFF;

  /* 텍스트 */
  --color-text:         #1A1A1A;
  --color-text-secondary: #4A5568;
  --color-text-muted:   #6B7280;
  --color-text-disabled: #A0AEC0;

  /* 테두리 */
  --color-border:       #E2E8F0;
  --color-border-dark:  #CBD5E0;

  /* 상태 색상 */
  --color-success:      #38A169;
  --color-success-bg:   rgba(56, 161, 105, 0.10);
  --color-success-border: rgba(56, 161, 105, 0.25);

  --color-danger:       #E53E3E;
  --color-danger-bg:    rgba(229, 62, 62, 0.10);
  --color-danger-border: rgba(229, 62, 62, 0.25);

  --color-info:         #3182CE;
  --color-info-bg:      rgba(49, 130, 206, 0.08);
  --color-info-border:  rgba(49, 130, 206, 0.25);

  --color-warning:      #DD6B20;
  --color-warning-bg:   rgba(221, 107, 32, 0.10);
  --color-warning-border: rgba(221, 107, 32, 0.25);

  --color-purple:       #805AD5;
  --color-purple-bg:    rgba(128, 90, 213, 0.10);

  /* 간격 */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* 반경 */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* 그림자 */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
  --shadow:     0 2px 6px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.07);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12), 0 16px 48px rgba(0,0,0,0.08);

  /* 타이포그래피 */
  --font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  20px;
  --font-size-3xl:  24px;
  --font-size-4xl:  28px;
  --line-height:    1.6;

  /* 레이아웃 */
  --sidebar-width:    220px;
  --topbar-height:    56px;
  --mobile-tabbar-h:  64px;
  --mobile-header-h:  56px;
}

/* ============================================================
   2. 리셋 & 기본
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ============================================================
   3. 버튼 컴포넌트
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 크기 */
.btn-xs  { padding: 5px 10px; font-size: var(--font-size-xs); border-radius: var(--radius-sm); }
.btn-sm  { padding: 7px 14px; font-size: var(--font-size-sm); }
.btn-md  { padding: 10px 18px; font-size: var(--font-size-base); }
.btn-lg  { padding: 13px 24px; font-size: var(--font-size-md); }
.btn-xl  { padding: 15px 28px; font-size: var(--font-size-lg); }
.btn-full { width: 100%; }
.btn-icon { padding: 8px; border-radius: var(--radius); }
.btn-icon-sm { padding: 6px; border-radius: var(--radius-sm); }

/* 스타일 */
.btn-primary {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: var(--color-white);
}
.btn-primary:hover  { filter: brightness(1.06); }
.btn-primary:active { filter: brightness(0.96); }

.btn-secondary {
  background: var(--color-white);
  color: var(--color-text);
  border: 1.5px solid var(--color-border-dark);
}
.btn-secondary:hover { border-color: var(--color-gold); color: var(--color-gold-dark); background: var(--color-gold-bg); }

.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
}
.btn-danger:hover { filter: brightness(1.06); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1.5px solid transparent;
}
.btn-ghost:hover { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }

.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-dark:hover { background: var(--color-dark-2); }

.btn-success {
  background: var(--color-success);
  color: var(--color-white);
}
.btn-success:hover { filter: brightness(1.06); }

/* 상태 */
.btn:disabled, .btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-loading {
  pointer-events: none;
  opacity: 0.75;
}
.btn-loading .btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   4. 입력 필드 컴포넌트
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
}
.form-label .required { color: var(--color-danger); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-disabled); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-bg);
}
.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.form-hint  { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.form-error { font-size: var(--font-size-xs); color: var(--color-danger); }

/* 검색 입력 */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-wrap .search-icon {
  position: absolute;
  left: 12px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.search-input-wrap .form-input { padding-left: 38px; }

/* 파일 업로드 */
.file-upload-area {
  border: 2px dashed var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--color-bg-subtle);
}
.file-upload-area:hover { border-color: var(--color-gold); background: var(--color-gold-bg); }
.file-upload-area .upload-icon { color: var(--color-text-muted); margin: 0 auto var(--space-2); }
.file-upload-area .upload-text { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.file-upload-area .upload-hint { font-size: var(--font-size-xs); color: var(--color-text-disabled); margin-top: var(--space-1); }

/* 수량 조절 */
.qty-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-subtle);
  border: none;
  font-size: 18px; font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}
.qty-btn:hover { background: var(--color-border); }
.qty-value { min-width: 32px; text-align: center; font-size: var(--font-size-md); font-weight: 700; }

/* 칩 선택 */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-white);
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--color-gold); color: var(--color-gold-dark); }
.chip.selected {
  border-color: var(--color-gold);
  background: var(--color-gold-bg);
  color: var(--color-gold-dark);
  font-weight: 700;
}

/* ============================================================
   5. 카드 컴포넌트
   ============================================================ */
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.card-title { font-size: var(--font-size-md); font-weight: 700; }
.card-action { font-size: var(--font-size-sm); color: var(--color-gold-dark); font-weight: 600; cursor: pointer; }
.card-action:hover { text-decoration: underline; }
.card-body { padding: var(--space-4) var(--space-5); }
.card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

/* KPI 카드 */
.kpi-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.kpi-card .kpi-icon-wrap {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 42px; height: 42px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.kpi-card .kpi-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; margin-bottom: var(--space-2); }
.kpi-card .kpi-value { font-size: var(--font-size-3xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-1); }
.kpi-card .kpi-value span { font-size: var(--font-size-base); font-weight: 400; color: var(--color-text-muted); }
.kpi-card .kpi-change { font-size: var(--font-size-sm); }
.kpi-change-up   { color: var(--color-success); }
.kpi-change-down { color: var(--color-danger); }
.kpi-icon-gold   { background: var(--color-gold-bg); color: var(--color-gold-dark); }
.kpi-icon-green  { background: var(--color-success-bg); color: var(--color-success); }
.kpi-icon-blue   { background: var(--color-info-bg); color: var(--color-info); }
.kpi-icon-red    { background: var(--color-danger-bg); color: var(--color-danger); }
.kpi-icon-warn   { background: var(--color-warning-bg); color: var(--color-warning); }

/* ============================================================
   6. 상태 배지
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* 상태별 */
.badge-success  { background: var(--color-success-bg); color: var(--color-success); }
.badge-danger   { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info     { background: var(--color-info-bg);    color: var(--color-info); }
.badge-warning  { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-gold     { background: var(--color-gold-bg);    color: var(--color-gold-dark); }
.badge-gray     { background: #F0F0F0;                 color: var(--color-text-muted); }
.badge-purple   { background: var(--color-purple-bg);  color: var(--color-purple); }
.badge-dark     { background: var(--color-dark);       color: var(--color-white); }

/* 주문 상태 */
.status-pending     { background: var(--color-warning-bg); color: var(--color-warning); }
.status-confirmed   { background: var(--color-info-bg);    color: var(--color-info); }
.status-paid        { background: var(--color-gold-bg);    color: var(--color-gold-dark); }
.status-shipping    { background: var(--color-purple-bg);  color: var(--color-purple); }
.status-delivered   { background: var(--color-success-bg); color: var(--color-success); }
.status-cancelled   { background: #F0F0F0;                 color: var(--color-text-muted); }
.status-unpaid      { background: var(--color-danger-bg);  color: var(--color-danger); }
.status-waiting     { background: var(--color-warning-bg); color: var(--color-warning); }

/* ============================================================
   7. 탭 컴포넌트
   ============================================================ */
/* 언더라인 탭 */
.tabs-underline {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  gap: 0;
}
.tab-item {
  padding: 10px 18px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  white-space: nowrap;
}
.tab-item:hover { color: var(--color-text); }
.tab-item.active { color: var(--color-gold-dark); border-bottom-color: var(--color-gold); font-weight: 700; }

/* 필 탭 */
.tabs-fill {
  display: flex;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}
.tabs-fill .tab-item {
  flex: 1;
  text-align: center;
  border-radius: var(--radius-sm);
  border-bottom: none;
  margin-bottom: 0;
  padding: 8px 12px;
}
.tabs-fill .tab-item.active {
  background: var(--color-white);
  color: var(--color-gold-dark);
  box-shadow: var(--shadow-xs);
  border-bottom: none;
}

/* ============================================================
   8. 모달 컴포넌트
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}
.modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: var(--font-size-lg); font-weight: 700; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  border: none;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-muted);
}
.modal-close:hover { background: var(--color-border); color: var(--color-text); }
.modal-body { padding: var(--space-5) var(--space-6); }
.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: var(--space-2);
}

/* 확인 다이얼로그 */
.confirm-dialog .modal-body { text-align: center; padding: var(--space-8) var(--space-6); }
.confirm-dialog .confirm-icon { margin: 0 auto var(--space-4); color: var(--color-warning); }
.confirm-dialog .confirm-title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-2); }
.confirm-dialog .confirm-desc { font-size: var(--font-size-base); color: var(--color-text-muted); }

/* ============================================================
   9. 알림 컴포넌트
   ============================================================ */
/* 인라인 배너 */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.alert-icon { flex-shrink: 0; margin-top: 1px; }
.alert-content { flex: 1; }
.alert-title { font-weight: 700; margin-bottom: 2px; }
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.alert-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  color: var(--color-danger); }
.alert-gold    { background: var(--color-gold-bg);    border-color: var(--color-gold-border);    color: var(--color-gold-dark); }
.alert .alert-content, .alert .alert-title { color: var(--color-text); }

/* 토스트 */
.toast-container {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.toast {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: var(--space-2);
  pointer-events: auto;
  animation: toast-in 0.2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 알림 드롭다운 */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 500;
  overflow: hidden;
}
.notif-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
}
.notif-header-title { font-size: var(--font-size-md); font-weight: 700; }
.notif-mark-all { font-size: var(--font-size-xs); color: var(--color-gold-dark); font-weight: 600; cursor: pointer; }
.notif-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg); }
.notif-item.unread { background: rgba(201,168,76,0.04); }
.notif-item.unread .notif-title { font-weight: 700; }
.notif-icon-wrap {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notif-title { font-size: var(--font-size-sm); color: var(--color-text); }
.notif-time  { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.notif-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  margin-top: 5px;
}

/* ============================================================
   10. 테이블 컴포넌트
   ============================================================ */
.data-table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.data-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: #FAFBFC; }
.data-table .col-actions { text-align: right; white-space: nowrap; }

/* 아바타 */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.avatar-sm { width: 26px; height: 26px; font-size: var(--font-size-xs); }
.avatar-lg { width: 44px; height: 44px; font-size: var(--font-size-lg); }

/* ============================================================
   11. 상태 화면 (Empty / Loading / Error)
   ============================================================ */
.state-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  text-align: center;
  gap: var(--space-3);
}
.state-screen .state-icon { color: var(--color-text-disabled); margin-bottom: var(--space-2); }
.state-screen .state-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); }
.state-screen .state-desc  { font-size: var(--font-size-base); color: var(--color-text-muted); max-width: 280px; line-height: 1.6; }

/* Kongi 플레이스홀더 */
.kongi-placeholder {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--color-gold-bg);
  border: 2px dashed var(--color-gold-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  color: var(--color-gold-dark);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-align: center;
  padding: var(--space-3);
  /* Kongi character asset will be inserted here */
}
.kongi-placeholder-sm {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--color-gold-bg);
  border: 2px dashed var(--color-gold-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}

/* 로딩 스피너 */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
.spinner-sm { width: 20px; height: 20px; border-width: 2px; }
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }

/* 스켈레톤 */
.skeleton {
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text  { height: 14px; border-radius: var(--radius-sm); }
.skeleton-title { height: 20px; border-radius: var(--radius-sm); }
.skeleton-card  { height: 80px; border-radius: var(--radius-md); }

/* ============================================================
   12. 진행 단계 (Stepper)
   ============================================================ */
.stepper {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-5);
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}
.step-circle {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  transition: all 0.2s;
}
.step-circle.done    { background: var(--color-gold); color: var(--color-white); }
.step-circle.active  { background: var(--color-dark); color: var(--color-gold); border: 2px solid var(--color-gold); }
.step-circle.pending { background: var(--color-bg); color: var(--color-text-muted); border: 2px solid var(--color-border); }
.step-label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 500; }
.step-label.active { color: var(--color-text); font-weight: 700; }
.step-connector { flex: 1; height: 2px; background: var(--color-border); margin-bottom: 18px; }
.step-connector.done { background: var(--color-gold); }

/* ============================================================
   13. 구분선 & 간격
   ============================================================ */
.divider { height: 1px; background: var(--color-border); }
.divider-v { width: 1px; background: var(--color-border); align-self: stretch; }
.section-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: var(--space-3) 0 var(--space-2);
}

/* ============================================================
   14. 타임라인
   ============================================================ */
.timeline { padding: 0; }
.tl-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  position: relative;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 52px;
  bottom: -var(--space-4);
  width: 2px;
  background: var(--color-border);
}
.tl-item:last-child::before { display: none; }
.tl-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tl-dot-gold    { background: var(--color-gold-bg); color: var(--color-gold-dark); }
.tl-dot-success { background: var(--color-success-bg); color: var(--color-success); }
.tl-dot-info    { background: var(--color-info-bg); color: var(--color-info); }
.tl-dot-danger  { background: var(--color-danger-bg); color: var(--color-danger); }
.tl-dot-gray    { background: var(--color-bg); color: var(--color-text-muted); }
.tl-content { flex: 1; padding-top: 8px; }
.tl-date  { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 500; }
.tl-title { font-size: var(--font-size-base); font-weight: 700; margin: 2px 0; }
.tl-desc  { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ============================================================
   15. 관리자 웹 레이아웃
   ============================================================ */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg);
}

/* 사이드바 */
.admin-sidebar {
  width: var(--sidebar-width);
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
}
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sidebar-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sidebar-brand-name { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-gold); letter-spacing: 1px; }
.sidebar-brand-sub  { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 2px; margin-top: 2px; }
.sidebar-role-badge {
  display: inline-block;
  margin-top: var(--space-2);
  background: rgba(201,168,76,0.18);
  color: var(--color-gold-light);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.sidebar-nav { flex: 1; padding: var(--space-2) 0; }
.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: var(--space-3) 18px var(--space-1);
}
.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.sidebar-nav-link:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.sidebar-nav-link.active {
  background: rgba(201,168,76,0.12);
  color: var(--color-gold-light);
  border-left-color: var(--color-gold);
  font-weight: 600;
}
.sidebar-nav-link .nav-icon { flex-shrink: 0; opacity: 0.7; }
.sidebar-nav-link.active .nav-icon { opacity: 1; }
.sidebar-nav-badge {
  margin-left: auto;
  background: var(--color-danger);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
}
.sidebar-nav-badge.gold { background: var(--color-gold); }

.sidebar-footer {
  padding: var(--space-4) 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; }
.sidebar-user-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-white); }
.sidebar-user-role { font-size: var(--font-size-xs); color: rgba(255,255,255,0.35); margin-top: 1px; }

/* 탑바 */
.admin-topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  z-index: 90;
  box-shadow: var(--shadow-xs);
}
.topbar-title { font-size: var(--font-size-xl); font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: var(--space-3); }
.topbar-icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  position: relative;
  transition: all 0.15s;
}
.topbar-icon-btn:hover { border-color: var(--color-gold); color: var(--color-gold-dark); }
.topbar-notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  border: 1.5px solid var(--color-white);
}

/* 메인 콘텐츠 */
.admin-main {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.admin-content { padding: var(--space-6); flex: 1; }

/* ============================================================
   16. 모바일 앱 레이아웃
   ============================================================ */
/* 모바일 폰 프레임 (데모용) */
.phone-demo-wrap {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: var(--space-6);
}
.phone-frame {
  width: 390px;
  min-height: 720px;
  background: var(--color-white);
  border-radius: 44px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 8px #1A1A1A, 0 0 0 10px #3D3D3D;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 상태바 */
.app-statusbar {
  background: var(--color-dark);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}
.statusbar-time { font-size: 13px; font-weight: 600; color: var(--color-white); }
.statusbar-icons { display: flex; gap: 6px; align-items: center; color: var(--color-white); font-size: 11px; }

/* 앱 헤더 */
.app-header {
  background: var(--color-dark);
  padding: 12px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.app-header-brand .brand-name { font-size: 17px; font-weight: 700; color: var(--color-gold); letter-spacing: 1px; }
.app-header-brand .brand-sub  { font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 2px; }
.app-header-actions { display: flex; gap: 10px; align-items: center; }
.app-header-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(201,168,76,0.14);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-gold);
  position: relative;
}
.app-header-badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-danger);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-dark);
}

/* 앱 콘텐츠 스크롤 */
.app-content {
  flex: 1;
  overflow-y: auto;
  background: var(--color-cream);
  padding-bottom: var(--mobile-tabbar-h);
}
.app-content::-webkit-scrollbar { display: none; }

/* 하단 탭바 */
.bottom-tabbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--mobile-tabbar-h);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 4px 8px;
  z-index: 10;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 6px 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.tabbar-item .tabbar-icon { color: #BBBBBB; }
.tabbar-item .tabbar-label { font-size: 10px; font-weight: 500; color: var(--color-text-muted); }
.tabbar-item.active .tabbar-icon { color: var(--color-gold); }
.tabbar-item.active .tabbar-label { color: var(--color-gold-dark); font-weight: 700; }

/* 앱 섹션 */
.app-section { padding: var(--space-4) var(--space-4) 0; }
.app-section-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: var(--space-2);
}

/* 앱 카드 */
.app-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

/* 플로팅 버튼 */
.float-cart {
  position: absolute;
  bottom: calc(var(--mobile-tabbar-h) + 12px);
  left: 16px; right: 16px;
  background: var(--color-dark);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  cursor: pointer;
}
.float-cart-count {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-white);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.float-cart-text { font-size: var(--font-size-sm); color: var(--color-white); font-weight: 500; }
.float-cart-price { font-size: var(--font-size-md); font-weight: 700; color: var(--color-gold); }

/* ============================================================
   17. 인쇄용 스타일
   ============================================================ */
.print-document {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm 18mm;
  background: white;
  font-family: var(--font-family);
  font-size: 11pt;
  color: #000;
  line-height: 1.5;
}
.print-header { border-bottom: 2px solid #000; padding-bottom: 12px; margin-bottom: 16px; }
.print-brand-name { font-size: 18pt; font-weight: 700; }
.print-doc-title  { font-size: 14pt; font-weight: 700; margin-top: 4px; }
.print-meta-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.print-meta-item  { font-size: 10pt; }
.print-meta-label { font-weight: 700; color: #555; }
.print-section-title { font-size: 11pt; font-weight: 700; border-bottom: 1px solid #DDD; padding-bottom: 4px; margin: 14px 0 8px; }
.print-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.print-table th { background: #F5F5F5; padding: 6px 10px; text-align: left; border: 1px solid #DDD; font-weight: 700; }
.print-table td { padding: 6px 10px; border: 1px solid #DDD; }
.print-total-row td { font-weight: 700; background: #F9F9F9; }
.print-footer { margin-top: 20px; padding-top: 12px; border-top: 1px solid #DDD; font-size: 9pt; color: #888; }
.print-signature { display: flex; justify-content: flex-end; gap: 40px; margin-top: 20px; }
.print-sign-box { text-align: center; }
.print-sign-line { width: 120px; border-bottom: 1px solid #000; margin-bottom: 4px; height: 40px; }

@media print {
  body { background: white; }
  .no-print { display: none !important; }
  .print-document { width: 100%; padding: 0; box-shadow: none; }
  @page { size: A4; margin: 15mm; }
}

/* ============================================================
   18. 유틸리티
   ============================================================ */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--color-text-muted); }
.text-sm     { font-size: var(--font-size-sm); }
.text-xs     { font-size: var(--font-size-xs); }
.text-lg     { font-size: var(--font-size-lg); }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-gold   { color: var(--color-gold-dark); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.rounded    { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-full { border-radius: var(--radius-full); }
.overflow-hidden { overflow: hidden; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* ============================================================
   19. 반응형
   ============================================================ */
@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .admin-sidebar { transform: translateX(-100%); transition: transform 0.25s; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
  .admin-topbar { left: 0; }
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .phone-frame { width: 100%; max-width: 390px; border-radius: 0; box-shadow: none; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .admin-content { padding: var(--space-4); }
}

/* ============================================================
   20. Sprint 11~14b — 화면별 inline CSS 이관 (Sprint 15 정리)
   각 화면이 자체 격리된 prefix(.pd-/.ar-/.asl-/.asr-/.csl-/.csd-/
   .tl-/.atl-/.rd-/.mi-/.sd-/.sl-/.sa-/.mc-/.ol-/.od-/.ci-/.pay-/
   .sr-/.nl-/.gb-tech-/.hero-/.login-/.signup-/.pending-) 와
   단단한 부모 prefix cascade 로 정의해 둔 인라인 <style> 을
   한 자리로 모음.
   원본 정의 그대로 유지 — 의미 변경 0. 선언 순서는
   base.html → 17. → 20. → 21. 로직 변경 없음.
   notifications/list.html 은 Sprint 12 결정 (d) 의도 유지로 이관 제외.
   ============================================================ */

/* === 20.1 Layouts (Sprint 14a) — _admin / _mobile / _technician === */

/* _admin_layout.html : Sprint 14a 햄버거 + backdrop (≤1024px) */
.admin-topbar .topbar-left {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 1;
}
.admin-topbar .topbar-hamburger {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-text);
  padding: 0;
  flex-shrink: 0;
}
.admin-topbar .topbar-hamburger:hover {
  border-color: var(--color-gold); color: var(--color-gold-dark);
}
.admin-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 95;
}
.admin-backdrop.open { display: block; }
@media (max-width: 1024px) {
  .admin-topbar .topbar-hamburger { display: inline-flex; }
  .admin-sidebar { z-index: 110; }  /* backdrop(95) 보다 위 */
}

/* _mobile_layout.html : Sprint 14a 큰 화면 가운데 정렬 */
@media (min-width: 768px) {
  body { background: var(--color-cream); }
  .gb-mobile-shell {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--color-border), 0 12px 40px rgba(0,0,0,0.08);
    min-height: 100vh;
  }
  .gb-mobile-shell ~ nav.bottom-tabbar,
  nav.bottom-tabbar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    max-width: 480px;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .gb-mobile-shell { max-width: none; margin: 0; box-shadow: none; }
}

/* _technician_layout.html : Sprint 14a 반응형 컨테이너
   기존 gatsbean.css 클래스는 0 변경, _technician 전용 .gb-tech-* 신규. */
.gb-tech-shell {
  min-height: 100vh;
  background: var(--color-cream);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--mobile-tabbar-h);
}
.gb-tech-sidebar { display: none; }
.gb-tech-topbar  { display: none; }
.gb-tech-header  { display: flex; }
.gb-tech-tabbar  { display: flex; }
.gb-tech-content { flex: 1; padding: 0; }

@media (min-width: 768px) {
  .gb-tech-shell { flex-direction: row; padding-bottom: 0; }
  .gb-tech-sidebar {
    display: flex; flex-direction: column;
    width: 200px;
    background: var(--color-dark);
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 100;
    overflow-y: auto;
  }
  .gb-tech-sidebar::-webkit-scrollbar { width: 4px; }
  .gb-tech-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
  .gb-tech-main {
    margin-left: 200px;
    flex: 1;
    display: flex; flex-direction: column;
    min-height: 100vh;
  }
  .gb-tech-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    height: 60px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    position: sticky; top: 0; z-index: 90;
  }
  .gb-tech-topbar .topbar-title { font-size: 20px; font-weight: 700; }
  .gb-tech-topbar .topbar-right { display: flex; align-items: center; gap: 12px; }
  .gb-tech-header { display: none; }
  .gb-tech-tabbar { display: none; }
  .gb-tech-content { padding: 24px; }
}

/* === 20.2 진입 4종 (Sprint 11) — login / password_change / signup / pending === */

/* users/login.html : 로그인 진입 — 다크 헤더 + 흰 sheet */
.login-bg {
  background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
  padding: 48px 24px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.login-brand { font-size: 24px; font-weight: 700; color: var(--color-gold); letter-spacing: 2px; }
.login-sub   { font-size: 11px; color: rgba(255,255,255,.4); letter-spacing: 3px; }
.login-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  margin-top: -16px;
  padding: 24px 20px 32px;
  flex: 1;
  max-width: 480px;
  width: 100%;
  margin-left: auto; margin-right: auto;
}
.login-form { display: flex; flex-direction: column; gap: 14px; max-width: 380px; margin: 0 auto; }
.login-title-main { font-size: 20px; font-weight: 700; }
.login-title-sub  { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }
.login-foot   { text-align: center; font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.login-foot a { color: var(--color-gold-dark); font-weight: 700; }
.login-err {
  background: var(--color-danger-bg); color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  padding: 10px 12px; border-radius: var(--radius); font-size: 13px;
}

/* users/password_change.html : 비밀번호 변경 — .pwc-card 부모 격리 */
.pwc-card input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* businesses/signup.html : 가입 신청 폼 */
.signup-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  width: 100%;
}
.signup-head { text-align: left; padding: 4px 4px 16px; }
.signup-head .signup-title { font-size: 22px; font-weight: 700; color: var(--color-text); }
.signup-head .signup-desc  { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.6; }
.signup-form { display: flex; flex-direction: column; gap: 14px; }
.signup-terms-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
}
.signup-terms-row input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
.signup-terms-row label { font-size: 13px; color: var(--color-text); cursor: pointer; line-height: 1.5; }
.signup-foot { text-align: center; font-size: 12px; color: var(--color-text-muted); margin-top: 12px; }
.signup-foot a { color: var(--color-gold-dark); font-weight: 700; }

/* businesses/pending.html : 승인 대기 */
.pending-brandbar {
  background: var(--color-dark);
  padding: 24px 16px 20px;
  text-align: center;
}
.pending-brand-name { font-size: 18px; font-weight: 700; color: var(--color-gold); letter-spacing: 1px; }
.pending-brand-sub  { font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: 2px; margin-top: 2px; }
.approval-wait {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 20px;
  gap: 14px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.pending-info-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  width: 100%;
  text-align: left;
}
.pending-info-label { font-size: 11px; color: var(--color-text-muted); margin-bottom: 6px; }
.pending-info-name  { font-size: 15px; font-weight: 700; }
.pending-info-meta  { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.pending-foot {
  font-size: 12px; color: var(--color-text-muted);
  text-align: center; line-height: 1.7;
}

/* === 20.3 관리자 PC 5종 (Sprint 13 + Sprint 14a/14b) ===
   admin_report / admin_service_list / admin_service_report / admin_timeline / dashboard
   prefix: .ar-* / .asl-* / .asr-* / .atl-* / .gb-dash + .gb-hero + .gb-warning + .gb-card + .gb-section + .gb-table */

/* maintenance/admin_report.html : 관리자 점검 리포트 */
.ar-wrap { max-width: 1100px; margin: 0 auto; }
.ar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ar-back { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gold-dark); font-size: 13px; font-weight: 600; text-decoration: none; }

.ar-hero {
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  border-radius: 12px; padding: 18px 22px; color: #fff; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.ar-hero::after { content: ''; position: absolute; right: -16px; top: -16px; width: 120px; height: 120px; border-radius: 50%; background: rgba(201,168,76,.08); }
.ar-hero .biz { font-size: 20px; font-weight: 700; position: relative; z-index: 1; }
.ar-hero .meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; position: relative; z-index: 1; }
.ar-hero .meta .k { font-size: 11px; color: rgba(255,255,255,.55); }
.ar-hero .meta .v { font-size: 13px; font-weight: 700; color: #fff; margin-top: 2px; }
.ar-hero .actions { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; gap: 8px; }

.ar-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 900px) { .ar-grid { grid-template-columns: 1fr; } }

.ar-card { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.ar-card.dim { opacity: .85; background: var(--color-bg); }
.ar-h2 { font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .8px; margin: 0 0 12px; }

.ar-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.ar-pill.draft     { background: var(--color-warning-bg); color: var(--color-warning); }
.ar-pill.submitted { background: var(--color-success-bg); color: var(--color-success); }
.ar-pill.unpaid    { background: var(--color-danger-bg); color: var(--color-danger); }
.ar-pill.paid      { background: var(--color-success-bg); color: var(--color-success); }
.ar-pill.contract  { background: var(--color-info-bg); color: var(--color-info); }
.ar-pill.noncontract { background: var(--color-purple-bg); color: var(--color-purple); }

.ar-check { display: flex; align-items: center; padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
.ar-check:first-child { border-top: none; }
.ar-check input[type=checkbox] { width: 18px; height: 18px; margin-right: 10px; }

.ar-field-label { display: block; font-size: 12px; color: var(--color-text-muted); margin: 10px 0 4px; font-weight: 600; }
.ar-input, .ar-input textarea, .ar-input select { width: 100%; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 13px; box-sizing: border-box; font-family: inherit; }
textarea.ar-input { resize: vertical; }

.ar-btn { display: inline-block; padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--color-dark); background: #fff; color: var(--color-dark); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; font-family: inherit; }
.ar-btn.solid { background: var(--color-dark); color: #fff; }
.ar-btn.full { display: block; width: 100%; text-align: center; }
.ar-btn.danger { border-color: var(--color-danger); color: var(--color-danger); }
.ar-btn.tiny { padding: 5px 9px; font-size: 11px; }

.ar-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ar-photo-cell { position: relative; }
.ar-photo-cell img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
/* Sprint 14b: 폰 폭에서 사진 3단은 좁음 → 2단 응축 + 폼 입력 터치 44px */
@media (max-width: 768px) {
  .ar-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .ar-photo-cell img { height: 110px; }
  .ar-input { min-height: 44px; }
  textarea.ar-input { min-height: 88px; }
  .ar-btn { min-height: 44px; }
  .ar-btn.tiny { min-height: 32px; }
}
.ar-photo-cell .meta { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.ar-photo-cell .delform { position: absolute; top: 4px; right: 4px; }

.ar-part-row { padding: 10px 0; border-top: 1px solid var(--color-border); }
.ar-part-row:first-child { border-top: none; }
.ar-part-row .name { font-weight: 700; color: var(--color-text); font-size: 13px; }
.ar-part-row .meta { color: var(--color-text-muted); font-size: 12px; margin-top: 2px; }
.ar-part-row .grid { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 6px; margin-top: 6px; }

.ar-totals { background: var(--color-bg); border-radius: 8px; padding: 12px; margin-top: 10px; }
.ar-totals .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.ar-totals .row .k { color: var(--color-text-muted); }
.ar-totals .row .v { font-weight: 700; }
.ar-totals .row.total .v { font-size: 15px; color: var(--color-gold-dark); }

.ar-radio-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ar-radio-row label { padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 12px; cursor: pointer; }
.ar-radio-row input[type=radio] { margin-right: 5px; }

.ar-empty { text-align: center; color: var(--color-text-muted); padding: 14px 0; font-size: 13px; }
.ar-hint { color: var(--color-text-muted); font-size: 12px; margin-top: 4px; }

/* maintenance/admin_service_list.html : 관리자 A/S 목록 */
.asl-wrap { max-width: 1100px; margin: 0 auto; }
.asl-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.asl-stat { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; }
.asl-stat .label { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .8px; }
.asl-stat .value { font-size: 24px; font-weight: 700; color: var(--color-text); margin-top: 6px; }
.asl-stat .sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
@media (max-width: 700px) { .asl-summary { grid-template-columns: 1fr; } }

.asl-card { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.asl-h2 { font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .8px; margin: 0 0 12px; }
.asl-count { display: inline-block; background: var(--color-dark); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 9px; margin-left: 6px; }

.asl-item { padding: 13px 0; border-top: 1px solid var(--color-border); }
.asl-item:first-child { border-top: none; padding-top: 0; }
.asl-item .biz { font-weight: 700; color: var(--color-text); font-size: 14px; }
.asl-item .symptom { color: var(--color-text); font-size: 13px; margin-top: 5px; line-height: 1.4; }
.asl-item .meta { color: var(--color-text-muted); font-size: 12px; margin-top: 5px; }
.asl-item .memo { background: var(--color-warning-bg); padding: 6px 8px; border-radius: 4px; font-size: 12px; color: var(--color-text); margin-top: 6px; }

.asl-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.asl-pill.requested { background: var(--color-warning-bg); color: var(--color-warning); }
.asl-pill.scheduled { background: var(--color-info-bg); color: var(--color-info); }
.asl-pill.completed { background: var(--color-success-bg); color: var(--color-success); }
.asl-pill.cancelled { background: var(--color-danger-bg); color: var(--color-danger); }
.asl-pill.app { background: var(--color-info-bg); color: var(--color-info); }
.asl-pill.staff { background: var(--color-purple-bg); color: var(--color-purple); }

.asl-field-label { display: block; font-size: 12px; color: var(--color-text-muted); margin: 10px 0 4px; font-weight: 600; }
.asl-input, .asl-input select, .asl-input textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 13px; box-sizing: border-box; font-family: inherit; }
.asl-input textarea { resize: vertical; }

.asl-btn { display: inline-block; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--color-dark); background: #fff; color: var(--color-dark); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; font-family: inherit; }
.asl-btn.solid { background: var(--color-dark); color: #fff; }
.asl-btn.full { display: block; width: 100%; text-align: center; }
.asl-btn.danger { border-color: var(--color-danger); color: var(--color-danger); }

.asl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.asl-btn-row { display: flex; gap: 6px; margin-top: 8px; }
.asl-empty { text-align: center; color: var(--color-text-muted); padding: 20px 0; font-size: 13px; }
/* Sprint 14b: 폰 폭에서 date+select 2단은 좁음 → 단단 응축 + 폼 입력 터치 44px */
@media (max-width: 768px) {
  .asl-input { min-height: 44px; }
  .asl-btn { min-height: 44px; }
}
@media (max-width: 480px) {
  .asl-grid2 { grid-template-columns: 1fr; }
}

/* maintenance/admin_service_report.html : 관리자 A/S 리포트 */
.asr-wrap { max-width: 1100px; margin: 0 auto; }
.asr-top { margin-bottom: 16px; }
.asr-back { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gold-dark); font-size: 13px; font-weight: 600; text-decoration: none; }

.asr-hero {
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  border-radius: 12px; padding: 18px 22px; color: #fff; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.asr-hero::after { content: ''; position: absolute; right: -16px; top: -16px; width: 120px; height: 120px; border-radius: 50%; background: rgba(229,62,62,.08); }
.asr-hero .biz { font-size: 20px; font-weight: 700; position: relative; z-index: 1; }
.asr-hero .meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; position: relative; z-index: 1; }
.asr-hero .meta .k { font-size: 11px; color: rgba(255,255,255,.55); }
.asr-hero .meta .v { font-size: 13px; font-weight: 700; color: #fff; margin-top: 2px; }
.asr-hero .symptom { background: rgba(255,255,255,.08); border-radius: 8px; padding: 10px 12px; margin-top: 12px; font-size: 13px; line-height: 1.5; position: relative; z-index: 1; white-space: pre-wrap; }
.asr-hero .actions { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; gap: 8px; }

.asr-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 900px) { .asr-grid { grid-template-columns: 1fr; } }

.asr-card { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.asr-card.dim { opacity: .85; background: var(--color-bg); }
.asr-h2 { font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .8px; margin: 0 0 12px; }

.asr-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.asr-pill.draft     { background: var(--color-warning-bg); color: var(--color-warning); }
.asr-pill.submitted { background: var(--color-success-bg); color: var(--color-success); }
.asr-pill.unpaid    { background: var(--color-danger-bg); color: var(--color-danger); }
.asr-pill.paid      { background: var(--color-success-bg); color: var(--color-success); }
.asr-pill.contract  { background: var(--color-info-bg); color: var(--color-info); }
.asr-pill.noncontract { background: var(--color-purple-bg); color: var(--color-purple); }

.asr-field-label { display: block; font-size: 12px; color: var(--color-text-muted); margin: 10px 0 4px; font-weight: 600; }
.asr-input, .asr-input select, .asr-input textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 13px; box-sizing: border-box; font-family: inherit; }
textarea.asr-input { resize: vertical; }

.asr-btn { display: inline-block; padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--color-dark); background: #fff; color: var(--color-dark); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; font-family: inherit; }
.asr-btn.solid { background: var(--color-dark); color: #fff; }
.asr-btn.full { display: block; width: 100%; text-align: center; }
.asr-btn.danger { border-color: var(--color-danger); color: var(--color-danger); }
.asr-btn.tiny { padding: 5px 9px; font-size: 11px; }

.asr-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.asr-photo-cell { position: relative; }
.asr-photo-cell img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
/* Sprint 14b: 폰 폭에서 사진 3단은 좁음 → 2단 응축 + 폼 입력 터치 44px */
@media (max-width: 768px) {
  .asr-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .asr-photo-cell img { height: 110px; }
  .asr-input { min-height: 44px; }
  textarea.asr-input { min-height: 88px; }
  .asr-btn { min-height: 44px; }
  .asr-btn.tiny { min-height: 32px; }
}
.asr-photo-cell .meta { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.asr-photo-cell .delform { position: absolute; top: 4px; right: 4px; }

.asr-part-row { padding: 10px 0; border-top: 1px solid var(--color-border); }
.asr-part-row:first-child { border-top: none; }
.asr-part-row .name { font-weight: 700; color: var(--color-text); font-size: 13px; }
.asr-part-row .meta { color: var(--color-text-muted); font-size: 12px; margin-top: 2px; }
.asr-part-row .grid { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 6px; margin-top: 6px; }

.asr-totals { background: var(--color-bg); border-radius: 8px; padding: 12px; margin-top: 10px; }
.asr-totals .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.asr-totals .row .k { color: var(--color-text-muted); }
.asr-totals .row .v { font-weight: 700; }
.asr-totals .row.total .v { font-size: 15px; color: var(--color-gold-dark); }

.asr-radio-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.asr-radio-row label { padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 12px; cursor: pointer; }
.asr-radio-row input[type=radio] { margin-right: 5px; }

.asr-empty { text-align: center; color: var(--color-text-muted); padding: 14px 0; font-size: 13px; }
.asr-hint { color: var(--color-text-muted); font-size: 12px; margin-top: 4px; }

/* maintenance/admin_timeline.html : 거래처 타임라인 */
.atl-wrap { max-width: 1100px; margin: 0 auto; }

.atl-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.atl-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none;
}

.atl-biz {
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  border-radius: 12px; padding: 18px 22px; color: #fff; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.atl-biz::after {
  content: ''; position: absolute; right: -16px; top: -16px;
  width: 120px; height: 120px; border-radius: 50%; background: rgba(201,168,76,.08);
}
.atl-biz .name { font-size: 20px; font-weight: 700; position: relative; z-index: 1; }
.atl-biz .sub  { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 6px; position: relative; z-index: 1; }

.atl-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.atl-tabs a {
  padding: 10px 18px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--color-text-muted);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.atl-tabs a.active {
  color: var(--color-gold-dark); border-bottom-color: var(--color-gold);
}
.atl-tabs .count {
  display: inline-block; background: var(--color-bg); color: var(--color-text-muted);
  font-size: 11px; padding: 1px 8px; border-radius: 9px; margin-left: 4px;
}
.atl-tabs a.active .count { background: var(--color-gold); color: #fff; }

.atl-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
}
.atl-h2 {
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 12px;
}

.atl-item { padding: 13px 0; border-top: 1px solid var(--color-border); }
.atl-item:first-child { border-top: none; padding-top: 0; }
.atl-item a { color: inherit; text-decoration: none; display: block; }
.atl-item .top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.atl-item .title { font-weight: 700; color: var(--color-text); font-size: 14px; }
.atl-item .body { color: var(--color-text); font-size: 13px; margin-top: 4px; }
.atl-item .meta { color: var(--color-text-muted); font-size: 12px; margin-top: 4px; }
.atl-item .small { color: var(--color-text-muted); font-size: 11px; margin-top: 4px; }

.atl-pill {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
.atl-pill.pending  { background: var(--color-warning-bg); color: var(--color-warning); }
.atl-pill.confirmed{ background: var(--color-info-bg); color: var(--color-info); }
.atl-pill.preparing{ background: var(--color-purple-bg); color: var(--color-purple); }
.atl-pill.shipped  { background: var(--color-info-bg); color: var(--color-info); }
.atl-pill.completed{ background: var(--color-success-bg); color: var(--color-success); }
.atl-pill.cancelled{ background: var(--color-danger-bg); color: var(--color-danger); }
.atl-pill.active   { background: var(--color-success-bg); color: var(--color-success); }
.atl-pill.paused   { background: var(--color-warning-bg); color: var(--color-warning); }
.atl-pill.cancel_requested { background: var(--color-purple-bg); color: var(--color-purple); }
.atl-pill.due      { background: var(--color-warning-bg); color: var(--color-warning); }
.atl-pill.scheduled{ background: var(--color-info-bg); color: var(--color-info); }
.atl-pill.requested{ background: var(--color-warning-bg); color: var(--color-warning); }
.atl-pill.submitted{ background: var(--color-success-bg); color: var(--color-success); }
.atl-pill.draft    { background: var(--color-warning-bg); color: var(--color-warning); }
.atl-pill.unpaid   { background: var(--color-danger-bg); color: var(--color-danger); }
.atl-pill.paid     { background: var(--color-success-bg); color: var(--color-success); }
.atl-pill.sub      { background: var(--color-info-bg); color: var(--color-info); }
.atl-pill.contract { background: var(--color-info-bg); color: var(--color-info); }
.atl-pill.noncontract { background: var(--color-purple-bg); color: var(--color-purple); }

.atl-empty {
  text-align: center; color: var(--color-text-muted); padding: 32px 0; font-size: 13px;
}

.atl-contract-summary {
  background: var(--color-warning-bg); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px;
  font-size: 13px; color: #5d4037;
}

/* dashboard/dashboard.html : 통계 대시보드 (Sprint 13 톤) */
.gb-dash { max-width: 1100px; margin: 0 auto; color: var(--color-text); }
.gb-dash__title {
  font-size: 18px; font-weight: 700; color: var(--color-text);
  margin: 0 0 4px;
}
.gb-dash__sub {
  color: var(--color-text-muted); font-size: 13px; margin: 0 0 16px;
}

/* 매출 합산 히어로 (다크) */
.gb-hero {
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  border-radius: 12px; padding: 22px 26px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
}
.gb-hero__main { color: #fff; }
.gb-hero__label {
  font-size: 11px; color: rgba(255,255,255,.5);
  letter-spacing: 1px; margin-bottom: 6px;
}
.gb-hero__value {
  font-size: 32px; font-weight: 700; color: #fff;
}
.gb-hero__value .unit {
  font-size: 16px; font-weight: 400; color: rgba(255,255,255,.6); margin-left: 2px;
}
.gb-hero__breakdown { display: flex; gap: 12px; flex-wrap: wrap; }
.gb-hero__pill {
  background: rgba(255,255,255,.08); border-radius: 10px;
  padding: 12px 16px; min-width: 120px; text-align: center;
}
.gb-hero__pill-label {
  font-size: 10px; color: rgba(255,255,255,.5); margin-bottom: 4px;
}
.gb-hero__pill-value {
  font-size: 16px; font-weight: 700; color: var(--color-gold-light);
}

/* 무결성 경고 박스 */
.gb-warning {
  background: var(--color-warning-bg); border: 1px solid var(--color-warning);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
  color: #5a4039; font-size: 13px; line-height: 1.6;
}
.gb-warning strong { color: #b16100; }
.gb-warning a { color: var(--color-gold-dark); font-weight: 600; }

/* 요약 카드 grid */
.gb-card-grid {
  display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 18px;
}
@media (min-width: 720px) {
  .gb-card-grid { grid-template-columns: repeat(4, 1fr); }
}
.gb-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 10px;
  padding: 14px 16px; display: block; text-decoration: none; color: inherit;
}
.gb-card--clickable:hover { border-color: var(--color-gold); background: #faf6f3; }
.gb-card__label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.gb-card__value { font-size: 22px; font-weight: 700; color: var(--color-text); }
.gb-card__sub { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

/* 섹션 */
.gb-section { margin-top: 20px; }
.gb-section__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.gb-section__head h2 {
  font-size: 14px; color: var(--color-text); margin: 0; font-weight: 700;
}
.gb-section__period { font-size: 12px; }
.gb-section__period a {
  margin-left: 6px; padding: 4px 10px;
  border: 1px solid var(--color-border); border-radius: 6px;
  text-decoration: none; color: var(--color-text); background: #fff;
  font-weight: 600;
}
.gb-section__period a.is-active {
  background: var(--color-dark); color: #fff; border-color: var(--color-dark);
}

/* 표 */
.gb-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden;
  font-size: 13px;
}
.gb-table th, .gb-table td { padding: 10px 12px; text-align: left; }
.gb-table th {
  background: #faf6f3; color: #5a4039; font-weight: 600;
  border-bottom: 1px solid var(--color-border); font-size: 12px;
}
.gb-table tr + tr td { border-top: 1px solid #f1ebe6; }
.gb-table td.is-num, .gb-table th.is-num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.gb-table tfoot td { background: #faf6f3; font-weight: 700; color: var(--color-text); }
.gb-table .is-empty { text-align: center; color: var(--color-text-muted); padding: 22px; }

/* === 20.4 점주 batch 5-a (Sprint 12) — products / orders / subscriptions === */

/* 공용: 점주 mobile 화면 inner 섹션 헤더 (products/list + orders/checkout) */
.app-inner-section { padding: 14px 14px 0; }
.app-inner-title {
  font-size: 11px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px;
}

/* 공용: cart/checkout 요약 행 */
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
}
.summary-row + .summary-row { border-top: 1px solid var(--color-border); }
.sr-label { font-size: 13px; color: var(--color-text-muted); }
.sr-value { font-size: 13px; font-weight: 600; color: var(--color-text); }
.sr-total .sr-label { font-size: 14px; font-weight: 700; color: var(--color-text); }
.sr-total .sr-value { font-size: 17px; font-weight: 700; color: var(--color-gold-dark); }

/* products/list.html : 상품 목록 (cat-* / product-* / stock-pill) */
.product-card {
  display: flex; padding: 13px 14px; gap: 11px; align-items: flex-start;
}
.product-card + .product-card { border-top: 1px solid var(--color-border); }
.product-thumb {
  width: 60px; height: 60px; border-radius: 11px;
  background: linear-gradient(135deg, #3D2B1F, #6B4226);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info  { flex: 1; min-width: 0; }
.product-name  { font-size: 14px; font-weight: 700; margin: 0 0 3px;
                 color: var(--color-text); text-decoration: none; }
.product-name a { color: inherit; text-decoration: none; }
.product-desc  { font-size: 11px; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 7px; }
.product-price { font-size: 15px; font-weight: 700; color: var(--color-gold-dark); }
.product-price span { font-size: 11px; color: var(--color-text-muted); font-weight: 400; }

.product-actions {
  padding: 0 14px 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.product-actions form {
  display: flex; align-items: center; gap: 6px; margin: 0; flex: 1;
}
.product-qty {
  width: 56px; padding: 8px; border: 1px solid var(--color-border); border-radius: 6px;
  text-align: center; font-size: 14px; font-family: inherit;
}

.stock-pill {
  display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 8px;
  margin-left: 6px; vertical-align: middle;
}
.stock-pill.in_stock    { background: var(--color-success-bg); color: var(--color-success); }
.stock-pill.low_stock   { background: var(--color-warning-bg); color: var(--color-warning); }
.stock-pill.out_of_stock{ background: var(--color-danger-bg);  color: var(--color-danger); }

.cat-head {
  padding: 14px 14px 6px;
  font-size: 13px; font-weight: 700; color: var(--color-text);
}

/* products/detail.html : 상품 상세 (.pd-*) */
.pd-container { padding: 14px 14px 100px; }
.pd-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none; margin-bottom: 10px;
}
.pd-thumb {
  width: 100%; aspect-ratio: 1; border-radius: 16px;
  background: linear-gradient(135deg, #3D2B1F, #6B4226);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 14px;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-title  { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.pd-meta   { font-size: 12px; color: var(--color-text-muted); margin-bottom: 12px; }
.pd-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.pd-price  { font-size: 22px; font-weight: 700; color: var(--color-gold-dark); }
.pd-unit   { font-size: 12px; color: var(--color-text-muted); }
.pd-stock-pill {
  display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 10px;
}
.pd-stock-pill.in_stock    { background: var(--color-success-bg); color: var(--color-success); }
.pd-stock-pill.low_stock   { background: var(--color-warning-bg); color: var(--color-warning); }
.pd-stock-pill.out_of_stock{ background: var(--color-danger-bg);  color: var(--color-danger); }
.pd-desc   { font-size: 13px; color: var(--color-text); line-height: 1.7;
             white-space: pre-wrap; padding: 12px 14px;
             background: var(--color-bg); border-radius: 10px; margin-bottom: 16px; }

.pd-fixed-bar {
  position: fixed; left: 0; right: 0; bottom: var(--mobile-tabbar-h, 64px);
  background: #fff; border-top: 1px solid var(--color-border);
  padding: 10px 14px; display: flex; gap: 8px; align-items: center;
  z-index: 40;
  box-sizing: border-box;
}
.pd-fixed-bar form {
  display: flex; gap: 8px; width: 100%; margin: 0; align-items: center;
}
.pd-qty {
  width: 70px; padding: 11px; border: 1px solid var(--color-border); border-radius: 8px;
  text-align: center; font-size: 15px; font-family: inherit;
}
.pd-add { flex: 1; }
/* Sprint 14b: 큰 화면에서 _mobile_layout shell (max-width:480 가운데) 안쪽 가운데 정렬 */
@media (min-width: 768px) {
  .pd-fixed-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 480px;
    width: 100%;
  }
}

/* orders/list.html : 주문 내역 목록 (.ol-* + .pager) */
.ol-container { padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 10px; }
.ol-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px;
}
.ol-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.ol-num   { font-size: 13px; font-weight: 700; }
.ol-num a { color: var(--color-text); text-decoration: none; }
.ol-date  { font-size: 11px; color: var(--color-text-muted); }
.ol-body  { color: var(--color-text); font-size: 13px; margin-bottom: 8px; }
.ol-foot  { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ol-total { font-size: 14px; font-weight: 700; color: var(--color-gold-dark); margin-left: 8px; }

.ol-pill {
  display: inline-block; padding: 3px 9px; border-radius: 11px; font-size: 11px;
}
.ol-pill.pending   { background: var(--color-warning-bg); color: var(--color-warning); }
.ol-pill.confirmed { background: var(--color-info-bg);    color: var(--color-info); }
.ol-pill.preparing { background: var(--color-purple-bg);  color: var(--color-purple); }
.ol-pill.shipped   { background: var(--color-success-bg); color: var(--color-success); }
.ol-pill.completed { background: var(--color-success-bg); color: var(--color-success); }
.ol-pill.cancelled { background: var(--color-danger-bg);  color: var(--color-danger); }

.pager {
  display: flex; justify-content: center; gap: 10px; padding: 18px 0;
  font-size: 13px;
}
.pager a, .pager span { color: var(--color-text); text-decoration: none; padding: 4px 10px; }
.pager a { color: var(--color-gold-dark); font-weight: 700; }

/* orders/detail.html : 주문 상세 (.od-*) */
.od-container { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 12px; }
.od-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none; padding: 0 14px 4px;
}

.od-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px;
}
.od-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.od-h2 { font-size: 12px; font-weight: 700; color: var(--color-text-muted);
         text-transform: uppercase; letter-spacing: .8px; margin: 0 0 10px; }
.od-num { font-size: 17px; font-weight: 700; }
.od-meta { font-size: 12px; color: var(--color-text-muted); }

.od-pill {
  display: inline-block; padding: 4px 11px; border-radius: 12px; font-size: 12px; font-weight: 700;
}
.od-pill.pending   { background: var(--color-warning-bg); color: var(--color-warning); }
.od-pill.confirmed { background: var(--color-info-bg);    color: var(--color-info); }
.od-pill.preparing { background: var(--color-purple-bg);  color: var(--color-purple); }
.od-pill.shipped   { background: var(--color-success-bg); color: var(--color-success); }
.od-pill.completed { background: var(--color-success-bg); color: var(--color-success); }
.od-pill.cancelled { background: var(--color-danger-bg);  color: var(--color-danger); }

.od-item-row {
  display: flex; justify-content: space-between; padding: 10px 0;
  border-top: 1px solid var(--color-border);
}
.od-item-row:first-of-type { border-top: none; }
.od-item-name { font-size: 13px; font-weight: 700; margin: 0; }
.od-item-sub  { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.od-item-sum  { font-size: 14px; font-weight: 700; color: var(--color-gold-dark); align-self: center; }

.od-total {
  display: flex; justify-content: space-between; padding-top: 12px; margin-top: 8px;
  border-top: 2px solid var(--color-border); font-size: 15px; font-weight: 700; color: var(--color-text);
}
.od-total .total-amount { color: var(--color-gold-dark); font-size: 17px; }

.od-addr-line { font-size: 13px; color: var(--color-text); line-height: 1.6; }
.od-addr-line.muted { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.od-note { font-size: 13px; color: var(--color-text); white-space: pre-wrap; line-height: 1.6; }

.od-timeline { list-style: none; padding: 0; margin: 0; }
.od-timeline li {
  position: relative; padding: 0 0 14px 18px; border-left: 2px solid var(--color-border);
}
.od-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.od-timeline li::before {
  content: ''; position: absolute; left: -7px; top: 3px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--color-gold);
}
.od-tl-status { font-size: 13px; font-weight: 700; color: var(--color-text); }
.od-tl-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* orders/cart.html : 장바구니 (.cart-* / .ci-* / .checkout-fab) */
.cart-container { padding: 14px 14px 110px; display: flex; flex-direction: column; gap: 10px; }

.cart-item {
  background: var(--color-bg); border-radius: 12px; padding: 12px 13px;
  display: flex; gap: 10px; align-items: flex-start;
}
.cart-item .ci-thumb {
  width: 48px; height: 48px; border-radius: 10px;
  background: linear-gradient(135deg, #3D2B1F, #6B4226);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  overflow: hidden;
}
.cart-item .ci-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .ci-body { flex: 1; min-width: 0; }
.ci-name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.ci-name a { color: inherit; text-decoration: none; }
.ci-unit { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.ci-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; gap: 8px;
}
.ci-qty-form { display: flex; align-items: center; gap: 4px; margin: 0; }
.ci-qty-input {
  width: 50px; padding: 6px; border: 1px solid var(--color-border); border-radius: 6px;
  text-align: center; font-size: 13px; font-family: inherit;
}
.ci-price { font-size: 14px; font-weight: 700; color: var(--color-text); }
.ci-del {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  padding: 4px; display: flex; align-items: center;
}
.ci-del:hover { color: var(--color-danger); }

.cart-summary { margin: 0 14px; }

.checkout-fab {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--mobile-tabbar-h, 64px) + 12px);
  max-width: 448px; width: calc(100% - 32px); z-index: 40;
}
.checkout-fab .btn { width: 100%; box-shadow: 0 4px 14px rgba(0,0,0,.15); }

/* orders/checkout.html : 주문 확인/결제 (order-* / addr-* / new-addr-* / pay-* / submit-*) */
.order-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
}
.order-row + .order-row { border-top: 1px solid var(--color-border); }
.order-thumb {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, #3D2B1F, #6B4226);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.order-info   { flex: 1; min-width: 0; }
.order-name   { font-size: 13px; font-weight: 700; }
.order-detail { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.order-right  { text-align: right; flex-shrink: 0; }
.order-price  { font-size: 14px; font-weight: 700; }

.addr-card {
  margin: 0 14px;
}
.addr-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border); border-radius: 10px;
  background: #fff; margin-bottom: 8px; cursor: pointer;
}
.addr-option:has(input[type=radio]:checked) {
  border-color: var(--color-gold); background: var(--color-gold-bg);
}
.addr-option input[type=radio] { margin-top: 3px; accent-color: var(--color-gold); }
.addr-option label { flex: 1; cursor: pointer; }
.addr-label-row { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.addr-line { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }

.new-addr-toggle {
  background: #fff; border: 1px solid var(--color-border); border-radius: 10px;
  margin: 0 14px;
}
.new-addr-toggle summary {
  padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 700;
  color: var(--color-gold-dark); list-style: none; display: flex; justify-content: space-between;
}
.new-addr-toggle summary::-webkit-details-marker { display: none; }
.new-addr-toggle summary::after { content: '+'; font-size: 17px; line-height: 1; }
.new-addr-toggle[open] summary::after { content: '−'; }
.new-addr-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.new-addr-body label { display: block; font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; }
.new-addr-body input,
.new-addr-body textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: 6px;
  font-size: 13px; box-sizing: border-box; font-family: inherit;
}
.new-addr-body input[type=checkbox] { width: auto; margin-right: 4px; }
.new-addr-body textarea { min-height: 60px; resize: vertical; }
.field-err { color: var(--color-danger); font-size: 11px; margin-top: 2px; }

.pay-option {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 10px;
  margin-bottom: 8px;
}
.pay-option.selected { border-color: var(--color-gold); background: var(--color-gold-bg); }
.pay-option.disabled { opacity: .55; cursor: not-allowed; }
.pay-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pay-option.selected .pay-radio { border-color: var(--color-gold); background: var(--color-gold); }
.pay-option.selected .pay-radio::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.pay-label { font-size: 13px; font-weight: 700; }
.pay-sub   { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }

.submit-zone {
  padding: 12px 14px 32px;
}
.submit-help {
  font-size: 11px; color: var(--color-text-muted);
  text-align: center; margin-top: 8px;
}

/* subscriptions/list.html : 정기배송 목록 (.sl-*) */
.sl-container { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 12px; }

.sl-apply-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 13px;
  background: var(--color-dark); color: var(--color-gold);
  border-radius: 12px; text-decoration: none; font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.sl-card {
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  border-radius: 16px; padding: 18px;
  position: relative; overflow: hidden;
  color: #fff;
}
.sl-card::after {
  content: ''; position: absolute; right: -10px; top: -10px;
  width: 90px; height: 90px; border-radius: 50%; background: rgba(201,168,76,.08);
}
.sl-card.dim { opacity: .55; }
.sl-card .sl-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px; position: relative; z-index: 1;
}
.sl-prod-name {
  font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 3px;
}
.sl-prod-sub {
  font-size: 11px; color: rgba(255,255,255,.55);
}

.sl-pill {
  display: inline-block; padding: 4px 11px; border-radius: 12px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.16); color: #fff;
}
.sl-pill.active { background: rgba(56, 161, 105, .8); }
.sl-pill.pending { background: rgba(250, 204, 21, .8); color: #333; }
.sl-pill.paused { background: rgba(245, 158, 11, .8); }
.sl-pill.cancel_requested { background: rgba(124, 58, 237, .7); }
.sl-pill.cancelled { background: rgba(220, 38, 38, .7); }

.sl-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  position: relative; z-index: 1;
}
.sl-meta-box {
  background: rgba(255,255,255,.08); border-radius: 8px; padding: 9px;
}
.sl-meta-label {
  font-size: 9px; color: var(--color-gold-light); margin-bottom: 2px;
  text-transform: uppercase; letter-spacing: .5px;
}
.sl-meta-value { font-size: 12px; font-weight: 700; color: #fff; }

.sl-card-foot {
  margin-top: 12px; display: flex; gap: 8px; position: relative; z-index: 1;
}
.sl-card-foot a, .sl-card-foot button {
  flex: 1; padding: 9px; border-radius: 8px; font-size: 12px; font-weight: 700;
  cursor: pointer; text-align: center; text-decoration: none; border: none;
  background: rgba(255,255,255,.15); color: #fff; font-family: inherit;
}
.sl-card-foot a:hover, .sl-card-foot button:hover { background: rgba(255,255,255,.25); }
.sl-card-foot .danger { background: rgba(220, 38, 38, .55); }
.sl-card-foot form { flex: 1; margin: 0; }
.sl-card-foot form button { width: 100%; }

.sl-status-info {
  margin-top: 10px; padding: 8px 10px;
  background: rgba(255,255,255,.08); border-radius: 8px;
  font-size: 11px; color: rgba(255,255,255,.75); position: relative; z-index: 1;
}

/* subscriptions/detail.html : 정기배송 상세 (.sd-*) */
.sd-container { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 12px; }
.sd-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none;
}

.sd-hero {
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  border-radius: 16px; padding: 18px;
  position: relative; overflow: hidden; color: #fff;
}
.sd-hero::after {
  content: ''; position: absolute; right: -10px; top: -10px;
  width: 90px; height: 90px; border-radius: 50%; background: rgba(201,168,76,.08);
}
.sd-hero-label {
  font-size: 10px; color: var(--color-gold-light); letter-spacing: 1px;
  margin-bottom: 3px; position: relative; z-index: 1;
}
.sd-hero-title {
  font-size: 18px; font-weight: 700; margin: 0 0 3px;
  position: relative; z-index: 1;
}
.sd-hero-sub {
  font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 14px;
  position: relative; z-index: 1;
}
.sd-hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  position: relative; z-index: 1;
}
.sd-hero-box {
  background: rgba(255,255,255,.08); border-radius: 8px; padding: 9px;
}
.sd-hero-box-label {
  font-size: 9px; color: var(--color-gold-light); margin-bottom: 2px;
  text-transform: uppercase; letter-spacing: .5px;
}
.sd-hero-box-value { font-size: 12px; font-weight: 700; color: #fff; }
.sd-hero-box-value.active { color: #38A169; }
.sd-hero-box-value.danger { color: #FCA5A5; }

.sd-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px;
}
.sd-h2 {
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 10px;
}
.sd-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  font-size: 13px;
}
.sd-row .k { color: var(--color-text-muted); }
.sd-row .v { font-weight: 600; color: var(--color-text); }

.sd-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sd-actions form { margin: 0; }
.sd-actions .btn { width: 100%; }
.sd-info {
  background: var(--color-bg); border-radius: 8px; padding: 10px 12px;
  font-size: 12px; color: var(--color-text-muted);
}

.sd-timeline { list-style: none; padding: 0; margin: 0; }
.sd-timeline li {
  position: relative; padding: 0 0 14px 18px; border-left: 2px solid var(--color-border);
}
.sd-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.sd-timeline li::before {
  content: ''; position: absolute; left: -7px; top: 3px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--color-gold);
}
.sd-tl-status { font-size: 13px; font-weight: 700; color: var(--color-text); }
.sd-tl-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.sd-order-row {
  display: flex; justify-content: space-between; padding: 10px 0;
  border-top: 1px solid var(--color-border); font-size: 13px;
}
.sd-order-row:first-of-type { border-top: none; padding-top: 0; }
.sd-order-num a { color: var(--color-gold-dark); text-decoration: none; font-weight: 700; }
.sd-order-status {
  display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 8px;
  background: var(--color-bg); color: var(--color-text-muted); margin-left: 4px;
}
.sd-order-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.sd-order-price { font-size: 14px; font-weight: 700; color: var(--color-gold-dark); align-self: center; }

/* subscriptions/apply.html : 정기배송 신청 (.sa-*) */
.sa-container { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 12px; }
.sa-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.sa-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px;
}
.sa-card-title {
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 10px;
}
.sa-field { margin-bottom: 10px; }
.sa-field:last-child { margin-bottom: 0; }
.sa-field label {
  display: block; font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  margin-bottom: 4px;
}
.sa-field input, .sa-field select, .sa-field textarea {
  width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px;
  font-size: 14px; font-family: inherit; box-sizing: border-box;
  background: #fff;
}
.sa-field textarea { min-height: 70px; resize: vertical; }
.sa-errlist { color: var(--color-danger); font-size: 11px; margin: 4px 0 0; padding-left: 16px; }

.sa-addr-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 10px;
  margin-bottom: 8px; background: #fff;
}
.sa-addr-option:has(input[type=radio]:checked) {
  border-color: var(--color-gold); background: var(--color-gold-bg);
}
.sa-addr-option input[type=radio] { margin-top: 3px; accent-color: var(--color-gold); }
.sa-addr-option label { flex: 1; cursor: pointer; }
.sa-addr-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.sa-addr-line { font-size: 12px; color: var(--color-text-muted); }

.sa-newaddr summary {
  list-style: none; cursor: pointer; font-size: 13px; font-weight: 700;
  color: var(--color-gold-dark); padding: 4px 0; display: flex; justify-content: space-between;
}
.sa-newaddr summary::-webkit-details-marker { display: none; }
.sa-newaddr summary::after { content: '+'; font-size: 17px; line-height: 1; }
.sa-newaddr[open] summary::after { content: '−'; }
.sa-newaddr .body { padding: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sa-hint { font-size: 11px; color: var(--color-text-muted); margin: 0; }

/* === 20.5 점주 batch 5-b (Sprint 12) — maintenance/customer 5종 + businesses 2종 === */

/* maintenance/customer.html : 점검 메인 (.mc-*) */
.mc-container { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 12px; }

.mc-quick-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mc-quick-link {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; border-radius: 12px;
  background: #fff; border: 1px solid var(--color-border);
  text-decoration: none; color: var(--color-text);
  font-size: 13px; font-weight: 700;
}
.mc-quick-link.solid {
  background: var(--color-dark); color: var(--color-gold);
  border-color: var(--color-dark);
}

.mc-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px;
}
.mc-card.dim { opacity: .55; }

.mc-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.mc-card-title { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0; }

.mc-row {
  display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px;
}
.mc-row .k { color: var(--color-text-muted); }
.mc-row .v { font-weight: 600; color: var(--color-text); text-align: right; }

.mc-pill {
  display: inline-block; padding: 3px 10px; border-radius: 11px; font-size: 11px; font-weight: 700;
}
.mc-pill.pending { background: var(--color-warning-bg); color: var(--color-warning); }
.mc-pill.active { background: var(--color-success-bg); color: var(--color-success); }
.mc-pill.paused { background: var(--color-warning-bg); color: var(--color-warning); }
.mc-pill.cancel_requested { background: var(--color-purple-bg); color: var(--color-purple); }
.mc-pill.cancelled { background: var(--color-danger-bg); color: var(--color-danger); }
.mc-pill.due { background: var(--color-warning-bg); color: var(--color-warning); }
.mc-pill.scheduled { background: var(--color-info-bg); color: var(--color-info); }
.mc-pill.completed { background: var(--color-success-bg); color: var(--color-success); }

.mc-machine {
  padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 13px;
}
.mc-machine:first-child { border-top: none; padding-top: 0; }
.mc-machine .name { font-weight: 700; }
.mc-machine .sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.mc-sched {
  padding: 12px 0; border-top: 1px solid var(--color-border);
}
.mc-sched:first-child { border-top: none; padding-top: 0; }
.mc-sched-top {
  display: flex; justify-content: space-between; align-items: center;
}
.mc-sched-date { font-size: 14px; font-weight: 700; color: var(--color-text); }
.mc-sched-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }
.mc-consumable {
  display: inline-block; background: var(--color-danger-bg); color: var(--color-danger);
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; margin-left: 6px;
}

.mc-info {
  color: var(--color-text-muted); font-size: 12px; margin-top: 10px;
}
.mc-empty {
  text-align: center; color: var(--color-text-muted); padding: 16px 0; font-size: 13px;
}

/* maintenance/customer_report_detail.html : 점검 리포트 상세 (.rd-*) */
.rd-container { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 12px; }
.rd-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none;
}

.rd-hero {
  background: linear-gradient(135deg, var(--color-dark), var(--color-dark-2));
  border-radius: 12px; padding: 18px 14px;
  color: #fff;
}
.rd-hero-label { font-size: 10px; color: var(--color-gold-light); letter-spacing: 1px; margin-bottom: 3px; }
.rd-hero-title { font-size: 16px; font-weight: 700; margin: 0 0 7px; color: #fff; }
.rd-hero-meta {
  display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px;
  color: rgba(255,255,255,.6);
}
.rd-hero-meta strong { color: var(--color-gold-light); font-weight: 700; }

.rd-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px;
}
.rd-h2 {
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 10px;
}
.rd-row {
  display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px;
}
.rd-row .k { color: var(--color-text-muted); }
.rd-row .v { font-weight: 600; color: var(--color-text); text-align: right; }

.rd-pill {
  display: inline-block; padding: 3px 10px; border-radius: 11px;
  font-size: 11px; font-weight: 700;
}
.rd-pill.submitted { background: var(--color-success-bg); color: var(--color-success); }
.rd-pill.draft { background: var(--color-warning-bg); color: var(--color-warning); }
.rd-pill.unpaid { background: var(--color-danger-bg); color: var(--color-danger); }
.rd-pill.paid { background: var(--color-success-bg); color: var(--color-success); }
.rd-pill.contract { background: var(--color-info-bg); color: var(--color-info); }
.rd-pill.noncontract { background: var(--color-purple-bg); color: var(--color-purple); }

.rd-check {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px;
}
.rd-check .icon-ok {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-success-bg); color: var(--color-success);
  display: inline-flex; align-items: center; justify-content: center;
}
.rd-check .icon-no {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-bg); color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.rd-check .label { color: var(--color-text); }
.rd-check.disabled .label { color: var(--color-text-muted); }

.rd-section-label { font-size: 11px; color: var(--color-text-muted); margin: 10px 0 4px; }
.rd-note {
  background: var(--color-bg); padding: 10px 12px; border-radius: 8px;
  font-size: 13px; white-space: pre-wrap; line-height: 1.5;
}

.rd-photo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.rd-photo-cell img {
  width: 100%; height: 130px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--color-border);
}
.rd-photo-cell .meta { font-size: 10px; color: var(--color-text-muted); margin-top: 3px; }

.rd-part {
  padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 13px;
}
.rd-part:first-child { border-top: none; padding-top: 0; }
.rd-part .name { font-weight: 700; }
.rd-part .meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

.rd-totals {
  background: var(--color-bg); border-radius: 8px; padding: 10px 12px;
  margin-top: 10px;
}
.rd-totals .rd-row.total .v {
  font-size: 16px; color: var(--color-gold-dark);
}

.rd-empty {
  text-align: center; color: var(--color-text-muted); padding: 14px 0; font-size: 12px;
}

/* maintenance/customer_service_list.html : 점주 A/S 목록 (.csl-*) */
.csl-container { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 12px; }
.csl-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none;
}

.csl-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px;
}
.csl-h2 {
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 10px;
}
.csl-help { font-size: 12px; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 12px; }

.csl-field { margin-bottom: 10px; }
.csl-field label {
  display: block; font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  margin-bottom: 4px;
}
.csl-field select, .csl-field textarea, .csl-field input {
  width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px;
  font-size: 14px; font-family: inherit; box-sizing: border-box; background: #fff;
}
.csl-field textarea { min-height: 100px; resize: vertical; }

.csl-item {
  padding: 12px 0; border-top: 1px solid var(--color-border);
  text-decoration: none; color: inherit; display: block;
}
.csl-item:first-child { border-top: none; padding-top: 0; }
.csl-item .top {
  display: flex; justify-content: space-between; align-items: center;
}
.csl-item .label-no { font-size: 14px; font-weight: 700; color: var(--color-text); }
.csl-item .symptom {
  font-size: 13px; color: var(--color-text); margin-top: 5px; line-height: 1.5;
}
.csl-item .meta {
  font-size: 11px; color: var(--color-text-muted); margin-top: 4px;
}

.csl-pill {
  display: inline-block; padding: 3px 10px; border-radius: 11px;
  font-size: 11px; font-weight: 700;
}
.csl-pill.requested { background: var(--color-warning-bg); color: var(--color-warning); }
.csl-pill.scheduled { background: var(--color-info-bg); color: var(--color-info); }
.csl-pill.completed { background: var(--color-success-bg); color: var(--color-success); }
.csl-pill.cancelled { background: var(--color-danger-bg); color: var(--color-danger); }
.csl-pill.draft { background: var(--color-warning-bg); color: var(--color-warning); }
.csl-pill.submitted { background: var(--color-success-bg); color: var(--color-success); }
.csl-pill.unpaid { background: var(--color-danger-bg); color: var(--color-danger); }
.csl-pill.paid { background: var(--color-success-bg); color: var(--color-success); }

.csl-empty {
  text-align: center; color: var(--color-text-muted); padding: 18px 0; font-size: 13px;
}

/* maintenance/customer_service_detail.html : 점주 A/S 상세 (.csd-*) */
.csd-container { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 12px; }
.csd-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none;
}

.csd-hero {
  background: linear-gradient(135deg, var(--color-dark), var(--color-dark-2));
  border-radius: 12px; padding: 18px 14px; color: #fff;
}
.csd-hero-label { font-size: 10px; color: var(--color-gold-light); letter-spacing: 1px; margin-bottom: 3px; }
.csd-hero-title { font-size: 16px; font-weight: 700; margin: 0 0 7px; color: #fff; }
.csd-hero-meta {
  display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px;
  color: rgba(255,255,255,.6);
}

.csd-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px;
}
.csd-h2 {
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 10px;
}
.csd-row {
  display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px;
}
.csd-row .k { color: var(--color-text-muted); }
.csd-row .v { font-weight: 600; color: var(--color-text); text-align: right; }

.csd-pill {
  display: inline-block; padding: 3px 10px; border-radius: 11px;
  font-size: 11px; font-weight: 700;
}
.csd-pill.requested { background: var(--color-warning-bg); color: var(--color-warning); }
.csd-pill.scheduled { background: var(--color-info-bg); color: var(--color-info); }
.csd-pill.completed { background: var(--color-success-bg); color: var(--color-success); }
.csd-pill.cancelled { background: var(--color-danger-bg); color: var(--color-danger); }
.csd-pill.draft { background: var(--color-warning-bg); color: var(--color-warning); }
.csd-pill.submitted { background: var(--color-success-bg); color: var(--color-success); }
.csd-pill.unpaid { background: var(--color-danger-bg); color: var(--color-danger); }
.csd-pill.paid { background: var(--color-success-bg); color: var(--color-success); }
.csd-pill.contract { background: var(--color-info-bg); color: var(--color-info); }
.csd-pill.noncontract { background: var(--color-purple-bg); color: var(--color-purple); }

.csd-section-label { font-size: 11px; color: var(--color-text-muted); margin: 10px 0 4px; }
.csd-note {
  background: var(--color-bg); padding: 10px 12px; border-radius: 8px;
  font-size: 13px; white-space: pre-wrap; line-height: 1.5;
}

.csd-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.csd-photo-cell img {
  width: 100%; height: 130px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--color-border);
}
.csd-photo-cell .meta { font-size: 10px; color: var(--color-text-muted); margin-top: 3px; }

.csd-part {
  padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 13px;
}
.csd-part:first-child { border-top: none; padding-top: 0; }
.csd-part .name { font-weight: 700; }
.csd-part .meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

.csd-totals {
  background: var(--color-bg); border-radius: 8px; padding: 10px 12px; margin-top: 10px;
}
.csd-totals .csd-row.total .v {
  font-size: 16px; color: var(--color-gold-dark);
}

/* maintenance/customer_timeline.html : 매장 통합 타임라인 (.tl-*) */
.tl-page {
  max-width: 480px; margin: 0 auto; padding: 14px 14px 32px;
  font-family: system-ui, -apple-system, sans-serif;
}
.tl-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.tl-topbar h1 { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-text); }
.tl-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-gold-dark); font-size: 13px; font-weight: 600;
  text-decoration: none;
}

.tl-biz {
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  border-radius: 12px; padding: 14px;
  color: #fff; margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.tl-biz::after {
  content: ''; position: absolute; right: -10px; top: -10px;
  width: 80px; height: 80px; border-radius: 50%; background: rgba(201,168,76,.08);
}
.tl-biz .name { font-size: 16px; font-weight: 700; position: relative; z-index: 1; }
.tl-biz .sub  { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 4px; position: relative; z-index: 1; }

.tl-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.tl-tabs a {
  flex: 1; padding: 10px 6px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.tl-tabs a.active {
  color: var(--color-gold-dark); border-bottom-color: var(--color-gold);
}
.tl-tabs .count {
  display: inline-block; background: var(--color-bg); color: var(--color-text-muted);
  font-size: 10px; padding: 1px 7px; border-radius: 9px; margin-left: 3px;
}
.tl-tabs a.active .count { background: var(--color-gold); color: #fff; }

.tl-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.tl-h2 {
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 10px;
}

.tl-item { padding: 12px 0; border-top: 1px solid var(--color-border); }
.tl-item:first-child { border-top: none; padding-top: 0; }
.tl-item a { color: inherit; text-decoration: none; display: block; }
.tl-item .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tl-item .title { font-weight: 700; color: var(--color-text); font-size: 13px; }
.tl-item .body { color: var(--color-text); font-size: 12px; margin-top: 4px; }
.tl-item .meta { color: var(--color-text-muted); font-size: 11px; margin-top: 4px; }
.tl-item .small { color: var(--color-text-muted); font-size: 11px; margin-top: 3px; }

.tl-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700;
}
.tl-pill.pending  { background: var(--color-warning-bg); color: var(--color-warning); }
.tl-pill.confirmed{ background: var(--color-info-bg); color: var(--color-info); }
.tl-pill.preparing{ background: var(--color-purple-bg); color: var(--color-purple); }
.tl-pill.shipped  { background: var(--color-info-bg); color: var(--color-info); }
.tl-pill.completed{ background: var(--color-success-bg); color: var(--color-success); }
.tl-pill.cancelled{ background: var(--color-danger-bg); color: var(--color-danger); }
.tl-pill.active   { background: var(--color-success-bg); color: var(--color-success); }
.tl-pill.paused   { background: var(--color-warning-bg); color: var(--color-warning); }
.tl-pill.cancel_requested { background: var(--color-purple-bg); color: var(--color-purple); }
.tl-pill.due      { background: var(--color-warning-bg); color: var(--color-warning); }
.tl-pill.scheduled{ background: var(--color-info-bg); color: var(--color-info); }
.tl-pill.requested{ background: var(--color-warning-bg); color: var(--color-warning); }
.tl-pill.submitted{ background: var(--color-success-bg); color: var(--color-success); }
.tl-pill.draft    { background: var(--color-warning-bg); color: var(--color-warning); }
.tl-pill.unpaid   { background: var(--color-danger-bg); color: var(--color-danger); }
.tl-pill.paid     { background: var(--color-success-bg); color: var(--color-success); }
.tl-pill.sub      { background: var(--color-info-bg); color: var(--color-info); }
.tl-pill.contract { background: var(--color-info-bg); color: var(--color-info); }
.tl-pill.noncontract { background: var(--color-purple-bg); color: var(--color-purple); }

.tl-empty {
  text-align: center; color: var(--color-text-muted); padding: 24px 0; font-size: 13px;
}

.tl-contract-summary {
  background: var(--color-warning-bg); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 10px;
  font-size: 12px; color: #5d4037;
}

/* businesses/customer_home.html : 점주 홈 (.home-* / .hero-* / .quick-* / .qi-*) */
.home-hero {
  background: linear-gradient(160deg, var(--color-dark) 0%, var(--color-dark-2) 60%, #3A2E1A 100%);
  padding: 18px 16px 20px; position: relative; overflow: hidden;
}
.home-hero::after {
  content: ''; position: absolute; right: -16px; top: -16px;
  width: 120px; height: 120px; border-radius: 50%; background: rgba(201,168,76,.07);
}
.hero-greeting { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 3px; }
.hero-store   { font-size: 18px; font-weight: 700; color: #FFF; margin-bottom: 14px; }
.hero-next {
  background: rgba(255,255,255,.08); border-radius: 10px; padding: 11px 13px;
  display: flex; align-items: center; justify-content: space-between;
}
.hero-next-label { font-size: 10px; color: var(--color-gold-light); margin-bottom: 2px; }
.hero-next-value { font-size: 13px; font-weight: 700; color: #FFF; }

.quick-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px 14px;
}
.quick-btn {
  background: #FFF; border-radius: 12px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 7px; cursor: pointer;
  box-shadow: var(--shadow-sm); border: 1.5px solid transparent; transition: all .15s;
  text-decoration: none; color: inherit;
}
.quick-btn:hover { border-color: var(--color-gold); }
.quick-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.quick-label { font-size: 13px; font-weight: 700; color: var(--color-text); }
.quick-sub   { font-size: 11px; color: var(--color-text-muted); }
.qi-gold  { background: var(--color-gold-bg);     color: var(--color-gold-dark); }
.qi-dark  { background: rgba(26,26,26,.07);       color: var(--color-dark); }
.qi-green { background: var(--color-success-bg);  color: var(--color-success); }
.qi-blue  { background: var(--color-info-bg);     color: var(--color-info); }

/* customer_home 의 .order-row 변형 — <a> 태그 reset 추가 (checkout 의 div 에는 무해 cascade) */
.home-cta-row {
  display: flex; gap: 8px; padding: 10px 14px 14px;
}
.home-cta-row > * { flex: 1; }
.home-cta-row form { margin: 0; }
.home-cta-row .btn { width: 100%; text-align: center; }

/* businesses/customer_my_info.html : 점주 내 정보 (.mi-* / .info-row*) */
.mi-page { padding: 14px 14px 24px; }

.mi-hero {
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  border-radius: 12px; padding: 18px 16px;
  color: #fff; margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.mi-hero::after {
  content: ''; position: absolute; right: -16px; top: -16px;
  width: 90px; height: 90px; border-radius: 50%; background: rgba(201,168,76,.08);
}
.mi-hero .name { font-size: 18px; font-weight: 700; position: relative; z-index: 1; }
.mi-hero .sub  { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; position: relative; z-index: 1; }

.mi-section { margin-bottom: 14px; }
.mi-section-title {
  font-size: 11px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 8px;
}

.mi-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  overflow: hidden;
}

.info-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; gap: 10px;
}
.info-row + .info-row { border-top: 1px solid var(--color-border); }
.info-row-label { font-size: 13px; color: var(--color-text); }
.info-row-value {
  font-size: 13px; font-weight: 600; color: var(--color-text-muted);
  text-align: right; word-break: break-all;
}

.mi-machine {
  padding: 12px 14px; display: flex; gap: 11px; align-items: center;
}
.mi-machine + .mi-machine { border-top: 1px solid var(--color-border); }
.mi-machine-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, var(--color-dark), #3A2E1A);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mi-machine-name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.mi-machine-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.mi-addr { padding: 12px 14px; }
.mi-addr + .mi-addr { border-top: 1px solid var(--color-border); }
.mi-addr-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.mi-addr-label { font-size: 13px; font-weight: 700; color: var(--color-text); }
.mi-addr-pill {
  display: inline-block; background: var(--color-gold-bg); color: var(--color-gold-dark);
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9px;
}
.mi-addr-body { font-size: 12px; color: var(--color-text); line-height: 1.5; }
.mi-addr-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

.mi-empty {
  text-align: center; color: var(--color-text-muted);
  padding: 20px 0; font-size: 12px;
}

.mi-logout-wrap { padding: 14px; }
.mi-logout-wrap form { margin: 0; }
.mi-logout-wrap .btn { width: 100%; justify-content: center; }

/* ============================================================
   21. Sprint 15 — 인쇄 양식 (마누스 design/print_templates.html ①②)
   _print_layout.html + maintenance/report_print.html
                     + maintenance/service_report_print.html
   prefix: .print-shell / .print-toolbar* / .print-stage
           .doc-* (마누스 원본 그대로) / .sign-* / .status-*
   기존 17. .print-document 와 이름 충돌 없음.
   ============================================================ */
.print-shell {
  min-height: 100vh;
  background: #DEDEDE;
  font-family: var(--font-family);
  color: #1A1A1A;
}
.print-toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--font-size-sm);
}
.print-toolbar-title {
  flex: 1; text-align: center;
  font-weight: 600;
}
.print-toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  color: var(--color-white);
  font-size: var(--font-size-sm); font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.print-toolbar-btn:hover { background: rgba(255,255,255,0.12); border-color: var(--color-white); }
.print-toolbar-btn--primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #1A1A1A;
  font-weight: 700;
}
.print-toolbar-btn--primary:hover { background: var(--color-gold-light); border-color: var(--color-gold-light); }
.print-stage {
  padding: 24px 16px;
  display: flex; justify-content: center;
}

/* A4 카드 — 화면에서는 흰 카드, 인쇄에서는 페이지 */
.doc-page {
  background: #FFFFFF;
  width: 210mm;
  min-height: 297mm;
  padding: 18mm 16mm;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  border-radius: 4px;
  box-sizing: border-box;
  color: #1A1A1A;
  font-size: 11pt;
  line-height: 1.5;
}

/* 문서 헤더 — 브랜드 + 문서 제목 */
.doc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: 2px solid #1A1A1A;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.doc-brand { font-size: 20pt; font-weight: 700; color: #1A1A1A; letter-spacing: 1px; }
.doc-brand-sub { font-size: 9pt; color: #888; letter-spacing: 2px; margin-top: 3px; }
.doc-title-block { text-align: right; }
.doc-title  { font-size: 16pt; font-weight: 700; color: #1A1A1A; }
.doc-number { font-size: 9pt; color: #888; margin-top: 4px; }

/* 기본 정보 grid */
.doc-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid #DDD;
  border-radius: 4px;
  overflow: hidden;
}
.doc-meta-item {
  padding: 7px 10px;
  border-bottom: 1px solid #EEE;
}
.doc-meta-item:nth-last-child(-n+2) { border-bottom: none; }
.doc-meta-label { font-size: 9pt; color: #888; font-weight: 700; margin-bottom: 2px; }
.doc-meta-value { font-size: 10pt; font-weight: 600; color: #1A1A1A; word-break: break-word; }

/* 섹션 제목 */
.doc-section-title {
  font-size: 10pt; font-weight: 700;
  border-bottom: 1px solid #CCC;
  padding-bottom: 4px;
  margin: 14px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #333;
}

/* 표 */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  margin-bottom: 12px;
}
.doc-table th {
  background: #F5F5F5;
  padding: 6px 8px;
  text-align: left;
  border: 1px solid #DDD;
  font-weight: 700;
  font-size: 9pt;
  color: #333;
}
.doc-table td {
  padding: 6px 8px;
  border: 1px solid #DDD;
  vertical-align: top;
}
.doc-table .num    { text-align: right; }
.doc-table .center { text-align: center; }
.doc-table .ok     { color: #38A169; font-weight: 700; }
.doc-table .warn   { color: #E53E3E; font-weight: 700; }
.doc-table .key-cell {
  font-weight: 700;
  background: #F5F5F5;
  width: 22%;
}
.doc-total-row td {
  font-weight: 700;
  background: #F9F9F9;
}

/* 메모 박스 */
.doc-note-box {
  border: 1px solid #DDD;
  border-radius: 4px;
  padding: 10px 12px;
  min-height: 60px;
  font-size: 9.5pt;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 다음 점검 박스 */
.doc-next-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F9F9F9;
  border: 1px solid #DDD;
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 9.5pt;
}
.doc-next-box__label { font-size: 9pt; color: #888; margin-bottom: 3px; }
.doc-next-box__value { font-size: 12pt; font-weight: 700; color: #1A1A1A; }
.doc-next-box__hint  { font-size: 9pt; color: #888; }

/* 점검 체크리스트 행 */
.doc-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 10pt;
  margin-bottom: 12px;
}
.doc-checks__item { padding: 2px 0; }
.doc-checks__yes  { color: #38A169; font-weight: 700; margin-right: 5px; }
.doc-checks__no   { color: #BBB; margin-right: 5px; }

/* 사진 strip */
.doc-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.doc-photo-strip img {
  width: 100%;
  height: 48mm;
  object-fit: cover;
  border: 1px solid #DDD;
  border-radius: 3px;
}
.doc-photo-strip__cap {
  font-size: 8pt;
  color: #666;
  margin-top: 2px;
}

/* 서명 영역 */
.doc-signature {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  margin-top: 20px;
}
.sign-box  { text-align: center; min-width: 120px; }
.sign-line { width: 120px; border-bottom: 1px solid #000; margin-bottom: 4px; height: 40px; }
.sign-label { font-size: 9pt; color: #555; }
.sign-name  { font-size: 9pt; color: #1A1A1A; font-weight: 600; margin-top: 2px; }
.doc-stamp {
  width: 60px; height: 60px;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-size: 8pt; font-weight: 700;
  color: var(--color-gold-dark);
  text-align: center;
}

/* 푸터 */
.doc-footer {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #DDD;
  font-size: 8.5pt;
  color: #999;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* 상태 텍스트 (status badge) */
.status-ok    { color: #38A169; font-weight: 700; }
.status-warn  { color: #E53E3E; font-weight: 700; }
.status-na    { color: #999; }
.status-info  { color: #3182CE; font-weight: 700; }

/* pill 배지 — 계약/비계약, 결제 상태 */
.doc-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 8.5pt;
  font-weight: 700;
  vertical-align: middle;
}
.doc-pill--contract    { background: rgba(49,130,206,0.10); color: #1565C0; }
.doc-pill--noncontract { background: rgba(229,62,62,0.10); color: #AD1457; }
.doc-pill--paid        { background: rgba(56,161,105,0.10); color: #2E7D32; }
.doc-pill--unpaid      { background: rgba(229,62,62,0.10); color: #C62828; }
.doc-pill--neutral     { background: #F0F0F0; color: #555; }

/* 인쇄 — toolbar 제거, 카드 그림자 제거, 페이지 흰 배경, 색상 보존.
   Sprint 16 D — 결정 (f) 중간 강도 압축: A4 1페이지 정착을 위해 폰트/패딩/마진/사진
   축소. 화면용 .doc-* 정의는 0손상 (인쇄 시에만 override). */
@media print {
  .print-shell { background: #FFFFFF; }
  .print-toolbar, .no-print { display: none !important; }
  .print-stage { padding: 0; }
  .doc-page {
    box-shadow: none;
    border-radius: 0;
    width: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    /* Sprint 16 D: 본문 폰트 11pt → 10pt */
    font-size: 10pt;
  }
  .doc-page,
  .doc-table th,
  .doc-table td,
  .doc-total-row td,
  .doc-meta-item,
  .doc-note-box,
  .doc-next-box,
  .doc-pill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Sprint 16 D — 표 셀 패딩 축소 (6×8 → 4×6) */
  .doc-table th,
  .doc-table td { padding: 4px 6px; font-size: 9pt; }
  .doc-table .key-cell { padding: 4px 6px; }

  /* Sprint 16 D — 섹션 제목 위/아래 여백 축소 (14/8 → 8/4) */
  .doc-section-title { margin: 8px 0 4px; padding-bottom: 3px; font-size: 9.5pt; }

  /* Sprint 16 D — 기본 정보 grid 셀 패딩 축소 (7/10 → 5/8) */
  .doc-meta-item { padding: 5px 8px; }
  .doc-meta-label { font-size: 8.5pt; }
  .doc-meta-value { font-size: 9.5pt; }

  /* Sprint 16 D — 메모/다음점검 박스 압축 */
  .doc-note-box { min-height: 30px; padding: 6px 8px; margin-bottom: 8px; font-size: 9pt; }
  .doc-next-box { padding: 6px 10px; margin-bottom: 10px; }

  /* Sprint 16 D — 사진 strip 압축 (48mm → 36mm) + 여백 축소 */
  .doc-photo-strip img { height: 36mm; }
  .doc-photo-strip { gap: 4px; margin-bottom: 8px; }
  .doc-photo-strip__cap { font-size: 7.5pt; }

  /* Sprint 16 D — 체크리스트 / 서명 / 푸터 약간 압축 */
  .doc-checks      { gap: 2px 12px; margin-bottom: 8px; font-size: 9pt; }
  .doc-signature   { gap: 24px; margin-top: 12px; }
  .sign-line       { height: 28px; }
  .doc-footer      { margin-top: 12px; padding-top: 8px; font-size: 8pt; }

  /* Sprint 16 D — 헤더 / 브랜드 약간 축소 */
  .doc-header      { padding-bottom: 8px; margin-bottom: 10px; }
  .doc-brand       { font-size: 17pt; }
  .doc-title       { font-size: 14pt; }

  /* Sprint 16 D — 페이지 여백 (15mm → 12mm) */
  @page { size: A4; margin: 12mm; }
}