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

/* Normalize additions for cross-browser compatibility */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  appearance: button;
}

[type='search'] {
  -webkit-appearance: textfield;
  appearance: textfield;
}

/* 모든 버튼의 focus outline 제거 */
button:focus,
button:focus-visible,
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 작은 불릿 포인트 - 모든 리스트에 적용 */
li::marker {
  font-size: 0.75em;
}


/* ==========================================================================
   STARTIK DESIGN SYSTEM
   ========================================================================== */

/* ==========================================================================
   NAMING CONVENTIONS & GUIDELINES
   ========================================================================== */

/*
  🎯 BEM Methodology: Block__Element--Modifier
  
  Pattern Structure:
  .st-{block}                           // Component/Block
  .st-{block}__{element}                // Child element
  .st-{block}--{modifier}               // Variant/state
  .st-{block}__{element}--{modifier}    // Element variant
  
  📝 Examples:
  .st-card                              // Card component
  .st-card__header                      // Card header element
  .st-card--elevated                    // Elevated card variant
  .st-card__header--centered            // Centered header element
  
  🔤 Naming Rules:
  - Always use 'st-' prefix (Startik namespace)
  - Use kebab-case for multi-word names
  - Use semantic names over visual descriptions
  - Prefer full words over abbreviations
  
  ✅ Good:
  .st-button--primary                   // Clear, semantic
  .st-navigation__item--active          // Descriptive
  .st-form-field--required              // Meaningful
  
  ❌ Avoid:
  .st-btn                               // Abbreviated
  .st-red-button                        // Visual description
  .st-thing                             // Vague naming
  
  📦 Component Categories:
  - Layout:    .st-card, .st-container, .st-grid
  - Typography: .st-heading, .st-text, .st-link
  - Forms:     .st-input, .st-button, .st-field
  - Feedback:  .st-badge, .st-alert, .st-loading
  - Navigation: .st-menu, .st-breadcrumb, .st-pagination
  
  🎨 Modifier Patterns:
  - Size:      --small, --medium, --large
  - State:     --active, --disabled, --loading
  - Variant:   --primary, --secondary, --outline
  - Semantic:  --success, --warning, --error
*/

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */

:root {
  /* Color Tokens */
  --st-bg: 220 20% 99%;
  --st-fg: 220 22% 16%;
  --st-muted: 220 12% 94%;
  --st-line: 220 10% 90%;
  --st-card: 0 0% 100%;

  /* Brand Colors */
  --st-brand: 220 90% 65%;
  --st-brand-fg: 0 0% 100%;
  --st-brand-muted: 220 90% 65% / 0.15;

  /* Semantic Colors */
  --st-success: 142 76% 36%;
  --st-success-bg: 142 76% 36% / 0.1;
  --st-warning: 38 92% 50%;
  --st-warning-bg: 38 92% 50% / 0.1;
  --st-error: 0 84% 60%;
  --st-error-bg: 0 84% 60% / 0.1;

  /* Spacing Scale */
  --st-space-xs: 0.25rem;
  /* 4px */
  --st-space-sm: 0.5rem;
  /* 8px */
  --st-space-md: 0.75rem;
  /* 12px */
  --st-space-lg: 1rem;
  /* 16px */
  --st-space-xl: 1.25rem;
  /* 20px */
  --st-space-2xl: 1.5rem;
  /* 24px */

  /* Border Radius Scale */
  --st-radius-sm: 0.375rem;
  /* 6px */
  --st-radius-md: 0.5rem;
  /* 8px */
  --st-radius-lg: 0.75rem;
  /* 12px */
  --st-radius-xl: 1rem;
  /* 16px */
  --st-radius-full: 9999px;

  /* Typography Scale */
  --st-text-xs: 0.75rem;
  /* 12px */
  --st-text-sm: 0.875rem;
  /* 14px */
  --st-text-base: 1rem;
  /* 16px */
  --st-text-lg: 1.125rem;
  /* 18px */
  --st-text-xl: 1.25rem;
  /* 20px */
  --st-text-2xl: 1.5rem;
  /* 24px */

  /* Shadows */
  --st-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --st-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --st-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --st-shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --st-transition-fast: 0.15s ease;
  --st-transition-base: 0.2s ease;
  --st-transition-slow: 0.3s ease;
}

/* Dark Mode Tokens */
.dark,
[data-theme="dark"] {
  --st-bg: 220 10% 7%;
  /* almost-black gray */
  --st-fg: 0 0% 98%;
  /* near-white gray */
  --st-muted: 220 10% 14%;
  --st-line: 220 8% 20%;
  --st-card: 220 12% 10%;
  --st-brand: 220 90% 65%;
  --st-brand-fg: 0 0% 100%;
  --st-brand-muted: 220 90% 65% / 0.15;
}

/* --------------------------------------------------------------------------
   2. BASE STYLES
   -------------------------------------------------------------------------- */

html,
body {
  font-family: 
    /* Noto Sans 시리즈 (다국어 최우선) */
    "Noto Sans", 
    "Noto Sans CJK KR", 
    "Noto Sans JP", 
    "Noto Sans SC",
    /* 시스템 폰트 및 폴백 */
    ui-sans-serif, 
    -apple-system, 
    BlinkMacSystemFont,
    "Pretendard", 
    "Inter", 
    "Segoe UI", 
    Roboto, 
    Helvetica, 
    Arial,
    "Apple SD Gothic Neo", 
    "Noto Sans KR", 
    sans-serif;
  line-height: 1.5;
  color: hsl(var(--st-fg));
  background-color: hsl(var(--st-bg));
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus styles */
*:focus {
  outline: 2px solid hsl(var(--st-brand));
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT COMPONENTS
   -------------------------------------------------------------------------- */

/* Card System */
.st-card {
  border-radius: var(--st-radius-xl);
  border: 1px solid hsl(var(--st-line));
  background: hsl(var(--st-card) / 0.9);
  box-shadow: var(--st-shadow-card);
  backdrop-filter: blur(8px);
  transition: var(--st-transition-base);
}

.st-card:hover {
  box-shadow: var(--st-shadow-lg);
  transform: translateY(-2px);
}

.st-card--padding {
  padding: var(--st-space-xl);
}

.st-card--padding-sm {
  padding: var(--st-space-lg);
}

.st-card--padding-lg {
  padding: var(--st-space-2xl);
}

.st-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-space-md);
  padding-bottom: var(--st-space-lg);
  border-bottom: 1px solid hsl(var(--st-line));
  margin-bottom: var(--st-space-lg);
}

.st-card__section {
  padding: var(--st-space-xl);
}

.st-card__section+.st-card__section {
  border-top: 1px solid hsl(var(--st-line));
}

/* Divider */
.st-divider {
  height: 1px;
  background: hsl(var(--st-line));
  border: none;
  margin: var(--st-space-lg) 0;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY COMPONENTS
   -------------------------------------------------------------------------- */

.st-heading--large {
  font-size: var(--st-text-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: hsl(var(--st-fg));
}

.st-heading--medium {
  font-size: var(--st-text-xl);
  font-weight: 600;
  line-height: 1.3;
  color: hsl(var(--st-fg));
}

.st-heading--small {
  font-size: var(--st-text-lg);
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--st-fg));
}

.st-text--muted {
  font-size: var(--st-text-sm);
  color: hsl(var(--st-fg) / 0.6);
}

.st-text--small {
  font-size: var(--st-text-xs);
  color: hsl(var(--st-fg) / 0.7);
}

/* --------------------------------------------------------------------------
   5. BUTTON COMPONENTS
   -------------------------------------------------------------------------- */

.st-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-sm);
  border-radius: var(--st-radius-lg);
  font-weight: 500;
  transition: var(--st-transition-fast);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.st-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Sizes */
.st-button--sm {
  padding: var(--st-space-sm) var(--st-space-md);
  font-size: var(--st-text-xs);
  min-height: 2rem;
}

.st-button--md {
  padding: var(--st-space-sm) var(--st-space-lg);
  font-size: var(--st-text-sm);
  min-height: 2.5rem;
}

.st-button--lg {
  padding: var(--st-space-md) var(--st-space-xl);
  font-size: var(--st-text-base);
  min-height: 3rem;
}

/* Button Variants */
.st-button--primary {
  background: hsl(var(--st-brand));
  color: hsl(var(--st-brand-fg));
}

.st-button--primary:hover:not(:disabled) {
  background: hsl(var(--st-brand) / 0.9);
  transform: translateY(-1px);
  box-shadow: var(--st-shadow-md);
}

.st-button--secondary {
  background: hsl(var(--st-muted));
  color: hsl(var(--st-fg));
  border-color: hsl(var(--st-line));
}

.st-button--secondary:hover:not(:disabled) {
  background: hsl(var(--st-muted) / 0.8);
  border-color: hsl(var(--st-brand));
}

.st-button--outline {
  background: transparent;
  color: hsl(var(--st-brand));
  border-color: hsl(var(--st-brand));
}

.st-button--outline:hover:not(:disabled) {
  background: hsl(var(--st-brand));
  color: hsl(var(--st-brand-fg));
}

.st-button--ghost {
  background: transparent;
  color: hsl(var(--st-fg));
}

.st-button--ghost:hover:not(:disabled) {
  background: hsl(var(--st-muted));
}

/* --------------------------------------------------------------------------
   6. BADGE COMPONENTS
   -------------------------------------------------------------------------- */

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-xs);
  border-radius: var(--st-radius-full);
  padding: var(--st-space-xs) var(--st-space-sm);
  font-size: var(--st-text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.st-badge--brand {
  background: hsl(var(--st-brand-muted));
  color: hsl(var(--st-brand));
}

.st-badge--success {
  background: hsl(var(--st-success-bg));
  color: hsl(var(--st-success));
}

.st-badge--warning {
  background: hsl(var(--st-warning-bg));
  color: hsl(var(--st-warning));
}

.st-badge--error {
  background: hsl(var(--st-error-bg));
  color: hsl(var(--st-error));
}

.st-badge--neutral {
  background: hsl(var(--st-muted));
  color: hsl(var(--st-fg));
}

/* --------------------------------------------------------------------------
   7. FORM COMPONENTS
   -------------------------------------------------------------------------- */

.st-field {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-sm);
}

.st-label {
  display: block;
  font-size: var(--st-text-sm);
  font-weight: 500;
  color: hsl(var(--st-fg));
}

.st-label--required::after {
  content: " *";
  color: hsl(var(--st-error));
}

.st-input,
.st-select,
.st-textarea {
  display: block;
  width: 100%;
  border-radius: var(--st-radius-md);
  border: 1px solid hsl(var(--st-line));
  background: hsl(var(--st-card));
  padding: var(--st-space-sm) var(--st-space-md);
  font-size: var(--st-text-sm);
  transition: var(--st-transition-fast);
  color: hsl(var(--st-fg));
}

/* --------------------------------------------------------------------------
   7.1 FORM INPUTS (Compatibility for crispy-forms default classes)
   -------------------------------------------------------------------------- */
.form-control,
.textinput,
.emailinput,
.passwordinput,
select.form-control {
  display: block;
  width: 100%;
  border-radius: var(--st-radius-md);
  border: 1px solid hsl(var(--st-line));
  background: hsl(var(--st-card));
  padding: var(--st-space-sm) var(--st-space-md);
  font-size: var(--st-text-sm);
  transition: var(--st-transition-fast);
  color: hsl(var(--st-fg));
}

/* Select 요소의 화살표 위치 조정 */
select.form-control {
  padding-right: 2.5rem;
  /* 화살표와 텍스트 사이에 적절한 간격 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 다크 모드에서 select 화살표 색상 조정 */
.dark select.form-control,
[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Select 드롭다운 옵션 스타일링 (제한적) */
select.form-control option {
  background: hsl(var(--st-card));
  color: hsl(var(--st-fg));
  padding: 0.5rem 0.75rem;
  border-radius: var(--st-radius-md);
  margin: 0.25rem 0;
}

/* 다크 모드에서 select 옵션 스타일링 */
.dark select.form-control option,
[data-theme="dark"] select.form-control option {
  background: hsl(var(--st-card));
  color: hsl(var(--st-fg));
}

/* 선택된 옵션 스타일링 */
select.form-control option:checked {
  background: hsl(var(--st-brand));
  color: hsl(var(--st-brand-fg));
  font-weight: 500;
}

/* 호버 효과 (일부 브라우저에서만 지원) */
select.form-control option:hover {
  background: hsl(var(--st-muted));
}

/* --------------------------------------------------------------------------
   14. 커스텀 드롭다운 컴포넌트 (더 나은 스타일링을 위해)
   -------------------------------------------------------------------------- */

.st-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.st-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--st-space-sm) var(--st-space-md);
  padding-right: 2.5rem;
  border: 1px solid hsl(var(--st-line));
  border-radius: var(--st-radius-md);
  background: hsl(var(--st-card));
  color: hsl(var(--st-fg));
  font-size: var(--st-text-sm);
  cursor: pointer;
  transition: var(--st-transition-fast);
  text-align: left;
}

.st-dropdown__trigger:hover {
  border-color: hsl(var(--st-brand));
}

.st-dropdown__trigger:focus {
  outline: none;
  border-color: hsl(var(--st-brand));
  box-shadow: 0 0 0 3px hsl(var(--st-brand) / 0.1);
}

.st-dropdown__trigger--open {
  border-color: hsl(var(--st-brand));
  box-shadow: 0 0 0 3px hsl(var(--st-brand) / 0.1);
}

.st-dropdown__arrow {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  transition: transform var(--st-transition-fast);
}

.st-dropdown__trigger--open .st-dropdown__arrow {
  transform: translateY(-50%) rotate(180deg);
}

.st-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 0.25rem;
  background: hsl(var(--st-card));
  border: 1px solid hsl(var(--st-line));
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: all var(--st-transition-fast);
}

.st-dropdown__menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.st-dropdown__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--st-space-sm) var(--st-space-md);
  background: transparent;
  color: hsl(var(--st-fg));
  font-size: var(--st-text-sm);
  text-align: left;
  cursor: pointer;
  transition: var(--st-transition-fast);
  border: none;
}

.st-dropdown__option:hover {
  background: hsl(var(--st-muted));
}

.st-dropdown__option--selected {
  background: hsl(var(--st-brand));
  color: hsl(var(--st-brand-fg));
  font-weight: 500;
}

.st-dropdown__option--selected:hover {
  background: hsl(var(--st-brand) / 0.9);
}

.st-dropdown__option-icon {
  margin-right: var(--st-space-sm);
  width: 1rem;
  height: 1rem;
  opacity: 0;
  transition: opacity var(--st-transition-fast);
}

.st-dropdown__option--selected .st-dropdown__option-icon {
  opacity: 1;
}

.form-control::placeholder,
.textinput::placeholder,
.emailinput::placeholder,
.passwordinput::placeholder {
  color: hsl(var(--st-fg) / 0.5);
}

.form-control:focus,
.textinput:focus,
.emailinput:focus,
.passwordinput:focus,
select.form-control:focus {
  border-color: hsl(var(--st-brand));
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--st-brand) / 0.1);
}

.form-control:disabled,
.textinput:disabled,
.emailinput:disabled,
.passwordinput:disabled,
select.form-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: hsl(var(--st-muted));
}

/* number input spinner 버튼 가시성 개선 */
input[type="number"].form-control::-webkit-inner-spin-button,
input[type="number"].form-control::-webkit-outer-spin-button {
  opacity: 1;
  cursor: pointer;
  height: 1.5em;
  accent-color: hsl(var(--st-brand));
}

/* 다크모드에서 spinner 버튼 색상 완화 */
.dark input[type="number"].form-control::-webkit-inner-spin-button,
.dark input[type="number"].form-control::-webkit-outer-spin-button,
[data-theme="dark"] input[type="number"].form-control::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"].form-control::-webkit-outer-spin-button {
  opacity: 0.5;
  accent-color: hsl(var(--st-fg) / 0.5);
}

.st-input::placeholder,
.st-textarea::placeholder {
  color: hsl(var(--st-fg) / 0.5);
}

.st-input:focus,
.st-select:focus,
.st-textarea:focus {
  border-color: hsl(var(--st-brand));
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--st-brand) / 0.1);
}

.st-input:disabled,
.st-select:disabled,
.st-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: hsl(var(--st-muted));
}

.st-textarea {
  resize: vertical;
  min-height: 4rem;
}

/* Form States */
.st-field--error .st-input,
.st-field--error .st-select,
.st-field--error .st-textarea {
  border-color: hsl(var(--st-error));
}

.st-field--error .st-input:focus,
.st-field--error .st-select:focus,
.st-field--error .st-textarea:focus {
  box-shadow: 0 0 0 3px hsl(var(--st-error) / 0.1);
}

.st-field-error {
  font-size: var(--st-text-xs);
  color: hsl(var(--st-error));
  margin-top: var(--st-space-xs);
}

.st-field-help {
  font-size: var(--st-text-xs);
  color: hsl(var(--st-fg) / 0.6);
  margin-top: var(--st-space-xs);
}

/* --------------------------------------------------------------------------
   8. TABLE COMPONENTS
   -------------------------------------------------------------------------- */

.st-table {
  width: 100%;
  font-size: var(--st-text-sm);
  border-collapse: collapse;
  background: hsl(var(--st-card));
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  box-shadow: var(--st-shadow-sm);
}

.st-table__header {
  background: hsl(var(--st-muted));
}

.st-table__header-cell {
  padding: var(--st-space-md) var(--st-space-lg);
  text-align: left;
  font-weight: 600;
  color: hsl(var(--st-fg));
  border-bottom: 1px solid hsl(var(--st-line));
}

.st-table__cell {
  padding: var(--st-space-md) var(--st-space-lg);
  color: hsl(var(--st-fg));
  border-bottom: 1px solid hsl(var(--st-line));
}

.st-table__row:last-child .st-table__cell {
  border-bottom: none;
}

.st-table__row:hover {
  background: hsl(var(--st-muted) / 0.3);
}

/* --------------------------------------------------------------------------
   9. UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Spacing Utilities */
.st-space-y>*+* {
  margin-top: var(--st-space-md);
}

.st-space-y-sm>*+* {
  margin-top: var(--st-space-sm);
}

.st-space-y-lg>*+* {
  margin-top: var(--st-space-lg);
}

/* Loading States */
.st-loading {
  position: relative;
  overflow: hidden;
}

.st-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      hsl(var(--st-brand) / 0.1),
      transparent);
  animation: st-loading 1.5s infinite;
}

@keyframes st-loading {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* Accessibility Utilities */
.st-screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE UTILITIES
   -------------------------------------------------------------------------- */

/* Override Tailwind normalize: remove vertical-align from block elements */
iframe,
embed,
object {
  display: block;
  /* vertical-align is ignored with display: block, so we don't need it */
}

/* Mobile-first responsive breakpoints are handled by Tailwind CSS */
/* Custom responsive utilities can be added here if needed */

@media (max-width: 640px) {
  .st-card--padding {
    padding: var(--st-space-lg);
  }

  .st-table__header-cell,
  .st-table__cell {
    padding: var(--st-space-sm) var(--st-space-md);
  }
}



/* --------------------------------------------------------------------------
   11. PRINT STYLES
   -------------------------------------------------------------------------- */

@media print {

  .st-button,
  .st-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .st-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ==========================================================================
   12. 마우스 커서 강제 복원
   ========================================================================== */

/* 모든 인터랙티브 요소의 커서 강제 설정 */
a,
button,
[role="button"],
.dropdown-toggle {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   13. Autofill styles (브라우저 자동완성 배경색 제거)
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: hsl(var(--st-fg)) !important;
  caret-color: hsl(var(--st-fg)) !important;
  box-shadow: 0 0 0px 1000px hsl(var(--st-card)) inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* 일반 화면 네비게이션 바 드롭다운 메뉴 RTL 처리 */
[dir="rtl"] .relative .dropdown-menu,
[dir="rtl"] .dropdown-menu.absolute {
    right: auto !important;
    left: 0 !important;
}

/* RTL 환경에서 text-left를 text-right로 오버라이드 */
[dir="rtl"] .text-left {
    text-align: right !important;
}

/* 일반 화면 드롭다운 메뉴 아이템 텍스트 정렬 (코치 화면과 동일한 방식) */
/* 코치 화면: .dropdown-menu__item { text-align: left; } */
/* 일반 화면: flex items-center를 사용하므로 내부 텍스트 컨테이너에 직접 적용 */

/* flex-1 div는 블록 요소로 만들어서 text-align이 작동하도록 */
.dropdown-menu button .flex-1,
.dropdown-menu a .flex-1 {
    display: block !important;
    text-align: left !important;
    width: 100%;
    flex: 1 1 0%;
    min-width: 0;
}

.dropdown-menu button .flex-1 .font-medium,
.dropdown-menu a .flex-1 .font-medium {
    display: block !important;
    text-align: left !important;
    width: 100%;
}

/* span 요소는 block으로 설정하고 명시적으로 text-align 적용 */
.dropdown-menu button .flex-1 span,
.dropdown-menu a .flex-1 span {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
}

/* RTL 환경에서 드롭다운 메뉴 아이템 텍스트 정렬 */
[dir="rtl"] .dropdown-menu button .flex-1,
[dir="rtl"] .dropdown-menu a .flex-1 {
    text-align: right !important;
}

[dir="rtl"] .dropdown-menu button .flex-1 .font-medium,
[dir="rtl"] .dropdown-menu a .flex-1 .font-medium {
    text-align: right !important;
}

[dir="rtl"] .dropdown-menu button .flex-1 span,
[dir="rtl"] .dropdown-menu a .flex-1 span {
    display: block !important;
    text-align: right !important;
    width: 100% !important;
}

/* data-i18n-text를 가진 span 요소에 대한 추가 보장 */
[dir="rtl"] .dropdown-menu button .flex-1 span[data-i18n-text],
[dir="rtl"] .dropdown-menu a .flex-1 span[data-i18n-text] {
    display: block !important;
    text-align: right !important;
    width: 100% !important;
}

/* themeToggleDropdown 버튼 내부의 span에 대한 특별 처리 - 최고 우선순위 */
[dir="rtl"] #themeToggleDropdown .flex-1 span[data-i18n-text="theme.changeTheme"],
[dir="rtl"] #themeToggleDropdown .flex-1 .font-medium span[data-i18n-text="theme.changeTheme"],
[dir="rtl"] #themeToggleDropdown .text-right span[data-i18n-text="theme.changeTheme"],
[dir="rtl"] #themeToggleDropdown div span[data-i18n-text="theme.changeTheme"] {
    display: block !important;
    text-align: right !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

[dir="rtl"] #themeToggleDropdown .flex-1 .font-medium {
    display: block !important;
    text-align: right !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

[dir="rtl"] #themeToggleDropdown .flex-1 {
    display: block !important;
    text-align: right !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* button 요소 자체의 text-align 오버라이드 (user agent stylesheet의 center 제거) */
/* button은 flex 컨테이너이므로 text-align이 직접 영향을 주지 않지만, 명시적으로 설정 */
[dir="rtl"] #themeToggleDropdown,
[dir="rtl"] button#themeToggleDropdown {
    text-align: left !important; /* button 자체는 left, 내부 flex-1이 right */
}

/* button 내부의 모든 텍스트 요소에 대한 명시적 정렬 */
[dir="rtl"] #themeToggleDropdown * {
    text-align: inherit;
}

/* flex 레이아웃에서 justify-content 오버라이드 */
[dir="rtl"] #themeToggleDropdown.flex.items-center {
    justify-content: flex-start !important;
}

[dir="rtl"] #themeToggleDropdown.flex.items-center .flex-1 {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: block !important;
}

/* Tailwind의 text-right 클래스가 제대로 작동하도록 보장 */
[dir="rtl"] #themeToggleDropdown .text-right {
    text-align: right !important;
}

a:hover,
button:hover,
[role="button"]:hover,
.dropdown-toggle:hover {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Typography defaults for rich content blocks */
.content-text {
  @apply prose prose-neutral dark:prose-invert max-w-none;
}