/* 第二案 ― 検索窓が主役・スマホで選んで店頭で見せる
   色や基本は toreka.css を継承する。ここは第二案だけの見た目。 */

#tk-root main.v2{max-width:940px}

/* ---- 入口 ---- */
#tk-root .hero{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:22px 20px 18px; margin:18px 0 14px;
}
#tk-root .hero h1{font-size:22px; font-weight:900; letter-spacing:.02em}
#tk-root .hero-lead{font-size:12.5px; color:var(--sub); margin:6px 0 16px; line-height:1.7}
#tk-root .hero-lead span{color:var(--dim)}

#tk-root .qbox{position:relative}
#tk-root .qbox input{
  width:100%; font:inherit; font-size:17px; padding:14px 18px;
  border:2px solid var(--line); border-radius:99px; background:#fff; color:var(--ink);
}
#tk-root .qbox input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 4px rgba(211,47,47,.08)}

#tk-root .suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:25;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.13); overflow:hidden;
}
#tk-root .suggest[hidden]{display:none}
#tk-root .suggest ul{list-style:none}
#tk-root .suggest li{
  display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer;
  border-bottom:1px solid #f2f4f6; font-size:13.5px;
}
#tk-root .suggest li:last-child{border-bottom:none}
#tk-root .suggest li:hover{background:#fff5f4}
#tk-root .suggest li span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#tk-root .suggest li b{color:var(--red-d); font-weight:800; white-space:nowrap}

#tk-root .loadbar{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  font-size:12px; color:var(--sub);
}
#tk-root .loadbar[hidden]{display:none}
#tk-root .loadbar em{color:var(--dim); font-style:normal; font-size:11px}
#tk-root .spin{
  width:13px; height:13px; border:2px solid var(--line); border-top-color:var(--red);
  border-radius:50%; animation:sp .8s linear infinite; flex-shrink:0;
}
@keyframes sp{to{transform:rotate(360deg)}}

#tk-root .v2filters{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
#tk-root .v2filters select{
  font:inherit; font-size:13px; padding:7px 10px; border:1.5px solid var(--line);
  border-radius:7px; background:#fff; color:var(--ink); flex:1 1 150px; min-width:130px;
}
#tk-root .v2filters select:focus{outline:none; border-color:var(--red)}

/* ---- 結果 ---- */
#tk-root .rhead{display:flex; align-items:baseline; padding:0 4px 8px}
#tk-root .rhead .result-info{font-size:13px; font-weight:700}
#tk-root .rhead .result-info b{color:var(--red); font-size:17px}
#tk-root .rhead .timing{margin-left:auto; font-size:11px; color:var(--dim)}

#tk-root .rows{list-style:none; display:flex; flex-direction:column; gap:8px}
#tk-root .row{
  display:flex; gap:12px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  transition:border-color .12s, box-shadow .12s;
}
#tk-root .row.on{border-color:var(--red); box-shadow:0 0 0 2px rgba(211,47,47,.09)}
#tk-root .r-img{flex-shrink:0}
#tk-root .r-img .thumb,#tk-root .r-img .noimg{width:52px; height:72px}
#tk-root .r-img .thumb{cursor:zoom-in}
#tk-root .r-main{flex:1; min-width:0}
#tk-root .r-name{font-size:14.5px; font-weight:700; line-height:1.4; word-break:break-word}
/* 収録セット。名前のすぐ下に独立した1行で出す。
   セット名は長さがまちまちで、既存の行に足すと折り返して読みにくくなる。 */
#tk-root .r-set{font-size:11.5px; color:var(--dim); margin-top:2px; word-break:break-word}
#tk-root .r-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px}
#tk-root .r-title{font-size:11px; color:var(--sub)}
#tk-root .r-date{font-size:11px; color:var(--dim)}
#tk-root .r-info{font-size:11.5px; color:var(--dim); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#tk-root .r-right{display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0}
#tk-root .r-price{font-size:19px; font-weight:900; color:var(--red-d); white-space:nowrap; line-height:1}
#tk-root .r-price em{font-size:12px; font-style:normal; font-weight:700; margin-left:2px}
/* 価格の代わりに出す文言（高額品のため店頭査定／おまとめ買取）。
   金額と見分けがつくよう色と太さを落とす。 */
#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 .add{
  font:inherit; font-size:11.5px; font-weight:700; padding:6px 12px; cursor:pointer;
  border:1.5px solid var(--red); border-radius:99px; background:#fff; color:var(--red);
  white-space:nowrap;
}
#tk-root .add:hover{background:#fff2f1}
#tk-root .add.on{background:var(--red); color:#fff}

/* ---- 下部の固定バー ---- */
#tk-root .cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#1f2328; color:#fff; box-shadow:0 -3px 14px rgba(0,0,0,.22);
}
#tk-root .cartbar[hidden]{display:none}
#tk-root .cb-in{
  max-width:940px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:14px;
}
#tk-root .cb-sum{display:flex; gap:16px; align-items:baseline; font-size:13px}
#tk-root .cb-sum b{font-size:18px; font-weight:900}
#tk-root .cb-t b{color:#ffd54f}
#tk-root .cb-btn{
  font:inherit; font-size:14px; font-weight:800; cursor:pointer;
  background:var(--red); color:#fff; border:none; border-radius:99px; padding:11px 22px;
}
#tk-root .cb-btn:hover{background:var(--red-d)}
/* リストを空にする（2026-08-25）。押し間違えないよう、目立たせず「見せる」の左に置く */
#tk-root .cb-clear{
  margin-left:auto; font:inherit; font-size:13px; cursor:pointer;
  background:transparent; color:#cfd3d8; border:1px solid #4a5058;
  border-radius:99px; padding:10px 16px; white-space:nowrap;
}
#tk-root .cb-clear:hover{border-color:#fff; color:#fff}
body.has-cart #tk-root main.v2{padding-bottom:74px}

/* ---- 査定リスト ---- */
#tk-root .cartmodal{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
#tk-root .cartmodal[hidden]{display:none}
#tk-root .cm-box{
  background:#fff; border-radius:14px; width:min(560px,100%); max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
}
#tk-root .cm-head{
  display:flex; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line);
}
#tk-root .cm-head h2{font-size:16px; font-weight:900}
#tk-root .cm-x{
  margin-left:auto; font:inherit; font-size:18px; line-height:1; cursor:pointer;
  background:none; border:none; color:var(--sub); padding:4px 6px;
}
#tk-root .cm-body{padding:14px 18px; overflow-y:auto}
#tk-root .cart-note{font-size:12px; color:var(--sub); margin-bottom:12px; line-height:1.6}
#tk-root .cart-fine{font-size:11px; color:var(--dim); margin-top:12px; line-height:1.6}
#tk-root .cart-tbl{width:100%; border-collapse:collapse}
#tk-root .cart-tbl td{padding:10px 4px; border-bottom:1px solid #f0f2f4; vertical-align:top}
#tk-root .ct-x{width:26px}
#tk-root .ct-x .x{
  font:inherit; font-size:13px; cursor:pointer; background:none; border:none;
  color:var(--dim); padding:0 4px;
}
#tk-root .ct-name{font-size:14px; font-weight:700; line-height:1.4}
#tk-root .ct-sub{font-size:11px; color:var(--dim); margin-top:2px}
/* ★店舗のスキャナで読む。小さいと何度も上下させることになる（2026-08-21 店舗で実測）。
   画面・紙とも幅いっぱいに出す。 */
#tk-root .ct-bc{display:block; margin-top:8px; width:100%; max-width:none; height:auto}
/* 枚数（2026-08-25）。指で押せる大きさにする（店頭でお客様が触る） */
#tk-root .ct-qty{display:flex; align-items:center; gap:6px; margin-top:8px}
#tk-root .ct-qty .q{
  font:inherit; font-size:16px; line-height:1; width:34px; height:34px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink)}
#tk-root .ct-qty .q:hover{border-color:var(--red); color:var(--red)}
#tk-root .ct-qty .qn{
  font:inherit; font-size:15px; font-weight:700; width:64px; height:34px; text-align:center;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  font-variant-numeric:tabular-nums}
#tk-root .ct-qty .qu{font-size:12px; color:var(--dim)}
#tk-root .ct-unit{display:block; font-size:11px; font-weight:400; color:var(--dim); margin-top:2px}
#tk-root .ct-price{text-align:right; font-size:15px; font-weight:800; color:var(--red-d); white-space:nowrap}
#tk-root .ct-total td{border-bottom:none; border-top:2px solid var(--ink); font-weight:900; font-size:15px; padding-top:12px}
#tk-root .ct-total .ct-price{font-size:20px}
#tk-root .cm-foot{
  display:flex; gap:10px; padding:13px 18px; border-top:1px solid var(--line); background:#fafbfc;
}
#tk-root .cm-clear{
  font:inherit; font-size:12px; cursor:pointer; background:#fff; color:var(--sub);
  border:1.5px solid var(--line); border-radius:7px; padding:9px 14px;
}
#tk-root .cm-print{
  margin-left:auto; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  background:var(--ink); color:#fff; border:none; border-radius:7px; padding:9px 20px;
}
body.modal-open{overflow:hidden}

@media (max-width:640px){
  #tk-root .hero{padding:16px 14px 14px; border-radius:10px}
  #tk-root .hero h1{font-size:18px}
  #tk-root .qbox input{font-size:16px; padding:12px 15px}
  #tk-root .v2filters select{flex:1 1 46%; min-width:0}
  #tk-root .row{padding:10px; gap:10px}
  #tk-root .r-img .thumb,#tk-root .r-img .noimg{width:44px; height:62px}
  #tk-root .r-name{font-size:13.5px}
  #tk-root .r-price{font-size:17px}
  #tk-root .cb-btn{padding:10px 16px; font-size:13px}
  #tk-root .cb-clear{padding:9px 12px; font-size:12px}
}


/* 価格の基準時点（店頭で見せる・印刷にも必ず出す） */
#tk-root .cart-asof{
  border:1.5px solid var(--ink); border-radius:8px; padding:9px 12px; margin-bottom:11px;
}
#tk-root .ca-row{display:flex; align-items:baseline; gap:10px; font-size:12px; line-height:1.9}
#tk-root .ca-row span{color:var(--sub); flex:0 0 128px}
#tk-root .ca-row b{font-size:14px; font-weight:800; letter-spacing:.01em}
#tk-root .cart-warn{
  font-size:11.5px; color:#b71c1c; background:#fff3f2; border-radius:6px;
  padding:7px 10px; margin-bottom:10px; line-height:1.6;
}
#tk-root .cart-note strong{color:var(--red-d)}

/* ---- 印刷（査定リストだけ出す） ---- */
@media print{
  #tk-root .sample-bar,#tk-root .site-hd,#tk-root .site-ft,#tk-root .hero,#tk-root .rhead,#tk-root .rows,#tk-root .pager,#tk-root .note,#tk-root .cartbar,#tk-root .cm-head,#tk-root .cm-foot,#tk-root .empty{display:none !important}
  #tk-root .cartmodal{position:static; background:none; padding:0; display:block}
  #tk-root .cartmodal[hidden]{display:none !important}
  #tk-root .cm-box{box-shadow:none; max-height:none; width:100%; border-radius:0}
  #tk-root .cm-body{overflow:visible; padding:0}
  #tk-root .cart-asof{border-color:#000}
  #tk-root .cart-note,#tk-root .cart-fine,#tk-root .cart-asof,#tk-root .cart-warn{display:block !important}
  #tk-root .ct-x{display:none}                 /* 削除ボタンは紙に出さない */
  /* 紙では枚数は「◯枚」の文字だけにする（入力欄・増減ボタンは出さない） */
  #tk-root .ct-qty .q,#tk-root .ct-qty .qu{display:none}
  #tk-root .ct-qty .qn{border:none; width:auto; height:auto; font-size:13px; padding:0; text-align:left}
  #tk-root .ct-qty::after{content:"枚"; font-size:13px}
  #tk-root .cart-tbl td{padding:8px 4px}
  body{background:#fff}

  /* ★WordPress の固定ページに埋め込むと、テーマのヘッダー・サイドバー・フッターまで
     紙に出る。印刷の直前に v2.js が #tk-root の先祖へ .tk-print-keep を付けるので、
     その道すじだけを残して他は隠す（CSS では先祖を辿れない）。
     この2つだけは #tk-root の外に効かせる必要があるため、あえてスコープを付けない。 */
  body.tk-printing > *{display:none !important}
  body.tk-printing > .tk-print-keep,
  body.tk-printing > #tk-root{display:block !important}
  .tk-print-keep > *{display:none !important}
  .tk-print-keep > .tk-print-keep,
  .tk-print-keep > #tk-root{display:block !important}
}

/* 価格の更新が止まっているときの注意文（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}