/* ==========================================================================
   Heavy Timber 7-Segment Digital Clock Typography Stylesheet
   직각 전자시계형 원목 각목 공예 폰트 전용 스타일시트
   ========================================================================== */

/* 컨테이너 */
.wood-digit-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  vertical-align: middle;
  line-height: 1;
}

/* 개별 자릿수 슬롯 */
.wood-digit-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.15s ease-out;
}

/* 직각 전자시계형 원목 SVG 글리프 */
.wood-digit-svg,
.wood-seg-svg {
  display: block;
  width: 32px;
  height: 48px;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 7px rgba(217, 119, 6, 0.45));
  transition: filter 0.2s ease, transform 0.15s ease;
  user-select: none;
  pointer-events: none;
}

/* 마우스 호버 시 묵직한 황금 엠버 글로우 강화 */
.home-count-cell:hover .wood-seg-svg {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 12px rgba(245, 158, 11, 0.75));
}

/* 초(Secs) 단위 전용: 불타는 화염목 / 붉은 단풍 글리프 */
.wood-digit-svg.is-accent,
.wood-seg-svg.is-accent {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 9px rgba(239, 68, 68, 0.7));
}

.home-count-cell.is-accent:hover .wood-seg-svg.is-accent {
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 14px rgba(239, 68, 68, 0.9));
}

/* 카운트다운 셀 내부 정렬 최적화 */
.home-count-cell .n.is-wood {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 0; /* SVG 폰트이므로 기본 폰트 줄바꿈/여백 방지 */
  line-height: 1;
}

/* 카운트다운 단위 라벨 (.u)과의 간격 정돈 */
.home-count-cell .n.is-wood + .u {
  margin-top: 5px;
}

/* 모바일 화면 반응형 최적화 */
@media (max-width: 640px) {
  .wood-digit-svg,
  .wood-seg-svg {
    width: 25px;
    height: 38px;
  }
  .wood-digit-row {
    gap: 3px;
  }
  .home-count-cell .n.is-wood {
    min-height: 38px;
  }
}

@media (max-width: 380px) {
  .wood-digit-svg,
  .wood-seg-svg {
    width: 20px;
    height: 30px;
  }
  .wood-digit-row {
    gap: 2px;
  }
  .home-count-cell .n.is-wood {
    min-height: 30px;
  }
}