/* クラベル：全ページ共通の枠（ヘッダー・フッター・方眼の背景）。サイトの各ページと比較ツールの両方で読み込む。
   色の変数（--paper, --grid, --card, --ink…）はそれぞれのページ側で決める。 */
body{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--card)}
.kb-sprite{position:absolute;width:0;height:0;overflow:hidden}
.kb-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
.kb-top .in{max-width:820px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px}
.kb-logo{font-family:var(--f-body);font-weight:700;font-size:23px;line-height:1;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;min-height:48px}
.kb-logo svg{width:34px;height:34px;flex:none}
.kb-logo span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink3);font-weight:500}
.kb-nav{display:none;gap:2px}
.kb-nav a{white-space:nowrap;text-decoration:none;color:var(--ink);font-size:15.5px;font-weight:500;padding:0 12px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.kb-nav a:hover,.kb-nav a[aria-current="page"]{background:var(--hl-soft)}
.kb-menu{position:relative}
.kb-menu summary{list-style:none;min-height:48px;padding:0 16px;border:2px solid var(--ink);border-radius:12px;display:flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:700;font-size:16px;cursor:pointer;background:var(--card);color:var(--ink);user-select:none}
.kb-menu summary::-webkit-details-marker{display:none}
.kb-menu summary::before{content:"";width:18px;height:12px;background:linear-gradient(var(--ink) 0 0) top/100% 2px no-repeat,linear-gradient(var(--ink) 0 0) center/100% 2px no-repeat,linear-gradient(var(--ink) 0 0) bottom/100% 2px no-repeat}
.kb-menu[open] summary{background:var(--ink);color:var(--card)}
.kb-menu[open] summary::before{background:linear-gradient(var(--card) 0 0) top/100% 2px no-repeat,linear-gradient(var(--card) 0 0) center/100% 2px no-repeat,linear-gradient(var(--card) 0 0) bottom/100% 2px no-repeat}
.kb-menu .panel{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;background:var(--card);border:1.5px solid var(--line);border-radius:16px;box-shadow:0 18px 36px -18px rgba(0,0,0,.45);padding:8px;display:grid;gap:2px}
.kb-menu .panel a{min-height:54px;display:flex;align-items:center;padding:0 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-family:var(--f-body);font-size:17px;font-weight:500}
.kb-menu .panel a:hover,.kb-menu .panel a[aria-current="page"]{background:var(--hl-soft)}
.kb-menu .panel .mh{margin:10px 14px 2px;font-family:var(--f-body);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink3)}
.kb-menu .panel .mi{justify-content:space-between;gap:10px}
.kb-menu .panel .mi i{font-style:normal;font-size:13px;color:var(--ink3);text-align:right}
.kb-menu .panel .mg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.kb-menu .panel .mg a{min-height:56px;gap:8px;padding:0 10px;font-size:15.5px;border:1px solid var(--line);background:var(--card)}
.kb-menu .panel .mg svg{width:28px;height:28px;flex:none}
.kb-menu .panel .quiz{margin:8px 0 2px;background:var(--note,#FCF2C2);color:var(--note-ink,#2A2610);border:1px solid var(--line)}
.kb-menu .panel .quiz span{font-size:13px}
.kb-menu .panel .quiz:hover{background:var(--hl)}
.kb-top .in{gap:8px}
@media (min-width:760px){.kb-nav{display:flex;margin-left:auto}}
.kb-foot{border-top:1px solid var(--line);background:var(--card);padding-block:24px 36px;font-family:var(--f-body);font-size:14px;line-height:1.75;color:var(--ink2)}
.kb-foot .in{max-width:820px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.kb-foot p{margin:0 0 8px}
.kb-foot nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
.kb-foot nav a{color:var(--ink);font-size:15px;min-height:40px;display:inline-flex;align-items:center}
.kb-foot .kb-logo{font-size:19px;margin-bottom:6px}
.kb-foot .kb-logo svg{width:28px;height:28px}