@charset "UTF-8";

/* =========================================================
   OST 로그인 페이지 커스텀 스타일 (login2.css)
   - OST_login.jsp 전용 (.login_body 스코프)
   - 기존 login.css 위에 덮어써서 적용
   ========================================================= */

.auth_btn_area{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.btn_auth{
    width:30%;
    height:40px;
    border:0;
    border-radius:6px;
    background:#0d6efd;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
}

.btn_auth:hover{
    background:#0b5ed7;
}

.btn_auth:active{
    transform:scale(0.98);
}

.btn_auth_ok{
    background:#28a745;
}

.btn_auth_ok:hover{
    background:#218838;
}

.btn_auth:disabled{
    background:#bdbdbd;
    cursor:not-allowed;
}

/* 입력창 : 각진 테두리 → 살짝 둥글게 + 안쪽 입체감 */
.login_body .input_login{
    border-radius:6px !important;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.10) !important;
}
.login_body .input_login:focus{
    box-shadow:inset 0 1px 3px rgba(0,0,0,.10), 0 0 0 3px rgba(63,108,176,.20) !important;
    border-color:#7ea3d4 !important;
}

/* 로그인 버튼 : 살짝 둥글게 + 볼록한 입체감 (태양광 블루) */
.login_body .btn_login{
    border-radius:6px !important;
    background:linear-gradient(135deg,#5183c5 0%,#3a5f9e 100%) !important;
    box-shadow:0 4px 0 rgba(41,71,120,.35), 0 6px 14px rgba(41,71,120,.25) !important;
}
.login_body .btn_login:hover{ background:linear-gradient(135deg,#5b8ecf 0%,#41689f 100%) !important; }
.login_body .btn_login:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.20) !important;
}

/* 참여기업 로그인(공동인증서) 버튼 : 로그인 버튼과 동일한 형태, 색상만 그린 */
.login_body .cnsrm_login{ margin-top:12px !important; }
.login_body .btn_login_cnsrm{
    display:block !important; box-sizing:border-box;
    width:100% !important; height:50px !important; line-height:50px !important;
    border:0 !important; border-radius:6px !important;
    font-size:17px !important; font-weight:500; color:#fff !important;
    text-align:center; cursor:pointer; transition:all .2s !important;
    background:linear-gradient(135deg,#2f9e63 0%,#1e7d4c 100%) !important;
    box-shadow:0 4px 0 rgba(24,94,58,.35), 0 6px 14px rgba(24,94,58,.25) !important;
}
.login_body .btn_login_cnsrm:hover{ background:linear-gradient(135deg,#37ab6e 0%,#228855 100%) !important; }
.login_body .btn_login_cnsrm:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.20) !important;
}

/* 인증번호 발급/확인 버튼 : 로그인과 동일한 타입(태양광 블루)으로 통일 */
.login_body .btn_auth,
.login_body .btn_auth_ok{
    font-family:inherit !important;
    font-weight:500 !important;
    color:#fff !important;
    background:#3f6cb0 !important;
    border:0 !important;
    border-radius:6px !important;
    box-shadow:0 3px 0 rgba(41,71,120,.30), 0 4px 10px rgba(41,71,120,.18) !important;
    transition:all .2s !important;
}
.login_body .btn_auth:hover,
.login_body .btn_auth_ok:hover{ background:#345a96 !important; }
.login_body .btn_auth:active,
.login_body .btn_auth_ok:active{
    transform:translateY(2px);
    box-shadow:0 1px 0 rgba(0,0,0,.15), 0 2px 5px rgba(0,0,0,.15) !important;
}
.login_body .btn_auth:disabled{
    background:#cfcfcf !important; box-shadow:none !important; cursor:not-allowed;
}

/* 안내글 : 명확하고 깔끔한 알림 형태 */
.login_body .phone_notice{
    display:flex; align-items:center; gap:7px;
    margin:16px 0 10px !important; padding:10px 12px;
    background:#eaf3fb; border:1px solid #c5def2; border-radius:6px;
    font-size:12px; color:#35618a; line-height:1.4; letter-spacing:-.3px;
}
.login_body .phone_notice b{ color:#2f5fa0; font-weight:700; }
.login_body .phone_notice:before{
    content:""; flex:0 0 auto; width:15px; height:15px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%233f6cb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* 회원가입 : 깔끔한 보조 버튼 (블루 아웃라인) */
.login_body .signup{ margin-top:12px !important; text-align:center; }
.login_body .signup a{
    display:block; box-sizing:border-box;
    height:50px; line-height:48px;
    border:1px solid #3f6cb0 !important; border-radius:6px;
    background:#fff; color:#345a96 !important; font-size:15px !important; font-weight:500;
    text-decoration:none; transition:all .2s;
}
.login_body .signup a:hover{ background:#eaf3fb; }

/* 버튼들을 감싸는 흰색 박스 : 모서리 둥글게 */
.login_body .login_box_wrap{
    border-radius:14px !important;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.18) !important;
}

/* 배경 일러스트가 잘 보이도록 위치·크기 조정 (좌측 기준 cover) */
.login_body .login_contents:before{
    top:0 !important;
    background-position:left bottom !important;
    background-size:cover !important;
}

/* 인증번호 확인 버튼 : 이미지 속 잎사귀 그린으로 구분 */
.login_body .btn_auth_ok{
    background:#5aa46a !important;
    box-shadow:0 3px 0 rgba(52,110,70,.30), 0 4px 10px rgba(52,110,70,.18) !important;
}
.login_body .btn_auth_ok:hover{ background:#4a8f59 !important; }

/* 아이디/비밀번호 : 아이콘 + 라벨 + 구분바 + 입력창 (참고 이미지 형태) */
.login_body .login_lay .ipt_area p.field_row{
    display:flex !important; align-items:center;
    margin:0 !important; padding:0 !important; height:44px;
    border:1.5px solid #dfe2e7; border-radius:6px; background:#f4f5f7;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
    overflow:hidden; transition:border-color .2s, box-shadow .2s, background .2s;
}
.login_body .login_lay .ipt_area p.field_row.field_row_gap{ margin-top:10px !important; }
.login_body .login_lay .ipt_area p.field_row:focus-within{
    border-color:#7ea3d4; background:#fff;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.05), 0 0 0 3px rgba(63,108,176,.18);
}
.login_body .field_label{
    position:relative;
    display:flex; align-items:center; gap:7px; flex:0 0 auto; height:100%;
    width:106px; box-sizing:border-box;               /* 두 필드 라벨 폭 동일 → 입력창 폭 동일 */
    padding:0 14px; font-size:14px; font-weight:700; color:#3a4048; white-space:nowrap;
}
.login_body .field_label:after{                        /* 연하고 가는 세로 구분바 (위아래 여백) */
    content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:1px; height:20px; background:#e5e7ea;
}
.login_body .field_label:before{
    content:""; width:18px; height:18px; flex:0 0 auto;
    background-repeat:no-repeat; background-position:center; background-size:contain;
}
.login_body .field_label_id:before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235aa46a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 19 4'/%3E%3Cpath d='M17 5l2.5 2.5'/%3E%3Cpath d='M14.5 7.5 17 10'/%3E%3C/svg%3E");
}
.login_body .field_label_pw:before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%233a4048'%3E%3Cpath d='M17 9V7A5 5 0 0 0 7 7v2a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM9 7a3 3 0 0 1 6 0v2H9zm4 8.72V17a1 1 0 0 1-2 0v-1.28a2 2 0 1 1 2 0z'/%3E%3C/svg%3E");
}
/* 필드 안 입력창 : 테두리 제거, 배경 투명 (바깥 field_row가 필드 역할) */
.login_body .field_row .input_login{
    flex:1 1 auto; width:auto !important; height:100% !important;
    border:0 !important; background:transparent !important; box-shadow:none !important;
    border-radius:0 !important; padding:0 14px !important;
}

/* 상단 : 한국에너지공단 로고 + (타이틀 + 설명) 블록 */
.login_body .login_header_inner{ display:flex !important; align-items:center; }
.login_body .login_header .brand_wrap{ display:flex; align-items:center; }
.login_body .login_header .brand_wrap .brand_logo{
    display:inline-block; width:166px; height:30px;   /* 원본(166x30) 유지 → 깨짐 방지 */
    margin-right:16px;
    background:url("../../images/login/idty_header.png") no-repeat left center;
    background-size:contain;
}
.login_body .login_header .brand_texts{
    border-left:1px solid #d5dae2;      /* 타이틀+멘트 전체 높이를 감싸는 구분선 */
    padding-left:16px;
}
.login_body .login_header .tit_h1{ position:static !important; }
.login_body .login_header .tit_h1 .brand_title{
    display:inline-block; text-decoration:none;
    font-size:25px; font-weight:800; letter-spacing:-1px; color:#2f5fa0;
}
.login_body .login_header .tit_dec{
    position:static !important; margin-top:6px !important;
    color:#5a6675 !important; letter-spacing:-.3px;
}

/* 푸터 : 로그인 버튼과 동일한 블루 + 무채색(흰색) 로고 */
.login_body .login_footer{
    background:linear-gradient(135deg,#5183c5 0%,#3a5f9e 100%) !important;
}
.login_body .login_footer .login_footer_inner{
    display:flex !important; align-items:center; justify-content:center; gap:14px;
    background:transparent !important;
}
.login_body .login_footer .footer_logo{ align-self:center; }
.login_body .login_footer .footer_logo{
    display:inline-block; width:166px; height:30px;   /* 원본(166x30) → 두 줄 높이에 맞춤 */
    background:url("../../images/login/idty_header.png") no-repeat left center;
    background-size:contain;
    filter:brightness(0) invert(1);   /* 색 제거 → 흰색 로고 */
    opacity:.95;
}
.login_body .login_footer .login_footer_inner address{
    display:flex; flex-direction:column; justify-content:center;
    text-align:left; line-height:1.55;
    padding:0 !important; margin:0 !important;   /* login.css의 padding-top:22px 제거 → 중앙 정렬 */
    color:rgba(255,255,255,.9) !important;
}
.login_body .login_footer .login_footer_inner address .ft_line{ display:block; }
.login_body .login_footer .login_footer_inner address .privacy_link{
    color:#fff !important; font-weight:600; text-decoration:underline; text-underline-offset:2px;
}
.login_body .login_footer .login_footer_inner address .privacy_link:hover{ opacity:.85; }

/* ===== 노트북 등 낮은 해상도(화면 높이) 대응 : 상단 여백 축소로 화면에 맞춤 ===== */
@media (max-height: 940px){
    .login_body .login_box_section{ padding-top:90px !important; }
    .login_body .login_dec_area{ top:90px !important; }
}
@media (max-height: 820px){
    .login_body .login_box_section{ padding-top:52px !important; }
    .login_body .login_dec_area{ top:52px !important; }
}
@media (max-height: 730px){
    .login_body .login_box_section{ padding-top:26px !important; }
    .login_body .login_dec_area{ top:26px !important; }
    .login_body .login_box_section .login_box_wrap{ padding:32px 40px !important; }
}
@media (max-height: 660px){
    .login_body .login_box_section{ padding-top:14px !important; }
    .login_body .login_dec_area{ top:14px !important; }
}

/* ===== 세로 컴팩트 : 입력/버튼 높이 축소 (전 해상도 공통) ===== */
.login_body .login_lay .ipt_area .input_login{ height:44px !important; min-width:0 !important; }  /* 휴대전화·인증번호 입력 (오른쪽 넘침 방지) */
.login_body .field_row .input_login{ height:100% !important; min-width:0 !important; }            /* 아이디·비밀번호(필드 높이 따라감) */
.login_body .btn_auth,
.login_body .btn_auth_ok{                                                 /* 인증 버튼 : 높이 44 + 고정폭('인증번호 재발급' 기준) */
    height:44px !important; font-size:13px !important;
    padding:0 8px !important; width:112px !important; min-width:112px !important;
    white-space:nowrap; flex:0 0 112px; text-align:center;
}
.login_body .field_label:after{ height:18px; }
.login_body .login_lay .ipt_area p.field_row.field_row_gap{ margin-top:8px !important; }
.login_body .phone_notice{ margin:12px 0 8px !important; padding:8px 12px; }
.login_body .login_lay .ipt_btn_area{ margin-top:14px !important; }
.login_body .btn_login{ height:50px !important; line-height:50px !important; font-size:17px !important; }  /* 로그인 버튼(기존 67px→50px, 글자 축소) */
.login_body .signup{ margin-top:10px !important; }
.login_body .signup a{ height:44px !important; line-height:42px !important; }

/* ===== 레이아웃 : 좌우 컬럼 동일 높이 (로그인 폼 == 개인정보 패널) ===== */
.login_body .login_contents_inner{
    width:1000px !important; transform:none;               /* 화면 중앙 정렬 (좌 500 / 우 500) */
    display:flex !important; align-items:stretch;          /* 두 컬럼 높이 동일 */
}
.login_body .login_box_section{ width:500px !important; flex:0 0 500px; }   /* 왼쪽(로그인) */
/* 로그인 카드는 컬럼 왼쪽으로 정렬 (개인정보 카드는 같은 만큼 오른쪽 정렬 → 좌우 대칭) */
.login_body .login_box_section .login_box_wrap{ margin:0 auto 0 0 !important; }
/* form/fieldset/legend 여백 제거 → 컬럼 높이 == login_box_wrap 높이 → 개인정보 카드 동일 높이 */
.login_body .login_box_section form{ margin:0; padding:0; }
.login_body .login_box_section fieldset{ margin:0; padding:0; border:0; }
.login_body .login_box_section legend{ display:none; }
.login_body .login_dec_section{
    width:500px !important; flex:0 0 500px;                /* 오른쪽(개인정보) : 로그인 컬럼과 동일 폭 */
    position:relative;                 /* 개인정보 카드(absolute)의 기준 */
    display:flex; box-sizing:border-box; min-height:0;
}

/* ===== 개인정보 수집·이용안내 패널 (로그인 카드와 동일 높이 + 내부 스크롤) ===== */
.login_body .login_dec_area{
    position:absolute; top:150px; bottom:0;   /* 높이 = 로그인 카드와 정확히 동일 (컬럼높이 - top) */
    right:-50px;                        /* 오른쪽으로 50px 이동 */
    width:500px;                        /* 가로 길이 500 */
    display:flex; flex-direction:column; min-height:0;
    background:#fff; border:1px solid #e6e8ec; border-radius:14px;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.18);
    overflow:hidden; padding:0 !important; box-sizing:border-box;
}
.login_body .login_dec_area .astitle{
    flex:0 0 auto; padding:15px 20px;
    background:linear-gradient(135deg,#5183c5 0%,#3a5f9e 100%);
    color:#fff; font-size:16px; font-weight:700; letter-spacing:-.4px;
}
.login_body .login_dec_area .sg_ua_box{
    flex:1 1 auto; min-height:0; overflow-y:auto;   /* 넘치면 세로 스크롤 */
    padding:16px 20px;
    font-size:12.5px; line-height:1.7; color:#4a5560; letter-spacing:-.2px;
    white-space:normal; word-break:keep-all; overflow-wrap:anywhere;  /* 좁은 폭에서 자동 줄바꿈 */
}
.login_body .login_dec_area .sg_ua_box:focus{ outline:none; }
/* 스크롤바 */
.login_body .login_dec_area .sg_ua_box::-webkit-scrollbar{ width:8px; }
.login_body .login_dec_area .sg_ua_box::-webkit-scrollbar-thumb{ background:#c7ccd3; border-radius:4px; }
.login_body .login_dec_area .sg_ua_box::-webkit-scrollbar-thumb:hover{ background:#aab1ba; }
.login_body .login_dec_area .sg_ua_box::-webkit-scrollbar-track{ background:#f1f2f4; }
/* 동의(확인) 영역 */
.login_body .login_dec_area .sg_ua_checkbox{
    flex:0 0 auto; padding:14px 20px; border-top:1px solid #eef0f3; background:#fafbfc;
}
.login_body .login_dec_area .sg_ua_checkbox .ua_agree{ font-size:13px; color:#333; }
.login_body .login_dec_area .sg_ua_checkbox .input_radio_txt2{ font-weight:700; color:#2f5fa0; cursor:pointer; }
/* 라디오 버튼 중복(전역 배경아이콘 + 네이티브) 제거 → 네이티브 1개만 표시 */
.login_body .login_dec_area .sg_ua_checkbox input[type="radio"]{
    -webkit-appearance:radio !important; appearance:radio !important;
    width:16px !important; height:16px !important; padding:0 !important; margin:0 5px 0 0 !important;
    background:none !important; vertical-align:middle;
}
.login_body .login_dec_area .sg_ua_checkbox input[type="radio"] + label{
    background:none !important; padding-left:0 !important; height:auto !important; line-height:normal !important;
    vertical-align:middle;
}

/* ===== 인증번호 카운트다운 타이머 ===== */
/* 인증번호 입력창 래퍼(타이머를 입력창 안에 겹쳐 표시) */
.login_body .auth_ipt_wrap{ flex:1 1 auto; min-width:0; display:flex; position:relative; }
.login_body .auth_timer{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    visibility:hidden; pointer-events:none;           /* 입력창 안 오른쪽에 겹쳐 표시 */
    font-size:13px; font-weight:700; color:#e03131; letter-spacing:0; white-space:nowrap;
}
/* 타이머/인증완료 글자와 입력 텍스트가 겹치지 않도록 오른쪽 여백 확보 */
.login_body #txtCTFCN_NO{ padding-right:60px !important; }

/* design.js가 포커스 시 .input_focus 를 노출 → flex 행에서 입력창 크기가 변동됨 → 숨김 */
.login_body .input_focus{ display:none !important; }

/* ===== 상단 이동 버튼 : 유형 선택(홈)으로 — 조회 페이지와 동일 ===== */
.login_body .login_wrapper{ position:relative; }
.login_body .home_topbar{
    position:absolute; top:18px; left:24px; z-index:30;
    display:flex; gap:8px;
}
.login_body .home_topbar .topbar_btn{
    display:inline-flex; align-items:center; gap:7px;
    height:40px; padding:0 18px 0 14px; box-sizing:border-box;
    border:1px solid #d4ddea; border-radius:20px; cursor:pointer;
    font-size:14px; font-weight:700; letter-spacing:-.3px; color:#345a96;
    background:rgba(255,255,255,.92);
    box-shadow:0 6px 16px -6px rgba(35,58,94,.28);
    transition:all .2s;
}
.login_body .home_topbar .topbar_btn:hover{ background:#fff; border-color:#b9c7dc; transform:translateY(-1px); box-shadow:0 10px 20px -8px rgba(35,58,94,.34); }
.login_body .home_topbar .topbar_btn:active{ transform:translateY(0); box-shadow:0 4px 10px -4px rgba(35,58,94,.3); }
.login_body .home_topbar .topbar_btn .ic_home{
    width:16px; height:16px; flex:0 0 auto;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a5f9e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") no-repeat center/contain;
}