/* 거래명세서 — 입력 칸 + A4 미리보기(이력서 양식에서 가져온 틀). 인쇄하면 A4 만 나온다 */
.rs { --ink:#1d2433; --sub:#5d6575; --line:#e3e6ec; --soft:#f5f6f9; --acc:#2d4a8a; --red:#c23b32;
  color:var(--ink); font-size:16px; line-height:1.5; }
.rs .top { text-align:center; margin:0 0 18px; }
.rs .top h1 { margin:0; font-size:34px; letter-spacing:-.5px; }
.rs .top p { margin:6px 0 0; color:var(--sub); font-size:15px; }
.rs .bar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.rs .bar button { font:inherit; font-weight:700; font-size:15px; padding:11px 14px; border-radius:11px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.rs .bar button.main { background:var(--acc); border-color:var(--acc); color:#fff; flex:1 1 180px; }
.rs .bar button.word { flex:1 1 140px; }
.rs .bar .sp { flex:1 0 0; }
.rs .bar button.ghost { color:var(--sub); font-size:14px; padding:9px 12px; }
.rs .mtabs { display:none; gap:6px; background:var(--soft); padding:5px; border-radius:14px; margin:0 0 14px; }
.rs .mtabs button { flex:1; border:0; background:transparent; font:inherit; font-weight:700; font-size:16px; padding:11px 6px; border-radius:10px; color:var(--sub); cursor:pointer; }
.rs .mtabs button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(20,25,40,.12); }
.rs .cols { display:grid; grid-template-columns:minmax(0,1fr) 448px; gap:22px; align-items:start; }
.rs .pv { position:sticky; top:12px; }
.rs .pvbox { background:#e9ecf1; border-radius:14px; padding:12px; overflow:hidden; }
.rs .pvscale { transform-origin:0 0; width:210mm; }
.rs .pvhint { font-size:13px; color:var(--sub); text-align:center; margin:8px 0 0; }

/* 입력 */
.rs fieldset { border:1px solid var(--line); border-radius:14px; padding:14px 14px 10px; margin:0 0 14px; min-width:0; }
.rs legend { font-weight:800; font-size:16px; padding:0 6px; display:flex; align-items:center; gap:8px; }
.rs legend label { font-weight:600; font-size:13px; color:var(--sub); display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.rs legend input { width:16px; height:16px; accent-color:var(--acc); }
.rs fieldset.off > :not(legend) { display:none; }
.rs .g2 { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.rs .g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px 10px; }
.rs .fl { display:block; min-width:0; }
.rs .fl.w2 { grid-column:span 2; } .rs .fl.w3 { grid-column:1 / -1; }
.rs .fl > span { display:block; font-size:13px; font-weight:700; color:var(--sub); margin:0 0 4px; }
.rs input[type=text], .rs input[type=tel], .rs input[type=email], .rs input[type=date], .rs select, .rs textarea {
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:9px 10px; border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
.rs textarea { min-height:84px; resize:vertical; line-height:1.55; }
.rs input:focus, .rs select:focus, .rs textarea:focus { outline:none; border-color:var(--acc); }
.rs .photo { display:flex; gap:12px; align-items:center; margin:0 0 10px; }
.rs .ph { width:84px; height:112px; border:1.5px dashed #c5cad4; border-radius:8px; background:var(--soft) center/cover no-repeat; flex:0 0 auto; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--sub); font-size:13px; text-align:center; touch-action:none; }
.rs .ph.has { border-style:solid; color:transparent; }
.rs .phbtn { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.rs .phbtn button, .rs .add, .rs .rm { font:inherit; font-size:14px; font-weight:700; padding:7px 11px; border-radius:9px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.rs .phbtn small { color:var(--sub); font-size:12.5px; line-height:1.4; }
.rs .rows .row { position:relative; border-top:1px dashed var(--line); padding:10px 0 8px; }
.rs .rows .row:first-child { border-top:0; padding-top:2px; }
.rs .rm { position:absolute; right:0; top:8px; padding:3px 9px; font-size:13px; color:var(--sub); }
.rs .rows .row:first-child .rm { top:0; }
.rs .add { width:100%; margin:4px 0 4px; border-style:dashed; color:var(--acc); }
.rs .hint { font-size:13px; color:var(--sub); margin:6px 2px 2px; }
.rs .opt { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px; color:var(--sub); margin:2px 0 6px; }
.rs .opt label { display:inline-flex; gap:5px; align-items:center; cursor:pointer; }
.rs .opt input { width:16px; height:16px; accent-color:var(--acc); }
.rs .saved { font-size:12.5px; color:var(--sub); text-align:right; margin:-6px 2px 10px; min-height:18px; }

@media (max-width: 880px) {
  .rs .mtabs { display:flex; }
  .rs .cols { grid-template-columns:minmax(0,1fr); }
  .rs .pv { position:static; }
  .rs[data-tab=edit] .pv { display:none; }
  .rs[data-tab=view] .ed { display:none; }
}
@media (max-width: 420px) { .rs .g3 { grid-template-columns:1fr 1fr; } .rs .g3 .fl.w1m { grid-column:1 / -1; } }

.rs .seg2 { display:flex; gap:6px; margin:0 0 4px; flex-wrap:wrap; }
.rs .seg2 button { flex:1 1 0; min-width:0; font:inherit; font-size:15px; font-weight:700; padding:10px 6px; border:1.5px solid var(--line); background:#fff; color:var(--sub); border-radius:10px; cursor:pointer; word-break:keep-all; }
.rs .seg2 button.on { border-color:var(--acc); background:var(--acc); color:#fff; }
.rs .it { display:grid; grid-template-columns:70px repeat(3,minmax(0,1fr)) 38px; grid-template-areas:'md nm nm nm x' 'sp sp qt pr pr' 'sm sm sm sm sm'; gap:6px; align-items:center; padding:9px 0; border-top:1px dashed var(--line); }
.rs .it > :nth-child(1) { grid-area:md; } .rs .it > :nth-child(2) { grid-area:nm; } .rs .it > :nth-child(3) { grid-area:sp; } .rs .it > :nth-child(4) { grid-area:qt; } .rs .it > :nth-child(5) { grid-area:pr; } .rs .it > :nth-child(6) { grid-area:x; } .rs .it > :nth-child(7) { grid-area:sm; }
.rs .it:first-child { border-top:0; padding-top:0; }
.rs .it input { padding:8px 7px; font-size:15px; }
.rs .it .x { font:inherit; font-size:14px; border:1.5px solid var(--line); background:#fff; color:var(--sub); border-radius:8px; height:38px; cursor:pointer; }
.rs .it .sum { font-size:13px; color:var(--sub); margin:0 2px; min-height:0; }
.rs .it .sum:empty { display:none; }
.rs .tot { background:var(--soft); border-radius:10px; padding:10px 12px; font-size:15px; margin:10px 0 2px; line-height:1.6; }
.rs .tot b { font-size:17px; }
.rs .warn { color:#b3261e; font-size:13px; font-weight:700; margin:6px 2px 0; }

/* A4 거래명세서 (두 부 또는 한 부) */
.sheet { width:210mm; min-height:297mm; box-sizing:border-box; padding:10mm 11mm 8mm; background:#fff; color:#111; position:relative;
  font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",sans-serif; font-size:9pt; line-height:1.25; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.sheet .cp { border:1.2pt solid #1f3b73; padding:0; }
.sheet .cp + .cp { margin-top:9mm; }
.sheet .cut { border-top:1px dashed #999; margin:4.5mm 0 -4.5mm; position:relative; }
.sheet table { width:100%; border-collapse:collapse; table-layout:fixed; }
.sheet th, .sheet td { border:.6pt solid #1f3b73; padding:.8mm 1.4mm; height:6mm; box-sizing:border-box; vertical-align:middle; word-break:keep-all; overflow-wrap:anywhere; }
.sheet th { background:#eef2f9; color:#1f3b73; font-weight:700; text-align:center; font-size:8.5pt; }
.sheet .ttl { text-align:center; font-size:17pt; font-weight:800; letter-spacing:6pt; color:#1f3b73; padding:2.5mm 0 1.5mm; border-bottom:.6pt solid #1f3b73; }
.sheet .ttl small { font-size:9pt; letter-spacing:0; font-weight:700; margin-left:2mm; }
.sheet .vt { writing-mode:vertical-rl; letter-spacing:3pt; }
.sheet .cus { font-size:11pt; font-weight:700; }
.sheet .r { text-align:right; } .sheet .c { text-align:center; } .sheet .l { text-align:left; }
.sheet .big { font-size:10.5pt; font-weight:800; }
.sheet .pb { position:absolute; left:0; right:0; border-top:1px dashed #c33; pointer-events:none; }
.sheet .pb span { position:absolute; right:2mm; top:-5mm; font-size:8pt; color:#c33; background:#fff; padding:0 1mm; }
/* 각종 서식 사이 오가는 탭(QR 도구 .qrsw 와 같은 모양) */
.rs .fmsw { display:flex; gap:4px; background:#f1f2f4; padding:4px; border-radius:14px; margin:0 0 16px; }
.rs .fmsw a { flex:1; text-align:center; padding:11px 6px; border-radius:10px; font-size:16px; font-weight:800; color:#4a5160; text-decoration:none; word-break:keep-all; }
.rs .fmsw a.on { background:#fff; color:#1d2433; box-shadow:0 1px 3px rgba(20,25,40,.14); }
.rs .fmsw a:not(.on):hover { color:#1d2433; }

#rsPrint { display:none; }
@media print {
  @page { size:A4; margin:10mm 11mm 8mm; }
  html, body { background:#fff !important; margin:0 !important; padding:0 !important; }
  body > *:not(#rsPrint) { display:none !important; }
  #rsPrint { display:block !important; }
  #rsPrint .sheet { box-shadow:none; min-height:0; width:auto; padding:0; }
  #rsPrint .sheet + .sheet { break-before:page; }
  #rsPrint .pb { display:none; }
  .sheet tr { break-inside:avoid; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}