:root{
  --bg:#0B0D10; --bg2:#0E1116; --panel:#14171C; --panel2:#191D24; --card:#1E232B;
  --line:#262B33; --line2:#333944; --text:#EDEFF2; --muted:#9AA1AC; --dim:#646B76;
  --up:#26C281; --up2:#4FE0A0; --down:#F0556B; --down2:#FF7A8C; --gold:#FACC15; --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ background:var(--bg); color:var(--text); font-family:'Segoe UI','Noto Sans KR',sans-serif; font-variant-numeric:tabular-nums; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{color:inherit;text-decoration:none;} .up{color:var(--up);} .down{color:var(--down);}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.nav{ position:sticky; top:0; z-index:50; background:rgba(11,13,16,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px;}
.brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#FACC15,#B8860B);}
.nav-links{display:flex; gap:22px; font-size:14px; color:var(--muted);} .nav-links a:hover{color:var(--text);}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.live{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.5px; color:#FF5468;}
.live .dot{width:8px;height:8px;border-radius:50%;background:#FF5468;box-shadow:0 0 8px #FF5468;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.nav-cd{display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line); padding:7px 13px; border-radius:9px;}
.nav-cd .l{font-size:11px;color:var(--muted);} .nav-cd .t{font-size:14px;font-weight:800;color:var(--gold);}
.hero{ background:radial-gradient(1200px 400px at 50% -120px, rgba(250,204,21,.07), transparent), linear-gradient(180deg, var(--bg2), var(--bg)); border-bottom:1px solid var(--line); padding:46px 0 34px; }
.hero h1{font-size:34px; font-weight:900; letter-spacing:-.5px;} .hero p{color:var(--muted); margin-top:8px; font-size:15px;}
.summary{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px;}
.sum-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
.sum-card .l{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.sum-card .v{font-size:26px; font-weight:800; margin-top:8px;} .sum-card.cd .v{color:var(--gold);}
section{padding:34px 0;}
.sec-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.sec-head h2{font-size:20px; font-weight:800;} .sec-head .hint{font-size:12px; color:var(--dim);}
.featured{display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:stretch;}
.feat-main{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px;}
.feat-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px;}
.feat-name{display:flex; align-items:center; gap:13px;}
.feat-icon{width:50px;height:50px;border-radius:13px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px;}
.feat-name .nm{font-size:22px;font-weight:800;} .feat-name .cd{font-size:12px;color:var(--dim);letter-spacing:.5px;margin-top:2px;}
.feat-badge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:7px;margin-left:8px;vertical-align:middle;}
.feat-badge.ok{background:rgba(38,194,129,.12);border:1px solid rgba(38,194,129,.3);color:var(--up);}
.feat-badge.warn{background:rgba(240,85,107,.12);border:1px solid rgba(240,85,107,.3);color:var(--down);}
.feat-price{text-align:right;} .feat-price .p{font-size:34px;font-weight:900;line-height:1;} .feat-price .p small{font-size:14px;color:var(--dim);font-weight:600;}
.feat-price .c{font-size:14px;font-weight:800;margin-top:6px;}
.feat-price .p.flash-up{animation:fu .7s;} .feat-price .p.flash-down{animation:fd .7s;}
@keyframes fu{0%{color:var(--up2)}100%{}} @keyframes fd{0%{color:var(--down2)}100%{}}
.chart-area{position:relative; width:100%; height:240px; margin-top:14px; cursor:crosshair;}
#chart{width:100%;height:100%;display:block;}
.cross-v{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.3);pointer-events:none;display:none;}
.cross-dot{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none;display:none;box-shadow:0 0 8px rgba(0,0,0,.7);z-index:4;}
.tip{position:absolute;pointer-events:none;display:none;z-index:5;white-space:nowrap;background:#06080A;border:1px solid var(--line2);border-radius:9px;padding:9px 11px;font-size:12px;box-shadow:0 10px 28px rgba(0,0,0,.6);transform:translate(-50%,calc(-100% - 14px));}
.tip.below{transform:translate(-50%,18px);}
.tip .c0{color:var(--muted);margin-bottom:5px;font-weight:700;}
.tip .r{display:flex;justify-content:space-between;gap:18px;line-height:1.8;} .tip .r span{color:var(--dim);} .tip .r b{font-weight:700;}
.chart-legend{display:flex;gap:16px;margin-top:12px;font-size:11px;color:var(--muted);}
.chart-legend i{display:inline-block;width:11px;height:2px;border-radius:2px;margin-right:6px;vertical-align:middle;}
/* 차트를 클릭해서 열지 않는다 — 크로스헤어로 훑는 중에 눌리면 모달이 튀어나온다. */
.f-open{margin-left:auto; font:inherit; font-size:11px; font-weight:700; color:var(--muted); cursor:pointer;
        background:var(--panel2); border:1px solid var(--line); border-radius:7px; padding:5px 11px;}
.f-open:hover{color:var(--text); border-color:var(--line2);}
.lg-fund{border-top:2px dashed var(--gold);height:0;}
.feat-side{display:flex; flex-direction:column; gap:10px;}
.fs-stat{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:14px 16px; flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px;}
.fs-stat .l{font-size:11px;color:var(--dim);} .fs-stat .v{font-size:16px;font-weight:800;}
.movers{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.mv-col h3{font-size:13px; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:7px;}
.mv-card{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 15px; margin-bottom:9px; cursor:pointer; transition:.13s;}
.mv-card:hover{border-color:var(--line2); transform:translateY(-1px);}
.mv-ico{width:34px;height:34px;border-radius:9px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.mv-info{flex:1;min-width:0;} .mv-nm{font-size:13px;font-weight:700;} .mv-cd{font-size:10px;color:var(--dim);}
.mv-pr{font-size:14px;font-weight:800;text-align:right;} .mv-ch{font-size:12px;font-weight:800;text-align:right;}
.market-wrap{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
table{width:100%; border-collapse:collapse;}
thead th{font-size:11px; color:var(--dim); font-weight:600; text-align:right; padding:13px 18px; border-bottom:1px solid var(--line);}
thead th:first-child{text-align:left;}
tbody tr{border-bottom:1px solid #1A1E25; cursor:pointer; transition:.1s;} tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--panel2);} tbody tr.active{background:#1B2027;}
td{padding:13px 18px; font-size:13px; text-align:right;} td.coin{text-align:left;}
.tcoin{display:flex; align-items:center; gap:11px;}
.tcoin .ic{width:30px;height:30px;border-radius:8px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.tcoin .nm{font-size:13px;font-weight:700;} .tcoin .cd{font-size:10px;color:var(--dim);}
.tprice{font-weight:700;} .tprice.flash-up{animation:fu .7s;} .tprice.flash-down{animation:fd .7s;}
.tchg{font-weight:800;}
.tspark{width:90px;height:30px;display:inline-block;vertical-align:middle;} .tspark svg{width:100%;height:100%;} .tspark polyline{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.tstatus{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;}
.tstatus.ok{color:var(--muted); background:var(--card);} .tstatus.warn{color:var(--down); background:rgba(240,85,107,.12); border:1px solid rgba(240,85,107,.28);}
.feed-list{display:flex; flex-direction:column; gap:9px;}
.fd{display:flex; align-items:center; gap:13px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 16px; animation:slideIn .4s;}
@keyframes slideIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
.fd-emoji{font-size:18px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--card); border-radius:9px; flex-shrink:0;}
.fd-text{flex:1; font-size:13px;} .fd-text b{font-weight:800;} .fd-time{font-size:11px; color:var(--dim);}
/* ── 코인 상세 모달 ──────────────────────────────────────────────
   전체 코인 표에서 고른 코인을 그 자리에서 크게 본다. 예전에는 표를 눌러
   대표 코인 영역을 갈아끼웠는데, 그 영역이 페이지 맨 위에 있어 눌러 놓고
   다시 위로 스크롤해야 했다. 게다가 대표 코인은 7초마다 자동으로 넘어가는
   쇼케이스라, 보고 있던 코인을 도로 뺏겼다. 둘을 분리한다. */
.modal{position:fixed; inset:0; z-index:100; display:none;}
.modal.open{display:block;}
.mo-back{position:absolute; inset:0; background:rgba(6,8,10,.72); backdrop-filter:blur(3px); animation:moFade .16s;}
@keyframes moFade{from{opacity:0}to{opacity:1}}
.mo-box{position:relative; max-width:1000px; margin:38px auto; max-height:calc(100vh - 76px); overflow-y:auto;
        background:var(--panel); border:1px solid var(--line2); border-radius:18px;
        box-shadow:0 26px 80px rgba(0,0,0,.72); animation:moUp .18s;}
@keyframes moUp{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.mo-head{display:flex; align-items:flex-start; gap:14px; padding:22px 24px 16px; border-bottom:1px solid var(--line);}
.mo-ico{width:52px;height:52px;border-radius:13px;background:var(--card);border:1px solid var(--line);
        display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0;}
.mo-nm{font-size:22px;font-weight:800;} .mo-cd{font-size:12px;color:var(--dim);letter-spacing:.5px;margin-top:2px;}
.mo-rank{font-size:11px;color:var(--muted);margin-top:7px;}
.mo-price{margin-left:auto; text-align:right;}
.mo-price .p{font-size:32px;font-weight:900;line-height:1;} .mo-price .p small{font-size:13px;color:var(--dim);font-weight:600;}
.mo-price .c{font-size:14px;font-weight:800;margin-top:6px;}
.mo-x{width:34px;height:34px;border-radius:9px;background:var(--card);border:1px solid var(--line);
      color:var(--muted); font-size:17px; cursor:pointer; flex-shrink:0; margin-left:6px;}
.mo-x:hover{color:var(--text); border-color:var(--line2);}
.mo-body{padding:20px 24px 24px;}
.mo-tf{display:flex; gap:6px; margin-bottom:12px;}
.mo-tf button{font:inherit; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer;
              background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:6px 13px;}
.mo-tf button:hover{border-color:var(--line2); color:var(--text);}
.mo-tf button.on{background:var(--card); border-color:var(--line2); color:var(--text);}
.mo-chart{position:relative; width:100%; height:320px; cursor:crosshair;}
#mo-chart{width:100%;height:100%;display:block;}
.mo-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px;}
.mo-stat{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:13px 15px;}
.mo-stat .l{font-size:11px;color:var(--dim);} .mo-stat .v{font-size:16px;font-weight:800;margin-top:5px;}
.mo-note{margin-top:14px; font-size:11.5px; color:var(--dim); line-height:1.7;}
@media (max-width:880px){
  .mo-box{margin:0; max-height:100vh; border-radius:0; border:none;}
  .mo-stats{grid-template-columns:1fr 1fr;} .mo-chart{height:240px;}
  .mo-head{flex-wrap:wrap;} .mo-price{margin-left:0; text-align:left; width:100%;}
}
footer{border-top:1px solid var(--line); padding:26px 0; margin-top:18px; color:var(--dim); font-size:12px; text-align:center;}
@media (max-width:880px){
  .summary{grid-template-columns:1fr 1fr;} .featured{grid-template-columns:1fr;} .feat-side{flex-direction:row; flex-wrap:wrap;} .fs-stat{flex:1 1 45%;}
  .movers{grid-template-columns:1fr;} .nav-links{display:none;} .col-vol, .col-spark{display:none;}
}
@media (max-width:520px){ .summary{grid-template-columns:1fr 1fr;} .hero h1{font-size:26px;} .col-status{display:none;} }

/* ── 실서비스 추가분 ───────────────────────────────────────────── */

/* 코인 아이콘. 매핑에 이미지가 있으면 <img>, 없으면 색 원형(.ico-fb). */
.ico-img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;}
.ico-fb{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;
        justify-content:center;font-size:.42em;font-weight:800;color:#0B0D10;}

/* 연결 상태. 데이터가 낡으면 LIVE 를 끄고 이걸 띄운다 —
   멈춘 화면을 살아 있는 것처럼 보여주지 않는다. */
.stale{display:none;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--gold);}
.stale.on{display:flex;} .live.off{display:none;}

/* 첫 로딩 · 오류 */
.boot{padding:80px 0;text-align:center;color:var(--muted);}
.boot h2{font-size:17px;font-weight:800;color:var(--text);margin-bottom:8px;}
.boot p{font-size:13px;color:var(--dim);}
.boot code{background:var(--card);border:1px solid var(--line);border-radius:5px;
           padding:2px 7px;font-size:12px;color:var(--muted);}
.hidden{display:none !important;}

/* 체결 목록 (이름 없음) */
.tape{display:flex;flex-direction:column;gap:1px;background:var(--line);
      border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.tape-row{display:flex;align-items:center;gap:12px;background:var(--panel);padding:10px 15px;font-size:13px;}
.tape-row .side{font-weight:800;width:34px;}
.tape-row .nm{flex:1;min-width:0;font-weight:700;}
.tape-row .qty{color:var(--muted);}
.tape-row .pr{font-weight:700;width:88px;text-align:right;}
.tape-row .tm{color:var(--dim);font-size:11px;width:64px;text-align:right;}
.tape-empty{background:var(--panel);padding:22px;text-align:center;color:var(--dim);font-size:13px;}

/* 마크 서버 이름. 브랜드 옆 칩. 비어 있으면 .hidden 으로 감춘다. */
.srv{font-size:11px;font-weight:700;color:var(--gold);background:rgba(250,204,21,.1);
     border:1px solid rgba(250,204,21,.28);border-radius:6px;padding:3px 8px;margin-left:2px;}