/* Login Page Styles - Flavolink Design */
:root {
	--login-orange: #F05A22;
	--login-dark: #4E4740;
	--login-border: #E8DDCE;
	--login-beige: #FFFFFF;
	--mobile-header-orange: #EA5504;
}

.login-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	padding: 0;
}

/* 로그인 페이지는 main 헤더 프래그먼트를 씀 — 데스크톱에서만 로그인 링크 강조 */
.login-page .login-header-utils a[href="/login"] {
	color: var(--login-orange);
	font-weight: 600;
}
.login-page .login-header-utils a[href="/login"]:hover {
	opacity: 0.92;
}

/* Header */
.login-header-inner {
	max-width: var(--layout-max-width);
	margin: 0 auto;
	padding: 1rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.login-header-left {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.login-header-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.login-header-logo img {
	height: 2rem;
	width: auto;
	display: block;
}

.login-header-nav {
	display: flex;
	gap: 2rem;
}

.login-header-nav a {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--login-dark);
	text-decoration: none;
}

.login-header-nav a:hover {
	color: var(--login-orange);
}

.login-header-utils {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.login-header-link {
	font-size: 0.9rem;
	color: var(--login-dark);
	text-decoration: none;
}

.login-header-link:hover, .login-header-link.active {
	color: var(--login-orange);
}

.login-header-divider {
	color: #9B8E83;
	font-size: 0.8rem;
}

.login-header-logout-form {
	display: inline;
}

.login-header-logout {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.9rem;
	padding: 0;
}

.login-header-logout:hover {
	color: var(--login-orange);
}

.login-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	background: #9B8E83;
	border-radius: 50%;
	vertical-align: middle;
}


.login-header-text {
	font-size: 0.9rem;
}

.login-header-mypage-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.login-header-mypage-avatar {
	display: none;
}

.login-header-icon svg {
	color: white;
}

/* Main Content */
.login-main {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3rem 1rem;
}

.login-container {
	width: 100%;
	padding-top: 3rem;
	max-width: 440px;
}

.login-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--login-orange);
	text-align: center;
	margin-bottom: 2rem;
}

/* Alerts */
.alert {
	padding: 0.875rem 1rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}

.alert-error {
	background: #FDEDEC;
	color: #C0392B;
}

.alert-success {
	background: #E8F8F5;
	color: #1E8449;
}

/* Form */
.login-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-group label {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--login-dark);
}

.form-group input {
	padding: 0.875rem 1rem;
	border: 2px solid var(--login-border);
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
	background: white;
	transition: border-color 0.2s;
}

.form-group input:focus {
	outline: none;
	border-color: var(--login-orange);
}

.form-group input::placeholder {
	color: #BDC3C7;
}

/* Checkboxes */
.form-options {
	display: flex;
	justify-content: flex-end;
	gap: 1.5rem;
	margin: 0.5rem 0;
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--login-dark);
}

.checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--login-orange);
	cursor: pointer;
}

.checkbox-text {
	user-select: none;
}

.login-divider {
	width: 150%;
	margin-left: -25%;
	height: 2px;
	background: var(--login-border);
	margin-bottom: 1rem;
}

/* Login Button - Dark Grey */
.btn-login {
	width: 100%;
	padding: 1rem;
	font-size: 1rem;
	font-weight: 600;
	background: #3D3833;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 0.5rem;
	transition: background 0.2s;
}

.btn-login:hover {
	background: #444444;
}

/* Account Recovery Links */
.login-links {
	text-align: center;
	margin-top: 1rem;
	font-size: 0.9rem;
}

.login-links a, .login-links .login-link-btn {
	color: var(--login-dark);
	text-decoration: none;
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
	padding: 0;
}

.login-links a:hover, .login-links .login-link-btn:hover {
	color: var(--login-orange);
}

.link-divider {
	margin: 0 0.5rem;
	color: var(--login-border);
}

/* Membership Prompt - Speech Bubble */
.membership-prompt {
	margin-top: 2.5rem;
	padding: 1.5rem;
	background: var(--login-beige);
	border: 2px solid var(--login-border);
	border-radius: 20px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* Speech bubble triangle (bottom-left) */
.membership-prompt::before {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 30px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--login-border);
}

.membership-prompt::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 32px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--login-beige);
}

.btn-signup {
	flex-shrink: 0;
	padding: 1.75rem 1.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	background: var(--login-orange);
	color: white;
	border: none;
	border-radius: 4px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	transition: background 0.2s;
}

.btn-signup:hover {
	background: #D35400;
}

.membership-text {
	flex: 1;
}

.membership-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--login-orange);
	margin-bottom: 0.25rem;
}

.membership-desc {
	font-size: 0.85rem;
	color: #3D3833;
	opacity: 0.9;
	line-height: 1.5;
}

/* Layer Popup Modal */
.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.modal-open {
	opacity: 1;
	visibility: visible;
}

.modal-popup {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	width: 100%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	padding: 1.5rem 1.75rem;
}

.modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	border: none;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--login-dark);
	cursor: pointer;
	padding: 0;
	opacity: 0.7;
}

.modal-close:hover {
	opacity: 1;
	color: var(--login-orange);
}

.modal-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--login-orange);
	margin-bottom: 1.25rem;
	padding-right: 2rem;
}

.modal-form .form-group {
	margin-bottom: 1rem;
}

.modal-result {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	font-size: 0.9rem;
	min-height: 1.5em;
}

.modal-result-loading {
	color: var(--login-dark);
	opacity: 0.8;
}

.modal-result-success {
	background: #E8F8F5;
	color: #1E8449;
}

.modal-result-error {
	background: #FDEDEC;
	color: #C0392B;
}

.modal-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.btn-modal-submit {
	flex: 1;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	font-weight: 600;
	background: var(--login-orange);
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s;
}

.btn-modal-submit:hover {
	background: #D35400;
}

.btn-modal-cancel {
	flex: 1;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	font-weight: 500;
	background: #f0f0f0;
	color: var(--login-dark);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s;
}

.btn-modal-cancel:hover {
	background: #e0e0e0;
}

/* 모바일 햄버거 메뉴 (header-with-mobile) - fixed로 히어로 이미지 위 클릭 가능 */
.header-with-mobile {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	background: rgba(255, 255, 255, 0.98);
}
/* backdrop-filter는 inner에만 - 오버레이/패널이 뷰포트 전체 커버되도록 */
.header-with-mobile .login-header-inner {
	backdrop-filter: blur(8px);
}

/* fixed 헤더 사용 시 본문 상단 여백 */
/* body:has(.header-with-mobile) {
	padding-top: 70px;
} */

.header-mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	background: #FFFFFF;
	border: 1px solid var(--login-border);
	border-radius: 8px;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: background 0.2s;
}

.header-mobile-toggle:hover {
	background: #F5F5F5;
}

.header-mobile-toggle .toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--login-dark);
	border-radius: 1px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.header-mobile-toggle.open .toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.header-mobile-toggle.open .toggle-bar:nth-child(2) {
	opacity: 0;
}

.header-mobile-toggle.open .toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.header-mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	cursor: pointer;
}

.header-mobile-overlay.open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.header-mobile-panel {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1101;
	width: 280px;
	max-width: 90vw;
	min-height: 100vh;
	background: #FFFFFF;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
	padding: 4.5rem 1.5rem 2rem; /* 상단: 헤더 높이 확보 */
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.header-mobile-panel.open {
	transform: translateX(0);
}

.header-mobile-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 1.75rem;
	line-height: 1;
	font-weight: 300;
	color: var(--login-dark);
	background: transparent;
	border: 1px solid var(--login-border);
	border-radius: 50%;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.header-mobile-close:hover {
	color: var(--login-orange);
	background: rgba(240, 90, 34, 0.08);
	border-color: var(--login-orange);
}

.header-mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--login-border);
}

.header-mobile-nav a {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--login-dark);
	text-decoration: none;
	padding: 1.125rem 0;
	min-height: 56px;
	display: flex;
	align-items: center;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
}

.header-mobile-nav a:hover, .header-mobile-nav a:active {
	color: var(--login-orange);
}

.header-mobile-nav a.active {
	color: var(--login-orange);
	font-weight: 600;
	background: rgba(230, 126, 34, 0.1);
	border-radius: 6px;
	padding-left: 1rem;
	padding-right: 1rem;
}

.header-mobile-nav a.header-mobile-sub.active {
	padding-left: 1.5rem;
}

.header-mobile-nav a.header-mobile-sub {
	padding-left: 1.25rem;
	font-size: 0.95rem;
}

.header-mobile-utils {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.header-mobile-utils .login-header-link {
	font-size: 1rem;
	padding: 1.125rem 0;
	min-height: 56px;
	display: flex;
	align-items: center;
	color: var(--login-dark);
	text-decoration: none;
}

.header-mobile-utils .login-header-link:hover, .header-mobile-utils .login-header-link.active
	{
	color: var(--login-orange);
}

.header-mobile-utils .login-header-logout-form {
	display: block;
	width: 100%;
	margin: 0;
}

.header-mobile-utils .login-header-logout {
	font-size: 1rem;
	padding: 1.125rem 0;
	min-height: 56px;
	display: flex;
	align-items: center;
	width: 100%;
	text-align: left;
	color: var(--login-dark);
	text-decoration: none;
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
}

.header-mobile-utils .login-header-logout:hover {
	color: var(--login-orange);
}

.header-mobile-utils .login-header-greeting {
	padding: 1.125rem 0;
	font-size: 1rem;
	color: var(--login-dark);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.header-mobile-utils .login-header-greeting .login-header-icon {
	flex-shrink: 0;
}

/* Responsive */
@media ( max-width : 768px) {
	.login-header-inner {
		flex-wrap: wrap;
		gap: 1rem;
	}
	.login-header-nav {
		order: 3;
		width: 100%;
		justify-content: center;
	}
	/* 로그인 페이지: 헤더 한 줄 유지 (로고 · 내비 · 유틸) */
	.login-page .login-header-inner {
		flex-wrap: nowrap;
		gap: 0.75rem;
	}
	.login-page .login-header-nav {
		order: 0;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-start;
	}
	.login-page .login-header-left {
		flex-shrink: 0;
		min-width: 0;
	}
	.login-page .login-header-utils {
		flex-shrink: 0;
	}
}

@media ( max-width : 640px) {
	/* 모바일: 오렌지 바 · 흰 햄버거 · 중앙 로고 · 우측 로그인(흰 칩) */
	.login-header.header-with-mobile {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow-x: hidden;
	}
	.header-with-mobile {
		background: var(--mobile-header-orange);
		backdrop-filter: none;
	}
	.header-with-mobile .login-header-inner {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		overflow-x: hidden;
		gap: 0;
		padding: 0.75rem 1rem;
		min-height: 3.25rem;
	}
	.header-with-mobile .login-header-left {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: auto;
		max-width: calc(100% - 7.5rem);
		pointer-events: none;
		box-sizing: border-box;
	}
	.header-with-mobile .login-header-left .login-header-logo {
		pointer-events: auto;
		display: flex;
		justify-content: center;
		max-width: 100%;
		min-width: 0;
	}
	.header-with-mobile .login-header-nav {
		display: none !important;
	}
	.header-with-mobile .login-header-logo img {
		height: 1.75rem;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		filter: brightness(0) invert(1);
	}
	.header-with-mobile .login-header-utils {
		display: flex !important;
		align-items: center;
		gap: 0;
		margin-left: auto;
		flex-shrink: 0;
		min-width: 0;
		z-index: 1;
	}
	.header-with-mobile .login-header-utils > .login-header-divider,
	.header-with-mobile .login-header-utils > .login-header-greeting,
	.header-with-mobile .login-header-utils > a[href="/signup"],
	.header-with-mobile .login-header-utils > a[href="/admin"],
	.header-with-mobile .login-header-utils > .login-header-logout-form {
		display: none !important;
	}
	.header-with-mobile .login-header-utils a[href="/login"] {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0.45rem 0.9rem;
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--mobile-header-orange) !important;
		background: #FFFFFF;
		border-radius: 6px;
		text-decoration: none;
		line-height: 1.2;
	}
	.header-with-mobile .login-header-utils .login-header-mypage-btn {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		background: transparent !important;
		min-width: 44px;
		width: 44px;
		height: 44px;
		border-radius: 50%;
	}
	.header-with-mobile .login-header-utils .login-header-mypage-label {
		display: none !important;
	}
	.header-with-mobile .login-header-utils .login-header-mypage-avatar {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #FFFFFF;
		color: #9B8E83;
	}
	.header-with-mobile .login-header-utils .login-header-mypage-avatar svg {
		width: 22px;
		height: 22px;
	}
	.header-mobile-toggle {
		display: flex;
		margin-left: 0;
		margin-right: auto;
		z-index: 1;
		order: -1;
		background: transparent;
		border: none;
		box-shadow: none;
	}
	.header-mobile-toggle:hover {
		background: rgba(255, 255, 255, 0.12);
	}
	.header-mobile-toggle .toggle-bar {
		background: #FFFFFF;
	}
	.header-mobile-overlay {
		display: block;
		background: rgba(80, 80, 80, 0.55);
	}
	.header-mobile-panel {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		bottom: auto;
		min-height: 0;
		height: auto;
		padding: 0;
		background: var(--mobile-header-orange);
		box-shadow: none;
		overflow: hidden;
		transform: translateY(-100%);
		transition: transform 0.3s ease;
	}
	.header-mobile-panel.open {
		transform: translateY(0);
	}
	.header-mobile-panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.75rem 1rem;
		min-height: 3.25rem;
	}
	.header-mobile-close {
		position: static;
		width: 44px;
		height: 44px;
		min-width: 44px;
		font-size: 1.75rem;
		font-weight: 300;
		color: #FFFFFF;
		background: transparent;
		border: none;
		border-radius: 8px;
		box-shadow: none;
	}
	.header-mobile-close:hover {
		color: #FFFFFF;
		background: rgba(255, 255, 255, 0.12);
		border: none;
	}
	.header-mobile-panel-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-width: 0;
		pointer-events: auto;
	}
	.header-mobile-panel-logo img {
		height: 1.75rem;
		width: auto;
		filter: brightness(0) invert(1);
	}
	.header-mobile-panel-actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-width: 4.5rem;
	}
	.header-mobile-panel-login {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.45rem 0.9rem;
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--mobile-header-orange) !important;
		background: #FFFFFF;
		border-radius: 6px;
		text-decoration: none;
		white-space: nowrap;
	}
	.header-mobile-panel-avatar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		text-decoration: none;
	}
	.header-mobile-panel-avatar-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #FFFFFF;
		color: #9B8E83;
	}
	.header-mobile-panel-avatar-inner svg {
		width: 22px;
		height: 22px;
	}
	.header-mobile-user-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem 1rem;
		padding: 0 1rem 0.75rem;
		margin: 0;
		border-bottom: none;
		position: relative;
		color: #FFFFFF;
	}
	.header-mobile-user-bar::after {
		content: '';
		position: absolute;
		left: 1rem;
		right: 1rem;
		bottom: 0;
		height: 1px;
		background: rgba(255, 255, 255, 0.9);
	}
	.header-mobile-user-bar-greeting {
		margin: 0;
		font-size: 0.875rem;
		font-weight: 500;
		flex: 1 1 40%;
		min-width: 0;
		line-height: 1.35;
	}
	.header-mobile-user-bar-links {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.35rem;
		flex: 0 0 auto;
		font-size: 0.875rem;
		font-weight: 500;
	}
	.header-mobile-user-bar-links a {
		color: #FFFFFF !important;
		text-decoration: none;
	}
	.header-mobile-user-bar-links a:hover,
	.header-mobile-user-bar-logout:hover {
		opacity: 0.92;
	}
	.header-mobile-user-bar-sep {
		opacity: 0.85;
		user-select: none;
	}
	.header-mobile-user-bar-logout-form {
		display: inline;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
	}
	.header-mobile-user-bar-logout {
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		font: inherit;
		font-size: inherit;
		font-weight: inherit;
		color: #FFFFFF !important;
		cursor: pointer;
		text-decoration: none;
	}
	.header-mobile-nav {
		margin: 0;
		padding: 0 1rem 1rem;
		border-bottom: none;
	}
	.header-mobile-nav a {
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: #FFFFFF !important;
		text-transform: uppercase;
		padding: 1.125rem 0;
		min-height: 52px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.9);
		background: none !important;
		border-radius: 0 !important;
	}
	.header-mobile-nav a:last-child {
		border-bottom: none;
	}
	.header-mobile-nav a:hover,
	.header-mobile-nav a:active {
		color: #FFFFFF !important;
		opacity: 0.92;
	}
	.header-mobile-nav a.active {
		color: #FFFFFF !important;
		font-weight: 800;
		padding-left: 0 !important;
	}
	.header-mobile-nav a.header-mobile-sub {
		font-size: 0.9rem;
		font-weight: 600;
		text-transform: none;
		letter-spacing: 0;
		padding-left: 0.75rem;
		opacity: 0.95;
		border-bottom-color: rgba(255, 255, 255, 0.5);
	}
	.header-mobile-utils {
		display: none !important;
	}
	/* 패널 open 시 오버레이 항상 표시 (배경 어둡게 + 클릭 시 닫힘) */
	header:has(.header-mobile-panel.open) .header-mobile-overlay,
	.login-header:has(.header-mobile-panel.open) .header-mobile-overlay {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.login-title {
		font-size: 1.75rem;
	}
	.login-page .login-divider {
		width: 100%;
		margin-left: 0;
	}
	.membership-prompt {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		text-align: left;
		gap: 1rem;
		padding: 1rem 1.25rem;
	}
	.membership-prompt .btn-signup {
		flex-shrink: 0;
		padding: 0.875rem 1rem;
		font-size: 0.85rem;
	}
	.membership-prompt .membership-text {
		flex: 1;
		min-width: 0;
		text-align: left;
	}
	.membership-text br {
		display: none;
	}
	.membership-prompt .membership-title {
		font-size: 0.9rem;
	}
	.membership-prompt .membership-desc {
		font-size: 0.78rem;
	}
	.membership-prompt::before, .membership-prompt::after {
		left: 1.25rem;
		transform: none;
	}
	.modal-popup {
		padding: 1.25rem 1.5rem;
	}
	.modal-actions {
		flex-direction: column;
	}
	.btn-modal-submit, .btn-modal-cancel {
		width: 100%;
		min-height: 44px;
	}
}

/* 로그인 페이지 모바일: 상단·패널의 로그인 버튼 숨김, 로고 화면 기준 중앙 */
@media (max-width: 640px) {
	.login-page .header-with-mobile .login-header-utils a[href="/login"] {
		display: none !important;
	}
	.login-page .header-mobile-panel-login {
		display: none !important;
	}
	.login-page .header-with-mobile .login-header-inner {
		display: grid;
		/* 오른쪽 여백을 조금 더 넓혀 로고가 시각적으로 왼쪽으로 옴 (햄버거 vs 빈 칸 무게 차) */
		grid-template-columns: 1fr auto 0.8fr;
		grid-template-rows: auto;
		align-items: center;
		gap: 0;
	}
	.login-page .header-with-mobile .header-mobile-toggle {
		order: unset;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		margin-right: 0;
	}
	.login-page .header-with-mobile .login-header-left {
		position: static;
		left: auto;
		transform: translateX(-0.05rem);
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: center;
		max-width: min(100%, 70vw);
		width: auto;
		flex-wrap: nowrap;
	}
	.login-page .header-with-mobile .login-header-utils {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin-left: 0;
		min-width: 0;
	}
	/* 햄버거 메뉴 패널 상단: 닫기 · 중앙 로고 · (로그인 칩 자리) */
	.login-page .header-mobile-panel-head {
		display: grid;
		/* 닫기 버튼 쪽이 더 넓어 보이므로 오른쪽 고정 칸을 살짝 줄여 로고를 왼쪽으로 */
		grid-template-columns: 48px 1fr 36px;
		grid-template-rows: auto;
		align-items: center;
		gap: 0.5rem;
		justify-content: stretch;
	}
	.login-page .header-mobile-close {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}
	.login-page .header-mobile-panel-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		transform: translateX(-0.35rem);
		flex: unset;
	}
	.login-page .header-mobile-panel-actions {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		min-width: 44px;
	}
}