/*
Theme Name: KDB Knowledge
Description: サステナ情報に視点コメントを付けて蓄積する、個人ナレッジDB向けテーマ。カード型一覧・分類軸の自由設定・関連カード表示に対応。
Version: 1.2.0
Requires at least: 6.2
Requires PHP: 7.4
Author: サステナビリティLAB
Text Domain: kdb
License: GPL-2.0-or-later
*/

:root {
	--kdb-ink: #1A1A1A;
	--kdb-ink2: #3D3D3D;
	--kdb-muted: #5C5C5C;
	--kdb-line: #E2E2E2;
	--kdb-line2: #EDEDED;
	--kdb-field: #CFCFCF;
	--kdb-bg: #F6F6F5;
	--kdb-card: #FFFFFF;
	--kdb-view-bg: #F4F6F9;
	--kdb-view-line: #D6DEE8;
	--kdb-radius: 8px;
	--kdb-max: none;
	--kdb-gutter: 40px;
	--kdb-side: 300px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--kdb-bg);
	color: var(--kdb-ink);
	font-family: 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Sans', 'Yu Gothic', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--kdb-ink); text-decoration: none; }
a:hover { color: var(--kdb-accent); }
img { max-width: 100%; height: auto; }

.kdb-wrap { max-width: var(--kdb-max); margin: 0 auto; padding-left: var(--kdb-gutter); padding-right: var(--kdb-gutter); }

.kdb-skip { position: absolute; left: -9999px; }
.kdb-skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; border: 2px solid var(--kdb-accent); }

:focus-visible { outline: 2px solid var(--kdb-accent); outline-offset: 2px; }

/* Header */
.kdb-header { background: var(--kdb-card); border-bottom: 1px solid var(--kdb-line); }
.kdb-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.kdb-brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kdb-brand__name { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.kdb-brand__sub { font-size: 12px; color: var(--kdb-muted); }
.kdb-brand__logo { max-height: 40px; width: auto; display: block; }
.kdb-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; }
.kdb-nav__list a { display: inline-block; padding: 4px 0; }
.kdb-nav__list .current-menu-item > a { color: var(--kdb-accent); }
.kdb-menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--kdb-ink); align-items: center; justify-content: center; cursor: pointer; }

/* Image band: full bleed */
.kdb-band {
	width: 100%;
	height: var(--kdb-band-h);
	background-size: cover;
	background-position: center;
	opacity: var(--kdb-band-op);
	border-bottom: 1px solid var(--kdb-line);
}

/* Search */
.kdb-search { padding-top: 28px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 16px; }
.kdb-search form { display: flex; flex-direction: column; gap: 10px; }
.kdb-search__label { font-size: 12px; color: var(--kdb-muted); }
.kdb-search__row { display: flex; gap: 8px; flex-wrap: wrap; }
.kdb-search__row input {
	flex: 1 1 320px; min-width: 0; height: 48px; padding: 0 16px;
	border: 1px solid var(--kdb-field); border-radius: 6px;
	font-size: 15px; font-family: inherit; background: #fff; color: var(--kdb-ink);
}
.kdb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding: 0 24px; border: 0; border-radius: 6px;
	background: var(--kdb-accent); color: #fff; font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.kdb-btn:hover { color: #fff; filter: brightness(0.92); }
.kdb-btn--ghost { background: #fff; color: var(--kdb-ink); border: 1px solid var(--kdb-field); height: 44px; }
.kdb-btn--ghost:hover { color: var(--kdb-accent); filter: none; }

.kdb-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kdb-chips__label { font-size: 12px; color: var(--kdb-muted); margin-right: 4px; }
.kdb-chip {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
	border-radius: 999px; font-size: 13px; background: #fff; border: 1px solid var(--kdb-field);
}
.kdb-chip.is-active { background: var(--kdb-ink); border-color: var(--kdb-ink); color: #fff; }

/* Layout */
.kdb-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding-top: 16px; padding-bottom: 64px; }
/* 記事詳細もトップと同じ横幅（フル幅設定に追従） */
.kdb-layout--single { padding-top: 32px; }
.kdb-layout--single .kdb-layout__main { gap: 20px; }
.kdb-layout__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.kdb-layout__side { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 960px) {
	.kdb-layout { flex-wrap: nowrap; }
	.kdb-layout__main { flex: 1 1 auto; }
	.kdb-layout__side { flex: 0 0 var(--kdb-side); width: var(--kdb-side); }
}
.kdb-page { padding-top: 32px; padding-bottom: 64px; max-width: 840px; }

.kdb-listhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kdb-listhead__title { margin: 0; font-size: 16px; font-weight: 700; }
.kdb-listhead__sub { font-size: 12px; color: var(--kdb-muted); white-space: nowrap; }
.kdb-listhead__desc { font-size: 13px; color: var(--kdb-ink2); }
.kdb-empty { padding: 32px; background: #fff; border: 1px solid var(--kdb-line); border-radius: var(--kdb-radius); color: var(--kdb-muted); }

/* Cards */
.kdb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kdb-card { margin: 0; }
.kdb-card__link {
	height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 20px;
	background: var(--kdb-card); border: 1px solid var(--kdb-line); border-radius: var(--kdb-radius); color: var(--kdb-ink);
	transition: border-color .15s;
}
.kdb-card__link:hover { color: var(--kdb-ink); border-color: var(--kdb-accent); }
.kdb-card__link:hover .kdb-card__title { color: var(--kdb-accent); }
.kdb-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kdb-card__date { font-size: 12px; color: var(--kdb-muted); }
.kdb-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.kdb-card__link > .kdb-card__date { margin-bottom: -2px; }
.kdb-card__axis { font-size: 12px; font-weight: 500; color: var(--kdb-muted); }
.kdb-card__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.kdb-card__one { margin: 0; font-size: 13px; line-height: 1.7; color: var(--kdb-ink2); border-top: 1px solid var(--kdb-line2); padding-top: 10px; }
.kdb-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

.kdb-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; line-height: 1.5; white-space: nowrap; }
.kdb-badge--fill { background: var(--kdb-c); color: #fff; border: 1px solid var(--kdb-c); }
.kdb-badge--outline { background: transparent; color: var(--kdb-c); border: 1px solid var(--kdb-c); }
a.kdb-badge--fill:hover { color: #fff; }
.kdb-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border: 1px solid var(--kdb-field); border-radius: 999px; color: #4A4A4A; line-height: 1.5; }

/* Pagination */
.pagination { padding-top: 8px; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--kdb-field); border-radius: 6px; background: #fff; font-size: 14px;
}
.page-numbers.current { background: var(--kdb-ink); color: #fff; border-color: var(--kdb-ink); }
.page-numbers.dots { border: 0; background: transparent; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Side boxes */
.kdb-box { background: var(--kdb-card); border: 1px solid var(--kdb-line); border-radius: var(--kdb-radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.kdb-box__title { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.kdb-box__desc { margin: 0; font-size: 12px; color: var(--kdb-muted); line-height: 1.6; }
.kdb-box__empty, .kdb-box__more { margin: 0; font-size: 12px; color: var(--kdb-muted); }
/* WordPress標準ウィジェットもテーマの見た目に揃える */
.kdb-box h2, .kdb-box .wp-block-heading { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.6; }
.kdb-box ul, .kdb-box ol { list-style: none; margin: 0; padding: 0; }
.kdb-box li { font-size: 13px; line-height: 1.6; padding: 8px 0; border-bottom: 1px solid #F0F0F0; }
.kdb-box li:last-child { border-bottom: 0; }
.kdb-box .wp-block-group, .kdb-box .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 10px; }
.kdb-box .wp-block-search__inside-wrapper { display: flex; gap: 6px; }
.kdb-box .wp-block-search__input { min-width: 0; flex: 1; height: 40px; padding: 0 10px; border: 1px solid var(--kdb-field); border-radius: 6px; font-family: inherit; }
.kdb-box .wp-block-search__button { height: 40px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--kdb-accent); color: #fff; font-family: inherit; }
.kdb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kdb-accent2); flex: none; }
.kdb-termlist, .kdb-minilist { list-style: none; margin: 0; padding: 0; }
.kdb-termlist a { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid #F0F0F0; }
.kdb-termlist__n { color: var(--kdb-muted); }
.kdb-minilist a { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid #F0F0F0; }
.kdb-minilist li:last-child a, .kdb-termlist li:last-child a { border-bottom: 0; }
.kdb-minilist__meta { font-size: 11px; color: var(--kdb-muted); }
.kdb-minilist__title { font-size: 13px; line-height: 1.6; }

/* Single */
.kdb-article {
	width: 100%; background: var(--kdb-card); border: 1px solid var(--kdb-line); border-radius: var(--kdb-radius);
	padding: 40px; display: flex; flex-direction: column; gap: 28px;
}
.kdb-article__head { display: flex; flex-direction: column; gap: 12px; }
.kdb-article__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--kdb-muted); }
.kdb-article__meta time { margin-left: 4px; }
.kdb-article__axis { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; font-weight: 500; color: var(--kdb-muted); }
.kdb-article__axis-label { font-size: 11px; font-weight: 400; margin-right: 6px; padding: 1px 6px; border: 1px solid var(--kdb-line); border-radius: 3px; }
.kdb-article__axis a { color: var(--kdb-muted); }
.kdb-article__axis a:hover { color: var(--kdb-accent); }
.kdb-article__title { margin: 0; font-size: 26px; line-height: 1.5; font-weight: 700; }
.kdb-article__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kdb-article__tags a { font-size: 12px; padding: 2px 10px; border: 1px solid var(--kdb-field); border-radius: 999px; }

.kdb-one { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--kdb-ink); border-bottom: 1px solid var(--kdb-line); }
.kdb-one__label { flex: none; font-size: 11px; font-weight: 700; color: var(--kdb-muted); padding-top: 4px; }
.kdb-one__text { margin: 0; font-size: 16px; line-height: 1.8; font-weight: 500; }

/* Content (block editor output) */
.kdb-content { font-size: 15px; line-height: 1.9; }
.kdb-content > * { margin-top: 0; margin-bottom: 20px; }
.kdb-content > *:last-child { margin-bottom: 0; }
.kdb-content h2 { font-size: 14px; font-weight: 700 !important; color: var(--kdb-muted); margin-top: 36px; margin-bottom: 12px; letter-spacing: 0.04em; }
.kdb-content h3 { font-size: 15px; font-weight: 700; margin-top: 24px; margin-bottom: 8px; }
.kdb-content > h2:first-child { margin-top: 0; }
.kdb-content ol, .kdb-content ul { padding-left: 22px; }
.kdb-content li { margin-bottom: 6px; }
.kdb-content a { color: var(--kdb-accent); text-decoration: underline; word-break: break-all; }
.kdb-content blockquote { margin-left: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--kdb-line); color: var(--kdb-ink2); }
.kdb-content table { border-collapse: collapse; width: 100%; font-size: 14px; }
.kdb-content th, .kdb-content td { border: 1px solid var(--kdb-line); padding: 8px 10px; text-align: left; }
.kdb-content .wp-block-table { overflow-x: auto; }

/* 視点の枠 */
.is-style-kdb-view {
	padding: 24px !important; background: var(--kdb-view-bg); border: 1px solid var(--kdb-view-line); border-radius: 6px;
}
.is-style-kdb-view > *:first-child { margin-top: 0; }
.is-style-kdb-view > *:last-child { margin-bottom: 0; }
.kdb-content .is-style-kdb-view h2,
.is-style-kdb-view h2 {
	color: var(--kdb-ink); font-size: 14px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.is-style-kdb-view h2::before { content: ''; width: 3px; height: 16px; background: var(--kdb-accent); flex: none; }

/* 丸く切り抜いた画像 */
.is-style-kdb-round img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

/* 出典 */
.is-style-kdb-source { font-size: 13px !important; color: var(--kdb-muted); }

.kdb-pn { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.kdb-pn__next { margin-left: auto; text-align: right; }

/* Footer */
.kdb-footer { border-top: 1px solid var(--kdb-line); background: var(--kdb-card); }
.kdb-footer__inner { padding-top: 24px; padding-bottom: 24px; font-size: 12px; color: var(--kdb-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.kdb-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.kdb-footer__menu a { color: var(--kdb-muted); }

/* Smartphone */
@media (max-width: 720px) {
	body { font-size: 15px; }
	.kdb-wrap { padding-left: 16px; padding-right: 16px; }
	.kdb-header__inner { padding-top: 10px; padding-bottom: 10px; gap: 8px; }
	.kdb-brand { flex-direction: column; gap: 2px; align-items: flex-start; }
	.kdb-brand__name { font-size: 17px; }
	.kdb-brand__sub { font-size: 11px; }
	.kdb-menu-btn { display: inline-flex; }
	.kdb-nav { display: none; width: 100%; }
	.kdb-nav.is-open { display: block; }
	.kdb-nav__list { flex-direction: column; gap: 0; padding-bottom: 8px; }
	.kdb-nav__list a { display: block; padding: 12px 0; border-top: 1px solid var(--kdb-line2); }
	.kdb-band { height: var(--kdb-band-h-sp); }
	.kdb-search { padding-top: 16px; gap: 12px; }
	.kdb-search__row input { flex-basis: 100%; }
	.kdb-search__row .kdb-btn { width: 100%; }
	.kdb-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.kdb-chip { flex: none; }
	.kdb-chips__label { flex: none; }
	.kdb-grid { grid-template-columns: 1fr; gap: 12px; }
	.kdb-card__link { padding: 16px; gap: 10px; }
	.kdb-card__title { font-size: 15px; }
	.kdb-layout { gap: 24px; padding-bottom: 40px; }
	.kdb-layout--single { padding-top: 0; }
	.kdb-layout--single .kdb-wrap, .kdb-layout--single { padding-left: 0; padding-right: 0; }
	.kdb-layout--single .kdb-layout__side { padding-left: 16px; padding-right: 16px; }
	.kdb-article { padding: 20px 16px 24px; border-left: 0; border-right: 0; border-radius: 0; gap: 22px; }
	.kdb-article__title { font-size: 21px; line-height: 1.55; }
	.kdb-one { flex-direction: column; gap: 6px; padding: 14px 0; }
	.kdb-one__text { font-size: 15px; }
	.is-style-kdb-view { padding: 18px !important; }
	.kdb-pn { padding-left: 16px; padding-right: 16px; flex-direction: column; }
	.kdb-pn__next { margin-left: 0; text-align: left; }
}

/* ページ下部（自己紹介など） */
.kdb-bottom { background: var(--kdb-card); border-top: 1px solid var(--kdb-line); }
.kdb-bottom__inner { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.kdb-bottom__item { display: flex; flex-direction: column; gap: 16px; }
.kdb-bottom__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--kdb-muted); letter-spacing: 0.04em; }
.kdb-profile { display: flex; gap: 24px; align-items: flex-start; }
.kdb-profile__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; background: var(--kdb-line); }
.kdb-profile__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 720px; }
.kdb-profile__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kdb-profile__name { font-size: 18px; font-weight: 700; }
.kdb-profile__role { font-size: 13px; color: var(--kdb-muted); }
.kdb-profile__text { font-size: 14px; line-height: 1.9; color: var(--kdb-ink2); }
.kdb-profile__text p { margin: 0 0 8px; }
.kdb-profile__text p:last-child { margin-bottom: 0; }
.kdb-profile__btns { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.kdb-profile__btns .kdb-btn { height: 44px; font-size: 14px; }
.kdb-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kdb-footer__contact { color: var(--kdb-muted); text-decoration: underline; }
@media (max-width: 720px) {
	.kdb-bottom__inner { padding-top: 32px; padding-bottom: 32px; grid-template-columns: 1fr; gap: 28px; }
	.kdb-profile { flex-direction: column; gap: 16px; }
	.kdb-profile__img { width: 80px; height: 80px; }
}

/* キーワード */
.kdb-kws { display: flex; flex-wrap: wrap; gap: 8px; }
.kdb-kw { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; font-size: 13px; border: 1px solid var(--kdb-field); border-radius: 999px; background: #fff; color: var(--kdb-ink2); }
.kdb-kw--featured { border-color: var(--kdb-accent); color: var(--kdb-accent); font-weight: 500; }
.kdb-kw:hover, .kdb-kw.is-active { background: var(--kdb-accent); border-color: var(--kdb-accent); color: #fff; }
.kdb-termlist a.is-active { color: var(--kdb-accent); font-weight: 700; }
.kdb-article__kws { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 20px; border-top: 1px solid var(--kdb-line2); }
.kdb-article__kwlabel { font-size: 12px; font-weight: 700; color: var(--kdb-muted); }

.kdb-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--kdb-muted); }
.kdb-crumbs a { color: var(--kdb-muted); }
.kdb-kwhead { background: var(--kdb-card); border: 1px solid var(--kdb-line); border-radius: var(--kdb-radius); padding: 32px 36px; display: flex; flex-direction: column; gap: 24px; }
.kdb-kwhead__top { display: flex; flex-direction: column; gap: 8px; }
.kdb-kwhead__eyebrow { font-size: 12px; font-weight: 700; color: var(--kdb-accent); letter-spacing: 0.06em; }
.kdb-kwhead__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.4; }
.kdb-kwhead__meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--kdb-muted); }
.kdb-kwhead__meta b { color: var(--kdb-ink); }
.kdb-kaisetsu { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 2px solid var(--kdb-ink); }
.kdb-kaisetsu__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kdb-kaisetsu__icon { display: none; flex: none; }
.kdb-kaisetsu__title { margin: 0; font-size: 18px; font-weight: 700; }
.kdb-kaisetsu__date { font-size: 12px; color: var(--kdb-muted); margin-left: auto; }
.kdb-kaisetsu__body { font-size: 15px; line-height: 2; }
.kdb-kaisetsu__body h2, .kdb-kaisetsu__body h3 { color: var(--kdb-ink); font-size: 15px; }
.kdb-kwhead__rel { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--kdb-line2); }
.kdb-kwhead__relrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kdb-kwhead__rellabel { font-size: 12px; font-weight: 700; color: var(--kdb-muted); min-width: 7em; }
.kdb-kwhead__links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.kdb-kwhead__links a { color: var(--kdb-accent); }
@media (max-width: 720px) {
	.kdb-crumbs { padding: 16px 16px 0; }
	.kdb-kwhead { padding: 20px 16px 24px; border-left: 0; border-right: 0; border-radius: 0; gap: 20px; }
	.kdb-kwhead__title { font-size: 24px; }
	.kdb-kaisetsu__date { margin-left: 0; width: 100%; }
	.kdb-layout--single .kdb-listhead, .kdb-layout--single .kdb-grid, .kdb-layout--single .kdb-empty, .kdb-layout--single .pagination { margin-left: 16px; margin-right: 16px; }
}