:root{--navy:#002C6A;--navy3:#001A40;--navy2:#0B4AA8;--ink:#2f3437;--ink2:#6b6f75;--gold:#A16207;--gold2:#D4A853;--goldbg:#FBF6EA;--off:#F3F4F7;--line:#e2e5ea;--y:#F2B705;--ybg:#FFF7DB;--r:#D64545;--rbg:#FDECEC;--sh:0 6px 18px rgba(0,44,106,.10)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;background:var(--off);color:var(--ink);-webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;font-size:15px}
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}
[hidden]{display:none!important}

.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy3),var(--navy))}
.login form{background:#fff;border-radius:18px;padding:34px 28px;width:min(360px,90vw);box-shadow:0 20px 50px rgba(0,0,0,.3);text-align:center}
.login img{height:24px}
.login h1{font-size:20px;color:var(--navy3);margin:10px 0 18px}
.login label{display:block;text-align:left;font-size:13px;font-weight:700}
.login input{display:block;width:100%;margin-top:6px;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 12px}
.login button{width:100%;height:48px;margin-top:16px;border:none;border-radius:10px;background:var(--navy);color:#fff;font-weight:700;font-size:16px}
.err{color:var(--r);font-size:13px;margin-top:10px;min-height:1em}

.top{position:sticky;top:0;z-index:20;background:#fff;display:flex;align-items:center;gap:14px;padding:10px 16px;box-shadow:0 2px 10px rgba(0,44,106,.08);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:20px}
.brand b{font-size:15px;color:var(--navy3);white-space:nowrap}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:none;background:none;padding:8px 12px;border-radius:8px;font-weight:700;font-size:14px;color:var(--ink2);white-space:nowrap}
.tabs button.on{background:var(--navy);color:#fff}
.add{margin-left:auto;border:none;background:var(--gold2);color:var(--navy3);font-weight:800;padding:9px 14px;border-radius:10px;white-space:nowrap}
.bar{display:flex;gap:10px;align-items:center;padding:12px 16px;flex-wrap:wrap}
.bar input[type=search]{flex:1;min-width:200px;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}
.bar select{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:#fff}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;white-space:nowrap}
.chk input{width:18px;height:18px;accent-color:var(--navy)}
.legend{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ink2);flex-wrap:wrap}
.lg{font-weight:700;border-radius:6px;padding:2px 8px}
.lg.y{background:var(--ybg);color:#8a6400;border:1px solid var(--y)}
.lg.r{background:var(--rbg);color:var(--r);border:1px solid var(--r)}

/* ボード */
.board{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 30px;align-items:flex-start;min-height:70vh}
.col{flex:0 0 268px;background:#e9ecf2;border-radius:14px;display:flex;flex-direction:column;max-height:calc(100vh - 170px)}
.col .ch{padding:12px 12px 8px;position:sticky;top:0}
.col .ch b{display:block;font-size:14px;color:var(--navy3)}
.col .ch small{font-size:12px;color:var(--ink2)}
.col .ch .step{display:inline-block;font-family:"Oswald",sans-serif;font-size:11px;color:#fff;background:var(--navy);border-radius:4px;padding:1px 6px;margin-right:6px}
.col .cards{padding:4px 10px 12px;overflow-y:auto;flex:1;min-height:60px}
.col.over{outline:3px dashed var(--gold2);outline-offset:-3px}
.card{background:#fff;border-radius:12px;padding:11px 12px;margin-bottom:9px;box-shadow:var(--sh);border-left:5px solid #c9d2e3;cursor:grab;user-select:none}
.card:active{cursor:grabbing}
.card.y{border-left-color:var(--y);background:var(--ybg)}
.card.r{border-left-color:var(--r);background:var(--rbg)}
.card.dragging{opacity:.4}
.card .co{font-weight:800;font-size:14px;color:var(--navy3);line-height:1.45}
.card .ct{font-size:12px;color:var(--ink2);margin-top:2px}
.card .mt{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;gap:6px}
.card .days{font-weight:800}
.card.y .days{color:#8a6400}.card.r .days{color:var(--r)}
.card .am{font-family:"Oswald",sans-serif;font-size:14px;color:var(--navy)}
.card .na{font-size:12px;margin-top:6px;color:var(--ink);background:rgba(0,44,106,.05);border-radius:6px;padding:4px 7px}
.card .ow{display:inline-block;font-size:11px;font-weight:700;background:#eef2f9;color:var(--navy);border-radius:5px;padding:1px 6px}
.sum{display:flex;gap:16px;padding:0 16px 8px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.sum b{color:var(--navy3);font-size:15px}

/* 一覧 */
.tblw{padding:0 16px 30px;overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--sh);font-size:13px;min-width:900px}
th,td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f6f7fa;font-size:12px;color:var(--ink2);cursor:pointer;white-space:nowrap}
tr.y td{background:var(--ybg)}tr.r td{background:var(--rbg)}
tbody tr{cursor:pointer}
tbody tr:hover td{background:#f1f5ff}
.tools{display:flex;gap:10px;padding:0 16px 12px;flex-wrap:wrap}
.btn{border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-weight:700;border-radius:10px;padding:8px 14px;font-size:14px}
.btn.k{background:var(--navy);color:#fff}
.btn.d{border-color:var(--r);color:var(--r)}

/* 取り込み・設定 */
.panel{background:#fff;border-radius:14px;box-shadow:var(--sh);margin:0 16px 20px;padding:20px;max-width:980px}
.panel h2{font-size:17px;color:var(--navy3)}
.panel p{font-size:14px;line-height:1.85;margin-top:8px;color:var(--ink)}
.panel textarea{width:100%;min-height:150px;border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:10px;line-height:1.6}
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:14px}
.map label{font-size:13px;font-weight:700}
.map select{display:block;width:100%;margin-top:4px;height:38px;border:1px solid var(--line);border-radius:8px}
.prev{margin-top:14px;overflow-x:auto}
.prev table{min-width:600px}

/* 詳細 */
.modal{position:fixed;inset:0;background:rgba(0,20,50,.45);z-index:50;display:flex;justify-content:flex-end}
.sheet{width:min(560px,100%);height:100%;background:#fff;display:flex;flex-direction:column;animation:slide .25s ease}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.mh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.mh b{font-size:16px;color:var(--navy3)}
.x{border:none;background:#f0f2f6;width:34px;height:34px;border-radius:50%;font-size:18px}
.mb{padding:16px 18px 40px;overflow-y:auto;flex:1}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.fg label{font-size:12px;font-weight:700;color:var(--ink2)}
.fg label.w{grid-column:1/-1}
.fg input,.fg select,.fg textarea{display:block;width:100%;margin-top:4px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--ink);background:#fff}
.fg textarea{min-height:80px;line-height:1.6}
.fg em{font-style:normal;color:var(--r)}
.acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.hist{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.hist h3{font-size:14px;color:var(--navy3)}
.hadd{display:grid;grid-template-columns:130px 120px 1fr;gap:8px;margin-top:10px}
.hadd input,.hadd select,.hadd textarea{border:1px solid var(--line);border-radius:8px;padding:8px;width:100%}
.hadd textarea{grid-column:1/-1;min-height:64px}
.hadd button{grid-column:1/-1}
.hl{margin-top:12px}
.hl div{border-left:3px solid var(--line);padding:6px 0 8px 12px;font-size:13px;line-height:1.7}
.hl div b{font-size:12px;color:var(--navy)}
.hl div span{font-size:11px;color:var(--ink2);margin-left:6px;background:#f0f2f6;border-radius:4px;padding:1px 6px}
.hl div.sys{color:var(--ink2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy3);color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%)}
.empty{padding:30px 16px;color:var(--ink2);font-size:14px}

@media (max-width:640px){
  .top{gap:8px;padding:8px 12px}
  .add{padding:8px 10px;font-size:13px}
  .tabs{order:3;width:100%}
  .col{flex-basis:84vw}
  .fg{grid-template-columns:1fr}
  .hadd{grid-template-columns:1fr 1fr}
}