/* style.css */
/* Pretendard 폰트는 각 HTML 파일에서 CDN으로 직접 로드합니다. */
/* body 기본 폰트 설정은 Tailwind CSS의 font-sans 클래스와 HTML 내 Pretendard CDN 링크로 처리됩니다. */

/* 한국어 단어 단위 줄바꿈 - 의미 단위 중간에 잘리지 않도록 */
body {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 1분 고요 호흡 - 시각적 호흡 가이드 애니메이션 */
.breathing-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #7dd3fc, #38bdf8, #0ea5e9);
    margin: 40px auto;
    animation-name: breath;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-play-state: paused;
    box-shadow: 0px 10px 40px rgba(14, 165, 233, 0.4), 0px 0px 60px rgba(56, 189, 248, 0.2);
    border: 4px solid rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease-in-out;
    position: relative;
}

@keyframes breath {
    0% {
        transform: scale(0.9);
        opacity: 0.75;
        box-shadow: 0px 10px 35px rgba(14, 165, 233, 0.3), 0px 0px 50px rgba(56, 189, 248, 0.15);
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
        box-shadow: 0px 15px 50px rgba(14, 165, 233, 0.5), 0px 0px 80px rgba(56, 189, 248, 0.3);
    }
    100% {
        transform: scale(0.9);
        opacity: 0.75;
        box-shadow: 0px 10px 35px rgba(14, 165, 233, 0.3), 0px 0px 50px rgba(56, 189, 248, 0.15);
    }
}

.breathing-circle.playing {
    animation-play-state: running;
}

/* Pomodoro 타이머 종료 시 시각적 알림 예시 */
.timer-finished-flash {
    animation: flashBackground 0.5s 3; /* 0.5초 간격으로 3번 깜빡임 */
}

@keyframes flashBackground {
    0%, 100% { background-color: inherit; } /* 원래 배경색으로 돌아옴 */
    50% { background-color: #FFCCBC; } /* 강조색 (Accent) */
}

/* 스크롤바 디자인 (선택 사항, 브라우저 호환성 확인 필요) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    border-radius: 10px;
    border: 2px solid #f8fafc;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
}

/* AQI Gauge Colors */
.aqi-good { background-color: #22c55e; }
.aqi-fair { background-color: #84cc16; }
.aqi-moderate { background-color: #eab308; }
.aqi-poor { background-color: #f97316; }
.aqi-very-poor { background-color: #ef4444; }

.aqi-gauge-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

/* Dashboard Widget Cards */
.widget-card {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Settings Page Form */
#settingsPage input:focus {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Dashboard card hover */
.dashboard-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Card icon bounce on hover */
.dashboard-card:hover .card-icon {
    animation: gentleBounce 0.6s ease;
}

@keyframes gentleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Quote text animation */
.quote-text {
    animation: quoteAppear 0.8s ease-out;
}

.quote-author {
    animation: quoteAppear 1s ease-out;
}

@keyframes quoteAppear {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Air quality inline section */
#airQualityContent {
    animation: fadeInUp 0.6s ease-out;
}

/* Gratitude journal history card */
.gratitude-card {
    animation: fadeInUp 0.4s ease-out;
}

/* Card personality - subtle dot pattern overlay */
.dashboard-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.03;
    pointer-events: none;
    border-radius: inherit;
    background-image: radial-gradient(circle at 20% 50%, currentColor 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Card icon container - scale on hover */
.card-icon {
    transition: transform 0.3s ease;
}

.dashboard-card:hover .card-icon {
    transform: scale(1.1) rotate(-3deg);
    animation: none;
}

/* Book recommendation section */
#bookRecommendation {
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

/* Date banner */
#todayDate {
    animation: fadeInUp 0.5s ease-out;
}

#todayGreeting {
    animation: fadeInUp 0.5s ease-out 0.1s both;
}

/* Staggered card entrance */
.dashboard-card:nth-child(1) { animation: fadeInUp 0.5s ease-out 0.1s both; }
.dashboard-card:nth-child(2) { animation: fadeInUp 0.5s ease-out 0.2s both; }
.dashboard-card:nth-child(3) { animation: fadeInUp 0.5s ease-out 0.3s both; }