/**
 * PC 공통 레이아웃 뼈대 (재사용 기반).
 *
 * 구조: 왼쪽 사이드바 · 가운데(상단바 + 콘텐츠) · 오른쪽 패널 · 맨 아래 푸터.
 * 1024px 이상에서 사이드바·패널·푸터를 화면에 고정하고 상단바는 가운데 열 위쪽에 붙여 두며,
 * 가운데 콘텐츠만 문서 스크롤로 움직입니다.
 *
 * 1023px 이하(모바일 구조)에서는 PC 영역을 숨기고 모바일 헤더(위에 붙음)·하단 바(아래 고정)를 씁니다.
 *
 * 사이트 토큰에서 아래 크기를 정의해야 합니다.
 *   --sidebar-w(사이드바 너비), --panel-w(패널 너비), --footer-h(푸터 높이), --topbar-h(상단바 높이)
 *   --header-h(모바일 헤더 높이), --bottom-bar-h(모바일 하단 바 높이)
 * 색·글자·간격 같은 모양은 사이트 전용 레이아웃 CSS에서 정합니다.
 *
 * @package udongsari
 */

/* 본문 바로가기: 평소에는 화면 밖에 두고 키보드 포커스를 받으면 나타납니다. */
.uds-base-skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: calc(var(--z-toast) + 1);
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-surface);
	color: var(--color-text-strong);
	transform: translateY(-200%);
}

.uds-base-skip-link:focus {
	transform: none;
}

/*
 * 로그인한 관리자에게 보이는 WordPress 관리자 바 높이(방문자에게는 0).
 * WordPress 기본: 783px 이상 32px, 601~782px 46px(위에 고정), 600px 이하는 스크롤과 함께 사라짐.
 */
@media (min-width: 783px) {
	:root:has(body.admin-bar) {
		--uds-base-admin-bar-h: 32px;
	}
}

@media (min-width: 601px) and (max-width: 782px) {
	:root:has(body.admin-bar) {
		--uds-base-admin-bar-h: 46px;
	}
}

/* 바로가기로 이동한 본문 영역 자체에는 외곽선을 그리지 않습니다(안쪽 링크·버튼에는 그대로 표시). */
.uds-base-layout__main:focus {
	outline: none;
}

@media (min-width: 1024px) {
	/* 키보드로 이동할 때 고정 상단바·푸터에 요소가 가려지지 않게 합니다. */
	html {
		scroll-padding-top: calc(var(--topbar-h) + var(--uds-base-admin-bar-h, 0px));
		scroll-padding-bottom: var(--footer-h);
	}

	.uds-base-layout {
		min-height: calc(100vh - var(--uds-base-admin-bar-h, 0px));
		padding-right: var(--panel-w);
		padding-bottom: var(--footer-h);
		padding-left: var(--sidebar-w);
	}

	.uds-base-layout__sidebar {
		position: fixed;
		top: var(--uds-base-admin-bar-h, 0px);
		bottom: var(--footer-h);
		left: 0;
		z-index: var(--z-sticky);
		display: flex;
		flex-direction: column;
		width: var(--sidebar-w);
		overflow-y: auto;
	}

	.uds-base-layout__panel {
		position: fixed;
		top: var(--uds-base-admin-bar-h, 0px);
		right: 0;
		bottom: var(--footer-h);
		z-index: var(--z-sticky);
		display: flex;
		flex-direction: column;
		width: var(--panel-w);
	}

	.uds-base-layout__main {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - var(--footer-h) - var(--uds-base-admin-bar-h, 0px));
	}

	.uds-base-layout__topbar {
		position: sticky;
		top: var(--uds-base-admin-bar-h, 0px);
		z-index: calc(var(--z-sticky) - 1);
	}

	.uds-base-layout__content {
		flex: 1 0 auto;
	}

	.uds-base-layout__footer {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--z-sticky);
		min-height: var(--footer-h);
	}

	/* 모바일 구조 전용 영역 */
	.uds-base-layout__mobile-header,
	.uds-base-layout__mobile-footer,
	.uds-base-layout__bottom-bar {
		display: none;
	}
}

@media (max-width: 1023px) {
	/* 키보드로 이동할 때 위에 붙은 헤더에 요소가 가려지지 않게 합니다. */
	html {
		scroll-padding-top: calc(var(--header-h) + var(--uds-base-admin-bar-h, 0px));
	}

	/* PC 구조 전용 영역 */
	.uds-base-layout__sidebar,
	.uds-base-layout__panel,
	.uds-base-layout__footer {
		display: none;
	}

	.uds-base-layout__mobile-header {
		position: sticky;
		top: var(--uds-base-admin-bar-h, 0px);
		z-index: var(--z-sticky);
	}

	/* 하단 바가 있는 화면: 바와 기기 안전 영역(아이폰 홈 표시줄 등, 없으면 0)만큼 본문 아래 여백 */
	.uds-base-layout--has-bottom-bar {
		padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
	}

	html:has(.uds-base-layout--has-bottom-bar) {
		scroll-padding-bottom: var(--bottom-bar-h);
	}

	.uds-base-layout__bottom-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--z-sticky);
	}
}