/* =================================================================
   calc.css — 계산기 상세 페이지 정밀 수치 (옛 인라인 스타일 위에 덮어씀)
   2026-06-28 ⑤ 정밀 수치 + 오렌지 보조색. 계산 로직/마크업 구조·결과·URL 불변.
   theme.css 변수(--primary,--g200 등) 사용. !important로 페이지 인라인 우선.
   메인 포인트는 #3D5AFE 블루, 계산기 상세 액션(태그·계산·토글)은 #FF6A00 오렌지.
   ================================================================= */
:root { --accent: #FF6A00; --accent-light: #FFF3EC; }

/* ── 상단 정보 영역: 패딩 상20 · 좌우16 ── */
.page-wrap { padding-top: 20px !important; padding-left: 16px !important; padding-right: 16px !important; }

/* 카테고리 배지 — 연오렌지#FFF3EC + 오렌지#FF6A00 pill 13/600 (인건비는 .tag--blue 블루) */
.page-wrap .tag {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  font-size: 13px !important; font-weight: 600 !important;
  padding: 7px 14px !important; border-radius: 9999px !important;
  margin-bottom: 14px !important; letter-spacing: -.01em;
}
.page-wrap .tag svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }
.page-wrap .tag.tag--blue { background: #ECEEFF !important; color: #3D5AFE !important; }

/* 제목 30/900 line1.25 · 설명 16/500 line1.65 #6B7684 */
.page-wrap .page-title { font-size: 30px !important; font-weight: 900 !important; line-height: 1.25 !important; letter-spacing: -.02em; color: var(--g900, #191F28); margin-bottom: 10px !important; }
.page-wrap .page-desc, .page-wrap .page-sub { font-size: 16px !important; font-weight: 500 !important; line-height: 1.65 !important; color: #6B7684 !important; margin-bottom: 22px !important; }

/* ── 입력 폼 카드 — 흰 radius24 · shadow 0 2px16 rgba(0,0,0,.06) · 패딩20 ── */
.page-wrap .calc-card {
  background: #fff !important;
  border: 1px solid var(--g200, #E5E8EB) !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.06) !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
}
/* 섹션 제목 16/700 #3D5AFE */
.page-wrap .card-title { font-size: 16px !important; font-weight: 700 !important; color: #3D5AFE !important; margin-bottom: 16px !important; }

/* 라벨 14/600 + 보조 12/500 #ADB5BD */
.page-wrap .field { margin-bottom: 16px !important; }
.page-wrap .field label { display: block; font-size: 14px !important; font-weight: 600 !important; color: var(--g900, #191F28) !important; margin-bottom: 7px !important; line-height: 1.4; }
.page-wrap .field-hint { font-size: 12px !important; font-weight: 500 !important; color: #ADB5BD !important; margin-bottom: 7px !important; }

/* 입력창 — 높이56 · radius16 · border1.5px #E8ECF0 · 16/500 · 포커스 #3D5AFE */
.page-wrap .field input,
.page-wrap .field select {
  width: 100% !important; box-sizing: border-box !important;
  height: 56px !important;
  font-size: 16px !important; font-weight: 500 !important; font-family: inherit !important;
  line-height: 1.4 !important;
  padding: 0 16px !important;
  color: var(--g900, #191F28) !important;
  background: #fff !important;
  border: 1.5px solid #E8ECF0 !important;
  border-radius: 16px !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.page-wrap .field select { padding-right: 38px !important; }
.page-wrap .field input:focus,
.page-wrap .field select:focus {
  border-color: #3D5AFE !important;
  box-shadow: 0 0 0 3px rgba(61,90,254,.12) !important;
}
/* 2열 입력 gap12 */
.page-wrap .field-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; }
.page-wrap .field, .page-wrap .field-row > * { min-width: 0; }
.page-wrap input, .page-wrap select { min-width: 0; max-width: 100%; }
@media (max-width: 480px) {
  .page-wrap .field-row { grid-template-columns: 1fr !important; }
}

/* ── 토글 버튼(주휴수당·4대보험 등): 높이52 radius16 border1.5px ── */
.page-wrap .toggle-group, .page-wrap .opt-row, .page-wrap .toggle-row {
  display: flex !important; gap: 10px !important; flex-wrap: wrap;
}
.page-wrap .toggle-group .toggle-btn, .page-wrap .toggle-btn {
  flex: 1 1 0 !important; min-width: 0 !important;
  height: 52px !important; padding: 0 14px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1.5px solid #E8ECF0 !important; border-radius: 16px !important;
  background: #fff !important; color: var(--g600, #6B7684) !important;
  font-size: 14px !important; font-weight: 600 !important; font-family: inherit !important;
  text-align: center; cursor: pointer; transition: all .15s;
}
/* 선택 = 오렌지 보더 + 연오렌지 배경 + 오렌지 글자 */
.page-wrap .toggle-btn.active {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* 본문 표 가로 스크롤(좁은 화면 넘침 방지) */
.page-wrap table, .article-content table, .article-main table,
table.article-table, .article-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 계산 버튼 — 전체폭 높이56 radius16 · #FF6A00 흰 16/700 · DollarSign 20 ── */
.page-wrap .btn-calc {
  width: 100% !important; box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  height: 56px !important; padding: 0 16px !important;
  background: var(--accent) !important;
  color: #fff !important; border: none !important;
  border-radius: 16px !important;
  font-size: 16px !important; font-weight: 700 !important;
  font-family: inherit !important; cursor: pointer;
  margin-top: 8px !important;
  transition: background .15s, transform .1s;
}
.page-wrap .btn-calc::before {
  content: ""; width: 20px; height: 20px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='12'%20y1='1'%20x2='12'%20y2='23'/%3E%3Cpath%20d='M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='12'%20y1='1'%20x2='12'%20y2='23'/%3E%3Cpath%20d='M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.page-wrap .btn-calc:hover { background: #E55F00 !important; }
.page-wrap .btn-calc:active { transform: scale(.98); }