#pane-map {
    /* 값은 base.css 한 곳에 있다. 여기서는 이름만 이어 붙인다.
       예전엔 같은 색을 세 파일에 베껴 적어서, 한 곳만 고치면 탭 사이가 갈라졌다. */
    --brand:var(--c-brand); --brand-ink:var(--c-brand-d); --brand-600:var(--c-brand-d);
    --brand-100:#F6E6C6; --brand-50:var(--c-brand-50);
    --stamp:#2B3A67; --stamp-100:#E4E8F2;
    --paper:var(--c-bg); --paper-2:var(--c-soft);
    --ink:var(--c-ink); --ink-2:var(--c-ink2); --ink-3:var(--c-ink3);
    --line:var(--c-line); --line-2:#DFE3E9;
    --shadow-sm:var(--sh-sm); --shadow-md:var(--sh-md);
    --mono:var(--mono); --fn:var(--fn); --ease:var(--ease); --canvas-w:480px;
  }
/* 좌우 여백은 main.wrap 한 곳에서만 준다.
   여기서 또 주면 홈은 16px, 매거진·지도는 32px 로 들여쓰여 같은 화면으로 안 읽힌다.
   그래서 이 안에서 쓰는 --pad 는 0 이다 (--pad 를 쓰는 자리들은 바깥 wrap 이 이미 벌려 준다). */
#pane-map { --pad:0; }

  /* 매거진과 같은 폭으로 넓어진다. 지도만 480px 카드로 남으면 PC에서 혼자 좁아 보인다. */
  @media(min-width:820px){ #pane-map { --canvas-w:1180px; } }
#pane-map * { box-sizing:border-box; margin:0; padding:0; }

/* ⚠️ 위 리셋(`#pane-map *`, 특정도 1,0,1)이 base.css 의 `.phead`(0,1,0)를 눌러
   지도 탭에서도 제목 여백이 0 이 됐다. mag-pane.css 와 같은 사정이다. */
#pane-map .phead { padding:20px 0 12px; }
  @media (min-width:820px){
#pane-map .phead { padding:26px 0 14px; }}

#pane-map html, #pane-map body { height:100%; }
#pane-map body { font-family:var(--fn); background:var(--paper-2); color:var(--ink); letter-spacing:-.01em; -webkit-font-smoothing:antialiased; line-height:1.5; }
#pane-map h1, #pane-map h2, #pane-map h3, #pane-map p { word-break:keep-all; }
#pane-map a { color:inherit; }
#pane-map button { font-family:inherit; }
#pane-map .canvas { max-width:var(--canvas-w); margin:0 auto; background:var(--paper); min-height:100vh; position:relative; padding-bottom:40px; }
#pane-map .airmail { height:7px; background:repeating-linear-gradient(-45deg, var(--brand) 0 12px, #fff 12px 16px, var(--stamp) 16px 28px, #fff 28px 32px); }
/* 머리는 공통 .phead, 검색창은 공통 .sbox (base.css / unified.css).
   예전엔 여기만 금색 2px 테두리 상자여서, 탭을 옮기면 다른 사이트처럼 보였다. */
#pane-map .naver-search { padding:2px 0 4px; }
#pane-map .phint { display:inline-block; background:#FDF8EF; border:1px solid var(--brand); color:var(--brand);
    font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:var(--r-pill); margin:0 6px 6px 0; }
#pane-map .seg { display:flex; gap:7px; padding:12px var(--pad) 4px; overflow-x:auto; scrollbar-width:none; }
#pane-map .seg::-webkit-scrollbar { display:none; }
#pane-map .seg button { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
               padding:9px 15px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff;
               font-size:13.5px; font-weight:800; color:var(--ink-2); cursor:pointer;
               box-shadow:var(--shadow-sm); white-space:nowrap; transition:transform .14s; }
#pane-map .seg button:active { transform:scale(.96); }
/* 고른 것은 어디서나 검정. 여기만 카테고리 색으로 칠하면 같은 앱으로 안 읽힌다. */
#pane-map .seg button.active { border-color:var(--c-ink); color:#fff; background:var(--c-ink); }
#pane-map .seg button svg { width:16px; height:16px; }
#pane-map .seg button:not(.active) svg { color:var(--c,#8A9099); }
#pane-map .filter-label { padding:12px var(--pad) 6px; font-size:11.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
#pane-map .chip-row { display:flex; gap:7px; overflow-x:auto; padding:0 var(--pad) 8px; scrollbar-width:none; }
#pane-map .chip-row::-webkit-scrollbar { display:none; }
#pane-map .chip { flex:0 0 auto; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer; white-space:nowrap; }
/* 고른 칩은 홈·매거진과 같이 검정 채움 */
#pane-map .chip.active { border-color:var(--c-ink); color:#fff; background:var(--c-ink); }
#pane-map .chip.active .cn, #pane-map .chip.active .pw { color:rgba(255,255,255,.72); }
#pane-map .count-bar { padding:12px var(--pad) 4px; font-size:12.5px; color:var(--ink-3); }
#pane-map .list { display:flex; flex-direction:column; gap:14px; padding:14px var(--pad) 4px; }
#pane-map .place { padding:16px 16px 15px; border:1px solid var(--line); border-radius:var(--mrt-radius-card, 20px);
    box-shadow:var(--mrt-z1, 0 2px 10px rgba(20,24,30,.05)); background:#fff; }
#pane-map .place .name-row { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
#pane-map .place h3 { font-size:16px; font-weight:800; }
#pane-map .place .cat-inline { font-size:12.5px; color:var(--ink-3); font-weight:600; }
#pane-map .place .meta { font-size:12.5px; color:var(--ink-2); margin:3px 0 5px; font-weight:600; }
#pane-map .place .meta .price { color:var(--brand); font-weight:800; font-size:13.5px; }
#pane-map .place p { font-size:12.5px; color:var(--ink-2); line-height:1.6; margin-bottom:8px; }
#pane-map .place .tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
#pane-map .place .tag { font-size:10.5px; font-weight:700; color:var(--ink-2); background:var(--paper-2); padding:3px 9px; border-radius:var(--r-pill); }
#pane-map .gmeta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 7px; font-size:12.5px; }
#pane-map .gmeta .star { color:#F5A623; font-weight:800; }
#pane-map .gmeta .cnt { color:var(--ink-3); }
#pane-map .gmeta .open { font-weight:800; color:var(--brand); }
#pane-map .gmeta .closed { font-weight:800; color:#E5484D; }
#pane-map .gphoto { width:100%; height:100%; object-fit:cover; display:block; }
#pane-map .photo-wrap { position:relative; aspect-ratio:16/10; margin:2px 0 9px; border-radius:var(--mrt-radius-card, 16px); overflow:hidden; background:var(--paper-2); cursor:pointer; }
#pane-map .photo-wrap:active .gphoto { filter:brightness(.92); }
#pane-map .photo-pin { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; color:#fff; background:rgba(21,23,26,.72); backdrop-filter:blur(2px); padding:5px 10px 5px 8px; border-radius:var(--r-pill); pointer-events:none; }
#pane-map .photo-pin svg { width:12px; height:12px; flex:none; }
#pane-map .map-wrap.jump-flash { box-shadow:0 0 0 3px rgba(3,199,90,.35); }
#pane-map .place .maps-link { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800; color:var(--brand); text-decoration:none; }
#pane-map .place .maps-link:hover { text-decoration:underline; }
#pane-map .place .maps-link svg { width:13px; height:13px; }
#pane-map .notes { margin:10px 0 4px; border-left:3px solid var(--brand); padding-left:11px; display:flex; flex-direction:column; gap:8px; }
#pane-map .notes .note { display:flex; flex-direction:column; gap:2px; }
#pane-map .notes .note b { font-size:11.5px; font-weight:800; color:var(--brand); letter-spacing:.01em; }
#pane-map .notes .note span { font-size:12.5px; color:var(--ink-2); line-height:1.62; }
#pane-map .route-card { margin:10px 20px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; cursor:pointer; }
#pane-map .route-card.active { border-color:var(--brand); box-shadow:0 0 0 2px rgba(3,199,90,.15); }
#pane-map .route-card .rc-head { padding:14px 16px 10px; }
#pane-map .route-card .rc-head h3 { font-size:15px; font-weight:800; }
#pane-map .route-card .rc-head p { font-size:12.5px; color:var(--ink-2); margin-top:2px; line-height:1.55; }
#pane-map .route-card .rc-total { font-size:11.5px; font-weight:800; color:var(--brand); margin-top:5px; }
#pane-map .route-stop { display:flex; gap:10px; padding:7px 16px; align-items:flex-start; }
#pane-map .route-stop .num { flex:0 0 22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; }
#pane-map .route-stop .rs-body { flex:1; border-bottom:1px dashed var(--line); padding-bottom:7px; }
#pane-map .route-stop:last-child .rs-body { border-bottom:0; }
#pane-map .route-stop .rs-name { font-size:13.5px; font-weight:800; }
#pane-map .route-stop .rs-name .sns { font-size:10.5px; color:#fff; background:var(--brand); border-radius:var(--r-xs); padding:2px 6px; margin-left:5px; vertical-align:1px; }
#pane-map .route-stop .rs-desc { font-size:11.5px; color:var(--ink-2); line-height:1.55; }
#pane-map .route-stop .rs-leg { font-size:10.5px; color:var(--brand); font-weight:700; margin-top:3px; }
#pane-map .empty { padding:40px var(--pad); text-align:center; color:var(--ink-3); font-size:12.5px; }
#pane-map .map-wrap { margin:10px 20px 4px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
#pane-map #map { height:320px; width:100%; background:var(--paper-2); }
#pane-map .leaflet-popup-content { font-family:var(--fn); font-size:12.5px; }
#pane-map .leaflet-popup-content b { display:block; margin-bottom:4px; }
/* 귀엽게: 딱딱한 원+원색 대신 둥근 사각 배지 + 파스텔 톤. 카테고리별 색은 구분만 되면 되고
   눈을 아프게 할 필요는 없다. 흰 테두리로 지도 위에서 도드라지게 한다. */
#pane-map .gmk { width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    font-size:16px; box-shadow:0 3px 8px rgba(30,20,10,.22); border:2.5px solid #fff;
    transition:transform .12s ease; }
#pane-map .leaflet-marker-icon:hover .gmk,
#pane-map .gmk:hover { transform:scale(1.12) rotate(-3deg); }
#pane-map .gmk-food { background:#FF9466; }
#pane-map .gmk-cafe { background:#D9A441; }
#pane-map .gmk-stay { background:#7FA4C9; }
#pane-map .gmk-spot { background:#6FBF8B; }
#pane-map .gmk-surf { background:#4FC1CE; }
#pane-map .gmk-well { background:#BB93D6; }
#pane-map .gmk-act { background:#F0AC66; }
#pane-map .gmk-shop { background:#F096AC; }
#pane-map .gmk-def { background:#9AA1AB; }
#pane-map .leaflet-popup-content-wrapper { border-radius:var(--r-md); }
#pane-map .gpop { min-width:180px; }
#pane-map .gpop img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-xs); margin-bottom:7px; }
#pane-map .gpop b { font-size:13.5px; display:block; margin-bottom:3px; }
#pane-map .gpop .s { font-size:12.5px; color:#5F6368; }
#pane-map .gpop .st { color:var(--brand); font-weight:800; }
#pane-map .gpop a { display:inline-block; margin-top:6px; font-size:12.5px; font-weight:800; color:var(--brand); text-decoration:none; }
#pane-map .marker-cluster-small, #pane-map .marker-cluster-medium, #pane-map .marker-cluster-large { background:rgba(200,150,62,.22); border-radius:50%; }
#pane-map .marker-cluster-small div, #pane-map .marker-cluster-medium div, #pane-map .marker-cluster-large div {
    background:var(--brand); color:#fff; font-weight:800; font-family:var(--fn); box-shadow:0 2px 6px rgba(30,20,10,.25); }
#pane-map .map-note { padding:6px var(--pad) 2px; font-size:10.5px; color:var(--ink-3); }
#pane-map footer { text-align:center; padding:20px var(--pad); font-size:10.5px; color:var(--ink-3); }

  
  @media (min-width: 820px){
#pane-map { --canvas-w:1180px; }
#pane-map #map { height:340px; }
#pane-map .list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#pane-map .route-card { margin:10px 20px; }
#pane-map #routeWrap { display:grid; grid-template-columns:1fr 1fr; }
#pane-map .bst-nav { max-width:var(--canvas-w); margin:0 auto; }
  }
#pane-map .bst-nav { position:sticky; top:0; z-index:200; display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:9px 16px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(0,0,0,.07); font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif; }
#pane-map .bst-nav .bst-mark { font-size:12.5px; font-weight:900; letter-spacing:.02em; color:#19191C; text-decoration:none; white-space:nowrap; }
#pane-map .bst-nav .bst-mark em { color:var(--brand); font-style:normal; }
#pane-map .bst-nav .bst-links { display:flex; gap:4px; }
#pane-map .bst-nav .bst-links a { font-size:12.5px; font-weight:700; color:#55555B; text-decoration:none;
    padding:6px 11px; border-radius:var(--r-pill); white-space:nowrap; transition:background .15s,color .15s; }
#pane-map .bst-nav .bst-links a:hover { background:var(--soft); color:var(--brand); }
#pane-map .bst-nav .bst-links a.on { background:#19191C; color:#fff; }
  @media (max-width:420px){
#pane-map .bst-nav { padding:8px 12px; }
#pane-map .bst-nav .bst-links a { padding:6px 9px; font-size:12.5px; } }
#pane-map .more-btn { display:block; width:calc(100% - 32px); margin:6px auto 28px; padding:15px;
    font-family:inherit; font-size:14px; font-weight:800; color:var(--ink,#1C1A22);
    background:#fff; border:1px solid var(--line,var(--line)); border-radius:var(--r-sm); cursor:pointer; }
#pane-map .more-btn:active { transform:scale(.99); }

/* 칩에 붙는 개수. 누르기 전에 몇 곳인지 알 수 있어야 헛걸음을 안 한다. */
#pane-map .chip .cn{ font-style:normal; font-weight:700; font-size:10.5px; color:var(--ink-3);
                     margin-left:5px; }
#pane-map .chip.active .cn{ color:rgba(255,255,255,.75); }

/* ── 필터 접기 ──
   4단이 항상 펼쳐져 있으면 346px를 먹고 목록이 첫 화면 밖으로 밀린다.
   지역만 남기고 나머지는 접는다. */
#pane-map .fmore{ display:flex; align-items:center; gap:6px; margin:2px 20px 4px;
                  padding:8px 13px; border:1px solid var(--line); border-radius:var(--r-pill);
                  background:#fff; font-family:inherit; font-size:12.5px; font-weight:700;
                  color:var(--ink-2); cursor:pointer; }
#pane-map .fmore svg{ width:14px; height:14px; transition:transform .22s ease; }
#pane-map .fmore[aria-expanded="true"] svg{ transform:rotate(180deg); }
#pane-map .fmore-n{ font-style:normal; font-size:10.5px; font-weight:800; color:#fff;
                    background:var(--brand); border-radius:var(--r-pill); padding:1px 7px; display:none; }
#pane-map .fmore-n.on{ display:inline-block; }
/* 자식이 여러 개면 0fr 한 줄로는 안 접힌다. 하나로 감싸서 그 한 줄만 여닫는다. */
#pane-map .fbox{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s ease; }
#pane-map .fbox > .fbox-in{ overflow:hidden; min-height:0; }
#pane-map .fbox.on{ grid-template-rows:1fr; }
/* 이 태그들이 어디서 왔는지 — 지어낸 값이 아니라는 걸 밝혀둔다 */
#pane-map .fbox-note{ margin:2px var(--pad) 4px; padding:9px 12px; border-radius:11px;
                      background:var(--soft); font-size:11.5px; line-height:1.55; color:var(--ink-3); }

/* 가격 등급 옆에 실제 금액. "중가가 얼마인데?" 를 없앤다. */
#pane-map .chip .pw{ font-style:normal; font-weight:600; font-size:10.5px; color:var(--ink-3);
                     margin-left:4px; }
#pane-map .chip.active .pw{ color:rgba(255,255,255,.8); }

/* 조건을 넓혀서 채운 카드. 딱 맞는 결과와 눈으로 구분돼야 한다 */
#pane-map .place.is-near{ border-style:dashed; }
#pane-map .nearwhy{
  font-size:12.5px; line-height:1.5; color:#8A6A2F; background:#FDF8EF;
  border-bottom:1px solid #EBD9B4; padding:7px 12px; margin:-14px -14px 12px;
  border-radius:var(--r-sm) 12px 0 0;
}