/* Local v1.7: title and vertex-based radar labels only below the existing 375px boundary. */
:root { --accent:#ffd400; --ink:#111; --muted:#5f5f5a; --page:#f1f1ef; --paper:#fff; --line:#d8d8d5; --focus:#075bc7; --shell-width:1160px; --main-width:1112px; }
*,*::before,*::after { box-sizing:border-box; }
html { color:var(--ink); background:var(--page); font:16px/1.45 system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif; }
html,body { margin:0; padding:0; min-width:0; }
body { min-height:100vh; }
html { scrollbar-width:none; }
html::-webkit-scrollbar { width:0; height:0; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.screen-reader-only,.semantic-manifest { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
:where(a,button,input) { scroll-margin-block:8px; }
:where(a,button,input):focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
:where(a,button):hover { text-decoration:underline; text-underline-offset:3px; }
.page-shell { width:100%; min-width:0; background:#f1f1ef; }
.search-content-shell { width:min(100%,var(--shell-width)); margin-inline:auto; background:#fff; }
.page-main { width:100%; min-width:0; display:grid; gap:12px; padding:15px 16px 22px; }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; color:#4d4d4d; font-size:11px; }
.breadcrumb a { color:#376b91; text-decoration:underline; }
.page-title { margin:0; font-size:27.3px; line-height:1.25; }
/* Remove the redundant outer search panel while keeping two 44px controls. */
.search-panel { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:0; }
.search-panel input[type="search"] { width:100%; min-width:0; height:44px; padding:0 12px; border:1px solid #a9a9a5; border-radius:5px; background:#fff; color:var(--ink); font-size:16px; }
.search-panel button { min-height:44px; padding:0 15px; border:1px solid #d2ae00; border-radius:5px; background:var(--accent); font-size:14px; font-weight:800; }
.sort-panel { min-width:0; }
.sort-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); border:1px solid var(--line); border-radius:6px; }
.sort-grid a { min-width:0; height:40px; grid-column:span 3; display:grid; place-items:center; padding:2px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:11px; font-weight:800; line-height:16px; text-align:center; overflow-wrap:anywhere; }
.sort-grid a:nth-child(4),.sort-grid a:last-child { border-right:0; }
.sort-grid a:nth-child(n+5) { grid-column:span 4; border-bottom:0; }
.sort-grid a[aria-current="page"] { background:var(--accent); box-shadow:inset 0 -3px var(--ink); }
.sort-grid a:focus-visible { outline-offset:-4px; }
.sort-grid small { display:none; }
/* v1.3: mobile 07 / 01 / 06, then 02 / 03 / 04 / 05. JS aligns DOM and Tab order. */
@media (max-width:767px) {
  .sort-grid a,.sort-grid a:nth-child(4),.sort-grid a:nth-child(n+5) { height:32px; grid-column:span 4; border-right:1px solid var(--line); border-bottom:1px solid var(--line); white-space:nowrap; overflow-wrap:normal; }
  .sort-grid a:nth-child(n+4) { grid-column:span 3; border-bottom:0; }
  .sort-grid a:nth-child(3),.sort-grid a:last-child { border-right:0; }
  .sort-grid a > span { white-space:nowrap; }
  .sort-grid a br { display:none; }
}
.result-summary { min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.result-summary p { margin:0; font-size:13px; font-weight:800; }
.result-summary a { min-height:44px; display:inline-flex; align-items:center; padding:0 10px; border:1px solid #a9a9a5; border-radius:4px; font-size:12px; }
.results-panel,.card-list { min-width:0; }
.card-list { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.card-article { min-width:0; display:grid; grid-template-columns:92px minmax(0,1fr) 100px; grid-template-areas:"visual copy radar" "cta cta cta"; gap:8px; align-items:start; padding:9px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.card-visual-link { grid-area:visual; width:100%; min-width:0; align-self:center; display:block; }
/* Geometry is an exact scaled copy of slab_contract v1.1 (800 x 1350). */
.slab { width:100%; aspect-ratio:800/1350; display:grid; grid-template-columns:65fr 670fr 65fr; grid-template-rows:340fr 938fr 72fr; border-radius:5px; background:#e9e9e7; outline:1px solid #888; outline-offset:-1px; }
.slab-label-region { grid-column:1/-1; grid-row:1; min-width:0; min-height:0; display:grid; grid-template-rows:58fr 200fr 82fr; padding-inline:7%; }
.psa-case-label { grid-row:2; display:flex; gap:2px; align-items:center; justify-content:center; min-width:0; padding:0; outline:1px solid #999; background:#fff; font-family:Arial,sans-serif; }
.psa-case-label b { width:21px; flex:none; font-size:10px; line-height:11.5px; font-weight:700; }
.psa-case-label small { font-size:10px; line-height:11.5px; white-space:nowrap; }
.card-image-slot { grid-column:2; grid-row:2; min-width:0; min-height:0; outline:1px dashed #b1b1ab; outline-offset:-1px; }
.card-mount { display:grid; place-items:center; width:100%; height:100%; position:relative; overflow:hidden; background:#f6f6f3; }
/* Image composition only. Page/component layout never uses absolute positioning. */
.card-image { position:absolute; max-width:none; opacity:0; }
.card-image[data-fit-ready="true"] { opacity:1; }
.image-fallback { max-width:100%; font-size:10px; line-height:1.4; text-align:center; }
.card-copy { grid-area:copy; align-self:center; min-width:0; }
.card-facts { display:contents; }
.card-name { display:block; font-size:14px; font-weight:800; line-height:1.5; overflow-wrap:anywhere; }
.card-identity { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.4; overflow-wrap:anywhere; }
.price-label { display:block; margin-top:8px; font-size:10px; line-height:1.4; }
.card-price { display:block; margin-top:4px; font-size:20px; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric-line { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:7px 0 0; font-size:10px; line-height:1.4; }
.metric-line b { max-width:100%; padding:3px 6px; border-radius:4px; background:#151515; color:var(--accent); font-size:11px; overflow-wrap:anywhere; }
.radar-box { grid-area:radar; min-width:0; display:grid; place-items:center; align-self:center; }
.radar-clean { width:100%; overflow:visible; }
.radar-grid polygon,.radar-grid line { fill:none; stroke:#9a9a9a; stroke-width:1; }
.radar-value { fill:#ffd40077; stroke:#605000; stroke-width:1.4; }
.radar-labels { font-size:10px; font-weight:600; fill:#333; }
.radar-status { font-size:11px; line-height:1.4; }
.detail-cta { grid-area:cta; align-self:end; min-width:0; min-height:44px; display:flex; align-items:center; justify-content:center; padding:6px; border:1px solid var(--line); border-radius:4px; background:#fafaf8; color:#222; font-size:12px; font-weight:700; text-align:center; }
/* v1.4: mobile full-width detail CTA is 80% of its former 44px height. */
@media (max-width:767px) { .detail-cta { min-height:35.2px; } }
html[data-cta="legacy"] .card-article { grid-template-areas:"visual copy radar" "visual cta cta"; }
html[data-cta="legacy"] .detail-cta { min-height:30px; border:0; border-top:1px solid var(--line); border-radius:0; padding:3px 7px; font-size:10px; justify-content:flex-end; text-align:right; background:#fff; }
.empty-state { display:grid; gap:7px; padding:24px 16px; border:1px dashed #a9a9a5; border-radius:7px; background:#f8f8f7; text-align:center; }
.empty-state strong { font-size:16px; }
.empty-state p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.page-nav { min-width:0; display:grid; gap:8px; }
.page-link { min-height:50px; display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border:1px solid #d3af00; border-radius:7px; background:var(--accent); font-size:14px; font-weight:800; }
.page-prev { background:#fff; border-color:#a9a9a5; }
.page-nav p { margin:0; color:#666; font-size:10px; text-align:center; }
/* Diagnostic overlays only; both modes keep identical content/font/geometry. */
.id-overlay { position:absolute; top:0; left:0; width:100%; height:0; pointer-events:none; z-index:95; }
.wire-id-badge { position:absolute; font:700 8px/1.1 Consolas,monospace; color:#00376a; background:#e8f4ffff; border:1px solid #3786c2; padding:1px; overflow-wrap:anywhere; }
.show-ids [data-ledger-id]:not([data-ref-id]),.show-ids [data-ledger-ref] { outline:1px dashed #2977b488; outline-offset:-1px; }
@media (min-width:768px) { .search-panel { grid-template-columns:minmax(0,1fr) 150px; } .sort-grid { grid-template-columns:repeat(7,minmax(0,1fr)); } .sort-grid a,.sort-grid a:nth-child(4),.sort-grid a:nth-child(n+5) { grid-column:auto; height:40px; border-bottom:0; border-right:1px solid var(--line); } .sort-grid a:last-child { border-right:0; } }
@media (min-width:1024px) { .card-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
/* Keep the slab's 800:1350 proportions and its readable 10px label at narrow widths. */
@media (max-width:374px) {
  .card-article { grid-template-columns:92px minmax(0,1fr) 84px; grid-template-areas:"visual title title" "visual copy radar" "cta cta cta"; column-gap:6px; }
  .card-copy { display:contents; }
  .card-name { grid-area:title; align-self:end; font-size:12px; }
  .card-facts { display:block; grid-area:copy; align-self:start; min-width:0; }
  .card-identity { margin-top:0; }
  .card-price { font-size:17px; line-height:1.4; }
  .metric-line { gap:3px; }
}
/* One-column tablet cards: cap the information column and center the whole group. */
@media (min-width:768px) and (max-width:1023px) {
  .card-article { grid-template-columns:118px minmax(0,240px) 160px; gap:10px 16px; justify-content:center; }
}
/* Two-column tablet/small-desktop cards; keep this separate from the approved PC rule. */
@media (min-width:1024px) and (max-width:1199px) {
  .card-article { grid-template-columns:92px minmax(0,200px) 112px; gap:10px 12px; justify-content:center; }
}
@media (min-width:1200px) {
  .page-main { max-width:var(--main-width); margin-inline:auto; padding:18px 0 28px; gap:14px; }
  .page-title { font-size:30px; }
  .search-panel input[type="search"],.search-panel button { height:46px; }
  .sort-grid { max-width:980px; }
  .card-article { grid-template-columns:100px minmax(0,238px) 144px; gap:10px 12px; padding:11px; justify-content:center; }
  .card-name { font-size:15px; }
  .card-identity,.price-label { font-size:11px; }
  .card-price { font-size:23px; }
  .metric-line { font-size:11px; }
  .metric-line b { font-size:12px; }
  html[data-container="common1200"] { --shell-width:1280px; --main-width:1200px; }
}