/**
 * 퇴직금 계산 위젯 — 본문 안에서 읽는 도구 (2026-08-19)
 *
 * 색·여백은 위젯 1호(vram-llm-recommender.css)와 같은 값을 쓴다. 본문 카드
 * (backend/services/visual_cards.py)와도 같은 계열이다 — 밝은 배경(slate-50) ·
 * 얇은 테두리 하나(slate-200) · 그림자 없음.
 *
 * ⚠ `.bf-tool` 기본 규칙이 위젯 1호 CSS와 중복된다. 플러그인이 **본문에 실제로
 * 들어 있는 위젯의 CSS만** 싣기 때문이다(bf-tool-widgets.php) — 이 위젯만 있는
 * 글에서는 1호 CSS가 실리지 않으므로, 각 위젯 CSS가 기본 규칙을 스스로 갖고
 * 있어야 컨테이너가 맨몸으로 나가지 않는다. 두 파일의 값은 같게 유지한다
 * (한쪽만 고치면 글마다 다른 모양이 된다).
 *
 * 모든 규칙을 `.bf-tool` 아래로 스코프한다 — 테마 CSS를 건드리지 않는다.
 */

.bf-tool {
  margin: 1.75em 0;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #1f2937;
}

/* 자산이 아직 안 실렸을 때 보이는 안내(BF가 컨테이너 안에 넣어 보낸다). */
.bf-tool .bf-tool__loading {
  margin: 0;
  color: #94a3b8;
  font-size: 14px;
}

.bf-sev__title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

/* 입력이 6개다 — 넓은 화면에서는 2열, 좁은 화면에서는 1열로 접는다. */
.bf-sev__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-bottom: 16px;
}

.bf-sev__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bf-sev__label {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.bf-sev__input {
  padding: 8px 10px;
  font-size: 15px;
  color: #1f2937;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  width: 100%;
  /* iOS Safari가 date/number 입력에 기본 테두리·둥근 모서리를 덧씌운다. */
  -webkit-appearance: none;
  appearance: none;
}

.bf-sev__hint {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.bf-sev__lead {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fff;
  border-left: 4px solid #4338ca;
  border-radius: 4px;
  font-size: 17px;
}

/* 표는 자기 안에서만 가로 스크롤한다 — 본문이 좌우로 밀리면 안 된다. */
.bf-sev__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bf-sev__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}

.bf-sev__table th,
.bf-sev__table td {
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

/* 항목 이름 열 — 값 열이 넓게 남도록 폭을 고정한다. */
.bf-sev__table th {
  background: #f1f5f9;
  font-weight: 600;
  color: #0f172a;
  width: 40%;
  white-space: nowrap;
}

.bf-sev__empty,
.bf-sev__note,
.bf-sev__basis {
  margin: 12px 0 0;
  font-size: 13px;
  color: #64748b;
}

.bf-sev__basis {
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 480px) {
  .bf-tool { padding: 16px; }
  .bf-sev__form { grid-template-columns: minmax(0, 1fr); }
  .bf-sev__table th { width: auto; white-space: normal; }
}