ANTOOZA-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-head);
		flex-shrink: 0;

		&:hover,
		&:focus,
		&:active {
			color: #fff;
		}

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

	// 로고
	.logo {
		flex-basis: 137px;
		font-size: inherit;
		padding-right: 20px;
		flex-shrink: 0;
		color: var(--text-head);
		transition: color 0.15s ease;
		text-align: center;

		&:hover,
		&:focus,
		&:focus-visible {
			color: #fff;
		}
	}

	// 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);
		}
	}

	.cartBtn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 18px;
		background: transparent;
		color: var(--text-head);
		font-size: 1rem;

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

	.cartBadge {
		position: absolute;
		top: -2px;
		right: -2px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background: #ef4444;
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

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

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

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

		@media (max-width: 1125px) {
			display: flex;
			align-items: center;
			background: rgba(0, 0, 0, 0.12);
			border-top: 1px solid rgba(0, 0, 0, 0.18);
		}
	}

	// 좌/우 스크롤 화살표 (모바일 전용, 내 정보 nav 패턴)
	.scrollArrow {
		display: none;

		@media (max-width: 1125px) {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: 32px;
			height: 40px;
			border: none;
			background: transparent;
			color: var(--text-head);
			font-size: 0.8125rem;
			cursor: pointer;

			&:active {
				color: #fff;
			}
		}
	}

	.mobileTabScroll {
		display: flex;
		flex: 1;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0;
		gap: 0;

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

	.mobileTab {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px 14px;
		font-size: 0.875rem;
		font-weight: 500;
		white-space: nowrap;
		color: var(--text-head);
		text-decoration: none;
		position: relative;
		transition: color 0.15s, font-weight 0.15s;

		&:hover {
			color: #fff;
		}
	}

	.mobileTabActive {
		color: #fff;
		font-weight: 700;
		background: transparent;

		&::after {
			content: '';
			position: absolute;
			left: 12px;
			right: 12px;
			bottom: 0;
			height: 3px;
			background: #fff;
			border-radius: 2px 2px 0 0;
		}
	}

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

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

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

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

	@media (min-width: 1124px) and (prefers-reduced-motion: reduce) {
		transition: none;
	}

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

	// 채널 기능 OFF (NEXT_PUBLIC_FEATURE_CHANNEL=false): 사이드바 없는 1열 레이아웃
	&.noAside {
		@media (min-width: 1124px) {
			grid-template-areas: "header" "main" "footer";
			grid-template-columns: minmax(0, 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);
			height: calc(100dvh - 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;
		}
	}

	// 하단 내용
	// - Mobile/Tablet (≤1125px): Amazon 스타일 — 중앙 정렬 링크 줄 + 별도 카피라이트 줄
	// - PC (≥1124px): 한 줄 — 좌측 링크 나열 + 우측 카피라이트
	> .footer {
		grid-area: footer;
		padding: 16px 12px;
		text-align: center;
		font-size: 0.75rem;
		color: var(--text-muted);

		.footerLinks {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 8px 18px;

			a {
				color: var(--text-secondary);
				text-decoration: none;
				transition: color 0.15s ease;

				&:hover,
				&:focus {
					color: var(--text-primary);
					text-decoration: underline;
				}
			}
		}

		.footerCopy {
			margin: 10px 0 0;
			font-size: 0.6875rem;
			color: var(--text-muted);
		}

		@media (max-width: 576px) {
			padding: 14px 10px;

			.footerLinks {
				gap: 6px 14px;
				font-size: 0.6875rem;
			}

			.footerCopy {
				margin-top: 8px;
			}
		}

		// PC: 한 줄 레이아웃 — 좌측 링크 + 우측 카피라이트
		// 높이 32px — 좌측 사이드바 .channel-sidebar__icon-btn 와 정렬
		@media (min-width: 1124px) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			height: 32px;
			padding: 0 16px;
			text-align: left;
			font-size: 0.6875rem;

			.footerLinks {
				flex-wrap: nowrap;
				justify-content: flex-start;
				gap: 0 18px;
			}

			.footerCopy {
				margin: 0;
				white-space: nowrap;
			}
		}
	}
}