/* ============================================================
   대국민(공개) 레이아웃 스타일 — pubLayout.tag 전용
   (관리자 layout.css 와 독립. 공개면 헤더/히어로/GNB/푸터)
   ============================================================ */
.pub-wrap { display: flex; flex-direction: column; min-height: 100vh; }

/* 헤더 */
.pub-header {
    display: flex; align-items: center; gap: 24px;
    padding: 0 24px; height: 64px;
    background: #0b3d91; color: #fff;
}
.pub-logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; }
.pub-logo i { font-size: 20px; }
.pub-logo-text { font-size: 18px; }
.pub-gnb { display: flex; gap: 8px; flex: 1; }
.pub-gnb-link {
    color: #dbe6fb; text-decoration: none; padding: 8px 14px; border-radius: 6px; font-size: 15px;
}
.pub-gnb-link:hover, .pub-gnb-link.active { background: rgba(255,255,255,.15); color: #fff; }
.pub-actions { display: flex; align-items: center; gap: 10px; }
.pub-actions .pub-btn {
    color: #0b3d91; background: #fff; border-radius: 6px; padding: 7px 14px;
    text-decoration: none; font-size: 14px; font-weight: 600;
}
/* 언어 전환 링크 (한글 ↔ ENGLISH) */
.pub-lang {
    color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.5); border-radius: 6px; padding: 6px 10px;
}
.pub-lang:hover { background: rgba(255,255,255,.15); }

/* 히어로 */
.pub-hero {
    background: linear-gradient(135deg, #0b3d91, #1666c9); color: #fff;
    padding: 40px 24px; text-align: center;
}
.pub-hero-title { margin: 0; font-size: 28px; font-weight: 700; }

/* 본문 */
.pub-main { flex: 1; background: #f4f6fa; }
.pub-content { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }

/* 푸터 */
.pub-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; background: #1f2937; color: #cbd5e1; font-size: 13px;
}
.pub-footer-brand { font-weight: 700; color: #fff; }

/* 공개 홈 카드 그리드 */
.pub-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.pub-card {
    display: block; padding: 20px; background: #fff; border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08); text-decoration: none; color: #111; transition: box-shadow .15s;
}
.pub-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.pub-card h3 { margin: 0 0 8px; font-size: 17px; }
.pub-card p { margin: 0; color: #555; font-size: 14px; }
.pub-note { margin-top: 24px; color: #555; }

/* 공개 섹션(소개/자료실/영문 등 골격) */
.pub-section { background: #fff; border-radius: 10px; padding: 28px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.pub-section-title { margin: 0 0 12px; font-size: 22px; font-weight: 700; }

/* 반응형 */
@media only screen and (max-width: 600px) { /* 모바일 경계 600px 로 통일 (모바일처리.md) */
    .pub-header { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; }
    .pub-gnb { order: 3; width: 100%; flex-wrap: wrap; }
    .pub-content { padding: 20px 16px; }
}

/* ============================================================
   레거시 주메뉴(.nav) 2차 메뉴(.sub) 노출
   n2019/css/style.css 는 .sub 를 display:none 으로만 정의하고,
   실제 노출은 레거시 jQuery(hover)가 담당했으므로 그 동작을 CSS 로 이식한다.
   - 마우스: 1차 li 롤오버 시 노출
   - 키보드: JS(pubTopMenu.js)가 .is-open 을 부여 (ESC 로 닫기 가능)

   ★ 내려오는 애니메이션 ★
   운영 사이트는 n2019/js/ui_common.js 의 jQuery slideDown()/slideUp() 로
   천천히 펼쳐졌다(기본 400ms). 처음 이식할 때 display 만 바꿔
   퍽 하고 나타났으므로, 같은 느낌이 나도록 transition 을 준다.

   display 는 transition 대상이 아니므로 display:block 은 항상 유지하고
   max-height 로 접어 둔다. .sub 는 style.css 에서 이미 overflow:hidden ·
   position:absolute 이므로 접혀 있는 동안 내용이 비치거나 레이아웃을
   밀지 않는다.

   visibility 를 같이 다루는 이유: max-height:0 만으로는 요소가 살아 있어
   스크린리더와 Tab 순회가 닫힌 메뉴의 링크까지 읽는다.
   닫힐 때만 0.4s 뒤로 미루면(delay) 접히는 모습은 보이면서 끝나면 완전히 사라진다.

   max-height 는 가장 긴 2차 메뉴(레이더영상 8항목 = 8*35 + 위아래 padding 40 ≈ 320px)
   보다 약간 크게 잡은 값이다. 항목을 더 늘리면 이 값도 같이 올릴 것
   (모자라면 마지막 항목이 잘린다).
   ============================================================ */
.nav > li > .sub {
    display: block;
    max-height: 0;
    visibility: hidden;
    transition: max-height .4s ease, visibility 0s linear .4s;
}
.nav > li:hover > .sub,
.nav > li.is-open > .sub {
    max-height: 400px;
    visibility: visible;
    transition: max-height .4s ease, visibility 0s;
}

/* 움직임 최소화를 켜 둔 사용자에게는 즐시 열고 닫는다(웹접근성). */
@media (prefers-reduced-motion: reduce) {
    .nav > li > .sub,
    .nav > li:hover > .sub,
    .nav > li.is-open > .sub { transition: none; }
}

/* ============================================================
   레거시 footer(bottomMenu) 보조 스타일 — 기존 인라인 <style> 이관
   ============================================================ */
.local_link2 li { display: inline-block; line-height: 24px; }
.local_link2 a { color: #888; border-left: 1px solid #898989; line-height: 12px; padding-left: 30px; margin-left: 30px; }
.local_link2 li:first-child a { border-left: none; padding-left: 0; margin-left: 100px; }
/* 관련기관/외국 레이더 select 폭 (레거시 inline width 이관) */
.site_sel_inter { width: 110px; }
.site_sel_exter { width: 150px; }

/* ============================================================
   전체메뉴(.full_lnb) — n2019/style.css 는 display:none 만 정의하고
   실제 토글은 레거시 jQuery 가 담당했으므로 클래스 규칙으로 이식한다.
   (토글은 js/pub/pubTopMenu.js 의 #pubFullMenuBtn)

   운영 사이트는 여기도 slideDown()/slideUp() 이라 천천히 펼쳐졌다.
   2차 메뉴(.sub)와 같은 방식으로 맞추되, max-height 만 차이가 있다 —
   전체메뉴는 DB 메뉴/정적 폴백에 따라 높이가 달라지므로 상수로 박을 수 없다.
   그래서 여기서는 transition 만 선언하고, 실제 값(scrollHeight)은 pubTopMenu.js 가 넣는다.
   — jQuery slideDown 이 하던 일과 같다.
   ============================================================ */
.full_lnb {
    display: block;          /* display 는 transition 대상이 아니므로 항상 block */
    max-height: 0;
    overflow: hidden;        /* n2019 원본에는 없다. 접힐 때 내용이 샐지 않게 필요 */
    visibility: hidden;      /* 닫힌 메뉴가 Tab 순회·스크린리더에 잡히지 않게 */
    transition: max-height .4s ease, visibility 0s linear .4s;
}
.full_lnb.on {
    visibility: visible;
    transition: max-height .4s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .full_lnb, .full_lnb.on { transition: none; }
}

/* ============================================================
   좌측메뉴(SNB) 3차 항목 — 레거시가 각 화면 <style> 에 인라인으로 두었던 규칙 이관.
   높이 30px 은 레거시가 <li style="height:30px"> 로 주던 값.
   (레거시 원본의 padding 선언은 `8px px` 로 문법이 깨져 브라우저가 무시했으므로 옮기지 않는다)
   ※ 3차 <ul> 은 2차 </li> 뒤 형제로 두어야 한다. .snb_list li 가 display:table 이라
     <li> 안에 넣으면 <a>(table-cell) 옆에 나란히 붙는다. (inc/snb.jsp 참고)
   ============================================================ */
/* 선택자를 `.snb_list li.snb_list2` 로 두는 이유: style.css 의 `.snb_list li{height:40px}` 가
   `.snb_list2` 보다 우선순위가 높다(레거시는 인라인 style 이라 항상 이겼음). */
.snb_list li.snb_list2 { border-top: none; background: #f2f2f2; margin-bottom: 0; margin-top: -2px; height: 30px; }
.snb_list li.snb_list2 > a { color: #444; }
/* 활성 3차는 레거시와 동일하게 파란 글씨+밑줄. `.snb_list .on a` 의 남색 배경을 되돌린다. */
.snb_list li.snb_list2.on > a { background-color: transparent; color: #0461c0; text-decoration: underline; }

/* 좌측메뉴가 없는 화면(레이더/낙뢰 CGI 등)은 본문을 전체폭으로 */
.content.content_full { float: none; width: 100%; }

/* ============================================================
   이관 대기 화면 안내 박스 — DB/CGI 연동이 끝나면 해당 화면에서 제거된다.
   ============================================================ */
.pub-pending {
    margin: 20px 0; padding: 40px 24px; text-align: center;
    background: #f7f9fc; border: 1px solid #d8e0ec; border-radius: 8px; color: #555;
}
.pub-pending-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #0461c0; }

/* 이관 준비 중(플레이스홀더) 화면의 가로 전환 탭.
   ★ 클래스명을 tab_list 로 쓰면 안 된다. n2019/css/style.css 의 .tab_list 는
      레거시 영상 화면의 "세로 탭"(.tab_vertical 안에서 float:left; width:110px)이고,
      pub.css 가 그 뒤에 로드되므로 이름이 겹치면 레거시 화면 디자인을 덮어써 버린다.
      실제로 한글 레이더영상(site/radar/main.jsp)을 레거시 마크업으로 이관한 뒤
      탭이 가로줄로 깨져 나온 원인이 이것이었다. */
.pub-tab-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #0461c0; }
.pub-tab-list li a {
    display: block; padding: 8px 18px; background: #eef1f5; color: #444;
    text-decoration: none; border-radius: 4px 4px 0 0;
}
.pub-tab-list li.on a { background: #0461c0; color: #fff; font-weight: 700; }

/* ============================================================
   모바일 메뉴 열림/닫힘 — 레이아웃 자체는 레거시 원본 n2019/css/mobile_style.css 가 담당한다.
   다만 원본은 열림 상태를 CSS 로 정의하지 않고 레거시 jQuery 가 인라인 스타일
   (display / width 55vw / menu_container display:grid)로 제어했으므로,
   그 부분만 클래스 규칙(.on)으로 옮긴다. 토글은 js/pub/pubTopMenu.js.
   ============================================================ */
.header_mobile .header_hamburger_ic { background: none; border: 0; padding: 0; cursor: pointer; }
.header_mobile .header_hamburger_ic img,
.header_mobile .header_alert_ic { width: 32px; }
.header_mobile .header_mobile_title a { font-size: 22px; color: #fff; text-decoration: none; }

@media only screen and (max-width: 600px) {
    /* style.css 의 .nav_mobile{display:none} 을 열림 제어가 가능한 형태로 되돌린다 */
    .nav_mobile { display: block; width: 0; overflow: hidden; }
    .nav_mobile .menu_container { display: none; }
    .nav_mobile.on { width: 55vw; overflow-y: auto; }
    .nav_mobile.on .menu_container { display: grid; }
    /* PC 전체메뉴는 모바일에서 쓰지 않는다. 운영은 .header 안에 있어 .header{display:none} 으로 함께 사라졌으나
       여기서는 .header 밖에 있고 위 규칙이 display:block 으로 열어 두므로, 보이지 않는 969px 상자가
       가로 스크롤을 만든다(모바일처리.md). 운영과 같게 감춘다. */
    .full_lnb, .full_lnb.on { display: none; }
    /* 좌측메뉴 없는 화면도 전체폭 (mobile_style.css 의 .content 규칙과 동일 취급) */
    .content.content_full { float: none; width: calc(100% - 20px) !important; padding: 10px; }
}

/* ============================================================
   소개 > 인사말 (site/intro/greet.jsp)
   레거시가 <p style="font-size:15px"> 로 문단마다 주던 본문 크기를 CSS 로 이관.
   .pub-greet 은 해당 화면의 #con 에만 붙여 다른 화면에 영향이 없게 한다.
   ============================================================ */
.pub-greet .veiw_content p { font-size: 15px; }

/* ============================================================
   사이트맵(site/help/sitemap.jsp) 분류 제목
   레거시는 분류명을 GIF(site_lnb_*.gif)로 넣었으나 정보공개·성과용 이미지가 없어
   텍스트로 통일했다. layout.css 의 .sitemap dl dt(테두리/배경)는 그대로 쓰고 글자만 지정한다.
   ============================================================ */
.sitemap dl dt a { font-size: 15px; font-weight: 700; color: #0e396c; }
.sitemap dl dt a:hover { text-decoration: underline; }

/* ============================================================
   지식마당 > 용어사전 (site/lecture/dictionary/*.jsp)
   레거시 화면이 쓰던 .sear / .ch_word / .kne / .word / .word_list 는 n2019 layout.css 원본을 그대로 쓴다.
   여기서는 레거시가 인라인 <style> 과 <img> 버튼으로 때우던 부분만 보완한다.
     - 검색 버튼 : 레거시는 <a class="btn_g2"><img src="btn/sear.gif"> 였다. 이미지 대신 텍스트 버튼을 쓰므로
                  div.sear 의 select/input 과 세로 정렬을 맞춘다(layout.css 의 vertical-align 규칙은 a 까지만 지정).
     - '전체' 버튼 : 초성 선택을 해제하는 신규 버튼. 자음 한 글자보다 넓어야 글자가 잘리지 않는다.
     - 용어설명 안의 <img> : 레거시 본문(/images/dictionary/*.gif)이 수식 이미지라 글자 기준선에 맞춘다.
     - 검색어 입력창 : 아래 주석 참고.
   ============================================================ */
/* 검색 버튼 높이를 입력창(25px)과 맞춘다. 용어사전·게시판 공통. */
.pub-dicary .sear .dicary_btn,
.pub-bbs .sear .dicary_btn { vertical-align: middle; height: 25px; cursor: pointer; }

/* 검색어 입력창의 돋보기 아이콘. (용어사전·게시판 목록 공통)
   layout.css 의 `div.sear input.zoom{background:#fff url(/images/icon/zoom.gif) 5px center}` 은
   같은 파일의 `div.sear input{padding:5px 0}` 때문에 왼쪽 여백이 0 이라, 검색어를 입력하면
   글자가 아이콘 위에 겹쳐 찍혔다. 비어 있을 때만 아이콘을 보이고 값이 들어오면 지운다.
   여백(padding)은 레거시 그대로 두어 글자 위치가 밀리거나 입력 중 흔들리지 않게 한다.
   :placeholder-shown 이라 서버가 검색어를 넣어 그린 첫 화면에서도 깜빡임 없이 적용된다. */
.pub-dicary .sear input.zoom:not(:placeholder-shown),
.pub-bbs .sear input.zoom:not(:placeholder-shown) { background-image: none; }
.pub-dicary .word a { min-width: 15px; text-align: center; }
.pub-dicary .word a[data-init-cd=""] { min-width: 34px; }
.pub-dicary .word_list dd.dicary_synonm { color: #555; font-size: 13px; }
.pub-dicary .word_list dd img { vertical-align: middle; }

/* ============================================================
   레거시 공통 유틸리티 클래스
   출처 : 레거시 rdrhome 의 static/css/common.css (값 그대로 이식)
   신규 프로젝트는 디자인 CSS 로 n2019/css/* 만 가져왔는데, 레거시 화면 본문은
   n2019 가 아닌 이 예전 common.css 의 유틸리티 클래스에도 의존하고 있었다.
   그래서 이식한 화면에서 좌우 2단 배치(fl_l/fl_r + w_xxp)와 이미지 캡션(ta_c/fw_b)이
   먹지 않고 세로로 풀려 보였다. (예: 지식마당 > 레이더 > 에코 종류)
   레거시에도 정의가 없던 클래스(map_con, cb, img_full, none_cap, view_content 등)는
   원본에서도 무의미한 표식이므로 옮기지 않는다.
   ============================================================ */
.fl_l { float: left; }
.fl_r { float: right; }
.ov_h { overflow: hidden; }
.mr20 { margin-right: 20px; }   /* 레거시가 인라인 style 로 주던 사진 사이 간격 */
.ta_c { text-align: center; }
.fw_b { font-weight: bold; }
.w_100p { width: 100%; }
.w_42p { width: 42%; }
.w_38p { width: 38%; }
.w_23p { width: 23%; }
.w_13p { width: 13%; }

/* ============================================================
   대국민 게시판 (inc/bbsList.jspf · inc/bbsView.jspf)
   표·검색창·페이징은 레거시 n2019 원본(.sear .tw2 .tw3 table.board table.view)을 그대로 쓴다.
   여기서는 레거시가 인라인 style 로 때우거나 아예 없던 부분만 보완한다.
     - 전체 건수 표시 : 레거시는 주석 처리되어 있었다(<!-- p class="fr" -->). 되살려 왼쪽에 둔다.
     - 제목 링크   : 레거시는 <tr onclick> 이라 키보드로 접근할 수 없었다. <a> 로 바꿈.
     - 첨부 목록   : 레거시는 c:import 로 별도 화면을 끌어썼다. 직접 목록을 그린다.
   ============================================================ */
/* ★ 게시판 화면 폭 보정 ★
   레거시 폭 사슬이 어긋나 있다:
     .max_width 970px > .content calc(100%-215px)=755px > .ctBox 970px(!) > div.ct 743px
   · .ctBox 는 부모(755px)보다 넓지만 .cont 의 overflow:hidden 으로 잘려 안 보였고,
   · 본문(.ct)은 743px 라 제목줄(.content > .tit, 755px)보다 12px 짧아
     표 오른쪽 끝이 본문 칼럼 오른쪽에 닿지 않았다.
   게시판 화면에서만 .ct 를 실제 본문 폭(755px)으로 맞춘다.
   (모바일은 mobile_style.css 의 div.ct{width:100%!important} 가 이긴다 — 그대로 둘 것) */
.ct.pub-bbs { width: 755px; }

/* 전체 건수 + 검색폼 한 줄. 건수는 왼쪽, 검색폼은 오른쪽.
   별도 width 없이 블록 기본값으로 칼럼(755px)을 꽉 채운다 → 표와 좌우 끝이 맞는다. */
.pub-bbs .bbs_listhead {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 6px;
}
/* layout.css 의 `div.sear{margin-top:30px}` 과 float 을 되돌린다(플렉스 한 줄 안이므로). */
.pub-bbs .bbs_listhead .sear { margin: 0; }
.pub-bbs .bbs_listhead form { margin: 0; }
.pub-bbs .bbs_total { margin: 0; font-size: 13px; color: #555; white-space: nowrap; }
.pub-bbs .bbs_total strong { color: #0461c0; }

/* 게시판 표는 칼럼 전폭. 고정값(769px 등)을 주면 칼럼(743→755px)보다 커서
   max-width 에 잡혀 실제로는 그 폭으로 렉더되지 않는다(지난 번 769px 가 그러했다). */
.pub-bbs table.board { width: 100%; }

/* 목록 제목 */
.pub-bbs table.board td a { color: #333; text-decoration: none; }
.pub-bbs table.board td a:hover,
.pub-bbs table.board td a:focus { color: #0461c0; text-decoration: underline; }

/* 첨부 있음 표시 — 제목 앞에 세로 클립 아이콘(axicon .axi-attach-file, \e802).
   같은 폰트의 .axi-attachment(\e836)는 누운 클립이라 디스켓처럼 보여 바꿨다.
   axicon.min.css 는 pubLayout 이 이미 불러오므로 추가 요청이 없다.
   글꼴 아이콘이라 제목 글자 크기·색과 같이 움직이고 고해상도에서도 깨지지 않는다. */
/* 제목 뒤에 붙으므로 왼쪽 여백 */
.pub-bbs .bbs_file { margin-left: 4px; font-size: 13px; color: #0461c0; vertical-align: -1px; }

/* 상세 첨부파일 목록 */
.pub-bbs .bbs_file_list { margin: 0; padding: 0; list-style: none; }
.pub-bbs .bbs_file_list li { padding: 2px 0; }
.pub-bbs .bbs_file_list a { color: #0461c0; text-decoration: underline; }
.pub-bbs .bbs_file_size { margin-left: 4px; font-size: 12px; color: #888; }

/* 상세 본문 : layout.css 의 `table.view td div{min-height:275px}` 가 본문 <div> 에만 걸리므로
   <div> 없이 들어오는 본문에도 같은 최소높이를 준다. */
.pub-bbs .bbs_content { min-height: 275px; padding: 12px 15px; line-height: 1.7; }
.pub-bbs .bbs_content img { max-width: 100%; height: auto; }

/* 질문/답변 분리 표기(FAQ).
   줄바꿈이 그대로 살아야 한다 — 레거시 본문은 <br> 이 아니라 생줄바꿈으로
   문단을 나눈 것이 섞여 있어 pre-line 으로 둔다(공백은 접고 줄바꿈만 살림). */
.pub-bbs .bbs_qna { padding: 12px 15px; line-height: 1.7; white-space: pre-line; }
.pub-bbs .bbs_qna img { max-width: 100%; height: auto; }
.pub-bbs .bbs_question { background: #f7f9fc; }
.pub-bbs .bbs_answer { min-height: 180px; }

/* 목록 버튼은 .btnA 가 position:absolute 로 띄우므로 부모에 높이를 준다. */
.pub-bbs .btnA { min-height: 34px; margin-top: 10px; }
/* 상세의 [목록] 버튼 높이  29px.
   <a> 는 인라인이라 height 가 안 먹히므로 inline-block 으로 바꾸고,
   글자는 line-height(29 - 상하 테두리 2px = 27px)로 세로 가운데 정렬한다. */
.pub-bbs .btnA .btn {
    display: inline-block; box-sizing: border-box;
    height: 29px; line-height: 27px; padding: 0 14px;
}
/* 글자색을 전 상태에서 흰색으로 고정한다.
   common.css 의 `.btn{color:#fff}` 만으로는 부족하다 —
   layout.css 의 `a:hover,a:active,a:focus{color:#245bb1}` 가 클래스 하나짜리 선택자보다
   우선해서, 마우스를 올리거나 탭 포커스가 가면 회색 배경에 파란 글씨가 된다. */
.pub-bbs .btnA .btn,
.pub-bbs .btnA .btn:link,
.pub-bbs .btnA .btn:visited,
.pub-bbs .btnA .btn:hover,
.pub-bbs .btnA .btn:focus,
.pub-bbs .btnA .btn:active { color: #fff; }

/* ============================================================
   카드형 게시판 목록 (inc/bbsCardList.jspf) — 간행물
   골격(.view_area01 dl/dt/dd, dt.he02 120x150)은 레거시 n2019 layout.css 원본을 그대로 쓴다.
   여기서는 레거시가 인라인으로 때우거나 아예 없던 부분만 보완한다.
   ============================================================ */
.pub-bbs-card .view_area01 dl { display: flex; align-items: flex-start; }
.pub-bbs-card .view_area01 dl dd { float: none; flex: 1; min-width: 0; }

/* 표지 썸네일 : dt(120x150) 안에 꽉 채우되 비율 유지 */
.pub-bbs-card .bbs_thumb { display: block; width: 100%; height: 148px; object-fit: contain; background: #fff; }

/* 표지가 없거나 로드 실패했을 때 자리표시 (js/pub/bbs.js 가 바꿔 준다) */
.pub-bbs-card .bbs_thumb_none {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 148px;
    background: #f4f6fa; color: #999; font-size: 12px;
}

/* 제목 줄 : 제목 + 끝에 다운로드 버튼 */
.pub-bbs-card .view_area01 dl dd p.title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 다운로드 버튼 — 제목 옆에 놓이는 작은 아웃라인(고스트) 알약 버튼.
   ★ 선택자를 이렇게 길게 쓰는 이유 ★
     layout.css 의 `.view_area01 dl dd p.title a { font-weight:bold; font-size:1.2em; color:#1b52a9 }`
     가 이 <a> 에도 걸린다. 짧은 `.pub-bbs-card .bbs_download`(클래스 2개)로는 우선순위가 밀려
     버튼 글자가 제목처럼 굵고 크게 나온다. 같은 경로를 다 적어 확실히 이긴다.
   굵은 파란 제목 옆이라 버튼은 작고 가볍게 둔다 — 대비로 제목이 주인공이 되게. */
.pub-bbs-card .view_area01 dl dd p.title a.bbs_download {
    display: inline-flex; align-items: center; gap: 4px;
    box-sizing: border-box; height: 22px; padding: 0 10px;
    border: 1px solid #c9d6e6; border-radius: 11px;
    background: #fff; color: #4a6785;
    font-size: 11px; font-weight: normal; line-height: 1; letter-spacing: 0;
    vertical-align: middle; white-space: nowrap;
    transition: background-color .12s, border-color .12s, color .12s;
}
.pub-bbs-card .view_area01 dl dd p.title a.bbs_download .axi-file-download { font-size: 12px; }

/* 올리거나 포커스가 가면 파랗게 채운다. :focus 를 빼면 키보드 사용자에게 표시가 없다. */
.pub-bbs-card .view_area01 dl dd p.title a.bbs_download:hover,
.pub-bbs-card .view_area01 dl dd p.title a.bbs_download:focus,
.pub-bbs-card .view_area01 dl dd p.title a.bbs_download:active {
    background: #0461c0; border-color: #0461c0; color: #fff;
}

/* 등록일 등 보조 정보 */
.pub-bbs-card .bbs_card_meta { margin: 0; padding: 0; list-style: none; }
.pub-bbs-card .bbs_card_meta li { float: left; margin-right: 10px; color: #777; font-size: 12px; }
.pub-bbs-card .bbs_card_empty { float: none; width: 100%; padding: 30px 0; text-align: center; color: #888; }

/* ============================================================
   홍보책자 (site/notification/book.jsp) — 최신 1건 다운로드 화면
   안내 문구/버튼 이미지는 레거시 원본을 그대로 쓰고, 여백만 정리한다.
   ============================================================ */
.pub-bbs-book .book_down { margin: 4px 0 10px; }
.pub-bbs-book .book_info { margin: 0 0 16px; font-size: 13px; color: #333; }
.pub-bbs-book .book_date { margin-left: 6px; color: #888; font-size: 12px; }
.pub-bbs-book .book_none {
    margin: 4px 0 16px; padding: 18px; text-align: center;
    background: #f7f9fc; border: 1px solid #d8e0ec; border-radius: 6px; color: #666;
}
.pub-bbs-book .book_cover img { max-width: 100%; height: auto; }

/* ============================================================
   영문 사이트 (pubLayout lang="en")
   레거시 영문 화면들은 inc/eng/topMenu.jsp / bottomMenu.jsp 안에 인라인 <style> 로
   로고 이미지를 갈아끼웠다. 여기서는 인라인 스타일을 쓰지 않고 <html lang="en"> 를
   선택자로 삼아 같은 결과를 낸다(pub.css 는 n2019/style.css 뒤에 로드되고,
   html[lang] + 클래스 조합이라 우선순위도 이긴다).
   ============================================================ */
html[lang="en"] .header h1 { background-image: url(../../n2019/img/kma_radar_e1.png); }
html[lang="en"] .copy_wrap h1 { width: 255px; background-image: url(../../n2019/img/logo_foot_radar_e.png); }

/* ---- 영문 메뉴 폭 ----
   n2019/style.css 는 한글 기준이라 주메뉴 1칸이 고정폭(.nav > li{width:calc(100%/9)} ≒ 99px),
   2차 메뉴는 고정 180px 이다. 영문은 라벨이 길어(Radar Images / Administrative Convergence)
   이 폭에서 글자가 잘리거나 두 줄로 접힌다.
   운영 영문 사이트는 인라인 <style> 로 .nav > li{width:calc(100%/7)} 만 넓혀 두었으나
   2차 메뉴(180px)는 그대로여서 긴 항목이 여전히 넘친다.
   → 고정 폭 대신 "글자 길이에 맞춰"(auto / max-content) 잡는다. 폰트가 바뀌어도 안전하다. */

/* 주메뉴 1차: 칸을 n등분하지 않고 라벨 길이에 맞춘다(좌측 정렬은 운영 사이트와 동일). */
html[lang="en"] .nav > li { flex: 0 0 auto; width: auto; }
html[lang="en"] .nav > li > a { width: auto; padding: 0 22px; white-space: nowrap; }

/* 주메뉴 2차: 가장 긴 항목에 맞춰 넓어지되 300px 를 넘지 않는다.
   가운데 정렬은 style.css 가 margin-left:-90px(고정폭 절반)로 했으므로 transform 으로 바꾼다. */
html[lang="en"] .sub {
    width: max-content; min-width: 180px; max-width: 300px;
    margin-left: 0; transform: translateX(-50%);
}
html[lang="en"] .sub li a { padding-right: 20px; white-space: nowrap; }

/* 전체메뉴: 한 칸 20%(≒165px) 로는 긴 2차 항목("Administrative Convergence")이 접혀서 25% 로 넓힌다.
   칸이 넓어지면 줄바꿈 위치도 5번째 → 5번째(4칸/줄)로 바뀌므로 구분선 예외도 옮긴다.
   (원본은 5칸/줄 기준이라 6번째에서 구분선을 지운다) */
html[lang="en"] .full_nav > li { width: 25%; }
html[lang="en"] .full_nav > li:nth-child(5) { border-left: none; }
html[lang="en"] .full_nav > li:nth-child(6) { border-left: 1px solid #ccd2d7; }

/* 전체메뉴 가로 구분선(.full_lnb::after, style.css) 제외.
   한글은 대메뉴가 여러 줄로 접혀 그 사이(top:490px)를 나누는 선이지만,
   영문은 대메뉴가 3개뿐이라 한 줄이어서 메뉴 아래 빈 곳에 선만 남는다.
   게다가 top:490px 이 scrollHeight 에 잡혀(pubTopMenu.js 가 이 값을 max-height 로 쓴다)
   전체메뉴 박스까지 불필요하게 늘어난다 → display:none 이 아니라 content:none 으로 아예 생성하지 않는다. */
html[lang="en"] .full_lnb::after { content: none; }

/* 영문 - 본문 이관 대기 안내(pub/en/pending.jsp) */
.pub-pending {
    margin: 10px 0 30px; padding: 28px; text-align: center;
    background: #f7f9fc; border: 1px solid #d8e0ec; border-radius: 8px;
}
.pub-pending-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #333; }
.pub-pending-desc { margin: 0; font-size: 14px; color: #555; }

/* 영문 - 사이트맵(pub/en/sitemap.jsp)
   한글 사이트맵과 동일한 마크업(.sitemap dl/dt/dd — layout.css)을 쓰므로 전용 스타일은 두지 않는다.
   dt 글자색/굵기는 위 .sitemap dl dt a 규칙(한글과 공용)이 담당한다. */

/* 본문 폭을 넘는 큰 이미지(연혁 등)를 칼럼 폭에 맞춘다.
   레거시는 화면마다 width=743px 를 박아 두었으나(영문 연혁 원본 이미지는 945px),
   고정 폭 대신 이 클래스로 통일한다. */
.img_full { max-width: 100%; height: auto; }

/* ---- 영문 본문 탭(.top_nav) ----
   layout.css 의 탭은 한글 한 줄 기준으로 높이가 26px 로 고정되어 있어(padding 12px 포함 50px),
   두 줄이 되는 영문 라벨("Background and Purpose", "Present Condition of Radar Operation and Its Issues")이
   탭 밖으로 삐져나온다. 운영 영문 사이트도 인라인 <style> 로 .top_nav li a{height:60px} 을 준다.
   여기서는 줄 수에 상관없이 맞도록 높이를 내용에 맡기고 최소 높이만 준다(활성 탭도 같은 높이). */
html[lang="en"] .top_nav li a,
html[lang="en"] .top_nav li a.on {
    height: auto; min-height: 52px;
    display: flex; align-items: center; justify-content: center;
}

/* 탭 높이 맞춤 — 한 줄짜리 라벨("Progress")만 다른 탭보다 낮아 계단처럼 보이던 문제.
   a 는 common.css 에서 box-sizing:border-box 이므로 min-height:52px 안에 padding(12px x 2)과
   테두리가 포함된다 → 글자가 들어갈 자리는 26px 뿐이라 두 줄 라벨은 52px 를 넘겨 62px 가 되고,
   한 줄인 "Progress" 만 52px 로 남는다. min-height 를 키워 맞추면 글꼴/문구가 바뀔 때 또 어긋난다.
   → ul/li 를 flex 로 두어 같은 줄의 탭이 모두 가장 높은 탭 높이로 늘어나게 한다(align-items 기본값 stretch).
   li 의 float 는 flex 항목이 되면 무시되지만, 의도를 분명히 하려고 명시적으로 푼다. */
html[lang="en"] .top_nav { display: flex; flex-wrap: wrap; }
html[lang="en"] .top_nav li { float: none; display: flex; }


/* ---- 담당자 안내 띠(#part_weather) ----
   레거시 화면들이 본문 맨 아래에 두던 "담당관리 / 문의" 띠. 낙뢰 횟수·낙뢰 전국영상이 함께 쓴다.
   원본은 화면마다 인라인 <style> 로 같은 규칙을 복붙해 두었다. */
#part_weather {
    margin: 10px 0 0 0;
    /* 레거시는 '/images/bg_part.gif'(컨텍스트 경로 없는 절대경로)라 서브패스 배포 시 깨졌다.
       CSS 파일 기준 상대경로로 두면 컨텍스트 경로와 무관하게 맞는다. */
    background: url('../../images/bg_part.gif') repeat left top;
    width: 750px;
    max-width: 100%;
    height: 24px;
    padding: 10px 0 0 0;
    line-height: normal;
    text-align: center;
    clear: both;
}
#part_weather li { display: inline; }
#part_weather li strong { color: #0159ae; }
#part_weather li img { padding: 0 7px; vertical-align: -2px; }

/* 본문 소제목(텍스트) — 레거시 제목 이미지(images/txt/bj_*.gif)와 같은 모양으로 그린다.
   위 주황/아래 파랑 세로 막대 + 굵은 글씨. 제목 이미지가 없는 화면(연직바람관측망/원리 등)이 쓴다. */
.veiw_content h3.veiw_content_h3 {
    /* common.css 가 h1~h6 을 inline-block 으로 두어 뒤 본문이 제목 옆에 붙는다. 한 줄을 차지하게 한다. */
    display: block;
    margin-bottom: 10px;
    position: relative;
    padding-left: 14px;
    font-size: 17px;
    font-weight: bold;
    line-height: 20px;
    color: #333;
}
.veiw_content h3.veiw_content_h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 5px;
    height: 16px;
    background: linear-gradient(to bottom, #f08300 0, #f08300 4px, #1f5fb4 4px, #1f5fb4 100%);
}