/* 毎日5問（[kb_daily]）— 見た目はテスト（kb-test.css）に合わせる。クラスはすべて kbm- で始める
 * テストとの違いが一目でわかるように: 上に連続日数と今週のカレンダー、ボタンは1つ、タイマーの代わりに点5つ
 * スマホを基本にし、768px 以上で余白と文字を大きくする
 */

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

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

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

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

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

/* ---------- 全体 ---------- */
.kbm {
	--kbm-accent: #2A62A8;
	--kbm-accent-dark: #1E4B82;
	--kbm-key: #E8A63F;
	--kbm-key-edge: #B8812E;
	--kbm-ink: #1C2330;
	--kbm-ink-2: #3B4452;
	--kbm-ink-3: #505A68;
	--kbm-bg: #EEF1F4;
	--kbm-tag: #E4E9EE;
	--kbm-line: #D3D9E0;
	--kbm-keyline: #B9C2CD;
	--kbm-white: #FFFFFF;
	--kbm-ok: #1E7A4A;
	--kbm-ok-bg: #E6F3EC;
	--kbm-ng: #B23A3A;
	--kbm-ng-bg: #FBEAEA;
	--kbm-warn-bg: #FDF3E1;
	--kbm-fire: #C2410C;

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

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

/* Cocoon の見出し・段落・リストの装飾を打ち消す */
html body .kbm h1,
html body .kbm h2,
html body .kbm h3,
html body .kbm p,
html body .kbm ol,
html body .kbm ul,
html body .kbm li,
html body .kbm dl,
html body .kbm dt,
html body .kbm dd {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

html body .kbm h1::before,
html body .kbm h1::after,
html body .kbm h2::before,
html body .kbm h2::after,
html body .kbm h3::before,
html body .kbm h3::after,
html body .kbm li::before {
	content: none;
}

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

.kbm a { color: var(--kbm-accent); }
.kbm a:hover { color: var(--kbm-accent-dark); }

.kbm a:focus-visible,
.kbm button:focus-visible,
.kbm textarea:focus-visible,
.kbm input:focus-visible,
.kbm [tabindex]:focus-visible {
	outline: 3px solid var(--kbm-key);
	outline-offset: 2px;
}

.kbm .kbm-q:focus,
.kbm .kbm-score:focus {
	outline: none;
}

.kbm .kbm-nowrap { display: inline-block; }

.kbm .kbm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- 見出し ---------- */
.kbm .kbm-hero {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

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

/* ---------- カード ---------- */
.kbm .kbm-app {
	scroll-margin-top: 16px;
}

/* ログイン中は WordPress の管理バー（783px 以上は 32px、601〜782px は 46px で上に固定）の分も空ける。600px 以下はスクロールで消えるので足さない */
body.admin-bar .kbm .kbm-app {
	scroll-margin-top: 48px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .kbm .kbm-app { scroll-margin-top: 62px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar .kbm .kbm-app { scroll-margin-top: 16px; }
}

.kbm .kbm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px;
	background: var(--kbm-white);
	border-radius: 16px;
}

html body .kbm .kbm-h {
	font-size: 18px;
	font-weight: 900;
	line-height: 1.5;
}

html body .kbm .kbm-note {
	font-size: 13px;
	color: var(--kbm-ink-3);
}

.kbm .kbm-noscript {
	padding: 16px;
	background: var(--kbm-warn-bg);
	border-radius: 10px;
}

html body .kbm .kbm-message {
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 700;
	background: var(--kbm-ok-bg);
	border-radius: 8px;
}

/* ボタン（テストと同じ） */
.kbm button {
	margin: 0;
	font-family: inherit;
	cursor: pointer;
}

.kbm .kbm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 22px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kbm-ink);
	text-decoration: none;
	background: var(--kbm-white);
	border: 2px solid var(--kbm-line);
	border-radius: 10px;
}

.kbm .kbm-btn:hover { border-color: var(--kbm-keyline); }

.kbm .kbm-btn--primary {
	color: var(--kbm-white);
	background: var(--kbm-ink);
	border-color: var(--kbm-ink);
}

.kbm .kbm-btn--primary:hover { background: #2E3747; border-color: #2E3747; }

.kbm .kbm-btn:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.kbm .kbm-btn--ghost {
	min-height: 44px;
	font-size: 14px;
	color: var(--kbm-ink-2);
	background: transparent;
}

.kbm .kbm-btn--small {
	align-self: flex-start;
	min-height: 44px;
	padding: 0 16px;
	font-size: 14px;
}

.kbm .kbm-btn--danger {
	color: var(--kbm-ng);
	border-color: #E8C4C4;
}

.kbm a.kbm-btn--x {
	color: var(--kbm-white);
	background: #000000;
	border-color: #000000;
}

.kbm a.kbm-btn--x:hover { color: var(--kbm-white); background: #2B3140; }

.kbm .kbm-btn-key {
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 700;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 4px;
	opacity: 0.7;
}

/* 切り替え（答え方・Windows/Mac。テストと同じ） */
.kbm .kbm-switch {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 4px;
	padding: 3px;
	background: var(--kbm-tag);
	border-radius: 8px;
}

.kbm .kbm-switch-label {
	padding: 0 6px 0 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--kbm-ink-3);
}

/* kb-shortcuts.css の .kbs-os-btn（青いボタン）より強くする */
.kbm .kbm-switch .kbm-switch-btn {
	min-height: 32px;
	padding: 5px 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--kbm-ink-3);
	background: transparent;
	border: none;
	border-radius: 6px;
}

.kbm .kbm-switch .kbm-switch-btn.is-on {
	color: var(--kbm-ink);
	background: var(--kbm-white);
	box-shadow: 0 1px 2px rgba(28, 35, 48, 0.15);
}

.kbm .kbm-switch .kbm-switch-btn:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

/* ---------- ソフトのチップ（複数選べる） ---------- */
.kbm .kbm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kbm .kbm-chip {
	min-height: 44px;
	padding: 6px 14px 6px 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--kbm-ink);
	background: var(--kbm-white);
	border: 2px solid var(--kbm-line);
	border-radius: 22px;
}

.kbm .kbm-chip::before {
	content: "+";
	display: inline-block;
	width: 1em;
	margin-right: 4px;
	color: var(--kbm-ink-3);
}

.kbm .kbm-chip.is-on {
	background: #EAF1FA;
	border-color: var(--kbm-accent);
}

.kbm .kbm-chip.is-on::before {
	content: "✓";
	color: var(--kbm-accent);
}

/* ---------- スタート: 連続日数・今週 ---------- */
.kbm .kbm-start-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

html body .kbm .kbm-streak {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-weight: 900;
	line-height: 1.2;
}

.kbm .kbm-streak-fire { font-size: 30px; }
.kbm .kbm-streak-num { font-size: 44px; color: var(--kbm-fire); font-variant-numeric: tabular-nums; }
.kbm .kbm-streak-unit { font-size: 20px; }
.kbm .kbm-streak-start { font-size: 26px; }

/* 連続日数が増えたとき（控えめに1回だけ。動きを減らす設定では動かさない） */
.kbm .kbm-streak.is-up .kbm-streak-num {
	display: inline-block;
	animation: kbm-pop 0.6s ease-out 0.2s both;
}

@keyframes kbm-pop {
	0% { transform: scale(0.6); opacity: 0; }
	60% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}

html body .kbm .kbm-best {
	font-size: 13px;
	font-weight: 700;
	color: var(--kbm-ink-3);
}

.kbm .kbm-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

.kbm .kbm-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.kbm .kbm-day-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--kbm-ink-3);
}

.kbm .kbm-day-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 44px;
	aspect-ratio: 1;
	font-size: 13px;
	font-weight: 700;
	color: var(--kbm-ink-3);
	background: var(--kbm-bg);
	border: 2px solid transparent;
	border-radius: 50%;
}

.kbm .kbm-day.is-done .kbm-day-mark {
	font-size: 18px;
	color: var(--kbm-white);
	background: var(--kbm-ok);
}

.kbm .kbm-day.is-today .kbm-day-mark {
	border-color: var(--kbm-ink);
}

.kbm .kbm-day.is-future .kbm-day-mark {
	color: #9AA3AE;
	background: transparent;
	border-color: var(--kbm-tag);
}

.kbm .kbm-start-go {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

html body .kbm .kbm-done {
	font-size: 17px;
	font-weight: 900;
	color: var(--kbm-ok);
}

.kbm .kbm-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--kbm-ink-2);
}

.kbm .kbm-apps-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--kbm-tag);
}

html body .kbm .kbm-apps {
	min-width: 0;
	font-size: 13px;
	color: var(--kbm-ink-3);
}

.kbm .kbm-gear {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--kbm-ink-2);
	background: var(--kbm-bg);
	border: 0;
	border-radius: 10px;
}

.kbm .kbm-gear[aria-expanded="true"] {
	color: var(--kbm-white);
	background: var(--kbm-ink);
}

/* 最初の画面の「ほかの端末の記録を引き継ぐ」 */
.kbm .kbm-import {
	padding-top: 12px;
	border-top: 1px solid var(--kbm-tag);
}

.kbm .kbm-import-sum {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	font-weight: 700;
	color: var(--kbm-accent);
	cursor: pointer;
}

.kbm .kbm-import[open] .kbm-set {
	margin-top: 8px;
}

/* ---------- 設定 ---------- */
.kbm .kbm-settings {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 16px;
	background: var(--kbm-bg);
	border-radius: 12px;
}

.kbm .kbm-settings[hidden] { display: none; }

.kbm .kbm-set {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

html body .kbm .kbm-set-h {
	font-size: 15px;
	font-weight: 900;
}

html body .kbm .kbm-set-sub {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
}

html body .kbm .kbm-textarea {
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 8px 10px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	color: var(--kbm-ink);
	word-break: break-all;
	background: var(--kbm-white);
	border: 2px solid var(--kbm-line);
	border-radius: 8px;
	resize: vertical;
}

.kbm .kbm-code {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kbm .kbm-code[hidden] { display: none; }

.kbm .kbm-check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 14px;
}

.kbm .kbm-check input {
	width: 20px;
	height: 20px;
	margin: 0;
}

html body .kbm .kbm-error {
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--kbm-ng);
	background: var(--kbm-ng-bg);
	border-radius: 8px;
}

.kbm .kbm-confirm {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px;
	background: var(--kbm-warn-bg);
	border-radius: 10px;
}

html body .kbm .kbm-confirm-text { font-size: 14px; font-weight: 700; }

.kbm .kbm-confirm-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- 問題 ---------- */
.kbm .kbm-quiz-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

html body .kbm .kbm-quiz-title {
	font-size: 13px;
	font-weight: 700;
}

.kbm .kbm-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 0 7px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--kbm-ink-2);
	vertical-align: 1px;
	background: var(--kbm-tag);
	border-radius: 4px;
}

/* 進み具合: 点5つと「2 / 5」（タイマーは出さない） */
.kbm .kbm-progress {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.kbm .kbm-dots {
	display: flex;
	gap: 6px;
}

.kbm .kbm-dot {
	width: 10px;
	height: 10px;
	background: var(--kbm-tag);
	border-radius: 50%;
}

.kbm .kbm-dot.is-ok { background: var(--kbm-ok); }
.kbm .kbm-dot.is-ng { background: var(--kbm-ng); }
.kbm .kbm-dot.is-now { box-shadow: 0 0 0 2px var(--kbm-white), 0 0 0 4px var(--kbm-ink); }

.kbm .kbm-count {
	font-size: 13px;
	font-weight: 700;
	color: var(--kbm-ink-3);
	font-variant-numeric: tabular-nums;
}

html body .kbm .kbm-q {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
}

html body .kbm .kbm-why {
	padding: 6px 10px;
	font-size: 13px;
	color: var(--kbm-ink-2);
	background: var(--kbm-warn-bg);
	border-radius: 6px;
}

.kbm .kbm-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 20px 12px;
	border: 2px dashed var(--kbm-keyline);
	border-radius: 12px;
}

.kbm .kbm-stage--keys {
	min-height: 112px;
	justify-content: center;
}

.kbm .kbm-card.is-ok .kbm-stage { border-color: var(--kbm-ok); border-style: solid; background: var(--kbm-ok-bg); }
.kbm .kbm-card.is-ng .kbm-stage { border-color: var(--kbm-line); border-style: solid; }

.kbm .kbm-pressed { display: flex; justify-content: center; min-height: 56px; align-items: center; }
.kbm .kbm-pressed-hint { font-size: 14px; color: var(--kbm-ink-3); }

.kbm .kbm-card.is-shake .kbm-stage { animation: kbm-shake 0.35s; }

@keyframes kbm-shake {
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

html body .kbm .kbm-status {
	min-height: 1.6em;
	margin-top: -6px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: var(--kbm-ink-2);
}

html body .kbm .kbm-status.is-ng { color: var(--kbm-ng); }

html body .kbm .kbm-status.is-warn {
	padding: 6px 10px;
	color: var(--kbm-ink);
	background: var(--kbm-warn-bg);
	border-radius: 6px;
}

.kbm .kbm-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

/* キーキャップ（kb-quiz.js の capsHtml。テストと同じ見た目） */
.kbm .kbm-combos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
}

.kbm .kbm-or { font-size: 12px; color: var(--kbm-ink-3); }

.kbm .kbm-keys {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.kbm .kbm-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	margin: 0;
	padding: 0 7px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	color: var(--kbm-ink);
	background: var(--kbm-white);
	border: 1px solid var(--kbm-keyline);
	border-bottom-width: 4px;
	border-radius: 6px;
	box-shadow: none;
}

.kbm .kbm-key--mod {
	background: var(--kbm-key);
	border-color: var(--kbm-key-edge);
}

.kbm .kbm-plus { font-size: 12px; color: var(--kbm-ink-3); }

.kbm .kbm-keys--big { gap: 6px; }

.kbm .kbm-keys--big .kbm-key {
	min-width: 52px;
	height: 52px;
	padding: 0 12px;
	font-size: 19px;
	border-bottom-width: 5px;
	border-radius: 9px;
}

.kbm .kbm-keys--big .kbm-key--mod { min-width: 58px; }
.kbm .kbm-keys--big .kbm-plus { font-size: 16px; }

/* 4択 */
.kbm .kbm-choices {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	width: 100%;
}

.kbm .kbm-choice {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px;
	background: var(--kbm-white);
	border: 2px solid var(--kbm-line);
	border-radius: 10px;
	transition: border-color 0.15s, background-color 0.15s;
}

.kbm .kbm-choice:hover:not(:disabled) { border-color: var(--kbm-accent); }
.kbm .kbm-choice:disabled { cursor: default; }
.kbm .kbm-choice.is-answer { background: var(--kbm-ok-bg); border-color: var(--kbm-ok); }
.kbm .kbm-choice.is-ng { background: var(--kbm-ng-bg); border-color: var(--kbm-ng); }

/* 答え（その場で教える） */
.kbm .kbm-answer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: center;
}

html body .kbm .kbm-result {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 18px;
	font-weight: 900;
}

html body .kbm .kbm-result--ok { color: var(--kbm-ok); }
html body .kbm .kbm-result--ng { color: var(--kbm-ng); }
html body .kbm .kbm-result--skip { color: var(--kbm-ink-2); }

.kbm .kbm-result-mark { font-size: 22px; }

.kbm .kbm-explain {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	padding: 12px 14px;
	text-align: left;
	background: var(--kbm-white);
	border-radius: 10px;
}

html body .kbm .kbm-explain-name { font-size: 16px; font-weight: 900; }
html body .kbm .kbm-explain-text { font-size: 14px; line-height: 1.8; color: var(--kbm-ink-2); }

.kbm .kbm-answer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
}

.kbm .kbm-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	font-weight: 700;
}

.kbm .kbm-star {
	min-height: 40px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--kbm-ink-2);
	background: var(--kbm-white);
	border: 2px solid var(--kbm-line);
	border-radius: 20px;
}

.kbm .kbm-star.is-on {
	color: #8A5A12;
	background: var(--kbm-warn-bg);
	border-color: var(--kbm-key);
}

/* ---------- 結果 ---------- */
html body .kbm .kbm-score {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.3;
}

.kbm .kbm-score-num {
	font-size: 48px;
	color: var(--kbm-accent);
}

.kbm .kbm-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--kbm-tag);
}

html body .kbm .kbm-row {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 4px 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--kbm-tag);
}

.kbm .kbm-row-mark { font-size: 18px; font-weight: 900; text-align: center; }
.kbm .kbm-row.is-ok .kbm-row-mark { color: var(--kbm-ok); }
.kbm .kbm-row.is-ng .kbm-row-mark { color: var(--kbm-ng); }
.kbm .kbm-row-name { font-size: 14px; font-weight: 700; }
.kbm .kbm-row-app { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--kbm-ink-3); }
.kbm .kbm-row .kbm-combos { grid-column: 2; justify-content: flex-start; }

.kbm .kbm-result-btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kbm .kbm-test-link {
	align-self: flex-start;
	font-size: 15px;
	font-weight: 700;
}

/* ---------- ホーム画面に追加（PWA）の案内（結果の画面） ---------- */
.kbm .kbm-pwa {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 48px 16px 16px;
	background: var(--kbm-warn-bg);
	border: 2px solid var(--kbm-key);
	border-radius: 12px;
}

html body .kbm .kbm-pwa-title {
	font-size: 16px;
	font-weight: 900;
}

html body .kbm .kbm-pwa-lead,
html body .kbm .kbm-pwa-text {
	font-size: 14px;
	line-height: 1.8;
}

.kbm .kbm-pwa-close {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--kbm-ink-3);
	background: transparent;
	border: 0;
	border-radius: 10px;
}

html body .kbm .kbm-pwa-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-right: -32px;
	counter-reset: kbm-step;
}

html body .kbm .kbm-pwa-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding-left: 34px;
	font-size: 14px;
	line-height: 1.8;
}

html body .kbm .kbm-pwa-step::before {
	content: counter(kbm-step);
	counter-increment: kbm-step;
	position: absolute;
	top: 1px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 13px;
	font-weight: 900;
	color: var(--kbm-white);
	background: var(--kbm-ink);
	border-radius: 50%;
}

/* 共有ボタン・ホーム画面に追加の小さな絵（Safari の見た目に寄せる） */
.kbm .kbm-pwa-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 2px 0;
	padding: 2px 8px 2px 6px;
	font-weight: 700;
	white-space: nowrap;
	color: #0A66D9;
	background: var(--kbm-white);
	border: 1px solid var(--kbm-line);
	border-radius: 8px;
	vertical-align: middle;
}

.kbm .kbm-pwa-icon {
	flex: 0 0 auto;
}

/* iPhone のホーム画面から初めて開いたとき（記録の引き継ぎを先に） */
.kbm .kbm-pwa-first {
	margin-bottom: 16px;
	border: 2px solid var(--kbm-key);
}

/* ---------- 毎日5問について（JS が無くても読める説明） ---------- */
.kbm .kbm-about {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 8px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--kbm-ink-2);
}

html body .kbm .kbm-about-title {
	font-size: 17px;
	font-weight: 900;
	color: var(--kbm-ink);
}

.kbm .kbm-compare {
	display: grid;
	gap: 8px;
}

.kbm .kbm-compare-col {
	padding: 12px 14px;
	background: var(--kbm-white);
	border-radius: 10px;
}

html body .kbm .kbm-compare dt {
	font-weight: 900;
	color: var(--kbm-ink);
}

html body .kbm .kbm-about-note {
	font-size: 13px;
	color: var(--kbm-ink-3);
}

/* ---------- 768px 以上 ---------- */
@media (min-width: 768px) {
	.kbm {
		gap: 32px;
		padding: 48px 0 80px;
	}

	html body .kbm .kbm-title { font-size: 34px; }
	html body .kbm .kbm-catch { font-size: 20px; }

	.kbm .kbm-card {
		gap: 22px;
		max-width: 760px;
		padding: 36px;
		border-radius: 20px;
	}

	.kbm .kbm-about { max-width: 760px; }
	.kbm .kbm-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.kbm .kbm-streak-num { font-size: 56px; }
	.kbm .kbm-week { max-width: 420px; }

	.kbm .kbm-start-go { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
	.kbm .kbm-start-go .kbm-btn { min-width: 240px; }
	.kbm .kbm-start-go .kbm-note { flex-basis: 100%; }

	html body .kbm .kbm-quiz-title { font-size: 15px; }
	html body .kbm .kbm-q { font-size: 22px; }

	.kbm .kbm-stage {
		gap: 18px;
		padding: 28px;
		border-radius: 14px;
	}

	.kbm .kbm-stage--keys { min-height: 136px; }

	.kbm .kbm-keys--big .kbm-key {
		min-width: 60px;
		height: 60px;
		padding: 0 14px;
		font-size: 22px;
		border-bottom-width: 6px;
		border-radius: 10px;
	}

	.kbm .kbm-keys--big .kbm-key--mod { min-width: 68px; }
	.kbm .kbm-keys--big .kbm-plus { font-size: 18px; }

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

	.kbm .kbm-result-btns { flex-direction: row; flex-wrap: wrap; }

	html body .kbm .kbm-row {
		grid-template-columns: 24px minmax(0, 1fr) auto;
	}

	.kbm .kbm-row .kbm-combos { grid-column: 3; justify-content: flex-end; }
}

/* 動きを減らす設定: 揺らさない・数字を動かさない */
@media (prefers-reduced-motion: reduce) {
	.kbm * { transition: none !important; animation: none !important; }
}