/**
 * 컬러 적용 스타일시트
 *
 * colors.css에 정의된 CSS 변수를 실제 UI 요소에 적용
 * vibeprs.com의 컬러 스킴을 반영한 스타일
 */

/* ========================================
   BUTTONS (버튼)
   ======================================== */

/* 메인 CTA 버튼 - vibeprs.com 스타일 적용 */
.btn-primary,
.event-apply-form-submit,
.capcha_btn,
button[type="submit"]:not(.btn-secondary) {
  background-color: var(--color-button-primary-bg) !important;
  color: var(--color-button-primary-text) !important;
  border: none;
  transition: all var(--transition-base);
}

.btn-primary:hover,
.event-apply-form-submit:hover,
.capcha_btn:hover {
  background-color: var(--color-button-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 보조 버튼 - 브랜드 컬러 */
.btn-secondary {
  background-color: var(--color-button-secondary-bg);
  color: var(--color-button-secondary-text);
  border: none;
  transition: all var(--transition-base);
}

.btn-secondary:hover {
  background-color: var(--color-button-secondary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 아웃라인 버튼 */
.btn-outline {
  background-color: transparent;
  color: var(--color-button-outline-text);
  border: 1px solid var(--color-button-outline-border);
  transition: all var(--transition-base);
}

.btn-outline:hover {
  background-color: var(--color-button-outline-hover-bg);
  color: var(--color-button-primary-text);
  border-color: var(--color-button-outline-hover-bg);
}


/* ========================================
   NAVIGATION (네비게이션)
   ======================================== */

/* 메뉴 링크 호버 효과 */
.nav-list a:hover,
.nav-list-menu a:hover {
  color: var(--color-text-link);
  transition: all var(--transition-fast);
}

/* 활성 메뉴 */
.nav-list a.active,
.m-nav-list a.active {
  color: var(--color-button-secondary-bg);
  font-weight: bold;
}


/* ========================================
   LINKS (링크)
   ======================================== */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text-link);
}

/* 본문 내 링크 */
.cont-wrap a,
.content a {
  color: var(--color-text-link);
  text-decoration: none;
}

.cont-wrap a:hover,
.content a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}


/* ========================================
   PAGINATION (페이지네이션)
   ======================================== */

/* vibeprs.com 스타일 페이지네이션 */
.swiper-pagination-bullet,
.pagination-item {
  background-color: var(--color-pagination-inactive);
  transition: all var(--transition-base);
}

.swiper-pagination-bullet-active,
.pagination-item.active,
.mainpop .swiper-pagination-bullet-active {
  background-color: var(--color-pagination-active-bg) !important;
  color: var(--color-pagination-active-text) !important;
}


/* ========================================
   FORMS (폼)
   ======================================== */

/* Input 포커스 */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-text-link) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(160, 163, 255, 0.1);
}

/* 체크박스/라디오 활성 상태 */
input[type="checkbox"]:checked + .cbx-custom,
input[type="radio"]:checked + .cbx-custom {
  border-color: var(--color-text-link) !important;
}

input[type="checkbox"]:checked + .cbx-custom svg polyline,
input[type="radio"]:checked + .cbx-custom svg polyline {
  stroke: var(--color-text-link) !important;
}


/* ========================================
   MODALS & POPUPS (모달 & 팝업)
   ======================================== */

/* 모달 배경 오버레이 - vibeprs.com 스타일 */
.popup-event-apply .bg,
.modal-overlay,
.bg {
  background-color: var(--color-overlay-dark) !important;
}

/* 팝업 헤더 */
.popup-event-apply .event-apply-form .is-title h5 {
  background-color: var(--color-button-secondary-bg);
  color: var(--color-button-secondary-text);
}


/* ========================================
   SITE LINKS (사이트 링크)
   ======================================== */

.site-links a {
  border: 1px solid var(--color-button-secondary-bg);
  background-color: var(--color-button-secondary-bg);
  color: var(--color-text-on-dark);
  transition: all var(--transition-base);
}

.site-links a:hover {
  border: 1px solid var(--color-neutral-white);
  background-color: var(--color-neutral-white);
  color: var(--color-button-secondary-bg);
}


/* ========================================
   QUICK MENU (퀵메뉴)
   ======================================== */

/* 주석 처리: index.php에만 적용되어야 함 */
/* .quick-menu,
.q-btn-area {
  background-color: var(--color-button-secondary-bg);
  border-radius: 30px 0 0 30px;
  box-shadow: var(--shadow-lg);
} */

.quick-menu-item:hover img {
  filter: brightness(5);
  transition: all var(--transition-base);
}


/* ========================================
   FLOATING PROMOTION (플로팅 프로모션)
   ======================================== */

.floating-promotion {
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.floating-promotion:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}


/* ========================================
   FOOTER (푸터)
   ======================================== */

.footer {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.footer a:hover {
  color: var(--color-text-link);
}


/* ========================================
   TEXT COLORS (텍스트 컬러)
   ======================================== */

body {
  color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}


/* ========================================
   BACKGROUNDS (배경)
   ======================================== */

.bg-primary {
  background-color: var(--color-bg-primary);
}

.bg-secondary {
  background-color: var(--color-bg-secondary);
}

.bg-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}


/* ========================================
   BORDERS (테두리)
   ======================================== */

.border {
  border: 1px solid var(--color-border-light);
}

.border-medium {
  border: 1px solid var(--color-border-medium);
}

.border-dark {
  border: 1px solid var(--color-border-dark);
}


/* ========================================
   SHADOWS (그림자)
   ======================================== */

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}


/* ========================================
   STATUS COLORS (상태 컬러)
   ======================================== */

.text-success,
.status-success {
  color: var(--color-status-success);
}

.text-warning,
.status-warning {
  color: var(--color-status-warning);
}

.text-error,
.status-error {
  color: var(--color-status-error);
}

.text-info,
.status-info {
  color: var(--color-status-info);
}

.bg-success {
  background-color: var(--color-status-success);
  color: var(--color-text-on-dark);
}

.bg-warning {
  background-color: var(--color-status-warning);
  color: var(--color-text-primary);
}

.bg-error {
  background-color: var(--color-status-error);
  color: var(--color-text-on-dark);
}

.bg-info {
  background-color: var(--color-status-info);
  color: var(--color-text-on-dark);
}


/* ========================================
   UTILITIES (유틸리티)
   ======================================== */

.transition-fast {
  transition: all var(--transition-fast);
}

.transition {
  transition: all var(--transition-base);
}

.transition-slow {
  transition: all var(--transition-slow);
}


/* ========================================
   RESPONSIVE ADJUSTMENTS (반응형 조정)
   ======================================== */

@media (max-width: 768px) {
  .site-links-mo li a {
    background-color: var(--color-neutral-black);
    color: var(--color-text-on-dark);
    border-radius: 25px;
  }

  .site-links-mo li a:hover {
    background-color: var(--color-button-secondary-bg);
  }
}


/* ========================================
   BRAND SPECIFIC (브랜드 전용)
   ======================================== */

/* 나나성형외과 브랜드 컬러 강조 요소 */
.brand-highlight {
  color: var(--color-button-secondary-bg);
  font-weight: bold;
}

.brand-bg {
  background-color: var(--color-button-secondary-bg);
  color: var(--color-text-on-dark);
}

/* vibeprs.com 스타일 강조 요소 */
.vibe-highlight {
  color: var(--color-button-primary-bg);
  font-weight: bold;
}

.vibe-bg {
  background-color: var(--color-button-primary-bg);
  color: var(--color-text-on-dark);
}