/* BTC multi-exchange orderbook (cryptowatch style) */
.ob-dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ob-dashboard > * { min-width: 0; }

.ob-head h1 { margin: 0 0 8px; font-size: 28px; }
.ob-head p { margin: 0; color: var(--coz-muted, #8f9bae); line-height: 1.7; max-width: 760px; word-break: keep-all; }
.ob-updated { margin-top: 8px; color: var(--coz-muted, #8f9bae); font-size: 12px; }

.ob-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ob-bin-tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--liq-border, rgba(125,134,160,.25)); border-radius: 8px; background: var(--liq-chip-bg, rgba(125,134,160,.08)); }
.ob-bin-tabs button { min-height: 30px; padding: 5px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--coz-muted, #8f9bae); cursor: pointer; font: inherit; font-size: 12px; font-weight: 900; }
.ob-bin-tabs button.is-active { background: rgba(0,188,212,.2); color: #35dff0; }
.ob-summary-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ob-summary-chips span { padding: 6px 12px; border: 1px solid var(--liq-border, rgba(125,134,160,.25)); border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--coz-muted, #8f9bae); }
.ob-summary-chips strong { color: var(--coz-text, #f3f5f8); margin-left: 4px; }

.ob-loading { padding: 40px 0; text-align: center; color: var(--coz-muted, #8f9bae); }

.ob-grid-wrap { overflow-x: auto; border: 1px solid var(--liq-border, rgba(125,134,160,.25)); border-radius: 12px; background: #08090d; -webkit-overflow-scrolling: touch; }
.ob-grid { display: flex; width: 100%; font-family: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace; }
.ob-col { flex: 1 1 0; min-width: 0; border-right: 1px solid rgba(125,134,160,.12); padding: 8px 0 6px; }
.ob-col:last-child { border-right: 0; }
.ob-col.is-stale { opacity: .55; }
.ob-col-head { display: flex; flex-direction: column; gap: 1px; padding: 0 7px 8px; overflow: hidden; }
.ob-col-head strong { color: #d7dde8; font-size: 12px; letter-spacing: .2px; }
.ob-col-head span { color: #5d6b80; font-size: 10px; }

.ob-row { position: relative; display: flex; justify-content: space-between; gap: 4px; padding: 1px 7px; font-size: 10.5px; line-height: 1.55; white-space: nowrap; }
.ob-row i { position: absolute; inset: 0 auto 0 0; opacity: .28; }
.ob-row.ask i { background: #b8273f; left: auto; right: 0; }
.ob-row.bid i { background: #1c7a44; left: auto; right: 0; }
.ob-row .ob-price { position: relative; color: #93a0b4; }
.ob-row.is-empty .ob-price { opacity: .3; }
.ob-row.is-empty { min-height: 18px; }
.ob-row.ask .ob-price { color: #e66578; }
.ob-row.bid .ob-price { color: #3ecf7d; }
.ob-row .ob-qty { position: relative; color: #e8edf5; font-weight: 600; }
.ob-row.is-wall .ob-qty { background: #f5d94e; color: #15120a; padding: 0 4px; border-radius: 2px; font-weight: 900; }

.ob-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin: 5px 0; padding: 6px 7px; white-space: nowrap; overflow: hidden; border-top: 1px solid rgba(125,134,160,.16); border-bottom: 1px solid rgba(125,134,160,.16); }
.ob-mid strong { color: #2ee6a8; font-size: 13px; font-weight: 900; }
.ob-mid span { color: #5d6b80; font-size: 10px; }

.ob-delta { display: flex; align-items: center; gap: 4px; margin-top: 7px; padding: 0 7px; font-size: 9.5px; }
.ob-delta-bid { color: #3ecf7d; font-weight: 800; }
.ob-delta-ask { color: #e66578; font-weight: 800; }
.ob-delta-bar { flex: 1; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(125,134,160,.15); }
.ob-delta-bar i.bid { background: #1c7a44; }
.ob-delta-bar i.ask { background: #b8273f; }

.ob-section h2 { margin: 0 0 12px; font-size: 19px; }
.ob-faq { display: grid; gap: 10px; }
.ob-faq details { border: 1px solid var(--liq-border, rgba(125,134,160,.25)); border-radius: 12px; padding: 13px 16px; background: var(--liq-panel, rgba(20,26,44,.4)); }
.ob-faq summary { cursor: pointer; font-weight: 900; font-size: 14px; }
.ob-faq p { margin: 10px 0 0; color: var(--coz-muted, #8f9bae); line-height: 1.8; font-size: 14px; }
.ob-summary-box { border: 1px solid rgba(0,188,212,.35); border-left: 4px solid #00bcd4; border-radius: 12px; padding: 15px 18px; background: rgba(0,188,212,.06); line-height: 1.8; }
.ob-summary-box h2 { margin: 0 0 8px; font-size: 16px; }
.ob-summary-box p { margin: 0; }
.ob-note { color: var(--coz-muted, #8f9bae); font-size: 12px; line-height: 1.7; }

/* 라이트 모드 그리드 */
html:not(.dark) .ob-grid-wrap { background: #ffffff; border-color: rgba(31,39,56,.14); }
html:not(.dark) .ob-col { border-right-color: rgba(31,39,56,.08); }
html:not(.dark) .ob-col-head strong { color: #1f2738; }
html:not(.dark) .ob-col-head span { color: #8a94a6; }
html:not(.dark) .ob-row.ask .ob-price { color: #d23a52; }
html:not(.dark) .ob-row.bid .ob-price { color: #128a4d; }
html:not(.dark) .ob-row .ob-qty { color: #1f2738; }
html:not(.dark) .ob-row i { opacity: .16; }
html:not(.dark) .ob-row.ask i { background: #e0506a; }
html:not(.dark) .ob-row.bid i { background: #28a263; }
html:not(.dark) .ob-row.is-empty .ob-price { opacity: .35; }
html:not(.dark) .ob-mid { border-color: rgba(31,39,56,.12); }
html:not(.dark) .ob-mid strong { color: #0a8f5b; }
html:not(.dark) .ob-mid span { color: #8a94a6; }
html:not(.dark) .ob-delta-bar { background: #e6ebf2; }
html:not(.dark) .ob-delta-bid { color: #128a4d; }
html:not(.dark) .ob-delta-ask { color: #d23a52; }
html:not(.dark) .ob-faq details, html:not(.dark) .ob-summary-chips span { background: #ffffff; }

@media (max-width: 760px) {
  .ob-head h1 { font-size: 22px; }
  .ob-col { flex: 0 0 142px; }
}

/* 와이드 대시보드: 페이지 전체 단일 폭 통일 */
.ob-main { width: min(100% - 48px, 1760px) !important; max-width: none !important; margin-left: auto; margin-right: auto; }
.ob-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ob-head-row .ob-updated { margin-top: 0; }
.ob-toolbar { justify-content: space-between; }
.ob-bottom { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ob-summary-box p { max-width: 1080px; }
.ob-main p, .ob-main li { word-break: keep-all; overflow-wrap: break-word; }
.ob-lead { max-width: none !important; }
.ob-summary-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ob-summary-list li { position: relative; padding-left: 20px; word-break: keep-all; overflow-wrap: break-word; line-height: 1.65; }
.ob-summary-list li::before { content: "\25B8"; position: absolute; left: 2px; top: 0; color: #22d3ee; font-weight: 900; }
@media (max-width: 760px) {
  .ob-grid { min-width: max-content; }
  .ob-col { flex: 0 0 142px; }
  .ob-row { font-size: 11px; padding: 1px 10px; }
}

/* PC 가독성: 거래소명/페어/호가 글자 확대 (clamp로 좁은 PC에서도 11컬럼 유지) */
@media (min-width: 761px) {
  .ob-col-head strong { font-size: clamp(13px, 0.95vw, 16px); }
  .ob-col-head span { font-size: clamp(10.5px, 0.72vw, 12.5px); }
  .ob-row { font-size: clamp(11px, 0.8vw, 13.5px); padding: 1.5px 7px; }
  .ob-row.is-empty { min-height: 21px; }
  .ob-mid strong { font-size: clamp(14px, 1vw, 17px); }
  .ob-mid span { font-size: clamp(10.5px, 0.72vw, 12.5px); }
  .ob-delta { font-size: clamp(10.5px, 0.72vw, 12.5px); }
  .ob-delta-bar { height: 7px; }
}