*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', sans-serif;
    background: #fafbfc;
    color: #1e2939;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
  }

  /* ── アプリシェル（左サイドバー + 右ワークスペース） ───────────────────────── */
  /* サイドバーは常時72pxのレール。hoverで248pxに展開（オーバーレイ・Metaスタイル） */
  .app { display: grid; grid-template-columns: 72px minmax(0, 1fr); height: 100vh; }

  .sidebar {
    grid-column: 1;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 72px;
    z-index: 100;
    background: #fff;
    border-right: 1px solid #eef0f3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px 10px;
    transition: width .18s ease, padding .18s ease, box-shadow .18s ease;
  }
  .sidebar:is(:hover, .menu-open) {
    width: 248px;
    padding: 18px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 16px 48px rgba(16,24,40,.14);
  }
  .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
  .brand-mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: #0f172a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 400; font-size: 16px;
  }
  .brand span { font-size: 17px; font-weight: 400; color: #0f172a; letter-spacing: -.3px; }
  .brand b { color: #2563eb; font-weight: 400; }
  /* ロゴ画像は余白なしのワードマーク（geniads-logo-round.png / 568x119）。高さ基準でサイズ調整する */
  .brand-logo { height: 20px; width: auto; max-width: 100%; object-fit: contain; display: block; }

  /* ナビ（参考デザイン: アイコン＋ツリー） */
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    padding: 9px 10px; border-radius: 8px;
    border: none; background: none; cursor: pointer;
    font-size: 15px; color: #344054; font-weight: 400;
  }
  .nav-item:hover { background: #f6f7f9; }
  .nav-item .ic { width: 19px; height: 19px; flex-shrink: 0; color: #475569; }
  .nav-parent { font-weight: 400; color: #0f172a; cursor: pointer; }

  /* 子（プロジェクト）— ツリー接続線つき */
  .nav-children { position: relative; margin-left: 19px; padding-left: 16px; }
  .nav-children::before {
    content: ''; position: absolute; left: 0; top: 2px; bottom: 16px;
    width: 1.5px; background: #e4e7ec;
  }
  .nav-child {
    position: relative;
    width: 100%; text-align: left;
    display: flex; align-items: center; gap: 4px;
    padding: 8px 6px 8px 12px; border-radius: 8px;
    border: none; background: none; cursor: pointer;
    font-size: 15px; color: #475569;
  }
  .nav-child .nc-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-child::before {
    content: ''; position: absolute; left: -16px; top: 50%;
    width: 13px; height: 1.5px; background: #e4e7ec;
  }
  .nav-child:hover { background: #f6f7f9; }
  .nav-child.active { background: #e7f0ff; color: #1877f2; font-weight: 400; }
  /* ⋮（プロジェクト操作）: ホバー時のみ表示 */
  .proj-kebab {
    flex-shrink: 0; width: 24px; height: 24px; padding: 0;
    border: none; border-radius: 6px; background: transparent;
    color: #94a3b8; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s, background .12s, color .12s;
  }
  .proj-kebab svg { width: 15px; height: 15px; }
  .nav-child:hover .proj-kebab,
  .nav-child.menu-active .proj-kebab { opacity: 1; }
  .nav-child.menu-active { background: #eef2f7; }
  .proj-kebab:hover,
  .nav-child.menu-active .proj-kebab { background: #e2e8f0; color: #334155; }
  /* フォルダカード上の⋮: 右上・ホバー時のみ（枠なし・アイコンのみ） */
  .proj-card .proj-kebab {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 30px; height: 30px; border-radius: 8px;
    color: #475569; background: transparent;
    filter: drop-shadow(0 1px 2px rgba(255,255,255,.9));
  }
  .proj-card .proj-kebab svg { width: 17px; height: 17px; }
  .proj-card:hover .proj-kebab,
  .proj-card.menu-active .proj-kebab { opacity: 1; }
  .proj-card .proj-kebab:hover,
  .proj-card.menu-active .proj-kebab { background: rgba(255,255,255,.55); color: #0f172a; }
  /* プロジェクト操作メニュー（共有・クリック位置に表示） */
  .proj-menu {
    position: fixed; z-index: 300;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,.18);
    padding: 5px; min-width: 168px; display: none;
  }
  .proj-menu.open { display: block; }
  .proj-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 11px; border: none; background: transparent; border-radius: 8px;
    font-size: 13.5px; font-weight: 400; color: #334155; cursor: pointer; text-align: left;
  }
  .proj-menu button svg { width: 15px; height: 15px; flex-shrink: 0; }
  .proj-menu button:hover { background: #f1f5f9; }
  .proj-menu button.danger { color: #dc2626; }
  .proj-menu button.danger:hover { background: #fef2f2; }
  .proj-menu .menu-sep { border: none; border-top: 1px solid #f1f5f9; margin: 4px 6px; }

  /* ── アカウントメニュー（Notion風ポップオーバー） ─────────────────────────── */
  .acct-menu {
    position: fixed; z-index: 300;
    width: 288px;
    background: #fff; border: 1px solid #e8eaee; border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15,23,42,.2);
    padding: 8px; display: none;
  }
  .acct-menu.open { display: block; }
  .acct-menu .menu-sep { border: none; border-top: 1px solid #f1f5f9; margin: 8px 4px; }
  /* 上部プロフィール行（アバター＋名前＋プラン＋›） */
  .am-head-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px; border: none; background: none; border-radius: 10px; cursor: pointer; font-family: inherit;
    transition: background .12s;
  }
  .am-head-row:hover { background: #f6f7f9; }
  .am-ws-avatar { width: 42px; height: 42px; font-size: 16px; border-radius: 50%; flex-shrink: 0; }
  .am-user-name { font-size: 14.5px; font-weight: 400; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .am-user-plan { font-size: 12.5px; color: #94a3b8; margin-top: 2px; }
  .am-item {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 9px 10px; border: none; background: none; border-radius: 9px;
    font-size: 14px; color: #37352f; font-weight: 400; cursor: pointer; text-align: left; font-family: inherit;
  }
  .am-item:hover { background: #f6f7f9; }
  .am-item svg { width: 19px; height: 19px; flex-shrink: 0; color: #5b5b57; stroke-width: 1.8; }
  .am-item .am-arrow { margin-left: auto; width: 16px; height: 16px; color: #b6b4af; }
  .am-head-row .am-arrow { width: 18px; height: 18px; color: #b6b4af; flex-shrink: 0; }
  /* 現在のワークスペース見出し */
  .am-ws-label { display: flex; align-items: center; gap: 11px; padding: 6px 10px 4px; font-size: 12px; color: #94a3b8; }
  .am-ws-label svg { width: 16px; height: 16px; flex-shrink: 0; }
  .am-ws-label span { font-weight: 400; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* ワークスペース切替リスト */
  /* ワークスペース切替: 戻る／閉じるヘッダー */
  .ws-sw-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; border-bottom: 1px solid #f1f5f9; margin-bottom: 4px; }
  /* width:auto で .proj-menu button の width:100% を打ち消す（左=戻る / 右=✕ に配置） */
  .ws-sw-back { width: auto !important; display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; color: #475569; padding: 6px 8px; border-radius: 7px; }
  .ws-sw-back:hover { background: #f1f5f9; }
  .ws-sw-back svg { width: 15px; height: 15px; }
  .ws-sw-x { width: auto !important; margin-left: auto; border: none; background: none; cursor: pointer; color: #94a3b8; font-size: 13px; padding: 6px 8px; border-radius: 7px; line-height: 1; }
  .ws-sw-x:hover { background: #f1f5f9; color: #475569; }
  .ws-sw-title { font-size: 11.5px; font-weight: 400; color: #9ca3af; padding: 6px 10px 8px; }
  .ws-sw-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 10px; border: none; background: none; border-radius: 9px;
    font-size: 13.5px; color: #37352f; font-weight: 400; cursor: pointer; text-align: left; font-family: inherit;
  }
  .ws-sw-item:hover { background: #f6f7f9; }
  .ws-sw-item .ws-ava { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; flex-shrink: 0; }
  .ws-sw-item .ws-meta { flex: 1; min-width: 0; }
  .ws-sw-item .ws-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ws-sw-item .ws-role { font-size: 11px; color: #9ca3af; }
  .ws-sw-item .ws-check { width: 17px; height: 17px; color: #2563eb; flex-shrink: 0; }
  /* メンバー招待 */
  .invite-row { display: flex; gap: 8px; }
  .invite-row input {
    flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #e4e7ec; border-radius: 10px;
    font-size: 13px; outline: none; color: #1e2939; font-family: inherit;
  }
  .invite-row input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
  /* 個人プラン向け: 招待欄の代わりのロック表示 */
  .invite-locked { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed #d5d7db; border-radius: 10px; background: #f8fafc; }
  .invite-locked svg { width: 18px; height: 18px; color: #94a3b8; flex-shrink: 0; }
  .invite-locked-txt { flex: 1; min-width: 0; font-size: 13px; color: #475569; line-height: 1.5; }
  .invite-locked-btn { flex-shrink: 0; border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px; padding: 7px 13px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
  .invite-locked-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
  :root[data-theme="dark"] .invite-locked { background: #26261f; border-color: #3a3a37; }
  :root[data-theme="dark"] .invite-locked-txt { color: #b8b8b3; }
  :root[data-theme="dark"] .invite-locked-btn { background: #2a2a28; border-color: #3a3a37; color: #e7e7e4; }
  .mem-item { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #f1f3f5; }
  .mem-item:last-child { border-bottom: none; }
  .mem-ava { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; flex-shrink: 0; }
  .mem-info { flex: 1; min-width: 0; }
  .mem-name { font-size: 14px; font-weight: 400; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mem-email { font-size: 12.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mem-role { font-size: 11.5px; font-weight: 400; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 3px 10px; flex-shrink: 0; }
  .mem-role.owner { color: #2563eb; background: #e7f0ff; }
  .mem-role.pending { color: #b45309; background: #fef3c7; }
  .mem-remove { flex-shrink: 0; border: none; background: none; cursor: pointer; color: #cbd5e1; padding: 4px; border-radius: 6px; }
  .mem-remove:hover { color: #dc2626; background: #fef2f2; }
  .mem-remove svg { width: 16px; height: 16px; }

  /* プロフィール編集モーダル */
  .profile-card { max-width: 460px; }
  .profile-avatar-wrap { position: relative; width: 116px; height: 116px; margin: 8px auto 22px; }
  /* .avatar が後方で 34px を指定するため、二重クラスで確実に上書き（丸枠を大きく） */
  .profile-avatar-wrap .profile-avatar {
    width: 116px; height: 116px; border-radius: 50%; font-size: 42px;
    border: 3px solid #3b82f6;
  }
  .profile-cam {
    position: absolute; right: -2px; bottom: -2px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; border: 1px solid #e2e8f0; color: #475569; cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.12);
  }
  .profile-cam svg { width: 15px; height: 15px; }
  .profile-cam:hover { background: #f8fafc; }
  .pf-input {
    position: relative; border: 1px solid #d5d7db; border-radius: 10px;
    padding: 9px 14px 8px; margin-bottom: 12px;
    transition: border-color .12s, box-shadow .12s;
  }
  .pf-input:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
  .pf-input label { display: block; font-size: 11.5px; color: #8a8781; margin-bottom: 2px; }
  .pf-input input { width: 100%; border: none; outline: none; background: none; font-size: 15px; font-family: inherit; color: #1a1a19; }
  .pf-hint { font-size: 12.5px; color: #8a8781; line-height: 1.6; margin: 4px 2px 20px; }
  .pf-avatar-actions { display: flex; justify-content: center; gap: 14px; margin: -12px 0 18px; }
  .pf-avatar-link {
    border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 12.5px; color: #3b82f6;
  }
  .pf-avatar-link:hover { text-decoration: underline; }
  .pf-avatar-remove { color: #b91c1c; }
  .pf-actions { display: flex; justify-content: flex-end; gap: 10px; }
  /* 生成意図テンプレート */
  .tmpl-btn {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px;
    padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s;
  }
  .tmpl-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
  .tmpl-btn svg { width: 14px; height: 14px; }
  /* テンプレート選択モーダル: 料金プラン風に横3カラム・高さは画面内に収める */
  .modal.itmpl-box { max-width: 1060px; max-height: 88vh; display: flex; flex-direction: column; }
  .modal.itmpl-box .modal-head { flex-shrink: 0; justify-content: space-between; }
  .itmpl-body { flex: 1; min-height: 0; overflow-y: auto; }
  .itmpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
  .itmpl-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
  .itmpl-title { font-size: 14px; font-weight: 500; color: #1a1a19; display: flex; align-items: center; gap: 8px; }
  .itmpl-badge { font-size: 10.5px; font-weight: 400; color: #2563eb; background: #eff6ff; border-radius: 999px; padding: 2px 8px; }
  .itmpl-desc { font-size: 12px; color: #8a8781; margin: 6px 0 10px; min-height: 30px; }
  .itmpl-pre {
    flex: 1; margin: 0 0 12px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 8px;
    padding: 10px 12px; font-size: 12px; line-height: 1.65; color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow-y: auto;
  }
  .itmpl-use {
    margin-top: auto; width: 100%; border: none; background: #1a1a19; color: #fff; border-radius: 999px;
    padding: 9px 14px; font-size: 13px; cursor: pointer; font-family: inherit; transition: opacity .12s;
  }
  .itmpl-use:hover { opacity: .85; }
  /* 狭い画面では縦積みに（モーダル自体はスクロール） */
  @media (max-width: 780px) {
    .itmpl-grid { grid-template-columns: 1fr; }
    .itmpl-pre { max-height: 200px; }
  }
  /* 設定＞一般: 危険操作（ワークスペース削除）は画面下部へ寄せる */
  .set-panel[data-panel="general"].active { display: flex; flex-direction: column; min-height: 62vh; }
  .set-danger-row { border-top: 1px solid #f0d9d9; margin-top: auto; padding-top: 18px; align-items: center; }
  .set-danger-desc { font-size: 12px; color: #8a8781; margin-top: 3px; font-weight: 400; max-width: 420px; }
  .btn-ws-delete {
    border: 1px solid #e5b4b4; background: #fff; color: #b91c1c; border-radius: 8px;
    padding: 8px 16px; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap;
    transition: background .12s, border-color .12s;
  }
  .btn-ws-delete:hover { background: #fef2f2; border-color: #dc2626; }
  .btn-profile-save {
    border: none; background: #1a1a19; color: #fff; border-radius: 999px;
    padding: 9px 20px; font-size: 14px; font-weight: 400; cursor: pointer; font-family: inherit;
    transition: background .15s;
  }
  .btn-profile-save:hover { background: #33322f; }
  .btn-profile-save:disabled { opacity: .5; cursor: not-allowed; }
  :root[data-theme="dark"] .profile-card .pf-input { border-color: #3a3a37; }
  :root[data-theme="dark"] .pf-input input { color: #e7e7e4; }
  :root[data-theme="dark"] .btn-profile-save { background: #e7e7e4; color: #1a1a19; }

  /* ── ヘルプメニュー（Notion風） ─────────────────────────────────────────── */
  .help-menu {
    position: fixed; z-index: 300;
    width: 272px;
    background: #fff; border: 1px solid #e8eaee; border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15,23,42,.2);
    padding: 8px; display: none;
  }
  .help-menu.open { display: block; }
  .hm-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 9px 10px; border: none; background: none; border-radius: 8px;
    font-size: 13.5px; color: #37352f; font-weight: 400; cursor: pointer; text-align: left; font-family: inherit;
  }
  .hm-item:hover { background: #f6f7f9; }
  .hm-item svg { width: 18px; height: 18px; flex-shrink: 0; color: #5b5b57; }
  .hm-item .hm-chev { margin-left: auto; width: 16px; height: 16px; color: #b6b4af; }
  .hm-section { font-size: 11.5px; font-weight: 400; color: #9b9a97; padding: 12px 10px 6px; }
  .hm-timeline { position: relative; padding: 2px 10px 4px 10px; }
  .hm-timeline::before { content: ''; position: absolute; left: 15px; top: 12px; bottom: 14px; width: 1.5px; background: #e8eaee; }
  .hm-news {
    position: relative; display: flex; align-items: center; gap: 8px;
    padding: 7px 0 7px 18px; font-size: 13px; color: #37352f;
  }
  .hm-dot { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #2f6fed; }
  .hm-badge { font-size: 10px; font-weight: 400; color: #2f6fed; background: #eaf1fe; border-radius: 5px; padding: 2px 6px; flex-shrink: 0; }
  .hm-release { margin-top: 2px; color: #37352f; }
  .hm-release svg { color: #5b5b57; }

  /* ── Before/After 比較モーダル ───────────────────────────────────────── */
  /*  左右を細い罫線で分け、大きな見出しと余白で見せる（カード枠・装飾は置かない）  */
  /* .modal.cmp-modal で特異度を上げて .modal の max-width を確実に上書き */
  .modal.cmp-modal {
    max-width: min(1240px, 94vw); width: 94vw; max-height: 94vh; overflow-y: auto;
    padding: 26px 32px 32px; border-radius: 18px;
    box-shadow: 0 30px 80px rgba(16,24,40,.22);
  }
  /* 見出し（閉じるボタンは .modal-head button の共通スタイルをそのまま使う） */
  .modal.cmp-modal .modal-head { margin-bottom: 18px; }
  .cmp-title { font-size: 21px; color: #17181a; letter-spacing: -.01em; }
  /* 修正指示: 上部に大きめで表示 */
  .cmp-inst {
    display: flex; align-items: baseline; justify-content: center; gap: 12px;
    flex-wrap: wrap; text-align: center;
    background: #f7f7f5; border-radius: 12px;
    padding: 14px 20px; margin: 0 auto 26px; max-width: 900px;
  }
  .cmp-inst-label {
    flex-shrink: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: #a8a29a;
  }
  .cmp-inst-text { font-size: 16px; line-height: 1.6; color: #17181a; }
  .cmp-inst:empty { display: none; }
  .cmp-grid {
    display: grid; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
    gap: 0; align-items: start;
  }
  .cmp-div { background: #e9e9e6; width: 1px; align-self: stretch; }
  .cmp-pane { padding: 0 32px; text-align: center; min-width: 0; }
  /* Before / After は他の英字表記と同じ細さ・サイズに合わせて主張を抑える */
  .cmp-h { font-size: 16px; font-weight: 400; letter-spacing: 0; color: #17181a; margin: 0; }
  .cmp-sub { font-size: 12px; color: #a8a29a; margin: 4px 0 18px; }
  /* 画像はカード枠・影なしで、そのまま見せる */
  .cmp-pane img {
    width: 100%; max-height: 66vh; object-fit: contain;
    display: block; margin: 0 auto;
  }
  @media (max-width: 860px) {
    .modal.cmp-modal { padding: 22px 18px 26px; }
    .cmp-grid { grid-template-columns: 1fr; }
    .cmp-div { width: auto; height: 1px; margin: 28px 0; }
    .cmp-pane { padding: 0; }
    .cmp-pane img { max-height: 46vh; }
  }

  /* ── Home: 使い方ガイド ─────────────────────────────────────────────── */
  /* Home: 挨拶 */
  .home-greet { text-align: center; max-width: 720px; margin: 14vh auto 40px; }
  .greet-title { display: inline-flex; align-items: center; gap: 16px; font-size: 40px; font-weight: 400; color: #1a1a19; letter-spacing: -.5px; }
  .greet-mark { width: 34px; height: 34px; color: #d97757; flex-shrink: 0; }
  .greet-sub { font-size: 15px; color: #8a8781; margin: 18px 0 26px; }
  .greet-btns { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
  /* グレーのセカンダリボタン（使い方をみる） */
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border: 1px solid #e2e4e8; border-radius: 999px;
    background: #f4f5f7; color: #57564f; font-size: 14px; font-weight: 400; cursor: pointer; font-family: inherit;
    transition: background .15s, border-color .15s, transform .12s;
  }
  .btn-ghost svg { width: 17px; height: 17px; }
  .btn-ghost:hover { background: #eceef1; border-color: #d5d7db; transform: translateY(-1px); }
  :root[data-theme="dark"] .btn-ghost { background: #2a2a28; border-color: #3a3a37; color: #cfcfca; }
  :root[data-theme="dark"] .btn-ghost:hover { background: #33322f; }

  .home-hero { text-align: center; max-width: 680px; margin: 5vh auto 40px; }
  .hh-badge {
    display: inline-block;
    font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 14px; border-radius: 999px; color: #fff;
    background: linear-gradient(90deg, #6ee7b7, #60a5fa 55%, #818cf8);
    box-shadow: 0 4px 10px rgba(96,165,250,.35);
  }
  .home-hero h1 { font-size: 34px; font-weight: 400; color: #0f172a; margin-top: 14px; letter-spacing: -.5px; }
  .home-hero p { font-size: 14px; color: #64748b; line-height: 1.95; margin: 12px 0 24px; }
  /* GeniAds workspace の特長（ブラウザモック＋テキストの交互レイアウト） */
  .feat-section { max-width: 1060px; margin: 16vh auto 20px; }   /* 上の余白を広げる */
  .feat-head { text-align: center; margin-bottom: 44px; }
  .feat-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #3f6ff0; margin-bottom: 12px; }
  :root[data-theme="dark"] .feat-eyebrow { color: #6ea8fe; }
  .feat-head h2 { font-size: 26px; font-weight: 400; color: #1a1a19; letter-spacing: -.4px; }
  .feat-head p { font-size: 14px; color: #8a8781; margin-top: 8px; }
  .feat-rows { display: flex; flex-direction: column; gap: 72px; }
  /* 全行「左: モック/動画 → 右: テキスト」で統一（左右交互にはしない）。
     テキストは上揃えにして、行が縦に読み下せるようにする。 */
  .feat-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
  @media (max-width: 900px) { .feat-row { grid-template-columns: 1fr; gap: 28px; } }
  .feat-copy h3 { font-size: 23px; font-weight: 400; color: #1a1a19; letter-spacing: -.3px; line-height: 1.45; }
  .feat-copy p { font-size: 14.5px; color: #6b7280; line-height: 2; margin-top: 16px; }
  :root[data-theme="dark"] .feat-head h2, :root[data-theme="dark"] .feat-copy h3 { color: #e7e7e4; }
  :root[data-theme="dark"] .feat-copy p { color: #a8a8a3; }

  /* ブラウザ風モック（サービス画面の簡素版） */
  .mock { border: 1px solid #e6e8ec; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 22px 48px rgba(16,24,40,.12); }
  /* チュートリアルの動画（モック枠と同じ見た目に揃える） */
  .feat-video { display: block; width: 100%; height: auto; border: 1px solid #e6e8ec; border-radius: 12px;
    background: #0b0b0c; box-shadow: 0 22px 48px rgba(16,24,40,.12); }
  .feat-img { display: block; width: 100%; height: auto; border: 1px solid #e6e8ec; border-radius: 12px;
    background: #fff; box-shadow: 0 22px 48px rgba(16,24,40,.12); }
  .mock-bar { display: flex; align-items: flex-end; gap: 7px; padding: 9px 12px 0; background: #f4f5f7; border-bottom: 1px solid #ececef; }
  .mock-bar .d { width: 10px; height: 10px; border-radius: 50%; margin-bottom: 9px; }
  .d.dr { background: #ff5f57; } .d.dy { background: #febc2e; } .d.dg { background: #28c840; }
  .m-tab { margin-left: 8px; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 8px 8px 0 0; padding: 6px 13px; font-size: 11px; color: #6b7280; }
  .m-cube { width: 12px; height: 12px; border-radius: 3px; background: #1a1a19; }
  .mock-in { display: grid; grid-template-columns: 128px 1fr; height: 292px; }
  .m-side { border-right: 1px solid #eef0f3; padding: 13px 11px; display: flex; flex-direction: column; gap: 7px; background: #fbfbfc; }
  .m-proj { font-size: 10.5px; font-weight: 500; color: #374151; display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
  .m-star { color: #d97757; font-size: 12px; }
  .m-step { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #94a3b8; padding: 6px 8px; border-radius: 7px; }
  .m-step b { width: 15px; height: 15px; border-radius: 50%; background: #e9edf2; color: #94a3b8; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .m-step.on { background: #eaf1ff; color: #3f6ff0; font-weight: 600; }
  .m-step.on b { background: #3f6ff0; color: #fff; }
  .m-chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0; }
  .m-chip { font-size: 9px; color: #64748b; background: #eef1f5; border-radius: 999px; padding: 3px 8px; }
  .m-cta { margin-top: auto; text-align: center; font-size: 11px; font-weight: 600; color: #fff; border-radius: 999px; padding: 8px; background: linear-gradient(168deg, #8fbcfb, #5e9bf6 55%, #3f86f1); }
  .m-main { padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .m-mtop { display: flex; gap: 6px; }
  .m-pill { font-size: 9px; color: #64748b; border: 1px solid #e4e7ec; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
  .m-pill.on { color: #3f6ff0; border-color: #bcd4fb; background: #f0f6ff; }
  .m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-card { border: 1px solid #eef0f3; border-radius: 8px; padding: 8px; }
  .m-img { height: 50px; border-radius: 5px; margin-bottom: 7px; }
  .m-g1 { background: linear-gradient(135deg, #c9dcff, #9dbef7); }
  .m-g2 { background: linear-gradient(135deg, #d9cffc, #b7a6f5); }
  .m-g3 { background: linear-gradient(135deg, #c7efe6, #8fd8c8); }
  .m-g4 { background: linear-gradient(135deg, #ffe6c9, #f5c88f); }
  .m-ln { display: block; height: 5px; border-radius: 3px; background: #eceef1; margin-top: 5px; }
  .m-ln.w7 { width: 68%; } .m-ln.w4 { width: 42%; }
  /* メンバー行（チーム特長のモック用） */
  .m-mem { display: flex; align-items: center; gap: 9px; padding: 8px 4px; border-bottom: 1px solid #f1f3f5; }
  .m-mav { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
  .m-mem .m-ln { margin: 0; }
  .m-badge { margin-left: auto; font-size: 8.5px; color: #64748b; background: #eef1f5; border-radius: 999px; padding: 2px 7px; }

  .guide-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px; max-width: 1100px; margin: 0 auto;
  }
  .guide-card {
    background: #fff; border: 1px solid #eef0f3; border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 2px 10px rgba(16,24,40,.04);
    transition: transform .18s, box-shadow .18s;
  }
  .guide-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,24,40,.09); }
  .g-num {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #6ee7b7, #60a5fa 60%, #818cf8);
    color: #fff; font-weight: 400; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 12px rgba(96,165,250,.35);
  }
  .guide-card h3 { font-size: 15px; font-weight: 400; color: #0f172a; margin: 14px 0 8px; }
  .guide-card p { font-size: 12.5px; color: #64748b; line-height: 1.85; }
  .guide-tips {
    max-width: 1100px; margin: 18px auto 0;
    background: linear-gradient(90deg, #ecfdf5, #eff6ff);
    border: 1px solid #dbeafe; border-radius: 14px;
    padding: 15px 20px; font-size: 12.5px; color: #475569; line-height: 1.95;
  }
  .guide-tips b { color: #1d4ed8; }

  /* ── Coming soon（Report / Phase 2） ─────────────────────────────────── */
  .coming-soon { max-width: 520px; margin: 10vh auto 0; text-align: center; }
  .cs-icon {
    width: 86px; height: 86px; border-radius: 26px; margin: 0 auto;
    background: linear-gradient(135deg, #ecfdf5, #eff6ff 60%, #eef2ff);
    color: #60a5fa; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(96,165,250,.18);
  }
  .cs-icon svg { width: 40px; height: 40px; }
  .cs-badge {
    display: inline-block; margin-top: 22px;
    font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
    padding: 4px 14px; border-radius: 999px; color: #fff;
    background: linear-gradient(90deg, #6ee7b7, #60a5fa 55%, #818cf8);
    box-shadow: 0 4px 10px rgba(96,165,250,.35);
  }
  .coming-soon h2 { font-size: 30px; font-weight: 400; color: #0f172a; margin-top: 12px; letter-spacing: -.5px; }
  .coming-soon p { font-size: 14px; color: #64748b; line-height: 1.9; margin-top: 10px; }

  /* サイドバー: Soon バッジ */
  .soon-pill {
    margin-left: auto; font-size: 10px; font-weight: 400; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 999px; color: #fff;
    background: linear-gradient(90deg, #6ee7b7, #60a5fa);
  }

  /* Library: ツールボタン（更新）— 枠なし・アイコン主役 */
  .lib-tool {
    margin-left: 14px; width: 38px; height: 38px; border-radius: 10px;
    border: none; background: none; color: #475569; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, transform .15s;
  }
  .lib-tool svg { width: 22px; height: 22px; stroke-width: 2.4; }
  #lib-refresh:hover { background: #eff6ff; color: #2563eb; transform: rotate(-25deg); }
  #lib-refresh.spin svg { animation: libspin .6s ease; }
  @keyframes libspin { to { transform: rotate(360deg); } }

  /* Library: タブ（すべて / お気に入り） */
  .lib-tabs {
    display: flex; gap: 26px;
    border-bottom: 1.5px solid #e8ecf1;
    margin-bottom: 18px;
  }
  .lib-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 2px 11px;
    border: none; background: none; cursor: pointer;
    font-size: 14px; font-weight: 400; color: #8a94a6;
    transition: color .15s;
  }
  .lib-tab svg { width: 15px; height: 15px; }
  .lib-tab:hover { color: #475569; }
  .lib-tab.active { color: #0f172a; }
  .lib-tab.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px;
    height: 2.5px; border-radius: 2px;
    background: linear-gradient(90deg, #60a5fa, #818cf8);
  }
  #lib-tab-fav.active { color: #e11d48; }
  #lib-tab-fav.active svg { fill: currentColor; }
  #lib-tab-fav.active::after { background: linear-gradient(90deg, #fb7185, #f43f5e); }
  .lib-tab .cnt {
    font-size: 11px; font-weight: 400; color: #94a3b8;
    background: #f1f5f9; border-radius: 999px; padding: 1px 8px;
  }
  .lib-tab.active .cnt { background: #e7f0ff; color: #2563eb; }
  #lib-tab-fav.active .cnt { background: #fff1f2; color: #e11d48; }

  /* ── Settings: 2ペイン（左サブナビ＋右コンテンツ / Claude調の余白・字組み） ──── */
  :root { --set-ink: #1a1a19; --set-sub: #7a7873; --set-line: #ededea; --set-hover: #f4f3f1; --set-active: #ecebe7; }
  #view-settings { padding: 44px 48px; }
  .set-layout { display: grid; grid-template-columns: 216px minmax(0,1fr); gap: 56px; max-width: 1160px; margin: 0 auto; }
  @media (max-width: 820px) { .set-layout { grid-template-columns: 1fr; gap: 20px; } }

  .set-search {
    display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
    height: 38px; padding: 0 12px; border: 1px solid #e6e5e1; border-radius: 10px; background: #fbfbfa;
  }
  .set-search svg { width: 16px; height: 16px; color: #a8a69f; flex-shrink: 0; }
  .set-search input { border: none; background: none; outline: none; width: 100%; font-size: 14px; font-family: inherit; color: var(--set-ink); }
  .set-search input::placeholder { color: #a8a69f; }
  .set-nav { display: flex; flex-direction: column; gap: 1px; }
  .set-nav-title { font-size: 11px; font-weight: 400; color: #a8a69f; padding: 12px 10px 6px; letter-spacing: .03em; }
  .set-nav-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 8px 10px; border: none; background: none; border-radius: 8px;
    font-size: 14px; color: #444440; font-weight: 400; cursor: pointer; text-align: left; font-family: inherit;
    transition: background .12s;
  }
  .set-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; color: #86847e; stroke-width: 1.7; }
  .set-nav-item:hover { background: var(--set-hover); }
  .set-nav-item.active { background: var(--set-active); color: var(--set-ink); font-weight: 400; }
  .set-nav-item.active svg { color: #4b4a45; }

  .set-content { min-width: 0; max-width: 720px; }
  .set-panel { display: none; }
  .set-panel.active { display: block; animation: viewIn .28s var(--ios-ease); }
  .set-h2 { font-size: 19px; font-weight: 400; color: var(--set-ink); letter-spacing: -.2px; margin-bottom: 26px; }
  /* ラベル左・操作右の行 */
  .set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--set-line); }
  .set-row:first-of-type { padding-top: 0; }
  .set-k { font-size: 14px; color: var(--set-ink); font-weight: 400; }
  .set-k .sub { font-size: 13px; color: var(--set-sub); font-weight: 400; margin-top: 4px; line-height: 1.6; max-width: 460px; }
  .set-v { font-size: 14px; color: var(--set-ink); font-weight: 400; }
  .set-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #57564f; background: #f4f3f1; border-radius: 7px; padding: 5px 10px; }
  .set-account { display: flex; align-items: center; gap: 16px; padding: 0 0 20px; border-bottom: 1px solid var(--set-line); }

  /* 汎用ボタン（アウトライン / グレー無効） */
  .btn-outline {
    border: 1px solid #dcdbd6; background: #fff; border-radius: 9px; padding: 8px 16px;
    font-size: 13.5px; font-weight: 400; color: #37352f; cursor: pointer; font-family: inherit; white-space: nowrap;
    transition: background .12s, border-color .12s;
  }
  .btn-outline:hover { background: #faf9f7; border-color: #cfcec8; }
  .btn-disabled { border: none; background: #b6b4ac; color: #fff; border-radius: 9px; padding: 8px 16px; font-size: 13.5px; font-weight: 400; font-family: inherit; cursor: not-allowed; white-space: nowrap; }
  .set-sess-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
  .set-sess-table th { text-align: left; font-size: 13px; font-weight: 400; color: var(--set-sub); padding: 10px 0; border-bottom: 1px solid var(--set-line); }
  .set-sess-table td { font-size: 13.5px; color: var(--set-ink); padding: 14px 0; border-bottom: 1px solid var(--set-line); }
  .set-empty { padding: 40px 0; text-align: center; font-size: 13.5px; color: #a8a69f; }
  .set-sec-title { font-size: 16px; font-weight: 400; color: var(--set-ink); margin: 40px 0 16px; }
  .set-sec-title:first-child { margin-top: 0; }

  /* 請求 */
  .bill-plan { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 8px; }
  .bill-plan-ic { width: 44px; height: 44px; color: #37352f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .bill-plan-ic svg { width: 30px; height: 30px; }
  .bill-plan-name { font-size: 17px; font-weight: 400; color: var(--set-ink); }
  .bill-plan-cycle { font-size: 13.5px; color: var(--set-sub); margin-top: 4px; }
  .bill-plan-renew { font-size: 13.5px; color: var(--set-sub); margin-top: 8px; line-height: 1.5; }
  .bill-adjust { margin-left: auto; }
  .pay-method { display: flex; align-items: center; gap: 12px; padding: 2px 0; }
  .pay-brand { width: 34px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 400; color: #fff; flex-shrink: 0; }
  /* ブランドロゴ画像バッジ（Mastercard 等）: 白背景に余白を持たせてロゴを収める */
  .pay-brand-img { background: #fff; border: 1px solid #e5e7eb; padding: 2px; }
  .pay-brand-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pay-num { font-size: 14px; color: var(--set-ink); font-weight: 400; flex: 1; }
  .inv-table { width: 100%; border-collapse: collapse; }
  .inv-table th { text-align: left; font-size: 13px; font-weight: 400; color: var(--set-sub); padding: 10px 0; border-bottom: 1px solid var(--set-line); }
  .inv-table td { font-size: 13.5px; color: var(--set-ink); padding: 15px 0; border-bottom: 1px solid var(--set-line); }
  .inv-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; color: #37352f; }
  .inv-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
  .inv-view { color: #2f6fed; text-decoration: none; font-weight: 400; }
  .inv-view:hover { text-decoration: underline; }
  .bill-cancel-row { display: flex; align-items: center; justify-content: space-between; }
  .bill-cancel-row span { font-size: 14px; color: var(--set-ink); }
  /* 「ワークスペースを削除」ボタン(.btn-ws-delete)と色合いを揃える */
  .btn-cancel-plan { border: 1px solid #e5b4b4; background: #fff; color: #b91c1c; border-radius: 9px; padding: 9px 20px; font-size: 13.5px; font-weight: 400; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s; }
  .btn-cancel-plan:hover { background: #fef2f2; border-color: #dc2626; }
  .bill-empty { padding: 22px 0; font-size: 13.5px; color: #a8a69f; }

  /* 使用量 */
  .usage-plan-title { font-size: 18px; font-weight: 400; color: var(--set-ink); margin-bottom: 26px; }
  .usage-plan-title .badge { font-size: 13px; font-weight: 400; color: var(--set-sub); margin-left: 4px; }
  .usage-block { margin-bottom: 30px; }
  .usage-item { padding: 8px 0; }
  .usage-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .usage-label { font-size: 14px; font-weight: 400; color: var(--set-ink); }
  .usage-reset { font-size: 13px; color: var(--set-sub); margin-top: 4px; }
  .usage-pct { font-size: 13.5px; color: #57564f; font-weight: 400; }
  .usage-bar { height: 8px; border-radius: 999px; background: #ecebe8; overflow: hidden; }
  .usage-bar-fill { height: 100%; border-radius: 999px; background: #4571e6; transition: width .5s var(--ios-ease); }
  .usage-sec { font-size: 16px; font-weight: 400; color: var(--set-ink); margin: 4px 0 14px; }
  .usage-link { font-size: 13.5px; color: #2f6fed; text-decoration: none; }
  .usage-link:hover { text-decoration: underline; }
  .usage-updated { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--set-sub); margin: 20px 0 8px; }
  .usage-updated button { border: none; background: none; cursor: pointer; color: var(--set-sub); display: inline-flex; padding: 0; }
  .usage-updated svg { width: 14px; height: 14px; }
  .credit-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .credit-row p { font-size: 13.5px; color: var(--set-ink); line-height: 1.65; }
  .credit-row a { color: #2f6fed; text-decoration: none; }
  .toggle { width: 40px; height: 23px; border-radius: 999px; background: #d3d2cc; position: relative; cursor: pointer; flex-shrink: 0; transition: background .18s; border: none; }
  .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .18s; }
  .toggle.on { background: #4571e6; }
  .toggle.on::after { left: 19px; }
  /* セグメント切替（言語・テーマ） */
  .seg { display: inline-flex; background: #f0efec; border-radius: 9px; padding: 3px; gap: 2px; }
  .seg-btn {
    border: none; background: none; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 400; color: #6f6d68; padding: 6px 16px; border-radius: 7px;
    transition: background .15s, color .15s;
  }
  .seg-btn.on { background: #fff; color: var(--set-ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 400; }
  :root[data-theme="dark"] .seg { background: #2c2c2a; }
  :root[data-theme="dark"] .seg-btn.on { background: #46453f; color: #e7e7e4; }

  /* ── Settings: プラン（ChatGPT風カード） ─────────────────────────────────── */
  .plan-section { max-width: 1080px; }
  .plan-head h2 { font-size: 24px; font-weight: 400; color: #0f172a; letter-spacing: -.4px; }
  .plan-head p { font-size: 13.5px; color: #64748b; margin-top: 4px; }
  /* プランタブ表示中は set-content の幅制限(720px)を解除し、レイアウト全体も広げて3枚横並びを確保 */
  .set-content:has(.set-panel[data-panel="plan"].active) { max-width: none; }
  .set-layout:has(.set-panel[data-panel="plan"].active) { max-width: 1360px; }
  /* 個人/法人の切替タブ */
  .plan-tabs { display: inline-flex; gap: 4px; margin-top: 20px; padding: 4px; background: #f1f3f6; border-radius: 999px; }
  .plan-tab { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13.5px; color: #64748b;
    padding: 7px 20px; border-radius: 999px; transition: background .12s, color .12s; }
  .plan-tab.on { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
  .plan-pay-note { font-size: 12.5px; color: #8a8781; margin: 12px 2px 0; }
  .plan-cards-wrap { margin-top: 18px; padding: 6px; }
  /* 中央寄せ・最大3枚横並び（Claude風）。枚数が2でも中央に揃う。狭い画面では折り返す。 */
  /* 固定カラム数のグリッド＝折り返さない。カードは列幅に合わせて縮む（常に横一列）。 */
  .plan-cards { display: grid; gap: 20px; align-items: stretch; justify-content: center; margin: 0 auto; }
  .plan-cards[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 336px)); max-width: 1052px; }
  .plan-cards[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 336px)); max-width: 692px; }
  .plan-cards[data-n="1"] { grid-template-columns: minmax(0, 336px); max-width: 336px; }
  .plan-cards .plan-card2 { min-width: 0; }   /* グリッド内で確実に縮められるように */
  @media (max-width: 760px) { .plan-cards[data-n] { grid-template-columns: 1fr; max-width: 420px; } }
  .amt-contact { font-size: 24px; font-weight: 500; color: #0f172a; }
  :root[data-theme="dark"] .plan-tabs { background: #2a2a28; }
  :root[data-theme="dark"] .plan-tab.on { background: #3a3a37; color: #f4f4f2; }
  :root[data-theme="dark"] .amt-contact { color: #f4f4f2; }
  .plan-card2 {
    border: 1px solid #e3e3e7; border-radius: 16px; background: #fff;
    padding: 26px 24px 30px; display: flex; flex-direction: column;
  }
  /* 推奨プラン: 青く光るハイライト */
  .plan-card2.featured {
    background: radial-gradient(120% 90% at 85% 0%, #eaf3ff 0%, #f2f8ff 45%, #e7f0ff 100%);
    border: 1px solid #b9d6fe;
    box-shadow: 0 0 0 4px rgba(74,125,252,.07), 0 14px 40px rgba(74,125,252,.16);
  }
  .pc-name { font-size: 26px; font-weight: 400; color: #0d0d0d; letter-spacing: -.3px; }
  /* 価格・説明の高さを固定し、カード間でボタン位置を横一直線に揃える */
  .pc-price { margin-top: 20px; min-height: 52px; display: flex; align-items: flex-start; gap: 3px; line-height: 1; }
  .pc-price .cur { font-size: 19px; font-weight: 400; color: #0d0d0d; margin-top: 4px; }
  .pc-price .amt { font-size: 46px; font-weight: 400; color: #0d0d0d; letter-spacing: -1.5px; }
  .pc-price .amt-contact { align-self: center; }
  .pc-price .unit { font-size: 12px; color: #8e8ea0; align-self: flex-end; margin: 0 0 6px 5px; white-space: nowrap; }
  /* ユーザー単位課金は単位表記が長いので2行に折り返す */
  .pc-price .unit.per-user { white-space: normal; max-width: 108px; line-height: 1.45; margin-bottom: 4px; }
  .pc-desc { font-size: 15px; color: #0d0d0d; margin-top: 16px; min-height: 44px; }
  .pc-btn {
    margin-top: 24px; width: 100%; padding: 12px; border-radius: 999px;
    font-size: 14.5px; font-weight: 400; font-family: inherit; cursor: pointer;
    border: 1px solid #d9d9de; background: #fff; color: #0d0d0d; transition: background .15s, border-color .15s;
  }
  .pc-btn:hover { background: #f6f6f7; }
  .pc-btn.primary { background: #4285f4; border-color: #4285f4; color: #fff; }
  .pc-btn.primary:hover { background: #3374e0; }
  .pc-btn.current { background: transparent; border-color: #e0e0e4; color: #b4b4bd; cursor: default; }
  .pc-btn.current:hover { background: transparent; }
  .pc-feats { margin-top: 26px; display: flex; flex-direction: column; gap: 17px; }
  .pc-head { font-size: 14.5px; font-weight: 400; color: #0d0d0d; margin-bottom: -1px; }
  .pc-feat { display: flex; align-items: center; gap: 13px; font-size: 14.5px; color: #0d0d0d; line-height: 1.5; }
  .pc-feat svg { width: 20px; height: 20px; flex-shrink: 0; color: #0d0d0d; stroke-width: 1.6; }
  :root[data-theme="dark"] .plan-card2 { background: #222220; border-color: #33322f; }
  :root[data-theme="dark"] .plan-card2.featured {
    background: radial-gradient(120% 90% at 85% 0%, #223048 0%, #1f2735 100%);
    border-color: #35507e; box-shadow: 0 0 0 4px rgba(74,125,252,.1), 0 14px 40px rgba(0,0,0,.4);
  }
  :root[data-theme="dark"] .pc-name, :root[data-theme="dark"] .pc-price .cur, :root[data-theme="dark"] .pc-price .amt,
  :root[data-theme="dark"] .pc-desc, :root[data-theme="dark"] .pc-head, :root[data-theme="dark"] .pc-feat { color: #e7e7e4; }
  :root[data-theme="dark"] .pc-feat svg { color: #e7e7e4; }
  :root[data-theme="dark"] .pc-btn { background: #2a2a28; border-color: #3a3a37; color: #e7e7e4; }
  :root[data-theme="dark"] .pc-btn.current { background: transparent; color: #6f6d68; }

  /* アップグレード（決済）モーダル — 画像3準拠 */
  /* .modal.upg-modal で特異度を上げて .modal の max-width/padding を確実に上書き */
  .modal.upg-modal { max-width: min(960px, 94vw); width: 94vw; padding: 0; }
  .upg-head { padding: 26px 30px 4px; }
  .upg-back {
    width: 34px; height: 34px; border-radius: 50%; background: #eef2ff; color: #4f46e5;
    display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; margin-bottom: 14px;
  }
  .upg-back svg { width: 17px; height: 17px; }
  .upg-head h2 { font-size: 23px; font-weight: 400; color: #0f172a; }
  .upg-head p { font-size: 13.5px; color: #64748b; margin-top: 6px; }
  .upg-body { display: grid; grid-template-columns: 1fr 380px; gap: 30px; padding: 22px 30px 30px; }
  @media (max-width: 860px) { .upg-body { grid-template-columns: 1fr; } }
  .upg-label { font-size: 12.5px; font-weight: 400; color: #475569; margin: 14px 0 6px; }
  .upg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .upg-input {
    width: 100%; height: 42px; padding: 0 12px; border: 1px solid #dfe3e8; border-radius: 9px;
    font-size: 14px; font-family: inherit; color: #0f172a; background: #fff; outline: none;
    transition: border-color .12s, box-shadow .12s;
  }
  .upg-input:focus { border-color: #6b9bf5; box-shadow: 0 0 0 3px rgba(47,111,237,.15); }
  .upg-input::placeholder { color: #b6b4af; }
  .pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pay-tab {
    height: 46px; border: 1.5px solid #dfe3e8; border-radius: 9px; background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 400;
    color: #334155; font-family: inherit; transition: border-color .12s, background .12s;
  }
  .pay-tab.on { border-color: #4f46e5; background: #f5f3ff; color: #4f46e5; }
  .pay-tab svg { width: 18px; height: 18px; }
  .bill-opts { display: flex; flex-direction: column; gap: 12px; }
  .bill-opt {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
    border: 1.5px solid #dfe3e8; border-radius: 11px; transition: border-color .12s, background .12s;
  }
  .bill-opt.on { border-color: #4f46e5; background: #f8f7ff; }
  .bill-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cbd5e1; flex-shrink: 0; position: relative; }
  .bill-opt.on .bill-radio { border-color: #4f46e5; }
  .bill-opt.on .bill-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #4f46e5; }
  .bill-info { flex: 1; }
  .bill-title { font-size: 14px; font-weight: 400; color: #0f172a; }
  .bill-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
  .bill-off { font-size: 11px; font-weight: 400; color: #059669; background: #d1fae5; border-radius: 6px; padding: 3px 8px; }
  .upg-confirm { margin-top: 18px; border: 1px solid #e8eaee; border-radius: 12px; padding: 18px; }
  /* ユーザー単位課金の内訳（単価 × 席数） */
  .upg-seats { font-size: 12px; color: #64748b; margin-bottom: 4px; }
  .upg-seats:empty { display: none; }
  .upg-total { font-size: 26px; font-weight: 400; color: #0f172a; }
  .upg-total span { font-size: 14px; font-weight: 400; color: #64748b; }
  .upg-agree { display: flex; gap: 9px; margin: 14px 0; font-size: 11.5px; color: #64748b; line-height: 1.6; }
  .upg-agree input { margin-top: 2px; flex-shrink: 0; }
  .btn-upg-confirm {
    width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer;
    background: #4f46e5; color: #fff; font-size: 14px; font-weight: 400; font-family: inherit;
    transition: background .15s;
  }
  .btn-upg-confirm:hover { background: #4338ca; }
  .brand-cards { display: inline-flex; gap: 3px; }
  .brand-cards span { font-size: 9px; font-weight: 400; padding: 2px 4px; border-radius: 3px; color: #fff; }

  /* ── iOS風ダイアログ（alert / confirm / prompt 代替） ───────────────────── */
  .iosd-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(0,0,0,.35);
    display: none; align-items: center; justify-content: center; padding: 24px;
  }
  .iosd-overlay.open { display: flex; }
  .ios-dialog {
    position: relative;
    width: 380px; max-width: calc(100vw - 40px);
    border-radius: 16px;
    background: rgba(252,252,253,.9);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    overflow: hidden; text-align: center;
  }
  .iosd-close {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: rgba(120,120,128,.14); color: #6b7280; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
  }
  .iosd-close svg { width: 15px; height: 15px; }
  .iosd-close:hover { background: rgba(120,120,128,.24); color: #1f2937; }
  .iosd-body { padding: 22px 22px 18px; }
  .iosd-title { font-size: 16px; font-weight: 400; color: #0f172a; line-height: 1.4; }
  .iosd-msg { font-size: 13px; color: #4b5563; line-height: 1.55; margin-top: 6px; white-space: pre-line; }
  .iosd-title[style*="none"] + .iosd-msg { margin-top: 0; font-size: 14px; color: #1f2937; }
  .iosd-image {
    display: block; margin: 13px auto 0;
    max-width: 100%; max-height: 168px;
    border-radius: 10px; object-fit: contain;
    background: #f1f5f9; box-shadow: 0 2px 8px rgba(15,23,42,.12);
  }
  .iosd-input {
    width: 100%; margin-top: 13px; padding: 8px 11px;
    border: 1px solid #d1d5db; border-radius: 9px;
    font-size: 14px; font-family: inherit; background: #fff;
    outline: none; text-align: left;
  }
  .iosd-input:focus { border-color: #007aff; box-shadow: 0 0 0 3px rgba(0,122,255,.15); }
  .iosd-actions { display: flex; border-top: .5px solid rgba(60,60,67,.29); }
  .iosd-actions button {
    flex: 1; min-width: 0; padding: 12px 8px;
    border: none; background: transparent;
    font-size: 16px; font-family: inherit; color: #007aff; cursor: pointer;
    transition: background .1s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .iosd-actions button + button { border-left: .5px solid rgba(60,60,67,.29); }
  .iosd-actions button:hover  { background: rgba(0,0,0,.04); }
  .iosd-actions button:active { background: rgba(0,0,0,.08); }
  .iosd-actions button.bold   { font-weight: 400; }
  .iosd-actions button.danger { color: #ff3b30; }
  .side-new {
    margin: 6px 0 0 35px;
    text-align: left;
    padding: 7px 12px; border-radius: 8px;
    border: none; background: none;
    font-size: 14px; color: #94a3b8; cursor: pointer;
  }
  .side-new:hover { color: #2563eb; }
  .nav-item.active { background: #e7f0ff; color: #1877f2; font-weight: 400; }
  .nav-item.active .ic { color: #1877f2; }

  /* レール時の丸ロゴ（Metaの∞マーク相当） */
  .brand { position: relative; }
  .brand-mini {
    display: block;
    width: 36px; height: 36px;
    object-fit: contain;
    flex-shrink: 0;
  }

  /* ── デフォルト = アイコンのみのレール ───────────────────────────────── */
  .brand { justify-content: center; padding: 4px 0 14px; }
  .brand-logo,
  .lbl,
  .nav-children,
  .side-new,
  .nav-parent .chev,
  .acct-info { display: none; }
  .lbl { white-space: nowrap; }
  .nav { gap: 4px; }
  .nav-item { justify-content: center; padding: 11px 0; gap: 0; border-radius: 10px; }
  .nav-item .ic { width: 22px; height: 22px; }
  .account { justify-content: center; padding: 8px 0; }

  /* ── hoverで展開（ラベル・ツリー・アカウント情報を表示） ─────────────── */
  .sidebar:is(:hover, .menu-open) .brand { justify-content: flex-start; padding: 4px 8px 18px; }
  .sidebar:is(:hover, .menu-open) .brand-mini { display: none; }
  .sidebar:is(:hover, .menu-open) .brand-logo { display: block; }
  .sidebar:is(:hover, .menu-open) .lbl { display: inline; }
  .sidebar:is(:hover, .menu-open) .nav:not(.pj-collapsed) .nav-children { display: block; }
  .sidebar:is(:hover, .menu-open) .nav:not(.pj-collapsed) .side-new { display: block; }
  .sidebar:is(:hover, .menu-open) .nav-parent .chev { display: block; }
  .sidebar:is(:hover, .menu-open) .nav { gap: 2px; }
  .sidebar:is(:hover, .menu-open) .nav-item { justify-content: flex-start; padding: 9px 10px; gap: 12px; border-radius: 8px; }
  .sidebar:is(:hover, .menu-open) .nav-item .ic { width: 19px; height: 19px; }
  .sidebar:is(:hover, .menu-open) .account { justify-content: flex-start; padding: 10px; }
  .sidebar:is(:hover, .menu-open) .acct-info { display: block; }

  /* Projects 折りたたみ */
  .nav-parent .chev { margin-left: auto; width: 16px; height: 16px; color: #98a2b3; transition: transform .15s; }
  .nav.pj-collapsed .nav-parent .chev { transform: rotate(-90deg); }
  .nav.pj-collapsed .nav-children,
  .nav.pj-collapsed .side-new { display: none; }

  /* 下部: Settings + アカウント */
  .nav-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #f1f3f5; }
  .account {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; margin-top: 6px; border-radius: 10px;
  }
  .account:hover { background: #f6f7f9; }
  .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: #2563eb; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 400; font-size: 14px; flex-shrink: 0;
  }
  /* アバターに画像が入っているとき（背景画像で表示・イニシャル文字は隠す） */
  .avatar.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }
  .acct-info { min-width: 0; }
  .acct-name { font-size: 13px; font-weight: 400; color: #0f172a; }
  .acct-mail { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Report テーブル */
  .report-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #eef0f3; border-radius: 12px; overflow: hidden; font-size: 13px; }
  .report-table th, .report-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
  .report-table th { background: #f8fafc; color: #64748b; font-weight: 400; font-size: 12px; }
  .report-table tr:last-child td { border-bottom: none; }
  .report-table .win { color: #16a34a; font-weight: 400; }
  .report-empty { font-size: 13px; color: #94a3b8; padding: 24px; text-align: center; }

  .workspace-wrap { grid-column: 2; display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100vh; }
  .topbar {
    flex: 0 0 auto;
    height: 56px;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
    display: flex; align-items: center; gap: 16px;
    padding: 0 24px;
  }
  .crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .crumb-link { color: #94a3b8; cursor: pointer; }
  .crumb-link:hover { color: #2563eb; }
  .crumb-mid { color: #64748b; }
  .crumb-current { font-weight: 400; color: #0f172a; }
  .crumb-sep { color: #cbd5e1; font-weight: 400; }

  /* プロジェクト一覧（ランディング） */
  .view-projects { flex: 1; overflow-y: auto; padding: 28px 32px; }
  .view-head { display: flex; align-items: center; margin-bottom: 18px; }
  .view-head h1 { font-size: 26px; font-weight: 400; color: #0f172a; letter-spacing: -.6px; }
  .view-proj-select {
    margin-left: auto;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid #e4e7ec; border-radius: 10px;
    font-size: 14px; background: #fff; outline: none; color: #1e2939;
  }
  .view-proj-select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
  .btn-dark {
    margin-left: auto;
    background: #1c2433; color: #fff; border: none;
    border-radius: 12px; padding: 11px 20px;
    font-size: 14px; font-weight: 400; cursor: pointer;
  }
  .btn-dark:hover { background: #2b3548; }

  /* 検索 + フィルター */
  .view-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
  .search-box {
    flex: 1; max-width: 520px;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #e4e7ec;
    border-radius: 12px; padding: 10px 14px;
  }
  .search-box svg { width: 18px; height: 18px; color: #98a2b3; flex-shrink: 0; }
  .search-box input { border: none; outline: none; width: 100%; font-size: 14px; background: none; color: #1e2939; }
  .filter-btn {
    margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: none; border: none; border-radius: 10px;
    color: #344054; cursor: pointer; transition: background .12s;
  }
  .filter-btn svg { width: 24px; height: 24px; }
  .filter-btn:hover { background: #f1f3f5; }

  /* フォルダ型カード */
  .proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
  }
  .proj-card {
    position: relative;
    aspect-ratio: 1 / 0.92;
    border-radius: 20px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
  }
  .proj-card:hover { transform: translateY(-3px); }
  /* フォルダ背面（デフォルト: 薄いグレー） */
  .proj-card:not(.new) {
    background: linear-gradient(165deg, #f4f5f7 0%, #e8eaee 100%);
    box-shadow: 0 8px 20px rgba(16,24,40,.06);
    transition: transform .18s, box-shadow .18s, background .2s;
  }
  /* フォルダから覗く直近画像（書類） */
  .proj-card .sheet {
    position: absolute; left: 16%; right: 16%; top: 13%; height: 44%;
    background: #fff center/cover no-repeat;
    border-radius: 6px;
    box-shadow: 0 6px 14px rgba(16,24,40,.12);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .proj-card .sheet.blank { background: #fff; }
  .proj-card .sheet.s2 { left: 21%; right: 21%; top: 9%; height: 32%; opacity: .85; }
  /* フォルダ前面（デフォルト: グレーのグラデーション） */
  .proj-card .front {
    position: absolute; left: 4%; right: 4%; bottom: 5%; top: 30%;
    background: linear-gradient(168deg, #f1f3f7 0%, #e2e7ee 55%, #d3dae3 100%);
    border-radius: 12px 12px 18px 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 22px rgba(16,24,40,.08);
    transition: background .2s;
    z-index: 1;
  }
  .proj-card .front::before {  /* タブ */
    content: ''; position: absolute; top: -10%; left: 0; width: 44%; height: 14%;
    background: linear-gradient(168deg, #f1f3f7, #e7ecf3);
    border-radius: 10px 12px 0 0;
    transition: background .2s;
  }
  .proj-card .info { position: absolute; left: 11%; right: 11%; bottom: 12%; z-index: 2; }
  .proj-card .proj-name { font-size: 19px; font-weight: 400; color: #1c2433; transition: color .2s; }
  .proj-card .proj-sub  { font-size: 14px; color: #667085; margin-top: 6px; transition: color .2s; }
  .proj-card .proj-size { font-size: 13px; color: #98a2b3; margin-top: 14px; transition: color .2s; }

  /* ホバー／選択: ブルー + 画像が取り出されるアニメーション */
  .proj-card:is(.sel, .menu-active) .front,
  .proj-card:hover:not(.new) .front { background: linear-gradient(168deg, #8fbcfb 0%, #5e9bf6 55%, #3f86f1 100%); }
  .proj-card:is(.sel, .menu-active) .front::before,
  .proj-card:hover:not(.new) .front::before { background: linear-gradient(168deg, #8fbcfb, #6ba6f7); }
  .proj-card:is(.sel, .menu-active):not(.new),
  .proj-card:hover:not(.new) { background: linear-gradient(165deg, #c8ddfb 0%, #a9c8f8 100%); box-shadow: 0 14px 30px rgba(80,130,220,.22); }
  .proj-card:is(.sel, .menu-active) .proj-name, .proj-card:hover:not(.new) .proj-name { color: #fff; text-shadow: 0 1px 2px rgba(40,80,160,.25); }
  .proj-card:is(.sel, .menu-active) .proj-sub,  .proj-card:hover:not(.new) .proj-sub  { color: rgba(255,255,255,.92); }
  .proj-card:is(.sel, .menu-active) .proj-size, .proj-card:hover:not(.new) .proj-size { color: rgba(255,255,255,.72); }
  /* 取り出しアニメ: 直近画像が上にスッと出る */
  .proj-card:is(:hover, .menu-active):not(.new) .sheet.s1 { transform: translateY(-16px) rotate(-2deg); box-shadow: 0 14px 24px rgba(16,24,40,.22); }
  .proj-card:is(:hover, .menu-active):not(.new) .sheet.s2 { transform: translateY(-8px) rotate(2deg); }
  /* 新規カード */
  .proj-card.new {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px dashed #d0d5dd; border-radius: 20px; color: #98a2b3; background: #fcfcfd;
  }
  .proj-card.new:hover { border-color: #2563eb; color: #2563eb; }
  .proj-card.new .plus { font-size: 32px; line-height: 1; }
  .proj-card.new .lbl { font-size: 13px; margin-top: 8px; }

  header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  header h1 { font-size: 20px; font-weight: 400; letter-spacing: -0.5px; color: #0f172a; }
  header h1 span { color: #2563eb; }

  .project-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }
  .project-row label { font-size: 13px; color: #64748b; white-space: nowrap; }
  #project-select {
    min-width: 200px;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #fff;
  }
  #project-select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }

  .mode-tabs {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin-left: auto;
  }
  .mode-tab {
    padding: 6px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    color: #64748b;
    transition: all .15s;
  }
  .mode-tab.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
  }

  main {
    flex: 1;
    min-height: 0;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    height: 100%;
  }
  /* 右: 選択中ステップのパネル領域 */
  .col-content {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
  }
  /* 表示中のステップパネルを縦いっぱいに広げる（内容が高いときは縮めず背景を伸ばす） */
  .col-content > .card { flex: 1 0 auto; }

  /* 左: ステップナビ（ウィザード） */
  /* ── ステップナビ（番号サークル＋接続線のプログレス表示） ──────────────── */
  .step-nav { display: flex; flex-direction: column; padding-top: 2px; }
  .step-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: all .15s;
  }
  .step-node:hover { border-color: #94a3b8; }
  /* 未到達ステップ: 押せない見た目（クリックはJS側でも無効化） */
  .step-node.locked { opacity: .5; cursor: not-allowed; }
  .step-node.locked:hover { border-color: #e2e8f0; }
  /* 生成中の停止ボタン（アイコンのみ・丸型） */
  .btn-stop {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
    background: #fee2e2; color: #ef4444; cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
  }
  .btn-stop svg { width: 18px; height: 18px; }
  .btn-stop:hover { background: #ef4444; color: #fff; box-shadow: 0 4px 12px rgba(239,68,68,.35); }
  .btn-stop:active { transform: scale(.92); }
  .step-num {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid #cbd5e1; background: #fff; color: #94a3b8;
    font-size: 14px; font-weight: 400;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
  }
  .step-body { min-width: 0; }
  .step-node .t { font-size: 14px; font-weight: 400; color: #0f172a; }
  .step-node .s { font-size: 12px; color: #64748b; margin-top: 2px; }
  /* ナビ内アクションアイコン（次へ / 実行 / 中止） */
  .step-act {
    margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid #cbd5e1; background: #fff; color: #334155; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
  }
  .step-act svg { width: 17px; height: 17px; }
  /* アクションアイコンは「現在のステップ」だけ表示（前後のステップからは進めない） */
  .step-node:not(.active) .step-act { display: none; }
  .step-act:hover { background: #f1f5f9; border-color: #94a3b8; }
  .step-act:active { transform: scale(.92); }
  /* アクティブ（濃紺）ノード上のアイコン */
  .step-node.active .step-act { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
  .step-node.active .step-act:hover { background: rgba(255,255,255,.3); }
  /* 実行アイコン（青で目立たせる） */
  .step-act.step-run { background: #2563eb; border-color: #2563eb; color: #fff; }
  .step-node.active .step-act.step-run { background: #fff; border-color: #fff; color: #2563eb; }
  /* hover: 拡大＋青い発光＋反転で目立たせる（アクティブ状態の指定に勝つよう特異度を上げる） */
  .step-act.step-run:hover,
  .step-node.active .step-act.step-run:hover {
    background: #2563eb; border-color: #93c5fd; color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(37,99,235,.25), 0 6px 18px rgba(37,99,235,.5);
  }
  .step-act.step-run:active,
  .step-node.active .step-act.step-run:active { transform: scale(.96); }
  /* 中止アイコン */
  .step-act.step-stop { background: #fee2e2; border-color: #fecaca; color: #ef4444; }
  .step-act.step-stop:hover { background: #ef4444; border-color: #ef4444; color: #fff; }
  /* 完了 */
  .step-node.done { border-color: #bbf7d0; }
  .step-node.done .step-num { background: #16a34a; border-color: #16a34a; color: #fff; }
  /* 進行中 */
  .step-node.active {
    background: #33415a;
    border-color: #33415a;
    box-shadow: 0 4px 12px rgba(51,65,90,.3);
  }
  .step-node.active .step-num { background: #fff; border-color: #fff; color: #33415a; }
  .step-node.active .t { color: #fff; }
  .step-node.active .s { color: #cbd5e1; }
  .step-node.active::after {
    content: '';
    position: absolute;
    right: -10px; top: 50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #33415a;
  }
  /* サークル同士をつなぐ縦線（完了区間は緑に） */
  .step-line {
    width: 2px; height: 24px;
    margin-left: 30px;   /* node padding 14 + サークル半径 17 - 線半分 1 */
    background: #e2e8f0;
    transition: background .2s;
  }
  .step-line.done { background: #16a34a; }

  /* 生成中: ステップノード右の円形クロック（進捗リング） */
  .step-clock { margin-left: auto; position: relative; width: 34px; height: 34px; flex-shrink: 0; }
  .step-clock svg { width: 34px; height: 34px; transform: rotate(-90deg); display: block; }
  .step-clock .track { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; }
  .step-clock .fill  {
    fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 94.25; stroke-dashoffset: 94.25;
    transition: stroke-dashoffset .4s ease;
  }
  .step-clock .pct {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 400; color: #fff;
  }

  @media (max-width: 900px) {
    main { grid-template-columns: 1fr; height: auto; }
    .col-content { height: auto; overflow: visible; }
    .step-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .step-node { flex: 1; }
    .step-node.active::after { display: none; }
    .step-line { display: none; }
  }

  /* ── グラデーションのアクションボタン（Enter風） ────────────────────────── */
  .btn-enter {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 24px; border: none; border-radius: 999px;
    background: linear-gradient(168deg, #8fbcfb 0%, #5e9bf6 55%, #3f86f1 100%);
    color: #fff; font-size: 14px; font-weight: 400; cursor: pointer;
    /* 浮遊した立体感（上部ハイライト＋青いドロップシャドウ） */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px rgba(63,134,241,.4), 0 2px 5px rgba(63,134,241,.3);
    transition: transform .15s, box-shadow .15s, filter .15s;
    white-space: nowrap;
  }
  .btn-enter:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 28px rgba(63,134,241,.48), 0 4px 8px rgba(63,134,241,.32);
    filter: saturate(1.08);
  }
  .btn-enter:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(63,134,241,.36); }
  .btn-enter:disabled { opacity: .5; cursor: not-allowed; }
  .btn-enter svg { width: 18px; height: 18px; }
  /* 戻るボタン: グレーの浮遊立体デザイン（btn-enterのグレー版） */
  .btn-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border: none; border-radius: 999px;
    background: linear-gradient(168deg, #f8fafc 0%, #e6eaf0 55%, #d3d9e2 100%);
    color: #475569; font-size: 14px; font-weight: 400; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px rgba(100,116,139,.28), 0 2px 5px rgba(100,116,139,.22);
    transition: transform .15s, box-shadow .15s, filter .15s;
    white-space: nowrap;
  }
  .btn-back:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 28px rgba(100,116,139,.34), 0 4px 8px rgba(100,116,139,.24);
  }
  .btn-back:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(100,116,139,.3); }
  .btn-back:disabled { opacity: .5; cursor: not-allowed; }
  .btn-back svg { width: 17px; height: 17px; }
  .btn-logout {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border: 1px solid #e2e8f0; border-radius: 9px;
    background: #fff; color: #475569; font-size: 13px; font-weight: 400;
    font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: all .15s;
  }
  .btn-logout svg { width: 15px; height: 15px; }
  .btn-logout:hover { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
  /* カードタイトルにアクションを右寄せで置く */
  .card-title .title-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

  .card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border: 2px solid transparent;
    transition: border-color .2s, box-shadow .2s, opacity .2s;
  }
  .card-title {
    font-size: 15px;
    font-weight: 400;
    color: #0f172a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .step-badge {
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .step-badge.done { background: #16a34a; }
  .step-badge.neutral { background: #94a3b8; }
  .step-badge.active {
    background: #2563eb;
    animation: badgePulse 1.6s ease-in-out infinite;
  }
  @keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
    50%      { box-shadow: 0 0 0 5px rgba(37,99,235,0); }
  }
  /* 現在ステップのタイトル横の「進行中」表示 */
  .step-now {
    font-size: 11px;
    font-weight: 400;
    color: #2563eb;
    background: #dbeafe;
    padding: 2px 8px;
    border-radius: 20px;
  }

  /* Upload area */
  /* ── フォーム（Step 1）: 左=入力 / 右=保存済み を等分割・行ごとに高さを揃える ── */
  .panel-body { max-width: 620px; }
  .step1-grid {
    display: grid;
    /* minmax(0,1fr): 長いURL等の折り返せない内容があっても常に等分割を維持 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 36px;
    align-items: stretch;                /* 行内で左右セルの高さを揃える */
  }
  @media (max-width: 1100px) { .step1-grid { grid-template-columns: 1fr; } .step1-grid .col-head { display: none; } }
  .col-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 400; color: #98a2b3;
    text-transform: uppercase; letter-spacing: .6px;
    padding: 0 2px 10px;
  }
  /* 各セルは縦flex: ラベル + ボックス（flex:1で行の高さいっぱいに） */
  .step1-grid .form-sec { display: flex; flex-direction: column; }
  .step1-grid .upload-area { flex: 1; justify-content: center; }
  .saved-sec {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 12px 14px;
  }
  .saved-count { color: #94a3b8; font-weight: 400; font-size: 11px; }
  .sv-thumbs { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
  .reg-row { display: flex; align-items: center; gap: 10px; flex: 1; }
  .sv-thumb {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid #e4e7ec;
    background: #fff;
  }
  .sv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sv-thumb .del {
    position: absolute; top: 3px; right: 3px;
    width: 18px; height: 18px;
    border: none; border-radius: 5px;
    background: rgba(15,23,42,.55); color: #fff;
    font-size: 10px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s;
  }
  .sv-thumb:hover .del { opacity: 1; }
  .sv-thumb .del:hover { background: #dc2626; }
  .sv-empty { font-size: 12px; color: #cbd5e1; }
  .sv-urls { display: flex; flex-direction: column; gap: 6px; }
  .sv-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid #e4e7ec; border-radius: 8px;
    padding: 6px 10px; font-size: 12px; color: #334155;
    max-width: 100%;
    min-width: 0;               /* 長いURLでも親を押し広げず … で省略 */
  }
  .sv-chip svg { flex-shrink: 0; color: #98a2b3; }
  .sv-chip a {
    flex: 1; min-width: 0;
    color: #2563eb; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sv-chip a:hover { text-decoration: underline; }
  .sv-chip .url-del { margin-left: auto; }

  /* レギュレーション: リンク取り込み行 */
  /* レギュレーション: ファイル選択ボタン（URL入力と幅を揃える） */
  .reg-file-btn {
    flex: 1; text-align: center;
    padding: 9px 12px; border: 1px solid #e4e7ec; border-radius: 10px; background: #fff;
    font-size: 13px; font-weight: 400; color: #334155; cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s;
  }
  .reg-file-btn:hover { background: #f8fafc; border-color: #94a3b8; }
  /* 必須マーク */
  .req { color: #ef4444; font-weight: 400; margin-left: 3px; }

  /* レギュレーション: チップ（クリックでDL）+ 外側の✕ */
  .sv-reg-row { display: flex; align-items: center; gap: 8px; }
  a.sv-chip { cursor: pointer; text-decoration: none; transition: all .12s; }
  a.sv-chip:hover { border-color: #2563eb; color: #2563eb; }
  a.sv-chip:hover svg { color: #2563eb; }

  /* 保存済みサムネイルのミニページャー */
  .sv-pager {
    flex-basis: 100%;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin-top: 6px;
    font-size: 11px; color: #94a3b8;
  }
  .sv-pager button {
    width: 22px; height: 22px;
    border: 1px solid #e4e7ec; border-radius: 6px;
    background: #fff; color: #64748b; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1; padding: 0;
  }
  .sv-pager button:disabled { opacity: .35; cursor: default; }
  .sv-pager button:not(:disabled):hover { border-color: #94a3b8; background: #f8fafc; }
  .form-sec { margin-bottom: 24px; }
  .f-label {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 13px; font-weight: 400; color: #1e2939;
    margin-bottom: 8px;
  }

  /* ドロップゾーン */
  .upload-area {
    border: 1.5px dashed #d5dae3;
    border-radius: 12px;
    padding: 20px 16px;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    text-align: center;
    transition: all .15s;
    background: #fafbfc;
  }
  .upload-area:hover, .upload-area.drag-over {
    border-color: #2563eb;
    background: #f5f9ff;
  }
  .upload-area input[type=file] { display: none; }
  .up-circle {
    width: 36px; height: 36px; border-radius: 50%;
    background: #eef2f7; color: #667085;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2px;
  }
  .upload-area:hover .up-circle { background: #dbeafe; color: #2563eb; }
  .up-text { font-size: 12px; color: #98a2b3; }
  .up-btns { display: flex; align-items: center; gap: 6px; }
  .up-link {
    border: none; background: none; padding: 2px 4px;
    font-size: 13px; font-weight: 400; color: #2563eb; cursor: pointer;
  }
  .up-link:hover { text-decoration: underline; }
  .up-sep { color: #d0d5dd; font-size: 12px; }
  .file-name { font-size: 12px; color: #2563eb; font-weight: 400; min-height: 16px; }

  /* 参照URL（1行1URL・＋で追加） */
  .url-list { display: flex; flex-direction: column; gap: 8px; }
  .url-row { display: flex; align-items: center; gap: 8px; }
  .url-row input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #e4e7ec; border-radius: 10px;
    font-size: 13px; outline: none; color: #1e2939;
  }
  .url-row input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
  .url-del {
    flex-shrink: 0; border: none; background: none; cursor: pointer;
    color: #98a2b3; font-size: 14px; padding: 4px 6px; border-radius: 6px;
    line-height: 1;
  }
  .url-del:hover { color: #dc2626; background: #fef2f2; }
  .url-add {
    margin-top: 8px;
    border: 1px dashed #cbd5e1; background: none;
    color: #64748b; border-radius: 10px;
    padding: 7px 14px; font-size: 13px; cursor: pointer;
    transition: all .15s;
  }
  .url-add:hover { color: #2563eb; border-color: #2563eb; background: #f8fafc; }

  /* アップロード中スピナー / 完了チェック */
  .spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .up-check { color: #16a34a; font-size: 16px; font-weight: 400; }

  /* アップロード済みファイル一覧 */
  .ref-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
  .ref-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 6px 4px 8px;
  }
  .ref-list-item .path {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;          /* 末尾(ファイル名)を優先表示 */
    text-align: left;
  }
  .ref-list-item .del {
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
  }
  .ref-list-item .del:hover { color: #dc2626; }

  /* ブックマーク（保存済みインプット）ボタン */
  .bookmark-btn {
    width: 32px; height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: color .15s;
  }
  .bookmark-btn:hover { color: #2563eb; }

  /* 保存済みインプットのサムネイル */
  .thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
  }
  .thumb {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    aspect-ratio: 1;
  }
  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .thumb .del {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    border: none;
    border-radius: 6px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .thumb .del:hover { background: #dc2626; }
  .saved-empty { font-size: 12px; color: #94a3b8; padding: 16px 0; }

  /* 保存済みインプットのタブ */
  .saved-tabs { display: flex; border-bottom: 1px solid #e2e8f0; }
  .saved-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #94a3b8;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
  }
  .saved-tab:hover { color: #64748b; }
  .saved-tab.active { color: #10b981; border-bottom-color: #10b981; }

  /* Options grid */
  /* 生成オプション: 縦に1項目ずつ並べる（ステップを進める感覚） */
  .options-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }
  .options-grid .opt-group input[type=number],
  .options-grid .opt-group select { max-width: 320px; }

  /* ── サイズ種別タブ（Bootstrap .nav-tabs 準拠） ─────────────────────────── */
  .nav-tabs {
    display: flex; flex-wrap: wrap;
    border-bottom: 1px solid #e2e8f0;
    margin: 4px 0 16px; padding-left: 0; list-style: none;
  }
  .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 7px 15px;
    background: none; border: 1px solid transparent;
    border-top-left-radius: 8px; border-top-right-radius: 8px;
    color: #2563eb; font-size: 11px; font-weight: 400; line-height: 1.5; cursor: pointer; font-family: inherit;
    transition: border-color .1s, color .1s, background .1s;
  }
  .nav-tabs .nav-link:hover:not(.active) { color: #1d4ed8; border-color: #eef0f3 #eef0f3 #e2e8f0; }
  .nav-tabs .nav-link.active {
    color: #1e2939; background-color: #fff;
    border-color: #e2e8f0 #e2e8f0 #fff;
    font-weight: 400;
  }
  .size-pane { display: none; }
  .size-pane.active { display: flex; gap: 12px; flex-wrap: wrap; }
  :root[data-theme="dark"] .nav-tabs { border-bottom-color: #3a3a37; }
  :root[data-theme="dark"] .nav-tabs .nav-link { color: #6ea8fe; }
  :root[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) { border-color: #2c2c2a #2c2c2a #3a3a37; }
  :root[data-theme="dark"] .nav-tabs .nav-link.active { color: #e7e7e4; background-color: #222220; border-color: #3a3a37 #3a3a37 #222220; }

  /* ── 画像サイズピッカー（形で選ぶ・px表示） ─────────────────────────── */
  .size-picker { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
  .size-opt {
    display: flex; flex-direction: column; align-items: center;
    min-width: 122px;
    padding: 14px 12px 12px;
    background: #fff;
    border: 1.5px solid #e4e7ec;
    border-radius: 14px;
    cursor: pointer;
    transition: all .15s;
  }
  .size-opt:hover { border-color: #94a3b8; transform: translateY(-2px); }
  .size-opt.selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3px #dbeafe;
  }
  /* 形の表示エリア: 高さ固定で下端揃え（相対サイズが比較できる） */
  .size-opt .shape-area {
    height: 86px;
    display: flex; align-items: flex-end; justify-content: center;
  }
  /* 図形は単色（添付カラー）・角丸なし・やや大きめ */
  .size-opt .shape {
    display: flex; align-items: center; justify-content: center;
    border-radius: 0;
    background: #c3d5f5;
    box-shadow: 0 3px 8px rgba(70,105,190,.22);
    transform: scale(1.2); transform-origin: bottom center;
  }
  .size-opt .shape i {
    font-style: normal; font-size: 10px; font-weight: 400; color: #3f5c9e;
    letter-spacing: .3px;
  }
  /* sp-* クラスは色指定を無効化（単色に統一）。形状サイズ指定は inline のまま。 */
  .sp-blue, .sp-purple, .sp-teal, .sp-green, .sp-amber { background: #c3d5f5; }
  .size-opt .sz-px   { font-size: 12px; font-weight: 400; color: #1e2939; margin-top: 8px; }
  .size-opt .sz-name { font-size: 11px; color: #94a3b8; margin-top: 2px; }
  .size-opt.selected .sz-px { color: #2563eb; }
  .opt-group label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
  }
  .opt-group input[type=number],
  .opt-group select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #fff;
  }
  .opt-group input:focus, .opt-group select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px #dbeafe;
  }
  .checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #475569;
    margin-top: 4px;
  }
  .checkbox-row input { accent-color: #2563eb; }

  /* Buttons */
  .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all .15s;
  }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .btn-primary { background: #2563eb; color: #fff; }
  .btn-primary:hover:not(:disabled) { background: #1d4ed8; }
  .btn-success { background: #16a34a; color: #fff; }
  .btn-success:hover:not(:disabled) { background: #15803d; }
  .btn-secondary { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
  .btn-secondary:hover:not(:disabled) { background: #e2e8f0; }
  .btn-danger { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
  .btn-danger:hover:not(:disabled) { background: #fecaca; }

  /* 生成進捗バー */
  .progress-wrap { margin-top: 14px; }
  .progress-track {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 999px;
    transition: width .35s ease;
  }
  .progress-label { font-size: 12px; color: #64748b; margin-top: 6px; text-align: center; }

  /* Results */
  .card-results {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  .banners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    align-content: start;
    padding-right: 4px;
  }
  @media (max-width: 900px) { .banners-grid { overflow: visible; } }
  @media (max-width: 640px) { .banners-grid { grid-template-columns: 1fr; } }

  /* Pagination */
  .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #e2e8f0;
  }
  .pager button {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #475569;
  }
  .pager button:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
  .pager button:disabled { opacity: .4; cursor: not-allowed; }
  .pager .page-info { font-size: 13px; color: #64748b; min-width: 70px; text-align: center; }

  /* Library グリッド（サムネ一覧） */
  .lib-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 8px;
  }
  @media (max-width: 1200px) { .lib-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 900px)  { .lib-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 600px)  { .lib-grid { grid-template-columns: repeat(2, 1fr); } }
  .lib-item { position: relative; aspect-ratio: 1; }
  .lib-item img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 0; border: 1px solid #e4e7ec; cursor: pointer; display: block;
    transition: border-color .15s;
  }
  .lib-item img:hover { border-color: #2563eb; }

  /* Library を上下中央に */
  #view-library { display: flex; flex-direction: column; }
  /* ブロック全体は上下中央。グリッドは常に10枚分の大きさを確保し空セルで埋める
     → ページが変わっても1行目の位置が揃う */
  .lib-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
  .lib-item.ph { visibility: hidden; }

  /* 丸型ページネーション */
  .pager2 { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .pager2 .pg, .pager2 .arrow {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
  }
  .pager2 .pg:hover, .pager2 .arrow:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
  .pager2 .pg.active { background: #3b82f6; border-color: #3b82f6; color: #fff; font-weight: 400; }
  .pager2 .arrow svg { width: 18px; height: 18px; }
  .pager2 .arrow:disabled { opacity: .4; cursor: not-allowed; }
  .pager2 .ellipsis { color: #94a3b8; min-width: 24px; text-align: center; user-select: none; }

  /* 生成中ステータス（画像を生成しています） */
  .gen-status { display: none; align-items: center; gap: 10px; margin: 0 2px 16px; color: #64748b; font-size: 14px; }
  .gen-status-ic { display: inline-flex; gap: 4px; }
  .gen-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: genPulse 1.2s ease-in-out infinite; }
  .gen-dot:nth-child(2) { animation-delay: .2s; }
  .gen-dot:nth-child(3) { animation-delay: .4s; }
  @keyframes genPulse { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
  /* 生成待ちプレースホルダー（ドット柄・パルス） */
  .banner-item.placeholder .gen-ph-box {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; border: 1px dashed #d5d7db;
    background-color: #f6f7f9;
    background-image: radial-gradient(#d9dde3 1.1px, transparent 1.1px);
    background-size: 14px 14px;
    animation: genPulse 1.6s ease-in-out infinite;
  }
  .gen-fade { animation: genFadeIn .35s ease; }
  @keyframes genFadeIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
  :root[data-theme="dark"] .banner-item.placeholder .gen-ph-box { background-color: #26261f; border-color: #3a3a37; background-image: radial-gradient(#3a3a37 1.1px, transparent 1.1px); }
  .banner-item { position: relative; }
  .banner-item img {
    width: 100%;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    display: block;
    cursor: pointer;
    transition: border-color .15s;
  }
  .banner-item img:hover { border-color: #2563eb; }
  /* バナーの「修正」アイコン */
  /* 画像アクション（修正・DL等）: 枠線なし・普段は控えめ、ホバーで表示（画像が主役） */
  .img-actions {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    display: flex; gap: 2px;
  }
  .img-actions .img-act { opacity: 0; }
  .lib-item:hover .img-act,
  .banner-item:hover .img-act,
  .img-actions:focus-within .img-act,
  .img-act.fav-on { opacity: 1; }   /* お気に入り済みハートは常時表示 */
  .img-act {
    width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px;
    background: transparent; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
    transition: background .12s, color .12s, opacity .15s;
  }
  .img-act:hover { background: rgba(15,23,42,.55); }
  .img-act svg { width: 16px; height: 16px; }
  .img-act.fav-on { color: #fb7185; }
  .img-act.act-del:hover { background: rgba(220,38,38,.8); }
  /* ダウンロード形式メニュー */
  .img-dl { position: relative; }
  .dl-menu {
    position: absolute; top: 34px; right: 0; z-index: 5;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,.16);
    padding: 4px; min-width: 92px; display: none;
  }
  .dl-menu.open { display: block; }
  .dl-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 10px; border: none; background: transparent; border-radius: 7px;
    font-size: 12.5px; font-weight: 400; color: #334155; cursor: pointer; text-align: left;
  }
  .dl-menu button:hover { background: #f1f5f9; color: #2563eb; }
  .dl-menu .fmt { font-size: 10px; color: #94a3b8; font-weight: 400; letter-spacing: .04em; }

  /* 修正モーダル */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
  }
  .modal-head { display: flex; align-items: center; font-size: 15px; font-weight: 400; color: #0f172a; margin-bottom: 12px; }
  .modal-head button {
    margin-left: auto; width: 32px; height: 32px; border: none; border-radius: 8px;
    background: none; font-size: 18px; cursor: pointer; color: #94a3b8;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  .modal-head button:hover { background: #f1f5f9; color: #0f172a; }
  .modal-preview { width: 100%; max-height: 56vh; object-fit: contain; background: #f1f5f9; border-radius: 10px; margin-bottom: 14px; }
  .modal textarea {
    width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px;
    font-size: 14px; font-family: inherit; resize: vertical; outline: none; line-height: 1.5;
  }
  .modal textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
  /* .pf-input 内の textarea は外枠(.pf-input:focus-within)が青枠を担うので、二重にしない */
  .modal .pf-input textarea:focus { box-shadow: none; border-color: transparent; }
  .banner-concept {
    font-size: 12px;
    font-weight: 400;
    color: #475569;
    margin-top: 6px;
    text-align: center;
  }
  .banner-desc {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    margin-top: 2px;
  }
  .banner-headlines {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .banner-headline-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1e293b;
    padding: 4px 6px 4px 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    line-height: 1.4;
  }
  .banner-headline-item .hl-num {
    font-size: 10px;
    font-weight: 400;
    color: #93c5fd;
    min-width: 14px;
    flex-shrink: 0;
  }
  .banner-headline-item .hl-text { flex: 1; }
  .hl-copy {
    flex-shrink: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
    color: #64748b;
    transition: background .15s, color .15s;
  }
  .hl-copy:hover { background: #dbeafe; color: #2563eb; }
  .hl-copy.copied { color: #16a34a; }


  .empty-state {
    text-align: center;
    padding: 32px;
    color: #94a3b8;
    font-size: 14px;
  }

  /* Lightbox */
  #lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 100;
    align-items: center;
    justify-content: center;
  }
  #lightbox.open { display: flex; }
  #lightbox img { max-width: 90vw; max-height: 88vh; border-radius: 8px; }
  /* ライトボックス右上のアクションバー（♡・修正・DL・閉じる） */
  .lb-actions {
    position: absolute; top: 14px; right: 18px; z-index: 2;
    display: flex; gap: 8px; align-items: center;
  }
  .lb-act {
    width: 38px; height: 38px; padding: 0; border: none; border-radius: 10px;
    background: rgba(255,255,255,.13); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  .lb-act:hover { background: rgba(255,255,255,.28); }
  .lb-act svg { width: 18px; height: 18px; }
  #lb-fav.fav-on { color: #fb7185; }
  #lb-fav.fav-on svg { fill: currentColor; }
  .lb-sep { width: 1px; height: 22px; background: rgba(255,255,255,.25); margin: 0 2px; }
  .lb-actions .dl-menu { top: 46px; }

  .divider { border: none; border-top: 1px solid #e2e8f0; margin: 16px 0; }

  /* ── iOS風モーション（ヌルッと開く・スッと閉じる） ─────────────────────────
     開く: スプリング気味のイージング（軽いオーバーシュート）
     閉じる: 短めのease-out。display の切替は allow-discrete + @starting-style で補間 */
  @media (prefers-reduced-motion: no-preference) {
    :root {
      --ios-spring: cubic-bezier(.34, 1.2, .4, 1);   /* ポンと弾む */
      --ios-ease:   cubic-bezier(.32, .72, 0, 1);    /* iOSシート標準カーブ */
    }

    /* 編集モーダル: 背景フェード + 本体がヌルッと浮き上がる */
    .modal-overlay {
      opacity: 0;
      transition: opacity .22s ease, display .22s allow-discrete;
    }
    .modal-overlay.open {
      opacity: 1;
      transition: opacity .3s var(--ios-ease), display .3s allow-discrete;
    }
    .modal { transform: scale(.94) translateY(14px); }
    .modal-overlay.open .modal {
      transform: none;
      transition: transform .45s var(--ios-spring);
    }
    @starting-style {
      .modal-overlay.open { opacity: 0; }
      .modal-overlay.open .modal { transform: scale(.94) translateY(14px); }
    }

    /* ライトボックス: 暗幕フェード + 画像がふわっと拡大 */
    #lightbox {
      opacity: 0;
      transition: opacity .22s ease, display .22s allow-discrete;
    }
    #lightbox.open {
      opacity: 1;
      transition: opacity .3s var(--ios-ease), display .3s allow-discrete;
    }
    #lightbox img { transform: scale(.92); }
    #lightbox.open img {
      transform: none;
      transition: transform .45s var(--ios-spring);
    }
    @starting-style {
      #lightbox.open { opacity: 0; }
      #lightbox.open img { transform: scale(.92); }
    }

    /* ポップメニュー（DL形式・プロジェクト操作・アカウント・ヘルプ）: アイコン起点にポップ */
    .dl-menu, .proj-menu, .acct-menu, .help-menu {
      opacity: 0;
      transform: scale(.85) translateY(-6px);
      transform-origin: top right;
      transition: opacity .16s ease, transform .16s ease, display .16s allow-discrete;
    }
    .acct-menu, .help-menu { transform-origin: bottom left; }
    .dl-menu.open, .proj-menu.open, .acct-menu.open, .help-menu.open {
      opacity: 1;
      transform: none;
      transition: opacity .3s var(--ios-spring), transform .3s var(--ios-spring), display .3s allow-discrete;
    }
    @starting-style {
      .dl-menu.open, .proj-menu.open, .acct-menu.open, .help-menu.open { opacity: 0; transform: scale(.85) translateY(-6px); }
    }

    /* iOS風ダイアログ: 少し大きめから縮んで着地（純正アラートと同じ挙動） */
    .iosd-overlay {
      opacity: 0;
      transition: opacity .18s ease, display .18s allow-discrete;
    }
    .iosd-overlay.open {
      opacity: 1;
      transition: opacity .25s var(--ios-ease), display .25s allow-discrete;
    }
    .ios-dialog { transform: scale(1.12); }
    .iosd-overlay.open .ios-dialog {
      transform: none;
      transition: transform .32s var(--ios-spring);
    }
    @starting-style {
      .iosd-overlay.open { opacity: 0; }
      .iosd-overlay.open .ios-dialog { transform: scale(1.12); }
    }

    /* 画面（ビュー）切替: ふわっと浮き上がって現れる */
    #view-home, #view-projects, #view-workspace, #view-report, #view-library, #view-settings {
      animation: viewIn .38s var(--ios-ease);
    }
    @keyframes viewIn {
      from { opacity: 0; transform: translateY(10px); }
    }

    /* ステップパネル切替: わずかに拡大しながら現れる */
    #card-step1, #card-step2, #card-step3 {
      animation: panelIn .42s var(--ios-ease);
    }
    @keyframes panelIn {
      from { opacity: 0; transform: translateY(12px) scale(.988); }
    }
  }

  .status-pill {
    font-size: 11px;
    font-weight: 400;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: auto;
  }
  .status-pill.ready   { background: #dcfce7; color: #16a34a; }
  .status-pill.pending { background: #fef9c3; color: #ca8a04; }

  /* ── パスキー一覧（設定 > アカウント） ───────────────────────────────────── */
  .pk-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
  .pk-item {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--set-line, #eceff3); border-radius: 10px;
    padding: 12px 14px;
  }
  .pk-item svg { width: 18px; height: 18px; flex-shrink: 0; color: #98a2b3; }
  .pk-meta { flex: 1; min-width: 0; }
  .pk-name { font-size: 13.5px; color: var(--set-ink, #1e2939); }
  .pk-sub { font-size: 11.5px; color: var(--set-sub, #98a2b3); margin-top: 2px; }
  .pk-del {
    flex-shrink: 0; border: 1px solid #f0c9c9; background: #fff; color: #dc2626;
    border-radius: 8px; padding: 5px 12px; font-size: 12px; font-family: inherit; cursor: pointer;
  }
  .pk-del:hover { background: #fef2f2; }
  .pk-empty { font-size: 12.5px; color: var(--set-sub, #98a2b3); padding: 2px 2px 8px; }

  /* ── 補足説明の infoアイコン（hoverで吹き出し） ───────────────────────────── */
  /*  アイコンはマスクで描画: 「i」の部分が抜けるのでダーク/ライトどちらでも自然に見える  */
  .info-tip {
    --ic-info: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    display: inline-block; flex-shrink: 0; align-self: center;
    width: 14px; height: 14px;
    background-color: #b9c1cc;
    -webkit-mask: var(--ic-info) center / contain no-repeat;
            mask: var(--ic-info) center / contain no-repeat;
    cursor: help;
    transition: background-color .12s;
  }
  .info-tip:hover, .info-tip:focus-visible { background-color: #2563eb; }
  .info-tip:focus { outline: none; }
  .info-tip:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 50%; }

  .info-pop {
    position: fixed; left: 0; top: 0; z-index: 300;
    max-width: 300px;
    background: #1e2939; color: #fff;
    font-size: 11.5px; line-height: 1.7; letter-spacing: 0;
    padding: 9px 11px; border-radius: 8px;
    box-shadow: 0 10px 28px rgba(16,24,40,.24);
    white-space: pre-line;          /* data-tip の改行をそのまま表示 */
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transform: translateY(-3px);
    transition: opacity .13s, transform .13s, visibility .13s;
  }
  .info-pop.open { opacity: 1; visibility: visible; transform: translateY(0); }

  /* ── 資料（提案書PDF）の抽出状態 ─────────────────────────────────────────── */
  .doc-status { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
  .doc-stat {
    font-size: 11px; color: #475569; background: #f1f5f9;
    border-radius: 20px; padding: 2px 8px;
  }
  .doc-stat.warn { background: #fef3c7; color: #b45309; }
  .doc-acts { display: flex; gap: 6px; margin-top: 8px; }
  .doc-btn {
    border: 1px solid #cbd5e1; background: #fff; color: #475569;
    border-radius: 8px; padding: 5px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
    transition: all .12s;
  }
  .doc-btn:hover:not(:disabled) { border-color: #94a3b8; background: #f8fafc; }
  .doc-btn:disabled { opacity: .5; cursor: not-allowed; }
  .doc-btn.primary { border-color: #2563eb; color: #2563eb; }
  .doc-btn.primary:hover:not(:disabled) { background: #eff6ff; border-color: #2563eb; }

  /* ── 資料ブリーフの確認・編集モーダル ─────────────────────────────────────── */
  .modal.brief-box {
    max-width: 880px; max-height: 88vh;
    display: flex; flex-direction: column;
  }
  .modal.brief-box .modal-head { flex-shrink: 0; justify-content: space-between; }
  .brief-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
  .brief-foot {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px;
    padding-top: 14px; margin-top: 14px; border-top: 1px solid #eef0f3;
    flex-wrap: wrap;
  }
  .bf-pick { display: flex; gap: 10px; margin-right: auto; flex-wrap: wrap; }
  .bf-pick label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
  .bf-pick select {
    border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 8px;
    font-size: 12px; font-family: inherit; color: #1e2939; background: #fff; max-width: 190px;
  }
  .bf-btn-sub {
    border: 1px solid #cbd5e1; background: #fff; color: #475569;
    border-radius: 10px; padding: 9px 16px; font-size: 13px; font-family: inherit; cursor: pointer;
  }
  .bf-btn-sub:hover { border-color: #94a3b8; background: #f8fafc; }

  .bf-src {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: 12px; color: #64748b; background: #f8fafc;
    border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
  }
  .bf-src b { font-size: 13px; color: #1e2939; font-weight: 400; }
  .bf-note { color: #94a3b8; }
  .bf-warn {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 14px; font-size: 12px; color: #92400e;
  }
  .bf-warn b { font-weight: 400; }
  .bf-warn ul { margin: 4px 0 0 16px; line-height: 1.7; }

  .bf-sec { margin-bottom: 18px; }
  .bf-h {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 13px; color: #1e2939; margin-bottom: 6px;
  }
  .bf-h-hint { font-size: 11px; color: #98a2b3; }
  .bf-sub { display: block; font-size: 11px; color: #98a2b3; margin: 6px 0 3px; }
  .bf-empty { font-size: 12px; color: #94a3b8; padding: 6px 2px; }

  .bf-input {
    width: 100%; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 8px;
    font-size: 13px; font-family: inherit; color: #1e2939; background: #fff;
    outline: none; resize: vertical; line-height: 1.5;
  }
  .bf-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
  .bf-input.small { font-size: 12px; padding: 6px 8px; }
  .bf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }

  .bf-card {
    border: 1px solid #e5e9f0; border-radius: 10px; padding: 10px 12px 12px;
    margin-bottom: 8px; background: #fcfdfe;
  }
  .bf-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  .bf-tag {
    font-size: 10.5px; color: #475569; background: #eef2f7;
    border-radius: 20px; padding: 2px 8px;
  }
  .bf-page { font-size: 10.5px; color: #94a3b8; }
  .bf-del {
    margin-left: auto; width: 22px; height: 22px; flex-shrink: 0;
    border: none; background: none; border-radius: 6px;
    color: #cbd5e1; font-size: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bf-del:hover { background: #fee2e2; color: #dc2626; }

  .bf-claim {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid #e5e9f0; border-radius: 10px; padding: 10px 12px;
    margin-bottom: 6px; background: #fcfdfe;
  }
  .bf-claim.ng { background: #fafafa; border-color: #eceff3; }
  .bf-claim.ng .bf-claim-main { opacity: .6; }
  .bf-claim-main { flex: 1; min-width: 0; }
  .bf-chk {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 11px; color: #64748b; cursor: pointer; padding-top: 7px; white-space: nowrap;
  }
  .bf-chk input { accent-color: #2563eb; }
  .bf-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .bf-evi {
    font-size: 10.5px; color: #64748b; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bf-evi.none { color: #cbd5e1; }
  .bf-conf { font-size: 10.5px; color: #94a3b8; }
  .bf-conf.low { color: #b45309; }

  /* ══ ダークモード ══════════════════════════════════════════════════════════ */
  :root[data-theme="dark"] {
    color-scheme: dark;
    /* Settings 用の変数を再マップ */
    --set-ink: #e7e7e4; --set-sub: #9a9a95; --set-line: #33322f; --set-hover: #2a2a28; --set-active: #333330;
  }
  :root[data-theme="dark"] body { background: #191919; color: #e7e7e4; }
  /* サーフェス（サイドバー・カード・モーダル等）を暗色に */
  :root[data-theme="dark"] .sidebar,
  :root[data-theme="dark"] .modal,
  :root[data-theme="dark"] .ios-dialog,
  :root[data-theme="dark"] .proj-menu,
  :root[data-theme="dark"] .acct-menu,
  :root[data-theme="dark"] .help-menu,
  :root[data-theme="dark"] .dl-menu,
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .guide-card,
  :root[data-theme="dark"] .plan-card,
  :root[data-theme="dark"] .set-account,
  :root[data-theme="dark"] .cur-plan,
  :root[data-theme="dark"] .coming-soon .cs-icon,
  :root[data-theme="dark"] .lib-item img { background: #222220; }
  :root[data-theme="dark"] .sidebar { border-right-color: #2c2c2a; }
  :root[data-theme="dark"] .topbar { background: #191919; border-bottom-color: #2c2c2a; }
  :root[data-theme="dark"] .brand-mini,
  :root[data-theme="dark"] .brand-logo { filter: invert(1); }
  /* 枠線 */
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .guide-card,
  :root[data-theme="dark"] .plan-card,
  :root[data-theme="dark"] .cur-plan,
  :root[data-theme="dark"] .set-account,
  :root[data-theme="dark"] .proj-menu,
  :root[data-theme="dark"] .acct-menu,
  :root[data-theme="dark"] .help-menu,
  :root[data-theme="dark"] .dl-menu,
  :root[data-theme="dark"] .nav-foot,
  :root[data-theme="dark"] .lib-tabs { border-color: #33322f; }
  /* テキスト */
  :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
  :root[data-theme="dark"] .card-title,
  :root[data-theme="dark"] .nav-parent,
  :root[data-theme="dark"] .set-h2, :root[data-theme="dark"] .set-k, :root[data-theme="dark"] .set-v,
  :root[data-theme="dark"] .proj-name,
  :root[data-theme="dark"] .home-hero h1,
  :root[data-theme="dark"] .guide-card h3,
  :root[data-theme="dark"] .crumb-current { color: #e7e7e4; }
  :root[data-theme="dark"] .nav-item,
  :root[data-theme="dark"] .nav-child,
  :root[data-theme="dark"] .acct-name,
  :root[data-theme="dark"] .home-hero p,
  :root[data-theme="dark"] .guide-card p,
  :root[data-theme="dark"] .crumb-link,
  :root[data-theme="dark"] .crumb-mid { color: #b8b8b3; }
  /* ホバー */
  :root[data-theme="dark"] .nav-item:hover,
  :root[data-theme="dark"] .nav-child:hover,
  :root[data-theme="dark"] .account:hover,
  :root[data-theme="dark"] .am-item:hover,
  :root[data-theme="dark"] .am-link:hover,
  :root[data-theme="dark"] .hm-item:hover,
  :root[data-theme="dark"] .proj-menu button:hover,
  :root[data-theme="dark"] .btn-outline:hover { background: #2c2c2a; }
  /* 戻るボタン（ダーク） */
  :root[data-theme="dark"] .btn-back {
    background: linear-gradient(168deg, #3a3a37 0%, #2e2e2b 55%, #262623 100%);
    color: #cfcfca;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.4), 0 2px 5px rgba(0,0,0,.3);
  }
  /* 入力欄 */
  :root[data-theme="dark"] input,
  :root[data-theme="dark"] textarea,
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] .upg-input,
  :root[data-theme="dark"] .set-search,
  :root[data-theme="dark"] .search-box,
  :root[data-theme="dark"] .btn-outline,
  :root[data-theme="dark"] .view-proj-select { background: #2a2a28; border-color: #3a3a37; color: #e7e7e4; }
  :root[data-theme="dark"] .set-search input { background: none; }
  /* Library/フォルダ・淡色サーフェス */
  :root[data-theme="dark"] .set-mono,
  :root[data-theme="dark"] .lib-tab .cnt { background: #2a2a28; color: #cfcfca; }
  /* Before/After 比較（枠なし・罫線と余白で見せる） */
  :root[data-theme="dark"] .cmp-title,
  :root[data-theme="dark"] .cmp-h { color: #f2f2ef; }
  :root[data-theme="dark"] .cmp-sub,
  :root[data-theme="dark"] .cmp-inst-label { color: #7d7d78; }
  :root[data-theme="dark"] .cmp-div { background: #33322f; }
  :root[data-theme="dark"] .cmp-inst { background: #2a2a28; }
  :root[data-theme="dark"] .upg-seats { color: #9a9a95; }
  :root[data-theme="dark"] .pk-item { border-color: #33322f; }
  :root[data-theme="dark"] .pk-del { background: #2a2a28; border-color: #4a2f2f; color: #f08c8c; }
  :root[data-theme="dark"] .pk-del:hover { background: #3a2626; }
  :root[data-theme="dark"] .cmp-inst-text { color: #e7e7e4; }
  /* オーバーレイの暗幕は少し濃く */
  :root[data-theme="dark"] .iosd-overlay { background: rgba(0,0,0,.55); }
  /* 罫線一般 */
  :root[data-theme="dark"] .divider,
  :root[data-theme="dark"] .nav-foot,
  :root[data-theme="dark"] .lib-tabs { border-color: #33322f; }

  /* 補足説明の infoアイコン・吹き出し */
  :root[data-theme="dark"] .info-tip { background-color: #6f6f6a; }
  :root[data-theme="dark"] .info-tip:hover,
  :root[data-theme="dark"] .info-tip:focus-visible { background-color: #9dbcf2; }
  :root[data-theme="dark"] .info-pop { background: #333330; color: #e7e7e4; box-shadow: 0 10px 28px rgba(0,0,0,.45); }

  /* 資料（提案書）と資料ブリーフ */
  :root[data-theme="dark"] .doc-stat { background: #2a2a28; color: #cfcfca; }
  :root[data-theme="dark"] .doc-stat.warn { background: #3a3223; color: #e0b877; }
  :root[data-theme="dark"] .doc-btn { background: #2a2a28; border-color: #3a3a37; color: #e7e7e4; }
  :root[data-theme="dark"] .doc-btn:hover:not(:disabled) { background: #333330; }
  :root[data-theme="dark"] .doc-btn.primary { border-color: #6f9bea; color: #9dbcf2; }
  :root[data-theme="dark"] .doc-btn.primary:hover:not(:disabled) { background: #2b3242; }
  :root[data-theme="dark"] .bf-src { background: #222220; color: #9a9a95; }
  :root[data-theme="dark"] .bf-src b { color: #e7e7e4; }
  :root[data-theme="dark"] .bf-note { color: #7d7d78; }
  :root[data-theme="dark"] .bf-warn { background: #2d2718; border-color: #4a3f22; color: #e0b877; }
  :root[data-theme="dark"] .bf-h { color: #e7e7e4; }
  :root[data-theme="dark"] .bf-card,
  :root[data-theme="dark"] .bf-claim { background: #222220; border-color: #33322f; }
  :root[data-theme="dark"] .bf-claim.ng { background: #1f1f1e; border-color: #2c2c2a; }
  :root[data-theme="dark"] .bf-tag { background: #2a2a28; color: #cfcfca; }
  :root[data-theme="dark"] .bf-evi { color: #9a9a95; }
  :root[data-theme="dark"] .bf-evi.none { color: #5f5f5b; }
  :root[data-theme="dark"] .bf-input,
  :root[data-theme="dark"] .bf-pick select,
  :root[data-theme="dark"] .bf-btn-sub { background: #2a2a28; border-color: #3a3a37; color: #e7e7e4; }
  :root[data-theme="dark"] .brief-foot { border-top-color: #33322f; }