/* ============================================================
   폼 블록 편집 패널 (2026-09-03 개편 — utils/form_block_ui.js renderFormBlockEditor 와 클래스명 계약)
   랜딩 편집모달(landing-page-editor)과 폼 템플릿 편집기(form-design)가 같은 마크업을 쓴다.
   구조 = 탭 4개 [필드 | 문구 | 디자인 | 챗봇] → 각 탭은 카드(접힘) 목록.
   기존 .lpe-seg / .lpe-chip / .lpe-pickbtn / details.lpe-badv / .lpe-sbs-av 는 _lp_editor_layout.css 의 것을 그대로 쓴다.
   ============================================================ */
.fbe { font-size: 12px; color: #475569; }
.fbe-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fbe-top .tpl { font-size: 11px; color: #6b7280; }
.fbe-top .tpl strong { color: #374151; }

/* 탭 */
.fbe-tabs { display: flex; gap: 2px; border-bottom: 1px solid #e4edf5; margin-bottom: 10px; }
.fbe-tab { border: 1px solid transparent; border-bottom: none; background: transparent; padding: 7px 12px; font-size: 12px; font-weight: 600; color: #64748b; border-radius: 8px 8px 0 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; position: relative; top: 1px; }
.fbe-tab:hover { color: #3e6187; }
.fbe-tab.on { background: #fff; color: #3e6187; border-color: #e4edf5; }
.fbe-tab .n { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; color: #94a3b8; font-weight: 500; }
.fbe-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: #3e6187; display: inline-block; }
.fbe-pane { display: none; }
.fbe-pane.on { display: block; }

/* 공통 행·컨트롤 */
.fbe-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fbe-row + .fbe-row { margin-top: 7px; }
.fbe-lab { font-size: 11.5px; color: #6b7280; white-space: nowrap; flex-shrink: 0; }
.fbe-in { padding: 6px 9px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12px; background: #fff; color: #111827; font-family: inherit; min-width: 0; }
.fbe-in.grow { flex: 1; min-width: 120px; }
.fbe-in.sm { width: 110px; }
.fbe-in:focus, .fbe-sel:focus, .fbe-ta:focus { outline: none; border-color: #3e6187; box-shadow: 0 0 0 3px #3e618722; }
.fbe-sel { padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 11.5px; background: #fff; color: #111827; font-family: inherit; }
.fbe-col { width: 26px; height: 24px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; background: #fff; padding: 1px; flex-shrink: 0; }
.fbe-ta { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12px; font-family: inherit; line-height: 1.5; resize: vertical; color: #111827; background: #fff; }
.fbe-right { margin-left: auto; }
.fbe-muted { font-size: 11px; color: #94a3b8; line-height: 1.5; }
.fbe-hint { font-size: 11px; color: #0B5D53; background: #E4F2EF; border-radius: 7px; padding: 6px 9px; margin-top: 8px; line-height: 1.5; }

/* 스위치(숨김 checkbox) — 필수·인사 영상 등 on/off */
.fbe-sw { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7280; cursor: pointer; white-space: nowrap; user-select: none; }
.fbe-sw input { display: none; }
.fbe-sw i { width: 26px; height: 15px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background 0.15s; flex-shrink: 0; }
.fbe-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.fbe-sw:has(input:checked) i { background: #3e6187; }
.fbe-sw:has(input:checked) i::after { left: 13px; }
.fbe-sw:has(input:checked) { color: #3e6187; font-weight: 600; }

/* 카드(필드·문구 공용) */
.fbe-card { border: 1px solid #dbe6f0; border-radius: 10px; background: #fff; margin-bottom: 6px; transition: border-color 0.15s, box-shadow 0.15s; }
.fbe-card.open { border-color: #3e6187; box-shadow: 0 0 0 2px #3e618722; }
.fbe-chd { display: flex; align-items: center; gap: 7px; padding: 7px 9px; min-width: 0; }
.fbe-cbd { display: none; border-top: 1px dashed #e4edf5; padding: 9px 10px 11px; }
.fbe-card.open .fbe-cbd { display: block; }
.fbe-grip { color: #b6c6d5; cursor: grab; font-size: 13px; padding: 0 2px; flex-shrink: 0; touch-action: none; user-select: none; }
.fbe-grip:hover { color: #3e6187; }
.fbe-type { font-size: 10px; font-weight: 700; color: #3e6187; background: #eef4f9; border: 1px solid #dbe6f0; border-radius: 6px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; }
.fbe-type.zone { color: #8a6a1a; background: #F6EEDB; border-color: #ecd9a8; }
.fbe-flabel { flex: 1; min-width: 80px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: #111827; background: transparent; font-family: inherit; }
.fbe-flabel:hover { border-color: #e4edf5; background: #fbfdfe; }
.fbe-flabel:focus { outline: none; border-color: #3e6187; background: #fff; box-shadow: 0 0 0 3px #3e618722; font-weight: 500; }
.fbe-lock { color: #3e6187; display: inline-flex; flex-shrink: 0; }
.fbe-ibtn { width: 24px; height: 24px; border: 1px solid #dbe6f0; background: #fff; border-radius: 6px; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; font-family: inherit; font-size: 13px; line-height: 1; }
.fbe-ibtn:hover { border-color: #3e6187; color: #3e6187; background: #f3f7fb; }
.fbe-ibtn.del { color: #dc2626; border-color: #fecaca; }
.fbe-ibtn.del:hover { background: #fef2f2; border-color: #dc2626; }
.fbe-ibtn:disabled { opacity: 0.35; cursor: default; }
.fbe-card.open .fbe-ibtn.more { background: #3e6187; color: #fff; border-color: #3e6187; }
.fbe-summary { font-size: 10.5px; color: #94a3b8; border: 1px solid #e4edf5; border-radius: 999px; padding: 1px 8px; white-space: nowrap; flex-shrink: 0; }

/* 필드 추가 */
.fbe-addrow { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.fbe-addbtn { border: 1px dashed #b6c6d5; border-radius: 8px; padding: 4px 10px; font-size: 11.5px; color: #475569; background: #fff; cursor: pointer; font-family: inherit; }
.fbe-addbtn:hover { border-color: #3e6187; color: #3e6187; background: #f3f7fb; }
.fbe-addbtn:disabled { opacity: 0.4; cursor: default; }
.fbe-empty { padding: 16px; text-align: center; color: #94a3b8; font-size: 11.5px; background: #fbfdfe; border: 1px dashed #dbe6f0; border-radius: 10px; }

/* 선택항목 기본값 칩 */
.fbe-defs { display: flex; gap: 5px; flex-wrap: wrap; }
.fbe-defs .lpe-chip { padding: 3px 9px; font-size: 11px; font-weight: 500; }
.fbe-defs .lpe-chip:has(input:checked)::before { content: "★ "; }

/* 문구 카드 텍스트 */
.fbe-ntext { flex: 1; min-width: 120px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; color: #111827; background: transparent; font-family: inherit; resize: none; line-height: 1.45; min-height: 26px; }
.fbe-ntext:hover { border-color: #e4edf5; background: #fbfdfe; }
.fbe-ntext:focus { outline: none; border-color: #3e6187; background: #fff; box-shadow: 0 0 0 3px #3e618722; }
.fbe-mv { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.fbe-mv button { width: 16px; height: 11px; border: none; background: transparent; color: #b6c6d5; cursor: pointer; padding: 0; font-size: 8px; line-height: 1; }
.fbe-mv button:hover { color: #3e6187; }
.fbe-mv button:disabled { opacity: 0.25; cursor: default; }

/* 디자인 — 프리셋 카드 */
.fbe-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
.fbe-pcard { border: 1px solid #dbe6f0; border-radius: 9px; padding: 6px; cursor: pointer; background: #fff; font-family: inherit; text-align: center; }
.fbe-pcard:hover { border-color: #3e6187; }
.fbe-pcard.on { border-color: #3e6187; box-shadow: 0 0 0 2px #3e618722; }
.fbe-psw { display: block; height: 40px; border-radius: 6px; margin-bottom: 5px; position: relative; overflow: hidden; border: 1px solid #eef2f6; }
.fbe-psw::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 5px; border-radius: 2px; background: rgba(0, 0, 0, 0.16); }
.fbe-psw i { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 11px; border-radius: 3px; display: block; }
.fbe-pname { font-size: 10.5px; font-weight: 600; color: #374151; }
.fbe-grp { border-top: 1px dashed #e8eff5; padding-top: 7px; margin-top: 7px; }
.fbe-grp:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.fbe-grp-t { font-size: 10.5px; font-weight: 700; color: #8aa2b8; letter-spacing: 0.4px; margin-bottom: 6px; }
.fbe-krow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 11px; color: #6b7280; }
.fbe-krow > span { display: inline-flex; align-items: center; gap: 4px; }

/* 챗봇 아바타 줄 */
.fbe-avs { display: inline-flex; gap: 5px; align-items: center; }
.fbe-dim { opacity: 0.45; pointer-events: none; }
.fbe-foot { margin-top: 10px; }
.fbe-muted.fbe-foot svg { vertical-align: -2px; margin-right: 2px; }

/* 셀프디자인 (2단계) */
.fbe-ta.fbe-css { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.55; background: #fbfdfe; }
.fbe-cls { margin: 0; padding-left: 16px; font-size: 11.5px; color: #475569; line-height: 1.6; columns: 2; column-gap: 18px; }
.fbe-cls code, .fbe-muted code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; background: #eef4f9; color: #3e6187; padding: 0 4px; border-radius: 4px; }
@container (max-width: 768px) { .fbe-cls { columns: 1; } }

/* 클릭 편집 (3단계) — 미리보기에서 누른 조각의 블록 카드를 잠깐 밝힌다 */
@keyframes lpe-blk-flash { 0% { box-shadow: 0 0 0 0 #3e618766; } 100% { box-shadow: 0 0 0 10px #3e618700; } }
.lpe-blk.lpe-blk-flash { animation: lpe-blk-flash 1.2s ease-out 1; border-color: #3e6187; }
@media (prefers-reduced-motion: reduce) { .lpe-blk.lpe-blk-flash { animation: none; } }