/* spiralduct.bosungworld.com — 스파이럴덕트시공 */
:root{
  --deep:#0E2F2A;
  --accent:#C45A32;
  --accent-soft:#F6E8E0;
  --accent-btntext:#FFFFFF;
  --bar-chrome:#E9EBEE;
  --bg:#FFFFFF;
  --bg-soft:#F7F6F4;
  --ink:#1A1A1A;
  --desc:#4B5563;
  --font-body:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
  --font-kr:"Noto Sans KR","Pretendard Variable",Pretendard,sans-serif;
  --radius-btn: v-round;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700;letter-spacing:-.01em;line-height:1.25}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,opacity .15s ease;border-radius:12px}
body.shape-rect .btn{border-radius:4px}
body.shape-round .btn{border-radius:12px}
body.shape-pill .btn{border-radius:999px}
.btn-primary{background:var(--accent);color:var(--accent-btntext)}
.btn-primary:hover{opacity:.9}
.btn-outline{background:transparent;border-color:var(--accent);color:var(--ink)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}

/* 헤더 B-22 */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
.header-inner{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:19px;color:#fff;transition:color .3s ease;white-space:nowrap}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav a{font-size:14.5px;font-weight:600;color:#fff;transition:color .3s ease;white-space:nowrap}
.main-nav .btn-nav{color:var(--accent-btntext)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:22px;height:2px;background:#fff;transition:background .3s ease}
.site-header.scrolled{background:var(--bar-chrome);border-bottom:1px solid #E5E7EB;box-shadow:0 1px 16px rgba(0,0,0,.06)}
.site-header.scrolled .logo,.site-header.scrolled .main-nav a:not(.btn-nav){color:var(--ink)}
.site-header.scrolled .hamburger span{background:var(--ink)}
.mobile-nav{position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100%;background:#fff;z-index:1100;display:flex;flex-direction:column;gap:6px;padding:90px 28px 28px;transition:right .3s ease;box-shadow:-8px 0 30px rgba(0,0,0,.12)}
.mobile-nav.open{right:0}
.mobile-nav a{padding:14px 4px;font-weight:600;border-bottom:1px solid #F0F0F0}

/* 히어로 — 풀블리드 배너 + 타이포 강조(D DNA 해석) */
.hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:#111 var(--hero-img) center/cover no-repeat}
.hero-bgimg{position:absolute;inset:0;background-size:cover;background-position:center;animation:heroZoom 20s ease-in-out infinite alternate}
@keyframes heroZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,20,18,0) 35%,rgba(10,14,12,.72) 100%)}
.hero-content{position:relative;z-index:2;width:100%;padding:0 24px 68px;max-width:1160px;margin:0 auto}
.hero-content.pos-center{text-align:center;margin-left:auto;margin-right:auto}
.hero-content.pos-right{margin-left:auto;text-align:right}
.hero h1{color:#fff;font-size:clamp(34px,5.4vw,60px);white-space:nowrap;margin-bottom:14px}
.hero .hero-sub{color:#EDEDED;font-size:clamp(14px,1.6vw,17px);white-space:nowrap;margin-bottom:26px}
.hero .hero-cta{display:flex;gap:12px}
.hero-content.pos-center .hero-cta{justify-content:center}
.hero-content.pos-right .hero-cta{justify-content:flex-end}

/* 서브페이지 상단 배너 (흐림 배경 + 타이틀) */
.subhero{position:relative;min-height:280px;display:flex;align-items:center;padding-top:90px;padding-bottom:36px;background:#111 var(--hero-img) center/cover no-repeat}
.subhero::before{content:"";position:absolute;inset:0;backdrop-filter:blur(1px);background:linear-gradient(180deg,rgba(10,14,12,.55),rgba(10,14,12,.72))}
.subhero-inner{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:0 24px}
.subhero .eyebrow{color:var(--accent-soft)}
.subhero h1{color:#fff;font-size:clamp(26px,4vw,42px);margin-top:8px}

/* 섹션 공통 */
section{padding:88px 0}
.section-head{margin-bottom:40px}
.section-head .sec-label{font-family:var(--font-kr);font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.06em}
.section-head h2{font-size:clamp(24px,3vw,34px);margin-top:10px}
.bg-soft{background:var(--bg-soft)}

/* 전후 비교 카드 */
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.compare-card{background:#fff;border:1px solid #ECECEC;border-radius:14px;overflow:hidden}
.compare-card .imgwrap{position:relative;aspect-ratio:4/3;overflow:hidden}
.compare-card img{width:100%;height:100%;object-fit:cover}
.compare-card .cap{padding:16px 18px}
.compare-card .cap .region{font-size:12px;color:var(--accent);font-weight:700;margin-bottom:4px}
.compare-card .cap h3{font-size:16px}

/* 서비스 카드 (SVG 아이콘) */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.service-card{padding:30px 24px;background:#fff;border:1px solid #ECECEC;border-radius:14px}
.service-card svg{width:40px;height:40px;color:var(--accent);margin-bottom:18px}
.service-card h3{font-size:17px;margin-bottom:8px}
.service-card p{font-size:14px;color:var(--desc)}

/* 정보/가이드 요약 */
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.guide-card{padding:22px;background:#fff;border:1px solid #ECECEC;border-radius:12px}
.guide-card .sym{color:var(--accent);font-weight:700;font-size:13px;margin-bottom:8px}
.guide-card h3{font-size:15.5px;margin-bottom:6px}
.guide-card p{font-size:13.5px;color:var(--desc)}

/* 프로세스 스텝 */
.process-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.process-item{position:relative;padding-top:12px}
.process-item .num{font-family:var(--font-kr);font-size:34px;font-weight:800;color:var(--accent-soft);-webkit-text-stroke:1px var(--accent)}
.process-item h3{font-size:16px;margin:10px 0 6px}
.process-item p{font-size:13.5px;color:var(--desc)}

/* FAQ */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid #ECECEC}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 4px;font-size:16px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;gap:16px}
.faq-q .sym{color:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a p{padding:0 4px 20px;color:var(--desc);font-size:14.5px}
.faq-item.open .faq-a{max-height:400px}

/* Closing B-25 */
.closing{position:relative;height:650px;background:#111 var(--closing-img) center/cover no-repeat}
.closing::after{content:"";position:absolute;inset:0;background:rgba(19,19,19,.55)}
.closing-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding:0 24px}
.closing-inner p{color:#fff;font-size:clamp(20px,2.6vw,30px);font-weight:700;max-width:640px}
.closing-inner .btn{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}

/* 플로팅 상담 */
.float-consult{position:fixed;bottom:120px;z-index:900;display:flex;align-items:center;transition:transform .25s ease}
.float-left{left:18px}
.float-right{right:18px}
.float-toggle{width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--accent-btntext);border:0;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.float-number{max-width:0;overflow:hidden;white-space:nowrap;background:var(--ink);color:#fff;border-radius:999px;font-weight:600;font-size:13px;transition:max-width .25s ease,padding .25s ease}
.float-left .float-number{order:2;margin-left:8px}
.float-right .float-number{order:-1;margin-right:8px;text-align:right}
.float-consult.show-number .float-number{max-width:180px;padding:14px 16px}

/* 하단 상담바 B-23 */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--bar-chrome);border-top:1px solid #E5E7EB;box-shadow:0 -6px 22px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px;transform:translateY(100%);opacity:0;transition:transform .3s ease,opacity .3s ease}
.bottom-bar.show{transform:translateY(0);opacity:1}
.bottom-bar-copy{font-size:14px;font-weight:600;color:var(--ink)}
.bottom-bar .btn{padding:11px 18px;font-size:14px}

/* 푸터 */
.site-footer{background:var(--deep);color:#fff;padding:56px 24px 26px}
.footer-biz{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-guide-link{display:block;font-size:13.5px;color:rgba(255,255,255,.65);margin-bottom:8px}
.footer-col-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);opacity:.85;font-weight:700;margin-bottom:12px}
.footer-logo{font-size:19px;font-weight:800;margin-bottom:10px}
.footer-tagline{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:10px}
.footer-area{font-size:13px;color:rgba(255,255,255,.5);white-space:nowrap}
.footer-biz .biz-name{font-weight:700;font-size:15px;margin-bottom:8px}
.footer-biz .biz-reg{font-size:13px;color:rgba(255,255,255,.65)}
.footer-biz .biz-hours{font-size:13.5px;color:rgba(255,255,255,.65);white-space:nowrap;margin-bottom:16px}
.footer-btns{display:flex;gap:10px}
.copyright{max-width:1160px;margin:26px auto 0;font-size:12px;color:rgba(255,255,255,.4)}

/* 갤러리/시공사례 본문 이미지 규칙 (전 사이트 공통) */
.case-body{max-width:720px;margin:0 auto;padding:0 24px}
.case-hero-img{width:550px;height:410px;max-width:100%;aspect-ratio:550/410;object-fit:cover;border-radius:18px;margin:0 auto 30px;display:block}
.case-label{font-size:11px;color:#8a8a8a;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.case-body h1{font-size:clamp(22px,3vw,28px);margin-bottom:18px}
.case-body .body-text{font-size:15.5px;color:#374151;white-space:pre-line}
.case-body .body-text b{color:var(--ink)}

/* 갤러리 그리드 */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery-card{border-radius:14px;overflow:hidden;border:1px solid #ECECEC}
.gallery-card .imgwrap{aspect-ratio:4/3;overflow:hidden}
.gallery-card img{width:100%;height:100%;object-fit:cover}
.gallery-card .cap{padding:16px 18px}

/* Guide 허브 */
.hub-desc{color:#EDEDED;margin-top:10px;font-size:15px}
.hub-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.hub-card{flex:0 1 calc((100% - 48px)/3);background:#fff;border:1px solid #ECECEC;border-radius:14px;overflow:hidden;display:block}
.hub-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hub-cap{padding:18px 20px 22px}
.hub-cap h2{font-size:19px;margin:6px 0}
.hub-cap p:not(.eyebrow){font-size:14px;color:var(--desc);margin-bottom:12px}
.hub-more{font-size:13.5px;font-weight:700;color:var(--accent)}
.hub-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:14px;color:var(--desc)}
/* Guide 상세 하단 관련 사례 */
.rel-sec{padding:56px 0}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{background:#fff;border:1px solid #ECECEC;border-radius:12px;overflow:hidden;display:block}
.rel-card img{width:100%;height:170px;object-fit:cover}
.rel-card span{display:block;padding:12px 14px;font-size:14px;font-weight:600}
.mobile-nav a{word-break:keep-all}

@media (max-width:900px){
  .service-grid,.process-list{grid-template-columns:repeat(2,1fr)}
  .guide-grid{grid-template-columns:repeat(2,1fr)}
  .compare-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .main-nav{display:none}
  .hamburger{display:flex}
  .rel-grid{grid-template-columns:1fr}
  .hub-card{flex-basis:100%}
  body{word-break:keep-all}
  .mobile-nav{top:0;right:0;left:0;width:100%;max-width:none;height:auto;top:62px;padding:10px 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .mobile-nav.open{opacity:1;pointer-events:auto}
  .mobile-nav a{padding:12px 2px;font-size:14px;text-align:center;white-space:nowrap;border-bottom:0}
  .mobile-nav .btn{padding:12px 2px}
}
@media (max-width:640px){
  .main-nav{display:none}
  .hamburger{display:flex}
  .service-grid,.process-list,.guide-grid,.compare-grid,.gallery-grid{grid-template-columns:1fr}
  .hero h1,.hero .hero-sub{white-space:normal}
  .footer-biz{grid-template-columns:1fr;text-align:center;justify-items:center;gap:28px}
  .footer-btns{justify-content:center}
  .closing{height:520px}
  .bottom-bar{flex-wrap:wrap;text-align:center}
}