/* 지역안내 / 배포(지역·시군구·지하철역) 페이지 전용 스타일
   - 이미지 너비 맞춤(Full-width responsive)
   - 상단 서비스 설명 및 안심 보장 뱃지 스타일링
   - 카드/칩/배너 시각적 완성도 강화 */
:root{
    --navy:#134a82;
    --brand-blue:#1a5fa0;
    --accent:#1e89eb;
    --orange:#e2572b;
    --amber:#f59e0b;
    --bg-light:#f8fafc;
}

*{box-sizing:border-box;}
body{margin:0;font-family:'Pretendard','Malgun Gothic',sans-serif;color:#333;background:#fdfdfd;}
a{text-decoration:none;color:inherit;}

/* ---- 카드/칩류: 더 둥글고 떠오르는 느낌으로 ---- */
.region-card{border-radius:16px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;box-shadow:0 1px 3px rgba(19,74,130,.08);background:#fff;border:1px solid #e2e8f0;padding:20px;display:block;}
.region-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(19,74,130,.14);border-color:#1e89eb80;}
.region-name{font-size:1.05rem;font-weight:800;color:var(--navy);margin-bottom:6px;}
.region-count{color:var(--accent);font-weight:700;font-size:.85rem;}
.kw-chip{border-radius:999px;background:#eef6ff;color:var(--navy);font-weight:700;padding:9px 16px;font-size:.88rem;display:inline-block;transition:all .15s ease;border:1px solid #d8e8f8;}
.kw-chip:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px);box-shadow:0 4px 12px rgba(19,74,130,.2);}
.kw-chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.sido-group-title{border-bottom:2px solid var(--accent);padding-bottom:8px;margin:32px auto 14px;max-width:1100px;font-size:1.15rem;font-weight:800;color:var(--navy);}
.sido-group-title a{color:var(--navy);transition:color .15s ease;}
.sido-group-title a:hover{color:var(--accent);}
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;max-width:1100px;margin:0 auto 12px;}

/* ---- 검색창 ---- */
.area-search-box{display:flex;gap:10px;max-width:600px;margin:0 auto;}
.area-search-box input{flex:1;padding:14px 18px;border:2px solid #cfe0f5;border-radius:12px;font-size:1rem;font-family:inherit;}
.area-search-box input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.area-search-box button{border-radius:12px;background:var(--navy);color:#fff;border:none;padding:0 24px;font-weight:800;font-size:1rem;cursor:pointer;transition:background .15s;}
.area-search-box button:hover{background:var(--brand-blue);}
.area-search-result{margin-top:14px;display:flex;flex-direction:column;gap:8px;max-width:600px;margin-left:auto;margin-right:auto;}
.area-search-hit{border-radius:12px;background:#eef6ff;color:var(--navy);font-weight:800;padding:12px 16px;border:1px solid #cfe0f5;}

/* ---- 상단 히어로 및 서비스 소개 섹션 ---- */
.page-hero, .hero{max-width:1100px;margin:0 auto;padding:36px 16px 20px;text-align:center;}
.page-hero h1, .hero h1{font-size:1.75rem;font-weight:900;color:var(--navy);margin:0 0 14px;line-height:1.38;word-break:keep-all;letter-spacing:-.02em;}
.service-desc-text{font-size:1.02rem;color:#4b5563;line-height:1.75;max-width:880px;margin:0 auto 18px;word-break:keep-all;}
.service-features{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin:16px auto 20px;max-width:920px;}
.service-feat-badge{display:inline-flex;align-items:center;gap:6px;background:#f0f7ff;color:var(--navy);padding:7px 14px;border-radius:20px;font-size:.88rem;font-weight:700;border:1px solid #d0e4ff;}
.service-feat-badge i{color:var(--accent);}
.service-action-bar{display:flex;justify-content:center;gap:12px;margin-top:18px;flex-wrap:wrap;}
.btn-call-direct{background:linear-gradient(90deg,var(--orange),var(--amber));color:#fff;padding:12px 26px;border-radius:30px;font-weight:800;font-size:1.05rem;box-shadow:0 4px 14px rgba(226,87,43,.3);transition:transform .15s ease;display:inline-flex;align-items:center;gap:8px;}
.btn-call-direct:hover{transform:translateY(-2px);color:#fff;}

/* ---- CTA 바 (온라인 상담 접수폼 바로가기) ---- */
.cta-bar{background:linear-gradient(90deg,var(--orange),var(--amber));color:#fff;text-align:center;padding:15px 20px;border-radius:12px;font-weight:800;font-size:1.1rem;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 14px rgba(226,87,43,.25);transition:transform .15s ease;}
.cta-bar:hover{transform:translateY(-2px);color:#fff;}

/* ---- 히어로 바로 아래 배너 (이미지 전체 100% 원본 비율 노출, 잘림 없음) ---- */
.banner-grid{max-width:960px;margin:20px auto 28px;padding:0 16px;width:100%;}
.banner-grid a{display:block;width:100%;}
.banner-grid img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 4px 16px rgba(19,74,130,.12);transition:transform .2s ease,box-shadow .2s ease;}
.banner-grid a:hover img{transform:scale(1.01);box-shadow:0 8px 24px rgba(19,74,130,.18);}

/* ---- 본문 컨테이너 ---- */
.container{max-width:1100px;margin:0 auto;padding:20px 16px 60px;}
.section-wrap{max-width:1100px;margin:0 auto;padding:0 16px 28px;}

/* ---- 현장 사진 섹션 (배포 페이지 본문 - 너비 맞춤 그리드) ---- */
.site-photo-section{max-width:1100px;margin:36px auto 0;padding:0 16px;}
.site-photo-section h3{font-size:1.2rem;font-weight:800;color:var(--navy);margin:0 0 16px;text-align:center;word-break:keep-all;}
.site-photo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.site-photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:0 2px 8px rgba(19,74,130,.10);transition:transform .2s ease;}
.site-photo-grid img:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 18px rgba(19,74,130,.18);}

/* ---- 푸터 위 2단 배너 ---- */
.pre-footer-banner-row{max-width:1100px;margin:36px auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.pre-footer-banner-row img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 4px 16px rgba(19,74,130,.10);transition:transform .2s ease;}
.pre-footer-banner-row img:hover{transform:scale(1.01);}
.pre-footer-banner{max-width:960px;margin:36px auto 0;padding:0 16px;}
.pre-footer-banner img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 4px 16px rgba(19,74,130,.10);}

/* ---- 리프 페이지 전용 하단 배너 ---- */
.bottom-banner{max-width:960px;margin:40px auto 0;padding:0 16px;text-align:center;}
.bottom-banner img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 4px 16px rgba(0,0,0,.1);}
.bottom-banner-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(90deg,var(--orange),var(--amber));color:#fff;font-weight:900;font-size:1.2rem;padding:16px 36px;border-radius:12px;margin-top:16px;box-shadow:0 4px 14px rgba(226,87,43,.3);transition:transform .15s ease;}
.bottom-banner-cta:hover{transform:translateY(-2px);color:#fff;}

/* ---- 모바일 최적화 ---- */
@media(max-width:768px){
    .page-hero, .hero{padding:28px 16px 14px;}
    .page-hero h1, .hero h1{font-size:1.35rem;}
    .service-desc-text{font-size:.92rem;line-height:1.65;}
    .service-feat-badge{font-size:.8rem;padding:5px 10px;}
    .banner-grid{padding:0 12px;margin:14px auto 20px;}
    .pre-footer-banner-row{grid-template-columns:1fr;gap:12px;padding:0 12px;}
    .site-photo-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
    .region-card{padding:14px;}
    .region-name{font-size:.98rem;}
    .kw-chip{padding:7px 12px;font-size:.82rem;}
    .cta-bar{font-size:1rem;padding:13px 16px;}
}
@media(max-width:480px){
    .page-hero h1, .hero h1{font-size:1.22rem;}
    .banner-grid{padding:0 8px;}
    .site-photo-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
    .bottom-banner-cta{width:100%;padding:14px;}
}

/* 하단 고정 CTA 바 - 아이폰 노치 대응 */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(90deg,var(--orange),var(--amber));text-align:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:100;box-shadow:0 -2px 10px rgba(0,0,0,.15);}
.sticky-bar a{color:#fff;font-weight:900;font-size:1.05rem;display:inline-flex;align-items:center;gap:6px;}
body{padding-bottom:58px;}