/* =====================================================================
   최저가콜 네트워크 공용 스타일시트 (site.css)
   - 모든 사이트(루트/이사비교/전월세시세/펫케어)가 이 파일 하나만 사용한다.
   - 사이트별 색상은 각 페이지 <head>에서 --accent 변수 한 줄만 오버라이드.
   - 절대 페이지마다 <style> 새로 만들지 말 것.
   - 방향: GeneratePress 마케팅 페이지 톤 — 카드에 실제 입체감(그림자),
     큼직한 라운드, 굵고 확실한 CTA, 여백은 넉넉하게. 하지만 색은 절제.
   ===================================================================== */

:root {
  --accent: #e8351f; /* 기본값(루트). 각 사이트 페이지에서 오버라이드 */
  --accent-tint: color-mix(in srgb, var(--accent) 10%, #fff);
  --accent-tint2: color-mix(in srgb, var(--accent) 6%, #fff);
  --accent-ink: color-mix(in srgb, var(--accent) 82%, #000);

  --ink: #16171a;
  --text: #4b4f57;
  --muted: #888c96;
  --line: #e8e9ec;
  --surface: #f6f7f9;
  --bg: #ffffff;

  --radius: 14px;
  --radius-sm: 10px;
  --container: 1280px;

  --shadow-sm: 0 1px 2px rgba(20,20,30,.04), 0 1px 1px rgba(20,20,30,.03);
  --shadow-md: 0 8px 24px rgba(20,20,30,.08), 0 2px 6px rgba(20,20,30,.04);
  --shadow-lg: 0 16px 40px rgba(20,20,30,.12), 0 4px 10px rgba(20,20,30,.05);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Pretendard Variable","Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color: inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ===== 유틸바 ===== */
.util-bar { background:var(--ink); color:#9a9da4; font-size:11.5px; }
.util-inner { max-width:var(--container); margin:0 auto; padding:7px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.util-links { display:flex; gap:16px; flex-wrap:wrap; }
.util-links a { color:#9a9da4; text-decoration:none; }
.util-links a:hover { color:#fff; }
.util-links a.current { color:#fff; font-weight:700; }
.util-right { opacity:.9; }
.util-brand { color:#c7c9ce; font-weight:700; letter-spacing:.2px; }

/* ===== 헤더 ===== */
header.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { max-width:var(--container); margin:0 auto; padding:22px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.logo { font-size:28px; font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:-0.3px; }
.logo span { color: var(--accent); }
.cat-badge { font-size:11px; font-weight:700; color:#fff; background:var(--accent); padding:4px 10px; border-radius:999px; margin-left:4px; }

.header-search { display:flex; align-items:center; flex:1; max-width:400px; margin-left:auto; background:var(--surface); border:1px solid transparent; border-radius:999px; overflow:hidden; transition:border-color .15s ease, background .15s ease; }
.header-search:focus-within { background:#fff; border-color:var(--accent); box-shadow:var(--shadow-sm); }
.header-search input { flex:1; border:0; outline:0; padding:13px 6px 13px 20px; font-size:15px; background:transparent; }
.header-search button { border:0; background:var(--accent); color:#fff; font-weight:700; font-size:14px; padding:11px 22px; margin:4px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:filter .15s ease, transform .1s ease; }
.header-search button:hover { filter:brightness(1.08); }
.header-search button:active { transform:scale(.97); }
@media (max-width:760px) { .header-search { max-width:none; width:100%; order:3; margin-left:0; } }

/* ===== 햄버거 토글 버튼 (모바일 전용) ===== */
.nav-toggle { display:none; width:40px; height:40px; border:0; background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; margin-left:auto; }
.nav-toggle-bar { width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity:0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ===== 메인 nav (그룹 드롭다운) ===== */
nav.main-nav { background:#fff; border-bottom:1px solid var(--line); }
.main-nav-inner { max-width:var(--container); margin:0 auto; padding:2px 20px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

nav.main-nav a.nav-home { font-size:15px; font-weight:600; color:var(--text); text-decoration:none; padding:13px 18px; display:inline-block; border-radius:999px; margin:6px 0; transition:background .15s ease, color .15s ease; }
nav.main-nav a.nav-home:hover { background:var(--surface); color:var(--ink); }
nav.main-nav a.nav-home.active { color:#fff; background:var(--accent); font-weight:700; }

.nav-group { position:relative; }
.nav-group-toggle { list-style:none; cursor:pointer; font-size:15px; font-weight:600; color:var(--text); padding:13px 18px; border-radius:999px; margin:6px 0; display:flex; align-items:center; gap:7px; user-select:none; transition:background .15s ease, color .15s ease; }
.nav-group-toggle::-webkit-details-marker { display:none; }
.nav-group-toggle::marker { content:""; }
.nav-group-toggle:hover { background:var(--surface); color:var(--ink); }
.nav-group.has-active > .nav-group-toggle { color:var(--accent-ink); }
.nav-group[open] > .nav-group-toggle { background:var(--surface); color:var(--ink); }

.nav-caret { width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .15s ease, margin-top .15s ease; flex-shrink:0; }
.nav-group[open] .nav-caret { transform:rotate(-135deg); margin-top:3px; }

.nav-group-menu { position:absolute; top:100%; left:0; margin-top:4px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:8px; min-width:190px; display:flex; flex-direction:column; gap:1px; z-index:200; }
.nav-group-menu a { font-size:14.5px; font-weight:500; color:var(--text); text-decoration:none; padding:10px 14px; border-radius:8px; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.nav-group-menu a:hover { background:var(--surface); color:var(--ink); }
.nav-group-menu a.active { color:#fff; background:var(--accent); font-weight:700; }

/* ===== 소그룹 (드롭다운 안 드롭다운, 2뎁스) ===== */
.nav-subgroup { border-radius:8px; }
.nav-subgroup + .nav-subgroup { margin-top:2px; }
.nav-subgroup-toggle { list-style:none; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; padding:9px 14px; border-radius:8px; display:flex; align-items:center; justify-content:space-between; gap:7px; user-select:none; transition:background .15s ease, color .15s ease; }
.nav-subgroup-toggle::-webkit-details-marker { display:none; }
.nav-subgroup-toggle::marker { content:""; }
.nav-subgroup-toggle:hover { background:var(--surface); color:var(--ink); }
.nav-subgroup.has-active > .nav-subgroup-toggle { color:var(--accent-ink); }
.nav-subgroup[open] > .nav-subgroup-toggle { color:var(--ink); }
.nav-caret-sm { width:6px; height:6px; margin-top:-2px; }
.nav-subgroup[open] .nav-caret-sm { transform:rotate(-135deg); margin-top:2px; }
.nav-subgroup-menu { display:flex; flex-direction:column; gap:1px; padding:0 4px 6px 10px; }
.nav-subgroup-menu a { font-size:14px; font-weight:500; color:var(--text); text-decoration:none; padding:9px 14px; border-radius:8px; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.nav-subgroup-menu a:hover { background:var(--surface); color:var(--ink); }
.nav-subgroup-menu a.active { color:#fff; background:var(--accent); font-weight:700; }

@media (max-width:760px) {
  .nav-subgroup-toggle { padding:12px 8px; }
  .nav-subgroup-menu { padding:0 4px 8px 16px; }
}

/* ===== 모바일: 햄버거 + 아코디언 패널 ===== */
@media (max-width:760px) {
  .nav-toggle { display:flex; }

  nav.main-nav { display:none; border-top:1px solid var(--line); }
  nav.main-nav.is-open { display:block; }

  .main-nav-inner { flex-direction:column; align-items:stretch; gap:0; padding:6px 20px 16px; }

  nav.main-nav a.nav-home { border-radius:0; margin:0; padding:15px 4px; border-bottom:1px solid var(--line); }

  .nav-group { border-bottom:1px solid var(--line); }
  .nav-group-toggle { width:100%; justify-content:space-between; border-radius:0; margin:0; padding:15px 4px; }
  .nav-group[open] > .nav-group-toggle { background:transparent; }

  .nav-group-menu { position:static; margin-top:0; border:0; box-shadow:none; padding:2px 4px 10px 14px; min-width:0; background:transparent; }
  .nav-group-menu a { padding:11px 10px; }
}

.ticker-bar { background:var(--surface); color:var(--text); font-size:13.5px; padding:11px 20px; display:flex; align-items:center; gap:10px; overflow:hidden; border-bottom:1px solid var(--line); }
.ticker-bar .tag { background:var(--accent); color:#fff; padding:3px 9px; border-radius:999px; font-weight:700; flex-shrink:0; font-size:11px; }
.ticker-bar .msg { white-space:nowrap; opacity:.9; }

/* ===== 전체 서비스 (포털형 카테고리 그리드) ===== */
.service-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-bottom:40px; }
@media (max-width:760px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
.service-card { position:relative; display:block; padding:26px 22px 22px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow:hidden; }
.service-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--svc-accent,var(--accent)); }
.service-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--svc-accent,var(--accent)); }
.svc-badge { display:inline-block; font-size:12px; font-weight:700; color:var(--svc-accent,var(--accent)); background:color-mix(in srgb, var(--svc-accent,var(--accent)) 12%, #fff); padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.svc-name { font-size:19px; font-weight:800; color:var(--ink); margin-bottom:7px; letter-spacing:-0.2px; }
.svc-desc { font-size:14px; color:var(--muted); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== 컨텐츠 컨테이너 ===== */
.container { max-width: 1080px; margin:0 auto; padding: 40px 20px 90px; }
.container-narrow { max-width: 720px; margin:0 auto; padding: 48px 20px 80px; }
.crumb { font-size:13px; color:var(--muted); margin-bottom:22px; }
.crumb a { color:var(--text); text-decoration:none; }
.crumb a:hover { color:var(--accent); text-decoration:underline; }

/* ===== 히어로 ===== */
.hero { padding: 4px 0 40px; }
.eyebrow { display:inline-flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--accent); background:var(--accent-tint); padding:6px 14px; border-radius:999px; margin-bottom:16px; }
.hero h1 { margin-bottom:12px; }
.hero p { color:var(--text); font-size:17.5px; max-width:680px; }

h1 { font-size: clamp(30px,4.5vw,44px); font-weight:800; color:var(--ink); margin-bottom:16px; letter-spacing:-0.6px; line-height:1.25; }
h2 { font-size:23px; font-weight:800; color:var(--ink); margin:40px 0 18px; letter-spacing:-0.2px; }
.lead { color:var(--text); font-size:14.5px; max-width:680px; margin-bottom:28px; }
.content p { color:var(--text); font-size:14.5px; margin-bottom:14px; max-width:680px; }

/* 약관/개인정보/소개 등 심플 문서형 페이지 */
.container-narrow h1 { font-size:27px; margin-bottom:22px; }
.container-narrow h2 { font-size:16px; font-weight:700; margin:30px 0 10px; }
.container-narrow a { color: var(--accent); }
.container-narrow p, .container-narrow li { font-size:14px; color:var(--text); margin-bottom:10px; }
.container-narrow ul, .container-narrow ol { padding-left:20px; margin-bottom:14px; }
.updated { font-size:12px; color:var(--muted); margin-bottom:30px; }
table { width:100%; border-collapse:separate; border-spacing:0; margin:16px 0; font-size:13px; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
th, td { border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; }
tr:last-child td { border-bottom:0; }
th { background:var(--surface); font-weight:700; }

.ad-slot { margin: 26px 0; text-align:center; }
.ad-slot span.label { display:block; font-size:10px; color:var(--muted); margin-bottom:6px; letter-spacing:.5px; }

/* ===== 파트너 카드 — 실제 입체감 있는 그림자 카드 ===== */
.grid, .grid2 { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
@media (max-width:620px) { .grid, .grid2 { grid-template-columns:1fr; } }
.card { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:relative; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.card .kicker { display:block; font-size:11px; font-weight:800; color:var(--accent); letter-spacing:.4px; margin-bottom:9px; }
.card .arrow { position:absolute; top:20px; right:20px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface); font-size:14px; color:var(--muted); transition:background .2s ease, color .2s ease, transform .2s ease; }
.card:hover .arrow { background:var(--accent); color:#fff; transform:translate(1px,-1px); }
.card .name { font-size:19px; font-weight:800; margin-bottom:7px; padding-right:24px; color:var(--ink); }
.card .desc { font-size:14px; color:var(--muted); }

/* ===== 지역/구/동 — 얕은 카드형, 파트너 카드보다 한 단계 조용하게 ===== */
.region-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
@media (max-width:700px) { .region-grid { grid-template-columns: repeat(2,1fr); } }
.region-card { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:15px 17px; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, border-color .15s ease; }
.region-card:hover { box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--accent) 25%, var(--line)); }
.region-card .rname { font-weight:700; font-size:14.5px; margin-bottom:4px; color:var(--ink); }
.region-card .rdesc { font-size:12px; color:var(--muted); }

.region-list { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.region-row { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; text-decoration:none; color:inherit; border-bottom:1px solid var(--line); }
.region-row:last-child { border-bottom:none; }
.region-row:hover { background:var(--surface); }
.region-row .rname { font-weight:700; font-size:15.5px; width:70px; flex-shrink:0; color:var(--ink); }
.region-row .rdesc { font-size:14px; color:var(--muted); flex:1; padding:0 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.region-row .rgo { font-size:13px; color:#fff; font-weight:700; flex-shrink:0; background:var(--accent); padding:6px 14px; border-radius:999px; }

.dong-section h2 { margin-top:30px; }
.dong-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:9px; }
@media (max-width:700px) { .dong-grid { grid-template-columns: repeat(2,1fr); } }
.dong-grid a { display:block; padding:10px 13px; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--line); color:var(--text); text-decoration:none; font-size:13px; transition:box-shadow .15s ease, border-color .15s ease, color .15s ease; }
.dong-grid a:hover { box-shadow:var(--shadow-sm); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); color:var(--accent); }

.districts { margin: 34px 0; }
.district-list { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.district-list a { font-size:13px; padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--text); text-decoration:none; transition:border-color .15s ease, color .15s ease; }
.district-list a:hover { border-color:var(--accent); color:var(--accent); }
.district-note { font-size:13px; color:var(--muted); }

.faq { margin: 34px 0; }
.faq-item { margin-bottom:12px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.faq-q { font-weight:700; font-size:14px; margin-bottom:6px; color:var(--ink); }
.faq-a { font-size:13px; color:var(--text); }
.faq-item h3 { font-size:14px; color:var(--ink); margin-bottom:6px; font-weight:700; border:none; padding:0; }
.faq-item p { font-size:13px; color:var(--text); margin:0; }

.sibling, .nearby, .other-regions { margin-top:36px; }
.sibling h2, .nearby h2, .other-regions h2 { font-size:13.5px; color:var(--muted); margin-bottom:12px; font-weight:700; }
.sibling-grid, .nearby-grid, .other-grid { display:flex; flex-wrap:wrap; gap:9px; }
.sibling-grid a, .nearby-grid a, .other-grid a { font-size:13px; padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--text); text-decoration:none; transition:border-color .15s ease, color .15s ease; }
.sibling-grid a:hover, .nearby-grid a:hover, .other-grid a:hover { border-color:var(--accent); color:var(--accent); }

.section-title { display:flex; align-items:center; gap:10px; margin:38px 0 18px; font-size:21px; font-weight:800; color:var(--ink); }
.section-title .bar { width:6px; height:18px; background:var(--accent); border-radius:3px; }
.section-title .more { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--accent); text-decoration:none; }
.section-title .more:hover { text-decoration:underline; }

.layout { display:grid; grid-template-columns: 1fr 280px; gap:28px; }
.layout > main, .layout > aside { min-width:0; } /* 그리드 아이템 기본 min-width:auto가 내부 region-list(overflow:hidden 중첩 flex)의 컨텐츠 크기를 최소폭으로 강제해 모바일 가로 스크롤을 유발하던 문제 수정 */
@media (max-width:900px) { .layout { grid-template-columns:1fr; } }
aside .widget { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
aside .widget h3 { font-size:13px; font-weight:800; margin-bottom:14px; color:var(--ink); }
.rank-list { list-style:none; display:flex; flex-direction:column; gap:11px; }
.rank-list a { font-size:13px; color:var(--text); text-decoration:none; }
.rank-list a:hover { color:var(--accent); }
.rank-num { font-size:11.5px; font-weight:800; color:#fff; background:var(--accent); width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-right:2px; }

/* =====================================================================
   공통 푸터 — 그리드 사이트맵.
   ===================================================================== */
footer.site-footer { background:var(--ink); color:#a7abb3; margin-top:32px; }
.footer-family { background:#232529; border-bottom:1px solid #35373c; }
.footer-family-inner { max-width:var(--container); margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-family-label { font-size:10.5px; font-weight:700; color:#75787f; letter-spacing:.5px; margin-right:6px; }
.footer-family-chip { font-size:12.5px; font-weight:600; color:#c7c9ce; text-decoration:none; padding:7px 15px; border-radius:999px; background:#2b2d32; border:1px solid #3a3c42; transition:border-color .15s ease, color .15s ease; }
.footer-family-chip:hover { border-color:var(--chip-accent,#7a7d84); color:#fff; }
.footer-family-chip.current { background:var(--chip-accent,#e8351f); border-color:var(--chip-accent,#e8351f); color:#fff; }
.footer-inner { padding:44px 20px 32px; max-width:var(--container); margin:0 auto; display:grid; grid-template-columns: repeat(5, 1fr); gap:30px 20px; }
@media (max-width:900px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-col h4 { font-size:12px; color:#fff; font-weight:700; margin-bottom:13px; letter-spacing:.2px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:8px; }
.footer-col a { color:#9a9da4; text-decoration:none; font-size:12.5px; }
.footer-col a:hover { color:#fff; }
.footer-region-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:2px 10px; }
@media (max-width:900px) { .footer-region-grid { grid-template-columns: repeat(2, 1fr); } }
.footer-region-grid li { margin-bottom:6px; }
.footer-network a.current { color:var(--accent); font-weight:700; }
.footer-bottom { max-width:var(--container); margin:26px auto 0; padding:20px 20px 0; border-top:1px solid #303236; text-align:center; }
.footer-bottom p { font-size:11px; color:#6d7078; }
