/* ============================================================
送電世界 共通デザインシステム（GLYPHALT / CHROMALT-Q 基準）
各ページの index.html で、theme.css → alt.css（ALT ツールだけ）→
style.css → main.css の順に で並べて読む。
@import は使わない（style.css を読み終わるまで theme.css が始まらず、直列になる）。
ビットマップフォントは等倍の整数倍だけ、line-height / letter-spacing は
整数 px（詳細と見本は _standard/pixel-style/）。
============================================================ */
:root {
--bg: #ffffff;
--panel: #f5f8fa;
--panel2: #eaf0f4;
--border: #99bbcc;
--border2: #ccdde6;
--text: #333355;
--sub: #556688;
--accent: #227777;
--accent2: #115555;
--danger: #993333;
--success: #2e8b47;
--success2: #1c5c2d;
/* accent に反応する要素の薄い下地。hover・選択中・OKトースト共通 */
--hover: #eef5f5;
/* 出力キャンバスの下地。ドット絵を載せる暗色で、--text とは別物 */
--canvas-bg: #111111;
/* 暗い出力欄（ASCII アートやテキストの成果物）。--canvas-bg より青みのある別物 */
--output-bg: #1a1d28;
--output-fg: #c8cfe8;
/* --danger の濃い側。枠線とホバーに使う（--accent と --accent2 の関係と同じ） */
--danger2: #662222;
--radius: 3px;
/* Courier New はビットマップではないので、等幅枠もマルミーニャにする。
PixelMplus12 は同じ等幅（半角 6px / 全角 12px）で、マルミーニャに無い字（▶ など）の受け皿 */
--font-mono: 'MaruMinya', 'PixelMplus12', 'Courier New', monospace;
--font-heading: 'TenoText 8x8', var(--font-mono);
--font-body: 'MaruMinya', var(--font-mono);
/* 本文専用の日本語ゴシック（POEM / POLICY）。ビットマップではない。
UI 側の --font-body とは別枠。半角カナや絵文字が出るのでフォールバックを厚めに取る */
--font-read: 'M PLUS 2', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
/* フッターなどの控えめな文字色（PROFILE / POLICY） */
--muted: #aabbcc;
}
@font-face {
font-family: 'TenoText 8x8';
src: url('/fonts/TenoText 8x8.otf') format('opentype');
}
@font-face {
font-family: 'PixelMplus12';
src: url('/fonts/PixelMplus12-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'MaruMinya';
src: url('/fonts/x12y12pxMaruMinya.ttf') format('truetype');
}
/* ドット絵フォントは太字を持たない。ブラウザの合成ボールドで輪郭が滲むのを止める。
M PLUS 2（--font-read）は本物の太字を持つので、POEM / POLICY 本文の太字は残る */
:root { font-synthesis: none; }
/* ドット絵の ![]()
に枠線を付けるときは box-sizing: content-box にして、width/height を
中身の寸法（実寸の整数倍）で書く。border-box のままだと枠線の分だけ中身が縮み、非整数倍になる */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 12px;
line-height: 16px;
margin: 0;
}
/* ── ヘッダー（GLYPHALT/TEXTALTと共通の見た目） ── */
.site-header {
border-bottom: 2px solid var(--border);
padding: 12px 20px;
display: flex;
flex-wrap: wrap; /* 狭い画面でロゴとタグラインを段に分ける（長いロゴは で折れる） */
align-items: baseline;
gap: 4px 16px;
}
/* スクロールしても残すヘッダ（TEXTALT / TENOMOJI）。