:root { color-scheme: dark; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #081321; color: #f9fbff; --gold: #d7b36e; --muted: #9daec5; --line: rgba(223, 233, 247, .18); --buy: #ff8b89; --sell: #83b7ff; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #081321; }
.display-screen { width: 100vw; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(14px, 2vh, 28px); padding: clamp(28px, 4vw, 76px) clamp(36px, 5vw, 96px) clamp(24px, 3vw, 52px); background: #081321; cursor: pointer; }
.display-header, .display-rate-heading, .display-footer { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.display-brand { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: clamp(25px, 2.5vw, 50px); font-weight: 850; letter-spacing: -.09em; }
.display-brand-mark { display: inline-flex; align-items: center; padding: 3px 8px 5px; border-radius: 5px; background: #fff; color: #102744; font-size: .6em; letter-spacing: -.08em; }
.display-updated { margin-left: auto; color: var(--muted); font-size: clamp(14px, 1.25vw, 24px); font-variant-numeric: tabular-nums; }
.display-updated strong { margin-left: 8px; color: var(--gold); }
.display-clock { min-width: 8.5em; color: #fff; text-align: right; font-size: clamp(26px, 3vw, 60px); font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.display-rates { min-height: 0; display: flex; flex-direction: column; }
.display-rate-heading { padding-bottom: clamp(14px, 1.8vh, 24px); }
.display-kicker { color: var(--gold); font-size: clamp(11px, .85vw, 17px); font-weight: 850; letter-spacing: .2em; }
.display-rate-heading h1 { margin: 8px 0 0; color: #fff; font-size: clamp(34px, 4vw, 74px); line-height: 1; letter-spacing: -.09em; }
.display-call { display: grid; gap: 4px; justify-items: end; color: var(--muted); font-size: clamp(12px, 1.1vw, 21px); }
.display-call a { color: #fff; font-size: clamp(18px, 1.65vw, 33px); font-weight: 800; font-variant-numeric: tabular-nums; }
.display-table-wrap { min-height: 0; flex: 1; overflow: hidden; border-top: 2px solid var(--gold); border-bottom: 1px solid var(--line); }
.display-table { width: 100%; min-width: 0; height: 100%; border-collapse: collapse; table-layout: fixed; font-size: clamp(18px, 1.65vw, 34px); }
.display-table th, .display-table td { padding: clamp(14px, 1.45vh, 27px) clamp(12px, 1.5vw, 30px); border-bottom: 1px solid var(--line); text-align: left; }
.display-table thead th { color: var(--muted); font-size: clamp(12px, 1vw, 20px); font-weight: 650; letter-spacing: -.02em; }
.display-table thead th small { display: block; margin-top: 5px; color: inherit; font-size: .8em; font-weight: 500; }
.display-table th:first-child, .display-table td:first-child { width: 36%; }
.display-table th:nth-child(2), .display-table td:nth-child(2) { width: 22%; }
.display-table th:nth-child(3), .display-table td:nth-child(3), .display-table th:nth-child(4), .display-table td:nth-child(4) { text-align: right; }
.display-table .display-buy { color: var(--buy); background: rgba(154, 45, 52, .12); }
.display-table .display-sell { color: var(--sell); background: rgba(45, 92, 155, .13); }
.display-table .is-hidden { display: none; }
.display-number { font-weight: 800; font-variant-numeric: tabular-nums; }
.display-brand-chip { display: inline-block; width: clamp(12px, 1vw, 20px); height: clamp(12px, 1vw, 20px); margin-right: clamp(9px, .8vw, 16px); border-radius: 3px; background: var(--brand-color); vertical-align: 2px; }
.display-empty { color: var(--muted); text-align: center !important; }
.display-page-indicator { padding-top: 10px; color: var(--muted); text-align: right; font-size: clamp(11px, .8vw, 16px); font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.display-footer { gap: 36px; padding-top: 6px; }
.display-ticker { min-width: 0; flex: 1; display: flex; align-items: center; gap: 24px; overflow: hidden; }
.ticker-label { flex: 0 0 auto; color: var(--gold); font-size: clamp(11px, .8vw, 16px); font-weight: 850; letter-spacing: .13em; }
.ticker-window { min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: inline-flex; align-items: center; gap: 80px; min-width: max-content; color: #dce5f1; font-size: clamp(14px, 1.1vw, 22px); white-space: nowrap; animation: ticker-move 36s linear infinite; }
.ticker-track span::before { margin-right: 18px; color: var(--gold); content: "•"; }
.display-footer-hint { flex: 0 0 auto; color: #6e819d; font-size: clamp(10px, .7vw, 14px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes ticker-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.is-portrait .display-screen { grid-template-rows: auto minmax(0, 1fr) auto; padding: 5vh 5vw; }
.is-portrait .display-header { align-items: flex-start; }
.is-portrait .display-updated { margin-left: 0; }
.is-portrait .display-rate-heading { display: block; }
.is-portrait .display-call { display: flex; align-items: baseline; justify-content: space-between; margin-top: 20px; }
.is-portrait .display-table { font-size: clamp(18px, 3.8vw, 34px); }
.is-portrait .display-table th:first-child, .is-portrait .display-table td:first-child { width: 34%; }
.is-portrait .display-footer-hint { display: none; }

@media (max-width: 850px) {
    .display-screen { padding: 22px 20px 18px; gap: 16px; }
    .display-header { flex-wrap: wrap; }
    .display-updated { order: 3; width: 100%; margin-left: 0; }
    .display-clock { margin-left: auto; }
    .display-rate-heading { align-items: flex-end; }
    .display-call { display: none; }
    .display-table { font-size: 16px; }
    .display-table th, .display-table td { padding: 12px 9px; }
    .display-footer { gap: 10px; }
    .display-ticker { gap: 10px; }
    .display-footer-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-play-state: paused !important; transition: none !important; } }