@charset "utf-8";
/*
 * 정부 통합인증(Any-ID) 화면 하단 '이용기관 로그인' 영역
 *
 * 연계가이드 6.4.1 의 'B : 이용기관 로그인 화면 영역' 으로, SDK 가 그리는 인증수단 카드와
 * 동일한 모양을 맞추기 위해 작성한다.
 *
 * SDK 의 css(anyidc.css, certificates.css)는 Shadow DOM 안에서 로드되어 바깥 요소에는
 * 적용되지 않는다. 별도로 로드할 수도 있으나 certificates.css 의 `li, ol, ul { list-style: none }`
 * 같은 전역 규칙이 화면 전체에 영향을 주므로, 필요한 값만 옮겨 자체 작성한다.
 *
 * 다른 화면에 영향을 주지 않도록 모든 선택자를 .org-certify-wrap 하위로 한정한다.
 * (mps 의 SCSS 빌드 산출물과 분리하기 위해 별도 파일로 둔다)
 */

/* SDK 루트(#anyidc)가 max-width:1280px + margin:auto 로 가운데 정렬되므로
   좌우 정렬을 맞추기 위해 동일한 제약을 적용한다. */
.org-certify-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 40px auto 0;
}

/* Any-ID 미사용 시에는 이 영역이 화면 최상단이 되므로 상단 여백을 두지 않는다 */
.org-certify-wrap.is-top {
    margin-top: 0;
}

.org-certify-wrap .tit-wrap {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    /* border-bottom: 1px solid #d8d8d8; */
}

.org-certify-wrap .certify-opt-tit {
    flex-shrink: 0;
    font-size: 20px;
    color: #1d1d1d;
    font-weight: 700;
}

/* 카드 배치는 SDK 인증수단 영역(certificates.css)과 동일한 기준으로 맞춘다 */
.org-certify-wrap .certify-type {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 14px;
    width: 100%;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.org-certify-wrap .certify-type > li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(33.33% - 16px);
    padding: 0;
    background-color: #f8f8f8;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
}

.org-certify-wrap .certify-type > li .login-link {
    display: block;
    width: 100%;
    padding: 32px 32px 32px 88px;
    text-decoration: none;
}

.org-certify-wrap .certify-type > li .login-link:focus-visible {
    outline-offset: 4px;
    outline: 2px solid rgba(36, 107, 235, .8);
    border-radius: 0;
}

/* 좌측 수단 아이콘 / 우측 화살표 (Any-ID 표준 화면과 동일한 SVG) */
.org-certify-wrap .certify-type > li::before,
.org-certify-wrap .certify-type > li::after {
    position: absolute;
    top: 32px;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
}

.org-certify-wrap .certify-type > li::before {
    left: 32px;
    width: 32px;
    height: 32px;
}

.org-certify-wrap .certify-type > li::after {
    right: 32px;
    width: 24px;
    height: 24px;
    background-image: url(../../images/kird/anyid/ico_login_certify_go.svg);
}

.org-certify-wrap .certify-type > li.id::before {
    background-image: url(../../images/kird/anyid/ico_login_certify_id.svg);
}

.org-certify-wrap .certify-type > li .type-tit {
    font-size: 20px;
    color: #1d1d1d;
    font-weight: 700;
}

.org-certify-wrap .certify-type > li .type-desc {
    margin-top: 12px;
    padding-right: 48px;
    color: #555;
    font-size: 13px;
    letter-spacing: -.7px;
}

/* 모바일 : SDK 인증수단 카드와 동일한 폭·여백 기준 */
@media (max-width: 767px) {
    .org-certify-wrap .certify-type {
        column-gap: 16px;
        row-gap: 16px;
    }

    .org-certify-wrap .certify-type > li {
        width: calc(33.33% - 10.66667px);
    }

    .org-certify-wrap .certify-type > li .login-link {
        padding: 20px 16px 20px 16px;
    }

    .org-certify-wrap .certify-type > li::before {
        top: 20px;
        left: 16px;
        width: 24px;
        height: 24px;
    }

    /* 폭이 좁아 화살표는 숨긴다 */
    .org-certify-wrap .certify-type > li::after {
        display: none;
    }

    .org-certify-wrap .certify-type > li .type-tit {
        margin-top: 32px;
        font-size: 15px;
    }

    /* 설명문은 PC 에서만 노출 (SDK 의 pc-only 와 동일) */
    .org-certify-wrap .certify-type > li .type-desc {
        display: none;
    }
}

/* ============================================================
 * 정부 통합인증(Any-ID) 준비중 안내
 *
 * 오픈 전에는 SDK 인증수단 영역(x-anyidc)을 출력하지 않고 이 박스로 대체한다.
 * (빈 커스텀 엘리먼트를 두면 높이가 0이 되어 레이아웃이 깨진다)
 * 오픈 시 anyid.ready=Y 로 바꾸면 이 박스는 사라진다.
 * ============================================================ */
.anyid-ready-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1280px;
    min-height: 180px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #f8f8f8;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    text-align: center;
}

.anyid-ready-box .ready-tit {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1d;
}

.anyid-ready-box .ready-desc {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    color: #58585a;
}

/* 아이디/비밀번호 찾기 화면의 Any-ID 카드 (find__box) 준비중 처리
   카드 자체는 그대로 두고, 내용만 흐리게 + 클릭 불가로 만든다.
   .find__box 는 flex 컨테이너라 자식이 한 겹 더 생기면 가운데 정렬이 풀린다.
   래퍼에 동일한 정렬을 줘서 원래 모양을 유지한다. */
.find__box .anyid-ready-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    filter: grayscale(100%);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}

.find__box .anyid-ready-note {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #58585a;
}

@media screen and (max-width: 767px) {
    .anyid-ready-box {
        min-height: 140px;
        padding: 28px 16px;
    }

    .anyid-ready-box .ready-tit {
        font-size: 17px;
    }

    .anyid-ready-box .ready-desc {
        font-size: 14px;
    }
}