/* CURRENT Q 계산기 보조 스타일
   기준: 계산기 하나에서만 쓰는 부품만 여기 둔다. 두 계산기 이상에서 쓰이게 되면 cq-calc.css로 올리고 여기서 지운다.
   공통 레이아웃·입력·결과·표·근거의 규칙과 버그 수정은 cq-calc.css에 둔다.
   변수(--calc-*)와 이름 규칙(.calc-*, 상태는 .is-*)은 cq-calc.css를 따른다.
   현재 사용처:
   - 배당소득세 계산기: 입력 줄 옆 실수령액, 연간 금융소득 게이지
   - 리밸런싱 계산기: 줄마다 반복되는 자산 이름·평가액·목표 비중 입력, "한 줄 더" 버튼 */

/* 리밸런싱: 스크립트가 만드는 입력 줄 (cq-calculators-bundle-4.txt "묶음 4 참고") */
.cq-calc .calc-name-input {
  width: 100%;
  max-width: 12rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--calc-rule);
  border-radius: 8px;
  background: var(--calc-field);
  font: inherit;
  font-size: 1.125rem;
  color: var(--calc-ink);
}
.cq-calc .calc-amt-input { width: 8rem; }
.cq-calc .calc-tgt-input { width: 5rem; }
.cq-calc #rebal-add {
  border: 1px solid var(--calc-rule);
  border-radius: 8px;
  background: var(--calc-field);
}
/* 모바일: 평가액과 목표 비중이 한 줄에 함께 있으므로 둘 다 100%로 두면 단위("만원")가 잘린다.
   두 입력이 남는 폭을 나눠 갖고 단위는 줄어들지 않게 한다. (묶음 4 참고의 width: 100%를 이렇게 바꿈) */
@media (max-width: 30rem) {
  .cq-calc .calc-amt-input,
  .cq-calc .calc-tgt-input { width: auto; flex: 1 1 0; min-width: 0; }
  .cq-calc #rebal-rows .calc-unit { flex: none; }
}

/* 줄마다 입력이 반복되는 목록: legend 없이 시작하므로 위 여백을 준다 */
.cq-calc .calc-list { padding-top: 1rem; }

/* 입력 줄 오른쪽의 줄별 결과 */
.cq-calc .calc-row-net {
  flex: 0 0 8.5rem;
  text-align: right;
  font-size: 1rem;
  color: var(--calc-slate);
  font-family: var(--calc-figure);
  font-variant-numeric: tabular-nums;
}

/* 결과 슬래브 안의 강조 */
.cq-calc .calc-result-note b { font-weight: 600; color: #fff; }

/* 결과 슬래브 안의 게이지 */
.cq-calc .calc-gauge {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--calc-slab-line);
}
.cq-calc .calc-gauge-cap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 1rem;
  color: #9db0cb;
  margin-bottom: 0.45rem;
}
.cq-calc .calc-gauge-cap span:last-child {
  color: #e8eef7;
  font-family: var(--calc-figure);
  font-variant-numeric: tabular-nums;
}
.cq-calc .calc-gauge-track {
  height: 10px;
  background: var(--calc-slab-line);
  border-radius: 5px;
  overflow: hidden;
}
.cq-calc .calc-gauge-fill {
  height: 100%;
  width: 0;
  background: #9db0cb;
  border-radius: 5px;
  transition: width 0.25s ease;
}
.cq-calc .calc-gauge-fill.is-over { background: var(--calc-loss-dark); }
.cq-calc .calc-gauge-msg {
  font-size: 1rem;
  color: #b9c8dd;
  margin: 0.6rem 0 0;
  max-width: 52ch;
}
.cq-calc .calc-gauge-msg.is-over { color: var(--calc-loss-dark); }
@media (prefers-reduced-motion: reduce) {
  .cq-calc .calc-gauge-fill { transition: none; }
}

@media (max-width: 30rem) {
  /* 모바일에서는 입력칸 바로 아래에 누적 버튼 줄이 오고, 줄별 결과는 그 아래에 둔다 */
  .cq-calc .calc-row-net { flex: 1 1 100%; order: 1; }
  .cq-calc .calc-row-net:empty { display: none; }
}