@charset "utf-8";

/*
 * 파일명: radarMain.css
 * 설명: 대국민 '레이더영상'(/radar/main.do) 전용 스타일.
 *       레거시 main.jsp 안에 있던 인라인 <style> 을 옮기고, PC/모바일 마크업을 한 벌로 합치면서
 *       필요해진 반응형 규칙을 더했다.
 *
 *       로드 순서 주의: pubLayout 이 n2019/css/mobile_style.css 를 먼저 싣고 그 뒤에 이 파일이 온다.
 *       mobile_style.css 는 레거시의 두 벌 마크업(.remote / .remote_mobile)을 전제로
 *       좁은 화면에서 .remote 와 .time_remort 를 감추는데, 지금은 그 한 벌만 있으므로 여기서 되살린다.
 */

/* ==========================================================================
   1. 레거시 인라인 style 이식
   ========================================================================== */

/* 달력 아이콘이 입력칸을 파고들게 겹쳐 놓은 것 */
.ui-datepicker-trigger {
    position: relative;
    right: 25px;
    top: 3px;
    margin-right: -21px;
    vertical-align: top;
}

/* 기본 줌 컨트롤은 쓰지 않는다(화면맞춤 버튼과 휠로 대신한다) */
.ol-zoom {
    display: none;
}

.map {
    width: 636px;
    height: 625px;
    background-size: 100%;
    background-color: #eee;
}

/* 지도 오른쪽에 겹쳐 세우는 컬러바 */
#unit_bar {
    position: absolute;
    left: 591px;
    top: 25px;
    height: 564px;
    width: 40px;
}

#unit_bar_img {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   2. 표출 방식 전환
   지도 / 예측 재생(캔버스) / 예측 초기(GIF) 셋 중 하나만 보인다.
   radarMain.js 는 #gisWrap 의 data-view 만 바꾸고, 감추고 드러내는 것은 여기서 한다.
   ========================================================================== */

.gis_wrap .gis_wrap_cgi,
.gis_wrap .old_gis_wrap_cgi,
.gis_wrap .gis_wrap_gif,
.gis_wrap .gis_wrap_wind {
    display: none;
}

.gis_wrap[data-view="map"] .gis_wrap_cgi,
.gis_wrap[data-view="canvas"] .old_gis_wrap_cgi,
.gis_wrap[data-view="gif"] .gis_wrap_gif,
.gis_wrap[data-view="wind"] .gis_wrap_wind {
    display: block;
}

/* 지도 표출일 때만 컬러바가 의미 있다 */
.gis_wrap:not([data-view="map"]) #unit_bar {
    display: none;
}

#pr_gif {
    width: 636px;
    height: 625px;
}

/* 바람장(WIND) 영상. CGI 가 제목·범례까지 넣어 주는 완성 이미지(원본 size=670)라
   지도·컬러바 없이 그대로 보여 준다. 폭은 다른 표출과 맞춘다. */
.gis_wrap_wind {
    text-align: center;
}

#wind_img {
    width: 636px;
    max-width: 100%;
    height: auto;
}

/* 재생 타임바 / 연직·재생 버튼 등 JS 가 여닫는 요소 */
.is-hidden {
    display: none !important;
}

/* ---- 옛 CGI 캔버스 표출 (과거자료·개별영상) ----
   이 두 화면은 지도가 없다. 지도에 얹을 수 없는 완성 이미지를 <canvas> 에 그리고,
   클릭하면 그 지점으로 확대한다(radarCanvas.js). --- 실시간 화면에는 해당 요소가 없어 무해하다. */
.gis_wrap[data-view="cgi"] .gis_wrap_cgi {
    display: block;
}

#myCanvas {
    cursor: crosshair;
    max-width: 100%;
}

/* 영상 아래 조작 안내 문구 */
.canvas_help {
    margin: 4px 0 0;
    text-align: left;
}

.canvas_help li {
    font-size: 12px;
    color: #666;
    line-height: 18px;
}

/* ---- 영상 로딩 표시 ----
   .gis_wrap 이 position:relative 라 그 안에서 절대 배치하면 영상 한가운데에 놓인다.
   지도를 끌거나 확대할 때 방해가 되지 않도록 pointer-events 는 끈다. */
.img-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    pointer-events: none;
}

.img-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: img-loading-spin .8s linear infinite;
}

@keyframes img-loading-spin {
    to { transform: rotate(360deg); }
}

/* 움직임을 줄이도록 설정한 이용자에게는 회전을 멈춘다(웹 접근성) */
@media (prefers-reduced-motion: reduce) {
    .img-loading-spinner {
        animation: none;
        border-top-color: rgba(255, 255, 255, .35);
    }
}

/* 요청한 시각의 자료가 없을 때 뜨는 안내 (radarCommon.js 가 여닫는다) */
.data-notice {
    margin: 8px 0 0;
    padding: 8px 12px;
    border: 1px solid #f0b429;
    border-radius: 4px;
    background: #fef8e7;
    color: #8a5a00;
    font-size: 13px;
    line-height: 20px;
}

/* 연직·재생 버튼의 켜짐 상태. 레거시는 JS 로 배경색을 직접 칠했다. */
.map_remort .btn.on {
    background-color: #ff0040;
    border-color: #ff0040;
    color: #fff;
}

/* ==========================================================================
   3. 좁은 화면 (600px 이하)
   레거시는 _mobile 접미 마크업을 따로 두고 서로 감췄으나, 여기서는 한 벌을 재배치한다.
   ※ 레거시 모바일 화면과 픽셀 단위로 같지는 않다. 실기기 확인이 필요한 구간이다.
   ========================================================================== */

@media only screen and (max-width: 600px) {

    /* mobile_style.css 가 감춰 둔 것을 되살린다(두 벌 마크업 전제였던 규칙) */
    .airport .remote {
        display: block;
        width: 100%;
        padding-left: 0;
    }

    .airport .time_remort {
        display: block;
        width: 100%;
        margin-top: 6px;
    }

    /* 영상과 옵션을 위아래로 쌓는다 */
    .airport_cont {
        display: block;
    }

    .airport .gis_wrap {
        width: 100%;
        padding-right: 0;
    }

    /* 지도는 화면 폭에 맞추고 높이는 비율로 잡는다 */
    .map {
        width: 100%;
        height: 100vw;
    }

    #pr_gif {
        width: 100%;
        height: auto;
    }

    #myCanvas {
        width: 100%;
        height: auto;
    }

    .canvas_help li {
        font-size: 11px;
    }

    /* 컬러바는 절대 좌표(left:591px) 대신 오른쪽에 붙인다 */
    #unit_bar {
        left: auto;
        right: 0;
        top: 10px;
        height: 80%;
        width: 28px;
    }

    /* 시간 버튼은 두 줄로 흐르게 두고, 자주 안 쓰는 것은 감춘다 */
    .time_remort li {
        float: none;
        display: inline-block;
        margin: 0 2px 4px 0;
    }

    .time_remort .narrow_hide {
        display: none;
    }

    /* 과거자료 버튼은 좁은 화면에서도 보인다.
       운영 원본 mobile_style.css 가 .old_time 을 감추므로, 선택자를 한 단계 더 구체적으로 써서
       파일 로드 순서와 상관없이 이긴다(mobile_style.css 는 운영 원본이라 고치지 않는다). */
    .map_remort .old_time {
        display: block;
    }

    /* 종류 탭을 가로로 늘어놓는다(PC 는 왼쪽 세로 목록) */
    .tab_vertical .tab_list {
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        width: 100%;
        height: auto;
        padding-right: 0;
        margin-top: 10px;
    }

    .tab_vertical .tab_list li {
        flex: 1 1 auto;
        margin-bottom: 0;
    }

    .tab_vertical .tab_list .on {
        width: auto;
        margin-right: 0;
    }

    /* 옵션 목록도 가로로 */
    .tab_vertical .tab_conts {
        float: none;
        width: 100%;
        height: auto;
        border-left: none;
        box-shadow: none;
        background-color: transparent;
        padding: 8px 0 0;
    }

    .select_list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .select_list li {
        flex: 1 1 auto;
        width: auto;
        margin-top: 0;
    }

    /* 예측 타임바는 폭을 넘치지 않게 (PC 는 프레임 라벨을 위해 일부러 넓혀 둔다) */
    .vidio_remote {
        width: 100%;
    }

    .timelab ul {
        width: 100%;
    }
}

/* ==========================================================================
   3-1. 운영 모바일 마크업을 쓰는 화면 (.m_dual = 한글 레이더영상 site/radar/main.jsp)
   이 화면은 PC 마크업과 모바일 마크업(_mobile)을 둘 다 그리고, 600px 이하에서는
   mobile_style.css(운영 원본)가 PC 쪽을 감추고 모바일 쪽을 보인다 - 운영과 같은 방식.
   그런데 위 3번 블록이 PC 마크업을 좁은 화면용으로 되살리고 크기를 바꾸므로,
   여기서 그 효과를 지우고 운영 값(style.css / mobile_style.css / 레거시 인라인 style)으로 되돌린다.
   반드시 3번 블록 뒤에 둘 것(같은 우선순위면 뒤가 이긴다). 자세한 내용은 모바일처리.md.
   ========================================================================== */

@media only screen and (max-width: 600px) {

    /* PC 쪽은 감춘다 (mobile_style.css 의 .remote / .time_remort 숨김을 다시 살림) */
    .m_dual .remote,
    .m_dual .time_remort,
    .m_dual #pr_gif {
        display: none;
    }

    /* 운영 모바일 화면에는 제목 줄이 없다 */
    .m_dual > .tit {
        display: none;
    }

    /* 영상과 모바일 옵션은 운영처럼 가로(flex) 배치. .remote_mobile 은 absolute 라 영상 위에 겹친다. */
    .m_dual .airport_cont {
        display: flex;
    }

    /* 지도: 폭은 화면에 맞추고 높이는 운영 그대로 625px (mobile_style.css 는 폭만 바꾼다) */
    .m_dual .map {
        height: 625px;
    }

    /* PC 컬러바는 left:591px 고정이라 폰에서는 화면 밖으로 밀려난다. 모바일 컬러바(#unit_bar_mobile)가 대신한다. */
    .m_dual #unit_bar {
        display: none;
    }

    /* 예측 재생 캔버스: 운영 mobile_style.css 값(175vw x 155vw). 위 1번의 max-width:100% 도 푼다. */
    .m_dual #myCanvas {
        width: 175vw;
        height: 155vw;
        max-width: none;
    }

    /* 예측 타임바: 운영 style.css(636px) + 레거시 인라인 style(145%) */
    .m_dual .vidio_remote {
        width: 636px;
    }

    .m_dual .timelab ul {
        display: flex;
        width: 145%;
    }
}

/* ==========================================================================
   4. PC 폭에서의 타임바
   레거시 인라인 style 이 .timelab ul 을 145% 로 넓혀 프레임 시각 라벨이 겹치지 않게 했다.
   재생 모드(프레임 13개에 라벨 표시)에서는 115% 로 줄인다 - radarMain.js 가 클래스를 바꾼다.
   ========================================================================== */

@media only screen and (min-width: 601px) {
    .timelab ul {
        display: flex;
        width: 145%;
        border-radius: 3px;
        overflow: hidden;
    }

    .timelab.playing ul {
        width: 115%;
    }
}