/* ══════════════════════════════════════════════════════════════
   아비트리지 보드 — 위계 테마
   1. 글자는 3단계뿐: L 굵게(코인명·수익금) / M 보통(가격·프리미엄) / S 회색 칩(망·시간·수익률·통화)
   2. 색은 뜻이 있을 때만: 빨강=수익, 파랑=손실, 노랑=선택(탭·선택 행), 주황=경고 칩. 나머지는 흰·회색
   3. 거래소 칸만 브랜드색을 옅게 깐다 — 칸 구분은 색으로, 선은 쓰지 않는다
   4. 보조정보는 칩(작은 회색 상자)에 가둔다 → 본문 숫자와 섞이지 않는다
   5. 셀 하나 = 패턴 하나. 거래소 칸은 언제나 [로고][통화 칩][가격]
   6. 좁은 화면은 아비싱크처럼 작은 글자로 한 줄로 흐르고, 칸이 모자랄 때만 다음 줄로 넘어간다
   7. 행 높이 고정, 셀 사이는 2px 틈으로만 나눈다
   8. 선택 행은 노란 점선. 행 배경은 칠하지 않는다
   9. 상세는 목록 위에 따로 띄운다(휴대폰은 바텀시트, PC 는 가운데 팝업). 주요 항목이 먼저, 그 아래 호가
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#0e0f11; --cell:#18191c; --cell2:#202226; --chip:#2a2c31; --line:#26282c; --line2:#34373c;
  --fg:#f1f2f4; --fg2:#d0d3d8; --mut:#9ba0a8; --dim:#80868f;
  --up:#ff5c5c; --down:#5aa2ff; --acc:#ffd43b; --warn:#ffad42; --ok:#38d39f;
  --gap:2px; --row-h:46px; --pad:16px;
  --padx:max(var(--pad), calc((100% - 1100px) / 2));   /* 넓은 화면에선 가운데 1100px 로 모은다 */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:14px/1.35 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  -webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
body{padding-bottom:var(--detail-h,52px)}
button,input,select{font:inherit;color:inherit}
.muted{color:var(--mut)}
.icon-btn{background:none;border:0;color:var(--mut);font-size:17px;line-height:1;cursor:pointer;padding:8px 10px}
.icon-btn:hover{color:var(--fg)}

/* ── 칩 (S 단계) ───────────────────────────────── */
.chip,.warnchip,.blockchip{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:4px;
  background:var(--chip);color:var(--mut);font-size:11px;font-weight:500;line-height:1;white-space:nowrap;flex:none}
.warnchip{color:var(--warn);background:rgba(255,173,66,.13);cursor:pointer}
.blockchip{color:var(--up);background:rgba(255,92,92,.13);cursor:pointer}
.cur{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:4px;border-radius:4px;flex:none;
  background:var(--chip);color:var(--fg2);font-size:10.5px;font-weight:600;line-height:1;vertical-align:-2px}

/* ── 상단 지표바 ───────────────────────────────── */
.tickerbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:9px var(--padx);background:var(--bg);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.tickerbar::-webkit-scrollbar{display:none}
.tk{display:flex;align-items:baseline;gap:5px}
.tk+.tk{padding-left:10px;border-left:1px solid var(--line2)}
.tk-k{color:var(--fg);font-size:12px;font-weight:700}
.tk-v,.tk-v.pos,.tk-v.neg,.tk-v.zero{color:var(--fg);font-size:13px;font-weight:400}
.tk-act{margin-left:auto;position:sticky;right:0;background:var(--bg);display:flex;align-items:center;padding-left:6px}
.tk-act .icon-btn{padding:6px 7px}
/* 톱니 밑으로 값이 지나갈 때 뚝 잘리지 않고 흐려지게 — 옆으로 밀면 더 있다는 표시 */
.tk-act::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:18px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--bg))}

/* ── 방향 탭 ──────────────────────────────────── */
.tabs{display:flex;gap:28px;padding:0 var(--padx);background:var(--bg);border-bottom:1px solid var(--line)}
.tab{flex:none;background:none;border:0;padding:12px 2px 9px;font-size:16px;font-weight:700;color:var(--dim);
  cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--fg);border-bottom-color:var(--acc)}
.tab .arrow{font-size:14px}

/* ── 검색 / 투입금액 ──────────────────────────── */
.topbar{display:flex;align-items:center;gap:8px;padding:10px var(--padx) 2px}
.search{flex:1;min-width:120px;height:36px;background:var(--cell);border:1px solid transparent;border-radius:8px;
  padding:0 12px;color:var(--fg)}
.search::placeholder{color:var(--dim)}
.search:focus{outline:0;border-color:var(--acc)}
/* 키보드로 움직일 때 지금 어디에 있는지 보이게 (마우스 클릭엔 안 보인다) */
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.board tbody tr:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.board th.sortable:focus-visible{outline-offset:-2px}
.amount{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);white-space:nowrap}
.amount select{height:36px;background:var(--cell);border:1px solid transparent;border-radius:8px;
  padding:0 8px;color:var(--fg);font-weight:600}

.notice{margin:10px var(--padx) 0;padding:9px 12px;border-radius:8px;background:var(--cell);
  border-left:3px solid var(--warn);color:var(--fg);font-size:12.5px;line-height:1.5}
/* 거래소 시세·환율을 못 받는 중이면 늘 보이는 경고 (칩 설명용 notice 와 따로) */
.notice.health{border-left-color:var(--up);color:var(--warn)}
.notice.health b{color:var(--fg)}
/* 내가 바꾼 설정(수수료 등)이 계산에 쓰이는 중 */
.notice.info{border-left-color:var(--line2);color:var(--mut);font-size:12px}
.notice.info b{color:var(--fg)}
.notice.info button{background:none;border:0;padding:0;margin-left:6px;color:var(--fg2);text-decoration:underline;cursor:pointer;font-size:12px}
/* 갱신에 실패해 화면에 남아 있는 옛 내용 */
.stale{opacity:.5}
.tickerbar.stale .tk-v{color:var(--dim)}

/* ── 섹션 머리 ─────────────────────────────────── */
.board-sec{padding:0 var(--padx);margin-bottom:18px}
.sec-head{display:flex;align-items:center;gap:6px;padding:16px 2px 8px;flex-wrap:wrap}
.sec-flag{display:none}
.sec-title{font-size:16px;font-weight:700;margin-right:2px}
.sec-title em{font-style:normal}
.sec-sub,.sec-win,.sec-usdt{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;
  background:var(--chip);color:var(--mut);font-size:11.5px;font-weight:500;white-space:nowrap}
.sec-win.on{color:var(--up)}
.sec-usdt[hidden]{display:none}
/* 테더를 그대로 옮길 때의 프리미엄 — 이보다 높은 코인이라야 테더보다 낫다. 누르면 계산 근거(.sec-hint)를 펼친다 */
.sec-usdt{border:0;cursor:pointer;line-height:1}
.sec-usdt[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--line2)}
.sec-hint{margin:0 2px 8px;padding:8px 10px;border-radius:8px;background:var(--cell);color:var(--mut);font-size:12px;line-height:1.5}
.sec-usdt b{margin-left:4px;font-weight:600;color:var(--fg)}
.sec-usdt b.pos{color:var(--up)}
.sec-usdt b.neg{color:var(--down)}
/* 아주 좁은 휴대폰(320px)은 우회 머리의 '거래소 → 거래소 → 거래소' 설명을 빼야 톱니가 혼자 셋째 줄로 내려가지 않는다 */
@media (max-width:340px){ .board-sec[data-mode="relay"] .sec-sub{display:none} }
.sec-time{font-size:11.5px;color:var(--dim)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.dot.stale,.dot.warn{background:var(--warn)}
.dot.err{background:var(--up)}
.sec-gear{margin-left:auto;background:none;border:0;color:var(--mut);font-size:16px;line-height:1;cursor:pointer;padding:6px}
.sec-gear:hover{color:var(--fg)}

/* 거래소 페어 머리 */
.pair-head .pair-pick{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 8px;
  border-radius:6px;background:var(--cell)}
.pb-arrow{color:var(--mut)}
.pb-list{display:inline-flex;gap:6px;flex-wrap:wrap}
.pair-prem{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;
  background:var(--chip);color:var(--mut);font-size:11.5px;white-space:nowrap}
.pair-prem b{margin-left:4px;font-weight:600}
.pair-prem b.pos{color:var(--up)}
.pair-prem b.neg{color:var(--down)}
.pair-prem b.zero{color:var(--fg)}

/* ── 기회 표 ──────────────────────────────────── */
.table-wrap{margin:0 calc(-1 * var(--gap))}
table.board{width:100%;border-collapse:separate;border-spacing:var(--gap);table-layout:fixed}
.board th{height:36px;padding:0 8px;background:var(--cell2);color:var(--mut);font-size:12px;font-weight:500;
  line-height:1.2;text-align:center;white-space:nowrap}
.board th.c-net{text-align:left}
.board th br{display:none}
.board th.sortable{cursor:pointer}
.board th.sortable.active{color:var(--fg)}
.board th.sortable.active::after{content:"";display:inline-block;margin-left:4px;vertical-align:1px;
  border:4px solid transparent;border-bottom:0;border-top-color:currentColor}
.board td{height:var(--row-h);padding:0 8px;background:var(--cell);vertical-align:middle;white-space:nowrap;overflow:hidden}
.board tbody tr{cursor:pointer}
@media (hover:hover){.board tbody tr:hover td{box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.035)}}
.board tbody tr.sel{outline:1.5px dashed var(--acc);outline-offset:0}
.empty{color:var(--dim);padding:28px 8px!important;text-align:center!important;height:auto!important;
  white-space:normal!important;line-height:1.7}

/* 칸 너비 */
.c-net{width:20%}
.c-ex{width:22.5%}
.c-eta{width:7%}
.c-prem{width:10%}
.c-profit{width:18%}

/* 코인 칸: [코인명 L] [망 칩] [경고 칩…] */
.cell-net{display:flex;align-items:center;gap:4px;min-width:0}
.coin{font-size:15px;font-weight:700;color:var(--fg);margin-right:2px;overflow:hidden;text-overflow:ellipsis}
.chip.net.unk{color:var(--mut);background:none;box-shadow:inset 0 0 0 1px var(--line2)}   /* 망 모름: 속 빈 칩 (흐린 글씨는 대비 부족) */
.net-eta{display:none;margin-left:4px}
.net-eta.slow{color:var(--warn)}

/* 거래소 칸: 브랜드색 옅게 + [로고][이름 S][통화 칩][가격 M] */
td.exc{background-image:linear-gradient(var(--tint,transparent),var(--tint,transparent))}
td.exc[data-ex="upbit"]{--tint:rgba(24,82,196,.22)}
td.exc[data-ex="bithumb"]{--tint:rgba(243,115,33,.13)}
td.exc[data-ex="coinone"]{--tint:rgba(0,98,223,.16)}
td.exc[data-ex="binance"]{--tint:rgba(240,185,11,.11)}
td.exc[data-ex="bybit"]{--tint:rgba(247,166,0,.10)}
td.exc[data-ex="bitget"]{--tint:rgba(0,199,217,.12)}
td.exc[data-ex="gateio"]{--tint:rgba(35,84,230,.15)}
td.exc[data-ex="kraken"]{--tint:rgba(113,50,245,.16)}
td.exc[data-ex="coinbase"]{--tint:rgba(0,82,255,.15)}
td.exc[data-ex="htx"]{--tint:rgba(0,140,214,.14)}
td.exc[data-ex="bingx"]{--tint:rgba(41,84,254,.16)}
td.exc[data-ex="okx"]{--tint:rgba(0,0,0,.30)}
.cell-ex{display:flex;align-items:center;gap:6px;min-width:0}
.exlogo{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;background:#fff}
.exname{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;min-width:0}
.cell-ex .cur{margin:0 0 0 auto}
.px{font-size:14px;color:var(--fg);flex:none}

/* 전송시간 (넓은 화면만): 느릴 때만 주황 */
.board td.c-eta{text-align:center}
.eta{font-size:13px;color:var(--fg2)}
.eta.slow{color:var(--warn)}
.eta.unk{color:var(--dim)}

/* 프리미엄: 색 없이 흰색. 수익과 경쟁하지 않게 */
.board td.pct{text-align:right;font-size:14px;color:var(--fg)}
.board td.pct.neg{color:var(--mut)}

/* 예상 수익: [수익률 칩 S] [금액 — 빨강, 3% 이상만 굵게 L] */
.cell-profit{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.chip.rate{color:var(--mut)}
.krw{font-size:14px;font-weight:500}
.krw.pos{color:var(--up)}
.krw.neg{color:var(--down)}
.krw.zero{color:var(--mut)}
.board tbody tr.t3 .krw{font-size:15px;font-weight:700}

/* ── 우회 경로 탭 (거래소 → 거래소 → 거래소) ─── */
.relay-bar{display:flex;flex-direction:column;gap:7px;padding:0 2px 10px}
.relay-scope{display:flex;gap:6px;flex-wrap:wrap}
.relay-scope button{height:30px;padding:0 13px;border:0;border-radius:15px;background:var(--cell);
  color:var(--mut);font-size:13px;font-weight:600;cursor:pointer}
.relay-scope button.active{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--acc)}
.board.relay .c-net{width:15%}
.board.relay .c-ex{width:19%}
.board.relay .c-mid{width:18%}
.board.relay .c-eta{width:7%}
.board.relay .c-prem{width:9%}
.board.relay .c-profit{width:13%}
.relay-eta{display:none}                 /* 넓은 화면은 전송시간 칸이 따로 있다 */
.relay-eta .net-eta{margin-left:0}
.cell-mid .chip.hop{margin-left:auto}
.chip.hop{color:var(--fg2)}
.chip.hop i{font-style:normal;color:var(--dim);margin:0 2px}
.hopnet{font-style:normal;font-size:11px;font-weight:500;color:var(--fg2);background:var(--chip);border-radius:4px;padding:1px 5px}
.detail-route{flex-wrap:wrap}

/* ── 상세 (바텀시트) ──────────────────────────── */
.detail{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--bg);
  border-top:1px solid var(--line2);max-height:60vh;display:flex;flex-direction:column}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;flex:none;
  background:var(--bg);border:0;padding:8px var(--padx);cursor:pointer;color:var(--fg)}
.dh-left{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:18px;
  background:var(--cell2);color:var(--mut);font-size:14px;font-weight:600;min-width:0;overflow:hidden;white-space:nowrap}
.dh-left .coin{font-size:15px;color:var(--fg)}
.dh-left .exbadge{min-width:0;gap:5px}
.dh-left .exbadge b{font-size:12px;font-weight:500;color:var(--mut)}
.dh-left>span:not(.coin):not(.exbadge){color:var(--mut)}
.dh-right{flex:none;display:flex;align-items:center;gap:4px;color:var(--mut);font-size:13px}
.chev{display:inline-block;transition:transform .15s}
.detail[data-open="1"] .chev{transform:rotate(180deg)}
.detail-body{display:none;flex-direction:column;gap:12px;overflow-y:auto;min-height:0;padding:4px var(--padx) 16px}
.detail[data-open="1"] .detail-body{display:flex}
/* 시트 높이가 모자라도 칸이 눌려 사라지지 않게 (overflow:hidden 인 비교표가 0px 로 접히던 문제). 넘치면 시트가 스크롤된다 */
.detail-body>*{flex-shrink:0}
/* 아비싱크처럼 주요 항목(마켓 페어·네트워크·입출금·컨펌·전송시간·수수료)이 먼저, 그 아래 호가 */
.detail-route,.detail-check{order:1}
.cards{order:2}
.books{order:3}

.detail-route{display:flex;align-items:center;gap:7px;padding-top:4px;font-size:14px;font-weight:600}
.route-tag{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:4px;
  background:var(--chip);color:var(--mut);font-size:11px;font-weight:500}
.route-arrow{color:var(--mut)}
.route-net{margin-left:auto;font-size:16px;font-weight:700}
.route-net.pos{color:var(--up)}
.route-net.neg{color:var(--down)}
.route-net.zero{color:var(--mut)}

/* 출금쪽 | 항목 | 입금쪽 비교표 */
/* overflow:clip — hidden 이면 팝업 그리드에서 자동 최소 높이가 0 이 돼 아래 칸에 깔렸다 */
.cards{display:grid;grid-template-columns:1fr auto 1fr;border-radius:8px;overflow:clip;background:var(--cell);font-size:13px;
  word-break:keep-all;overflow-wrap:anywhere}
.cards .r{display:contents}
.cards .l,.cards .k,.cards .v{padding:8px 10px;border-bottom:1px solid var(--line);line-height:1.45}
.cards .l{text-align:right}
.cards .v{text-align:left}
.cards .k{text-align:center;color:var(--mut);font-size:11.5px;white-space:nowrap;background:var(--cell2)}
.cards .r:last-child>div{border-bottom:0}
/* 우회 경로: 항목 | 출금 | 경유 | 입금 */
.cards.relay{grid-template-columns:auto repeat(3,minmax(0,1fr))}
.cards.relay .k{text-align:left}
.cards.relay .r.head>div{background:var(--cell2);color:var(--mut);font-size:11.5px;font-weight:600}
.yes{color:var(--fg)}
.no{color:var(--up)}
.unk{color:var(--dim)}
.src{font-size:10px;color:var(--dim);margin-left:4px}
.age{font-size:10.5px;color:var(--dim);margin-left:4px;white-space:nowrap}
.age.old{color:var(--warn)}
.rawnet{font-size:10.5px;color:var(--dim);margin-left:3px}
/* 상세를 열 때 입출금 상태를 거래소에 다시 물어본 결과 */
.detail-check{border-radius:8px;padding:7px 11px;font-size:12.5px;line-height:1.5;background:var(--cell);color:var(--mut)}
.detail-check.ok b{color:var(--fg)}
.detail-check.warn{background:rgba(255,173,66,.12);color:var(--warn)}
.detail-check.warn b{color:var(--warn)}

/* 상세: 거래소 거래 화면 링크 · 코인 이름 */
.trade-link{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.trade-link:hover{text-decoration-color:var(--fg)}
.cname{display:block;margin-top:1px;font-size:.84em;color:var(--mut);font-weight:400;white-space:normal}
.cflag{display:block;margin-top:1px;font-size:.84em;color:var(--warn);font-weight:500;white-space:normal}
.cflag.bad{color:var(--up)}
/* 예상 수익 칸: 투입금 전부가 아니면 'N만까지', 어떤 금액도 손해면 '손해'(회색), 옮길 만큼 안 남으면 흐리게 */
.cell-profit .amt{flex-basis:100%;text-align:right;font-size:11px;color:var(--warn);line-height:1.2}
.chip.rate.lossc{color:var(--dim)}
/* 프리미엄 아래 유지 시간(테더보다 0.3%p 넘게 나은 상태가 이어진 시간) */
.c-prem .held{display:block;font-size:10.5px;line-height:1.25;color:var(--dim);font-weight:400}
@media (max-width:620px){ .c-prem .held{font-size:9.5px} }
.c-profit.loss .krw,.c-profit.meh .krw{color:var(--dim)}
/* 화면 아래 짧은 안내(칩·? 설명, 즐겨찾기) — 스크롤한 상태에서도 보이게 */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--detail-h,52px) + 14px);z-index:40;
  width:min(560px,calc(100% - 24px));padding:10px 14px;border-radius:10px;background:#2b2e34;color:var(--fg);
  font-size:13px;line-height:1.5;box-shadow:0 6px 24px rgba(0,0,0,.45);cursor:pointer}
/* 즐겨찾기: 맨 위 섹션 · 다른 섹션 줄의 ★ · 상세의 ☆/★ · 경로 없는 즐겨찾기 줄 */
.fav-star{font-style:normal;color:var(--acc)}
.fav-mark{font-style:normal;font-weight:400;color:var(--acc);margin-right:2px;font-size:.85em}
.fav-btn{flex:none;width:32px;height:32px;margin-left:2px;border:1px solid var(--line2);border-radius:8px;background:var(--cell);
  color:var(--mut);font-size:17px;line-height:1;cursor:pointer;padding:0}
.fav-btn.on{color:var(--acc);border-color:rgba(255,212,59,.45)}
.fav-btn:hover{color:var(--acc)}
.board tbody tr.fav-miss{cursor:default}
.board tr.fav-miss td{height:auto;padding:9px 8px;white-space:normal;line-height:1.5;color:var(--mut);font-size:12.5px}
.fav-miss .coin{font-size:14px;margin-right:6px}
.fav-x{margin-left:8px;height:24px;padding:0 9px;border:1px solid var(--line2);border-radius:6px;background:none;
  color:var(--mut);font-size:12px;cursor:pointer}
.fav-x:hover{color:var(--fg)}
/* 표 아래 '20개 더 보기' */
.board tbody tr.more-row{cursor:default}
.board tr.more-row td{padding:10px 8px!important;text-align:center!important;height:auto!important;background:none!important}
.more-btn{min-width:160px;height:34px;padding:0 16px;border:1px solid var(--line2);border-radius:8px;background:var(--cell);
  color:var(--fg2);font-size:13px;cursor:pointer}
.more-btn:hover{color:var(--fg)}
.more-btn:disabled{opacity:.6;cursor:default}

/* 호가 사다리: 체결되는 구간의 금액만 빨강. 100% 에 닿는 줄은 굵게, 그 아래는 회색 */
.books{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.book{border-radius:8px;overflow:hidden;background:var(--cell);min-width:0}
.book-title{padding:8px 10px;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-title b{color:var(--fg);font-weight:600;margin-right:4px}
.book table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px}
.book th{padding:7px 8px;background:var(--cell2);color:var(--mut);font-size:11.5px;font-weight:500;text-align:right;white-space:nowrap}
.book th:first-child{text-align:left;width:34%}
.book th:nth-child(2){width:22%}
.book th:nth-child(3){width:20%}
.book th .sub{font-size:10px;margin-left:2px}
.book td{padding:6px 8px;border-top:1px solid var(--line);color:var(--fg);text-align:right;white-space:nowrap;overflow:hidden}
.book td:first-child{text-align:left}
.book td:first-child .bp{white-space:nowrap}
/* 칸을 넘는 숫자는 fitBooks() 가 실제로 재서 글자를 한두 단계 줄이고(f1·f2), 그래도 넘치면 그때만 줄을 바꾼다(fw) */
.book td.f1{font-size:.88em;letter-spacing:-.2px}
.book td.f2{font-size:.78em;letter-spacing:-.3px}
.book td.fw{white-space:normal}
.book .impact,.book .ratio{display:inline-block}
.book td:nth-child(4){white-space:normal}                      /* 누적 비중도 자리가 없으면 다음 줄로 */
.book .impact,.book .ratio{margin-left:4px;font-size:.84em;color:var(--mut)}   /* 칸 글자와 같이 줄어든다 */
/* 투입금으로 실제 체결되는 호가만 원화합산·누적을 빨강으로 (아비싱크와 같다). 그 밖의 호가는 흰색 그대로.
   투입금이 끝나는 줄 아래에만 얇은 빨간 선을 그어 경계를 보여준다 */
.book tr.fill td:nth-child(3),.book tr.hit td:nth-child(3),
.book tr.fill td:nth-child(4),.book tr.hit td:nth-child(4){color:var(--up)}
.book tr.hit td{box-shadow:inset 0 -1px 0 var(--up)}

/* ── 설정 서랍 ────────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:flex;justify-content:flex-end}
.drawer-inner{width:min(440px,92vw);height:100%;overflow-y:auto;background:var(--bg);
  border-left:1px solid var(--line2);padding:16px}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:16px;
  position:sticky;top:0;z-index:2;background:var(--bg);padding:6px 0}      /* 내려도 ✕ 가 보이게 */
.fld{display:block;margin-bottom:16px}
.fld>span,.fld.two label>span,.fld.four label>span{display:block;font-size:12px;color:var(--mut);margin-bottom:6px;font-weight:500}
.fld input[type=number],.fld input[type=text]{width:100%;height:38px;background:var(--cell);border:1px solid transparent;
  border-radius:8px;padding:0 10px;color:var(--fg)}
.fld input:focus{outline:0;border-color:var(--acc)}
.fld select{width:100%;height:38px;background:var(--cell);border:1px solid transparent;border-radius:8px;padding:0 10px;color:var(--fg)}
.fld select:focus{outline:0;border-color:var(--acc)}
.fld.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fld.chk{display:flex;align-items:flex-start;gap:8px;font-size:13px}
.fld.chk em{color:var(--dim);font-style:normal;font-size:11.5px;display:block}
.sub-note{color:var(--dim);font-style:normal;font-weight:400}
.hint{margin:6px 0 0;font-size:11.5px;color:var(--dim);line-height:1.6}
.seg{display:flex;gap:2px;border-radius:8px;overflow:hidden}
.seg button{flex:1;background:var(--cell);border:0;padding:9px 6px;color:var(--mut);cursor:pointer;font-size:12.5px}
.seg button.active{background:var(--chip);color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--acc)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips label{display:flex;align-items:center;gap:5px;font-size:12.5px;background:var(--cell);border-radius:8px;
  padding:7px 10px;cursor:pointer}
.chips i{font-style:normal;font-weight:600}
.pairgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pairgrid>div{border-radius:8px;background:var(--cell);padding:10px;display:flex;flex-direction:column;gap:6px}
.pairgrid b{font-size:12px;color:var(--mut);margin-bottom:2px}
.pairgrid label{display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
.exbadge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.exbadge .exlogo{width:16px;height:16px}
.exbadge b{font-size:12.5px;font-weight:600;color:var(--fg)}
.ex-list{display:flex;flex-direction:column;gap:6px}
.ex-row{display:flex;align-items:center;gap:8px}
.ex-name{flex:1;display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
.ex-name em{color:var(--dim);font-style:normal;font-size:11px}
.ex-fee{width:84px;height:32px;background:var(--cell);border:1px solid transparent;border-radius:8px;
  padding:0 8px;color:var(--fg);text-align:right}
.status{font-size:11.5px;color:var(--mut);background:var(--cell);border-radius:8px;
  padding:9px 11px;margin-bottom:12px;white-space:pre-wrap;line-height:1.7}
.status .bad{color:var(--up)}
.warn{color:var(--warn)}
.legend{font-size:11.5px;color:var(--mut);line-height:1.75;background:var(--cell);border-radius:8px;padding:9px 11px;margin-bottom:12px}
.legend b{color:var(--fg);font-weight:600}
.disclaimer{font-size:11.5px;color:var(--dim);line-height:1.65}
.disclaimer code{background:var(--cell);padding:1px 4px;border-radius:4px}
button.help{border:0;padding:0;font:inherit;cursor:pointer;margin-left:2px}
button.help::before{content:"";position:absolute;inset:-8px}      /* 손가락으로 누르기 쉽게(보이는 크기는 그대로) */
.help{position:relative;display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--chip);
  color:var(--mut);font-size:9.5px;font-weight:700;cursor:help;vertical-align:1px}

/* 데이터 연동 현황 (상태색은 뜻이 있어 남긴다) */
.cov-wrap{border-radius:8px;overflow:hidden;background:var(--cell)}
.admin-link{display:block;margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--cell);
  color:var(--acc);font-size:12.5px;text-decoration:none}
.admin-link:hover{background:var(--cell2)}

/* 설정 > 계정 */
.acct-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acct-name{font-size:15px}
.acct-logout{margin-left:auto}
.acct-logout button,.acct-pw button{height:28px;padding:0 10px;border:0;border-radius:6px;background:var(--chip);
  color:var(--fg);font-size:12px;cursor:pointer}
.acct-pw{margin-top:8px;font-size:12.5px;color:var(--fg2)}
.acct-pw summary{cursor:pointer;color:var(--mut)}
.acct-pw form{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.acct-pw input{flex:1;min-width:130px;height:30px;padding:0 8px;border:1px solid var(--line2);border-radius:6px;
  background:var(--cell);color:var(--fg)}
.acct-pw .hint{flex-basis:100%;margin:0}
table.cov{width:100%;border-collapse:collapse;font-size:11.5px}
.cov th{color:var(--mut);font-weight:500;padding:7px 8px;text-align:left;background:var(--cell2)}
.cov td{padding:7px 8px;border-top:1px solid var(--line);vertical-align:middle}
.cov-ex{width:104px}
.cov em{font-style:normal;color:var(--dim);margin-left:5px;font-size:10.5px}
.cov-ok{color:var(--ok);font-weight:600}
.cov-warn{color:var(--warn);font-weight:600}
.cov-bad{color:var(--up);font-weight:600}

/* ── 맨 위로 ─────────────────────────────────── */
.to-top{position:fixed;right:16px;bottom:calc(var(--detail-h,52px) + 16px);z-index:26;
  width:44px;height:44px;border-radius:50%;border:0;background:var(--fg);color:#111;font-size:20px;font-weight:700;cursor:pointer}

/* ── PC·태블릿: 상세는 화면 가운데 팝업. ✕·바깥 클릭·Esc 로 닫는다 ── */
.detail-backdrop{display:none}
@media (min-width:621px){
  body{padding-bottom:24px}
  /* 상단 고정 지표바(z 30)까지 덮는다. 설정 서랍(z 60)보다는 아래 */
  .detail{z-index:41;inset:0;margin:auto;width:min(980px,calc(100vw - 48px));height:fit-content;max-height:min(88vh,920px);
    border:1px solid var(--line2);border-radius:14px;overflow:hidden}
  .detail[data-open="0"]{display:none}
  .detail-backdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6)}
  .detail[data-open="1"]+.detail-backdrop{display:block}
  /* 머리 전체가 아니라 ✕ 만 누를 수 있게 */
  .detail-head{pointer-events:none;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line)}
  .dh-right{pointer-events:auto;cursor:pointer;width:36px;height:36px;justify-content:center;border-radius:8px;font-size:0}
  .dh-right::after{content:"✕";font-size:17px;color:var(--mut)}
  .dh-right:hover{background:var(--cell2)}
  .dh-right:hover::after{color:var(--fg)}
  .detail-body{padding:14px 16px 18px;overscroll-behavior:contain}
  /* 팝업: 경로 → 비교표 → 그 아래 호가 2단을 넓게 */
  .detail[data-open="1"] .detail-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
    gap:12px;align-items:start}
  .books,.detail-route,.detail-check,.cards{grid-column:1/-1}
  /* 팝업이 좁으면(책 한 칸 380px 미만) 누적 칸을 빼고 가격·수량·원화합산에 자리를 준다 */
  .book th:first-child{width:36%}
  .book th:nth-child(2){width:22%}
  .book th:nth-child(3){width:22%}
  .to-top{z-index:23;bottom:20px}
}

/* ── PC·태블릿 표: 코인명이 먼저 사라지거나 숫자가 잘리지 않게 ── */
@media (min-width:621px){
  .coin{flex:none}                                  /* 코인명은 줄이지 않는다(예전엔 제일 먼저 0px 로 줄었다) */
  .cell-net{flex-wrap:wrap;row-gap:3px;padding:3px 0}   /* 칩이 많으면 다음 줄로 */
  .cell-profit{flex-wrap:wrap;row-gap:1px}          /* 좁으면 수익률·금액을 두 줄로 */
}
@media (min-width:621px) and (max-width:1000px){
  .exname{display:none}                             /* 거래소 이름은 로고·툴팁으로. 가격 자리를 먼저 준다 */
  .px{font-size:12.5px}
  .coin{font-size:14px}
  .krw{font-size:13px}
  .board td{padding:0 6px}
}
@media (min-width:621px) and (max-width:720px){
  .px{font-size:11.5px}                             /* 0.00000048 같은 BTC 마켓 가격이 들어가게 */
  .cell-ex{gap:4px}
}

@media (min-width:621px) and (max-width:900px){
  /* 누적 칸은 비중(%)만 짧게 — 투입금이 몇 번째 호가에서 다 차는지 */
  .book th:first-child{width:38%}
  .book th:nth-child(2){width:22%}
  .book th:nth-child(3){width:25%}
  .book th:nth-child(4){width:15%}
  .book td:nth-child(4) .cum{display:none}
  .book td:nth-child(4) .ratio{margin-left:0;font-size:inherit;color:inherit}
  .book td{padding:6px 6px}
}

/* ── 모바일: 칸 5개, 2줄 셀 ──────────────────── */
@media (max-width:620px){
  :root{--pad:12px;--row-h:38px}
  .tickerbar{gap:12px;padding:9px 10px}
  .tk+.tk{padding-left:0;border-left:0}   /* 390px 에 네 개가 다 들어가게 구분선은 뺀다 */
  .tk-k{font-size:11.5px}
  .tk-v,.tk-v.pos,.tk-v.neg,.tk-v.zero{font-size:12px}
  .tk-act .icon-btn{padding:6px 5px}
  .tk-btc{display:none}                    /* 휴대폰: USD·USDT·김프와 ↻·⚙ 가 한 줄에 다 보이게(BTC 원화 가격은 김프에 들어 있다) */
  /* 목록 글자 크기는 아비싱크 화면(같은 휴대폰 실측)에 맞춘다: 칩 9 · 코인 10.5 · 가격 9 · 프리미엄 10 · 수익 10.5 */
  .chip,.warnchip,.blockchip{height:13px;padding:0 3px;border-radius:3px;font-size:9px}
  .cur{width:12px;height:13px;border-radius:3px;font-size:9px}
  .exlogo{width:16px;height:16px}
  .tabs{gap:18px;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{font-size:15px;padding:11px 2px 8px;white-space:nowrap}
  .topbar{padding:8px 12px 0}
  .search,.amount select{height:32px;font-size:13px}

  .board-sec{padding:0 4px;margin-bottom:12px}
  .sec-head{padding:12px 6px 6px}
  .sec-title{font-size:15px}
  .sec-time{font-size:10px}

  .board th{height:34px;padding:0 4px;font-size:11px}
  .board th br{display:inline}
  .board td{padding:0 4px}
  .c-net{width:23%}
  .c-ex{width:21.5%}
  .c-eta{display:none}            /* 전송시간은 망 칩 안으로 */
  .c-prem{width:14%}
  .c-profit{width:20%}

  /* 한 줄로 흐른다: [망·시간 칩] 코인명 [경고 칩]. 칸이 모자랄 때만 다음 줄로 넘어간다 */
  .cell-net{flex-wrap:wrap;align-content:center;gap:2px 3px}
  .cell-net .chip.net{order:-1}
  .cell-net .coin{margin:0;font-size:10.5px}
  .net-eta{display:inline;margin-left:3px}

  /* 한 줄로 흐른다: [로고][통화 칩] 가격. 긴 BTC 가격만 다음 줄로 */
  .exname{display:none}
  .cell-ex{flex-wrap:wrap;align-content:center;gap:2px 3px}
  .cell-ex .cur{margin:0}
  .px{font-size:9px}

  /* 우회 경로도 칸 5개: 코인 | 출금 | 경유 | 입금 | 수익 (프리미엄·전송시간은 상세에서) */
  .board.relay .c-prem{display:none}
  .board.relay .c-net{width:18%}
  .board.relay .c-ex{width:21%}
  .board.relay .c-mid{width:19%}
  .board.relay .c-profit{width:21%}
  .relay-eta{display:inline-flex}
  .cell-mid{display:grid;justify-items:start;align-content:center;gap:2px}
  /* 망 이름이 길면 자르지 않고 "MANTA / → ETH" 로 줄을 바꾼다. 도착 망이 가려지면 안 된다 */
  .board.relay td.c-mid{padding:0 3px}
  .cell-mid .chip.hop{margin:0;max-width:100%;height:auto;min-height:13px;padding:1px 3px;flex-wrap:wrap;
    line-height:1.25;white-space:normal;font-size:9px}
  .cell-mid .chip.hop>span{overflow-wrap:anywhere}
  .cell-mid .chip.hop i{margin:0 1px}
  .relay-scope button{height:28px;padding:0 11px;font-size:12.5px}
  .cards.relay .k,.cards.relay .v{padding:7px 6px;font-size:11.5px}
  .fld.four{grid-template-columns:repeat(2,minmax(0,1fr))}

  .board td.pct{text-align:center;font-size:10px}
  /* 수익률 칩과 금액도 들어가면 한 줄, 아니면 칩 아래로 금액 */
  .cell-profit{flex-wrap:wrap;justify-content:center;align-content:center;gap:2px 3px}
  .krw{font-size:10.5px}
  .board tbody tr.t3 .krw{font-size:10.5px}   /* 아비싱크도 굵기만 다르고 크기는 같다 */

  .detail{max-height:52vh}
  .detail-head{padding:8px 12px}
  .dh-left .exbadge b{display:none}   /* 로고만 */
  .detail-body{padding:4px 12px 14px;gap:10px}

  /* 호가 2단 유지 — 칸은 가격(첫 호가와 차이) | 수량 | 금액. 아비싱크처럼 한 줄 18px 안팎으로 촘촘하게.
     차이 %는 가격 옆에 붙인다. 칸이 모자라면 글자를 줄이고(fitBooks), 그래도 안 될 때만 다음 줄로 */
  .books{gap:6px}
  .book-title{padding:6px 8px;font-size:11.5px}
  .bt-note{display:none}
  .book table{font-size:10px}
  .book th{padding:4px 3px;font-size:9.5px}
  .book th:first-child{width:38%}
  .book th:nth-child(2){width:19%}
  .book th:nth-child(3){width:27%}
  .book th:nth-child(4){width:16%}
  .book th .sub{display:none}
  /* 누적 칸은 비중(%)만 — 체결되는 줄은 빨강, 그 아래는 흰색(원화합산과 같은 규칙) */
  .book td:nth-child(4) .cum{display:none}
  .book td:nth-child(4) .ratio{margin-left:0;font-size:inherit;color:inherit}
  .book td .cur{display:none}                /* 통화는 책 제목(업비트 KRW)에 있다. 가격 자리를 준다 */
  .book td{padding:2px 3px;line-height:1.3}
  .book td:first-child .impact{margin-left:2px;font-size:.85em}

  .cards{font-size:12.5px}
  .cards .l,.cards .k,.cards .v{padding:7px 8px}
  .drawer-inner{width:100%}
  .pairgrid{grid-template-columns:1fr}
  .to-top{right:12px;width:42px;height:42px}
}

/* ── 360px 급 휴대폰: 지표바 네 값이 톱니 밑으로 들어가지 않게 간격·글자를 조금 줄인다 ── */
@media (max-width:380px){
  .tickerbar{gap:8px}
  .tk{gap:3px}
  .tk-k{font-size:11px}
  .tk-v,.tk-v.pos,.tk-v.neg,.tk-v.zero{font-size:11.5px}
  .tk-act{padding-left:4px}
}

/* ── 리뷰 반영 ─────────────────────────────── */
/* 해외↔해외 등 접힌 섹션 */
.sec-fold{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:4px;border:1px solid var(--line2);
  background:none;color:var(--fg2);font-size:11.5px;cursor:pointer}
.board-sec.folded .table-wrap,.board-sec.folded .sec-win,.board-sec.folded .dot,.board-sec.folded .sec-time{display:none}
/* 거래소 페어 방향 칩 = 버튼 */
button.pair-prem{border:1px solid transparent;cursor:pointer;font:inherit;font-size:11.5px}
button.pair-prem.on{border-color:var(--line2);color:var(--fg)}
/* 설정: 고급(위험) 묶음 */
.fld.adv{border:1px solid var(--line2);border-radius:8px;padding:8px 10px}
.fld.adv>summary{cursor:pointer;color:var(--warn);font-size:13px;font-weight:600}
.fld.adv[open]>summary{margin-bottom:8px}
.fld.adv .fld.chk{margin-top:8px}
/* 보드 위 '내 설정' 알림 — 위험 설정이 켜져 있으면 빨갛게 */
.notice.info.danger{border-left-color:var(--up)}
.notice .risk{color:var(--up);font-weight:600}
.note-x{background:none;border:0;color:var(--mut);cursor:pointer;margin-left:6px;font-size:12px;padding:2px 4px}
/* 지금 새로 고침 */
#btn-refresh.spin{animation:spin .6s linear}
@keyframes spin{to{transform:rotate(360deg)}}
.more-btn.less{min-width:90px}
/* 휴대폰: 섹션 머리를 한 줄로(리뷰: 머리가 3줄이라 첫 화면에 표가 4~5줄뿐) — 방향은 위 탭에, 갱신 상태는 점 색에 있다 */
@media (max-width:420px){ .sec-sub,.sec-time{display:none} }
@media (max-width:340px){ .sec-title{font-size:14.5px} .sec-win,.sec-usdt{padding:0 5px} .sec-head{gap:5px} }