/*
 * 랜딩페이지 편집모달 — 부가설정 탭 (.lpxt-*)  2026-08-22 신설
 * 구 이벤트설정·하단정보 두 탭을 A-4 전폭 2컬럼으로 통합: 좌 = 이벤트(팝업·동작) | 우 = 하단정보.
 * 반응형 = 컨테이너 쿼리(.lpxt-wrap 이 컨테이너, rmm 모달 드래그 리사이즈 대응) ≤1100px 1컬럼.
 * 내부 콘텐츠 스타일은 기존 그대로(.sset-card / landing-page-footer JS 렌더) — 여기는 골격만.
 * (통계 .lps- / 보안 .lpsec- / 마케팅 .lpmk- 와 같은 탭 골격 문법 — 추후 공용화 후보)
 */

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

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

/* ── 2컬럼: 좌 이벤트 | 우 하단정보 (상담사 제한 모드 = 이벤트만 1컬럼) ── */
.lpxt-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.lpxt-cols-single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.lpxt-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── 섹션 카드 — A-4 언어: 헤더 밴드 + 본문 ── */
.lpxt-sec { background: #ffffff; border: 1px solid #dbe6f0; border-radius: 10px; overflow: hidden; }
.lpxt-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;
}
.lpxt-sec-meta { font-size: 10.5px; font-weight: 400; color: #94a3b8; }
.lpxt-sec-bd { padding: 12px 14px; }

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

/* ── A 설정 목록형 (2026-09-08) — 밴드 3개 × 클릭형 행(.sset-card) ── */
.lpxt-list { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.lpxt-rows { padding: 8px 10px; }
.lpxt-rows .sset-card { margin-bottom: 6px; padding: 11px 14px; background: #fff; }
.lpxt-rows .sset-card:last-child { margin-bottom: 0; }
.lpxt-rows .sset-card-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpxt-rows .sset-card-desc b { color: #374151; font-weight: 600; }
.lpxt-rows .sset-card.is-disabled { opacity: .62; cursor: not-allowed; }
.lpxt-rows .sset-card.is-disabled:hover { background: #fff; border-color: #e5e7eb; box-shadow: none; }
.lpxt-rows .sset-card.is-disabled .sset-chevron { visibility: hidden; }
@media (max-width: 768px) { .lpxt-rows .sset-card-desc { white-space: normal; } }

/* 자식 모달(SEO·하단정보·안내 문자) 본문 골격 — A-4 탭 골격과 같은 여백·바탕 */
.lpxt-modal-bd { padding: 16px; background: #f6f9fc; text-align: left; color: #374151; }

/* ── 편집모달 탭 패널 바탕 채움 (2026-09-08) — 부가설정·통계·보안처리·히스토리 패널의 #f6f9fc 바탕이
   내용 높이에서 끝나 그 아래가 모달 흰 바탕으로 드러나던 문제. gem 의 .rmm-content(스크롤 컨테이너)를
   활성 패널이 있을 때만 세로 flex 로 만들어 패널이 남은 높이를 채운다(:has — 비활성 패널은 display:none). */
.lp-panel-fill { padding: 16px; background: #f6f9fc; box-sizing: border-box; }
.rmm-content:has(> .lp-panel-fill.rmm-tab-panel-active) { display: flex; flex-direction: column; }
.rmm-content > .lp-panel-fill.rmm-tab-panel-active { flex: 1 0 auto; min-height: 100%; }