@charset "UTF-8";
/* =========================================================
   메인 팝업 — 전체화면형 (.pop-hero)   [board/popup.js · POPUP_TYPE 03]
   ---------------------------------------------------------
   딤 위에 여러 장을 가로로 펼쳐 놓고 자동으로 넘기는 '차단형' 팝업.
   같은 팝업 데이터를 쓰는 01 슬라이드형 / 02 단독형(좌상단 비차단, board-renewal.css 9번 블록)과
   레이아웃 규칙이 섞이지 않도록, 이 파일은 .pop-rn-set.is-hero 아래에서만 동작한다.

   [구조]  .pop-rn-set.is-hero            딤 + 가운데 정렬 (화면 전체)
             └ .pop-rn-list               폭 상한(--pop-hero-w)을 쥔 단
                 └ .pop-hero              닫기(X) + 무대 + 조작부
                     ├ .pop-hero-x        오른쪽 위 닫기
                     ├ .pop-hero-stage    사진 묶음 (슬릭) · 화살표는 좌우 바깥
                     │   └ .pop-hero-track > .pop-hero-cell > .pop-hero-img > img
                     └ .pop-hero-foot     [인디케이터 + 재생/멈춤] ↔ [오늘 하루 열지 않기]

   ★ 사진은 3:4 고정(object-fit: cover) — 가로로 나란히 놓는 방식이라 장마다 높이가 다르면
     아래 선이 어긋난다. 그래서 01·02 와 달리 원본 비율을 따르지 않는다.
     ★ 관리자 권장 이미지 규격: 600×800 (3:4). 다른 비율은 가운데를 기준으로 잘린다.

   ★ 몇 장을 한 화면에 보이는지(--pop-hero-cols)는 CSS 와 popup.js(slick responsive)가
     같은 분기점(1280 / 768)을 쓴다. 한쪽만 고치면 폭 계산과 실제 장수가 어긋나므로 반드시 같이 고칠 것.

   🎨 커스터마이즈는 아래 토큰 블록만 — 폭(--pop-hero-max), 간격(--pop-hero-gap),
      딤 농도(--pop-hero-dim), 전환 간격은 popup.js 의 HERO_SPEED(→ --pop-hero-speed).
   ========================================================= */

/* 배경 스크롤 잠금 — 차단형이라 뒤 페이지가 같이 밀리면 안 된다 (popup.js 가 붙였다 뗀다) */
html.pop-hero-open {overflow: hidden;}

/* ----- 딤 + 가운데 정렬 -----
   .pop-rn-set 의 기본값(좌상단 고정 · 클릭 통과)을 전부 덮는다. 이 모드는 반대로
   화면을 덮고 클릭을 받아야 한다. */
.pop-rn-set.is-hero {
	/* 한 화면에 보이는 장수 — popup.js 의 slick responsive 와 같은 값 */
	--pop-hero-cols: 3;
	--pop-hero-max: 1160px;          /* 사진 묶음 최대 폭 */
	--pop-hero-gap: 10px;            /* 사진 사이 간격 */
	--pop-hero-gutter: 80px;         /* 화살표가 놓일 좌우 여백 */
	--pop-hero-x-h: 56px;            /* 사진 위 닫기(X) 영역 높이 */
	--pop-hero-foot-h: 62px;         /* 사진 아래 조작부 높이(여백 포함) */
	--pop-hero-dim: rgba(0, 0, 0, .74);
	--pop-hero-speed: 5000ms;        /* popup.js 가 실제 값으로 덮는다 (인디케이터 진행바 길이) */

	position: fixed; inset: 0; top: 0; left: 0;
	width: 100%; max-width: none; max-height: none;
	z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px var(--pop-hero-gutter);
	background: var(--pop-hero-dim);
	pointer-events: auto;            /* 비차단형(01·02)의 클릭 통과를 되돌린다 */
	animation: popHeroDim .3s ease both;
}

/* 단 — 가로는 화면·최대폭, 세로는 '사진 높이가 화면을 넘지 않는 폭'으로 묶는다.
   3:4 사진 N장이면 한 장 폭 w = (W − 간격) / N, 높이 h = w × 4/3 이므로
   h 를 화면에 맞추려면 W ≤ (쓸 수 있는 높이 × 0.75 × N) + 간격 × (N−1) 이면 된다.
   (JS 로 재지 않고 CSS 만으로 잡아 둔다 — 창 크기·확대/축소에 즉시 따라간다) */
.pop-rn-set.is-hero .pop-rn-list {
	display: block; width: 100%;
	max-width: min(var(--pop-hero-max),
		calc((100vh - var(--pop-hero-x-h) - var(--pop-hero-foot-h) - 40px) * 0.75 * var(--pop-hero-cols)
			+ var(--pop-hero-gap) * (var(--pop-hero-cols) - 1)));
}

/* ----- 팝업 본체 ----- */
.pop-hero {position: relative; width: 100%; padding-top: var(--pop-hero-x-h);
	animation: popHeroIn .4s cubic-bezier(.22, 1, .36, 1) backwards;}

/* ----- 닫기(X) — 사진 묶음 오른쪽 위 ----- */
.pop-hero-x {position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%; background: #fff; cursor: pointer; transition: transform .2s ease;}
.pop-hero-x:hover {transform: rotate(90deg);}
.pop-hero-x::before, .pop-hero-x::after {content: ''; position: absolute; top: 50%; left: 50%;
	width: 15px; height: 1.5px; margin: -1px 0 0 -7.5px; background: #1a1a1a;}
.pop-hero-x::before {transform: rotate(45deg);}
.pop-hero-x::after {transform: rotate(-45deg);}

/* ----- 무대(사진 묶음) -----
   간격은 슬라이드 좌우 margin 으로 주고 .slick-list 를 같은 값만큼 당겨, 양 끝이 단 폭에 정확히 맞게 한다
   (메인 콘텐츠 슬라이드 .mainc-slide 와 같은 방식) */
.pop-hero-stage {position: relative;}
.pop-hero-track .slick-slide {margin: 0 calc(var(--pop-hero-gap) / 2);}
.pop-hero-track .slick-list {margin: 0 calc(var(--pop-hero-gap) / -2);}
/* 슬릭 초기화 전(마크업만 있는 순간) 사진이 세로로 쌓여 화면을 뒤덮지 않게 가려 둔다 */
.pop-hero-track:not(.slick-initialized) .pop-hero-cell:not(:first-child) {display: none;}

.pop-hero-img {position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #111;}
@supports not (aspect-ratio: 3 / 4) {.pop-hero-img {height: 0; padding-top: 133.33%;}}
.pop-hero-img img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;}
.pop-hero-img img.btnImgLink {cursor: pointer;}
.pop-hero-img img.btnImgLink:hover {transform: scale(1.04);}

/* ----- 좌우 화살표 — 사진 바깥(딤 위)에 얇은 꺾쇠만 ----- */
.pop-hero-arw {position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; opacity: .8; transition: opacity .2s ease;}
.pop-hero-arw:hover {opacity: 1;}
.pop-hero-arw::before {content: ''; width: 13px; height: 13px;
	border: solid #fff; border-width: 1.5px 1.5px 0 0;}
.pop-hero-arw.prev {right: 100%;}
.pop-hero-arw.prev::before {transform: rotate(-135deg); margin-left: 4px;}
.pop-hero-arw.next {left: 100%;}
.pop-hero-arw.next::before {transform: rotate(45deg); margin-right: 4px;}
/* 슬릭이 끝에서 비활성으로 두는 경우(순환을 끄면) 대비 — 자리는 지키고 흐리게만 */
.pop-hero-arw.slick-disabled {opacity: .3; cursor: default;}

/* ----- 조작부 ----- */
.pop-hero-foot {display: flex; align-items: center; justify-content: space-between; gap: 16px;
	height: var(--pop-hero-foot-h); padding-top: 20px;}
.pop-hero-ctrl {display: flex; align-items: center; gap: 16px; min-height: 22px;}

/* 인디케이터 — 현재 장이 진행바로 차오른다. 길이는 전환 간격(--pop-hero-speed)과 같다.
   멈춤 상태에서는 진행도 같이 멈춘다(자동 전환과 눈에 보이는 진행이 어긋나지 않게). */
.pop-hero-dots .slick-dots {display: flex; align-items: center; gap: 8px; margin: 0; padding: 0;
	list-style: none;}
.pop-hero-dots .slick-dots li {line-height: 0;}
.pop-hero-dots .slick-dots li button {position: relative; overflow: hidden;
	width: 10px; height: 3px; padding: 0; border: 0; border-radius: 2px;
	background: rgba(255, 255, 255, .35); color: transparent; font-size: 0; cursor: pointer;
	transition: width .3s ease, background .3s ease;}
.pop-hero-dots .slick-dots li button:hover {background: rgba(255, 255, 255, .6);}
.pop-hero-dots .slick-dots li.slick-active button {width: 34px; background: rgba(255, 255, 255, .35);}
.pop-hero-dots .slick-dots li.slick-active button::after {content: ''; position: absolute; inset: 0;
	background: #fff; transform-origin: left center;
	animation: popHeroBar var(--pop-hero-speed) linear both;}
.pop-hero.is-paused .slick-dots li.slick-active button::after {animation-play-state: paused;}

/* 멈춤/재생 — 기본은 '멈춤(❚❚)', 멈춘 뒤에는 '재생(▶)' 으로 바뀐다 */
.pop-hero-play {position: relative; width: 22px; height: 22px; padding: 0; border: 0;
	background: none; cursor: pointer; opacity: .85; transition: opacity .2s ease;}
.pop-hero-play:hover {opacity: 1;}
.pop-hero-play::before, .pop-hero-play::after {content: ''; position: absolute; top: 50%;
	width: 3px; height: 13px; margin-top: -6.5px; background: #fff; transition: all .15s ease;}
.pop-hero-play::before {left: 6px;}
.pop-hero-play::after {right: 6px;}
/* 재생 삼각형 — 왼쪽 막대를 삼각형으로 키우고 오른쪽 막대는 감춘다(요소를 더 만들지 않는다) */
.pop-hero.is-paused .pop-hero-play::before {left: 7px; width: 0; height: 0; margin-top: -6px;
	background: none; border: solid transparent; border-width: 6px 0 6px 10px; border-left-color: #fff;}
.pop-hero.is-paused .pop-hero-play::after {opacity: 0;}

/* 오늘 하루 열지 않기 — 딤 위에서 유일한 흰 면이라 눈이 먼저 간다(닫기 다음으로 많이 누르는 버튼) */
.pop-hero-hide {height: 42px; padding: 0 22px; border: 1px solid #fff; border-radius: 0;
	background: #fff; color: #1a1a1a; font-size: 13px; line-height: 1; letter-spacing: -.01em;
	cursor: pointer; transition: background .2s ease, color .2s ease;}
.pop-hero-hide:hover {background: transparent; color: #fff;}

/* 포커스 표시 — 키보드로 조작할 때만 보이게(마우스 클릭엔 뜨지 않는다) */
.pop-hero :focus {outline: none;}
.pop-hero :focus-visible {outline: 2px solid #fff; outline-offset: 3px;}

@keyframes popHeroDim {from {opacity: 0;} to {opacity: 1;}}
@keyframes popHeroIn {from {opacity: 0; transform: translateY(18px);} to {opacity: 1; transform: none;}}
@keyframes popHeroBar {from {transform: scaleX(0);} to {transform: scaleX(1);}}

/* 움직임을 줄여 달라고 한 이용자 — 등장·진행바 애니메이션을 끈다(자동 전환 자체는 멈춤 버튼으로) */
@media (prefers-reduced-motion: reduce) {
	.pop-rn-set.is-hero, .pop-hero, .pop-hero-dots .slick-dots li.slick-active button::after {
		animation: none;}
	.pop-hero-dots .slick-dots li.slick-active button {background: #fff;}
	.pop-hero-img img, .pop-hero-x {transition: none;}
}

/* ===================== 반응형 =====================
   장수(--pop-hero-cols)는 popup.js 의 slick responsive 와 같은 분기점을 쓴다. */
@media screen and (max-width: 1280px) {
	.pop-rn-set.is-hero {--pop-hero-cols: 2; --pop-hero-max: 760px; --pop-hero-gutter: 64px;}
}
@media screen and (max-width: 768px) {
	/* 1장 — 화살표를 밖에 둘 자리가 없으므로 사진 위로 올린다(반투명 원) */
	.pop-rn-set.is-hero {--pop-hero-cols: 1; --pop-hero-max: 400px; --pop-hero-gutter: 20px;
		--pop-hero-x-h: 48px; --pop-hero-foot-h: 58px;}
	.pop-hero-x {width: 36px; height: 36px;}
	.pop-hero-arw {width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .45);}
	.pop-hero-arw.prev {right: auto; left: 10px;}
	.pop-hero-arw.next {left: auto; right: 10px;}
	.pop-hero-hide {height: 38px; padding: 0 16px; font-size: 12px;}
	.pop-hero-foot {padding-top: 16px; gap: 10px;}
	.pop-hero-ctrl {gap: 12px;}
}
@media screen and (max-width: 480px) {
	/* 폭 상한을 사실상 없앤다 — min() 안에 들어가는 값이라 none 이 아니라 100% 를 쓴다 */
	.pop-rn-set.is-hero {--pop-hero-gutter: 16px; --pop-hero-max: 100%;}
	.pop-hero-dots .slick-dots li.slick-active button {width: 26px;}
}