/* AdsPulse 共通スタイル（新規ページ用）
   色変数/ボタン/テーブル/ログイン/ナビバー */

:root[data-theme="dark"] {
  --bg: #0f172a;
  --bg2: #1e293b;
  --bg3: #334155;
  --tx: #f1f5f9;
  --tx2: #cbd5e1;
  --tx3: #94a3b8;
  --bdr: #334155;
  --bdr2: #475569;
  --acc: #3b82f6;
  --acc2: #8b5cf6;
  --good: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f97316;
  --purple: #a855f7;
  --cyan: #06b6d4;
  --yellow: #eab308;
}
:root[data-theme="light"] {
  --bg: #f8fafc;
  --bg2: #ffffff;
  --bg3: #f1f5f9;
  --tx: #0f172a;
  --tx2: #475569;
  --tx3: #64748b;
  --bdr: #e2e8f0;
  --bdr2: #cbd5e1;
  --acc: #3b82f6;
  --acc2: #8b5cf6;
  --good: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --purple: #9333ea;
  --cyan: #0891b2;
  --yellow: #ca8a04;
}

/* ローカルフォント @font-face 宣言 (TTF は /assets/fonts/ 配下) */
@font-face {
  font-family: 'Nikumaru';
  src: url('/assets/fonts/07にくまるフォント.ttf') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Tamanegi Kaisho';
  src: url('/assets/fonts/玉ねぎ楷書激無料版v7改.ttf') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--tx);
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 13px; line-height: 1.5;
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==== Header ==== */
.app-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  background: var(--bg2); border-bottom: 1px solid var(--bdr);
  position: sticky; top: 0; z-index: 50;
}
.app-logo { font-size: 20px; font-weight: 800; color: var(--tx); letter-spacing: .5px; display: inline-flex; align-items: center; }
.app-logo span { color: var(--acc); }
/* ヘッダーロゴ画像: data-theme で light / dark を切り替え */
.app-logo-light, .app-logo-dark { height: 30px; vertical-align: middle; }
:root[data-theme="light"] .app-logo-dark  { display: none !important; }
:root[data-theme="light"] .app-logo-light { display: block !important; }
:root[data-theme="dark"]  .app-logo-light { display: none !important; }
:root[data-theme="dark"]  .app-logo-dark  { display: block !important; }
.app-header nav { display: flex; gap: 4px; margin-left: 8px; }
.nav-btn {
  display: inline-block; padding: 6px 14px;
  background: transparent; color: var(--tx2);
  border: 1px solid transparent; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: background .15s;
}
.nav-btn:hover { background: var(--bg3); text-decoration: none; }
.nav-btn.active {
  background: var(--acc); color: #fff; border-color: var(--acc); font-weight: 600;
}
.app-header .spacer { flex: 1; }
.app-header .hdr-btn {
  background: var(--bg3); color: var(--tx2);
  border: 1px solid var(--bdr2); border-radius: 6px;
  padding: 5px 12px; font-size: 11px; font-family: inherit;
  cursor: pointer;
}
.app-header .hdr-btn:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.user-chip {
  display: none; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: 20px; padding: 4px 12px;
  font-size: 11px; color: var(--tx);
}
.user-chip .logout-btn {
  background: transparent; border: none; color: var(--tx3);
  cursor: pointer; font-size: 11px; font-family: inherit;
  padding: 0 0 0 6px; border-left: 1px solid var(--bdr);
}
.user-chip .logout-btn:hover { color: var(--bad); }
.zoom-widget {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: 6px; padding: 2px 4px;
  font-size: 11px; color: var(--tx2);
}
.zoom-widget button {
  background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 4px;
  color: var(--tx2); padding: 2px 8px; cursor: pointer;
  font-family: inherit; font-size: 11px; min-width: 26px;
}
.zoom-widget button:hover { background: var(--acc); color: #fff; }
.zoom-widget #zoomVal { min-width: 42px; text-align: center; font-weight: 600; color: var(--tx); }

/* ==== Main area ==== */
.app-main { padding: 18px 20px; zoom: var(--tbl-zoom, 1); }
.page-placeholder {
  background: var(--bg2); border: 1px dashed var(--bdr2);
  border-radius: 10px; padding: 60px 20px;
  text-align: center; color: var(--tx3);
  font-size: 14px;
}
.page-placeholder h2 { color: var(--tx); margin: 0 0 8px; font-size: 18px; }

/* ==== Login overlay ==== */
.login-overlay {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.login-box {
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: 10px; padding: 30px 32px;
  width: 380px; max-width: 90%;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.login-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: .5px; color: var(--tx); text-align: center; }
.login-title span { color: var(--acc); }
.login-sub { color: var(--tx3); font-size: 11px; text-align: center; margin: 0 0 20px; }
.login-field { margin-bottom: 10px; }
.login-field input {
  width: 100%; padding: 10px 12px;
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx); font-size: 13px; font-family: inherit;
}
.login-field input:focus { outline: none; border-color: var(--acc); }
.login-btn {
  width: 100%; background: var(--acc); color: #fff;
  border: none; border-radius: 6px; padding: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  margin-top: 6px; font-family: inherit;
}
.login-btn:disabled { opacity: .5; cursor: not-allowed; }

/* disableDuring (連打抑制) で is-busy を付与されたボタンの見た目 */
button.is-busy, .is-busy {
  opacity: .65;
  cursor: progress !important;
  pointer-events: none;
  position: relative;
}
button.is-busy::after, .is-busy::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-spin 0.7s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
.login-err { color: var(--bad); font-size: 11px; text-align: center; margin: 8px 0 0; min-height: 14px; }
.login-msg { color: var(--good); font-size: 11px; text-align: center; margin: 4px 0 0; }
.login-link { text-align: center; margin: 14px 0 0; font-size: 11px; }
.login-link a { color: var(--acc); }

/* ==== パスワード変更モーダル ==== */
.pw-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.pw-modal .pw-box {
  background: var(--bg); border: 1px solid var(--bdr); border-radius: 10px;
  padding: 24px 28px; max-width: 440px; width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.pw-modal h3 { margin: 0 0 8px; color: var(--tx); font-size: 16px; }
.pw-modal p { color: var(--tx2); font-size: 12px; line-height: 1.6; margin: 4px 0 16px; }
.pw-modal input {
  width: 100%; padding: 9px 12px;
  background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx); font-size: 13px; font-family: inherit;
  margin-bottom: 10px;
}
.pw-modal .err { color: var(--bad); font-size: 11px; margin: 4px 0; min-height: 14px; }
.pw-modal button.primary {
  background: var(--acc); color: #fff; border: none; border-radius: 6px;
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; width: 100%;
}
.pw-modal button.primary:disabled { opacity: .5; cursor: not-allowed; }

/* ==== Multi-select ==== */
.ms-wrap { position: relative; display: inline-block; }
.ms-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx2); padding: 5px 10px 5px 12px; font-size: 12px; font-family: inherit;
  cursor: pointer; min-width: 100px;
}
.ms-btn:hover { border-color: var(--acc); }
.ms-btn.active { border-color: var(--acc); color: var(--tx); background: var(--bg2); }
.ms-btn .ms-count { color: var(--acc); font-weight: 700; }
.ms-btn .ms-caret { font-size: 14px; color: var(--tx2); margin-left: auto; padding-left: 6px; line-height: 1; }
.ms-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 8px;
  min-width: 220px; max-width: 340px; z-index: 50;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  padding: 8px;
}
.ms-search input {
  width: 100%; background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 5px;
  color: var(--tx); padding: 5px 8px; font-size: 12px; font-family: inherit;
  margin-bottom: 6px;
}
.ms-search input:focus { outline: none; border-color: var(--acc); }
.ms-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.ms-actions button {
  flex: 1; background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 5px;
  color: var(--tx2); padding: 4px 8px; font-size: 10px; cursor: pointer; font-family: inherit;
}
.ms-actions button:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.ms-options { max-height: 260px; overflow-y: auto; overflow-x: hidden; width: 100%; box-sizing: border-box; }
/* dropdown 自体にも幅指定 (テーブルセル内で配置されたときの親由来の width 計算崩れ対策) */
.ms-dropdown { box-sizing: border-box; }
.ms-opt {
  display: flex !important; flex-direction: row !important;
  align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 12px;
  color: var(--tx);
  /* table セル等から text-align / direction が継承されないよう明示 */
  text-align: left; justify-content: flex-start;
  width: 100%; box-sizing: border-box;
  min-height: 26px;
  line-height: 1.4;
}
.ms-opt:hover { background: var(--bg3); }
.ms-opt input[type=checkbox],
.ms-opt input[type=radio] { accent-color: var(--acc); cursor: pointer; flex: 0 0 auto; margin: 0; }
.ms-opt span {
  flex: 1 1 0%; min-width: 0;
  text-align: left; color: var(--tx);
  font-size: 12px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block;
}
.ms-empty { padding: 12px; text-align: center; color: var(--tx3); font-size: 11px; }

/* ==== 汎用モーダル ==== */
.app-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 9000; display: flex; align-items: center; justify-content: center;
}
.app-modal .modal-box {
  background: var(--bg); border: 1px solid var(--bdr); border-radius: 10px;
  padding: 24px 28px; max-width: 540px; width: 92%;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  max-height: 90vh; overflow-y: auto;
}
.app-modal h3 { margin: 0 0 12px; color: var(--tx); font-size: 16px; }
.app-modal .field { margin-bottom: 12px; }
.app-modal .field label { display: block; font-size: 11px; color: var(--tx3); font-weight: 600; margin-bottom: 4px; }
.app-modal input, .app-modal select, .app-modal textarea {
  width: 100%; background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx); padding: 8px 10px; font-size: 13px; font-family: inherit;
  box-sizing: border-box;
}
.app-modal input:focus, .app-modal select:focus, .app-modal textarea:focus { outline: none; border-color: var(--acc); }
.app-modal .preview { background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--tx2); margin: 8px 0; font-family: "SF Mono", monospace; max-height: 160px; overflow-y: auto; }
.app-modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.app-modal button.primary { background: var(--acc); color: #fff; border: none; border-radius: 6px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.app-modal button.primary:disabled { opacity: .5; cursor: not-allowed; }
.app-modal button.secondary { background: var(--bg3); color: var(--tx2); border: 1px solid var(--bdr2); border-radius: 6px; padding: 9px 20px; font-size: 13px; cursor: pointer; font-family: inherit; }
.app-modal .err { color: var(--bad); font-size: 11px; margin: 4px 0; min-height: 14px; }

/* ==== ローディングオーバーレイ ==== */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 8500; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.loading-overlay .spinner {
  width: 48px; height: 48px; border: 4px solid var(--bdr2);
  border-top-color: var(--acc); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-overlay .msg {
  position: absolute; top: calc(50% + 40px); left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==== AI Chat (簡易版、非dashboardページ) ==== */
.ai-fab-simple {
  position: fixed; bottom: 28px; right: 28px; width: 52px; height: 52px;
  background: linear-gradient(135deg, #D97757, #E8A17E);
  border: none; border-radius: 50%; cursor: pointer;
  box-shadow: 0 4px 20px rgba(217,119,87,.45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.ai-fab-simple:hover { transform: translateY(-2px); }
.ai-drawer-simple {
  position: fixed; bottom: 90px; right: 28px; width: 380px; max-width: 92%;
  max-height: 70vh; background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: 12px; z-index: 499; display: none; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,.4); overflow: hidden;
}
.ai-drawer-simple.open { display: flex; }
.ai-header-simple {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--bdr);
  font-size: 13px; font-weight: 600; color: var(--tx);
}
.ai-header-simple button { background: transparent; border: none; color: var(--tx3); font-size: 14px; cursor: pointer; }
.ai-header-simple button:hover { color: var(--tx); }
.ai-body-simple {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ai-msg {
  padding: 8px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5;
  max-width: 85%; word-wrap: break-word;
}
.ai-msg.user { background: var(--acc); color: #fff; align-self: flex-end; }
.ai-msg.ai   { background: var(--bg3); color: var(--tx); align-self: flex-start; }
.ai-msg.err  { background: rgba(239,68,68,.2); color: #ef4444; }
.ai-input-simple {
  display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--bdr);
}
.ai-input-simple textarea {
  flex: 1; background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx); padding: 6px 10px; font-size: 12px; resize: none; font-family: inherit;
}
.ai-input-simple textarea:focus { outline: none; border-color: var(--acc); }
.ai-input-simple button {
  background: var(--acc); color: #fff; border: none; border-radius: 6px;
  padding: 0 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* データ管理ページのナビ下の余白を詰める */
body[data-page="creative"] .app-main,
body[data-page="article"] .app-main,
body[data-page="title"] .app-main { padding-top: 8px; }

/* 媒体バッジ（ダッシュボードと完全統一: .bg + .bg-x） */
/* !important でテーブルセルの color 継承を上書き */
.bg{display:inline-block;font-size:10px;padding:2px 8px;border-radius:8px;font-weight:500;font-family:'Noto Sans JP',sans-serif}
.bg-b{background:rgba(59,130,246,.15)!important;color:var(--acc2)!important}
.bg-g{background:rgba(34,197,94,.15)!important;color:var(--green)!important}
.bg-r{background:rgba(239,68,68,.15)!important;color:var(--red)!important}
.bg-p{background:rgba(168,85,247,.15)!important;color:var(--purple)!important}
.bg-o{background:rgba(249,115,22,.15)!important;color:var(--orange)!important}
.bg-y{background:rgba(100,116,139,.15)!important;color:#94a3b8!important}
.bg-c{background:rgba(6,182,212,.15)!important;color:var(--cyan)!important}

/* CLチェックバッジ（creative/title/article/description 共通） */
.cl-badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:6px; font-weight:500; }
.cl-ok    { background: rgba(16,185,129,.2); color: #10b981; }
.cl-ng    { background: rgba(239,68,68,.2);  color: #ef4444; }
.cl-fix   { background: rgba(245,158,11,.2); color: #f59e0b; }
.cl-num   { background: rgba(139,92,246,.2); color: #a78bfa; }
.cl-ready { background: rgba(59,130,246,.2);  color: #3b82f6; }
.cl-submit{ background: rgba(6,182,212,.2);   color: #06b6d4; }
.cl-none  { background: var(--bg3); color: var(--tx3); }

/* ============================================================
   📱 モバイル レスポンシブ — 上部ナビ → ハンバーガー drawer
   ============================================================
   PC では何も変えない (mobile @media のみで上書き)。
   ハンバーガー (.nav-hamburger) と backdrop (.nav-backdrop) は
   nav.js が動的注入する。
   ============================================================ */
.nav-hamburger{display:none}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998;animation:_navFadeIn .18s ease-out}
@keyframes _navFadeIn{from{opacity:0}to{opacity:1}}

@media (max-width:768px){
  /* ハンバーガー (3 本線アイコン、 44x44 タップ) */
  .nav-hamburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid var(--bdr);border-radius:8px;cursor:pointer;flex-direction:column;gap:5px;padding:0;flex-shrink:0;order:-1}
  .nav-hamburger span{display:block;width:20px;height:2px;background:var(--tx);border-radius:1px;transition:transform .2s,opacity .2s}
  .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-hamburger.open span:nth-child(2){opacity:0}
  .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ヘッダ — 標準ボタン群を折返し許容、 ヘッダ高さ自体は最低限 */
  .app-header{flex-wrap:wrap;padding:8px 10px;gap:8px;align-items:center}
  /* モバイルではヘッダから STAGING バッジ / 管理者バッジ / ユーザーチップを隠して
     ロゴ + テーマ切替 + ハンバーガー の 3 要素だけ表示する。 auth.js が inline
     style.display='flex' を当てる要素もあるため !important で確実に上書き */
  #adminBadge,
  .env-badge,
  .admin-badge{display:none !important}
  /* 当日タブで「サムネトグル sticky 起動」 状態のときだけ app-header を
     通常スクロールに (= 画面外に流す) してサムネトグルが画面最上部に居られるよう。
     通常時 / 他タブでは元の sticky:top:0 のまま (ハンバーガー操作可能) */
  body.today-sticky-active .app-header{position:static}
  .app-header nav{margin-left:0;display:none}   /* nav はデフォルト非表示 */
  .app-header .spacer{flex:1}
  .app-logo-light,.app-logo-dark{height:24px}
  /* ハドル ボタン (テーマ/ズーム/列/マイメモリ) は 折返しで 2 列目に */
  .app-header .hdr-btn{padding:4px 8px;font-size:10px}
  /* ズーム ウィジェットはモバイルでは隠す (pinch zoom で代替) */
  .zoom-widget{display:none !important}
  /* 列表示切替 (col-toggle) もスペース圧迫するので隠す */
  .col-toggle{display:none !important}
  /* ユーザーチップ コンパクト化 */
  .user-chip{padding:3px 8px;font-size:10px}
  .user-chip .uname{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* drawer 開状態 = body.nav-open */
  body.nav-open{overflow:hidden}
  body.nav-open .nav-backdrop{display:block;z-index:998}
  body.nav-open .app-header nav,
  body.nav-open #mainNav{
    display:flex !important;
    position:fixed;top:0;left:0;bottom:0;
    width:min(85vw,320px);
    background:var(--bg2);
    border-right:1px solid var(--bdr);
    flex-direction:column;
    gap:2px;
    padding:calc(env(safe-area-inset-top,0px) + 16px) 8px calc(env(safe-area-inset-bottom,0px) + 16px) 8px;
    z-index:999;
    overflow-y:auto;
    box-shadow:0 0 24px rgba(0,0,0,.4);
    animation:_navSlideIn .22s ease-out;
  }
  @keyframes _navSlideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}

  /* drawer 内のリンク = フルワイド + 大きめタップ */
  body.nav-open .nav-btn,
  body.nav-open .nav-item-wrap{
    width:100%;padding:0;background:transparent;border:0;border-radius:6px;
  }
  body.nav-open .nav-item-wrap{display:block;margin-bottom:0;padding-bottom:0;margin-bottom:0}
  body.nav-open .nav-item-wrap > .nav-btn{
    display:flex;align-items:center;justify-content:space-between;
    padding:11px 14px;width:100%;font-size:14px;color:var(--tx2);font-weight:500;
    border-radius:6px;min-height:44px;
  }
  body.nav-open .nav-btn{
    display:block;padding:11px 14px;width:100%;font-size:14px;color:var(--tx2);font-weight:500;
    border-radius:6px;min-height:44px;
  }
  body.nav-open .nav-btn.active{background:var(--acc);color:#fff}
  body.nav-open .nav-btn:hover{background:var(--bg3)}
  body.nav-open .nav-caret{font-size:14px;opacity:.9}

  /* drawer 内の submenu は accordion (絶対位置 → relative 内側) */
  body.nav-open .nav-submenu{
    position:static !important;
    display:none;
    background:transparent;
    border:0;
    border-left:2px solid var(--bdr2);
    margin:2px 0 4px 12px;
    box-shadow:none;
    padding:2px 0;
    min-width:0;
  }
  body.nav-open .nav-submenu.nav-submenu-open{display:block}
  body.nav-open .nav-submenu-item{
    padding:9px 12px;font-size:13px;min-height:40px;display:flex;align-items:center;border-radius:4px;
  }

  /* index.html の .hd / .hr (旧ヘッダ markup) も同じ扱い */
  body.nav-open .hd nav,
  body.nav-open .hd #mainNav{position:fixed;top:0;left:0;bottom:0}
  /* メインコンテンツの上部 padding 削減 */
  .app-main{padding:10px 8px}

  /* ユーザーチップ (ログアウト含む) を drawer 開時に drawer 下部へ固定配置 */
  /* 通常 mobile (drawer 閉) では非表示 — ハンバーガー開いた時のみ表示する設計 */
  .user-chip{display:none !important}
  body.nav-open .user-chip{
    display:flex !important;
    position:fixed;
    left:8px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
    width:calc(min(85vw,320px) - 16px);
    z-index:1000;
    justify-content:space-between;
    background:var(--bg3);
    padding:10px 14px;
    border-radius:8px;
    border:1px solid var(--bdr);
    font-size:13px;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
    animation:_navSlideIn .22s ease-out;
  }
  body.nav-open .user-chip .uname{font-weight:600;color:var(--tx)}
  body.nav-open .user-chip .logout-btn{
    background:transparent;border:1px solid var(--bdr);border-radius:6px;
    padding:6px 12px;color:var(--ng,#ef4444);font-weight:600;cursor:pointer;
    border-left:1px solid var(--bdr);font-size:12px;font-family:inherit;min-height:32px;
  }
}

/* ============================================================
   モーダル表示中の背面スクロール対策 (2026-08-06)
   ① overscroll-behavior: モーダル内スクロールが端に達しても背面へ漏らさない
   ② html.modal-open: modal-lock.js が全画面モーダル検知時に付与 → 背面ロック
   ============================================================ */
[class*="modal"], [class*="Modal"], .ai-drawer-simple, .mt-folder-panel {
  overscroll-behavior: contain;
}
html { scrollbar-gutter: stable; }  /* ロック時のスクロールバー消失による幅ガタつき防止 */
html.modal-open, html.modal-open body { overflow: hidden; }