/* 기본 타이머 모달 안전한 스타일 - JavaScript 없이 CSS만 사용 */

/* 기본 타이머 모달 크기 고정 - CSS 변수 사용 */
.standalone-timer-modal,
[data-timer-type="basic"] {
  width: var(--basic-timer-width, 320px) !important;
  height: var(--basic-timer-height, 400px) !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  position: fixed !important;
  overflow: hidden !important;
}

/* 버튼 클릭 가능하도록 보장 */
.standalone-timer-modal button,
[data-timer-type="basic"] button {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 입력 필드 활성화 보장 */
.standalone-timer-modal input,
[data-timer-type="basic"] input {
  pointer-events: auto !important;
  cursor: text !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 닫기 버튼 위치 고정 */
.standalone-timer-modal button[aria-label="Close"],
[data-timer-type="basic"] button[aria-label="Close"] {
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 하단 버튼 영역 고정 */
.standalone-timer-modal div[style*="position: absolute"][style*="bottom:"],
[data-timer-type="basic"] div[style*="position: absolute"][style*="bottom:"] {
  position: absolute !important;
  bottom: 24px !important;
  left: 24px !important;
  right: 24px !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* 오버레이 클릭 가능 */
[data-radix-portal] > div:first-child {
  pointer-events: auto !important;
}

/* 모달 콘텐츠 클릭 가능 */
[role="dialog"][aria-modal="true"] {
  pointer-events: auto !important;
}

/* 모든 인터랙티브 요소 활성화 */
.standalone-timer-modal *,
[data-timer-type="basic"] * {
  pointer-events: inherit !important;
}

/* 호버 효과 보장 */
.standalone-timer-modal button:hover,
[data-timer-type="basic"] button:hover {
  opacity: 0.8 !important;
}

/* 포커스 스타일 보장 */
.standalone-timer-modal button:focus,
[data-timer-type="basic"] button:focus,
.standalone-timer-modal input:focus,
[data-timer-type="basic"] input:focus {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
}

/* 애니메이션 제거 (성능 향상) */
.standalone-timer-modal,
.standalone-timer-modal *,
[data-timer-type="basic"],
[data-timer-type="basic"] * {
  animation: none !important;
  transition: opacity 0.2s ease !important; /* 호버 효과만 유지 */
}