/*
 * 랜딩페이지 편집모달 — 마케팅 탭 (.lpmk-*)  2026-08-22 신설
 * 구 추적(픽셀)·SEO 두 탭을 A-4 전폭 2컬럼으로 통합: 좌 = 광고 추적 | 우 = 검색엔진 최적화.
 * 반응형 = 컨테이너 쿼리(.lpmk-wrap 이 컨테이너, rmm 모달 드래그 리사이즈 대응) ≤1100px 1컬럼.
 * 내부 콘텐츠 스타일은 기존 그대로(_lp_pixels.css .lppx-* / SEO 인라인) — 여기는 골격만.
 */

.lpmk-wrap {
  container-type: inline-size;
  text-align: left;
  color: #374151;
}

/* ── 상단: 액센트 타이틀 ── */
.lpmk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lpmk-title { font-size: 15px; font-weight: 800; color: #0f172a; padding-left: 10px; border-left: 4px solid #3e6187; letter-spacing: -0.2px; }
.lpmk-sub { font-size: 11.5px; color: #94a3b8; }

/* ── 2컬럼: 좌 픽셀 | 우 SEO ── */
.lpmk-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.lpmk-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── 섹션 카드 — A-4 언어: 헤더 밴드 + 본문 (통계·보안처리 탭과 동일 문법) ── */
.lpmk-sec { background: #ffffff; border: 1px solid #dbe6f0; border-radius: 10px; overflow: hidden; }
.lpmk-sec-title {
  font-size: 12px;
  font-weight: 700;
  color: #3e6187;
  margin: 0;
  padding: 8px 14px;
  background: #f3f7fb;
  border-bottom: 1px solid #e4edf5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lpmk-sec-bd { padding: 12px 14px; }

/* ── SEO 검색 결과 미리보기 (2026-08-22 신설) ── */
.lpmk-serp {
  border: 1px dashed #dbe6f0;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fbfdfe;
}
.lpmk-serp-url { font-size: 10.5px; color: #059669; word-break: break-all; }
.lpmk-serp-title { font-size: 13.5px; color: #1a4b8e; font-weight: 500; margin: 2px 0; }
.lpmk-serp-desc { font-size: 11px; color: #64748b; line-height: 1.5; }
.lpmk-serp-title:empty::before, .lpmk-serp-desc:empty::before { content: "(입력하면 여기 표시됩니다)"; color: #cbd5e1; }

/* ── 반응형 (컨테이너 쿼리 — .lpmk-wrap 폭 기준) ── */
@container (max-width: 1100px) {
  .lpmk-cols { grid-template-columns: minmax(0, 1fr); }
}