:root { --bg:#070e16; --tile:#0b1622; --line:#1c3346; --ink:#e8f4f8; --sub:#8aa0b0; --cool:#2fd0d0; --gold:#ffd24a; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: "Pretendard", "NanumSquareRound", system-ui, sans-serif; overflow: hidden; }
#top { height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--line); position: relative; z-index: 100; }
#top h1 { font-size: 17px; font-weight: 800; letter-spacing: .5px; }
#top .tag { font-size: 12px; color: var(--sub); }
#top #toggle { margin-left: 16px; background: #11283a; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
#top #toggle:hover, #top #toggle.active { border-color: var(--gold); color: var(--gold); }
#top .clock { margin-left: auto; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.tile object.schema { display: none; position: absolute; inset: 0; width: 100%; height: 100%; background: #fffef0; pointer-events: none; }
body.show-schema .tile canvas { display: none; }
body.show-schema .tile .hdr { display: none; }
body.show-schema .tile object.schema { display: block; }
body.show-schema .tile.interactive::after { content: ""; }
/* 개념도 스포트라이트: featured 개념도를 크게 띄워 14초마다 회전 */
#spot { display: none; }
body.show-schema #spot { display: block; position: fixed; top: calc(50% + 23px); left: 50%; transform: translate(-50%, -50%); width: min(82vw, 1300px); aspect-ratio: 1400 / 1000; max-height: 86vh; z-index: 60; background: #fffef0; border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.6), 0 14px 50px #000; overflow: hidden; cursor: zoom-in; }
#spot object { width: 100%; height: 100%; pointer-events: none; }
#spotcap { position: absolute; top: 10px; left: 14px; z-index: 2; font-size: 14px; font-weight: 800; color: #1a2e4a; background: var(--gold); padding: 3px 11px; border-radius: 8px; }
body.show-schema .tile.featured { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px #ffd24a55; }
#wall { height: calc(100% - 46px); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; padding: 8px; }
.tile { position: relative; background: var(--tile); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow .4s, border-color .4s; }
.tile canvas { width: 100%; height: 100%; display: block; }
.tile .hdr { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; align-items: baseline; gap: 8px; pointer-events: none; text-shadow: 0 1px 3px #000a; }
.tile .hdr .kr { font-size: 16px; font-weight: 800; }
.tile .hdr .en { font-size: 10px; color: var(--sub); }
.tile .hdr .id { margin-left: auto; font-size: 10px; color: var(--sub); }
.tile .chips { position: absolute; left: 10px; bottom: 8px; display: flex; gap: 5px; flex-wrap: wrap; pointer-events: none; }
.tile .chip { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #11283a; border: 1px solid var(--line); color: #bcd4de; }
.tile .one { position: absolute; right: 10px; bottom: 8px; max-width: 55%; text-align: right; font-size: 10.5px; color: var(--sub); opacity: 0; transition: opacity .4s; pointer-events: none; text-shadow: 0 1px 3px #000a; }
.tile.featured { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px #ffd24a55; }
.tile.featured .one { opacity: 1; }
.tile .play { position: absolute; inset: 0; display: none; }
.tile.interactive::after { content: "▶ 클릭"; position: absolute; top: 8px; right: 10px; font-size: 10px; color: var(--gold); opacity: .85; }