/* 실제 지도 (map.js) — SVG 지도는 크기 기준으로 그대로 두고 그 위에 Leaflet을 덮음 */
.map-wrap.lf .lmap{position:absolute; inset:0; z-index:0; background:var(--surface); font:500 12px var(--body); opacity:0; pointer-events:none; transition:opacity .4s}
.map-wrap.lf-on .lmap{opacity:1; pointer-events:auto}
.map-wrap.lf-on svg.map{visibility:hidden}
.map-wrap.lf-edit .lmap{pointer-events:none}
.map-wrap .lmap svg{width:auto; height:auto; max-width:none; max-height:none} /* trip.css의 .map-wrap svg 규칙 무효화 */
.map-wrap.lf .map-cap{z-index:2; pointer-events:none}
.map-wrap.lf-on .map-cap{left:12px; bottom:12px; max-width:calc(100% - 150px); padding:4px 10px; border-radius:99px;
  background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--fg); box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* 타일 이음새 흰 선 방지: leaflet 기본 plus-lighter가 밝은 배경과 더해짐 */
.lmap img.leaflet-tile{mix-blend-mode:normal}

/* 다크 모드: 타일만 어둡게 */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lmap .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.55)}}
:root[data-theme="dark"] .lmap .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.55)}

/* 경로 */
.lmap .lf-full,.lmap .lf-prog{stroke:var(--c)}
.lmap .lf-prog{transition:none}

/* 마커: 번호 원 + 이름 */
.lf-mk{background:none; border:0}
.lf-mk b{position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:2.5px solid var(--c);
  color:var(--c); font:600 12px/1 var(--mono); box-shadow:0 1px 4px rgba(0,0,0,.18); transition:background .3s, color .3s, transform .3s}
.lf-mk span{position:absolute; top:50%; transform:translateY(-50%); white-space:nowrap; font:600 13px/1 var(--body); color:var(--fg);
  text-shadow:0 0 3px var(--surface),0 0 3px var(--surface),0 0 6px var(--surface)}
.lf-mk span.r{left:calc(100% + 6px)}
.lf-mk span.l{right:calc(100% + 6px)}
.lf-mk .pulse{position:absolute; inset:0; border-radius:50%; background:var(--c); opacity:0}
.lf-mk.done b,.lf-mk.on b{background:var(--c); color:var(--surface)}
.lf-mk.on b{transform:scale(1.18)}
.lf-mk.on .pulse{animation:lfpulse 1.8s ease-out infinite}
@keyframes lfpulse{0%{opacity:.45; transform:scale(1)}100%{opacity:0; transform:scale(2.6)}}

/* 팝업 */
.lmap .leaflet-popup-content-wrapper,.lmap .leaflet-popup-tip{background:var(--surface); color:var(--fg); box-shadow:0 4px 18px rgba(0,0,0,.2)}
.lmap .leaflet-popup-content-wrapper{border-radius:14px}
.lmap .leaflet-popup-content{margin:12px 14px; font:14px/1.45 var(--body)}
.lf-pop{display:grid; gap:3px}
.lf-pop small{font:500 12px var(--mono); color:var(--c)}
.lf-pop a{margin-top:4px; font-weight:600; color:var(--c); text-decoration:none}

/* 컨트롤 */
.lmap .leaflet-control-attribution{background:color-mix(in srgb,var(--surface) 80%,transparent); color:var(--muted); font-size:10.5px; border-top-left-radius:8px}
.lmap .leaflet-control-attribution a{color:inherit}
.lmap .leaflet-bar{border:1px solid var(--line); box-shadow:none}
.lmap .leaflet-bar a{background:var(--surface); color:var(--fg); border-color:var(--line)}
.lf-move{font:600 12px var(--body); padding:7px 12px; border-radius:99px; border:1px solid var(--line); cursor:pointer;
  background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--fg); box-shadow:0 1px 4px rgba(0,0,0,.12)}
.lf-move[aria-pressed="true"]{background:var(--c); color:var(--surface); border-color:var(--c)}
.map-wrap.lf-free{outline:2px solid var(--c); outline-offset:-2px}

/* 휴대폰: 움직임 줄임 (trip.css와 같은 기준) */
@media (max-width:820px), (pointer:coarse){
  .map-wrap.lf-on .map-cap{top:10px; bottom:auto; left:10px; max-width:calc(100% - 20px); font-size:11px}
  .lmap .leaflet-top.leaflet-left{top:auto; bottom:0}
  .lmap .leaflet-top.leaflet-left .leaflet-control{margin:0 0 10px 10px}
  .lf-mk.on .pulse{animation:none; opacity:.25; transform:scale(1.8)}
  .lf-mk span{font-size:12px}
}
@media (prefers-reduced-motion: reduce){ .lf-mk.on .pulse{animation:none} .map-wrap.lf .lmap{transition:none} }