/* Custom Styles */

/* 폰트 적용 */
body {
    font-family: 'Noto Sans KR', sans-serif;
}

/* 단어 줄바꿈 방지 */
.word-keep {
    word-break: keep-all;
}

/* 롤링 리스트 아이템 스타일 */
.rolling-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    font-size: 0.9rem;
    align-items: center;
}

.rolling-item:last-child {
    border-bottom: none;
}

.status-badge {
    background-color: #ef4444; /* Red-500 */
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
}

/* 폼 포커스 시 부드러운 전환 */
input:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
}

/* 애니메이션 정의 */

/* 1. 살짝 들썩이는 효과 (8페이지) - 깔끔한 상하 바운스 */
@keyframes subtle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-subtle-bounce {
    animation: subtle-bounce 1s infinite ease-in-out;
}

/* 2. 목례 효과 (6페이지) - 3D 회전으로 인사하는 느낌 */
@keyframes bow {
    0% { transform: rotateX(0); }
    30% { transform: rotateX(20deg); } /* 고개 숙임 */
    100% { transform: rotateX(0); }
}
.animate-bow {
    transform-origin: bottom center; /* 아래쪽을 축으로 */
    animation: bow 1.5s ease-in-out;
}

/* 3. 갤러리 확대 모달 트랜지션 */
#gallery-modal {
    transition: opacity 0.3s ease-in-out;
}

/* 모바일 최적화 미세 조정 */
@media (max-width: 640px) {
    .rolling-item {
        font-size: 0.8rem;
    }
}