/* 📄 위탁계약서 (public/features/contract.js) — 2026-10-21 정리의 날에 style.css에서 옮김 (순서 그대로) */
/* 📄 위탁계약서 (협의완료된 위탁 카드) — 없으면 카드 맨 위 에스프레소 띠, 올리면 사진 아래 작은 한 줄 */
.rec-card.has-ctband { padding-top: 0; overflow: hidden; }
.ct-band { display: flex; align-items: center; gap: 10px; margin: 0 -16px 12px; padding: 10px 12px 10px 16px; background: #3b2a22; color: #f3e6da; font-size: 13.5px; }
.ct-band b { font-weight: 800; color: #fff; letter-spacing: -.01em; }
.ct-band .ct-bt:first-of-type { margin-left: auto; }
.ct-bt.ghost { background: transparent; color: #f0d8c4; box-shadow: inset 0 0 0 1px rgba(240, 216, 196, .55); }
.ct-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e8b48c; box-shadow: 0 0 0 4px rgba(232, 180, 140, .2); }
.ct-band .ct-dot { animation: ctDot 2.4s ease-in-out infinite; }
.ct-dot.ok { background: #8c5f48; box-shadow: none; width: 6px; height: 6px; }
@keyframes ctDot { 0%, 100% { box-shadow: 0 0 0 3px rgba(232, 180, 140, .15); } 50% { box-shadow: 0 0 0 6px rgba(232, 180, 140, .32); } }
@media (prefers-reduced-motion: reduce) { .ct-band .ct-dot { animation: none; } }
.ct-bt { border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 800; background: #f0d8c4; color: #2c2321; cursor: pointer; white-space: nowrap; }
.ct-bt:hover { background: #f6e3d3; }
.rec-card.has-ctband.st-done::after { top: 62px; } /* 「완료」 표시가 띠에 겹치지 않게 */
.ct-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 2px; font-size: 13px; font-weight: 700; color: #6e4836; }
.ct-lk { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12.5px; font-weight: 600; color: #8a6a58; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ct-lk:hover { color: #3b2a22; }
.ct-line .ct-lk:first-of-type { margin-left: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct-band { background: #1f1714; } :root:not([data-theme="light"]) .ct-line { color: #ecc8b2; } :root:not([data-theme="light"]) .ct-lk { color: #c3ab9c; } :root:not([data-theme="light"]) .ct-dot.ok { background: #d8ad92; } }
:root[data-theme="dark"] .ct-band { background: #1f1714; } :root[data-theme="dark"] .ct-line { color: #ecc8b2; } :root[data-theme="dark"] .ct-lk { color: #c3ab9c; } :root[data-theme="dark"] .ct-dot.ok { background: #d8ad92; }

/* 📄 위탁계약서 (앱에서 쓰기 · 서명 링크) */
.ct-doc { margin: 10px 0 2px; padding: 10px 12px; border-radius: 10px; background: #f6efe8; border: 1px solid #e7dbcf; display: flex; flex-direction: column; gap: 3px; }
.ct-doc .ct-dt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3b2a22; }
.ct-doc small { font-size: 12.5px; color: #7d6c63; }
.ct-doc .ct-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.ct-doc .ct-acts .ct-lk { min-height: 32px; }
.ct-doc:not(.ok) .ct-dot { background: #c98a3c; box-shadow: 0 0 0 3px rgba(201, 138, 60, .18); }
.ct-doc.ok .ct-dot { background: #4f7a52; width: 8px; height: 8px; }
.ct-ver { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #e7dbcf; color: #5f4a3e; }
.ct-ed { display: flex; flex-direction: column; gap: 12px; }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.ct-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ct-grid .w2 { grid-column: 1 / -1; }
.ct-grid input { width: 100%; }
.ct-kind { font-size: 13.5px; }
.ct-allbar { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.ct-allbar b { margin-right: auto; font-size: 15px; }
.ct-items { display: flex; flex-direction: column; gap: 10px; }
.ct-it { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 7px; background: var(--panel); }
.ct-it.buy { border-color: #c9b3a0; background: #faf5ef; }
.ct-it input { width: 100%; min-width: 0; }
.ct-it-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-no { min-width: 22px; height: 22px; border-radius: 50%; background: #3b2f2b; color: #fbf3ec; font-size: 12px; display: inline-grid; place-items: center; }
.ct-seg button { padding: 6px 12px; min-height: 34px; }
.ct-seg.sm { align-items: center; }
.ct-2m { font-size: 12px; color: var(--muted); padding: 0 4px 0 6px; }
.ct-del { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; color: var(--muted); font-size: 15px; }
.ct-del:hover { background: var(--paper); color: var(--text); }
.ct-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-f > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.ct-f small { font-weight: 400; }
.ct-r3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 7px; }
.ct-add { align-self: flex-start; }
.ct-sum { font-size: 14px; font-weight: 700; line-height: 1.6; }
.ct-pages { display: flex; flex-direction: column; gap: 10px; }
.ct-pages img { width: 100%; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; background: #fff; }
.ct-vers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; }
.ct-msg { width: 100%; font-size: 13.5px; line-height: 1.6; resize: none; }
.ct-sendrow { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct-doc { background: #2a211d; border-color: #43362f; } :root:not([data-theme="light"]) .ct-doc .ct-dt { color: #f0e2d6; } :root:not([data-theme="light"]) .ct-it.buy { background: #2a211d; border-color: #5a4638; } :root:not([data-theme="light"]) .ct-ver { background: #43362f; color: #e7d3c3; } }
:root[data-theme="dark"] .ct-doc { background: #2a211d; border-color: #43362f; } :root[data-theme="dark"] .ct-doc .ct-dt { color: #f0e2d6; } :root[data-theme="dark"] .ct-it.buy { background: #2a211d; border-color: #5a4638; } :root[data-theme="dark"] .ct-ver { background: #43362f; color: #e7d3c3; }

/* 📗 위탁장부 읽는 중 창 */
.lg-wait { display: flex; align-items: center; gap: 12px; padding: 6px 0 2px; }
.lg-wait .sb-spin { width: 22px; height: 22px; border-width: 3px; }
.lg-wait b { display: block; font-size: 14.5px; }
.lg-wait small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.lg-miss { background: var(--soft, #f3ece4); border-radius: 10px; padding: 2px 12px; margin-bottom: 10px; font-size: 13px; }
.lg-miss p { margin: 8px 0; }
.lg-pre { margin: 0 0 12px; background: var(--ok-soft, #eef5ec); color: var(--ok-ink, #2f5a34); border-radius: 10px; padding: 9px 12px; line-height: 1.55; }
.cut-bd { cursor: pointer; }
/* 아이폰 날짜 칸은 글자 폭만큼 고정 너비를 가져서 옆 칸을 밀어내요 → 칸 너비에 맞추기 */
.modal input[type="date"], .modal input[type="time"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; text-align: left; }
.modal input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.ct-allbar { flex-wrap: wrap; }
.ct-grid label, .ct-it > * { min-width: 0; }