/* 랜딩 HTML 블록 — 코드 편집 모달 (2026-09-02, .lpce-*)
   A-4 액센트형: 차콜 #3e6187 축 · 밴드 그라디언트 · 제목 좌측 액센트 바 · 본문 #f6f9fc */
.lpce { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #f6f9fc; min-width: 0; }
.lpce-band { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: linear-gradient(180deg, #f3f7fb, #fff); border: 1px solid #dbe6f0; border-radius: 10px; }
.lpce-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1e293b; padding-left: 10px; border-left: 4px solid #3e6187; min-width: 0; }
.lpce-lang { font-size: 10px; font-weight: 800; color: #fff; background: #3e6187; 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: #475569; }
.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: #3e6187; }
.lpce-stat { color: #94a3b8; 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: #e4edf5; border-radius: 4px; position: relative; touch-action: none; }
.lpce-split:hover, .lpce-split.on { background: #3e6187; }
.lpce-split::after { content: "\22EE"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #94a3b8; font-size: 13px; }
.lpce-split:hover::after, .lpce-split.on::after { color: #fff; }
/* 최대화(rmm-size-full) — 모달이 100vh 라 본문 높이를 뷰포트에서 산출(헤더·푸터·밴드·도움말·여백 ≈ 250px) */
.rmm-modal.rmm-size-full .lpce-body { height: calc(100vh - 250px); }
.lpce-editor { min-width: 0; border: 1px solid #dbe6f0; border-radius: 10px; background: #fff; 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 #3e618744; }
.lpce-editor .cm-scroller { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.55; }
.lpce-editor .cm-gutters { background: #f8fafc; border-right: 1px solid #e4edf5; color: #94a3b8; }
.lpce-editor .cm-activeLineGutter { background: #eef4f9; }
.lpce-editor .cm-activeLine { background: #f3f7fb80; }
.lpce-editor .cm-selectionBackground, .lpce-editor .cm-editor ::selection { background: #3e618733 !important; }
.lpce-editor .cm-matchingBracket { background: #3e618722; outline: 1px solid #3e618766; }

.lpce-preview { display: flex; flex-direction: column; min-width: 0; border: 1px solid #dbe6f0; border-radius: 10px; background: #fff; overflow: hidden; }
.lpce-preview.is-hidden { display: none; }
.lpce-preview-hd { padding: 7px 12px; font-size: 11px; font-weight: 700; color: #3e6187; background: #f3f7fb; border-bottom: 1px solid #dbe6f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpce-preview-hd span { font-weight: 400; color: #94a3b8; margin-left: 6px; }
.lpce-preview iframe { flex: 1; width: 100%; border: 0; background: #fff; }

.lpce-help-in { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 11px; color: #475569; line-height: 1.7; }
.lpce-help-t { font-size: 10.5px; font-weight: 700; color: #8aa2b8; 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: #eef4f9; border: 1px solid #dbe6f0; color: #3e6187; padding: 0 5px; border-radius: 5px; }
.lpce-help-ex { color: #94a3b8; }

@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; }
}