/* =============================================
   voltage-drop-demo.css
   블로그 글(전압강하 계산 가이드) 자동 재생 시연 장면 전용 스타일
   — 폰 목업 안의 화면은 실제 전압강하 계산기(voltage-drop-calculator.html)의
     모바일 레이아웃(electric-calculator.css 의 max-width:768px 블록)을 그대로 재현한다.
     원본은 뷰포트 폭에 반응하지만 여기서는 폰 프레임 안이므로 조건 없이 항상 모바일 형태를 쓴다.
   — 모든 규칙은 .vdd- 접두사로 스코프되어 docs.css / common.css 에 영향을 주지 않는다
   ============================================= */

/* ===== 시연 스테이지 (폰 + 해설) ===== */
.vdd-stage {
  margin: 1.75rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* 데스크탑에서는 폰을 왼쪽, 해설을 오른쪽에 나란히 둔다 */
@media (min-width: 760px) {
  .vdd-stage {
    display: grid;
    grid-template-columns: 391px minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
  }
}

/* ===== 폰 목업 프레임 ===== */
.vdd-phone {
  position: relative;
  width: min(391px, 100%);
  padding: 8px;
  background: #1e293b;
  border-radius: 34px;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.28);
}
.vdd-phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: var(--bg);
  /* 실제 기기에서 한 화면에 보이는 만큼만 노출하고 나머지는 아래 페이드로 잘라낸다 */
  height: 640px;
}
/* 상단 노치 */
.vdd-phone-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 20px;
  background: #1e293b;
  border-radius: 0 0 12px 12px;
  z-index: 3;
}
/* 화면 하단 페이드 — 아래로 내용이 이어짐을 나타낸다 */
.vdd-screen-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg) 78%);
  pointer-events: none;
  z-index: 2;
}

/* ===== 재현: 사이트 헤더 (common.css 모바일 56px 파란 헤더) ===== */
.vdd-app-header {
  height: 56px;
  padding: 0 16px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vdd-app-logo {
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
}
.vdd-app-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.vdd-app-burger i {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* ===== 재현: 계산기 본문 (.calc-container 모바일 padding 14px) ===== */
.vdd-app-body { padding: 14px; }

/* 페이지 제목 — 모바일에서는 설명문이 감춰지고 h1만 남는다 */
.vdd-app-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
}

/* 계산기 선택 메뉴 */
.vdd-mode-menu {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 10px;
}
.vdd-mode-btn {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.4rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-sec);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.vdd-mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

/* 결과·입력 배치 — 모바일은 결과가 입력 위 */
.vdd-app-content {
  display: grid;
  gap: 0.7rem;
}

/* ===== 재현: 결과 섹션 ===== */
.vdd-results-section,
.vdd-input-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.85rem;
  box-shadow: var(--shadow);
}
.vdd-sec-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.vdd-sec-title-result { font-size: 0.95rem; margin-bottom: 0.5rem; }

.vdd-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.45rem;
}
/* 라벨과 값을 한 줄에 배치하는 모바일 압축 형태 */
.vdd-result-card {
  padding: 0.5rem 0.6rem;
  background: var(--accent-light);
  border: 1px solid #DBEAFE;
  border-radius: var(--radius-md);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.vdd-result-label {
  font-size: 0.7rem;
  color: var(--text-sec);
  line-height: 1.2;
  white-space: nowrap;
}
.vdd-result-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.vdd-result-unit {
  font-size: 0.72rem;
  color: var(--text-sec);
  margin-left: 1px;
  font-weight: 400;
}

/* KEC 기준별 판정 */
.vdd-judge-box {
  display: flex;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.vdd-judge-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.45rem 0.4rem;
}
.vdd-judge-item + .vdd-judge-item { border-left: 1px solid var(--border); }
.vdd-judge-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
}
.vdd-judge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}
.vdd-judge-ok { background: var(--green-light); color: var(--green); }
.vdd-judge-ng { background: var(--red-light); color: var(--red); }

/* 허용전류 미달 경고 (기본은 숨김) */
.vdd-range-warning {
  display: none;
  margin-top: 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 700;
}
/* 계산 조건 표기 */
.vdd-results-note {
  margin-top: 0.45rem;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #9ca3af;
  word-break: keep-all;
}
.vdd-results-note + .vdd-results-note { margin-top: 0.2rem; }
/* 만부하 기준 병기값 — 조건 표기보다 한 단계 눈에 띄게 (판정에는 쓰이지 않는 참고값) */
.vdd-warm-note { color: var(--text-sec); font-weight: 500; }

/* ===== 재현: 입력 섹션 ===== */
.vdd-direct-input { display: grid; gap: 0.6rem; }
/* 라벨 열 고정폭(모바일 120px)으로 입력칸 좌측을 정렬 */
.vdd-input-group {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}
.vdd-input-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.vdd-input-wrapper {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}
.vdd-input-field {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
/* select 은 line-height 상속 때문에 글자가 잘리므로 상하 패딩을 없앤다 (원본과 동일 처리) */
select.vdd-input-field {
  line-height: normal;
  padding-top: 0;
  padding-bottom: 0;
}
/* 단위 박스 — div 라 높이가 어긋나므로 높이 고정 + 중앙정렬 (원본과 동일 처리) */
.vdd-input-unit {
  flex-shrink: 0;
  height: 40px;
  padding: 0.75rem 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 숫자 입력칸의 증감 버튼 제거 */
.vdd-input-field[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.vdd-input-field[type="number"]::-webkit-outer-spin-button,
.vdd-input-field[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 슬라이더 행 — 라벨 열까지 포함해 전체 폭 차지 */
.vdd-slider-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.vdd-slider-limit {
  font-size: 0.75rem;
  color: #9ca3af;
  min-width: 26px;
  flex-shrink: 0;
}
.vdd-slider-limit.max { text-align: right; }
.vdd-slider {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  outline: none;
  margin: 0;
  cursor: pointer;
}
.vdd-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #cbd5e1;
}
.vdd-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #cbd5e1;
}
.vdd-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
/* 손잡이 — 트랙 중앙 정렬: (트랙 6px − 손잡이 18px) / 2 = −6 */
.vdd-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.vdd-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* 전압 선택 버튼 */
.vdd-voltage-buttons {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  background: var(--bg-alt);
  padding: 0.15rem;
  border-radius: var(--radius-md);
}
.vdd-voltage-btn {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.3rem;
  border: none;
  background: transparent;
  color: var(--text-sec);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.vdd-voltage-btn.active { background: var(--accent); color: var(--bg); }
/* 전압 안내문 — 모바일에서 유일하게 남는 설명문 */
.vdd-helper-text {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: #9ca3af;
  margin-top: 0;
}

/* 아래로 이어지는 참고 사항 섹션 (페이드로 잘림) */
.vdd-refnote-peek {
  margin-top: 0.7rem;
  padding: 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

/* ===== 자동 조작 표시 ===== */
/* 손끝 위치 표시 — 시연 중 조작 중인 지점에 나타난다 */
.vdd-touch {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.22);
  border: 2px solid rgba(37, 99, 235, 0.5);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
  z-index: 4;
}
.vdd-touch.is-active { opacity: 1; }
/* 조작 중인 행 강조 */
.vdd-input-group.is-auto .vdd-input-label { color: var(--accent-hover); }

/* ===== 해설 영역 ===== */
.vdd-narration { width: 100%; }
.vdd-narration-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5rem;
}
.vdd-narration-step {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vdd-narration-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sec);
}
/* 사용자가 직접 조작을 시작하면 재생 표시를 끈다 */
.vdd-narration-label.is-manual::before { background: var(--accent); animation: none; }
/* 재생 중임을 알리는 점 */
.vdd-narration-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--green);
  vertical-align: middle;
  animation: vdd-blink 1.6s ease-in-out infinite;
}
@keyframes vdd-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* 단계 설명 — docs.css 의 문단 규칙을 이기도록 우선순위를 높인다 */
.article-content .vdd-narration-text {
  min-height: 4.2em;
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

/* 현재 조건을 계산식에 그대로 대입해 보여준다 */
.vdd-formula {
  padding: 0.7rem 0.8rem;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-sec);
  overflow-x: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vdd-formula b { color: var(--accent); font-weight: 800; }
.vdd-formula .vdd-formula-out { color: var(--text); font-weight: 800; }

/* 배선 시각화 — 계산기 화면에는 없는 보조 그림이라 폰 밖에 둔다 */
.vdd-viz {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.7rem;
  padding: 0.7rem 0.6rem 0.45rem;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  /* 판정 결과에 따라 JS 가 갱신 */
  --vdd-end: var(--green);
  --vdd-lamp: 1;
  --vdd-flow: 2.4s;
}
.vdd-viz-node {
  flex-shrink: 0;
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.vdd-viz-icon { color: var(--accent); line-height: 0; }
.vdd-viz-label { font-size: 0.68rem; color: var(--text-sec); }
.vdd-viz-volt {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.vdd-viz-volt-end { color: var(--vdd-end); }
/* 조명 — 전압강하가 커질수록 어두워진다 */
.vdd-viz-lamp {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fde68a, #f59e0b);
  box-shadow: 0 0 calc(13px * var(--vdd-lamp)) rgba(245, 158, 11, 0.85);
  opacity: calc(0.25 + 0.75 * var(--vdd-lamp));
  transition: opacity 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.vdd-viz-line { flex: 1; min-width: 0; }
.vdd-viz-cable {
  position: relative;
  height: 13px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accent) 0%, var(--vdd-end) 100%);
  transition: background 0.25s var(--ease);
}
/* 전류 흐름 — 속도가 전류 크기에 비례 */
.vdd-viz-flow {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.45) 0 8px,
    rgba(255, 255, 255, 0) 8px 20px
  );
  background-size: 28px 100%;
  animation: vdd-flow var(--vdd-flow) linear infinite;
}
@keyframes vdd-flow {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}
.vdd-viz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--text-sec);
  font-variant-numeric: tabular-nums;
}
.vdd-viz-drop { font-weight: 700; color: var(--vdd-end); }

/* 계산기 바로가기 — 해설 영역과 확실히 구분되도록 위 여백을 두고 메인 버튼 형태로 표시 */
.vdd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;   /* 모바일 터치 영역 확보 */
  margin-top: 1.4rem;
  padding: 0 24px;
  border-radius: 100px;
  background: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* docs.css 의 본문 링크 색 규칙을 이기기 위해 우선순위를 높인다 */
.article-content .vdd-cta { color: #fff; }
.article-content .vdd-cta:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
  text-decoration: none;
}

/* ===== 반응형 (480px 이하) ===== */
@media (max-width: 480px) {
  .vdd-phone { padding: 5px; border-radius: 26px; }
  .vdd-phone-screen { border-radius: 21px; height: 620px; }
  .vdd-app-body { padding: 12px; }
  .vdd-input-group { grid-template-columns: 96px minmax(0, 1fr); column-gap: 8px; }
  .vdd-input-field { padding: 0.75rem 0.7rem; }
  .vdd-input-unit { padding: 0.75rem 0.7rem; }
  .vdd-viz-node { width: 54px; }
  .article-content .vdd-narration-text { min-height: 0; font-size: 0.9rem; }
  /* 모바일에서는 사이트 공통 버튼과 동일하게 전체 폭으로 표시 */
  .vdd-cta { display: flex; width: 100%; }
}

/* ===== 모션 최소화 설정 존중 ===== */
@media (prefers-reduced-motion: reduce) {
  .vdd-viz-flow { animation: none; }
  .vdd-narration-label::before { animation: none; }
  .vdd-touch { transition: none; }
}