:root {
  --paper: #f3e9d2; --paper2: #e8d9b5; --ink: #2b2118; --ink2: #5b4a36; --accent: #9b1c1c;
  --panel: rgba(250, 244, 230, .96); --line: rgba(80, 60, 30, .18); --shadow: 0 8px 28px rgba(40, 25, 10, .18);
  --serif: 'Noto Serif KR', serif; --sans: 'Pretendard', -apple-system, sans-serif;
}
body[data-theme="dark"] {
  --panel: rgba(22, 24, 28, .94); --ink: #f2efe8; --ink2: #b9b2a5; --line: rgba(255, 255, 255, .12);
  --paper: #1b1d22; --paper2: #262a31;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--sans); color: var(--ink); background: var(--paper); }
#app { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr; grid-template-columns: 320px 1fr; }
#top { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--panel);
  border-bottom: 1px solid var(--line); z-index: 1000; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.seal { font-family: var(--serif); font-weight: 900; color: #fff; background: var(--accent); border-radius: 6px; padding: 6px 7px;
  font-size: 15px; letter-spacing: 1px; line-height: 1; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.brand h1 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 900; letter-spacing: 1px; }
.brand p { margin: 0; font-size: 12px; color: var(--ink2); }
.search { position: relative; margin-left: auto; width: min(360px, 45vw); }
.search input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.7);
  font: 14px var(--sans); color: var(--ink); }
body[data-theme="dark"] .search input { background: rgba(255,255,255,.06); }
#qres { position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--panel);
  border-radius: 10px; box-shadow: var(--shadow); display: none; max-height: 50vh; overflow: auto; }
#qres li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
#qres li:hover, #qres li.on { background: rgba(155, 28, 28, .1); }
#qres li small { color: var(--ink2); margin-left: 6px; }
#menuBtn { display: none; border: 0; background: none; font-size: 22px; color: var(--ink); cursor: pointer; }

#panel { grid-row: 2; overflow: auto; padding: 14px 16px 30px; background: var(--panel); border-right: 1px solid var(--line); z-index: 900; }
#panel section { margin-bottom: 18px; }
#panel h3 { margin: 0 0 8px; font: 700 13px var(--sans); color: var(--ink2); letter-spacing: .5px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; background: rgba(0,0,0,.05); border-radius: 10px; }
.seg button { border: 0; background: none; padding: 8px 4px; border-radius: 8px; font: 600 13px var(--sans); color: var(--ink2); cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
body[data-theme="dark"] .seg button.on { background: rgba(255,255,255,.14); }
.tg { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.tg input { accent-color: var(--accent); width: 16px; height: 16px; }
.grp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 2px 0; border-radius: 8px; cursor: pointer; font-size: 14px; }
.grp:hover { background: rgba(0,0,0,.04); }
.grp .sw { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.grp .cnt { margin-left: auto; font-size: 12px; color: var(--ink2); }
.grp.off { opacity: .4; }
.grp-items { margin: 0 0 6px 28px; font-size: 13px; color: var(--ink2); line-height: 1.8; }
.grp-items span { cursor: pointer; margin-right: 8px; white-space: nowrap; }
.grp-items span:hover { color: var(--accent); text-decoration: underline; }
.note { font-size: 12px; color: var(--ink2); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 12px; }

#map { grid-row: 2; grid-column: 2; background: #d9c9a3; }
body[data-layout="full"] #panel, body[data-layout="float"] #panel { display: none; }
body[data-layout="full"] #map, body[data-layout="float"] #map { grid-column: 1 / -1; }
body[data-layout="float"] #panel.open, body[data-layout="full"] #panel.open {
  display: block; position: fixed; top: 64px; left: 12px; width: 300px; max-height: calc(100% - 80px); border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); }
body[data-layout="float"] #menuBtn, body[data-layout="full"] #menuBtn { display: block; }

/* parchment / ink base */
body[data-base="ink"] #map { background: #cfe0e3; }
body[data-base="ink"] .leaflet-tile-pane { filter: sepia(.55) saturate(.8) contrast(.95) brightness(1.03); }

/* detail card */
#detail { position: fixed; right: 16px; top: 76px; width: 340px; max-height: calc(100% - 92px); overflow: auto; z-index: 1100;
  background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); padding: 18px 18px 16px; }
body[data-layout="float"] #detail { left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: 20px; width: min(520px, calc(100% - 24px)); }
#detail .close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 24px; color: var(--ink2); cursor: pointer; }
.d-head { display: flex; gap: 10px; align-items: center; }
.d-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
#dName { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 900; }
#dHanja { margin: 0; color: var(--ink2); font-family: var(--serif); font-size: 14px; }
.d-place { font-size: 13px; color: var(--accent); font-weight: 600; margin: 10px 0 6px; }
#dDesc { font-size: 15px; line-height: 1.65; margin: 6px 0 10px; }
#dArts span { display: inline-block; font-size: 12px; padding: 3px 8px; margin: 0 4px 4px 0; border-radius: 99px; background: rgba(155, 28, 28, .08); color: var(--accent); }
.d-real { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.04); font-size: 13px; line-height: 1.6; }
.d-real p { margin: 4px 0 0; }

#legend { position: fixed; left: 336px; bottom: 16px; z-index: 950; background: var(--panel); border-radius: 12px; padding: 8px 12px;
  box-shadow: var(--shadow); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; max-width: calc(100% - 360px); border: 1px solid var(--line); }
body[data-layout="float"] #legend, body[data-layout="full"] #legend { left: 16px; max-width: calc(100% - 32px); }
#legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
body[data-layout="full"] #legend { display: none; }

/* map labels */
.f-label { font: 700 13px var(--sans); color: var(--c, #222); white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
  pointer-events: none; }
.f-label.hanja::after { content: attr(data-h); font: 500 11px var(--serif); margin-left: 4px; opacity: .75; }
body[data-z="far"] .f-label.hanja::after { content: none; }
body[data-z="far"] .f-label { font-size: 12px; }
body[data-z="far"] .f-label.minor { display: none; }
.r-label { font-family: var(--serif); font-weight: 900; color: var(--c); white-space: nowrap; text-align: center; pointer-events: none;
  text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.8); letter-spacing: 3px; opacity: .9; }
.r-label { font-size: var(--s); }
body[data-z="far"] .r-label { font-size: calc(var(--s) * .72); letter-spacing: 2px; }
body[data-z="far"] .r-label small { display: none; }
.r-label small { display: block; font-weight: 500; font-size: .55em; letter-spacing: 2px; opacity: .8; }
.c-label { font: 600 11px var(--sans); color: #333; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff; pointer-events: none; }
.n-label { font: italic 600 15px var(--sans); color: rgba(60,60,60,.55); white-space: nowrap; letter-spacing: 4px; pointer-events: none;
  text-shadow: 0 0 4px rgba(255,255,255,.8); }
.p-label { font: 500 10.5px var(--sans); color: rgba(90,70,40,.8); white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px #fff; }
body[data-base="satellite"] .c-label, body[data-base="satellite"] .p-label { color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
body[data-base="satellite"] .n-label { color: rgba(255,255,255,.75); text-shadow: 0 0 4px #000; }
body[data-base="satellite"] .f-label { text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 8px #fff; }
.leaflet-container { font-family: var(--sans); }
.pin { border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.pin.disputed { border-style: dashed; border-color: #fff; outline: 2px dashed var(--c); outline-offset: 2px; }
.pin.sq { border-radius: 3px; }

@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; }
  #panel { display: none; }
  #map { grid-column: 1; }
  #menuBtn { display: block; }
  #panel.open { display: block; position: fixed; inset: 58px 0 auto 0; max-height: 70%; border-radius: 0 0 16px 16px; box-shadow: var(--shadow); }
  .brand p { display: none; }
  #detail, body[data-layout="float"] #detail { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; transform: none; max-height: 55%; }
  #legend { display: none; }
}