/* form-inline.css — 폼 인라인 오류 + 로그인 모달 · UI 개선 7 (2026-10-19)
   값은 wune-ds 토큰(폴백 포함): 오류 --wds-error #B3261E · 라벨 13.5px · primary #5E1A25 · text-sub #5A5A5A · border #E4E4E7
   🚨 DS 가 .content_wrap 안 p 의 font-size 를 !important 로 잡는다 — 모바일 규칙 `body.wds :is(.content_wrap,.cont_wrap) :is(p,li,dd):not([class*="hero"] *)` (0,3,2)
      → 실측 375 에서 오류 문구가 16px 이 됐다. ui23 과 같은 `:not(#\#)`(id 1개 = 1,0,0) 로 올린다(인라인 style 보다는 낮다).
      입력칸 테두리도 DS·combined 의 포커스 테두리(primary)에 져서 포커스된 오류 칸이 버건디였다 → 같은 방법. */

/* ── 인라인 오류 문구 ─────────────────────────────────────────── */
html body .fi-error:not(#\#) {
	display: block;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-size: var(--wds-fs-label, 13.5px) !important;
	line-height: 1.45 !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	text-transform: none !important;
	color: var(--wds-error, #B3261E) !important;
}
html body .fi-error:not(#\#)::before { content: "! "; font-weight: 700; }

/* 오류 칸 테두리 — 박스형(예약)·밑줄형(가입·로그인) */
html body :is(input, select, textarea).fi-invalid:not(#\#), html body :is(input, select, textarea).fi-invalid:not(#\#):focus { border-color: var(--wds-error, #B3261E) !important; }
html body .signup_card .form_group input.fi-invalid:not(#\#) { border-bottom-color: var(--wds-error, #B3261E) !important; }
html body input[type="checkbox"].fi-invalid { outline: 2px solid var(--wds-error, #B3261E); outline-offset: 2px; }
html body .rv-times.fi-has-error { outline: 1px solid var(--wds-error, #B3261E); outline-offset: 4px; }
html body .agree_group.fi-has-error .agree_label span,
html body .form_agree_wrap.fi-has-error .form_agree_check > span { color: var(--wds-error, #B3261E) !important; }

/* ── 로그인 모달(#loginModal, 전후사진 목록·상세) ─────────────────── */
/* 모바일 퀵바(fixed z 99999)·카카오 FAB(99998)가 모달(10000) 위에 남아 하단 62px 배경을 눌러도 안 닫혔다 → 그 위로 */
html body .bac-login-modal { z-index: 100000; }
.bac-login-modal .bac-login-modal__box:focus { outline: none; }
html body .bac-login-modal :is(a, button):focus-visible,
html body .ba-after-overlay.fi-modal-trigger:focus-visible {
	outline: 2px solid var(--wds-primary, #5E1A25) !important;
	outline-offset: 2px !important;
}
html body .ba-after-overlay.fi-modal-trigger:focus-visible { outline-color: #fff !important; outline-offset: -4px !important; }

/* 닫기 × 28×38 #999 → 44×44 #5A5A5A */
html body .bac-login-modal .bac-login-modal__close {
	top: 8px; right: 8px; width: 44px; height: 44px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--wds-text-sub, #5A5A5A); line-height: 1;
}
html body .bac-login-modal .bac-login-modal__close:hover { color: var(--wds-text, #1A1A1A); }

/* 「간편 가입으로 30초만에 완료됩니다.」 — SNS 버튼 바로 위 안내로(#aaa 2.3:1 → text-sub 7.0:1) */
html body .bac-login-modal .bac-login-modal__note.bac-login-modal__note {
	margin: 0 0 10px; font-size: var(--wds-fs-label, 13.5px); line-height: 1.45; color: var(--wds-text-sub, #5A5A5A);
}

/* SNS 3버튼 — 로그인 페이지 SNS 와 같은 Secondary(48 · r0 · 15/600 · 1.5px primary) */
html body .bac-login-modal .bac-login-modal__sns-row {
	display: flex; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none;
}
html body .bac-login-modal .bac-login-modal__sns-row > li { flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0; }
html body .bac-login-modal a.bac-login-modal__sns {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: 100%; min-height: 48px; padding: 0 8px; margin: 0;
	font-size: var(--wds-fs-sm, 15px) !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: 0;
	color: var(--wds-primary, #5E1A25) !important; background: var(--wds-bg, #fff) !important;
	border: 1.5px solid var(--wds-primary, #5E1A25); border-radius: 0;
	text-decoration: none !important; white-space: nowrap;
	transition: background-color .15s, color .15s;
}
html body .bac-login-modal a.bac-login-modal__sns:hover { background: var(--wds-primary, #5E1A25) !important; color: #fff !important; }
/* SNS 와 아이디 로그인·가입 버튼 사이 구분선 */
html body .bac-login-modal .bac-login-modal__sns-row + .bac-login-modal__btns { padding-top: 20px; border-top: 1px solid var(--wds-border, #E4E4E7); margin-bottom: 0; }

@media (max-width: 400px) {
	html body .bac-login-modal .bac-login-modal__box { padding: 40px 20px 28px; }
	html body .bac-login-modal .bac-login-modal__sns-row { gap: 6px; }
}