/* 뷰어에 새 디자인 규칙 입히기 (배치는 그대로, 색·글꼴·모서리만) */
:root{
  --bg:var(--canvas); --panel:var(--lifted); --text:var(--ink); --sel:var(--whisper);
  --accent:#141413; --accent-soft:var(--white); --track:#F37338; --other:#C9C1B8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--canvas); --panel:var(--lifted); --line:rgba(243,240,238,.12); --text:var(--ink); --muted:#A39E98;
    --sel:var(--whisper); --accent:#F3F0EE; --accent-soft:var(--white); --track:#F37338; --other:#5E5953;
  }
}
:root[data-theme="dark"]{
  --bg:var(--canvas); --panel:var(--lifted); --line:rgba(243,240,238,.12); --text:var(--ink); --muted:#A39E98;
  --sel:var(--whisper); --accent:#F3F0EE; --accent-soft:var(--white); --track:#F37338; --other:#5E5953;
}
:root{--line:rgba(20,20,19,.10); --muted:#696969}

html,body{font-family:var(--font);font-weight:450;-webkit-font-smoothing:antialiased}
header{background:var(--canvas);border-bottom:0;padding:12px 20px}
header h1{font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
header h1::before{content:"";width:28px;height:28px;border-radius:7px;flex:none;background:url("icon.svg") center/100% no-repeat;box-shadow:0 0 0 1px var(--frame-line)}
button,.btn{border-radius:var(--r-btn);border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--font);font-weight:500;letter-spacing:-.02em;padding:6px 18px}
button:hover,.btn:hover{border-color:var(--ink)}
button.primary,.btn.primary{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-text)}
button:disabled{opacity:.35}
.toplinks a{color:var(--ink);opacity:.65;font-weight:500}
.toplinks a:hover{opacity:1}

/* 왼쪽 목록: 크림 위 둥근 카드 */
aside{background:var(--canvas);border-right:0}
.list{padding:4px 12px}
.clip{border:0;border-radius:var(--r-btn);margin:0 0 6px;padding:10px 14px}
.clip:hover{background:var(--whisper)}
.clip.on{background:var(--white);box-shadow:var(--sh-1)}
.clip .t{font-weight:600;letter-spacing:-.01em}
.tag{border-radius:var(--r-pill);border-color:var(--line)}
.empty{color:var(--muted)}
.ad-side{background:var(--canvas);border-top:0}

/* 가운데: 영상은 둥근 검은 틀, 숫자는 크게 */
.mid{background:var(--canvas);border-right:0;padding:0 6px 12px}
.vwrap{border-radius:28px;overflow:hidden}
#rear{border-radius:16px}
.stats{background:transparent;border-bottom:0;gap:8px;padding:10px 0}
.stat{background:var(--lifted);border:0!important;border-radius:var(--r-btn);padding:10px 14px}
.stat .k{font-weight:600;letter-spacing:.02em}
.stat .v{font-weight:600;letter-spacing:-.02em}
.chartbox{background:var(--lifted);border-radius:28px;padding:12px 16px}

/* 지도: 크림 바탕 위에 둥글게 떠 있는 판 */
#map{border-radius:28px;margin:0 12px 12px 6px;box-shadow:var(--sh-2)}
.leaflet-bar{border:0!important;box-shadow:var(--sh-1)!important;border-radius:var(--r-btn)!important;overflow:hidden}
.leaflet-bar a{border-bottom-color:var(--line)!important}
.recenter{border-radius:50%!important;width:36px;height:36px;background:#fff!important;color:#141413!important}
.recenter.away{color:#CF4500!important}
.leaflet-control-layers{border:0!important;border-radius:var(--r-btn)!important;box-shadow:var(--sh-1)!important}
.mapnote{border:0;border-radius:28px;box-shadow:var(--sh-2);background:var(--white)}
.mapnote b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--route);margin-right:8px;vertical-align:middle}
.ad .ph{border-radius:var(--r-btn);border-color:var(--line)}
.drop{border-radius:28px}

/* 좁은 창·휴대폰: 여백을 줄여 한 화면 유지 */
@media (max-width:1000px){
  .mid{padding:0 6px 8px 12px}
  #map{margin:0 12px 8px 6px}
  .list{padding:6px 12px}
  .clip{margin:0 6px 0 0}
}
@media (max-width:600px){
  header{padding:6px 12px}
  header h1::before{width:24px;height:24px;border-radius:6px}
  .mid{padding:0 8px}
  .vwrap{border-radius:18px}
  .stats{gap:4px;padding:6px 0}
  .stat{padding:5px 8px;border-radius:12px}
  #map{margin:0 8px 6px;border-radius:18px}
  .list{padding:4px 8px}
  .clip{padding:5px 10px;border-radius:14px}
}

/* 기본 지도(OSM)를 차분하게: 채도를 낮추고 따뜻하게 → 크림 바탕·오렌지 경로와 어울리게 */
#map.osm .leaflet-tile-pane{filter:grayscale(.55) sepia(.18) brightness(1.03) contrast(.92)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #map.osm .leaflet-tile-pane{filter:grayscale(.8) invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) sepia(.1)}
}
:root[data-theme="dark"] #map.osm .leaflet-tile-pane{filter:grayscale(.8) invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) sepia(.1)}
/* 주소 말풍선 */
.addrpop .leaflet-popup-content-wrapper{border-radius:20px;box-shadow:var(--sh-2);background:var(--white);color:var(--ink)}
.addrpop .leaflet-popup-tip{background:var(--white)}
.addrpop a.leaflet-popup-close-button{color:var(--muted)}
.addrcopy:hover{background:var(--canvas)}
/* 영상 위 도구 · 구간 저장 */
.vtools button{border-radius:var(--r-pill,999px);border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.vtools button:hover{background:var(--ink);color:var(--canvas)}
.cutbar{border-radius:20px;background:var(--white);color:var(--ink);border:0;box-shadow:var(--sh-1)}
@media (max-width:600px){ .cutbar{border-radius:14px} }