@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css');

/* 기준 크기: 1920 x 953 */

/* ---------------------------------------------------- */
/* 1. HTML/BODY 설정 (스크롤 기준) */
/* ---------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-width: 582px; 
    min-height: 584px; 
    overflow-x: auto; 
    overflow-y: auto;
    
    /* absolute 요소를 중앙 정렬하려면 body에 text-align: center;가 필요 없습니다. */
}





/* ---------------------------------------------------- */
/* 2. MAIN 요소 (582px 캔버스 및 중앙 고정) */
/* ---------------------------------------------------- */
main {
    /* Login_BG 크기로 고정 (582x584) */
    width: 582px; 
    min-width: 582px; 
    height: 584px; 
    min-height: 584px;
    
    /* 뷰포트 중앙 정렬 */
    position: fixed; 
    left: 50%;          
    top: 50%;           
    transform: translate(-50%, -50%); 
    overflow-x: hidden; 
    overflow-y: hidden; 
    /* 내부 absolute 요소의 기준점 */
    position: relative; 
}

/* ---------------------------------------------------- */
/* 3. 내부 요소 재계산 (기준점: main의 0,0) */
/* ---------------------------------------------------- */

 /* 전체 컨테이너 (main의 자식) */
.Login {
    width: 100%; /* 582px */
    height: 100%; /* 584px */
    left: 0px; 
    top: 0px; 
    position: relative;
 }

 /* 배경 (1920px 배경은 Login 밖으로 빼서 fixed로 처리해야 스크롤 안 생김) */
 /* 현재 HTML 구조상 .Login .BG는 main의 자식인 Login의 자식입니다. 
    크기가 1920px이므로 main 밖으로 엄청나게 튀어나와서 스크롤을 유발합니다. 
    이 요소는 HTML 구조를 수정하여 body 바로 아래에 두고 position: fixed로 처리해야 합니다. 
 */
.Login .BG {
    /* 🔴 이 요소가 스크롤을 유발합니다. 임시로 main 크기에 맞춥니다. */
    width: 100%; /* 582px */
    height: 100%; /* 584px */
    left: 0px; 
    top: 0px; 
    position: fixed; 
    
    /* 콘텐츠 뒤로 보내기 */
    z-index: -10;
}
 
 /* 로그인 박스 배경 (main에 딱 맞춤) */
.Login .Login_BG {
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    position: fixed;
}
 
 /* ID 아이콘 */
.Login .ID_Image {
    width: 15px; 
    height: 21px; 
    left: 71px;  /* 740px - 669px = 71px */
    top: 252px;  /* 414px - 162px = 252px */
    position: absolute;
 }
 
 /* ID 배경 */
.Login .ID_BG {
    width: 418px; 
    height: 48px; 
    left: 104px; /* 773px - 669px = 104px */
    top: 239px;  /* 401px - 162px = 239px */
    position: absolute;
 }
 
 /* ID 입력 영역 (전체 박스) */
.Login .ID_Wrap {
    position: absolute;
    width: 418px; 
    height: 48px; 
    left: 104px; /* 773px - 669px = 104px */
    top: 239px;  /* 401px - 162px = 239px */
    overflow: hidden;
 }
 
 /* 스케일 적용용 span (기준 크기 고정 + transform 대상) */
.Login .ID_InputWrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    position: relative;
 }
 
 /* 실제 입력창 */
.Login .ID_Input {
    position: absolute;
    width: 90%; 
    height: 100%;
    left: 20px; 
    top: 0px;
    border: none;
    outline: none;
    background: transparent;
    color: #000;
    font-size: 17px; 
 }
 
 /* placeholder 스타일 */
.Login .ID_Input::placeholder {
    color: #aaa;
    opacity: 1;
 }
 
 
 
 /* PW 아이콘 */
.Login .PW_Image {
    width: 19px; 
    height: 20px; 
    left: 68px;  /* 737px - 669px = 68px */
    top: 318px;  /* 480px - 162px = 318px */
    position: absolute;
 }
 
 /* PW 배경 */
.Login .PW_BG {
    width: 418px; 
    height: 48px; 
    left: 104px; /* 773px - 669px = 104px */
    top: 304px;  /* 466px - 162px = 304px */
    position: absolute;
 }
 
 /* PW 입력 영역 (전체 박스) */
.Login .PW_Wrap {
    position: absolute;
    width: 418px; 
    height: 48px; 
    left: 104px; /* 773px - 669px = 104px */
    top: 304px;  /* 466px - 162px = 304px */
    overflow: hidden;
 }
 
 /* 스케일 적용용 span (기준 크기 고정 + transform 대상) */
.Login .PW_InputWrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    position: relative;
 }
 
 /* 실제 입력창 */
.Login .PW_Input {
    position: absolute;
    width: 90%; 
    height: 100%;
    left: 20px; 
    top: 0px;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'NanumSquareNeo', sans-serif;
    color: #000;
    letter-spacing: 0.05em;
    font-size: 100%; 
 }
 
 /* placeholder 스타일 */
.Login .PW_Input::placeholder {
    color: #aaa;
    opacity: 1;
 }
 
.LoginGroup{
    cursor: pointer;
 }
 
 /* 버튼 배경 */
.Login .Login_Button {
    width: 462px; 
    height: 60px; 
    left: 60px;  /* 729px - 669px = 60px */
    top: 378px;  /* 540px - 162px = 378px */
    position: absolute;
 }
 
 /* 버튼 입력 영역 (전체 박스) */
 .Login .Login_Wrap {
    position: absolute;
    left: 268px; /* 937px - 669px = 268px */
    top: 395px;  /* 557px - 162px = 395px */
    width: 232px; 
    height: 31px; 
 }
 
 /* 스케일 적용용 span (기준 크기 고정 + transform 대상) */
 .Login .Login_InputWrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    position: relative;
 }
 
 /* 실제 텍스트 */
 .Login .Login_Text {
    color: #fff;
    white-space: nowrap;
    font-family: 'NanumSquareNeo', sans-serif;
 }
 
 
 
 
 /* --- 회원가입 영역 (위치는 기존 468px 유지) --- */
.Login .Regist_Wrap {
    position: absolute;
    width: 582px; 
    height: 21px; 
    left: 0px; 
    top: 468px; 
    text-align: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

/* --- 아이디/비밀번호 찾기 전체 영역 (위치는 기존 505px 유지) --- */
.Login .FindAccount_Wrap {
    position: absolute;
    width: 582px; 
    height: 21px; 
    left: 0px; 
    top: 505px; 
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* 공통: 각각의 텍스트 버튼 스타일 (회원가입 포함) */
.Regist_Wrap span,
.FindAccount_Wrap span {
    cursor: pointer;
    display: inline-block;
}

/* 공통: 마우스 올렸을 때 효과 */
.Regist_Wrap span:hover,
.FindAccount_Wrap span:hover {
    text-decoration: underline;
    color: #000;
}

/* 중간 구분선 스타일 */
.FindAccount_Wrap .Divider {
    margin: 0 15px; 
    cursor: default;
    color: #ccc;
    text-decoration: none !important; /* 구분선은 밑줄 제외 */
}


 
 
 /* 언어 선택 */
 /* Custom Selector 컨테이너 (기준점) */
.Login .CustomLanguageSelector {
    position: absolute; 
    left: 394px; /* 1063px - 669px = 394px */
    top: 29px;   /* 191px - 162px = 29px */
    width: 160px; 
    height: 37px; 
}

/* 배경 이미지 (기존 위치 그대로) */
.Login .Language_BG {
    width: 100%; 
    height: 100%;
    position: absolute;
    left: 0px; 
    top: 0px;
}

/* 선택된 언어 표시 영역 (클릭 대상) */
.Login .Language_DisplayArea {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 10;
}

.Login .Language_Image {
    width: 20px; 
    height: 14px; 
    left: 18px; 
    top: 12px; 
    position: absolute;
 }


.Login .Language_PopButton {
    width: 13px; 
    height: 10px; 
    left: 128px; 
    top: 15px; 
    position: absolute;
 }


/* 선택된 텍스트 스타일 */
.Login .Selected_Text {
    position: absolute;
    left: 40px; 
    width: 88px; 
    height: 37px; 
    color: black;
    font-family: 'NanumSquareNeo', sans-serif;
    font-weight: 400;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
 }

/* 옵션 목록 스타일 (핵심) */
.Login .Language_Options_List {
    display: none;
    position: absolute;
    top: 37px; 
    left: 0; 
    width: 100%; 
    background-image: url('../image/register/dropdown.png');
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    background-color: transparent;
    list-style: none;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    z-index: 20;
 }

/* 옵션 아이템 스타일 */
.Login .Language_Options_List li {
    padding: 5px;
    cursor: pointer;
    font-family: 'NanumSquareNeo', sans-serif;
   
    color: black;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
 }

.Login .Language_Options_List li:hover {
    background-color: #E9F1FF;
 }
 /* 상단 첫 번째 항목의 상단 모서리 라운딩 */
.Login .Language_Options_List li:first-child:hover {
    border-top-left-radius: 8px;   /* 👈 원하는 라운딩 크기로 설정 */
    border-top-right-radius: 8px;  /* 👈 원하는 라운딩 크기로 설정 */
}

/* 하단 마지막 항목의 하단 모서리 라운딩 */
.Login .Language_Options_List li:last-child:hover {
    border-bottom-left-radius: 8px; /* 👈 원하는 라운딩 크기로 설정 */
    border-bottom-right-radius: 8px; /* 👈 원하는 라운딩 크기로 설정 */
}
 
 /* 로고 */
 .Login .Logo {
    width: 235.4px; 
    height: 65.6px; 
    left: 171px; /* 840px - 669px = 171px */
    top: 104px;  /* 266px - 162px = 104px */
    position: absolute;
 }


 .Logo {
    width: 191.2px;
    height: 53.3px;
    left: 82px; 
    top: 49px;
    cursor: pointer;
  }
 .ID_Input:-webkit-autofill,
 .ID_Input:-webkit-autofill:hover, 
 .ID_Input:-webkit-autofill:focus, 
 .ID_Input:-webkit-autofill:active {
     
     /* ✅ 1. 배경색 유지: 'transparent'로 수정 */
     -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
     
     /* ✅ 2. 글씨색 유지: #000 (검정)으로 강제 적용 */
     -webkit-text-fill-color: #000 !important; 
     
    
     
     /* 4. 폰트 크기 유지 */
     font-size: 17px !important; 
     
     /* 5. 투명 배경 유지 (이중 확인) */
     background-color: transparent;
 }