/* 内部再鑑ゲート — 案A｜余白と静けさ（ミニマル）に準拠したスタイル */
*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;}
body{background:#FAF9F6; color:#1A1F26;}
a{color:inherit;}
.mono{font-family:'SFMono-Regular',Consolas,monospace;}
[hidden]{display:none!important;}

/* ---------- topbar ---------- */
.topbar{
  height:64px; flex:none; background:#20242c; color:#f2f1ec;
  display:flex; align-items:center; gap:24px; padding:0 22px;
}
.topbar h1{font-size:15px; font-weight:700; margin:0; flex:none;}
.topbar nav{display:flex; gap:4px; flex:none;}
.topbar nav a{font-size:13px; font-weight:600; padding:8px 14px; border-radius:7px; color:#c7ccd6; text-decoration:none;}
.topbar nav a:hover, .topbar nav a.active{background:#f2f1ec; color:#20242c;}
.topbar .spacer{flex:1;}
.topbar .nav-clock{font-size:12.5px; color:#c7ccd6; font-family:'SFMono-Regular',Consolas,monospace; margin-right:20px;}
.topbar .session{display:flex; align-items:center; gap:12px; font-size:12.5px; color:#c7ccd6;}
.topbar .session a{color:#c7ccd6; text-decoration:underline;}

/* ---------- flash ---------- */
.flash{margin:10px 40px 0; padding:10px 16px; border-radius:6px; font-size:13px;}
.flash.ok{background:#e3efe7; color:#245239;}
.flash.error{background:#f5e5e2; color:#7a2b2b;}

/* ---------- 案A board ---------- */
.board-a{background:#FAF9F6; color:#1A1F26; min-height:calc(100vh - 64px); display:flex; flex-direction:column;}
.a-head{height:88px; flex:none; padding:0 40px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #E7E4DC;}
.a-head .titles{display:flex; align-items:baseline; gap:20px;}
.a-head .app{font-size:22px; font-weight:700; letter-spacing:.02em;}
.a-head .proj{font-size:14px; color:#767C85;}
.a-head .right{display:flex; align-items:center; gap:28px;}
.a-alert{display:flex; align-items:center; gap:10px; font-size:14px; color:#767C85;}
.a-alert .dot{width:8px; height:8px; border-radius:50%; background:#B4762A; display:inline-block;}
.a-role{display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px; border:1px solid #E0DDD4; border-radius:999px;}
.a-role .av{width:30px; height:30px; border-radius:50%; background:#2B5F75; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.a-grid{flex:1; min-height:0; padding:24px 40px 16px; display:grid; grid-template-columns:repeat(8,1fr); gap:16px; overflow-x:auto;}
.a-lane{min-width:0; display:flex; flex-direction:column; gap:10px; min-height:0;}
.a-lane-head{height:54px; flex:none; display:flex; flex-direction:column; gap:4px;}
.a-lane-head .row{display:flex; align-items:flex-start; justify-content:space-between; gap:6px;}
.a-lane-head .name{font-size:13px; font-weight:700; line-height:1.3;}
.a-lane-head .cnt{font-size:12px; color:#78808B;}
.a-lane-head .gate{font-size:10.5px; font-weight:500; color:#B4762A; letter-spacing:.03em;}
.a-rule{height:2px; flex:none;}
.a-cards{flex:1; min-height:120px; display:flex; flex-direction:column; gap:9px; overflow-y:auto;}
.a-card{background:#FFFFFF; border-radius:5px; padding:11px 12px 10px; box-shadow:0 1px 1px rgba(26,31,38,.05),0 6px 14px -10px rgba(26,31,38,.35); display:flex; flex-direction:column; gap:7px; cursor:grab; text-decoration:none; color:inherit;}
.a-card.no-drag{cursor:not-allowed;}
.a-card:active{cursor:grabbing;}
.a-card .top{display:flex; align-items:center; justify-content:space-between;}
.a-card .id{font-size:10.5px; color:#78808B;}
.a-card .lock{font-size:10px; font-weight:700; color:#3F464F; background:#E5E2DA; padding:1px 6px; border-radius:3px;}
.a-card .title{font-size:13px; font-weight:500; line-height:1.4;}
.a-card .foot{display:flex; align-items:center; justify-content:space-between;}
.a-card .av{width:20px; height:20px; border-radius:50%; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.a-card .due{font-size:10.5px; color:#6B7280;}
.a-card .elapsed{display:flex; align-items:center; gap:6px; font-size:10.5px;}
.a-card .elapsed .dot{width:5px; height:5px; border-radius:50%; display:inline-block;}
.a-log{flex:none; margin:0 40px 22px; background:#F2F0EA; border-radius:6px; padding:13px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.a-log .left{display:flex; align-items:center; gap:16px; min-width:0;}
.a-log .lbl{font-size:12px; font-weight:700; color:#6B7280; letter-spacing:.03em; flex:none;}
.a-log .time{font-size:11.5px; color:#78808B; flex:none;}
.a-log .txt{font-size:13px; color:#4B5563; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.a-log .toggle{font-size:12.5px; color:#2B5F75; font-weight:500; cursor:pointer; flex:none;}
.a-log-panel{flex:none; margin:0 40px 14px; background:#F2F0EA; border-radius:6px; padding:6px 20px; max-height:160px; overflow-y:auto;}
.a-log-panel .row{display:flex; gap:12px; font-size:12.5px; color:#4B5563; padding:6px 0; border-bottom:1px solid #E7E4DC;}
.a-log-panel .row:last-child{border-bottom:none;}
.sortable-ghost{opacity:.3;}

/* ---------- toast ---------- */
#toast{
  position:fixed; right:20px; bottom:20px; background:#193249; color:#fff;
  padding:12px 18px; border-radius:8px; font-size:13px; box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; max-width:340px; z-index:999;
}
#toast.show{opacity:1; transform:translateY(0);}
#toast.ok{background:#3C7A5C;}

/* ---------- generic form / page chrome (non-board pages) ---------- */
.page{max-width:820px; margin:0 auto; padding:40px 24px;}
.page h2{font-size:20px; margin:0 0 18px;}
.card-panel{background:#fff; border:1px solid #E7E4DC; border-radius:8px; padding:22px 26px; margin-bottom:20px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:#4B5563; margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:9px 11px; border:1px solid #D8D3C6; border-radius:6px; font-size:13.5px; font-family:inherit;
}
.btn{display:inline-block; padding:9px 18px; border-radius:6px; border:none; background:#193249; color:#fff; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;}
.btn.secondary{background:#E5E2DA; color:#20242c;}
.btn.danger{background:#a13e3e;}
table.simple{width:100%; border-collapse:collapse; font-size:13px;}
table.simple th{text-align:left; font-size:11.5px; color:#78808B; text-transform:uppercase; letter-spacing:.04em; padding:0 10px 8px 0; border-bottom:1px solid #E7E4DC;}
table.simple td{padding:10px 10px 10px 0; border-bottom:1px solid #F0EEE6; vertical-align:middle;}
.drag-handle{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:#A8A398; cursor:grab; border-radius:5px;}
.drag-handle:hover{color:#4B5563; background:#F0EEE6;}
#stageRows tr.sortable-ghost{opacity:.35;}
#stageRows tr.sortable-chosen td{background:#FBFAF6;}
.timeline{list-style:none; margin:0; padding:0;}
.timeline li{padding:12px 0; border-bottom:1px solid #F0EEE6; font-size:13px;}
.timeline .meta{font-size:11.5px; color:#78808B; margin-bottom:4px;}
.badge-ok{color:#3C7A5C; font-weight:700;}
.badge-fail{color:#A13E3E; font-weight:700;}
.gate-required{font-size:10.5px; font-weight:700; color:#B4762A; background:#F5EAD2; padding:2px 7px; border-radius:4px;}

/* =========================================================
   案B｜一覧性優先（高密度）
   ========================================================= */
.board-b{background:#F1F3F5; color:#10151C; font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif; min-height:calc(100vh - 64px);}
.b-head{height:56px; flex:none; padding:0 22px; background:#fff; border-bottom:1px solid #DDE2E7; display:flex; align-items:center; justify-content:space-between;}
.b-head .left{display:flex; align-items:center; gap:14px;}
.b-head .app{font-size:15.5px; font-weight:700;}
.b-head .sep{width:1px; height:20px; background:#DDE2E7; display:inline-block;}
.b-head .proj{font-size:12.5px; color:#6B7684;}
.b-head .right{display:flex; align-items:center; gap:12px;}
.b-head .rolelbl{font-size:12px; color:#6B7684;}
.b-add{font-size:12.5px; font-weight:600; padding:6px 11px; background:#10151C; color:#fff; border-radius:4px; text-decoration:none;}
.b-filters{height:40px; flex:none; padding:0 22px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #E3E7EC;}
.b-chip{font-size:12px; padding:4px 10px; background:#FFFFFF; border:1px solid #D5DCE4; border-radius:999px; color:#4B5563;}
.b-chip.dark{background:#10151C; color:#fff; border-color:#10151C; font-weight:600;}
.b-chip.warn{background:#FFF7E8; border-color:#E8C98A; color:#8A5A12; font-weight:600;}
.b-filters .spacer{flex:1;}
.b-filters .upd{font-size:11.5px; color:#65707E;}
.b-grid{padding:14px 22px 10px; display:grid; grid-template-columns:repeat(8,1fr); gap:10px; overflow-x:auto;}
.b-lane{min-width:0; display:flex; flex-direction:column; background:#fff; border:1px solid #DDE2E7; border-radius:5px; overflow:hidden; min-height:0;}
.b-lane-head{flex:none; padding:8px 9px 7px; border-bottom:1px solid #DDE2E7;}
.b-lane-head .row{display:flex; align-items:flex-start; justify-content:space-between; gap:6px;}
.b-lane-head .name{font-size:11.5px; font-weight:700; line-height:1.25;}
.b-lane-head .cnt{font-size:12px; font-weight:600;}
.b-lane-head .gate{display:inline-block; margin-top:2px; font-size:9.5px; font-weight:700; letter-spacing:.04em; color:#8A5A12; background:#F6E3BE; padding:2px 6px; border-radius:3px;}
.b-cards{min-height:120px; padding:7px; display:flex; flex-direction:column; gap:6px; overflow-y:auto;}
.b-card{display:flex; background:#fff; border:1px solid #DDE2E7; border-left:3px solid; border-radius:3px; text-decoration:none; color:inherit; cursor:grab;}
.b-card.no-drag{cursor:not-allowed;}
.b-card .inner{flex:1; min-width:0; padding:6px 7px; display:flex; flex-direction:column; gap:3px;}
.b-card .r1{display:flex; align-items:center; gap:5px;}
.b-card .id{font-size:10px; color:#65707E;}
.b-card .badge-late{font-size:9px; font-weight:700; color:#A13E3E; background:#FBE9E7; padding:1px 4px; border-radius:2px;}
.b-card .badge-lock{font-size:9px; color:#65707E; background:#EEF2F6; padding:1px 4px; border-radius:2px;}
.b-card .title{font-size:11.5px; font-weight:500; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.b-card .r3{display:flex; align-items:center; gap:6px; font-size:10px; color:#65707E;}
.b-card .av{width:15px; height:15px; border-radius:3px; color:#fff; font-size:8px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.b-log{flex:none; padding:0 22px; background:#fff; border-top:1px solid #DDE2E7; height:46px; display:flex; align-items:center; cursor:pointer;}
.b-log .headrow{display:flex; align-items:center; gap:16px; height:30px; width:100%;}
.b-log .lead{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;}
.b-log .count{font-size:10.5px; font-weight:500; color:#6B7684; background:#EEF2F6; padding:2px 6px; border-radius:3px;}
.b-log .sep{width:1px; height:18px; background:#DDE2E7;}
.b-log .latest{flex:1; min-width:0; display:flex; align-items:center; gap:12px; font-size:12px; color:#4B5563;}
.b-log .latest .t{font-size:10.5px; color:#65707E;}
.b-log .expand{font-size:12px; font-weight:600; color:#1D4ED8;}
.b-log-list{display:flex; flex-direction:column; gap:4px; font-size:12px; color:#4B5563;}
.b-log-list .row{display:flex; gap:10px;}
.b-log-list .t{font-size:10.5px; color:#65707E; flex:none; width:44px;}

/* =========================================================
   案C｜視認性と手触り
   ========================================================= */
.board-c{background:#151A21; color:#E8ECF1; font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif; min-height:calc(100vh - 64px);}
.c-head{height:74px; flex:none; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #242C36;}
.c-head .titles{display:flex; align-items:baseline; gap:16px;}
.c-head .app{font-size:18px; font-weight:800;}
.c-head .proj{font-size:12.5px; color:#7C8797;}
.c-head .right{display:flex; align-items:center; gap:12px;}
.c-pill{font-size:12.5px; font-weight:700; color:#F0C572; background:rgba(240,197,114,.12); border:1px solid rgba(240,197,114,.35); padding:6px 13px; border-radius:999px;}
.c-role{display:flex; align-items:center; gap:9px; background:#1E252E; border:1px solid #2E3742; padding:6px 13px 6px 7px; border-radius:999px;}
.c-role .av{width:26px; height:26px; border-radius:50%; background:#4A90A4; color:#0E1319; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.c-role span.lbl{font-size:12.5px;}
.c-grid{padding:18px 32px 14px; display:grid; grid-template-columns:repeat(8,1fr); gap:12px; overflow-x:auto;}
.c-lane{min-width:0; display:flex; flex-direction:column; border-radius:8px; overflow:hidden; min-height:0;}
.c-lane-head{flex:none; padding:10px 11px 9px; border-bottom:1px solid;}
.c-lane-head .row{display:flex; align-items:flex-start; justify-content:space-between; gap:6px;}
.c-lane-head .name{font-size:11.5px; font-weight:700; line-height:1.25;}
.c-lane-head .cnt{font-size:12px;}
.c-lane-head .gate{display:flex; align-items:center; gap:5px; margin-top:2px; font-size:10px; font-weight:700; color:#F0C572;}
.c-lane-head .gate .bar{width:11px; height:2px; background:#F0C572; display:inline-block;}
.c-cards{min-height:120px; padding:9px; display:flex; flex-direction:column; gap:8px; overflow-y:auto;}
.c-card{background:#FBFAF7; color:#171C23; border-radius:6px; padding:10px 11px 9px; box-shadow:0 10px 20px -14px rgba(0,0,0,.8); display:flex; flex-direction:column; gap:6px; border-top:3px solid; text-decoration:none; cursor:grab;}
.c-card.no-drag{cursor:not-allowed;}
.c-card .top{display:flex; align-items:center; justify-content:space-between;}
.c-card .id{font-size:10px; color:#65707E;}
.c-card .av{width:19px; height:19px; border-radius:50%; color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.c-card .title{font-size:12px; font-weight:500; line-height:1.35;}
.c-card .foot{display:flex; align-items:center; justify-content:space-between; font-size:10px; color:#65707E;}
.c-card .lock{margin-top:1px; font-size:10px; font-weight:700; color:#363C45; background:#DCD8CF; border-radius:3px; padding:3px 6px; text-align:center;}
.c-log{flex:none; margin:0 32px 18px; background:#1B222A; border:1px solid #2A323C; border-radius:8px; overflow:hidden;}
.c-log-head{padding:11px 16px; display:flex; align-items:center; justify-content:space-between; cursor:pointer;}
.c-log-head .lead{display:flex; align-items:center; gap:11px;}
.c-log-head .t1{font-size:12px; font-weight:700; letter-spacing:.03em; color:#C4CCD6;}
.c-log-head .t2{font-size:10.5px; color:#7C8797;}
.c-log-head .act{font-size:12px; font-weight:500; color:#7CC0D4;}
.c-log-body{padding:8px 16px 10px; display:grid; grid-template-columns:repeat(2,1fr); gap:5px 34px; max-height:110px; overflow-y:auto; border-top:1px solid #242C36;}
.c-log-body .row{display:flex; align-items:center; gap:10px; font-size:12px; color:#B4BDC8;}
.c-log-body .t{font-family:'SFMono-Regular',Consolas,monospace; font-size:10.5px; color:#7C8797; flex:none; width:38px;}
.c-log-body .mark{flex:none; width:12px; text-align:center; font-weight:700;}

/* ---------- manual (使い方) ---------- */
.manual-page{max-width:960px;}
.manual{max-width:880px; margin:0 auto; color:#1A1F26; font-size:14.5px; line-height:1.85;}
.manual h2{font-size:24px; font-weight:700; margin:0 0 6px;}
.manual .lead{color:#5b6472; font-size:14.5px; margin-bottom:32px;}
.manual h3{font-size:17px; font-weight:700; margin:40px 0 12px; padding-top:20px; border-top:1px solid #E7E4DC;}
.manual h3:first-of-type{border-top:none; padding-top:0; margin-top:0;}
.manual p{margin:0 0 14px; color:#3a4048;}
.manual .step-list{counter-reset:step; list-style:none; margin:0 0 20px; padding:0;}
.manual .step-list li{
  counter-increment:step; position:relative; padding:4px 0 4px 40px; margin-bottom:14px; color:#3a4048;
}
.manual .step-list li::before{
  content:counter(step); position:absolute; left:0; top:2px; width:26px; height:26px; border-radius:50%;
  background:#193249; color:#fff; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.manual table{border-collapse:collapse; width:100%; margin:0 0 22px; font-size:13.5px;}
.manual th{text-align:left; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:#78808B; padding:0 14px 8px 0; border-bottom:1px solid #D6D3CB;}
.manual td{padding:11px 14px 11px 0; border-bottom:1px solid #E7E4DC; vertical-align:top; color:#3a4048;}
.manual td:first-child{font-weight:700; color:#1A1F26; white-space:nowrap;}
.manual figure{margin:16px 0 26px; background:#fff; border:1px solid #E0DDD4; border-radius:8px; padding:10px; box-shadow:0 6px 18px -12px rgba(26,31,38,.3);}
.manual figure img{width:100%; display:block; border-radius:4px;}
.manual figcaption{font-size:12.5px; color:#78808B; padding:10px 4px 2px;}
.manual .badge{display:inline-block; font-size:11px; font-weight:700; background:#E5E2DA; color:#3F464F; padding:2px 8px; border-radius:4px;}
.manual .flow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 20px; font-size:13px;}
.manual .flow span.step{background:#fff; border:1px solid #E0DDD4; border-radius:6px; padding:7px 12px;}
.manual .flow span.step.gate{border-color:#B4762A; color:#8A5A12; background:#FFF7E8; font-weight:700;}
.manual .flow span.arrow{color:#B0AA9C;}
.manual .qa dt{font-weight:700; margin-top:14px; color:#1A1F26;}
.manual .qa dd{margin:4px 0 0; color:#3a4048;}
.manual .note{background:#F2F0EA; border-radius:8px; padding:14px 18px; margin:0 0 20px; font-size:13.5px; color:#4B5563;}