/* module-calc-form — 계산 조건을 받는 입력 폼 (input 분류)
   원본 = TCGGrail/generatepress_child/assets/css/modules.css 의
     ⓐ .module-calc-module · .module-calc-form · .module-calc-input-* · .module-calc-select ·
        .module-calc-btn · .module-calc-toggle-group · .module-calc-error   (카드 결)
     ⓑ .module-calculator*                                                  (컴팩트 결)
   두 결은 §7-① 변형으로 흡수했다 — .calc-form--card / .calc-form--compact.
   개명 대응표 전수는 module.jsonc 의 renamed_classes 가 진다.
   🔒 값·수치·색은 한 글자도 바꾸지 않았다(이관 규율). 원본이 var(--color-*) 를 부르던 자리는
      §15-1 이관 원칙에 따라 원본 표기를 그대로 보존한다(의미 토큰 정렬은 P1 토큰 해석기 회차 소관).
   🔒 원본의 겉껍질 두 겹(div.module-calc-module + form.module-calc-form)은 한 겹으로 합쳤다 —
      form 자체가 카드를 진다. 두 겹일 이유가 원본에도 없었다(껍질에는 여백만 있었다). */

/* ── 뿌리와 두 변형 ──────────────────────────────────────────────
   근거: 카드 결의 배경 흰색(#fff)은 원본 .module-calc-module 승계값이다(modules.css).
   원본이 하드코딩한 자리를 그대로 옮기며 값을 바꾸지 않는다. */
.module-calc-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.module-calc-form--card {
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--color-primary) 35%, #e5e7eb);
  border-radius: var(--color-radius-lg);
  padding: 32px 24px;
  margin: 24px 0 32px;
  box-shadow: var(--color-shadow-sm);
}

/* ── 컴팩트 결 — 스크립트가 서기 전에는 나오지 않는다 ────────────
   근거: 원본 .module-calculator 는 기본 display:none 이고 스크립트가 .is-ready 를 붙일 때만
   나왔다. 계산기가 못 서도 그 페이지의 정적 표가 색인을 담당하므로 미노출이 무해하다는 원본
   판단을 그대로 승계한다. 배경 그라데이션의 흰색(#fff 62%)도 원본 승계값이다. */
.module-calc-form--compact { display: none; }
.module-calc-form--compact.module-calc-form--ready {
  display: flex;
  margin: 20px 0 26px;
  padding: 22px 24px;
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--color-radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 62%);
  box-shadow: var(--color-shadow-sm);
}

/* ── 머리 ── */
.module-calc-form__title {
  margin: 0 0 24px;
  padding-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #1a73e8;
  border-bottom: 2px solid #e8f0fe;
}
.module-calc-form--compact .module-calc-form__title {
  margin: 0;
  padding-bottom: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--color-text-primary);
  border-bottom: 0;
}
.module-calc-form__sub {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #6b7280;
  word-break: keep-all;
}

/* ── 필드 무리 ──────────────────────────────────────────────────
   원본 .module-calc-input-row(가로 배치 래퍼)는 별도 요소로 두지 않고 필드의 폭 변형으로
   흡수했다 — 래퍼가 하던 일이 「이 둘을 한 줄에」뿐이었고, 그것은 필드가 자기 폭으로 말할 수
   있다. 래퍼가 사라지면 조립 선언이 필드 순서만 정하면 되고 줄 묶음을 따로 셀 필요가 없다. */
.module-calc-form__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
.module-calc-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 120px;
}
.module-calc-form__field--full { flex: 1 1 100%; }
.module-calc-form__field--half { flex: 1 1 0; }
.module-calc-form--compact .module-calc-form__field { flex: 1 1 130px; min-width: 120px; }

/* ── 라벨 ── */
.module-calc-form__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-body);
}
.module-calc-form--compact .module-calc-form__label {
  font-size: 13px;
  font-weight: 700;
}

/* ── 글자·숫자 입력 ─────────────────────────────────────────────
   근거: 테두리 회색(#d1d5db)·바탕 흰색(#fff)·자리표시 글자색(#9ca3af)은 전부 원본
   .module-calc-input 승계값이다. 값 변경 금지 규율에 따라 그대로 옮겼다. */
.module-calc-form__input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.module-calc-form__input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px color-mix(in srgb, #1a73e8 18%, transparent);
}
.module-calc-form__input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* 근거: 컴팩트 결의 입력·고르기는 원본 .module-calculator__input,__select 승계값이며 바탕
   흰색(#fff)이 그 안에 있다. 수치를 세로로 쌓는 자리라 자릿수 고정 글자체를 켠다(§15-a-2). */
.module-calc-form--compact .module-calc-form__input,
.module-calc-form--compact .module-calc-form__select {
  height: auto;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  background-color: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--color-radius-md);
  font-variant-numeric: tabular-nums;
}
.module-calc-form--compact .module-calc-form__input:focus,
.module-calc-form--compact .module-calc-form__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ── 고르기 ─────────────────────────────────────────────────────
   근거: 펼침 화살표는 원본이 배경 그림으로 그려 둔 자작 도형이 아니라 고르기 컨트롤의 기본
   부품이다. 그 데이터 주소 안의 회색(%236b7280)과 테두리 회색(#d1d5db)·바탕 흰색(#fff)은
   원본 .module-calc-select 승계값이며 한 글자도 바꾸지 않았다. */
.module-calc-form__select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 10px 12px;
  font-size: 15px;
  color: #111827;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.module-calc-form__select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px color-mix(in srgb, #1a73e8 18%, transparent);
}

/* ── 토글 무리 ──────────────────────────────────────────────────
   🔒 원본은 무리(컨테이너)와 낱개(버튼)가 «같은 이름»(.module-calc-toggle)이었다. 무리 규칙의
      display:flex 가 버튼에도 걸려 글자가 왼쪽으로 붙던 결함을 원본이 정렬 선언으로 덮어 두었고,
      그 사연이 원본 주석에 남아 있다. 이번 개명으로 무리(__toggles)와 낱개(__toggle)가 갈렸으므로
      그 결함은 구조적으로 사라졌고, 덮개였던 정렬 선언은 낱개 규칙 안에 정본으로 남긴다.
   근거: 무리 테두리 회색(#d1d5db)·낱개 바탕(#f9fafb)·글자(#374151)·켜짐 글자 흰색(#fff)은 전부
      원본 .module-calc-toggle-group 계열 승계값이다. */
.module-calc-form__toggles {
  display: flex;
  overflow: hidden;
  border: 1.5px solid #d1d5db;
  border-radius: var(--color-radius-md);
}
.module-calc-form__toggle {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.module-calc-form__toggle[aria-checked="true"] {
  background: var(--color-primary);
  color: #fff;
}
.module-calc-form__toggle:hover:not([aria-checked="true"]) {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* 근거: 컴팩트 결의 낱개는 원본 .module-calculator__tbtn 승계값이고 바탕 흰색(#fff)과 켜짐
   글자 흰색(#fff)이 그 안에 있다. 낱개 사이의 가름선도 원본 그대로다. */
.module-calc-form--compact .module-calc-form__toggle {
  flex: 1 1 auto;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-muted);
  background: #fff;
  transition: background-color .12s ease, color .12s ease;
}
.module-calc-form--compact .module-calc-form__toggle + .module-calc-form__toggle {
  border-left: 1.5px solid var(--color-border);
}
.module-calc-form--compact .module-calc-form__toggle[aria-checked="true"] {
  background: var(--color-primary);
  color: #fff;
}

/* ── 보내기 단추 ────────────────────────────────────────────────
   근거: 글자 흰색(#fff)은 원본 .module-calc-btn 승계값이다. 원본이 2026-07-03 라이브 실측으로
   덧댄 「채움형 단추의 hover·focus 글자색 고정」도 함께 옮겼다 — 그 선언이 없으면 테마 전역
   규칙이 이겨 글자가 검게 뒤집힌다는 것이 원본이 실측으로 확인한 사실이다.
   §15-a-5 — 덩어리 자체가 누를 수 있는 자리라 밑줄을 그리지 않는다. */
.module-calc-form__submit {
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: none;
  border-radius: var(--color-radius-md);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.module-calc-form__submit:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.module-calc-form__submit:focus {
  color: #fff;
}
.module-calc-form__submit:active {
  transform: translateY(0);
}

/* ── 오류 안내 ──────────────────────────────────────────────────
   근거: 붉은색(#dc2626)은 원본 .module-calc-error 승계값이다. 처음에는 hidden 속성으로 숨기고
   계산 엔진이 그 속성을 떼어 노출한다 — 인라인 style 로 숨기지 않는다는 원본 규율 승계. */
.module-calc-form__error {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #dc2626;
}
.module-calc-form__error[hidden] {
  display: none;
}

/* ── 하단 면책 ── */
.module-calc-form__note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── 초점 고리 ──────────────────────────────────────────────────
   원본은 이 고리를 여러 모듈(공유 단추·브리핑 따위)과 «한 선택자 묶음»에 몰아 두었다. 남의
   모듈 클래스를 우리 시트가 겨냥하는 것은 §10-1 위반이라 우리 자리만 떼어 왔다. */
.module-calc-form__input:focus-visible,
.module-calc-form__select:focus-visible,
.module-calc-form__toggle:focus-visible,
.module-calc-form__submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 마지막 자식의 아래 여백 — 카드 안쪽 위아래 균형(원본 승계) ── */
.module-calc-form > :last-child { margin-bottom: 0; }

/* ── 좁은 화면 ── */
@media (max-width: 720px) {
  .module-calc-form--compact.module-calc-form--ready { padding: 18px 16px; }
  .module-calc-form--compact .module-calc-form__field { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .module-calc-form__toggle { transition: none; }
  .module-calc-form__submit { transition: none; }
}

/* 🆕 2026-10-09 앱층 흡수(T40) — 슬라이더 입력(type="range" + max) · 현재값 글자(unit). 새 선택자만(기존 규칙 무접촉).
   근거(앱층): slider-calc input · calc-out (app-layer/style.css:2603). 토큰만 · 13px 미만 0 */
.module-calc-form__input[type="range"] { height:auto; padding:0; border:0; background:transparent; box-shadow:none; accent-color:var(--acc, #1a73e8); }
.module-calc-form__range-out { display:block; margin-top:4px; font-size:15px; color:var(--mut, #6b7280); font-variant-numeric:tabular-nums; }
/* 🆕 2026-10-09 입력이 슬라이더 하나뿐 = 계산 버튼 없음(script.js bindInstant 가 지움 · 스크립트 전에도 :has 로 가림) · 아래 결과 상자에 붙임 */
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__submit { display:none; }
.module-calc-form--instant, .module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) { margin-bottom:0; padding-bottom:20px; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-width:0; }
.module-calc-form__range-out b { font-size:20px; font-weight:800; color:var(--ink, #111827); }

/* 🆕 2026-10-09 슬라이더 하나 판 = 한 카드(사용자 10-09 «앱층 T40 처럼 · 제목→규칙→슬라이더→입력값·결과 한 줄») · PL-APP-MOD-01 · CO-05
   위쪽 반(이 폼) = 제목·규칙 한 줄·슬라이더 · 아래쪽 반(짝 calculator variant=inline) = 입력값(왼쪽)·결과(오른쪽). 테두리·바탕·모서리가 이어져 한 카드로 보인다.
   색·모서리 = 토큰만 · 막대 8px · 손잡이 24px(터치 영역 44px = input 높이) · 입력 여럿 판은 아래 규칙에 걸리지 않는다(:only-child). */
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) { background:var(--surf); border:1px solid var(--line2); border-bottom-width:0; border-radius:var(--r-s) var(--r-s) 0 0; padding:20px 20px 4px; margin:24px 0 0; gap:6px; box-shadow:none; }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__title { margin:0; padding:0; border:0; font-size:20px; font-weight:800; color:var(--ink); }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__sub { margin:0; font-size:14px; font-weight:400; color:var(--mut); }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__fields, .module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__field { gap:0; }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; background:transparent; cursor:pointer; }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__input[type="range"]::-webkit-slider-runnable-track { height:8px; border-radius:4px; background:linear-gradient(to right, var(--acc) var(--fill,0%), var(--line2) var(--fill,0%)); }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; margin-top:-8px; border-radius:50%; background:var(--acc); border:3px solid var(--surf); box-shadow:0 0 0 1px var(--acc); }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__input[type="range"]::-moz-range-track { height:8px; border-radius:4px; background:var(--line2); }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__input[type="range"]::-moz-range-progress { height:8px; border-radius:4px; background:var(--acc); }
.module-calc-form--card:has(.module-calc-form__field:only-child .module-calc-form__input[type="range"]) .module-calc-form__input[type="range"]::-moz-range-thumb { box-sizing:border-box; width:24px; height:24px; border-radius:50%; background:var(--acc); border:3px solid var(--surf); box-shadow:0 0 0 1px var(--acc); }
.module-calc-form__range-ends { display:flex; justify-content:space-between; margin-top:-6px; font-size:14px; color:var(--mut); font-variant-numeric:tabular-nums; }
/* 짝 계산 판(variant=inline)이 입력값을 한 줄에 함께 보이면 이 폼의 현재값 글자는 겹치므로 가린다 */
.module-calc-form:has(+ .module-calculator__calc-board--inline) .module-calc-form__range-out { display:none; }