:root {
  --bg: #e8eef3;
  --ocean: #d5e3ee;
  --land: #f7f5ef;
  --land-hover: #ffe9dc;
  --border: #b9c4cc;
  --grid: #c9d1d8;
  --full: #ff7a45;
  --part: #ffc9ae;
  --reg: #ff7a45;
  --city: #1f2a33;
  --city-ring: #fff;
  --panel: #ffffff;
  --ink: #1b242c;
  --ink2: #5b6872;
  --line: #e3e8ec;
  --chip: #f1f4f6;
  --glass: rgba(255,255,255,.88);
  --shadow: 0 6px 24px rgba(20,40,60,.14);
  --halo: rgba(255,255,255,.92);
  --panel-w: 360px;
}
:root[data-theme="dark"] {
  --bg: #0b141c;
  --ocean: #12212d;
  --land: #22313e;
  --land-hover: #3a3733;
  --border: #3a4c5b;
  --grid: #34485a;
  --full: #ff8f5e;
  --part: #7a4a38;
  --reg: #ff8f5e;
  --city: #ffe3d3;
  --city-ring: #0b141c;
  --panel: #16222c;
  --ink: #e8eef2;
  --ink2: #93a3b0;
  --line: #243442;
  --chip: #1e2d39;
  --glass: rgba(22,34,44,.88);
  --shadow: 0 6px 24px rgba(0,0,0,.45);
  --halo: rgba(11,20,28,.9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b141c; --ocean: #12212d; --land: #22313e; --land-hover: #3a3733; --border: #3a4c5b; --grid: #34485a;
    --full: #ff8f5e; --part: #7a4a38; --reg: #ff8f5e; --city: #ffe3d3; --city-ring: #0b141c;
    --panel: #16222c; --ink: #e8eef2; --ink2: #93a3b0; --line: #243442; --chip: #1e2d39;
    --glass: rgba(22,34,44,.88); --shadow: 0 6px 24px rgba(0,0,0,.45); --halo: rgba(11,20,28,.9);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#app { display: flex; height: 100%; }
#mapwrap { position: relative; flex: 1; min-width: 0; overflow: hidden; }
#map { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#map:active { cursor: grabbing; }

/* 지도 레이어 */
.ocean { fill: var(--ocean); }
.cn { fill: var(--land); stroke: none; transition: fill .15s; }
.cn:hover { fill: var(--land-hover); }
.cn.full { fill: var(--full); }
.cn.part { fill: var(--part); }
.cn.full:hover, .cn.part:hover { filter: brightness(1.06); }
.rv { fill: var(--reg); stroke: none; pointer-events: none; }
.rg { fill: transparent; stroke: var(--grid); stroke-width: .6; vector-effect: non-scaling-stroke; }
.rg:hover { fill: rgba(255,122,69,.28); stroke: var(--full); }
.grid { display: none; }
.zr .grid { display: inline; }
.borders { fill: none; stroke: var(--border); stroke-width: .7; vector-effect: non-scaling-stroke; pointer-events: none; stroke-linejoin: round; }
.sphere-line { fill: none; stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }

.dot { fill: var(--city); stroke: var(--city-ring); stroke-width: 1.2; cursor: pointer; }
.dot.big { r: 3.6; }
.dot.v { fill: var(--full); stroke: var(--city-ring); stroke-width: 1.8; r: 5.5; }
.dot:hover { r: 6; }
.tiny { fill: none; stroke: var(--full); stroke-width: 2; pointer-events: none; }
.tiny.cityless { fill: var(--full); fill-opacity: .25; }
.lbl { font-size: 11px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--halo); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; text-anchor: middle; }
.lbl.cl { font-size: 10px; font-weight: 500; fill: var(--ink2); letter-spacing: .01em; }
.lbl.rl { font-size: 10.5px; font-weight: 500; fill: var(--ink2); opacity: .9; }
.lbl.rl.on { fill: var(--ink); font-weight: 700; opacity: 1; }
.lbl.ct { font-size: 10px; font-weight: 500; fill: var(--ink); text-anchor: start; opacity: .85; }
.cd { fill: var(--ink2); stroke: var(--halo); stroke-width: 1; pointer-events: none; }
.lbl.cv { font-weight: 700; text-anchor: start; }

/* 부유 UI */
#search { position: absolute; top: 14px; left: 14px; width: min(380px, calc(100% - 28px - 56px)); z-index: 5; }
#search > .ic { position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; color: var(--ink2); pointer-events: none; z-index: 1; }
#q {
  width: 100%; height: 40px; padding: 0 14px 0 38px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow);
  outline: none; font-size: 15px;
}
#q:focus { border-color: var(--full); }
#q::placeholder { color: var(--ink2); }
#results {
  list-style: none; margin: 6px 0 0; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow); max-height: min(60vh, 440px); overflow: auto;
}
#results li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
#results li.on, #results li:hover { background: var(--chip); }
#results .t { flex: none; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--chip); color: var(--ink2); }
#results li.on .t, #results li:hover .t { background: var(--panel); }
#results .nm { flex: 1; min-width: 0; }
#results .nm b { font-weight: 600; }
#results .nm small { display: block; color: var(--ink2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#results .ck { flex: none; color: var(--full); font-weight: 700; }
#results .none { color: var(--ink2); cursor: default; justify-content: center; }

#tools { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
#tools button {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); cursor: pointer;
  display: grid; place-items: center; font-size: 20px; line-height: 1; padding: 0;
}
#tools button:hover { border-color: var(--full); }
#ptoggle { display: none !important; }

#legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  padding: 8px 12px; border-radius: 12px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12px; max-width: calc(100% - 28px);
}
#legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); }
#legend em { font-style: normal; color: var(--ink2); flex-basis: 100%; font-size: 12px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sw.full { background: var(--full); }
.sw.part { background: var(--part); }
.sw.reg { background: var(--reg); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--part); }
.sw.city { background: var(--full); border-radius: 50%; box-shadow: 0 0 0 2px var(--city-ring), 0 0 0 3px var(--full); width: 8px; height: 8px; margin: 0 2px; }

#tip {
  position: absolute; z-index: 8; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--panel);
  font-size: 12.5px; white-space: nowrap; box-shadow: var(--shadow); transform: translate(12px, 14px);
}
#tip small { opacity: .7; margin-left: 6px; }

#banner {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
  padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--panel); box-shadow: var(--shadow); max-width: calc(100% - 28px);
}
#banner button { border: 0; border-radius: 8px; padding: 5px 11px; cursor: pointer; background: var(--full); color: #fff; font-weight: 600; }
#banner button.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }

#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30; display: flex; gap: 12px; align-items: center;
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--panel); box-shadow: var(--shadow); max-width: calc(100% - 28px);
}
#toast button { border: 0; background: transparent; color: var(--full); font-weight: 700; cursor: pointer; padding: 0; }

/* 오른쪽 패널 */
#panel {
  width: var(--panel-w); flex: none; background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain;
  transition: margin-right .25s;
}
body.pclosed #panel { margin-right: calc(var(--panel-w) * -1); }
.sec { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.sec h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink2); letter-spacing: .02em; }
.hero { display: flex; align-items: baseline; gap: 8px; }
.hero .n { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero .of { color: var(--ink2); font-size: 15px; }
.hero .pc { margin-left: auto; font-weight: 700; color: var(--full); }
.bar { height: 8px; border-radius: 99px; background: var(--chip); overflow: hidden; margin: 10px 0 14px; }
.bar > i { display: block; height: 100%; background: var(--full); border-radius: 99px; transition: width .35s; }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mini { background: var(--chip); border-radius: 10px; padding: 8px 10px; }
.mini b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.mini span { color: var(--ink2); font-size: 12px; }
.conts { display: grid; gap: 7px; }
.cont { display: grid; grid-template-columns: 74px 1fr 46px; gap: 8px; align-items: center; font-size: 12.5px; }
.cont .bar { margin: 0; height: 6px; }
.cont span:last-child { text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }

.empty { color: var(--ink2); padding: 8px 0; }
.group { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.group > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; }
.group > summary::-webkit-details-marker { display: none; }
.group > summary .fl { font-size: 18px; }
.group > summary .gn { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--part); color: var(--ink); }
.tag.full { background: var(--full); color: #fff; }
.x { border: 0; background: transparent; color: var(--ink2); cursor: pointer; width: 24px; height: 24px; border-radius: 6px; font-size: 16px; line-height: 1; flex: none; }
.x:hover { background: var(--chip); color: var(--ink); }
.items { border-top: 1px solid var(--line); padding: 4px 8px 8px; }
.it { display: flex; align-items: center; gap: 8px; padding: 5px 4px; }
.it .k { flex: none; width: 34px; font-size: 11px; color: var(--ink2); }
.it .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.it .nm:hover { color: var(--full); }
.it input { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 2px 6px; height: 26px; outline: none; }
.it input:focus { border-color: var(--full); }
.it .yr { width: 56px; text-align: center; }
.note { margin: 0 4px 4px 42px; }
.note input { width: calc(100% - 4px); font-size: 12.5px; }

.sec.auth { padding: 12px 20px; font-size: 12.5px; color: var(--ink2); display: grid; gap: 6px; }
.sec.auth .who { display: flex; align-items: center; gap: 10px; }
.sec.auth .who b { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec.auth .ok { color: #1f9d55; font-weight: 600; }
.sec.auth .bad { color: #d33; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; height: 38px; cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--full); }
.btn.pri { background: var(--full); border-color: var(--full); color: #fff; }
.btn.danger { color: #d33; grid-column: span 2; font-weight: 500; height: 34px; }
.credit { padding: 14px 20px 24px; color: var(--ink2); font-size: 11.5px; }

@media (max-width: 760px) {
  #ptoggle { display: grid !important; }
  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: 62vh; z-index: 20; border-left: 0; border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); transform: translateY(0); transition: transform .28s; margin-right: 0 !important;
  }
  body.pclosed #panel { transform: translateY(105%); }
  #legend { bottom: 12px; font-size: 11.5px; }
  body:not(.pclosed) #legend { display: none; }
  #toast { bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }