body {
    background-color: #FAF7F2;
    color: #5A544C;
    font-family: 'Gowun Dodum', sans-serif;
    overflow-x: hidden;
}

/* Page Fade Animation */
.page-fade-in {
    animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 호버 시 채워지는 버튼 스타일 */
.btn-outline {
    border: 2px solid #D9C8B4;
    color: #5A544C;
    background-color: transparent;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background-color: #D9C8B4;
    color: #FAF7F2;
}

/* 숨 고르기 애니메이션 */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.8); opacity: 0.2; }
}
.breathe-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #A3B19B;
    margin: 0 auto;
}
.breathe-circle.animate {
    animation: breathe 8s infinite ease-in-out;
}

/* 날려보내기 텍스트 에리어 흩어지는 효과 */
.fade-out-text {
    animation: textScatter 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
}
@keyframes textScatter {
    0% { 
        opacity: 1; 
        filter: blur(0); 
        transform: translateY(0) scale(1) rotate(0deg); 
    }
    15% {
        opacity: 0.9;
        filter: blur(1px);
        transform: translateY(-5px) scale(1.01) rotate(1deg);
    }
    100% { 
        opacity: 0; 
        filter: blur(25px); 
        transform: translateY(-120px) scale(0.85) rotate(-4deg); 
    }
}

/* 커스텀 레인지 슬라이더 */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #A3B19B;
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #E5DFD3;
    border-radius: 2px;
}

/* 위로의 조각들 배경 */
.comfort-bg {
    background-image: url('https://images.unsplash.com/photo-1518998053401-b4373eb143d2?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    position: relative;
}
.comfort-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(250, 247, 242, 0.85); /* 블렌딩 효과 */
}
.comfort-content {
    position: relative;
    z-index: 10;
}