/* ==========================================================================
   page-calculator.css — 실질자본금 계산기.
   dhjangocare 에서 옮기면서 색·여백·라운드를 전부 이 사이트 토큰으로 바꿨다(2026-09-16).
   원본은 어두운 바탕이었으나 이 사이트는 밝은 캔버스라 결과 막대도 흰 카드로 만든다.
   ========================================================================== */

/* 숫자는 자릿수가 흔들리지 않아야 비교가 된다 */
.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-body-tabular);
}

/* ---------- 머리말 아래 안내 ---------- */
.calc-safe {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  margin-top: var(--s-lg);
  padding: var(--s-sm) var(--s-lg);
  border-radius: var(--r-pill);
  background: var(--c-canvas-soft);
  font-size: var(--fs-caption);
  color: var(--c-ink-mute);
}

.calc-safe svg { flex: none; }
.calc-safe b { color: var(--c-ink-secondary); font-weight: var(--fw-semibold); }

/* ---------- 결과 막대 ----------
   표를 채우는 동안 결과가 보여야 한다. 위에 붙여 두고 스크롤을 따라오게 한다. */
.calc-bar {
  position: sticky;
  top: 72px;
  z-index: 30;
  background: var(--c-canvas);
  border-block: 1px solid var(--c-hairline);
  box-shadow: var(--elev-1);
}

.calc-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-lg) var(--s-xxl);
  flex-wrap: wrap;
  padding-block: var(--s-md);
}

.calc-bar__nums { display: flex; gap: var(--s-xl); flex-wrap: wrap; }

.calc-bar__n { display: flex; flex-direction: column; gap: var(--s-xxs); }
.calc-bar__n span { font-size: var(--fs-micro); color: var(--c-ink-mute); }
.calc-bar__n b {
  font-size: var(--fs-heading-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-secondary);
}
.calc-bar__n.is-main b { font-size: var(--fs-display-md); color: var(--c-ink); }
.calc-bar__n.is-main b.is-good { color: var(--c-primary); }
.calc-bar__n.is-main b.is-bad { color: var(--c-ruby); }

/* 업종·법인/개인·기준금액을 한 덩어리로 붙여 하나의 입력 장치처럼 보이게 한다 */
.calc-bar__std { display: flex; align-items: stretch; flex-wrap: wrap; }

.calc-bar__std label {
  display: flex;
  align-items: center;
  padding: 0 var(--s-md);
  border: 1px solid var(--c-hairline-input);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--c-canvas-soft);
  font-size: var(--fs-caption);
  color: var(--c-ink-mute);
  white-space: nowrap;
}

.calc-bar__std select {
  min-height: 40px;
  max-width: 230px;
  padding: 0 var(--s-md);
  border: 1px solid var(--c-hairline-input);
  border-radius: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-body-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

/* 테두리를 맞붙인 덩어리라 포커스 링이 바깥으로 삐져나온다. 안쪽으로 그린다. */
.calc-bar__std :focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

/* ---------- 업종 맞춤 드롭다운 ----------
   브라우저 기본 드롭다운은 목록을 꾸밀 수 없다. 버튼 + 검색 + 목록으로 직접 만든다.
   값은 숨은 select 가 들고 있어 계산 로직은 그대로다. */
.calc-bar__label {
  display: flex;
  align-items: center;
  padding: 0 var(--s-md);
  border: 1px solid var(--c-hairline-input);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--c-canvas-soft);
  font-size: var(--fs-caption);
  color: var(--c-ink-mute);
  white-space: nowrap;
}

.calc-select { position: relative; }
.calc-select__native { display: none; }

.calc-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  width: 230px;
  min-height: 40px;
  height: 100%;
  padding: 0 var(--s-md);
  border: 1px solid var(--c-hairline-input);
  border-radius: 0;
  background: var(--c-canvas);
  font-family: inherit;
  font-size: var(--fs-body-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.calc-select__btn:hover { border-color: var(--c-primary-soft); }
.calc-select__btn[aria-expanded='true'] { border-color: var(--c-primary); }
.calc-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-select__value.is-placeholder { color: var(--c-ink-mute); font-weight: var(--fw-regular); }
.calc-select__caret { width: 10px; height: 6px; flex: none; color: var(--c-ink-mute); }
.calc-select__btn[aria-expanded='true'] .calc-select__caret { transform: rotate(180deg); }

.calc-select__panel {
  position: absolute;
  top: calc(100% + var(--s-xs));
  left: 0;
  z-index: 40;
  width: 320px;
  max-width: calc(100vw - var(--gutter) * 2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  background: var(--c-canvas);
  box-shadow: var(--elev-2);
  overflow: hidden;
}

.calc-select__search {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-md) var(--s-lg);
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-ink-mute);
}
.calc-select__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: var(--fs-body-md);
  color: var(--c-ink);
  -webkit-appearance: none;
  appearance: none;
}
.calc-select__search input::placeholder { color: var(--c-ink-mute); }

.calc-select__list {
  max-height: 300px;
  overflow-y: auto;
  padding: var(--s-xs);
  list-style: none;
}
.calc-select__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-md);
  font-size: var(--fs-body-md);
  color: var(--c-ink-secondary);
  cursor: pointer;
}
.calc-select__list li.is-active { background: var(--c-canvas-soft); }
.calc-select__list li[aria-selected='true'] {
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: var(--fw-medium);
}
.calc-select__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-select__std {
  flex: none;
  font-size: var(--fs-micro);
  color: var(--c-ink-mute);
  font-variant-numeric: tabular-nums;
}
.calc-select__list li[aria-selected='true'] .calc-select__std { color: var(--c-primary-subdued); }

.calc-select__empty {
  padding: var(--s-lg);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--c-ink-mute);
}

/* 법인·개인 전환. 업종에 따라 기준금액이 2배까지 차이 난다. */
.calc-bar__ent { display: flex; border: 1px solid var(--c-hairline-input); border-left: 0; }
.calc-bar__ent button {
  padding: 0 var(--s-lg);
  border: 0;
  background: var(--c-canvas);
  color: var(--c-ink-mute);
  font-size: var(--fs-button-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.calc-bar__ent button + button { border-left: 1px solid var(--c-hairline-input); }
.calc-bar__ent button:hover:not(:disabled):not(.is-on) { color: var(--c-primary-deep); }
.calc-bar__ent button.is-on { background: var(--c-primary); color: var(--c-on-primary); }
.calc-bar__ent button:disabled { opacity: 0.35; cursor: not-allowed; }

.calc-bar__inp {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 0 var(--s-md);
  border: 1px solid var(--c-hairline-input);
  border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-canvas);
}
.calc-bar__inp input {
  /* 가장 긴 값이 '1,700,000,000'(17억, 개인 토목건축) 13자다 */
  width: 13ch;
  min-width: 13ch;
  border: 0;
  background: none;
  outline: none;
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  text-align: right;
}
.calc-bar__inp input::placeholder { color: var(--c-ink-mute); font-weight: var(--fw-regular); }
.calc-bar__inp em { font-style: normal; font-size: var(--fs-caption); color: var(--c-ink-mute); }

/* 자동으로 못 채우는 업종의 원문 안내 */
.calc-bar__note {
  display: flex;
  align-items: center;
  margin-left: var(--s-md);
  padding: 0 var(--s-md);
  border-radius: var(--r-sm);
  background: rgba(234, 34, 97, 0.1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--c-ruby);
}

.calc-bar__badge {
  padding: var(--s-sm) var(--s-lg);
  border-radius: var(--r-pill);
  background: var(--c-canvas-soft);
  font-size: var(--fs-button-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-mute);
}
.calc-bar__badge.is-good { background: var(--c-primary-subdued); color: var(--c-primary-press); }
.calc-bar__badge.is-bad { background: rgba(234, 34, 97, 0.12); color: var(--c-ruby); }

/* ---------- 표 ---------- */
.calc-sec__h {
  margin: var(--s-xxl) 0 var(--s-md);
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--ls-heading-lg);
}
.calc-sec__h:first-of-type { margin-top: 0; }

.calc-scroll {
  overflow-x: auto;
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
}

.calc-table { width: 100%; min-width: 660px; border-collapse: collapse; }

.calc-table thead th {
  padding: var(--s-md) var(--s-lg);
  background: var(--c-canvas-soft);
  border-bottom: 1px solid var(--c-hairline);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-mute);
  text-align: right;
}
.calc-table thead th:first-child { text-align: left; }

.calc-table tbody th {
  position: relative;
  padding: var(--s-sm) var(--s-lg);
  border-bottom: 1px solid var(--c-hairline);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--c-ink-secondary);
  text-align: left;
}
.calc-table tbody td {
  padding: var(--s-xs) var(--s-sm);
  border-bottom: 1px solid var(--c-hairline);
  border-left: 1px solid var(--c-hairline);
  font-size: var(--fs-caption);
  color: var(--c-ink-secondary);
  text-align: right;
}

/* 대분류·중분류·총계는 입력이 아니라 합계가 찍히는 행이라 톤을 달리한다.
   글자색은 위의 '.calc-table tbody th/td' 가 더 강해서, 여기서도 tbody 를 붙여 우선순위를 맞춘다 —
   안 그러면 남색 총계 행 위에 진한 글자가 남아 안 보인다(2026-09-16 실제로 그랬다). */
.calc-table tbody tr.is-g1 th,
.calc-table tbody tr.is-g1 td {
  background: var(--c-canvas-soft);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.calc-table tbody tr.is-g2 th,
.calc-table tbody tr.is-g2 td {
  background: var(--c-canvas-soft);
  font-weight: var(--fw-medium);
  color: var(--c-ink-secondary);
}
.calc-table tbody tr.is-g2 th { padding-left: var(--s-xxl); }
.calc-table tbody tr.is-i th { padding-left: calc(var(--s-xxl) + var(--s-md)); }
.calc-table tbody tr.is-gt th,
.calc-table tbody tr.is-gt td {
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-md);
}
/* 총계 행 안의 물음표 버튼도 남색 위에서 읽혀야 한다 */
.calc-table tbody tr.is-gt .calc-tip {
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
  color: var(--c-on-primary);
}

.calc-table input {
  width: 100%;
  min-width: 92px;
  height: 34px;
  padding: 0 var(--s-sm);
  border: 1px solid var(--c-hairline-input);
  border-radius: var(--r-sm);
  background: var(--c-canvas);
  font-family: inherit;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--c-ink);
}
.calc-table input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.14); }

/* 차감 칸은 '빼는 값'이라 색으로 구분한다 */
.calc-table input[class*='_d'] { color: var(--c-ruby); }
.calc-table input[class*='_d']:focus { border-color: var(--c-ruby); box-shadow: 0 0 0 3px rgba(234, 34, 97, 0.12); }

.calc-na { color: var(--c-ink-mute); }
.v { font-weight: var(--fw-semibold); color: var(--c-ink); }

/* 물음표 설명 */
.calc-tip {
  width: 18px;
  height: 18px;
  margin-left: var(--s-xs);
  padding: 0;
  border: 1px solid var(--c-hairline-input);
  border-radius: var(--r-pill);
  background: var(--c-canvas);
  color: var(--c-ink-mute);
  font-size: var(--fs-micro-cap);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  vertical-align: 1px;
}
.calc-tip:hover { border-color: var(--c-primary); color: var(--c-primary); }

.calc-tiptext {
  display: none;
  margin-top: var(--s-sm);
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-md);
  background: var(--c-canvas-soft);
  font-size: var(--fs-micro);
  line-height: 1.6;
  font-weight: var(--fw-regular);
  color: var(--c-ink-secondary);
}
.calc-tiptext.is-on { display: block; }

/* ---------- 차감 목록 ---------- */
.calc-flag {
  display: none;
  margin-top: var(--s-xl);
  padding: var(--card-pad);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  background: var(--c-canvas);
  box-shadow: var(--elev-1);
}
.calc-flag.is-on { display: block; }
.calc-flag h3 { margin-bottom: var(--s-md); font-size: var(--fs-heading-sm); }
.calc-flag ul { display: flex; flex-direction: column; gap: var(--s-sm); }
.calc-flag li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  padding-bottom: var(--s-sm);
  border-bottom: 1px solid var(--c-hairline);
  font-size: var(--fs-caption);
  color: var(--c-ink-secondary);
}
.calc-flag li b { color: var(--c-ruby); font-variant-numeric: tabular-nums; }

/* ---------- 버튼·꼬리말 ---------- */
.calc-act { display: flex; gap: var(--s-md); margin-top: var(--s-xxl); flex-wrap: wrap; }
.calc-note {
  margin-top: var(--s-xl);
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--c-ink-mute);
}

/* ---------- 자주 묻는 질문 ---------- */
.calc-faq { display: flex; flex-direction: column; gap: var(--s-md); margin-top: var(--s-xl); }
.calc-faq details {
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  background: var(--c-canvas);
  overflow: hidden;
}
.calc-faq summary {
  padding: var(--s-lg) var(--s-xl);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  cursor: pointer;
}
.calc-faq summary::marker { color: var(--c-primary); }
.calc-faq details[open] summary { border-bottom: 1px solid var(--c-hairline); }
.calc-faq p {
  padding: var(--s-lg) var(--s-xl);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--c-ink-secondary);
}

@media (max-width: 767px) {
  .calc-bar { top: 64px; }
  .calc-bar__inner { gap: var(--s-md) var(--s-lg); }
  .calc-bar__nums { gap: var(--s-lg); }
  .calc-bar__n.is-main b { font-size: var(--fs-heading-lg); }
  .calc-bar__std { width: 100%; }
  .calc-bar__std label { display: none; } /* 좁은 화면에서 '업종' 라벨은 자리만 먹는다 */
  .calc-bar__std select { flex: 1; max-width: none; border-radius: var(--r-sm) 0 0 var(--r-sm); }
  .calc-bar__inp { flex: 1; }
  .calc-bar__inp input { width: 100%; min-width: 0; }
  .calc-bar__note { width: 100%; margin: var(--s-sm) 0 0; padding: var(--s-sm) var(--s-md); }
  .calc-act .btn { width: 100%; }
}

/* 인쇄하면 입력칸 테두리와 버튼이 지저분하다. 표만 남긴다. */
@media print {
  .calc-bar { position: static; box-shadow: none; }
  .calc-act,
  .calc-tip,
  .calc-tiptext,
  .calc-safe { display: none !important; }
  .calc-table input { border: 0; }
}