/* ═══════════════════════════════════════════════════
   EDENSFLOWER DESIGN SYSTEM v8.5
   공통 테마 · 전 페이지 공유
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Outfit:wght@300;400;600;700;900&display=swap');

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

:root{
  --bg:#07070a;
  --surface:#0e0f14;
  --surface2:#13141c;
  --surface3:#1a1b25;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.04);
  --text:#e0e0e0;
  --text2:#a0a0b0;
  --muted:rgba(255,255,255,.45);

  --gold:#f3d27a;
  --gold-dim:rgba(243,210,122,.06);
  --gold-bdr:rgba(243,210,122,.2);

  --violet:#b88aff;
  --vi-dim:rgba(184,138,255,.06);
  --vi-bdr:rgba(184,138,255,.2);

  --cyan:#67e8f9;
  --ok:#2ee59d;
  --ok-dim:rgba(46,229,157,.08);
  --ok-bdr:rgba(46,229,157,.2);

  --danger:#ff4d6d;
  --dng-dim:rgba(255,77,109,.08);
  --dng-bdr:rgba(255,77,109,.2);

  --warn:#d69e2e;
}

html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;line-height:1.4}
.mono{font-family:'JetBrains Mono',monospace}

/* ═══ HEADER ═══ */
#eden-header{
  height:90px;
  background:rgba(10,10,14,.96);
  border-bottom:1px solid var(--gold-bdr);
  display:flex;align-items:center;
  padding:0 18px;gap:12px;
  position:sticky;top:0;z-index:200;
  backdrop-filter:blur(14px);
}
.hdr-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.hdr-logo svg{opacity:.85}
.hdr-nav{display:flex;gap:1px;margin-left:auto}
.hdr-nav a{
  padding:8px 14px;font-size:11px;font-weight:600;
  color:var(--muted);text-decoration:none;
  border:1px solid transparent;transition:.12s;
}
.hdr-nav a:hover{color:var(--violet);border-color:var(--vi-bdr);background:var(--vi-dim)}
.hdr-nav a.active{color:var(--gold);border-color:var(--gold-bdr);background:var(--gold-dim)}
.hdr-hud{display:flex;gap:14px;align-items:center;margin:0 16px;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap}
.hdr-hud b{color:var(--text);font-weight:600}
.hdr-hud .up{color:var(--ok)}.hdr-hud .dn{color:var(--danger)}

/* ═══ LAYOUT ═══ */
.page{max-width:1440px;margin:0 auto;padding:14px 20px;display:flex;flex-direction:column;gap:12px}
.row{display:grid;gap:10px}
.r5{grid-template-columns:repeat(5,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r2{grid-template-columns:1fr 1fr}
.r1{grid-template-columns:1fr}
@media(max-width:1000px){.r5,.r4{grid-template-columns:repeat(3,1fr)}.r3{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.r5,.r4,.r3,.r2{grid-template-columns:1fr}.page{padding:10px 12px}}

/* ═══ KPI ═══ */
.kpi{background:var(--surface);border:1px solid var(--line);padding:14px;text-align:center}
.kpi-lbl{font-size:7.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-family:'JetBrains Mono',monospace;margin-bottom:3px}
.kpi-val{font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;line-height:1.1}
.kpi-sub{font-size:9px;color:var(--muted);margin-top:3px;font-family:'JetBrains Mono',monospace}

/* ═══ CARD ═══ */
.card{background:var(--surface);border:1px solid var(--line);overflow:hidden}
.card-h{padding:9px 14px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between}
.card-t{font-size:10px;font-weight:700;color:var(--gold);letter-spacing:.04em}
.card-b{font-size:8px;padding:2px 8px;font-family:'JetBrains Mono',monospace;background:var(--vi-dim);color:var(--violet);border:1px solid var(--vi-bdr)}
.card-body{padding:14px}

/* ═══ PROGRESS ═══ */
.prog{height:5px;background:rgba(255,255,255,.05);overflow:hidden;margin-top:4px}
.prog-bar{height:100%;transition:width .5s}

/* ═══ BADGES ═══ */
.badge{display:inline-block;padding:1px 6px;font-size:9px;font-weight:700;font-family:'JetBrains Mono',monospace}
.bg-S{background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold-bdr)}
.bg-A{background:var(--ok-dim);color:var(--ok);border:1px solid var(--ok-bdr)}
.bg-B{background:rgba(49,130,206,.06);color:#3182ce;border:1px solid rgba(49,130,206,.2)}
.bg-C{background:var(--vi-dim);color:var(--violet);border:1px solid var(--vi-bdr)}
.bg-D{background:rgba(214,158,46,.06);color:var(--warn);border:1px solid rgba(214,158,46,.2)}
.bg-F{background:var(--dng-dim);color:var(--danger);border:1px solid var(--dng-bdr)}
.bg-NEW{background:rgba(100,100,100,.06);color:#888;border:1px solid rgba(100,100,100,.2)}
.side-long{background:var(--ok-dim);color:var(--ok);border:1px solid var(--ok-bdr)}
.side-short{background:var(--dng-dim);color:var(--danger);border:1px solid var(--dng-bdr)}
.role-FW{color:#ff6b81}.role-MF{color:var(--ok)}.role-DF{color:var(--violet)}.role-GK{color:var(--gold)}

/* ═══ TABLE ═══ */
.tbl{width:100%;border-collapse:collapse;font-size:10px}
.tbl th{text-align:left;padding:6px 8px;font-size:8px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--line);font-weight:600}
.tbl td{padding:5px 8px;border-bottom:1px solid var(--line2)}
.tbl tr:hover{background:var(--surface2)}

/* ═══ ACTION BAR ═══ */
.action-bar{position:sticky;bottom:0;padding:8px 20px;display:flex;gap:6px;justify-content:center;background:rgba(7,7,10,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.act{padding:7px 16px;border:1px solid var(--line);font-size:10px;font-weight:700;cursor:pointer;transition:.12s;font-family:'Outfit',sans-serif;background:var(--surface);color:var(--muted)}
.act:hover{transform:translateY(-1px)}
.act.ok{color:var(--ok);border-color:var(--ok-bdr)}.act.ok:hover{background:var(--ok-dim)}
.act.ng{color:var(--danger);border-color:var(--dng-bdr)}.act.ng:hover{background:var(--dng-dim)}
.act.vi{color:var(--violet);border-color:var(--vi-bdr)}.act.vi:hover{background:var(--vi-dim)}

/* ═══ REGIME ═══ */
.regime{display:inline-block;padding:2px 7px;font-size:9px;font-weight:700;font-family:'JetBrains Mono',monospace}
.regime.TREND{background:var(--ok-dim);color:var(--ok)}.regime.RANGE{background:rgba(49,130,206,.06);color:#3182ce}
.regime.SQUEEZE{background:var(--vi-dim);color:var(--violet)}.regime.VOLATILE{background:var(--dng-dim);color:var(--danger)}
.regime.UNKNOWN{background:var(--gold-dim);color:var(--muted)}

/* ═══ DOTS ═══ */
.dots{display:flex;gap:2px}.dot{width:6px;height:6px}.dot.w{background:var(--ok)}.dot.l{background:var(--danger)}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}

/* ═══ NOTIF ═══ */
.notif{position:fixed;top:50px;left:50%;transform:translateX(-50%);font-size:11px;padding:6px 18px;z-index:999;font-weight:700;border:1px solid;pointer-events:none;animation:nIn .3s,nOut .3s 2.7s forwards}
@keyframes nIn{from{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes nOut{to{opacity:0;transform:translate(-50%,-20px)}}
.notif.ok{background:var(--ok-dim);color:var(--ok);border-color:var(--ok-bdr)}
.notif.ng{background:var(--dng-dim);color:var(--danger);border-color:var(--dng-bdr)}
.notif.info{background:var(--vi-dim);color:var(--violet);border-color:var(--vi-bdr)}