:root { --bg:#f7f7f4; --fg:#222; --panel:#eef1f5; --line:#d5dbe3; --accent:#1f2a44; --muted:#667; }
@media (prefers-color-scheme: dark) { :root { --bg:#151719; --fg:#e6e6e2; --panel:#1d2126; --line:#2e343b; --accent:#9fb4e6; --muted:#98a; } }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font-family: "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; }
body { display:flex; flex-direction:column; height:100dvh; }
.top { display:flex; gap:12px; align-items:center; padding:8px 12px; background:var(--accent); color:#fff; font-family: system-ui, sans-serif; font-size:14px; }
.top .work { background:transparent; color:#fff; border:0; font-size:15px; font-weight:bold; }
.top .today { margin-left:auto; display:flex; gap:12px; }
.top .icon { background:transparent; color:#fff; border:0; font-size:18px; }
.build { font-size:10px; opacity:.6; }
.tabs { display:flex; gap:2px; overflow-x:auto; padding:6px 8px 0; background:var(--panel); border-bottom:1px solid var(--line); font-family: system-ui, sans-serif; font-size:13px; }
.tabs button { white-space:nowrap; border:1px solid var(--line); border-bottom:0; background:var(--line); color:var(--fg); padding:6px 12px; border-radius:8px 8px 0 0; }
.tabs button.on { background:var(--bg); font-weight:bold; }
.main { flex:1; display:flex; min-height:0; }
.panel { width:var(--panel-w, 38%); min-width:240px; max-width:45%; display:flex; flex-direction:column; background:var(--panel); border-right:1px solid var(--line); font-family: system-ui, sans-serif; }
.divider { width:6px; cursor:col-resize; background:transparent; touch-action:none; }
.ptabs { display:flex; gap:2px; padding:6px 6px 0; overflow-x:auto; font-size:12px; }
.ptabs button { white-space:nowrap; border:0; background:var(--line); color:var(--fg); padding:4px 10px; border-radius:6px 6px 0 0; }
.ptabs button.on { background:var(--bg); font-weight:bold; }
.pbody { flex:1; overflow:auto; padding:10px 12px; font-size:14px; line-height:1.7; white-space:pre-wrap; }
.pbody textarea { width:100%; height:100%; border:0; background:transparent; color:inherit; font:inherit; resize:none; }
.imgbtn { display:inline-flex; align-items:center; gap:4px; margin:2px 2px; padding:4px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; font-size:13px; cursor:pointer; }
.pbody img { display:block; margin:6px 0; }
.editor { flex:1; display:flex; justify-content:center; min-width:0; }
.text { width:100%; max-width:46em; height:100%; border:0; padding:24px 20px; background:var(--bg); color:var(--fg); font:inherit; font-size:17px; line-height:1.9; resize:none; outline:none; }
.foot { display:flex; gap:16px; padding:6px 12px; font-size:12px; color:var(--muted); background:var(--panel); border-top:1px solid var(--line); font-family: system-ui, sans-serif; }
.foot #saveState { margin-left:auto; }
.ptoggle { display:none; }
.grab { display:none; }
dialog { border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--fg); font-family: system-ui, sans-serif; max-width:560px; width:92vw; }
dialog::backdrop { background: rgba(20,24,34,.45); }
dialog h2 { margin:4px 0 14px; font-size:18px; }
dialog menu { display:flex; justify-content:flex-end; gap:8px; margin:14px 0 0; padding:0; }
dialog menu button, .winit { font: inherit; font-size:13px; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--fg); cursor:pointer; }
dialog label { display:block; margin:10px 0; } dialog input, dialog textarea { width:100%; font:inherit; }
.works { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:10px; max-height:60vh; overflow:auto; }
.wcard { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:10px; }
.wcard.on { border-width:2px; border-color:var(--accent); }
.wmain { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left; border:0; background:transparent; color:var(--fg); font:inherit; padding:2px; cursor:pointer; }
.wname { font-size:16px; font-weight:bold; }
.wmeta { font-size:12px; color:var(--muted); }
.wcard.on .wmeta::before { content:'▶ '; }
.episodes li { display:flex; gap:8px; align-items:center; margin:4px 0; }

/* スマホ：本文全面＋資料は下からのシート */
@media (max-width: 899px) {
  .panel { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-width:none; height:55dvh; transform:translateY(100%); transition:transform .2s; border-right:0; border-top:1px solid var(--line); border-radius:14px 14px 0 0; box-shadow:0 -6px 16px rgba(0,0,0,.15); z-index:5; }
  .panel.open { transform:translateY(0); }
  .panel.half { height:50dvh; } .panel.full { height:90dvh; }
  .grab { display:block; width:40px; height:5px; border-radius:3px; background:var(--muted); margin:6px auto; }
  .divider { display:none; }
  .ptoggle { display:block; position:fixed; right:14px; bottom:44px; z-index:6; padding:10px 14px; border-radius:20px; border:0; background:var(--accent); color:#fff; font-family: system-ui, sans-serif; }
  .foot { gap:8px; } .foot #totalStats { display:none; }
  .text { padding:16px 14px; font-size:16px; }
}