/* Kiyobinbo Apps — [kb_apps]（ソフト一覧 /apps/）専用
 * クラスはすべて kbi- で始める。Cocoon の .article h2 などに勝つよう、セレクタは .kbi から書く
 * カードの色・枠は TOP（kb-home.css の .kbh-tile）に合わせる
 * ページの背景・余白・見出し（.kbi-hero）は /test/（kb-test.css の .kbt・.kbt-hero）に合わせる。背景を自分で塗るので、暗いテーマでも読める
 * スマホは2列。.kbi の幅が 720px 以上で3列、1000px 以上で4列
 */

/* ---------- Cocoon の記事らしい部分を隠す（body.kbi-page は [kb_apps] があるページだけに付く。kb-test.css と同じ） ---------- */
body.kbi-page .entry-title,
body.kbi-page .date-tags,
body.kbi-page .breadcrumb,
body.kbi-page .toc,
body.kbi-page .sns-share,
body.kbi-page .sns-follow,
body.kbi-page .author-info,
body.kbi-page .footer-meta,
body.kbi-page #comment-area,
body.kbi-page .comment-area,
body.kbi-page .comment-btn,
body.kbi-page .addtoany_share_save_container,
body.kbi-page .a2a_kit {
	display: none !important;
}

body.kbi-page #content {
	margin-top: 0;
}

body.kbi-page #main {
	padding-top: 0;
	padding-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
}

body.kbi-page #main .entry-content {
	margin-top: 0;
	margin-bottom: 0;
}

body.kbi-page #main .article,
body.kbi-page #main .entry-content > .kbi {
	margin-bottom: 0;
}

/* ---------- 全体 ---------- */
.kbi {
	--kbi-accent: #2A62A8;
	--kbi-accent-dark: #1E4B82;
	--kbi-key: #E8A63F;
	--kbi-ink: #1C2330;
	--kbi-ink-2: #3B4452;
	--kbi-ink-3: #505A68;
	--kbi-line: #D3D9E0;
	--kbi-white: #FFFFFF;
	--kbi-tag: #E4E9EE;
	--kbi-bg: #EEF1F4;

	container: kbi / inline-size;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 0 56px;
	color: var(--kbi-ink);
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	/* 背景だけ画面幅いっぱいに塗る（横スクロールは発生しない。/test/ と同じ） */
	border-image: conic-gradient(var(--kbi-bg) 0 0) fill 0 // 0 100vw;
}

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

/* Cocoon の見出し・段落・リストの装飾を打ち消す（kb-home.css と同じやり方） */
html body .kbi h1,
html body .kbi h2,
html body .kbi p,
html body .kbi ul,
html body .kbi li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

html body .kbi h1::before,
html body .kbi h1::after,
html body .kbi h2::before,
html body .kbi h2::after {
	content: none;
}

html body .kbi ul,
html body .kbi li { list-style: none; }

.kbi a:focus-visible {
	outline: 3px solid var(--kbi-key);
	outline-offset: 2px;
}

/* ---------- 見出し（kb-test.css の .kbt-hero と同じ） ---------- */
.kbi .kbi-hero {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

html body .kbi .kbi-title {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.4;
}

html body .kbi .kbi-catch {
	font-size: 17px;
	font-weight: 700;
	color: var(--kbi-accent);
}

html body .kbi .kbi-lead {
	font-size: 14px;
	line-height: 1.9;
	color: var(--kbi-ink-2);
}

/* ---------- グループ ---------- */
.kbi .kbi-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

html body .kbi .kbi-group-title {
	font-size: 18px;
	font-weight: 900;
	line-height: 1.5;
}

.kbi .kbi-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.kbi .kbi-cards > li {
	display: flex;
}

/* ---------- カード（目次のように2行だけ。白地・青い枠は TOP の .kbh-tile と同じ） ---------- */
.kbi .kbi-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 12px 14px;
	color: var(--kbi-ink);
	text-decoration: none;
	background: var(--kbi-white);
	border: 2px solid var(--kbi-accent);
	border-radius: 10px;
}

.kbi .kbi-card:hover,
.kbi .kbi-card:focus-visible {
	color: var(--kbi-ink);
	border-color: var(--kbi-accent-dark);
	box-shadow: 0 6px 18px rgba(42, 98, 168, 0.18);
}

/* 1行目: ソフト名＋右寄せの項目数。長い名前は折り返す */
.kbi .kbi-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.kbi .kbi-card-name {
	min-width: 0;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.kbi .kbi-card-count {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--kbi-ink-3);
	white-space: nowrap;
}

.kbi .kbi-card-num {
	font-size: 15px;
	color: var(--kbi-accent);
}

/* 2行目: 対応 OS・更新日（小さく薄く）。2列のスマホでは OS と日付を2段にし、区切りの「・」は隠す */
.kbi .kbi-card-meta {
	display: flex;
	flex-direction: column;
	column-gap: 6px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--kbi-ink-3);
}

.kbi .kbi-nowrap {
	white-space: nowrap;
}

.kbi .kbi-sep {
	display: none;
}

/* ---------- テストへのリンク ---------- */
.kbi .kbi-test {
	font-size: 15px;
	font-weight: 700;
}

.kbi .kbi-test-link {
	color: var(--kbi-accent);
}

.kbi .kbi-test-link:hover {
	color: var(--kbi-accent-dark);
}

/* ========== .kbi の幅 720px 以上: 3列、1000px 以上: 4列 ========== */
@container kbi (min-width: 720px) {
	html body .kbi .kbi-group-title { font-size: 20px; }

	.kbi .kbi-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.kbi .kbi-card { padding: 14px 16px; }
	.kbi .kbi-card-name { font-size: 18px; }
	.kbi .kbi-card-meta {
		font-size: 12px;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.kbi .kbi-sep { display: inline; }
}

@container kbi (min-width: 1000px) {
	.kbi .kbi-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ========== 768px 以上（/test/ と同じ切り替え） ========== */
@media (min-width: 768px) {
	.kbi {
		gap: 28px;
		padding: 48px 0 80px;
	}

	html body .kbi .kbi-title { font-size: 34px; }
	html body .kbi .kbi-catch { font-size: 20px; }
	html body .kbi .kbi-lead { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
	.kbi .kbi-card {
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}
}