/* ===========================================================
   商談リスト — 業務画面
   白〜薄いグレー基調。アクセントは藍1色。ゴシック体。
   毎日使う道具として、見つけやすさと読みやすさを優先する。
   =========================================================== */
:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --surface2:#FBFCFD; --surface3:#F1F3F6;
  --line:#E2E6EC; --line2:#CFD6DF; --line3:#B4BEC9;
  --ink:#1A2430;        /* 本文 15.8:1 */
  --ink2:#48546280;     /* 補助（下で実色に） */
  --sub:#4B5763;        /* 7.4:1 */
  --mute:#67737F;       /* 5.2:1 */
  --ac:#1F5FA8;         /* 藍 6.0:1 */
  --ac-d:#17497F; --ac-f:#EAF1FA; --ac-b:#C3D7EE;
  --warn:#9A5B12; --warn-f:#FDF3E4; --warn-b:#F0DCB8;
  --danger:#A32C2C; --danger-f:#FCEEEE; --danger-b:#F0CACA;
  --ok:#1E6B45; --ok-f:#EAF5EF; --ok-b:#BFDDCB;
  --sans:"Hiragino Sans","Yu Gothic","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r1:6px;--r2:10px;--r3:14px;
  --nav:216px; --top:56px;
  --e:cubic-bezier(.32,.72,0,1); --fast:120ms;
  --shadow:0 1px 2px rgba(26,36,48,.06),0 1px 3px rgba(26,36,48,.04);
  --shadow2:0 4px 16px rgba(26,36,48,.10);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.75;
 font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
::selection{background:var(--ac-f)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:12px;border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--line3);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 左メニュー ── */
.nav{position:fixed;left:0;top:0;bottom:0;width:var(--nav);z-index:60;background:var(--surface);
 border-right:1px solid var(--line);display:flex;flex-direction:column;padding:var(--s4) var(--s3)}
.nav-brand{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3) var(--s5)}
.nav-brand b{font-size:15px;font-weight:700;letter-spacing:.02em}
.nav-brand i{font-style:normal;font-size:11px;color:var(--mute)}
.nav-list{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s3);
 border-radius:var(--r1);font-size:14px;color:var(--sub);text-align:left;transition:var(--fast) var(--e)}
.nav-item:hover{background:var(--surface3);color:var(--ink)}
.nav-item.on{background:var(--ac-f);color:var(--ac-d);font-weight:600}
.nav-item .c{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--surface3);
 color:var(--sub);font-size:11.5px;font-weight:600;display:grid;place-items:center}
.nav-item.on .c{background:var(--ac);color:#fff}
.nav-item .c.alert{background:var(--danger);color:#fff}
.nav-foot{padding:var(--s3);border-top:1px solid var(--line);font-size:11.5px;color:var(--mute);line-height:1.6}

/* ── 上部バー ── */
.top{position:fixed;left:var(--nav);right:0;top:0;height:var(--top);z-index:50;display:flex;align-items:center;
 gap:var(--s4);padding:0 var(--s5);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line)}
.top h1{margin:0;font-size:16px;font-weight:700;letter-spacing:.01em;flex:0 0 auto}
.top .sp{flex:1}
.search{display:flex;align-items:center;gap:var(--s2);height:38px;padding:0 var(--s3);border-radius:var(--r1);
 background:var(--surface3);border:1px solid transparent;min-width:min(320px,40vw);transition:var(--fast) var(--e)}
.search:focus-within{background:var(--surface);border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-f)}
.search input{flex:1;background:none;border:0;outline:none;font-size:14px;min-width:0}
.search input::placeholder{color:var(--mute)}
.mag{width:14px;height:14px;flex:0 0 14px;border:1.6px solid var(--mute);border-radius:50%;position:relative}
.mag::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:1.6px;background:var(--mute);transform:rotate(45deg)}

.main{position:absolute;left:var(--nav);right:0;top:var(--top);bottom:0;overflow-y:auto}
.wrap{max-width:1160px;margin:0 auto;padding:var(--s6) var(--s5) var(--s8)}
.wrap.narrow{max-width:900px}

h2{margin:0;font-size:24px;font-weight:700;letter-spacing:.01em;line-height:1.4}
h3{margin:0;font-size:15px;font-weight:700}
.lead{margin:var(--s2) 0 0;font-size:14px;color:var(--sub);max-width:70ch}
.sec{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s6) 0 var(--s3)}
.sec h3{font-size:14px;font-weight:700;flex:0 0 auto}
.sec .n{font-size:12.5px;color:var(--mute)}
.sec .ln{flex:1;height:1px;background:var(--line)}

/* ── カード・ボタン ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow)}
.card+.card{margin-top:var(--s3)}
.card-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.card-h h3{flex:1}
.card-b{padding:var(--s5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 18px;
 border-radius:var(--r1);font-size:14px;font-weight:600;border:1px solid transparent;transition:var(--fast) var(--e);white-space:nowrap}
.btn.pri{background:var(--ac);color:#fff}
.btn.pri:hover{background:var(--ac-d)}
.btn.sec{background:var(--surface);border-color:var(--line2);color:var(--ink)}
.btn.sec:hover{background:var(--surface3);border-color:var(--line3)}
.btn.ghost{color:var(--ac);padding:0 10px}
.btn.ghost:hover{background:var(--ac-f)}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.btns>*{flex:0 0 auto}

/* ── 状態バッジ ── */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;
 font-size:11.5px;font-weight:600;border:1px solid var(--line2);color:var(--sub);background:var(--surface3);white-space:nowrap}
.badge.due{background:var(--danger-f);border-color:var(--danger-b);color:var(--danger)}
.badge.today{background:var(--warn-f);border-color:var(--warn-b);color:var(--warn)}
.badge.thanks{background:var(--ac-f);border-color:var(--ac-b);color:var(--ac-d)}
.badge.ok{background:var(--ok-f);border-color:var(--ok-b);color:var(--ok)}
/* 要確認＝実施済だが記録が何もない。他のバッジに埋もれないよう、警告色をベタ塗りにする */
.badge.review{background:var(--warn);border-color:var(--warn);color:#fff}
.badge.review::before{content:"!";font-weight:700}

/* ── 一覧（列を揃える） ── */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
 border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow)}
.tbl th{position:sticky;top:0;z-index:1;background:var(--surface3);text-align:left;font-size:12px;font-weight:700;
 color:var(--sub);padding:10px var(--s4);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th button{font:inherit;color:inherit;display:inline-flex;align-items:center;gap:4px}
.tbl th button:hover{color:var(--ac)}
.tbl td{padding:12px var(--s4);border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer;transition:var(--fast) var(--e)}
.tbl tbody tr:hover{background:var(--ac-f)}
.tbl .nm{font-weight:600}
.tbl .sub2{font-size:12px;color:var(--mute);margin-top:2px}
.tbl .r{text-align:right;white-space:nowrap}
.tbl .ck{width:38px;text-align:center}
.tbl input[type=checkbox]{width:18px;height:18px;accent-color:var(--ac);cursor:pointer}
.tblwrap{overflow-x:auto;border-radius:var(--r2)}

/* ── 絞り込み ── */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s3)}
.chip{min-height:36px;padding:0 14px;border:1px solid var(--line2);border-radius:18px;background:var(--surface);
 font-size:13px;color:var(--sub);transition:var(--fast) var(--e)}
.chip:hover{border-color:var(--line3);color:var(--ink)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
select.sel{min-height:36px;padding:0 var(--s3);border:1px solid var(--line2);border-radius:var(--r1);background:var(--surface);font-size:13px}

/* ── 今日の対応 ── */
.today-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);margin-top:var(--s5)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4) var(--s5);
 text-align:left;box-shadow:var(--shadow);transition:var(--fast) var(--e)}
.stat:hover{border-color:var(--ac-b);box-shadow:var(--shadow2)}
.stat .l{font-size:12.5px;color:var(--sub);font-weight:600}
.stat .v{font-size:32px;font-weight:700;line-height:1.2;margin-top:4px}
.stat .u{font-size:13px;color:var(--mute);font-weight:400;margin-left:4px}
.stat.due .v{color:var(--danger)} .stat.today .v{color:var(--warn)} .stat.thanks .v{color:var(--ac)}
.stat.review .v{color:var(--warn)}
.reason{font-size:12px;color:var(--mute);margin-top:2px}

/* ── 詳細 ── */
.det{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:var(--s4);align-items:start}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);font-size:14px;margin:0}
.kv dt{color:var(--mute);font-size:12.5px;white-space:nowrap}
.kv dd{margin:0}
.time{position:relative;padding-left:var(--s5)}
.time::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tit{position:relative;padding:0 0 var(--s4)}
.tit::before{content:"";position:absolute;left:calc(-1 * var(--s5) + 1px);top:6px;width:10px;height:10px;border-radius:50%;
 background:var(--surface);border:2px solid var(--line3)}
.tit.has::before{border-color:var(--ac);background:var(--ac)}
.tit.sel{background:var(--ac-f);margin-left:calc(-1 * var(--s3));padding-left:var(--s3);border-radius:var(--r1)}
.tit .d{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.tit .t{font-size:14px;font-weight:600;margin-top:2px}
.tit .m{font-size:13px;color:var(--sub);margin-top:4px;white-space:pre-wrap}
.tit .acts{margin-top:6px;display:flex;gap:var(--s2);flex-wrap:wrap}
.tit a{color:var(--ac);font-size:12.5px}

.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--sub);margin-bottom:5px}
.field .help{font-size:11.5px;color:var(--mute);margin-top:4px}
.field input,.field textarea,.field select{width:100%;min-height:44px;background:var(--surface);
 border:1px solid var(--line2);border-radius:var(--r1);padding:10px 12px;outline:none;font-size:14.5px;line-height:1.7}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-f)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}

/* ── 文面 ── */
.tabs{display:flex;gap:2px;background:var(--surface3);padding:3px;border-radius:var(--r1);margin-bottom:var(--s4)}
.tabs button{flex:1;min-height:38px;padding:0 8px;border-radius:5px;font-size:13.5px;color:var(--sub);font-weight:600;transition:var(--fast) var(--e)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--surface);color:var(--ac-d);box-shadow:var(--shadow)}
.msg{width:100%;min-height:160px;overflow:hidden;resize:vertical;border:1px solid var(--line2);border-radius:var(--r1);padding:var(--s4);
 font-size:14.5px;line-height:1.9;resize:vertical;background:var(--surface)}
.msg:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-f)}
.notice{display:flex;gap:var(--s3);padding:var(--s4);border-radius:var(--r1);font-size:13.5px;line-height:1.7}
.notice.warn{background:var(--warn-f);border:1px solid var(--warn-b);color:#6B3F0B}
.notice.info{background:var(--ac-f);border:1px solid var(--ac-b);color:var(--ac-d)}
.notice.err{background:var(--danger-f);border:1px solid var(--danger-b);color:var(--danger)}
.notice b{display:block;margin-bottom:3px}
.notice ul{margin:4px 0 0;padding-left:18px}
.evi{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
.evi summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--sub);min-height:32px;display:flex;align-items:center}
.evi summary:hover{color:var(--ac)}
.evi ul{margin:var(--s2) 0 0;padding-left:18px;font-size:12.5px;color:var(--sub);line-height:1.8}
.evi .todo li{color:var(--warn)}
.saveline{display:flex;align-items:center;gap:var(--s2);font-size:12.5px;color:var(--mute);min-height:22px}
.saveline.ok{color:var(--ok)} .saveline.err{color:var(--danger)}
.spin{width:13px;height:13px;border:2px solid var(--line2);border-top-color:var(--ac);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── 空・読み込み ── */
.empty{padding:var(--s8) var(--s5);text-align:center;color:var(--mute);font-size:14px;
 background:var(--surface);border:1px dashed var(--line2);border-radius:var(--r2)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}

/* ── まとめて ── */
.bulkbar{position:sticky;bottom:var(--s4);z-index:20;display:flex;align-items:center;gap:var(--s3);
 margin-top:var(--s4);padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line2);
 border-radius:var(--r2);box-shadow:var(--shadow2)}
.bulkbar .n{font-size:20px;font-weight:700}

.toast{position:fixed;left:50%;bottom:var(--s6);transform:translate(-50%,10px);z-index:200;padding:12px 22px;
 border-radius:var(--r2);background:var(--ink);color:#fff;font-size:14px;font-weight:600;opacity:0;
 pointer-events:none;transition:180ms var(--e);box-shadow:var(--shadow2)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--danger)}

/* ── 画面幅 ── */
@media(max-width:1180px){ .det{grid-template-columns:minmax(0,1fr)} }
@media(max-width:900px){
  :root{--nav:0px}
  .nav{left:0;right:0;top:auto;bottom:0;width:auto;height:60px;flex-direction:row;padding:0 var(--s2);
   border-right:0;border-top:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
  .nav-brand,.nav-foot{display:none}
  .nav-list{flex-direction:row;flex:1;gap:0}
  /* 下部ナビは「文字＋件数」を1行に並べる。件数を浮かせると文字に重なる。 */
  .nav-item{flex:1;flex-direction:row;justify-content:center;align-items:center;gap:5px;
   min-height:60px;font-size:11px;padding:0 3px;white-space:nowrap}
  .nav-item .c{margin:0;min-width:19px;height:17px;padding:0 5px;font-size:10.5px;border-radius:9px;flex:0 0 auto}
  .top{left:0;padding:0 var(--s4)}
  .top h1{font-size:15px}
  .main{left:0;bottom:60px}
  .wrap{padding:var(--s5) var(--s4) var(--s7)}
  h2{font-size:20px}
  .row2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .search{min-width:0}
  .today-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.nav,.top,.bulkbar,.toast{display:none!important}.main{position:static;left:0;top:0}}