/* ==========================================================================
   STICK FINDER — ネオブルータリズム × ポップ
   ========================================================================== */

:root{
  --bg:      #FFF6EC;
  --ink:     #111111;
  --paper:   #FFFFFF;
  --pink:    #FF3D7F;
  --yellow:  #FFD400;
  --cyan:    #00C2FF;
  --purple:  #7C4DFF;
  --green:   #00D084;

  --bw: 3px;                 /* 太い黒フチ */
  --sh: 6px 6px 0 var(--ink);
  --sh-sm: 4px 4px 0 var(--ink);
  --sh-lg: 9px 9px 0 var(--ink);
  --r: 14px;

  --font-en: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-num: "Archivo Black", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* display を指定したクラスに [hidden] が負けないように */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:700;
  line-height:1.5;
  /* 紙のドット感（ステッカーシート風） */
  background-image:radial-gradient(rgba(17,17,17,.07) 1.5px, transparent 1.6px);
  background-size:22px 22px;
}

button,input,select{ font:inherit; color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--yellow); border:var(--bw) solid var(--ink); padding:8px 14px;
}
.skip:focus{ left:8px; top:8px; }

:focus-visible{ outline:4px solid var(--purple); outline-offset:2px; }

/* ============================ ヘッダー ============================
   フィルタパネルを高さ720pxの画面に収めるため、ロゴ・サブコピー・掲載数を
   1行に並べた薄い帯（約60px）にしている。傾き＋ハードシャドウの
   ステッカー感は維持。モバイルは高さの制約が無いので少し大きく戻す。
   ------------------------------------------------------------------ */
.site-head{ padding:9px 18px 5px; }
.head-inner{
  max-width:1240px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  justify-content:space-between;
}
.logo-wrap{ display:flex; flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; }
.logo{
  margin:0;
  font-family:var(--font-en);
  font-size:clamp(21px, 2.4vw, 27px);
  line-height:1;
  letter-spacing:-.01em;
  background:var(--pink);
  color:#fff;
  -webkit-text-stroke:0;
  padding:6px 13px 7px;
  border:var(--bw) solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-sm);
  transform:rotate(-2deg);
}
.subcopy{
  margin:0;
  font-size:13px;
  font-weight:900;
  background:var(--yellow);
  border:var(--bw) solid var(--ink);
  border-radius:999px;
  padding:2px 13px 3px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(1.2deg);
}
.head-badge{
  display:flex; align-items:baseline; gap:6px;
  background:var(--cyan);
  border:var(--bw) solid var(--ink);
  border-radius:10px;
  box-shadow:3px 3px 0 var(--ink);
  padding:3px 13px 4px;
  transform:rotate(1.6deg);
}
.head-badge-num{ font-family:var(--font-num); font-size:20px; line-height:1.05; }
.head-badge-txt{ font-size:12px; font-weight:900; }

/* ---- 言語切替（v6）---- */
.head-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.langsw{
  display:flex; align-items:stretch;
  border:var(--bw) solid var(--ink); border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);
  background:var(--paper); overflow:hidden;
  transform:rotate(-1.2deg);
}
.lang{
  cursor:pointer; border:0; background:transparent;
  padding:3px 11px 4px; font-size:12px; font-weight:900; line-height:1.3;
  color:var(--ink);
}
.lang + .lang{ border-left:2px solid var(--ink); }
.lang[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.lang:hover[aria-pressed="false"]{ background:var(--yellow); }

.banner{
  max-width:1240px; margin:20px auto 0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--yellow);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  padding:10px 16px;
  font-size:14px;
}
.banner-dot{
  flex:none;
  width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:var(--yellow);
  display:grid; place-items:center; font-family:var(--font-en); font-size:15px;
}
.banner-sub{ font-weight:700; opacity:.8; }

/* ============================ レイアウト ============================ */
.layout{
  max-width:1240px;
  margin:10px auto 0;
  padding:0 18px 60px;
  display:grid;
  grid-template-columns:440px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.filter-toggle{ display:none; }

/* ============================ フィルタパネル ============================
   オーナー指示: デスクトップ(高さ720px)で全項目が一画面に収まること。
   ヘッダーを1行(約60px)に圧縮しているのはこの高さを作るため。
   パネル自体は sticky で固定し、スクロールするのは結果側だけ。
   overflow:auto は「データが将来もっと増えた時」の安全網で、
   通常は中身が max-height 内に収まる想定（= パネル内スクロールは出ない）。
   ------------------------------------------------------------------ */
.panel{
  position:sticky; top:14px;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:18px;
  box-shadow:var(--sh);
  max-height:calc(100vh - 28px);
  overflow:auto;
}
.panel-inner{ padding:8px 11px 9px; display:flex; flex-direction:column; gap:4px; }

/* 見出しは行の上ではなく左の細い列に置く。
   これだけで1グループ18px前後×7グループぶん詰められる。 */
.fgroup{ display:flex; align-items:flex-start; gap:9px; }
.flabel{
  margin:0; flex:0 0 58px; white-space:nowrap;
  font-size:11px; font-weight:900; letter-spacing:.04em; line-height:1.25;
  padding-top:4px;
  border-left:3px solid var(--ink); padding-left:6px;
}
.fbody{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
/* チップ群とその横に置く補助要素（トグル・注記）を同じ折返しに流す */
.fbody.chipwrap{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:3px; }
.chips.flow{ display:contents; }
.fnote{ font-size:10px; font-weight:700; opacity:.55; line-height:1.2; }

.fgroup-wide{ display:block; }

/* ---- 選択中タグのミニ解説（v4）----
   枠はステッカー風、本文は薄地に黒文字で落ち着いて読ませる。
   本文の高さは行数で固定する（タグを切り替えるたびにパネル全体の高さが
   動くと落ち着かないため）。画面が低いときは3行、余裕があれば4行。 */
.tagnote{
  --note-lines:3;
  background:#FFF6DF;
  border:var(--bw) solid var(--ink); border-radius:12px;
  box-shadow:3px 3px 0 var(--ink);
  padding:4px 9px 6px;
  display:flex; flex-direction:column; gap:1px;
}
.tagnote[hidden]{ display:none !important; }
.tagnote.is-blank{ visibility:hidden; }   /* 選択ゼロ: 場所は残して中身だけ隠す
                                              （結果0件の .empty とは別クラスにする） */
/* 見出し行は中身が空でも高さを保つ（タグを外したときに高さが跳ねないように） */
.tagnote-head{ display:flex; align-items:baseline; gap:6px; min-width:0; min-height:15px; }
.tagnote-title{ font-size:12px; font-weight:900; line-height:1.25; }
.tagnote-group{
  font-size:9.5px; font-weight:900; letter-spacing:.06em;
  background:var(--ink); color:var(--bg);
  border-radius:999px; padding:1px 7px 2px; flex:none;
}
.tagnote-body{
  margin:0;
  font-size:11.5px; font-weight:500; line-height:1.42;
  height:calc(11.5px * 1.42 * var(--note-lines));
  overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}
@media (min-height:781px){
  .tagnote{ --note-lines:4; }
  .tagnote-body{ -webkit-line-clamp:4; }
}

/* キーワード＋並べ替え＋リセットの1行ツールバー */
.ftoolbar{ display:flex; align-items:stretch; gap:6px; }
.ftoolbar .text-input{ flex:1 1 110px; min-width:0; }
.ftoolbar .select-wrap{ flex:0 0 auto; width:116px; }
.ftoolbar .reset{ flex:0 0 auto; width:auto; padding:0 13px; }

.text-input{
  width:100%; padding:4px 10px 5px;
  border:var(--bw) solid var(--ink); border-radius:9px;
  background:var(--bg); box-shadow:inset 3px 3px 0 rgba(17,17,17,.08);
  font-weight:700; font-size:13px;
}
.text-input::placeholder{ color:rgba(17,17,17,.4); font-weight:700; }

/* ---- プリセット ---- */
.presets{ display:flex; flex-direction:row; flex-wrap:wrap; gap:5px; }
.preset{
  cursor:pointer;
  border:2px solid var(--ink); border-radius:999px;
  background:var(--paper);
  padding:2px 10px 3px; font-size:12px; font-weight:900;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.preset:nth-child(3n+1){ background:#FFE9F1; }
.preset:nth-child(3n+2){ background:#E4F8FF; }
.preset:nth-child(3n+3){ background:#EAFFF5; }
.preset:hover{ transform:translate(-2px,-2px) rotate(-1deg); box-shadow:6px 6px 0 var(--ink); }
.preset:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* ---- 数値リードアウト（見出し行に同居させて1段ぶん節約） ---- */
.readout{
  display:flex; align-items:baseline; gap:2px;
  background:var(--ink); color:var(--bg);
  border-radius:8px; padding:2px 9px 3px; flex:none;
}
.readout .num{ font-family:var(--font-num); font-size:16px; line-height:1.05; font-variant-numeric:tabular-nums; }
.readout .unit{ font-size:10px; font-weight:900; opacity:.75; margin-right:3px; }
.readout .tilde{ font-size:12px; font-weight:900; opacity:.6; padding:0 2px; }

/* ---- 両端ハンドル レンジスライダー ---- */
.range{ position:relative; height:22px; }
.range-track{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:12px; background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:999px; overflow:hidden;
}
.range-fill{ position:absolute; top:0; bottom:0; background:var(--pink); }
#lenRange .range-fill{ background:var(--cyan); }

.range input[type=range]{
  position:absolute; left:0; top:0;
  width:100%; height:22px; margin:0;
  -webkit-appearance:none; appearance:none;
  background:transparent;
  pointer-events:none;          /* トラックはクリック無効。つまみだけ操作可 */
}
.range input[type=range]::-webkit-slider-runnable-track{ background:transparent; height:22px; border:0; }
.range input[type=range]::-moz-range-track{ background:transparent; height:22px; border:0; }

.range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  pointer-events:auto;
  width:20px; height:20px; margin-top:1px;
  border:var(--bw) solid var(--ink); border-radius:7px;
  background:var(--yellow);
  box-shadow:2px 2px 0 var(--ink);
  cursor:grab;
}
.range input[type=range]::-moz-range-thumb{
  pointer-events:auto;
  width:19px; height:19px;
  border:var(--bw) solid var(--ink); border-radius:7px;
  background:var(--yellow);
  box-shadow:2px 2px 0 var(--ink);
  cursor:grab;
}
.range input[type=range]:active::-webkit-slider-thumb{ background:var(--pink); cursor:grabbing; }
.range input[type=range]:active::-moz-range-thumb{ background:var(--pink); cursor:grabbing; }
.range input[type=range]:focus-visible::-webkit-slider-thumb{ background:var(--purple); }

/* ---- チップ ---- */
.chips{ display:flex; flex-wrap:wrap; gap:5px; }
.chip{
  cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  border:2px solid var(--ink); border-radius:999px;
  background:var(--paper);
  padding:0 8px 1px; font-size:12px; font-weight:900; line-height:1.32;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
}
.chip:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.chip[aria-pressed="true"]{
  background:var(--swatch, var(--pink));
  transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink);
}
.chip-dot{
  width:9px; height:9px; border-radius:50%;
  border:2px solid var(--ink); background:var(--swatch,#ccc); flex:none;
}
.chip[aria-pressed="true"] .chip-dot{ background:var(--paper); }
.chip-n{ font-size:10px; opacity:.55; font-variant-numeric:tabular-nums; }

/* ---- トグル ---- */
.toggle{
  order:10;                       /* 見出し行の右端に置く */
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; flex:none;
  background:var(--paper); border:2px solid var(--ink); border-radius:999px;
  padding:1px 9px 2px; font-size:11px; font-weight:900; box-shadow:2px 2px 0 var(--ink);
  text-align:left; line-height:1.32;
}
.toggle-box{
  width:13px; height:13px; flex:none;
  border:2px solid var(--ink); border-radius:4px; background:var(--bg);
  display:grid; place-items:center;
}
.toggle[aria-checked="true"]{ background:var(--green); }
.toggle[aria-checked="true"] .toggle-box{ background:var(--ink); }
.toggle[aria-checked="true"] .toggle-box::after{
  content:"✓"; color:var(--green); font-size:10px; line-height:1;
}

/* ---- セレクト ---- */
.select-wrap{ position:relative; }
.select-wrap::after{
  content:"▼"; position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:9px; pointer-events:none;
}
.select{
  -webkit-appearance:none; appearance:none;
  width:100%; height:100%; padding:4px 26px 5px 10px;
  border:var(--bw) solid var(--ink); border-radius:9px;
  background:var(--yellow); font-size:13px; font-weight:900;
  box-shadow:2px 2px 0 var(--ink); cursor:pointer;
}

/* ---- リセット ---- */
.reset{
  cursor:pointer; width:100%;
  background:var(--ink); color:var(--bg);
  border:var(--bw) solid var(--ink); border-radius:9px;
  padding:4px 12px 5px; font-size:13px; font-weight:900;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease;
}
.reset:hover{ background:var(--pink); color:#fff; transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.reset:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.reset.small{ width:auto; padding:10px 22px; font-size:15px; border-radius:12px; box-shadow:var(--sh-sm); }

/* ============================ 結果 ============================ */
.results{ min-width:0; }

/* ---- 基準バー（v5 Reference検索）---- */
.refbar{
  position:sticky; top:8px; z-index:15;
  display:flex; align-items:center; gap:10px;
  background:var(--purple); color:#fff;
  border:var(--bw) solid var(--ink); border-radius:14px;
  box-shadow:var(--sh);
  padding:6px 12px 7px;
  margin-bottom:14px;
}
.refbar-tag{
  flex:none; background:var(--yellow); color:var(--ink);
  border:2px solid var(--ink); border-radius:999px;
  padding:1px 10px 2px; font-size:11px; font-weight:900;
  transform:rotate(-2deg); white-space:nowrap;
}
.refbar-svg{ flex:1 1 90px; min-width:60px; }
.refbar-svg .stick-svg{ width:100%; }
.refbar-meta{ flex:0 1 auto; display:flex; align-items:baseline; gap:8px; min-width:0; flex-wrap:wrap; }
.refbar-brand{ font-family:var(--font-en); font-size:12px; }
.refbar-sku{ font-family:var(--font-en); font-size:15px; }
.refbar-spec{ font-size:12px; font-weight:900; opacity:.9; font-variant-numeric:tabular-nums; }
.refbar-clear{
  flex:none; cursor:pointer;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:999px;
  padding:3px 12px 4px; font-size:12px; font-weight:900;
  box-shadow:2px 2px 0 var(--ink); white-space:nowrap;
}
.refbar-clear:hover{ background:var(--pink); color:#fff; }

/* 基準との差分チップ */
.diffs{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.diff{
  font-size:11px; font-weight:900; font-variant-numeric:tabular-nums;
  border:2px solid var(--ink); border-radius:999px;
  padding:1px 8px 2px; background:var(--bg); white-space:nowrap;
}
.diff.up{ background:#FFD9E6; }     /* 基準より太い / 長い / 重い */
.diff.down{ background:#D7F2FF; }   /* 基準より細い / 短い / 軽い */
.diff.same{ background:#ECECEC; opacity:.85; }
/* 推定値を含む重量差（v8）。破線の枠で「概算」だと分かるようにする */
.diff.is-est{ border-style:dashed; }

/* 基準スティックのゴースト（破線の重ね描き。左端・スケールはカードと共通） */
.stick-ghost{
  fill:none; stroke:var(--ink); stroke-width:2;
  stroke-dasharray:7 5; opacity:.5;
  vector-effect:non-scaling-stroke; stroke-linejoin:round;
}
.card.is-ref::after{
  content:""; position:absolute; inset:-3px; border-radius:19px;
  border:3px solid var(--purple); pointer-events:none;
}
/* 基準スタンプはカード左上に出るので、その分だけ中身を下げる */
.card.is-ref{ padding-top:24px; }
.refstamp{
  position:absolute; top:-12px; left:14px;
  background:var(--yellow); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:10px;
  padding:3px 12px 4px; font-size:12px; font-weight:900;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-3deg);
}
.refbtn{
  cursor:pointer;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:999px;
  padding:4px 12px 5px; font-size:12px; font-weight:900;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.refbtn:hover{ background:var(--purple); color:#fff; transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.refbtn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.hitbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
}
.hit{
  display:inline-flex; align-items:baseline; gap:8px;
  background:var(--yellow);
  border:var(--bw) solid var(--ink); border-radius:var(--r);
  box-shadow:var(--sh);
  padding:8px 20px 10px;
  transform:rotate(-1deg);
  transform-origin:left center;
}
.hit-num{
  font-family:var(--font-num);
  font-size:clamp(36px,7vw,54px); line-height:1;
  font-variant-numeric:tabular-nums;
}
.hit-suffix{ font-size:17px; font-weight:900; }
@keyframes pop{
  0%{ transform:rotate(-1deg) scale(1); }
  45%{ transform:rotate(-3deg) scale(1.14); }
  100%{ transform:rotate(-1deg) scale(1); }
}
.hit.pop{ animation:pop .15s cubic-bezier(.3,1.6,.5,1); }
.scalenote{ font-size:12px; font-weight:900; opacity:.5; }

/* ---- カード ---- */
.cards{ display:flex; flex-direction:column; gap:16px; }

.card{
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:18px;
  box-shadow:var(--sh);
  padding:16px 18px 14px;
  position:relative;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform:translate(-3px,-3px) rotate(-.35deg); box-shadow:var(--sh-lg); }

.card-top{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.brandchip{
  font-family:var(--font-en); font-size:13px; letter-spacing:.02em;
  border:var(--bw) solid var(--ink); border-radius:999px;
  padding:4px 12px 5px; background:var(--swatch,#eee);
  box-shadow:2px 2px 0 var(--ink);
  white-space:nowrap;
}
.card-names{ flex:1 1 220px; min-width:0; }
.sku{ font-family:var(--font-en); font-size:20px; line-height:1.15; word-break:break-word; }
.mname{ font-size:13px; font-weight:700; opacity:.65; word-break:break-word; }

.spec{
  display:flex; align-items:baseline; gap:2px; flex-wrap:wrap;
  background:var(--ink); color:var(--bg);
  border-radius:12px; padding:7px 14px 8px;
  font-variant-numeric:tabular-nums;
}
.spec .v{ font-family:var(--font-num); font-size:27px; line-height:1; }
.spec .u{ font-size:12px; font-weight:900; opacity:.75; margin:0 8px 0 2px; }
.spec .x{ font-size:15px; font-weight:900; opacity:.55; margin-right:8px; }
.spec .unk{ font-family:var(--font-jp); font-size:15px; opacity:.7; }
/* en のインチ併記（mmが主・インチは添え物） */
.spec .inch{ font-size:11px; font-weight:900; opacity:.6; margin:0 8px 0 -4px; letter-spacing:.01em; }

/* ---- スティック実寸画 ---- */
.stickbox{ margin:14px 0 12px; }
.stick-svg{ display:block; width:100%; height:auto; overflow:visible; }
/* 色は材質ベース（v3）。ヒッコリー=タンが既定 */
.stick-body{ fill:#DDB07E; stroke:var(--ink); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.stick-body.m-hickory{ fill:#DDB07E; }
.stick-body.m-maple{ fill:#F4E5C6; }                                        /* 淡いクリーム */
.stick-body.m-oak{ fill:#C7954F; }                                          /* やや濃い黄褐色 */
.stick-body.m-hornbeam,.stick-body.m-beech,.stick-body.m-birch{ fill:#EBE4D8; } /* 淡灰白 */
.stick-body.m-jatoba,.stick-body.m-rosewood{ fill:#8E4B2D; }                /* 赤茶 */
.stick-body.m-carbon{ fill:#24272C; }                                       /* ほぼ黒 */
.stick-body.m-aluminum{ fill:#C3C9CF; }                                     /* 銀灰 */
.stick-body.m-synthetic{ fill:#CFD4D8; }
.stick-body.m-other{ fill:#E2D3BE; }
.stick-body.m-unknown{ fill:#EADFD2; stroke-dasharray:5 4; }
/* finish_raw に Black/黒 が明記されているものは黒に上書き */
.stick-body.m-black{ fill:#1A1A1A; }
/* ナイロンチップはチップ部だけ白っぽく */
.stick-tip{ fill:#D9A76C; stroke:var(--ink); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.stick-tip.nylon{ fill:#FAFAFA; }
.stick-grid{ stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.18; stroke-dasharray:3 5; }
.stick-guess{ opacity:.45; }

/* ---- バッジ ---- */
.badges{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.badge{
  font-size:12px; font-weight:900;
  border:2px solid var(--ink); border-radius:8px;
  padding:3px 9px; background:var(--bg);
}
/* 重量バッジ（v8）。数値を大きく、「公称 / 推定」の別を小さく必ず添える。
   推定は破線の枠にして、ひと目で公称と区別できるようにしている。 */
.badge.b-weight{
  display:inline-flex; align-items:baseline; gap:5px;
  background:#E8FBEA; font-variant-numeric:tabular-nums;
}
.badge.b-weight.is-est{ background:#F3F3F3; border-style:dashed; }
.badge.b-weight .wv{ font-size:13px; }
.badge.b-weight .wq{ font-size:10px; font-weight:700; opacity:.75; letter-spacing:.02em; }
.badge.b-mat{ background:#FFE9C7; }
.badge.b-tip{ background:#E4F8FF; }
.badge.b-taper{ background:#F0E7FF; }
.badge.b-finish{ background:#FFF0F5; }
.badge.b-nylon{ background:var(--cyan); }
.badge.b-cat{ background:#EDEDED; }
/* ジャンルバッジ（公式が用途を明言しているものだけ付く） */
.badge.b-genre{
  background:var(--purple); color:#fff;
  border-radius:999px; padding:3px 10px;
}

.sig{
  position:absolute; top:-12px; right:14px;
  background:var(--purple); color:#fff;
  border:var(--bw) solid var(--ink); border-radius:10px;
  padding:4px 12px 5px; font-size:12px; font-weight:900;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(3.5deg);
  max-width:60%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.card-bottom{
  margin-top:12px; padding-top:12px;
  border-top:3px dashed rgba(17,17,17,.18);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.srclink{ font-size:12px; font-weight:900; color:var(--ink); opacity:.55; }
.amazon{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--pink); color:#fff; text-decoration:none;
  border:var(--bw) solid var(--ink); border-radius:999px;
  padding:8px 18px; font-size:14px; font-weight:900;
  box-shadow:var(--sh-sm);
  transition:transform .1s ease, box-shadow .1s ease;
}
/* ASINが無く検索ページへ飛ばす場合は色を変えて区別する（文言も「探す」） */
.amazon.search{ background:var(--yellow); color:var(--ink); }
.amazon:hover{ transform:translate(-2px,-2px) rotate(-1deg); box-shadow:6px 6px 0 var(--ink); }
.amazon:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* ---- もっと見る ---- */
.more-wrap{ display:flex; justify-content:center; margin-top:20px; }
.more{
  cursor:pointer;
  background:var(--cyan);
  border:var(--bw) solid var(--ink); border-radius:999px;
  padding:13px 34px; font-size:16px; font-weight:900;
  box-shadow:var(--sh);
  transition:transform .1s ease, box-shadow .1s ease;
}
.more:hover{ transform:translate(-2px,-2px) rotate(-1deg); box-shadow:var(--sh-lg); }
.more:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }

/* ---- 0件 ---- */
.empty{
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:18px;
  box-shadow:var(--sh); padding:44px 20px; text-align:center;
}
.empty-emoji{ font-size:56px; line-height:1; }
.empty-main{ font-size:20px; font-weight:900; margin:14px 0 18px; }

/* ============================ フッター ============================ */
.site-foot{
  border-top:var(--bw) solid var(--ink);
  background:var(--ink); color:var(--bg);
  padding:26px 18px 40px;
}
.site-foot p{ max-width:1240px; margin:0 auto 8px; font-size:13px; }
.site-foot .note{ font-weight:500; opacity:.7; line-height:1.7; }

/* ============================ モバイル ============================ */
@media (max-width:900px){
  .layout{ grid-template-columns:minmax(0,1fr); gap:14px; }

  /* 上部折りたたみ方式は名鑑ページ（artists.html）専用になった。
     検索ページは v9 でボトムシートへ移行したので body.page-search には効かせない
     （シート側の指定はこのファイル末尾の「v9」節）。 */
  body:not(.page-search) .filter-toggle{
    display:flex; align-items:center; justify-content:center; gap:10px;
    cursor:pointer; width:100%;
    background:var(--pink); color:#fff;
    border:var(--bw) solid var(--ink); border-radius:12px;
    padding:13px; font-size:16px; font-weight:900;
    box-shadow:var(--sh-sm);
    position:sticky; top:8px; z-index:20;
  }
  .ft-ico{ font-size:18px; }
  .ft-count{
    background:#fff; color:var(--ink); border:2px solid var(--ink);
    border-radius:999px; min-width:26px; padding:0 7px;
    font-size:13px; line-height:20px;
  }
  /* 以下のチップ・スライダー・文字サイズの指定は、折りたたみ方式（名鑑）と
     シート方式（検索）の両方で使う共通のモバイル調整。 */
  body:not(.page-search) .panel{
    position:static; max-height:none;
    display:none;
  }
  body:not(.page-search) .panel.open{ display:block; }
  .panel-inner{ padding:16px 16px 18px; gap:15px; }
  /* 見出しは横に置かず上に戻す（指で押す幅を確保するため） */
  .fgroup{ flex-direction:column; align-items:stretch; gap:8px; }
  .flabel{
    flex:none; font-size:12px; letter-spacing:.1em;
    padding:0 0 0 8px; border-left-width:4px;
  }
  .fbody{ gap:6px; }
  .fbody.chipwrap{ gap:7px; }
  .text-input{ padding:10px 12px; font-size:16px; border-radius:10px; }
  .readout{ padding:5px 12px 6px; border-radius:10px; }
  .readout .num{ font-size:22px; }
  .readout .unit{ font-size:11px; }
  .preset{ padding:6px 13px; font-size:13px; border-width:var(--bw); }
  .range{ height:38px; }
  .range input[type=range]{ height:38px; }
  .range input[type=range]::-webkit-slider-runnable-track{ height:38px; }
  .range input[type=range]::-moz-range-track{ height:38px; }
  .range input[type=range]::-webkit-slider-thumb{
    width:28px; height:28px; margin-top:5px; border-radius:8px; box-shadow:3px 3px 0 var(--ink);
  }
  .range input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:8px; }
  .range-track{ height:14px; }
  .chips{ gap:7px; }
  .chip{ padding:5px 11px; font-size:13px; border-width:var(--bw); }
  .chip-dot{ width:11px; height:11px; }
  .chip-n{ font-size:11px; }
  .toggle{ padding:5px 12px 6px; font-size:12px; border-width:var(--bw); }
  .toggle-box{ width:16px; height:16px; }
  .toggle[aria-checked="true"] .toggle-box::after{ font-size:12px; }
  /* .fgroup の縦積み指定に上書きされないよう flex-direction を戻す */
  .ftoolbar{ flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:8px; }
  .ftoolbar .text-input{ flex:1 1 100%; }
  .ftoolbar .select-wrap{ flex:1 1 150px; width:auto; }
  .ftoolbar .reset{ padding:11px 18px; }
  .select{ padding:10px 34px 10px 12px; font-size:15px; border-radius:10px; }
  .reset{ padding:11px 18px; font-size:15px; border-radius:11px; }

  /* 解説は高さを詰める必要が無いので全文出す */
  .tagnote{ padding:9px 12px 11px; }
  .tagnote-title{ font-size:14px; }
  .tagnote-group{ font-size:10.5px; }
  .tagnote-body{ font-size:13px; line-height:1.55; height:auto; -webkit-line-clamp:none; display:block; }

  /* ヘッダーは高さの制約が無いので、ロゴを大きめに戻して顔を立てる */
  .site-head{ padding:18px 18px 4px; }
  .logo-wrap{ flex-direction:column; align-items:flex-start; gap:9px; }
  .logo{
    font-size:clamp(28px,7.5vw,40px); padding:9px 16px 10px;
    border-radius:12px; box-shadow:var(--sh); transform:rotate(-2.5deg);
  }
  .subcopy{ font-size:14px; padding:4px 14px 5px; box-shadow:var(--sh-sm); }
  .head-badge{ padding:6px 14px 7px; box-shadow:var(--sh-sm); }
  .head-badge-num{ font-size:26px; }
  .head-badge-txt{ font-size:13px; }
  .hit{ transform:rotate(-1deg) scale(.92); }
  .card{ padding:14px; }
  /* 基準バーはモバイルでは固定しない（上部のフィルタボタンと重なるため） */
  .refbar{ position:static; flex-wrap:wrap; gap:8px; }
  .card.is-ref{ padding-top:26px; }
  .refbar-svg{ flex:1 1 100%; order:5; }
  .refbtn{ padding:6px 13px 7px; font-size:13px; }
  .head-badge{ transform:rotate(1.8deg) scale(.9); transform-origin:left center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* ============================ v7: ドラマー ============================ */
/* ヘッダーのページ間リンク（1行ヘッダーの高さを崩さない小型ピル） */
.navlink{
  display:inline-block; text-decoration:none; color:var(--ink);
  background:var(--green);
  border:var(--bw) solid var(--ink); border-radius:999px;
  padding:3px 13px 4px; font-size:12px; font-weight:900;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(1deg);
  transition:transform .1s ease, box-shadow .1s ease;
}
.navlink:hover{ transform:rotate(1deg) translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.navlink:active{ transform:rotate(1deg) translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }

/* カードの「使用ドラマー N人」 */
.drummers{ margin-top:10px; }
.drummers-toggle{
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  background:var(--purple); color:#fff;
  border:2px solid var(--ink); border-radius:999px;
  padding:3px 12px 4px; font-size:12px; font-weight:900;
  box-shadow:2px 2px 0 var(--ink);
}
.drummers-toggle:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.dt-caret{ font-size:10px; transition:transform .12s ease; }
.drummers-toggle[aria-expanded="true"] .dt-caret{ transform:rotate(180deg); }
.drummers-list{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:8px; padding:9px 10px;
  background:var(--bg); border:2px dashed rgba(17,17,17,.25); border-radius:12px;
}
.drummer{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:999px;
  padding:2px 9px 3px; font-size:12px; font-weight:900;
  box-shadow:2px 2px 0 var(--ink);
}
.drummer:hover{ background:var(--yellow); }
.drummer-band{ font-size:10px; font-weight:700; opacity:.6; }
.rel{
  font-size:9.5px; font-weight:900; letter-spacing:.02em;
  border:1.5px solid var(--ink); border-radius:999px; padding:0 6px 1px;
}
.rel-signature{ background:var(--pink); color:#fff; }
.rel-roster{ background:var(--cyan); }
.rel-roster_signature{ background:var(--purple); color:#fff; }

/* ============================ v7.1: ファセット暗転 ============================ */
/* 組み合わせて0件になるチップは押しても意味がないので暗転＋クリック不可 */
.chip[disabled]{
  cursor:not-allowed;
  opacity:.32; filter:grayscale(.85);
  box-shadow:1px 1px 0 rgba(17,17,17,.5);
}
.chip[disabled]:hover{ transform:none; box-shadow:1px 1px 0 rgba(17,17,17,.5); }

/* ==================== v7.2: ブランド2段構え（上位12＋ポップオーバー） ====================
   37ブランドぶんのチップを全部出すとパネル内スクロールが出てしまうので、
   パネルには上位12ブランドと「ほか◯ブランド ▼」だけを出し、残りは
   ポップオーバーで見せる。DOM上は全チップを持たせておき、隠すのはCSSの役目。
   選択中のチップは隠さない = ポップオーバーで選んだブランドはパネル側に繰り上がる。 */
.chip.is-overflow{ display:none; }
.chip.is-overflow[aria-pressed="true"]{ display:inline-flex; }

.chip-more{
  cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  border:2px dashed var(--ink); border-radius:999px;
  background:var(--bg);
  padding:0 9px 1px; font-size:12px; font-weight:900; line-height:1.32;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.chip-more:hover{ background:var(--yellow); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.chip-more[aria-expanded="true"]{ background:var(--ink); color:var(--bg); border-style:solid; }
.chip-more-caret{ font-size:8px; transition:transform .12s ease; }
.chip-more[aria-expanded="true"] .chip-more-caret{ transform:rotate(180deg); }

/* ポップオーバー本体。パネルは overflow:auto なので body 直下に置き、
   position:fixed でボタンの下（＝結果エリアに重なる位置）に浮かせる。 */
.chip-pop{
  position:fixed; z-index:60;
  background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:16px;
  box-shadow:var(--sh);
  padding:10px 12px 12px;
  display:flex; flex-direction:column; gap:8px;
  overflow:hidden;
}
.chip-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chip-pop-title{
  font-size:12px; font-weight:900; letter-spacing:.06em;
  background:var(--ink); color:var(--bg);
  border-radius:999px; padding:2px 12px 3px;
}
.chip-pop-close{
  cursor:pointer; flex:none;
  background:var(--paper); border:2px solid var(--ink); border-radius:999px;
  width:24px; height:24px; line-height:1; font-size:12px; font-weight:900;
  box-shadow:2px 2px 0 var(--ink);
}
.chip-pop-close:hover{ background:var(--pink); color:#fff; }
.chip-pop-body{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:6px; overflow:auto; padding:2px;
}
.chip-pop-body .chip{ width:100%; }
.chip-pop-body .chip-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-pop-body .chip-n{ margin-left:auto; }

/* モバイルは折りたたみパネル内に全チップを出す（浮き窓は使わない） */
@media (max-width:900px){
  .chip.is-overflow{ display:inline-flex; }
  .chip-more{ display:none; }
  .chip-pop{ display:none; }
}

/* ============================ v7: ドラマー名鑑ページ ============================ */
.logo-link{ text-decoration:none; display:inline-block; }

.acard .a-name{ font-family:var(--font-en); font-size:19px; line-height:1.2; word-break:break-word; }
.acard .a-name-ja{ font-size:13px; font-weight:900; opacity:.75; }
.acard .a-meta{ display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; font-weight:700; opacity:.65; margin-top:2px; }
.acard .a-country::before{ content:"📍 "; }
.acard .srclink{ text-decoration:none; }

.uses{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.use{
  display:grid;
  grid-template-columns:auto auto auto minmax(90px,1fr);
  align-items:center; gap:8px;
  text-decoration:none; color:var(--ink);
  background:var(--bg);
  border:2px solid var(--ink); border-radius:12px;
  padding:6px 10px;
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
}
a.use:hover{ background:var(--yellow); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
a.use:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.use-sku{ font-family:var(--font-en); font-size:14px; white-space:nowrap; }
.use-dims{ font-size:11px; font-weight:900; opacity:.6; font-variant-numeric:tabular-nums; white-space:nowrap; }
.use-svg{ min-width:0; }
.use-svg .stick-svg{ width:100%; }
.use-missing{ font-size:11px; font-weight:700; opacity:.5; }
.use-plain{ opacity:.75; }

/* 名鑑ページのフィルタパネルは項目が少ないので、少しゆったりでよい */
#relChips .chip{ white-space:nowrap; }

/* メインページからアンカーで飛んできたカードを目立たせる */
.acard.is-target{ box-shadow:var(--sh-lg); }
.acard.is-target::after{
  content:""; position:absolute; inset:-3px; border-radius:19px;
  border:3px solid var(--pink); pointer-events:none;
}

@media (max-width:900px){
  .use{ grid-template-columns:auto auto; }
  .use-svg{ grid-column:1 / -1; }
  .use-dims{ grid-column:1 / -1; }
}

/* ---- JS無効時の案内（SEO・noscript）----
   世界観は保ちつつ、読めることを最優先にした素直なブロック。 */
.noscript{
  max-width:1000px; margin:22px auto; padding:16px 20px;
  background:var(--yellow);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  font-size:14px; line-height:1.75;
}
.noscript p{ margin:0 0 8px; }
.noscript p:last-child{ margin-bottom:0; }
.noscript-main{ font-weight:900; font-size:16px; }

/* ==================================================================== *
 * v9: モバイルの絞り込みUX（ボトムシート方式）
 *
 * オーナー指摘「スマホで絞り込みながら結果が見にくい」への対応。
 * 核心は **スクリム（黒い幕）を敷かない** こと——シートを開いたままでも
 * 上の結果が見え、結果側もスクロールできる。スライダーを動かすと上の
 * カードとミニバーの件数がその場で変わる、という体験を作る。
 *
 * 適用は検索ページ（body.page-search）の <900px だけ。
 * デスクトップ（>=901px）と名鑑ページには一切影響させない。
 * ==================================================================== */

/* デスクトップ・名鑑ページでは存在しない要素 */
.minibar{ display:none; }
.sheet-head{ display:none; }

@media (max-width:900px){

  /* ---------------- 常設ミニバー ---------------- */
  .page-search .minibar{
    display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px;
    position:sticky; top:0; z-index:50;
    padding:5px 11px 6px;
    background:var(--bg);
    border-bottom:var(--bw) solid var(--ink);
    -webkit-user-select:none; user-select:none;
  }
  /* 375px 幅だと 件数＋チップ＋ボタン を1行に並べると要約チップが
     数十pxしか残らず読めない。チップがあるときだけ2段にして、
     チップに横幅を丸ごと渡す（無いときは1行・約48px）。 */
  .page-search .mb-hit{ order:1; }
  .page-search .mb-open{ order:2; margin-left:auto; }
  .page-search .mb-sums{ order:3; flex:1 1 100%; }
  /* ライブ件数。変化のたびに .pop で弾む（デスクトップの .hit と同じ動き） */
  .page-search .mb-hit{
    flex:none; display:flex; align-items:baseline; gap:3px;
    background:var(--yellow);
    border:var(--bw) solid var(--ink); border-radius:9px;
    box-shadow:3px 3px 0 var(--ink);
    padding:1px 8px 2px;
    transform:rotate(-1deg);
  }
  .page-search .mb-hit.pop{ animation:pop .15s cubic-bezier(.3,1.6,.5,1); }
  .page-search .mb-num{
    font-family:var(--font-num); font-size:17px; line-height:1.15;
    font-variant-numeric:tabular-nums;
  }
  .page-search .mb-suffix{ font-size:11px; font-weight:900; }

  /* 選択中フィルタの要約チップ。横スクロールで、タップすると外れる */
  .page-search .mb-sums{
    min-width:0;
    display:flex; align-items:center; gap:6px;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:1px 0 2px;
  }
  .page-search .mb-sums::-webkit-scrollbar{ display:none; }
  .page-search .mb-sums:empty{ display:none; }
  .page-search .sum{
    flex:none; display:inline-flex; align-items:center; gap:5px;
    background:var(--paper); color:var(--ink);
    border:2px solid var(--ink); border-radius:999px;
    padding:2px 8px 3px 9px;
    font-size:11.5px; font-weight:900; white-space:nowrap;
    cursor:pointer;
  }
  .page-search .sum::after{ content:"✕"; font-size:10px; opacity:.6; }
  .page-search .sum:active{ background:var(--yellow); }
  .page-search .sum-dot{
    width:9px; height:9px; border-radius:50%;
    border:1.5px solid var(--ink); flex:none;
  }

  .page-search .mb-open{
    flex:none; display:inline-flex; align-items:center; gap:7px;
    background:var(--pink); color:#fff;
    border:var(--bw) solid var(--ink); border-radius:11px;
    box-shadow:3px 3px 0 var(--ink);
    padding:5px 10px 6px; font-size:13px; font-weight:900;
    cursor:pointer;
  }
  .page-search .mb-open:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
  .page-search .mb-count{
    background:#fff; color:var(--ink); border:2px solid var(--ink);
    border-radius:999px; min-width:22px; padding:0 5px;
    font-size:11px; line-height:17px; text-align:center;
  }

  /* ---------------- ボトムシート ---------------- */
  /* 高さは JS が --sheet-full（px）に実測値を入れる。iOSのアドレスバー伸縮で
     100vh がずれるため、vh 直指定はJS未実行時のフォールバックに留める。 */
  .page-search .panel{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    z-index:60;
    height:var(--sheet-full, 86vh);
    max-height:none;
    display:flex; flex-direction:column;
    border:var(--bw) solid var(--ink); border-bottom:0;
    border-radius:20px 20px 0 0;
    box-shadow:0 -7px 22px rgba(17,17,17,.16);
    overflow:hidden;
    transform:translateY(100%);      /* 位置は JS がインラインの transform で動かす */
    will-change:transform;
    visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.75,.2,1), visibility 0s linear .28s;
  }
  .page-search .panel.is-open{
    visibility:visible;
    transition:transform .28s cubic-bezier(.22,.75,.2,1), visibility 0s linear 0s;
  }
  /* 指で掴んでいる間はJSが transform を直接書くので追従を止める */
  .page-search .panel.is-dragging{ transition:none; }

  /* 中身だけがスクロールする。overscroll-behavior でシート内スクロールが
     背後のページに伝播しないようにする（iOSのゴムバンド対策）。 */
  .page-search .panel-inner{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  }

  /* つまみ。ここだけドラッグ対象にして、中身は普通にスクロールできるようにする */
  .page-search .sheet-head{
    display:flex; align-items:center; justify-content:center;
    position:relative; flex:none; height:34px;
    background:var(--paper);
    border-radius:17px 17px 0 0;
    touch-action:none;            /* ドラッグをページスクロールに取られない */
    cursor:grab;
    -webkit-user-select:none; user-select:none;
  }
  .page-search .sheet-head:active{ cursor:grabbing; }
  .page-search .grabber{
    width:58px; height:7px; padding:0;
    border:0; border-radius:999px;
    background:var(--ink); opacity:.26;
    cursor:grab;
  }
  .page-search .sheet-head:active .grabber{ opacity:.5; }
  .page-search .sheet-close{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:30px; height:30px; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg); color:var(--ink);
    border:2px solid var(--ink); border-radius:50%;
    font-size:12px; font-weight:900; line-height:1; cursor:pointer;
  }

  /* シート内の並び（オーナー指示）:
     直径・長さを最上段 → キーワード/並べ替え/リセット → おすすめ →
     残りのチップ群（元の並び） → タグ解説を最下部。 */
  .page-search .panel-inner > .fgroup{ order:5; }
  .page-search #gDia{ order:1; }
  .page-search #gLen{ order:2; }
  .page-search #gTools{ order:3; }
  .page-search #gPresets{ order:4; }
  .page-search #tagNote{ order:9; }

  /* シートが出ている間は、結果の最後がシートに隠れたままにならないよう
     下に余白を足す（値は JS が半開き高さから決める）。 */
  .page-search.sheet-open .layout{
    padding-bottom:var(--sheet-pad, 60vh);
  }

  /* ミニバーがあるので、結果側の上余白は詰めてよい */
  .page-search .layout{ margin-top:6px; }
}

/* デスクトップ幅では、シート用に付いたインラインの transform を必ず無効化する。
   JS 側でも幅が戻った時点で外している（sheetReset）が、resize/matchMedia の
   取りこぼしでインライン値が残ってもサイドパネルが下にずれないよう、
   CSS 側にも保険を置く。インラインに勝つ必要があるので !important。 */
@media (min-width:901px){
  .page-search .panel{ transform:none !important; }
}