/* 가상 반도 지도: 캐릭터 만들기 지역구 고르기 · 지역구 옮기기 · 개표 지도. js/geo.js */
:root { --geo-land: #D9D2C2; --geo-swing: #CFC8B8; --geo-dawn1: color-mix(in srgb, #6D4FD1 45%, #F5F3EE); --geo-dawn2: color-mix(in srgb, #6D4FD1 80%, #F5F3EE);
  --geo-sturdy1: color-mix(in srgb, #C27A12 45%, #F5F3EE); --geo-sturdy2: color-mix(in srgb, #C27A12 85%, #F5F3EE); --geo-sea: #DCE9F0; --geo-mark: #141414; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --geo-land: #4A463F; --geo-swing: #57524A; --geo-dawn1: color-mix(in srgb, #8E74F0 45%, #1A1A1C); --geo-dawn2: color-mix(in srgb, #8E74F0 85%, #1A1A1C);
  --geo-sturdy1: color-mix(in srgb, #E29A2E 45%, #1A1A1C); --geo-sturdy2: color-mix(in srgb, #E29A2E 85%, #1A1A1C); --geo-sea: #16232B; --geo-mark: #F2F0EA; } }
:root[data-theme="dark"] { --geo-land: #4A463F; --geo-swing: #57524A; --geo-dawn1: color-mix(in srgb, #8E74F0 45%, #1A1A1C); --geo-dawn2: color-mix(in srgb, #8E74F0 85%, #1A1A1C);
  --geo-sturdy1: color-mix(in srgb, #E29A2E 45%, #1A1A1C); --geo-sturdy2: color-mix(in srgb, #E29A2E 85%, #1A1A1C); --geo-sea: #16232B; --geo-mark: #F2F0EA; }

.geo-map { display: block; width: 100%; height: auto; background: var(--geo-sea); border-radius: 10px; }
.geo-map rect[data-r] { cursor: pointer; }
.geo-map .gm-mark { fill: none; stroke: var(--geo-mark); stroke-width: .3; }
.geo-map .gm-dot { fill: var(--geo-mark); opacity: .55; cursor: pointer; } .geo-map .gm-dot.on { opacity: 1; }
.geo-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.geo-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.geo-create { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px; align-items: start; }
.geo-create .geo-left { min-width: 0; }
.geo-create .geo-right { min-width: 0; display: grid; gap: 8px; }
.geo-regs { display: flex; flex-wrap: wrap; gap: 5px; }
.geo-reg { appearance: none; border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 4px 10px; font: 800 12px var(--head); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.geo-reg::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--lf); }
.geo-reg.on { border-color: var(--acc); }
.geo-info { margin: 0; font-size: 12.5px; color: var(--muted); } .geo-info b { color: var(--ink); }
.geo-info .lean { font-style: normal; font-weight: 800; }
.geo-info .lean.l-2, .geo-info .lean.l-1 { color: #6D4FD1; } .geo-info .lean.l1, .geo-info .lean.l2 { color: #B06C0C; }
.geo-dists .geo-opt { text-align: left; }
.geo-dists .geo-opt .geo-type { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.geo-create.in-sheet { margin: 8px 0; }
@media (max-width: 420px) { .geo-create { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); gap: 10px; } .geo-reg { padding: 3px 8px; font-size: 11.5px; } }

.geo-nat { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 10px; align-items: start; margin: 8px 0; }
.geo-nat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 3px 8px; font-size: 12px; }
.geo-nat li { display: flex; align-items: center; gap: 5px; min-width: 0; } .geo-nat li.mine { font-weight: 800; }
.geo-nat li i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
/* 작은 지도(js/geo.js geoMini): 대선 개표 칸에 그 광역 자리를 보인다. 개표 화면은 늘 어두운 TV 배경 */
.geo-mini { --geo-mini-on: rgba(255,255,255,.92); --geo-mini-off: rgba(255,255,255,.34); background: none; border-radius: 0; pointer-events: none; }
.tile.has-mini { padding-left: 27px; }
.tile .geo-mini { position: absolute; left: 5px; top: 50%; width: 18px; transform: translateY(-50%); }