/*
  base.css
  カラー変数・タイポグラフィ定義
  モノトーン＋ボルドーのモード系デザインに、ロゴ/見出し部分のみ
  柔らかい書体を使うことで「モード×キュート」のギャップを演出する。
*/

:root {
	/* ベースカラー（モノトーン） */
	--dkb-color-black: #1a1a1a;
	--dkb-color-white: #ffffff;
	--dkb-color-gray-100: #f6f5f3;
	--dkb-color-gray-300: #ddd9d6;
	--dkb-color-gray-600: #6f6b68;

	/* アクセントカラー（ボルドー / ワインレッド） */
	--dkb-color-accent: #7b1e3a;
	--dkb-color-accent-light: #9c3454;
	--dkb-color-accent-dark: #5c1329;

	/* 差し色（ごく少面積のゴールド） */
	--dkb-color-gold: #b08d57;

	/* タイポグラフィ */
	--dkb-font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
	--dkb-font-accent: "Zen Maru Gothic", "Noto Sans JP", sans-serif;

	/* 余白・角丸の基本単位 */
	--dkb-radius-s: 6px;
	--dkb-radius-m: 12px;
	--dkb-radius-l: 20px;
}

body {
	color: var(--dkb-color-black);
	font-family: var(--dkb-font-base);
	background-color: var(--dkb-color-white);
}

a {
	color: var(--dkb-color-accent);
}

a:hover {
	color: var(--dkb-color-accent-light);
}

/* サイトロゴ・キャラクター名部分は丸みのある書体でギャップを演出 */
.site-title,
.dkb-accent-font {
	font-family: var(--dkb-font-accent);
	letter-spacing: 0.02em;
}

/* カテゴリータグ（5カテゴリ共通の基本スタイル。個別の色分けはカテゴリー編集画面のカラー設定と連動） */
.dkb-category-badge {
	display: inline-block;
	padding: 0.2em 0.9em;
	border-radius: 999px;
	background-color: var(--dkb-color-black);
	color: var(--dkb-color-white);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}

/* PR/アフィリエイト表記ボックス（[dkb_pr]ショートコード用） */
.dkb-pr-notice {
	margin: 0 0 1.5em;
	padding: 0.8em 1.2em;
	border: 1px solid var(--dkb-color-gray-300);
	border-radius: var(--dkb-radius-s);
	background-color: var(--dkb-color-gray-100);
	color: var(--dkb-color-gray-600);
	font-size: 0.85rem;
	line-height: 1.6;
}

/* アフィリエイトボタン（[dkb_btn]ショートコード用） */
.dkb-btn {
	display: inline-block;
	margin: 1em 0;
	padding: 0.9em 2.2em;
	border-radius: 999px;
	background-color: var(--dkb-color-accent);
	color: var(--dkb-color-white) !important;
	font-weight: bold;
	text-align: center;
	text-decoration: none !important;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.dkb-btn:hover {
	background-color: var(--dkb-color-accent-dark);
	color: var(--dkb-color-white) !important;
	transform: translateY(-1px);
}

/* モバイルファースト: スマホでのタップ領域を確保 */
@media (max-width: 600px) {
	.dkb-btn {
		display: block;
		width: 100%;
		padding: 1em 1.5em;
	}
}