/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  /* Brand color - 레드 계열 */
  --color-primary: #FF0000;
  --color-primary-dark: #DC2626;
  --color-primary-light: #FCA5A5;
  --color-primary-lighter: #FEE2E2;

  /* Neutral colors */
  --color-bg: #F9FAFB;
  --color-card: #FFFFFF;
  --color-border: #E5E7EB;
  --color-text: #111827;
  --color-text-sub: #6B7280;
}

/* Safari bounce scroll 방지 */
body {
  overscroll-behavior: none;
}

/* Primary/Brand color utilities - 로고, 강조 포인트용 */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-primary-lighter { background-color: var(--color-primary-lighter) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-primary-light { border-color: var(--color-primary-light) !important; }
.stroke-primary { stroke: var(--color-primary) !important; }

/* Hover states */
.hover\:bg-primary-dark:hover { background-color: var(--color-primary-dark) !important; }
.hover\:bg-primary-light:hover { background-color: var(--color-primary-light) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:text-primary-dark:hover { color: var(--color-primary-dark) !important; }

/* Focus ring */
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary-light) !important; }
.focus\:border-primary:focus { border-color: var(--color-primary) !important; }

/* Gradient utilities - 빨간색 계열 그라데이션 */
.bg-gradient-primary {
  background: linear-gradient(135deg, #FF0000 0%, #DC2626 100%) !important;
}
.bg-gradient-primary-light {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%) !important;
}
.bg-gradient-primary-soft {
  background: linear-gradient(135deg, #FFF5F5 0%, #FEE2E2 100%) !important;
}
.bg-gradient-primary-to-orange {
  background: linear-gradient(135deg, #FF0000 0%, #F97316 100%) !important;
}
.bg-gradient-primary-radial {
  background: radial-gradient(circle at top right, #FCA5A5 0%, #FEE2E2 50%, #FFFFFF 100%) !important;
}

/* Safe area for mobile (iPhone notch/dynamic island) */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.safe-area-top {
  padding-top: env(safe-area-inset-top, 0);
}