@charset "utf-8";
/* [page: agents] 방문/전화권유판매원 신원확인 시스템 — 카드형 단일 반응형 */

.fps_wrap {
    --ink:   #1c1f26;
    --brand: #d7000f;      /* 사이트 브랜드색 (--BNK-Main) */
    --brand-light: #ff5c66; /* 어두운 히어로 위에서 쓰는 밝은 변형 */
    --brand-ink: #a10009;
    --soft:  #f6f7f9;
    --line:  #e9ebef;
    --muted: #8b929f;
    --text:  #3a3f4a;
    width: 100%; background: var(--soft); color: var(--text);
}
.fps_wrap * { box-sizing: border-box; }

/* ===== 히어로 ===== */
.fps_header {
    position: relative; overflow: hidden; padding: 34px 18px 30px;
    background: linear-gradient(135deg, #20242c 0%, #12141a 100%);
    color: #fff; text-align: center;
}
.fps_header::before {
    content: ""; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(215,0,15,.28), transparent 62%); pointer-events: none;
}
.fps_header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.fps_header_inner { position: relative; }
.fps_eyebrow {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px; padding: 5px 12px;
    font-size: 11.5px; font-weight: 600; color: #cfd3da;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
}
.fps_eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-light); box-shadow: 0 0 0 3px rgba(215,0,15,.30); }
.fps_title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.34; letter-spacing: -.01em; color: #fff; }
.fps_title strong { display: block; color: var(--brand-light); font-weight: 800; }
.fps_subtitle { margin: 11px 0 0; font-size: 13px; color: #aeb4bf; line-height: 1.5; }

/* ===== 본문 ===== */
.fps_body { padding: 18px 14px 48px; }

/* ===== 금융사 필터(약칭) ===== */
.fps_swiper { margin-bottom: 4px; padding: 2px; overflow: hidden; }
.fps_swiper .swiper-wrapper { align-items: stretch; }
.fps_tab {
    width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 16px; margin-right: 8px;
    border-radius: 999px; background: #fff; border: 1px solid var(--line);
    color: #4b5160; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.fps_tab.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(215,0,15,.28); }

/* ===== 결과 요약 ===== */
.fps_resultbar { display: flex; align-items: baseline; gap: 6px; margin: 16px 2px 12px; font-size: 13px; color: var(--muted); }
.fps_resultbar strong { font-size: 15px; font-weight: 800; color: var(--ink); }

/* ===== 카드 목록 ===== */
.fps_list { display: flex; flex-direction: column; gap: 12px; }
.fps_card {
    position: relative; overflow: hidden;
    border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff;
    box-shadow: 0 3px 12px rgba(20,24,33,.05);
}
.fps_card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.fps_card_main { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid #f0f1f4; }
.fps_card_name { flex: 1; margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.fps_card_status {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--brand-ink);
    background: rgba(215,0,15,.08); border: 1px solid rgba(215,0,15,.24); padding: 4px 11px; border-radius: 999px;
}
.fps_card_row { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.fps_card_row .lbl { flex: 0 0 60px; font-size: 12.5px; color: var(--muted); padding-top: 1px; }
.fps_card_row .val { flex: 1; font-size: 14px; color: var(--text); line-height: 1.5; word-break: break-all; }
.fps_empty { padding: 56px 0; text-align: center; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 14px; }

/* 등록증 버튼(카드 하단 풀폭) */
.fps_cert_btn {
    display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
    margin-top: 13px; height: 42px; padding: 0 14px;
    background: var(--soft); border: 1px solid var(--line); border-radius: 10px;
    color: var(--ink); font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.fps_cert_btn svg { color: #6b7280; }
.fps_cert_btn:active { background: #eef0f3; }

/* ===== 페이지네이션 ===== */
.fps_wrap .pg_wrap { margin: 26px 0 4px; text-align: center; }
.fps_wrap .pg { display: inline-flex; gap: 5px; }
.fps_wrap .pg_page,
.fps_wrap .pg_current {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 9px; border-radius: 9px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    color: #5a606e; background: #fff; border: 1px solid var(--line);
}
.fps_wrap .pg_current { color: #fff; background: var(--brand); border-color: var(--brand); font-weight: 800; }

/* ===== 검색 ===== */
.fps_search { margin-top: 22px; }
.fps_search_inner { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 16px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; }
.fps_search_inner:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(215,0,15,.12); }
.fps_search_ico { flex: 0 0 auto; color: #a4a9b3; display: inline-flex; }
.fps_search_inp { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 4px; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ink); }
.fps_search_inp::placeholder { color: #a9aeb8; }
.fps_search_btn { flex: 0 0 auto; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }

/* ===== 등록증 팝업 ===== */
.fps_modal { display: none; position: fixed; inset: 0; z-index: 10000; }
.fps_modal.on { display: block; }
.fps_modal_dim { position: absolute; inset: 0; background: rgba(15,18,24,.55); backdrop-filter: blur(3px); }
.fps_modal_box {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 92%; max-width: 460px; max-height: 88vh;
    display: flex; flex-direction: column; background: #fff; border-radius: 14px;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.fps_modal_head { position: relative; display: flex; align-items: center; justify-content: center; padding: 15px 46px; background: #fff; border-bottom: 1px solid var(--line); }
.fps_modal_title { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.fps_modal_close { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: var(--soft); font-size: 21px; line-height: 1; color: #555; cursor: pointer; }
.fps_modal_body { padding: 16px; overflow: auto; text-align: center; background: var(--soft); }
.fps_modal_img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.fps_modal_noimg { padding: 50px 0; color: var(--muted); }