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

body {
  background: #131722;
  color: #d1d4dc;
  font-family: -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid #2a2e39;
  flex-wrap: wrap;
}

.title { font-size: 16px; font-weight: 700; white-space: nowrap; }

#coin-form { display: flex; gap: 8px; }

#coin-input {
  background: #1e222d;
  border: 1px solid #363a45;
  border-radius: 4px;
  color: #d1d4dc;
  padding: 7px 12px;
  font-size: 14px;
  width: 160px;
  text-transform: uppercase;
}
#coin-input:focus { outline: none; border-color: #2962ff; }

#coin-form button {
  background: #2962ff;
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 7px 16px;
  font-size: 14px;
  cursor: pointer;
}
#coin-form button:hover { background: #1e4fd6; }

#period-select, #fspot-select, #blocked-select, #mcap-select {
  background: #1e222d;
  border: 1px solid #363a45;
  border-radius: 4px;
  color: #d1d4dc;
  padding: 7px 10px;
  font-size: 14px;
  cursor: pointer;
}
#period-select:focus, #fspot-select:focus, #blocked-select:focus, #mcap-select:focus { outline: none; border-color: #2962ff; }
#blocked-select { max-width: 260px; }

#blocked-all {
  background: #1e222d;
  border: 1px solid #363a45;
  border-radius: 4px;
  color: #d1d4dc;
  padding: 7px 14px;
  font-size: 14px;
  cursor: pointer;
}
#blocked-all:hover, #blocked-all.active { background: #2962ff; border-color: #2962ff; color: #fff; }

/* ===== 입출막 코인 전체보기 ===== */
.blocked-view { padding: 14px 20px 20px; }
.blocked-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 2px 10px; }
.blocked-head b { font-size: 15px; }
.blocked-sub { font-size: 12px; color: #787b86; }
.blocked-meta { margin-left: auto; font-size: 12px; color: #9aa0ac; }
.blocked-scroll { overflow-x: auto; border: 1px solid #2a2e39; border-radius: 8px; background: #161a25; }
.blocked-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blocked-table th, .blocked-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid #20242f; }
.blocked-table th { position: sticky; top: 0; background: #1e222d; color: #9aa0ac; font-weight: 500; font-size: 12px; }
.blocked-table th.l, .blocked-table td.l { text-align: left; }
.blocked-table th.grp { text-align: center; border-bottom: 2px solid #2a2e39; }
.blocked-table th.grp.upbit { color: #26a69a; }
.blocked-table th.grp.bithumb { color: #ab47bc; }
.blocked-table tbody tr { cursor: pointer; }
.blocked-table tbody tr:hover { background: #1e222d; }
.blocked-table td.coin { font-weight: 700; color: #d1d4dc; }
.blocked-table td.plus { color: #ef5350; }
.blocked-table td.minus { color: #4a90d9; }
.blocked-table td.dim { color: #4c515c; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge.both { background: rgba(239,83,80,0.18); color: #ef5350; }
.badge.dep, .badge.wd { background: rgba(255,152,0,0.18); color: #ff9800; }
.badge.ok { background: rgba(120,123,134,0.18); color: #9aa0ac; }
.badge.none { color: #4c515c; }


.conn { margin-left: auto; font-size: 12px; }
.conn::before { content: "●"; margin-right: 5px; }
.conn.connected { color: #26a69a; }
.conn.disconnected { color: #ef5350; }

/* ===== 거래소 카드 ===== */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  padding: 14px 20px;
}

.card {
  background: #1e222d;
  border: 1px solid #2a2e39;
  border-radius: 8px;
  padding: 14px 18px;
  border-top: 3px solid transparent;
}
.card.upbit { border-top-color: #26a69a; }
.card.bithumb { border-top-color: #ab47bc; }
.card.perp { border-top-color: #ff9800; }
.card.fspot { border-top-color: #eceff1; }

.ex-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #9aa0ac;
  margin-bottom: 6px;
}
.ex-sym { color: #787b86; font-size: 12px; }

.ex-price {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  white-space: nowrap;
}
.ex-price.delisted { font-size: 18px; color: #787b86; font-weight: 400; }

.ex-gap {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ex-gap::before { content: "vs 선물 "; font-size: 12px; font-weight: 400; color: #787b86; }
.ex-gap.fgap { font-size: 16px; margin-top: 2px; }
.ex-gap.fgap::before { content: "vs 해외현물 "; }
.ex-gap.plus { color: #ef5350; }
.ex-gap.minus { color: #4a90d9; }

.ex-sub { font-size: 13px; color: #9aa0ac; }
.ex-sub b { color: #d1d4dc; font-variant-numeric: tabular-nums; }
.ex-sub b.plus { color: #ef5350; }
.ex-sub b.minus { color: #4a90d9; }
.sep { margin: 0 4px; color: #363a45; }

.message { padding: 40px 20px; text-align: center; color: #787b86; font-size: 15px; }
.message.error { color: #ef5350; }

main { padding: 0 20px 20px; }

.ex-section {
  margin-top: 16px;
  background: #161a25;
  border: 1px solid #2a2e39;
  border-radius: 8px;
  padding: 10px 12px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  padding: 2px 4px 8px;
}
.section-title b { font-weight: 700; }
.section-title .legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #9aa0ac;
  margin-left: 14px;
}

.gap-title { font-size: 12px; color: #9aa0ac; padding: 8px 4px 4px; display: flex; align-items: center; gap: 14px; }
.gap-legend { display: inline-flex; align-items: center; gap: 5px; color: #787b86; }
.swatch { width: 14px; height: 2px; display: inline-block; }
.swatch.perp-gap { background: linear-gradient(90deg, #ef5350, #4a90d9); }
.swatch.fspot { background: repeating-linear-gradient(90deg, #eceff1 0 4px, transparent 4px 7px); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.upbit { background: #26a69a; }
.dot.bithumb { background: #ab47bc; }
.dot.perp { background: #ff9800; }
.dot.fspot { background: #eceff1; }

.price-chart { height: 300px; position: relative; }
.gap-chart { height: 130px; position: relative; }

/* 크로스헤어 호버 툴팁 */
.hover-tip {
  position: absolute;
  display: none;
  z-index: 10;
  pointer-events: none;
  background: rgba(30, 34, 45, 0.95);
  border: 1px solid #363a45;
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 12px;
  color: #9aa0ac;
  white-space: nowrap;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.hover-tip b { color: #d1d4dc; font-weight: 600; }
.hover-tip .tip-gap { font-size: 15px; font-weight: 700; }
.hover-tip .tip-gap.plus { color: #ef5350; }
.hover-tip .tip-gap.minus { color: #4a90d9; }
.hover-tip .tip-fgap { color: #eceff1; }

.hidden { display: none !important; }
.blocked-table td.mcap { color: #9aa0ac; font-size: 12px; }
.blocked-table td.mcap small { color: #4c515c; }

/* 입출막 표: 기준가 소스 태그 · 펀딩비 · 정산 */
.blocked-table .reftag { display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 600; vertical-align: 1px; }
.blocked-table .reftag.perp { background: #2a2e39; color: #9aa0ac; }
.blocked-table .reftag.spot { background: #3a2f14; color: #ffb74d; }
.blocked-table td.fund.recv { color: #4a90d9; }
.blocked-table td.fund.pay { color: #ef5350; }
.blocked-table td.fund small, .blocked-table td.settle small { color: #787b86; font-size: 11px; }
.blocked-table td.settle { color: #9aa0ac; }

/* 김프 코인(입출금 정상) 표 */
.blocked-head.open-head { margin-top: 22px; }
#open-select { background: #1e222d; color: #d1d4dc; border: 1px solid #2a2e39; border-radius: 6px; padding: 3px 8px; font-size: 12px; }
#open-select:focus { outline: none; border-color: #2962ff; }
.blocked-table td.wide { opacity: 0.45; text-decoration: line-through; text-decoration-color: #787b86; }

/* ===== 코인 숨기기 (행 ✕ 버튼 · 헤더 숨김 토글) ===== */
.hidden-ctl { background: #1e222d; color: #9aa0ac; border: 1px solid #2a2e39; border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.hidden-ctl:hover { color: #d1d4dc; border-color: #363a45; }
.hidden-ctl.active { background: #2962ff; border-color: #2962ff; color: #fff; }
.blocked-table .hide-btn { background: none; border: 0; color: #4c515c; font-size: 12px; line-height: 1; padding: 0 4px; margin: 0 4px 0 -4px; cursor: pointer; visibility: hidden; }
.blocked-table tbody tr:hover .hide-btn, .blocked-table tr.user-hidden .hide-btn { visibility: visible; }
.blocked-table .hide-btn:hover { color: #ef5350; }
.blocked-table .hide-btn.restore { color: #26a69a; }
.blocked-table tr.user-hidden td:not(.coin) { opacity: 0.4; }
.blocked-table tr.user-hidden td.coin { color: #787b86; text-decoration: line-through; text-decoration-color: #787b86; }
.blocked-table tr.user-hidden td.coin .hide-btn { text-decoration: none; }