/* 랜딩 HTML 블록 — 코드 편집 모달 (2026-09-02, .lpce-*)
   A-4 액센트형: 차콜 차콜블루 토큰 축 · 밴드 그라디언트 · 제목 좌측 액센트 바 · 본문 surface-2 */
.lpce { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--ord-surface-2); min-width: 0; }
.lpce-band { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: linear-gradient(180deg, var(--ord-band), var(--ord-panel)); border: 1px solid var(--ord-line); border-radius: 10px; }
.lpce-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ord-text); padding-left: 10px; border-left: 4px solid var(--ord-accent); min-width: 0; }
.lpce-lang { font-size: 10px; font-weight: 800; color: var(--ord-on-solid); background: var(--ord-head-bg); padding: 2px 7px; border-radius: 6px; letter-spacing: 0.5px; flex-shrink: 0; }
.lpce-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--ord-text-2); }
.lpce-tool { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; white-space: nowrap; }
.lpce-tool > input[type="checkbox"] { margin: 0; accent-color: var(--ord-accent); }
.lpce-stat { color: var(--ord-text-4); font-size: 11px; white-space: nowrap; }

/* 코드 | 스플리터 | 미리보기 — --left 클램프는 CSS 담당(편집탭 .lpe-bottom 과 같은 이유). 247 = 우측 최소 240 + 스플리터 7 */
.lpce-body { display: grid; grid-template-columns: clamp(320px, var(--left, 58%), calc(100% - 247px)) 7px minmax(0, 1fr); column-gap: 4px; height: min(68vh, 780px); min-height: 320px; min-width: 0; }
.lpce-body.lpce-no-preview { grid-template-columns: minmax(0, 1fr); }
.lpce-body.lpce-no-preview .lpce-split, .lpce-body.lpce-no-preview .lpce-preview { display: none; }
.lpce-body.lpce-dragging { user-select: none; cursor: col-resize; }
.lpce-body.lpce-dragging iframe { pointer-events: none; }
.lpce-split { cursor: col-resize; background: var(--ord-band); border-radius: 4px; position: relative; touch-action: none; }
.lpce-split:hover, .lpce-split.on { background: var(--ord-accent); }
.lpce-split::after { content: "\22EE"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ord-text-4); font-size: 13px; }
.lpce-split:hover::after, .lpce-split.on::after { color: var(--ord-on-solid); }
/* 최대화(rmm-size-full) — 모달이 100vh 라 본문 높이를 뷰포트에서 산출(헤더·푸터·밴드·도움말·여백 ≈ 250px) */
.rmm-modal.rmm-size-full .lpce-body { height: calc(100vh - 250px); }
.lpce-editor { min-width: 0; border: 1px solid var(--ord-line); border-radius: 10px; background: var(--ord-panel); overflow: hidden; }
.lpce-editor .cm-editor { height: 100%; font-size: 13px; }
.lpce-editor .cm-editor.cm-focused { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ord-accent) 27%, transparent); }
.lpce-editor .cm-scroller { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.55; }
.lpce-editor .cm-gutters { background: var(--ord-surface-2); border-right: 1px solid var(--ord-line); color: var(--ord-text-4); }
/* 현재 줄 — 2026-09-03 사용자 지적(「어느 줄인지 구분이 안 된다」): 연한 반투명 → 차콜블루 밴드 + 좌측 3px 액센트. 선택 영역도 한 단계 진하게 */
.lpce-editor .cm-activeLineGutter { background: var(--ord-line) !important; color: var(--ord-text); font-weight: 700; }
.lpce-editor .cm-activeLine { background: var(--ord-band) !important; box-shadow: inset 3px 0 0 var(--ord-accent); }
.lpce-editor .cm-editor:not(.cm-focused) .cm-activeLine { background: var(--ord-band) !important; box-shadow: inset 3px 0 0 var(--ord-line-2); }
.lpce-editor .cm-selectionBackground, .lpce-editor .cm-editor ::selection { background: color-mix(in srgb, var(--ord-accent) 33%, transparent) !important; }
.lpce-editor .cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--ord-accent) 40%, transparent) !important; }
.lpce-editor .cm-matchingBracket { background: color-mix(in srgb, var(--ord-accent) 13%, transparent); outline: 1px solid color-mix(in srgb, var(--ord-accent) 40%, transparent); }

.lpce-preview { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ord-line); border-radius: 10px; background: var(--ord-panel); overflow: hidden; }
.lpce-preview.is-hidden { display: none; }
.lpce-preview-hd { padding: 7px 12px; font-size: 11px; font-weight: 700; color: var(--ord-accent); background: var(--ord-band); border-bottom: 1px solid var(--ord-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpce-preview-hd span { font-weight: 400; color: var(--ord-text-4); margin-left: 6px; }
.lpce-preview iframe { flex: 1; width: 100%; border: 0; background: var(--ord-panel); }

.lpce-help-in { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 11px; color: var(--ord-text-2); line-height: 1.7; }
.lpce-help-t { font-size: 10.5px; font-weight: 700; color: var(--ord-tint-blue-fg); letter-spacing: 0.4px; margin-bottom: 4px; }
.lpce-help-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.lpce-help-tags code, .lpce-help-in code { font-size: 10.5px; background: var(--ord-accent-soft); border: 1px solid var(--ord-line); color: var(--ord-accent); padding: 0 5px; border-radius: 5px; }
.lpce-help-ex { color: var(--ord-text-4); }

@media (max-width: 768px) {
  .lpce { padding: 10px; }
  .lpce-tools { margin-left: 0; width: 100%; }
  /* 세로 배치: 코드 55 | 미리보기 45 (스플리터 없음) — 최대화 기본이라 높이는 뷰포트 산출 */
  .lpce-body, .rmm-modal.rmm-size-full .lpce-body { display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 360px; }
  .lpce-split { display: none; }
  .lpce-editor { flex: 1 1 55%; min-height: 0; }
  .lpce-preview { flex: 1 1 45%; min-height: 0; }
  .lpce-help-in { grid-template-columns: 1fr; }
}

/* 호출자 제공 도움말 (폼 셀프디자인 CSS — 선택자 계약, 2026-09-03) */
.lpce-help-custom { font-size: 11.5px; color: var(--ord-text-2); line-height: 1.6; }
.lpce-help-lead { margin: 0 0 8px; }
.lpce-help-lead b { color: var(--ord-text); }
.lpce-help-cls { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 3px 16px; }
.lpce-help-cls li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.lpce-help-cls code, .lpce-help-lead code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; background: var(--ord-accent-soft); color: var(--ord-accent); padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.lpce-help-cls span { color: var(--ord-text-3); }