/* CandleTimer shared styles — SSOT.
   공유 factory create-candle-timer.js 가 동적으로 생성하는 DOM 트리
   (.candle-timer-progress > .candle-timer-progress-fill + .candle-timer-progress-text) 에
   적용되는 기본 룩앤필. FXTester · GoldMiner 양쪽이 이 한 파일을 소비한다.

   transition 는 의도적으로 두지 않는다 — progress width 가 1초 단위로
   즉시 jump 해야 남은 시간을 정확히 반영하고, 새 캔들 진입 시 0 으로의 리셋도
   보간 없이 즉각 이루어진다. */

.candle-timer-progress {
  flex: 1 1 auto;
  min-width: 40px;
  height: 16px;
  position: relative;
  background: linear-gradient(to right, rgba(242, 204, 96, 0.45), rgba(231, 76, 60, 0.6));
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
}

.candle-timer-progress-fill {
  /* elapsed 마스크. 왼쪽부터 자라서 노란 구간을 가리면,
     남은 구간은 오른쪽의 붉은 그라데이션만 보이게 된다. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: rgba(13, 17, 23, 0.8);
}

.candle-timer-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #f2cc60;
  font-family: 'Segoe UI', Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
}