/* 共通サイドバー（index.html と同じ挙動） */
:root{
  --sb-bg:#121826;
  --sb-border:rgba(255,255,255,0.08);
  --sb-text-muted:rgba(255,255,255,0.62);
  --sb-hover:rgba(255,255,255,0.06);
  --sb-active:rgba(0,180,216,0.15);
  --sb-icon:#7a8499;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  overflow:auto;
}
.app-sidebar{
  width:220px;
  min-height:100vh;
  background:var(--sb-bg);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 16px 16px;
  border-bottom:1px solid var(--sb-border);
  text-decoration:none;
}
.sidebar-brand-icon{
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,180,216,0.45);
}
.sidebar-brand-icon img{width:100%;height:100%;object-fit:contain;border-radius:9px;display:block;}
.sidebar-brand-name{font-size:.95rem;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.2;}
.app-sidebar nav{padding:10px 0 16px;flex:1;overflow-y:auto;}
.nav-section-label{padding:12px 16px 4px;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-text-muted);}
.nav-divider{height:1px;background:var(--sb-border);margin:10px 16px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:rgba(255,255,255,0.88);text-decoration:none;font-size:.92rem;}
.nav-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--sb-icon);flex-shrink:0;}
.nav-item:hover{background:var(--sb-hover);color:#fff;}
.nav-item:hover .nav-icon{color:#fff;}
.nav-item.active{background:var(--sb-active);color:#fff;}
.nav-item.active .nav-icon{color:#00b4d8;}

.app-main{flex:1;min-width:0;}

/* モバイル: サイドバーをドロワー化 */
.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:900;
}
body.sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto;}
.mobile-topbar{
  display:none;align-items:center;gap:10px;margin:14px 14px 12px;
}
.btn-sidebar-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.9);
  cursor:pointer;
}
.btn-sidebar-toggle:active{transform:translateY(1px);}
.mobile-topbar-title{font-size:.95rem;font-weight:700;color:rgba(255,255,255,0.92);line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

@media (max-width:840px){
  body{overflow:hidden;overscroll-behavior:none;}
  .app-main{height:100vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
  .mobile-topbar{display:flex;}
  .app-sidebar{
    position:fixed !important;
    top:0 !important;left:0 !important;
    height:100vh !important;min-height:100vh !important;
    width:min(86vw,320px) !important;max-width:320px !important;
    z-index:950 !important;
    box-shadow:12px 0 40px rgba(0,0,0,0.45);
  }
}