/* 草間彌生 めぐり — 共通スタイル（index.html / list.html）
   モノクロームに一色だけ。赤は「行けば見られる」を示すときにしか使わない。 */

:root{
  --paper:#f6f5f1;
  --card:#ffffff;
  --ink:#141414;
  --ink2:#3a3a38;
  --mute:#8b8a85;
  --line:#dcdad3;
  --line2:#ebe9e3;
  --red:#e0251b;           /* ただ一つの色 */
  --gutter:16px;
  --maxw:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:15px;line-height:1.75;letter-spacing:.02em;
}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- 水玉（索引の単位） ---------- */
.dot{display:inline-block;border-radius:50%;flex:none;vertical-align:middle}
.s-dedicated{width:26px;height:26px}
.s-permanent{width:18px;height:18px}
.s-outdoor{width:14px;height:14px}
.s-collection{width:9px;height:9px}
.v-see{background:var(--red)}
.v-col{background:var(--ink)}
.v-off{background:transparent;border:1.5px dashed var(--mute)}
.v-unk{background:transparent;border:1.5px solid var(--ink2)}

/* ---------- ヘッダー ---------- */
.site-head{padding:40px 0 20px;border-bottom:1px solid var(--ink)}
.site-head .eyebrow{font-size:12px;letter-spacing:.2em;color:var(--mute);margin:0 0 6px}
.site-head h1{font-size:clamp(30px,7vw,52px);font-weight:900;line-height:1.15;margin:0;letter-spacing:.04em}
.site-head h1 .i{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--red);vertical-align:.55em;margin-left:.12em}
.site-head .lead{margin:14px 0 0;color:var(--ink2);max-width:46em}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;
  background:transparent;color:var(--ink);font:inherit;font-size:14px;text-decoration:none;cursor:pointer;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.is-on{background:var(--ink);color:var(--paper)}

/* ---------- 集計 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--line)}
.stat{padding:16px 12px 14px 0}
.stat b{display:block;font-size:30px;font-weight:900;line-height:1.1}
.stat span{font-size:12px;color:var(--mute)}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- 凡例 ---------- */
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:13px;color:var(--ink2);padding:14px 0}
.legend .k{display:inline-flex;align-items:center;gap:8px}
.legend .sep{width:1px;height:16px;background:var(--line)}

/* ---------- セクション ---------- */
.sec{padding:30px 0 6px}
.sec h2{font-size:13px;letter-spacing:.24em;font-weight:700;margin:0 0 4px}
.sec .note{font-size:13px;color:var(--mute);margin:0 0 14px}

/* ---------- 年表 ---------- */
.tl-wrap{position:relative}
.tl-labels{position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none}
.tl-labels i{position:absolute;left:0;font-style:normal;font-size:11px;color:var(--mute);background:var(--card);padding:0 6px 0 4px;white-space:nowrap;z-index:4;border-right:1px solid var(--line2)}
.tl{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.tl-inner{position:relative;height:260px}
.tl-lane{position:absolute;left:0;right:0;border-top:1px dotted var(--line)}
.tl-tick{position:absolute;bottom:0;width:1px;top:0;background:var(--line2)}
.tl-tick b{position:absolute;bottom:4px;left:4px;font-size:11px;font-weight:400;color:var(--mute)}
.tl-pt{
  position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;
  display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:3;
}
.tl-pt .dot{transition:transform .15s}
.tl-pt:hover .dot,.tl-pt:focus-visible .dot{transform:scale(1.5)}
.tl-pt:focus-visible{outline:2px solid var(--ink);outline-offset:-10px;border-radius:50%}
.tl-tip{
  position:absolute;z-index:10;pointer-events:none;background:var(--ink);color:var(--paper);
  font-size:12px;line-height:1.5;padding:6px 10px;border-radius:4px;max-width:260px;display:none;
}

/* ---------- 地図 ---------- */
.map-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.map-box{position:relative;height:520px;border:1px solid var(--ink);background:#e9e8e4}
@media (max-width:640px){.map-box{height:420px}}
#map{position:absolute;inset:0}
.map-lock{
  position:absolute;inset:0;z-index:800;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;
  background:transparent;border:0;cursor:pointer;font:inherit;
}
.map-lock span{background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.map-lock[hidden]{display:none}
.leaflet-container{font-family:inherit;background:#e9e8e4}
.leaflet-tile-pane{filter:grayscale(1) brightness(1.04) contrast(.92)}   /* モノクロームに一色だけ：地図も無彩色に */
.leaflet-popup-content{margin:12px 14px;font-size:13px;line-height:1.6}
.leaflet-popup-content b{font-size:14px}
.leaflet-popup-content a{display:inline-block;margin-top:6px;padding:6px 0}
.map-off{font-size:13px;color:var(--mute);margin:8px 0 0}

/* ---------- 一覧 ---------- */
.tools{position:sticky;top:0;z-index:20;background:var(--paper);padding:14px 0 10px;border-bottom:1px solid var(--line)}
.search{
  width:100%;min-height:44px;font:inherit;font-size:16px;  /* 16px未満だとiOSが拡大する */
  padding:8px 14px;border:1px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);
}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{
  min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.count{font-size:13px;color:var(--mute);margin:10px 0 0}

.group{margin-top:26px}
.group h3{font-size:13px;letter-spacing:.2em;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.item{
  display:grid;grid-template-columns:34px 1fr;gap:4px 10px;padding:16px 10px 16px 0;border-bottom:1px solid var(--line);
  scroll-margin-top:150px;transition:background-color .6s;
}
.item .mark{display:flex;justify-content:center;padding-top:6px}
.item h4{margin:0;font-size:17px;line-height:1.5;font-weight:700}
.item .meta{font-size:12px;color:var(--mute);margin:2px 0 0}
.item .kind{display:inline-block;border:1px solid var(--ink2);border-radius:3px;padding:0 6px;font-size:11px;color:var(--ink2);margin-right:6px;line-height:1.7}
.item .see{font-size:13px;margin:6px 0 0}
.item .see b{font-weight:700}
.item .off{color:var(--ink);background:#e8e6df;padding:2px 8px;border-radius:3px;font-size:13px;display:inline-block;margin-top:6px}
.item ul.works{margin:6px 0 0;padding:0;list-style:none;font-size:13px;color:var(--ink2)}
.item ul.works li::before{content:"・"}
.item .addr{font-size:13px;margin:6px 0 0}
.item .addr.unk{color:var(--mute)}
.item .links{display:flex;flex-wrap:wrap;gap:0 14px;font-size:12px;margin-top:4px}
.item .links a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink2)}
.item .memo{font-size:12px;color:var(--mute);margin:4px 0 0}
.item.flash{background:#e2dfd5}
.item .body{min-width:0}

/* ---------- フッター ---------- */
.site-foot{margin:48px 0 0;padding:20px 0 40px;border-top:1px solid var(--ink);font-size:12px;color:var(--mute)}
.site-foot p{margin:4px 0}