/* K BRAIN — 素のHTML/CSS用スタイル(このファイルだけで見た目が出る)
テーマ: 既定は端末の設定(prefers-color-scheme)。明示する時だけ
文字: ふつう / 大きい / 特大
style属性は使わない。必要な物はここにクラスで足す。 */
:root {
--bg: #f8f8f6; /* 地 */
--sf: #ffffff; /* 面(カード・入力) */
--sk: #efeee9; /* 沈み(引用・注記・図の箱) */
--ink: #121212; /* 墨 */
--ink2: #5e5d59; /* 墨・淡(ラベル・注記) */
--ln: rgba(18,18,18,.10); /* 区切り線 */
--ln2: rgba(18,18,18,.26); /* ボタン・入力の枠 */
--clay: #d97757; /* 印と送信ボタンだけ */
--on-clay: #ffffff; /* 送信ボタンの矢印 */
--onink: #f8f8f6; /* 墨ボタン上の文字 */
--serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
--sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
--fh: 26px; /* 見出し(明朝) */
--fk: 22px; /* KANAの声(明朝) */
--fb: 18px; /* 本文 */
--fs: 18px; /* 本人の声・押す物・注意書き・お知らせ(読ませる文は最小これ) */
--ft: 18px; /* タブ */
--fx: 16px; /* 日付・曜日・「23日目」・状態の札・図の中の見本だけ(最小16) */
--r-ctl: 8px; --r-card: 16px; --r-float: 24px;
--pad-x: 24px;
--tap: 48px; --btn: 56px; --btn-report: 60px;
color-scheme: light;
}
[data-theme="dark"] {
--bg: #262624; --sf: #30302e; --sk: #1f1f1d;
--ink: #f5f4ef; --ink2: #b4b2a9;
--ln: rgba(245,244,239,.12); --ln2: rgba(245,244,239,.30);
--onink: #262624;
color-scheme: dark;
}
/* data-theme が無い時は端末の設定に従う。明示の data-theme が勝つ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #262624; --sf: #30302e; --sk: #1f1f1d;
--ink: #f5f4ef; --ink2: #b4b2a9;
--ln: rgba(245,244,239,.12); --ln2: rgba(245,244,239,.30);
--onink: #262624;
color-scheme: dark;
}
}
[data-size="large"] { --fh: 30px; --fk: 26px; --fb: 21px; --fs: 21px; --ft: 21px; --fx: 18px; }
[data-size="xlarge"] { --fh: 34px; --fk: 30px; --fb: 24px; --fs: 24px; --ft: 24px; --fx: 21px; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--fb); line-height: 1.8; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
a:hover { color: var(--ink2); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
p { margin: 0; text-wrap: pretty; }
svg { display: block; flex: none; }
[hidden] { display: none !important; }
/* ── 骨組み ───────────────────────── */
.kb-app { height: 100dvh; display: flex; flex-direction: column; padding-top: max(env(safe-area-inset-top), 12px); }
.kb-main { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 14px var(--pad-x) 32px; display: flex; flex-direction: column; gap: 32px; }
.kb-main > * { flex-shrink: 0; } /* 中身が長い時、ボタンなどが縦に潰れないように */
.kb-main--auth { padding: 0 28px 24px; }
.kb-main--center { justify-content: center; }
.kb-foot { flex: none; padding: 12px var(--pad-x); border-top: 1px solid var(--ln); background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.kb-foot--bare { border-top: 0; padding-bottom: max(env(safe-area-inset-bottom), 16px); }
.kb-stack { display: flex; flex-direction: column; gap: 16px; }
.kb-stack--sm { gap: 8px; }
.kb-stack--md { gap: 20px; }
.kb-stack--lg { gap: 28px; }
.kb-push { margin-top: auto; }
.kb-gap-top { padding-top: 24px; }
.kb-gap-top--lg { padding-top: 88px; }
.kb-gap-top--xl { padding-top: 112px; }
.kb-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.kb-btns--split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-center { align-self: center; }
/* ── 文字 ─────────────────────────── */
.kb-meta { font-size: var(--fx); color: var(--ink2); letter-spacing: .08em; display: flex; justify-content: space-between; gap: 12px; }
.kb-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--fh); line-height: 1.5; }
.kb-h--brand { letter-spacing: .3em; display: flex; align-items: center; gap: 12px; }
.kb-h--brand .kb-seal { width: 10px; height: 10px; }
.kb-headrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kb-sub { font-size: var(--fs); color: var(--ink2); line-height: 1.75; }
.kb-body { font-size: var(--fb); line-height: 1.85; }
.kb-note { font-size: var(--fs); color: var(--ink2); line-height: 1.7; }
.kb-back { min-height: var(--tap); display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: -8px 0 -16px -6px; font-size: var(--fs); color: var(--ink2); background: none; border: 0; padding: 0; text-decoration: none; }
.kb-mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0; word-break: break-all; }
/* ── 声 ───────────────────────────── */
/* KANA: 名前ラベル・顔は付けない。1行ずつ */
.kb-kana { font-family: var(--serif); font-size: var(--fk); line-height: 1.65; display: flex; flex-direction: column; gap: 4px; }
.kb-kana--lg { font-size: var(--fh); line-height: 1.6; }
.kb-kana--sm { font-size: var(--fb); }
.kb-kana__gap { height: .8em; }
/* 本人: 右寄せ・左に細い線・少し小さい字 */
.kb-self { border-left: 2px solid var(--ln2); padding: 2px 0 2px 14px; margin-left: auto; width: 82%; font-size: var(--fs); line-height: 1.75; }
.kb-self--full { width: auto; margin-left: 0; }
.kb-self__status { display: block; font-size: var(--fx); color: var(--ink2); letter-spacing: .06em; }
.kb-thread { display: flex; flex-direction: column; gap: 28px; }
.kb-done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; font-family: var(--serif); font-size: var(--fs); color: var(--ink2); letter-spacing: .08em; }
.kb-done::before { content: ""; width: 32px; height: 1px; background: var(--ln2); }
.kb-reading { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs); color: var(--ink2); }
.kb-reading::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--clay); animation: kb-breathe 1.6s ease-in-out infinite; }
@keyframes kb-breathe { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .kb-reading::before { animation: none; } }
/* ── 印 ───────────────────────────── */
.kb-seal { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--clay); flex: none; }
.kb-seal--sm { width: 6px; height: 6px; border-radius: 1.5px; }
.kb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex: none; }
.kb-ring { box-shadow: 0 0 0 2px var(--clay); }
/* ── 箱 ───────────────────────────── */
.kb-quote { background: var(--sk); border-radius: var(--r-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs); line-height: 1.8; }
.kb-quote--muted { color: var(--ink2); }
.kb-quote--move { padding: 18px 20px; gap: 8px; }
.kb-quote--move p { font-family: var(--serif); font-size: var(--fk); line-height: 1.65; }
.kb-label { display: flex; align-items: center; gap: 8px; font-size: var(--fx); color: var(--ink2); letter-spacing: .06em; }
.kb-card { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-card); padding: 20px; }
.kb-card--link { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.kb-card--link > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.kb-card__title { font-family: var(--serif); font-size: var(--fk); line-height: 1.4; }
.kb-float { background: var(--sf); border-radius: var(--r-float); box-shadow: 0 1px 2px rgba(18,18,18,.04), 0 8px 24px rgba(18,18,18,.06); }
.kb-fuda { flex: none; padding: 10px 16px 12px; border-bottom: 1px solid var(--ln); background: var(--bg); }
.kb-fuda__in { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-card); padding: 14px 18px; display: flex; gap: 12px; font-size: var(--fb); line-height: 1.6; }
.kb-fuda__in .kb-seal { margin-top: 9px; }
.kb-fuda__label { display: block; font-size: var(--fx); color: var(--ink2); letter-spacing: .06em; }
.kb-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: var(--fx); line-height: 1.5; color: var(--ink2); padding: 3px 10px; border: 1px solid var(--ln2); border-radius: var(--r-ctl); letter-spacing: .04em; white-space: nowrap; }
.kb-tag--ink { color: var(--ink); }
/* 「届いてる 1」:今日の画面の上 */
.kb-notice { flex: none; margin: 4px 16px 0; min-height: var(--tap); display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-card); font-size: var(--fs); text-decoration: none; }
.kb-notice span:nth-child(2) { flex: 1; }
/* ホーム画面に置かずに進んだ人の細い帯 */
.kb-band { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--sk); font-size: var(--fs); line-height: 1.5; }
.kb-band span { flex: 1; }
.kb-band .kb-small { height: var(--tap); }
/* 状態のお知らせ(電波・送れない・新しい版・間違い) */
.kb-alert { display: flex; align-items: center; gap: 12px; background: var(--sk); border-radius: var(--r-card); padding: 14px 16px; font-size: var(--fs); line-height: 1.7; }
.kb-alert > span:nth-child(2) { flex: 1; }
.kb-alert .kb-seal { align-self: flex-start; margin-top: 9px; }
.kb-alert--inline { padding: 10px 14px; }
/* ── ボタン ───────────────────────── */
.kb-btn { flex: none; display: flex; align-items: center; justify-content: center; height: var(--btn); width: 100%; padding: 0 16px; border-radius: var(--r-ctl); font-size: var(--fb); letter-spacing: .08em; border: 1px solid var(--ln2); background: var(--sf); color: var(--ink); text-decoration: none; }
.kb-btn--primary { background: var(--ink); color: var(--onink); border-color: var(--ink); }
.kb-btn--primary:hover { color: var(--onink); }
.kb-btn:disabled { opacity: .35; cursor: default; }
.kb-report { display: flex; flex-direction: column; gap: 10px; }
.kb-report button { position: relative; height: var(--btn-report); border: 1px solid var(--ln2); border-radius: var(--r-ctl); background: var(--sf); font-size: var(--fb); letter-spacing: .08em; }
.kb-report button[aria-pressed="true"] { border-color: var(--ink); background: var(--sk); }
.kb-report button[aria-pressed="true"]::before { content: ""; position: absolute; left: 20px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--clay); }
.kb-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kb-choice--2 { grid-template-columns: 1fr 1fr; }
.kb-choice button { min-height: var(--tap); padding: 6px 4px; line-height: 1.3; border: 1px solid var(--ln2); border-radius: var(--r-ctl); background: var(--sf); font-size: var(--fs); }
.kb-choice button[aria-pressed="true"] { background: var(--ink); color: var(--onink); border-color: var(--ink); }
.kb-small { height: 44px; padding: 0 16px; border: 1px solid var(--ln2); border-radius: var(--r-ctl); background: var(--sf); font-size: var(--fs); white-space: nowrap; flex: none; }
.kb-link { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs); color: var(--ink2); background: none; border: 0; padding: 0 4px; text-decoration: underline; text-underline-offset: 4px; }
.kb-link--sm { font-size: var(--fs); }
.kb-links { display: flex; justify-content: center; gap: 4px 24px; flex-wrap: wrap; }
/* ── 入力 ─────────────────────────── */
.kb-field { display: flex; flex-direction: column; gap: 8px; }
.kb-field__label { font-size: var(--fs); color: var(--ink2); }
.kb-field__label small { font-size: var(--fx); }
.kb-field__msg { display: flex; align-items: center; gap: 8px; font-size: var(--fs); }
.kb-input, .kb-select { height: var(--btn); width: 100%; border: 1px solid var(--ln2); border-radius: var(--r-ctl); background: var(--sf); color: var(--ink); padding: 0 16px; font: inherit; font-size: var(--fb); }
.kb-input:focus, .kb-select:focus { outline: none; border: 1.5px solid var(--ink); }
.kb-input::placeholder { color: var(--ink2); opacity: 1; }
.kb-input--pw { letter-spacing: .06em; padding-right: calc(3em + 32px); }
.kb-input-wrap { position: relative; }
.kb-input-wrap button { position: absolute; right: 4px; top: 4px; height: calc(var(--btn) - 8px); min-width: 60px; padding: 0 12px; border: 0; background: none; font-size: var(--fs); color: var(--ink2); }
.kb-static { font-size: var(--fb); line-height: 1.5; padding: 2px 0; word-break: break-all; }
.kb-select-wrap { position: relative; }
.kb-select { appearance: none; -webkit-appearance: none; padding: 0 34px 0 14px; }
.kb-select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: rotate(45deg); pointer-events: none; }
.kb-date { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.kb-check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs); line-height: 1.7; padding: 8px 0; cursor: pointer; }
.kb-check input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; flex: none; margin: 0; border: 1.5px solid var(--ink); border-radius: 6px; display: grid; place-items: center; background: transparent; cursor: pointer; }
.kb-check input:checked { background: var(--ink); }
.kb-check input:checked::after { content: ""; width: 12px; height: 7px; border-left: 2.6px solid var(--onink); border-bottom: 2.6px solid var(--onink); transform: translateY(-2px) rotate(-45deg); }
.kb-dl { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--ln); }
.kb-dl > div { padding: 14px 0; border-bottom: 1px solid var(--ln); display: flex; flex-direction: column; gap: 2px; }
.kb-dl dt { font-size: var(--fx); color: var(--ink2); }
.kb-dl dd { margin: 0; font-size: var(--fb); line-height: 1.6; }
/* ── 送信欄 ───────────────────────── */
.kb-composer { flex: none; padding: 12px 16px 10px; border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.kb-composer__row { display: flex; gap: 10px; align-items: center; }
.kb-composer__row .kb-input { height: 52px; }
.kb-send { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 0; background: var(--clay); color: var(--on-clay); display: grid; place-items: center; }
.kb-hint { display: flex; gap: 8px; align-items: flex-start; padding-left: 4px; font-size: var(--fs); line-height: 1.5; color: var(--ink2); }
.kb-hint svg { width: 1em; height: 1em; margin-top: .25em; }
/* ── 折りたたみ() ────────── */
.kb-acc { border-top: 1px solid var(--ln); }
.kb-acc details { border-bottom: 1px solid var(--ln); }
.kb-acc summary { min-height: 60px; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; font-size: var(--fb); line-height: 1.5; }
.kb-acc summary::-webkit-details-marker { display: none; }
.kb-acc summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 300; color: var(--ink2); width: 24px; text-align: center; }
.kb-acc details[open] summary::after { content: "−"; }
.kb-acc__body { padding-bottom: 20px; display: flex; flex-direction: column; gap: 14px; font-size: var(--fs); line-height: 1.85; }
/* ── 一覧 ─────────────────────────── */
.kb-list { border-top: 1px solid var(--ln); display: flex; flex-direction: column; }
.kb-row { min-height: 80px; border-bottom: 1px solid var(--ln); display: flex; align-items: center; gap: 14px; padding: 12px 0; text-decoration: none; }
.kb-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kb-row__date { font-size: var(--fx); color: var(--ink2); letter-spacing: .06em; }
.kb-row__title { font-size: var(--fb); line-height: 1.5; }
.kb-row .kb-tag { align-self: center; }
.kb-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-bottom: 80px; }
.kb-log { border-top: 1px solid var(--ln); display: flex; flex-direction: column; }
.kb-log__day { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ln); }
.kb-log__date { width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; font-size: var(--fx); color: var(--ink2); }
.kb-log__date b { font-family: var(--serif); font-weight: 400; font-size: var(--fk); line-height: 1.2; color: var(--ink); }
.kb-log__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; font-size: var(--fs); line-height: 1.75; }
.kb-log__me { border-left: 2px solid var(--ln2); padding-left: 12px; }
.kb-log__kana { display: flex; gap: 10px; font-family: var(--serif); font-size: var(--fb); line-height: 1.7; }
.kb-log__kana .kb-seal { width: 6px; height: 6px; margin-top: 12px; }
.kb-log__who { font-family: var(--sans); font-size: var(--fx); color: var(--ink2); margin-right: 4px; }
.kb-log__none { color: var(--ink2); padding-top: 4px; }
/* 記録タブの切り替え(R01/R02) */
.kb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--sk); border-radius: 12px; }
.kb-seg--3 { grid-template-columns: repeat(3, 1fr); }
.kb-seg a, .kb-seg button { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); border: 0; background: none; font-size: var(--fs); color: var(--ink2); text-decoration: none; }
.kb-seg [aria-current="page"], .kb-seg [aria-pressed="true"] { background: var(--sf); color: var(--ink); box-shadow: 0 0 0 1px var(--ln); }
/* あなたタブのメニュー */
.kb-menu { border-top: 1px solid var(--ln); display: flex; flex-direction: column; }
.kb-menu > a, .kb-menu > details > summary, .kb-menu > div { min-height: 60px; border-bottom: 1px solid var(--ln); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fb); text-decoration: none; list-style: none; cursor: pointer; }
.kb-menu > details > summary::-webkit-details-marker { display: none; }
.kb-menu > details[open] > summary { border-bottom: 0; }
.kb-menu > details > div { padding: 0 0 20px; border-bottom: 1px solid var(--ln); }
.kb-menu > div { flex-direction: column; align-items: stretch; padding: 14px 0 16px; cursor: default; }
.kb-menu .kb-chev { color: var(--ink2); }
.kb-menu--end > a { color: var(--ink2); font-size: var(--fs); }
/* ── 図(ホーム画面に置く・マイクの場所) ── */
.kb-steps { display: flex; flex-direction: column; gap: 28px; }
.kb-step { display: flex; flex-direction: column; gap: 12px; }
.kb-step__text { display: flex; gap: 12px; align-items: baseline; font-size: var(--fb); line-height: 1.6; }
.kb-step__num { flex: none; width: 18px; font-family: var(--serif); font-size: var(--fk); color: var(--ink2); }
.kb-fig { background: var(--sk); border-radius: var(--r-card); padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.kb-fig--row { flex-direction: row; align-items: center; }
.kb-fig--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-fig__url { flex: 1; height: 36px; border-radius: 18px; background: var(--sf); display: flex; align-items: center; justify-content: center; padding: 0 14px; font-size: 16px; color: var(--ink2); }
.kb-fig__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink2); }
.kb-fig__icon.kb-ring { color: var(--ink); }
.kb-fig__list { display: flex; flex-direction: column; gap: 6px; }
.kb-fig__item { min-height: 40px; border-radius: 10px; background: var(--sf); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; color: var(--ink2); }
.kb-fig__item.kb-ring { color: var(--ink); }
.kb-fig__head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 16px; }
.kb-fig__head span:first-child { color: var(--ink2); }
.kb-fig__btn { padding: 4px 10px; border-radius: var(--r-ctl); }
.kb-fig__app { display: flex; align-items: center; gap: 12px; }
.kb-appicon { width: 44px; height: 44px; border-radius: 10px; background: var(--ink); color: var(--onink); display: grid; place-items: center; font-family: var(--serif); font-size: 20px; flex: none; }
.kb-appicon--round { border-radius: 50%; }
.kb-fig__toggle { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--ln); }
.kb-switch { width: 44px; height: 26px; border-radius: 13px; background: var(--ink); position: relative; flex: none; }
.kb-switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.kb-fig__end { display: flex; justify-content: flex-end; gap: 16px; align-items: center; }
.kb-fig__end span:first-child { color: var(--ink2); }
.kb-fig__caption { font-size: 16px; line-height: 1.5; color: var(--ink2); }
/* キーボードの図 */
.kb-kbd { background: var(--sf); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.kb-kbd__bar { height: 22px; display: flex; justify-content: flex-end; align-items: center; }
.kb-kbd__keys { height: 16px; background: repeating-linear-gradient(90deg, var(--sk) 0 11px, transparent 11px 14px); border-radius: 3px; }
.kb-kbd__bottom { height: 22px; display: flex; gap: 4px; align-items: center; }
.kb-kbd__bottom::before { content: ""; flex: 1; height: 16px; border-radius: 3px; background: var(--sk); }
.kb-kbd__mic { width: 24px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--ink); flex: none; }
/* ── 手紙(H02) ─────────────────── */
.kb-letter { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-card); padding: 24px 22px; display: flex; flex-direction: column; gap: 18px; font-size: var(--fb); line-height: 1.95; }
/* 状態見本の見出し(H01-states だけ。本番では出さない) */
.kb-state-label { display: flex; align-items: center; gap: 10px; font-size: var(--fx); color: var(--ink2); letter-spacing: .06em; font-family: ui-monospace, Menlo, monospace; }
.kb-state-label::after { content: ""; flex: 1; border-top: 1px dashed var(--ln2); }
/* ── タブ ─────────────────────────── */
.kb-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--ln); background: var(--bg); }
.kb-tabs a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: var(--ft); color: var(--ink2); letter-spacing: .06em; text-decoration: none; line-height: 1; }
.kb-tabs a::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: transparent; }
.kb-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.kb-tabs a[aria-current="page"]::before { background: var(--clay); }
.kb-tabs .kb-dot { position: absolute; width: 6px; height: 6px; top: 26px; left: calc(50% + 1.9em); }
/* 追加:小さなボタンの押された状態・リンクとして使う時 */
.kb-small { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }
.kb-small[aria-pressed="true"] { background: var(--ink); color: var(--onink); border-color: var(--ink); }
/* 字が大きい時の並び */
.kb-choice button { overflow-wrap: anywhere; }
[data-size="xlarge"] .kb-choice { grid-template-columns: 1fr 1fr; }
[data-size="xlarge"] .kb-btns--split { grid-template-columns: 1fr; }
.kb-tabs a { letter-spacing: .02em; white-space: nowrap; }
[data-size="xlarge"] .kb-tabs a { letter-spacing: 0; }
.kb-tabs .kb-dot { left: calc(50% + 1.75em); }
.kb-alert { flex-wrap: wrap; }
.kb-alert > span:nth-child(2) { min-width: 60%; }
.kb-band { flex-wrap: wrap; }
.kb-band span { min-width: 60%; }
.kb-fuda__label, .kb-label, .kb-self__status, .kb-log__who, .kb-row__date, .kb-meta, .kb-dl dt { line-height: 1.5; }
.kb-notice { padding: 8px 16px; }