@charset "utf-8";
/*
 * 사용자단 추가 스타일.
 *
 * 퍼블리싱 결과물(common/layout/sub/contents/board/main.css)은 손대지 않는다.
 * 퍼블리셔 수정본을 다시 받으면 그대로 덮어쓸 파일들이기 때문이다.
 * 시안에 없어 우리가 더한 것만 여기 모은다.
 */

/* --------------------------------------------------------------------
 * 안내 화면(.nothing)의 '메인으로 이동' 링크.
 * 시안의 .nothing 은 제목과 설명만 있고 링크가 없다. 오류 쪽에서 방문자가
 * 빠져나갈 길이 필요해 더했다. 색은 시안 주색(#B62B5B)을 따른다.
 * -------------------------------------------------------------------- */
.nothing .home_link {
    display: inline-block;
    margin-top: 3rem;
    padding: 1.4rem 3.2rem;
    border-radius: 0.6rem;
    background: #B62B5B;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
}

.nothing .home_link:hover,
.nothing .home_link:focus {
    background: #8E153F;
}

/* --------------------------------------------------------------------
 * 인사말 제목 안의 머리글귀. (개발계획 D-14)
 *
 * 퍼블리싱 원본은 `<h3><p>…</p>…</h3>` 였고 CSS 도 `h3 p` 로 짚는다.
 * 제목 안에 문단을 넣은 것은 바르지 않은 마크업이라 정화기가 풀어 버리므로,
 * 이관할 때 `<span class="lead">` 로 바꾸었다(ImportPublishedContents).
 * 아래는 퍼블리싱 `contents.css` 의 `.greeting .text > h3 p` 와 **같은 선언**이다.
 *
 * 퍼블리셔 정정본을 받으면 이 블록과 이관 시의 변환을 함께 걷어낸다.
 * -------------------------------------------------------------------- */
.greeting .text > h3 .lead {
    /* 원본이 <p> 였다. 줄바꿈까지 같아야 하므로 블록으로 둔다. */
    display: block;
    color: #B62B5B;
    font-size: 2.1rem;
}

/* --------------------------------------------------------------------
 * 게시판 검색 버튼. (개발계획 P-8)
 *
 * 시안은 검색을 `<a href="#">` 으로 두었고 board.css 도 그 선택자
 * (`[data-board="search"] > div a`)에만 모양을 주었다. 실제로 제출하려면
 * `<button type="submit">` 이어야 하므로, **같은 선언을 button 에 옮긴다.**
 * 값은 board.css 의 것을 그대로 따른다 — 둘이 달라지면 안 된다.
 *
 * 퍼블리셔가 button 으로 고친 CSS 를 주면 이 블록을 걷어낸다.
 * -------------------------------------------------------------------- */
[data-board="search"] > div button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #717171 url("../../images/site/skin/board_img06.svg") no-repeat 50% 70% / 44px auto;
    border: 0;
    border-radius: 0.6rem;
    transition: all 0.2s linear;
    text-indent: -9999px;
    cursor: pointer;
}

[data-board="search"] > div button:hover,
[data-board="search"] > div button:focus {
    background-color: #8E153F;
}

/* --------------------------------------------------------------------
 * 게시물 상세의 '목록' 버튼. (지시, 2026-09-21)
 *
 * 시안에는 이 버튼이 없다. board.css 의 `.btn` 규칙들은 크기만 손보는
 * 것뿐이고 바탕이 되는 선언이 아예 없어(템플릿 잔재), 여기서 새로 정한다.
 *
 * 색은 사이트 주색을 그대로 쓴다 — board.css 의 `--color-primary1`(#B62B5B)과
 * `--color-primary1-hover`(#aa2050)를 같은 값으로 적는다. 변수는 board.css 의
 * :root 에 있어 이 파일에서도 읽히지만, 이 파일만 따로 쓰일 때를 대비해
 * 값을 직접 적고 주석으로 출처를 남긴다.
 *
 * 첨부의 '다운로드' 는 테두리형인데 이쪽을 채움형으로 둔 까닭은, 상세 쪽에서
 * 방문자가 할 주된 행동이 '목록으로 돌아가기' 하나이기 때문이다.
 * -------------------------------------------------------------------- */
.view_bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 4rem;
}

.view_bottom .btn_list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12rem;
    padding: 1.3rem 3rem;
    background-color: #B62B5B;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid #B62B5B;
    border-radius: 0.6rem;
    transition: all 0.2s linear;
}

.view_bottom .btn_list:hover,
.view_bottom .btn_list:focus {
    background-color: #aa2050;
    border-color: #aa2050;
    color: #fff;
}

@media screen and (max-width: 740px) {
    .view_bottom {
        margin-top: 2.4rem;
    }

    /*
     * 손가락으로 누르기 쉽게 키운다.
     *
     * 높이만 px 로 적는다 — 이 화면폭에서는 common.css 가 뿌리 글씨를 8px 로
     * 줄여(1rem = 8px) rem 으로 적으면 누를 자리가 40px 아래로 내려간다.
     * 손가락 목표 크기는 글씨 크기를 따라 줄어들 값이 아니다.
     */
    .view_bottom .btn_list {
        min-width: 14rem;
        min-height: 44px;
        padding: 1.5rem 3rem;
    }
}

/* --------------------------------------------------------------------
 * 갤러리 상세 슬라이드 이미지가 아래쪽이 잘리는 문제. (지시, 2026-09-21)
 *
 * board.css 안에서 규칙 둘이 부딪친다.
 *
 *   758행  … .img_thumb … .swiper-slide img { height:100%; object-fit:cover; }
 *   738행  … .slides   … .swiper-slide img { height:100%; object-fit:contain; }
 *   760행  [data-board="view"] .view_m img { height: auto !important; }
 *
 * 760행은 본문(.board_txt) 이미지가 늘어나지 않게 하려는 규칙인데, `!important`
 * 에 선택자도 넓어 **슬라이드 이미지까지 함께 잡는다.** 그러면 이미지 높이가
 * 원본 비율대로 커지고(1024×1024 이미지가 954×954 로), 슬라이드 상자는
 * 954×528 짜리 고정 비율 상자라 `overflow:hidden` 에 아래가 잘려 나간다.
 * object-fit 이 일할 자리를 잃는 셈이다.
 *
 * 퍼블리싱 시안은 가로로 긴 자리표시 이미지(600×400·954×580)만 써서 이 잘림이
 * 잘 드러나지 않았다. 실제 등록 이미지가 정사각형·세로형이면 바로 보인다.
 *
 * 아래에서 슬라이드 이미지에 한해 높이를 되돌린다. 본문 이미지는 그대로 두어
 * 760행의 원래 의도를 해치지 않는다.
 *
 * 퍼블리셔에 760행의 선택자를 `.board_txt img` 로 좁혀 달라고 요청하고,
 * 고쳐진 CSS 를 받으면 이 블록을 걷어낸다.
 * -------------------------------------------------------------------- */
[data-board="view"] .view_m .img_wrap .slides .swiper .swiper-wrapper .swiper-slide img,
[data-board="view"] .view_m .img_thumb .swiper .swiper-wrapper .swiper-slide img {
    height: 100% !important;
}

/* --------------------------------------------------------------------
 * 링크 없는 상단 배너. (개발계획 P-11)
 *
 * layout.css 는 좁은 화면에서 배너 글 뒤에 '자세히보기+' 를 붙인다
 * (`.banner_text::after`). 링크URL 이 없는 팝업은 누를 곳이 없는데 그 문구가
 * 붙으면 방문자가 눌러 보게 된다. 링크가 없을 때는 `a` 대신 `span` 을 쓰므로
 * 그때만 문구를 뗀다.
 * -------------------------------------------------------------------- */
#headerBanner .banner_content span.banner_text::after {
    content: none;
}

/* --------------------------------------------------------------------
 * 색 대비 보정 — KWCAG 2.2 5.3.3 (명도 대비 4.5:1). (개발계획 6단계 검수)
 *
 * 자동 점검(axe-core)에서 시안 색이 기준에 못 미친 곳이다. 시안 색에서
 * **가장 적게 벗어나면서** 4.5:1 을 넘는 색을 계산해 골랐다. 퍼블리싱 CSS 는
 * 손대지 않고 여기서 덮는다 — 퍼블리셔가 기준에 맞춘 CSS 를 주면 걷어낸다.
 *
 *   요소                     시안              →  보정              대비
 *   푸터 저작권 문구          #6D7882 / #222   →  #828C94          3.53 → 4.63
 *   조직도 '총장' 원 글자     #FFF / #BE9F56   →  #222 (바탕 그대로) 2.54 → 6.4
 *   조직도 위원회 영문 부제    #FFA8C7 / #B62B5B →  #FFD7E5          3.35 → 4.61
 *   게시판 검색창 글자·안내문  #777 / #FFF      →  #757575          4.48 → 4.63
 *
 * '총장' 원은 바탕을 바꾸면 28% 를 어둡게 해야 해 금색이 무너지고 바깥 테두리
 * 색과도 어긋난다. 그래서 바탕 금색은 두고 글자를 어둡게 했다.
 * -------------------------------------------------------------------- */
#footer .bottom .inner .inner_b .copy {
    color: #828C94;
}

.organ .top span {
    color: #222;
}

.organ .box .tit p {
    color: #FFD7E5;
}

[data-board="search"] > div input,
[data-board="search"] > div input::placeholder {
    color: #757575;
}

/* --------------------------------------------------------------------
 * 키보드 초점 표시. KWCAG 2.2 — 초점이 어디 있는지 보여야 한다. (6단계 검수)
 *
 * 퍼블리싱 common.css 의 초기화가 `button { outline: none; }` 으로 모든 버튼의
 * 초점 표시를 지우고, 일부 버튼만 따로 되살려 두었다. 되살리지 않은 버튼 —
 * 메인 배너 닫기, 비주얼 이전·다음·멈춤, 공지 멈춤, 게시판 검색 — 은 Tab 으로
 * 가도 어디에 초점이 있는지 알 수 없었다.
 *
 * `:focus-visible` 이라 **키보드로 옮겨 갈 때만** 나타난다. 마우스로 누를 때는
 * 지금과 똑같이 아무 표시가 없다. 색은 사이트 주색, 어두운 바탕(상단 배너·
 * 메인 비주얼) 위에서는 흰색을 쓴다.
 * -------------------------------------------------------------------- */
button:focus-visible {
    outline: 3px solid #B62B5B;
    outline-offset: 2px;
}

#headerBanner button:focus-visible,
#visual button:focus-visible {
    outline-color: #fff;
}

/* --------------------------------------------------------------------
 * SNS 공유 아이콘 — 네이버 블로그 · 페이스북. (계획 P-3, 지시 2026-09-21)
 *
 * 시안은 공유 목록의 두 항목을 회색 네모(`background:#ddd`, sub.css)로만 두었다.
 * 지정받은 아이콘(40×40 SVG, images/site/sub/icon-*.svg)을 입힌다.
 *   평소        icon-blog.svg   · icon-fc.svg     (브랜드 색 바탕)
 *   올림·초점   icon-blog-h.svg · icon-fc-h.svg   (흰 바탕 + 테두리)
 * 크기는 아이콘 원래 크기(40px = 4rem)에 맞췄다. 좁은 화면은 뿌리 글씨가
 * 8px 로 줄어 32px 가 된다.
 * 글자(블로그·페이스북)는 sr_only 로 가려져 있어 화면낭독기는 그대로 읽는다.
 * -------------------------------------------------------------------- */
#visual .share > li .sns_list > li a.blog,
#visual .share > li .sns_list > li a.facebook {
    width: 4rem;
    height: 4rem;
    border-radius: 0.8rem;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
}

#visual .share > li .sns_list > li a.blog {
    background-image: url("../../images/site/sub/icon-blog.svg");
}

#visual .share > li .sns_list > li a.blog:hover,
#visual .share > li .sns_list > li a.blog:focus-visible {
    background-image: url("../../images/site/sub/icon-blog-h.svg");
}

#visual .share > li .sns_list > li a.facebook {
    background-image: url("../../images/site/sub/icon-fc.svg");
}

#visual .share > li .sns_list > li a.facebook:hover,
#visual .share > li .sns_list > li a.facebook:focus-visible {
    background-image: url("../../images/site/sub/icon-fc-h.svg");
}

/* 공유 목록이 좁은 화면에서 페이지 탭 막대 밑에 깔리는 문제.
 *
 * `.visual_top` 의 등장 애니메이션(fadeIn, fill both)이 끝난 뒤에도 transform 을
 * 남겨 **자기만의 쌓임 층**을 만든다. 그 층이 z-index 1 인 `.page_tab` 보다 아래라,
 * 안쪽 공유 목록의 z-index 2 가 소용없이 탭 막대에 덮였다(아이콘이 어둡고, 눌러도
 * 탭 막대가 받았다). 층 자체를 탭 막대 위로 올린다. 탭 막대의 펼침 목록은
 * 아래로 열리므로 겹치지 않는다. */
#visual .visual_top {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------
 * 인쇄. (printPage — 서브 화면 프린트 버튼, 지시 2026-09-21)
 *
 * 시안에는 인쇄용 CSS 가 없어 화면 전체 — 헤더·전체메뉴·비주얼 사진·푸터 —
 * 가 그대로 찍혔다. **쪽 제목과 본문만** 남긴다.
 *
 *   빼는 것   상단 배너 · 헤더 · 전체메뉴 · 경로 · 공유/프린트 버튼 · 페이지 탭 ·
 *             푸터 · 위로 버튼 · 게시판 검색 · 쪽 넘김 · 이전/다음글 · 목록 버튼 ·
 *             첨부 '다운로드' 버튼 · 슬라이드 화살표와 썸네일 줄
 *   남기는 것 쪽 제목(비주얼 배경은 빼고 글자만) · 본문 · 첨부 파일 이름
 *   바꾸는 것 FAQ 답변은 모두 펼쳐 찍는다 · 조직도 같은 색 상자는 바탕색 유지
 * -------------------------------------------------------------------- */
@media print {
    @page {
        size: A4;
        margin: 15mm 12mm;
    }

    /* 흰 바탕은 html 에만 준다. body 는 position:relative 라, 여기에 바탕을 주면
       z-index 음수인 그림(사업개요 가운데 그림)을 덮어 지운다. */
    html {
        background: #fff !important;
    }

    html,
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #skip,
    #headerBanner,
    #header,
    #slide_map,
    #footer,
    .bt_top,
    #visual .navi,
    #visual .share,
    #visual .page_tab,
    [data-board="search"],
    [data-board="paging"],
    [data-board="view"] .view_b,
    .view_bottom,
    .file > ul > li > div,
    .img_wrap .slides > a,
    .img_thumb {
        display: none !important;
    }

    body.banner_open #wrap,
    .sub_page #wrap,
    #wrap {
        padding-top: 0 !important;
    }

    /* 쪽 제목 — 비주얼 사진·어두운 덮개를 빼고 글자만 검정으로 */
    /* 제목 아래 줄은 긋지 않는다 — 게시판은 자체 윗줄(2px)이 있어 겹치면 두 줄이 된다 */
    #visual {
        padding: 0 0 4mm !important;
    }

    #content,
    #txt {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #txt > [data-board] {
        margin-top: 0 !important;
    }

    #visual::before,
    #visual::after {
        display: none !important;
    }

    #visual .visual_top,
    #visual .navi {
        animation: none !important;
    }

    #visual .visual_top .title {
        color: #000 !important;
        font-size: 20pt;
    }

    /* PC 화면 그대로 찍는다. 종이 폭은 A4 에서 약 700px 이라, 반응형 규칙이
       종이에도 걸리면 모바일 화면이 찍혔다. 그래서 반응형 규칙은 screen 전용으로
       돌렸고(common·contents·layout·main·sub.css), 여기서는 본문을 PC 폭(1200px)
       으로 짠 뒤 종이 폭(186mm ≒ 703px)에 맞게 줄인다. 703 / 1200 ≒ 0.585 */
    body {
        zoom: 0.585;
    }

    #container {
        width: 1200px;
        max-width: none;
        padding: 0;
    }

    /* 쪽을 넘길 때 그림·표 행·카드가 반으로 잘리지 않게 */
    img,
    tr,
    li,
    .box {
        break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    /* FAQ — 접힌 답변도 모두 찍는다 */
    [data-board="faq_list"] > li > .ans {
        display: block !important;
        height: auto !important;
        padding-top: 3mm !important;
    }

    /* 목록 제목의 말줄임(…)을 푼다 — 종이에서는 눌러서 전체를 볼 수 없다 */
    #txt [data-board] td[data-label="제목"],
    #txt [data-board] td[data-label="제목"] * {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: unset !important;
        max-height: none !important;
    }

    /* 여러 줄로 풀린 제목은 가운데보다 왼쪽 정렬이 읽기 쉽다 */
    #txt [data-board="list"] td[data-label="제목"] {
        text-align: left !important;
    }

    /* 링크 밑줄·색이 인쇄에서 흐려지지 않게 */
    a {
        color: inherit !important;
    }
}