/* ================= テーマ ================= */
:root{
  --ink:#1d2733; --ai:#2f4f6b; --ai-thin:#8fa6b8;
  --paper:#fbf7ec; --board:#e7ebef; --panel:#fff;
  --shu:#c8492f; --midori:#2e7d5b; --ki:#c99a1e;
  --line:#d5dbe1; --muted:#6b7883;
  --radius:8px; --headbg:#1d2733; --headfg:#fff;
  --btn:#3c4d5e; --btn-b:#55697c;
  --accent:#2f4f6b;
  --cell:24px; --ruby:0px;
  --font-ui:"Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --font-paper:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
/* ---- かわいい共通（形・フォント） ---- */
body.cute{
  --radius:18px;
  --font-ui:"Hiragino Maru Gothic ProN","Rounded Mplus 1c","Yu Gothic UI",system-ui,sans-serif;
}
/* ---- 1. もりのパンダ ---- */
body.t-mori{
  --ink:#4a3b3f; --ai:#7fa86b; --ai-thin:#b9d3a8;
  --paper:#fffdf4; --board:#f3f8ea; --panel:#fffdfa;
  --shu:#e8836f; --midori:#6faa72; --ki:#e8b53c;
  --line:#e6dfd2; --muted:#9a8d84;
  --headbg:#a8cf8e; --headfg:#3f4d33; --btn:#fff5e0; --btn-b:#e6d3a8; --accent:#e8836f;
  --dot1:#fff6c9; --dot2:#ffe3dc;
}
/* ---- 2. いちごミルク ---- */
body.t-ichigo{
  --ink:#5b3b45; --ai:#d47a94; --ai-thin:#eebccb;
  --paper:#fffafb; --board:#fdeef2; --panel:#fffdfd;
  --shu:#d95b7a; --midori:#7bb08a; --ki:#e0a83c;
  --line:#f0dbe1; --muted:#a98d95;
  --headbg:#f3a9bd; --headfg:#5b2f3e; --btn:#fff4f7; --btn-b:#f0cbd6; --accent:#d95b7a;
  --dot1:#ffe1e9; --dot2:#fff3d6;
}
/* ---- 3. そらとくじら ---- */
body.t-sora{
  --ink:#2f4557; --ai:#5b9dc4; --ai-thin:#aed3e6;
  --paper:#fcfdff; --board:#e6f2f9; --panel:#ffffff;
  --shu:#e88a5f; --midori:#5fae9a; --ki:#e2b04c;
  --line:#d6e6ef; --muted:#7e94a3;
  --headbg:#8ecbe6; --headfg:#25404f; --btn:#f2fbff; --btn-b:#c2e0ee; --accent:#3f8fb8;
  --dot1:#d6eefa; --dot2:#fff6d9;
}
/* ---- 4. よぞらとほし ---- */
body.t-yozora{
  --ink:#e8ecf5; --ai:#8ba2d8; --ai-thin:#5c6b95;
  --paper:#fdfaf0; --board:#232a44; --panel:#2d3552;
  --shu:#f2907c; --midori:#7fc9a4; --ki:#f0c65c;
  --line:#454f75; --muted:#a7b0cc;
  --headbg:#1a2038; --headfg:#f4d98a; --btn:#3a4468; --btn-b:#56618c; --accent:#f0c65c;
  --dot1:#3d4770; --dot2:#4a5585;
}
/* ---- 5. れもんとはちみつ ---- */
body.t-lemon{
  --ink:#59492c; --ai:#c9a233; --ai-thin:#e3cd8a;
  --paper:#fffdf2; --board:#fdf4d9; --panel:#fffefa;
  --shu:#dd8236; --midori:#89a95e; --ki:#d7a92c;
  --line:#ecdfb8; --muted:#a2926c;
  --headbg:#f5d774; --headfg:#5a4718; --btn:#fffbe8; --btn-b:#e8d49a; --accent:#dd8236;
  --dot1:#fff2c2; --dot2:#ffe6bd;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-ui); background:var(--board); color:var(--ink); line-height:1.75;}
body.cute{
  background-image:radial-gradient(circle at 12% 20%, var(--dot1) 0 6px, transparent 7px),
                   radial-gradient(circle at 78% 62%, var(--dot2) 0 5px, transparent 6px);
  background-size:180px 180px, 220px 220px;
}
body.t-yozora{
  background-image:radial-gradient(circle at 15% 22%, var(--dot1) 0 2px, transparent 3px),
                   radial-gradient(circle at 72% 58%, var(--dot2) 0 2px, transparent 3px),
                   radial-gradient(circle at 40% 80%, var(--dot1) 0 1.5px, transparent 2.5px);
  background-size:130px 130px, 190px 190px, 90px 90px;
}
body.t-yozora .step,body.t-yozora #lvOut,body.t-yozora textarea,
body.t-yozora input,body.t-yozora select{background:var(--panel); color:var(--ink)}
body.t-yozora .bar{background:#3c456a}
body.t-yozora #convLog{background:#39426a; color:#dbe2f2}
body.t-yozora details.hint div{background:#39426a; color:#dbe2f2}
body.t-yozora .leads button{background:#3a4468; border-color:#5c6b95; color:#f0c65c}
body.t-yozora .why button{background:#3a4468; border-color:#5c6b95; color:#f2907c}
body.t-yozora .sizes button,body.t-yozora .levels button{background:#3a4468; color:#dbe2f2}
body.t-yozora .sizes button.on,body.t-yozora .levels button.on{background:var(--accent); color:#26304f}
body.t-yozora .modal-box{background:#2d3552; color:var(--ink)}
body.t-yozora .modal-actions button{background:#3a4468; color:#dbe2f2}

/* キーボード操作の見えるフォーカス */
button:focus-visible,select:focus-visible,input:focus-visible,
textarea:focus-visible,summary:focus-visible,a:focus-visible{
  outline:3px solid var(--accent); outline-offset:1px}

header{background:var(--headbg); color:var(--headfg); padding:12px 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
header h1{font-size:17px; margin:0; letter-spacing:.06em; font-weight:700; display:flex; align-items:center; gap:8px}
header h1 img{width:0; height:0; opacity:0; transition:.2s}
body.cute header h1 img{width:34px; height:34px; opacity:1; border-radius:50%; border:2px solid #fff}
header .msg{font-size:12.5px; opacity:.85}
header .spacer{flex:1}
select,button,input,textarea{font-family:inherit; font-size:14px}
header select,header button{
  background:var(--btn); color:var(--headfg); border:1px solid var(--btn-b);
  border-radius:var(--radius); padding:6px 12px; cursor:pointer;
}
body:not(.cute) header select,body:not(.cute) header button{color:#fff}
body.cute header select,body.cute header button{color:#5c4b3a}
header button:hover{filter:brightness(1.08)}

/* スマホ用タブ（かく／原稿用紙） */
#mobileTabs{display:none}

main{display:flex; min-height:calc(100vh - 56px)}
#left{width:45%; min-width:350px; background:var(--panel); padding:0 22px 60px;
  overflow-y:auto; max-height:calc(100vh - 56px); border-right:1px solid var(--line)}
#right{flex:1; padding:24px; overflow:auto; max-height:calc(100vh - 56px);
  display:flex; flex-direction:column; align-items:center; gap:20px}

.hero{display:none; text-align:center; padding:10px 0 0}
body.cute .hero{display:block}
.hero img{width:210px; max-width:100%; border-radius:20px}
.hero p{font-size:13px; color:var(--muted); margin:2px 0 0}

h2.sec{font-size:14px; letter-spacing:.08em; color:var(--accent);
  border-bottom:2px solid var(--accent); padding-bottom:5px; margin:24px 0 12px}
body.cute h2.sec{border-bottom:2px dotted var(--accent)}

.book-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:3px}
.field input{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:6px}

/* ステップ */
.step{border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px;
  margin-bottom:12px; background:var(--panel)}
body.cute .step{border:2px solid var(--line); box-shadow:0 2px 0 var(--line)}
.step .q{font-weight:700; font-size:15px; margin-bottom:3px}
.step .sub{font-size:12px; color:var(--muted); margin-bottom:9px}
.step textarea{width:100%; min-height:66px; padding:8px 9px; border:1px solid var(--line);
  border-radius:6px; resize:vertical; line-height:1.8}
.step textarea:focus,.field input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.tag{display:inline-block; font-size:11px; padding:1px 8px; border-radius:99px; margin-left:6px; vertical-align:2px}
.tag.jibun{background:#e3f0ea; color:var(--midori)}
.tag.ara{background:#fdeeea; color:var(--shu)}
.tag.hon{background:#eaeff5; color:#3a5c7a}

/* リード文（書き出しボタン） */
.leads{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px}
.leads button{
  background:#f4f7fa; border:1px dashed var(--ai-thin); color:var(--accent);
  border-radius:99px; padding:4px 11px; cursor:pointer; font-size:12.5px;
}
body.cute .leads button{background:#fff6e2; border-color:#e6cfa0; color:#8a6a2f}
.leads button:hover{filter:brightness(.96)}
.leads .lb{font-size:11.5px; color:var(--muted); width:100%; margin-bottom:1px}

details.hint{margin-top:8px}
details.hint summary{font-size:12.5px; color:var(--accent); cursor:pointer}
details.hint div{font-size:12.5px; background:#f3f7fa; border-left:3px solid var(--ai-thin);
  padding:8px 10px; margin-top:6px; white-space:pre-wrap; border-radius:0 6px 6px 0}
body.cute details.hint div{background:#fff6e2; border-left-color:#e6cfa0}

.arasuji-slots{display:flex; flex-direction:column; gap:7px}
.slot{display:flex; align-items:center; gap:7px}
.slot span{font-size:13px; white-space:nowrap; color:var(--muted); min-width:78px}
.slot input{flex:1; min-width:0; padding:6px 8px; border:1px solid var(--line); border-radius:6px}
.counter{font-size:11px; color:var(--muted); text-align:right; margin-top:4px}

.why{margin-top:9px}
.why button{background:#eef3f7; border:1px dashed var(--ai-thin); color:var(--accent);
  border-radius:99px; padding:4px 12px; cursor:pointer; font-size:12.5px}
body.cute .why button{background:#fdeee9; border-color:#eec0b4; color:#b85b45}
.why-box{margin-top:7px; padding-left:12px; border-left:3px solid var(--line)}
.why-box label{font-size:12px; color:var(--muted)}
.why-box textarea{width:100%; min-height:54px; padding:8px; border:1px solid var(--line); border-radius:6px}

.nudge{font-size:12.5px; color:var(--shu); margin-top:6px; display:none}
.nudge.on{display:block}

#buildBtn{width:100%; padding:13px; background:var(--accent); color:#fff; border:0;
  border-radius:var(--radius); font-size:15px; font-weight:700; cursor:pointer; margin-top:4px}
#buildBtn:hover{filter:brightness(1.08)}

#body{width:100%; min-height:230px; padding:11px; border:1px solid var(--line);
  border-radius:6px; resize:vertical; line-height:1.95}

/* 保存できない環境のお知らせ */
#storageNote{display:none; font-size:12px; padding:6px 10px; border-radius:6px;
  background:#fdf5e3; color:#8a6a10; margin-top:6px}
#storageNote.on{display:block}

/* メーター */
.meters{position:sticky; top:0; background:var(--panel); padding:12px 0; z-index:5;
  border-bottom:1px solid var(--line)}
.meter-row{display:flex; align-items:center; gap:9px; font-size:12.5px; margin-bottom:6px}
.meter-row b{min-width:66px; color:var(--muted)}
.bar{flex:1; height:10px; background:#e9edf1; border-radius:99px; overflow:hidden}
body.cute .bar{background:#f0e9dd}
.bar i{display:block; height:100%; width:0; border-radius:99px; transition:width .25s}
.bar i.ok{background:var(--midori)} .bar i.warn{background:var(--ki)}
.bar i.bad{background:var(--shu)} .bar i.prog{background:var(--accent)}
.meter-row em{font-style:normal; min-width:150px; text-align:right}
#araMsg{font-size:12.5px; padding:6px 10px; border-radius:6px}
#araMsg.ok{background:#e9f4ef; color:var(--midori)}
#araMsg.warn{background:#fdf5e3; color:#8a6a10}
#araMsg.bad{background:#fdeeea; color:var(--shu)}

/* 分量セレクタ */
.sizes{display:flex; flex-wrap:wrap; gap:7px}
.sizes button{padding:7px 12px; border:1px solid var(--line); background:var(--panel);
  border-radius:99px; cursor:pointer; font-size:13px}
.sizes button.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.sizes input{width:88px; padding:6px 8px; border:1px solid var(--line); border-radius:6px}

/* レベル比較 */
.levels{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px}
.levels button{padding:6px 11px; border:1px solid var(--line); background:var(--panel);
  border-radius:99px; cursor:pointer; font-size:12.5px}
.levels button.on{background:var(--accent); color:#fff; border-color:var(--accent)}
#lvOut{border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px;
  background:#fafbfc; white-space:pre-wrap; line-height:2; font-family:var(--font-paper); font-size:14.5px}
body.cute #lvOut{background:#fffdf4}
#lvNote{font-size:12px; color:var(--muted); margin:7px 0 9px}
#adoptBtn{padding:9px 14px; border:0; border-radius:var(--radius); background:var(--midori);
  color:#fff; cursor:pointer; font-size:13.5px; margin-top:9px}

.kopt{display:flex; flex-direction:column; gap:4px; margin:-2px 0 9px; font-size:12.5px; color:var(--muted)}
.kopt label{cursor:pointer; display:flex; align-items:center; gap:6px}
#convLog{font-size:12px; margin-top:8px; padding:8px 10px; border-radius:6px;
  background:#eef3f7; color:#3c5468; display:none; line-height:1.85}
body.cute #convLog{background:#fff6e2; color:#7a6236}
#convLog.on{display:block}
#convLog b{color:var(--accent)}

/* 漢字辞書の読み込み進捗 */
#dictStatus{display:none; margin:8px 0; font-size:12.5px; color:var(--muted)}
#dictStatus.on{display:block}
#dictStatus .bar{margin-top:4px}

/* ===== 原稿用紙 ===== */
#sheets{display:flex; flex-direction:column; gap:22px; align-items:center}
.sheet{background:var(--paper); padding:20px 20px 12px; position:relative;
  box-shadow:0 2px 14px rgba(29,39,51,.13)}
body.cute .sheet{border-radius:14px; box-shadow:0 4px 0 #e4dcc8, 0 8px 20px rgba(120,100,60,.14)}
.grid{display:flex; flex-direction:row-reverse; border:2px solid var(--ai)}
.col{display:flex; flex-direction:row; border-left:1px solid var(--ai)}
.col:first-child{border-left:0}
.cells{display:flex; flex-direction:column}
.rubycol{width:var(--ruby); border-left:1px dashed var(--ai-thin); align-self:stretch}
.cell{width:var(--cell); height:var(--cell); border-top:1px solid var(--ai-thin);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-paper); font-size:calc(var(--cell)*.74); line-height:1;
  writing-mode:vertical-rl; text-orientation:upright; color:var(--ink)}
.cell:first-child{border-top:0}
.cell.mid{border-top:1px solid var(--ai)}
.hang{width:var(--cell); height:calc(var(--cell)*.55); display:flex; justify-content:center;
  font-family:var(--font-paper); font-size:calc(var(--cell)*.74); line-height:1;
  writing-mode:vertical-rl; text-orientation:upright}
.pageno{text-align:center; font-size:11px; color:var(--muted); margin-top:7px; letter-spacing:.1em}
body.kyokasho .cell{font-family:"UD デジタル 教科書体 NK-R","Yu Mincho",serif}
body.nogrid .cell,body.nogrid .col{border:0}
body.nogrid .grid{border:0}
body.nogrid .rubycol{border-left:0}

/* 印刷：マス寸法は mm 単位でA4に収まる値に切りかえる（logic.js の printMetrics と対応）。
   ふりがな欄のある低・中学年は用紙を横向きにする（向きは #pageStyle を app.js が更新） */
@media print{
  body{--cell:8.5mm; --ruby:0mm}
  body.g-low{--cell:8mm; --ruby:3.3mm}
  body.g-mid{--cell:8mm; --ruby:2.9mm}
}
@media print{
  header,#left,#mobileTabs{display:none !important}
  main{display:block}
  #right{max-height:none; padding:0; overflow:visible; display:block}
  body{background:#fff; background-image:none}
  .sheet{box-shadow:none; border-radius:0; page-break-after:always; break-after:page;
    break-inside:avoid; page-break-inside:avoid; margin:0 auto; padding:0}
  .sheet:last-child{page-break-after:auto; break-after:auto}
  .modal{display:none !important}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  @page{size:A4 portrait; margin:14mm}
}

/* ===== モーダル共通 ===== */
.modal{position:fixed; inset:0; background:rgba(29,39,51,.55); display:none;
  align-items:center; justify-content:center; z-index:50; padding:16px}
.modal.on{display:flex}
.modal-box{background:#fff; border-radius:14px; padding:22px 24px; width:350px;
  max-width:calc(100vw - 32px); max-height:calc(100vh - 48px); overflow-y:auto}
.modal-box h3{margin:0 0 4px; font-size:16px}
.modal-box p{margin:0 0 14px; font-size:12.5px; color:var(--muted)}
.modal-box label{display:block; padding:9px 11px; border:1px solid var(--line);
  border-radius:8px; margin-bottom:7px; cursor:pointer; font-size:13.5px}
.modal-box label small{display:block; color:var(--muted); font-size:11.5px}
.modal-actions{display:flex; gap:8px; margin-top:12px}
.modal-actions button{flex:1; padding:9px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:#fff}
.modal-actions button.go{background:var(--accent); color:#fff; border-color:var(--accent)}
.modal-actions button.danger{background:var(--shu); color:#fff; border-color:var(--shu)}

/* このツールについて */
#aboutModal .modal-box{width:480px}
#aboutModal ul{margin:0 0 14px; padding-left:0; list-style:none; font-size:13px}
#aboutModal li{padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  margin-bottom:7px; line-height:1.7}
#aboutModal li b{color:var(--accent)}
#aboutModal .credit{font-size:11.5px; color:var(--muted); line-height:1.7}

/* ===== 画面が狭いとき ===== */
@media(max-width:860px){
  main{flex-direction:column}
  #left{width:100%; min-width:0; max-height:none; border-right:0; border-bottom:1px solid var(--line)}
  #right{max-height:none}
}

/* スマホ：タブで「かく」と「原稿用紙」を切りかえる */
@media(max-width:700px){
  header{padding:10px 12px; gap:8px}
  header .msg{display:none}
  #mobileTabs{display:flex; position:sticky; top:0; z-index:20;
    background:var(--panel); border-bottom:2px solid var(--line)}
  #mobileTabs button{flex:1; padding:12px 8px; font-size:14px; font-weight:700;
    background:none; border:0; border-bottom:3px solid transparent;
    color:var(--muted); cursor:pointer}
  #mobileTabs button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent)}
  body.view-write #right{display:none}
  body.view-paper #left{display:none}
  #left{padding:0 14px 60px; border-bottom:0}
  .meters{top:0}
  /* 原稿用紙は横スクロール＋ピンチで拡大縮小できる */
  #right{padding:14px; overflow-x:auto; touch-action:pan-x pan-y pinch-zoom;
    align-items:flex-start}
  #sheets{align-items:flex-start; min-width:max-content}
  .book-grid{grid-template-columns:1fr}
  .meter-row em{min-width:0}
}