/* キー単体のページ（/{app}/{key-slug}/。includes/kb-key.php）
 * 土台は kb-app.css（.kba の色・リセット・帯・キーキャップ）。ここはこのページだけの部品（クラスは kbp-）
 * スマホを基本にし、768px 以上で広げる
 */

/* ---------- 帯（白）: パンくず・h1・キー・OS の切り替え ---------- */
html body .kba.kbp h1.kbp-title {
	font-size: 23px;
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

.kbp .kbp-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.kbp .kbp-keys-os {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 14px;
	background: var(--kba-bg);
	border: 2px solid transparent;
	border-radius: 14px;
}

/* 選んでいる OS の枠を目立たせる（kb-shortcuts.js が html[data-kbs-os] を付ける。付くまでは Windows） */
html:not([data-kbs-os="mac"]) .kbp .kbp-keys-os--win,
html[data-kbs-os="mac"] .kbp .kbp-keys-os--mac,
.kbp[data-platform] .kbp-keys-os {
	background: var(--kba-white);
	border-color: var(--kba-key);
}

.kbp .kbp-keys-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--kba-ink-3);
}

.kbp .kbp-keys .kba-key {
	min-width: 46px;
	height: 46px;
	padding: 0 12px;
	font-size: 18px;
	border-bottom-width: 5px;
	border-radius: 9px;
}

.kbp .kbp-keys .kba-plus {
	font-size: 16px;
}

.kbp .kbp-keys .kba-or {
	font-size: 12px;
}

/* kb-app.css は PC で .kba-os を先頭（order: -1）に出すので、ここではキーの下のまま */
.kba.kbp .kbp-os {
	order: 0;
	align-self: flex-start;
}

/* ---------- 本文 ---------- */
.kbp .kbp-body {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 760px;
	margin: 0 auto;
	padding: 22px 0 40px;
}

.kbp .kbp-sec {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

html body .kba.kbp h2.kbp-h2 {
	margin: 0 4px;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.4;
}

.kbp .kbp-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	background: var(--kba-white);
	border-radius: 14px;
}

html body .kba.kbp .kbp-hint {
	font-size: 16px;
	line-height: 1.8;
}

html body .kba.kbp .kbp-note {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kba-ink-2);
}

.kbp .kbp-note-label {
	display: inline-block;
	margin-right: 8px;
	padding: 1px 8px;
	font-size: 12px;
	font-weight: 700;
	background: var(--kba-bg);
	border-radius: 10px;
}

/* 動き（カードの見出しの操作名は h1 と同じなので出さない。舞台は最大 640px） */
.kbp .kbp-demo .kbs-demo {
	max-width: 700px;
	padding: 18px 16px;
}

.kbp .kbp-demo .kbs-demo-title {
	display: none;
}

.kbp .kbp-demo .kbs-demo-head {
	justify-content: center;
}

.kbp .kbp-demo .kbs-demo-stage {
	max-width: 640px;
}

.kbp .kbp-demo .kbs-demo-foot {
	justify-content: flex-end;
}

/* 使い方の手順（Windows / Mac で文が違うときは、選んでいる OS の方だけ） */
.kbp .kbp-steps--mac {
	display: none;
}

html[data-kbs-os="mac"] .kbp .kbp-steps--mac {
	display: block;
}

html[data-kbs-os="mac"] .kbp .kbp-steps--win {
	display: none;
}

html body .kba.kbp .kbp-steps-intro {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--kba-ink-2);
}

.kbp .kbp-steps-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	counter-reset: kbp-step;
}

html body .kba.kbp .kbp-steps-list li {
	position: relative;
	padding-left: 38px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	counter-increment: kbp-step;
}

html body .kba.kbp .kbp-steps-list li::before {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 900;
	color: var(--kba-white);
	background: var(--kba-accent);
	border-radius: 13px;
	content: counter(kbp-step);
}

html body .kba.kbp .kbp-steps-list li.kbp-steps-done {
	padding-left: 0;
	font-weight: 400;
	counter-increment: none;
}

html body .kba.kbp .kbp-steps-list li.kbp-steps-done::before {
	content: none;
}

.kbp .kbp-steps-done-label {
	display: inline-block;
	margin-right: 10px;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 900;
	color: var(--kba-white);
	background: #1E7A4A;
	border-radius: 13px;
}

/* 同じキーをほかのソフトで ／ 同じカテゴリのよく使うキー */
.kbp .kbp-links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.kbp a.kbp-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 12px 16px;
	color: var(--kba-ink);
	text-decoration: none;
	background: var(--kba-white);
	border-radius: 12px;
}

.kbp a.kbp-link:hover {
	color: var(--kba-ink);
	box-shadow: 0 0 0 2px var(--kba-accent) inset;
}

.kbp .kbp-link-app {
	font-size: 12px;
	font-weight: 700;
	color: var(--kba-ink-3);
}

.kbp .kbp-link-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

/* ★・毎日5問・一覧へ */
.kbp .kbp-actions {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.kbp .kbp-star,
.kbp a.kbp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px;
	margin: 0;
	padding: 0 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kba-ink);
	text-decoration: none;
	background: var(--kba-white);
	border: 2px solid var(--kba-line);
	border-radius: 10px;
	box-shadow: none;
	cursor: pointer;
}

.kbp .kbp-star:hover,
.kbp a.kbp-btn:hover {
	color: var(--kba-ink);
	border-color: var(--kba-accent);
}

.kbp .kbp-star-icon {
	font-size: 18px;
	color: #9AA3AE;
}

.kbp .kbp-star.is-on {
	background: var(--kba-tip);
	border-color: var(--kba-key);
}

.kbp .kbp-star.is-on .kbp-star-icon {
	color: var(--kba-key);
}

.kbp a.kbp-btn--main {
	color: var(--kba-white);
	background: var(--kba-accent);
	border-color: var(--kba-accent);
}

.kbp a.kbp-btn--main:hover {
	color: var(--kba-white);
	background: var(--kba-accent-dark);
	border-color: var(--kba-accent-dark);
}

@media (max-width: 599px) {
	.kbp .kbp-actions > * {
		flex: 1 1 100%;
	}
}

@media (min-width: 768px) {
	html body .kba.kbp h1.kbp-title {
		font-size: 30px;
	}

	.kbp .kbp-keys {
		gap: 14px;
	}

	.kbp .kbp-keys-os {
		padding: 14px 18px 16px;
	}

	.kbp .kbp-keys .kba-key {
		min-width: 54px;
		height: 54px;
		padding: 0 14px;
		font-size: 21px;
	}

	.kbp .kbp-body {
		gap: 36px;
		padding-top: 30px;
	}

	.kbp .kbp-demo .kbs-demo {
		padding: 24px 28px;
	}

	.kbp .kbp-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kbp .kbp-box {
		padding: 20px 24px;
	}
}