/* 中二図鑑ツール（tools.ike-tan.com）のポータル・ツールページ共通の枠。
   色・書体・発光は共通カラーテーマのトークン（--bg --panel --text --accent など）だけで書く。テーマIDでは分岐しない。
   トークンが届かない場合（読み込み失敗）に備え、各 var() の第2引数に暗い既定色を置いている。 */
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background-color:var(--bg,#0d0c1a);color:var(--text,#ece8f7)}
.ct-page{font-size:16px;line-height:1.8}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px 56px}
a{color:var(--accent,#3de8ff)}

/* ヘッダー */
.site-head{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:14px 0 10px}
.site-brand{display:flex;flex-direction:column;text-decoration:none;color:var(--text,#e8eaf4);margin-right:auto}
.site-brand b{font:800 20px/1.3 var(--f-display,serif);letter-spacing:.08em;color:var(--accent,#3de8ff)}
.site-brand small{font-size:12px;color:var(--mute,#9298b4);letter-spacing:.06em}
.site-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.site-nav a.ct-tab{text-decoration:none;min-height:40px;padding:6px 12px;font-size:13px;flex:0 1 auto}
.site-head .ct-button{white-space:nowrap}
@media (max-width:640px){.site-nav{order:3;width:100%}.site-nav a.ct-tab{flex:1 1 auto}}

/* 本文 */
.hero{padding:28px 0 8px}
.hero .ct-heading{font-size:clamp(22px,5.2vw,36px)}
.lead{max-width:44em;margin:.8em 0 0;color:var(--text,#e8eaf4)}
.tool-stage{margin:18px 0 8px}
.sec{margin:44px 0 0}
.sec h2{font:800 clamp(19px,2.6vw,24px)/1.4 var(--f-display,serif);letter-spacing:.05em;margin:0 0 .6em;color:var(--text,#e8eaf4)}
.sec h3{font:700 16px/1.5 var(--f-body,sans-serif);margin:1.6em 0 .4em;color:var(--accent,#3de8ff);letter-spacing:.04em}
.sec p,.sec li{max-width:46em;color:var(--text,#e8eaf4)}
.sec ul,.sec ol{padding-left:1.3em}
.sec ul.cards{padding-left:0}
.sec li{margin:.3em 0}
.muted{color:var(--mute,#9298b4)}
.note{font-size:14px;color:var(--mute,#9298b4)}

/* ツールのカード一覧 */
.sec .cards,.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:18px 0 0;padding:0;list-style:none}
.card{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:18px 18px 16px;border-radius:8px;text-decoration:none;color:var(--text,#e8eaf4)}
.card.ct-panel{border-color:var(--line2,#3d4975)}
.card:hover,.card:focus-visible{border-color:var(--accent,#3de8ff);box-shadow:0 0 18px var(--glow2,rgba(61,232,255,.15))}
.card .ct-kicker{margin:0}
.card strong{font:800 19px/1.45 var(--f-display,serif);letter-spacing:.04em}
.card span.d{font-size:14px;line-height:1.7;color:var(--mute,#9298b4)}
.card .go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:var(--accent,#3de8ff)}

/* フッター */
.site-foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--line,#2a3152);font-size:13px;color:var(--mute,#9298b4)}
.site-foot a{color:var(--mute,#9298b4)}
.site-foot p{margin:.3em 0}

/* ジェネレーター等の埋め込み先：Shadow DOM 側は独自デザイン（docs/04）なので、周りにだけ余白を持たせる */
.tool-stage > div{min-height:320px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}