/**
 * Dram Verdict — Base
 *
 * SWELL の既定スタイルのうち、日本のブログらしさを作っている部分だけを上書きする。
 * 装飾ブロックは「削除」ではなく「使わない」運用（docs/WRITING_STYLE.md）。
 */

/* ----------------------------------------------------------------------
 * SWELL の CSS 変数を Dram Verdict のトークンへ写像する
 *
 * SWELL はカスタマイザーの値から :root の変数を動的生成し、
 * 既定では日本語フォントスタック（游ゴシック体）と既定カラー（#04384c）が入る。
 * 子テーマの CSS は SWELL のインラインスタイルより後に読まれるため、
 * 同じ :root への再定義で上書きできる。
 *
 * これにより、SWELL 側のヘッダー・フッター・カード・ボタンも
 * 自動的に Dram Verdict の配色とタイポグラフィになる。
 * -------------------------------------------------------------------- */

:root {
	--swl-font_family: var(--dv-font-body);
	--swl-font_weight: 400;

	/* SWELL 側の変数は Dram Verdict トークンをそのまま参照する
	   （2026-09-09: 値を直書きせず var() 参照に統一。真実の情報源は
	   tokens.css の1箇所のみにする）
	   注意: --color_main は SWELL 本体で「白文字と組み合わせた塗りつぶし」
	   （テーブルの thead、アコーディオン見出し、定義リストの dt 等）に
	   使われる、単なるリンク色ではない"塗り"の変数。ここに --dv-gold-text
	   を入れると "大きなゴールドのパネル" になり §4 の禁止事項に抵触するため、
	   塗り系は --dv-ink（新しいプライマリボタンと同じ思想）にする。
	   リンク専用の --color_link だけを --dv-gold-text にする */
	--color_main:       var(--dv-ink);
	--color_main_thin:  color-mix(in srgb, var(--dv-ink) 6%, transparent);
	--color_main_dark:  var(--dv-ink-hover);

	--color_text:       var(--dv-ink);
	--color_link:       var(--dv-gold-text);
	--color_htag:       var(--dv-ink);
	--color_bg:         var(--dv-bg);
	--color_border:     var(--dv-border);

	--color_header_bg:   var(--dv-surface);
	--color_header_text: var(--dv-ink);
	--color_footer_bg:   var(--dv-surface);
	--color_footer_text: var(--dv-ink);

	--container_size: 1120px;
	--article_size:   1120px;

	/* 既定のグラデーションは使わない（docs/DESIGN_SYSTEM.md §2.3）。
	   万一どこかで参照されても "大きなゴールドの塗り" にならないよう ink にする */
	--color_gradient1: var(--dv-ink);
	--color_gradient2: var(--dv-ink);
}

/* ---- Global ---------------------------------------------------------- */

body {
	background-color: var(--dv-bg);
	color: var(--dv-ink);
	font-family: var(--dv-font-body);
	font-size: var(--dv-fs-body);
	line-height: var(--dv-lh-body);
	-webkit-font-smoothing: antialiased;
}

/* ---- Typography ------------------------------------------------------ */

h1, h2, h3, h4,
.p-articleThumb__caption,
.c-postTitle__ttl {
	font-family: var(--dv-font-heading);
	line-height: var(--dv-lh-heading);
	color: var(--dv-ink);
	letter-spacing: -0.01em;
}

.post_content h2,
.post_content h3,
.post_content h4 {
	/* SWELL 既定の色帯・囲み・アイコンを解除する */
	background: none;
	border: 0;
	padding: 0;
	margin-top: var(--dv-space-8);
	margin-bottom: var(--dv-space-4);
	/* SWELL の見出しデザイン（既定 "band"）が動的出力する color:#fff を
	   明示的に上書きする。上の background:none だけでは白文字が残り、
	   帯の背景色が消えた状態で読めなくなる */
	color: var(--dv-ink);
}

.post_content h2::before,
.post_content h2::after,
.post_content h3::before,
.post_content h3::after {
	content: none;
}

.post_content h2 {
	font-size: var(--dv-fs-h2);
	padding-bottom: var(--dv-space-3);
	border-bottom: 1px solid var(--dv-border);
}

.post_content h3 {
	font-size: var(--dv-fs-h3);
}

.post_content p {
	margin-bottom: 1.25em;
}

.post_content {
	max-width: var(--dv-measure);
}

/* ---- Links ----------------------------------------------------------- */

a {
	color: var(--dv-gold-text);
}

/* 2026-09-09: 本文中の通常インラインリンクだけ標準的な青にする
   （Review/Guide本文・About・Contact・trust page・FAQ回答・テーブルセル内
   リンクはすべて `.post_content` の中）。ナビ・フッター・カード・ボタン・
   ラベルは `.post_content` の外にあるため、上の `a` / 下の `a:hover`
   （ゴールド）がそのまま適用され続ける — 個別に上書きし直す必要はない */
.post_content a {
	color: var(--dv-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.post_content a:hover,
.post_content a:focus {
	color: var(--dv-link-hover);
}

a:hover {
	color: var(--dv-gold-text-hover);
}

/* ---- Focus ----------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--dv-focus);
	outline-offset: 2px;
	border-radius: var(--dv-radius-sm);
}

/* ---- Layout ---------------------------------------------------------- */

.l-mainContent__inner,
.l-content {
	max-width: var(--dv-max-wide);
}

/* サイドバーを使わないので1カラム幅を確保する */
.l-content .l-mainContent {
	width: 100%;
}

/* .post_content 自体が既定で max-width:var(--dv-measure)（68ch）に絞られている
   （このファイル冒頭、通常の本文用ルール）ため、そのままでは子要素に
   どれだけ広い max-width を与えても .post_content 自身の実際の幅を超えられない。
   Guide と Comparison（.dv-comparison, 2026-09-11 追加）だけ、この既定の
   68ch上限を解除する（グローバルな .post_content や --dv-measure 自体は
   変更しない — Reviewはそのまま68ch制約を受け続ける）。 */
.dv-guide .post_content,
.dv-comparison .post_content {
	max-width: none;
}

/* Guide 記事（body_class フィルタで付与される .dv-guide）と Comparison 記事
   （.dv-comparison）だけ、本文の行幅を読みやすい幅に絞る。外側コンテナ
   （--dv-max-wide = 1120px）はそのまま。Reviewとは独立した --dv-guide-content
   トークンを両方で共有する（Reviewの .dv-review / --dv-max-content は
   一切変更しない）。 */
.dv-guide .p-articleHead,
.dv-guide .p-articleMetas,
.dv-guide .post_content > *,
.dv-comparison .p-articleHead,
.dv-comparison .p-articleMetas,
.dv-comparison .post_content > * {
	max-width: var(--dv-guide-content);
	margin-inline: auto;
}

/* 表（比較表など）は本文の行幅に縛られず、外側コンテナいっぱいまで明示的に
   広げる。max-width:100% だけに頼らず width:100% も明示して確実に広げる。
   狭い画面ではページ全体ではなく表だけを横スクロールさせる（フォールバック
   として維持。2026-09-17: 下の min-width 分離により、375-430px 幅では
   通常発生しなくなった）。 */
.dv-guide .post_content > .wp-block-table,
.dv-comparison .post_content > .wp-block-table {
	max-width: var(--dv-max-wide);
	width: 100%;
	margin-inline: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	contain: inline-size;
}

/* 2026-09-17: 表本体は既定で幅100%（=ビューポート幅に収まる）にし、
   セル内の折り返し（下の word-break 解除ルール）で読ませる。
   min-width:640px は 640px 以上のビューポートでのみ適用し、375-430px の
   モバイルでは表自体を強制的に横スクロールさせない（一部の総合的な監査で
   確認済みの回帰: 6カラム相当の表を想定した固定 min-width が、実際の
   3カラム比較表でもモバイルの水平スクロールを強制していた）。
   表が実際に収まりきらないほど広い場合は、上の overflow-x:auto が
   引き続きフォールバックとして機能する（表だけがスクロールし、
   ページ全体は横スクロールしない）。 */
.dv-guide .post_content > .wp-block-table table,
.dv-comparison .post_content > .wp-block-table table {
	width: 100%;
}

@media (min-width: 640px) {
	.dv-guide .post_content > .wp-block-table table,
	.dv-comparison .post_content > .wp-block-table table {
		min-width: 640px;
	}
}

/* SWELL 本体の td,th{word-break:break-all}（main.css）は、幅が足りない列で
   普通の英単語まで1文字ずつ改行してしまう。Guide と Comparison の表に
   限定して解除する（グローバルには触らない — 他のtd/thの挙動は変えない）。
   注意: word-breakは継承されるが、親要素（table）に書いても td,th への
   直接指定には勝てない — 必ず td,th 自体に書く。 */
.dv-guide .post_content td,
.dv-guide .post_content th,
.dv-comparison .post_content td,
.dv-comparison .post_content th {
	word-break: normal;
	overflow-wrap: break-word;
}

/* ---- Tables ---------------------------------------------------------- */

.post_content table {
	border-collapse: collapse;
	font-size: var(--dv-fs-small);
}

.post_content th,
.post_content td {
	border: 1px solid var(--dv-border);
	padding: var(--dv-space-3);
}

.post_content th {
	background: var(--dv-surface-alt);
	font-weight: 600;
	text-align: left;
}

/* ---- Images ---------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

/* ----------------------------------------------------------------------
 * Header — SWELL の構造をそのまま使い、見た目だけエディトリアルにする
 *
 * SWELL 側で以下を設定済み（inc/setup.php が初回にシード）:
 *   ヘッダーバー非表示 / メインビジュアル none / 記事スライダー off /
 *   検索はグローバルナビ内 / 境界線は 1px
 * -------------------------------------------------------------------- */

.l-header {
	background: var(--dv-surface);
	border-bottom: 1px solid var(--dv-border);
	box-shadow: none;
}

.l-header__inner {
	max-width: var(--dv-max-wide);
	padding-inline: var(--dv-gutter);
}

/* ロゴ（テキストロゴの場合） */
.l-header__logo .c-catchphrase,
.c-headLogo {
	font-family: var(--dv-font-heading);
	letter-spacing: -0.01em;
}

.c-headLogo a {
	color: var(--dv-ink);
	text-decoration: none;
}

/* グローバルナビ */
.c-gnav > li > a {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dv-ink);
	padding-inline: 0.9em;
}

.c-gnav > li > a:hover {
	color: var(--dv-gold-text);
}

/* SWELL のホバー装飾は控えめな下線のみに */
.c-gnav .ttl::after {
	background: var(--dv-gold);
	height: 1px;
}

/* サブメニュー */
.c-gnav .sub-menu {
	background: var(--dv-surface);
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-md);
	box-shadow: var(--dv-shadow-card);
}

.c-gnav .sub-menu a {
	font-size: var(--dv-fs-small);
	text-transform: none;
	letter-spacing: 0;
	color: var(--dv-ink);
}

.c-gnav .sub-menu a:hover {
	color: var(--dv-gold-text);
}

/* SP のヘッダーボタン: タップターゲット 44px 以上を確保 */
.l-header .c-iconBtn {
	min-width: 44px;
	min-height: 44px;
}

/* SP 開閉メニュー */
#sp_menu .c-listMenu a,
#sp_menu .p-spMenu__body a {
	font-size: var(--dv-fs-body);
}

/* ----------------------------------------------------------------------
 * Footer
 * -------------------------------------------------------------------- */

.l-footer {
	/* 2026-09-09: フッターは surface-alt（淡いグレー）ではなく surface（白）に。
	   本文の --dv-bg よりわずかに明るい"すっきりした白いプレート"として区切る
	   ことで、大面積のグレーを避けつつ視覚的な区切りは境界線で保つ */
	background: var(--dv-surface);
	border-top: 1px solid var(--dv-border);
}

.l-footer__inner,
.l-footer .l-container {
	max-width: var(--dv-max-wide);
}

.l-footer .c-listMenu a,
.l-footer a {
	color: var(--dv-ink);
}

.l-footer a:hover {
	color: var(--dv-gold-text);
}

.l-footer__foot {
	font-size: var(--dv-fs-caption);
	color: var(--dv-ink-muted);
}

/* フッターに常設するアフィリエイト開示 */
.dv-footer-disclosure {
	max-width: var(--dv-max-wide);
	margin-inline: auto;
	padding: var(--dv-space-4) var(--dv-gutter) 0;
	font-size: var(--dv-fs-caption);
	color: var(--dv-ink-muted);
	text-align: center;
}

/* ---- Accessibility --------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}