/* 기본 타이머 모달 전용 스타일 - 크기 변동 방지 */

/* CSS 변수 정의 - 352×440px 10% 확대 크기 (우선순위 최고) */
:root {
  --basic-timer-width: 352px !important;   /* 최종 너비 (320px * 1.1) */
  --basic-timer-height: 440px !important;  /* 최종 높이 (400px * 1.1) */
  --basic-timer-padding: 15px !important;  /* 최종 패딩 (14px * 1.1 ≈ 15px) */
  --timer-button-width: 127px !important;  /* 버튼 너비 (115px * 1.1 ≈ 127px) */
  --timer-button-gap: 9px !important;      /* 버튼 간격 (8px * 1.1 ≈ 9px) */
  --timer-button-height: 40px !important;  /* 버튼 높이 (36px * 1.1 ≈ 40px) */
  --timer-display-size: 101px !important;  /* 타이머 표시 크기 (92px * 1.1 ≈ 101px) */
}

/* 태블릿 반응형 - 10% 확대 적용 */
@media (max-width: 768px) {
  :root {
    --basic-timer-width: 90vw;
    --basic-timer-height: 440px;  /* 400px * 1.1 */
    --timer-button-width: 45%;    /* 비율 기반 유지 */
    --timer-button-gap: 9px;      /* 8px * 1.1 ≈ 9px */
    --basic-timer-padding: 15px;  /* 14px * 1.1 ≈ 15px */
  }
}

/* 기본 타이머 모달 크기 고정 및 포지션 설정 */
.standalone-timer-modal,
[data-timer-type="basic"] {
  /* 크기 고정 */
  width: var(--basic-timer-width) !important;
  height: var(--basic-timer-height) !important;
  min-height: var(--basic-timer-height) !important;
  max-height: var(--basic-timer-height) !important;
  
  /* 포지션 및 레이아웃 */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  
  /* 애니메이션 차단 */
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  
  /* 레이아웃 안정화 */
  contain: layout style size;
  isolation: isolate;
  overflow: hidden !important;
  
  /* z-index 설정 */
  z-index: 50 !important;
}

/* 내부 컨테이너 설정 */
.standalone-timer-modal > div:first-child {
  position: relative !important;
  height: 100% !important;
  padding: var(--basic-timer-padding) !important;
  overflow: hidden !important;
}

/* 닫기 버튼 위치 보정 */
.standalone-timer-modal button[aria-label="Close"],
.standalone-timer-modal > button:last-child {
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  z-index: 100 !important;
}

/* 하단 버튼 영역 위치 고정 */
.standalone-timer-modal .absolute.bottom-6 {
  position: absolute !important;
  bottom: var(--basic-timer-padding) !important;
  left: var(--basic-timer-padding) !important;
  right: var(--basic-timer-padding) !important;
  z-index: 20 !important;
}

/* 메인 컨텐츠 영역 */
.standalone-timer-modal .flex.flex-col.space-y-3 {
  height: calc(100% - 140px) !important;
  position: relative !important;
}

/* 타이머 숫자 크기 - 92px 고정 */
.standalone-timer-modal .text-\\[72px\\],
.standalone-timer-modal .text-\\[92px\\],
.standalone-timer-modal .font-bold.text-center.tabular-nums,
.standalone-timer-modal div[class*="text-[92px]"],
.standalone-timer-modal div[style*="font-size"] {
  font-size: var(--timer-display-size) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* 버튼 및 입력 필드 상호작용 보장 */
.standalone-timer-modal button,
.standalone-timer-modal input {
  position: relative !important;
  z-index: 10 !important;
}

/* 모바일/PWA 반응형 */
@media (max-width: 480px) {
  :root {
    --basic-timer-width: 95vw;
    --basic-timer-height: 400px;
    --timer-button-width: 48%;  /* 2개씩 배치 */
    --timer-button-gap: 6px;
    --basic-timer-padding: 14px;
  }
  
  .standalone-timer-modal {
    width: 95vw !important;
    max-width: 420px !important;
  }
}

/* 애니메이션 완전 차단 */
.standalone-timer-modal,
.standalone-timer-modal * {
  animation: none !important;
  transition: none !important;
}

/* Radix UI Dialog 애니메이션 오버라이드 */
.standalone-timer-modal[data-state="open"],
.standalone-timer-modal[data-state="closed"] {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

/* 버튼 레이아웃 개선 */
.standalone-timer-modal .timer-action-button {
  width: var(--timer-button-width) !important;
  min-width: 120px !important;  /* 최소 너비 보장 */
  height: var(--timer-button-height) !important;
  font-size: 14px !important;
  transition: background-color 0.2s ease !important;
}

/* 버튼 컨테이너 중앙 정렬 */
.standalone-timer-modal .button-container {
  display: flex !important;
  justify-content: center !important;
  gap: var(--timer-button-gap) !important;
}

/* 메인 콘텐츠 높이 재계산 (400px 기준) */
.standalone-timer-modal .flex.flex-col.space-y-3 {
  height: calc(100% - 150px) !important;
  position: relative !important;
}

/* 하단 버튼 영역 여백 조정 */
.standalone-timer-modal .absolute.bottom-6 {
  position: absolute !important;
  bottom: 16px !important;
  left: var(--basic-timer-padding) !important;
  right: var(--basic-timer-padding) !important;
  z-index: 20 !important;
}

/* 시각적 경량화 - 더 작게 보이도록 */
.standalone-timer-modal {
  /* 가벼운 그림자로 부유감 생성 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  
  /* 얇은 테두리로 경계 약화 */
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  
  /* 애니메이션 제거 - 크기 고정 */
  transform: translate(-50%, -50%) !important;
}

/* 열릴 때 애니메이션 제거 */
.standalone-timer-modal[data-state="open"] {
  transform: translate(-50%, -50%) !important;
}

/* 타이머 숫자 크기 유지 */
.standalone-timer-modal .text-\\[92px\\] {
  font-size: var(--timer-display-size) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

/* 입력 필드 크기 최적화 */
.standalone-timer-modal input {
  width: 70px !important; /* 80px → 70px */
  height: 36px !important; /* 40px → 36px */
  font-size: 18px !important; /* 20px → 18px */
}

/* 시간 추가 버튼 크기 조정 */
.standalone-timer-modal button[class*="time-adjust"] {
  height: 32px !important; /* 36px → 32px */
  padding: 0 10px !important; /* 12px → 10px */
  font-size: 13px !important; /* 14px → 13px */
}

/* 메인 콘텐츠 간격 조정 */
.standalone-timer-modal .main-content {
  gap: 14px !important; /* 16px → 14px */
  margin-top: 16px !important; /* 20px → 16px */
}

/* 시각적 계층 구조 개선 */
@media (prefers-reduced-motion: no-preference) {
  .standalone-timer-modal {
    /* 미세한 움직임으로 가벼운 느낌 */
    animation: subtle-float 6s ease-in-out infinite;
  }
}

@keyframes subtle-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, calc(-50% - 2px)) scale(1); }
}