/* 연말정산 임직원용 매뉴얼만의 규칙. 뼈대는 ../common/style.css 를 그대로 쓴다.

   원문 글자를 100% 그대로 두는 편이라 판에 우리 말이 없다. 카드 한 장 = 판 한 장, 왼쪽 글(주의 줄 + Notice 목록), 오른쪽 화면.
   번호 장이 스물넷이라 물결을 .sec-21 부터 이어 적는다(평가 편과 같은 규칙). */
@media print, screen and (min-width: 900px) {
  .sec-21 { --head-mask: url("../common/head-01.svg"); }
  .sec-22 { --head-mask: url("../common/head-02.svg"); }
  .sec-23 { --head-mask: url("../common/head-03.svg"); }
  .sec-24 { --head-mask: url("../common/head-04.svg"); }
}
.copy { color: var(--mute); font-size: var(--fs-sub); }
.warn { font-weight: 700; margin: 0 0 var(--s2); }
.notice { margin: var(--s4) 0 var(--s2); font-weight: 800; color: var(--accent-text); letter-spacing: .04em; }
.notes { margin: 0; padding-left: 1.3em; }
.notes li { margin: 0 0 var(--s2); line-height: 1.55; }
.common { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.common li { display: grid; grid-template-columns: 3em 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.common b { color: var(--accent-text); font-size: 1.2em; }
.btns { border-collapse: collapse; width: 100%; margin-top: var(--s4); }
.btns th, .btns td { text-align: left; padding: var(--s2) var(--s3); border-top: 1px solid var(--line); vertical-align: top; }
.btns th { white-space: nowrap; color: var(--accent-text); }
.btnrow img { width: 100%; max-width: 560px; height: auto; }
.ye .art.shot img { width: 100%; height: auto; border: 1px solid var(--line); }
@media print, screen and (min-width: 900px) {
  /* 화면이 넓다(가로 1,100~1,700px). 옆 칸에 두면 깨알이 되므로 위에 판 폭으로 크게 두고, 글은 아래 두 단으로 편다. */
  .page .ye { display: flex; flex-direction: column; gap: calc(4 * var(--mm)); margin-top: calc(2 * var(--mm)); flex: 1; min-height: 0; }
  .page .ye .art.shot { order: -1; margin: 0; text-align: center; }
  .page .ye .art.shot img { width: auto; max-width: 100%; max-height: calc(82 * var(--mm)); object-fit: contain; }
  .page .ye-text { columns: 2; column-gap: calc(10 * var(--mm)); }
  .page .ye-text p, .page .notes li { font-size: calc(3.2 * var(--tp)); break-inside: avoid; }
  .page .ye-text .notice { break-after: avoid; }
  .page .notes li { margin-bottom: calc(1.2 * var(--mm)); line-height: 1.5; }
  .page .common li { padding: calc(2.6 * var(--mm)) 0; font-size: calc(3.6 * var(--tp)); }
  .page .btns th, .page .btns td { padding: calc(2 * var(--mm)) calc(3 * var(--mm)); font-size: calc(3.5 * var(--tp)); }
  .page .btnrow img { max-width: calc(140 * var(--mm)); }
  .cover .copy { font-size: calc(2.9 * var(--tp)); margin-top: calc(6 * var(--mm)); }
}
/* 인적공제는 글이 가장 길다 — 화면을 한 단계 더 줄여 쪽 번호와 겹치지 않게 한다. */
@media print, screen and (min-width: 900px) {
  #s05 .ye .art.shot img { max-height: calc(66 * var(--mm)); }
}