/* ── 스킨 (클로드코드/map_template.html 과 같은 9종) ── */
:root {
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --border:#2a3140; --text:#e6edf3; --dim:#8b96a5;
  --accent:#f6465d; --gold:#f0b90b; --radius:8px; --font:"Pretendard","Malgun Gothic","Segoe UI",sans-serif;
  --casing:#0d1117; --st-fill:#0d1117; --st-stroke:#e6edf3; --lbl:#e6edf3; --halo:#0d1117;
  --shadow: 0 2px 10px rgba(0,0,0,.45);
  --w: 340px;
  --measure:#ff4f2e; --area:#3d7cff; --circle:#9a4dff;
}
[data-theme="white"]  { --bg:#f5f7fa; --panel:#ffffff; --panel2:#eef1f6; --border:#d5dbe4; --text:#1a2332; --dim:#6b7688; --accent:#e0334b; --gold:#c58a00;
                        --casing:#ffffff; --st-fill:#ffffff; --st-stroke:#222; --lbl:#1a2332; --halo:#ffffff; --shadow: 0 1px 4px rgba(0,0,0,.18), 0 2px 10px rgba(0,0,0,.08); }
[data-theme="pink"]   { --bg:#2a1522; --panel:#3a1c30; --panel2:#4a2440; --border:#6b3557; --text:#ffe6f4; --dim:#d89cc0; --accent:#ff5c8a; --gold:#ffb84d;
                        --casing:#2a1522; --st-fill:#2a1522; --st-stroke:#ffe6f4; --lbl:#ffe6f4; --halo:#2a1522; }
[data-theme="neon"]   { --bg:#05060a; --panel:#0b0f1a; --panel2:#0f1524; --border:#1e2b4d; --text:#c8faff; --dim:#5a9fb5; --accent:#ff2079; --gold:#faff00;
                        --casing:#05060a; --st-fill:#05060a; --st-stroke:#c8faff; --lbl:#c8faff; --halo:#05060a; }
[data-theme="win95"]  { --bg:#008080; --panel:#c0c0c0; --panel2:#d4d0c8; --border:#808080; --text:#000000; --dim:#404040; --accent:#c00000; --gold:#000080;
                        --radius:0; --font:"Tahoma","MS Sans Serif",sans-serif; --casing:#ffffff; --st-fill:#ffffff; --st-stroke:#000; --lbl:#000; --halo:#fff; }
[data-theme="win98"]  { --bg:#3a6ea5; --panel:#c0c0c0; --panel2:#d4d0c8; --border:#808080; --text:#000000; --dim:#404040; --accent:#c00000; --gold:#000080;
                        --radius:0; --font:"Tahoma","MS Sans Serif",sans-serif; --casing:#ffffff; --st-fill:#ffffff; --st-stroke:#000; --lbl:#000; --halo:#fff; }
[data-theme="eclipse"]{ --bg:#2f2f3a; --panel:#3a3a48; --panel2:#434352; --border:#55556a; --text:#e8e8ea; --dim:#a0a0b0; --accent:#cc7832; --gold:#ffc66d;
                        --casing:#2f2f3a; --st-fill:#2f2f3a; --st-stroke:#e8e8ea; --lbl:#e8e8ea; --halo:#2f2f3a; }
[data-theme="gore"]   { --bg:#080000; --panel:#150303; --panel2:#1f0606; --border:#420b0b; --text:#e7cfcf; --dim:#9a6363; --accent:#ff1717; --gold:#b02a1e;
                        --font:"Georgia",serif; --casing:#080000; --st-fill:#080000; --st-stroke:#e7cfcf; --lbl:#e7cfcf; --halo:#080000; }
[data-theme="maple"]  { --bg:#20331a; --panel:#2c4322; --panel2:#38542c; --border:#5f7f42; --text:#fff7e6; --dim:#c9daa9; --accent:#ff6f91; --gold:#ffa726;
                        --casing:#20331a; --st-fill:#20331a; --st-stroke:#fff7e6; --lbl:#fff7e6; --halo:#20331a; }

/* 스킨별 일반 지도 색 (map_template.html 과 같은 값) */
:root                  { --tile-filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55); }
[data-theme="white"]   { --tile-filter: saturate(.85) brightness(1.03); }
[data-theme="pink"]    { --tile-filter: invert(1) hue-rotate(180deg) sepia(.8) hue-rotate(275deg) saturate(2.5) brightness(1.2) contrast(.8); }
[data-theme="neon"]    { --tile-filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(1.1) saturate(1.4); }
[data-theme="win95"]   { --tile-filter: grayscale(.7) sepia(.35) hue-rotate(125deg) saturate(1.5) brightness(.97) contrast(1.1); }
[data-theme="win98"]   { --tile-filter: grayscale(.7) sepia(.35) hue-rotate(170deg) saturate(1.5) brightness(.97) contrast(1.1); }
[data-theme="eclipse"] { --tile-filter: invert(1) hue-rotate(180deg) sepia(.5) hue-rotate(200deg) saturate(1.2) brightness(1.15) contrast(.8); }
[data-theme="gore"]    { --tile-filter: invert(1) hue-rotate(180deg) sepia(1) hue-rotate(-40deg) saturate(4) brightness(1.1) contrast(.9); }
[data-theme="maple"]   { --tile-filter: invert(1) hue-rotate(180deg) sepia(.7) hue-rotate(50deg) saturate(1.8) brightness(1.1) contrast(.8); }

/* 스킨별 위성 사진 색 (사진이 알아볼 수 있게 살짝만 물들임) */
:root                  { --sat-filter: brightness(.78) saturate(.85); }
[data-theme="white"]   { --sat-filter: none; }
[data-theme="pink"]    { --sat-filter: sepia(.35) hue-rotate(290deg) saturate(1.3) brightness(.9); }
[data-theme="neon"]    { --sat-filter: brightness(.6) contrast(1.25) saturate(1.4) hue-rotate(-15deg); }
[data-theme="win95"]   { --sat-filter: sepia(.3) hue-rotate(120deg) saturate(1.2); }
[data-theme="win98"]   { --sat-filter: sepia(.3) hue-rotate(170deg) saturate(1.2); }
[data-theme="eclipse"] { --sat-filter: brightness(.8) sepia(.3) hue-rotate(200deg); }
[data-theme="gore"]    { --sat-filter: sepia(.7) hue-rotate(-40deg) saturate(2.2) brightness(.75); }
[data-theme="maple"]   { --sat-filter: sepia(.35) hue-rotate(40deg) saturate(1.3) brightness(.92); }
/* 위성 모드: 사진 위에서 잘 보이는 선/글자 색 */
body.sat { --casing: rgba(0,0,0,.65); --st-fill:#ffffff; --st-stroke:#111111; --lbl:#ffffff; --halo:#000000; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); }
button, input { font-family: inherit; }

/* 필터는 타일 이미지 하나하나에 */
.base-tiles img.leaflet-tile { filter: var(--tile-filter); }
body.sat .base-tiles img.leaflet-tile { filter: var(--sat-filter); }
.dim-muted .base-tiles { opacity: .55; }
.dim-none .base-tiles, .dim-none .label-tiles { display: none; }

#map { position: fixed; top: 0; bottom: 0; right: 0; left: var(--w); background: var(--bg); transition: left .2s; }
body.collapsed #map { left: 0; }
#map.tool, #map.tool .leaflet-interactive { cursor: crosshair; }
.leaflet-container { font-family: var(--font); background: var(--bg); }
.leaflet-container .leaflet-control-attribution { background: var(--panel); color: var(--dim); opacity: .85; font-size: 10px; }
.leaflet-container .leaflet-control-attribution a { color: var(--dim); }
.leaflet-control-scale-line { border-color: var(--text); color: var(--text); background: color-mix(in srgb, var(--panel) 80%, transparent); font-size: 11px; }

/* ── 좌측 패널 ── */
#panel { position: fixed; top: 0; left: 0; bottom: 0; width: var(--w); background: var(--panel); z-index: 1000;
  border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .2s; }
body.collapsed #panel { transform: translateX(-100%); }
#panel header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
#panel h1 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.3px; }
#panel h1 b { color: var(--accent); }
.modebar { display: flex; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.modebar a { flex: 1; text-align: center; padding: 5px 0; font-size: 12px; font-weight: 700; color: var(--dim); text-decoration: none; }
.modebar a + a { border-left: 1px solid var(--border); }
.modebar a.active { background: var(--accent); color: #fff; }
.modebar a:not(.active):hover { background: var(--panel2); color: var(--text); }
.themebar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.theme-btn { background: transparent; border: 1px solid var(--border); color: var(--dim); padding: 3px 8px; border-radius: var(--radius);
  font-size: 11px; font-weight: 700; cursor: pointer; }
.theme-btn:hover { background: var(--panel2); color: var(--text); }
.theme-btn.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.search { position: relative; }
.search input { width: 100%; padding: 9px 32px 9px 10px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 13px; outline: none; }
.search input:focus { border-color: var(--accent); }
.search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--dim); font-size: 14px; cursor: pointer; display: none; }
.search.has-q button { display: block; }
#stats { padding: 6px 16px; font-size: 11px; color: var(--dim); border-bottom: 1px solid var(--border); }
#panelBody { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; font-size: 12px; color: var(--dim); font-weight: 700; }
.sec-h label { display: flex; gap: 4px; align-items: center; font-weight: 400; cursor: pointer; }
.row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; cursor: pointer; font-size: 13px; }
.row:hover, .row.hl { background: var(--panel2); }
.row input { margin: 0; accent-color: var(--accent); }
.row .nm { flex: 1; min-width: 0; }
.row .nm small { display: block; color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .km { font-size: 11px; color: var(--dim); white-space: nowrap; }
.chip { min-width: 26px; height: 18px; border-radius: 9px; color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; padding: 0 5px; flex: none;
  text-shadow: 0 0 2px rgba(0,0,0,.5); }
.st-ico { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--text); background: var(--bg); flex: none; margin: 0 6px; }
.st-ico.tr { border-width: 4px; width: 16px; height: 16px; }
.empty { padding: 20px 16px; color: var(--dim); font-size: 13px; }
.rank { width: 20px; text-align: right; color: var(--dim); font-size: 11px; font-weight: 700; }

/* 노선 상세 */
.ld-head { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ld-back { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0; font-size: 12px; margin-bottom: 8px; }
.ld-back:hover { color: var(--text); }
.ld-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.ld-sub { color: var(--dim); font-size: 12px; margin-top: 2px; }
.ld-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--dim); }
.ld-stats b { color: var(--text); font-size: 15px; display: block; }
.stops { position: relative; padding: 10px 0 10px; }
.stop { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 5px 16px 5px 46px; cursor: pointer; min-height: 34px; }
.stop:hover { background: var(--panel2); }
.stop::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 6px; background: var(--lc); }
.stop:first-child::before { top: 50%; }
.stop:last-child::before { bottom: 50%; }
.stop .dot { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--panel);
  border: 3px solid var(--lc); }
.stop.tr .dot { border-color: var(--text); width: 18px; height: 18px; left: 19px; border-width: 4px; }
.stop .snm { font-size: 13px; line-height: 1.3; }
.stop .snm small { display: block; color: var(--dim); font-size: 11px; }
.stop .xf { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.stop .xf .chip { height: 15px; font-size: 9px; min-width: 20px; cursor: pointer; }
.sub-h { padding: 10px 16px 4px; font-size: 12px; color: var(--dim); font-weight: 700; }

#toggle { position: fixed; top: 50%; left: var(--w); transform: translateY(-50%); z-index: 1000; width: 22px; height: 48px; border: 1px solid var(--border); border-left: 0;
  background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; color: var(--dim); transition: left .2s; padding: 0; }
body.collapsed #toggle { left: 0; }
body.collapsed #toggle span { display: inline-block; transform: scaleX(-1); }

/* ── 지도 위 라벨 ── */
.lbl-wrap { background: none; border: 0; }
.pt-lbl { position: absolute; left: 8px; top: -22px; background: var(--panel); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 11px; color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.25); white-space: nowrap; }
.total { position: absolute; left: 10px; top: 6px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: calc(var(--radius) * .75); box-shadow: var(--shadow);
  padding: 8px 30px 8px 12px; font-size: 12px; line-height: 1.55; min-width: 140px; white-space: nowrap; }
.total b { font-size: 15px; color: var(--measure); }
.total.area b { color: var(--area); }
.total.circle b { color: var(--circle); }
.total .r { color: var(--dim); }
.total .r span { color: var(--text); font-weight: 600; margin-left: 4px; }
.x { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--panel2); cursor: pointer;
  font-size: 12px; line-height: 18px; padding: 0; color: var(--dim); }
.x:hover { background: var(--accent); color: #fff; }
.memo { position: absolute; left: -12px; bottom: 12px; background: #fffbe6; color: #222; border: 1px solid #f0d36b; border-radius: 6px; padding: 6px 28px 6px 10px; font-size: 13px;
  box-shadow: var(--shadow); max-width: 260px; width: max-content; white-space: pre-wrap; }
.memo::after { content: ""; position: absolute; left: 12px; bottom: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #f0d36b; }
.memo .x { top: 4px; right: 4px; background: #f5ecc4; color: #886; }
.memo-input { position: absolute; left: -10px; top: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; display: flex; gap: 4px; }
.memo-input input { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 4px; padding: 5px 8px; font-size: 13px; width: 200px; outline: none; }
.memo-input button { border: 0; background: var(--accent); color: #fff; border-radius: 4px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.st-lbl { position: absolute; left: 7px; top: -9px; font-size: 11px; font-weight: 600; color: var(--lbl); white-space: nowrap; pointer-events: none;
  text-shadow: -1px -1px 0 var(--halo), 1px -1px 0 var(--halo), -1px 1px 0 var(--halo), 1px 1px 0 var(--halo), 0 0 3px var(--halo); }
.st-lbl.tr { font-size: 12px; font-weight: 800; }

.leaflet-popup-content-wrapper { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); }
.leaflet-popup-tip { background: var(--panel); }
.leaflet-container a.leaflet-popup-close-button { color: var(--dim); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.5; }
.pop-st h3 { margin: 0; font-size: 15px; }
.pop-st .sub { color: var(--dim); font-size: 12px; margin-bottom: 6px; }
.pop-st .chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 250px; }
.pop-st .chips span { font-size: 11px; padding: 2px 7px; border-radius: 10px; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.5); cursor: pointer; }
/* 역 상세 카드 */
.st-pop .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; }
.st-pop .leaflet-popup-content { margin: 0; width: 340px !important; }
.st-pop a.leaflet-popup-close-button { color: #fff; text-shadow: 0 0 4px #000; z-index: 2; }
.st-card .sc-img { height: 170px; background: #000; }
.st-card .sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-card .sc-bd { padding: 12px 14px 14px; max-height: 360px; overflow-y: auto; }
.st-card h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 6px; padding-right: 14px; }
.st-card .sc-tr { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9px; background: var(--accent); color: #fff; }
.st-card .sc-names { color: var(--dim); font-size: 12px; margin: 1px 0 8px; }
.sc-row { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12px; }
.sc-row .k { width: 62px; flex: none; color: var(--dim); line-height: 1.35; }
.sc-row .v { flex: 1; min-width: 0; }
.sc-row .na { color: var(--dim); opacity: .8; }
.sc-sub + .sc-sub { margin-top: 2px; }
.sc-line { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 4px 0; cursor: pointer; font-weight: 600; }
.sc-line:hover { text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 3px; }
.sc-line .chip { height: 16px; font-size: 9px; min-width: 20px; }
.sc-desc { font-size: 12px; line-height: 1.6; padding-top: 8px; border-top: 1px solid var(--border); opacity: .9; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.sc-link { display: block; margin-top: 10px; text-align: center; padding: 7px; border-radius: var(--radius); background: var(--accent); color: #fff !important; text-decoration: none; font-size: 12px; font-weight: 700; }
.sc-link:hover { filter: brightness(1.1); }
.leaflet-tooltip { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); font-family: var(--font); }
.leaflet-tooltip-top::before { border-top-color: var(--border); }

/* ── 커서 툴팁 ── */
#tip { position: fixed; left: 0; top: 0; pointer-events: none; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: calc(var(--radius) * .6);
  box-shadow: var(--shadow); padding: 6px 9px; font-size: 12px; line-height: 1.5; display: none; z-index: 2000; white-space: nowrap; }
#tip b { color: var(--measure); font-size: 13px; }
#tip .hint { color: var(--dim); font-size: 11px; }

/* ── 우측 컨트롤 ── */
#controls { position: fixed; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 1000;
  max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: visible; scrollbar-width: none; padding: 0 0 2px; }
#controls::-webkit-scrollbar { display: none; }
.group { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; }
.group > button { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--text); position: relative; padding: 0; }
.group > button + button { border-top: 1px solid var(--border); }
.group > button:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.group > button:last-of-type { border-radius: 0 0 var(--radius) var(--radius); }
.group > button:hover { background: var(--panel2); }
.group > button.on { color: var(--accent); background: var(--panel2); }
.group > button svg { width: 22px; height: 22px; }
.group > button .cap { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 9px; letter-spacing: -.3px; }
.group > button.has-cap svg { margin-top: -8px; width: 19px; height: 19px; }
/* 버튼 설명 말풍선 (컨트롤 열이 스크롤 영역이라 ::after 대신 fixed 요소로 띄움) */
#btnTip { position: fixed; z-index: 2100; background: var(--text); color: var(--bg); font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  pointer-events: none; display: none; transform: translateY(-50%); }
/* 팝오버는 버튼 옆에 fixed 로 띄움 (위치는 JS placePop) — 컨트롤 열이 스크롤돼도 잘리지 않게 */
.pop { position: fixed; right: 66px; top: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px; display: none; font-size: 12px; z-index: 1100; max-height: calc(100dvh - 24px); overflow-y: auto; }
.pop.open { display: block; }
#penPop .colors { display: flex; gap: 6px; margin-bottom: 8px; }
#penPop .colors button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
#penPop .colors button.sel { box-shadow: 0 0 0 2px var(--text); }
#penPop label { display: flex; align-items: center; gap: 6px; color: var(--dim); }
#layerPop { width: 200px; }
#layerPop h4 { margin: 0 0 6px; font-size: 12px; color: var(--dim); }
#layerPop label { display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; }
#layerPop input { accent-color: var(--accent); }
#layerPop hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }

/* ── 하단 ── */
#coord { position: fixed; left: calc(50% + var(--w) / 2); bottom: 22px; transform: translateX(-50%); z-index: 1000; background: var(--panel); color: var(--dim);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 11px; font-variant-numeric: tabular-nums; display: none; }
body.collapsed #coord { left: 50%; }
#miniWrap { position: fixed; right: 12px; bottom: 50px; z-index: 1000; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; }
#miniWrap.hide { display: none; }
#mini { width: 180px; height: 140px; border-radius: calc(var(--radius) * .6); cursor: pointer; }
.leaflet-bottom.leaflet-right .leaflet-control-scale { margin-right: 12px; margin-bottom: 4px; }

/* Win95 / Win98 : 입체 버튼 · 각진 테두리 */
:is([data-theme="win95"],[data-theme="win98"]) :is(.theme-btn, #toggle, .group, .ld-back, .memo-input button) { border: 2px outset #fff !important; background: #c0c0c0; color: #000; }
:is([data-theme="win95"],[data-theme="win98"]) .theme-btn.active, :is([data-theme="win95"],[data-theme="win98"]) .modebar a.active { border-style: inset !important; background: #9a9a9a; color: #000;
  box-shadow: inset 2px 2px 3px rgba(0,0,0,.45); }
:is([data-theme="win95"],[data-theme="win98"]) .search input { border: 2px inset #fff; background: #fff; }
:is([data-theme="win95"],[data-theme="win98"]) :is(.row:hover, .row.hl, .stop:hover) { background: #000080; color: #fff; }
:is([data-theme="win95"],[data-theme="win98"]) :is(.row:hover, .row.hl, .stop:hover) small { color: #dcdcdc; }
:is([data-theme="win95"],[data-theme="win98"]) :is(.leaflet-popup-content-wrapper, .total, .pop, #tip) { border: 2px outset #fff; }
[data-theme="win98"] #panel header { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; }
[data-theme="win98"] #panel header h1 b { color: #ffdd55; }
[data-theme="neon"] #panel h1 b { text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent); }
[data-theme="neon"] .theme-btn.active { box-shadow: 0 0 10px var(--gold); color: #000; }
[data-theme="neon"] .group { box-shadow: 0 0 10px rgba(0,255,255,.15); }
[data-theme="gore"] #panel h1 b { text-shadow: 0 2px 0 #5a0000, 0 0 12px #ff000088; }

/* ── 지도 종류 (일반 / 위성 / 지형) ── */
#mapType > button.on { color: #fff; background: var(--accent); }
#mapType > button.on:hover { background: var(--accent); }

/* ── 접속 중인 인원 ── */
#online { position: fixed; top: 12px; right: 66px; z-index: 1000; display: none; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow); font-size: 12px; white-space: nowrap; }
#online.show { display: flex; }
#online i { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: pulse 2s infinite; }
#online.off i { background: var(--dim); animation: none; }
#online b { color: var(--accent); font-size: 13px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55); } 70% { box-shadow: 0 0 0 7px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }

/* ── 진행 중인 측정/노선 만들기: 하단 버튼 (모바일은 더블클릭이 어려움) ── */
#actbar { position: fixed; left: calc(50% + var(--w) / 2); bottom: 52px; transform: translateX(-50%); z-index: 1050; display: none; gap: 6px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); white-space: nowrap; }
body.collapsed #actbar { left: 50%; }
#actbar.show { display: flex; }
#actbar button { border: 1px solid var(--border); background: var(--panel2); color: var(--text); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
#actbar button.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
#actbar .info { align-self: center; font-size: 12px; color: var(--dim); padding: 0 6px; }

/* ── 길찾기 (출발 · 도착) ── */
.hd-btns { display: flex; gap: 6px; margin-top: 8px; }
.hd-btn { flex: 1; border: 1px solid var(--border); background: var(--panel2); color: var(--text); border-radius: var(--radius); padding: 7px 0; font-size: 12px; font-weight: 700; cursor: pointer; }
.hd-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rt { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.rt-in { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 36px; }
.rt-f { position: relative; display: flex; align-items: center; gap: 8px; }
.rt-f input { flex: 1; min-width: 0; padding: 9px 30px 9px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; outline: none; }
.rt-f input:focus { border-color: var(--accent); }
.rt-f .clr { position: absolute; right: 6px; border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 13px; }
.rt-tag { width: 30px; flex: none; text-align: center; font-size: 11px; font-weight: 800; border-radius: 10px; padding: 2px 0; color: #fff; background: #1e88e5; }
.rt-tag.e { background: var(--accent); }
.rt-swap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--panel2); color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; }
.rt-opt { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--dim); }
.rt-opt label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.rt-opt input { accent-color: var(--accent); margin: 0; }
.rt-sug { position: absolute; left: 38px; right: 0; top: 100%; margin-top: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 20; max-height: 280px; overflow-y: auto; }
.rt-sug .row { padding: 7px 10px; }
.rt-sum { margin: 12px 16px 4px; padding: 12px; border-radius: var(--radius); background: var(--panel2); }
.rt-sum .t { font-size: 20px; font-weight: 800; }
.rt-sum .m { font-size: 12px; color: var(--dim); margin-top: 2px; }
.rt-steps { padding: 6px 0 10px; }
.rt-leg { position: relative; padding: 8px 16px 8px 46px; }
.rt-leg::before { content: ""; position: absolute; left: 25px; top: 22px; bottom: -8px; width: 6px; background: var(--lc); border-radius: 3px; }
.rt-leg.walk::before { background: repeating-linear-gradient(var(--dim) 0 4px, transparent 4px 8px); width: 3px; left: 26.5px; }
.rt-leg:last-child::before { display: none; }
.rt-leg .dot { position: absolute; left: 19px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 4px solid var(--lc); }
.rt-leg .st { font-weight: 700; font-size: 14px; cursor: pointer; }
.rt-leg .ln { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 4px; }
.rt-leg .ln small { color: var(--dim); }
.rt-leg details { font-size: 12px; color: var(--dim); margin-top: 4px; }
.rt-leg summary { cursor: pointer; }
.rt-leg details div { padding: 2px 0 2px 4px; }
.sc-rt { display: flex; gap: 6px; margin: 8px 0 2px; }
.sc-rt button { flex: 1; border: 1px solid var(--border); background: var(--panel2); color: var(--text); border-radius: var(--radius); padding: 6px 0; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); }
.sc-rt button.s { border-color: #1e88e5; color: #1e88e5; }
.sc-rt button.e { border-color: var(--accent); color: var(--accent); }
.rt-pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); position: absolute; left: -13px; top: -32px; }
.rt-pin span { transform: rotate(45deg); }

/* ── 나만의 지하철 노선 만들기 ── */
#subPop { width: 250px; }
#subPop h4 { margin: 0 0 6px; font-size: 12px; color: var(--dim); }
#subPop input[type=text] { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 13px; outline: none; margin-bottom: 8px; }
#subPop .colors { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; align-items: center; }
#subPop .colors button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
#subPop .colors button.sel { box-shadow: 0 0 0 2px var(--text); }
#subPop .colors input[type=color] { width: 26px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.pats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.pats button { border: 1px solid var(--border); background: var(--panel2); color: var(--text); border-radius: 4px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
.pats button.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pats svg { width: 90px; height: 12px; }
#subPop .hint { color: var(--dim); font-size: 11px; line-height: 1.5; margin: 4px 0 8px; }
#subPop .mylines { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
#subPop .ml { display: flex; align-items: center; gap: 6px; padding: 4px 0; cursor: pointer; }
#subPop .ml .sw { width: 22px; height: 6px; border-radius: 3px; flex: none; }
#subPop .ml .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#subPop .ml small { color: var(--dim); }
#subPop .ml button { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 0 2px; }
#subPop .ml button:hover { color: var(--accent); }
.sb-st { position: absolute; left: 8px; top: -10px; font-size: 11px; font-weight: 700; color: var(--lbl); white-space: nowrap; pointer-events: none;
  text-shadow: -1px -1px 0 var(--halo), 1px -1px 0 var(--halo), -1px 1px 0 var(--halo), 1px 1px 0 var(--halo), 0 0 3px var(--halo); }
.sb-st.new { font-style: italic; opacity: .8; }

/* 사진이 없는 역: 위성 사진으로 대신 */
.st-card .sc-img { position: relative; }
.st-card .sc-img .cap { position: absolute; right: 6px; bottom: 6px; font-size: 10px; color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 8px; }

/* 팝업창 닫기 ✕ */
.pop-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--panel2); color: var(--dim);
  cursor: pointer; font-size: 12px; line-height: 22px; padding: 0; z-index: 2; }
.pop-x:hover { background: var(--accent); color: #fff; }
.pop h4:first-of-type { padding-right: 26px; }
#penPop { padding-top: 32px; }

/* ── 다운로드 · 공유 (오른쪽 아래) ── */
#dock { position: fixed; right: 12px; bottom: 50px; z-index: 1000; flex-direction: row; }
body.mini-on #dock { right: 212px; }
.group.row > button + button { border-top: 0; border-left: 1px solid var(--border); }
.group.row > button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.group.row > button:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; }
body:not(.mini-on) #controls { max-height: calc(100dvh - 140px); }
#dlPop, #sharePop { width: 280px; }
#dlPop h4, #sharePop h4 { margin: 0 0 8px; font-size: 12px; color: var(--dim); }
.dl-item { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--panel2); color: var(--text); border-radius: var(--radius);
  padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-family: var(--font); }
.dl-item:hover { border-color: var(--accent); }
.dl-item b { display: block; font-size: 13px; }
.dl-item small { color: var(--dim); font-size: 11px; }
.sh-row { display: flex; gap: 4px; }
.sh-row input { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 4px; padding: 6px 8px; font-size: 12px; outline: none; }
.sh-row button { border: 0; background: var(--accent); color: #fff; border-radius: 4px; padding: 0 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sh-len { color: var(--accent); font-size: 11px; margin: 3px 0 0; }
#sharePop label { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--dim); cursor: pointer; }
#sharePop label input { accent-color: var(--accent); margin: 0; }
.sh-sns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.sh-sns button { flex: 1 1 auto; border: 1px solid var(--border); background: var(--panel2); color: var(--text); border-radius: 4px; padding: 6px 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sh-sns button:hover { border-color: var(--accent); }

/* ── 모바일 ── */
#scrim { display: none; }
.mob-only { display: none !important; }
@media (max-width: 700px) {
  :root { --w: min(88vw, 360px); }
  #map { left: 0 !important; }
  #coord, #miniWrap, #miniBtn, #fitAll, #fsBtn, #fitJapan { display: none !important; }
  .mob-only { display: inline-flex !important; }
  /* 패널을 열면 지도 위에 반투명 막 → 막을 누르거나 ✕ 로 닫기 */
  #scrim { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.35); opacity: 1; transition: opacity .2s; }
  body.collapsed #scrim { opacity: 0; pointer-events: none; }
  #panel { z-index: 1200; box-shadow: var(--shadow); }
  #panel header { padding: 12px 14px 10px; }
  .pn-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--panel2); color: var(--text);
    font-size: 16px; cursor: pointer; align-items: center; justify-content: center; }
  /* 펼치기 버튼: 왼쪽 위 동그란 메뉴 버튼 */
  #toggle { top: 12px; left: 12px !important; transform: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); }
  body:not(.collapsed) #toggle { display: none; }
  #toggle span { display: none !important; }
  #toggle::before { content: "☰"; font-size: 20px; }
  #controls { right: 8px; top: 8px; gap: 6px; max-height: calc(100dvh - 16px); }
  .group > button { width: 40px; height: 40px; }
  .group > button.has-cap svg { width: 17px; height: 17px; }
  #online { right: 56px; top: 8px; height: 28px; padding: 0 9px; }
  #dock, body.mini-on #dock { right: 8px; bottom: 30px; }
  #controls, body:not(.mini-on) #controls { max-height: calc(100dvh - 104px); }
  .pop { right: 56px; max-width: calc(100vw - 72px); }
  #actbar, body.collapsed #actbar { left: 50%; bottom: 86px; }
  .st-pop .leaflet-popup-content { width: min(340px, calc(100vw - 70px)) !important; }
  .st-card .sc-img { height: 140px; }
  .st-card .sc-bd { max-height: 46dvh; }
  #toast { max-width: calc(100vw - 24px); white-space: normal; }
  /* 패널이 열려 있으면 오른쪽 버튼 · 접속자 표시는 숨김 */
  body:not(.collapsed) #controls, body:not(.collapsed) #online, body:not(.collapsed) #dock, body:not(.collapsed) .pop.open { visibility: hidden; }
  .total { min-width: 120px; padding: 6px 26px 6px 10px; }
  .row, .stop { min-height: 40px; }
}
@media (hover: none) { #btnTip { display: none !important; } }

/* 벡터 지도: 스킨 색 필터 · 밝기 (위성 위 지명 레이어는 제외) */
body:not(.sat) .leaflet-gl-layer { filter: var(--tile-filter); }
body:not(.sat) .dim-muted .leaflet-gl-layer { opacity: .55; }
body:not(.sat) .dim-none .leaflet-gl-layer { display: none; }
/* 흑백 지도: 바탕만 흑백 (스킨 색 위에 채도 0) → 컬러 노선이 또렷하게 */
body.gray .base-tiles img.leaflet-tile, body.gray .leaflet-gl-layer { filter: var(--tile-filter) grayscale(1) contrast(.92); }
#toast { position: fixed; left: 50%; top: 14px; transform: translate(-50%, calc(-100% - 30px)); z-index: 3000; background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 14px; font-size: 12px; transition: transform .25s; pointer-events: none; }
#toast.show { transform: translate(-50%, 0); }
#toast.err { border-color: var(--accent); }

/* ── 나무위키 발췌 (역 카드 · 노선 패널) ── */
.nm { padding-top: 8px; border-top: 1px solid var(--border); }
.nm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.nm-tab { border: 1px solid var(--border); background: var(--panel2); color: var(--dim); border-radius: 11px; padding: 2px 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font); }
.nm-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.nm-body { display: none; font-size: 12px; line-height: 1.65; max-height: 11.5em; overflow: hidden; position: relative; word-break: keep-all; overflow-wrap: anywhere; }
.nm-body.on { display: block; }
.nm-body p { margin: 0 0 6px; }
.nm.open .nm-body { max-height: none; }
/* 접힌 상태: 흐림(그라데이션) 없이 마지막으로 다 보이는 줄에서 딱 자름 (높이는 JS 가 줄 단위로 맞춤) */
.nm-more { margin-top: 4px; border: 0; background: none; color: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; font-family: var(--font); }
.nm-lic { margin-top: 6px; font-size: 10px; color: var(--dim); }
.sc-links { display: flex; gap: 6px; margin-top: 10px; }
.sc-links .sc-link { flex: 1; margin-top: 0; }
.sc-link.namu { background: #00a495; }
.sc-link2 { flex: none; display: flex; align-items: center; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--border); color: var(--text) !important; text-decoration: none; font-size: 12px; font-weight: 700; }
.sc-link2:hover { background: var(--panel2); }
.st-card .sc-bd { max-height: 430px; }
.ld-nm { margin-top: 12px; }
.ld-nm .sc-link { margin-top: 8px; }
.ld-plan { margin-top: 10px; font-size: 12px; padding: 7px 9px; border-radius: var(--radius); background: var(--panel2); color: var(--dim); }

/* ── 나라별 묶음 ── */
.cc-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-top: 6px; background: var(--panel2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; position: sticky; top: 0; z-index: 2; }
.cc-h label { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; cursor: pointer; }
.cc-h input { accent-color: var(--accent); margin: 0; }
.cc-tag { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px; background: var(--accent); color: #fff; letter-spacing: .5px; }
.cc-n { margin-left: auto; font-size: 11px; color: var(--dim); }
.cc-arrow { color: var(--dim); transition: transform .15s; }
.cc-h.folded .cc-arrow { transform: rotate(-90deg); }
.st-lbl.fut { opacity: .75; font-style: italic; }
.sc-tr.fut { background: var(--dim); }
.btn-txt { font-size: 11px; font-weight: 800; }