:root { color-scheme: dark; --bg: #05090d; --panel: #0a121a; --line: #1b2b38; --text: #e9f1f5; --muted: #728492; --cyan: #40d6e6; --up: #00d09c; --down: #ff5066; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, Pretendard, "Noto Sans KR", Arial, sans-serif; }
body { background-image: radial-gradient(circle at 70% -20%, #12384980, transparent 42%), linear-gradient(#071018, #030609 72%); }
button, a { font: inherit; }
.shell { width: min(1800px, 100%); margin: 0 auto; min-height: 100vh; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); background: #061019e6; backdrop-filter: blur(14px); }
.brand { display: grid; grid-template-columns: 34px auto; grid-template-rows: 18px 12px; gap: 0 10px; color: inherit; text-decoration: none; letter-spacing: .12em; }
.brand i { grid-row: 1 / 3; width: 34px; height: 34px; border: 1px solid var(--cyan); background: linear-gradient(135deg, #40d6e630, transparent); position: relative; }
.brand i::after { content: "LM"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--cyan); font-size: 10px; font-weight: 900; }
.brand span { font-size: 13px; font-weight: 900; }.brand small { color: var(--muted); font-size: 8px; }
.market-state { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.market-state b { color: #b7c7d0; }.market-state em { font-style: normal; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 16px var(--up); }.pulse.closed { background: #82919a; box-shadow: none; }
main { padding: 28px; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 12px 0 26px; }
.eyebrow { margin: 0 0 8px; color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(35px, 5vw, 68px); line-height: .98; letter-spacing: -.06em; } h1 span { color: transparent; -webkit-text-stroke: 1px #91f2fc; }
.summary { display: grid; grid-template-columns: repeat(3, minmax(100px, 150px)); border: 1px solid var(--line); background: #07121b; }
.summary article { min-height: 76px; display: flex; flex-direction: column; justify-content: center; padding: 12px 18px; border-left: 1px solid var(--line); }.summary article:first-child { border-left: 0; }
.summary small { color: var(--muted); font-size: 9px; }.summary strong { margin-top: 7px; font-size: 19px; }.summary .up { color: var(--up); }.summary .down { color: var(--down); }
.toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-bottom: 0; padding: 7px; background: #08121a; }
.tabs { display: flex; gap: 5px; }.tabs button { border: 1px solid #263947; background: transparent; color: #8195a3; padding: 8px 15px; cursor: pointer; font-size: 11px; }.tabs button:hover, .tabs button.active { border-color: var(--cyan); background: #40d6e617; color: #d9fbff; }
.toolbar p { display: flex; align-items: center; gap: 8px; margin: 0 8px; color: var(--muted); font-size: 10px; }.toolbar p span { width: 6px; height: 6px; background: var(--up); border-radius: 50%; }
.feed-notice { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); border-bottom: 0; color: #91a4b0; background: #08121a; font-size: 10px; }.feed-notice b { color: #d9fbff; font-size: 11px; }.feed-notice.verified { border-color: #16745f; background: #062019; }.feed-notice.verified b { color: #65edc7; }.feed-notice.warning { border-color: #896324; background: #251b08; }.feed-notice.warning b { color: #ffd36c; }
.heatmap { min-height: 560px; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 115px; gap: 3px; padding: 3px; border: 1px solid var(--line); background: #111c24; }
.loading { grid-column: 1 / -1; min-height: 520px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.tile { --tile: #26313a; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; border: 1px solid #ffffff12; padding: 13px; background: var(--tile); color: white; text-align: left; cursor: default; transition: filter .2s, transform .2s; }
.tile:hover { filter: brightness(1.16); z-index: 2; transform: scale(1.01); }.tile.large { grid-column: span 3; grid-row: span 2; }.tile.medium { grid-column: span 2; }.tile.small { grid-column: span 1; }
.tile header { display: flex; justify-content: space-between; gap: 8px; }.tile strong { font-size: clamp(14px, 1.4vw, 24px); letter-spacing: -.03em; }.tile header small { overflow: hidden; color: #ffffffb0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tile mark { border: 1px solid #e5b95080; padding: 2px 4px; background: #211a0d; color: #ffd36c; font-size: 7px; white-space: nowrap; }.tile.delayed, .tile.unverified { filter: saturate(.35); }
.tile div { display: flex; align-items: end; justify-content: space-between; gap: 8px; }.tile b { font-size: clamp(14px, 1.7vw, 28px); }.tile span { color: #ffffffbf; font-size: 10px; white-space: nowrap; }.tile.small { padding: 9px; }.tile.small header small, .tile.small span { display: none; }.tile.small b { font-size: 13px; }
.legend { display: grid; grid-template-columns: auto repeat(7, 28px) auto 1fr; align-items: center; gap: 4px; padding: 14px 0; color: var(--muted); font-size: 9px; }.legend i { height: 8px; }.legend p { margin: 0 0 0 16px; text-align: right; }.l5{background:#9d1f36}.l3{background:#6c2535}.l1{background:#3a2932}.flat{background:#25313a}.g1{background:#17493e}.g3{background:#08765f}.g5{background:#00a77d}
@media (max-width: 900px) { .intro { align-items: stretch; flex-direction: column; }.summary { width: 100%; }.heatmap { grid-template-columns: repeat(6, 1fr); }.tile.large { grid-column: span 3; }.tile.medium { grid-column: span 2; }.tile.small { grid-column: span 1; }.legend { grid-template-columns: auto repeat(7, 1fr) auto; }.legend p { grid-column: 1 / -1; margin: 8px 0 0; text-align: left; } }
@media (max-width: 560px) { .topbar, main { padding-inline: 14px; }.market-state b { display: none; }.summary { grid-template-columns: 1fr 1fr; }.summary article:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }.toolbar { align-items: stretch; flex-direction: column; }.tabs { overflow-x: auto; }.tabs button { flex: 0 0 auto; }.toolbar p { padding: 4px; }.feed-notice { align-items: flex-start; flex-direction: column; gap: 4px; }.heatmap { min-height: 480px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; }.tile.large, .tile.medium { grid-column: span 1; grid-row: span 1; }.tile header small, .tile.small mark { display: none; }.tile { padding: 10px; } }