/* index.html 固有スタイル */

  :root {
    --bg: #f3f3f3; --surface: #ffffff; --surface2: #f4f5f8;
    --border: #e0e3ec; --accent: #4f7fff; --accent2: #ff6b8a; --accent3: #4f7fff;
    --text: #1a1d2e; --text2: #6b7080; --text3: #a0a5b8;
    --add: rgba(79,127,255,0.08); --add-b: #4f7fff;
    --del: rgba(255,107,138,0.10); --del-b: #ff6b8a;
    --r: 12px;
    --shadow: 0 2px 12px rgba(30,40,80,0.08);
    --shadow-sm: 0 1px 4px rgba(30,40,80,0.06);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body{scrollbar-gutter:stable; background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans JP', sans-serif; min-height: 100vh; }

  /* HEADER */
  header { display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:100; min-height:80px; box-sizing:border-box; }
  .logo { font-family:'IBM Plex Sans JP',sans-serif; font-weight:800; font-size:20px; color:var(--text); }
  .logo span { color:var(--accent); }

  /* LAYOUT */
  .app { display:flex; height:calc(100vh - 57px); }

  /* SIDEBAR */
  .sidebar { width:300px; flex-shrink:0; background:transparent; display:flex; flex-direction:column; overflow:hidden; padding:8px; }
  .stabs { display:none; }
  .stab { flex:1; padding:12px 6px; text-align:center; font-size:12px; font-weight:500; color:var(--text2); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; transition:all .2s; font-family:inherit; }
  .stab.active { color:var(--accent); border-bottom-color:var(--accent); }
  .sc { flex:1; overflow-y:auto; padding:4px; }

  /* INPUTS */
  .lbl { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
  .dot { width:7px; height:7px; border-radius:50%; }
  .dp { background:var(--accent); } .dt { background:var(--accent2); }
  .inp { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-size:13px; font-family:inherit; outline:none; margin-bottom:14px; transition:border-color .2s; }
  .inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,127,255,0.12); }
  .inp::placeholder { color:var(--text3); }
  .run-btn { width:100%; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:var(--r); font-weight:700; font-size:14px; cursor:pointer; font-family:'IBM Plex Sans JP',sans-serif; letter-spacing:.04em; transition:all .2s; box-shadow:0 2px 8px rgba(79,127,255,0.3); }
  .run-btn:hover:not(:disabled) { background:#3a6aff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(79,127,255,0.4); }
  .run-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

  /* STATS */
  .stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
  .stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px; text-align:center; box-shadow:var(--shadow-sm); }
  .stat-n { font-family:'IBM Plex Sans JP',sans-serif; font-size:24px; font-weight:700; }
  .stat-n.a { color:var(--add-b); } .stat-n.d { color:var(--del-b); }
  .stat-l { font-size:10px; color:var(--text2); margin-top:2px; }

  /* DIFF LIST */
  .sec-title { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin:16px 0 8px; }
  .diff-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:15px; margin-bottom:7px; cursor:pointer; transition:all .15s; box-shadow:var(--shadow-sm); }
  .diff-item:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-1px); }
  .diff-item.sel { border-color:var(--accent); background:rgba(79,127,255,.05); }
  .di-head { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
  .tag { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.06em; }
  .tc { background:rgba(79,127,255,.12); color:var(--accent); }
  .ta { background:rgba(79,127,255,.12); color:var(--accent); }
  .td { background:rgba(255,107,138,.12); color:var(--del-b); }
  .ti { background:rgba(160,100,255,.12); color:#9b59b6; }
  .di-title { font-size:12px; font-weight:500; color:var(--text); }
  .di-preview { font-size:11px; color:var(--text3); font-family:monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px; }

  /* COMMENTS */
  .c-card { background:#fff; border:none; border-radius:14px; padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:box-shadow .15s; box-shadow:0 2px 8px rgba(30,40,80,0.06); position:relative; overflow:hidden; }
  .c-card:hover { box-shadow:0 4px 16px rgba(30,40,80,0.12); }
  .c-card .c-text { user-select:text; cursor:text; }
    .c-selected { box-shadow:0 0 0 2px #509d69 !important; background:rgba(80,157,105,0.04) !important; }
  .c-meta { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
  .av { width:28px; height:28px; border-radius:50%; background:#666666; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .c-author { font-size:12px; font-weight:600; color:var(--text); }
  .c-time { font-size:11px; color:var(--text3); margin-left:auto; }
  .c-text { font-size:13px; color:var(--text2); line-height:1.6; }
  .c-ref { margin-top:7px; padding:5px 10px; background:var(--surface2); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; font-size:11px; color:var(--text3); }
  .c-inp { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-size:13px; font-family:inherit; outline:none; resize:none; min-height:70px; margin-top:12px; transition:border-color .2s; }
  .c-inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,127,255,0.1); }
  .c-send { margin-top:7px; padding:8px 18px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; box-shadow:0 2px 8px rgba(79,127,255,0.25); transition:all .15s; }
  .c-send:hover { background:#3a6aff; transform:translateY(-1px); }
  .author-inp { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:var(--text); font-size:13px; font-family:inherit; outline:none; margin-bottom:7px; transition:border-color .2s; }
  .author-inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,127,255,0.1); }

  /* MAIN */
  .main { flex:1; display:flex; flex-direction:column; overflow:hidden; background:#f3f3f3; }
  .toolbar { display:flex; align-items:center; gap:10px; padding:10px 20px;  background:var(--surface); flex-wrap:wrap; box-shadow:var(--shadow-sm); }
  .vtabs { display:flex; background:var(--surface2); border-radius:8px; border:1px solid var(--border); }
  .vtab { padding:10px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; color:#333; border:none; background:none; font-family:inherit; transition:all .15s; }
  .vtab.active { background:var(--surface); color:#333; font-weight:600; box-shadow:var(--shadow-sm); }
  .sp { flex:1; }
  .tbtn { display:flex; align-items:center; gap:5px; padding:7px 14px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text2); font-size:12px; cursor:pointer; font-family:inherit; transition:all .15s; }
  .tbtn:hover { border-color:var(--accent); color:var(--accent); }
  .tbtn.pri { background:var(--accent); border-color:var(--accent); color:#fff; }
  .tbtn.pri:hover { background:#3a6aff; }

  /* DIFF AREA */
  .diff-area { flex:1; overflow:auto; display:flex; flex-direction:column; background:#f3f3f3; padding:8px 16px 16px; }
  .split { display:flex; flex:1; overflow:hidden; gap:16px; padding:16px; background:#f3f3f3; box-sizing:border-box; }
  .pane { flex:1; display:flex; flex-direction:column; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 2px 12px rgba(30,40,80,0.08); }
  .ph { padding:9px 14px; background:var(--surface);  display:flex; align-items:center; gap:7px; font-size:12px; border-radius:var(--r) var(--r) 0 0; }
  .ph-url { font-size:11px; color:var(--text2); font-family:monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pc { flex:1; overflow:auto; position:relative; background:#f8f9fc; border-radius:0 0 var(--r) var(--r); }
  .pc img { width:100%; display:block; }
  .pc canvas { width:100%; display:block; }
  .diff-badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.7); color:#fff; font-size:11px; padding:3px 8px; border-radius:4px; pointer-events:none; }

  /* SOURCE DIFF */
  .src-view { flex:1; overflow:auto; background:var(--surface2); }
  .dl { display:flex; font-family:monospace; font-size:12px; line-height:1.7; min-height:26px; }
  .dl:hover { background:rgba(79,127,255,.04); }
  .ln { width:40px; padding:0 6px; text-align:right; color:var(--text3); font-size:11px; border-right:1px solid var(--border); user-select:none; display:flex; align-items:center; justify-content:flex-end; }
  .ls { width:24px; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
  .lc { flex:1; padding:0 14px; display:flex; align-items:center; white-space:pre; overflow:hidden; }
  .la { background:var(--add); } .la .ls { color:var(--add-b); }
  .ld { background:var(--del); } .ld .ls { color:var(--del-b); }
  .l-sep { background:var(--surface); color:var(--text3); font-size:11px; padding:3px 14px; border-top:1px solid var(--border);  font-family:monospace; }
  .chg-block { border:1px solid var(--border); border-radius:8px; margin:6px 0; overflow:hidden; box-shadow:var(--shadow-sm); }
  .chg-label { font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 10px; color:var(--text2); background:var(--surface);  }
  .chg-prod { background:rgba(255,107,138,0.06); }
  .chg-test { background:rgba(79,127,255,0.06); }
  .chg-prod .dl { background:transparent; }
  .chg-test .dl { background:transparent; }
  .chg-divider { height:1px; background:var(--border); }

  /* MARK TOOL */
  .mark-toolbar { display:flex; gap:6px; align-items:center; margin-top:10px; padding:8px 10px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; }
  .mark-toolbar select { background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; padding:3px 8px; }
  .mark-btn { font-size:12px; padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text2); cursor:pointer; transition:all .15s; }
  .mark-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
  .mark-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 2px 6px rgba(79,127,255,0.3); }
  .mark-btn.danger { border-color:var(--del-b); color:var(--del-b); }
  .mark-btn.danger:hover { background:var(--del-b); color:#fff; }
  .mark-target { display:flex; gap:6px; margin-left:auto; align-items:center; font-size:12px; color:var(--text3); }
  .mark-target select { background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; padding:3px 6px; }
  .mark-canvas-wrap { position:relative; display:inline-block; margin-top:8px; max-width:100%; }
  .mark-canvas-wrap canvas { display:block; max-width:100%; cursor:crosshair; border:2px solid var(--accent); border-radius:6px; }
  .mark-preview { margin-top:8px; font-size:12px; color:var(--text3); }
  .c-marks { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
  .c-mark-badge { font-size:11px; background:var(--accent); color:#fff; border-radius:20px; padding:2px 9px; }

  /* EMPTY / LOADING */
  .empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text3); }
  .empty-icon { font-size:44px; opacity:.4; }
  .empty-title { font-size:15px; color:var(--text2); font-weight:500; }
  .empty-desc { font-size:13px; text-align:center; max-width:280px; line-height:1.7; color:var(--text3); }
  .loading-wrap { display:flex; align-items:center; gap:12px; }
  .spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* MODAL */
  .mbg { position:fixed; inset:0; background:rgba(30,40,80,.25); display:flex; align-items:center; justify-content:center; z-index:200; backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .2s; }
  .mbg.open { opacity:1; pointer-events:all; }
  .modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; width:460px; max-width:90vw; transform:translateY(16px); transition:transform .2s; box-shadow:0 8px 40px rgba(30,40,80,0.16); }
  .mbg.open .modal { transform:translateY(0); }
  .m-title { font-family:'IBM Plex Sans JP',sans-serif; font-size:18px; font-weight:700; margin-bottom:5px; color:var(--text); }
  .m-sub { font-size:13px; color:var(--text2); margin-bottom:20px; }
  .m-lbl { font-size:12px; color:var(--text2); margin-bottom:6px; font-weight:500; }
  .link-box { display:flex; gap:7px; margin-bottom:18px; }
  .link-inp { flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--accent); font-size:12px; font-family:monospace; outline:none; }
  .copy-btn { padding:9px 14px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; box-shadow:0 2px 8px rgba(79,127,255,0.3); }
  .role-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:18px; }
  .role-opt { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:11px; cursor:pointer; transition:all .15s; }
  .role-opt.sel { border-color:var(--accent); background:rgba(79,127,255,.06); box-shadow:0 0 0 3px rgba(79,127,255,0.1); }
  .role-opt-t { font-size:13px; font-weight:600; margin-bottom:3px; color:var(--text); }
  .role-opt-d { font-size:11px; color:var(--text2); }
  .m-row { display:flex; gap:8px; margin-bottom:18px; align-items:center; }
  .m-actions { display:flex; gap:8px; justify-content:flex-end; }
  .btn-sec { padding:9px 18px; background:none; border:1px solid var(--border); border-radius:8px; color:var(--text2); cursor:pointer; font-family:inherit; font-size:13px; transition:all .15s; }
  .btn-sec:hover { border-color:var(--accent); color:var(--accent); }

  /* TOAST */
  .toast { position:fixed; bottom:20px; right:20px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 18px; font-size:13px; color:var(--text); z-index:300; transform:translateY(16px); opacity:0; transition:all .25s; pointer-events:none; box-shadow:0 4px 20px rgba(30,40,80,0.14); }
  .toast.show { transform:translateY(0); opacity:1; }

  /* LOADING BAR */
  .lbar { height:3px; background:linear-gradient(90deg,var(--accent),#a78bfa); border-radius:0 3px 3px 0; width:0%; transition:width .1s linear; position:fixed; top:0; left:0; z-index:999; }

  ::-webkit-scrollbar { width:5px; height:5px; }
  ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
  ::-webkit-scrollbar-track { background:transparent; }

  /* MODE SELECT */
  .mode-screen { position:static; background:none; z-index:auto; display:block; overflow:visible; gap:0; }
  .mode-logo { font-family:'IBM Plex Sans JP',sans-serif; font-weight:800; font-size:32px; letter-spacing:-1px; color:var(--text); }
  .mode-logo span { color:var(--accent); }
  .mode-sub { font-size:14px; color:var(--text2); margin-top:-36px; }
  .mode-cards { display:flex; gap:24px; }
  .mode-card { width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:20px; padding:36px 24px; text-align:center; cursor:pointer; transition:all .2s; box-shadow:var(--shadow); }
  .mode-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 20px rgba(30,40,80,0.12); }
  .mode-card.comment:hover { border-color:var(--accent2); box-shadow:0 12px 40px rgba(255,107,138,0.15); }
  .mode-card-icon { font-size:48px; margin-bottom:16px; }
  .mode-card-title { font-family:'IBM Plex Sans JP',sans-serif; font-weight:700; font-size:18px; margin-bottom:8px; color:var(--text); }
  .mode-card.comment .mode-card-title { color:var(--text); }
  .mode-card-desc { font-size:12px; color:var(--text2); line-height:1.6; }
  .back-btn { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 14px; color:var(--text2); font-size:12px; cursor:pointer; font-family:inherit; transition:all .15s; box-shadow:var(--shadow-sm); }
  .back-btn:hover { border-color:var(--accent); color:var(--accent); }

  /* COMMENT MODE */
  .comment-pane { display:flex; flex-direction:column; flex:1; overflow:hidden; }
  .comment-url-bar { display:flex; gap:8px; padding:10px 14px; background:var(--surface);  }
  .comment-url-inp { flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:var(--text); font-size:13px; outline:none; font-family:inherit; transition:border-color .2s; }
  .comment-url-inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,127,255,0.1); }
  .comment-fetch-btn { padding:8px 18px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; box-shadow:0 2px 8px rgba(79,127,255,0.25); transition:all .15s; }
  .comment-fetch-btn:hover { background:#3a6aff; }
  .pane-url-form { display:flex; gap:6px; padding:6px 10px; background:var(--surface); border-top:1px solid var(--border); }
  .pane-url-inp { flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:6px 10px; color:var(--text); font-size:12px; outline:none; font-family:inherit; transition:border-color .2s; }
  .pane-url-inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,127,255,0.1); }
  .pane-fetch-btn { padding:6px 14px; background:var(--accent); color:#fff; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; box-shadow:0 2px 6px rgba(79,127,255,0.25); transition:all .15s; }
  .pane-fetch-btn:hover { background:#3a6aff; }
  .pane-fetch-btn:disabled { opacity:0.5; cursor:not-allowed; box-shadow:none; }
  .pane-status { font-size:11px; padding:4px 10px; color:var(--accent); }
  .material-icons { font-size:inherit; vertical-align:middle; line-height:1; }
  .ico { font-family:'Material Symbols Outlined'; font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20; font-style:normal; font-size:inherit; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; vertical-align:middle; }
  .mi { font-family:'Material Icons'; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; vertical-align:middle; }

/* ============================================
   レスポンシブ (max-width: 896px)
   ============================================ */
@media screen and (max-width: 896px) {
  /* ヘッダー */
  header { padding: 0 12px; min-height: 60px; }

  /* ダッシュボードレイアウト */
  .dashboard-layout { grid-template-columns: 1fr !important; }
  .feature-row.cols-2 { grid-template-columns: 1fr !important; }

  /* 機能カード */
  .feature-card-bg { aspect-ratio: 16/9; }
  .feature-card-bg.wide { aspect-ratio: 16/9; }

  /* セッションリスト */
  .session-list { max-height: none; }

  /* モーダル */
  .mbox { padding: 20px 16px; max-width: 100% !important; }

  /* inp フォントサイズ（iOSズーム防止） */
  .inp { font-size: 16px !important; }
}

@media screen and (max-width: 896px) {
  .feature-row-flex { flex-direction: column !important; }
  .feature-row-flex > * { flex: none !important; width: 100% !important; }
}

@media screen and (max-width: 896px) {
  /* プロフィール・ストレージを横並び */
  .profile-storage-row { display: flex !important; flex-direction: row !important; gap: 8px; margin-bottom: 16px; }
  .profile-storage-row > * { flex: 1; }

  /* セッションリスト：左右→上下 */
  .session-layout { flex-direction: column !important; }
  .session-left, .session-right { width: 100% !important; }

  /* アーカイブリスト：2列 */
  .archive-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media screen and (max-width: 896px) {
  /* アーカイブリスト2列 */
  .archive-index-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* プロジェクト管理を最初に表示するためモバイルで順序変更 */
  .feature-grid { display: flex !important; flex-direction: column !important; }
  .feature-row-project { order: 2; }
  .feature-row-flex:nth-child(2) { order: 1; } /* プロフィール・ストレージ */
  .feature-row-flex:nth-child(3) { order: 2; } /* プロジェクト */
  .feature-row-flex:nth-child(4) { order: 3; } /* webコメント・ファイルコメント */
  .feature-row-flex:nth-child(5) { order: 4; } /* web比較・ファイル比較・アーカイブ */
}

@media screen and (max-width: 896px) {
  /* 全rowを縦並びに */
  .idx-row { flex-direction: column !important; }
  .idx-row > * { flex: none !important; width: 100% !important; }

  /* 1段目：プロフィールを上、プロジェクトを下に */
  .idx-row-1 { flex-direction: column-reverse !important; }
  .idx-row-1 > *:last-child { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; padding: 12px !important; }

  /* storageWidgetのaspect-ratioをモバイルで調整 */
  #storageWidget { aspect-ratio: auto !important; width: 100% !important; padding: 16px !important; }

  /* アーカイブグリッド2列 */
  .archive-index-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* index.htmlから移動 */
.ico{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;font-style:normal;line-height:1;display:inline-block;vertical-align:middle;}
.mi{font-family:'Material Icons';font-style:normal;line-height:1;display:inline-block;vertical-align:middle;}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans JP',sans-serif;min-height:100vh;}

/* ヘッダー */
header{padding:0 24px;height:80px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:16px;}

/* レイアウト */
.dashboard{max-width:1280px;margin:0 auto;padding:40px 40px 0;}

/* 挨拶 */
.greeting{margin-bottom:40px;}
.greeting-name{font-size:28px;font-weight:800;color:var(--text);margin-bottom:4px;}
.greeting-sub{font-size:13px;color:var(--text2);}

/* メイングリッド */
.main-grid{display:block;}

/* ダッシュボードレイアウト */
.dashboard-layout{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:48px;}
.feature-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.feature-row{display:grid;gap:16px;}
.feature-row.cols-1{grid-template-columns:1fr;}
.feature-row.cols-2{grid-template-columns:1fr 1fr;}
.feature-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
.feature-card{border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .15s;position:relative;}
.feature-card:hover{transform:translateY(-2px);}
.feature-card-bg{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:center;}
.feature-card-bg.wide{aspect-ratio:32/9;}
.feature-card-label{padding:10px 16px;color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px;}
.feature-card-desc-overlay{padding:0 16px 8px;color:rgba(255,255,255,0.9);font-size:11px;}
.sidebar-cards{display:flex;flex-direction:column;gap:16px;}
.sidebar-card{border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .15s;}
.sidebar-card:hover{transform:translateY(-2px);}
.sidebar-card-bg{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:center;}
.sidebar-card-label{padding:10px 14px;color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;}
.sidebar-card-desc{padding:0 14px 8px;color:rgba(255,255,255,0.9);font-size:10px;}

/* プロジェクト・アーカイブ（横長） */


/* 右サイドバー */
.right-sidebar{display:flex;flex-direction:column;gap:16px;}

/* ユーザーカード */
.user-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 1px 4px rgba(30,40,80,0.06);}
.user-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.user-avatar{width:40px;height:40px;border-radius:50%;background:#666;color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.user-name{font-size:14px;font-weight:700;}
.user-email{font-size:11px;color:var(--text2);}

/* ストレージ */
.storage-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 1px 4px rgba(30,40,80,0.06);}
.storage-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;}
.storage-gauge{display:flex;justify-content:center;margin-bottom:8px;}
.storage-text{font-size:12px;color:var(--text2);text-align:center;}

/* リストエリア */
.list-section{margin-top:0;margin-bottom:48px;}
.list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.list-title{font-size:15px;font-weight:700;color:var(--text);}
.list-more{font-size:12px;color:var(--text2);padding:4px 12px;border:1px solid var(--border);border-radius:20px;cursor:pointer;background:var(--surface);text-decoration:none;transition:border-color .15s;}
.list-more:hover{border-color:var(--accent);color:var(--accent);}

/* セッションカード */
.session-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 4px rgba(30,40,80,0.06);transition:box-shadow .15s;}
.session-card:hover{box-shadow:0 2px 12px rgba(30,40,80,0.1);}
.session-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.session-body{flex:1;min-width:0;}
.session-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
.session-meta{font-size:11px;color:var(--text3);}
.session-actions{display:flex;gap:6px;flex-shrink:0;}
.btn-sm{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:filter .15s;}
.btn-sm:hover{filter:brightness(1.1);}
.btn-primary{background:#666666;color:#fff;}
.btn-ghost{background:none;border:1px solid var(--border)!important;color:var(--text2);padding:4px 8px;}

/* アーカイブカード */
.archive-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 4px rgba(30,40,80,0.06);transition:box-shadow .15s;}
.archive-card:hover{box-shadow:0 2px 12px rgba(30,40,80,0.1);}
.archive-thumb{width:40px;height:40px;border-radius:8px;background:#d97706;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* グループ共有ボタン */
.group-share-bar{display:none;align-items:center;gap:8px;margin-bottom:12px;padding:10px 14px;background:rgba(79,127,255,0.06);border:1px solid rgba(79,127,255,0.2);border-radius:10px;}
/* ============================================
   index.html モバイル対応 (max-width: 768px)
   ============================================ */
@media screen and (max-width: 768px) {

  /* 余白縮小 */
  .dashboard { padding: 20px 16px 0; }

  /* 挨拶 */
  .greeting-name { font-size: 20px; }

  /* 1段目：プロジェクト管理・プロフィール */
  .feature-grid > div:first-child {
    flex-direction: column !important;
  }
  .feature-grid > div:first-child > .feature-card {
    flex: none !important;
    width: 100% !important;
  }
  /* プロフィール欄を非表示 */
  .feature-grid > div:first-child > div:last-child {
    display: none !important;
  }

  /* 2段目・3段目：カードを縦積み */
  .feature-grid > div:nth-child(2),
  .feature-grid > div:nth-child(3) {
    flex-direction: column !important;
  }
  .feature-grid > div:nth-child(2) > .feature-card,
  .feature-grid > div:nth-child(3) > .feature-card {
    flex: none !important;
    width: 100% !important;
  }

  /* ストレージを非表示 */
  #storageWidget { display: none !important; }

  /* 機能カードのアスペクト比統一 */
  .feature-card-bg { aspect-ratio: 16/6 !important; }
  .feature-card-bg[style*="32/9"] { aspect-ratio: 16/6 !important; }

  /* セッションカード：2段レイアウト */
  .session-card { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .session-icon { width: 30px; height: 30px; }
  .session-body { flex: 1; min-width: 0; }
  .session-title { font-size: 12px; }
  .session-meta { font-size: 10px; }
  .session-actions {
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 2px;
  }

  /* アーカイブカード */
  .archive-card { padding: 10px 12px; }

  /* フッター */
  footer { padding: 20px 16px; }
}

@media screen and (max-width: 768px) {
  /* 機能カード段間マージン統一 */
  .feature-grid > div {
    margin-bottom: 16px !important;
  }
  .feature-grid > div:last-child {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .feature-row-sp { margin-bottom: 16px !important; }
}

/* 機能カード段間マージン */
.feature-row-sp {
  margin-bottom: 16px;
}
.feature-row-sp:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .feature-grid { gap: 0 !important; }
}

@media screen and (max-width: 768px) {
  header { position: relative !important; top: auto !important; }
  html { scrollbar-gutter: auto !important; }
}