/* =========================================================
   COINTADPOLE LOUNGE — 공용 스타일
   브랜드 토큰: CLAUDE.md (teal #0CB69B · night #050510/#0a0a1a · Pretendard)
   원칙: 미니멀. 애니메이션 그라디언트·글로우·이모지 없음.
   ========================================================= */
:root {
  --bg: #050510;
  --panel: #0a0a1a;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.04);
  --text: #eceaf4;
  --muted: #8b8fa3;
  --teal: #0CB69B;
  --teal-light: #22C4AF;
  --red: #EF4444;
  --blue: #3B82F6;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 5, 16, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 28px;
  height: 60px;
}
.wordmark { font-weight: 800; letter-spacing: 0.04em; font-size: 15px; white-space: nowrap; }
.wordmark .wm-lounge { color: var(--teal); }
.main-nav { display: flex; gap: 20px; align-items: center; flex: 1; }
.main-nav a { color: var(--muted); font-size: 14px; font-weight: 500; }
.main-nav a:hover { color: var(--text); }
.main-nav a.active { color: var(--teal-light); }
.nav-portal {
  margin-left: auto;
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px;
  font-size: 13px !important;
}
.nav-portal:hover { border-color: var(--teal); color: var(--teal-light) !important; }
.lang-toggle {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); font-size: 12px; font-weight: 700; padding: 5px 10px;
}
.lang-toggle:hover { color: var(--text); border-color: var(--muted); }

/* ---------- 공통 컴포넌트 ---------- */
main { padding: 40px 0 72px; }
.page-title { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.page-desc { color: var(--muted); font-size: 14px; margin-bottom: 28px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card + .card { margin-top: 16px; }
.card h2 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.card .sub { color: var(--muted); font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--teal); color: #04110e; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; padding: 11px 20px;
  transition: background 0.15s;
}
.btn:hover { background: var(--teal-light); }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--teal); color: var(--teal-light); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; padding: 11px 14px; outline: none;
}
.input:focus { border-color: var(--teal); }
.input::placeholder { color: var(--muted); }

.note { color: var(--muted); font-size: 12.5px; }
.note.warn { color: #c9a86a; }

.badge-member {
  display: inline-block; background: rgba(12, 182, 155, 0.14); color: var(--teal-light);
  border: 1px solid rgba(12, 182, 155, 0.35); border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  padding: 1px 7px; vertical-align: 1px;
}

.pos { color: var(--teal-light); }
.neg { color: var(--red); }

/* ---------- 탭 ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 13px; font-weight: 600; padding: 7px 16px;
}
.tab:hover { color: var(--text); }
.tab.active { border-color: var(--teal); color: var(--teal-light); }
.tab.locked { opacity: 0.55; }
.tab .lock-hint { font-size: 11px; margin-left: 6px; color: var(--muted); }

/* ---------- 홈 ---------- */
.hero { padding: 28px 0 8px; }
.hero h1 { font-size: 30px; font-weight: 800; line-height: 1.3; }
.hero h1 .accent { color: var(--teal); }
.hero .lead { color: var(--muted); font-size: 15px; margin-top: 10px; max-width: 640px; }
.disclaimer {
  margin-top: 16px; padding: 10px 14px;
  border-left: 2px solid var(--line);
  color: var(--muted); font-size: 12.5px; max-width: 640px;
}
.home-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px;
}
.verify-row { display: flex; gap: 8px; margin-top: 14px; }
.verify-row .input { flex: 1; }
.points-result { margin-top: 14px; display: none; }
.points-result.show { display: block; }
.points-balance { font-size: 28px; font-weight: 800; color: var(--teal-light); }
.points-balance .unit { font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 4px; }

.round-stats { display: flex; gap: 28px; margin: 16px 0 18px; }
.round-stat .rs-label { color: var(--muted); font-size: 12px; }
.round-stat .rs-value { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.round-rules { border-top: 1px solid var(--line-soft); padding-top: 12px; }

/* ---------- 게임판 ---------- */
.game-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
.chart-card { padding: 16px; }
.chart-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.chart-symbol { font-weight: 800; font-size: 15px; }
.chart-price { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.ind-toggles { margin-left: auto; display: flex; gap: 6px; }
.ind-toggle {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); font-size: 11.5px; font-weight: 700; padding: 3px 9px;
}
.ind-toggle.on { border-color: var(--teal); color: var(--teal-light); }
#chart { height: 420px; }
#rsiPane { height: 110px; display: none; border-top: 1px solid var(--line-soft); }
#rsiPane.show { display: block; }
.chart-note { margin-top: 10px; }

.trade-panel .balance-row { display: flex; justify-content: space-between; align-items: baseline; }
.trade-panel .balance-val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.trade-panel .ret-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-top: 2px; }
.qty-quick { display: flex; gap: 6px; margin-top: 8px; }
.qty-quick button {
  flex: 1; background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); font-size: 11.5px; padding: 4px 0;
}
.qty-quick button:hover { color: var(--text); border-color: var(--muted); }
.side-btns { display: flex; gap: 8px; margin-top: 12px; }
.side-btns .btn { flex: 1; padding: 12px 0; }
.btn-long { background: var(--teal); }
.btn-short { background: var(--red); color: #fff; }
.btn-short:hover { background: #f26262; }
.position-box { border-top: 1px solid var(--line-soft); margin-top: 18px; padding-top: 14px; }
.position-row { display: flex; justify-content: space-between; font-size: 13.5px; margin-top: 6px; }
.position-row .k { color: var(--muted); }
.fill-log { border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 10px; }
.fill-log li { list-style: none; color: var(--muted); font-size: 12px; padding: 3px 0; }

/* ---------- 순위 ---------- */
.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb-table th {
  text-align: left; color: var(--muted); font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--line); padding: 8px 10px;
}
.lb-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.lb-table tr.top td { font-weight: 700; }
.lb-table tr.top .lb-rank { color: var(--teal-light); }
.lb-table tr.me td { background: rgba(12, 182, 155, 0.07); }
.lb-rank { width: 52px; }

.rank-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }

/* 결과 카드 (공유용) */
.result-card {
  background: linear-gradient(160deg, #0a0a1a 0%, #071612 100%);
  border: 1px solid rgba(12, 182, 155, 0.3);
  border-radius: var(--radius);
  padding: 24px;
}
.result-card .rc-brand { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--teal); }
.result-card .rc-nick { font-size: 18px; font-weight: 800; margin-top: 12px; }
.result-card .rc-ret { font-size: 40px; font-weight: 800; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.result-card .rc-meta { color: var(--muted); font-size: 13px; }
.result-card .rc-foot {
  border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 11.5px;
}

/* ---------- 푸터 ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 24px 0 40px; }
.site-footer .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer p { color: var(--muted); font-size: 12px; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .home-grid, .game-layout, .rank-grid { grid-template-columns: 1fr; }
  #chart { height: 320px; }
  .main-nav { gap: 14px; }
  .hero h1 { font-size: 24px; }
}
@media (max-width: 560px) {
  .nav-portal { display: none; }
  .header-inner { gap: 16px; }
}