@charset "UTF-8";
/* ============================================================================
   기본형4(테마6) 공지사항 /board/notice — KAN-203 / KAN-206
   시안: Figma vAMQCUNyLh45evN3WBmkWw (모션O 기본형4)
         목록 PC 0:890  · MO 1:2929   (1920 = 1x / 720 = @2x → 전부 ÷2)
         상세 PC 0:937  · MO 1:3144

   ⚠️ 레거시 board_list_wrap / board_item / board_view_wrap 을 재사용하지
      않는다. page.css 가 그 클래스들을 «카드»(그림자·둥근 모서리·세로 배치)로
      이미 잡아 놓아서 덮으려면 id 까지 끌어써야 한다. board-qna.css 가 같은
      이유로 t6-qna 를 새로 판 것과 같은 판단이다.
   ⚠️ 이 파일의 모든 선택자는 .t6-notice 로 시작한다. 예외를 만들지 말 것 —
      예외가 하나라도 생기면 테마1~5 로 새는지 눈으로 확인할 수 없다.
   ⚠️ 컨테이너는 .minframe(1168px) 안의 .t6-notice-wrap(1100px)이다. 시안
      치수를 그대로 재현하는 쪽을 택했고, 그래서 형제 서브페이지와 좌우
      기준선이 34px 어긋난다 — introduction.css / board-qna.css 와 같은
      «의도된 차이» 다.
   ⚠️ MO 브레이크포인트는 720px 이다. 테마6 의 MO 구간이고(page.css·
      common.css 가 쓰는 값) MO 시안 프레임 폭과도 같다.
   ============================================================================ */

/* .t6-notice-wrap 에 위·아래 여백을 걸지 않는다. layout.css 의 #content 가
   padding-top: var(--nav-height) 와 padding-bottom: var(--page-padding) 를
   이미 둘 다 갖고 있다. */
.t6-notice-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── 목록 (0:890) ─────────────────────────────────────────────── */

/* 시안 0:898 은 20px Bold «좌측» 정렬이다. 아래 여백 17px = 제목 top 312 +
   높이 24 → 구분선 353. .page-tit-box(3.15rem·가운데)를 쓰지 않으므로
   덮을 일도 없다. */
.t6-notice__title {
    margin: 0;
    padding: var(--title-padding) 0 17px;
    font: 700 20px/1.2 Pretendard, sans-serif;
    color: #000;
    text-align: left;
}

/* 0건일 때 목록 «대신» 나온다. 위아래 검은 선 안에 문구만 가운데로 둔다
   (board-qna.css 의 t6-qna__empty 와 같은 처리). */
.t6-notice__empty {
    padding: 80px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font: 400 16px/27px Pretendard, sans-serif;
    color: #888;
    text-align: center;
}

/* 목록 위아래 검은 선(0:929 / 0:930 — SVG stroke="black", 1px).
   행 사이 구분선 #c8c8c8 과 «다른 색» 이다. */
.t6-notice {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.t6-notice__item {
    border-bottom: 1px solid #c8c8c8;
}

/* 마지막 행의 회색 선은 목록 아래 검은 선과 겹치므로 지운다. */
.t6-notice__item:last-child {
    border-bottom: 0;
}

/* 시안 0:900 은 `pl-20 py-20 gap-30`, 행 높이 265 = 20 + 225 + 20. */
.t6-notice__link {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px 0 20px 20px;
}

.t6-notice__link:hover .t6-notice__tit {
    text-decoration: underline;
}

/* 썸네일 300 x 225 (4:3). 각진 모서리다 — 시안에 라운드가 없다.
   ⚠️ 폭이 고정이므로 높이를 «직접» 준다. padding-top 백분율은 부모 폭 기준
      이라 여기서는 4:3 이 나오지 않는다. 폭이 유동인 태블릿·MO 구간에서만
      padding-top 으로 비율을 잡는다(아래 미디어쿼리). */
.t6-notice__thumb {
    position: relative;
    flex: 0 0 300px;
    width: 300px;
    height: 225px;
    overflow: hidden;
}

.t6-notice__thumb > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t6-notice__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.t6-notice__tit {
    font: 500 24px/1.2 Pretendard, sans-serif;
    color: #000;
    word-break: break-word;
}

/* 시안 0:904 — 제목 top 대비 date top 이 39px, 제목 높이 ≈29 → 간격 10px. */
.t6-notice__date {
    margin-top: 10px;
    font: 400 16px/27px Pretendard, sans-serif;
    color: #000;
}

/* 페이지네이션 — 시안 0:931 은 화살표 없이 숫자만이다(BoardPagination 이
   창이 잘릴 때만 화살표를 낸다. 시안은 3쪽짜리라 안 나올 뿐이고 마크업은
   공용을 그대로 쓴다). 위 여백 49px = 아래 검은 선 1678 → 숫자 1727. */
.t6-notice-wrap .pagination_wrap {
    padding-top: 49px;
}

.t6-notice-wrap .pagination li {
    margin-right: 24px;
}

.t6-notice-wrap .pagination li:last-of-type {
    margin-right: 0;
}

.t6-notice-wrap .pagination li a {
    min-width: 0;
    padding: 0;
    font: 400 18px/1 Pretendard, sans-serif;
    color: #b3b3b3;
}

.t6-notice-wrap .pagination li.active a,
.t6-notice-wrap .pagination li:hover a {
    font-weight: 700;
    color: #000;
}

/* ── 상세 (0:937) ─────────────────────────────────────────────── */

/* PC 시안 0:937 에는 페이지 제목이 «없다». MO 1:3166 에만 있다.
   마크업에서 빼지 않고 여기서 감춘다 — 문서 제목 구조는 남겨 둔다. */
.t6-notice__title--view {
    display: none;
}

/* 탭 끝(~244) → 이미지 top 299 = 55px. */
.t6-notice-view {
    padding-top: 55px;
}

/* 대표 이미지 400 x 300, 가운데, 각진 모서리(0:947). */
.t6-notice-view__thumb {
    position: relative;
    width: 400px;
    max-width: 100%;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}

.t6-notice-view__thumb > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 이미지 bottom 599 → 제목 top 651 = 52px. */
.t6-notice-view__tit {
    margin: 52px 0 0;
    font: 500 24px/1.2 Pretendard, sans-serif;
    color: #000;
    text-align: center;
    word-break: break-word;
}

/* 제목 → 날짜 10px(목록과 같다), 날짜 아래 17px 뒤에 검은 선(0:945 @734). */
.t6-notice-view__date {
    margin: 10px 0 0;
    padding-bottom: 17px;
    border-bottom: 1px solid #000;
    font: 400 16px/27px Pretendard, sans-serif;
    color: #000;
    text-align: center;
}

/* 검은 선 → 본문 782 = 48px. 아래 검은 선은 0:946 @1480. */
.t6-notice-view__content {
    padding: 48px 0;
    border-bottom: 1px solid #000;
    font: 400 16px/27px Pretendard, sans-serif;
    color: #000;
    word-break: break-word;
}

/* 본문 이미지는 가운데 정렬한다. 관리자가 넣는 HTML 이라 정렬 지시가 없는
   경우가 대부분이고, 그대로 두면 왼쪽에 붙어 가운데 정렬인 제목·날짜와 어긋난다.
   `display:block` + 좌우 auto 마진이라 문단 안에 글과 섞인 인라인 이미지도
   줄에서 떨어져 나와 가운데로 간다 — CMS 본문에서는 그게 의도한 동작이다.
   `max-width:100%` 는 컨테이너(PC 1100 / MO 296)를 넘지 않게 하고,
   `height:auto` 가 width/height 속성이 박힌 이미지의 비율을 지킨다. */
.t6-notice-view__content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.t6-notice-view__files {
    padding-top: 20px;
    font: 400 16px/27px Pretendard, sans-serif;
}

.t6-notice-view__file > a {
    text-decoration: underline;
}

/* 검은 선 1480 → 버튼 1528 = 48px. */
.t6-notice-view__foot {
    padding-top: 48px;
    text-align: center;
}

/* 시안 0:953 — h40, px42 py10, 1px #8b8b8b, 16px/27, 각진 모서리. */
.t6-notice-view__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 10px 42px;
    border: 1px solid #8b8b8b;
    border-radius: 0;
    background: none;
    font: 400 16px/27px Pretendard, sans-serif;
    color: #000;
    cursor: pointer;
}

/* ── 태블릿 ───────────────────────────────────────────────────
   시안에 태블릿 프레임이 «없다». 목록의 300px 고정을 그대로 두면 이 구간에서
   썸네일만 상대적으로 커지므로 PC 비율(300/1100 = 27.27%)로 되돌린다.
   introduction.css 가 .intro-directions-body 에서 택한 것과 같은 처리다. */
@media (max-width: 1024px) {
    .t6-notice__thumb {
        flex: 0 0 27.27%;
        width: 27.27%;
        height: 0;
        padding-top: 20.45%; /* 27.27% x 0.75 — 부모 폭 기준이라 4:3 이 유지된다 */
    }

    .t6-notice__tit {
        font-size: 20px;
    }

    .t6-notice__date {
        margin-top: 8px;
    }
}

/* ── 모바일 (MO 시안 1:2929 / 1:3144 — 720 프레임 = @2x → 전부 ÷2) ──
   목록은 PC 와 «구조가 다르다». 가로 행이 아니라 세로 스택이고 글자가 가운데다.
     · 이미지 640 → 320px (전체폭), 텍스트단 590 → 295px
     · 행 padding 70 → 35px, 이미지-텍스트 간격 30 → 15px
     · 제목 36/52 → 18/26px, 날짜 28/47.25 → 14/23.6px

   좌우 여백이 텍스트(32.5px)와 이미지(20px)로 «다르다» — 시안이 텍스트단만
   안쪽으로 12.5px 더 넣었다. 밴드를 안쪽으로 잡고 썸네일만 음수 마진으로
   되밀어 320px 를 만든다(introduction.css 의 .intro-directions-map 과 같은 수법).
   ⚠️ padding 이 «18px» 이지 32px 이 아니다. 바깥 .minframe 이 이미 좌우 14px 를
      먹고 있어서(360 화면에서 밴드가 332px), 32 를 주면 텍스트단이 268px 로
      시안(295)보다 27px 좁아진다. 18 + 14 = 32 다. */
@media (max-width: 720px) {
    .t6-notice-wrap {
        padding: 0 18px;
    }

    .t6-notice__title {
        padding: 56px 0 16px;
        font: 500 18px/26px Pretendard, sans-serif;
        text-align: center;
    }

    .t6-notice__link {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 35px 0;
    }

    .t6-notice__thumb {
        flex: 0 0 auto;
        width: auto;
        height: 0;
        /* 음수 마진으로 넓어진 뒤의 «자기 폭» 기준이 아니라 부모 폭 기준이라
           75% 가 정확히 4:3 이 되지 않는다. 320/296 만큼 키워 보정한다:
           0.75 x (320/296) = 81.08%. */
        padding-top: 81.08%;
        margin: 0 -12px;
    }

    .t6-notice__body {
        text-align: center;
    }

    .t6-notice__tit {
        font-size: 18px;
        line-height: 26px;
    }

    .t6-notice__date {
        margin-top: 8px;
        font-size: 14px;
        line-height: 23.6px;
    }

    /* 아래 검은 선 4227 → 숫자 4323 = 96@2x = 48px.
       간격은 시안 1:2977 그대로 70@2x = 35px 다. 시안은 «숫자 3개» 짜리라 한
       줄에 들어가지만 실제 데이터는 6쪽이 넘어 화살표(각 2.3rem)가 붙는다.
       35px 로 늘어놓으면 296px 폭에 물리적으로 안 들어가므로(≈321px) 간격을
       줄이지 «않고» 줄바꿈을 택한다. inline-block + margin 이면 접힐 때 정렬이
       흐트러지므로 flex 로 바꿔 가운데 정렬을 유지한다. */
    .t6-notice-wrap .pagination_wrap {
        padding-top: 48px;
    }

    .t6-notice-wrap .pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 35px;
        row-gap: 12px;
    }

    .t6-notice-wrap .pagination li {
        margin-right: 0;
    }

    .t6-notice-wrap .pagination li a {
        font-size: 16px;
    }

    /* ── 상세 MO (1:3144) ──
       PC 와 달리 페이지 제목이 «보인다»(1:3166 — 18px/26 가운데 + 검은 밑줄). */
    .t6-notice__title--view {
        display: block;
        border-bottom: 1px solid #000;
    }

    /* 본문 블록 py 64 → 32px. 대표 이미지는 전체폭 320x240 이라 목록 썸네일과
       같은 음수 마진·비율을 쓴다. */
    .t6-notice-view {
        padding-top: 32px;
    }

    /* ⚠️ max-width 를 풀어야 한다. PC 규칙의 `max-width: 100%` 가 남아 있으면
       음수 마진으로 넓힌 320px 가 «부모 폭 296px» 로 도로 잘린다. */
    .t6-notice-view__thumb {
        width: auto;
        max-width: none;
        height: 0;
        padding-top: 81.08%;
        margin: 0 -12px;
    }

    /* 이미지 → 제목 30@2x = 15px, 제목 → 날짜 16@2x = 8px. */
    .t6-notice-view__tit {
        margin-top: 15px;
        font-size: 18px;
        line-height: 26px;
    }

    .t6-notice-view__date {
        margin-top: 8px;
        padding-bottom: 32px;
        font-size: 14px;
        line-height: 23.6px;
    }

    /* 본문 26/47 → 13/23.5. PC(16px)보다 작다 — 시안이 그렇다. */
    .t6-notice-view__content {
        padding: 32px 0;
        font-size: 13px;
        line-height: 23.5px;
    }

    /* 검은 선 2540 → 버튼 2608 = 68@2x = 34px. 버튼 300x83 → 150x41.5. */
    .t6-notice-view__foot {
        padding-top: 34px;
    }

    .t6-notice-view__back {
        width: 150px;
        height: 41.5px;
        padding: 10px 0;
        font-size: 14px;
    }
}