:root{--bg:#e9ecee;--paper:#fff;--ink:#182126;--sub:#52606a;--slate:#1d2b33;--slate2:#2a3c46;--brick:#b4532a;--brick-d:#8f3f1d;--blush:#f6e4da;--line:#cfd6da;--r:0}
*,*::before,*::after{box-sizing:border-box;word-break:keep-all;overflow-wrap:break-word;line-break:strict}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans KR","Spoqa Han Sans Neo","Malgun Gothic","Apple SD Gothic Neo",sans-serif;line-height:1.8;font-size:16px;word-break:keep-all;overflow-wrap:break-word;counter-reset:sec}
h1,h2{font-family:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;font-weight:800;letter-spacing:-.02em}
img{max-width:100%;height:auto;display:block}a{color:var(--brick-d)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
/* header: dark slate */
header.site{background:var(--slate);position:sticky;top:0;z-index:30;border-bottom:3px solid var(--brick)}
.hd{display:flex;align-items:center;gap:28px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;color:#fff;text-decoration:none;letter-spacing:.02em}
.logo img{width:28px;height:28px}
nav.gnb{margin-left:auto}nav.gnb ul{display:flex;gap:0;list-style:none;margin:0;padding:0}
nav.gnb a{display:block;padding:21px 14px;color:#c9d4da;text-decoration:none;font-size:.92rem;border-bottom:3px solid transparent;margin-bottom:-3px}
nav.gnb a:hover,nav.gnb a[aria-current]{color:#fff;border-bottom-color:#fff}
.hd-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;background:var(--brick);color:#fff;border-radius:999px;text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap}
.mnav{display:none}
/* buttons: pills */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid #fff;font-size:1rem;cursor:pointer;font-family:inherit}
.btn.p{background:var(--brick);border-color:var(--brick);color:#fff}.btn.s{background:#fff;color:var(--slate);border-color:#fff}.btn.o{background:transparent;color:#fff}
.on-light .btn.o,.sec-b .btn.o{color:var(--slate);border-color:var(--slate)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
/* hero: full-bleed photo */
.hero{position:relative;color:#fff;background:var(--slate);overflow:hidden;min-height:560px;display:flex;align-items:flex-end}
.hero>picture,.hero>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,33,38,.92) 0%,rgba(24,33,38,.72) 48%,rgba(24,33,38,.15) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:70px;padding-bottom:56px;width:100%}
.hero-t{max-width:620px}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--blush);border:1px solid rgba(255,255,255,.35);padding:3px 12px;border-radius:999px;margin:0 0 18px}
h1{font-size:clamp(2.3rem,5.6vw,3.8rem);line-height:1.15;margin:0 0 18px;color:inherit}
.lead{font-size:1.06rem;color:#dfe6ea;margin:0}
.hero-cap{position:absolute;right:24px;bottom:14px;z-index:2;font-size:.78rem;color:#cbd5db;margin:0}
.fact{display:grid;grid-template-columns:repeat(3,1fr);background:var(--slate2);color:#fff}
.fact div{padding:16px 24px;border-right:1px solid rgba(255,255,255,.12);font-size:.9rem;color:#cfd9de}.fact div:last-child{border:0}
.fact b{display:block;color:#fff;font-size:1rem}
/* sub hero: dark band with square image */
.sub-hero{background:var(--slate);color:#fff;padding:54px 0}
.sub-hero .wrap{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:center}
.sub-hero.nopic .wrap{grid-template-columns:1fr}
.sub-hero .ph img{width:100%;aspect-ratio:1/1;object-fit:cover;border:6px solid #fff;box-shadow:12px 12px 0 var(--brick)}
.sub-hero figcaption{color:#b8c5cc;margin-top:18px}
figure{margin:0}figcaption{font-size:.84rem;color:var(--sub);margin-top:8px;line-height:1.5}
/* sections: heading column + body column */
section.blk{padding:64px 0;border-top:1px solid var(--line)}section.blk.alt{background:var(--paper)}
.sec{display:grid;grid-template-columns:260px 1fr;gap:48px}
.sec-h{position:sticky;top:96px;align-self:start}
.sec-h::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);display:block;font-family:"Noto Serif KR",serif;font-size:3rem;font-weight:800;line-height:1;color:var(--brick);margin-bottom:10px}
h2{font-size:1.5rem;line-height:1.35;margin:0 0 14px;color:var(--slate)}h3{font-size:1.05rem;margin:0 0 6px;color:var(--slate)}
.sec-b>p:first-child{margin-top:0}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g5{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--slate);padding:18px 18px 16px}
section.alt .card{background:var(--bg)}
.card p{margin:0;color:var(--sub);font-size:.94rem}
.num{display:inline-block;font-family:"Noto Serif KR",serif;font-weight:800;color:var(--brick);font-size:1.4rem;line-height:1;margin-bottom:6px}
.note{background:var(--blush);border-left:5px solid var(--brick);padding:13px 18px;font-size:.92rem;color:#4a3328;margin-top:18px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair figure{background:#fff;border:1px solid var(--line)}
.pair figcaption{padding:8px 10px 10px;margin:0}
.pair figure:first-child .tag{background:#6b7780}.pair figure:last-child .tag{background:var(--brick)}
.tag{display:inline-block;color:#fff;font-weight:700;font-size:.75rem;letter-spacing:.06em;padding:1px 9px;margin-right:4px}
.pair img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#cfd6da}
.case{margin-bottom:38px}.case:last-child{margin-bottom:0}.case h3{border-left:5px solid var(--brick);padding-left:12px;font-size:1.1rem;margin-bottom:12px}
table.rt{width:100%;border-collapse:collapse;background:var(--paper);font-size:.94rem;border-top:3px solid var(--slate)}
.rt th,.rt td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.rt th{background:#dfe5e8;color:var(--slate)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-left:3px solid var(--slate)}
.steps li{counter-increment:s;padding:6px 0 18px 30px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:-17px;top:4px;width:31px;height:31px;border-radius:50%;background:var(--brick);color:#fff;text-align:center;line-height:31px;font-weight:700;font-size:.9rem}
.steps b{display:block;color:var(--slate)}
ul.chk{padding-left:1.2em;margin:8px 0}ul.chk li{margin:4px 0}
details.faq{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--slate);margin-bottom:10px}
details.faq[open]{border-left-color:var(--brick)}
details.faq summary{cursor:pointer;padding:14px 48px 14px 18px;font-weight:700;list-style:none;position:relative;min-height:50px;color:var(--slate)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"Q";color:var(--brick);font-family:"Noto Serif KR",serif;font-weight:800;margin-right:10px}
details.faq summary::after{content:"+";position:absolute;right:18px;top:11px;font-size:1.4rem;color:var(--brick)}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 18px 16px 44px;color:#34434b}
.more-wrap[hidden]{display:none}
.cta-band{background:var(--brick);color:#fff;padding:54px 0}
.cta-band .wrap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.cta-band h2{color:#fff;margin:0 0 6px}.cta-band p{margin:0}
.cta-band .btns{margin:0}.cta-band .btn.p{background:var(--slate);border-color:var(--slate)}.cta-band .btn.o{color:#fff}
.bc{font-size:.84rem;color:var(--sub);background:var(--paper);border-bottom:1px solid var(--line)}.bc .wrap{padding-top:12px;padding-bottom:12px}
.bc a{color:var(--sub)}
.updated{font-size:.84rem;color:var(--sub);margin-top:22px}
footer.site{background:#10181c;color:#a9b6bd;padding:40px 0 34px;font-size:.88rem}
footer.site a{color:#e5ecef}footer.site .fl{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 18px;padding:0 0 16px;list-style:none;border-bottom:1px solid #26343b}
footer.site p{margin:3px 0}
.mbar{display:none}
@media(max-width:900px){
 nav.gnb,.hd-cta{display:none}
 .hd{justify-content:space-between}
 .mnav{display:block;position:relative}.mnav summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;color:#fff;font-weight:700;border:1px solid #4a5d68;border-radius:999px;padding:0 18px}
 .mnav summary::-webkit-details-marker{display:none}
 .mnav ul{position:absolute;right:0;top:52px;background:var(--slate);border:1px solid #3b4e58;list-style:none;margin:0;padding:6px;width:230px;box-shadow:0 10px 28px rgba(0,0,0,.3)}
 .mnav a{display:block;padding:13px 14px;color:#e5ecef;text-decoration:none;border-bottom:1px solid #2f424c}
 h2{font-size:1.3rem}
 .hero{min-height:520px}.hero::after{background:linear-gradient(0deg,rgba(24,33,38,.94) 0%,rgba(24,33,38,.75) 55%,rgba(24,33,38,.25) 100%)}
 .hero .wrap{padding-top:44px;padding-bottom:44px}.hero-cap{display:none}
 .fact{grid-template-columns:1fr}.fact div{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
 .sub-hero .wrap{grid-template-columns:1fr;gap:28px}.sub-hero .ph{max-width:260px}
 .sec{grid-template-columns:1fr;gap:18px}.sec-h{position:static}.sec-h::before{font-size:2.2rem}
 .g3,.g5{grid-template-columns:1fr 1fr}
 .cta-band .wrap{grid-template-columns:1fr}
 body{padding-bottom:78px}
 .mbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;position:fixed;left:10px;right:10px;bottom:10px;z-index:40;background:var(--slate);padding:6px;border-radius:999px;box-shadow:0 6px 22px rgba(0,0,0,.35)}
 .mbar a{display:flex;align-items:center;justify-content:center;min-height:48px;color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;border-radius:999px}
 .mbar a:first-child{background:var(--brick)}
 table.rt,.rt thead,.rt tbody,.rt tr,.rt td{display:block}.rt thead{position:absolute;left:-9999px}
 table.rt{border:0;background:transparent}
 .rt tr{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--brick);margin-bottom:10px;padding:6px 4px}
 .rt td{border:0;padding:6px 12px}.rt td::before{content:attr(data-l);display:block;font-weight:700;color:var(--brick-d);font-size:.78rem}
}
@media(max-width:560px){.g2,.g3,.g5{grid-template-columns:1fr}.pair{gap:8px}.btn{width:100%}.wrap{padding:0 18px}}

h1,h2,h3,.lead,.card p,figcaption,.note{text-wrap:balance}
p,li,td,.a{text-wrap:pretty}
button,input,textarea,summary{word-break:keep-all}

.nb{white-space:nowrap}

@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.14)}}
.hero>picture img{transform-origin:65% 60%;animation:heroZoom 18s ease-out forwards;will-change:transform}
@media(prefers-reduced-motion:reduce){.hero>picture img{animation:none}}

@media(max-width:900px){br.pc{display:none}}
.sub-hero .wrap>div{min-width:0}

.contact-card{background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--brick);padding:22px;max-width:560px}
.cc-label{margin:0;font-size:.85rem;color:var(--sub)}
.cc-tel{margin:2px 0 16px;font-family:"Noto Serif KR","Nanum Myeongjo",serif;font-size:2rem;font-weight:800;line-height:1.3}
.cc-tel a{color:var(--slate);text-decoration:none}
.cc-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cc-btns .btn{width:100%;padding:0 6px;min-height:50px}
.cc-btns .btn.s{background:var(--slate);border-color:var(--slate);color:#fff}
.cc-msg{min-height:1.6em;margin:10px 0 0;font-size:.88rem;color:var(--brick-d);font-weight:700}
@media(max-width:560px){.cc-tel{font-size:1.6rem}.contact-card{padding:18px}}

.ex{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ex figure{background:#fff;border:1px solid var(--line)}
.ex img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#cfd6da}
.ex figcaption{padding:8px 10px 10px;margin:0}

/* contact card v2: dark panel, number left / buttons right */
.contact-card{display:grid;grid-template-columns:1fr 220px;gap:20px 36px;align-items:center;max-width:none;background:var(--slate);color:#fff;border:0;border-left:8px solid var(--brick);padding:30px 32px}
.cc-label{color:#b8c5cc;font-size:.85rem;letter-spacing:.08em}
.cc-tel{margin:4px 0 8px;font-size:2.4rem;line-height:1.2}
.cc-tel a{color:#fff}
.cc-sub{margin:0;color:#cfd9de;font-size:.92rem}
.cc-btns{display:grid;grid-template-columns:1fr;gap:10px}
.cc-btns .btn{min-height:48px}
.cc-btns .btn.s{background:#fff;border-color:#fff;color:var(--slate)}
.cc-btns .btn.o{background:transparent;border-color:#fff;color:#fff}
.sec-b .cc-btns .btn.o{color:#fff;border-color:#fff}
.cc-msg{grid-column:1/-1;min-height:1.4em;margin:0;color:#f6e4da;font-size:.88rem;font-weight:700}
@media(max-width:700px){.contact-card{grid-template-columns:1fr;padding:24px 20px;border-left-width:6px}.cc-tel{font-size:1.9rem}.cc-btns{grid-template-columns:1fr 1fr 1fr;gap:8px}.cc-btns .btn{padding:0 4px;font-size:.92rem}}

/* ===== motion ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-t>*,.sub-hero .wrap>div>*{opacity:0;animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-t>:nth-child(1),.sub-hero .wrap>div>:nth-child(1){animation-delay:.05s}
.hero-t>:nth-child(2),.sub-hero .wrap>div>:nth-child(2){animation-delay:.18s}
.hero-t>:nth-child(3),.sub-hero .wrap>div>:nth-child(3){animation-delay:.32s}
.hero-t>:nth-child(4),.sub-hero .wrap>div>:nth-child(4){animation-delay:.46s}
.hero-cap{opacity:0;animation:fadeUp .8s ease .8s forwards}
.fact div{opacity:0;animation:fadeUp .7s ease forwards}
.fact div:nth-child(1){animation-delay:.6s}.fact div:nth-child(2){animation-delay:.72s}.fact div:nth-child(3){animation-delay:.84s}
.sub-hero .ph{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) .3s forwards}
/* scroll reveal (JS가 켜졌을 때만 숨김 처리) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv-l{opacity:0;transform:translateX(-18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv-l.in{opacity:1;transform:none}
.js .rv img{transform:scale(1.07);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in img{transform:scale(1)}
.sec-h h2{position:relative;padding-bottom:12px}
.sec-h h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;background:var(--brick);transform-origin:left;transform:scaleX(0)}
.js .sec-h.in h2::after{animation:lineGrow .7s ease .25s forwards}
html:not(.js) .sec-h h2::after{transform:none}
/* hover */
.card{transition:transform .3s ease,box-shadow .3s ease,border-top-color .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(24,33,38,.13);border-top-color:var(--brick)}
.pair figure,.ex figure{overflow:hidden}
.pair img,.ex img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pair figure:hover img,.ex figure:hover img{transform:scale(1.045)}
.btn{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
details.faq{transition:border-color .25s ease,box-shadow .25s ease}details.faq:hover{box-shadow:0 6px 16px rgba(24,33,38,.08)}
@media(prefers-reduced-motion:reduce){
 .hero-t>*,.sub-hero .wrap>div>*,.hero-cap,.fact div,.sub-hero .ph{opacity:1;animation:none}
 .js .rv,.js .rv-l{opacity:1;transform:none;transition:none}.js .rv img{transform:none;transition:none}
 .sec-h h2::after{transform:none;animation:none!important}.card:hover,.btn:hover{transform:none}
}

/* ===== hero slideshow (CSS only, 18s loop) ===== */
.hero>picture{display:none}
.hero .slide{position:absolute;inset:0;overflow:hidden}
.hero .slide picture,.hero .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .slide img{animation:none;transform-origin:65% 60%;will-change:transform}
.hero::after{z-index:1}
.hero .slide.s1{animation:slide1 18s linear infinite}
.hero .slide.s2,.hero .slide.s3{opacity:0;animation:slideK 18s linear infinite backwards}
.hero .slide.s2{animation-delay:6s}.hero .slide.s3{animation-delay:12s}
.hero .slide.s1 img{animation:zoomK 18s linear infinite}
.hero .slide.s2 img{animation:zoomK 18s linear 6s infinite}
.hero .slide.s3 img{animation:zoomK 18s linear 12s infinite}
@keyframes slide1{0%,33%{opacity:1}38%,95%{opacity:0}100%{opacity:1}}
@keyframes slideK{0%{opacity:0}5%,33%{opacity:1}38%,100%{opacity:0}}
@keyframes zoomK{0%{transform:scale(1)}38%{transform:scale(1.13)}39%,100%{transform:scale(1)}}
.hero-cap{opacity:0;animation:none}
.hero-cap.c1{animation:slide1 18s linear infinite}
.hero-cap.c2,.hero-cap.c3{animation:slideK 18s linear infinite backwards}
.hero-cap.c2{animation-delay:6s}.hero-cap.c3{animation-delay:12s}
@media(prefers-reduced-motion:reduce){
 .hero .slide.s2,.hero .slide.s3,.hero-cap.c2,.hero-cap.c3{display:none}
 .hero .slide.s1,.hero-cap.c1{animation:none;opacity:1}.hero .slide.s1 img{animation:none}
}
/* ===== hero buttons: 더 크게 ===== */
.hero .btn,.sub-hero .btn{min-height:58px;padding:0 40px;font-size:1.08rem;min-width:172px}
.hero .btns,.sub-hero .btns{gap:14px;margin-top:30px}
@media(max-width:560px){.hero .btn,.sub-hero .btn{min-height:56px;width:100%;min-width:0}}

/* ===== 모바일/태블릿: 번호·주제 고정(sticky) 바 ===== */
@media(max-width:900px){
 .sec-h{position:sticky;top:67px;z-index:15;display:flex;align-items:center;gap:12px;margin:0 -24px;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 6px 12px -10px rgba(24,33,38,.35)}
 section.blk.alt .sec-h{background:var(--paper)}
 .sec-h::before{font-size:1.6rem;margin:0;flex:none}
 .sec-h h2{margin:0;padding:0;font-size:1.05rem;line-height:1.35}
 .sec-h h2::after{display:none}
 .sec{gap:16px}
}
@media(max-width:560px){.sec-h{margin:0 -18px;padding:10px 18px}}

/* 모바일/태블릿: 메인 제외 히어로 이미지를 텍스트 위로 */
@media(max-width:900px){
 .sub-hero{padding:28px 0 40px}
 .sub-hero .ph{order:-1;max-width:340px;width:100%;margin:0 auto}
 .sub-hero figcaption{margin-top:14px;text-align:center}
 .sub-hero .wrap{gap:22px}
}

/* 모바일: 전화상담/문자상담/견적문의 한 줄 나란히 */
@media(max-width:560px){
 .btns,.hero .btns,.sub-hero .btns,.cta-band .btns{display:flex;flex-wrap:nowrap;gap:8px}
 .btns .btn,.hero .btns .btn,.sub-hero .btns .btn,.cta-band .btns .btn{flex:1 1 0;width:auto;min-width:0;padding:0 4px;font-size:.95rem;min-height:52px;white-space:nowrap}
}

/* ===== 표: 모바일에서도 표 모양 유지 + 넘치면 가로 스크롤 ===== */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-bottom:1px solid var(--line)}
@media(max-width:900px){
 table.rt{display:table;width:100%;border-top:3px solid var(--slate);background:var(--paper);border-collapse:collapse}
 .rt thead{display:table-header-group;position:static;left:auto}
 .rt tbody{display:table-row-group}
 .rt tr{display:table-row;background:transparent;border:0;border-left:0;margin:0;padding:0}
 .rt th,.rt td{display:table-cell;padding:11px 9px;border-bottom:1px solid var(--line);font-size:.86rem;line-height:1.55;vertical-align:top}
 .rt th{background:#dfe5e8;color:var(--slate);white-space:nowrap}
 .rt td::before{display:none;content:none}
 .rt td:first-child{font-weight:700;color:var(--slate)}
}
@media(max-width:400px){.rt th,.rt td{padding:10px 7px;font-size:.82rem}}

.sec>*,.sec-b{min-width:0}
@media(max-width:900px){.rt th{white-space:normal}}