/* ═══════════════════════════════════════════════════════════════
   SedoNote 統合スタイルシート（sn.css / v0.184 ガラス退役Phase3a）
   旧3層（app.css → app-flat.css → sn.css）を読み込み順のまま結合。
   第1部はガラス専用規則をパージ済み（削除は全件、到達性分析＋反証検証を通過）。
   カスケード順は旧構成と完全等価。--sn-*トークン・0.57pxルール・chromeは不変。
   ═══════════════════════════════════════════════════════════════ */

/* ═════════ 第1: 基礎層（旧app.css・パージ済）部 ═════════ */

/* SedoNote app.css v0.135 — index.php の基幹スタイル（ベーストークン/コンポーネント + ホーム/クローム）
   変更時は index.php 側 <link> の ?v= を必ず更新（キャッシュ更新のため） */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* ダッシュボード統一：旧フラット面（--surface系）をガラス値へ再定義。
     全レガシーコンポーネント（カード/テーブル/フォーム/モーダル/ナビ）が
     機能そのままにガラス意匠へ追従する */
  --bg:#0f1420;--surface:rgba(255,255,255,.05);--surface2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09);--border2:rgba(255,255,255,.14);
  --accent:#e8d5a3;--accent2:#c9a84c;
  /* v0.224: コントロール標準縦幅（ピル/入力/プルダウン/標準ボタン共通。
     正典=development_guide.md §3「コントロール縦幅」・適用ブロック=panels.css末尾） */
  --ctl-h:32px;
  --text:#f0ede8;--text2:#9b9898;--text3:#6b6868;
  --danger:#e05252;--success:#52b788;--info:#5b9bd5;
  --tag-bg:rgba(255,255,255,.07);
  /* 不透明が必要な箇所専用（select option / フェード / モーダル面） */
  --menu:#151a27;--fade:#101420;--modal-bg:rgba(22,27,38,.72);
  /* ダッシュボード統一：キャンバス＆ガラス（テーマ可変） */
  --app-bg:radial-gradient(ellipse 50% 45% at 8% 92%,rgba(201,168,76,.07) 0%,transparent 100%),radial-gradient(ellipse 40% 38% at 92% 8%,rgba(82,136,200,.06) 0%,transparent 100%),linear-gradient(160deg,#0a0d16 0%,#0f1420 55%,#0a0e18 100%);
  --grid:rgba(255,255,255,.025);
  --glass:rgba(255,255,255,.05);--glass-2:rgba(255,255,255,.07);
  --glass-border:rgba(255,255,255,.09);--glass-border-strong:rgba(255,255,255,.14);
  --dock-bg:rgba(20,24,36,.82);
  --c-blue:#7bade0;--c-flea:#b58fd8;
}

html{scrollbar-gutter:stable;}
body{color:var(--text);font-size:13px;line-height:1.5;min-height:100vh;display:flex;transition:color .3s;color-scheme:dark;}

/* ライトモード（アプリ全体）：既存トークンを上書き → 全UIが追従 */
body.light{
  color-scheme:light;
  --app-bg:radial-gradient(ellipse 50% 45% at 8% 92%,rgba(201,168,76,.05) 0%,transparent 100%),radial-gradient(ellipse 40% 38% at 92% 8%,rgba(82,136,200,.04) 0%,transparent 100%),linear-gradient(160deg,#f8f6f1 0%,#f2ece2 55%,#f6f2ec 100%);
  --grid:rgba(0,0,0,.03);
  --bg:#f4efe6;--surface:rgba(0,0,0,.035);--surface2:rgba(0,0,0,.06);
  --border:rgba(0,0,0,.10);--border2:rgba(0,0,0,.17);
  --text:#1f1d18;--text2:#6a6353;--text3:#8a8270;
  --tag-bg:rgba(0,0,0,.06);
  --menu:#f6f3ec;--fade:#f5f1e9;--modal-bg:rgba(248,246,241,.9);
  --glass:rgba(0,0,0,.035);--glass-2:rgba(0,0,0,.06);
  --glass-border:rgba(0,0,0,.10);--glass-border-strong:rgba(0,0,0,.17);
  --dock-bg:rgba(244,239,230,.92);
  --c-blue:#3a6aa8;--c-flea:#6f48a8;
}

/* ── メインコンテンツ ─────── */
.main{margin-left:0;flex:1;min-height:100vh;display:flex;flex-direction:column;min-width:0;position:relative;z-index:1;padding-top:var(--bar-h);}
.content{padding:26px 28px 130px;flex:1;min-width:0;max-width:1200px;margin:0 auto;width:100%;}

/* ===== ダッシュボード統一：追加コンポーネント ===== */
.page-head{position:relative;z-index:1;margin-bottom:18px;}
.page-head h1{font-size:19px;font-weight:600;letter-spacing:.2px;color:var(--text);}
.page-head .sub{font-size:11.5px;color:var(--text3);margin-top:3px;}

/* 左下：テーマ切替＋ページ操作（ダッシュボードと同配置） */
.app-corner{position:fixed;bottom:20px;left:20px;z-index:200;display:flex;align-items:center;gap:9px;}
.app-theme-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0;}


.app-corner .icon-sun{display:block;}.app-corner .icon-moon{display:none;}
body.light .app-corner .icon-sun{display:none;}body.light .app-corner .icon-moon{display:block;}

@media(max-width:768px){
  .content{padding:18px 14px 116px;}
  .app-corner{bottom:14px;left:14px;}
}

/* ── ボタン ─────────────── */
.btn{padding:7px 14px;border:1px solid var(--border2);font-size:12px;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:5px;text-decoration:none;}

/* ── カード ─────────────── */
.card{border:1px solid var(--border);padding:20px;margin-bottom:20px;}
.card-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:6px;}

/* ── パネル ─────────────── */
.panel{display:none;}
.panel.active{display:block;}

/* ── フォーム ─────────────── */
.field{display:flex;flex-direction:column;gap:5px;}

label{font-size:11px;color:var(--text3);}
input[type=text],input[type=date],input[type=number],input[type=email],select,textarea{border:1px solid var(--border);padding:8px 10px;font-size:13px;transition:border-color 0.15s,background .15s,box-shadow .15s;width:100%;}
input:focus,select:focus,textarea:focus{outline:none;}
select option{background:var(--menu);color:var(--text);}
.radio-group{display:flex;gap:6px;flex-wrap:wrap;}
.radio-opt{padding:5px 12px;border:1px solid var(--border);color:var(--text2);cursor:pointer;font-size:12px;transition:all 0.15s;user-select:none;}
/* v0.269: 近日実装予定の選択肢（Amazon販路ピル等）。item.php の it-ph（Amazon群プレースホルダ）と同趣旨の
   グレーアウト。クリックはJS側で弾いてトースト案内（編集時のプログラム選択= selPillV は通す＝既存データ表示を壊さない） */
.radio-opt.soon,.sv-pill.soon{opacity:.38;cursor:not-allowed;}
.radio-opt.soon:hover,.sv-pill.soon:hover{background:inherit;color:inherit;border-color:var(--border);}

/* ── テーブル ─────────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:12px;}

th{padding:9px 12px;text-align:left;font-weight:500;font-size:11px;white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;}

tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s;}
tbody tr:last-child{border-bottom:none;}

td{padding:9px 12px;color:var(--text);white-space:nowrap;}

/* ── 統計カード ─────────────── */
.stat-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.stat-card{border:1px solid var(--border);padding:12px 16px;min-width:120px;}
.stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;}
.stat-value{font-size:20px;font-weight:500;color:var(--accent);margin-top:2px;}
.stat-sub{font-size:11px;color:var(--text3);margin-top:1px;}

/* ── 一覧ツールバー ─────────── */
.list-toolbar{display:flex;flex-direction:row;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--border);padding:0 12px;flex:1;min-width:160px;height:var(--ctl-h);transition:border-color .15s,background .15s,box-shadow .15s;}

.search-box input{background:transparent;border:none;color:var(--text);font-size:13px;width:100%;outline:none;height:100%;box-shadow:none;}
.search-box input::placeholder{color:var(--text3);}
.list-toolbar select{height:var(--ctl-h);}

/* ── バッジ ─────────────── */
.badge{display:inline-block;padding:2px 7px;font-size:10px;font-weight:500;letter-spacing:0.3px;}
/* .badge-success/-danger/-info/-warn/-gray は参照ゼロのため撤去（2026-08-04 レビュー指摘#31）。
   ステータス色が要るときは admin.php 自己完結側の badge-* とは別物なので新規定義すること */

/* ── モーダル ─────────────── */
.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal{width:100%;max-width:700px;max-height:85vh;overflow-y:auto;padding:24px;background:var(--menu);border:1px solid var(--border2);border-radius:7px;}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;}
.modal-title{font-size:16px;font-weight:500;}
.modal-sub{font-size:12px;color:var(--text3);margin-top:2px;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.detail-row{display:contents;}
.detail-key{background:var(--surface2);padding:8px 12px;font-size:11px;color:var(--text3);border-bottom:1px solid var(--border);}
.detail-val{padding:8px 12px;font-size:12px;color:var(--text);border-bottom:1px solid var(--border);word-break:break-all;}
.detail-row:last-child .detail-key,.detail-row:last-child .detail-val{border-bottom:none;}

.msg{display:flex;gap:10px;align-items:flex-start;}
.msg-user{flex-direction:row-reverse;}
.msg-avatar{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;}
.msg-avatar-ai{background:linear-gradient(135deg,#2a2060,#1a3a5c);color:#c8b8ff;}
.msg-avatar-user{background:var(--accent2);color:#0f0f11;}
.msg-bubble{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:9px 13px;font-size:12px;line-height:1.7;max-width:85%;white-space:pre-wrap;word-break:break-word;}
.msg-user .msg-bubble{background:rgba(201,168,76,0.1);border-color:rgba(201,168,76,0.25);}
.msg-bubble strong{color:var(--accent);font-weight:500;}
.msg-bubble em{color:var(--info);font-style:normal;}
.thinking{display:flex;gap:4px;padding:4px 0;}
.thinking span{width:5px;height:5px;background:var(--text3);border-radius:50%;animation:blink 1.2s infinite;}
.thinking span:nth-child(2){animation-delay:0.2s;}
.thinking span:nth-child(3){animation-delay:0.4s;}
@keyframes blink{0%,80%,100%{opacity:0.3;}40%{opacity:1;}}

/* ── 週刊レポート ─────────── */

.report-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color 0.15s;}
.report-card:hover{border-color:var(--border2);}
.report-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.report-card-title{font-size:12px;font-weight:500;color:var(--accent);}
.report-card-date{font-size:10px;color:var(--text3);}
.report-card-body{font-size:11px;color:var(--text2);line-height:1.6;white-space:pre-wrap;max-height:70px;overflow:hidden;position:relative;}
.report-card-body.expanded{max-height:none;}
.report-card-body::after{content:'';position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(transparent,var(--fade));pointer-events:none;}
.report-card-body.expanded::after{display:none;}

/* ── チャート時間軸ボタン ── */

/* ── マスタ ─────────────── */
.master-list{border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.master-item{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--border);font-size:12px;cursor:default;transition:background .1s;}
.master-item:last-child{border-bottom:none;}
.master-item:hover{background:var(--surface2);}
.master-item.dragging{opacity:0.4;background:var(--surface2);}
.master-item.drag-over{border-top:2px solid var(--accent2);}
.master-drag-handle{color:var(--text3);cursor:grab;padding:0 8px 0 0;font-size:14px;user-select:none;flex-shrink:0;}
.master-drag-handle:active{cursor:grabbing;}
.master-item-info{display:flex;flex-direction:column;gap:2px;flex:1;}
.master-item-name{color:var(--text);font-weight:500;}
.master-item-sub{font-size:10px;color:var(--text3);}
.master-item-actions{display:flex;gap:5px;}
.master-empty{padding:20px;text-align:center;color:var(--text3);font-size:11px;}

/* ── 収支レポート ─────────── */

/* ── デバイスタグ ─────────── */

/* ── トースト/共通 ─────────── */
.empty-state{text-align:center;padding:50px 20px;color:var(--text3);}
.empty-state .icon{font-size:36px;margin-bottom:10px;opacity:0.4;}
.empty-state p{font-size:13px;}
.toast{position:fixed;top:72px;left:50%;transform:translateX(-50%) translateY(-20px);padding:9px 18px;font-size:12px;z-index:6000;opacity:0;transition:all 0.3s;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:768px){
  .content{padding:12px;}

  /* 統計カード：2列 */
  .stat-row{display:grid;grid-template-columns:1fr 1fr;}
  .stat-value{font-size:18px;}

  /* モーダル */
  .modal-overlay{padding:8px;}
  .modal{padding:16px;max-height:92vh;}
  .modal-header{flex-wrap:wrap;gap:8px;}
  .modal-header > div:last-child{flex-wrap:wrap;}
  .detail-grid{grid-template-columns:1fr;}
  .detail-key{background:var(--surface2);border-bottom:none;padding-bottom:2px;color:var(--accent2);}
  .detail-val{border-bottom:1px solid var(--border);padding-top:2px;}

  /* 一覧ツールバー */
  .list-toolbar{flex-wrap:wrap;}
  .search-box{max-width:none;flex:1;min-width:160px;}
  .list-toolbar select{width:auto;}

  /* チャット */
  .chat-window{max-height:260px;}

  /* 収支レポート */

  /* レポートカード */
  .report-card-header{flex-direction:column;gap:8px;}

  /* AI使用量メーター：縦並び */
  #usage-meter{gap:8px;}

  /* ラジオグループ：小さく */
  .radio-opt{font-size:11px;padding:4px 9px;}

  /* ボタン類 */

  /* テーブル：縦スクロール維持 */
  .table-wrap{border-radius:6px;}
  table{font-size:11px;}
  th,td{padding:7px 9px;}
}

@media(max-width:480px){
  /* さらに小さい画面 */
  .stat-row{grid-template-columns:1fr 1fr;}
  .stat-card{padding:10px 12px;}
  .stat-value{font-size:16px;}
  .content{padding:10px;}
  .card{padding:14px;}
  .modal-title{font-size:14px;}
}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
/* ===== グローバル ドック＋検索バー（ホームと同一意匠・同一スケール scale(s)） ===== */
#gbar{position:fixed;left:0;width:100vw;bottom:calc(var(--bar-h) + 19px);z-index:5001;display:flex;justify-content:center;pointer-events:none;}
#gbar .gb-inner{transform-origin:bottom center;display:flex;flex-direction:column;align-items:stretch;width:277.1px;}
/* 検索バー（旧ホームキャンバス .sbar 由来の素の値＝現在はここが正。show-search時のみ表示） */
#gbar .gb-search{display:none;pointer-events:auto;width:100%;align-items:center;padding:0 4px 0 0;overflow:hidden;}
#gbar.show-search .gb-search{display:flex;}
#gbar .gb-sleft{flex:1;display:flex;align-items:center;padding:6px 9px 6px 12px;gap:7px;min-width:0;}
#gbar .gb-sico{flex-shrink:0;opacity:.3;line-height:0;}
#gbar .gb-sinp{flex:1;min-width:0;background:transparent;border:none;outline:none;font-size:10px;padding:0;}

#gbar .gb-sdiv{width:1px;height:16px;flex-shrink:0;margin:0 2px;}
#gbar .gb-cbtn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
/* ドック（ホーム .dock 素の値・backdrop-filterなし） */
#gbar .dock{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:2px;padding:2px 6px;}
#gbar .di{width:24.3px;height:24.3px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;}
#gbar .di:hover{transform:translateY(-5px) scale(1.1);transition:transform .15s;}
#gbar .diw{width:20.4px;height:20.4px;border-radius:6px;display:flex;align-items:center;justify-content:center;}
#gbar .dock svg{width:14px;height:14px;}
#gbar .dlbl{font-size:6px;position:absolute;bottom:-10px;white-space:nowrap;opacity:0;pointer-events:none;}
#gbar .di:hover .dlbl{opacity:1;}
#gbar .dsep{width:1px;height:15px;margin:0 2px;flex-shrink:0;}
#gbar .dact::after,#gbar .di.active::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;}

#gbar .icTips .diw{background:rgba(232,190,90,.22);}
/* light（ホームと同一） */

/* v0.135: ライト取りこぼし修正（白系rgbaが明色面で不可視になる箇所） */

body.light #gbar .di.ic0 svg path,body.light #gbar .di.ic0 svg polyline{stroke:rgba(80,55,10,.9) !important;}

body.light #gbar .gb-sico{opacity:1;}
body.light #gbar .gb-sico svg circle,body.light #gbar .gb-sico svg path{stroke:rgba(0,0,0,.55)!important;}

body.light #gbar .gb-cbtn svg path,body.light #gbar .gb-cbtn svg circle{stroke:rgba(130,95,30,.85)!important;}
/* ===== 同意モーダル：ガラスモーダル意匠へ統一（インラインstyle上書き） ===== */

/* ═══════════════════════════════════════════════════════════
   ライトモード統一パッチ
   後発パネル（stock/sold/profit/ai/mypage/nf-embed）はダーク固定の
   rgba(255,255,255,…) を直書きしているため、body.light 配下でのみ
   同等のライト系ガラス値へ差し替える。意匠・レイアウトは不変。
   ═══════════════════════════════════════════════════════════ */
/* メトリクスカード（mcard系）面と区切り */

/* ラベル・数値 */

/* ツールバー（検索・select・ピルボタン・ページャ） */

/* ガラスカード（テーブル外枠・フォームカード・収支カード） */

/* 収支テーブル・チャネルバー */

body.light #panel-profit .pr-table tbody tr:hover td{background:rgba(0,0,0,.025);}

body.light #panel-profit .pr-custom input{color-scheme:light;}
body.light #panel-profit .pr-custom .pr-apply{color:rgba(0,0,0,.65);}
/* 新規入力フォーム：入力・ピル・ノート・検索バー */

/* 詳細検索モーダル（sv/sd）：モーダル共通トークンへ */

/* ===== ネイティブ ヘッダー / フッター（v12由来・kaitorix基準・少し小さい / ダーク・ライト対応）
   ※ホーム画面（#home-screen）系の規則は B-89 Phase 3b（v0.317）で css/home_doc.css へ全面移管済み ===== */
:root{--bar-h:56px;}
.app-bar{position:fixed;left:0;right:0;z-index:5000;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-sizing:border-box;}
.app-header{top:0;}
.app-footer{bottom:0;}
/* ロゴ */
.hbrand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.hbrand img{height:26px;width:auto;display:block;}

/* 右側コントロール */
.hright{display:flex;align-items:center;gap:10px;}
.h-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;padding:0;}

.h-icon .icon-sun{display:block;}.h-icon .icon-moon{display:none;}

/* Google サインイン（公式準拠・ライト/ダーク両対応） */
.gsi-btn{height:34px;display:inline-flex;align-items:center;gap:9px;padding:0 14px 0 11px;border-radius:9px;cursor:pointer;font-weight:500;font-size:13px;line-height:1;white-space:nowrap;transition:background .15s,box-shadow .15s;}
.gsi-btn .gsi-logo{display:flex;width:17px;height:17px;flex-shrink:0;}
.gsi-dark{color:#e3e3e3;border:1px solid #5f6368;}

.gsi-light{background:#fff;color:#1f1f1f;border:1px solid #747775;}
.gsi-light:hover{background:#f7f8f8;box-shadow:0 1px 2px rgba(60,64,67,.3);}
.gsi-light{display:none;}.gsi-dark{display:inline-flex;}

body.light .gsi-light{display:inline-flex;}body.light .gsi-dark{display:none;}
/* フッター */
.fcopy{font-size:12px;letter-spacing:.02em;}
.fcopy .fver{font-size:11px;opacity:.7;margin-left:7px;}

.flinks{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;}
.flinks a{font-size:12px;text-decoration:none;cursor:pointer;transition:color .15s;white-space:nowrap;}

.fsep{font-size:10px;}

@media(max-width:640px){
  .app-bar{padding:0 12px;}
  .hbrand .hname{font-size:15px;}
  .gsi-btn .gsi-text{display:none;}
  .gsi-btn{padding:0 10px;}
  .hright{gap:7px;}
  .flinks{gap:6px;}
  .flinks a{font-size:11px;}
  .fcopy{font-size:11px;}
}

/* ===== Phase1: グローバルchrome light対応（body.light配下） ===== */

/* ═════════ 第2: フラット層（旧app-flat.css）部 ═════════ */

/* =====================================================
   SedoNote app-flat.css v0.137 — B案「フラット・速度優先」
   プライスター等の業務ツールを参考にしたフラットUI。
   すべて body.flat スコープの上書きレイヤー（A案には無影響）。
   有効化: /?design=flat ／ 戻す: /?design=glass
   ライト⇄ダーク: 既存のテーマ切替ボタン（body.light の有無）で切替
   速度方針:
     - Webフォント0リクエスト（index.php側で読込スキップ）
     - backdrop-filter 全廃 / グラデーション・背景グリッド廃止
     - background-attachment:fixed 廃止（モバイルスクロール高速化）
   意匠署名: ヘッダー上端の3pxゴールドライン（ブランドの一筆）
   ===================================================== */

/* ── トークン: フラット・ダーク（基準）─────────────── */
body.flat{
  --bg:#10151d;--surface:#171e29;--surface2:#1e2734;
  --border:#28313f;--border2:#39455a;
  --line-soft:#212938;                            /* 表の行罫線 */
  --text:#e8ecf2;--text2:#9aa5b5;--text3:#6b7688;
  --accent:#d8b45e;--accent2:#d8b45e;             /* ダークでは明ゴールド */
  --action:#4d8bff;--action-h:#6ba0ff;            /* 主操作=ソリッドブルー */
  --action-tint:rgba(77,139,255,.16);
  --danger:#e06565;--success:#3dbb7d;--info:#4d8bff;
  --tag-bg:#222b3a;--menu:#171e29;--fade:#171e29;--modal-bg:#171e29;
  --dock-bg:#171e29;
  --glass:#171e29;--glass-2:#1e2734;
  --glass-border:#28313f;--glass-border-strong:#39455a;
  --grid:transparent;
  --shadow:0 2px 12px rgba(0,0,0,.35);
  --shadow-lg:0 8px 30px rgba(0,0,0,.5);
}
/* ── トークン: フラット・ライト（プライスター系の白基調）── */
body.flat.light{
  --bg:#f3f5f8;--surface:#ffffff;--surface2:#f6f8fb;
  --border:#dfe4ec;--border2:#c9d1de;
  --line-soft:#edf0f5;
  --text:#1f2733;--text2:#5a6577;--text3:#8b95a6;
  --accent:#b8912f;--accent2:#b8912f;             /* 白地で読める濃ゴールド */
  --action:#2f6fed;--action-h:#2159cf;
  --action-tint:#e8effc;
  --danger:#d64545;--success:#1a9e5c;--info:#2f6fed;
  --tag-bg:#eef1f6;--menu:#ffffff;--fade:#ffffff;--modal-bg:#ffffff;
  --dock-bg:#ffffff;
  --glass:#ffffff;--glass-2:#f6f8fb;
  --glass-border:#dfe4ec;--glass-border-strong:#c9d1de;
  --shadow:0 2px 12px rgba(20,30,50,.10);
  --shadow-lg:0 8px 30px rgba(20,30,50,.18);
}

/* ── 全域: 効果の無効化と地の単色化 ─────────────────── */
body.flat{
  background:var(--bg) !important;
  background-attachment:scroll !important;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}
body.flat::before{display:none;}                 /* 背景グリッド廃止 */

/* フォント統一（Webフォント不読込のため、等幅フォールバック等も回収） */

/* ── クローム: 単色 + 罫線 + 金3pxの署名 ─────────────── */
body.flat .app-header{background:var(--surface) !important;border-top:3px solid #c9a84c;border-bottom:1px solid var(--border);}
body.flat .app-footer{background:var(--surface) !important;border-top:1px solid var(--border);}
body.flat .hbrand .hname{color:var(--text);}
body.flat .h-icon{background:var(--surface);border-color:var(--border2);color:var(--text2);}
body.flat .h-icon:hover{background:var(--surface2);color:var(--text);border-color:var(--border2);}
body.flat .fcopy{color:var(--text3);}
body.flat .flinks a{color:var(--text2);}
body.flat .flinks a:hover{color:var(--text);}
body.flat .fsep{color:var(--border2);}
body.flat .app-theme-btn{background:var(--surface);border:1px solid var(--border2);color:var(--text2);}
body.flat .app-theme-btn:hover{background:var(--surface2);color:var(--accent);}

/* ── ボタン ─────────────────────────────────────────── */
body.flat .btn{background:var(--surface);border-color:var(--border2);border-radius:6px;color:var(--text);}
body.flat .btn:hover{background:var(--surface2);border-color:var(--border2);}
body.flat .btn-primary,
body.flat #nf-embed .btn-primary,
body.flat .reg-btn,
body.flat #panel-price-chart .ws-gold,
body.flat #panel-price-chart #jan-add-btn,
body.flat #alert-section .al-btn-primary,
body.flat #sv-filter-modal .sv-btn-apply,
body.flat #sd-filter-modal .sv-btn-apply{
  background:var(--action) !important;border-color:var(--action) !important;
  color:#fff !important;font-weight:600;filter:none !important;
}
body.flat .btn-primary:hover,
body.flat #nf-embed .btn-primary:hover,
body.flat .reg-btn:hover,
body.flat #panel-price-chart .ws-gold:hover,
body.flat #alert-section .al-btn-primary:hover,
body.flat :is(#sv-filter-modal,#sd-filter-modal) .sv-btn-apply:hover{
  background:var(--action-h) !important;border-color:var(--action-h) !important;opacity:1;
}
body.flat .btn-danger{background:var(--surface);border-color:rgba(214,90,90,.5);color:var(--danger);}
body.flat .btn-danger:hover{background:rgba(214,90,90,.12);}
/* v0.196: 商品を削除ボタン（新規入力/編集フォーム下段）。赤系=Claudeアイコン色 #d97757 ルール初適用 */
.nf-del-btn{align-items:center;justify-content:center;gap:6px;padding:0 18px;background:var(--surface);border:1px solid rgba(217,119,87,.5);border-radius:7px;color:var(--sn-claude);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;}
.nf-del-btn:hover{background:rgba(217,119,87,.12);border-color:var(--sn-claude);}

/* ── フォーム: 単色地 + 青フォーカス ────────────────── */
body.flat :is(input[type=text],input[type=date],input[type=number],input[type=email],select,textarea){
  background:var(--surface);border-color:var(--border2);border-radius:6px;color:var(--text);
}
body.flat :is(input,select,textarea):focus{
  border-color:var(--action) !important;background:var(--surface) !important;
  box-shadow:0 0 0 3px rgba(77,139,255,.18) !important;
}
body.flat .search-box{background:var(--surface);border-color:var(--border2);border-radius:6px;}
body.flat .search-box:focus-within{border-color:var(--action);background:var(--surface);box-shadow:0 0 0 3px rgba(77,139,255,.18);}
body.flat .radio-opt{background:var(--surface);border-color:var(--border2);border-radius:6px;}
body.flat .radio-opt.selected,
body.flat #nf-embed .radio-opt.selected,
body.flat :is(#sv-filter-modal,#sd-filter-modal) .sv-pill.on{
  background:var(--action-tint) !important;border-color:var(--action) !important;color:var(--action-h) !important;
}

/* ── カード・テーブル: 単色 + 1px罫線・角丸控えめ ────── */
body.flat .card{background:var(--surface);border-color:var(--border);border-radius:10px;}
body.flat .table-wrap{background:var(--surface);border-color:var(--border);border-radius:8px;}
body.flat thead{background:var(--surface2);}
body.flat th{color:var(--text2);border-bottom-color:var(--border);}
body.flat tbody tr{border-bottom-color:var(--line-soft);}
body.flat tbody tr:hover{background:var(--surface2);}
body.flat .stat-card{background:var(--surface);border-color:var(--border);border-radius:8px;}
body.flat .badge{border-radius:4px;}

/* ── 後発パネル群（ハードコードrgbaのソリッド化）────── */
body.flat :is(#panel-stock,#panel-sold,#panel-ai) .mcard,
body.flat #panel-profit .pr-mcard,
body.flat #panel-mypage .mpg-mcard{background:var(--surface);border-color:var(--border);border-radius:8px;}
body.flat :is(#panel-stock,#panel-sold,#panel-ai) .mdiv{background:var(--border2);}
body.flat :is(#panel-stock,#panel-sold,#panel-ai) .mcol-label,
body.flat #panel-profit .pr-mlabel,
body.flat #panel-mypage .mpg-mlabel{color:var(--text3);}
body.flat :is(#panel-stock,#panel-sold,#panel-ai) .mcol-val,
body.flat #panel-profit .pr-mval,
body.flat #panel-mypage .mpg-mval{color:var(--text);font-weight:600;}
body.flat :is(#panel-stock,#panel-sold,#panel-ai) .mcol-val .ut,
body.flat #panel-profit .pr-mval .ut,
body.flat #panel-mypage .mpg-mval .lim{color:var(--text3);}
body.flat :is(#panel-stock,#panel-sold) .list-toolbar select,
body.flat :is(#panel-stock,#panel-sold) .list-toolbar .search-box,
body.flat :is(#panel-stock,#panel-sold) :is(.sv-detail-btn,.sv-csv-btn,.sv-pager-btn){
  background:var(--surface);border-color:var(--border2);border-radius:6px;color:var(--text2);
}
body.flat :is(#panel-stock,#panel-sold) .sv-fcard,
body.flat #nf-embed .fcard,
body.flat #panel-profit .pr-card,
body.flat #panel-mypage :is(.mpg-card,.mpg-nav),
body.flat .tips-card,  /* v0.214 B-31: #panel-tips と #pr-myrank の共用化でスコープ解除 */
body.flat .aia-card,
body.flat #panel-price-chart :is(.ws-item,#alert-section .al-card,#alert-section .al-item){
  background:var(--surface) !important;border-color:var(--border) !important;border-radius:10px;
}
body.flat :is(#panel-stock,#panel-sold) .sv-fcard .fhead,
body.flat #nf-embed .fhead,
body.flat #panel-profit .pr-card-head{border-bottom-color:var(--border);}
body.flat :is(#panel-stock,#panel-sold) .sv-fcard thead th{border-bottom-color:var(--border);}
body.flat :is(#panel-stock,#panel-sold) .sv-fcard tbody td{border-bottom-color:var(--line-soft);}
body.flat :is(#panel-stock,#panel-sold) .sv-fcard tbody tr:hover td{background:var(--surface2);}
body.flat #panel-profit .pr-table thead th{color:var(--text2);border-bottom-color:var(--border);}
body.flat #panel-profit .pr-table tbody td{color:var(--text);border-bottom-color:var(--line-soft);}
body.flat #panel-profit .pr-bar{background:var(--tag-bg);}
body.flat #panel-profit .pr-pill{background:var(--surface);border-color:var(--border2);color:var(--text2);}
body.flat #panel-profit .pr-pill.active{background:var(--action-tint);border-color:var(--action);color:var(--action-h);}
body.flat #panel-profit .pr-custom input{background:var(--surface);border-color:var(--border2);}
body.flat #nf-embed :is(input,select,textarea){background:var(--surface) !important;border-color:var(--border2) !important;}
body.flat #nf-embed .radio-opt,body.flat #nf-embed .ghost-btn{background:var(--surface);border-color:var(--border2);}
body.flat #nf-embed .note{background:var(--surface2);border-color:var(--border2);}
body.flat #nf-embed .sbar-g{background:var(--surface);border-color:var(--border2);}
body.flat #panel-mypage .mpg-snav.active{background:var(--action-tint);border-color:var(--action);color:var(--action-h);}
body.flat #panel-mypage .mpg-btn{background:var(--surface);border-color:var(--border2);}
body.flat #panel-mypage .mpg-btn.primary{background:var(--action-tint);border-color:var(--action);color:var(--action-h);}

/* ── モーダル / トースト: 単色 + 薄影のみ ───────────── */
body.flat .modal,
body.flat :is(#sv-filter-modal,#sd-filter-modal) .sv-modal,
body.flat #consent-overlay > div{
  background:var(--modal-bg) !important;border:1px solid var(--border2) !important;
  border-radius:10px !important;box-shadow:var(--shadow-lg) !important;
}
body.flat .modal-overlay,
body.flat :is(#sv-filter-modal,#sd-filter-modal){background:rgba(10,14,20,.55) !important;}
body.flat.light .modal-overlay,
body.flat.light :is(#sv-filter-modal,#sd-filter-modal){background:rgba(25,32,44,.4) !important;}
body.flat :is(#sv-filter-modal,#sd-filter-modal) :is(.sv-modal-head,.sv-modal-foot){border-color:var(--border);}
body.flat :is(#sv-filter-modal,#sd-filter-modal) .sv-pill{background:var(--surface);border-color:var(--border2);}
body.flat :is(#sv-filter-modal,#sd-filter-modal) .sv-range input{background:var(--surface);border-color:var(--border2);}
body.flat .toast{background:#232b38;border:1px solid #39455a;color:#fff;box-shadow:var(--shadow-lg);border-radius:8px;}

/* ── グローバルドック（#gbar）: 単色ピル + 罫線 ──────── */
body.flat #gbar .dock{background:var(--surface) !important;border:1px solid var(--border);box-shadow:var(--shadow);}
body.flat #gbar .dlbl{color:var(--text2);}
body.flat #gbar .dsep{background:var(--border);}
body.flat #gbar .gb-search{background:var(--surface);border-color:var(--border2);box-shadow:var(--shadow);}
body.flat #gbar .gb-sinp{color:var(--text);}
body.flat #gbar .gb-sinp::placeholder{color:var(--text3);}


/* ── v0.135: 白系不可視の一括修正（監査で検出した未カバー箇所）── */
body.flat #panel-mypage .mpg-mdiv{background:var(--border2);}
body.flat #panel-mypage :is(.mpg-addbox-h,.mpg-mlist-h){background:var(--surface2);border-color:var(--border);}
body.flat #nf-embed :is(.bsec-div,.vdiv){background:var(--border);}
body.flat #nf-embed .gift-rm{background:var(--surface2);border-color:var(--border2);color:var(--text2);}
body.flat #panel-price-chart :is(.ws-inp,.ws-sel){background:var(--surface);border-color:var(--border2);color:var(--text);}
body.flat #panel-price-chart .ws-unit{background:var(--tag-bg);color:var(--text2);}
body.flat #panel-price-chart .ws-chk{background:var(--surface);border-color:var(--border2);}
body.flat #alert-section :is(.al-input,.al-select){background:var(--surface);border-color:var(--border2);color:var(--text);}
body.flat #alert-section .al-unit{background:var(--tag-bg);color:var(--text2);}
body.flat :is(#sv-filter-modal,#sd-filter-modal) :is(.sv-modal-close,.sv-btn-reset){background:var(--surface2);border-color:var(--border2);color:var(--text2);}

/* ── スクロールバー ─────────────────────────────────── */
body.flat ::-webkit-scrollbar-thumb{background:var(--border2);}

/* ═════════ 第3: 正典層（旧sn.css）部 ═════════ */

/* ============================================================
   SedoNote 新意匠レイヤー（Notion風フラット） — css/sn.css
   正典: ClaudeDesign草案 3a/4a トークン体系（v0.157〜 Phase 1）
   読み込み順: app.css → app-flat.css → sn.css（最後＝上書き層）
   方針: Q6=3 ハイブリッド。既存CSSは変更せず本ファイルで上書きし、
         全ページ適用完了後に旧層と統合する。
   Phase 1 第1段の範囲: トークン定義＋グローバルchrome
   （ヘッダー / ヘッダーメニュー / フッター2種）。
   ドック・検索バー・KPI・パネル5種は第2段（配置・DOM・挙動は現行遵守）。
   ============================================================ */

/* ═══ 1. デザイントークン（ダーク既定 / body.light でライト） ═══ */
body.flat{
  --sn-bg:#1d1d1d;              /* 草案どおりの本文面 */
  --sn-bar:#242424;             /* 視認性調整: chrome面を一段明るく */
  --sn-hover:#2b2b2b;
  --sn-text:#e3e2e0;
  --sn-text2:#9b9b9b;
  --sn-text3:#6f6f6f;
  --sn-gold:#c9a961;
  --sn-action:#25a0d5;
  --sn-success:#7ab894;
  --sn-danger:#de6a5f;
  --sn-line-1:rgba(255,255,255,.13);
  --sn-line-2:rgba(255,255,255,.08);
  --sn-line-3:rgba(255,255,255,.06);
  --sn-line-row:rgba(255,255,255,.055);
  --sn-row-hover:rgba(255,255,255,.04);
  --sn-search-bg:rgba(255,255,255,.045);
  --sn-search-line:rgba(255,255,255,.08);
  --sn-kpi-bg:var(--sn-bar);    /* ウィジェット面はヘッダーと同色（IZUNA指定・参照で保証） */
  --sn-kpi-line:rgba(255,255,255,.07);  /* ClaudeDesign草案の原典値 */
  --sn-badge-blue-bg:rgba(37,160,213,.14);
  --sn-badge-blue-tx:#79c4e6;
  --sn-badge-blue2-bg:rgba(37,160,213,.11);
  --sn-badge-blue2-tx:#8fc0d8;
  --sn-badge-gold-bg:rgba(203,175,84,.14);
  --sn-badge-gold-tx:#cdb37c;
  --sn-badge-orange-bg:rgba(217,146,70,.14);
  --sn-badge-orange-tx:#d3a678;
  --sn-dock-neutral:#333333;
  --sn-dock-ink:#e3e2e0;
  --sn-dock-line:rgba(255,255,255,.1);
  --sn-dock-border:rgba(255,255,255,.08);  /* 草案原典値 */
  --sn-dock-shadow:0 8px 24px rgba(0,0,0,.4);
  --sn-wm-op:.35;
  --sn-wm-woman:.07;   /* IZUNA指定 7/09 */
  --sn-wm-sn:.03;      /* IZUNA指定 7/09 */
  /* ── 既存変数の上書き（草案トークン対応表A案・ダーク）──
     本体の全部品はこれらを参照しているため、ここが実際の色替えの本命 */
  --bg:#1d1d1d;
  --surface:var(--surface-bar);   /* カード面もヘッダーと同色（参照で保証） */
  --surface2:#2b2b2b;             /* hover・入力面 */
  --surface-bar:#242424;          /* 新規: ヘッダー/ドック/カードの面 */
  --menu:var(--surface-bar);      /* v0.194: モーダル/メニュー面の青(#171e29)残渣を正典無彩色に統一 */
  --modal-bg:var(--surface-bar);
  --fade:var(--surface-bar);
  --tag-bg:var(--surface2);       /* v0.195: 旧青#222b3a→正典無彩色 */
  --glass:var(--surface-bar);--glass-2:var(--surface2);          /* v0.195: 旧紺#171e29/#1e2734の面を正典に */
  --glass-border:var(--border);--glass-border-strong:var(--border2); /* 旧紺罫線#28313f/#39455aを正典に */
  --action-tint:rgba(37,160,213,.16); /* v0.195: 旧青rgba(77,139,255)→正典action(#25a0d5)由来 */
  --sn-claude:#d97757;            /* v0.196: 赤系=Claudeアイコン色ルール（両テーマ共通・ブランド定数） */
  --border:rgba(255,255,255,.07); /* 草案原典値 */
  --border2:rgba(255,255,255,.13);/* 強罫線 */
  --line-soft:rgba(255,255,255,.045);
  --text:#e3e2e0;
  --text2:#9b9b9b;
  --text3:#6f6f6f;
  --accent:#c9a961;               /* 署名専用ゴールド（彩度1段減） */
  --accent2:#c9a961;
  --action:#25a0d5;               /* Notion実測のトグル/リンク青 */
  --action-h:#3fb1e0;
  --danger:#de6a5f;
  --success:#7ab894;
  --info:#25a0d5;
  --toggle-on:#25a0d5;            /* 新規 */
}
body.flat.light{
  --sn-bg:#ffffff;
  --sn-bar:#f7f7f5;
  --sn-hover:#f1f1ef;
  --sn-text:#37352f;
  --sn-text2:#787774;
  --sn-text3:#9b9a97;
  --sn-gold:#b08d4a;
  --sn-action:#2383e2;
  --sn-success:#448361;
  --sn-danger:#d44c47;
  --sn-line-1:rgba(0,0,0,.16);
  --sn-line-2:rgba(0,0,0,.09);
  --sn-line-3:rgba(0,0,0,.06);
  --sn-line-row:rgba(0,0,0,.055);
  --sn-row-hover:rgba(0,0,0,.025);
  --sn-search-bg:rgba(0,0,0,.03);
  --sn-search-line:rgba(0,0,0,.09);
  --sn-kpi-bg:var(--sn-bar);
  --sn-kpi-line:rgba(0,0,0,.06);   /* 草案原典値（ライト） */
  --sn-badge-blue-bg:#d3e5ef;
  --sn-badge-blue-tx:#28456c;
  --sn-badge-blue2-bg:rgba(35,131,226,.10);
  --sn-badge-blue2-tx:#2e5568;
  --sn-badge-gold-bg:rgba(176,141,74,.16);
  --sn-badge-gold-tx:#6d5426;
  --sn-badge-orange-bg:#fadec9;
  --sn-badge-orange-tx:#6b3f1c;
  --sn-dock-neutral:#ececea;
  --sn-dock-ink:#37352f;
  --sn-dock-line:rgba(0,0,0,.09);
  --sn-dock-border:rgba(0,0,0,.07);        /* 草案原典値（ライト） */
  --sn-dock-shadow:0 8px 24px rgba(0,0,0,.12);
  --sn-wm-op:.6;
  --sn-wm-woman:.15;   /* ライト（IZUNA指定 7/09） */
  --sn-wm-sn:.1;       /* ライト（IZUNA指定 7/09・据え置き） */
  /* ── 既存変数の上書き（対応表・ライト対）── */
  --bg:#ffffff;
  --surface:var(--surface-bar);
  --surface2:#f1f1ef;
  --surface-bar:#f7f7f5;
  --tag-bg:var(--surface2);       /* v0.195: 旧寒色#eef1f6→正典暖色系 */
  --glass:var(--surface-bar);--glass-2:var(--surface2);
  --glass-border:var(--border);--glass-border-strong:var(--border2);
  --action-tint:rgba(35,131,226,.10); /* 正典action(#2383e2)由来 */
  --border:rgba(0,0,0,.06);
  --border2:rgba(0,0,0,.16);
  --line-soft:rgba(0,0,0,.045);
  --text:#37352f;
  --text2:#787774;
  --text3:#9b9a97;
  --accent:#b08d4a;
  --accent2:#b08d4a;
  --action:#2383e2;
  --action-h:#1f74c8;
  --danger:#d44c47;
  --success:#448361;
  --info:#2383e2;
  --toggle-on:#2383e2;
}

/* ═══ 2. ヘッダー（草案4a: --sn-bar面・金の上罫3px・下ヘアライン） ═══ */
body.flat .app-header{
  background:var(--surface-bar) !important;
  border-top:3px solid var(--sn-gold);
  border-bottom:1px solid var(--sn-line-3);

}

/* ブランド: ロゴは旧デザインの画像（img/logo-sn.webp・2026-08-01にPNGからWebP可逆変換）を継続採用（IZUNA指定）。
   .hsn（セリフ体SN）はmarkupに残るがhidden属性のまま非表示 */
body.flat .hbrand .hname{
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--sn-text);
}

/* ヘッダーのアイコンボタン（テーマ切替・メニュー）: 32px角・角丸4・枠線型 */
body.flat .h-icon{
  width:32px;height:32px;border-radius:4px;
  background:transparent;
  border:1px solid var(--sn-line-1);
  color:var(--sn-text2);
}
body.flat .h-icon:hover{
  background:var(--sn-hover);
  color:var(--sn-text);
  border-color:var(--sn-line-1);
}

/* ═══ 3. ヘッダーメニュー #hdr-menu（機能・DOM・挙動は現行のまま、皮のみ） ═══ */
body.flat #hdr-menu{
  background:var(--sn-bar);
  border:1px solid var(--sn-line-1);
  border-radius:6px;
  box-shadow:var(--sn-dock-shadow);
}
body.flat #hdr-menu .hm-sec{color:var(--sn-text3);}
body.flat #hdr-menu .hm-item{color:var(--sn-text);}
body.flat #hdr-menu .hm-item:hover{background:var(--sn-hover);}

/* ═══ 4. フッター（機能タブ側 .app-footer / 草案: ヘッダーと同面） ═══ */
body.flat .app-footer{
  background:var(--surface-bar) !important;
  border-top:1px solid var(--sn-line-3);

}
body.flat .fcopy{color:var(--sn-text3);}
body.flat .fcopy .fver{color:var(--sn-text3);}
body.flat .flinks a{color:var(--sn-text2);}
body.flat .flinks a:hover{color:var(--sn-text);}
body.flat .app-theme-btn{
  background:transparent;
  border:1px solid var(--sn-line-1);
  color:var(--sn-text2);
  border-radius:4px;
}
body.flat .app-theme-btn:hover{background:var(--sn-hover);color:var(--sn-gold);}



/* ═══ 7. グローバル検索バー＋ドック（#gbar / 皮のみ・配置/DOM/挙動は現行遵守） ═══ */
body.flat #gbar .gb-search{
  background:var(--sn-bar);
  border:1px solid var(--sn-dock-border);
  box-shadow:var(--sn-dock-shadow);
}
body.flat #gbar .gb-sinp{color:var(--sn-text);}
body.flat #gbar .gb-sinp::placeholder{color:var(--sn-text3);}
body.flat #gbar .gb-sico svg circle,
body.flat #gbar .gb-sico svg path{stroke:var(--sn-text3);}
body.flat #gbar .gb-sdiv{background:var(--sn-dock-line);}
body.flat #gbar .dock,
body.flat.light #gbar .dock{
  background:var(--sn-bar);
  border:1px solid var(--sn-dock-border);
  box-shadow:var(--sn-dock-shadow);
}
body.flat #gbar .dsep{background:var(--sn-dock-line);}
body.flat #gbar .dlbl{color:var(--sn-text3);}
body.flat #gbar .ic0 .diw{background:var(--sn-dock-neutral);}
body.flat #gbar .ic0 svg{stroke:var(--sn-dock-ink);}
body.flat #gbar .dact::after, body.flat #gbar .di.active::after{background:var(--sn-gold);}

/* ドックのアイコン配色: ClaudeDesign草案4aの色値に準拠（タイル.16透過＋線色） */
body.flat #gbar .di[data-tab="form"] .diw{background:rgba(61,187,125,.16);}
body.flat #gbar .di[data-tab="form"] svg{stroke:#3dbb7d;}
body.flat #gbar .di[data-tab="stock"] .diw{background:rgba(107,160,255,.16);}
body.flat #gbar .di[data-tab="stock"] svg{stroke:#6ba0ff;}
body.flat #gbar .di[data-tab="sold"] .diw{background:rgba(216,180,94,.16);}
body.flat #gbar .di[data-tab="sold"] svg{stroke:#d8b45e;}
body.flat #gbar .di[data-tab="price-chart"] .diw{background:rgba(154,132,218,.16);}
body.flat #gbar .di[data-tab="price-chart"] svg{stroke:#9a84da;}
body.flat #gbar .di[data-tab="ai"] .diw{background:rgba(77,139,255,.16);}
body.flat #gbar .di[data-tab="ai"] svg{stroke:#4d8bff;}
body.flat #gbar .di[data-tab="profit"] .diw{background:rgba(47,179,163,.16);}
body.flat #gbar .di[data-tab="profit"] svg{stroke:#2fb3a3;}
body.flat #gbar .di[data-tab="mypage"] .diw{background:rgba(224,101,101,.16);}
body.flat #gbar .di[data-tab="mypage"] svg{stroke:#e06565;}
/* v0.323(B-26): 開店閉店タイル＝赤系新規は --sn-claude ルール（#d97757） */
#gbar .di[data-tab="openclose"] .diw{background:rgba(217,119,87,.22);}
body.flat #gbar .di[data-tab="openclose"] .diw{background:rgba(217,119,87,.16);}
body.flat #gbar .di[data-tab="openclose"] svg{stroke:var(--sn-claude,#d97757);}

/* 検索バーのカメラアイコン: 旧ゴールド → 草案どおり text2 の無彩色 */
body.flat #gbar .gb-cbtn svg{stroke:var(--sn-text2);}

/* 検索バー高さ調整（IZUNA指定 7/08）: 30px→28.3px（ドックと同高）。
   〇ボタンの上マージンのみ縮小=上方向に詰める（3px→1.3px、下3pxは維持）。
   コンテナ.gb-searchは明示heightを持たず最も高い子要素で決まるため、
   このマージン変更だけで検索バー全体が 1.3+24+3=28.3px になる。 */
body.flat #gbar .gb-cbtn{
  margin:1.3px 0 3px;               /* 3px 0 → 上だけ1.3pxに圧縮（下3pxは維持） */
  border-radius:7px;                /* 円形(50%)→ドックの角丸(.di=7px)に合わせる */
}

/* 検索バー位置を上げる／間隔の均一化（IZUNA指定 7/08）:
   ウィジェット→検索バー間の間隔は layoutHome() の G=10（コード内コメント
   「共通の縦間隔・ここを変えれば一括調整」）が基準。一方 .gb-search の
   margin-bottom は6pxのみ据え置かれており、検索バー→ドック間だけ狭い
   ＝不揃いの原因だった。6px→10px（Gに合わせる）で3つの間隔を統一。
   副次効果として、ドックは#gbarの下端アンカーで実質固定なので、
   検索バーの上端がその分（4px相当）上に上がる＝位置調整も同時に達成。 */
body.flat #gbar .gb-search{margin-bottom:8px;}  /* 間隔10→8に統一 */



/* ═══ 9. 微調整（IZUNA指定 7/08）: ドック・検索バーの角Rを小さく ═══ */
body.flat #gbar .gb-search{border-radius:6px;} /* 楕円→四角（角丸6px・Notion調） */
body.flat #gbar .dock{border-radius:6px;}      /* 楕円→四角（角丸6px・Notion調） */


/* ═══ 12. Sign in with Googleボタン: ダーク時は本体背景色と同色（IZUNA指定 7/08） ═══
   自前実装の.gsi-dark(#131314)を本体背景(--bg=#1d1d1d)に合わせる。
   ロゴ4色の視認性のため枠線は据え置き(#5f6368相当=--sn-line-1)。ライトは変更しない */
body.flat .app-header .gsi-btn.gsi-dark{
  background:var(--bg);
  border-color:var(--sn-line-1);
}
body.flat .app-header .gsi-btn.gsi-dark:hover{
  background:var(--sn-hover);
  box-shadow:none;
}


/* ═══ 14. ヘアラインの太さ補正（IZUNA指定 7/08: ClaudeDesign草案と同じ見た目へ） ═══
   草案は等倍ページ(1px=画面1px)だが、ウィジェットは約1.7647倍のキャンバス内、
   検索バー/ドックも同率のtransform scaleが掛かるため、1px指定は画面上で約1.76pxに
   太って描画される。0.57px(=1/1.7647)指定で画面上約1.0px＝草案と同じ物理太さになる。
   （ホーム側キャンバスは退役＝doc版のヘアラインは home_doc.css の --hairline が正） */
body.flat #gbar .gb-search{border-width:.57px;}
body.flat #gbar .dock, body.flat.light #gbar .dock{border-width:.57px;}

/* ═══ 15. 言語切り替え（IZUNA指定 7/09: 多言語対応の準備） ═══ */
#lang-menu{
  position:fixed;top:52px;right:56px;z-index:5100;min-width:150px;
  background:var(--surface-bar);
  border:1px solid var(--sn-line-1);
  border-radius:6px;padding:5px;
  box-shadow:var(--sn-dock-shadow);
}
#lang-menu .lm-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:4px;font-size:13px;color:var(--sn-text);cursor:pointer;
}
#lang-menu .lm-item:hover{background:var(--sn-hover);}
#lang-menu .lm-check{color:var(--sn-gold);font-size:12px;}
#lang-menu .lm-soon{color:var(--sn-text3);font-size:10px;}





/* ═══ v0.175: 新規入力ページの調整（IZUNA指定） ═══
   ①ピル（.radio-opt）と保存ボタンの角Rをホームウィジェットと同じ見た目に統一
     （ウィジェットは4px×キャンバス拡大1.7647≈画面上7px。等倍ページなので7px指定）
   ②保存ボタン（仕入リストへ追加）が明るすぎる → ダークのみ一段深い青へ
     （--action=#25a0d5 は据え置き=リンク・トグル等は不変。ボタンだけ限定上書き） */
body.flat #nf-embed .radio-opt{border-radius:7px;}
body.flat #nf-embed .btn-primary{border-radius:7px;}
body.flat:not(.light) #nf-embed .btn-primary{background:#1d7fa8 !important;border-color:#1d7fa8 !important;}
body.flat:not(.light) #nf-embed .btn-primary:hover{background:#2591bd !important;border-color:#2591bd !important;}
/* ③入力欄・プルダウン・セクション大枠・補助ボタン・注記も同じ角R=7pxに統一（IZUNA指定・追加分）
   （元値: input/select/textarea=9px・.fcard=14px・.ghost-btn/.gift-rm=9px・.note=11px） */
body.flat #nf-embed input[type=text],
body.flat #nf-embed input[type=email],
body.flat #nf-embed input[type=number],
body.flat #nf-embed input[type=date],
body.flat #nf-embed select,
body.flat #nf-embed textarea{border-radius:7px;}
body.flat #nf-embed .fcard{border-radius:7px;}
body.flat #nf-embed .ghost-btn{border-radius:7px;}
body.flat #nf-embed .gu-rm{border-radius:7px;}   /* v0.199: 旧.gift-rm→充当ウィジェットの.gu-rmに改名 */
body.flat #nf-embed .note{border-radius:7px;}

/* ═══ v0.176: 仕入リスト・販売リストの角R統一（角R統一ルール適用・IZUNA指示） ═══
   ルール: コンテンツ面部品=7px / 小型バッジ・タグ=4px（development_guide.md デザイン方針）
   元値: mcard=12px・sv-fcard=14px・sv-modal=16px・search-box/select/ボタン/ピル=9px・
         pager/modal-close=8px・sv-ch/sv-cond=5px */
body.flat :is(#panel-stock,#panel-sold) .mcard{border-radius:7px;}
body.flat :is(#panel-stock,#panel-sold) .list-toolbar .search-box{border-radius:7px;}
body.flat :is(#panel-stock,#panel-sold) .list-toolbar select{border-radius:7px;}
body.flat :is(#panel-stock,#panel-sold) .sv-detail-btn{border-radius:7px;}
body.flat :is(#panel-stock,#panel-sold) .sv-csv-btn{border-radius:7px;}
body.flat :is(#panel-stock,#panel-sold) .sv-detail-badge{border-radius:7px;}
body.flat :is(#panel-stock,#panel-sold) .sv-fcard{border-radius:7px;}
body.flat :is(#panel-stock,#panel-sold) .sv-pager-btn{border-radius:7px;}
body.flat .sv-modal{border-radius:7px;}
body.flat .sv-modal-close{border-radius:7px;}
body.flat .sv-pill{border-radius:7px;}
body.flat .sv-btn-reset{border-radius:7px;}
body.flat .sv-btn-apply{border-radius:7px;}
/* 小型バッジ（チャネル・コンディション）= 4px（正典 .badge 準拠） */
body.flat :is(#panel-stock,#panel-sold) .sv-ch{border-radius:4px;}
body.flat :is(#panel-stock,#panel-sold) .sv-cond{border-radius:4px;}

/* ═══ v0.177: 角R統一ルールを6ページへ展開（IZUNA指示） ═══
   価格ウォッチ・ランキング・AI分析・収支レポート・マイページ・FBA納品プラン。
   ルール: 面部品=7px / 小型バッジ・タグ=4px（development_guide.md デザイン方針）。
   対象外（機能形状・装飾）: al-track/aia-slider(トグルスイッチ)・aia-meter・pr-bar(グラフ) */
/* 価格ウォッチ #panel-price-chart（元: ws-gold/ghost=8・ws-item/empty=10・ws-chk=5） */
body.flat #panel-price-chart .ws-gold{border-radius:7px;}
body.flat #panel-price-chart .ws-ghost{border-radius:7px;}
body.flat #panel-price-chart .ws-item{border-radius:7px;}
body.flat #panel-price-chart .ws-empty{border-radius:7px;}
body.flat #panel-price-chart .ws-chk{border-radius:4px;}
/* 価格アラート（al-・元: card=12・btn=8・item/empty=10・icon-btn=5） */
body.flat #alert-section .al-card{border-radius:7px;}
body.flat #alert-section .al-btn-primary{border-radius:7px;}
body.flat #alert-section .al-btn-ghost{border-radius:7px;}
body.flat #alert-section .al-item{border-radius:7px;}
body.flat #alert-section .al-empty{border-radius:7px;}
body.flat #alert-section .al-icon-btn{border-radius:4px;}
/* ランキング tips-*（元: card=14・toggle=11・tbtn/note=9・rank=8。
   v0.214 B-31: #panel-tips と #pr-myrank（収支レポート内カード）の共用化でスコープ解除 */
body.flat .tips-card{border-radius:7px;}
body.flat .tips-toggle{border-radius:7px;}
body.flat .tips-tbtn{border-radius:7px;}
body.flat .tips-note{border-radius:7px;}
body.flat .tips-rank{border-radius:4px;}
/* AI分析（元: mcard=10・aia-card=14・btn-gold=8・input=10・anon-btn=6・sg=20・chip=20） */
body.flat #panel-ai .mcard{border-radius:7px;}
body.flat .aia-card{border-radius:7px;}
body.flat .aia-btn-gold{border-radius:7px;}
body.flat .aia-input input{border-radius:7px;}
body.flat .aia-anon-btn{border-radius:7px;}
body.flat .aia-sg{border-radius:7px;}
body.flat .aia-chip{border-radius:4px;}
/* 収支レポート #panel-profit（元: pill=8・mcard=12・card=14・chip=5） */
body.flat #panel-profit .pr-pill{border-radius:7px;}
body.flat #panel-profit .pr-mcard{border-radius:7px;}
body.flat #panel-profit .pr-card{border-radius:7px;}
body.flat #panel-profit .pr-chip{border-radius:4px;}
/* マイページ #panel-mypage（元: nav/card=14・msub/addbox/mlist-card=11・mcard=10・
   snav/fld/btn/note/msub-btn=9・btn.sm=8・badge=20） */
body.flat #panel-mypage .mpg-nav{border-radius:7px;}
body.flat #panel-mypage .mpg-snav{border-radius:7px;}
body.flat #panel-mypage .mpg-card{border-radius:7px;}
body.flat #panel-mypage .mpg-fld{border-radius:7px;}
body.flat #panel-mypage .mpg-btn{border-radius:7px;}
body.flat #panel-mypage .mpg-btn.sm{border-radius:7px;}
body.flat #panel-mypage .mpg-mcard{border-radius:7px;}
body.flat #panel-mypage .mpg-note{border-radius:7px;}
body.flat #panel-mypage .mpg-msub{border-radius:7px;}
body.flat #panel-mypage .mpg-msub-btn{border-radius:7px;}
body.flat #panel-mypage .mpg-addbox{border-radius:7px;}
body.flat #panel-mypage .mpg-mlist-card{border-radius:7px;}
body.flat #panel-mypage .mpg-badge{border-radius:4px;}
/* FBA納品プラン（元: newbtn/mbody input/row=9・card=12・btn/sel=8・modal=14・box=11・badge=6・sku=5） */
body.flat #panel-inbound .ib-newbtn{border-radius:7px;}
body.flat .ib-card{border-radius:7px;}
body.flat .ib-btn{border-radius:7px;}
body.flat .ib-sel{border-radius:7px;}
body.flat .ib-modal{border-radius:7px;}
body.flat .ib-mbody input[type=text],
body.flat .ib-mbody input[type=number],
body.flat .ib-mbody input[type=date],
body.flat .ib-mbody input[type=tel]{border-radius:7px;}
body.flat .ib-row{border-radius:7px;}
body.flat .ib-box{border-radius:7px;}
body.flat .ib-badge{border-radius:4px;}
body.flat .ib-sku{border-radius:4px;}

/* ── 検索サジェスト（v0.251・body直下の浮動メニュー。トークンで両テーマ追従・フラット）
      検索バーの「上側」に表示（JSがバー上端-6pxにtopを置き、translateY(-100%)で上に展開） ── */
#sn-suggest{position:absolute;z-index:5002;transform:translateY(-100%);background:var(--menu);border:1px solid var(--border2);border-radius:7px;overflow:hidden;display:none;}
#sn-suggest .sn-sg-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;font-size:12px;color:var(--text);}
#sn-suggest .sn-sg-item.active,#sn-suggest .sn-sg-item:hover{background:var(--surface2);}
#sn-suggest .sn-sg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#sn-suggest .sn-sg-meta{color:var(--text3);font-size:10px;flex-shrink:0;}
#sn-suggest .sn-sg-price{color:var(--success);font-weight:600;font-size:12px;flex-shrink:0;font-family:'Space Grotesk',monospace;}

/* ── グローバルバー検索サジェスト #gb-suggest（js/gbar_search.js が生成・v0.318）
      app.js非搭載ページ（LP・item.php）用＝上の #sn-suggest（app.js側）とは別部品。
      バー上方向のfixed展開（left/width/bottomはJSが実測配置）。lp.css .lp-suggest から移設・改名 ── */
.gb-suggest{position:fixed;z-index:6000;
  background:var(--menu);border:1px solid var(--border2);border-radius:7px;overflow:hidden;}
.gb-suggest-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;font-size:12px;color:var(--text);}
.gb-suggest-item:hover,.gb-suggest-item.on{background:var(--surface2);}
.gb-suggest-item .sg-price{margin-left:auto;color:var(--accent);font-weight:600;white-space:nowrap;}
.gb-suggest-item .sg-cnt{color:var(--text3);font-size:11px;white-space:nowrap;}
.gb-suggest-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}


/* ── 検索バーのフォーカス枠（v0.251: 既定では内側の<input>に青リングが付き形がバーと合わない。
      入力欄側の全input共通focus(807行)を打ち消し、バー全体の :focus-within に付け直す。
      色・リング語彙は既存 .search-box:focus-within と同一） ── */
body.flat #gbar .gb-sinp:focus{background:transparent !important;box-shadow:none !important;border-color:transparent !important;}
body.flat #gbar .gb-search:focus-within{border-color:var(--action);box-shadow:var(--sn-dock-shadow),0 0 0 3px rgba(77,139,255,.18);}
/* キャレット部分描画対策はJS側 snCaretFix（app.js）に一本化（v0.252）。
   translateZ(0)・will-change によるレイヤー昇格はいずれも実機で効果なしと確認済み→撤去 */


/* ── [B-143] スマホの #gbar 拡大に伴う下部余白の確保（v0.364・2026-08-31）──────────
   js/chrome.js の gbScale は ≤560px で #gbar を画面幅いっぱいへ拡大する（実効幅41%→96%）。
   これにより固定バーの視覚的な上端が約96px→約137px（検索バー表示時）へ上がるため、
   ページ末尾のコンテンツが隠れないよう逃げを増やす。
   ⚠️これは拡大で悪化した分の是正であって新規の問題ではない＝上の @media(max-width:768px)
   の `.content{padding:12px;}` が下方向の逃げまで12pxに詰めており、**拡大前から
   最終行が固定バーに隠れうる状態**だった（2026-08-31 実測で判明）。
   padding-bottom のみ指定＝左右・上の余白は既存クエリの値をそのまま活かす（後勝ち）。 */
@media(max-width:560px){
  .content{padding-bottom:150px;}
}