/*
 * 検索ページ（search.php + js/search.js）。
 *
 * 絞り込みは、スマホでは「絞り込み」ボタン（.filter-open）で下から出るシート、
 * PC（1024px〜）では同じ DOM を左の欄にそのまま置く。開閉は js/search.js の setupFilterDrawer()
 * （.is-open の付け外しと body のスクロール止め）。class 名は js/search.js が組む HTML と対になっている。
 */

/* ===== 検索欄と絞り込みボタンの行 =====
   スマホでは .search-aside ごと画面の上に貼り付ける（下まで見ていても検索・絞り込みに手が届く）。
   .search-aside が低いので、中の行ではなく aside 自体を sticky にする */
.search-aside {
  position: sticky; top: 0; z-index: 30;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-sakura);
  border-bottom: 1px solid var(--c-rose-pale);
}
/* 絞り込みのシートは .search-aside の中にあるので、z-index: 50 でも aside の 30 の中でしか効かず、
   下のタブ（base.css の .tabbar、40）の下になって「◯店を見る」が隠れていた（2026-11-04）。開いている間だけ aside ごと上げる */
.search-aside:has(.filter-drawer.is-open) { z-index: 60; }
.search-bar { display: flex; gap: var(--sp-2); }
.search-bar .search-field { flex: 1; min-width: 0; }
.filter-open { flex: none; padding: 0 var(--sp-3); gap: var(--sp-1); }
.filter-open .icon { width: 1.2rem; height: 1.2rem; }

/* ===== 検索欄 ===== */
.search-field { position: relative; }
/* type="search" だと Chrome が独自の余白とクリアボタンを足して二重になるので type="text" にしてある */
.search-field__input {
  width: 100%;
  height: 2.75rem;
  padding: 0 2.5rem 0 2.5rem;
  border: var(--rule);
  border-radius: 999px;
  background: var(--c-paper);
  font-size: max(var(--fs-md), 16px); /* 16px 未満だと iPhone がフォーカス時に拡大する */
  text-overflow: ellipsis;
}
.search-field__input::placeholder { color: var(--c-ink-placeholder); }
/* 右の 2.5rem は ✕ の場所。✕ は字がある時しか出ないので、空の間は詰めて例の言葉に回す。
   それでも入らない時（320px）は「…」で終える（上の text-overflow。2026-11-08） */
.search-field__input:placeholder-shown { padding-right: var(--sp-3); }
.search-field__input:focus { outline: 2px solid var(--c-rose-deep); outline-offset: 1px; }
.search-field__icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--c-rose); pointer-events: none; }
.search-field__clear {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border-radius: 50%;
  color: var(--c-ink-soft);
}

/* 過去に検索したことば（履歴は端末の localStorage だけ） */
.search-history {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  margin-top: var(--sp-1);
  background: var(--c-paper);
  border: var(--rule);
}
.search-history__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs); color: var(--c-ink-soft);
}
.search-history__clear { text-decoration: underline; text-underline-offset: 2px; }
/* 1 行 = 語（押すとその語で検索）＋ 右端の ✕（その語だけ履歴から消す。2026-11-11） */
.search-history li { display: flex; align-items: stretch; }
.search-history__item { flex: 1; min-width: 0; padding: var(--sp-2) var(--sp-3); text-align: left; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.search-history__remove { flex: none; width: 2.75rem; color: var(--c-ink-soft); font-size: var(--fs-sm); }
@media (hover: hover) and (pointer: fine) {
  .search-field__clear:hover, .search-history__item:hover, .search-history__remove:hover, .filter-drawer__close:hover { background: var(--c-sakura-deep); }
  .search-history__clear:hover, .filter-head__reset:hover { color: var(--c-ink); }
}

/* ===== 絞り込みの引き出し（スマホ） ===== */
.filter-drawer { position: fixed; inset: 0; z-index: 50; display: none; }
.filter-drawer.is-open { display: block; }
.filter-drawer__backdrop { position: absolute; inset: 0; background: rgb(90 70 69 / 0.5); }
.filter-drawer__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: 88dvh;
  background: var(--c-paper);
  border-top: 3px solid var(--c-rose);
  padding: var(--sp-4) var(--sp-4) 0;
  outline: none;
}

.filter-head { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.filter-head__label { font-size: var(--fs-lg); color: var(--c-rose-deep); }
.filter-head__count,
.filter-open__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; margin-left: var(--sp-2);
  border-radius: 999px;
  background: var(--c-rose-deep); color: var(--c-paper);
  font-size: var(--fs-xs);
}
.filter-head__count[hidden],
.filter-open__count[hidden] { display: none; }
.filter-head__reset { margin-left: auto; font-size: var(--fs-sm); color: var(--c-rose-deep); text-decoration: underline; text-underline-offset: 4px; }
.filter-head__reset[hidden] + .filter-drawer__close { margin-left: auto; }
.filter-drawer__close {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border: var(--rule); border-radius: 50%;
  color: var(--c-rose-deep);
}

.filter-groups {
  display: flex; flex-direction: column; gap: var(--sp-4);
  min-height: 0;
  margin-top: var(--sp-3);
  padding-bottom: var(--sp-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.filter-drawer__foot {
  flex: none;
  border-top: var(--rule-dash);
  padding: var(--sp-3) 0 calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}

.filter-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.filter-group__legend { padding: 0; font-size: var(--fs-sm); color: var(--c-rose-deep); }
.filter-group__options { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.filter-group__hint { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-soft); }
/* 選んだジャンルの種類（小分類）。ジャンルのチップのすぐ下に、左の罫で「この中身」と分かるように下げて出す（js/search.js の paintFilters） */
.filter-subs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3); padding-left: var(--sp-3);
  border-left: 2px solid var(--c-rose-pale);
}
.filter-subs__label { width: 100%; font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* 絞り込みのチップと並べ替えのボタンは同じ形（白い丸い札。選ぶと濃いローズ）。チップは指で押せる高さ（44px）を取る */
.chip, .sort-button {
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-rose-pale); border-radius: 999px;
  background: var(--c-paper);
  font-size: var(--fs-sm);
}
.chip { display: inline-flex; align-items: center; height: 2.75rem; }
.chip__icon { width: 1.15rem; height: 1.15rem; margin-right: 0.3rem; color: var(--c-rose-deep); }
.chip[aria-pressed="true"] .chip__icon { color: inherit; }
.sort-button { height: 2.5rem; }
/* :hover の色はカーソルのある端末だけ（スマホでは押した後も :hover が残る） */
@media (hover: hover) and (pointer: fine) {
  .chip:hover:not(:disabled):not([aria-pressed="true"]),
  .sort-button:hover:not([aria-pressed="true"]) { background: var(--c-sakura-deep); }
  .open-toggle:hover .open-toggle__track { filter: brightness(0.88); }
}
.chip[aria-pressed="true"], .sort-button[aria-pressed="true"] { background: var(--c-rose-deep); border-color: var(--c-rose-deep); color: var(--c-paper); }
.chip:disabled { cursor: default; color: var(--c-ink-soft); opacity: 0.55; }
/* 件数の欄は 2 桁ぶんに固定（条件を変えるたびにチップの幅が変わらないように） */
.chip__count { display: inline-block; min-width: 2ch; margin-left: var(--sp-1); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; opacity: 0.75; }

/* ===== 結果 ===== */
.search-results { margin-top: var(--sp-4); min-width: 0; scroll-margin-top: 1rem; }

/* ジャンル・エリアの入口のページの見出しと紹介文（search.php の #landing。条件を変えたら JS が隠す） */
.landing { margin-bottom: var(--sp-3); }
.landing__title { font-size: var(--fs-lg); font-weight: 500; color: var(--c-rose-deep); line-height: 1.4; }
.landing__lead { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.7; }

/* スマホ: 1 行目に件数・「マップで見る」……「いま営業中のみ」（右端）、2 行目に並べ替え。
   1 行目は 169 店でも 343px に収まる幅（件数 52＋すきま 4＋リンク 98＋すきま 4＋スイッチ 180 = 338。2026-11-14 に › を足して測り直した。リンクの字は --fs-xs、これ以上広げると 2 行目に落ちる）。
   「マップで見る」を足しても行は増えず、一覧の先頭は前と同じ位置 */
.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-1); margin-bottom: var(--sp-4); }
.results-bar__count { font-size: var(--fs-sm); }
.results-bar__num { font-size: var(--fs-xl); color: var(--c-rose-deep); font-variant-numeric: tabular-nums; }
/* 「マップで見る」は件数の「店」と字の下端（ベースライン）を揃え、件数の続きに読めるように。
   件数は大きな数字に合わせて「店」が下がっているので、真ん中揃えのままだとリンクの字が 5〜6px 上に浮く。
   align-self: baseline はリンクの先頭の地図の印の下端で揃ってしまうため、相対位置で下げる（行の高さは変えない。2026-11-10 測った） */
.results-bar__map { position: relative; top: 0.28rem; }
.results-bar .open-toggle { margin-left: auto; padding-right: 0; }   /* 右端は一覧のカードの端にそろえる（「マップで見る ›」の分の幅を空ける。2026-11-14） */

.sort-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-1); width: 100%; }

/* 「マップで見る」の札の置き場（css/components.css の .map-preview）。スマホは一覧の下、PC は左の欄の下 */
.search-map { margin-top: var(--sp-6); }
.search-map:empty, .search-map--aside { display: none; }

/* いま営業中のみ: 入／切のスイッチ。切は淡い緑、入は濃い緑で玉が右へ（2026-11-07、担当。緑は一覧の「営業中」と同じ色） */
.open-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 2.5rem; padding: 0 var(--sp-1);
  color: var(--c-ink); font-size: var(--fs-sm);
}
.open-toggle .icon { width: 1.1rem; height: 1.1rem; margin-right: calc(var(--sp-1) - var(--sp-2)); color: var(--c-open); }   /* 時計と字は近く（間 = --sp-1。字とスイッチの間は --sp-2 のまま。2026-11-14、ユーザー） */   /* ずらさない（前の translateY(0.19em) は測り方を誤って 2.4px 下がっていた。2026-11-08） */
.open-toggle__track {
  position: relative; flex: none;
  width: 2.75rem; height: 1.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--c-open) 28%, var(--c-paper));
  transition: background .15s;
}
.open-toggle__track::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform .15s;
}
.open-toggle[aria-checked="true"] .open-toggle__track { background: var(--c-open); }
.open-toggle[aria-checked="true"] .open-toggle__track::after { transform: translateX(1.15rem); }
.open-toggle:focus-visible { outline: 2px solid var(--c-open); outline-offset: 2px; border-radius: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .open-toggle__track, .open-toggle__track::after { transition: none; } }

.notice { margin-bottom: var(--sp-4); padding: var(--sp-2) var(--sp-3); background: var(--c-paper); border: var(--rule-dash); font-size: var(--fs-sm); }
.notice[hidden] { display: none; }

/* ===== PC: 左に検索と絞り込みの欄、右に結果 =====
   模擬店コンテストの検索（visitor/57/contest/css/search.css）と同じ構え: 左の欄は画面の左端に付く 1 本の柱で、
   ヘッダーの下から画面の下まで続き、フッターは右の列に入る（柱はフッターの横まで続く）。
   画面が広いとき（1200px〜）はヘッダーも右の列に入れ、柱を画面の上から通す（2026-10-31）。
   狭いと右の列にロゴとナビが収まらず 1 字ずつ折り返すので、そこまでは全幅のヘッダーのまま。
   body を grid にし、main と .search-layout は display: contents で箱を消して、ヘッダー・欄・結果・フッターを
   直接 grid に置く（DOM 順: header, main > .search-layout > aside + .search-results, footer。body class は search.php の bodyClass） */
@media (min-width: 1024px) {
  body.page-search {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
  }
  /* ヘッダーは base.css が display: contents にしている（帯を画面の上に固定するため）ので、帯と街並みの線を別々に置く（1 行目・2 行目） */
  .page-search .site-header__inner { grid-column: 1 / -1; grid-row: 1; max-width: none; margin: 0; padding-inline: var(--sp-6); }   /* margin: auto のままだと升の中で中身の幅に縮む */
  .page-search .site-header__inner::before { left: 0; width: 100%; transform: none; }   /* 地は自分の升の幅だけ（1200px〜では左の柱に重ねない） */
  .page-search .site-header > .skyline { grid-column: 1 / -1; grid-row: 2; max-width: none; margin: 0 var(--sp-4); }   /* base.css の margin: 0 auto のままだと、升の中で幅 0 に縮んで線も絵も消え、高さ 2.75rem の空白だけ残っていた（2026-11-12）。sp-4 で家の左端が帯のロゴ・一覧の左端にそろう */
  .page-search .search-main,
  .page-search .search-layout { display: contents; }
  .search-aside {
    grid-column: 1; grid-row: 3 / span 2;
    position: static; margin: 0; padding: 0;
    background: var(--c-paper);
    border: 0; border-right: 1px solid var(--c-rose-pale);
  }
  .search-bar .filter-open { display: none; }
  /* PC は 1 行: 件数・マップで見る ……… いま営業中のみ・並べ替え */
  .results-bar { column-gap: var(--sp-3); }
  .sort-buttons { width: auto; }
  .results-bar__map { top: 0.36rem; margin-left: var(--sp-1); }
  .search-map--aside:not(:empty) { display: block; margin-top: var(--sp-5); }
  /* 画面に貼り付け、あふれる分だけ欄の中でスクロールさせる（スクロールバーは欄の右端の罫線のきわ） */
  .search-aside__inner {
    position: sticky; top: var(--header-h);   /* 固定した帯の下に貼り付く（1200px〜は柱が上から通るので 0。下の media） */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable; /* バーが出たり消えたりでチップが折り返し直さないように */
    padding: var(--sp-5);
  }
  .search-results {
    grid-column: 2; grid-row: 3;
    width: 100%; max-width: var(--content-max);
    margin-top: 0;
    padding: var(--sp-6) var(--sp-6) var(--sp-8);
    /* 結果が少なくてもフッターが最初の画面に上がってこないように */
    min-height: 100dvh;
  }
  .page-search .site-footer { grid-column: 2; grid-row: 4; margin-top: 0; }
  .filter-drawer { position: static; display: block; }
  .filter-drawer__backdrop,
  .filter-drawer__close,
  .filter-drawer__foot { display: none; }
  .filter-drawer__sheet { position: static; max-height: none; border: 0; padding: 0; background: none; }
  .filter-head { margin-top: var(--sp-5); }
  .filter-groups { overflow: visible; padding-bottom: 0; }
}
@media (min-width: 1200px) {
  .page-search .site-header__inner, .page-search .site-header > .skyline { grid-column: 2; }
  .search-aside { grid-row: 1 / span 4; }
  .search-aside__inner { top: 0; max-height: 100dvh; }
}