/* =============================================
   전압강하계산기 페이지 전용 스타일 (voltage-drop.css)
   — electric-calculator.css 에서 분리 (CSS 1000줄 한도 대응)

   🔴 로드 순서 고정: common.css → electric-calculator.css → voltage-drop.css
      이 파일의 규칙은 전부 electric-calculator.css 의 공통 선언을 덮어쓰는
      body.vd-page 오버라이드다. 앞에 오면 덮어쓰기가 무효가 된다.

   - voltage-drop-calculator.html 에서만 로드한다 (전기계산기 페이지는 미로드)
   - 스코프가 body.vd-page 로 격리돼 있어 전기계산기 페이지에는 영향이 없다
   - ⚠️ .vd-slider* · .vd-voltage-btn · .vd-judge-* · .vd-refnote* 계열은
     electric-calculator.css 에 남아 있다. 특히 .vd-slider 는 전기계산기의
     소비전력·전류 슬라이더가 함께 쓰는 전역 클래스라 옮기면 안 된다
   ============================================= */

/* ===== 전압강하 페이지 레이아웃 =====
   모바일은 기본 .calc-content(1단)를 그대로 쓰고,
   데스크탑에서는 입력(좌)·결과(우) 2단으로 배치해 스크롤 없이 결과를 확인하게 한다 */
body.vd-page .results-section { margin-top: 0; }

/* 가로 넘침 방지 — grid/flex 항목의 기본 min-width:auto 때문에
   input 고유 최소폭(기본 size=20자) 아래로 줄지 못해 화면 밖으로 밀리는 것을 막는다 */
body.vd-page .calc-content > div,
body.vd-page .input-section,
body.vd-page .results-section,
body.vd-page #vdrop-tab .input-wrapper,
body.vd-page #vdrop-tab .input-field,
body.vd-page .voltage-buttons { min-width: 0; }
body.vd-page #vdrop-tab .input-unit { flex-shrink: 0; }

/* 전선 굵기 select은 body의 line-height 1.6 을 상속받아 줄 높이가 25.6px가 되는데,
   상하 패딩 0.75rem 까지 더해지면 고정 높이(모바일 40px·데스크탑 48px)를 넘어 글자 아래가 잘린다.
   #powerUnit 과 동일 증상이므로 같은 방식으로 상하 패딩을 없애고 line-height 를 normal 로 둔다.
   선택자에 #vdrop-tab 을 포함해야 기존 `#vdrop-tab .input-wrapper .input-field` 의 패딩을 이긴다 */
body.vd-page #vdrop-tab #vdWireSize {
  line-height: normal;
  padding-top: 0;
  padding-bottom: 0;
}

/* 라벨과 입력칸을 한 줄에 배치하고 슬라이더를 그 아래 전체 폭으로 (모바일·데스크탑 공통) */
/* 라벨 열을 고정폭으로 두어 모든 행의 입력칸 좌측을 세로로 정렬한다
   (auto 로 두면 라벨 길이에 따라 행마다 시작 위치가 달라짐)
   136px = 최장 라벨 '배선 길이 (편도)' 약 131px + 여유 */
body.vd-page #vdrop-tab .input-group {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);  /* minmax(0,·) 로 축소 허용 */
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
}
/* 라벨 열 고정으로 컨트롤 폭이 줄어든 만큼 전압 버튼 좌우 패딩을 축소해 줄바꿈 방지
   (버튼은 flex:1 이라 화면상 크기는 그대로이고 최소 필요폭만 낮아짐) */
body.vd-page .vd-voltage-btn { padding-left: 0.4rem; padding-right: 0.4rem; }
body.vd-page #vdrop-tab .input-label { white-space: nowrap; }
/* 슬라이더와 설명문은 전체 폭 차지.
   설명문에 이 지정이 없으면 1열(라벨 열)에 자동 배치되어 긴 문장이 auto 열 폭을
   밀어올리고, 그만큼 입력칸이 좁아져 select 값이 잘려 보인다 */
body.vd-page #vdrop-tab .vd-slider-row,
body.vd-page #vdrop-tab .calc-helper-text { grid-column: 1 / -1; }

/* 숫자 입력칸의 증감(스피너) 버튼 제거 — 값은 직접 입력하거나 슬라이더로 조절 */
body.vd-page #vdrop-tab input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
body.vd-page #vdrop-tab input[type="number"]::-webkit-outer-spin-button,
body.vd-page #vdrop-tab input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 모바일: 결과를 입력보다 위에 배치해 입력값을 조절하는 동안에도 결과가 화면에 남게 한다.
   DOM 순서(입력 → 결과)는 그대로 두고 표시 순서만 뒤집는다. */
@media (max-width: 767px) {
  body.vd-page .calc-content > div:not(.input-section) { order: 1; }
  body.vd-page .calc-content > .input-section { order: 2; }
}

/* 900px 미만에서는 1단으로 유지.
   2단으로 쪼개면 컬럼이 약 352~378px까지 좁아져 라벨 열 고정폭을 빼고 나면
   전압 버튼이 줄바꿈되므로, 충분한 폭이 확보되는 900px 부터 2단으로 전환한다.
   (공통 .calc-content 의 min-width:768px 규칙도 함께 덮어씀) */
@media (max-width: 899px) {
  body.vd-page .calc-content { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 900px) {
  body.vd-page .calc-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;   /* 두 열을 상단 정렬 */
  }
  /* 결과가 감춰져도 좌측 입력 열 폭이 변하지 않도록 우측 열 자리를 유지 */
  body.vd-page .calc-content > div { min-width: 0; }
  /* 컬럼 폭(약 400px)에서는 auto-fit이 1열로 떨어지므로 2열로 고정 */
  body.vd-page .result-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* 결과 카드는 3개이므로 둘째 줄 오른쪽 한 칸이 빈다.
     카드 크기를 서로 다르게 만드는 것보다 빈 칸을 두는 편이 자연스러워
     별도 span 규칙 없이 2열 그대로 흘린다 */
  /* 2단 배치에서 헤더·메뉴가 과도한 높이를 차지하지 않도록 축소 */
  body.vd-page .calc-header h1 { font-size: 1.9rem; line-height: 1.25; }
  body.vd-page .calc-header p { font-size: 1rem; }
  body.vd-page .calc-mode-menu { margin-bottom: 1.25rem; }
  body.vd-page .calc-mode-btn { padding: 0.8rem 1.25rem; }
}

/* ===== 전압강하 페이지 모바일 압축 =====
   입력부터 결과까지 스크롤 없이 한 화면에 담기도록 여백·글자 크기를 축소한다.
   body.vd-page 로 한정해 전기계산기 페이지에는 영향을 주지 않는다. */
@media (max-width: 768px) {
  body.vd-page .calc-container { padding-top: 14px; padding-bottom: 14px; }

  /* 헤더 — 제목만 남기고 설명문은 감춰 세로 공간 확보 */
  body.vd-page .calc-header { margin-bottom: 10px; }
  body.vd-page .calc-header h1 { font-size: 1.25rem; margin-bottom: 0; }
  body.vd-page .calc-header p { display: none; }

  /* 계산기 선택 */
  body.vd-page .calc-mode-menu { margin-bottom: 10px; gap: 0.5rem; }
  body.vd-page .calc-mode-btn { padding: 0.55rem 0.4rem; font-size: 0.88rem; }

  /* 입력 영역 */
  body.vd-page .calc-content { gap: 0.7rem; }
  body.vd-page .input-section { padding: 0.85rem; }
  body.vd-page .section-title { font-size: 1rem; margin-bottom: 0.6rem; }
  body.vd-page .direct-input { gap: 0.6rem; }
  body.vd-page .input-label { font-size: 0.85rem; }
  body.vd-page #vdrop-tab .input-wrapper .input-field,
  body.vd-page #vdrop-tab .input-wrapper .input-unit { height: 40px; }
  body.vd-page .vd-slider { height: 22px; }
  body.vd-page .vd-slider-row { gap: 8px; }
  /* 손잡이를 줄이면 트랙 중앙 정렬값도 함께 보정해야 함: (6 − 18) / 2 = −6 */
  body.vd-page .vd-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; }
  body.vd-page .vd-slider::-moz-range-thumb { width: 16px; height: 16px; }
  /* 슬라이더 양끝 숫자가 범위를 알려주므로 입력 설명문은 감춤 (전압 안내는 유지) */
  body.vd-page .calc-helper-text { display: none; }
  body.vd-page #vdVoltageNote { display: block; font-size: 0.7rem; margin-top: 0; }
  body.vd-page .voltage-buttons { padding: 0.15rem; }
  body.vd-page .vd-voltage-btn { padding: 0.5rem 0.3rem; font-size: 0.85rem; }

  /* 좁은 화면에서는 라벨 열과 간격을 줄여 입력 영역을 확보 (정렬 방식은 공통) */
  body.vd-page #vdrop-tab .input-group {
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 10px;
  }

  /* 줄간격을 좁혀 전체 높이 축소 (본문 기본 1.6 → 1.2) */
  body.vd-page .calc-header h1,
  body.vd-page .calc-mode-btn,
  body.vd-page .vd-voltage-btn,
  body.vd-page .result-label,
  body.vd-page .result-value,
  body.vd-page .vd-judge-label,
  body.vd-page .vd-judge,
  body.vd-page .calc-results-cta { line-height: 1.2; }

  /* 결과 영역 */
  body.vd-page .results-section { padding: 0.85rem; margin-top: 0; }
  body.vd-page .results-section .section-title { font-size: 0.95rem; margin-bottom: 0.5rem; }
  body.vd-page .result-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.45rem; }
  /* 결과 카드는 3개이므로 둘째 줄 오른쪽 한 칸이 빈다.
     마지막 카드를 전폭(또는 60% 좌측)으로 늘려 채워도 봤으나
     크기가 다른 카드가 섞이는 쪽이 오히려 어색해, 세 카드를 같은 크기로 두고
     빈 칸을 그대로 남긴다. 따라서 '말단 도달 전압'이 반폭에 남으므로
     아래 확대 블록의 폭 상한은 이 카드가 결정한다 (390px 임계값의 근거) */
  /* 라벨과 값을 한 줄에 배치해 카드 높이를 절반 가까이 축소
     정렬은 center — baseline 으로 두면 크기가 다른 라벨과 값의 '밑선'만 맞아
     글상자가 짧은 라벨이 카드 세로 중앙보다 아래로 내려간다.
     단위(.result-unit)는 .result-value 안의 인라인 요소라 값과의 밑선 정렬은 그대로 유지된다.
     flex-wrap 은 안전장치 — 글자를 키운 뒤 375px급 화면에서 '말단 도달 전압 200.7V'가
     한 줄에 안 들어갈 때 가로로 넘치는 대신 값이 아랫줄로 내려가게 한다 */
  body.vd-page .result-card {
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  body.vd-page .result-label { font-size: 0.7rem; margin-bottom: 0; white-space: nowrap; }
  body.vd-page .result-value { font-size: 1rem; }
  body.vd-page .result-unit { font-size: 0.72rem; margin-left: 1px; }
  body.vd-page .vd-judge-box { margin-top: 0.5rem; }
  body.vd-page .vd-judge-item { padding: 0.45rem 0.4rem; gap: 6px; }
  body.vd-page .vd-judge-label { font-size: 0.8rem; white-space: nowrap; }
  body.vd-page .vd-judge { font-size: 0.76rem; padding: 0.2rem 0.5rem; white-space: nowrap; }
  body.vd-page .results-notes { margin-top: 0.45rem; }
  body.vd-page .results-notes p { font-size: 0.68rem; line-height: 1.4; }
  body.vd-page .range-warning { font-size: 0.72rem; padding: 0.45rem 0.55rem; }
  body.vd-page .calc-results-cta { padding: 0.6rem 1rem; font-size: 0.92rem; margin-top: 0.6rem; }

  /* 참고 사항 — 스크롤해서 읽는 영역이라 가독성 유지 (과하게 줄이지 않음) */
  body.vd-page .vd-refnote { margin-top: 1rem; padding: 1rem; }
  body.vd-page .vd-refnote-title { font-size: 0.9rem; margin-bottom: 0.6rem; }
  body.vd-page .vd-refnote-item { font-size: 0.78rem; line-height: 1.6; }
  body.vd-page .vd-formula { white-space: normal; }
}

/* ===== 전압강하 결과 카드 글자 확대 (390px 이상 모바일 전용) =====
   결과 카드는 라벨과 값을 한 줄에 두므로 가로 폭이 곧 글자 크기의 상한이다.
   세 카드를 같은 크기로 두는 배치라 '말단 도달 전압 / 200.7V'가 반폭에 남고,
   이 최장 조합을 확대하면 136.8px 이 되어 375px 반폭 예산 135.1px 을 넘긴다.
   따라서 360~385px(iPhone SE·13 mini) 구간은 위 블록의 기존 크기
   (0.7 / 1 / 0.72rem, 사용 124.3px)를 그대로 두고,
   여유가 생기는 390px 이상(iPhone 12~16·대부분의 안드로이드)에서만 한 단계 키운다.
   라벨과 값 사이 간격도 6 → 4px 로 좁혀 확대분의 폭을 일부 상쇄한다.
   (넘치더라도 .result-card 의 flex-wrap 이 있어 가로 스크롤은 생기지 않는다)
   ※ 375px 까지 확대하려면 폭부터 확보해야 한다 — 라벨을 '말단 전압'으로 줄이면
     약 112px 이 되어 들어가지만, 화면 문구 변경이라 별도 판단이 필요하다 */
@media (min-width: 390px) and (max-width: 768px) {
  body.vd-page .result-card { gap: 4px; }
  body.vd-page .result-label { font-size: 0.78rem; }
  body.vd-page .result-value { font-size: 1.12rem; }
  body.vd-page .result-unit { font-size: 0.8rem; }
}