body {
    font-family: "Gowun Dodum", sans-serif; /* 컨셉 폰트 적용 */
    margin: 0;
    padding: 0;
    background-color: #111111; /* 컨셉 배경색 */
    color: #333; /* 컨셉 기본 글자색 - 어두운 배경에서는 보이지 않으므로 내부 요소에서 재정의 */
    box-sizing: border-box; /* 패딩/보더가 크기에 포함되도록 설정 */
}

*, *:before, *:after {
    box-sizing: inherit; /* 상위 요소에서 box-sizing 상속 */
}

/* === 메인 래퍼 (컨셉 #bankAtm-guideWrapper 반영) === */
.loginHome_Main {
    max-width: 500px; /* 컨셉 최대 너비 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 0 16px; /* 좌우 패딩 */
    background-color: #111111; /* 요청: 흰색 바탕(래퍼)을 #111111로 변경 */
    box-shadow: 0 0 20px rgba(0,0,0,0.3); /* 어두운 배경에 어울리게 그림자 조정 */
    min-height: calc(100vh - 180px); /* 요청: 100vh에서 80px 빼서 푸터 공간 확보 (PC) */
    margin-top: 80px; /* 상단 마진 (상단바 고려) */
    border-radius: 8px; /* 컨셉 둥근 모서리 */
    overflow: hidden; /* 내부 요소가 넘치지 않도록 */
    display: flex; /* 내부 컨텐츠(#loginMCt) 중앙 정렬을 위해 flex 추가 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 (컨텐츠가 짧을 때) */
}

/* === 로그인 컨텐츠 컨테이너 (컨셉 섹션 반영) === */
#loginMCt {
    padding: 30px 10px; /* 컨셉 패딩 */
    background-color: #111111; /* 요청: 흰색 바탕(컨텐츠)을 #111111로 변경 */
    border-radius: 8px; /* 둥근 모서리 */
    /* margin-bottom: 24px; 컨텐츠 중앙 정렬을 위해 마진 제거 */
    /* border: 1px solid #ffe8d6; 컨셉 연한 보더 (어두운 배경에 맞게 조정 필요시 추가) */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.08); 컨셉 그림자 (어두운 배경에 맞게 조정 필요시 추가) */
    display: flex; /* 내부 요소 정렬을 위해 flexbox 사용 */
    flex-direction: column; /* 세로 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    width: 100%; /* 너비 100% */
    max-width: 470px; /* 컨텐츠 최대 너비 제한 */
}

/* === 상단 제목 섹션 (컨셉 #bankAtm-headerSection 반영) === */
.loginTopCt {
    text-align: center; /* 중앙 정렬 */
    margin-bottom: 30px; /* 하단 마진 */
    padding: 16px 0; /* 상하 패딩 */
    /* background-color: #fffaf5; 연한 배경색 (어두운 배경에 맞게 조정 또는 제거) */
    /* border-bottom: 1px solid #fdd8b5; 하단 보더 (어두운 배경에 맞게 조정 또는 제거) */
    width: 100%; /* 너비 100% */
}
.loginTopCt-1 p {
    font-family: "Gowun Dodum", sans-serif; /* 컨셉 폰트 */
    color: #fd7e14; /* 컨셉 주황색 (제목) */
    margin: 0 0 8px 0; /* 마진 */
    font-size: 30px; /* 컨셉 유사 폰트 크기 */
    font-weight: 700; /* 굵은 글씨 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4); /* 어두운 배경에 어울리게 그림자 조정 */
}
.loginTopCt-2 p {
    margin-top: 0; /* 상단 마진 제거 */
    font-size: 16px; /* 컨셉 유사 폰트 크기 */
    opacity: 0.9; /* 투명도 */
    color: #ccc; /* 어두운 배경에 맞춰 밝은 회색 글자색 */
}

/* === 소셜 로그인 버튼 섹션 (컨셉 .bankAtm-button-group 유사) === */
#snsbutton {
    display: flex; /* flexbox로 버튼 정렬 */
    flex-direction: column; /* 세로 정렬 */
    gap: 15px; /* 버튼 사이 간격 */
    width: 100%; /* 컨테이너 너비 100% */
    /* max-width: 300px; 소셜 버튼 이미지 크기 조정을 위해 max-width를 더 제한 */
    max-width: 240px; /* 네이버/카카오 버튼 표준 너비 고려 (약 240px) */
    margin-top: 20px; /* 상단 마진 */
}

#snsbutton div {
    /* 소셜 버튼 각 항목에 대한 스타일 */
    width: 100%; /* 너비 100% */
    text-align: center; /* 이미지 중앙 정렬 */
}

#snsbutton img {
    /* 소셜 로그인 이미지 자체에 대한 스타일 */
    width: 100%; /* 부모 div에 맞춰 너비 100% */
    height: auto; /* 비율 유지 */
    display: block; /* 이미지 하단 공백 제거 */
    border-radius: 5px; /* 살짝 둥근 모서리 */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 호버 효과 */
    /* 이미지 원본 크기가 다를 경우, 부모 #snsbutton의 max-width로 전체 크기 제어 */
}

#snsbutton img:hover {
    transform: translateY(-2px); /* 살짝 위로 이동 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 어두운 배경에 어울리게 그림자 조정 */
}

/* --- 자체 로그인, 회원가입 관련 CSS (HTML에서 주석 처리됨) --- */
/* 주석 처리된 표준 로그인 폼 */
/*
.login form {
    display: flex;
    flex-direction: column;
    gap: 15px; // 폼 요소 사이 간격
    width: 100%;
    max-width: 400px; // 폼 최대 너비
    margin: 20px auto; // 중앙 정렬 및 상하 마진
    padding: 20px;
    border: 1px solid #fdd8b5; // 컨셉 보더
    border-radius: 8px; // 컨셉 둥근 모서리
    background-color: #fffaf5; // 컨셉 연한 배경색
}

.login input[type="text"],
.login input[type="password"] {
    width: 100%;
    padding: 13px 16px; // 컨셉 패딩
    border: 1px solid #fdd8b5; // 컨셉 보더
    border-radius: 5px; // 컨셉 둥근 모서리
    box-sizing: border-box; // 크기 계산 방식
    transition: border-color 0.2s, box-shadow 0.2s; // 호버/포커스 효과
    font-size: 16px; // 폰트 크기
    font-family: "Gowun Dodum", sans-serif;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    outline: none;
    border-color: #fd7e14; // 컨셉 주황색 보더
    box-shadow: 0 0 0 4px rgba(253, 126, 20, .35); // 컨셉 그림자
}

.login input[type="submit"] {
    padding: 14px 24px; // 컨셉 패딩
    background-color: #fd7e14; // 컨셉 주황색 배경
    color: white; // 흰색 글자
    border: none; // 보더 없음
    border-radius: 5px; // 둥근 모서리
    cursor: pointer; // 마우스 커서 변경
    font-size: 17px; // 폰트 크기
    transition: background-color 0.2s, transform 0.1s; // 호버 효과
    width: 100%; // 너비 100%
    font-family: "Gowun Dodum", sans-serif;
    font-weight: 600;
}

.login input[type="submit"]:hover {
    background-color: #e06200; // 진한 주황색 배경
    transform: translateY(-2px); // 살짝 위로 이동
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); // 그림자
}
*/

/* 주석 처리된 아이디/비밀번호 찾기 및 회원가입 링크 */
/*
#idpwfind {
    margin-top: 20px; // 상단 마진
    text-align: center; // 중앙 정렬
    font-size: 15px; // 폰트 크기
}

#idpwfind a {
    color: #c85a0a; // 컨셉 어두운 주황색
    text-decoration: none; // 밑줄 없음
    margin: 0 10px; // 링크 사이 간격
    transition: color 0.2s; // 호버 효과
}

#idpwfind a:hover {
    color: #e06200; // 진한 주황색
    text-decoration: underline; // 밑줄 추가
}
*/

/* 주석 처리된 소셜 로그인 설명 텍스트 */
/*
.loginSns-p-1 p,
.loginSns-p-2 p {
    text-align: center; // 중앙 정렬
    margin: 5px 0; // 상하 마진
    color: #555; // 컨셉 어두운 회색
    font-size: 15px; // 폰트 크기
}
.loginSns-p-1 p {
     margin-top: 20px; // 상단 마진
     font-weight: 600; // 굵은 글씨
}
*/
/* --- 자체 로그인, 회원가입 관련 CSS 끝 --- */


/* === 반응형 디자인 (컨셉 미디어 쿼리 반영) === */

/* 태블릿 및 모바일 공통 (768px 이하) */
@media (max-width: 768px) {
    .loginHome_Main {
        padding: 0; /* ATM 컨셉처럼 좌우 패딩 제거 */
        margin-top: 0 !important; /* 상단 마진 제거 (전체 래퍼) */
        box-shadow: none; /* 그림자 제거 */
        min-height: 100vh; /* 최소 높이 100vh (모바일에서는 상단바 계산 필요 없을 수 있음) */
        border-radius: 0; /* 둥근 모서리 제거 */
    }
    #loginMCt {
        padding: 20px; /* 컨텐츠 컨테이너 패딩 줄이기 */
        /* margin-bottom 제거 유지 */
        border-radius: 0; /* 둥근 모서리 제거 */
        max-width: 350px; /* 모바일 컨텐츠 최대 너비 */
    }
    .loginTopCt {
        padding: 10px 0; /* 상단 섹션 패딩 줄이기 */
    }
    .loginTopCt-1 p {
        font-size: 26px; /* 제목 폰트 크기 줄이기 */
    }
    .loginTopCt-2 p {
        font-size: 15px; /* 설명 폰트 크기 줄이기 */
    }
    #snsbutton {
        max-width: 220px; /* 소셜 버튼 최대 너비 줄이기 */
        gap: 10px; /* 버튼 간격 줄이기 */
    }
}

/* 더 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
    #loginMCt {
        padding: 15px; /* 컨텐츠 컨테이너 패딩 더 줄이기 */
        max-width: 280px; /* 더 작은 모바일 컨텐츠 최대 너비 */
    }
    .loginTopCt {
        padding: 8px 0; /* 상단 섹션 패딩 더 줄이기 */
    }
    .loginTopCt-1 p {
        font-size: 22px; /* 제목 폰트 크기 더 줄이기 */
    }
    .loginTopCt-2 p {
        font-size: 14px; /* 설명 폰트 크기 더 줄이기 */
    }
    #snsbutton {
        max-width: 200px; /* 소셜 버튼 최대 너비 더 줄이기 */
        gap: 8px; /* 버튼 간격 더 줄이기 */
    }
}