/* ═══════════════════════════════════════════════════════════════════
   im-brand.css — 집수리반장 전용 브랜드 레이어 (2026-09-03)

   ★왜 별도 파일인가
     kt.css(골격)·am.css(청소모아 팔레트)·rc-home.css 는 **복제 원본 그대로**다.
     사용자 지적: "메인페이지 디자인부터 구성이 이전 플랫폼하고 너무 똑같아."
     원본을 직접 뜯으면 다음 복제 때 또 섞인다 ⇒ **맨 마지막(14번)에 이 파일 하나로 덮는다.**

   ★방향 (마스터 지시서 31항)
     한국 로컬서비스 플랫폼 — 신뢰·빠름·간결·비교하기 쉬움.
     화이트 기반 · 정보 카드 중심 · 과도한 화려함 금지 · 메인컬러 1개 + 보조.
     청소모아는 **틸(teal) + 주황 GNB + 어두운 사진 히어로**였다.
     집수리반장은 **네이비블루 + 흰 헤더 + 밝은 검색형 히어로**로 간다.
   ═══════════════════════════════════════════════════════════════════ */

:root, .kt-wrap, body {
  --kt-primary:   #1b5fbf;   /* 메인 — 신뢰감 있는 네이비블루 */
  --kt-primary-d: #12468f;
  --kt-accent:    #f07316;   /* 보조 — CTA 강조에만 아주 조금 */
  --kt-ink:       #131a24;
  --kt-ink2:      #37424f;
  --kt-mute:      #7b8794;
  --kt-line:      #e4e9f0;
  --kt-soft:      #f4f7fb;
  --im-band:      #f2f6fc;
}
body { background: #f7f9fc; }

/* ── 상단 유틸바 · 로고줄 — 청소모아는 민트 배경이었다. 흰 바탕으로 바꾼다 ── */
.kt-utilbar { background: #fff; border-bottom: 1px solid var(--kt-line); }
.kt-logorow { background: #fff; }
.kt-logo span + span { color: var(--kt-primary); }

/* ── GNB — 주황 바(#c2410c) → 흰 바탕 + 아래 밑줄 강조 ── */
.cm-gnb { background: #fff; border-bottom: 1px solid var(--kt-line); box-shadow: 0 1px 0 rgba(19,26,36,.03); }
.cm-gnb-row > li > a { color: #2b3644 !important; font-weight: 700; letter-spacing: -.02em; }
.cm-gnb-i { position: relative; }
.cm-gnb-i > a { padding: 16px 18px !important; }
.cm-gnb-i::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px;
  background: var(--kt-primary); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease; border-radius: 3px 3px 0 0; }
.cm-gnb-i:hover::after, .cm-gnb-i.on::after { transform: scaleX(1); }
.cm-gnb-i:hover > a, .cm-gnb-i.on > a { color: var(--kt-primary) !important; }
.cm-drop { border-top: 2px solid var(--kt-primary); }

/* ── HERO — 어두운 사진 히어로를 버리고 '검색이 주인공'인 밝은 판으로 ──
     지시서 20항: 메인에서 가장 먼저 할 수 있어야 하는 행동 = 지역 선택 → 서비스 선택 */
.im-hero {
  background: linear-gradient(180deg, #eef4fd 0%, #f7f9fc 100%) !important;
  border: 1px solid #dde7f6; border-radius: 20px;
  padding: 0; margin-bottom: 26px;
}
.im-hero .cm-hero-in { padding: 52px 40px 44px; color: var(--kt-ink); max-width: 900px; }
.im-hero .cm-hero-tag {
  background: #fff; border: 1px solid #cfe0f7; color: var(--kt-primary-d);
  font-weight: 800; letter-spacing: -.01em;
}
.im-hero h1 { color: var(--kt-ink); text-shadow: none; font-size: 36px; }
.im-hero p  { color: #4a5765; }

/* 검색 카드 — 흰 카드로 띄워 첫 행동을 분명히 한다 */
.im-find {
  background: #fff; border: 1px solid #dbe5f3; border-radius: 14px;
  padding: 14px; box-shadow: 0 8px 24px rgba(19,60,120,.09);
  grid-template-columns: 1fr 1fr auto; gap: 10px;
}
.im-find select { border: 1px solid var(--kt-line); background-color: #fbfcfe; }
.im-find button { background: var(--kt-primary); color: #fff; }
.im-find button:hover { background: var(--kt-primary-d); }
.im-hot span { color: #6b7787; }
.im-hot a { background: #fff; border: 1px solid var(--kt-line); color: #35404e; }
.im-hot a:hover { border-color: var(--kt-primary); color: var(--kt-primary-d); background: #f7faff; }
.im-hero .cm-hero-cta { margin-top: 16px; }
.im-hero .cm-btn.ghost {
  background: #fff; border: 1px solid var(--kt-accent); color: #c2560b; font-weight: 800;
}
.im-hero .cm-btn.ghost:hover { background: #fff7f0; }

/* ── 섹션 리듬 — 청소모아는 제목 왼쪽에 컬러 막대였다. 여기선 가로줄 + 작은 라벨 ── */
.im-home .rc-sec { background: #fff; border: 1px solid var(--kt-line); border-radius: 16px;
  padding: 28px 26px; margin-bottom: 18px; box-shadow: none; }
.im-home .rc-sec.im-band { background: var(--im-band); border-color: #dfe8f5; }
.im-home .rc-sechead { border-bottom: 1px solid var(--kt-line); padding-bottom: 14px; margin-bottom: 20px; }
.im-home .rc-sechead h2 { font-size: 21px; font-weight: 800; letter-spacing: -.035em; color: var(--kt-ink); }
.im-home .rc-sechead p  { margin-top: 6px; font-size: 14px; color: #6b7787; }

/* 지역·서비스 타일 — 알약형으로 촘촘히(지시서 19항) */
.im-home .cm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.im-home .cm-tiles a {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 10px 12px; border-radius: 999px; background: #fff;
  border: 1px solid var(--kt-line); font-size: 14.5px; font-weight: 700; color: #35404e;
  transition: border-color .15s, color .15s, background .15s;
}
.im-home .cm-tiles a:hover { border-color: var(--kt-primary); color: var(--kt-primary-d); background: #f6faff; }

/* 비용·특수 카드 */
.im-home .cm-cost { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.im-home .cm-cost > * { display: block; padding: 18px 18px; border-radius: 12px;
  background: #fff; border: 1px solid var(--kt-line); }
.im-home .cm-cost a:hover { border-color: var(--kt-primary); }
.im-home .cm-cost b { display: block; font-size: 16px; font-weight: 800; color: var(--kt-ink); }
.im-home .cm-cost span { display: block; margin-top: 7px; font-size: 13.6px; line-height: 1.7; color: #62707f; }

/* 서비스 8카드 — 강조 4개는 왼쪽에 컬러 바 */
.im-svc8 a.hot { border-left: 3px solid var(--kt-primary); background: #fff; }
.im-svc8 em { color: var(--kt-primary-d); }

/* 차량 카드 */
.im-veh a:hover { border-color: var(--kt-primary); }

/* CTA */
.cm-btn.main, .im-quote-cta .cm-btn.main { background: var(--kt-primary); color: #fff; box-shadow: none; }
.cm-btn.main:hover { background: var(--kt-primary-d); }
.im-quote { background: linear-gradient(180deg, #12468f, #1b5fbf) !important; border: 0 !important; color: #fff; }
.im-quote .rc-sechead { border-bottom-color: rgba(255,255,255,.22); }
.im-quote .rc-sechead h2 { color: #fff; }
.im-quote .rc-sechead p, .im-quote .kt-hubnote-sm { color: rgba(255,255,255,.82); }
.im-quote .cm-btn.main { background: #fff; color: var(--kt-primary-d); }
.im-quote .cm-btn.main:hover { background: #eef4fd; }

.im-partner { background: var(--im-band) !important; border-color: #dfe8f5 !important; }

/* 타임라인 — 번호 배지를 달아 청소모아 카드와 다르게
   ★<ol> 기본 마커(1. 2. 3.)를 끄지 않으면 배지와 **숫자가 두 번** 나온다(2026-09-03 사용자 지적). */
.im-tl { counter-reset: imtl; list-style: none; margin: 0; padding: 0; }
.im-tl > li { list-style: none; }
.im-tl > li::marker { content: none; }
.im-tl li { counter-increment: imtl; padding-left: 52px; }
.im-tl li::before { content: counter(imtl); position: absolute; left: 16px; top: 16px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: var(--kt-primary); color: #fff; font-size: 13px; font-weight: 800; }

/* 매거진 카드 */
.im-home .cm-posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.im-home .cm-posts a { display: block; padding: 18px; border-radius: 12px; background: #fff;
  border: 1px solid var(--kt-line); }
.im-home .cm-posts a:hover { border-color: var(--kt-primary); }
.im-home .cm-posts i { display: inline-block; font-style: normal; font-size: 12px; font-weight: 800;
  color: var(--kt-primary-d); background: #eef4fd; padding: 4px 10px; border-radius: 999px; }
.im-home .cm-posts b { display: block; margin-top: 9px; font-size: 15.5px; font-weight: 800;
  line-height: 1.5; color: var(--kt-ink); }
.im-home .cm-posts span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.7; color: #62707f; }

/* FAQ */
.im-home .kt-faq details { background: #fff; border: 1px solid var(--kt-line); border-radius: 12px;
  margin-bottom: 8px; }
.im-home .kt-faq summary { padding: 16px 18px; font-weight: 700; }

/* 푸터 — 청소모아 다크 그린 계열을 네이비로 */
.kt-foot { background: #10233d; }
.kt-foot a:hover { color: #9dc2f5; }

@media (max-width: 900px) {
  .im-hero .cm-hero-in { padding: 34px 20px 30px; }
  .im-home .rc-sec { padding: 20px 16px; border-radius: 14px; }
  .im-home .cm-cost, .im-home .cm-posts { grid-template-columns: 1fr; }
  .im-home .cm-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ── 히어로 2단: 왼쪽 카피·검색 / 오른쪽 대표 이미지 (2026-09-03) ──
   ★이미지는 CSS 배경이 아니라 실제 <img> 다 — 검색 결과 썸네일로 잡히게 하려면 문서 안에 있어야 한다. */
.im-hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 28px; align-items: center; }
.im-hero-grid .cm-hero-in { max-width: none; padding: 52px 0 44px 40px; }
.im-hero-img { margin: 0; padding: 26px 40px 26px 0; }
.im-hero-img img { display: block; width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 12px 30px rgba(19,60,120,.16); }
@media (max-width: 980px) {
  .im-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .im-hero-grid .cm-hero-in { padding: 34px 20px 26px; }
  .im-hero-img { padding: 0 20px 26px; }
}

/* ── 버튼 위계 재정리 (2026-09-03 사용자 지적: "우측에 글씨 안 보여") ──
   `.cm-btn.ghost` 는 **어두운 배경 전용**이라 흰 글씨다. 밝은 카드 위에 그대로 쓰면 글자가 사라진다.
   밝은 바탕에는 `.cm-btn.line`(테두리형)을 쓴다. */
.cm-btn.line {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--kt-accent); color: #c2560b;
  font-size: 15px; font-weight: 800; letter-spacing: -.02em; transition: .15s;
}
.cm-btn.line:hover { background: #fff7f0; border-color: #d9660f; color: #a8480a; }
.im-partner .cm-btn.line { border-color: var(--kt-primary); color: var(--kt-primary-d); }
.im-partner .cm-btn.line:hover { background: #f2f7ff; }

/* ── 히어로 정렬 (사용자 지적: "너무 왼쪽으로 치우친 거 같어") ──
   이미지가 없을 때는 2단이 무너져 왼쪽 칸만 남는다 → 그때는 **가운데 한 단**으로 떨어뜨린다. */
.im-hero-grid:not(:has(.im-hero-img)) { grid-template-columns: 1fr; }
.im-hero-grid:not(:has(.im-hero-img)) .cm-hero-in {
  margin: 0 auto; text-align: center; padding: 52px 24px 44px; max-width: 760px;
}
.im-hero-grid:not(:has(.im-hero-img)) .im-find { justify-items: stretch; }
.im-hero-grid:not(:has(.im-hero-img)) .im-hot,
.im-hero-grid:not(:has(.im-hero-img)) .cm-hero-cta { justify-content: center; }

/* ── 푸터 (2026-09-03 "구글 SEO 맞게 깔끔하게") ─────────────────────
   ★구글이 싫어하는 것은 푸터의 **키워드·지역명 대량 나열**이다(지시서 21항).
     지역 17개는 실제 탐색 경로라 남기되, 시각적 무게를 낮추고 본문과 구분되게 한다.
   ★E-E-A-T: 운영 주체(상호·대표·사업자등록번호·주소)와 책임 고지는 **오히려 명확히** 보이게. */
.kt-foot { background: #10233d; color: #b6c6dc; }
.kt-foot a { color: #c8d7ea; }
.kt-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kt-foot-top { padding: 40px 0 26px; border-bottom: 1px solid rgba(255,255,255,.09); }
.kt-foot-brand { max-width: 320px; }
.kt-foot-logo { color: #fff; font-weight: 800; letter-spacing: -.03em; }
.kt-foot-desc { margin-top: 12px; font-size: 13.5px; line-height: 1.8; color: #9fb2c9; }
.kt-foot-col h3 { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  margin-bottom: 12px; opacity: .92; }
.kt-foot-col li { margin: 7px 0; font-size: 13.5px; line-height: 1.5; }
.kt-foot-col .more { color: #8fb4e6; font-weight: 700; }
/* 지역 목록은 촘촘한 2열로 접어 무게를 낮춘다 */
.kt-foot-col ul.kt-foot-region { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.kt-foot-bottom { padding: 22px 0 34px; }
.kt-foot-org { font-size: 12.8px; line-height: 2; color: #93a7c0; font-style: normal; }
.kt-foot-org b { color: #cfdcec; font-weight: 700; margin-right: 4px; }
.kt-foot-org span { margin-right: 16px; white-space: nowrap; }
.kt-foot-note { margin-top: 12px; font-size: 12.8px; line-height: 1.85; color: #8ca0ba; }
.kt-foot-disclaimer { margin-top: 10px; font-size: 12.3px; line-height: 1.85; color: #7e93ae; }
.kt-foot-copy { margin-top: 16px; font-size: 12.5px; color: #6f849f; }
.kt-foot-feed a { display: inline-block; margin: 0 8px 8px 0; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 700; }
@media (max-width: 900px) {
  .kt-foot-top { padding: 28px 0 18px; }
  .kt-foot-col ul.kt-foot-region { grid-template-columns: repeat(3, 1fr); }
}

/* ── 헤더·메뉴바 정렬 (2026-09-03 사용자 지적: "헤더부터 메뉴바 가운데로 정렬") ──
   ★두 가지를 같이 맞춘다.
     ① 헤더·GNB 의 안쪽 폭을 **본문 컨테이너와 정확히 같게** — 좌우 시작선이 어긋나면
        스크롤할 때 로고와 본문 카드가 계단처럼 밀려 보인다.
     ② GNB 항목이 왼쪽에 몰려 오른쪽이 비던 것을 **가운데로 모은다.** */
.kt-utilbar .kt-wrap,
.kt-logorow .kt-wrap,
.cm-gnb .kt-wrap,
.kt-foot .kt-wrap { max-width: 1300px; padding-left: 24px; padding-right: 24px; }
.im-home, .kt-mainstack, .kt-body.full .kt-main { padding-left: 12px; padding-right: 12px; }

/* GNB — 가운데 정렬 */
.cm-gnb-row { justify-content: center; }
.cm-gnb-i > a { padding: 16px 22px !important; }

/* 로고줄 — 로고 / 검색 / 우측버튼을 한 줄에 균형 있게 */
.kt-logorow .kt-wrap { justify-content: space-between; }
.kt-logorow .kt-hdsearch { flex: 1 1 auto; max-width: 620px; margin: 0 auto; }

@media (max-width: 1024px) {
  .kt-utilbar .kt-wrap, .kt-logorow .kt-wrap, .cm-gnb .kt-wrap, .kt-foot .kt-wrap {
    padding-left: 14px; padding-right: 14px;
  }
  .cm-gnb-row { justify-content: flex-start; }
}