/* J-WORKS-MEDIA スタイル。J-WORKS-WEBSITE/src/css/style.cssの
   CSS変数・モバイルファースト設計を踏襲しつつ、記事一覧・記事本文向けの
   最小限のコンポーネントを追加する。 */
:root {
  --bg: #ffffff;
  --surface: #f7f7f8;
  --text: #1a1a1a;
  --text-muted: #5a5a5a;
  --accent: #1a56db;
  --border: #e2e2e4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Hiragino Sans, "Noto Sans JP", sans-serif;
  line-height: 1.7;
  /* 320px前後の狭い画面で、長い英単語・URL文字列があっても横スクロール
     を発生させないための予防的な設定(モバイル対応)。 */
  overflow-wrap: break-word;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Round19A: hoverだけに依存しないキーボードfocusの可視化(サイト全体の
   既定)。ブラウザ既定のoutlineに頼らず、背景色に関わらず視認できる
   太さ・色を明示する。:focus-visibleはキーボード操作等でのfocus時のみ
   表示され、マウスクリック直後の見た目を変えない。 */
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* tier1: 3サイト共通identity bar(Round GLOBAL_SITE_TABS_CORRECTION_IMPL1)。
   Website/Toolsと同一クラス名・同一表示方針。sticky指定はしない。
   max-width: 1100pxはMedia既存のmain.main-discoveryと同じ幅を踏襲する
   (Media側に--max-width変数が定義されていないため直接指定する)。 */
.site-identity-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.site-identity-bar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.site-identity-bar__link { color: var(--accent); font-weight: 600; }
.site-identity-bar__sep { color: var(--text-muted); }
.site-identity-bar__current { color: var(--text); font-weight: 700; }
.site-identity-bar__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.site-header, .site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.site-footer { border-bottom: none; border-top: 1px solid var(--border); flex-direction: column; align-items: flex-start; }
.site-footer .disclosure { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 8px; }

.brand { font-weight: 700; font-size: 1.1rem; color: var(--text); }
nav a { margin-right: 16px; font-size: 0.95rem; }

main { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; }
/* Round19A: 記事カードgridを表示する発見系ページ(ホーム/記事一覧/
   カテゴリ/タグ/検索結果、src/templates/layout.jsのmainClass経由)だけ
   幅を広げる。記事本文(記事詳細ページ)は既定の760pxのまま、長文の
   可読性を優先する(この1行だけがページ種別ごとの唯一の分岐で、
   レイアウトtemplate自体は複製しない)。 */
main.main-discovery { max-width: 1100px; }

.site-tagline { color: var(--text-muted); font-size: 1.02rem; margin: 4px 0 24px; }

/* 記事カードgrid(Round19A区画整理: 縦一列の文字中心リストから、画像で
   選べるカードgridへ)。スマホは1列、タブレット目安で2列、PC相当の
   幅で3列にする(利用可能幅に応じてrepeatの数だけを変える、という
   最小限の分岐にとどめ、カード自体のHTML/描画元は複製しない)。 */
.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .article-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .article-list { grid-template-columns: repeat(3, 1fr); }
}

.article-card {
  position: relative; /* stretched-link(タイトルlinkの::after)の基準 */
  display: flex;
  flex-direction: column;
  /* Round19B防御的追加: CSS gridのitemはmin-width既定値がautoのため、
     理論上は中身のmin-content幅までしか縮まらない可能性がある
     (grid item特有の既知の挙動)。Round19BでChrome DevTools Protocol
     (Emulation.setDeviceMetricsOverride)による実390px viewportでの
     screenshot確認では実際の横スクロールは発生していない(問題なし)。
     将来的な画像・titleの内容変化に備えた予防的な指定として維持する。 */
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.15s ease;
}
.article-card:hover { border-color: var(--accent); }
.article-card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}
/* 商品画像の縦横比がまちまちでも枠が崩れないよう、常にobject-fit:
   containで画像全体を収める(切り取らない、余白は枠内で吸収する)。
   画像が無い記事はこの要素自体を出力しない(架空/汎用画像で穴埋め
   しない、src/articles/renderArticleCard.js参照)。
   Round19D是正: 以前はwidth:100%;height:100%で常に枠いっぱいへ引き
   伸ばしており、実際には低解像度(例: 楽天thumbnail proxyの
   `_ex=128x128`)の商品画像を不自然に拡大して見せてしまっていた
   (画質が荒れ、Affiliate媒体としての信頼を損なう表示不良)。
   width/height:autoへ変更し、max-width/max-height:100%を上限として
   img自身のwidth/height属性(=実際にリクエストしている画像の実寸、
   src/articles/offerAsset.js resolveImageNaturalSize参照)を尊重する。
   枠より小さい画像は無理に拡大せず、.article-card-media側の
   align-items:center;justify-content:centerで中央配置される。枠より
   大きい画像(高解像度のofficial_banner等)はobject-fit:containが
   従来どおり縮小して全体を収める(拡大方向にだけ働かない)。 */
.article-card-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.article-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}
.article-card h2 { margin: 0; font-size: 1.1rem; line-height: 1.4; }
/* stretched-link: カード全域をクリック対象にしつつ、実際のリンク要素は
   titleの<a>1つだけ(入れ子linkを作らない)。カテゴリ・タグchipは
   z-index/positionでこの重なりの上に来るため、個別にクリックできる
   (下のtaxonomy-chip-list側の指定と対になる)。 */
.article-card-title-link { color: var(--text); }
.article-card-title-link::after { content: ""; position: absolute; inset: 0; }
.article-card-title-link:focus-visible { outline: none; } /* outlineは::after側(下)で描く */
.article-card-title-link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.article-card-description {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  /* カードの高さをgrid内で揃えるため、説明文を3行で切り詰める(全文は
     記事詳細ページ・meta descriptionに残るため情報が失われるわけでは
     ない)。 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card .meta { margin: 0; color: var(--text-muted); font-size: 0.8rem; }

.article-body h1 { font-size: 1.6rem; margin-bottom: 4px; }
.article-body h2 { font-size: 1.3rem; margin-top: 2em; padding-top: 0.6em; border-top: 1px solid var(--border); }
.article-body h3 { font-size: 1.05rem; margin: 1.3em 0 0.5em; color: var(--accent); }
.article-body .meta { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 20px; }
.article-body img { max-width: 100%; border-radius: 6px; }
.article-body p { margin: 0 0 1em; }
.article-body ul { margin: 0 0 1em; padding-left: 1.4em; }
.article-body li { margin-bottom: 0.4em; }

.pr-badge {
  display: inline-block;
  background: #fff3cd;
  color: #7a5b00;
  border: 1px solid #ffe08a;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.affiliate-cta-block {
  margin-top: 24px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.affiliate-cta-lead {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.affiliate-cta {
  display: block;
  width: 100%;
  max-width: 420px;
  padding: 13px 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
}
.affiliate-cta:hover { text-decoration: none; opacity: 0.9; }

.affiliate-offer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.affiliate-product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.affiliate-product-card-media {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.affiliate-product-card-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.affiliate-product-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.affiliate-product-card-shop {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.affiliate-product-card .affiliate-cta {
  max-width: none;
  width: auto;
  padding: 8px 16px;
  font-size: 0.9rem;
}
.affiliate-product-card--no-image .affiliate-product-card-body {
  width: 100%;
}
.affiliate-rakuten-credit {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
}
@media (max-width: 480px) {
  .affiliate-product-card { flex-wrap: wrap; }
  .affiliate-product-card .affiliate-cta { width: 100%; }
}

.related-articles {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.related-articles h2 { font-size: 1.1rem; margin-bottom: 12px; }
.related-articles ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.related-articles li { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--surface); }
.related-articles li a { font-weight: 600; }
.related-articles li p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.9rem; }

/* Round17M: 記事一覧・カテゴリ・タグ・検索・ページ分け(記事探索区画)。
   検索欄・カテゴリ・タグ・記事カード・ページnavigationの関係が一目で
   分かるよう、共通のnavigation/chip/nav部品としてまとめる。 */
.discovery-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 20px;
}
.discovery-nav-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text);
  background: #fff;
}
.discovery-nav-link:hover { text-decoration: none; border-color: var(--accent); }
.discovery-nav-link[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.taxonomy-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.taxonomy-chip {
  /* Round19A: 記事カード内ではこのchipがtitleのstretched-link(::after、
     position:absolute; inset:0)の上に重なるため、position:relativeで
     独自のstacking contextを作りchip自身をその上へ置く。記事カード
     以外(記事詳細ページ等)でstretched-linkは存在しないため、この
     指定があっても見た目・挙動は変わらない。 */
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
}
.taxonomy-chip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.taxonomy-chip--category { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.listing-note { color: var(--text-muted); font-size: 0.92rem; margin: -8px 0 16px; }
.article-list-more { margin-top: 4px; }
.article-list-more a { font-weight: 600; }

.taxonomy-index-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.taxonomy-index-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.taxonomy-index-list a { font-weight: 600; }
.taxonomy-index-count { color: var(--text-muted); font-size: 0.85rem; }

.pagination-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pagination-prev, .pagination-next {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}
.pagination-disabled { color: var(--text-muted); opacity: 0.5; }
.pagination-pages { display: flex; flex-wrap: wrap; gap: 4px; }
.pagination-page {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.9rem;
}
.pagination-current {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.pagination-status { width: 100%; margin: 4px 0 0; color: var(--text-muted); font-size: 0.82rem; }

/* 検索page。JavaScriptで#search-resultsへ結果を差し込む(build時に
   client-side検索条件ごとのHTMLページは生成しない)。 */
#search-input {
  width: 100%;
  max-width: 480px;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 6px 0 4px;
}
#search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#search-result-count { color: var(--text-muted); font-size: 0.88rem; margin: 4px 0 20px; }
#search-results .article-list { margin-top: 4px; }