:root{
  --royal:#2a5db0; --royal-d:#1e488a; --royal-l:#4a86e8;
  --ink:#182238; --muted:#68748c; --line:#e2e8f2;
  --bg:#eef2f9; --card:#ffffff; --ok:#189d63; --ok-bg:#e3f5ec;
  --warn:#c67a10; --chip:#eaf1fc;
  --shadow:0 2px 10px rgba(24,50,100,.07);
  --r:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI",system-ui,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  background:linear-gradient(180deg,#e6edf8 0,var(--bg) 260px);color:var(--ink);line-height:1.65;
  padding:64px 16px calc(84px + env(safe-area-inset-bottom));}
.wrap{max-width:760px;margin:0 auto}
h1{font-size:21px;margin:8px 0 4px;letter-spacing:.01em}
.sub{color:var(--muted);font-size:13px;margin-bottom:16px}
code{background:#eef3fb;border-radius:5px;padding:0 5px;font-size:12.5px;color:var(--royal-d)}

/* ===== 上部ヘッダー（固定） ===== */
.tophead{position:fixed;inset:0 0 auto 0;z-index:30;height:52px;display:flex;align-items:center;gap:10px;
  padding:0 16px;background:linear-gradient(90deg,var(--royal-d),var(--royal));color:#fff;
  box-shadow:0 2px 12px rgba(30,72,138,.32)}
.tophead .brand{font-weight:700;font-size:13.5px;letter-spacing:.08em}
.tophead .sync{margin-left:auto;font-size:11px;color:#cfe0ff;white-space:nowrap}
.tophead .sync.ok{color:#96f0c3}
.tophead .sync.warn{color:#ffd28a}

/* ===== 下部タブバー（固定・アプリ風） ===== */
.tabbar{position:fixed;inset:auto 0 0 0;z-index:30;display:flex;justify-content:center;gap:2px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:6px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(24,50,100,.08)}
.tabbar a{flex:1;max-width:130px;display:flex;flex-direction:column;align-items:center;gap:1px;
  text-decoration:none;color:var(--muted);font-size:10.5px;font-weight:600;padding:5px 0 3px;border-radius:14px}
.tabbar a .ico{font-size:21px;line-height:1.15}
.tabbar a.active{color:var(--royal);background:var(--chip)}

/* ===== 全体進捗バー ===== */
.bar{display:flex;align-items:center;gap:12px;margin:2px 0 16px;background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:10px 16px;box-shadow:var(--shadow)}
.bar .pct{font-size:12.5px;font-weight:700;color:var(--royal);white-space:nowrap}
.track{flex:1;height:10px;background:#e4eaf4;border-radius:99px;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,var(--royal),var(--royal-l));width:0;transition:width .3s;border-radius:99px}

/* ===== フェーズカード ===== */
.phase{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.phase h2{font-size:14.5px;margin:0;padding:13px 16px;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#f7fafe,#f0f4fb);border-bottom:1px solid var(--line)}
.phase h2 .tag{margin-left:auto;font-size:10.5px;font-weight:700;color:#fff;background:var(--royal);
  padding:3px 10px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.phase h2 .cnt{font-size:11px;font-weight:700;color:var(--royal);background:var(--chip);
  padding:3px 9px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.phase h2 .cnt.all{color:#fff;background:var(--ok)}
.items{padding:4px 16px 12px}
label.item{display:flex;gap:13px;align-items:flex-start;padding:12px 2px;min-height:48px;
  border-bottom:1px solid #f0f3f9;cursor:pointer;border-radius:8px;transition:background .12s}
label.item:last-child{border-bottom:none}
label.item:active{background:#f4f8fe}
label.item input{margin-top:3px;width:22px;height:22px;accent-color:var(--royal);flex-shrink:0;cursor:pointer}
label.item span{flex:1;font-size:14px}
label.item.done span{color:#9aa4b8;text-decoration:line-through}
.note{color:var(--warn);font-size:12px}
small.fn{display:block;color:var(--muted);font-size:12px;margin:4px 2px 14px}

/* ===== ホームカード ===== */
.home-card{position:relative;display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 42px 16px 18px;margin-bottom:12px;text-decoration:none;
  color:var(--ink);box-shadow:var(--shadow);transition:transform .12s}
.home-card:active{transform:scale(.985)}
.home-card::after{content:"›";position:absolute;right:18px;top:50%;transform:translateY(-54%);
  font-size:26px;color:#b9c4d8}
.home-card b{color:var(--royal);font-size:16.5px}
.home-card p{margin:5px 0 0;font-size:13px;color:var(--muted)}
.home-card p.stat{color:var(--ok);font-weight:700}

/* ===== デイリー ===== */
.memo{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;
  font:inherit;font-size:14px;resize:vertical;min-height:52px;background:#fbfcfe}
.memo:focus{outline:none;border-color:var(--royal-l)}
.streak{font-size:13.5px;margin:2px 0 8px;color:var(--muted)}
.streak b{color:var(--ok);font-size:22px;margin:0 2px}
.grid14{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px}
.grid14 .cell{width:38px;text-align:center}
.grid14 .box{width:38px;height:38px;border-radius:11px;background:#e7edf6;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#93a0b6;font-weight:600}
.grid14 .box.full{background:var(--ok);color:#fff;font-weight:800;font-size:14px}
.grid14 .box.part{background:#b9e2cd;color:#14603e}
.grid14 .cell.today .box{outline:2.5px solid var(--royal-l);outline-offset:1.5px}
.grid14 .d{font-size:10px;color:var(--muted);margin-top:3px}

/* ===== ドラフト ===== */
.draft{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;margin-bottom:12px;box-shadow:var(--shadow)}
.draft .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;gap:8px}
.draft .dh b{font-size:13.5px}
.draft pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:13.5px;margin:0;
  background:#f7f9fd;border:1px solid #eef1f7;border-radius:10px;padding:11px 13px;color:#2c3850}
.copy{border:1.5px solid var(--royal);color:var(--royal);background:#fff;border-radius:9px;
  padding:6px 14px;font-size:12px;cursor:pointer;font-weight:700;white-space:nowrap;flex-shrink:0}
.copy:hover{background:var(--royal);color:#fff}
.copy.copied{background:var(--ok);border-color:var(--ok);color:#fff}

/* ===== フォーム・ログ ===== */
.row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.row input[type=text],.row input[type=date],.row input[type=url],.row select{
  border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;font-size:13.5px;
  background:#fbfcfe;min-height:42px}
.row input:focus,.row select:focus{outline:none;border-color:var(--royal-l)}
.row input[type=text],.row input[type=url]{flex:1;min-width:150px}
.btn{border:none;background:var(--royal);color:#fff;border-radius:10px;min-height:42px;
  padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px rgba(42,93,176,.28)}
.btn:hover{background:var(--royal-d)}
ul.log{list-style:none;margin:0;padding:0}
ul.log li{display:flex;gap:9px;align-items:flex-start;padding:10px 2px;
  border-bottom:1px solid #f0f3f9;font-size:13.5px}
ul.log li:last-child{border-bottom:none}
ul.log li .when{color:var(--muted);white-space:nowrap;font-size:12.5px;margin-top:1px}
ul.log li .kind{background:var(--chip);color:var(--royal);border-radius:7px;
  padding:1px 8px;font-size:11.5px;font-weight:700;white-space:nowrap;margin-top:2px}
ul.log li .body{flex:1;word-break:break-word}
ul.log li .body a{color:var(--royal)}
ul.log li button.del{border:none;background:#fdf1f1;color:#c05555;cursor:pointer;font-size:11.5px;
  padding:3px 9px;border-radius:8px;white-space:nowrap;font-weight:600}
.status-chip{border-radius:7px;padding:1px 8px;font-size:11.5px;font-weight:700;white-space:nowrap;margin-top:2px}
.status-ネタ{background:#f5efdd;color:#8a6d1a}
.status-執筆中{background:#e2ebfa;color:#2a5db0}
.status-公開済{background:var(--ok-bg);color:var(--ok)}

@media (min-width:640px){
  h1{font-size:23px}
  .tophead{padding:0 22px}
  .grid14 .cell{width:42px}
  .grid14 .box{width:42px;height:42px}
}