/* ── 공통 레이어 팝업(notice-layers) ───────────────────────
 * 모든 사이트가 공유하는 공지/이벤트 레이어 팝업 스타일.
 * 마크업 : global/include/notice-layers.html
 * 제어   : global/js/common/notice-layers.js
 *
 * ※ CSS 중첩(nesting) 없이 평탄화한 표준 CSS 다.
 *    (구형 브라우저에서도 동작하도록. 운영 서버 배포본과 동일한 형태)
 * ※ 변수(--main-color / --padding / --top-h)는 사이트 common.css 값을
 *    우선 사용하고, 없을 때를 대비해 fallback 기본값을 둔다.
 * ──────────────────────────────────────────────────────── */

/* 팝업이 떠 있는 동안 본문 스크롤 잠금 */
body:has(.notice-layers.on) {
  overflow: hidden;
}
/* 닫혀서 display:none 이 된 경우엔 스크롤 복구 */
body:has(.notice-layers.on):has(.notice-layers.on[style='display: none;']) {
  overflow-y: auto;
}
/* 서브(.images) 영역 팝업일 땐 본문 스크롤 유지 */
body:has(.images .notice-layers.on) {
  overflow-y: auto;
}

/* 팝업 컨테이너(전체 화면 오버레이) */
.notice-layers {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-content: center;
  z-index: 200; /* 사이트 GNB(z-index:100 등)보다 위에 떠서 화면 전체를 덮는다 */
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: 0s;
}
.notice-layers.on {
  pointer-events: all;
  opacity: 1;
}
.notice-layers.on + .visual .swiper-slide::before {
  background-color: rgba(0, 0, 0, 0.2);
}

/* 컴포넌트 내부 링크 기본 리셋(밑줄/파란색 제거).
   사이트 공통 CSS의 a 리셋 여부와 무관하게 항상 깨끗하게 보이도록 자체 처리. */
.notice-layers a {
  text-decoration: none;
  color: inherit;
}

/* 상단 헤더 : 사이트 로고 + 그룹(캠핑장) 이름 (팝업 격자 위에 표시) */
.notice-layers .notice-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
}
.notice-layers .notice-header .logo-img {
  height: 28px;
  width: auto;
}
.notice-layers .notice-header .org-name {
  font-size: 1.15em;
  font-weight: bold;
}
@media (max-width: 812px) {
  .notice-layers .notice-header .logo-img {
    height: 22px;
  }
  .notice-layers .notice-header .org-name {
    font-size: 1em;
  }
}

/* 하단 전체 닫기 버튼 묶음 */
.notice-layers > .closes {
  margin-top: 10px;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.notice-layers > .closes a {
  display: flex;
  gap: 4px;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 10em;
  padding: 12px 20px;
  font-size: 0.9em;
}
.notice-layers > .closes a:hover {
  background-color: #036eb8;
  color: #fff;
}

/* 팝업 이미지 격자 */
.notice-layers .notice-layer {
  --gap: 12px;
  --cell: 3; /* 기본: 팝업 여러 장이면 가로 3칸으로 꽉 채워 배치 (넘치면 다음 줄로) */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
  box-sizing: border-box;
  transition: 0.2s;
  flex-grow: 1;
  width: 100%; /* 컨테이너가 align-items:center 라 명시하지 않으면 축소되어 li 의 % 너비가 깨진다 */
  padding: var(--padding, 24px) var(--padding, 24px) 10px var(--padding, 24px);
  overflow-y: auto;
  align-content: flex-start;
}
/* 팝업 내부 스크롤바를 얇고 깔끔하게 (팝업 영역에만 적용 — 사이트 전체 스크롤바는 그대로).
   오버레이 배경이 어두워서 thumb 는 흰색 반투명으로 (이천 예시처럼 은은하게). */
.notice-layers .notice-layer::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.notice-layers .notice-layer::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}
.notice-layers .notice-layer::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.4);
}
.notice-layers .notice-layer::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
.notice-layers .notice-layer::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
/* 팝업 개수에 따라 칸 수 자동 조절.
   기본은 3칸(위 --cell:3). 1~2장일 때만 3칸으로 나누면 작아지므로 칸 수를 줄인다.
   3장 이상은 모두 3칸으로 한 줄을 꽉 채우고, 넘치면 아랫줄로 넘어간다. */
.notice-layers .notice-layer:not(:has(li:nth-child(2))) {
  --cell: 1; /* 1장: 한 칸(가운데, li max-width 로 모달 크기 제한) */
}
.notice-layers .notice-layer:has(li:nth-child(2)):not(:has(li:nth-child(3))) {
  --cell: 2; /* 2장: 2칸 */
}
.notice-layers .notice-layer li {
  /* aspect-ratio(정사각형) 제거: 세로/가로 포스터를 원본 비율 그대로 보여준다.
     높이는 이미지에 맞춰 자동(fit-content)이라 잘리지 않는다. */
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transform-origin: left top;
  flex-grow: 0;
  flex-shrink: 0;
  width: calc((100% / var(--cell)) - var(--gap) + (var(--gap) / var(--cell)));
  /* 이미지가 과도하게 커지지 않도록 상한. 팝업이 1~2장이면 칸 폭이 커지는데
     이 상한 덕에 한 장짜리도 모달처럼 알맞은 크기(≈460px)로 보인다. */
  max-width: 460px;
  height: fit-content;
}
.notice-layers .notice-layer li img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.notice-layers .notice-layer li .closes {
  display: flex;
  position: absolute;
  width: 100%;
  justify-content: center;
  font-size: 0.7em;
  gap: 5px;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.notice-layers .notice-layer li .closes a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px;
  font-weight: bold;
  color: #fff;
}
.notice-layers .notice-layer li.light .closes a {
  color: #000;
  box-shadow: none;
}

/* 오버레이 팝업 가운데 정렬 (body 에 .main 이 없어도 항상 적용 — 컴포넌트 자체 처리).
   .images(가로 스크롤 인라인) 변형만 아래에서 좌측 정렬로 되돌린다. */
.notice-layers,
.notice-layers.filled {
  padding-top: var(--top-h, 0px);
  padding-bottom: var(--top-h, 0px);
}
.notice-layers .notice-layer,
.notice-layers.filled .notice-layer {
  align-items: center;
  justify-content: center;
  height: auto;
  flex-grow: 0;
  max-height: 100%;
  width: 100%;
  max-width: 1200px; /* 초광폭 화면에서 팝업이 과하게 커지지 않도록 제한 */
}

/* 꽉 채우기(.filled) : 2칸 격자 */
.notice-layers.filled {
  position: fixed;
}
.notice-layers.filled .notice-layer {
  --cell: 2;
  padding: 10px;
  gap: 10px;
  width: 100%;
}
.notice-layers.filled .notice-layer li {
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transform-origin: left top;
  flex-shrink: 0;
  width: calc((100% / var(--cell)) - var(--gap) + (var(--gap) / var(--cell)));
  max-width: none; /* 꽉 채우기 모드는 크게 채우므로 기본 li 상한(460px)을 해제 */
  height: auto;
}
.notice-layers.filled .notice-layer li img {
  width: 100%;
  height: 100%;
}
.notice-layers.filled .notice-layer li .closes {
  display: flex;
  position: absolute;
  width: 100%;
  justify-content: center;
  font-size: 0.7em;
  gap: 5px;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.notice-layers.filled .notice-layer li .closes a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px;
  font-weight: bold;
  color: #fff;
}
.notice-layers.filled .notice-layer li.light .closes a {
  color: #000;
  box-shadow: none;
}

/* 서브(.images) 영역 안에 들어갈 때 : 가로 스크롤 한 줄 */
.images .notice-layers {
  padding: 0;
  z-index: 2;
  position: absolute;
}
.images .notice-layers .notice-layer {
  --cell: 5;
  width: 100%;
  max-width: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start; /* 가로 스크롤 한 줄은 좌측부터 채운다(가운데 정렬 시 넘칠 때 앞부분이 잘림) */
}
.images .notice-layers .notice-layer > li {
  height: 100%;
  width: auto;
}
.images .notice-layers > .closes {
  font-size: 0.85em;
}

/* 반응형(모바일) */
@media (max-width: 812px) {
  .notice-layers {
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  .notice-layers > .closes {
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    font-size: 1em;
    font-weight: bold;
    position: static;
    width: 100%;
    margin: 10px 0;
  }
  .sub .notice-layers > .closes {
    margin-top: 0;
    margin-bottom: 10px;
  }
  .notice-layers > .closes a {
    font-size: 0.8em;
  }
  /* 모바일에서는 팝업 개수와 무관하게 항상 1칸(세로로 한 장씩) */
  .notice-layers .notice-layer {
    --cell: 1;
    padding: 10px;
    gap: 10px;
    width: 100%;
    align-content: flex-start;
  }
  .notice-layers .notice-layer li {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  .notice-layers .notice-layer li .closes a {
    color: #fff;
  }
  .dimed .notice-layers {
    display: none;
  }
}