/**
 * Beamers 폼 디자인 — ACF/ACF Extended 프론트 폼(beamers-crm 엔진)을 에디토리얼 토큰 디자인으로.
 *
 * - 토큰 자체해석: tokens.css(포트폴리오 전용 enqueue)에 의존하지 않고 --bsp-* 를 자체 정의.
 *   값 우선순위 = theme.json(--wp--custom--bsp--*) → 포트폴리오 토큰(--bsp-*) → 레거시(--*) → 하드 default.
 *   → 어느 페이지서나 동작 + 각 스튜디오 theme.json 으로 재틴트(per-studio 커스터마이즈).
 * - 전 필드 타입 커버: 입력/textarea/select2/radio·checkbox(커스텀 컨트롤+칩)/true_false/range/date/섹션/submit.
 * - 전역 규칙: :hover 시각변화 금지(transform/scale/box-shadow/opacity/색상). focus/selected/checked 상태만.
 *
 * per-studio 레버(theme.json settings.custom.bsp.*):
 *   accent  → required '*' · 에러 · focus 링 · 성공 마크 · 체크/라디오 체크색
 *   ink     → 본문 · 입력 focus 테두리 · submit 배경 · 선택 칩 배경
 *   paper   → 입력/칩 배경 · submit/선택칩 글자(반전)
 *   inkMute → 라벨(mono) · 도움말 · placeholder · 단위
 *   rule/ruleStrong → 섹션 헤어라인 / 입력·컨트롤 테두리
 *   fontBody/fontMono → 입력·submit / 라벨·단위
 *   radius  → 입력/select/textarea/submit 모서리 (칩은 항상 pill)
 *
 * ── 특이도 계약 (2026-06-12 평탄화) ──────────────────────────────────────────
 * 폼 내부 룰은 전부 `.bsp-form :where(...)` = (0,1,0) 균일. 파일 내부 캐스케이드는 순서(나중=승리).
 * 테마(스튜디오)는 `.bsp-form <클래스 1개>` = (0,2,0) 만으로 어떤 룰이든 이긴다 — !important 불필요.
 *   예) .bsp-form .acf-label > label { font-family: ...; }   ← 항상 승리
 * 예외 1 — !important 잔존: ACF 인라인 스타일 무력화용(.acf-field 의 margin/padding/float/width,
 *   acf-is-prepended/appended 라운드, 모바일 stack, .acf-hidden, 에러 보더). 그 속성을 테마가
 *   바꾸려면 테마도 !important 필요(드묾).
 * 예외 2 — 벤더 경합 구역(특이도 유지·평탄화 제외): select2 / jQuery UI datepicker·timepicker /
 *   intl-tel(iti) / wp-color-picker(wp-picker·iris) 룰은 프론트에 잔존하는 위젯 벤더 CSS 를
 *   특이도로 이겨야 하므로 그대로 둔다. 테마 오버라이드는 동일 셀렉터 복사(테마 CSS 가 뒤에
 *   로드되므로 동순위 승) 또는 클래스 한 단계 추가.
 * 파일 끝 "변형 재단언" 참조 — 평탄화 전 특이도가 담당하던 변형 우선권을 순서로 복원한 구역.
 */

/* ── 토큰 자체해석 ─────────────────────────────────────────────────────────── */
.bsp-form {
  /* tokens.css 와 동일 패턴(theme.json → 레거시 --X → 하드 default). 자기참조(--bsp-X) 금지 — cyclic→invalid. */
  --bsp-paper:       var(--wp--custom--bsp--paper,       var(--paper,        #ffffff));
  --bsp-paper-2:     var(--wp--custom--bsp--paper-2,     var(--paper-2,      #f4f2ee));
  --bsp-ink:         var(--wp--custom--bsp--ink,         var(--ink,          #141414));
  --bsp-ink-soft:    var(--wp--custom--bsp--ink-soft,    var(--ink-soft,     #44403c));
  --bsp-ink-mute:    var(--wp--custom--bsp--ink-mute,    var(--ink-mute,     #8a8378));
  --bsp-rule:        var(--wp--custom--bsp--rule,        var(--rule,         rgba(20,20,20,.10)));
  --bsp-rule-strong: var(--wp--custom--bsp--rule-strong, var(--rule-strong,  rgba(20,20,20,.20)));
  --bsp-ink-faint:   var(--wp--custom--bsp--ink-faint,   var(--ink-faint,    #9aa1b2));
  --bsp-error:       var(--wp--custom--bsp--error,       var(--error,        #d64545));
  --bsp-accent:      var(--wp--custom--bsp--accent,      var(--accent,       #c4361b));
  --bsp-accent-soft: var(--wp--custom--bsp--accent-soft, var(--accent-soft,  rgba(196,54,27,.08)));
  --bsp-on-accent:   var(--wp--custom--bsp--on-accent,   var(--on-accent,    #ffffff));
  --bsp-font-body:   var(--wp--custom--bsp--font-body,   'Pretendard Variable', system-ui, -apple-system, sans-serif);
  --bsp-font-mono:   var(--wp--custom--bsp--font-mono,   'JetBrains Mono', ui-monospace, monospace);
  --bsp-radius:      var(--wp--custom--bsp--radius,      var(--radius,       2px));
  /* 컨테이너 폭·정렬·색·타이포는 테마 소관(2026-06-13 제거) — 이 블록은 토큰 공급만.
   * 입력 높이도 --input-height 토큰(reset.css :root 2.75rem 기본, 테마가 재정의)으로 위임. */
}

/* ── 필드 행 / 폭 — flex + gap (행 간격 + half/third 가로 거터를 box-sizing 안전하게) ──
 * ACF 기본은 float + 인라인 width%(거터/박스싱 제어 어려움). flex-wrap + gap 으로 전환하고
 * 폭 컬럼은 gap 만큼 calc 차감 → 오버플로 없이 일정한 세로 간격 + 가로 거터. */
/* .acf-fields 컨테이너(flex/gap) 스타일링은 테마 소관(2026-06-13 초기화).
 * 아래 폭 컬럼 calc(50% - …)는 거터 1.25rem 전제 — 테마가 flex+gap 을 다르게 잡으면 함께 재정의. */
.bsp-form :where(.acf-fields > .acf-field) {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;     /* 간격은 gap 이 담당 — ACF 기본/인라인 마진 무력화 */
  padding: 0 !important;
  border: 0;
  float: none !important;   /* ACF float 레이아웃 해제 */
}
.bsp-form :where(.acf-fields > .acf-field)::before,
.bsp-form :where(.acf-fields > .acf-field)::after { display: none; } /* ACF 기본 가상요소 제거 */
.bsp-form :where(.acf-fields > .acf-field[data-width="50"]) { width: calc(50% - 0.625rem) !important; }
.bsp-form :where(.acf-fields > .acf-field[data-width="33"]) { width: calc(33.333% - 0.834rem) !important; }
.bsp-form :where(.acf-fields > .acf-field[data-width="25"]) { width: calc(25% - 0.9375rem) !important; }

/* ── 라벨 / 필수 / 도움말 ──────────────────────────────────────────────────── */
/* .acf-label / .acf-label > label 스타일링은 테마 소관(2026-06-13 제거) — 폼은 필드 위주만. */
.bsp-form :where(.acf-label .acf-required) { color: var(--bsp-accent); text-decoration: none; }
.bsp-form :where(.acf-field .description) {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bsp-ink-mute);
}

/* ── 텍스트류 입력 / textarea / select / date 표시input ──────────────────────── */
.bsp-form :where(.acf-input input[type="text"]),
.bsp-form :where(.acf-input input[type="email"]),
.bsp-form :where(.acf-input input[type="url"]),
.bsp-form :where(.acf-input input[type="tel"]),
.bsp-form :where(.acf-input input[type="number"]),
.bsp-form :where(.acf-input input[type="password"]),
.bsp-form :where(.acf-input textarea),
.bsp-form :where(.acf-input select),
.bsp-form :where(.acf-date-picker input.input),
.bsp-form :where(.acf-time-picker input.input),
.bsp-form :where(.acf-date-time-picker input.input) {
  width: 100%;
  box-sizing: border-box;
  height: var(--input-height, 2.75rem);   /* reset 는 text·password·email 만 height 부여 → url·tel·number 누락분까지 통일(높이 일관) */
  margin: 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--bsp-rule-strong);
  border-radius: var(--bsp-radius);
  background: var(--bsp-paper);
  color: var(--bsp-ink);
  font-family: var(--bsp-font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.bsp-form :where(.acf-input textarea) { height: auto; min-height: 7rem; resize: vertical; line-height: 1.65; }
/* native select(ui=0, 기본) — reset 와 동일 chevron + appearance 제거(OS 화살표 중복 방지) */
.bsp-form :where(.acf-input select) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding: 0 2.5rem 0 0.95rem;                              /* 세로 padding 0 + line-height 로 텍스트 수직중앙(클립 방지) */
  line-height: calc(var(--input-height, 2.75rem) - 2px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center right 0.95rem;
}

/* focus (no hover) */
.bsp-form :where(.acf-input input:focus),
.bsp-form :where(.acf-input textarea:focus),
.bsp-form :where(.acf-input select:focus),
.bsp-form :where(.acf-date-picker input.input:focus),
.bsp-form :where(.acf-time-picker input.input:focus),
.bsp-form :where(.acf-date-time-picker input.input:focus) {
  outline: none;
  border-color: var(--bsp-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bsp-ink) 8%, transparent);
}
.bsp-form :where(.acf-input input)::placeholder,
.bsp-form :where(.acf-input textarea)::placeholder { color: var(--bsp-ink-mute); opacity: 1; }

/* number 스피너 제거 */
.bsp-form :where(.acf-input input[type="number"]) { -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.bsp-form :where(.acf-input input[type="number"])::-webkit-outer-spin-button,
.bsp-form :where(.acf-input input[type="number"])::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* prepend/append(prefix·suffix 단위) — acf-input dequeue 로 빠진 가로 레이아웃 재구성.
 * ACF 마크업: .acf-input > [.acf-input-prepend] [.acf-input-append] + .acf-input-wrap>input (순서가 들쭉날쭉)
 * → :has 로 addon 있을 때만 .acf-input 을 flex 화하고 order 로 prepend(좌)·input·append(우) 정렬. */
.bsp-form :where(.acf-input:has(> .acf-input-append)),
.bsp-form :where(.acf-input:has(> .acf-input-prepend)) { display: flex; align-items: stretch; }
.bsp-form :where(.acf-input > .acf-input-wrap) { order: 1; flex: 1 1 auto; min-width: 0; }
.bsp-form :where(.acf-input > .acf-input-prepend) { order: 0; }
.bsp-form :where(.acf-input > .acf-input-append) { order: 2; }
.bsp-form :where(.acf-input .acf-input-prepend),
.bsp-form :where(.acf-input .acf-input-append) {
  display: flex; align-items: center; flex: none;
  padding: 0 0.85rem; border: 1px solid var(--bsp-rule-strong);
  background: var(--bsp-paper-2); color: var(--bsp-ink-mute);
  font-family: var(--bsp-font-body); font-size: 0.9rem; line-height: 1; white-space: nowrap;
}
.bsp-form :where(.acf-input .acf-input-prepend) { border-right: 0; border-radius: var(--bsp-radius) 0 0 var(--bsp-radius); }
.bsp-form :where(.acf-input .acf-input-append)  { border-left: 0;  border-radius: 0 var(--bsp-radius) var(--bsp-radius) 0; }
.bsp-form :where(.acf-input input.acf-is-prepended) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.bsp-form :where(.acf-input input.acf-is-appended)  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* range — 슬라이더 + 숫자 인풋 + 단위(append) 를 한 줄 flex 로 */
.bsp-form :where(.acf-range-wrap) { display: flex; align-items: center; gap: 0.9rem; }
.bsp-form :where(.acf-range-wrap input[type="range"]) {
  flex: 1; min-width: 0; height: 1.1rem; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;   /* reset all:unset 흔적 제거 + 트랙 직접 그림 */
}
.bsp-form :where(.acf-range-wrap input[type="range"])::-webkit-slider-runnable-track {
  height: 0.4rem; border-radius: 999px; background: var(--bsp-rule-strong);   /* 보이는 트랙 배경 */
}
.bsp-form :where(.acf-range-wrap input[type="range"])::-moz-range-track {
  height: 0.4rem; border-radius: 999px; background: var(--bsp-rule-strong);
}
.bsp-form :where(.acf-range-wrap input[type="range"])::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -0.35rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--bsp-accent);
}
.bsp-form :where(.acf-range-wrap input[type="range"])::-moz-range-thumb {
  border: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--bsp-accent);
}
.bsp-form :where(.acf-range-wrap input[type="number"]) {
  flex: none; width: 4.5rem; text-align: center; box-sizing: border-box;
  padding: 0.5rem; border: 1px solid var(--bsp-rule-strong); border-radius: var(--bsp-radius);
  background: var(--bsp-paper); color: var(--bsp-ink); font-family: var(--bsp-font-body); font-size: 0.9rem;
}
.bsp-form :where(.acf-range-wrap .acf-append) { color: var(--bsp-ink-mute); font-size: 0.9rem; }

/* button_group — 세그먼트 컨트롤(연결된 버튼). 네이티브 radio 숨김, 선택 시 ink 반전. */
.bsp-form :where(.acf-button-group) { display: inline-flex; flex-wrap: wrap; }
.bsp-form :where(.acf-button-group label) {
  position: relative; margin: 0; padding: 0.55rem 1.15rem;
  border: 1px solid var(--bsp-rule-strong); background: var(--bsp-paper); color: var(--bsp-ink);
  font-size: 0.9rem; font-weight: 500; line-height: 1.2; cursor: pointer;
}
.bsp-form :where(.acf-button-group label:not(:first-child)) { margin-left: -1px; }        /* 인접 테두리 겹침 */
.bsp-form :where(.acf-button-group label:first-child) { border-radius: 999px 0 0 999px; }
.bsp-form :where(.acf-button-group label:last-child) { border-radius: 0 999px 999px 0; }
.bsp-form :where(.acf-button-group label input) { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bsp-form :where(.acf-button-group label:has(input:checked)),
.bsp-form :where(.acf-button-group label.selected) {
  background: var(--bsp-ink); border-color: var(--bsp-ink); color: var(--bsp-paper); z-index: 1;
}
.bsp-form :where(.acf-button-group label:has(input:focus-visible)) { outline: 2px solid var(--bsp-accent); outline-offset: 2px; z-index: 2; }

/* toggle (true_false ui=1) 스위치 — acf-input dequeue 로 빠진 스위치를 재구성(체크박스 박스 제거). */
.bsp-form :where(.bsp-field--toggle .acf-true-false label) { padding-left: 0; align-items: center; gap: 0.6rem; }
.bsp-form :where(.bsp-field--toggle .acf-true-false label)::before,
.bsp-form :where(.bsp-field--toggle .acf-true-false label)::after { display: none; }
.bsp-form :where(.bsp-field--toggle .acf-switch-input) { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bsp-form :where(.bsp-field--toggle .acf-switch) {
  position: relative; flex: none; display: inline-block; vertical-align: middle;
  width: 2.8rem; height: 1.6rem; background: var(--bsp-rule-strong); border-radius: 999px; cursor: pointer;
}
.bsp-form :where(.bsp-field--toggle .acf-switch .acf-switch-on),
.bsp-form :where(.bsp-field--toggle .acf-switch .acf-switch-off) { display: none; }       /* 예/아니요 텍스트 숨김 — 깔끔한 토글 */
.bsp-form :where(.bsp-field--toggle .acf-switch .acf-switch-slider) {
  position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; background: var(--bsp-paper); transition: left 0.15s ease;   /* click 토글 — hover 무관 */
}
.bsp-form :where(.bsp-field--toggle .acf-switch-input:checked + .acf-switch) { background: var(--bsp-ink); }
.bsp-form :where(.bsp-field--toggle .acf-switch-input:checked + .acf-switch .acf-switch-slider) { left: calc(100% - 1.4rem); }
.bsp-form :where(.bsp-field--toggle .acf-switch-input:focus-visible + .acf-switch) { outline: 2px solid var(--bsp-accent); outline-offset: 2px; }

/* color_picker — wp-color-picker(Iris) 트리거: 좌측 swatch(버튼 bg=선택색 인라인) + 우측 라벨 박스. */
.bsp-form .acf-color-picker .wp-color-result.button {
  display: inline-flex; align-items: stretch; height: var(--input-height, 2.75rem);
  min-width: 12rem; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;
  border: 1px solid var(--bsp-rule-strong); border-radius: var(--bsp-radius); box-shadow: none;
  /* background-color = 선택색(Iris 인라인) = 좌측 swatch — 건드리지 않음 */
}
.bsp-form .acf-color-picker .wp-color-result-text {
  display: flex; align-items: center; margin-left: auto;   /* 라벨을 우측으로 — 좌측은 swatch */
  padding: 0 1rem; height: 100%;
  background: var(--bsp-paper); color: var(--bsp-ink); border-left: 1px solid var(--bsp-rule-strong);
  font-family: var(--bsp-font-body); font-size: 0.9rem;
}
.bsp-form .acf-color-picker .wp-color-result.button:focus { border-color: var(--bsp-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bsp-ink) 8%, transparent); }
/* 열렸을 때 hex 인풋 + 지우기 버튼 행 — reset 의 input[type=text](풀폭 100%) 침투 차단, 흰 배경 컴팩트 인라인 */
.bsp-form .acf-color-picker .wp-picker-input-wrap { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; vertical-align: top; }
.bsp-form .acf-color-picker .wp-picker-input-wrap.hidden { display: none; }   /* 닫혔을 땐 숨김 — 열려야(.hidden 제거) 표시 */
.bsp-form .acf-color-picker .wp-picker-input-wrap label { margin: 0; }
.bsp-form .acf-color-picker .wp-picker-input-wrap input.wp-color-picker {
  box-sizing: border-box; width: 9rem; height: var(--input-height, 2.75rem); margin: 0; padding: 0 0.7rem; line-height: normal;
  border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2)); border-radius: var(--bsp-radius, 2px);
  background: var(--bsp-paper, #fff); color: var(--bsp-ink, #141414); font-family: var(--bsp-font-mono, monospace); font-size: 0.9rem;
}
.bsp-form .acf-color-picker .wp-picker-input-wrap .button {
  box-sizing: border-box; height: var(--input-height, 2.75rem); margin: 0; padding: 0 0.9rem; cursor: pointer; line-height: normal;
  border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2)); border-radius: var(--bsp-radius, 2px);
  background: var(--bsp-paper, #fff); color: var(--bsp-ink, #141414); font-size: 0.85rem;
}
.bsp-form .acf-color-picker .iris-picker { margin-top: 0.5rem; border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2)); border-radius: var(--bsp-radius, 2px); }

/* phone(intl-tel) — 국기 오른쪽 가운데 라인(.iti__selected-flag border-right #7e8993)을 한 톤 옅게.
 * acfe-pro-input 규칙이 더 강해 .iti 추가 + !important 로 이김. */
.bsp-form .bsp-field--phone .iti .iti__selected-flag { border-right-color: var(--bsp-rule, rgba(20,20,20,.12)) !important; }
/* 국가 드롭다운 팝오버 — 가로 스크롤 제거. 각 항목을 flex(국기 + 이름(말줄임) + 다이얼코드)로 폭 안에 맞춤. */
.iti__country-list { overflow-x: hidden !important; }
.iti__country-list .iti__country { display: flex; align-items: center; gap: 0.45rem; box-sizing: border-box; }
.iti__country-list .iti__country .iti__country-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iti__country-list .iti__country .iti__dial-code { flex: none; margin-left: auto; padding-left: 0.5rem; color: var(--bsp-ink-mute, #777); }

/* ── jQuery UI datepicker (date·time·datetime 팝업) — body 직속(.bsp-form 밖). 폼 톤으로 테마 +
 *    reset.css 의 전역 select/input 스타일(44px·chevron) 침투 차단. hover 색변화는 전역 규칙대로 무력화. ── */
.ui-datepicker.ui-widget {
  width: auto; padding: 0.5rem; margin-top: 4px;
  font-family: var(--bsp-font-body, sans-serif); font-size: 0.85rem;
  background: var(--bsp-paper, #fff); border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2));
  border-radius: var(--bsp-radius, 2px); box-shadow: 0 14px 36px -14px rgba(20,20,20,.28); z-index: 100100;
}
.ui-datepicker .ui-datepicker-header { position: relative; background: transparent; border: 0; padding: 0.15rem 0; }
.ui-datepicker .ui-datepicker-title { display: flex; gap: 0.4rem; justify-content: center; align-items: center; margin: 0 2rem; line-height: 1.8rem; }
/* 월/년 select — reset 의 풀폼 select 침투 차단, 컴팩트 + 폼과 동일 chevron(우측 세로중앙) */
.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
  -webkit-appearance: none; appearance: none;
  width: auto; height: auto; line-height: normal; margin: 0; padding: 0.2rem 1.3rem 0.2rem 0.45rem;
  background: var(--bsp-paper, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center right 0.4rem; background-size: 0.6rem;
  border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2)); border-radius: var(--bsp-radius, 2px);
  color: var(--bsp-ink, #141414); font-family: inherit; font-size: 0.85rem; cursor: pointer;
}
/* 이전/다음 — jQuery UI 아이콘 스프라이트 대신 CSS chevron */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  position: absolute; top: 0.15rem; width: 1.8rem; height: 1.8rem; cursor: pointer;
  background: transparent; border: 0;
}
.ui-datepicker .ui-datepicker-prev { left: 0; } .ui-datepicker .ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: none; }
.ui-datepicker .ui-datepicker-prev::after, .ui-datepicker .ui-datepicker-next::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 0.5rem;
  border-top: 2px solid var(--bsp-ink, #141414); border-right: 2px solid var(--bsp-ink, #141414);
}
.ui-datepicker .ui-datepicker-prev::after { transform: translate(-20%,-50%) rotate(-135deg); }
.ui-datepicker .ui-datepicker-next::after { transform: translate(-80%,-50%) rotate(45deg); }
/* 달력 표 */
.ui-datepicker table { width: 100%; border-collapse: collapse; margin: 0.25rem 0 0; }
.ui-datepicker th { padding: 0.35rem 0; font-weight: 600; color: var(--bsp-ink-mute, #777); font-size: 0.78rem; border: 0; }
.ui-datepicker td { padding: 1px; border: 0; background: transparent; }
.ui-datepicker td a, .ui-datepicker td span {
  display: block; text-align: center; padding: 0.4rem 0; min-width: 2rem;
  border: 0; border-radius: var(--bsp-radius, 2px); text-decoration: none;
  color: var(--bsp-ink, #141414); background: transparent; font-weight: 400;
}
.ui-datepicker td span { color: var(--bsp-ink-mute, #aaa); }   /* 비활성일 */
.ui-datepicker td a.ui-state-active { background: var(--bsp-ink, #141414); color: var(--bsp-paper, #fff); }
.ui-datepicker td.ui-datepicker-today a { box-shadow: inset 0 0 0 1px var(--bsp-rule-strong, rgba(20,20,20,.3)); }
/* hover 무력화(전역 no-hover 규칙) — jQuery UI .ui-state-hover 시각변화 제거 */
.ui-datepicker td a.ui-state-hover { background: transparent; color: var(--bsp-ink, #141414); }
.ui-datepicker td a.ui-state-active.ui-state-hover { background: var(--bsp-ink, #141414); color: var(--bsp-paper, #fff); }
/* 오늘/완료 버튼 */
.ui-datepicker .ui-datepicker-buttonpane {
  display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0.5rem 0 0;
  border-top: 1px solid var(--bsp-rule, rgba(20,20,20,.1));
}
.ui-datepicker .ui-datepicker-buttonpane button {
  margin: 0; padding: 0.4rem 0.9rem; cursor: pointer; opacity: 1;   /* jQuery UI .ui-priority-secondary opacity:.7(비활성 느낌) 무력화 */
  border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2)); border-radius: var(--bsp-radius, 2px);
  background: var(--bsp-paper-2, rgba(20,20,20,.04)); color: var(--bsp-ink, #141414); font-family: inherit; font-size: 0.82rem; font-weight: 500;
}
/* jQuery UI 가 .ui-priority-secondary(오늘/현재)에 거는 opacity 를 확실히 무력화 */
.ui-datepicker .ui-datepicker-buttonpane button.ui-priority-secondary { opacity: 1; font-weight: 500; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close { background: var(--bsp-ink, #141414); color: var(--bsp-paper, #fff); border-color: var(--bsp-ink, #141414); }
/* timepicker(.ui-timepicker-div — time·datetime 공통) — 라벨("시간") 세로 중앙 + 우측 간격, 행 정렬 */
.ui-timepicker-div dl { display: flex; align-items: center; flex-wrap: wrap; margin: 0.45rem 0; }
.ui-timepicker-div dl dt { flex: none; margin: 0 0.75rem 0 0; line-height: 1; color: var(--bsp-ink-mute, #777); font-size: 0.85rem; }
.ui-timepicker-div dl dd { margin: 0; }
.ui-timepicker-div .ui_tpicker_time_input { text-align: center; letter-spacing: 0.05em; }
/* 시·분·초 select — reset 풀폼 select 침투 차단 + 콜론 좌우 여백 + 폼과 동일 chevron(우측 세로중앙) */
.ui-timepicker-div .ui-timepicker-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center right 0.4rem; background-size: 0.6rem;
  width: auto; height: auto; line-height: normal; margin: 0 0.35rem; padding: 0.2rem 1.3rem 0.2rem 0.45rem;
  border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2)); border-radius: var(--bsp-radius, 2px);
  background-color: var(--bsp-paper, #fff); color: var(--bsp-ink, #141414); font-family: inherit; font-size: 0.85rem; cursor: pointer;
}

/* ── select2 (ui=1) = 텍스트 인풋과 1:1 정합(안정화) ──────────────────────────
 * 불안정 원인: select2.min.css 기본(single 높이 28px·rendered line-height 26px·arrow 삼각형)이
 * 우리 인풋(44px)과 어긋나 박스 높이·텍스트 수직정렬이 흔들림. → 컨테이너/선택박스/렌더/화살표를
 * 전부 명시해 텍스트 인풋과 동일 규격(44px 고정 + flex 수직중앙)으로 못박는다. */
.bsp-form .select2-container { width: 100% !important; }    /* 폭 안정(select2 JS inline width 보조) */
/* 공통(single+multi): 테두리/배경/라운드 */
.bsp-form .select2-container--default .select2-selection {
  box-sizing: border-box;
  border: 1px solid var(--bsp-rule-strong);
  border-radius: var(--bsp-radius);
  background: var(--bsp-paper);
}
/* single: 텍스트 인풋과 동일 높이·정렬(가장 흔들리던 부분) */
.bsp-form .select2-container--default .select2-selection--single {
  position: relative;                        /* 화살표·clear(×) 절대배치 기준 */
  display: flex;
  align-items: center;                       /* 텍스트 수직 가운데 — line-height 의존 제거 */
  height: var(--input-height, 2.75rem);      /* = 텍스트 인풋 44px. select2 기본 height:28px 무력화 */
  padding: 0 2.5rem 0 0.95rem;               /* 좌: 인풋과 동일 / 우: 화살표 자리 */
  font-family: var(--bsp-font-body);
  font-size: 0.95rem;
}
.bsp-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; margin: 0;
  line-height: normal;                       /* select2 기본 26px 무력화 — flex 가운데정렬이 담당 */
  color: var(--bsp-ink);
  font-size: 0.95rem;
}
.bsp-form .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--bsp-ink-mute); }
/* 화살표 — select2 기본 삼각형(b, border 트릭) 제거 후 네이티브 select 와 동일 chevron + 동일 위치(우측 0.95rem 세로중앙). */
.bsp-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 2.5rem; height: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center right 0.95rem;
}
.bsp-form .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
/* clear(×) — 텍스트에 붙던 것을 오른쪽(화살표 왼쪽)으로 이동 + 굵기/색 완화. select2 기본 float:right 해제. */
.bsp-form .select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute;
  right: 2.5rem; top: 0; bottom: 0;
  display: flex; align-items: center;
  float: none; margin: 0; padding: 0 0.2rem;
  color: var(--bsp-ink-mute); font-weight: 400; font-size: 1.15em; line-height: 1;
  cursor: pointer;
}
/* multi: 최소 높이만 인풋과 맞춤(태그는 아래에서 themed) */
.bsp-form .select2-container--default .select2-selection--multiple {
  min-height: var(--input-height, 2.75rem);
  padding: 0.25rem 0.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
}
/* focus/open = 텍스트 인풋 focus 와 동일(레이아웃 시프트 없음) */
.bsp-form .select2-container--default.select2-container--focus .select2-selection,
.bsp-form .select2-container--default.select2-container--open .select2-selection {
  border-color: var(--bsp-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bsp-ink) 8%, transparent);
}
/* multi 태그 */
.bsp-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bsp-ink);
  color: var(--bsp-paper);
  border: 0;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}
.bsp-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--bsp-paper); }
/* 드롭다운(body 직속 — .bsp-form 스코프 밖 + forms.css 가 select2.min.css 보다 먼저 로드됨.
 * select2 기본값(파란 하이라이트 등)을 이기도록 select2 자체 클래스(.select2-results__options)를
 * 한 단계 더 붙여 특이도를 높인다(!important 없이). */
.select2-container--default .select2-dropdown,
.select2-dropdown {
  border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2));
  border-radius: var(--bsp-radius, 2px);
  background: var(--bsp-paper, #fff);
  box-shadow: 0 14px 36px -14px rgba(20,20,20,.28);   /* 떠 있는 패널 — 엘리베이션으로 주목도↑ */
  overflow: hidden;                                    /* 라운드 코너로 옵션/하이라이트 클립 */
}
/* select2 가 박스와 이어붙이려 지우는 인접 테두리/라운드를 되살려 '완결된 패널' + 박스와 살짝 간격(floating) */
.select2-container--default .select2-dropdown.select2-dropdown--below {
  border-top: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2));
  border-top-left-radius: var(--bsp-radius, 2px); border-top-right-radius: var(--bsp-radius, 2px);
  margin-top: 6px;
}
.select2-container--default .select2-dropdown.select2-dropdown--above {
  border-bottom: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2));
  border-bottom-left-radius: var(--bsp-radius, 2px); border-bottom-right-radius: var(--bsp-radius, 2px);
  margin-bottom: 6px;
}
.select2-container--default .select2-results__options .select2-results__option {
  color: var(--bsp-ink, #141414);
  padding: 0.6rem 0.9rem;
}
/* 이미 선택된 옵션 — 옅은 배경 */
.select2-container--default .select2-results__options .select2-results__option[aria-selected="true"] {
  background: var(--bsp-paper-2, rgba(20,20,20,.05));
  color: var(--bsp-ink, #141414);
}
/* 활성(키보드/포인터) 옵션 — 폼 선택 언어(ink 반전)와 통일. CSS :hover 아님(JS 가 붙이는 listbox active 표식).
 * 선택+활성 겹칠 때 활성이 이기도록 뒤에 둠. */
.select2-container--default .select2-results__options .select2-results__option--highlighted[aria-selected] {
  background: var(--bsp-ink, #141414);
  color: var(--bsp-paper, #fff);
}
/* 검색 란 영역 — 사방 여백 + 배경 tint(검색 zone 을 옵션 목록과 시각 분리) */
.select2-dropdown .select2-search--dropdown {
  padding: 0.75rem;
  background: var(--bsp-paper-2, rgba(20,20,20,.04));
  border-bottom: 1px solid var(--bsp-rule, rgba(20,20,20,.1));
}
.select2-dropdown .select2-search--dropdown .select2-search__field {
  box-sizing: border-box;
  background: var(--bsp-paper, #fff);        /* tint 영역 위에서 인풋이 도드라지게 */
  border: 1px solid var(--bsp-rule-strong, rgba(20,20,20,.2));
  border-radius: var(--bsp-radius, 2px);
  padding: 0.6rem 0.75rem;
}
.select2-dropdown .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--bsp-ink, #141414);
}

/* ── radio / checkbox = 커스텀 컨트롤 (네이티브 숨김) ────────────────────────── */
.bsp-form :where(.acf-radio-list),
.bsp-form :where(.acf-checkbox-list) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
}
.bsp-form :where(.acf-radio-list li),
.bsp-form :where(.acf-checkbox-list li) { margin: 0 !important; padding: 0 !important; } /* ACF .acf-hl li 기본 마진 제거(중복 간격 방지) */
/* acf-global 의 clearfix(.acf-hl/.acf-bl/.acf-cf::before/::after { content:""; display:block })는 옛 float
 * 레이아웃용. 우리 리스트/행은 display:flex 라, 이 빈 가상요소가 "첫(끝) flex 아이템"이 되어 column-gap 만큼
 * 첫 칩/첫 필드를 통째로 밀어버린다(앞단 들여쓰기). flex 엔 clearfix 불필요 → 제거. (acf-global 잔존 대비 방어선) */
.bsp-form :where(.acf-cf)::before, .bsp-form :where(.acf-cf)::after,
.bsp-form :where(.acf-hl)::before, .bsp-form :where(.acf-hl)::after,
.bsp-form :where(.acf-bl)::before, .bsp-form :where(.acf-bl)::after { content: none; display: none; }
/* 네이티브 input 시각 숨김(tab/focus 유지 — display:none 금지) */
.bsp-form :where(.acf-radio-list input),
.bsp-form :where(.acf-checkbox-list input),
.bsp-form :where(.acf-true-false input[type="checkbox"]) {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
/* 기본 컨트롤(라벨 = 컨트롤 + 텍스트) */
.bsp-form :where(.acf-radio-list label),
.bsp-form :where(.acf-checkbox-list label),
.bsp-form :where(.acf-true-false label) {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding-left: 1.65rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--bsp-ink);
  cursor: pointer;
}
/* 그린 박스/원 */
.bsp-form :where(.acf-radio-list label)::before,
.bsp-form :where(.acf-checkbox-list label)::before,
.bsp-form :where(.acf-true-false label)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--bsp-rule-strong);
  background: var(--bsp-paper);
  box-sizing: border-box;
}
.bsp-form :where(.acf-checkbox-list label)::before,
.bsp-form :where(.acf-true-false label)::before { border-radius: var(--bsp-radius); }
.bsp-form :where(.acf-radio-list label)::before { border-radius: 50%; }
/* 체크마크(checkbox/true_false) */
.bsp-form :where(.acf-checkbox-list label)::after,
.bsp-form :where(.acf-true-false label)::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.34em;
  width: 0.34rem;
  height: 0.62rem;
  border: solid var(--bsp-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
/* radio dot */
.bsp-form :where(.acf-radio-list label)::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.43em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bsp-on-accent);
  opacity: 0;
}
/* checked 상태 (.selected = ACF JS, :has = 신규 브라우저 — 둘 다) */
.bsp-form :where(.acf-checkbox-list li:has(input:checked) > label)::before,
.bsp-form :where(.acf-checkbox-list label.selected)::before,
.bsp-form :where(.acf-radio-list li:has(input:checked) > label)::before,
.bsp-form :where(.acf-radio-list label.selected)::before,
.bsp-form :where(.acf-true-false label:has(input:checked))::before {
  background: var(--bsp-accent);
  border-color: var(--bsp-accent);
}
.bsp-form :where(.acf-checkbox-list li:has(input:checked) > label)::after,
.bsp-form :where(.acf-checkbox-list label.selected)::after,
.bsp-form :where(.acf-radio-list li:has(input:checked) > label)::after,
.bsp-form :where(.acf-radio-list label.selected)::after,
.bsp-form :where(.acf-true-false label:has(input:checked))::after { opacity: 1; }
/* focus-visible */
.bsp-form :where(.acf-radio-list li:has(input:focus-visible) > label)::before,
.bsp-form :where(.acf-checkbox-list li:has(input:focus-visible) > label)::before,
.bsp-form :where(.acf-true-false label:has(input:focus-visible))::before {
  outline: 2px solid var(--bsp-accent);
  outline-offset: 2px;
}

/* ── 칩 변형 (display:chips) — 라벨 자체가 pill ────────────────────────────────
 * radio 칩(단일선택) = 깔끔한 pill(표식 없음). checkbox 칩(다중선택) = 앞에 +/✓ 표식으로 구분. */
.bsp-form :where(.bsp-field--chips .acf-radio-list),
.bsp-form :where(.bsp-field--chips .acf-checkbox-list) { gap: 0.5rem 0.55rem; }  /* 칩은 촘촘히 */
.bsp-form :where(.bsp-field--chips .acf-checkbox-list label),
.bsp-form :where(.bsp-field--chips .acf-radio-list label) {
  gap: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bsp-rule-strong);
  border-radius: 999px;
  background: var(--bsp-paper);
  font-size: 0.9rem;
}
/* radio 칩: 컨트롤 표식 없음(pill 만) */
.bsp-form :where(.bsp-field--chips .acf-radio-list label)::before,
.bsp-form :where(.bsp-field--chips .acf-radio-list label)::after { display: none; }
/* checkbox 칩: 다중선택 표식 — 미선택 "+" → 선택 "✓" (radio 와 시각 구분) */
.bsp-form :where(.bsp-field--chips .acf-checkbox-list label)::after { display: none; }
.bsp-form :where(.bsp-field--chips .acf-checkbox-list label)::before {
  content: "+";
  display: inline-block;
  flex: none;                /* 고정 슬롯 — +/✓ 글리프 폭 차이로 칩 너비가 변하지 않도록 */
  width: 0.85em;
  text-align: center;
  position: static; left: auto; top: auto;
  height: auto;
  margin-right: 0.2rem;      /* 글리프↔텍스트 간격은 작은 margin 만(슬롯 가운데 정렬의 앞단 들여쓰기 최소화) */
  border: 0; background: none; border-radius: 0;
  font-weight: 700; font-size: 1em; line-height: 1;
  opacity: 0.55;
}
/* 선택 시 — 기본 체크박스 컨트롤의 checked 규칙(:has 로 specificity 높음)이 ::before 에 박스 배경/테두리를
 * 다시 입히므로(빨간 박스 잔상), 칩에서는 명시적으로 제거하고 글리프(✓)만 남긴다. */
.bsp-form :where(.bsp-field--chips .acf-checkbox-list li:has(input:checked) > label)::before,
.bsp-form :where(.bsp-field--chips .acf-checkbox-list label.selected)::before {
  content: "✓"; opacity: 1;
  background: none; border: 0;
}
/* 선택 시 반전 */
.bsp-form :where(.bsp-field--chips .acf-checkbox-list li:has(input:checked) > label),
.bsp-form :where(.bsp-field--chips .acf-checkbox-list label.selected),
.bsp-form :where(.bsp-field--chips .acf-radio-list li:has(input:checked) > label),
.bsp-form :where(.bsp-field--chips .acf-radio-list label.selected) {
  background: var(--bsp-ink);
  border-color: var(--bsp-ink);
  color: var(--bsp-paper);
}
.bsp-form :where(.bsp-field--chips .acf-checkbox-list li:has(input:focus-visible) > label),
.bsp-form :where(.bsp-field--chips .acf-radio-list li:has(input:focus-visible) > label) {
  outline: 2px solid var(--bsp-accent);
  outline-offset: 2px;
}

/* ── dynamic choice render (rich-choice) — 설명 있는 radio/checkbox 를 카드 리스트로 ──────────
 * render-choice.php(ACFE acfe/render_choice)가 선택지를 $input + .bsp-choice(label+desc)로 렌더(opted-in 만). */
.bsp-form :where(.bsp-field--rich-choice .acf-radio-list),
.bsp-form :where(.bsp-field--rich-choice .acf-checkbox-list) { flex-direction: column; gap: 0.6rem; }
/* 카드 = 좌측 인디케이터(::before) + 라벨·설명(.bsp-choice). native 컨트롤은 reset 으로 absolute(흐름 밖). */
.bsp-form :where(.bsp-field--rich-choice li label) {
  display: flex; align-items: flex-start; gap: 0.85rem; width: 100%; padding: 0.85rem 1.1rem; cursor: pointer;
  border: 1px solid var(--bsp-rule-strong); border-radius: var(--bsp-radius); background: var(--bsp-paper);
}
/* 인디케이터 박스 — radio=원, checkbox=사각. flex 첫 아이템(static). */
.bsp-form :where(.bsp-field--rich-choice .acf-radio-list label)::before,
.bsp-form :where(.bsp-field--rich-choice .acf-checkbox-list label)::before {
  display: block; position: static; content: ""; flex: none; box-sizing: border-box; opacity: 1;
  width: 1.2rem; height: 1.2rem; margin: 0.12rem 0 0;
  border: 1.5px solid var(--bsp-rule-strong); background: var(--bsp-paper) no-repeat center / 0.78rem;
}
.bsp-form :where(.bsp-field--rich-choice .acf-radio-list label)::before { border-radius: 50%; }                       /* radio = 원 */
.bsp-form :where(.bsp-field--rich-choice .acf-checkbox-list label)::before { border-radius: calc(var(--bsp-radius) + 1px); } /* checkbox = 사각 */
.bsp-form :where(.bsp-field--rich-choice .acf-radio-list label)::after,
.bsp-form :where(.bsp-field--rich-choice .acf-checkbox-list label)::after { display: none; }    /* 체크 표식은 ::before 로 */
.bsp-form :where(.bsp-field--rich-choice .bsp-choice) { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.bsp-form :where(.bsp-field--rich-choice .bsp-choice-label) { font-weight: 600; font-size: 0.95rem; color: var(--bsp-ink); }
.bsp-form :where(.bsp-field--rich-choice .bsp-choice-desc) { font-size: 0.85rem; color: var(--bsp-ink-mute); line-height: 1.45; }
/* 선택 — 카드 ink 테두리 + radio 중앙 점 / checkbox ink 배경+흰 체크 */
.bsp-form :where(.bsp-field--rich-choice li:has(input:checked) > label),
.bsp-form :where(.bsp-field--rich-choice li > label.selected) { border-color: var(--bsp-ink); box-shadow: inset 0 0 0 1px var(--bsp-ink); }
.bsp-form :where(.bsp-field--rich-choice .acf-radio-list li:has(input:checked) label)::before,
.bsp-form :where(.bsp-field--rich-choice .acf-radio-list label.selected)::before {
  border-color: var(--bsp-ink); background-color: var(--bsp-ink); box-shadow: inset 0 0 0 0.28rem var(--bsp-paper);
}
.bsp-form :where(.bsp-field--rich-choice .acf-checkbox-list li:has(input:checked) label)::before,
.bsp-form :where(.bsp-field--rich-choice .acf-checkbox-list label.selected)::before {
  border-color: var(--bsp-ink); background-color: var(--bsp-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.bsp-form :where(.bsp-field--rich-choice li:has(input:focus-visible) > label) { outline: 2px solid var(--bsp-accent); outline-offset: 2px; }

/* ── 섹션 헤더 (type=message) ──────────────────────────────────────────────── */
/* 섹션(.bsp-field--section/-first) 행·라벨·설명 스타일링은 테마 소관(2026-06-13 초기화).
 * 행 간격/보더를 테마가 줄 때는 .acf-field 행 리셋(margin/padding !important)과 같은 속성이면
 * !important 필요(헤더 '예외 1'). 첫 섹션 식별은 .bsp-field--section-first 클래스. */

/* ── submit ───────────────────────────────────────────────────────────────── */
/* .acf-form-submit / .acf-button / input[type=submit] 스타일링은 테마 소관(2026-06-13 제거).
 * reset 의 button all:unset 이 베이스 — focus 가시성은 reset 의 :focus-visible 전역 룰이 담당. */
/* 제출 스피너 — acf-global 의 .acf-spinner(크기/배경gif/display 토글) 대체(acf-global dequeue 전제).
 * 플러그인 상대경로 gif 의존 제거 → CSS 회전 스피너. 비활성=none, JS 가 .is-active 부여 시 표시. */
.bsp-form :where(.acf-spinner) {
  display: none;
  box-sizing: border-box;
  width: 1.1rem; height: 1.1rem;
  vertical-align: middle;
  border: 2px solid color-mix(in srgb, var(--bsp-ink) 22%, transparent);
  border-top-color: var(--bsp-accent);
  border-radius: 50%;
  background: none;
  animation: bsp-spin 0.7s linear infinite;
}
.bsp-form :where(.acf-spinner.is-active) { display: inline-block; }
@keyframes bsp-spin { to { transform: rotate(360deg); } }

/* ── 검증 에러 / 성공 ─────────────────────────────────────────────────────── */
.bsp-form :where(.acf-error-message),
.bsp-form :where(.acf-notice.-error) {
  color: var(--bsp-accent);
  font-size: 0.85rem;
  margin-top: 0.3rem;
  background: none;
  border: 0;
  padding: 0;
}
.bsp-form :where(.acf-field.acf-error input),
.bsp-form :where(.acf-field.acf-error textarea),
.bsp-form :where(.acf-field.acf-error select) { border-color: var(--bsp-accent); }
.bsp-form-success {
  padding: 2.25rem 1.5rem;
  text-align: center;
  font-size: 1.05rem;
  color: var(--bsp-ink);
  border: 1px solid var(--bsp-rule-strong);
  border-radius: var(--bsp-radius);
  background: var(--bsp-paper-2);
}

/* ── 상태 ─────────────────────────────────────────────────────────────────── */
.bsp-form :where(.acf-input input:disabled),
.bsp-form :where(.acf-input textarea:disabled),
.bsp-form :where(.acf-input select:disabled) { background: var(--bsp-paper-2); color: var(--bsp-ink-mute); cursor: default; }
/* .acf-hidden — acf-global 의 전역 .acf-hidden{display:none!important} 대체(acf-global dequeue 전제).
 * ACF/ACFE 가 허니팟(.acf-field--validate-email)·조건부로직·숨김필드에 사용 → base 제거 후에도 반드시 유지.
 * forms.css 는 프론트 전용이라 전역(.bsp-form 비스코프) 적용해도 wp-admin 빌더엔 무영향. */
.acf-hidden { display: none !important; }

/* ── 모바일: 폭 컬럼 stack ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .bsp-form :where(.acf-fields > .acf-field),
  .bsp-form :where(.acf-fields > .acf-field[data-width="50"]),
  .bsp-form :where(.acf-fields > .acf-field[data-width="33"]),
  .bsp-form :where(.acf-fields > .acf-field[data-width="25"]) { width: 100% !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v2 기본 디자인 (2026-06) — main /quote 폼 기준 승격. 큼지막·진한 테두리·사용성.
 * 위 베이스 규칙을 같은 specificity 후순위로 오버라이드(같은 파일 뒤 = 우선).
 * 모든 스튜디오 폼 공통 적용. 값 커스터마이징은 --bsp-* 토큰으로.
 * ════════════════════════════════════════════════════════════════════════════ */

/* 인풋·셀렉트·텍스트영역 — 진한 테두리 + 큼지막 */
.bsp-form :where(.acf-input input[type="text"]),
.bsp-form :where(.acf-input input[type="email"]),
.bsp-form :where(.acf-input input[type="url"]),
.bsp-form :where(.acf-input input[type="tel"]),
.bsp-form :where(.acf-input input[type="number"]),
.bsp-form :where(.acf-input input[type="password"]),
.bsp-form :where(.acf-input textarea),
.bsp-form :where(.acf-input select) { border-width: 1.5px; border-color: var(--bsp-ink-faint); font-size: 1.05rem; }
.bsp-form :where(.acf-input textarea) { min-height: 6rem; max-height: 28rem; field-sizing: content; }
/* 달력 필드 — 표시 input 우측에 달력 아이콘(인라인 SVG, ink). 아이콘 자리만큼 우측 패딩 확보. */
.bsp-form :where(.acf-date-picker input.input),
.bsp-form :where(.acf-date-time-picker input.input) {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23141414' d='M24 2v22h-24v-22h3v1c0 1.103.897 2 2 2s2-.897 2-2v-1h10v1c0 1.103.897 2 2 2s2-.897 2-2v-1h3zm-2 6h-20v14h20v-14zm-2-7c0-.552-.447-1-1-1s-1 .448-1 1v2c0 .552.447 1 1 1s1-.448 1-1v-2zm-14 2c0 .552-.447 1-1 1s-1-.448-1-1v-2c0-.552.447-1 1-1s1 .448 1 1v2zm1 11.729l.855-.791c1 .484 1.635.852 2.76 1.654 2.113-2.399 3.511-3.616 6.106-5.231l.279.64c-2.141 1.869-3.709 3.949-5.967 7.999-1.393-1.64-2.322-2.686-4.033-4.271z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right 0.95rem;
  background-size: 1.05rem;
}
.bsp-form :where(.acf-input input:focus),
.bsp-form :where(.acf-input textarea:focus),
.bsp-form :where(.acf-input select:focus) { border-color: var(--bsp-accent); }

/* unit append(예: "개") — 입력과 통일 */
.bsp-form :where(.acf-input-append) { display: inline-flex; align-items: center; height: var(--input-height, 3.4rem); padding: 0 1rem; border: 1.5px solid var(--bsp-ink-faint); border-left: 0; border-radius: 0 var(--bsp-radius) var(--bsp-radius) 0; background: var(--bsp-paper-2); color: var(--bsp-ink-soft); font-size: 1.02rem; }

/* number — 필드 왼쪽 별도 가로 스테퍼(− +) (JS 가 .bsp-stepper 주입) */
.bsp-form :where(.acf-input.bsp-has-stepper) { display: flex; align-items: stretch; }
.bsp-form :where(.bsp-has-stepper .acf-input-wrap) { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; }
.bsp-form :where(.bsp-has-stepper .acf-input-append) { order: 2; float: none !important; }
.bsp-form :where(.bsp-stepper) { order: 0; flex: none; display: inline-flex; align-items: stretch; height: var(--input-height, 3.4rem); margin-right: 0.6rem; border: 1.5px solid var(--bsp-ink-faint); border-radius: var(--bsp-radius); overflow: hidden; }
.bsp-form :where(.bsp-stepper button) { width: 2.9rem; display: flex; align-items: center; justify-content: center; padding: 0 0 0.18em; border: 0; background: var(--bsp-paper-2); color: var(--bsp-ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.bsp-form :where(.bsp-stepper .bsp-step-down) { border-right: 1.5px solid var(--bsp-ink-faint); }
.bsp-form :where(.bsp-stepper button:active) { background: var(--bsp-accent-soft); color: var(--bsp-accent); }

/* 칩 — 큼지막 + 진한 테두리 + 선택 시 옅은 파랑(다크 반전 폐기) */
.bsp-form :where(.bsp-field--chips .acf-radio-list),
.bsp-form :where(.bsp-field--chips .acf-checkbox-list) { gap: 0.7rem 0.7rem; }
.bsp-form :where(.bsp-field--chips .acf-checkbox-list label),
.bsp-form :where(.bsp-field--chips .acf-radio-list label) { padding: 0.8rem 1.3rem; font-size: 1.02rem; border-width: 1.5px; border-color: var(--bsp-ink-faint); }
.bsp-form :where(.bsp-field--chips .acf-checkbox-list li:has(input:checked) > label),
.bsp-form :where(.bsp-field--chips .acf-checkbox-list label.selected),
.bsp-form :where(.bsp-field--chips .acf-radio-list li:has(input:checked) > label),
.bsp-form :where(.bsp-field--chips .acf-radio-list label.selected) { background: var(--bsp-accent-soft); border-color: var(--bsp-accent); color: var(--bsp-accent); }

/* 일반(비-칩) 라디오·체크박스 — 전체 행 클릭 카드 + 큰 표식 */
.bsp-form :where(.bsp-field--checkbox:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-checkbox-list),
.bsp-form :where(.bsp-field--radio:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-radio-list) { flex-direction: column; align-items: stretch; gap: 0.7rem; }
.bsp-form :where(.bsp-field--checkbox:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-checkbox-list label),
.bsp-form :where(.bsp-field--radio:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-radio-list label) { display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 1.05rem 1.3rem 1.05rem 3.4rem; border: 1.5px solid var(--bsp-ink-faint); border-radius: var(--bsp-radius); font-size: 1.06rem; }
.bsp-form :where(.bsp-field--checkbox:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-checkbox-list label)::before,
.bsp-form :where(.bsp-field--radio:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-radio-list label)::before { left: 1.3rem; top: 50%; transform: translateY(-50%); width: 1.4rem; height: 1.4rem; border-width: 2px; border-color: var(--bsp-ink-faint); }
.bsp-form :where(.bsp-field--checkbox:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-checkbox-list label)::after { left: 1.84rem; top: 50%; transform: translateY(-58%) rotate(45deg); width: 0.32rem; height: 0.58rem; border-width: 0 2.5px 2.5px 0; }
.bsp-form :where(.bsp-field--radio:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-radio-list label)::after { left: 1.75rem; top: 50%; transform: translateY(-50%); }
.bsp-form :where(.bsp-field--checkbox:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-checkbox-list li:has(input:checked) > label),
.bsp-form :where(.bsp-field--checkbox:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-checkbox-list label.selected),
.bsp-form :where(.bsp-field--radio:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-radio-list li:has(input:checked) > label),
.bsp-form :where(.bsp-field--radio:not(.bsp-field--chips):not(.bsp-field--rich-choice) .acf-radio-list label.selected) { border-color: var(--bsp-accent); background: var(--bsp-accent-soft); }


/* 연락처 intl-tel — 국가 박스 입력 보더 안쪽 인셋(삐짐 방지) + 좌측 모서리 라운드 */
.bsp-form .bsp-field--phone .iti .iti__flag-container { top: 1.5px; bottom: 1.5px; left: 1.5px; border-radius: calc(var(--bsp-radius) - 1.5px) 0 0 calc(var(--bsp-radius) - 1.5px) !important; }
.bsp-form .bsp-field--phone .iti .iti__selected-flag { height: 100%; border-radius: calc(var(--bsp-radius) - 1.5px) 0 0 calc(var(--bsp-radius) - 1.5px) !important; }
/* 국가 드롭다운 — flag-container 의 left 인셋(1.5px)만큼 되돌려 필드 좌측 정렬 */
.bsp-form .bsp-field--phone .iti .iti__country-list { left: -1.5px; }

/* 검증 에러 — 입력 아래쪽 + 옅은 레드(코발트 대신) */
.bsp-form :where(.acf-error-message) { order: 10; position: static; display: block; margin-top: 0.5rem; padding: 0; border: 0; background: none; color: var(--bsp-error); font-size: 0.86rem; }
.bsp-form :where(.acf-error-message)::before,
.bsp-form :where(.acf-error-message)::after { display: none; }
.bsp-form :where(.acf-notice.-error) { color: var(--bsp-error); }
.bsp-form :where(.acf-field.acf-error .acf-input) { display: flex; flex-direction: column; }
.bsp-form :where(.acf-field.acf-error input),
.bsp-form :where(.acf-field.acf-error textarea),
.bsp-form :where(.acf-field.acf-error select) { border-color: var(--bsp-error) !important; }

/* button_group(세그먼트) — 큼지막 */
.bsp-form :where(.acf-button-group label) { padding: 0.85rem 1.7rem; font-size: 1.02rem; font-weight: 600; }

/* true_false 단일 체크(예: 약관 동의) — 체크박스 영역 크게 (토글 변형은 위 .bsp-field--toggle 가 우선) */
.bsp-form :where(.acf-true-false label) { font-size: 1.04rem; padding-left: 2.2rem; align-items: center; }
.bsp-form :where(.acf-true-false label)::before { width: 1.5rem; height: 1.5rem; top: 50%; transform: translateY(-50%); border-width: 2px; border-color: var(--bsp-ink-faint); }
.bsp-form :where(.acf-true-false label)::after { left: 0.54rem; top: 50%; transform: translateY(-58%) rotate(45deg); width: 0.38rem; height: 0.68rem; border-width: 0 2.5px 2.5px 0; }

/* ── 변형 재단언 — 평탄화(순서=승리) 이후, 변형(variant) 룰이 앞쪽 일반 v2 룰에 지지 않도록
 * 파일 끝에서 재단언. (평탄화 전엔 변형 셀렉터의 높은 특이도가 담당하던 우선권의 순서 복원) ── */
/* 토글 변형 — 라벨 들여쓰기 없음(스위치 자체가 표식). v2 .acf-true-false 라벨의 큰 체크박스용 padding 무효. */
.bsp-form :where(.bsp-field--toggle .acf-true-false label) { padding-left: 0; gap: 0.6rem; }
/* phone(intl-tel) 입력 우측 패딩 — acfe-pro-input css(프론트 잔존 벤더, forms.css 뒤에 로드)가
 * 6px 로 줄이므로 벤더 경합 규칙(고특이도)으로 재단언. */
.bsp-form .bsp-field--phone .iti input.input { padding-right: 0.95rem; }
/* true_false 체크 상태 표식 보더 — v2 847(상시 ink-faint 보더)이 뒤에 있어 체크 시 accent 를 재단언. */
.bsp-form :where(.acf-true-false label:has(input:checked))::before { border-color: var(--bsp-accent); }