/* ============================================================================
   クロスバリュー SaaS 共通デザインシステム  cv-ui.css  v2（2026-09-01）

   目的：弊社が作るSaaSの見た目と操作を1本に揃え、どのクライアントに出しても
        「クロスバリューのSaaSはこの形」と分かる状態を資産にする。

   ── v2で何をしたか（v1からの変更・理由） ──
   v1は shindan-tool に適用した実装をそのまま写したものだった。その後 nii-crm と
   andtaxi-works の実物を読んだところ、**両方ともすでに同じ骨格を持っており、
   一部はv1より進んでいた**（実測・2026-09-01）。よってv2では、
   「3本の最大公約数＋各製品の良いところ」に作り直した。

     ・トークン体系は andtaxi-works を土台にした（8pxグリッド／面と墨の3段階／
       状態色6種＋soft／影3段。3本の中で最も語彙が整っていたため）
     ・スマホでの入力欄16px（iOSの自動ズーム防止）は nii-crm から取り込んだ
     ・スマホで横長の表を「1件＝1カード」に組み替える型も nii-crm から取り込んだ
     ・クラス名は .nav / .header / .page（3本中2本が採用）を正とした

   ── 骨格は4点。これは装飾ではなく情報設計 ──
     1. 左サイドバー（グループ見出し付き）… 項目が増えても縦に伸びるだけで壊れない
     2. 薄いヘッダー（46〜52px・sticky）… 会社の切替と「自分が誰か」だけを載せる
     3. ページヘッダー（パンくず＋見出し＋主アクション）… いまどこにいて何をする画面か
     4. ホーム画面 … 開いた直後の入口。いきなり入力表を出さない

   ── 🔴 横タブを使わない（実測が根拠） ──
   shindan-tool の改修前を実測したところ、横タブ12本は PC 1152pxで2段・スマホで4段に
   折り返し、上部だけで画面の30〜41%を占めていた（1280px:156px／1152px:237px／
   375px:330px）。項目が増えるほど壊れる構造なので、新規のSaaSでは採用しない。
   ただし**画面が5つ以下で今後も増えないダッシュボード**（2026-09-03時点で該当する製品はなし。
   andtaxi-report は該当していたが、浜田さんの指示で同日サイドバー化した）は
   折り返さないので、横並びのままでよい。「何本あるか」で判断する。

   ── クラス名の対応（既存3本との差） ──
   | 役割 | 正（この版） | shindan-tool の実装 |
   |---|---|---|
   | サイドバー | .nav / .nav-item | .side / .side-item |
   | ヘッダー   | .header          | .authbar（id=#authbar） |
   | 本文       | .page            | .panel |
   shindanは単一HTMLで既存の結線が多いため改名していない。**新規は正の名前を使う。**

   ── 使うときの約束 ──
   1. 製品側で上書きしてよいのは「ブランド」節のトークンだけ
   2. 骨格のクラス名は変えない
   3. 製品固有の見た目（業務ロジック由来の色分け）はこのファイルに書かない
   4. **サイドバーのアイコンは任意。使うなら対象OSで描画テストを通してから**（後述）
   5. **図形は記号文字でなくCSSで描く**（三本線を記号1文字で置かない）
   ============================================================================ */

/* ---------- 1. トークン（土台＝andtaxi-works の体系） ---------- */
:root{
  /* 面と墨 */
  --ink:#2A2D2A;          /* 本文 */
  --ink-2:#5A615A;        /* 補助文字 */
  --ink-3:#8A918A;        /* 弱い文字・プレースホルダ */
  --surface:#FFFFFF;      /* カード面 */
  --surface-2:#F7F6F5;    /* ページ背景 */
  --surface-3:#F0EFED;    /* ゼブラ・ホバー */
  --line:#E2E0DD;         /* 罫線 */
  --line-2:#CFCCC8;       /* 強い罫線 */

  /* ブランド（製品ごとに上書きしてよい唯一の節）
     shindan=#3EB489 ／ nii-crm=#279754 ／ andtaxi-works=#3EAD87 */
  --brand:#3EAD87;
  --brand-dark:#2F8A6B;
  --brand-soft:#E8F5EF;

  /* サイドバー（濃色） */
  --nav:#22292B;
  --nav-2:#2C3436;
  --nav-active:var(--brand);
  --nav-text:#C9D1D0;
  --nav-text-dim:#8C9997;

  /* 状態色。必ず「色＋soft（背景用）」の対で持つ＝
     文字色だけ決めて背景をその場の思いつきで置く、を防ぐ */
  --ok:#2F8A6B;        --ok-soft:#EAF5F0;
  --warn:#C88A16;      --warn-soft:#FDF3DE;
  --danger:#C0453C;    --danger-soft:#FBEDEC;
  --info:#2F6FA8;      --info-soft:#EAF2FA;
  --lock:#7A6BA8;      --lock-soft:#F1EEF9;

  /* 寸法（8pxグリッド）。余白は必ずこの変数から取る＝
     11px・13px のような一度きりの値が散らばるのを防ぐ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --nav-w:236px;
  --header-h:52px;
  --radius:8px;
  --radius-sm:6px;
  --shadow-1:0 1px 2px rgba(20,25,22,.06), 0 1px 3px rgba(20,25,22,.04);
  --shadow-2:0 4px 12px rgba(20,25,22,.10), 0 2px 4px rgba(20,25,22,.06);
  --shadow-3:0 16px 40px rgba(20,25,22,.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
  font-size:14px; line-height:1.6; color:var(--ink);
  background:var(--surface-2); -webkit-font-smoothing:antialiased;
}

/* ---------- 2. シェル ---------- */
.shell{display:flex; align-items:flex-start; min-height:100vh;}

/* 🔴 サイドバーは position:sticky にする。fixed にするとページ全体のスクロールが
   分断され、表の見出し固定（スクロール量から算出する方式）が効かなくなる */
.nav{
  width:var(--nav-w); flex:none; position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--nav); color:var(--nav-text); z-index:40;
  padding:var(--s3) var(--s2) var(--s4); display:flex; flex-direction:column;
}
.nav-brand{display:flex; gap:var(--s2); align-items:center; padding:var(--s1) var(--s2) var(--s3);}
.nav-brand .mark{
  width:36px; height:36px; flex:none; border-radius:10px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:13px; letter-spacing:.5px;
}
.nav-brand b{display:block; color:#fff; font-size:13px; line-height:1.3;}
.nav-brand small{display:block; color:var(--nav-text-dim); font-size:10px; margin-top:1px;}
.nav-group{padding:var(--s3) 0 var(--s2);}
.nav-group-label{
  font-size:10px; font-weight:700; letter-spacing:.09em;
  color:var(--nav-text-dim); padding:0 var(--s2) var(--s1);
}
.nav-item{
  display:flex; align-items:center; gap:var(--s2); width:100%; text-align:left;
  background:none; border:0; border-left:3px solid transparent;
  color:var(--nav-text); padding:var(--s2) var(--s2); border-radius:var(--radius-sm);
  cursor:pointer; font-size:12.5px; font-family:inherit; line-height:1.4;
}
.nav-item:hover{background:var(--nav-2); color:#fff;}
.nav-item.active{background:var(--nav-2); color:#fff; border-left-color:var(--nav-active); font-weight:700;}
/* アイコンは任意（下の「アイコンを使うなら」を読んでから足す） */
.nav-item .ico{width:16px; text-align:center; opacity:.85; font-size:13px; flex:none;}
.nav-foot{
  margin-top:auto; padding:var(--s3) var(--s2) 0; font-size:10px;
  color:var(--nav-text-dim); line-height:1.6;
}
.nav-scrim{display:none; position:fixed; inset:0; background:rgba(20,25,22,.4); z-index:39;}
.main{flex:1; min-width:0; display:flex; flex-direction:column;}

/* ---------- 3. ヘッダー ---------- */
/* 🔴 載せるのは「会社の切替」「ビュー」「同期状態」「自分が誰か」だけ。
   毎日は使わない管理系（メンバー・利用者管理・履歴・設定）はメニューに畳む。
   全部並べると幅が足りず2段に折り返す（旧shindanは18個並べて実測78px＝2段だった） */
.header{
  min-height:var(--header-h); background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--s3); padding:0 var(--s4);
  position:sticky; top:0; z-index:30;
}
.header-right{margin-left:auto; display:flex; align-items:center; gap:var(--s3);}
.who{display:flex; align-items:center; gap:var(--s2); font-size:13px; color:var(--ink-2);}
.who .avatar{
  width:26px; height:26px; border-radius:50%; background:var(--brand-soft);
  color:var(--brand-dark); display:grid; place-items:center; font-size:11px; font-weight:700;
}
/* 三本線は記号文字ではなくCSSで描く＝フォント次第で豆腐になる事故を作らない */
.menu-btn{
  display:none; border:1px solid var(--line-2); background:var(--surface);
  border-radius:var(--radius-sm); width:32px; height:30px; cursor:pointer;
  padding:0; align-items:center; justify-content:center; flex:none;
}
.menu-btn i{display:block; position:relative; width:15px; height:2px; border-radius:2px; background:var(--ink);}
.menu-btn i::before,.menu-btn i::after{
  content:""; position:absolute; left:0; width:15px; height:2px; border-radius:2px; background:var(--ink);
}
.menu-btn i::before{top:-5px;} .menu-btn i::after{top:5px;}

/* 畳んだ管理系メニュー */
.menu-wrap{position:relative; display:flex; align-items:center;}
.menu-pop{
  display:none; position:absolute; right:0; top:calc(100% + 7px); min-width:186px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-3); padding:var(--s1); z-index:60;
}
.menu-pop.open{display:block;}
.menu-item{
  display:block; width:100%; text-align:left; border:0; background:none; font-family:inherit;
  font-size:12px; color:var(--ink); padding:7px 10px; border-radius:var(--radius-sm);
  cursor:pointer; white-space:nowrap;
}
.menu-item:hover{background:var(--brand-soft); color:var(--brand-dark);}

/* ---------- 4. ページ ---------- */
.page{padding:var(--s5); max-width:1440px; width:100%; margin:0 auto;}
.page-head{display:flex; align-items:flex-end; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap;}
.page-head h1{font-size:20px; margin:0;}
.crumb{font-size:12px; color:var(--ink-3); margin-bottom:2px;}
.page-head .actions{margin-left:auto; display:flex; gap:var(--s2); flex-wrap:wrap;}
.page-note{
  font-size:12px; color:var(--ink-2); background:var(--info-soft);
  border-left:3px solid var(--info); padding:var(--s2) var(--s3);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-bottom:var(--s4);
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); margin-bottom:var(--s4);
}
.card-head{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);}
.card-head h2{font-size:14px; margin:0;}
.card-body{padding:var(--s4);}
/* 画面には出さず紙にだけ出す（誰の・いつの資料かを紙側に持たせる） */
.print-only{display:none;}
/* 案内文の出し分け。狭い画面ではサイドバーが引き出しに入って「左」に無いので、
   「左のメニュー」と書くと初見の人が探せない（2026-09-01の受け入れ検査で実際に発生） */
.only-narrow{display:none;}

/* ---------- 5. ホーム ---------- */
.home-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-bottom:var(--s4);}
.home-kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:var(--s3) var(--s4);}
.home-kpi .k-lbl{font-size:11px; color:var(--ink-2);}
.home-kpi .k-val{font-size:25px; font-weight:800; color:var(--brand-dark); margin-top:3px; line-height:1.1;}
.home-kpi .k-sub{font-size:10.5px; color:var(--ink-3); margin-top:3px;}
.home-sec{font-size:11px; color:var(--ink-2); letter-spacing:.08em; font-weight:700; margin:0 2px var(--s2);}
.home-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);}
.home-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:var(--s3) var(--s4); cursor:pointer;
  text-align:left; font-family:inherit; width:100%; transition:border-color .12s, transform .12s;
}
.home-card:hover{border-color:var(--brand); box-shadow:var(--shadow-2); transform:translateY(-1px);}
.home-card b{display:block; font-size:13.5px; color:var(--ink); margin-bottom:4px;}
.home-card span{display:block; font-size:11.5px; color:var(--ink-2); line-height:1.6;}
@media(max-width:1080px){.home-cards,.home-kpis{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.home-cards,.home-kpis{grid-template-columns:1fr;}}

/* ---------- 6. 狭い画面 ---------- */
@media(max-width:900px){
  .nav{
    position:fixed; left:0; top:0; bottom:0; height:100vh; transform:translateX(-100%);
    transition:transform .18s ease; box-shadow:var(--shadow-3);
  }
  .nav.open{transform:translateX(0);}
  .nav-scrim.open{display:block;}
  .menu-btn{display:inline-flex;}
  .page{padding:var(--s3);}
  .page-head h1{font-size:17px;}
  .only-wide{display:none;}
  .only-narrow{display:inline;}

  /* 🔴 iOSは入力欄の文字が16px未満だとフォーカス時に画面を自動で拡大し、
     戻すのに指で縮める操作が要る。スマホで使う画面の入力欄は必ず16pxにする。
     PC専用の密な表（列が多く横スクロール前提のもの）だけ、個別に元の大きさへ戻す。 */
  input,select,textarea{font-size:16px;}
}

/* ---------- 7. スマホで横長の表を「1件＝1カード」に組み替える ---------- */
/* 列が8つ以上ある入力テーブルは、スマホで横に送りながら埋めるのが現実的でない
   （nii-crm が 375px の実機確認で確立）。表のHTMLは変えず、td に data-label を
   持たせて CSS だけで組み替える＝JS側の結線に触らない。
   使い方＝<td data-label="顧客名"> を付け、表に .to-cards クラスを付ける。 */
@media(max-width:900px){
  .to-cards{min-width:0; width:100%; table-layout:auto; display:block;}
  .to-cards thead{display:none;}
  .to-cards tbody,.to-cards td{display:block; width:auto;}
  .to-cards tr{
    display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s3);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:var(--s2) var(--s3) var(--s3); margin-bottom:var(--s3);
    background:var(--surface); position:relative;
  }
  .to-cards td{border:0; padding:5px 0;}
  .to-cards td[data-label]::before{
    content:attr(data-label); display:block; font-size:11.5px; color:var(--ink-3); margin-bottom:3px;
  }
  /* 文字数の多い項目は全幅にする */
  .to-cards td.wide{grid-column:1 / -1;}
}

/* ---------- 8. 印刷 ---------- */
/* 画面操作のためのものは紙に一切出さない。シェルの横並びも解除しないと
   紙の左端にサイドバーぶんの余白が残る。 */
@media print{
  .nav,.nav-scrim,.header,.menu-btn,.filters,.actions,.noprint{display:none !important;}
  .shell{display:block !important;}
  .main{display:block !important;}
  .page{padding:0; max-width:none;}
  .print-only{display:block !important; font-size:12px; color:#000; font-weight:700; margin-bottom:3px;}
  /* 1件ぶんの帳票などスコープ印刷では画面の見出しも出さない＝紙の主役は中身 */
  body[data-printscope] .page-head{display:none !important;}
  /* 表は流し、行の途中でだけ切らない。表全体を avoid にすると
     ページ末尾に見出しだけ残って本体が次ページへ飛ぶ */
  table{page-break-inside:auto;}
  tr{page-break-inside:avoid;}
  thead{display:table-header-group;}
  h2,h3{page-break-after:avoid;}
  .table-wrap{overflow:visible;}
}

/* ============================================================================
   アイコンを使うなら（読んでから足す）

   サイドバーのアイコンは任意。使うなら次を守る。
   ・弊社デザイン基準により、カラフルな絵文字は使わない（モノトーンの記号のみ）
   ・**対象OSで実際に描画テストを通す**。文字幅の比較では判定できない
     （全角記号は本来1em幅で、字が無いときの箱と同じ幅になるため）。
     canvas に描いて、存在しない符号位置（U+FFFF）と同じ絵にならないかで判定する。
     判定コードが効いていることは、私用領域（U+E000）を入れてNGになることで確かめる。
   ・JIS X 0208 の範囲（○●◎◇◆□■△▲▽▼※？￥）は日本語フォントに必ず入るが、
     図形が似ていて13項目に割り当てると見分けがつかない。
     ▤▧▦∑✓⌂⚙ 等は macOS では確認済み、Windows は Segoe UI Symbol 頼りで未検証。
   ・**迷うならアイコンを付けない。グループ見出しがあれば走査はできる。**
     shindan-tool は上記の未検証リスクを理由にアイコンなしで運用している（2026-09-01判断）。

   採用状況（2026-09-01）
   | 製品 | 状態 |
   |---|---|
   | shindan-tool | 骨格は適用済み・本番稼働。クラス名は旧名のまま／アイコンなし |
   | nii-crm | すでに同じ骨格。**変更しない**（当てても良くならないと実測で判断） |
   | andtaxi-works | すでに同じ骨格。トークン体系はここが出どころ。**変更しない** |
   | andtaxi-report | 画面5つの横並び。増える予定がないため現状維持 |
   ============================================================================ */