/* ═══════════════════════════════════════════════════════════════════
   메월드허브 — 거래소 스타일 메인 CSS (바이낸스/업비트 inspired)
   Dark Theme Only
   ═══════════════════════════════════════════════════════════════════ */

/* ── 다크 테마 (기본) ────────────────────────────────────────────── */
:root {
  /* 배경 계층 */
  --color-bg           : #1e2329;
  --color-bg-secondary : #181a20;
  --color-bg-card      : #252930;
  --color-bg-hover     : #2b3139;
  --color-input-bg     : #1e2329;

  /* 테두리 */
  --color-border       : #2b3139;
  --color-border-light : #353d47;

  /* 텍스트 */
  --color-text         : #eaecef;
  --color-text-muted   : #848e9c;
  --color-text-dim     : #474d57;

  /* 브랜드 컬러 */
  --color-primary      : #f0b90b;
  --color-primary-hover: #d4a700;
  --color-accent       : #f0b90b;

  /* ── 한국 거래소 표준 색상 ── */
  --color-buy          : #cf304a;   /* 매수 = 빨강 */
  --color-buy-bg       : rgba(207, 48, 74, 0.08);
  --color-buy-hover    : rgba(207, 48, 74, 0.15);
  --color-sell         : #0066ff;   /* 매도 = 파랑 (극강의 블루) */
  --color-sell-bg      : rgba(37, 99, 235, 0.08);
  --color-sell-hover   : rgba(37, 99, 235, 0.15);

  /* 상태 색상 */
  --color-success      : #0ecb81;
  --color-warning      : #f0b90b;
  --color-danger       : #cf304a;
  --color-info         : #0066ff;

  /* 타이포그래피 */
  --font-main  : 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
  --font-mono  : 'Roboto Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* 크기 */
  --font-size-xs   : 0.7rem;
  --font-size-sm   : 0.8rem;
  --font-size-base : 0.875rem;
  --font-size-md   : 0.9rem;
  --font-size-lg   : 1rem;
  --font-size-xl   : 1.1rem;
  --font-size-2xl  : 1.25rem;

  /* 레이아웃 */
  --navbar-height  : 48px;
  --max-width      : 1280px;

  /* 거래소 스타일: 각진 디자인 */
  --radius-sm  : 2px;
  --radius-md  : 3px;
  --radius-lg  : 4px;

  /* 그림자: 최소화 */
  --shadow-sm  : none;
  --shadow-md  : 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-glow: none;

  /* 트랜지션 */
  --transition : 0.15s ease;
}

/* ── 라이트 테마 ───────────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg           : #fafafa;
  --color-bg-secondary : #f0f1f5;
  --color-bg-card      : #ffffff;
  --color-bg-hover     : #f5f5f5;
  --color-input-bg     : #ffffff;

  --color-border       : #e2e8f0;
  --color-border-light : #cbd5e1;

  --color-text         : #1e2329;
  --color-text-muted   : #707a8a;
  --color-text-dim     : #b7bec9;

  --color-primary      : #d4a700;
  --color-primary-hover: #b8910a;

  --color-buy          : #cf304a;
  --color-buy-bg       : rgba(207, 48, 74, 0.06);
  --color-buy-hover    : rgba(207, 48, 74, 0.12);
  --color-sell         : #1d4ed8;
  --color-sell-bg      : rgba(29, 78, 216, 0.06);
  --color-sell-hover   : rgba(29, 78, 216, 0.12);

  --color-success      : #059669;
  --color-warning      : #d97706;
  --color-danger       : #cf304a;
  --color-info         : #1d4ed8;

  --shadow-md  : 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── 리셋 & 기본 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family    : var(--font-main);
  font-size      : var(--font-size-base);
  background     : var(--color-bg-secondary);
  color          : var(--color-text);
  min-height     : 100vh;
  line-height    : 1.5;
  -webkit-font-smoothing: antialiased;
  transition     : background 0.2s, color 0.2s;
}

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

/* ── 네비게이션 바 (거래소 스타일 — 48px 슬림) ─────────────── */
.navbar {
  position      : fixed;
  top: 0; left: 0; right: 0;
  height        : var(--navbar-height);
  background    : var(--color-bg);
  border-bottom : 1px solid var(--color-border);
  z-index       : 1000;
}

.nav-container {
  max-width  : 100%;
  padding    : 0 1rem;
  height     : 100%;
  display    : flex;
  align-items: center;
  gap        : 1.5rem;
}

.nav-logo {
  display    : flex;
  align-items: center;
  gap        : 0.4rem;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-icon { font-size: 1.1rem; }
.logo-text {
  font-size  : 0.95rem;
  font-weight: 700;
  color      : var(--color-primary);
  letter-spacing: 0.02em;
}

.nav-links {
  display : flex;
  gap     : 0;
  flex    : 1;
}
.nav-link {
  display      : flex;
  align-items  : center;
  height       : var(--navbar-height);
  padding      : 0 0.875rem;
  color        : var(--color-text-muted);
  font-size    : var(--font-size-sm);
  font-weight  : 500;
  border-bottom: 2px solid transparent;
  transition   : color var(--transition), border-color var(--transition);
  white-space  : nowrap;
}
.nav-link:hover { color: var(--color-text); }
.nav-link.active {
  color        : var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.nav-actions {
  display    : flex;
  align-items: center;
  gap        : 0.5rem;
  margin-left: auto;
}

/* ── 테마 토글 플로팅 버튼 ────────────────────────────────────── */
#theme-toggle-btn {
  position     : fixed;
  bottom       : 2rem;
  right        : 2rem;
  z-index      : 2000;
  display      : flex;
  align-items  : center;
  justify-content: center;
  width        : 44px;
  height       : 44px;
  border-radius: 50%;
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  color        : var(--color-text);
  font-size    : 1.25rem;
  cursor       : pointer;
  box-shadow   : var(--shadow-md);
  transition   : all var(--transition);
}
#theme-toggle-btn:hover {
  border-color : var(--color-primary);
  color        : var(--color-primary);
  transform    : translateY(-2px);
  box-shadow   : 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* ── 유저 뱃지 (슬림) ────────────────────────────────────────── */
.user-badge {
  position     : relative;
  display      : flex;
  align-items  : center;
  gap          : 0.4rem;
  padding      : 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  font-size    : var(--font-size-sm);
  cursor       : pointer;
  user-select  : none;
  transition   : border-color var(--transition), background var(--transition);
}
.user-badge:hover {
  border-color : var(--color-primary);
  background   : var(--color-bg-hover);
}

.user-dropdown-menu {
  position     : absolute;
  top          : calc(100% + 4px);
  right        : 0;
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width    : 150px;
  z-index      : 1100;
  display      : flex;
  flex-direction: column;
}
.user-dropdown-menu.hidden { display: none !important; }

.user-dropdown-item {
  display      : flex;
  align-items  : center;
  gap          : 0.4rem;
  padding      : 0.6rem 0.875rem;
  font-size    : var(--font-size-sm);
  color        : var(--color-text-muted);
  text-align   : left;
  width        : 100%;
  background   : transparent;
  cursor       : pointer;
  transition   : color var(--transition), background var(--transition);
}
.user-dropdown-item:hover {
  color        : var(--color-text);
  background   : var(--color-bg-hover);
}
.user-dropdown-divider {
  height     : 1px;
  background : var(--color-border);
}

/* ── 버튼 시스템 ─────────────────────────────────────────────── */
.btn {
  display      : inline-flex;
  align-items  : center;
  justify-content: center;
  gap          : 0.35rem;
  padding      : 0.375rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size    : var(--font-size-sm);
  font-weight  : 600;
  transition   : all var(--transition);
  white-space  : nowrap;
  border       : 1px solid transparent;
}
.btn-primary {
  background   : var(--color-primary);
  color        : #1e2329;
  border-color : var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

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

.btn-danger {
  background   : var(--color-danger);
  color        : #fff;
  border-color : var(--color-danger);
}
.btn-outline {
  background   : transparent;
  border       : 1px solid var(--color-border);
  color        : var(--color-text-muted);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-text); }

/* ── 메인 레이아웃 ───────────────────────────────────────────── */
.site-wrapper {
  display        : flex;
  justify-content: center;
  align-items    : stretch;
  width          : 100%;
  max-width      : 1540px;
  margin         : 0 auto;
  margin-top     : var(--navbar-height);
  min-height     : calc(100vh - var(--navbar-height));
  padding        : 0 8px;
}

.ad-wing {
  width      : 160px;
  flex-shrink: 0;
  display    : flex;
  flex-direction: column;
  padding    : 0.75rem 0;
}
.ad-wing:first-child { margin-right: 8px; }
.ad-wing:last-child  { margin-left: 8px; }

.ad-placeholder {
  position     : sticky;
  top          : calc(var(--navbar-height) + 0.75rem);
  background   : var(--color-bg);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  height       : 600px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-direction: column;
  text-align   : center;
  color        : var(--color-text-dim);
  font-size    : 0.7rem;
  font-weight  : 600;
  overflow     : hidden;
}
.coupang-mock {
  background: linear-gradient(to bottom, #111, #1a1a1a);
  border: 1px solid #333;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s;
}
.coupang-mock:hover {
  transform: translateY(-2px);
  border-color: #555;
}
.coupang-label {
  font-size: 0.7rem;
  color: #ff3e43; /* Coupang red-ish */
  font-weight: 900;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}
.coupang-desc {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
.coupang-btn {
  background: #ff3e43;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.8rem;
}

.main-content {
  flex          : 1;
  min-width     : 0;
  max-width     : 1200px;
  display       : flex;
  flex-direction: column;
  background    : var(--color-bg-secondary);
}

.container {
  width    : 100%;
  max-width: var(--max-width);
  margin   : 0 auto;
  padding  : 1.5rem 1rem;
}

/* ── 로딩 스크린 ─────────────────────────────────────────────── */
.loading-screen {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  min-height     : 50vh;
  gap            : 0.75rem;
  color          : var(--color-text-muted);
}
.spinner {
  width        : 28px;
  height       : 28px;
  border       : 2px solid var(--color-border);
  border-top   : 2px solid var(--color-primary);
  border-radius: 50%;
  animation    : spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 카드 ────────────────────────────────────────────────────── */
.card {
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding      : 1.25rem;
}

/* ── 토스트 알림 ─────────────────────────────────────────────── */
.toast-container {
  position      : fixed;
  bottom        : 1rem;
  right         : 1rem;
  display       : flex;
  flex-direction: column;
  gap           : 0.375rem;
  z-index       : 9999;
}
.toast {
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding      : 0.625rem 1rem;
  min-width    : 260px;
  max-width    : 340px;
  font-size    : var(--font-size-sm);
  animation    : slideIn 0.2s ease;
  display      : flex;
  align-items  : flex-start;
  gap          : 0.5rem;
}
.toast::before {
  content    : '';
  width      : 3px;
  flex-shrink: 0;
  align-self : stretch;
  border-radius: 1px;
}
.toast.success::before { background: var(--color-success); }
.toast.error::before   { background: var(--color-danger); }
.toast.info::before    { background: var(--color-info); }
.toast.warning::before { background: var(--color-warning); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── 입력 필드 공통 ──────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="password"],
select, textarea {
  background   : var(--color-input-bg);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color        : var(--color-text);
  padding      : 0.375rem 0.625rem;
  transition   : border-color var(--transition);
  outline      : none;
}
input:focus, select:focus, textarea:focus {
  border-color : var(--color-primary);
}
input::placeholder { color: var(--color-text-dim); }

/* ── 캐릭터 관리 (내 정보) ──────────────────────────────────── */
.character-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap                  : 0.75rem;
}
.character-card {
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding      : 1rem;
  position     : relative;
  transition   : border-color var(--transition);
}
.character-card:hover { border-color: var(--color-border-light); }
.character-card.main-char { border-color: var(--color-primary); }

.main-char-badge {
  position   : absolute;
  top        : 0.5rem;
  right      : 0.5rem;
  background : var(--color-primary);
  color      : #1e2329;
  font-size  : 0.65rem;
  font-weight: 800;
  padding    : 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
}
.char-name {
  font-size  : 1rem;
  font-weight: 700;
  color      : var(--color-text);
  margin-bottom: 0.15rem;
}
.char-job {
  font-size : var(--font-size-sm);
  color     : var(--color-primary);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.char-stat {
  display        : flex;
  justify-content: space-between;
  font-size      : var(--font-size-sm);
  color          : var(--color-text-muted);
  padding        : 0.25rem 0;
  border-bottom  : 1px solid var(--color-border);
}
.char-stat:last-of-type { border-bottom: none; }
.char-stat strong { color: var(--color-text); }

.char-card-actions {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-top     : 0.75rem;
  padding-top    : 0.625rem;
  border-top     : 1px solid var(--color-border);
}

/* ── 유틸리티 ────────────────────────────────────────────────── */
.hidden         { display: none !important; }
.text-muted     { color: var(--color-text-muted); }
.text-primary   { color: var(--color-primary); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }
.text-buy       { color: var(--color-buy); }
.text-sell      { color: var(--color-sell); }
.text-warning   { color: var(--color-warning); }
.text-center    { text-align: center; }
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.gap-1          { gap: 0.25rem; }
.gap-2          { gap: 0.5rem; }
.gap-4          { gap: 1rem; }
.mt-2           { margin-top: 0.5rem; }
.mt-4           { margin-top: 1rem; }
.font-mono      { font-family: var(--font-mono); }

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ad-wing { display: none; }
}

/* 프리미엄 부스트 하이라이트 효과 */
.premium-highlight {
  border: 2px solid var(--color-primary) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(236, 72, 153, 0.05)) !important;
}
.premium-badge {
  background-color: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  font-weight: bold;
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .container { padding: 0.75rem; }
}