/* 셈판 계산기 부품 CSS (.calc- 접두 BEM). 폼, 장부 결과, 방주(근거), 일부인, 고지, 초기화만 담당한다.
 * 색은 테마 토큰(--paper --field --ink --ink-2 --line --seal --error)을 쓰고, 플러그인만 로드해도 같은 값이 나오도록 대체값을 둔다.
 * 순서: 변수 > 기본 > 폼 > 결과 > 장부 > 근거·고지 > 반응형 */

/* 1. 변수 */
.calc, .calc-std {
  --calc-paper: var(--paper, #FCFBF8);
  --calc-field: var(--field, #F3EFE4);
  --calc-ink: var(--ink, #1B1A17);
  --calc-ink-2: var(--ink-2, #55524A);
  --calc-line: var(--line, #D6D0C2);
  --calc-seal: var(--seal, #B4441A);
  --calc-error: var(--error, #9E1C3A);
}

/* 2. 기본 */
.calc, .calc *, .calc *::before, .calc *::after { box-sizing: border-box; }
.calc {
  color: var(--calc-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
  max-width: 100%;
}
:where(.calc, .calc-std) :is(h2, p, ol, ul) { margin: 0; }
:where(.calc) :is(ol, ul) { padding: 0; list-style: none; }
:where(.calc) :is(button, input, select) { font: inherit; color: inherit; }
:where(.calc) a { color: inherit; }
.calc-h2 { font-size: 20px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; }
.calc-lead { margin-top: 16px; color: var(--calc-ink-2); }

/* 3. 폼 */
.calc-fill { margin-top: 32px; }
.calc-fields { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.calc-field { min-width: 0; }
.calc-field[hidden] { display: none; }
.calc-field__label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.4; font-weight: 600; }
.calc-input { position: relative; }
.calc-text, .calc-select {
  display: block; width: 100%; height: 52px; padding: 0 12px;
  background: var(--calc-field); border: 0; border-bottom: 2px solid var(--calc-ink-2); border-radius: 2px 2px 0 0;
  font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums; outline: 0;
}
.calc-input--unit .calc-text { padding-right: 52px; }
.calc-text::placeholder { color: var(--calc-ink-2); opacity: 1; }
.calc-select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B1A17' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.calc-text:hover, .calc-select:hover { border-bottom-color: var(--calc-ink); }
.calc-text:focus-visible, .calc-select:focus-visible {
  border-bottom-color: var(--calc-seal); background-color: var(--calc-paper); outline: 2px solid var(--calc-seal); outline-offset: 2px;
}
.calc-text[aria-invalid="true"], .calc-select[aria-invalid="true"] { border-bottom-color: var(--calc-error); }
.calc-input__unit {
  position: absolute; right: 12px; top: 0; height: 52px; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--calc-ink-2); pointer-events: none;
}
.calc-field__msg { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--calc-ink-2); }
.calc-field__msg[hidden] { display: none; }
.calc-field__msg--error { font-weight: 500; color: var(--calc-error); }

.calc-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 500; cursor: pointer; }
.calc-check__box { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--calc-ink); cursor: pointer; }
.calc-check__box:focus-visible { outline: 2px solid var(--calc-seal); outline-offset: 3px; }

.calc-form__error { margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--calc-error); }
.calc-form__error[hidden] { display: none; }
.calc-form__error:focus { outline: 0; }
.calc-actions { margin-top: 32px; display: flex; flex-direction: column; align-items: center; }
.calc-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding: 0 32px;
  background: var(--calc-ink); color: var(--calc-paper); border: 0; border-radius: 2px;
  font-size: 16px; line-height: 1; font-weight: 600; cursor: pointer;
}
.calc-btn:hover { background: var(--calc-ink-2); }
.calc-btn:focus-visible { outline: 2px solid var(--calc-seal); outline-offset: 3px; }
.calc-btn:active { transform: translateY(1px); }
.calc-btn-sub {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; padding: 0 8px;
  background: none; border: 0; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.calc-btn-sub:focus-visible { outline: 2px solid var(--calc-seal); outline-offset: 2px; }

/* 4. 결과 */
.calc-result { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--calc-ink); scroll-margin-top: 16px; }
.calc-result .calc-lead { margin-top: 16px; }
.calc-amount-block { margin-top: 24px; outline: 0; }
.calc-amount-block[hidden] { display: none; }
.calc .calc-amount-block:focus, .calc .calc-amount-block:focus-visible { outline: 0; }
.calc-amount-block__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.calc-amount__label { font-size: 16px; line-height: 1.5; font-weight: 600; }
.calc-stamp-m {
  display: inline-flex; align-items: center; height: 32px; padding: 0 8px; border: 2px solid var(--calc-seal); border-radius: 2px;
  color: var(--calc-seal); font-size: 13px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc-stamp-m[hidden], .calc-stamp[hidden] { display: none; }
.calc-stamp { display: none; }
.calc-amount {
  display: block; margin-top: 4px; font-size: clamp(36px, 11.2vw, 44px); line-height: 1.1; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc-amount--long { font-size: clamp(22px, 7vw, 30px); white-space: normal; }
.calc-amount--text { font-size: 20px; line-height: 1.4; letter-spacing: -.01em; white-space: normal; }
.calc-amount__won { margin-left: 4px; font-size: .4em; font-weight: 500; color: var(--calc-ink-2); letter-spacing: 0; }
.calc-read { margin-top: 8px; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--calc-ink-2); }
.calc-read[hidden] { display: none; }
.calc-amount-block--in .calc-stamp-m, .calc-amount-block--in .calc-stamp { animation: calc-stamp 200ms cubic-bezier(.2, .8, .2, 1); }
@keyframes calc-stamp { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .calc-amount-block--in .calc-stamp-m, .calc-amount-block--in .calc-stamp { animation: none; }
  .calc-btn:active { transform: none; }
}

.calc-unsupported { margin-top: 16px; }
.calc-unsupported[hidden] { display: none; }
.calc-unsupported__why { color: var(--calc-ink-2); }
.calc-unsupported__list { margin-top: 12px; border-top: 1px solid var(--calc-line); }
.calc-unsupported__list li { padding: 12px 0; border-bottom: 1px solid var(--calc-line); font-weight: 500; }

/* 5. 장부 */
.calc-ledger-wrap { margin-top: 32px; }
.calc-ledger { width: 100%; border-collapse: separate; border-spacing: 0; }
.calc-ledger caption, .calc-ledger thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.calc-ledger__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "no item amt" "no form amt"; }
.calc-ledger td { display: block; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--calc-line); }
.calc-ledger__no {
  grid-area: no; grid-row: 1 / span 2; padding-top: 14px !important; font-size: 13px; line-height: 1.4; font-weight: 500;
  letter-spacing: .02em; color: var(--calc-ink-2); font-variant-numeric: tabular-nums;
}
.calc-ledger__item { grid-area: item; padding-bottom: 0 !important; border-bottom: 0 !important; line-height: 1.7; }
.calc-ledger__form {
  grid-area: form; padding-top: 4px !important; font-size: 14px; line-height: 1.6; color: var(--calc-ink-2); font-variant-numeric: tabular-nums;
}
.calc-ledger__amt {
  grid-area: amt; grid-row: 1 / span 2; padding-left: 12px !important; text-align: right; font-size: 16px; line-height: 1.7;
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc-ledger__none { color: var(--calc-ink-2); font-weight: 400; }
.calc-ledger__u { margin-left: 2px; font-size: 13px; font-weight: 500; color: var(--calc-ink-2); }
.calc-ledger__mk { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--calc-ink-2); }
.calc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc-side { display: none; }
.calc-ledger__row--pre td { border-bottom: 0; }
.calc-ledger__row--sum td { border-top: 1px solid var(--calc-ink); border-bottom: 0; }
.calc-ledger__row--sum .calc-ledger__form { border-top: 0; }
.calc-ledger__row--sum .calc-ledger__item { font-weight: 600; }
.calc-ledger__row--sum .calc-ledger__amt { font-weight: 700; }
.calc-ledger__total { display: block; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 4px double var(--calc-seal); }

/* 6. 근거(각주)·고지 */
.calc-notes-wrap:empty { display: none; }
.calc-notes { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--calc-line); }
.calc-notes li { display: flex; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--calc-ink-2); }
.calc-notes li + li { margin-top: 0; }
/* 시안 .footnotes: 가./나. 표지 + 한 문단(제목 굵게 + 설명 이어서), 밑줄 없음. 링크 터치 영역은 세로 패딩으로 44px 이상 확보(줄 높이는 그대로) */
.calc-notes li + li { margin-top: 8px; }
.calc-notes__k { flex: none; width: 20px; font-size: 13px; font-weight: 700; color: var(--calc-ink); line-height: 1.8; }
.calc-notes__body { min-width: 0; margin: 0; }
.calc-notes__title { font-weight: 600; color: var(--calc-ink); text-decoration: none; }
.calc-notes a.calc-notes__title { padding: 13px 0; }
.calc-notes a.calc-notes__title:hover { text-decoration: underline; text-underline-offset: 4px; }
.calc-notes__note { color: var(--calc-ink-2); }
.calc-notice { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--calc-ink-2); }
.calc-notice[hidden] { display: none; }
.calc-notice a { display: inline-block; padding: 12px 0; color: var(--calc-ink); text-decoration: underline; text-underline-offset: 4px; }
.calc a:focus-visible { outline: 2px solid var(--calc-seal); outline-offset: 2px; }

/* 6-2. 방주 칸 상단 (테마 sempan_side_column 에 연결) */
.calc-std { padding-top: 12px; color: var(--calc-ink); }
.calc-std__h { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 700; }
.calc-std__list { margin: 0; padding: 0; list-style: none; }
.calc-std__list li { margin-top: 8px; font-size: 14px; line-height: 1.6; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.calc-std__date { margin: 12px 0 0; font-size: 13px; color: var(--calc-ink-2); font-variant-numeric: tabular-nums; }

/* 7. 반응형 */
@media (min-width: 1024px) {
  .calc-h2 { font-size: 24px; letter-spacing: -.015em; }
  .calc-result { margin-top: 80px; }
  .calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .calc-field--wide { grid-column: 1 / -1; }
  .calc-actions { flex-direction: row; justify-content: flex-start; align-items: center; }
  .calc-btn { width: auto; min-width: 240px; }
  .calc-btn-sub { margin: 0 0 0 16px; }
  .calc-amount-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
  .calc-amount-block__row, .calc-amount, .calc-read { grid-column: 1; }
  .calc-stamp-m { display: none; }
  .calc-stamp {
    display: block; grid-column: 2; grid-row: 1 / span 3; width: 112px; border: 2px solid var(--calc-seal); border-radius: 2px;
    color: var(--calc-seal); text-align: center; font-variant-numeric: tabular-nums;
  }
  .calc-stamp[hidden] { display: none; }
  .calc-stamp span { display: block; }
  .calc-stamp span + span { border-top: 1px solid var(--calc-seal); }
  .calc-stamp__a { padding: 4px 12px; font-size: 13px; line-height: 1.4; font-weight: 600; }
  .calc-stamp__b { padding: 4px 0; font-size: 16px; line-height: 1.4; font-weight: 700; }
  .calc-stamp__c { padding: 4px 12px; font-size: 13px; line-height: 1.4; font-weight: 500; }
  .calc-amount { font-size: 64px; line-height: 1.05; }
  .calc-amount--long { font-size: 40px; }
  .calc-amount--text { font-size: 24px; }
  .calc-read { font-size: 18px; }
  .calc-ledger__row { display: table-row; }
  .calc-ledger td { display: table-cell; padding: 12px 0; border-bottom: 1px solid var(--calc-line); }
  .calc-ledger__no { width: 40px; vertical-align: top; padding-top: 15px !important; }
  .calc-ledger__item { vertical-align: top; padding-bottom: 12px !important; border-bottom: 1px solid var(--calc-line) !important; }
  .calc-ledger__form { width: 220px; vertical-align: top; padding-top: 14px !important; padding-right: 12px; line-height: 1.7; }
  .calc-ledger__amt { position: relative; width: 152px; vertical-align: top; padding-left: 0 !important; }
  /* 방주: 해당 줄(tr)의 윗선에 붙어 장부 오른쪽 방주 칸으로 나간다. 가로 위치는 테마가 주는 --side-gap·--side-w (없으면 시안 값 128·352),
     세로는 줄 높이를 그대로 따른다(창 크기·글꼴 로딩으로 줄 높이가 바뀌어도 같이 움직임). 겹침만 render.js 가 --calc-push 로 푼다. */
  /* 시안 .sidenote: 선 아래 8px, 「마커 + 굵은 제목」은 한 줄에서 시작(인라인), 설명은 다음 줄. 밑줄·들여쓰기 없음. */
  .calc--aside .calc-side {
    display: block; position: absolute; top: 0; left: calc(100% + var(--side-gap, 128px)); width: var(--side-w, 352px); padding-top: 8px;
    border-top: 1px solid var(--calc-line); transform: translateY(var(--calc-push, 0px));
    font-size: 14px; line-height: 1.6; font-weight: 400; text-align: left; white-space: normal; color: var(--calc-ink-2);
  }
  .calc--aside .calc-side__k { display: inline; margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--calc-ink); }
  .calc--aside .calc-side__body { display: contents; }
  .calc--aside .calc-side__name { display: inline; font-weight: 600; color: var(--calc-ink); text-decoration: none; }
  .calc--aside a.calc-side__name:hover { text-decoration: underline; text-underline-offset: 4px; }
  .calc--aside .calc-side__note { display: block; margin: 0; color: var(--calc-ink-2); }
  .calc--aside .calc-notes li[data-aside] { display: none; }
  .calc--aside .calc-notes--aside { display: none; }
  .calc--aside .calc-ledger__row--sum .calc-side { top: -1px; }
  .calc-ledger__row--pre td { border-bottom: 0 !important; }
  .calc-ledger__row--sum td { border-top: 1px solid var(--calc-ink); border-bottom: 0 !important; }
  .calc-ledger__row--sum .calc-ledger__form { border-top: 1px solid var(--calc-ink); }
}

/* RESERVE:BEGIN 자동 생성(tools/gen-reserve-css.js). 손으로 고치지 않는다.
   브라우저 스크립트가 폼을 그리기 전에 .calc 자리를 그린 뒤 높이만큼 확보해 아래 내용이 밀리지 않게 한다(CLS).
   스크립트를 못 쓰는 환경은 확보하지 않는다. 값은 폭 구간별 렌더 높이 */
@media (scripting: enabled) {
  /* salary */
  .calc[data-calc-type="salary"] { min-height: 1499px; }
  @media (min-width: 413px) { .calc[data-calc-type="salary"] { min-height: 1472px; } }
  @media (min-width: 481px) { .calc[data-calc-type="salary"] { min-height: 1449px; } }
  @media (min-width: 1024px) { .calc[data-calc-type="salary"] { min-height: 1106px; } }
  /* severance */
  .calc[data-calc-type="severance"] { min-height: 1545px; }
  @media (min-width: 321px) { .calc[data-calc-type="severance"] { min-height: 1523px; } }
  @media (min-width: 361px) { .calc[data-calc-type="severance"] { min-height: 1501px; } }
  @media (min-width: 391px) { .calc[data-calc-type="severance"] { min-height: 1473px; } }
  @media (min-width: 481px) { .calc[data-calc-type="severance"] { min-height: 1451px; } }
  @media (min-width: 1024px) { .calc[data-calc-type="severance"] { min-height: 1083px; } }
  /* unemployment */
  .calc[data-calc-type="unemployment"] { min-height: 1695px; }
  @media (min-width: 321px) { .calc[data-calc-type="unemployment"] { min-height: 1672px; } }
  @media (min-width: 413px) { .calc[data-calc-type="unemployment"] { min-height: 1645px; } }
  @media (min-width: 601px) { .calc[data-calc-type="unemployment"] { min-height: 1623px; } }
  @media (min-width: 1024px) { .calc[data-calc-type="unemployment"] { min-height: 1255px; } }
  /* vat */
  .calc[data-calc-type="vat"] { min-height: 1168px; }
  @media (min-width: 321px) { .calc[data-calc-type="vat"] { min-height: 1101px; } }
  @media (min-width: 391px) { .calc[data-calc-type="vat"] { min-height: 1074px; } }
  @media (min-width: 1024px) { .calc[data-calc-type="vat"] { min-height: 911px; } }
  /* acquisition */
  .calc[data-calc-type="acquisition"] { min-height: 1326px; }
  @media (min-width: 391px) { .calc[data-calc-type="acquisition"] { min-height: 1299px; } }
  @media (min-width: 1024px) { .calc[data-calc-type="acquisition"] { min-height: 1039px; } }
  /* dismissal */
  .calc[data-calc-type="dismissal"] { min-height: 1490px; }
  @media (min-width: 376px) { .calc[data-calc-type="dismissal"] { min-height: 1467px; } }
  @media (min-width: 413px) { .calc[data-calc-type="dismissal"] { min-height: 1440px; } }
  @media (min-width: 1024px) { .calc[data-calc-type="dismissal"] { min-height: 971px; } }
  /* daily-worker */
  .calc[data-calc-type="daily-worker"] { min-height: 1544px; }
  @media (min-width: 413px) { .calc[data-calc-type="daily-worker"] { min-height: 1517px; } }
  @media (min-width: 1024px) { .calc[data-calc-type="daily-worker"] { min-height: 1096px; } }
}
/* RESERVE:END */