/* 花鳥風月コンテンツパーツ: カラートークン(墨・藍・竹をイメージした配色) */
:root{
	--kcfgct-bg:#F5F4F0;
	--kcfgct-surface:#FFFFFF;
	--kcfgct-surface-alt:#EDEBE4;
	--kcfgct-hamon-top:#EDEFEF;
	--kcfgct-hamon-mid:#9BA2A7;
	--kcfgct-hamon-bottom:#34383C;
	--kcfgct-hamon-glow:-1px -1px 0 rgba(255,255,255,.6), 1px -1px 0 rgba(255,255,255,.6), -1px 1px 0 rgba(255,255,255,.6), 1px 1px 0 rgba(255,255,255,.6);
	--kcfgct-ink:#2A2724;
	--kcfgct-ink-soft:#6B655C;
	--kcfgct-border:#DEDAD1;
	--kcfgct-accent:#2C4A6E;
	--kcfgct-accent-soft:#E8EEF3;
	--kcfgct-accent-2:#5F8267;
	--kcfgct-tooltip-bg:#2A2724;
	--kcfgct-tooltip-ink:#F5F4F0;
	--kcfgct-shadow:0 1px 2px rgba(42,39,36,.06), 0 8px 24px rgba(42,39,36,.07);
}
@media (prefers-color-scheme: dark){
	:root{
		--kcfgct-bg:#1C1A17;
		--kcfgct-surface:#242019;
		--kcfgct-surface-alt:#2E2A22;
		--kcfgct-hamon-top:#565C60;
		--kcfgct-hamon-mid:#383D40;
		--kcfgct-hamon-bottom:#201D19;
		--kcfgct-hamon-glow:-1px -1px 0 rgba(0,0,0,.5), 1px -1px 0 rgba(0,0,0,.5), -1px 1px 0 rgba(0,0,0,.5), 1px 1px 0 rgba(0,0,0,.5);
		--kcfgct-ink:#EDE9E2;
		--kcfgct-ink-soft:#A69E92;
		--kcfgct-border:#3D382F;
		--kcfgct-accent:#8FB4DB;
		--kcfgct-accent-soft:#25344A;
		--kcfgct-accent-2:#93B99A;
		--kcfgct-tooltip-bg:#EDE9E2;
		--kcfgct-tooltip-ink:#242019;
		--kcfgct-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
	}
}

/* --- kcfg_card --- */
.kcfg-card{
	background:var(--kcfgct-surface);
	border:1px solid var(--kcfgct-border);
	border-radius:10px;
	box-shadow:var(--kcfgct-shadow);
	overflow:hidden;
	margin:1.5em 0;
	color:var(--kcfgct-ink);
}
.kcfg-card-head{
	font-weight:600;
	font-size:14.5px;
	line-height:1.3;
	padding:13px 18px;
	background:linear-gradient(to bottom,
		var(--kcfgct-hamon-top) 0%,
		var(--kcfgct-hamon-top) 15%,
		var(--kcfgct-hamon-mid) 34%,
		var(--kcfgct-hamon-mid) 62%,
		var(--kcfgct-hamon-bottom) 80%,
		var(--kcfgct-hamon-bottom) 100%);
	border-bottom:1px solid var(--kcfgct-border);
	letter-spacing:.03em;
	color:var(--kcfgct-ink);
	text-shadow:var(--kcfgct-hamon-glow);
}
.kcfg-card-body{padding:18px;}
.kcfg-card-body > *:first-child{margin-top:0;}
.kcfg-card-body > *:last-child{margin-bottom:0;}
.kcfg-card-body:has(.kcfg-video){padding:0;}

/* --- kcfg_columns / kcfg_col --- */
.kcfg-columns{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:16px;
	margin:1.5em 0;
}
.kcfg-columns .kcfg-card{margin:0;}
.kcfg-col > *:first-child{margin-top:0;}

/* --- kcfg_youtube --- */
.kcfg-video{position:relative;aspect-ratio:16/9;background:#000;}
.kcfg-video-facade{
	position:absolute;
	inset:0;
	width:100%;height:100%;
	border:0;
	padding:0;
	margin:0;
	background-size:cover;
	background-position:center;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}
.kcfg-video-play{
	width:56px;height:56px;
	border-radius:50%;
	background:rgba(20,18,16,.72);
	color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-size:18px;
	transition:transform .15s ease, background .15s ease;
}
.kcfg-video-facade:hover .kcfg-video-play{background:var(--kcfgct-accent);transform:scale(1.08);}
.kcfg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* --- kcfg_toggle / kcfg_accordion --- */
.kcfg-accordion{
	border:1px solid var(--kcfgct-border);
	border-radius:10px;
	background:var(--kcfgct-surface);
	box-shadow:var(--kcfgct-shadow);
	overflow:hidden;
	margin:1.5em 0;
}
.kcfg-accordion .kcfg-toggle{margin:0;border-radius:0;box-shadow:none;border:0;}
.kcfg-accordion .kcfg-toggle + .kcfg-toggle{border-top:1px solid var(--kcfgct-border);}

.kcfg-toggle{
	border:1px solid var(--kcfgct-border);
	border-radius:10px;
	background:var(--kcfgct-surface);
	box-shadow:var(--kcfgct-shadow);
	overflow:hidden;
	margin:1.5em 0;
}
.kcfg-toggle-trigger{
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	text-align:left;
	background:none;
	border:0;
	padding:15px 18px;
	font:inherit;
	font-weight:500;
	color:var(--kcfgct-ink);
	cursor:pointer;
}
.kcfg-toggle-trigger:focus-visible{outline:2px solid var(--kcfgct-accent);outline-offset:-2px;}
.kcfg-toggle-trigger::before{
	content:"+";
	flex:0 0 auto;
	width:20px;height:20px;
	border-radius:50%;
	background:var(--kcfgct-accent-soft);
	color:var(--kcfgct-accent);
	display:flex;align-items:center;justify-content:center;
	font-size:13px;
	font-weight:700;
}
.kcfg-toggle.is-open .kcfg-toggle-trigger::before{content:"−";}
.kcfg-toggle-panel{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .22s ease;
}
.kcfg-toggle.is-open .kcfg-toggle-panel{grid-template-rows:1fr;}
.kcfg-toggle-panel > div{overflow:hidden;}
.kcfg-toggle-panel p{
	margin:0;
	padding:0 18px 18px 50px;
	color:var(--kcfgct-ink-soft);
	font-size:14px;
}
.kcfg-toggle-panel p + p{padding-top:0;}

/* --- kcfg_tip --- */
.kcfg-tip{
	position:relative;
	border-bottom:1.5px dotted var(--kcfgct-accent-2);
	cursor:help;
}
.kcfg-tip-bubble{
	/* position:fixedで表示する(開閉アニメーション用のoverflow:hiddenな祖先要素からも
	   はみ出して表示できるよう、JS側でleft/topを都度計算してインラインstyleに設定する)。 */
	position:fixed;
	left:0;top:0;
	transform:translate(-50%,6px);
	background:var(--kcfgct-tooltip-bg);
	color:var(--kcfgct-tooltip-ink);
	font-size:12.5px;
	line-height:1.5;
	padding:8px 12px;
	border-radius:7px;
	white-space:normal;
	max-width:240px;
	width:max-content;
	opacity:0;
	pointer-events:none;
	transition:opacity .15s ease, transform .15s ease;
	box-shadow:var(--kcfgct-shadow);
	z-index:10000;
}
.kcfg-tip-bubble::after{
	content:"";
	position:absolute;
	top:100%;left:50%;
	transform:translateX(-50%);
	border:5px solid transparent;
	border-top-color:var(--kcfgct-tooltip-bg);
}
.kcfg-tip.is-shown .kcfg-tip-bubble{
	opacity:1;
	transform:translate(-50%,0);
}
/* 画面上端に近く、吹き出しが収まらない場合はトリガーの下側に表示する */
.kcfg-tip-bubble.is-below{transform:translate(-50%,-6px);}
.kcfg-tip.is-shown .kcfg-tip-bubble.is-below{transform:translate(-50%,0);}
.kcfg-tip-bubble.is-below::after{
	top:auto;bottom:100%;
	border-top-color:transparent;
	border-bottom-color:var(--kcfgct-tooltip-bg);
}

/* --- kcfg_link (旧[clink]) --- */
.kcfg-linkcard{
	display:flex;
	gap:16px;
	align-items:center;
	text-decoration:none;
	color:var(--kcfgct-ink);
	background:var(--kcfgct-surface);
	border:1px solid var(--kcfgct-border);
	border-radius:10px;
	box-shadow:var(--kcfgct-shadow);
	padding:14px;
	margin:1.5em 0;
	transition:border-color .15s ease;
}
.kcfg-linkcard:hover{border-color:var(--kcfgct-accent);}
.kcfg-linkcard-thumb{
	flex:0 0 96px;
	height:96px;
	border-radius:7px;
	overflow:hidden;
	background:linear-gradient(150deg,var(--kcfgct-accent-soft),var(--kcfgct-surface-alt));
}
.kcfg-linkcard-thumb-img{width:100%;height:100%;object-fit:cover;display:block;}
.kcfg-linkcard-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--kcfgct-ink-soft);opacity:.6;}
.kcfg-linkcard-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.kcfg-linkcard-date{font-size:11.5px;color:var(--kcfgct-ink-soft);}
.kcfg-linkcard-title{font-weight:600;font-size:15.5px;}
.kcfg-linkcard-excerpt{
	font-size:13px;
	color:var(--kcfgct-ink-soft);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}