/* [2026.08.18] 메인 레이어팝업(관리자 등록) — 마크업은 jsp/index/main.jsp, 동작은 js/layerPopup.js.

   ■ 이건 **모달이 아니라 레이어 팝업**이다
     딤(배경 가림) 없음 · 여러 개 동시 노출 · 배경 조작 가능 · 드래그 이동. 진입 시 뜨는 안내라 사용자를 막지 않는다.
     ⚠그래서 `.wrap-modal` 계열 클래스를 **쓰지 않는다.** 그 클래스를 붙이면 퍼블 JS(common.skin.js)가
       열기/닫기·포커스트랩·배경 스크롤락을 걸어버려 레이어 팝업의 성격이 깨진다.

   ■ 그런데 **생김새는 퍼블 모달에 맞춘다** (2026.08.18 사용자 요청)
     퍼블 4차에 '레이어 팝업' 전용 컴포넌트가 **없다**(팝업 계열 정본은 모달뿐. `.pop-*` 는 별도 창용 스킨이다).
     그래서 퍼블 모달(`common.css:1013~1019`)의 **시각 규격만 옮겨 온다** — 클래스명은 우리 것, 값은 퍼블 것.
       라운드 10px · 제목 굵기/크기 · 우상단 X(45도 두 줄, hover 180도 회전) · 본문 padding 20px
     ⚠퍼블 모달 CSS 를 직접 재사용할 수 없는 이유 : 전부 `.wrap-modal .modal-body` 하위로 스코프돼 있어
       그 조상 클래스 없이는 하나도 안 걸린다. 값을 옮겨 적는 수밖에 없다.
     ▶ 5차에서 모달 스킨이 바뀌면 여기도 같이 손봐야 한다(자동으로 따라가지 않는다).

   ■ 위치 (2026.08.18 사용자 결정)
     **헤더 아래**에서 시작해 여러 개면 **계단식**. AsIs 두 포털은 둘 다 좌상단(top:0~)이라 헤더를 덮는데,
     우리 헤더는 168px 로 더 높아 로고·GNB 가 통째로 가려진다. 실제 시작 위치와 계단 간격은 js 가 잡는다.

   ■ 동작·구성은 exthome 원본(index/main.jsp:24~48 · JS 486~521)을 따른다
     관리자가 등록한 폭/높이(px) · 다중 노출 · 팝업마다 '오늘 하루 그만보기' 를 따로 기억.
*/

.layer-popup-zone {
	position: fixed;
	top: 200px;			/* 대비값. 실제 값은 js 가 헤더 높이를 재서 덮어쓴다 */
	left: 20px;
	/* 🚨[2026.08.20 sdc2355] 값이 **헤더보다 낮아야 한다.** 종전 1000 → 50.
	   ▶ 증상(사용자 지적) : 메인에서 **스크롤을 맨 위까지 올린 상태**로 GNB 메뉴를 열면
	     펼쳐진 드롭다운이 레이어 팝업 **뒤에 가려진다.** 반대로 스크롤을 조금 내렸다 올린 상태에서는 멀쩡하다.
	   ▶ 원인 = 쌓임 맥락. GNB 는 `.header-body{position:relative;z-index:99}`(pub layout.css:126) 안에 갇혀
	     바깥에서 본 실효값이 **99** 다. 종전 1000 이면 팝업이 이긴다.
	     스크롤을 올려 스마트헤더가 뜨면 `#wrap-header.is-fixed{z-index:9000}`(:54)이 헤더 전체를 9000 으로 올리므로
	     그때만 GNB 가 이겼던 것 → **'스크롤 위치에 따라 달라 보이던' 이유.**
	   ▶ 왜 팝업을 낮추는 쪽으로 갔나 : 이 팝업은 **헤더 아래에서 시작하도록** 설계돼 있어(위 ■위치 항목)
	     헤더와 자리를 다툴 일이 없다. 반대로 헤더를 올리면 모바일 `.header-body`(슬라이드 메뉴, :464 z-index:9999)와
	     모달 override(`.header-body{z-index:0}`)까지 함께 봐야 해서 파장이 크다.
	   ▶ 50 을 고른 근거 : 아래보다 낮고(헤더 99 · 맨위로 버튼 99 · `.head-util .drop-menu` 100)
	     본문 콘텐츠(z-index 없음)보다는 높다. 메인 비주얼·카드에는 50 이상 z-index 가 없다(전수 확인).
	     모달(`.wrap-modal.is-current` 99999)·챗봇 버튼과의 관계도 종전과 같다.
	   ⚠팝업끼리의 앞뒤 순서는 이 값이 아니라 **`.layer-popup` 의 z-index(아래)** 와 js 가 정한다. 혼동 말 것. */
	z-index: 50;
}

/* ⭐크기 규칙 (2026.08.18 사용자 결정) : **최소치는 여기서 잡고, DB 값이 그보다 크면 DB 값을 쓴다.**
   ▶ 별도 계산이 필요 없다 — DB 값은 마크업의 인라인 `width` 로 들어오고, CSS `min-width` 는 그보다 우선한다.
     즉 `min-width:360px` + 인라인 `width:200px` → 360px 로 그려진다. 반대로 500px 면 500px 이 그대로 산다.
   ▶ 최소 폭 360px 의 근거 : 하단 버튼 2개('오늘 하루 그만보기' + '닫기')가 한 줄에 들어가는 폭이다.
     이보다 좁으면 버튼이 줄바꿈되면서 팝업이 오히려 세로로 길어진다.
   ▶ `width:500px` 는 **DB 값이 비었을 때의 기본값**이다(인라인이 있으면 그쪽이 이긴다).
   ▶ max-width 는 화면을 넘지 않게 하는 상한. PUP_WIDTH_SIZE 는 VARCHAR2(4) 라 9999 까지 들어올 수 있다. */
.layer-popup {
	display: none;					/* 기본 숨김. js 가 쿠키를 보고 .is-open 을 붙인다 */
	position: absolute;				/* 계단식 배치 — 좌표는 js 가 넣는다 */
	top: 0;
	left: 0;
	/* 🚨z-index 를 반드시 준다 — **값 자체보다 '쌓임 맥락을 만드는 것'이 목적**이다.
	   position 만 있고 z-index 가 없으면 이 박스는 쌓임 맥락을 만들지 않아, 안쪽의 양수 z-index 요소들이
	   박스를 뚫고 나와 **형제 팝업 위에 그려진다.**
	   실제로 겪은 증상(2026.08.18) : 뒤쪽 팝업의 X 버튼(z-index:10)과 버튼 글자(퍼블 `[class^='button'] i{z-index:1}`,
	   common.css:809)가 앞쪽 팝업 위로 튀어나왔다.
	   ▶ 값은 1 이면 충분하다. 팝업끼리는 같은 값이라 **DOM 순서상 뒤엣것이 위**로 온다(계단식과 방향이 맞다).
	   ▶ 클릭한 팝업을 맨 앞으로 올리는 건 js/layerPopup.js 가 이 값을 덮어써서 한다. */
	z-index: 1;
	width: 500px;
	min-width: 360px;
	max-width: calc(100vw - 40px);
	/* 🚨팝업 전체가 **화면 안에 반드시 들어오게** 상한을 둔다.
	   이게 없으면 내용이 길 때 팝업이 화면 아래로 뚫고 나가 **본문 끝과 버튼이 잘린다**(2026.08.18 좁은 화면에서 발생).
	   실제 여유 높이는 시작 위치(top)에 따라 달라지므로 js 가 `--popup-max-h` 로 넣어 준다. 아래 값은 대비값. */
	max-height: var(--popup-max-h, calc(100vh - 240px));
	overflow: hidden;				/* 라운드 모서리로 내용이 삐져나오지 않게 */
	border-radius: 10px;			/* = 퍼블 모달 .modal-body */
	/* ⭐[2026.08.19] '본문 위에 떠 있다' 는 느낌을 위해 **그림자를 2겹**으로 바꿨다.
	   ▶ 종전 `0 10px 34px rgba(20,40,80,.18)` 한 겹은 **멀리 퍼지기만 해서 가장자리가 흐렸다.**
	     특히 이 팝업들은 계단식으로 겹쳐 뜨는데, 뒤 팝업의 확산 그림자를 앞 팝업이 덮어 버려
	     서로 붙어 있는 한 덩어리처럼 보였다.
	   ▶ 근접 그림자(0 2px 6px)가 **가장자리를 또렷하게** 잡아 주고, 확산 그림자(0 16px 44px)가
	     띄운 높이를 표현한다. 겹쳐 있어도 각 팝업의 경계가 산다.
	   ▶ 딤(overlay)은 **일부러 넣지 않았다** — 메인 공지 팝업은 화면을 막지 않고 사용자가 메인을 보면서
	     하나씩 닫는 물건이다. 딤을 넣으면 모달이 되어 버리고, 여러 개가 계단식으로 뜨는 이 설계와 안 맞는다.
	   ▶ 색은 순수 검정이 아니라 남색기(20,40,80) — 퍼블 배경이 푸른 계열이라 검정 그림자는 탁해 보인다.
	   ▶ 맨 앞 `inset` 한 줄은 **머리카락 테두리**다. 흰 팝업이 밝은 배경 위에 올라갈 때 윤곽이 사라지는 걸 막는다.
	     ⚠`border` 로 하면 박스가 2px 커져 js 가 계산한 계단식 좌표와 어긋난다 → inset 그림자로 그린다.
	   ▶ 세기 조정 이력 : `0 10px 34px .18`(한 겹) → 2겹 `0 16px 44px .22` → **현재 `0 26px 64px .30`**
	     (2026.08.19 사용자 요청으로 두 번 올렸다). 더 띄우려면 **y-offset 을 먼저** 키울 것 —
	     blur 만 키우면 흐리기만 하고 '높이'가 안 읽힌다. 과하면 .30 → .22 로 되돌리면 된다.
	   🚨**이 주석 블록을 손댈 때 닫기기호(별표+슬래시)를 두 번 쓰지 말 것.** 2026.08.19 에 실제로 그렇게 만들어
	     아래 box-shadow 선언이 통째로 파서에 버려졌고(다음 세미콜론까지 skip) **팝업 경계가 전부 사라졌다.**
	     ⚠설명하려고 그 기호를 본문에 적는 것도 안 된다 — 거기서 주석이 닫힌다. 말로 풀어 쓸 것. */
	box-shadow:
		inset 0 0 0 1px rgba(20, 40, 80, .06),
		0 4px 10px rgba(20, 40, 80, .12),
		0 26px 64px rgba(20, 40, 80, .30);
	background: var(--bg-default, #fff);
}

/* ⭐열릴 때 **세로 flex** 로 만든다 — 시안 모달과 같은 구조(제목·버튼은 고정, 본문만 스크롤).
   `display:block` 이면 본문에 아무리 overflow:auto 를 줘도 **팝업이 화면을 넘어가 버려** 스크롤이 생기지 않는다. */
.layer-popup.is-open { display: flex; flex-direction: column; }

/* 제목 — 퍼블 모달 `.modal-tit` 규격.
   ⚠상단 padding 만 40px → 26px 로 줄였다. 모달은 화면 한가운데 큰 박스라 여백이 넉넉해야 하지만,
     레이어 팝업은 관리자가 지정한 작은 크기(예: 500×300)라 그대로 두면 제목만으로 절반을 먹는다.
   오른쪽 50px 는 X 버튼 자리다. 드래그 손잡이도 이 줄이다. */
.layer-popup-tit {
	display: block;
	position: relative;
	flex: 0 0 auto;					/* 제목은 줄어들지 않는다 */
	margin: 0;
	padding: 26px 50px 12px 20px;
	font-size: var(--clamp-fs-20-24, 20px);
	font-weight: 600;
	color: var(--text-default-strong);
	word-break: keep-all;
	cursor: move;
	/* 터치 드래그(js/layerPopup.js)용 — 이 줄에서 시작한 터치를 브라우저의 스크롤/확대 제스처로 가져가지 않게 한다.
	   ⚠좁은 화면에서는 아래 미디어쿼리가 `auto` 로 되돌린다(거기선 제목이 손잡이가 아니고, 영역 스크롤을 막으면 안 된다). */
	touch-action: none;
}

/* 본문 — 퍼블 모달 `.modal-cont` 규격(padding 20px + 자체 스크롤).
   ▶ ⚠DB 의 `PUP_HEIGHT_SIZE` 는 **본문 높이**로 해석한다(제목·버튼줄은 별도).
     exthome 은 바깥 박스에 걸었지만, 우리는 제목줄과 버튼줄이 추가돼 그대로 두면 내용이 절반으로 줄어든다.
     관리자가 '세로 300' 을 넣을 때 기대하는 건 **보이는 내용의 양**이라고 보고 본문에 건다.
   🚨[2026.08.18] 그 값은 `height` 가 아니라 **`max-height`(상한)** 으로 넣는다(마크업은 main.jsp).
     `height` 로 주면 내용이 짧은 팝업도 그 높이를 그대로 차지해 **본문과 버튼 사이가 휑하게 빈다**(실제로 겪음).
     상한이면 짧을 땐 내용에 맞게 줄고, 길 땐 그 높이에서 스크롤된다 — 관리자 의도('이 이상은 스크롤')와도 맞는다.
   ▶ 화면을 넘지 않게 하는 상한은 별도로 `.layer-popup` 쪽에 걸려 있다(js 가 팝업마다 실측해서 넣는다). */
.layer-popup-cont {
	/* 🚨`flex:1 1 auto` + `min-height:0` 이 **스크롤이 생기는 조건**이다.
	   flex 자식은 기본 `min-height:auto`(=내용 크기)라, 이걸 0 으로 풀어야 컨테이너 상한에 맞춰 줄어들고
	   그때 비로소 overflow 가 동작한다. 안 풀면 내용이 그대로 밀고 나가 팝업이 화면을 넘는다.
	   ▶ `flex-basis:auto`(= 내용 높이) 라서 **내용이 짧으면 그만큼만 차지한다.** `flex-grow:1` 이 있어도
	     팝업 자체의 높이가 auto 라 남는 공간이 없어 늘어나지 않는다 — 빈 공백이 생기지 않는 이유다. */
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 0 20px 20px;
	background: var(--bg-default);
}
.layer-popup-cont img { display: block; max-width: 100%; height: auto; }

/* ⭐[2026.08.18] 이미지형 팝업(`IMG_YN='Y'`) — 마크업에서 `.layer-popup-img` 가 붙는다(main.jsp).
   ▶ **본문 여백을 없앤다.** 이미지 팝업은 관리자가 '가로 820' 을 넣으면 그 폭으로 이미지가 꽉 차기를 기대하는데,
     좌우 20px 여백이 있으면 이미지가 780 으로 줄어 지정 폭과 어긋난다.
     `.layer-popup` 의 `overflow:hidden` + `border-radius:10px` 덕분에 이미지 모서리도 상자 모양대로 깎인다.
   ▶ 이미지가 지정 폭보다 **작을** 때는 가운데로 모은다(`margin:0 auto`). 늘리지는 않는다 —
     원본보다 키우면 흐려지고, 관리자가 올린 이미지를 임의로 확대하는 셈이 된다.
   ⚠HTML 형에는 이 규칙을 주면 안 된다 — 글이 상자 벽에 붙어 읽기 어려워진다. 그래서 클래스로 갈랐다.
   ▶ 세로는 **DB 값을 쓰지 않는다**(main.jsp 에서 이미지형이면 max-height 를 안 건다) — 이유는 그쪽 주석 참고.
     대신 화면을 넘는 큰 이미지만 js 의 팝업 상한이 받아 준다. 그때는 스크롤이 생기는 게 맞다.
   ⚠[2026.08.19] 여기도 주석이 위 줄에서 한 번 닫히고 두 줄이 밖에 남아 있었다 —
     파서가 다음 세미콜론까지 버려서 **바로 아래 `padding:0` 규칙이 통째로 죽어 있었다**(이미지형 여백이 안 없어짐). */
.layer-popup-img .layer-popup-cont { padding: 0; }
.layer-popup-img .layer-popup-cont img { margin: 0 auto; }

/* 🚨X 버튼이 이미지 위에 얹힌다 — 밝은 이미지 위에서는 흰 배경 가정의 X 가 **안 보인다.**
   (제목이 없는 이미지 팝업은 X 가 곧바로 이미지 위에 놓인다)
   ▶ 반투명 원판을 깔아 어떤 이미지 위에서도 형태가 남게 한다. 퍼블 모달엔 없는 처리지만,
     거기는 X 뒤가 항상 흰 여백이라 필요가 없었을 뿐이다. */
.layer-popup-img .layer-popup-x { border-radius: 50%; background: rgba(255, 255, 255, .78); }
.layer-popup-img .layer-popup-x:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .95); }

/* 우상단 X — 퍼블 모달의 닫기 버튼 모양을 그대로 옮겼다(45도 두 줄 + hover 시 180도 회전) */
.layer-popup-x {
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 0;
	text-indent: -9999px;
	border: 0;
	cursor: pointer;
	transition: all .3s;
	background: transparent;
	z-index: 10;
}
.layer-popup-x:before,
.layer-popup-x:after {
	content: '';
	display: block;
	position: absolute;
	top: calc(50% - 11px);
	left: calc(50% - 1px);
	width: 2px;
	height: 22px;
	transform: rotate(45deg);
	filter: var(--hover-inverse);
	background: var(--static-default);
}
.layer-popup-x:after { transform: rotate(-45deg); }
.layer-popup-x:is(:hover, :focus-visible) { transform: rotate(180deg); }

/* 하단 버튼 — 퍼블 버튼 클래스(button-frame01 / button-fill01)를 그대로 쓴다.
   ⚠'오늘 하루 그만보기' 는 퍼블 모달에 없는 요소라 배치만 우리가 정한다. */
.layer-popup-btns {
	display: flex;
	flex: 0 0 auto;					/* 버튼줄은 줄어들지 않는다 — 본문이 길어도 항상 보인다 */
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	/* [2026.08.18] 구분선 제거(사용자 요청). 본문과의 분리는 여백만으로 준다.
	   ⚠본문이 스크롤되는 상태에서는 글자가 버튼줄 바로 위까지 올라온다 — 선이 없으니 경계가 여백뿐이다.
	     그래서 위 패딩을 16px 로 유지한다(줄이면 스크롤 중에 글자와 버튼이 붙어 보인다). */
	padding: 16px 20px 20px;
	background: var(--bg-default);
}
.layer-popup-btns [class*='button'] { min-width: inherit; padding: 10px 18px; }

/* ⚠퍼블 전역 규칙 무력화 : `a[target='_blank']:not(:has(i))` 가 새 창 아이콘 자리로 padding-left:25px 를 넣는다
   (pub2026/css/layout.css:35~37). 팝업은 이미지 전체가 링크라 그 여백·아이콘이 그림을 밀어내고 겹친다.
   같은 문제를 메인 배너에서도 겪었다 — <i> 없이 target="_blank" 를 쓰는 이미지 링크는 어디서든 걸린다.
   새 창 안내는 <a title="새 창"> 로 유지하므로 접근성 정보는 사라지지 않는다. */
.layer-popup-cont a[target='_blank'] { display: block; padding-left: 0; }
.layer-popup-cont a[target='_blank']:after { content: none; }

/* 모달이 열려 있는 동안은 숨긴다 — 맨위로·채팅 버튼과 같은 이유(css/scrollTop.css · css/chatBtn.css).
   메인 팝업은 진입 시 뜨는 안내라, 사용자가 연 모달 위로 올라오면 안 된다. */
html:has(.wrap-modal.is-current) .layer-popup-zone { display: none; }

@media (max-width: 780px) {
	/* ⭐[2026.08.18] 좁은 화면 배치 = **카드 뭉치**(사용자 결정).
	   뒤쪽 팝업은 **제목만** 드러나게 겹쳐 두고, **맨 앞 팝업만 온전히** 보인다. 제목을 탭하면 그 팝업이 앞으로 나온다.
	   ▶ 왜 이 방식인가 (앞서 시도한 두 가지의 문제) :
	       ① 계단식(가로+세로) → 폭이 좁아 뒤쪽 팝업의 **하단 버튼이 통째로 가려졌다.**
	       ② 세로 나열(영역 스크롤) → 팝업마다 내부 스크롤이 남아 **스크롤이 이중**이 됐고, 5개면 영역이 아주 길어졌다.
	     카드 뭉치는 세로 공간을 '제목 높이 × 개수' 만 쓰고, 앞으로 꺼낸 팝업은 버튼까지 다 보인다.
	   ▶ **가로 어긋남은 주지 않는다**(js 의 STEP_X=0) — 폭이 좁아 옆으로 밀면 화면을 벗어난다.
	   ▶ 세로 어긋남은 js 가 **앞 팝업의 제목줄 높이**를 실측해서 준다(제목이 몇 줄이든 항상 드러난다). */
	.layer-popup-zone { left: 10px; right: 10px; }
	.layer-popup {
		/* ⚠`!important` 가 필요하다 — 관리자가 지정한 폭이 **인라인 style** 로 들어오기 때문이다.
		   좁은 화면에서는 그 값을 무시하고 화면 폭(영역 좌우 10px 여백)에 맞춘다. */
		width: auto !important;
		right: 0;			/* left:0 과 함께 영역 폭을 꽉 채운다 */
		min-width: 0;
		max-width: none;
	}
	/* 좁은 화면에서는 드래그를 걸지 않는다(js) → 손잡이 표시·touch-action 을 되돌린다.
	   ⚠`touch-action:none` 을 남겨 두면 제목줄에서 시작한 터치로 **페이지를 스크롤할 수 없다.** */
	.layer-popup-tit { padding: 20px 46px 10px 16px; cursor: default; touch-action: auto; }
	.layer-popup-cont { padding: 0 16px 16px; }
	/* ⚠위 패딩(14px)을 빼먹지 말 것 — 0 으로 두면 본문과 버튼이 딱 붙는다.
	   데스크톱 규칙(padding:16px 20px 20px)의 **위 여백까지 덮어쓰기 때문**이다(2026.08.18 실제로 겪음). */
	.layer-popup-btns { padding: 14px 16px 16px; }
}