/* Amazon セールカレンダー (PoC-A v2) スタイル
   設計書 docs/design/design_amazon_sale_calendar.md §12.8
   時×セール×安く買う三軸を視覚化:
     - §A ヒーロー (Scene 別配色)
     - §B 今日のディール商品グリッド (PoC-1 と同型カード)
     - §C 次セール予告 (tendency + 定番品)
     - §D 年間カレンダーグリッド (脇役)
     - §E 一覧 / §F 注意書き
   サイト本文 font 0.8rem に対し新規ページは 15px 行間 1.7 (feedback_page_font_sizes)
*/

.amzsale { max-width: 980px; margin: 0 auto; padding: 16px; color: #222; font-size: 15px; line-height: 1.75; }
.amzsale__h1 { font-size: 1.55rem; margin: 0 0 10px; line-height: 1.35; }
.amzsale__h2 { font-size: 1.2rem; margin: 28px 0 12px; padding-left: 10px; border-left: 5px solid #36c; line-height: 1.4; }

/* .amzsale__h (新パターン: H1 / H2 共通 class)
   /ical /tools と統一: H1 は中央配置・青色・上余白 30px。
   見出しは memory feedback_page_font_sizes に従い大きめ、section 間 margin は section 自身に */
h1.amzsale__h {
  font-size: 1.5rem;
  color: #176B87;
  margin: 30px 0 20px;
  text-align: center;
  line-height: 1.4;
  font-weight: 700;
}
h2.amzsale__h { font-size: 1.25rem; margin: 0 0 10px; line-height: 1.45; font-weight: 700; }
/* sidebar 内 H2 (今日の暦 label) は密度を保つ */
.amzsale__sidebar h2.amzsale__h { font-size: 1rem; margin: 0 0 10px; text-align: left; color: #cc1133; }
/* 商品セクション・関連テーマ・注意書きの section 間に呼吸を確保 */
.amzsale__related { margin: 2.5rem 0 0; }
.amzsale__related:first-of-type { margin-top: 1.5rem; }
.amzsale__notes { margin: 2.5rem 0 0; }
.amzsale__empty { margin: 1.5rem 0 0; }

.amzsale__head { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #eee; }
.amzsale__lead { margin: 0 0 8px; font-size: 14.5px; color: #444; line-height: 1.75; }
/* lead-desc: H1 直下のリード文を中央配置 + 装飾枠 (/ical .ical-intro 同型) */
.amzsale__lead-desc {
  background: #f8fbfc;
  border: 1px solid #e3f1f6;
  border-radius: 8px;
  padding: 14px 20px;
  margin: 0 0 24px;
  color: #333;
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}
/* 最終取得 inline: span として lead-desc 文末に続く (br なし) */
.amzsale__updated { font-size: 12.5px; color: #888; margin-left: 4px; white-space: nowrap; }
.amzsale__empty { padding: 16px; background: #fafafa; border: 1px dashed #ccc; border-radius: 6px; color: #666; font-size: 14px; }

/* ----- §A ヒーロー Scene 別 ----- */
.amzsale__hero { margin: 18px 0 28px; padding: 18px 18px 14px; border-radius: 10px; border: 1px solid #ddd; }
.amzsale__hero--a_big_live, .amzsale__hero--live { background: linear-gradient(180deg, #fff0f0 0%, #fff 100%); border-color: #f0c0c0; }
.amzsale__hero--b_normal, .amzsale__hero--next { background: linear-gradient(180deg, #fff8f0 0%, #fff 100%); border-color: #f0d8b0; }
.amzsale__hero--c_gap { background: #f9f9f9; border-color: #e0e0e0; }
.amzsale__hero-label { font-size: 13px; font-weight: 700; color: #cc1133; margin: 0 0 6px; letter-spacing: .04em; }
.amzsale__hero-name { font-size: 1.35rem; margin: 0 0 8px; line-height: 1.4; }
.amzsale__hero-name a { color: #1f5db5; text-decoration: none; }
.amzsale__hero-name a:hover { text-decoration: underline; }
.amzsale__hero-countdown { font-size: 1.05rem; margin: 6px 0; font-weight: 700; color: #b12704; }
.amzsale__remain-days { font-size: 1.6rem; padding: 0 .15em; }
.amzsale__remain-detail { font-size: 14px; font-weight: 500; color: #555; margin-left: 8px; }
.amzsale__hero-time, .amzsale__hero-meta { margin: 4px 0; font-size: 14px; color: #444; }
.amzsale__hero-time time, .amzsale__hero-meta time { font-weight: 600; }
.amzsale__hero-subline { font-size: 13px; color: #555; margin: 10px 0 0; }
.amzsale__badges { margin: 8px 0 0; font-size: 13px; }
.amzsale__badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 12px; margin-right: 8px; }
.amzsale__badge--confirmed { background: #1f6d2b; color: #fff; }
.amzsale__badge--predicted { background: #d4a017; color: #fff; }
.amzsale__source { color: #666; font-size: 12px; }

/* ----- 目次 (SP のみ表示) ----- */
.amzsale__toc { display: none; margin: 10px 0 18px; gap: 8px; flex-wrap: wrap; }
.amzsale__toc a { font-size: 13px; padding: 6px 10px; background: #f4f6fa; border: 1px solid #d8def0; border-radius: 14px; color: #1f5db5; text-decoration: none; }
.amzsale__toc a:active { background: #e4ebf6; }
@media (max-width: 720px){ .amzsale__toc { display: flex; } }

/* ----- §B / §C 商品グリッド (PC 3 列 / SP 2 列固定) -----
   注: 親の content-wrap が左右 12px の padding を持つため、ここでは padding 0。
       二重余白を避け、SP で商品幅を最大化する。 */
.amzsale__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* PC 3 列 */
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 720px) {
  .amzsale__products {
    grid-template-columns: repeat(2, 1fr); /* SP 2 列 */
    gap: 10px;
  }
}
.amzsale__products--compact { gap: 10px; }
.amzsale__product { background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; padding: 10px 12px 12px; display: flex; flex-direction: column; }
.amzsale__product-link { text-decoration: none; color: inherit; }
.amzsale__product-imglink { display: block; text-decoration: none; color: inherit; }
.amzsale__product-imgbox { position: relative; width: 100%; aspect-ratio: 1/1; background: #f4f4f4; margin: 0 0 8px; }
.amzsale__product-imgbox img { width: 100%; height: 100%; object-fit: contain; }
.amzsale__product-badge { position: absolute; top: 4px; left: 4px; background: #cc1133; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
/* 商品名: 必ず 2 行で切る (line-clamp + 高さ固定で全カード揃える) */
.amzsale__product-title {
  font-size: 13px;
  line-height: 1.4;
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 行高 1.4em × 2 行 = 2.8em で固定。1 行商品もこの高さを確保し、価格行の縦位置を揃える */
  min-height: 2.8em;
  max-height: 2.8em;
}
/* product-title 内の a は inline 化（line-clamp を効かせるため） */
.amzsale__product-title .amzsale__product-link {
  display: inline;
  padding: 0;
}
.amzsale__product-title .amzsale__product-link:hover { text-decoration: underline; }
.amzsale__product-price { font-size: 15px; font-weight: 700; color: #b12704; margin: 4px 0; }
.amzsale__product-off { font-size: 12px; font-weight: 700; color: #fff; background: #cc1133; padding: 1px 5px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
.amzsale__product-basis { font-size: 11px; color: #888; text-decoration: line-through; margin-left: 4px; font-weight: 500; }
.amzsale__product-deadline { font-size: 11px; color: #cc1133; font-weight: 700; margin: 4px 0; }
.amzsale__product-pr { font-size: 10px; color: #999; margin: 4px 0 0; }

/* ----- §C tendency ----- */
.amzsale__next-leadin { margin: 0 0 12px; font-size: 14px; color: #444; }
.amzsale__tendency { background: #f8fafc; border: 1px solid #dde4f0; border-radius: 8px; padding: 12px 14px; margin: 10px 0 14px; }
.amzsale__tendency-range { margin: 0 0 6px; font-size: 14px; }
.amzsale__tendency-range strong { color: #b12704; }
.amzsale__tendency-cats { padding-left: 22px; margin: 6px 0; }
.amzsale__tendency-cats li { margin: 4px 0; font-size: 14px; line-height: 1.7; }
.amzsale__tendency-advisory { margin: 8px 0 0; padding: 8px 10px; background: #fff8e1; border-left: 3px solid #d4a017; font-size: 13px; color: #555; line-height: 1.7; }
.amzsale__next-itemslead { margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: #333; }

/* ----- §D 年間グリッド (脇役・縮小) ----- */
.amzsale__year-legend { font-size: 13px; color: #666; margin: 4px 0 12px; }
.amzsale-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 800px){ .amzsale-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 540px){ .amzsale-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.amzsale-grid__month { background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 8px 6px; }
.amzsale-grid__title { font-size: 14px; text-align: center; margin: 0 0 6px; color: #333; font-weight: 700; }
.amzsale-grid__table { width: 100%; border-collapse: collapse; font-size: 11px; }
.amzsale-grid__table th { font-weight: 600; color: #555; padding: 2px 0; text-align: center; }
.amzsale-grid__table th.sun { color: #cc1133; }
.amzsale-grid__table th.sat { color: #1f5db5; }
.amzsale-grid__table td { text-align: center; padding: 0; height: 22px; vertical-align: top; position: relative; }
.amzsale-grid__num { display: inline-block; padding: 2px 0; line-height: 1.2; }
.amzsale-grid__empty { background: transparent; }
.amzsale-grid__day.today .amzsale-grid__num { background: #36c; color: #fff; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; padding: 0; }
.amzsale-grid__day.has-band { background: linear-gradient(180deg, transparent 60%, var(--amz-band, #999) 60%, var(--amz-band, #999) 100%); }
.amzsale-grid__day.has-band .amzsale-grid__num { font-weight: 700; }

/* ----- §E セール一覧 ----- */
.amzsale__list-items { list-style: none; padding: 0; margin: 0; }
.amzsale__list-item { padding: 14px 12px; border: 1px solid #e8e8e8; border-radius: 6px; margin-bottom: 10px; background: #fff; }
.amzsale__list-link { font-size: 1.05rem; font-weight: 700; color: #1f5db5; text-decoration: none; }
.amzsale__list-link:hover { text-decoration: underline; }
.amzsale__list-meta { font-size: 14px; color: #444; margin: 4px 0; }
.amzsale__list-meta time { font-weight: 600; }
.amzsale__list-preview { color: #666; margin-left: 6px; }
.amzsale__list-cats { font-size: 13px; color: #555; margin: 2px 0; }
.amzsale__list-source { font-size: 12px; color: #888; margin: 2px 0 0; }

/* ----- イベントページ固有 ----- */
.amzsale--event .amzsale__head { padding-bottom: 10px; }
.amzsale__tendency-section { background: #f8fafc; border: 1px solid #dde4f0; border-radius: 8px; padding: 14px 16px; margin: 14px 0; }
.amzsale__related p { margin: 6px 0; font-size: 14px; }
.amzsale__related a { color: #1f5db5; }

/* ----- §F 注意書き ----- */
.amzsale__notes ul { padding-left: 22px; }
.amzsale__notes li { font-size: 13px; color: #555; margin: 4px 0; line-height: 1.7; }

/* §A 暦サマリのチップ表示（v3.2 強調版） */
.amzsale__calendar-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.amzsale__calendar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
}
.amzsale__calendar-chip-label {
  font-size: 11px;
  color: #888;
  font-weight: 500;
}
.amzsale__calendar-chip-value {
  font-weight: 700;
  color: #222;
}
.amzsale__calendar-chip--rokuyou.amzsale__calendar-chip--大安 {
  background: #fff8e1;
  border-color: #ffd54f;
}
.amzsale__calendar-chip--rokuyou.amzsale__calendar-chip--友引 {
  background: #fce4ec;
  border-color: #f48fb1;
}
.amzsale__calendar-chip--rokuyou.amzsale__calendar-chip--仏滅 {
  background: #eceff1;
  border-color: #b0bec5;
}
.amzsale__calendar-chip--moon {
  background: #e8eaf6;
  border-color: #9fa8da;
}
.amzsale__calendar-chip--kichijitsu {
  background: #fff3e0;
  border-color: #ffb74d;
}
.amzsale__calendar-chip--solar {
  background: #e0f2f1;
  border-color: #80cbc4;
}

/* ===== Phase 1.10: 2-column レイアウト (PC main + sidebar / SP block) ===== */
/* HTML 順序は main → aside (SEO/a11y)、視覚上 PC は左 sidebar + 右 main を grid-template-areas で実現 */
.amzsale__layout {
  display: block;  /* SP default: ブロック配置で main 上 / sidebar 下 */
}
.amzsale__main { min-width: 0; }  /* grid 内子要素のはみ出し防止 */
@media (min-width: 768px) {
  .amzsale__layout {
    display: grid;
    /* 設計書 §17.11 (2026-05-30 確定): 左 main (商品・主役) + 右 sidebar (暦・脇役)
       - ユーザー視線パターン F/Z: 主役を左上=視線起点に置く
       - EC/ブログ/ニュースの 8-9 割が「メイン左+サイドバー右」の慣習
       - 暦は商品選定の根拠を示す補足、右側で文脈参照しやすい配置 */
    grid-template-columns: 1fr 300px;
    grid-template-areas: "main sidebar";
    gap: 24px;
    align-items: start;
  }
  .amzsale__main { grid-area: main; }
  .amzsale__sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}
/* SP 用: 暦チップ 1 行を main 内に表示 (PC では sidebar に統合済のため非表示) */
.amzsale__chips-sp-inline {
  display: block;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .amzsale__chips-sp-inline { display: none; }
}
/* SP 用: sidebar の上下マージン調整 + 暦チップは main 内 inline 版に統合 */
@media (max-width: 767px) {
  .amzsale__sidebar { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e0e0e0; }
  /* Codex P1 3周目: SP では main 内 .amzsale__chips-sp-inline を表示するため、
     sidebar 内の同チップを非表示にして重複を防ぐ */
  .amzsale__sidebar .amzsale__calendar-summary { display: none; }
}

/* sidebar 内の §A 暦サマリの密度を高める (300px 幅で収まるよう調整) */
.amzsale__sidebar .amzsale__hero {
  margin: 0;
  padding: 14px 14px 10px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
}
.amzsale__sidebar .amzsale__hero-label { font-size: 12px; }
.amzsale__sidebar .amzsale__calendar-summary { gap: 6px; margin-bottom: 12px; }
.amzsale__sidebar .amzsale__calendar-chip { padding: 4px 9px; font-size: 12px; }
.amzsale__sidebar .amzsale__hero-subline {
  font-size: 13px; color: #333; font-weight: 700;
  margin: 12px 0 6px; padding-top: 8px; border-top: 1px dashed #ddd;
}
.amzsale__sidebar .amzsale__list-items { margin: 0; }
.amzsale__sidebar .amzsale__list-item {
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #eee;
}
.amzsale__sidebar .amzsale__list-link { font-size: 14px; font-weight: 600; display: block; }
.amzsale__sidebar .amzsale__list-meta { font-size: 12px; color: #555; margin: 2px 0 0; line-height: 1.4; }

/* ===== Phase 2 Stage 2B: 子ページ用スタイル ===== */
.amzsale__breadcrumb {
  font-size: 13px;
  color: #666;
  margin: 8px 0 14px;
}
.amzsale__breadcrumb a { color: #1f5db5; text-decoration: none; }
.amzsale__breadcrumb a:hover { text-decoration: underline; }

.amzsale__related-themes {
  margin: 1.5rem 0;
  padding: 14px 18px;
  background: #f8f9fa;
  border-radius: 10px;
}
.amzsale__related-themes h2 { font-size: 1rem; margin: 0 0 10px; }
.amzsale__related-themes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.amzsale__related-themes li a {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-decoration: none;
  color: #1f5db5;
  font-size: .85rem;
  font-weight: 600;
}
.amzsale__related-themes li a:hover { background: #f0f4ff; }

.amzsale__back-hub {
  text-align: center;
  margin: 1.5rem 0;
  padding: 12px;
  background: #fff3e0;
  border-radius: 10px;
}
.amzsale__back-hub a {
  color: #e65100;
  font-weight: 600;
  text-decoration: none;
}
.amzsale__back-hub a:hover { text-decoration: underline; }

.amzsale__theme-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
}
.amzsale__theme-status--active {
  background: #fee;
  color: #cc1133;
  border: 1px solid #f0a0a0;
}
.amzsale__theme-status--upcoming {
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffd54f;
}
.amzsale__theme-status--past {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}