/* 견적서 "종이" 스타일 — 곧 클로드 디자인 리디자인으로 교체될 임시 시안 스타일.
   종이 마크업+CSS를 이 단일 파일로 격리한다. 마크업 변형은 클래스 스위치로:
   .variant-awesome  → 15% 할인 줄 표시 (어썸 견적)
   .issuer-bomnal    → 봄날 발행 (로고·직인·발행사 정보 교체)
   앱 크롬(목록·툴바 등)은 style.css, 종이만 여기. 다크 모드에서도 종이는 항상 흰색. */

/* 견적서 전용 서체: REMARK = 고운도담 (사용자 원본 양식과 동일) */
@font-face {
  font-family: 'Gowun Dodum';
  src: url('/fonts/GowunDodum-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

.paper {
  --paper-est: #185EAB; /* 소리를빚다 로고 파랑 (로고에서 추출) */
  --paper-rose: #C63F5E;
  --paper-muted: #667080;
  --paper-line-strong: #C4C4BC; /* 굵은 구분선: 더 연하게 */
  --paper-line-soft: #F3F3EF;   /* 품목 행 구분선 */
  width: 794px;
  min-height: 1123px; /* A4 비율 (794×1123) — 항목이 적어도 용지 크기 유지 */
  background: #fff;
  color: #22272E;
  box-shadow: 0 4px 24px rgba(30, 30, 20, .18);
  padding: 56px 60px;
  position: relative;
  overflow: hidden;
  font-family: 'Pretendard Variable', Pretendard, 'Malgun Gothic', sans-serif;
}

.paper .est {
  color: var(--paper-est);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
}
/* 봄날 발행: Estimate를 봄날 로고의 연한 연두(#8EB739, 로고에서 추출)로 */
.paper.issuer-bomnal .est { color: #8EB739; }
/* 거래명세서: 한글 타이틀 — Estimate와 같은 존재감(크기·색·굵기 동일), 자간만 어색하지 않게 0 */
.paper.doc-statement .est { letter-spacing: 0; }
/* 편집 모드: 타이틀 클릭 = 문서종류 전환 (은은한 발견성 힌트) */
.paper .est.qtoggle { cursor: pointer; border-radius: 6px; transition: background .12s, box-shadow .12s; }
.paper .est.qtoggle:hover { background: rgba(24,94,171,.08); box-shadow: 0 0 0 4px rgba(24,94,171,.08); }
.paper.issuer-bomnal .est.qtoggle:hover { background: rgba(142,183,57,.12); box-shadow: 0 0 0 4px rgba(142,183,57,.12); }

/* 로고·도장 영역: 발행 주체와 무관하게 구분선 전까지 차지하는 높이가 완전히 동일하도록
   고정 높이(92px) 안에서 수평 가운데 정렬. 도장 크기가 달라도 영역 높이는 불변. */
.paper .toprow {
  display: flex;
  align-items: center;
  height: 92px;
  margin-top: 2px; /* Estimate 글씨와 바짝 */
}
.paper .toprow img.biglogo { height: 56px; }
.paper .toprow img.seal { height: 82px; margin-left: 16px; }
/* 수신/견적날짜/유효기간도 로고·도장과 수평 가운데 정렬 (toprow의 center를 그대로 따름) */

.paper .meta { margin-left: auto; font-size: 11.5px; border-collapse: collapse; }
.paper .meta tr td:first-child { color: var(--paper-muted); padding-right: 28px; padding-bottom: 2px; white-space: nowrap; }
.paper .meta td { padding-bottom: 2px; }
.paper .meta td.v { min-width: 150px; }

.paper .infoline {
  display: flex;
  border-top: 1.5px solid var(--paper-line-strong);
  border-bottom: 1.5px solid var(--paper-line-strong); /* 정보 밑도 진한 구분선으로 통일 */
  margin-top: 22px;
  padding: 17px 2px 16px; /* 정보 블록 구분선 안쪽 여백 확대 */
}
.paper .corp { font-size: 10.5px; line-height: 1.5; }
.paper .corp b { font-weight: 700; }
/* 회사 정보 래퍼: 견적서에선 투명(.corp가 직접 flex 자식이던 때와 동일 렌더).
   거래명세서에선 위에 "공급자" 라벨을 얹는다. */
.paper .corpwrap { display: block; }
/* 거래명세서: "아래와 같이 계산합니다." — 공급받는 자 메타 아래, 작은 muted 글씨 */
.paper .calcnote {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--paper-muted);
}
/* 거래명세서: 정보 블록 위 "공급자" 라벨 (작은 라벨) */
.paper .supplierlab {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--paper-muted);
  margin-bottom: 5px;
}
.paper .total { margin-left: auto; align-self: center; display: flex; align-items: baseline; gap: 14px; }
.paper .total .w { font-size: 24px; font-weight: 600; }
/* 총액 숫자 = Impact (원본 양식 서체. ₩ 기호는 Impact에 없어 별도 span 유지) */
.paper .total .n { font-family: Impact, 'Arial Black', sans-serif; font-size: 36px; font-weight: 400; letter-spacing: .01em; }

.paper .titleband {
  margin-top: 44px;
  background: #F1F1EE;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
}

.paper table.items {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
  font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; /* 표 서체 = 맑은 고딕 (원본 양식) */
}
.paper table.items th {
  text-align: left;
  font-weight: 700;
  padding: 12px 8px 8px;
  border-bottom: 1.5px solid var(--paper-line-strong);
  font-size: 12px;
}
.paper table.items th.n, .paper table.items td.n { text-align: right; }
.paper table.items th.c, .paper table.items td.c { text-align: center; }
.paper table.items td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--paper-line-soft);
  vertical-align: top;
  word-break: break-word;
}
/* 첫 열(날짜)은 제목 밴드 글씨(14px 패딩)와 왼쪽 정렬, 마지막 열은 같은 만큼 오른쪽 여백 */
.paper table.items th:first-child, .paper table.items td:first-child { padding-left: 14px; }
.paper table.items th:last-child, .paper table.items td:last-child { padding-right: 14px; }
/* 마지막 행은 구분선 생략 — 바로 아래 합산부의 굵은 선이 대신한다 (따닥 붙는 이중선 방지) */
.paper table.items tr:last-child td { border-bottom: none; }
.paper table.items tr.additem td { color: var(--paper-muted); cursor: pointer; }
.paper table.items tr.additem td:hover { color: var(--paper-est); }

.paper table.sums {
  width: 100%;
  font-size: 12.5px;
  margin-top: 6px;
  border-top: 1.5px solid var(--paper-line-strong); /* 소계 위 구분선 */
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; /* 표 서체 = 맑은 고딕 */
}
.paper table.sums td { padding: 4px 8px; }
/* 소계(첫 줄)와 굵은 구분선 사이 숨통 */
.paper table.sums tr:first-child td { padding-top: 10px; }
.paper table.sums td.lab { text-align: right; font-weight: 700; letter-spacing: .2em; padding-right: 24px; }
.paper table.sums td.val { text-align: right; width: 140px; font-weight: 600; padding-right: 14px; } /* 품목 합계 열과 오른쪽 라인 일치 */
.paper table.sums tr.grand td {
  background: #F1F1EE; font-weight: 800; font-size: 14px;
  padding: 8px; /* 색칸 내부 상하 여유 */
  border-top: 5px solid #fff; /* 세액과 합계 사이 흰 간격 */
}
.paper table.sums tr.grand td.val { padding-right: 14px; }
/* 합계 라벨도 위 줄들과 같은 오른쪽 기준선 (grand의 padding 8px가 24px를 덮어쓰던 것 보정) */
.paper table.sums tr.grand td.lab { padding-right: 24px; }
.paper table.sums tr.disc td { color: var(--paper-rose); }
/* 할인 줄은 .variant-awesome 일 때만 노출 */
.paper table.sums tr.disc, .paper table.sums tr.discounted { display: none; }
.paper.variant-awesome table.sums tr.disc,
.paper.variant-awesome table.sums tr.discounted { display: table-row; }

.paper .remark {
  margin-top: 54px;
  font-size: 11px;
  color: #444;
  line-height: 1.7; /* 행간 축소 */
  /* 워터마크(opacity .10) 위로 글씨가 올라가도 됨 — 폭 제한 없이 전폭 사용(사용자 요청) */
  padding-left: 14px; /* 제목 밴드 글씨와 같은 왼쪽 라인 */
  padding-right: 14px;
  position: relative; /* 워터마크(뒤) 위에 텍스트가 오도록 쌓임 순서 확보 */
  z-index: 1;
  font-family: 'Gowun Dodum', 'Pretendard Variable', sans-serif; /* 원본 양식 서체 */
}
/* pre-wrap은 본문에만 — .remark 전체에 걸면 템플릿 소스 들여쓰기가 첫 줄 앞에 살아나 정렬이 어긋난다 */
/* word-break: keep-all — 한글이 '발행합/니다'처럼 음절 중간에서 끊기지 않게(단어=어절 단위 줄바꿈) */
.paper .remark .remark-body { white-space: pre-wrap; display: block; word-break: keep-all; overflow-wrap: break-word; }
.paper .remark .remark-body b { font-weight: 700; color: #222; } /* **볼드** 마커 렌더 */
.paper .remark .rt { letter-spacing: .15em; color: #999; font-weight: 600; margin-bottom: 8px; }
/* 편집 모드: REMARK 라벨 클릭 = 프리셋 순환 */
.paper .remark .rt.qcycle { cursor: pointer; display: inline-block; border-radius: 5px; padding: 1px 5px; margin-left: -5px; transition: background .12s, color .12s; }
.paper .remark .rt.qcycle:hover { background: rgba(0,0,0,.05); color: #555; }
/* 입금계좌 줄 (봄날 등 — 정보 블록에서 이동, 계좌는 볼드) */
.paper .remark .remark-acct { margin-top: 2px; }
.paper .remark .remark-acct b { font-weight: 800; color: #333; }

.paper .wm {
  position: absolute;
  right: 60px; /* 종이 패딩(60px)과 동일 — 표 오른쪽 끝선과 정렬 */
  bottom: 72px;
  opacity: .10;
  height: 230px;
  pointer-events: none;
}
/* 봄날은 워터마크 없음 (사용자 확정) */
.paper.issuer-bomnal .wm { display: none; }
/* 봄날 도장 파일은 내부 여백이 커서(내용 79% vs 소리를빚다 88%) 보이는 크기를 맞추려 확대.
   toprow가 고정 높이(92px)라 영역 크기는 두 발행 주체 동일. */
.paper.issuer-bomnal .toprow img.seal { height: 92px; }

.paper .autobadge {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--paper-rose);
  background: #FAE3E8;
  padding: 4px 10px;
  border-radius: 6px;
}

/* 인라인 편집: 클릭 가능한 칸 표시 + 편집 중 파란 테두리 */
.paper .qedit { cursor: text; border-radius: 2px; }
.paper .qedit:hover { box-shadow: inset 0 0 0 1px #C9D4EC; }
.paper .qinput {
  font: inherit;
  color: inherit;
  border: none;
  outline: 2px solid var(--paper-est);
  outline-offset: 1px;
  border-radius: 2px;
  background: #fff;
  padding: 0 2px;
  width: 100%;
  box-sizing: border-box;
}
.paper textarea.qinput { resize: vertical; min-height: 3em; line-height: 1.7; }
.paper .items .rowdel {
  position: absolute;
  margin-left: 4px;
  color: var(--paper-rose);
  cursor: pointer;
  font-weight: 700;
  opacity: 0;
}
.paper .items tr:hover .rowdel { opacity: .8; }