:root{--panel:rgba(18,22,30,.88);--line:rgba(255,255,255,.14);--text:#eef1f5;--muted:#a3adb8;--gold:#f2c14e}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#cad6e1;color:var(--text);font-family:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;overflow:hidden}
#scene{position:fixed;inset:0}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#1a1f27;color:var(--muted);font-size:15px;z-index:9}
header{position:fixed;top:0;left:0;right:0;padding:12px 16px;display:flex;gap:14px;align-items:baseline;pointer-events:none;background:linear-gradient(rgba(18,22,30,.85),transparent)}
header a{pointer-events:auto;color:var(--muted);text-decoration:none;font-size:13px}
header h1{margin:0;font-size:18px}
header span{color:var(--muted);font-size:12px}
#panel{position:fixed;top:58px;right:16px;width:360px;max-height:calc(100% - 150px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
#step{font-size:13px;color:var(--gold);font-weight:700}
.vid{display:block;text-align:center;margin:0 0 12px;padding:9px 10px;border-radius:10px;background:#c4302b;color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.vid.wait{background:#2a313c;color:var(--muted);font-weight:500;font-size:13px}
#panel h2{font-size:21px;margin:4px 0 6px}
.srcTag{display:inline-block;font-size:11.5px;color:#cfe3ff;background:rgba(78,161,255,.18);border:1px solid rgba(78,161,255,.4);border-radius:6px;padding:1px 7px;margin-bottom:8px}
.srcTag:empty{display:none}
#sx p{margin:0 0 10px;font-size:14px;line-height:1.7;color:#d8dee6}
.note{font-size:12.5px;color:#ffd9a0;border-left:3px solid #ffb84d;padding-left:8px;margin:0 0 10px}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.src{font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
#bar{position:fixed;left:16px;right:16px;bottom:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;gap:8px;align-items:center}
#bar button{background:#2a313c;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:14px;cursor:pointer;font-family:inherit;white-space:nowrap}
#bar button:hover{border-color:var(--gold)}
#chips{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:thin}
#chips button{font-size:12.5px;padding:6px 10px}
#chips button.on{background:var(--gold);color:#1a1f27;border-color:var(--gold);font-weight:700}
.label{font-size:12.5px;padding:3px 8px;border-radius:6px;background:rgba(14,17,23,.82);border:1px solid var(--line);color:var(--text);white-space:nowrap;transform:translateY(-12px)}
.label.baekje{border-color:#4ea1ff}.label.japan{border-color:#e27fb3}.label.china{border-color:#c59bff}.label.enemy{border-color:#ff5a4e;color:#ffd2cd}.label.place{border-color:var(--gold)}
.label.region{border-color:#f2c14e;background:rgba(242,193,78,.9);color:#1a1f27;font-weight:700}
.label.via{font-size:11px;padding:2px 6px;opacity:.9}
/* 옛 지도 화풍: 양피지 위 먹 글씨 */
body.oldmap .label{background:rgba(244,236,214,.94);color:#3b2a17;border-color:#8a6a3a;font-family:"Nanum Myeongjo","Batang",serif;font-weight:700}
body.oldmap .label.region{background:rgba(138,106,58,.92);color:#f6eedb}
/* 촬영 모드: 화면 장치를 숨기고 지도·지명표만 */
body.film header,body.film #panel,body.film #bar,body.film #loading{display:none!important}
body.film .label{font-size:22px;padding:6px 14px;border-radius:8px}
@media (max-width:760px){
  #panel{left:12px;right:12px;width:auto;top:auto;bottom:80px;max-height:42%}
  #bar{left:12px;right:12px;bottom:12px;padding:8px}
  header span{display:none}
  .label{font-size:11px}
}