:root{
  /* color.html 지도/리스트 CSS 용 별칭 */
  --optic:#475569; --optic-deep:#1E293B; --ink-soft:#3A4A5E; --paper-2:#F2F6FC; --tint:#F1F5F9;
--bg:#FBFCFE;--card:#fff;--ink:#0A1626;--sub:#3A4A5E;--line:#8A99AD;--main:#475569;--deep:#1E293B;--soft:#F2F6FC;--light:#94A3B8}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}
.top{position:sticky;top:0;z-index:20;background:#ffffffe8;backdrop-filter:blur(12px);border-bottom:1px solid #e5e7eb}.topin{max-width:1280px;margin:auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:21px;font-weight:900;display:flex;gap:10px;align-items:center}.mark{width:32px;height:32px;border-radius:10px;background:var(--main);color:#fff;display:grid;place-items:center}.menu{display:flex;gap:4px}.menu a{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:700}.menu a:hover{background:var(--soft);color:var(--main)}.lang{border:1px solid var(--line);padding:8px 12px;border-radius:9px;background:#fff;font-weight:700}
.hero,.section,.final{max-width:1180px;margin:auto;padding:38px 24px 16px}.frame{min-height:565px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;padding:54px 40px;display:flex;align-items:center;background:#fff}.frame:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fffffff2 40%,#ffffff80 62%,#ffffff14 88%),radial-gradient(120% 140% at 88% 12%,#FDE68A 0%,#FBBF24 38%,#F59E0B 62%,#EA580C 100%);}.hero-content{position:relative;z-index:2;max-width:690px}.tag{display:inline-flex;gap:8px;align-items:center;background:#47556914;color:var(--main);padding:6px 11px;border-radius:6px;font:700 10.5px 'Space Mono';letter-spacing:.12em;margin-bottom:22px}.tag i{width:6px;height:6px;border-radius:50%;background:var(--main)}h1{font-size:clamp(35px,5vw,60px);line-height:1.04;letter-spacing:-.058em}.hero p{margin-top:20px;color:var(--sub);font-size:16px;max-width:640px}.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 20px;margin-top:22px}.facts span{font-size:13px;font-weight:800;padding-left:14px;position:relative}.facts span:before{content:"·";position:absolute;left:0;color:var(--main)}.btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;min-height:50px;padding:13px 22px;border-radius:12px;font-weight:800;border:1px solid var(--line);background:#fff}.primary{background:var(--main);color:#fff;border-color:var(--main)}.quick{max-width:1180px;margin:16px auto 0;padding:0 24px}.quickgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}.quickgrid div{padding:21px 18px;text-align:center;border-right:1px solid var(--line)}.quickgrid div:last-child{border-right:0}.quickgrid strong{display:block;color:var(--main);font-size:20px}.quickgrid span{font-size:11.5px;color:var(--sub);font-weight:700}
.section{padding:72px 24px}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--main);font:700 11px 'Space Mono';letter-spacing:.14em;margin-bottom:12px}.eyebrow:before{content:"";width:24px;height:1.5px;background:var(--main)}h2{font-size:clamp(29px,4vw,43px);line-height:1.12;letter-spacing:-.045em}.sub{margin-top:14px;color:var(--sub);font-size:15px;max-width:840px}
.twocol,.three,.four,.six{display:grid;gap:16px;margin-top:30px}.twocol{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.six{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:22px}.card.soft{background:linear-gradient(#fff,var(--soft))}.kicker{font:700 10px 'Space Mono';letter-spacing:.12em;color:var(--main)}.card h3{margin-top:9px;font-size:19px;line-height:1.25}.card p{margin-top:7px;color:var(--sub);font-size:12.5px}.bullets{list-style:none;margin-top:14px;display:grid;gap:8px}.bullets li{color:var(--sub);font-size:12.5px;padding-left:14px;position:relative}.bullets li:before{content:"·";position:absolute;left:0;color:var(--main)}.step{border:1px solid var(--line);background:#fff;padding:22px}.num{width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--main);display:grid;place-items:center;font:700 11px 'Space Mono'}
.mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 405px;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:18px;background:#fff}.map{min-height:480px;position:relative;background:linear-gradient(90deg,#8a99ad25 1px,transparent 1px),linear-gradient(#8a99ad25 1px,transparent 1px),linear-gradient(135deg,var(--soft),#fff);background-size:70px 70px,70px 70px,100% 100%}.map:before{content:"";position:absolute;left:8%;right:10%;top:58%;height:18px;border-radius:999px;background:#47556920;transform:rotate(-7deg)}.pin{position:absolute;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-size:11.5px;font-weight:800;box-shadow:0 8px 18px #0a162614}.p1{left:12%;top:28%}.p2{right:12%;top:25%}.p3{left:39%;bottom:28%;background:var(--ink);color:#fff}.p4{right:11%;bottom:18%}.list{border-left:1px solid var(--line)}.filters{display:flex;gap:7px;overflow:auto;padding:13px;border-bottom:1px solid var(--line)}.filters button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-size:10.5px;font-weight:800}.filters button:first-child{background:var(--main);color:#fff}.place{padding:16px;border-bottom:1px solid var(--line)}.place h3{font-size:14px}.place p{font-size:11.5px;color:var(--sub);margin-top:4px}.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.tags span{font-size:9.5px;font-weight:800;background:var(--soft);padding:4px 7px;border-radius:999px}
.route{display:grid;grid-template-columns:minmax(0,1fr) 410px;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:24px;background:#fff}.rlist{border-left:1px solid var(--line)}.rtabs{display:flex;gap:8px;overflow:auto;padding:15px;border-bottom:1px solid var(--line)}.rtabs button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:10.5px;font-weight:800}.rtabs button:first-child{background:var(--main);color:#fff}.ritem{padding:15px;border-bottom:1px solid var(--line)}.ritem h3{font-size:13.5px}.ritem p{font-size:11.5px;color:var(--sub)}
.warn{margin-top:18px;padding:20px;border:1px solid var(--light);border-radius:18px;background:var(--soft)}.faq{margin-top:10px;border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden}.faq button{width:100%;display:flex;justify-content:space-between;padding:17px 18px;border:0;background:#fff;font-weight:800;text-align:left}.answer{display:none;padding:0 18px 17px;color:var(--sub);font-size:12.5px}.faq.open .answer{display:block}.final{padding:34px 24px 86px}.finalbox{display:flex;justify-content:space-between;gap:24px;align-items:center;border:1px solid var(--line);border-left:5px solid var(--main);border-radius:22px;padding:32px;background:#fff}
@media(max-width:900px){.menu{display:none}.twocol,.three,.four,.six,.mapwrap,.route{grid-template-columns:1fr}.list,.rlist{border-left:0;border-top:1px solid var(--line)}.frame{min-height:650px;align-items:flex-start}.frame:before{background:linear-gradient(180deg,#fff 0%,#fffffff0 42%,#ffffff70 70%,#ffffff10 100%),radial-gradient(120% 120% at 78% 8%,#FDE68A 0%,#FBBF24 40%,#F59E0B 66%,#EA580C 100%);}}
@media(max-width:560px){body{padding-bottom:70px}.topin{padding:11px 15px}.hero{padding:18px 14px 14px}.frame{min-height:610px;padding:31px 22px 20px}h1{font-size:36px}.hero p{font-size:13.8px}.facts{gap:8px 11px}.facts span{font-size:10.8px}.btns{flex-direction:column}.btn{width:260px;justify-content:flex-start}.quick{padding:0 14px}.quickgrid{grid-template-columns:1fr 1fr}.section{padding:52px 18px}.four{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:repeat(2,1fr)}.map{min-height:340px}.finalbox{flex-direction:column;align-items:flex-start}}

/* ===== v2 mobile alignment refinements ===== */
@media(max-width:560px){
  .frame{
    min-height:565px !important;
    padding:28px 22px 18px !important;
  }
  h1{
    font-size:34px !important;
    line-height:1.02 !important;
    max-width:320px;
  }
  .hero p{
    margin-top:14px !important;
    font-size:13.2px !important;
    line-height:1.52 !important;
    max-width:315px !important;
  }
  .facts{
    margin-top:14px !important;
    gap:7px 10px !important;
  }
  .facts span{
    font-size:10.2px !important;
    line-height:1.28 !important;
  }
  .btns{
    margin-top:17px !important;
    gap:9px !important;
  }
  .btn{
    min-height:47px !important;
    padding:11px 19px !important;
    width:250px !important;
    font-size:14px !important;
  }

  .quickgrid div{
    min-height:116px;
    padding:18px 10px !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .quickgrid strong{
    font-size:17px !important;
    line-height:1.22;
  }
  .quickgrid span{
    margin-top:7px;
    font-size:10.8px !important;
    line-height:1.4;
  }

  /* Same mobile treatment as the 3-card value sections on other Pglemaps pages */
  #types .three{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:12px !important;
    padding:2px 18px 10px 0 !important;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
  }
  #types .three::-webkit-scrollbar{display:none}
  #types .card{
    flex:0 0 84% !important;
    min-height:230px;
    scroll-snap-align:start;
    padding:20px 18px !important;
  }
  #types .card h3{
    font-size:20px !important;
    line-height:1.18 !important;
  }
  #types .bullets{
    gap:7px !important;
  }
  #types .bullets li{
    font-size:12px !important;
    line-height:1.5;
  }
}


/* ===== v3 UI alignment with other Pglemaps category pages ===== */
.quickgrid{border:1px solid var(--line)!important;border-radius:18px!important;overflow:hidden!important}
.quickgrid>div{border-right:1px solid var(--line)!important;border-bottom:0!important}
.quickgrid>div:last-child{border-right:0!important}
.bullets.compact{margin-top:12px!important;gap:5px!important}
.bullets.compact li{font-size:11.6px!important;line-height:1.4!important}
.storage-type-grid{align-items:start}.storage-type-card{min-height:180px;padding-bottom:18px}.storage-type-card h3{font-size:20px;line-height:1.18}.storage-type-card p{font-size:12.4px;line-height:1.55}
@media(max-width:560px){
.quickgrid{grid-template-columns:1fr 1fr!important}
.quickgrid>div{min-height:104px!important;padding:16px 10px!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
.quickgrid>div:nth-child(2n){border-right:0!important}.quickgrid>div:nth-last-child(-n+2){border-bottom:0!important}
.quickgrid strong{font-size:16px!important;line-height:1.18!important;white-space:nowrap}.quickgrid span{font-size:10.4px!important;line-height:1.35!important}
#types h2{font-size:28px!important;line-height:1.08!important;letter-spacing:-.04em!important;white-space:nowrap}
#types .sub{margin-top:10px!important;font-size:13px!important;line-height:1.5!important;max-width:330px}
#types .storage-type-grid{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;overflow-y:hidden!important;gap:12px!important;padding:2px 18px 10px 0!important;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
#types .storage-type-grid::-webkit-scrollbar{display:none}
#types .storage-type-card{flex:0 0 78%!important;min-height:215px!important;padding:18px 17px!important;scroll-snap-align:start}
#types .storage-type-card h3{font-size:19px!important;line-height:1.16!important;margin-top:8px!important}
#types .storage-type-card p{margin-top:7px!important;font-size:12px!important;line-height:1.5!important}
}



/* ===== v4 hero image + page scroll fix ===== */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip !important;
}
body{
  position:relative;
  overscroll-behavior-x:none;
}
.top,.hero,.quick,.section,.final{
  width:100%;
  overflow-x:clip;
}
.hero{
  padding-top:26px !important;
  padding-bottom:10px !important;
}
.frame{
  min-height:530px !important;
  padding:46px 38px 24px !important;
}
.frame:before{
  background:linear-gradient(90deg,#fff 0%,#fffffff2 40%,#ffffff80 62%,#ffffff14 88%),radial-gradient(120% 140% at 88% 12%,#FDE68A 0%,#FBBF24 38%,#F59E0B 62%,#EA580C 100%);
}
/* keep section-level swipe, but stop whole-page sideways movement */
#types .storage-type-grid,
.filters,
.rtabs{
  max-width:100%;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.mapwrap,.route,.twocol,.three,.four,.six{
  min-width:0;
}

@media(max-width:560px){
  .hero{
    padding:16px 14px 10px !important;
  }
  .frame{
    min-height:500px !important;
    padding:26px 22px 18px !important;
  }
  .frame:before{
    background:linear-gradient(180deg,#fff 0%,#fffffff0 42%,#ffffff70 70%,#ffffff10 100%),radial-gradient(120% 120% at 78% 8%,#FDE68A 0%,#FBBF24 40%,#F59E0B 66%,#EA580C 100%);
  }
  h1{
    max-width:290px !important;
  }
  .hero p{
    max-width:292px !important;
  }
  .btn{
    width:248px !important;
  }
  #types .storage-type-grid,
  .filters,
  .rtabs{
    width:100%;
  }
}


.mobile-cta{display:none;position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:1000;background:var(--deep);color:#fff;border-radius:16px;padding:10px 10px 10px 14px;align-items:center;gap:10px;box-shadow:0 16px 36px rgba(10,22,38,.28)}
.mobile-cta div{flex:1}
.mobile-cta strong{display:block;font-size:12px}
.mobile-cta span{display:block;margin-top:2px;color:rgba(255,255,255,.72);font-size:9.5px}
.mobile-cta a{background:#fff;color:var(--deep);border-radius:10px;padding:10px 12px;font-size:11px;font-weight:800}
@media(max-width:560px){.mobile-cta{display:flex}}

/* ===== color.html 2번째 섹션 지도/리스트/route CSS 포팅 ===== */
.map-pane{min-height:360px}
.search-mini{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:30px; padding:0 13px; min-width:0; flex:1 1 auto; height:40px}
.search-mini svg{width:16px;height:16px;color:var(--ink-soft);flex-shrink:0}
.search-mini input{border:none; outline:none; background:none; font-family:inherit; font-size:14px; width:100%}
.mapbox{display:flex; margin-top:18px; border:1px solid var(--line); border-radius:20px; overflow:hidden; height:560px; background:#fff}
.map-pane{flex:1.2; position:relative; background:#E2EAF2; overflow:hidden}
.map-badge{position:absolute; top:14px; left:14px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 13px; font-size:12.5px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.07)}
.map-badge em{font-style:normal; color:var(--optic); font-family:'Space Mono',monospace}
.map-zoom{position:absolute; bottom:18px; right:14px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.map-zoom button{width:36px; height:36px; border:none; background:#fff; font-size:17px; cursor:pointer; color:var(--ink)}
.map-zoom button:first-child{border-bottom:1px solid var(--line)}
.map-zoom button:hover{background:var(--paper-2)}
.list-pane{width:360px; flex-shrink:0; overflow-y:auto; border-left:1px solid var(--line)}
.list-head{position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; z-index:10}
.list-count{font-size:14px; font-weight:700}
.list-count em{font-style:normal; color:var(--optic); font-family:'Space Mono',monospace}
.map-list-more{position:sticky;bottom:12px;z-index:12;width:calc(100% - 32px);min-height:44px;margin:14px 16px 16px;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#fff,#fff3ed);box-shadow:0 8px 22px rgba(10,22,38,.12);color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:border-color .15s,color .15s,transform .15s,box-shadow .15s}
.map-list-more[hidden]{display:none}
.map-list-more:hover{border-color:var(--optic);color:var(--optic);transform:translateY(-1px);box-shadow:0 8px 18px rgba(234,88,12,.10)}
.map-list-more:focus-visible{outline:3px solid rgba(234,88,12,.20);outline-offset:2px}
.map-list-more .map-list-more-arrow{font-size:16px;line-height:1}
.route-layout{display:flex; margin-top:34px; border:1px solid var(--line); border-radius:20px; overflow:hidden; min-height:520px; background:#fff}
.nearby-route-map{flex:1.2; position:relative; min-height:520px; overflow:hidden; background:
  linear-gradient(90deg, rgba(10,22,38,.06) 1px, transparent 1px) 0 0/54px 54px,
  linear-gradient(rgba(10,22,38,.06) 1px, transparent 1px) 0 0/54px 54px,
  linear-gradient(135deg,#EAF2FC,#F8FBFF)}
.route-map-note{position:absolute; top:16px; left:16px; z-index:5; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 13px; font-size:12.5px; font-weight:800; box-shadow:0 4px 12px rgba(0,0,0,.07)}
.partner-mapbox-map{position:absolute; inset:0; width:100%; height:100%}
.partner-mapbox-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; background:linear-gradient(135deg,#eef5ff,#dbe8f7); color:#475569; font-weight:700; z-index:2}
.partner-mapbox-fallback[hidden]{display:none!important}
.partner-mapbox-fallback strong{display:block; color:#0a1626; font-size:16px; margin-bottom:5px}
.mapboxgl-popup-content{border-radius:12px; box-shadow:0 14px 32px rgba(10,22,38,.18); padding:12px; font-family:inherit}
.view-toggle-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 12px;background:#fff;border:1px solid var(--line);border-radius:30px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer;transition:.15s;margin-top:0;white-space:nowrap;flex:0 0 auto}
.view-toggle-btn:hover{border-color:var(--optic);color:var(--optic)}
.view-toggle-btn .vt-ico{font-size:15px;font-weight:800}
.listv .searchbar{margin:18px 0 0;padding:0;position:static}
.listv .search-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;gap:8px;box-shadow:0 6px 20px rgba(10,22,38,.06)}
.listv .search-input{flex:1;display:flex;align-items:center;gap:10px;padding:0 14px}
.listv .search-input svg{width:18px;height:18px;color:var(--ink-soft);flex-shrink:0}
.listv .search-input input{border:none;outline:none;font-family:inherit;font-size:15px;width:100%;background:none;color:var(--ink)}
.listv .search-btn{background:var(--optic);color:#fff;border:none;border-radius:11px;padding:12px 24px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
.listv .search-btn:hover{background:var(--optic-deep)}
.listv .filters{margin:14px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.listv .f-chip{padding:10.4px 18.2px;background:#fff;border:1px solid var(--line);border-radius:30px;font-size:16.9px;line-height:1.2;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink-soft);transition:.15s;white-space:nowrap}
.listv .f-chip:hover{border-color:var(--optic);color:var(--optic)}
.listv .f-chip.active{background:var(--optic);color:#fff;border-color:var(--optic)}
.listv .region-chip{padding:7px 13px;background:var(--paper-2);border:1px solid transparent;border-radius:10px;font-size:13px;line-height:1.2;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink-soft);transition:.15s;white-space:nowrap}
.listv .region-chip:hover{background:var(--tint);border-color:transparent;color:var(--optic)}
.listv .region-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.listv .region-chip .cnt{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;opacity:.6;margin-left:4px}
.listv .res-head{margin:26px 0 0;padding:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.listv .res-count{font-size:15px;font-weight:700}
.listv .res-count em{font-style:normal;color:var(--optic);font-family:'Space Mono',monospace}
.listv .sort-pills{display:flex;gap:6px}
.listv .sort-pill{font-size:12.5px;font-weight:700;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 14px;cursor:pointer;font-family:inherit}
.listv .sort-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.listv .grid-wrap{margin:20px 0 0;padding:0 0 10px}
.listv .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.listv .card{min-width:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:.2s;cursor:pointer;display:flex;flex-direction:column}
.listv .card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(10,22,38,.1);border-color:transparent}
.listv .card-top{height:96px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--optic),var(--optic-deep))}
.listv .card-top.v2{background:linear-gradient(135deg,#1AA6BC,#0E7A8C)}
.listv .card-top.v3{background:linear-gradient(135deg,#5B6CFF,#3A45C4)}
.listv .card-top.v4{background:linear-gradient(135deg,#2E7CF6,#1A4FC4)}
.listv .card-ico{font-size:44px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.listv .card-badges{position:absolute;top:10px;left:10px;display:flex;gap:5px;flex-wrap:wrap;max-width:80%}
.listv .cbadge{background:rgba(255,255,255,.95);color:var(--optic);font-size:10px;font-weight:800;padding:4px 8px;border-radius:6px}
.listv .card-fav{position:absolute;top:9px;right:9px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.listv .card-fav.on{background:#E11D48;color:#fff}
.listv .card-body{padding:12px;flex:1;display:flex;flex-direction:column}
.listv .card-name{font-size:14px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listv .card-loc{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:4px;margin-bottom:10px}
.listv .card-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.listv .card-tag{font-size:11px;font-weight:600;background:var(--tint);color:var(--optic);padding:3px 8px;border-radius:6px}
.listv .card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line)}
.listv .card-rate{font-size:14px;font-weight:800;display:flex;align-items:center;gap:4px}
.listv .card-rate .st{color:#F5A623}
.listv .card-rate .c{font-family:'Space Mono',monospace;font-size:11px;color:var(--line);font-weight:700}
.listv .card-price{text-align:right}
.listv .card-price .lab{font-size:10px;color:var(--ink-soft)}
.listv .card-price .val{font-family:'Space Mono',monospace;font-weight:700;font-size:15px;color:var(--optic)}
.listv .load-more{display:block;margin:24px auto 0;padding:14px 36px;background:#fff;border:1px solid var(--line);border-radius:30px;font-family:inherit;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;transition:.15s}
.listv .load-more:hover{border-color:var(--optic);color:var(--optic)}
.listv .vendor-pagination{display:flex;align-items:center;justify-content:center;gap:7px;margin:26px auto 0}
.listv .vendor-pagination[hidden]{display:none}
.listv .vendor-page-btn{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink-soft);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:.15s}
.listv .vendor-page-btn:hover:not(:disabled){border-color:var(--optic);color:var(--optic)}
.listv .vendor-page-btn.active{border-color:var(--ink);background:var(--ink);color:#fff}
.listv .vendor-page-btn:disabled{cursor:not-allowed;opacity:.35}
.listv .empty{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.listv .empty-ico{font-size:44px;margin-bottom:12px}
.route-section .route-layout{max-height:520px}
@media (max-width:860px){
.mapbox{flex-direction:column; height:auto}
.map-pane{min-height:360px; height:360px; width:100%; display:block; flex:none}
.list-pane{width:100%; max-height:none; overflow:visible; border-left:0; border-top:0}
.list-head{position:static; border-top:0}
.map-list-more{position:static; bottom:auto}
.route-layout{flex-direction:column; min-height:0}
.nearby-route-map{min-height:360px; height:360px; width:100%; flex:none}
}
@media (max-width:560px){
.mapfilter{gap:6px; margin-top:16px; max-width:none; width:100%}
.view-toggle-btn{height:38px; padding:0 8px; font-size:11.5px; gap:4px}
.search-mini{height:38px; padding:0 10px}
}
@media (max-width:1100px) and (min-width:861px){
.listv .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px) and (min-width:561px){
.listv .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
.listv .grid{grid-template-columns:1fr 1fr;gap:12px}
.listv .card-top{height:96px}
.listv .card-ico{font-size:34px}
.listv .card-body{padding:12px}
.listv .card-name{font-size:14px}
.listv .search-btn{padding:12px 16px}
}
@media(max-width:560px){
.route-section .route-layout{max-height:none}
}