@charset "utf-8";

/*
 * 피해자 본인 신청 목록 — 카드형 (apc / appel 공통, 2026-10-11)
 *
 * 연관 파일
 *   VctmListCard.java                 켜기(tacss.aply.list.vctm-card=Y)·카드 모델
 *   pages/common/vctmCardList.jsp     카드·간단 검색 마크업 + 화면 안 거르기 스크립트
 *   aplyProgress.tag / progress.css   카드 안 진행 단계(상세와 같은 모양 A/B/C)
 *
 * ※ progress.css 뒤에 로드 (--color-* 변수 의존)
 */

/* ── 간단 검색: 상태 탭 + 번호 한 칸 + [더보기] 기간 ── */
.vc_srch {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 20px 24px; border: 1px solid #c9d2e0; border-top: 3px solid var(--color-navy); border-radius: 10px;
    background: #f3f6fb;
}
.vc_tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.vc_tab {
    height: 44px; padding: 0 20px; border: 1px solid #b9c3d3; border-radius: 22px; background: #fff;
    font-size: 16px; font-weight: 600; color: #333; cursor: pointer;
}
.vc_tab:hover { border-color: var(--color-navy); }
.vc_tab em { margin-left: 6px; font-style: normal; font-weight: 700; color: var(--color-navy); }
.vc_tab.on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.vc_tab.on em { color: #fff; }
.vc_tab.zero, .vc_tab.zero em { color: #a3abb8; font-weight: 500; }
.vc_find { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vc_find input[type=text] {
    width: 300px; height: 46px; padding: 0 14px; border: 1px solid #8f9bb0; border-radius: 6px; background: #fff;
    font-size: 16px; color: #222;
}
.vc_find input[type=text]::placeholder { color: #6b7485; }
.vc_find input[type=text]:focus { outline: none; border-color: var(--color-navy); box-shadow: 0 0 0 3px rgba(0, 54, 104, .15); }
.vc_find .btn { height: 46px; padding: 0 18px; font-size: 16px; }
.vc_more {
    height: 46px; padding: 0 14px; border: 1px solid #8f9bb0; border-radius: 6px; background: #fff;
    color: #333; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vc_more[aria-expanded=true] { border-color: var(--color-navy); color: var(--color-navy); }
.vc_period {
    width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 2px; padding-top: 14px; border-top: 1px solid #d5dce8; font-size: 15px; color: #444;
}
.vc_period[hidden] { display: none; }
.vc_period b { font-size: 16px; color: #222; }
.vc_range { display: inline-flex; align-items: center; gap: 8px; }
.vc_period select, .vc_period input { height: 42px; padding: 0 10px; border: 1px solid #8f9bb0; border-radius: 6px; background: #fff; font-size: 15px; }
.vc_quick {
    height: 38px; padding: 0 14px; border: 1px solid #b9c3d3; border-radius: 19px; background: #fff;
    color: #333; font-size: 15px; cursor: pointer;
}
.vc_quick:hover { border-color: var(--color-navy); color: var(--color-navy); }

/* ── 카드 ── */
.vc_list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
/* 왼쪽 굵은 띠 = 상태 색(진행 중 파랑·반송 빨강·종결 초록). 아래 줄(.vc_foot)은 카드 바닥까지 채운 옅은 띠 */
.vc {
    --vc-accent: var(--color-primary); --vc-soft: #eef3ff;
    overflow: hidden; padding: 22px 26px 0; border: 1px solid #dbe1ea; border-left: 6px solid var(--vc-accent);
    border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0, 40, 90, .06); transition: box-shadow .15s;
}
.vc:hover { box-shadow: 0 6px 18px rgba(0, 40, 90, .12); }
.vc[hidden] { display: none; }
.vc.ret { --vc-accent: #d63031; --vc-soft: #fff4f4; border-color: #f1b8b8; border-left-color: var(--vc-accent); }
.vc.end { --vc-accent: #2e9e55; --vc-soft: #eef8f1; }
details.vc:not([open]) { padding-bottom: 22px; }   /* 접힌 종결 카드는 아래 줄이 없다 */
.vc_head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; list-style: none; }
.vc_head::-webkit-details-marker { display: none; }
.vc_head .prg_no { margin: 0; }
.vc_head .prg_no_item:first-child { border: 0; background: none; padding-left: 0; font-size: 14px; white-space: nowrap; }
.vc_head .prg_no_item:first-child b { font-size: 20px; color: #111; letter-spacing: -.2px; }
.vc_state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.vc_pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 18px; background: var(--vc-accent); color: #fff; font-size: 15px; font-weight: 700;
}
.vc_pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.vc.end .vc_pill { background: var(--vc-soft); color: #1f7a3a; }
.vc.end .vc_pill::before { background: #2e9e55; }
/* 반송 배지 — --prg-off 는 .aply_progress 안에서만 정의돼 카드 머리에선 배경이 비어 흰 글자가 안 보였다 */
.vc .prg_off { background: #d63031; }
.vc_fold { font-size: 13px; color: #888; }
details.vc > summary { cursor: pointer; }
details.vc[open] .vc_fold .vc_fold_open, details.vc:not([open]) .vc_fold .vc_fold_close { display: none; }
.vc_meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 12px 0 0; font-size: 14px; color: #6b7485; }
.vc_meta b { margin-left: 8px; font-size: 15px; font-weight: 600; color: #222; }
.vc .aply_progress { margin-top: 14px; }
.vc_ret { margin-top: 14px; padding: 12px 16px; border-left: 6px solid #d63031; background: #fff4f4; font-size: 15px; color: #8a1f1f; }
.vc_ret_txt { white-space: pre-line; }   /* 사유의 줄바꿈은 살리고 JSP 들여쓰기 공백은 안 보이게 */
.vc_ret b { display: block; margin-bottom: 4px; color: #d63031; }
.vc_foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 20px -26px 0; padding: 14px 26px; border-top: 1px solid #e6ebf3; background: var(--vc-soft);
    font-size: 16px; color: #333;
}
.vc_foot > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.vc_foot i { margin-right: 6px; font-size: 18px; color: var(--vc-accent); vertical-align: -2px; }
.vc_days b { margin: 0 2px; font-size: 22px; font-weight: 800; color: var(--color-navy); }
.vc_last b { margin-left: 4px; font-weight: 600; color: #222; }
.vc_go {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    height: 46px; padding: 0 18px 0 24px; border-radius: 6px; background: var(--vc-accent);
    font-size: 16px; font-weight: 700; color: #fff !important; white-space: nowrap;
}
.vc_go:hover, .vc_go:focus { background: var(--color-navy); }
.vc.end .vc_go { background: #1f7a3a; }
.vc_go i { margin: 0; font-size: 18px; color: #fff; }
.vc_empty { padding: 48px 0; border: 1px dashed #dfe3ea; border-radius: 10px; text-align: center; color: #777; }
.vc_empty[hidden] { display: none; }

@media (max-width: 780px) {
    .vc { padding: 16px 16px 0; }
    details.vc:not([open]) { padding-bottom: 16px; }
    .vc_head .prg_no_item:first-child b { font-size: 18px; }
    .vc_foot { margin: 16px -16px 0; padding: 12px 16px 16px; }
    .vc_find { width: 100%; margin-left: 0; }
    .vc_find { flex-wrap: wrap; }
    .vc_find input[type=text] { flex: 1 1 100%; width: auto; min-width: 0; }   /* 검색칸은 한 줄 전체, 버튼 둘은 아래 줄 */
    .vc_find .btn, .vc_more { flex: 1; }
    .vc_srch { padding: 16px; }
    .vc_tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .vc_tab { height: 42px; padding: 0 4px; font-size: 15px; white-space: nowrap; }
    .vc_tab em { margin-left: 4px; }
    .vc_period select { flex: 1; }
    .vc_range { width: 100%; display: flex; align-items: center; gap: 8px; }   /* 시작~끝 날짜는 한 줄 따로 */
    .vc_range input[type=date] { flex: 1; min-width: 0; }
    .vc_foot { flex-direction: column; align-items: stretch; }
    .vc_go { justify-content: center; }
    .vc_state { margin-left: 0; }
}
.aply_rtn { margin: 16px 0 24px; }   /* 상세 화면 반송 사유(pages/common/aplyRtnRsn.jsp) — 목록 카드와 같은 상자 */

/* ── 2026-10-17 보기 전환·간단히 보기·누르면 상세·내려받기·신청 준비 칩 ── */
.vc_view { display: inline-flex; border: 1px solid #c9d1da; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.vc_view_btn { border: 0; background: #fff; padding: 5px 14px; font-size: 13px; color: #495057; cursor: pointer; }
.vc_view_btn + .vc_view_btn { border-left: 1px solid #c9d1da; }
.vc_view_btn.on { background: #1E5EFF; color: #fff; }
.vc { cursor: pointer; }
.vc:hover { box-shadow: 0 0 0 2px #a5c3ff inset; }
.vc:focus-visible { outline: 2px solid #1E5EFF; outline-offset: 2px; }
.vc_line { display: none; }
.vc_ready { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 10px; margin-right: 6px; white-space: nowrap; }
.vc_ready:empty { display: none; }
.vc_ready.rdy-ok { background: #ebfbee; color: #2b8a3e; }
.vc_ready.rdy-todo { background: #fff4e6; color: #d9480f; }
.vc_ready.rdy-bad { background: #fff5f5; color: #c92a2a; }
.vc_dls { display: inline-flex; gap: 6px; margin-left: auto; margin-right: 8px; }
.vc_dl { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 3px 10px; border: 1px solid #c9d1da; border-radius: 4px; background: #fff; color: #333; text-decoration: none; cursor: pointer; }
.vc_dl:hover { border-color: #1E5EFF; color: #1E5EFF; }
/* 간단히 보기 — 한 건 두 줄: 사고일자·보험사·사고번호 / 번호·상태. 단계·자세한 정보는 숨김 */
.vc-simple .vc { padding-top: 10px; padding-bottom: 10px; }
.vc-simple .vc_line { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; font-size: 15px; color: #495057; }
.vc-simple .vc_line b { color: #111; }
.vc-simple .vc_head .prg_no_item:first-child b { font-size: 14px; }
.vc-simple .vc_meta,
.vc-simple .vc .aply_progress,
.vc-simple .vc_ret,
.vc-simple .vc_days,
.vc-simple .vc_last { display: none; }
.vc-simple .vc_foot { margin-top: 6px; }
@media (max-width: 768px) {
    .vc_dls { margin-left: 0; }
}