/* ===========================================================
   Shopee 2.0 Shell — Sidebar + Mobile chrome + Layout primitives
   =========================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── App layout ── */
.app-root {
  display: flex;
  min-height: 100vh;
}

/* ── Desktop Sidebar (collapsed → hover expand, overlay 패턴) ── */
.sidebar {
  width: var(--sidebar-w-collapsed);
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow: hidden;
  transition: width 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  z-index: 100;
}
.sidebar:hover {
  width: var(--sidebar-w-expanded);
  box-shadow: 4px 0 24px rgba(0,0,0,0.45);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-brand-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 12px var(--orange-glow);
}
.sidebar-brand-text {
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
  transition: opacity 0.2s ease 0.05s;
}
.sidebar:hover .sidebar-brand-text { opacity: 1; }
.sidebar-brand-title {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.sidebar-brand-sub {
  font-size: 10.5px; color: var(--text-5); letter-spacing: 0.4px;
}

.sidebar-nav {
  display: flex; flex-direction: column;
  padding: 8px 8px;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.sidebar-nav::-webkit-scrollbar { width: 0; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-4);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--card-bg-2); color: var(--text-2); }
.nav-item.active {
  background: var(--orange-soft);
  color: var(--orange);
  box-shadow: inset 3px 0 0 var(--orange);
}
.nav-item-logout { width: 100%; cursor: pointer; }
.nav-item-logout:hover { color: var(--red); background: rgba(239,68,68,0.08); }
.nav-item-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.nav-item-label {
  opacity: 0;
  transition: opacity 0.2s ease 0.05s;
}
.sidebar:hover .nav-item-label { opacity: 1; }

.sidebar-bottom {
  padding: 8px 8px 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.user-chip:hover { background: var(--card-bg-2); }
.user-chip-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--orange));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.user-chip-info {
  display: flex; flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease 0.05s;
}
.sidebar:hover .user-chip-info { opacity: 1; }
.user-chip-logout {
  opacity: 0;
  background: transparent;
  border: 0;
  color: var(--text-5);
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.sidebar:hover .user-chip-logout { opacity: 1; }
.user-chip-logout:hover { color: var(--red); background: rgba(239,68,68,0.1); }
.user-chip-name { font-size: 12px; color: var(--text-2); font-weight: 600; }
.user-chip-role { font-size: 10px; color: var(--text-5); }

/* ── Main content (sidebar는 fixed라 margin-left로 공간 확보 — hover expand 시 overlap) ── */
.app-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w-collapsed);
  padding: 24px 28px;
  padding-bottom: calc(24px + var(--mobile-tabbar-h));
}

/* ── Mobile chrome ── */
.mobile-header,
.mobile-tabbar {
  display: none;
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .app-main {
    margin-left: 0;
    padding: 16px 14px calc(16px + var(--mobile-tabbar-h));
    padding-top: calc(16px + var(--mobile-header-h) + env(safe-area-inset-top, 0px));
  }

  .mobile-header {
    display: flex;
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--mobile-header-h);
    padding: 0 14px;
    background: rgba(8,10,14,0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    z-index: 200;
  }
  @media (prefers-color-scheme: light) {
    .mobile-header { background: rgba(255,255,255,0.85); }
  }
  .mobile-header-brand {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700;
  }
  .mobile-header-brand-logo {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
  }
  .mobile-header-actions { display: flex; align-items: center; gap: 8px; }
  .mobile-header-btn {
    width: 36px; height: 36px;
    border: none; background: transparent;
    color: var(--text-3);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }

  .mobile-tabbar {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--mobile-tabbar-h);
    background: rgba(8,10,14,0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    z-index: 200;
    justify-content: space-around;
    padding: 6px 4px env(safe-area-inset-bottom, 6px);
  }
  @media (prefers-color-scheme: light) {
    .mobile-tabbar { background: rgba(255,255,255,0.85); }
  }
  .mobile-tab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    border: none; background: transparent;
    color: var(--text-5);
    font-size: 10px;
    font-weight: 600;
    padding: 6px 0;
    border-radius: 8px;
  }
  .mobile-tab.active { color: var(--orange); }
  .mobile-tab-icon { font-size: 18px; line-height: 1; }
}

/* ── Card primitive ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: transform 0.2s var(--ease-out), border-color 0.15s, box-shadow 0.15s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* ── Toast (frosted glass + Shopee orange accent) ── */
.toast-host {
  position: fixed;
  bottom: calc(var(--mobile-tabbar-h) + 16px);
  right: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  max-width: 360px;
  padding: 12px 18px 12px 16px;
  /* 다크 모드 기본 — 진한 민트 */
  background: rgba(15, 61, 51, 0.94);
  color: #E6FAF3;
  border: 1px solid rgba(46, 230, 176, 0.30);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.35),
    0 2px 12px rgba(46, 230, 176, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  pointer-events: auto;
  animation: toast-in 0.32s var(--ease-out);
  overflow: hidden;
}
.toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange-glow);
}
.toast.info::before  { background: var(--indigo); box-shadow: 0 0 12px rgba(99,102,241,0.5); }
.toast.ok::before    { background: var(--green);  box-shadow: 0 0 12px rgba(16,185,129,0.5); }
.toast.warn::before  { background: var(--gold);   box-shadow: 0 0 12px rgba(245,166,35,0.5); }
.toast.error::before { background: var(--red);    box-shadow: 0 0 12px rgba(239,68,68,0.5); }
@media (prefers-color-scheme: light) {
  .toast {
    /* 라이트 모드 — 연한 민트 */
    background: rgba(208, 247, 234, 0.94);
    color: #0B4A3D;
    border: 1px solid rgba(46, 230, 176, 0.45);
    box-shadow:
      0 12px 32px rgba(46, 230, 176, 0.18),
      0 2px 8px rgba(0,0,0,0.05),
      inset 0 1px 0 rgba(255,255,255,0.85);
  }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Placeholder ── */
.shell-placeholder {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-4);
}
.shell-placeholder h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--num);
  letter-spacing: -0.02em;
}
.shell-placeholder p { margin: 6px 0; font-size: 14px; }
.shell-placeholder .accent { color: var(--orange); font-weight: 600; }

/* ===========================================================
   Sprint 22 — Mobile 보강 (iPhone HIG + iOS Safari 표준)
   2026-05-17
   - 1: input font-size 16px (iOS auto-zoom 방지)
   - 2: touch target 44×44 minimum (Apple HIG)
   - 3: safe-area-inset (iPhone notch + home indicator) — 기존 tabbar에 적용됨, 추가 위치 보강
   - 4: -webkit-tap-highlight-color transparent (탭 회색 깜빡임 제거)
   - 5: table overflow-x scroll (가로 표 스크롤)
   - 6: modal viewport 100dvh (iPhone Safari URL bar 대응)
   =========================================================== */

/* 4. Global tap highlight (전 페이지 적용) */
* {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  /* 1. iOS auto-zoom 방지 — input 폰트 16px ↑ */
  input, textarea, select,
  .field-input, .form-input, .form-select, .form-textarea,
  .set-input, .promo-mode-btn, .pub-filter-input, .pub-filter-select {
    font-size: 16px !important;
  }

  /* 2. Touch target 44×44 minimum — Apple HIG */
  button:not(.toast-btn):not(.modal-close):not(.user-chip-logout):not(.mobile-tab),
  .nav-item, .mobile-header-btn,
  .promo-btn-primary, .promo-btn-secondary,
  .set-btn-primary, .set-btn-secondary, .set-btn-danger,
  .promo-mode-btn, .promo-country-pill,
  .promo-toggle, .set-toggle,
  .submit, .tab, .toggle-pw {
    min-height: 44px;
  }
  /* 작은 버튼들도 inline 작은 영역 유지 (icon-only) */
  .modal-close { min-width: 44px; min-height: 44px; }
  .promo-item-action-edit, .promo-item-action-end,
  .promo-ams-remove, .pending-item-action,
  .set-shop-reauth { min-height: 36px; }

  /* 5. Table overflow-x — 표를 가진 영역 자동 스크롤 */
  .promo-ams-card, .camp-result-card,
  .set-shop-grid, .man-table-wrap, .pending-list {
    -webkit-overflow-scrolling: touch;
  }
  table { display: block; overflow-x: auto; max-width: 100%; }
  .man-table, .promo-ams-table, .camp-table { display: table; min-width: 100%; }

  /* 3. Safe-area 보강 — 좌우 + 하단 (tabbar 위 콘텐츠가 home indicator에 가려지지 않게) */
  .app-main {
    padding-left: max(14px, env(safe-area-inset-left, 14px));
    padding-right: max(14px, env(safe-area-inset-right, 14px));
    padding-bottom: max(calc(16px + var(--mobile-tabbar-h)), calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom, 16px) + 16px));
  }
  .mobile-header {
    padding-left: max(14px, env(safe-area-inset-left, 14px));
    padding-right: max(14px, env(safe-area-inset-right, 14px));
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px));
  }

  /* 6. Modal viewport — iPhone Safari URL bar dynamic 대응 */
  .modal-overlay {
    height: 100vh;
    height: 100dvh;
  }
  .modal-panel {
    max-height: calc(100dvh - 32px);
  }

  /* 7. (보너스) Mobile body scrolling 안정화 (modal open 시 background scroll 방지는 page 측 처리) */
  body { -webkit-text-size-adjust: 100%; }
}

/* ==========================================================
   Sprint 24-D: Modal + Form CSS 인프라 (2026-05-17)
   promo.html 패턴을 전 페이지 사용 가능하도록 이관
   사용: Shell.openModal({title, body, footer})
   ==========================================================
   */
    /* ── Sprint 17: Modal infrastructure ── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px) saturate(140%);
      -webkit-backdrop-filter: blur(8px) saturate(140%);
      display: flex; align-items: center; justify-content: center;
      animation: promo-fade-in 0.18s var(--ease-out);
    }
    .modal-panel {
      background: var(--bg);
      border: 1px solid var(--border-2);
      border-radius: var(--radius-lg);
      width: 92%; max-width: 480px;
      max-height: 88vh; overflow: hidden;
      display: flex; flex-direction: column;
      box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    }
    .modal-panel.wide  { max-width: 720px; }
    .modal-panel.xwide { max-width: 920px; }
    .modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .modal-title {
      font-size: 15px; font-weight: 700;
      color: var(--text);
    }
    .modal-subtitle {
      font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45;
    }
    .modal-close {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      background: transparent; border: 0;
      color: var(--text-5);
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-family: inherit;
    }
    .modal-close:hover { background: var(--card-bg-3); color: var(--text-2); }
    .modal-body {
      padding: 18px 20px;
      overflow-y: auto;
      flex: 1;
    }
    .modal-footer {
      padding: 12px 20px;
      border-top: 1px solid var(--border);
      display: flex; justify-content: flex-end; gap: 8px;
      flex-shrink: 0;
    }

    /* ── Sprint 17: Form fields ── */
    .form-row { margin-bottom: 14px; }
    .form-row:last-child { margin-bottom: 0; }
    .form-label {
      display: block;
      font-size: 11px; font-weight: 700;
      color: var(--text-5);
      text-transform: uppercase; letter-spacing: 0.06em;
      margin-bottom: 5px;
    }
    .form-label-required::after {
      content: " *"; color: var(--orange);
    }
    .form-hint {
      font-size: 10.5px; color: var(--text-7);
      margin-top: 3px;
    }
    .form-input, .form-select, .form-textarea {
      width: 100%;
      padding: 8px 10px;
      background: var(--card-bg-3);
      border: 1px solid var(--border-2);
      border-radius: 8px;
      color: var(--text);
      font-family: inherit;
      font-size: 13px;
      outline: none;
      transition: border-color 0.15s;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--orange);
    }
    .form-textarea { resize: vertical; min-height: 60px; }
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    .form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .form-checkbox-row {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .form-checkbox-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 11px;
      background: var(--card-bg-3);
      border: 1px solid var(--border-2);
      border-radius: 8px;
      font-size: 12px; font-weight: 600;
      cursor: pointer;
      color: var(--text-4);
      transition: all 150ms var(--ease-out);
    }
    .form-checkbox-pill:hover { color: var(--text-2); border-color: var(--border-3); }
    .form-checkbox-pill input { margin: 0; accent-color: var(--orange); }
    .form-checkbox-pill.checked {
      background: var(--orange-soft);
      border-color: var(--orange);
      color: var(--orange);
    }
    .form-radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .form-error {
      font-size: 11px; color: var(--red); margin-top: 4px; display: none;
    }
    .form-error.show { display: block; }

    /* Pending queue list (Phase B) */
    .pending-list {
      display: flex; flex-direction: column; gap: 6px;
      max-height: 50vh; overflow-y: auto;
    }
    .pending-item {
      padding: 10px 12px;
      background: var(--card-bg-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 10px; align-items: center;
    }
    .pending-item-name {
      font-size: 12.5px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pending-item-meta {
      font-size: 10.5px; color: var(--text-7);
      margin-top: 2px;
    }
    .pending-item-action {
      padding: 4px 10px; font-size: 11px; font-weight: 600;
      border-radius: 6px; cursor: pointer; font-family: inherit;
    }
    .pending-item-retry { background: var(--orange-soft); border: 1px solid var(--orange); color: var(--orange); }
    .pending-item-remove { background: transparent; border: 1px solid var(--border-2); color: var(--text-5); }


/* ── End Sprint 24-D ── */

/* ===========================================================
   Sprint 27 — FAB (Floating Action Button)
   2026-05-17 — 모바일 우하단 핵심 액션 1-tap
   =========================================================== */
.shell-fab {
  display: none;
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 16px));
  bottom: calc(var(--mobile-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  border: 0;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,0.18);
  z-index: 150;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s;
}
.shell-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--orange-glow); }
.shell-fab:active { transform: scale(0.94); }

@media (max-width: 768px) {
  .shell-fab[data-active="1"] { display: flex; }
}

/* Shortcut help modal — kbd keys */
.shortcut-help-grid {
  display: grid; grid-template-columns: 1fr; gap: 4px;
}
.shortcut-help-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px;
  padding: 8px 4px; align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.shortcut-help-keys { display: flex; gap: 4px; flex-wrap: wrap; }
.shortcut-help-kbd {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--card-bg-3);
  border: 1px solid var(--border-2);
  box-shadow: 0 1px 0 var(--border-3);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  font-weight: 700;
}
.shortcut-help-label { color: var(--text-3); }

/* ── Copyright footer (모든 2.0 페이지 공통, 우측 하단 fixed) ── */
/* 시인성: 라이트/다크 모드 자동 대응 — _tokens.css 토큰만 사용 */
.shell-copyright {
  position: fixed;
  right: 14px;
  bottom: 8px;
  z-index: 6;
  font-size: 10px;
  color: var(--text-3);
  background: var(--card-bg);
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: box-shadow 0.18s var(--ease-out, ease);
}
.shell-cr-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.18s var(--ease-out, ease), background 0.18s var(--ease-out, ease), transform 0.18s var(--ease-out, ease);
  margin-right: 2px;
}
.shell-cr-ig:hover {
  color: #fff;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  transform: scale(1.08);
}
.shell-copyright:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.14); }
.shell-cr-mark { font-weight: 700; color: var(--text-2); margin-right: 2px; }
.shell-cr-tel {
  color: var(--text-2);
  font-family: var(--mono);
  font-weight: 600;
}
.shell-cr-slogan { color: var(--text-5); font-style: italic; }

@media (max-width: 768px) {
  .shell-copyright {
    bottom: calc(var(--mobile-tabbar-h, 64px) + 6px);
    right: 8px;
    font-size: 9px;
    padding: 3px 8px;
    white-space: normal;
    max-width: calc(100vw - 16px);
  }
}