/* --- 회원관련 CSS --- */
:root {
    --primary-color: #1B498C; /* 에어비앤비 핑크 */
    --primary-hover: #1e3c72;
    --text-color: #222222;
    --sub-text-color: #717171;
    --border-color: #B0B0B0;
    --border-radius: 8px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--color-primary: #1B498C;       /* 브랜드 메인 블루 */
	--color-primary-hover: #143a75; /* 메인 블루 호버 */
	--color-text-main: #333333;     /* 기본 텍스트 (진한 검정) */
	--color-text-sub: #999999;      /* 서브 텍스트 (회색) */
	--color-text-placeholder: #e0e0e0; /* 플레이스홀더 */
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: #fff;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}
.text-primary{
	color: var(--color-primary) !important;
}

.login-container {
    width: 100%;
    max-width: 480px; /* 모바일 시안 크기 제한 */
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* --- Header --- */
.login-container header {
    margin-bottom: 24px;
}
.login-container .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 32px;
    display: block;
}
.login-container h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
	text-align: center;
}
/* 체크박스 스타일 */
.member-checkbox-group {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}
.member-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.member-checkbox-hidden {
	display: none;
}

.member-checkbox-mark {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	transition: all 0.2s;
}

.member-checkbox-mark svg {
	width: 12px;
	height: 12px;
	display: none;
	stroke: white;
}

.member-checkbox-hidden:checked + .member-checkbox-mark {
	background-color: var(--primary-color);
	border-color: var(--primary-hover);
}

.member-checkbox-hidden:checked + .member-checkbox-mark svg {
	display: block;
}

.member-checkbox-text {
	font-size: var(--font-size-xs);
	font-weight: 500;
	color: #ddd;
}
.member-checkbox-text.is-checked {
	color: #666;
}
/* 탭 */
.member-hidden {
	display: none !important;
}
.member-logo-subtitle {
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: -0.025em;
	margin: 0;
}

/* --- [4] 탭 네비게이션 --- */
.member-tab-nav {
	display: flex;
	width: 100%;
	margin-bottom: 24px;
	border-bottom: 1px solid var(#e5e7eb);
}

.member-tab-item {
	width: 50%;
	text-align: center;
	padding-bottom: 12px;
	cursor: pointer;
	font-size: 15px;
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	color: #999999;
	font-weight: 500;
	transition: all 0.2s;
}

.member-tab-item.is-active {
	border-bottom: 2px solid var(--color-text-main);
	color: var(--color-text-main);
	font-weight: 700;
}

.fo-login .input-group {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    overflow: hidden;
}
.fo-login .input-row {
    position: relative;
    padding: 12px;
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fo-login .input-row:first-child {
    border-bottom: 1px solid var(--border-color);
}
.fo-login .input-label {
    font-size: 12px;
    color: var(--sub-text-color);
    margin-bottom: 2px;
}
.fo-login .input-value {
    font-size: 16px;
    color: var(--text-color);
    border: none;
    outline: none;
    width: 100%;
    padding: 0;
    background: transparent;
}
.fo-login .input-select-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
/* 화살표 아이콘 정렬 */
.fo-login .chevron-icon {
    width: 16px;
    height: 16px;
}
.fo-login .helper-text {
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
    margin:20px 0px;
    text-align: center;
}
.fo-login .helper-text a{
    color: var(--text-color);
    font-weight: 600;
    padding-left:10px;
    padding-right:10px;
}
.fo-login .helper-text a:first-child{
    padding-left:0;
}
.mb_btn {
    width: 100%;
    padding: 14px;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.2s;
}
.mb_btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    margin-bottom: 24px;
}
.mb_btn-primary:hover {
    background-color: var(--primary-hover);
}
.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: var(--sub-text-color);
    margin-bottom: 24px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #EBEBEB;
}
.login-divider::before {
    margin-right: 16px;
}
.login-divider::after {
    margin-left: 16px;
}
/* signup tab */
.signup-divider {
	display: flex;
	align-items: center;
	text-align: center;
	font-size: 12px;
	color: var(--sub-text-color);
	margin:12px 0;
}
.signup-divider::before,
.signup-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #EBEBEB;
}
.signup-divider::before {
	margin-right: 16px;
}
.signup-divider::after {
	margin-left: 16px;
}

/* --- Social Buttons --- */
.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mb_btn-outline {
    background-color: white;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    justify-content: center; /* 텍스트 중앙 정렬 */
    text-decoration: none;
}

.mb_btn-outline:hover {
    background-color: #f7f7f7;
}
.mb_btn-icon {
    position: absolute;
    left: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SNS ICON */
.ico_sns {
    display: inline-block;
    width: 48px;        /* 버튼 크기 */
    height: 48px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px; /* 로고 크기 조절 (페이스북 제외) */
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    vertical-align: middle;
}
.ico_sns_naver {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%2303C75A'%3E%3Cpath d='M16.48 14.966V4.496H19.5v15.008h-3.045L8.03 9.07v10.434H5.01V4.496h3.06z'/%3E%3C/svg%3E");
}
.ico_sns_kakao {
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_16586_16107)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.00005 0.533325C3.5815 0.533325 0 3.3004 0 6.71313C0 8.83557 1.38525 10.7066 3.4947 11.8195L2.60715 15.0618C2.52873 15.3483 2.85638 15.5766 3.10798 15.4106L6.99856 12.8428C7.32688 12.8745 7.66054 12.893 8.00005 12.893C12.4182 12.893 16 10.126 16 6.71313C16 3.3004 12.4182 0.533325 8.00005 0.533325Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_16586_16107'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.ico_sns_google {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.04 16.6c0-1.07-.1-2.1-.28-3.1H16v5.86h7.9c-.33 1.85-1.37 3.4-2.92 4.46v3.7h4.72c2.76-2.54 4.34-6.28 4.34-10.92z' fill='%234285F4'%3E%3C/path%3E%3Cpath d='M16 31c3.96 0 7.28-1.3 9.7-3.56l-4.72-3.7c-1.3.88-2.98 1.4-4.98 1.4-3.83 0-7.07-2.6-8.23-6.07H2.86v3.82C5.3 27.75 10.27 31 16 31z' fill='%2334A853'%3E%3C/path%3E%3Cpath d='M7.77 19.07a8.55 8.55 0 0 1 0-5.46V9.8H2.86a14.9 14.9 0 0 0 0 13.08l4.9-3.8z' fill='%23FBBC05'%3E%3C/path%3E%3Cpath d='M16 8.36c2.15 0 4.08.74 5.6 2.18l4.2-4.2C23.27 3.96 19.95 2.5 16 2.5 10.27 2.5 5.3 5.75 2.86 10.5l4.9 3.82c1.16-3.48 4.4-6.07 8.23-6.07z' fill='%23EA4335'%3E%3C/path%3E%3C/svg%3E");
}
.ico_sns_apple {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='black'%3E%3Cpath d='M22.86 23.36c-1.16 1.7-2.38 3.37-4.23 3.4-1.8.03-2.4-1.08-4.48-1.08-2.1 0-2.73 1.05-4.47 1.1-1.8.07-3.17-1.8-4.32-3.46-2.34-3.4-4-9.67-1.66-12 1.14-1.13 3.18-1.9 4.3-1.9 1.63 0 3.17 1.1 4.16 1.1s2.84-1.36 4.8-1.15c.8.03 3.08.33 4.53 2.46-3.8 1.9-3.16 7.4.45 8.9-.22.6-.5 1.18-.8 1.75l-.3.5zM20.2 5.9C21.07 4.8 21.6 3.3 21.43 1.8c-1.4.06-3.1 1-4.1 2.16-.9 1.04-1.65 2.6-1.43 4.1 1.56.12 3.1-.9 4.3-2.14z'/%3E%3C/svg%3E");
}
.ico_sns_phone {
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.56643 0C3.65819 0 3.75009 0.0119254 3.83592 0.0443541C4.35546 0.240636 4.70538 0.625308 5.00385 1.05033C5.37635 1.58078 5.73573 2.12126 6.06226 2.67706C6.30315 3.08711 6.43028 3.5368 6.32679 4.01675C6.2618 4.31813 6.10929 4.57788 5.86827 4.78055C5.53695 5.05916 5.20663 5.34459 4.84195 5.58176C4.12938 6.04521 4.02649 6.60791 4.29464 7.33428C4.54167 8.00328 4.97487 8.57468 5.43911 9.12281C6.04577 9.83908 6.69365 10.5223 7.45627 11.1011C7.87788 11.4211 8.32109 11.7094 8.86502 11.8267C9.33967 11.9291 9.74439 11.8147 10.0959 11.5038C10.4441 11.1957 10.7888 10.8827 11.1553 10.5942C11.7535 10.1233 12.4134 10.1087 13.0924 10.4308C13.3155 10.5365 13.5387 10.6525 13.734 10.7965C14.4342 11.3131 15.1547 11.8119 15.6941 12.4903C16.1397 13.0508 16.104 13.5935 15.551 14.0627C15.0319 14.5031 14.5392 14.9752 13.9235 15.31C12.8459 15.8962 11.689 16.0991 10.4578 15.9559C9.14123 15.8028 7.9761 15.2951 6.89117 14.61C5.45799 13.7049 4.25784 12.567 3.15661 11.3327C2.17778 10.2357 1.31394 9.06875 0.702397 7.75314C0.279087 6.84241 0.000678547 5.89549 1.39793e-06 4.89737C-0.00109059 3.25674 0.637541 1.88608 2.03173 0.847935C2.23675 0.695288 2.41732 0.511937 2.63158 0.372732C2.78853 0.270716 2.95936 0.187251 3.12988 0.103365C3.26577 0.0365139 3.41499 0 3.56643 0Z' fill='%231B498C'/%3E%3C/svg%3E");
}
.ico_sns_email {
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 12.5999V3.3999C1 2.84762 1.44772 2.3999 2 2.3999H14C14.5523 2.3999 15 2.84762 15 3.3999V12.5999C15 13.1522 14.5523 13.5999 14 13.5999H2C1.44772 13.5999 1 13.1522 1 12.5999Z' fill='%231B498C'/%3E%3Cpath d='M1 3L7.93492 8.94422C7.97237 8.97632 8.02763 8.97632 8.06508 8.94422L15 3' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
}