@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
    --color-primary: #F27405;
}

body { font-family: 'Noto Sans KR', sans-serif; }

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

/* 뱃지(Badge) 스타일 커스텀 */
.badge-dark {
    background-color: #1f2937;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}
.badge-light {
    background-color: #eff6ff;
    color: #3b82f6;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}

/* 리스트 아이템 호버 효과 */
.list-item-hover {
    transition: transform 0.2s ease, background-color 0.2s ease;
    border-radius: 0.75rem;
    margin: 0 -0.5rem 1.5rem -0.5rem;
    padding: 0.5rem;
}
.list-item-hover:hover {
    background-color: #f9fafb;
    transform: translateX(4px);
}

/* SPA 페이지 전환 애니메이션 */
.page-container {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 0.4s ease forwards;
}
.page-container.active {
    display: block;
}

/* 카로셀 슬라이드 페이드 효과 */
.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}
.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

/* 말풍선 (Tooltip) 디자인 */
.speech-bubble {
    position: absolute;
    bottom: 110%; /* 인풋창 바로 위 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #ef4444; /* 빨간색 경고 */
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10;
}
/* 말풍선 꼬리 */
.speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #ef4444 transparent transparent transparent;
}
/* 에러 발생 시 말풍선 보이기 */
.show-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   event_02.html 패키지 선택 애니메이션 
========================================= */
/* 체크 시 가격 오렌지색 변경 애니메이션 */
.package-card:has(.package-checkbox:checked) .price-val {
    color: #F27405 !important;
}

/* 체크 시 아코디언 영역 부드럽게 노출 */
.package-card:has(.package-checkbox:checked) .accordion-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 1rem;
    visibility: visible;
}

/* 기본 아코디언 숨김 세팅 */
.accordion-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
    visibility: hidden;
}

.accordion-inner {
    overflow: hidden;
}

/* 폰트/컬러 부드러운 전환 효과 */
.price-val {
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* 부드러운 부유 애니메이션 */
@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.animate-bounce-subtle {
    animation: bounce-subtle 3s ease-in-out infinite;
}

/* 말풍선 텍스트 전환 효과 */
#bubble-text {
    transition: opacity 0.3s ease-in-out;
}

/* 말풍선 텍스트 전환 효과 */
.fade-in-out {
    animation: fadeInOut 0.5s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 커스텀 체크박스 스타일 */
.package-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #E5E7EB;
    border-radius: 50%; /* 둥근 버튼 형태 */
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 체크되었을 때 상태 */
.package-checkbox:checked {
    background-color: #F27405;
    border-color: #F27405;
}

/* 체크되었을 때 내부 V 표시 (흰색) */
.package-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
}

/* 체크 시 카드 전체에 은은한 링 효과 추가 */
.package-card:has(.package-checkbox:checked) {
    ring: 2px;
    ring-color: #F27405;
    box-shadow: 0 10px 15px -3px rgba(242, 116, 5, 0.1);
}

/* style.css 파일에 추가 */

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

.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 터치 최적화 (모바일 탭 하이라이트 제거) */
button {
  -webkit-tap-highlight-color: transparent;
}