@charset "utf-8";
/* [2026-09-28 | 작업자: 방창배 | 작업: #1509 결제 안내 모달·금액 미지정 차단] 결제수단 선택 모달 전용 스타일.
   범위: #grid1_bg.pay_select 하위만. 로그인·가입 화면의 다른 요소에는 걸리지 않는다.
   이 파일을 링크하는 곳: views/haccp.jsp · views/plateos.jsp · views/register/signUp2.jsp (webview/haccp.jsp 는 서빙 경로 없음) */

/* ── 배경·카드 ───────────────────────────── */
#grid1_bg.pay_select { background: rgba(17, 24, 39, .55); }
#grid1_bg.pay_select .mdl {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 100%; height: auto; margin: 0; padding: 16px; box-sizing: border-box;
}
#grid1_bg.pay_select .mdl_wrap {
	width: 100%; max-width: 420px; padding: 0; overflow: hidden;
	background: #fff; border-radius: 14px; box-shadow: 0 18px 48px rgba(17, 24, 39, .22);
	font-family: 'Noto Sans KR', sans-serif;
}

/* ── 제목줄 ─────────────────────────────── */
#grid1_bg.pay_select .mdl_tit {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; box-sizing: border-box; margin: 0; padding: 12px 12px 12px 24px; border-bottom: 1px solid #eef0f4;
}
#grid1_bg.pay_select .mdl_tit h4 { margin: 0; font-size: 17px; font-weight: 700; color: #111827; }
#grid1_bg.pay_select #grid1_close {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px; box-sizing: border-box;
	border: 0; border-radius: 10px; background: transparent; color: #6b7280;
	font-size: 14px; text-decoration: none; cursor: pointer;
}
#grid1_bg.pay_select #grid1_close:hover { background: #f3f4f6; color: #111827; }

/* ── 안내(현재 기본 상태) ─────────────────── */
#grid1_bg.pay_select .pay_notice { display: none; padding: 28px 24px 30px; text-align: center; }
#grid1_bg.pay_select .pay_notice_icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%;
	background: #f0efff; color: #766BFB;
}
#grid1_bg.pay_select .pay_notice_icon svg { width: 28px; height: 28px; }
#grid1_bg.pay_select .pay_notice_main { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #111827; line-height: 1.45; word-break: keep-all; }
#grid1_bg.pay_select .pay_notice_sub { margin: 0; font-size: 14px; color: #6b7280; line-height: 1.6; word-break: keep-all; }

/* ── 결제수단 버튼 자리(CMS 재개 때 쓰는 모양) ── */
#grid1_bg.pay_select .pay_item_2 {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	padding: 24px; border: 0; background: transparent;
}
#grid1_bg.pay_select .pay_item_2 span.bar { display: none; }
#grid1_bg.pay_select .pay_item_2 span:not(.bar) {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	min-height: 96px; padding: 12px; box-sizing: border-box;
	border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
	color: #111827; font-size: 15px; font-weight: 600; cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
#grid1_bg.pay_select .pay_item_2 span:not(.bar):hover { border-color: #766BFB; box-shadow: 0 0 0 3px #f0efff; color: #111827; }
#grid1_bg.pay_select .pay_item_2 .fa-wallet,
#grid1_bg.pay_select .pay_item_2 .fa-credit-card { margin: 0; font-size: 22px; color: #766BFB; }

@media (max-width: 420px) {
	#grid1_bg.pay_select .pay_item_2 { grid-template-columns: 1fr; }
	#grid1_bg.pay_select .pay_item_2 span:not(.bar) { flex-direction: row; min-height: 56px; }
}

/* ── [2026-10-05 | 작업자: 방창배 | 작업: #1598 콘솔 결제수단 켜기끄기] 콘솔 설정으로 켜는 결제수단 자리(.pay_methods) ──
   기본 숨김. paySelectModal.js 가 설정을 받아 켜진 버튼이 1개 이상일 때만 .pm_on 을 붙인다(1개면 .pm_one 도).
   버튼 모양 = 위 .pay_item_2 span:not(.bar) 규칙 복제. 🔴 [hidden] 규칙이 있어야 display 지정이 hidden 속성을 이기지 않는다. */
#grid1_bg.pay_select .pay_methods { display: none; padding: 24px; gap: 12px; grid-template-columns: 1fr 1fr; }
#grid1_bg.pay_select .pay_methods.pm_on { display: grid; }
#grid1_bg.pay_select .pay_methods.pm_one { grid-template-columns: 1fr; }
#grid1_bg.pay_select .pay_method {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 96px; padding: 12px; margin: 0; box-sizing: border-box;
	border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
	color: #111827; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
#grid1_bg.pay_select .pay_method:hover { border-color: #766BFB; box-shadow: 0 0 0 3px #f0efff; color: #111827; }
#grid1_bg.pay_select .pay_method:disabled { opacity: .6; cursor: default; }
/* [2026-10-05 | 작업자: 방창배 | 작업: #1598 결제수단 스위치] 게이트1 반려 F1 — 로그인 화면(haccp·plateos)엔 아이콘 폰트가 없어 아이콘이 빈칸으로 남는다.
   * 폰트를 새로 싣지 않고(공통 layout 재로드 금지) 3화면 모두 아이콘 없는 글자 버튼으로 통일 — signUp2 는 폰트가 있어도 같은 모양이 되게 함께 숨긴다. */
#grid1_bg.pay_select .pay_method i { display: none; }
#grid1_bg.pay_select .pay_method[hidden] { display: none; }
#grid1_bg.pay_select .pay_notice[hidden],
#grid1_bg.pay_select .pay_notice_sub[hidden] { display: none; }
#grid1_bg.pay_select .pay_notice_main.pm_text { white-space: pre-line; }
/* [2026-10-05 | 작업자: 방창배 | 작업: #1598 콘솔 결제수단 켜기끄기] D9·D10 간편가입 링크 공유 줄 — 간편가입 버튼이 보일 때만 JS 가 hidden 을 푼다 */
#grid1_bg.pay_select .pay_share { padding: 0 24px 22px; text-align: center; }
#grid1_bg.pay_select .pay_share[hidden],
#grid1_bg.pay_select .pay_share [hidden] { display: none; }
#grid1_bg.pay_select .pay_share_tit { margin: 0 0 8px; font-size: 14px; color: #6b7280; }
#grid1_bg.pay_select .pay_share_btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
#grid1_bg.pay_select .pay_share_btn {
	min-width: 112px; min-height: 44px; padding: 0 16px; box-sizing: border-box;
	border: 1px solid #766BFB; border-radius: 10px; background: #fff; color: #766BFB;
	font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
#grid1_bg.pay_select .pay_share_btn:hover { background: #f0efff; }
#grid1_bg.pay_select .pay_share_url {
	width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 10px; box-sizing: border-box;
	border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; color: #111827; background: #f9fafb;
}
#grid1_bg.pay_select .pay_share_msg { margin: 8px 0 0; font-size: 14px; color: #374151; }

@media (max-width: 420px) {
	#grid1_bg.pay_select .pay_methods { grid-template-columns: 1fr; }
	#grid1_bg.pay_select .pay_method { flex-direction: row; min-height: 56px; }
}

/* ══ 결제 중단 플래그 [2026-09-28 | 작업자: 방창배 | 작업: #1509 결제 안내 모달·금액 미지정 차단] PG 해지 ══
   CMS 로 결제를 다시 열 때는 아래 두 줄만 지우고, 이 파일을 링크한 JSP 의 ?v= 를 올린다.
   ══════════════════════════════════════════ */
#grid1_bg.pay_select .pay_item_2 { display: none; }
#grid1_bg.pay_select .pay_notice { display: block; }