/* ═══════════════════════════════════════════════════════════════════
   jp-brand.css — 집수리반장 3호 전용 레이어 (2026-09-03)

   ★왜 또 파일을 나누나
     kt.css·am.css·rc-home.css·im-brand.css 는 이사모아까지의 복제본이다.
     이번에 **새로 만든 블록**(증상 7카드·신뢰 지표 바·증상 칩·긴급 배너·메가메뉴)은
     그 파일들에 클래스 정의가 아예 없어서 **스타일 없이 맨 텍스트로 렌더**됐다
     (사용자 스크린샷으로 발견 — 목록이 줄글로 흘러내렸다).
     원본을 뜯으면 다음 복제 때 또 섞이므로 **맨 마지막(15번)에 이 파일로 덮는다.**

   ★계보를 물려받아 새 섹션을 만들 때는 **클래스 이름을 새로 짓는 순간
     CSS 도 같이 써야 한다.** 뼈대의 클래스를 재사용하면 이 일이 없다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ② 신뢰 지표 바 ── 숫자가 없으므로 '사실 문장' 4칸을 균등하게 ── */
.jp-trustbar { padding: 0 !important; background: transparent !important; border: 0 !important; }
.jp-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--kt-line); border: 1px solid var(--kt-line);
  border-radius: 14px; overflow: hidden;
}
.jp-trust > div { background: #fff; padding: 20px 20px 22px; }
.jp-trust b {
  display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.03em;
  color: var(--kt-primary-d); margin-bottom: 7px;
}
.jp-trust b::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kt-primary); margin-right: 8px; vertical-align: 2px;
}
.jp-trust span { display: block; font-size: 13.4px; line-height: 1.72; color: #62707f; }

/* ── ③ 서비스 7카드 ── 「이런 증상이라면」 3줄이 카드의 본체다 ── */
.jp-svc7 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jp-svc-i {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px 18px; border-radius: 14px; background: #fff;
  border: 1px solid var(--kt-line); text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.jp-svc-i:hover {
  transform: translateY(-2px); border-color: var(--kt-primary);
  box-shadow: 0 10px 24px rgba(27, 95, 191, .13);
}
.jp-svc-i > b {
  font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: var(--kt-ink);
  padding-bottom: 11px; border-bottom: 1px solid var(--kt-line);
}
.jp-svc-i ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.jp-svc-i ul li {
  position: relative; padding-left: 15px;
  font-size: 13.6px; line-height: 1.62; color: #5b6877; word-break: keep-all;
}
.jp-svc-i ul li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: #c3cede;
}
.jp-svc-i:hover ul li::before { background: var(--kt-primary); }
.jp-svc-i em {
  margin-top: auto; padding-top: 12px; font-style: normal;
  font-size: 13.5px; font-weight: 700; color: var(--kt-primary-d);
}
.jp-svc-i em::after { content: " ›"; }

/* ── ① 히어로 안 증상 칩 ── 밝은 히어로라 흰 바탕 칩으로(원본 .im-hot 은 어두운 배경용) ── */
.jp-sym { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jp-sym-t { font-size: 13px; font-weight: 700; color: #6b7787; margin-right: 4px; }
.jp-sym a {
  padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: #fff; border: 1px solid #cfe0f7; color: var(--kt-primary-d); text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.jp-sym a:hover { background: var(--kt-primary); border-color: var(--kt-primary); color: #fff; }

/* ── ④ 24시 긴급 ── 유일하게 보조색(주황)을 쓰는 자리. 여기 말고는 쓰지 않는다 ── */
.jp-emg {
  background: linear-gradient(180deg, #fff8f2 0%, #fffdfb 100%);
  border: 1px solid #f6dcc4; border-radius: 16px; padding: 28px 28px 26px !important;
}
.jp-emg .rc-sechead h2 { color: #9a4508; }
.jp-emg .rc-sechead h2::before {
  content: "24시"; display: inline-block; margin-right: 10px; padding: 3px 9px;
  border-radius: 6px; background: var(--kt-accent); color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: -.02em; vertical-align: 3px;
}
.jp-emg .cm-tiles a { background: #fff; border-color: #f2d3b6; color: #8a4a12; }
.jp-emg .cm-tiles a:hover { border-color: var(--kt-accent); color: #b8500a; background: #fffaf5; }
.jp-emg .im-more a { color: #a8500c; }

/* ── GNB 메가메뉴 3열 (설계서 §04) ──
     기존 .cm-drop 은 한 줄짜리 드롭다운용이라 3열을 담지 못한다. */
.cm-gnb-i.wide { position: static; }              /* 메가는 GNB 전체 폭을 쓴다 */
.cm-gnb { position: relative; }
.cm-drop.mega {
  left: 0; right: 0; width: 100%;
  padding: 0; background: #fff;
  box-shadow: 0 16px 40px rgba(19, 26, 36, .12);
}
.cm-mega {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 34px; padding: 26px 30px 22px;
  max-width: 1200px; margin: 0 auto;
}
.cm-mega-col + .cm-mega-col { border-left: 1px solid var(--kt-line); padding-left: 34px; }
.cm-mega-col h4 {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--kt-mute); text-transform: none;
}
.cm-mega-h { margin: 0 0 6px; }
.cm-mega-h a {
  font-size: 15px; font-weight: 800; color: var(--kt-ink); text-decoration: none;
  letter-spacing: -.02em;
}
.cm-mega-h a:hover { color: var(--kt-primary); }
.cm-mega-col ul { margin: 0 0 18px; padding: 0; list-style: none; }
.cm-mega-col ul li { margin: 0; }
.cm-mega-col ul li a {
  display: block; padding: 4px 0 4px 11px; position: relative;
  font-size: 13.5px; color: #5f6c7b; text-decoration: none;
}
.cm-mega-col ul li a::before { content: "·"; position: absolute; left: 0; color: #b9c4d2; }
.cm-mega-col ul li a:hover { color: var(--kt-primary-d); }
.cm-mega-bar {
  display: flex; gap: 10px; padding: 13px 30px;
  background: var(--kt-soft); border-top: 1px solid var(--kt-line);
  max-width: 1200px; margin: 0 auto;
}
.cm-mega-bar a {
  padding: 8px 15px; border-radius: 8px; background: #fff;
  border: 1px solid var(--kt-line); font-size: 13.4px; font-weight: 700;
  color: var(--kt-primary-d); text-decoration: none;
}
.cm-mega-bar a:hover { border-color: var(--kt-primary); background: #f6faff; }

/* ── ⑨ 검증 기준 4칸은 링크가 아니라 설명 블록이다(.cm-cost 재사용분) ── */
.im-home .cm-cost > div { cursor: default; }

/* ── 반응형 ── 모바일 카드는 2개씩(상시 규칙 [[mobile-2col-cards]]) ── */
@media (max-width: 1024px) {
  .jp-svc7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-mega-col:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .jp-svc7 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jp-svc-i { padding: 16px 14px 14px; }
  .jp-svc-i > b { font-size: 15.5px; }
  .jp-svc-i ul li { font-size: 12.8px; }
  .jp-trust > div { padding: 15px 15px 16px; }
  .jp-trust b { font-size: 14.5px; }
  .jp-trust span { font-size: 12.7px; }
  .jp-emg { padding: 20px 16px 18px !important; }
  .jp-sym a { font-size: 12.8px; padding: 7px 12px; }
}

/* ── 대분류 페이지의 소분류 그리드 ── .kt-hubgrid 만으로는 한 줄에 다 붙어 읽기 어렵다 ── */
.kt-hubgrid.kt-hubgrid-sub { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.kt-hubgrid.kt-hubgrid-sub a { font-weight: 700; }
@media (max-width: 767px) { .kt-hubgrid.kt-hubgrid-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 페이지 래퍼 훅 ── 클래스는 붙어 있으나 규칙이 없으면 감사 스크립트가 잡는다.
     실제 스타일은 하위 블록에 있으므로 여기서는 문맥만 잡아 준다. ── */
.jp-home, .cm-home.home { display: block; }

/* ── 일반 드롭다운 ── 뼈대(청소모아)의 주황 호버(#fff1e8/#c2410c)를 네이비로 되돌린다 ── */
.cm-drop li > a:hover { background: #f2f7ff !important; color: var(--kt-primary-d) !important; }
.cm-drop.mega li > a:hover { background: transparent !important; }

/* ── 지역별 드롭다운 ── 17개 시도를 세로 한 줄로 늘어놓으면 화면 밖으로 나간다 ── */
.cm-gnb-i > .cm-drop:not(.mega) > ul { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); }
.cm-gnb-i > .cm-drop:not(.mega) { min-width: 330px; }
/* 항목이 적은 메뉴(비용·가이드·입점·고객센터)는 한 줄이 낫다 */
.cm-gnb-i:nth-child(3) > .cm-drop > ul,
.cm-gnb-i:nth-child(4) > .cm-drop > ul,
.cm-gnb-i:nth-child(5) > .cm-drop > ul,
.cm-gnb-i:nth-child(6) > .cm-drop > ul { grid-template-columns: 1fr; }
.cm-gnb-i:nth-child(3) > .cm-drop,
.cm-gnb-i:nth-child(4) > .cm-drop,
.cm-gnb-i:nth-child(5) > .cm-drop,
.cm-gnb-i:nth-child(6) > .cm-drop { min-width: 220px; }
.cm-drop:not(.mega) .cm-mega-bar { padding: 11px 18px; margin: 0; }