@charset "utf-8";

/*
 * 파일명: radarPast.css
 * 설명: 대국민 '레이더영상 - 과거자료'(/radar/main2.do) 전용 스타일.
 *
 *       옛 CGI 캔버스 표출은 개별영상 화면(individual.do)과 같아서 radarMain.css 로 옮겼다.
 *       여기에는 과거자료에만 있는 것 세 가지만 남는다.
 *         1) 항목명 칸 폭 - 이 화면만 "자료시간"(네 글자)이다
 *         2) 연직 지정 중 커서
 *         3) 연직단면 팝업
 */

/* 조회 조건의 항목명 칸.
   n2019/css/style.css 는 .dl_search dt 를 width:35px 로 잡아 두었는데, 그건 실시간 화면의
   "시간"(두 글자) 기준이다. 이 화면은 "자료시간"(네 글자 = 12px x 4 = 약 48px)이라 줄바꿈된다.
   한 줄에 들어가도록 넓히고, 글꼴이 바뀌어도 안 접히게 nowrap 을 함께 건다.
   (이 파일은 과거자료 화면에서만 싣기 때문에 다른 화면에는 영향이 없다) */
.dl_search dt {
    width: 56px;
    white-space: nowrap;
}

/* 연직 지정 중에는 커서를 일반 포인터(손 모양)로 바꿔, 지금 연직 선택 상태임을 확인할 수 있게 한다.
   (평상시 캔버스 커서는 확대용 crosshair 라 둘이 뚜렷이 구분된다) */
.gis_wrap.picking #myCanvas {
    cursor: pointer;
}

/* ==========================================================================
   연직단면 팝업 (#pop_help)
   레거시는 오버레이 폭을 JSP 인라인 스타일(style="width:100%")로 주고,
   모달의 가로 위치를 JS 가 팝업 크기에 따라 left:31%/40%/50% 로 찍어 맞췄다.
   인라인 스타일을 걷어내면서 오버레이에 폭이 없어져 모달이 왼쪽으로 쏠렸다.
   여기서 오버레이에 폭을 주고, 좌표 하드코딩 대신 transform 으로 가운데에 놓는다.
   ========================================================================== */

#pop_help {
    display: none;
    width: 100%;
}

/*
   n2019/css/style.css 의 두 규칙을 함께 덮어야 한다.
     .modal    { position:absolute; top:173px; left:31%; }
     .pop_help { width:500px; margin-left:-250px; }
   .pop_help 의 margin-left 는 "폭 500px 짜리를 left:50% 에서 절반 당겨 가운데" 놓으려던
   옛 방식의 잔재다. JS 가 폭을 500~1200px 로 바꿔 넣으므로 그 -250px 이 그대로 남아
   팝업이 왼쪽으로 밀려 있었다. 여백을 0 으로 되돌리고 transform 으로 가운데에 놓는다.
   (같은 엘리먼트가 pop_wrap·modal·pop_help 세 클래스를 다 갖고 있다) */
#pop_help .modal {
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    max-width: 96vw;
    max-height: 92vh;
}

/* JS 가 .pop_wrap 에 픽셀 크기(최대 1200px)를 지정하므로 좁은 화면에서 넘치지 않게 잡아 준다 */
#pop_help .pop_wrap {
    max-width: 100%;
    box-sizing: border-box;
}

#pop_help .box_gray {
    min-height: 272px;
    position: relative;     /* 로딩 표시를 가운데에 겹쳐 놓는 기준 */
}

#pop_help .box_gray img {
    max-width: 100%;
}

/* 연직단면 영상이 올 때까지 가운데에 띄우는 "로딩중" 표시 */
#pop_help .rhi-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 14px;
    z-index: 5;
}

/* 밝은 배경(box_gray)용 스피너. 회전 keyframe(img-loading-spin)은 radarMain.css 에 있다. */
#pop_help .rhi-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, .2);
    border-top-color: #2d64a7;
    border-radius: 50%;
    animation: img-loading-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    #pop_help .rhi-loading-spinner {
        animation: none;
        border-top-color: rgba(0, 0, 0, .2);
    }
}

/* 헤더를 잡고 끌 수 있음을 알린다(.pop_header 는 style.css 에서 이미 cursor:move) */
#pop_help .pop_header {
    user-select: none;
}

@media only screen and (max-width: 600px) {
    #pop_help .modal {
        /* 좁은 화면에서는 높이 여유가 없어 위쪽에 붙이고 스크롤로 본다 */
        top: 10px;
        margin: 0;
        transform: translateX(-50%);
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }
}