/*
 * TTRB_BEGINNER_GUIDE
 *
 * このCSSは一覧/詳細の見た目をまとめて管理します。
 * 初心者向けの触り所:
 * - 色: 先頭付近の :root[data-theme="light|dark"] のCSS変数
 * - 余白: "Layout: page padding / gaps" セクション
 * - モバイル: "Mobile tweaks" セクション
 *
 * もっと詳しい説明: docs/EDITING_GUIDE.md を参照
 */

/*
  TT Rubber Browser - rubbers.css

  このCSSはプラグイン側のUI専用です（テーマのCSSと競合する場合あり）。
  初心者向けメモ（よく調整する場所）:
  - スマホの余白: @media (max-width:899px) / (max-width:420px) の padding / gap
  - カード内の並び: .ttrb-card / .ttrb-body / .ttrb-stats
  - 絞り込みボタン: .ttrb-filterTop（右上）
  - ポップアップの重なり: z-index（.ttrb-pop / .ttrb-drawer / .ttrb-backdrop）
*/

/* TT Rubber Browser styles (sticky header + responsive + B案バー数値ピル) */
:root{--bg:#f3f4f6;--card:#ffffff;--border:#e5e7eb;--text:#111827;--muted:#6b7280;--shadow:0 10px 30px rgba(17,24,39,.10);--radius:24px;}
:root[data-theme="dark"]{--bg:#0b1220;--card:#0f172a;--border:#22304d;--text:#e5e7eb;--muted:#9ca3af;--shadow:0 14px 34px rgba(0,0,0,.45);}
body.ttrb-modal-open{overflow:hidden;}

/*
  ------------------------------------------------------------
  iPhone「ホーム画面に追加（standalone）」での safe-area 対応
  ------------------------------------------------------------
  症状: ホーム画面追加で開くと、上部の時計/ノッチ領域にヘッダーが被る。
  原因: iOSのstandaloneは表示領域が広く、テーマ側ヘッダー(top:0)がそのまま描画されるため。
  対策: JS(rubbers.js)で body/html に .ttrb-standalone を付けているので、
        その時だけSWELLのヘッダー位置を safe-area 分だけ下げる。

  ※ このCSSは「ttrbのページだけ」有効になるよう、.ttrb-has-app でスコープしています。
*/
@supports (padding: env(safe-area-inset-top)) {
  /* SWELLのヘッダーが固定/追従の時に、status bar分だけ下げる */
  .ttrb-has-app.ttrb-standalone .l-header,
  .ttrb-has-app.ttrb-standalone header.l-header,
  .ttrb-has-app.ttrb-standalone .site-header {
    top: constant(safe-area-inset-top) !important; /* 古いiOS向け */
    top: env(safe-area-inset-top) !important;
  }
}
/*
  SWELL等テーマに強く影響されないように、プラグイン側は .ttrb-app 配下だけで完結。
  既定は「ほどよい最大幅 + 余白」で、サイドバー追加にも対応しやすくする。
*/
.ttrb-app{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:var(--text);max-width:var(--ttrb-max-width,1440px);--ttrb-sticky-top:0px;margin:0 auto;padding:0 1px;padding-left: 0px;padding-right: 0px;box-sizing:border-box;}
/* 画面いっぱいに広げたい場合のみ使用（[rubbers_list fullbleed="1"]） */
.ttrb-fullbleed{position:relative;left:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;max-width:100vw;padding-left:12px;padding-right:12px;box-sizing:border-box;}
.ttrb-skeleton{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.6);color:var(--muted);}
.ttrb-shell{background:radial-gradient(1200px 600px at 20% -10%, #eef6ff 0%, rgba(238,246,255,0) 70%),radial-gradient(900px 600px at 90% 0%, #effcfb 0%, rgba(239,252,251,0) 65%),var(--bg);border-radius:18px;padding:1px;padding-left: 0px;padding-right: 0px;}
.ttrb-sticky{position:sticky;top:var(--stickyTop,0px);z-index:50;background:rgba(243,244,246,.92);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.8);border-radius:18px;padding:12px;}
.ttrb-toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ttrb-title{margin:0;font-size:16px;font-weight:800;}
.ttrb-count{font-size:12px;color:var(--muted);padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.9);}
.ttrb-tabs{display:flex;gap:8px;overflow:auto;-webkit-overflow-scrolling:touch;padding:6px 2px;}

/* =========================
   種別タブ（裏/表/粒高）を STEPN Marketplace 風に「大きなタブ」にする
   - HTML側で .ttrb-typeTabs が付いている時だけ効かせる
   ========================= */
.ttrb-typeTabs{
  gap:18px;
  align-items:flex-end;
  padding: 2px 2px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  overflow: visible; /* 下線が切れないように */
}

.ttrb-typeTabs .ttrb-tab{
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 10px 6px 12px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .02em;
  opacity: .55;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.ttrb-typeTabs .ttrb-tab.is-active{
  opacity: 1;
}

.ttrb-typeTabs .ttrb-tab.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: currentColor;
}

/* 旧来のピル型タブ（もし他画面で使う場合のため残す） */
.ttrb-tabs:not(.ttrb-typeTabs) .ttrb-tab{
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.ttrb-tabs:not(.ttrb-typeTabs) .ttrb-tab.is-active{background:#111827;color:#fff;border-color:#111827;}
.ttrb-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:6px;}
.ttrb-tools .ttrb-search{position:relative;}
.ttrb-tools input[type="search"]{width:260px;max-width:72vw;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.95);outline:none;}
.ttrb-tools .ttrb-search:before{content:"🔎";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.55;}
.ttrb-btn{border:1px solid var(--border);background:rgba(255,255,255,.95);border-radius:12px;padding:9px 10px;font-weight:800;font-size:12px;cursor:pointer;}
.ttrb-btn:active{transform:translateY(1px);}
.ttrb-select{border:1px solid var(--border);background:rgba(255,255,255,.95);border-radius:12px;padding:9px 10px;font-weight:800;font-size:12px;max-width:220px;}
@media (max-width:420px){.ttrb-tools{flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}.ttrb-tools input[type="search"]{width:200px;}}
.ttrb-grid{display:grid;gap:14px;padding:14px 0 80px;grid-template-columns:1fr;}
.ttrb-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.ttrb-card-inner{padding:12px 14px 12px;}
.ttrb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.ttrb-name{font-size:clamp(20px,2.0vw,30px);line-height:1.06;font-weight:900;margin:0 !important;margin-block-start:0 !important;margin-block-end:2px !important;letter-spacing:.01em;}
.ttrb-subrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.ttrb-maker{font-size:clamp(12px,1.1vw,14px);color:var(--muted);font-weight:800;margin:0 !important;margin-block-start:0 !important;margin-block-end:0 !important;}
.ttrb-featurePill{display:inline-flex;align-items:center;max-width:min(320px, 60vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 10px;border-radius:999px;font-weight:950;font-size:11px;color:#0f172a;background:rgba(255,255,255,.9);border:1px solid var(--border);box-shadow:0 10px 18px rgba(17,24,39,.08);}
.ttrb-topActions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.ttrb-comparebtn{border:1px solid var(--border);background:rgba(255,255,255,.92);border-radius:999px;padding:8px 10px;font-weight:900;font-size:12px;cursor:pointer;white-space:nowrap;}
.ttrb-comparebtn.is-on{background:#111827;color:#fff;border-color:#111827;}
/* 画像サイズ：Speed/Spin/Hard(各30px + gap)の縦幅に合わせてコンパクトに */
.ttrb-body{--thumb:110px;display:grid;grid-template-columns:var(--thumb) 1fr;gap:12px;align-items:center;margin-top:6px;}
/* 画像は正方形（端末幅でサイズ調整） */
.ttrb-thumb{width:var(--thumb);height:var(--thumb);border-radius:14px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(145deg,#fff,#f3f4f6);position:relative;display:flex;align-items:center;justify-content:center;}
.ttrb-thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;box-sizing:border-box;}
.ttrb-badge{position:absolute;left:8px;top:8px;background:linear-gradient(90deg,#1f8acb,#3bb3ff);color:#fff;padding:5px 8px;border-radius:10px;font-size:11px;font-weight:900;box-shadow:0 6px 18px rgba(59,130,246,.25);}
.ttrb-priceRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;}
.ttrb-price{font-size:clamp(14px,1.3vw,18px);color:#6b7280;font-weight:900;letter-spacing:.01em;}
.ttrb-stats{display:flex;flex-direction:column;gap:8px;}
.ttrb-stat{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;}
.ttrb-sicon{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#6b7280;background:#f3f4f6;border:1px solid var(--border);}
.ttrb-bar{position:relative;height:30px;border-radius:999px;overflow:hidden;background:#dff3ff;border:1px solid #d7e7ff;}
.ttrb-bar::before{content:"";position:absolute;inset:0;width:var(--w,70%);background:linear-gradient(90deg,#2f6fe8,#3bb3ff);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
.ttrb-bar-label{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#fff;font-weight:900;letter-spacing:.02em;text-shadow:0 1px 1px rgba(0,0,0,.18);}
.ttrb-bar-pill{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.92);color:#0f172a;padding:3px 7px;border-radius:999px;font-weight:950;font-size:11px;box-shadow:0 6px 14px rgba(0,0,0,.12);font-variant-numeric:tabular-nums;}
.ttrb-bar-pill.is-na{opacity:.65;}
@media (max-width:420px){.ttrb-body{--thumb:104px;}}

/* モバイル詳細：カード下部の▽で開閉（右上ボタンは使わない） */
.ttrb-detailToggle{display:none !important;}
.ttrb-expander{display:none;margin-top:10px;}
.ttrb-expanderBtn{width:100%;border:1px solid var(--border);background:rgba(255,255,255,.92);border-radius:14px;padding:10px 12px;font-weight:950;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.ttrb-expanderBtn:active{transform:translateY(1px);}
.ttrb-expanderIcon{font-size:14px;line-height:1;opacity:.8;}
@media (max-width:899px){.ttrb-expander{display:block;}}

.ttrb-detail{display:none;margin-top:10px;border-top:1px solid var(--border);padding-top:10px;grid-column:1 / -1;}
.ttrb-card.ttrb-detailOpen .ttrb-detail{display:block;}
.ttrb-detailGrid{display:grid;grid-template-columns:1fr;gap:10px;}
.ttrb-detailGrid > *{min-width:0;}
@media (min-width:900px){
  /* 3カラム（画像 / 性能 / 詳細+購入）にして右側の潰れ&重なりを防ぐ */
  .ttrb-body{--thumb:110px;grid-template-columns:var(--thumb) minmax(0,2.6fr) minmax(320px,2.0fr);align-items:stretch;gap:14px;}
  .ttrb-thumb{width:var(--thumb);height:var(--thumb);}
  .ttrb-stats{margin-top:4px;min-width:0;}
  .ttrb-detail{display:block;margin:0;border:0;padding:0;grid-column:3;}
  .ttrb-detailGrid{grid-template-columns:minmax(0,1fr) minmax(130px,160px);gap:12px;align-items:start;}
}
.ttrb-colors{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ttrb-dot{width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;border:2px solid rgba(255,255,255,.75);box-shadow:0 10px 20px rgba(0,0,0,.10);font-size:11px;}
.ttrb-thicks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ttrb-chip{padding:6px 10px;background:linear-gradient(180deg,#2f6fe8,#245ed0);color:#fff;border-radius:10px;font-weight:900;font-size:12px;box-shadow:0 10px 20px rgba(47,111,232,.14);border:1px solid rgba(255,255,255,.12);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* THICKS_GRID_OVERRIDE_V14.3: 画面幅に応じて列数を可変（はみ出し防止） */
@media (min-width:900px){
  /* 4つ目が重なるケース対策：列数は自動で詰め、必要なら折り返す */
  .ttrb-thicks{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,56px));gap:8px;align-items:stretch;max-width:100%;justify-content:start;}
  .ttrb-chip{min-width:0;font-size:11px;padding:6px 8px;}
}




.ttrb-affs{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.ttrb-aff{display:flex;align-items:center;justify-content:center;height:clamp(34px,2.0vw,40px);border-radius:12px;width:clamp(118px,13vw,150px);font-weight:950;letter-spacing:.02em;color:#fff;text-decoration:none;box-shadow:0 14px 24px rgba(17,24,39,.10);border:1px solid rgba(255,255,255,.10);}
.ttrb-rakuten{background:linear-gradient(180deg,#c0392b,#9b2c24);}
.ttrb-amazon{background:linear-gradient(180deg,#f59e0b,#d97706);}
.ttrb-yahoo{background:linear-gradient(180deg,#2aa8c8,#1f7ea1);}
.ttrb-comparebar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(980px, calc(100vw - 24px));background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 40px rgba(17,24,39,.18);padding:10px;z-index:80;display:none;}
.ttrb-comparebar.is-on{display:block;}
.ttrb-comparebarTop{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.ttrb-comparelist{display:flex;gap:8px;flex-wrap:wrap;}
.ttrb-pill{border:1px solid var(--border);border-radius:999px;padding:7px 10px;background:#f9fafb;font-weight:900;font-size:12px;}
.ttrb-compareActions{display:flex;gap:8px;}
@media (max-width:420px){.ttrb-comparebarTop{flex-direction:column;align-items:stretch;}.ttrb-compareActions{justify-content:space-between;}}
.ttrb-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.38);z-index:999900;display:none;}
.ttrb-backdrop.is-on{display:block;}
.ttrb-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px, calc(100vw - 24px));max-height:calc(100vh - 24px - var(--ttrb-sticky-top,0px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;background:#fff;border-radius:18px;border:1px solid var(--border);box-shadow:0 30px 80px rgba(17,24,39,.25);z-index:999999;display:none;}

@media (max-width:600px){
  /* 小さい画面では上寄せ（iPhoneのアドレスバー/ノッチで見切れにくい） */
  .ttrb-modal{top:calc(12px + var(--ttrb-sticky-top,0px) + env(safe-area-inset-top));transform:translateX(-50%);max-height:calc(100vh - 24px - var(--ttrb-sticky-top,0px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
}
.ttrb-modal.is-on{display:block;}
.ttrb-modalHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);}
.ttrb-modalTitle{font-weight:950;}
.ttrb-close{border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 10px;font-weight:900;cursor:pointer;}
.ttrb-compareWrap{padding:12px 14px;}
.ttrb-compareGrid{display:grid;gap:10px;overflow:auto;}
.ttrb-compareCell{border:1px solid var(--border);border-radius:12px;padding:10px;min-width:220px;background:#fff;}
.ttrb-compareKey{font-size:12px;color:var(--muted);font-weight:900;margin-bottom:6px;}
.ttrb-compareVal{font-weight:900;}
.ttrb-canvasWrap{border:1px solid var(--border);border-radius:14px;padding:10px;margin-bottom:12px;}
.ttrb-canvasTools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.ttrb-canvas{width:100%;height:260px;display:block;}
.ttrb-drawer{position:fixed;top:0;right:0;width:min(360px, 92vw);height:100%;background:#fff;border-left:1px solid var(--border);box-shadow:-20px 0 60px rgba(17,24,39,.18);z-index:999920;transform:translateX(110%);transition:transform .22s ease;display:flex;flex-direction:column;}
.ttrb-drawer.is-on{transform:translateX(0);}
.ttrb-drawerHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);}
.ttrb-drawerBody{padding:12px 14px;overflow:auto;}

/* スマホの検索条件パネル（右ドロワー）は、少し細めにして圧迫感を減らす */
@media (max-width:520px){
  .ttrb-drawer{width:min(320px, 86vw);}
}
.ttrb-field{margin-bottom:12px;}
.ttrb-field label{display:block;font-size:12px;font-weight:950;color:var(--muted);margin-bottom:6px;}
.ttrb-mini{font-size:12px;color:var(--muted);}
.ttrb-pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px, calc(100vw - 24px));max-height:calc(100vh - 24px - var(--ttrb-sticky-top,0px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;background:#fff;border-radius:18px;border:1px solid var(--border);box-shadow:0 30px 80px rgba(17,24,39,.25);z-index:999930;display:none;}
.ttrb-pop.is-on{display:block;}

/* POP_TOP_MOBILE_V14 */
@media (max-width:900px){
  .ttrb-pop{top:calc(12px + var(--ttrb-sticky-top,0px) + env(safe-area-inset-top));transform:translateX(-50%);}
}

.ttrb-popHead{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);padding:10px 12px;}
.ttrb-popList{padding:10px 12px;}
.ttrb-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 8px;border-radius:12px;}
.ttrb-opt:hover{background:#f9fafb;}
.ttrb-opt.disabled{opacity:.45;pointer-events:none;}
.ttrb-optLeft{display:flex;gap:10px;align-items:center;}
.ttrb-badgeCount{font-size:12px;color:var(--muted);font-weight:900;}


/* Reviews (Google Map-ish) */
.ttrb-revHead{display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;}
.ttrb-revScore{display:flex; gap:12px; align-items:center;}
.ttrb-revAvg{font-size:44px; font-weight:950; line-height:1;}
.ttrb-revMeta{color:var(--muted); font-weight:900; font-size:12px;}
.ttrb-stars{display:inline-flex; gap:2px; align-items:center;}
.ttrb-star{width:16px; height:16px; display:inline-block; line-height:16px;}
.ttrb-revDist{display:flex; flex-direction:column; gap:6px; min-width:220px;}
.ttrb-revDistRow{display:grid; grid-template-columns:18px 1fr 42px; gap:8px; align-items:center; font-size:12px; color:var(--muted); font-weight:900;}
.ttrb-revDistBar{height:10px; border-radius:999px; background:var(--border); overflow:hidden;}
.ttrb-revDistBar > span{display:block; height:100%; width:0%; background:linear-gradient(90deg,#2f6fe8,#3bb3ff);}
.ttrb-revTools{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:12px;}
.ttrb-revList{margin-top:12px; display:flex; flex-direction:column; gap:10px;}
.ttrb-revItem{border:1px solid var(--border); border-radius:14px; padding:12px; background:var(--card);}
.ttrb-revTop{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.ttrb-avatar{width:34px; height:34px; border-radius:999px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:950; color:var(--text);}
.ttrb-revUser{display:flex; gap:10px; align-items:center;}
.ttrb-revName{font-weight:950;}
.ttrb-revDate{font-size:12px; color:var(--muted); font-weight:900;}
.ttrb-revBody{margin-top:8px; font-size:14px; line-height:1.5;}
.ttrb-revActions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;}
.ttrb-link{border:0; background:transparent; color:#2563eb; font-weight:950; cursor:pointer; padding:6px 8px;}
.ttrb-like{border:1px solid var(--border); background:var(--card); border-radius:999px; padding:7px 10px; font-weight:950; cursor:pointer;}
.ttrb-like.is-on{background:#111827; color:#fff; border-color:#111827;}
.ttrb-ownerReply{margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(17,24,39,.04); border:1px solid var(--border);}


/* Card review summary (Google Map-ish: ★4.5(12))
   仕様: ★クリックで詳細ページへ遷移（そこで口コミを表示/投稿）
*/
.ttrb-reviewMiniLink,
.ttrb-reviewMiniBtn{
  font-size:12px;
  font-weight:950;
  color:var(--muted);
  display:inline-flex;
  gap:6px;
  align-items:center;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
}
.ttrb-reviewMiniLink:hover,
.ttrb-reviewMiniBtn:hover{color:var(--text);}
.ttrb-reviewMiniLink .ttrb-reviewStar,
.ttrb-reviewMiniBtn .ttrb-reviewStar{color:#f59e0b;}
.ttrb-reviewMiniLink.is-empty,
.ttrb-reviewMiniBtn.is-empty{opacity:.8;}
.ttrb-reviewCnt{font-weight:900;}

/* Mobile: フォントを一段落ち着かせる */
@media (max-width:600px){
  /* テーマ側のモバイルタイポが勝って大きくなるケースを強めに抑制 */
  .ttrb-app{font-size:14px;}
  .ttrb-app .ttrb-name{font-size:18px !important;}
  .ttrb-app .ttrb-maker{font-size:12px !important;}
  .ttrb-app .ttrb-featurePill{font-size:10px; padding:4px 9px;}
  .ttrb-app .ttrb-reviewMiniBtn,.ttrb-app .ttrb-reviewMiniLink{font-size:11px;}
  .ttrb-app .ttrb-bar-label{font-size:12px !important;}
  .ttrb-app .ttrb-expanderBtn{font-size:12px;}
  .ttrb-app .ttrb-btn,.ttrb-app .ttrb-comparebtn{font-size:11px !important;padding:7px 9px;}
  .ttrb-app .ttrb-price{font-size:13px !important;}
}

/* Mobile detail: 購入ボタンは「入る時だけ3列」それ以外は縦3行 */
@media (max-width:899px){
  .ttrb-affs{align-items:stretch; display:grid; grid-template-columns:1fr; gap:8px; justify-items:center;}
  .ttrb-aff{width:min(280px, 100%);}
}
@media (min-width:520px) and (max-width:899px){
  .ttrb-affs{grid-template-columns:repeat(3, 150px); justify-content:center; justify-items:stretch;}
  .ttrb-aff{width:150px;}
}


/* iPhone safe-area */
:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
.ttrb-stickyTop{ padding-top: var(--safe-top); }
.ttrb-compareBar{ padding-bottom: calc(10px + var(--safe-bottom)); }


/* Theme base */
body{ background:var(--bg); color:var(--text); }
.ttrb-shell{background:radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 70%),radial-gradient(900px 600px at 90% 0%, rgba(16,185,129,.08) 0%, rgba(16,185,129,0) 65%),var(--bg);} 
.ttrb-card, .ttrb-modal, .ttrb-drawer{ background:var(--card); color:var(--text); }

/* Dark theme fine tuning */
:root[data-theme="dark"] .ttrb-sticky{background:rgba(15,23,42,.86);border-color:rgba(34,48,77,.85);} 
:root[data-theme="dark"] .ttrb-tab{background:rgba(15,23,42,.85);} 
:root[data-theme="dark"] .ttrb-count{background:rgba(15,23,42,.85);} 
:root[data-theme="dark"] .ttrb-btn,
:root[data-theme="dark"] .ttrb-select,
:root[data-theme="dark"] .ttrb-tools input[type="search"],
:root[data-theme="dark"] .ttrb-expanderBtn{background:rgba(15,23,42,.88);} 
:root[data-theme="dark"] .ttrb-sicon{background:rgba(15,23,42,.9);} 
:root[data-theme="dark"] .ttrb-bar{background:rgba(30,58,138,.25);border-color:rgba(30,58,138,.35);} 
:root[data-theme="dark"] .ttrb-bar-pill{background:rgba(17,24,39,.72);color:var(--text);} 

.ttrb-themeBtn{border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:999px; padding:8px 10px; font-weight:950; cursor:pointer;}
.ttrb-themeBtn:active{transform:translateY(1px);}

/*
  更新ボタン（standalone用）
  - iPhoneホーム画面追加では Pull-to-Refresh が使えないことが多いので、
    UI側に「更新」ボタンを用意する。
  - 通常ブラウザ表示では不要なのでデフォルトは非表示。
*/
.ttrb-reloadBtn{display:none;border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:999px; padding:8px 10px; font-weight:950; cursor:pointer;}
.ttrb-reloadBtn:active{transform:translateY(1px);}
.ttrb-standalone .ttrb-reloadBtn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;}

/* Compact7528: 300c7d5e308a8fbc307f300d30dc30bf30f33092753b97624e0a90e853f3306b51fa3059 */
.ttrb-filterTop{display:none;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:8px 10px;font-weight:950;font-size:13px;box-shadow:var(--shadow);cursor:pointer;}
.ttrb-filterTop:active{transform:translateY(1px);}
.ttrb-filterIcon{font-size:14px;opacity:.85;}


/* Floating filter button (compact) */
.ttrb-fab{position:fixed;right:16px;bottom:16px;z-index:90;display:none;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:12px 14px;font-weight:950;font-size:13px;box-shadow:var(--shadow);cursor:pointer;}
.ttrb-fab:active{transform:translateY(1px);} 
.ttrb-fabIcon{font-size:14px;opacity:.85;}
@media (max-width:899px){
  .ttrb-tools{display:none !important;}
  .ttrb-fab{display:inline-flex;right:14px;bottom:14px;}
  .ttrb-app{padding:0 10px;}
  .ttrb-shell{padding:10px;}
  .ttrb-sticky{padding:10px;}
  .ttrb-grid{gap:12px;padding:10px 0 110px;}
  .ttrb-card-inner{padding:10px 12px 10px;}
  .ttrb-body{gap:10px;margin-top:4px;}
}
@media (max-width:420px){
  .ttrb-app{padding:0 8px;}
  .ttrb-shell{padding:8px;}
  .ttrb-sticky{padding:8px;}
  .ttrb-card-inner{padding:9px 10px;}
  .ttrb-grid{gap:10px;padding-bottom:120px;}
  .ttrb-fabText{display:none;}
}

/* Pop/Modal top offset for sticky header */
@media (max-height:760px), (max-width:900px){
  .ttrb-pop{top:calc(12px + var(--ttrb-sticky-top,0px) + env(safe-area-inset-top));transform:translateX(-50%);} 
}
@media (max-height:760px){
  .ttrb-modal{top:calc(12px + var(--ttrb-sticky-top,0px) + env(safe-area-inset-top));transform:translateX(-50%);} 
}
/* (replaced) mobile aff buttons handled above */

/* v14.3: 重なり防止（詳細側のはみ出しを抑える） */
@media (min-width:900px){
  .ttrb-detailGrid{min-width:0;}
  .ttrb-detailGrid > div{min-width:0;}
}

/* ===============================
   Compact(スマホ)用：絞り込みボタンを上部右に配置
   - SWELLの「上へ」ボタン(右下)と被るのを避けるため
   - 右上のピルボタンでドロワー(右パネル)を開きます
   =============================== */
.ttrb-filterTop{
  display:none;              /* デスクトップでは非表示 */
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  padding:8px 10px;
  font-weight:950;
  font-size:13px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.ttrb-filterTop:active{transform:translateY(1px);} 
.ttrb-filterTopIcon{opacity:.9;}

@media (max-width:899px){
  /* 右下のFABは使わない（SWELLの上へボタンと被るため） */
  .ttrb-fab{display:none !important;}
  /* 代わりに右上ボタンを表示 */
  .ttrb-filterTop{display:inline-flex;}
}
@media (max-width:420px){
  /* 画面がさらに狭いときは文字を消してアイコンだけ */
  .ttrb-filterTopText{display:none;}
}

/* ===============================
   フィルタ選択ポップアップがドロワーの裏に回らないように
   - z-index をドロワーより上にする
   =============================== */
/* 既存定義の上書き（念のため） */
.ttrb-pop{z-index:999930;}



/* ============================================================
 * iOSホーム画面追加(standalone) 対策
 * - ノッチ/時計エリア(safe-area)でヘッダーが被らない
 * - スクロール時に上部が“透ける”のを防ぐ
 * - 固定ヘッダー分、本文(パンくず含む)を下げる
 * ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  body.ttrb-standalone{
    /*
      ヘッダーがfixedで本文にかぶるテーマがあるため、ヘッダー高さ分だけ本文を下げる。
      ※safe-area 分は「ヘッダー内の padding-top」で吸収する（ヘッダー上に“空白帯”を作らない）
    */
    padding-top: var(--ttrb-header-h, 56px);
  }
  /* ヘッダーは top:0 のまま。中身を safe-area 分だけ下げてノッチ/時計に被らないようにする */
  body.ttrb-standalone .l-header{
    top: 0 !important;
    padding-top: env(safe-area-inset-top);
  }
}

/* パンくずがヘッダーに潜る場合の保険（テーマ差があるので広めに指定） */
body.ttrb-standalone .c-breadcrumb,
body.ttrb-standalone .p-breadcrumb,
body.ttrb-standalone .l-breadcrumb,
body.ttrb-standalone nav.breadcrumb{
  position: relative;
  z-index: 1;
}

/* ============================================================
 * 比較チャート：モバイルで潰れないようにキャンバスを“表示サイズ優先”に
 * （canvasの内部解像度はJSで合わせる）
 * ============================================================ */
.ttrb-canvas{
  width: 100%;
  height: 260px; /* 基本 */
  display: block;
}

@media (max-width: 420px){
  .ttrb-canvas{ height: 220px; }
}
/* =========================
   iOS ホーム追加(standalone) safe-area 最終上書き
   - 初期のヘッダー上の空白を作らない
   - スクロール時の“透け”を消す（safe-area帯を塗りつぶし）
   - ダークは html[data-theme="dark"] に追従
   ========================= */

@supports (padding: env(safe-area-inset-top)) {

  /* プラグイン側が入れている可能性のある上padding/ズラしを無効化 */
  html.ttrb-standalone body,
  body.ttrb-standalone {
    padding-top: 0 !important;
  }

  /* safe-area の背景色を変数化（ライト/ダークで切替） */
  html.ttrb-standalone { --ttrb-safe-bg: #ffffff; }
  html.ttrb-standalone[data-theme="dark"] { --ttrb-safe-bg: #0b1220; } /* ここは好みでOK */

  /* 透け防止：safe-area 分の“塗りつぶし帯”を最前面に固定 */
  body.ttrb-standalone::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: var(--ttrb-safe-bg);
    z-index: 2147483646;
    pointer-events: none;
  }

  /* ヘッダーは top:0 のまま。中身だけ safe-area 分下げる */
  body.ttrb-standalone .l-header {
    top: 0 !important;
    background: var(--ttrb-safe-bg) !important;
  }
  body.ttrb-standalone .l-header__inner {
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* =========================
   モバイル：余白を詰める（見える面積を増やす）
   ========================= */
@media (max-width: 520px){

  /* ページ見出し周りの余白を減らす（SWELLのタイトル/パンくずが大きい場合） */
  .c-pageTitle{ margin: 8px 0 6px !important; padding: 0 !important; }
  .c-breadcrumb, .p-breadcrumb{ margin: 6px 0 6px !important; }

  /* “卓球ラバー比較”パネルの内側余白を少し減らす */
  .ttrb-panel{
    padding: 14px 14px 12px !important;
  }

  /* カード周りの余白 */
  .ttrb-card{
    padding: 14px !important;
  }

  /* タブ下の余白を詰める */
  .ttrb-typeTabs{
    margin: 6px 0 6px !important;
  }
}

/* =========================
   検索パネル（右ドロワー）の上見切れ対策
   - 閉じるボタンを必ず押せる位置に出す
   ========================= */
@supports (padding: env(safe-area-inset-top)){

  /* ドロワーをヘッダーより前面に */
  .ttrb-drawer,
  .ttrb-drawerOverlay{
    z-index: 2147483647 !important;
  }

  /* ドロワーの中身をsafe-area分だけ下げる */
  .ttrb-drawer{
    padding-top: env(safe-area-inset-top) !important;
  }

  /* ドロワーのヘッダー（閉じる行）を画面上に固定して押せるように */
  .ttrb-drawerHeader{
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 2;
    background: inherit;
  }

  /* 検索窓が上に食い込むなら少し下げる */
  .ttrb-drawer .ttrb-searchInput{
    margin-top: 8px;
  }
}

/* ============================================================
 * FIX_V14.4 (2026-01)
 * 1) 「余白が多い」対策：実際に使っているクラスに対して詰める
 *    - 余白は .ttrb-app / .ttrb-shell / .ttrb-sticky / .ttrb-grid / .ttrb-card-inner が主因
 * 2) 「検索パネル上が見切れて閉じるが押せない」対策：
 *    - ドロワーのヘッダーは .ttrb-drawerHead（←ここ重要）
 *    - safe-area 分は .ttrb-drawerHead の padding-top で吸収して、top:0 で sticky
 *    - z-index を SWELL ヘッダーより確実に上へ
 * ============================================================ */

/* 1) モバイル：余白を詰める（実クラス版） */
@media (max-width: 899px){
  .ttrb-app{ padding: 0 6px !important; }
  .ttrb-shell{ padding: 8px !important; }
  .ttrb-sticky{ padding: 8px !important; }
  .ttrb-grid{ gap: 10px !important; padding: 8px 0 110px !important; }
  .ttrb-card-inner{ padding: 10px 10px 10px !important; }
  .ttrb-body{ gap: 8px !important; margin-top: 4px !important; }
}
@media (max-width: 420px){
  .ttrb-app{ padding: 0 6px !important; }
  .ttrb-shell{ padding: 6px !important; }
  .ttrb-sticky{ padding: 6px !important; }
  .ttrb-grid{ gap: 8px !important; padding: 6px 0 120px !important; }
  .ttrb-card-inner{ padding: 9px 9px !important; }
  .ttrb-body{ gap: 8px !important; }
}

/* 2) 検索パネル（右ドロワー）上見切れ＆タップ不能対策（実クラス版） */
@supports (padding: env(safe-area-inset-top)){

  /* ドロワーは最前面に（safe-area塗り帯より上） */
  .ttrb-drawer{ z-index: 2147483647 !important; }

  /* safe-area塗り帯(standalone)は、ドロワーより1段下に */
  body.ttrb-standalone::before{ z-index: 2147483646 !important; }

  /* ドロワーのヘッダー行を「必ず見える位置」に固定
     - ドロワー全体を padding で下げるのではなく、ヘッダー自身に safe-area を足す
     - sticky の top は 0 でOK（padding-top があるため） */
  .ttrb-drawerHead{
    position: sticky !important;
    top: 0 !important;
    padding-top: env(safe-area-inset-top) !important;
    background: var(--card) !important;
    z-index: 5 !important;
  }

  /* body部の先頭がヘッダーにくっつきすぎるのを防ぐ */
  .ttrb-drawerBody{ padding-top: 12px !important; }

  /* 念のため：テーマヘッダーが異常に上に来る環境でも、ドロワーが勝つように */
  body.ttrb-standalone .l-header{ z-index: 1000 !important; }
}

/* 3) 以前入れた「.ttrb-panel / .ttrb-drawerHeader / .ttrb-searchInput」系は、
      現在のHTMLクラスと一致しないため効きません（このFIXで置き換え） */