/*
 * simple 테마 — 헤더 인증 영역 (회차 4 Phase E 2026-06-10).
 * 대상: templates/front/themes/simple/_header.html 의 .site-auth-nav 블록.
 * 이유: 디자이너 simple 테마에는 로그인/회원가입 동선이 없었음 → kainuri 가 추가.
 * 디자이너 원본 (main.css) 은 수정하지 않고 본 파일에서만 정의.
 */

.main_header .site-auth-nav {
	position: absolute;
	right: calc(2vw + 3rem);   /* 고정 햄버거(right:2vw, width 2rem)와 항상 1rem 이상 간격 — 좁은 화면에서 겹침 방지 */
	top: 22px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	z-index: 5;
}

.main_header .site-auth-link,
.main_header .site-search-link {
	color: #fff;
	text-decoration: none;
	padding: 0.25rem 0.5rem;
	transition: opacity 0.2s;
	display: inline-flex;
	font-size: .85rem;
	font-weight: 400;
}
.main_header .site-auth-link:hover,
.main_header .site-search-link:hover {
	opacity: 0.75;
}
.main_header .site-search-link .material-symbols-outlined { font-size: 1.6rem; vertical-align: middle; }
.main_header.scrolled .site-search-link,
.main_header.on .site-search-link { color: #333; }

.main_header .site-auth-sep {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.85rem;
}

/* 로그인 사용자 dropdown */
.main_header .site-auth-user {
	position: relative;
}
.main_header .site-auth-user-btn {
	background: transparent;
	color: #fff;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9rem;
	display: inline-flex;
    align-items: center;
    justify-content: space-between;
}
.main_header .site-auth-user-btn:hover {
	background: rgba(255, 255, 255, 0.1);
}
.main_header .site-auth-user-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 180px;
	background: #fff;
	border: 1px solid #e1e4e8;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	list-style: none;
	margin: 0;
	z-index: 100;
}
.main_header .site-auth-user-menu li a,
.main_header .site-auth-user-menu li button {
	display: block;
	padding: 0.45rem 1rem;
	color: #333;
	text-decoration: none;
	background: transparent;
	border: none;
	width: 100%;
	text-align: left;
	font-size: 0.85rem;
	cursor: pointer;
}
.main_header .site-auth-user-menu li a:hover,
.main_header .site-auth-user-menu li button:hover {
	background: #f5f5f5;
}
.main_header .site-auth-user-menu hr {
	margin: 0.5rem 0;
	border: 0;
	border-top: 1px solid #e1e4e8;
}

/* 헤더 scrolled(스크롤) / on(hover) 상태 — 흰 배경 위라 텍스트 색 반전 */
.main_header.scrolled .site-auth-link,
.main_header.on .site-auth-link,
.main_header.scrolled .site-auth-user-btn,
.main_header.on .site-auth-user-btn {
	color: #333;
}
.main_header.scrolled .site-auth-user-btn,
.main_header.on .site-auth-user-btn {
	border-color: #ccc;
}
.main_header.scrolled .site-auth-sep,
.main_header.on .site-auth-sep {
	color: #999;
}

/* 모바일 — 작은 화면에서는 햄버거 메뉴와 겹치지 않도록 살짝 옆으로 */
@media (max-width: 768px) {
	.main_header .site-auth-nav {
		right: 70px;
		font-size: 0.85rem;
	}
}

/* 모바일 — 로고(14rem)와 인증영역(로그인/사용자) 가로 겹침 방지.
   로고 축소 + 인증영역 컴팩트 + 로그인 사용자명 말줄임. (h1.logo 로 특정성 확보) */
@media (max-width: 600px) {
	.main_header h1.logo { width: 9.5rem; }
	.main_header .site-auth-nav { right: 60px; font-size: 0.8rem; gap: 0.2rem; }
	.main_header .site-auth-link { padding: 0.2rem 0.3rem; }
	.main_header .site-auth-user-btn { padding: 0.2rem 0.35rem; }
	.main_header .site-auth-user-btn > span:first-child {
		display: inline-block; max-width: 8ch;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
	}
}
@media (max-width: 400px) {
	.main_header h1.logo { width: 7.5rem; }
	.main_header .site-auth-nav { right: 56px; gap: 0.15rem; }
	.main_header .site-auth-user-btn > span:first-child { max-width: 5ch; }
	.main_header .site-search-link .material-symbols-outlined { font-size: 1.3rem; }   /* 검색은 항상 표시 — 초소형에선 아이콘만 살짝 축소 */
}