@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');@import url('https://fonts.googleapis.com/css2?family=Pretendard+Variable:wght@400;500;600;700;800;900&display=swap');/* ============================================================================
   AppDatePicker — Compact date picker with Korean calendar + year/month picker
   ========================================================================= */

/* --- Trigger button --- */
.adp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--c-200);
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  font-family: inherit;
  color: var(--c-500);
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.8) inset;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  position: relative;
}
.adp-trigger.adp-sm { height: 32px; font-size: var(--text-sm); padding: 0 8px; border-radius: var(--r-sm); }
.adp-trigger.adp-lg {
  height: 52px; font-size: var(--text-md); padding: 0 18px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.8) inset;
}

.adp-trigger:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(to bottom, var(--app-surface), var(--c-50));
  box-shadow: 0 2px 8px rgba(99,102,241,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.adp-trigger.adp-open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  color: var(--primary-deep);
}
.adp-trigger.adp-has-val { color: var(--c-800); }

.adp-display { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.adp-icon { flex-shrink: 0; color: var(--c-400); transition: color 0.2s; }
.adp-trigger:hover .adp-icon,
.adp-trigger.adp-open .adp-icon { color: var(--primary); }


/* --- Popup calendar --- */
.adp-pop {
  position: fixed;
  z-index: 200000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(226, 232, 240, 0.6);
  box-shadow:
    0 24px 48px rgba(0,0,0,0.12),
    0 8px 16px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.8) inset;
  width: 290px;
  padding: 16px;
  animation: adpPopIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes adpPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}


/* --- Header --- */
.adp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Clickable title button (year/month) */
.adp-title-btn {
  font-weight: var(--font-extrabold);
  font-size: var(--text-md);
  color: var(--c-800);
  letter-spacing: -0.02em;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  transition: all 0.15s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.adp-title-btn:hover { background: rgba(99, 102, 241, 0.06); color: var(--primary-deep); }
.adp-title-btn:active { transform: scale(0.96); }
.adp-title-btn.adp-title-disabled { cursor: default; }
.adp-title-btn.adp-title-disabled:hover { background: transparent; color: var(--c-800); }

.adp-nav {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(226, 232, 240, 0.6);
  background: rgba(248, 250, 252, 0.8);
  cursor: pointer; color: var(--c-500);
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.adp-nav:hover { background: rgba(238, 242, 255, 0.8); color: var(--primary-deep); border-color: rgba(99, 102, 241, 0.2); }
.adp-nav:active { transform: scale(0.9); transition-duration: 0.06s; }


/* --- Weekday row --- */
.adp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px; text-align: center;
}
.adp-weekday {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400);
  padding: 4px 0; letter-spacing: 0.03em;
}


/* --- Grids --- */
.adp-grid { margin-bottom: 12px; }

.adp-grid-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}

.adp-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px 0;
}


/* --- Day cells --- */
.adp-day {
  height: 34px; border-radius: var(--r-sm); border: none;
  background: transparent; font-family: inherit;
  font-size: var(--text-base); font-weight: var(--font-medium); color: var(--c-700);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.adp-day:not(.sel):hover { background: rgba(241, 245, 249, 0.9); }
.adp-day:active:not(.sel) { transform: scale(0.88); transition-duration: 0.06s; }
.adp-day.out { color: var(--c-300); }
.adp-day.today { font-weight: var(--font-extrabold); color: var(--primary-deep); background: rgba(99, 102, 241, 0.08); }
.adp-day.sel {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%) !important;
  color: white !important; font-weight: var(--font-bold);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.adp-day.sel:hover { background: linear-gradient(135deg, var(--primary-deep) 0%, var(--app-cta-hover) 100%) !important; }


/* --- Month / Year cells --- */
.adp-cell {
  height: 44px; border-radius: var(--r-sm); border: none;
  background: transparent; font-family: inherit;
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-700);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.adp-cell:hover { background: rgba(241, 245, 249, 0.9); }
.adp-cell:active { transform: scale(0.92); transition-duration: 0.06s; }
.adp-cell.out { color: var(--c-300); }
.adp-cell.today { font-weight: var(--font-extrabold); color: var(--primary-deep); background: rgba(99, 102, 241, 0.06); }
.adp-cell.active {
  background: rgba(99, 102, 241, 0.1); color: var(--primary-deep); font-weight: var(--font-extrabold);
  border: 1.5px solid rgba(99, 102, 241, 0.25);
}
.adp-cell.sel {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%) !important;
  color: white !important; font-weight: var(--font-bold);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.adp-cell.sel:hover { background: linear-gradient(135deg, var(--primary-deep) 0%, var(--app-cta-hover) 100%) !important; }


/* --- Footer --- */
.adp-foot {
  display: flex; gap: 6px;
  padding-top: 10px; border-top: 1px solid rgba(226, 232, 240, 0.4);
}
.adp-foot-btn {
  flex: 1; height: 34px; border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--font-bold);
  cursor: pointer; border: none;
  background: rgba(248, 250, 252, 0.9); color: var(--c-500);
  font-family: inherit; transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.adp-foot-btn:hover { background: rgba(226, 232, 240, 0.7); color: var(--primary-deep); }
.adp-foot-btn:active { transform: scale(0.96); transition-duration: 0.06s; }
.adp-foot-btn.ghost { background: transparent; }
.adp-foot-btn.ghost:hover { background: rgba(241, 245, 249, 0.6); }
/* ═══════════════════════════════════════════════════════════════
   Command Palette (Ctrl+K / Cmd+K)
   ═══════════════════════════════════════════════════════════════ */
.cp-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  display: flex; justify-content: center; padding-top: min(20vh, 160px);
  animation: cpFadeIn .12s ease;
}
@keyframes cpFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cp-modal {
  width: 560px; max-width: calc(100vw - 32px); max-height: 480px;
  background: var(--app-surface); border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: cpSlideIn .15s ease;
}
@keyframes cpSlideIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── Input ── */
.cp-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--c-150);
}
.cp-input-icon { color: var(--c-400); flex-shrink: 0; }
.cp-input {
  flex: 1; border: none; outline: none; background: none;
  font-size: var(--text-md); font-weight: var(--font-medium); color: var(--c-900); font-family: inherit;
}
.cp-input:focus { outline: none; box-shadow: none; }
.cp-input::placeholder { color: var(--c-300); }
.cp-kbd {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400);
  background: var(--c-100); padding: 2px 6px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200); font-family: inherit;
}

/* ── Results ── */
.cp-results {
  flex: 1; overflow-y: auto; padding: 8px;
}
.cp-group { margin-bottom: 4px; }
.cp-group-label {
  font-size: var(--text-xs); font-weight: var(--font-extrabold); color: var(--c-400);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 10px 4px; display: flex; align-items: center; gap: 6px;
}
.cp-searching { font-weight: var(--font-semibold); color: var(--primary); }

/* ── Item ── */
.cp-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border: none; background: none;
  border-radius: var(--r-sm); cursor: pointer; font-family: inherit;
  text-align: left; transition: background .08s;
}
.cp-item:hover, .cp-item.active { background: var(--c-100); }
.cp-item-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); flex-shrink: 0;
}
.cp-item.order .cp-item-icon { background: var(--success-bg); color: #22c55e; }
.cp-item-label { flex: 1; font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--c-800); }
.cp-item-arrow { color: var(--c-300); opacity: 0; transition: opacity .1s; }
.cp-item.active .cp-item-arrow { opacity: 1; }

/* Order item */
.cp-item-order-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-item-order-no { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800); }
.cp-item-order-detail { font-size: var(--text-xs); color: var(--c-400); display: flex; gap: 6px; }
.cp-item-order-src {
  background: var(--c-100); padding: 0 5px; border-radius: var(--r-xs);
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-500);
}
.cp-item-order-prod {
  color: var(--c-500); font-size: var(--text-xs);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-item-order-amount {
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-500); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.cp-empty { padding: 16px 12px; font-size: var(--text-base); color: var(--c-400); text-align: center; }
.cp-more-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 12px; border: none; background: none; cursor: pointer;
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--primary);
  border-radius: var(--r-sm); transition: background .08s; font-family: inherit;
}
.cp-more-btn:hover { background: var(--primary-soft); }

/* ── Footer ── */
.cp-footer {
  display: flex; gap: 16px; justify-content: center;
  padding: 10px 18px; border-top: 1px solid var(--c-100);
  font-size: var(--text-xs); color: var(--c-400); font-weight: var(--font-semibold);
}
.cp-footer kbd {
  font-size: var(--text-xs); background: var(--c-100); padding: 1px 5px;
  border-radius: var(--r-xs); border: 1px solid var(--c-200); font-family: inherit;
}
.cp-footer span { display: flex; align-items: center; gap: 4px; }

/* ── Dark mode ── */
[data-theme="dark"] .cp-modal { background: var(--c-800); box-shadow: 0 24px 80px rgba(0,0,0,.5); }
[data-theme="dark"] .cp-input-wrap { border-bottom-color: var(--c-700); }
[data-theme="dark"] .cp-input { color: var(--c-100); }
[data-theme="dark"] .cp-input::placeholder { color: var(--c-600); }
[data-theme="dark"] .cp-kbd { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .cp-item:hover,
[data-theme="dark"] .cp-item.active { background: var(--c-200); }
[data-theme="dark"] .cp-item-icon { background: var(--primary-deep); color: var(--primary); }
[data-theme="dark"] .cp-item.order .cp-item-icon { background: var(--success-deep); color: var(--success); }
[data-theme="dark"] .cp-item-label { color: var(--c-100); }
[data-theme="dark"] .cp-item-order-no { color: var(--c-100); }
[data-theme="dark"] .cp-item-order-src { background: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .cp-footer { border-top-color: var(--c-700); }
[data-theme="dark"] .cp-footer kbd { background: var(--c-700); border-color: var(--c-600); }

/* ── 모바일 ── */
@media (max-width: 480px) {
  .cp-modal { width: calc(100vw - 16px); max-height: 70vh; }
  .cp-overlay { padding-top: min(10vh, 60px); align-items: flex-start; }
  .cp-input-wrap { padding: 12px 14px; }
  .cp-input { font-size: var(--text-base); }
  .cp-item { padding: 9px 10px; }
  .cp-item-icon { width: 28px; height: 28px; }
}
/* ── UpdateModal ── */
.upd-modal {
  background: var(--app-surface);
  border-radius: var(--r-lg);
  width: 400px;
  max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  animation: appSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.upd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}

.upd-tabs {
  display: flex;
  gap: 2px;
  background: var(--c-100);
  border-radius: var(--r-sm);
  padding: 3px;
}

.upd-tab {
  padding: 6px 14px;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--c-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}

.upd-tab.active {
  background: var(--app-surface);
  color: var(--c-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.upd-tab:hover:not(.active) {
  color: var(--c-700);
}

.upd-close {
  background: none;
  border: none;
  color: var(--c-400);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
  transition: background 0.15s;
}

.upd-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--c-600);
}

.upd-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 현재 버전 */
.upd-current-ver {
  font-size: var(--text-base);
  color: var(--c-500);
  font-weight: var(--font-semibold);
}

/* 확인 상태 */
.upd-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--c-50);
  width: 100%;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--c-500);
}

.upd-check-row.success {
  background: var(--success-bg);
  color: #16a34a;
}

.upd-check-row.error {
  background: var(--error-bg);
  color: var(--error-deep);
}

/* 버전 */
.upd-version-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--c-50);
  border-radius: var(--r-md);
  width: 100%;
  justify-content: center;
}

.upd-ver-current {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--c-400);
}

.upd-ver-arrow { font-size: var(--text-lg); color: var(--c-300); }

.upd-ver-new {
  font-size: var(--text-md);
  font-weight: var(--font-extrabold);
  color: var(--primary);
}

/* 릴리스 노트 */
.upd-notes {
  width: 100%;
  max-height: 120px;
  overflow-y: auto;
  font-size: var(--text-sm);
  color: var(--c-500);
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--c-50);
  border-radius: var(--r-sm);
  border: 1px solid rgba(0, 0, 0, 0.04);
  white-space: pre-wrap;
}

/* 프로그레스 */
.upd-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--c-200);
  border-radius: var(--r-full);
  overflow: hidden;
}

.upd-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary));
  border-radius: var(--r-full);
  transition: width 0.3s ease;
}

.upd-progress-text {
  font-size: var(--text-sm);
  color: var(--c-400);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
}

.upd-status-icon { color: var(--primary); }
.upd-status-icon.done { color: var(--success); }
.upd-status-icon.error { color: var(--error); }

.upd-status-text {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--c-900);
  margin: 0;
}

.upd-hint {
  font-size: var(--text-sm);
  color: var(--c-400);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* 설정 */
.upd-settings-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
}

.upd-settings-label {
  font-size: var(--text-base);
  color: var(--c-500);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.upd-input {
  flex: 1;
  min-width: 80px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--c-200);
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  outline: none;
  transition: border-color 0.15s;
}

.upd-input:focus {
  border-color: var(--primary);
}

/* 버튼 */
.upd-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-200);
  background: var(--app-surface);
  color: var(--c-600);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.15s;
}

.upd-btn:hover {
  background: var(--c-50);
  border-color: var(--c-300);
}

.upd-btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border: none;
  color: var(--app-surface);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.upd-btn.primary:hover {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

/* ── 다크 모드 ── */
[data-theme="dark"] .upd-modal { background: var(--app-surface); }
[data-theme="dark"] .upd-tabs { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .upd-tab { color: var(--c-400); }
[data-theme="dark"] .upd-tab.active { background: rgba(255,255,255,0.1); color: var(--c-200); box-shadow: none; }
[data-theme="dark"] .upd-close:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .upd-current-ver { color: var(--c-400); }
[data-theme="dark"] .upd-check-row { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .upd-check-row.success { background: rgba(16,185,129,0.1); color: var(--success); }
[data-theme="dark"] .upd-check-row.error { background: rgba(239,68,68,0.1); color: var(--error); }
[data-theme="dark"] .upd-version-row,
[data-theme="dark"] .upd-notes { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .upd-ver-new { color: var(--primary); }
[data-theme="dark"] .upd-status-text { color: var(--c-200); }
[data-theme="dark"] .upd-progress-bar { background: var(--c-200); }
[data-theme="dark"] .upd-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--c-200); }
[data-theme="dark"] .upd-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--c-200); }
[data-theme="dark"] .upd-btn:hover { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .upd-step { color: var(--c-500); }
[data-theme="dark"] .upd-step.active { color: var(--primary); }
[data-theme="dark"] .upd-step.done { color: var(--success); }
[data-theme="dark"] .upd-step-line { background: var(--c-700); }
[data-theme="dark"] .upd-step-line.done { background: var(--success); }

/* ── 스텝 인디케이터 ── */
.upd-steps {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  justify-content: center;
  margin-bottom: 4px;
}

.upd-step {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-300);
  white-space: nowrap;
  transition: color 0.2s;
}

.upd-step.active {
  color: var(--primary);
}

.upd-step.done {
  color: var(--success, #16a34a);
}

.upd-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  background: var(--c-100);
  color: inherit;
}

.upd-step.active .upd-step-num {
  background: var(--primary);
  color: #fff;
}

.upd-step.done .upd-step-num {
  background: var(--success, #16a34a);
  color: #fff;
  font-size: 10px;
}

.upd-step-line {
  width: 28px;
  height: 2px;
  background: var(--c-200);
  margin: 0 6px;
  border-radius: 1px;
  transition: background 0.2s;
}

.upd-step-line.done {
  background: var(--success, #16a34a);
}

/* ── 무한 프로그레스바 ── */
.upd-progress-bar.indeterminate .upd-progress-fill {
  width: 40% !important;
  animation: updIndeterminate 1.4s ease-in-out infinite;
}

@keyframes updIndeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}


/* ============================================================================
   ADMIN SHELL – MODERN MINIMAL (B안)
   간격 기반 그룹 구분 · 슬림 상단바 · Notion/Linear 스타일
   ============================================================================ */

:root {
  --sm-sidebar-w: 232px;
  --sm-sidebar-w-collapsed: 64px;
  --sm-topbar-h: 52px;
  --sm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sm-dur: 0.3s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-100);
  color: var(--c-800);
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, system-ui, sans-serif;
  overflow: hidden;
}


/* ============================================================================
   SHELL
   ============================================================================ */

.sm-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  min-width: 320px;
  background: var(--c-100);
}

@media (min-width: 861px) {
  .sm-shell { min-width: 1100px; }
}


/* ============================================================================
   SIDEBAR – Modern Minimal
   ============================================================================ */

.sm-sidebar {
  width: var(--sm-sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--app-surface);
  border-right: 1px solid var(--c-150);
  transition: width var(--sm-dur) var(--sm-ease);
  will-change: width;
  overflow: hidden;
  position: relative;
  z-index: 50;
  padding: 16px 10px 12px;
}

.sm-sidebar.is-collapsed { width: var(--sm-sidebar-w-collapsed); }

/* ── Collapse: hide text ── */
.sm-sidebar.is-collapsed .sm-brandText,
.sm-sidebar.is-collapsed .sm-navLabel {
  opacity: 0;
  width: 0 !important;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0; padding: 0;
}

/* Collapsed centering */
.sm-sidebar.is-collapsed { padding: 16px 0 12px; align-items: center; }

.sm-sidebar.is-collapsed .sm-brand-row {
  justify-content: center; gap: 0; padding: 0; margin-bottom: 12px;
}

.sm-sidebar.is-collapsed .sm-nav-scroll { align-items: center; }
.sm-sidebar.is-collapsed .sm-nav { align-items: center; }

.sm-sidebar.is-collapsed .sm-navItem {
  justify-content: center;
  padding: 10px;
  width: 42px; height: 42px;
  border-radius: var(--r-md); gap: 0;
}

.sm-sidebar.is-collapsed .sm-navItem.active::before { display: none; }
.sm-sidebar.is-collapsed .sm-navItem.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 2px; border-radius: 2px;
  background: var(--primary);
}

.sm-sidebar.is-collapsed .sm-nav-divider {
  width: 24px; margin: 4px 0;
}

.sm-sidebar.is-collapsed .sm-footer {
  border-top: none; padding: 4px 0 0;
  align-items: center;
}
.sm-sidebar.is-collapsed .sm-footer-action {
  justify-content: center;
  width: 42px; height: 38px;
  padding: 0; gap: 0;
}
.sm-sidebar.is-collapsed .sm-footer-action .sm-navLabel {
  opacity: 0; width: 0 !important; overflow: hidden; pointer-events: none; margin: 0; padding: 0;
}


/* ── Brand ── */

.sm-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  margin-bottom: 16px;
  height: 36px;
  min-height: 36px;
  flex-shrink: 0;
}

.sm-brandIcon {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-base); font-weight: var(--font-black);
  letter-spacing: -0.03em;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
  cursor: pointer;
  transition: box-shadow .15s;
}

.sm-brandIcon:hover {
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
}

.sm-brandText {
  font-size: var(--text-md); font-weight: var(--font-extrabold);
  color: var(--c-800); letter-spacing: -0.03em;
  white-space: nowrap; overflow: hidden;
  transition: opacity 0.2s ease, width 0.2s ease;
  flex: 1; min-width: 0;
}


/* ── Nav Scroll Area ── */

.sm-nav-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: 0 2px;
  scrollbar-width: none;
}
.sm-nav-scroll::-webkit-scrollbar { display: none; }


/* ── Nav Divider (group separator) ── */

.sm-nav-divider {
  height: 1px;
  background: var(--c-150);
  margin: 6px 10px;
  flex-shrink: 0;
  transition: width var(--sm-dur) var(--sm-ease), margin var(--sm-dur) var(--sm-ease);
}


/* ── Nav Items ── */

.sm-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 2px;
}

.sm-navItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: #7c8594;
  font-weight: var(--font-semibold);
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: all 0.12s ease;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}

.sm-navItem:hover {
  color: var(--c-600);
  background: var(--c-100);
}

.sm-navItem.active {
  color: var(--primary);
  font-weight: var(--font-bold);
  background: var(--primary-soft);
}
.sm-navItem.active::before {
  content: '';
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.sm-navIcon {
  width: 20px;
  display: flex; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.sm-navItem:hover .sm-navIcon { transform: scale(1.06); }

.sm-navLabel {
  white-space: nowrap; overflow: hidden;
  transition: opacity 0.2s ease;
}


/* ── Footer ── */

.sm-footer {
  margin-top: auto;
  padding: 8px 2px 0;
  border-top: 1px solid var(--c-150);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
}

.sm-footer-action {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-sm);
  border: none; background: none;
  color: var(--c-400); font-size: var(--text-sm); font-weight: var(--font-semibold);
  cursor: pointer; font-family: inherit;
  transition: all .12s; white-space: nowrap;
  width: 100%;
}
.sm-footer-action:hover { color: var(--primary); background: var(--c-100); }

.sm-version-btn {
  padding: 4px 10px; border: none; background: none;
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: rgba(0,0,0,.2);
  cursor: pointer; font-family: inherit;
  transition: color .15s; text-align: center;
  position: relative; width: 100%;
}
.sm-version-btn:hover { color: rgba(0,0,0,.5); }

.sm-version-dot {
  position: absolute; top: 4px; left: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}


/* ============================================================================
   TOPBAR – Slim
   ============================================================================ */

.sm-mainCol {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.sm-topbar {
  height: var(--sm-topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  flex-shrink: 0;
  background: var(--app-surface);
  border-bottom: 1px solid var(--c-150);
  gap: 12px;
}

.sm-topLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* ── 중앙 검색바 ── */
.sm-topCenter {
  display: flex; justify-content: center; align-items: center;
}
.sm-search-bar {
  display: flex; align-items: center; gap: 8px;
  width: 280px; height: 34px;
  background: var(--c-50); border: 1px solid var(--c-200);
  border-radius: var(--r-md); padding: 0 12px;
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.sm-search-bar:hover { border-color: var(--primary); background: var(--app-surface); box-shadow: 0 0 0 3px var(--primary-a06); }
.sm-search-bar-icon { color: var(--c-400); flex-shrink: 0; }
.sm-search-bar-placeholder { flex: 1; font-size: var(--text-sm); color: var(--c-300); text-align: left; font-weight: var(--font-medium); }


.sm-pageTitleWrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sm-pageTitle {
  font-size: var(--text-md); font-weight: var(--font-extrabold);
  color: var(--c-800); letter-spacing: -0.02em;
  margin: 0; white-space: nowrap;
  display: flex; align-items: center;
}
.sm-pageTitle.has-tabs { cursor: pointer; }
.sm-pageTitle.has-tabs:hover { color: var(--primary); }
.sm-pageSub {
  font-weight: var(--font-semibold);
  color: var(--c-400);
  margin-left: 2px;
  font-size: var(--text-sm);
}
.sm-pageSub::before { content: '·'; margin: 0 5px; }
.sm-pageTitleChev {
  margin-left: 4px; color: var(--c-400);
  transition: transform .15s;
}
.sm-pageTitleChev.open { transform: rotate(180deg); }

/* ── Tab Dropdown ── */
.sm-tabDrop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px;
  z-index: 200;
  margin-top: 2px;
}
/* 투명 브릿지: 타이틀과 드롭다운 사이 hover 유지 */
.sm-tabDrop::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.sm-tabDropItem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--c-600);
  cursor: pointer;
  border-radius: var(--r-xs);
  font-family: inherit;
  text-align: left;
  transition: background .1s, color .1s;
}
.sm-tabDropItem:hover {
  background: var(--c-50);
  color: var(--c-900);
}
.sm-tabDropItem.active {
  color: var(--primary);
  font-weight: var(--font-bold);
}

.sm-topDivider {
  width: 1px; height: 16px;
  background: var(--c-200); flex-shrink: 0;
}

.sm-topCompany {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: var(--font-bold); font-family: inherit;
  color: var(--primary); background: var(--primary-soft);
  padding: 4px 10px; border-radius: var(--r-xs);
  border: 1px solid transparent;
  white-space: nowrap; flex-shrink: 0;
  cursor: pointer; transition: all 0.15s ease;
}
.sm-topCompany:hover { background: var(--primary-soft); border-color: rgba(99,102,241,.15); }
.sm-topCompany.open { background: var(--primary-soft); border-color: rgba(99,102,241,.25); }
.sm-topCompanyChevron { color: var(--primary); transition: transform 0.2s ease; flex-shrink: 0; }
.sm-topCompanyChevron.open { transform: rotate(180deg); }

/* Right actions */
.sm-topActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Combined date+time */
.sm-topDateTime {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-400);
  white-space: nowrap;
}
.sm-topTimeLive {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-bold); color: var(--primary);
  margin-left: 2px;
}

/* Topbar button */
.sm-topBtn {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  color: var(--c-400);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.12s ease;
  position: relative;
}
.sm-topBtn:hover {
  border-color: rgba(99,102,241,.25);
  color: var(--primary); background: var(--c-50);
}
.sm-topBtn:disabled { opacity: 0.7; cursor: not-allowed; }

/* 동기화 버튼 (텍스트 포함) */
.sm-sync-btn {
  width: auto; padding: 0 10px; gap: 6px;
  color: var(--primary);
  border-color: rgba(99,102,241,.3);
  background: rgba(99,102,241,.06);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.sm-sync-btn:hover:not(:disabled) {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.5);
}
.sm-sync-label { white-space: nowrap; }

/* ── 동기화 드롭다운 ── */
.sm-sync-drop { position: relative; }
.sm-sync-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 2000;
  background: var(--app-surface); border: 1px solid var(--c-200);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 200px; padding: 4px 0; animation: fadeInDown .12s ease;
}
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sm-sync-menu-sep { height: 1px; background: var(--c-100); margin: 4px 0; }
.sm-sync-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 14px; border: none; background: none;
  color: var(--c-700); font-size: var(--text-sm); cursor: pointer;
  text-align: left; transition: background .1s;
}
.sm-sync-menu-item:hover { background: var(--c-50); color: var(--c-900); }
.sm-sync-menu-all { font-weight: var(--font-semibold); color: var(--primary); }
.sm-sync-menu-all:hover { background: var(--primary-soft); }
.sm-sync-menu-date { color: var(--c-500); font-size: var(--text-xs); }
.sm-sync-menu-date:hover { background: var(--c-50); color: var(--c-700); }
.sm-sync-menu-name { flex: 1; font-weight: var(--font-medium); }
.sm-sync-menu-time { font-size: 11px; color: var(--c-400); white-space: nowrap; }
.sm-sync-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sm-sync-status-dot.ok { background: #22c55e; }
.sm-sync-status-dot.failed { background: #ef4444; }
.sm-sync-status-dot.idle { background: var(--c-300); }

/* ── 기간 동기화 모달 ── */
.sm-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.sm-modal {
  background: var(--app-surface); border-radius: var(--r-lg);
  width: 320px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: slideUp .15s ease;
}
.sm-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 0;
}
.sm-modal-title { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800); }
.sm-modal-close {
  width: 26px; height: 26px; border-radius: var(--r-sm); border: none;
  background: var(--c-100); color: var(--c-500); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sm-modal-close:hover { background: var(--c-200); }
.sm-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.sm-modal-field { display: flex; flex-direction: column; gap: 4px; }
.sm-modal-field label { font-size: 11px; font-weight: 600; color: var(--c-500); }
.sm-modal-field select,
.sm-modal-field input[type="date"] {
  width: 100%; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--c-200); background: var(--app-surface);
  color: var(--c-800); font-size: var(--text-sm);
}
.sm-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px 16px; border-top: 1px solid var(--c-100);
}
.sm-modal-btn-cancel {
  padding: 6px 14px; border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: none; color: var(--c-600); font-size: var(--text-sm); cursor: pointer;
}
.sm-modal-btn-cancel:hover { background: var(--c-50); }
.sm-modal-btn-submit {
  padding: 6px 16px; border-radius: var(--r-sm); border: none;
  background: var(--primary); color: #fff; font-size: var(--text-sm);
  font-weight: var(--font-semibold); cursor: pointer;
}
.sm-modal-btn-submit:hover:not(:disabled) { background: #4338ca; }
.sm-modal-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Alert Badge & Dropdown ── */
.sm-alert-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; border-radius: var(--r-sm);
  background: var(--error); color: var(--app-surface); font-size: var(--text-xs); font-weight: var(--font-extrabold);
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}
.sm-alert-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  width: 320px; max-height: 400px; overflow-y: auto;
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.sm-alert-header {
  padding: 14px 16px 10px; font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--c-800);
  border-bottom: 1px solid var(--c-100); display: flex; align-items: center; gap: 6px;
}
.sm-alert-count {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); background: var(--c-100);
  padding: 1px 8px; border-radius: var(--r-xs);
}
.sm-alert-empty {
  padding: 32px 16px; text-align: center; font-size: var(--text-base); color: var(--c-400);
}
.sm-alert-item {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 12px 16px; border: none; background: none;
  cursor: pointer; text-align: left; font-family: inherit;
  border-bottom: 1px solid var(--c-50); transition: background .1s;
}
.sm-alert-item:last-child { border-bottom: none; }
.sm-alert-item:hover { background: var(--c-50); }
.sm-alert-icon {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sm-alert-item.danger .sm-alert-icon { background: var(--error-bg); color: var(--error); }
.sm-alert-item.warn .sm-alert-icon { background: var(--warning-bg); color: var(--warning); }
.sm-alert-item.info .sm-alert-icon { background: var(--primary-soft); color: var(--primary); }
.sm-alert-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-alert-title { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800); }
.sm-alert-desc { font-size: var(--text-xs); color: var(--c-400); line-height: 1.4; }

[data-theme="dark"] .sm-alert-dropdown { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .sm-alert-header { color: var(--c-100); border-bottom-color: var(--c-700); }
[data-theme="dark"] .sm-alert-count { background: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .sm-alert-item:hover { background: var(--c-200); }
[data-theme="dark"] .sm-alert-item { border-bottom-color: var(--c-200); }
[data-theme="dark"] .sm-alert-title { color: var(--c-100); }

/* ── Search Button ── */
.sm-search-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--c-150); background: var(--c-50);
  color: var(--c-400); cursor: pointer; font-family: inherit;
  font-size: var(--text-sm); font-weight: var(--font-medium); transition: all .12s;
}
.sm-search-btn:hover { border-color: rgba(99,102,241,.25); color: var(--primary); background: var(--c-50); }
.sm-search-label { color: inherit; }
.sm-search-kbd {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: #b0b8c4;
  background: var(--app-surface); padding: 1px 5px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200); margin-left: 2px;
}
[data-theme="dark"] .sm-search-btn { background: var(--c-200); border-color: var(--c-700); color: var(--c-500); }
[data-theme="dark"] .sm-search-btn:hover { border-color: var(--primary); color: var(--primary); }
[data-theme="dark"] .sm-search-kbd { background: var(--c-800); border-color: var(--c-600); color: var(--c-500); }


/* ============================================================================
   CONTENT
   ============================================================================ */

.sm-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 28px 28px;
  scrollbar-width: none;
  transition: padding 0.22s ease;
}
.sm-content::-webkit-scrollbar { display: none; }

body.sm-route-print .sm-content {
  padding: 0;
}
body.sm-route-print .sm-content .sm-page { max-width: 1280px; margin: 0 auto; }

/* 탭 페이지 공통: padding 제거 + 전체 높이 flex */
body.sm-route-orders .sm-content,
body.sm-route-products .sm-content,
body.sm-route-sales .sm-content,
body.sm-route-inventory .sm-content,
body.sm-route-suppliers .sm-content,
body.sm-route-settlement .sm-content {
  overflow: hidden;
  padding: 0;
}

body.sm-route-orders .sm-content .sm-page,
body.sm-route-products .sm-content .sm-page,
body.sm-route-sales .sm-content .sm-page,
body.sm-route-inventory .sm-content .sm-page,
body.sm-route-suppliers .sm-content .sm-page,
body.sm-route-settlement .sm-content .sm-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 탭 페이지 내부 wrapper (.page-wrap 등)도 flex column으로 채우기 */
body.sm-route-suppliers .sm-page > .page-wrap,
body.sm-route-settlement .sm-page > .page-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}
body.sm-route-settlement .settlement-tab-content {
  flex: 1;
  overflow: auto;
  padding: 0 28px;
}


/* ============================================================================
   FLOATING (Tooltip & Workspace Popover)
   ============================================================================ */

.sm-floatLayer {
  position: fixed; inset: 0; z-index: 8000;
  pointer-events: none;
}

.sm-floatTip {
  position: fixed; z-index: 100;
  padding: 6px 12px;
  background: var(--c-700); color: white;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  border-radius: var(--r-sm); pointer-events: none;
  opacity: 0; transition: opacity 0.12s ease;
  transform: translateY(-50%);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.sm-floatTip.show { opacity: 1; }
.sm-floatTip::before {
  content: '';
  position: absolute; top: 50%; left: -4px; margin-top: -4px;
  border-width: 4px; border-style: solid;
  border-color: transparent var(--c-700) transparent transparent;
}

/* Workspace Popover */
.sm-wsMenu {
  position: fixed;
  pointer-events: auto;
  z-index: 9000;
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  overflow: hidden;
  animation: wsMenuIn 0.18s var(--sm-ease);
}

@keyframes wsMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sm-wsMenu.right { transform-origin: left top; }

.sm-wsMenuHead {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--c-150);
}

.sm-wsMenuLabel {
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-500);
}

.sm-wsMenuList {
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}

.sm-wsOpt {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; text-align: left;
  color: var(--c-700); font-weight: var(--font-semibold); font-size: var(--text-base); font-family: inherit;
  transition: all 0.1s ease;
}
.sm-wsOpt:hover { background: var(--c-50); }
.sm-wsOpt.active { background: var(--primary-soft); border-color: rgba(99,102,241,.1); }

.sm-wsDot {
  width: 10px; height: 10px;
  border-radius: var(--r-xs); flex-shrink: 0;
}

.sm-wsOptText {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sm-wsCheck {
  width: 22px; height: 22px; border-radius: var(--r-xs);
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}


/* ============================================================================
   MOBILE
   ============================================================================ */

.sm-mobile-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm); background: transparent;
  border: none; color: var(--c-800); cursor: pointer;
}
.sm-mobile-toggle:active { background: rgba(0, 0, 0, 0.04); }

.sm-mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.sm-mobile-overlay.open { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  .sm-mobile-toggle { display: flex; }
  .sm-mobile-overlay { display: block; }
  .sm-shell { padding: 0; gap: 0; }
  .sm-topbar { padding: 0 16px; }
  .sm-content { padding: 16px 16px 40px; }

  .sm-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100vh; z-index: 100;
    width: var(--sm-sidebar-w) !important;
    border-radius: 0; border-right: none;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.08);
    transform: translateX(-120%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sm-sidebar.mobile-open { transform: translateX(0); }

  .sm-sidebar.mobile-open .sm-brandText,
  .sm-sidebar.mobile-open .sm-navLabel {
    opacity: 1 !important; width: auto !important; pointer-events: auto !important;
  }
  .sm-sidebar.mobile-open .sm-footer-action .sm-navLabel {
    opacity: 1 !important; width: auto !important; pointer-events: auto !important;
  }
  .sm-sidebar.mobile-open {
    padding: 16px 10px 12px !important; align-items: stretch !important;
  }
  .sm-sidebar.mobile-open .sm-brand-row {
    justify-content: flex-start !important; gap: 10px !important; padding: 0 8px !important;
  }
  .sm-sidebar.mobile-open .sm-nav { align-items: stretch !important; }
  .sm-sidebar.mobile-open .sm-navItem {
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    width: auto !important; height: auto !important; gap: 10px !important;
  }
  .sm-sidebar.mobile-open .sm-navItem.active::before { display: block !important; }
  .sm-sidebar.mobile-open .sm-navItem.active::after { display: none !important; }
  .sm-sidebar.mobile-open .sm-footer {
    border-top: 1px solid var(--c-150) !important; padding: 8px 2px 0 !important;
  }
  .sm-sidebar.mobile-open .sm-footer-action {
    justify-content: flex-start !important;
    width: auto !important; height: auto !important;
    padding: 7px 10px !important; gap: 10px !important;
  }

  .sm-topCompany { display: none; }
  .sm-topDivider { display: none; }
  .sm-topDateTime { display: none; }
}

@media (max-width: 500px) {
  .sm-pageTitle { font-size: var(--text-md); }
}

/* ═══ 단축키 도움말 모달 ═══════════════════════════════════════ */
.kbhelp-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; backdrop-filter: blur(2px);
}
.kbhelp-modal {
  background: var(--app-surface); border: 1px solid var(--c-150);
  border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 440px; max-width: calc(100vw - 32px);
  padding: 24px; animation: kbhelp-in .15s ease;
}
@keyframes kbhelp-in { from { opacity: 0; transform: scale(.95) translateY(6px); } to { opacity: 1; transform: none; } }

.kbhelp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.kbhelp-title { font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--c-900); }
.kbhelp-close {
  width: 26px; height: 26px; border-radius: var(--r-xs); border: none;
  background: transparent; color: var(--c-400); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; transition: all .15s;
}
.kbhelp-close:hover { background: var(--c-100); color: var(--c-700); }

.kbhelp-section { margin-bottom: 14px; }
.kbhelp-section:last-child { margin-bottom: 0; }
.kbhelp-section-label {
  font-size: var(--text-xs); font-weight: var(--font-bold);
  color: var(--c-400); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
}
.kbhelp-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid var(--c-50);
}
.kbhelp-row:last-child { border-bottom: none; }
.kbhelp-desc { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-700); }
.kbhelp-keys { display: flex; gap: 4px; align-items: center; }
.kbhelp-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  background: var(--c-50); border: 1px solid var(--c-200); border-bottom-width: 2px;
  border-radius: 4px; font-size: 11px; font-weight: var(--font-bold);
  color: var(--c-600); font-family: inherit; white-space: nowrap;
}
.kbhelp-footer {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--c-100);
  font-size: var(--text-xs); color: var(--c-400); text-align: center;
}

[data-theme="dark"] .kbhelp-modal { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .kbhelp-title { color: var(--c-100); }
[data-theme="dark"] .kbhelp-desc { color: var(--c-300); }
[data-theme="dark"] .kbhelp-kbd { background: var(--c-700); border-color: var(--c-600); color: var(--c-300); }
[data-theme="dark"] .kbhelp-row { border-color: var(--c-700); }
[data-theme="dark"] .kbhelp-section-label { color: var(--c-500); }
[data-theme="dark"] .kbhelp-footer { border-color: var(--c-700); color: var(--c-500); }


/* ── Update notification ── */
.sm-update-badge {
  margin-top: 6px;
  padding: 5px 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: var(--app-surface);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  border-radius: var(--r-sm); text-align: center;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: opacity .15s;
  animation: smPulse 2s ease-in-out infinite;
}
.sm-update-badge:hover { opacity: .85; }

.sm-update-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); flex-shrink: 0;
}

.sm-notif-dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--error); border: 1.5px solid var(--app-surface);
}

.sm-update-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; background: var(--primary-soft);
  border: 1px solid var(--c-300); border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--app-cta-hover);
  white-space: nowrap;
}

.sm-update-link {
  color: var(--primary-deep); text-decoration: underline;
  font-weight: var(--font-bold); cursor: pointer;
}

.sm-update-dismiss {
  background: none; border: none; color: var(--c-400);
  cursor: pointer; font-size: var(--text-base); padding: 0 2px; line-height: 1;
}
.sm-update-dismiss:hover { color: var(--c-500); }

@keyframes smPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0); }
}


/* ============================================================================
   DARK MODE OVERRIDES
   ============================================================================ */

[data-theme="dark"] body { background: var(--c-900); color: var(--c-200); }
[data-theme="dark"] .sm-shell { background: var(--c-900); }
[data-theme="dark"] .sm-sidebar { background: var(--c-800); border-right-color: var(--c-700); }
[data-theme="dark"] .sm-brandText { color: var(--c-100); }
[data-theme="dark"] .sm-nav-divider { background: var(--c-700); }
[data-theme="dark"] .sm-navItem { color: var(--c-500); }
[data-theme="dark"] .sm-navItem:hover { color: var(--c-300); background: var(--c-200); }
[data-theme="dark"] .sm-navItem.active { color: var(--primary); background: var(--primary-deep); }
[data-theme="dark"] .sm-navItem.active::before { background: var(--primary); }
[data-theme="dark"] .sm-footer { border-top-color: var(--c-700); }
[data-theme="dark"] .sm-footer-action { color: var(--c-500); }
[data-theme="dark"] .sm-footer-action:hover { color: var(--primary); background: var(--c-200); }
[data-theme="dark"] .sm-version-btn { color: rgba(255,255,255,.2); }
[data-theme="dark"] .sm-version-btn:hover { color: rgba(255,255,255,.5); }
[data-theme="dark"] .sm-topbar { background: var(--c-800); border-bottom-color: var(--c-700); }
[data-theme="dark"] .sm-pageTitle { color: var(--c-100); }
[data-theme="dark"] .sm-pageTitle.has-tabs:hover { color: var(--primary); }
[data-theme="dark"] .sm-pageSub { color: var(--c-500); }
[data-theme="dark"] .sm-tabDrop { background: var(--c-800); border-color: var(--c-700); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
[data-theme="dark"] .sm-tabDropItem { color: var(--c-300); }
[data-theme="dark"] .sm-tabDropItem:hover { background: var(--c-700); color: var(--c-100); }
[data-theme="dark"] .sm-tabDropItem.active { color: var(--primary); }
[data-theme="dark"] .sm-topDivider { background: var(--c-700); }
[data-theme="dark"] .sm-topCompany { background: var(--primary-deep); color: var(--primary); }
[data-theme="dark"] .sm-topCompany:hover { background: var(--primary-deep); }
[data-theme="dark"] .sm-topDateTime { color: var(--c-500); }
[data-theme="dark"] .sm-topTimeLive { color: var(--primary); }
[data-theme="dark"] .sm-topBtn { background: var(--c-200); border-color: var(--c-700); color: var(--c-500); }
[data-theme="dark"] .sm-topBtn:hover { border-color: var(--primary); color: var(--primary); }
[data-theme="dark"] .sm-content { background: var(--c-900); }
[data-theme="dark"] .sm-wsMenu { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .sm-wsMenuHead { border-bottom-color: var(--c-700); }
[data-theme="dark"] .sm-wsOpt { color: var(--c-200); }
[data-theme="dark"] .sm-wsOpt:hover { background: var(--c-200); }
[data-theme="dark"] .sm-wsOpt.active { background: var(--primary-deep); border-color: rgba(99,102,241,.2); }
[data-theme="dark"] .sm-wsCheck { background: var(--primary-deep); color: var(--primary); }
[data-theme="dark"] .sm-floatTip { background: var(--c-600); }
[data-theme="dark"] .sm-floatTip::before { border-color: transparent var(--c-600) transparent transparent; }

/* ── 모바일 보완 (480px 이하) ── */
@media (max-width: 480px) {
  .sm-topbar { padding: 0 12px; height: 52px; grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .sm-content { padding: 12px 12px 40px; }
  .sm-search-bar { width: 120px; }
  .sm-search-bar-placeholder { display: none; }
  .sm-search-kbd { display: none; }
  .sm-topDateTime { display: none; }
}

/* ── 부팅 로딩 화면 ── */
.dao-boot-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary, #fff);
  z-index: 9999;
}
.dao-boot-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.dao-boot-logo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary, #111);
}
.dao-boot-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color, #e5e7eb);
  border-top-color: var(--accent, #6366f1);
  border-radius: 50%;
  animation: dao-spin 0.8s linear infinite;
}
@keyframes dao-spin {
  to { transform: rotate(360deg); }
}
.dao-boot-msg {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
}
/* ── ErrorBoundary ── */
.eb-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.eb-card {
  max-width: 440px;
  width: 100%;
  background: var(--app-surface);
  border: 1px solid var(--c-200);
  border-radius: var(--r-lg);
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.eb-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: var(--r-md);
  background: var(--warning-bg);
  color: var(--warning-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.eb-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--c-800);
  margin: 0 0 8px;
}

.eb-desc {
  font-size: var(--text-base);
  color: var(--c-500);
  line-height: 1.6;
  margin: 0 0 16px;
}

.eb-error-box {
  background: var(--c-50);
  border: 1px solid var(--c-200);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 20px;
  max-height: 80px;
  overflow: auto;
}

.eb-error-box code {
  font-size: var(--text-xs);
  color: var(--error-deep);
  word-break: break-all;
  font-family: 'Pretendard', monospace;
}

.eb-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.eb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  border: 1px solid var(--c-200);
  background: var(--app-surface);
  color: var(--c-600);
  cursor: pointer;
  transition: all 0.15s;
}
.eb-btn:hover {
  background: var(--c-50);
  border-color: var(--c-300);
}

.eb-btn.primary {
  background: var(--primary);
  color: var(--app-surface);
  border-color: var(--primary);
}
.eb-btn.primary:hover {
  background: var(--primary-deep);
}
/* ══════════════════════════════════════════════════════════
   Toast 알림 — 상단 중앙, 다크 배경 디자인 (stg-toast 통일)
   ══════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: min(440px, calc(100vw - 32px));
}

/* ── 래퍼: 높이 접힘 애니메이션 담당 ── */
.toast-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  width: max-content;
  min-width: 220px;
  max-width: min(440px, calc(100vw - 32px));
}

.toast-wrapper-exit {
  grid-template-rows: 0fr;
  margin-bottom: -8px;
  transition:
    grid-template-rows 0.28s ease-in,
    margin-bottom 0.28s ease-in;
}

/* 아이템 자체 페이드 아웃 (wrapper 접힘과 동시) */
.toast-wrapper-exit .toast-item {
  animation: toast-out 0.22s ease-in both !important;
}

/* ── 아이템 ── */
.toast-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 42px 13px 16px;  /* 우측 padding = 닫기 버튼 공간 확보 */
  border-radius: 12px;
  min-height: 0;          /* grid collapse 필수 */
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  background: var(--c-900);
  color: var(--app-surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: toast-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── 아이콘: 원형 컬러 배경 ── */
.toast-icon-wrap {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-surface);
}
.toast-success .toast-icon-wrap { background: #22c55e; }
.toast-error   .toast-icon-wrap { background: var(--error); }
.toast-warning .toast-icon-wrap { background: var(--warning); }
.toast-info    .toast-icon-wrap { background: var(--primary); }

/* ── 메시지 ── */
.toast-msg {
  flex: 1;
  text-align: center;
  word-break: break-word;
  font-weight: 600;
  white-space: nowrap;
}
.toast-msg.multiline {
  white-space: normal;
}

/* ── 닫기 버튼 (우측 절대 고정) ── */
.toast-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  color: var(--app-surface);
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}
.toast-close:hover { opacity: 0.85; background: rgba(255, 255, 255, 0.1); }

/* ── 타이머 바 ── */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform-origin: left;
  animation: toast-progress linear forwards;
  border-radius: 0 0 0 8px;
  opacity: 0.8;
}
.toast-success .toast-progress { background: #22c55e; }
.toast-error   .toast-progress { background: var(--error); }
.toast-warning .toast-progress { background: var(--warning); }
.toast-info    .toast-progress { background: var(--primary); }

/* ── 애니메이션 ── */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 닫힐 때: 아래로 살짝 접히며 페이드 아웃 */
@keyframes toast-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.96) translateY(6px); }
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
/* ── Skeleton shimmer base ── */
.sk-box {
  background: linear-gradient(90deg, #f0f0f5 25%, #e8e8ef 37%, #f0f0f5 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease infinite;
}

@keyframes sk-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── KPI Strip ── */
.sk-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 0 20px;
}
.sk-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  border-radius: var(--r-md);
  padding: 18px 20px;
}

/* ── Chart ── */
.sk-chart {
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  border-radius: var(--r-md);
  padding: 24px;
  margin-bottom: 20px;
}
.sk-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 180px;
  gap: 8px;
}

/* ── Table ── */
.sk-table {
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sk-table-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--c-50);
  border-bottom: 1px solid var(--c-150);
}
.sk-table-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--c-100);
}
.sk-table-row:last-child {
  border-bottom: none;
}

/* ── List ── */
.sk-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sk-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--c-100);
}
.sk-list-item:first-child {
  border-radius: 14px 14px 0 0;
}
.sk-list-item:last-child {
  border-radius: 0 0 14px 14px;
  border-bottom: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sk-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
/* ── Export Confirm Modal ── */
.ex-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: ex-fade-in 0.15s ease;
}
@keyframes ex-fade-in { from { opacity: 0 } to { opacity: 1 } }

.ex-modal {
  position: relative;
  background: var(--app-surface);
  border-radius: var(--r-lg);
  padding: 32px 28px 24px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: ex-slide-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ex-slide-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px) }
  to   { opacity: 1; transform: scale(1) translateY(0) }
}

.ex-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--c-400); padding: 4px; border-radius: var(--r-xs);
  transition: all 0.15s;
}
.ex-modal-close:hover { background: var(--c-100); color: var(--c-600); }

.ex-modal-icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}

.ex-modal-title {
  text-align: center;
  font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--c-800);
  margin: 0 0 16px;
}

.ex-modal-info-list {
  background: var(--c-50);
  border: 1px solid var(--c-200);
  border-radius: var(--r-sm);
  padding: 4px 0;
  margin-bottom: 12px;
}

.ex-modal-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-size: var(--text-base);
}
.ex-modal-info-row + .ex-modal-info-row {
  border-top: 1px solid var(--c-150);
}

.ex-modal-info-label {
  color: var(--c-500);
}
.ex-modal-info-value {
  color: var(--c-800);
  font-weight: var(--font-semibold);
}

.ex-modal-note {
  text-align: center;
  font-size: 11.5px;
  color: var(--c-400);
  margin: 0 0 18px;
}

.ex-modal-actions {
  display: flex; gap: 8px;
}

.ex-modal-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-semibold);
  cursor: pointer;
  border: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
}

.ex-modal-btn.cancel {
  background: var(--c-100); color: var(--c-600);
}
.ex-modal-btn.cancel:hover {
  background: var(--c-200);
}

.ex-modal-btn.confirm {
  background: var(--primary); color: var(--app-surface);
}
.ex-modal-btn.confirm:hover {
  background: var(--primary-deep);
}
/* =========================================================
   Dark Theme — [data-theme="dark"]
   appTheme.css 변수 오버라이드 + 하드코딩 색상 덮어쓰기
   ========================================================= */


[data-theme="dark"] {
  /* ══════════════════════════════════════════
     1. WARM NEUTRAL SCALE (반전)
     ══════════════════════════════════════════ */
  --c-50:  #1a1c1e;
  --c-100: #22241f;
  --c-150: #2a2c27;
  --c-200: #35332f;
  --c-300: #4a4741;
  --c-400: #7a7570;
  --c-500: #a39e98;
  --c-600: #c8c3bd;
  --c-700: #ddd9d4;
  --c-800: #eeebe8;
  --c-900: #f7f5f3;

  /* ── Base Surface ── */
  --app-bg: #121210;
  --app-surface: #1a1c1e;
  --app-surface-raised: #22241f;
  --app-surface-glass: rgba(26, 28, 30, 0.88);
  --glass-bg: rgba(26, 28, 30, 0.75);
  --glass-bg-strong: rgba(26, 28, 30, 0.90);
  --glass-border: rgba(255, 255, 255, 0.07);

  /* ── Brand / Primary (warm violet, 다크에서 밝게) ── */
  --primary: #9b8aff;
  --primary-deep: #8577f0;
  --primary-soft: rgba(155, 138, 255, 0.12);
  --primary-glow: rgba(155, 138, 255, 0.18);
  --primary-gradient: linear-gradient(135deg, #8577f0, #b5a0f8);
  --primary-text: #c4b8ff;
  --accent-warm: #f0a0c4;
  --app-primary: #9b8aff;
  --app-primary-ink: #c4b8ff;
  --app-primary-soft: rgba(155, 138, 255, 0.12);
  --app-primary-soft-2: rgba(155, 138, 255, 0.10);
  --app-cta: #8577f0;
  --app-cta-hover: #9b8aff;
  --app-cta-ring: rgba(155, 138, 255, 0.25);

  /* ── Text ── */
  --text-primary: #eeebe8;
  --text-secondary: #a39e98;
  --text-muted: #7a7570;
  --text-faint: #4a4741;
  --app-text: #eeebe8;
  --app-text-2: rgba(163, 158, 152, 0.92);
  --app-text-3: rgba(122, 117, 112, 0.92);

  /* ── Semantic ── */
  --success: #5eead4;
  --success-deep: #2dd4bf;
  --success-bg: rgba(94, 234, 212, 0.10);
  --success-text: #99f6e4;
  --error: #fca5a5;
  --error-deep: #f87171;
  --error-bg: rgba(252, 165, 165, 0.10);
  --error-text: #fecaca;
  --warning: #fcd34d;
  --warning-deep: #fbbf24;
  --warning-bg: rgba(252, 211, 77, 0.10);
  --warning-text: #fde68a;
  --info: #93c5fd;
  --info-deep: #60a5fa;
  --info-bg: rgba(147, 197, 253, 0.10);
  --info-text: #bfdbfe;

  /* ── Neutral (기존 slate alias 호환) ── */
  --slate-50:  var(--c-50);
  --slate-100: var(--c-100);
  --slate-200: var(--c-200);
  --slate-300: var(--c-300);
  --slate-400: var(--c-400);
  --slate-500: var(--c-500);
  --slate-600: var(--c-600);
  --slate-700: var(--c-700);
  --slate-800: var(--c-800);
  --slate-900: var(--c-900);

  /* ── Border ── */
  --border-light: rgba(255, 255, 255, 0.06);
  --border-medium: var(--c-200);
  --border-strong: var(--c-300);
  --app-border: rgba(255, 255, 255, 0.08);
  --app-border-2: rgba(255, 255, 255, 0.04);

  /* ── Shadows ── */
  --sh-subtle: 0 1px 3px rgba(0, 0, 0, 0.25);
  --sh-card: 0 4px 20px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
  --sh-elevated: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.20);
  --sh-float: 0 12px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.20);
  --sh-glow: 0 4px 20px rgba(155, 138, 255, 0.20), 0 8px 32px rgba(155, 138, 255, 0.10);
  --sh-inner: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.02);
  --sh-modal: 0 -8px 40px rgba(0, 0, 0, 0.35);
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --app-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.30);
  --app-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.35);
  --app-shadow-xl: 0 30px 90px rgba(0, 0, 0, 0.40);

  /* ══════════════════════════════════════════
     2. COMPONENT TOKENS (다크 오버라이드)
     ══════════════════════════════════════════ */

  /* ── Inputs ── */
  --input-bg: var(--c-50);
  --input-border: var(--c-200);
  --input-focus-ring: rgba(155, 138, 255, 0.25);

  /* ── Cards ── */
  --card-bg: var(--c-50);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-shadow: var(--sh-card);

  /* ── Tables ── */
  --table-header-bg: var(--c-50);
  --table-header-color: var(--c-400);
  --table-row-hover: rgba(155, 138, 255, 0.06);
  --table-border: var(--c-100);

  /* ── Modals ── */
  --modal-overlay: rgba(0, 0, 0, 0.55);

  /* ══════════════════════════════════════════
     3. PAGE LAYOUT TOKENS (다크 오버라이드)
     ══════════════════════════════════════════ */
  --page-hd-bg: var(--app-surface);
  --page-hd-border: var(--c-200);
  --page-hd-shadow: var(--sh-subtle);
  --page-title-color: var(--c-900);
  --page-sub-color: var(--c-400);
  --toolbar-bg: var(--app-surface);
  --toolbar-border: var(--c-200);

  color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════
   하드코딩 색상 오버라이드 — 컴포넌트별
   ═══════════════════════════════════════════════════════════ */

/* ── 전역 ── */
[data-theme="dark"] body {
  background: var(--app-bg);
  color: var(--app-text);
}

/* ── AdminShell (사이드바 + 레이아웃) ── */
[data-theme="dark"] .sm-shell {
  background: var(--app-bg);
  color: var(--app-text);
}

[data-theme="dark"] .sm-mainCol {
  background: var(--app-bg);
}

[data-theme="dark"] .sm-sidebar {
  background: var(--app-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sm-brandIcon {
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
}

[data-theme="dark"] .sm-brandText {
  color: var(--app-text);
}

[data-theme="dark"] .sm-nav-group-label {
  color: var(--c-400);
}

[data-theme="dark"] .sm-navItem {
  color: var(--text-secondary);
}

[data-theme="dark"] .sm-navItem:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

[data-theme="dark"] .sm-navItem.active {
  color: var(--primary-text);
  background: rgba(99, 102, 241, 0.12);
}

[data-theme="dark"] .sm-collapse-btn {
  color: var(--c-500);
}

[data-theme="dark"] .sm-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

[data-theme="dark"] .sm-topbar {
  background: rgba(20, 22, 30, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sm-pageTitle {
  color: var(--app-text);
}

[data-theme="dark"] .sm-topCompany {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sm-topCompany:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .sm-topGreeting,
[data-theme="dark"] .sm-topDate,
[data-theme="dark"] .sm-topTime {
  color: var(--c-500);
}

[data-theme="dark"] .sm-topBtn {
  color: var(--c-500);
}

[data-theme="dark"] .sm-topBtn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

[data-theme="dark"] .sm-topDivider,
[data-theme="dark"] .sm-topDividerV {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sm-content {
  background: var(--app-bg);
}

[data-theme="dark"] .sm-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sm-userName {
  color: var(--text-primary);
}

[data-theme="dark"] .sm-userStatus {
  color: var(--c-500);
}

[data-theme="dark"] .sm-logout-btn {
  color: var(--c-500);
}

[data-theme="dark"] .sm-logout-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

/* 워크스페이스 메뉴 */
[data-theme="dark"] .sm-wsMenu {
  background: var(--app-surface);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sm-wsOpt {
  color: var(--text-secondary);
}

[data-theme="dark"] .sm-wsOpt:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sm-wsOpt.active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary-text);
}

[data-theme="dark"] .sm-floatTip {
  background: var(--app-surface);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── 카드 / 글래스 패널 ── */
[data-theme="dark"] .glass-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .hist-card,
[data-theme="dark"] .stg-card {
  background: rgba(26, 29, 39, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── 테이블 ── */
[data-theme="dark"] table {
  color: var(--app-text);
}

[data-theme="dark"] thead th,
[data-theme="dark"] .ord-th {
  background: rgba(26, 29, 39, 0.9) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] tbody tr {
  border-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] td,
[data-theme="dark"] .ord-td {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* ── 입력 필드 ── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--c-400);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: rgba(129, 140, 248, 0.4);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
}

/* ── 버튼 ── */
[data-theme="dark"] .app-select-btn {
  background: linear-gradient(to bottom, rgba(26, 29, 39, 0.95), rgba(20, 22, 30, 0.9));
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--app-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .app-select-btn:hover {
  background: linear-gradient(to bottom, var(--c-100), var(--app-surface));
  border-color: rgba(129, 140, 248, 0.25);
}

[data-theme="dark"] .app-select-menu {
  background: rgba(26, 29, 39, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .app-select-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .app-select-item.is-selected {
  background: rgba(129, 140, 248, 0.12);
  color: var(--primary-text);
}

/* ── 세그먼트 ── */
[data-theme="dark"] .app-seg {
  background: rgba(26, 29, 39, 0.8);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .app-seg-btn {
  color: var(--text-secondary);
}

[data-theme="dark"] .app-seg-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .app-seg-btn.is-active {
  background: rgba(129, 140, 248, 0.15);
  color: var(--primary-text);
  border-color: rgba(129, 140, 248, 0.2);
}

/* ── 빈 상태 ── */
[data-theme="dark"] .app-empty {
  background: rgba(26, 29, 39, 0.6);
  border-color: rgba(255, 255, 255, 0.05);
}

/* ── 모달 ── */
[data-theme="dark"] .app-modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .ecm-panel,
[data-theme="dark"] .modal-panel {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── 토스트 ── */
[data-theme="dark"] .toast-item {
  background: var(--c-100) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--app-text) !important;
}

/* ── 설정 페이지 ── */
[data-theme="dark"] .stg-input,
[data-theme="dark"] .stg-select {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .stg-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--app-text) !important;
}

[data-theme="dark"] .stg-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .stg-hint {
  color: var(--c-500) !important;
}

/* ── 대시보드 ── */
[data-theme="dark"] .dash-header h1 {
  color: var(--app-text);
}

/* ── 주문 페이지 ── */
[data-theme="dark"] .ord-search-input {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .ord-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

/* ── 작업 내역 ── */
[data-theme="dark"] .hist-list-item {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .hist-list-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ── 인쇄/발주서 (PrintPage) ── */
[data-theme="dark"] .print-card {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Page background */
[data-theme="dark"] .sm-print {
  background: var(--app-bg) !important;
}
[data-theme="dark"] .sm-print::before {
  background: radial-gradient(ellipse at 30% 0%, rgba(155,138,255,0.06) 0%, transparent 60%) !important;
}

/* Hero badges */
[data-theme="dark"] .hero-badge {
  background: var(--app-surface-raised) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .hero-badge.company {
  background: rgba(155, 138, 255, 0.10) !important;
  border-color: rgba(155, 138, 255, 0.18) !important;
}
[data-theme="dark"] .hero-badge.status {
  background: rgba(147, 197, 253, 0.10) !important;
  border-color: rgba(147, 197, 253, 0.18) !important;
}

/* Print surface (neumorphic card) */
[data-theme="dark"] .print-surface {
  background: var(--app-surface) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .print-surface:active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Card header border */
[data-theme="dark"] .card-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent) !important;
}

/* Form sections */
[data-theme="dark"] .form-section {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* Inputs, selects, date inputs */
[data-theme="dark"] .modern-input,
[data-theme="dark"] .sm-print input,
[data-theme="dark"] .sm-print select,
[data-theme="dark"] .date-input,
[data-theme="dark"] .date-input-display,
[data-theme="dark"] .app-dd-trigger {
  background: var(--c-100) !important;
  border-color: var(--c-200) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .modern-input:hover,
[data-theme="dark"] .sm-print input:hover,
[data-theme="dark"] .sm-print select:hover,
[data-theme="dark"] .date-input:hover,
[data-theme="dark"] .date-input-wrap:hover .date-input-display,
[data-theme="dark"] .app-dd-trigger:hover {
  border-color: rgba(155, 138, 255, 0.3) !important;
  background: var(--c-150) !important;
}
[data-theme="dark"] .modern-input:focus,
[data-theme="dark"] .sm-print input:focus,
[data-theme="dark"] .sm-print select:focus {
  border-color: var(--primary) !important;
  background: var(--c-100) !important;
}

/* Checkbox custom */
[data-theme="dark"] .sm-print .field-label input[type="checkbox"] {
  background: var(--c-200) !important;
  border-color: var(--c-300) !important;
}

/* Chip grid items */
[data-theme="dark"] .chip-grid .source-chip {
  background: var(--c-100) !important;
  border-color: var(--c-200) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .chip-grid .source-chip.active {
  background: rgba(155, 138, 255, 0.15) !important;
  border-color: rgba(155, 138, 255, 0.3) !important;
  color: var(--primary-text) !important;
}

/* Date picker popup */
[data-theme="dark"] .dp-pop {
  background: var(--app-surface-raised) !important;
  border-color: var(--c-200) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .dp-day:not(.sel):hover {
  background: var(--c-200) !important;
}
[data-theme="dark"] .dp-foot {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .dp-foot-btn:hover {
  background: var(--c-200) !important;
}

/* Dropdown menu */
[data-theme="dark"] .app-dd-menu {
  background: var(--app-surface-raised) !important;
  border-color: var(--c-200) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .app-dd-item:hover {
  background: var(--c-150) !important;
}
[data-theme="dark"] .app-dd-item:active {
  background: rgba(155, 138, 255, 0.1) !important;
}
[data-theme="dark"] .app-dd-item.selected {
  background: rgba(155, 138, 255, 0.1) !important;
}
[data-theme="dark"] .app-dd-menu::-webkit-scrollbar-thumb {
  background: var(--c-300) !important;
}

/* Sources panel */
[data-theme="dark"] .sources-panel {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .sources-head {
  background: rgba(155, 138, 255, 0.04) !important;
}
[data-theme="dark"] .sources-action-btn {
  background: var(--c-100) !important;
  border-color: var(--c-200) !important;
}
[data-theme="dark"] .sources-action-btn:hover {
  background: var(--c-150) !important;
  border-color: rgba(155, 138, 255, 0.25) !important;
  color: var(--primary-text) !important;
}
[data-theme="dark"] .sources-help-pop {
  background: var(--app-surface-raised) !important;
  border-color: var(--c-200) !important;
}
[data-theme="dark"] .sources-help-btn:hover {
  background: var(--c-200) !important;
}

/* Status cards */
[data-theme="dark"] .status-card,
[data-theme="dark"] .status-card.modern {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Progress bar */
[data-theme="dark"] .progress-bar {
  background: var(--c-200) !important;
}
[data-theme="dark"] .progress-fill::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
}

/* Section cards */
[data-theme="dark"] .section-card {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .section-card:hover {
  border-color: rgba(155, 138, 255, 0.15) !important;
}
[data-theme="dark"] .section-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Quick link cards */
[data-theme="dark"] .quick-link {
  background: var(--app-surface-raised) !important;
  border-color: var(--c-200) !important;
}
[data-theme="dark"] .quick-link:hover {
  background: rgba(155, 138, 255, 0.08) !important;
  border-color: rgba(155, 138, 255, 0.2) !important;
}

/* Result file cards */
[data-theme="dark"] .result-file-card {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .result-file-card:hover {
  background: rgba(155, 138, 255, 0.06) !important;
  border-color: rgba(155, 138, 255, 0.15) !important;
}

/* Result section */
[data-theme="dark"] .result-section {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Action buttons */
[data-theme="dark"] .action-btn:hover:not(:disabled),
[data-theme="dark"] .action-btn-large:hover {
  background: var(--c-150) !important;
  color: var(--primary-text) !important;
  border-color: rgba(155, 138, 255, 0.25) !important;
}
[data-theme="dark"] .action-buttons-group {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* Bottom bar */
[data-theme="dark"] .bottom-bar-inner {
  background: var(--app-surface-glass) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .bottom-btn {
  border-color: var(--c-200) !important;
  background: var(--app-surface) !important;
}
[data-theme="dark"] .bottom-btn:hover {
  background: var(--c-150) !important;
}
[data-theme="dark"] .bottom-btn.danger:hover {
  background: rgba(252, 165, 165, 0.10) !important;
}

/* Engine info */
[data-theme="dark"] .engine-info {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Info items */
[data-theme="dark"] .info-item:hover {
  background: var(--c-100) !important;
}

/* Folder grid cards */
[data-theme="dark"] .folder-btn {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .folder-btn:hover {
  background: var(--c-100) !important;
  border-color: rgba(155, 138, 255, 0.15) !important;
}

/* Print alerts */
[data-theme="dark"] .print-alert.info {
  background: rgba(147, 197, 253, 0.08) !important;
  border-color: rgba(147, 197, 253, 0.15) !important;
  color: var(--info-text) !important;
}
[data-theme="dark"] .print-alert.error {
  background: rgba(252, 165, 165, 0.08) !important;
  border-color: rgba(252, 165, 165, 0.15) !important;
}

/* Quick nav section */
[data-theme="dark"] .quick-nav-section {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .print-quick-actions {
  background: rgba(155, 138, 255, 0.04) !important;
}

/* Modals */
[data-theme="dark"] .print-modal-content,
[data-theme="dark"] .path-modal-content {
  background: var(--app-surface-raised) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .print-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .print-modal-close:hover {
  background: var(--c-200) !important;
}
[data-theme="dark"] .path-modal-content pre {
  background: var(--c-50) !important;
  border-color: var(--c-200) !important;
  color: var(--text-primary) !important;
}

/* Scrollbar in dark print */
[data-theme="dark"] .sm-print ::-webkit-scrollbar-thumb {
  background: var(--c-300) !important;
}

/* Result icon colors (already dark-safe but override for consistency) */
[data-theme="dark"] .result-icon.success svg { color: var(--success) !important; }
[data-theme="dark"] .result-file-action { color: var(--success) !important; }

/* ── 매출 분석 ── */
[data-theme="dark"] .sa-card {
  background: rgba(26, 29, 39, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── 스켈레톤 ── */
[data-theme="dark"] .skeleton-box {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ── 날짜 선택기 ── */
[data-theme="dark"] .adp-calendar {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .adp-day:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── 스크롤바 ── */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--app-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--c-200);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--c-300);
}

/* ── 에러 바운더리 ── */
[data-theme="dark"] .eb-card {
  background: var(--app-surface) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .eb-error-box {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: rgba(248, 113, 113, 0.15) !important;
}

/* ── 주문 상세 인스펙터 ── */
[data-theme="dark"] .oi-panel {
  background: var(--app-bg) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .oi-section {
  background: rgba(26, 29, 39, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════
   테마 토글 버튼 (사이드바)
   ═══════════════════════════════════════════════════════════ */
.theme-toggle-btn {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--c-500);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s, color 0.15s;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════
   v1.3 DARK MODE OVERHAUL
   ═══════════════════════════════════════════════════════════ */

/* ── Sales: Header ── */
[data-theme="dark"] .sa-title { color: var(--text-primary); }
[data-theme="dark"] .sa-sub { color: var(--c-500); }

/* ── Sales: Date Controls ── */
[data-theme="dark"] .sa-date-controls {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .sa-dr-wrap {
  background: var(--c-100);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .sa-dr-wrap:hover {
  border-color: rgba(129,140,248,0.4);
  background: var(--c-100);
}
[data-theme="dark"] .sa-dp-val { color: var(--text-primary); }
[data-theme="dark"] .sa-dr-sep { color: var(--c-400); }
[data-theme="dark"] .sa-dr-icon { color: var(--c-500); }

/* ── Sales: Quick Buttons ── */
[data-theme="dark"] .sa-qbtn {
  background: var(--c-100);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}
[data-theme="dark"] .sa-qbtn:hover {
  background: var(--c-200);
  color: var(--primary-text);
  border-color: rgba(129,140,248,0.25);
}
[data-theme="dark"] .sa-qbtn.on {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: var(--c-900);
}

/* ── Sales: Tabs ── */
[data-theme="dark"] .sa-tabs {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .sa-tab {
  color: var(--c-500);
}
[data-theme="dark"] .sa-tab:hover {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .sa-tab.on {
  color: var(--primary-text);
  background: rgba(99,102,241,0.12);
}

/* ── Sales: Cards ── */
[data-theme="dark"] .sa-card {
  background: var(--app-surface) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .sa-card-t { color: var(--text-primary); }
[data-theme="dark"] .sa-card-badge { background: var(--c-200); color: var(--text-secondary); }

/* ── Overview: Hero ── */
[data-theme="dark"] .ov-hero {
  background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-deep) 50%, var(--primary) 100%);
}

/* ── Overview: KPI Cards ── */
[data-theme="dark"] .ov-kpi {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .ov-kpi:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
[data-theme="dark"] .ov-kpi-val { color: var(--text-primary); }
[data-theme="dark"] .ov-kpi-lb { color: var(--c-500); }
[data-theme="dark"] .ov-kpi-sub { color: var(--c-500); }
[data-theme="dark"] .ov-kpi-sub.good { color: var(--success); }
[data-theme="dark"] .ov-kpi-sub.warn { color: var(--warning); }
[data-theme="dark"] .ov-kpi-sub.bad { color: var(--error); }

/* KPI icon backgrounds (dark-friendly tints) */
[data-theme="dark"] .ov-kpi-icon--margin { background: rgba(16,185,129,0.12); }
[data-theme="dark"] .ov-kpi-icon--ad { background: rgba(245,158,11,0.12); }
[data-theme="dark"] .ov-kpi-icon--tax { background: rgba(239,68,68,0.12); }
[data-theme="dark"] .ov-kpi-icon--qty { background: rgba(14,165,233,0.12); }
[data-theme="dark"] .ov-kpi-icon--settled { background: rgba(99,102,241,0.12); }
[data-theme="dark"] .ov-kpi-icon--revenue { background: rgba(234,88,12,0.12); }
[data-theme="dark"] .ov-kpi-icon--supply { background: rgba(147,51,234,0.12); }

/* ── Overview: Panels ── */
[data-theme="dark"] .ov-panel {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .ov-panel-t { color: var(--text-primary); }
[data-theme="dark"] .ov-panel-badge { background: var(--c-200); color: var(--text-secondary); }
[data-theme="dark"] .ov-chip.up { background: rgba(5,150,105,0.12); color: var(--success); }
[data-theme="dark"] .ov-chip.down { background: rgba(220,38,38,0.12); color: var(--error); }

/* ── Overview: Compare Bars ── */
[data-theme="dark"] .ov-cmp-period { color: var(--text-primary); }
[data-theme="dark"] .ov-cmp-dates { color: var(--c-500); }
[data-theme="dark"] .ov-cmp-bar-wrap { background: var(--c-200); }
[data-theme="dark"] .ov-cmp-bar.prev { background: linear-gradient(90deg, var(--c-400), var(--c-500)); }
[data-theme="dark"] .ov-cmp-val { color: var(--text-primary); }

/* ── Overview: Stats / Insights ── */
[data-theme="dark"] .ov-stat { background: var(--c-100); }
[data-theme="dark"] .ov-stat:hover { background: var(--c-200); }
[data-theme="dark"] .ov-stat-lb { color: var(--c-500); }
[data-theme="dark"] .ov-stat-val { color: var(--text-primary); }
[data-theme="dark"] .ov-stat-extra { color: var(--text-secondary); }

/* ── Overview: Cost Breakdown ── */
[data-theme="dark"] .ov-cost-lb { color: var(--text-secondary); }
[data-theme="dark"] .ov-cost-v { color: var(--text-primary); }
[data-theme="dark"] .ov-cost-summary { background: var(--c-100); }
[data-theme="dark"] .ov-cs-row { color: var(--text-secondary); }
[data-theme="dark"] .ov-cs-row.total { color: var(--text-primary); }
[data-theme="dark"] .ov-cs-val { color: var(--text-primary); }

/* ── Overview: Formula Note ── */
[data-theme="dark"] .sa-desc-box { color: var(--c-500); }

/* ── Sales: Date Picker Popup ── */
[data-theme="dark"] .sa-dp-pop {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
[data-theme="dark"] .sa-dp-pop .adp-header { color: var(--text-primary); }
[data-theme="dark"] .sa-dp-pop .adp-day { color: var(--text-secondary); }
[data-theme="dark"] .sa-dp-pop .adp-day:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
[data-theme="dark"] .sa-dp-pop .adp-day.today { color: var(--primary); }
[data-theme="dark"] .sa-dp-pop .adp-day.selected { background: var(--primary-deep); color: var(--c-900); }

/* ── Dashboard: KPI Cards ── */
[data-theme="dark"] .dash-kpi-card {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}
[data-theme="dark"] .dash-kpi-card:hover {
  border-color: rgba(129,140,248,0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
[data-theme="dark"] .dash-kpi-value { color: var(--text-primary); }
[data-theme="dark"] .dash-kpi-label { color: var(--c-500); }
[data-theme="dark"] .dash-kpi-unit { color: var(--c-500); }
[data-theme="dark"] .dash-kpi-sub { color: var(--c-500); }
[data-theme="dark"] .dash-kpi-icon.indigo  { background: rgba(99,102,241,0.15); }
[data-theme="dark"] .dash-kpi-icon.emerald { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .dash-kpi-icon.amber   { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .dash-kpi-icon.rose    { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .dash-kpi-icon.sky     { background: rgba(14,165,233,0.15); }

/* ── Dashboard: Cards ── */
[data-theme="dark"] .dash-card {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}
[data-theme="dark"] .dash-card:hover {
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .dash-card-title { color: var(--text-primary); }
[data-theme="dark"] .dash-card-title-icon { color: var(--primary); }
[data-theme="dark"] .dash-card-link {
  background: var(--c-100);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}
[data-theme="dark"] .dash-card-link:hover {
  border-color: rgba(129,140,248,0.3);
  color: var(--primary-text);
}

/* ── Dashboard: Chart ── */
[data-theme="dark"] .dash-chart-grid { stroke: rgba(255,255,255,0.06); }
[data-theme="dark"] .dash-chart-axis-y { fill: var(--c-500); }
[data-theme="dark"] .dash-chart-axis-x { fill: var(--c-500); }
[data-theme="dark"] .dash-chart-axis-x.active { fill: var(--primary); }
[data-theme="dark"] .dash-chart-tooltip {
  background: var(--c-100);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] .dash-chart-tooltip-date { color: var(--c-500); }
[data-theme="dark"] .dash-chart-tooltip-val { color: var(--text-primary); }
[data-theme="dark"] .dash-chart-empty { color: var(--c-500); }

/* ── Dashboard: Trend badge (dark-friendly) ── */
[data-theme="dark"] .dash-trend.positive { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .dash-trend.negative { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .dash-kpi-pct.emerald { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .dash-kpi-pct.rose { background: rgba(239,68,68,0.15); }

/* ── Dashboard: Compare card ── */
[data-theme="dark"] .dash-compare-grid { gap: 10px; }
[data-theme="dark"] .dash-compare-item {
  background: var(--c-100);
  border-radius: 10px;
}
[data-theme="dark"] .dash-compare-label { color: var(--c-500); }
[data-theme="dark"] .dash-compare-cur { color: var(--text-primary); }
[data-theme="dark"] .dash-compare-diff.up { color: var(--success); }
[data-theme="dark"] .dash-compare-diff.down { color: var(--error); }

/* ── Dashboard: Platform table ── */
[data-theme="dark"] .dash-plat-name { color: var(--text-primary); }
[data-theme="dark"] .dash-plat-bar-bg { background: var(--c-200); }

/* ── Dashboard: Products table ── */
[data-theme="dark"] .dash-prod-name { color: var(--text-primary); }
[data-theme="dark"] .dash-prod-opt { color: var(--c-500); }

/* ── General: Tables (broader) ── */
[data-theme="dark"] .sa-table th {
  background: var(--c-100) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .sa-table td {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .sa-table tr:hover td {
  background: rgba(255,255,255,0.03);
}

/* ── Sales: Loading / Empty ── */
[data-theme="dark"] .sa-loading { color: var(--c-500); }
[data-theme="dark"] .sa-empty { color: var(--c-500); }

/* ── Sales: Misc shared components ── */
[data-theme="dark"] .sa-sbtn {
  background: var(--c-100);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}
[data-theme="dark"] .sa-sbtn:hover {
  background: var(--c-200);
  color: var(--primary-text);
  border-color: rgba(129,140,248,0.25);
}
[data-theme="dark"] .sa-sbtn.primary {
  background: var(--primary-deep);
  color: var(--c-900);
  border-color: var(--primary-deep);
}

/* ── Daily Detail modal ── */
[data-theme="dark"] .sa-dd-flow-card { background: var(--c-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .sa-dd-flow-lb { color: var(--text-secondary); }
[data-theme="dark"] .sa-dd-flow-val { color: var(--text-primary); }

/* ── Calendar page ── */
[data-theme="dark"] .cal-card {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .cal-day { border-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .cal-day:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .cal-day-num { color: var(--text-secondary); }

/* ── Returns page ── */
[data-theme="dark"] .ret-card {
  background: var(--app-surface);
  border-color: rgba(255,255,255,0.06);
}

/* ── Jobs / History page ── */
[data-theme="dark"] .hist-card {
  background: var(--app-surface) !important;
  border-color: rgba(255,255,255,0.06) !important;
}


/* ── Settings: improve contrast ── */
[data-theme="dark"] .stg-card {
  background: var(--app-surface) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .stg-tab-header { 
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .stg-tab-btn {
  color: var(--c-500);
}
[data-theme="dark"] .stg-tab-btn.active {
  color: var(--primary-text);
  border-bottom-color: var(--primary);
}
[data-theme="dark"] .stg-section-title { color: var(--text-primary); }
[data-theme="dark"] .stg-label { color: var(--text-secondary); }

/* ── Broader form elements ── */
[data-theme="dark"] .sa-date-controls input[type="date"],
[data-theme="dark"] .sa-date-controls input[type="text"] {
  background: var(--c-100);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.08);
}

/* ── Scrollbar (sidebar) ── */
[data-theme="dark"] .sm-sidebar::-webkit-scrollbar-track { background: var(--app-bg); }
[data-theme="dark"] .sm-sidebar::-webkit-scrollbar-thumb { background: var(--c-200); }

/* ═══════════════════════════════════════════════════════════
   v1.3 DARK MODE – Sales Detail Elements
   ═══════════════════════════════════════════════════════════ */

/* ── Sales: Date Picker Popup (calendar) ── */
[data-theme="dark"] .sa-dp-title { color: var(--text-primary); }
[data-theme="dark"] .sa-dp-title:hover { background: rgba(255,255,255,0.06); color: var(--primary-text); }
[data-theme="dark"] .sa-dp-nav { background: var(--c-100); border-color: rgba(255,255,255,0.08); color: var(--text-secondary); }
[data-theme="dark"] .sa-dp-nav:hover { background: var(--c-200); color: var(--primary-text); border-color: rgba(129,140,248,0.25); }
[data-theme="dark"] .sa-dp-day { color: var(--text-secondary); }
[data-theme="dark"] .sa-dp-day:not(.sel):hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .sa-dp-foot-btn { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .sa-dp-foot-btn:hover { background: var(--c-200); color: var(--text-primary); }
[data-theme="dark"] .sa-dp-foot-btn.reset { background: rgba(217,119,6,0.12); color: var(--warning); }
[data-theme="dark"] .sa-dp-foot-btn.reset:hover { background: rgba(217,119,6,0.2); }

/* ── Sales: Formula / Fee Reference ── */
[data-theme="dark"] .sa-fr-card { background: var(--app-surface); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .sa-fr-header { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.15); }
[data-theme="dark"] .sa-fr-header-title { color: var(--text-primary); }
[data-theme="dark"] .sa-fr-row { background: var(--c-100); }
[data-theme="dark"] .sa-fr-name { color: var(--text-primary); }
[data-theme="dark"] .sa-fr-val { color: var(--text-primary); }

/* ── Sales: Detailed Summary ── */
[data-theme="dark"] .sa-ds-card { background: var(--app-surface); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .sa-ds-item { color: var(--text-primary); }
[data-theme="dark"] .sa-ds-item.main { background: var(--c-100); }
[data-theme="dark"] .sa-ds-item.result { background: rgba(99,102,241,0.08); border-left-color: var(--primary); }
[data-theme="dark"] .sa-ds-item.result.minus { background: rgba(220,38,38,0.08); border-left-color: var(--error); }
[data-theme="dark"] .sa-ds-val { color: var(--text-primary); }

/* ── Sales: Vertical Tabs ── */
[data-theme="dark"] .sa-vt { color: var(--c-500); }
[data-theme="dark"] .sa-vt:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); }
[data-theme="dark"] .sa-vt.on { color: var(--primary-text); background: rgba(99,102,241,0.12); }

/* ── Sales: Soft Table ── */
[data-theme="dark"] .sa-tbl-soft th { background: var(--c-100); border-bottom-color: rgba(255,255,255,0.06); color: var(--text-secondary); }
[data-theme="dark"] .sa-tbl-soft td { color: var(--text-primary); }
[data-theme="dark"] .sa-tbl-soft tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .sa-tbl-soft tbody tr:hover { background: rgba(255,255,255,0.04); }

/* ── Sales: Quick select ── */
[data-theme="dark"] .sa-qs { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .sa-qs:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .sa-qs.on { background: rgba(99,102,241,0.15); color: var(--primary-text); }

/* ── Sales: Time Preset chip ── */
[data-theme="dark"] .sa-chip { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .sa-chip.on { background: rgba(99,102,241,0.15); color: var(--primary-text); }

/* ── Calendar dark ── */
[data-theme="dark"] .cal-header { color: var(--text-primary); }
[data-theme="dark"] .cal-month-nav button { background: var(--c-100); border-color: rgba(255,255,255,0.08); color: var(--text-secondary); }
[data-theme="dark"] .cal-month-nav button:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .cal-day-header { color: var(--c-500); }

/* ── Orders table improvements ── */
[data-theme="dark"] .ord-table-wrap { background: var(--app-surface); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .ord-empty { color: var(--c-500); }
[data-theme="dark"] .ord-pagination { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .ord-pagination button { color: var(--text-secondary); background: var(--c-100); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ord-pagination button:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .ord-pagination button.active { background: var(--primary-deep); color: var(--c-900); border-color: var(--primary-deep); }

/* ═══════════════════════════════════════════════════════════
   v1.2.1 AUDIT — Orders Page Dark Mode
   ═══════════════════════════════════════════════════════════ */

/* ── Page / Header ── */
[data-theme="dark"] .ord-page { background: var(--app-bg); }
[data-theme="dark"] .ord-hd { background: var(--app-surface); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .ord-hd-title { color: var(--text-primary); }
[data-theme="dark"] .ord-hd-tabs { background: var(--c-100); }
[data-theme="dark"] .ord-hd-tab { background: transparent; color: var(--c-500); }
[data-theme="dark"] .ord-hd-tab:hover { background: rgba(255,255,255,0.04); color: var(--text-secondary); }
[data-theme="dark"] .ord-hd-tab.active { background: var(--app-surface); color: var(--primary-text); }
[data-theme="dark"] .ord-hd-tab-n { background: rgba(99,102,241,0.15); color: var(--primary-text); }
[data-theme="dark"] .ord-hd-search { background: var(--c-100); }
[data-theme="dark"] .ord-hd-search-combo { background: var(--c-100); }
[data-theme="dark"] .ord-hd-search-combo:focus-within { border-color: var(--primary-deep); background: var(--app-surface); }
[data-theme="dark"] .ord-hd-search-combo .app-select-btn { color: var(--primary-text) !important; }
[data-theme="dark"] .ord-hd-search-divider { background: var(--c-300); }
[data-theme="dark"] .ord-hd-search-input { color: var(--text-primary); }
[data-theme="dark"] .ord-hd-pills { background: var(--c-100); }
[data-theme="dark"] .ord-hd-act { background: var(--c-100); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ord-hd-act:hover { background: var(--c-200); border-color: rgba(129,140,248,0.25); }
[data-theme="dark"] .ord-hd-icon-btn { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .ord-hd-icon-btn:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .ord-kpi-val { color: var(--text-primary); }

/* ── Filter / Column btn ── */
[data-theme="dark"] .ord-filter-col-btn { background: var(--c-100); border-color: rgba(255,255,255,0.08); color: var(--text-secondary); }
[data-theme="dark"] .ord-filter-col-btn:hover { background: var(--c-200); color: var(--primary-text); }

/* ── List Card / Table ── */
[data-theme="dark"] .ord-list-card { background: var(--app-surface); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .ord-table { background: var(--app-surface); }

/* ── Pagination ── */
[data-theme="dark"] .ord-pg-btn { background: var(--c-100); color: var(--text-secondary); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ord-pg-btn:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .ord-pg-btn.active { background: var(--primary-deep); color: var(--c-900); border-color: var(--primary-deep); }

/* ── Date Picker ── */
[data-theme="dark"] .ord-dp-pop { background: var(--app-surface); border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
[data-theme="dark"] .ord-dp-title { color: var(--text-primary); background: transparent; }
[data-theme="dark"] .ord-dp-title:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .ord-dp-nav { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .ord-dp-nav:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .ord-dp-val { color: var(--text-primary); }
[data-theme="dark"] .ord-dp-field { background: var(--c-100); }
[data-theme="dark"] .ord-dp-day { background: transparent; color: var(--text-secondary); }
[data-theme="dark"] .ord-dp-day:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .ord-dp-day.sel { background: var(--primary-deep); color: var(--c-900); }
[data-theme="dark"] .ord-dp-mcell { background: transparent; color: var(--text-secondary); }
[data-theme="dark"] .ord-dp-mcell:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .ord-dp-foot-btn { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .ord-dp-foot-btn:hover { background: var(--c-200); color: var(--text-primary); }
[data-theme="dark"] .ord-date-input { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ord-date-range-group { border-color: rgba(255,255,255,0.06); }

/* ── Detail Card (주문 상세) ── */
[data-theme="dark"] .ord-detail-card { background: var(--app-surface); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] 
/* ── Detail: Info ── */
[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] 
/* ── Detail: Products ── */
[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] 
/* ── Detail: Invoice ── */
[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] 
/* ── Detail: Memo ── */
[data-theme="dark"] 
/* ── Detail: Returns ── */
[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] .c-bold { color: var(--text-primary); }
[data-theme="dark"] .c-ret-badge { background: rgba(239,68,68,0.1); color: var(--error); }

/* ── Return Form ── */
[data-theme="dark"] [data-theme="dark"] .dt-rf-product { color: var(--text-primary); }
[data-theme="dark"] .dt-rf-qty { color: var(--text-primary); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .dt-rf-type { background: var(--c-100); }
[data-theme="dark"] .dt-rf-amount { background: var(--c-100); }
[data-theme="dark"] .dt-rf-cancel { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .dt-rf-auto-toggle { background: var(--c-100); border-color: rgba(255,255,255,0.08); }

/* ── Manual Form / Modals ── */
[data-theme="dark"] .mf-field { background: var(--c-100); }
[data-theme="dark"] .mf-btn-cancel { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .mf-ptag { background: var(--c-200); color: var(--text-secondary); }

/* ── Supplier Modal ── */
[data-theme="dark"] .ord-supplier-modal { background: var(--app-surface); }
[data-theme="dark"] .supplier-modal-header { color: var(--text-primary); }
[data-theme="dark"] .supplier-modal-close { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .supplier-modal-close:hover { background: var(--c-200); color: var(--text-primary); }
[data-theme="dark"] .supplier-modal-btn { color: var(--text-primary); }
[data-theme="dark"] .supplier-input { background: var(--c-100); color: var(--text-primary); }
[data-theme="dark"] .supplier-chip { background: var(--c-100); color: var(--text-secondary); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .supplier-chip.active { background: rgba(99,102,241,0.15); color: var(--primary-text); border-color: rgba(129,140,248,0.25); }

/* ── Reset Modal ── */
[data-theme="dark"] .ord-reset-modal-title { color: var(--text-primary); }
[data-theme="dark"] .ord-reset-modal-desc { color: var(--text-secondary); }
[data-theme="dark"] .ord-reset-modal-btn { color: var(--text-primary); }
[data-theme="dark"] .ord-reset-option { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ord-reset-option-label { color: var(--text-primary); }
[data-theme="dark"] .ord-reset-range-opt { border-color: rgba(255,255,255,0.08); }

/* ── Notification ── */
[data-theme="dark"] .ord-notif-title { color: var(--text-primary); }
[data-theme="dark"] .ord-notif-line { color: var(--text-secondary); }

/* ── Return Modal ── */
[data-theme="dark"] .rt-modal { background: var(--app-surface); }
[data-theme="dark"] .rt-modal-title { color: var(--text-primary); }
[data-theme="dark"] .rt-modal-product { color: var(--text-primary); }
[data-theme="dark"] .rt-modal-close { background: var(--c-100); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   v1.2.1 AUDIT — Settings Page Dark Mode
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] .stg-hd-left h1 { color: var(--text-primary); }
[data-theme="dark"] .stg-sub-title { color: var(--text-primary); }
[data-theme="dark"] .stg-card-hd { background: transparent; }
[data-theme="dark"] .stg-card-icon { background: rgba(99,102,241,0.12); color: var(--primary); }
[data-theme="dark"] .stg-card-icon.orange { background: rgba(249,115,22,0.12); color: var(--warning); }
[data-theme="dark"] .stg-card-title { color: var(--text-primary); }
[data-theme="dark"] .stg-badge { background: var(--c-200); color: var(--text-secondary); }
[data-theme="dark"] .stg-mode-badge { background: var(--c-200); color: var(--text-secondary); }
[data-theme="dark"] .stg-mode-desc { background: var(--c-100); }

/* ── Settings: Inputs & Toggles ── */
[data-theme="dark"] .stg-spinner-input { background: var(--c-100); color: var(--text-primary); }
[data-theme="dark"] .stg-spinner-arrow { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .stg-spinner-arrow:hover { background: var(--primary-deep); color: var(--c-900); }
[data-theme="dark"] .stg-toggle-label { background: var(--c-200); }
[data-theme="dark"] .stg-toggle-switch { background: var(--c-400); }
[data-theme="dark"] .stg-toggle-switch.on { background: var(--primary-deep); }
[data-theme="dark"] .stg-micro-btn { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .stg-micro-btn:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .stg-naver-pw-field { background: var(--c-100); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .stg-naver-pw-input { color: var(--text-primary); }

/* ── Settings: Folder / Path ── */
[data-theme="dark"] .stg-folder-btn { background: var(--c-100); color: var(--text-secondary); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .stg-folder-btn:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .stg-path-badge { background: var(--c-200); color: var(--text-secondary); }

/* ── Settings: Companies ── */
[data-theme="dark"] .stg-company-item { background: var(--c-100); }
[data-theme="dark"] .stg-company-item:hover { background: var(--c-200); }

/* ── Settings: Suppliers ── */
[data-theme="dark"] .stg-supplier-list { background: var(--c-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .stg-supplier-row { background: var(--c-100); }
[data-theme="dark"] .stg-supplier-row:hover { background: var(--c-200); }

/* ── Settings: Templates ── */
[data-theme="dark"] .stg-template-item { background: var(--c-100); }
[data-theme="dark"] .stg-template-name { color: var(--text-primary); }
[data-theme="dark"] .stg-tbuilder { background: var(--app-surface); }
[data-theme="dark"] .stg-tbuilder-result { background: var(--c-100); }

/* ── Settings: Preset / Guide ── */
[data-theme="dark"] .stg-preset-builder { background: var(--c-100); }
[data-theme="dark"] .stg-preset-chip { background: var(--c-200); color: var(--text-secondary); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .stg-preset-chip.active { background: rgba(99,102,241,0.15); color: var(--primary-text); border-color: rgba(129,140,248,0.25); }
[data-theme="dark"] .stg-preset-custom { background: var(--c-100); color: var(--text-primary); }
[data-theme="dark"] .stg-preset-quick-btn { background: var(--c-200); color: var(--text-secondary); }
[data-theme="dark"] .stg-preset-quick-btn:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .stg-subdir-preview { background: var(--c-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .stg-guide { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .stg-guide-step { color: var(--text-primary); }
[data-theme="dark"] .stg-flow-guide { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .stg-flow-step { color: var(--text-primary); }

/* ── Settings: Time Preview ── */
[data-theme="dark"] .stg-time-preview { background: var(--c-100); }
[data-theme="dark"] .stg-time-preview-label { background: var(--c-200); color: var(--text-secondary); }

/* ── Settings: Backup ── */
[data-theme="dark"] .stg-backup-item { background: var(--c-100); }
[data-theme="dark"] .stg-backup-name { color: var(--text-primary); }
[data-theme="dark"] .stg-backup-tag { background: var(--c-200); color: var(--text-secondary); }

/* ── Settings: Actual Prices Table ── */
[data-theme="dark"] .stg-actual-price-table { background: var(--app-surface); }
[data-theme="dark"] .stg-add-row { background: var(--c-100); border-color: rgba(255,255,255,0.06); }

/* ── Settings: Empty & Error ── */
[data-theme="dark"] .stg-empty-state { background: var(--c-100); }
[data-theme="dark"] .stg-empty-title { color: var(--text-primary); }
[data-theme="dark"] .stg-error { background: rgba(239,68,68,0.08); }

/* ═══════════════════════════════════════════════════════════
   v1.2.1 AUDIT — History Page Dark Mode
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] .hist-search-box { background: var(--c-100); }
[data-theme="dark"] .hist-search-input { color: var(--text-primary); }
[data-theme="dark"] .hist-filter-bar { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .hist-filter-btn { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .hist-filter-btn:hover { background: var(--c-200); color: var(--primary-text); }
[data-theme="dark"] .hist-filter-btn.active { background: rgba(99,102,241,0.15); color: var(--primary-text); }
[data-theme="dark"] .hist-stat-value { color: var(--text-primary); }
[data-theme="dark"] .hist-item-action { color: var(--text-primary); }
[data-theme="dark"] .hist-detail-title { color: var(--text-primary); }
[data-theme="dark"] .hist-detail-info-v { color: var(--text-primary); }
[data-theme="dark"] .hist-detail-msg-box { color: var(--text-primary); background: var(--c-100); }
[data-theme="dark"] .hist-detail-file-name { color: var(--text-primary); }
[data-theme="dark"] .hist-detail-progress-pct { color: var(--text-primary); }

/* ── 로그 뷰어 다크 테마 ── */
[data-theme="dark"] .stg-log-select { background: var(--c-50); border-color: var(--c-300); color: var(--text-primary); }
[data-theme="dark"] .stg-log-levels { background: var(--c-50); }
[data-theme="dark"] .stg-log-level-btn.active { background: var(--c-300); color: var(--text-primary); }
[data-theme="dark"] .stg-card-icon.gray { background: var(--c-50); color: var(--text-secondary); }
[data-theme="dark"] .stg-card-icon.teal { background: rgba(94, 234, 212, 0.08); color: var(--success); }

/* ═══ Detail Panel v3 Dark ═══ */
[data-theme="dark"] .dp-header { background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-bg) 100%); border-bottom-color: var(--c-200); }
[data-theme="dark"] .dp-header--inv { background: linear-gradient(180deg, rgba(94, 234, 212, 0.06) 0%, var(--app-bg) 100%); border-bottom-color: rgba(94, 234, 212, 0.10); }
[data-theme="dark"] .dp-type--order { background: rgba(99,102,241,.15); color: var(--primary-text); }
[data-theme="dark"] .dp-type--inv { background: rgba(22,101,52,.25); color: var(--success); }
[data-theme="dark"] .dp-act-btn { background: var(--c-100); border-color: var(--c-200); color: var(--c-500); }
[data-theme="dark"] .dp-act-btn:hover { border-color: rgba(129,140,248,.3); color: var(--primary-text); }
[data-theme="dark"] .dp-act--danger:hover { border-color: rgba(239,68,68,.3); color: var(--error); }
[data-theme="dark"] .dp-amount { color: var(--text-primary); }
[data-theme="dark"] .dp-refund { color: var(--error); }
[data-theme="dark"] .dp-id-row { background: var(--app-surface); }
[data-theme="dark"] .dp-id-label { color: var(--c-500); }
[data-theme="dark"] .dp-id-num { color: var(--text-secondary); }
[data-theme="dark"] .dp-id-copy { color: var(--c-500); }
[data-theme="dark"] .dp-id-copy:hover { color: var(--primary-text); background: rgba(99,102,241,.12); }
[data-theme="dark"] .dp-dates { color: var(--c-500); }
[data-theme="dark"] .dp-date-sep { color: var(--c-400); }
[data-theme="dark"] .dp-tag--muted { background: var(--c-100); color: var(--text-secondary); }
[data-theme="dark"] .dp-tag--link { background: rgba(99,102,241,.15); color: var(--primary-text); }
[data-theme="dark"] .dp-tag--link:hover { background: rgba(99,102,241,.25); }
[data-theme="dark"] .dp-tag--쿠팡 { background: rgba(217,119,6,.15); color: var(--warning); }
[data-theme="dark"] .dp-tag--g마켓 { background: rgba(22,101,52,.2); color: var(--success); }
[data-theme="dark"] .dp-tag--옥션 { background: rgba(157,23,77,.2); color: var(--accent-warm); }
[data-theme="dark"] .dp-tag--네이버 { background: rgba(6,95,70,.2); color: var(--success); }
[data-theme="dark"] .dp-tag--11번가 { background: rgba(153,27,27,.2); color: var(--error); }
[data-theme="dark"] .dp-tag:not([class*="--쿠팡"]):not([class*="--g마켓"]):not([class*="--옥션"]):not([class*="--네이버"]):not([class*="--11번가"]):not([class*="--muted"]):not([class*="--link"]):not([class*="--sm"]) {
  background: var(--c-100); color: var(--text-secondary);
}
[data-theme="dark"] .dp-tracking-num { color: var(--text-primary); }
[data-theme="dark"] .dp-body { background: var(--app-bg); }
[data-theme="dark"] .dp-section { border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .dp-section--meta { background: var(--app-bg); }
[data-theme="dark"] .dp-sec-head { color: var(--text-secondary); border-bottom-color: var(--c-200); }
[data-theme="dark"] .dp-sub-head { color: var(--c-400); }
[data-theme="dark"] .dp-person--unified { background: var(--app-surface); border-color: var(--c-200); }
[data-theme="dark"] .dp-person--buyer { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.2); }
[data-theme="dark"] .dp-person--receiver { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.2); }
[data-theme="dark"] .dp-person-role { color: var(--c-500); }
[data-theme="dark"] .dp-person--buyer .dp-person-role { color: var(--warning); }
[data-theme="dark"] .dp-person--receiver .dp-person-role { color: var(--info); }
[data-theme="dark"] .dp-person-name { color: var(--text-primary); }
[data-theme="dark"] .dp-person-phone { color: var(--text-secondary); }
[data-theme="dark"] .dp-person-arrow { color: var(--c-400); }
[data-theme="dark"] .dp-product-list { border-color: var(--c-200); }
[data-theme="dark"] .dp-prod { border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .dp-prod-name { color: var(--text-primary); }
[data-theme="dark"] .dp-prod-qty { color: var(--primary-text); }
[data-theme="dark"] .dp-prod-opt { color: var(--text-secondary); }
[data-theme="dark"] .dp-price { color: var(--primary-text); }
[data-theme="dark"] .dp-price--sub { color: var(--c-500); }
[data-theme="dark"] .dp-price--actual { color: var(--success); }
[data-theme="dark"] .dp-ret-badge { background: rgba(239,68,68,.12); color: var(--error); }
[data-theme="dark"] .dp-ret-btn { color: var(--error); border-color: rgba(239,68,68,.25); }
[data-theme="dark"] .dp-ret-btn:hover { background: rgba(239,68,68,.1); }
[data-theme="dark"] .dp-ret-item { border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .dp-ret-type--return { background: rgba(239,68,68,.12); color: var(--error); }
[data-theme="dark"] .dp-ret-type--cancel { background: rgba(217,119,6,.12); color: var(--warning); }
[data-theme="dark"] .dp-ret-type--exchange { background: rgba(37,99,235,.12); color: var(--info); }
[data-theme="dark"] .dp-ret-info { color: var(--text-primary); }
[data-theme="dark"] .dp-ret-del { color: var(--c-400); }
[data-theme="dark"] .dp-ret-del:hover { color: var(--error); background: rgba(239,68,68,.1); }
[data-theme="dark"] .dp-ret-dates { color: var(--c-500); }
[data-theme="dark"] .dp-ret-reason { color: var(--text-secondary); }
[data-theme="dark"] .dp-addr-block { background: var(--app-surface); border-color: var(--c-200); }
[data-theme="dark"] .dp-zip { color: var(--text-secondary); }
[data-theme="dark"] .dp-addr { color: var(--text-primary); }
[data-theme="dark"] .dp-memo { background: rgba(217,119,6,.08); color: var(--warning); border-color: rgba(217,119,6,.2); }
[data-theme="dark"] .dp-tracking-card { background: rgba(94, 234, 212, 0.06); border-color: rgba(94, 234, 212, 0.10); }
[data-theme="dark"] .dp-courier-badge { background: rgba(22,101,52,.25); color: var(--success); }
[data-theme="dark"] .dp-track-btn { color: var(--info); border-color: rgba(37,99,235,.25); }
[data-theme="dark"] .dp-track-btn:hover { background: rgba(37,99,235,.1); }
[data-theme="dark"] .dp-count { background: rgba(99,102,241,.15); color: var(--primary-text); }
[data-theme="dark"] .dp-link-card { background: var(--app-surface); border-color: var(--c-200); }
[data-theme="dark"] .dp-link-card:hover { background: var(--c-100); border-color: rgba(129,140,248,.25); }
[data-theme="dark"] .dp-link-num { color: var(--text-primary); }
[data-theme="dark"] .dp-link-ext { color: var(--c-500); }
[data-theme="dark"] .dp-link-ext:hover { color: var(--info); background: rgba(37,99,235,.1); }
[data-theme="dark"] .dp-link-amount { color: var(--primary-text); }
[data-theme="dark"] .dp-link-sub { color: var(--text-secondary); }
[data-theme="dark"] .dp-expand-btn { color: var(--primary-text); border-color: rgba(99,102,241,.3); }
[data-theme="dark"] .dp-expand-btn:hover { background: rgba(99,102,241,.08); }
[data-theme="dark"] .dp-meta-k { color: var(--c-400); }
[data-theme="dark"] .dp-meta-v { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   Dark Mode Transition
   테마 전환 시 부드러운 애니메이션
   ═══════════════════════════════════════════════════════════ */

/* 전환 대상: 배경, 텍스트, 테두리, 그림자 */
*,
*::before,
*::after {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke;
  transition-duration: 0s;
  transition-timing-function: ease;
}

/* 테마 전환 활성화 시 (JS에서 .theme-transitioning 클래스 토글) */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition-duration: 0.25s !important;
}


:root {
  font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--c-900);
  background: #f5f7fb;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-weight: var(--font-normal);
  min-width: 1100px;
}

* { box-sizing: border-box; }

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

.app-shell {
  display: grid;
  grid-template-columns: 96px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #0b2a5b;
  color: var(--c-200);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-top {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  letter-spacing: 0.5px;
}

.sidebar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.navitem {
  width: 78px;
  padding: 10px 8px;
  border-radius: var(--r-md);
  color: var(--c-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.navitem.active {
  background: rgba(255,255,255,0.14);
}

.navicon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
}

.navlabel {
  font-size: var(--text-sm);
  opacity: 0.92;
}

.main {
  padding: 18px;
  position: relative;
}

.card {
  background: var(--app-surface);
  border-radius: var(--r-md);
  border: 1px solid var(--c-200);
  box-shadow: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.card:hover {
  border-color: var(--c-300);
}

.commandbar {
  display: flex;
  gap: 10px;
  padding: 12px;
  align-items: center;
}

.commandbar input {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-200);
}

.btn {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-300);
  background: var(--app-surface);
  cursor: pointer;
  font-weight: var(--font-medium);
  color: var(--c-900);
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}

.btn:hover {
  background: var(--c-50);
  border-color: var(--c-300);
}

.btn:active {
  transform: translateY(0.5px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn.primary {
  /* Primary is kept neutral (less saturated, less "blue") */
  background: var(--c-100);
  color: var(--c-900);
  border-color: var(--c-300);
}

.btn.primary:hover {
  background: var(--c-200);
  border-color: var(--c-400);
}

.btn:focus-visible {
  outline: 2px solid rgba(148, 163, 184, 0.9);
  outline-offset: 2px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  margin-top: 14px;
}

.tablewrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  white-space: nowrap;
  text-align: left;
  font-size: var(--text-base);
}

tr:hover { background: var(--c-50); }

tr.selected { background: var(--primary-soft); }

.pager {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  align-items: center;
  border-top: 1px solid #eef2f7;
}

.tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
}

.tab {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.tab.active { background: var(--primary-soft); color: var(--info-deep); font-weight: var(--font-semibold); }

.inspector {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.inspector-body {
  padding: 12px;
  overflow: auto;
  font-size: var(--text-base);
}

.kv {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px 10px;
}

.small {
  color: var(--c-500);
  font-size: var(--text-sm);
}

.badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  border: 1px solid var(--c-300);
}

.badge.ok { background: var(--success-bg); border-color: #a7f3d0; color: var(--success-text); }

.badge.warn { background: var(--warning-bg); border-color: var(--warning-bg); color: var(--warning-text); }

/* ---------------- Home ("시안 복제" 톤) ---------------- */

.home-wrap {
  position: relative;
  min-height: calc(100vh - 36px);
}

.home-bg {
  position: absolute;
  inset: -18px;
  background: radial-gradient(1200px 420px at 50% 0%, rgba(220, 240, 255, 0.95), rgba(245, 247, 251, 0.85) 55%, #f5f7fb 100%);
  z-index: 0;
}

.home-bg:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(6px 6px at 12% 76%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(8px 8px at 92% 78%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(5px 5px at 86% 22%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
  filter: blur(0.2px);
  opacity: 0.85;
}

.home-inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 0 28px;
}

.brand-toggle {
  margin: 0 auto;
  width: fit-content;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(209, 213, 219, 0.8);
  border-radius: var(--r-full);
  padding: 6px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  box-shadow: none;
}

.bt-btn {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-weight: var(--font-semibold);
  color: var(--c-900);
}

.bt-btn.active {
  background: var(--info-bg);
  color: #1e3a8a;
}

.bt-divider {
  opacity: 0.65;
  font-weight: var(--font-semibold);
}

.headline {
  text-align: center;
  margin-top: 22px;
  margin-bottom: 22px;
}

.headline-text {
  font-size: var(--text-3xl);
  font-weight: 750;
  letter-spacing: -0.3px;
}

.headline-underline {
  width: 220px;
  height: 4px;
  border-radius: var(--r-full);
  margin: 10px auto 0;
  background: rgba(37, 99, 235, 0.65);
}

.home-section {
  margin-top: 18px;
}

.section-title {
  font-weight: 650;
  margin: 12px 0;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.quick-card {
  border: 2px solid rgba(148, 163, 184, 0.55);
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--r-lg);
  padding: 24px 18px;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.quick-card:hover {
  border-color: rgba(148, 163, 184, 0.75);
  background: rgba(255, 255, 255, 0.92);
}

.quick-label {
  font-weight: var(--font-bold);
  font-size: var(--text-xl);
}

.pill-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.pill {
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-full);
  padding: 14px 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  cursor: pointer;
  font-weight: var(--font-semibold);
}

.pill:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(148, 163, 184, 0.75);
}

.home-card {
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.log-list {
  padding: 10px 0;
}

.log-row {
  display: grid;
  grid-template-columns: 14px 64px 120px 1fr;
  gap: 10px;
  padding: 12px 16px;
  align-items: center;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  cursor: pointer;
}

.log-row:first-child { border-top: none; }

.dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--c-400);
}

.dot.ok { background: #16a34a; }

.dot.fail { background: var(--error-deep); }

.dot.warn { background: var(--warning); }

.log-status {
  font-weight: 650;
}

.log-ts {
  color: var(--c-500);
  font-size: var(--text-base);
}

.log-title {
  color: var(--c-900);
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .home-inner { padding: 18px 12px 28px; }
  .quick-grid { grid-template-columns: 1fr; }
  .pill-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Global Tooltip (JS-driven, position:fixed — overflow 무시)
   ══════════════════════════════════════════════════════════════════ */

#dao-tooltip {
  position: fixed;
  z-index: 2147483647;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  color: var(--c-100);
  font-size: 11.5px;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12);
}

#dao-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════
   Global Input Focus — 브라우저 기본 파란색 아웃라인 제거
   ══════════════════════════════════════════════════════════════════ */

input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible,
button:focus {
  outline: none !important;
}

button:focus-visible {
  outline: 2px solid rgba(109, 92, 255, .5);
  outline-offset: 2px;
}



/* =========================================================
   App Theme Tokens v2 — Warm & Soft Design System
   모든 페이지에서 공통으로 사용하는 디자인 토큰
   ========================================================= */
:root {
  /* ══════════════════════════════════════════
     1. COLOR TOKENS
     ══════════════════════════════════════════ */

  /* ── Warm Neutral Scale (stone) ── */
  --c-50:  #fafaf9;
  --c-100: #f5f5f4;
  --c-150: #efedeb;
  --c-200: #e7e5e4;
  --c-300: #d6d3d1;
  --c-400: #a8a29e;
  --c-500: #78716c;
  --c-600: #57534e;
  --c-700: #44403c;
  --c-800: #292524;
  --c-900: #1c1917;

  /* ── Base Surface ── */
  --app-bg: #f7f6f4;
  --app-surface: #ffffff;
  --app-surface-raised: #fdfcfb;
  --app-surface-glass: rgba(255, 255, 255, 0.72);
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.88);

  /* ── Brand / Primary ── */
  --primary: #6d5cff;
  --primary-deep: #5b4de6;
  --primary-soft: rgba(109, 92, 255, 0.10);
  --primary-glow: rgba(109, 92, 255, 0.15);
  --primary-gradient: linear-gradient(135deg, #6d5cff, #8b6cf0);
  --primary-text: #4a3db8;
  --accent-warm: #e86ca0;
  /* app-prefixed aliases (기존 호환) */
  --app-primary: #5b4de6;
  --app-primary-ink: #4a3db8;
  --app-primary-soft: rgba(109, 92, 255, 0.10);
  --app-primary-soft-2: rgba(109, 92, 255, 0.10);
  --app-cta: #5b4de6;
  --app-cta-hover: #4f42cc;
  --app-cta-ring: rgba(109, 92, 255, 0.20);

  /* ── Primary Alpha Scale (border / glow / overlay용) ── */
  --primary-a02: rgba(109, 92, 255, 0.02);
  --primary-a03: rgba(109, 92, 255, 0.03);
  --primary-a06: rgba(109, 92, 255, 0.06);
  --primary-a08: rgba(109, 92, 255, 0.08);
  --primary-a12: rgba(109, 92, 255, 0.12);
  /* --primary-soft  = rgba(109, 92, 255, 0.10) — 위에 정의됨 */
  /* --primary-glow  = rgba(109, 92, 255, 0.15) — 위에 정의됨 */
  /* --app-cta-ring  = rgba(109, 92, 255, 0.20) — 위에 정의됨 */
  --primary-a30: rgba(109, 92, 255, 0.30);
  --primary-a40: rgba(109, 92, 255, 0.40);

  /* ── Text ── */
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #a8a29e;
  --text-faint: #d6d3d1;
  /* app-prefixed aliases */
  --app-text: #1c1917;
  --app-text-2: rgba(87, 83, 78, 0.92);
  --app-text-3: rgba(168, 162, 158, 0.92);

  /* ── Semantic Colors ── */
  --success: #10b981;
  --success-deep: #059669;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --error: #ef4444;
  --error-deep: #dc2626;
  --error-bg: #fef2f2;
  --error-text: #991b1b;
  --danger: #ef4444;
  --danger-deep: #dc2626;
  --warning: #f59e0b;
  --warning-deep: #d97706;
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --info: #6d5cff;
  --info-deep: #5b4de6;
  --info-bg: #f0eeff;
  --info-text: #4a3db8;

  /* ── Neutral Scale (기존 slate 호환) ── */
  --slate-50:  var(--c-50);
  --slate-100: var(--c-100);
  --slate-200: var(--c-200);
  --slate-300: var(--c-300);
  --slate-400: var(--c-400);
  --slate-500: var(--c-500);
  --slate-600: var(--c-600);
  --slate-700: var(--c-700);
  --slate-800: var(--c-800);
  --slate-900: var(--c-900);

  /* ── Border ── */
  --border-light: rgba(28, 25, 23, 0.06);
  --border-medium: var(--c-200);
  --border-strong: var(--c-300);
  --app-border: rgba(28, 25, 23, 0.08);
  --app-border-2: rgba(28, 25, 23, 0.05);

  /* ══════════════════════════════════════════
     2. TYPOGRAPHY TOKENS
     ══════════════════════════════════════════ */

  /* ── Font Stacks ── */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-num: 'Consolas', 'D2Coding', 'Menlo', 'SF Mono', monospace;
  --font-code: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Font Sizes ── */
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base: 13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  /* ── Font Weights ── */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* ── Line Heights ── */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ══════════════════════════════════════════
     3. SPACING TOKENS (4px base)
     ══════════════════════════════════════════ */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ══════════════════════════════════════════
     4. BORDER RADIUS
     ══════════════════════════════════════════ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;
  /* app-prefixed aliases */
  --app-r-sm: 10px;
  --app-r-md: 14px;
  --app-r-lg: 18px;
  --app-r-xl: 26px;

  /* ══════════════════════════════════════════
     5. SHADOW TOKENS (warm)
     ══════════════════════════════════════════ */
  --sh-subtle: 0 1px 3px rgba(28, 25, 23, 0.05);
  --sh-card: 0 4px 20px rgba(28, 25, 23, 0.07), 0 1px 3px rgba(28, 25, 23, 0.04);
  --sh-elevated: 0 8px 32px rgba(28, 25, 23, 0.10), 0 2px 6px rgba(28, 25, 23, 0.04);
  --sh-float: 0 12px 40px rgba(28, 25, 23, 0.14), 0 4px 12px rgba(28, 25, 23, 0.05);
  --sh-glow: 0 4px 20px rgba(109, 92, 255, 0.20), 0 8px 32px rgba(109, 92, 255, 0.10);
  --sh-inner: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  --sh-modal: 0 -8px 40px rgba(28, 25, 23, 0.12);
  /* app-prefixed aliases */
  --app-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --app-shadow-md: 0 10px 24px rgba(28, 25, 23, 0.07);
  --app-shadow-lg: 0 16px 44px rgba(28, 25, 23, 0.09);
  --app-shadow-xl: 0 30px 90px rgba(28, 25, 23, 0.11);

  /* ══════════════════════════════════════════
     6. MOTION TOKENS
     ══════════════════════════════════════════ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 0.12s;
  --normal: 0.2s;
  --slow: 0.35s;
  --app-ease: cubic-bezier(.2,.8,.2,1);

  /* ══════════════════════════════════════════
     7. COMPONENT TOKENS
     공통 컴포넌트의 기본값을 정의 (2단계 작업의 기반)
     ══════════════════════════════════════════ */

  /* ── Buttons ── */
  --btn-h-sm: 30px;
  --btn-h-md: 36px;
  --btn-h-lg: 42px;
  --btn-r: var(--r-sm);
  --btn-font: var(--text-base);
  --btn-weight: var(--font-bold);

  /* ── Inputs ── */
  --input-h: 38px;
  --input-r: var(--r-sm);
  --input-border: var(--c-200);
  --input-bg: var(--app-surface);
  --input-focus-ring: rgba(109, 92, 255, 0.20);

  /* ── Cards ── */
  --card-r: var(--r-md);
  --card-border: var(--border-light);
  --card-shadow: var(--sh-card);
  --card-bg: var(--app-surface);

  /* ── Tables ── */
  --table-header-bg: var(--c-50);
  --table-header-color: var(--text-muted);
  --table-row-hover: rgba(109, 92, 255, 0.04);
  --table-border: var(--c-100);

  /* ── Modals ── */
  --modal-overlay: rgba(28, 25, 23, 0.40);
  --modal-r: var(--r-xl);
  --modal-shadow: var(--sh-float);

  /* ══════════════════════════════════════════
     8. BACKWARD COMPATIBILITY ALIASES
     기존 --ord- prefix 유지
     ══════════════════════════════════════════ */
  --ord-glass-bg: var(--glass-bg);
  --ord-glass-bg-strong: var(--glass-bg-strong);
  --ord-glass-border: var(--glass-border);
  --ord-primary: var(--primary);
  --ord-primary-deep: var(--primary-deep);
  --ord-primary-glow: var(--primary-glow);
  --ord-text-primary: var(--text-primary);
  --ord-text-secondary: var(--text-secondary);
  --ord-text-muted: var(--text-muted);
  --ord-r-md: var(--r-md);
  --ord-r-lg: var(--r-lg);
  --ord-r-xl: var(--r-xl);
  --ord-r-2xl: var(--r-2xl);
  --ord-r-full: var(--r-full);
  --ord-sh-elevated: var(--sh-elevated);
  --ord-sh-float: var(--sh-float);
  --ord-sh-inner: var(--sh-inner);
  --ord-ease: var(--ease);
  --ord-fast: var(--fast);
}
/* =========================================================
   Shared Utility Patterns
   ========================================================= */
/* ── Modal Overlay (공통) ── */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ── Shared Animations ── */
@keyframes appDropdown {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes appFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes appSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes appSpin {
  to { transform: rotate(360deg); }
}
.app-spin { animation: appSpin 1s linear infinite; }
/* =========================================================
   Shared Components
   ========================================================= */
/* -------- AppSelect -------- */
.app-select-wrap{ position: relative; display: inline-flex; }
.app-select--sm .app-select-btn{
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
}
.app-select--sm .app-select-menu{ top: 40px; border-radius: var(--r-md); }
.app-select-menu--sm{ border-radius: var(--r-md); }
.app-select-btn{
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: var(--r-md);
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), var(--c-50));
  border: 1.5px solid var(--c-200);
  color: var(--app-text);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all .2s var(--app-ease);
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: var(--sh-subtle), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.app-select-btn:hover{
  background: linear-gradient(to bottom, #fff, var(--c-50));
  border-color: rgba(109, 92, 255, 0.25);
  box-shadow: 0 2px 8px rgba(109, 92, 255, 0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
  transform: translateY(-1px);
}
.app-select-btn:active{ transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.06) inset; }
.app-select-btn.is-open{
  background: #fff;
  border-color: rgba(109, 92, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(109, 92, 255, 0.08), 0 4px 12px rgba(109, 92, 255, 0.06);
  outline: none !important;
}
.app-select-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}
.app-select-left{ display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.app-select-icon{ color: var(--app-text-3); display: inline-flex; }
.app-select-label{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-select-right{ display: inline-flex; align-items: center; color: var(--app-text-3); transition: transform .25s var(--ease), color .2s; }
.app-select-btn:hover .app-select-right{ color: var(--primary); }
.app-select-btn.is-open .app-select-right{ transform: rotate(180deg); color: var(--primary); }
.app-select-menu{
  position: absolute;
  top: 44px;
  left: 0;
  min-width: 100%;
  width: max-content;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--app-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-float);
  padding: 6px;
  z-index: 99999 !important;
  transform-origin: top center;
  animation: appDropdown .2s var(--ease);
}
.app-select-menu-label{
  padding: 8px 12px 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-extrabold);
  color: var(--app-text-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  margin-bottom: 4px;
}
.app-select-item{
  width: 100%;
  padding: 10px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--app-text-2);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  white-space: nowrap;
  transition: background .12s var(--app-ease), color .12s var(--app-ease);
  text-align: left;
}
.app-select-item:hover{ background: rgba(28, 25, 23, 0.04); }
.app-select-item.is-selected{
  background: var(--primary-soft);
  color: var(--primary-text);
}
.app-select-check{ color: var(--primary); }
/* -------- AppSegmented -------- */
.app-seg{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--app-surface-glass);
  border: 1px solid var(--app-border-2);
  box-shadow: var(--app-shadow-sm);
}
.app-seg-btn{
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: var(--font-black);
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s var(--app-ease), border-color .14s var(--app-ease), box-shadow .14s var(--app-ease), transform .12s var(--app-ease);
}
.app-seg-btn:hover{ background: rgba(28, 25, 23, 0.04); }
.app-seg-btn:active{ transform: translateY(1px); }
.app-seg-btn.is-active{
  background: var(--primary-soft);
  color: var(--primary-text);
  border-color: rgba(109, 92, 255, 0.18);
  box-shadow: var(--app-shadow-md);
}
/* -------- EmptyState -------- */
.app-empty{
  width: 100%;
  min-height: 200px;
  border-radius: var(--r-lg);
  border: 1px solid var(--app-border-2);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.app-empty-inner{
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.app-empty-icon{
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  border: 1px solid rgba(109, 92, 255, 0.18);
  color: var(--primary);
  box-shadow: 0 12px 24px rgba(109, 92, 255, 0.12);
}
.app-empty-title{ font-size: 15px; font-weight: var(--font-black); color: var(--text-primary); }
.app-empty-desc{ font-size: var(--text-base); font-weight: var(--font-bold); color: var(--app-text-2); line-height: var(--leading-relaxed); }
.app-empty-action{
  margin-top: 6px;
  height: var(--btn-h-lg);
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(109, 92, 255, 0.22);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--text-base);
  font-weight: var(--font-black);
  cursor: pointer;
  transition: background .14s var(--app-ease), transform .12s var(--app-ease), box-shadow .14s var(--app-ease);
}
.app-empty-action:hover{ background: rgba(109, 92, 255, 0.14); box-shadow: var(--app-shadow-md); }
.app-empty-action:active{ transform: translateY(1px); }
/* =========================================================
   Page Layout Tokens — 페이지간 통일된 레이아웃 값
   ========================================================= */
:root {
  /* ── Page Header Card ── */
  --page-hd-bg: var(--app-surface);
  --page-hd-border: var(--c-150);
  --page-hd-radius: var(--r-md);
  --page-hd-pad: 18px 20px;
  --page-hd-mb: 14px;
  --page-hd-shadow: var(--sh-subtle);

  /* ── Page Header Icon ── */
  --page-icon-size: 36px;
  --page-icon-r: var(--r-sm);

  /* ── Page Header Title ── */
  --page-title-size: var(--text-lg);
  --page-title-weight: var(--font-extrabold);
  --page-title-color: var(--c-900);
  --page-sub-size: var(--text-xs);
  --page-sub-color: var(--c-400);

  /* ── Page Content ── */
  --page-gap: 14px;
  --page-content-r: var(--r-md);

  /* ── Toolbar / Controls ── */
  --toolbar-bg: var(--app-surface);
  --toolbar-border: var(--c-150);
  --toolbar-r: var(--r-md);
  --toolbar-pad: 14px 18px;
  --toolbar-gap: 12px;
}
/* =========================================================
   CalculatorPage Styles  (.calc- prefix)
   ========================================================= */

.calc-page {
  padding: 24px;
  max-width: 960px;
  margin: 0 auto;
}

/* ── Header ───────────────────────────────────────────── */

.calc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.calc-header-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-soft);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.calc-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.calc-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 3px 0 0 0;
}

/* ── Tab Bar ──────────────────────────────────────────── */

.calc-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--c-200);
  margin-bottom: 20px;
}

.calc-tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: all 0.15s;
  font-family: inherit;
  border-radius: 6px 6px 0 0;
}

.calc-tab-btn:hover {
  color: var(--text-secondary);
  background: var(--c-100);
}

.calc-tab-btn.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
  background: transparent;
}

/* ── Mode Toggle (오일스테인 내부) ───────────────────── */

.calc-mode-toggle {
  display: flex;
  background: var(--c-100);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
  margin-bottom: 16px;
  gap: 2px;
}

.calc-mode-btn {
  padding: 8px 22px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.calc-mode-btn.active {
  background: var(--app-surface);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ── Body (two-column grid) ───────────────────────────── */

.calc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

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

/* ── Card ─────────────────────────────────────────────── */

.calc-card {
  background: var(--app-surface);
  border: 1px solid var(--c-200);
  border-radius: 14px;
  padding: 20px;
}

.calc-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
}

/* ── Input Fields ─────────────────────────────────────── */

.calc-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.calc-label-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.calc-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-200);
  border-radius: 8px;
  background: var(--c-50);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.calc-input:focus {
  border-color: var(--primary);
  background: var(--app-surface);
}

.calc-input-lg {
  height: 48px;
  font-size: 17px;
}

.calc-input-row {
  display: flex;
  gap: 8px;
}

.calc-input-row .calc-input {
  flex: 1;
  min-width: 0;
}

/* Unit toggle (평 / m²) */
.calc-unit-toggle {
  display: flex;
  border: 1px solid var(--c-200);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.calc-unit-btn {
  padding: 0 13px;
  height: 40px;
  border: none;
  background: var(--c-50);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  border-right: 1px solid var(--c-200);
  font-family: inherit;
}

.calc-unit-btn:last-child { border-right: none; }

.calc-unit-btn.active {
  background: var(--primary);
  color: #fff;
}

/* Hint */
.calc-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.calc-hint-box {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  background: var(--c-100);
  border-radius: 7px;
  padding: 8px 10px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.calc-hint-box strong {
  color: var(--text-primary);
}

.calc-hint-box svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-muted);
}

/* Wood type presets */
.calc-wood-presets {
  display: flex;
  gap: 6px;
}

.calc-wood-btn {
  flex: 1;
  height: 34px;
  border: 1px solid var(--c-200);
  border-radius: 7px;
  background: var(--c-50);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.calc-wood-btn:hover {
  border-color: var(--primary);
  color: var(--primary-text);
}

.calc-wood-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-text);
  font-weight: 600;
}

/* Coats selector */
.calc-coats {
  display: flex;
  gap: 8px;
}

.calc-coat-btn {
  flex: 1;
  height: 38px;
  border: 1px solid var(--c-200);
  border-radius: 8px;
  background: var(--c-50);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.calc-coat-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-text);
  font-weight: 600;
}

/* Presets (소득세용 빠른 입력) */
.calc-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.calc-preset-btn {
  padding: 7px 14px;
  border: 1px solid var(--c-200);
  border-radius: 8px;
  background: var(--c-50);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.calc-preset-btn.active,
.calc-preset-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-text);
}

/* Reset button */
.calc-reset-btn {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--c-200);
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.calc-reset-btn:hover {
  background: var(--c-100);
  color: var(--text-secondary);
}

/* ── Empty state ──────────────────────────────────────── */

.calc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 0;
  color: var(--text-muted);
  text-align: center;
}

.calc-empty-icon { opacity: 0.2; }

.calc-empty p { font-size: 13px; margin: 0; }

/* ── Result ───────────────────────────────────────────── */

.calc-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calc-result-main {
  background: var(--primary-soft);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calc-result-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.7;
}

.calc-result-value {
  font-size: 38px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin: 2px 0;
}

.calc-result-value-md {
  font-size: 28px;
}

.calc-result-unit { font-size: 18px; font-weight: 600; }

.calc-result-formula { font-size: 12px; color: var(--primary-text); opacity: 0.6; }

.calc-result-sub {
  background: var(--c-100);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calc-result-sub-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.calc-result-sub-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Purchase Guide (오일스테인) ──────────────────────── */

.calc-guide {
  background: var(--c-50);
  border: 1px solid var(--c-200);
  border-radius: 10px;
  padding: 14px 16px;
}

.calc-guide-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}

.calc-guide-row {
  display: grid;
  grid-template-columns: 90px 40px 50px 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--c-150);
}

.calc-guide-row:last-child { border-bottom: none; }

.calc-guide-label { font-weight: 600; color: var(--text-secondary); }
.calc-guide-qty   { font-weight: 700; color: var(--text-primary); text-align: right; }
.calc-guide-total { color: var(--text-muted); }
.calc-guide-extra { font-size: 12px; color: var(--text-muted); text-align: right; }

/* ── Reference card ───────────────────────────────────── */

.calc-ref-card {
  background: var(--c-50);
  border: 1px solid var(--c-200);
  border-radius: 12px;
  padding: 16px 20px;
}

.calc-ref-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.calc-ref-rows { display: flex; flex-direction: column; gap: 0; }

.calc-ref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-150);
  gap: 8px;
}

.calc-ref-row:last-child { border-bottom: none; }

.calc-ref-row > span:first-child { color: var(--text-secondary); }

.calc-ref-vals {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.calc-ref-val {
  font-weight: 600;
  color: var(--primary-text);
  min-width: 80px;
  text-align: right;
}

.calc-ref-pyeong {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 80px;
  text-align: right;
}

.calc-ref-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 0 0 0;
  line-height: 1.5;
}

/* ── Tax table (소득세 누진세율표) ───────────────────── */

.calc-tax-panel { display: flex; flex-direction: column; gap: 0; }

.calc-tax-table {
  display: flex;
  flex-direction: column;
}

.calc-tax-thead {
  display: grid;
  grid-template-columns: 1fr 60px 70px;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1.5px solid var(--c-200);
  margin-bottom: 2px;
}

.calc-tax-row {
  display: grid;
  grid-template-columns: 1fr 60px 70px;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 6px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.calc-tax-row.active {
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 500;
}

.calc-tax-row .r { text-align: right; }
.calc-tax-row .mono { font-variant-numeric: tabular-nums; }

.calc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  float: right;
}

.calc-badge.good {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.calc-badge.dim {
  background: var(--c-100);
  color: var(--text-muted);
}

/* ── Dark mode ────────────────────────────────────────── */

[data-theme="dark"] .calc-tab-bar { border-color: var(--c-700); }
[data-theme="dark"] .calc-tab-btn:hover { background: var(--c-800); }

[data-theme="dark"] .calc-card { border-color: var(--c-700); }

[data-theme="dark"] .calc-input {
  background: var(--c-800);
  border-color: var(--c-700);
  color: var(--text-primary);
}

[data-theme="dark"] .calc-input:focus {
  background: var(--c-800);
  border-color: var(--primary);
}

[data-theme="dark"] .calc-unit-toggle { border-color: var(--c-700); }

[data-theme="dark"] .calc-unit-btn {
  background: var(--c-800);
  border-color: var(--c-700);
}

[data-theme="dark"] .calc-coat-btn,
[data-theme="dark"] .calc-preset-btn,
[data-theme="dark"] .calc-wood-btn {
  background: var(--c-800);
  border-color: var(--c-700);
}

[data-theme="dark"] .calc-guide {
  background: var(--c-800);
  border-color: var(--c-700);
}

[data-theme="dark"] .calc-guide-row { border-color: var(--c-700); }

[data-theme="dark"] .calc-ref-card {
  background: var(--c-800);
  border-color: var(--c-700);
}

[data-theme="dark"] .calc-ref-row { border-color: var(--c-700); }

[data-theme="dark"] .calc-mode-toggle { background: var(--c-800); }

[data-theme="dark"] .calc-mode-btn.active { background: var(--c-700); }

[data-theme="dark"] .calc-result-sub { background: var(--c-800); }

[data-theme="dark"] .calc-reset-btn { border-color: var(--c-700); }
[data-theme="dark"] .calc-reset-btn:hover { background: var(--c-700); }

[data-theme="dark"] .calc-hint-box { background: var(--c-800); }

[data-theme="dark"] .calc-tax-row.active { background: rgba(109, 92, 255, 0.15); }

[data-theme="dark"] .calc-badge.dim { background: var(--c-700); }
/* ═══════════════════════════════════════════════════════════════
   CALENDAR PAGE STYLES
   ═══════════════════════════════════════════════════════════════ */
.cal-page { padding: 0; }

/* Header */
.cal-header {
  background: var(--page-hd-bg); border: 1px solid var(--page-hd-border); border-radius: var(--page-hd-radius);
  padding: var(--page-hd-pad); margin-bottom: var(--page-hd-mb); box-shadow: var(--page-hd-shadow);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cal-hd-left { display: flex; align-items: center; gap: 10px; }
.cal-hd-icon {
  color: var(--primary); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cal-hd-title { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-900); margin: 0; letter-spacing: -.02em; }
.cal-hd-sub { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.cal-hd-actions { display: flex; align-items: center; gap: 8px; }

.cal-month-nav { display: flex; align-items: center; gap: 4px; }
.cal-month-nav button {
  width: 28px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--c-150);
  background: var(--app-surface); color: var(--c-600); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .15s;
}
.cal-month-nav button:hover { color: #0ea5e9; border-color: #bae6fd; }
.cal-month-label { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); min-width: 100px; text-align: center; }

.cal-btn-today {
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 5px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--c-150); background: var(--app-surface); color: var(--c-600);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.cal-btn-today:hover { color: #0ea5e9; border-color: #bae6fd; background: var(--info-bg); }

.cal-btn-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--c-150);
  background: var(--app-surface); color: var(--c-500); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.cal-btn-icon:hover { color: #0ea5e9; border-color: #bae6fd; }

/* Summary */
.cal-summary {
  display: flex; gap: 12px; margin-bottom: 12px;
}
.cal-sum-item {
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-md);
  padding: 12px 18px; flex: 1;
}
.cal-sum-item.accent { border-color: #bae6fd; background: var(--info-bg); }
.cal-sum-lb { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); display: block; }
.cal-sum-val { font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--c-800); }

/* Upcoming settlements */
.cal-upcoming {
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-md);
  padding: 14px 18px; margin-bottom: 12px;
}
.cal-upcoming-title { font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--c-800); margin-bottom: 10px; }
.cal-upcoming-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-upcoming-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--c-50); border-radius: var(--r-sm); font-size: var(--text-sm);
}
.cal-upcoming-dot { width: 8px; height: 8px; border-radius: var(--r-xs); }
.cal-upcoming-date { font-weight: var(--font-bold); color: var(--c-600); }
.cal-upcoming-plat { font-weight: var(--font-semibold); color: var(--c-400); }
.cal-upcoming-est { font-weight: var(--font-extrabold); color: var(--c-800); }

/* Calendar grid */
.cal-card {
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-lg);
  padding: 16px; margin-bottom: 12px; overflow: hidden;
}
.cal-loading { display: flex; align-items: center; justify-content: center; height: 300px; color: var(--c-400); }

.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th {
  padding: 8px; text-align: center; font-size: var(--text-xs); font-weight: var(--font-bold);
  color: var(--c-400); border-bottom: 1px solid var(--c-150);
}
.cal-grid th.sun { color: var(--error); }
.cal-grid th.sat { color: var(--info); }

.cal-cell {
  padding: 6px; border: 1px solid var(--c-100); vertical-align: top;
  height: 90px; transition: background .15s; position: relative;
}
.cal-cell:hover { background: var(--c-50); }
.cal-cell.today { background: var(--info-bg); border-color: #bae6fd; }
.cal-cell.sun .cal-day-num { color: var(--error); }
.cal-cell.sat .cal-day-num { color: var(--info); }
.cal-empty { border: 1px solid var(--c-50); background: var(--c-50); }

.cal-day-num { font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--c-600); margin-bottom: 2px; }
.cal-day-revenue { font-size: var(--text-xs); font-weight: var(--font-extrabold); color: var(--c-800); }
.cal-day-qty { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }

.cal-day-plats { display: flex; gap: 2px; margin-top: 3px; }
.cal-day-plat-dot { width: 6px; height: 6px; border-radius: 2px; }

.cal-settlement-marks { display: flex; gap: 2px; margin-top: 3px; flex-wrap: wrap; }
.cal-settlement-tag {
  font-size: var(--text-xs); font-weight: var(--font-extrabold); padding: 1px 5px; border-radius: var(--r-xs);
  border: 1px solid; line-height: 1.3;
}

/* Legend */
.cal-legend {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 0;
}
.cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500); }
.cal-legend-dot { width: 8px; height: 8px; border-radius: var(--r-xs); }

/* Settings panel */
.cal-settings {
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-md);
  padding: 16px; margin-bottom: 12px;
}
.cal-settings-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--c-800); margin-bottom: 12px;
}
.cal-btn-sm {
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 4px 12px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200); background: var(--c-50); color: var(--c-600);
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  font-family: inherit; transition: all .15s;
}
.cal-btn-sm.save { background: #0ea5e9; color: var(--app-surface); border-color: #0ea5e9; }
.cal-btn-sm.save:hover { background: #0284c7; }

.cal-rule-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.cal-rule-input {
  flex: 1; padding: 6px 10px; border: 1px solid var(--c-200); border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--font-semibold); font-family: inherit;
}
.cal-rule-input:focus { outline: none; border-color: #0ea5e9; }
.cal-rule-select {
  padding: 6px 8px; border: 1px solid var(--c-200); border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--font-semibold); font-family: inherit; background: var(--app-surface);
}
.cal-rule-day {
  display: flex; align-items: center; gap: 4px;
}
.cal-rule-day input {
  width: 50px; padding: 6px 8px; border: 1px solid var(--c-200); border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--font-bold); text-align: center; font-family: inherit;
}
.cal-rule-day span { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500); }
.cal-rule-color {
  width: 28px; height: 28px; border: none; border-radius: var(--r-xs); padding: 0;
  cursor: pointer; background: none;
}
.cal-rule-del {
  width: 28px; height: 28px; border-radius: var(--r-xs); border: none;
  background: transparent; color: var(--c-300); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cal-rule-del:hover { background: var(--error-bg); color: var(--error); }
.cal-btn-add {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: #0ea5e9; background: none;
  border: 1px dashed #bae6fd; border-radius: var(--r-sm); padding: 6px 14px;
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  font-family: inherit; width: 100%; justify-content: center;
  margin-top: 4px; transition: all .15s;
}
.cal-btn-add:hover { background: var(--info-bg); border-color: #0ea5e9; }

/* Spin */
.spin { animation: cal-spin 1s linear infinite; }
@keyframes cal-spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 700px) {
  .cal-summary { flex-wrap: wrap; }
  .cal-sum-item { min-width: 120px; }
  .cal-cell { height: 70px; padding: 4px; }
  .cal-day-revenue { font-size: var(--text-xs); }
}

@media (max-width: 480px) {
  .cal-header { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .cal-hd-left { flex: 1 1 100%; }
  .cal-hd-actions { width: 100%; justify-content: space-between; }
  .cal-month-label { min-width: 80px; font-size: var(--text-sm); }
  .cal-summary { gap: 6px; }
  .cal-sum-item { min-width: calc(50% - 3px); flex: 1 1 calc(50% - 3px); padding: 10px 12px; }
  .cal-sum-val { font-size: var(--text-lg); }
  .cal-cell { height: 56px; padding: 3px; }
  .cal-day-num { font-size: 11px; }
  .cal-day-revenue { display: none; }
  .cal-grid th { font-size: 10px; padding: 4px 0; }
}

/* Dark mode */
[data-theme="dark"] .cal-header,
[data-theme="dark"] .cal-card,
[data-theme="dark"] .cal-sum-item,
[data-theme="dark"] .cal-upcoming,
[data-theme="dark"] .cal-settings { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .cal-hd-title,
[data-theme="dark"] .cal-month-label,
[data-theme="dark"] .cal-sum-val,
[data-theme="dark"] .cal-upcoming-title,
[data-theme="dark"] .cal-settings-h,
[data-theme="dark"] .cal-day-revenue,
[data-theme="dark"] .cal-upcoming-est { color: var(--c-100); }
[data-theme="dark"] .cal-grid th { color: var(--c-500); border-color: var(--c-700); }
[data-theme="dark"] .cal-cell { border-color: var(--c-200); }
[data-theme="dark"] .cal-cell:hover { background: var(--c-200); }
[data-theme="dark"] .cal-cell.today { background: rgba(14, 165, 233, 0.12); border-color: #0ea5e9; }
[data-theme="dark"] .cal-day-num { color: var(--c-400); }
[data-theme="dark"] .cal-empty { background: rgba(14, 165, 233, 0.08); border-color: var(--c-200); }
[data-theme="dark"] .cal-month-nav button { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .cal-btn-today { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .cal-btn-icon { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .cal-rule-input,
[data-theme="dark"] .cal-rule-select,
[data-theme="dark"] .cal-rule-day input { background: var(--c-700); border-color: var(--c-600); color: var(--c-100); }
[data-theme="dark"] .cal-upcoming-item { background: var(--c-700); }
[data-theme="dark"] .cal-sum-item.accent { background: rgba(14, 165, 233, 0.12); border-color: var(--info-deep); }
.cl-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ── 헤더 ── */
.cl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

.cl-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary, #111);
}

.cl-subtitle {
  font-size: 13px;
  color: var(--text-secondary, #666);
  margin: 0;
}

/* ── 필터 ── */
.cl-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cl-filter-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border, #e0e0e0);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #666);
  cursor: pointer;
  transition: all 0.15s;
}

.cl-filter-btn:hover {
  border-color: var(--primary, #4f6ef7);
  color: var(--primary, #4f6ef7);
}

.cl-filter-btn--active {
  background: var(--primary, #4f6ef7);
  border-color: var(--primary, #4f6ef7);
  color: #fff;
}

/* ── 목록 ── */
.cl-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 카드 ── */
.cl-card {
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface, #fff);
}

.cl-card--current {
  border-color: var(--primary, #4f6ef7);
  box-shadow: 0 0 0 1px var(--primary, #4f6ef7)22;
}

.cl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}

.cl-card-header:hover {
  background: var(--hover, #f5f5f5);
}

.cl-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cl-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cl-version {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #111);
  letter-spacing: -0.3px;
}

.cl-date {
  font-size: 12px;
  color: var(--text-muted, #999);
}

.cl-summary {
  font-size: 13px;
  color: var(--text-secondary, #555);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-chevron {
  font-size: 14px;
  color: var(--text-muted, #aaa);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.cl-chevron--open {
  transform: rotate(180deg);
}

/* ── 상태 배지 ── */
.cl-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.cl-status-badge--current {
  background: #e8f0fe;
  color: var(--primary, #4f6ef7);
}

.cl-status-badge--stable {
  background: #e8f5e9;
  color: #388e3c;
}

/* ── 변경 항목 ── */
.cl-items {
  list-style: none;
  margin: 0;
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border, #f0f0f0);
  padding-top: 14px;
}

.cl-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.cl-item-text {
  color: var(--text-primary, #333);
  flex: 1;
}

/* ── 카테고리 배지 ── */
.cl-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.cl-badge--fix      { background: #fff0f0; color: #d32f2f; }
.cl-badge--new      { background: #e8f5e9; color: #2e7d32; }
.cl-badge--improve  { background: #e3f2fd; color: #1565c0; }
.cl-badge--api      { background: #f3e5f5; color: #6a1b9a; }
.cl-badge--breaking { background: #fff8e1; color: #e65100; }

/* ── 다크모드 ── */
[data-theme="dark"] .cl-title       { color: #f0f0f0; }
[data-theme="dark"] .cl-subtitle    { color: #888; }
[data-theme="dark"] .cl-card        { background: #1e1e1e; border-color: #333; }
[data-theme="dark"] .cl-card--current { border-color: var(--primary, #4f6ef7); }
[data-theme="dark"] .cl-card-header:hover { background: #2a2a2a; }
[data-theme="dark"] .cl-version     { color: #f0f0f0; }
[data-theme="dark"] .cl-summary     { color: #aaa; }
[data-theme="dark"] .cl-item-text   { color: #ddd; }
[data-theme="dark"] .cl-items       { border-top-color: #333; }
[data-theme="dark"] .cl-filter-btn  { border-color: #444; color: #aaa; }
[data-theme="dark"] .cl-filter-btn:hover { border-color: var(--primary, #4f6ef7); color: var(--primary, #4f6ef7); }
[data-theme="dark"] .cl-status-badge--stable { background: #1b3a1f; color: #66bb6a; }
[data-theme="dark"] .cl-status-badge--current { background: #1a237e22; color: #7986cb; }
[data-theme="dark"] .cl-badge--fix      { background: #3a1010; color: #ef9a9a; }
[data-theme="dark"] .cl-badge--new      { background: #1b3a1f; color: #a5d6a7; }
[data-theme="dark"] .cl-badge--improve  { background: #0d2137; color: #90caf9; }
[data-theme="dark"] .cl-badge--api      { background: #2a1040; color: #ce93d8; }
[data-theme="dark"] .cl-badge--breaking { background: #3a2000; color: #ffcc80; }
/* ============================================================================
   DASHBOARD – Clean SaaS
   ============================================================================ */

/* ── Page ── */
.dash-page {
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
  width: 100%;
  padding: 0;
}


/* ============================================================================
   HEADER
   ============================================================================ */

.dash-hd {
  background: var(--page-hd-bg);
  border: 1px solid var(--page-hd-border);
  border-radius: var(--page-hd-radius);
  box-shadow: var(--page-hd-shadow);
}

.dash-hd-row1 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

.dash-hd-icon {
  color: var(--primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-hd-titles { flex: 1; min-width: 0; }

.dash-hd-title {
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold);
  color: var(--c-900);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dash-hd-sub {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--c-400);
  display: block;
  margin-top: 2px;
}

.dash-hd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dash-period-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--c-50);
  border: 1px solid var(--c-150);
  padding: 3px;
  border-radius: var(--r-sm);
}

.dash-period-btn {
  padding: 5px 12px;
  border-radius: var(--r-xs);
  border: none;
  background: transparent;
  color: var(--c-500);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.dash-period-btn:hover {
  background: var(--c-100);
  color: var(--c-700);
}
.dash-period-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: var(--font-bold);
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.2);
}


/* ============================================================================
   ORDER STATUS FLOW
   ============================================================================ */

.dash-order-flow {
  background: var(--page-hd-bg);
  border: 1px solid var(--page-hd-border);
  border-radius: var(--page-hd-radius);
  box-shadow: var(--page-hd-shadow);
  padding: 20px 24px;
}

.dash-of-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.dash-of-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-md);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
}
.dash-of-title svg { color: var(--primary); }

.dash-of-cards {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
}

.dash-of-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 32px;
  border-radius: var(--r-md);
  background: var(--c-25, var(--c-50));
  border: 1px solid var(--c-100);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 100px;
  font-family: inherit;
  color: inherit;
}
.dash-of-card:hover {
  background: var(--c-50);
  border-color: var(--primary-200, var(--c-200));
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

.dash-of-count {
  font-size: 28px;
  font-weight: var(--font-extrabold);
  color: var(--primary);
  line-height: 1;
}
.dash-of-card.warn .dash-of-count { color: var(--danger, #ef4444); }

.dash-of-label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--c-500);
  white-space: nowrap;
}

.dash-of-arrow {
  display: flex;
  align-items: center;
  color: var(--c-300);
  padding: 0 6px;
  flex-shrink: 0;
}

.dash-of-sep {
  width: 1px;
  height: 36px;
  background: var(--c-200);
  margin: 0 12px;
  flex-shrink: 0;
}

/* ============================================================================
   SUB CARDS (Cancel/Return + Delay)
   ============================================================================ */

/* 취소/반품 + 배송지연 + 플랫폼 연동 상태 한 행 */
.dash-top-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.dash-sub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.dash-sub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--page-hd-bg);
  border: 1px solid var(--page-hd-border);
  border-radius: var(--page-hd-radius);
  box-shadow: var(--page-hd-shadow);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}
.dash-sub-card:hover {
  border-color: var(--c-200);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dash-sub-card.warn { border-left: 3px solid #f59e0b; }

.dash-sub-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.dash-sub-icon.cancel { background: rgba(239, 68, 68, 0.08); color: #ef4444; }
.dash-sub-icon.delay { background: rgba(245, 158, 11, 0.08); color: #f59e0b; }

.dash-sub-body { flex: 1; min-width: 0; }

.dash-sub-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--c-800);
  margin-bottom: 4px;
}

.dash-sub-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--c-600);
}
.dash-sub-detail strong { font-weight: var(--font-extrabold); color: var(--c-800); }

.dash-sub-tag {
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--c-100);
  color: var(--c-600);
  font-size: 11px;
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.dash-tag-pending { background: #fee2e2; color: #991b1b; }
.dash-tag-done { background: #d1fae5; color: #065f46; }

.dash-sub-refund {
  font-size: 11px;
  color: #ef4444;
  font-weight: var(--font-semibold);
  margin-top: 2px;
}

.dash-sub-arrow {
  color: var(--c-300);
  flex-shrink: 0;
}

/* ============================================================================
   KPI STRIP
   ============================================================================ */

.dash-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.dash-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dash-kpi-card:hover {
  border-color: var(--c-300);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.06);
}

.dash-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-kpi-icon.indigo  { background: rgba(99, 102, 241, 0.08); color: var(--primary); }
.dash-kpi-icon.emerald { background: rgba(16, 185, 129, 0.08); color: var(--success); }
.dash-kpi-icon.amber   { background: rgba(245, 158, 11, 0.08); color: var(--warning); }
.dash-kpi-icon.rose    { background: rgba(239, 68, 68, 0.08);  color: var(--error); }
.dash-kpi-icon.sky     { background: rgba(14, 165, 233, 0.08); color: #0ea5e9; }

.dash-kpi-info { display: flex; flex-direction: column; min-width: 0; }

.dash-kpi-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--c-400);
  margin-bottom: 3px;
}

.dash-kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
  letter-spacing: -0.03em;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-kpi-unit {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--c-400);
}

.dash-kpi-sub {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--c-400);
  margin-left: 1px;
}

.dash-kpi-pct {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  padding: 2px 7px;
  border-radius: var(--r-xs);
  margin-left: 6px;
}
.dash-kpi-pct.emerald { background: rgba(16, 185, 129, 0.08); color: var(--success); }
.dash-kpi-pct.rose { background: rgba(239, 68, 68, 0.08); color: var(--error); }

.dash-kpi-loading { color: var(--c-300); }

/* Trend Badge */
.dash-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  margin-top: 4px;
  width: fit-content;
}
.dash-trend.positive { background: rgba(16, 185, 129, 0.08); color: var(--success); }
.dash-trend.negative { background: rgba(239, 68, 68, 0.08); color: var(--error); }
.dash-trend.flat { background: rgba(148, 163, 184, 0.08); color: var(--c-400); }

/* Daily Average Detail */
.dash-kpi-detail {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--c-400);
  margin-top: 4px;
}


/* ============================================================================
   MAIN GRID
   ============================================================================ */

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
}

/* Card */
.dash-card {
  background: var(--app-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-150);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.dash-card:hover {
  border-color: #dde1e9;
}

.chart-card    { min-height: 380px; }
.products-card { grid-column: 1 / -1; }

/* Card Header */
.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dash-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-md);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
  letter-spacing: -0.01em;
}

.dash-card-title-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(226, 232, 240, 0.6);
  background: transparent;
  color: var(--c-400);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.dash-card-link:hover { border-color: rgba(99, 102, 241, 0.3); color: var(--primary); }
.dash-card-link.is-icon { width: 30px; padding: 0; justify-content: center; }

.dash-card-body { flex: 1; min-height: 0; }

.dash-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 120px;
  color: var(--c-300);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}


/* ============================================================================
   CHART
   ============================================================================ */

.dash-chart-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
}

.dash-chart-svg { overflow: visible; display: block; }

.dash-chart-grid { stroke: rgba(226, 232, 240, 0.5); stroke-width: 1; }
.dash-chart-axis-y { font-size: var(--text-xs); fill: var(--c-400); font-weight: var(--font-semibold); font-family: inherit; }
.dash-chart-axis-x { font-size: var(--text-xs); fill: var(--c-300); font-weight: var(--font-semibold); text-anchor: middle; transition: fill 0.15s; font-family: inherit; }
.dash-chart-axis-x.active { fill: var(--primary); font-weight: var(--font-bold); }

.dash-chart-area { opacity: 0.9; }

.dash-chart-dot {
  transition: r 0.15s ease, fill 0.15s ease;
}

.dash-chart-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  background: var(--app-surface);
  border: 1px solid var(--c-200);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translate(-50%, -100%);
  margin-top: -10px;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-chart-tooltip-date { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.dash-chart-tooltip-val  { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-800); letter-spacing: -0.02em; }
.dash-chart-tooltip-margin { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--success); }
.dash-chart-tooltip-qty  { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--primary); }

.dash-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: var(--c-300);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

/* Chart Legend */
.dash-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  padding-top: 8px;
}
.dash-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--c-400);
}
.dash-legend-dot {
  width: 10px;
  height: 3px;
  border-radius: 2px;
}
.dash-legend-dot.indigo { background: var(--primary); }
.dash-legend-dot.emerald { background: var(--success); }


/* ============================================================================
   PLATFORM SHARE
   ============================================================================ */

.dash-platform-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-platform-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-platform-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-platform-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-xs);
  flex-shrink: 0;
}

.dash-platform-name {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--c-700);
  flex: 1;
}

.dash-platform-pct {
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.01em;
}

.dash-platform-bar-track {
  height: 5px;
  background: rgba(241, 245, 249, 0.8);
  border-radius: var(--r-full);
  overflow: hidden;
}

.dash-platform-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-platform-rev {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--c-400);
}


/* ============================================================================
   TOP PRODUCTS
   ============================================================================ */

.dash-products-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-product-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  transition: all 0.15s ease;
  border: 1.5px solid transparent;
}

.dash-product-row:hover {
  background: rgba(248, 250, 252, 0.8);
  border-color: rgba(226, 232, 240, 0.5);
}

.dash-product-row.top {
  background: rgba(245, 158, 11, 0.03);
  border-color: rgba(245, 158, 11, 0.1);
}

.dash-product-rank {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: rgba(241, 245, 249, 0.8);
  color: var(--c-400);
  font-size: var(--text-base);
  font-weight: var(--font-extrabold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-product-rank.gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.15));
  color: var(--warning);
}

.dash-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-product-name {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--c-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-product-bar-track {
  height: 4px;
  background: rgba(241, 245, 249, 0.6);
  border-radius: var(--r-full);
  overflow: hidden;
}

.dash-product-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-product-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.dash-product-rev {
  font-size: var(--text-md);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.dash-product-qty {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--c-400);
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Medium screens */
@media (max-width: 1200px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .chart-card    { min-height: 340px; }
  .products-card { grid-column: 1; }

  .dash-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets */
@media (max-width: 900px) {
  .dash-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Small screens */
@media (max-width: 600px) {
  .dash-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--r-md);
  }
  .dash-hero-title { font-size: var(--text-lg); }
  .dash-period-btn { padding: 5px 10px; font-size: 11.5px; }

  .dash-kpi-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-kpi-card { padding: 14px; gap: 10px; border-radius: var(--r-md); }
  .dash-kpi-icon { width: 36px; height: 36px; border-radius: var(--r-sm); }
  .dash-kpi-icon svg { width: 18px; height: 18px; }
  .dash-kpi-value { font-size: var(--text-xl); }

  .dash-of-card { padding: 10px 16px; min-width: 70px; }
  .dash-of-count { font-size: 18px; }
  .dash-of-arrow { padding: 0 3px; }

  .dash-card { padding: 16px; border-radius: var(--r-md); }
  .dash-product-row { padding: 10px 12px; }
}

@media (max-width: 480px) {
  .dash-hd-row1 { flex-wrap: wrap; padding: 14px 16px; gap: 8px; }
  .dash-hd-titles { order: 1; flex: 1 1 0; min-width: 0; }
  .dash-hd-icon { order: 0; }
  .dash-hd-actions { order: 2; flex-basis: 100%; justify-content: flex-end; gap: 6px; }
  .dash-period-group { flex-wrap: nowrap; overflow-x: auto; }
  .dash-kpi-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-kpi-card { padding: 12px; gap: 8px; }
  .dash-kpi-value { font-size: var(--text-lg); }
  .dash-goal-row { flex-wrap: wrap; gap: 6px; }
  .dash-goal-nums { flex-wrap: wrap; gap: 4px; }
  .dash-compare-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 새로고침 ── */
.dash-refresh-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-200);
  background: var(--app-surface);
  color: var(--c-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.dash-refresh-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.dash-refresh-btn:disabled { opacity: .5; cursor: not-allowed; }

.dash-refresh-time {
  font-size: var(--text-xs);
  color: var(--c-400);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   GOAL PROGRESS CARD
   ═══════════════════════════════════════════════════════════════ */
.dash-goal-card {
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-md);
  padding: 16px 20px; margin-bottom: 12px;
}
.dash-goal-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.dash-goal-title {
  font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--c-800);
  display: flex; align-items: center; gap: 6px;
}
.dash-goal-edit {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); background: none; border: none;
  cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 4px 8px;
  border-radius: var(--r-xs); transition: all .15s; font-family: inherit;
}
.dash-goal-edit:hover { color: var(--primary); background: var(--primary-soft); }

.dash-goal-bars { display: flex; flex-direction: column; gap: 10px; }
.dash-goal-row { display: flex; align-items: center; gap: 12px; }
.dash-goal-info { display: flex; align-items: center; gap: 6px; min-width: 80px; }
.dash-goal-label { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-500); }
.dash-goal-pct { font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--c-400); }
.dash-goal-pct.good { color: #0ea5e9; }
.dash-goal-pct.done { color: var(--success); }
.dash-goal-pct.behind { color: var(--error); }

.dash-goal-bar-track {
  flex: 1; height: 10px; background: var(--c-100); border-radius: var(--r-xs);
  overflow: visible; position: relative;
}
.dash-goal-bar-fill {
  height: 100%; border-radius: var(--r-xs); transition: width .6s ease;
  background: linear-gradient(90deg, var(--primary), var(--primary));
  position: relative; overflow: hidden;
}
.dash-goal-bar-fill.margin { background: linear-gradient(90deg, var(--success), var(--success)); }
.dash-goal-bar-fill.done { background: linear-gradient(90deg, var(--success), var(--success)) !important; }
.dash-goal-bar-fill.behind { background: linear-gradient(90deg, var(--error), #f87171); }

/* 페이스 마커 */
.dash-goal-pace-marker {
  position: absolute; top: -3px; width: 2px; height: 16px;
  background: var(--c-500); border-radius: 1px; z-index: 2;
  transform: translateX(-50%);
}

.dash-goal-nums { display: flex; align-items: center; gap: 4px; min-width: 160px; justify-content: flex-end; flex-wrap: wrap; }
.dash-goal-nums span { font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--c-800); }
.dash-goal-of { font-weight: var(--font-semibold) !important; color: var(--c-400) !important; }
.dash-goal-proj { font-size: 11px !important; font-weight: var(--font-semibold) !important; padding: 1px 6px; border-radius: var(--r-xs); white-space: nowrap; }
.dash-goal-proj.good { background: #ecfdf5; color: #059669; }
.dash-goal-proj.warn { background: #fff7ed; color: #f97316; }
.dash-goal-pct.behind { color: var(--error); }
.dash-goal-days-left {
  margin-left: auto; font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--c-400); background: var(--c-100); padding: 2px 8px; border-radius: var(--r-xs);
}

/* Goal form */
.dash-goal-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.dash-goal-input-row { display: flex; flex-direction: column; gap: 4px; }
.dash-goal-input-row label { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); }
.dash-goal-input-wrap {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--c-200); border-radius: var(--r-sm); padding: 6px 10px;
  background: var(--c-50); transition: border-color .15s;
}
.dash-goal-input-wrap:focus-within { border-color: var(--primary); background: var(--app-surface); }
.dash-goal-input-wrap input {
  border: none; background: none; outline: none; font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--c-800); width: 120px; font-family: inherit;
}
.dash-goal-input-wrap span { font-size: var(--text-sm); color: var(--c-400); font-weight: var(--font-semibold); }

.dash-goal-btns { display: flex; gap: 6px; align-items: center; }
.dash-goal-save, .dash-goal-cancel {
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 6px 14px; border-radius: var(--r-sm);
  border: none; cursor: pointer; display: flex; align-items: center; gap: 4px;
  font-family: inherit; transition: all .15s;
}
.dash-goal-save { background: var(--primary); color: var(--app-surface); }
.dash-goal-save:hover { background: var(--primary-deep); }
.dash-goal-cancel { background: var(--c-100); color: var(--c-500); }
.dash-goal-cancel:hover { background: var(--c-200); }

.dash-goal-empty {
  margin-bottom: 12px; text-align: center;
}
.dash-goal-empty button {
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-400); background: var(--app-surface);
  border: 1px dashed var(--c-200); border-radius: var(--r-sm); padding: 10px 20px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; transition: all .15s; width: 100%;
  justify-content: center;
}
.dash-goal-empty button:hover { color: var(--primary); border-color: var(--c-300); background: var(--primary-soft); }

/* Dark mode */
[data-theme="dark"] .dash-goal-card { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .dash-goal-title { color: var(--c-100); }
[data-theme="dark"] .dash-goal-bar-track { background: var(--c-700); }
[data-theme="dark"] .dash-goal-nums span { color: var(--c-100); }
[data-theme="dark"] .dash-goal-input-wrap { background: var(--c-700); border-color: var(--c-600); }
[data-theme="dark"] .dash-goal-input-wrap input { color: var(--c-100); }
[data-theme="dark"] .dash-goal-cancel { background: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .dash-goal-empty button { background: var(--c-800); border-color: var(--c-600); color: var(--c-500); }

/* ═══════════════════════════════════════════════════════════════
   ANOMALY BANNER
   ═══════════════════════════════════════════════════════════════ */
.dash-anomaly-wrap {
  display: flex; flex-direction: column; gap: 8px;
}
.dash-anomaly-banner {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #fef2f2, #fff5f5);
  border: 1.5px solid #fca5a5;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background .15s, border-color .15s;
}
.dash-anomaly-banner:hover { background: linear-gradient(135deg, #fee2e2, #fef2f2); border-color: #f87171; }
.dash-anomaly-banner.positive {
  background: linear-gradient(135deg, #f0fdf4, #f7fff9);
  border-color: #86efac;
}
.dash-anomaly-banner.positive:hover { background: linear-gradient(135deg, #dcfce7, #f0fdf4); border-color: #4ade80; }
.dash-anomaly-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #fee2e2; color: #dc2626;
}
.dash-anomaly-banner.positive .dash-anomaly-icon { background: #dcfce7; color: #16a34a; }
.dash-anomaly-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dash-anomaly-title { font-size: var(--text-base); font-weight: var(--font-bold); color: #991b1b; }
.dash-anomaly-banner.positive .dash-anomaly-title { color: #166534; }
.dash-anomaly-desc { font-size: var(--text-sm); color: #b91c1c; opacity: 0.8; }
.dash-anomaly-banner.positive .dash-anomaly-desc { color: #15803d; }
.dash-anomaly-arrow { color: #f87171; flex-shrink: 0; }
.dash-anomaly-banner.positive .dash-anomaly-arrow { color: #4ade80; }

[data-theme="dark"] .dash-anomaly-banner {
  background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(220,38,38,.08));
  border-color: rgba(239,68,68,.4);
}
[data-theme="dark"] .dash-anomaly-banner:hover {
  background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(220,38,38,.14));
}
[data-theme="dark"] .dash-anomaly-banner.positive {
  background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(22,163,74,.08));
  border-color: rgba(34,197,94,.4);
}
[data-theme="dark"] .dash-anomaly-icon { background: rgba(239,68,68,.25); color: #f87171; }
[data-theme="dark"] .dash-anomaly-banner.positive .dash-anomaly-icon { background: rgba(34,197,94,.25); color: #4ade80; }
[data-theme="dark"] .dash-anomaly-title { color: #fca5a5; }
[data-theme="dark"] .dash-anomaly-banner.positive .dash-anomaly-title { color: #86efac; }
[data-theme="dark"] .dash-anomaly-desc { color: #fca5a5; }
[data-theme="dark"] .dash-anomaly-banner.positive .dash-anomaly-desc { color: #86efac; }

/* ═══════════════════════════════════════════════════════════════
   ALERTS + COMPARISON ROW
   ═══════════════════════════════════════════════════════════════ */
.dash-alerts-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px;
}
@media (max-width: 768px) { .dash-alerts-row { grid-template-columns: 1fr; } }

/* ── Alert Card ── */
.dash-alerts-card {
  background: var(--app-surface); border-radius: var(--r-lg); border: 1px solid var(--c-150);
  padding: 18px 20px; overflow: hidden;
}
.dash-alert-badge {
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--error-bg); color: var(--error);
}
.dash-alerts-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.dash-alert-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; background: var(--c-50); border-radius: var(--r-sm);
  cursor: default; font-family: inherit; text-align: left; transition: background .1s;
}
.dash-alert-item.clickable { cursor: pointer; }
.dash-alert-item.clickable:hover { background: var(--c-100); }
.dash-alert-icon {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-alert-item.danger .dash-alert-icon { background: var(--error-bg); color: var(--error); }
.dash-alert-item.warn .dash-alert-icon { background: var(--warning-bg); color: var(--warning); }
.dash-alert-item.info .dash-alert-icon { background: var(--primary-soft); color: var(--primary); }
.dash-alert-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.dash-alert-title { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800); }
.dash-alert-desc { font-size: var(--text-xs); color: var(--c-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-alert-arrow { color: var(--c-300); flex-shrink: 0; }

/* ── Comparison Card ── */
.dash-compare-card {
  background: var(--app-surface); border-radius: var(--r-lg); border: 1px solid var(--c-150);
  padding: 18px 20px;
}
.dash-compare-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 12px;
}
.dash-compare-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; background: var(--c-50); border-radius: var(--r-sm);
}
.dash-compare-label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.dash-compare-cur { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.dash-compare-diff {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-400);
}
.dash-compare-diff.up { color: var(--success); }
.dash-compare-diff.down { color: var(--error); }

/* ── Dark mode ── */
[data-theme="dark"] .dash-alerts-card { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .dash-alert-item { background: var(--c-200); }
[data-theme="dark"] .dash-alert-item:hover { background: var(--c-700); }
[data-theme="dark"] .dash-alert-title { color: var(--c-100); }
[data-theme="dark"] .dash-alert-badge { background: var(--error-deep); color: var(--error); }
[data-theme="dark"] .dash-compare-card { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .dash-compare-item { background: var(--c-200); }
[data-theme="dark"] .dash-compare-cur { color: var(--c-100); }

/* ═══════════════════════════════════════════════════════════════
   모바일 반응형 보완 (480px 이하)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 목표 카드 */
  .dash-goal-row { flex-wrap: wrap; gap: 6px; }
  .dash-goal-bar-track { flex: 1 1 100%; order: 3; }
  .dash-goal-nums { min-width: 0; order: 4; width: 100%; justify-content: flex-start; gap: 6px; }

  /* 알림/비교 카드 */
  .dash-alerts-row { grid-template-columns: 1fr; }
  .dash-cmp-row { flex-direction: column; gap: 6px; }

  /* 제품 리스트 */
  .dash-product-row { gap: 8px; }
  .dash-product-rank { min-width: 20px; }

  /* 헤더 */
  .dash-hero { padding: 14px 14px; }
  .dash-period-btns { gap: 4px; }
  .dash-period-btn { padding: 4px 8px; font-size: 11px; }
}


/* ═══════════════════════════════════════════════════════════════
   BOTTOM WIDGETS (재고 부족 + 가격 변동)
   ═══════════════════════════════════════════════════════════════ */
.dash-bottom-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.dash-widget-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-widget-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--c-50);
  transition: background .1s;
}
.dash-widget-row:hover { background: var(--c-100); }
.dash-widget-row.warn { background: #fff7ed; border-left: 3px solid #f59e0b; }

.dash-widget-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--c-700);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-widget-name small {
  font-size: var(--text-xs);
  color: var(--c-400);
  font-weight: var(--font-medium);
  margin-left: 4px;
}

.dash-widget-val {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.dash-widget-current { color: var(--error); }
.dash-widget-min { color: var(--c-400); font-weight: var(--font-medium); }
.dash-widget-old { color: var(--c-400); text-decoration: line-through; }
.dash-widget-new { color: var(--c-800); }
.dash-widget-arrow { display: flex; align-items: center; }
.dash-widget-arrow.up { color: var(--error); }
.dash-widget-arrow.down { color: var(--success); }

[data-theme="dark"] .dash-widget-row { background: var(--c-200); }
[data-theme="dark"] .dash-widget-row:hover { background: var(--c-700); }
[data-theme="dark"] .dash-widget-row.warn { background: rgba(245, 158, 11, 0.1); border-left-color: #f59e0b; }
[data-theme="dark"] .dash-widget-name { color: var(--c-200); }
[data-theme="dark"] .dash-widget-new { color: var(--c-100); }

/* ── 플랫폼 연동 상태 카드 ── */
.dash-sync-card {
  flex-shrink: 0;
  width: 200px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.dash-sync-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
}

.dash-sync-card-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.dash-sync-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
.dash-sync-link:hover { background: var(--primary-hover-bg, rgba(99,102,241,.08)); }

.dash-sync-rows {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  flex: 1;
}

.dash-sync-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  cursor: default;
}
.dash-sync-row:hover { background: var(--bg-subtle, rgba(0,0,0,.03)); }

/* React 기반 툴팁 — 한 번에 하나만 표시 */
.dash-sync-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  transform: translateX(-50%);
  background: rgba(15,15,20,.9);
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.dash-sync-tooltip::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: rgba(15,15,20,.9);
}

.dash-sync-row-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.dash-sync-row-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.dash-sync-row.ok .dash-sync-row-status     { color: #059669; }
.dash-sync-row.failed .dash-sync-row-status { color: #dc2626; }

[data-theme="dark"] .dash-sync-card { background: var(--card-bg); }
[data-theme="dark"] .dash-sync-row:hover { background: rgba(255,255,255,.04); }

/* ── 플랫폼 연동 상태 행 (하단 카드용, 미사용 시 제거 가능) ── */
.dash-ps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.dash-ps-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-subtle, rgba(0,0,0,.03));
}
.dash-ps-row.ok     { background: rgba(16,185,129,.08); }
.dash-ps-row.failed { background: rgba(239,68,68,.08); }

.dash-ps-name { flex: 1; font-weight: 500; color: var(--text); }

.dash-ps-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}
.dash-ps-row.ok .dash-ps-status     { color: #10b981; }
.dash-ps-row.failed .dash-ps-status { color: #ef4444; }
.dash-ps-status svg { flex-shrink: 0; }

.dash-ps-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

[data-theme="dark"] .dash-ps-row { background: rgba(255,255,255,.04); }
[data-theme="dark"] .dash-ps-row.ok     { background: rgba(16,185,129,.12); }
[data-theme="dark"] .dash-ps-row.failed { background: rgba(239,68,68,.12); }

/* ═══════════════════════════════════════════════════════════════
   모바일 반응형 보완 — top-row / bottom-row / sync-card
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* 취소·반품 + 지연 + 플랫폼 연동 행 → 세로 스택 */
  .dash-top-row { flex-direction: column; }
  .dash-sync-card { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .dash-sync-card-hd { width: 100%; }
  .dash-sync-rows { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }

  /* 하단 위젯 그리드 최소 너비 축소 */
  .dash-bottom-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .dash-sync-rows { grid-template-columns: 1fr; }
}
/* ============================================================================
   HISTORY PAGE – PREMIUM GLASSMORPHISM DESIGN
   OrdersPage 디자인 언어 통일
   ============================================================================ */

/* ============================================================================
   PAGE LAYOUT
   ============================================================================ */

.hist-page {
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
  width: 100%;
  height: 100%;
}

/* ============================================================================
   HERO HEADER
   ============================================================================ */

.hist-hero {
  background: var(--page-hd-bg);
  border-radius: var(--page-hd-radius);
  padding: 24px 24px 18px;
  border: 1px solid var(--page-hd-border);
  box-shadow: var(--page-hd-shadow);
  position: relative;
  overflow: visible;
  z-index: 20;
}

/* accent line removed for layout consistency */

.hist-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.hist-hero-title-area {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hist-hero-icon {
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hist-hero-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  color: #1a202c;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.2;
}

.hist-hero-sub {
  font-size: var(--text-base);
  color: var(--c-400);
  margin: 2px 0 0;
  font-weight: var(--font-medium);
}

/* Stats */
.hist-hero-stats {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.hist-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--r-md);
  background: rgba(241, 245, 249, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.5);
  min-width: 56px;
}

.hist-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--c-700);
  letter-spacing: -0.02em;
}

.hist-stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--c-400);
  margin-top: 1px;
}

.hist-stat.done {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.15);
}
.hist-stat.done .hist-stat-value { color: var(--success); }

.hist-stat.failed {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.15);
}
.hist-stat.failed .hist-stat-value { color: var(--error); }

.hist-stat.running {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.15);
}
.hist-stat.running .hist-stat-value { color: var(--info); }


/* ============================================================================
   FILTER BAR
   ============================================================================ */

.hist-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(248, 250, 252, 0.5);
  border-radius: var(--r-lg);
  border: 1px solid rgba(226, 232, 240, 0.5);
}

/* Focus override */
.hist-filter-bar button:focus,
.hist-filter-bar [role="combobox"]:focus,
.hist-filter-bar select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--c-200) !important;
}

/* Search Box */
.hist-search-box {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  height: 36px;
  background: white;
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 7px;
  transition: all 0.2s ease;
  color: var(--c-400);
}

.hist-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}
.hist-search-box:focus-within svg { color: var(--primary); }

.hist-search-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: var(--text-base);
  width: 100%;
  color: var(--c-900);
  height: 100%;
  box-shadow: none !important;
  appearance: none;
  font-family: inherit;
}
.hist-search-input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.hist-search-input::placeholder { color: var(--c-300); }

.hist-search-clear {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--c-400);
  display: flex;
  align-items: center;
  border-radius: var(--r-xs);
}
.hist-search-clear:hover { color: var(--c-500); background: rgba(241, 245, 249, 0.8); }

/* Divider */
.hist-filter-divider {
  width: 1px;
  height: 20px;
  background: rgba(226, 232, 240, 0.6);
  margin: 0 2px;
}

/* Buttons */
.hist-filter-btn {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  background: white;
  color: var(--c-500);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.hist-filter-btn:hover { background: var(--c-50); color: var(--c-700); }
.hist-filter-btn.active {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.2);
  color: var(--primary);
}
.hist-filter-btn:disabled { opacity: 0.5; cursor: default; }


/* ============================================================================
   CONTENT SPLIT LAYOUT
   ============================================================================ */

.hist-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 10;
}


/* ============================================================================
   LIST PANEL – CARD-BASED
   ============================================================================ */

.hist-list-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 8px 32px rgba(163, 177, 198, 0.12),
    0 2px 6px rgba(163, 177, 198, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hist-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.hist-list-scroll::-webkit-scrollbar { width: 4px; }
.hist-list-scroll::-webkit-scrollbar-track { background: transparent; }
.hist-list-scroll::-webkit-scrollbar-thumb { background: rgba(203, 213, 225, 0.4); border-radius: var(--r-xs); }

/* Empty State */
.hist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: var(--c-300);
  gap: 12px;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

/* ============================================================================
   LIST ITEM
   ============================================================================ */

.hist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 12px;
  margin-bottom: 2px;
  border: 1.5px solid transparent;
}

.hist-item:hover {
  background: rgba(248, 250, 252, 0.8);
}

.hist-item.selected {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.15);
}

.hist-item:active {
  transform: scale(0.995);
}

/* Left side: icon + info */
.hist-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.hist-item-action-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(241, 245, 249, 0.8);
  color: var(--c-500);
}

.hist-item-action-icon.print_po { background: rgba(99, 102, 241, 0.08); color: var(--primary); }
.hist-item-action-icon.print_invoice { background: rgba(139, 92, 246, 0.08); color: #8b5cf6; }
.hist-item-action-icon.fetch_invoice { background: rgba(59, 130, 246, 0.08); color: var(--info); }
.hist-item-action-icon.track { background: rgba(16, 185, 129, 0.08); color: var(--success); }
.hist-item-action-icon.export_orders { background: rgba(245, 158, 11, 0.08); color: var(--warning); }

.hist-item-info {
  flex: 1;
  min-width: 0;
}

.hist-item-action {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--c-800);
  line-height: 1.3;
}

.hist-item-msg {
  font-size: var(--text-sm);
  color: var(--c-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  line-height: 1.3;
}

/* Right side: status + time */
.hist-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.hist-item-time {
  font-size: var(--text-xs);
  color: var(--c-300);
  font-weight: var(--font-medium);
}

/* ============================================================================
   STATUS CHIP
   ============================================================================ */

.hist-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  white-space: nowrap;
}

.hist-status-chip.done { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.hist-status-chip.failed { background: rgba(239, 68, 68, 0.1); color: var(--error); }
.hist-status-chip.running { background: rgba(59, 130, 246, 0.1); color: var(--info); }
.hist-status-chip.queued { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.hist-status-chip.cancelled { background: rgba(148, 163, 184, 0.1); color: var(--c-400); }

.hist-status-chip.lg {
  padding: 5px 12px;
  font-size: var(--text-sm);
  border-radius: var(--r-sm);
}


/* ============================================================================
   DETAIL PANEL
   ============================================================================ */

.hist-detail-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 8px 32px rgba(163, 177, 198, 0.12),
    0 2px 6px rgba(163, 177, 198, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* Detail Header */
.hist-detail-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hist-detail-title {
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
  letter-spacing: -0.02em;
}

.hist-detail-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--text-xs);
  color: var(--c-400);
  background: rgba(241, 245, 249, 0.8);
  padding: 2px 8px;
  border-radius: var(--r-xs);
  width: fit-content;
  margin-top: 4px;
}

.hist-detail-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: none;
  background: rgba(241, 245, 249, 0.6);
  color: var(--c-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.hist-detail-close:hover {
  background: rgba(226, 232, 240, 0.8);
  color: var(--c-500);
}

/* Detail Body */
.hist-detail-body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hist-detail-body::-webkit-scrollbar { width: 4px; }
.hist-detail-body::-webkit-scrollbar-track { background: transparent; }
.hist-detail-body::-webkit-scrollbar-thumb { background: rgba(203, 213, 225, 0.4); border-radius: var(--r-xs); }

/* Status Card */
.hist-detail-status-card {
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(226, 232, 240, 0.5);
  background: rgba(248, 250, 252, 0.5);
}

.hist-detail-status-card.done { border-color: rgba(16, 185, 129, 0.15); background: rgba(16, 185, 129, 0.03); }
.hist-detail-status-card.failed { border-color: rgba(239, 68, 68, 0.15); background: rgba(239, 68, 68, 0.03); }
.hist-detail-status-card.running { border-color: rgba(59, 130, 246, 0.15); background: rgba(59, 130, 246, 0.03); }

.hist-detail-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.hist-detail-status-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hist-detail-action-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: rgba(241, 245, 249, 0.8);
  color: var(--c-500);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.hist-detail-progress-pct {
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--c-700);
  letter-spacing: -0.02em;
}

.hist-detail-progress-track {
  height: 6px;
  background: rgba(226, 232, 240, 0.5);
  border-radius: var(--r-full);
  overflow: hidden;
}

.hist-detail-progress-bar {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hist-detail-progress-bar.done { background: linear-gradient(90deg, var(--success), var(--success)); }
.hist-detail-progress-bar.failed { background: linear-gradient(90deg, var(--error), var(--error)); }
.hist-detail-progress-bar.running { background: linear-gradient(90deg, var(--info), var(--info)); }
.hist-detail-progress-bar.queued { background: linear-gradient(90deg, var(--warning), var(--warning)); }

/* Sections */
.hist-detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hist-detail-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--c-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Info Grid */
.hist-detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hist-detail-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-md);
  background: rgba(248, 250, 252, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.4);
}

.hist-detail-info-item > svg {
  color: var(--c-400);
  flex-shrink: 0;
  margin-top: 1px;
}

.hist-detail-info-k {
  font-size: var(--text-xs);
  color: var(--c-400);
  font-weight: var(--font-semibold);
  margin-bottom: 2px;
}

.hist-detail-info-v {
  font-size: var(--text-base);
  color: var(--c-700);
  font-weight: var(--font-semibold);
}

/* Message Box */
.hist-detail-msg-box {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(248, 250, 252, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.4);
  font-size: var(--text-base);
  color: var(--c-600);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: text;
  cursor: text;
}
.hist-detail-msg-box.muted { color: var(--c-300); }

/* Error Box */
.hist-detail-error-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(254, 242, 242, 0.6);
  border: 1px solid rgba(239, 68, 68, 0.15);
  font-size: var(--text-base);
  color: var(--error);
  line-height: 1.5;
  user-select: text;
  cursor: text;
}
.hist-detail-error-box > svg { flex-shrink: 0; margin-top: 2px; }

/* File List */
.hist-detail-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hist-detail-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(248, 250, 252, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.4);
  transition: all 0.15s ease;
}
.hist-detail-file:hover { border-color: rgba(99, 102, 241, 0.2); }

.hist-detail-file-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hist-detail-file-info { flex: 1; min-width: 0; }
.hist-detail-file-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-detail-file-meta { font-size: var(--text-xs); color: var(--c-400); }

.hist-detail-file-dl {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--c-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.hist-detail-file-dl:hover { background: rgba(241, 245, 249, 0.8); color: var(--primary); }

/* Detail Empty */
.hist-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
  text-align: center;
}

.hist-detail-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--r-xl);
  background: rgba(241, 245, 249, 0.6);
  color: var(--c-300);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.hist-detail-empty-text {
  font-size: var(--text-md);
  color: var(--c-400);
  line-height: 1.6;
  font-weight: var(--font-medium);
}

/* Hidden Overlay (Desktop) */
.hist-detail-overlay { display: none; }

/* Spinner */
.hist-spin { animation: hist-spin-anim 1s linear infinite; }
@keyframes hist-spin-anim { 100% { transform: rotate(360deg); } }


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 900px) {
  .hist-hero { padding: 24px 20px 16px; border-radius: 22px; }
  .hist-hero-top { flex-direction: column; gap: 16px; }
  .hist-hero-stats { align-self: flex-start; }

  .hist-content { grid-template-columns: 1fr; }

  .hist-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    border-radius: 0;
    z-index: 100;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-left: 1px solid var(--c-200);
  }
  .hist-detail-panel.open { transform: translateX(0); }

  .hist-detail-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .hist-detail-overlay.open { opacity: 1; pointer-events: auto; }
}

@media (max-width: 600px) {
  .hist-hero { padding: 20px 16px 14px; border-radius: var(--r-lg); }
  .hist-hero-icon { width: 38px; height: 38px; border-radius: var(--r-md); }
  .hist-hero-icon svg { width: 18px; height: 18px; }
  .hist-hero-title { font-size: var(--text-xl); }
  .hist-hero-sub { font-size: var(--text-sm); }

  .hist-filter-bar { flex-direction: column; align-items: stretch; }
  .hist-search-box { max-width: none; }
  .hist-filter-divider { display: none; }

  .hist-list-panel { border-radius: var(--r-lg); }
  .hist-list-scroll { padding: 6px; }

  .hist-detail-info-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════
   재고 관리 페이지 — inventory.css
   .inv-*   Page shell & tab content
   ══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   PAGE SHELL
──────────────────────────────────────────────────────── */

.inv-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--app-bg);
  overflow: hidden;
}

/* ── 콘텐츠 영역 ── */
.inv-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 28px;
}

/* ── 탭 패널 ── */
.inv-tab-panel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════
   재고 부족 알림 탭
   ══════════════════════════════════════════════════════════ */
.inv-alerts-wrap {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 20px;
}

.inv-alerts-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.inv-alerts-title {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-800);
}

.inv-alert-list {
  display: flex; flex-direction: column; gap: 8px;
}

.inv-alert-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-md);
  border-left: 3px solid var(--warning);
  transition: background .15s;
}
.inv-alert-item:hover { background: var(--c-50); }

.inv-alert-info { flex: 1; min-width: 0; }
.inv-alert-name {
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-alert-sub { font-size: var(--text-xs); color: var(--c-400); margin-top: 2px; }

.inv-alert-qty-group {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.inv-alert-qty-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.inv-qty-label { font-size: 10px; color: var(--c-400); font-weight: var(--font-semibold); text-transform: uppercase; }
.inv-qty-val { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-700); font-variant-numeric: tabular-nums; }
.inv-qty-val.danger { color: var(--error); }
.inv-alert-qty-sep { color: var(--c-300); font-size: var(--text-lg); }

.inv-shortage-badge {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-xs);
  background: var(--error-bg); color: var(--error);
  font-size: var(--text-xs); font-weight: var(--font-bold);
}

/* 편집 */
.inv-min-input {
  height: 28px; padding: 2px 6px; font-size: var(--text-sm); font-family: inherit;
  border: 1px solid var(--primary-soft); border-radius: var(--r-xs); outline: none;
  background: var(--app-surface); color: var(--c-800); text-align: center;
}
.inv-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200); background: var(--app-surface);
  cursor: pointer; color: var(--c-500); transition: all .15s;
}
.inv-icon-btn:hover { background: var(--c-100); color: var(--c-700); }
.inv-icon-btn.ok { border-color: var(--success); color: var(--success); }
.inv-icon-btn.ok:hover { background: var(--success-bg); }

.inv-btn-sm {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; font-size: var(--text-xs); font-family: inherit;
  border: 1px solid var(--c-200); border-radius: var(--r-xs);
  background: var(--app-surface); color: var(--c-600); cursor: pointer;
  transition: background .15s;
}
.inv-btn-sm:hover { background: var(--c-100); }

.inv-alert-hint {
  font-size: var(--text-xs); color: var(--c-400);
  padding: 8px 0; text-align: center;
}

/* 다크모드 */
[data-theme="dark"] .inv-alert-item { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .inv-alert-item:hover { background: var(--c-700); }
[data-theme="dark"] .inv-alert-name { color: var(--c-100); }
[data-theme="dark"] .inv-qty-val { color: var(--c-200); }
[data-theme="dark"] .inv-min-input { background: var(--c-800); border-color: var(--primary); color: var(--c-100); }
[data-theme="dark"] .inv-icon-btn { background: var(--c-700); border-color: var(--c-600); color: var(--c-300); }
[data-theme="dark"] .inv-btn-sm { background: var(--c-800); border-color: var(--c-600); color: var(--c-300); }
/* ══════════════════════════════════════════════════════════
   키워드 관리 페이지 — keywords.css
   .kw-*   접두사
   ══════════════════════════════════════════════════════════ */

.kw-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--app-bg);
  overflow: hidden;
}

.kw-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 28px 24px;
}

/* ── 통계 카드 ── */
.kw-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.kw-stat-card {
  flex: 1;
  min-width: 120px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kw-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.kw-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.kw-stat-card.warn .kw-stat-value {
  color: var(--orange, #f59e0b);
}

.kw-stat-card.danger .kw-stat-value {
  color: var(--red, #ef4444);
}

/* ── 필터 바 ── */
.kw-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.kw-platform-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.kw-platform-tab {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--card-bg);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: all .15s;
}

.kw-platform-tab:not(:last-child) {
  border-right: 1px solid var(--border);
}

.kw-platform-tab.active {
  background: var(--primary, #6366f1);
  color: #fff;
}

.kw-filter-select {
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  min-width: 90px;
}

.kw-search-input {
  padding: 5px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  min-width: 160px;
  flex: 1;
  max-width: 240px;
}

.kw-toolbar-spacer {
  flex: 1;
}

.kw-toolbar-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
  white-space: nowrap;
}

.kw-toolbar-btn:hover {
  border-color: var(--primary, #6366f1);
  color: var(--primary, #6366f1);
}

.kw-toolbar-btn.primary {
  background: var(--primary, #6366f1);
  color: #fff;
  border-color: var(--primary, #6366f1);
}

.kw-toolbar-btn.primary:hover {
  opacity: .9;
}

/* ── 테이블 ── */
.kw-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
}

.kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kw-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--table-header-bg, var(--card-bg));
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

.kw-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light, var(--border));
  color: var(--text);
  vertical-align: middle;
}

.kw-table tbody tr:hover {
  background: var(--hover-bg, rgba(99,102,241,.04));
}

.kw-table tbody tr:last-child td {
  border-bottom: none;
}

/* 우선순위 뱃지 */
.kw-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.kw-badge.pri-최상 { background: #fef2f2; color: #dc2626; }
.kw-badge.pri-상   { background: #fff7ed; color: #ea580c; }
.kw-badge.pri-중상 { background: #fefce8; color: #ca8a04; }
.kw-badge.pri-중   { background: #f0fdf4; color: #16a34a; }
.kw-badge.pri-낮음 { background: #f8fafc; color: #94a3b8; }

/* CPC 초과 경고 */
.kw-cpc-over {
  background: #fef2f2 !important;
}

.kw-cpc-over .kw-cpc-input {
  color: #dc2626;
  font-weight: 600;
}

/* 인라인 CPC 편집 */
.kw-cpc-input {
  width: 70px;
  padding: 3px 6px;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  text-align: right;
  transition: border-color .15s;
}

.kw-cpc-input:hover {
  border-color: var(--border);
}

.kw-cpc-input:focus {
  border-color: var(--primary, #6366f1);
  outline: none;
  background: var(--card-bg);
}

/* 활성/비활성 토글 */
.kw-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .2s;
  background: #d1d5db;
  padding: 0;
}

.kw-toggle.on {
  background: var(--primary, #6366f1);
}

.kw-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}

.kw-toggle.on::after {
  transform: translateX(14px);
}

/* 행 동작 버튼 */
.kw-row-actions {
  display: flex;
  gap: 4px;
}

.kw-row-btn {
  padding: 3px 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.kw-row-btn:hover {
  background: var(--hover-bg, rgba(0,0,0,.05));
  color: var(--text);
}

.kw-row-btn.danger:hover {
  color: #dc2626;
}

/* 빈 상태 */
.kw-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.kw-empty-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.kw-empty-desc {
  font-size: 13px;
}

/* 테이블 스크롤 영역 */
.kw-table-scroll {
  max-height: calc(100vh - 340px);
  overflow-y: auto;
}

/* ── 모달 ── */
.kw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: kw-fadeIn .15s;
}

@keyframes kw-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kw-modal {
  background: var(--card-bg);
  border-radius: 12px;
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.kw-modal.wide {
  width: 560px;
}

.kw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border);
}

.kw-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.kw-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.kw-modal-close:hover {
  color: var(--text);
  background: var(--hover-bg);
}

.kw-modal-body {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kw-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kw-form-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.kw-form-row input,
.kw-form-row select,
.kw-form-row textarea {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
}

.kw-form-row textarea {
  resize: vertical;
  min-height: 60px;
}

.kw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.kw-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 22px 18px;
  border-top: 1px solid var(--border);
}

.kw-modal-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
}

.kw-modal-btn.primary {
  background: var(--primary, #6366f1);
  color: #fff;
  border-color: var(--primary, #6366f1);
}

.kw-modal-btn.primary:hover {
  opacity: .9;
}

/* ── 드롭존 ── */
.kw-dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  color: var(--text-muted);
}

.kw-dropzone:hover,
.kw-dropzone.dragging {
  border-color: var(--primary, #6366f1);
  background: rgba(99, 102, 241, .04);
  color: var(--primary, #6366f1);
}

.kw-dropzone-icon {
  margin-bottom: 8px;
}

.kw-dropzone-text {
  font-size: 14px;
  font-weight: 500;
}

.kw-dropzone-hint {
  font-size: 12px;
  margin-top: 4px;
}

/* 가져오기 결과 */
.kw-import-result {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
}

.kw-import-result.success {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.kw-import-result.error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* 설정 미리보기 */
.kw-preview-box {
  background: var(--app-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
}

.kw-preview-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.kw-preview-label {
  color: var(--text-muted);
}

.kw-preview-value {
  font-weight: 600;
  color: var(--text);
}

/* 카운트 뱃지 (테이블 헤더) */
.kw-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 6px;
}

/* 플랫폼 뱃지 */
.kw-platform-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.kw-platform-badge.naver {
  background: #e8f5e9;
  color: #2e7d32;
}

.kw-platform-badge.coupang {
  background: #e3f2fd;
  color: #1565c0;
}

/* ── 뷰 전환 탭 ── */
.kw-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  width: fit-content;
}

.kw-view-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--card-bg);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.kw-view-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}

.kw-view-btn.active {
  background: var(--primary, #6366f1);
  color: #fff;
}

/* ── ROI 상태 뱃지 ── */
.kw-roi-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.kw-roi-badge-profit  { background: #dcfce7; color: #16a34a; }
.kw-roi-badge-warning { background: #fef9c3; color: #b45309; }
.kw-roi-badge-loss    { background: #fee2e2; color: #dc2626; }
.kw-roi-badge-no_cpc  { background: #f1f5f9; color: #94a3b8; }

/* ── ROI 요약 카드 색상 ── */
.kw-roi-profit-val { color: #16a34a !important; }
.kw-roi-warn-val   { color: #d97706 !important; }

/* ── 정렬 헤더 ── */
.kw-sortable {
  cursor: pointer;
  user-select: none;
}

.kw-sortable:hover {
  color: var(--primary, #6366f1);
}

/* ── ROI 안내 텍스트 ── */
.kw-roi-info-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}

/* ── 다크모드 ── */
[data-theme="dark"] .kw-roi-badge-profit  { background: rgba(22,163,74,.15);  color: #4ade80; }
[data-theme="dark"] .kw-roi-badge-warning { background: rgba(217,119,6,.15);  color: #fbbf24; }
[data-theme="dark"] .kw-roi-badge-loss    { background: rgba(220,38,38,.15);  color: #f87171; }
[data-theme="dark"] .kw-roi-badge-no_cpc  { background: rgba(148,163,184,.1); color: #94a3b8; }

/* 시즌 태그 */
.kw-season-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  background: var(--app-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base, #f0f2f5);
}

.login-card {
  background: var(--bg-card, #fff);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 380px;
}

.login-logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary, #1a56db);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.login-sub {
  font-size: 13px;
  color: var(--text-muted, #8a94a6);
  margin: 0 0 28px;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-field { display: flex; flex-direction: column; gap: 6px; }

.login-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #4b5563);
}

.login-field input {
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  background: var(--bg-input, #fff);
  color: var(--text-primary, #111827);
}

.login-field input:focus {
  border-color: var(--primary, #1a56db);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}

.login-error {
  font-size: 13px;
  color: #dc2626;
  margin: 0;
  padding: 8px 10px;
  background: #fef2f2;
  border-radius: 6px;
}

.login-btn {
  padding: 11px;
  background: var(--primary, #1a56db);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  margin-top: 4px;
}

.login-btn:hover:not(:disabled) { background: #1648c0; }
.login-btn:disabled { opacity: 0.6; cursor: default; }
/* ------------------------------------------- */
/* ORDERS PAGE STYLES - PREMIUM HERO DESIGN   */
/* PrintPage 디자인 적용                       */
/* ※ CSS 변수는 appTheme.css에서 통합 관리    */
/* ※ 숫자/코드용 폰트                          */
/* ------------------------------------------- */
:root {
  --font-num: 'Consolas', 'D2Coding', 'Menlo', 'SF Mono', monospace;
}

/* ============================================================================
   TOP TABS – 주문 관리 통합 탭 (주문 조회 / 발주서 / 반품·취소)
   ============================================================================ */

/* ord-top-tabs removed — using PageHeader compact tabs */

/* ============================================================================
   HEADER CARD – Clean, modern dashboard header
   ============================================================================ */

.ord-hd {
  background: var(--page-hd-bg);
  border: 1px solid var(--page-hd-border);
  border-radius: var(--page-hd-radius);
  margin-bottom: var(--page-hd-mb);
  box-shadow: var(--page-hd-shadow);
  overflow: visible;
  position: relative;
  z-index: 10;
}

/* ── Row 1: Title + Tabs + Actions ── */
.ord-hd-row1 {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-100);
}
.ord-hd-left {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.ord-hd-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: var(--app-surface); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ord-hd-title {
  font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-900); margin: 0;
  letter-spacing: -0.02em; line-height: 1.2;
}
.ord-hd-company {
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400);
  display: block;
}

/* Tabs */
.ord-hd-tabs {
  display: flex; gap: 2px; background: var(--c-100); border-radius: var(--r-sm); padding: 3px;
}
.ord-hd-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-500);
  background: transparent; border: none; cursor: pointer;
  transition: all .15s ease; font-family: inherit;
}
.ord-hd-tab:hover { color: var(--c-600); background: rgba(0,0,0,.03); }
.ord-hd-tab.active {
  color: var(--app-cta-hover); background: var(--app-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.02);
}
.ord-hd-tab-n {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400);
  background: var(--c-100); padding: 1px 6px; border-radius: var(--r-xs);
}
.ord-hd-tab.active .ord-hd-tab-n {
  color: var(--primary); background: var(--primary-soft);
}

/* Action buttons */
.ord-hd-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ord-hd-divider { width: 1px; height: 18px; background: var(--c-200); margin: 0 2px; flex-shrink: 0; }
.ord-hd-act {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--c-50); border: 1px solid var(--c-150);
  color: var(--c-500); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s ease;
}
.ord-hd-act:hover { background: var(--primary-soft); border-color: var(--c-300); color: var(--primary); }
.ord-hd-act.primary {
  background: var(--primary); border-color: var(--primary); color: var(--app-surface);
}
.ord-hd-act.primary:hover { background: var(--primary-deep); }
.ord-hd-act:disabled { opacity: .35; cursor: not-allowed; }
.ord-hd-act.primary:disabled { background: var(--c-200); border-color: var(--c-200); color: var(--c-400); opacity: 1; }

/* ── Row 2: KPI Strip ── */
.ord-hd-kpis {
  display: flex; align-items: stretch; gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--c-100);
}
.ord-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 20px 12px 0;
  border-right: 1px solid var(--c-100);
}
.ord-kpi:last-child { border-right: none; padding-right: 0; }
.ord-kpi:first-child { padding-left: 0; }
.ord-kpi + .ord-kpi { padding-left: 20px; }
.ord-kpi-label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); letter-spacing: .02em; }
.ord-kpi-val {
  font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); letter-spacing: -0.02em;
}
.ord-kpi-val.accent { color: var(--primary-deep); }
.ord-kpi-val.ret { color: var(--error-deep); }
.ord-kpi--ret { border-left: 2px solid var(--error-bg); padding-left: 12px; }

/* ── Row 3: Filters ── */
.ord-hd-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px;
}
.ord-hd-search-combo {
  display: flex; align-items: center; gap: 0;
  height: 32px; background: var(--c-100); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 0 10px 0 0;
  min-width: 200px; flex: 1; max-width: 340px;
  transition: all .15s;
}
.ord-hd-search-combo:focus-within { border-color: var(--c-300); background: var(--app-surface); }
.ord-hd-search-combo .app-select-btn {
  height: 30px !important; border: none !important; background: transparent !important;
  box-shadow: none !important; border-radius: 8px 0 0 8px !important;
  font-size: var(--text-xs) !important; font-weight: var(--font-semibold) !important; color: var(--primary) !important;
  padding: 0 6px 0 10px !important; min-width: 0 !important; flex-shrink: 0;
}
.ord-hd-search-combo .app-select-btn:hover { background: var(--primary-a06) !important; }
.ord-hd-search-divider {
  width: 1px; height: 16px; background: var(--c-200); flex-shrink: 0; margin-right: 8px;
}
.ord-hd-search-combo svg { flex-shrink: 0; }
.ord-hd-search {
  display: flex; align-items: center; gap: 7px;
  height: 32px; background: var(--c-100); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 0 10px;
  min-width: 160px; flex: 1; max-width: 260px;
  transition: all .15s;
}
.ord-hd-search:focus-within { border-color: var(--c-300); background: var(--app-surface); }
.ord-hd-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--c-800); font-family: inherit;
}
.ord-hd-search-input::placeholder { color: var(--c-300); }
.ord-clear-btn {
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: var(--c-200); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .1s; flex-shrink: 0;
}
.ord-clear-btn:hover { background: var(--c-300); }

.ord-hd-pills {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* Compact AppSelect inside header */
.ord-hd-pills .app-select-btn,
.ord-hd-filters .app-select-btn {
  height: 30px; padding: 0 9px; border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: var(--font-semibold);
  background: var(--app-surface); border: 1px solid var(--c-200); box-shadow: none;
}
.ord-hd-pills .app-select-btn:hover,
.ord-hd-filters .app-select-btn:hover {
  border-color: var(--c-300); background: var(--c-50); transform: none; box-shadow: none;
}
.ord-hd-pills .app-select-btn.is-open,
.ord-hd-filters .app-select-btn.is-open {
  border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-a06);
}

/* Small icon buttons */
.ord-hd-icon-btn {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--c-200); background: var(--app-surface); color: var(--c-400);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s; flex-shrink: 0;
}
.ord-hd-icon-btn:hover { border-color: var(--c-300); color: var(--primary); }
.ord-hd-icon-btn.danger { border-color: var(--error); color: var(--error); }
.ord-hd-icon-btn.danger:hover { background: var(--error-bg); border-color: var(--error); }

/* ------------------------------------------- */
/* ORDERS PAGE STYLES (Match History Design)   */
/* ------------------------------------------- */

/* Page Layout */
.ord-page {
  display: flex; flex-direction: column; gap: 0; width: 100%; height: 100%;
  padding: 24px; padding-bottom: 72px;
  background: var(--c-100);
  position: relative;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: visible !important;
}

.ord-page > * { position: relative; }

/* Header (legacy – hidden) */
.ord-header { display: none; }

/* Split Layout */
.ord-content { 
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; 
  gap: 14px; flex: 1; min-height: 0; position: relative; overflow: visible !important;
}

/* ── List Panel ── */
.ord-list-card { 
  background: var(--app-surface); border-radius: var(--r-lg); border: 1px solid var(--c-150);
  display: flex; flex-direction: column; overflow: visible !important; height: 100%; 
}
.ord-table-wrap { flex: 1; overflow: auto; }

/* ── Table ── */
.ord-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); table-layout: auto; }
.ord-table th { 
  position: sticky; top: 0; background: var(--c-50); color: var(--c-500); font-weight: var(--font-bold);
  text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--c-150); z-index: 1; 
  white-space: nowrap; font-size: var(--text-xs); letter-spacing: .02em;
}
.ord-table th:hover { color: var(--primary); }
.ord-th-inner { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ord-sort-icon { font-size: var(--text-xs); color: var(--primary); line-height: 1; }
.ord-table td { 
  padding: 10px 12px; border-bottom: 1px solid var(--c-100); color: var(--c-700); vertical-align: middle; 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ord-table tr { cursor: pointer; transition: background .1s; }
.ord-table tr:hover { background: var(--c-50); }
.ord-table tr.selected { background: var(--primary-soft); }
.ord-table tr.checked { background: var(--primary-soft); }

.c-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-bold { font-weight: var(--font-bold); color: var(--c-800); }
.c-blue { color: var(--primary); font-weight: var(--font-semibold); }
.c-green { color: var(--success); font-weight: var(--font-semibold); }
.c-dim { color: var(--c-400); }
.c-num { font-family: var(--font-num); letter-spacing: .3px; }
.c-inv-extra { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--info-deep); background: var(--info-bg); padding: 1px 5px; border-radius: var(--r-xs); vertical-align: middle; font-family: var(--font-num); }

/* ── Pagination ── */
.ord-pagination {
  padding: 10px 16px; border-top: 1px solid var(--c-150);
  display: flex; justify-content: center; align-items: center; gap: 8px;
}
.ord-pg-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--app-surface); color: var(--c-600); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s;
}
.ord-pg-btn:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--c-300); color: var(--primary); }
.ord-pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.ord-pg-info { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-500); min-width: 60px; text-align: center; }

/* ── Detail Panel ── */
.ord-detail-card {
  background: var(--app-surface); border-radius: var(--r-lg); border: 1px solid var(--c-150);
  display: flex; flex-direction: column; overflow: clip; height: 100%;
}

/* ═══════════════════════════════════════════════
   Detail Panel v4 — Clean & Simple (dp- prefix)
   ═══════════════════════════════════════════════ */

/* Header */
.dp-header {
  padding: 16px 18px 14px; border-bottom: 1px solid var(--c-150, var(--c-200));
  background: var(--app-surface);
}
.dp-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dp-header-badges { display: flex; align-items: center; gap: 6px; }
.dp-header-actions { display: flex; gap: 4px; }
.dp-type-badge {
  font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .3px;
  padding: 3px 8px; border-radius: var(--r-xs); border: 1px solid var(--c-200);
}
.dp-type--order { background: var(--primary-soft); color: var(--primary-deep); }
.dp-act-btn {
  width: 28px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--c-200);
  background: transparent; color: var(--c-400); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s;
}
.dp-act-btn:hover { border-color: var(--c-300); color: var(--c-700); }
.dp-act--danger:hover { border-color: var(--error); color: var(--error); }

/* 플랫폼 주문 상태/액션 */
.dp-plat-status {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.dp-plat-badge {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px;
  letter-spacing: -0.01em;
}
.dp-plat-badge--new { background: #dbeafe; color: #1d4ed8; }
.dp-plat-badge--confirmed { background: #e0e7ff; color: #4338ca; }
.dp-plat-badge--shipping { background: #fef3c7; color: #b45309; }
.dp-plat-badge--delivered { background: #d1fae5; color: #065f46; }
.dp-plat-badge--purchase_confirmed { background: #d1fae5; color: #047857; }
.dp-plat-badge--cancel_requested { background: #fee2e2; color: #b91c1c; }
.dp-plat-badge--cancelled { background: #fecaca; color: #991b1b; }
.dp-plat-badge--return_requested { background: #ffedd5; color: #c2410c; }
.dp-plat-badge--returned { background: #fed7aa; color: #9a3412; }
.dp-plat-badge--exchange_requested { background: #fef3c7; color: #a16207; }
.dp-plat-act {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: #fff; font-size: 11px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .12s; color: #4f46e5;
}
.dp-plat-act:hover { background: #eef2ff; border-color: #c7d2fe; }
.dp-plat-act:disabled { opacity: .4; cursor: not-allowed; }
.dp-plat-act--send { border-color: #6366f1; background: #6366f1; color: #fff; padding: 3px 8px; }
.dp-plat-act--send:hover { background: #4f46e5; }
.dp-plat-act--cancel { color: #94a3b8; padding: 3px 6px; }
.dp-plat-inv-form {
  display: flex; align-items: center; gap: 4px; flex: 1;
}
.dp-plat-inv-form input {
  width: 80px; padding: 3px 6px; border: 1px solid #e2e8f0; border-radius: 5px;
  font-size: 11px; font-family: var(--font-num); outline: none;
}
.dp-plat-inv-form input:focus { border-color: var(--primary); }
.dp-plat-act--accept { color: #059669; border-color: #a7f3d0; }
.dp-plat-act--accept:hover { background: #ecfdf5; border-color: #6ee7b7; }
.dp-plat-act--reject { color: #dc2626; border-color: #fecaca; }
.dp-plat-act--reject:hover { background: #fef2f2; border-color: #f87171; }
.dp-amount { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--c-900); letter-spacing: -.3px; line-height: 1.2; margin-top: 14px; margin-bottom: 0; }
.dp-amount-breakdown { display: flex; align-items: center; gap: 6px; margin-top: 4px; margin-bottom: 2px; font-size: var(--text-xs); flex-wrap: wrap; }
.dp-amount-orig { color: var(--c-400); }
.dp-amount-sep { color: var(--c-200); }
.dp-amount-refund { color: var(--error); font-weight: var(--font-semibold); }
.dp-dates { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--text-xs); color: var(--c-400); flex-wrap: wrap; }
.dp-dates span { display: inline-flex; align-items: center; gap: 3px; }
.dp-dates .dp-date-sep { color: var(--c-300); }
.dp-id-row {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.dp-id-label { font-size: var(--text-xs); color: var(--c-400); flex-shrink: 0; }
.dp-id-num { font-size: var(--text-sm); color: var(--c-600); font-family: var(--font-num); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.dp-id-copy {
  width: 20px; height: 20px; border: none; background: transparent; color: var(--c-300);
  display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--r-xs);
  flex-shrink: 0; transition: all .12s;
}
.dp-id-copy:hover { color: var(--primary); }

/* Tags (chips) */
.dp-tag { display: inline-flex; padding: 2px 8px; border-radius: var(--r-xs); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.dp-tag--muted { background: var(--c-100); color: var(--c-500); }
.dp-tag--link { background: var(--primary-soft); color: var(--primary-deep); cursor: pointer; transition: all .12s; }
.dp-tag--link:hover { background: var(--c-200); }
.dp-tag--sm { font-size: var(--text-xs); padding: 2px 6px; }
.dp-tag--쿠팡     { background: var(--warning-bg); color: var(--warning-text); }
.dp-tag--g마켓    { background: var(--success-bg); color: var(--success-text); }
.dp-tag--옥션     { background: var(--error-bg); color: var(--accent-warm); }
.dp-tag--네이버   { background: var(--success-bg); color: var(--success-text); }
.dp-tag--11번가   { background: var(--error-bg); color: var(--error-text); }
.dp-tag:not([class*="--쿠팡"]):not([class*="--g마켓"]):not([class*="--옥션"]):not([class*="--네이버"]):not([class*="--11번가"]):not([class*="--muted"]):not([class*="--link"]):not([class*="--sm"]) {
  background: var(--c-100); color: var(--c-600);
}
.dp-meta-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* Tracking hero (invoice header) */
.dp-tracking-hero { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dp-tracking-num { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--c-900); font-family: var(--font-num); letter-spacing: .5px; }
.dp-tracking-num--hero { font-size: var(--text-lg); letter-spacing: .8px; }

/* Body */
.dp-body { padding: 0; overflow-y: auto; flex: 1; padding-bottom: 8px; }

/* Section */
.dp-section { padding: 14px 18px; border-bottom: 1px solid var(--c-100); }
.dp-section:last-child { border-bottom: none; }
.dp-section--meta { padding: 12px 18px; background: var(--c-50); border-bottom: none; }
.dp-sec-head {
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400);
  display: flex; align-items: center; gap: 5px; margin-bottom: 10px;
}
.dp-sub-head { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); margin: 12px 0 6px; }

/* People */
.dp-people { display: flex; align-items: stretch; gap: 6px; }
.dp-person { flex: 1; border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; border: 1px solid var(--c-200); background: var(--app-surface); }
.dp-person--unified { background: var(--app-surface); }
.dp-person--buyer { background: var(--app-surface); }
.dp-person--receiver { background: var(--app-surface); }
.dp-person-role { font-size: var(--text-xs); color: var(--c-400); margin-bottom: 1px; }
.dp-person--buyer .dp-person-role { color: var(--c-400); }
.dp-person--receiver .dp-person-role { color: var(--c-400); }
.dp-person-name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-person-phone { font-size: var(--text-sm); color: var(--c-500); font-family: var(--font-num); }
.dp-person-arrow { display: flex; align-items: center; font-size: var(--text-sm); color: var(--c-300); flex-shrink: 0; }

/* Products */
.dp-product-list { border-top: 1px solid var(--c-100); }
.dp-prod { padding: 10px 0; border-bottom: 1px solid var(--c-100); }
.dp-prod:last-child { border-bottom: none; }
.dp-prod--ret { opacity: .4; }
.dp-prod-main { display: flex; align-items: baseline; gap: 6px; }
.dp-prod-name { flex: 1; min-width: 0; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.dp-prod-opt { font-size: var(--text-xs); color: var(--c-400); margin-top: 3px; }
.dp-prod-footer { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dp-prod-qty { flex-shrink: 0; font-size: var(--text-sm); color: var(--c-400); }
.dp-price-wrap { display: flex; flex-direction: column; gap: 2px; }
.dp-price { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--primary-deep); }
.dp-price--sub { color: var(--c-400); font-weight: var(--font-normal); }
.dp-price--actual { color: var(--success-deep); }
.dp-price-discount { font-size: var(--text-xs); color: var(--c-500); }
.dp-discount-total { font-weight: var(--font-semibold); color: var(--error); }
.c-discount { color: var(--error); font-size: var(--text-sm); }
.dp-ret-badge { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--error); background: var(--error-bg); padding: 2px 7px; border-radius: var(--r-xs); margin-left: 8px; }
.dp-ret-add-btn { font-size: var(--text-xs); color: var(--text-secondary); background: none; border: 1px solid var(--border); border-radius: var(--r-xs); padding: 2px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; margin-left: auto; transition: all .15s; }
.dp-ret-add-btn:hover { color: var(--error); border-color: var(--error); background: var(--error-bg); }

/* Returns — 독립 섹션 강조 */
.dp-section--returns {
  background: var(--error-bg); border-bottom-color: rgba(239,68,68,.15);
}
.dp-returns-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.dp-returns-title {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--error-deep);
}
.dp-returns-count {
  font-size: var(--text-xs); font-weight: var(--font-bold);
  background: var(--error); color: #fff; padding: 1px 7px; border-radius: var(--r-xs);
}
.dp-returns-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--error);
  background: none; border: none; cursor: pointer; font-family: inherit; transition: color .15s;
}
.dp-returns-link:hover { color: var(--error-deep); text-decoration: underline; }
.dp-ret-item { padding: 8px 0; border-bottom: 1px solid rgba(239,68,68,.12); }
.dp-ret-item:last-child { border-bottom: none; }
.dp-ret-top { display: flex; align-items: center; gap: 8px; }
.dp-ret-type { font-size: var(--text-xs); font-weight: var(--font-medium); padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid var(--c-200); color: var(--c-600); background: var(--app-surface); }
.dp-ret-type--return { border-color: var(--error-bg); color: var(--error); }
.dp-ret-type--cancel { border-color: var(--c-200); color: var(--c-500); }
.dp-ret-type--exchange { border-color: var(--c-200); color: var(--c-500); }
.dp-ret-info { font-size: var(--text-sm); color: var(--c-600); flex: 1; }
.dp-ret-del {
  width: 20px; height: 20px; border: none; background: transparent; color: var(--c-300);
  font-size: var(--text-md); cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs); transition: all .12s;
}
.dp-ret-del:hover { color: var(--error); }
.dp-ret-status-badge {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px;
  line-height: 1.3;
}
.dp-ret-status--done { background: #d1fae5; color: #065f46; }
.dp-ret-status--pending { background: #fee2e2; color: #991b1b; }
.dp-ret-dates { font-size: var(--text-xs); color: var(--c-400); margin-top: 2px; }
.dp-ret-reason { color: var(--c-400); margin-left: 6px; }

/* Delivery */
.dp-addr-block { padding: 8px 0; margin-bottom: 6px; }
.dp-zip { font-size: var(--text-xs); color: var(--c-400); font-family: var(--font-num); display: block; margin-bottom: 2px; }
.dp-addr { font-size: var(--text-sm); color: var(--c-700); line-height: 1.6; word-break: keep-all; }
.dp-memo {
  border-left: 2px solid var(--c-200); padding: 6px 10px;
  font-size: var(--text-sm); line-height: 1.5; color: var(--c-600); margin-bottom: 8px;
}
.dp-tracking-card {
  background: var(--app-surface); border: 1px solid var(--c-200); border-radius: var(--r-sm); padding: 10px 12px;
}
.dp-tracking-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.dp-courier-badge {
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--success-text); background: var(--success-bg); padding: 2px 8px; border-radius: var(--r-xs);
}
.dp-courier-badge--sm { font-size: var(--text-xs); padding: 1px 6px; }
.dp-track-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--info-deep);
  background: transparent; border: 1px solid var(--info-bg); padding: 3px 10px; border-radius: var(--r-xs);
  cursor: pointer; transition: all .12s;
}
.dp-track-btn:hover { background: var(--info-bg); }

/* 추가 운송장 더보기 버튼 */
.dp-inv-more-btn {
  display: inline-flex; align-items: center; gap: 3px; margin-left: auto;
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--info-deep);
  background: var(--info-bg); border: none; padding: 2px 8px; border-radius: var(--r-xs);
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.dp-inv-more-btn:hover { opacity: .8; }

/* 추가 운송장 카드 (들여쓰기) */
.dp-tracking-card--secondary { margin-left: 10px; border-left: 2px solid var(--info-bg); }

/* 운송장 삭제 버튼 */
.dp-inv-del-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--c-400);
  padding: 3px; border-radius: var(--r-xs); transition: all .12s; margin-left: auto;
}
.dp-inv-del-btn:hover { color: var(--danger-text); background: var(--danger-bg); }
.dp-inv-del-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 출고일 표시 */
.dp-shipped-date { font-size: var(--text-xs); color: var(--c-500); margin-left: 6px; }

/* 운송장 추가 트리거 버튼 */
.dp-inv-add-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--info-deep);
  background: transparent; border: 1px dashed var(--info-bg); padding: 5px 12px;
  border-radius: var(--r-xs); cursor: pointer; transition: all .12s; margin-top: 6px; width: 100%;
  justify-content: center;
}
.dp-inv-add-trigger:hover { background: var(--info-bg); }

/* 운송장 추가 모달 */
.dp-inv-modal { background: var(--app-surface); border-radius: 14px; width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,.18); animation: ord-modal-in .15s ease; }
.dp-inv-modal-header { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--c-100); font-size: 14px; font-weight: 700; color: var(--c-800); border-radius: 14px 14px 0 0; }
.dp-inv-modal-header > button { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--c-400); display: flex; padding: 2px; border-radius: 4px; }
.dp-inv-modal-header > button:hover { color: var(--c-700); background: var(--c-100); }
.dp-inv-modal .app-select-menu { max-height: 200px; overflow-y: auto; }
.dp-inv-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.dp-inv-modal-field { display: flex; flex-direction: column; gap: 5px; }
.dp-inv-modal-label { font-size: 11px; font-weight: 600; color: var(--c-500); letter-spacing: .04em; text-transform: uppercase; }
.dp-inv-modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--c-100); }
.dp-inv-modal-cancel { padding: 7px 16px; border-radius: 8px; border: 1px solid var(--c-200); background: var(--app-surface); font-size: 13px; font-weight: 600; color: var(--c-600); cursor: pointer; transition: all .12s; }
.dp-inv-modal-cancel:hover { background: var(--c-50); border-color: var(--c-300); }
.dp-inv-modal-save { padding: 7px 16px; border-radius: 8px; border: 1px solid var(--primary); background: var(--primary); font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; gap: 5px; }
.dp-inv-modal-save:hover:not(:disabled) { background: var(--primary-deep); }
.dp-inv-modal-save:disabled { opacity: .5; cursor: not-allowed; }
.dp-inv-input {
  width: 100%; padding: 7px 10px; font-size: var(--text-sm);
  border: 1px solid var(--c-200); border-radius: 8px; background: var(--app-surface);
  color: var(--c-900); outline: none; box-sizing: border-box;
}
.dp-inv-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-a12); }

/* Count badge */
.dp-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--c-500); background: var(--c-100); border-radius: var(--r-sm); padding: 0 4px; margin-left: 3px;
}

/* Link cards */
.dp-link-card {
  background: var(--app-surface); border: 1px solid var(--c-200); border-radius: var(--r-sm); padding: 8px 10px;
  cursor: pointer; transition: all .12s; margin-bottom: 4px;
}
.dp-link-card:hover { background: var(--c-50); border-color: var(--c-300); }
.dp-link-top { display: flex; align-items: center; gap: 6px; }
.dp-link-num { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--c-700); font-family: var(--font-num); letter-spacing: .3px; }
.dp-link-ext {
  width: 20px; height: 20px; border: none; background: transparent; color: var(--c-300);
  display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--r-xs);
  transition: all .12s; margin-left: auto;
}
.dp-link-ext:hover { color: var(--c-500); }
.dp-link-amount { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-700); margin-left: auto; }
.dp-link-sub { font-size: var(--text-xs); color: var(--c-400); margin-top: 2px; }

/* Expand button */
.dp-expand-btn {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 100%; padding: 5px 0; margin-top: 4px;
  font-size: var(--text-xs); color: var(--c-400);
  background: transparent; border: 1px solid var(--c-200); border-radius: var(--r-xs);
  cursor: pointer; transition: all .12s;
}
.dp-expand-btn:hover { background: var(--c-50); color: var(--c-600); }

/* Meta */
.dp-meta-line { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.dp-meta-k { font-size: var(--text-xs); color: var(--c-400); }
.dp-meta-v { font-size: var(--text-xs); color: var(--c-500); font-family: var(--font-num); max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

/* Detail Header V2 */

/* Chips */

/* Detail Body V2 */

/* People V2 */

/* Section V2 */

/* Info Card */

/* Products V2 */

/* Memo V2 */

/* Invoice Card */
/* ── 운송장 카드 v2 (택배사/번호 분리) ── */

/* ── 기존 카드 (하위호환 유지) ── */

/* ── 연동 송장 카드 v2 (컴팩트) ── */

/* 섹션 건수 뱃지 */

/* 더보기/접기 버튼 */

/* Linked invoice cards */

/* ── 배송조회 버튼 ── */

/* Link badge on order_no */
.ord-link-badge { font-size: var(--text-sm); line-height: 1; flex-shrink: 0; }

/* Chip link style */

/* Empty V2 */
.ord-empty-v2 {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 12px; padding: 40px; text-align: center;
}
.ord-empty-icon { color: var(--c-300); }
.ord-empty-text { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-400); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Overlay (Hidden on desktop for detail panel slide) */
.ord-overlay { display: none; }

/* Modal overlay - always visible when open */
.ord-modal-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ord-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Responsive */
@media (max-width: 1000px) {
  .ord-content { grid-template-columns: 1fr; }
  
  .ord-detail-card {
    position: fixed; top: 0; right: 0; bottom: 0; 
    width: 100%; max-width: 420px; 
    border-radius: 0; z-index: 100;
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    transform: translateX(100%); 
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-left: 1px solid var(--c-200);
  }
  
  .ord-detail-card.open { transform: translateX(0); }
  
  .ord-overlay {
    display: block;
    position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 90;
    opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(2px);
  }
  .ord-overlay.open { opacity: 1; pointer-events: auto; }
}

@media (max-width: 768px) {
  .ord-hd-row1 { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .ord-hd-tabs { order: 3; flex-basis: 100%; }
  .ord-hd-title { font-size: var(--text-md); }
  .ord-hd-kpis { padding: 0 16px; flex-wrap: wrap; }
  .ord-kpi { padding: 8px 12px 8px 0; }
  .ord-hd-filters { padding: 8px 16px; }
  .ord-hd-search { max-width: none; min-width: 0; }
  .ord-hd-search-combo { max-width: none; min-width: 0; }
  .ord-hd-pills { gap: 5px; }
    }
/* ============================================================================
   거래처 선택 모달 - Modern Design
   ============================================================================ */

.ord-supplier-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 440px;
  background: var(--app-surface);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
  animation: supplierModalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes supplierModalIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.supplier-modal-header {
  padding: 28px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.supplier-modal-header h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--c-900);
  letter-spacing: -0.02em;
}

.supplier-modal-close {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-200);
  background: var(--c-50);
  color: var(--c-400);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.supplier-modal-close:hover {
  background: var(--c-100);
  color: var(--c-600);
  border-color: var(--c-300);
  transform: rotate(90deg);
}

.supplier-modal-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Input 래퍼 */
.supplier-input-wrap {
  position: relative;
}

.supplier-input-wrap::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--c-400);
  border-bottom: 2px solid var(--c-400);
  transform: translateY(-60%) rotate(45deg);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.supplier-input-wrap:focus-within::after {
  transform: translateY(-40%) rotate(-135deg);
  border-color: var(--primary);
}

.supplier-input {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 18px;
  border: 2px solid var(--c-200);
  border-radius: var(--r-md);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--c-900);
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none !important;
  background: var(--c-50);
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.supplier-input:focus {
  border-color: var(--primary) !important;
  background: var(--app-surface) !important;
  box-shadow: 0 0 0 4px var(--primary-a08) !important;
}

.supplier-input::placeholder {
  color: var(--c-400);
  font-weight: var(--font-medium);
}

/* 브라우저 datalist 스타일 제거 */
.supplier-input::-webkit-calendar-picker-indicator,
.supplier-input::-webkit-list-button,
.supplier-input::-webkit-inner-spin-button,
.supplier-input::-webkit-search-decoration,
.supplier-input::-webkit-search-cancel-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* 거래처 칩 */
.supplier-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-chip {
  padding: 10px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-200);
  background: var(--app-surface);
  color: var(--c-600);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.supplier-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-a06), rgba(139, 92, 246, 0.04));
  opacity: 0;
  transition: opacity 0.2s;
}

.supplier-chip:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--primary-a12);
}

.supplier-chip:hover::before {
  opacity: 1;
}

.supplier-chip:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

/* Footer */
.supplier-modal-footer {
  padding: 0 28px 28px;
  display: flex;
  gap: 12px;
}

.supplier-modal-btn {
  flex: 1;
  height: 50px;
  border-radius: var(--r-md);
  border: none;
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.supplier-modal-btn.cancel {
  background: var(--c-100);
  color: var(--c-500);
  border: 1px solid var(--c-200);
}

.supplier-modal-btn.cancel:hover {
  background: var(--c-200);
  color: var(--c-600);
}

.supplier-modal-btn.confirm {
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  color: white;
  box-shadow: 0 4px 16px var(--primary-a30);
}

.supplier-modal-btn.confirm:hover {
  box-shadow: 0 6px 24px var(--primary-a40);
  transform: translateY(-1px);
}

.supplier-modal-btn:active {
  transform: scale(0.98) !important;
}

/* ============================================================================
   SM-SHELL FOCUS OVERRIDE - 하늘색 테두리/그림자 제거
   ui.css의 .sm-shell :where(input:focus, select:focus) 규칙 무효화
   ============================================================================ */

.ord-page input:focus,
.ord-page select:focus,
.ord-page button:focus,
.ord-page [role="combobox"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* sm-shell 내부 orders 페이지 input/select 포커스 스타일 완전 제거 */
.sm-shell .ord-page input:focus,
.sm-shell .ord-page select:focus,
.sm-shell .ord-page textarea:focus,
.sm-shell .ods-page input:focus,
.sm-shell .ods-page select:focus,
.sm-shell .ods-page textarea:focus {
  border-color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 검색창만 보라색 포커스 허용 */
.sm-shell .ord-page .ord-search-box-large:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 16px var(--primary-a12) !important;
}

.sm-shell .ord-page .ord-search-input-large:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* AppSelect 버튼 포커스 스타일 제거 */
.sm-shell .ord-page .app-select-btn,
.sm-shell .ord-page .app-select-btn:focus,
.sm-shell .ord-page .app-select-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================================
   DATE RANGE INPUTS
   ============================================================================ */

.ord-date-range-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ord-date-range-group .adp-trigger {
  border: 1.5px solid var(--c-200);
  height: 32px;
  font-size: var(--text-sm);
}

.ord-date-range-group .ord-date-sep {
  margin: 0 2px;
}

.ord-date-input {
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--c-200);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: inherit;
  color: var(--ord-text-primary);
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 115px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Hide default calendar icon, make entire input clickable */
.ord-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ord-date-input:hover {
  border-color: var(--primary-a30);
  background: linear-gradient(to bottom, var(--app-surface), var(--c-50));
  box-shadow: 0 2px 8px var(--primary-a08), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.ord-date-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-a08) !important;
}

.ord-date-sep {
  font-size: var(--text-base);
  color: var(--ord-text-muted);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}

/* sm-shell override for date inputs in orders page */
.sm-shell .ord-page .ord-date-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-a08) !important;
}

/* ============================================================================
   COLUMN PICKER
   ============================================================================ */

.ord-col-picker-wrap {
  position: relative;
}

.ord-filter-col-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-200);
  background: var(--app-surface);
  color: var(--c-500);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ord-filter-col-btn:hover,
.ord-filter-col-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-a06);
}

.ord-col-picker-popup {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 280px;
  max-height: 420px;
  background: var(--app-surface);
  border: 1px solid var(--c-200);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  animation: appDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.ord-col-picker-popup.wide { width: 340px; }

.ord-col-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--c-100);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--ord-text-primary);
}

.ord-col-picker-actions {
  display: flex;
  gap: 6px;
}

.ord-col-picker-actions button {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-200);
  background: var(--app-surface);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--ord-text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.ord-col-picker-actions button:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-a06);
}

.ord-col-picker-list {
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Section labels */
.ord-col-section-label {
  font-size: var(--text-xs); font-weight: var(--font-extrabold); color: var(--primary);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 8px 8px 4px; user-select: none;
}
.ord-col-section-label.off {
  color: var(--c-400);
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--c-100);
}

/* ── Row (new unified item) ── */
.ord-col-picker-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-semibold);
  user-select: none; transition: background .1s;
}
.ord-col-picker-row.checked {
  color: var(--ord-text-primary);
  cursor: grab;
}
.ord-col-picker-row.checked:active { cursor: grabbing; background: var(--primary-soft); }
.ord-col-picker-row.unchecked {
  color: var(--ord-text-secondary); opacity: .6;
  cursor: pointer; padding-left: 10px;
}
.ord-col-picker-row:hover { background: var(--c-50); }
.ord-col-picker-row.unchecked:hover { opacity: 1; background: var(--success-bg); }

/* grip handle */
.ord-col-grip { color: var(--c-300); flex-shrink: 0; }

/* label (clickable to remove on checked rows) */
.ord-col-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-col-picker-row.checked .ord-col-row-label { cursor: pointer; }

/* up/down arrows */
.ord-col-arrows { display: flex; flex-direction: column; gap: 0; flex-shrink: 0; }
.ord-col-arrows button {
  border: none; background: none; padding: 1px; cursor: pointer;
  color: var(--c-400); border-radius: var(--r-xs); display: flex; align-items: center;
  transition: color .1s, background .1s;
}
.ord-col-arrows button:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); }
.ord-col-arrows button:disabled { opacity: .25; cursor: default; }

/* remove X button */
.ord-col-remove {
  border: none; background: none; padding: 2px; cursor: pointer;
  color: var(--c-300); border-radius: var(--r-xs); display: flex; align-items: center;
  flex-shrink: 0; transition: color .1s, background .1s;
}
.ord-col-remove:hover { color: var(--error); background: var(--error-bg); }

/* add icon for unchecked rows */
.ord-col-add-icon { color: #22c55e; flex-shrink: 0; }

/* footer */
.ord-col-picker-footer {
  padding: 8px 12px; border-top: 1px solid var(--c-100);
  display: flex; justify-content: center;
}
.ord-col-picker-footer button {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--c-200); background: var(--c-50);
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-500);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.ord-col-picker-footer button:hover {
  border-color: var(--primary); color: var(--primary); background: var(--c-50);
}

/* ── Dark mode ── */
[data-theme="dark"] .ord-col-picker-popup { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ord-col-picker-header { border-bottom-color: var(--c-700); }
[data-theme="dark"] .ord-col-picker-actions button { background: var(--c-200); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .ord-col-picker-actions button:hover { border-color: var(--primary); color: var(--primary); }
[data-theme="dark"] .ord-col-section-label { color: var(--primary); }
[data-theme="dark"] .ord-col-section-label.off { color: var(--c-500); border-top-color: var(--c-700); }
[data-theme="dark"] .ord-col-picker-row:hover { background: var(--c-200); }
[data-theme="dark"] .ord-col-picker-row.checked:active { background: var(--primary-deep); }
[data-theme="dark"] .ord-col-picker-row.unchecked:hover { background: rgba(94, 234, 212, 0.08); }
[data-theme="dark"] .ord-col-grip { color: var(--c-600); }
[data-theme="dark"] .ord-col-arrows button:hover:not(:disabled) { color: var(--primary); background: var(--primary-deep); }
[data-theme="dark"] .ord-col-remove:hover { color: var(--error); background: rgba(248, 113, 113, 0.08); }
[data-theme="dark"] .ord-col-picker-footer { border-top-color: var(--c-700); }
[data-theme="dark"] .ord-col-picker-footer button { background: var(--c-200); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .ord-col-picker-footer button:hover { border-color: var(--primary); color: var(--primary); }

/* ============================================================================
   Reset Confirmation Modal
   ========================================================================= */

.ord-reset-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: var(--r-xl);
  border: 1px solid rgba(226, 232, 240, 0.5);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  padding: 28px 24px 20px;
  z-index: 100001;
  animation: resetModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

@keyframes resetModalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* overlay - rendered directly so always visible */
.ord-reset-modal + .ord-modal-overlay,
.ord-modal-overlay + .ord-reset-modal { z-index: 100001; }
.showResetModal > .ord-modal-overlay { opacity: 1; pointer-events: auto; }

/* Icon */
.ord-reset-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--error);
}
.ord-reset-modal-icon.success {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}

/* Title */
.ord-reset-modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

/* Description */
.ord-reset-modal-desc {
  font-size: var(--text-base);
  color: var(--c-500);
  line-height: 1.6;
  margin-bottom: 20px;
}
.ord-reset-modal-desc strong {
  color: var(--c-700);
}

/* Options (checkboxes) */
.ord-reset-modal-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.ord-reset-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-200);
  background: rgba(248, 250, 252, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.ord-reset-option:hover {
  border-color: var(--primary-a30);
  background: rgba(248, 250, 252, 0.9);
}
.ord-reset-option.checked {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(254, 242, 242, 0.6);
}

.ord-reset-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xs);
  accent-color: var(--error);
  cursor: pointer;
  flex-shrink: 0;
}

.ord-reset-option-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.ord-reset-option-label {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--c-700);
}

.ord-reset-option-count {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--c-400);
  background: rgba(241, 245, 249, 0.8);
  padding: 2px 10px;
  border-radius: var(--r-xl);
}

/* Actions */
.ord-reset-modal-actions {
  display: flex;
  gap: 8px;
}

/* Range selector */
.ord-reset-range {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.ord-reset-range-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-200);
  background: rgba(248, 250, 252, 0.6);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--c-500);
  transition: all 0.15s ease;
  user-select: none;
}
.ord-reset-range-opt input[type="radio"] { display: none; }
.ord-reset-range-opt.active {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(254, 242, 242, 0.7);
  color: var(--error-deep);
}
.ord-reset-dates {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.ord-reset-dates-sep {
  font-size: var(--text-md);
  color: var(--c-400);
  font-weight: var(--font-semibold);
  padding-top: 10px;
}

/* ── DatePicker (매출분석 달력 통일) ── */
.ord-dp { position: relative; flex: 1; }
.ord-dp-field {
  display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1.5px solid var(--c-200);
  background: var(--c-50); cursor: pointer;
  transition: all .15s; user-select: none;
}
.ord-dp-field:hover { border-color: var(--primary); background: var(--c-50); }
.ord-dp-icon { color: var(--c-400); flex-shrink: 0; }
.ord-dp-field:hover .ord-dp-icon { color: var(--primary); }
.ord-dp-val { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-800); }
.ord-dp-val:empty::after { content: attr(data-placeholder); color: var(--c-400); }

.ord-dp-pop {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  z-index: 100010;
  background: var(--app-surface); border-radius: var(--r-lg);
  border: 1px solid var(--c-200);
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.05);
  width: 290px; padding: 16px;
  animation: ord-dp-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ord-dp-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.95) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}
.ord-dp-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.ord-dp-title {
  font-weight: var(--font-bold); font-size: var(--text-md); color: var(--c-800);
  background: none; border: none; cursor: pointer;
  padding: 4px 10px; border-radius: var(--r-sm);
  transition: all 0.15s;
}
.ord-dp-title:hover { background: var(--c-100); color: var(--primary); }
.ord-dp-nav {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-200); background: var(--app-surface);
  cursor: pointer; color: var(--c-500); transition: all 0.15s;
}
.ord-dp-nav:hover { background: var(--c-50); color: var(--primary); border-color: var(--c-300); }
.ord-dp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px; text-align: center;
}
.ord-dp-weekday { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.ord-dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; margin-bottom: 12px;
}
.ord-dp-day {
  height: 32px; border-radius: var(--r-sm); border: none;
  background: transparent; font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--c-800); cursor: pointer; transition: all 0.1s;
}
.ord-dp-day:not(.sel):hover { background: var(--c-100); }
.ord-dp-day.out { color: var(--c-300); }
.ord-dp-day.today { font-weight: var(--font-bold); color: var(--primary); background: var(--primary-soft); }
.ord-dp-day.sel {
  background: var(--primary) !important; color: white !important;
  font-weight: var(--font-bold); box-shadow: 0 3px 8px var(--primary-a40);
}
.ord-dp-day.sel:hover { background: var(--primary-deep) !important; }
.ord-dp-foot { display: flex; gap: 6px; }
.ord-dp-foot-btn {
  flex: 1; height: 32px; border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer;
  border: none; background: var(--c-50); color: var(--c-500);
  transition: all 0.1s;
}
.ord-dp-foot-btn:hover { background: var(--c-200); color: var(--c-800); }
.ord-dp-foot-btn.ghost { background: transparent; }
.ord-dp-foot-btn.reset { background: var(--warning-bg); color: var(--warning-deep); }
.ord-dp-foot-btn.reset:hover { background: var(--warning-bg); color: var(--warning-text); }
.ord-dp-mgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding: 6px 0 12px;
}
.ord-dp-mcell {
  height: 38px; border-radius: var(--r-sm); border: none;
  background: var(--c-50); color: var(--c-600); font-size: var(--text-base); font-weight: var(--font-semibold);
  cursor: pointer; transition: all 0.12s;
}
.ord-dp-mcell:hover { background: var(--primary-soft); color: var(--primary); }
.ord-dp-mcell.sel {
  background: var(--primary); color: white;
  box-shadow: 0 3px 8px var(--primary-a40);
}
.ord-dp-mcell.today:not(.sel) {
  font-weight: var(--font-bold); color: var(--primary);
  background: var(--primary-soft);
}
.ord-dp-mcell.out { color: var(--c-300); }

.ord-reset-modal-btn {
  flex: 1;
  height: 42px;
  border-radius: var(--r-md);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}

.ord-reset-modal-btn.cancel {
  background: rgba(241, 245, 249, 0.8);
  color: var(--c-500);
}
.ord-reset-modal-btn.cancel:hover {
  background: rgba(226, 232, 240, 0.8);
  color: var(--c-600);
}

.ord-reset-modal-btn.danger {
  background: linear-gradient(135deg, var(--error), var(--error-deep));
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.ord-reset-modal-btn.danger:hover {
  background: linear-gradient(135deg, var(--error-deep), var(--error-deep));
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}
.ord-reset-modal-btn.danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.ord-reset-modal-btn.confirm {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: white;
  box-shadow: 0 4px 12px var(--primary-a30);
}
.ord-reset-modal-btn.confirm:hover {
  background: linear-gradient(135deg, var(--primary-deep), var(--app-cta-hover));
}

/* ============================================================================
   Notification Toast
   ========================================================================= */

.ord-notif {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100002;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 300px;
  max-width: 420px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(226, 232, 240, 0.6);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  animation: notifSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  overflow: hidden;
}
.ord-notif:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

@keyframes notifSlideIn {
  from { opacity: 0; transform: translateX(40px) translateY(-8px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}

/* Icon */
.ord-notif-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Type variants */
.ord-notif-loading .ord-notif-icon {
  background: var(--primary-a08);
  color: var(--primary);
}
.ord-notif-success .ord-notif-icon {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}
.ord-notif-error .ord-notif-icon {
  background: rgba(239, 68, 68, 0.08);
  color: var(--error);
}
.ord-notif-info .ord-notif-icon {
  background: rgba(59, 130, 246, 0.08);
  color: var(--info);
}

/* Loading border accent */
.ord-notif-loading {
  border-color: var(--app-cta-ring);
}
.ord-notif-success {
  border-color: rgba(34, 197, 94, 0.2);
}
.ord-notif-error {
  border-color: rgba(239, 68, 68, 0.2);
}

/* Body */
.ord-notif-body {
  flex: 1;
  min-width: 0;
}

.ord-notif-title {
  font-size: var(--text-md);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.ord-notif-line {
  font-size: var(--text-base);
  color: var(--c-600);
  line-height: 1.5;
  word-break: break-all;
}

.ord-notif-sub {
  font-size: var(--text-sm);
  color: var(--c-400);
  margin-top: 4px;
  font-weight: var(--font-semibold);
}

/* Close button */
.ord-notif-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--r-xs);
  border: none;
  background: transparent;
  color: var(--c-400);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  margin: -4px -4px 0 0;
}
.ord-notif-close:hover {
  background: rgba(241, 245, 249, 0.8);
  color: var(--c-500);
}

/* Spin */
.ord-spin {
  animation: spin 1s linear infinite;
}

/* Loading shimmer on border */
.ord-notif-loading::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: notifShimmer 1.5s ease-in-out infinite;
}

@keyframes notifShimmer {
  0%, 100% { opacity: 0.3; transform: scaleX(0.5); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

/* ============================================================================
   Notification Modal (success / error / loading / info)
   ========================================================================= */

.ord-notif-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: var(--r-xl);
  border: 1px solid rgba(226, 232, 240, 0.5);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  padding: 28px 24px 22px;
  z-index: 100001;
  text-align: center;
  animation: notifModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notifModalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Icon */
.ord-notif-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: all 0.3s ease;
}

.ord-notif-loading .ord-notif-icon-wrap {
  background: var(--primary-a08);
  color: var(--primary);
}
.ord-notif-success .ord-notif-icon-wrap {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}
.ord-notif-error .ord-notif-icon-wrap {
  background: rgba(239, 68, 68, 0.08);
  color: var(--error);
}
.ord-notif-info .ord-notif-icon-wrap {
  background: rgba(59, 130, 246, 0.08);
  color: var(--info);
}

/* Title */
.ord-notif-title {
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

/* Lines */
.ord-notif-lines {
  margin-bottom: 6px;
}

.ord-notif-line {
  font-size: var(--text-base);
  color: var(--c-600);
  line-height: 1.7;
}

/* Sub text */
.ord-notif-sub {
  font-size: var(--text-sm);
  color: var(--c-400);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.5);
}

/* Progress bar (loading) */
.ord-notif-progress {
  margin-top: 16px;
  height: 4px;
  border-radius: var(--r-xs);
  background: rgba(226, 232, 240, 0.5);
  overflow: hidden;
}

.ord-notif-progress-bar {
  height: 100%;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--primary), var(--primary), var(--primary));
  background-size: 200% 100%;
  animation: notifProgressSlide 1.5s ease-in-out infinite;
  width: 40%;
}

@keyframes notifProgressSlide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* Confirm button */
.ord-notif-btn {
  margin-top: 18px;
  width: 100%;
  height: 42px;
  border-radius: var(--r-md);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ord-notif-success .ord-notif-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.ord-notif-success .ord-notif-btn:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.ord-notif-error .ord-notif-btn {
  background: linear-gradient(135deg, var(--error), var(--error-deep));
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.ord-notif-error .ord-notif-btn:hover {
  background: linear-gradient(135deg, var(--error-deep), var(--error-deep));
}

.ord-notif-info .ord-notif-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: white;
  box-shadow: 0 4px 12px var(--primary-a30);
}
.ord-notif-info .ord-notif-btn:hover {
  background: linear-gradient(135deg, var(--primary-deep), var(--app-cta-hover));
}

/* Spinning loader */
.ord-notif-modal .ord-spin {
  animation: spin 1s linear infinite;
}

/* ── 반품/취소 관련 스타일 ── */

/* 목록 반품 뱃지 */
.c-ret-badge {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--error-deep);
  background: var(--error-bg); padding: 2px 6px; border-radius: var(--r-xs);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 3px;
}
.c-ret-status {
  font-size: 10px; font-weight: 600; padding: 1px 4px; border-radius: 3px;
  line-height: 1.2;
}
.c-ret-done { background: #d1fae5; color: #065f46; }
.c-ret-partial { background: #fef3c7; color: #92400e; }
.c-ret-pending { background: #fee2e2; color: #991b1b; }
/* 타입별 배지 색상 */
.c-ret-badge--cancel { color: #92400e; background: #fef3c7; }
.c-ret-badge--exchange { color: #3730a3; background: #ede9fe; }
.c-ret-type { font-weight: 700; }
.c-muted { color: var(--c-300); }

/* 목록 금액 컬럼 (반품 있을 때) */
.c-amount-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.3; }
.c-qty-wrap { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.3; }
.c-amount-orig-small { font-size: 10px; color: var(--c-300); text-decoration: line-through; }
.c-qty-ret { font-size: 10px; color: #e67e22; font-weight: 600; }

/* 상세 헤더 반품 라인 */

/* ── 반품 모달 팝업 ── */
.rt-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s;
}
.rt-modal {
  background: var(--app-surface); border-radius: var(--r-lg); width: 380px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: slideUp .2s ease-out;
  overflow: hidden;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.rt-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 0;
}
.rt-modal-title { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-800); }
.rt-modal-close {
  width: 28px; height: 28px; border-radius: var(--r-sm); border: none;
  background: var(--c-100); color: var(--c-500); font-size: var(--text-lg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rt-modal-close:hover { background: var(--c-200); }
.rt-modal-product {
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-600);
  padding: 8px 20px 12px; border-bottom: 1px solid var(--c-100);
}
.rt-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.rt-modal .dt-rf-buttons { padding: 12px 20px 20px; }

/* 반품 완료된 상품라인 */

/* 반품 뱃지 */

/* 상품라인 하단 액션 */

/* ── 반품 폼 ── */
.dt-rf-product {
  font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-800);
  padding-bottom: 10px; border-bottom: 1px solid var(--c-100);
}
.dt-rf-row { display: flex; flex-direction: column; gap: 4px; }
.dt-rf-label {
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500);
  display: flex; align-items: center; gap: 6px;
}
.dt-rf-auto-toggle {
  font-size: var(--text-xs); background: var(--c-100); border: 1px solid var(--c-200);
  border-radius: var(--r-xs); padding: 1px 6px; cursor: pointer; color: var(--primary);
}

/* 처리 유형 버튼 */
.dt-rf-types { display: flex; gap: 6px; }
.dt-rf-type {
  flex: 1; font-size: var(--text-sm); font-weight: var(--font-semibold); text-align: center;
  padding: 7px 0; border: 1px solid var(--c-200); border-radius: var(--r-sm);
  background: var(--app-surface); color: var(--c-600); cursor: pointer; transition: all .15s;
}
.dt-rf-type.active { background: var(--primary); color: var(--app-surface); border-color: var(--primary); }
.dt-rf-type:hover:not(.active) { background: var(--c-50); border-color: var(--c-400); }

/* 수량 +/- */
.dt-rf-qty {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--c-200); border-radius: var(--r-sm); overflow: hidden; width: fit-content;
}
.dt-rf-qty button {
  width: 36px; height: 36px; font-size: var(--text-lg); font-weight: var(--font-bold);
  border: none; background: var(--c-50); color: var(--c-600); cursor: pointer;
}
.dt-rf-qty button:hover { background: var(--c-200); }
.dt-rf-qty input {
  width: 52px; height: 36px; text-align: center; font-size: var(--text-md); font-weight: var(--font-bold);
  border: none; border-left: 1px solid var(--c-200); border-right: 1px solid var(--c-200);
  outline: none; color: var(--c-800);
}
.dt-rf-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* 금액/날짜/사유 입력 */
.dt-rf-amount, .dt-rf-date, .dt-rf-reason {
  width: 100%; height: 36px; border: 1px solid var(--c-200); border-radius: var(--r-sm);
  padding: 0 10px; font-size: var(--text-base); color: var(--c-800); outline: none;
  transition: border-color .15s;
}
.dt-rf-amount:focus, .dt-rf-date:focus, .dt-rf-reason:focus { border-color: var(--primary); }
.dt-rf-amount:disabled { background: var(--c-50); color: var(--c-400); }

/* 제출 버튼 */
.dt-rf-buttons { display: flex; gap: 8px; margin-top: 4px; }
.dt-rf-cancel {
  flex: 1; height: 40px; border: 1px solid var(--c-200); border-radius: var(--r-sm);
  background: var(--app-surface); color: var(--c-500); font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer;
}
.dt-rf-cancel:hover { background: var(--c-50); }
.dt-rf-submit {
  flex: 2; height: 40px; border: none; border-radius: var(--r-sm);
  background: var(--error-deep); color: var(--app-surface); font-size: var(--text-base); font-weight: var(--font-bold); cursor: pointer;
  transition: background .15s;
}
.dt-rf-submit:hover { background: var(--error-deep); }
.dt-rf-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 반품 이력 ── */

/* ── Manual Form Modal ── */
.mf-modal { width: min(420px, 92vw) !important; max-height: 85vh; display: flex; flex-direction: column; }
.mf-body { padding: 0 16px 12px; overflow-y: auto; flex: 1; }
.mf-section { padding: 12px 0; }
.mf-section + .mf-section { border-top: 1px solid var(--c-100); }
.mf-section-title { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--primary); letter-spacing: .02em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.mf-opt { font-size: var(--text-xs); color: var(--c-400); font-weight: var(--font-semibold); }
.mf-req { color: var(--error); }
.mf-auto { font-size: var(--text-xs); background: var(--primary-soft); color: var(--primary); padding: 1px 5px; border-radius: var(--r-xs); font-weight: var(--font-semibold); margin-left: 4px; }

.mf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mf-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

.mf-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.mf-field label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500); }
.mf-field input, .mf-field select {
  border: 1px solid var(--c-200); border-radius: var(--r-sm); padding: 7px 9px;
  font-size: var(--text-base); color: var(--c-800); background: var(--app-surface);
  transition: border-color .15s, box-shadow .15s; outline: none;
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.mf-field input:focus, .mf-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a08); }
.mf-field input::placeholder { color: var(--c-300); }
.mf-field input[type="number"] { font-variant-numeric: tabular-nums; }
.mf-field input.mf-highlight { background: var(--c-50); font-weight: var(--font-semibold); }
.mf-field input[readonly] { background: var(--c-50); color: var(--c-400); cursor: not-allowed; }
.mf-field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.mf-platform-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.mf-ptag {
  padding: 4px 8px; border-radius: var(--r-xs); font-size: var(--text-xs); font-weight: var(--font-semibold);
  border: 1px solid var(--c-200); background: var(--app-surface); color: var(--c-500);
  cursor: pointer; transition: all .12s; display: flex; align-items: center; gap: 3px;
}
.mf-ptag:hover { border-color: var(--c-300); background: var(--c-50); }
.mf-ptag.on { border-color: var(--primary); background: var(--primary-soft); color: var(--app-cta-hover); }
.mf-ptag-rate { font-size: var(--text-xs); color: var(--c-400); font-weight: var(--font-medium); }
.mf-ptag.on .mf-ptag-rate { color: var(--primary); }

.mf-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--c-100);
}
.mf-btn-cancel {
  padding: 7px 16px; border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--app-surface); color: var(--c-500); font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer;
  transition: background .12s;
}
.mf-btn-cancel:hover { background: var(--c-50); }
.mf-btn-submit {
  padding: 7px 20px; border-radius: var(--r-sm); border: none;
  background: var(--primary); color: var(--app-surface); font-size: var(--text-base); font-weight: var(--font-bold); cursor: pointer;
  transition: background .12s;
}
.mf-btn-submit:hover { background: var(--primary-deep); }
.mf-btn-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── 송장 입력 모달 ── */
.ods-inv-modal {
  background: var(--app-surface); border-radius: 14px;
  width: min(1120px, 96vw); max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  animation: ord-modal-in .15s ease;
  position: relative; z-index: 1;
}
.ods-inv-modal-header {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 20px; border-bottom: 1px solid var(--c-100);
  font-size: 14px; font-weight: 700; color: var(--c-800);
}
.ods-inv-modal-header > button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--c-400); display: flex; align-items: center; padding: 2px;
  border-radius: 4px;
}
.ods-inv-modal-header > button:hover { color: var(--c-700); background: var(--c-100); }
.ods-inv-modal-count {
  font-size: 11px; font-weight: 600; color: var(--c-400);
  background: var(--c-100); padding: 2px 8px; border-radius: 20px;
}
/* 일괄변경 행 */
.ods-inv-bulk-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--c-50);
  border-bottom: 1px solid var(--c-100);
}
.ods-inv-bulk-label {
  font-size: 11px; font-weight: 700; color: var(--c-500);
  white-space: nowrap; letter-spacing: .02em;
}
.ods-inv-bulk-apply {
  padding: 4px 12px; border-radius: 6px;
  border: 1px solid var(--primary); background: transparent;
  color: var(--primary); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .12s;
  white-space: nowrap; height: 30px;
}
.ods-inv-bulk-apply:hover { background: var(--primary); color: #fff; }
.ods-inv-bulk-apply:disabled { opacity: .35; cursor: not-allowed; }
/* select */
.ods-inv-select {
  padding: 4px 8px; border: 1px solid var(--c-200); border-radius: 6px;
  font-size: 13px; font-family: inherit; color: var(--c-800);
  background: var(--app-surface); cursor: pointer;
  height: 30px; min-width: 110px; max-width: 160px;
}
.ods-inv-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-a12); }
.ods-inv-modal-body { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ods-inv-modal-scroll { overflow-x: auto; flex: 1; padding-bottom: 20px; }
.ods-inv-modal-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ods-inv-modal-table th {
  background: var(--c-50); color: var(--c-500);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--c-100); white-space: nowrap;
  position: sticky; top: 0;
}
.ods-inv-modal-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--c-50); vertical-align: middle;
}
.ods-inv-modal-table tbody tr:last-child td { border-bottom: none; }
.ods-inv-row--no-plat { opacity: .45; }
.ods-inv-no-plat {
  font-size: 12px; color: var(--c-400);
  background: var(--c-100); padding: 2px 8px; border-radius: 4px;
}
.ods-inv-dash { color: var(--c-300); }
.ods-inv-cell-sm { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-700); }
.ods-inv-cell-nowrap { white-space: nowrap; }
.ods-inv-cell-addr { white-space: nowrap; color: var(--c-700); }
.ods-inv-input-wrap {
  display: inline-flex; align-items: center;
  border: 1px solid var(--c-200); border-radius: 6px;
  background: var(--app-surface);
}
.ods-inv-input-wrap:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-a12);
}
.ods-inv-input {
  width: 80px; padding: 4px 8px;
  border: none; border-radius: 6px;
  font-size: 13px; font-family: inherit; color: var(--c-800);
  background: transparent; height: 30px; outline: none;
}
.ods-inv-input--wide { width: 160px; }
.ods-inv-input:focus { outline: none; }
.ods-inv-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 13px 20px; border-top: 1px solid var(--c-100);
}
.ods-inv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; border: none;
  transition: all .12s;
}
.ods-inv-btn--cancel {
  background: var(--c-50); color: var(--c-500); border: 1px solid var(--c-200);
}
.ods-inv-btn--cancel:hover { background: var(--c-100); }
.ods-inv-btn--send {
  background: var(--primary); color: #fff;
}
.ods-inv-btn--send:hover { background: #4f46e5; }
.ods-inv-btn--send:disabled { opacity: .4; cursor: not-allowed; }
/* 확인 단계 */
.ods-inv-confirm {
  padding: 36px 28px 28px; text-align: center;
}
.ods-inv-confirm-icon { font-size: 38px; margin-bottom: 12px; }
.ods-inv-confirm-title {
  font-size: 16px; font-weight: 800; color: var(--c-800); margin-bottom: 10px;
}
.ods-inv-confirm-msg {
  font-size: 13px; color: var(--c-500); line-height: 1.7; margin-bottom: 24px;
}
.ods-inv-confirm-btns { display: flex; gap: 8px; }
.ods-inv-confirm-btns .ods-inv-btn { flex: 1; justify-content: center; padding: 11px; }
/* 다크모드 */
[data-theme="dark"] .ods-inv-input-wrap { background: var(--c-900); border-color: var(--c-700); }
[data-theme="dark"] .ods-inv-input-wrap:focus-within { border-color: #818cf8; box-shadow: 0 0 0 2px rgba(129,140,248,.15); }
[data-theme="dark"] .ods-inv-input { color: var(--c-100); }
[data-theme="dark"] .ods-inv-select { background: var(--c-900); border-color: var(--c-700); color: var(--c-100); }
[data-theme="dark"] .ods-inv-select:focus { border-color: #818cf8; box-shadow: 0 0 0 2px rgba(129,140,248,.15); }
[data-theme="dark"] .ods-inv-bulk-row { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ods-inv-modal-table th { background: var(--c-800); }
[data-theme="dark"] .ods-inv-modal-table td { border-color: var(--c-800); }
[data-theme="dark"] .ods-inv-btn--cancel { background: var(--c-800); border-color: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .ods-inv-btn--cancel:hover { background: var(--c-700); }

/* ── Reason chips (반품 사유 프리셋) ── */
.dt-rf-reasons {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px;
}
.dt-rf-reason-chip {
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 5px 11px;
  border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--c-50); color: var(--c-500); cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.dt-rf-reason-chip:hover { border-color: var(--c-400); color: var(--c-600); }
.dt-rf-reason-chip.active { background: var(--primary); color: var(--app-surface); border-color: var(--primary); }

/* ── 반품 삭제 확인 모달 ── */
.ord-confirm-modal {
  background: var(--app-surface); border-radius: var(--r-lg); padding: 28px 24px 20px;
  width: 340px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: ord-modal-in .15s ease;
}
@keyframes ord-modal-in { from { opacity: 0; transform: scale(.95); } }
.ord-confirm-icon { font-size: var(--text-3xl); margin-bottom: 8px; }
.ord-confirm-title { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); margin-bottom: 8px; }
.ord-confirm-msg { font-size: var(--text-base); color: var(--c-500); line-height: 1.6; margin-bottom: 20px; }
.ord-confirm-btns { display: flex; gap: 8px; }
.ord-confirm-cancel, .ord-confirm-del {
  flex: 1; padding: 10px; border-radius: var(--r-sm); font-size: var(--text-base);
  font-weight: var(--font-bold); cursor: pointer; border: none; font-family: inherit;
  transition: all .15s;
}
.ord-confirm-cancel { background: var(--c-100); color: var(--c-500); }
.ord-confirm-cancel:hover { background: var(--c-200); }
.ord-confirm-del { background: var(--error); color: var(--app-surface); }
.ord-confirm-del:hover { background: var(--error-deep); }

[data-theme="dark"] .dt-rf-reason-chip { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .dt-rf-reason-chip.active { background: var(--primary); color: var(--app-surface); border-color: var(--primary); }
[data-theme="dark"] .ord-confirm-modal { background: var(--c-800); }
[data-theme="dark"] .ord-confirm-title { color: var(--c-100); }
[data-theme="dark"] .ord-confirm-msg { color: var(--c-400); }
[data-theme="dark"] .ord-confirm-cancel { background: var(--c-700); color: var(--c-400); }

/* ═══════════════════════════════════════════════════════════════
   모바일 반응형 보완 (480px 이하)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 헤더 */
  .ord-hd-row1 { padding: 10px 12px; gap: 8px; }
  .ord-hd-title { font-size: var(--text-sm); }

  /* 검색 콤보 - 전체 너비 */
  .ord-hd-filters { padding: 8px 12px; gap: 6px; }
  .ord-hd-search-combo { max-width: none; min-width: 0; flex: 1 1 100%; }
  .ord-hd-search { max-width: none; min-width: 0; flex: 1 1 100%; }

  /* 필터 pills - 2열 그리드 */
  .ord-hd-pills { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .ord-hd-pills > * { width: 100%; }
  .ord-hd-pills .app-select-btn { width: 100%; justify-content: space-between; }

  /* KPI 바 */
  .ord-hd-kpis { padding: 0 12px; gap: 0; }
  .ord-kpi { padding: 8px 10px 8px 0; min-width: 0; flex: 1; }
  .ord-kpi-label { font-size: 10px; }
  .ord-kpi-val { font-size: var(--text-sm); }

  /* 테이블 스크롤 */
  .ord-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 페이지네이션 */
  .ord-pagination { padding: 10px 12px; }

  /* 컬럼 피커 버튼 */
  .ord-filter-col-btn span { display: none; }
}

/* ── 옵션판매가 모달 sm-ui 스타일 (ui.css import 없이 직접 정의) ── */
.rt-modal .sm-ui-hint-box {
  font-size: var(--text-sm); color: var(--c-500); line-height: 1.6;
  background: var(--c-50); border-radius: var(--r-sm);
  padding: 8px 12px; margin-bottom: 12px;
}
.rt-modal .sm-ui-plat-badge {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: var(--r-xs);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  background: var(--primary-soft); color: var(--primary-text);
}
.rt-modal .sm-ui-action-btn {
  border: none; background: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--font-semibold); padding: 0 2px;
}
.rt-modal .sm-ui-action-btn.primary { color: var(--primary); }
.rt-modal .sm-ui-action-btn.danger  { color: var(--error); }
.rt-modal .sm-ui-price-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--c-50); border-radius: var(--r-sm);
}
.rt-modal .sm-ui-price-row.active { background: var(--primary-soft); }
.rt-modal .sm-ui-price-amount {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--info-deep);
  min-width: 70px; text-align: right; font-variant-numeric: tabular-nums;
}
.rt-modal .sm-ui-semibold { font-weight: var(--font-semibold); }
.rt-modal .sm-ui-mb-0 { margin-bottom: 0 !important; }
.rt-modal .sm-ui-mb-12 { margin-bottom: 12px; }
.rt-modal .sm-ui-row { display: flex; align-items: center; gap: 8px; }
.rt-modal .sm-ui-row.end { justify-content: flex-end; }
.rt-modal .sm-ui-col { display: flex; flex-direction: column; }
.rt-modal .sm-ui-empty-center {
  text-align: center; padding: 32px; color: var(--c-400); font-size: var(--text-sm);
}
.rt-modal .sm-ui-modal-body { padding: 12px 20px 16px; max-height: 460px; overflow-y: auto; }
.rt-modal .sm-ui-modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--c-100);
  display: flex; flex-direction: column; gap: 8px;
}
.rt-modal .sm-ui-muted { color: var(--c-400); font-size: var(--text-xs); }
.rt-modal .sm-ui-center { text-align: center; }
.rt-modal .mf-field { display: flex; flex-direction: column; gap: 4px; }
.rt-modal .mf-field label { font-size: 11px; font-weight: 600; color: var(--c-500); }
.rt-modal .mf-field input, .rt-modal .mf-field select {
  padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--app-surface); color: var(--text-primary);
  font-size: 13px; font-family: inherit;
}
.rt-modal .mf-btn-submit {
  padding: 8px 18px; border-radius: var(--r-sm); border: none;
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s;
}
.rt-modal .mf-btn-submit:hover { background: var(--primary-deep); }
.rt-modal .mf-btn-submit:disabled { opacity: .5; cursor: not-allowed; }


/* ============================================================================
   UI/UX REDESIGN 2026 — 주문조회 시각 개선
   ============================================================================ */

/* ── 페이지 레이아웃 ── */
.ord-page {
  padding: 16px;
  padding-bottom: 60px;
}

/* ── 헤더 카드 ── */
.ord-hd {
  background: #fff;
  border-color: #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  margin-bottom: 12px;
}

/* ── Row1 ── */
.ord-hd-row1 { padding: 14px 18px; border-bottom-color: #f1f5f9; }
.ord-hd-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

/* 탭 */
.ord-hd-tabs {
  background: #f1f5f9;
  border-radius: 9px;
  padding: 3px;
}
.ord-hd-tab {
  border-radius: 7px;
  font-size: 13px;
  padding: 6px 18px;
}
.ord-hd-tab.active {
  background: #fff;
  color: #4f46e5;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ord-hd-tab-n {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 20px;
}
.ord-hd-tab.active .ord-hd-tab-n {
  background: #eef2ff;
  color: #6366f1;
}

/* 액션 버튼 그룹 */
.ord-hd-act-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 3px;
}
.ord-hd-act-group .ord-hd-act {
  background: transparent;
  border: none;
  box-shadow: none;
}
.ord-hd-act-group .ord-hd-act:hover {
  background: #fff;
  border-color: transparent;
}

/* 레이블 있는 액션 버튼 */
.ord-hd-act.with-label {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
}
.ord-hd-act.primary.with-label {
  padding: 0 14px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.ord-hd-act.primary.with-label:hover {
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.ord-hd-act.with-label span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── KPI 스트립 ── */
.ord-hd-kpis {
  padding: 12px 18px;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom-color: #f1f5f9;
  background: #fafbff;
}
.ord-kpi {
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  gap: 3px;
}
.ord-kpi--accent {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.ord-kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-transform: uppercase;
}
.ord-kpi-val {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ord-kpi-val.accent { color: #4f46e5; }
.ord-kpi-unit {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 2px;
  letter-spacing: 0;
}
.ord-kpi-val.accent .ord-kpi-unit { color: #818cf8; }
.ord-kpi-val.ret { font-size: 15px; }
.ord-kpi--ret {
  background: #fef2f2;
  border-color: #fecaca;
  border-left-width: 1px;
  padding-left: 16px;
}
.ord-kpi--ret .ord-kpi-label { color: #ef4444; }
.ord-kpi--ret .ord-kpi-val { color: #dc2626; }
.ord-kpi--ret .ord-kpi-unit { color: #fca5a5; }

/* ── 필터 바 ── */
.ord-hd-filters {
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  padding: 10px 18px;
  border-radius: 0 0 14px 14px;
  gap: 7px;
}
.ord-hd-search-combo {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  max-width: 360px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ord-hd-icon-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border-color: #e2e8f0;
}
.ord-filter-col-btn {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  border-radius: 7px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font-size: 12px; font-weight: 600;
  color: #64748b;
  cursor: pointer; transition: all .15s;
  font-family: inherit;
}
.ord-filter-col-btn:hover, .ord-filter-col-btn.active {
  border-color: #a5b4fc; color: #6366f1; background: #eef2ff;
}

/* ── 테이블 ── */
.ord-list-card {
  border-radius: 14px;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.ord-table th {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 14px;
}
.ord-table td {
  padding: 11px 14px;
  border-bottom-color: #f1f5f9;
  color: #334155;
}
.ord-table tr:hover td { background: #f8fafc; }
.ord-table tr.selected td {
  background: #eef2ff;
}
.ord-table tr.selected td:first-child {
  border-left: 3px solid #6366f1;
  padding-left: 11px;
}

/* ── 페이지네이션 ── */
.ord-pagination {
  padding: 12px 18px;
  border-top-color: #f1f5f9;
}
.ord-pg-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  border-color: #e2e8f0;
}
.ord-pg-btn:hover:not(:disabled) {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #6366f1;
}

/* ── 상세 패널 ── */
.ord-detail-card {
  border-radius: 14px;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── 다크모드 ── */
[data-theme="dark"] .ord-hd { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ord-hd-kpis { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ord-kpi { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ord-kpi--accent { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.3); }
[data-theme="dark"] .ord-kpi--ret { background: rgba(220,38,38,0.1); border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] .ord-hd-filters { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ord-hd-search-combo { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ord-hd-act-group { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ord-list-card { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ord-table th { background: var(--c-800); border-color: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .ord-table td { border-color: var(--c-800); color: var(--c-200); }
[data-theme="dark"] .ord-table tr:hover td { background: var(--c-800); }
[data-theme="dark"] .ord-table tr.selected td { background: rgba(99,102,241,0.12); }
[data-theme="dark"] .ord-table tr.selected td:first-child { border-left-color: #818cf8; }
[data-theme="dark"] .ord-detail-card { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ord-filter-col-btn { background: var(--c-800); border-color: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .ord-filter-col-btn:hover, [data-theme="dark"] .ord-filter-col-btn.active { background: rgba(99,102,241,0.15); border-color: #818cf8; color: #a5b4fc; }


/* ============================================================================
   ODS-* — 주문조회 프리미엄 리디자인
   ============================================================================ */

/* ── 페이지 루트 ── */
.ods-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - var(--sm-topbar-h, 52px));
  background: #f1f5f9;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── 탑바 ── */
.ods-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 18px;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  flex-shrink: 0;
  gap: 10px;
}
.ods-topbar-left  { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ods-topbar-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

.ods-topbar-icon {
  color: #6366f1;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ods-topbar-title   { font-size: 14px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; white-space: nowrap; }
.ods-topbar-dot     { color: #cbd5e1; font-size: 15px; flex-shrink: 0; }
.ods-topbar-company { font-size: 12px; font-weight: 600; color: #94a3b8; white-space: nowrap; flex-shrink: 0; }
.ods-topbar-sep     { width: 1px; height: 18px; background: #e2e8f0; margin: 0 3px; flex-shrink: 0; }

/* 탭 */
.ods-tabs {
  display: flex;
  gap: 2px;
  background: #f1f5f9;
  border-radius: 9px;
  padding: 3px;
  margin-left: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 1;
  min-width: 0;
}
.ods-tabs::-webkit-scrollbar { display: none; }
.ods-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 14px;
  border-radius: 7px;
  white-space: nowrap; flex-shrink: 0;
  border: none; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #64748b;
  font-family: inherit;
  transition: all .15s;
}
.ods-tab:hover { color: #334155; }
.ods-tab.active {
  background: #fff;
  color: #4f46e5;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ods-tab-cnt {
  font-size: 11px; font-weight: 700;
  background: #f1f5f9; color: #94a3b8;
  padding: 1px 7px; border-radius: 20px;
  transition: all .15s;
}
.ods-tab.active .ods-tab-cnt { background: #eef2ff; color: #6366f1; }

/* 액션 버튼 */
.ods-act-cluster {
  display: flex; align-items: center; gap: 1px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 3px;
}
.ods-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: none; background: transparent;
  border-radius: 6px; cursor: pointer; color: #64748b;
  transition: all .12s; flex-shrink: 0;
}
.ods-act:hover   { background: #f1f5f9; color: #334155; }
.ods-act:disabled { opacity: .35; cursor: not-allowed; }
.ods-act-cluster .ods-act:hover { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.ods-act.primary {
  background: #6366f1; color: #fff; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.ods-act.primary:hover { background: #4f46e5; box-shadow: 0 3px 12px rgba(99,102,241,0.35); }
.ods-act.primary:disabled { background: #c7d2fe; box-shadow: none; }
.ods-act.danger-act { color: #ef4444; }
.ods-act.danger-act:hover { background: #fef2f2; color: #dc2626; }
.ods-act.labeled {
  width: auto; padding: 0 12px; gap: 6px;
  font-size: 12px; font-weight: 700; font-family: inherit;
  white-space: nowrap; height: 30px;
}
.ods-act.labeled span { font-size: 12px; letter-spacing: -0.01em; }

/* 주문 유형 드롭다운 */
.ods-source-drop { position: relative; }
.ods-source-drop .ods-act.labeled { gap: 4px; }
.ods-source-drop-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
  min-width: 130px; background: var(--app-surface); border: 1px solid var(--c-200);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px; animation: odsSyncFadeIn .12s ease;
}

/* 동기화 드롭다운 */
.ods-sync-drop { position: relative; }
.ods-sync-drop .ods-act.labeled { gap: 4px; }
.ods-sync-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  min-width: 210px; background: var(--app-surface); border: 1px solid var(--c-200);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px; animation: odsSyncFadeIn .12s ease;
}
@keyframes odsSyncFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ods-sync-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 14px; border: none; background: transparent;
  border-radius: 7px; cursor: pointer; font-size: 13px;
  color: var(--c-800); font-family: inherit; transition: background .1s;
  text-align: left;
}
.ods-sync-menu-item:hover { background: var(--c-50); color: var(--c-900); }
.ods-sync-menu-all { font-weight: var(--font-semibold); color: var(--primary); }
.ods-sync-menu-all:hover { background: var(--primary-soft, #eef2ff); }
.ods-sync-menu-date { color: var(--c-500); font-size: var(--text-xs); }
.ods-sync-menu-date:hover { background: var(--c-50); color: var(--c-700); }
.ods-sync-menu-sep { height: 1px; background: var(--c-100); margin: 4px 0; }
.ods-sync-menu-name { flex: 1; font-weight: var(--font-medium); }
.ods-sync-menu-time { font-size: 11px; color: var(--c-400); white-space: nowrap; }
.ods-sync-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.ods-sync-status-dot.ok { background: #22c55e; }
.ods-sync-status-dot.failed { background: #ef4444; }
.ods-sync-status-dot.idle { background: var(--c-300); }

/* ── 더보기 메뉴 ── */
.ods-more-wrap { position: relative; }
.ods-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 99999;
  min-width: 200px; padding: 6px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04);
  animation: appDropdown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.ods-more-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 12px; border-radius: 6px; border: none; background: none;
  font-size: 13px; font-weight: 600; color: #334155;
  cursor: pointer; font-family: inherit; transition: background .1s;
}
.ods-more-item:hover { background: #f1f5f9; }
.ods-more-item--danger { color: #ef4444; }
.ods-more-item--danger:hover { background: #fef2f2; }
.ods-more-sep { height: 1px; background: #e2e8f0; margin: 4px 8px; }
[data-theme="dark"] .ods-more-menu { background: var(--c-900); border-color: var(--c-700); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .ods-more-item { color: var(--c-200); }
[data-theme="dark"] .ods-more-item:hover { background: var(--c-800); }
[data-theme="dark"] .ods-more-sep { background: var(--c-700); }

/* ── 벌크 액션 바 (하단 플로팅) ── */
.ods-bulk-bar {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 900;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--r-full, 9999px);
  box-shadow: 0 8px 32px rgba(99,102,241,0.15), 0 2px 8px rgba(0,0,0,0.08);
  animation: ods-bulk-in 0.35s cubic-bezier(.16,1,.3,1);
}
@keyframes ods-bulk-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ods-bulk-count {
  font-size: 13px; font-weight: 700; color: var(--primary, #6366f1);
  background: var(--primary-soft, #ede9fe); padding: 4px 12px;
  border-radius: var(--r-full, 9999px); flex-shrink: 0;
  white-space: nowrap;
}
.ods-bulk-sep {
  width: 1px; height: 20px; background: var(--c-200, #e2e8f0); flex-shrink: 0;
}
.ods-bulk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ods-bulk-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 15px; border-radius: 10px; border: 1px solid var(--c-200, #e2e8f0);
  background: #fff; font-size: 12.5px; font-weight: 700; color: var(--primary, #6366f1);
  cursor: pointer; font-family: inherit; transition: all .15s ease;
  white-space: nowrap;
}
.ods-bulk-btn:hover { background: var(--primary-soft, #eef2ff); border-color: var(--primary, #6366f1); transform: scale(0.97); }
.ods-bulk-btn:active { transform: scale(0.95); }
.ods-bulk-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.ods-bulk-btn--primary {
  background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1);
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.ods-bulk-btn--primary:hover { background: var(--primary-deep, #4f46e5); transform: scale(0.97); }
.ods-bulk-btn--accept { color: #059669; border-color: #a7f3d0; }
.ods-bulk-btn--accept:hover { background: #ecfdf5; border-color: #34d399; }
.ods-bulk-btn--reject { color: #dc2626; border-color: #fecaca; }
.ods-bulk-btn--reject:hover { background: #fef2f2; border-color: #f87171; }
.ods-bulk-btn--ghost {
  background: transparent; border-color: transparent; color: var(--c-400, #94a3b8);
  padding: 7px 10px;
}
.ods-bulk-btn--ghost:hover { background: var(--c-100, #f1f5f9); color: var(--c-600, #64748b); transform: scale(0.97); }
[data-theme="dark"] .ods-bulk-bar {
  background: rgba(24,24,32,0.92);
  border-color: rgba(99,102,241,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(99,102,241,0.15);
}
[data-theme="dark"] .ods-bulk-count { background: rgba(99,102,241,0.25); color: #a5b4fc; }
[data-theme="dark"] .ods-bulk-sep { background: var(--c-700); }
[data-theme="dark"] .ods-bulk-btn { background: var(--c-800); border-color: var(--c-700); color: #a5b4fc; }
[data-theme="dark"] .ods-bulk-btn:hover { background: var(--c-700); }
[data-theme="dark"] .ods-bulk-btn--primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
[data-theme="dark"] .ods-bulk-btn--ghost { color: var(--c-500); }

/* ── Quick Print 모달 ── */
.qp-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(4px);
  animation: qp-fade-in 0.2s ease;
}
@keyframes qp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.qp-modal {
  position: fixed; top: 50%; left: 50%; z-index: 100001;
  transform: translate(-50%, -50%);
  width: 92%; max-width: 420px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--c-200, #e2e8f0);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);
  overflow: hidden;
  animation: qp-slide-in 0.3s cubic-bezier(.16,1,.3,1);
}
@keyframes qp-slide-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.qp-modal--wide { max-width: 620px; }
.qp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--c-100, #f1f5f9);
}
.qp-header-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-deep, #4f46e5));
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qp-header-text { flex: 1; min-width: 0; }
.qp-title { font-size: 16px; font-weight: 800; color: var(--c-900, #0f172a); letter-spacing: -0.02em; }
.qp-subtitle { font-size: 12px; color: var(--c-400, #94a3b8); margin-top: 2px; }
.qp-folder-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--c-200); background: var(--c-50);
  color: var(--c-500); font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.qp-folder-link:hover { background: var(--primary-soft); border-color: rgba(99,102,241,.2); color: var(--primary); }
.qp-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--c-100, #f1f5f9); border: none;
  color: var(--c-500, #64748b); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.qp-close:hover { background: var(--c-200); color: var(--c-700); }
.qp-body { padding: 20px; }
.qp-body--center { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; }
.qp-body--split { display: flex; flex-direction: row; gap: 0; padding: 0; }
.qp-main { flex: 1; padding: 20px; min-width: 0; }
.qp-history-side {
  width: 180px; flex-shrink: 0;
  padding: 20px 16px;
  border-left: 1px solid var(--c-200);
  background: var(--c-50);
}
[data-theme="dark"] .qp-history-side { border-left-color: var(--c-700); background: var(--c-900); }
.qp-field { margin-bottom: 18px; }
.qp-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--c-500, #64748b);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.qp-readonly {
  font-size: 14px; font-weight: 600; color: var(--c-700, #334155);
  padding: 8px 12px; background: var(--c-50, #f8fafc);
  border: 1px solid var(--c-150, #e2e8f0); border-radius: 8px;
}
.qp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qp-chip {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--c-200, #e2e8f0);
  background: #fff; font-size: 13px; font-weight: 600; color: var(--c-500, #64748b);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.qp-chip:hover { border-color: var(--primary, #6366f1); color: var(--primary); }
.qp-chip.active {
  background: var(--primary-soft, #ede9fe); border-color: var(--primary, #6366f1);
  color: var(--primary, #6366f1); font-weight: 700;
}
.qp-date-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--c-200, #e2e8f0); background: #fff;
  font-size: 14px; font-family: inherit; color: var(--c-800, #1e293b);
  transition: border-color .15s;
}
.qp-date-input:focus { outline: none; border-color: var(--primary, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.qp-start-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-deep, #4f46e5));
  color: #fff; font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .15s;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
}
.qp-start-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
.qp-start-btn:active { transform: translateY(0); }
.qp-progress-wrap { display: flex; align-items: center; gap: 10px; width: 100%; }
.qp-progress-bar {
  flex: 1; height: 6px; border-radius: 3px; background: var(--c-100, #f1f5f9); overflow: hidden;
}
.qp-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary, #6366f1), #818cf8);
  transition: width .4s ease;
}
.qp-progress-pct { font-size: 13px; font-weight: 700; color: var(--primary, #6366f1); min-width: 36px; text-align: right; }
.qp-running-msg { font-size: 13px; color: var(--c-500, #64748b); }
.qp-done-icon { color: #10b981; }
.qp-done-title { font-size: 18px; font-weight: 800; color: var(--c-900, #0f172a); }
.qp-done-msg { font-size: 13px; color: var(--c-500, #64748b); text-align: center; }
.qp-done-actions { display: flex; gap: 8px; margin-top: 8px; width: 100%; }
.qp-done-actions .qp-start-btn { width: auto; flex: 1; }
.qp-folder-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 10px;
  border: 1px solid var(--primary, #6366f1); background: var(--primary-soft, #ede9fe);
  color: var(--primary, #6366f1); font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.qp-folder-btn:hover { background: var(--primary, #6366f1); color: #fff; }
.qp-close-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 10px; border-radius: 10px;
  border: 1px solid var(--c-200, #e2e8f0); background: #fff;
  color: var(--c-600, #475569); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.qp-close-btn:hover { background: var(--c-100, #f1f5f9); }
.qp-fail-icon { color: #ef4444; }
.qp-fail-title { font-size: 18px; font-weight: 800; color: #ef4444; }
.qp-fail-msg { font-size: 13px; color: var(--c-500, #64748b); text-align: center; max-width: 300px; word-break: break-word; }

/* ── Quick Print: 칩 카운트 배지 ── */
.qp-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 11px; font-weight: 800;
  background: var(--c-200, #e2e8f0); color: var(--c-500, #64748b);
  margin-left: 4px; line-height: 1;
}
.qp-chip.active .qp-chip-count {
  background: var(--primary, #6366f1); color: #fff;
}

/* ── Quick Print: 설정 행 (날짜 + 시간 나란히) ── */
.qp-settings-row {
  display: flex; gap: 14px; margin-bottom: 18px;
}
.qp-settings-col { flex: 1; min-width: 0; }
.qp-chips--compact { gap: 4px; }
.qp-chip--sm { padding: 5px 10px; font-size: 12px; }

/* ── Quick Print: 출력 요약 ── */
.qp-summary {
  background: var(--c-50, #f8fafc); border: 1px solid var(--c-150, #e2e8f0);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
}
.qp-summary-title {
  font-size: 11px; font-weight: 700; color: var(--c-400, #94a3b8);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;
}
.qp-summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}
.qp-summary-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; background: var(--app-surface, #fff); border-radius: 8px;
  border: 1px solid var(--c-100, #f1f5f9);
}
.qp-summary-val {
  font-size: 15px; font-weight: 800; color: var(--c-800, #1e293b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.qp-summary-lbl {
  font-size: 11px; font-weight: 600; color: var(--c-400, #94a3b8);
}
.qp-summary-detail {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-top: 10px; border-top: 1px solid var(--c-100, #f1f5f9);
}
.qp-summary-tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  background: var(--primary-soft, #ede9fe); color: var(--primary, #6366f1);
}
.qp-start-btn:disabled {
  opacity: 0.4; cursor: not-allowed; transform: none;
  box-shadow: none;
}

/* Quick Print 다크모드 */
[data-theme="dark"] .qp-overlay { background: rgba(0,0,0,0.55); }
[data-theme="dark"] .qp-modal {
  background: rgba(30,30,40,0.95); border-color: var(--c-700);
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
[data-theme="dark"] .qp-header { border-bottom-color: var(--c-800); }
[data-theme="dark"] .qp-title { color: var(--c-100); }
[data-theme="dark"] .qp-close { background: var(--c-800); color: var(--c-400); }
[data-theme="dark"] .qp-close:hover { background: var(--c-700); color: var(--c-200); }
[data-theme="dark"] .qp-readonly { background: var(--c-900); border-color: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .qp-chip { background: var(--c-800); border-color: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .qp-chip:hover { border-color: #818cf8; color: #a5b4fc; }
[data-theme="dark"] .qp-chip.active { background: rgba(99,102,241,0.2); border-color: #818cf8; color: #a5b4fc; }
[data-theme="dark"] .qp-date-input { background: var(--c-900); border-color: var(--c-700); color: var(--c-200); }
[data-theme="dark"] .qp-date-input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
[data-theme="dark"] .qp-progress-bar { background: var(--c-800); }
[data-theme="dark"] .qp-done-title, [data-theme="dark"] .qp-fail-title { color: var(--c-100); }
[data-theme="dark"] .qp-folder-btn { border-color: #818cf8; background: rgba(99,102,241,0.15); color: #a5b4fc; }
[data-theme="dark"] .qp-folder-btn:hover { background: #4f46e5; color: #fff; }
[data-theme="dark"] .qp-close-btn { background: var(--c-800); border-color: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .qp-close-btn:hover { background: var(--c-700); }
[data-theme="dark"] .qp-chip-count { background: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .qp-chip.active .qp-chip-count { background: #818cf8; color: #fff; }
[data-theme="dark"] .qp-summary { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .qp-summary-item { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .qp-summary-val { color: var(--c-100); }
[data-theme="dark"] .qp-summary-detail { border-top-color: var(--c-800); }
[data-theme="dark"] .qp-summary-tag { background: rgba(99,102,241,0.2); color: #a5b4fc; }

/* ─── QP 모달: 다오네스트 발주 이력 ─── */
.pm-po-history {
  margin-top: 10px;
  border-top: 1px solid var(--c-200);
  padding-top: 10px;
}
.pm-po-history-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--c-500);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 7px;
}
.pm-po-history-loading { font-size: 12px; color: var(--c-400); padding: 4px 0; }
.pm-po-history-empty { font-size: 12px; color: var(--c-400); padding: 4px 0; font-style: italic; }
.pm-po-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-po-history-item label {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 6px; border-radius: 5px;
  border: 1px solid var(--c-200); background: var(--c-50);
  font-size: 12px; transition: background 0.15s;
}
.pm-po-history-item label:hover { background: var(--c-100); }
.pm-po-history-item.excluded label { opacity: 0.55; background: var(--c-100); }
.pm-po-history-date { font-weight: 600; color: var(--c-700); }
.pm-po-history-count { color: var(--c-500); margin-left: auto; }
.pm-po-history-badge { font-size: 10px; background: var(--c-400); color: #fff; border-radius: 3px; padding: 1px 5px; }
.pm-po-history-hint { font-size: 11px; color: var(--c-400); margin: 6px 0 0; line-height: 1.4; }
[data-theme="dark"] .pm-po-history { border-top-color: var(--c-700); }
[data-theme="dark"] .pm-po-history-item label { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .pm-po-history-item label:hover { background: var(--c-750, var(--c-700)); }
[data-theme="dark"] .pm-po-history-item.excluded label { background: var(--c-900); }
[data-theme="dark"] .pm-po-history-date { color: var(--c-300); }

/* ── 발주 이력 관리 모달 ──────────────────────────────── */
.po-manage-overlay {
  position: fixed; inset: 0; z-index: 100002;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.po-manage-modal {
  background: var(--app-surface);
  border-radius: 10px;
  width: 520px;
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.po-manage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-200);
}
.po-manage-header-icon { color: var(--primary); }
.po-manage-header-text { font-size: 14px; font-weight: 600; flex: 1; color: var(--c-800); }
.po-manage-close { background: none; border: none; cursor: pointer; color: var(--c-500); padding: 2px; }
.po-manage-close:hover { color: var(--c-800); }
.po-manage-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-200);
}
.po-manage-month-nav button { background: none; border: none; cursor: pointer; color: var(--c-500); padding: 2px 6px; }
.po-manage-month-nav button:hover { color: var(--c-800); }
.po-manage-month-label { font-size: 13px; font-weight: 600; min-width: 80px; text-align: center; color: var(--c-800); }
.po-manage-body { padding: 12px 16px; min-height: 120px; max-height: 360px; overflow-y: auto; }
.po-manage-loading,
.po-manage-empty { text-align: center; color: var(--c-500); font-size: 13px; padding: 32px 0; }
.po-manage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.po-manage-table th {
  text-align: left; color: var(--c-500); font-weight: 500;
  padding: 4px 8px 8px; border-bottom: 1px solid var(--c-200);
}
.po-manage-table td { padding: 6px 8px; vertical-align: middle; color: var(--c-800); }
.po-manage-table tr:not(:last-child) td { border-bottom: 1px solid var(--c-100); }
.po-manage-date { font-weight: 500; white-space: nowrap; }
.po-manage-count { color: var(--c-500); white-space: nowrap; }

.po-manage-actions { display: flex; gap: 4px; }
.po-manage-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-200); border-radius: 4px;
  background: none; cursor: pointer; padding: 3px 6px;
  font-size: 12px; color: var(--c-500);
  transition: background .15s, color .15s;
}
.po-manage-btn:hover:not(:disabled) { background: var(--c-100); color: var(--c-800); }
.po-manage-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.po-manage-btn.change:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.po-manage-btn.reset:hover:not(:disabled) { border-color: #dc2626; color: #dc2626; }
.po-manage-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--c-200);
}
.po-manage-hint { font-size: 11px; color: var(--c-500); margin: 0; }
[data-theme="dark"] .po-manage-modal { background: var(--c-800); }
[data-theme="dark"] .po-manage-header { border-bottom-color: var(--c-700); }
[data-theme="dark"] .po-manage-header-text { color: var(--c-100); }
[data-theme="dark"] .po-manage-month-nav { border-bottom-color: var(--c-700); }
[data-theme="dark"] .po-manage-month-label { color: var(--c-100); }
[data-theme="dark"] .po-manage-table th { color: var(--c-400); border-bottom-color: var(--c-700); }
[data-theme="dark"] .po-manage-table td { color: var(--c-200); border-bottom-color: var(--c-700); }
[data-theme="dark"] .po-manage-date-input { background: var(--c-700); color: var(--c-100); border-color: var(--c-600); }
[data-theme="dark"] .po-manage-btn { border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .po-manage-btn:hover:not(:disabled) { background: var(--c-700); color: var(--c-100); }
[data-theme="dark"] .po-manage-footer { border-top-color: var(--c-700); }
.modal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 18px;
  border-radius: var(--r-sm, 6px); border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: all .15s;
}
.modal-btn.primary { background: var(--primary); color: #fff; }
.modal-btn.primary:hover { opacity: .88; }

/* QP 이력 패널 헤더 "관리" 버튼 */
.po-manage-open-btn {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 1px 3px;
  display: inline-flex; align-items: center;
}
.po-manage-open-btn:hover { color: var(--accent); }

/* ── 검색바 (Row 2) ── */
/* ── Delay filter banner ── */
.ods-delay-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  background: #fef3c7; color: #92400e;
  font-size: 13px; font-weight: 500;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
}
.ods-delay-banner svg { flex-shrink: 0; }
.ods-delay-banner button {
  margin-left: auto;
  padding: 2px 10px;
  border: 1px solid #d97706; border-radius: 4px;
  background: #fff; color: #92400e;
  font-size: 12px; cursor: pointer;
}
.ods-delay-banner button:hover { background: #fde68a; }
[data-theme="dark"] .ods-delay-banner {
  background: #451a03; color: #fde68a;
  border-color: #78350f;
}
[data-theme="dark"] .ods-delay-banner button {
  background: #78350f; color: #fde68a; border-color: #92400e;
}

.ods-searchbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 8px 18px;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  flex-shrink: 0;
  overflow: visible;
}
.ods-searchbar .ods-search-box { max-width: 520px; flex: 1 1 200px; }

/* ── 상태+필터바 (Row 3) ── */
.ods-statusbar {
  display: flex; align-items: center;
  padding: 0 18px;
  height: 42px;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  flex-shrink: 0;
  gap: 0;
  overflow: visible;
}
.ods-sb-kpi-row {
  display: flex; align-items: center; gap: 0;
  flex: 1 1 0; min-width: 0;
  overflow: hidden;
}
.ods-sb-kpi-main {
  font-size: 14px; font-weight: 800; color: #4f46e5;
  letter-spacing: -0.03em; padding-right: 14px;
  border-right: 1px solid #e2e8f0; margin-right: 10px;
  flex-shrink: 0; white-space: nowrap;
}
.ods-sb-kpi-main em { font-style: normal; font-size: 11px; font-weight: 600; color: #a5b4fc; margin-left: 2px; }
.ods-sb-kpi {
  display: flex; align-items: baseline; gap: 3px;
  padding: 0 10px; border-right: 1px solid #f1f5f9;
  flex-shrink: 0; white-space: nowrap;
}
.ods-sb-kpi-lbl { font-size: 11px; font-weight: 600; color: #94a3b8; }
.ods-sb-kpi-val { font-size: 12px; font-weight: 700; color: #334155; }
.ods-sb-kpi.ret .ods-sb-kpi-lbl { color: #fca5a5; }
.ods-sb-kpi.ret .ods-sb-kpi-val { color: #dc2626; }
.ods-sb-sep { flex: 0 0 0; min-width: 0; }
.ods-sb-filters {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  position: relative;
}
/* AppSelect ghost 스타일 (statusbar용) */
.ods-sb-filters .app-select-btn {
  height: 28px !important; padding: 0 8px !important;
  border-radius: 7px !important; font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  color: #64748b !important;
  transition: all .12s !important;
}
.ods-sb-filters .app-select-btn:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
.ods-sb-filters .app-select-btn.is-open {
  background: #eef2ff !important;
  border-color: #a5b4fc !important;
  color: #4f46e5 !important;
}
/* 필터가 기본값이 아닐 때 (활성 필터 표시) */
.ods-sb-filters .app-select-wrap:has(.app-select-btn[data-active]) .app-select-btn {
  color: #4f46e5 !important;
}

/* ── 컬럼 피커: 체크박스 리스트 ── */
.ord-col-picker-popup--chk {
  width: 300px;
  max-height: 480px;
  display: flex; flex-direction: column;
}
.ord-col-search-wrap {
  display: flex; align-items: center; gap: 6px;
  margin: 0 10px 6px;
  padding: 5px 10px;
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px;
}
.ord-col-search-icon { color: #94a3b8; flex-shrink: 0; }
.ord-col-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 12px; font-weight: 500; color: #0f172a; font-family: inherit;
}
.ord-col-search-input::placeholder { color: #b0bac7; }
.ord-col-search-clear {
  width: 16px; height: 16px; border-radius: 50%;
  border: none; background: #e2e8f0; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.ord-col-chk-list {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; padding: 0 8px 6px; align-content: start;
}
.ord-col-chk-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: #64748b;
  cursor: pointer; transition: background .1s; user-select: none;
}
.ord-col-chk-row:hover { background: #f8fafc; color: #334155; }
.ord-col-chk-row.on { color: #4f46e5; font-weight: 600; }
.ord-col-chk-row.on:hover { background: #eef2ff; }
.ord-col-chk-row input[type="checkbox"] {
  width: 14px; height: 14px; border-radius: 4px;
  accent-color: #6366f1; flex-shrink: 0; cursor: pointer;
}
.ord-col-chip-seclbl {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.ord-col-order-section {
  padding: 8px 10px 10px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  max-height: 220px;
  overflow-y: auto;
}
.ord-col-order-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.ord-col-order-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: 5px;
  cursor: grab; transition: background .1s;
  user-select: none;
}
.ord-col-order-row:hover { background: #f1f5f9; }
.ord-col-order-row.dragging { opacity: 0.3; background: #eef2ff; }
.ord-col-order-row.drop-over { box-shadow: 0 -2px 0 #6366f1; }
.ord-col-order-grip { color: #c8d0da; flex-shrink: 0; }
.ord-col-order-row:hover .ord-col-order-grip { color: #94a3b8; }
.ord-col-order-num {
  width: 15px; height: 15px; border-radius: 3px;
  background: #e2e8f0; color: #64748b;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ord-col-order-lbl {
  flex: 1; min-width: 0;
  font-size: 11px; font-weight: 500; color: #334155;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ord-col-order-btns {
  display: flex; gap: 1px; flex-shrink: 0;
}
.ord-col-order-btn {
  width: 22px; height: 22px;
  border: 1px solid #e2e8f0; background: #fff; border-radius: 4px;
  color: #94a3b8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s, border-color .1s;
}
.ord-col-order-btn:hover:not(:disabled) { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
.ord-col-order-btn:disabled { opacity: 0.2; cursor: not-allowed; }

/* ── 필터 바 (레거시, 미사용) ── */
.ods-filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 18px;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  flex-shrink: 0;
}

/* 검색 박스 */
.ods-search-box {
  display: flex; align-items: center; gap: 0;
  height: 36px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0 12px 0 0;
  flex: 1; min-width: 200px; max-width: 380px;
  transition: all .15s;
}
.ods-search-box:focus-within {
  border-color: #a5b4fc;
  background: #fff;
}
.ods-search-scope .app-select-btn {
  height: 34px !important; border: none !important;
  background: transparent !important; box-shadow: none !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: #6366f1 !important; padding: 0 8px 0 12px !important;
  min-width: 0 !important;
}
.ods-search-scope .app-select-btn:hover { background: rgba(99,102,241,0.06) !important; }
.ods-search-divider { width: 1px; height: 14px; background: #e2e8f0; flex-shrink: 0; margin: 0 8px 0 2px; }
.ods-search-icon { color: #94a3b8; flex-shrink: 0; }
.ods-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 13px; font-weight: 500; color: #0f172a; font-family: inherit;
}
.ods-search-input::placeholder { color: #b0bac7; }
.ods-search-clear {
  width: 18px; height: 18px; border-radius: 50%;
  border: none; background: #e2e8f0; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s; flex-shrink: 0;
}
.ods-search-clear:hover { background: #cbd5e1; }

/* 날짜 필 */
.ods-date-pills { display: flex; align-items: center; gap: 3px; }
.ods-date-pill {
  padding: 5px 11px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  background: #f8fafc;
  font-size: 12px; font-weight: 600; color: #64748b;
  cursor: pointer; transition: all .12s; font-family: inherit;
  white-space: nowrap;
}
.ods-date-pill:hover { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.ods-date-pill.active {
  background: #eef2ff; color: #4f46e5;
  border-color: #c7d2fe;
  font-weight: 700;
}
.ods-date-custom {
  display: flex; align-items: center; gap: 6px;
}
.ods-date-sep { font-size: 13px; color: #94a3b8; }

/* 필터 셀렉트 그룹 */
.ods-filter-selects {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-left: auto;
}
.ods-filter-selects .app-select-btn {
  height: 30px !important; padding: 0 9px !important;
  border-radius: 8px !important; font-size: 12px !important;
  font-weight: 600 !important; background: #fff !important;
  border: 1.5px solid #e2e8f0 !important; box-shadow: none !important;
}
.ods-filter-selects .app-select-btn:hover {
  border-color: #c7d2fe !important; background: #f8fafc !important; transform: none !important;
}
.ods-filter-selects .app-select-btn.is-open {
  border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}

/* 컬럼 버튼 */
.ods-col-btn {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #fff; font-size: 12px; font-weight: 600;
  color: #64748b; cursor: pointer; transition: all .12s; font-family: inherit;
}
.ods-col-btn:hover, .ods-col-btn.active {
  border-color: #a5b4fc; color: #6366f1; background: #eef2ff;
}

/* 아이콘 버튼 */
.ods-icon-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid #e2e8f0; background: #fff; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s; flex-shrink: 0;
}
.ods-icon-btn:hover { border-color: #c7d2fe; color: #6366f1; background: #eef2ff; }
.ods-icon-btn.danger { border-color: #fca5a5; color: #ef4444; }
.ods-icon-btn.danger:hover { background: #fef2f2; border-color: #ef4444; }

/* ── KPI 스트립 ── */
.ods-kpi-strip {
  display: flex; align-items: center; gap: 0;
  padding: 0 22px;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  flex-shrink: 0;
  overflow-x: auto;
}
.ods-kpi {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 20px 10px 0;
}
.ods-kpi + .ods-kpi { padding-left: 20px; }
.ods-kpi--main { padding-left: 0; }
.ods-kpi--ret {
  margin-left: 8px;
  padding: 8px 14px;
  background: #fff7f7;
  border-radius: 8px;
  border: 1px solid #fecaca;
}
.ods-kpi-sep { width: 1px; height: 28px; background: #f1f5f9; flex-shrink: 0; margin: 0 2px; }
.ods-kpi-lbl {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ods-kpi-val {
  font-size: 17px; font-weight: 800;
  color: #0f172a; letter-spacing: -0.03em; line-height: 1.2;
}
.ods-kpi--main .ods-kpi-val { color: #4f46e5; font-size: 18px; }
.ods-kpi--ret .ods-kpi-lbl { color: #f87171; }
.ods-kpi--ret .ods-kpi-val { color: #dc2626; font-size: 14px; }
.ods-kpi-val em {
  font-style: normal;
  font-size: 11px; font-weight: 600;
  color: #94a3b8; margin: 0 1px;
}
.ods-kpi--main .ods-kpi-val em { color: #a5b4fc; }
.ods-kpi--ret .ods-kpi-val em { color: #fca5a5; }
.ods-kpi--accent .ods-kpi-val { color: #4f46e5; }

/* ── 콘텐츠 레이아웃 ── */
.ods-content {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* ── 리스트 패널 ── */
.ods-list-panel {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
  margin: 12px 0 12px 12px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* ── 테이블 ── */
.ods-table-wrap { flex: 1; overflow: auto; }
.ods-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; table-layout: auto;
}
.ods-table th {
  position: sticky; top: 0; z-index: 2;
  background: #f8fafc;
  border-bottom: 2px solid #e8edf3;
  padding: 10px 14px;
  font-size: 11px; font-weight: 700; color: #64748b;
  text-align: left; white-space: nowrap;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; user-select: none;
}
.ods-table th:hover { color: #6366f1; }
.ods-th-inner { display: inline-flex; align-items: center; gap: 3px; }
.ods-sort-icon { display: inline-flex; color: #6366f1; }
.ods-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155; vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ods-td--c { text-align: center; }
.ods-td--r { text-align: right; }
.ods-table tr { cursor: pointer; transition: background .1s; }
.ods-table tr:last-child td { border-bottom: none; }
.ods-table tr:hover td { background: #f8fafc; }
.ods-table tr.selected td {
  background: #eef2ff;
}
.ods-table tr.selected td:first-child {
  border-left: 3px solid #6366f1;
  padding-left: 11px;
}

/* ── 페이지네이션 ── */
.ods-pagination {
  padding: 11px 18px;
  border-top: 1px solid #f1f5f9;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.ods-pg-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid #e2e8f0; background: #fff; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s;
}
.ods-pg-btn:hover:not(:disabled) { border-color: #a5b4fc; color: #6366f1; background: #eef2ff; }
.ods-pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.ods-pg-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.ods-pg-btn.active:hover { background: #4f46e5; border-color: #4f46e5; }
.ods-pg-info { font-size: 13px; font-weight: 700; color: #64748b; min-width: 56px; text-align: center; }
.ods-pg-sep { color: #cbd5e1; margin: 0 2px; }
.ods-pg-btns { display: flex; align-items: center; gap: 3px; }

/* ── 오버레이 ── */
.ods-overlay {
  display: none;
  position: absolute; inset: 0; z-index: 10;
  background: rgba(15,23,42,0.15);
  backdrop-filter: blur(1px);
}
.ods-overlay.open { display: block; }

/* ── 상세 패널 (슬라이드 인) ── */
.ods-detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 400px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 24px rgba(15,23,42,0.1);
  z-index: 20;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  border-radius: 0 0 0 0;
  overflow: hidden;
}
.ods-detail-panel.open {
  transform: translateX(0);
}

/* ── 다크모드 ── */
[data-theme="dark"] .ods-page     { background: #0d1117; }
[data-theme="dark"] .ods-topbar   { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ods-topbar-title   { color: var(--c-50); }
[data-theme="dark"] .ods-topbar-company { color: var(--c-500); }
[data-theme="dark"] .ods-tabs { background: var(--c-800); }
[data-theme="dark"] .ods-tab { color: var(--c-400); }
[data-theme="dark"] .ods-tab.active { background: var(--c-700); color: #a5b4fc; }
[data-theme="dark"] .ods-tab-cnt { background: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .ods-tab.active .ods-tab-cnt { background: rgba(99,102,241,0.2); color: #818cf8; }
[data-theme="dark"] .ods-filterbar { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ods-search-box { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ods-search-input { color: var(--c-100); }
[data-theme="dark"] .ods-date-pill { background: var(--c-800); color: var(--c-400); }
[data-theme="dark"] .ods-date-pill:hover { background: var(--c-700); color: var(--c-200); border-color: var(--c-600); }
[data-theme="dark"] .ods-date-pill.active { background: rgba(99,102,241,0.15); color: #a5b4fc; border-color: rgba(99,102,241,0.3); }
[data-theme="dark"] .ods-kpi-strip { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ods-kpi--ret { background: rgba(220,38,38,0.1); border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] .ods-list-panel { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ods-table th { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ods-table td { border-color: var(--c-800); color: var(--c-200); }
[data-theme="dark"] .ods-table tr:hover td { background: var(--c-800); }
[data-theme="dark"] .ods-table tr.selected td { background: rgba(99,102,241,0.12); }
[data-theme="dark"] .ods-table tr.selected td:first-child { border-left-color: #818cf8; }
[data-theme="dark"] .ods-detail-panel { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ods-pagination { border-color: var(--c-800); }
[data-theme="dark"] .ods-pg-btn { background: var(--c-800); border-color: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .ods-pg-btn:hover:not(:disabled) { background: var(--c-700); border-color: #818cf8; color: #a5b4fc; }
[data-theme="dark"] .ods-pg-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
[data-theme="dark"] .ods-pg-info { color: var(--c-400); }
[data-theme="dark"] .ods-kpi-lbl { color: var(--c-500); }
[data-theme="dark"] .ods-kpi-val { color: var(--c-100); }
[data-theme="dark"] .ods-searchbar { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ods-searchbar .ods-search-box { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ods-statusbar { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .ods-sb-kpi-main { color: #a5b4fc; border-color: var(--c-700); }
[data-theme="dark"] .ods-sb-kpi-main em { color: #6366f1; }
[data-theme="dark"] .ods-sb-kpi { border-color: var(--c-800); }
[data-theme="dark"] .ods-sb-kpi-lbl { color: var(--c-500); }
[data-theme="dark"] .ods-sb-kpi-val { color: var(--c-200); }
[data-theme="dark"] .ods-sb-filters .app-select-btn { background: var(--c-800) !important; border-color: var(--c-700) !important; color: var(--c-300) !important; }
[data-theme="dark"] .ods-sb-filters .app-select-btn { color: var(--c-400) !important; }
[data-theme="dark"] .ods-sb-filters .app-select-btn:hover { background: var(--c-800) !important; border-color: var(--c-700) !important; color: var(--c-200) !important; }
[data-theme="dark"] .ods-sb-filters .app-select-btn.is-open { background: rgba(99,102,241,0.15) !important; border-color: #818cf8 !important; color: #a5b4fc !important; }
[data-theme="dark"] .ord-col-search-wrap { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .ord-col-search-input { color: var(--c-100); }
[data-theme="dark"] .ord-col-chk-row { color: var(--c-400); }
[data-theme="dark"] .ord-col-chk-row:hover { background: var(--c-800); color: var(--c-200); }
[data-theme="dark"] .ord-col-chk-row.on { color: #a5b4fc; }
[data-theme="dark"] .ord-col-chk-row.on:hover { background: rgba(99,102,241,0.12); }
[data-theme="dark"] .ord-col-order-section { border-color: var(--c-800); }
[data-theme="dark"] .ord-col-order-row:hover { background: var(--c-800); }
[data-theme="dark"] .ord-col-order-num { background: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .ord-col-order-lbl { color: var(--c-300); }
[data-theme="dark"] .ord-col-order-btn { background: var(--c-800); border-color: var(--c-700); color: var(--c-500); }
[data-theme="dark"] .ord-col-order-btn:hover:not(:disabled) { background: var(--c-700); color: var(--c-200); border-color: var(--c-600); }
[data-theme="dark"] .ord-col-chip-seclbl { color: var(--c-600); }
[data-theme="dark"] .ods-sync-menu { background: var(--app-surface); border-color: var(--c-700); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .ods-sync-menu-item { color: var(--c-200); }
[data-theme="dark"] .ods-sync-menu-item:hover { background: var(--c-800); color: var(--c-100); }
[data-theme="dark"] .ods-sync-menu-all { color: #a5b4fc; }
[data-theme="dark"] .ods-sync-menu-all:hover { background: rgba(99,102,241,0.15); }
[data-theme="dark"] .ods-sync-menu-date { color: var(--c-500); }
[data-theme="dark"] .ods-sync-menu-date:hover { background: var(--c-800); color: var(--c-400); }
[data-theme="dark"] .ods-sync-menu-sep { background: var(--c-700); }
[data-theme="dark"] .ods-sync-menu-time { color: var(--c-500); }
[data-theme="dark"] .ods-sync-status-dot.idle { background: var(--c-600); }

/* ── 텍스트 송장 입력 모달 ── */
.ods-inv-text-modal {
  background: var(--app-surface);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  width: 440px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ods-inv-text-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-200);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-800);
}
.ods-inv-text-header button {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-500);
  padding: 2px;
  display: flex;
  align-items: center;
}
.ods-inv-text-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ods-inv-text-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ods-inv-text-row label {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-600);
  min-width: 60px;
  white-space: nowrap;
}
.ods-inv-text-row select,
.ods-inv-text-row input[type="text"] {
  flex: 1;
  height: 32px;
  border: 1px solid var(--c-300);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  background: var(--app-surface);
  color: var(--c-800);
}
.ods-inv-text-row--col {
  flex-direction: column;
  align-items: flex-start;
}
.ods-inv-text-row--col label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ods-inv-text-opt { color: var(--c-400); font-weight: 400; }
.ods-inv-text-hint { color: var(--c-400); font-weight: 400; font-size: 11px; }
.ods-inv-textarea {
  width: 100%;
  border: 1px solid var(--c-300);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-num);
  background: var(--app-surface);
  color: var(--c-800);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.6;
}
.ods-inv-text-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--c-200);
}
[data-theme="dark"] .ods-inv-text-header { border-color: var(--c-700); color: var(--c-200); }
[data-theme="dark"] .ods-inv-text-row select,
[data-theme="dark"] .ods-inv-text-row input[type="text"],
[data-theme="dark"] .ods-inv-textarea { background: var(--c-900); border-color: var(--c-700); color: var(--c-100); }
[data-theme="dark"] .ods-inv-text-footer { border-color: var(--c-700); }

/* ── 송장 입력 모달 텍스트 붙여넣기 ── */
.ods-inv-bulk-sep-v { width: 1px; height: 20px; background: var(--c-200); margin: 0 4px; }
.ods-inv-paste-toggle {
  display: flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--c-300); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; color: var(--c-600); cursor: pointer; white-space: nowrap;
}
.ods-inv-paste-toggle:hover { background: var(--c-50); color: var(--c-800); border-color: var(--c-400); }
.ods-inv-paste-panel {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--c-200);
  background: var(--c-50);
  display: flex; flex-direction: column; gap: 8px;
}
.ods-inv-paste-desc { font-size: 11px; color: var(--c-500); }
.ods-inv-paste-area {
  width: 100%; border: 1px solid var(--c-300); border-radius: 6px;
  padding: 8px 10px; font-size: 12px; font-family: var(--font-num);
  background: #fff; color: var(--c-800); resize: vertical; box-sizing: border-box; line-height: 1.7;
}
.ods-inv-paste-actions { display: flex; justify-content: flex-end; }
.ods-inv-paste-apply {
  background: #6366f1; color: #fff; border: none; border-radius: 6px;
  padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ods-inv-paste-apply:hover:not(:disabled) { background: #4f46e5; }
.ods-inv-paste-apply:disabled { opacity: 0.5; cursor: default; }
[data-theme="dark"] .ods-inv-bulk-sep-v { background: var(--c-700); }
[data-theme="dark"] .ods-inv-paste-toggle { border-color: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .ods-inv-paste-toggle:hover { background: var(--c-800); color: var(--c-200); }
[data-theme="dark"] .ods-inv-paste-panel { background: var(--c-900); border-color: var(--c-700); }
[data-theme="dark"] .ods-inv-paste-area { background: var(--c-800); border-color: var(--c-700); color: var(--c-100); }
.ods-inv-paste-desc code { background: var(--c-100); border-radius: 3px; padding: 1px 4px; font-family: var(--font-num); font-size: 11px; color: var(--c-700); }
[data-theme="dark"] .ods-inv-paste-desc code { background: var(--c-800); color: var(--c-300); }
/* ============================================================================
   PREMIUM GLASS + APP UX HYBRID
   원본 Glassmorphism 비주얼 + 네이티브 앱 조작감
   ※ CSS 변수는 appTheme.css에서 통합 관리
   ============================================================================ */


/* ============================================================================
   PAGE SHELL
   ============================================================================ */

.sm-print {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-height: 100vh;
  background: var(--bg, #f8fafc);
  position: relative;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
}

.sm-print::before { display: none; }

.sm-print > * { position: relative; z-index: 1; }


/* ============================================================================
   HERO — 원본 유리 + 앱 터치 피드백
   ============================================================================ */

.print-hero {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--r-2xl);
  padding: 44px 48px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-elevated), var(--sh-inner);
  position: relative;
  overflow: visible;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.print-hero:hover {
  box-shadow: var(--sh-float), var(--sh-inner);
  transform: translateY(-1px);
}

/* 상단 미세 accent line */
.print-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 48px; right: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15), transparent);
}


/* ============================================================================
   BADGES
   ============================================================================ */

.hero-badges-float {
  position: absolute; top: 20px; right: 24px;
  display: flex; gap: 8px; z-index: 10;
}

.hero-badge {
  font-size: var(--text-sm); font-weight: var(--font-bold); padding: 8px 18px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(163, 177, 198, 0.12), var(--sh-inner);
  transition: all var(--normal) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.hero-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(163, 177, 198, 0.16), var(--sh-inner); }
.hero-badge:active { transform: scale(0.96); }

.hero-badge.company { background: rgba(238, 242, 255, 0.9); color: var(--primary); border-color: rgba(99, 102, 241, 0.12); }
.hero-badge.status { background: rgba(238, 242, 255, 0.9); color: var(--info); border-color: rgba(59, 130, 246, 0.12); }


/* ============================================================================
   HERO CONTENT
   ============================================================================ */

.print-hero-content {
  display: flex; flex-direction: column; gap: 36px;
  position: relative; z-index: 1;
}

.hero-center {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
}

/* Neumorphic Icon */
.print-hero-icon {
  width: 80px; height: 80px;
  background: linear-gradient(145deg, #fafbfe, #eef0f8);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  box-shadow: 6px 6px 16px rgba(163, 177, 198, 0.2), -6px -6px 16px rgba(255, 255, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all var(--normal) var(--ease);
}

.print-hero-icon:hover {
  box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.2), -4px -4px 10px rgba(255, 255, 255, 0.85), inset 2px 2px 6px rgba(163, 177, 198, 0.08), inset -2px -2px 6px rgba(255, 255, 255, 0.6);
  transform: scale(1.03);
}

.print-hero-icon:active { transform: scale(0.97); }
.print-hero-icon svg { filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.25)); }

.print-hero-title-group { display: flex; flex-direction: column; gap: 6px; }
.print-hero-title { font-size: 32px; font-weight: var(--font-black); color: var(--text-primary); letter-spacing: -0.04em; margin: 0; line-height: 1.15; }
.print-hero-desc { font-size: var(--text-md); color: var(--text-secondary); font-weight: var(--font-medium); line-height: 1.5; margin: 0; }


/* ============================================================================
   QUICK ACTIONS
   ============================================================================ */

.print-quick-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.action-primary-group { display: flex; justify-content: center; width: 100%; }
.action-secondary-group { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }


/* ============================================================================
   BUTTONS — 원본 유리 + 앱 press 피드백
   ============================================================================ */

.hero-btn {
  border-radius: var(--r-md); font-weight: var(--font-bold); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; transition: all var(--normal) var(--ease);
  border: none; position: relative; font-family: inherit;
  -webkit-tap-highlight-color: transparent; /* 앱 터치 */
  user-select: none;
}

/* Large Primary — 터치 타겟 48px+ */
.hero-btn.primary.large {
  height: 56px; padding: 0 40px; font-size: var(--text-lg); min-width: 250px;
  background: var(--primary-gradient); color: white; border-radius: var(--r-lg);
  box-shadow: var(--sh-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero-btn.primary.large:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.35), 0 12px 40px rgba(99, 102, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hero-btn.primary.large:active {
  transform: scale(0.97); /* 앱 press */
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
  transition-duration: 0.06s;
}

/* Compact Secondary — 터치 타겟 44px */
.hero-btn.secondary.compact {
  height: 44px; padding: 0 18px; font-size: var(--text-base);
  background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px);
  color: var(--text-secondary);
  box-shadow: var(--sh-subtle), var(--sh-inner);
  border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--r-sm);
}

.hero-btn.secondary.compact span { display: none; }
.hero-btn.secondary.compact:hover { background: rgba(255, 255, 255, 0.95); color: var(--primary); transform: translateY(-2px); }
.hero-btn.secondary.compact:active { transform: scale(0.95); transition-duration: 0.06s; }

.hero-btn svg { transition: transform var(--normal) var(--ease); }
.hero-btn:hover:not(:disabled) svg { transform: scale(1.08); }
.hero-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.icon-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* ============================================================================
   MAIN
   ============================================================================ */

.print-main { display: flex; flex-direction: column; gap: 28px; flex: 1; }
.print-surface { display: flex; flex-direction: column; gap: 12px; }
.print-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }


/* ============================================================================
   CARD — 유리 카드
   ============================================================================ */

.print-card {
  background: var(--glass-bg-strong); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--r-xl); border: 1px solid var(--glass-border);
  box-shadow: var(--sh-card); overflow: visible;
  transition: box-shadow var(--normal) var(--ease), transform var(--normal) var(--ease);
  position: relative; z-index: 10;
}

.print-card:hover { box-shadow: var(--sh-elevated); transform: translateY(-2px); }

.card-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.4);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), transparent);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.card-title { font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--text-primary); display: flex; align-items: center; gap: 10px; margin: 0; letter-spacing: -0.02em; }
.card-title svg { color: var(--primary); min-width: 20px; filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.2)); }
.card-subtitle { font-size: var(--text-base); color: var(--text-secondary); margin: 6px 0 0 30px; font-weight: var(--font-medium); line-height: 1.5; }
.card-body { padding: 16px 24px 24px; }


/* ============================================================================
   FORM
   ============================================================================ */

.form-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(226, 232, 240, 0.4); }
.form-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.form-section-header {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-muted);
  margin-bottom: 10px;
}

.form-section-header svg { width: 14px; height: 14px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; margin-top: 10px; }
.form-grid.compact { gap: 12px 16px; }

.form-field { display: flex; flex-direction: column; gap: 8px; position: relative; }
.form-field:first-child { margin-top: 0; }
.form-field.full-width, .form-field.sources-field { grid-column: 1 / -1; }

.field-label { display: flex; justify-content: space-between; align-items: center; gap: 6px; }

.field-label-text {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px; letter-spacing: -0.01em;
}

.field-label svg, .field-label-text svg { color: var(--text-muted); }
.input-group { position: relative; width: 100%; }

/* Field Help — 터치 44px */
.field-help, .field-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(241, 245, 249, 0.9); border: 1px solid rgba(226, 232, 240, 0.7);
  color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--font-extrabold); cursor: help;
  transition: all var(--fast) var(--ease);
  flex-shrink: 0; pointer-events: auto !important; position: relative; z-index: 10;
}

.field-help-btn { cursor: pointer; }
.field-help:hover, .field-help-btn:hover { background: rgba(238, 242, 255, 0.95); color: var(--primary); border-color: rgba(99, 102, 241, 0.25); transform: scale(1.12); }
.field-help-btn:active { transform: scale(0.95); }


/* ============================================================================
   ENGINE INFO
   ============================================================================ */

.engine-info {
  margin-top: 0; margin-bottom: 20px; padding: 12px 16px;
  background: rgba(248, 250, 252, 0.7); border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: var(--r-sm); font-size: var(--text-base); backdrop-filter: blur(8px);
}

.engine-info.top-spacing { margin-bottom: 24px; }
.engine-info-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.engine-info-label { color: var(--text-secondary); font-weight: var(--font-medium); }
.engine-info-value { font-weight: var(--font-bold); color: var(--text-primary); }

.engine-info-badge {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: var(--text-xs);
  padding: 3px 10px; border-radius: var(--r-full);
  border: 1px solid rgba(99, 102, 241, 0.15); background: rgba(99, 102, 241, 0.06);
  color: var(--primary); font-weight: var(--font-semibold);
}

.engine-info-desc { margin-top: 6px; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; }


/* ============================================================================
   INPUTS — 유리 인풋 + 앱 포커스 링
   ============================================================================ */

.date-input, .modern-input, input[type="text"], input[type="date"], select {
  width: 100%; height: 42px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--r-sm); padding: 0 14px;
  font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-primary);
  transition: all var(--normal) var(--ease);
  outline: none; font-family: inherit;
}

.po-page .date-input:hover, .po-page .modern-input:hover, .po-page input:hover, .po-page select:hover { border-color: rgba(99, 102, 241, 0.25); background: rgba(255, 255, 255, 0.9); }
.po-page .date-input:focus, .po-page .modern-input:focus, .po-page input:focus, .po-page select:focus { background: white; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }


/* ============================================================================
   DROPDOWN — 유리 메뉴 + 앱 터치
   ============================================================================ */

.app-dd { position: relative; width: 100%; }

.app-dd-trigger {
  width: 100%; height: 42px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--r-sm); padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: all var(--normal) var(--ease);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.app-dd-trigger:hover { border-color: rgba(99, 102, 241, 0.25); background: rgba(255, 255, 255, 0.9); }
.app-dd-trigger:focus, .app-dd.open .app-dd-trigger { background: white; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.app-dd-trigger:active { transform: scale(0.99); transition-duration: 0.06s; }
.app-dd-trigger:disabled { opacity: 0.4; pointer-events: none; }

.app-dd-left { display: flex; align-items: center; gap: 10px; flex: 1; overflow: hidden; }
.app-dd-icon { color: var(--text-muted); display: flex; flex-shrink: 0; }
.app-dd-text { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-dd-caret { color: var(--text-faint); transition: all var(--normal) var(--ease); }
.app-dd-trigger:hover .app-dd-caret, .app-dd.open .app-dd-caret { color: var(--primary); }
.app-dd.open .app-dd-caret { transform: rotate(180deg); }

.app-dd-menu {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-float); z-index: 999;
  overflow-y: auto; overscroll-behavior: contain; /* 앱 스크롤 */
  max-height: 320px; padding: 6px;
  animation: dropPop 0.18s var(--ease);
}

.app-dd-menu.upward { transform: translateY(-100%); animation: dropPopUp 0.18s var(--ease); }

@keyframes dropPop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dropPopUp { from { opacity: 0; transform: translateY(calc(-100% + 6px)) scale(0.97); } to { opacity: 1; transform: translateY(-100%) scale(1); } }

.app-dd-item {
  width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--r-sm);
  background: transparent; border: none; font-size: var(--text-md); font-weight: var(--font-semibold);
  color: var(--text-secondary); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: all var(--fast) var(--ease); font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.app-dd-item:hover { background: rgba(99, 102, 241, 0.06); color: var(--text-primary); }
.app-dd-item:active { background: rgba(99, 102, 241, 0.1); transform: scale(0.98); }

.app-dd-item.selected {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06));
  color: var(--primary); font-weight: var(--font-bold);
}

.app-dd-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-dd-check { color: var(--primary); flex-shrink: 0; }


/* ============================================================================
   DATE PICKER — 유리 캘린더 + 앱 터치
   ============================================================================ */

.date-field .input-group { width: 100%; }
.date-input-wrap { width: 100%; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.date-input { pointer-events: none !important; }

.date-input-display {
  width: 100%; height: 42px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--r-sm); padding: 0 42px 0 14px;
  font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-primary);
  transition: all var(--normal) var(--ease); font-family: inherit;
  display: flex; align-items: center; pointer-events: none;
}

.date-input-wrap:hover .date-input-display { border-color: rgba(99, 102, 241, 0.25); background: rgba(255, 255, 255, 0.9); }
.date-input-wrap:active .date-input-display { background: white; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }

.date-input-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none !important; }

.dp-pop {
  position: fixed; z-index: 10000;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(24px);
  border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-float); width: 320px; padding: 20px;
  animation: popIn 0.2s var(--ease);
}

@keyframes popIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dp-title { font-weight: var(--font-extrabold); font-size: var(--text-lg); color: var(--text-primary); letter-spacing: -0.02em; }

.dp-nav {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(226, 232, 240, 0.6); background: rgba(255, 255, 255, 0.8);
  cursor: pointer; color: var(--text-secondary); transition: all var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.dp-nav:hover { background: rgba(238, 242, 255, 0.8); color: var(--primary); }
.dp-nav:active { transform: scale(0.92); transition-duration: 0.06s; }

.dp-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; text-align: center; }
.dp-weekday { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-faint); padding: 4px 0; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 14px; }

.dp-day {
  height: 38px; border-radius: var(--r-sm); border: none; background: transparent;
  font-family: inherit; font-size: var(--text-md); font-weight: var(--font-medium); color: var(--text-primary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.dp-day:not(.sel):hover { background: rgba(241, 245, 249, 0.8); }
.dp-day:active:not(.sel) { transform: scale(0.9); transition-duration: 0.06s; }
.dp-day.out { color: var(--text-faint); }
.dp-day.today { font-weight: var(--font-extrabold); color: var(--primary); background: rgba(99, 102, 241, 0.08); }
.dp-day.sel { background: var(--primary) !important; color: white !important; font-weight: var(--font-bold); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }
.dp-day.sel:hover { background: var(--primary-deep) !important; }

.dp-foot { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(226, 232, 240, 0.3); }

.dp-foot-btn {
  flex: 1; height: 40px; border-radius: var(--r-sm); font-size: var(--text-base); font-weight: var(--font-bold);
  cursor: pointer; border: none; background: rgba(248, 250, 252, 0.8); color: var(--text-secondary);
  font-family: inherit; transition: all var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.dp-foot-btn:hover { background: rgba(226, 232, 240, 0.6); }
.dp-foot-btn:active { transform: scale(0.96); transition-duration: 0.06s; }
.dp-foot-btn.ghost { background: transparent; }


/* ============================================================================
   SOURCES — 유리 칩 + 앱 press
   ============================================================================ */

.sources-field { gap: 8px !important; }

.sources-panel {
  background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px);
  border-radius: var(--r-md); padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 10px rgba(163, 177, 198, 0.08);
}

.sources-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.sources-head-left { display: flex; align-items: center; gap: 10px; }

.sources-count {
  font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--primary);
  background: rgba(99, 102, 241, 0.06); padding: 5px 14px;
  border-radius: var(--r-full); border: 1px solid rgba(99, 102, 241, 0.12);
}

.sources-actions { display: flex; gap: 6px; }

.sources-action-btn {
  background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary);
  padding: 8px 14px; cursor: pointer; transition: all var(--fast) var(--ease);
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}

.sources-action-btn:hover { color: var(--primary); border-color: rgba(99, 102, 241, 0.25); background: white; }
.sources-action-btn:active { transform: scale(0.95); transition-duration: 0.06s; }
.sources-action-btn:disabled { opacity: 0.4; pointer-events: none; }

/* Help */
.sources-help-wrap { position: relative; display: inline-flex; }

.sources-help-btn {
  width: 20px; height: 20px; min-width: 20px; min-height: 20px;
  border-radius: 50%; background: rgba(241, 245, 249, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.7); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--fast) var(--ease); padding: 0; outline: none;
}

.sources-help-btn svg { width: 14px; height: 14px; }
.sources-help-btn:hover { background: rgba(238, 242, 255, 0.95); color: var(--primary); transform: scale(1.1); }
.sources-help-btn:focus { outline: 2px solid rgba(99, 102, 241, 0.25); outline-offset: 2px; }
.sources-help-btn:active { transform: scale(0.95); }

.sources-help-pop {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; max-width: 400px;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(24px);
  border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-float); padding: 16px; z-index: 100; animation: popIn 0.2s var(--ease);
}

.sources-help-title { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--text-primary); margin-bottom: 8px; }
.sources-help-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; margin-bottom: 12px; }
.sources-help-list { display: flex; flex-direction: column; gap: 6px; }
.sources-help-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: rgba(248, 250, 252, 0.7); border-radius: var(--r-sm); font-size: var(--text-sm); }
.sources-help-row b { color: var(--text-primary); font-weight: var(--font-bold); }
.sources-help-row span { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.4; }

/* Chips — 앱 press 피드백 */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }

.source-chip {
  padding: 10px 14px; border-radius: var(--r-sm); font-size: var(--text-base); font-weight: var(--font-semibold);
  color: var(--text-secondary); background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(226, 232, 240, 0.7); cursor: pointer;
  transition: all var(--normal) var(--ease);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.source-chip:hover { border-color: rgba(99, 102, 241, 0.25); color: var(--primary); background: white; }

.source-chip:active {
  transform: scale(0.97);
  transition-duration: 0.06s;
}

.source-chip.active {
  background: var(--primary-gradient); color: white;
  border-color: transparent; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.source-chip.active:hover { box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3); }
.source-chip.active:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2); }
.source-chip:disabled { opacity: 0.35; pointer-events: none; }
.source-chip svg { transition: transform var(--normal) var(--ease); flex-shrink: 0; }
.source-chip.active svg { transform: scale(1.08); }

.field-error-slot {
  font-size: var(--text-base); color: var(--error); font-weight: var(--font-semibold); min-height: 20px; margin-top: 8px;
  padding: 12px 16px; background: rgba(254, 242, 242, 0.85);
  border: 1px solid rgba(254, 226, 226, 0.7); border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 8px;
}

.field-error-slot:empty { display: none; }
.vis-hidden { visibility: hidden; }


/* ============================================================================
   STATUS CARD — 유리 + 프리미엄 shimmer
   ============================================================================ */

.status-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.85));
  backdrop-filter: blur(24px); border-radius: var(--r-xl); padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--sh-elevated);
  text-align: center; position: relative; overflow: hidden;
  transition: all var(--normal) var(--ease);
}

.status-card.modern { background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.85)); }

.status-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), #8b5cf6, var(--accent-warm), #8b5cf6, var(--primary));
  background-size: 300% 100%; animation: shimmerLine 4s ease infinite;
}

@keyframes shimmerLine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.status-card:hover { box-shadow: var(--sh-float); transform: translateY(-2px); }

.status-title { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; }
.status-value { font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--text-primary); margin-bottom: 14px; letter-spacing: -0.02em; }

.status-label {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: var(--r-sm); font-size: var(--text-md); font-weight: var(--font-bold);
  background: rgba(248, 250, 252, 0.8); color: var(--text-secondary);
  backdrop-filter: blur(8px); border: 1px solid rgba(226, 232, 240, 0.6);
}

.status-icon-large { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.status-icon-success { color: var(--success); filter: drop-shadow(0 4px 14px rgba(16, 185, 129, 0.3)); }
.status-icon-running { color: var(--primary); filter: drop-shadow(0 4px 14px rgba(99, 102, 241, 0.3)); }
.status-icon-error { color: var(--error); filter: drop-shadow(0 4px 14px rgba(239, 68, 68, 0.3)); }
.status-icon-waiting { color: var(--primary); opacity: 0.6; animation: pulse 2s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

.status-value-large { font-size: var(--text-3xl); font-weight: var(--font-black); color: var(--text-primary); text-align: center; margin-bottom: 14px; letter-spacing: -0.03em; }

.progress-wrapper { width: 100%; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px auto 0; }
.progress-bar { width: 100%; height: 5px; background: rgba(226, 232, 240, 0.5); border-radius: 100px; overflow: hidden; }

.progress-fill {
  height: 100%; background: var(--primary-gradient); border-radius: 100px;
  transition: width 0.5s var(--ease); position: relative;
}

.progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
.progress-text { font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--primary); }


/* ============================================================================
   SECTIONS
   ============================================================================ */

.section-card {
  background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px);
  border-radius: var(--r-md); border: 1px solid rgba(226, 232, 240, 0.6);
  padding: 20px; margin-top: 14px; box-shadow: 0 2px 10px rgba(163, 177, 198, 0.06);
  transition: all var(--normal) var(--ease);
}

.section-card:hover { box-shadow: var(--sh-card); transform: translateY(-1px); }

.section-header {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--text-secondary);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.3);
}

.section-header svg { color: var(--primary); }


/* ============================================================================
   FOLDER GRID — 앱 터치 피드백
   ============================================================================ */

.folder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.folder-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px 10px; border-radius: var(--r-sm);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.7));
  border: 1px solid rgba(226, 232, 240, 0.5); cursor: pointer;
  transition: all var(--normal) var(--ease); min-height: 95px;
  -webkit-tap-highlight-color: transparent;
}

.folder-btn:hover {
  background: linear-gradient(145deg, white, rgba(238, 242, 255, 0.8));
  border-color: rgba(99, 102, 241, 0.25); transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.12);
}

.folder-btn:active { transform: scale(0.96); transition-duration: 0.06s; }

.folder-btn-icon { color: var(--primary); transition: all var(--normal) var(--ease); }
.folder-btn:hover .folder-btn-icon { color: var(--primary-deep); transform: scale(1.08); }
.folder-btn-label { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-primary); text-align: center; }

.folder-btn-path {
  font-size: var(--text-xs); color: var(--c-600); font-weight: var(--font-bold); text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: rgba(248, 250, 252, 0.9); padding: 4px 8px; border-radius: var(--r-xs);
  margin-top: 2px; border: 1px solid rgba(226, 232, 240, 0.6);
}

.folder-btn:hover .folder-btn-path { color: var(--primary); background: rgba(238, 242, 255, 0.85); }


/* ============================================================================
   RESULT FILES — 앱 스와이프 느낌
   ============================================================================ */

.result-section {
  margin-top: 18px; background: rgba(248, 250, 252, 0.4); border-radius: var(--r-md);
  padding: 18px; border: 1px solid rgba(226, 232, 240, 0.5);
}

.result-section-header { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--primary); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.result-files-grid { display: flex; flex-direction: column; gap: 8px; }

.result-file-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: var(--r-sm); cursor: pointer; transition: all var(--normal) var(--ease);
  text-align: left; width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.result-file-card:hover { background: rgba(238, 242, 255, 0.7); border-color: rgba(99, 102, 241, 0.2); transform: translateX(4px); }
.result-file-card:active { transform: scale(0.98); transition-duration: 0.06s; }

.result-file-icon { flex-shrink: 0; color: var(--primary); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(99, 102, 241, 0.08); border-radius: var(--r-sm); }
.result-file-info { flex: 1; min-width: 0; }
.result-file-label { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: 2px; }
.result-file-action { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--font-medium); }
.result-file-arrow { flex-shrink: 0; color: var(--text-faint); transition: all var(--normal) var(--ease); }
.result-file-card:hover .result-file-arrow { color: var(--primary); transform: translateX(4px); }


/* ============================================================================
   ACTION BUTTONS — 앱 press
   ============================================================================ */

.action-btn-large {
  width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-sm); border: 1px solid rgba(226, 232, 240, 0.6);
  background: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: var(--text-md); font-weight: var(--font-semibold);
  color: var(--text-secondary); cursor: pointer; transition: all var(--normal) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.action-btn-large:hover { background: white; color: var(--primary); border-color: rgba(99, 102, 241, 0.25); }
.action-btn-large:active { transform: scale(0.97); transition-duration: 0.06s; }
.action-btn-large:disabled { opacity: 0.4; pointer-events: none; }

.action-btn-large.refresh-success { background: linear-gradient(135deg, var(--success), var(--success-deep)); color: white; border-color: transparent; animation: refreshPop 0.4s var(--ease-spring); }

@keyframes refreshPop { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }

.action-buttons-group { display: flex; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(226, 232, 240, 0.3); }

.action-btn {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-semibold); background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.6); color: var(--text-secondary);
  cursor: pointer; transition: all var(--fast) var(--ease); flex: 1; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.action-btn:hover:not(:disabled) { background: white; color: var(--primary); border-color: rgba(99, 102, 241, 0.25); }
.action-btn:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.06s; }
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.action-btn svg { transition: all var(--fast) var(--ease); }
.action-btn:hover:not(:disabled) svg { color: var(--primary); }
.action-btn.refresh:hover:not(:disabled) svg { transform: rotate(180deg); }


/* ============================================================================
   PATH MODAL — 바텀 시트 (앱 UX) + 유리 비주얼
   ============================================================================ */

.path-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center; /* 바텀 시트 */
  z-index: 10000; animation: overlayIn 0.2s var(--ease);
}

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.path-modal {
  background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(24px);
  border-radius: var(--r-xl) var(--r-xl) 0 0; /* 바텀 시트 */
  box-shadow: var(--sh-modal);
  max-width: 600px; width: 100%;
  max-height: 85vh; overflow: hidden;
  animation: sheetUp 0.35s var(--ease);
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* 드래그 핸들 (앱 느낌) */
.path-modal::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 100px;
  margin: 10px auto 0;
}

.path-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.4);
}

.path-modal-title {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--text-primary); letter-spacing: -0.02em;
}

.path-modal-title svg { color: var(--primary); filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.2)); }

.path-modal-close {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: rgba(241, 245, 249, 0.8); border: none; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.path-modal-close:hover { background: rgba(226, 232, 240, 0.8); color: var(--text-primary); }
.path-modal-close:active { transform: scale(0.9); transition-duration: 0.06s; }

.path-modal-body { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 20px; }
.path-modal-section { margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; }

.path-modal-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.path-modal-section-title svg { flex-shrink: 0; }

.path-modal-path {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: var(--text-base); color: var(--text-secondary);
  background: rgba(248, 250, 252, 0.7); padding: 14px 16px; border-radius: var(--r-sm);
  border: 1px solid rgba(226, 232, 240, 0.5); word-break: break-all; line-height: 1.7;
}

.path-modal-open-btn {
  width: 100%; height: 52px; border-radius: var(--r-sm);
  background: var(--primary-gradient); border: none; color: white;
  font-size: var(--text-md); font-weight: var(--font-bold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all var(--normal) var(--ease); box-shadow: var(--sh-glow);
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}

.path-modal-open-btn:hover { box-shadow: 0 8px 28px rgba(99, 102, 241, 0.4); }
.path-modal-open-btn:active { transform: scale(0.97); transition-duration: 0.06s; }


/* ============================================================================
   BOTTOM BAR — 유리 독 + safe area
   ============================================================================ */

.print-bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  pointer-events: none;
  padding: 8px 16px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}

.bottom-bar-inner {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  padding: 6px 8px; border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 28px rgba(163, 177, 198, 0.16), 0 2px 6px rgba(163, 177, 198, 0.06), var(--sh-inner);
  display: inline-flex; gap: 6px; align-items: center;
  margin: 0 auto;
}

.bottom-btn {
  height: 44px; padding: 0 22px; border-radius: var(--r-sm); font-size: var(--text-md); font-weight: var(--font-bold);
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: all var(--normal) var(--ease); border: none; white-space: nowrap;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}

.bottom-btn:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.06s; }
.bottom-btn:disabled { opacity: 0.4; pointer-events: none; }

.bottom-btn.secondary {
  background: rgba(255, 255, 255, 0.85); color: var(--text-secondary);
  box-shadow: 0 2px 8px rgba(163, 177, 198, 0.1); border: 1px solid rgba(226, 232, 240, 0.6);
}

.bottom-btn.secondary:hover { background: white; color: var(--primary); border-color: rgba(99, 102, 241, 0.25); transform: translateY(-2px); }

.bottom-btn.primary { background: var(--primary-gradient); color: white; box-shadow: var(--sh-glow); }
.bottom-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99, 102, 241, 0.35); }

.bottom-btn.danger { background: rgba(254, 242, 242, 0.8); color: var(--error); border: 1px solid rgba(254, 226, 226, 0.6); }
.bottom-btn.danger:hover { background: rgba(254, 226, 226, 0.6); transform: translateY(-2px); }


/* ============================================================================
   INFO & QUICK LINKS
   ============================================================================ */

.info-list { display: flex; flex-direction: column; gap: 10px; }

.info-item {
  display: flex; flex-direction: column; align-items: flex-start; font-size: var(--text-base);
  padding: 14px 16px; background: rgba(248, 250, 252, 0.5); border-radius: var(--r-sm);
  transition: all var(--fast) var(--ease); gap: 6px;
}

.info-item:hover { background: rgba(255, 255, 255, 0.85); }

.info-label { color: var(--text-secondary); font-weight: var(--font-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }

.info-value {
  font-weight: var(--font-semibold); color: var(--text-primary); text-align: left; word-break: break-all;
  font-size: var(--text-xs); line-height: 1.6; width: 100%; padding: 8px 10px;
  background: rgba(255, 255, 255, 0.5); border-radius: var(--r-sm); border: 1px solid rgba(226, 232, 240, 0.4);
}

.info-value.mono { font-family: 'SF Mono', 'Fira Code', monospace; }
.info-value.clickable { cursor: pointer; transition: color var(--fast); -webkit-tap-highlight-color: transparent; }
.info-value.clickable:hover { color: var(--primary); }
.info-value.clickable:active { opacity: 0.7; }

.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }

.quick-link {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(226, 232, 240, 0.6);
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer;
  transition: all var(--fast) var(--ease); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.quick-link:hover { border-color: rgba(99, 102, 241, 0.25); color: var(--primary); transform: translateY(-2px); box-shadow: var(--sh-card); background: white; }
.quick-link:active { transform: scale(0.96); transition-duration: 0.06s; }

.quick-link-icon { color: var(--text-muted); transition: all var(--fast); min-width: 16px; }
.quick-link:hover .quick-link-icon { color: var(--primary); transform: scale(1.08); }
.quick-link-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn.tiny {
  height: 36px; padding: 0 16px; border-radius: var(--r-sm); font-size: var(--text-base); font-weight: var(--font-semibold);
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(226, 232, 240, 0.6);
  color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--fast) var(--ease); font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.btn.tiny:hover:not(:disabled) { background: white; border-color: rgba(99, 102, 241, 0.25); color: var(--primary); }
.btn.tiny:active:not(:disabled) { transform: scale(0.95); transition-duration: 0.06s; }
.btn.tiny:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.tiny svg { color: var(--text-muted); transition: color var(--fast); }
.btn.tiny:hover:not(:disabled) svg { color: var(--primary); }

.btn.tiny.primary { background: var(--primary); border-color: transparent; color: white; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2); }
.btn.tiny.primary:hover { background: var(--primary-deep); }


/* ============================================================================
   ALERTS
   ============================================================================ */

.print-alert { padding: 16px 20px; border-radius: var(--r-md); font-size: var(--text-base); line-height: 1.55; backdrop-filter: blur(12px); }
.print-alert.error { background: rgba(254, 242, 242, 0.8); border: 1px solid rgba(254, 226, 226, 0.6); color: var(--error-text); }
.print-alert.warning { background: rgba(255, 251, 235, 0.8); border: 1px solid rgba(254, 243, 199, 0.6); color: var(--warning-text); }
.print-alert.info { background: rgba(238, 242, 255, 0.7); border: 1px solid rgba(199, 210, 254, 0.5); color: #1e40af; }

.alert-title { display: flex; align-items: center; gap: 6px; font-weight: var(--font-extrabold); font-size: var(--text-base); margin-bottom: 4px; }
.alert-content { font-weight: var(--font-medium); }
.alert-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }


/* ============================================================================
   TOOLTIP
   ============================================================================ */

.custom-tooltip {
  position: fixed; background: linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.97));
  backdrop-filter: blur(12px); color: white; padding: 10px 14px; border-radius: var(--r-sm);
  font-size: var(--text-sm); line-height: 1.5; font-weight: var(--font-medium); z-index: 99999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); max-width: 280px;
  pointer-events: none; animation: tooltipIn 0.15s var(--ease);
}

.custom-tooltip::before {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: rgba(15, 23, 42, 0.97);
}

@keyframes tooltipIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }


/* ============================================================================
   MISC
   ============================================================================ */

.hint-box {
  padding: 16px 20px; background: rgba(238, 242, 255, 0.45);
  border: 1px solid rgba(199, 210, 254, 0.4); border-radius: var(--r-sm);
  font-size: var(--text-base); line-height: 1.6; color: #1e40af; margin-top: 18px;
}

.hint-box b { color: #1e3a8a; font-weight: var(--font-bold); }

.path-info { padding: 14px 18px; background: rgba(248, 250, 252, 0.7); border: 1px solid rgba(226, 232, 240, 0.6); border-radius: var(--r-sm); font-size: var(--text-base); margin-bottom: 16px; }
.path-label { font-weight: var(--font-semibold); color: var(--text-secondary); margin-bottom: 4px; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.path-value { font-family: 'SF Mono', 'Fira Code', monospace; font-size: var(--text-sm); color: var(--text-primary); word-break: break-all; line-height: 1.5; }
.last-run-info { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--text-secondary); padding: 6px 12px; background: rgba(248, 250, 252, 0.5); border-radius: var(--r-full); }
.last-run-info b { font-weight: var(--font-semibold); color: var(--text-primary); }

.mono { font-family: 'SF Mono', 'Fira Code', monospace; }
.mono.small { font-size: var(--text-xs); color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.muted { color: var(--text-muted); font-weight: var(--font-medium); }
.path-card { transition: all var(--normal) var(--ease); }
.path-card:hover { cursor: pointer; }
.path-card:hover .path-text { color: var(--primary); }

.quick-nav-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(226, 232, 240, 0.3); }
.quick-nav-title { font-size: var(--text-md); font-weight: var(--font-bold); margin-bottom: 12px; color: var(--text-secondary); }
.quick-nav-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* Scrollbar */
.app-dd-menu::-webkit-scrollbar { width: 4px; }
.app-dd-menu::-webkit-scrollbar-track { background: transparent; }
.app-dd-menu::-webkit-scrollbar-thumb { background: rgba(163, 177, 198, 0.2); border-radius: 100px; }

/* Animations */
.fade-in { animation: fadeIn 0.3s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.print-grid .print-card:nth-child(1) { animation: fadeIn 0.4s var(--ease) 0.05s both; }
.print-grid .print-card:nth-child(2) { animation: fadeIn 0.4s var(--ease) 0.12s both; }


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1024px) {
  .print-grid { grid-template-columns: 1fr; }
  .hero-badges-float { position: static; justify-content: center; margin-bottom: 16px; }
  .hero-btn.secondary.compact span { display: inline; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .bottom-bar-inner { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .sm-print { padding: 16px; gap: 24px; padding-bottom: 68px; }
  .print-hero { padding: 32px 24px; border-radius: var(--r-xl); }
  .print-hero::after { left: 24px; right: 24px; }
  .print-hero-icon { width: 68px; height: 68px; }
  .print-hero-title { font-size: var(--text-3xl); }
  .hero-btn.primary.large { height: 52px; padding: 0 32px; font-size: var(--text-md); min-width: 220px; }
  .action-secondary-group { width: 100%; }
  .hero-btn.secondary.compact { flex: 1; min-width: 80px; }
  .card-header { padding: 22px 22px 16px; }
  .card-body { padding: 16px 22px 22px; }
  .print-bottom-bar { padding: 6px 12px; }
  .bottom-btn { height: 42px; padding: 0 18px; font-size: var(--text-base); }
  .folder-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-links { grid-template-columns: 1fr; }
  .action-buttons-group { flex-direction: column; }
  .card-title { font-size: var(--text-lg); }
  .card-subtitle { font-size: var(--text-sm); margin-left: 26px; }
  .info-item { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 480px) {
  .sm-print { padding: 12px; padding-bottom: 64px; }
  .print-hero { padding: 24px 18px; border-radius: var(--r-lg); }
  .print-hero::after { left: 18px; right: 18px; }
  .print-hero-icon { width: 60px; height: 60px; }
  .print-hero-title { font-size: var(--text-2xl); }
  .print-hero-desc { font-size: var(--text-md); }
  .hero-btn.primary.large { height: 48px; min-width: 100%; font-size: var(--text-md); }
  .action-secondary-group { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .hero-btn.secondary.compact { height: 40px; }
  .card-header { padding: 18px 16px 14px; }
  .card-body { padding: 14px 16px 18px; }
  .bottom-bar-inner { padding: 8px 10px; flex-direction: column; }
  .bottom-btn { width: 100%; height: 40px; font-size: var(--text-sm); }
  .folder-grid { grid-template-columns: repeat(2, 1fr); }
  .card-title { font-size: var(--text-md); }
  .action-buttons-group { flex-direction: column; }
  .action-btn { justify-content: center; width: 100%; }
}

/* ─── 발주서 출력 모달 ─── */
.print-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.print-modal {
  background: var(--app-surface);
  border-radius: var(--r-xl);
  width: min(700px, 96vw);
  max-width: 700px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.print-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--c-100);
}

.print-modal-header-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.print-modal-header-icon svg { color: var(--primary); }

.print-modal-header-text {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--c-800);
  flex: 1;
}

.print-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--c-100);
  color: var(--c-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.print-modal-close:hover { background: var(--c-200); color: var(--c-700); }

.print-modal-body {
  padding: 20px 24px;
  min-height: 160px;
}

/* 확인 단계 - 요약 */
.print-modal-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.print-modal-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  background: var(--c-50);
  border-radius: var(--r-sm);
}

.summary-label {
  font-size: 11px;
  color: var(--c-500);
  font-weight: var(--font-medium);
  flex-shrink: 0;
}

.summary-value {
  font-size: 12px;
  color: var(--c-800);
  font-weight: var(--font-semibold);
  text-align: right;
  word-break: break-all;
}

.summary-value.highlight {
  color: var(--primary);
}

.print-modal-paths {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--c-50);
  border-radius: var(--r-md);
  border: 1px solid var(--c-200);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.path-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.path-label {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: 2px 8px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.path-label.input { background: var(--success-bg); color: #15803d; }
.path-label.output { background: var(--info-bg); color: var(--info-deep); }

.path-value {
  font-size: 11.5px;
  color: var(--c-600);
  font-family: 'Consolas', 'Monaco', monospace;
  word-break: break-all;
  line-height: 1.5;
}

/* 실행 중 - 프로그레스 링 */
.print-modal-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}

.progress-ring-container {
  position: relative;
  width: 120px;
  height: 120px;
}

.progress-ring {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: var(--c-200);
  stroke-width: 8;
}

.progress-ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  transition: stroke-dashoffset 0.5s ease;
}

.progress-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
}

.progress-message {
  font-size: var(--text-md);
  color: var(--c-500);
  text-align: center;
  min-height: 20px;
}

/* 결과 */
.print-modal-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}

.result-icon { animation: resultPop 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.result-icon.success svg { color: #22c55e; }
.result-icon.error svg { color: var(--error); }

@keyframes resultPop {
  from { opacity: 0; transform: scale(0.5); }
  50% { transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}

.result-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--c-800);
}

.result-message {
  font-size: var(--text-base);
  color: var(--c-500);
  text-align: center;
  line-height: 1.6;
}

.result-error {
  font-size: var(--text-base);
  color: var(--error-deep);
  text-align: center;
  line-height: 1.6;
  background: var(--error-bg);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  width: 100%;
  word-break: keep-all;
}

.result-folder-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--success-bg);
  border: 1px solid var(--success-bg);
  border-radius: var(--r-sm);
  color: #15803d;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.15s;
}
.result-folder-btn:hover { background: var(--success-bg); border-color: var(--success); }

/* Footer */
.print-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--c-100);
}

.modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.modal-btn.secondary {
  background: var(--c-100);
  color: var(--c-500);
}
.modal-btn.secondary:hover { background: var(--c-200); }

.modal-btn.primary {
  background: var(--primary);
  color: var(--app-surface);
}
.modal-btn.primary:hover { background: var(--primary-deep); }

.modal-running-hint {
  font-size: var(--text-base);
  color: var(--c-400);
  text-align: center;
  width: 100%;
}

/* ── 발주서 출력 확인 — 좌우 레이아웃 ── */
.print-confirm-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-height: 200px;
}
@media (max-width: 560px) {
  .print-confirm-layout { grid-template-columns: 1fr; }
}
.print-confirm-left,
.print-confirm-right {
  display: flex; flex-direction: column; gap: 8px;
}
.print-confirm-right {
  border-left: 1px solid var(--c-150);
  padding-left: 16px;
}
.print-confirm-section-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--c-400); margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.print-file-count {
  background: var(--primary); color: #fff;
  padding: 1px 7px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
}
.print-file-empty {
  font-size: 12px; color: var(--c-400);
  padding: 20px 0; text-align: center;
}
.print-file-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 220px; overflow-y: auto;
}
.print-file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  background: var(--c-50); border: 1px solid var(--c-150);
}
.print-file-item.prev {
  background: rgba(99,102,241,.05);
  border-color: rgba(99,102,241,.2);
}
.print-file-icon {
  flex-shrink: 0; color: var(--c-400);
}
.print-file-item.prev .print-file-icon { color: var(--primary); }
.print-file-info { flex: 1; min-width: 0; }
.print-file-name {
  font-size: 12px; font-weight: 600; color: var(--c-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.print-file-date {
  font-size: 10px; color: var(--c-400); margin-top: 1px;
}
.print-file-kind-badge {
  flex-shrink: 0; padding: 2px 7px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
  background: var(--c-100); color: var(--c-500);
}
.print-file-item.prev .print-file-kind-badge {
  background: rgba(99,102,241,.12); color: var(--primary);
}
/* 다크모드 */
[data-theme="dark"] .print-confirm-right { border-color: var(--c-700); }
[data-theme="dark"] .print-file-item { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .print-file-item.prev { background: rgba(99,102,241,.1); }
[data-theme="dark"] .print-file-name { color: var(--c-200); }
[data-theme="dark"] .print-file-kind-badge { background: var(--c-700); color: var(--c-400); }

/* ─── 다오네스트 발주 이력 (누적 확인 모달) ─── */
.pm-po-history {
  margin-top: 12px;
  border-top: 1px solid var(--c-200);
  padding-top: 10px;
}
.pm-po-history-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 7px;
}
.pm-po-history-loading {
  font-size: 12px;
  color: var(--c-400);
  padding: 4px 0;
}
.pm-po-history-empty {
  font-size: 12px;
  color: var(--c-400);
  padding: 4px 0;
  font-style: italic;
}
.pm-po-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-po-history-item label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid var(--c-200);
  background: var(--c-50);
  font-size: 12px;
  transition: background 0.15s;
}
.pm-po-history-item label:hover { background: var(--c-100); }
.pm-po-history-item.excluded label {
  opacity: 0.55;
  background: var(--c-100);
}
.pm-po-history-date { font-weight: 600; color: var(--c-700); }
.pm-po-history-count { color: var(--c-500); margin-left: auto; }
.pm-po-history-badge {
  font-size: 10px;
  background: var(--c-400);
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
}
.pm-po-history-hint {
  font-size: 11px;
  color: var(--c-400);
  margin: 6px 0 0;
  line-height: 1.4;
}
[data-theme="dark"] .pm-po-history { border-top-color: var(--c-700); }
[data-theme="dark"] .pm-po-history-item label { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .pm-po-history-item label:hover { background: var(--c-750, var(--c-700)); }
[data-theme="dark"] .pm-po-history-item.excluded label { background: var(--c-900); }
[data-theme="dark"] .pm-po-history-date { color: var(--c-300); }

/* ═══════════════════════ Wizard UI ═══════════════════════ */
.wz-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px 40px;
}
.wz-title-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-900);
}
.wz-company-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  background: #eef2ff;
  color: #4f46e5;
  border-radius: 20px;
  margin-left: 4px;
}
.wz-icon-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 6px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--c-400);
  border-radius: 6px;
  transition: all 0.15s;
}
.wz-icon-btn:hover { background: var(--c-100); color: var(--c-700); }
.wz-icon-btn + .wz-icon-btn { margin-left: 0; }
.wz-progress {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-100);
}
.wz-step-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
  cursor: default;
}
.wz-step-item.done { cursor: pointer; }
.wz-step-item:disabled { cursor: default; }
.wz-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--c-200);
  background: white;
  color: var(--c-400);
  transition: all 0.2s;
  flex-shrink: 0;
}
.wz-step-item.active .wz-step-dot { border-color: #6366f1; background: #6366f1; color: white; }
.wz-step-item.done .wz-step-dot { border-color: #6366f1; background: #eef2ff; color: #6366f1; }
.wz-step-lbl { font-size: 12px; font-weight: 500; color: var(--c-400); }
.wz-step-item.active .wz-step-lbl { color: #6366f1; font-weight: 600; }
.wz-step-item.done .wz-step-lbl { color: #6366f1; }
.wz-step-line { flex: 1; height: 2px; background: var(--c-100); margin: 0 6px; transition: background 0.3s; }
.wz-step-line.done { background: #6366f1; opacity: 0.4; }
.wz-alert { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin: 8px 0; }
.wz-alert.error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.wz-alert button { background: none; border: none; cursor: pointer; color: inherit; padding: 0; display: flex; }
.wz-intent-banner { background: #eef2ff; border-bottom: 1px solid #c7d2fe; padding: 10px 20px; font-size: 13px; color: #3730a3; }
.wz-body { padding: 28px 0 8px; }
.wz-step-view { animation: wz-fadein 0.22s ease; }
@keyframes wz-fadein { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.wz-step-heading { margin-bottom: 28px; }
.wz-step-h { font-size: 22px; font-weight: 700; color: var(--c-900); margin-bottom: 6px; }
.wz-step-sh { font-size: 14px; color: var(--c-400); }
.wz-supplier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.wz-supplier-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 36px 20px 28px; border: 2px solid var(--c-100); border-radius: 16px;
  background: white; cursor: pointer; transition: all 0.18s; position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.wz-supplier-card:hover { border-color: #a5b4fc; background: #eef2ff; }
.wz-supplier-card.selected { border-color: #6366f1; background: #eef2ff; }
.wz-sup-icon { color: #a5b4fc; }
.wz-supplier-card.selected .wz-sup-icon { color: #6366f1; }
.wz-sup-name { font-size: 15px; font-weight: 600; color: var(--c-700); text-align: center; line-height: 1.3; }
.wz-sup-check { position: absolute; top: 8px; right: 8px; color: #6366f1; }
.wz-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; color: var(--c-400); text-align: center; }
.wz-fields { display: flex; flex-direction: column; gap: 0; }
.wz-processed { margin-top: 16px; border: 1px solid var(--c-100); border-radius: 10px; overflow: hidden; }
.wz-processed-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--c-600); background: #f8fafc; user-select: none; }
.wz-processed-count { margin-left: auto; font-size: 11px; color: var(--c-400); }
.wz-processed-list { max-height: 200px; overflow-y: auto; padding: 8px; }
.wz-processed-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.wz-processed-item.checked { background: #eef2ff; }
.wz-processed-name { font-weight: 500; color: var(--c-700); }
.wz-processed-date { font-size: 11px; color: var(--c-400); }
.wz-review { border: 1px solid var(--c-100); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.wz-review-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f8fafc; gap: 12px; }
.wz-review-row:last-child { border-bottom: none; }
.wz-review-label { font-size: 12px; color: var(--c-400); min-width: 80px; flex-shrink: 0; }
.wz-review-value { font-size: 13px; font-weight: 600; color: var(--c-700); flex: 1; word-break: break-all; }
.wz-path-preview { padding: 14px 16px; background: rgba(99,102,241,0.04); border: 1px solid rgba(99,102,241,0.12); border-radius: 10px; font-size: 12px; }
.wz-path-preview-title { font-weight: 600; color: #4f46e5; margin-bottom: 8px; font-size: 13px; }
.wz-path-row { display: flex; gap: 8px; margin-bottom: 4px; line-height: 1.7; align-items: flex-start; }
.wz-path-label { color: var(--c-400); min-width: 36px; flex-shrink: 0; }
.wz-path-val { font-family: monospace; font-size: 11px; color: var(--c-600); word-break: break-all; }
.wz-result-idle { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 0; color: var(--c-400); font-size: 14px; }
.wz-result-status { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 20px; border: 1px solid var(--c-100); border-radius: 14px; text-align: center; margin-bottom: 16px; transition: all 0.2s; }
.wz-result-status.done { border-color: #bbf7d0; background: #f0fdf4; }
.wz-result-status.done svg { color: #22c55e; }
.wz-result-status.running { border-color: #c7d2fe; background: #eef2ff; }
.wz-result-status.running svg { color: #6366f1; }
.wz-result-status.failed { border-color: #fecaca; background: #fef2f2; }
.wz-result-status.failed svg { color: #ef4444; }
.wz-result-status.queued svg { color: var(--c-400); }
.wz-result-label { font-size: 18px; font-weight: 700; color: var(--c-900); }
.wz-result-time { font-size: 12px; color: var(--c-400); }
.wz-result-detail-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6366f1; font-weight: 600; background: #eef2ff; padding: 4px 14px; border-radius: 20px; margin-top: 4px; }
.wz-result-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.wz-result-file { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--c-100); border-radius: 10px; background: white; cursor: pointer; transition: all 0.15s; text-align: left; font-size: 13px; color: var(--c-700); font-weight: 500; width: 100%; }
.wz-result-file:hover { border-color: #a5b4fc; background: #eef2ff; }
.wz-result-file > svg:first-child { color: #a5b4fc; flex-shrink: 0; }
.wz-result-file > span { flex: 1; }
.wz-result-file > svg:last-child { color: var(--c-300); flex-shrink: 0; }
.wz-result-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.wz-folder-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--c-200); border-radius: 8px; background: white; cursor: pointer; font-size: 12px; color: var(--c-600); font-weight: 500; transition: all 0.15s; }
.wz-folder-btn:hover { border-color: #a5b4fc; color: #6366f1; background: #eef2ff; }
.wz-job-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wz-mismatch-warn { padding: 10px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: 12px; color: #92400e; margin-bottom: 12px; }
.wz-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; border: none; transition: all 0.15s; }
.wz-btn.secondary { background: var(--c-100); color: var(--c-600); }
.wz-btn.secondary:hover { background: var(--c-200); }
.wz-btn.primary { background: #6366f1; color: white; }
.wz-btn.primary:hover { background: #4f46e5; }
.wz-btn.danger { background: #ef4444; color: white; }
.wz-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wz-nav { border-top: 1px solid var(--c-100); padding: 16px 0 8px; margin-top: 20px; }
.wz-nav-inner { display: flex; align-items: center; gap: 8px; }
.wz-nav-btn { display: flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; border: none; transition: all 0.15s; }
.wz-nav-btn.back, .wz-nav-btn.secondary { background: var(--c-100); color: var(--c-600); }
.wz-nav-btn.back:hover, .wz-nav-btn.secondary:hover { background: var(--c-200); }
.wz-nav-btn.forward, .wz-nav-btn.primary { background: #6366f1; color: white; }
.wz-nav-btn.forward:hover, .wz-nav-btn.primary:hover { background: #4f46e5; }
.wz-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
[data-theme="dark"] .wz-supplier-card { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .wz-supplier-card:hover,
[data-theme="dark"] .wz-supplier-card.selected { background: rgba(99,102,241,0.15); border-color: #818cf8; }
[data-theme="dark"] .wz-review { border-color: var(--c-700); }
[data-theme="dark"] .wz-review-row { border-color: var(--c-700); }
[data-theme="dark"] .wz-processed { border-color: var(--c-700); }
[data-theme="dark"] .wz-processed-header { background: var(--c-800); }
[data-theme="dark"] .wz-result-status { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .wz-result-file { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .wz-step-dot { background: var(--c-800); }
[data-theme="dark"] .wz-nav { border-color: var(--c-700); }
[data-theme="dark"] .wz-progress { border-color: var(--c-700); }


/* ============================================================================
   CONTROL PANEL (po-*) — 발주서 출력 실용 디자인
   ============================================================================ */

/* Root */
.po-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background: #f8fafc;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Top bar */
.po-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.po-topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.po-topbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.po-topbar-icon { color: #6366f1; flex-shrink: 0; }
.po-topbar-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.po-topbar-sep { color: #cbd5e1; font-size: 16px; }
.po-topbar-company { font-size: 13px; color: #64748b; font-weight: 500; }

/* Status pill */
.po-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}
.po-status-pill.running { background: #eef2ff; color: #6366f1; }
.po-status-pill.done    { background: #f0fdf4; color: #16a34a; }
.po-status-pill.failed,
.po-status-pill.cancelled { background: #fef2f2; color: #dc2626; }
.po-status-pill.queued  { background: #f8fafc; color: #64748b; }

/* Intent pill */
.po-intent-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #4f46e5;
  margin-right: 4px;
}
.po-intent-pill button {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: #818cf8;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
}
.po-intent-pill button:hover { color: #4f46e5; }

/* Topbar icon buttons */
.po-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  transition: background 0.15s, color 0.15s;
}
.po-topbar-btn:hover   { background: #f1f5f9; color: #0f172a; }
.po-topbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Error bar */
.po-error-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  font-size: 13px;
  color: #dc2626;
  flex-shrink: 0;
}
.po-error-bar button {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #ef4444;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}

/* Main layout */
.po-main {
  display: flex;
  flex: 1;
}

/* Settings panel (left) */
.po-settings {
  flex: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Section */
.po-section { display: flex; flex-direction: column; gap: 10px; }
.po-section-field { gap: 8px; }
.po-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.po-section-count {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.po-link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #6366f1;
  text-transform: none;
  letter-spacing: 0;
}
.po-link-btn:hover { color: #4f46e5; text-decoration: underline; }

/* Empty hint */
.po-empty-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  color: #94a3b8;
}

/* Supplier tabs */
.po-supplier-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.po-supplier-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  transition: all 0.15s;
  white-space: nowrap;
}
.po-supplier-tab:hover { border-color: #a5b4fc; color: #6366f1; background: #f5f3ff; }
.po-supplier-tab.active { border-color: #6366f1; background: #eef2ff; color: #4f46e5; font-weight: 700; }
.po-sup-check { color: #6366f1; flex-shrink: 0; }

/* Channel wrap */
.po-channel-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
}
.po-channel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}
.po-channel-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.15s;
}
.po-channel-action-btn:hover { border-color: #a5b4fc; color: #6366f1; background: #eef2ff; }
.po-channel-action-btn.all { border-color: #c7d2fe; color: #4f46e5; background: #eef2ff; }
.po-channel-action-btn.all:hover { border-color: #6366f1; background: #e0e7ff; }

/* Chips */
.po-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.po-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  transition: all 0.15s;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.po-chip:hover { border-color: #a5b4fc; color: #6366f1; background: #f5f3ff; box-shadow: 0 2px 6px rgba(99,102,241,0.12); }
.po-chip.on {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.po-chip.on svg { color: #fff; }

/* Dropdown fields — constrain width, fix help button position */
.po-section-field .form-field { width: 100%; }
.po-section-field .input-group { max-width: 320px; }
/* 물음표를 레이블 바로 옆으로 (space-between 재정의) */
.po-section-field .field-label { justify-content: flex-start; }

/* Section description */
.po-section-desc {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
}

/* Selected badge */
.po-selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* Processed files list */
.po-processed-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 260px;
  overflow-y: auto;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px;
  background: #fff;
}
.po-processed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.12s;
}
.po-processed-item:hover { background: #f8fafc; border-color: #e2e8f0; }
.po-processed-item.checked {
  background: #eef2ff;
  border-color: #a5b4fc;
}
.po-processed-name {
  flex: 1;
  font-weight: 600;
  color: #334155;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.po-processed-item.checked .po-processed-name { color: #4338ca; }
.po-processed-date { font-size: 11px; color: #94a3b8; flex-shrink: 0; background: #f1f5f9; padding: 2px 7px; border-radius: 4px; }

/* Sidebar */
.po-sidebar {
  width: 272px;
  flex-shrink: 0;
  border-left: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
}

/* Path card */
.po-path-card {
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.po-path-row { display: flex; align-items: center; gap: 10px; }
.po-path-lbl {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  min-width: 28px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.po-path-val {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  font-family: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.po-path-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  color: #64748b;
  border-radius: 7px;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.po-path-btn:hover { color: #6366f1; background: #eef2ff; border-color: #a5b4fc; }

/* Print button */
.po-print-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 0;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
.po-print-btn:hover   { background: #4f46e5; box-shadow: 0 6px 20px rgba(99,102,241,0.4); }
.po-print-btn:active  { transform: translateY(1px); box-shadow: 0 2px 8px rgba(99,102,241,0.3); }
.po-print-btn:disabled { background: #c7d2fe; box-shadow: none; cursor: not-allowed; }

/* Cancel button */
.po-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 0;
  background: none;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #ef4444;
  cursor: pointer;
  transition: all 0.15s;
}
.po-cancel-btn:hover { background: #fef2f2; }

/* Job card */
.po-job-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  background: #f8fafc;
  transition: all 0.2s;
}
.po-job-card.done      { border-color: #bbf7d0; background: #f0fdf4; }
.po-job-card.running   { border-color: #c7d2fe; background: #eef2ff; }
.po-job-card.failed,
.po-job-card.cancelled { border-color: #fecaca; background: #fef2f2; }
.po-job-card.queued    { border-color: #e2e8f0; background: #f8fafc; }
.po-job-card-top { display: flex; align-items: center; gap: 10px; }
.po-job-icon { flex-shrink: 0; }
.po-job-card.done      .po-job-icon { color: #16a34a; }
.po-job-card.running   .po-job-icon { color: #6366f1; }
.po-job-card.failed    .po-job-icon,
.po-job-card.cancelled .po-job-icon { color: #dc2626; }
.po-job-card.queued    .po-job-icon { color: #94a3b8; }
.po-job-info  { flex: 1; min-width: 0; }
.po-job-label { font-size: 14px; font-weight: 700; color: #0f172a; }
.po-job-time  { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.po-job-arrow { color: #94a3b8; flex-shrink: 0; }

/* Result files */
.po-result-files { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.po-result-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  text-align: left;
  width: 100%;
  transition: all 0.15s;
}
.po-result-file:hover { border-color: #a5b4fc; background: #eef2ff; color: #4f46e5; }
.po-result-file > svg:first-child { color: #a5b4fc; flex-shrink: 0; }
.po-result-file > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-result-file > svg:last-child { color: #cbd5e1; flex-shrink: 0; }

/* Idle hint */
.po-idle-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 0;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
}
.po-idle-hint svg { color: #e2e8f0; }

/* Retry button */
.po-retry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 0;
  background: none;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.po-retry-btn:hover    { border-color: #a5b4fc; color: #6366f1; background: #eef2ff; }
.po-retry-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Warn / error boxes */
.po-warn-box {
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 12px;
  color: #92400e;
}
.po-err-box {
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 12px;
  color: #dc2626;
  white-space: pre-wrap;
}

/* ── Dark mode ── */
[data-theme="dark"] .po-page     { background: var(--c-950, #0a0f1e); }
[data-theme="dark"] .po-topbar   { background: var(--c-900, #111827); border-color: var(--c-800, #1e293b); }
[data-theme="dark"] .po-topbar-title   { color: var(--c-50, #f8fafc); }
[data-theme="dark"] .po-topbar-company { color: var(--c-400); }
[data-theme="dark"] .po-topbar-btn     { color: var(--c-400); }
[data-theme="dark"] .po-topbar-btn:hover { background: var(--c-800); color: var(--c-100); }
[data-theme="dark"] .po-section-label  { color: var(--c-500); }
[data-theme="dark"] .po-empty-hint     { background: var(--c-800); border-color: var(--c-700); color: var(--c-500); }
[data-theme="dark"] .po-supplier-tab   { background: var(--c-800); border-color: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .po-supplier-tab:hover  { border-color: #818cf8; color: #818cf8; background: rgba(99,102,241,0.1); }
[data-theme="dark"] .po-supplier-tab.active { background: rgba(99,102,241,0.15); border-color: #818cf8; color: #a5b4fc; }
[data-theme="dark"] .po-channel-wrap { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .po-channel-actions { border-color: var(--c-700); }
[data-theme="dark"] .po-channel-action-btn { background: var(--c-900); border-color: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .po-channel-action-btn:hover { border-color: #818cf8; color: #818cf8; background: rgba(99,102,241,0.1); }
[data-theme="dark"] .po-channel-action-btn.all { background: rgba(99,102,241,0.15); border-color: #818cf8; color: #a5b4fc; }
[data-theme="dark"] .po-chip      { background: var(--c-800); border-color: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .po-chip:hover { border-color: #818cf8; color: #818cf8; background: rgba(99,102,241,0.1); }
[data-theme="dark"] .po-chip.on   { background: #6366f1; border-color: #6366f1; color: #fff; }
[data-theme="dark"] .po-sidebar   { background: var(--c-900); border-color: var(--c-800); }
[data-theme="dark"] .po-path-card { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .po-path-val  { color: var(--c-300); }
[data-theme="dark"] .po-job-card  { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .po-job-card.done    { background: rgba(22,163,74,0.1);   border-color: rgba(34,197,94,0.3); }
[data-theme="dark"] .po-job-card.running { background: rgba(99,102,241,0.1);  border-color: rgba(99,102,241,0.3); }
[data-theme="dark"] .po-job-card.failed,
[data-theme="dark"] .po-job-card.cancelled { background: rgba(220,38,38,0.1); border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] .po-job-label { color: var(--c-100); }
[data-theme="dark"] .po-result-file { background: var(--c-800); border-color: var(--c-700); color: var(--c-200); }
[data-theme="dark"] .po-result-file:hover { background: rgba(99,102,241,0.15); border-color: #818cf8; color: #a5b4fc; }
[data-theme="dark"] .po-processed-list   { border-color: var(--c-700); }
[data-theme="dark"] .po-processed-item:hover { background: var(--c-800); }
[data-theme="dark"] .po-processed-item.checked { background: rgba(99,102,241,0.1); }
[data-theme="dark"] .po-processed-name  { color: var(--c-200); }
/* ══════════════════════════════════════════════════════════
   가격 관리 페이지 — prices.css
   .pr-*   Page shell & tabs
   .ct-*   CatalogTab (상품 단가 + 수수료)
   .ap-*   ActualPricesSection (판매가 관리)
   ══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   PAGE SHELL
──────────────────────────────────────────────────────── */

.pr-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--app-bg);
  overflow: hidden;
}

/* ── 상단 헤더 바 ── */
.pr-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--c-150);
  flex-shrink: 0;
  gap: 16px;
}

.pr-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr-page-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft);
  border-radius: var(--r-sm);
  color: var(--primary);
  flex-shrink: 0;
}

.pr-page-title {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--c-900);
  letter-spacing: -0.02em;
}

.pr-company-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--r-lg);
  background: var(--c-100);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--c-500);
}

.pr-topbar-right {
  font-size: var(--text-xs);
  color: var(--c-400);
}

/* ── 탭 네비게이션 ── */
.pr-tabnav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 20px;
  height: 44px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--c-150);
  flex-shrink: 0;
}

.pr-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--c-500);
  transition: color var(--fast), background var(--fast);
  white-space: nowrap;
}
.pr-tab:hover { color: var(--c-800); background: var(--c-50); }
.pr-tab.on {
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: var(--font-bold);
}

.pr-tab-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--r-lg);
  background: var(--c-100);
  font-size: 10px; font-weight: var(--font-bold);
  color: var(--c-500);
  line-height: 1;
}
.pr-tab.on .pr-tab-badge {
  background: var(--primary-a20, #ddd6fe);
  color: var(--primary);
}

/* ── 콘텐츠 영역 ── */
.pr-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 28px;
}


/* ────────────────────────────────────────────────────────
   공통 버튼  .pr-btn
   앱 디자인 토큰 기반: --r-sm, --font-bold, --text-base
──────────────────────────────────────────────────────── */

.pr-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 12px; height: 30px;
  border: 1.5px solid var(--c-200); border-radius: var(--r-sm);
  background: var(--app-surface); color: var(--c-600);
  font-size: var(--text-sm); font-weight: var(--font-bold);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast);
  line-height: 1;
}
.pr-btn:hover:not(:disabled) {
  background: var(--c-50);
  border-color: var(--c-300);
  color: var(--c-900);
}
.pr-btn:active:not(:disabled) { background: var(--c-100); }
.pr-btn:disabled { opacity: .38; cursor: not-allowed; }

.pr-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.pr-btn.primary:hover:not(:disabled) {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  box-shadow: var(--sh-glow);
}
.pr-btn.primary:disabled { background: var(--c-300); border-color: var(--c-300); }

.pr-btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.pr-btn.success:hover:not(:disabled) { background: var(--success-deep); border-color: var(--success-deep); }

.pr-btn.danger { background: var(--app-surface); border-color: var(--error-bg, #fecaca); color: var(--error); }
.pr-btn.danger:hover:not(:disabled) { background: #fef2f2; border-color: #fca5a5; }

/* 크기 변형 */
.pr-btn.sm  { height: 26px; padding: 0 9px; font-size: var(--text-xs); gap: 4px; }
.pr-btn.xs  { height: 22px; padding: 0 7px; font-size: var(--text-xs); gap: 3px; border-radius: var(--r-xs); }
.pr-btn.icon { width: 30px; height: 30px; padding: 0; justify-content: center; }
.pr-btn.icon.sm { width: 26px; height: 26px; }
.pr-btn.icon.xs { width: 22px; height: 22px; }

/* 저장 대기 펄스 */
.pr-btn.pulse {
  animation: pr-save-pulse 1.8s var(--ease) infinite;
}
@keyframes pr-save-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(109,92,255,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(109,92,255,0); }
}


/* ────────────────────────────────────────────────────────
   CATALOG TAB  (.ct-*)
──────────────────────────────────────────────────────── */

.ct-wrap {
  display: flex; flex-direction: column;
  height: 100%; overflow-y: auto; overflow-x: hidden;
  padding-bottom: 8px;
}

/* ── 미등록 배너 ── */
.ct-unreg-banner {
  margin: 16px 20px 0;
  border-radius: var(--r-md);
  border: 1.5px solid #fbbf24;
  background: #fffbeb;
  overflow: hidden;
  box-shadow: var(--sh-subtle);
  flex-shrink: 0;
}
.ct-unreg-head {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 14px; gap: 10px;
  cursor: pointer; user-select: none;
}
.ct-unreg-head-left {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-sm); font-weight: var(--font-bold); color: #92400e;
}
.ct-unreg-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-lg); background: #f59e0b; color: #fff;
  font-size: 10px; font-weight: var(--font-bold);
}
.ct-unreg-hint { font-size: var(--text-xs); color: #a16207; }
.ct-unreg-chevron { color: #a16207; transition: transform var(--normal); }
.ct-unreg-chevron.open { transform: rotate(180deg); }

.ct-unreg-list {
  padding: 4px 14px 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ct-unreg-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 6px 5px 10px;
  border-radius: var(--r-sm); background: var(--app-surface);
  border: 1px solid #fde68a; font-size: var(--text-sm); color: #78350f;
}
.ct-unreg-chip-name {
  font-weight: var(--font-semibold);
  max-width: 160px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ct-unreg-chip-meta { font-size: var(--text-xs); color: #a16207; }

/* ── 섹션 카드 ── */
.ct-section {
  margin: 12px 20px 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-150);
  background: var(--app-surface);
  overflow: hidden;
  box-shadow: var(--sh-subtle);
  flex-shrink: 0;
}

.ct-section-head {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--c-100);
  gap: 12px;
}
.ct-section-title {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800);
}
.ct-section-badge {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--c-400); background: var(--c-100);
  padding: 1px 7px; border-radius: var(--r-lg);
}
.ct-section-actions {
  display: flex; align-items: center; gap: 7px;
}

/* ── 검색 ── */
.ct-search-wrap { position: relative; display: flex; align-items: center; }
.ct-search-icon { position: absolute; left: 8px; color: var(--c-400); pointer-events: none; }
.ct-search {
  padding: 5px 8px 5px 26px; width: 180px;
  border: 1.5px solid var(--c-200); border-radius: var(--r-sm);
  font-size: var(--text-sm); background: var(--app-bg); color: var(--c-800);
  outline: none; transition: border-color var(--fast), width var(--normal), box-shadow var(--fast);
  font-family: var(--font-sans);
}
.ct-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(109,92,255,.15));
  width: 220px;
}

/* ── 테이블 ── */
.ct-table-wrap { overflow-x: auto; }
.ct-table { width: 100%; border-collapse: collapse; }

.ct-table th {
  padding: 9px 12px; text-align: left;
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--table-header-color, var(--text-muted));
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--table-header-bg, var(--c-50));
  white-space: nowrap; border-bottom: 1px solid var(--c-100);
  user-select: none;
}
.ct-table th.right { text-align: right; }
.ct-table th:first-child { padding-left: 16px; }

.ct-table td {
  padding: 3px 4px; vertical-align: middle;
  border-bottom: 1px solid var(--table-border, var(--c-100));
  transition: background var(--fast), box-shadow var(--fast);
}
.ct-table tbody tr:last-child td { border-bottom: none; }
.ct-table tbody tr:hover td { background: var(--table-row-hover, rgba(109,92,255,.06)); }
.ct-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
/* 읽기 전용 셀 */
.ct-cell {
  padding: 13px 12px; cursor: pointer;
  font-size: var(--text-base); color: var(--c-900);
}
.ct-table td:first-child.ct-cell { padding-left: 16px; }
.ct-cell.name { font-weight: var(--font-medium); }
.ct-cell.code { font-size: var(--text-sm); color: var(--c-500); font-family: var(--font-num); }
.ct-cell.price { text-align: right; font-weight: var(--font-semibold); color: var(--c-700); font-family: var(--font-num); }
.ct-cell.price.empty { color: var(--c-300); font-weight: var(--font-normal); font-family: var(--font-sans); }
.ct-cell.supplier { font-size: var(--text-sm); color: var(--c-600); text-align: center; }
.ct-cell.option { text-align: center !important; }
.ct-cell.shipping { text-align: center; }
.ct-table th.center { text-align: center; }

/* 미입력 배지 */
.ct-empty-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: var(--r-lg);
  background: var(--c-100); color: var(--c-400);
  font-size: 11px; font-weight: var(--font-medium);
  font-family: var(--font-sans);
}

.ct-row-acts {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 2px;
  opacity: 0; transition: opacity var(--fast);
}
.ct-table tbody tr:hover .ct-row-acts { opacity: 1; }
.ct-edit-btn { color: var(--c-400) !important; }
.ct-edit-btn:hover { color: var(--primary) !important; background: var(--primary-soft) !important; }

/* ── 등록 상품 카드 그리드 ── */
.ct-card-grid { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }

.ct-card {
  border: 1px solid var(--c-150); border-radius: 10px;
  background: var(--card-bg); overflow: hidden;
  transition: box-shadow .15s;
}
.ct-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.ct-card.open { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.ct-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; cursor: pointer; gap: 12px;
  user-select: none;
}
.ct-card-head:hover { background: var(--c-50); }
.ct-card.open .ct-card-head { background: var(--primary-soft); }

.ct-card-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-card-chevron { color: var(--c-400); flex-shrink: 0; transition: transform .2s; }
.ct-card-chevron.open { transform: rotate(180deg); }
.ct-card-info { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ct-card-code { font-size: 14px; font-weight: var(--font-semibold); color: var(--c-900); white-space: nowrap; }
.ct-card-name { font-size: 12px; color: var(--c-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }

.ct-card-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ct-card-warn { font-size: 11px; font-weight: var(--font-semibold); color: #e67e22; background: #fef3e2; border-radius: 4px; padding: 2px 6px; }
.ct-card-opt-badge { font-size: 11px; color: var(--c-400); background: var(--c-100); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }

.ct-card-body { border-top: 1px solid var(--c-100); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

.ct-card-plats { display: flex; flex-direction: column; gap: 4px; }
.ct-card-plat-row { display: flex; align-items: baseline; gap: 6px; }

.ct-card-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.ct-card-table th {
  padding: 6px 8px; font-size: 11px; font-weight: var(--font-semibold);
  color: var(--c-400); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--c-100); text-align: center;
}
.ct-card-table td { padding: 7px 8px; border-bottom: 1px solid var(--c-75, var(--c-100)); color: var(--c-700); text-align: center; vertical-align: middle; }
.ct-card-table tbody tr:last-child td { border-bottom: none; }
.ct-card-table tbody tr:hover td { background: var(--c-50); }
.ct-opt-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--r-lg);
  background: var(--primary-soft); color: var(--primary);
  font-size: 12px; font-weight: var(--font-medium);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ct-card-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 16px; color: var(--c-400); font-size: 13px;
}

/* ── 거래처 자동완성 콤보박스 ── */
.ct-combo-wrap { position: relative; }
.ct-combo-input { width: 100%; }
.ct-combo-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--app-surface); border: 1px solid var(--c-150);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.1);
  z-index: 100; max-height: 200px; overflow-y: auto;
  list-style: none; margin: 0; padding: 4px 0;
}
.ct-combo-dropdown li { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.ct-combo-dropdown li:hover { background: var(--c-50); }

/* ── 편집 모달 ── */
.ct-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 900; display: flex; align-items: center; justify-content: center;
}
.ct-modal {
  background: var(--app-surface); border-radius: 14px;
  width: 460px; max-width: 96vw; padding: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  max-height: 90vh; display: flex; flex-direction: column;
}
.ct-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px 0;
}
.ct-modal-title { font-size: 15px; font-weight: var(--font-semibold); }
.ct-modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; }
.ct-modal-field { display: flex; flex-direction: column; gap: 5px; }
.ct-modal-label { font-size: 12px; color: var(--c-500); font-weight: var(--font-medium); }
.ct-modal-input {
  padding: 9px 12px; border: 1px solid var(--c-150); border-radius: 8px;
  font-size: 13px; background: var(--app-surface); color: var(--c-900);
  font-family: var(--font-sans); outline: none; box-sizing: border-box;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.ct-modal-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(109,92,255,.15));
}
.ct-modal-input[type="number"]::-webkit-inner-spin-button,
.ct-modal-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ct-modal-input[type="number"] { -moz-appearance: textfield; }
/* 배송비 구간 */
.ct-modal-tier-header {
  display: flex; gap: 8px; font-size: 11px; color: var(--c-400);
  font-weight: var(--font-semibold); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0 0 2px 0;
}
.ct-modal-tiers { display: flex; flex-direction: column; gap: 6px; }
.ct-modal-tier-row { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ct-modal-tier-prefix { color: var(--c-400); font-size: 13px; width: 8px; flex-shrink: 0; }
.ct-modal-tier-qty {
  width: 60px; padding: 7px 8px; border: 1px solid var(--c-150);
  border-radius: 8px; text-align: right; font-family: var(--font-num);
  font-size: 13px; background: var(--app-surface); outline: none;
  transition: border-color var(--fast);
}
.ct-modal-tier-qty:focus { outline: none; border-color: var(--primary); }
.ct-modal-tier-qty[type="number"]::-webkit-inner-spin-button,
.ct-modal-tier-qty[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ct-modal-tier-qty[type="number"] { -moz-appearance: textfield; }
.ct-modal-tier-unit { font-size: 12px; color: var(--c-500); white-space: nowrap; }
.ct-modal-tier-else {
  width: 74px; font-size: 12px; color: var(--c-500);
  font-style: italic; text-align: center;
}
.ct-modal-tier-fee {
  width: 90px; padding: 7px 10px; border: 1px solid var(--c-150);
  border-radius: 8px; text-align: right; font-family: var(--font-num);
  font-size: 13px; background: var(--app-surface); outline: none;
  transition: border-color var(--fast);
}
.ct-modal-tier-fee:focus { outline: none; border-color: var(--primary); }
.ct-modal-tier-fee[type="number"]::-webkit-inner-spin-button,
.ct-modal-tier-fee[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ct-modal-tier-fee[type="number"] { -moz-appearance: textfield; }
.ct-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0 24px 20px; flex-shrink: 0;
}
.ct-modal-code {
  font-size: 12px; color: var(--c-400); font-family: var(--font-num);
  background: var(--c-100); border-radius: 5px; padding: 2px 7px;
}

/* ── 그룹 모달 (옵션 목록 편집) ── */
.ct-group-modal { width: 780px !important; max-width: 98vw !important; }
.ct-group-modal-body {
  padding: 16px 24px; overflow-y: auto; flex: 1;
}
.ct-group-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-group-table th {
  font-size: 11px; font-weight: var(--font-semibold); color: var(--c-500);
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--c-150);
  white-space: nowrap;
}
.ct-group-table td { padding: 6px 8px; border-bottom: 1px solid var(--c-100); vertical-align: middle; }
.ct-group-table tbody tr:last-child td { border-bottom: none; }
.ct-group-table tbody tr:hover td { background: var(--c-50); }
/* 판매처별 상품명 섹션 */
.ct-gm-names {
  margin: 12px 24px 0; padding: 10px 14px;
  background: var(--c-50); border-radius: 8px;
  border: 1px solid var(--c-150);
  display: flex; flex-direction: column; gap: 6px;
}
.ct-gm-names-title {
  font-size: 11px; font-weight: var(--font-semibold); color: var(--c-400);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;
}
.ct-gm-name-row { display: flex; align-items: baseline; gap: 8px; }
.ct-gm-name-plat {
  font-size: 11px; font-weight: var(--font-semibold); color: var(--primary);
  background: var(--primary-soft); border-radius: 4px; padding: 2px 7px;
  white-space: nowrap; flex-shrink: 0;
}
.ct-gm-name-text { font-size: 13px; color: var(--c-700); }
/* 일괄변경 패널 */
.ct-bulk-panel { width: 400px !important; }
.ct-bulk-body { padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; }
.ct-bulk-section { display: flex; flex-direction: column; gap: 8px; }
.ct-bulk-section-title { font-size: 12px; font-weight: var(--font-semibold); color: var(--c-600); }
.ct-bulk-opt-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--c-150); border-radius: 8px; overflow: hidden; }
.ct-bulk-opt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--c-700);
  border-bottom: 1px solid var(--c-100);
}
.ct-bulk-opt-row:last-child { border-bottom: none; }
.ct-bulk-opt-row:hover { background: var(--c-50); }
.ct-bulk-opt-row.checked { background: var(--primary-soft); color: var(--primary); }
.ct-bulk-opt-all { font-weight: var(--font-semibold); background: var(--c-50); border-bottom: 1px solid var(--c-150) !important; }
.ct-bulk-fields { display: flex; flex-direction: column; gap: 10px; }
.ct-bulk-field { display: flex; flex-direction: column; gap: 4px; }
/* 2단계: 선택된 옵션 편집 */
.ct-bulk-edit-list { display: flex; flex-direction: column; gap: 12px; }
.ct-bulk-edit-item {
  border: 1px solid var(--c-150); border-radius: 8px; overflow: hidden;
}
.ct-bulk-edit-opt {
  padding: 8px 14px; background: var(--primary-soft);
  font-size: 13px; font-weight: var(--font-semibold); color: var(--primary);
  border-bottom: 1px solid var(--c-150);
}
.ct-bulk-edit-fields { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ct-gm-opt { color: var(--c-700); font-weight: var(--font-medium); min-width: 80px; }
.ct-gm-cell { display: flex; align-items: center; gap: 4px; }
.ct-gm-input {
  padding: 6px 8px; border: 1px solid var(--c-150); border-radius: 7px;
  font-size: 13px; background: var(--app-surface); color: var(--c-800);
  width: 100%; min-width: 0;
}
.ct-gm-input:focus { outline: none; border-color: var(--primary); }
.ct-gm-input.right { text-align: right; font-family: var(--font-num); }
.ct-gm-input[type="number"]::-webkit-inner-spin-button,
.ct-gm-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ct-gm-input[type="number"] { -moz-appearance: textfield; }
.ct-gm-unit { font-size: 12px; color: var(--c-400); white-space: nowrap; flex-shrink: 0; }
.ct-gm-row-sel td { background: var(--primary-soft) !important; }

/* ── 그룹 모달 일괄변경 팝업 ── */
.ct-bulk-popup-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.ct-bulk-popup {
  background: var(--card-bg); border: 1px solid var(--c-200);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.22);
  min-width: 280px; max-width: 360px; width: 320px;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.ct-bulk-popup-title { font-size: 14px; font-weight: var(--font-semibold); color: var(--c-800); }
.ct-bulk-popup-body { display: flex; align-items: center; gap: 8px; }
.ct-bulk-popup-footer { display: flex; justify-content: flex-end; gap: 8px; }
.ct-gm-bulk-drop { position: relative; }
.ct-gm-drop-menu {
  position: absolute; bottom: calc(100% + 4px); left: 0;
  background: var(--card-bg); border: 1px solid var(--c-150);
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
  min-width: 140px; list-style: none; padding: 4px 0; margin: 0; z-index: 100;
}
.ct-gm-drop-menu li {
  padding: 7px 14px; font-size: 13px; color: var(--c-700);
  cursor: pointer; transition: background .1s;
}
.ct-gm-drop-menu li:hover { background: var(--c-50); }
.ct-gm-drop-menu li.active { color: var(--primary); font-weight: var(--font-semibold); }

/* ── 배송비 구간 박스 (ct-tier-*) ── */
.ct-tier-box {
  border: 1px solid var(--c-150); border-radius: 10px;
  background: var(--app-bg); overflow: hidden;
}
.ct-tier-empty {
  padding: 16px 14px; font-size: 12px; color: var(--c-400);
  text-align: center; line-height: 1.6;
}
.ct-tier-grid-head {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; background: var(--c-50);
  border-bottom: 1px solid var(--c-150);
  font-size: 11px; font-weight: var(--font-semibold);
  color: var(--c-400); text-transform: uppercase; letter-spacing: 0.04em;
}
.ct-tier-grid-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-100);
}
.ct-tier-grid-row .ct-tier-condition { flex: 1; min-width: 0; }
.ct-tier-grid-row .ct-tier-fee-cell { flex-shrink: 0; }
.ct-tier-grid-row > .pr-btn { flex-shrink: 0; margin-left: 2px; }
.ct-tier-grid-row:last-of-type { border-bottom: none; }
.ct-tier-condition {
  display: flex; align-items: center; gap: 5px;
}
.ct-tier-qty-input {
  width: 52px; padding: 5px 7px; border: 1px solid var(--c-200);
  border-radius: 6px; text-align: right; font-family: var(--font-num);
  font-size: 13px; background: var(--app-surface); outline: none;
  transition: border-color var(--fast);
}
.ct-tier-qty-input:focus { outline: none; border-color: var(--primary); }
.ct-tier-qty-input[type="number"]::-webkit-inner-spin-button,
.ct-tier-qty-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ct-tier-qty-input[type="number"] { -moz-appearance: textfield; }
.ct-tier-cond-label { font-size: 12px; color: var(--c-500); white-space: nowrap; }
.ct-tier-range-hint {
  font-size: 11px; color: var(--c-400); white-space: nowrap;
  font-family: var(--font-num);
}
.ct-tier-range-from {
  font-size: 12px; color: var(--c-600); white-space: nowrap;
  font-weight: 500;
}
.ct-tier-range-sep {
  font-size: 12px; color: var(--c-400); padding: 0 2px;
}
.ct-tier-single-btn {
  font-size: 11px; padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--c-300); background: var(--c-50);
  color: var(--c-600); cursor: pointer; white-space: nowrap;
  line-height: 1.4;
}
.ct-tier-single-btn:hover { background: var(--c-100); }
.ct-tier-single-btn.active {
  background: var(--primary-50, #eff6ff);
  border-color: var(--primary-300, #93c5fd);
  color: var(--primary-700, #1d4ed8);
}
.ct-tier-etc-label {
  font-size: 13px; color: var(--c-500); font-style: italic;
}
.ct-tier-fee-cell {
  display: flex; align-items: center; gap: 5px;
}
.ct-tier-fee-input {
  width: 80px; padding: 5px 7px; border: 1px solid var(--c-200);
  border-radius: 6px; text-align: right; font-family: var(--font-num);
  font-size: 13px; background: var(--app-surface); outline: none;
  transition: border-color var(--fast);
}
.ct-tier-fee-input:focus { outline: none; border-color: var(--primary); }
.ct-tier-fee-input[type="number"]::-webkit-inner-spin-button,
.ct-tier-fee-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ct-tier-fee-input[type="number"] { -moz-appearance: textfield; }
.ct-tier-preview {
  padding: 7px 12px; font-size: 11px; color: var(--primary);
  font-family: var(--font-num); border-top: 1px dashed var(--c-150);
  background: var(--primary-soft); line-height: 1.5;
  word-break: break-word;
}
.ct-tier-actions {
  display: flex; gap: 8px; padding: 8px 10px;
  border-top: 1px solid var(--c-100);
}
.ct-tier-hint-text {
  padding: 5px 12px 8px; font-size: 11px; color: var(--c-400);
  line-height: 1.6; border-top: 1px solid var(--c-100);
}

/* ── 배송비 셀 버튼 (그룹 모달 테이블) ── */
.ct-shipping-cell-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 4px 6px; cursor: pointer; width: 100%;
  font-size: 12px; color: var(--c-600); font-family: var(--font-num);
  transition: border-color var(--fast), background var(--fast);
}
.ct-shipping-cell-btn:hover { border-color: var(--c-200); background: var(--c-50); }
.ct-shipping-cell-text { flex: 1; text-align: left; }
.ct-shipping-cell-icon { color: var(--c-400); flex-shrink: 0; }

/* ── 배송비 구간 팝업 ── */
.ct-tier-popup-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
}
.ct-tier-popup {
  background: var(--app-surface); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: 480px; max-width: 96vw;
  display: flex; flex-direction: column;
}
.ct-tier-popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--c-100);
}
.ct-tier-popup-body { padding: 12px 0 0; }
.ct-tier-bundle-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--c-100);
}
.ct-tier-bundle-label { font-size: 12px; color: var(--c-500); flex-shrink: 0; }

/* ── 배송비 단순 UI (기본/복수구매) ── */
.ct-shipping-simple {
  border: 1px solid var(--c-150); border-radius: 10px;
  background: var(--app-bg); overflow: hidden;
}
.ct-shipping-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; gap: 12px;
  border-bottom: 1px solid var(--c-100);
}
.ct-shipping-row:last-child { border-bottom: none; }
.ct-shipping-row-label {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.ct-shipping-title { font-size: 13px; color: var(--c-700); font-weight: var(--font-medium); }
.ct-shipping-sub { font-size: 11px; color: var(--c-400); }
.ct-shipping-desc {
  padding: 9px 12px; font-size: 11px; color: var(--c-400);
  line-height: 1.7; border-top: 1px dashed var(--c-150);
  background: var(--c-50);
}

.ct-empty-row td {
  padding: 48px 20px; text-align: center;
  color: var(--text-muted); font-size: var(--text-sm); line-height: 1.8;
}

/* ── 수수료율 ── */
.ct-fee-desc {
  padding: 4px 16px 10px;
  font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6;
}
.ct-fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; padding: 0 16px 12px;
}
.ct-fee-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--c-150); background: var(--c-50); gap: 6px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.ct-fee-item:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(109,92,255,.15));
}
.ct-fee-plat {
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-700);
  white-space: nowrap;
}
.ct-fee-input-wrap {
  display: flex; align-items: center; gap: 2px;
  background: var(--app-surface); border: 1.5px solid var(--c-200);
  border-radius: var(--r-xs); padding: 0 5px 0 6px;
  transition: border-color var(--fast);
}
.ct-fee-input-wrap:focus-within { border-color: var(--primary); }
.ct-fee-input {
  width: 38px; border: none; background: transparent;
  font-size: var(--text-sm); font-weight: var(--font-bold);
  color: var(--c-900); font-family: var(--font-num);
  outline: none; text-align: right; padding: 4px 0;
}
.ct-fee-input[type="number"]::-webkit-inner-spin-button,
.ct-fee-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ct-fee-input[type="number"] { -moz-appearance: textfield; }
.ct-fee-pct { font-size: var(--text-xs); color: var(--c-400); }

.ct-fee-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px 14px;
}

/* ── 데이터 관리 (위험 영역) ── */
.ct-danger-zone {
  margin: 4px 20px 16px;
  border-radius: var(--r-md);
  border: 1px solid #fecaca;
  overflow: hidden;
}
.ct-danger-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; cursor: pointer;
  background: #fff5f5; user-select: none;
}
.ct-danger-title {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-sm); font-weight: var(--font-bold); color: #991b1b;
}
.ct-danger-body {
  padding: 12px 14px; background: var(--app-surface);
  display: flex; flex-direction: column; gap: 8px;
}
.ct-danger-action {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--c-100); background: var(--c-50);
}
.ct-danger-info { flex: 1; }
.ct-danger-label {
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--c-800); margin-bottom: 2px;
}
.ct-danger-desc { font-size: var(--text-xs); color: var(--text-muted); }


/* ────────────────────────────────────────────────────────
   ACTUAL PRICES SECTION  (.ap-*)
──────────────────────────────────────────────────────── */

.ap-wrap {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}

/* ── 툴바 ── */
.ap-toolbar {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 10px 20px;
  background: var(--app-surface); border-bottom: 1px solid var(--c-150);
  flex-shrink: 0; flex-wrap: wrap;
}
.ap-toolbar-left { display: flex; align-items: center; gap: 6px; }
.ap-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* ── 플랫폼 필터 바 ── */
.ap-filter-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 20px;
  background: var(--c-50); border-bottom: 1px solid var(--c-100);
  flex-shrink: 0; flex-wrap: wrap;
}
.ap-filter-label {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--text-muted); letter-spacing: 0.05em;
  text-transform: uppercase; margin-right: 2px; flex-shrink: 0;
}
.ap-filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-lg);
  border: 1.5px solid var(--c-200); background: var(--app-surface);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--c-500); cursor: pointer;
  transition: all var(--fast); white-space: nowrap;
}
.ap-filter-pill:hover { border-color: var(--c-400); color: var(--c-700); }
.ap-filter-cnt { font-size: 10px; opacity: .75; }

/* ── 검색 ── */
.ap-search-wrap { position: relative; display: flex; align-items: center; }
.ap-search-icon { position: absolute; left: 8px; color: var(--c-400); pointer-events: none; }
.ap-search {
  padding: 5px 8px 5px 26px; width: 160px;
  border: 1.5px solid var(--c-200); border-radius: var(--r-sm);
  font-size: var(--text-sm); background: var(--app-bg); color: var(--c-800);
  font-family: var(--font-sans);
  outline: none; transition: border-color var(--fast), width var(--normal), box-shadow var(--fast);
}
.ap-search:focus {
  border-color: var(--primary); background: var(--app-surface);
  box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(109,92,255,.15));
  width: 200px;
}

/* ── 상태 메시지 ── */
.ap-msg {
  padding: 8px 20px; font-size: var(--text-sm);
  background: #f0fdf4; color: #15803d;
  border-bottom: 1px solid #bbf7d0;
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
}
.ap-msg.error { background: #fef2f2; color: var(--error); border-color: #fecaca; }

/* ── 테이블 ── */
.ap-table-wrap { flex: 1; overflow: auto; }
.ap-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

/* sticky 헤더 */
.ap-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--table-header-bg, var(--c-50));
  border-bottom: 1.5px solid var(--c-150);
}

.ap-table th {
  padding: 6px 10px 8px; text-align: left;
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--table-header-color, var(--text-muted));
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; user-select: none;
}
.ap-table th.right { text-align: right; }

/* 가격 컬럼 색상 인디케이터 */
.ap-th-sub {
  display: block; font-size: 9px; font-weight: var(--font-normal);
  color: var(--c-300); margin-top: 2px;
  text-transform: none; letter-spacing: 0;
}
.ap-th-bar {
  display: block; width: 100%; height: 2px;
  border-radius: 1px; margin-top: 4px;
}
.ap-th-bar.gray  { background: var(--c-300); }
.ap-th-bar.amber { background: #f59e0b; }
.ap-th-bar.green { background: var(--success, #10b981); }
.ap-table th.gray  { color: var(--c-500); }
.ap-table th.amber { color: #b45309; }
.ap-table th.green { color: #15803d; }

.ap-table tbody tr { border-bottom: 1px solid var(--table-border, var(--c-100)); transition: background var(--fast); }
.ap-table tbody tr:hover { background: var(--table-row-hover, rgba(109,92,255,.04)); }
.ap-table tbody tr.dirty { background: #fffbeb; }
.ap-table tbody tr.dirty:hover { background: #fef9c3; }
.ap-table tbody tr.isnew { background: #f0fdf4; }
.ap-table tbody tr.isnew:hover { background: #dcfce7; }
.ap-table td { padding: 3px 3px; vertical-align: middle; }

/* 셀 인풋 */
.ap-input {
  width: 100%; padding: 5px 7px;
  border: 1.5px solid transparent; border-radius: var(--r-xs);
  background: transparent; font-size: var(--text-sm); color: var(--c-800);
  font-family: var(--font-sans);
  outline: none; box-sizing: border-box;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
  min-width: 52px;
}
.ap-input:hover { border-color: var(--c-200); background: var(--app-surface); }
.ap-input:focus {
  border-color: var(--primary); background: var(--app-surface);
  box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(109,92,255,.15));
}
.ap-input.bold { font-weight: var(--font-semibold); }
.ap-input.right { text-align: right; font-family: var(--font-num); }
.ap-input.gray  { color: var(--c-500); }
.ap-input.amber { color: #b45309; font-weight: var(--font-semibold); }
.ap-input.green { color: #15803d; font-weight: var(--font-semibold); }
.ap-input[type="number"]::-webkit-inner-spin-button,
.ap-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ap-input[type="number"] { -moz-appearance: textfield; }

/* 플랫폼 셀렉트 */
.ap-select {
  width: 100%; padding: 5px 6px;
  border: 1.5px solid transparent; border-radius: var(--r-xs);
  background: transparent; font-size: var(--text-sm); font-weight: var(--font-bold);
  font-family: var(--font-sans);
  outline: none; cursor: pointer;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
  box-sizing: border-box;
}
.ap-select:hover, .ap-select:focus {
  border-color: var(--c-200); background: var(--app-surface);
}
.ap-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(109,92,255,.15));
}

/* 삭제 버튼 */
.ap-del-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; border-radius: var(--r-xs);
  background: transparent; color: var(--c-300); cursor: pointer; padding: 0;
  transition: background var(--fast), color var(--fast); margin: auto;
}
.ap-del-btn:hover:not(:disabled) { background: #fef2f2; color: var(--error, #ef4444); }
.ap-del-btn:disabled { opacity: .35; cursor: not-allowed; }

/* 빈 상태 */
.ap-empty-cell { padding: 64px 20px; text-align: center; }
.ap-empty-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); border: 1px solid var(--primary-a20, rgba(109,92,255,.18));
  color: var(--primary); margin: 0 auto 12px;
  box-shadow: 0 8px 20px rgba(109,92,255,.12);
}
.ap-empty-title {
  font-size: var(--text-md); font-weight: var(--font-bold);
  color: var(--c-600); margin-bottom: 4px;
}
.ap-empty-hint { font-size: var(--text-sm); color: var(--text-muted); }

/* ── 하단 푸터 ── */
.ap-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 20px;
  background: var(--c-50); border-top: 1px solid var(--c-100);
  flex-shrink: 0; gap: 12px;
}
.ap-footer-left { display: flex; align-items: center; gap: 10px; }
.ap-count {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--c-500);
}
.ap-unsaved {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: #b45309;
}
.ap-unsaved-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b; flex-shrink: 0;
}
.ap-legend {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.ap-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--c-400);
}
.ap-legend-swatch {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}


/* ── 프로모션 배지 ── */
.ap-promo-cell { text-align: center; }
.ap-promo-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 10px;
  font-size: 10px; font-weight: var(--font-semibold);
  cursor: pointer; border: 1px solid transparent;
  transition: all var(--fast); white-space: nowrap;
}
.ap-promo-badge.has-promo {
  background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8;
}
.ap-promo-badge.has-promo:hover {
  background: #dbeafe; border-color: #93c5fd;
}
.ap-promo-badge.no-promo {
  background: transparent; border-color: var(--c-150); color: var(--c-400);
}
.ap-promo-badge.no-promo:hover {
  border-color: var(--c-300); color: var(--c-600);
  background: var(--c-50);
}
[data-theme="dark"] .ap-promo-badge.has-promo {
  background: #1e3a5f; border-color: #2563eb; color: #93c5fd;
}
[data-theme="dark"] .ap-promo-badge.no-promo {
  border-color: var(--c-700); color: var(--c-500);
}

/* ── 프로모션 모달 오버레이 ── */
.ap-promo-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.ap-promo-modal {
  background: var(--app-surface); border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 420px; max-width: 96vw;
  padding: 22px 24px 18px;
  display: flex; flex-direction: column; gap: 16px;
  max-height: 90vh; overflow-y: auto;
}
.ap-promo-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-900);
}
.ap-promo-modal-title-sub {
  font-size: var(--text-sm); color: var(--c-500); font-weight: var(--font-normal); margin-top: 2px;
}
.ap-promo-close {
  background: none; border: none; cursor: pointer;
  color: var(--c-400); padding: 2px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.ap-promo-close:hover { color: var(--c-700); background: var(--c-100); }

.ap-promo-section {
  border: 1px solid var(--c-150); border-radius: var(--r-md); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ap-promo-section-title {
  font-size: 11px; font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-500);
  margin-bottom: 2px;
}
.ap-promo-section.active-section { border-color: #93c5fd; background: #f0f7ff; }
[data-theme="dark"] .ap-promo-section.active-section { border-color: #1d4ed8; background: #1e293b; }

.ap-promo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-promo-label { font-size: var(--text-sm); color: var(--c-600); min-width: 56px; }
.ap-promo-methods { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-promo-method-btn {
  padding: 3px 9px; border-radius: 12px; border: 1px solid var(--c-200);
  background: var(--app-bg); font-size: 11px; cursor: pointer; color: var(--c-600);
  transition: all var(--fast);
}
.ap-promo-method-btn:hover { border-color: var(--c-400); color: var(--c-800); }
.ap-promo-method-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.ap-promo-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-promo-field-wrap { display: flex; flex-direction: column; gap: 3px; }
.ap-promo-field-lbl { font-size: 10px; color: var(--c-400); padding-left: 2px; }
.ap-promo-field {
  width: 80px; padding: 4px 7px;
  border: 1px solid var(--c-200); border-radius: var(--r-sm);
  background: var(--app-bg); color: var(--c-900);
  font-size: var(--text-sm); font-family: var(--font-num);
}
.ap-promo-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(109,92,255,.12); }
.ap-promo-field-unit { font-size: 11px; color: var(--c-400); margin-top: 18px; }
.ap-promo-field[type="number"]::-webkit-inner-spin-button,
.ap-promo-field[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ap-promo-field[type="number"] { -moz-appearance: textfield; }

.ap-promo-disabled { opacity: .4; pointer-events: none; }

.ap-promo-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px;
}
.ap-promo-cancel {
  padding: 6px 14px; border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--app-bg); color: var(--c-700); font-size: var(--text-sm);
  cursor: pointer; transition: all var(--fast);
}
.ap-promo-cancel:hover { background: var(--c-50); border-color: var(--c-300); }
.ap-promo-save {
  padding: 6px 16px; border-radius: var(--r-sm); border: none;
  background: var(--primary); color: #fff; font-size: var(--text-sm);
  font-weight: var(--font-semibold); cursor: pointer; transition: all var(--fast);
}
.ap-promo-save:hover { opacity: .9; }
.ap-promo-save:disabled { opacity: .5; cursor: not-allowed; }

/* ── 프로모션 섹션 카드 (단순화 UI) ── */
.ap-ps-sections { display: flex; flex-direction: column; gap: 8px; }

.ap-ps-card {
  border: 1px solid var(--c-150); border-radius: var(--r-md);
  padding: 11px 14px;
  transition: border-color var(--fast), background var(--fast);
}
.ap-ps-card.active { border-color: var(--primary); background: #f5f8ff; }
[data-theme="dark"] .ap-ps-card.active { background: #1a2540; border-color: #3b82f6; }

.ap-ps-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ap-ps-toggle-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.ap-ps-checkbox {
  width: 15px; height: 15px; accent-color: var(--primary);
  cursor: pointer; flex-shrink: 0;
}
.ap-ps-title {
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-700);
}
.ap-ps-card.active .ap-ps-title { color: var(--primary); }

.ap-ps-method-pills { display: flex; gap: 4px; }
.ap-ps-pill {
  padding: 2px 10px; border-radius: 12px;
  border: 1px solid var(--c-200); background: var(--app-bg);
  font-size: 11px; cursor: pointer; color: var(--c-500);
  transition: all var(--fast);
}
.ap-ps-pill:hover { border-color: var(--c-400); color: var(--c-700); }
.ap-ps-pill.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.ap-ps-body { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.ap-ps-main-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ap-ps-input {
  padding: 4px 8px; border: 1px solid var(--c-200);
  border-radius: var(--r-sm); background: var(--app-surface);
  color: var(--c-800); font-size: var(--text-sm); font-family: var(--font-num);
  text-align: right;
}
.ap-ps-input.sm { width: 60px; }
.ap-ps-input.md { width: 90px; }
.ap-ps-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(109,92,255,.12); }
.ap-ps-input[type="number"]::-webkit-inner-spin-button,
.ap-ps-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ap-ps-input[type="number"] { -moz-appearance: textfield; }
.ap-ps-unit { font-size: 12px; color: var(--c-600); white-space: nowrap; }
.ap-ps-sep { font-size: 12px; color: var(--c-300); }
.ap-ps-hint { font-size: 12px; color: var(--c-400); }

.ap-ps-sub-rows { display: flex; flex-direction: column; gap: 5px; }
.ap-ps-sub-row { display: flex; align-items: center; gap: 6px; }
.ap-ps-sub-label {
  font-size: 11px; color: var(--c-400); min-width: 72px; white-space: nowrap;
}

/* ── 판매가 관리 테이블 (모달 전환 후) ── */
.ap-clickable-row { cursor: pointer; }
.ap-clickable-row:hover td { background: var(--table-row-hover, rgba(109,92,255,.06)); }
.ap-clickable-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.ap-cell { padding: 12px 10px; font-size: var(--text-base); color: var(--c-900); transition: background var(--fast), box-shadow var(--fast); }
.ap-cell.code { font-family: var(--font-num); font-size: var(--text-sm); color: var(--c-500); }
.ap-cell.name { font-weight: var(--font-medium); }
.ap-cell.right { text-align: right; font-family: var(--font-num); }
.ap-cell.gray { color: var(--c-500); }
.ap-cell.amber { color: #d97706; }
.ap-cell.green { color: #16a34a; }
.ap-cell.bold { font-weight: var(--font-semibold); }
.ap-cell.period { font-size: var(--text-sm); color: var(--c-500); }
.ap-plat-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-lg); border: 1px solid;
  font-size: 11px; font-weight: var(--font-semibold); white-space: nowrap;
}
.ap-row-acts {
  display: flex; align-items: center; gap: 2px; padding: 0 6px;
  opacity: 0; transition: opacity var(--fast);
}
.ap-clickable-row:hover .ap-row-acts { opacity: 1; }

/* ── 판매가 편집 모달 ── */
.ap-edit-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 1100; display: flex; align-items: center; justify-content: center;
}
.ap-edit-modal {
  background: var(--app-surface); border-radius: 14px;
  width: 520px; max-width: 96vw;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  max-height: 90vh; display: flex; flex-direction: column;
}
.ap-edit-modal-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px 0;
}
.ap-edit-modal-title { font-size: 15px; font-weight: var(--font-semibold); }
.ap-edit-modal-body { padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; }
.ap-edit-section-label {
  font-size: 11px; font-weight: var(--font-semibold); color: var(--c-400);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding-top: 4px; border-top: 1px solid var(--c-100);
}
.ap-edit-section-label:first-child { border-top: none; padding-top: 0; }
.ap-edit-field { display: flex; flex-direction: column; gap: 4px; }
.ap-edit-label { font-size: 12px; color: var(--c-500); font-weight: var(--font-medium); }
.ap-edit-hint { font-size: 10px; color: var(--c-400); font-weight: var(--font-normal); margin-left: 4px; }
.ap-edit-input {
  padding: 8px 11px; border: 1px solid var(--c-150); border-radius: 8px;
  font-size: 13px; background: var(--app-surface); color: var(--c-900);
  font-family: var(--font-sans); outline: none; box-sizing: border-box;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.ap-edit-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(109,92,255,.15));
}
.ap-edit-input.bold { font-weight: var(--font-medium); }
.ap-edit-input.right { text-align: right; font-family: var(--font-num); }
.ap-edit-input.gray:focus { border-color: #94a3b8; box-shadow: 0 0 0 3px #94a3b820; }
.ap-edit-input.amber:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px #f59e0b20; }
.ap-edit-input.green:focus { border-color: #22c55e; box-shadow: 0 0 0 3px #22c55e20; }
.ap-edit-input[type="number"]::-webkit-inner-spin-button,
.ap-edit-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ap-edit-input[type="number"] { -moz-appearance: textfield; }
.ap-edit-select {
  padding: 8px 11px; border: 1px solid var(--c-150); border-radius: 8px;
  font-size: 13px; background: var(--app-surface);
  font-weight: var(--font-semibold); outline: none; cursor: pointer;
  transition: border-color var(--fast);
}
.ap-edit-select:focus { border-color: var(--primary); }
.ap-edit-price-row { display: flex; gap: 10px; }
.ap-edit-price-row .ap-edit-field { flex: 1; }
.ap-edit-price-wrap { display: flex; align-items: center; gap: 5px; }
.ap-edit-price-wrap .ap-edit-input { flex: 1; }
.ap-edit-price-unit { font-size: 12px; color: var(--c-500); white-space: nowrap; }
.ap-edit-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0 24px 20px; flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   MARGIN CALCULATOR TAB  (.mc-*)
──────────────────────────────────────────────────────── */

/* ── 루트 & 레이아웃 ── */
.mc-root   { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.mc-layout { display:grid; grid-template-columns:310px 1fr; height:100%; overflow:hidden; }

/* ══ 왼쪽 패널 ══ */
.mc-left {
  border-right: 1px solid var(--c-150);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  background: var(--app-bg);
}

/* ── 섹션 ── */
.mc-section {
  border-bottom: 1px solid var(--c-150);
  display: flex; flex-direction: column;
}
.mc-section:last-child { border-bottom: none; }

.mc-sec-hd {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px 7px;
  font-size: 11px; font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-500);
  border-bottom: 1px solid var(--c-100);
}
.mc-sec-sub {
  font-size: 10px; font-weight: var(--font-normal);
  color: var(--c-300); text-transform: none; letter-spacing: 0; margin-left: 2px;
}

/* ── 플랫폼 버튼 ── */
.mc-plat-grid { display:flex; flex-wrap:wrap; gap:5px; padding:10px 14px 12px; }
.mc-plat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 10px; border-radius: var(--r-sm);
  border: 1.5px solid var(--c-200); background: var(--app-surface);
  cursor: pointer; transition: all var(--fast); min-width: 52px;
}
.mc-plat:hover { border-color: var(--c-400); background: var(--c-50); }
.mc-plat-nm { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-700); line-height: 1.3; }
.mc-plat-rt { font-size: 10px; color: var(--c-400); font-family: var(--font-num); }
.mc-plat.on .mc-plat-nm { font-weight: var(--font-bold); }

/* ── 필드 행 ── */
.mc-field {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--c-50);
  position: relative; transition: background var(--fast);
}
.mc-field:last-child { border-bottom: none; }
.mc-field:hover { background: rgba(0,0,0,.013); }

/* 색 구분 왼쪽 라인 */
.mc-field.primary::before, .mc-field.accent::before, .mc-field.supply::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0;
}
.mc-field.primary::before { background: var(--primary); }
.mc-field.accent::before  { background: #a78bfa; }
.mc-field.supply::before  { background: #fb923c; }

.mc-field-lbl {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-700);
}
.mc-field-hint { font-size: 10px; font-weight: var(--font-normal); color: var(--c-400); }
.mc-field-hint.accent { color: #7c3aed; }

/* 오른쪽: 인풋 + 계산 결과 */
.mc-field-right {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.mc-field-result {
  font-size: var(--text-xs); font-family: var(--font-num);
  font-weight: var(--font-semibold); white-space: nowrap;
  padding: 2px 7px; border-radius: var(--r-xs);
}
.mc-field-result.fee { color: #b91c1c; background: #fef2f2; }

.mc-plat-tag {
  display: inline-flex; align-items: center; margin-left: 5px;
  padding: 1px 6px; border-radius: var(--r-lg);
  font-size: 10px; font-weight: var(--font-bold);
  background: var(--primary-soft); color: var(--primary); vertical-align: middle;
}

.mc-field-ctrl {
  display: flex; align-items: center; flex-shrink: 0;
  border: 1.5px solid var(--c-200); border-radius: var(--r-sm);
  background: var(--app-surface); overflow: hidden;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.mc-field-ctrl:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a12, rgba(109,92,255,.12));
}
.mc-field-ctrl.accent { border-color: #ddd6fe; background: #f5f3ff; }
.mc-field-ctrl.accent:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.mc-field-ctrl.pct { width: 88px; }

.mc-field-ctrl input {
  width: 88px; padding: 6px 4px 6px 8px;
  border: none; background: transparent;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  font-family: var(--font-num); text-align: right;
  color: var(--c-900); outline: none;
}
.mc-field-ctrl input::placeholder {
  font-size: var(--text-xs); color: var(--c-300);
  font-family: var(--font-sans); font-weight: var(--font-normal);
}
.mc-field-ctrl input[type=number]::-webkit-inner-spin-button,
.mc-field-ctrl input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; }
.mc-field-ctrl input[type=number] { -moz-appearance:textfield; }
.mc-field-ctrl > span { padding: 0 8px 0 2px; font-size: var(--text-xs); color: var(--c-400); flex-shrink:0; }

/* 공지 배너 */
.mc-notice {
  display: flex; align-items: center; gap: 5px;
  margin: 4px 14px 4px; padding: 6px 10px;
  border-radius: var(--r-xs); font-size: var(--text-xs); color: #7c3aed;
  background: #f5f3ff; border: 1px solid #ddd6fe;
}

/* 토글 */
.mc-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.mc-toggle input { display:none; }
.mc-tog-track {
  width:34px; height:19px; border-radius:10px; background:var(--c-200);
  position:relative; flex-shrink:0; transition:background var(--fast);
}
.mc-tog-track::after {
  content:''; position:absolute; width:15px; height:15px; border-radius:50%;
  background:#fff; top:2px; left:2px; transition:transform var(--fast);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.mc-toggle input:checked ~ .mc-tog-track { background:var(--primary); }
.mc-toggle input:checked ~ .mc-tog-track::after { transform:translateX(15px); }
.mc-tog-lbl { font-size:var(--text-sm); color:var(--c-600); }

/* ── 사업자 유형 선택 ── */
.mc-taxtype-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 10px;
  border-bottom: 1px solid var(--c-100);
}
.mc-taxtype-lbl {
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-700);
}
.mc-taxtype-seg {
  display: flex; border-radius: var(--r-sm);
  border: 1.5px solid var(--c-200); overflow: hidden; flex-shrink: 0;
}
.mc-taxtype-seg button {
  padding: 5px 11px; border: none; background: var(--app-surface);
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500);
  cursor: pointer; transition: all var(--fast); white-space: nowrap;
  border-right: 1px solid var(--c-200); font-family: var(--font-sans);
}
.mc-taxtype-seg button:last-child { border-right: none; }
.mc-taxtype-seg button:hover:not(.on) { background: var(--c-50); color: var(--c-700); }
.mc-taxtype-seg button.on {
  background: var(--primary); color: #fff; font-weight: var(--font-bold);
}

/* ── 부가세 항목 행 ── */
.mc-vat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; gap: 8px;
  border-bottom: 1px solid var(--c-50);
}
.mc-vat-row:last-child { border-bottom: none; }
.mc-vat-row.refund { background: rgba(96,165,250,.04); }
.mc-vat-name {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--c-600); white-space: nowrap; flex-shrink: 0;
}
.mc-vat-formula {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.mc-vat-eq {
  font-size: var(--text-xs); color: var(--c-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-vat-val {
  font-size: var(--text-sm); font-weight: var(--font-bold);
  font-family: var(--font-num); white-space: nowrap; flex-shrink: 0;
}
.mc-vat-val.minus { color: #b91c1c; }
.mc-vat-val.plus  { color: #059669; }
.mc-vat-empty { font-size: var(--text-xs); color: var(--c-300); }

/* ── 순마진 미리보기 바 ── */
.mc-settled-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(52,211,153,.08), rgba(16,185,129,.05));
  border-top: 1px solid var(--c-150);
  border-bottom: 1px solid var(--c-150);
}
.mc-settled-bar-lbl {
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: .05em; color: #059669;
}
.mc-settled-bar-val {
  font-size: var(--text-base); font-weight: var(--font-bold);
  font-family: var(--font-num); color: #059669;
}
.mc-settled-bar-val.loss { color: #dc2626; }

/* ── 목표 마진 역산 ── */
.reverse-section { background: rgba(109,92,255,.025); }
.reverse-section .mc-sec-hd { color: var(--primary); background: rgba(109,92,255,.04); border-color: rgba(109,92,255,.12); }
.reverse-section .mc-field { background: transparent; }
.reverse-section .mc-field:hover { background: rgba(109,92,255,.04); }

.mc-rev-result {
  margin: 2px 14px 12px;
  border-radius: var(--r-md); border: 1px solid var(--primary-a20, #c4b5fd);
  background: var(--app-surface); overflow: hidden;
}
.mc-rev-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: var(--text-sm);
}
.mc-rev-row.main {
  font-weight: var(--font-bold); color: var(--primary);
  border-bottom: 1px solid var(--c-100);
}
.mc-rev-row.main span:last-child { font-family: var(--font-num); font-size: var(--text-base); }
.mc-rev-row.sub { color: var(--c-500); font-size: var(--text-xs); }
.mc-rev-row.sub span:last-child { font-family: var(--font-num); }
.mc-rev-hint { margin: 0 14px 12px; font-size: var(--text-xs); color: var(--c-400); }

/* ══ 오른쪽 패널 ══ */
.mc-right {
  overflow-y: auto; overflow-x: hidden;
  padding: 16px 18px 24px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--app-bg);
}

/* KPI 카드 */
.mc-kpi {
  border-radius: var(--r-lg); border: 1.5px solid var(--c-200);
  background: var(--app-surface); padding: 16px 18px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  transition: border-color var(--normal);
}
.mc-kpi.good { border-color: #6ee7b7; }
.mc-kpi.ok   { border-color: #fcd34d; }
.mc-kpi.low  { border-color: #fb923c; }
.mc-kpi.loss { border-color: #fca5a5; }

.mc-kpi-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:2px; }
.mc-kpi-eyebrow { font-size:10px; font-weight:var(--font-bold); text-transform:uppercase; letter-spacing:.09em; color:var(--c-400); }
.mc-kpi-num { font-size:44px; font-weight:800; font-family:var(--font-num); color:var(--c-900); line-height:1; letter-spacing:-0.04em; }
.mc-kpi-unit { font-size:24px; color:var(--c-500); margin-left:1px; font-weight:700; }

.mc-kpi-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--r-lg);
  font-size:var(--text-sm); font-weight:var(--font-bold); flex-shrink:0; margin-top:6px;
}
.mc-kpi-pill.good { background:#d1fae5; color:#065f46; }
.mc-kpi-pill.ok   { background:#fef3c7; color:#92400e; }
.mc-kpi-pill.low  { background:#ffedd5; color:#9a3412; }
.mc-kpi-pill.loss { background:#fee2e2; color:#991b1b; }

.mc-kpi-msg { font-size:var(--text-sm); color:var(--c-500); margin-bottom:14px; }

/* 게이지 */
.mc-gauge { margin-bottom:12px; }
.mc-gauge-track {
  position:relative; height:12px; border-radius:6px;
  background:var(--c-100); overflow:visible; margin-bottom:5px;
}
.mc-gauge-fill { height:100%; border-radius:6px; transition:width .4s var(--ease); }
.mc-gauge-fill.good { background:linear-gradient(90deg,#34d399,#10b981); }
.mc-gauge-fill.ok   { background:linear-gradient(90deg,#fcd34d,#f59e0b); }
.mc-gauge-fill.low  { background:linear-gradient(90deg,#fb923c,#f97316); }
.mc-gauge-fill.loss { background:linear-gradient(90deg,#f87171,#ef4444); }
.mc-gauge-ref {
  position:absolute; top:-3px; left:50%;
  width:2px; height:18px; background:var(--c-400);
  border-radius:1px; transform:translateX(-50%);
  box-shadow:0 0 0 1px var(--app-surface);
}
.mc-gauge-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--c-400); font-family:var(--font-num); }

/* KPI 요약 3종 */
.mc-kpi-stats { display:flex; border-top:1px solid var(--c-100); padding-top:12px; margin-top:2px; }
.mc-kpi-stat  { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.mc-kpi-divider { width:1px; background:var(--c-100); align-self:stretch; flex-shrink:0; }
.mc-kpi-stat-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-400); }
.mc-kpi-stat-val { font-size:var(--text-sm); font-weight:var(--font-bold); font-family:var(--font-num); color:var(--c-800); }
.mc-kpi-stat-val.profit { color:#059669; }
.mc-kpi-stat-val.loss   { color:#dc2626; }

/* ══ 워터폴 ══ */
.mc-wfall {
  border-radius:var(--r-lg); border:1px solid var(--c-200);
  background:var(--app-surface); overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}
.mc-wfall-hd {
  display:flex; align-items:center; gap:8px;
  padding:11px 16px; font-size:11px; font-weight:var(--font-bold);
  text-transform:uppercase; letter-spacing:.07em; color:var(--c-500);
  background:var(--c-50); border-bottom:1px solid var(--c-150);
}

/* 섹션 구분 라벨 */
.mc-wfall-group-lbl {
  padding:5px 16px;
  font-size:10px; font-weight:var(--font-bold);
  text-transform:uppercase; letter-spacing:.08em; color:var(--c-400);
  background:var(--c-50);
  border-top:1px solid var(--c-100); border-bottom:1px solid var(--c-100);
}

/* ── 기본 행 구조 ── */
/* main: dot(16) + name(auto) + track(1fr) + right-block(auto) */
/* sub:  indent(14) + name(auto) + track(1fr) + amt(auto) */
.mc-wfall-row {
  display: grid;
  align-items: center;
  gap: 10px;
  transition: background var(--fast);
}
.mc-wfall-row:hover { background: rgba(0,0,0,.02); }

/* main 행 */
.mc-wfall-row.main {
  grid-template-columns: 14px auto 1fr auto;
  padding: 13px 16px;
  border-bottom: 1px solid var(--c-100);
}
.mc-wfall-row.main:last-child { border-bottom: none; }

/* sub 행 */
.mc-wfall-row.sub {
  grid-template-columns: 28px auto 1fr auto;
  padding: 9px 16px;
  border-bottom: 1px solid var(--c-50);
  background: rgba(0,0,0,.015);
}
.mc-wfall-row.sub:last-child { border-bottom: none; }
.mc-wfall-row.sub:hover { background: rgba(0,0,0,.03); }

/* ref 행 (수수료 기준 금액) */
.mc-wfall-row.ref {
  grid-template-columns: 14px auto 1fr auto;
  padding: 8px 16px;
  border-bottom: 1px solid var(--c-50);
  opacity: .55;
}

/* 특수 상태 */
.mc-wfall-row.settled { background: rgba(148,163,184,.06); }
.mc-wfall-row.settled:hover { background: rgba(148,163,184,.1); }
.mc-wfall-row.margin  { border-top: 2px solid var(--c-150); }
.mc-wfall-row.margin.profit { background: rgba(34,197,94,.05); }
.mc-wfall-row.margin.loss   { background: rgba(239,68,68,.05); }
.mc-wfall-row.margin.profit:hover { background: rgba(34,197,94,.09); }
.mc-wfall-row.margin.loss:hover   { background: rgba(239,68,68,.09); }

/* 그룹 착색 왼쪽 테두리 */
.mc-wfall-row.fee-grp    { box-shadow: inset 3px 0 0 rgba(248,113,113,.5); }
.mc-wfall-row.cost-grp   { box-shadow: inset 3px 0 0 rgba(251,146,60,.5); }
.mc-wfall-row.tax-grp    { box-shadow: inset 3px 0 0 rgba(251,191,36,.5); }
.mc-wfall-row.refund-grp { box-shadow: inset 3px 0 0 rgba(96,165,250,.5); }

/* 도트 */
.mc-wfall-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; justify-self: center;
  box-shadow: 0 0 0 2.5px var(--app-surface), 0 0 0 4px transparent;
}
.mc-wfall-row.main .mc-wfall-dot {
  width: 11px; height: 11px;
}

/* 인덴트 (sub 행 왼쪽 장식) */
.mc-wfall-indent {
  width: 14px; height: 14px; flex-shrink: 0; justify-self: center;
  border-left: 1.5px solid var(--c-200); border-bottom: 1.5px solid var(--c-200);
  border-radius: 0 0 0 3px; margin-left: 4px; align-self: start; margin-top: 4px;
}

/* 이름 */
.mc-wfall-name {
  font-size: var(--text-sm); color: var(--c-700);
  display: flex; align-items: center; gap: 5px; min-width: 0;
}
.mc-wfall-row.main .mc-wfall-name {
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-800);
}
.mc-wfall-row.sub  .mc-wfall-name { font-size: var(--text-xs); color: var(--c-600); }
.mc-wfall-row.margin .mc-wfall-name {
  font-size: var(--text-base); font-weight: var(--font-bold);
}

/* 비율 인라인 뱃지 */
.mc-wfall-rate {
  font-size: 10px; font-family: var(--font-num);
  color: var(--c-400); font-weight: var(--font-normal);
  background: var(--c-100); padding: 1px 5px; border-radius: 999px;
  white-space: nowrap;
}
.mc-wfall-note {
  font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: var(--r-xs);
  background: #f5f3ff; border: 1px solid #ddd6fe; color: #7c3aed;
}

/* 트랙 */
.mc-wfall-track {
  position: relative; border-radius: 6px; overflow: hidden;
  height: 10px;
}
.mc-wfall-row.main .mc-wfall-track { height: 20px; border-radius: 8px; }
.mc-wfall-row.margin .mc-wfall-track { height: 24px; border-radius: 10px; }
.mc-wfall-row.ref .mc-wfall-track   { height: 8px; }

.mc-wfall-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: inherit; transition: width .4s var(--ease);
}
.mc-wfall-fill.bg { width: 100%; }
.mc-wfall-fill.fg { z-index: 1; }

/* 오른쪽 블록 (main: amt + pct 세로 배열) */
.mc-wfall-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  min-width: 80px; text-align: right;
}

/* 금액 */
.mc-wfall-amt {
  font-size: var(--text-sm); font-family: var(--font-num);
  color: var(--c-700); white-space: nowrap; text-align: right;
}
.mc-wfall-row.main .mc-wfall-amt { font-size: var(--text-base); font-weight: var(--font-semibold); }
.mc-wfall-row.sub  .mc-wfall-amt { font-size: var(--text-xs); min-width: 80px; }
.mc-wfall-amt.muted   { color: var(--c-400); }
.mc-wfall-amt.minus   { color: #dc2626; }
.mc-wfall-amt.plus    { color: #1d4ed8; font-weight: var(--font-semibold); }
.mc-wfall-amt.settled { color: var(--c-700); font-weight: var(--font-bold); }
.mc-wfall-amt.profit  { color: #059669; }
.mc-wfall-amt.loss    { color: #dc2626; }
.mc-wfall-amt.bold    { font-weight: var(--font-bold); font-size: var(--text-md) !important; }

/* 퍼센트 (main 행만) */
.mc-wfall-pct {
  font-size: 10px; font-family: var(--font-num);
  color: var(--c-400); white-space: nowrap; text-align: right;
}
.mc-wfall-pct.muted   { color: var(--c-300); }
.mc-wfall-pct.settled { color: var(--c-400); }
.mc-wfall-pct.profit  { color: #34d399; }
.mc-wfall-pct.loss    { color: #f87171; }
.mc-wfall-pct.bold    { font-weight: var(--font-bold); font-size: 11px; }

/* 헤더 세금 배지 */
.mc-wfall-taxbadge {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: var(--r-lg);
  font-size: 10px; font-weight: var(--font-bold);
  background: var(--primary-soft); color: var(--primary);
  text-transform: none; letter-spacing: 0;
}

/* 빈 상태 */
.mc-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1; padding:40px 20px; text-align:center; min-height:280px;
}
.mc-empty-icon {
  width:60px; height:60px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-soft); border:1px solid var(--primary-a20,rgba(109,92,255,.18));
  color:var(--primary); margin:0 auto 14px; box-shadow:0 8px 24px rgba(109,92,255,.14);
}
.mc-empty-title { font-size:var(--text-lg); font-weight:var(--font-bold); color:var(--c-800); margin-bottom:5px; }
.mc-empty-desc  { font-size:var(--text-sm); color:var(--text-muted); line-height:1.7; margin-bottom:18px; }
.mc-empty-cards { display:flex; flex-direction:column; gap:8px; max-width:360px; width:100%; }
.mc-empty-card {
  display:flex; align-items:flex-start; gap:10px; text-align:left;
  background:var(--app-surface); border:1px solid var(--c-150);
  border-radius:var(--r-md); padding:10px 12px;
  font-size:var(--text-sm); color:var(--c-600); line-height:1.6;
}
.mc-empty-icon2 { font-size:16px; flex-shrink:0; margin-top:1px; }

/* ═══════════════════════════════════════════════════════════════
   모바일 반응형
   ═══════════════════════════════════════════════════════════════ */

/* ── 860px: 사이드바 오버레이 전환 시점 ── */
@media (max-width: 860px) {
  .pr-content { padding: 0 12px; }
  .ct-section { margin: 10px 0 0; }
  .ct-unreg-banner { margin: 10px 0 0; }
  .ap-toolbar { padding: 8px 12px; }
  .ap-filter-bar { padding: 6px 12px; overflow-x: auto; flex-wrap: nowrap; }
  .ct-fee-grid { padding: 0 8px 12px; }
  .ct-fee-desc { padding: 4px 8px 10px; }
  .ct-fee-actions { padding: 4px 8px 14px; }
}

/* ── 600px: 태블릿 소형 ── */
@media (max-width: 600px) {
  .ct-section-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .ct-section-actions { flex-wrap: wrap; gap: 5px; }
  .ct-search { width: 100%; }
  .ct-search-wrap { flex: 1; min-width: 0; }

  .ap-toolbar { gap: 8px; }
  .ap-toolbar-left { flex-wrap: wrap; gap: 5px; }
  .ap-search { width: 100%; }
  .ap-search-wrap { flex: 1 1 100%; min-width: 0; }

  /* 그룹 모달 전체 너비 */
  .ct-modal { width: calc(100vw - 24px) !important; max-width: none !important; margin: 12px; }
  .ct-group-modal { max-height: calc(100dvh - 24px); }
}

/* ── 480px: 소형 모바일 ── */
@media (max-width: 480px) {
  .pr-content { padding: 0 8px; }
  .ct-section { margin: 8px 0 0; border-radius: var(--r-md); }
  .ct-unreg-banner { margin: 8px 0 0; border-radius: var(--r-md); }

  /* 테이블 폰트 */
  .ct-table th,
  .ct-table td { padding: 4px 6px; }
  .ct-table th:first-child,
  .ct-table td:first-child { padding-left: 10px; }
  .ct-cell { font-size: var(--text-sm); }

  /* 수수료 그리드: 2열 고정 */
  .ct-fee-grid { grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 10px; }

  /* 판매가 테이블 */
  .ap-table { font-size: 12px; }

  /* 모달 풀스크린 */
  .ct-modal-overlay { padding: 0; }
  .ct-modal { width: 100vw !important; max-width: 100vw !important; max-height: 100dvh; border-radius: 0; margin: 0; }

  /* 섹션 헤더 액션버튼 텍스트 숨김 */
  .ct-section-actions .pr-btn:not(.icon) span:not(.pr-btn-count) { display: none; }
}

/* ============================================================================
   DateRangePicker — 범위 선택 달력. AppDatePicker 디자인 시스템 계승.
   ============================================================================ */

/* ── 트리거 버튼 ── */
.drp-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border: 1.5px solid var(--c-200); border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  font-family: inherit; color: var(--c-500);
  background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(248,250,252,.9));
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 0 rgba(255,255,255,.8) inset;
  cursor: pointer; transition: all .2s ease;
  user-select: none; white-space: nowrap;
}
.drp-trigger:hover {
  border-color: rgba(99,102,241,.35);
  background: linear-gradient(to bottom, var(--app-surface), var(--c-50));
  box-shadow: 0 2px 8px rgba(99,102,241,.08), 0 1px 0 rgba(255,255,255,.9) inset;
}
.drp-trigger.drp-open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
  color: var(--primary-deep);
}
.drp-trigger.drp-has-val { color: var(--c-800); }
.drp-display { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.drp-date { font-weight: var(--font-bold); }
.drp-sep { color: var(--c-400); font-size: var(--text-xs); }
.drp-placeholder { color: var(--c-400); }

/* ── 팝업 ── */
.drp-pop {
  position: fixed; z-index: 100001;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 24px 48px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(255,255,255,.8) inset;
  padding: 16px;
  width: 560px;
  animation: drpPopIn .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes drpPopIn {
  from { opacity: 0; transform: scale(.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 상태 표시줄 ── */
.drp-status {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--c-50); border-radius: var(--r-sm);
  border: 1px solid var(--c-100);
}
.drp-status-item {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; border-radius: var(--r-xs);
  transition: all .15s;
}
.drp-status-item.active {
  background: var(--primary-soft);
  border: 1.5px solid rgba(99,102,241,.2);
}
.drp-status-label { font-size: 10px; font-weight: var(--font-bold); color: var(--c-400); letter-spacing: .04em; text-transform: uppercase; }
.drp-status-item.active .drp-status-label { color: var(--primary); }
.drp-status-val { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-700); font-variant-numeric: tabular-nums; }
.drp-status-item.active .drp-status-val { color: var(--primary-deep); }
.drp-status-arrow { color: var(--c-300); font-size: var(--text-sm); flex-shrink: 0; }

/* ── 두 달 레이아웃 ── */
.drp-calendars {
  display: flex; gap: 0; align-items: flex-start;
}
.drp-divider {
  width: 1px; background: var(--c-100); align-self: stretch; margin: 0 14px;
  flex-shrink: 0;
}

/* ── 달력 한 개 ── */
.drp-cal { flex: 1; min-width: 0; }
.drp-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.drp-cal-title {
  font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800);
  letter-spacing: -.02em;
}
.drp-nav-hidden { visibility: hidden; pointer-events: none; }

/* ── 연월 선택 타이틀 버튼 ── */
.drp-cal-title-btn {
  font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800);
  letter-spacing: -.02em; border: none; background: transparent;
  cursor: pointer; padding: 6px 10px; border-radius: var(--r-sm);
  transition: all .15s ease; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.drp-cal-title-btn:hover { background: rgba(99,102,241,.06); color: var(--primary-deep); }
.drp-cal-title-btn:active { transform: scale(.96); }

/* ── 연/월 그리드 ── */
.drp-mode-grid { padding: 4px 0 8px; }
.drp-mode-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.drp-mode-cell {
  height: 40px; border: none; background: transparent; font-family: inherit;
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-700);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); transition: all .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.drp-mode-cell:hover { background: rgba(241,245,249,.9); }
.drp-mode-cell:active { transform: scale(.92); }
.drp-mode-cell.today { color: var(--primary-deep); font-weight: var(--font-extrabold); background: rgba(99,102,241,.08); }
.drp-mode-cell.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%) !important;
  color: white !important; font-weight: var(--font-bold);
  box-shadow: 0 3px 10px rgba(99,102,241,.3);
}
[data-theme="dark"] .drp-mode-cell { color: var(--c-300); }
[data-theme="dark"] .drp-cal-title-btn { color: var(--c-100); }

/* ── 요일 헤더 ── */
.drp-sat { color: #3b82f6 !important; }
.drp-sun { color: #ef4444 !important; }

/* ── 날짜 그리드 ── */
.drp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.drp-empty { height: 34px; }

/* ── 날짜 셀 ── */
.drp-day {
  height: 34px; border: none; background: transparent;
  font-family: inherit; font-size: var(--text-base);
  font-weight: var(--font-medium); color: var(--c-700);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); transition: all .12s ease;
  -webkit-tap-highlight-color: transparent; position: relative;
}
.drp-day.sat { color: #3b82f6; }
.drp-day.sun { color: #ef4444; }
.drp-day:hover:not(.sel):not(.in-range) {
  background: rgba(241,245,249,.9);
}
.drp-day.today:not(.sel) {
  font-weight: var(--font-extrabold); color: var(--primary-deep);
  background: rgba(99,102,241,.08);
}

/* 범위 내부 */
.drp-day.in-range {
  background: rgba(99,102,241,.08);
  border-radius: 0;
  color: var(--primary-deep);
}
.drp-day.range-start {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.drp-day.range-end {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
/* 시작=종료(1일 선택) */
.drp-day.range-start.range-end {
  border-radius: var(--r-sm);
}

/* 선택된 날짜 (시작/끝) */
.drp-day.sel {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%) !important;
  color: white !important; font-weight: var(--font-bold);
  border-radius: var(--r-sm) !important;
  box-shadow: 0 3px 10px rgba(99,102,241,.35);
  z-index: 1;
}

/* hover 중인 셀 (두 번째 날짜 미리보기) */
.drp-day.hover:not(.sel) {
  background: rgba(99,102,241,.15);
  color: var(--primary-deep);
  font-weight: var(--font-bold);
}

/* ── 푸터 ── */
.drp-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(226,232,240,.5);
  gap: 8px;
}
.drp-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.drp-preset-btn {
  height: 28px; padding: 0 10px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200);
  background: rgba(248,250,252,.9); color: var(--c-500);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  font-family: inherit; cursor: pointer; transition: all .12s;
}
.drp-preset-btn:hover {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-soft);
}
.drp-cancel-btn {
  height: 28px; padding: 0 12px; border-radius: var(--r-xs);
  border: 1px solid rgba(239,68,68,.2);
  background: rgba(254,242,242,.8); color: #ef4444;
  font-size: var(--text-xs); font-weight: var(--font-bold);
  font-family: inherit; cursor: pointer; transition: all .12s;
  flex-shrink: 0;
}
.drp-cancel-btn:hover { background: #fee2e2; border-color: #ef4444; }

/* ── 다크모드 ── */
[data-theme="dark"] .drp-pop {
  background: rgba(30,32,40,.97);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 24px 48px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.3);
}
[data-theme="dark"] .drp-trigger {
  background: var(--c-800);
  border-color: var(--c-600);
  color: var(--c-300);
}
[data-theme="dark"] .drp-trigger.drp-has-val { color: var(--c-100); }
[data-theme="dark"] .drp-status { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .drp-day { color: var(--c-300); }
[data-theme="dark"] .drp-day.sat { color: #60a5fa; }
[data-theme="dark"] .drp-day.sun { color: #f87171; }
[data-theme="dark"] .drp-day.in-range { background: rgba(99,102,241,.15); }
[data-theme="dark"] .drp-divider { background: var(--c-700); }
[data-theme="dark"] .drp-preset-btn { background: var(--c-700); border-color: var(--c-600); color: var(--c-300); }
[data-theme="dark"] .drp-cal-title { color: var(--c-100); }
/* ═══════════════════════════════════════════════════════════════
   RETURNS PAGE STYLES
   기존 DaoWork 디자인 패턴 (sa-, ov-) 따름
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ── */
.rt-page { padding: 0; }

.rt-header {
  background: var(--page-hd-bg);
  border: 1px solid var(--page-hd-border);
  border-radius: var(--page-hd-radius);
  padding: var(--page-hd-pad);
  margin-bottom: var(--page-hd-mb);
  box-shadow: var(--page-hd-shadow);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rt-hd-left { display: flex; align-items: center; gap: 10px; }
.rt-hd-icon {
  color: var(--error); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rt-hd-title {
  font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-900); margin: 0;
  letter-spacing: -0.02em; line-height: 1.2;
}
.rt-hd-sub { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); display: block; }
.rt-hd-actions { display: flex; align-items: center; gap: 8px; }

.rt-range-tabs {
  display: flex; gap: 2px; background: var(--c-100); border-radius: var(--r-sm); padding: 3px;
}
.rt-range-tab {
  padding: 5px 14px; border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: var(--font-bold);
  color: var(--c-500); background: transparent; border: none; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.rt-range-tab:hover { color: var(--c-600); background: rgba(0,0,0,.03); }
.rt-range-tab.active {
  color: var(--error-deep); background: var(--app-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.rt-btn-refresh {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--c-150);
  background: var(--app-surface); color: var(--c-500); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .15s;
}
.rt-btn-refresh:hover { color: var(--error); border-color: var(--error-bg); background: var(--error-bg); }

.rt-btn-export {
  display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--c-150);
  background: var(--app-surface); color: var(--c-600);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.rt-btn-export:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.rt-btn-export:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── KPI Cards ── */
.rt-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }

.rt-kpi {
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-md);
  padding: 16px 18px; transition: all .2s;
}
.rt-kpi:hover { box-shadow: 0 6px 20px rgba(0,0,0,.05); transform: translateY(-1px); }
.rt-kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rt-kpi-ic {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rt-kpi-icon--cnt { background: var(--error-bg); color: var(--error); }
.rt-kpi-icon--qty { background: var(--warning-bg); color: var(--warning); }
.rt-kpi-icon--refund { background: var(--primary-soft); color: var(--primary); }
.rt-kpi-icon--rate { background: var(--error-bg); color: var(--error-deep); }

.rt-kpi-lb { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); }
.rt-kpi-val { font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--c-900); letter-spacing: -.02em; line-height: 1.1; }
.rt-kpi-sub { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); margin-top: 2px; }
.rt-kpi-skel {
  height: 24px; width: 80px; background: var(--c-100); border-radius: var(--r-xs);
  animation: rt-pulse 1.2s ease-in-out infinite;
}
@keyframes rt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }


/* ── Charts ── */
.rt-charts-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; margin-bottom: 12px; }

.rt-card {
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-lg);
  padding: 20px; margin-bottom: 12px;
}
.rt-card-table { padding: 20px 0; }
.rt-card-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800);
  gap: 6px;
}
.rt-card-h > div { display: flex; align-items: center; gap: 6px; }
.rt-badge {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400);
  background: var(--c-100); padding: 3px 8px; border-radius: var(--r-xs);
}

.rt-chart-loading { display: flex; align-items: center; justify-content: center; height: 140px; color: var(--c-400); }
.rt-empty-sm { padding: 40px 0; text-align: center; color: var(--c-300); font-size: var(--text-base); font-weight: var(--font-semibold); }

.rt-trend-chart { position: relative; }
.rt-cl { font-size: var(--text-xs); fill: var(--c-400); font-weight: var(--font-semibold); }

.rt-tt {
  position: absolute; pointer-events: none;
  background: var(--c-800); color: var(--app-surface); border-radius: var(--r-sm);
  padding: 8px 12px; font-size: var(--text-xs); font-weight: var(--font-semibold);
  z-index: 10; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.rt-tt-date { color: var(--c-400); margin-bottom: 4px; }
.rt-tt-row { line-height: 1.6; }

/* Donut */
.rt-donut-wrap { display: flex; align-items: center; gap: 20px; justify-content: center; }
.rt-donut-total-label { font-size: var(--text-xs); fill: var(--c-400); font-weight: var(--font-bold); }
.rt-donut-total-val { font-size: var(--text-md); fill: var(--c-900); font-weight: var(--font-extrabold); }
.rt-donut-legend { display: flex; flex-direction: column; gap: 8px; }
.rt-donut-item { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.rt-donut-dot { width: 10px; height: 10px; border-radius: var(--r-xs); flex-shrink: 0; }
.rt-donut-name { font-weight: var(--font-bold); color: var(--c-600); min-width: 32px; }
.rt-donut-pct { font-weight: var(--font-semibold); color: var(--c-400); min-width: 42px; }
.rt-donut-amt { font-weight: var(--font-bold); color: var(--c-900); }

/* Reason bars */
.rt-reason-list { display: flex; flex-direction: column; gap: 8px; }
.rt-reason-row { display: flex; align-items: center; gap: 10px; }
.rt-reason-label {
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-600);
  min-width: 100px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rt-reason-bar-wrap {
  flex: 1; height: 8px; background: var(--c-100); border-radius: var(--r-xs); overflow: hidden;
}
.rt-reason-bar {
  height: 100%; background: linear-gradient(90deg, var(--error-bg), var(--error));
  border-radius: var(--r-xs); transition: width .4s ease;
}
.rt-reason-cnt { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); min-width: 36px; text-align: right; }
.rt-reason-amt { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-900); min-width: 80px; text-align: right; }


/* ── Type filter tabs ── */
.rt-type-tabs { display: flex; gap: 2px; background: var(--c-100); border-radius: var(--r-sm); padding: 2px; }
.rt-type-tab {
  padding: 4px 12px; border-radius: var(--r-xs); font-size: var(--text-xs); font-weight: var(--font-bold);
  color: var(--c-500); background: transparent; border: none; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.rt-type-tab:hover { color: var(--c-600); }
.rt-type-tab.active { color: var(--error-deep); background: var(--app-surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.rt-filter-sep { width: 1px; height: 20px; background: var(--c-200); margin: 0 4px; flex-shrink: 0; }


/* ── Table ── */
.rt-table-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 20px 16px; flex-wrap: wrap;
}
.rt-table-toolbar-left { display: flex; align-items: center; gap: 6px; font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); }
.rt-table-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rt-table-title { font-size: var(--text-md); font-weight: var(--font-extrabold); }

/* Search */
.rt-search-box {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--c-150); border-radius: var(--r-sm);
  background: var(--app-surface); color: var(--c-400); min-width: 200px;
  transition: border-color .15s;
}
.rt-search-box:focus-within { border-color: var(--primary); }
.rt-search-box input {
  border: none; outline: none; background: transparent; flex: 1;
  font-size: var(--text-sm); font-family: inherit; color: var(--c-700);
}
.rt-search-clear {
  border: none; background: transparent; color: var(--c-300); cursor: pointer;
  display: flex; align-items: center; padding: 0;
}
.rt-search-clear:hover { color: var(--c-600); }

/* Source select */
.rt-source-select {
  height: 30px; padding: 0 8px; border: 1px solid var(--c-150); border-radius: var(--r-sm);
  background: var(--app-surface); font-size: var(--text-xs); font-weight: var(--font-bold);
  color: var(--c-600); font-family: inherit; cursor: pointer;
}

/* Sort */
.rt-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.rt-th-sort:hover { color: var(--c-600); }
.rt-sort-idle { opacity: 0.3; }

/* Row actions */
.rt-row-actions { display: flex; gap: 2px; }
.rt-btn-edit, .rt-btn-del {
  width: 26px; height: 26px; border-radius: var(--r-xs); border: none;
  background: transparent; color: var(--c-300); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.rt-btn-edit:hover { background: var(--primary-soft); color: var(--primary); }
.rt-btn-del:hover { background: var(--error-bg); color: var(--error); }

/* Order link */
.rt-ono-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'SF Mono', 'Consolas', monospace; font-size: var(--text-xs);
  color: var(--primary); font-weight: var(--font-semibold);
  display: inline-flex; align-items: center; gap: 3px;
  transition: color .15s;
}
.rt-ono-link:hover { color: var(--primary-deep); text-decoration: underline; }

/* Product bar color */
.rt-reason-bar--product {
  background: linear-gradient(90deg, var(--primary-soft), var(--primary));
}

.rt-table-wrap { overflow-x: auto; }
.rt-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
}
.rt-table th {
  padding: 10px 14px; font-weight: var(--font-bold); color: var(--c-400); font-size: var(--text-xs);
  text-align: left; border-bottom: 1px solid var(--c-150);
  white-space: nowrap;
}
.rt-table th.r { text-align: right; }
.rt-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--c-50);
  color: var(--c-600); vertical-align: middle;
}
.rt-table td.r { text-align: right; }
.rt-table tr:hover td { background: var(--c-50); }

.rt-td-date { font-weight: var(--font-semibold); color: var(--c-500); white-space: nowrap; font-size: var(--text-xs); }
.rt-td-ono { font-family: 'SF Mono', 'Consolas', monospace; font-size: var(--text-xs); color: var(--primary); font-weight: var(--font-semibold); }
.rt-td-product { max-width: 200px; }
.rt-td-pn { display: block; font-weight: var(--font-bold); color: var(--c-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-td-opt { display: block; font-size: var(--text-xs); color: var(--c-400); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-td-source {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--primary);
  background: var(--primary-soft); padding: 2px 8px; border-radius: var(--r-xs);
}
.rt-td-refund { font-weight: var(--font-extrabold); color: var(--error); }
.rt-td-reason { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-400); }

.rt-type-badge {
  font-size: var(--text-xs); font-weight: var(--font-extrabold); padding: 2px 8px; border-radius: var(--r-xs);
}
.rt-type-return { color: var(--error-deep); background: var(--error-bg); }
.rt-type-cancel { color: var(--warning-deep); background: var(--warning-bg); }
.rt-type-exchange { color: var(--primary-deep); background: var(--primary-soft); }

.rt-btn-del {
  width: 26px; height: 26px; border-radius: var(--r-xs); border: none;
  background: transparent; color: var(--c-300); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.rt-btn-del:hover { background: var(--error-bg); color: var(--error); }

/* Status toggle button */
.rt-status-btn {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  border: none; cursor: pointer; transition: all .12s; line-height: 1.4;
  white-space: nowrap;
}
.rt-status--done { background: #d1fae5; color: #065f46; }
.rt-status--done:hover { background: #a7f3d0; }
.rt-status--pending { background: #fee2e2; color: #991b1b; }
.rt-status--pending:hover { background: #fecaca; }

/* ── Pagination ── */
.rt-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 14px 0 6px;
}
.rt-pager button {
  width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--c-150);
  background: var(--app-surface); color: var(--c-600); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.rt-pager button:hover:not(:disabled) { color: var(--error); border-color: var(--error-bg); }
.rt-pager button:disabled { opacity: 0.3; cursor: default; }
.rt-pager-info { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-400); }

/* ── Spin animation ── */
.spin { animation: rt-spin 1s linear infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }


/* ── Responsive ── */
@media (max-width: 860px) {
  .rt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .rt-charts-row { grid-template-columns: 1fr; }
  .rt-header { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .rt-kpi-grid { grid-template-columns: 1fr; }
}


/* ── Dark mode ── */
[data-theme="dark"] .rt-header,
[data-theme="dark"] .rt-kpi,
[data-theme="dark"] .rt-card { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .rt-hd-title,
[data-theme="dark"] .rt-kpi-val,
[data-theme="dark"] .rt-card-h { color: var(--c-100); }
[data-theme="dark"] .rt-table th { color: var(--c-500); border-color: var(--c-700); }
[data-theme="dark"] .rt-table td { color: var(--c-300); border-color: var(--c-800); }
[data-theme="dark"] .rt-table tr:hover td { background: var(--c-200); }
[data-theme="dark"] .rt-td-pn { color: var(--c-100); }
[data-theme="dark"] .rt-range-tabs,
[data-theme="dark"] .rt-type-tabs { background: var(--c-700); }
[data-theme="dark"] .rt-range-tab,
[data-theme="dark"] .rt-type-tab { color: var(--c-400); }
[data-theme="dark"] .rt-range-tab.active,
[data-theme="dark"] .rt-type-tab.active { background: var(--c-600); color: var(--error); }
[data-theme="dark"] .rt-btn-refresh { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .rt-reason-bar-wrap { background: var(--c-700); }
[data-theme="dark"] .rt-reason-amt,
[data-theme="dark"] .rt-donut-amt { color: var(--c-100); }
[data-theme="dark"] .rt-donut-total-val { fill: var(--c-100); }
[data-theme="dark"] .rt-badge { background: var(--c-700); color: var(--c-400); }


/* ── Edit Modal ── */
.rt-edit-modal {
  background: var(--app-surface); border-radius: var(--r-lg); padding: 0;
  width: 420px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: rt-modal-in .15s ease;
}
.rt-edit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.rt-edit-title { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); }
.rt-modal-close {
  width: 28px; height: 28px; border: none; background: var(--c-100);
  border-radius: var(--r-xs); font-size: 16px; color: var(--c-500);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rt-modal-close:hover { background: var(--c-200); color: var(--c-700); }
.rt-edit-product {
  padding: 8px 24px 16px; font-size: var(--text-sm); font-weight: var(--font-bold);
  color: var(--c-500); border-bottom: 1px solid var(--c-100);
}
.rt-edit-body { padding: 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.rt-edit-row { display: flex; flex-direction: column; gap: 6px; }
.rt-edit-row label { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-500); }
.rt-edit-input {
  height: 36px; padding: 0 10px; border: 1px solid var(--c-150); border-radius: var(--r-sm);
  font-size: var(--text-sm); font-family: inherit; color: var(--c-700);
  background: var(--app-surface); transition: border-color .15s;
}
.rt-edit-input:focus { outline: none; border-color: var(--primary); }
.rt-edit-types { display: flex; gap: 4px; }
.rt-edit-type {
  padding: 6px 14px; border-radius: var(--r-sm); font-size: var(--text-sm);
  font-weight: var(--font-bold); border: 1px solid var(--c-150);
  background: var(--app-surface); color: var(--c-500); cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.rt-edit-type.active { border-color: var(--error); color: var(--error); background: var(--error-bg); }
.rt-edit-reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-edit-reason-chip {
  padding: 4px 10px; border-radius: var(--r-xs); font-size: var(--text-xs);
  font-weight: var(--font-bold); border: 1px solid var(--c-150);
  background: var(--app-surface); color: var(--c-500); cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.rt-edit-reason-chip.active { border-color: var(--error); color: var(--error); background: var(--error-bg); }
.rt-edit-footer { display: flex; gap: 8px; padding: 16px 24px 20px; justify-content: flex-end; }
.rt-edit-save {
  padding: 8px 20px; border-radius: var(--r-sm); font-size: var(--text-sm);
  font-weight: var(--font-bold); border: none; cursor: pointer;
  background: var(--primary); color: white; font-family: inherit;
  transition: background .15s;
}
.rt-edit-save:hover { background: var(--primary-deep); }

[data-theme="dark"] .rt-edit-modal { background: var(--c-800); }
[data-theme="dark"] .rt-edit-title { color: var(--c-100); }
[data-theme="dark"] .rt-edit-product { color: var(--c-400); border-color: var(--c-700); }
[data-theme="dark"] .rt-edit-input { background: var(--c-700); border-color: var(--c-600); color: var(--c-200); }
[data-theme="dark"] .rt-edit-type,
[data-theme="dark"] .rt-edit-reason-chip { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .rt-modal-close { background: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .rt-search-box { background: var(--c-700); border-color: var(--c-600); }
[data-theme="dark"] .rt-search-box input { color: var(--c-200); }
[data-theme="dark"] .rt-source-select { background: var(--c-700); border-color: var(--c-600); color: var(--c-300); }
[data-theme="dark"] .rt-ono-link { color: var(--primary); }

/* ── Delete Confirm Modal ── */
.rt-confirm-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.4); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.rt-confirm {
  background: var(--app-surface); border-radius: var(--r-lg); padding: 28px 24px 20px;
  width: 340px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: rt-modal-in .15s ease;
}
@keyframes rt-modal-in { from { opacity: 0; transform: scale(.95); } }
.rt-confirm-icon { color: var(--error); margin-bottom: 12px; }
.rt-confirm-title { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); margin-bottom: 8px; }
.rt-confirm-msg { font-size: var(--text-base); color: var(--c-500); line-height: 1.6; margin-bottom: 20px; }
.rt-confirm-msg strong { color: var(--c-800); }
.rt-confirm-btns { display: flex; gap: 8px; }
.rt-confirm-cancel, .rt-confirm-del {
  flex: 1; padding: 10px; border-radius: var(--r-sm); font-size: var(--text-base);
  font-weight: var(--font-bold); cursor: pointer; border: none; font-family: inherit;
  transition: all .15s;
}
.rt-confirm-cancel { background: var(--c-100); color: var(--c-500); }
.rt-confirm-cancel:hover { background: var(--c-200); }
.rt-confirm-del { background: var(--error); color: var(--app-surface); }
.rt-confirm-del:hover { background: var(--error-deep); }

[data-theme="dark"] .rt-confirm { background: var(--c-800); }
[data-theme="dark"] .rt-confirm-title { color: var(--c-100); }
[data-theme="dark"] .rt-confirm-msg { color: var(--c-400); }
[data-theme="dark"] .rt-confirm-msg strong { color: var(--c-100); }
[data-theme="dark"] .rt-confirm-cancel { background: var(--c-700); color: var(--c-400); }

/* ═══════════════════════════════════════════════════════════════
   모바일 반응형 보완 (480px 이하)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .rt-header { padding: 12px 14px; gap: 8px; }
  .rt-hd-title { font-size: var(--text-md); }

  /* 기간/유형 탭 - 스크롤 가능하게 */
  .rt-range-tabs, .rt-type-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .rt-range-tab, .rt-type-tab { flex-shrink: 0; }

  /* 테이블 스크롤 */
  .rt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rt-table { min-width: 560px; }

  /* 내보내기 버튼 텍스트 숨김 */
  .rt-btn-export span { display: none; }
}
/* ============================================================================
   SALES ANALYTICS – ENTERPRISE (9 Tabs + Export)
   ============================================================================ */

.sa { display: flex; flex-direction: column; height: 100%; overflow: auto; padding: 0 28px; }
.sa > * { flex-shrink: 0; }

/* ── Header ── */
.sa-header { background: var(--page-hd-bg); border: 1px solid var(--page-hd-border); border-radius: var(--page-hd-radius); box-shadow: var(--page-hd-shadow); margin-bottom: var(--page-hd-mb); overflow: hidden; }
.sa-hd-row1 { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-100); }
.sa-hd-icon { color: var(--primary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sa-hd-titles { flex: 1; min-width: 0; }
.sa-title { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-900); letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.sa-sub { font-size: var(--text-xs); color: var(--c-400); font-weight: var(--font-semibold); display: block; margin-top: 2px; }
.sa-header-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Date Controls ── */
.sa-date-controls { display: flex; align-items: center; gap: var(--toolbar-gap); margin-bottom: var(--page-hd-mb); padding: var(--toolbar-pad); background: var(--toolbar-bg); border: 1px solid var(--toolbar-border); border-radius: var(--toolbar-r); flex-wrap: wrap; }
.sa-date-range { display: flex; align-items: center; gap: 8px; }
.sa-dr-field { display: flex; flex-direction: column; gap: 3px; }
.sa-dr-field > span { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); text-transform: uppercase; letter-spacing: .04em; }
.sa-dr-wrap {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--c-150); background: var(--c-50);
  cursor: pointer; transition: all .15s; user-select: none;
}
.sa-dr-wrap:hover { border-color: var(--primary); background: var(--c-50); }
.sa-dr-icon { color: var(--c-400); flex-shrink: 0; }
.sa-dr-wrap:hover .sa-dr-icon { color: var(--primary); }
.sa-dp-val { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-800); min-width: 110px; }
.sa-dr-sep { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-300); padding: 16px 2px 0; }
.sa-quick-btns { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.sa-qbtn {
  padding: 8px 14px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: var(--font-bold);
  color: var(--c-500); background: var(--c-100); border: 1px solid var(--c-150);
  cursor: pointer; transition: all .12s ease; font-family: inherit; white-space: nowrap;
}
.sa-qbtn:hover { color: var(--primary); background: var(--primary-soft); border-color: var(--app-cta-ring); }
.sa-qbtn.on { color: var(--app-surface); background: var(--primary); border-color: var(--primary); font-weight: var(--font-bold); }

/* ── 사업자 유형 토글 ── */
.sa-taxtype-seg { display: flex; border: 1px solid var(--toolbar-border); border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.sa-taxtype-seg button { padding: 5px 11px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.sa-taxtype-seg button:hover { background: var(--primary-soft); color: var(--primary); }
.sa-taxtype-seg button.on { background: var(--primary); color: #fff; font-weight: 600; }
[data-theme="dark"] .sa-taxtype-seg { border-color: var(--border-color); }
[data-theme="dark"] .sa-taxtype-seg button.on { background: var(--primary); }

/* ── Custom Date Picker (발주서 출력 달력과 동일) ── */
.sa-dp { position: relative; }
.sa-dp-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000;
  background: var(--app-surface); border-radius: var(--r-xl);
  border: 1px solid var(--c-200);
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.05);
  width: 320px; padding: 20px;
  animation: sa-dp-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sa-dp-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.sa-dp-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.sa-dp-title {
  font-weight: var(--font-bold); font-size: var(--text-lg); color: var(--c-800);
  background: none; border: none; cursor: pointer;
  padding: 4px 12px; border-radius: var(--r-sm);
  transition: all 0.15s;
}
.sa-dp-title:hover { background: var(--c-100); color: var(--primary); }
.sa-dp-nav {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-200); background: var(--app-surface);
  cursor: pointer; color: var(--c-500); transition: all 0.15s;
}
.sa-dp-nav:hover { background: var(--c-50); color: var(--primary); border-color: var(--c-300); }

.sa-dp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px; text-align: center;
}
.sa-dp-weekday { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-400); }

.sa-dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 16px;
}
.sa-dp-day {
  height: 36px; border-radius: var(--r-sm); border: none;
  background: transparent; font-size: var(--text-base); font-weight: var(--font-medium);
  color: var(--c-800); cursor: pointer; transition: all 0.1s;
}
.sa-dp-day:not(.sel):hover { background: var(--c-100); }
.sa-dp-day.out { color: var(--c-300); }
.sa-dp-day.today { font-weight: var(--font-bold); color: var(--primary); background: var(--primary-soft); }
.sa-dp-day.sel {
  background: var(--primary) !important; color: white !important;
  font-weight: var(--font-bold); box-shadow: 0 4px 10px var(--primary-a40);
}
.sa-dp-day.sel:hover { background: var(--primary-deep) !important; }

.sa-dp-foot { display: flex; gap: 8px; }
.sa-dp-foot-btn {
  flex: 1; height: 36px; border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer;
  border: none; background: var(--c-50); color: var(--c-500);
  transition: all 0.1s;
}
.sa-dp-foot-btn:hover { background: var(--c-200); color: var(--c-800); }
.sa-dp-foot-btn.ghost { background: transparent; }
.sa-dp-foot-btn.reset { background: var(--warning-bg); color: var(--warning-deep); }
.sa-dp-foot-btn.reset:hover { background: var(--warning-bg); color: var(--warning-text); }

/* ── Month / Year Grid (발주서 달력 스타일 확장) ── */
.sa-dp-mgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 8px 0 16px;
}
.sa-dp-mcell {
  height: 42px; border-radius: var(--r-sm); border: none;
  background: var(--c-50); color: var(--c-600); font-size: var(--text-md); font-weight: var(--font-semibold);
  cursor: pointer; transition: all 0.12s;
}
.sa-dp-mcell:hover { background: var(--primary-soft); color: var(--primary); }
.sa-dp-mcell.sel {
  background: var(--primary); color: white;
  box-shadow: 0 4px 10px var(--primary-a40);
}
.sa-dp-mcell.today:not(.sel) {
  font-weight: var(--font-bold); color: var(--primary);
  background: var(--primary-soft);
}
.sa-dp-mcell.out { color: var(--c-300); }

/* ═══════════════════════════════════════════════════════════════
   Fee Rate Editor (수수료율 설정)
   ═══════════════════════════════════════════════════════════════ */

.sa-fr {
  margin-top: 24px;
  background: var(--app-surface); border: 1px solid var(--c-200); border-radius: var(--r-lg);
  overflow: hidden;
}
.sa-fr-header {
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--c-100);
}
.sa-fr-header-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--primary-soft); border: 1px solid #e9d5ff;
  display: flex; align-items: center; justify-content: center;
  color: #9333ea; flex-shrink: 0;
}
.sa-fr-header-title { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-900); }
.sa-fr-header-desc { font-size: 11.5px; color: var(--c-400); margin-top: 1px; }

.sa-fr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; padding: 16px 20px;
}
.sa-fr-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: var(--c-50); border-radius: var(--r-sm);
  border: 1px solid var(--c-200);
}
.sa-fr-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-700); }
.sa-fr-input-wrap {
  display: flex; align-items: center; gap: 3px;
}
.sa-fr-input {
  width: 60px; height: 30px; border-radius: var(--r-xs);
  border: 1px solid var(--c-300); text-align: right;
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-800);
  padding: 0 6px; outline: none;
}
.sa-fr-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }
.sa-fr-unit { font-size: var(--text-sm); color: var(--c-400); font-weight: var(--font-semibold); }

.sa-fr-actions {
  padding: 12px 20px; border-top: 1px solid var(--c-100);
  display: flex; justify-content: flex-end;
}
.sa-fr-save {
  height: 34px; padding: 0 16px; border-radius: var(--r-sm);
  background: var(--primary); border: none; color: var(--app-surface);
  font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: all 0.15s;
}
.sa-fr-save:hover { background: var(--primary-deep); }

/* ── Daily Summary Strip ── */
.sa-ds {
  display: flex; align-items: stretch; gap: 0;
  padding: 0; margin-bottom: 14px;
  background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-lg);
  overflow: hidden;
}
.sa-ds-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px; min-width: 0; flex: 1; position: relative;
  justify-content: center;
}
.sa-ds-item + .sa-ds-sep + .sa-ds-item { border-left: 1px solid var(--c-100); }
.sa-ds-item.main { background: var(--c-50); }
.sa-ds-item.accent {
  background: linear-gradient(135deg, var(--primary-soft) 0%, #e8ecff 100%);
  border-left: 3px solid var(--primary);
}
.sa-ds-item.result {
  padding: 14px 20px; flex: 1.2;
}
.sa-ds-item.result.plus { background: linear-gradient(135deg, var(--success-bg) 0%, var(--success-bg) 100%); border-left: 3px solid var(--success-deep); }
.sa-ds-item.result.minus { background: linear-gradient(135deg, var(--error-bg) 0%, var(--error-bg) 100%); border-left: 3px solid var(--error-deep); }

.sa-ds-lb {
  font-size: 10.5px; font-weight: var(--font-bold); color: var(--c-400);
  letter-spacing: .02em; white-space: nowrap;
}
.sa-ds-item.accent .sa-ds-lb { color: var(--primary); }
.sa-ds-item.result.plus .sa-ds-lb { color: var(--success-deep); }
.sa-ds-item.result.minus .sa-ds-lb { color: var(--error-deep); }

.sa-ds-val {
  font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-800);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  line-height: 1.3;
}
.sa-ds-val.dim { color: var(--c-400); font-weight: var(--font-semibold); font-size: var(--text-md); }
.sa-ds-item.accent .sa-ds-val { color: var(--app-cta-hover); font-size: var(--text-lg); }
.sa-ds-item.result .sa-ds-val { font-size: var(--text-xl); }
.sa-ds-item.result.plus .sa-ds-val { color: var(--success-deep); }
.sa-ds-item.result.minus .sa-ds-val { color: var(--error-deep); }

.sa-ds-sub { font-size: var(--text-xs); font-weight: var(--font-semibold); margin-top: 2px; white-space: nowrap; }
.sa-ds-item.result.plus .sa-ds-sub { color: var(--success); }
.sa-ds-item.result.minus .sa-ds-sub { color: var(--error); }

.sa-ds-sep {
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; color: var(--c-300); flex-shrink: 0;
  font-size: var(--text-base); font-weight: var(--font-bold);
}

/* ── View Toggle ── */
.sa-view-toggle { display: flex; align-items: center; gap: 4px; }
.sa-vt {
  display: flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-400); background: transparent;
  border: 1px solid transparent; cursor: pointer; transition: all .12s; font-family: inherit;
}
.sa-vt:hover { color: var(--c-600); background: var(--c-50); }
.sa-vt.on { color: var(--primary); background: var(--primary-soft); border-color: var(--primary-glow); }

/* ── Soft Table (Table View) ── */
.sa-tbl-soft { font-size: 12.5px; }
.sa-tbl-soft th { padding: 8px 10px; font-size: 10.5px; background: var(--c-50); border-bottom: 2px solid var(--c-150); }
.sa-tbl-soft td { padding: 7px 10px; }
.sa-tbl-soft tbody tr:nth-child(even) { background: var(--c-50); }
.sa-tbl-soft tbody tr:hover { background: var(--c-50); }
.sa-tbl-soft .tabnum { font-variant-numeric: tabular-nums; font-weight: var(--font-semibold); color: var(--c-700); font-size: 12.5px; }
.sa-tbl-soft .tabnum.muted { color: #b0b8c5; font-weight: var(--font-medium); }
.sa-tbl-soft .tabnum.key { font-weight: var(--font-extrabold); color: var(--c-800); }
.sa-tbl-soft .tabnum.key.plus { color: var(--success-deep); }
.sa-tbl-soft .tabnum.key.minus-t { color: var(--error-deep); }
.sa-tbl-soft .td-freeze { position: sticky; left: 0; z-index: 1; background: var(--app-surface); border-right: 2px solid var(--c-100); min-width: 80px; }
.sa-tbl-soft tbody tr:nth-child(even) .td-freeze { background: var(--c-50); }
.sa-tbl-soft tbody tr:hover .td-freeze { background: var(--c-50); }
.sa-tbl-soft tfoot .td-freeze { background: var(--c-50); }

/* ── Alerts ── */
.sa-alert { display: none; }
.sa-alert.ok, .sa-alert.bad, .sa-alert.warn { display: none; }

/* ── Tabs ── */
.sa-tabs { display: flex; gap: 2px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; }
.sa-tabs::-webkit-scrollbar { display: none; }
.sa-tab { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500); background: transparent; border: none; cursor: pointer; transition: all .12s ease; font-family: inherit; white-space: nowrap; }
.sa-tab:hover { color: var(--c-700); background: var(--c-50); }
.sa-tab.on { color: var(--primary-deep); background: var(--primary-soft); font-weight: var(--font-bold); }

/* ═══════════════════════════════════════════════════════════════
   OVERVIEW TAB – Modern Dashboard
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ov-hero {
  position: relative;
  border-radius: var(--r-lg);
  padding: 24px 24px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--app-cta-hover) 0%, var(--primary) 50%, var(--primary) 100%);
  overflow: hidden;
  color: #ffffff;
  flex-shrink: 0;
}
.ov-hero-inner { position: relative; z-index: 1; text-align: center; }
.ov-hero-label { font-size: var(--text-sm); font-weight: var(--font-bold); letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.ov-hero-amount { font-size: 32px; font-weight: var(--font-black); letter-spacing: -1px; line-height: 1.1; color: #ffffff !important; }
.ov-hero-unit { font-size: var(--text-lg); font-weight: var(--font-bold); opacity: .6; margin-left: 2px; }
.ov-hero-sub { font-size: var(--text-sm); color: rgba(255,255,255,.55); margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ov-hero-ch { font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 8px; border-radius: var(--r-xl); }
.ov-hero-ch.up { background: rgba(255,255,255,.18); color: var(--success-bg); }
.ov-hero-ch.down { background: rgba(255,255,255,.18); color: var(--error-bg); }
.ov-hero-glow {
  position: absolute; top: -40%; right: -10%; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}

/* ── KPI Grid ── */
.ov-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.ov-kpi {
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.ov-kpi:hover { box-shadow: 0 6px 20px rgba(0,0,0,.05); transform: translateY(-1px); }
.ov-kpi-top { display: flex; align-items: center; gap: 8px; }
.ov-kpi-icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ov-kpi-icon--margin { background: var(--success-bg); color: var(--success); }
.ov-kpi-icon--ad { background: var(--warning-bg); color: var(--warning); }
.ov-kpi-icon--tax { background: var(--error-bg); color: var(--error); }
.ov-kpi-icon--qty { background: var(--info-bg); color: #0ea5e9; }
.ov-kpi-icon--settled { background: var(--primary-soft); color: var(--primary); }
.ov-kpi-icon--revenue { background: var(--warning-bg); color: #ea580c; }
.ov-kpi-icon--supply { background: var(--primary-soft); color: #9333ea; }
.ov-kpi-lb { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); }
.ov-kpi-val { font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--c-900); letter-spacing: -.02em; line-height: 1.1; }
.ov-kpi-sub { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.ov-kpi-sub.good { color: var(--success-deep); }
.ov-kpi-sub.warn { color: var(--warning-deep); }
.ov-kpi-sub.bad { color: var(--error-deep); }

/* ── Split Layout ── */
.ov-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* ── Panel (reusable card) ── */
.ov-panel {
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 0;
}
.ov-panel--wide { margin-bottom: 14px; }
.ov-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ov-panel-t { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); margin: 0; }
.ov-panel-badge { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); background: var(--c-100); padding: 3px 8px; border-radius: var(--r-xs); }
.ov-chip { font-size: var(--text-xs); font-weight: var(--font-bold); padding: 3px 10px; border-radius: var(--r-xl); }
.ov-chip.up { background: var(--success-bg); color: var(--success-deep); }
.ov-chip.down { background: var(--error-bg); color: var(--error-deep); }

/* ── Compare Bars ── */
.ov-cmp-bars { display: flex; flex-direction: column; gap: 12px; }
.ov-cmp-row { display: flex; align-items: center; gap: 12px; }
.ov-cmp-meta { width: 82px; flex-shrink: 0; }
.ov-cmp-period { display: block; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-700); }
.ov-cmp-dates { font-size: var(--text-xs); color: var(--c-400); }
.ov-cmp-bar-wrap { flex: 1; height: 30px; background: var(--c-100); border-radius: var(--r-sm); overflow: hidden; }
.ov-cmp-bar { height: 100%; border-radius: var(--r-sm); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); min-width: 4px; }
.ov-cmp-bar.prev { background: linear-gradient(90deg, var(--c-200), var(--c-400)); }
.ov-cmp-bar.curr { background: linear-gradient(90deg, var(--primary), var(--primary)); }
.ov-cmp-val { width: 76px; text-align: right; font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); flex-shrink: 0; }

/* ── Stats (Insights) ── */
.ov-stats { display: flex; flex-direction: column; gap: 10px; }
.ov-stat { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-50); transition: background .1s; }
.ov-stat:hover { background: var(--c-100); }
.ov-stat-dot { width: 8px; height: 8px; border-radius: var(--r-xs); flex-shrink: 0; margin-top: 5px; }
.ov-stat-dot.avg { background: var(--primary); }
.ov-stat-dot.margin { background: var(--success); }
.ov-stat-dot.best { background: var(--warning); }
.ov-stat-dot.worst { background: var(--error); }
.ov-stat-body { flex: 1; min-width: 0; }
.ov-stat-lb { display: block; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); margin-bottom: 2px; }
.ov-stat-val { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800); display: flex; align-items: baseline; gap: 6px; }
.ov-stat-extra { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500); }

/* ── Cost Breakdown ── */
.ov-cost-layout { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start; }
.ov-cost-main { min-width: 0; }
.ov-cost-bar { display: flex; height: 10px; border-radius: var(--r-full); overflow: hidden; margin-bottom: 16px; gap: 2px; }
.ov-cost-seg { height: 100%; border-radius: var(--r-full); transition: width .5s ease; }
.ov-cost-items { display: flex; flex-direction: column; gap: 8px; }
.ov-cost-item { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); }
.ov-cost-dot { width: 8px; height: 8px; border-radius: var(--r-xs); flex-shrink: 0; }
.ov-cost-lb { font-weight: var(--font-semibold); color: var(--c-500); flex: 1; }
.ov-cost-v { font-weight: var(--font-bold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.ov-cost-pct { font-weight: var(--font-bold); color: var(--c-400); font-size: var(--text-sm); width: 44px; text-align: right; }
.ov-cost-summary { background: var(--c-50); border-radius: var(--r-md); padding: 16px; }
.ov-cs-row { display: flex; justify-content: space-between; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-500); padding: 5px 0; }
.ov-cs-row.total { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); }
.ov-cs-val { font-weight: var(--font-bold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.ov-cs-val.minus { color: var(--error); }
.ov-cs-val.plus { color: var(--success-deep); }
.ov-cs-divider { height: 1px; background: var(--c-200); margin: 6px 0; }

/* ── Legacy KPI Strip (removed – replaced by ov-* classes) ── */

/* Change arrow */
.sa-ch { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); font-weight: var(--font-bold); }
.sa-ch.up { color: var(--success-deep); } .sa-ch.dn { color: var(--error-deep); } .sa-ch.fl { color: var(--c-400); }

/* ── (old compare/insights removed – replaced by ov-* classes) ── */

/* ── Cards ── */
.sa-card { background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-lg); padding: 20px; margin-bottom: 14px; }
.sa-card-table { padding: 20px 0; }
.sa-card-table .sa-card-h { padding: 0 20px; }
.sa-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sa-tab-export-btn {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 4px 10px;
  border-radius: var(--r-xs); border: 1px solid var(--c-200);
  background: var(--app-surface); color: var(--c-500); cursor: pointer;
  transition: all .12s; font-family: inherit;
}
.sa-tab-export-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.sa-tab-export-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sa-card-t { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); margin: 0; display: flex; align-items: center; gap: 6px; }
.sa-card-badge { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); background: var(--c-100); padding: 3px 8px; border-radius: var(--r-xs); }
.sa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sa-grid-2 > .sa-card { margin-bottom: 0; }
.sa-empty { padding: 40px 0; text-align: center; color: var(--c-300); font-size: var(--text-base); font-weight: var(--font-semibold); }

/* ── Chart ── */
.sa-chart-wrap { position: relative; width: 100%; }
.sa-cl { font-size: var(--text-xs); font-weight: var(--font-semibold); fill: #b8c0cc; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; }
.sa-tt { position: absolute; z-index: 10; background: var(--app-surface); border: 1px solid var(--c-150); border-radius: var(--r-sm); padding: 8px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.06); pointer-events: none; min-width: 155px; }
.sa-tt-date { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); margin-bottom: 4px; }
.sa-tt-r { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-600); line-height: 1.8; }
.sa-tt-d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sa-tt-v { margin-left: auto; font-weight: var(--font-extrabold); color: var(--c-800); }
.sa-legend { display: flex; gap: 16px; padding: 8px 0 0 54px; }
.sa-lg { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.sa-ll { width: 14px; height: 3px; border-radius: var(--r-full); }

/* ── (old sa-cost overview removed – replaced by ov-cost-* classes) ── */


/* ══════════════════════════════════════════════════════════════════
   TABLE – Base
   ══════════════════════════════════════════════════════════════════ */

.sa-table-scroll { overflow-x: auto; scrollbar-width: thin; }
.sa-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.sa-tbl th, .sa-tbl td { padding: 9px 12px; text-align: left; white-space: nowrap; }
.sa-tbl th {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--c-150); background: var(--c-50); position: sticky; top: 0; z-index: 2; user-select: none;
}
.sa-tbl th:first-child { padding-left: 20px; } .sa-tbl td:first-child { padding-left: 20px; }
.sa-tbl th:last-child { padding-right: 20px; } .sa-tbl td:last-child { padding-right: 20px; }
.sa-tbl tbody tr { border-bottom: 1px solid var(--c-100); transition: background .08s; }
.sa-tbl tbody tr:hover { background: var(--c-50); }
.sa-tbl tbody tr.best { background: rgba(16,185,129,.04); }
.sa-tbl tbody tr.worst { background: rgba(239,68,68,.03); }
.sa-tbl tbody tr.warn-row { background: rgba(245,158,11,.03); }
.sa-tbl tbody tr.active-bracket { background: var(--primary-soft); }
.sa-tbl tfoot td { padding: 12px; border-top: 2px solid var(--c-150); font-weight: var(--font-semibold); color: var(--c-600); background: var(--c-50); }
.sa-tbl .r { text-align: right; }
.sa-tbl .mono { font-variant-numeric: tabular-nums; font-weight: var(--font-semibold); color: var(--c-700); }
.sa-tbl .dim { color: var(--c-400); font-weight: var(--font-medium); }
.sa-tbl .plus { color: var(--success-deep); } .sa-tbl .minus-t { color: var(--error-deep); }
.sa-tbl-compact th, .sa-tbl-compact td { padding: 8px 14px; }

.sa-th-in { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.sa-si { color: var(--primary); flex-shrink: 0; } .sa-si.dim { color: var(--c-300); }

.sa-date-m { font-weight: var(--font-bold); color: var(--c-800); }
.sa-date-d { font-size: var(--text-xs); color: var(--c-400); margin-left: 4px; font-weight: var(--font-semibold); }
.sa-dtag { font-size: var(--text-xs); font-weight: var(--font-extrabold); padding: 1px 5px; border-radius: var(--r-xs); margin-left: 6px; }
.sa-dtag.best { background: var(--success-bg); color: var(--success-deep); }
.sa-dtag.worst { background: var(--error-bg); color: var(--error-deep); }
.sa-dtag.warn { background: var(--warning-bg); color: var(--warning-deep); }


/* ══════════════════════════════════════════════════════════════════
   DAILY LIST – Expandable Rows
   ══════════════════════════════════════════════════════════════════ */

.sa-daily-list { display: flex; flex-direction: column; }

/* Header */
.sa-dl-head {
  display: grid; grid-template-columns: 100px repeat(5, 1fr) 50px 72px;
  padding: 10px 16px; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--c-150); user-select: none;
}
.sa-dl-head .sa-dl-c { cursor: pointer; display: flex; align-items: center; gap: 3px; }
.sa-dl-head .sa-dl-c.sale, .sa-dl-head .sa-dl-c.rev, .sa-dl-head .sa-dl-c.cost, .sa-dl-head .sa-dl-c.margin, .sa-dl-head .sa-dl-c.rate, .sa-dl-head .sa-dl-c.qty { justify-content: flex-end; }

/* Row */
.sa-dl-row { border-bottom: 1px solid var(--c-100); transition: background .1s; }
.sa-dl-row:nth-child(even) { background: var(--c-50); }
.sa-dl-row:hover { background: var(--c-50); }
.sa-dl-row.open { background: var(--app-surface); box-shadow: 0 2px 12px var(--primary-a06); border-radius: var(--r-md); margin: 4px 0; border: 1px solid #e8ebf4; }
.sa-dl-row.best { border-left: 3px solid var(--success); }
.sa-dl-row.worst { border-left: 3px solid var(--error); }
.sa-dl-row.warn { border-left: 3px solid var(--warning); }

/* Summary (always visible) */
.sa-dl-summary {
  display: grid; grid-template-columns: 100px repeat(5, 1fr) 50px 72px 20px;
  padding: 7px 16px; gap: 6px; align-items: center;
  cursor: pointer; transition: background .08s; font-size: var(--text-base);
}
.sa-dl-summary:hover { background: var(--primary-a02); }
.sa-dl-c.sale, .sa-dl-c.rev, .sa-dl-c.cost, .sa-dl-c.margin, .sa-dl-c.rate, .sa-dl-c.qty { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--font-bold); color: var(--c-800); }
.sa-dl-c.cost { color: var(--c-500); }
.sa-dl-c.margin.c-plus { color: var(--success-deep); } .sa-dl-c.margin.c-minus { color: var(--error-deep); }
.sa-dl-c.rate.c-plus { color: var(--success-deep); } .sa-dl-c.rate.c-minus { color: var(--error-deep); }
.sa-dl-c.spark { display: flex; justify-content: flex-end; }

.sa-dl-date { font-weight: var(--font-bold); color: var(--c-800); font-size: var(--text-md); }
.sa-dl-day { font-size: var(--text-xs); color: var(--c-400); margin-left: 6px; font-weight: var(--font-semibold); }
.sa-dl-arrow { color: var(--c-300); transition: transform .2s ease; flex-shrink: 0; }
.sa-dl-arrow.open { transform: rotate(180deg); color: var(--primary); }

/* Total row */
.sa-dl-total { background: var(--c-50); border-top: 2px solid var(--c-150); border-bottom: none; }
.sa-dl-total .sa-dl-summary { cursor: default; }
.sa-dl-total .sa-dl-summary:hover { background: transparent; }

/* ── Expanded Detail ── */
.sa-dl-detail { padding: 0 16px 16px; animation: sa-slide-in .2s ease; }
@keyframes sa-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Flow: 판매가 → 수수료 → 정산가 */
.sa-dl-flow {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary-soft), var(--primary-soft)); border-radius: var(--r-md);
  margin-bottom: 12px; flex-wrap: wrap;
}
.sa-dl-flow-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 14px;
  background: rgba(255,255,255,.7); border-radius: var(--r-sm); min-width: 100px;
}
.sa-dl-flow-item.accent { background: rgba(239,68,68,.06); }
.sa-dl-flow-item.result { background: var(--primary-a08); }
.sa-dl-fl { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.sa-dl-fv { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.sa-dl-flow-item.accent .sa-dl-fv { color: var(--error-deep); }
.sa-dl-flow-item.result .sa-dl-fv { color: var(--app-cta-hover); }
.sa-dl-flow-arrow { font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--c-300); flex-shrink: 0; }

/* Cost grid */
.sa-dl-costs { margin-bottom: 12px; }
.sa-dl-costs-title { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.sa-dl-cost-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sa-dl-cost-item {
  padding: 10px 12px; background: var(--c-50); border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.sa-dl-cl { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.sa-dl-cv { font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.sa-dl-cost-bar { height: 3px; background: var(--c-150); border-radius: var(--r-full); overflow: hidden; }
.sa-dl-cost-bar > div { height: 100%; background: linear-gradient(90deg, var(--c-300), var(--primary)); border-radius: var(--r-full); transition: width .4s ease; }

/* Result strip */
.sa-dl-result-strip {
  display: flex; gap: 12px; padding: 12px 16px; background: var(--c-50); border-radius: var(--r-sm);
}
.sa-dl-rs { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500); }
.sa-dl-rs.final { border-left: 2px solid var(--c-200); padding-left: 12px; }
.sa-dl-rv { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.sa-dl-rv.dim { color: var(--c-400); }
.sa-dl-rv.c-plus { color: var(--success-deep); } .sa-dl-rv.c-minus { color: var(--error-deep); }


/* ══════════════════════════════════════════════════════════════════
   PLATFORM
   ══════════════════════════════════════════════════════════════════ */

.sa-plat-list { display: flex; flex-direction: column; gap: 6px; }
.sa-plat-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--c-100); transition: all .12s; }
.sa-plat-row:hover { border-color: var(--c-200); box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.sa-plat-rank { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--text-base); font-weight: var(--font-extrabold); flex-shrink: 0; }
.sa-plat-info { flex: 1; min-width: 0; }
.sa-plat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sa-plat-name { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); }
.sa-plat-rev { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.sa-plat-bar-track { height: 6px; background: var(--c-100); border-radius: var(--r-full); overflow: hidden; margin-bottom: 8px; }
.sa-plat-bar-fill { height: 100%; border-radius: var(--r-full); transition: width .5s cubic-bezier(.16,1,.3,1); background: linear-gradient(90deg, var(--primary), var(--primary)); }
.sa-plat-meta { display: flex; gap: 14px; font-size: var(--text-sm); color: var(--c-400); font-weight: var(--font-medium); flex-wrap: wrap; }
.sa-plat-meta strong { font-weight: var(--font-bold); color: var(--c-600); }
.c-plus { color: var(--success-deep); } .c-minus { color: var(--error-deep); }


/* ══════════════════════════════════════════════════════════════════
   PRODUCT / SUPPLIER
   ══════════════════════════════════════════════════════════════════ */

.sa-prod-rank { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--c-100); color: var(--c-400); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-extrabold); }
.sa-prod-rank.gold   { background: linear-gradient(135deg,var(--warning-bg),var(--warning-bg)); color: #b45309; }
.sa-prod-rank.silver { background: linear-gradient(135deg,var(--c-100),var(--c-200)); color: var(--c-600); }
.sa-prod-rank.bronze { background: linear-gradient(135deg,#fed7aa,#fdba74); color: #9a3412; }
.sa-prod-name { font-weight: var(--font-bold); color: var(--c-800); }
.sa-prod-code { font-size: var(--text-sm); color: var(--c-400); font-weight: var(--font-semibold); }
.sa-prod-bar-track { height: 4px; background: var(--c-100); border-radius: var(--r-full); overflow: hidden; }
.sa-prod-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary)); border-radius: var(--r-full); transition: width .4s cubic-bezier(.16,1,.3,1); }


/* ══════════════════════════════════════════════════════════════════
   COST INPUT
   ══════════════════════════════════════════════════════════════════ */

.sa-cost-input-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; max-height: 480px; overflow-y: auto; }
.sa-cost-input-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--c-50); border-radius: var(--r-sm); transition: background .12s; }
.sa-cost-input-row:hover { background: var(--c-100); }
.sa-cost-input-row.weekend { background: var(--primary-soft); }
.sa-cost-input-row.weekend:hover { background: #f3ebff; }
.sa-cir-date { display: flex; align-items: center; gap: 6px; width: 85px; flex-shrink: 0; }
.sa-cir-date-md { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-700); font-variant-numeric: tabular-nums; }
.sa-cir-date-day { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); }
.sa-cir-date-day.weekend { color: #a78bfa; }
.sa-cir-input { flex: 1; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--c-150); padding: 0 10px; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-800); font-family: inherit; font-variant-numeric: tabular-nums; text-align: right; transition: border-color .12s; }
.sa-cir-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a06); }
.sa-cir-unit { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-400); flex-shrink: 0; }
.sa-cir-saved { font-size: var(--text-xs); color: var(--success); flex-shrink: 0; }

/* Cost toolbar */
.sa-cost-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sa-cost-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.sa-cost-preset-btn {
  padding: 5px 12px; border-radius: var(--r-sm); border: 1px solid var(--c-150); background: var(--app-surface);
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500); cursor: pointer; font-family: inherit;
  transition: all .12s;
}
.sa-cost-preset-btn:hover { border-color: var(--c-300); color: var(--primary); background: var(--primary-soft); }
.sa-cost-nav {
  display: flex; align-items: center; gap: 6px;
}
.sa-cost-nav-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--c-150); background: var(--app-surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-500);
  transition: all .12s;
}
.sa-cost-nav-btn:hover { border-color: var(--c-300); color: var(--primary); }
.sa-cost-date-input {
  height: 32px; border-radius: var(--r-sm); border: 1px solid var(--c-150); padding: 0 10px;
  font-size: 12.5px; font-weight: var(--font-semibold); color: var(--c-700); font-family: inherit;
  transition: border-color .12s;
}
.sa-cost-date-input:focus { outline: none; border-color: var(--primary); }
.sa-cost-tilde { font-size: var(--text-base); color: var(--c-400); font-weight: var(--font-semibold); }

/* Cost footer */
.sa-cost-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.sa-cost-total { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-800); display: flex; align-items: center; gap: 8px; }
.sa-cost-count { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--c-400); }
.sa-cost-actions { display: flex; align-items: center; gap: 10px; }
.sa-cost-unsaved { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--warning); animation: sa-blink 1.5s ease infinite; }
@keyframes sa-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.sa-cost-loading { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 40px 0; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-400); }
.sa-spin { animation: sa-spin-anim 1s linear infinite; }
@keyframes sa-spin-anim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.sa-card-cost .sa-sbtn { display: inline-flex; align-items: center; gap: 6px; }
.sa-card-cost .sa-sbtn.loading { opacity: 0.7; pointer-events: none; }

.sa-return-set { padding: 16px; background: var(--c-50); border-radius: var(--r-md); }
.sa-return-preview { margin-top: 12px; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-600); }

.sa-desc { font-size: var(--text-sm); color: var(--c-400); font-weight: var(--font-medium); margin: 0 0 14px; }
.sa-upload { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--c-200); border-radius: var(--r-md); color: var(--c-400); font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer; transition: all .15s; }
.sa-upload:hover { border-color: var(--primary); background: var(--c-50); color: var(--primary); }
.sa-upload-hint { font-size: var(--text-xs); font-weight: var(--font-medium); opacity: .6; }
.sa-upload-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sa-f { display: flex; flex-direction: column; gap: 4px; }
.sa-f > span { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); }
.sa-f input, .sa-f select { height: 36px; border-radius: var(--r-sm); border: 1px solid var(--c-150); padding: 0 10px; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-800); background: var(--app-surface); font-family: inherit; transition: border-color .12s; }
.sa-f input:focus, .sa-f select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a06); }

.sa-sbtn { width: 100%; height: 38px; margin-top: 10px; border-radius: var(--r-sm); border: 1px solid var(--c-150); background: var(--app-surface); font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-600); cursor: pointer; transition: all .12s; font-family: inherit; }
.sa-sbtn:hover { background: var(--primary-soft); border-color: var(--app-cta-ring); color: var(--primary); }


/* ══════════════════════════════════════════════════════════════════
   MONTHLY COMPARE
   ══════════════════════════════════════════════════════════════════ */

.sa-monthly-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sa-monthly-card { background: var(--c-50); border: 1px solid var(--c-150); border-radius: var(--r-md); padding: 18px; transition: box-shadow .15s; }
.sa-monthly-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.sa-mc-month { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-150); }
.sa-mc-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-500); padding: 4px 0; gap: 8px; }
.sa-mc-row.dim { color: var(--c-400); }
.sa-mc-val { font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.sa-mc-val.plus { color: var(--success-deep); } .sa-mc-val.minus { color: var(--error-deep); }


/* ══════════════════════════════════════════════════════════════════
   TAX SIMULATION
   ══════════════════════════════════════════════════════════════════ */

.sa-tax-preview { display: flex; flex-direction: column; gap: 12px; }
.sa-tax-big { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--c-50); border-radius: var(--r-md); }
.sa-tax-lb { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-500); }
.sa-tax-val { font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; }
.sa-tax-val.minus { color: var(--error-deep); }


/* ══════════════════════════════════════════════════════════════════
   EXPORT
   ══════════════════════════════════════════════════════════════════ */

.sa-export-content { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.sa-export-preview { text-align: center; margin-bottom: 24px; }
.sa-ep-icon { width: 80px; height: 80px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--success-bg), var(--success-bg)); color: var(--success-deep); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.sa-export-preview h4 { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-800); margin: 0 0 4px; }
.sa-export-preview p { font-size: var(--text-base); color: var(--c-400); font-weight: var(--font-medium); margin: 0 0 16px; }
.sa-ep-includes { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.sa-ep-includes span { font-size: 12.5px; font-weight: var(--font-semibold); color: var(--c-600); padding: 6px 12px; background: var(--c-50); border-radius: var(--r-sm); }

.sa-export-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 40px; border-radius: var(--r-md); font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--app-surface); background: linear-gradient(135deg, var(--success-deep), var(--success)); border: none; cursor: pointer; transition: all .15s; font-family: inherit; box-shadow: 0 4px 12px rgba(5,150,105,.25); }
.sa-export-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5,150,105,.35); }
.sa-export-btn:active { transform: translateY(0); }
.sa-export-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; box-shadow: none; }
.sa-export-btn-month { background: linear-gradient(135deg, var(--primary-deep, #4338ca), var(--primary)); box-shadow: 0 4px 12px rgba(99,102,241,.25); padding: 12px 32px; font-size: var(--text-base); }
.sa-export-btn-month:hover { box-shadow: 0 6px 20px rgba(99,102,241,.35); }

.sa-export-divider { width: 100%; border: none; border-top: 1px solid var(--c-150); margin: 28px 0 24px; }

.sa-monthly-export { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.sa-me-header { display: flex; align-items: center; gap: 7px; font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-700); }
.sa-me-selectors { display: flex; align-items: center; gap: 10px; }
.sa-me-select {
  height: 38px; padding: 0 10px; font-size: var(--text-base); font-family: inherit;
  border: 1px solid var(--c-200); border-radius: var(--r-sm); background: var(--app-surface);
  color: var(--c-700); cursor: pointer; outline: none; transition: border-color .15s;
}
.sa-me-select:focus { border-color: var(--primary); }

[data-theme="dark"] .sa-export-divider { border-color: var(--c-700); }
[data-theme="dark"] .sa-me-header { color: var(--c-200); }
[data-theme="dark"] .sa-me-select { background: var(--c-800); border-color: var(--c-600); color: var(--c-200); }


/* ══════════════════════════════════════════════════════════════════
   CATALOG TAB (상품 설정)
   ══════════════════════════════════════════════════════════════════ */
.sa-catalog { display: flex; flex-direction: column; gap: 16px; }

/* Header: stats + search */
.sa-cat-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--app-surface); border-radius: var(--r-md); border: 1px solid var(--c-200); }
.sa-cat-stats { display: flex; gap: 20px; }
.sa-cat-stat { display: flex; align-items: baseline; gap: 6px; }
.sa-cat-stat-n { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: #111; font-variant-numeric: tabular-nums; }
.sa-cat-stat-l { font-size: var(--text-sm); color: var(--c-500); font-weight: var(--font-medium); }
.sa-cat-stat.warn .sa-cat-stat-n { color: var(--error-deep); }
.sa-cat-actions { display: flex; gap: 8px; align-items: center; }
.sa-cat-search-wrap { display: flex; align-items: center; gap: 6px; background: var(--c-100); border-radius: var(--r-sm); padding: 6px 10px; border: 1px solid transparent; transition: border-color 0.15s; position: relative; }
.sa-cat-search-wrap:focus-within { border-color: var(--primary); background: var(--app-surface); }
.sa-cat-search-icon { color: var(--c-400); flex-shrink: 0; }
.sa-cat-search { border: none; background: transparent; outline: none; font-size: var(--text-base); font-family: inherit; width: 180px; }
.sa-cat-clear { background: none; border: none; color: var(--c-400); cursor: pointer; padding: 2px; display: flex; }
.sa-cat-clear:hover { color: var(--c-700); }
.sa-cat-add-btn { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--primary-deep); color: var(--app-surface); border: none; border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; transition: background 0.15s; }
.sa-cat-add-btn:hover { background: var(--app-cta-hover); }
.sa-cat-refresh-btn { display: flex; align-items: center; padding: 6px; background: var(--c-100); border: 1px solid var(--c-200); border-radius: var(--r-sm); cursor: pointer; color: var(--c-500); transition: all 0.15s; }
.sa-cat-refresh-btn:hover { background: var(--c-200); color: #111; }

/* Section headers */
.sa-cat-section { background: var(--app-surface); border-radius: var(--r-md); border: 1px solid var(--c-200); overflow: hidden; }
.sa-cat-section-h { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-700); background: var(--c-50); border-bottom: 1px solid var(--c-100); cursor: pointer; user-select: none; }
.sa-cat-section-h svg { color: var(--warning); }
.sa-cat-section-h.on svg { color: var(--primary); }
.sa-cat-section-h:hover { background: var(--c-100); }

/* Product list */
.sa-cat-list { display: flex; flex-direction: column; }

/* Single product item */
.sa-cat-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--c-100); transition: background 0.1s; }
.sa-cat-item:last-child { border-bottom: none; }
.sa-cat-item:hover { background: var(--c-50); }
.sa-cat-item.unreg { background: var(--warning-bg); }
.sa-cat-item.unreg:hover { background: var(--warning-bg); }
.sa-cat-item.editing { background: var(--primary-soft); padding: 16px 20px; }

.sa-cat-item-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; cursor: pointer; }
.sa-cat-item-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sa-cat-item-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-cat-item-meta { font-size: var(--text-sm); color: var(--c-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-cat-item-stat { color: var(--c-400); }

/* Tags */
.sa-cat-tag { display: inline-block; padding: 1px 6px; border-radius: var(--r-xs); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.sa-cat-tag.code { background: var(--primary-soft); color: #6d28d9; }
.sa-cat-tag.plat { background: var(--info-bg); color: var(--info-deep); }
.sa-cat-tag.sup { background: var(--success-bg); color: #16a34a; }

/* Price display */
.sa-cat-item-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 90px; }
.sa-cat-price-label { font-size: var(--text-xs); color: var(--c-400); }
.sa-cat-price-val { font-size: var(--text-base); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; color: #111; }

/* Stats */
.sa-cat-item-stats { display: flex; gap: 8px; font-size: var(--text-xs); color: var(--c-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-cat-item-date { color: var(--c-400); }

/* Register button (for unregistered items) */
.sa-cat-reg-btn { display: flex; align-items: center; gap: 3px; padding: 5px 10px; background: var(--primary-deep); color: var(--app-surface); border: none; border-radius: var(--r-xs); font-size: var(--text-xs); font-weight: var(--font-semibold); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.15s; }
.sa-cat-reg-btn:hover { background: var(--app-cta-hover); }

/* Form card (new registration) */
.sa-cat-form-card { background: var(--app-surface); border-radius: var(--r-md); border: 2px solid var(--primary); padding: 20px; }
.sa-cat-form-title { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--primary-deep); display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.sa-cat-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-cat-form-grid.compact { grid-template-columns: 120px 1fr 120px 1fr; }
@media (max-width: 640px) { .sa-cat-form-grid, .sa-cat-form-grid.compact { grid-template-columns: 1fr; } }

/* Form input */
.sa-cat-fi { display: flex; flex-direction: column; gap: 4px; }
.sa-cat-fi span { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500); }
.sa-cat-fi input { padding: 7px 10px; border: 1px solid var(--c-300); border-radius: var(--r-sm); font-size: var(--text-base); outline: none; transition: border-color 0.15s; }
.sa-cat-fi input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Form actions */
.sa-cat-form-actions { display: flex; gap: 8px; margin-top: 12px; }
.sa-cat-save { display: flex; align-items: center; gap: 4px; padding: 6px 14px; background: var(--primary-deep); color: var(--app-surface); border: none; border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }
.sa-cat-save:hover { background: var(--app-cta-hover); }
.sa-cat-cancel { display: flex; align-items: center; gap: 4px; padding: 6px 14px; background: var(--c-100); color: var(--c-700); border: 1px solid var(--c-300); border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }
.sa-cat-cancel:hover { background: var(--c-200); }
.sa-cat-del { display: flex; align-items: center; padding: 6px 8px; background: transparent; color: var(--error-deep); border: 1px solid var(--error-bg); border-radius: var(--r-sm); cursor: pointer; margin-left: auto; }
.sa-cat-del:hover { background: var(--error-bg); }

/* Edit form inline */
.sa-cat-edit-form { width: 100%; }

/* ══════════════════════════════════════════════════════════════════
   LOADING & BADGES
   ══════════════════════════════════════════════════════════════════ */
.sa-loading { height: 3px; background: var(--c-100); border-radius: 2px; overflow: hidden; margin: -8px 0 8px; }
.sa-loading-bar { height: 100%; width: 30%; background: linear-gradient(90deg, var(--primary), var(--primary)); border-radius: 2px; animation: sa-load-slide 1.2s ease infinite; }
@keyframes sa-load-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

.sa-badge-empty { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: var(--text-xs); font-weight: var(--font-bold); background: var(--error-bg); color: var(--error-text); border-radius: var(--r-sm); vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════════
   EXPANDABLE DETAIL (shared by monthly, channel, supplier, product)
   ══════════════════════════════════════════════════════════════════ */

/* ── Expand List (supplier, product) ── */
.sa-expand-list { display: flex; flex-direction: column; gap: 2px; }
.sa-el-row { border-radius: var(--r-sm); transition: all .15s; }
.sa-el-row:hover { background: var(--c-50); }
.sa-el-row.open { background: var(--app-surface); box-shadow: 0 2px 12px var(--primary-a06); margin: 4px 0; border: 1px solid var(--c-150); }
.sa-el-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; transition: background .1s;
}
.sa-el-summary:hover { background: var(--primary-a03); border-radius: var(--r-sm); }
.sa-el-main { flex: 1; min-width: 0; }
.sa-el-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sa-el-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sa-el-title strong { font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-el-sub { font-size: var(--text-xs); color: var(--c-400); font-weight: var(--font-semibold); flex-shrink: 0; }
.sa-el-val { font-size: var(--text-md); font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sa-el-meta { display: flex; gap: 14px; font-size: 11.5px; color: var(--c-400); font-weight: var(--font-semibold); margin-top: 4px; }

/* ── Expand Detail Panel ── */
.sa-expand-detail {
  padding: 12px 16px 16px; margin-top: 4px;
  border-top: 1px solid var(--c-100);
  animation: sa-slide-in .2s ease;
}

/* Flow */
.sa-ed-flow {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--c-50), #f0f2ff); border-radius: var(--r-sm);
}
.sa-ed-fi {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 8px; border-radius: var(--r-sm);
}
.sa-ed-fi.sub { opacity: .7; }
.sa-ed-fi.hi { background: var(--primary-a08); }
.sa-ed-fi.plus { background: rgba(5,150,105,.08); }
.sa-ed-fi.minus { background: rgba(220,38,38,.08); }
.sa-ed-fl { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); }
.sa-ed-fv { font-size: var(--text-base); font-weight: var(--font-extrabold); color: var(--c-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-ed-fi.hi .sa-ed-fv { color: var(--app-cta-hover); }
.sa-ed-fi.plus .sa-ed-fv { color: var(--success-deep); }
.sa-ed-fi.minus .sa-ed-fv { color: var(--error-deep); }
.sa-ed-fa { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-300); }

/* Costs */
.sa-ed-costs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.sa-ed-cost { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: var(--c-50); border-radius: var(--r-sm); }
.sa-ed-cost span:first-child { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); }
.sa-ed-cv { font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--c-700); font-variant-numeric: tabular-nums; }
.sa-ed-bar { height: 3px; background: var(--c-150); border-radius: 2px; overflow: hidden; }
.sa-ed-bar > div { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary)); border-radius: 2px; transition: width .3s ease; }

/* Result */
.sa-ed-result { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--c-100); margin-bottom: 10px; flex-wrap: wrap; }
.sa-ed-ri { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500); display: flex; gap: 6px; }
.sa-ed-ri span:last-child { font-weight: var(--font-extrabold); color: var(--c-700); }
.sa-ed-ri .dim { color: var(--c-400); }
.sa-ed-ri.final { padding: 2px 10px; border-radius: var(--r-xs); }
.sa-ed-ri.final.plus { background: var(--success-bg); color: var(--success-deep); } .sa-ed-ri.final.plus span { color: var(--success-deep); }
.sa-ed-ri.final.minus { background: var(--error-bg); color: var(--error-deep); } .sa-ed-ri.final.minus span { color: var(--error-deep); }

/* Section Title */
.sa-ed-section-title { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 4px; }

/* Mini Table */
.sa-ed-mini-tbl { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--c-100); }
.sa-ed-mt-h {
  display: grid; grid-template-columns: 80px repeat(auto-fit, minmax(60px, 1fr)); gap: 0;
  padding: 6px 10px; background: var(--c-50); font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400);
}
.sa-ed-mt-h span:not(:first-child) { text-align: right; }
.sa-ed-mt-r {
  display: grid; grid-template-columns: 80px repeat(auto-fit, minmax(60px, 1fr)); gap: 0;
  padding: 5px 10px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-700);
  border-top: 1px solid var(--c-50); font-variant-numeric: tabular-nums;
}
.sa-ed-mt-r:nth-child(even) { background: var(--c-50); }
.sa-ed-mt-r:hover { background: var(--c-50); }
.sa-ed-mt-r span:not(:first-child) { text-align: right; }
.sa-ed-mt-r .c-plus { color: var(--success-deep); } .sa-ed-mt-r .c-minus { color: var(--error-deep); }
.sa-ed-mt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-ed-mt-more { padding: 6px 10px; font-size: var(--text-xs); color: var(--c-400); font-weight: var(--font-semibold); text-align: center; background: var(--c-50); }

/* Monthly card click area */
.sa-mc-top { cursor: pointer; transition: opacity .1s; }
.sa-mc-top:hover { opacity: .85; }
.sa-monthly-card.open { border-color: var(--c-300); box-shadow: 0 2px 12px var(--primary-a08); }
.sa-mc-month { display: flex; align-items: center; justify-content: space-between; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .ov-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ov-cost-layout { grid-template-columns: 1fr; }
  .ov-cost-summary { margin-top: 0; }
}
@media (max-width: 860px) {
  .sa-hd-row1 { flex-wrap: wrap; gap: 8px; }
  .sa-header-r { width: 100%; justify-content: space-between; }
  .sa-grid-2 { grid-template-columns: 1fr; }
  .sa-date-controls { flex-direction: column; align-items: stretch; }
  .sa-quick-btns { margin-left: 0; justify-content: flex-start; }
  .sa-dl-head { grid-template-columns: 90px repeat(4, 1fr) 54px; }
  .sa-dl-head .sa-dl-c.spark, .sa-dl-head .sa-dl-c.cost { display: none; }
  .sa-dl-summary { grid-template-columns: 90px repeat(4, 1fr) 54px 20px; }
  .sa-dl-summary .sa-dl-c.spark, .sa-dl-summary .sa-dl-c.cost { display: none; }
  .sa-dl-cost-grid { grid-template-columns: repeat(3, 1fr); }
  .sa-dl-flow { gap: 4px; }
  .sa-dl-flow-item { min-width: 80px; padding: 6px 10px; }
  .sa-ds { flex-wrap: wrap; }
  .sa-ds-item { min-width: 120px; flex: 1 1 40%; }
  .sa-ds-sep { display: none; }
  .sa-ds-item + .sa-ds-sep + .sa-ds-item { border-left: none; border-top: 1px solid var(--c-100); }
  .sa-ds-item.result { flex: 1 1 100%; border-left: none; border-top: 3px solid; }
  .sa-dp-pop { left: auto; right: 0; }
  .ov-split { grid-template-columns: 1fr; }
  .ov-hero-amount { font-size: var(--text-3xl); }
  .ov-cmp-meta { width: 72px; }
  .ov-cmp-val { width: 68px; font-size: var(--text-base); }
}
@media (max-width: 500px) {
  .sa-monthly-grid { grid-template-columns: 1fr; }
  .sa-dl-head { grid-template-columns: 76px repeat(3, 1fr); }
  .sa-dl-head .sa-dl-c.qty, .sa-dl-head .sa-dl-c.spark, .sa-dl-head .sa-dl-c.cost, .sa-dl-head .sa-dl-c.sale { display: none; }
  .sa-dl-summary { grid-template-columns: 76px repeat(3, 1fr) 20px; }
  .sa-dl-summary .sa-dl-c.qty, .sa-dl-summary .sa-dl-c.spark, .sa-dl-summary .sa-dl-c.cost, .sa-dl-summary .sa-dl-c.sale { display: none; }
  .sa-dl-cost-grid { grid-template-columns: repeat(2, 1fr); }
  .sa-dl-result-strip { flex-direction: column; }
  .sa-dl-rs.final { border-left: none; padding-left: 0; border-top: 1px solid var(--c-200); padding-top: 10px; }
  .ov-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ov-kpi { padding: 12px 14px; }
  .ov-kpi-val { font-size: var(--text-lg); }
  .ov-hero { padding: 18px 16px; }
  .ov-hero-amount { font-size: var(--text-2xl); }
}

/* ═══════════════════════════════════════════════════════════════
   Data Management
   ═══════════════════════════════════════════════════════════════ */

.sa-dm {
  margin-top: 24px;
  background: var(--c-50); border: 1px solid var(--c-200); border-radius: var(--r-lg);
  overflow: hidden;
}
.sa-dm-header {
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--c-200);
}
.sa-dm-header-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--c-100); border: 1px solid var(--c-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-500); flex-shrink: 0;
}
.sa-dm-header-title { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-900); letter-spacing: -0.01em; }
.sa-dm-header-desc { font-size: 11.5px; color: var(--c-400); margin-top: 1px; }

.sa-dm-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; padding: 16px;
}
@media (max-width: 700px) { .sa-dm-grid { grid-template-columns: 1fr; } }

.sa-dm-card {
  background: var(--app-surface); border: 1px solid var(--c-200); border-radius: var(--r-md);
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  transition: all 0.2s;
}
.sa-dm-card:hover { border-color: var(--c-300); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sa-dm-card.danger { border-color: var(--error-bg); background: #fff5f5; }
.sa-dm-card.danger:hover { border-color: var(--error); box-shadow: 0 2px 8px rgba(220,38,38,0.08); }

.sa-dm-card-top { display: flex; align-items: center; gap: 10px; }
.sa-dm-card-icon {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sa-dm-card-info { min-width: 0; }
.sa-dm-card-name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-900); }
.sa-dm-card-desc { font-size: var(--text-xs); color: var(--c-400); margin-top: 1px; }

.sa-dm-card-btn {
  width: 100%; height: 34px; border-radius: var(--r-sm);
  background: var(--c-100); border: 1px solid var(--c-200); color: var(--c-600);
  font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all 0.15s;
}
.sa-dm-card-btn:hover { background: var(--c-200); color: var(--c-700); }
.sa-dm-card-btn.danger {
  background: var(--error-bg); border-color: var(--error-bg); color: var(--error-deep);
}
.sa-dm-card-btn.danger:hover { background: var(--error-bg); border-color: var(--error); }

/* ═══════════════════════════════════════════════════════════
   Daily Detail Modal — Text Flow (Large)
   ═══════════════════════════════════════════════════════════ */

/* Modal Overlay (DailyDetailModal 등 공용) */
.sa-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}

@keyframes sa-modal-in { from { opacity: 0; transform: scale(0.92) translateY(12px) } to { opacity: 1; transform: scale(1) translateY(0) } }

.sa-dd-modal {
  background: var(--app-surface); border-radius: var(--r-xl);
  width: 96%; max-width: 1260px; height: 88vh;
  box-shadow: 0 30px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
  display: flex; flex-direction: column;
  animation: sa-modal-in 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  overflow: hidden;
}

/* ── Header ── */
.sa-dd-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 28px 36px 20px; gap: 16px; flex-shrink: 0;
}
.sa-dd-title {
  font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--c-900);
  margin: 0; letter-spacing: -0.03em;
  display: flex; align-items: center; gap: 10px;
}
.sa-dd-day-badge {
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-500);
  background: var(--c-100); padding: 4px 12px; border-radius: var(--r-sm);
}
.sa-dd-sub { font-size: var(--text-md); color: var(--c-400); margin: 5px 0 0; }
.sa-dd-close {
  background: var(--c-100); border: none; border-radius: var(--r-md);
  width: 40px; height: 40px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-400); flex-shrink: 0; transition: all 0.15s;
}
.sa-dd-close:hover { background: var(--c-200); color: var(--c-700); }

/* ── 2-Column Body ── */
.sa-dd-body {
  display: flex; flex: 1; min-height: 0;
  border-top: 1px solid var(--c-100);
}
.sa-dd-left {
  width: 480px; flex-shrink: 0;
  padding: 32px 36px;
  border-right: 1px solid var(--c-100);
  overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
}
.sa-dd-right {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

/* ── Left: Flow Cards ── */
.sa-dd-f-card {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--r-lg); padding: 18px 24px;
}
.sa-dd-f-card.blue {
  background: var(--info-bg); border: 1px solid var(--info-bg);
}
.sa-dd-f-card.blue .sa-dd-f-card-lb { color: var(--info-deep); }
.sa-dd-f-card.blue .sa-dd-f-card-val { color: var(--info-deep); }

.sa-dd-f-card.result { margin-top: 20px; }
.sa-dd-f-card.result.plus {
  background: linear-gradient(135deg, var(--success-bg) 0%, var(--success-bg) 100%);
  border: 1px solid #a7f3d0;
}
.sa-dd-f-card.result.plus .sa-dd-f-card-lb,
.sa-dd-f-card.result.plus .sa-dd-f-card-val,
.sa-dd-f-card.result.plus .sa-dd-f-card-rate { color: var(--success-deep); }
.sa-dd-f-card.result.neg {
  background: linear-gradient(135deg, var(--error-bg) 0%, var(--error-bg) 100%);
  border: 1px solid var(--error);
}
.sa-dd-f-card.result.neg .sa-dd-f-card-lb,
.sa-dd-f-card.result.neg .sa-dd-f-card-val,
.sa-dd-f-card.result.neg .sa-dd-f-card-rate { color: var(--error-deep); }

.sa-dd-f-card-lb { font-size: var(--text-lg); font-weight: var(--font-bold); }
.sa-dd-f-card-val {
  font-size: 30px; font-weight: var(--font-black);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.sa-dd-f-card-val small { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-left: 2px; }
.sa-dd-f-card-left { display: flex; align-items: baseline; gap: 10px; }
.sa-dd-f-card-rate { font-size: var(--text-lg); font-weight: var(--font-extrabold); opacity: 0.7; }

/* Deduction rows */
.sa-dd-f-ded {
  display: flex; align-items: baseline;
  padding: 14px 24px 6px; gap: 0;
}
.sa-dd-f-ded-lb {
  font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--c-500);
  min-width: 56px; flex-shrink: 0;
}
.sa-dd-f-ded-pct {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--error);
  background: var(--error-bg); padding: 3px 10px; border-radius: var(--r-sm);
  margin-left: 10px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.sa-dd-f-ded-dot {
  flex: 1; margin: 0 14px;
  border-bottom: 2px dotted var(--c-200);
  min-width: 24px; align-self: center;
}
.sa-dd-f-ded-val {
  font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--error-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; flex-shrink: 0;
}
.sa-dd-f-ded-note {
  font-size: var(--text-base); font-weight: var(--font-medium); color: var(--c-400);
  margin-left: 10px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* 소득세 절감 행 스타일 */
.sa-dd-f-ded.tax-saved { background: rgba(16,185,129,.04); border-radius: var(--r-sm); }
.sa-dd-tax-saved-val {
  font-size: var(--text-xl); font-weight: var(--font-bold); color: #059669;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
}

/* 소득세 툴팁 아이콘 — JS 전역 툴팁(data-tip) 사용, CSS ::after 없음 */
.sa-dd-tax-tip {
  display: inline-flex; align-items: center;
  margin-left: 5px; vertical-align: middle; cursor: default;
}
.sa-dd-tax-tip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(99,102,241,.12); color: var(--primary);
  font-size: 10px; font-weight: var(--font-bold);
  cursor: default; line-height: 1;
}

/* 일별 테이블 툴팁 래퍼 */
.sa-tax-zero-tip {
  display: inline-flex; align-items: center; gap: 3px; cursor: default;
}

/* Subtotal row */
.sa-dd-f-sub {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; margin: 16px 0;
  border-radius: var(--r-md);
  background: #f8fafb;
  border: 1px dashed var(--c-200);
}
.sa-dd-f-sub-left { display: flex; align-items: baseline; gap: 10px; }
.sa-dd-f-sub-lb { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--success-deep); }
.sa-dd-f-sub-pct { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-400); }
.sa-dd-f-sub-val {
  font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--success-deep);
  font-variant-numeric: tabular-nums;
}

/* ── Right: Tabs ── */
.sa-dd-tabs {
  display: flex; gap: 0; padding: 0 24px;
  border-bottom: 1px solid var(--c-100); flex-shrink: 0;
}
.sa-dd-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px; border: none; background: none; cursor: pointer;
  font-size: var(--text-md); font-weight: var(--font-medium); color: var(--c-400);
  border-bottom: 2px solid transparent; transition: all 0.15s;
  font-family: inherit;
}
.sa-dd-tab:hover { color: var(--c-600); }
.sa-dd-tab.active { color: var(--info-deep); border-bottom-color: var(--info-deep); font-weight: var(--font-bold); }

/* ── Right: Content ── */
.sa-dd-content { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }

/* ── Platform Cards (flow style matching left) ── */
.sa-dd-plat-cards { display: flex; flex-direction: column; gap: 20px; }
.sa-dd-pc {
  border: 1px solid var(--c-150); border-top: 3px solid var(--pc-color, var(--c-500));
  border-radius: var(--r-lg); background: var(--app-surface); overflow: hidden;
}
.sa-dd-pc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; background: var(--c-50); border-bottom: 1px solid var(--c-100);
}
.sa-dd-pc-name { font-size: var(--text-lg); font-weight: var(--font-extrabold); }
.sa-dd-pc-tag {
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500);
  background: var(--c-100); padding: 3px 10px; border-radius: var(--r-xs);
}

/* Platform flow body */
.sa-dd-pc-flow { padding: 18px 20px 20px; }

/* Mini cards (same feel as left) */
.sa-dd-pf-card {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: var(--text-md); font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.sa-dd-pf-card span:last-child { font-size: 19px; font-weight: var(--font-extrabold); }
.sa-dd-pf-card small { font-size: var(--text-base); font-weight: var(--font-semibold); margin-left: 1px; }
.sa-dd-pf-card em { font-style: normal; font-size: var(--text-base); font-weight: var(--font-bold); opacity: 0.65; margin-left: 8px; }

.sa-dd-pf-card.blue {
  background: var(--info-bg); border: 1px solid var(--info-bg); color: var(--info-deep);
}
.sa-dd-pf-card.green {
  background: var(--success-bg); border: 1px dashed var(--success-bg);
  color: var(--success-deep); margin: 10px 0 8px;
}
.sa-dd-pf-card.profit {
  background: linear-gradient(135deg, var(--success-bg) 0%, var(--success-bg) 100%);
  border: 1px solid #a7f3d0;
  color: var(--success-deep); margin-top: 10px;
}
.sa-dd-pf-card.loss {
  background: linear-gradient(135deg, var(--error-bg) 0%, var(--error-bg) 100%);
  border: 1px solid var(--error);
  color: var(--error-deep); margin-top: 10px;
}

/* Deduction rows (same dotted leader as left) */
.sa-dd-pf-row {
  display: flex; align-items: baseline;
  padding: 9px 16px 4px; gap: 0;
  font-size: var(--text-md); color: var(--c-600);
  font-variant-numeric: tabular-nums;
}
.sa-dd-pf-row em {
  font-style: normal; font-size: var(--text-sm); color: var(--c-400);
  font-weight: var(--font-medium); margin-left: 5px;
}
.sa-dd-pf-dot {
  flex: 1; margin: 0 12px;
  border-bottom: 2px dotted var(--c-200);
  min-width: 16px; align-self: center;
}
.sa-dd-pf-row .red { color: var(--error-deep); font-weight: var(--font-bold); white-space: nowrap; }
.sa-dd-pf-row .pct {
  font-size: var(--text-sm); color: var(--c-400); font-weight: var(--font-semibold);
  margin-left: 10px; white-space: nowrap;
}
.sa-dd-pf-row.muted { font-size: var(--text-base); color: var(--c-400); }
.sa-dd-pf-row.ded span:first-child { color: var(--c-500); }
.sa-dd-pf-row.ad span:first-child { color: #f59e0b; font-weight: var(--font-bold); }
.sa-dd-pf-ad-icon { vertical-align: -1px; margin-right: 4px; color: #f59e0b; }
.sa-dd-pf-ad-none { font-size: var(--text-xs); color: var(--c-300); font-weight: var(--font-semibold); }

/* ── Product List ── */
.sa-dd-prod-list { display: flex; flex-direction: column; }
.sa-dd-prod-item {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--c-100); gap: 8px 16px;
}
.sa-dd-prod-item:last-child { border-bottom: none; }
.sa-dd-prod-info { min-width: 0; flex: 1; }
.sa-dd-prod-name {
  font-weight: var(--font-semibold); font-size: var(--text-md); color: var(--c-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sa-dd-prod-meta { font-size: var(--text-sm); color: var(--c-400); margin-top: 2px; display: block; }
.sa-dd-prod-right {
  display: flex; align-items: baseline; gap: 12px; flex-shrink: 0;
}
.sa-dd-prod-qty { font-size: var(--text-base); color: var(--c-400); }
.sa-dd-prod-rev {
  font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-900);
  font-variant-numeric: tabular-nums;
}
.sa-dd-prod-share {
  font-size: var(--text-sm); color: var(--c-400); font-weight: var(--font-semibold);
  min-width: 36px; text-align: right;
}
.sa-dd-prod-plats {
  width: 100%; display: flex; gap: 6px; flex-wrap: wrap;
  padding-left: 2px;
}
.sa-dd-prod-plat-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500);
  background: var(--c-100); padding: 2px 8px; border-radius: var(--r-xs);
}
.sa-dd-prod-plat-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
[data-theme="dark"] .sa-dd-prod-plat-tag { background: var(--c-700); color: var(--c-400); }

/* ── 주문자별 탭 ── */
.sa-dd-orders { display: flex; flex-direction: column; gap: 8px; }
.sa-dd-orders-loading,
.sa-dd-orders-empty { text-align: center; padding: 32px 16px; color: var(--c-400); font-size: var(--text-base); display: flex; align-items: center; justify-content: center; gap: 8px; }

.sa-dd-ord-card { border-radius: var(--r-sm); border: 1px solid var(--c-150); overflow: hidden; transition: box-shadow .15s; }
.sa-dd-ord-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.sa-dd-ord-card.open { border-color: var(--c-300); box-shadow: 0 2px 12px var(--primary-soft); }

.sa-dd-ord-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; cursor: pointer; gap: 10px;
  background: var(--app-surface); transition: background .1s;
}
.sa-dd-ord-head:hover { background: var(--c-50); }
.sa-dd-ord-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.sa-dd-ord-name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-dd-ord-source {
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 7px; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--src-c, var(--c-500)) 12%, transparent);
  color: var(--src-c, var(--c-500)); white-space: nowrap;
}
.sa-dd-ord-summary { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--c-500); }
.sa-dd-ord-qty { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--primary); background: var(--primary-soft); padding: 2px 7px; border-radius: var(--r-xs); }
.sa-dd-ord-amount { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800); font-variant-numeric: tabular-nums; }

.sa-dd-ord-detail { border-top: 1px solid var(--c-100); background: #fafbfe; }
.sa-dd-ord-meta {
  display: flex; gap: 16px; padding: 8px 14px;
  font-size: var(--text-xs); color: var(--c-400); border-bottom: 1px solid var(--c-100);
}
.sa-dd-ord-items { padding: 6px 0; }
.sa-dd-ord-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px; gap: 10px;
}
.sa-dd-ord-item-name { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--c-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-dd-ord-item-opt { margin-left: 6px; font-size: var(--text-xs); color: var(--c-400); }
.sa-dd-ord-item-nums { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--c-500); }
.sa-dd-ord-item-price { font-weight: var(--font-semibold); color: var(--c-700); }

.sa-dd-ord-totals { padding: 8px 14px 10px; border-top: 1px dashed var(--c-200); }
.sa-dd-ord-total-row {
  display: flex; justify-content: space-between; padding: 3px 0;
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-700); font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .sa-dd-ord-card { border-color: var(--c-700); }
[data-theme="dark"] .sa-dd-ord-card.open { border-color: var(--primary-deep); box-shadow: 0 2px 12px var(--primary-glow); }
[data-theme="dark"] .sa-dd-ord-head { background: var(--c-800); }
[data-theme="dark"] .sa-dd-ord-head:hover { background: var(--c-200); }
[data-theme="dark"] .sa-dd-ord-name { color: var(--c-200); }
[data-theme="dark"] .sa-dd-ord-amount { color: var(--c-200); }
[data-theme="dark"] .sa-dd-ord-qty { background: var(--primary-deep); color: var(--primary); }
[data-theme="dark"] .sa-dd-ord-detail { background: rgba(14, 165, 233, 0.08); border-top-color: var(--c-700); }
[data-theme="dark"] .sa-dd-ord-meta { color: var(--c-500); border-bottom-color: var(--c-700); }
[data-theme="dark"] .sa-dd-ord-item-name { color: var(--c-300); }
[data-theme="dark"] .sa-dd-ord-item-price { color: var(--c-200); }
[data-theme="dark"] .sa-dd-ord-totals { border-top-color: var(--c-700); }
[data-theme="dark"] .sa-dd-ord-total-row { color: var(--c-200); }

/* Hint for double-click */
.sa-tbl-soft tbody tr { cursor: pointer; }
.sa-tbl-soft tbody tr:hover { background: var(--info-bg); }



/* ═══════════════════════════════════════════════════════════════
   COMPONENT-MATCHED STYLES – CostTab / CatalogTab (v2)
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared Buttons ── */
.sa-btn-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--c-150);
  background: var(--app-surface); color: var(--c-500); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.sa-btn-icon:hover { border-color: var(--c-300); color: var(--primary); background: var(--primary-soft); }

.sa-btn-sm {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: var(--font-semibold); padding: 6px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--c-150); background: var(--app-surface); color: var(--c-700);
  cursor: pointer; font-family: inherit; transition: all .12s; white-space: nowrap;
}
.sa-btn-sm:hover { background: var(--c-100); border-color: var(--c-300); }
.sa-btn-sm.primary { background: var(--primary-deep); color: var(--app-surface); border-color: var(--primary-deep); }
.sa-btn-sm.primary:hover { background: var(--app-cta-hover); }
.sa-btn-sm.primary:disabled { opacity: .5; cursor: not-allowed; }
.sa-btn-sm.danger { background: var(--app-surface); color: var(--error-deep); border-color: var(--error-bg); }
.sa-btn-sm.danger:hover { background: var(--error-bg); border-color: var(--error); }

.sa-btn-xs {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 5px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200); background: var(--app-surface); color: var(--c-700);
  cursor: pointer; font-family: inherit; transition: all .12s; white-space: nowrap;
}
.sa-btn-xs:hover { background: var(--c-100); border-color: var(--c-300); }
.sa-btn-xs.primary { background: var(--primary-deep); color: var(--app-surface); border-color: var(--primary-deep); }
.sa-btn-xs.primary:hover { background: var(--app-cta-hover); }
.sa-btn-xs.danger { color: var(--error-deep); border-color: var(--error-bg); }
.sa-btn-xs.danger:hover { background: var(--error-bg); }

.sa-preset-btn {
  padding: 5px 12px; border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--c-500); background: var(--app-surface); border: 1px solid var(--c-150);
  cursor: pointer; font-family: inherit; transition: all .12s;
}
.sa-preset-btn:hover { border-color: var(--c-300); color: var(--primary); background: var(--primary-soft); }

/* ── CostTab ── */
.sa-cost-grid {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 16px; max-height: 480px; overflow-y: auto;
}
.sa-cost-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--c-50); border-radius: var(--r-sm);
  transition: background .12s;
}
.sa-cost-row:hover { background: var(--c-100); }
.sa-cost-row.missing { background: #fef3e2; border-left: 3px solid var(--warning); }
.sa-cost-row.missing:hover { background: #fde9c8; }
.sa-cost-missing-dot {
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--warning-deep);
  background: var(--warning-bg); padding: 1px 6px; border-radius: var(--r-xs);
  margin-left: 2px;
}
.sa-cost-date {
  display: flex; align-items: center; gap: 6px;
  width: 100px; flex-shrink: 0;
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-700);
  font-variant-numeric: tabular-nums;
}
.sa-cost-input-wrap { display: flex; align-items: center; gap: 6px; flex: 1; }
.sa-cost-input {
  flex: 1; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--c-150);
  padding: 0 10px; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-800);
  font-family: inherit; font-variant-numeric: tabular-nums;
  text-align: right; transition: border-color .12s;
}
.sa-cost-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a06); }
.sa-cost-unit { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-400); flex-shrink: 0; }
.sa-cost-range { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-700); font-variant-numeric: tabular-nums; }

/* 직접 편집 날짜 범위 */
.sa-cost-date-range {
  display: flex; align-items: center; gap: 4px;
  background: var(--c-50); border: 1px solid var(--c-200);
  border-radius: var(--r-sm); padding: 3px 10px;
  transition: border-color .15s;
}
.sa-cost-date-range:focus-within { border-color: var(--primary); background: white; }
.sa-cost-date-input {
  border: none; background: transparent; outline: none;
  font-size: var(--text-sm); font-family: inherit; color: var(--c-700);
  font-weight: var(--font-semibold); cursor: pointer; width: 120px;
}
.sa-cost-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.4; }
.sa-cost-date-input::-webkit-calendar-picker-indicator:hover { opacity: 0.8; }
.sa-cost-date-sep { color: var(--c-400); font-weight: var(--font-bold); font-size: var(--text-sm); flex-shrink: 0; }
.sa-desc-box { font-size: var(--text-base); color: var(--c-500); line-height: 1.8; }
.sa-desc-box p { margin: 0 0 2px; }

/* ── CatalogTab: Badge ── */
.sa-card-badge {
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 10px; border-radius: var(--r-xs);
  background: var(--primary-soft); color: var(--primary-deep);
}

/* ── CatalogTab: Top bar (stats + search) ── */
.cat-top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.cat-stats { display: flex; gap: 8px; }
.cat-stat-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-xl);
  background: var(--success-bg); color: #16a34a;
  font-size: var(--text-base); font-weight: var(--font-bold);
}
.cat-stat-pill svg { flex-shrink: 0; }
.cat-stat-pill .cat-stat-n { font-variant-numeric: tabular-nums; }
.cat-stat-pill .cat-stat-l { font-weight: var(--font-medium); opacity: .8; }
.cat-stat-pill.warn { background: var(--warning-bg); color: var(--warning-deep); }
.cat-actions { display: flex; gap: 8px; align-items: center; }

/* ── CatalogTab: Add form (spacious) ── */
.cat-add-form {
  background: var(--c-50); border-radius: var(--r-md); border: 1.5px solid var(--c-300);
  padding: 20px 24px; margin-top: 8px;
}
.cat-add-form-title {
  font-size: var(--text-md); font-weight: var(--font-bold); color: var(--primary-deep);
  display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
}
.cat-add-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 640px) { .cat-add-form-grid { grid-template-columns: 1fr; } }
.cat-fi { display: flex; flex-direction: column; gap: 5px; }
.cat-fi span { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500); }
.cat-fi input {
  padding: 9px 12px; border: 1px solid var(--c-300); border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-medium); font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cat-fi input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cat-add-form-btns { display: flex; gap: 8px; margin-top: 16px; }

/* ── CatalogTab: Unregistered section ── */
.cat-unreg-section {
  background: var(--app-surface); border-radius: var(--r-md); border: 1px solid var(--warning-bg);
  overflow: hidden;
}
.cat-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; cursor: pointer; user-select: none;
  background: var(--warning-bg); transition: background .1s;
}
.cat-section-head:hover { background: var(--warning-bg); }
.cat-section-head-left {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-md); font-weight: var(--font-bold); color: var(--warning-text);
}
.cat-section-head-left svg { color: var(--warning); }
.cat-section-count {
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--warning-bg); color: var(--warning-deep);
}
.cat-section-arrow { color: var(--warning-deep); transition: transform .2s; }
.cat-section-arrow.open { transform: rotate(180deg); }

.cat-unreg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; padding: 16px 20px;
}
.cat-unreg-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: var(--r-sm);
  background: #fffdf5; border: 1px solid var(--warning-bg);
  transition: border-color .15s, box-shadow .15s;
}
.cat-unreg-card:hover { border-color: var(--warning); box-shadow: 0 2px 8px rgba(245,158,11,.1); }
.cat-unreg-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.cat-unreg-name {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800);
  line-height: 1.3; word-break: break-word;
}
.cat-unreg-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.cat-meta-tag {
  display: inline-flex; padding: 2px 7px; border-radius: var(--r-xs);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.cat-meta-tag.code { background: var(--primary-soft); color: #6d28d9; }
.cat-meta-tag.plat { background: var(--info-bg); color: var(--info-deep); }
.cat-unreg-card-stats {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--text-sm); color: var(--c-500); font-variant-numeric: tabular-nums;
}
.cat-unreg-card-sep { color: var(--c-300); }

/* ── Dark mode: CatalogTab redesign ── */
[data-theme="dark"] .cat-stat-pill { background: #1a2e1f; color: #4ade80; }
[data-theme="dark"] .cat-stat-pill.warn { background: rgba(251, 191, 36, 0.08); color: var(--warning); }
[data-theme="dark"] .cat-add-form { background: #1a1f2e; border-color: var(--primary-deep); }
[data-theme="dark"] .cat-fi span { color: var(--c-400); }
[data-theme="dark"] .cat-fi input { background: var(--c-200); border-color: var(--c-600); color: var(--c-100); }
[data-theme="dark"] .cat-fi input:focus { border-color: var(--primary); }
[data-theme="dark"] .cat-unreg-section { background: var(--c-800); border-color: var(--warning-text); }
[data-theme="dark"] .cat-section-head { background: #2a2012; }
[data-theme="dark"] .cat-section-head:hover { background: rgba(251, 191, 36, 0.08); }
[data-theme="dark"] .cat-section-head-left { color: var(--warning); }
[data-theme="dark"] .cat-section-count { background: rgba(251, 191, 36, 0.08); color: var(--warning); }
[data-theme="dark"] .cat-unreg-card { background: #252015; border-color: rgba(251, 191, 36, 0.12); }
[data-theme="dark"] .cat-unreg-card:hover { border-color: var(--warning); }
[data-theme="dark"] .cat-unreg-name { color: var(--c-100); }
[data-theme="dark"] .cat-meta-tag.code { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .cat-meta-tag.plat { background: #172554; color: #93c5fd; }
[data-theme="dark"] .cat-unreg-card-stats { color: var(--c-400); }

/* ── CatalogTab: inline edit form (registered items) ── */
.sa-cat-form-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap;
}
.sa-cat-form-row.compact { margin-bottom: 0; gap: 6px; }
.sa-cat-form-row input, .sa-cat-form-row select {
  padding: 7px 10px; border: 1px solid var(--c-300); border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-medium); font-family: inherit; flex: 1; min-width: 80px;
  outline: none; transition: border-color .15s;
}
.sa-cat-form-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sa-cat-form-btns { display: flex; gap: 6px; }
.sa-cat-form-btns.compact { gap: 4px; }

/* ── CatalogTab: Fee rate grid ── */
.sa-fee-grid { display: flex; flex-direction: column; gap: 8px; }
.sa-fee-row { display: flex; align-items: center; gap: 10px; }
.sa-fee-plat { font-size: var(--text-base); font-weight: var(--font-semibold); color: #111; min-width: 80px; }
.sa-fee-input-wrap { display: flex; align-items: center; gap: 4px; }
.sa-fee-input {
  width: 80px; padding: 7px 10px; border: 1px solid var(--c-300); border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-bold); text-align: right; font-family: inherit;
  font-variant-numeric: tabular-nums; outline: none; transition: border-color .15s;
}
.sa-fee-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sa-fee-pct { font-size: var(--text-sm); color: var(--c-400); font-weight: var(--font-semibold); }

/* ── CatalogTab: Data actions ── */
.sa-data-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--c-100);
}

/* ── CostTab/CatalogTab: Loading with text (override 3px bar in cards) ── */
.sa-card > .sa-loading {
  height: auto; background: none; margin: 0; overflow: visible;
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 40px 0; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-400);
}
.spin { animation: sa-spin-kf 1s linear infinite; }
@keyframes sa-spin-kf { 100% { transform: rotate(360deg); } }

/* ── Dark mode ── */
[data-theme="dark"] .sa-btn-icon { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .sa-btn-icon:hover { background: var(--c-600); color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .sa-btn-sm { background: var(--c-700); border-color: var(--c-600); color: var(--c-200); }
[data-theme="dark"] .sa-btn-sm:hover { background: var(--c-600); }
[data-theme="dark"] .sa-btn-sm.primary { background: var(--primary-deep); color: var(--app-surface); border-color: var(--primary-deep); }
[data-theme="dark"] .sa-btn-sm.danger { background: var(--c-700); color: var(--error); border-color: var(--error-deep); }
[data-theme="dark"] .sa-btn-xs { background: var(--c-700); border-color: var(--c-600); color: var(--c-200); }
[data-theme="dark"] .sa-btn-xs.primary { background: var(--primary-deep); color: var(--app-surface); }
[data-theme="dark"] .sa-btn-xs.danger { color: var(--error); border-color: var(--error-deep); }
[data-theme="dark"] .sa-preset-btn { background: var(--c-700); border-color: var(--c-600); color: var(--c-400); }
[data-theme="dark"] .sa-preset-btn:hover { background: var(--c-600); color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .sa-cost-row { background: var(--c-200); }
[data-theme="dark"] .sa-cost-row:hover { background: var(--c-700); }
[data-theme="dark"] .sa-cost-row.missing { background: rgba(251, 191, 36, 0.08); border-left-color: var(--warning); }
[data-theme="dark"] .sa-cost-row.missing:hover { background: rgba(251, 191, 36, 0.12); }
[data-theme="dark"] .sa-cost-missing-dot { background: rgba(251, 191, 36, 0.12); color: var(--warning); }
[data-theme="dark"] .sa-cost-date { color: var(--c-200); }
[data-theme="dark"] .sa-cost-input { background: var(--c-200); border-color: var(--c-600); color: var(--c-100); }
[data-theme="dark"] .sa-cost-input:focus { border-color: var(--primary); }
[data-theme="dark"] .sa-cost-range { color: var(--c-100); }
[data-theme="dark"] .sa-desc-box { color: var(--c-400); }
[data-theme="dark"] .sa-card-badge { background: var(--primary-deep); color: var(--primary); }
[data-theme="dark"] .sa-cat-search-wrap { background: var(--c-700); }
[data-theme="dark"] .sa-cat-search-wrap:focus-within { background: var(--c-200); border-color: var(--primary); }
[data-theme="dark"] .sa-cat-search { color: var(--c-100); }
[data-theme="dark"] .sa-cat-form-row input { background: var(--c-200); border-color: var(--c-600); color: var(--c-100); }
[data-theme="dark"] .sa-cat-form-row input:focus { border-color: var(--primary); }
[data-theme="dark"] .sa-fee-plat { color: var(--c-100); }
[data-theme="dark"] .sa-fee-input { background: var(--c-200); border-color: var(--c-600); color: var(--c-100); }
[data-theme="dark"] .sa-fee-input:focus { border-color: var(--primary); }
[data-theme="dark"] .sa-data-actions { border-top-color: var(--c-700); }

/* ═══════════════════════════════════════════════════════════
   Supplier Report (sr- prefix) — 거래처별 리포트
   ═══════════════════════════════════════════════════════════ */
.sr-wrap { display: flex; flex-direction: column; gap: 16px; }

/* KPI Grid */
.sr-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sr-kpi {
  background: var(--app-surface); border: 1px solid var(--c-200); border-radius: var(--r-sm); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.sr-kpi-label { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); text-transform: uppercase; letter-spacing: .5px; }
.sr-kpi-value { font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--c-900); }
.sr-kpi-value--name { font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-kpi-sub { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500); }
.sr-kpi-sub.good { color: var(--success-deep); }
.sr-kpi-sub.bad { color: var(--error); }

/* Sort bar */
.sr-sort-bar { display: flex; align-items: center; gap: 6px; }
.sr-sort-label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); margin-right: 2px; }
.sr-sort-btn {
  font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 3px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200); background: var(--app-surface); color: var(--c-500); cursor: pointer; transition: all .12s;
}
.sr-sort-btn:hover { border-color: var(--c-300); color: var(--primary-deep); }
.sr-sort-btn.active { background: var(--primary-soft); border-color: var(--c-300); color: var(--primary-deep); }
.sr-export-btn {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 4px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200); background: var(--app-surface); color: var(--c-500); cursor: pointer; transition: all .12s;
  font-family: inherit;
}
.sr-export-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.sr-export-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* List */
.sr-list { display: flex; flex-direction: column; gap: 6px; }
.sr-item {
  background: var(--app-surface); border: 1px solid var(--c-200); border-radius: var(--r-sm); overflow: hidden;
  transition: border-color .12s;
}
.sr-item.open { border-color: var(--c-300); }
.sr-item-summary { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; cursor: pointer; }
.sr-item-summary:hover { background: var(--c-50); }

/* Rank badge */
.sr-rank {
  width: 26px; height: 26px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: var(--font-extrabold); color: var(--c-400); background: var(--c-100); flex-shrink: 0; margin-top: 2px;
}
.sr-rank.gold { background: var(--warning-bg); color: #b45309; }
.sr-rank.silver { background: var(--c-100); color: var(--c-600); }
.sr-rank.bronze { background: var(--error-bg); color: var(--error-deep); }

.sr-item-main { flex: 1; min-width: 0; }
.sr-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.sr-item-name { font-size: var(--text-md); color: var(--c-900); flex-shrink: 0; }
.sr-item-metrics { display: flex; gap: 10px; flex-wrap: wrap; }
.sr-metric { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-700); }
.sr-metric small { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400); margin-left: 2px; }
.sr-metric--accent { color: var(--primary-deep); }
.sr-metric--good { color: var(--success-deep); }
.sr-metric--bad { color: var(--error); }

/* Progress bar */
.sr-bar-track { height: 4px; background: var(--c-100); border-radius: 2px; margin-bottom: 6px; }
.sr-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary)); border-radius: 2px; transition: width .3s; }

.sr-item-meta { display: flex; gap: 12px; font-size: var(--text-xs); color: var(--c-400); font-weight: var(--font-medium); }

.sr-arrow { color: var(--c-400); transition: transform .2s; flex-shrink: 0; margin-top: 6px; }
.sr-arrow.open { transform: rotate(180deg); }

/* Detail panel */
.sr-detail { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.sr-detail-section { }
.sr-detail-title {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); text-transform: uppercase;
  letter-spacing: .5px; display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}

/* Chart */
.sr-chart-wrap { background: var(--c-50); border: 1px solid var(--c-100); border-radius: var(--r-sm); padding: 12px 8px 4px; }
.sr-tooltip {
  background: var(--c-800); color: var(--c-100); padding: 8px 12px; border-radius: var(--r-sm);
  font-size: var(--text-xs); box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.sr-tooltip-label { font-weight: var(--font-bold); margin-bottom: 4px; }
.sr-tooltip-row { display: flex; align-items: center; gap: 6px; }
.sr-tooltip-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* Channel distribution */
.sr-channel-list { display: flex; flex-direction: column; gap: 6px; }
.sr-channel-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.sr-channel-name { width: 56px; font-weight: var(--font-bold); flex-shrink: 0; font-size: var(--text-xs); }
.sr-channel-bar-track { flex: 1; height: 6px; background: var(--c-100); border-radius: var(--r-xs); overflow: hidden; }
.sr-channel-bar-fill { height: 100%; border-radius: var(--r-xs); transition: width .3s; }
.sr-channel-val { font-weight: var(--font-semibold); color: var(--c-700); min-width: 65px; text-align: right; }
.sr-channel-qty { color: var(--c-400); min-width: 40px; text-align: right; }

/* Mini tables */
.sr-table { border: 1px solid var(--c-200); border-radius: var(--r-sm); overflow: hidden; }
.sr-table--compact .sr-table-scroll { max-height: 240px; overflow-y: auto; }
.sr-table-head {
  display: flex; padding: 6px 12px; background: var(--c-50); border-bottom: 1px solid var(--c-200);
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); text-transform: uppercase;
}
.sr-table-row { display: flex; padding: 6px 12px; border-bottom: 1px solid var(--c-100); font-size: var(--text-sm); }
.sr-table-row:last-child { border-bottom: none; }
.sr-th, .sr-td { flex: 1; text-align: right; }
.sr-th--name, .sr-td--name { flex: 2.5; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-th--date, .sr-td--date { flex: 1.2; text-align: left; }
.sr-td { color: var(--c-700); font-weight: var(--font-medium); }
.sr-td--name { font-weight: var(--font-semibold); color: var(--c-900); }
.sr-td--good { color: var(--success-deep); }
.sr-td--bad { color: var(--error); }
.sr-table-more { padding: 8px 12px; text-align: center; font-size: var(--text-xs); color: var(--c-400); }

/* Empty */
.sr-empty { text-align: center; padding: 40px; color: var(--c-400); font-size: var(--text-base); }

/* ── Supplier Report Dark Theme ── */
[data-theme="dark"] .sr-kpi { background: var(--app-surface); border-color: var(--c-200); }
[data-theme="dark"] .sr-kpi-value { color: var(--c-200); }
[data-theme="dark"] .sr-kpi-sub { color: var(--c-400); }
[data-theme="dark"] .sr-kpi-sub.good { color: var(--success); }
[data-theme="dark"] .sr-kpi-sub.bad { color: var(--error); }
[data-theme="dark"] .sr-sort-btn { background: var(--app-surface); border-color: var(--c-200); color: var(--c-400); }
[data-theme="dark"] .sr-sort-btn:hover { border-color: var(--primary-a30); color: var(--primary); }
[data-theme="dark"] .sr-sort-btn.active { background: var(--primary-glow); border-color: var(--primary-a30); color: var(--primary); }
[data-theme="dark"] .sr-item { background: var(--app-surface); border-color: var(--c-200); }
[data-theme="dark"] .sr-item.open { border-color: var(--primary-a30); }
[data-theme="dark"] .sr-item-summary:hover { background: #1e2130; }
[data-theme="dark"] .sr-rank { background: var(--c-100); color: var(--c-400); }
[data-theme="dark"] .sr-rank.gold { background: rgba(180,83,9,.2); color: var(--warning); }
[data-theme="dark"] .sr-rank.silver { background: var(--c-100); color: var(--c-200); }
[data-theme="dark"] .sr-rank.bronze { background: rgba(185,28,28,.15); color: var(--error); }
[data-theme="dark"] .sr-item-name { color: var(--c-200); }
[data-theme="dark"] .sr-metric { color: var(--c-200); }
[data-theme="dark"] .sr-metric--accent { color: var(--primary); }
[data-theme="dark"] .sr-metric--good { color: var(--success); }
[data-theme="dark"] .sr-metric--bad { color: var(--error); }
[data-theme="dark"] .sr-bar-track { background: var(--c-100); }
[data-theme="dark"] .sr-bar-fill { background: linear-gradient(90deg, var(--primary), var(--primary)); }
[data-theme="dark"] .sr-item-meta { color: var(--c-500); }
[data-theme="dark"] .sr-arrow { color: var(--c-500); }
[data-theme="dark"] .sr-detail-title { color: var(--c-500); }
[data-theme="dark"] .sr-chart-wrap { background: #151722; border-color: var(--c-200); }
[data-theme="dark"] .sr-channel-bar-track { background: var(--c-100); }
[data-theme="dark"] .sr-channel-val { color: var(--c-200); }
[data-theme="dark"] .sr-channel-qty { color: var(--c-500); }
[data-theme="dark"] .sr-table { border-color: var(--c-200); }
[data-theme="dark"] .sr-table-head { background: #151722; border-bottom-color: var(--c-200); }
[data-theme="dark"] .sr-table-row { border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .sr-td { color: var(--c-200); }
[data-theme="dark"] .sr-td--name { color: var(--c-200); }
[data-theme="dark"] .sr-td--good { color: var(--success); }
[data-theme="dark"] .sr-td--bad { color: var(--error); }
[data-theme="dark"] .sr-table-more { color: var(--c-500); }
[data-theme="dark"] .sr-empty { color: var(--c-500); }

/* ═══════════════════════════════════════════════════════════════
   모바일 반응형 보완 (480px 이하)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 헤더 컨트롤 */
  .sa-hd-row1 { padding: 12px 14px; }
  .sa-header-r { gap: 6px; }
  .sa-tab-export-btn span { display: none; }

  /* 일별 테이블 - 가로 스크롤 */
  .sa-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sa-tbl { min-width: 700px; }

  /* 탭 버튼 스크롤 */
  .sa-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .sa-tab { flex-shrink: 0; }

  /* 거래처/공급사 카드 */
  .sr-sort-bar { flex-wrap: wrap; gap: 6px; }
  .sr-export-btn span { display: none; }

  /* 날짜 컨트롤 */
  .sa-date-controls { gap: 6px; }
  .sa-quick-btns { gap: 4px; }
  .sa-quick-btn { padding: 4px 8px; font-size: 11px; }

  /* 플랫폼 목록 */
  .sa-plat-meta { flex-wrap: wrap; gap: 4px 10px; }

  /* 카드 패딩 */
  .sa-card { padding: 14px; border-radius: var(--r-md); }
  .sa-card-h { margin-bottom: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   판매처별 광고비 입력 (CostTab v2)
   ═══════════════════════════════════════════════════════════════ */
.sa-cost-wrap { display: flex; flex-direction: column; gap: 14px; }

/* 헤더 카드 */
.sa-cost-header-card {}
.sa-cost-header-left { display: flex; align-items: center; gap: 8px; }
.sa-cost-header-icon { color: var(--primary); flex-shrink: 0; }
.sa-cost-header-right { display: flex; gap: 4px; flex-wrap: wrap; }

/* 판매처 선택 바 */
.sa-cost-plat-bar {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-100);
}
.sa-cost-plat-label {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-500);
  padding-top: 5px; white-space: nowrap; flex-shrink: 0;
}
.sa-cost-plat-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.sa-cost-plat-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 99px;
  border: 1.5px solid var(--c-200); background: var(--app-surface);
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-500);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.sa-cost-plat-chip:hover { border-color: var(--primary); color: var(--primary); }
.sa-cost-plat-chip.active {
  border-color: var(--primary); background: var(--primary); color: white;
}
.sa-cost-plat-check { font-size: 10px; }
.sa-cost-plat-remove {
  font-size: 13px; line-height: 1; margin-left: 2px; opacity: 0.6;
  border-radius: 50%; padding: 0 2px;
}
.sa-cost-plat-remove:hover { opacity: 1; background: rgba(0,0,0,0.15); }
.sa-cost-plat-add-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 99px;
  border: 1.5px dashed var(--c-300); background: none;
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.sa-cost-plat-add-btn:hover { border-color: var(--primary); color: var(--primary); }
.sa-cost-plat-add-row {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin-top: 6px;
}
.sa-cost-plat-add-input {
  height: 30px; border: 1px solid var(--c-200); border-radius: var(--r-sm);
  padding: 0 10px; font-size: var(--text-sm); font-family: inherit;
  background: var(--app-surface); color: var(--c-800); outline: none;
  flex: 1; max-width: 200px;
}
.sa-cost-plat-add-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-a06); }

/* 테이블 카드 */
.sa-cost-table-card { padding: 0 !important; overflow: hidden; }
.sa-cost-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-cost-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  table-layout: auto;
}
.sa-cost-table th, .sa-cost-table td {
  border-bottom: 1px solid var(--c-100);
}

/* 날짜 열 */
.sa-cost-th-date {
  padding: 10px 14px 10px 20px; text-align: left;
  font-size: var(--text-xs); font-weight: var(--font-extrabold); color: var(--c-500);
  background: var(--c-50); white-space: nowrap; width: 100px;
  position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--c-150);
}
/* 플랫폼 열 */
.sa-cost-th-plat {
  padding: 10px 12px; text-align: center; width: 160px;
  font-size: var(--text-xs); font-weight: var(--font-extrabold); color: var(--c-500);
  background: var(--c-50); border-right: 1px solid var(--c-100);
}
/* 합계 열 */
.sa-cost-th-total {
  padding: 10px 20px 10px 12px; text-align: right; width: 110px;
  font-size: var(--text-xs); font-weight: var(--font-extrabold); color: var(--c-500);
  background: var(--c-50); white-space: nowrap;
  position: sticky; right: 0; z-index: 2; border-left: 1px solid var(--c-150);
}

/* 기간 합계 행 */
.sa-cost-subtotal-row { background: var(--primary-soft); }
.sa-cost-subtotal-label {
  padding: 8px 14px 8px 20px; font-size: var(--text-xs); font-weight: var(--font-extrabold);
  color: var(--primary); white-space: nowrap;
  position: sticky; left: 0; z-index: 1; background: var(--primary-soft);
  border-right: 1px solid rgba(99,102,241,.12);
}
.sa-cost-subtotal-val {
  padding: 8px 12px; text-align: center;
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--primary);
  border-right: 1px solid rgba(99,102,241,.08);
}
.sa-cost-subtotal-grand {
  padding: 8px 20px 8px 12px; text-align: right;
  font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--primary);
  position: sticky; right: 0; z-index: 1; background: var(--primary-soft);
  border-left: 1px solid rgba(99,102,241,.12);
}

/* 데이터 행 */
.sa-cost-tr { transition: background .08s; }
.sa-cost-tr:hover { background: var(--c-50); }
.sa-cost-tr.weekend td { background: #fdfcfb; }
.sa-cost-tr.weekend:hover td { background: #f7f5f2; }

.sa-cost-td-date {
  padding: 9px 14px 9px 20px; white-space: nowrap;
  position: sticky; left: 0; z-index: 1; background: var(--app-surface);
  border-right: 1px solid var(--c-150);
}
.sa-cost-tr:hover .sa-cost-td-date,
.sa-cost-tr:hover .sa-cost-td-total { background: var(--c-50); }
.sa-cost-tr.weekend .sa-cost-td-date,
.sa-cost-tr.weekend .sa-cost-td-total { background: #fdfcfb; }
.sa-cost-tr.weekend:hover .sa-cost-td-date,
.sa-cost-tr.weekend:hover .sa-cost-td-total { background: #f7f5f2; }

.sa-cost-date-main { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-800); margin-right: 5px; }
.sa-cost-day { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400); }
.sa-cost-day.weekend { color: #ef4444; }

/* 입력 셀 */
.sa-cost-td-input { padding: 6px 10px; border-right: 1px solid var(--c-100); }
.sa-cost-input-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sa-cost-input {
  width: 110px; height: 30px; text-align: right;
  border: 1px solid var(--c-200); border-radius: var(--r-sm);
  background: var(--app-surface); font-size: var(--text-sm);
  font-family: inherit; color: var(--c-800); padding: 0 8px; outline: none;
  transition: border-color .12s, box-shadow .12s;
  font-variant-numeric: tabular-nums;
}
.sa-cost-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-a06); }
.sa-cost-input:hover:not(:focus) { border-color: var(--c-300); }
.sa-cost-input::-webkit-inner-spin-button,
.sa-cost-input::-webkit-outer-spin-button { opacity: 0; }
.sa-cost-unit { font-size: 11px; color: var(--c-400); font-weight: var(--font-semibold); flex-shrink: 0; min-width: 14px; }

/* 일별 합계 셀 */
.sa-cost-td-total {
  padding: 9px 20px 9px 12px; text-align: right; white-space: nowrap;
  position: sticky; right: 0; z-index: 1; background: var(--app-surface);
  border-left: 1px solid var(--c-150);
}
.sa-cost-day-total { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-700); font-variant-numeric: tabular-nums; }
.sa-cost-zero { color: var(--c-250); font-size: var(--text-xs); }

/* 푸터 */
.sa-cost-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-top: 1px solid var(--c-100);
  background: var(--c-50); flex-wrap: wrap; gap: 10px;
}
.sa-cost-footer-info { display: flex; align-items: center; gap: 10px; }
.sa-cost-total-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500); }
.sa-cost-total-val { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--c-800); }
.sa-cost-dirty-badge {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--warning);
  background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--r-xs);
  padding: 2px 8px; animation: sa-blink 1.5s ease infinite;
}
.sa-cost-empty {
  padding: 40px; text-align: center; color: var(--c-400);
  font-size: var(--text-base); font-weight: var(--font-semibold);
}

/* 모바일 */
@media (max-width: 480px) {
  .sa-cost-plat-bar { flex-direction: column; }
  .sa-cost-input { width: 75px; }
  .sa-cost-footer { padding: 10px 14px; }
}

/* ── ConfirmModal (상품 삭제 등 확인 모달) ── */
.sa-modal-container {
  background: var(--app-surface);
  border-radius: var(--r-xl);
  padding: 32px 28px 24px;
  width: 340px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
  animation: sa-modal-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sa-modal-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sa-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--c-900);
  margin: 0;
  text-align: center;
}
.sa-modal-msg {
  font-size: var(--text-md);
  color: var(--c-500);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}
.sa-modal-details {
  width: 100%;
  background: var(--c-50);
  border-radius: var(--r-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sa-modal-detail-item {
  font-size: var(--text-sm);
  color: var(--c-500);
  padding-left: 12px;
  position: relative;
}
.sa-modal-detail-item::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: var(--c-300);
}
.sa-modal-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.sa-modal-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: var(--r-md);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.15s;
}
.sa-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sa-modal-btn.cancel {
  background: var(--c-100);
  color: var(--c-600);
}
.sa-modal-btn.cancel:hover:not(:disabled) { background: var(--c-200); }
.sa-modal-btn.confirm {
  color: #fff;
}
.sa-modal-btn.confirm:hover:not(:disabled) { opacity: 0.88; }
.sa-spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Settings Page Redesign ── */
.stg { padding: 20px; max-width: 860px; margin: 0 auto; }

/* Header */
.stg-hd {
  background: var(--page-hd-bg);
  border: 1px solid var(--page-hd-border);
  border-radius: var(--page-hd-radius);
  margin-bottom: var(--page-hd-mb);
  box-shadow: var(--page-hd-shadow);
  overflow: visible;
  position: relative;
}
.stg-hd-row1 {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-100);
}
.stg-hd-icon {
  color: var(--primary);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stg-hd-titles { flex: 1; min-width: 0; }
.stg-hd-title {
  font-size: var(--text-lg); font-weight: var(--font-extrabold);
  color: var(--c-900); margin: 0; letter-spacing: -0.02em; line-height: 1.2;
}
.stg-hd-sub {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--c-400); display: block; margin-top: 2px;
}
.stg-hd-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Header Tabs */
.stg-hd-tabs {
  display: flex; gap: 2px; padding: 10px 16px;
}
.stg-hd-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; border: none; background: none;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--c-500); border-radius: var(--r-sm);
  cursor: pointer; transition: all .12s; font-family: inherit;
  white-space: nowrap;
}
.stg-hd-tab:hover { color: var(--c-700); background: var(--c-50); }
.stg-hd-tab.active {
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: var(--font-bold);
}
[data-theme="dark"] .stg-hd-tab { color: var(--c-400); }
[data-theme="dark"] .stg-hd-tab:hover { background: var(--c-800); color: var(--c-200); }
[data-theme="dark"] .stg-hd-tab.active { background: var(--primary-deep); color: var(--primary); }

/* ── Settings Tabs ── */
.stg-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: var(--c-100); border-radius: var(--r-md); padding: 4px;
}
.stg-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border: none; background: none;
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-500);
  border-radius: var(--r-sm); cursor: pointer; transition: all .15s; font-family: inherit;
}
.stg-tab:hover { color: var(--c-600); background: rgba(255,255,255,.5); }
.stg-tab.active {
  background: var(--app-surface); color: var(--primary-deep);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"] .stg-tabs { background: var(--c-800); }
[data-theme="dark"] .stg-tab { color: var(--c-400); }
[data-theme="dark"] .stg-tab:hover { background: rgba(255,255,255,.05); color: var(--c-300); }
[data-theme="dark"] .stg-tab.active { background: var(--c-700); color: var(--primary); box-shadow: none; }

/* Error banner */
.stg-error {
  background: var(--error-bg); border: 1px solid var(--error-bg); border-radius: var(--r-md);
  padding: 10px 14px; margin-bottom: 16px; font-size: var(--text-base); color: var(--error-deep); font-weight: var(--font-semibold);
}

/* Section Card */
.stg-card {
  background: var(--app-surface); border: 1px solid var(--c-200); border-radius: var(--r-lg);
  margin-bottom: 14px; overflow: hidden;
  transition: box-shadow .15s;
}
.stg-card:hover { box-shadow: 0 1px 8px rgba(0,0,0,.04); }

.stg-card-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  cursor: pointer; user-select: none;
  border-bottom: 1px solid transparent;
  transition: background .1s;
}
.stg-card-hd:hover { background: var(--c-50); }
.stg-card.open .stg-card-hd { border-bottom-color: var(--c-100); }

.stg-card-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stg-card-icon.blue { background: var(--info-bg); color: var(--info); }
.stg-card-icon.purple { background: var(--primary-soft); color: var(--primary-text); }
.stg-card-icon.green { background: var(--success-bg); color: var(--success); }
.stg-card-icon.orange { background: var(--warning-bg); color: #f97316; }
.stg-card-icon.slate { background: var(--c-100); color: var(--c-600); }

.stg-card-info { flex: 1; min-width: 0; }
.stg-card-title { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-900); }
.stg-card-desc { font-size: var(--text-sm); color: var(--c-400); margin-top: 1px; }

.stg-card-chevron { transition: transform .2s; color: var(--c-400); flex-shrink: 0; }
.stg-card.open .stg-card-chevron { transform: rotate(180deg); }

.stg-card-body { display: none; padding: 16px 20px 20px; }
.stg-card.open .stg-card-body { display: block; }

/* ── Flow Guide (폴더 경로 흐름) ── */
.stg-flow-guide {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--info-bg) 0%, var(--primary-soft) 100%);
  border-radius: var(--r-md); border: 1px solid var(--primary-soft);
}
.stg-flow-step {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-600);
}
.stg-flow-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg);
}
.stg-flow-icon.in { background: var(--info-bg); }
.stg-flow-icon.process { background: var(--primary-soft); }
.stg-flow-icon.out { background: var(--success-bg); }
.stg-flow-arrow { color: var(--c-400); font-size: var(--text-lg); font-weight: var(--font-bold); }

/* ── Path Group (경로 입력) ── */
.stg-path-group { display: flex; flex-direction: column; gap: 10px; }
.stg-path-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stg-path-badge {
  width: 44px; flex-shrink: 0; text-align: center;
  font-size: var(--text-xs); font-weight: var(--font-bold); padding: 5px 0; border-radius: var(--r-sm);
}
.stg-path-badge.out { background: var(--success-bg); color: var(--success-text); }
.stg-path-badge.in { background: var(--info-bg); color: var(--primary-text); }
.stg-path-badge.invoice { background: var(--warning-bg); color: var(--warning-text); }
.stg-path-body { flex: 1; display: flex; gap: 8px; align-items: center; min-width: 0; }

/* ── Path badge: order (purple) ── */
.stg-path-badge.order { background: var(--primary-soft); color: var(--primary-text); }

/* ── Naver Password Section ── */
.stg-naver-pw-section { }
.stg-naver-pw-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.stg-naver-pw-badge {
  padding: 3px 10px; border-radius: var(--r-xs); font-size: var(--text-xs); font-weight: var(--font-bold);
  background: var(--success-bg); color: #15803d;
}
.stg-naver-pw-desc {
  font-size: var(--text-sm); color: var(--c-500);
}
.stg-naver-pw-field {
  display: flex; align-items: center; gap: 0;
  border: 2px solid var(--c-200); border-radius: var(--r-md);
  background: var(--app-surface); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.stg-naver-pw-field:focus-within {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.stg-naver-pw-input {
  flex: 1; border: none; outline: none;
  padding: 12px 16px; font-size: var(--text-md); font-weight: var(--font-semibold);
  color: var(--c-800); background: transparent;
  letter-spacing: 2px;
}
.stg-naver-pw-input::placeholder {
  letter-spacing: 0; color: #a1a1aa; font-weight: var(--font-normal); font-size: var(--text-base);
}
.stg-naver-pw-toggle {
  border: none; background: none; color: var(--c-400);
  padding: 12px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .12s;
}
.stg-naver-pw-toggle:hover { color: #22c55e; }

/* ── Time Preview ── */
.stg-time-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--warning-bg); border-radius: var(--r-sm); border: 1px solid var(--warning-bg);
}
.stg-time-preview-label {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--warning-text);
  background: var(--warning-bg); padding: 3px 8px; border-radius: var(--r-xs); flex-shrink: 0;
}
.stg-time-preview-file {
  font-size: var(--text-sm); color: #78350f; font-family: 'SF Mono', 'Consolas', monospace;
}
.stg-time-preview-file b { color: #f97316; }

/* ── Time Chips ── */
.stg-time-chips {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; min-height: 36px; align-items: center;
}
.stg-time-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 14px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: var(--app-surface); font-size: var(--text-base); font-weight: var(--font-bold);
  box-shadow: 0 2px 6px rgba(249,115,22,.25);
}
.stg-time-chip-label { white-space: nowrap; }
.stg-time-chip-del {
  border: none; background: rgba(255,255,255,.25); color: var(--app-surface);
  width: 20px; height: 20px; border-radius: 50%;
  cursor: pointer; font-size: var(--text-xs); display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.stg-time-chip-del:hover { background: rgba(255,255,255,.5); }
.stg-time-empty { font-size: var(--text-base); color: var(--c-400); font-style: italic; }

/* ── Time Builder (Spinner Style) ── */
.stg-tbuilder {
  padding: 20px; border-radius: var(--r-lg);
  background: var(--app-surface); border: 1.5px solid var(--c-100);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.stg-tbuilder-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.stg-tbuilder-title {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-500);
  text-transform: uppercase; letter-spacing: .5px;
}
.stg-tbuilder-result {
  font-size: var(--text-lg); font-weight: var(--font-extrabold); color: #f97316;
  background: var(--warning-bg); padding: 4px 14px; border-radius: var(--r-xl);
  border: 1.5px solid #fed7aa;
}

/* Spinners row */
.stg-tbuilder-spinners {
  display: flex; align-items: center; gap: 8px; justify-content: center;
}

/* Individual spinner */
.stg-spinner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.stg-spinner-arrow {
  border: none; background: var(--c-50); color: var(--c-400);
  width: 64px; height: 28px; border-radius: var(--r-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.stg-spinner-arrow:hover { background: #f97316; color: var(--app-surface); }
.stg-spinner-arrow:active { transform: scale(.93); }

.stg-spinner-input {
  width: 64px; height: 52px;
  background: var(--c-50); border: 2px solid var(--c-200); border-radius: var(--r-md);
  font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--c-800);
  text-align: center; outline: none;
  transition: border-color .15s, box-shadow .15s;
  -moz-appearance: textfield;
}
.stg-spinner-input::-webkit-outer-spin-button,
.stg-spinner-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.stg-spinner-input:focus {
  border-color: #f97316; background: var(--app-surface);
  box-shadow: 0 0 0 3px rgba(249,115,22,.1);
}
.stg-spinner-input.period {
  font-size: var(--text-lg); letter-spacing: -0.5px;
}

.stg-spinner-label {
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-400);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}

.stg-spinner-sep {
  font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--c-300);
  padding: 0 2px; margin-top: -22px;
}

/* Add button */
.stg-tbuilder-add {
  margin-left: 12px; padding: 14px 22px;
  border: none; border-radius: var(--r-md);
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: var(--app-surface); font-size: var(--text-md); font-weight: var(--font-bold);
  cursor: pointer; transition: all .15s;
  box-shadow: 0 4px 12px rgba(249,115,22,.3);
  white-space: nowrap; align-self: center; margin-top: -22px;
}
.stg-tbuilder-add:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(249,115,22,.4); }
.stg-tbuilder-add:active { transform: scale(.97); }
.stg-tbuilder-add.disabled {
  background: var(--c-200); color: var(--c-400); cursor: not-allowed;
  box-shadow: none; transform: none;
}

/* ── Usage Guide (거래처 사용법) ── */
.stg-guide {
  padding: 14px 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--info-bg) 100%);
  border-radius: var(--r-md); border: 1px solid var(--primary-a12);
}
.stg-guide-title {
  font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--primary-text);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
}
.stg-guide-steps { display: flex; gap: 16px; }
.stg-guide-step {
  display: flex; gap: 8px; align-items: flex-start; flex: 1;
}
.stg-guide-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: var(--app-surface); font-size: var(--text-sm); font-weight: var(--font-bold);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.stg-guide-step b {
  display: block; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-700);
  margin-bottom: 2px;
}
.stg-guide-step span {
  font-size: var(--text-xs); color: var(--c-500); line-height: 1.3;
}

/* ── Empty State ── */
.stg-empty-state {
  padding: 28px 20px; text-align: center;
  border-radius: var(--r-md); background: var(--c-50);
}
.stg-empty-icon { font-size: var(--text-3xl); margin-bottom: 8px; }
.stg-empty-title { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--c-600); margin-bottom: 6px; }
.stg-empty-desc { font-size: var(--text-sm); color: var(--c-400); line-height: 1.5; }

/* ── Mode Description ── */
.stg-mode-desc {
  font-size: var(--text-sm); color: var(--c-500); margin-bottom: 6px;
  padding: 6px 10px; background: var(--c-50); border-radius: var(--r-sm);
}
.stg-mode-badge {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--primary-text);
  background: var(--primary-soft); padding: 2px 8px; border-radius: var(--r-xs); margin-right: 4px;
}

/* ── Template List (improved) ── */
.stg-template-list { display: flex; flex-direction: column; gap: 8px; }
.stg-template-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--c-50); border: 1px solid var(--c-100);
}
.stg-template-name {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-700);
  width: 70px; flex-shrink: 0;
}
.stg-template-status {
  font-size: var(--text-xs); color: var(--c-400); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Field rows ── */
.stg-field { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.stg-field:last-child { margin-bottom: 0; }
.stg-label {
  width: 110px; flex-shrink: 0;
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-700);
}
.stg-input {
  flex: 1; padding: 9px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--c-50); color: var(--c-900); font-size: var(--text-base);
  outline: none; transition: border-color .15s, background .15s;
  min-width: 0;
}
.stg-input:focus { border-color: var(--primary-soft); background: var(--app-surface); }
.stg-input::placeholder { color: var(--c-300); }

.stg-select {
  padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--c-50); color: var(--c-900); font-size: var(--text-base);
  outline: none; cursor: pointer; flex: 1; min-width: 0;
}
.stg-select:focus { border-color: var(--primary-soft); background: var(--app-surface); }

.stg-hint { font-size: var(--text-xs); color: var(--c-400); margin-top: 4px; line-height: 1.4; }

/* Buttons */
.stg-btn {
  padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--app-surface); color: var(--c-700); font-size: var(--text-base); font-weight: var(--font-semibold);
  cursor: pointer; transition: all .1s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.stg-btn:hover { background: var(--c-100); }
.stg-btn:disabled { opacity: .5; cursor: not-allowed; }
.stg-btn.primary { background: var(--primary); color: var(--app-surface); border-color: var(--primary); }
.stg-btn.primary:hover { background: var(--primary-deep); }
.stg-btn.save { background: var(--success); color: var(--app-surface); border-color: var(--success); }
.stg-btn.save:hover { background: var(--success-deep); }
.stg-btn.danger { color: var(--error); border-color: var(--error-bg); }
.stg-btn.danger:hover { background: var(--error-bg); }
.stg-btn.sm { padding: 5px 10px; font-size: var(--text-sm); border-radius: var(--r-sm); }

/* Folder button */
.stg-folder-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--c-200);
  background: var(--c-50); color: var(--c-600); font-size: var(--text-sm); font-weight: var(--font-semibold);
  cursor: pointer; transition: all .1s;
}
.stg-folder-btn:hover { background: var(--c-200); }
.stg-folder-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Company list item */
.stg-company-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--c-100);
  background: var(--c-50); margin-bottom: 8px;
}
.stg-company-item:last-child { margin-bottom: 0; }
.stg-company-code {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--info);
  background: var(--info-bg); padding: 3px 10px; border-radius: var(--r-xs);
  flex-shrink: 0;
}

/* Preset chips */
.stg-preset-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.stg-preset-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--c-100); color: var(--c-700); font-size: var(--text-base); font-weight: var(--font-semibold);
  border: 1px solid var(--c-200);
}
.stg-preset-chip button {
  border: none; background: none; color: var(--c-400); cursor: pointer;
  font-size: var(--text-base); line-height: 1; padding: 0 2px; display: flex;
}
.stg-preset-chip button:hover { color: var(--error); }

/* Subfolder controls row */
.stg-subdir-controls {
  display: flex; align-items: center; gap: 12px;
}
.stg-subdir-controls .stg-select { flex: 1; }

/* Toggle switch */
.stg-toggle-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  white-space: nowrap; user-select: none; width: fit-content;
}
.stg-toggle-label input { display: none; }
.stg-toggle-switch {
  width: 38px; height: 22px; border-radius: var(--r-md);
  background: var(--c-300); position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.stg-toggle-switch::after {
  content: ''; position: absolute;
  top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--app-surface);
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.stg-toggle-label input:checked + .stg-toggle-switch {
  background: #f97316;
}
.stg-toggle-label input:checked + .stg-toggle-switch::after {
  transform: translateX(16px);
}
.stg-toggle-text {
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--c-500);
}
.stg-toggle-label input:checked ~ .stg-toggle-text {
  color: #f97316;
}

/* Subfolder path preview */
.stg-subdir-preview {
  margin-top: 8px; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--c-50); border: 1px solid var(--c-200);
  font-size: var(--text-sm); color: var(--c-500); font-family: monospace;
  word-break: break-all;
}
.stg-subdir-preview b { color: #f97316; }

/* Preset builder */
.stg-preset-builder {
  padding: 16px; border-radius: var(--r-md);
  background: var(--c-50); border: 1.5px solid var(--c-100);
}
.stg-preset-builder-label {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--c-400);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
.stg-preset-quick {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.stg-preset-quick-btn {
  border: 1.5px solid var(--c-200); background: var(--app-surface); color: var(--c-700);
  padding: 8px 16px; border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer;
  transition: all .12s;
}
.stg-preset-quick-btn:hover:not(.added) {
  border-color: #f97316; color: #f97316; background: var(--warning-bg);
}
.stg-preset-quick-btn.added {
  background: var(--c-100); color: var(--c-400); border-color: var(--c-200); cursor: default;
}
.stg-preset-quick-btn.supplier {
  border-style: dashed;
}
.stg-preset-quick-btn.supplier:hover:not(.added) {
  border-color: var(--primary); color: var(--primary); background: var(--primary-soft);
}

/* variable tag */
.stg-var-tag {
  display: inline-block; padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--primary-soft); color: var(--primary-text); font-size: var(--text-xs); font-weight: var(--font-bold);
}
.stg-preset-custom {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--c-100);
}
.stg-preset-custom code {
  padding: 1px 5px; border-radius: var(--r-xs);
  background: var(--c-100); color: var(--c-600); font-size: var(--text-xs);
}

.stg-divider { border: none; border-top: 1px solid var(--c-100); margin: 16px 0; }

.stg-add-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px; border-radius: var(--r-md); border: 1px dashed var(--c-200);
  background: var(--c-50);
}

/* Active badge */
.stg-badge {
  font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 2px 8px; border-radius: var(--r-xs);
}
.stg-badge.on { background: var(--success-bg); color: var(--success-deep); }
.stg-badge.off { background: var(--c-100); color: var(--c-400); }

/* Sub-section title */
.stg-sub-title {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-600);
  margin-bottom: 10px; margin-top: 16px;
  padding-bottom: 6px; border-bottom: 1px solid var(--c-100);
}
.stg-sub-title:first-child { margin-top: 0; }

/* Supplier section */
.stg-supplier-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.stg-supplier-list {
  max-height: 380px; overflow: auto;
  border: 1px solid var(--c-200); border-radius: var(--r-md); background: var(--c-50);
}
.stg-supplier-row {
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--c-100);
  transition: background .1s;
}
.stg-supplier-row:last-child { border-bottom: none; }
.stg-supplier-row:hover { background: var(--c-100); }
.stg-supplier-row.active { background: var(--info-bg); border-left: 3px solid var(--info); }

.stg-micro-btn {
  padding: 2px 7px; border-radius: var(--r-xs);
  border: 1px solid var(--c-200); background: var(--app-surface);
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500);
  cursor: pointer; transition: all .1s; line-height: 1.2;
}
.stg-micro-btn:hover { background: var(--c-100); color: var(--c-700); }
.stg-micro-btn:disabled { opacity: .35; cursor: not-allowed; }

.stg-template-grid {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 8px; align-items: center;
}

/* ── Actual Price Table ── */
.stg-actual-price-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-base);
}
.stg-actual-price-table th {
  padding: 6px 4px; text-align: left; font-weight: var(--font-semibold);
  color: var(--c-500); font-size: var(--text-sm); border-bottom: 2px solid var(--c-200);
  white-space: nowrap;
}
.stg-actual-price-table td { padding: 3px 2px; vertical-align: middle; }
.stg-actual-price-table tr.dirty td { background: var(--warning-bg); }
.stg-actual-price-table tbody tr:hover td { background: var(--c-50); }
.stg-actual-price-table tr.dirty:hover td { background: var(--warning-bg); }

.stg-input.compact, .stg-select.compact {
  padding: 4px 6px; font-size: var(--text-sm); height: 28px;
  border-radius: var(--r-xs); width: 100%;
}
.stg-input.compact.right { text-align: right; }

.stg-btn.icon-only {
  padding: 3px 5px; min-width: unset; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
}
.stg-btn.icon-only.danger { color: var(--error); border-color: var(--error-bg); }
.stg-btn.icon-only.danger:hover { background: var(--error-bg); }

/* Responsive */
@media (max-width: 640px) {
  .stg { padding: 12px; }
  .stg-hd { flex-direction: column; gap: 10px; align-items: flex-start; }
  .stg-field { flex-direction: column; align-items: flex-start; gap: 4px; }
  .stg-label { width: auto; }
  .stg-company-item { flex-direction: column; align-items: flex-start; }
  .stg-supplier-grid { grid-template-columns: 1fr; }
  .stg-flow-guide { flex-direction: column; gap: 6px; }
  .stg-flow-arrow { transform: rotate(90deg); }
  .stg-guide-steps { flex-direction: column; gap: 10px; }
  .stg-path-item { flex-direction: column; align-items: stretch; }
  .stg-path-badge { width: auto; }
}

/* ── 백업/복원 ── */
.stg-backup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stg-backup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--c-50);
  border: 1px solid var(--c-200);
  border-radius: var(--r-sm);
  transition: background .15s;
}
.stg-backup-item:hover { background: var(--c-100); }

.stg-backup-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.stg-backup-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--c-800);
}

.stg-backup-meta {
  font-size: var(--text-sm);
  color: var(--c-400);
  display: flex;
  align-items: center;
  gap: 8px;
}

.stg-backup-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}
.stg-backup-tag.auto { background: var(--success-bg); color: var(--success-deep); }
.stg-backup-tag.manual { background: var(--primary-soft); color: var(--primary); }
.stg-backup-tag.other { background: var(--c-100); color: var(--c-500); }

.stg-backup-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── 복원/삭제 확인 row ── */
.stg-backup-item.is-confirming {
  border-color: var(--warning);
  background: #fffbeb;
}
[data-theme="dark"] .stg-backup-item.is-confirming { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.4); }

.stg-backup-confirm-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.stg-backup-confirm-msg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--c-600);
  font-weight: var(--font-semibold);
  line-height: 1.4;
}

/* ── 보관 개수 선택 ── */
.stg-select-sm {
  height: 28px;
  padding: 2px 6px;
  font-size: var(--text-sm);
  border: 1px solid var(--c-200);
  border-radius: var(--r-xs);
  background: var(--app-surface);
  color: var(--c-700);
  cursor: pointer;
  font-family: inherit;
}
.stg-select-sm:focus { outline: none; border-color: var(--primary-soft); }
[data-theme="dark"] .stg-select-sm { background: var(--c-800); border-color: var(--c-600); color: var(--c-200); }

/* ── SCard gray color ── */
.stg-card-icon.gray { background: var(--c-100); color: var(--c-500); }
.stg-card-icon.teal { background: #f0fdfa; color: #14b8a6; }
.stg-card-icon.violet { background: #f5f3ff; color: #7c3aed; }
[data-theme="dark"] .stg-card-icon.violet { background: rgba(124,58,237,.2); color: #a78bfa; }

/* ══════════════════════════════════════════
   Webhook 설정
   ══════════════════════════════════════════ */
.stg-webhook-form {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; background: var(--c-50);
  border: 1px solid var(--c-150); border-radius: var(--r-md); margin-bottom: 14px;
}
.stg-webhook-form-row {
  display: flex; gap: 8px;
}
.stg-webhook-form-row .stg-input { flex: 1; }

.stg-webhook-events {
  display: flex; flex-direction: column; gap: 6px;
}
.stg-webhook-events-label {
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--c-500);
}
.stg-webhook-event-list {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.stg-webhook-event-item {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); color: var(--c-700); cursor: pointer;
  user-select: none;
}
.stg-webhook-event-item input[type="checkbox"] { cursor: pointer; }

.stg-webhook-list {
  display: flex; flex-direction: column; gap: 8px;
}
.stg-webhook-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--c-50); border: 1px solid var(--c-150);
  border-radius: var(--r-md); transition: background .15s;
}
.stg-webhook-item:hover { background: var(--c-100); }
.stg-webhook-item.inactive { opacity: 0.55; }

.stg-webhook-edit-wrap {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
}

.stg-webhook-info {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
}
.stg-webhook-name-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.stg-webhook-name {
  font-size: var(--text-base); font-weight: var(--font-bold); color: var(--c-800);
}
.stg-webhook-url {
  font-size: var(--text-xs); color: var(--c-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stg-webhook-meta {
  font-size: var(--text-xs); color: var(--c-500);
}
.stg-webhook-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

[data-theme="dark"] .stg-webhook-form { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .stg-webhook-item { background: var(--c-800); border-color: var(--c-700); }
[data-theme="dark"] .stg-webhook-item:hover { background: var(--c-700); }
[data-theme="dark"] .stg-webhook-name { color: var(--c-100); }
[data-theme="dark"] .stg-webhook-event-item { color: var(--c-300); }

/* ── Webhook 발송 이력 ── */
.stg-webhook-log-section {
  margin-top: 16px;
  border-top: 1px solid var(--c-150);
  padding-top: 12px;
}
.stg-webhook-log-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--c-600); background: none; border: none; cursor: pointer;
  padding: 4px 0;
}
.stg-webhook-log-toggle:hover { color: var(--c-900); }
.stg-webhook-log-wrap {
  margin-top: 10px;
}
.stg-webhook-log-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.stg-webhook-log-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  border: 1px solid var(--c-150); border-radius: var(--r-md); overflow: hidden;
}
.stg-webhook-log-table th {
  padding: 7px 10px; text-align: left; font-weight: var(--font-semibold);
  color: var(--c-500); background: var(--c-50);
  border-bottom: 1px solid var(--c-150); white-space: nowrap;
}
.stg-webhook-log-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--c-100);
  color: var(--c-700); vertical-align: middle;
}
.stg-webhook-log-table tbody tr:last-child td { border-bottom: none; }
.stg-webhook-log-table tbody tr:hover td { background: var(--c-50); }
.stg-wl-time { color: var(--c-400) !important; white-space: nowrap; }
.stg-wl-event {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  background: var(--c-100); color: var(--c-600); font-size: 11px;
}
.stg-wl-title { color: var(--c-600) !important; }
.stg-wl-status {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 11px; font-weight: var(--font-semibold); white-space: nowrap;
}
.stg-wl-status-success { background: #dcfce7; color: #16a34a; }
.stg-wl-status-failed  { background: #fee2e2; color: #dc2626; }

[data-theme="dark"] .stg-webhook-log-section { border-color: var(--c-700); }
[data-theme="dark"] .stg-webhook-log-toggle { color: var(--c-400); }
[data-theme="dark"] .stg-webhook-log-toggle:hover { color: var(--c-100); }
[data-theme="dark"] .stg-webhook-log-table { border-color: var(--c-700); }
[data-theme="dark"] .stg-webhook-log-table th { background: var(--c-800); border-color: var(--c-700); color: var(--c-400); }
[data-theme="dark"] .stg-webhook-log-table td { border-color: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .stg-webhook-log-table tbody tr:hover td { background: var(--c-800); }
[data-theme="dark"] .stg-wl-event { background: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .stg-wl-status-success { background: rgba(22,163,74,.15); color: #4ade80; }
[data-theme="dark"] .stg-wl-status-failed  { background: rgba(220,38,38,.15); color: #f87171; }

/* ══════════════════════════════════════════
   로그 뷰어
   ══════════════════════════════════════════ */
.stg-log-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.stg-log-select {
  padding: 6px 10px;
  border: 1px solid var(--border, var(--c-200));
  border-radius: var(--r-xs);
  font-size: var(--text-base);
  background: var(--bg-card, var(--app-surface));
  color: var(--text, var(--c-800));
  min-width: 200px;
}
.stg-log-levels {
  display: flex;
  gap: 2px;
  background: var(--bg-subtle, var(--c-100));
  border-radius: var(--r-xs);
  padding: 2px;
}
.stg-log-level-btn {
  padding: 4px 10px;
  border: none;
  border-radius: var(--r-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  cursor: pointer;
  background: transparent;
  color: var(--text-muted, var(--c-400));
  transition: all 0.15s;
}
.stg-log-level-btn:hover { background: rgba(0,0,0,0.04); }
.stg-log-level-btn.active {
  background: var(--bg-card, var(--app-surface));
  color: var(--text, var(--c-800));
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.stg-log-level-btn.active.error { color: var(--error); }
.stg-log-level-btn.active.warn { color: var(--warning); }

.stg-log-viewer {
  background: var(--c-900);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  max-height: 420px;
  overflow-y: auto;
  font-family: 'Consolas', 'D2Coding', 'Source Code Pro', monospace;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--c-300);
  scroll-behavior: smooth;
}
.stg-log-viewer::-webkit-scrollbar { width: 6px; }
.stg-log-viewer::-webkit-scrollbar-track { background: transparent; }
.stg-log-viewer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: var(--r-xs); }

.stg-log-line {
  white-space: pre-wrap;
  word-break: break-all;
  padding: 1px 0;
}
.stg-log-line.error {
  color: var(--error);
  background: var(--error-bg);
  border-left: 2px solid var(--error);
  padding-left: 8px;
  margin-left: -8px;
}
.stg-log-line.warn {
  color: #fcd34d;
  background: rgba(245,158,11,0.06);
  border-left: 2px solid var(--warning);
  padding-left: 8px;
  margin-left: -8px;
}

.stg-log-path-link {
  color: var(--primary-text);
  text-decoration: underline dotted;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: inherit;
  padding: 0 1px;
  border-radius: 3px;
  transition: background .1s;
}
.stg-log-path-link:hover {
  background: var(--primary-soft);
}

.stg-log-loading, .stg-log-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0;
  color: var(--c-500);
  font-family: inherit;
  font-size: var(--text-base);
}
.stg-log-truncated {
  text-align: center;
  padding: 6px 0 10px;
  color: var(--c-500);
  font-size: var(--text-xs);
  font-family: inherit;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  margin-bottom: 8px;
}

/* ── 업데이트 섹션 ── */
.stg-update-version-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--c-50); border: 1px solid var(--c-150);
  margin-bottom: 4px;
}
.stg-update-cur-ver {
  font-size: 13px; color: var(--c-500);
}
.stg-update-cur-ver strong {
  font-size: 14px; font-weight: 700;
  color: var(--primary-text); margin-left: 4px;
}
.stg-update-grid {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.stg-update-field {
  display: flex; flex-direction: column; gap: 5px;
}
.stg-update-label {
  font-size: 12px; font-weight: 600; color: var(--c-500);
}
.stg-update-label-hint {
  font-size: 11px; font-weight: 400; color: var(--c-400);
}
.stg-update-repo-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.stg-update-repo-row .stg-input {
  max-width: 160px; flex: 1;
}
.stg-update-repo-prefix {
  font-size: 12px; color: var(--c-400); white-space: nowrap;
}
.stg-update-repo-sep {
  font-size: 14px; color: var(--c-400);
}
.stg-input-mono {
  font-family: 'Consolas', 'Menlo', monospace !important;
  font-size: 12px !important;
  letter-spacing: .3px;
}
.stg-update-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.stg-update-result {
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px;
}
.stg-update-result[data-kind="ok"]  { background: var(--success-bg); color: var(--success-deep); }
.stg-update-result[data-kind="new"] { background: var(--primary-soft); color: var(--primary-text); }
.stg-update-result[data-kind="err"] { background: var(--error-bg); color: var(--error); }

[data-theme="dark"] .stg-update-version-row { background: var(--c-800); border-color: var(--c-700); }


/* ═══════════════════════════════════════════════
   Platform Integration (연동 탭)
   ═══════════════════════════════════════════════ */
.pi-section { display: flex; flex-direction: column; gap: 10px; }

/* Platform Card */
.pi-card {
  background: var(--c-0);
  border: 1px solid var(--c-150);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.pi-card:hover { border-color: var(--c-200); }
.pi-card.connected { border-left: 3px solid var(--primary); }
.pi-card.expanded { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Card Header */
.pi-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; user-select: none;
  transition: background .1s;
}
.pi-card-hd:hover { background: var(--c-25); }
.pi-card-left { display: flex; align-items: center; gap: 10px; }
.pi-platform-name { font-size: 14px; font-weight: 700; color: var(--c-800); }
.pi-card-right { display: flex; align-items: center; gap: 8px; }

/* Status Badge */
.pi-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: 20px; white-space: nowrap;
}
.pi-status-badge.active { background: var(--success-bg); color: var(--success-deep); }
.pi-status-badge.inactive { background: var(--c-100); color: var(--c-500); }
.pi-status-badge.not-connected { background: var(--c-75); color: var(--c-400); }

.pi-last-sync {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--c-400); white-space: nowrap;
}

.pi-chevron { transition: transform .2s; color: var(--c-400); flex-shrink: 0; }
.pi-chevron.open { transform: rotate(180deg); }

/* Card Body */
.pi-card-body { padding: 0 16px 14px; }

/* Credential Summary (connected state) */
.pi-cred-summary {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; background: var(--c-25); border-radius: var(--r-md);
  margin-bottom: 12px;
}
.pi-cred-row { display: flex; align-items: center; gap: 8px; }
.pi-cred-label { font-size: 12px; font-weight: 600; color: var(--c-500); min-width: 120px; }
.pi-cred-value { font-size: 12px; color: var(--c-700); font-family: 'SF Mono', monospace; }

/* Sync Settings */
.pi-sync-settings { margin-bottom: 12px; }
.pi-sync-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pi-toggle-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--c-700); cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.pi-interval-select {
  font-size: 12px; padding: 3px 8px; border: 1px solid var(--c-200);
  border-radius: var(--r-sm); background: var(--c-0); color: var(--c-700);
  font-family: inherit; cursor: pointer; min-width: 0;
}
.pi-last-sync-detail { font-size: 12px; color: var(--c-400); }
.pi-sync-ok { color: var(--success-deep); }
.pi-sync-err { color: var(--error); }

/* Form (not-connected state) */
.pi-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pi-form-row { display: flex; flex-direction: column; gap: 4px; }
.pi-form-label { font-size: 12px; font-weight: 600; color: var(--c-600); }
.pi-required { color: var(--error); margin-left: 2px; }
.pi-form-input-wrap { position: relative; display: flex; align-items: center; }
.pi-form-input-wrap .stg-input { flex: 1; padding-right: 32px; }
.pi-eye-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--c-400); cursor: pointer;
  padding: 2px; display: flex; align-items: center;
}
.pi-eye-btn:hover { color: var(--c-600); }

/* Actions */
.pi-card-actions {
  display: flex; gap: 6px; padding-top: 10px;
  border-top: 1px solid var(--c-100);
}

/* Sync Logs */
.pi-logs { margin-top: 16px; }
.pi-logs-title {
  font-size: 13px; font-weight: 700; color: var(--c-600);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--c-100);
}
.pi-logs-list { display: flex; flex-direction: column; gap: 2px; }
.pi-log-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 12px; color: var(--c-600);
}
.pi-log-item:nth-child(odd) { background: var(--c-25); }
.pi-log-time { color: var(--c-400); min-width: 50px; font-variant-numeric: tabular-nums; }
.pi-log-platform { font-weight: 600; min-width: 50px; }
.pi-log-type { color: var(--c-400); min-width: 28px; }
.pi-log-status { display: flex; align-items: center; }
.pi-log-status.success { color: var(--success-deep); }
.pi-log-status.error { color: var(--error); }
.pi-log-detail { color: var(--c-500); }

.pi-loading {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  padding: 20px; color: var(--c-400); font-size: 13px;
}

/* Guide Box (사용 안내) */
.pi-guide-box {
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 4px;
}
.pi-guide-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; cursor: pointer; user-select: none;
  color: var(--primary-deep); font-size: 13px; font-weight: 700;
}
.pi-guide-title { flex: 1; }
.pi-guide-body {
  padding: 0 16px 14px;
  font-size: 13px; line-height: 1.7; color: var(--c-700);
}
.pi-guide-body p { margin: 0 0 12px; }
.pi-guide-body strong { color: var(--primary-deep); }

.pi-guide-steps { display: flex; flex-direction: column; gap: 8px; }
.pi-guide-step {
  display: flex; align-items: flex-start; gap: 10px;
}
.pi-step-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  border-radius: 50%; font-size: 11px; font-weight: 800;
}
.pi-guide-step > div { display: flex; flex-direction: column; }
.pi-guide-step > div > strong { font-size: 13px; color: var(--c-800); }
.pi-guide-step > div > span { font-size: 12px; color: var(--c-500); }

/* Summary Bar */
.pi-summary-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--c-25); border-radius: var(--r-md);
  font-size: 13px; color: var(--c-600);
  margin-bottom: 2px;
}
.pi-summary-active {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  background: var(--success-bg); color: var(--success-deep);
}

/* Platform-specific Guide (inside card) */
.pi-platform-guide {
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--c-25); border-radius: var(--r-md);
  border-left: 3px solid var(--primary);
}
.pi-platform-guide-title {
  font-size: 12px; font-weight: 700; color: var(--c-600);
  margin-bottom: 6px;
}
.pi-platform-guide-steps {
  margin: 0; padding-left: 18px;
  font-size: 12px; color: var(--c-600); line-height: 1.8;
}
.pi-platform-guide-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--primary);
  text-decoration: none; margin-top: 6px;
}
.pi-platform-guide-link:hover { text-decoration: underline; }

/* Card Hint */
.pi-card-hint {
  font-size: 11px; color: var(--c-400);
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--c-100);
  line-height: 1.6;
}

/* Dark mode */
[data-theme="dark"] .pi-guide-box { background: color-mix(in srgb, var(--primary) 10%, var(--c-900)); border-color: color-mix(in srgb, var(--primary) 20%, var(--c-700)); }
[data-theme="dark"] .pi-guide-body { color: var(--c-300); }
[data-theme="dark"] .pi-guide-step > div > strong { color: var(--c-200); }
[data-theme="dark"] .pi-guide-step > div > span { color: var(--c-400); }
[data-theme="dark"] .pi-summary-bar { background: var(--c-800); color: var(--c-300); }
[data-theme="dark"] .pi-platform-guide { background: var(--c-800); }
[data-theme="dark"] .pi-card-hint { color: var(--c-500); border-color: var(--c-700); }
[data-theme="dark"] .pi-card { background: var(--c-900); border-color: var(--c-700); }
[data-theme="dark"] .pi-card.connected { border-left-color: var(--primary); }
[data-theme="dark"] .pi-card-hd:hover { background: var(--c-800); }
[data-theme="dark"] .pi-platform-name { color: var(--c-100); }
[data-theme="dark"] .pi-cred-summary { background: var(--c-800); }
[data-theme="dark"] .pi-cred-value { color: var(--c-300); }
[data-theme="dark"] .pi-interval-select { background: var(--c-800); border-color: var(--c-600); color: var(--c-200); }

/* ── 연동 해제 확인 모달 ── */
.pi-del-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: pi-fade-in 0.15s ease;
}
@keyframes pi-fade-in { from { opacity: 0 } to { opacity: 1 } }

.pi-del-modal {
  position: relative;
  background: var(--app-surface);
  border-radius: var(--r-lg);
  padding: 32px 28px 24px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: pi-slide-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pi-slide-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px) }
  to   { opacity: 1; transform: scale(1) translateY(0) }
}

.pi-del-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--c-400); padding: 4px; border-radius: var(--r-xs);
  transition: all 0.15s;
}
.pi-del-close:hover { background: var(--c-100); color: var(--c-600); }

.pi-del-icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  display: flex; align-items: center; justify-content: center;
}

.pi-del-title {
  text-align: center;
  font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--c-800);
  margin: 0 0 12px;
}

.pi-del-desc {
  text-align: center;
  font-size: var(--text-base); color: var(--c-600);
  margin: 0 0 6px; line-height: 1.5;
}
.pi-del-desc strong { color: var(--c-800); }

.pi-del-warn {
  text-align: center;
  font-size: 11.5px; color: var(--c-400);
  margin: 0 0 20px;
}

.pi-del-actions {
  display: flex; gap: 8px;
}

.pi-del-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: var(--font-semibold);
  cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s; font-family: inherit;
}
.pi-del-btn.cancel { background: var(--c-100); color: var(--c-600); }
.pi-del-btn.cancel:hover { background: var(--c-200); }
.pi-del-btn.confirm { background: var(--danger); color: #fff; }
.pi-del-btn.confirm:hover { filter: brightness(0.9); }

/* Dark mode - 연동 해제 모달 */
[data-theme="dark"] .pi-del-modal { background: var(--c-900); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
[data-theme="dark"] .pi-del-close:hover { background: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .pi-del-title { color: var(--c-100); }
[data-theme="dark"] .pi-del-desc { color: var(--c-400); }
[data-theme="dark"] .pi-del-desc strong { color: var(--c-200); }
[data-theme="dark"] .pi-del-warn { color: var(--c-500); }
[data-theme="dark"] .pi-del-btn.cancel { background: var(--c-700); color: var(--c-300); }
[data-theme="dark"] .pi-del-btn.cancel:hover { background: var(--c-600); }
/* ============================================================================
   SMTECH PAGE — 정산서 대시보드
   ============================================================================ */

.smt-page { display:flex; flex-direction:column; gap:16px; width:100%; min-height:100%; }

/* ── 상단 바 ── */
.smt-topbar {
  display:flex; align-items:center; justify-content:space-between;
  height:52px; padding:0 18px; gap:10px;
  background:var(--app-surface); border:1px solid var(--c-150);
  border-radius:var(--r-lg); flex-shrink:0;
}
.smt-topbar-left  { display:flex; align-items:center; gap:9px; min-width:0; }
.smt-topbar-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.smt-topbar-icon  { color:var(--primary); flex-shrink:0; }
.smt-topbar-title { font-size:14px; font-weight:800; color:#0f172a; letter-spacing:-0.02em; }
.smt-topbar-sep   { width:1px; height:18px; background:#e2e8f0; margin:0 3px; flex-shrink:0; }
.smt-topbar-dot   { color:#cbd5e1; font-size:15px; }
.smt-btn-refresh  {
  width:30px; height:30px; border-radius:var(--r-sm); border:none; background:transparent;
  color:#64748b; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.smt-btn-refresh:hover { background:#f1f5f9; color:#334155; }

/* ── 거래처 칩 ── */
.smt-supplier-wrap { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.smt-supplier-chip {
  padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600;
  border:1px solid var(--c-200); background:var(--c-50); color:var(--text-secondary);
  cursor:pointer; transition:all .12s; font-family:inherit;
}
.smt-supplier-chip:hover { border-color:var(--primary); color:var(--primary-text); }
.smt-supplier-chip.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.smt-supplier-add {
  width:26px; height:26px; border-radius:50%;
  border:1.5px dashed var(--c-300); background:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted); transition:all .12s;
}
.smt-supplier-add:hover { border-color:var(--primary); color:var(--primary); }
.smt-supplier-add-row { display:flex; align-items:center; gap:4px; }
.smt-supplier-hint {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--text-muted); padding:4px 10px;
  border:1px dashed var(--c-300); border-radius:20px;
  cursor:default;
}
.smt-supplier-input {
  padding:4px 8px; border-radius:6px; border:1px solid var(--primary);
  background:var(--app-surface); color:var(--text-primary); font-size:12px; font-family:inherit;
  width:120px; outline:none;
}
.smt-btn-icon {
  width:26px; height:26px; border-radius:6px; border:1px solid var(--c-200);
  background:var(--app-surface); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted); transition:all .12s;
}
.smt-btn-icon:hover { background:var(--c-100); color:var(--text-primary); }

/* ── 탭 ── */
.smt-tabs { display:flex; gap:2px; background:#f1f5f9; border-radius:9px; padding:3px; }
.smt-tab {
  display:flex; align-items:center; gap:5px;
  padding:5px 14px; border-radius:7px; font-size:13px; font-weight:600;
  border:none; cursor:pointer; color:#64748b; background:transparent;
  transition:all .15s; position:relative; font-family:inherit; white-space:nowrap;
}
.smt-tab:hover { color:#334155; }
.smt-tab.active { background:#fff; color:#4f46e5; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.smt-tab-badge {
  position:absolute; top:1px; right:2px;
  min-width:14px; height:14px; border-radius:7px; padding:0 2px;
  background:var(--error); color:#fff; font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.smt-tab-badge.warn { background:var(--warning-deep); }

/* ── 버튼 ── */
.smt-btn {
  display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:7px;
  font-size:12px; font-weight:600; border:1px solid var(--c-200); background:var(--app-surface);
  color:var(--text-secondary); cursor:pointer; transition:all .12s; font-family:inherit;
}
.smt-btn:hover    { background:var(--c-100); color:var(--text-primary); }
.smt-btn:disabled { opacity:.5; cursor:not-allowed; }
.smt-btn.primary  { background:var(--primary); color:#fff; border-color:var(--primary); }
.smt-btn.primary:hover { background:var(--primary-deep); }
.smt-btn.sm       { padding:4px 9px; font-size:11px; }

/* ── 레이아웃 ── */
.smt-view-layout { display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:start; }
@media (max-width:860px) { .smt-view-layout { grid-template-columns:1fr; } }

@media (max-width:480px) {
  .smt-topbar { height:auto; flex-wrap:wrap; padding:12px 14px; gap:8px; }
  .smt-topbar-left { flex-wrap:wrap; width:100%; }
  .smt-topbar-right { width:100%; justify-content:flex-end; }
  .smt-topbar-sep { display:none; }
  .smt-tabs { flex-wrap:wrap; border-radius:8px; gap:2px; }
  .smt-tab { padding:5px 10px; font-size:12px; flex:1 1 auto; justify-content:center; }
  .smt-supplier-wrap { gap:4px; }
  .smt-supplier-chip { font-size:11px; padding:3px 10px; }
}

/* ── 사이드바 ── */
.smt-sidebar {
  background:var(--app-surface); border:1px solid var(--c-150);
  border-radius:var(--r-lg,12px); overflow:hidden; position:sticky; top:16px;
  display:flex; flex-direction:column;
}

/* 날짜/기간 모드 토글 */
.smt-mode-toggle {
  display:flex; gap:2px; padding:8px 10px 0; background:var(--c-50);
}
.smt-mode-toggle button {
  flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  padding:6px 8px; border-radius:6px; font-size:11px; font-weight:600;
  border:none; cursor:pointer; color:var(--text-muted); background:none;
  transition:all .12s; font-family:inherit;
}
.smt-mode-toggle button.active {
  background:var(--app-surface); color:var(--primary-text);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.smt-mode-toggle button:hover:not(.active) { color:var(--text-primary); }

/* 사이드바 빈 상태 */
.smt-sidebar-empty {
  display:flex; flex-direction:column; align-items:center; padding:28px 16px; gap:6px;
}

/* 사이드바 요약 카드 */
.smt-sidebar-summary {
  padding:14px; border-top:1px solid var(--c-100);
}
.smt-sidebar-summary-title {
  font-size:12px; font-weight:700; color:var(--text-muted);
  letter-spacing:.3px; margin-bottom:10px;
}
.smt-sidebar-kpi-stack {
  display:flex; flex-direction:column; gap:6px;
}
.smt-sidebar-kpi-big {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px; background:var(--c-50);
}
.smt-sidebar-kpi-big .label { font-size:12px; font-weight:600; color:var(--text-muted); }
.smt-sidebar-kpi-big .value { font-size:15px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.smt-sidebar-kpi-big .value small { font-size:11px; font-weight:500; color:var(--text-muted); margin-left:1px; }
.smt-sidebar-kpi-big.total { background:var(--primary-soft); }
.smt-sidebar-kpi-big.total .value { color:var(--primary-text); font-size:16px; }

/* 사이드바 상품 통계 */
.smt-sidebar-stats { display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.smt-sidebar-stat-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; font-size:13px;
  background:var(--c-50);
}
.smt-sidebar-stat-row .label { font-weight:700; color:var(--text-muted); font-size:12px; min-width:48px; }
.smt-sidebar-stat-row .val   { font-weight:700; color:var(--text-primary); font-size:14px; }
.smt-sidebar-stat-row .r     { color:var(--error); font-weight:600; font-size:12px; margin-left:auto; }
.smt-sidebar-stat-row .d     { color:var(--warning-deep); font-weight:600; font-size:12px; }

/* 사이드바 업로드 */
.smt-sidebar-upload {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:10px; padding:10px; border-radius:8px;
  border:1.5px dashed var(--c-300); cursor:pointer;
  font-size:12px; font-weight:500; color:var(--text-muted);
  transition:all .15s;
}
.smt-sidebar-upload:hover, .smt-sidebar-upload.drag-over {
  border-color:var(--primary); color:var(--primary-text); background:var(--primary-soft);
}
.smt-cal { padding:12px; }
.smt-cal-years { display:flex; gap:4px; margin-bottom:10px; }
.smt-cal-year-btn {
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;
  border:1px solid var(--c-200); background:none; color:var(--text-muted);
  cursor:pointer; transition:all .1s; font-family:inherit;
}
.smt-cal-year-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.smt-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.smt-cal-title { font-size:13px; font-weight:700; color:var(--text-primary); }
.smt-cal-nav-btn {
  width:28px; height:28px; border-radius:6px; border:1px solid var(--c-200); background:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); transition:all .1s;
}
.smt-cal-nav-btn:hover { background:var(--c-100); color:var(--text-primary); }
.smt-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.smt-cal-dow { text-align:center; font-size:10px; font-weight:700; color:var(--text-muted); padding:4px 0; }
.smt-cal-cell {
  aspect-ratio:1; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; border:none; background:none; cursor:default;
  transition:all .1s; color:var(--text-muted); font-family:inherit; position:relative;
}
.smt-cal-cell.no-data  { opacity:.3; }
.smt-cal-cell.has-data { cursor:pointer; color:var(--text-primary); font-weight:600; background:var(--c-50); }
.smt-cal-cell.has-data:hover { background:var(--primary-soft); color:var(--primary-text); }
.smt-cal-cell.selected { background:var(--primary)!important; color:#fff!important; font-weight:700; }
.smt-cal-cell.in-range { background:var(--primary-soft); color:var(--primary-text); }
.smt-cal-cell.range-edge { background:var(--primary)!important; color:#fff!important; font-weight:700; }
.smt-cal-cell.sun.has-data { color:#ef4444; }
.smt-cal-cell.sat.has-data { color:#3b82f6; }
.smt-cal-cell.sun.selected,.smt-cal-cell.sat.selected { color:#fff!important; }

/* 충돌 날짜 */
.smt-cal-cell.conflict.has-data {
  background:var(--warning-bg)!important; color:var(--warning-deep)!important;
  font-weight:700;
}
.smt-cal-cell.conflict.selected { background:var(--warning-deep)!important; color:#fff!important; }
.smt-cal-conflict-dot {
  position:absolute; bottom:2px; right:2px;
  width:5px; height:5px; border-radius:50%;
  background:var(--warning-deep);
}

.smt-cal-hint {
  display:flex; align-items:center; gap:5px; margin-top:8px; padding:6px 8px;
  background:var(--primary-soft); border-radius:6px; font-size:11px; color:var(--primary-text);
}
.smt-cal-hint button { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--primary-text); display:flex; }
.smt-range-label {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  font-size:12px; font-weight:600; color:var(--primary-text); background:var(--primary-soft);
}
.smt-range-label .cnt {
  margin-left:auto; padding:2px 8px; border-radius:20px; background:var(--primary); color:#fff; font-size:11px;
}

/* ── 주문 패널 ── */
.smt-orders-panel { background:var(--app-surface); border:1px solid var(--c-150); border-radius:var(--r-lg,12px); overflow:hidden; }
.smt-orders-head {
  padding:14px 18px; border-bottom:1px solid var(--c-100); background:var(--c-50);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.smt-orders-head-title { font-size:14px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.smt-orders-head-meta { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--text-muted); }
.smt-orders-head-meta .highlight { color:var(--primary-text); font-weight:700; }

/* 충돌 배지 (헤더 안) */
.smt-conflict-badge {
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px;
  background:var(--warning-bg); color:var(--warning-deep); font-size:11px; font-weight:700;
  border:1px solid rgba(245,158,11,.2);
}
/* 충돌 경고 바 */
.smt-conflict-day-warn {
  display:flex; align-items:center; gap:8px; padding:9px 16px;
  background:var(--warning-bg); border-bottom:1px solid rgba(245,158,11,.2);
  font-size:12px; color:var(--warning-deep);
}

/* ── 제품 통계 바 ── */
.smt-day-stats { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 16px; background:var(--c-50); border-bottom:1px solid var(--c-100); }
.smt-day-stat-item { display:flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; background:var(--app-surface); border:1px solid var(--c-200); font-size:12px; }
.smt-day-stat-item .label { font-weight:600; color:var(--text-muted); font-size:11px; }
.smt-day-stat-item .val   { font-weight:700; color:var(--text-primary); }
.smt-day-stat-item .r     { color:var(--error); font-weight:600; font-size:11px; }
.smt-day-stat-item .d     { color:var(--warning-deep); font-weight:600; font-size:11px; }

/* ── 테이블 ── */
.smt-table-wrap { overflow-x:auto; }
.smt-table { width:100%; border-collapse:collapse; font-size:13px; }
.smt-table th { padding:8px 12px; background:var(--c-50); color:var(--text-muted); font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; border-bottom:1px solid var(--c-150); text-align:left; white-space:nowrap; }
.smt-table td { padding:9px 12px; border-bottom:1px solid var(--c-100); color:var(--text-secondary); vertical-align:middle; }
.smt-table tr:last-child td { border-bottom:none; }
.smt-table tr:hover td { background:var(--c-50); }
.smt-table td.num    { text-align:right; font-variant-numeric:tabular-nums; }
.smt-table td.strong { font-weight:600; color:var(--text-primary); }
.smt-table td.muted  { color:var(--text-muted); font-size:12px; }
.smt-table-foot { padding:10px 16px; background:var(--c-50); border-top:2px solid var(--c-150); display:flex; align-items:center; gap:20px; font-size:12px; color:var(--text-secondary); flex-wrap:wrap; }
.smt-table-foot b { font-weight:700; color:var(--text-primary); }

/* 큰 합계 푸터 */
.smt-table-foot-big {
  display:flex; align-items:stretch; gap:0;
  border-top:2px solid var(--c-200); background:var(--c-50);
}
.smt-foot-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14px 12px; gap:2px;
  border-right:1px solid var(--c-150);
}
.smt-foot-item:first-child { flex:0; padding:14px 20px; }
.smt-foot-item:last-child { border-right:none; }
.smt-foot-item .foot-label { font-size:11px; font-weight:600; color:var(--text-muted); }
.smt-foot-item .foot-value { font-size:16px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.smt-foot-item .foot-value.muted { color:var(--text-muted); font-size:14px; }
.smt-foot-item.accent { background:var(--primary-soft); }
.smt-foot-item.accent .foot-label { color:var(--primary-text); }
.smt-foot-item.accent .foot-value { color:var(--primary-text); font-size:18px; }
.smt-foot-item.warn { background:rgba(239,68,68,.06); }
.smt-foot-item.warn .foot-label { color:var(--error); }
.smt-foot-item.warn .foot-value { color:var(--error); }

/* 반품/파손 뱃지 (기간 테이블) */
.smt-issue-badges { display:inline-flex; gap:4px; }
.smt-issue-badge {
  display:inline-flex; align-items:center; padding:2px 6px; border-radius:4px;
  font-size:11px; font-weight:700;
}
.smt-issue-badge.ret { background:rgba(239,68,68,.08); color:var(--error); }
.smt-issue-badge.dmg { background:rgba(245,158,11,.08); color:var(--warning-deep); }

/* 반품/파손 행 */
.smt-table tr.smt-row-return td { background:rgba(239,68,68,.04); }
.smt-table tr.smt-row-return:hover td { background:rgba(239,68,68,.08); }
.smt-table tr.smt-row-damage td { background:rgba(245,158,11,.04); }
.smt-table tr.smt-row-damage:hover td { background:rgba(245,158,11,.08); }
.smt-row-badge {
  display:inline-flex; align-items:center; padding:1px 6px; border-radius:4px;
  font-size:10px; font-weight:700; letter-spacing:.3px;
}
.smt-row-badge.ret { background:rgba(239,68,68,.1); color:var(--error); }
.smt-row-badge.dmg { background:rgba(245,158,11,.1); color:var(--warning-deep); }
/* 헤더 반품/파손 배지 */
.smt-head-badge {
  display:inline-flex; align-items:center; padding:1px 6px; border-radius:4px;
  font-size:11px; font-weight:700;
}
.smt-head-badge.ret { background:rgba(239,68,68,.1); color:var(--error); }
.smt-head-badge.dmg { background:rgba(245,158,11,.1); color:var(--warning-deep); }

/* 비율 바 */
.smt-ratio-bar { height:4px; border-radius:2px; background:var(--c-150); overflow:hidden; }
.smt-ratio-fill { height:100%; border-radius:2px; transition:width .3s; }

/* ── 파일 관리 ── */
.smt-files-layout { display:flex; flex-direction:column; gap:14px; }
.smt-files-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--app-surface); border:1px solid var(--c-150); border-radius:var(--r-lg,12px); padding:12px 16px; }
.smt-move-toggle {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:var(--text-secondary); cursor:pointer;
  padding:5px 10px; border-radius:7px; border:1px solid var(--c-200);
  background:var(--app-surface); transition:all .1s;
}
.smt-move-toggle:hover { background:var(--c-100); }
.smt-move-toggle input { cursor:pointer; }
.smt-files-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.smt-files-col { background:var(--app-surface); border:1px solid var(--c-150); border-radius:var(--r-lg,12px); overflow:hidden; }
.smt-files-col-head { display:flex; align-items:center; gap:7px; padding:11px 14px; font-size:12px; font-weight:700; border-bottom:1px solid var(--c-100); }
.smt-files-col-head.pending   { background:var(--warning-bg);  color:var(--warning-deep); }
.smt-files-col-head.processed { background:var(--success-bg);  color:var(--success-deep); }
.smt-files-col-head.moved     { background:var(--info-bg);      color:var(--primary-text); }
.smt-count-badge { padding:1px 7px; border-radius:20px; font-size:11px; font-weight:700; background:var(--warning); color:#fff; }
.smt-count-badge.ok    { background:var(--success); }
.smt-count-badge.moved { background:var(--primary); }
.smt-files-empty { padding:24px; text-align:center; font-size:12px; color:var(--text-muted); }
.smt-file-item { padding:10px 14px; border-bottom:1px solid var(--c-100); }
.smt-file-item:last-child { border-bottom:none; }
.smt-file-name { font-size:13px; font-weight:600; color:var(--text-primary); word-break:break-all; }
.smt-file-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }
.smt-file-item.pending   { border-left:3px solid var(--warning); }
.smt-file-item.processed { border-left:3px solid var(--success); }
.smt-file-item.moved     { border-left:3px solid var(--primary); }

/* ── 업로드 존 ── */
.smt-upload-zone {
  border:2px dashed var(--c-300); border-radius:var(--r-lg,12px); padding:28px 20px;
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:all .15s; background:var(--c-50);
}
.smt-upload-zone:hover,.smt-upload-zone.drag-over { border-color:var(--primary); background:var(--primary-soft); }
.smt-upload-text { font-size:13px; font-weight:600; color:var(--text-secondary); }
.smt-upload-sub  { font-size:11px; color:var(--text-muted); }

/* ── 설정 + 충돌 래퍼 ── */
.smt-config-wrap { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:800px) { .smt-config-wrap { grid-template-columns:1fr; } }
.smt-config-panel { background:var(--app-surface); border:1px solid var(--c-150); border-radius:var(--r-lg,12px); padding:20px; }
.smt-config-section-title { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.smt-config-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.smt-config-label { font-size:12px; font-weight:700; color:var(--text-secondary); min-width:72px; }
.smt-config-input { flex:1; min-width:160px; padding:7px 10px; border-radius:var(--r-sm,6px); border:1px solid var(--c-200); background:var(--app-surface); color:var(--text-primary); font-size:13px; font-family:inherit; }
.smt-config-input:focus { outline:2px solid var(--primary); outline-offset:-1px; }

/* ── 충돌 패널 ── */
.smt-conflict-panel { background:var(--app-surface); border:1px solid var(--c-150); border-radius:var(--r-lg,12px); overflow:hidden; }
.smt-conflict-panel-head { display:flex; align-items:center; gap:7px; padding:12px 14px; font-size:12px; font-weight:700; color:var(--warning-deep); background:var(--warning-bg); border-bottom:1px solid rgba(245,158,11,.15); }
.smt-conflict-item { padding:12px 14px; border-bottom:1px solid var(--c-100); }
.smt-conflict-item:last-child { border-bottom:none; }
.smt-conflict-item.resolved { opacity:.6; }
.smt-conflict-head { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.smt-conflict-icon { color:var(--warning-deep); flex-shrink:0; }
.smt-conflict-date { font-size:13px; font-weight:700; color:var(--text-primary); }
.smt-conflict-diff { font-size:12px; color:var(--text-secondary); margin-bottom:5px; padding:4px 8px; background:var(--warning-bg); border-radius:5px; }
.smt-conflict-files { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
.smt-conflict-files .prev { color:var(--text-muted); }
.smt-conflict-files .curr { color:var(--primary-text); font-weight:600; }
.smt-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:20px; font-size:11px; font-weight:600; }
.smt-badge.ok { background:var(--success-bg); color:var(--success-deep); }

/* ── 변동 표시 ── */
.smt-delta {
  display:inline-flex; align-items:center; gap:2px;
  font-size:11px; font-weight:700; padding:1px 5px; border-radius:4px;
  margin-left:4px;
}
.smt-delta.up   { color:var(--success-deep); background:var(--success-bg); }
.smt-delta.down { color:var(--error); background:rgba(239,68,68,.08); }
.smt-delta.neutral { color:var(--text-muted); }

/* ── 월별 비교 ── */
.smt-monthly-layout { display:flex; flex-direction:column; gap:16px; }

/* 월 선택 칩 */
.smt-month-chips {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--app-surface); border:1px solid var(--c-150);
  border-radius:var(--r-lg,12px); padding:14px 18px;
}
.smt-month-chips-label { font-size:12px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.smt-month-chips-list { display:flex; gap:5px; flex-wrap:wrap; }
.smt-month-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600;
  border:1.5px solid var(--c-200); background:var(--c-50); color:var(--text-secondary);
  cursor:pointer; transition:all .12s; font-family:inherit;
}
.smt-month-chip:hover { border-color:var(--primary); color:var(--primary-text); }
.smt-month-chip.active {
  background:var(--primary); border-color:var(--primary); color:#fff;
}

/* KPI 비교 카드 (바 차트) */
.smt-compare-cards {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px;
}
.smt-compare-card {
  background:var(--app-surface); border:1px solid var(--c-150);
  border-radius:var(--r-lg,12px); padding:16px 18px;
}
.smt-compare-card-label {
  font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:10px;
  letter-spacing:.3px;
}
.smt-compare-card-bars { display:flex; flex-direction:column; gap:8px; }

.smt-compare-bar-row {
  display:grid; grid-template-columns:32px 1fr auto auto; gap:8px; align-items:center;
}
.smt-compare-bar-row .bar-month {
  font-size:12px; font-weight:700; color:var(--text-muted);
}
.smt-compare-bar-row .bar-track {
  height:22px; border-radius:6px; background:var(--c-100); overflow:hidden;
}
.smt-compare-bar-row .bar-fill {
  height:100%; border-radius:6px; transition:width .4s ease;
  min-width:2px;
}
.smt-compare-bar-row .bar-value {
  font-size:13px; font-weight:700; color:var(--text-primary);
  font-variant-numeric:tabular-nums; white-space:nowrap; min-width:80px; text-align:right;
}

/* 상품별 비교 테이블 */
.smt-compare-product-section {
  background:var(--app-surface); border:1px solid var(--c-150);
  border-radius:var(--r-lg,12px); overflow:hidden;
}
.smt-compare-section-head {
  display:flex; align-items:center; gap:6px;
  padding:14px 18px; font-size:13px; font-weight:700; color:var(--text-primary);
  border-bottom:1px solid var(--c-100);
}
.smt-compare-product-table {
  width:100%; border-collapse:collapse; font-size:13px;
}
.smt-compare-product-table th {
  padding:10px 16px; font-size:11px; font-weight:700; color:var(--text-muted);
  text-align:left; border-bottom:1px solid var(--c-150); background:var(--c-50);
}
.smt-compare-product-table th.month-th { text-align:right; }
.smt-compare-product-table th.delta-th { text-align:center; width:70px; }
.smt-compare-product-table td { padding:10px 16px; border-bottom:1px solid var(--c-100); }
.smt-compare-product-table tr:last-child td { border-bottom:none; }
.smt-compare-product-table tr:hover td { background:var(--c-50); }
.smt-compare-product-table .prod-name { font-weight:700; color:var(--text-primary); }
.smt-compare-product-table .prod-val { text-align:right; font-variant-numeric:tabular-nums; }
.smt-compare-product-table .prod-val .qty { font-weight:700; color:var(--text-primary); }
.smt-compare-product-table .prod-val .ret { color:var(--error); font-weight:600; font-size:11px; margin-left:6px; }
.smt-compare-product-table .prod-val .dmg { color:var(--warning-deep); font-weight:600; font-size:11px; margin-left:4px; }
.smt-compare-product-table .prod-delta { text-align:center; }

/* ── 빈 상태 ── */
.smt-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 20px; gap:8px; }
.smt-empty-supplier { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:10px; }
.smt-empty-title { font-size:15px; font-weight:600; color:var(--text-secondary); }
.smt-empty-desc  { font-size:13px; color:var(--text-muted); text-align:center; max-width:280px; }
.smt-loading { display:flex; align-items:center; justify-content:center; padding:40px; gap:8px; color:var(--text-muted); font-size:13px; }

/* ── 스켈레톤 ── */
.smt-sk-cal { padding:12px; }
.smt-sk-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.smt-sk-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-top:8px; }
.smt-sk-cal-cell { height:28px; border-radius:50%; }
.smt-sk-orders { padding:16px; display:flex; flex-direction:column; gap:0; }
.smt-sk-orders-head { display:flex; gap:10px; align-items:center; padding:10px 0 12px; border-bottom:1px solid var(--c-100); margin-bottom:4px; }
.smt-sk-row { display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--c-100); }

/* ── 다크모드 ── */
[data-theme="dark"] .smt-topbar,
[data-theme="dark"] .smt-sidebar,
[data-theme="dark"] .smt-orders-panel,
[data-theme="dark"] .smt-files-col,
[data-theme="dark"] .smt-files-toolbar,
[data-theme="dark"] .smt-config-panel,
[data-theme="dark"] .smt-conflict-panel,
[data-theme="dark"] .smt-month-chips,
[data-theme="dark"] .smt-compare-card,
[data-theme="dark"] .smt-compare-product-section { background:var(--c-800); border-color:var(--c-700); }
[data-theme="dark"] .smt-orders-head,
[data-theme="dark"] .smt-day-stats,
[data-theme="dark"] .smt-table th,
[data-theme="dark"] .smt-table-foot { background:var(--c-900); }
[data-theme="dark"] .smt-table td { border-color:var(--c-700); }
[data-theme="dark"] .smt-table tr:hover td { background:var(--c-700); }
[data-theme="dark"] .smt-table tr.smt-row-return td { background:rgba(239,68,68,.06); }
[data-theme="dark"] .smt-table tr.smt-row-return:hover td { background:rgba(239,68,68,.12); }
[data-theme="dark"] .smt-table tr.smt-row-damage td { background:rgba(245,158,11,.06); }
[data-theme="dark"] .smt-table tr.smt-row-damage:hover td { background:rgba(245,158,11,.12); }
[data-theme="dark"] .smt-supplier-chip { background:var(--c-700); border-color:var(--c-600); }
[data-theme="dark"] .smt-cal-cell.has-data { background:var(--c-700); color:var(--c-100); }
[data-theme="dark"] .smt-cal-cell.has-data:hover { background:var(--primary-soft); }
[data-theme="dark"] .smt-day-stat-item { background:var(--c-700); border-color:var(--c-600); }
[data-theme="dark"] .smt-config-input { background:var(--c-700); border-color:var(--c-600); color:var(--c-100); }
[data-theme="dark"] .smt-upload-zone  { background:var(--c-800); border-color:var(--c-600); }
[data-theme="dark"] .smt-btn { background:var(--c-700); border-color:var(--c-600); color:var(--c-200); }
[data-theme="dark"] .smt-btn:hover { background:var(--c-600); }
[data-theme="dark"] .smt-tabs { background:var(--c-800); }
[data-theme="dark"] .smt-tab.active { background:var(--c-700); }
[data-theme="dark"] .smt-move-toggle { background:var(--c-700); border-color:var(--c-600); }
[data-theme="dark"] .smt-mode-toggle { background:var(--c-900); }
[data-theme="dark"] .smt-mode-toggle button.active { background:var(--c-700); }
[data-theme="dark"] .smt-sidebar-kpi-big { background:var(--c-700); }
[data-theme="dark"] .smt-sidebar-kpi-big.total { background:var(--primary-soft); }
[data-theme="dark"] .smt-sidebar-stat-row { background:var(--c-700); }
[data-theme="dark"] .smt-sidebar-upload { border-color:var(--c-600); }
[data-theme="dark"] .smt-table-foot-big { background:var(--c-900); border-color:var(--c-700); }
[data-theme="dark"] .smt-foot-item { border-color:var(--c-700); }
[data-theme="dark"] .smt-foot-item.accent { background:var(--primary-soft); }
[data-theme="dark"] .smt-foot-item.warn { background:rgba(239,68,68,.08); }
[data-theme="dark"] .smt-month-chip { background:var(--c-700); border-color:var(--c-600); }

[data-theme="dark"] .smt-compare-bar-row .bar-track { background:var(--c-700); }
[data-theme="dark"] .smt-compare-product-table th { background:var(--c-900); border-color:var(--c-700); }
[data-theme="dark"] .smt-compare-product-table td { border-color:var(--c-700); }
[data-theme="dark"] .smt-compare-product-table tr:hover td { background:var(--c-700); }
/* ═══════════════════════════════════════════════════════════════
   SUPPLIERS PAGE STYLES
   접두사: sp-
   ═══════════════════════════════════════════════════════════════ */

/* ── Title row ── */
.sp-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-company-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--primary);
  background: var(--primary-soft);
  padding: 2px 10px;
  border-radius: var(--r-xs);
  margin-left: 4px;
}

/* ── Content area ── */
.sp-content {
  padding: 0 28px;
  flex: 1;
  overflow: auto;
}

/* ── List section ── */
.sp-list-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sp-list-count {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--c-500);
}
.sp-list-count strong {
  font-weight: var(--font-extrabold);
  color: var(--c-800);
}

.sp-btn-refresh {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-150);
  background: var(--app-surface);
  color: var(--c-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.sp-btn-refresh:hover:not(:disabled) {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}
.sp-btn-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Loading ── */
.sp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--c-400);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

/* ── Card grid ── */
.sp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.sp-card {
  background: var(--app-surface);
  border: 1px solid var(--c-150);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: all 0.2s;
}
.sp-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
  border-color: var(--primary);
}

.sp-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sp-card-name {
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  color: var(--c-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-card-mode {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--c-400);
  background: var(--c-100);
  padding: 1px 8px;
  border-radius: var(--r-xs);
  align-self: flex-start;
}

/* ── Spin animation ── */
.spin {
  animation: sp-spin 1s linear infinite;
}
@keyframes sp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .sp-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Dark mode ── */
[data-theme="dark"] .sp-card {
  background: var(--c-800);
  border-color: var(--c-700);
}
[data-theme="dark"] .sp-card:hover {
  border-color: var(--primary);
}
[data-theme="dark"] .sp-card-name {
  color: var(--c-100);
}
[data-theme="dark"] .sp-card-mode {
  background: var(--c-700);
  color: var(--c-400);
}
[data-theme="dark"] .sp-card-icon {
  background: rgba(99, 102, 241, 0.15);
}
[data-theme="dark"] .sp-list-count strong {
  color: var(--c-100);
}
[data-theme="dark"] .sp-btn-refresh {
  background: var(--c-700);
  border-color: var(--c-600);
  color: var(--c-400);
}
[data-theme="dark"] .sp-company-badge {
  background: rgba(99, 102, 241, 0.15);
}