@charset "utf-8";

/* site.css — Next.js 재구현본 전용 보정.
   원본은 onclick 으로 이동했지만 여기서는 <a>(next/link) 를 쓴다.
   default.css 의 a:hover(#0eae95) 가 li:hover/h3:hover 의 색을 눌러버리므로
   링크가 부모 색을 그대로 따르게 되돌린다. */

#navigation a, #latests a, #wad1 a, h1 a, #topmenu a { color: inherit; }
#navigation a:hover, #latests h3 a:hover, #wad1 a:hover, h1 a:hover, #topmenu a:hover { color: inherit; }
#latests li a:hover { color: #0eae95; }

/* 대메뉴 드롭다운: 원본 jQuery slideDown/slideUp("fast") 대체.
   ul 이 td(.a) 의 자식이라 커서가 펼쳐진 목록 위에 있어도 계속 열려 있다. */
#navigation ul {
    display: block;
    max-height: 0;
    padding: 0 5px;
    overflow: hidden;
    transition: max-height .2s ease, padding .2s ease;
}
#navigation .a:hover ul { max-height: 400px; padding: 5px; }
/* 원본은 li 전체에 onclick 이 있어 줄 아무 데나 눌러도 이동했다. */
#navigation li a, #wad1 li a { display: block; }

/* 원본: $("#navigation h3").hover(animate backgroundPosition -10px -100px ↔ -10px -10px, "slow") */
#navigation h3 { transition: background-position .6s ease, color .2s ease; }
#navigation .a:hover h3 { background-position: -10px -10px; }

/* 맨 위로 버튼 — 원본은 스크롤에 맞춰 animate 했지만 fixed 로 같은 위치를 얻는다. */
#floater { position: fixed; top: 320px; left: 50%; margin-left: 480px; z-index: 10; }

/* 키비주얼 슬라이더: 원본 main.asp 의 인라인 <style> 에 있던 규칙 (main.css 에는 없다). */
/* 폭을 %로 잡아 데스크톱(780px)과 모바일(화면폭)이 같은 코드로 돈다.
   부모(#keyvisual)에 높이가 있으면 height:100%, 없으면(모바일) aspect-ratio 가 받는다. */
#slide1 { position: relative; width: 100%; height: 100%; aspect-ratio: 780 / 290; overflow: hidden; }
#slide1 .track { position: absolute; left: 0; top: 0; height: 100%; transition: transform .7s ease; }
#slide1 .track img { float: left; height: 100%; }
.pagination { position: absolute; right: 10px; top: 10px; list-style: none; z-index: 5; }
.pagination li { float: left; margin: 3px; list-style: none; }
.pagination li a { width: 13px; height: 13px; background: url(/legacy/media/slides/pagination.png) 0px 0px; overflow: hidden; display: block; }
.pagination li span { display: none; font: bold 18px/1 "Wng"; }
.pagination li a.active, .pagination li a:hover.active { background-position: 0px -13px; }
.pagination li a:hover { background-position: 0px -26px; }

/* 서브페이지 목록(#wad1) 의 현재 항목 표시 */
#wad1 .em1 { font-weight: bold; color: #6C3; }

/* 게시판 — 원본 public4 의 헤더 바(bar1.gif) + table.index 행, showHide 아코디언을 <details> 로 */
.bbsHead { width: 100%; background: url(/legacy/media/bbs/bar1.gif) repeat-x; margin-top: 10px; }
.bbsHead td { height: 30px; text-align: center; }
.bbsHead .no { width: 40px; }
.bbsHead .nm { width: 150px; }
.bbsHead .dt { width: 80px; }

.bbsItem, .bbsRow { border-bottom: 1px solid #EEE; }
.bbsItem > summary, .bbsRow > summary, .bbsRow.static { padding: 9px 0 8px; cursor: pointer; list-style: none; }
.bbsRow.static { cursor: default; }
.bbsItem > summary::-webkit-details-marker, .bbsRow > summary::-webkit-details-marker { display: none; }
.bbsItem .t, .bbsRow .t { display: inline-block; width: calc(100% - 300px); vertical-align: middle; }
.bbsItem .w, .bbsRow .nm { display: inline-block; width: 150px; text-align: center; vertical-align: middle; }
.bbsItem .d, .bbsRow .dt { display: inline-block; width: 80px; text-align: center; vertical-align: middle; }
.bbsRow .no { display: inline-block; width: 40px; text-align: center; font-weight: bold; vertical-align: middle; }
.bbsItem .t { width: calc(100% - 230px); }

.bbsBody { padding: 10px 0 30px; background: url(/legacy/media/bbs/bar3.gif) repeat-x bottom; line-height: 1.7; }
.bbsBody > div { margin: 10px; }
.bbsBody img, .bbsBody iframe { max-width: 900px; }

/* 모바일 전용 메뉴 — 기본은 숨김, mobile.css 의 @media 안에서만 보인다. */
.mnavBtn, .mnav { display: none; }