/* ============================================================
   깨알도구
   연봉·월급 환산기 전용 CSS

   공통 디자인:
   ../../css/tool-common.css

   여기에는 연봉·월급 환산기에만 필요한 스타일만 둔다.
   ============================================================ */

/* ============================================================
   PAGE

   입력항목이 많으므로 일반 도구보다 조금 넓게 사용
   ============================================================ */

.tool-page {
  --tool-page-max-width: 940px;
}

/* ============================================================
   CALCULATOR

   입력영역을 결과영역보다 조금 넓게 사용
   ============================================================ */

.salary-calculator {
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);
}

/* ============================================================
   MODE

   연봉 → 월급 / 월급 → 연봉
   ============================================================ */

.mode-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mode-button {
  min-height: 52px;

  font-size: 12px;
}

/* ============================================================
   YEAR BADGE
   ============================================================ */

.year-badge {
  padding: 4px 8px;

  background: #fff2ce;

  color: #88651d;
}

/* ============================================================
   INSURANCE OPTIONS
   ============================================================ */

.insurance-options {
  display: flex;

  flex-direction: column;

  gap: 6px;
}

.insurance-option {
  position: relative;

  display: flex;

  align-items: center;

  gap: 9px;

  min-height: 48px;

  padding: 9px 11px;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: #ffffff;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.insurance-option:hover {
  background: #fdfcf9;
}

.insurance-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

/* ============================================================
   CUSTOM CHECK
   ============================================================ */

.check-ui {
  position: relative;

  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  border: 1px solid var(--line);

  border-radius: 5px;

  background: var(--surface-soft);

  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.insurance-option input:checked + .check-ui {
  border-color: var(--brand);

  background: var(--brand);
}

.insurance-option input:checked + .check-ui::after {
  content: '';

  position: absolute;

  left: 5px;
  top: 2px;

  width: 5px;
  height: 9px;

  border-right: 2px solid #ffffff;

  border-bottom: 2px solid #ffffff;

  transform: rotate(45deg);
}

/* ============================================================
   INSURANCE TEXT
   ============================================================ */

.insurance-copy {
  min-width: 0;
}

.insurance-copy strong {
  display: block;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;
}

.insurance-copy small {
  display: block;

  margin-top: 2px;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   TAX HELP
   ============================================================ */

.tax-help {
  margin-top: 10px;

  padding: 9px 10px;

  border-radius: 9px;

  background: #fffaf0;

  color: #8a7549;

  font-size: 12px;

  line-height: 1.55;
}

.tax-help strong {
  display: block;

  margin-bottom: 2px;

  color: #70551d;

  font-size: 12px;
}

/* ============================================================
   RESULT PANEL

   공제 상세정보가 많으므로 높이를 조금 더 확보
   ============================================================ */

.salary-calculator .result-panel {
  min-height: 400px;
}

/* ============================================================
   DEDUCTION TITLE
   ============================================================ */

.deduction-title {
  margin-top: 18px;

  margin-bottom: 6px;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;
}

/* ============================================================
   DEDUCTION LIST
   ============================================================ */

.deduction-list {
  border-top: 1px solid var(--line);
}

.deduction-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 33px;

  padding: 6px 1px;

  border-bottom: 1px solid #efeee9;
}

.deduction-row[hidden] {
  display: none;
}

.deduction-row span {
  color: var(--text-soft);

  font-size: 12px;
}

.deduction-row strong {
  flex: 0 0 auto;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;

  white-space: nowrap;
}

/* ============================================================
   TAKE HOME BOX
   ============================================================ */

.takehome-box {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;

  margin-top: 12px;
}

.takehome-box > div {
  min-width: 0;

  padding: 9px 10px;

  border: 1px solid var(--line);

  border-radius: 9px;

  background: #ffffff;
}

.takehome-box span {
  display: block;

  color: var(--text-soft);

  font-size: 12px;
}

.takehome-box strong {
  display: block;

  margin-top: 2px;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;

  overflow-wrap: anywhere;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 760px) {
  .salary-calculator {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 520px) {
  .mode-button {
    min-height: 48px;

    font-size: 12px;
  }
}