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

/* 1분 고요 호흡 - 시각적 호흡 가이드 애니메이션 */
.breathing-circle {
    width: 180px; /* 원 크기 증가 */
    height: 180px; /* 원 크기 증가 */
    border-radius: 50%;
    /* background-color: #B2EBF2; */ /* 부드러운 하늘색 */
    background-image: linear-gradient(145deg, #B2EBF2, #A0D2DB); /* 그라데이션 적용 */
    margin: 30px auto; /* 상하 여백 증가 */
    animation-name: breath;
    animation-duration: 6s; /* 애니메이션 속도 조절 (3초 들이쉬고, 3초 내쉬고) */
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* 부드러운 가속도 곡선 */
    animation-play-state: paused; /* 기본 상태는 정지 */
    box-shadow: 0px 8px 30px rgba(125, 175, 182, 0.35); /* 그림자 강화 */
    border: 3px solid rgba(255, 255, 255, 0.7); /* 흰색 테두리 추가 */
    transition: box-shadow 0.3s ease-in-out; /* 그림자 변경 시 부드러운 전환 */
}

@keyframes breath {
    0% {
        transform: scale(0.95); /* 시작 시 약간 작게 */
        opacity: 0.7;
        box-shadow: 0px 8px 25px rgba(125, 175, 182, 0.3);
    }
    50% {
        transform: scale(1.20); /* 확장 시 크기 */
        opacity: 1;
        box-shadow: 0px 12px 40px rgba(125, 175, 182, 0.45); /* 확장 시 그림자 강조 */
    }
    100% {
        transform: scale(0.95); /* 종료 시 시작과 동일하게 */
        opacity: 0.7;
        box-shadow: 0px 8px 25px rgba(125, 175, 182, 0.3);
    }
}

.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: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #A0D2DB; /* 주요색 */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7DAFB6; /* 주요색 어둡게 */
}