@charset "utf-8";
/* notice — 공지사항 목록·상세.

   내용 부분만 이 파일에서 다시 잡는다.
   읽는 순서: theme.css -> base-*.css -> skin-notice-*.css -> notice.css (맨 마지막) */

/* 아래 여백은 #contents 한 곳에서 준다(theme.js 가 skin-*.css 뒤에 붙이는 규칙). */
.notice .titleArea{ padding:var(--sp-page-top) 0 var(--sp-page-gap); text-align:center; }
.notice .titleArea .en_main_title_L{
  font-size:var(--fs-page); font-weight:700; letter-spacing:-0.1rem; color:var(--btnBlack); line-height:1;
}
.notice .titleArea .sub_tit{
  margin-top:1.8rem; font-size:var(--fs-body); letter-spacing:.06em; color:var(--subColor); font-weight:500;
}
.notice_inner{ max-width:var(--read-max); margin:0 auto; padding:0 var(--page-pad); }

/* ---------- 목록 ---------- */
.notice .total{ font-size:var(--fs-sm); color:var(--muted); margin-bottom:1.6rem; }
.notice .total strong{ color:var(--subColor); font-weight:700; }
.notice_table{ width:100%; border-collapse:collapse; border-top:2px solid var(--btnBlack); }
.notice_table caption{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.notice_table th{
  padding:1.8rem 1rem; font-size:var(--fs-sm); font-weight:700; color:var(--btnBlack);
  background:var(--gray1); border-bottom:1px solid var(--border);
}
.notice_table td{
  padding:2.2rem 1rem; font-size:1.5rem; text-align:center;
  border-bottom:1px solid var(--border); color:var(--fontColor);
}
.notice_table td.no,
.notice_table td.date{ color:var(--muted); font-size:var(--fs-sm); }
.notice_table td.tit{ text-align:left; padding-left:2rem; }
.notice_table td.tit a{ color:var(--btnBlack); transition:color .3s; }
.notice_table td.tit a:hover{ color:var(--subColor); text-decoration:underline; }
.notice_table td.tit .tag{ color:var(--subColor); font-weight:700; margin-right:.6rem; }

/* ---------- 상세 ---------- */
.notice .view_head{ border-top:2px solid var(--btnBlack); padding:4rem 0 3rem; border-bottom:1px solid var(--border); }
.notice .view_head .tag{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.06em; color:var(--subColor); margin-bottom:1.2rem; }
.notice .view_head .tit{
  font-size:var(--fs-lead); font-weight:700; letter-spacing:-0.06rem; color:var(--btnBlack); line-height:1.4;
}
.notice .view_head .meta{ margin-top:1.6rem; font-size:var(--fs-xs); color:var(--muted); }
.notice .view_body{ padding:5rem 0 7rem; border-bottom:1px solid var(--border); }
.notice .view_body p{ font-size:var(--fs-body); line-height:1.95; color:var(--fontProDesc); }
.notice .view_body p + p{ margin-top:2.2rem; }
.notice .view_nav{ margin-top:4rem; text-align:center; }
.notice .btn_list{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18rem; height:5.4rem; border-radius:.3rem;
  border:1px solid var(--subColor); color:var(--subColor);
  font-size:1.5rem; font-weight:700; transition:background-color .3s, color .3s;
}
.notice .btn_list:hover{ background:var(--subColor); color:var(--white); }

/* 게시판 페이지는 body 와 .sub_page 에 각각 22rem 의 위 여백이 걸려 있다.
   두 겹이 겹쳐 화면이 600px 가까이 비어 보인다. 둘 다 없앤다. */
body.dl-page.notice{ padding-top:0; }
.sub_page.notice{ margin-top:0; padding-top:0; }

/* ==================== 휴대폰 ====================
   목록 표에서 번호·작성일은 좁은 화면에서 자리만 차지한다. 제목만 남긴다. */
@media (max-width:1023px){
  /* 위쪽 .sub_page.notice{margin-top:0} 이 헤더 아래로 내리는 여백까지 같이 지워서, */
  .sub_page.notice{ margin-top:7rem; }
  .notice .titleArea{ padding-top:5rem; padding-bottom:3.4rem; }
  .notice .titleArea .en_main_title_L{ font-size:var(--fs-page); }
  /* 좌우 여백은 .sub_page 가 한 번만 준다. */
  .notice_inner{ padding-left:0; padding-right:0; }

  /* 세 칸짜리 표를 그대로 두면 제목이 한두 글자씩 끊긴다.
     줄마다 한 덩어리로 세우고, 번호는 감추고 작성일은 제목 밑에 작게 붙인다. */
  .notice_table thead, .notice_table colgroup, .notice_table td.no{ display:none; }
  .notice_table, .notice_table tbody, .notice_table tr, .notice_table td{
    display:block; width:auto;
  }
  .notice_table tr{ padding:1.8rem 0; border-bottom:1px solid var(--border); }
  .notice_table td{ padding:0; border:0; text-align:left; }
  .notice_table td.tit{ padding-left:0; text-indent:0; }
  .notice_table td.tit a{ display:block; padding-left:0; word-break:keep-all; }
  /* opacity 로 흐리면 색을 아무리 맞춰도 대비가 반으로 준다. 색만으로 위계를 준다. */
  .notice_table td.date{ margin-top:.6rem; font-size:var(--fs-xs); color:var(--muted); opacity:1; }

  .notice .view_head{ padding:3rem 0 2.4rem; }
  .notice .view_body{ padding:3rem 0 4rem; }
  .notice .btn_list{ width:100%; min-width:0; }
}