/* 도구모음 양식 — 편집 화면 + A4 문서 + 인쇄
   Layout: 왼쪽 입력, 오른쪽 A4 미리보기(화면 너비에 맞춰 축소). 인쇄할 때는 문서만 남아요. */

/* ---------- 편집 화면 ---------- */
.fwrap { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 48px; }
@media (max-width: 900px) { .fwrap { grid-template-columns: minmax(0, 1fr); } }
.feditor .panel-body { gap: 14px; }
.feditor h2 { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.feditor h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.feditor textarea { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; width: 100%; min-height: 76px; resize: vertical; font: inherit; color: var(--ink); }
.feditor input[type="date"] { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 7px 10px; width: 100%; font: inherit; color: var(--ink); }
.ftwo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ftwo > * { min-width: 0; }
.fchecks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.flink { font-size: 12.5px; color: var(--muted); }
.flink a { color: var(--ink); }

.trow { display: grid; gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; position: relative; }
.trow input { padding: 6px 8px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-family: inherit; min-width: 0; width: 100%; }
.trow .c-wide { grid-column: span 6; }
.trow .c-half { grid-column: span 3; }
.trow .c-third { grid-column: span 2; }
.trow .tno { position: absolute; top: -9px; left: 8px; font-family: var(--f-mono); font-size: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; color: var(--muted); }
.trow .trm { position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--muted); }
.trow .trm svg { width: 13px; height: 13px; }
.trows { display: grid; gap: 14px; padding-top: 6px; }

.slot { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.slot .sprev { width: 76px; height: 76px; border-radius: 8px; border: 1px solid var(--line); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--line) 0 50%) 0 0 / 10px 10px; display: grid; place-items: center; overflow: hidden; }
.slot .sprev img { max-width: 92%; max-height: 92%; }
.slot .sprev span { font-size: 11px; color: var(--muted); }
.slot .row { gap: 6px; }
.slot .opts { grid-column: span 2; display: grid; gap: 8px; }
.slot .opts[hidden] { display: none; }
.pad-wrap { grid-column: span 2; display: grid; gap: 8px; }
.pad-wrap[hidden] { display: none; }
.feditor input[type="time"] { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 7px 10px; width: 100%; font: inherit; color: var(--ink); }
.pad { width: 100%; height: 170px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }

.fpreview { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); display: grid; gap: 10px; min-width: 0; }
@media (max-width: 900px) { .fpreview { position: static; } }
.ftool { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ftool .hint { flex: 1 1 220px; }
.fstage { background: #c9ced5; border-radius: 10px; padding: 16px; overflow: hidden; }
:root[data-theme="dark"] .fstage { background: #2a3038; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fstage { background: #2a3038; } }
.fscale { transform-origin: top left; }
.fjump { display: none; }
@media (max-width: 900px) { .fjump { display: inline-flex; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: var(--shadow); } }
.fnotes { font-size: 12.5px; color: var(--muted); display: grid; gap: 4px; }
.fnotes b { color: var(--ink); }

/* ---------- A4 문서 ---------- */
.sheet {
  width: 210mm; min-height: 297mm; padding: 13mm 14mm; background: #fff; color: #16181b;
  font-family: var(--doc-font); font-size: 9.6pt; line-height: 1.55; box-shadow: 0 2px 14px rgba(0,0,0,.18);
  --accent: #1d1f22; --rule: #2a2d31; --soft: #c9ced4; --head: #f1f2f4; --muted-doc: #6b7177;
  word-break: keep-all; overflow-wrap: anywhere; position: relative;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet * { box-sizing: border-box; }
.sheet.t-basic { --doc-font: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
.sheet.t-modern { --doc-font: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; --accent: var(--user-accent, #2850c8); --rule: #d6dae0; --soft: #e3e6ea; --head: color-mix(in srgb, var(--accent) 8%, #fff); }
.sheet.t-classic { --doc-font: "Nanum Myeongjo", "Batang", "AppleMyungjo", serif; --rule: #111; --head: #f4f1e8; --soft: #b9b3a3; }

.d-title { margin: 0 0 8mm; font-size: 22pt; font-weight: 700; text-align: center; letter-spacing: .55em; padding-left: .55em; line-height: 1.3; }
.d-sub { text-align: center; margin: -6mm 0 7mm; color: var(--muted-doc); font-size: 9pt; letter-spacing: .05em; }
.t-modern .d-title { text-align: left; letter-spacing: .02em; padding: 5mm 0 0; border-top: 5px solid var(--accent); font-size: 24pt; font-weight: 900; }
.t-modern .d-sub { text-align: left; margin: -7mm 0 7mm; }
.t-classic .d-title { font-weight: 800; border-bottom: 3px double var(--rule); padding-bottom: 3mm; width: fit-content; margin-left: auto; margin-right: auto; }

.d-p { margin: 0 0 4mm; }
.d-center { text-align: center; }
.d-right { text-align: right; }
.d-gap { height: 5mm; }
.d-muted { color: var(--muted-doc); }
.d-small { font-size: 8.4pt; }
.d-big { font-size: 12pt; }
.d-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; align-items: start; }
.d-split > * { min-width: 0; }

/* 표 */
.d-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 4mm; }
.d-tbl th, .d-tbl td { border: 1px solid var(--rule); padding: 1.6mm 2mm; vertical-align: middle; text-align: left; }
.d-tbl th { background: var(--head); font-weight: 600; text-align: center; white-space: nowrap; }
.d-tbl td.n, .d-tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.d-tbl td.c { text-align: center; }
.d-tbl tr.blank td { height: 7.4mm; }
.d-tbl tfoot td, .d-tbl tfoot th { font-weight: 700; }
.t-modern .d-tbl th, .t-modern .d-tbl td { border-left: 0; border-right: 0; border-color: var(--rule); }
.t-modern .d-tbl th { color: var(--accent); border-top: 2px solid var(--accent); }
.t-modern .d-tbl tfoot th { border-top: 1px solid var(--rule); color: var(--ink); }
.t-modern .d-tbl tfoot tr:first-child > * { border-top: 2px solid var(--accent); }
.t-modern .d-tbl tfoot tr:last-child > * { border-bottom: 2px solid var(--accent); }
.t-classic .d-tbl { border: 2px solid var(--rule); }
.d-tbl .vlabel { width: 7mm; letter-spacing: .3em; writing-mode: vertical-rl; text-orientation: upright; padding: 2mm 0; }
.t-modern .d-tbl .vlabel { background: var(--accent); color: #fff; }

.d-kv th { width: 22mm; }
.d-party th { font-weight: 500; padding-left: 1mm; padding-right: 1mm; }
.d-party td { padding-top: 1.2mm; padding-bottom: 1.2mm; }
.t-modern .d-party th { border-top: 1px solid var(--rule); }
.d-namecell { display: flex; justify-content: space-between; align-items: center; gap: 1mm; }
.d-namecell > span:first-child { white-space: nowrap; }
.d-namecell .stampbox { min-width: 9mm; }
.d-mono { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.d-sec { font-size: 10.5pt; font-weight: 700; margin: 5mm 0 1.5mm; }
.t-modern .d-sec { color: var(--accent); }
.t-classic .d-sec::before { content: "■ "; }
.d-tbl small, .d-total small { font-size: 8pt; font-weight: 400; }
.d-compact { font-size: 8.6pt; }
.d-compact .d-tbl th, .d-compact .d-tbl td { padding: 1.1mm 1.6mm; }
.d-compact .d-tbl tr.blank td { height: 6.2mm; }
.d-compact .d-title { font-size: 17pt; margin-bottom: 4mm; }
.d-list { margin: 0 0 4mm; padding-left: 6mm; display: grid; gap: 2.2mm; }
.d-list li::marker { font-weight: 700; }
.d-list .sub { display: block; padding-left: 2mm; }
.d-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-top: 6mm; }
.d-parties .d-tbl th { width: 18mm; }

/* 금액 강조 */
.d-total { display: flex; justify-content: space-between; align-items: center; gap: 4mm; border: 1.5px solid var(--rule); padding: 3mm 4mm; margin: 0 0 4mm; font-size: 11pt; }
.d-total b { font-size: 13pt; }
.d-total .d-num { font-variant-numeric: tabular-nums; }
.t-modern .d-total { border: 0; background: var(--accent); color: #fff; border-radius: 2mm; }
.t-classic .d-total { border: 3px double var(--rule); }

/* 상자 (사유·특약 등) */
.d-box { border: 1px solid var(--rule); padding: 3mm 4mm; min-height: 24mm; margin: 0 0 4mm; white-space: pre-wrap; }
.d-box-label { font-weight: 700; margin: 0 0 1.5mm; }
.t-modern .d-box { border: 0; background: var(--head); border-radius: 2mm; }

/* 빈칸 밑줄 */
.fill { display: inline-block; min-width: 24mm; border-bottom: 1px solid var(--rule); padding: 0 1mm; text-align: center; line-height: 1.5; }
.fill.l { text-align: left; }

/* 서명·도장 */
.d-sign { margin-top: 10mm; display: grid; gap: 2.5mm; justify-items: end; }
.d-sign .date { justify-self: center; margin-bottom: 4mm; font-size: 10.5pt; letter-spacing: .08em; }
.d-sign .who { display: flex; align-items: center; gap: 3mm; font-size: 10.5pt; }
.stampbox { position: relative; display: inline-block; min-width: 13mm; text-align: center; color: var(--muted-doc); }
.stampbox img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; pointer-events: none; }
.d-to { margin-top: 12mm; font-size: 13pt; font-weight: 700; text-align: center; letter-spacing: .1em; }

/* 조항 (계약서) */
.d-art { margin: 0 0 3mm; }
.d-art h3 { font-size: 10pt; margin: 0 0 1mm; font-weight: 700; }
.t-modern .d-art h3 { color: var(--accent); }
.d-art p { margin: 0; }
.d-art ol { margin: 1mm 0 0; padding-left: 5mm; }

.d-dense { font-size: 8.8pt; line-height: 1.48; }
.d-dense .d-title { margin-bottom: 5mm; }
.d-dense .d-art { margin-bottom: 1.6mm; }
.d-dense .d-art h3 { font-size: 9.2pt; margin-bottom: .4mm; }
.d-end { break-inside: avoid; }
.d-parties { break-inside: avoid; }

.d-approve-wrap { display: flex; justify-content: flex-end; margin: -4mm 0 4mm; }
.d-approve { border-collapse: collapse; font-size: 8.4pt; }
.d-approve th, .d-approve td { border: 1px solid var(--rule); text-align: center; font-weight: 500; }
.d-approve th { width: 18mm; padding: .8mm 1mm; background: var(--head); }
.d-approve td { height: 15mm; }
.d-approve .vlabel { width: 6mm; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .3em; padding: 1mm 0; }
.t-modern .d-approve .vlabel { background: var(--accent); color: #fff; }
.d-olist { margin: 0; padding-left: 6mm; display: grid; gap: 1.5mm; }

/* 사진 */
.d-photo { width: 30mm; height: 40mm; border: 1px solid var(--rule); display: grid; place-items: center; color: var(--muted-doc); font-size: 8pt; text-align: center; overflow: hidden; background: #fff; }
.d-photo img { width: 100%; height: 100%; object-fit: cover; }

/* 자르는 선 (영수증) */
.d-cut { border-top: 1px dashed #888; margin: 8mm 0; position: relative; }
.d-cut::after { content: "✂  자르는 선"; position: absolute; left: 50%; top: -2.2mm; transform: translateX(-50%); background: #fff; padding: 0 3mm; font-size: 7.5pt; color: #888; }
.d-copy { position: absolute; right: 0; top: 0; font-size: 8.5pt; border: 1px solid var(--rule); padding: .5mm 2mm; }
.t-modern .d-copy { border-color: var(--accent); color: var(--accent); }

/* ---------- 인쇄 ---------- */
@page { size: A4; margin: 12mm 13mm; }
@media print {
  html, body { background: #fff !important; }
  :root { padding: 0 !important; }
  .topbar, .tool-head, .feditor, .fjump, .ftool, .fnotes, .ad-slot, .foot { display: none !important; }
  .wrap { padding: 0 !important; max-width: none !important; }
  .fwrap { display: block; padding: 0; }
  .fpreview { position: static; display: block; }
  .fstage { padding: 0; background: none; border-radius: 0; height: auto !important; overflow: visible; }
  .fscale { transform: none !important; width: auto !important; }
  .sheet { width: auto; min-height: 0; padding: 0; box-shadow: none; }
  .d-tbl tr, .d-art, .d-sign, .d-total { break-inside: avoid; }
}