/* サイドバー（960px 以上）／下のナビ（959px 以下）・上のバー（設計書 4-0） */
#app{min-height:100vh}
.sidebar{display:none}
.content{min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.topbar-space{flex:1}
.logo{font-family:var(--font-logo);letter-spacing:.2em;font-size:20px;font-weight:600;color:var(--text);text-decoration:none}
.top-settings{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text);border-radius:var(--r)}
.save-state{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.save-state.is-error{color:var(--danger);font-weight:600}
.main{padding:24px 16px calc(var(--navh) + 32px + env(safe-area-inset-bottom));max-width:1200px;margin:0 auto}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.bottomnav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.bottomnav .nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--navh);font-size:13px;color:var(--muted);text-decoration:none}
.bottomnav .nav-link[aria-current="page"]{color:var(--accent);font-weight:600}
body.typing .bottomnav{display:none}
.banner-area{padding:0 16px;max-width:1200px;margin:0 auto}
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;padding:12px 14px;border-radius:var(--r);border:1px solid}
.banner p{flex:1 1 240px}
.banner-danger{background:var(--danger-bg);color:var(--text);border-color:var(--danger)}
.banner-warn{background:var(--warn-bg);color:var(--text);border-color:var(--warn-text)}
.banner-info{background:var(--surface);border-color:var(--border-strong)}
@media (min-width:960px){
  #app{display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
  .sidebar{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:24px 16px;border-right:1px solid var(--border);background:var(--bg)}
  .sidebar .logo{font-size:24px;margin:0 8px 24px}
  .side-nav,.side-recent{list-style:none;margin:0;padding:0}
  .sidebar .nav-link{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;border-radius:var(--r);color:var(--text);text-decoration:none}
  .sidebar .nav-link:hover{background:var(--sunken)}
  .sidebar .nav-link[aria-current="page"]{background:var(--sunken);color:var(--accent);font-weight:600}
  .side-sep{border-top:1px solid var(--border);margin:16px 8px}
  .side-h{font-size:13px;color:var(--muted);margin:0 10px 6px}
  .side-recent a{display:block;padding:6px 10px;color:var(--text);text-decoration:none;border-radius:var(--r);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side-recent a:hover{background:var(--sunken)}
  .side-foot{margin-top:auto}
  .ai-status{font-size:13px;color:var(--muted);margin:8px 10px 0}
  .bottomnav,.logo-top,.top-settings{display:none}
  .main{padding:32px 32px 64px}
  .banner-area{padding:0 32px}
}
.main[data-screen="write"]{max-width:none}