@charset "utf-8";

/* 공지사항의 notice.css를 바탕으로 두 목록에 필요한 표시만 추가한다. */
.move-list-flow .review-list .board_lst dt { position:relative; padding-right:22px; overflow-wrap:anywhere; }
.move-list-flow .review-list .list_tit { display:block; }
.move-list-flow .review-list .board_lst .review-meta { gap:5px 14px; }
.move-list-flow .review-list .review-author { color:#7a828d; font-size:12px; font-weight:400; }
.move-list-flow .review-list .icon_new,
.realtime-flow .estimate-new {
    display:inline-flex; position:absolute; top:3px; right:0; width:16px; height:16px; margin:0;
    align-items:center; justify-content:center; vertical-align:middle;
    border-radius:50%; background:#e11d30; color:#fff;
    font-size:10px; font-weight:700; line-height:1; letter-spacing:0;
}

/* 건수는 기존 원본 집계 그대로, 조회 기준일과 구분해 표시한다. */
.realtime-flow .estimate-summary { margin:0; padding:0 0 10px; border-bottom:1px solid #edf0f3; }
.realtime-flow .estimate-summary-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.realtime-flow .estimate-summary-live { display:inline-flex; align-items:center; gap:7px; color:#fe6a3a; font-size:11px; font-weight:700; line-height:1.5; letter-spacing:.5px; animation:realtime-live-blink 2.8s ease-in-out infinite; }
.realtime-flow .estimate-summary-date { color:#747d88; font-size:12px; line-height:1.5; font-variant-numeric:tabular-nums; }
.realtime-flow .estimate-summary-main { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-top:8px; }
.realtime-flow .estimate-summary-label { margin:0; color:#25282d; font-size:17px; font-weight:700; line-height:1.45; letter-spacing:-.5px; }
.realtime-flow .estimate-summary-total { flex:0 0 auto; color:#747d88; font-size:12px; line-height:1.4; text-align:right; white-space:nowrap; }
.realtime-flow .estimate-summary-total strong { color:#315f9d; font-size:30px; font-weight:700; line-height:1.2; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
@media (max-width:360px) {
    .realtime-flow .estimate-summary-label { font-size:15px; }
    .realtime-flow .estimate-summary-total strong { font-size:27px; }
}
/* 동일 비율의 여섯 열에 데이터 길이별 최소 폭만 지정해 제목과 데이터의 열을 맞춘다. */
.realtime-flow .estimate-table-wrap,
.realtime-flow .estimate-table { width:100%; min-width:0; }
.realtime-flow .estimate-list { margin:0; padding:0; list-style:none; }
.realtime-flow .estimate-list-head,
.realtime-flow .estimate-list > .estimate-list-item {
    display:grid; grid-template-columns:minmax(36px,1fr) minmax(36px,1fr) minmax(78px,1fr) minmax(105px,1fr) minmax(36px,1fr) minmax(48px,1fr);
    align-items:center; column-gap:5px; padding:12px 5px; text-align:center;
}
.realtime-flow .estimate-list-head { min-height:42px; border-top:1px solid #293443; border-bottom:1px solid #293443; color:#fff; font-size:12px; font-weight:500; line-height:1.4; background:#293443; }
.realtime-flow .estimate-list-head > span { min-width:0; white-space:nowrap; }
.realtime-flow .estimate-list > .estimate-list-item { min-height:50px; border-bottom:1px solid #edf0f3; color:#7a828d; font-size:12px; font-weight:400; line-height:1.5; font-variant-numeric:tabular-nums; }
.realtime-flow .estimate-list-item > [role="cell"] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.realtime-flow .estimate-route { margin:0; color:#25282d; font-size:13px; font-weight:400; line-height:1.4; letter-spacing:-.45px; text-align:center; }
/* NEW는 글자 폭에 포함하지 않아 배지 유무와 무관하게 이사구간 중심을 고정한다. */
.realtime-flow .estimate-list-item > .estimate-route { overflow:visible; }
.realtime-flow .estimate-route-label { display:inline-block; position:relative; max-width:100%; vertical-align:middle; }
.realtime-flow .estimate-route-text { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.realtime-flow .estimate-new { position:absolute; top:-5px; right:-10px; width:9px; height:9px; font-size:7px; }
.realtime-flow .estimate-product { color:#40444a; font-size:12px; font-weight:500; }
.realtime-flow .estimate-day { color:#40444a; }
.realtime-flow .estimate-companies { color:#3e68a5; font-size:13px; font-weight:700; }
@media (max-width:480px) {
    .realtime-flow .estimate-list-head,
    .realtime-flow .estimate-list > .estimate-list-item {
        grid-template-columns:minmax(31px,1fr) minmax(32px,1fr) minmax(78px,1fr) minmax(94px,1fr) minmax(31px,1fr) minmax(44px,1fr);
        column-gap:2px; padding-right:5px; padding-left:5px;
    }
    .realtime-flow .estimate-list-head { font-size:11px; }
}
@media (max-width:360px) {
    .realtime-flow .estimate-list-head,
    .realtime-flow .estimate-list > .estimate-list-item {
        grid-template-columns:minmax(29px,1fr) minmax(30px,1fr) minmax(68px,1fr) minmax(86px,1fr) minmax(29px,1fr) minmax(41px,1fr);
        column-gap:1px; padding-right:5px; padding-left:5px; font-size:11px;
    }
    .realtime-flow .estimate-list-head { font-size:10.5px; }
    .realtime-flow .estimate-new { right:-9px; }
    .realtime-flow .estimate-route,
    .realtime-flow .estimate-product { font-size:11px; }
    .realtime-flow .estimate-companies { font-size:12px; }
}

/* 동일 모집단의 요약과 첫 목록 행의 실제 신청 정보를 표시한다. */
.realtime-flow .realtime-summary-period { margin:8px 0 0; color:#858b94; font-size:11px; line-height:1.6; }
.realtime-flow .realtime-facts { display:grid; gap:14px; margin-top:12px; }
.realtime-flow .realtime-fact h2 { position:relative; margin:0; padding-left:12px; color:#4a515c; font-size:13px; font-weight:700; line-height:1.5; }
.realtime-flow .realtime-fact h2::before { content:""; position:absolute; top:.56em; left:0; width:5px; height:5px; border-radius:50%; background:#f1b700; }
.realtime-flow .realtime-fact h2 small { margin-left:5px; color:#858b94; font-size:11px; font-weight:400; }
.realtime-flow .realtime-products { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; color:#676f7c; font-size:12px; }
.realtime-flow .realtime-products > span { white-space:nowrap; }
.realtime-flow .realtime-products strong { margin-left:2px; color:#315f9d; font-weight:700; }
.realtime-flow .realtime-top-services { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; padding:0; list-style:none; }
.realtime-flow .realtime-top-services li { display:flex; align-items:center; gap:4px; color:#303943; font-size:12px; line-height:1.7; white-space:nowrap; }
.realtime-flow .realtime-rank { color:#FF7A11; font-size:12px; font-weight:700; white-space:nowrap; }
/* 내용은 항상 12px을 유지하고 모바일에서는 항목 간격만 조정한다. */
@media (max-width:480px) {
    .realtime-flow .realtime-products,
    .realtime-flow .realtime-top-services { column-gap:10px; letter-spacing:-.45px; }
    .realtime-flow .realtime-products strong { margin-left:1px; }
    .realtime-flow .realtime-top-services li { gap:3px; }
}
@media (max-width:360px) {
    .realtime-flow .realtime-products,
    .realtime-flow .realtime-top-services { column-gap:8px; letter-spacing:-.5px; }
    .realtime-flow .realtime-top-services li { gap:2px; }
}
@media (max-width:330px) {
    .realtime-flow .realtime-top-services { column-gap:6px; }
}
.realtime-flow .realtime-popular-days { display:flex; flex-wrap:wrap; gap:6px; margin:5px 0 0; padding:0; list-style:none; }
.realtime-flow .realtime-popular-days li { padding:2px 6px; border:1px solid #e7ecf3; border-radius:6px; background:#f5f7fb; color:#FF7A11; font-size:12px; line-height:1.5; font-variant-numeric:tabular-nums; }
.realtime-flow .realtime-summary-empty { margin:12px 0 0; color:#7a828d; font-size:12px; line-height:1.65; }
.realtime-flow .realtime-fact .realtime-summary-empty { margin-top:0; }
/* 단일 JS 컨트롤러가 한 행씩 글자만 점멸시킨다. 배경과 위치는 고정한다. */
.realtime-flow .estimate-list > .estimate-list-item.is-flowing > [role="cell"] { animation:realtime-text-flow 1.4s ease-in-out; }
@keyframes realtime-text-flow { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* 실제 목록 조회 상태 표시 */
.realtime-flow .notice-intro { position:relative; overflow:hidden; }
.realtime-flow .realtime-live-badge { align-items:center; gap:8px; }
.realtime-flow .realtime-live-dot { position:relative; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:#fe6a3a; }
.realtime-flow .realtime-live-dot:after { position:absolute; inset:-3px; border:1px solid rgba(38,132,91,.5); border-radius:50%; content:""; animation:realtime-live-pulse 1.4s ease-out infinite; }
.realtime-flow .notice-intro:after { position:absolute; bottom:0; left:0; width:35%; height:2px; border-radius:2px; background:#e4b52d; opacity:0; content:""; }
.realtime-flow .is-loading .notice-intro:after { opacity:1; animation:realtime-load-line 1.35s ease-in-out infinite; }
.realtime-flow .realtime-load-status { display:flex; min-height:64px; padding:18px 16px; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; color:#747d88; font-size:12px; line-height:1.55; text-align:center; }
.realtime-flow .realtime-load-spinner { display:none; width:13px; height:13px; flex:0 0 13px; border:2px solid #ece7d4; border-top-color:#bd9015; border-radius:50%; }
.realtime-flow .realtime-load-status[data-state="loading"] .realtime-load-spinner { display:block; animation:realtime-load-spin .8s linear infinite; }
.realtime-flow .realtime-load-status[data-state="error"] { color:#a34832; }
.realtime-flow .realtime-retry { padding:6px 10px; border:1px solid #e0e3e8; border-radius:7px; color:#454d58; background:#fff; font:700 12px/1.4 "Noto Sans KR",sans-serif; cursor:pointer; }
.realtime-flow .realtime-retry[hidden] { display:none; }
.realtime-flow .realtime-retry:focus-visible { outline:2px solid #b8800a; outline-offset:3px; }
@keyframes realtime-live-blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes realtime-live-pulse { 0% { transform:scale(.8); opacity:.8; } 100% { transform:scale(1.8); opacity:0; } }
@keyframes realtime-load-line { 0% { transform:translateX(-110%); } 100% { transform:translateX(390%); } }
@keyframes realtime-load-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
    .realtime-flow .estimate-summary-live,
    .realtime-flow .estimate-list > .estimate-list-item.is-flowing > [role="cell"],
    .realtime-flow .realtime-live-dot:after,
    .realtime-flow .is-loading .notice-intro:after,
    .realtime-flow .realtime-load-status[data-state="loading"] .realtime-load-spinner { animation:none; }
}