html, body {
	margin: 0 !important;
	padding: 0 !important;
	height: 100vh !important;
	width: 100vw !important;
	overflow: hidden !important;
	border: 15px solid var(--border-color, #ff0000); /* ← 온도계 색상에 맞춰 동기화 */
	box-sizing: border-box;
}

/* 전체화면 모드에서도 완벽하게 맞도록 */
body {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

img {
	display: block;
	width: 100%
}

.imagemap {
	position: relative;
	width: 100%
}

.doggy {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	animation: doggyJump 3.5s infinite;
	/* 중첩 이미지 페이드용 기준 */
}

.doggy img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity .3s ease;
}
.doggy[data-state="hot"] .hot { opacity: 1; }
.doggy[data-state="normal"] .normal { opacity: 1; }
.doggy[data-state="cool"] .cool { opacity: 1; }

.particle01 {
	position: absolute;
	top: 15.64814%;
	left: 23.6979%;
	width: 69.0104%;
	height: auto;
	animation: particle01Float 5s infinite ease-in-out;
}

/* 파티클02: 상태별 이미지 페이드 */
.particle02 {
	position: absolute;
	top: 16.1111%;
	left: 7.23958%;
	width: 84.3229%;
	height: auto;
	animation: particle02Float 3s infinite ease-in-out;
}
.particle02 img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity .3s ease;
}
.particle02[data-state="hot"] .hot { opacity: 1; }      /* 38~30: 빨강 */
.particle02[data-state="normal"] .normal { opacity: 1; }/* 29.999..~19: 초록 */
.particle02[data-state="cool"] .cool { opacity: 1; }    /* 18: 파랑 */

.dog_status {
	position: absolute;
	top: 7.2222%;
	left: 57.44791%;
	width: 26.97916%;
	height: auto;
}
.dog_status img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity .3s ease;
}
.dog_status[data-state="hot"] .hot { opacity: 1; }
.dog_status[data-state="normal"] .normal { opacity: 1; }
.dog_status[data-state="cool"] .cool { opacity: 1; }
.dog_status[data-state="complete"] .complete { opacity: 1; } /* ✅ 추가 */


/* 온도계 컨테이너 */
.thermometer {
	position: absolute;
	left: 2%;
	top: 15%;
	width: 60px;
	height: 60%;
}

/* 온도계 배경 */
.thermo-bg {
	position: relative;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #f0f0f0 0%, #f0f0f0 100%);
	border: 2px solid #666;
	border-radius: 30px;
}

/* 온도 눈금 컨테이너 */
.thermo-scale {
	position: absolute;
	right: -47px;
	top: 0;
	height: 100%;
	width: 35px;
	z-index:10;
}

/* 개별 눈금 */
.scale-mark {
	position: absolute;
	right: -10px;
	width: 15px;
	height: 2px;
	background: #FFF;
}

.scale-label {
	position: absolute;
	right: 10px;
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
	transform: translateY(-50%);
}

/* 온도별 눈금 위치 (38도가 맨 위, 18도가 맨 아래) */
.scale-38 { top: 5%; }
.scale-36 { top: 14%; }
.scale-34 { top: 23%; }
.scale-32 { top: 32%; }
.scale-30 { top: 41%; }
.scale-28 { top: 50%; }
.scale-26 { top: 59%; }
.scale-24 { top: 68%; }
.scale-22 { top: 77%; }
.scale-20 { top: 86%; }
.scale-18 { top: 95%; }

/* 현재 온도 게이지 (동적 높이/색상) */
.thermo-gauge{
	position:absolute;
	bottom:5px;
	left:50%;
	transform:translateX(-50%);
	width:70%;
	background:none;              /* ← 기존 gradient 제거 */
	border-radius:25px;
	transition:height .25s linear, background-color .25s linear;
}

/* 벌브 색도 같이 변하게 */
.thermo-bulb{
	position:absolute;
	bottom:-8px;
	left:50%;
	transform:translateX(-50%);
	width:85%;
	height:55px;
	background:#ff4444;           /* JS에서 변경 */
	border-radius:50%;
	transition:background-color .25s linear;
}

/* 현재 온도 표시 */
.current-temp {
	position: absolute;
	left: -45px;
	top: -5px;
	background: #ff4444; /* JS에서 동기화 */
	color: white;
	padding: 4px 8px;
	border-radius: 15px;
	font-size: 14px;
	font-weight: bold;
}

/* 파티클01 애니메이션 - 3초 간격으로 2% 위아래 */
@keyframes particle01Float {
	0%, 100% { top: 15.64814%; }
	50%      { top: 13.64814%; }
}

/* 파티클02 애니메이션 - 2초 간격으로 2% 위아래 */
@keyframes particle02Float {
	0%, 100% { top: 16.1111%; }
	50%      { top: 14.1111%; }
}

/* 강아지 점프 애니메이션 - 3.5초마다 0.5초 차이로 두번 점프 */
@keyframes doggyJump {
	0%, 20%, 40%, 100% { top: 3.6111%; }
	10%                { top: 0.6111%; }
	30%                { top: 0.6111%; }
}

/* 안내 문구 공통 */
.status-message{
	position:absolute;
	top:85%;
	left:50%;
	transform:translateX(-50%);
	font-size:24px;
	font-weight:700;
	color:#fff;
	text-shadow:0 2px 6px rgba(0,0,0,.45);
	opacity:0;
	pointer-events:none;
	transition:opacity .25s ease;
	white-space:nowrap;
}
.status-message.show{ opacity:1; }