/* site-map.css — 場所の地図（ホーム・場所の設定）。部品は /js/site-map.js、ホームの配線は /js/home.js。
   トークンは main.css の :root を使う（⛔ ここで色を新しく決めない）。 */

.smap-card { margin-bottom: 1.25rem; }
.smap-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: stretch;
}
.smap-wrap.is-no-side { grid-template-columns: minmax(0, 1fr); }
.smap-canvas-box {
  position: relative; min-height: 360px; border-radius: var(--radius-sm, 8px); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
}
.smap-canvas { position: absolute; inset: 0; }
.smap-side { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; max-height: 360px; overflow: auto; }
.smap-side-title { font-size: 0.66rem; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.35rem; }
.smap-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.66rem; color: var(--muted); margin-top: 0.6rem; }
.smap-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.smap-note { font-size: 0.68rem; color: var(--dim); margin-top: 0.4rem; line-height: 1.6; }

/* 一覧の行（地図の横・鍵が無いときの代わり） */
.smap-row {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: inherit;
}
.smap-row + .smap-row { margin-top: 0.4rem; }
.smap-row:hover { background: var(--hover-bg); }
.smap-row.is-error { border-color: var(--error); background: var(--error-bg); }
.smap-row.is-warn { border-color: var(--warn); background: var(--warn-bg); }
.smap-row-main { flex: 1; min-width: 0; }
.smap-row-name { font-size: 0.78rem; font-weight: 600; }
.smap-row-sub { font-size: 0.66rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smap-row-state { font-size: 0.66rem; font-weight: 600; white-space: nowrap; }
.smap-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; }
.smap-list-grid .smap-row + .smap-row { margin-top: 0; }

/* 色の点（ピン・行・凡例で共通） */
.smap-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 0.2rem; background: var(--ok); }
.smap-dot.is-warn { background: var(--warn); }
.smap-dot.is-error { background: var(--error); box-shadow: 0 0 0 3px var(--error-bg); }
.smap-dot.is-offline { background: var(--dim); }
.tone-ok { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-error { color: var(--error); }
.tone-offline { color: var(--dim); }

/* ピン（OverlayView の中・中心が座標） */
/* 🆕 2026-10-30（人間）＝押せるのは丸だけ（波紋・余白は素通し＝近くの別の点を押せるように）。 */
.smap-pin {
  position: absolute; transform: translate(-50%, -50%); padding: 0; border: none; background: none; cursor: pointer;
  width: 28px; height: 28px; display: grid; place-items: center; pointer-events: none;
}
.smap-pin-dot {
  display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--ok);
  border: 2px solid var(--bg); box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.55);
  pointer-events: auto; cursor: pointer;
}
.smap-pin.is-offline .smap-pin-dot { background: var(--dim); }
.smap-pin.is-warn .smap-pin-dot { width: 16px; height: 16px; background: var(--warn); }
.smap-pin.is-error { width: 44px; height: 44px; }
.smap-pin.is-error .smap-pin-dot { width: 20px; height: 20px; background: var(--error); position: relative; }
/* エラーは脈打つ輪で目立たせる（⛔ 動きを減らす設定の人には動かさない＝太い輪だけ） */
.smap-pin.is-error::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--error);
  animation: smap-pulse 1.6s ease-out infinite; pointer-events: none;
}
@keyframes smap-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .smap-pin.is-error::before { animation: none; transform: none; opacity: 0.7; inset: 4px; border-width: 3px; }
}
.smap-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.smap-pin.is-selected .smap-pin-dot { box-shadow: 0 0 0 3px var(--accent), 0 2px 6px rgba(0,0,0,0.55); }

/* ピンを押したときの札（地図の下端に重ねる・PC も SP も同じ位置） */
.smap-pop {
  position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 5; max-width: 360px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 8px);
  padding: 0.75rem 0.85rem; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.smap-pop[hidden] { display: none; }
.smap-pop-head { display: flex; align-items: center; gap: 0.5rem; }
.smap-pop-name { font-size: 0.82rem; font-weight: 650; flex: 1; min-width: 0; }
.smap-pop-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.15rem 0.3rem; }
.smap-pop-sub { font-size: 0.66rem; color: var(--dim); margin-top: 0.2rem; }
.smap-pop-list { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.7rem; }
.smap-pop-list li { display: flex; gap: 0.5rem; padding: 0.15rem 0; }
.smap-pop-list li span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smap-pop-link { display: inline-block; margin-top: 0.55rem; font-size: 0.7rem; color: var(--accent-fg); text-decoration: none; }
.smap-pop-link:hover { text-decoration: underline; }
/* 🆕 2026-10-30（人間）＝場所名（と右の遷移アイコン）で場所を開く・「詳細」は状態の移り変わりのアコーディオン */
.smap-pop { max-height: calc(100% - 1.5rem); overflow: auto; }
.smap-pop:has(.smap-pop-detail[open]) { max-width: 600px; }
.smap-pop-name { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--fg); text-decoration: none; flex: 0 1 auto; }
.smap-pop-head .smap-row-state { margin-left: auto; }
.smap-pop-name:hover { color: var(--accent-fg); }
.smap-pop-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smap-pop-name svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--muted); }
.smap-pop-name:hover svg { color: var(--accent-fg); }
.smap-pop-detail { margin-top: 0.55rem; }
.smap-pop-detail > summary { cursor: pointer; font-size: 0.7rem; color: var(--accent-fg); list-style: none; display: inline-flex; align-items: center; gap: 0.25rem; }
.smap-pop-detail > summary::-webkit-details-marker { display: none; }
.smap-pop-detail > summary::before { content: '▸'; font-size: 0.6rem; transition: transform 0.15s; }
.smap-pop-detail[open] > summary::before { transform: rotate(90deg); }
.smap-pop-tl { margin-top: 0.45rem; position: relative; }

/* 場所の設定（sites.html）の小さな地図 */
.smap-edit { margin-top: 0.75rem; }
.smap-edit-map { position: relative; height: 220px; border-radius: var(--radius-sm, 8px); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.smap-edit-hint { font-size: 0.66rem; color: var(--dim); margin-top: 0.35rem; line-height: 1.6; }
.smap-edit-hint:empty { display: none; }
/* 🆕 2026-10-30（人間）＝郵便番号・住所の横にボタン（住所に反映／地図に反映）。ピンを置くボタンは地図の左上に重ねる。 */
.smap-addr-row { display: flex; gap: 0.5rem; align-items: center; }
.smap-addr-row + .smap-addr-row { margin-top: 0.5rem; }
.smap-edit-map-box { position: relative; }
.smap-edit-drop {
  position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2;
  width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 8px);
  background: var(--surface-2); color: var(--fg); box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.smap-edit-drop:hover { border-color: var(--muted); }

@media (max-width: 860px) {
  .smap-wrap { grid-template-columns: minmax(0, 1fr); }
  .smap-canvas-box { min-height: 300px; }
  .smap-side { max-height: none; overflow: visible; }
}