/**
 * Timer Responsive Styles
 * 타이머 반응형 디자인
 */

@layer timer.responsive {
  /* Mobile styles */
  @media (max-width: 640px) {
    .dm-timer .timer-modal.enhanced {
      width: 95vw;
      margin: 1rem;
      min-height: 560px;
    }
    
    .dm-timer .timer-body.enhanced {
      padding: 2rem 1rem 1.5rem;
    }
    
    .dm-timer .timer-center {
      width: 160px;
    }
    
    .dm-timer .timer-time {
      font-size: 2.4rem;
      letter-spacing: -0.02em;
    }
    
    .dm-timer .circular-timer-container {
      width: 240px;
      height: 240px;
    }
    
    .dm-timer .circular-timer {
      width: 240px;
      height: 240px;
    }
    
    .dm-timer .ambient-info {
      margin-bottom: 1.5rem;
    }
    
    .dm-timer .focus-mode {
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
    }
    
    .dm-timer .timer-actions.enhanced {
      flex-direction: column;
      gap: 0.75rem;
      padding-bottom: max(20px, env(safe-area-inset-bottom) + 12px);
    }
    
    .dm-timer .timer-btn {
      width: 100%;
    }
    
    /* Mobile mini timer adjustments */
    .dm-timer .timer-mini {
      bottom: 3rem;
      right: 1rem;
      padding: 0.75rem 1rem;
    }
    
    .dm-timer .timer-mini-display {
      font-size: 1.125rem;
    }
    
    /* Mobile indicator adjustments */
    .dm-timer .timer-indicator {
      top: 8px;
      right: 8px;
      padding: 6px 10px;
      font-size: 11px;
    }
  }
  
  /* Very small screens */
  @media (max-width: 380px) {
    .dm-timer .timer-body.enhanced {
      padding: 1.5rem 1rem 1rem;
    }
    
    .dm-timer .timer-center {
      width: 140px;
    }
    
    .dm-timer .timer-time {
      font-size: 2rem;
    }
    
    .dm-timer .circular-timer-container {
      width: 200px;
      height: 200px;
    }
    
    .dm-timer .circular-timer {
      width: 200px;
      height: 200px;
    }
    
    .dm-timer .ambient-info {
      margin-bottom: 1rem;
    }
    
    .dm-timer .focus-mode {
      font-size: 0.9rem;
      padding: 0.625rem 1.25rem;
    }
    
    .dm-timer .mode-icon {
      font-size: 1rem;
    }
    
    .dm-timer .timer-header.minimal {
      padding: 1rem 1.5rem;
    }
    
    .dm-timer .timer-header.minimal h3 {
      font-size: 1.125rem;
    }
    
    .dm-timer .control-btn {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
  }
  
  /* Tablet portrait */
  @media (min-width: 641px) and (max-width: 768px) {
    .dm-timer .timer-modal.enhanced {
      width: 85vw;
      max-width: 500px;
    }
  }
  
  /* Tablet landscape and small desktop */
  @media (min-width: 769px) and (max-width: 1024px) {
    .dm-timer .timer-modal.enhanced {
      width: 480px;
    }
  }
  
  /* Large desktop */
  @media (min-width: 1200px) {
    .dm-timer .timer-modal.enhanced {
      width: 520px;
    }
    
    .dm-timer .circular-timer-container {
      width: 300px;
      height: 300px;
    }
    
    .dm-timer .circular-timer {
      width: 300px;
      height: 300px;
    }
    
    .dm-timer .timer-time {
      font-size: 3.2rem;
    }
    
    .dm-timer .timer-center {
      width: 200px;
    }
  }
  
  /* High DPI displays */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .dm-timer .timer-time,
    .dm-timer .timer-mini-display {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  
  /* Landscape orientation adjustments */
  @media (max-height: 600px) and (orientation: landscape) {
    .dm-timer .timer-modal.enhanced {
      max-height: 90vh;
      overflow-y: auto;
    }
    
    .dm-timer .timer-body.enhanced {
      padding: 1.5rem 1rem;
    }
    
    .dm-timer .circular-timer-container {
      width: 200px;
      height: 200px;
      margin-bottom: 1rem;
    }
    
    .dm-timer .circular-timer {
      width: 200px;
      height: 200px;
    }
    
    .dm-timer .timer-time {
      font-size: 2.2rem;
    }
    
    .dm-timer .ambient-info {
      margin-bottom: 1rem;
    }
  }
  
  /* Print styles */
  @media print {
    .dm-timer .timer-modal-overlay,
    .dm-timer .timer-mini,
    .dm-timer .timer-indicator {
      display: none !important;
    }
  }
  
  /* Reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .dm-timer * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    
    .dm-timer .background-particles,
    .dm-timer .timer-pulse {
      animation: none !important;
    }
  }
  
  /* High contrast mode */
  @media (prefers-contrast: high) {
    .dm-timer .timer-modal.enhanced {
      border: 2px solid var(--timer-text);
      background: var(--timer-surface);
    }
    
    .dm-timer .timer-btn {
      border: 2px solid currentColor;
    }
    
    .dm-timer .control-btn {
      border: 2px solid currentColor;
    }
  }
}