/* ============================================================================
   writer.css — 서식 작성기 (form-write.php) · 2026-09-17 신규

   세 가지가 한 파일에 있다.
     §1 작성 화면   — 왼쪽 입력칸 / 오른쪽 문서 (폰에서는 바꿔 가며 본다)
     §2 문서(.wd-*) — 미리보기에 보이는 그 모양이 곧 인쇄물이다
     §3 인쇄         — **이 사이트 최초의 인쇄용 CSS**. 문서만 남기고 전부 감춘다

   원칙
     · 문서 모양은 여기 §2 한 곳에서만 정한다. JS 는 글자만 바꾼다.
     · 그림자 금지(모달·챗봇 전용) · 12px 미만 글자 금지 · 모든 :hover 는 @media (hover: hover) 안에.
     · ⛔ 가로 스크롤 금지(대표 지시). 표도 세로로 푼다.

   불러오는 순서: styles.css → pages.css → apps.css → **writer.css**
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════════
   §1. 작성 화면
   ════════════════════════════════════════════════════════════════════════════ */

/* 개인정보 안내 — 이 화면에서 제일 먼저 읽혀야 하는 줄이라 위에 띠로 둔다.
   다만 **접어 둔다.** 늘 네 줄을 펴 두면 정작 채워야 할 칸이 밑으로 밀린다(2026-09-18 대표 지적).
   약속하는 말(굵은 첫 줄)만 보이고, 누르면 나머지가 내려온다.
   여닫는 모양(▾▴·손가락 커서)은 pages.css 의 .fold 가 갖고 있다 — 여기선 자리만 잡는다. */
.fw-privacy {
  margin-bottom: 18px;
  border: 1px solid var(--tint-line); border-radius: var(--r-card); background: var(--tint);
  font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-2); word-break: keep-all;
}
/* ⚠️ 안쪽 여백을 띠가 아니라 **summary 에** 준다.
   띠에 주면 누르는 자리가 글자 높이(24px)밖에 안 된다 — 손가락으로 누르기엔 작다.
   summary 가 여백까지 가져가면 띠 전체(50px)가 누르는 자리가 된다. */
.fw-privacy > summary {
  display: flex; gap: 10px; align-items: center;
  padding: 13px 15px;
}
.fw-privacy > summary > svg { flex: none; color: var(--carrot-ink); }
.fw-privacy > summary > b { min-width: 0; }
.fw-privacy > summary::after { margin-left: auto; padding-left: 8px; }   /* ▾ 를 오른쪽 끝으로 */
@media (hover: hover) { .fw-privacy > summary:hover { color: var(--ink); } }

/* 펼친 내용은 자물쇠 너비(18) + 사이(10) 만큼 더 들여쓴다 — 첫 줄 글자와 왼쪽이 맞는다 */
.fw-privacy__b { padding: 0 15px 13px 43px; }

/* 문장마다 한 줄. 좁아지면 그 줄 안에서만 접힌다 — 문장끼리 섞여 어절이 갈라지지 않는다. */
.fw-privacy__l, .fw-desk__l { display: block; margin-top: 2px; }

/* '컴퓨터에서 쓰세요' 안내 — 폰에서만 보인다(§3 에서 켠다).
   데스크톱에서 보여 봐야 할 말이 아니라 기본은 감춰 둔다.
   개인정보 띠와 똑같이 접어 둔다 — 권하는 말(굵은 첫 줄)은 접혀도 보인다. */
.fw-desk {
  display: none;
  margin-bottom: 16px;
  border-radius: var(--r-card);   /* --c-amber 는 테두리 토큰이 없다. 칩들처럼 면색만 쓴다 */
  background: var(--c-amber); color: var(--c-amber-fg);
  font: 400 var(--fs-xs) / var(--lh-body) var(--font); word-break: keep-all;
}
/* 여백은 띠가 아니라 summary 에 — 띠 전체(50px)가 누르는 자리가 된다(.fw-privacy 와 같은 이유) */
.fw-desk > summary { display: flex; align-items: center; padding: 13px 15px; }
.fw-desk > summary::after {
  margin-left: auto; padding-left: 8px;
  color: currentColor;            /* .fold 기본값(--ink-4)은 이 노란 면 위에서 잘 안 보인다 */
}
.fw-desk__b { padding: 0 15px 13px; }

/* 입력 / 미리보기 전환 — 폰에서만 보인다 */
.fw-switch { display: none; gap: 6px; margin-bottom: 14px; }
.fw-switch__b {
  flex: 1; height: 44px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-2); font: 700 var(--fs-sm) / 1 var(--font); cursor: pointer;
}
.fw-switch__b.is-on { background: var(--carrot-ink); border-color: var(--carrot-ink); color: #fff; }

.fw-cols { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 26px; align-items: start; }
.fw-edit { min-width: 0; }
.fw-view { min-width: 0; }

.fw-head {
  margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font: 800 var(--fs-md) / 1.3 var(--font); letter-spacing: var(--ls-title);
}
.fw-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.fw-field { margin-bottom: 12px; }
.fw-field > label { display: block; margin-bottom: 5px; font: 700 var(--fs-sm) / 1.3 var(--font); }
.fw-req { color: var(--danger); }
.fw-field input, .fw-field textarea {
  width: 100%; height: var(--h-input); padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-input); background: var(--card);
  font: 400 var(--fs-md) / 1.4 var(--font); color: var(--ink);   /* 16px 미만이면 iOS 가 화면을 확대한다 */
}
.fw-field textarea { height: auto; padding: 11px 13px; resize: vertical; min-height: 78px; }
.fw-field input:focus-visible, .fw-field textarea:focus-visible { outline: 2px solid var(--carrot-ink); outline-offset: 1px; }
.fw-hint { display: block; margin-top: 5px; font: 400 var(--fs-mini) / 1.55 var(--font); color: var(--ink-3); }
.fw-note { margin: -2px 0 12px; font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-3); }

/* 안내 글이 줄 끝에서 낱말 짝을 갈라 놓지 않게.
   '여럿이 쓰는 컴퓨터라면 다 / 쓰신 뒤' 처럼 어절이 쪼개져 읽기 나빴다(2026-09-18 대표 지적).
   · word-break: keep-all  낱말 한가운데서 자르지 않는다
   · text-wrap: pretty     줄 끝에 한 조각만 남는 것을 브라우저가 알아서 피한다(크롬 117+)
   ⚠️ 이건 거들 뿐이다. **문장을 짧게 끊어 두는 것**이 진짜 해법이다. */
.fw-privacy, .fw-desk, .fw-note, .fw-hint {
  word-break: keep-all;
  text-wrap: pretty;
}

/* 두 칸을 한 줄에 — 좁아지면 저절로 한 칸씩 내려간다 */
.fw-edit { display: flex; flex-wrap: wrap; gap: 0 14px; }
.fw-edit > * { flex: 1 1 100%; }
.fw-field--half { flex: 1 1 calc(50% - 7px); }
.fw-head, .fw-note, .fw-acts, .fw-tip { flex: 1 1 100%; }

/* 종류 고르기 — 11개라 두 줄로 흘려 놓으면 눈이 어지럽다. 한 줄에 하나씩 쌓는다. */
.fw-radios { display: flex; flex-direction: column; gap: 2px; }
.fw-radio {
  display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 11px;
  border-radius: var(--r-input); cursor: pointer;
  font: 400 var(--fs-sm) / 1.4 var(--font); color: var(--ink-2);
}
.fw-radio input { flex: none; width: 17px; height: 17px; accent-color: var(--carrot-ink); }
.fw-radio:has(input:checked) { background: var(--tint); color: var(--ink); font-weight: 700; }
@media (hover: hover) { .fw-radio:hover { background: var(--fill); } }

.fw-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fw-acts > .btn { flex: 1 1 auto; }
.fw-tip { margin-top: 10px; font: 400 var(--fs-mini) / 1.65 var(--font); color: var(--ink-3); }
.fw-disc { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font: 400 var(--fs-mini) / 1.7 var(--font); color: var(--ink-3); }

/* 종이 — 그림자 대신 선으로 층을 나눈다(그림자 금지) */
.fw-paper {
  padding: 30px 32px; border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: #fff; color: #1a1a1a;
  position: sticky; top: 84px;        /* 입력칸을 내려가며 채워도 문서가 따라온다 */
  max-height: calc(100vh - 110px); overflow-y: auto;
}


/* ════════════════════════════════════════════════════════════════════════════
   §2. 문서 — 여기 보이는 그대로가 인쇄물이고 워드 파일이다
   ⚠️ 원본 워드 서식의 모양을 따라간다. 색을 넣지 말 것(인쇄하면 회색이 된다).
   ════════════════════════════════════════════════════════════════════════════ */

.wd-note, .wd-foot { font: 400 12px / 1.6 var(--font); color: #555; word-break: keep-all; }
.wd-foot { margin-top: 14px; }
.wd-title {
  margin: 14px 0 16px; text-align: center;
  font: 700 21px / 1.3 var(--font); letter-spacing: 7px; text-indent: 7px;   /* 자간만큼 오른쪽으로 쏠리는 걸 되돌린다 */
}
.wd-sec { margin: 16px 0 6px; font: 700 13px / 1.4 var(--font); }

.wd-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wd-tbl th, .wd-tbl td {
  border: 1px solid #333; padding: 7px 9px; vertical-align: middle;
  font: 400 13px / 1.5 var(--font); word-break: keep-all;
}
.wd-tbl th { background: #f4f3f2; font-weight: 700; text-align: center; }
.wd-tbl td { text-align: left; }
.wd-c { text-align: center !important; }
.wd-dim { color: #666; font-size: 12px; }
.wd-multi { min-height: 54px; }
.wd-tbl--body th { width: 92px; }
.wd-tbl--kinds th:first-child, .wd-tbl--kinds td:first-child { width: 58px; }
.wd-tbl--kinds th:last-child,  .wd-tbl--kinds td:last-child  { width: 150px; }
.wd-law { font-size: 12px; color: #555; }
/* 순번이 붙은 여러 줄 표(연락처·물품 목록) — 머리줄만 회색, 칸은 좁게 */
.wd-tbl--rows th { font-size: 12px; padding: 5px 6px; }
.wd-tbl--rows td { padding: 5px 6px; font-size: 12px; }
.wd-tbl--rows th:first-child, .wd-tbl--rows td:first-child { width: 36px; }
/* 계약서 조항 — 제○조 제목 아래 항이 붙는다 */
.wd-art { margin: 11px 0; }
.wd-art > b { display: block; font: 700 13px / 1.5 var(--font); }
.wd-art p { margin: 3px 0 0; font: 400 12.5px / 1.7 var(--font); word-break: keep-all; }
.wd-in { padding-left: 14px; }
/* 계약서 맨 아래 갑 · 을 칸 */
.wd-party { margin-top: 10px; }
.wd-party th[colspan] { text-align: left; background: #ebe9e7; }

/* 동의서의 '항목 · 목적 · 보유기간' 표 — 머리줄은 회색, 내용은 왼쪽 정렬 */
.wd-tbl--info th { font-size: 12px; }
.wd-tbl--info td { font-size: 12px; text-align: left; vertical-align: top; }
/* 동의 여부를 묻는 줄 */
.wd-tbl--agree th { width: auto; text-align: left; font-size: 12px; }
.wd-tbl--agree td:nth-child(2) { width: 130px; }
.wd-tbl--agree td:last-child { width: 220px; font-size: 12px; }
.wd-signbox .wd-v { min-width: 104px; }   /* 인라인이 아니라 여기서 — 폰에서 줄일 수 있게 */

/* 수습평가표 — 칸이 11개라 글자를 줄이고 평가 칸을 좁게 */
.wd-tbl--eval th, .wd-tbl--eval td { padding: 4px 3px; font-size: 11.5px; }
.wd-tbl--eval .wd-q { text-align: left; font-size: 11.5px; padding-left: 6px; }
.wd-tbl--eval th:nth-child(n+4), .wd-tbl--eval td:nth-child(n+4) { width: 26px; }
.wd-tbl--eval th:first-child, .wd-tbl--eval td:first-child { width: 54px; }
.wd-tbl--eval th:nth-child(3), .wd-tbl--eval td:nth-child(3) { width: 32px; }
.wd-tbl--eval th:last-child, .wd-tbl--eval td:last-child { width: 40px; }
.fw-pt { color: var(--carrot-ink); font-weight: 700; }

/* 인계자 · 인수자를 좌우로 나란히 놓는 표 — 라벨 칸을 좁게 잡아야 값이 안 접힌다 */
.wd-tbl--pair { table-layout: auto; }
.wd-tbl--pair th { width: auto; white-space: nowrap; font-size: 12px; padding: 6px 7px; }
.wd-pairhead { width: 52px; }

/* 예/아니요로 답하는 표 — 질문이 길어서 왼쪽을 넓게 */
.wd-tbl--ask td:first-child { text-align: left; font-size: 12px; }
.wd-tbl--ask td:last-child { width: 108px; }
.wd-group { font-weight: 700; }

/* 값이 들어가는 자리. 비어 있으면 옅은 밑줄만 보여서 '여기 적는 칸' 임을 알린다. */
.wd-v {
  display: inline-block; min-width: 76px; padding: 0 2px;
  border-bottom: 1px solid #c9c9c9; line-height: 1.7;
}
/* 값이 채워지면 '빈칸 너비' 를 놓아 준다. 안 그러면 '주식회사 남동상사___에서' 처럼
   글자 뒤에 빈틈이 남는다. 문서 쪽 min-width 는 인라인 style 로 박혀 있어서 !important 가 필요하다. */
.wd-v.is-filled { border-bottom-color: transparent; font-weight: 700; min-width: 0 !important; }
.wd-multi .wd-v { min-width: 100%; border-bottom: 0; white-space: pre-wrap; }

.wd-chk { display: inline-block; min-width: 14px; font-weight: 400; }
.wd-chk.is-on { font-weight: 800; }

/* 서약서·계약서처럼 **조항이 본문인** 서식용 */
.wd-title--sm { font-size: 18px; letter-spacing: 4px; text-indent: 4px; }   /* 제목이 길면 자간을 줄인다 */
.wd-mid  { margin: 14px 0; text-align: center; font: 700 13px / 1.5 var(--font); }
/* ⚠️ styles.css 206 줄이 ul, ol 의 list-style 을 통째로 none 으로 지운다.
   조항 번호(1. 2. 3.)가 이 서식의 내용이라 여기서 되살린다. */
.wd-list { margin: 0 0 4px; padding-left: 24px; list-style: decimal; }
.wd-list > li { margin-bottom: 9px; font: 400 13px / 1.75 var(--font); word-break: keep-all; }
.wd-sub  { margin: 7px 0 2px; padding-left: 4px; list-style: none; }
.wd-sub > li { position: relative; padding-left: 12px; margin-bottom: 4px;
  font: 400 12px / 1.7 var(--font); color: #333; word-break: keep-all; }
.wd-sub > li::before { content: "•"; position: absolute; left: 0; }
.wd-to   { margin: 16px 14px 0 0; text-align: right; font: 400 13px / 1.6 var(--font); }

/* 회사가 발행하는 문서의 맺음 — 회사 이름 아래 '대표이사 ○○○ (직인)' */
.wd-issuer { margin: 14px 14px 6px 0; text-align: right; }
.wd-issuer__co  { margin: 0; font: 700 14px / 1.6 var(--font); }
.wd-issuer__ceo { margin: 4px 0 0; font: 400 13px / 1.6 var(--font); }

/* 절취선 — 아래쪽 '수령 확인증' 을 잘라 내는 자리(원본 서식에 있는 줄) */
.wd-cut {
  position: relative; margin: 22px 0 16px; text-align: center;
  border-top: 1px dashed #999;
}
.wd-cut > span {
  position: relative; top: -9px; padding: 0 10px; background: #fff;
  font: 400 11px / 1 var(--font); color: #777; letter-spacing: 2px;
}
.wd-subtitle { margin: 0 0 10px; text-align: center; font: 700 15px / 1.4 var(--font); letter-spacing: 2px; }

/* 해고 사유 가·나·다 — 한 칸 안에서 줄을 나눈다 */
.wd-reason { display: block; margin-top: 5px; font: 400 13px / 1.6 var(--font); }

.wd-p { margin: 16px 0; font: 400 13px / 1.8 var(--font); word-break: keep-all; }
.wd-date { margin: 20px 0 14px; text-align: center; font: 400 13px / 1.6 var(--font); }
.wd-sign { margin: 0 14px 18px 0; text-align: right; font: 400 13px / 1.6 var(--font); }


/* ════════════════════════════════════════════════════════════════════════════
   §3. 폰 — 좌우로 못 나눈다. 바꿔 가며 본다.
   ════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ screen 을 꼭 붙일 것. 인쇄할 때 A4 는 CSS 로 **794px** 폭이라, 그냥 (max-width: 900px)
   로 두면 **종이에도 폰 규칙이 걸린다**(제목 18px·표 글자 12px·칸너비 자동). 종이는 항상
   위쪽 기본값으로 찍혀야 한다. */
@media screen and (max-width: 900px) {
  .fw-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fw-switch { display: flex; }
  .fw-desk { display: block; }
  /* 고른 쪽만 보인다. data-show-pane 이 없으면(=JS 가 아직 안 붙었으면) 둘 다 보인다. */
  .fw-cols[data-show-pane="edit"] > .fw-view,
  .fw-cols[data-show-pane="view"] > .fw-edit { display: none; }
  /* ⚠️ overflow 를 두 축 모두 visible 로 둘 것. overflow-y 만 auto 로 남겨 두면 브라우저가
     overflow-x: visible 을 **auto 로 바꿔 버려서** 종이 칸 안에 가로 스크롤이 생긴다
     (2026-09-17 운영에서 60px 발견 — ⛔ 가로 스크롤 금지). */
  .fw-paper { position: static; max-height: none; padding: 20px 14px; overflow: visible; }
  .wd-title { font-size: 18px; letter-spacing: 4px; text-indent: 4px; }
  /* 폰에서는 **칸을 반드시 화면 안에 욱여넣는다.** table-layout: auto 로 글자에 맞추면
     연락처 같은 긴 값이 표를 화면 밖으로 밀어낸다. 두 줄로 접히더라도 안 넘치는 쪽을 택한다
     — 어차피 폰 미리보기고, 진짜 결과물은 A4 다(인쇄는 §4 가 다시 잡는다). */
  .wd-tbl { table-layout: fixed; }
  .wd-tbl th, .wd-tbl td { padding: 6px 4px; font-size: 12px; }
  .wd-tbl th { white-space: normal; word-break: keep-all; }
  .wd-tbl--body th { width: 72px; }
  .wd-tbl--kinds th:last-child, .wd-tbl--kinds td:last-child { width: 96px; }
  .wd-law { font-size: 12px; }
  .wd-v { min-width: 0; word-break: break-all; }
  /* 동의서의 '동의/미동의 + 서명' 줄은 데스크톱 고정폭(130+220)이 375px 를 넘긴다.
     폰에서는 서명칸을 아래로 내려 세 칸이 아니라 두 줄로 만든다(2026-09-17 실측 54px 초과). */
  .wd-tbl--agree { table-layout: fixed; }
  .wd-tbl--agree td:nth-child(2) { width: 96px; }
  .wd-tbl--agree td:last-child { width: 88px; font-size: 11.5px; }
  .wd-signbox .wd-v { min-width: 0; }   /* 긴 전화번호가 칸을 밀어내지 않게 */
  .fw-acts > .btn { flex: 1 1 100%; --btn-h: 48px; }
  .fw-field--half { flex: 1 1 100%; }
}

/* 아주 좁은 화면(360 이하)에서 세 번째 열이 표를 밀어내지 않게 */
@media screen and (max-width: 380px) {
  .wd-tbl--kinds th:last-child, .wd-tbl--kinds td:last-child { width: 78px; font-size: 12px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   §4. 인쇄 — 이 사이트 최초의 인쇄용 규칙
   문서 한 장만 남기고 전부 감춘다. 브라우저의 '프린터: PDF로 저장' 이 곧 PDF 저장이다.
   ⚠️ 헤더·푸터·챗봇 버튼까지 하나라도 남으면 종이에 그대로 찍힌다.
   ════════════════════════════════════════════════════════════════════════════ */

@media print {
  /* 브라우저가 종이 위·아래 여백에 제멋대로 찍는 글자를 없앤다(2026-10-02 대표 지시).
       위: '26. 10. 2.  재직증명서 작성 · 남동구사업가모임 with 당근'
       아래: 'https://namdongbiz.co.kr/form-write.php?f=employ   1/1'
     완성된 서류에 사이트 이름·주소가 박혀 나가면 거슬린다.

     여백 칸(@top-left …) 을 **빈 글자로 우리가 차지**하면 크롬·엣지는 자기 머리글·바닥글을 안 찍는다
     (크롬 131+ 의 '페이지 여백 칸'). 여백 크기는 그대로라 본문 자리가 한 치도 안 움직인다.
     ⚠️ 흔히 쓰는 `margin: 0` 꼼수는 쓰지 말 것 — 두 장 넘는 계약서에서 **둘째 장부터 여백이 사라진다.**
     실측(크롬 154·엣지 154, 머리글·바닥글 켠 상태): 위·아래 띠에 글자 0, 본문 위치 전과 같음.
     파이어폭스·사파리는 이 칸을 몰라서 무시한다 — 그쪽은 인쇄 창의 '머리글과 바닥글' 을 끄면 된다. */
  @page {
    size: A4; margin: 18mm 16mm;
    @top-left    { content: ""; } @top-center    { content: ""; } @top-right    { content: ""; }
    @bottom-left { content: ""; } @bottom-center { content: ""; } @bottom-right { content: ""; }
  }

  html, body { background: #fff !important; }

  /* 문서가 아닌 것은 전부 숨긴다 */
  .site-header, .site-footer, .chat, .chat-fab, .chat-panel, .skip-link,
  .ap-head, .fw-privacy, .fw-desk, .fw-switch, .fw-edit, .fw-disc, .crumb { display: none !important; }

  .container, .screen, .ap-wrap, .ap-body {
    max-width: none !important; width: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  }
  .fw-cols { display: block !important; }

  .fw-paper {
    position: static !important; max-height: none !important; overflow: visible !important;
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  }

  /* ※ 안내 두 줄은 **화면에서만** 보인다(2026-09-17 대표 지시).
     쓰는 사람이 읽어야 할 말이지, 완성된 신청서에 남아야 할 말은 아니라고 보셨다.
     워드로 받을 때도 빠진다(form-writer.js 가 같이 걷어 낸다). */
  .wd-note, .wd-foot { display: none !important; }

  /* 한 장에 앉히기 — 화면에서 쓰던 간격 그대로면 A4 를 5%%쯤 넘어 두 장이 된다(실측 1.05장).
     글자는 그대로 두고 **줄 사이 여백만** 조인다. */
  .wd-sec  { margin: 11px 0 5px; }
  .wd-p    { margin: 10px 0; }
  .wd-date { margin: 12px 0 8px; }
  .wd-sign { margin-bottom: 10px; }
  .wd-foot { margin-top: 10px; }
  /* 표가 16줄쯤 되니 위아래 여백 1px 이 전체로는 30px 넘게 차이가 난다 — 한 장이냐 두 장이냐가 여기서 갈린다 */
  .wd-tbl th, .wd-tbl td { padding: 5px 8px; }
  .wd-list > li { margin-bottom: 6px; }
  .wd-art { margin: 8px 0; }
  .wd-art p { line-height: 1.6; }
  .wd-sub > li { margin-bottom: 2px; }
  .wd-mid { margin: 10px 0; }
  .wd-to  { margin-top: 12px; }

  /* 표가 장을 넘어가며 잘리지 않게 */
  .wd-tbl { page-break-inside: avoid; }
  .wd-title { page-break-after: avoid; }
  .wd-sec { page-break-after: avoid; }

  /* 빈칸 밑줄은 종이에서도 보여야 한다(손으로 채울 수 있게) */
  .wd-v { border-bottom-color: #999 !important; }
  .wd-v.is-filled { border-bottom-color: transparent !important; }
}