/* ============================================
   Shop2World 회원 대시보드 스타일
   Premium Dark Theme - Glassmorphism
   ============================================ */

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

/* ===== Reset & Base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body {
  font-family:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  background:#0a0a1a;
  color:#e0e0e0;
  min-height:100vh;
  line-height:1.6;
}
a { color:#fbbf24; text-decoration:none; transition:color 0.2s; }
a:hover { color:#f59e0b; }

/* ===== Layout ===== */
.dashboard-wrap { display:flex; min-height:100vh; }

/* ===== Sidebar ===== */
.sidebar {
  width:260px; flex-shrink:0;
  background: linear-gradient(180deg, #0f0f2e 0%, #0a0a1a 100%);
  border-right:1px solid rgba(255,255,255,0.06);
  padding:0; position:fixed; top:0; left:0; bottom:0;
  z-index:1000; overflow-y:auto;
  transition: transform 0.3s;
}
.sidebar-header {
  padding:24px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-align:center;
}
.sidebar-logo { color:#fbbf24; font-weight:900; font-size:1.3em; letter-spacing:1px; }
.sidebar-logo span { color:#e94560; }
.sidebar-subtitle { color:#555; font-size:0.75em; margin-top:2px; }

.sidebar-user {
  padding:20px; border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:12px;
}
.avatar-circle {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#e94560);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.1em; color:#0a0a1a; flex-shrink:0;
}
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-user-name { font-weight:700; font-size:0.95em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-code { color:#666; font-size:0.75em; }

.sidebar-nav { padding:12px 0; }
.sidebar-section { padding:8px 20px 4px; color:#444; font-size:0.7em; font-weight:700; text-transform:uppercase; letter-spacing:2px; }
.sidebar-link {
  display:flex; align-items:center; gap:12px;
  padding:10px 20px; color:#888; font-size:0.9em;
  transition:all 0.2s; border-left:3px solid transparent;
}
.sidebar-link:hover { background:rgba(255,255,255,0.04); color:#fff; }
.sidebar-link.active { background:rgba(251,191,36,0.08); color:#fbbf24; border-left-color:#fbbf24; }
.sidebar-link .icon { font-size:1.15em; width:22px; text-align:center; }

.sidebar-footer {
  position:absolute; bottom:0; left:0; right:0;
  padding:15px 20px; border-top:1px solid rgba(255,255,255,0.06);
}
.sidebar-footer a { color:#555; font-size:0.8em; }
.sidebar-footer a:hover { color:#e94560; }

/* ===== Main Content ===== */
.main-content { flex:1; margin-left:260px; padding:30px; min-height:100vh; }

.page-header { margin-bottom:30px; }
.page-header h1 { font-size:1.7em; font-weight:900; margin-bottom:4px; }
.page-header p { color:#666; font-size:0.9em; }

/* ===== Stats Grid ===== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:30px; }
.stat-card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:22px;
  transition:all 0.3s;
}
.stat-card:hover { background:rgba(255,255,255,0.07); transform:translateY(-2px); }
.stat-icon { font-size:1.8em; margin-bottom:8px; }
.stat-value { font-size:2em; font-weight:900; color:#fff; line-height:1; }
.stat-label { color:#666; font-size:0.85em; margin-top:4px; }
.stat-card.gold .stat-value { color:#fbbf24; }
.stat-card.red .stat-value { color:#e94560; }
.stat-card.green .stat-value { color:#22c55e; }
.stat-card.blue .stat-value { color:#3b82f6; }

/* ===== Cards ===== */
.card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; overflow:hidden;
  margin-bottom:20px;
}
.card-header {
  padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:space-between;
}
.card-header h2 { font-size:1.1em; font-weight:700; }
.card-body { padding:22px; }

/* ===== Order Table ===== */
.order-table { width:100%; border-collapse:collapse; }
.order-table th {
  text-align:left; padding:10px 14px; color:#666;
  font-size:0.8em; font-weight:500; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.order-table td { padding:14px; border-bottom:1px solid rgba(255,255,255,0.04); }
.order-table tr:hover td { background:rgba(255,255,255,0.02); }
.order-table .order-num { color:#fbbf24; font-weight:700; font-size:0.9em; }
.order-table .product-name { font-weight:500; max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Status Badge ===== */
.status-badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:0.75em; font-weight:700;
  background:rgba(107,114,128,0.2); color:#9ca3af;
}
.status-badge.received { background:rgba(107,114,128,0.2); color:#9ca3af; }
.status-badge.quoted { background:rgba(245,158,11,0.15); color:#f59e0b; }
.status-badge.paid { background:rgba(16,185,129,0.15); color:#10b981; }
.status-badge.purchasing,.status-badge.purchased { background:rgba(59,130,246,0.15); color:#3b82f6; }
.status-badge.warehouse_in,.status-badge.shipped { background:rgba(139,92,246,0.15); color:#8b5cf6; }
.status-badge.customs { background:rgba(236,72,153,0.15); color:#ec4899; }
.status-badge.delivering { background:rgba(239,68,68,0.15); color:#ef4444; }
.status-badge.completed { background:rgba(34,197,94,0.15); color:#22c55e; }
.status-badge.cancelled { background:rgba(107,114,128,0.2); color:#6b7280; text-decoration:line-through; }

/* ===== Progress Bar ===== */
.progress-bar {
  width:100%; height:6px; background:rgba(255,255,255,0.08);
  border-radius:3px; overflow:hidden;
}
.progress-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,#fbbf24,#e94560);
  transition:width 0.6s ease;
}

/* ===== Address Box ===== */
.address-box {
  background:linear-gradient(135deg,rgba(251,191,36,0.08),rgba(233,69,96,0.05));
  border:1px solid rgba(251,191,36,0.2);
  border-radius:16px; padding:24px; position:relative;
}
.address-box h3 { color:#fbbf24; font-size:1em; margin-bottom:12px; }
.address-line { color:#ccc; font-size:0.95em; line-height:1.8; font-family:'Courier New',monospace; }
.address-line strong { color:#fff; }
.copy-btn {
  position:absolute; top:16px; right:16px;
  background:rgba(251,191,36,0.15); border:1px solid rgba(251,191,36,0.3);
  color:#fbbf24; padding:6px 14px; border-radius:8px;
  cursor:pointer; font-size:0.8em; font-weight:700;
  transition:all 0.2s;
}
.copy-btn:hover { background:rgba(251,191,36,0.25); }
.copy-btn.copied { background:rgba(34,197,94,0.2); border-color:rgba(34,197,94,0.3); color:#22c55e; }

/* ===== Forms ===== */
.form-group { margin-bottom:18px; }
.form-label { display:block; color:#999; font-size:0.85em; font-weight:500; margin-bottom:6px; }
.form-input, .form-textarea, .form-select {
  width:100%; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; color:#fff; padding:11px 16px;
  font-size:0.95em; font-family:inherit; outline:none;
  transition:border-color 0.2s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color:#fbbf24; }
.form-input::placeholder { color:#555; }
.form-textarea { resize:vertical; min-height:100px; }
.form-select { appearance:none; cursor:pointer; }
.form-select option { background:#1a1a2e; color:#fff; }
.form-hint { color:#555; font-size:0.75em; margin-top:4px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 24px; border-radius:10px; border:none;
  font-weight:700; font-size:0.9em; cursor:pointer;
  transition:all 0.2s; font-family:inherit; text-decoration:none;
}
.btn-primary {
  background:linear-gradient(135deg,#e94560,#c0392b);
  color:#fff; box-shadow:0 4px 15px rgba(233,69,96,0.3);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(233,69,96,0.4); color:#fff; }
.btn-secondary {
  background:rgba(255,255,255,0.08); color:#ccc;
  border:1px solid rgba(255,255,255,0.15);
}
.btn-secondary:hover { background:rgba(255,255,255,0.12); color:#fff; }
.btn-gold {
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#0a0a1a; box-shadow:0 4px 15px rgba(251,191,36,0.3);
}
.btn-gold:hover { transform:translateY(-1px); color:#0a0a1a; }
.btn-danger { background:rgba(239,68,68,0.15); color:#ef4444; border:1px solid rgba(239,68,68,0.2); }
.btn-sm { padding:6px 14px; font-size:0.8em; border-radius:8px; }
.btn-block { width:100%; }

/* ===== Alerts ===== */
.alert { padding:14px 18px; border-radius:12px; margin-bottom:20px; font-size:0.9em; }
.alert-success { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); color:#22c55e; }
.alert-error { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); color:#ef4444; }
.alert-info { background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2); color:#3b82f6; }
.alert-warning { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.2); color:#f59e0b; }

/* ===== Auth Pages (Login/Register) ===== */
.auth-container {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
  background: radial-gradient(ellipse at top, #0f0f2e 0%, #0a0a1a 60%);
}
.auth-card {
  width:100%; max-width:440px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:40px;
  backdrop-filter:blur(12px);
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.auth-logo { text-align:center; margin-bottom:30px; }
.auth-logo h1 { font-size:1.6em; font-weight:900; }
.auth-logo h1 .gold { color:#fbbf24; }
.auth-logo p { color:#666; font-size:0.85em; margin-top:4px; }
.auth-divider {
  display:flex; align-items:center; gap:12px; margin:20px 0;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; height:1px; background:rgba(255,255,255,0.1);
}
.auth-divider span { color:#555; font-size:0.8em; }
.auth-footer { text-align:center; margin-top:20px; color:#666; font-size:0.85em; }
.auth-footer a { color:#fbbf24; font-weight:700; }

/* ===== Empty State ===== */
.empty-state {
  text-align:center; padding:50px 20px; color:#555;
}
.empty-state .icon { font-size:3em; margin-bottom:12px; opacity:0.5; }
.empty-state h3 { color:#888; margin-bottom:8px; }
.empty-state p { font-size:0.9em; }

/* ===== Mobile Responsive ===== */
.mobile-header {
  display:none; position:fixed; top:0; left:0; right:0;
  background:rgba(10,10,26,0.95); backdrop-filter:blur(12px);
  padding:12px 16px; z-index:999;
  border-bottom:1px solid rgba(255,255,255,0.06);
  align-items:center; justify-content:space-between;
}
.mobile-toggle {
  background:none; border:1px solid rgba(255,255,255,0.15);
  color:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:1.1em;
}
.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:999;
}

@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.open { display:block; }
  .mobile-header { display:flex; }
  .main-content { margin-left:0; padding:70px 16px 20px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .order-table { font-size:0.85em; }
  .order-table th:nth-child(3), .order-table td:nth-child(3),
  .order-table th:nth-child(5), .order-table td:nth-child(5) { display:none; }
}

/* ===== Animations ===== */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn 0.4s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
.slide-in { animation:slideIn 0.3s ease; }