/* 中古iPhoneラボ：販売価格インデックス */
.slabx{--x-line:var(--lab-edge,#cfe6ea);--x-line2:var(--lab-edge,#cfe6ea);--x-surface:#fff;--x-surface2:var(--lab-tint,#f2fbfd);
 --x-ink:#131E1C;--x-ink2:#3B4C49;--x-muted:#6B7C79;--x-accent:var(--lab-ink,#52c2d0);
 --x-band:rgba(11,110,99,.13);--x-cool:#1F6FB2;--x-warm:#C2410C;
 --x-flag:#8A6D1F;--x-flagbg:rgba(180,140,40,.10);
 color:var(--x-ink);display:flex;flex-direction:column;gap:20px;
 /* 上マージンはサブメニューとの間隔が買取側(.slab-functional)より26px広くなるため持たせない */
 margin:0 0 40px}
.slabx *{box-sizing:border-box}
.slabx .num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.slabx-mock{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:8px;
 background:var(--x-flagbg);border:1px solid rgba(180,140,40,.4);color:var(--x-flag);font-size:12.5px;line-height:1.6}
.slabx h2.slabx-h{margin:0 0 4px;font-size:17px;font-weight:700}
.slabx-lead{margin:0 0 14px;color:var(--x-muted);font-size:12.5px;line-height:1.65}
.slabx-controls{display:flex;flex-wrap:wrap;gap:1px;background:var(--x-line);border:1px solid var(--x-line);border-radius:10px;overflow:hidden}
.slabx-ctl{background:var(--x-surface);padding:9px 14px 11px;flex:1 1 150px;min-width:0}
.slabx-ctl span{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--x-muted);font-weight:700;margin-bottom:2px}
.slabx-ctl select{width:100%;border:0;background:transparent;color:var(--x-ink);font:inherit;font-size:14.5px;font-weight:500;padding:0;appearance:none;cursor:pointer}
.slabx-ctl select:focus-visible{outline:2px solid var(--x-accent);outline-offset:3px}
.slabx-empty{background:var(--x-surface);border:1px dashed var(--x-line);border-radius:10px;padding:44px 24px;text-align:center;color:var(--x-muted);font-size:13.5px}
.slabx-empty p{margin:0}
.slabx-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--x-line);border:1px solid var(--x-line);border-radius:10px;overflow:hidden}
.slabx-cell{background:var(--x-surface);padding:14px 16px 15px;display:flex;flex-direction:column;gap:3px}
.slabx-cell.hi{background:var(--x-surface2)}
.slabx-cell .k{font-size:10.5px;letter-spacing:.1em;color:var(--x-muted);font-weight:700}
.slabx-cell .v{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.slabx-cell .v.sm{font-size:20px}
.slabx-cell .n{font-size:11.5px;color:var(--x-muted);line-height:1.5}
.slabx-cool{color:var(--x-cool)}.slabx-warm{color:var(--x-warm)}
.slabx-panel{background:var(--x-surface);border:1px solid var(--x-line);border-radius:10px;padding:18px}
.slabx-chart{overflow-x:auto}
.slabx-chart svg{display:block;width:100%;min-width:640px;height:auto}
.slabx-legend{display:flex;flex-wrap:wrap;gap:5px 18px;margin-top:12px;font-size:12px;color:var(--x-ink2)}
.slabx-legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:6px}
.slabx-legend .sw-med{border-top:3px solid var(--x-accent)}
.slabx-legend .sw-ext{border-top:1px dotted var(--x-muted)}
.slabx-legend .sw-band{height:9px;background:var(--x-band);border-radius:2px;border-top:0}
.slabx-legend .sw-vol{height:9px;background:var(--x-line);border-radius:2px;border-top:0}
.slabx-tbl{overflow-x:auto}
.slabx table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.slabx th,.slabx td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--x-line2)}
.slabx th{font-size:10.5px;letter-spacing:.08em;color:var(--x-muted);font-weight:700;border-bottom:1px solid var(--x-line);white-space:nowrap}
.slabx td.r,.slabx th.r{text-align:right}
.slabx tbody tr:last-child td{border-bottom:0}
.slabx .src small{display:block;color:var(--x-muted);font-size:11px}
.slabx-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700}
.slabx-chip.api{background:var(--x-band);color:var(--x-accent)}
.slabx-chip.crawl{background:var(--x-line2);color:var(--x-ink2)}
.slabx-chip.thin{background:var(--x-flagbg);color:var(--x-flag)}
.slabx-note{margin:14px 0 0;padding:11px 13px;border-radius:7px;background:var(--x-surface2);border:1px solid var(--x-line2);color:var(--x-ink2);font-size:12px;line-height:1.7}
.slabx-note b{color:var(--x-ink)}
.slabx-foot{color:var(--x-muted);font-size:11.5px;line-height:1.8;border-top:1px solid var(--x-line);padding-top:16px}
@media(max-width:680px){.slabx-cell .v{font-size:22px}}

/* ===== ヒーロー（スマホ査定ラボと同じ意匠に揃える）===== */
.slabx-hero{
 padding:38px;border:1px solid var(--lab-edge,#cfe6ea);border-radius:16px;
 background:linear-gradient(135deg,var(--lab-tint,#f2fbfd),#fff);
}
.slabx-kicker{margin:0 0 7px;color:var(--lab-ink,#52c2d0);font-size:11px;font-weight:800;letter-spacing:.14em}
/* 見出しの書体は買取側(.slab-app-hero h1)に合わせる（太さ400・行間1） */
.slabx-hero h1{margin:0 0 12px;font-size:38px;color:#18322d;line-height:1;font-weight:400}
.slabx-hero h1 span{color:var(--lab-ink,#52c2d0)}
.slabx-hero-lead{margin:0;color:var(--x-ink2);font-size:14px;line-height:1.8}
@media(max-width:760px){
 .slabx-hero{padding:24px}
 .slabx-hero h1{font-size:27px}
}
/* 検索欄もスマホ査定ラボに合わせて白カード＋影に */
.slabx-controls{
 border:0;background:transparent;gap:12px;
 padding:18px;border-radius:10px;
 background:#fff;box-shadow:0 8px 25px rgba(27,72,62,.08);
}
.slabx-ctl{
 background:transparent;padding:0;flex:1 1 160px;
}
.slabx-ctl span{font-size:12px;font-weight:700;color:var(--x-ink);letter-spacing:0;margin-bottom:6px}
.slabx-ctl select{
 padding:11px;border:1px solid var(--lab-edge,#cfe6ea);border-radius:6px;background:#fff;
 font-size:14px;font-weight:500;
}

/* 3段階セレクタ（① シリーズ ② 機種 ③ 容量） */
.slabx-series{margin:0;padding:0;border:0}
.slabx-series legend{padding:0;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--x-ink)}
.slabx-series-options{display:flex;flex-wrap:wrap;gap:8px}
.slabx-series-options label{position:relative;cursor:pointer}
.slabx-series-options input{position:absolute;opacity:0;width:0;height:0}
.slabx-series-options span{display:block;padding:9px 15px;border:1px solid var(--x-line);border-radius:99px;
 font-size:12.5px;background:var(--x-surface);transition:background .12s,border-color .12s}
.slabx-series-options label:hover span{border-color:var(--x-accent)}
.slabx-series-options input:checked+span{background:var(--x-accent);border-color:var(--x-accent);
 color:#fff;font-weight:700}
.slabx-series-options input:focus-visible+span{outline:2px solid var(--x-accent);outline-offset:2px}
.slabx-ctl select:disabled{background:#f2f5f4;color:#9aa7a4;cursor:not-allowed}

/* サーバ側で描く価格表（構造化データと画面を一致させるためのもの）。
   JSが読み込まれると同じ内容のチャートに置き換わる */
.slab-seo-summary{margin:20px 0;padding:18px 20px;border:1px solid var(--x-line);border-radius:10px;
 background:var(--x-surface)}
.slab-seo-summary h2{margin:0 0 12px;font-size:16px}
.slab-seo-summary table{width:100%;border-collapse:collapse;font-size:13.5px}
.slab-seo-summary th,.slab-seo-summary td{padding:8px 10px;border-bottom:1px solid var(--x-line);text-align:left}
.slab-seo-summary thead th{font-size:12px;font-weight:600;opacity:.7}
.slab-seo-summary tbody th{font-weight:600}
.slab-seo-summary td{text-align:right;font-variant-numeric:tabular-nums}
.slab-seo-summary td:last-child{text-align:left;opacity:.7;font-size:12.5px}
.slab-seo-summary p{margin:12px 0 0;font-size:12px;opacity:.7;line-height:1.7}

/* 取得元から各社の一覧ページへ */
.slabx-src-link{display:inline-block;margin-top:4px;font-size:11.5px;text-decoration:none;
 border-bottom:1px solid currentColor;line-height:1.4}
.slabx-src-link:hover{opacity:.75}