/* ピック判別機 */
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--navy);margin:0 0 14px;overflow-x:auto}
.tabs [role=tab]{border:0;background:transparent;font-family:var(--h);font-weight:700;font-size:15px;color:var(--navy);padding:9px 16px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap;min-height:44px}
.tabs [role=tab][aria-selected=true]{background:var(--navy);color:var(--card)}
.pk-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.pk-grid[hidden]{display:none}
.pk-main,.pk-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.setup-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.setup-row+.setup-row{margin-top:8px}
.field.inline{flex-direction:row;align-items:center;gap:6px}
.field.inline select{min-height:44px;padding:4px 8px}
.pos-note{font-size:12px;color:var(--sub);margin:6px 0 0;line-height:1.5}
.pos-lbl{font-size:13px;white-space:nowrap}
.pk-setup{flex-wrap:nowrap}
.pos-field{min-width:0;flex:0 1 240px}
.pos-field select{width:100%;min-width:0}
.small{font-size:13px}
.pk-input .search-box{margin:8px 0 6px}
.sub-h{font-family:var(--h);font-weight:700;font-size:15px;color:var(--navy);margin:12px 0 6px}
.picker{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--paper)}
.picker{margin-top:10px}
.picker summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--navy);min-height:44px;display:flex;align-items:center}
.picker-chips{margin:6px 0 8px}
.picker-chips .chip{font-size:13px}
.pc-n{font-family:var(--m);font-size:11px;color:var(--sub);margin-left:2px}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;max-height:360px;overflow:auto;padding:2px}
.pg-card{display:flex;align-items:center;gap:6px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer;font-size:13px;min-height:44px}
.pg-card.in{border-color:var(--teal);background:var(--teal-l)}
.pg-k{font-family:var(--m);font-size:12px;font-weight:600;background:var(--btn);color:#fff;border-radius:999px;min-width:20px;text-align:center;padding:0 5px}
.pg-card:hover{border-color:var(--navy)}
.pg-n{flex:1;min-width:0;line-height:1.35}
.chiplist{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chiplist .muted{font-size:14px}
.cchip{display:inline-flex;align-items:center;gap:5px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:0 4px 0 10px;font-size:14px;max-width:100%;min-height:44px}
.cc-name{background:none;border:0;padding:0;cursor:pointer;text-align:left;font-size:14px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:44px}
.cc-x{border:0;background:transparent;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:19px;color:var(--sub);flex:none;margin:-2px -4px -2px 0}
.cc-x:hover{background:var(--danger-l);color:var(--danger)}
.chiplist.small .cchip{font-size:13px;padding-right:10px;min-height:0}
.chiplist.small .cc-name{min-height:32px}
.chiplist.small .cchip:has(.cc-x) .cc-name{min-height:44px}
.chiplist.small .cchip:has(.cc-x){padding-right:2px}
.chiplist.small .cc-name{font-size:13px}

/* ランキング */
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rk{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.rk-top1{border:2px solid var(--btn);background:linear-gradient(0deg,var(--card),var(--card)) padding-box}
.rk-no{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--navy-l);color:var(--navy);font-weight:600}
.rk-top1 .rk-no{background:var(--btn);color:#fff}
.rk-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rk-name{background:none;border:0;padding:0;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;min-height:44px}
.rk-meter{display:flex;align-items:center;gap:8px;margin:4px 0}
.bar{flex:1;height:8px;border-radius:999px;background:var(--navy-l);overflow:hidden;display:block;max-width:260px}
.bar>span{display:block;height:100%;background:var(--teal);border-radius:999px}
.rk-score{font-size:13px;color:var(--sub);min-width:3.5em}
.rk-badges{display:flex;flex-wrap:wrap;gap:4px}
.badge{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;border:1px solid var(--line);background:var(--paper);color:var(--sub);white-space:nowrap}
.b-ok{background:var(--teal-l);border-color:var(--teal);color:var(--teal-t)}
.b-mid{background:var(--apri-l);border-color:var(--apri);color:var(--apri-t)}
.b-ng{background:var(--danger-l);border-color:var(--danger);color:var(--danger)}
.b-mute{color:var(--sub)}
.badge-space{display:inline-block;width:38px}
.rk-why{margin:6px 0 0;font-size:14px;line-height:1.65}
.rk-why b{color:var(--navy)}
.rk-more{margin-top:4px;font-size:13px}
.rk-more summary{cursor:pointer;color:var(--teal-t);font-weight:700;min-height:44px;display:inline-flex;align-items:center;list-style:none;gap:4px}
.rk-more summary::-webkit-details-marker{display:none}
.rk-more summary::before{content:"▶";font-size:10px;transition:transform .15s}
.rk-more[open] summary::before{transform:rotate(90deg)}
.rk-more .rk-why{margin-top:2px}
.rk-take{align-self:center}
.fine{font-size:12px;color:var(--sub);margin:10px 0 0}
.empty-note{background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:16px;text-align:center;margin:0}

/* 取ったカード */
.cbars{display:flex;flex-direction:column;gap:5px}
.cbar{display:grid;grid-template-columns:52px minmax(0,1fr) 34px 44px;gap:6px;align-items:center;font-size:13px}
.cb-l{display:flex;align-items:center;gap:5px;font-weight:700}
.cbar .bar{max-width:none}
.bar-red{background:var(--c-red)!important}.bar-yellow{background:var(--c-yellow)!important}.bar-blue{background:var(--c-blue)!important}.bar-purple{background:var(--c-purple)!important}
.cb-v{font-size:12px;color:var(--sub);text-align:right}
.pool-msg{font-size:14px;margin:8px 0}
.pool-stats{margin:0 0 10px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.pool-stats div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;border-bottom:1px dashed var(--line);padding:3px 0}
.pool-stats dt{color:var(--sub)}
.pool-stats dd{margin:0;text-align:right}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.log-sum{font-size:14px;margin:0 0 6px}
.log{list-style:none;margin:0;padding:0;max-height:320px;overflow:auto;font-size:13px}
.log li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px;padding:5px 0;border-bottom:1px dashed var(--line)}
.lg-pos{color:var(--sub)}
.log .dot{margin-right:4px}
.lg-top{display:block;font-size:12px;color:var(--apri-t)}
.lg-top.ok{color:var(--teal-t)}

/* 練習モード */
.pr-intro{font-size:14px;margin:0 0 10px}
.opts .chk{font-size:14px}
.chk{display:flex;gap:6px;align-items:center}
#pboard:focus{outline:none}
.pr-head h2{margin:0}
.pr-pass{font-size:13px;margin:2px 0 6px}
.progress{height:6px;background:var(--navy-l);border-radius:999px;overflow:hidden;margin-bottom:12px}
.progress span{display:block;height:100%;background:var(--lav)}
.pr-pack{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.pr-card{position:relative}
.pr-pick{width:100%;height:100%;display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:8px 10px 48px;cursor:pointer;min-height:130px}
.pr-pick:hover{border-color:var(--navy)}
.pr-card.sel .pr-pick{border:3px solid var(--btn);background:var(--teal-l);padding:6.5px 8.5px 46.5px}
.pr-top{display:flex;align-items:center;gap:6px}
.pr-top .stars{margin-left:auto;font-size:13px}
.pr-name{font-weight:700;font-size:15px;line-height:1.4}
.pr-sub{font-size:12px;color:var(--sub);line-height:1.4}
.pr-info{position:absolute;right:4px;bottom:4px;border:1px solid var(--line);background:var(--paper);border-radius:999px;font-size:12px;padding:0 12px;cursor:pointer;min-height:44px;min-width:56px}
.pr-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px -14px 0;padding:10px 14px;position:sticky;bottom:var(--tabbar-h);background:var(--card);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);z-index:5}
.pr-hint{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.pr-feedback{margin:0 0 10px;padding:8px 12px;border-radius:8px;font-size:14px}
.pr-feedback.same{background:var(--teal-l);color:var(--teal-t)}
.pr-feedback.diff{background:var(--apri-l);color:var(--apri-t)}
.pr-done h2{margin-top:0}
.pr-seats{border-collapse:collapse;margin:8px 0;font-size:14px;width:100%;max-width:460px}
.pr-seats th,.pr-seats td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left}

@media (max-width:900px){
  .pk-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .rk{grid-template-columns:30px minmax(0,1fr);padding:10px}
  .rk-take{grid-column:2;justify-self:start}
  .rk-no{width:26px;height:26px;font-size:13px}
  .pr-pack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs [role=tab]{font-size:14px;padding:8px 12px}
}

/* 入力まわり（2026-09-24 QA 対応：最初の画面に入力欄と1位を入れる） */
.pb-head{display:flex;align-items:center;gap:6px;margin:6px 0 4px}
.pb-head .sub-h{margin:0 auto 0 0}
.pb-head .btn-s{font-size:13px;padding:4px 12px}
.pack-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;margin-bottom:4px}
.pack-row .cchip{flex:none;max-width:220px}
.pk-empty{min-height:44px;display:flex;align-items:center}
.quick{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:0 0 2px}
.quick:empty{display:none}
.quick::-webkit-scrollbar{display:none}
.q-lbl{font-size:12px;color:var(--sub);flex:none}
.qchip{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:44px;border:1.5px dashed var(--line);background:var(--card);border-radius:999px;padding:0 12px;font-size:13px;cursor:pointer;white-space:nowrap}
.qchip::before{content:"+";font-weight:700;color:var(--teal-t)}
.wheel{background:var(--apri-l);border:1.5px solid var(--apri);border-radius:10px;padding:8px 12px;margin:8px 0 0;font-size:14px}
.wheel p{margin:0 0 4px}
.wh-todo b{color:var(--danger)}
.top1{margin-top:8px}
.t1{border:2px solid var(--btn);border-radius:12px;padding:8px 12px 10px;background:var(--card);position:relative}
.t1-lbl{position:absolute;top:-11px;left:10px;background:var(--btn);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:0 10px;line-height:20px}
.t1-main{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.t1-name{background:none;border:0;padding:0;font-weight:700;font-size:17px;color:var(--ink);cursor:pointer;text-align:left;min-height:44px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.t1-why{margin:0;font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t1-warn{margin:4px 0 0;font-size:13px;color:var(--danger);font-weight:700}
.t1-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;align-items:center}
.t1-empty{margin:0;background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:10px;text-align:center;font-size:14px}
.target-row{margin-top:10px;font-size:13px}
.target-row .seg label{font-size:13px;padding:0 12px}
.lookup{margin:0 0 14px;border:2px solid var(--lav)}
.lk-head{display:flex;align-items:center;gap:8px}
.lk-head h2{margin:0 auto 0 0;font-size:17px}
.lk-close{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);font-size:20px;cursor:pointer}
.lk-card{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.lk-name{font-size:18px;font-family:var(--h);color:var(--navy)}
.lk-pick{font-size:13px;color:var(--sub)}
.lk-meta{margin:2px 0;font-size:13px;color:var(--sub)}
.lk-why{margin:4px 0;font-size:14px}
.lk-mix{margin:0;font-size:14px;background:var(--apri-l);border-radius:8px;padding:6px 10px;flex-basis:100%}
.lk-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
@media (max-width:760px){
  .page-h{font-size:20px;margin:2px 0}
  .tabs{margin-bottom:10px}
  .pk-input{padding:10px 12px}
  .seg label{padding:0 11px;font-size:13px}
  .pos-field{flex:1 1 auto}
  .pos-lbl{display:none}
  .pos-field select{font-size:14px;padding:4px 6px}
  .picker-grid{max-height:none;overflow:visible}
  .pb-head .sub-h{font-size:14px}
}

/* 並び：ふだんは 設定→検索→最近→パック→1位。戻ってきたパックを外している間は、案内とパックを検索より上に出す */
.pk-input{display:flex;flex-direction:column}
.pk-input>*{order:10}
.pk-input>.pk-setup{order:1}.pk-input>.pos-note{order:2}.pk-input>.wheel{order:3}.pk-input>.search-box{order:4}.pk-input>.quick{order:5}
.pk-input>.packbox{order:6}.pk-input>.top1{order:7}.pk-input>.picker{order:8}.pk-input>.target-row{order:9}
.pk-input.is-wheel>.pos-note{display:none}
.pk-input.is-wheel>.packbox{order:3}
.pk-input.is-wheel>.wheel{order:2}
.pk-input.is-wheel .packbox .cchip{background:var(--card)}
.wheel .wh-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wheel .wh-row p{flex:1;min-width:200px;margin:0}
.pk-input.is-wheel #packlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pk-input.is-wheel #packlist .cchip{max-width:none;min-width:0}
.pk-input.is-wheel #packlist .cc-name{flex:1}

/* カード画像（2026-09-28） */
.cimg-t1{float:left;width:32px;margin:1px 8px 0 0;border-radius:2px}
.t1-act{clear:both}
.pg-card .cimg-thumb{width:22px}