dpot-frontend/app/styles/layout.module.scss

// ── 헤더 (Layout + Studio 공용) ──
.header {
	background: var(--bg-head);
	border-bottom: 1px solid var(--border-default);

	// 1줄: 로고 + PC네비 + 우측 아이콘
	.headerRow1 {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 16px;
	}

	// 햄버거 메뉴 (모바일 전용)
	.hamburger {
		display: none;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: none;
		background: transparent;
		cursor: pointer;
		font-size: 1.25rem;
		color: var(--text-primary);
		flex-shrink: 0;

		&:hover {
			color: var(--fg-default);
		}

		@media (max-width: 1125px) {
			display: flex;
		}
	}

	// 로고
	.logo {
		flex-basis: 137px;
		font-size: inherit;
		padding-right: 20px;
		flex-shrink: 0;
	}

	// PC 네비게이션 (모바일에서 숨김)
	.pcNav {
		display: flex;
		flex-grow: 1;
		align-items: center;
		font-weight: 500;

		ul {
			display: flex;
			gap: 1rem;

			li {
				a, button {
					color: var(--text-head);

					&:hover {
						font-weight: 700;
						text-decoration: underline;
					}
				}
			}
		}

		@media (max-width: 1125px) {
			display: none;
		}
	}

	// 우측 아이콘 영역
	.headerActions {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-left: auto;
	}

	.chargeBtn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px;
		border-radius: 16px;
		background: transparent;
		font-size: 0.75rem;
		font-weight: 700;
		cursor: pointer;
		color: var(--text-head);
		white-space: nowrap;

		&:hover {
			outline: 1px solid var(--outline-default);
			background: var(--bg-icon);
		}
	}

	.authLink {
		font-size: 0.875rem;
		font-weight: 500;

		&:hover {
			text-decoration: underline;
		}
	}

	// 2줄: 모바일 가로 스크롤 탭
	.headerRow2 {
		display: none;

		@media (max-width: 1125px) {
			display: block;
			border-top: 1px solid var(--border-default);
		}
	}

	.mobileTabScroll {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		cursor: grab;
		padding: 0 8px;
		gap: 4px;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.mobileTab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 8px 12px;
		font-size: 0.8125rem;
		font-weight: 500;
		white-space: nowrap;
		border-radius: 8px;
		color: var(--text-muted);
		text-decoration: none;
		flex-shrink: 0;
		transition: background 0.15s, color 0.15s;

		&:hover {
			background: var(--bg-subtle-hover);
		}
	}

	.mobileTabActive {
		background: var(--fg-default);
		color: var(--bg-page);
	}

	// 모바일 헤더 패딩 조정
	@media (max-width: 1125px) {
		.headerRow1 {
			padding: 0 8px;
		}

		.logo {
			flex-basis: auto;
			padding-right: 0;
		}
	}
}

// ── 메인 레이아웃 컨테이너 ──
.container {
	display: grid;
	height: 100vh;
	grid-template-rows: auto 1fr auto;

	// PC: 좌측 채널 사이드바 + 메인 (2열)
	@media (min-width: 1124px) {
		grid-template-areas: "header header" "aside main" "aside footer";
		grid-template-columns: 220px 1fr;
	}

	// 모바일/태블릿
	@media (max-width: 1125px) {
		grid-template-areas: "header" "main" "footer";
		grid-template-columns: 1fr;
	}

	> .header {
		grid-area: header;
	}

	// 좌측 사이드바
	> .aside {
		grid-area: aside;
		overflow-y: auto;
		transition: transform 0.3s ease;
		background: var(--bg-page);

		@media (min-width: 1124px) {
			position: relative;
			transform: translateX(0);
			border-right: 1px solid var(--border-default);
		}

		// 모바일: 왼쪽에서 슬라이드
		@media (max-width: 1125px) {
			position: fixed;
			top: 56px;
			left: 0;
			width: min(320px, 85vw);
			height: calc(100vh - 56px);
			z-index: 1000;
			transform: translateX(-100%);
			border-right: 1px solid var(--border-default);
			box-shadow: none;
		}
	}

	// 사이드바 열림 상태
	&.sidebarOpen {
		> .aside {
			@media (max-width: 1125px) {
				transform: translateX(0);
				box-shadow: 4px 0 12px var(--shadow-color);
			}
		}

		> .overlay {
			@media (max-width: 1125px) {
				display: block;
			}
		}
	}

	// 메인 내용
	> .main {
		position: relative;
		grid-area: main;
		overflow-y: auto;
		border-bottom: 1px solid var(--border-default);
	}

	// 오버레이 (모바일)
	> .overlay {
		display: none;

		@media (max-width: 1125px) {
			position: fixed;
			top: 56px;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--overlay-color);
			z-index: 999;
		}
	}

	// 하단 내용
	> .footer {
		grid-area: footer;
		font-size: 0.688rem;
		padding: 4px;

		@media (max-width: 576px) {
			> ol {
				padding: 0 0 2px 0;
			}
		}

		ol {
			display: flex;
			flex-flow: row;
			justify-content: space-between;

			li {
				&:not(:last-of-type) {
					padding: 0 5px;

					&:hover {
						text-decoration: underline;
						font-weight: 600;
					}
				}

				&:last-of-type {
					flex-grow: 0;
					margin-left: auto;
				}
			}
		}
	}
}