/* ============================================================
   tools.css — 자동화 도구 페이지 전용 (/tools/loan/ · /tools/severance/ · /tools/stamp/)

   왜 별도 파일인가 :
     ① hub.css 는 9개 창이 함께 쓴다. 계산기 폼 규칙을 그 안에 넣으면
        폼이 없는 창까지 위험해진다.
     ② 페이지 안 <style> 로 두면 같은 규칙이 네 파일에 복제돼 회차마다 갈린다.
   hub.css 다음에 실린다 — 토큰(--cm-*)을 전부 물려받는다.

   규칙 : 새 색을 선언하지 않는다. 모든 색은 var(--cm-*) 참조뿐이다.
          이 파일에 #RRGGBB 리터럴은 0건이어야 한다.
          글자 크기는 38 / 20 / 16 / 13 사다리만 쓴다(12·14·15·30 금지).
          모서리는 10(결과 판) · 6(버튼·입력) 만 쓴다(4·8 금지).
   ============================================================ */

/* ── 값 넣기 ─────────────────────────────────────────────── */
.tl-form{
  max-width:var(--cm-hero-w);      /* 754 — 히어로와 같은 폭 사다리 */
  color-scheme:dark;               /* date 입력의 기본 위젯을 어두운 바닥에 맞춘다 */
}
.tl-field{margin-top:var(--cm-gap-m);}
.tl-field:first-child{margin-top:0;}

.tl-field__lb{
  display:block;
  margin-bottom:var(--cm-gap-xs);
  font-size:var(--cm-fs-body);
  line-height:var(--cm-lh-body);
  color:var(--cm-txt-2);
}

.tl-field__inp,
.tl-field__sel{
  width:100%;
  min-height:var(--cm-cta-h);      /* 44 — 손가락이 닿는 최소 높이 */
  padding:0 12px;
  border:1px solid var(--cm-dim);
  border-radius:var(--cm-btn-r);
  background:var(--cm-surf-2);
  color:var(--cm-txt);
  font:inherit;
  font-size:var(--cm-fs-body);
}
.tl-field__inp::placeholder{color:var(--cm-mut);opacity:1;}

.tl-field__sel{appearance:none;-webkit-appearance:none;padding-right:30px;}
.tl-field__sel option{background:var(--cm-surf-2);color:var(--cm-txt);}

.tl-field__inp:focus-visible,
.tl-field__sel:focus-visible{
  outline:2px solid var(--cm-focus);
  outline-offset:2px;
}

/* 날짜 칸의 달력 아이콘 — 어두운 바닥에서 검은 아이콘이 보이지 않는다 */
.tl-form input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.7;
  cursor:pointer;
}

.tl-field__unit{
  margin-left:var(--cm-gap-xs);
  font-size:var(--cm-fs-tail);
  color:var(--cm-mut);
}

/* ── 결과 판 ─────────────────────────────────────────────── */
/* 이 판은 사이트에서 면을 갖는 예외 한 곳이다.
   방문자가 이 창을 연 이유가 이 숫자 하나뿐이라, 주변 상자와 같은 바닥이면
   어디를 봐야 하는지가 표시되지 않는다. 이 면을 다른 곳에 복제하지 마라. */
.tl-out{
  max-width:var(--cm-hero-w);
  padding:var(--cm-gap-l);
  background:var(--cm-accent-bg);
  border-radius:var(--cm-card-r);
}
/* [SPEC0829] font-size:var(--cm-fs-h1)(38px) · line-height:var(--cm-lh) 였다.
   「큰 글씨는 제목 하나뿐 · 30px 이상이 또 있으면 안 된다」에 어긋나, 14개 도구 창마다
   h1 과 똑같은 38px 글자가 하나 더 서 있었다. 숨 자리(20px)로 내린다 —
   숫자가 답이라는 사실은 크기가 아니라 자리(면을 가진 결과 판)가 말한다.
   선례 : hub.css 17-26 절이 /my/ .bal_num 30px 을 같은 이유로 20px 로 내렸다.
   되돌리려면 var(--cm-fs-h1) · var(--cm-lh) 로 되돌리고
   아래 ≤600 절에 .tl-out__n{font-size:28px;line-height:36px;} 를 되살린다. */
/* [DAANGN0829] font-variant-numeric:tabular-nums 를 더했다. 계산기 결과는 값이 바뀔 때마다
   다시 그려지는데 비례폭 숫자는 자릿수마다 폭이 달라 숫자가 좌우로 흔들린다.
   고정폭 숫자로 두면 자릿수가 바뀌어도 자리가 흔들리지 않는다(hub.css 가 이미 9곳에서 쓴다).
   되돌리려면 이 한 줄을 지운다. */
.tl-out__n{
  font-size:var(--cm-fs-h2);
  line-height:var(--cm-lh-h2);
  letter-spacing:var(--cm-h1-ls);
  font-weight:700;
  color:var(--cm-txt);
  font-variant-numeric:tabular-nums;
}
.tl-out__row{margin-top:var(--cm-gap-s);}
.tl-out__k{
  font-size:var(--cm-fs-body);
  line-height:var(--cm-lh-body);
  color:var(--cm-mut);
}
.tl-out__v{
  font-size:var(--cm-fs-h2);
  font-weight:700;
  color:var(--cm-txt);
  font-variant-numeric:tabular-nums;
}

/* ── 버튼 줄 ─────────────────────────────────────────────── */
.tl-btns{
  display:flex;
  flex-wrap:wrap;
  gap:var(--cm-gap-s);
  margin-top:var(--cm-gap-l);
}

/* ── 읽는 문단 ───────────────────────────────────────────── */
.tl-read{max-width:var(--cm-read-w);}

/* ── 자주 묻는 질문 ──────────────────────────────────────── */
/* summary 에 .hub-box__hd 를 붙이지 않는다 — ≤600 에서 그 클래스가
   padding 8px 16px 을 받아 질문만 16px 들여쓰기된다. */
/* 질문 줄은 좌우 끝에 질문과 +/− 를 붙이는 flex 다. 폭을 묶지 않으면
   레인 1102 끝까지 벌어져 표식이 질문에서 멀어진다. 답과 같은 720 으로 묶는다. */
.tl-faq{max-width:var(--cm-read-w);}
.tl-faq__it{border-bottom:1px solid var(--cm-rule);}
.tl-faq__it:last-child{border-bottom:0;}

.tl-faq__q{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--cm-gap-xs);
  min-height:var(--cm-cta-h);
  padding:12px 0;
  cursor:pointer;
  list-style:none;
}
.tl-faq__q::-webkit-details-marker{display:none;}
.tl-faq__a{
  padding:12px 0 0;
  max-width:var(--cm-read-w);
}

/* ── 도장 미리보기 ───────────────────────────────────────── */
.tl-cv{width:120px;height:120px;}

/* ── ≤600 ────────────────────────────────────────────────── */
/* [SPEC0829] .tl-out__n{font-size:28px;line-height:36px;} 한 줄만 있던 절이다.
   .tl-out__n 이 20px 로 내려간 뒤로는 28px 이 도리어 키우는 값이라 절째로 걷었다. */

/* [FIX] fieldset 은 UA 기본값 min-inline-size:min-content 라 안쪽 auto-fit 격자가
   1열로 접히지 못한다. finance-model 만 fieldset 을 쓴다. */
fieldset{min-inline-size:0;}

/* ── 2열 폼 격자 ─────────────────────────────────────────── */
/* 칸이 12개인 창(income-tax · finance-model)에서 세로로 12줄이 늘어서면
   결과를 보려고 한참 스크롤해야 한다. 두 열로 접는다.
   .tl-field 의 margin-top 은 격자 간격과 겹치므로 격자 안에서만 0 으로 되돌린다. */
.tl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--cm-gap-m);
  max-width:var(--cm-hero-w);
}
.tl-grid>.tl-field{margin-top:0;}

/* ── 결과 항목의 부제 ────────────────────────────────────── */
/* 「인정이자 × 19% × 지방소득세 1.1」 같은 대입식 한 줄.
   숫자가 어디서 나왔는지 그 자리에서 되짚게 한다. */
.tl-out__sub{
  font-size:var(--cm-fs-tail);
  line-height:var(--cm-lh-tail);
  color:var(--cm-mut);
}