/* トレカ買取価格検索（サンプル）
   外部CDNなし・インライン記述なし（CSP default-src 'self' で動く） */

#tk-root{
  --red:#d32f2f; --red-d:#b71c1c;
  --ink:#1f2328; --sub:#5b636b; --dim:#8b949e;
  --line:#e3e6ea; --bg:#f5f6f8; --card:#fff;
  --hit:#fff3cd;
}
#tk-root *,#tk-root{margin:0;padding:0;box-sizing:border-box}
#tk-root{font-variant-numeric:tabular-nums}

/* ---- 書体 ----------------------------------------------------------------
   本番サイト www.otakarasouko.com に合わせてある（実測: Poppins + Noto Sans JP）。
   ヘッダ・フッタだけ再現して本文が別の書体だと、つなぎ目で違和感が出るため。

   --font-jp  和文。★"游ゴシック Medium" を先に書くのは、Windows の游ゴシック
              Regular が細くてかすれるから（本番サイトも同じ書き方をしている）。
   --font-num 数字。価格は「正確に伝える」のが最優先なので、幾何学的な Poppins ではなく
              ネオ・グロテスク（SF / Segoe UI / Helvetica）で組む。桁も揃う。

   ★Webフォントは読み込まない。www は既に読み込み済みなので指定するだけで効き、
     読み込めない環境（このサンプルは CSP で外部フォント禁止）では游ゴシック Medium に落ちる。
   -------------------------------------------------------------------------- */
#tk-root{
  --font-jp:"Noto Sans JP","游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,
            "ヒラギノ角ゴシック","Hiragino Sans","メイリオ",Meiryo,sans-serif;
  --font-num:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,
             var(--font-jp);
}

#tk-root{
  font-family:var(--font-jp);
  background:var(--bg); color:var(--ink); line-height:1.6; -webkit-text-size-adjust:100%;
}

/* 価格・件数・枚数は欧文の数字で組む。和文フォントの数字より判別しやすく、
   tabular-nums と合わせて桁が揃う（店頭で読み上げる数字なので最優先） */
#tk-root .tbl td.c-price,#tk-root .r-price,#tk-root .ct-price,#tk-root .cb-sum b,#tk-root .result-info b,#tk-root .ct-qty .qn{
  font-family:var(--font-num)}

#tk-root .sample-bar{
  background:#37474f; color:#fff; text-align:center; font-size:12px;
  padding:6px 12px; letter-spacing:.02em;
}

#tk-root main{margin:0 auto; padding:16px}

/* ★本文の最大幅は持たない（2026-09-01 竹中SP依頼）。
   WordPress の固定ページに埋め込むと、テーマ側が既に本文幅を決めている。
   そこへ重ねて 1120px を掛けると本体のレイアウトと合わなくなる。

   単体のページとして開くとき（/kaitori/v2.html）だけは、囲うものが無く
   画面いっぱいに広がってしまうので、body のクラスで従来の幅に戻す。
   ★この1行だけ #tk-root の外に出す必要がある（body に付くため）。 */
body.tk-standalone #tk-root main{max-width:1120px}

/* ---- タイトル選択 ---- */
/* 検索条件はスクロールしても残す。ヘッダーのすぐ下に貼り付ける。
   --hd-h / --panel-h は toreka.js が実測して入れる（折り返しで高さが変わるため）。 */
#tk-root .panel{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; margin-bottom:12px;
}
/* 画面が狭い／低いときは貼り付けない（固定分で結果が見えなくなるため） */
@media (min-width:641px) and (min-height:600px){
  #tk-root .panel{position:sticky; top:var(--hd-h,53px); z-index:15; box-shadow:0 4px 12px rgba(0,0,0,.06)}
}
#tk-root .titles{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
#tk-root .tt{
  border:1.5px solid var(--line); background:#fff; color:var(--sub);
  padding:6px 13px; border-radius:99px; cursor:pointer; font:inherit; font-size:13px;
  font-weight:700; transition:background .12s,border-color .12s,color .12s; white-space:nowrap;
}
#tk-root .tt:hover{border-color:var(--red); color:var(--red)}
#tk-root .tt.on{background:var(--red); border-color:var(--red); color:#fff}
#tk-root .tt .n{font-weight:400; font-size:11px; opacity:.75; margin-left:5px}

/* ---- 絞り込み ---- */
#tk-root .filters{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
#tk-root .f{display:flex; flex-direction:column; gap:2px; min-width:118px; flex:1 1 118px}
#tk-root .f-kw{flex:2 1 210px; min-width:190px}
#tk-root .f label{font-size:10px; font-weight:700; color:var(--sub); line-height:1.3}
#tk-root .f input,#tk-root .f select{
  font:inherit; font-size:13.5px; padding:6px 8px; border:1.5px solid var(--line);
  border-radius:6px; background:#fff; color:var(--ink); width:100%;
}
#tk-root .f input:focus,#tk-root .f select:focus{outline:none; border-color:var(--red)}
#tk-root .reset{
  font:inherit; font-size:12px; padding:7px 12px; border:1.5px solid var(--line);
  border-radius:6px; background:#fff; color:var(--sub); cursor:pointer; white-space:nowrap;
}
#tk-root .reset:hover{border-color:var(--red); color:var(--red)}

/* ---- 結果 ---- */
#tk-root .result{background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden}
#tk-root .result-head{
  display:flex; align-items:baseline; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:#fafbfc;
}
#tk-root .result-info{font-size:13px; font-weight:700}
#tk-root .result-info b{color:var(--red); font-size:16px}
#tk-root .timing{margin-left:auto; font-size:11px; color:var(--dim)}

#tk-root .table-wrap{overflow-x:auto}
#tk-root .tbl{width:100%; border-collapse:collapse; font-size:13.5px}
/* ★見出し行を position:sticky にしてはいけない。
   .table-wrap に overflow-x:auto があるとそこがスクロール領域になり、
   見出しがページでなく枠の中で貼り付いて一覧の途中に現れる（2026-08-20 実機で発生）。
   検索条件はページ側で貼り付いているので、見出しまで貼り付ける必要はない。 */
#tk-root .tbl th{
  text-align:left; font-size:11px; font-weight:700; color:var(--sub);
  padding:8px 12px; border-bottom:1px solid var(--line); background:#fafbfc;
  white-space:nowrap;
}
#tk-root .tbl td{padding:9px 12px; border-bottom:1px solid #f0f2f4; vertical-align:top}
#tk-root .tbl tr:hover td{background:#fffaf9}
#tk-root .c-img{width:52px}
#tk-root .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
#tk-root .thumb{
  width:40px; height:56px; object-fit:contain; border-radius:3px; background:#f0f2f4;
  display:block; cursor:zoom-in;
}
/* 写真が無い／取れなかったとき用の受け皿。
   ★写真ありの行と同じ大きさを必ず占める（消すと行の高さが揃わない）。
   文言はここ1箇所で持つ（描画側とフォールバック側で二重に書かない）。 */
#tk-root .noimg{
  width:40px; height:56px; border-radius:3px; background:#f0f2f4;
  display:flex; align-items:center; justify-content:center;
  color:var(--dim); font-size:9px; line-height:1.25; text-align:center;
  border:1px dashed #d8dce1; box-sizing:border-box;
}
#tk-root .noimg::after{content:"準備中"}
/* 拡大表示 */
#tk-root .zoom{
  position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex;
  align-items:center; justify-content:center; z-index:50; cursor:zoom-out; padding:24px;
}
#tk-root .zoom[hidden]{display:none}
#tk-root .zoom img{max-width:min(92vw,460px); max-height:88vh; border-radius:8px; background:#fff}
#tk-root .c-title{width:150px}
#tk-root .c-rar{width:110px}
#tk-root .c-set{width:210px}
#tk-root .c-rel{width:100px; white-space:nowrap}
#tk-root .c-price{width:120px; text-align:right}
#tk-root .tbl td.c-rel{color:var(--sub); font-size:12px; white-space:nowrap}
#tk-root .tbl td.c-price{text-align:right; font-weight:800; color:var(--red-d); white-space:nowrap}
#tk-root .tbl td.c-title{color:var(--sub); font-size:12px; white-space:nowrap}
#tk-root .tbl td.c-set{color:var(--sub); font-size:12px}
#tk-root .tbl td.c-name{font-weight:600}
/* 価格の代わりに出す文言（高額品のため店頭査定／おまとめ買取）。
   金額と見分けがつくよう色と太さを落とす。 */
#tk-root .plabel{display:inline-block; font-size:11.5px; font-weight:600; line-height:1.4;
  color:#5b636b; background:#eef1f4; border-radius:5px; padding:3px 8px; white-space:normal}
#tk-root .ct-note{font-size:11px; font-weight:400; color:#8b949e; margin-left:6px}
/* ★レアリティは補助情報。バッジの色と枠で十分に目立つので、太さは価格より弱める
   （情報の優先順位＝価格 > カード名 > 補助 と、太さを噛み合わせる） */
#tk-root .rar{
  display:inline-block; font-size:11px; font-weight:700; padding:1px 7px;
  border-radius:4px; background:#eef1f4; color:var(--sub); white-space:nowrap;
}
#tk-root .ym{color:var(--dim); font-size:11px; margin-left:6px; white-space:nowrap}
#tk-root mark{background:var(--hit); color:inherit; padding:0 1px; border-radius:2px}

#tk-root .empty{padding:44px 16px; text-align:center; color:var(--sub)}
#tk-root .empty-sub{font-size:12px; color:var(--dim); margin-top:5px}

/* ---- ページャ ---- */
#tk-root .pager{display:flex; gap:5px; justify-content:center; align-items:center; padding:14px; flex-wrap:wrap}
#tk-root .pg{
  font:inherit; font-size:13px; min-width:36px; padding:7px 10px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--sub); border-radius:6px;
}
#tk-root .pg:hover:not(:disabled){border-color:var(--red); color:var(--red)}
#tk-root .pg.on{background:var(--red); border-color:var(--red); color:#fff; font-weight:700}
#tk-root .pg:disabled{opacity:.35; cursor:default}
#tk-root .pg-gap{color:var(--dim); padding:0 3px}

/* ---- 注記 ---- */
#tk-root .note{margin-top:16px; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:10px}
#tk-root .note h2{font-size:13px; margin-bottom:7px}
#tk-root .note ul{list-style:none; font-size:12px; color:var(--sub)}
#tk-root .note li{padding-left:15px; position:relative; margin-bottom:3px}
#tk-root .note li::before{content:"※"; position:absolute; left:0; color:var(--dim)}

#tk-root .ft{text-align:center; padding:22px; font-size:11px; color:var(--dim)}

@media (max-width:640px){
  #tk-root main{padding:10px}
  #tk-root .f{min-width:0; flex:1 1 45%}
  #tk-root .f-kw{flex:1 1 100%}
  #tk-root .tbl{font-size:12.5px}
  #tk-root .tbl td,#tk-root .tbl th{padding:8px}
  /* 幅が足りないぶんは横スクロールで見せる（列を消して情報を失わせない）。
     ただしタイトルは選択中のものと同じなので、ここだけ落とす。 */
  #tk-root .c-title{display:none}
  #tk-root .tbl td.c-title{display:none}
  #tk-root .tbl{min-width:620px}
}

/* 価格の更新が止まっているときの注意文（search_core.js の TK.renderStaleNote が出す）。
   30分ごとに更新する前提なので2時間で異常とみなす。既定は hidden で場所も取らない。
   ★時刻を小さく出すだけでは「17時間前」に気づけない＝クレームの元になるため設けた。 */
#tk-root .stale-note{
  margin:12px 0; padding:10px 13px; border-radius:8px;
  background:#fff3f2; border:1px solid #f0c8c4; color:#b71c1c;
  font-size:13px; line-height:1.7; font-weight:600;
}
#tk-root .stale-note[hidden]{display:none}