/* ============================================================
   pubMain.css — 대국민 공개 홈(/main.do) 전용 스타일

   운영(레거시 main/main.jsp)이 화면 안에 <style> 과 인라인 style 로 박아 두었던 값을
   그대로 옮겨온 것이다. 수치는 운영과 1:1 로 맞췄으므로 임의로 바꾸지 말 것.
   (히어로 높이 672px / 우측 패널 scale(0.8)·opacity .6 등은 운영 화면의 현재 모습이다)

   레이아웃 골격(.main .quick_menu / .notice_wrap / .slider 등)은 n2019/css/style.css 원본이 담당한다.
   ============================================================ */

/* 히어로: 운영은 .cont.main 에 인라인으로 height/overflow 를 주었다. */
.main_hero { height: 672px; width: 100%; position: relative; overflow: hidden; }

/* 슬라이드 한 장. 운영은 bxSlider 를 붙였으나 실제 슬라이드가 1장이라
   플러그인 없이 같은 모양이 된다(플러그인은 .bx-wrapper 로 감싸기만 함). */
.main_hero .slider li {
    display: flex; justify-content: center; align-items: center;
    height: 672px; overflow: hidden; position: relative;
}

/* 배경 레이더 영상(1분마다 갱신되는 GIF).
   transform/mask 값은 운영 화면의 구도(좌우 페이드 + 확대)를 그대로 재현한 것이다. */
.main_hero .main-refresh-img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center; flex-shrink: 0;
    transform: scale(1.48) translateX(-1.3%) translateY(-1%);
    -webkit-mask-image: linear-gradient(to right, transparent 30%, black 35%, black 60%, transparent 73%);
    mask-image: linear-gradient(to right, transparent 30%, black 35%, black 60%, transparent 73%);
}

.main_hero .slider .copy { margin-top: -45px; }

/* 우측 패널(바로가기 + 알림판/자료실). 운영은 두 블록에 각각 인라인으로 축소/반투명을 주었다. */
.main_hero .quick_menu {
    opacity: .6;
    display: flex; flex-wrap: wrap; justify-content: flex-start;
    transform: scale(.8); transform-origin: right top;
    margin-bottom: -20px; width: 492px;
}
.main_hero .notice_wrap {
    opacity: .6;
    transform: scale(.8); transform-origin: right top;
    margin-top: -45px;
}
.main_hero .notice_wrap .fr { margin-top: 10px; }

/* ---- 영문 홈(/eng/main.do) ----
   한글 제목은 한 줄에 들어가지만 영문 제목("Introduction of Weather Radar Center of KMA")은
   패널 폭(483px x 0.8)을 넘어 말줄임(...)으로 잘린다.
   운영 영문 홈도 인라인으로 white-space:normal 을 주어 두 줄로 흘린다 — 같은 처리를 여기서 한다. */
html[lang="en"] .main_hero .notice_wrap li a { white-space: normal; line-height: 20px; }
/* 영문 홈은 알림 목록이 게시판별 1건뿐이라(운영 영문 홈과 동일) 박스가 눌려 보인다.
   운영처럼 목록 영역이 120px 를 잡도록 최소 높이를 준다. padding 포함 높이라 box-sizing 을 함께 준다.
   ※ 우측 패널 전체가 scale(.8) 이므로 화면에서는 96px 로 보인다(한글 홈과 같은 축소 배율). */
html[lang="en"] .main_hero .notice_wrap .dot_list {
    min-height: 120px; box-sizing: border-box; padding-bottom: 10px;
}


/* ---- 배너 (자료실 아래, 운영 .ban_wrap2 자리. 관리자 > 배너관리) ----
   노출(Y) 배너 이미지를 237x98 칸에 채워 보이고 넘치는 부분은 잘라 숨긴다(비율 유지, 위쪽 기준).
   운영은 width/height 100% 로 늘려 그려 이미지가 찌그러졌다. 여러 건이면 3px 간격으로 나란히,
   패널 폭(483px)을 넘는 배너는 보이지 않는다. 사이트 공통 .ban_list(absolute·161px) 는 여기서 덮어쓴다. */
.main_hero .ban_wrap2 {
    clear: both; position: relative;
    height: 108px; padding-top: 10px; overflow: hidden; box-sizing: border-box;   /* 위 10px 간격: clear 로 margin 이 먹히므로 padding */
}
.main_hero .ban_wrap2 .ban_list {
    position: static; display: flex; gap: 3px; height: 98px; margin: 0; padding: 0; list-style: none;
}
.main_hero .ban_wrap2 .ban_list li {
    flex: none; float: none; width: 237px; height: 98px; padding: 0; overflow: hidden;
}
.main_hero .ban_wrap2 .ban_list li a { display: block; width: 237px; height: 98px; }
.main_hero .ban_wrap2 .ban_list li img {
    display: block; width: 237px; height: 98px; max-width: none;
    object-fit: cover; object-position: center top;   /* 세로로 긴 포스터는 제목이 있는 위쪽이 보이게 */
}

/* ---- 팝업 공지 (알림판 POPUP_YN='Y', js/pub/noticePopup.js) ----
   · 화면 가운데에 띄운다. 여러 건이면 오른쪽 아래로 30px 씩 겹쳐 놓는다(--pop-idx).
   · 본문이 466px 를 넘으면 본문 영역에 세로 스크롤이 생긴다(화면이 낮으면 그보다 작게).
   · 제목 표시줄을 마우스(터치)로 끌어 옮길 수 있다. 옮기기 시작하면 JS 가 left/top 을 px 로 잡고
     .is-moved 를 붙여 가운데 정렬(transform)을 푼다. JS 가 있으면 처음부터 보이는 화면(visualViewport) 기준
     가운데에 px 로 둔다 — 모바일에서 페이지가 화면보다 넓어도 보이는 화면 가운데에 뜨게. */
.notice_pop {
    --pop-shift: calc(var(--pop-idx, 0) * 30px);
    position: fixed; z-index: 10000;   /* 상단 메뉴(헤더)보다 위 */
    top: 50%; left: 50%;
    transform: translate(calc(-50% + var(--pop-shift)), calc(-50% + var(--pop-shift)));
    width: 420px; max-width: calc(100vw - 32px);
    display: flex; flex-direction: column; max-height: calc(100vh - 32px);
    background: #fff; color: #222;
    border: 1px solid #c9ced6; box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.notice_pop.is-moved { transform: none; }
.notice_pop.is-dragging { user-select: none; box-shadow: 0 10px 32px rgba(0, 0, 0, .35); }
.notice_pop[hidden] { display: none; }
.notice_pop_head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px; background: #0b4ea2; color: #fff;
    cursor: move; touch-action: none;   /* 터치로 끌 때 화면이 스크롤되지 않게 */
}
.notice_pop_head h2 { margin: 0; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.4; word-break: keep-all; }  /* 사이트 공통 h2 색 덮어쓰기 */
.notice_pop_x {
    flex: none; width: 28px; height: 28px; border: 0; background: transparent;
    color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.notice_pop_body {
    padding: 14px; font-size: 14px; line-height: 1.6; word-break: keep-all;
    max-height: min(466px, calc(100vh - 150px));   /* 466px 넘으면 스크롤 */
    overflow-y: auto; overscroll-behavior: contain;
}
.notice_pop_body img { max-width: 100%; height: auto; }
.notice_pop_foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 14px; background: #f2f4f7; border-top: 1px solid #dde1e7; font-size: 13px;
}
.notice_pop_foot label { cursor: pointer; }
.notice_pop_foot span { display: flex; gap: 10px; align-items: center; }
.notice_pop_foot a { color: #0b4ea2; text-decoration: underline; }
.notice_pop_foot button {
    border: 1px solid #b8bec8; background: #fff; padding: 3px 10px; font-size: 13px; cursor: pointer;
}
@media only screen and (max-width: 600px) { /* 모바일 경계 600px 로 통일 (모바일처리.md) */
    .notice_pop { --pop-shift: calc(var(--pop-idx, 0) * 16px); }
}