:root{
  --bg:#f6f4ef;
  --panel:#ffffff;
  --panel-alt:#f9f7f2;
  --ink:#1c2430;
  --ink2:#5a6472;
  --ink3:#9aa2ad;
  --line:#e3e0d8;
  --line2:#cfcbc0;
  --accent:#2c6f8c;
  --accent-ink:#1f5067;
  --accent-soft:rgba(44,111,140,.10);
  --ok:#2f8a55;
  --ok-soft:rgba(47,138,85,.10);
  --warn:#b47a10;
  --bad:#b8402f;
  --jp:'Zen Kaku Gothic New',-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--jp);color:var(--ink);background:var(--bg);
  overflow:hidden;font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* 3行構造 */
.app{display:grid;grid-template-rows:auto 1fr auto;height:100vh}

/* ── ヘッダ ── */
header.top{display:flex;align-items:center;gap:16px;padding:10px 18px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.brand .mark{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.brand .mark b{color:var(--accent)}
.brand .desc{font-size:11.5px;color:var(--ink3)}
.contract-title{font-size:13.5px;color:var(--ink);font-weight:600}
.contract-title .sub{color:var(--ink3);font-weight:400;margin-left:8px;font-size:11.5px}
.top .spacer{flex:1}

/* ボタン統一 */
.btn{border:1px solid var(--line2);background:var(--panel);border-radius:6px;
  padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-family:var(--jp);color:var(--ink);
  transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn.icon{padding:6px 8px}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn svg{display:block}

/* status pill はヘッダから外し、右のメータに集約 */

/* ── 本体2ペイン ── */
main.split{display:grid;grid-template-columns:1fr 1fr;min-height:0}

/* --- 左ペイン --- */
.left{display:flex;flex-direction:column;min-height:0;background:var(--panel-alt);
  border-right:1px solid var(--line)}
.left .toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;padding:5px 12px;font-family:var(--jp);
  font-size:12px;cursor:pointer;color:var(--ink2);font-weight:600}
.seg button:hover{color:var(--accent)}
.seg button.on{background:var(--accent);color:#fff}
.zoom{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--panel)}
.zoom button{border:0;background:transparent;padding:4px 9px;cursor:pointer;color:var(--ink2);font-weight:600}
.zoom button:hover{color:var(--accent)}
.zoom .val{padding:4px 8px;font-size:11.5px;color:var(--ink3);border-left:1px solid var(--line);border-right:1px solid var(--line);min-width:44px;text-align:center}
.left .toolbar .hint{font-size:11.5px;color:var(--ink3);margin-left:auto}

.left .stage{flex:1;overflow:auto;position:relative;background:var(--panel-alt);padding:18px}
.stage .frame{position:relative;display:inline-block;background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.stage img.scan{display:block;user-select:none;-webkit-user-drag:none;max-width:none}
.stage .empty{color:var(--ink3);font-size:12.5px;padding:60px 20px;text-align:center}
.stage .drawing-layer{position:absolute;inset:0;cursor:crosshair}

.stage .box{position:absolute;border:1.5px solid var(--accent);background:var(--accent-soft);
  box-sizing:border-box;cursor:move;transition:box-shadow .15s,border-color .12s}
.stage .box:hover{border-color:var(--accent-ink);background:rgba(44,111,140,.14)}
.stage .box.active{border:2px solid var(--accent);background:rgba(44,111,140,.22);
  box-shadow:0 0 0 3px rgba(44,111,140,.28), 0 0 24px rgba(44,111,140,.35);z-index:5;
  animation:boxPulse 1.6s ease-in-out infinite}
@keyframes boxPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(44,111,140,.28), 0 0 24px rgba(44,111,140,.35)}
  50%   {box-shadow:0 0 0 5px rgba(44,111,140,.34), 0 0 32px rgba(44,111,140,.45)}
}
.stage .box.verified{border-color:var(--ok);background:var(--ok-soft);cursor:not-allowed}
.stage .box.verified:hover{border-color:var(--ok);background:var(--ok-soft)}
.stage .box.verified .handle{display:none}
.stage .box .lbl{position:absolute;top:-19px;left:-1.5px;background:var(--accent);color:#fff;
  font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:3px 3px 0 0;white-space:nowrap;
  font-family:var(--jp);pointer-events:none;letter-spacing:.02em}
.stage .box.active .lbl{background:var(--accent-ink)}
.stage .box.verified .lbl{background:var(--ok)}
.stage .box .handle{position:absolute;width:10px;height:10px;background:#fff;border:1.4px solid var(--accent);
  border-radius:2px;opacity:.72}
.stage .box:hover .handle,.stage .box.active .handle{opacity:1}
.stage .box .h-nw{left:-5px;top:-5px;cursor:nw-resize}
.stage .box .h-ne{right:-5px;top:-5px;cursor:ne-resize}
.stage .box .h-sw{left:-5px;bottom:-5px;cursor:sw-resize}
.stage .box .h-se{right:-5px;bottom:-5px;cursor:se-resize}

/* 枠内ツール：その場で再読取＋結果表示 */
.stage .box .box-tools{position:absolute;left:-2px;top:100%;margin-top:3px;
  display:flex;align-items:center;gap:6px;background:#fff;
  border:1px solid var(--line2);border-radius:5px;padding:2px 4px 2px 2px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  max-width:max(220px, 100%);white-space:nowrap;overflow:hidden;z-index:6;
  opacity:0;transform:translateY(-2px);transition:opacity .12s,transform .12s;pointer-events:none}
.stage .box:hover .box-tools,.stage .box.active .box-tools{opacity:1;transform:translateY(0);pointer-events:auto}
.stage .box .btn-reread{border:0;background:var(--accent);color:#fff;border-radius:3px;
  padding:2px 6px 2px 5px;font-size:10.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;font-family:var(--jp);white-space:nowrap}
.stage .box .btn-reread:hover{background:var(--accent-ink)}
.stage .box .btn-reread:disabled{background:var(--ink3);cursor:not-allowed}
.stage .box .btn-reread svg{display:block}
.stage .box .result{font-size:11px;color:var(--ink);font-family:var(--jp);
  max-width:180px;overflow:hidden;text-overflow:ellipsis}
.stage .box .result.draft{color:#8a6f22;font-style:italic}
.stage .box .result.ok{color:var(--ok);font-weight:600}
.stage .box .result.busy{color:var(--accent)}
.stage .box .result .dim{color:var(--ink3);font-size:10.5px}
.stage .box.verified .btn-reread{display:none}

/* --- 右ペイン --- */
.right{display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.right .toolbar{display:flex;align-items:center;gap:12px;padding:8px 14px;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.meter{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);font-weight:600}
.meter .bar{width:120px;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.meter .bar i{display:block;height:100%;background:var(--ok);transition:width .18s}
.right .toolbar .hint{font-size:11.5px;color:var(--ink3);margin-left:auto}

.right .form{flex:1;overflow:auto;padding:6px 0}
.row{display:grid;grid-template-columns:130px 1fr 40px;gap:14px;align-items:center;
  padding:10px 18px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .12s;min-height:52px}
.row:hover{background:var(--panel-alt)}
.row.active{background:var(--accent-soft)}
.row.active .lbl{color:var(--accent-ink)}
.row .lbl{font-weight:600;font-size:12.5px;color:var(--ink);line-height:1.35}
.row .input-wrap{position:relative}
.row input,.row textarea,.row select{width:100%;border:1px solid var(--line2);
  background:#fff;border-radius:5px;padding:6px 9px;font-family:var(--jp);
  font-size:13.5px;color:var(--ink);transition:border-color .12s}
.row textarea{min-height:56px;resize:vertical;line-height:1.4}
.row input:focus,.row textarea:focus,.row select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft)}
.row input::placeholder,.row textarea::placeholder{color:var(--ink3);font-style:italic;font-size:12.5px}

/* 下書き状態：OCR結果が入ってて、まだ人の手が入っていない */
.row input.draft,.row textarea.draft,.row select.draft{
  background:#fdfaf0;border-color:#e6d9a8;color:#6b5b2f;font-style:italic}
.row .lbl .draft-tag{display:inline-block;margin-left:6px;font-size:10px;font-weight:600;
  background:#fdfaf0;color:#8a6f22;border:1px solid #e6d9a8;padding:0 5px;border-radius:3px;
  letter-spacing:.02em;font-style:normal}

/* 確認済＝入力欄ロック（ただし中の文字は「実線」で濃くはっきり読める） */
.row.verified input,.row.verified textarea,.row.verified select{
  background:#f5faf6;border-color:#cfe6d7;
  color:var(--ink) !important;-webkit-text-fill-color:var(--ink);
  font-style:normal !important;font-weight:600;opacity:1;cursor:default}
.row.verified .input-wrap::after{content:'';position:absolute;right:8px;top:8px;
  width:14px;height:14px;background:var(--ok);border-radius:50%;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:12px;background-position:center;background-repeat:no-repeat}

.row .cb{width:22px;height:22px;border:1.5px solid var(--line2);border-radius:5px;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s}
.row .cb:hover{border-color:var(--ok)}
.row .cb svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.row.verified .cb{background:var(--ok);border-color:var(--ok)}
.row.verified .cb svg{opacity:1}
.row.verified .lbl{color:var(--ink2)}
.row.verified{background:#f5faf6}
.row.verified.active{background:#e8f0ea}

/* ── フッタ ── */
footer.bottom{display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--panel);
  border-top:1px solid var(--line)}
footer.bottom .spacer{flex:1}
footer.bottom .info{font-size:11.5px;color:var(--ink3)}

/* ── モーダル ── */
.modal{position:fixed;inset:0;background:rgba(28,36,48,.35);display:none;align-items:center;
  justify-content:center;z-index:100;padding:40px;backdrop-filter:blur(2px)}
.modal.on{display:flex}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.16);width:100%;max-width:780px;max-height:calc(100vh - 80px);
  display:flex;flex-direction:column;overflow:hidden}
.modal .box header{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.modal .box header h2{margin:0;font-size:14px;font-weight:700}
.modal .box header .close{margin-left:auto;background:transparent;border:0;cursor:pointer;color:var(--ink3);padding:4px}
.modal .box header .close:hover{color:var(--ink)}
.modal .box .body{overflow:auto;padding:14px 16px}

.modal .list{display:flex;flex-direction:column;gap:6px}
.modal .list .item{border:1px solid var(--line);background:var(--panel);border-radius:8px;
  padding:10px 12px;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  transition:border-color .12s}
.modal .list .item:hover{border-color:var(--accent)}
.modal .list .item .name{font-weight:600;font-size:13px}
.modal .list .item .meta{font-size:11.5px;color:var(--ink3);margin-top:2px}
.modal .list .empty{color:var(--ink3);text-align:center;padding:30px;font-size:12.5px}
.status-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:20px;
  padding:2px 10px;font-size:11px;color:var(--ink2);background:var(--panel-alt)}
.status-chip.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.status-chip.warn{background:rgba(180,122,16,.10);color:var(--warn);border-color:var(--warn)}

.modal .setup{display:grid;gap:14px}
.modal .setup label{font-weight:700;font-size:12px}
.modal .setup .note{font-size:11.5px;color:var(--ink2);line-height:1.6;background:var(--panel-alt);
  border-left:3px solid var(--line2);padding:8px 10px;border-radius:0 6px 6px 0}
.modal .setup .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

svg.ic{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
svg.ic-lg{width:18px;height:18px}

.blank{padding:60px 20px;text-align:center;color:var(--ink3)}
.blank h3{margin:0 0 8px;color:var(--ink);font-weight:600;font-size:14px}
.blank p{margin:0 0 12px;font-size:12.5px;line-height:1.6}

/* ══ 左＝スキャン(teal) / 右＝項目マスタ(Excel緑) の視覚分離 ══ */
:root{ --excel:#217346; --excel-ink:#194f30; --excel-soft:rgba(33,115,70,.12); }

/* ヘッダの左右グループ */
.hgroup{display:inline-flex;align-items:center;gap:8px}
.right-group{padding-left:14px;border-left:1px solid var(--line)}
.mst-count{font-size:11px;font-weight:800;color:var(--excel);background:var(--excel-soft);
  padding:4px 10px;border-radius:999px;white-space:nowrap}

/* Excel緑ボタン */
.btn.excel{background:var(--excel);color:#fff;border-color:var(--excel)}
.btn.excel:hover{background:var(--excel-ink);border-color:var(--excel-ink);color:#fff}

/* 右ペイン＝項目(Excel)側の緑アクセント */
.right{border-top:3px solid var(--excel)}
#meterBar{background:var(--excel)}

/* 契約なし時の項目マスタ・プレビュー（スキャンと独立を可視化） */
.preview-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 16px;background:var(--excel-soft);border-bottom:1px solid var(--line);
  font-size:12px;font-weight:800;color:var(--excel)}
.preview-head .hintx{font-weight:500;color:var(--ink3)}
.row.preview{opacity:.55}
.row.preview .ph{color:var(--ink3);font-size:12px}
.cb.ghost{visibility:hidden}

/* 上を1段に統一（左=スキャン操作 / 右=項目・進捗 を1本の帯へ畳む） */
.brand .desc{display:none}
header.top{gap:10px;padding:8px 12px;overflow-x:auto}
.hgroup{gap:6px;flex:0 0 auto}
.hsep{width:1px;align-self:stretch;background:var(--line);margin:2px 3px;flex:0 0 auto}
.top .btn{padding:6px 10px;font-size:12px}
.top .zoom button{padding:4px 8px}
.top .meter .bar{width:88px}
.contract-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}