/* 접근성 포커스 스타일 */
button:focus-visible, input:focus-visible, a:focus-visible {
    outline: 2px solid #4a90e2 !important;
    outline-offset: 2px;
}
a {
    text-decoration: none;
    color: inherit;
}
/* 네이티브 폼 요소 초기화 */
input {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    width: 100%;
}
input:focus { outline: none; }
input::placeholder { color: #999999; }
button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
/* =========================================
    새로운 레이아웃 구조 (Flexbox 적용)
========================================= */
.login-basic {
    display: flex;
    width: 100%;
    height: 100dvh;
    background-color: #fafafa;
}

/* 왼쪽 정보 영역 (배경 있는 곳) */
.info-section {
    flex: 1; /* 남은 공간 모두 차지 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position:relative;
    padding:5vh 3% 10vh 3%;
}

/* 정보 영역 - 헤더 (로고 & 홈으로 버튼) */
.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.info-header .logo-box {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:30px;
}
.home-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.home-link span {
    font-weight: 600; color: #fff; font-size: 14px;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.home-link:hover span { opacity: 1; }
/* 정보 영역 - 중앙 메인 텍스트 */
.info-main,
.info-footer {
    padding-left:8%;
}
.info-main {
    display: flex;
    flex-direction: column;
}
.text-wrapper-9 {
    font-weight: 500;
    color: #fafafa;
    font-size: 26px;
    letter-spacing: -0.78px;
    line-height: 39px;
}
.main-visual-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin:5px 0 30px 0;
}
.main-visual-row img {
    max-width:139px;
}
.text-wrapper-10 {
    font-weight: 700;
    color: #fafafa;
    font-size: 40px;
    letter-spacing: -1.2px;
}
.login-text-wrap {
    opacity: 0.8;
    font-weight: 500;
    color: #fafafa;
    font-size: 20px;
    line-height: 30px;
}
/* 정보 영역 - 하단 연락처 */
.info-footer {
    display: flex;
    align-items: flex-end;
    position:relative;
}
.contact-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position:relative;
}
.info-footer .contact-block:nth-child(2) {margin-left:130px;}
.info-footer .contact-block:nth-child(2):before {
    content:'';
    width:1px;
    height:32px;
    background-color:#fff;
    opacity:0.2;
    position:absolute;
    bottom:5px;
    left:-65px;
}
.contact-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 60px;
    font-weight: 600;
    color: #fafafa;
    font-size: 15px;
}
.contact-details-row {
    display: flex;
    align-items: center;
    gap: 36px;
    min-height:47px;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
}
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contact-info-list a {
    font-weight: 400;
    color: #fafafa;
    font-size: 18px;            
    line-height:1.1;
}
/* 우측 로그인 폼 영역 */
.form-section {
    width: 720px; /* 폼 컨테이너보다 여유있게 확보 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    padding: 40px;
}
.form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}
.form-header h1 {
    font-weight: 600;
    color: #000;
    font-size: 34px;
}
.form-container {
    display: flex;
    flex-direction: column;
    width: 400px;
    gap: 40px;
}
/* --- 입력 필드 세부 디자인 --- */
.input-wrap {
    width:100%;
}
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 24px;
}
.input-label {
    color: #333333;
    font-size: 14px;
    font-weight:400;
}
.input-box {
    display: flex;
    width:100%;
    height: 48px;
    align-items: center;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #ededed;
    gap: 10px;
    overflow: hidden;
    position:relative;
}
.input-box input {
    font-size: 16px;
    color: #333333;
    width:100%;
    height:100%;
    padding:0 60px 0 15px;
    box-sizing:border-box;
}
.input-box  .icon-btn {
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
}
.input-box  .password img:nth-child(2) {
    display:none;
}
.links-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.remember-me {
    display: flex;
    flex-direction:row;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #666666;
    font-size: 14px;       
}
.remember-me input[type="checkbox"] {
    position:relative;
    top:0.1px;
    appearance: none;
    -webkit-appearance: none; 
    /* 2. 체크 해제 상태의 커스텀 디자인 */
    width: 18px;
    height: 18px;
    border: 1px solid #d9d9d9;
    border-radius: 4.5px;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
/* 3. 체크되었을 때의 디자인 */
.remember-me input[type="checkbox"]:checked {
    background-color: #0067c8; /* accent-color 대신 배경색을 직접 지정 */
    border-color: #0067c8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 100%; /* 체크 마크 크기 조절 */
    background-position: center;
    background-repeat: no-repeat;
}
/* 키보드로 접근(Tab)했을 때 시각적인 포커스 링 제공 (웹 접근성 필수) */
.remember-me input[type="checkbox"]:focus-visible {
    outline: 2px solid #0067c8;
    outline-offset: 2px;
}
.find-links {
    display: flex;
    align-items: center;
    gap: 12px;
}
.find-links button {
    color: #666666;
    font-size: 14px;
    line-height:1;
    letter-spacing:-0.5px;
}
.find-links .separator {
    width: 1px;
    height: 13px;
    background-color: #a1a1a1;
}
/* --- 버튼 및 하단 가입 --- */
.submit-btn {
    display: flex;
    height: 55px;
    line-height:1;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 8px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
}
.submit-btn:hover {
    background-color:#333;
}
.signup-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.signup-row span {
    color: #666666;
    font-size: 16px;
    font-weight:500;
    line-height:1;
    position:relative;
    top:1px;
    letter-spacing:0px;
}
.signup-row b {
    font-size:inherit;
    color:#000;
    font-weight:700;
    display:inline;
}
.signup-link {
    display: flex;
    flex-direction:row;
    align-items: center;
    gap: 5px;
    color: #333333;
    font-weight: 700;
    font-size: 16px;
    position:relative;
    line-height:1;
}
.login-basic .contact-title {
    background-color:rgba(0,0,0,0.4);
}
/* lite version */
.login-lite .info-section,
.login-lite .submit-btn {
    background:#338469;
}
.login-lite .submit-btn:hover {
    background-color:#333;        
}
.login-lite .signup-link:hover,
.login-lite .input-box .icon-btn:hover {
    filter: invert(45%) sepia(12%) saturate(2250%) hue-rotate(115deg) brightness(96%) contrast(88%);
}
.login-lite button:focus-visible, 
.login-lite input:focus-visible, 
.login-lite a:focus-visible {
    outline: 2px solid #338469 !important;
}
.login-lite .info-section button:focus-visible, 
.login-lite .info-section input:focus-visible, 
.login-lite .info-section a:focus-visible {
    outline: 2px solid #fff !important;
}
.login-lite .remember-me input[type="checkbox"]:focus-visible {
    outline: 2px solid #338469;
}
.login-lite .popup .subMitBtn01 {
    background-color:#338469
}
.login-lite .popup input[type=checkbox]:checked + label span.checkmark:after {
    border: solid 1px #338469;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);    
}
.login-lite .popup input[type=checkbox]:checked + label span.txt {
    color:#338469;
}
.login-lite .remember-me input[type="checkbox"]:checked {
    background-color:#338469;
}
/* version2 */
.login-version2 .info-section,
.login-version2 .submit-btn {
    background:#3D6C93;
}
.login-version2 .find-links button:hover {
    color:#3D6C93;
}    
.login-version2 .submit-btn:hover {
    background-color:#333;        
}
.login-version2 .signup-link:hover,
.login-version2 .input-box .icon-btn:hover {
    filter: invert(42%) sepia(15%) saturate(1512%) hue-rotate(167deg) brightness(94%) contrast(90%);
}
.login-version2 button:focus-visible, 
.login-version2 input:focus-visible, 
.login-version2 a:focus-visible {
    outline: 2px solid #3D6C93 !important;
}
.login-version2 .info-section button:focus-visible, 
.login-version2 .info-section input:focus-visible, 
.login-version2 .info-section a:focus-visible {
    outline: 2px solid #fff !important;
}
.login-version2 .remember-me input[type="checkbox"]:focus-visible {
    outline: 2px solid #3D6C93;
}
.login-version2 .popup .subMitBtn01 {
    background-color:#3D6C93
}
.login-version2 .popup input[type=checkbox]:checked + label span.checkmark:after {
    border: solid 1px #3D6C93;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);    
}
.login-version2 .popup input[type=checkbox]:checked + label span.txt {
    color:#3D6C93;
}
.login-version2 .remember-me input[type="checkbox"]:checked {
    background-color:#3D6C93;
}
/* version1 */
.login-version1 .info-section,
.login-version1 .submit-btn {
    background:#6E777C;
}
.login-version1 .find-links button:hover {
    color:#6E777C;
}    
.login-version1 .submit-btn:hover {
    background-color:#333;        
}
.login-version1 .signup-link:hover,
.login-version1 .input-box .icon-btn:hover {
    filter: invert(50%) sepia(7%) saturate(693%) hue-rotate(161deg) brightness(93%) contrast(88%);
}
.login-version1 button:focus-visible, 
.login-version1 input:focus-visible, 
.login-version1 a:focus-visible {
    outline: 2px solid #6E777C !important;
}
.login-version1 .info-section button:focus-visible, 
.login-version1 .info-section input:focus-visible, 
.login-version1 .info-section a:focus-visible {
    outline: 2px solid #fff !important;
}
.login-version1 .remember-me input[type="checkbox"]:focus-visible {
    outline: 2px solid #6E777C;
}
.login-version1 .popup .subMitBtn01 {
    background-color:#6E777C
}
.login-version1 .popup input[type=checkbox]:checked + label span.checkmark:after {
    border: solid 1px #6E777C;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);    
}
.login-version1 .popup input[type=checkbox]:checked + label span.txt {
    color:#6E777C;
}
.login-version1 .remember-me input[type="checkbox"]:checked {
    background-color:#6E777C;
}
/* btsd: 퍼블 원본 단계(1780 / 1480 / 1380)는 단계 바로 위 구간(1781~1818, 1481~1539, 1381~1396)에서
   폼 영역이 다시 넓어지며 하단 연락처 폭이 모자라 전화번호가 줄바꿈됐다.
   연락처가 한 줄로 들어가는 폭을 실측해 단계를 1860 / 1580 / 1440 으로 올렸다. (1680 은 문제없어 유지) */
@media screen and (max-width:1860px) {
    .info-section {padding:5vh 20px 10vh 20px;}
    .info-main, .info-footer {padding-left:4%;}
    .form-section {width:650px;}
}
@media screen and (max-width:1680px) {
    .info-footer .contact-block:nth-child(2) {margin-left:80px;}
    .info-footer .contact-block:nth-child(2):before {left:-40px; bottom:10px;}
    .info-footer {align-items:flex-start;}
    .form-section {width:600px;}
}
@media screen and (max-width:1580px) {
    .form-section {width:500px;}
    .form-container {width:80%;}
    .info-main, .info-footer {padding-left:10px;}
    .info-footer .contact-block:nth-child(2) {margin-left:60px;}
    .info-footer .contact-block:nth-child(2):before {left:-30px;}
}
@media screen and (max-width:1440px) {
    .info-section {
        padding: 5vh 40px 10vh 40px;
    }    
    .contact-details-row {flex-direction:column;}
    .info-footer .contact-block:nth-child(2) {margin-left:180px;}
    .info-footer .contact-block {}
    .info-footer .contact-block:nth-child(2):before {left:-90px; height:100px;}
}
@media screen and (max-width:1200px) {
    .info-footer .contact-block:nth-child(2) {margin-left:100px;}
    .info-footer .contact-block:nth-child(2):before {left:-50px;}

    .main-visual-row img {max-width:120px;}
    .text-wrapper-10 {font-size:32px;}
}
@media screen and (max-width:1080px) {
    .login-basic {flex-direction:column; height:initial;}
    .form-section {width:100%;}
    .info-header {margin-bottom:40px;}
    .login-text-wrap {margin-bottom:70px;}
    .info-section {padding: 5vh 20px 10vh 20px;}

    .login-basic {}
    .info-section {order:2;}
    .form-section {order:1; padding:110px 40px 40px 40px;}
    .info-header {position:fixed; top:0; left:0; z-index:9; width:100%; margin-bottom:0; padding:calc(20px + env(safe-area-inset-top)) 20px 20px 20px; box-sizing:border-box; background-color:#fafafa;}
    /* .home-link span {color:#000;}
    .home-link img {
        filter: brightness(0) saturate(100%);
    }    

    .info-header .logo img {display:none;}
    .info-header .logo {width:150px; height:41px; background-image:url(../../_images/login/login_logo_black.svg); background-position:center; background-repeat:no-repeat; background-size:cover;}
 */

    .login-lite .info-header {
        background: #338469;
    }
    .login-version2 .info-header {
        background:#3D6C93;
    }
    .login-version1 .info-header {
        background: #6E777C;
    }      
}
@media screen and (max-height:560px) {
    .login-basic {flex-direction:column; height:initial;}
    .form-section {width:100%;}
    .info-header {margin-bottom:40px;}
    .login-text-wrap {margin-bottom:70px;}
    .info-section {padding: 8vh 20px 12vh 20px;}

    .login-basic {}
    .info-section {order:2;}
    .form-section {order:1; padding:110px 40px 40px 40px;}
    .info-header {position:fixed; top:0; left:0; z-index:9; width:100%; margin-bottom:0; padding:20px 20px; box-sizing:border-box; background-color:#fafafa;}
    .home-link span {color:#000;}
    .home-link img {
        filter: brightness(0) saturate(100%);
    }    

    .info-header .logo img {display:none;}
    .info-header .logo {width:150px; height:41px; background-image:url(../../_images/login/login_logo_black.svg); background-position:center; background-repeat:no-repeat; }
}
@media screen and (max-width:580px) {
    .text-wrapper-9 {font-size:20px;}
    .text-wrapper-10 {font-size:24px;}
    .main-visual-row img {max-width:100px;}
    .main-visual-row {margin:5px 0 20px 0;}
    .login-text-wrap {font-size:15px; margin-bottom:40px; line-height:1.4;}
    .contact-info-list a {font-size:16px;}
    .contact-details-row {align-items:flex-start;}
    .info-main, .info-footer {padding-left:0;}
    .contact-icon img {width:28px;}
    .contact-mail img {width:18px;}
    .info-header {margin-bottom:30px;}
    .info-section {
        padding: 5vh 20px;
    }    
    .info-footer .contact-block {width:50%;}
    .contact-details-row {gap:18px;}
    .info-footer .contact-block:nth-child(2) {margin-left:0; padding-left:20px;}
    .info-footer .contact-block:nth-child(2):before {left:10px; height:50%; bottom:0;}
    .contact-title {padding:6px 15px; font-size:14px;}
    .form-container {width:100%;}
    .form-header h1 {font-size:24px;}
    .form-header {gap:10px; margin-bottom:30px;}
    .form-section {padding:120px 20px 35px 20px;}    

    .info-header .logo-box {gap:20px;}
    .info-header .logo-box .logo01 img {width:100px;}
    .info-header .logo-box .logo02 img {width:160px;}
}
@media screen and (max-width:480px) {
    .main-visual-row {gap:5px;}
    .main-visual-row img {max-width:85px;}
    .text-wrapper-10 {
        font-size: 23px;
    }
    .info-header .logo-box {gap:15px;}
    .home-link img {width:20px;}
    .home-link {flex-direction:column; display:flex; align-items:center; justify-content:center; gap:5px;}
    .home-link span {order:2; font-size:12px;}
}

@media screen and (max-width:380px) {
    .info-footer {flex-direction:column;}
    .info-footer .contact-block {width:100%;}
    .info-footer .contact-block:nth-child(2) {padding-left:0; margin-top:50px;}
    .info-footer .contact-block:nth-child(2):before {width:100%; height:1px; left:0; top:-25px;}
    .find-links {gap:10px;}
    .remember-me,
    .find-links button {font-size:13px;}
    .remember-me {gap:3px;}
    .main-visual-row img {max-width:80px;}
    .text-wrapper-10 {
        font-size: 20px;
    }    
}
@media screen and (max-width:340px) {
    .text-wrapper-9 {font-size:18px;}
    .main-visual-row img {width:80px;}
    .text-wrapper-10 {font-size:20px;}

    .info-header .logo-box {gap:5px; flex-wrap:wrap;}
    .info-header .logo-box .logo01 img {width:90px;}
    .info-header .logo-box .logo02 img {width:150px;}    
}
.login-version2 .popup .subMitBtn01:hover,
.login-lite .popup .subMitBtn01:hover,
.login-version1 .popup .subMitBtn01:hover  {background-color:#000 !important;}