/* Faro — 承認済みモックアップ(docs/faro_mockup.html)の配色・余白・形を正とする。
   ここを勝手に変えないこと。モックアップに無い画面(接続設定・エラー等)の分は
   末尾の「追加」セクションにまとめる。 */

:root{
  --bg: #17151a;
  --surface: #1c1a20;
  --surface-2: #211f25;
  --hairline: #4a4550;
  --hairline-soft: #38343d;
  --gold: #c8ff3d;
  --gold-soft: #8fb82c;
  --shot: #d9e8b0;
  --yellow: #e0c04a;
  --red: #d1594a;
  --highlight: #e3b98a;
  --blue: #6d93c9;
  --orange: #dc8a42;
  --pink: #ff3d9a;
  --purple: #a374c9;
  --wine: #b8735c;
  --wine-soft: #3a2a26;
  --text: #ece7dc;
  --text-mute: #9c9689;
  --text-faint: #746e64;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;}
:focus-visible{outline:1px solid var(--gold); outline-offset:3px;}

/* ---------- アプリとして起動されたときの「ネイティブ寄せ」 ---------- */
/* Dockから起動したインストール型のときだけ効く。ブラウザで開いた場合は無関係。
   文字選択カーソルや画面端のバウンドといった「ウェブページっぽさ」を消す */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  html{overscroll-behavior:none;}
  body{cursor:default; -webkit-user-select:none; user-select:none;}
  /* データの値はコピーできるように選択可のまま残す */
  #caseBody td, #salesBody td, .cal-cell{-webkit-user-select:text; user-select:text;}
}

/* Chromeアプリ形式では、ヘッダーがそのままウィンドウのタイトルバーを兼ねる
   (左上の信号機ボタンの分だけ避け、ヘッダーを掴んでウィンドウを動かせる) */
@media (display-mode: window-controls-overlay) {
  header{
    padding-top:calc(env(titlebar-area-y, 0px) + 12px);
    padding-left:calc(env(titlebar-area-x, 0px) + 26px);
    padding-bottom:14px;
    -webkit-app-region:drag; app-region:drag;
  }
  header button, header .brand{-webkit-app-region:no-drag; app-region:no-drag;}
}

/* ---------- Header ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:30px 40px; border-bottom:1px solid var(--hairline-soft);
  position:sticky; top:0; background:rgba(23,21,26,0.94); backdrop-filter:blur(8px);
  z-index:10;
}
.brand{display:flex; align-items:center; gap:11px; cursor:pointer;}
.brand .mark{flex:none; display:block; height:31px; width:auto; color:var(--gold);}
/* ワードマークはマークより控えめに。主役はモノグラムのほう */
.brand .word{
  font-family:"Futura","Futura PT",var(--font); font-weight:500;
  font-size:15px; color:var(--gold); letter-spacing:0.26em; line-height:1;
  padding-left:0.26em;                    /* 字間ぶんの右余りを打ち消して中央に見せる */
}
.brand .sub{
  font-size:9.5px; color:var(--text-faint); letter-spacing:2.5px; margin-top:7px;
}
/* アプリの版。ロゴの右肩に小さく添える(不具合の連絡時に「どの版か」が分かるように) */
.brand .app-ver{
  font-size:8.5px; color:var(--text-faint); letter-spacing:0; font-weight:400;
  margin-left:6px; vertical-align:2px;
}

nav.tabs{display:flex; gap:4px; background:var(--surface); padding:4px; border-radius:999px; border:1px solid var(--hairline-soft);}
nav.tabs[hidden]{display:none;} /* display:flex が [hidden] を上書きしてしまうため */
nav.tabs button{
  appearance:none; border:none; background:transparent; color:var(--text-mute);
  padding:8px 20px; border-radius:999px; font-size:12px; font-weight:500;
  font-family:var(--font); cursor:pointer; transition:all .15s ease;
  letter-spacing:1.5px;
}
nav.tabs button.active{background:var(--gold); color:#17151a;}
nav.tabs button:hover:not(.active){color:var(--text);}

main{max-width:920px; margin:0 auto; padding:52px 32px 100px;}
.view{display:none; animation:fade .3s ease;}
.view.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Calendar view ---------- */
.cal-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:36px;}
.cal-head .ym{display:flex; align-items:baseline; gap:14px;}
.cal-head .year{font-size:12px; color:var(--text-faint); letter-spacing:2px; font-weight:700;}
.cal-head .month{
  font-family:var(--font); font-size:38px; color:var(--text); font-weight:900;
}
.cal-nav{display:flex; gap:22px; align-items:center;}
.cal-nav button{
  background:transparent; border:none; color:var(--text-faint);
  cursor:pointer; font-size:13px; font-family:var(--font); letter-spacing:1px;
}
.cal-nav button:hover{color:var(--gold);}

.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); border-top:2px solid var(--hairline-soft); border-left:2px solid var(--hairline-soft);
  position:relative; /* 複数日バー(絶対配置)の基準 */}

/* 複数日の予定は、週ごとに繋がった1本のバーとしてグリッドに重ねる */
.span-bar{position:absolute; margin:0; z-index:2;}
.cal-dow{
  text-align:center; font-size:10px; color:var(--text-faint); padding:10px 0; font-weight:700;
  letter-spacing:2px; border-right:2px solid var(--hairline-soft); border-bottom:2px solid var(--hairline-soft);
}
.cal-cell{
  border-right:2px solid var(--hairline-soft); border-bottom:2px solid var(--hairline-soft);
  height:120px; padding:10px 0; position:relative; cursor:default; overflow:hidden;  /* 帯の拡大に合わせ2件入る高さ(2026-08-28) */
  transition:background .15s ease;
  background:var(--surface);  /* 枠内は地よりほんのり薄く(枠外との見分け 2026-08-27) */
}
.cal-cell.empty{background:transparent;}
.cal-cell.has-case{cursor:pointer;}
.cal-cell.has-case:hover{background:var(--surface-2);}

/* 案件がある日だけ、フェーズに応じた色で枠を付ける */
.cal-cell.phase-tentative{box-shadow:inset 0 0 0 1px var(--yellow);}
.cal-cell.phase-unassigned{box-shadow:inset 0 0 0 1px var(--red);}
.cal-cell.phase-assigned{box-shadow:inset 0 0 0 1px var(--gold);}
.cal-cell.phase-shot{box-shadow:inset 0 0 0 1px var(--shot);}

.cell-top{display:flex; justify-content:space-between; align-items:baseline; padding:0 10px;}
.cal-cell .daynum{font-family:var(--font); font-size:15px; font-weight:500; color:var(--text-mute);}
.cal-cell .rokuyo{font-size:9px; color:var(--text-faint); letter-spacing:0.5px;}
/* 土日祝は数字だけ別ハイライト(強調色=goldとは別トーン) */
.cal-cell.weekend .daynum{color:var(--highlight); font-weight:700;}
.holiday-label{font-size:9px; color:var(--highlight); margin-top:2px; padding:0 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cal-cell.today .daynum{color:#fff;}
.cal-cell.today::after{
  content:""; position:absolute; top:8px; right:10px; width:4px; height:4px; border-radius:50%; background:#fff;
}
.case-chip{
  margin-top:5px; font-size:12px; padding:10px 11px; line-height:1.3;
  color:var(--text); position:relative;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.case-chip.phase-tentative{background:var(--yellow); color:#1d1608;}
.case-chip.phase-unassigned{background:var(--red); color:#2a0f0a;}
.case-chip.phase-assigned{background:var(--gold); color:#17151a;}
.case-chip.phase-shot{background:var(--shot); color:#2a2f18;}
.case-chip.kind-private{background:var(--blue); color:#0f1a26; cursor:default;}
.case-chip.kind-meeting{background:var(--pink); color:#2a0818; cursor:pointer;}
.case-chip.kind-meeting:hover{filter:brightness(1.12);}
.case-chip.kind-delivery{background:var(--purple); color:#211530; cursor:pointer;}
.case-chip.kind-delivery:hover{filter:brightness(1.12);}

.chip-badge{
  position:absolute; top:50%; transform:translateY(-50%); right:5px;
  font-size:7.5px; letter-spacing:0.3px;
  padding:1px 5px; color:var(--red); background:rgba(13,12,10,0.55);
  border:1px solid var(--red); border-radius:2px;
}
/* バッジは警告なので必ず見えていること。案件名のほうを先に省略する */
.case-chip.has-badge{padding-right:44px;}

.cal-cell.conflict{background:var(--wine-soft);}
.cal-cell.conflict::before{
  content:""; position:absolute; top:9px; right:16px; width:5px; height:5px; border-radius:50%; background:var(--wine);
}

.legend{display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:20px; font-size:10.5px; color:var(--text-faint); letter-spacing:0.5px;}
.legend span{display:inline-flex; align-items:center; gap:8px;}
.legend i{width:14px; height:1px; display:inline-block;}

/* メール整理の手動スイッチ(依頼⑩) */
.mail-now{margin-top:18px; font-size:10.5px; color:var(--text-faint); display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.mail-now button{
  background:transparent; border:1px solid var(--hairline-soft); border-radius:4px;
  color:var(--text-faint); cursor:pointer; padding:5px 12px;
  font-size:10.5px; font-family:var(--font); letter-spacing:1px;
}
.mail-now button:hover{color:var(--gold); border-color:var(--gold);}
.mail-now button:disabled{opacity:0.5; cursor:default;}
.mail-now #mailNowMsg{white-space:pre-wrap;}
/* メール整理が最後に動いた時刻。30分以上動いていなければ色を変える */
.mail-now .mail-lastrun{color:var(--text-faint); white-space:nowrap;}
.mail-now .mail-lastrun.stale{color:var(--gold);}
/* 承認タブ: バッジ(承認待ち件数)と初回設定バー */
nav.tabs button{position:relative;}
#approveBadge{
  position:absolute; top:1px; right:2px;
  background:var(--red); color:#fff; border-radius:999px;
  font-size:9px; line-height:14px; min-width:14px; height:14px; padding:0 4px;
  letter-spacing:0;
}
#approveSetup{
  display:flex; gap:8px; padding:10px 24px; max-width:640px;
  align-items:center;
}
/* hidden属性は常に勝たせる(display:flex等の指定がある要素でも隠れるように) */
[hidden]{display:none !important;}
#approveSetup input{
  flex:1; background:var(--surface); border:1px solid var(--hairline-soft); border-radius:4px;
  color:var(--text); padding:6px 10px; font-size:12px; font-family:var(--font);
}
#approveSetup button{
  background:transparent; border:1px solid var(--hairline-soft); border-radius:4px;
  color:var(--text-faint); cursor:pointer; padding:6px 12px;
  font-size:11px; font-family:var(--font); letter-spacing:1px; white-space:nowrap;
}
#approveSetup button:hover{color:var(--gold); border-color:var(--gold);}

.mail-now form{display:flex; gap:8px; flex-basis:100%; max-width:420px;}
.mail-now input{
  flex:1; background:var(--surface); border:1px solid var(--hairline-soft); border-radius:4px;
  color:var(--text); padding:6px 10px; font-size:12px; font-family:var(--font);
}

/* ---------- カレンダーは1画面で完結させる(縦スクロールしない) ----------
   100dvh は「いま見えている高さ」。Safariのアドレスバーが出ていても、
   ホーム画面から全画面で起動していても、どちらでも収まる。
   案件ページ・売上は読み物なので普通にスクロールさせる。カレンダーのときだけ効かせる */
body.on-calendar{height:100dvh; overflow:hidden; display:flex; flex-direction:column;}
body.on-calendar header{position:static;}
body.on-calendar main{
  flex:1; min-height:0; display:flex; flex-direction:column;
  max-width:none; width:100%;               /* PCでも横幅いっぱいに使う */
  padding:18px 24px 14px;
}
body.on-calendar .cal-head{margin-bottom:16px;}
body.on-calendar #view-calendar.active{flex:1; min-height:0; display:flex; flex-direction:column;}
body.on-calendar .cal-grid{
  flex:1; min-height:0;
  grid-template-rows:auto;                  /* 1行目(曜日)は中身の高さのまま */
  /* 通常は1frで画面にぴったり収める。ウィンドウが低いときはコマを潰さず、
     グリッドの中だけスクロールさせる(予定が読めない高さにしない) */
  grid-auto-rows:minmax(72px, 1fr);
  overflow-y:auto;
}
body.on-calendar .cal-cell{height:auto; min-height:0;}
body.on-calendar .note{display:none;}

/* コマに入りきらない予定があることを必ず知らせる(隠れた予定を作らない) */
.more-mark{
  position:absolute; bottom:1px; right:3px; font-size:8.5px; color:var(--text-mute);
  background:var(--bg); padding:0 3px; letter-spacing:0;
}

/* ---------- Case view ---------- */
.case-header{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  padding-bottom:26px; border-bottom:2px solid var(--hairline-soft); margin-bottom:36px;
}
.case-title-block .eyebrow{font-size:10px; color:var(--text-faint); letter-spacing:3px; margin-bottom:10px;}
/* 下端をステータス枠と揃えるためh1の下マージンは持たない(2026-09-01) */
.case-title-block h1{font-family:var(--font); font-size:28px; font-weight:700; margin:0;}
.tagrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.tag{
  font-size:11px; color:var(--text-mute); letter-spacing:1px;
}
.tag + .tag::before{content:"·"; margin-right:10px; color:var(--hairline);}
.tag.venue{color:var(--gold);}

/* 会場とプランの独立行(2026-09-01 依頼者指示: 現状より目立たせる) */
.venue-plan{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:2px 0 12px;}
.vp-venue{font-size:19px; font-weight:700; color:var(--gold); letter-spacing:1.5px;}
.vp-cat{font-size:12.5px; color:var(--text-mute); letter-spacing:1.5px;}
.vp-plan{
  font-size:12.5px; color:var(--text); letter-spacing:1px;
  border:1px solid var(--hairline); border-radius:999px; padding:3px 12px;
}
.status-pill{
  font-size:11px; letter-spacing:2px; padding:8px 18px; white-space:nowrap;
  border:1px solid currentColor;
}
.status-pill.phase-tentative{color:var(--yellow);}
.status-pill.phase-unassigned{color:var(--red);}
.status-pill.phase-assigned{color:var(--gold);}
.status-pill.phase-shot{color:var(--shot);}
.status-pill.phase-delivered{color:var(--purple);}
.status-pill.phase-cancelled{color:var(--text-faint);}

/* 進行メーター+ステータスの融合枠(2026-09-01)。大きなストランドの後継 */
.phase-box{display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex:none;}
.mini-strand{display:flex; align-items:center;}
.mini-strand.cancelled{opacity:.35;}
.mini-strand .mdot{
  width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--hairline); background:transparent; box-sizing:border-box;
}
.mini-strand .mdot + .mdot{margin-left:16px; position:relative;}
.mini-strand .mdot + .mdot::before{
  content:""; position:absolute; right:calc(100% + 2px); top:50%; width:12px; height:1px;
  background:var(--hairline-soft); transform:translateY(-50%);
}
.mini-strand .mdot.done.phase-tentative,
.mini-strand .mdot.current.phase-tentative{background:var(--yellow); border-color:var(--yellow);}
.mini-strand .mdot.done.phase-unassigned,
.mini-strand .mdot.current.phase-unassigned{background:var(--red); border-color:var(--red);}
.mini-strand .mdot.done.phase-assigned,
.mini-strand .mdot.current.phase-assigned{background:var(--gold); border-color:var(--gold);}
.mini-strand .mdot.done.phase-shot,
.mini-strand .mdot.current.phase-shot{background:var(--shot); border-color:var(--shot);}
.mini-strand .mdot.done.phase-delivered,
.mini-strand .mdot.current.phase-delivered{background:var(--purple); border-color:var(--purple);}
.mini-strand .mdot.current{box-shadow:0 0 0 3px rgba(200,255,61,0.14);}

/* signature element: pearl-strand status line */
.strand{margin:0;}
.strand .line{display:flex; align-items:center; position:relative;}
.strand .line::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--hairline-soft); transform:translateY(-50%); z-index:0;
}
.strand .node-wrap{flex:1; display:flex; justify-content:center; position:relative; z-index:1;}
.strand .node{
  width:9px; height:9px; border-radius:50%; background:var(--bg); border:1px solid var(--hairline);
}
.strand .node.done.phase-tentative,
.strand .node.current.phase-tentative{background:var(--yellow); border-color:var(--yellow);}
.strand .node.done.phase-unassigned,
.strand .node.current.phase-unassigned{background:var(--red); border-color:var(--red);}
.strand .node.done.phase-assigned,
.strand .node.current.phase-assigned{background:var(--gold); border-color:var(--gold);}
.strand .node.done.phase-shot,
.strand .node.current.phase-shot{background:var(--shot); border-color:var(--shot);}
.strand .node.done.phase-delivered,
.strand .node.current.phase-delivered{background:var(--purple); border-color:var(--purple);}
.strand .node.current{box-shadow:0 0 0 4px rgba(201,169,97,0.15);}
.strand .labels{display:flex; margin-top:12px;}
.strand .labels span{flex:1; font-size:10px; color:var(--text-faint); text-align:center; letter-spacing:1px;}
.strand .labels span.current{color:var(--gold);}
.strand-note{font-size:10px; color:var(--text-faint); margin:12px 0 44px; letter-spacing:0.3px;}

.grid2{display:grid; grid-template-columns:1.3fr 1fr; gap:48px;}
/* 上段: 左=時間の帯(狭め)・右=基本情報(広め)(2026-09-01 依頼者指示)。
   高さを揃え、時間の行は縦に均等配分して収まりを合わせる */
.head-grid{margin-bottom:10px; align-items:stretch; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:36px;}
.head-grid > div{display:flex; flex-direction:column; min-width:0;}
.head-grid .time-strip{margin-bottom:0; flex:1;}
.head-grid .time-strip .t{flex:1; align-items:center;}
.head-grid .time-strip .tl{width:88px; letter-spacing:1.5px;}
.head-grid section.block{margin-bottom:0; flex:1;}
/* 2列が入らない幅では1列になるため、時間の帯は割り付けをやめてコンパクトに(2026-09-01) */
@media (max-width:980px){
  .head-grid{gap:20px;}
  .head-grid .time-strip{flex:none;}
  .head-grid .time-strip .t{flex:none; padding:7px 14px;}
  .head-grid .time-strip .tl{width:92px; font-size:12px;}
  .head-grid .time-strip .tv{font-size:15px;}
}
/* 「画面半分」で使うことが多い(14インチの半分≈800px前後)ため、
   2列が窮屈になる幅では早めに1列へ落とす */
@media (max-width:980px){.grid2{grid-template-columns:1fr; gap:36px;}}
/* 1列に落ちたとき(スマホ・画面半分)は、左右の列の中身を混ぜて
   「基本情報 → 決定事項 → 議事録ログ」の順に並べ替える(依頼者指示 2026-09-04)。
   上段の head-grid は時間の帯なのでそのまま */
@media (max-width:980px){
  .grid2:not(.head-grid){display:flex; flex-direction:column; gap:0;}
  .grid2:not(.head-grid) > div{display:contents;}
  .grid2:not(.head-grid) .b-basic{order:1;}
  .grid2:not(.head-grid) .b-times{order:2;}
  .grid2:not(.head-grid) .b-decisions{order:3;}
  .grid2:not(.head-grid) .b-minutes{order:4;}
  .grid2:not(.head-grid) .b-carta{order:5;}
}
@media (max-width:980px){
  header{padding:20px 24px;}
  main{padding:36px 24px 90px;}
}

section.block{margin-bottom:40px;}
section.block h2{
  font-size:10.5px; letter-spacing:3px; color:var(--text-faint); font-weight:400;
  margin:0 0 20px; padding-bottom:10px; border-bottom:2px solid var(--hairline-soft);
}

.kv{display:grid; grid-template-columns:88px 1fr; row-gap:16px; font-size:13px; font-weight:300;}
.kv dt{color:var(--text-faint); font-size:11px; letter-spacing:1px; padding-top:1px;}
.kv dd{margin:0; color:var(--text);}
.kv dd .hint{display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px;}
.kv a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-soft);}
.kv a:hover{color:var(--text);}

.minute{padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--hairline-soft);}
.minute:last-child{border-bottom:none; margin-bottom:0;}
.minute .mdate{font-size:11px; color:var(--text-faint); margin-bottom:12px; letter-spacing:1px;}
.minute .mdate .kind{color:var(--text-mute); margin-left:10px;}
.minute h3{font-family:var(--font); font-size:13px; margin:16px 0 6px; color:var(--gold-soft); font-weight:700;}
.minute h3:first-of-type{margin-top:0;}
.minute ul{margin:2px 0 0; padding-left:16px; font-size:13px; color:var(--text); line-height:1.8; font-weight:300;}
.minute p{margin:2px 0; font-size:13px; line-height:1.8; font-weight:300;}
/* 議事録の要約タイル(【見出し】ごとの小カード)と、決定・宿題・次回の色帯 */
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-top:6px;}
.mitem{background:var(--surface); border:1px solid var(--hairline-soft); border-radius:8px; padding:10px 12px 11px;}
.mitem .lbl{font-size:10px; color:var(--gold-soft); letter-spacing:1.5px; margin-bottom:5px; font-weight:700;}
.mitem .val{font-size:12.5px; line-height:1.7; font-weight:300;}
.callout{border-left:3px solid var(--hairline); background:var(--surface); border-radius:0 8px 8px 0; padding:10px 14px 11px; margin-top:10px;}
.callout .colbl{font-size:10px; letter-spacing:1.5px; font-weight:700; margin-bottom:4px;}
.callout p{margin:0; font-size:12.5px; line-height:1.7; font-weight:300;}
.co-decide{border-color:var(--gold);} .co-decide .colbl{color:var(--gold);}
.co-todo{border-color:var(--orange);} .co-todo .colbl{color:var(--orange);}
.co-next{border-color:var(--blue);} .co-next .colbl{color:var(--blue);}

.rawlink{font-size:10.5px; margin-top:14px; display:inline-block; color:var(--text-faint); border-bottom:1px solid var(--hairline); letter-spacing:0.5px;}
.rawlink:hover{color:var(--gold); border-color:var(--gold-soft);}

.btn{
  display:inline-block; margin-top:16px; font-size:11px; letter-spacing:2px;
  background:transparent; border:none; border-bottom:1px solid var(--gold); color:var(--gold);
  padding:4px 0; cursor:pointer; text-decoration:none; font-family:var(--font);
}
.btn:hover{color:var(--text); border-color:var(--text);}

.note{font-size:10.5px; color:var(--text-faint); text-align:center; margin-top:60px; letter-spacing:1px;}

/* ---------- Sales view ---------- */
.sales-head{padding-bottom:26px; border-bottom:2px solid var(--hairline-soft); margin-bottom:30px;}
.sales-eyebrow{font-size:11px; color:var(--text-faint); letter-spacing:2px; margin-bottom:10px;}
.sales-total{font-family:var(--font); font-size:44px; font-weight:700; color:var(--text);}
.sales-total .cur{font-size:24px; color:var(--gold-soft); margin-right:4px;}

.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline-soft); margin-bottom:40px; border:1px solid var(--hairline-soft);}
.stat{background:var(--bg); padding:20px;}
.stat-label{font-size:10.5px; color:var(--text-faint); letter-spacing:1px; margin-bottom:10px;}
.stat-num{font-family:var(--font); font-size:22px; font-weight:700;}
.stat-num.paid{color:var(--gold);}
.stat-num.invoiced{color:var(--text);}
.stat-num.pending{color:var(--text-mute);}
.stat-sub{font-size:11px; color:var(--text-faint); margin-top:6px;}

.sales-list{display:flex; flex-direction:column;}
.sales-row{
  display:grid; grid-template-columns:56px 1fr 110px 100px; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--hairline-soft); font-size:13px;
}
.sales-row:last-child{border-bottom:none;}
.s-date{color:var(--text-faint); font-size:12px;}
.s-name{color:var(--text);}
.s-amount{text-align:right; color:var(--text); font-weight:500;}
.s-status{font-size:10.5px; letter-spacing:0.5px; text-align:right;}
.s-status.done{color:var(--gold);}
.s-status.invoiced{color:var(--text-mute);}
.s-status.pending{color:var(--text-faint);}
@media (max-width:600px){
  .stat-row{grid-template-columns:1fr;}
  .sales-row{grid-template-columns:44px 1fr 90px; font-size:12px;}
  .s-status{display:none;}
}

/* ================= 追加(モックアップに無い画面・状態) ================= */

/* 接続設定 */
.gate{max-width:420px; margin:0 auto;}
.gate h1{font-size:20px; font-weight:700; letter-spacing:2px; margin:0 0 16px;}
.gate-lead{font-size:12px; color:var(--text-faint); line-height:1.9; margin:0 0 32px;}
.gate label{display:block; margin-bottom:22px;}
.gate label span{display:block; font-size:10.5px; color:var(--text-faint); letter-spacing:2px; margin-bottom:8px;}
.gate input{
  width:100%; background:var(--surface); border:1px solid var(--hairline-soft);
  color:var(--text); font-family:var(--font); font-size:13px; padding:11px 14px;
}
.gate input:focus{border-color:var(--gold-soft); outline:none;}
.gate-error{font-size:11.5px; color:var(--red); line-height:1.7; margin:0 0 20px;}
.btn-solid{
  appearance:none; border:none; background:var(--gold); color:#17151a;
  font-family:var(--font); font-size:12px; font-weight:500; letter-spacing:2px;
  padding:11px 28px; border-radius:999px; cursor:pointer;
}
.btn-solid:hover{filter:brightness(1.08);}

/* 読み込み中・エラー */
.state-msg{font-size:12px; color:var(--text-faint); letter-spacing:2px; text-align:center; padding:60px 0;}
.state-box{max-width:460px; margin:40px auto; text-align:center;}
.state-title{font-size:14px; color:var(--text); margin:0 0 14px; letter-spacing:1px;}
.state-detail{font-size:11.5px; color:var(--red); line-height:1.8; margin:0 0 26px; word-break:break-all;}
.state-actions{display:flex; gap:28px; justify-content:center;}
.state-actions .btn{margin-top:0;}
.state-note{font-size:10.5px; color:var(--text-faint); line-height:1.9; margin-top:36px;}

/* 案件ページ: フリーノート・変更履歴 */
.freenote{font-size:13px; line-height:1.9; font-weight:300; white-space:pre-wrap;}
.freenote .ndate{display:block; font-size:10.5px; color:var(--text-faint); letter-spacing:1px; margin-top:14px;}
.history-row{
  display:grid; grid-template-columns:120px 1fr; gap:6px 18px;
  padding:14px 0; border-bottom:1px solid var(--hairline-soft); font-size:12.5px; font-weight:300;
}
.history-row:last-child{border-bottom:none;}
.h-when{color:var(--text-faint); font-size:11px; letter-spacing:0.5px;}
.h-who{font-size:10px; color:var(--text-faint); letter-spacing:1px; margin-left:10px;}
.h-what{color:var(--text); line-height:1.7;}
.h-why{grid-column:2; font-size:11px; color:var(--text-faint); line-height:1.7;}
@media (max-width:600px){
  .history-row{grid-template-columns:1fr;}
  .h-why{grid-column:1;}
}

/* 空状態 */
.empty-line{font-size:11.5px; color:var(--text-faint); letter-spacing:0.5px; line-height:1.9;}

/* ---- 婚礼レイアウト(2026-08-24 依頼者指示) ---- */
.wed-date{font-size:13px; color:var(--text-mute); letter-spacing:1px; margin-bottom:10px;}
.wed-date b{color:var(--gold); font-weight:600;}
/* 両家名+二人の名前を1行に(折り返し可)。名前は苗字と同じ大きさ(依頼者指示 2026-09-01) */
.wed-h1{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; row-gap:6px;}
.wed-names{display:inline-flex; gap:14px; align-items:baseline; font-weight:inherit;}
.wed-name{font-size:inherit; letter-spacing:1px; white-space:nowrap;}
.wed-name ruby{letter-spacing:2px; ruby-align:center;}
.wed-name rt{font-size:8.5px; color:var(--gold-soft); letter-spacing:1.5px; font-weight:400;}
.est-badge{
  display:inline-block; font-size:8.5px; letter-spacing:1px; color:var(--yellow);
  border:1px solid var(--yellow); border-radius:2px; padding:0 4px; margin-left:7px;
  vertical-align:2px; font-weight:400;
}
h1 .est-badge{vertical-align:6px;}
/* 時間の帯: 縦に1行ずつ(依頼者指示 2026-09-01)。左=項目名・右=時刻・続けて注記 */
.time-strip{
  display:flex; flex-direction:column; gap:1px; background:var(--hairline-soft);
  border:1px solid var(--hairline-soft); margin:0 0 34px;
}
.time-strip .t{
  display:flex; align-items:baseline; gap:16px;
  background:var(--bg); padding:11px 16px;
}
.time-strip .tl{flex:none; width:118px; font-size:13px; color:var(--text); letter-spacing:2px; white-space:nowrap; font-weight:500;}
.time-strip .tv{font-size:17px; font-weight:600; color:var(--text); letter-spacing:0.5px; white-space:nowrap;}
.time-strip .tn{font-size:9.5px; color:var(--text-faint); line-height:1.5; min-width:0;}
@media (max-width:600px){
  .time-strip .t{padding:9px 12px; gap:10px;}
  .time-strip .tl{width:92px; letter-spacing:1px; font-size:12px;}
  .time-strip .tv{font-size:15px;}
  /* スマホでも両家名+名前を1行に収める(折り返さず、文字を縮めて入れる) */
  .wed-h1{flex-wrap:nowrap; gap:10px; overflow:hidden;}
  .wed-fam{font-size:18px; letter-spacing:0.5px; white-space:nowrap; flex:none;}
  .wed-names{gap:8px; flex:none;}
  .wed-name{font-size:18px; letter-spacing:0;}
  .wed-name ruby{letter-spacing:0.5px;}
  .wed-name rt{font-size:7px; letter-spacing:0.5px;}
  .wed-name .est-badge, .wed-fam .est-badge{font-size:7.5px; margin-left:4px; padding:0 3px;}
}

/* 案件ページのフェーズ: キャンセル */
.strand.cancelled{opacity:0.35;}

/* 売上の月切替 */
.sales-nav{display:flex; gap:22px; align-items:center; margin-top:14px;}
.sales-nav button{
  background:transparent; border:none; color:var(--text-faint);
  cursor:pointer; font-size:13px; font-family:var(--font); letter-spacing:1px; padding:0;
}
.sales-nav button:hover{color:var(--gold);}

/* 案件一覧(案件ページに直接来たとき) */
.case-picker{display:flex; flex-direction:column;}
.case-picker button{
  appearance:none; background:transparent; border:none; border-bottom:1px solid var(--hairline-soft);
  color:var(--text); font-family:var(--font); font-size:13px; text-align:left;
  padding:14px 0; cursor:pointer; display:grid; grid-template-columns:86px 1fr auto; gap:14px; align-items:center;
}
.case-picker button:hover{color:var(--gold);}
.case-picker .cp-date{color:var(--text-faint); font-size:12px;}
.case-picker .cp-phase{font-size:10px; letter-spacing:1px; color:var(--text-faint);}

@media (max-width:600px){
  /* Faro + 3タブを一列に収める。サブタイトルは幅を食うので隠す。
     ホーム画面から全画面起動すると時計・インカメラの下まで描画されるので、
     safe-area のぶんを常に空ける(カレンダー以外の画面でも必要) */
  header{
    flex-direction:row; align-items:center; gap:10px;
    padding:12px 12px;
    padding-top:max(12px, env(safe-area-inset-top));
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  main{padding-bottom:max(80px, env(safe-area-inset-bottom));}
  .brand{gap:8px;}
  .brand .sub{display:none;}
  .brand .mark{height:23px;}
  .brand .word{font-size:12px; letter-spacing:0.22em; padding-left:0.22em;}
  nav.tabs{flex:1; min-width:0; padding:3px;}
  nav.tabs button{flex:1; padding:8px 2px; font-size:10.5px; letter-spacing:0; white-space:nowrap;}

  /* カレンダーは画面いっぱいに使う。両端の余白のぶんだけ文字が入る */
  main{padding:0 0 80px;}
  .cal-head{flex-wrap:wrap; gap:10px; margin:14px 0 10px; padding:0 14px;}
  .cal-head .month{font-size:23px;}
  .cal-head .year{font-size:11px;}
  .cal-nav{gap:16px;}
  .cal-nav button{white-space:nowrap; font-size:12px;}
  .legend{padding:0 14px; margin-top:20px;}

  /* 罫線を1pxに落とし、コマを高くして予定を3〜4件見せる(Googleカレンダー相当) */
  .cal-grid{border-top-width:1px; border-left-width:1px;}
  .cal-dow{border-right-width:1px; border-bottom-width:1px; padding:5px 0; letter-spacing:1px;}
  .cal-cell{height:112px; padding:5px 0; border-right-width:1px; border-bottom-width:1px;}

  /* スマホでは画面端まで使い、凡例は省く(1画面に収めるため) */
  body.on-calendar main{padding:0;}
  /* 下に固定したタブバー(アイコン44px+上下の余白+ホームバー)のぶんを空ける。
     ここを safe-area だけにすると、最終週のコマがタブバーに隠れて見えなくなる
     (依頼者指摘 2026-09-25)。main側の padding-bottom は上の行で0にしているので、
     カレンダーではこの1行が唯一の逃げ場になる */
  body.on-calendar .cal-grid{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  body.on-calendar .legend{display:none;}
  .cell-top{padding:0 4px;}
  .cal-cell .daynum{font-size:13px;}
  .cal-cell .rokuyo{font-size:8.5px;}
  .holiday-label{padding:0 4px; font-size:8.5px;}
  .case-chip{margin-top:3px; padding:9px 8px 9px 5px; font-size:10px; line-height:1.25;}
  /* 幅が無いので「未送付」は文字ではなく赤い点で示す(文字に重ねない) */
  .chip-badge{
    font-size:0; padding:0; width:5px; height:5px; border-radius:50%;
    background:var(--red); border:none; right:2px;
  }
  .case-chip.has-badge{padding-right:11px;}
  /* 右上は六曜の場所。今日の点は消し(日付が黄緑で分かる)、重複の点は左下へ逃がす */
  .cal-cell.today::after{display:none;}
  .cal-cell.conflict::before{top:auto; bottom:5px; right:auto; left:5px;}

  /* カレンダー以外は画面端に張り付くと読みにくいので余白を戻す */
  #view-case, #view-sales, #view-gate, #view-error, #view-loading{padding:36px 16px 0;}

  .case-header{flex-direction:column; align-items:flex-start; gap:14px;}
  .strand .labels span{font-size:8.5px; letter-spacing:0;}
  .sales-nav{gap:16px;}
  .sales-nav button{white-space:nowrap; font-size:12px;}
}

/* 案件ページ内の切り替えタブ(案件情報/撮影用進行表 2026-08-27) */
.case-tabs{display:flex; gap:4px; margin:18px 0 22px; background:var(--surface);
  padding:4px; border-radius:999px; border:1px solid var(--hairline-soft); width:fit-content;}
.case-tab{
  appearance:none; border:none; background:transparent; color:var(--text-mute);
  padding:8px 20px; border-radius:999px; font-size:12px; font-weight:500;
  font-family:var(--font); cursor:pointer; transition:all .15s ease; letter-spacing:1.5px;
}
.case-tab.active{background:var(--gold); color:#17151a;}
.runsheet-frame{
  display:block; width:100%; height:calc(100vh - 210px); min-height:420px;
  border:1px solid var(--hairline-soft); border-radius:12px; background:#fff;
}
.runsheet-hint{color:var(--text-mute); font-size:11px; margin-top:8px;}

/* オフライン表示の警告帯(2026-08-27)。古い予定を最新と誤認させないため目立たせる */
#offlineBanner{
  position:sticky; top:0; z-index:50;
  background:#b8860b; color:#17151a;
  padding:9px 16px; font-size:12.5px; font-weight:700; text-align:center;
  letter-spacing:0.4px; line-height:1.5;
}

/* 「最新を確認中…」(2026-09-01)。写しを先に表示している間だけ出す控えめな目印 */
#checkingBadge{
  position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:60;
  background:rgba(23,21,26,0.88); color:var(--text-mute);
  border:1px solid var(--hairline-soft); border-radius:999px;
  padding:4px 14px; font-size:11.5px; letter-spacing:0.5px;
  pointer-events:none;
}

/* ================================================================
   「灯台の夜」テーマ(2026-08-28・依頼者とプレビューで詰めたデザイン刷新)
   夜の海の背景 / 今日が灯台のように光る / 帯はガラス+くっきりした色のフチ /
   予定の無い日は一段引っ込める / 角丸は控えめ。
   このセクションはファイル末尾に置き、上の初版スタイルを上書きする。
   ================================================================ */

/* 背景は初版の黒のまま(依頼者指示 2026-08-28) */

/* --- カレンダー --- */
.cal-grid{border:none; gap:6px;}
.cal-dow{border:none;}
.cal-cell{
  border:1px solid rgba(255,255,255,0.07); border-radius:6px;
  background:rgba(255,255,255,0.028);
}
/* 予定の無い日は一段引っ込める(予定のある日が前に出て見える) */
.cal-cell:not(:has(.case-chip)){background:rgba(255,255,255,0.012); border-color:rgba(255,255,255,0.045);}
.cal-cell:not(:has(.case-chip)) .daynum{color:var(--text-faint); font-weight:400;}
.cal-cell.empty{background:transparent; border-color:transparent;}
.cal-cell.today{box-shadow:0 0 0 1.5px rgba(255,255,255,0.92), 0 0 26px rgba(255,255,255,0.26);}
.cal-head .month{
  background:linear-gradient(135deg,#f3ffd0,#c8ff3d 60%,#8fb82c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.more-mark{background:var(--bg);}

/* 帯: ガラス(半透明)+原色のくっきりしたフチ。マスの端から端まで */
.case-chip{border-radius:0; margin:6px 0 0; font-weight:700; backdrop-filter:blur(4px);}
.case-chip.phase-tentative{background:rgba(224,192,74,0.16); color:#eddfa8; border:1px solid var(--yellow);}
.case-chip.phase-unassigned{background:rgba(209,89,74,0.16); color:#f0b0a6; border:1px solid var(--red);}
.case-chip.phase-assigned{background:rgba(200,255,61,0.14); color:#dcff8a; border:1px solid var(--gold);}
.case-chip.phase-shot{background:rgba(217,232,176,0.12); color:#dde8c2; border:1px solid var(--shot);}
.case-chip.kind-private{background:rgba(109,147,201,0.18); color:#b8cdec; border:1px solid var(--blue);}
.case-chip.kind-meeting{background:rgba(255,61,154,0.14); color:#f5a7cd; border:1px solid var(--pink);}
.case-chip.kind-delivery{background:rgba(163,116,201,0.16); color:#d3b8ec; border:1px solid var(--purple);}
.span-bar{border-radius:5px;}

/* --- 案件ページ・売上: 各ブロックを同じガラスのカードに --- */
section.block{
  background:rgba(255,255,255,0.028); border:1px solid rgba(255,255,255,0.07);
  border-radius:8px; padding:22px 24px; margin-bottom:22px;
}
section.block h2{border-bottom:1px solid rgba(255,255,255,0.08);}
.case-header{border-bottom:1px solid rgba(255,255,255,0.08);}
.time-strip .t{
  background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.09); border-radius:6px;
}
.runsheet-frame{border:1px solid rgba(255,255,255,0.12);}

/* 承認画面の埋め込み(2026-08-28) */
.approve-frame{
  display:block; width:100%; height:calc(100vh - 200px); min-height:420px;
  border:1px solid rgba(255,255,255,0.12); border-radius:8px; background:#fff;
}

/* 引っ張って更新の案内(2026-08-28) */
#pullHint{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60;
  background:var(--gold); color:#17151a; font-size:12px; font-weight:700;
  padding:8px 16px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,0.4);
  pointer-events:none; white-space:nowrap;
}

/* カレンダー直接入力シート(2026-08-28) */
.entry-overlay{
  position:fixed; inset:0; z-index:70; background:rgba(10,9,12,0.6);
  display:flex; align-items:flex-end; justify-content:center;
}
.entry-sheet{
  width:100%; max-width:560px; max-height:86vh; overflow-y:auto;
  background:#211f26; border:1px solid rgba(255,255,255,0.12); border-bottom:none;
  border-radius:14px 14px 0 0; padding:20px 22px calc(24px + env(safe-area-inset-bottom));
}
.entry-sheet h3{margin:0 0 14px; font-size:15px; font-weight:700;}
.entry-tabs{display:flex; gap:4px; background:var(--bg); padding:4px; border-radius:999px;
  width:fit-content; margin-bottom:16px;}
.entry-tab{appearance:none; border:none; background:transparent; color:var(--text-mute);
  padding:7px 18px; border-radius:999px; font-size:12px; font-weight:500;
  font-family:var(--font); cursor:pointer;}
.entry-tab.active{background:var(--gold); color:#17151a;}
.ef{display:block; margin-bottom:12px;}
.ef-l{display:block; font-size:10.5px; color:var(--text-faint); letter-spacing:1px; margin-bottom:5px;}
.ef input, .ef select{
  width:100%; box-sizing:border-box; background:var(--bg); color:var(--text);
  border:1px solid var(--hairline-soft); border-radius:6px; padding:10px 12px;
  font-size:16px; font-family:var(--font);  /* 16px未満だとiPhoneが自動ズームする */
}
.entry-msg{font-size:12px; color:var(--gold); min-height:18px; margin:10px 0 2px; line-height:1.6;}
.entry-msg.err{color:var(--red);}
.entry-actions{display:flex; gap:10px; margin-top:10px;}
.entry-btn{
  flex:1; appearance:none; border:1px solid var(--hairline-soft); background:transparent;
  color:var(--text-mute); border-radius:8px; padding:12px; font-size:13px;
  font-family:var(--font); cursor:pointer;
}
.entry-btn.primary{background:var(--gold); color:#17151a; font-weight:700; border-color:var(--gold);}
.entry-btn:disabled{opacity:0.6;}

/* 完了トースト */
#toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:80;
  background:var(--gold); color:#17151a; font-size:12.5px; font-weight:700;
  padding:10px 18px; border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,0.45);
  max-width:86vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 承認URLの変更ボタン(2026-08-29) */
.approve-change{
  margin-top:10px; appearance:none; background:transparent; border:none;
  color:var(--text-faint); font-size:11px; font-family:var(--font);
  cursor:pointer; text-decoration:underline; padding:4px 0;
}
.approve-change:hover{color:var(--gold);}

/* ================================================================
   「灯台の夜 × Cupertino」ガラス質感(2026-08-29・依頼者が見本[案A]を承認)
   Appleの作法(SF系フォントは既定・角丸12px・44pxタップ領域・すりガラス)を
   「灯台の夜」の配色のまま重ねる。このセクションは末尾で全体を上書きする。
   ================================================================ */

/* 背景: 基調色はそのまま+灯台の淡い色付きの光(依頼者指示 2026-08-29: 色付き光は維持) */
body{
  background:
    radial-gradient(480px 340px at 85% -6%, rgba(200,255,61,0.10), transparent 65%),
    radial-gradient(560px 460px at -12% 28%, rgba(109,147,201,0.10), transparent 60%),
    radial-gradient(520px 420px at 55% 110%, rgba(163,116,201,0.07), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* --- カレンダーのマス: 磨りガラス --- */
.cal-cell{
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
  border:0.5px solid rgba(255,255,255,0.13);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
}
.cal-cell:not(:has(.case-chip)){
  background:rgba(255,255,255,0.014); border-color:rgba(255,255,255,0.055);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:none;
}
.cal-cell.empty{background:transparent; border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;}
/* フェーズ色の枠+今日の発光は「灯台の夜」のまま(box-shadowを足し合わせる) */
.cal-cell.phase-tentative{box-shadow:inset 0 0 0 1px var(--yellow), inset 0 1px 0 rgba(255,255,255,0.07);}
.cal-cell.phase-unassigned{box-shadow:inset 0 0 0 1px var(--red), inset 0 1px 0 rgba(255,255,255,0.07);}
.cal-cell.phase-assigned{box-shadow:inset 0 0 0 1px var(--gold), inset 0 1px 0 rgba(255,255,255,0.07);}
.cal-cell.phase-shot{box-shadow:inset 0 0 0 1px var(--shot), inset 0 1px 0 rgba(255,255,255,0.07);}
.cal-cell.today{box-shadow:0 0 0 1.5px rgba(255,255,255,0.92), 0 0 26px rgba(255,255,255,0.26), inset 0 1px 0 rgba(255,255,255,0.07);}

/* 今日: iOS流の「丸に反転した日付」(右上の点は役目を終えたので消す) */
.cal-cell.today .daynum{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; padding:0 4px; border-radius:12px;
  background:#fff; color:#17151a; font-weight:800;
}
.cal-cell.today::after{display:none;}

/* --- 帯: マス幅いっぱい+すりガラス。つや(上端の光)は外す(依頼者指示 2026-08-29:
   グラデーションがうるさい) --- */
.case-chip{
  border-radius:0; margin-left:0; margin-right:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:none;
}
.span-bar{border-radius:5px;}

/* --- 月送りボタン: 44pxのガラスの丸(Appleのタップ領域基準) --- */
.cal-nav{gap:10px;}
.cal-nav button{
  min-width:44px; height:44px; border-radius:22px; padding:0 14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045));
  border:0.5px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
  color:var(--text-mute);
}
.cal-nav button:hover{color:var(--gold);}

/* --- 案件・売上のカードも同じガラスに --- */
section.block{
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border:0.5px solid rgba(255,255,255,0.11);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius:12px;
}

/* --- タブ: スマホでは下のすりガラスタブバー(iOSの作法) --- */
nav.tabs button svg{display:none; width:24px; height:24px;}
@media (max-width:700px){
  /* 注意: backdrop-filterを持つ祖先はfixed要素の基準になってしまうため、
     スマホではヘッダーのぼかしを外す(ほぼ不透明なので見た目は変わらない) */
  header{padding-bottom:2px; backdrop-filter:none; -webkit-backdrop-filter:none;}
  nav.tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; gap:0; margin:0; border-radius:0; border:none;
    background:rgba(23,21,26,0.55);
    backdrop-filter:blur(28px) saturate(1.8);
    -webkit-backdrop-filter:blur(28px) saturate(1.8);
    border-top:0.5px solid rgba(255,255,255,0.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
    padding:6px 6px calc(8px + env(safe-area-inset-bottom));
  }
  nav.tabs[hidden]{display:none;}
  nav.tabs button{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:transparent; color:#8a8694; font-size:10px; letter-spacing:0.5px;
    padding:6px 0 2px; border-radius:0; min-height:44px;
  }
  nav.tabs button svg{display:block;}
  nav.tabs button.active{background:transparent; color:var(--gold);}
  main{padding-bottom:120px;}
  /* 承認バッジはアイコンの右肩へ */
  nav.tabs button{position:relative;}
  #approveBadge{position:absolute; top:0; right:calc(50% - 22px); transform:translateX(100%);}

  /* 帯の文字: スマホでは折り返して読めるようにする(1行で「舵…」と切れる問題)。
     横幅はマスいっぱいに使う(依頼者指示 2026-08-29) */
  .case-chip{
    white-space:normal; word-break:break-all; text-overflow:clip;
    font-size:10px; line-height:1.3; padding:5px 3px; font-weight:700;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    margin-left:0; margin-right:0; border-radius:0;
    /* ぼかしがマスの光る枠を吸い込んで端だけ明るくなる(依頼者指摘)。スマホは切る */
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .cal-cell{height:auto; min-height:96px; padding-bottom:6px;}
  .cal-cell .daynum{font-size:13px;}
  .cal-cell .rokuyo{display:none;}
}

/* ===== 売上ページ: 見通し(推定込み)の表示(2026-09-01) ===== */
.sales-mix{font-size:12.5px; color:var(--text-mute); margin-top:2px; letter-spacing:.02em;}
.s-est{font-size:11px; opacity:.65; margin-left:4px; font-weight:400;}
.sales-unknown .empty-line{font-size:12.5px;}