/* とさやま 事務自動化システム 共通テーマ
   コンセプト：温かみ・農・親しみ・統一感
   - 背景：クリーム / 主役：セージグリーン / アクセント：オレンジ / 補助：ベージュ
   色を変えたいときは、この :root の値を変えれば全画面に反映されます。 */
:root{
  --cream:#faf4ec;        /* ページ背景：温かいクリーム */
  --green:#9cbf94;        /* セージグリーン：ヘッダー・主役 */
  --green-deep:#6b9d63;   /* 濃い緑：見出し・グラフ・強調 */
  --action:#4ba36d;       /* 主要ボタン・アクティブタブ：優しく目立つ若葉の緑 */
  --action-deep:#3c8b58;  /* その押下・ホバー：一段落ち着いた緑 */
  --orange:#e69150;       /* オレンジ：アクセント・主要ボタン */
  --orange-deep:#d97d2e;  /* 濃いオレンジ：ホバー・押下 */
  --terracotta:#c0563f;   /* 録音中など注意の赤茶 */
  --beige:#ece4d8;        /* ベージュ：パネル・グラフの土台 */
  --beige-line:#ddd0bf;   /* やわらかい罫線 */
  --ink:#4a4138;          /* 文字：温かいダークブラウン */
  --ink-soft:#8a7e70;     /* 補助文字 */
  /* 入力例（placeholder）の色。**本文よりはっきり薄く**する（ユーザー指示・2026-08-01）。
     現場から「入力例が濃すぎて、もう入力されているように見間違える」と報告があった。
     入力済みの文字（--ink #4a4138）と見分けがつく明るさにすること。
     ★--ink-soft（補助文字）を流用しないこと＝補助文字は「読ませる文字」なので濃く、
       入力例と同じ濃さにすると、また入力済みに見える。
     ★薄さの下限は**入力欄の地色＝白**との対比で見る（ページ背景のクリームではない）。
       入力欄は白なので、白に対して薄すぎると入力例そのものが読めなくなる。
       いまの値は白に対して約 1.6:1（＝ぎりぎり読めて、入力済みには見えない）。
       2026-08-01 の1回目は #bdb3a6（約 2.1:1）にしたが「まだ濃い」と再指摘を受けた。 */
  --placeholder:#d2c9be;
  --card:#ffffff;         /* カード */
  /* 本文（main）の幅。業務タブの帯（.areabar-inner）が、この幅で中身をそろえる＝
     タブの左端と、下のカードの左端が一直線になる。いちばん多くの画面が 1040px を
     使っているので既定値にしてある。違う幅の画面は、その画面の <style> の中で
     `:root{ --content-max:1120px; }` のように上書きする。 */
  --content-max:1040px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 2px 12px rgba(120,95,60,.10);
  --font:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font); -webkit-text-size-adjust:100%;
}

/* 入力例（placeholder）は、入力済みの文字と**はっきり見分けがつく薄さ**にする。
   【なぜ・2026-08-01 現場からの指摘】ブラウザ既定の入力例は濃く、
   「例：土佐山ジンジャーエール辛口」が**すでに入力された値**に見えてしまう。
   そのまま保存したつもりで空欄のまま進む／逆に消そうとして手が止まる。
   ★全画面の入力欄に効かせるため、ここ1か所で指定する（画面ごとに書かない）。
   ★色を濃く戻さないこと。薄いほうが「まだ入っていない」と一目で分かる。 */
input::placeholder, textarea::placeholder{ color:var(--placeholder); opacity:1; }
/* 古いブラウザ・WebKit 向け（opacity:1 を付けないと Firefox で薄くなりすぎる） */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color:var(--placeholder); }
input::-moz-placeholder, textarea::-moz-placeholder{ color:var(--placeholder); opacity:1; }

/* ===== 共通：上部の機能メニュー（ナビ） ===== */
/* ヘッダー〜「確認・決裁待ち」を上部に固定。スクロールしても表示し続ける。
   背景をクリームにして、確認・決裁待ちカードの余白から本文が透けないようにする。 */
.stickytop{ position:sticky; top:0; z-index:100; background:var(--cream); }
.topbar{
  /* 白背景にして、ロゴ（ゆず・山・文字）をはっきり見せる。
     温かみのある細い下線＋やわらかい影でクリーム背景と上品に分ける。 */
  background:#fff; color:var(--ink); padding:15px 16px;
  display:flex; align-items:center; gap:12px; position:relative; flex-wrap:wrap;
  border-bottom:1px solid var(--beige-line); box-shadow:0 1px 8px rgba(120,95,60,.06);
}
/* ブランド（ロゴマーク＋ロゴタイプ）。クリックでトップページへ。
   レイアウトは a/span どちらでも効くよう .brand に当てる（HTML差異への保険）。 */
.topbar .brand{ margin-right:auto; min-width:0;
  display:inline-flex; align-items:center; gap:13px; text-decoration:none; }
.topbar a.brand{ cursor:pointer; }
.topbar a.brand:hover{ opacity:.82; }
.topbar .brand-logo{ height:51px; width:auto; display:block; flex:0 0 auto; }
.topbar .brand-text{ display:inline-flex; flex-direction:column; line-height:1.12; min-width:0; }
.topbar .brand-name{ font-weight:bold; font-size:1.55rem; color:var(--ink); white-space:nowrap; }
.topbar .brand-sub{ font-size:1rem; font-weight:600; color:#6f6052;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .menu{ display:flex; align-items:center; gap:8px; }
/* 機能タグ（丸いチップ風）。白ヘッダーでも見えるようクリーム地＋やわ罫線 */
.topbar .menu a{
  display:inline-block; text-decoration:none; color:var(--ink);
  background:var(--cream); padding:7px 14px; border-radius:999px;
  font-size:.9rem; font-weight:bold; white-space:nowrap; border:1px solid var(--beige-line);
}
.topbar .menu a:hover{ background:#fff; border-color:var(--green); }
.topbar .menu a.active{ background:var(--action); color:#fff; }
.topbar .menu a.logout{
  background:transparent; color:var(--ink); font-weight:normal;
  text-decoration:underline; padding:7px 6px;
}
/* ハンバーガー（スマホでのみ表示） */
.hamburger{
  display:none; background:var(--cream); border:1px solid var(--beige-line); color:var(--ink);
  font-size:1.3rem; line-height:1; padding:6px 13px; border-radius:10px; cursor:pointer;
}

/* ===== 右上「設定」ボタンと設定メニュー ===== */
.settingsbtn{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap;
  background:var(--cream); color:var(--ink); border:1px solid var(--beige-line);
  padding:7px 14px; border-radius:999px; font-size:.9rem; font-weight:bold; flex:0 0 auto;
}
.settingsbtn:hover{ background:#fff; border-color:var(--green); }
/* 開かれる設定メニュー（右上から下に開くパネル）
   ★項目が多い（管理者は10項目＋ユーザー表示＋ログアウトで約600px）ため、必ず
   「画面内に収めて中でスクロール」させる。トップバーは position:sticky の中にあり、
   はみ出した分はページを下にスクロールしても出てこない（＝下の項目やログアウトが
   永久に押せなくなる）。max-height を viewport 基準にし、縦だけスクロール可にする。
   角丸を保つため横方向は hidden のまま。ハンバーガーの .menu と同じ考え方。 */
.settingsmenu{
  display:none; position:absolute; top:100%; right:10px; margin-top:6px;
  flex-direction:column; min-width:230px; max-width:calc(100vw - 20px);
  background:#fff; border:1px solid var(--beige-line); border-radius:14px;
  box-shadow:var(--shadow); z-index:80; padding:8px;
  /* 96px ＝ トップバーの高さ（ロゴ51 + 余白30 + 罫線1）＋ margin-top 6 ＋ 余裕8。
     dvh はスマホのアドレスバーを除いた「実際に見えている高さ」。vh だとバーの裏まで
     含むため、スマホで下がはみ出す。dvh 非対応のブラウザは上の vh 行を使う（保険）。 */
  max-height:calc(100vh - 96px);
  max-height:calc(100dvh - 96px);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
}
/* 縦に詰まった時、flexが項目を押しつぶして読めなくなるのを防ぐ（スクロールさせる） */
.settingsmenu > *{ flex:0 0 auto; }
.settingsmenu.open{ display:flex; }
.settingsmenu .sm-title{
  font-size:.76rem; font-weight:bold; color:var(--ink-soft);
  padding:6px 10px 8px; border-bottom:1px solid var(--beige);
}
.settingsmenu .sm-item{
  display:block; text-decoration:none; color:var(--ink);
  padding:12px; border-radius:9px; font-size:.95rem; font-weight:bold; margin-top:4px;
}
.settingsmenu .sm-item:hover{ background:var(--cream); }
.settingsmenu .sm-item.active{ background:var(--green); color:#fff; }
.settingsmenu .sm-logout{
  margin-top:8px; padding:12px; border:none; border-top:1px solid var(--beige);
  background:transparent; color:var(--terracotta); font-weight:bold; font-size:.95rem;
  cursor:pointer; text-align:center; width:100%;
}
.settingsmenu .sm-logout:hover{ background:#fbeae5; }
/* ログイン中のユーザー表示（設定メニュー内） */
.settingsmenu .sm-user{
  padding:8px 10px; font-size:.9rem; font-weight:bold; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-bottom:1px solid var(--beige);
}
.settingsmenu .sm-user .sm-role{
  font-size:.72rem; font-weight:bold; color:#fff; background:var(--green-deep);
  border-radius:6px; padding:2px 8px;
}

/* ===== ヘッダー常設の「指示する」バー＋提案パネル ===== */
/* 窓口AI（ユメジム）への指示入力を全ページのヘッダーに常設する（役割②）。
   送信すると、設定メニューと同じ「ヘッダーから下に開くパネル」で提案（確認・許可）を出す。
   意匠は旧トップページの「指示する」カードから引き継ぐ（.prop 系）。JS＝nav.js。 */
/* バーがある（＝ログイン中）ときは、ブランドの margin-right:auto を解除して
   入力バーに横幅を譲る（auto のままだと余白がバーの伸びしろを食う）。 */
.topbar.has-inst .brand{ margin-right:12px; }
/* 入力枠を土台にして、その中（右端）に GO を重ねて置く（＝検索窓風）。
   GO・マイクは position:absolute で枠の中に浮かせ、textarea 側は右に余白を空けて
   文字がボタンに潜り込まないようにする。 */
.instbar{ position:relative; flex:1 1 300px; min-width:0; }
.instbar .inst-input{
  width:100%; box-sizing:border-box; resize:none; font-family:inherit;
  /* 高さは全ページで統一（＝トップ／各業務ページで同じ大きさ）。
     ★min-height も指定する：これが無いと、ページ側の一般規則（例 dashboard の
       textarea{min-height:120px}）が効いて、トップだけ極端に縦長になる不具合が出る。
       .instbar .inst-input は具体度が高いので、この3つを揃えれば各ページに勝てる。 */
  height:46px; min-height:46px; max-height:46px; overflow-y:auto;
  padding:11px 68px 11px 16px;              /* 右＝GOのぶんの余白 */
  font-size:.95rem; line-height:1.4; color:var(--ink);
  /* ★角丸は控えめの角丸長方形にする（ピル＝半径25pxにすると、丸まった角に
     GOの角がはみ出して「枠と重なって」見える）。半径13pxなら右辺に直線部分が
     残り、GOが枠の中にきれいに収まる。 */
  border:1.5px solid var(--beige-line); border-radius:13px; background:var(--cream);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.instbar .inst-input:focus{ outline:none; border-color:var(--green); background:#fff;
  box-shadow:0 0 0 3px rgba(129,178,154,.25); }
/* GO：入力枠の中・右端に浮かせる。角丸カプセル＋緑のグラデーション＋やわらかい影で
   「押せる」感じを上品に出す（ユーザー指示・センス良く／2026-07-25）。 */
.instbar .instgo{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  height:32px; padding:0 16px; border:none; border-radius:9px; cursor:pointer;
  font-weight:bold; font-size:.9rem; letter-spacing:.08em; color:#fff;
  background:linear-gradient(135deg, var(--green) 0%, var(--green-deep) 58%, var(--action-deep) 100%);
  box-shadow:0 2px 6px rgba(60,120,70,.35);
  transition:box-shadow .15s, filter .15s, transform .05s;
}
.instbar .instgo:hover{ filter:brightness(1.06); box-shadow:0 4px 11px rgba(60,120,70,.45); }
.instbar .instgo:active{ filter:brightness(.98); box-shadow:0 1px 3px rgba(60,120,70,.4); }
.instbar .instgo:disabled{ opacity:.55; cursor:default; box-shadow:none; filter:none; }
/* マイク（音声入力）＝スマホのみ表示（PCは文字入力のみ、という従来方針を踏襲）。
   SpeechRecognition 非対応の端末では nav.js が hidden にする。GO の左隣・枠の中に置く。 */
.instbar .instmic{
  display:none; position:absolute; right:70px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--beige-line); border-radius:50%; background:#fff;
  cursor:pointer; font-size:1rem; line-height:1;
}
.instbar .instmic.recording{ background:var(--terracotta); border-color:var(--terracotta); }

/* 提案パネル（ヘッダーから下に開く・設定メニューと同じ考え方） */
.instpanel{
  display:none; position:absolute; top:100%; right:10px; margin-top:6px;
  width:min(560px, calc(100vw - 20px));
  background:#fff; border:1px solid var(--beige-line); border-radius:14px;
  box-shadow:var(--shadow); z-index:90; padding:16px 16px 12px;
  max-height:calc(100vh - 96px);
  max-height:calc(100dvh - 96px);
  overflow-y:auto; overscroll-behavior:contain;
}
.instpanel.open{ display:block; }
.instpanel-close{
  position:absolute; top:8px; right:10px; border:none; background:transparent;
  color:var(--ink-soft); font-size:1.05rem; cursor:pointer; line-height:1; padding:4px 6px;
}
.instpanel-close:hover{ color:var(--ink); }
.instpanel-more{ text-align:center; font-size:.85rem; margin:12px 0 0; }
.instpanel-more a{ color:var(--green-deep); font-weight:bold; text-decoration:none; }
.instpanel-more a:hover{ text-decoration:underline; }
.instpanel .voicehint{ font-size:.82rem; color:var(--ink-soft); }
.instpanel .voicehint:empty{ display:none; }
.instpanel .status{ padding:12px; border-radius:var(--radius-sm); text-align:center; font-weight:bold; margin-top:10px; display:none; }
.instpanel .status.ok{ background:#e8f0e2; color:var(--green-deep); display:block; }
.instpanel .status.err{ background:#f7e4dc; color:var(--terracotta); display:block; }
/* 取り込みからの案内（📎 …を「指示する」に反映しました）と、学習のひとこと */
.instpanel .imported-note{ font-size:.85rem; color:var(--ink); background:#f3f7f1;
  border:1px solid #d7e6cf; border-radius:10px; padding:10px 12px; margin-top:10px; }
.instpanel .learned-note{ margin-top:8px; font-size:.82rem; color:var(--ink-soft); line-height:1.6;
  background:#fdf7ea; border:1px solid #f0e2c2; border-radius:10px; padding:9px 11px; }
/* 提案カード（旧トップページの .prop 系を、そのままパネル内に移設） */
.instpanel .prop{ border:1px solid var(--beige-line); border-left:6px solid var(--orange); border-radius:12px;
  padding:14px 16px; margin-top:10px; background:#fffdf9; }
.instpanel .prop .route{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.instpanel .badge{ display:inline-block; background:var(--green); color:#fff; border-radius:6px; padding:3px 11px; font-size:.82rem; font-weight:bold; }
.instpanel .badge.area{ background:var(--orange); }
.instpanel .arrow{ color:var(--ink-soft); font-weight:bold; }
.instpanel .conf{ font-size:.78rem; color:var(--ink-soft); }
.instpanel .prop .draft{ white-space:pre-wrap; font-size:.98rem; line-height:1.6; color:var(--ink); background:#fff;
  border:1px solid var(--beige); border-radius:10px; padding:12px 14px; margin:6px 0 12px; }
.instpanel .acts{ list-style:none; padding:0; margin:0 0 8px; }
.instpanel .acts li{ padding:8px 0; border-top:1px dashed var(--beige-line); }
.instpanel .acts a{ color:var(--green-deep); font-weight:bold; text-decoration:none; }
.instpanel .acts a:hover{ text-decoration:underline; }
.instpanel .acts .adesc{ display:block; font-size:.82rem; color:var(--ink-soft); margin-top:2px; }
.instpanel .approve-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.instpanel .btn{ border:none; border-radius:var(--radius-sm); font-weight:bold; cursor:pointer; }
.instpanel .btn-ok{ flex:1; min-width:160px; padding:14px; color:#fff; background:var(--green-deep); font-size:1rem; }
.instpanel .btn-no{ flex:1; min-width:120px; padding:14px; color:var(--ink); background:var(--beige); font-size:1rem; }
.instpanel .confirm-note{ font-size:.82rem; color:#8a5a00; background:#fff4e5; border-radius:8px; padding:9px 12px; margin-top:10px; }

/* スマホ：指示バーは独立した行（幅いっぱい）に落とす。トップバーは 640px 以下で
   flex-wrap:nowrap になるため、has-inst のときだけ wrap を許して 2行目に回す。
   1行目＝ブランド＋ハンバーガー＋設定（従来どおり）／2行目＝指示バー。 */
@media (max-width:640px){
  .topbar.has-inst{ flex-wrap:wrap; }
  .topbar.has-inst .brand{ margin-right:12px; }
  .instbar{ order:5; flex-basis:100%; margin-top:10px; }
  .instbar .instmic{ display:inline-flex; }
  .instbar .inst-input{ padding-right:108px; }   /* マイク＋GO のぶんの余白 */
  .instpanel{ left:10px; right:10px; width:auto; }
}

/* 保存先の注意書き（スプレッドシートを読めずローカルで代替表示したとき） */
.storage-warn{ color:var(--orange-deep); font-weight:bold; }

/* ===== ナビ下の「確認・決裁待ち」お知らせ通知バー ===== */
/* 「確認・決裁待ち」バナー。浮いて見えるカード風で目立たせるが、
   彩度は抑え、点滅アニメは使わない（表示時に一度だけふわっと出るのみ）。 */
/* 本番設定の警告バー（初期パスワードのまま・DATA_DIR未設定など）。
   ふだんは出ない。出たら管理者が直すまで全画面の上部に残る。 */
.safetybar{
  margin:12px 16px; padding:12px 16px;
  background:#fdecea; border:1px solid #f5c6c0; border-left:5px solid #c0392b;
  border-radius:var(--radius); color:#8a2018;
}
.safetybar .sb-head{ font-weight:bold; font-size:.95rem; margin-bottom:6px; }
.safetybar .sb-item{ padding:6px 0; border-top:1px dashed #f0cfca; font-size:.9rem; line-height:1.6; }
.safetybar .sb-item:first-of-type{ border-top:none; }
.safetybar .sb-item.warn{ color:#8a5a12; }
.safetybar .sb-detail{ display:block; font-size:.85rem; opacity:.9; }
/* 赤帯の中のリンク（ログイン制限のお知らせ → ユーザー管理・記録へ） */
.safetybar .sb-detail a{ color:#a5311f; font-weight:bold; text-decoration:underline; white-space:nowrap; }

.notifbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:12px 16px; padding:12px 18px;
  background:#fff6ec;
  border:1px solid #f2ddc2; border-left:5px solid var(--orange);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(150,110,60,.14), 0 1px 3px rgba(150,110,60,.10);
  font-size:.9rem; color:var(--ink);
  animation:notifpop .38s ease-out both;
}
@keyframes notifpop{
  from{ opacity:0; transform:translateY(-6px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
/* 動きに弱い方向けに、登場アニメを無効化（チカチカ防止） */
@media (prefers-reduced-motion: reduce){ .notifbar{ animation:none; } }
/* ※「確認・決裁待ちはありません」の空表示（.notifbar.none）は廃止した（2026-07-17）。
   用が無いときは通知バーそのものを出さない＝_notif_bar() が空文字を返す。 */
.notifbar .nb-icon{ font-size:1.15rem; }
.notifbar .nb-title{ font-weight:bold; white-space:nowrap; font-size:.96rem; }
.notifbar .nb-title b{ color:var(--orange-deep); }
.notifbar .nb-chips{ display:flex; gap:8px; flex-wrap:wrap; flex:1; margin-left:6px; padding-left:16px; border-left:1px solid #f0d6b6; }
.notifbar .nb-chip{
  text-decoration:none; color:var(--ink); background:#fff; border:1px solid #f0d6b6;
  border-radius:999px; padding:4px 11px; font-size:.82rem; white-space:nowrap;
}
.notifbar .nb-chip:hover{ border-color:var(--orange); }
.notifbar .nb-chip b{ color:var(--orange-deep); margin-left:2px; }
/* 「すべて見る」は隣のチップと同じ色味（白背景＋ベージュ枠）に揃える */
.notifbar .nb-all{
  text-decoration:none; font-weight:bold; color:var(--ink); background:#fff; border:1px solid #f0d6b6;
  border-radius:999px; padding:4px 13px; font-size:.82rem; white-space:nowrap;
}
.notifbar .nb-all:hover{ border-color:var(--orange); }

/* ===== ユメジムからのリマインド（気づきのお知らせ） ===== */
.remindbar{
  padding:10px 16px; background:#f3f8ef; border-bottom:1px solid #d7e6cf;
}
.remindbar-head{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:.86rem; font-weight:bold; color:var(--ink-soft);
}
.remindbar-head img{ width:20px; height:20px; }
.remindbar-head .rb-all{
  margin-left:auto; text-decoration:none; font-weight:bold; font-size:.8rem;
  color:var(--green-deep, #4c7a44);
}
.remindbar-head .rb-all:hover{ text-decoration:underline; }
.rb-cards{ display:flex; flex-direction:column; gap:8px; }
.rb-card{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid #dbe8d3; border-left:5px solid var(--green, #7aa06f);
  border-radius:10px; padding:9px 13px;
}
.rb-card.urgent{ border-left-color:#d64545; background:#fdf3f2; }
.rb-card.info{ border-left-color:#5f9457; }
.rb-main{ flex:1; min-width:200px; }
.rb-title{ font-weight:bold; color:var(--ink); font-size:.92rem; }
.rb-title .rb-tag{
  display:inline-block; font-size:.68rem; font-weight:bold; color:#fff;
  background:var(--green, #7aa06f); border-radius:999px; padding:1px 8px; margin-right:6px;
  vertical-align:middle;
}
.rb-card.urgent .rb-title .rb-tag{ background:#d64545; }
.rb-detail{ font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.rb-cta{
  text-decoration:none; font-weight:bold; color:#fff; background:var(--green, #7aa06f);
  border-radius:999px; padding:6px 15px; font-size:.82rem; white-space:nowrap;
}
.rb-card.urgent .rb-cta{ background:#d64545; }
.rb-cta:hover{ filter:brightness(.94); }
.rb-dismiss{ display:flex; gap:6px; }
.rb-dismiss button{
  border:1px solid #d7ddd2; background:#f6f8f4; color:var(--ink-soft);
  border-radius:999px; padding:5px 10px; font-size:.74rem; cursor:pointer; white-space:nowrap;
}
.rb-dismiss button:hover{ border-color:#b9c6b0; background:#eef2ea; }

/* リマインド管理ページ（/reminders） */
.rm-manage{ margin-top:22px; }
.rm-off{ list-style:none; padding:0; margin:8px 0; display:flex; flex-direction:column; gap:8px; }
.rm-off li{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#f6f8f4; border:1px solid #e0e6da; border-radius:10px; padding:9px 13px;
}
.rm-off .rm-o-title{ flex:1; min-width:200px; color:var(--ink); font-size:.9rem; }
.rm-off .rm-o-state{ font-size:.76rem; color:var(--ink-soft); }
.rm-off button{
  border:1px solid var(--green, #7aa06f); background:#fff; color:var(--green-deep, #4c7a44);
  border-radius:999px; padding:6px 14px; font-size:.8rem; font-weight:bold; cursor:pointer;
}
.rm-off button:hover{ background:#eef4ea; }

/* ===== 設定：パスワード変更フォーム／成功メッセージ ===== */
.pwform{ display:flex; flex-direction:column; gap:12px; max-width:380px; margin:8px 0 4px; }
.pwform label{ font-weight:bold; font-size:.9rem; color:var(--ink); display:flex; flex-direction:column; gap:5px; }
.pwform input{
  padding:11px; font-size:1rem; border:1.5px solid var(--beige-line);
  border-radius:var(--radius-sm); box-sizing:border-box;
}
.pwform input:focus{ outline:none; border-color:var(--green-deep); }
.pwform button{
  align-self:flex-start; border:none; border-radius:var(--radius-sm);
  padding:12px 22px; font-size:1rem; font-weight:bold; color:#fff;
  background:var(--green-deep); cursor:pointer;
}
.pwform button:active{ opacity:.88; }
.okbox{ background:#eaf4e6; border:1px solid #b9d8ac; border-radius:10px;
  padding:12px 14px; margin:0 0 12px; color:#39662a; font-size:.92rem; }
/* 入力が通らなかった理由（8文字未満・空欄・不一致など）。
   ふつうのお知らせ（.warnbox＝オレンジ）と**同じ色にしない**。
   足止め画面では「🔑 変更が終わるまで進めません」と並んで出るため、
   同じ見た目だと「どちらが直すべき用件か」が分からなくなる。 */
.errbox{ background:#fdf3f2; border:1px solid #eec3bf; border-left:5px solid #c0392b;
  border-radius:10px; padding:12px 14px; margin:0 0 12px; color:#8e2f22;
  font-size:.95rem; font-weight:bold; line-height:1.6; }

/* ===== パスワードの「足止め」画面（変更しないと先へ進めない状態）=====
   通常のナビ（業務タブ・設定メニュー・もどる）は出さない。押しても必ずここへ
   戻され、現場から「ループしている・壊れた」と見えるため（実際に発生）。 */
/* ※.topbar の背景は **白**（theme.css 冒頭）。ここを白文字にすると
   **ログアウトが見えなくなり、「詰みを作らない」という目的そのものを壊す**
   （実際に一度やってしまった）。ヘッダーの他のボタン（.settingsbtn）と同じ配色にする。 */
.topbar .lk-user{ margin-left:auto; color:var(--ink-soft); font-size:.9rem;
  font-weight:bold; white-space:nowrap; }
.topbar .lk-logout{
  margin-left:12px; color:var(--ink); font-size:.85rem; font-weight:bold;
  text-decoration:none; background:var(--cream); border:1px solid var(--beige-line);
  border-radius:999px; padding:7px 14px; white-space:nowrap; flex:0 0 auto;
}
.topbar .lk-logout:hover{ background:#fff; border-color:var(--green); }

.pwlead{ margin:0 0 16px; }
.pwlead h2{ font-size:1.25rem; margin:0 0 6px; color:var(--ink);
  border-left:5px solid var(--orange, #E07A5F); padding-left:10px; line-height:1.45; }
.pwlead-who{ margin:0 0 12px; color:var(--ink-soft); font-size:.95rem; }
.pwsteps{ margin:0 0 12px; padding-left:1.3em; line-height:1.85; font-size:.98rem; }
.pwsteps li{ margin-bottom:6px; }
.pwcalm{ background:#eef2f8; border:1px solid #c3d3e8; border-radius:10px;
  padding:11px 13px; margin:0; color:#2b4a6e; font-size:.9rem; line-height:1.7; }

/* ===== LINEアプリ内ブラウザの案内バー（inapp.js が出す）=====
   LINEの内蔵ブラウザはカメラ起動の指定（capture）を無視して写真選択を開くため、
   ふだんのブラウザ（Chrome / Safari）で開いてもらう案内。 */
.inappbar{
  background:#fff4e5; border-bottom:2px solid #f3d9b5; color:#8a5a12;
  padding:12px 14px; font-size:.88rem; line-height:1.7;
}
.inappbar-msg{ margin:0 0 10px; }
.inappbar-btn{
  display:inline-block; background:var(--green-deep, #3D6B4A); color:#fff;
  border-radius:var(--radius-sm, 10px); padding:11px 20px; font-size:.95rem;
  font-weight:bold; text-decoration:none; margin:0 0 10px;
}
.inappbar-btn:active{ opacity:.88; }
.inappbar-help{ font-size:.78rem; line-height:1.75; opacity:.92; }
/* ログイン画面の body は flex の中央寄せ。バナーを足すと横並びになって崩れるので
   縦積みにする（flex でない画面では flex-direction は無視されるため無害）。 */
body.has-inappbar{ flex-direction:column; }
body.has-inappbar > .inappbar{ align-self:stretch; }

.pwrules{ background:var(--beige, #F4EFE6); border:1px solid var(--beige-line, #e0d6c4);
  border-radius:10px; padding:12px 14px; margin:0 0 14px;
  color:var(--ink); font-size:.9rem; line-height:1.7; }
.pwrules .bul{ margin:6px 0 8px; }
.pwex{ display:inline-block; margin-top:6px; background:#fff; border:1px dashed #b9d8ac;
  border-radius:8px; padding:5px 10px; font-size:.9rem; }

/* パスワード欄の「目のマーク」表示切り替えは pw-toggle.js が
   インラインスタイルで直接付与する（入力枠の右側に小さく・黒いマーク）。
   ここでは扱わない（CSSキャッシュの影響を避けるため）。 */

/* ===== ログアウト確認のポップアップ（モーダル） ===== */
.modal{
  display:none; position:fixed; inset:0; z-index:200; padding:20px;
  background:rgba(45,33,22,.45); align-items:center; justify-content:center;
}
.modal.open{ display:flex; }
.modal-box{
  background:#fff; border-radius:16px; box-shadow:var(--shadow);
  width:100%; max-width:340px; padding:24px 20px; text-align:center;
}
.modal-msg{ font-size:1.1rem; font-weight:bold; color:var(--ink); margin:2px 0 20px; }
.modal-btns{ display:flex; gap:10px; }
.modal-cancel, .modal-ok{
  flex:1; padding:13px; border:none; border-radius:10px; font-size:1rem; font-weight:bold; cursor:pointer;
}
.modal-cancel{ background:var(--beige); color:var(--ink); }
.modal-cancel:hover{ background:var(--beige-line); }
.modal-ok{ background:var(--terracotta); color:#fff; }
.modal-ok:hover{ opacity:.92; }

/* 一覧での非画像ファイル（PDF等）へのリンク */
.filelink{
  display:inline-block; text-decoration:none; color:var(--green-deep); font-weight:bold;
  font-size:.82rem; background:var(--cream); border:1px solid var(--beige-line);
  border-radius:8px; padding:6px 10px; white-space:nowrap;
}
.filelink:hover{ background:#fff; }

/* ===== 共通フッター ===== */
.appfooter{
  margin-top:28px; padding:18px 16px; text-align:center;
  background:var(--beige); border-top:1px solid var(--beige-line);
  color:var(--ink-soft); font-size:.82rem;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.appfooter .foot-logo{ height:22px; width:auto; display:block; }

/* ===== 業務メニューのバナー（受注/出荷/経理/支払/給与/その他）===== */
/* PC：上部にバナーの帯を取り、業務タブをチップで並べる */
/* 帯そのものは画面いっぱい（背景色を端まで引く）。中身は本文と同じ幅・同じ左端にそろえる
   ＝業務タブの左端が、下の検索カード・注文カードの左端と一直線になる（ユーザー指示・2026-07-23）。
   幅は --content-max（:root の既定は 1040px＝いちばん多くの画面が使っている本文幅）。
   本文幅が違う画面は、その画面の <style> で `:root{ --content-max:1120px }` のように
   上書きすればそろう。padding を 16px にしているのは、各画面の main が padding:16px のため。 */
.areabar{
  background:var(--beige); border-bottom:1px solid var(--beige-line); padding:0;
}
/* 部門どうしの間（28px）＞ 部門名とタブの間（9px）＞ タブどうしの間（8px）。
   この差だけで「どこまでが1つの部門か」が分かるようにしている（線や囲みは足さない）。
   ここの数字を近づけると、3部門が1列のタブに見えてまとまりが消えるので注意。 */
.areabar-inner{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  max-width:var(--content-max); margin:0 auto; padding:7px 16px;
}
.areabar-title{
  font-size:.8rem; font-weight:bold; color:var(--ink-soft);
  white-space:nowrap; align-self:center;
}
/* 部門（販売部門／管理部門／総務）ごとの「まとまり」。
   **部門名はタブの左**に置く（ユーザー指示・2026-07-23。以前はタブの上に積んでいた）。
   横並びにしたぶん帯が1行で収まり、高さも下げられる。 */
.areadept{
  display:flex; flex-direction:row; align-items:center; gap:9px;
}
.areadept-name{
  font-size:.72rem; font-weight:bold; color:var(--green-deep);
  letter-spacing:.04em; white-space:nowrap;
}
.areadept-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
/* タブの上下の余白は、帯を低くするぶん少しだけ詰める（6px）。
   これ以上は詰めない＝指・マウスで押せる大きさ（およそ32px）を下回る。 */
.areabar .areatab{
  text-decoration:none; color:var(--ink); background:#fff;
  border:1.5px solid var(--beige-line); border-radius:999px;
  padding:6px 15px; font-size:.92rem; font-weight:bold; white-space:nowrap;
}
.areabar .areatab:hover{ border-color:var(--green); }
.areabar .areatab.active{ background:var(--green-deep); color:#fff; border-color:var(--green-deep); }
/* ハンバーガー内に入れる業務リンク・見出しは、PCでは隠す（バナー側に出るため）*/
.topbar .menu .menu-area, .topbar .menu .menu-sep{ display:none; }
/* 「現場入力」はスマホ専用。PCのヘッダーでは隠す（PCはトップページ・取り込みのみ）*/
.topbar .menu .menu-mobile{ display:none; }

@media (max-width:640px){
  .topbar{ flex-wrap:nowrap; }
  .topbar .brand-logo{ height:46px; }
  .topbar .brand-name{ font-size:1.4rem; }
  /* サブタイトルはスマホでも表示。極端に狭い画面でも崩れないよう少し小さく＋（必要時のみ）省略 */
  .topbar .brand-sub{ font-size:.84rem; }
  .topbar .hamburger{ display:block; flex:0 0 auto; margin-left:auto; }
  .topbar .menu{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--green); box-shadow:var(--shadow);
    z-index:50; padding:6px; max-height:80vh; overflow-y:auto;
  }
  .topbar .menu.open{ display:flex; }
  .topbar .menu a{
    background:transparent; border-radius:8px; padding:13px 14px;
    border-bottom:1px solid rgba(255,255,255,.4);
  }
  .topbar .menu a.active{ background:var(--action); color:#fff; }
  .topbar .menu a.logout{ text-decoration:none; }
  /* スマホ：バナーは隠し、業務タブはハンバーガーの中に表示する */
  .areabar{ display:none; }
  .topbar .menu .menu-mobile{ display:block; }   /* スマホでは現場入力を表示 */
  .topbar .menu .menu-area{ display:block; }
  .topbar .menu .menu-area.active{ background:var(--action); color:#fff; }
  .topbar .menu .menu-sep{
    display:block; padding:11px 14px 4px; font-size:.76rem; font-weight:bold;
    color:rgba(74,65,56,.75); letter-spacing:.02em;
  }
}

/* ===== 個人情報の取扱い（/privacy 公開ページ・委託先台帳）===== */
.pv-wrap{ max-width:820px; margin:0 auto; padding:22px 18px 60px; color:var(--ink); line-height:1.75; }
.pv-head{ display:flex; align-items:center; gap:12px; border-bottom:3px solid var(--green); padding-bottom:12px; margin-bottom:8px; }
.pv-head .pv-logo{ width:44px; height:44px; }
.pv-head h1{ font-size:1.35rem; margin:0; color:var(--ink); }
.pv-wrap h2{ font-size:1.05rem; margin:1.5em 0 .4em; color:var(--green-deep); border-left:5px solid var(--green); padding-left:9px; }
.pv-wrap ul{ margin:.3em 0 .3em; padding-left:1.3em; }
.pv-wrap li{ margin:.28em 0; }
.pv-org{ color:var(--ink-soft); font-size:.92rem; }
.pv-draft{ background:#fff5e6; border:1px solid #f0d19a; border-left:5px solid #e0952a; border-radius:8px; padding:10px 13px; margin:8px 0 4px; font-size:.9rem; }
.pv-foreign{ background:#fdf0ee; border:1px solid #f2ccc4; border-radius:8px; padding:10px 13px; }
.pv-note{ color:var(--ink-soft); font-size:.9rem; }
.pv-howto{ background:var(--cream); border-radius:10px; padding:12px 15px; margin:14px 0; font-size:.92rem; }
.pv-howto ol{ margin:.4em 0 0; padding-left:1.3em; }
.pv-tablewrap{ overflow-x:auto; margin:.6em 0 1em; }
.pv-table{ border-collapse:collapse; width:100%; font-size:.86rem; min-width:520px; }
.pv-table th,.pv-table td{ border:1px solid var(--beige-line); padding:7px 9px; text-align:left; vertical-align:top; }
.pv-table th{ background:var(--cream); font-weight:bold; white-space:nowrap; }
.pv-domestic{ background:#eef6ea; border:1px solid #cfe3c4; border-radius:8px; padding:10px 13px; }
.pv-status{ border-radius:10px; padding:12px 15px; margin:6px 0 16px; }
.pv-status b{ display:block; font-size:1.02rem; margin-bottom:3px; }
.pv-status span{ display:block; font-size:.9rem; }
.pv-status.ok{ background:#eef6ea; border:1px solid #cfe3c4; color:#2f5d28; }
.pv-status.warn{ background:#fdf1e7; border:1px solid #f0cba0; color:#8a4b12; }
.pv-status.info{ background:#eef2f8; border:1px solid #c3d3e8; color:#2b4a6e; }
.pv-status-fix{ margin-top:8px; font-size:.9rem; }
.pv-status-fix ul{ margin:.3em 0 0; padding-left:1.2em; }

/* 委託先・契約の一覧を「カード」で出す（設定 →「委託先・個人情報」）。
   【なぜ表をやめたか・2026-08-05／現場からの指摘】項目が多い（委託先9列・契約8列）ため、
   横に並べると画面に収まらず、**下のバーを横にスライドしないと右端が読めなかった**。
   横スクロールできること自体に気づけない人もいる（＝右端の情報が無いのと同じ）。
   → 1件を1枚のカードにして、項目を**縦に積む**。横スクロールが要らないので
     スマホでもそのまま読める。**表に戻すと必ず再発する**（検査が落ちる）。
   ＝2026-07-29 にマスター管理（取引先287件・商品226件）で同じ指摘を受けて直したのと
     まったく同じ形。 */
.vcards{ list-style:none; margin:.6em 0 1em; padding:0; display:flex; flex-direction:column; gap:10px; }
.vcard{ background:#fff; border:1.5px solid var(--beige-line); border-radius:10px; padding:12px 14px; }
.vcard-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
             padding-bottom:8px; border-bottom:2px solid var(--beige); }
.vcard-name{ font-weight:bold; color:var(--ink); font-size:1rem; overflow-wrap:anywhere; }
.vrow{ display:grid; grid-template-columns:8.5em 1fr; gap:2px 12px;
       padding:7px 0; border-bottom:1px solid var(--beige); font-size:.88rem; }
.vcard .vrow:last-child{ border-bottom:none; padding-bottom:0; }
.vlabel{ color:var(--ink-soft); font-weight:bold; font-size:.82rem; }
.vvalue{ color:var(--ink); line-height:1.65; overflow-wrap:anywhere; }
.vmain{ font-size:1.02rem; font-weight:bold; }
@media (max-width:560px){
  /* 幅が狭いときは、項目名を値の上に積む（2列のままだと値の欄が細長くなる） */
  .vrow{ grid-template-columns:1fr; gap:1px; }
}

/* 契約と費用の一覧（設定 →「委託先・個人情報」＝ contracts.py）。
   色は**濃い文字色**にしてある（0.72remの小さな字なので、薄い色だと読めない
   ＝2026-08-01 に入力例の濃さで学んだのと同じ理由。白地・淡い地の上で 4.5:1 以上）。 */
.ct-table td{ font-size:.84rem; }
.ct-state{ display:inline-block; border-radius:6px; padding:2px 8px; font-size:.74rem;
           font-weight:bold; white-space:nowrap; }
.ct-state.paying{ background:#eef2f8; color:#23415f; }   /* 契約中（費用あり） */
.ct-state.free{ background:#eef6ea; color:#2f5d28; }     /* 利用中（無料） */
.ct-state.todo{ background:#fdf1e7; color:#8a4b12; }     /* 要対応 */
.ct-state.check{ background:#fdf1e7; color:#8a4b12; }    /* 要確認 */
.ct-state.off{ background:var(--beige); color:#5b5147; } /* 未使用 */
.ct-need{ display:inline-block; background:#fdf1e7; color:#8a4b12; border-radius:5px;
          padding:1px 6px; font-size:.72rem; font-weight:bold; }
.ct-note{ margin-top:4px; color:#6b6154; font-size:.8rem; line-height:1.55; }