/* index 템플릿: 문서(body) 스크롤을 쓰지 않고 .content 한 곳만 세로 스크롤한다. */
/* layers.css 순서를 따르도록 한다. 단독 링크 시 언레이어드가 되어 @layer feature 보다 우선한다. */
@layer layout {
	html:has(.simple-shell) {
		height: 100%;
		overflow: hidden;
	}

	body:has(.simple-shell) {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-height: 100dvh;
		min-height: unset;
		overflow: hidden;
	}

	.simple-shell {
		flex: 1 1 auto;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		row-gap: 0;
		width: 100%;
		min-height: 0;
		height: 100%;

		padding: 0;
		margin: 0 auto;

		/* background-color: var(--background); */
	}

	.simple-shell .header {
		margin-bottom: 0.5rem;
	}

	.simple-shell .header-hamburger {
		display: none;
	}

	.simple-shell .content {
		display: flex;
		flex-direction: column;
		gap: 0;
		/* 메인 플렉스 확장을 위해 콘텐츠 컨테이너 자체의 높이를 확보한다 */
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;
		height: auto;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* 본문 컨테이너에 z-index를 고정하면 내부 fixed 모달이 사이드바 레이어를 넘지 못해, 기본값(auto)으로 둔다. */
		z-index: auto;
	}

	@media (max-width: 1023px) {
		.simple-shell .content {
			/* 스티키 헤더가 정상 동작하도록 모바일에서는 가로만 클리핑을 피한다. */
			overflow-x: visible;
			overflow-y: auto;
		}
	}

	.simple-shell .main {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: 0;

		min-height: 0;
		padding: 0;
	}

	@media screen and (min-width: 768px) {
		.main {
			padding: 0 1.25rem 1.25rem;
		}

		.simple-shell .header {
			margin-bottom: 1.25rem;
		}
	}

	@media screen and (min-width: 1024px) {
		.simple-shell .content {
			/* 데스크탑에서도 본문이 뷰포트 높이를 채우도록 유지한다. */
			align-self: stretch;
			/* 데스크탑 기본을 펼침 사이드바 기준으로 고정해 첫 페인트부터 레이아웃을 맞춘다. */
			padding: 1.25rem 1.25rem 1.25rem;
		}

		.main {
			padding: 0px;
			/* background-color: var(--background); */
		}
	}
}