ANTOOZA-FRONTEND/app/styles/layout.module.scss

// ── 헤더 (Layout + Studio 공용) ──
// 헤더는 라이트 테마에서도 다크 고정 (amazon 방식) — --bg-head/--text-head/--head-* 는 tokens/_colors.scss 에서 양 테마 동일 값
.header {
	background: var(--bg-head);
	border-bottom: 1px solid var(--border-default);

	// 1줄: 로고 + PC네비 + 중앙 검색 + 우측 아이콘
	.headerRow1 {
		display: flex;
		align-items: center;
		height: var(--header-h, 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: 1123.98px) {
			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;
		align-items: center;
		font-weight: 500;
		flex-shrink: 0;

		ul {
			display: flex;
			gap: 1rem;

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

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

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

	// 통합 검색 — 우측 아이콘 클러스터(headerActions) 내부, 장바구니 바로 좌측에 콤팩트 배치
	.searchBox {
		position: relative;
		flex: 0 1 300px;
		margin: 0;
		padding: 0;

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

	.searchInput {
		width: 100%;
		height: 36px;
		padding: 0 72px 0 12px;
		font-size: 0.875rem;
		color: var(--head-input-text);
		background: var(--head-input-bg);
		border: 1px solid var(--head-input-border);
		border-radius: 6px;
		transition: border-color 0.15s ease;

		&::placeholder {
			color: var(--head-input-placeholder);
		}

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

		&:focus {
			outline: none;
			border-color: var(--az-accent);
			-webkit-box-shadow: 0 0 0 1px var(--az-accent);
			box-shadow: 0 0 0 1px var(--az-accent);
		}
	}

	.searchKbd {
		position: absolute;
		top: 50%;
		right: 26px;
		transform: translateY(-50%);
		padding: 1px 6px;
		font-size: 11px;
		font-family: inherit;
		color: var(--head-input-placeholder);
		border: 1px solid var(--head-input-border);
		border-radius: 4px;
		pointer-events: none;
		white-space: nowrap;
	}

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

	.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;
		}
	}

	.themeBtn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: none;
		border-radius: 18px;
		background: transparent;
		color: var(--text-head);
		font-size: 1rem;
		cursor: pointer;

		svg {
			transition: transform 0.3s ease;
		}

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

			svg {
				transform: rotate(-20deg) scale(1.1);
			}
		}

		@media (prefers-reduced-motion: reduce) {
			svg {
				transition: none;
			}

			&:hover svg {
				transform: none;
			}
		}
	}

	.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: 1123.98px) {
			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: 1123.98px) {
			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;
		}
	}

	// 지수 티커 스트립 — TradingView 임베드 컨테이너 규격만 (D0 §3-A 단기안, 실제 임베드는 후속)
	// 내용이 주입되기 전(:empty)에는 미표시
	.tickerStrip {
		height: var(--ticker-h, 32px);
		overflow: hidden;
		background: var(--bg-head);
		border-top: 1px solid var(--head-input-border);

		&:empty {
			display: none;
		}

		iframe {
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

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

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

// ── 접근성: 스킵 링크 (Tab 첫 포커스 시 노출) ──
.skipLink {
	position: fixed;
	top: -100px;
	left: 8px;
	z-index: 3000;
	padding: 8px 14px;
	border-radius: 4px;
	background: var(--az-accent);
	color: #201503;
	font-weight: 700;
	transition: top 0.15s ease;

	&:focus {
		top: 8px;
	}
}

// ── 메인 레이아웃 컨테이너 — WIDE fluid 3단 그리드 (max-width 없음) ──
// 브레이크포인트 4단: mobile <768 / tablet 768~1123.98 / desktop 1124~1535.98 / wide ≥1536
// (기존 min-width:1124 + max-width:1125 의 1124~1125px 이중 매칭 → 1123.98px 경계로 통일)
.container {
	display: grid;
	height: 100vh;
	height: 100dvh;
	grid-template-rows: auto 1fr auto;

	// desktop 이상: 좌 사이드바 + 메인 + 우 채팅 도크 (3열 기본 — 채팅은 상시)
	@media (min-width: 1124px) {
		grid-template-areas: "header header header" "aside main chat" "aside footer footer";
		grid-template-columns: var(--antooza-sidebar-width, var(--az-sidebar-w, 220px)) minmax(0, 1fr) var(--antooza-chat-width, var(--az-chat-w, 340px));
		transition: grid-template-columns 0.2s ease;
	}

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

	// 모바일/태블릿: 1열 (사이드바는 슬라이드 오버레이, 유틸 슬롯 미표시 — 페이지가 하단 적층 결정)
	@media (max-width: 1123.98px) {
		grid-template-areas: "header" "main" "footer";
		grid-template-columns: minmax(0, 1fr);
	}

	// 우 유틸 슬롯 제공 페이지: 4열 (aside + main + utility + chat, desktop 이상)
	&.hasUtility {
		@media (min-width: 1124px) {
			grid-template-areas: "header header header header" "aside main utility chat" "aside footer footer footer";
			grid-template-columns: var(--antooza-sidebar-width, var(--az-sidebar-w, 220px)) minmax(0, 1fr) var(--az-utility-w, 280px) var(--antooza-chat-width, var(--az-chat-w, 340px));
		}
	}

	// 사이드바 없는 변형 (관심종목 미노출 페이지) — 메인 + 우 채팅
	&.noAside {
		@media (min-width: 1124px) {
			grid-template-areas: "header header" "main chat" "footer footer";
			grid-template-columns: minmax(0, 1fr) var(--antooza-chat-width, var(--az-chat-w, 340px));
		}

		&.hasUtility {
			@media (min-width: 1124px) {
				grid-template-areas: "header header header" "main utility chat" "footer footer footer";
				grid-template-columns: minmax(0, 1fr) var(--az-utility-w, 280px) var(--antooza-chat-width, var(--az-chat-w, 340px));
			}
		}
	}

	> .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: 1123.98px) {
			position: fixed;
			top: var(--header-h, 56px);
			left: 0;
			width: min(320px, 85vw);
			height: calc(100vh - var(--header-h, 56px));
			height: calc(100dvh - var(--header-h, 56px));
			z-index: 1000;
			transform: translateX(-100%);
			border-right: 1px solid var(--border-default);
			box-shadow: none;
		}
	}

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

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

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

	// 우측 유틸 슬롯 (desktop 이상 전용 — mobile/tablet 은 미표시)
	> .utility {
		grid-area: utility;
		overflow-y: auto;
		background: var(--bg-page);
		border-left: 1px solid var(--border-default);

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

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

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

	// 하단 내용
	// - Mobile/Tablet (≤1123.98px): 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;
			}
		}
	}
}