/* ============================================================
   UNDERDOGS — shop-map.css（TOPの店舗マップ / v2.7.2）
   home.css → maplibre-gl.css → shop-map.css → chrome.css の順で読み込む（inc/setup.php）。
   地図本体は MapLibre GL（assets/vendor/maplibre）＋ OpenFreeMap のベクタータイル。
   地図の配色は assets/map-style.json（モノクロ・生成り・日本語表記）。
   ここではピン・ポップアップ・操作ボタンをテーマの黒／生成り／朱の言語に揃える。
   ============================================================ */

/* ---------- section ---------- */
.shopmap{position:relative;padding:clamp(80px,10vw,140px) 0 clamp(24px,3vw,40px);background:var(--bg);overflow:clip}
.shopmap__bgword{position:absolute;top:-.06em;right:-1.5vw;z-index:0;white-space:nowrap;font-family:var(--f-display);
  font-size:clamp(90px,15vw,220px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(12,12,12,.08);pointer-events:none;user-select:none}
.shopmap .wrap{position:relative;z-index:1}
.shopmap__lead{max-width:640px;margin:-8px 0 clamp(26px,3.4vw,44px);font-size:clamp(13.5px,1.35vw,15px);line-height:2.2;color:var(--ink-soft)}
.shopmap__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,3vw,44px);align-items:stretch}
.shopmap__note{margin-top:16px;font-size:11px;line-height:1.9;color:var(--muted)}
.shopmap__note a{text-decoration:underline;text-underline-offset:3px}
.shopmap__note a:hover{color:var(--accent)}
.shopmap__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* ---------- stage（地図） ---------- */
.shopmap__stage{position:relative;min-height:clamp(420px,58vh,640px);background:#ebe9e4;border-top:6px solid var(--ink);
  box-shadow:0 30px 70px rgba(0,0,0,.14);scroll-margin-top:calc(var(--head-h) + 12px)}
.shopmap__stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(12,12,12,.14),inset 0 -50px 70px -50px rgba(12,12,12,.18)}
.shopmap__canvas{position:absolute;inset:0;z-index:1;background:#ebe9e4;font-family:var(--f-jp);font-size:12px;line-height:1.6}
.shopmap__canvas:focus{outline:none}
.shopmap__canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.shopmap__canvas .maplibregl-canvas{outline:none}
.shopmap__noscript{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:24px;text-align:center;
  font-size:13px;line-height:1.9;color:var(--ink-soft);background:rgba(232,231,228,.7)}

/* HUD（件数・地名） */
.shopmap__hud{position:absolute;left:clamp(12px,1.6vw,22px);top:clamp(12px,1.6vw,22px);z-index:3;display:flex;flex-direction:column;gap:5px;
  pointer-events:none;font-family:var(--f-label);font-size:10.5px;letter-spacing:.24em;color:var(--ink)}
.shopmap__count{display:inline-flex;align-items:baseline;gap:8px;align-self:flex-start;background:var(--ink);color:#fff;padding:8px 12px 7px}
.shopmap__count b{font-family:var(--f-display);font-size:24px;letter-spacing:.04em;line-height:1;font-weight:400}
.shopmap__hud>span:last-child{padding-left:2px;color:var(--muted)}

/* 絞り込み */
.shopmap__filters{position:absolute;right:clamp(12px,1.6vw,22px);top:clamp(12px,1.6vw,22px);z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.shopmap__filters button{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);border:1px solid var(--line);
  padding:8px 13px;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.4;color:var(--ink-soft);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.3s var(--ease)}
.shopmap__filters button i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;background:var(--ink);color:#fff;font-size:11px;font-weight:900;transition:background .3s}
.shopmap__filters button:hover{border-color:var(--ink)}
.shopmap__filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.shopmap__filters button.on i{background:var(--accent)}
.shopmap__filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- MapLibre の操作UIをテーマに揃える ---------- */
.shopmap__canvas .maplibregl-ctrl-group{border-radius:0;box-shadow:0 10px 24px rgba(0,0,0,.18);background:var(--ink)}
.shopmap__canvas .maplibregl-ctrl-group button{width:36px;height:36px;border-radius:0!important;border:0;
  border-bottom:1px solid rgba(255,255,255,.18);background:var(--ink);transition:background .3s}
.shopmap__canvas .maplibregl-ctrl-group button+button{border-top:0}
.shopmap__canvas .maplibregl-ctrl-group button:last-child{border-bottom:0}
.shopmap__canvas .maplibregl-ctrl-group button:hover{background:var(--accent)}
.shopmap__canvas .maplibregl-ctrl-group button:focus{box-shadow:none}
.shopmap__canvas .maplibregl-ctrl-group button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shopmap__canvas .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z' fill='%23fff'/%3E%3C/svg%3E")}
.shopmap__canvas .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z' fill='%23fff'/%3E%3C/svg%3E")}
.shopmap__canvas .maplibregl-ctrl-bottom-right{right:12px;bottom:12px}
.shopmap__canvas .maplibregl-ctrl-bottom-left{left:12px;bottom:12px}
.shopmap__canvas .maplibregl-ctrl-bottom-left .maplibregl-ctrl{margin:0}
.shopmap__canvas .maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0}
.shopmap__canvas .maplibregl-ctrl-attrib{padding:3px 8px;background:rgba(235,233,228,.9);font:10px/1.6 var(--f-jp);color:var(--muted);border-radius:0}
.shopmap__canvas .maplibregl-ctrl-attrib a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.shopmap__canvas .maplibregl-cooperative-gesture-screen{background:rgba(12,12,12,.55);color:#fff;font-family:var(--f-jp);font-size:14px;font-weight:700;letter-spacing:.04em}
.shopmap__canvas .maplibregl-marker{will-change:transform}

/* ---------- ピン ----------
   MapLibre はピン要素自体を transform で配置するため、
   アニメーションは内側の .shopmap-pin__in にだけ掛ける（外側の transform を触らない）。 */
.shopmap-pin{display:block;width:40px;height:48px;padding:0;background:none;border:0;overflow:visible;cursor:pointer;font:inherit;color:inherit}
.shopmap-pin:focus{outline:none}
.shopmap-pin:focus-visible .shopmap-pin__dot{outline:2px solid var(--ink);outline-offset:3px}
.shopmap-pin__in{position:absolute;inset:0}
.shopmap-pin__in::after{content:"";position:absolute;left:50%;bottom:0;margin-left:-7px;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--accent);transition:border-top-color .3s}
.shopmap-pin__dot{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;border:2px solid #fff;box-shadow:0 10px 22px rgba(12,12,12,.32);
  font-family:var(--f-jp);font-style:normal;font-weight:900;font-size:14px;line-height:1;
  transition:transform .35s var(--ease),background .3s,border-color .3s}
.shopmap-pin__no{position:absolute;top:-6px;right:-3px;font-family:var(--f-label);font-weight:600;font-size:10px;letter-spacing:.06em;line-height:1;
  background:var(--ink);color:#fff;padding:3px 5px 2px;pointer-events:none}
.shopmap-pin:hover .shopmap-pin__dot,.shopmap-pin.is-hot .shopmap-pin__dot,.shopmap-pin.is-active .shopmap-pin__dot,.shopmap-pin:focus-visible .shopmap-pin__dot{
  transform:translateX(-50%) scale(1.18);background:var(--ink);border-color:var(--accent)}
.shopmap-pin:hover .shopmap-pin__in::after,.shopmap-pin.is-hot .shopmap-pin__in::after,.shopmap-pin.is-active .shopmap-pin__in::after{border-top-color:var(--ink)}
@keyframes shopmapDrop{0%{opacity:0;transform:translateY(-16px)}100%{opacity:1;transform:none}}
.shopmap.is-ready .shopmap-pin__in{animation:shopmapDrop .55s var(--ease-out) both}

/* ---------- ポップアップ ---------- */
.shopmap-popup{z-index:4}
.shopmap-popup .maplibregl-popup-content{border-radius:0;padding:0;background:var(--ink);color:#fff;box-shadow:0 24px 56px rgba(0,0,0,.38);width:280px;max-width:calc(100vw - 48px)}
.shopmap-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--ink)}
.shopmap-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--ink)}
.shopmap-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--ink)}
.shopmap-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--ink)}
.shopmap-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,.shopmap-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:var(--ink)}
.shopmap-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,.shopmap-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:var(--ink)}
.shopmap-popup .maplibregl-popup-close-button{top:4px;right:4px;z-index:3;width:30px;height:30px;font-size:22px;line-height:30px;color:#fff;
  background:rgba(0,0,0,.35);border-radius:50%;border:0;transition:background .3s;font-family:inherit}
.shopmap-popup .maplibregl-popup-close-button:hover{background:var(--accent)}
.shopmap-pop{display:block;width:100%;color:#fff;text-decoration:none}
.shopmap-pop__img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#191919}
.shopmap-pop__img img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(40%);transition:filter .5s,transform .8s var(--ease)}
.shopmap-pop:hover .shopmap-pop__img img{filter:none;transform:scale(1.05)}
.shopmap-pop__img.is-empty{display:grid;place-items:center;font-size:44px;font-weight:900;color:rgba(255,255,255,.22)}
.shopmap-pop__body{display:block;padding:14px 16px 16px}
.shopmap-pop__cat{display:block;font-family:var(--f-label);font-size:10px;letter-spacing:.2em;color:var(--accent);line-height:1.6}
.shopmap-pop__shop{display:block;margin-top:6px;font-size:15px;font-weight:900;line-height:1.5}
.shopmap-pop__addr{display:block;margin-top:4px;font-size:11px;line-height:1.7;color:rgba(255,255,255,.65)}
.shopmap-pop__ttl{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;font-weight:700;line-height:1.7}
.shopmap-pop__go{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--f-label);font-size:11px;letter-spacing:.24em;color:#fff}
.shopmap-pop__go i{font-style:normal;display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.5);border-radius:50%;transition:.4s var(--ease)}
.shopmap-pop:hover .shopmap-pop__go i{background:var(--accent);border-color:var(--accent);transform:translateX(5px)}

/* ---------- リスト ---------- */
.shopmap__list{position:relative;display:flex;flex-direction:column;max-height:clamp(420px,58vh,640px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--ink) transparent;border-top:6px solid var(--ink);padding-right:4px}
.shopmap__item{position:relative;border-bottom:1px solid var(--line)}
.shopmap__item[hidden]{display:none}
.shopmap__card{display:grid;grid-template-columns:auto 104px 1fr;gap:14px;align-items:center;padding:14px 84px 14px 4px;transition:background .35s}
.shopmap__item:hover .shopmap__card,.shopmap__item.is-active .shopmap__card{background:rgba(255,255,255,.8)}
.shopmap__no{min-width:30px;font-family:var(--f-display);font-size:22px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--ink);transition:.3s}
.shopmap__item:hover .shopmap__no,.shopmap__item.is-active .shopmap__no{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.shopmap__thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#111}
.shopmap__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(55%);transition:transform .7s var(--ease),filter .5s}
.shopmap__item:hover .shopmap__thumb img,.shopmap__item.is-active .shopmap__thumb img{transform:scale(1.08);filter:none}
.shopmap__thumb i{position:absolute;left:0;top:0;z-index:2;font-style:normal;display:grid;place-items:center;width:22px;height:22px;background:var(--accent);color:#fff;font-size:11px;font-weight:900}
.shopmap__thumb.is-empty{display:grid;place-items:center;color:rgba(255,255,255,.3);font-weight:900;font-size:22px}
.shopmap__body{min-width:0}
.shopmap__shop{display:block;font-size:14px;font-weight:900;line-height:1.55}
.shopmap__addr{display:block;margin-top:3px;font-size:11px;line-height:1.6;color:var(--muted)}
.shopmap__ttl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:12px;font-weight:500;line-height:1.65;color:var(--ink-soft);transition:color .3s}
.shopmap__item:hover .shopmap__ttl{color:var(--accent)}
.shopmap__locate{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;align-items:center;gap:6px;
  font-family:var(--f-label);font-size:10px;letter-spacing:.18em;line-height:1;padding:8px 10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);transition:.3s}
.shopmap.is-ready .shopmap__locate{display:inline-flex}
.shopmap__locate::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transition:background .3s}
.shopmap__locate:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.shopmap__locate:hover::before{background:#fff}
.shopmap__locate:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .shopmap__grid{grid-template-columns:1.15fr 1fr}
  .shopmap__card{grid-template-columns:auto 88px 1fr;padding-right:78px}
}
@media(max-width:820px){
  .shopmap{padding-top:clamp(64px,9vw,90px)}
  .shopmap__grid{grid-template-columns:1fr;gap:22px}
  .shopmap__stage{min-height:min(62svh,520px)}
  .shopmap__list{max-height:none;overflow:visible;padding-right:0}
  .shopmap__card{grid-template-columns:auto 92px 1fr;gap:12px;padding:14px 74px 14px 2px}
  .shopmap__no{font-size:19px;min-width:26px}
  .shopmap__hud{font-size:9.5px;letter-spacing:.2em}
  .shopmap__count b{font-size:20px}
  .shopmap__filters{top:auto;bottom:34px;left:12px;right:auto;justify-content:flex-start;gap:5px;max-width:calc(100% - 130px)} /* 右下固定の取材バッジを避けて左下へ（出典表記の上） */
  .shopmap__filters button{padding:7px 9px;font-size:11px;gap:5px}
  .shopmap__filters button i{width:16px;height:16px;font-size:9px}
  .shopmap__canvas .maplibregl-ctrl-bottom-right{display:none} /* スマホはピンチで拡大縮小 */
  .shopmap__canvas .maplibregl-ctrl-bottom-left{left:0;bottom:0}
  .shopmap__canvas .maplibregl-ctrl-attrib{font-size:9px;padding:2px 6px}
  .shopmap__stage::after{box-shadow:inset 0 0 0 1px rgba(12,12,12,.14)}
}
@media(max-width:560px){
  .shopmap__lead{margin-top:0}
  .shopmap__card{grid-template-columns:auto 76px 1fr;padding-right:66px}
  .shopmap__shop{font-size:13.5px}
  .shopmap__ttl{-webkit-line-clamp:2;font-size:11.5px}
  .shopmap__locate{padding:7px 8px;font-size:9.5px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .shopmap *,.shopmap-pin *,.shopmap-popup *{transition:none!important;animation:none!important}
  .shopmap.is-ready .shopmap-pin__in{animation:none}
  .shopmap__item:hover .shopmap__thumb img,.shopmap-pop:hover .shopmap-pop__img img{transform:none}
}