/* tellby.us 「듣기」 페이지(/listen) — 도시 목록 + 세계 지도. 토큰·카드·알약은 site.css 와 같다(`body.pg-listen`). 지도 꼴은 공용 tellby_map.css. */
.pg-listen main{padding-bottom:24px}
.pg-listen .lhead{padding:clamp(22px,4vw,44px) 0 8px}
.pg-listen .lhead h1{margin:6px 0 6px;font-size:clamp(28px,4.4vw,44px);line-height:1.15;font-weight:900;letter-spacing:-.01em;word-break:keep-all}
.pg-listen .lhead p{margin:0;color:var(--sub);max-width:42em;word-break:keep-all}
.pg-listen .tabs{display:flex;gap:8px;margin:18px 0 18px;flex-wrap:wrap}
.pg-listen .tab{min-height:44px;padding:8px 20px;border-radius:999px;border:var(--bw) solid var(--outline);background:var(--surface);color:var(--txt);font:800 15px var(--font);cursor:pointer;box-shadow:var(--sh)}
.pg-listen .tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.pg-listen .tab:focus-visible{outline:none;box-shadow:var(--focus-ring,0 0 0 2px #111,0 0 0 4px #ff6933)}
.pg-listen .cities{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pg-listen .city{display:block;text-decoration:none;color:inherit;overflow:hidden;transition:transform .12s,box-shadow .12s}
.pg-listen .city:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--outline)}
.pg-listen .city img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#F5EEE5;border-bottom:var(--bw) solid var(--outline)}
.pg-listen .city .cn{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:9px 12px 0;font-weight:800;font-size:15px}
.pg-listen .city .cn small{color:var(--dim);font-weight:600;font-size:11px;letter-spacing:.06em}
.pg-listen .city .cc{display:block;padding:2px 12px 10px;color:var(--sub);font-size:12px;font-weight:600}
.pg-listen .lcta{display:flex;justify-content:center;margin-top:26px}
.pg-listen .lcta .o-pill{min-height:56px;font-size:17px;padding:12px 28px}
.pg-listen [hidden]{display:none!important}
/* 세계 지도 칸 — 메뉴 아래 남는 높이를 쓰되 너무 작지 않게 */
.pg-listen .lmap{position:relative;border:var(--bw) solid var(--outline);border-radius:var(--r-card,14px);box-shadow:var(--sh-lg);overflow:hidden;background:var(--sink)}
.pg-listen .lm-map{height:clamp(420px,calc(100dvh - 300px),780px);width:100%}
.pg-listen .lm-count{position:absolute;left:10px;bottom:10px;z-index:500;padding:6px 12px;border-radius:999px;background:var(--surface);border:var(--bw) solid var(--outline);box-shadow:var(--sh);font:800 13px var(--font)}
.pg-listen .lm-count:empty{display:none}
.pg-listen .lm-load{position:absolute;inset:0;z-index:600;display:grid;place-items:center;background:rgba(252,250,248,.7);font-weight:800;color:var(--sub)}
.pg-listen .lm-load.err{background:var(--surface);color:var(--txt)}
.pg-listen .lm-pin{background:none;border:0}
.pg-listen .lm-pin img{display:block;width:33px;height:33px;image-rendering:pixelated}
/* 장소 카드(말풍선) */
.pg-listen .leaflet-popup-content-wrapper{border:var(--bw) solid var(--outline);border-radius:14px;box-shadow:var(--sh-lg);padding:0;overflow:hidden;background:var(--card);color:var(--txt)}
.pg-listen .leaflet-popup-content{margin:0;width:260px!important}
.pg-listen .leaflet-popup-tip{border:var(--bw) solid var(--outline);box-shadow:none;background:var(--card)}
.pg-listen .lm-ph{display:block;width:100%;height:130px;object-fit:cover;border-bottom:var(--bw) solid var(--outline);background:var(--accent-bg)}
.pg-listen .lm-cb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.pg-listen .lm-nm{font-size:16px;line-height:1.25;font-weight:900}
.pg-listen .lm-meta{display:flex;gap:8px;align-items:center;color:var(--sub);font-size:12px;font-weight:700}
.pg-listen .lm-meta .badge{font-style:normal}
.pg-listen .lm-acts{display:flex;gap:8px;flex-wrap:wrap}
.pg-listen .lm-acts .sm{min-height:44px;padding:8px 14px;font-size:13px}
@media (max-width:1023px){.pg-listen .cities{grid-template-columns:repeat(4,1fr)}}
@media (max-width:719px){
  .pg-listen .cities{grid-template-columns:repeat(2,1fr);gap:12px}
  .pg-listen .tab{flex:1;justify-content:center}
  .pg-listen .lm-map{height:clamp(380px,calc(100dvh - 290px),640px)}
}