/* ===========================================================
  공통 = css
=========================================================== */
.container-420{width: 100% !important; max-width: 26.25rem !important; min-height: 465px; margin: 0 auto !important; padding: 0 0.9375rem !important;}
.login-logo-link{margin-bottom: 2.5rem;}

/* ===== login tab ===== */
.login-tabs, .find-tabs{display: flex; border-bottom: none !important; margin: 0; padding: 0;}
.login-tabs .nav-item, .find-tabs .nav-item{flex: 1; position: relative;}
.login-tabs .nav-link, .find-tabs .nav-link{
    display: block; width: 100%; padding: 0.9375rem 0;
    font-size: 1rem; font-weight: 400 !important;
    background-color: #eee !important; 
    border-radius: 6px 6px 0 0 !important;
    margin: 0; text-align: center; color: #888;
    position: relative;
}
.nav-tabs .nav-link:hover{border-color: transparent !important;}
.login-tabs .nav-link.active, .find-tabs .nav-link.active{
    background-color: #fff !important;
    border: 1px solid #535353 !important;
    border-bottom: 1px solid #ffffff !important; 
    z-index: 5; 
    margin-bottom: -0.0625rem; 
    position: relative;
}
.login-tabs .nav-item:first-child:has(.active) + .nav-item::before,
.find-tabs .nav-item:first-child:has(.active) + .nav-item::before
{
    content: "";
    position: absolute; left: -0.625rem; top: 0; bottom: 0;
    width: 1.25rem; background-color: #eee; 
    z-index: 1; 
}
.login-tabs:has(.nav-item:last-child .active) .nav-item:first-child::after,
.find-tabs:has(.nav-item:last-child .active) .nav-item:first-child::after
{
    content: "";
    position: absolute; right: -0.625rem; top: 0; bottom: 0;
    width: 1.25rem; background-color: #eee;
    z-index: 1;
}

/* ===========================================================
  tab-content(회원&비회원) style
=========================================================== */
.login-form-container, .find-form-container{border: none !important; margin-top: 0;}
.custom-input{
    flex: 1; border: none !important;
    padding: 0.625rem; font-size: 1rem; outline: none;
}
.input-row input[type=text], .input-row input[type=password]{
    border: none !important; 
    padding: 0rem !important; 
    font-size: 1rem !important; 
    color: var(--main) !important;
    min-height: 2.1875rem;
}

.input-row{
    display: flex; align-items: center; border: 1px solid #ddd; 
    padding: 0.625rem 0.9375rem; margin-top: -0.0625rem;       
    position: relative; transition: all 0.2s;
}
.input-row:first-child{margin-top: 0; border-radius: 0; border-top: 1px solid #ddd;}
.input-row:last-child{border-radius: 0 0 6px 6px;}
.input-row.on {
    border: 1px solid #535353 !important; 
    z-index: 10;
}
/* 드래그 방지 */
.saveid, .saveid>label{
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -ms-user-select: none;     
}
.btn-insio-color{
    /* background-color: var(--main); */
    background-color: #D41367 !important; color: #fff !important;
    height: 3.375rem; font-size: 1.125rem;
    font-weight: 500; border-radius: 6px;  border: none;
}

/* 하단 보조 링크 */
.helper-links{margin: 0.9375rem 0;}
.helper-links a{
    position: relative; color: #888;
    font-size: 0.875rem; padding: 0 0.75rem; font-weight: 400 !important;
}
.helper-links a:not(:last-child)::after{
    content: "";
    position: absolute; right: 0; top: 0.25rem;
    width: 0.0625rem; height: 0.75rem; background-color: #d3d3d3;
}

/* ===== 간편 로그인 ===== */
.sns-login-title{
    height: 0.625rem; border-bottom: 1px solid #ddd;
    text-align: center; margin-top: 4.0625rem;
}
.sns-login-title span{
    background: #fff; padding: 0 0.9375rem;
    color: #666;  font-size: 0.875rem;
}

/* SNS 버튼 */
.sns-loginBtn{margin-top: 1.875rem;}
.sns-btn{width: 2.875rem; height: 2.875rem; border-radius: 50%;}
.sns-btn.kakao{width: 2.875rem; height: 2.875rem; background-image: url(../img/logo/kakao_symbol.svg);}
.sns-btn.naver{width: 2.875rem; height: 2.875rem; background-image: url(../img/logo/naver_symbol.svg);}


/* ===== 비회원 탭 ===== */
.btn-outline-secondary.rounded-pill{border-color: #ddd !important; color: #333 !important; font-weight: 500;}
.btn-outline-secondary:hover, .btn-outline-secondary.rounded-pill:hover{background-color: #fff !important; border-color: #ccc !important;}
.login-tabs .nav-link.active, .find-tabs .nav-link.active{border-bottom: 1px solid #ffffff !important; z-index: 5; margin-bottom: -0.0625rem;}

/* ===========================================================
  ID/PW 찾기 style
=========================================================== */
.find-infoText p{display: none; opacity: 0; transition: opacity 0.3s ease;}
.container-420:has(#find-id-tab.active) .find-infoText p:first-child,
.container-420:has(#find-pw-tab.active) .find-infoText p:last-child{
    display: block; opacity: 1; word-break: keep-all;
}

/* 안내문구 */
.find-infoText p{padding: 0.5rem 0.9375rem; border-radius: 6px;}

/* ID찾기 인증완료 화면 */
/* 결과 페이지 전용 스타일 */
.find-resultGroup .input-row.rounded-pill{
    background-color: #f8f9fa !important;
    justify-content: center; /* 아이콘과 텍스트 중앙 정렬 */
}
.find-resultGroup .btn-outline-secondary {
    border-color: #ddd;
    color: #333;
    font-weight: 500;
    border-radius: 6px;
}
.find-resultGroup .input-row{border-radius: 6px;}




/* ===========================================================
   추가 반응형
=========================================================== */
@media (max-width: 61.99875rem){ /* (max-width: 991.98px) */
    .flat-spacing-11{padding-top: 6.875rem; padding-bottom: 4.375rem;}
}
@media (max-width: 35.99875rem){ /* (max-width: 575.98px) */
    .login-tabs .nav-link, .find-tabs .nav-link{padding: 0.75rem 0; font-size: 0.9375rem;}
    .input-row{padding: 0.5rem 0.9375rem;}
    .btn-insio-color{height: 3rem; font-size: 1rem;}
    .custom-input{font-size: 0.875rem;}
    .input-row input[type=text], .input-row input[type=password]{font-size: 0.875rem !important;}
}