@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
 *                 ORANGE-PMI PLATFORM  Version 2.0.0 - Last modified 2026-10-13
 *           Modular Web Architecture · Powered by Orangecommunication · www.oranc.net
 * ----------------------------------------------------------------------------------------------
 * 팝업존 — 사이트 공용 모달(c-modal) 위에 얹는 것만: 상자 폭 · 슬라이드 · 머리의 ‹ › 카운터 · 아래 칸 배치 · 좁은 화면의 시트.
 *
 * popup-notice.css (app/guava/asset/css) — popup_html()(app/guava/lib/popup-notice.lib.php) 이 asset_head() 로 건다. 관리 미리보기(popup.view.php)도 같은 장.
 *   상자·머리·몸·아래 칸의 모양은 **사이트 ui.css 의 c-modal** 이 그린다(두 사이트 같은 블록, 값은 토큰). 여기는 그 위의 차이만 —
 *   공용 함수가 내는 마크업이라 앱 자산이다(global-template "공용 함수가 내는 class 는 못 옮긴다"). 값은 토큰을 읽고 뒤에 기본값.
 *   ── 담는 것 ────────────────────────────────────────────────────────────────
 *     c-popup            c-modal 에 더 붙는 이름 — 상자 폭(--popup-w, 바깥 상자에 인라인으로 준다 — 안의 상자가 물려받는다)
 *     c-popup__slide     팝업 하나 — is-active 만 보인다(전환은 popup-notice.js)
 *     머리 버튼 자리    ‹ › + 카운터(둘 이상일 때만 마크업이 낸다) — 공용 c-modal__btns
 *     아래 칸           왼쪽 '열지 않기' · 오른쪽 닫기(공용은 오른쪽 정렬이라 여기서 양끝으로)
 *   상자 마크업은 공용 modal_begin()(system/lib/modal.lib.php) — 몸·머리 버튼·아래 칸은 공용 class 를 .c-popup 아래에서 고친다
 *   ★ 좁은 화면(580px — main variables.css 의 분기점과 같다)에선 **아래에 붙는 시트** — 폭 전부, 위 모서리만 둥글게, 높이 85vh 안에서 스크롤.
 * ---------------------------------------------------------------------------------------------- */

.c-popup .c-modal__box		{max-width:var(--popup-w, 560px);}

.c-popup .c-modal__body		{padding:16px 40px 24px;}
.c-popup__slide				{display:none;}
.c-popup__slide.is-active	{display:block;}
.c-popup__slide img			{max-width:100%; height:auto;}
.c-popup__slide p			{margin:0 0 .6em;}

.c-popup .c-modal__btns	{gap:4px;}
.c-popup .c-modal__btns .c-btn	{min-width:36px; padding:0 8px; font-size:1.2em; line-height:1;}
.c-popup__count				{min-width:3.5em; text-align:center; font-size:var(--font-size-sm, .9rem); color:var(--color-mute, #6d7882);}

.c-popup .c-modal__foot		{justify-content:space-between; padding-top:8px; border-top:1px solid var(--border-color-cell, #e0e0e0);}
.c-popup__check				{display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:var(--font-size-sm, .9rem); color:var(--color-ink, #444);}
.c-popup__check input:focus-visible	{outline:2px solid var(--color-primary, #003d97); outline-offset:2px;}

/*  좁은 화면 — 바텀시트. 상자 폭 변수는 무시하고(가로 전부), 위에서 아래로 열린 느낌이 아니라 **아래에 붙어** 선다.  */
@media screen and (max-width:580px) {
	.c-popup.c-modal		{align-items:flex-end; padding:0;}
	.c-popup .c-modal__box	{max-width:none; max-height:85vh; border-radius:var(--radius-md, 10px) var(--radius-md, 10px) 0 0;}
	.c-popup .c-modal__head	{padding:24px 72px 0 20px;}
	.c-popup .c-modal__close{top:12px; right:12px;}
	.c-popup .c-modal__body	{padding:12px 20px 16px;}
	.c-popup .c-modal__foot	{padding:8px 20px 20px;}
	.c-popup .c-modal__foot .c-btn	{min-width:88px; padding:0 16px;}
}