/* 見た目。Claude Design の納品物（proposal-system-standalone.html）の色・角の丸み・間隔に合わせている。
   PCの画面（幅1280px前後）だけを想定する（README 3章）。 */
:root{
  --bg-outer:#E4EBEA; --bg:#F3F7F7; --card:#FFFFFF;
  --text:#1F2D2D; --sub:#5B6B6A; --sub2:#4A5A59;
  --line:#DCE5E4; --line2:#EAF0EF; --line-input:#AFC1C0; --line-btn:#BFD0CF;
  --primary:#0E8A83; --primary-h:#0B746E; --on-primary:#FFFFFF; --link:#0B7A73; --soft:#E3F5F3; --soft-h:#E3EDEC;
  --ribbon:#E9F6F5; --ribbon-line:#CDE6E3; --row-h:#F0FAF9; --col:#E6EEED;
  --ink:#1F2D2D; --on-ink:#FFFFFF;
  --neg:#C62828;
  --idle-row:#FFF1E0; --idle-line:#F2D9BB; --idle-card:#FFEAD1; --idle-card-line:#F0CFA3; --idle-pill:#FFD9AE; --idle-pill-t:#6B3A00;
  --warn-bg:#FFF3C2; --warn-line:#D9B93C; --warn-t:#7A5F00;
  --undec-bg:#EFE6FB; --undec:#5E2A96;
  --avatar:#CDEBE8; --avatar-t:#075C57;
  --st-prep-bg:#E6E8FB; --st-prep-t:#34388A;
  --st-sent-bg:#CBCFF4; --st-sent-t:#272B7A;
  --st-arranging-bg:#9AA1E6; --st-arranging-t:#161A55;
  --st-waiting-bg:#4F57C2; --st-waiting-t:#FFFFFF;
  --st-won-bg:#CFEFD9; --st-won-t:#17613A;
  --st-declined-bg:#E3E6E7; --st-declined-t:#505B5A;
  --shadow:0 1px 2px rgba(20,60,58,.06);
}
/* 暗い配色は今回デザインを頼んでいない。これまでどおり、PCの設定に合わせて自動で切り替わる仮の配色のまま。 */
@media (prefers-color-scheme: dark){
  :root{
    --bg-outer:#0E1213; --bg:#14181D; --card:#1D232A;
    --text:#E6EAEF; --sub:#A0ACBA; --sub2:#B6C1CC;
    --line:#35404C; --line2:#2B3540; --line-input:#4A5766; --line-btn:#4A5766;
    --primary:#2FB8B0; --primary-h:#27A39C; --on-primary:#0B1220; --link:#5FD3CB; --soft:#173A3A; --soft-h:#27303A;
    --ribbon:#173537; --ribbon-line:#24504F; --row-h:#1F2C2F; --col:#222A32;
    --ink:#E6EAEF; --on-ink:#14181D;
    --neg:#FF8A80;
    --idle-row:#3A2E17; --idle-line:#5A4724; --idle-card:#3F3118; --idle-card-line:#5A4724; --idle-pill:#7A5420; --idle-pill-t:#FFE3BD;
    --warn-bg:#3A3417; --warn-line:#8F7A1F; --warn-t:#F3DC7A;
    --undec-bg:#2F2442; --undec:#D3B6FF;
    --avatar:#24504F; --avatar-t:#BFEFEA;
    --st-prep-bg:#2A2F5E; --st-prep-t:#C9CCF5;
    --st-sent-bg:#353B7D; --st-sent-t:#D5D8F8;
    --st-arranging-bg:#4A53A8; --st-arranging-t:#FFFFFF;
    --st-waiting-bg:#6C74D6; --st-waiting-t:#0B1220;
    --st-won-bg:#1D4A33; --st-won-t:#BFEFD1;
    --st-declined-bg:#2F3638; --st-declined-t:#B6C1CC;
    --shadow:none;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-outer);color:var(--text);font:14px/1.5 "Noto Sans JP","Yu Gothic UI","Hiragino Sans","Meiryo",system-ui,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;font-weight:700;margin:0}
h2{font-size:16px;font-weight:700;margin:24px 0 8px}
h3{font-size:16px;font-weight:700;margin:0 0 8px}
.muted{color:var(--sub)}
.neg{color:var(--neg);font-weight:700}
.grow{flex:1}

/* ---- 全体の枠と上部メニュー ---- */
.page{max-width:1280px;min-width:1100px;margin:0 auto;min-height:100vh;background:var(--bg)}
.topbar{height:56px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:28px}
.brand{font-size:16px;font-weight:700;color:var(--link);white-space:nowrap}
.nav{display:flex;gap:4px;flex:1}
.nav a{height:34px;padding:0 14px;border-radius:17px;display:flex;align-items:center;color:var(--text);font-weight:500;text-decoration:none}
.nav a:hover{background:var(--soft)}
.nav a.on{background:var(--primary);color:var(--on-primary);font-weight:700}
.who{display:flex;align-items:center;gap:14px;white-space:nowrap}
.who .me{display:flex;align-items:center;gap:8px}
.avatar{width:28px;height:28px;border-radius:14px;background:var(--avatar);color:var(--avatar-t);font-weight:700;display:flex;align-items:center;justify-content:center}
.who a{display:flex;align-items:center;gap:4px}
.main{padding:24px 24px 96px}
#screen>*+*{margin-top:16px}
.banner{background:var(--undec-bg);color:var(--undec);padding:6px 12px;border-radius:10px;font-size:12px;margin-bottom:16px}
.undec{background:var(--undec-bg);color:var(--undec);padding:0 6px;border-radius:4px;font-size:12px;white-space:nowrap}
.pghead{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ---- カード・表 ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px}
.pc{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow-x:auto;overflow-y:hidden}
.pc-h{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pc-h h3{margin:0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
.pc .tbl-wrap{border:0;border-radius:0;box-shadow:none}
table{border-collapse:collapse;width:100%}
th{height:36px;padding:0 10px;background:var(--bg);color:var(--sub2);font-weight:500;text-align:left;white-space:nowrap;border-top:1px solid var(--line2)}
td{height:40px;padding:4px 10px;border-top:1px solid var(--line2);vertical-align:middle}
thead th:first-child,tbody td:first-child{padding-left:16px}
thead th:last-child,tbody td:last-child{padding-right:16px}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--row-h)}
tr.idle-row td{background:var(--idle-row);border-top-color:var(--idle-line)}
tr.idle-row.clickable:hover td{background:var(--idle-card)}
.num{text-align:right;white-space:nowrap}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
th,td{padding-left:8px;padding-right:8px}
th:first-child,td:first-child{padding-left:16px}
th:last-child,td:last-child{padding-right:16px}
.empty{color:var(--sub);padding:36px 16px;text-align:center}
.empty b{display:block;color:var(--text);font-size:16px;margin-bottom:6px}
.card.empty{box-shadow:var(--shadow)}
.emptyic{width:40px;height:40px;border-radius:20px;background:var(--soft);color:var(--link);display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px}

/* ---- ラベル・ステータス ---- */
.pill,.tag{display:inline-block;padding:2px 10px;border-radius:12px;font-weight:500;white-space:nowrap;line-height:1.5;font-size:14px}
.tag{background:var(--soft);color:var(--link);font-size:12px;padding:1px 10px}
.tag.idle{background:var(--idle-pill);color:var(--idle-pill-t);font-weight:700;font-size:14px;padding:1px 8px}
.tag.warn{background:transparent;border:1.5px solid var(--ink);color:var(--text);font-weight:500;font-size:14px;padding:0 10px}
.pill-ink{background:var(--ink);color:var(--on-ink);font-weight:700}
.pill-line{border:1.5px solid var(--ink);padding:0 10px}
.pill-open{background:var(--soft);color:var(--link);font-weight:700}
.st-prep{background:var(--st-prep-bg);color:var(--st-prep-t)}
.st-sent{background:var(--st-sent-bg);color:var(--st-sent-t)}
.st-arranging{background:var(--st-arranging-bg);color:var(--st-arranging-t)}
.st-waiting{background:var(--st-waiting-bg);color:var(--st-waiting-t)}
.st-won{background:var(--st-won-bg);color:var(--st-won-t)}
.st-declined{background:var(--st-declined-bg);color:var(--st-declined-t)}
select.st-sel{border:0;border-radius:12px;height:26px;padding:0 6px 0 10px;font-weight:500}

/* ---- ボタン・入力 ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border:1px solid var(--line-btn);border-radius:18px;background:var(--card);color:var(--text);font:inherit;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--soft);text-decoration:none}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:700}
.btn.primary:hover{background:var(--primary-h)}
.btn.danger{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:700}
.btn.danger:hover{opacity:.88}
.btn.small{height:28px;padding:0 10px;font-size:12px;border-radius:14px}
.btn.icon{width:32px;padding:0;border-color:transparent;background:transparent;color:var(--sub2)}
.btn.icon:hover{background:var(--soft)}
.ic{flex:none}
input,select,textarea{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line-input);border-radius:10px;padding:0 10px;height:36px;max-width:100%}
textarea{width:100%;min-height:120px;height:auto;padding:8px 12px}
input[type=number]{width:96px}
input[type=checkbox],input[type=radio]{height:auto;width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:0}
td input,td select{height:30px;border-radius:8px;padding:0 8px}
td input[type=number]{width:84px;text-align:right}
td select.cellsel{border-color:transparent;background:transparent;margin-left:-9px;padding:0 2px 0 8px}
td input.cellin{width:64px}
td select[data-f=track]{min-width:124px}
td select[data-f=meeting]{min-width:78px}
td select[data-f=ownerId]{min-width:100px}
td select.cellsel:hover{border-color:#8FC9C4;background:var(--row-h)}
td input.cellin{border-color:transparent;background:transparent;text-align:right}
td input.cellin:hover{border-color:#8FC9C4}
td select.st-sel{height:26px;border-radius:12px}
.fpill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 4px 0 12px;border:1px solid var(--line-btn);border-radius:16px;background:var(--card);white-space:nowrap}
.fpill .k{color:var(--sub)}
.fpill select{border:0;background:transparent;height:28px;padding:0 4px;font-weight:700}
.fpill.on{border-color:var(--primary);background:var(--soft)}
.fpill.on select{background:transparent}
.fcheck{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line-btn);border-radius:16px;background:var(--card);cursor:pointer}
.seg{display:inline-flex;padding:3px;border-radius:18px;background:#DCE8E7}
@media (prefers-color-scheme: dark){.seg{background:#27303A}}
.seg button{height:30px;padding:0 14px;border:0;border-radius:15px;background:transparent;font:inherit;color:var(--text);cursor:pointer}
.seg button.on{background:var(--card);font-weight:700}

/* ---- 入力フォーム ---- */
.form-grid{display:grid;grid-template-columns:170px 1fr;gap:12px 14px;align-items:start}
.form-grid>label{padding-top:8px;font-weight:700}
.form-grid .hint{font-size:12px;color:var(--sub);margin-top:2px}
.req::after{content:" 必須";color:var(--link);font-weight:700;font-size:12px}
.sumbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:14px 16px;border-radius:10px;background:var(--bg);margin-bottom:16px}
.sumbar .k{color:var(--sub)}
.sumbar .v{font-weight:700}
.pillradio{display:inline-flex;margin-right:8px}
.pillradio input{position:absolute;opacity:0;width:0;height:0}
.pillradio span{display:inline-flex;align-items:center;height:40px;padding:0 14px;border:1.5px solid var(--line-input);border-radius:20px;background:var(--card);cursor:pointer;white-space:nowrap}
.pillradio input:checked+span{border-color:var(--primary);background:var(--soft);font-weight:700}
.pillradio input:focus-visible+span{outline:2px solid var(--primary)}
.fld .lb{font-weight:700;margin-bottom:6px}
.fld .opt{color:var(--sub);font-weight:400}
.reqmark{color:var(--link);font-weight:700}
.fld input:not([type=radio]):not([type=checkbox]),.fld select{height:40px;width:100%}
.fld textarea{width:100%}
.fld .hint{font-size:12px;color:var(--sub);margin-top:2px}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.sumbar input[type=date]{height:32px;padding:0 8px}
.cands{background:var(--warn-bg);border:1.5px solid var(--warn-line);color:var(--text);border-radius:10px;padding:6px 10px;margin-top:6px;font-size:13px}
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:12px;margin-bottom:12px;background:var(--card)}
.alert.warn{background:var(--warn-bg);border:1.5px solid var(--warn-line)}
.alert.warn .al-ic{color:var(--warn-t)}
.alert.err{border:2px solid var(--ink)}
.alert.info{border:1px solid var(--line-input)}
.alert b{display:block}

/* ---- 案件詳細 ---- */
.ribbon{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;padding:16px 20px;background:var(--ribbon);border-bottom:1px solid var(--ribbon-line)}
.ribbon .k{color:#4A6563}
@media (prefers-color-scheme: dark){.ribbon .k{color:var(--sub)}}
.ribbon .v{font-weight:700}
.info3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);gap:20px;padding:16px 20px}
.info3 .k{color:var(--sub)}
.point{margin:0 20px 16px;padding:10px 14px;border-radius:10px;background:var(--bg)}
.point b{margin-right:8px}
.sumrow{border-top:1px solid var(--line2);padding:10px 20px;display:flex;align-items:center;gap:12px}
details.summary summary{cursor:pointer;font-weight:500}
details.summary pre{white-space:pre-wrap;background:var(--bg);padding:10px 14px;border-radius:10px;margin:8px 0 0;font:inherit;color:var(--sub2)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:4px 10px}
.kv dt{color:var(--sub)}
.kv dd{margin:0}

/* ---- 提案ボード ---- */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:10px;align-items:start;overflow-x:auto}
.col{background:var(--col);border:2px solid transparent;border-radius:14px;padding:10px 8px 12px;min-height:420px;display:flex;flex-direction:column;gap:10px}
.col.over{background:var(--soft);border:2px dashed var(--primary)}
.col h3{display:flex;align-items:center;justify-content:space-between;padding:0 4px;margin:0;font-size:14px}
.col h3 .cnt{color:var(--sub2);font-weight:500}
.col .colempty{border:1.5px dashed var(--line-input);border-radius:12px;padding:28px 10px;text-align:center;color:var(--sub)}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;cursor:grab;box-shadow:0 1px 2px rgba(20,60,58,.08);font-size:14px}
.kcard:hover{box-shadow:0 4px 12px rgba(20,60,58,.18)}
.kcard.idle{background:var(--idle-card);border-color:var(--idle-card-line)}
.kcard .l1{display:flex;align-items:center;gap:6px;font-weight:700}
.kcard .l1 span.t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .l2{color:var(--sub2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .l3{white-space:nowrap}
.kcard .l4{color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 横から開く提案詳細・ダイアログ・通知 ---- */
.panel-back{position:fixed;inset:0;background:rgba(20,40,40,.35);z-index:20}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--card);z-index:21;border-left:1px solid var(--line);padding:20px 22px;overflow:auto;box-shadow:-8px 0 24px rgba(0,0,0,.18)}
.panel .form-grid{grid-template-columns:150px 1fr}
dialog.modal{border:0;border-radius:18px;background:var(--card);color:var(--text);padding:24px;width:540px;max-width:94vw;max-height:90vh;box-shadow:0 24px 60px rgba(0,0,0,.3)}
dialog.modal::backdrop{background:rgba(20,40,40,.5)}
dialog.modal{overflow:hidden}
dialog.modal form{display:flex;flex-direction:column;max-height:calc(90vh - 48px)}
dialog.modal h3{font-size:18px;margin:0 0 16px;flex:none}
dialog.modal .mbody{display:flex;flex-direction:column;gap:12px;overflow:auto;flex:1 1 auto;min-height:0;padding:2px}
dialog.modal .merr,dialog.modal .mbtns{flex:none}
dialog.modal .mbody ul{margin:6px 0;padding-left:20px}
dialog.wide{width:760px}
.mbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.merr{margin-top:12px;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;font-weight:700}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:6px;align-items:center}
#toast div{background:var(--ink);color:var(--on-ink);padding:8px 16px;border-radius:20px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.login{max-width:520px;margin:60px auto}
.login.card{padding:24px}