/* ============================================================
   gas-style.css — 해마물류 통합 보드 (GAS index.html 1:1 복제)
   Pretendard + 사이드바 + 톱바 + 모달 (CSS 변수 / 컴포넌트)
   ============================================================ */

/* ──────── 전역 CSS 변수 (GAS index.html :root 동일) ──────── */
:root {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --sidebar-bg: #1e293b;
  --sidebar-hover: #334155;
  --bg-color: #f8fafc;
  --surface: #ffffff;
  --text-main: #334155;
  --text-muted: #64748b;
  --warning: #f59e0b;
  --danger: #ef4444;
  --success: #10b981;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --radius-md: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; border: 2px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

body {
  margin: 0; padding: 0; display: flex; height: 100vh;
  background-color: var(--bg-color); color: var(--text-main);
  overflow: hidden; min-width: 1280px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', sans-serif;
  font-weight: 500;
}

/* ──────── 태블릿 모드 (탭 모드 토글) ──────── */
body.tablet-mode { min-width: 0 !important; overflow-y: auto !important; display: block !important; }
body.tablet-mode .main-wrapper { display: block !important; height: auto !important; overflow: visible !important; }
body.tablet-mode .content-area { height: auto !important; overflow: visible !important; padding: 15px !important; }
body.tablet-mode .sidebar { display: none !important; }
body.tablet-mode .ws-split-layout,
body.tablet-mode .dash-ranking-row,
body.tablet-mode .rank-grid,
body.tablet-mode .dash-grid { flex-direction: column !important; height: auto !important; display: flex !important; }
body.tablet-mode .ws-half-panel,
body.tablet-mode .ranking-panel,
body.tablet-mode .rank-table-container { width: 100% !important; max-width: 100% !important; margin-bottom: 20px; }

/* ──────── 사이드바 ──────── */
.sidebar {
  width: 250px; min-width: 250px; flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-md);
  z-index: 50;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden; white-space: nowrap;
  justify-content: space-between;
}
.sidebar.collapsed { width: 76px; min-width: 76px; }
.sidebar-header {
  padding: 24px 20px;
  font-size: 1.25rem; font-weight: 700;
  display: flex; align-items: center; gap: 12px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sidebar-header i { color: var(--primary); font-size: 1.4rem; transition: 0.3s; }
.sidebar.collapsed .sidebar-header { padding: 24px 0; justify-content: center; }
.sidebar.collapsed .sidebar-header span { opacity: 0; display: none; }

.nav-menu { list-style: none; padding: 15px 12px; margin: 0; flex: 1; overflow-y: auto; }
.nav-item {
  padding: 12px 16px; margin-bottom: 8px;
  cursor: pointer; font-size: 0.95rem; font-weight: 600;
  color: #cbd5e1;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  display: flex; align-items: center; gap: 12px;
  position: relative;
  text-decoration: none;
}
.nav-item i.menu-icon { font-size: 1.1rem; min-width: 24px; text-align: center; }

/* 메뉴별 아이콘 색상 (GAS 동일) */
.icon-dash    { color: #3b82f6; }
.icon-member  { color: #10b981; }
.icon-settle  { color: #8b5cf6; }
.icon-order   { color: #0ea5e9; }
.icon-best    { color: #f59e0b; }
.icon-whole   { color: #ef4444; }
.icon-trend   { color: #ec4899; }
.icon-keyword { color: #0ea5e9; }
.icon-drive   { color: #06b6d4; }
.icon-exchange{ color: #f97316; }
.icon-notice  { color: #eab308; }
.icon-db      { color: #14b8a6; }

.nav-item:hover { background: var(--sidebar-hover); color: #fff; transform: translateX(4px); }
.nav-item.active { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 4px 0 0 var(--primary); }

.sidebar.collapsed .nav-item { padding: 14px 0; justify-content: center; overflow: visible; }
.sidebar.collapsed .nav-item .nav-text { display: none; }
.sidebar.collapsed .nav-item:hover { transform: none; background: var(--sidebar-hover); }

.sidebar.collapsed .nav-item::after,
.sidebar.collapsed .sidebar-footer::after {
  content: attr(data-tooltip);
  position: absolute; left: 80px; top: 50%;
  transform: translateY(-50%) scale(0.95);
  background: #0f172a; color: #fff;
  padding: 8px 14px; border-radius: 6px;
  font-size: 0.85rem; font-weight: 600;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1050;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,0.1);
}
.sidebar.collapsed .nav-item:hover::after,
.sidebar.collapsed .sidebar-footer:hover::after {
  opacity: 1; visibility: visible;
  transform: translateY(-50%) scale(1);
}

.sidebar-footer {
  padding: 18px 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; gap: 12px;
  color: #cbd5e1;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}
.sidebar-footer:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar.collapsed .sidebar-footer { justify-content: center; padding: 18px 0; }
.sidebar.collapsed .sidebar-footer span { display: none; }

.nav-section-label {
  padding: 14px 16px 6px 16px;
  font-size: 0.7rem; font-weight: 700;
  color: #64748b; letter-spacing: 0.6px; text-transform: uppercase;
}

/* ──────── 메인 영역 ──────── */
.main-wrapper {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg-color);
  transition: 0.3s;
}
.top-header {
  height: 70px;
  background: var(--surface);
  border-bottom: 1px solid #e2e8f0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 30px;
  z-index: 40;
}

.global-btn {
  padding: 8px 16px;
  font-size: 0.9rem; font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer; border: none;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  font-family: inherit;
}
.global-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.btn-clear-cache { background: #f1f5f9; color: var(--text-main); border: 1px solid #cbd5e1; }

.user-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: #f1f5f9;
  border-radius: 20px; font-size: 0.85rem; font-weight: 700;
  color: var(--text-main);
}

.content-area {
  flex: 1; padding: 30px;
  overflow-y: auto; overflow-x: hidden;
  position: relative;
}

/* placeholder card — Phase 2 메뉴 구현 전 임시 */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid #e2e8f0;
}

/* ──────── 모달 (글로벌 오버레이) ──────── */
.global-overlay {
  display: none;
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.6);
  z-index: 99999;
  justify-content: center; align-items: center;
  backdrop-filter: blur(4px);
}
.custom-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalPop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header {
  padding: 20px 24px;
  background: #fff;
  color: var(--text-main);
  font-weight: 700; font-size: 1.15rem;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #e2e8f0;
}
.modal-body { padding: 24px; color: var(--text-main); background: #f8fafc; }
.modal-footer {
  padding: 16px 24px; background: #fff;
  display: flex; justify-content: flex-end; gap: 12px;
  border-top: 1px solid #e2e8f0;
}
.modal-btn {
  padding: 10px 24px; border: none;
  border-radius: var(--radius-md);
  font-weight: 600; cursor: pointer;
  transition: 0.2s; font-family: inherit;
}
.modal-btn:hover { filter: brightness(0.95); transform: translateY(-1px); }

.form-group { margin-bottom: 16px; text-align: left; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #475569; margin-bottom: 8px; }
.form-control {
  width: 100%; padding: 10px 12px;
  border: 1px solid #cbd5e1; border-radius: var(--radius-md);
  font-size: 0.95rem; outline: none;
  transition: all 0.2s; box-sizing: border-box;
  font-family: inherit; background: #fff;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

.export-btn-group { display: flex; gap: 12px; flex-direction: column; }
.export-option-btn {
  width: 100%; padding: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1rem; font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer; transition: 0.2s;
  border: none; color: white;
}
.export-option-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.1); }

/* ──────── 토스트 ──────── */
#toast-area {
  position: fixed; top: 20px; right: 20px;
  z-index: 100000;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--text-main); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.25s ease-out;
}
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ──────── 로그인 페이지 (PASSWORDLESS_MODE 시 거의 미사용) ──────── */
body.login-page {
  display: grid !important;
  place-items: center !important;
  min-height: 100vh !important;
  min-width: 0 !important;
  overflow: auto !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
}
.login-card {
  background: #fff;
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 380px;
}
.login-card h1 { font-size: 1.6rem; font-weight: 900; color: var(--text-main); margin-bottom: 4px; }
.login-card .subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.login-card input {
  width: 100%; padding: 12px 14px;
  border: 1px solid #cbd5e1; border-radius: var(--radius-md);
  font-size: 1rem; margin-bottom: 12px;
  outline: none; transition: 0.2s;
  background: #f8fafc; font-weight: 600;
}
.login-card input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.login-card button {
  width: 100%; padding: 13px;
  background: var(--primary); color: #fff;
  border: 0; border-radius: var(--radius-md);
  font-size: 1rem; font-weight: 800;
  cursor: pointer; transition: 0.2s;
}
.login-card button:hover { background: var(--primary-hover); }
.login-card .err {
  background: #fee2e2; color: var(--danger);
  padding: 10px 12px; border-radius: 6px;
  font-size: 0.85rem; font-weight: 700;
  margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════════
   v2 DESIGN UPGRADE — 2026 modern polish
   사이드바 그라데이션 / 카드 호버 / 모던 버튼 / 모달 스프링
   ════════════════════════════════════════════════════════════ */

/* ── 사이드바 그라데이션 + 글로우 ── */
.sidebar {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.04);
  box-shadow: 4px 0 24px -8px rgba(15, 23, 42, 0.4) !important;
}
.sidebar-header {
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, transparent 100%);
  padding: 28px 20px !important;
}
.sidebar-header i {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(59,130,246,0.4));
}
.nav-item {
  position: relative;
  overflow: hidden;
}
.nav-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(59,130,246,0.18), transparent);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.nav-item:hover::before { width: 100%; }
.nav-item > * { position: relative; z-index: 1; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(59,130,246,0.22), rgba(59,130,246,0.04)) !important;
  box-shadow: inset 4px 0 0 var(--primary), 0 2px 8px rgba(59,130,246,0.15) !important;
}
.nav-item.active i.menu-icon {
  filter: drop-shadow(0 0 6px currentColor);
}

/* ── 톱 헤더 글래스 ── */
.top-header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226,232,240,0.6) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.02), 0 4px 16px -8px rgba(15,23,42,0.06);
}

/* ── 카드: 부드러운 호버 + 그림자 ── */
.card,
.dash-card,
.rank-table-container,
.ranking-panel,
.ws-half-panel,
.stat-card {
  border-radius: 14px !important;
  border: 1px solid rgba(226,232,240,0.7) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.05) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover,
.dash-card:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15,23,42,0.06), 0 12px 28px -8px rgba(15,23,42,0.12) !important;
  border-color: rgba(59,130,246,0.2) !important;
}

/* ── 모던 버튼 (그라데이션 primary) ── */
.btn-primary,
.global-btn.btn-primary,
button.btn-primary,
.modal-btn.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(37,99,235,0.18), 0 4px 12px -2px rgba(37,99,235,0.25) !important;
}
.btn-primary:hover,
.global-btn.btn-primary:hover,
button.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 4px 8px rgba(37,99,235,0.25), 0 8px 20px -4px rgba(37,99,235,0.35) !important;
  transform: translateY(-2px);
}
.btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; border: none !important; }
.btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; border: none !important; }
.btn-danger  { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #fff !important; border: none !important; }

/* ── 모달 스프링 애니메이션 강화 ── */
@keyframes modalPop {
  0%   { transform: scale(0.85) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.02) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.custom-modal {
  animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 24px 64px -16px rgba(15,23,42,0.3), 0 16px 32px -8px rgba(15,23,42,0.15) !important;
}
.global-overlay { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
.modal-header {
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%) !important;
  padding: 22px 26px !important;
}

/* ── 스크롤바: 얇고 그라데이션 ── */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8) !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #94a3b8, #64748b) !important;
}

/* ── 테이블 폴리시 ── */
table.data-table, table.haema-table, .gb-table {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
table.data-table thead th, .gb-table thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  font-weight: 700; color: #475569;
  padding: 12px 14px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  font-size: 0.85rem;
}
table.data-table tbody tr, .gb-table tbody tr {
  transition: background 0.15s ease;
}
table.data-table tbody tr:hover, .gb-table tbody tr:hover {
  background: rgba(59,130,246,0.04) !important;
}
table.data-table tbody td, .gb-table tbody td {
  padding: 11px 14px !important;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.9rem;
}

/* ── 상태 배지: 비비드 ── */
.badge, .status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.badge-success, .status-approved {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #047857;
}
.badge-warning, .status-pending {
  background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309;
}
.badge-danger, .status-rejected {
  background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c;
}
.badge-info {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af;
}

/* ── 포커스 링 통일 ── */
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12) !important;
  outline: none !important;
}

/* ── 토스트 모던 ── */
.toast {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(15,23,42,0.25), 0 2px 6px rgba(15,23,42,0.15) !important;
  border-radius: 10px !important;
  padding: 13px 20px !important;
}
.toast.toast-success { background: linear-gradient(135deg, #10b981, #059669) !important; }
.toast.toast-error   { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
.toast.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }

/* ── 대시보드 카드 강조 ── */
.dash-stat-value {
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}

/* ── 룰렛 통계 카드 ── */
.roulette-stats-card {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border: 1px solid #fed7aa !important;
  border-radius: 14px;
  padding: 20px;
}
.roulette-stats-card .label {
  font-size: 0.8rem; color: #92400e; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.roulette-stats-card .value {
  font-size: 1.9rem; font-weight: 900; color: #b45309;
  margin-top: 4px;
}
.roulette-stats-card .sub {
  font-size: 0.85rem; color: #d97706; margin-top: 6px; font-weight: 600;
}