/* 랜딩페이지 편집모달 — 페이지정보 탭 (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: #374151;
}

/* ── 잠금 의미론 재현 (컬럼 자식 단위) ── */
.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·#f6f9fc)으로 통일하며
   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: #0f172a;
  line-height: 1.3;
  padding-left: 10px;
  border-left: 4px solid #3e6187;
  letter-spacing: -0.2px;
  word-break: break-all;
}
.lppi-band-note { margin: 9px 0 0; font-size: 12px; color: #64748b; line-height: 1.5; }
.lppi-band-note b { color: #3e6187; }
.lppi-locked-banner {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  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 #e2e8f0;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.lppi-sbtn:hover { background: #f8fafc; }
.lppi-sbtn-publish { background: #10b981; border-color: #10b981; color: #fff; }
.lppi-sbtn-publish:hover { background: #059669; }
.lppi-sbtn-archive { color: #dc2626; border-color: #fecaca; }
.lppi-sbtn-archive:hover { background: #fef2f2; }
.lppi-sbtn-restore { background: #6b7280; border-color: #6b7280; color: #fff; }
.lppi-sbtn-restore:hover { background: #4b5563; }

/* ── 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: #94a3b8;
  letter-spacing: 0.4px;
  margin-bottom: -2px;
}
.lppi-cap::after { content: ""; flex: 1; height: 1px; background: #eef2f7; }
.lppi-cap-dot { width: 7px; height: 7px; border-radius: 50%; background: #3e6187; flex-shrink: 0; }
.lppi-cap-warm .lppi-cap-dot { background: #94a3b8; }

/* ── 카드 (A-4 문법: 테두리 + 브랜드 헤더 밴드) ── */
.lppi-card { border: 1px solid #dbe6f0; border-radius: 12px; overflow: hidden; background: #fff; }
.lppi-card-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #3e6187;
  background: #f3f7fb;
  padding: 9px 15px;
  border-bottom: 1px solid #dbe6f0;
}
.lppi-card-hd .lppi-opt { font-weight: 400; color: #94a3b8; }
.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: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 400;
  padding: 0;
}

/* ── 공용 폼 요소 ── */
.lppi-in {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13.5px;
  box-sizing: border-box;
  background: #fff;
  color: #111827;
}
.lppi-in:focus { outline: none; border-color: #3e6187; box-shadow: 0 0 0 3px #3e618722; }
.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: #94a3b8; line-height: 1.55; }
.lppi-hint-warn { color: #92400e; }
.lppi-hint-err { color: #ef4444; }
.lppi-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; cursor: pointer; }
.lppi-radio input { accent-color: #3e6187; }
.lppi-btn {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}
.lppi-btn:hover { background: #f8fafc; }
.lppi-btn-pri {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #3e6187;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.lppi-btn-pri:hover { background: #355475; }
.lppi-alink { color: #3e6187; 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: #9ca3af; word-break: break-all; }
.lppi-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #f3f4f6; color: #6b7280; }
.lppi-chip-live { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.lppi-chip-copy { background: #fff; color: #3e6187; border: 1px solid #c4d3e2; cursor: pointer; }
.lppi-chip-copy:hover { background: #f3f7fb; }

/* 읽기 전용 값 표시 */
.lppi-ro {
  padding: 9px 13px;
  background: #f8fbfd;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  color: #334155;
}
.lppi-ro-main { font-weight: 600; }
.lppi-ro-sub { margin-top: 4px; font-size: 11px; color: #94a3b8; display: flex; flex-wrap: wrap; gap: 10px; }
.lppi-ro-sub .lppi-warn { color: #d97706; }
.lppi-stack { display: flex; flex-direction: column; gap: 10px; }
.lppi-fld-label { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 5px; }
.lppi-divide { border-top: 1px solid #eef4f9; margin: 12px -15px; }
.lppi-urls { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.lppi-warnbox {
  margin-top: 9px;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.lppi-warnbox p { margin: 0; font-size: 11px; color: #92400e; line-height: 1.5; }