/*
 * Form.io 빌더 다크 테마.
 *
 * <왜 파일을 나눴나>
 * 이 CSS 는 **우리 것이 아닌 클래스 이름**(Bootstrap 5 + Form.io 내부)에 기대고 있다.
 * @formio/js 를 판올림하면 여기가 깨질 수 있고, 그때 봐야 할 곳이 한 파일이어야 한다.
 * app.css 에 섞으면 "우리 규칙"과 "남의 규칙"이 구분되지 않는다.
 *
 * <왜 다크로 갔나 — 이전 판단을 뒤집었다>
 * 원래는 "캔버스만 밝게 되돌린다(가장 얕은 개입)"였다. 그런데 실제 화면에서
 * 다크 셸 한가운데 흰 판이 박혀 앱이 두 개로 갈라져 보였다. 빌더는 **저작 도구**이고
 * 도구는 도구의 색을 입는 게 맞다. 대신 **미리보기는 밝은 종이 그대로 둔다** —
 * 거기는 최종 사용자가 볼 화면을 흉내 내는 자리라 도구 색을 입히면 거짓말이 된다.
 *
 * <범위>
 *   #formio-builder-root  … 빌더(팔레트 + 캔버스)
 *   body.fio-dark .formio-dialog … 컴포넌트 편집 대화상자(body 로 이동하므로 따로 잡는다)
 * 미리보기(#formio-preview-root)는 **일부러 건드리지 않는다.**
 */

/* ══════════════════════════════════════════════════════════════════════════
 *  0. Bootstrap shim — 🔴 이게 레이아웃이 무너지던 진짜 원인이다.
 *
 *  `formio.full.min.css` 에는 **Bootstrap 이 들어 있지 않다.** 그런데 빌더 마크업은
 *  Bootstrap 클래스를 그대로 쓴다. 실측(생성된 DOM 전수 조사) 결과 —
 *  참조되지만 정의가 없는 클래스 **25종**:
 *      .row .col-md-2 .col-md-10 .col-sm-3/9 .col-xs-4/8   ← 2단 배치가 안 선다
 *      .m-0 .mb-0 .mt-0 .p-0 .p-2 .mb-2 .w-100 .gap-1 .d-grid
 *      .btn-sm .btn-md .btn-default .btn-primary .btn-secondary .btn-danger
 *      .accordion .card-header .show
 *
 *  증상이 이렇게 나왔다:
 *   · `h5.mb-0.mt-0` 이 무효라 브라우저 기본 마진(≈22px×2)이 살아 → 팔레트 그룹이
 *     빈 채로 65px 씩 먹었다("접힌 그룹이 이상하게 크다").
 *   · `.col-*` 이 무효라 flex 항목이 내용 크기로 쪼그라들어 → 캔버스가 200px 로 좁았다.
 *
 *  <왜 Bootstrap 전체를 넣지 않나>
 *  Bootstrap 은 `.btn` `.card` `.row` 같은 흔한 이름을 전역으로 정의한다. 우리 셸도
 *  같은 이름을 쓰므로(app.css `.btn` `.card` `.row`) 통째로 들이면 **셸이 끌려간다.**
 *  그래서 실제로 쓰이는 것만, 빌더/대화상자 안으로 **범위를 가둬** 심는다.
 * ══════════════════════════════════════════════════════════════════════════ */

#formio-builder-root .row,
body.fio-dark .formio-dialog .row { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }

/* 12분할을 흉내 내는 대신 두 칸을 직접 잡는다 — 판올림에도 이쪽이 덜 깨진다. */
#formio-builder-root .formcomponents { flex: 0 0 210px; max-width: 210px; padding: 0 14px 0 0; }
#formio-builder-root .formarea { flex: 1 1 0; min-width: 0; padding: 0; }
@media (max-width: 900px) {
  #formio-builder-root .formcomponents { flex-basis: 160px; max-width: 160px; }
}

/* 대화상자의 설정/미리보기 2단. 이름이 무엇이든 반반으로 선다. */
body.fio-dark .formio-dialog [class*='col-'],
body.fio-dark .formio-dialog .col { flex: 1 1 0; min-width: 0; padding: 0 8px; }

/* 여백·표시 유틸 — 이름 그대로의 뜻만 준다. */
#formio-builder-root .m-0, body.fio-dark .formio-dialog .m-0 { margin: 0 !important; }
#formio-builder-root .mb-0, body.fio-dark .formio-dialog .mb-0 { margin-bottom: 0 !important; }
#formio-builder-root .mt-0, body.fio-dark .formio-dialog .mt-0 { margin-top: 0 !important; }
#formio-builder-root .mb-2, body.fio-dark .formio-dialog .mb-2 { margin-bottom: 0.5rem; }
#formio-builder-root .p-0, body.fio-dark .formio-dialog .p-0 { padding: 0 !important; }
#formio-builder-root .p-2, body.fio-dark .formio-dialog .p-2 { padding: 0.5rem; }
#formio-builder-root .w-100, body.fio-dark .formio-dialog .w-100 { width: 100%; }
#formio-builder-root .d-grid, body.fio-dark .formio-dialog .d-grid { display: grid; }
#formio-builder-root .d-flex, body.fio-dark .formio-dialog .d-flex { display: flex; }
#formio-builder-root .d-none, body.fio-dark .formio-dialog .d-none { display: none !important; }
#formio-builder-root .gap-1, body.fio-dark .formio-dialog .gap-1 { gap: 0.3rem; }

/* 제목 태그의 브라우저 기본 마진 — 팔레트 그룹이 부풀던 원인. */
#formio-builder-root h1, #formio-builder-root h2, #formio-builder-root h3,
#formio-builder-root h4, #formio-builder-root h5, #formio-builder-root h6,
body.fio-dark .formio-dialog h1, body.fio-dark .formio-dialog h2,
body.fio-dark .formio-dialog h3, body.fio-dark .formio-dialog h4,
body.fio-dark .formio-dialog h5, body.fio-dark .formio-dialog h6 { margin: 0; }

#formio-builder-root .btn-sm, body.fio-dark .formio-dialog .btn-sm { padding: 5px 10px; font-size: 12px; }
#formio-builder-root .btn-xxs, body.fio-dark .formio-dialog .btn-xxs { padding: 3px 6px; font-size: 10.5px; line-height: 1; }

/*
 * 🔴 색이 아니라 **뼈대**에 해당하는 것 — 그래서 다크/라이트 양쪽에 다 적용한다.
 *
 * Bootstrap 의 `.form-control{width:100%}` 이 없어서 입력이 브라우저 기본 폭(≈170px)에
 * 머물렀다. 빌더 캔버스뿐 아니라 **미리보기(밝은 종이)에서도** 같은 증상이 났다 —
 * 미리보기가 실제와 달라 보이면 미리보기의 의미가 없다.
 * `.formio-form` 안으로만 범위를 두므로 우리 셸에는 닿지 않는다.
 */
.formio-form .form-control,
.formio-form .form-select,
.formio-form textarea,
.formio-form select { width: 100%; }
.formio-form .formio-component { margin-bottom: 14px; }
.formio-form .formio-component:last-child { margin-bottom: 0; }
.formio-form .form-check { display: flex; align-items: center; gap: 7px; }
.formio-form .form-check-input { margin: 0; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
 *  1. 토큰 — Bootstrap 변수를 우리 팔레트로 갈아 끼운다.
 *     개별 규칙을 덮어쓰는 것보다 이쪽이 훨씬 적게 깨진다.
 * ══════════════════════════════════════════════════════════════════════════ */

#formio-builder-root,
body.fio-dark .formio-dialog {
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--text);
  --bs-border-color: var(--line);
  --bs-secondary-bg: var(--surface-3);
  --bs-tertiary-bg: var(--surface-2);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-2);
  --bs-heading-color: var(--text);
  --bs-link-color: var(--accent-hi);
  --bs-link-hover-color: #8db9ff;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════════
 *  2. 빌더 뼈대 — 팔레트 | 캔버스 2단
 * ══════════════════════════════════════════════════════════════════════════ */

#formio-builder-root { background: transparent; }

#formio-builder-root .row { margin: 0; }
#formio-builder-root .formcomponents { padding: 0 14px 0 0; }
#formio-builder-root .formarea { padding: 0; }

/* 팔레트 검색 */
#formio-builder-root .builder-sidebar_search {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  font-size: 13px;
  margin-bottom: 10px;
}
#formio-builder-root .builder-sidebar_search::placeholder { color: var(--text-dim); }
#formio-builder-root .builder-sidebar_search:focus {
  outline: none; border-color: var(--accent); background: var(--surface-3);
}

/* 팔레트 그룹 — 원래는 큰 빈 카드가 세로로 늘어져 공간만 먹었다. */
#formio-builder-root .formcomponents .card,
#formio-builder-root .builder-sidebar .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: none;
}
#formio-builder-root .card-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  padding: 0;
}
#formio-builder-root .builder-group-button {
  width: 100%; text-align: left;
  background: none; border: 0;
  color: var(--text);
  padding: 10px 13px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer;
}
#formio-builder-root .builder-group-button:hover { background: var(--surface-3); }
#formio-builder-root .card-body { background: transparent; padding: 9px; }

/* 끌어다 놓는 컴포넌트 조각 */
#formio-builder-root .formcomponent {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-2);
  padding: 7px 10px;
  margin: 0 0 6px;
  font-size: 12.5px;
  cursor: grab;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
#formio-builder-root .formcomponent:hover {
  background: var(--surface-3); border-color: var(--accent); color: var(--text);
}
#formio-builder-root .formcomponent:active { cursor: grabbing; }
#formio-builder-root .formcomponent i { opacity: 0.65; }
.formcomponent.gu-mirror {
  background: var(--surface-3); border: 1px solid var(--accent); color: var(--text);
  border-radius: var(--r-sm); padding: 7px 10px; font-size: 12.5px;
  box-shadow: var(--shadow-2); list-style: none;
}

/* 캔버스 — 폼이 놓이는 자리. 종이가 아니라 "작업대"로 보이게 한다. */
#formio-builder-root .formio-builder-form,
#formio-builder-root .drag-container {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  min-height: 320px;
}
#formio-builder-root .drag-container.formio-builder-form { margin: 0; }
#formio-builder-root .drag-container:hover { border-color: var(--line); }

/* 놓을 자리 표시 */
#formio-builder-root .formio-drag-container-placeholder,
#formio-builder-root .builder-placeholder {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.015);
  padding: 26px; text-align: center; font-size: 12.5px;
}
#formio-builder-root .drag-and-drop-alert {
  background: var(--accent-soft) !important;
  border: 1.5px dashed var(--accent) !important;
  color: var(--accent-hi) !important;
  border-radius: var(--r-sm);
}

/* 배치된 컴포넌트 */
#formio-builder-root .builder-component { position: relative; }
#formio-builder-root .builder-component > .component-btn-group {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
#formio-builder-root .component-btn-group .btn {
  background: transparent; border: 0; color: var(--text-2);
  padding: 4px 8px; font-size: 11px; border-radius: 0;
}
#formio-builder-root .component-btn-group .btn:hover { background: var(--surface); color: var(--text); }
#formio-builder-root .component-btn-group .component-settings-button-remove:hover { background: var(--danger); color: #2a0b0b; }
#formio-builder-root .builder-component:hover > .formio-component {
  outline: 1px solid rgba(74, 144, 255, 0.35); outline-offset: 3px; border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  3. 폼 요소 — 빌더 캔버스와 편집 대화상자가 함께 쓴다.
 * ══════════════════════════════════════════════════════════════════════════ */

#formio-builder-root .form-control,
#formio-builder-root .form-select,
body.fio-dark .formio-dialog .form-control,
body.fio-dark .formio-dialog .form-select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  padding: 7px 10px;
  box-shadow: none;
}
#formio-builder-root .form-control::placeholder,
body.fio-dark .formio-dialog .form-control::placeholder { color: var(--text-dim); }
#formio-builder-root .form-control:focus,
#formio-builder-root .form-select:focus,
body.fio-dark .formio-dialog .form-control:focus,
body.fio-dark .formio-dialog .form-select:focus {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#formio-builder-root .form-control:disabled,
#formio-builder-root .form-control[readonly] { background: var(--surface); color: var(--text-dim); }

#formio-builder-root label,
#formio-builder-root .col-form-label,
#formio-builder-root .form-label,
body.fio-dark .formio-dialog label,
body.fio-dark .formio-dialog .col-form-label {
  color: var(--text-2); font-size: 12.5px; font-weight: 500; margin-bottom: 5px;
}
#formio-builder-root .field-required::after,
body.fio-dark .formio-dialog .field-required::after { color: var(--danger); }

#formio-builder-root .form-text,
#formio-builder-root .text-muted,
body.fio-dark .formio-dialog .form-text,
body.fio-dark .formio-dialog .text-muted { color: var(--text-dim) !important; font-size: 11.5px; }

#formio-builder-root .form-check-input,
body.fio-dark .formio-dialog .form-check-input {
  background-color: var(--surface-2); border-color: var(--line);
}
#formio-builder-root .form-check-input:checked,
body.fio-dark .formio-dialog .form-check-input:checked {
  background-color: var(--accent); border-color: var(--accent);
}

#formio-builder-root .input-group-text,
body.fio-dark .formio-dialog .input-group-text {
  background: var(--surface-3); border-color: var(--line); color: var(--text-2);
}

/* 버튼 */
#formio-builder-root .btn,
body.fio-dark .formio-dialog .btn {
  border-radius: var(--r-sm); font-size: 13px; font-weight: 500; padding: 7px 13px;
  box-shadow: none;
}
#formio-builder-root .btn-primary,
body.fio-dark .formio-dialog .btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
#formio-builder-root .btn-primary:hover,
body.fio-dark .formio-dialog .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
#formio-builder-root .btn-secondary,
#formio-builder-root .btn-light,
#formio-builder-root .btn-default,
body.fio-dark .formio-dialog .btn-secondary,
body.fio-dark .formio-dialog .btn-light,
body.fio-dark .formio-dialog .btn-default {
  background: var(--surface-3); border-color: var(--line); color: var(--text);
}
#formio-builder-root .btn-secondary:hover,
body.fio-dark .formio-dialog .btn-secondary:hover { background: #232838; border-color: #333b50; color: var(--text); }
#formio-builder-root .btn-danger,
body.fio-dark .formio-dialog .btn-danger { background: var(--danger); border-color: var(--danger); color: #2a0b0b; }
#formio-builder-root .btn-success,
body.fio-dark .formio-dialog .btn-success { background: var(--ok); border-color: var(--ok); color: #06281a; }
#formio-builder-root .btn-warning,
body.fio-dark .formio-dialog .btn-warning { background: var(--warn); border-color: var(--warn); color: #2b1c02; }

/* 탭 (편집 대화상자의 Display/Data/Validation…)
   🔴 `.nav`/`.nav-tabs` 도 Bootstrap 이라 정의가 없다 — 없으면 탭이 **세로로 쌓인다**(실측). */
body.fio-dark .formio-dialog .nav,
body.fio-dark .formio-dialog .nav-tabs,
#formio-builder-root .nav,
#formio-builder-root .nav-tabs {
  display: flex; flex-wrap: wrap; align-items: stretch;
  list-style: none; margin: 0 0 14px; padding: 0;
}
body.fio-dark .formio-dialog .nav-item,
#formio-builder-root .nav-item { margin: 0; }
body.fio-dark .formio-dialog .nav-tabs,
#formio-builder-root .nav-tabs { border-bottom: 1px solid var(--line); gap: 2px; }
body.fio-dark .formio-dialog .nav-tabs .nav-link,
#formio-builder-root .nav-tabs .nav-link {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-size: 12.5px; padding: 8px 13px; border-radius: 0;
}
body.fio-dark .formio-dialog .nav-tabs .nav-link:hover,
#formio-builder-root .nav-tabs .nav-link:hover { color: var(--text); background: var(--surface-2); }
body.fio-dark .formio-dialog .nav-tabs .nav-link.active,
#formio-builder-root .nav-tabs .nav-link.active {
  background: transparent; color: var(--accent-hi); border-bottom-color: var(--accent); font-weight: 600;
}

/* 표 · 목록 */
#formio-builder-root .table,
body.fio-dark .formio-dialog .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line-soft);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-hover-color: var(--text);
}
#formio-builder-root .list-group-item,
body.fio-dark .formio-dialog .list-group-item {
  background: var(--surface-2); border-color: var(--line); color: var(--text);
}

#formio-builder-root .alert,
body.fio-dark .formio-dialog .alert {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
  border-radius: var(--r-sm); font-size: 12.5px;
}
#formio-builder-root .alert-danger,
body.fio-dark .formio-dialog .alert-danger {
  background: var(--danger-soft); border-color: rgba(255, 107, 107, 0.35); color: #ffcfcf;
}
#formio-builder-root .formio-errors .error,
body.fio-dark .formio-dialog .formio-errors .error { color: #ff9c9c; font-size: 11.5px; }

/* choices.js 드롭다운 — 빌더 설정 곳곳에 쓰인다. 여기를 빼면 흰 상자가 튀어나온다. */
#formio-builder-root .choices__inner,
body.fio-dark .formio-dialog .choices__inner {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-sm); font-size: 13px; min-height: 36px; padding: 5px 8px;
}
#formio-builder-root .choices__list--dropdown,
body.fio-dark .formio-dialog .choices__list--dropdown,
body.fio-dark .choices__list--dropdown {
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-sm); box-shadow: var(--shadow-2);
}
body.fio-dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
#formio-builder-root .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--accent-soft); color: var(--accent-hi);
}
#formio-builder-root .choices__item--choice,
body.fio-dark .formio-dialog .choices__item--choice { font-size: 13px; }
#formio-builder-root .choices__list--multiple .choices__item,
body.fio-dark .formio-dialog .choices__list--multiple .choices__item {
  background: var(--accent); border-color: var(--accent); font-size: 12px; border-radius: 999px;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  4. 컴포넌트 편집 대화상자
 *
 *  🔴 배경 클릭으로 닫히지 않게 하는 것은 CSS 로 못 한다 —
 *     src/formio-boot.ts 의 캡처 리스너가 막는다. 여기서는 모양만 맡는다.
 * ══════════════════════════════════════════════════════════════════════════ */

body.fio-dark .formio-dialog-overlay {
  background: rgba(5, 7, 12, 0.72);
  backdrop-filter: blur(3px);
  opacity: 1;
}
body.fio-dark .formio-dialog .formio-dialog-content {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 20px 22px;
}
body.fio-dark .formio-dialog-close {
  color: var(--text-dim);
}
body.fio-dark .formio-dialog-close:hover { color: var(--text); }
body.fio-dark .formio-dialog-close::before {
  background: var(--surface-3);
  border-radius: var(--r-sm);
}

/* 좌: 설정 / 우: 미리보기 — 원래는 오른쪽이 통째로 빈 흰 판이었다. */
body.fio-dark .formio-dialog .component-edit-container { background: transparent; padding: 0; }
body.fio-dark .formio-dialog .component-edit-container > .row { gap: 0; }
body.fio-dark .formio-dialog [ref='editForm'] { padding-right: 14px; }
body.fio-dark .formio-dialog .preview-panel,
body.fio-dark .formio-dialog [ref='preview'] {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
}
body.fio-dark .formio-dialog .component-settings-button,
body.fio-dark .formio-dialog [ref='saveButton'],
body.fio-dark .formio-dialog [ref='cancelButton'],
body.fio-dark .formio-dialog [ref='removeButton'] { margin-right: 6px; }

/*
 * 대화상자 안 코드 편집기(ACE).
 *
 * 처음엔 "자체 테마가 있으니 틀만 맞추고 내부는 두자"고 했는데, 실제 화면에서 Description·
 * Tooltip 자리에 **흰 판 두 개**가 박혀 대화상자에서 가장 눈에 띄는 흠이 됐다.
 * 그래서 바탕·거터·커서만 뒤집는다 — 문법 강조 색(토큰)은 건드리지 않으므로
 * ACE 테마가 바뀌어도 강조는 살아 있다.
 */
body.fio-dark .formio-dialog .ace_editor {
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
body.fio-dark .formio-dialog .ace_editor,
body.fio-dark .formio-dialog .ace_editor .ace_scroller,
body.fio-dark .formio-dialog .ace_editor .ace_content { background: var(--surface-2); color: var(--text); }
body.fio-dark .formio-dialog .ace_editor .ace_gutter {
  background: var(--surface-3); color: var(--text-dim); border-right: 1px solid var(--line);
}
body.fio-dark .formio-dialog .ace_editor .ace_gutter-active-line { background: rgba(255, 255, 255, 0.04); }
body.fio-dark .formio-dialog .ace_editor .ace_active-line { background: rgba(255, 255, 255, 0.03); }
body.fio-dark .formio-dialog .ace_editor .ace_cursor { color: var(--text); }
body.fio-dark .formio-dialog .ace_editor .ace_placeholder { color: var(--text-dim); }

/* 체크박스 — 다크 배경에서 브라우저 기본 사각형이 흰 점처럼 튄다. */
body.fio-dark .formio-dialog input[type='checkbox'],
body.fio-dark .formio-dialog input[type='radio'],
#formio-builder-root input[type='checkbox'],
#formio-builder-root input[type='radio'] { accent-color: var(--accent); }

/* 링크 */
#formio-builder-root a,
body.fio-dark .formio-dialog a { color: var(--accent-hi); }
#formio-builder-root a:hover,
body.fio-dark .formio-dialog a:hover { color: #8db9ff; }

/* 읽기 전용(발행본) — 만질 수 없다는 것이 색으로 보여야 한다. */
#formio-builder-root.is-readonly { opacity: 0.92; }
#formio-builder-root.is-readonly .formio-builder-form { border-style: dashed; }