@charset "utf-8";

/*
 * 신청 상세 진행상태 (APC / Appel 공통)
 *
 * 연관 파일
 *   AplyProgressFactory.java  단계·현재 단계·예외 상태 판정, 모양(A/B/C) 설정
 *   aplyProgress.tag          상단 전체 표시
 *   actionButtons.tag         스크롤 고정 바 안의 간략 표시(.action_status)
 *
 * 클래스 계약
 *   .style_A / .style_B / .style_C   모양
 *   .prg_step.done / .current / .todo  단계 상태
 *   .off_path                        반려·취하 등 정상 흐름 밖 상태 — 단계 줄은 전부 todo
 *
 * ※ common.css 뒤에 로드 (--color-* 변수 의존)
 */

.aply_progress {
    --prg-cur: var(--color-primary);
    --prg-done: var(--color-navy);
    --prg-line: #d7dce5;
    --prg-todo: #a3a9b5;
    --prg-off: #d63031;
    margin-top: 20px;
}

/* 목록 기본값만 지운다. 모양별 여백은 아래 .aply_progress .prg_* 에서 준다(같은 특이도라 뒤가 이긴다) */
.aply_progress ol { list-style: none; margin: 0; padding: 0; }

/* ── 번호 ───────────────────────────────────────────── */
.prg_no { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.prg_no_item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border: 1px solid var(--prg-line); border-radius: 4px;
    font-size: 14px; color: #555; background: #fff;
}
.prg_no_item b { font-weight: 700; color: var(--prg-done); letter-spacing: .3px; }
.prg_no_item.org { background: #f5f6f9; }
.prg_no_item.org b { color: #555; }

/* ── 예외 상태 배지 — 번호 줄(.prg_no) 오른쪽에 붙는다 ── */
.prg_off {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0; padding: 6px 14px; border-radius: 16px;
    background: var(--prg-off); color: #fff; font-size: 14px;
}
.prg_off b { font-size: 16px; color: #fff; }   /* 공통 CSS 의 b 색이 먹지 않게 */

/* ── A: 원형 스테퍼 ─────────────────────────────────── */
/* 위: 현재 원이 6px 올라가고 맥박 링이 12px 퍼지므로 18px 이상 / 아래: "현재" 배지 아래 숨 쉴 공간 */
.aply_progress .prg_a {
    display: flex; align-items: flex-start;
    padding: 26px 12px 20px; border: 1px solid #e3e6ec; border-radius: 10px; background: #fafbfd;
}
.prg_a .prg_step { flex: 1; position: relative; text-align: center; min-width: 0; }
.prg_a .prg_step:not(:last-child)::after {
    content: ""; position: absolute; top: 19px; height: 4px; border-radius: 2px;
    left: calc(50% + 24px); right: calc(-50% + 24px); background: var(--prg-line);
}
.prg_a .prg_step.done:not(:last-child)::after { background: var(--prg-done); }
.prg_dot {
    position: relative; z-index: 1;
    width: 42px; height: 42px; margin: 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--prg-line); background: #fff; color: var(--prg-todo);
    font-size: 16px; font-weight: 700;
}
.prg_a .done .prg_dot { background: var(--prg-done); border-color: var(--prg-done); color: #fff; }
.prg_a .current .prg_dot {
    width: 54px; height: 54px; margin-top: -6px;
    background: var(--prg-cur); border-color: var(--prg-cur); color: #fff; font-size: 19px;
    animation: prgPulse 1.8s infinite;
}
.prg_name { display: block; margin-top: 8px; font-size: 14px; color: var(--prg-todo); word-break: keep-all; }
.prg_a .done .prg_name { color: var(--prg-done); font-weight: 600; }
.prg_a .current .prg_name { color: var(--prg-cur); font-weight: 800; font-size: 16px; }
.prg_tag {
    display: inline-block; margin-top: 5px; padding: 1px 9px; border-radius: 10px;
    background: var(--prg-cur); color: #fff; font-size: 11px; font-weight: 700;
}
@keyframes prgPulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 94, 255, .45); }
    70%  { box-shadow: 0 0 0 12px rgba(30, 94, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 94, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .prg_a .current .prg_dot { animation: none; box-shadow: 0 0 0 6px rgba(30, 94, 255, .2); }
}

/* ── B: 배너 + 화살표 바 ────────────────────────────── */
.prg_banner {
    display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
    padding: 12px 18px; border-left: 6px solid var(--prg-cur); background: #e8efff;
}
.prg_banner_lb { font-size: 14px; color: #444; }
.prg_banner_val { font-size: 22px; font-weight: 800; color: var(--prg-cur); }
.prg_banner_sub { margin-left: auto; font-size: 13px; color: #555; }
.prg_b { display: flex; }
.prg_b .prg_step {
    flex: 1; min-width: 0; height: 46px; margin-right: -10px;
    display: flex; align-items: center; justify-content: center;
    background: #eef0f4; color: var(--prg-todo); font-size: 15px; font-weight: 600;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.prg_b .prg_step:first-child { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.prg_b .prg_step:last-child { margin-right: 0; }
.prg_b .done { background: #c9d4e8; color: var(--prg-done); }
.prg_b .current {
    position: relative; z-index: 1; height: 54px; margin-top: -4px;
    background: var(--prg-cur); color: #fff; font-size: 17px; font-weight: 800;
}

/* ── C: 컴팩트 ──────────────────────────────────────── */
.aply_progress .prg_c {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
    padding: 8px 14px; border: 1px solid var(--prg-line); border-radius: 24px; font-size: 14px;
    background: #f1f4f9;   /* 흰 본문과 구분되게 — 테두리만으로는 윤곽이 안 보였다 */
}
.prg_c_lb { margin-right: 4px; color: #555; }
.prg_c .prg_step { display: inline-flex; align-items: center; gap: 4px; color: var(--prg-todo); }
.prg_c .prg_sep { color: #c3c9d4; }
.prg_c .done { color: var(--prg-done); }
.prg_c .current {
    padding: 5px 14px; border-radius: 16px; background: var(--prg-cur); color: #fff; font-weight: 800;
}

/* ── 좁은 화면 ──────────────────────────────────────── */
@media (max-width: 780px) {
    .aply_progress .prg_a { padding: 20px 4px 16px; }
    .prg_dot { width: 30px; height: 30px; font-size: 13px; border-width: 2px; }
    .prg_a .current .prg_dot { width: 38px; height: 38px; margin-top: -4px; font-size: 15px; }
    .prg_a .prg_step:not(:last-child)::after { top: 13px; left: calc(50% + 17px); right: calc(-50% + 17px); height: 3px; }
    .prg_name { font-size: 12px; }
    .prg_a .current .prg_name { font-size: 13px; }
    .prg_b .prg_step { font-size: 12px; height: 40px; }
    .prg_b .current { font-size: 13px; height: 46px; }
    .prg_banner_val { font-size: 18px; }
    .prg_banner_sub { display: none; }
}

/* ── 스크롤 고정 바 안 간략 표시 (actionButtons.tag) ─── */
.action_status { display: none; }
.action_btn.fixed .action_status {
    display: inline-flex; align-items: center; gap: 8px;
    margin-right: 8px; padding-right: 12px; border-right: 1px solid #dde1e8;
    font-size: 13px; white-space: nowrap;
}
.action_status_no { color: #666; }
.action_status_cnt { color: #999; }
.action_status_val {
    padding: 4px 12px; border-radius: 14px;
    background: var(--color-primary); color: #fff; font-weight: 700;
}
.action_status.off_path .action_status_val { background: #d63031; }
@media (max-width: 780px) {
    .action_btn.fixed .action_status_no { display: none; }
}