/* ===========================================================
   元町銀座商店街 全58店 ディレクトリ（架空）
   型: index(一覧が主役) × high(高密度) × no-hero(ヒーロー無し) × plain(実務的)

   方針:
   ・ヒーローを持たない。最初の画面はいきなり「名札帯＋ツールバー＋一覧」。
   ・暖色1色（べんがら色）＋クラフト紙のトーンのみ。ネオン・多色は使わない。
   ・動きは craftkit の reveal(stagger相当は自前の --i で軽く制御)のみ。
     58件は「静かな高密度」で見せる＝罫線・余白・数字の揃えで finish を出す。
   =========================================================== */

:root{
  --paper:#f4ecdc;
  --paper-2:#ece0c6;
  --surface:#fffbf1;
  --surface-2:#f7efdf;
  --ink:#2c2318;
  --ink-2:#5c5140;
  --ink-3:#8f8268;
  --line:#ddcda8;
  --accent:#b8452b;      /* べんがら色（暖色1色） */
  --accent-ink:#8c351f;

  --serif:"Yuji Syuku","Zen Old Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --mono:"Martian Mono","JetBrains Mono",monospace;
  --wrap:1180px;

  --ck-load-bg:#f4ecdc;
  --ck-load-fg:#2c2318;
}

*{box-sizing:border-box}
html,body{margin:0; overflow-x:hidden; max-width:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.icon-defs{position:absolute; width:0; height:0; overflow:hidden}

/* ---------- マストヘッド（ヒーローではない実務的な名札帯） ---------- */
.mh{background:var(--paper); border-bottom:2px solid var(--ink); padding:16px 20px}
.mh-in{
  max-width:var(--wrap); margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap;
}
.mh-eyebrow{margin:0 0 4px; font:700 10.5px var(--mono); letter-spacing:.18em; color:var(--accent-ink)}
.mh-name{
  margin:0; font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(22px,3.4vw,32px); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.mh-name span{
  font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:3px 11px;
}
.mh-stats{display:flex; gap:20px; margin:0}
.mh-stats > div{text-align:right}
.mh-stats dt{margin:0; font-size:10px; color:var(--ink-3); letter-spacing:.04em}
.mh-stats dd{margin:1px 0 0; font-family:var(--mono); font-size:15px; color:var(--ink)}
.mh-stats b{color:var(--accent-ink); font-weight:700}

/* ---------- ツールバー（検索・フィルタ・並べ替え・表示切替） ---------- */
.toolbar{
  position:sticky; top:0; z-index:20;
  background:rgba(244,236,220,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); padding:10px 20px 8px;
}
.tb-in{max-width:var(--wrap); margin:0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.search{
  flex:1 1 220px; min-width:0; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:10px; padding:8px 12px;
}
.search:focus-within{border-color:var(--accent)}
.s-ic{width:15px; height:15px; flex:none; fill:none; stroke:var(--ink-3); stroke-width:2}
.search input{border:0; background:none; outline:0; font:500 14px var(--sans); color:var(--ink); width:100%; min-width:0}
.search input::placeholder{color:var(--ink-3)}

.tb-right{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-left:auto}

.sw{display:flex; align-items:center; gap:8px; font:600 12.5px var(--sans); color:var(--ink-2); cursor:pointer; user-select:none}
.sw input{position:absolute; opacity:0; width:1px; height:1px}
.sw-track{width:34px; height:19px; border-radius:99px; background:var(--line); position:relative; transition:background .2s; flex:none}
.sw-track::after{
  content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(44,35,24,.3); transition:transform .2s;
}
.sw input:checked + .sw-track{background:var(--accent)}
.sw input:checked + .sw-track::after{transform:translateX(15px)}
.sw input:focus-visible + .sw-track{outline:2px solid var(--accent-ink); outline-offset:2px}

.sort-wrap{display:flex; align-items:center; gap:6px; font:600 12px var(--sans); color:var(--ink-2)}
.sort-wrap select{
  font:600 12.5px var(--sans); color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line); border-radius:8px; padding:6px 8px;
}

.view-toggle{display:flex; border:1.5px solid var(--line); border-radius:8px; overflow:hidden; flex:none}
.v-btn{
  width:32px; height:30px; display:grid; place-items:center; background:var(--surface);
  border:0; border-left:1px solid var(--line); cursor:pointer; color:var(--ink-3);
}
.v-btn:first-child{border-left:0}
.v-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8}
.v-btn.is-active{background:var(--accent); color:#fff}
.v-btn:focus-visible, .chip:focus-visible, .search input:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}

.chips{
  max-width:var(--wrap); margin:10px auto 0; display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
  padding-bottom:3px; scrollbar-width:thin;
}
.chip{
  flex:none; display:inline-flex; align-items:center; gap:6px; font:600 12.5px var(--sans); color:var(--ink-2);
  background:var(--surface); border:1.5px solid var(--line); border-radius:99px; padding:6px 12px 6px 10px;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s;
}
.chip-ic{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7}
.chip-n{font-family:var(--mono); font-size:10px; color:var(--ink-3); background:var(--paper-2); border-radius:99px; padding:1px 6px}
.chip.is-active{background:var(--accent); border-color:var(--accent); color:#fff}
.chip.is-active .chip-n{background:rgba(255,255,255,.28); color:#fff}
.chip:hover{border-color:var(--accent-ink)}

/* ---------- 一覧（主役） ---------- */
.main-wrap{padding-top:16px; padding-bottom:6px}
.result-row{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 12px; font:600 12px var(--mono); color:var(--ink-3)}
.reset-link, .reset-link2{color:var(--accent-ink); text-decoration:none; font-weight:700}
.reset-link:hover, .reset-link2:hover{text-decoration:underline}

.grid.view-card{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:14px; padding:2px 0 8px}
.card{
  background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:14px 15px 12px;
  display:flex; flex-direction:column; gap:5px; transition-delay:calc(var(--i,0) * 45ms);
}
.c-top{display:flex; align-items:center; justify-content:space-between}
.c-ic{width:21px; height:21px; color:var(--accent-ink); fill:none; stroke:currentColor; stroke-width:1.5}
.badge{font:700 10px var(--mono); letter-spacing:.02em; border-radius:99px; padding:3px 9px; white-space:nowrap}
.badge-open{background:var(--accent); color:#fff}
.badge-closed{background:var(--paper-2); color:var(--ink-3); border:1px solid var(--line)}
.badge-holiday{background:transparent; color:var(--ink-3); border:1px dashed var(--line)}
.c-name{margin:3px 0 0; font-family:var(--serif); font-weight:400; font-size:18px; color:var(--ink); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.c-new{font:800 9px var(--mono); color:#fff; background:var(--accent-ink); border-radius:4px; padding:1px 5px; letter-spacing:.02em}
.c-meta{margin:0; font-size:11px; color:var(--ink-3); font-family:var(--mono)}
.c-hours{margin:3px 0 0; font-family:var(--mono); font-size:12.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:7px; align-items:baseline}
.c-closed{font-size:10.5px; color:var(--ink-3)}
.c-tag{margin:5px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.65; flex:1}
.c-since{margin:3px 0 0; font-size:10.5px; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:6px}

.grid.view-list{display:flex; flex-direction:column; padding:2px 0 8px}
.row{
  display:grid; grid-template-columns:24px 1.5fr .95fr 1fr 1.35fr auto; align-items:center; gap:12px;
  padding:9px 10px; border-bottom:1px solid var(--line); background:var(--surface);
  transition-delay:calc(var(--i,0) * 35ms);
}
.row:nth-child(even){background:var(--surface-2)}
.row-head{
  background:var(--paper-2) !important; border-radius:8px 8px 0 0; border-bottom:2px solid var(--ink);
  font:700 10px var(--mono); color:var(--ink-3); letter-spacing:.03em; position:sticky; top:104px; z-index:5;
}
.r-ic{width:18px; height:18px; color:var(--accent-ink); fill:none; stroke:currentColor; stroke-width:1.5}
.r-name{font-family:var(--serif); font-size:15px; color:var(--ink); display:flex; flex-direction:column; gap:1px; min-width:0}
.r-kana{font-family:var(--sans); font-size:10px; color:var(--ink-3); font-weight:500}
.r-cat{font-size:12px; color:var(--ink-2)}
.r-no{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.r-hours{font-family:var(--mono); font-size:12px; color:var(--ink-2); display:flex; flex-direction:column; gap:1px}
.r-hours .c-closed{font-size:10px}

.empty{text-align:center; padding:70px 20px; color:var(--ink-3); font:600 14px var(--sans)}

@media (prefers-reduced-motion:reduce){
  .card, .row{transition-delay:0ms !important}
}

/* ---------- 沿革メモ／アクセス／発行元 ---------- */
.about{background:var(--paper-2); border-top:1.5px solid var(--line); padding:46px 0 30px}
.about-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px}
.ab-h{margin:0 0 12px; font-family:var(--serif); font-weight:400; font-size:19px; color:var(--ink); padding-bottom:8px; border-bottom:2px solid var(--accent)}
.ab-col p{margin:0 0 10px; font-size:13px; color:var(--ink-2); line-height:1.85}
.ab-list{list-style:none; margin:0 0 16px; padding:0; font-size:12.5px; color:var(--ink-2)}
.ab-list li{padding:7px 0; border-top:1px dashed var(--line)}
.ab-list li:first-child{border-top:0}
.ab-list b{display:block; font-size:10px; color:var(--ink-3); letter-spacing:.04em; margin-bottom:1px}
.ab-map{width:100%; height:auto; color:var(--ink-2)}
.ab-map line{stroke:var(--line); stroke-width:2; fill:none}
.ab-map circle{fill:var(--accent); stroke:none}
.ab-map text{font:600 9px var(--mono); fill:var(--ink-3)}
.ab-addr{font-style:normal}
.ab-addr p{margin:0 0 8px; font-size:13px; color:var(--ink-2); line-height:1.8}
.ab-issue{font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* ---------- フッター ---------- */
.ft{background:var(--ink); color:#cdbfa0; padding:26px 20px; font-size:11.5px; line-height:1.85}
.ft p{max-width:var(--wrap); margin:0 auto 8px}
.ft b{color:#fff}
.ft-c{color:#8f836c}

/* ---------- レスポンシブ ---------- */
@media (max-width:960px){
  .about-grid{grid-template-columns:1fr; gap:28px}
  .row{grid-template-columns:22px 1.4fr 1fr auto; gap:10px}
  .r-no, .r-hours{display:none}
  .row-head span:nth-child(4), .row-head span:nth-child(5){display:none}
}
@media (max-width:640px){
  .mh-in{align-items:flex-start}
  .mh-stats{gap:12px}
  .tb-right{width:100%; justify-content:space-between}
  .grid.view-card{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
  .card{padding:12px 12px 11px}
  .row{grid-template-columns:20px 1fr auto; gap:8px}
  .r-cat{display:none}
  .row-head span:nth-child(3){display:none}
  .about-grid{gap:24px}
}
@media (max-height:680px){
  .mh{padding:10px 20px}
  .toolbar{padding:8px 20px 6px}
  .chips{margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}