/* PchamDB 広告セクション共通スタイル */
/* Amazon アソシエイト承認後、各HTMLの広告ブロックで使用 */

.ad-section {
  max-width: 1100px;
  margin: 32px auto 16px;
  padding: 18px 20px 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
}

.ad-section .ad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.ad-section .ad-title {
  font-size: 14px;
  color: #1E5BB8;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ad-section .ad-title::before {
  content: "📦";
}

.ad-section .ad-label-pr {
  font-size: 10px;
  color: #999;
  padding: 2px 8px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

.ad-section .ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px;
}

.ad-section .ad-card {
  display: block;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 4px;
  text-align: center;
  font-size: 12px;
  color: #1a1a1a;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}

.ad-section .ad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #FFCB05;
}

.ad-section .ad-card img {
  max-width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  margin-bottom: 4px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 画像のみカード (商品説明テキストなし) はマージン除去でコンパクトに */
.ad-section .ad-card img:only-child {
  margin-bottom: 0;
}

.ad-section .ad-card .ad-card-title {
  font-size: 11px;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-section .ad-disclosure {
  font-size: 10px;
  color: #999;
  margin-top: 12px;
  text-align: center;
  line-height: 1.5;
}

.ad-section .ad-disclosure a {
  color: #888;
}

/* ダークモード変種 (party_checker のようなダーク背景ページ用) */
.ad-section.dark {
  background: #161b22;
  border-color: #30363d;
}
.ad-section.dark .ad-title { color: #79c0ff; }
.ad-section.dark .ad-label-pr { background: #21262d; color: #8b949e; border-color: #30363d; }
.ad-section.dark .ad-card { background: #21262d; border-color: #30363d; color: #e6edf3; }
.ad-section.dark .ad-card:hover { border-color: #FFCB05; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.ad-section.dark .ad-card .ad-card-title { color: #e6edf3; }
.ad-section.dark .ad-disclosure { color: #8b949e; }

/* 楽天バリアント (赤系のアクセント) */
.ad-section.rakuten {
  background: #fff8f5;
  border-color: #FFD4C4;
}
.ad-section.rakuten .ad-title { color: #BF0000; }
.ad-section.rakuten .ad-title::before { content: "🛒"; }
.ad-section.rakuten .ad-label-pr {
  background: #fff;
  color: #BF0000;
  border-color: #FFD4C4;
}
.ad-section.rakuten .ad-card:hover { border-color: #BF0000; }

/* ダーク背景ページ用の楽天バリアント (party_checker) */
.ad-section.dark.rakuten {
  background: #1c1418;
  border-color: #4a2020;
}
.ad-section.dark.rakuten .ad-title { color: #ff7b7b; }
.ad-section.dark.rakuten .ad-label-pr {
  background: #2a1a1a;
  color: #ff9999;
  border-color: #4a2020;
}
.ad-section.dark.rakuten .ad-card { background: #21262d; border-color: #4a2020; }
.ad-section.dark.rakuten .ad-card:hover { border-color: #ff7b7b; }

/* Amazon バリアント (オレンジ系) */
.ad-section.amazon .ad-title::before { content: "📦"; }

/* ダブル広告 (Amazon + 楽天 横並び) */
.ad-section.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.ad-section.split > .ad-half {
  padding: 18px 20px 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
}
.ad-section.split > .ad-half.rakuten-half {
  background: #fff8f5;
  border-color: #FFD4C4;
}

@media (max-width: 720px) {
  .ad-section.split {
    grid-template-columns: 1fr;
  }
}

/* スリムバリアント (高さを最小限に、1行で横並び、はみ出し時は横スクロール) */
/* リスト主体ページ (waza-list 等) で「邪魔しない」用 */
.ad-section.slim {
  padding: 8px 12px;
  margin-top: 16px;
}
.ad-section.slim .ad-header {
  margin-bottom: 6px;
}
.ad-section.slim .ad-title {
  font-size: 12px;
}
.ad-section.slim .ad-label-pr {
  font-size: 9px;
  padding: 1px 6px;
}
.ad-section.slim .ad-grid {
  /* 5列固定・常に1行・横スクロールなし */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.ad-section.slim .ad-card {
  padding: 6px;
  border-radius: 6px;
}
.ad-section.slim .ad-card img {
  max-height: 96px;
  margin-bottom: 0;
}
.ad-section.slim .ad-disclosure {
  font-size: 9px;
  margin-top: 6px;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .ad-section {
    margin: 24px 8px 12px;
    padding: 14px 14px 12px;
  }
  .ad-section .ad-grid {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 5px;
  }
  .ad-section .ad-card img {
    max-height: 50px;
  }
  /* スリム帯はモバイルでも 5列1行を維持 (画像は少し小さく) */
  .ad-section.slim .ad-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }
  .ad-section.slim .ad-card {
    padding: 3px;
  }
  .ad-section.slim .ad-card img {
    max-height: 60px;
  }
}