/* ===== 실시간 접수현황 : 블루 모던 스타일 ===== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ---------- 섹션 배경 ---------- */
#realtime_wrap{
    position:relative;overflow:hidden;
    background-color:#646a74; /* 사진이 없을 때를 대비한 기본 그레이 */
    /* 위쪽 3개 값(마지막 숫자)이 그레이 막의 불투명도: 낮출수록 사진이 더 진하게 보임 */
    background-image:
        linear-gradient(135deg,rgba(70,76,86,.88) 0%,rgba(100,107,118,.84) 55%,rgba(134,141,152,.80) 100%),
        url('../../../html/image/bg.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    font-family:'Pretendard','Noto Sans KR','Malgun Gothic',sans-serif;
}
#realtime_wrap::before{ /* 은은한 빛 번짐 */
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(600px 300px at 12% 0%,rgba(255,255,255,.10),transparent 70%),
        radial-gradient(700px 360px at 92% 100%,rgba(170,184,208,.16),transparent 70%);
}

/* ---------- 레이아웃 (가로 확장) ---------- */
.rt-section{position:relative;max-width:1720px;margin:0 auto;padding:100px 40px 110px}
.rt-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:90px}

/* 중앙 세로 구분선 (밝은 회색, 가늘게) */
.rt-grid::after{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
    background:linear-gradient(to bottom,transparent 0%,#d5dae2 12%,#d5dae2 88%,transparent 100%);
    opacity:.55;pointer-events:none;
}

/* ---------- 타이틀 ---------- */
#realtime_wrap .rt-section-tit{
    text-align:center !important;margin:0 0 56px;
    font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#fff;
    text-shadow:0 2px 10px rgba(20,24,32,.28);
}
#realtime_wrap .rt-section-tit::before{
    content:"REAL-TIME STATUS";display:block;margin-bottom:12px;
    font-size:13px;font-weight:600;letter-spacing:.38em;color:#6fd3ff;
}
#realtime_wrap .rt-box h3{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin:0 0 20px;text-align:center !important;
    font-size:26px;font-weight:700;letter-spacing:-.02em;color:#fff;
    text-shadow:0 2px 8px rgba(20,24,32,.25);
}
#realtime_wrap .rt-box h3::before{ /* LIVE 깜빡임 점 */
    content:"";width:10px;height:10px;border-radius:50%;
    background:#2ee6a6;box-shadow:0 0 0 0 rgba(46,230,166,.7);
    animation:rtPulse 1.8s infinite;
}
@keyframes rtPulse{
    0%  {box-shadow:0 0 0 0 rgba(46,230,166,.65)}
    70% {box-shadow:0 0 0 12px rgba(46,230,166,0)}
    100%{box-shadow:0 0 0 0 rgba(46,230,166,0)}
}

/* ---------- 카드 ---------- */
.rt-wrap{
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.55);
    border-radius:14px;overflow:hidden;
    box-shadow:0 18px 40px rgba(2,12,40,.35);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.rt-wrap table{width:100%;border-collapse:collapse;table-layout:fixed}

/* 헤더 */
.rt-head th{
    background:rgba(9,32,76,.96);color:#8fdcff;
    font-size:14px;font-weight:700;letter-spacing:.06em;
    padding:16px 8px;text-align:center;
}

/* ---------- 스크롤 영역: 행 52px x 8줄 = 416px ---------- */
.rt-body{
    height:416px;overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 97%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 97%,transparent 100%);
}
.rt-inner{will-change:transform}
.rt-inner.rt-run{animation:rtUp linear infinite}
.rt-body:hover .rt-inner{animation-play-state:paused} /* 마우스 올리면 멈춤 */

@keyframes rtUp{
    0%   {transform:translateY(0)}
    100% {transform:translateY(-50%)} /* 원본+복제 중 원본 높이만큼 이동 */
}

/* ---------- 행 ---------- */
.rt-list td{
    height:52px;padding:0 8px;text-align:center;
    font-size:15px;font-weight:500;color:#44546a;
    border-bottom:1px solid rgba(20,50,100,.10);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:background .25s,color .25s;
}
.rt-list tr:hover td{background:rgba(21,101,192,.09);color:#0b3b82}
.rt-list td.rt-std{color:#0b3b82;font-weight:700;letter-spacing:.01em}
.rt-list td:nth-child(3){color:#1b2c4a;font-weight:600}
.rt-list td.rt-empty{height:416px !important;color:#66727f;font-size:17px;font-weight:500;letter-spacing:.01em}

/* ---------- 진행상황 뱃지 ---------- */
.rt-badge{
    display:inline-block;min-width:68px;padding:5px 12px;border-radius:999px;
    font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.22);
}
.st-wait{background:linear-gradient(135deg,#00b8ff,#2f7bff)} /* 접수 */
.st-ing {background:linear-gradient(135deg,#ffb020,#ff7a1a)} /* 상담중/진행중 */
.st-done{background:linear-gradient(135deg,#2ee6a6,#12b27a)} /* 완료 */

/* ---------- 태블릿 ---------- */
@media (max-width:1200px){
    .rt-grid{gap:60px}
    #realtime_wrap .rt-section-tit{font-size:38px}
}

/* ---------- 모바일 ---------- */
@media (max-width:900px){
    .rt-section{padding:64px 16px 70px}
    .rt-grid{grid-template-columns:1fr;gap:48px}
    .rt-grid::after{display:none}
    #realtime_wrap .rt-section-tit{font-size:30px;margin-bottom:36px}
    #realtime_wrap .rt-box h3{font-size:21px}
    .rt-list td{font-size:13px}
    .rt-head th{font-size:13px}
}

/* ===== 메인 타이틀 "실시간 접수현황" 모션 ===== */
/* 글자 하나씩 위에서 떨어지며 제자리를 잡음 (스크립트가 .rt-js / .rt-in 클래스를 붙임) */
#realtime_wrap .rt-ch{
    display:inline-block;opacity:0;
    transform:translateY(-46px) scale(1.5) rotate(-6deg);
    filter:blur(10px);
}
#realtime_wrap .rt-in .rt-ch,
#realtime_wrap .rt-section-tit.rt-in .rt-ch{
    animation:rtChIn .85s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes rtChIn{
    0%  {opacity:0;transform:translateY(-46px) scale(1.5) rotate(-6deg);filter:blur(10px)}
    55% {opacity:1;transform:translateY(7px) scale(.96) rotate(1deg);filter:blur(0)}
    80% {transform:translateY(-3px) scale(1.02) rotate(0)}
    100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}
}

/* 위쪽 영문 라벨: 넓게 퍼진 자간이 모이면서 나타남 */
#realtime_wrap.rt-js .rt-section-tit::before{
    opacity:0;letter-spacing:1.1em;
    transition:letter-spacing 1.3s cubic-bezier(.2,.8,.2,1),opacity .9s ease;
}
#realtime_wrap.rt-js .rt-section-tit.rt-in::before{opacity:1;letter-spacing:.38em}

/* 제목 아래 포인트 라인: 가운데에서 좌우로 늘어남 */
#realtime_wrap .rt-section-tit::after{
    content:"";display:block;width:0;height:4px;margin:22px auto 0;border-radius:4px;
    background:linear-gradient(90deg,#00c2ff,#2f7bff);
    transition:width .9s cubic-bezier(.2,.8,.2,1) .7s;
}
#realtime_wrap .rt-section-tit.rt-in::after{width:90px}

/* 움직임 줄이기 설정을 쓰는 사용자는 모션 없이 표시 */
@media (prefers-reduced-motion:reduce){
    #realtime_wrap .rt-ch{opacity:1;transform:none;filter:none;animation:none !important}
    #realtime_wrap.rt-js .rt-section-tit::before{opacity:1;letter-spacing:.38em;transition:none}
    #realtime_wrap .rt-section-tit::after{width:90px;transition:none}
}