/* 랜딩페이지 편집모달 — 페이지정보 탭 (2026-08-22 A-4 액센트형 · 2컬럼 그리드)
 *
 * 구조: .lppi-root(컨테이너 쿼리 기준) > .lppi-band(브랜드 밴드) + .lppi-grid(1:1 그리드)
 *   · 좌측 컬럼 = 주소·운영(즉시 반영, lp-unlock-always 카드)
 *   · 우측 컬럼 = 기본 설정 form(저장 시 반영, 잠금 대상)
 * 모달 폭 880px 이하에서 1컬럼으로 접힘 — 뷰포트가 아닌 컨테이너 쿼리(rmm 리사이즈 대응).
 *
 * ⚠잠금 계약: 편집모달의 잠금 CSS(.lp-edit-locked > :not(.lp-unlock-always))는 「패널 직속
 *   자식」 선택자라 그리드 래퍼가 끼면 무력화된다 → .lppi-root 를 lp-unlock-always 로 통과시키고
 *   같은 의미론을 컬럼 자식 단위로 아래에서 재현한다(카드별 lp-unlock-always 유지).
 */

.lppi-root {
  container-type: inline-size;
  text-align: left;
  color: var(--ord-text-2);
}

/* ── 잠금 의미론 재현 (컬럼 자식 단위) ── */
.lp-edit-locked .lppi-col > :not(.lp-unlock-always) {
  pointer-events: none;
  opacity: 0.55;
  user-select: none;
}
.lp-edit-locked .lppi-col > .lp-unlock-always {
  pointer-events: auto;
  opacity: 1;
}

/* ── 브랜드 밴드 — 2026-08-22 저녁: 패널 여백을 부가설정 탭 기준(16px·surface-2)으로 통일하며
   full-bleed 배경을 폐기, 다른 탭들의 액센트 헤더 행과 같은 톤(여백 안 배치)으로 ── */
.lppi-band { padding: 0 0 12px; }
/* 2026-08-22 저녁: 폭 제한 1200px 폐기 — 본문 전폭 사용(다른 탭들과 통일, 사용자 확정) */
.lppi-band-in { margin: 0 auto; }
.lppi-band-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 다른 탭들의 액센트 타이틀(.lpxt-title 등)과 같은 규격 — 15px (2026-08-22 여백 통일) */
.lppi-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ord-text);
  line-height: 1.3;
  padding-left: 10px;
  border-left: 4px solid var(--ord-accent);
  letter-spacing: -0.2px;
  word-break: break-all;
}
.lppi-band-note { margin: 9px 0 0; font-size: 12px; color: var(--ord-text-3); line-height: 1.5; }
.lppi-band-note b { color: var(--ord-accent); }
.lppi-locked-banner {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--ord-tint-red-bg);
  border: 1px solid var(--ord-tint-red-line);
  border-radius: 8px;
  color: var(--ord-tint-red-fg);
  font-size: 12px;
  line-height: 1.5;
}

/* 상태 배지 + 액션 (status_controls 파셜 — turbo replace 대상) */
.lppi-status { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.lppi-status-badge {
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent; /* 색은 status_color 인라인(동적 값) */
}
.lppi-status-actions { display: inline-flex; align-items: center; gap: 6px; }
.lppi-sbtn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--ord-line);
  background: var(--ord-panel);
  color: var(--ord-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.lppi-sbtn:hover { background: var(--ord-surface-2); }
.lppi-sbtn-publish { background: var(--ord-solid-green); border-color: var(--ord-tint-green-fg); color: var(--ord-on-solid); }
.lppi-sbtn-publish:hover { background: var(--ord-solid-green); }
.lppi-sbtn-archive { color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.lppi-sbtn-archive:hover { background: var(--ord-tint-red-bg); }
.lppi-sbtn-restore { background: var(--ord-solid-gray); border-color: var(--ord-text-4); color: var(--ord-on-solid); }
.lppi-sbtn-restore:hover { background: var(--ord-tooltip-bg); }

/* ── 2컬럼 그리드 ── */
.lppi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 24px;
  align-items: start;
  padding: 0;
}
.lppi-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

@container (max-width: 880px) {
  .lppi-grid { grid-template-columns: 1fr; gap: 14px; }
  .lppi-band { padding: 0 0 10px; }
}

/* 컬럼 캡션 */
.lppi-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ord-text-4);
  letter-spacing: 0.4px;
  margin-bottom: -2px;
}
.lppi-cap::after { content: ""; flex: 1; height: 1px; background: var(--ord-band); }
.lppi-cap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ord-accent); flex-shrink: 0; }
.lppi-cap-warm .lppi-cap-dot { background: var(--ord-text-4); }

/* ── 카드 (A-4 문법: 테두리 + 브랜드 헤더 밴드) ── */
.lppi-card { border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; background: var(--ord-panel); }
.lppi-card-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ord-accent);
  background: var(--ord-band);
  padding: 9px 15px;
  border-bottom: 1px solid var(--ord-line);
}
.lppi-card-hd .lppi-opt { font-weight: 400; color: var(--ord-text-4); }
.lppi-card-hd-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.lppi-card-bd { padding: 13px 15px; }
.lppi-hd-link {
  font-size: 11px;
  color: var(--ord-text-3);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 400;
  padding: 0;
}

/* ── 공용 폼 요소 ── */
.lppi-in {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--ord-line-2);
  border-radius: 8px;
  font-size: 13.5px;
  box-sizing: border-box;
  background: var(--ord-panel);
  color: var(--ord-text);
}
.lppi-in:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 13%, transparent); }
.lppi-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lppi-dim { opacity: 0.55; }
.lppi-hint { margin: 8px 0 0; font-size: 11px; color: var(--ord-text-4); line-height: 1.55; }
.lppi-hint-warn { color: var(--ord-tint-amber-fg); }
.lppi-hint-err { color: var(--ord-tint-red-fg); }
.lppi-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ord-text-2); cursor: pointer; }
.lppi-radio input { accent-color: var(--ord-accent); }
.lppi-btn {
  padding: 8px 14px;
  border: 1px solid var(--ord-line-2);
  border-radius: 8px;
  background: var(--ord-panel);
  font-size: 12px;
  color: var(--ord-text-2);
  cursor: pointer;
}
.lppi-btn:hover { background: var(--ord-surface-2); }
.lppi-btn-pri {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--ord-head-bg);
  color: var(--ord-on-solid);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.lppi-btn-pri:hover { background: var(--ord-accent-strong); }
.lppi-alink { color: var(--ord-accent); font-size: 12px; font-weight: 600; word-break: break-all; }
.lppi-alink-plain { font-weight: 400; }

/* 칩 (slug_status 파셜 — turbo replace 대상) */
.lppi-slug-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lppi-slug-muted { font-size: 12px; color: var(--ord-text-4); word-break: break-all; }
.lppi-slug-note { font-size: 11px; color: var(--ord-text-4); }   /* 작성중 «화면 확인용» 안내 (2026-10-12) */
.lppi-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--ord-band); color: var(--ord-text-3); }
.lppi-chip-live { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); border: 1px solid var(--ord-tint-green-line); }
.lppi-chip-copy { background: var(--ord-panel); color: var(--ord-accent); border: 1px solid var(--ord-line-2); cursor: pointer; }
.lppi-chip-copy:hover { background: var(--ord-band); }

/* 읽기 전용 값 표시 */
.lppi-ro {
  padding: 9px 13px;
  background: var(--ord-surface-2);
  border: 1px solid var(--ord-line);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ord-text-2);
}
.lppi-ro-main { font-weight: 600; }
.lppi-ro-sub { margin-top: 4px; font-size: 11px; color: var(--ord-text-4); display: flex; flex-wrap: wrap; gap: 10px; }
.lppi-ro-sub .lppi-warn { color: var(--ord-tint-amber-fg); }
.lppi-stack { display: flex; flex-direction: column; gap: 10px; }
.lppi-fld-label { display: block; font-size: 12px; font-weight: 600; color: var(--ord-text-3); margin-bottom: 5px; }
.lppi-divide { border-top: 1px solid var(--ord-line-soft); margin: 12px -15px; }
.lppi-urls { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.lppi-warnbox {
  margin-top: 9px;
  padding: 8px 10px;
  background: var(--ord-tint-amber-bg);
  border: 1px solid var(--ord-tint-amber-line);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.lppi-warnbox p { margin: 0; font-size: 11px; color: var(--ord-tint-amber-fg); line-height: 1.5; }

/* ── 랜딩페이지 간단 메모 배지 (2026-09-08) — 페이지명 우측 회색 소자, 목록·통계·광고캠페인 공용 ── */
.lp-memo { color: var(--ord-text-4); font-size: 11px; font-weight: 400; margin-left: 4px; white-space: nowrap; }
.lppi-title .lp-memo { font-size: 12px; margin-left: 8px; }