/* Zero3 の画面の style.css（PC のフォルダ ZERO2/webapp/public/style.css、2026-11-07 時点）をそのまま写したもの（v0.10.0。ユーザー指示「Zero3 の候補一覧ページと詳細ページを踏襲」）。
   写した部分は変えない。コンテスト版の追加はいちばん下にまとめる。 */
body {
  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 1600px;
  width: 96%;
  margin: 2rem auto;
  padding: 0 1rem;
  color: #222;
  box-sizing: border-box;
}
/* 全ページ共通ヘッダー(public/header.js参照)。各ページ本文より上、bodyの先頭に挿入される。
   1行目は常に「トラッキング/商品サーチ/設定」の3ボタンだけ。複数ページを持つグループ
   (現状は商品サーチのみ)を開いているときだけ、2行目にそのグループの子ページボタンを
   横並びで追加表示する(サブヘッダー)。 */
.site-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #ddd;
}
.site-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.site-nav-sub {
  padding-top: 0.5rem;
  border-top: 1px dashed #ddd;
}
.site-nav a {
  padding: 0.4rem 0.9rem;
  border: 1px solid #333;
  border-radius: 4px;
  text-decoration: none;
  color: #222;
  font-size: 0.85rem;
  background: #fff;
}
.site-nav-sub a {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}
.site-nav a:hover { background: #f2f2f2; }
.site-nav a.active { background: #222; color: #fff; }

h1 { font-size: 1.4rem; }
.note { color: #666; font-size: 0.9rem; }
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.row-between { display: flex; justify-content: space-between; align-items: center; }

#add-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
#add-form label { display: flex; flex-direction: column; font-size: 0.8rem; color: #555; gap: 0.25rem; }
#add-form .grow { flex: 1 1 240px; }
#add-form input, #add-form select {
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  border: 1px solid #333;
  background: #222;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
button.secondary { background: #fff; color: #222; }
button:disabled { opacity: 0.5; cursor: default; }

table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.88rem; white-space: nowrap; }
th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid #eee; vertical-align: top; white-space: nowrap; }
th { color: #666; font-weight: 600; }
.table-scroll { overflow-x: auto; }
#items-table tr.hit { background: #fffbea; }
#items-table .actions { white-space: nowrap; }
#items-table .actions button, #items-table .actions a button { margin-right: 0.3rem; }
.found-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; font-size: 0.78rem; background: #e6f4ea; color: #1e7e34; font-weight: 600; }
.hit-mark { color: #a3620a; font-weight: 700; }

.product-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.product-title { font-weight: 600; white-space: nowrap; }
.thumb { width: 40px; height: 40px; object-fit: contain; border: 1px solid #eee; border-radius: 4px; background: #fff; flex-shrink: 0; }
.thumb-empty { background: #f2f2f2; }
.detail-thumb { width: 96px; height: 96px; object-fit: contain; border: 1px solid #eee; border-radius: 6px; background: #fff; flex-shrink: 0; }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; font-size: 0.78rem; }
.badge.in_stock { background: #e6f4ea; color: #1e7e34; }
.badge.temp_out_of_stock { background: #fdeccb; color: #8a4b00; }
.badge.backorder { background: #fff4e0; color: #a3620a; }
.badge.sold_out { background: #fbe7e7; color: #b02a2a; }
.badge.unknown { background: #eee; color: #666; }
.new-tag { display: inline-block; margin-right: 0.35rem; padding: 0 0.35rem; border-radius: 3px; background: #d93025; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.35; vertical-align: 0.08em; }
.new-tag.update { background: #1a73e8; }

.hit-yes { background: #fff7d6; }
.hit-no { color: #999; }

.err { color: #b02a2a; font-size: 0.8rem; }
.item-link { word-break: break-all; }
.muted { color: #999; }

/* 設定画面の追加のSP-APIアプリ(1件ずつ枠で囲み、番号と使う機能を出す) */
.amazon-extra-app { border: 1px solid #ddd; border-radius: 6px; padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; }
.amazon-extra-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.amazon-extra-uses { margin-top: 0.5rem; font-size: 0.85rem; color: #555; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.amazon-extra-uses label { display: inline-flex; align-items: center; gap: 0.25rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.field-grid label { display: flex; flex-direction: column; font-size: 0.8rem; color: #555; gap: 0.25rem; }
.field-grid input { padding: 0.4rem 0.5rem; font-size: 0.95rem; border: 1px solid #ccc; border-radius: 4px; }
#config-form textarea {
  width: 100%;
  max-width: 500px;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  font-family: monospace;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
#config-form button { margin-top: 0.5rem; }

/* 伏字項目(APIキー等)の表示/非表示切り替えボタン(2026-09-02追加)。input[type=password]・
   .secret-textareaをJS側(settings.js)でこのラッパーで包み、右端にアイコンボタンを重ねる。
   padding-rightは.field-grid input / #config-form textareaのpadding指定より後に置くことで
   右側だけ上書きし、アイコンとテキストが重ならないようにする。 */
.secret-field { position: relative; display: block; }
.secret-field input,
.secret-field textarea {
  padding-right: 1.7rem;
  width: 100%;
  box-sizing: border-box;
}
.secret-toggle {
  position: absolute;
  right: 0.3rem;
  top: 0.5rem;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.secret-toggle img { display: block; width: 16px; height: 16px; }

.item-card { border: 1px solid #ddd; border-radius: 8px; padding: 0.9rem 1.1rem; margin-bottom: 1rem; }
.item-card.hit { border-color: #e0c341; background: #fffbea; }
.item-card-head { display: flex; align-items: flex-start; gap: 1rem; }
.item-card-head .grow { flex: 1; min-width: 0; }
.item-meta { color: #666; font-size: 0.82rem; white-space: nowrap; }
.mp-block { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed #e5e5e5; overflow-x: auto; overflow-y: hidden; }
.mp-title { font-weight: 600; font-size: 0.85rem; color: #444; margin-bottom: 0.3rem; white-space: nowrap; }
.candidate-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0; font-size: 0.85rem; flex-wrap: nowrap; white-space: nowrap; width: max-content; }
.candidate-row.hit { background: #fff7d6; }
.candidate-row.stage1-note { opacity: 0.75; }
.inline-check { font-size: 0.82rem; color: #555; margin-right: 0.75rem; white-space: nowrap; }
.candidate-hidden-note { font-size: 0.8rem; color: #999; padding: 0.2rem 0; white-space: nowrap; }
.candidate-sep { border: none; border-top: 1px dotted #ddd; margin: 0.5rem 0; }

.edit-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.4rem 0; }
.edit-form label { display: flex; flex-direction: column; font-size: 0.75rem; color: #555; gap: 0.2rem; }
.edit-form input, .edit-form select {
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.edit-form input[name="asin"], .edit-form input[name="jan"] { width: 11ch; }
.edit-form input[name="thresholdPrice"] { width: 8ch; }
.edit-form input[name="entryQuantity"] { width: 5ch; }
.edit-form .grow { flex: 1 1 160px; }
.edit-form button { padding: 0.3rem 0.7rem; font-size: 0.82rem; }

.tiny-btn { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
/* 「一時対象外」ボタンに付ける押した回数のバッジ(2026-09-10)。ボタン幅を大きく変えず、
   数字が付いていることが一目で分かる程度の控えめな見え方にする。 */
.count-badge {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 8px;
  background: #e0e0e0;
  color: #555;
  font-size: 0.72rem;
  line-height: 1.4;
}

.threshold-edit { display: flex; align-items: center; gap: 0.35rem; }
.threshold-input { width: 9ch; padding: 0.25rem 0.35rem; font-size: 0.85rem; border: 1px solid #ccc; border-radius: 4px; }
.suggested-cell { white-space: nowrap; }
.stock-icon { width: 15px; height: 15px; vertical-align: middle; }

/* 一覧テーブルの各セルの文字サイズ・行高さを商品タイトルに揃える */
#items-table { font-size: 0.95rem; }
#items-table td { padding: 0.55rem 0.5rem; vertical-align: middle; }
#items-table .product-title { font-size: 0.95rem; }
#items-table .item-meta { font-size: 0.82rem; }
#items-table .threshold-input { font-size: 0.95rem; }
#items-table .badge, #items-table .found-badge { font-size: 0.85rem; }
#items-table .tiny-btn { font-size: 0.82rem; padding: 0.2rem 0.6rem; }
#items-table .actions button { padding: 0.3rem 0.75rem; font-size: 0.88rem; }

/* 大量ASINスキャン一覧: トラッキング一覧(#items-table)と違い横スクロールを出さない方針のため、
   商品名は折り返さず1行で省略(ellipsis)して幅に収める。 */
#scan-table .product-title {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 画面が広いほど商品名を長く見せる(2026-10-16 UI見直し。固定240pxだと2080px幅でも強く省略されていた)。
     他の列(グラフは画面幅で大きくなる)の残りまで。1366〜2080pxで表が枠に収まることを測って決めた式 */
  max-width: clamp(200px, calc(78vw - 870px), 640px);
}
#scan-table .product-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* ヒットしたモール側の商品名(Amazonの商品名の下に1行。はみ出した分はtitleのチップで全文。2026-10-14) */
#scan-table .mall-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: clamp(200px, calc(78vw - 870px), 640px);
  font-size: 0.85rem;
  color: #555;
}
#scan-table .mall-label {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 3px;
  background: #eef2f7;
  color: #456;
  font-size: 0.75rem;
}
/* 各行のKeepaグラフ(2026-10-14) */
#scan-table .chart-cell {
  padding: 2px;
}
/* グラフは高さを揃えて縮める(2026-10-16 UI見直し)。元の600x258のままだと行が264pxになり、下2/3が空白で
   1画面に2〜3件しか入らなかった。SVGなので縮めても崩れない。大きく見たいときはクリックでKeepaを開く */
#scan-table .chart-cell img {
  display: block;
  border: 1px solid #eee;
  /* 1366px幅で約109px、広い画面で128pxまで(2026-10-16 UI見直し3回目: 128〜150pxから85%に。価格の上下が読める下限として
     ユーザーの方針「今の高さの85%程度まで」に合わせた。大きく見たいときはカーソルを重ねると拡大、クリックでKeepa) */
  height: clamp(108px, 8vw, 128px);
  width: auto;
}
#scan-table .chart-empty {
  display: inline-block;
  font-size: 0.8rem;
}
#scan-table th.chart-legend {
  white-space: normal;
  font-weight: normal;
  font-size: 0.75rem;
  line-height: 1.4;
}
#scan-table th.chart-legend > span {
  white-space: nowrap;
  margin-right: 0.3rem;
}

/* 商品セルに「一時対象外」「対象外」ボタンを置く(2026-08-31、専用のアクション列を廃止してこちらに統合。ユーザー要望)。
   2026-10-16 UI見直し: td自体をflexにすると表のセルでなくなり行の下線が途中で切れていたので、中の
   .product-cell-innerをflexにする。ボタンは商品名の右(詳細へのリンクのすぐ横)から下段へ移し、商品名の幅を空けた。
   押し間違いを減らすため、行にカーソルがないときは薄く出す(消しはしない)。 */
#scan-table .product-cell-inner {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
#scan-table .product-cell-main {
  min-width: 0; /* flexアイテム内でproduct-titleのellipsisを効かせるために必要 */
}
/* 3回目: ボタンは下段からASINの行の右へ移した(行を詰めるため)。ASINのリンクとの間は0.6rem以上あける */
#scan-table .product-cell-actions {
  display: inline-flex;
  gap: 0.4rem;
  margin-left: auto;
  padding-left: 0.6rem;
  opacity: 0.45;
}
#scan-table tr:hover .product-cell-actions,
#scan-table .product-cell-actions:focus-within {
  opacity: 1;
}

/* ウォッチ星ボタン(2026-08-31追加)。枠・背景なしのアイコンのみのボタンにする。 */
.watch-star {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.watch-star img {
  display: block;
  width: 18px;
  height: 18px;
}
/* ウォッチON行はうっすら色を付けて目立たせる(ユーザー要望)。ホバーやKeepaグラフ表示との
   兼ね合いがあるため薄い黄色の背景のみに留める。 */
#scan-table tr.watched {
  background: #fff8e1;
}

/* Amazon・仕入れ上限・見込み利益・発見時刻は内容の幅がほぼ一定で、100%幅のテーブル内では
   右側に余白が余っていた。列幅を内容に合わせて絞り、浮いた分を商品名列(2列目、幅指定なし)
   に還元する(2026-08-31、ユーザー指摘)。他ショップは価格+警告バッジで幅が要るためやや広め。
   1列目はウォッチ列(星アイコン、同日追加)のため列番号は+1している。 */
/* 2026-10-16 UI見直し2回目: 仕入れ上限の列を見込み利益の列に入れて列が1つ減ったので、nth-childをやめてclassで指定する */
#scan-table th.col-watch {
  width: 2.2rem;
}
#scan-table th.col-amazon {
  /* 最低幅は1行に収める「📈順位 月○個/○人 ✓」(.rank-line、nowrap)で決まる */
  width: 140px;
}
#scan-table th.col-profit {
  width: 92px;
}
#scan-table th.col-other {
  /* 広い画面ほどショップ名を長く見せる(3回目。どの幅でも52%の行で省略されていた)。時刻列をなくして浮いた分も回した */
  width: clamp(190px, 14vw, 280px);
}

/* 除外商品ページ一覧: タイトルが長いと枠外・ボタン側まで広がっていたため、
   #scan-table .product-titleと同じ方針(折り返さず省略)で幅を頭打ちにする。 */
#excluded-urls-table .url-title {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  max-width: 480px;
}

/* 一時対象外一覧・対象外一覧: 商品名が長い場合に枠外まで広がらないよう、他の一覧と同じ方針で頭打ちにする。 */
#temp-excluded-table .product-title,
#dismissed-table .product-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

#asin-textarea {
  width: 100%;
  max-width: 600px;
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  font-family: monospace;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
.stats-box { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.9rem; margin-top: 0.5rem; }

#search-box { padding: 0.4rem 0.5rem; font-size: 0.85rem; border: 1px solid #ccc; border-radius: 4px; margin-right: 0.5rem; width: 220px; }
#sort-select { padding: 0.4rem 0.5rem; font-size: 0.85rem; border: 1px solid #ccc; border-radius: 4px; margin-right: 0.75rem; }
.csv-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.csv-controls a { text-decoration: none; }
#items-table th:first-child, #items-table td:first-child { width: 2rem; text-align: center; }

.hidden { display: none; }
#keepa-preview-box { margin: 0.75rem 0; padding: 0.6rem 0.8rem; background: #f7f7f7; border-radius: 4px; font-size: 0.85rem; }
#keepa-preview-box .filter-section { margin-bottom: 0.4rem; }
#keepa-preview-box .filter-section-title { font-weight: bold; }
#keepa-preview-box .warning { color: #b45309; }
#keepa-url-input { padding: 0.4rem 0.5rem; font-size: 0.85rem; border: 1px solid #ccc; border-radius: 4px; }
#keepa-name-input { padding: 0.3rem 0.4rem; font-size: 0.85rem; border: 1px solid #ccc; border-radius: 4px; }

/* textareaはtype="password"が使えずAPIキー等の追加登録欄が生表示になってしまうため、
   -webkit-text-securityで見た目上だけ伏字にする(Chrome/Edge/Safari対応。値自体はDOM上に
   保持されたままなので秘匿性としてはtype="password"と同程度、あくまで覗き見防止用)。 */
.secret-textarea { -webkit-text-security: disc; }

/* 商品名ホバー時のKeepa価格推移グラフプレビュー(public/keepaGraph.js参照)。
   画面右下に固定表示し、マウス操作を妨げないようpointer-eventsは無効にする。 */
#keepa-graph-tooltip {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  padding: 0.5rem;
  z-index: 9999;
  display: none;
  pointer-events: none;
}
#keepa-graph-tooltip.visible { display: block; }
#keepa-graph-tooltip img { display: block; max-width: 650px; max-height: 260px; }
#keepa-graph-tooltip .keepa-graph-tooltip-status {
  font-size: 0.85rem;
  color: #666;
  padding: 1.2rem 2rem;
  min-width: 200px;
  text-align: center;
}
/* 売れ行き判定の注記はAmazon列を広げないよう折り返す(2026-10-14) */
#scan-table .sell-note {
  white-space: normal;
  max-width: 200px;
}
#scan-table .sell-note .badge {
  white-space: nowrap;
}

/* ===== 大量ASINスキャン画面(scan.html、body.scan-page)の配置(2026-10-16 UI見直し) =====
   一覧の表は列が多いので、他の画面と共通のbodyの最大幅(1600px)を外して広い画面を使い切る。
   表が入りきらない幅では.table-scrollの枠の中だけ横スクロールする(ページ全体には出さない)。 */
body.scan-page { max-width: none; }
.scan-page .card { margin-bottom: 1rem; }
.scan-page h2 { white-space: nowrap; margin: 0; font-size: 1.2rem; }

/* 進捗は見出しと同じ行に小さく(3回目で進捗カードをやめた。下の「見出しの横」も参照) */
.scan-page .stats-box { margin-top: 0; gap: 0.2rem 0.65rem; font-size: 0.8rem; color: #666; }
.scan-page .stats-box strong { font-size: 0.9rem; color: #333; }
.source-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.15rem 1.5rem;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: #555;
}
.source-row { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px dotted #eee; }
.source-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.source-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 畳める欄(<details>)。カードごと畳むものは見出しをsummaryに入れる */
.scan-page details.fold > summary { cursor: pointer; color: #555; font-size: 0.85rem; }
.scan-page details.card.fold > summary { list-style-position: inside; }
.scan-page details.card.fold > summary h2 { display: inline; font-size: 1.05rem; color: #222; }
.scan-page details.card.fold[open] > summary { margin-bottom: 0.5rem; }
.scan-page .source-fold { margin-top: 0.35rem; }
.scan-page .note-fold { margin: 0.4rem 0 0; }
.scan-page .note-fold .note { margin: 0.4rem 0 0; }

/* ヒット一覧の見出し・絞り込み(1366px幅で見出しが縦に折れていたので、折り返せる段に分けた) */
.scan-page .hits-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.scan-page .sort-label { font-size: 0.85rem; color: #555; white-space: nowrap; }
.scan-page #sort-select { margin-left: 0.3rem; margin-right: 0; }
.scan-page .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.5rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: #f7f7f7;
  border-radius: 6px;
}
.scan-page .filter-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; }
.scan-page .filter-group .inline-check { margin-right: 0; }
.scan-page .filter-group-label { font-size: 0.82rem; color: #888; }
.scan-page .hits-card .table-scroll { margin-top: 0.4rem; }
/* Keepa検索条件の表: 長い条件名は折り返し、操作ボタンが枠の外に出ないようにする */
.scan-page #keepa-conditions-table td:first-child { white-space: normal; min-width: 14em; }
.scan-page .hits-card .table-scroll > table { margin-top: 0; }

/* 表の中身: 注記類は列の中で折り返し、列を押し広げないようにする */
#scan-table .amazon-cell,
#scan-table .other-cell { white-space: normal; }
#scan-table .amazon-cell .item-meta,
#scan-table .other-cell .item-meta { white-space: normal; }
#scan-table .badge { white-space: nowrap; }
#scan-table .warn-badges { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; }
#scan-table .price-line { white-space: nowrap; font-weight: 600; }
#scan-table .price-line .badge { font-weight: normal; }
/* 小さい行は列の中で折り返してよいが、「📈345位」「月300個・1人」「在庫 83点」のような塊の途中では折らない */
#scan-table .nw,
#scan-table .rank-line > span { white-space: nowrap; }
/* 正常系の印(在庫あり・今の価格で売れそう・値上がり定着など)は色付きの箱にせず小さな緑の文字にして、
   注意系(出品不可・FBA不可?・高騰・売れ行き悪い・最終価格など)の色付きバッジが埋もれないようにする */
#scan-table .badge.in_stock { background: none; padding: 0; color: #1e7e34; }
#scan-table .sell-note .badge.in_stock + .badge,
#scan-table .sell-note .badge + .badge { margin-left: 0.25rem; }
#scan-table .stock-shop { display: inline-block; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* 見込み利益は仕入れ判断の主役なので目立たせる */
#scan-table .profit-amount { font-weight: 700; font-size: 1.05rem; color: #1e7e34; }
#scan-table .profit-amount.profit-high { color: #0b5a1f; }

/* ===== 2026-10-16 UI見直し2回目 ===== */
/* 商品名は2行まで折り返す(1366pxで約15文字しか見えず、入数などが読めなかった)。行の高さはグラフで決まっているので、
   2行にしても行は高くならない。幅は仕入れ上限の列と時刻列の2行目をなくして浮いた分を回した */
#scan-table .product-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow-wrap: anywhere;
  max-width: clamp(280px, calc(78vw - 780px), 640px);
}
#scan-table .mall-title { max-width: clamp(280px, calc(78vw - 780px), 640px); }
/* Amazon列の2行目「📈345位 月300個/1人」は1行に収める(列の最低幅はこの行で決まる) */
#scan-table .amazon-cell .rank-line { white-space: nowrap; font-size: 0.78rem; }
#scan-table .sell-ok { color: #1e7e34; font-weight: 700; cursor: help; }
/* 見込み利益の色(scan.jsのrowVerdict。表示だけ): 緑=注意の印なし／橙=要注意／灰・取り消し線=出品不可 */
#scan-table .profit-amount.warn { color: #a3620a; }
#scan-table .profit-amount.ng { color: #999; text-decoration: line-through; font-weight: 600; }
/* 利益率20%以上は色の濃さでは見分けられなかったので、緑の行だけ薄い帯にする */
#scan-table .profit-amount.ok.profit-high { color: #1e7e34; background: #e6f4ea; padding: 0 0.3rem; border-radius: 3px; display: inline-block; }
#scan-table .verdict-reason { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
#scan-table .verdict-reason.warn { color: #a3620a; }
#scan-table .verdict-reason.ng { color: #b02a2a; }
#scan-table .ceiling-line { margin-top: 0.15rem; }
/* 要注意・出品不可の行は左端に細い色の線を引く(一目で行の状態が分かるように) */
#scan-table tr.row-warn > td:first-child { box-shadow: inset 3px 0 0 #e0a030; }
#scan-table tr.row-ng > td:first-child { box-shadow: inset 3px 0 0 #b0b0b0; }
/* 他ショップ列: 価格の下にモール＋ショップ名を常に出す */
#scan-table .other-price { white-space: nowrap; }
#scan-table .other-cell .shop-line { white-space: nowrap; }
#scan-table .shop-line .stock-shop { max-width: 9em; }
#scan-table .shop-line .mall-label {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 3px;
  background: #eef2f7;
  color: #456;
  font-size: 0.75rem;
  vertical-align: bottom;
}
#scan-table .cand-count { font-size: 0.8rem; cursor: help; }
/* 外の画面(Amazon・ショップ)に移るリンクには小さな↗を付けて、詳細画面へのリンク(商品名)と見分ける */
#scan-table a.ext::after { content: "↗"; font-size: 0.7em; margin-left: 0.1em; vertical-align: super; }

/* 見出しの横の「この画面について」(冒頭の説明を畳んだもの) */
.scan-page .page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 0 0 0.8rem; }
.scan-page .page-head h1 { margin: 0; }
.scan-page .about-fold { font-size: 0.85rem; }
.scan-page .about-fold[open] { flex-basis: 100%; }
.scan-page .about-fold .note { margin: 0.3rem 0 0; }
.scan-page .last-checked { font-size: 0.8rem; white-space: nowrap; margin-left: auto; cursor: help; }
.scan-page .last-checked + #refresh-btn { margin-left: 0; }
/* ヒット一覧の見出し: 絞り込みで隠れている件数・定期更新の知らせ・利益の色の凡例 */
.scan-page .hidden-note { font-size: 0.8rem; font-weight: normal; color: #888; margin-left: 0.3rem; }
.scan-page .pending-update {
  padding: 0.2rem 0.7rem;
  font-size: 0.82rem;
  background: #fff;
  color: #1a5fb4;
  border: 1px solid #1a5fb4;
  border-radius: 12px;
}
.scan-page .pending-update.has-new { background: #1a5fb4; color: #fff; }
.scan-page .note-row { display: flex; align-items: flex-start; gap: 0.4rem 1rem; }
.scan-page .note-row .note-fold { flex: 1 1 auto; min-width: 0; }
.scan-page .verdict-legend { font-size: 0.8rem; color: #888; white-space: nowrap; margin-top: 0.4rem; cursor: help; }
.scan-page .verdict-legend > span { margin-left: 0.4rem; font-weight: 600; }
.scan-page .legend-ok { color: #1e7e34; }
.scan-page .legend-warn { color: #a3620a; }
.scan-page .legend-ng { color: #b02a2a; }
.scan-page .filter-count { color: #777; font-size: 0.78rem; cursor: help; }
/* 件数と凡例が増えた分、1366pxでも絞り込みの段が1行に収まるよう間隔を詰める */
.scan-page .filter-bar { gap: 0.35rem 1rem; }
.scan-page .filter-group { gap: 0.2rem 0.6rem; }
.scan-page .verdict-legend > span { margin-left: 0.25rem; }
/* 表の見出しを固定する。1300px以上では表が枠に収まる(はみ出し0と測った)ので、枠の横スクロールを外して
   ページのスクロールに対してstickyを効かせる(1280px以下は今までどおり枠の中で横スクロール) */
@media (min-width: 1300px) {
  .scan-page .hits-card .table-scroll { overflow: visible; }
  #scan-table thead th { position: sticky; top: 0; background: #fff; z-index: 2; box-shadow: 0 1px 0 #ddd; }
}
/* Keepa検索条件の操作: <a>をボタンの見た目に、データを変える操作は「その他」に畳む */
.scan-page .link-btn {
  display: inline-block;
  border: 1px solid #333;
  border-radius: 4px;
  background: #fff;
  color: #222;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}
.scan-page .row-menu { display: inline-flex; align-items: center; vertical-align: middle; }
.scan-page .row-menu > summary { list-style: none; }
.scan-page .row-menu > summary::-webkit-details-marker { display: none; }
.scan-page .row-menu > summary::after { content: " ▾"; font-size: 0.7em; }
.scan-page .row-menu[open] > summary { background: #f2f2f2; }
.scan-page .row-menu-body { display: inline-flex; gap: 0.3rem; margin-left: 0.3rem; vertical-align: middle; }

/* ===== 2026-10-16 UI見直し3回目 ===== */
/* 見出しの行: 「商品サーチ 大量ASINスキャン」・この画面について・進捗の数字・登録元の内訳・最終チェック・更新を1行に */
.scan-page .page-head { align-items: center; gap: 0.3rem 0.8rem; margin-bottom: 0.6rem; }
.scan-page .page-head h1 { font-size: 1.4rem; white-space: nowrap; }
/* 1366px前後では1行に収めるため、添えた元の名前は出さない(h1のtitleとタブの題名には残す) */
@media (max-width: 1500px) { .scan-page .h1-sub { display: none; } }
.scan-page .h1-sub { font-size: 0.85rem; font-weight: normal; color: #888; margin-left: 0.5rem; }
.scan-page .page-head .source-fold { margin-top: 0; font-size: 0.8rem; }
.scan-page .page-head .source-fold[open] { flex-basis: 100%; order: 10; }
.scan-page .page-head .source-fold > summary { font-size: 0.8rem; }
/* 定期更新の知らせ: 出ているときだけ画面の下中央に固定する(下へスクロールしている間も新着・外れた行に気づけるように。
   右下だとグラフの列に重なる)。出す・隠すはscan.jsのcheckListChanges・hidePendingUpdateのまま */
.scan-page .pending-update:not(.hidden) {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 20;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
/* Amazon列: 正常系の「✓」は灰色に(緑は利益だけの色にする)。titleの判定と理由は今までどおり */
#scan-table .sell-ok { color: #999; font-weight: normal; }
/* 色は3つの意味に絞る: 赤=出品不可・橙=要注意の理由・緑=利益。それ以外の情報(Amazon本体あり・○円なら利益あり等)は灰色の文字 */
#scan-table .badge.unknown { background: none; padding: 0; color: #777; }
#scan-table .verdict-reason { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-top: 0.1rem; }
#scan-table .reason-chip {
  display: inline-block;
  padding: 0 0.3rem;
  border-radius: 3px;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: nowrap;
  cursor: help;
}
#scan-table .verdict-reason.warn .reason-chip { background: #fdeccb; color: #8a4b00; }
#scan-table .verdict-reason.ng .reason-chip { background: #fbe7e7; color: #b02a2a; }
#scan-table .verdict-reason .reason-more { background: none !important; color: #8a4b00; text-decoration: underline dotted; }
/* 出品不可: 利益は赤の取り消し線、行は灰色の背景・薄い文字・薄いグラフで「買えない」と一目で分かるように */
#scan-table .profit-amount.ng { color: #b02a2a; }
#scan-table tr.row-ng > td { background: #f7f7f7; color: #888; }
#scan-table tr.row-ng .chart-cell img { opacity: 0.5; }
#scan-table tr.row-ng > td:first-child { box-shadow: inset 4px 0 0 #d9534f; }
#scan-table tr.row-warn > td:first-child { box-shadow: inset 4px 0 0 #e0a030; }
/* 商品セル: ASINの行に「○時間前」と操作ボタンを並べる */
#scan-table .asin-line { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
#scan-table .asin-line .time-main { color: #666; cursor: help; white-space: nowrap; }
#scan-table .asin-line .time-main::before { content: "・"; color: #bbb; margin-right: 0.1rem; }
#scan-table .product-cell-inner { gap: 0; }
/* 商品名の幅: 時刻列をなくし、グラフ・Amazon列が細くなった分を回す(1366〜1920pxで表が枠に収まることを測って決めた式) */
#scan-table .product-title,
#scan-table .mall-title { max-width: clamp(280px, calc(78vw - 690px), 720px); }
/* 他ショップ列: ショップ名は列の幅いっぱいまで出す(9em固定をやめた) */
#scan-table .other-cell .shop-line { display: flex; align-items: center; min-width: 0; }
#scan-table .shop-line .mall-label { flex: 0 0 auto; }
/* 表の列幅は中身の最小幅で決まる(min-width:0だけでは列が広がる)ので、列の幅(col-other)からモール名の分を引いた上限を付ける */
#scan-table .shop-line .stock-shop { flex: 0 1 auto; min-width: 0; max-width: calc(clamp(190px, 14vw, 280px) - 4.6em); }
/* グラフはカーソルを重ねると拡大する(縦を85%に詰めた代わり。マウスを行の上で動かしただけで開かないよう少し遅らせる) */
#scan-table .chart-cell a { display: block; }
#scan-table .chart-cell img { transition: transform 0.12s ease 0s; transform-origin: right center; background: #fff; }
#scan-table .chart-cell a:hover img {
  position: relative;
  z-index: 5;
  transform: scale(1.9);
  transition-delay: 0.3s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* 定期更新で一覧から外れた行(消すと行がずれるので、薄くして印だけ付ける。「表示する」で描き直すと消える) */
#scan-table tr.row-gone > td { opacity: 0.4; }
#scan-table tr.row-gone .product-titles::before {
  content: "一覧から外れました";
  align-self: flex-start;
  font-size: 0.72rem;
  color: #fff;
  background: #777;
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-bottom: 0.1rem;
}
/* 「表示する」で描き直したときに新しく入った行(次に描き直すまで) */
/* 左端の線は要注意・出品不可の線(1列目)と重ならないよう、商品セルの左に引く */
#scan-table tr.is-new > td.product-cell { box-shadow: inset 3px 0 0 #1a5fb4; }
#scan-table tr.is-new .product-titles::before {
  content: "新";
  align-self: flex-start;
  font-size: 0.72rem;
  color: #fff;
  background: #1a5fb4;
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-bottom: 0.1rem;
}
/* 新しく入った行が後で一覧から外れたときは「外れた」を優先する */
#scan-table tr.row-gone.is-new .product-titles::before { content: "一覧から外れました"; background: #777; }

/* ===== 2026-10-16 UI見直し4回目 ===== */
/* グラフの拡大: 絵はいつもカーソルの判定を持たない(元の大きさの<a>だけが判定を持つ)。拡大した絵が他ショップのリンクや
   上下の行のグラフに重なってクリックを奪い、別の商品のKeepaが開いていたため。元の範囲を出ると拡大は閉じる。
   (拡大中だけ判定を外すと、閉じる途中の絵がまたカーソルを拾って開き直すので、いつも外す。クリック・titleは<a>が受ける)
   スクロール中にカーソルの下を通る行が次々に開かないよう、開く遅れを0.3秒→0.45秒に */
#scan-table .chart-cell img { pointer-events: none; }
#scan-table .chart-cell a:hover img { transition-delay: 0.45s; }
/* 1行目のグラフを拡大しても固定見出しの下にもぐる(見出しは拡大(z-index:5)より上) */
@media (min-width: 1300px) {
  #scan-table thead th { z-index: 6; }
}
/* 0件・読み込み中の1行(見出しだけが残って「0件」に見えないように) */
#scan-table .empty-row td { padding: 2rem 1rem; text-align: center; color: #777; white-space: normal; }
/* 「ウォッチのみ」で、候補から外れたウォッチ中の商品の前の見出し(2026-10-20)。下の行は少し薄くして候補と見分ける */
#scan-table .outside-divider td { padding: 0.6rem 1rem; background: #eceff1; color: #455a64; font-weight: 600; border-top: 2px solid #b0bec5; }
#scan-table tr.watched-outside > td { opacity: 0.75; }
/* いちばん安いショップの在庫0(仕入れられない)。要注意と同じ橙の文字 */
#scan-table .stock-zero { color: #a3620a; font-weight: 600; cursor: help; }
/* データを変える2つのボタンの間をあけ、少し押しやすく(行の高さはグラフで決まっているので増えない) */
#scan-table .product-cell-actions { gap: 0.7rem; }
#scan-table .product-cell-actions .tiny-btn { padding: 0.22rem 0.55rem; }
/* 文字の大きさを3段にそろえる: 主14px(商品名・価格・見出し)・添え12.8px・札11.5px(利益だけは主役なので大きいまま) */
#scan-table .item-meta,
#scan-table .mall-title,
#scan-table .amazon-cell .rank-line { font-size: 0.8rem; }
#scan-table td { font-variant-numeric: tabular-nums; }
/* 理由の札は利益の列の最後(上限の下)に置いたので、上と少しあける */
#scan-table .verdict-reason { margin-top: 0.15rem; }
/* ウォッチ列は幅で変わらないよう固定し、浮いた分は商品列へ */
/* 幅は中身(星18px)＋左右の余白(0.5rem×2)で約34px */
#scan-table th.col-watch { width: 18px; min-width: 18px; max-width: 18px; }
/* Keepa検索条件: 状態は名前の横に出す。URLの入力欄とプレビューのボタンの高さをそろえる */
.scan-page #keepa-conditions-table td:first-child .badge { margin-left: 0.3rem; }
.scan-page #keepa-url-input { padding: 0.58rem 0.6rem; }
/* 「仕入上限」「月○個 出品○」で利益・Amazon列が少し広がった分(約20px)、商品名の上限を詰める(1366〜1920pxで表のはみ出し0を測って決めた) */
#scan-table .product-title,
#scan-table .mall-title { max-width: clamp(280px, calc(78vw - 712px), 720px); }
/* 広い画面(1700px以上)では商品列が余るので、グラフを128px→最大140pxに大きくする(ユーザー要望「グラフの幅を大きく」。
   1920pxで行は約146px、上端で入る行は4のまま) */
@media (min-width: 1700px) {
  #scan-table .chart-cell img { height: clamp(128px, 7.3vw, 140px); }
}

/* ===== 2026-10-16 UI見直し5回目 ===== */
/* 「表示する」で描き直したときに内容が変わった行(「新」と同じ要領、色は灰色。次に描き直すまで) */
#scan-table tr.is-updated > td.product-cell { box-shadow: inset 3px 0 0 #999; }
#scan-table tr.is-updated .product-titles::before {
  content: "更新";
  align-self: flex-start;
  font-size: 0.72rem;
  color: #fff;
  background: #888;
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-bottom: 0.1rem;
}
#scan-table tr.row-gone.is-updated .product-titles::before { content: "一覧から外れました"; background: #777; }
/* ヒット以外の行の状態の札(ASINの横)と、エラーの文(灰色・2行まで。全文はtitle) */
#scan-table .status-chip {
  display: inline-block;
  padding: 0 0.3rem;
  border-radius: 3px;
  background: #eee;
  color: #555;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: nowrap;
}
#scan-table .err-note {
  color: #777;
  font-size: 0.8rem;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: help;
}
/* グラフの拡大の向き(scan.jsで画面の下端・固定見出しに近い行だけclassを付ける) */
#scan-table .chart-cell a.zoom-up img { transform-origin: right bottom; }
#scan-table .chart-cell a.zoom-down img { transform-origin: right top; }
/* 0件・読み込み中: 列の幅を1行のcolspanに任せると「商品」が細くグラフの列が広がるので、商品の列に幅を回す */
#scan-table.is-empty th.col-product { width: 45%; }

/* 目標価格のトラッキング(target.html) */
.target-status { margin: 0.5rem 0; font-size: 0.9rem; line-height: 1.7; }
.target-on { color: #1e7e34; }
.target-error { color: #b02a2a; font-size: 0.85rem; }
.target-notify { font-size: 0.85rem; color: #555; display: inline-flex; gap: 0.5rem; align-items: center; }
#tracking-input { width: 100%; box-sizing: border-box; font-family: monospace; padding: 0.4rem; margin-bottom: 0.5rem; }
.target-scroll { overflow-x: auto; }
.target-title { white-space: normal; min-width: 220px; max-width: 360px; }
.target-thumb { width: 48px; height: 48px; object-fit: contain; }
.target-price { width: 6.5rem; padding: 0.25rem 0.4rem; }
tr.target-hit { background: #eaf7ee; }
tr.target-disabled { opacity: 0.5; }

/* 一時対象外・対象外のメモの欄(2026-10-26) */
#scan-table .product-cell-actions.noting { opacity: 1; }
.exclude-note-box { display: inline-flex; gap: 0.4rem; align-items: center; }
.exclude-note-box input { width: 16rem; max-width: 50vw; font-size: 0.82rem; padding: 0.2rem 0.4rem; }
#dismiss-note-box { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
#dismiss-note-box input { flex: 1; max-width: 28rem; }

/* 急上昇の候補のページ(scan.html?view=trend)。登録の欄・登録元の内訳は出さない(2026-10-26) */
.trend-view details[data-fold-key='manualImport'], .trend-view details[data-fold-key='keepaConditions'], .trend-view .source-fold { display: none; }
.trend-note { margin: 0.2rem 0 0.4rem; }

/* JANのバーコード(public/barcode.js)。読み取れるよう、画面の色によらず白地に黒 */
.jan-barcodes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0; }
.jan-barcode { background: #fff; padding: 4px; border: 1px solid #e5e5e5; border-radius: 4px; line-height: 0; }
.jan-barcode svg { display: block; width: 190px; height: auto; }

/* ===================================================================================================
   ここから下はコンテスト版の追加（v0.10.0）。上は Zero3 の style.css をそのまま写したもの（変えない）。
   Zero3 の見た目（表・ボタン・色・文字の大きさ）に合わせ、コンテストにしかない部品（★の人・購入中・Yahoo!未精査・
   Keepa の残り・残り時間・お気に入りの表・検索・管理）だけを足す。
   =================================================================================================== */
.hidden { display: none !important; }
a { color: #1a5fb4; }

/* ナビ: Zero3 と同じボタンの段に、右へ Keepa の残り・Yahoo!・残り時間・名前・ログアウトの段を足す */
.site-nav { position: relative; }
.site-nav-status { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; font-size: 0.8rem; }
.site-nav-status .who { font-weight: 600; margin-left: auto; }
.keepa-pill { border: 1px solid #ddd; border-radius: 999px; padding: 0.1rem 0.6rem; color: #444; background: #fafafa; white-space: nowrap; }
.keepa-pill.warn { background: #fdeccb; border-color: #e0a030; color: #8a4b00; }
.keepa-pill .sub { color: #777; }
button.tiny, .tiny-btn { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
button.fav-on { background: #ffc72c; border-color: #a3760a; color: #222; }
button.danger { background: #b02a2a; border-color: #8a1c13; }
input, select, textarea { font-family: inherit; font-size: 0.88rem; padding: 0.3rem 0.4rem; border: 1px solid #ccc; border-radius: 4px; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.grow { flex: 1 1 auto; }
label.inline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: #555; }
.field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: #555; }
.guide { background: #fffbea; border: 1px solid #e0c341; border-radius: 6px; padding: 0.5rem 0.8rem; font-size: 0.85rem; }
details.fold > summary { cursor: pointer; color: #555; font-size: 0.85rem; }
.help-q { display: inline-block; width: 1.1em; height: 1.1em; line-height: 1.1em; text-align: center; border-radius: 50%; background: #eee; color: #555; font-size: 0.75rem; cursor: help; }

/* 印（Zero3 の色: 橙=要注意・赤=出品不可/強い・緑=良い・灰=情報） */
.badge.warn { background: #fdeccb; color: #8a4b00; }
.badge.danger { background: #fbe7e7; color: #b02a2a; font-weight: 600; }
.badge.buying { background: #1a5fb4; color: #fff; }
.badge.near { background: #fbe7e7; color: #b02a2a; }
.badge.unverified { background: #fdeccb; color: #8a4b00; border: 1px dashed #c48f00; }
.badge.src-asin, .badge.src-keepa, .badge.src-zero2 { background: #eef2f7; color: #456; }
.profit-pos { color: #1e7e34; font-weight: 700; }
.profit-neg { color: #b02a2a; font-weight: 700; }

/* 一覧（Zero3 の #scan-table）に足したもの */
#scan-table .fav-who { font-size: 0.72rem; color: #8a6d00; white-space: nowrap; }
#scan-table tr.is-hidden > td { opacity: 0.45; }
#scan-table tr.is-buying > td.product-cell { box-shadow: inset 3px 0 0 #1a5fb4; }
#scan-table .chart-cell .chart-fallback { display: inline-flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; }
#scan-table .chart-cell .chart-link { font-size: 0.72rem; }
#scan-table .near-chip { display: inline-block; padding: 0 0.3rem; border-radius: 3px; background: #fbe7e7; color: #b02a2a; font-size: 0.72rem; }
#scan-table .monthly-btn { margin-left: 0.3rem; }
.scan-page .more-filters > summary { font-size: 0.82rem; color: #555; }
.scan-page .more-filters[open] { flex-basis: 100%; }
.scan-page .more-filters .more-body { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; margin-top: 0.3rem; font-size: 0.82rem; }
.scan-page .more-filters input[type="number"] { width: 6em; }
.scan-page .more-filters input[type="search"] { width: 14em; }
.scan-page .more-btn-row { text-align: center; margin: 0.6rem 0; }

/* 詳細（Zero3 の scan-detail）に足したもの */
.detail-title { margin: 0 0 0.3rem; font-size: 1.2rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.detail-chart img { display: block; max-width: 100%; height: auto; border: 1px solid #eee; }
.pack-edit input { width: 4.5em; }
.mp-block ul { margin: 0.2rem 0; padding-left: 1.2rem; font-size: 0.85rem; }

/* お気に入り・検索・管理（Zero3 の表・ボタン・カードの見た目のまま） */
.totals { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.total-box { border: 1px solid #ddd; border-radius: 8px; padding: 0.4rem 0.8rem; min-width: 9em; }
.total-box .label { font-size: 0.78rem; color: #666; }
.total-box .value { font-size: 1.25rem; font-weight: 700; }
.total-box.main { border-color: #1e7e34; background: #e6f4ea; }
.total-box.warn-box { border-color: #b02a2a; background: #fbe7e7; }
.thumb-cell .thumb { width: 40px; height: 40px; }
.title-cell { white-space: normal; max-width: 26em; }
.title-cell .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
td.num, th.num { text-align: right; }
tr.is-fav { background: #fff8e1; }
tr.is-buying { outline: 2px solid #1a5fb4; outline-offset: -2px; }
.fav-table td { white-space: normal; }
.fav-table input[type="number"] { width: 5em; text-align: right; padding: 0.2rem 0.25rem; }
.fav-table select { max-width: 8em; }
.fav-table input.qty { width: 4.2em; font-weight: 700; }
.fav-table input.pack { width: 3.6em; }
.fav-table input.manual { border-style: dashed; border-color: #1a5fb4; }
.fav-table input.over { border-color: #b02a2a; background: #fbe7e7; color: #8a1c13; }
.fav-table textarea { min-width: 8em; width: 100%; height: 2.2em; margin-top: 0.2rem; }
.fav-table .meta { font-size: 0.74rem; color: #888; }
.fav-table .c-warn { font-size: 0.8rem; }
.fav-table .c-hint { display: block; white-space: normal; max-width: 9em; font-size: 0.74rem; text-align: right; }
.fav-table .actions { white-space: normal; min-width: 7.5em; }
.fav-table .actions button { display: block; width: 100%; margin-bottom: 0.2rem; }
.fav-table td.chart-cell { padding: 2px; }
.fav-table td.chart-cell img { display: block; height: 96px; width: auto; border: 1px solid #eee; }
.jobs-table td { white-space: nowrap; }
.progress { height: 6px; background: #eee; border-radius: 3px; min-width: 80px; overflow: hidden; }
.progress > div { height: 100%; background: #1e7e34; }
.progress > div.pw0 { width: 0%; }
.progress > div.pw1 { width: 10%; }
.progress > div.pw2 { width: 20%; }
.progress > div.pw3 { width: 30%; }
.progress > div.pw4 { width: 40%; }
.progress > div.pw5 { width: 50%; }
.progress > div.pw6 { width: 60%; }
.progress > div.pw7 { width: 70%; }
.progress > div.pw8 { width: 80%; }
.progress > div.pw9 { width: 90%; }
.progress > div.pw10 { width: 100%; }
textarea { width: 100%; box-sizing: border-box; }
.card h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.card > details.fold { margin-bottom: 0.4rem; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.8rem; font-size: 0.85rem; }
dl.kv dt { color: #666; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 50; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 2rem 0.6rem; }
.modal { background: #fff; border-radius: 8px; max-width: 900px; width: 100%; padding: 1rem 1.1rem; }
.modal-top { display: flex; justify-content: flex-end; margin-bottom: 0.3rem; }
.pending-update { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 40; }
#toast-box { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: 0.4rem; max-width: 90vw; }
.toast { background: #222; color: #fff; padding: 0.5rem 0.9rem; border-radius: 6px; font-size: 0.85rem; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.toast.error { background: #b02a2a; }
.toast.ok { background: #1e7e34; }
.toast-action { margin-left: 0.6rem; color: #222; }
.login-box { max-width: 340px; margin: 4rem auto; }
.login-box input { width: 100%; margin-bottom: 0.6rem; padding: 0.55rem; }
.login-box button { width: 100%; padding: 0.6rem; }
.flag-kinds { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.8rem; }
.cards td { white-space: normal; }

/* スマホ（375px）: Zero3 の作りのまま、表を1件1枚に積む。グラフは幅いっぱい */
@media (max-width: 760px) {
  *, *::before, *::after { box-sizing: border-box; }
  body { width: auto; margin: 0.5rem auto; padding: 0 0.6rem; font-size: 14px; }
  .site-nav { margin-bottom: 0.6rem; }
  .site-nav-status .who { margin-left: 0; }
  .scan-page .page-head h1 { font-size: 1.2rem; }
  .scan-page h2 { font-size: 1.05rem; white-space: normal; }
  .scan-page .note-row { flex-wrap: wrap; }
  .scan-page .verdict-legend { white-space: normal; }
  .scan-page .hits-card { padding: 0.6rem; }
  .scan-page .hits-card .table-scroll { overflow: visible; }
  #scan-table, #scan-table tbody, #scan-table tr, #scan-table td { display: block; width: 100%; }
  #scan-table thead { display: none; }
  #scan-table tr { position: relative; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 0.6rem; padding: 0.4rem 0.5rem 0.4rem 2rem; }
  #scan-table td { border: none; padding: 0.15rem 0; white-space: normal; }
  #scan-table td:first-child { position: absolute; left: 0.45rem; top: 0.55rem; width: auto; }
  #scan-table .product-title, #scan-table .mall-title { max-width: none; }
  #scan-table .product-link { min-width: 0; align-items: flex-start; }
  #scan-table .product-titles { min-width: 0; flex: 1 1 auto; }
  .scan-page .sort-label { white-space: normal; max-width: 100%; }
  .scan-page #sort-select { max-width: 100%; margin-left: 0; }
  .scan-page .hits-card { overflow: hidden; }
  #scan-table .asin-line { flex-wrap: wrap; }
  #scan-table .product-cell-actions { opacity: 1; margin-left: 0; padding-left: 0; }
  #scan-table .amazon-cell .rank-line, #scan-table .price-line, #scan-table .other-price, #scan-table .other-cell .shop-line { white-space: normal; }
  #scan-table .shop-line .stock-shop { max-width: 60vw; }
  #scan-table .chart-cell img { width: 100%; height: auto; }
  #scan-table .chart-cell a:hover img { transform: none; }
  .item-card-head { flex-wrap: wrap; }
  .detail-thumb { width: 72px; height: 72px; }
  .item-meta, .mp-title, .candidate-row { white-space: normal; }
  .candidate-row { width: auto; flex-wrap: wrap; }
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 0.6rem; padding: 0.4rem 0.5rem; }
  table.cards td { border: none; padding: 0.15rem 0; text-align: left !important; }
  table.cards td[data-label]::before { content: attr(data-label) "："; color: #888; font-size: 0.78rem; margin-right: 0.3rem; }
  table.cards td.title-cell { max-width: none; }
  table.cards td.thumb-cell { float: left; width: auto; margin-right: 0.5rem; }
  table.cards tr::after { content: ""; display: block; clear: both; }
  .fav-table td.chart-cell img { width: 100%; height: auto; }
  .fav-table input[type="number"] { width: 7em; }
  .total-box { min-width: 45%; }
  dl.kv { grid-template-columns: 1fr; }
}

/* v0.12.0: 端末の名前を聞く欄（全員で同じ ID のとき） */
.name-modal { max-width: 420px; }
.name-modal input { width: 100%; box-sizing: border-box; margin: 0.4rem 0 0.6rem; padding: 0.5rem; font-size: 1rem; }

/* v0.14.0: 詳細の「仕入れる」 */
.buy-block { background: #f7fbf7; }
.buy-form { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: flex-end; }
.buy-form input { width: 7.5em; font-size: 1rem; padding: 0.35rem 0.4rem; }
.buy-form select { max-width: 22em; }
.buy-calc { margin: 0.5rem 0; font-size: 0.9rem; white-space: normal; }
@media (max-width: 760px) {
  .buy-form .field { flex: 1 1 45%; }
  .buy-form input, .buy-form select { width: 100%; max-width: none; box-sizing: border-box; }
  .buy-form .buy-shop { flex-basis: 100%; }
}