:root {
  --blue:#1D76B2; --ink:#364656; --node:#E8F1F7; --warn-bg:#FDF0E3; --warn:#B54708;
  --bg:#F4F6F8; --line:#D8DEE4; --green:#1B7A43; --green-bg:#E4F3EA; --dim:#667085; --red:#B42318; --red-bg:#FBEAE7;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; color:var(--ink); background:#fff; line-height:1.7; }
a { color:var(--blue); }
.hidden { display:none !important; }
p { margin:8px 0; font-size:14px; }
.note { font-size:12.5px; color:var(--dim); }
h2 { font-size:15px; margin:0 0 10px; }
h3 { font-size:15px; margin:18px 0 8px; }
main { max-width:1120px; margin:0 auto; padding:8px 32px 64px; }

/* --- アプリシェル: 左サイドバー + ページ見出し + 白パネル --- */
body { background:#F6F8FA; }
body.app { display:flex; min-height:100vh; }
aside.side { width:228px; flex:none; background:#fff; border-right:1px solid var(--line); position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.side .brand { display:flex; align-items:center; gap:10px; padding:18px 18px 12px; text-decoration:none; color:var(--ink); }
.brand .mark { width:30px; height:30px; display:block; flex:none; }
.brand .pname { font-size:16.5px; font-weight:800; letter-spacing:.01em; }
.side nav { padding:6px 10px; display:flex; flex-direction:column; gap:2px; }
.side nav a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:#4B5B6B; font-size:13.5px; font-weight:600; text-decoration:none; }
.side nav a svg { width:18px; height:18px; flex:none; }
.side nav a:hover { background:#F1F4F7; color:var(--ink); }
.side nav a.on { background:var(--node); color:var(--blue); }
.side .bottom { margin-top:auto; border-top:1px solid var(--line); padding:10px; }
.userchip { display:flex; width:100%; align-items:center; gap:10px; padding:6px 8px; border:1px solid transparent; border-radius:10px; cursor:pointer; background:none; font-family:inherit; color:var(--ink); text-align:left; }
.userchip:hover, .userchip.on { border-color:var(--line); background:#F6F8FA; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.userchip .ut { display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.3; }
.userchip .uname { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.userchip .role { font-size:11px; color:var(--dim); }
.wrap { flex:1; min-width:0; display:flex; flex-direction:column; }
.pagehead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 32px 0; width:100%; max-width:1280px; margin:0 auto; }
.pagehead h1 { font-size:21px; font-weight:800; line-height:1.3; }
.pagehead .sub { font-size:13px; color:var(--dim); margin:3px 0 0; }
.pagehead .actions { display:flex; gap:8px; align-items:center; flex:none; padding-top:2px; }
main.content { width:100%; max-width:1280px; margin:0 auto; padding:16px 32px 24px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:14px; }
.panel > h3 { margin:0 0 10px; font-size:14.5px; }
.panel .ptop { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.panel .ptop h3 { margin:0; }
.panel .ptop .grow { flex:1; }
.panel .ptop .cnt { font-size:12.5px; color:var(--dim); }
.panel .twrap { border:none; border-radius:0; max-height:none; }
.panel table.grid thead th { background:#F6F8FA; }
main.bare { display:flex; align-items:center; justify-content:center; min-height:100vh; flex-direction:column; gap:18px; }
footer { width:100%; max-width:1280px; margin:0 auto; padding:0 32px 28px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:12px; border:none; }
/* ステッパー（分析画面） */
.stepper { list-style:none; display:flex; gap:6px; align-items:center; margin:0 0 14px; padding:0; }
.stepper li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim); font-weight:600; padding:6px 12px 6px 6px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.stepper li .n { width:22px; height:22px; border-radius:50%; background:#E9EDF1; color:var(--dim); font-size:12px; display:inline-flex; align-items:center; justify-content:center; }
.stepper li.on { color:var(--blue); border-color:var(--blue); }
.stepper li.on .n { background:var(--blue); color:#fff; }
.stepper li.done { color:var(--green); }
.stepper li.done .n { background:var(--green-bg); color:var(--green); }
.stepper .arrow { color:#B9C4CD; }
.sub-note { font-size:12.5px; color:var(--dim); }

/* --- ボタン・入力 --- */
button.primary { background:var(--blue); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:700; padding:12px 34px; cursor:pointer; font-family:inherit; }
button.primary:disabled { background:#B9C4CD; cursor:default; }
button.ghost, a.ghost { display:inline-block; text-decoration:none; line-height:1.4; background:#fff; color:var(--blue); border:1px solid var(--blue); border-radius:8px; font-size:13px; font-weight:600; padding:8px 18px; cursor:pointer; font-family:inherit; }
button.ghost:disabled { color:var(--dim); border-color:var(--line); cursor:default; }
button.mini, a.mini { display:inline-block; text-decoration:none; line-height:1.6; background:#fff; color:var(--blue); border:1px solid var(--blue); border-radius:6px; font-size:11.5px; font-weight:600; padding:2px 10px; cursor:pointer; font-family:inherit; white-space:nowrap; }
button.mini:hover, a.mini:hover { background:var(--node); }
button.mini.danger { color:var(--red); border-color:#E4B3AD; }
button.mini.danger:hover { background:var(--red-bg); }
button.primary.sm { font-size:13px; padding:7px 16px; }
.lnk { background:none; border:none; color:var(--blue); font-size:12.5px; cursor:pointer; font-family:inherit; text-decoration:underline; }
button.ghost.sm { font-size:12.5px; padding:6px 14px; }
/* 行の操作: 歯車ボタン → その場に浮くメニュー */
button.gear { width:30px; height:30px; border:1px solid var(--line); border-radius:6px; background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; vertical-align:middle; }
button.gear:hover, button.gear.on { background:var(--node); border-color:var(--blue); }
.popmenu { position:fixed; z-index:60; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.14); min-width:200px; padding:6px; }
.popmenu button { display:block; width:100%; text-align:left; background:none; border:none; padding:8px 12px; font-size:13px; cursor:pointer; font-family:inherit; border-radius:6px; color:var(--ink); white-space:nowrap; }
.popmenu button:hover { background:var(--node); }
.popmenu button:disabled { color:var(--dim); cursor:default; background:none; }
.popmenu button.danger { color:var(--red); }
.popmenu button.danger:hover { background:var(--red-bg); }
.popmenu .sep { height:1px; background:var(--line); margin:6px 4px; }
input[type=text], input[type=password], textarea, select { border:1px solid var(--line); border-radius:6px; padding:8px 12px; font-size:13.5px; font-family:inherit; color:var(--ink); background:#fff; }
input[type=text]:focus, input[type=password]:focus, textarea:focus { outline:2px solid #BFD8EA; border-color:var(--blue); }
label.f { display:block; font-size:12.5px; color:var(--dim); font-weight:600; margin:12px 0 4px; }
.msg { font-size:13px; min-height:1.2em; margin:8px 0; }
.msg.err { color:var(--red); }
.msg.ok { color:var(--green); }
.callout { background:var(--node); border-left:4px solid var(--blue); border-radius:0 8px 8px 0; padding:11px 16px; margin:14px 0; font-size:13.5px; }
.callout.warn { background:var(--warn-bg); border-left-color:var(--warn); }
.errbox { background:var(--warn-bg); border-left:4px solid var(--warn); border-radius:0 8px 8px 0; padding:12px 16px; margin:14px 0; font-size:13.5px; color:var(--warn); }

/* --- ログイン --- */
.loginbox { width:420px; max-width:92vw; background:#fff; border:1px solid var(--line); border-radius:12px; padding:28px 32px 26px; box-shadow:0 8px 24px rgba(16,24,40,.06); }
.loginbox h2 { font-size:18px; margin:0 0 6px; }
.loginbox input { width:100%; }
.loginbox button.primary { width:100%; margin-top:18px; }

/* --- 棚 (セット) --- */
.drop { border:2px dashed #A8BECF; border-radius:10px; background:var(--bg); padding:22px 24px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.drop.over { background:var(--node); border-color:var(--blue); }
.drop .big { font-size:15px; font-weight:600; }
.drop .sub { font-size:12.5px; color:var(--dim); margin-top:4px; }
.setcard { border:1px solid var(--line); border-radius:10px; margin:14px 0; background:#fff; }
.setcard.over { border-color:var(--blue); background:var(--node); }
.setcard .sh { display:flex; align-items:center; gap:12px; padding:12px 16px; }
.setcard .sh .info { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.setcard .sh .acts { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.setcard .sh .name { font-size:15.5px; font-weight:700; }
.setcard .sh .meta { font-size:12px; color:var(--dim); }
.setcard .sh .grow { flex:1; }
.setcard .sb { padding:0 16px 12px; }
.setcard .memo { font-size:12.5px; color:var(--dim); margin:0 0 6px; white-space:pre-wrap; }
.ready { display:inline-block; padding:1px 10px; border-radius:999px; font-size:11.5px; font-weight:700; }
.ready.ok { background:var(--green-bg); color:var(--green); }
.ready.ng { background:var(--warn-bg); color:var(--warn); }
.ready.gray { background:#EDEFF2; color:var(--dim); }
.filetbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.filetbl th { background:var(--bg); text-align:left; padding:5px 10px; font-weight:600; font-size:11.5px; color:var(--dim); }
.filetbl td { border-top:1px solid var(--line); padding:5px 10px; vertical-align:middle; }
.filetbl td.acts { text-align:right; white-space:nowrap; }
.kind { display:inline-block; padding:0 8px; border-radius:6px; background:var(--node); color:var(--blue); font-size:11px; font-weight:600; white-space:nowrap; }
.kind.teian { background:#EDEFF2; color:var(--dim); }
.empty { color:var(--dim); font-size:13px; padding:10px 0; }
.toolrow { display:flex; align-items:center; gap:12px; margin:14px 0; flex-wrap:wrap; }
.toolrow input[type=text] { width:320px; }

/* --- 分析進行 --- */
.statusrow { display:flex; align-items:center; gap:12px; margin:10px 0; }
.statusrow .txt { font-size:14px; font-weight:600; flex:1; }
.statusrow .time { font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums; }
.spin { animation:rot 1s linear infinite; }
@keyframes rot { to { transform:rotate(360deg); } }
.bar { height:8px; background:var(--node); border-radius:999px; overflow:hidden; margin:6px 0 16px; }
.bar > div { height:100%; width:0%; background:var(--blue); border-radius:999px; transition:width .3s; }
.steps { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.step { flex:1; min-width:150px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 14px; }
.step .h { font-weight:700; font-size:11.5px; color:var(--dim); }
.step .t { font-size:12.5px; margin-top:1px; }
.step .c { font-size:17px; font-weight:700; color:var(--dim); margin-top:3px; font-variant-numeric:tabular-nums; }
.step.active { border-color:var(--blue); background:var(--node); }
.step.active .h, .step.active .c { color:var(--blue); }
.step.done { border-color:var(--line); background:#fff; }
.step.done .h { color:var(--green); }
.step.done .c { color:var(--ink); }
#log { background:var(--bg); border:1px solid var(--line); border-radius:8px; height:260px; overflow-y:auto; padding:10px 14px; font-family:"SF Mono",Menlo,Osaka-mono,monospace; font-size:12px; line-height:1.85; }
#log .it { font-weight:700; color:var(--ink); }
#log .rc { color:var(--dim); padding-left:1.5em; }
#log .ng { color:var(--warn); padding-left:1.5em; }
#log .sys { color:var(--blue); }
#log .warnline { color:var(--warn); font-weight:600; }

/* --- サマリ --- */
.cards { display:flex; gap:14px; flex-wrap:wrap; margin:14px 0; }
.card { flex:1; min-width:150px; background:var(--bg); border-radius:10px; padding:14px 18px; }
.card .n { font-size:26px; font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; }
.card .n small { font-size:14px; }
.card .t { font-size:12px; color:var(--dim); margin-top:2px; }
.badge { display:inline-flex; align-items:center; gap:8px; border-radius:8px; padding:10px 18px; font-size:14px; font-weight:700; margin:6px 8px 6px 0; }
.badge.green { background:var(--green-bg); color:var(--green); }
.badge.amber { background:var(--warn-bg); color:var(--warn); }
.badge.gray { background:#EDEFF2; color:var(--dim); font-weight:600; }
.badge .fn { font-size:11.5px; font-weight:400; }

/* --- 表 --- */
.tbltools { display:flex; align-items:center; gap:14px; margin:10px 0; flex-wrap:wrap; }
.tbltools input[type=text] { width:320px; }
.tbltools .cnt { font-size:12.5px; color:var(--dim); }
.twrap { overflow:auto; max-height:560px; border:1px solid var(--line); border-radius:8px; }
table.grid { border-collapse:collapse; width:100%; font-size:12.5px; white-space:nowrap; }
table.grid th { background:var(--node); text-align:left; padding:7px 10px; font-weight:600; position:sticky; top:0; z-index:1; }
table.grid td { border-bottom:1px solid var(--line); padding:5px 10px; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
table.grid tbody tr.item { cursor:pointer; }
table.grid tbody tr.item:hover td { background:var(--node); }
.reasons table { width:auto; min-width:420px; }
.reasons td, .reasons th { white-space:normal; }

/* --- 移動計画表（アイテム単位・内訳展開） --- */
.legend { font-size:12px; color:var(--dim); margin:4px 0 8px; display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
tr.item.open td { background:var(--node); }
.tg { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; border:1px solid var(--line); background:#fff; vertical-align:middle; }
.tg svg { transition:transform .15s; }
tr.item.open .tg svg { transform:rotate(90deg); }
tr.detail > td { background:#FAFBFC; padding:10px 14px 14px 46px; cursor:default; white-space:normal; border-bottom:2px solid var(--line); }
tr.detail:hover > td { background:#FAFBFC; }
table.grid thead th.wrap { white-space:normal; min-width:132px; line-height:1.4; }
td.name { max-width:250px; white-space:normal; line-height:1.4; }
td.sell { max-width:170px; white-space:normal; font-size:11.5px; line-height:1.5; }
tr.item > td { vertical-align:middle; }
table.sub { width:auto; min-width:560px; border:1px solid var(--line); border-radius:6px; background:#fff; border-collapse:collapse; font-size:12px; }
table.sub th { background:#EEF3F7; font-size:11.5px; text-align:left; padding:6px 10px; font-weight:600; }
table.sub td { padding:5px 10px; border-top:1px solid var(--line); }
table.sub tr.sell td { background:#F3FAF5; }
.tag { display:inline-block; padding:0 8px; border-radius:999px; font-size:11px; font-weight:600; margin-right:4px; white-space:nowrap; }
.tag.sell { background:var(--green-bg); color:var(--green); }
.tag.miss { background:var(--warn-bg); color:var(--warn); }

/* --- 判断トレースドロワー --- */
#shade { position:fixed; inset:0; background:rgba(54,70,86,.42); z-index:40; }
#drawer { position:fixed; top:0; right:0; bottom:0; width:640px; max-width:92vw; background:#fff; z-index:41; box-shadow:-4px 0 24px rgba(0,0,0,.18); display:flex; flex-direction:column; }
#drawer .dh { background:var(--ink); color:#fff; padding:16px 22px; }
#drawer .dh .k { color:#9fc3dd; font-size:11.5px; letter-spacing:.08em; }
#drawer .dh h3 { font-size:16px; margin:2px 0 0; color:#fff; }
#drawer .dh .m { font-size:12px; color:#c3ccd4; margin-top:3px; }
#drawer .db { padding:16px 22px; overflow-y:auto; flex:1; }
#drawer .close { position:absolute; top:14px; right:16px; background:none; border:none; cursor:pointer; padding:6px; }
#drawer h4 { font-size:13.5px; margin:14px 0 6px; }
#drawer table.grid { font-size:12px; }
#drawer .twrap { max-height:none; overflow-x:auto; }
.b { display:inline-block; padding:0 9px; border-radius:999px; font-size:11.5px; font-weight:600; }
.b.green { background:var(--green-bg); color:var(--green); }
.b.amber { background:var(--warn-bg); color:var(--warn); }
tr.ngrow td { background:#FDFAF5; }

/* --- モーダル --- */
#modalwrap { position:fixed; inset:0; background:rgba(54,70,86,.42); z-index:50; display:flex; align-items:center; justify-content:center; }
#modal { background:#fff; border-radius:12px; padding:22px 26px; width:480px; max-width:92vw; box-shadow:0 8px 32px rgba(0,0,0,.2); }
#modal h3 { margin:0 0 10px; }
#modal input[type=text], #modal textarea { width:100%; }
#modal .acts { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.pwbox { font-family:"SF Mono",Menlo,monospace; font-size:18px; font-weight:700; background:var(--bg); padding:10px 14px; border-radius:8px; letter-spacing:.06em; user-select:all; }

