/* gear.css — 用具（/gear/<cat>/ の一覧・/gear/<cat>/<slug>/ の製品）。
   **golfscale の measurement.css（一覧: 見出し・回遊タブ・カードグリッド）・shaft_search.css（検索の入力と並べ替え）・
   ball.css（詳細: ヒーロー・節・スペックの定義リスト）と同じ値**に、色だけテーマの変数を写像したもの（2026-10-02 ユーザー指示）。
   クラス名も golfscale と同じ device-* にしてある（移植のたびに見比べるため）。色は gs-shell.css の変数だけ（hex を直書きしない）。 */

/* ── 一覧: 見出し ── */
.device-search { padding-bottom: 2.5rem; }
.device-index-head { margin: .5rem 0 0; }
.device-index-title { font-size: clamp(1.15rem, 4.4vw, 1.6rem); font-weight: 700; line-height: 1.35; letter-spacing: .01em; color: var(--ink); margin: 0 0 .2rem; overflow-wrap: anywhere; }
.device-index-sub { font-size: .85rem; color: var(--mute); margin: 0 0 1rem; }
.device-result-count { font-size: .86rem; color: var(--mute); margin: 1.4rem 0 .8rem; letter-spacing: .02em; }

/* ── 一覧: カテゴリの回遊タブ（golfscale の 3 カテゴリタブ） ── */
.device-cat-tabs { display: flex; gap: .45rem; margin: 0 0 1.1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.device-cat-tabs::-webkit-scrollbar { display: none; }
.device-cat-tab { flex: 0 0 auto; padding: .42rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--mute);
  font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.device-cat-tab:hover, .device-cat-tab:focus { border-color: var(--g); color: var(--g); }
.device-cat-tab.is-active { background: var(--g); border-color: var(--g); color: #fff; }
.device-cat-tab-n { margin-left: .35em; font-size: .78em; font-weight: 600; opacity: .8; }

/* ── 一覧: 検索（golfscale の search_controls: 丸い入力欄 ＋ 緑の虫めがね、丸い並べ替え） ── */
.device-controls { display: flex; flex-direction: column; gap: .75rem; }
.device-controls-row { display: flex; align-items: stretch; }
.device-search-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: .5rem 1rem; font-size: 1.05rem; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; -webkit-appearance: none; appearance: none; }
.device-search-input::placeholder { color: var(--gs-soft-mute); font-size: 1.05rem; }
.device-search-input:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px var(--gs-accent-soft); }
.device-search-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.1rem; min-width: 56px;
  background: var(--g); border: 1px solid var(--g); border-radius: 0 999px 999px 0; color: #fff; cursor: pointer; }
.device-search-btn:hover, .device-search-btn:focus { background: var(--g-dark); border-color: var(--g-dark); }
.device-search-btn .icon { width: 1.1rem; height: 1.1rem; }
.device-sort-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.device-select { width: 100%; min-width: 0; min-height: 44px; padding: .45rem 2.2rem .45rem 1rem; font-size: 1.05rem; color: var(--ink); background-color: var(--card);
  border: 1px solid var(--line); border-radius: 999px; -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2310242B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: .8rem; }
.device-select:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px var(--gs-accent-soft); }

/* ── 一覧: ブランドの絞り込み（golfscale の lesson-chip と同じ白いチップ。選択中は緑の枠＋淡い面） ── */
.device-brands { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.device-brand-chip { display: inline-flex; align-items: center; gap: .3em; min-height: 32px; padding: .25rem .7rem; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); font-size: .88rem; line-height: 1.3; text-decoration: none; }
.device-brand-chip .n { font-size: .78em; color: var(--mute); }
.device-brand-chip:hover { border-color: var(--g); color: var(--g-dark); text-decoration: none; }
.device-brand-chip[aria-pressed="true"] { border-color: var(--g); background: var(--tint); color: var(--g-dark); font-weight: 700; }
.device-brand-chip[aria-pressed="true"] .n { color: var(--g-dark); }

/* ── 一覧: カードグリッド（モバイル 2 列 / タブレット 3 列 / PC 4 列） ── */
.device-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 768px) { .device-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 992px) { .device-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── カード ── */
.device-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor: pointer; }
.device-card:hover, .device-card:focus-within { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(16,36,43,.3); border-color: var(--brand); outline: none; }
.device-card--discontinued { opacity: .85; }
/* 画像面は正方形。padding はこの箱に付けない（aspect-ratio + padding で iOS Safari がはみ出す ＝ golfscale 2026-07-26）。
   余白は中身側で取る。製品写真は余白なしの切り抜きが多いので、golfscale（1.2rem）より広めの余白で小さく見せる */
.device-card-media { position: relative; background: #fff; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--gs-border-soft); padding: 0; }
.device-card-media img { width: 72%; height: 72%; object-fit: contain; }
.device-card--discontinued .device-card-media img { filter: grayscale(.85); opacity: .8; }
.device-card-imgph { width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  background: var(--soft); border-radius: 10px; padding: .6rem; text-align: center; }
.device-card-imgph-brand { font-size: .82rem; font-weight: 700; color: var(--gs-soft-mute); letter-spacing: .06em; overflow-wrap: anywhere; }
.device-card-imgph-label { font-size: .64rem; font-weight: 600; color: var(--gs-soft-mute); letter-spacing: .12em; }
.device-card-badges { position: absolute; top: .45rem; left: .45rem; right: .45rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: flex-start; z-index: 3; pointer-events: none; }
.device-card-badge { font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); border: 1px solid var(--gs-border-soft); letter-spacing: .04em; }
.device-card-badge--discontinued { background: var(--gs-soft-mute); color: #fff; border-color: var(--gs-soft-mute); }
.device-card-badge--soldout { background: var(--s-soft); color: var(--s-ink); border-color: var(--s-soft); }
.device-card-body { padding: .75rem .85rem .9rem; display: flex; flex-direction: column; flex: 1; gap: .15rem; }
.device-card-brand { font-size: .75rem; color: var(--mute); letter-spacing: .02em; }
.device-card-name { font-size: 1rem; font-weight: 700; line-height: 1.3; margin: .1rem 0 0; color: var(--ink); }
.device-card-name a { color: inherit; text-decoration: none; }
.device-card-kana { font-size: .75rem; color: var(--mute); }
.device-card-meta { font-size: .76rem; color: var(--mute); line-height: 1.55; margin-top: .25rem; }
.device-card-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .5rem; margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--gs-border-soft); }
.device-card-year { font-size: .76rem; color: var(--mute); font-feature-settings: "tnum"; white-space: nowrap; }
.device-card-price { font-weight: 700; font-feature-settings: "tnum"; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.device-card-price small { font-weight: 500; color: var(--mute); font-size: .72em; margin-right: .15rem; }
.device-card-price--none { font-weight: 500; color: var(--mute); font-size: .76rem; white-space: normal; }
/* カード全体をリンクに（golfscale の Bootstrap .stretched-link と同じ） */
.device-card .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.device-empty { text-align: center; padding: 3rem 1rem; color: var(--mute); font-size: .9rem; }
.device-empty a { display: block; margin-top: .6rem; color: var(--g-dark); font-weight: 600; }

/* ── 詳細（golfscale の ball.css: ヒーロー ＋ 節 ＋ 板） ── */
.device-detail { max-width: 980px; margin: 0 auto; padding: 0 1rem 2.5rem; }
.device-hero { display: flex; gap: 1.75rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; margin-top: .5rem; }
.device-hero-media { flex: 0 0 240px; display: flex; flex-direction: column; align-items: center; gap: .5rem; background: #fff; border-radius: 10px; border: 1px solid var(--gs-border-soft); padding: .75rem; }
.device-hero-img { max-width: 100%; max-height: 200px; width: auto; height: auto; object-fit: contain; }
.device-hero-media .device-card-imgph { width: 100%; height: 200px; }
.device-hero-thumbs { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.device-thumb { display: block; width: 50px; height: 50px; padding: 2px; border: 2px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s ease; }
.device-thumb img { width: 100%; height: 100%; object-fit: contain; }
.device-thumb:hover { border-color: var(--line); }
.device-thumb.is-active, .device-thumb.is-active:hover { border-color: var(--g); }
.device-hero-credit { margin: 0; font-size: .7rem; color: var(--mute); text-align: center; }   /* 帰属（docs/design/images.md。必ず出す） */
.device-hero-credit a { color: inherit; }
.device-hero-body { flex: 1 1 auto; min-width: 0; }
.device-eyebrow { font-size: .72rem; letter-spacing: .12em; color: var(--g); font-weight: 700; }
.device-hero-brand { font-size: .9rem; color: var(--mute); margin: .15rem 0 .1rem; }
.device-hero-brand a { color: inherit; }
.device-title { font-size: 1.7rem; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0; }
.device-title-kana { font-size: .85rem; color: var(--mute); margin: .2rem 0 0; }
.device-tagline { margin: .7rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--mute); }
.device-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.device-badge { display: inline-block; font-size: .73rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: var(--gs-accent-soft); color: var(--ink); border: 1px solid var(--gs-border-soft); text-decoration: none; }
.device-badge small { font-weight: 500; color: var(--mute); margin-left: .2em; }
.device-badge--new { background: var(--g); color: #fff; border-color: var(--g); }
.device-badge--off { background: var(--soft); color: var(--mute); }
.device-badge--price { background: #fff; font-feature-settings: "tnum"; }
.device-badge--link { color: var(--g-dark); }
.device-badge--link:hover { border-color: var(--g); }
/* ストアで探す（golfscale の価格比較パネルと同じ位置・同じ枠。価格は持たないので検索導線だけ） */
.device-stores { margin-top: .9rem; padding: .85rem 1rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.device-stores-head { font-size: .88rem; font-weight: 700; color: var(--ink); margin: 0 0 .6rem; }
.device-pr { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border: 1px solid var(--line); border-radius: 4px; font-size: .68rem; font-weight: 700; color: var(--mute); vertical-align: 1px; }
.device-stores-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.device-store { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .9rem; border-radius: 10px; font-weight: 700; font-size: .86rem; text-decoration: none;
  background: var(--card); border: 1.5px solid var(--line); color: var(--g-dark); }
.device-store:hover { border-color: var(--g); background: var(--soft); text-decoration: none; }
.device-stores-official { display: inline-block; margin-top: .6rem; font-size: .82rem; color: var(--mute); }
.device-stores-note { margin: .5rem 0 0; font-size: .76rem; color: var(--mute); line-height: 1.6; }

.device-section { padding: 1.75rem 0 .25rem; }
.device-section > h2 { display: inline-block; font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 .9rem; padding-bottom: .4rem; border-bottom: 2px solid var(--g); }
.device-sec-count { margin-left: .5rem; font-size: .8rem; font-weight: 600; color: var(--mute); }
.device-sec-more { margin-left: .8rem; font-size: .82rem; font-weight: 700; color: var(--g); text-decoration: none; }
.device-sec-more:hover { text-decoration: underline; }
.device-panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; }
.device-panel .db-matrix { margin: 0; }
/* スペックは 1 列の定義リスト（ラベル 9em 固定・行ごとに完結） */
.device-spec-grid { display: block; margin: 0; }
.device-spec-row { display: grid; grid-template-columns: 9em 1fr; column-gap: 1.2rem; align-items: baseline; padding: .55rem .25rem; border-bottom: 1px dashed var(--gs-border-soft); font-size: .88rem; }
.device-spec-row:last-of-type { border-bottom: none; }
.device-spec-row dt { color: var(--mute); margin: 0; font-weight: 400; white-space: nowrap; }
.device-spec-row dd { margin: 0; color: var(--ink); font-weight: 600; text-align: left; overflow-wrap: break-word; min-width: 0; }
.device-detail .db-unofficial { margin-top: 2rem; }

@media (max-width: 767px) {
  .device-hero { flex-direction: column; gap: 1.1rem; padding: 1rem; }
  .device-hero-media { flex: none; align-self: center; width: 100%; max-width: 220px; }
  .device-title { font-size: 1.35rem; }
}
@media (max-width: 480px) {
  .device-spec-row { grid-template-columns: 1fr; row-gap: .1rem; padding: .5rem .15rem; }
  .device-spec-row dt { font-size: .74rem; }
  .device-search-input { font-size: 16px; }   /* iOS の自動ズーム防止 */
  .device-select { font-size: 16px; }
}