/* 全ページ共通：ヘッダー・パンくず・関連ツール（tools/categories.py が各ページに入れる） */
.sh{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.sh-in{max-width:720px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:10px}
.sh-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.02rem;color:var(--text);text-decoration:none;letter-spacing:.02em}
.sh-logo span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#cdeefa;padding:3px;box-sizing:border-box}
.sh-find{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--bg);white-space:nowrap}
.sh-find:hover{border-color:var(--accent)}
.bc{font-size:.8rem;color:var(--muted);margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.bc a{color:var(--muted);text-decoration:none}
.bc a:hover{text-decoration:underline}
.bc .cat-chip{display:inline-block;color:var(--c);background:color-mix(in srgb,var(--c) 22%,var(--card));border-radius:6px;padding:0 8px;font-weight:700;text-decoration:none}
.bc .cat-chip:hover{text-decoration:none;opacity:.9}
h1 .ti{display:inline-block;margin-right:.3em;font-size:.95em}
.rel{margin-top:28px}
.rel h2{font-size:1.1rem;margin:0 0 10px}
.rel-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.rel-g a{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--text);text-decoration:none;font-size:.88rem;font-weight:600;line-height:1.35}
.rel-g a:hover{border-color:var(--accent)}
.rel-g a span{font-size:1.35rem;flex:0 0 auto}
.rel-more{margin:10px 0 0;font-size:.88rem}
.rel-more a{color:var(--accent)}
#find{scroll-margin-top:70px}
.cat{scroll-margin-top:60px!important}
@media print{.sh,.bc,.rel{display:none!important}}

/* パステル調（明るい表示のとき）。各ページの色の設定を上書きする */
@media not (prefers-color-scheme: dark){
:root:not([data-theme="dark"]){--bg:#f8f3ec;--card:#fff;--text:#3a4550;--muted:#76818b;--line:#e2dae8;--accent:#2e8467;--accent-weak:#d6efe3}
body{background:linear-gradient(180deg,#e2f3fa 0,var(--bg) 320px) no-repeat,var(--bg)}
.sh{background:color-mix(in srgb,#e8f5fb 92%,transparent)}
section.card,.card{border-color:#e6dfeb;box-shadow:0 2px 10px rgba(120,140,170,.07)}
.result{background:#dcf1e7}
}
/* ボタンもやわらかい色に（明るい表示・暗い表示とも） */
.btns .main,button.main,label.main,a.b.main{background:color-mix(in srgb,var(--accent) 32%,var(--card))!important;color:#22664f!important;border-color:color-mix(in srgb,var(--accent) 55%,var(--card))!important;font-weight:700}