/* 전자계약 — 진행 막대·계약서 문서·서명란·의뢰인 화면. controls.css 뒤에 옵니다. */

/* ─── 진행 막대 (발송 → 열람 → 신분증 → 서명) ─── */
.estep{display:inline-flex;align-items:center;gap:0;vertical-align:middle}
.estep i{
  display:block;width:8px;height:8px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);flex:0 0 auto;
}
.estep b{display:block;width:11px;height:1.5px;background:var(--line)}
.estep i.on{background:var(--jade);border-color:var(--jade)}
.estep b.on{background:var(--jade)}
.estep i.now{border-color:var(--brass);border-style:dashed;background:var(--brass-bg)}
.estep i.cold{border-color:var(--seal);background:var(--seal-bg)}
.estep-l{font-size:11.5px;color:var(--ink-3);margin-left:8px;vertical-align:middle}

/* ─── 로그 (§8.1.4 전항목) ─── */
.elog{display:grid;grid-template-columns:78px 1fr;gap:6px 12px;font-size:12.5px}
.elog dt{color:var(--ink-3);font-size:12px}
.elog dd{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.elog dd.none{color:var(--ink-3)}

/* ─── 계약서 문서 ─── */
.cdoc{
  background:var(--surface);border:1px solid var(--line);border-radius:7px;
  padding:20px 22px;font-size:13px;line-height:1.9;
}
.cdoc h4{font-size:15px;font-weight:800;letter-spacing:-.02em;text-align:center;margin-bottom:3px}
.cdoc .meta{text-align:center;font-size:11.5px;color:var(--ink-3);margin-bottom:15px}
.cdoc hr{border:none;border-top:1px solid var(--line-soft);margin:13px 0}
.cdoc .party{font-size:12.5px;line-height:1.8;margin-bottom:11px}
.cdoc .chead{
  display:grid;grid-template-columns:100px 1fr;border:1px solid var(--line-soft);
  border-radius:5px;overflow:hidden;font-size:12.5px;line-height:1.6;
}
.cdoc .chead .k{background:#F8F9FC;color:var(--ink-3);padding:6px 10px;border-bottom:1px solid var(--line-soft);font-weight:600}
.cdoc .chead .v{padding:6px 10px;border-bottom:1px solid var(--line-soft)}
.cdoc .chead .k:nth-last-child(2),.cdoc .chead .v:last-child{border-bottom:none}
.cl{margin-bottom:11px}
.cl .n{font-weight:700;color:var(--ink);font-size:12.5px}
.cl .b{color:var(--ink-2)}
.cl .b b{color:var(--ink);background:#F4F6F9;padding:0 4px;border-radius:3px}

/* 금액·계좌는 의뢰인이 못 고칩니다. DB가 원본이고 계약서는 사본입니다. */
.locked{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
  color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:0 5px;
}

/* ─── 의뢰인이 채우는 칸 ─── 화면 폭과 무관하게 항상 세로 1열입니다.
   휴대폰을 가로로 눕혀도 2열로 벌어지지 않게 하려고 폭 조건을 아예 두지 않습니다. */
.fillin{display:grid;grid-template-columns:1fr;gap:11px 14px;margin-top:4px}
.fillin .fi{display:flex;flex-direction:column;gap:4px}
.fillin label{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.fillin input{padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}
.fillin input:focus{outline:2px solid var(--navy);outline-offset:-1px}
.fillin input.miss{border-color:var(--seal);background:var(--seal-bg)}

/* ─── 서명란 ─── */
.sigslot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px dashed var(--brass);background:var(--brass-bg);
  border-radius:6px;padding:9px 12px;margin-top:7px;
}
.sigslot.done{border-style:solid;border-color:var(--jade);background:var(--jade-bg)}
.sigslot .t{font-size:12px;font-weight:600;color:var(--brass)}
.sigslot.done .t{color:var(--jade)}
.sigslot img{height:34px;display:block}

.sigpad{
  width:100%;height:150px;border:1px solid var(--line);border-radius:6px;
  background:#FCFCFD;touch-action:none;display:block;cursor:crosshair;
}
.sigpad-l{
  font-size:11.5px;color:var(--ink-3);display:flex;
  justify-content:space-between;align-items:center;margin-top:7px;
}

/* ─── 의뢰인 화면 (시연 프레임) ─── */
.client-bar{
  background:var(--navy);color:#fff;border-radius:7px;padding:11px 15px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.client-bar b{font-size:12.5px;font-weight:700}
.client-bar span{font-size:11.5px;color:#A9B7CE}
.client-bar .btn{background:transparent;color:#fff;border-color:#3A5182}
.client-bar .btn:hover{background:#1E3A66;border-color:#4A6699}
.client{max-width:520px;margin:0 auto}
.client .card{border-color:var(--line)}

.pstep{display:flex;gap:6px;margin-bottom:14px}
.pstep div{
  flex:1;text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-3);
  border-bottom:2px solid var(--line);padding-bottom:7px;
}
.pstep div.on{color:var(--navy);border-bottom-color:var(--navy)}
.pstep div.ok{color:var(--jade);border-bottom-color:var(--jade)}

.drop{
  border:1px dashed var(--line);border-radius:7px;background:#FAFBFC;
  padding:26px 16px;text-align:center;color:var(--ink-3);font-size:12.5px;
}
.drop:hover{border-color:var(--navy);color:var(--ink-2)}
.drop.ok{border-style:solid;border-color:var(--jade);background:var(--jade-bg);color:var(--jade);font-weight:600}