/* =============================================================================
 * notion.css — 経営管理アプリを Notion と「見た目・操作とも同一」にするための主スタイル
 *
 * 方針: Notion (light mode) の配色・余白・タイポ・サイドバーツリー・データベース
 *       ビュー（テーブル/ボード/ギャラリー/リスト）・ビュータブ・ツールバー（Filter/
 *       Sort/Search/New）・ページ（プロパティ＋本文＋インラインDB）・カラータグを忠実再現。
 * 絵文字は使わない。アイコンはモノクロの線画SVG（Notion既定のDBアイコン相当）。
 * 本ファイルは notion-theme.css の後に読み込み、シェルとDB系コンポーネントを上書き／追加する。
 * analytics（.card/.kpi/.chartbox 等）は notion-theme.css 側を継続利用。
 * ========================================================================== */

:root {
  /* Notion テキスト階調 */
  --nt-text:#37352f;
  --nt-text-2:#787774;     /* セカンダリ */
  --nt-text-3:#9b9a97;     /* プレースホルダ/説明 */
  --nt-line:#ecebea;       /* 罫線（薄） */
  --nt-line-2:#e3e2e0;     /* 罫線（やや濃） */
  --nt-bg:#ffffff;
  --nt-sidebar:#f7f7f5;
  --nt-hover:#f1f1ef;      /* 行/項目ホバー */
  --nt-hover-2:#e8e7e4;    /* 選択 */
  --nt-blue:#2383e2;
  --nt-radius:3px;
  /* Notion タグ配色（light mode 実測値）: bg / text */
  --tg-default-bg:#e3e2e0; --tg-default-fg:#37352f;
  --tg-gray-bg:#e3e2e0;    --tg-gray-fg:#787774;
  --tg-brown-bg:#eee0da;   --tg-brown-fg:#64473a;
  --tg-orange-bg:#fadec9;  --tg-orange-fg:#854c1d;
  --tg-yellow-bg:#fdecc8;  --tg-yellow-fg:#89632a;
  --tg-green-bg:#dbeddb;   --tg-green-fg:#2b593f;
  --tg-blue-bg:#d3e5ef;    --tg-blue-fg:#28456c;
  --tg-purple-bg:#e8deee;  --tg-purple-fg:#492f64;
  --tg-pink-bg:#f5e0e9;    --tg-pink-fg:#943d73;
  --tg-red-bg:#ffe2dd;     --tg-red-fg:#6e3630;
}

body {
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Hiragino Kaku Gothic ProN","Noto Sans JP",Arial,sans-serif;
  color:var(--nt-text);
  font-size:14px;
}

/* =============================================================================
 * アプリシェル: サイドバー + メイン
 * ========================================================================== */
#app.shown { display:flex; min-height:100vh; align-items:stretch; }

/* ---- 左サイドバー（Notionツリー） ---- */
.n-sidebar {
  width:248px; flex-shrink:0; background:var(--nt-sidebar);
  border-right:1px solid var(--nt-line-2);
  height:100vh; position:sticky; top:0; overflow-y:auto;
  padding:0; display:flex; flex-direction:column; gap:0;
  font-size:14px; color:var(--nt-text-2);
}
.n-sidebar::-webkit-scrollbar { width:8px; }
.n-sidebar::-webkit-scrollbar-thumb { background:#d3d1cb; border-radius:4px; }

/* ワークスペースヘッダ */
.n-ws {
  display:flex; align-items:center; gap:8px; padding:10px 12px 8px;
  font-weight:600; color:var(--nt-text); font-size:14px; cursor:default;
}
.n-ws .n-ws-logo {
  width:20px; height:20px; border-radius:4px; background:var(--nt-text); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
}
.n-ws .n-ws-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.n-ws .n-ws-cv { color:var(--nt-text-3); font-size:11px; }

/* サイドバー共通アクション（Search 等） */
.n-side-actions { padding:0 8px 6px; }
.n-side-item {
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; color:var(--nt-text-2);
  padding:4px 8px; border-radius:var(--nt-radius); line-height:1.3; font-size:14px;
}
.n-side-item:hover { background:var(--nt-hover); }
.n-side-item .ic { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--nt-text-2); }
.n-side-item .ic svg { width:16px; height:16px; display:block; }

/* セクション見出し（PRIVATE / TEAMSPACES 風） */
.n-side-section {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 4px; font-size:11px; font-weight:600; letter-spacing:.03em;
  color:var(--nt-text-3); text-transform:none;
}
.n-tree { padding:0 8px; display:flex; flex-direction:column; gap:1px; }
.n-tree-item {
  display:flex; align-items:center; gap:7px; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; color:var(--nt-text-2);
  padding:5px 8px; border-radius:var(--nt-radius); line-height:1.3; font-size:14px;
}
.n-tree-item:hover { background:var(--nt-hover); }
.n-tree-item.active { background:var(--nt-hover-2); color:var(--nt-text); font-weight:500; }
.n-tree-item .ic { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#91918e; }
.n-tree-item .ic svg { width:17px; height:17px; display:block; }
.n-tree-item.active .ic { color:var(--nt-text-2); }
.n-tree-item .lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.n-tree-item .cnt { color:var(--nt-text-3); font-size:12px; font-variant-numeric:tabular-nums; }

.n-sidebar .n-spacer { flex:1 1 auto; }
.n-sidebar .n-foot {
  border-top:1px solid var(--nt-line-2); padding:8px 14px; font-size:12px; color:var(--nt-text-3);
}
.n-sidebar .n-foot .who { display:block; color:var(--nt-text-2); margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.n-sidebar .n-foot button { background:none; border:0; color:var(--nt-blue); cursor:pointer; font-size:12px; padding:0; }

/* ---- メイン ---- */
.n-main { flex:1; min-width:0; background:var(--nt-bg); display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* トップバー（パンくず） */
.n-topbar {
  height:45px; flex-shrink:0; display:flex; align-items:center; gap:4px;
  padding:0 16px; border-bottom:1px solid transparent; font-size:14px; color:var(--nt-text-2);
}
.n-crumb { display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; color:var(--nt-text-2); padding:3px 6px; border-radius:var(--nt-radius); font-size:14px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.n-crumb:hover { background:var(--nt-hover); }
.n-crumb .ic { width:16px; height:16px; color:#91918e; display:inline-flex; }
.n-crumb .ic svg { width:15px; height:15px; }
.n-crumb-sep { color:var(--nt-text-3); padding:0 1px; }

/* スクロール領域 */
.n-scroll { flex:1; overflow-y:auto; }

/* DBページ/分析ページ共通の本文幅。Notion既定は最大 ~900px・上左右パディング。 */
.n-page-wrap { max-width:976px; margin:0 auto; padding:0 96px; }
.n-page-wrap.full { max-width:none; padding:0 60px; }

/* =============================================================================
 * データベースページ ヘッダ
 * ========================================================================== */
.n-db-head { padding:48px 0 2px; }
.n-db-title { display:flex; align-items:center; gap:10px; font-size:30px; font-weight:700; letter-spacing:-.4px; color:var(--nt-text); margin:0; }
.n-db-title .ic { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:#91918e; }
.n-db-title .ic svg { width:30px; height:30px; }
.n-db-desc { color:var(--nt-text-3); font-size:14px; margin:8px 0 0; line-height:1.5; }

/* ビュータブ */
.n-viewbar { display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--nt-line-2); margin-top:10px; }
.n-viewtab {
  display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  color:var(--nt-text-2); font-size:14px; padding:8px 8px; margin-bottom:-1px;
  border-bottom:2px solid transparent; line-height:1.2;
}
.n-viewtab .ic { width:16px; height:16px; color:#91918e; display:inline-flex; }
.n-viewtab .ic svg { width:15px; height:15px; }
.n-viewtab:hover { color:var(--nt-text); }
.n-viewtab.active { color:var(--nt-text); border-bottom-color:var(--nt-text); font-weight:500; }
.n-viewtab.add { color:var(--nt-text-3); }

/* ツールバー（検索/フィルタ/ソート/New） */
.n-toolbar { display:flex; align-items:center; gap:2px; padding:8px 0 6px; min-height:42px; }
.n-toolbar .sp { flex:1; }
.n-tb-btn {
  display:flex; align-items:center; gap:5px; background:none; border:0; cursor:pointer;
  color:var(--nt-text-2); font-size:13px; padding:5px 8px; border-radius:var(--nt-radius); line-height:1.2;
}
.n-tb-btn:hover { background:var(--nt-hover); }
.n-tb-btn.on { color:var(--nt-blue); }
.n-tb-btn .ic { width:15px; height:15px; display:inline-flex; }
.n-tb-btn .ic svg { width:14px; height:14px; }
.n-tb-search { display:flex; align-items:center; gap:6px; }
.n-tb-search input {
  border:0; background:none; outline:none; font-size:13px; color:var(--nt-text);
  width:0; opacity:0; transition:width .15s, opacity .15s; padding:0;
}
.n-tb-search.open input { width:180px; opacity:1; border-bottom:1px solid var(--nt-line-2); padding:2px 0; }
.n-new-btn {
  display:flex; align-items:center; gap:5px; background:var(--nt-blue); color:#fff; border:0; cursor:pointer;
  font-size:13px; padding:5px 10px; border-radius:var(--nt-radius); font-weight:500; line-height:1.4;
}
.n-new-btn:hover { background:#1a6fc0; }
.n-new-btn .ic svg { width:14px; height:14px; }
/* New 分割ボタンの右キャレット */
.n-new-caret { background:var(--nt-blue); color:#fff; border:0; border-left:1px solid rgba(255,255,255,.25); cursor:pointer; padding:5px 6px; border-radius:0 var(--nt-radius) var(--nt-radius) 0; }
.n-new-btn.split { border-radius:var(--nt-radius) 0 0 var(--nt-radius); }

/* フィルタ/ソートのチップ行 */
.n-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 0 8px; }
.n-chip {
  display:inline-flex; align-items:center; gap:6px; background:#f1f0ee; border:1px solid var(--nt-line-2);
  border-radius:var(--nt-radius); font-size:12px; color:var(--nt-text-2); padding:3px 6px 3px 9px;
}
.n-chip select, .n-chip input { border:0; background:none; font-size:12px; color:var(--nt-text); outline:none; }
.n-chip .x { cursor:pointer; color:var(--nt-text-3); border:0; background:none; padding:0 2px; font-size:13px; }
.n-chip .x:hover { color:var(--nt-text); }

/* =============================================================================
 * テーブルビュー（Notion table）
 * ========================================================================== */
.n-tablewrap { overflow-x:auto; border-top:1px solid var(--nt-line-2); }
table.n-table { width:100%; border-collapse:collapse; font-size:14px; }
table.n-table th, table.n-table td {
  text-align:left; padding:0; border-bottom:1px solid var(--nt-line); border-right:1px solid var(--nt-line);
  vertical-align:top;
}
table.n-table th:first-child, table.n-table td:first-child { border-left:1px solid var(--nt-line); }
table.n-table thead th {
  font-size:13px; color:var(--nt-text-2); font-weight:400; background:#fff;
  padding:7px 8px; white-space:nowrap; cursor:pointer; user-select:none; position:sticky; top:0; z-index:2;
}
table.n-table thead th .th-in { display:flex; align-items:center; gap:6px; }
table.n-table thead th .ic { width:15px; height:15px; color:#9b9a97; display:inline-flex; flex-shrink:0; }
table.n-table thead th .ic svg { width:14px; height:14px; }
table.n-table thead th.num .th-in { justify-content:flex-end; }
table.n-table tbody td { padding:6px 8px; color:var(--nt-text); height:34px; }
table.n-table tbody td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.n-table tbody tr:hover { background:#f8f8f7; }
table.n-table tbody tr:hover .n-open-btn { opacity:1; }
table.n-table td.cell-title { font-weight:400; }
.n-titlecell { display:flex; align-items:center; gap:6px; min-width:0; }
.n-titlecell .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.n-titlecell .t:hover { text-decoration:underline; }
.n-open-btn {
  opacity:0; transition:opacity .1s; margin-left:auto; flex-shrink:0;
  display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--nt-text-2);
  border:1px solid var(--nt-line-2); border-radius:var(--nt-radius); background:#fff; cursor:pointer; padding:1px 6px;
}
.n-open-btn:hover { background:var(--nt-hover); }
.n-table-foot { display:flex; align-items:center; gap:8px; padding:6px 8px; border-bottom:1px solid var(--nt-line); }
.n-newrow { display:flex; align-items:center; gap:7px; color:var(--nt-text-3); font-size:14px; padding:7px 8px; cursor:pointer; border-bottom:1px solid var(--nt-line); }
.n-newrow:hover { background:#f8f8f7; color:var(--nt-text-2); }
.n-newrow .ic svg { width:15px; height:15px; }
.n-count-foot { color:var(--nt-text-3); font-size:12px; padding:8px 2px; }

/* =============================================================================
 * カラータグ / Status ピル
 * ========================================================================== */
.n-tag {
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--nt-radius);
  font-size:13px; line-height:18px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.n-tag.status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; flex-shrink:0; }
.n-tag.c-default{ background:var(--tg-default-bg); color:var(--tg-default-fg); }
.n-tag.c-gray   { background:var(--tg-gray-bg);    color:var(--tg-gray-fg); }
.n-tag.c-brown  { background:var(--tg-brown-bg);   color:var(--tg-brown-fg); }
.n-tag.c-orange { background:var(--tg-orange-bg);  color:var(--tg-orange-fg); }
.n-tag.c-yellow { background:var(--tg-yellow-bg);  color:var(--tg-yellow-fg); }
.n-tag.c-green  { background:var(--tg-green-bg);   color:var(--tg-green-fg); }
.n-tag.c-blue   { background:var(--tg-blue-bg);    color:var(--tg-blue-fg); }
.n-tag.c-purple { background:var(--tg-purple-bg);  color:var(--tg-purple-fg); }
.n-tag.c-pink   { background:var(--tg-pink-bg);    color:var(--tg-pink-fg); }
.n-tag.c-red    { background:var(--tg-red-bg);     color:var(--tg-red-fg); }
.n-tags { display:flex; flex-wrap:wrap; gap:4px; }
/* status のドット色はテキスト色に従わせず明示（より正確に） */
.n-tag.status.c-default::before{ background:#9b9a97; }
.n-tag.status.c-gray::before{ background:#9b9a97; }
.n-tag.status.c-brown::before{ background:#a27763; }
.n-tag.status.c-orange::before{ background:#cb7b37; }
.n-tag.status.c-yellow::before{ background:#c29343; }
.n-tag.status.c-green::before{ background:#4f9768; }
.n-tag.status.c-blue::before{ background:#529cca; }
.n-tag.status.c-purple::before{ background:#9a6dd7; }
.n-tag.status.c-pink::before{ background:#e255a1; }
.n-tag.status.c-red::before{ background:#ff7369; }

/* リレーション/ページ参照リンク（Notion下線リンク） */
.n-ref { color:var(--nt-text); text-decoration:none; border-bottom:1px solid rgba(55,53,47,.25); cursor:pointer; }
.n-ref:hover { border-bottom-color:rgba(55,53,47,.55); }
.n-person { display:inline-flex; align-items:center; gap:5px; }
.n-avatar { width:18px; height:18px; border-radius:50%; background:#dfddd9; color:#5a5852; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; }
.n-date { color:var(--nt-text); }
.n-num { font-variant-numeric:tabular-nums; }
.n-empty { color:var(--nt-text-3); }

/* =============================================================================
 * ボードビュー（Notion board）
 * ========================================================================== */
.n-board { display:flex; gap:10px; overflow-x:auto; padding:8px 0 20px; align-items:flex-start; }
.n-bcol { width:260px; flex-shrink:0; }
.n-bcol-head { display:flex; align-items:center; gap:6px; padding:4px 4px 8px; position:sticky; top:0; }
.n-bcol-head .cnt { color:var(--nt-text-3); font-size:13px; }
.n-bcol-head .add { margin-left:auto; color:var(--nt-text-3); cursor:pointer; background:none; border:0; }
.n-bcol-head .add svg { width:15px; height:15px; }
.n-bcards { display:flex; flex-direction:column; gap:8px; min-height:8px; }
.n-bcard {
  background:#fff; border:1px solid var(--nt-line-2); border-radius:5px; padding:8px 10px;
  box-shadow:0 1px 2px rgba(15,15,15,.05); cursor:pointer;
}
.n-bcard:hover { background:#fafafa; }
.n-bcard .t { font-size:14px; color:var(--nt-text); margin-bottom:6px; line-height:1.35; }
.n-bcard .props { display:flex; flex-direction:column; gap:5px; }
.n-bcard .props .row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.n-bcard .props .mini { font-size:12px; color:var(--nt-text-2); }
.n-bcol-newcard { display:flex; align-items:center; gap:6px; color:var(--nt-text-3); font-size:13px; padding:7px 6px; cursor:pointer; border-radius:var(--nt-radius); }
.n-bcol-newcard:hover { background:var(--nt-hover); color:var(--nt-text-2); }
.n-bcol-newcard svg { width:14px; height:14px; }
.n-bcard[draggable="true"] { cursor:grab; }
.n-bcard.dragging { opacity:.45; }
.n-bcol.dragover .n-bcards { outline:2px dashed var(--nt-blue); outline-offset:2px; border-radius:6px; background:rgba(35,131,226,.04); min-height:40px; }

/* =============================================================================
 * ギャラリービュー（Notion gallery）
 * ========================================================================== */
.n-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; padding:10px 0 20px; }
.n-gcard { border:1px solid var(--nt-line-2); border-radius:6px; overflow:hidden; cursor:pointer; background:#fff; box-shadow:0 1px 2px rgba(15,15,15,.04); }
.n-gcard:hover { background:#fafafa; }
.n-gcard .cover { height:120px; background:#f1f0ee; display:flex; align-items:center; justify-content:center; }
.n-gcard .cover .avatarbig { width:56px; height:56px; border-radius:12px; background:#e7eef6; color:#2f6db3; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; }
.n-gcard .body { padding:10px 12px; }
.n-gcard .body .t { font-size:14px; font-weight:500; color:var(--nt-text); margin-bottom:8px; line-height:1.3; }
.n-gcard .body .props { display:flex; flex-direction:column; gap:6px; }

/* =============================================================================
 * リストビュー（Notion list）
 * ========================================================================== */
.n-list { padding:6px 0 20px; }
.n-litem { display:flex; align-items:center; gap:10px; padding:7px 6px; border-bottom:1px solid var(--nt-line); cursor:pointer; }
.n-litem:hover { background:#f8f8f7; }
.n-litem .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--nt-text); }
.n-litem .meta { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* =============================================================================
 * ページピーク（行クリックで開くNotionページ）
 * ========================================================================== */
#n-peek-overlay { position:fixed; inset:0; background:rgba(15,15,15,.35); z-index:300; display:none; }
#n-peek-overlay.open { display:block; }
.n-peek {
  position:fixed; top:0; right:0; height:100vh; width:min(720px,92vw); background:#fff;
  box-shadow:-2px 0 24px rgba(0,0,0,.18); z-index:301; overflow-y:auto; transform:translateX(100%);
  transition:transform .18s ease;
}
.n-peek.open { transform:translateX(0); }
.n-peek-bar { position:sticky; top:0; background:#fff; display:flex; align-items:center; gap:6px; padding:8px 14px; border-bottom:1px solid var(--nt-line); z-index:5; }
.n-peek-bar .nav { display:flex; align-items:center; gap:2px; color:var(--nt-text-2); }
.n-peek-bar .ico { background:none; border:0; cursor:pointer; color:var(--nt-text-2); padding:4px; border-radius:var(--nt-radius); display:inline-flex; }
.n-peek-bar .ico:hover { background:var(--nt-hover); }
.n-peek-bar .ico svg { width:18px; height:18px; }
.n-peek-bar .crumb { font-size:13px; color:var(--nt-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.n-peek-bar .sp { flex:1; }
.n-peek-body { padding:18px 56px 120px; }
.n-peek-body.center { max-width:720px; margin:0 auto; }
.n-rec-title { display:flex; align-items:center; gap:12px; font-size:32px; font-weight:700; letter-spacing:-.5px; color:var(--nt-text); margin:14px 0 14px; line-height:1.2; }
.n-rec-title .icbox { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; flex-shrink:0; background:#e7eef6; color:#2f6db3; }
.n-rec-title .icbox.svg { background:#f1f0ee; color:#91918e; }
.n-rec-title .icbox.svg svg { width:30px; height:30px; }

/* プロパティ表（key 左 / value 右） */
.n-props { display:flex; flex-direction:column; gap:1px; margin-bottom:10px; }
.n-prop { display:flex; align-items:flex-start; gap:8px; font-size:14px; padding:5px 6px; border-radius:var(--nt-radius); }
.n-prop:hover { background:#f8f8f7; }
.n-prop > .k { color:var(--nt-text-2); min-width:170px; max-width:170px; display:flex; align-items:center; gap:7px; padding-top:1px; flex-shrink:0; }
.n-prop > .k .ic { width:16px; height:16px; color:#9b9a97; display:inline-flex; }
.n-prop > .k .ic svg { width:15px; height:15px; }
.n-prop > .v { flex:1; min-width:0; color:var(--nt-text); padding-top:1px; }

/* 本文セクション */
.n-sec-h { font-size:20px; font-weight:600; color:var(--nt-text); margin:26px 0 2px; }
.n-sec-desc { color:var(--nt-text-3); font-size:14px; margin:0 0 10px; line-height:1.5; }
.n-divider { border:0; border-top:1px solid var(--nt-line-2); margin:18px 0; }
.n-inline-db { border:1px solid var(--nt-line); border-radius:6px; overflow:hidden; }
.n-inline-db table { width:100%; border-collapse:collapse; font-size:13px; }
.n-inline-db th { text-align:left; color:var(--nt-text-2); font-weight:400; font-size:12px; padding:6px 8px; border-bottom:1px solid var(--nt-line); background:#fafafa; white-space:nowrap; }
.n-inline-db td { padding:6px 8px; border-bottom:1px solid var(--nt-line); color:var(--nt-text); vertical-align:top; }
.n-inline-db td.num { text-align:right; font-variant-numeric:tabular-nums; }
.n-inline-db tr:last-child td, .n-inline-db tbody tr:last-child td { border-bottom:0; }
.n-inline-db tbody tr:hover { background:#f8f8f7; }
.n-inline-foot { padding:6px 8px; font-size:12px; color:var(--nt-text-3); text-align:right; background:#fafafa; border-top:1px solid var(--nt-line); }
.n-notsynced { padding:12px 14px; border:1px dashed var(--nt-line-2); border-radius:6px; color:var(--nt-text-3); font-size:13px; line-height:1.6; }
.n-linkpage { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:var(--nt-radius); color:var(--nt-text); cursor:default; }
.n-linkpage .ic { color:#91918e; display:inline-flex; } .n-linkpage .ic svg{ width:16px;height:16px; }

/* 空状態 */
.n-loading { color:var(--nt-text-3); font-size:14px; padding:40px 8px; text-align:center; }

/* =============================================================================
 * グローバル検索（Cmd+K）モーダル
 * ========================================================================== */
#n-search-overlay { position:fixed; inset:0; background:rgba(15,15,15,.4); z-index:350; display:none; }
#n-search-overlay.open { display:block; }
.n-search-modal {
  position:fixed; top:96px; left:50%; transform:translateX(-50%); width:min(680px,92vw);
  background:#fff; border-radius:10px; box-shadow:0 16px 60px rgba(0,0,0,.28); z-index:351;
  overflow:hidden; max-height:72vh; display:flex; flex-direction:column;
}
.n-search-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--nt-line-2); }
.n-search-head .ic { width:20px; height:20px; color:var(--nt-text-3); display:inline-flex; }
.n-search-head .ic svg { width:19px; height:19px; }
.n-search-head input { flex:1; border:0; outline:none; font-size:16px; color:var(--nt-text); background:none; }
.n-search-head .esc { font-size:11px; color:var(--nt-text-3); border:1px solid var(--nt-line-2); border-radius:4px; padding:1px 6px; }
.n-search-results { overflow-y:auto; padding:6px; }
.n-search-group { padding:8px 8px 2px; font-size:11px; font-weight:600; color:var(--nt-text-3); display:flex; align-items:center; gap:6px; }
.n-search-group .ic { width:14px; height:14px; display:inline-flex; color:#91918e; } .n-search-group .ic svg{ width:13px;height:13px; }
.n-search-item { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:5px; cursor:pointer; }
.n-search-item:hover, .n-search-item.sel { background:var(--nt-hover); }
.n-search-item .ic { width:18px; height:18px; color:#91918e; display:inline-flex; flex-shrink:0; } .n-search-item .ic svg{ width:16px;height:16px; }
.n-search-item .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--nt-text); font-size:14px; }
.n-search-item .sub { font-size:12px; color:var(--nt-text-3); flex-shrink:0; }
.n-search-empty { color:var(--nt-text-3); font-size:13px; padding:24px; text-align:center; }

/* =============================================================================
 * 分析ページ（既存 .panel/.card 群）の Notion 風微調整
 * ========================================================================== */
.n-analytics-head { padding:48px 0 6px; }
.n-analytics-head h1 { font-size:30px; font-weight:700; letter-spacing:-.4px; margin:0 0 6px; color:var(--nt-text); display:flex; align-items:center; gap:10px; }
.n-analytics-head h1 .ic { width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#91918e; } .n-analytics-head h1 .ic svg{width:28px;height:28px;}
.n-analytics-head .sub { color:var(--nt-text-3); font-size:14px; }

/* =============================================================================
 * モバイル
 * ========================================================================== */
.n-hamburger { display:none; position:fixed; top:8px; left:8px; z-index:130; background:#fff; border:1px solid var(--nt-line-2); border-radius:var(--nt-radius); width:34px; height:34px; cursor:pointer; }
.n-hamburger svg { width:18px; height:18px; }
@media (max-width:860px){
  .n-sidebar { position:fixed; left:0; top:0; z-index:120; transform:translateX(-100%); transition:transform .2s; box-shadow:2px 0 18px rgba(0,0,0,.14); }
  .n-sidebar.open { transform:translateX(0); }
  .n-hamburger { display:flex; align-items:center; justify-content:center; }
  .n-page-wrap, .n-page-wrap.full { padding:0 18px; }
  .n-peek-body { padding:18px 20px 100px; }
  .n-prop > .k { min-width:120px; max-width:120px; }
}