@charset "utf-8";
/* 하늘톡 실시간 시간/날씨 배경 - fixed 고정, content 영역만, 반응형, 로딩 시 흰색→서서히 전환 */

#content.letter-content-wrap{position:relative;}
#content.letter-content-wrap .letter{position:relative; z-index:1;}

.letter-sky-bg{position:fixed; z-index:0; left:0; top:0; width:100%; min-height:100vh; pointer-events:none;
	background:#fff;
	background:linear-gradient(to bottom, var(--sky-bg-top, #fff) 0%, var(--sky-bg-bottom, #fff) 100%);
	transition:background 1s ease-out;}
.letter-sky-bg.loading{background:#fff !important;}
.letter-sky-bg .weather-rain,.letter-sky-bg .weather-snow,.letter-sky-bg .weather-fog,.letter-sky-bg .weather-thunder{opacity:0; transition:opacity 1s ease-out;}
.letter-sky-bg.weather-rain .weather-rain,.letter-sky-bg.weather-snow .weather-snow,.letter-sky-bg.weather-fog .weather-fog,.letter-sky-bg.weather-thunder .weather-thunder{opacity:1;}
/* 날씨별 배경 보정: 비/눈/뇌우 시 살짝 어두운 오버레이 */
.letter-sky-bg.weather-rain::after,.letter-sky-bg.weather-snow::after,.letter-sky-bg.weather-thunder::after{content:''; position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none; border-radius:0;}
.letter-sky-bg.weather-rain::after{background:linear-gradient(to bottom, rgba(40,50,70,0.12) 0%, rgba(30,40,55,0.18) 100%);}
.letter-sky-bg.weather-rain.stage-2::after{background:linear-gradient(to bottom, rgba(35,45,65,0.2) 0%, rgba(25,35,50,0.28) 100%);}
.letter-sky-bg.weather-thunder::after{background:linear-gradient(to bottom, rgba(30,40,60,0.25) 0%, rgba(20,30,50,0.35) 100%);}
.letter-sky-bg.weather-thunder.stage-2::after{background:linear-gradient(to bottom, rgba(25,35,55,0.32) 0%, rgba(15,25,45,0.42) 100%);}
.letter-sky-bg.weather-snow::after{background:linear-gradient(to bottom, rgba(200,210,230,0.08) 0%, rgba(180,195,220,0.12) 100%);}
.letter-sky-bg.weather-snow.stage-2::after{background:linear-gradient(to bottom, rgba(190,205,230,0.12) 0%, rgba(170,190,220,0.18) 100%);}

/* 날씨: 비/눈 - JS 캔버스 */
.letter-sky-bg.weather-rain .weather-rain{position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; pointer-events:none;}
.letter-sky-bg.weather-snow .weather-snow{position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; pointer-events:none;}
.letter-weather-canvas{display:block; width:100%; height:100%;}

/* 날씨: 안개 */
.letter-sky-bg.weather-fog .weather-fog{position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none;
	background:linear-gradient(165deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 40%, rgba(255,255,255,0.08) 100%);}
.letter-sky-bg.weather-fog.stage-2 .weather-fog{background:linear-gradient(165deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.28) 40%, rgba(255,255,255,0.16) 100%);
	animation: letter-fog-drift 18s ease-in-out infinite;}
@keyframes letter-fog-drift{0%,100%{opacity:1; transform:translateX(0);} 50%{opacity:0.92; transform:translateX(2%);}}

/* 날씨: 뇌우 - 번개 플래시 (전면 순간 플래시) */
.letter-sky-bg.weather-thunder .weather-thunder{position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none;
	background:radial-gradient(ellipse 120% 80% at 50% 30%, rgba(255,255,255,0.95) 0%, rgba(220,235,255,0.75) 30%, rgba(180,200,230,0.35) 60%, transparent 100%);
	opacity:0;
	animation: letter-thunder-flash 6s ease-in-out infinite;}
.letter-sky-bg.weather-thunder.stage-2 .weather-thunder{animation-duration:4.5s;}
@keyframes letter-thunder-flash{
	0%, 84%, 86%, 94%, 96%, 100%{opacity:0;}
	85%{opacity:0.9;}
	87%{opacity:0;}
	95%{opacity:0.45;}
	97%{opacity:0;}
}

/* 하트 발사: 버튼(좌하단) + 위로 떠오르는 하트 컨테이너 */
.letter-heart-container{position:fixed; left:0; top:0; right:0; bottom:0; pointer-events:none; z-index:50;}
.letter-heart-fab{position:fixed; left:20px; bottom:24px; z-index:100; width:51px; height:51px; border-radius:50%; border:2px solid #e88a9a; background:#fff; color:#e85a70; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; padding:0; font-size:26px; line-height:1; opacity:0.9; animation:letter-heart-fab-float 2.5s ease-in-out infinite;}
.letter-heart-fab:active{opacity:1; animation:none;}
@keyframes letter-heart-fab-float{0%, 100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
.letter-heart-fly{position:absolute; left:20px; bottom:24px; font-size:28px; line-height:1; pointer-events:none; animation-duration:4s; animation-timing-function:ease-out; animation-fill-mode:forwards;}
.letter-heart-fly.pattern-1{animation-name:letter-heart-fly-1;}
.letter-heart-fly.pattern-2{animation-name:letter-heart-fly-2;}
.letter-heart-fly.pattern-3{animation-name:letter-heart-fly-3;}
.letter-heart-fly.pattern-4{animation-name:letter-heart-fly-4;}
.letter-heart-fly.pattern-5{animation-name:letter-heart-fly-5;}
@keyframes letter-heart-fly-1{
	0%{transform:translate(0,0) scale(1); opacity:1;}
	15%{transform:translate(8px,-12vh) scale(1.1); opacity:1;}
	30%{transform:translate(-5px,-28vh) scale(1.05); opacity:0.95;}
	50%{transform:translate(6px,-55vh) scale(1); opacity:0.85;}
	75%{transform:translate(-4px,-85vh) scale(0.9); opacity:0.4;}
	100%{transform:translate(0,-120vh) scale(0.7); opacity:0;}
}
@keyframes letter-heart-fly-2{
	0%{transform:translate(0,0) scale(1); opacity:1;}
	20%{transform:translate(25px,-15vh) scale(1.15); opacity:1;}
	40%{transform:translate(-15px,-40vh) scale(1.05); opacity:0.95;}
	60%{transform:translate(20px,-70vh) scale(0.95); opacity:0.8;}
	80%{transform:translate(-10px,-100vh) scale(0.8); opacity:0.35;}
	100%{transform:translate(5px,-125vh) scale(0.65); opacity:0;}
}
@keyframes letter-heart-fly-3{
	0%{transform:translate(0,0) scale(1); opacity:1;}
	25%{transform:translate(-18px,-25vh) scale(1.08); opacity:1;}
	50%{transform:translate(22px,-55vh) scale(1); opacity:0.9;}
	75%{transform:translate(-12px,-90vh) scale(0.88); opacity:0.45;}
	100%{transform:translate(0,-118vh) scale(0.7); opacity:0;}
}
@keyframes letter-heart-fly-4{
	0%{transform:translate(0,0) scale(1); opacity:1;}
	30%{transform:translate(2px,-35vh) scale(1.05); opacity:0.98;}
	60%{transform:translate(-1px,-72vh) scale(0.95); opacity:0.75;}
	100%{transform:translate(0,-115vh) scale(0.72); opacity:0;}
}
@keyframes letter-heart-fly-5{
	0%{transform:translate(0,0) scale(1); opacity:1;}
	20%{transform:translate(-20px,-18vh) scale(1.12); opacity:1;}
	45%{transform:translate(-35px,-50vh) scale(1); opacity:0.88;}
	70%{transform:translate(-25px,-82vh) scale(0.85); opacity:0.5;}
	100%{transform:translate(-15px,-122vh) scale(0.68); opacity:0;}
}