/* 공통 화면 스타일. 값은 tokens.css의 변수만 쓴다. 화면 템플릿에는 <style>을 두지 않는다. */

/* ── 상태(톤): core/status.py ── */
.badge { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-pill); font-weight: 600; }
.badge.tone-ok { background: var(--tone-ok-bg); color: var(--tone-ok-fg); }
.badge.tone-warn { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.badge.tone-error { background: var(--tone-error-bg); color: var(--tone-error-fg); }
.badge.tone-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.badge.tone-muted { background: var(--tone-muted-bg); color: var(--tone-muted-fg); }
.tone-text-ok { color: var(--tone-ok-text); }
.tone-text-warn { color: var(--tone-warn-text); }
.tone-text-error { color: var(--tone-error-text); font-weight: 700; }
.tone-text-info { color: var(--tone-info-text); }
.tone-text-muted { color: var(--tone-muted-text); }
.strong { font-weight: 600; }
.faint { color: var(--text-faint); }
.plus { color: var(--plus); }
.minus { color: var(--minus); }
/* 목록형 검증 줄(톤 배경) */
.tone-row { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-1); border-radius: var(--radius-sm); }
.tone-row.tone-ok { background: var(--tone-ok-bg); }
.tone-row.tone-warn { background: var(--tone-warn-bg); }
.tone-row.tone-error { background: var(--tone-error-bg); font-weight: 600; }
.tone-row.tone-info { background: var(--tone-info-bg); }
.tone-row.tone-muted { background: var(--tone-muted-bg); }

/* 시험 환경 띠 */
.test-env-banner { background: var(--test-banner-bg); color: var(--test-banner-fg); text-align: center; padding: var(--space-2) var(--space-4); font-weight: bold; }

/* 계약 차수 진행표(org 관리자) */
.stage-table td, .stage-table th { padding: var(--space-1) var(--space-3); border: 1px solid var(--stage-line); text-align: center; }
.stage-done { background: var(--stage-done-bg); }
.stage-current { background: var(--stage-current-bg); outline: 2px solid var(--stage-current-outline); }
.stage-todo { color: var(--stage-todo-fg); }
.stage-skip { color: var(--stage-skip-fg); background: var(--stage-skip-bg); }

/* ── 내역(boq) ── */
table.boq { width: 100%; margin-bottom: var(--space-5); }
table.boq td.num, table.boq th.num { text-align: right; font-variant-numeric: tabular-nums; }
.boq-tools { margin: var(--space-3) 0 16px; }
.boq-tools form { display: inline-block; margin-right: 14px; vertical-align: top; }
.boq-box { padding: var(--space-3) 14px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.boq-wrap { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start; }
.boq-side { flex: 0 0 280px; max-height: 70vh; overflow: auto; }
.boq-main { flex: 1 1 520px; min-width: 0; }
.boq-side a.sel { font-weight: 700; }
table.boq.flat { margin-bottom: 0; }
details.chk summary, details.fold summary { cursor: pointer; }
details.fold summary { margin: var(--space-2) 0; }
details.chk ul { margin: var(--space-1) 0 8px var(--space-5); }
.boq-row-total { font-weight: 600; }
.boq-row-grand { font-weight: 700; }
.boq-inline { display: inline; }
.boq-stack { display: block; margin-bottom: var(--space-1); }
.pre-line { white-space: pre-line; }

/* ── 문서 인식(docintake) 확인 화면 공통 ── */
.ct-wrap, .card-wrap { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.ct-form { flex: 1 1 520px; min-width: 0; }
.ct-original { flex: 1 1 340px; position: sticky; top: 12px; }
.ct-original iframe { width: 100%; height: 75vh; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ct-checks { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.ct-box { background: var(--surface-alt); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin: 0 0 var(--space-4); }
.ct-locked dt { font-weight: 600; float: left; width: 8em; }
.ct-locked dd { margin: 0 0 var(--space-1) 8.5em; }
.ct-pair { margin: 8px 0; }
.ct-diff td, .ct-diff th { padding: 2px 8px; }
.ct-form input[type=text], .ct-form input[type=number], .ct-form input[type=date], .ct-form textarea { min-width: 18em; }
.card-form { flex: 1 1 460px; min-width: 0; }
.card-original { flex: 1 1 340px; position: sticky; top: 12px; }
.card-original img, .card-original iframe { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.card-original iframe { height: 70vh; }
.card-dup { background: var(--tone-warn-bg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin: 0 0 var(--space-4); }
#new-party-fields.hidden { display: none; }
.card-progress { background: var(--surface-alt); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
@media (max-width: 767px) {
  .ct-form .submit-row input, .ct-form .submit-row a { min-height: 48px; font-size: 1rem; }
  .card-form .submit-row input, .card-form .submit-row a { min-height: 48px; font-size: 1rem; }
}

/* ── 문서 올리기(docintake/upload) ── */
.up-wrap { max-width: 980px; }
.up-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-4) 0; }
.up-btn {
  min-height: 64px; padding: var(--space-3) 14px; font-size: var(--font-size-large); font-weight: 600; line-height: 1.3;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); cursor: pointer;
  background: var(--surface); color: var(--ink);
}
.up-btn:hover, .up-btn:focus-visible { border-color: var(--accent); background: var(--surface-select); }
.up-btn small { display: block; font-weight: 400; font-size: var(--font-size-small); color: var(--ink-quiet); }
#drop-zone {
  border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-6) 16px;
  text-align: center; color: var(--ink-quiet); margin: 0 0 var(--space-4);
}
#drop-zone.dragover { border-color: var(--accent); background: var(--surface-select); color: var(--ink); }
.up-msg { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--tone-warn-bg); margin: 0 0 var(--space-4); }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.up-item { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-alt); }
.up-item .thumb { height: 140px; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.up-item img { width: 100%; height: 140px; object-fit: cover; display: block; }
.up-item .meta { padding: var(--space-2) 8px; font-size: var(--font-size-small); word-break: break-all; }
.up-item .tools { display: flex; gap: var(--space-2); padding: 0 8px 8px; }
.up-item .tools button { flex: 1; min-height: 36px; cursor: pointer; }
.up-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.up-actions button { min-height: 52px; padding: 0 22px; font-size: var(--font-size-large); cursor: pointer; }
.up-actions .default { font-weight: 600; }
#webcam { border: 0; border-radius: var(--radius-lg); padding: var(--space-4); width: min(720px, 96vw); background: var(--surface); color: var(--ink); }
#webcam::backdrop { background: rgba(0, 0, 0, .7); }
#webcam video { width: 100%; border-radius: var(--radius-md); background: #000; display: block; }
#webcam .cam-tools { display: flex; gap: var(--space-4); margin-top: var(--space-3); align-items: center; }
#webcam .cam-tools button { min-height: 52px; padding: 0 22px; font-size: var(--font-size-large); cursor: pointer; }
.js-on .up-fallback { display: none; }
.up-js { display: none; }
.js-on .up-js { display: block; }
@media (max-width: 767px) {
  .up-methods { grid-template-columns: 1fr; }
  .up-btn { min-height: 60px; font-size: 1.15rem; }
  .up-actions button { width: 100%; min-height: 56px; }
  #drop-zone .desktop-only { display: none; }
}

/* ── 작은 도우미(템플릿에 style= 을 쓰지 않으려고) ── */
.u-inline { display: inline; }
.u-block { display: block; }
.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: 8px; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 14px; }
.u-ml-3 { margin-left: var(--space-5); }
.u-mr-3 { margin-right: var(--space-3); }
.u-w-full { width: 100%; }
.u-clear { clear: both; }
.u-help-indent { margin: 0 0 8px var(--space-3); }
.cell-narrow { width: 5em; }
.settlement-box { clear: both; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--tone-warn-bg); }
.stage-warn-mark { color: var(--tone-warn-text); }
.u-indent { padding-left: 1.5em; }

/* TBM 서명 화면 */
.sign-box { margin: 0 0 var(--space-5); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); max-width: 520px; }
.sign-canvas { display: block; width: 100%; height: 160px; touch-action: none; background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.sign-box button { min-height: 44px; min-width: 88px; font-size: var(--font-size-large); }
.sign-box [data-state="saved"] { border-color: var(--tone-ok-text); }
.sign-message { margin: var(--space-2) 0 0; }
.sign-box[data-state="saved"] .sign-message { color: var(--tone-ok-text); }
.sign-box[data-state="error"] .sign-message { color: var(--tone-error-text); font-weight: 700; }
.sign-box[data-signed] { background: var(--tone-ok-bg); }
.check-row { margin: 0 0 var(--space-2); }

/* ── 공사일지(diary): 태블릿에서 쓰기 쉬운 큰 칸·버튼 ── */
.diary-wrap { max-width: 1200px; }
.diary-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: 0 0 var(--space-4); }
.diary-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-5);
  font-size: var(--font-size-large); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
}
.diary-btn:hover, .diary-btn:focus-visible { border-color: var(--accent); background: var(--surface-select); }
.diary-btn-main { font-weight: 700; border-color: var(--accent); }
.diary-btn-small { min-height: 40px; padding: 0 var(--space-3); font-size: 1rem; }
.diary-month { font-size: var(--font-size-large); }
.diary-input { min-height: 44px; font-size: 1rem; padding: var(--space-1) var(--space-2); box-sizing: border-box; }
textarea.diary-input { width: 100%; }
.diary-num { width: 6em; text-align: right; }
.diary-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); }
.diary-date { font-size: 1.3rem; font-weight: 700; margin-right: var(--space-4); }
.diary-dayno { color: var(--ink-quiet); }
.diary-section { margin: 0 0 var(--space-6); }
.diary-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.diary-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.diary-grid label { display: flex; flex-direction: column; gap: var(--space-1); }
.diary-table { width: 100%; margin-bottom: var(--space-3); }
.diary-table td, .diary-table th { padding: var(--space-1) var(--space-2); vertical-align: top; }
.diary-table td .diary-input { width: 100%; }
.diary-table td .diary-num { width: 6em; }
.diary-num-table td { text-align: right; font-variant-numeric: tabular-nums; }
.diary-num-table td:first-child, .diary-num-table td:nth-child(2) { text-align: left; }
.diary-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin: var(--space-4) 0 var(--space-6); }
.diary-cal { width: 100%; table-layout: fixed; }
.diary-cal td { height: 72px; padding: 0; vertical-align: top; border: 1px solid var(--line); }
.diary-cal-cell { display: block; height: 100%; min-height: 72px; padding: var(--space-2); text-decoration: none; color: var(--ink); }
a.diary-cal-cell:hover { background: var(--surface-select); }
.diary-cal-no { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.diary-cal-out { background: var(--surface-alt); }
.diary-cal-today { outline: 2px solid var(--accent); }
.diary-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.diary-photo { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.diary-photo img { width: 100%; height: 140px; object-fit: cover; display: block; }
.diary-photo figcaption, .diary-photo form { padding: var(--space-1) var(--space-2); }
.u-hidden, .diary-table tr[hidden] { display: none; }
@media (max-width: 767px) {
  .diary-table thead { display: none; }
  .diary-table tr { display: block; border-bottom: 1px solid var(--line); padding: var(--space-2) 0; }
  .diary-table td { display: block; }
  .diary-table td.u-hidden, .diary-table tr[hidden] { display: none; }
  .diary-num-table thead { display: table-header-group; }
  .diary-num-table tr { display: table-row; }
  .diary-num-table td { display: table-cell; }
}

/* 2단계 인증(OTP) 화면 — accounts/templates/accounts/otp/ */
.otp-box p { margin: 0 0 var(--space-3); }
.otp-qr { display: inline-block; background: var(--qr-bg); padding: var(--space-3); border-radius: var(--radius-sm); }
.otp-qr svg { display: block; width: 200px; height: 200px; }
.otp-qr svg path { fill: var(--qr-ink); }
.otp-secret, .otp-codes { font-family: var(--font-code); letter-spacing: .05em; }
.otp-codes { columns: 2; list-style: none; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); background: var(--surface-alt); border-radius: var(--radius-sm); font-size: var(--font-size-large); }
.otp-codes li { padding: var(--space-1) 0; }
.otp-remember { display: flex; gap: var(--space-2); align-items: center; }
.otp-links { margin-top: var(--space-4); font-size: var(--font-size-small); }
.otp-box input[data-otp-token], .otp-box input[data-otp-recovery] { font-size: var(--font-size-large); font-family: var(--font-code); letter-spacing: .15em; }