@tailwind base;
@tailwind components;
@tailwind utilities;

/* 전체화면 모드 스타일 */
@layer components {
  /* 전체화면 활성화 시 */
  .fullscreen-active {
    @apply overflow-hidden;
  }

  /* 전체화면 컨테이너 (CSS 폴백용) */
  .fullscreen-container {
    @apply fixed inset-0 z-[9999] bg-gradient-to-b from-white via-blue-50/20 to-white;
  }

  /* 전체화면 모드에서 navbar 숨김 */
  .fullscreen-active nav {
    @apply hidden !important;
  }

  /* 전체화면 모드 콘텐츠 조정 */
  .fullscreen-active .time-display {
    @apply text-8xl lg:text-9xl;
  }

  /* 전체화면 전환 애니메이션 */
  [data-fullscreen-target="container"] {
    @apply transition-all duration-300 ease-in-out;
  }

  /* 전체화면 버튼 호버 효과 */
  [data-fullscreen-target="toggleButton"]:hover {
    @apply scale-110;
  }

  /* ESC 힌트 페이드인 애니메이션 */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  [data-fullscreen-target="hint"]:not(.hidden) {
    animation: fadeIn 0.3s ease-out;
  }

  /* 전체화면 모드 반응형 조정 */
  @media (max-width: 768px) {
    .fullscreen-active .time-display {
      @apply text-5xl;
    }

    .fullscreen-active header {
      @apply py-2 px-4;
    }

    .fullscreen-active h1 {
      @apply text-xl;
    }
  }

  @media (max-width: 1024px) {
    .fullscreen-active .time-display {
      @apply text-6xl;
    }
  }

  /* 애니메이션 스크롤 조정 (전체화면) */
  .fullscreen-active .animate-scroll-left {
    animation-duration: 10s;
  }
}

/* 라이트모드를 기본으로 설정 */
:root {
  color-scheme: light;
}

html {
  @apply bg-white !important;
}

html.dark {
  @apply bg-white !important;
}

body {
  @apply bg-white text-gray-900 !important;
}

/* 다크모드 클래스 오버라이드 */
.dark body {
  @apply bg-white text-gray-900 !important;
}

/* 커스텀 컴포넌트 스타일 */
@layer components {
  /* 버튼 스타일 */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-primary text-white hover:bg-primary-dark hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-white;
  }

  .btn-ghost {
    @apply btn bg-transparent text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-white;
  }

  .btn-danger {
    @apply btn bg-error text-white hover:bg-error-dark focus:outline-none focus:ring-2 focus:ring-error focus:ring-offset-2 focus:ring-offset-white;
  }

  .btn-sm {
    @apply text-sm px-4 py-2;
  }

  .btn-lg {
    @apply text-lg px-8 py-4;
  }

  /* 카드 스타일 */
  .card {
    @apply bg-white border border-gray-200 rounded-xl shadow-lg;
  }

  .card-hover {
    @apply card transition-all duration-200 hover:shadow-xl hover:border-gray-300;
  }

  /* 입력 필드 스타일 */
  .input {
    @apply block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors duration-200;
  }

  .input-error {
    @apply border-error focus:ring-error;
  }

  /* 레이블 스타일 */
  .label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  /* 배지 스타일 */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-primary {
    @apply badge bg-blue-100 text-blue-700;
  }

  .badge-success {
    @apply badge bg-green-100 text-green-700;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-700;
  }

  .badge-error {
    @apply badge bg-red-100 text-red-700;
  }

  .badge-gray {
    @apply badge bg-gray-200 text-gray-700;
  }

  /* 탭 스타일 */
  .tab-list {
    @apply flex space-x-1 border-b border-gray-200;
  }

  .tab {
    @apply px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent transition-colors duration-200;
  }

  .tab-active {
    @apply text-primary border-primary;
  }

  /* 알림 스타일 */
  .alert {
    @apply p-4 rounded-lg border;
  }

  .alert-info {
    @apply alert bg-blue-50 border-blue-200 text-blue-700;
  }

  .alert-success {
    @apply alert bg-green-50 border-green-200 text-green-700;
  }

  .alert-warning {
    @apply alert bg-yellow-50 border-yellow-200 text-yellow-700;
  }

  .alert-error {
    @apply alert bg-red-50 border-red-200 text-red-700;
  }

  /* 테이블 스타일 */
  .table-auto {
    @apply w-full text-sm text-left text-gray-700;
  }

  .table-auto thead {
    @apply text-xs text-gray-600 uppercase bg-gray-100 border-b border-gray-200;
  }

  .table-auto th {
    @apply px-6 py-3 font-medium;
  }

  .table-auto td {
    @apply px-6 py-4;
  }

  .table-auto tbody tr {
    @apply bg-white border-b border-gray-100 hover:bg-gray-50 transition-colors duration-200;
  }

  /* 프로그레스 바 */
  .progress {
    @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
  }

  .progress-bar {
    @apply h-full bg-primary transition-all duration-300 ease-out;
  }

  /* 툴팁 */
  .tooltip {
    @apply relative inline-block;
  }

  .tooltip-content {
    @apply absolute z-10 px-3 py-2 text-sm text-white bg-gray-800 rounded-lg shadow-xl opacity-0 invisible transition-all duration-200;
  }

  .tooltip:hover .tooltip-content {
    @apply opacity-100 visible;
  }

  /* 애니메이션 유틸리티 */
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-down {
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      transform: translateY(-20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.5s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
  }

  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .animate-slide-out-right {
    animation: slideOutRight 0.3s ease-out forwards;
  }

  @keyframes slideOutRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  /* 스크롤바 스타일 */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) rgb(243 244 246);
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-md;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }
}

/* 유틸리티 클래스 */
@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
  }

  .glow {
    @apply shadow-[0_0_20px_rgba(0,112,243,0.3)];
  }

  .glow-accent {
    @apply shadow-[0_0_20px_rgba(121,40,202,0.3)];
  }

  .backdrop-blur-light {
    @apply backdrop-blur-md bg-white/80;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .animation-delay-200 {
    animation-delay: 200ms;
  }

  .animation-delay-400 {
    animation-delay: 400ms;
  }

  .animation-delay-2000 {
    animation-delay: 2000ms;
  }

  .animation-delay-4000 {
    animation-delay: 4000ms;
  }

  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  @keyframes gradient-x {
    0%,
    100% {
      background-size: 200% 200%;
      background-position: left center;
    }
    50% {
      background-size: 200% 200%;
      background-position: right center;
    }
  }

  .animate-gradient-x {
    animation: gradient-x 3s ease infinite;
  }
  
  /* Toast Notifications */
  .toast {
    @apply transform transition-all duration-300 ease-in-out relative;
  }
  
  .toast-enter {
    @apply translate-x-full opacity-0;
  }
  
  .toast-enter-active {
    @apply translate-x-0 opacity-100;
  }
  
  .toast-exit-active {
    @apply translate-x-full opacity-0;
  }
  
  /* Progress bar container */
  .toast-progress {
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
  }
  
  /* Animated progress bar */
  .toast-progress-bar {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    will-change: width;
    /* 기본 색상 - 각 타입별로 덮어씌워짐 */
    background: linear-gradient(to right, #9333ea, #ec4899);
  }
  
  /* Turbo progress bar 숨기기 (Toast와 충돌 방지) */
  .turbo-progress-bar {
    display: none !important;
  }
  
  /* Toast stacking animation */
  #toast-container .toast {
    @apply transition-transform duration-300 ease-in-out;
  }
  
  /* Different toast positions */
  #toast-container {
    @apply top-20 right-4;
  }
  
  #toast-container.bottom-right {
    @apply bottom-4 right-4 top-auto;
  }
  
  #toast-container.top-left {
    @apply top-20 left-4 right-auto;
  }
  
  #toast-container.bottom-left {
    @apply bottom-4 left-4 right-auto top-auto;
  }
  
  #toast-container.top-center {
    @apply top-20 left-1/2 transform -translate-x-1/2 right-auto;
  }
  
  #toast-container.bottom-center {
    @apply bottom-4 left-1/2 transform -translate-x-1/2 right-auto top-auto;
  }
}