:root{--cream:#F5F0E8;--oat:#E9E0D5;--oat2:#F0E9DE;--walnut:#49392E;--taupe:#8A7768;--terra:#A55D3D;--terra-d:#8C4A2E;--ink:#3A2F27;--line:#D9CDBE;--serif:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;--sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;--logo:'Noto Serif KR',serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.75 var(--sans);word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--walnut);color:#fff;padding:10px 16px;z-index:100}.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.narrow{max-width:900px}
:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
/* header */
.site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hdr{display:flex;align-items:center;gap:20px;min-height:64px}
.logo{font:700 25px/1 var(--logo);letter-spacing:.1em;color:var(--walnut);text-decoration:none}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-weight:500;font-size:16px;text-decoration:none;color:var(--ink)}
.nav a:hover,.nav a[aria-current]{color:var(--terra)}
.nav .nav-cta{display:none;color:var(--terra-d);font-weight:600}
.burger{display:none;flex:0 0 44px;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;margin-left:auto;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:24px;height:2px;background:var(--walnut)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 28px;border-radius:2px;font:500 17px/1.2 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;text-align:center}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px;background:var(--terra);color:#fff;white-space:nowrap}.btn-sm:hover{background:var(--terra-d)}
.btn-primary{background:var(--terra);color:#fff}.btn-primary:hover{background:var(--terra-d)}
.btn-light{background:var(--cream);color:var(--walnut)}.btn-light:hover{background:#fff}
.btn-outline-light{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}.btn-outline-light:hover{background:rgba(255,255,255,.2)}
.btn-ghost{border-color:var(--walnut);color:var(--walnut)}.btn-ghost:hover{background:var(--walnut);color:#fff}
/* hero */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(520px,78svh,820px);overflow:hidden;color:#fff;background:var(--walnut)}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(44,32,24,.78) 0%,rgba(44,32,24,.52) 40%,rgba(44,32,24,.08) 78%)}
.hero-in{position:relative;padding-top:56px;padding-bottom:56px}
.hero-copy{max-width:640px}
.eyebrow{margin:0 0 14px;font-size:16px;letter-spacing:.04em;color:#F0DFCB;font-weight:500}
.hero h1{margin:0 0 18px;font:700 clamp(44px,6.6vw,88px)/1.12 var(--serif);letter-spacing:-.01em}
.hero-sub{margin:0 0 12px;font:500 clamp(20px,2.6vw,30px)/1.45 var(--serif)}
.hero-text{margin:0 0 28px;font-size:18px;line-height:1.7;color:#F7F0E6;max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
/* sections */
.sec{padding:76px 0}.sec.alt{background:var(--oat2)}
.sec-title{margin:0 0 12px;text-align:center;font:600 clamp(27px,3.2vw,40px)/1.35 var(--serif);color:var(--walnut)}
.sec-title.left{text-align:left;font-size:clamp(23px,2.5vw,30px)}
.sec-sub{margin:0 auto 36px;text-align:center;color:#5d4e43;max-width:720px}
.sec-title+*:not(.sec-sub){margin-top:36px}
.prose p{margin:0 0 18px}.prose h2{font:600 24px/1.4 var(--serif);color:var(--walnut);margin:32px 0 10px}
h1.plain{font:600 clamp(30px,4vw,44px)/1.3 var(--serif);color:var(--walnut);margin:0 0 24px}
.prose-sec{padding:56px 0}
.prose-sec .sec-title+*{margin-top:0}
.check{list-style:none;margin:0 0 22px;padding:0}
.check li{position:relative;padding:8px 0 8px 26px;border-bottom:1px solid var(--line)}
.check li::before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;background:var(--terra);transform:rotate(45deg)}
.more{text-align:center;margin:36px 0 0!important}
/* 6 cards */
.car-wrap{position:relative}
.cards6{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card6{display:block;text-decoration:none;background:var(--oat);border:1px solid var(--line)}
.card6 img{aspect-ratio:1/1;width:100%;object-fit:cover}
.card6-t{display:flex;align-items:center;justify-content:center;min-height:56px;padding:6px 8px;text-align:center;font-weight:500;font-size:16px;color:var(--walnut)}
.card6:hover .card6-t{color:var(--terra)}
.car-btn{display:none}
.car-track{outline-offset:6px}
/* before/after */
.cmp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 40px}
.cmp-grid.one{grid-template-columns:minmax(0,640px);justify-content:center}
.cmp{margin:0;position:relative}
.cmp-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.zoom{position:relative;display:block;padding:0;border:0;background:var(--oat);cursor:zoom-in;aspect-ratio:1/1;min-height:44px;overflow:hidden}
.zoom img,.zoom picture{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:0;bottom:0;background:rgba(245,240,232,.92);color:var(--walnut);font:500 14px/1 var(--sans);padding:7px 11px;letter-spacing:.02em}
.cmp figcaption,.single figcaption{margin-top:12px;text-align:center;font-size:15.5px;color:#5d4e43;line-height:1.55}
.refmark{display:inline-block;margin-bottom:8px;font-size:14px;color:var(--terra-d);font-weight:500}
.ref-note{margin:28px auto 0;max-width:760px;text-align:center;font-size:15px;color:#5d4e43}
.alt .zoom{background:var(--oat)}
.fx-b .cmp-pair{outline:1px solid var(--line);outline-offset:6px}
.js .cmp,.js .card6{opacity:0}
.js .cmp.in,.js .card6.in{opacity:1;transition:opacity .6s ease,transform .6s ease}
.js .fx-a{transform:translateY(18px)}.js .fx-c{transform:scale(.97)}
.js .cmp.in{transform:none}
.fig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.single{margin:0}.single .zoom{width:100%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:40px}
.two-col{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}
.two-col h3{font:600 21px/1.4 var(--serif);margin:0 0 12px;color:var(--walnut)}
/* table */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff9}
caption{caption-side:top;text-align:left;font:600 18px/1.4 var(--serif);color:var(--walnut);padding:0 0 10px}
th,td{padding:14px 16px;border:1px solid var(--line);text-align:left;vertical-align:top;font-size:16px;line-height:1.65}
thead th{background:var(--oat);color:var(--walnut);font-weight:600}
tbody th{background:var(--oat2);font-weight:600;color:var(--walnut);width:22%}
.prose-sec .tbl{margin:8px 0 22px}
/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:s}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps li{display:flex;gap:14px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);padding:20px}
.steps .n{flex:0 0 40px;height:40px;border-radius:50%;background:var(--terra);color:#fff;display:flex;align-items:center;justify-content:center;font:600 18px/1 var(--serif)}
.steps strong{display:block;font:600 19px/1.4 var(--serif);color:var(--walnut);margin-bottom:4px}
.steps p{margin:0;font-size:16px;line-height:1.65}
/* related, faq */
.rel-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rel-card{display:flex;flex-direction:column;gap:8px;height:100%;min-height:150px;padding:22px;background:var(--oat2);border:1px solid var(--line);text-decoration:none}
.rel-card strong{font:600 19px/1.4 var(--serif);color:var(--walnut)}
.rel-card span{font-size:15.5px;line-height:1.6;color:#5d4e43}
.rel-card em{margin-top:auto;font-style:normal;font-size:15px;color:var(--terra-d);font-weight:500}
.rel-card:hover{border-color:var(--terra)}
.faq .qa{padding:22px 0;border-top:1px solid var(--line)}.faq .qa:last-child{border-bottom:1px solid var(--line)}
.qa h3{margin:0 0 8px;font:600 20px/1.5 var(--serif);color:var(--walnut)}.qa p{margin:0}
/* cta */
.cta{background:var(--walnut);color:var(--cream);text-align:center;padding:72px 0}
.cta h2{margin:0 0 10px;font:600 clamp(26px,3.2vw,38px)/1.4 var(--serif)}
.cta p{margin:0 0 28px;color:#E9DECF}
.cta .btn+.btn{margin-left:8px}
/* hub */
.hub{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hub-card{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px;background:var(--oat2);border:1px solid var(--line);text-decoration:none}
.hub-card:hover{border-color:var(--terra)}
.hub-img{display:block;margin:-20px -20px 8px}.hub-img img{aspect-ratio:1/1;width:100%;object-fit:cover}
.hub-g{font-size:14px;color:var(--terra-d);font-weight:500}
.hub-card strong{font:600 20px/1.4 var(--serif);color:var(--walnut)}
.hub-card span:last-child{font-size:15.5px;line-height:1.6;color:#5d4e43}
/* footer */
.site-footer{background:var(--cream);border-top:1px solid var(--line);padding:30px 0;font-size:15px;line-height:1.7;color:#5d4e43}
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:12px 36px;align-items:center}
.foot-brand{display:flex;flex-direction:column;gap:2px}.foot-brand .logo{font-size:22px}.foot-dom{font-size:14px}
.foot-biz{display:flex;flex-wrap:wrap;gap:2px 18px}.foot-name{color:var(--walnut)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* lightbox */
dialog#lb{border:0;padding:16px;background:var(--cream);max-width:min(94vw,860px);max-height:94svh;overflow:auto;border-radius:2px}
dialog#lb::backdrop{background:rgba(30,22,16,.82)}
#lb-img{max-width:100%;max-height:78svh;width:auto;height:auto;margin:0 auto}
#lb-cap{margin:10px 0 0;text-align:center;font-size:15px}
.lb-close{display:block;margin:0 0 10px auto;min-height:44px;padding:0 18px;border:1px solid var(--walnut);background:var(--cream);color:var(--walnut);font:500 16px var(--sans);cursor:pointer}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .cmp,.js .card6{opacity:1!important;transform:none!important;transition:none!important}}
/* tablet */
@media (max-width:1100px){.rel-grid,.hub{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.split,.two-col{grid-template-columns:1fr}}
@media (max-width:900px){
 .nav{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 24px 14px;display:none;margin:0}
 .nav.open{display:flex}.nav a{border-bottom:1px solid var(--line)}
 .burger{display:flex;margin-left:0}.hdr-cta{margin-left:auto}
}
@media (max-width:768px){
 body{font-size:17px}
 .wrap{padding:0 20px}
 .sec{padding:52px 0}
 .hero{min-height:clamp(460px,68svh,640px);align-items:flex-end}
 .hero-shade{background:linear-gradient(0deg,rgba(44,32,24,.88) 0%,rgba(44,32,24,.6) 48%,rgba(44,32,24,.12) 100%)}
 .hero-in{padding-top:40px;padding-bottom:36px}
 .hero h1{font-size:clamp(40px,12vw,56px)}.hero-text{font-size:17px}
 .cmp-grid{grid-template-columns:1fr;gap:36px}.cmp-grid.one{grid-template-columns:1fr}
 .steps,.steps.three,.rel-grid,.hub{grid-template-columns:1fr}
 .hub{gap:14px}
 .fig-grid{gap:12px}
 .foot{grid-template-columns:1fr}
 .cta .btn+.btn{margin:10px 0 0}
 /* 표 → 항목 카드 */
 table,thead,tbody,tr,th,td{display:block;width:100%}
 thead{position:absolute;left:-9999px}
 tr{margin-bottom:14px;border:1px solid var(--line);background:#fff9}
 th,td{border:0;border-bottom:1px solid var(--line);padding:10px 14px}
 tbody th{width:100%;background:var(--oat)}
 td::before{content:attr(data-label);display:block;font-size:14px;font-weight:600;color:var(--terra-d);margin-bottom:2px}
 tr :last-child{border-bottom:0}
}
@media (max-width:559px){.hub{grid-template-columns:1fr 1fr}.hub-card{padding:14px}.hub-img{margin:-14px -14px 6px}.hub-card strong{font-size:17px}.hub-card span:last-child{font-size:14.5px}}
@media (max-width:520px){.hdr{gap:10px}.logo{font-size:21px}.btn-sm{padding:0 12px;font-size:14px}}
@media (max-width:419px){.hdr-cta .num{display:none}.nav .nav-cta{display:inline-flex}}
@media (max-width:359px){.hub{grid-template-columns:1fr}}

/* ---- v2 디자인 수정 ---- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
body{letter-spacing:-.005em;font-weight:400}
h1,h2,h3,.sec-title,.hero h1,.qa h3,.steps strong,.rel-card strong,.hub-card strong,caption{letter-spacing:-.02em}
.tbl-title{margin:0 0 12px;font:600 18px/1.5 var(--serif);color:var(--walnut)}
.sec-title,.sec-sub,.tbl-title{word-break:keep-all}
/* 손상 유형 카드: PC 6열 · 태블릿 3열 · 모바일 2열×3행 */
.cards6{grid-template-columns:repeat(6,1fr);width:auto}
.cards6 li{display:flex;width:auto}
.card6{display:flex;flex-direction:column;width:100%}
.card6 .card6-t{flex:1;overflow-wrap:anywhere}
@media (max-width:999px){.cards6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.cards6{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card6-t{font-size:15px;min-height:62px;padding:6px 8px;line-height:1.4}}
@media (max-width:359px){.cards6{gap:8px}.card6-t{font-size:13.5px;padding:6px 4px}}
/* 보수/부분교체: 두 개의 독립 섹션 */
.two-col{gap:40px 48px}
.two-col .col{min-width:0}
.two-col .col h3{margin:0 0 14px}
/* 사진 관련 카드 */
.rel-grid{grid-template-columns:repeat(3,1fr)}.rel-grid.n4{grid-template-columns:repeat(4,1fr)}
.rel-card{padding:0;min-height:0;overflow:hidden;gap:0;background:var(--oat2)}
.rel-img{display:block}.rel-img img,.rel-img picture{width:100%}.rel-img img{aspect-ratio:1/1;object-fit:cover}
.rel-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.rel-text{font-size:15.5px;line-height:1.6;color:#5d4e43}
@media (max-width:1100px){.rel-grid,.rel-grid.n4,.rel-grid.n6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
 .rel-grid,.rel-grid.n4,.rel-grid.n6,.rel-grid.n3,.rel-grid.n5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .rel-body{padding:12px 12px 14px}.rel-card strong{font-size:16.5px}.rel-text{font-size:14.5px}
 .tbl{overflow:visible}.tbl-title{font-size:17px;margin-bottom:10px}
 table{background:none}
 tbody th{font-size:17px;line-height:1.5}
 td{font-size:16px}
}
@media (max-width:359px){.rel-body{padding:10px}.rel-card strong{font-size:15px}.rel-text{font-size:13.5px}}