/* 결제 일정·해지·환불 안내 (2026-10-12) — 결제 화면(3단계)과 /start(2단계)가 함께 쓴다.
   색은 기존 사이트 변수를 쓰고 없으면 따뜻한 회색 한 벌로 대체한다. 상자·띠 없이 윗선 하나로 구분한다. */
.fh-billnote {
	margin: 20px 0 0;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--fs-line, #e4e4df);
	color: var(--fs-ink-2, #3a3a37);
	text-align: left;
}
.fh-billnote__t { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--fs-ink, #111); }
.fh-billnote__l { margin: 0; }
.fh-billnote__r { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--fs-line, #e4e4df); font-size: 14px; line-height: 1.65; }
.fh-billnote__r:first-of-type { border-top: 0; }
.fh-billnote dt { font-weight: 700; color: var(--fs-ink, #111); }
.fh-billnote dd { margin: 0; word-break: keep-all; }
.fh-billnote ul { margin: 0 0 6px; padding-left: 18px; list-style: disc; }
.fh-billnote li { margin: 0; list-style: disc; }
.fh-billnote a { color: var(--fs-ink, #111); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fh-billnote a:focus-visible { outline: 2px solid var(--fs-ink, #111); outline-offset: 2px; }
button.is-consent-locked, button.is-consent-locked:hover { opacity: .45; cursor: not-allowed; transform: none; }
/* 결제하기 버튼이 잠긴 이유 한 줄(checkout-consent.js, 13차) — 버튼 아래, 잠금이 풀리면 비운다 */
.fh-payhint { margin: 8px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--fs-ink-2, #3a3a37); word-break: keep-all; }
.fh-payhint[hidden] { display: none; }
/* 청약철회 동의는 「전체 동의」에 묶이지 않는다(S8) — 전체 동의/잠긴 결제 버튼을 누른 뒤 이 칸을 짚어 준다 */
.fluxhub-consent-row.is-consent-attn { outline: 2px solid var(--fs-ink, #111); outline-offset: 3px; border-radius: 6px; }
.fh-consent-note { margin: 8px 0 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--fs-ink, #111); word-break: keep-all; }
.fh-consent-note[hidden] { display: none; }
/* /start/ 요금제 선택 뒤 결제 화면을 여는 동안(start-loading.js, 13차) */
button.is-loading, button.is-loading:hover { opacity: .7; cursor: progress; transform: none; }
/* 모바일·태블릿(≤768): 결제 바가 화면 아래에 고정되는 구간 — 안내 줄은 바 밖 위쪽 띠로 올려 바 높이를 원래대로 둔다.
   오른쪽 80px 는 떠 있는 벨·장바구니 버튼 자리라 띠가 거기까지 가지 않는다 (15차) */
@media (max-width: 768px) {
	.fhs-pay-bar .fh-payhint { position: absolute; left: 0; right: 80px; bottom: 100%; margin: 0; padding: 8px 12px 8px 16px; text-align: left; background: var(--fx-surface, #fff); border-top: 1px solid var(--fx-line-strong, #d6d6d0); }
	/* 로그인 전에는 장바구니 버튼이 독 밖에 혼자 떠 있어(fluxshop: bottom 16/24px) 고정 결제 바의 오른쪽 끝을 덮는다 (16차).
	   결제 바가 있는 화면에서만 바(77px) 위로 올린다. 독 안(position:static)에 있을 땐 bottom 이 적용되지 않는다.
	   fluxshop.js 가 style 속성으로 bottom:24px 를 직접 박아서 !important 가 필요하다. */
	body:has(.fhs-pay-bar) .fhs-cart-fab { bottom: 96px !important; }
	/* 고정 결제 바(77px)와 안내 띠(최대 약 70px)가 푸터를 가리지 않게 페이지 맨 아래에 그만큼 여백을 둔다 (17차).
	   푸터는 바보다 낮은 쌓임 맥락이라 z-index 로는 못 이기고, 여백으로 스크롤 끝에서 바 위로 올라오게 한다. */
	body:has(.fhs-pay-bar) { padding-bottom: calc(77px + 80px + 16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
	.fh-payhint { margin-top: 6px; }
	.fh-billnote { padding: 14px 16px; }
	.fh-billnote__r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}