@import "components/login.css";
@import "components/todos.css";
@import "components/quotes.css";

:root {
	/* 배경 사진 위에 얹히는 패널의 공통 스타일 */
	--glass-bg: rgba(0, 0, 0, 0.35);
	--glass-bg-soft: rgba(255, 255, 255, 0.15); /* 패널 위에 다시 얹히는 버튼용 */
	--glass-border: 1px solid rgba(255, 255, 255, 0.35);
	--glass-blur: blur(10px);

	--radius-lg: 25px;
	--radius-md: 15px;

	/* 패널 없이 사진 바로 위에 놓이는 글자용 */
	--text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	--placeholder: rgba(255, 255, 255, 0.7);
}

.hidden {
	display: none !important ;
}

body {
	margin: 0; /* 기본 8px 마진을 지워야 배경이 화면을 꽉 채운다 */
	padding: 10px;
	box-sizing: border-box;
	color: white;
	width: 100%;
	min-height: 100vh; /* 할 일이 많아지면 잘리지 않고 늘어나도록 */

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	gap: 20px;
}

/* 배경 사진을 눌러주는 스크림. 상하단을 조금 더 어둡게 해서
   상태바와 명언이 앉는 자리를 확보한다.
   주의: body에 transform/filter/opacity를 주면 스택 컨텍스트가 생겨
   음수 z-index 배경이 콘텐츠를 덮어버린다. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.55),
		rgba(0, 0, 0, 0.3) 35%,
		rgba(0, 0, 0, 0.3) 65%,
		rgba(0, 0, 0, 0.6)
	);
}

body #bg-image {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	object-fit: cover;
	z-index: -2;
}
#status-bar {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

#clock-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#clock {
	margin: 0px;
	font-size: 4rem;
	font-weight: 600;
}

.date {
	font-size: 20px;
}

/* 패널 없이 사진 위에 바로 놓이는 글자들 */
#clock,
.date,
#greeting,
#quotes span {
	text-shadow: var(--text-shadow);
}