:root{
  --main:#1E3A8A;
  --accent:#2563EB;
  --point:#DC2626;
  --bg:#F8FAFC;
  --text:#1a2233;
  --muted:#5b6472;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 8px 28px rgba(30,58,138,0.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
  letter-spacing:-0.01em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,p{overflow-wrap:break-word;word-break:keep-all;}
a{text-decoration:none;color:inherit;}
h1,h2,h3{line-height:1.35;margin:0 0 .6em;font-weight:800;}
p{margin:0 0 1em;}
.container{max-width:1120px;margin:0 auto;padding:0 20px;}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,0.06);}
.header-inner{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.logo{font-size:1.25rem;font-weight:800;color:var(--main);white-space:nowrap;}
.main-nav{display:flex;gap:14px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.main-nav::-webkit-scrollbar{display:none;}
.main-nav a{font-size:.94rem;font-weight:600;color:var(--text);padding:12px 4px;white-space:nowrap;display:inline-flex;align-items:center;}
.main-nav a.active,.main-nav a:hover{color:var(--accent);}
.btn-header-call{background:var(--point);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:.92rem;white-space:nowrap;display:inline-flex;align-items:center;}

/* Floating CTA */
.floating-cta{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:200;background:var(--accent);color:#fff;padding:14px 20px;border-radius:999px;font-weight:700;box-shadow:0 10px 24px rgba(37,99,235,0.35);}

/* Hero (메인급 임팩트, 전 페이지 공통 — 기본값) */
.hero{position:relative;color:#fff;padding:96px 20px 80px;text-align:center;background-size:cover;background-position:center;isolation:isolate;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(30,58,138,.92),rgba(37,99,235,.82));z-index:-1;}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.4em;}
.hero p{font-size:clamp(1rem,2vw,1.2rem);max-width:720px;margin:0 auto 1.6em;opacity:.95;}
.hero .btn-cta-primary{display:inline-block;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}

/* 오버레이 투명 (배경 사진을 그대로 노출) */
.hero-clear::before{opacity:0;}
.hero-clear h1,.hero-clear p{text-shadow:0 2px 10px rgba(0,0,0,.55);}

/* 메인페이지 전용 비디오 히어로: 오버레이 투명 + 세로폭 확장 */
.hero-main{min-height:82vh;min-height:82dvh;display:flex;align-items:center;justify-content:center;}
.hero-main::before{opacity:0;}

/* Buttons */
.btn-cta-primary{background:var(--point);color:#fff;padding:16px 34px;border-radius:999px;font-weight:800;font-size:1.05rem;box-shadow:var(--shadow);}
.btn-cta-secondary{background:#fff;color:var(--main);padding:14px 30px;border-radius:999px;font-weight:700;border:2px solid var(--main);}

/* Sections */
section.block{padding:64px 20px;}
section.block.bg-soft{background:#EEF2FF;}
.section-title{text-align:center;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.3em;}
.section-sub{text-align:center;color:var(--muted);max-width:680px;margin:0 auto 2.4em;}

/* 2-col symmetric */
.split-2col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:1120px;margin:0 auto;}
.split-2col img{border-radius:var(--radius);box-shadow:var(--shadow);}
.split-2col.reverse{direction:rtl;}
.split-2col.reverse>*{direction:ltr;}

/* Card grid 3col */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1120px;margin:0 auto;}
.card{background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);}
.card .icon{font-size:2rem;margin-bottom:.5em;}

/* Horizontal divider list */
.divider-list{max-width:820px;margin:0 auto;}
.divider-list li{list-style:none;padding:20px 0;border-bottom:1px solid #e2e8f0;}
.divider-list li:first-child{border-top:1px solid #e2e8f0;}
.divider-list h4{margin:0 0 .3em;color:var(--main);}

/* Highlight box */
.highlight-box{background:var(--accent);color:#fff;border-radius:var(--radius);padding:34px 30px;max-width:900px;margin:0 auto;text-align:center;}

/* Split fixed-nav layout */
.split-fixed{display:grid;grid-template-columns:280px 1fr;gap:40px;max-width:1120px;margin:0 auto;}
.split-fixed .side{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);align-self:start;position:sticky;top:90px;}
.split-fixed .side h4{color:var(--main);}

/* Timeline */
.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:28px;border-left:3px solid var(--accent);}
.timeline .step{position:relative;margin-bottom:34px;}
.timeline .step::before{content:"";position:absolute;left:-35px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--point);}
.timeline .step h4{color:var(--main);margin-bottom:.3em;}

/* Wide banner */
.wide-banner{background:linear-gradient(120deg,var(--main),var(--accent));color:#fff;text-align:center;padding:54px 20px;border-radius:var(--radius);max-width:1120px;margin:0 auto;}

/* Dark section */
.dark-section{background:#0f172a;color:#e2e8f0;padding:70px 20px;}
.dark-section h2{color:#fff;}
.dark-section .section-sub{color:#94a3b8;}

/* Zigzag */
.zigzag-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:1120px;margin:0 auto 40px;}
.zigzag-row.reverse{direction:rtl;}
.zigzag-row.reverse>*{direction:ltr;}
.zigzag-row img{border-radius:var(--radius);}

/* Bold headline layout */
.bold-block{max-width:900px;margin:0 auto;text-align:center;}
.bold-block h2{font-size:clamp(1.8rem,4vw,2.6rem);}

/* Magazine layout */
.magazine{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;max-width:1120px;margin:0 auto;align-items:start;}
.magazine .lead{font-size:1.15rem;font-weight:700;color:var(--main);}
.magazine .side-panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;}

/* Numbered circle badges */
.badge-list{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1000px;margin:0 auto;}
.badge-item{display:flex;gap:16px;align-items:flex-start;}
.badge-num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--point);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;}

/* Bordered grid */
.border-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;max-width:1000px;margin:0 auto;border:1px solid #e2e8f0;border-radius:var(--radius);overflow:hidden;}
.border-grid>div{padding:26px;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;}

/* Before/After */
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto;}
.before-after figure{margin:0;}
.before-after figcaption{text-align:center;font-weight:700;margin-top:8px;color:var(--muted);}

/* 시공사례: 영상 + 사진 그리드 */
.case-video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:640px;margin:0 auto 32px;}
.case-video-grid video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);background:#000;}
.photo-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px;margin:0 auto;}
.photo-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);}

/* 지역서비스 허브 카드 */
.region-card{display:block;transition:transform .15s ease,box-shadow .15s ease;}
.region-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(30,58,138,0.16);}

/* Direct contact buttons (estimate page) */
.direct-buttons{display:flex;flex-direction:column;gap:16px;max-width:520px;margin:0 auto;}
.direct-buttons a{display:block;text-align:center;padding:20px;border-radius:var(--radius);font-weight:800;font-size:1.1rem;box-shadow:var(--shadow);}
.direct-buttons .call{background:var(--point);color:#fff;}
.direct-buttons .sms{background:var(--main);color:#fff;}

/* Footer */
.footer-cta{background:var(--main);color:#fff;text-align:center;padding:56px 20px;}
.footer-cta h2{color:#fff;}
.footer-sitemap{background:#eef2ff;padding:40px 20px;}
.footer-sitemap h3{text-align:center;color:var(--main);}
.footer-sitemap ul{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding:0;list-style:none;}
.footer-sitemap a{color:var(--text);font-weight:600;font-size:.94rem;}
.footer-sitemap a:hover{color:var(--accent);}
.site-footer{background:#0f172a;color:#94a3b8;padding:26px 20px;font-size:.86rem;}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:6px;}
.footer-sitemap-link{margin-left:10px;color:#64748b;text-decoration:underline;}

/* Breadcrumb */
.breadcrumb{max-width:1120px;margin:16px auto 0;padding:0 20px;font-size:.85rem;color:var(--muted);}
.breadcrumb a{color:var(--accent);}

/* Sitemap page */
.sitemap-tools{max-width:900px;margin:0 auto 30px;display:flex;flex-direction:column;gap:14px;}
.sitemap-search{padding:12px 16px;border-radius:999px;border:1px solid #cbd5e1;font-size:1rem;width:100%;}
.sitemap-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.sitemap-cats button{padding:11px 16px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;font-weight:600;cursor:pointer;min-height:44px;}
.sitemap-cats button.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.sitemap-count{text-align:center;color:var(--muted);margin-bottom:18px;}
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;max-width:1120px;margin:0 auto;}
.sitemap-card{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);}
.sitemap-card .icon{font-size:1.8rem;}
.sitemap-card h4{margin:.4em 0;color:var(--main);}
.sitemap-card p{color:var(--muted);font-size:.9rem;}
.sitemap-empty{text-align:center;color:var(--muted);padding:40px 0;}

/* 404 */
.page-404{text-align:center;padding:100px 20px;}
.page-404 .code{font-size:5rem;font-weight:800;color:var(--accent);}

/* Related links */
.related-links{max-width:1120px;margin:0 auto;}
.related-links ul{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;}
.related-links a{background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:8px 16px;font-weight:600;font-size:.88rem;}

@media (max-width:860px){
  .split-2col,.zigzag-row,.split-fixed,.magazine,.grid-3,.badge-list,.border-grid,.before-after{grid-template-columns:1fr!important;}
  .split-fixed .side{position:static;}
  .main-nav{gap:12px;}
  .header-inner{flex-wrap:wrap;}
  .hero{padding:72px 20px 56px;}
  .hero-main{min-height:64vh;min-height:64dvh;}
}
@media (max-width:480px){
  .case-video-grid{grid-template-columns:1fr;max-width:320px;}
  .container{padding:0 16px;}
  .hero{padding:56px 16px 44px;}
  .hero-main{min-height:58vh;min-height:58dvh;}
  .logo{font-size:1.08rem;}
  .btn-header-call{padding:10px 14px;font-size:.86rem;}
  .floating-cta{padding:12px 16px;font-size:.92rem;}
}