@charset "utf-8";

/* ///////////////////////////////////////////////////////////////////

    데스크탑 스타일

/////////////////////////////////////////////////////////////////// */

/* =================================================================
    변수 설정
==================================================================== */
:root {
    /* header 높이  */
    --header-height: 4.5rem;
}

/* =================================================================
    배경 이미지 설정
==================================================================== */
.body_wrap {
    background: url("../img/body_bg.jpg") no-repeat center/cover;
}

/* =================================================================
    Header 영역
==================================================================== */

/* ---------- Header ---------- */
header {
    padding: 3rem 0 0 3rem;
}

/* ---------- iSIGN+ Logo ---------- */
header .logo_isign img {
    display: inline-block;
    width: 5rem;
}

/* ---------- 컨텐츠 전체 영역 ---------- */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - var(--header-height)) !important;
}

/* =================================================================
    로그인 박스 영역
==================================================================== */
/* ---------- 로그인 박스 감싸는 영역 ---------- */
main .container {
    position: relative;
    /* width: 30rem; */
    width: 26rem;
    height: 40rem;
    padding: 2.15rem;
    border: 0.063rem solid var(--clr-gray20);
    border-radius: 0.875rem;
    margin-bottom: var(--header-height);
    background-color: var(--clr-white);
    box-shadow: var(--shadow);
}

/* ---------- 박스 상단 감싸는 영역 ---------- */
main .container .header {
    padding: 0;
}
/* ---------- 뒤로가기 버튼 요소 감싸는 영역 ---------- */
main .container .header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3.357rem;
}
/* ---------- 뒤로가기 ( Barck ) 버튼 ---------- */
.btn_back {
    margin-bottom: 1rem;
}
.btn_back img {
    position: relative;
    width: 1.357rem;
    height: 1.214rem;
    z-index: 1;
}
/* 원형 배경 설정 */
.btn_back::before {
    content: "";
    position: absolute;
    width: 1.3rem !important;
    height: 1.3rem !important;
    left: 0 !important;
    border-radius: 50%;
    transform-origin: center;
    transform: scale(2);
    transition: all 0.3s;
    background-color: var(--clr-lightblue);
}
.btn_back:hover::before {
    width: 100%;
    left: 0;
    opacity: 1 !important;
}
/* 마우스 오버 시 아이콘 변경(색상) */
.btn_back:hover img {
    /* 반드시 먼저 이미지 크기가 설정되있어야 함 */
    content: url("../img/icon_back_ov.svg");
}

/* ---------- Step 네비게이션 영역 ---------- */
/* 전체 위치 정렬, Back 버튼 아래로 배치하기 위해서..  */
.step_nav {
    display: inline-block;
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
}
/* Step 표시를 이미지로 처리할 경우 */
.step_nav img {
    height: 1.143rem;
}
.step_nav div {
    display: inline-block;
    color: var(--clr-darkgray);
}
/* 채워진 숫자 1, 2 -- ➊ ➋ */
/* 아웃라인 슷자 1, 2 -- ① ② */
.step_nav div span {
    display: inline-block;
    vertical-align: middle;
    padding: 0 0 0.2rem 0.1rem;
}
/* 숫자 활성/비활성 컬러 */
.step_nav div.active {
    color: var(--clr-point);
}
.step_nav div.inactive {
    color: var(--clr-gray30);
}
/* "(...)점점점" */
.step_nav div:nth-child(2) {
    letter-spacing: -0.2rem;
    padding-right: 0.3rem;
    color: var(--clr-gray30);
    margin-bottom: var(--margin4);
}
/* ---------- 페이지 타이틀  ---------- */
.title {
    position: relative;
}
.title h2 {
    font-size: var(--fs-28);
    font-weight: var(--fw-600);
    line-height: 4rem !important;
}
/* ---------- 서포트 텍스트  ---------- */
.title p {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
}

/* ========================== 컨텐츠 영역 (& 폼 영역) ========================= */
/* ---------- 품 영역 전체 ---------- */
main .container .contents {
    margin-top: 2.286rem;
}
/* ---------- 아이디 저장 영역 (위치 조정)  ---------- */
.save_id {
    margin-left: var(--margin16);
}

/* ---------- 에러 메시지 :  ---------- */
#error_message {
    display: none;
    margin-top: -0.571rem;
    padding-left: 1rem;
}
#error_message.active {
    display: block;
}
#error_message p {
    font-size: var(--fs-12);
    font-weight: var(--fw-300);
    color: var(--clr-red);
}
/* ---------- QR Code 자리 표시 영역  ---------- */
.display_qrcode {
    display: table;
    width: 12.714rem;
    height: 12.714rem;
    margin: 0 auto;
    background: url(../../img/user/icon_display_qrcode.svg) no-repeat center / 100%;
}

.display_qrcode table{
    width: 100%;
    height: 100%;
    text-align: center;
}

/* ---------- QR Code 자리 표시 영역  ---------- */
.qrcode {
    display:block;
    width: 100%;
    height: auto;
}


.display_qrcode_guideline { /*custom*/
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
}
.icon_qrcode {/*custom*/
    max-width: 11rem;
    max-height: 11rem;
}
/* ---------- iSIGN+ PASS 앱 아이콘  ---------- */
.icon_app {
    width: 8.571rem;
}
/* ---------- Error Page 아이콘  ---------- */
.icon_error_page {
    width: 10rem;
}

/* =================================================================
    푸터 영역 ( 예시 - 비번 잊으셨나요? )
==================================================================== */
main .container .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
/* 컨테이너 */
main .container .footer > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7rem;
    padding-bottom: 1.4rem;
}
/* 상단에 짧은 라인 표시 */
main .container .footer > div.line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.75rem;
    height: 0.15rem;
    background-color: var(--clr-gray20);
}
/* OTP 등록 페이지만 하단 높이를 줄인다. (내용이 많아서...) */
main .container .footer > div.line.regist_otp {
    height: 3.5rem;
}
main .container .footer > div.line.regist_otp::before {
    opacity: 0;
}

/* ---------- 다른 방식 로그인 아이콘 영역  ---------- */
/* 다른 방식 아이콘 감싸는 영역: 트랜지션용 */
.otherway_container {
    width: 100%;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s;
    opacity: 0;
    pointer-events: none;
}
.otherway_container.active {
    top: 5%;
    opacity: 1;
    pointer-events: auto;
}
.btns_otherway {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.857rem;
}
/* 개별 메뉴 영역 ( 아이콘 + 레이블) */
.btns_otherway > a {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.btns_otherway > a:hover span {
    color: var(--clr-point) !important;
}
/* 개별 메뉴에 마우스 오버 시 */
.btns_otherway > a::before {
    content: "";
    position: absolute;
    width: 2.857rem;
    height: 2.857rem;
    bottom: -0.8rem;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s;
    background-color: var(--clr-primary5);
}
.btns_otherway > a:hover::before {
    width: 2.857rem;
    left: 50%;
    opacity: 1;
}
.btns_otherway > a.no_underline:hover::before {
    width: 2.857rem;
    left: 50%;
    opacity: 1;
}
/* 아이콘 영역 */
.btns_otherway > a > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.286rem;
    z-index: 0;
}
/* 레이블 영역 */
.btns_otherway span {
    height: 20px;
    z-index: 0;
    color: var(--clr-darkgray) !important;
}
/* 이메일 아이콘 */
.btns_otherway .email_way img {
    width: 1.714rem;
}
/* .btns_otherway .email_way:hover img {
    content: url("../img/icon_email_ov.svg");
} */
/* OTP 아이콘 */
.btns_otherway .otp_way img {
    width: 1.286rem;
}
/* .btns_otherway .otp_way:hover img {
    content: url("../img/icon_otp_ov.svg");
} */
/* QR Code 아이콘 */
.btns_otherway .qrcode_way img {
    width: 1.5rem;
}
/* .btns_otherway .qrcode_way:hover img {
    content: url("../img/icon_qrcode_ov.svg");
} */
/* 수동인증 아이콘 */
.btns_otherway .manual_way img {
    width: 1.857rem;
}
/* .btns_otherway .manual_way:hover img {
    content: url("../img/icon_idpw_ov.svg");
} */
/* ---------- 앱설치 QR Code 링크 영역  ---------- */
/* 코드와 버튼 쌍을 감싸는 영역 */
.qrcode_link_area > div {
    padding: var(--margin4) var(--margin4) 1rem var(--margin4);
    border-radius: var(--margin16);
    background-color: var(--clr-green5);
}
/* qrcode image */
.qrcode_link_area > div > div:first-child img {
    /* width: 10.714rem !important; */
    width: 9rem !important;
}
/* 앱스토어 버튼들 */
.qrcode_link_area > div > div:last-child img {
    /* width: 9.286rem !important; */
    width: 7.6rem !important;
}

/* ---------- 하단 메시지 박스  ---------- */
.msg_box {
    margin-bottom: var(--margin16);
    text-align: center;
    font-size: var(--fs-12) !important;
    color: var(--clr-gray60);
}
/* info 아이콘 회색으로 변경 - gray60 */
.msg_box img {
    margin-right: var(--margin4);
    /* 3px */
    padding-bottom: 0.188rem;
    filter: invert(53%) sepia(6%) saturate(125%) hue-rotate(169deg)
    brightness(95%) contrast(93%);
}

/* ---------- L8: OAuth 간편 로그인  ---------- */
div:has(> .simple_login) {
    align-items: flex-start !important;
    padding-top: 1rem;
}
.simple_login {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 100%;
}
.simple_login::before {
    content: "";
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 10rem;
    height: 0.071rem;
    background-color: var(--clr-gray30) !important;
    transform: translate(-50%, 50%);
}
.simple_login span {
    display: inline-block;
    position: absolute;
    padding: 0 1rem;
    top: 0;
    left: 50%;
    color: var(--clr-gray60);
    transform: translate(-50%, -50%);
    background-color: var(--clr-white);
}

/* ---------- L8: 간편 로그인 아이콘들  ---------- */
div.login_logos {
    display: inline-block !important;
    position: absolute;
    width: 80%;
    text-align: center;
    top: 50%;
    left: 50%;
    height: auto !important;
    padding-bottom: 0 !important;
    transform: translate(-50%, -50%);
    z-index: 10;
}
div.login_logos a {
    padding: 0.5rem;
}
/* 링크 시 밑줄 제거 */
div.login_logos a::before {
    display: none;
}
/* 아이콘 크기 설정 */
div.login_logos img {
    display: inline-block;
    width: 1.286rem; /* 18px */
    height: 1.286rem; /* 18px */
}

/* ///////////////////////////////////////////////////////////////////

    모바일 스타일

/////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 767px) {
    /* ---------- body 배경 흰색으로 변경  ---------- */
    html,
    body {
        background-color: var(--clr-white) !important;
    }
    /* ---------- 배경 이미지 제거 ---------- */
    .body_wrap {
        background: none;
    }
    /* ---------- Header (iSIGN+ 로고 위치) ---------- */
    header {
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 0;
        left: 0;
        padding: 0 0 1.5rem 0;
    }
    /* ---------- 로그인 박스 감싸는 영역 ---------- */
    main .container {
        width: 100%;
        border: 0;
        padding-top: 0;
        margin-bottom: initial;
        box-shadow: initial;
        margin-bottom: 0;
    }
    /* ---------- 뒤로가기 버튼 & Step 요소 감싸는 영역 ---------- */
    main .container .header nav {
        justify-content: center;
    }
    .empty {
        display: none;
    }
    /* ---------- 뒤로가기 ( Barck ) 버튼 ---------- */
    .btn_back {
        position: fixed !important;
        top: 3rem;
        left: 3rem;
    }
}