/*
 * 랜딩페이지 편집모달 — 보안처리 탭 (.lpsec-*)  2026-08-21
 * 구성: 세그먼트 [차단 설정 | 차단내역 | 블랙리스트] + 축별 설정 카드 + 차단내역 목록
 * (블랙리스트 섹션은 기존 .lpbl-* 파셜을 그대로 임베드)
 */

.lpsec-seg {
  display: inline-flex;
  gap: 2px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 16px;
}
.lpsec-seg button {
  border: 0;
  background: transparent;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
}
.lpsec-seg button.is-active {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.lpsec-seg button .lpsec-seg-count {
  margin-left: 4px;
  font-size: 11px;
  color: #dc2626;
  font-weight: 700;
}

.lpsec-section { display: none; }
.lpsec-section.is-active { display: block; }

/* ── 공통 래퍼 — 로딩 컨테이너의 text-align:center·회색 글자 상속 차단 ── */
.lpsec-wrap {
  max-width: 1040px;
  margin: 0 auto;          /* 광폭 모달에서 가운데 정렬 */
  text-align: left;
  color: #374151;
}

/* 편집모달 탭 공용 가운데 정렬 래퍼 (2026-08-21) — SEO·히스토리 탭 등
   본문이 광폭 모달에서 좌측에 쏠리는 탭에 적용. AJAX 주입 컨테이너에 쓰면
   로딩 플레이스홀더의 text-align:center·회색 상속도 함께 차단한다. */
.lp-tab-center {
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;
  color: #374151;
}

/* 편집모달 탭 패널 가운데 정렬 — 내부에 래퍼를 끼울 수 없는 탭용 (2026-08-21)
   · 페이지정보·추적: 잠금 CSS(.lp-edit-locked > :not(.lp-unlock-always))가 「직속 자식」
     선택자라 래퍼가 끼면 잠금 예외(.lp-unlock-always)가 통째로 죽는다
   · 하단정보: 패널 자체가 Stimulus(landing-page-footer) 루트
   · 히스토리: 로드가 컨테이너를 outerHTML 로 통째 교체해 래퍼가 소실
   → 패널의 좌우 패딩으로 내용 폭을 1040px 로 제한 + 가운데 정렬 (구조 무수정) */
.lp-panel-center {
  padding: 20px max(20px, calc((100% - 1040px) / 2));
}

/* ── 차단 설정 ─────────────────────────────── */
.lpsec-master {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  margin-bottom: 14px;
}
.lpsec-master-title { font-size: 14px; font-weight: 700; color: #1e293b; }
.lpsec-master-desc { font-size: 12px; color: #64748b; margin-top: 4px; line-height: 1.55; max-width: 720px; }
.lpsec-master .ord-switch { margin-top: 2px; }

/* 마스터 OFF 시 아래 설정을 흐리게 (입력은 유지 — 값 보존·재활성 대비) */
.lpsec-body { transition: opacity 0.15s; }
.lpsec-form.is-master-off .lpsec-body { opacity: 0.45; }

.lpsec-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.lpsec-card-title { font-size: 13.5px; font-weight: 700; color: #111827; }
.lpsec-card-hint { font-size: 11.5px; color: #9ca3af; margin-top: 3px; line-height: 1.5; }
.lpsec-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* 반복 제출 제한 — 3축 공통 표 */
.lpsec-table-scroll { overflow-x: auto; }
.lpsec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lpsec-table th {
  padding: 8px 10px;
  border-bottom: 2px solid #e5e7eb;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.lpsec-table th:first-child { text-align: left; }
.lpsec-table td {
  padding: 10px;
  border-bottom: 1px solid #f1f5f9;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.lpsec-table tr:last-child td { border-bottom: 0; }
.lpsec-table td:first-child { text-align: left; }
.lpsec-axis-name { font-size: 13px; font-weight: 700; color: #1f2937; }
.lpsec-axis-sub { font-size: 11px; color: #9ca3af; margin-top: 2px; white-space: normal; max-width: 190px; line-height: 1.45; }
.lpsec-table tr.is-off td:not(.lpsec-keep) { opacity: 0.4; }

.lpsec-field { display: inline-flex; align-items: center; gap: 5px; }
.lpsec-num {
  width: 74px;
  padding: 7px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  text-align: right;
  background: #ffffff;
  color: #111827;
  box-sizing: border-box;
}
.lpsec-num:focus { outline: 2px solid #bfdbfe; border-color: #60a5fa; }
.lpsec-unit { font-size: 11.5px; color: #6b7280; }

/* 봇 감지 / 자동 블랙리스트 — 반폭 카드 2장 */
.lpsec-half-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px) { .lpsec-half-grid { grid-template-columns: 1fr; } }
.lpsec-half-grid .lpsec-card { margin-bottom: 0; }
.lpsec-inline-fields { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lpsec-inline-field { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #374151; }
.lpsec-card.is-off .lpsec-inline-fields { opacity: 0.4; }

.lpsec-footnote { font-size: 11.5px; color: #9ca3af; margin-top: 8px; }

.lpsec-save-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.lpsec-save-btn {
  border: 0;
  background: #2563eb;
  color: #ffffff;
  border-radius: 9px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lpsec-save-btn:hover { background: #1d4ed8; }
.lpsec-save-btn[disabled] { opacity: 0.6; cursor: default; }
.lpsec-note {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.5;
}

/* ── 차단내역 ─────────────────────────────── */
.lpsec-blk-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.lpsec-blk-toolbar select {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  font-size: 12.5px;
  background: #ffffff;
  color: #374151;
}
.lpsec-blk-table-wrap { border: 1px solid #e5e7eb; border-radius: 10px; overflow-x: auto; }
.lpsec-blk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lpsec-blk-table th {
  padding: 8px 10px;
  background: #f8fafc;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  color: #334155;
  text-align: center;
  white-space: nowrap;
}
.lpsec-blk-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #f3f4f6;
  text-align: center;
  color: #374151;
  white-space: nowrap;
}
.lpsec-blk-table tr:last-child td { border-bottom: 0; }
.lpsec-blk-reason { max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align: left; }

.lpsec-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.lpsec-kind-honeypot,
.lpsec-kind-bot { background: #fef3c7; color: #92400e; }
.lpsec-kind-blacklist { background: #fee2e2; color: #991b1b; }
.lpsec-kind-cookie { background: #e0e7ff; color: #3730a3; }
.lpsec-kind-ip { background: #dbeafe; color: #1e40af; }
.lpsec-kind-phone { background: #fce7f3; color: #9d174d; }
.lpsec-kind-duplicate { background: #f3f4f6; color: #4b5563; }

.lpsec-restored { color: #059669; font-weight: 600; font-size: 11px; }
.lpsec-blk-actions { display: inline-flex; gap: 6px; }
.lpsec-btn {
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lpsec-btn:hover { background: #f9fafb; }
.lpsec-btn-primary { border-color: #2563eb; color: #2563eb; }
.lpsec-btn-primary:hover { background: #eff6ff; }
.lpsec-btn-danger { border-color: #fca5a5; color: #b91c1c; }
.lpsec-btn-danger:hover { background: #fef2f2; }
.lpsec-btn[disabled] { opacity: 0.5; cursor: default; }

.lpsec-empty {
  text-align: center;
  padding: 28px 0;
  color: #9ca3af;
  font-size: 13px;
}
.lpsec-more-bar { text-align: center; margin-top: 10px; }