*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
	--primary: #1E1B2E;
	--accent: #6C63D6;
	--accent-light: #EAE8FB;
	--accent-mid: #9B8FE8;
	--bg: #F5F4FA;
	--bg2: #FFFFFF;
	--text: #1E1B2E;
	--text-muted: #9591B0;
	--text-hint: #B8B4D0;
	--red: #E24B4A;
	--green: #1D9E75;
	--disabled: #6C757D;
	--kakao: #FEE500;
	--kakao-text: #191919;
	
	--border: rgba(30,27,46,0.07);
	--radius: 16px;
	--login-border: rgba(30,27,46,0.10);
	--login-radius: 14px;
}

.wrapper {
	margin:0 auto;
	max-width: 991px;
	min-height: 100vh;
}
.is-pc {display:block;}
.is-m {display:none;}

@media (max-width:991px){
	.is-pc {display:none;}
	.is-m {display:block;}
}

/* 고정 */
html.fixed , body.fixed {overflow:hidden; touch-action:none; -webkit-touch-action:none;}

html, body {
	height: 100%;
	background: #ECEAF6;
	justify-content: center;
	align-items: flex-start;
	font-family: 'Noto Sans KR', sans-serif;
}

.phone {
	margin: 0;
	height: 100vh;
	background: var(--bg);
	overflow: hidden;
	box-shadow: 0 40px 80px rgba(30,27,46,0.22);
	display: flex;
	flex-direction: column;
	position: relative;
}

/* 상태바 고정 */
.status-bar {
	background: var(--primary);
	padding: 12px 28px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}
.status-time { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #fff; }
.status-icons { display: flex; gap: 5px; align-items: center; }
.status-icons span { display: block; background: rgba(255,255,255,0.85); border-radius: 2px; }

/* iframe */
.fullscreen-iframe {position:fixed; top:0; left:100%; width:100vw; height:100vh; border:none; z-index:9999; background:#fff;}

/* 하단 네비 */
.bottom-nav {
	background: var(--bg2);
	border-top: 1px solid #EEECF8;
	display: flex;
	justify-content: space-around;
	padding: 10px 0 20px;
	flex-shrink: 0;
	z-index: 10;
}
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 4px 20px; border-radius: 12px; transition: background 0.15s; }
.nav-item:active { background: var(--accent-light); }
.nav-icon { width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.nav-icon.active { background: var(--accent-light); }
.nav-label { font-size: 9px; color: var(--text-hint); }
.nav-label.active { color: var(--accent); font-weight: 500; }

/* 팝업 */
/* 배경 (팝업 뒤) */
.bg-screen {
	flex: 1;
	overflow: hidden;
}
.bg-content {
	padding: 16px;
	opacity: 0.3;
}
.bg-card { background: var(--bg2); border-radius: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border); height: 60px; }

/* 오버레이 */
.overlay {
	position: absolute;
	inset: 0;
	background: rgba(15,13,26,0.55);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 1000;
	animation: overlayIn 0.2s ease;
}
.overlay.center { align-items: center; }
.overlay.top { align-items: flex-start; padding-top: 12px; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.overlayLoading {
	position: absolute;
	inset: 0;
	background: rgba(15,13,26,0.55);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 1000;
	animation: overlayIn 0.2s ease;
}
.overlayLoading.center { align-items: center; }
.overlayLoading.top { align-items: flex-start; padding-top: 12px; }
@keyframes overlayLoadingIn { from { opacity: 0; } to { opacity: 1; } }

/* 바텀시트 팝업 */
.bottom-sheet {
	width: 100%;
	background: var(--bg2);
	border-radius: 24px 24px 0 0;
	padding: 14px 20px 28px;
	animation: slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 36px; height: 4px; background: #E0DEEE; border-radius: 2px; margin: 0 auto 16px; }

/* 센터 팝업 */
.center-popup {
	width: calc(100% - 48px);
	background: var(--bg2);
	border-radius: 20px;
	padding: 24px 20px 20px;
	animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* 상단 토스트 */
.toast {
	width: calc(100% - 32px);
	background: var(--primary);
	border-radius: 14px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	animation: slideDown 0.3s cubic-bezier(0.34,1.56,0.64,1);
	box-shadow: 0 8px 24px rgba(30,27,46,0.25);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.toast-icon { font-size: 22px; flex-shrink: 0; }
.toast-content { flex: 1; }
.toast-title { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.toast-body { font-size: 11px; color: #8B87A8; line-height: 1.4; }
.toast-action { font-size: 11px; font-weight: 700; color: var(--accent-mid); white-space: nowrap; cursor: pointer; }

/* 공통 팝업 요소 */
.popup-status.error:before {display:block; content:""; margin:0 auto 8px; width:80px; height:80px; background:url('../images/icon/icon_error.png') no-repeat center / cover;}
.popup-status.info:before {display:block; content:""; margin:0 auto 8px; width:80px; height:80px; background:url('../images/icon/icon_info.png') no-repeat center / cover;}
.popup-status.warning:before {display:block; content:""; margin:0 auto 8px; width:80px; height:80px; background:url('../images/icon/icon_warning2.png') no-repeat center / cover;}
.popup-icon { font-size: 40px; text-align: center; margin-bottom: 10px; }
.popup-title { font-size: 16px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 6px; letter-spacing: -0.3px; }
.popup-body { font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.6; margin-bottom: 20px; }

.save-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #F0EEF9; }
.save-item:last-of-type { border-bottom: none; }
.save-badge { font-size: 10px; padding: 3px 8px; border-radius: 8px; font-weight: 500; white-space: nowrap; }
.badge-s { background: #E6F1FB; color: #0C447C; }
.badge-b { background: #EAF3DE; color: #27500A; }
.save-content { font-size: 12px; color: var(--text); }

.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.cat-item {
	background: var(--bg);
	border-radius: 12px;
	padding: 14px 12px;
	border: 1.5px solid var(--border);
	cursor: pointer;
	text-align: center;
	transition: all 0.15s;
}
.cat-item:active { transform: scale(0.96); }
.cat-item.selected { border-color: var(--accent); background: var(--accent-light); }
.cat-item-icon { font-size: 22px; margin-bottom: 5px; }
.cat-item-name { font-size: 12px; font-weight: 500; color: var(--text); }

.btn-row { display: flex; gap: 8px; }
.btn-confirm {
	flex: 1;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 13px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	font-family: 'Noto Sans KR', sans-serif;
	transition: transform 0.15s;
}
.btn-confirm:active { transform: scale(0.97); }
.btn-cancel {
	flex: 1;
	background: #F0EEF9;
	color: var(--text-muted);
	border: none;
	border-radius: 12px;
	padding: 13px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	font-family: 'Noto Sans KR', sans-serif;
	transition: transform 0.15s;
}
.btn-cancel:active { transform: scale(0.97); }
.btn-full {
	width: 100%;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 13px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	font-family: 'Noto Sans KR', sans-serif;
	transition: transform 0.15s;
	margin-bottom: 8px;
}
.btn-full:active { transform: scale(0.97); }
.btn-full.secondary { background: #F0EEF9; color: var(--text-muted); font-weight: 500; margin-bottom: 0; }

.stat-row { display: flex; gap: 8px; margin-bottom: 16px; }
.stat-box { flex: 1; background: var(--bg); border-radius: 10px; padding: 10px; text-align: center; }
.stat-box-label { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.stat-box-value { font-size: 14px; font-weight: 700; font-family: 'DM Sans', sans-serif; }
.stat-box-value.over { color: var(--red); }
.stat-box-value.ok { color: var(--green); }

/* loading */
.loader {
	margin-top: 60px;
	display: flex;
	gap: 8px;
	align-items: center;
}
.loader-dot {
	width: 8px; height: 8px;
	background: var(--accent);
	border-radius: 50%;
	animation: loaderBounce 1.2s infinite;
}
.loader-dot:nth-child(2) { animation-delay: 0.2s; background: var(--accent-mid); }
.loader-dot:nth-child(3) { animation-delay: 0.4s; background: #C8C4E0; }

/* 플로팅 버튼 — position: absolute, phone 기준 5시 방향 고정 */
.float-btn {
	position: absolute;
	bottom: 100px;
	right: 18px;
	width: 60px; height: 60px;
	background: linear-gradient(135deg, var(--accent), var(--accent-mid));
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(108,99,214,0.45);
	cursor: pointer;
	text-decoration: none;
	z-index: 20;
	border: 2.5px solid rgba(255,255,255,0.25);
	transition: transform 0.2s, box-shadow 0.2s;
}
.float-btn:active { transform: scale(0.92); }
.float-pulse {
	position: absolute;
	top: -2px; right: -2px;
	width: 14px; height: 14px;
	background: #1D9E75;
	border-radius: 50%;
	border: 2.5px solid var(--bg);
	animation: floatPulse 2s infinite;
}
@keyframes floatPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.3); opacity: 0.7; }
}