/* ==========================================================================
   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;
}
/* v14: 色グループが1つ増えたぶん、余白とチップの高さを詰めて
   「1280×720でパネル無スクロール」を守る（ui-spec: 項目を削るより先に余白） */
.panel-inner{ padding:7px 11px 8px; display:flex; flex-direction:column; gap:3px; }

/* 見出しは行の上ではなく左の細い列に置く。
   これだけで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 7px; font-size:12px; font-weight:900; line-height:1.26;
  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; }

/* 色チップ（v14）だけは丸が「色見本」そのものなので押しても色を残す。
   ブランドチップの流儀（押すと地がその色になる）をそのまま当てると
   白・シルバー・ナチュラルが紙色に沈んで押下が読めなくなるため、
   押下の強調は共通のピンクで示し、丸だけ色見本のままにする。 */
#colorChips .chip[aria-pressed="true"]{ background:var(--pink); }
#colorChips .chip[aria-pressed="true"] .chip-dot{ background:var(--swatch); }

/* ---- トグル ---- */
.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;
  z-index:1;                     /* v13.3: スタンプ(z-index:3)より必ず後ろ */
}
/* 基準スタンプはカード左上に出るので、その分だけ中身を下げる */
.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);
  z-index:3;                     /* v13.3: 枠線の上に重ねる（.card の注記参照） */
}
.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; }
/* v16: 名鑑では2つの案内（名前→ドラマーページ / 絵→基準検索）を並べる */
.scalenote-sep{ margin:0 5px; opacity:.6; }
@media (max-width:600px){
  .scalenote{ line-height:1.6; }
  .scalenote span{ display:block; }
  .scalenote .scalenote-sep{ display:none; }
}

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

/* ★スタンプと枠線の重なりについて（v13.3・オーナー指摘の修正）★
   カードの強調枠（.card.is-ref::after / .acard.is-target::after）は
   カードの「最後の子」として描かれるので、z-index を与えないと
   先に書かれているスタンプ(.refstamp / .sig)の上を線が横切ってしまう。
   枠 = z-index:1、スタンプ = 2〜3 に固定して前後を明示する。
   スタンプは不透明な地色＋自前の黒フチを持つので、前面に来れば線を完全に覆う。
   isolation:isolate でこの z-index 争いをカード内に閉じ込めてある
   （:hover の transform でも同じ前後関係が保たれる）。 */
.card{
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:18px;
  box-shadow:var(--sh);
  padding:16px 18px 14px;
  position:relative;
  isolation:isolate;
  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; }
/* v14: 型番・モデル名は個別ページ /sticks/{id}/ へのリンクにした。
   もとは div だったので、span になっても同じ縦積みに見えるよう block を明示する。 */
.card-link{ display:block; text-decoration:none; color:inherit; }
.card-link .sku,.card-link .mname{ display:block; }
.card-link:hover .sku{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }

.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;
  z-index:2;                     /* v13.3: 枠線の上に重ねる（.card の注記参照） */
}

.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; }
/* v16: 名前はドラマー個別ページへのリンク。カードの他の操作は変えない */
.acard .a-page{ display:block; text-decoration:none; color:inherit; }
.acard .a-page:hover .a-name{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }

.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;
  z-index:1;                     /* .card.is-ref::after と同じ規約 */
}

@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; }
}

/* ==================================================================== *
 * v10: ドラマー名鑑の頭文字レターバー
 * A〜Z＋「日本語」。結果一覧の上に置き、既存の絞り込みとANDで併用する。
 * 該当0のレターはチップと同じ考え方で暗転させる。
 * ==================================================================== */
.letterbar{
  /* stretch: 「日本語」だけ文字サイズが違うので、揃えないと高さが3pxずれる */
  display:flex; flex-wrap:wrap; align-items:stretch; gap:5px;
  margin:0 0 14px;
  padding:8px 10px 9px;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:14px;
  box-shadow:var(--sh-sm);
}
.letterbar:empty{ display:none; }
.letter{
  flex:none;
  min-width:28px; padding:3px 5px 4px;
  font-family:var(--font-en); font-size:14px; line-height:1.25; text-align:center;
  background:var(--bg); color:var(--ink);
  border:2px solid var(--ink); border-radius:8px;
  cursor:pointer;
  transition:transform .08s ease, background .1s ease, box-shadow .1s ease;
}
.letter:hover:not(:disabled){
  background:var(--yellow);
  transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--ink);
}
.letter:active:not(:disabled){ transform:translate(1px,1px); box-shadow:none; }
.letter[aria-pressed="true"]{
  background:var(--pink); color:#fff;
  box-shadow:2px 2px 0 var(--ink);
}
/* 暗転（v7.1のチップと同じ階調感で「押せない」と分かるように） */
.letter:disabled{
  opacity:.28; filter:saturate(.25);
  cursor:default; transform:none; box-shadow:none;
}
/* 「日本語」だけは日本語フォント・少し広め */
.letter-ja{
  font-family:inherit; font-weight:900; font-size:12px;
  padding:3px 11px 4px;
}

@media (max-width:900px){
  /* モバイルは折り返さず横スクロール1行（オーナー指示） */
  .letterbar{
    flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:6px; padding:8px 10px 9px;
  }
  .letterbar::-webkit-scrollbar{ display:none; }
  .letter{ min-width:34px; font-size:15px; padding:5px 6px 6px; }
  .letter-ja{ font-size:13px; padding:5px 12px 6px; }
}

/* ==================================================================== *
 * v11: 本人公式リンク（名鑑カード）
 * アイコンはインラインSVG（外部画像・外部アイコンフォントは使わない）。
 * 小さいがタップできる四角い黒フチボタンで、世界観を崩さない大きさに。
 * ==================================================================== */
.a-links{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px;
  margin-top:7px;
}
.alink{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none;
  color:var(--ink);
  background:var(--bg);
  border:2px solid var(--ink); border-radius:8px;
  box-shadow:2px 2px 0 var(--ink);
  text-decoration:none;
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease, color .1s ease;
}
.alink svg{ width:15px; height:15px; display:block; }
.alink:hover{
  background:var(--yellow);
  transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink);
}
.alink:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
/* ホバー色はサービスの印象に寄せる（ロゴ画像は使わず地色だけ） */
.alink-site:hover{ background:var(--green); }
.alink-x:hover{ background:var(--ink); color:var(--bg); }
.alink-instagram:hover{ background:var(--pink); color:#fff; }
.alink-youtube:hover{ background:#FF5C5C; color:#fff; }
.alink-facebook:hover{ background:var(--cyan); }

@media (max-width:900px){
  /* 指で押せる大きさに（並びは1行のまま折り返す） */
  .a-links{ gap:6px; margin-top:8px; }
  .alink{ width:32px; height:32px; border-radius:9px; }
  .alink svg{ width:18px; height:18px; }
}

/* ==================================================================== *
 * v12: フィーリング検索
 * 感覚語の入口。結果リストの直上に置き、デスクトップ・モバイル共通で
 * 「シートを開かずに」押せる位置にする。チップ列は横スクロールの1行。
 * 定義文は、押した瞬間に何が起きたかを言葉で見せる要（データ主義の担保）。
 * ==================================================================== */
.feelbar{
  margin:0 0 14px;
  padding:9px 12px 10px;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:14px;
  box-shadow:var(--sh-sm);
}
.feel-head{
  font-size:11px; font-weight:900; letter-spacing:.08em;
  opacity:.6; margin-bottom:6px;
}
/* デスクトップは折り返して7個とも常時見せる（結果エリア幅なら2行で収まる）。
   横スクロールにすると端で見切れて「まだある」ことが伝わらないため。 */
.feel-scroll{ position:relative; }
.feel-chips{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:6px;
}
.feel{
  flex:none; white-space:nowrap;
  background:var(--bg); color:var(--ink);
  border:2px solid var(--ink); border-radius:999px;
  padding:5px 13px 6px;
  font-size:13px; font-weight:900;
  cursor:pointer;
  transition:transform .08s ease, background .1s ease, box-shadow .1s ease, color .1s ease;
}
/* ホバーは「触れている」だけの控えめな表現に留める。
   ベタ塗り＋ハードシャドウは選択中(aria-pressed)だけの見た目にして、
   ホバーと選択を見間違えないようにする（v12.1・オーナー誤認の再発防止）。 */
.feel:hover{
  background:#FFF3C4;
  transform:translateY(-1px);
}
.feel:active{ transform:translateY(1px); }
.feel[aria-pressed="true"]{
  background:var(--pink); color:#fff;
  box-shadow:2px 2px 0 var(--ink);
}
.feel[aria-pressed="true"]:hover{ background:var(--pink); }
/* 定義文。タグ解説と同じ「薄地に黒文字」のトーンで、落ち着いて読ませる */
.feel-def{
  margin:8px 0 0;
  background:#FFF6DF;
  border:2px solid var(--ink); border-radius:10px;
  padding:5px 10px 6px;
  font-size:12px; font-weight:700; line-height:1.5;
}
.feel-def[hidden]{ display:none; }

@media (max-width:900px){
  .feelbar{ margin-bottom:12px; padding:8px 10px 9px; }
  .feel{ padding:7px 14px 8px; font-size:14px; }   /* 指で押せる大きさに */
  .feel-def{ font-size:12.5px; }

  /* モバイルは横スクロールの1行に戻す */
  .feel-chips{
    flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:1px;
  }
  .feel-chips::-webkit-scrollbar{ display:none; }

  /* 「まだ先がある」ことを端のフェードで示す。
     スクロール位置に応じて app.js が has-left / has-right を付け外しするので、
     端まで行けば消える（嘘のヒントを出さない）。 */
  .feel-scroll::before,
  .feel-scroll::after{
    content:""; position:absolute; top:0; bottom:0; width:34px;
    pointer-events:none; opacity:0;
    transition:opacity .15s ease;
  }
  .feel-scroll::before{
    left:0;
    background:linear-gradient(to right, var(--paper) 20%, rgba(255,255,255,0));
  }
  .feel-scroll::after{
    right:0;
    background:linear-gradient(to left, var(--paper) 20%, rgba(255,255,255,0));
  }
  .feel-scroll.has-left::before{ opacity:1; }
  .feel-scroll.has-right::after{ opacity:1; }
}

/* ============================ v14: モデル別静的ページ ============================
   /sticks/{id}/ の1モデル1ページ。JSを一切読み込まない静的ページなので、
   ここのスタイルは本体（検索ページ）のトークンと部品を流用した簡易版にしてある。
   世界観（クリーム地・太い黒フチ・ハードシャドウ）は本体と同じ。
   ------------------------------------------------------------------------------ */
.mp-wrap{ max-width:960px; margin:0 auto; padding:18px 18px 40px; }

/* パンくず */
.mp-crumbs{ font-size:12px; font-weight:900; opacity:.7; margin-bottom:12px; }
.mp-crumbs a{ color:var(--ink); }
.mp-sep{ margin:0 7px; opacity:.5; }

/* 主役カード */
.mp-card{
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:18px;
  box-shadow:var(--sh); padding:20px 20px 18px; margin-bottom:26px;
  border-top:10px solid var(--swatch,#eee);
}
.mp-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mp-sig{
  background:var(--yellow); border:2px solid var(--ink); border-radius:8px;
  padding:2px 10px 3px; font-size:12px; font-weight:900;
  transform:rotate(-1.5deg); box-shadow:2px 2px 0 var(--ink);
}
.mp-title{
  font-family:var(--font-en); font-size:26px; line-height:1.15;
  margin:12px 0 2px; word-break:break-word;
}
.mp-title-sku{ font-size:34px; }
.mp-sub{ margin:0 0 14px; font-size:14px; font-weight:700; opacity:.7; word-break:break-word; }
.mp-bigspec{ display:inline-flex; }
/* v14.1: H1直下の導入文。数値の羅列ではなく、何のためのスティックかを1〜2文で言う。 */
.mp-intro{ margin:14px 0 0; font-size:14px; font-weight:700; line-height:1.8; }
.mp-fig{ margin:16px 0 0; }
.mp-fig figcaption{ font-size:11.5px; font-weight:700; opacity:.6; line-height:1.6; margin-top:2px; }
.mp-badges{ margin-top:14px; }

.mp-actions{
  margin-top:16px; padding-top:14px;
  border-top:3px dashed rgba(17,17,17,.18);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.mp-btn{
  display:inline-flex; align-items:center; text-decoration:none; color:var(--ink);
  background:var(--cyan); border:var(--bw) solid var(--ink); border-radius:999px;
  padding:8px 18px; font-size:13px; font-weight:900; box-shadow:var(--sh-sm);
  transition:transform .1s ease, box-shadow .1s ease;
}
.mp-btn.ghost{ background:var(--paper); }
.mp-btn:hover{ transform:translate(-2px,-2px) rotate(-1deg); box-shadow:6px 6px 0 var(--ink); }
.mp-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* 各セクション */
.mp-sec{
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:16px;
  box-shadow:var(--sh-sm); padding:16px 18px 18px; margin-bottom:20px;
}
.mp-sec h2{
  font-size:16px; font-weight:900; margin:0 0 12px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; word-break:break-word;
}
.mp-n{
  font-family:var(--font-num); font-size:13px;
  background:var(--purple); color:#fff; border:2px solid var(--ink); border-radius:999px;
  padding:1px 9px 2px;
}
.mp-lead{ font-size:12px; font-weight:700; opacity:.65; margin:-6px 0 10px; line-height:1.6; }

/* スペック表 */
.mp-spec{ width:100%; border-collapse:collapse; font-size:14px; }
.mp-spec caption{
  caption-side:top; text-align:left;
  font-size:11.5px; font-weight:700; opacity:.6; padding-bottom:8px;
}
.mp-spec th,.mp-spec td{
  border-bottom:2px solid rgba(17,17,17,.14);
  padding:8px 6px; text-align:left; vertical-align:baseline;
}
.mp-spec th{ width:34%; font-weight:900; opacity:.75; white-space:nowrap; }
.mp-spec td{ font-weight:700; word-break:break-word; }
.mp-spec td.is-num{ font-family:var(--font-num); font-size:16px; font-variant-numeric:tabular-nums; }
.mp-wq{ font-family:var(--font-jp); font-size:11px; font-weight:900; opacity:.65; margin-left:4px; }
/* v14.1: 併記する単位（日本語版のインチ、英語版のmm）。主役の数字より一段落とす。 */
.mp-alt{ font-family:var(--font-jp); font-size:12px; font-weight:700; opacity:.55; margin-left:6px; }

/* 使用ドラマーはカードと同じ部品（.drummers-list / .drummer / .rel）を流用 */
.page-model .drummers-list{ margin-top:0; }

/* タグ解説 */
.mp-notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.mp-note{
  background:var(--bg); border:2px solid var(--ink); border-radius:12px; padding:10px 12px 11px;
}
.mp-note-head{ display:flex; align-items:baseline; gap:7px; }
.mp-note-title{ font-size:13px; font-weight:900; }
.mp-note-group{
  font-size:10px; font-weight:900;
  background:var(--ink); color:var(--bg); border-radius:999px; padding:1px 7px 2px;
}
.mp-note-body{ margin:6px 0 0; font-size:12.5px; font-weight:500; line-height:1.7; }

/* 同ブランドの近いモデル */
.mp-sibs{ display:flex; flex-wrap:wrap; gap:8px; }
.mp-sib{
  display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink);
  background:var(--bg); border:2px solid var(--ink); border-radius:999px;
  padding:4px 12px 5px; box-shadow:2px 2px 0 var(--ink);
}
.mp-sib:hover{ background:var(--yellow); }
.mp-sib-sku{ font-family:var(--font-en); font-size:13px; }
.mp-sib-dim{ font-size:11px; font-weight:700; opacity:.6; font-variant-numeric:tabular-nums; }

/* v14.1: 言語切替（日本語版⇄英語版）。ヘッダーの他のピルと同じ形で色だけ変える。 */
.mp-lang{ background:var(--yellow); }

.mp-back{ text-align:center; margin:24px 0 0; font-size:14px; font-weight:900; }
.mp-back a{ color:var(--ink); }

@media (max-width:600px){
  .mp-wrap{ padding:14px 12px 32px; }
  .mp-card{ padding:16px 14px 14px; }
  .mp-title{ font-size:21px; }
  .mp-title-sku{ font-size:27px; }
  .mp-spec th{ width:40%; white-space:normal; }
  .mp-actions .amazon,.mp-actions .mp-btn{ flex:1 1 100%; justify-content:center; }
}

/* ==========================================================================
   記事（/guide/）— v15
   世界観は本体と同じ（クリーム地・太フチ・ステッカー見出し）だが、
   本文は読み物として落ち着かせる: 幅 40rem・行間広め・太字は要点だけ。
   図版のSVGは幅 560px を上限に等倍で置き、狭い画面でだけ縮む
   （100%で伸ばすと軸の数字が読めない大きさまで縮んでしまうため）。
   生成は scrapers/build_articles.py。
   ========================================================================== */
.ar-wrap{ max-width:44rem; margin:0 auto; padding:18px 18px 40px; }
.ar-art{ max-width:40rem; margin:0 auto; }

.ar-kicker{
  display:inline-block; margin:0 0 10px;
  background:var(--cyan); border:var(--bw) solid var(--ink); border-radius:999px;
  box-shadow:3px 3px 0 var(--ink); transform:rotate(-1.5deg);
  padding:2px 14px 3px; font-size:12px; font-weight:900;
}
.ar-h1{
  margin:0 0 10px; font-size:clamp(25px,5.6vw,35px); line-height:1.3;
  font-weight:900; letter-spacing:-.01em;
}
.ar-meta{
  margin:0 0 22px; display:flex; flex-wrap:wrap; gap:6px 14px;
  font-size:12px; font-weight:900; opacity:.6; font-variant-numeric:tabular-nums;
}
.ar-lead{ font-size:16px; font-weight:500; line-height:1.9; }

/* ---- 本文の組み ---- */
.ar-art p{ font-size:16px; font-weight:500; line-height:1.95; margin:0 0 1.25em; }
.ar-art p b,.ar-art li b{ font-weight:900; }
.ar-art a{ color:var(--ink); text-decoration-thickness:2px; text-underline-offset:3px; }
.ar-art a:hover{ background:var(--yellow); }
.ar-art code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; font-weight:700;
  background:var(--paper); border:2px solid var(--ink); border-radius:6px; padding:0 5px 1px;
  white-space:nowrap;
}
.ar-art h2{
  margin:44px 0 18px; font-size:clamp(18px,4.2vw,22px); line-height:1.45; font-weight:900;
  background:var(--yellow); border:var(--bw) solid var(--ink); border-radius:12px;
  box-shadow:var(--sh-sm); transform:rotate(-.6deg);
  padding:8px 15px 9px;
}

/* ---- 図版 ---- */
.ar-fig{
  margin:0 0 24px; padding:14px 14px 12px;
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:16px;
  box-shadow:var(--sh-sm);
}
.ar-fig figcaption{
  margin-top:10px; font-size:12.5px; font-weight:500; line-height:1.75; opacity:.78;
}
.ar-plot{ display:block; width:560px; max-width:100%; height:auto; margin:0 auto; }
.ar-sil{ display:block; width:100%; height:auto; overflow:visible; }
/* 拡大版は viewBox で一部だけを覗く絵なので、必ず切り抜く。
   overflow:visible のままだと全長470mmぶんの輪郭が15倍に拡大されてページ全体を覆う。 */
.ar-sil.is-zoom{ overflow:hidden; border-radius:8px; background:var(--bg); }
/* 重ね図の内側の2本は輪郭線だけで描く（3本とも塗ると1本の帯にしか見えない）。
   いちばん細い1本は本体の「基準スティックのゴースト」と同じ破線にしてある。 */
.ar-sil-line{
  fill:none; stroke:var(--pink); stroke-width:3.5; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* 中央値の線はピンク（3段の分布図の中央値線と同じ色）、最細は黒の破線。
   黒一色だと、いちばん太い1本の輪郭線と見分けが付かない。 */
.ar-sil-line.is-ghost{ stroke:var(--ink); stroke-dasharray:9 7; }

.ar-core{ fill:var(--yellow); opacity:.5; }
.ar-row{ fill:var(--ink); opacity:.05; }
.ar-tick{ stroke:var(--ink); stroke-width:1; opacity:.18; }
.ar-axis{ stroke:var(--ink); stroke-width:2.5; }
.ar-med{ stroke:var(--pink); stroke-width:3.5; }
.ar-lead{ stroke:var(--ink); stroke-width:1.6; stroke-dasharray:4 4; opacity:.55; }
.ar-dot{ stroke:var(--ink); stroke-width:.9; }
.ar-mark{ fill:var(--ink); }
.ar-marknum{ fill:var(--bg); font-family:var(--font-num); font-size:16px; }
.ar-axnum{ fill:var(--ink); font-family:var(--font-num); font-size:16px; opacity:.75; }
.ar-axunit{ fill:var(--ink); font-family:var(--font-num); font-size:14px; opacity:.5; }
.ar-rowlab{ fill:var(--ink); font-family:var(--font-en); font-size:22px; }

/* ブランド色の凡例 */
.ar-keys{ display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:12px; }
.ar-key{
  display:inline-flex; align-items:center; gap:5px;
  border:2px solid var(--ink); border-radius:999px; background:var(--bg);
  padding:1px 8px 2px; font-size:10.5px; font-weight:900; line-height:1.6;
}
.ar-key i{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ink); flex:none; }
.ar-key b{ font-family:var(--font-num); font-size:10px; opacity:.55; }

/* 図の番号マーカーの説明 */
.ar-marks{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:8px; }
.ar-marks li{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font-size:14px; font-weight:500; line-height:1.7;
}
.ar-mno{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--ink); color:var(--bg);
  display:inline-grid; place-items:center;
  font-family:var(--font-num); font-size:12px; align-self:center;
}

/* ---- 表 ---- */
.ar-scroll{ overflow-x:auto; margin:0 0 24px; -webkit-overflow-scrolling:touch; }
.ar-tbl{
  width:100%; border-collapse:collapse; margin:0 0 24px;
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:12px;
  font-variant-numeric:tabular-nums; overflow:hidden;
}
.ar-scroll .ar-tbl{ margin-bottom:0; }
.ar-wide{ min-width:26rem; }
.ar-tbl caption{
  /* 左の padding は必須。0 にすると表の3px枠に1文字目が食われる。 */
  caption-side:top; text-align:left; font-size:12px; font-weight:900; line-height:1.6;
  opacity:.7; padding:0 4px 7px 5px;
}
.ar-tbl th,.ar-tbl td{
  border-bottom:2px solid rgba(17,17,17,.14); padding:7px 10px 8px;
  font-size:13.5px; text-align:right;
}
.ar-tbl thead th{
  background:var(--ink); color:var(--bg); font-size:11.5px; font-weight:900;
  border-bottom:0; white-space:nowrap;
}
.ar-tbl th[scope="row"],.ar-tbl thead th:first-child{ text-align:left; }
.ar-tbl tbody tr:last-child th,.ar-tbl tbody tr:last-child td{ border-bottom:0; }
.ar-tbl .ar-hi{ background:var(--yellow); }
.ar-tbl .ar-ng{ background:rgba(255,61,127,.12); }
/* 「ヒッコリー」「ドラムセット」が1文字ずつ縦に割れるのを防ぐ。
   min-width で下限を広げるやり方だと、狭い画面で必要以上に横スクロールが出る。
   **割れて困るセルだけ** nowrap にすれば、表は中身なりの幅に収まる。 */
.ar-nw{ white-space:nowrap; }

/* ---- 手順・出典 ---- */
.ar-steps{ margin:0 0 24px; padding-left:1.4em; }
.ar-steps li{ font-size:15.5px; font-weight:500; line-height:1.9; margin-bottom:.6em; }
.ar-method{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ar-method li{
  font-size:13px; font-weight:500; line-height:1.8;
  background:var(--paper); border:2px solid var(--ink); border-radius:10px;
  padding:9px 12px 10px;
}

/* ---- 導線 ---- */
.ar-cta{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; }
.ar-btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; background:var(--pink);
  border:var(--bw) solid var(--ink); border-radius:999px;
  padding:9px 18px 10px; font-size:14px; font-weight:900;
  box-shadow:var(--sh-sm); transition:transform .1s ease, box-shadow .1s ease;
}
.ar-btn.ghost{ background:var(--paper); color:var(--ink); }
.ar-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:var(--pink); color:#fff; }
.ar-btn.ghost:hover{ background:var(--yellow); color:var(--ink); }
.ar-back{ text-align:center; margin:36px 0 0; font-size:14px; font-weight:900;
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.ar-back a{ color:var(--ink); }

/* ---- 乗り換えリスト（第4弾 /guide/stick-equivalents/）----
   基準1本＋他ブランドの最近似3本で1ブロック。**表にしていない**のは、
   情報を列に並べると本文幅(40rem)に収まらず、横スクロールに逃がすと右端が
   切れていることに読者が気づけないため。行が折り返すだけのカードなら、
   デスクトップでも375pxでも「切れる」「型番が途中で割れる」が起きない。 */
.eq-cap{
  /* .ar-tbl caption と同じ見え方（キャプションとしての格を揃える） */
  font-size:12px; font-weight:900; line-height:1.6; opacity:.7; padding:0 4px 8px 5px;
}
.eq-cap b{ font-weight:900; opacity:1; }
.eq-list{ display:grid; gap:12px; margin:0 0 26px; }
.eq-group{
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:12px;
  overflow:hidden;
}
/* 型番の途中で折り返させない。いちばん長いラベルでも 375px の中に収まる */
.eq-group a{ white-space:nowrap; text-decoration-thickness:2px; text-underline-offset:3px; }
.eq-ref{ background:var(--yellow); padding:9px 12px 10px; }
.eq-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 9px;
  font-size:15px; font-weight:900; line-height:1.5;
}
.eq-no{ font-family:var(--font-num); font-size:12px; opacity:.5; }
.eq-sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 9px; margin-top:4px;
  font-size:12px; font-weight:700; line-height:1.6; opacity:.85;
}
.ar-art .eq-cta{
  /* .ar-art a{color:var(--ink)} より詳細度を上げる（黒地に黒文字になるため） */
  margin-left:auto; background:var(--ink); color:var(--bg); border-radius:999px;
  padding:2px 11px 3px; font-size:11.5px; font-weight:900; text-decoration:none;
}
.ar-art .eq-cta:hover{ background:var(--pink); color:#fff; }
.eq-hit{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 9px;
  padding:8px 12px 9px; border-top:2px solid rgba(17,17,17,.14);
  font-size:13px; font-weight:700; line-height:1.6;
}
.eq-d{ font-family:var(--font-num); font-size:13px; min-width:2.7em; opacity:.85; }
.eq-dim{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.eq-delta{
  font-family:var(--font-num); font-size:12px; opacity:.7; white-space:nowrap;
}
.eq-mks{ margin-left:auto; display:flex; gap:8px; }
.eq-mk{ font-size:11px; font-weight:900; white-space:nowrap; opacity:.8; }
.eq-mk i{ font-style:normal; margin-left:3px; font-size:12px; }
.eq-mk.is-ok i{ color:#0A8A3C; }
.eq-mk.is-ng i{ color:var(--pink); }
.eq-mk.is-na{ opacity:.45; }

/* ---- 記事一覧 ---- */
.ar-cards{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px; }
.ar-card a{
  display:grid; gap:5px; text-decoration:none; color:var(--ink);
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:16px;
  box-shadow:var(--sh-sm); padding:16px 18px 17px;
  transition:transform .1s ease, box-shadow .1s ease;
}
.ar-card a:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); background:var(--paper); }
.ar-card-kicker{
  justify-self:start; background:var(--cyan); border:2px solid var(--ink); border-radius:999px;
  padding:1px 10px 2px; font-size:11px; font-weight:900;
}
.ar-card-title{ font-size:18px; font-weight:900; line-height:1.45; }
.ar-card-desc{ font-size:13px; font-weight:500; line-height:1.75; opacity:.8; }
.ar-card-meta{ font-size:11px; font-weight:900; opacity:.5; font-variant-numeric:tabular-nums; }

/* ヘッダーの「読みもの」ピル。いま見ているページのぶんだけ色を変える。 */
.navlink.nav-guide{ background:var(--purple); color:#fff; }
.navlink.is-here{ background:var(--ink); color:var(--bg); }

@media (max-width:600px){
  .ar-wrap{ padding:14px 12px 30px; }
  .ar-fig{ padding:10px 8px 10px; border-radius:12px; }
  .ar-art p,.ar-lead{ font-size:15.5px; line-height:1.9; }
  .ar-art h2{ margin:34px 0 14px; padding:7px 12px 8px; }
  .ar-tbl th,.ar-tbl td{ padding:6px 7px 7px; font-size:12.5px; }
  .ar-cta .ar-btn{ flex:1 1 100%; }
}

/* ==========================================================================
   ドラマー個別ページ（/drummers/{slug}/）— v16
   「What drumsticks does {Name} use?」への直答ページ。モデル別ページ（.mp-*）の
   部品をそのまま流用し、ここでは直答ブロックとスティックカードの積み方だけを足す。
   生成は scrapers/build_drummers.py。モバイル最優先（英語圏の検索流入が主）。
   ========================================================================== */
.page-drummer .mp-card{ border-top:10px solid var(--swatch,#eee); }
.dp-title{
  font-size:26px; font-weight:900; line-height:1.3;
  margin:12px 0 2px; word-break:break-word;
}
/* 日本語版は「{名前}の使用ドラムスティック」。名前だけ大きく、述語は一段落とす。 */
.dp-title-suffix{ font-size:19px; font-weight:900; opacity:.7; margin-left:2px; }
.dp-sub{ margin:0 0 4px; font-size:13.5px; font-weight:700; opacity:.7; word-break:break-word; }

/* ---- 直答ブロック（このページの主役。ここだけ見れば答えが分かる） ---- */
.dp-answer{
  margin:16px 0 0; padding:14px 15px 15px;
  background:var(--yellow); border:var(--bw) solid var(--ink); border-radius:14px;
  box-shadow:var(--sh-sm);
}
.dp-answer-head{ margin:0 0 10px; font-size:13px; font-weight:900; opacity:.75; }
.dp-a-group + .dp-a-group{ margin-top:12px; padding-top:12px; border-top:3px dashed rgba(17,17,17,.25); }
.dp-a-brandline{ margin:0 0 7px; font-size:12px; font-weight:900; opacity:.7; }
.dp-a-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.dp-a-item{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dp-a-link{
  display:inline-flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  text-decoration:none; color:var(--ink);
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:12px;
  padding:7px 14px 8px; box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease;
}
.dp-a-link:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.dp-a-brand{ font-size:12px; font-weight:900; opacity:.7; }
.dp-a-sku{ font-family:var(--font-en); font-size:22px; line-height:1.1; word-break:break-word; }
.dp-a-dim{ font-size:12px; font-weight:700; opacity:.65; font-variant-numeric:tabular-nums; }
.dp-answer-note{ margin:11px 0 0; font-size:12px; font-weight:700; line-height:1.7; opacity:.75; }

/* ---- スティックカード（1本ぶん） ---- */
.dp-stick{
  background:var(--bg); border:2px solid var(--ink); border-radius:14px;
  padding:13px 14px 14px; border-top:7px solid var(--swatch,#eee);
}
.dp-stick + .dp-stick{ margin-top:16px; }
.dp-stick-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dp-stick-name{ margin:9px 0 2px; font-size:17px; font-weight:900; line-height:1.35; word-break:break-word; }
.dp-stick-name a{ color:var(--ink); text-decoration:none; }
.dp-stick-name a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
.dp-stick-rel{ margin:0; font-size:12px; font-weight:700; opacity:.7; line-height:1.6; }
.dp-stick-missing{ margin:0; font-size:13px; font-weight:700; opacity:.7; }
.dp-stick .mp-fig{ margin:10px 0 6px; }
.dp-stick .mp-actions{ border-top:3px dashed rgba(17,17,17,.18); }

/* ---- 出典（必須ブロック。ここが薄いと直答ページの意味が無い） ---- */
.dp-src{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.dp-src li{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font-size:13px; font-weight:700; line-height:1.7;
}
.dp-src-text{ flex:1 1 16rem; }
.dp-src-link{ color:var(--ink); font-size:12px; font-weight:900; white-space:nowrap; }
.dp-disclaimer{
  margin:12px 0 0; padding:9px 12px 10px;
  background:var(--bg); border:2px dashed rgba(17,17,17,.3); border-radius:10px;
  font-size:12.5px; font-weight:500; line-height:1.75;
}
.dp-disclaimer strong{ font-weight:900; }

/* ---- プロフィールの本人リンク ---- */
.dp-links{ margin:12px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dp-links-head{ font-size:12px; font-weight:900; opacity:.65; }
.dp-link{
  display:inline-flex; text-decoration:none; color:var(--ink);
  background:var(--bg); border:2px solid var(--ink); border-radius:999px;
  padding:2px 11px 3px; font-size:12px; font-weight:900; box-shadow:2px 2px 0 var(--ink);
}
.dp-link:hover{ background:var(--cyan); }

/* ---- このスティックに近いモデル（v16.1）
   Reference検索と同じ類似度で選んだ上位6件。ミニシルエットを添えて、
   絵のまま「近い」が分かるようにする。モデルページへの導線でもある。 ---- */
.dp-sims{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.dp-sim{
  display:grid; gap:6px; text-decoration:none; color:var(--ink);
  background:var(--bg); border:2px solid var(--ink); border-radius:12px;
  padding:9px 11px 10px;
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.dp-sim:hover{ background:var(--yellow); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.dp-sim-svg .stick-svg{ width:100%; }
.dp-sim-txt{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dp-sim-brand{ font-size:11px; font-weight:900; opacity:.65; }
.dp-sim-sku{ font-family:var(--font-en); font-size:15px; word-break:break-word; }
.dp-sim-dim{ margin-left:auto; font-size:11.5px; font-weight:700; opacity:.65;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.dp-sim-ref{ margin:11px 0 0; font-size:11.5px; font-weight:700; opacity:.55; }

/* 人物チップは名鑑・モデルページと同じ部品（.drummers-list / .drummer）を流用 */
.page-drummer .drummers-list{ margin-top:0; }
.page-drummer .mp-back{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

@media (max-width:600px){
  .dp-title{ font-size:21px; }
  .dp-title-suffix{ font-size:16px; }
  .dp-answer{ padding:12px 12px 13px; }
  .dp-a-sku{ font-size:19px; }
  .dp-a-link{ flex:1 1 100%; }
  .dp-stick{ padding:11px 11px 12px; }
  .dp-sims{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Amazonアソシエイト開示（v16）
   Amazonアソシエイト運営規約 第5条の表示義務。全ページのフッターに常設し、
   Amazonリンクが並ぶ場所にはその直前にも短い注記を出す。
   運用ルールと文言の正本は docs/affiliate-disclosure.md / scrapers/disclosure.py。

   ★世界観を壊さないこと。既存の注意書き（.site-foot .note）と同じ地味さで置く。
     ただし「隠している」と見えてはいけないので、注意書きより不透明度は上げてある
     （規約の「目立つように明示」／FTCの "clear and conspicuous" 対応）。
   ========================================================================== */
.site-foot .aff-disclosure{
  margin-top:12px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.22);
  opacity:.85; font-weight:700;
}

/* リンクのすぐ上に置く1行。結果リスト・モデルページ・ドラマーページ共通 */
.aff-note{
  margin:0 0 10px; font-size:12px; font-weight:700;
  opacity:.62; line-height:1.6;
}
/* モデルページではボタン列（.mp-actions）の直下に付くので、間隔を詰める */
.mp-actions + .aff-note{ margin:8px 0 0; }