.card{padding:1rem 1.1rem;display:grid;grid-template-columns:minmax(0,1fr) auto;
gap:.5rem 1rem;align-items:start}

/* ヒーロー。売り文句ではなく、何を集めているかを述べるだけにする */
.hero{margin:8px 0 24px;max-width:52rem}
.hero h1{font-size:28px;line-height:1.45}
@media(max-width:640px){.hero h1{font-size:22px}.hero-br{display:none}}
.lede{color:var(--text-muted);max-width:60ch;margin:12px 0 0;font-size:14px}

/* 検索条件のパネル */
.search-panel{background:var(--surface);border:1px solid var(--surface-line);
border-radius:var(--radius-card);padding:20px;margin-bottom:16px}

/* 収集の状況。3つ並べ、狭い画面では縦に積む */
.info-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
background:var(--surface-line);border:1px solid var(--surface-line);
border-radius:var(--radius-card);overflow:hidden;margin-bottom:32px}
.info-item{background:var(--surface);padding:12px 16px;display:flex;
flex-direction:column;gap:2px;min-width:0}
.info-label{font-size:11px;color:var(--text-muted)}
.info-value{font-size:12px;line-height:1.5}
@media(max-width:768px){.info-strip{grid-template-columns:1fr}}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);
font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
border:1px solid var(--accent-soft);border-radius:999px;padding:.25rem .75rem;
background:color-mix(in srgb,var(--accent) 8%,transparent)}
.blip{width:7px;height:7px;border-radius:50%;background:var(--ok);
animation:pulse 2.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.blip{animation:none}}
@keyframes pulse{
0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}
70%{box-shadow:0 0 0 8px color-mix(in srgb,var(--ok) 0%,transparent)}
100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 0%,transparent)}}
.updated{font-family:var(--mono);font-size:.82rem;color:var(--text-muted)}
.lede{color:var(--text-muted);max-width:62ch;margin:.5rem 0 .75rem;font-size:.95rem}

/* グリッドの 1fr は実質 minmax(auto,1fr) で、autoの下限が中身のmin-content幅に
   なる。selectの最長オプションや長い出品タイトルがそのまま下限になり、狭い画面で
   トラックが画面幅を超えてしまうため、下限を明示的に0にする。 */
.filter-bar{display:grid;gap:.75rem;
grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
background:var(--surface);border:1px solid var(--surface-line);border-radius:10px;
padding:1rem;margin-bottom:1.25rem}
@media(max-width:640px){.filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field-wide{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
input,select{max-width:100%}
.field label{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-muted)}
input,select{font:inherit;color:var(--text);background:var(--bg);
border:1px solid var(--surface-line);border-radius:6px;padding:.5rem .6rem}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}

.purpose-panel{background:var(--surface);border:1px solid var(--accent-soft);
border-left:3px solid var(--accent);border-radius:8px;padding:.9rem 1.1rem;
margin-bottom:1rem;font-size:.88rem}
.purpose-panel h2{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.purpose-req{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0}
.purpose-req span{font-family:var(--mono);font-size:.75rem;
border:1px solid var(--surface-line);border-radius:4px;padding:.2rem .55rem}
.purpose-panel .src{color:var(--text-muted);font-size:.75rem;margin:.6rem 0 0}

.result-bar{display:flex;align-items:center;justify-content:space-between;
gap:1rem;flex-wrap:wrap;margin:0 0 .75rem}
.result-count{font-family:var(--mono);font-size:.85rem;color:var(--text-muted);
margin:0}
.view-toggle{display:flex;border:1px solid var(--surface-line);border-radius:6px;
overflow:hidden}
.view-toggle button{font:inherit;font-family:var(--mono);font-size:.78rem;
background:var(--surface);color:var(--text-muted);border:none;cursor:pointer;
padding:.35rem .9rem}
.view-toggle button+button{border-left:1px solid var(--surface-line)}
.view-toggle button[aria-pressed="true"]{background:var(--accent);
color:var(--accent-on-accent);font-weight:600}
.view-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}


.cards{display:flex;flex-direction:column;gap:.75rem}
.card-title{font-weight:500;font-size:.98rem;text-wrap:pretty;overflow-wrap:anywhere}
.card-title a{color:var(--text);text-decoration:none}
.card-title a:hover{color:var(--accent);text-decoration:underline}
.price-block{text-align:right;font-family:var(--mono)}
.price{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums}
.price-delta{font-size:.78rem;margin-top:.15rem}
/* 値下がりを緑や赤で出すと「お買い得」の表現になるため、
   向きは記号だけで示し、色はグレーのままにする */
.price-delta.down,.price-delta.up{color:var(--text-muted)}
.meta-row{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.4rem;min-width:0;
font-family:var(--mono);font-size:.75rem}
.spec-row{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.9rem;min-width:0;
font-size:.78rem;color:var(--text-muted);
border-top:1px dashed var(--surface-line);padding-top:.5rem;margin-top:.15rem}
.spec-row b{color:var(--text);font-weight:500}
/* 出品タイトルから抽出した構成。表の推定値と同じ点線で示す */
.spec-row.parsed{font-family:var(--mono);font-size:.75rem}
.empty{text-align:center;color:var(--text-muted);padding:3rem 1rem;
font-family:var(--mono)}


.queue-section{margin-top:32px;padding:20px;background:var(--surface);
border:1px solid var(--surface-line);border-radius:var(--radius-card)}
.section-h{font-size:20px;font-weight:700;color:var(--text);margin:0 0 12px}
/* このサイトでできること。3つに絞り、装飾を足さず文章で説明する */
.feature-section{margin-top:32px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr}}
.feature{background:var(--surface);border:1px solid var(--surface-line);
border-radius:var(--radius-card);padding:20px}
.feature-title{font-size:16px;font-weight:700;margin:0 0 8px;color:var(--text)}
.feature p{margin:0;font-size:13px;color:var(--text-muted)}

.queue-lede{margin:0 0 .9rem;font-size:.92rem}
.queue-note{color:var(--text-muted);font-size:.8rem;margin:.6rem 0 0}
.queue-list{list-style:none;padding:0;margin:.8rem 0 0;display:flex;
flex-direction:column;gap:.35rem}
.queue-list li{font-family:var(--mono);font-size:.8rem;display:flex;gap:.6rem;
align-items:baseline}
.queue-list .pos{color:var(--accent);min-width:2.2em}
.queue-list a{color:var(--text)}
.queue-empty{color:var(--text-muted);font-size:.82rem;margin:.8rem 0 0;
font-family:var(--mono)}

/* 特集・用途プリセットの一覧。見出し行 + 説明 + 小さい補足の3層構造 */
.preset-summary{list-style:none;padding:0;margin:.8rem 0 0;display:flex;
flex-direction:column;gap:.9rem}
.preset-summary li{border-left:2px solid var(--accent-soft);padding-left:.9rem;
font-size:.9rem}
.preset-summary strong,.preset-summary li>a{font-family:var(--mono);
font-size:.88rem;font-weight:600}
.preset-summary li>a{color:var(--text);text-decoration:none}
.preset-summary li>a:hover{color:var(--accent);text-decoration:underline}
.preset-summary small{color:var(--text-muted);font-family:var(--mono);
font-size:.75rem}


.catalog-table{width:100%;border-collapse:collapse;font-size:.85rem}
.catalog-table th{text-align:left;font-family:var(--mono);font-size:.7rem;
letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:500;
border-bottom:1px solid var(--surface-line);padding:.4rem .6rem .4rem 0}
.catalog-table td{padding:.5rem .6rem .5rem 0;
border-bottom:1px solid var(--surface-line);vertical-align:baseline}
.catalog-table tr:last-child td{border-bottom:none}
.catalog-table .num{font-family:var(--mono);font-variant-numeric:tabular-nums;
text-align:right;white-space:nowrap}
.catalog-wrap{overflow-x:auto;margin-top:.8rem}
.cat-link{background:none;border:none;padding:0;font:inherit;color:var(--accent);
cursor:pointer;text-decoration:underline;text-align:left}
.cat-link:hover{filter:brightness(1.1)}

.footer-h{font-size:14px;font-weight:700;color:var(--text);margin:20px 0 6px}
.footer-h:first-child{margin-top:0}
footer a{color:var(--accent)}