@charset "UTF-8";
/* =========================================================
 * ANY-ID 본인인증 화면 전용 스타일 (SB-001 / SB-002 / SB-005)
 * - 화면설계서 v1.1(조정민, 2026-05-20) 시안 인라인 style 기준
 * - 헤더 본인인증 버튼(인증 전) / 인증 후 사용자영역 / 방식선택 모달
 * - 기존 공유 CSS(main/layout/component)는 수정하지 않고 본 파일로 격리
 * - .header .util-menu(layout.css:61, display:flex)는 재정의하지 않음
 * ========================================================= */

/* ===== SB-001 : 본인인증 진입 버튼 (인증 전) ===== */
.anyid-entry { display:flex; align-items:center; }
.anyid-entry .anyid-btn {
    display:inline-flex; align-items:center; gap:8px;
    height:40px; padding:0 18px;
    background:#fff; border:1.5px solid #1F9DD5;
    color:#1F9DD5;
    border-radius:999px;
    font-size:14px; font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    transition:all 0.15s;
    cursor:pointer;
}
.anyid-entry .anyid-btn:hover { background:#1F9DD5; color:#fff; }
.anyid-entry .anyid-btn .ico { width:16px; height:16px; }

/* ===== SB-005 : 인증 후 사용자 영역 ===== */
.anyid-user {
    display:inline-flex; align-items:center; gap:10px;
    height:40px; padding:0 16px;
    background:#1F9DD5; border:1.5px solid #1F9DD5;
    color:#fff;
    border-radius:999px;
    font-size:14px; font-weight:700;
    white-space:nowrap;
}
.anyid-user .ico { width:16px; height:16px; flex-shrink:0; }
.anyid-user .nm { color:#fff; }
.anyid-user .timer {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px;
    background:#fff; color:#1F9DD5;
    border-radius:999px;
    font-size:13px; font-weight:700;
    font-variant-numeric:tabular-nums;
}
.anyid-user .timer::before {
    content:""; width:6px; height:6px; border-radius:50%;
    background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,0.25);
}
.anyid-user .extend-btn,
.anyid-user .logout-btn {
    display:inline-flex; align-items:center;
    height:28px; padding:0 10px;
    background:transparent; border:1px solid rgba(255,255,255,0.6);
    color:#fff; border-radius:999px;
    font-size:12px; font-weight:600; cursor:pointer;
    text-decoration:none;
    transition:all 0.15s;
}
.anyid-user .extend-btn:hover,
.anyid-user .logout-btn:hover { background:#fff; color:#1F9DD5; border-color:#fff; }
.anyid-user .divider { width:1px; height:18px; background:rgba(255,255,255,0.4); }

/* ===== SB-002 : 본인인증 방식 선택 모달 ===== */
.auth_mask {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.5);
    z-index:9000;
    align-items:center; justify-content:center; padding:24px;
}
.auth_mask.is_open { display:flex; }
.auth_modal {
    width:100%; max-width:620px;
    background:#fff; border-radius:14px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,0.25);
}
.auth_modal .m_head {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px;
    background:#1F9DD5; color:#fff;
}
.auth_modal .m_head h3 {
    font-size:18px; font-weight:700;
    display:flex; align-items:center; gap:10px;
    margin:0;
}
.auth_modal .m_head h3 .ico { width:22px; height:22px; }
.auth_modal .m_head .x_btn {
    width:30px; height:30px;
    background:transparent; border:1px solid rgba(255,255,255,0.5); border-radius:5px;
    color:#fff; font-size:18px; line-height:1; cursor:pointer;
}
.auth_modal .m_body { padding:26px 30px 28px; }

.auth_info_notice {
    padding:14px 18px;
    background:#f5fafd; border:1px solid #cce6f3;
    border-left:4px solid #1F9DD5;
    border-radius:6px;
    font-size:13px; color:#333; line-height:1.7;
    margin-bottom:22px;
}
.auth_info_notice .tag {
    display:inline-block;
    background:#1F9DD5; color:#fff;
    font-size:11px; font-weight:700;
    padding:2px 8px; border-radius:3px;
    margin-right:6px; vertical-align:middle;
}
.auth_info_notice b { color:#1F9DD5; font-weight:700; }

.auth_m_title { font-size:20px; font-weight:700; color:#202020; margin:0 0 6px 0; }
.auth_m_sub { font-size:13px; color:#666; line-height:1.6; margin:0 0 22px 0; }

.auth_choice {
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.auth_choice .choice {
    position:relative;
    display:flex; flex-direction:column;
    min-height:200px;
    padding:22px 20px 20px;
    background:#fff;
    border:1.5px solid #d0d6dc;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.15s;
    text-decoration:none; color:inherit;
}
.auth_choice .choice:hover {
    border-color:#1F9DD5; background:#f5fafd;
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(31,157,213,0.18);
}
.auth_choice .choice .badge {
    position:absolute; top:-10px; left:18px;
    font-size:11px; font-weight:700;
    padding:4px 10px;
    border-radius:999px;
}
.auth_choice .choice.recommend { border-color:#1F9DD5; background:#fafcfe; }
.auth_choice .choice.recommend .badge { background:#1F9DD5; color:#fff; }
.auth_choice .choice.legacy .badge { background:#6c757d; color:#fff; }
.auth_choice .choice .ico_wrap {
    width:54px; height:54px; border-radius:50%;
    background:#eaf4fa;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    color:#1F9DD5;
}
.auth_choice .choice .ico_wrap svg { width:30px; height:30px; }
.auth_choice .choice.legacy .ico_wrap { background:#eef0f3; color:#555; }
.auth_choice .choice .nm {
    font-size:18px; font-weight:700; color:#202020;
    margin-bottom:8px;
    display:flex; align-items:center; gap:6px;
}
.auth_choice .choice .nm .arrow { width:18px; height:18px; color:#999; transition:transform 0.15s; }
.auth_choice .choice:hover .nm .arrow { color:#1F9DD5; transform:translateX(3px); }
.auth_choice .choice .desc { font-size:12.5px; color:#666; line-height:1.55; }

.auth_help_line {
    margin-top:18px;
    padding-top:14px; border-top:1px dashed #d8dde3;
    font-size:12px; color:#777; line-height:1.7;
}
.auth_help_line strong { color:#1F9DD5; }

@media (max-width: 580px) {
    .auth_choice { grid-template-columns:1fr; }
    .auth_modal .m_body { padding:22px 20px; }
}