/* 연봉 실수령액 계산기 — 같은 계열(감열지·POS)의 다른 물건: 연속 용지 급여명세서.
 * 실시간 카운터는 감열지 + 초록 포인트, 여기는 트랙터 구멍 뚫린 연속 용지 + 그린바 줄무늬 + 공제 빨강.
 * 공통 장르 스타일은 ../style.css, 여기는 이 페이지에만 있는 것. */
:root {
  --brand: #c9302c;
  --brand-pressed: #a5241f;
  --brand-soft: #f7e1de;
  --brand-on: #ffffff;

  --font-dot: "DotGothic16", "IBM Plex Mono", var(--font-mono);

  /* 장식 전용: 사무실 책상 회녹색 + 연속 용지 */
  --art-paper: #d5dad3;
  --art-slip: #fbfbf7;
  --art-bar: #e5eee1;
  --art-rule: #b4bbb2;
  --art-kraft: #d2ad72;
  --art-kraft-2: #bf9558;
  --art-hole: radial-gradient(circle, var(--art-paper) 4px, transparent 4.5px);
}

/* ---------- 연속 용지: 양옆 트랙터 구멍 + 절취 점선 ---------- */
.sheet-form,
.np-form,
.np-receipt .slip,
.doc-seo .doc {
  position: relative;
  padding-left: 32px;
  padding-right: 32px;
  background:
    var(--art-hole) 0 6px / 22px 24px repeat-y,
    var(--art-hole) 100% 6px / 22px 24px repeat-y,
    var(--art-slip);
  color: var(--art-ink);
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
}
.sheet-form::before,
.np-form::before,
.np-receipt .slip::before,
.doc-seo .doc::before {
  content: "";
  position: absolute;
  inset: 0 22px;
  border-left: 1px dashed var(--art-rule);
  border-right: 1px dashed var(--art-rule);
  pointer-events: none;
}

/* ---------- 첫 화면 ---------- */
.np-top { display: flex; flex-direction: column; gap: 0; padding-bottom: var(--sp-16); }
.sheet-form { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-12);
  padding-bottom: var(--sp-10);
  border-bottom: 2px solid var(--art-ink);
}
.form-head__no { margin: 0; font: 500 11px/16px var(--font-num); letter-spacing: 0.02em; color: var(--art-ink-2); }
.form-head__title { margin: var(--sp-4) 0 0; font: 700 24px/30px var(--font-kr); letter-spacing: -0.04em; color: var(--art-ink); }
.form-head__seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-top: var(--sp-2);
  border-radius: var(--r-full);
  border: 2.5px solid var(--brand);
  box-shadow: inset 0 0 0 2px var(--art-slip), inset 0 0 0 3.5px var(--brand);
  color: var(--brand);
  font: 700 12px/14px var(--font-num);
  text-align: center;
  rotate: -12deg;
  opacity: 0.88;
  animation: seal-stamp 720ms var(--spring) 1500ms both;
}
@keyframes seal-stamp {
  0% { transform: scale(1.9); opacity: 0; }
  55% { transform: scale(0.88); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* 명세 장부: 지급액 → 공제 6줄(빨강) → 차인지급액 */
.ledger { padding-top: var(--sp-10); }
.ledger__basis { margin: 0 0 var(--sp-6); font: 500 11px/16px var(--font-num); color: var(--art-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger__gross {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-8);
  padding: var(--sp-4) 0 var(--sp-6);
  border-bottom: 1px solid var(--art-ink);
  font: 600 13px/20px var(--font-kr);
}
.ledger__gross b { font: 700 19px/24px var(--font-dot); letter-spacing: 0.02em; }
.ledger__rows { margin: 0; padding: 0; list-style: none; }
.ledger__rows li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
  padding: 0 var(--sp-6);
  font: 400 13px/21px var(--font-kr);
}
.ledger__rows li:nth-child(odd) { background: var(--art-bar); }
.ledger__rows i { flex: 1; min-width: var(--sp-8); border-bottom: 1px dotted var(--art-rule); transform: translateY(-5px); }
.ledger__rows b { font: 700 14px/21px var(--font-dot); color: var(--brand); letter-spacing: 0.02em; }
.ledger.is-print .ledger__rows li { animation: dot-line 300ms steps(7) both; animation-delay: calc(var(--i) * 75ms + 40ms); }
.ledger.is-print .ledger__gross b { animation: dot-line 260ms steps(6) both; }
@keyframes dot-line {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

.ledger__bar {
  display: flex;
  height: 14px;
  margin: var(--sp-8) 0 var(--sp-6);
  overflow: hidden;
  border: 1.5px solid var(--art-ink);
  background: var(--art-slip);
}
.ledger__net { width: 100%; background: var(--art-ink); transition: width 760ms var(--spring); }
.ledger__cut {
  width: 0;
  background: repeating-linear-gradient(-45deg, var(--brand) 0 3px, transparent 3px 6px);
  transition: width 760ms var(--spring);
}

.ledger__total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: var(--sp-8);
}
.ledger__k { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: var(--sp-6); font: 700 13px/18px var(--font-kr); color: var(--art-ink); }
.ledger__k small { font: 500 11px/14px var(--font-num); color: var(--art-ink-2); }
.ledger__v {
  grid-column: 1 / 3;
  grid-row: 2;
  justify-self: start;
  padding-bottom: var(--sp-2);
  border-bottom: 4px double var(--art-ink);
  font: 700 42px/48px var(--font-dot);
  letter-spacing: -0.02em;
  color: var(--art-ink);
  font-variant-numeric: tabular-nums;
}
.ledger__v::after { content: "원"; margin-left: var(--sp-4); font: 700 18px/1 var(--font-kr); }
.ledger__v.is-pop { animation: thud 520ms var(--spring); }
@keyframes thud {
  0% { transform: translateY(-4px) scale(1.04, 0.94); }
  100% { transform: none; }
}
.ledger__tag {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: var(--sp-2) var(--sp-8);
  border: 1.5px solid var(--brand);
  border-radius: var(--r-4);
  color: var(--brand);
  font: 700 12px/14px var(--font-kr);
  rotate: -8deg;
}
.ledger__tag.is-mine { background: var(--brand); color: var(--brand-on); }

/* 입력: 같은 연속 용지의 다음 장 (가로 절취선) */
.np-form { padding-top: var(--sp-16); padding-bottom: var(--sp-12); border-top: 2px dashed var(--art-rule); }
.np-form.gap-12 { gap: var(--sp-10); }
.np-form .seg__btn { min-height: 40px; }
.np-form .quick { margin-top: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); }
.np-form .quick .chip { justify-content: center; min-height: 40px; padding: 0; font: 600 13px/1 var(--font-num); }
.np-form .input-unit .input { min-height: 52px; }
.np-form .seg__btn.is-on { background: var(--art-ink); }
.np-form .chip { border-radius: var(--r-0); }

/* 접힌 옵션: 명세서 하단 메모 줄 */
.opts { border-top: 1px solid var(--art-ink); }
.opts summary {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--tap-min);
  font: 600 14px/20px var(--font-kr);
  color: var(--art-ink);
  cursor: pointer;
  list-style: none;
}
.opts summary::-webkit-details-marker { display: none; }
.opts summary b { margin-left: auto; font: 700 13px/18px var(--font-num); color: var(--art-ink-2); }
.opts summary::after { content: "▾"; font: 700 14px/1 var(--font-num); color: var(--brand); width: 16px; text-align: center; transition: transform 380ms var(--spring); }
.opts[open] summary::after { transform: rotate(180deg); }
.opts__body { padding-top: var(--sp-4); }

/* 시작 버튼: 명세서에 찍는 '지급 확인' 도장 */
.seal-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-16);
  width: 100%;
  min-height: 76px;
  margin-top: var(--sp-10);
  padding: var(--sp-10) var(--sp-16) var(--sp-10) var(--sp-12);
  border: 0;
  border-radius: var(--r-4);
  background: var(--art-ink);
  color: var(--art-slip);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: var(--shadow-m);
}
.seal-btn__seal {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  border: 3px solid var(--brand);
  box-shadow: inset 0 0 0 2px var(--art-slip), inset 0 0 0 3.5px var(--brand);
  background: var(--art-slip);
  color: var(--brand);
  font: 700 13px/15px var(--font-kr);
  text-align: center;
  rotate: -10deg;
  transition: transform 460ms var(--spring);
}
.np-top .seal-btn__seal { animation: seal-stamp 760ms var(--spring) 600ms both; }
.seal-btn:active .seal-btn__seal { transform: scale(0.84) rotate(14deg); transition-duration: 80ms; }
.seal-btn__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.seal-btn__body b { font: 700 18px/24px var(--font-kr); letter-spacing: -0.03em; }
.seal-btn__body small { font: 500 12px/16px var(--font-num); color: var(--art-wheel-shade); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seal-btn__arrow { font: 700 24px/1 var(--font-num); color: var(--brand); transition: transform 460ms var(--spring); }
.seal-btn:active .seal-btn__arrow { transform: translateY(6px); transition-duration: 80ms; }

/* ---------- 급여명세서 (결과, 근로자 보관용) ---------- */
.np-receipt { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-8) 0 var(--sp-16); scroll-margin-top: var(--sp-8); }
.np-receipt .slip { padding-top: var(--sp-20); padding-bottom: var(--sp-24); }
.receipt__store { text-align: left; font: 700 15px/22px var(--font-kr); letter-spacing: 0; padding-bottom: var(--sp-6); border-bottom: 2px solid var(--art-ink); }
.receipt__meta { text-align: left; padding-top: var(--sp-6); }
.receipt__k { color: var(--art-ink-2); }
.result-card__big { color: var(--art-ink); font-family: var(--font-dot); text-decoration: underline double; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.receipt__line { font: 500 13px/20px var(--font-num); color: var(--art-ink-2); }
.receipt__fine { font: 400 12px/18px var(--font-kr); color: var(--art-ink-2); }
.receipt__actions { margin-top: var(--sp-8); }
.receipt__actions .btn { background: transparent; border: 1.5px solid var(--art-ink); border-radius: var(--r-0); font-family: var(--font-kr); }
.breakdown tr:not(.is-sub):not(.is-total):not(:first-child) td { color: var(--brand); }
.breakdown tr:not(.is-sub):not(:last-child):nth-child(odd) { background: var(--art-bar); }
.breakdown .is-total td { color: var(--art-ink); }
.result-card.is-print { animation: paper-out 1100ms steps(14) both; }
@keyframes paper-out {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-12px); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}

/* 카운터로 가는 참조 쪽지 */
.coupon {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-24);
  border: 1.5px solid var(--art-ink);
  border-radius: var(--r-0);
  background: var(--art-slip);
  color: var(--art-ink);
  text-decoration: none;
  transition: transform 380ms var(--spring);
}
.coupon::before {
  content: "";
  position: absolute;
  left: var(--sp-8);
  top: var(--sp-12);
  bottom: var(--sp-12);
  width: 4px;
  background: var(--brand);
}
.coupon:active { transform: scale(0.98) rotate(-0.6deg); transition-duration: 80ms; }
.coupon__k { font: 700 11px/14px var(--font-num); letter-spacing: 0.06em; color: var(--brand); }
.coupon__t { font: 700 17px/24px var(--font-kr); letter-spacing: -0.02em; }
.coupon__t span { color: var(--brand); font-family: var(--font-num); }
.coupon__s { font: 500 12px/18px var(--font-num); color: var(--art-ink-2); }

/* ---------- SEO: 연속 용지 서식 ---------- */
.doc-seo .doc { padding-top: var(--sp-20); padding-bottom: var(--sp-24); }
.doc-seo .doc__head { text-align: left; padding-bottom: var(--sp-8); border-bottom: 2px solid var(--art-ink); }
.doc-seo .doc-table tbody tr:nth-child(odd) { background: var(--art-bar); }
.doc-seo .doc-table th,
.doc-seo .doc-table td { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.doc-seo .doc-table .is-total td { color: var(--art-ink); text-decoration: underline double; text-underline-offset: 5px; }
.doc-seo .seo-table tbody tr:nth-child(odd) { background: var(--art-bar); }

/* 근로소득세 계산 메모 */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: baseline;
  padding: var(--sp-6) var(--sp-4);
  counter-increment: st;
}
.steps li:nth-child(odd) { background: var(--art-bar); }
.steps li::before { content: counter(st); font: 700 11px/1 var(--font-num); color: var(--art-ink-2); }
.steps span { font: 400 13px/20px var(--font-kr); color: var(--art-ink); }
.steps b { font: 700 14px/20px var(--font-num); white-space: nowrap; }
.steps .is-hot b,
.steps .is-hot span { color: var(--brand); font-weight: 700; }

/* 자주 묻는 질문: 급여 문의 회신철 (번호 · 문의 · 처리 도장) */
.inq__cols,
.inq summary {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 54px;
  align-items: stretch;
}
.inq__cols {
  margin-top: var(--sp-8);
  border-bottom: 1.5px solid var(--art-ink);
  font: 600 10px/24px var(--font-num);
  letter-spacing: 0.06em;
  color: var(--art-ink-2);
}
.inq__cols span + span { padding-left: var(--sp-8); }
.inq__cols span:last-child { text-align: center; padding-left: 0; }
.doc-seo details.inq { padding: 0; border: 0; }
.inq summary {
  min-height: 56px;
  border-bottom: 1px solid var(--art-rule);
  list-style: none;
  cursor: pointer;
}
.inq summary::-webkit-details-marker { display: none; }
.inq summary > span { display: flex; align-items: center; }
.inq summary > span + span { border-left: 1px solid var(--art-rule); padding-left: var(--sp-8); }
.inq__no { font: 600 11px/1 var(--font-num); color: var(--art-ink-2); }
.inq__q { font: 600 14px/20px var(--font-kr); color: var(--art-ink); padding-right: var(--sp-6); }
.inq summary > .inq__st { justify-content: center; padding-left: 0; }
.inq__st::before {
  content: "회신";
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  border: 1.5px dashed var(--art-rule);
  font: 700 11px/1 var(--font-kr);
  color: var(--art-ink-2);
  transition: transform 420ms var(--spring);
}
.inq__st { font-size: 0; }
.inq[open] .inq__st::before {
  border: 2px solid var(--brand);
  color: var(--brand);
  transform: rotate(-14deg);
  animation: seal-stamp 520ms var(--spring) both;
}
.inq summary:active .inq__st::before { transform: scale(0.85); transition-duration: 70ms; }
.inq__a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-10);
  align-items: start;
  margin: 0 0 var(--sp-6) 50px;
  padding: var(--sp-10) var(--sp-10) var(--sp-12) var(--sp-12);
  border-left: 3px solid var(--brand);
  background: var(--art-bar);
}
.inq[open] .inq__a { animation: dot-line 320ms steps(6) both; }
.inq__a p { grid-column: 1; grid-row: 1; }
.seo .inq__a p { margin: 0; font: 400 13px/20px var(--font-kr); color: var(--art-ink); }
.inq__seal {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-4);
  border: 2px solid var(--brand);
  color: var(--brand);
  font: 700 11px/1 var(--font-kr);
  rotate: 8deg;
  opacity: 0.85;
}

/* ---------- 하단 추천: 월급봉투에 같이 든 동봉 서류 ---------- */
.more-sites {
  position: relative;
  margin-top: var(--sp-8);
  padding: 52px var(--sp-16) var(--sp-20);
  border-radius: var(--r-4);
  background: var(--art-kraft);
  color: var(--art-ink);
  overflow: hidden;
}
.more-sites::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  background: var(--art-kraft-2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.more-sites__title {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-12);
  padding-bottom: var(--sp-8);
  border-bottom: 2px solid var(--art-ink);
  opacity: 1;
  font: 700 17px/24px var(--font-kr);
  letter-spacing: -0.02em;
}
.more-sites__title small { margin-left: auto; font: 500 11px/14px var(--font-num); color: var(--art-ink); opacity: 0.75; }
.more-sites__grid { gap: var(--sp-8); }
.more-sites__item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
  column-gap: var(--sp-12);
  row-gap: var(--sp-2);
  align-items: center;
  min-height: 72px;
  padding: var(--sp-10) var(--sp-12);
  border: 0;
  background: var(--art-slip);
  color: var(--art-ink);
  text-decoration: none;
  box-shadow: var(--shadow-s);
  transition: transform 420ms var(--spring);
}
.more-sites__item:nth-child(2) { margin-left: var(--sp-6); }
.more-sites__item:nth-child(3) { margin-left: var(--sp-2); }
.more-sites__item::after {
  content: "→";
  grid-column: 3;
  grid-row: 1 / 4;
  font: 700 18px/1 var(--font-num);
  color: var(--brand);
}
.more-sites__item:active { transform: translateY(-6px); transition-duration: 80ms; }
.encl__box {
  grid-column: 1;
  grid-row: 1 / 4;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--art-ink);
}
.more-sites__item:active .encl__box::after {
  content: "✓";
  position: absolute;
  inset: -6px -4px auto auto;
  font: 700 22px/1 var(--font-num);
  color: var(--brand);
}
.encl__no { grid-column: 2; font: 600 10px/14px var(--font-num); letter-spacing: 0.04em; color: var(--brand); }
.more-sites__name { grid-column: 2; font: 700 15px/20px var(--font-kr); letter-spacing: -0.02em; color: var(--art-ink); }
.more-sites__desc { grid-column: 2; opacity: 1; font: 500 12px/16px var(--font-num); color: var(--art-ink-2); }

.site-footer { color: var(--art-ink-2); }
.opts summary > span { flex: none; white-space: nowrap; }
.opts summary b { min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 실시간 카운터의 절취 쿠폰 모양(노치·기울기)은 여기선 쓰지 않는다 */
.more-sites__item { -webkit-mask: none; mask: none; rotate: none; }