:root {
  --bg: #f7f7f8;
  --fg: #1b1b1f;
  --sub: #55555f;
  --accent: #0b6bcb;
  --amazon: #ff9900;
  --border: #d8d8dd;
  --danger: #b3261e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Sans", sans-serif;
  font-size: 17px; line-height: 1.6;
}
main { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }
.screen { display: none; }
.screen.active { display: block; }
h1, h2 { font-size: 1.3rem; }
.hint { color: var(--sub); font-size: 0.9rem; }
.error { color: var(--danger); font-weight: 600; }

/* 手袋のまま押せるよう 56px 以上 */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; margin: 12px 0; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--fg); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:disabled { opacity: 0.4; }
.btn-amazon {
  background: var(--amazon); border-color: var(--amazon); color: #1b1b1f;
  font-size: 1.1rem; min-height: 64px;
}
.btn-back { background: transparent; border: none; color: var(--sub); }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.thumb { position: relative; }
.thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.thumb button {
  position: absolute; top: -6px; right: -6px; width: 28px; height: 28px;
  border-radius: 50%; border: none; background: #1b1b1f; color: #fff; font-size: 16px;
}

.category { margin: 0; color: var(--sub); }
.model { font-size: 1.5rem; font-weight: 700; margin: 4px 0; word-break: break-all; }
.meta { color: var(--sub); font-size: 0.85rem; margin: 0 0 12px; }
.source-estimate { color: var(--danger); font-weight: 600; }
.next-action {
  background: #fff4d6; border-left: 4px solid var(--amazon);
  padding: 12px; border-radius: 4px;
}
.candidate {
  display: block; width: 100%; text-align: left; margin: 8px 0; padding: 14px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.candidate .model { font-size: 1.1rem; margin: 0; }
.candidate .reason { display: block; color: var(--sub); font-size: 0.85rem; }
.field { display: block; margin: 12px 0; font-size: 0.9rem; color: var(--sub); }
textarea, input[type="text"] {
  width: 100%; margin-top: 6px; padding: 12px; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 8px;
}
.manual-confirm { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }

#overlay {
  position: fixed; inset: 0; background: rgba(255, 255, 255, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#overlay[hidden] { display: none; }
.spinner {
  width: 44px; height: 44px; border: 4px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ドラッグ&ドロップ領域。PC（マウス操作）でのみ見せる */
.dropzone { display: none; }
@media (pointer: fine) {
  .dropzone {
    display: block; margin: 12px 0; padding: 24px 16px;
    border: 2px dashed var(--border); border-radius: 12px;
    text-align: center; color: var(--sub); font-size: 0.9rem;
  }
  .dropzone.over { border-color: var(--accent); background: #eaf2fc; color: var(--accent); }
}
kbd {
  padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; font-family: inherit; font-size: 0.85em;
}

/* 仕様表。交換品が合うかを現場で判断するための情報 */
.specs {
  width: 100%; margin: 12px 0; border-collapse: collapse;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; font-size: 0.95rem;
}
.specs caption {
  caption-side: top; text-align: left; padding: 0 0 6px;
  color: var(--sub); font-size: 0.85rem;
}
.specs th, .specs td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-top: 1px solid var(--border);
}
.specs tr:first-child th, .specs tr:first-child td { border-top: none; }
.specs th { width: 40%; color: var(--sub); font-weight: 600; background: #fafafb; }
.specs td { font-weight: 600; word-break: break-all; }

.missing {
  margin: 12px 0; padding: 12px; border-radius: 8px;
  background: #fdf3f2; border-left: 4px solid var(--danger);
  font-size: 0.9rem;
}
.missing p { margin: 0 0 4px; font-weight: 600; color: var(--danger); }
.missing ul { margin: 0; padding-left: 1.2em; color: var(--fg); }

.candidate .spec-summary {
  display: block; margin: 2px 0; color: var(--fg); font-size: 0.9rem;
}

/* 現場で測れば確定できる寸法。銘板探しより早いことが多い */
.measure {
  margin: 12px 0; padding: 12px; border-radius: 8px;
  background: #eef7ee; border-left: 4px solid #2e7d32; font-size: 0.9rem;
}
.measure p { margin: 0 0 4px; font-weight: 600; color: #2e7d32; }
.measure ul { margin: 0; padding-left: 1.2em; }

/* 候補の根拠バッジ */
.match {
  display: inline-block; margin-bottom: 6px; padding: 2px 8px;
  border-radius: 999px; font-size: 0.75rem; font-weight: 700;
}
.match-exact { background: #e3f2e5; color: #1b5e20; }
.match-successor { background: #e3edfa; color: #0b4a8f; }
.match-compatible { background: #fff4d6; color: #8a5a00; }
.match-guess { background: #efeff2; color: #55555f; }

.btn-google { gap: 8px; }
.gicon { font-size: 1.2rem; }
.google-status {
  margin: -4px 0 12px; padding: 10px 12px; border-radius: 8px;
  background: #eef2f7; color: var(--sub); font-size: 0.9rem;
}
.google-status[hidden] { display: none; }
.google-status.error { background: #fdf3f2; color: var(--danger); font-weight: 600; }

/* Googleフォトの選択画面へのリンク。ポップアップと違いブロックされない */
.picker-link {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; margin: 4px 0 8px; padding: 0 16px;
  border-radius: 12px; background: var(--accent); color: #fff;
  font-weight: 700; text-decoration: none;
}
.picker-note { display: block; font-size: 0.85rem; }

.series {
  margin: 0 0 8px; padding: 6px 10px; display: inline-block;
  border-radius: 6px; background: #eef2f7; color: var(--fg);
  font-size: 0.95rem; font-weight: 600;
}

/* 部品だけの交換で済むケース。設備まるごと買うより安く早い */
.parts {
  margin: 12px 0; padding: 12px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border);
}
.parts > p { margin: 0 0 8px; font-weight: 700; font-size: 0.9rem; }
.parts ul { margin: 0; padding: 0; list-style: none; }
.parts li {
  padding: 10px 0; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.parts li:first-child { border-top: none; }
.part-name { font-weight: 700; }
.part-model { font-family: ui-monospace, monospace; color: var(--accent); }
.part-note { width: 100%; color: var(--sub); font-size: 0.85rem; }
.part-link { margin-left: auto; color: var(--accent); font-size: 0.85rem; }

.advice {
  margin: 12px 0; padding: 12px; border-radius: 8px;
  background: #f3f0fa; border-left: 4px solid #6b4fbb;
}
.advice p { margin: 0 0 4px; font-weight: 700; color: #4b338f; font-size: 0.9rem; }

.part-fits {
  padding: 1px 6px; border-radius: 4px; background: #fff4d6;
  color: #8a5a00; font-size: 0.78rem; font-weight: 700;
}

.model-used {
  margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: #efeff2; color: var(--sub); font-size: 0.72rem;
}

/* 「今ついているもの」と「これを買う」を視覚的に分ける。
   ここを混同させたのが最初の設計ミスだった */
.block-label {
  margin: 0 0 6px; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--sub);
}
.existing {
  margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px; background: #eeeef1;
}
.existing .model { font-size: 1.15rem; margin: 2px 0; }
.existing .meta { margin: 0; }
.buy { margin: 0 0 16px; }
.buy > .block-label { color: var(--accent); font-size: 0.85rem; }
.buy-card {
  padding: 14px; border-radius: 12px;
  background: #fff; border: 2px solid var(--accent);
}
.buy-card .model { font-size: 1.35rem; margin: 4px 0; }
.buy-card .spec-summary { margin: 0 0 6px; font-size: 0.9rem; }
.buy-card .reason { margin: 4px 0 0; color: var(--sub); font-size: 0.85rem; }
.compat {
  margin: 6px 0 0; padding: 8px 10px; border-radius: 6px;
  background: #eaf2fc; color: #0b4a8f; font-size: 0.88rem; font-weight: 600;
}
.caution {
  margin: 6px 0 0; padding: 8px 10px; border-radius: 6px;
  background: #fdf3f2; color: var(--danger); font-size: 0.88rem; font-weight: 600;
}
.status {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; vertical-align: middle;
}
.status-gone { background: #fdd8d5; color: #8c1d18; }
.status-live { background: #e3f2e5; color: #1b5e20; }

/* 選択肢としての買うカード */
.candidate { padding: 0; border: none; background: none; margin: 8px 0; }
.candidate .buy-card { border-color: var(--border); }
.candidate:hover .buy-card { border-color: var(--accent); }

/* 結果の保存 */
.downloads { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.downloads[hidden] { display: none; }
.download-row { display: flex; gap: 10px; }
.btn-sub { font-size: 0.95rem; min-height: 48px; margin: 4px 0; }

/* カード内の購入ボタン。別タブで開くので候補を見比べられる */
.btn-card { min-height: 48px; margin: 10px 0 0; font-size: 0.95rem; }
.candidate { display: block; }

/* 前回の続きから再開する案内 */
.resume {
  margin: 0 0 16px; padding: 14px;
  border-radius: 12px; background: #fff8e6; border: 1px solid #f0d68a;
}
.resume[hidden] { display: none; }
.resume-title { margin: 0; font-weight: 700; }
.resume-detail { margin: 4px 0 8px; color: var(--sub); font-size: 0.9rem; }
.resume-actions { display: flex; gap: 10px; align-items: center; }
.resume-actions .btn { margin: 0; min-height: 48px; }

/* よく使う指定をタップで入れられるように。現場で文字を打つのは面倒 */
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.preset {
  padding: 8px 14px; min-height: 40px;
  border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--fg); font-size: 0.9rem; cursor: pointer;
}
.preset.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 他店の価格。Amazon の価格は外から取れないので、こちらは比較材料 */
.prices { margin-top: 10px; }
.prices:empty { display: none; }
.price-label { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; color: var(--sub); }
.prices ul { margin: 0; padding: 0; list-style: none; }
.prices li { border-top: 1px solid var(--border); }
.prices li:first-child { border-top: none; }
.prices a {
  display: block; padding: 10px 2px; text-decoration: none;
  color: var(--fg); min-height: 44px;
}
.price-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.price-name {
  display: block; margin-top: 2px; color: var(--sub); font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.price-amount { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.price-shop { color: var(--sub); font-size: 0.85rem; }
.price-note { margin: 4px 0 0; color: var(--sub); font-size: 0.8rem; }
.tag {
  padding: 1px 6px; border-radius: 4px; background: #efeff2;
  color: var(--sub); font-size: 0.72rem; font-weight: 700;
}
.tag-free { background: #e3f2e5; color: #1b5e20; }
.tag-ref { background: #fff4d6; color: #8a5a00; }

.tag-other { background: #fdd8d5; color: #8c1d18; }

/* これまでの調査 */
.record {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.record:first-child { border-top: none; }
.record-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none;
  background: #efeff2;
}
.record-thumb-none {
  display: flex; align-items: center; justify-content: center;
  color: var(--sub); font-size: 0.65rem; text-align: center;
}
.record-body { flex: 1; min-width: 0; }
.record-title { display: block; font-weight: 700; word-break: break-all; }
.record-meta { display: block; color: var(--sub); font-size: 0.8rem; }
.record-note {
  display: block; color: var(--sub); font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.record-open { flex: none; width: auto; padding: 0 14px; margin: 0; min-height: 44px; }
.record-delete {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--sub); font-size: 18px;
}