/*
 * 商品カード（furusato / gadget 用）。
 * 前提: 既存の style.css（--paper --paper-raise --ink --ink-soft --rule --accent）を先に読み込むこと。
 *   <link rel="stylesheet" href="/style.css" />
 *   <link rel="stylesheet" href="/product-card.css" />
 * 方針: サイトの「帳簿(ledger)」トーンを守り、影と大きな角丸は使わない。
 *       罫線 + ジャンル色の上罫(3px)でカードを区切る。
 * 色の組み合わせは contrast.mjs で WCAG AA を実測済み（明/暗とも）。
 */

:root {
  --pc-card: #f8f9f4;      /* カード面（紙より一段明るい） */
  --pc-media-bg: #ffffff;  /* 画像枠の地。商品写真は白背景が多いので固定 */
  --pc-warn: #8a3b12;      /* 「惜しい点」ラベル専用 */
  --pc-btn-ink: #ffffff;   /* ボタン文字 */
  --pc-pr-bg: #211f1a;     /* PRタグ */
  --pc-pr-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pc-card: #1e2118;
    --pc-warn: #e8a67a;
    --pc-btn-ink: #171a15;  /* 暗モードのアクセントは明るいので文字を暗くする */
    --pc-pr-bg: #f2f1e9;
    --pc-pr-ink: #171a15;
  }
}

/* 一覧ページだけ幅を広げる（既存 .wrap は600px。PCで2〜3列にするため） */
.wrap--wide { max-width: 1040px; }

/* ---------- 一覧グリッド: 375pxで1列 / 640px〜2列 / 960px〜3列 ---------- */
.pc-grid {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) { .pc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pc-grid { grid-template-columns: repeat(3, 1fr); } }
.pc-grid > li { display: flex; }

/* ---------- カード本体 ---------- */
.pc-card {
  position: relative;            /* 下の .pc-cta::after でカード全面をリンクにする */
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--pc-card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);   /* ジャンル色。body[data-genre] から継承 */
  color: var(--ink);
}
.pc-card:hover { border-color: var(--accent); }

/* ---------- 画像枠 ---------- */
/* 比率は既定1:1。furusato は .pc-media--wide（4:3）を付ける。ページ内では1種類に統一する */
.pc-media {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pc-media-bg);
  border-bottom: 1px solid var(--rule);
}
.pc-media--wide { aspect-ratio: 4 / 3; }
.pc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;            /* 既定は「欠けない」contain。商品を切らない */
  background: var(--pc-media-bg); /* 余白(レターボックス)を白で埋める。下のフォールバックを隠す */
}
.pc-media--cover img { object-fit: cover; }  /* 見える割合が85%以上と分かっているときだけ */

/* PRタグ: 画像の左上。ベタ塗り+太字で必ず読める */
.pc-pr {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  padding: 3px 9px;
  background: var(--pc-pr-bg);
  color: var(--pc-pr-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* ---------- 画像なし / 取得失敗のフォールバック ---------- */
.pc-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--paper-raise);
  color: var(--ink-soft);
}
.pc-fallback svg {
  width: 72px; height: 72px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pc-fallback .pc-fallback-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }

/* ---------- 本文 ---------- */
.pc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
}
.pc-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pc-cat {                          /* 品目カテゴリのチップ: 文字はジャンル色、背景なし */
  padding: 0 7px;
  border: 1px solid currentColor;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.pc-name {
  margin: 0 0 8px;
  font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;           /* 保険。表示名は28字以内で作る前提 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 価格ブロック: 数字を大きく、ラベルと単位は小さく */
.pc-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.pc-price-label { font-size: 12.5px; color: var(--ink-soft); }
.pc-price-num   { font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pc-price-unit  { font-size: 14px; font-weight: 600; }
.pc-asof { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.pc-price--stale .pc-price-num { font-size: 14px; font-weight: 600; }  /* 古い価格は数字を出さない */

/* 特徴 / 惜しい点 */
.pc-points { list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; line-height: 1.6; }
.pc-points li { display: grid; grid-template-columns: 4.2em 1fr; gap: 8px; margin: 0 0 4px; }
.pc-point-label { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.pc-point--bad .pc-point-label { color: var(--pc-warn); }

/* ボタン文言は「行き先 + 見る」。.pc-cta::after がカード全面のタップ領域になる */
.pc-cta {
  margin-top: auto;                /* 行内でボタンの高さを揃える */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                /* タップ領域 */
  padding: 10px 14px;
  background: var(--accent);
  color: var(--pc-btn-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.pc-cta::after { content: ""; position: absolute; inset: 0; }
.pc-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pc-cta:focus-visible { outline: none; }
.pc-cta:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }

/* リンク準備中（既存の .pending と同じ意匠）。リンクではなく span にする */
.pc-cta--pending {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  border: 1px dashed var(--stamp);
  color: var(--stamp);
  font-size: 13.5px;
}

/* 出所・広告表記: 各カードの最下段。12px未満にしない */
.pc-source { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { .pc-card { transition: none; } }

/* ---------- gadget 追加分。ここから下は追記分 ---------- */
/* 読み上げ専用テキスト（ボタンの「外部サイトが開きます」） */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 価格・特徴の行を出さないカードでは、品目名とボタンの間に余白をとる */
.pc-name { margin-bottom: 16px; }
/* 見出し直下の注記と、その下のカード列の間隔 */
.ledger > .pc-grid { margin-top: 12px; }

/* ---------- Amazon無料体験: 冒頭の目的別早見導線 ---------- */
.ft-guide {
  margin: 24px 0 28px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ft-guide-title {
  margin: 0 0 4px;
  font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}
.ft-guide-intro {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 13px;
}
.ft-guide-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-guide-list > li { display: flex; min-width: 0; }
.ft-guide-link {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ft-guide-link:hover,
.ft-guide-link:focus-visible { background: var(--paper-raise); }
.ft-guide-use { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.ft-guide-service { font-size: 15px; font-weight: 700; line-height: 1.5; }
.ft-guide-period { color: var(--accent); font-size: 12px; font-weight: 600; line-height: 1.5; }
.ft-guide-caution {
  margin: 14px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
}
.ft-guide-caution strong { color: var(--ink); }
.pc-card[id] { scroll-margin-top: 16px; }
.pc-card[id]:target { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 640px) {
  .ft-guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .ft-guide-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}