/*
 * 기존 사이트 PHP 파일 안에 <style> 로 박혀 있던 스타일 (header.php, popup_new.php).
 * sub_top.php 의 스타일은 sub-top.css — 분야 CSS 보다도 뒤에 와야 해서 서브 상단과 함께 읽는다.
 * 기존에는 <body> 안에 있어서 <head> 의 CSS 보다 뒤에 적용됐다 → layout 에서 맨 마지막에 읽는다.
 */

/* layout/header.php */
.none_768 {
  display: block;
}
.block_768 {
  display: none;
}
@media screen and (max-width: 768px) {
  .none_768 {
    display: none;
  }
  .block_768 {
    display: block;
  }
}

/* 전체메뉴 하위 항목: 기존 div(onclick) → 크롤러가 따라갈 수 있게 a 로 바꿔서 블록 지정 */
.ham.new a.sub_list {
  display: block;
}

/*
 * popup_new.php (.popup_group_1)
 * 기존에는 .pc / .mb 규칙이 전역이라 메인 전체에 걸렸지만, 메인 본문(.re)은
 * .re .pc 가 이겨서 실제로 영향받는 건 팝업뿐이었다. 그래서 팝업 안으로 한정한다.
 */
.popup_group_1 {
  position: fixed;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999999;
  width: 1190px;
  color: #212121;
}
.popup_group_1::before {
  position: absolute;
  content: "";
  width: 200vw;
  height: 200vh;
  background-color: #00000050;
  z-index: -1;
  /* 기존은 top: -50% (팝업 높이의 절반만큼 위) 였다. 팝업 이미지가 뜨기 전에는 높이가 거의 없어
     가림막이 화면 위쪽을 못 가리다가, 이미지가 뜨면 위로 움직였다(화면 흔들림 CLS 0.35).
     팝업 높이와 무관하게 늘 화면 위까지 덮도록 화면 높이만큼 올린다. 다 뜬 뒤의 모습은 같다. */
  top: -100vh;
  left: -50%;
}
.group_1_remote_gr {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.group_1_remote_list {
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border-left: 1px solid #d9d9d9;
  color: #212121;
}
.group_1_remote_list.on {
  color: #f38200;
  font-weight: 600;
}
.group_1_remote_list:first-child {
  border-left: none;
}
.group_1_bottom_gr {
  width: 100%;
  background-color: rgb(0, 0, 0, 0.8);
  color: #fff;
  height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close_btn {
  cursor: pointer;
  padding: 0 15px;
  font-size: 14px;
}
.group_1_bottom_gr button {
  cursor: pointer;
  color: #fff;
  background-color: transparent;
  font-size: 14px;
  padding: 0 15px;
  border: none;
}
.popup_group_1 .mb {
  display: none;
}
@media screen and (max-width: 1320px) {
  .popup_group_1 {
    width: 90%;
    top: 150px;
  }
  .popup_group_1 .pc {
    display: none;
  }
  .popup_group_1 .mb {
    display: block;
  }
  .group_1_remote_gr {
    position: absolute;
    bottom: 45px;
    height: 2px;
    z-index: 99;
    display: flex;
    gap: 5px;
    justify-content: center;
  }
  .group_1_remote_list {
    height: 100%;
    width: 15px;
    opacity: 0.6;
  }
  .group_1_remote_list.on {
    opacity: 1;
  }
}

/* 커뮤니티 카드: 기존 li(onclick) → 크롤러가 따라갈 수 있게 a 로 감쌌다. 모양은 그대로 */
.community1 .sec1_cont2 li > a {
  display: block;
}

/*
 * 공지·이벤트·블로그 썸네일 — 정사각형 칸에 이미지 전체를 넣는다 (2026-10-04 결정, 기존과 다름).
 * 기존은 이미지 비율이 제각각이라 카드 높이·제목 줄이 들쭉날쭉했다.
 * 포스터형 이미지라 자르지 않고(contain) 남는 곳은 옅은 회색. 관리자 썸네일 권장 규격도 1:1.
 */
.community1 .sec1_cont2 li .thumb_square {
  aspect-ratio: 1 / 1;
  background-color: #f4f4f4;
  overflow: hidden;
}
.community1 .sec1_cont2 li .thumb_square img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}