:root{
  --bg:#e8f3fb;--brand:#1c4e97;--accent:#8ccfe6;--navy:#061a2e;--white:#fff;
  --ink:#0b2236;--muted:#5a7186;--line:rgba(28,78,151,.28);
  --r:28px;--r-s:18px;
  --gap:clamp(64px,9vw,120px);--pad:clamp(16px,4.6vw,32px);
  --font:"Pretendard Variable",Pretendard,"NanumSquare","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:clamp(16px,2.2vw,17.5px);line-height:1.8;letter-spacing:-.012em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:880px}
.center{text-align:center}
.lead{font-size:clamp(16px,2.3vw,18.5px);line-height:1.8;margin-bottom:14px}
.light{background:var(--bg);padding-block:var(--gap)}
.dark{background:var(--navy);color:var(--bg)}
.brand-sec{background:var(--brand);color:#fff;padding-block:var(--gap)}
.rule{height:2px;background:currentColor;opacity:.85}
.stripe{flex:none;color:var(--bg)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(232,243,251,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-color:var(--line)}
.header-in{height:80px;display:flex;align-items:center;justify-content:space-between;width:100%;padding-inline:clamp(16px,3.2vw,56px)}
.brand{display:flex;align-items:center}
.brand img{height:60px;width:auto}
.header-act{display:flex;align-items:center}

/* buttons: pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 30px;border-radius:999px;font-weight:800;font-size:1rem;border:0;cursor:pointer;transition:transform .25s,filter .25s;letter-spacing:-.01em}
.btn:hover{transform:translateY(-3px);filter:brightness(1.05)}
.btn-sm{min-height:44px;padding:0 22px;font-size:.94rem}
.btn-brand{background:var(--brand);color:#fff}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-navy{background:var(--navy);color:#fff}
.btn-block{width:100%}

/* 1. intro */
.hx-top{position:relative;isolation:isolate;color:#fff;text-align:center;min-height:clamp(420px,70vh,680px);display:flex;align-items:center;overflow:hidden;padding:clamp(48px,8vw,96px) 0}
.hx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hx-top::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,26,46,.35) 0%,rgba(6,26,46,.28) 50%,rgba(6,26,46,.55) 100%)}
.hx-in{display:flex;flex-direction:column;align-items:center}
.hx-tag{text-shadow:0 2px 18px rgba(0,0,0,.55);max-width:760px;margin:0 auto;font-weight:900;font-size:clamp(22px,4.2vw,40px);line-height:1.4;letter-spacing:-.035em}

/* 2. title */
.hx-title{background:var(--navy);color:var(--bg);padding:clamp(48px,8vw,96px) 0 clamp(56px,8vw,96px)}
.hx-title h1{font-size:clamp(34px,8.4vw,112px);line-height:1.08;text-wrap:balance;font-weight:900;letter-spacing:-.05em;margin-bottom:clamp(20px,3vw,32px);word-break:keep-all}
.hx-sum{display:block;margin-top:clamp(22px,3vw,32px)}
.summary{font-size:clamp(18px,2.8vw,26px);line-height:1.6;font-weight:600;letter-spacing:-.025em;max-width:980px}
.meta-line{margin-top:22px;font-size:.9rem;opacity:.7}
.hero-cta{margin-top:28px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.8vw,20px)}
.bcard{border-radius:var(--r);padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:14px}
.b-brand{background:var(--brand);color:#fff}
.b-accent{background:var(--accent);color:var(--ink)}
.b-light{background:var(--bg);color:var(--ink)}
.b-white{background:#fff;color:var(--ink)}
.kicker{font-size:.82rem;font-weight:800;letter-spacing:.1em;opacity:.8}
.bcard h2{font-size:clamp(25px,3.8vw,42px);line-height:1.22;font-weight:900;letter-spacing:-.04em}
.bcard p{line-height:1.8}
.sub{opacity:.85;font-size:.96em}

/* 3. photo bento */
.photo-bento{padding-bottom:var(--gap)}
.photo-bento .wrap{display:grid;gap:clamp(12px,1.8vw,20px)}
.photo-bento .row .bphoto{grid-column:span 5;grid-row:1}
.photo-bento .row .bcard{grid-column:span 7;grid-row:1;justify-content:center}
.photo-bento .row.flip .bphoto{grid-column:span 5;order:2}
.photo-bento .row.flip .bcard{grid-column:span 7;order:1}
.bphoto{position:relative;border-radius:var(--r);overflow:hidden;background:#111;min-height:100%}
.cap{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);padding:7px 14px;border-radius:999px;background:rgba(6,26,46,.78);color:#fff;font-size:.82rem;font-weight:700;backdrop-filter:blur(6px)}
.bphoto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .9s ease}
.bphoto:hover img{transform:scale(1.04)}
.check{display:grid;gap:10px;margin:4px 0 6px}
.check li{position:relative;padding:14px 16px 14px 46px;border-radius:var(--r-s);background:rgba(0,0,0,.09);font-size:.96em;line-height:1.65}
.b-brand .check li{background:rgba(255,255,255,.12)}
.check li::before{content:"";position:absolute;left:17px;top:20px;width:14px;height:8px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(-45deg)}

/* 4. price */
.price{padding-block:var(--gap)}
.sec-head .rule{margin-bottom:clamp(20px,3vw,30px);background:var(--bg)}
.sec-head-in{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:clamp(28px,4vw,48px)}
.price h2{font-size:clamp(26px,5vw,54px);line-height:1.15;font-weight:900;letter-spacing:-.045em;max-width:900px}
.price-grid{grid-template-columns:repeat(12,1fr)}
.price-table{grid-column:span 8}
.price-side{grid-column:span 4;display:grid;gap:clamp(12px,1.8vw,20px)}
.fig{justify-content:space-between;min-height:200px}
.fig-num{font-size:clamp(64px,9vw,110px);line-height:1;font-weight:900;letter-spacing:-.06em}
.fig-num small{font-size:.3em;letter-spacing:-.02em;margin-left:6px}
.fig-txt{font-size:clamp(20px,2.6vw,26px);font-weight:800;line-height:1.35;letter-spacing:-.03em}
.fig .btn{align-self:flex-start}
.table-wrap{overflow:auto;border-radius:var(--r-s);border:1px solid #cfe0ee;margin-top:8px}
table{width:100%;border-collapse:collapse;min-width:520px;background:#fff}
caption{caption-side:top;text-align:left;padding:14px 18px;font-size:.84rem;color:var(--muted);border-bottom:1px solid #e1edf6}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid #e1edf6;vertical-align:top;font-size:.95em;line-height:1.6}
thead th{background:var(--brand);color:#fff;font-size:.86rem;letter-spacing:.02em}
tbody th{font-weight:800;white-space:nowrap;color:var(--brand)}
tbody tr:last-child>*{border-bottom:0}

/* 5. steps */
.steps-sec{padding-block:var(--gap)}
.kicker-c{text-align:center;color:var(--brand);font-weight:700;margin-bottom:10px;font-size:1rem}
.h-brand{color:var(--brand);font-size:clamp(26px,5vw,52px);line-height:1.2;font-weight:900;letter-spacing:-.045em;margin-bottom:22px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,20px);margin-top:clamp(32px,5vw,56px)}
.outline{border:2px solid var(--brand);border-radius:var(--r);padding:clamp(22px,3.4vw,32px);color:var(--brand);background:transparent}
.steps li strong{display:block;font-size:1.12rem;font-weight:900;margin:10px 0 6px;letter-spacing:-.03em}
.steps li p{color:var(--ink);font-size:.95em;line-height:1.7}
.step-no{font-size:clamp(36px,4.6vw,52px);font-weight:900;letter-spacing:-.06em;line-height:1;display:block}

/* 6. band */
.brand-band{background:var(--brand);color:#fff;padding:clamp(40px,6vw,72px) 0 0;overflow:hidden}
.band-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,4vw,48px);font-weight:600;font-size:clamp(15px,1.9vw,18px);line-height:1.6;max-width:760px}
.giant{font-weight:900;letter-spacing:-.06em;line-height:.85;font-size:clamp(60px,16.5vw,232px);color:var(--bg);margin:clamp(16px,3vw,40px) 0 0;white-space:nowrap;transform:translateY(10%)}

/* 7. need */
.need .narrow{margin-inline:auto}
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,20px);margin-top:clamp(32px,5vw,52px)}
.reason{border-radius:var(--r);padding:clamp(24px,3.6vw,38px);display:flex;flex-direction:column;gap:6px;min-height:200px}
.reason.outline{border:2px solid var(--brand);color:var(--brand)}
.reason.filled{background:var(--brand);color:#fff;border:2px solid var(--brand)}
.r-no{font-weight:900;font-size:2rem;letter-spacing:-.05em;line-height:1;margin-bottom:auto;padding-bottom:20px}
.reason strong{font-size:1.15rem;font-weight:900;letter-spacing:-.03em}
.reason p{font-size:.95em;line-height:1.7;opacity:.95}
.reason.outline p{color:var(--ink)}
.pill-row{margin-top:clamp(28px,4vw,44px)}
.areas{padding-top:0}
.area-list{display:grid;gap:clamp(12px,1.8vw,20px);margin-top:28px}
.area-list h3{font-size:1.2rem;font-weight:900;margin-bottom:8px;letter-spacing:-.03em}
.area-list p{color:var(--ink);font-size:.97em;line-height:1.8}

/* 8. slider */
.cases-sec{background:#d3e7f5;padding-bottom:clamp(48px,7vw,88px);overflow:hidden}
.ghost{text-align:center;font-weight:900;font-size:clamp(70px,20vw,260px);line-height:.9;letter-spacing:-.06em;color:rgba(255,255,255,.55);margin-bottom:-.28em;user-select:none}
.cases-sec h2{position:relative;margin-top:0}
.slider{margin-top:clamp(28px,4vw,48px)}
.track{display:flex;gap:clamp(12px,1.8vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:max(var(--pad),calc((100vw - 1160px)/2 + var(--pad)));scroll-padding-inline:max(var(--pad),calc((100vw - 1160px)/2 + var(--pad)));-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.slide{flex:none;width:min(1000px,86vw);scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--navy);padding:12px;border-radius:var(--r)}
.slide figure{border-radius:var(--r-s);overflow:hidden;background:#111;color:var(--bg)}
.slide img{width:100%;aspect-ratio:4/3;object-fit:cover}
.slide figcaption{padding:12px 14px;font-size:.9rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.78rem;font-weight:800}
.tag-before{background:rgba(232,243,251,.2);color:var(--bg)}
.tag-after{background:var(--accent);color:var(--ink)}
.slider-ctl{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.count{font-weight:700;color:var(--brand)}
.count b{font-size:1.5rem;font-weight:900}
.arrows{display:flex;gap:10px}
.arrows button{min-height:46px;padding:0 22px;border-radius:999px;border:2px solid var(--brand);background:transparent;color:var(--brand);font:inherit;font-weight:800;cursor:pointer;transition:background .2s,color .2s}
.arrows button:hover{background:var(--brand);color:#fff}

/* 9. faq */
.faq-sec h2{font-size:clamp(26px,5vw,48px);line-height:1.2;font-weight:900;letter-spacing:-.045em;margin-bottom:clamp(28px,4vw,48px)}
.faq{display:grid;gap:clamp(10px,1.6vw,14px)}
.faq-item{background:var(--bg);color:var(--ink);border-radius:var(--r);overflow:hidden;transition:background .3s}
.faq-item[open]{background:#fff}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,3vw,26px) clamp(18px,3.4vw,32px)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:var(--r)}
.faq h3{font-size:1.08rem;line-height:1.5;font-weight:800;letter-spacing:-.025em;display:flex;gap:12px;align-items:center}
.faq-ico{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--brand);transition:transform .35s,background .3s}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#fff;transition:transform .35s}
.faq-ico::after{transform:rotate(90deg)}
.faq-item[open] .faq-ico{background:var(--navy)}
.faq-item[open] .faq-ico::after{transform:rotate(0)}
.faq-a{display:flex;gap:12px;align-items:flex-start;font-size:.98em;line-height:1.85;padding:0 clamp(18px,3.4vw,32px) clamp(20px,3vw,28px);animation:faqin .4s ease}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-content:center;font-size:.85rem;font-weight:900}
.qa.q{background:var(--brand);color:#fff}
.qa.a{background:var(--accent);color:var(--ink)}

/* 10. cta */
.cta-sec{padding-block:clamp(48px,7vw,88px)}
.cta-card{border:2px solid var(--bg);border-radius:clamp(28px,5vw,48px);padding:clamp(32px,6vw,64px) clamp(20px,5vw,56px);text-align:center}
.cta-card h2{font-size:clamp(28px,5.4vw,56px);line-height:1.15;font-weight:900;letter-spacing:-.045em;margin-bottom:16px}
.cta-card p{opacity:.85;max-width:560px;margin:0 auto 28px}
.cta-pill{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:560px;margin:0 auto;background:var(--bg);color:var(--ink);border-radius:999px;padding:7px 7px 7px 26px;font-weight:700;text-align:left}
.cta-pill span{font-size:.95rem;opacity:.75}
.cta-pill .btn{min-height:50px;padding:0 24px;white-space:nowrap}

/* 11. related */
.related h2{margin-bottom:0}
.rel-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,1.8vw,18px);margin-top:clamp(28px,4vw,44px)}
.rel-card{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--navy);color:var(--bg);border-radius:var(--r);padding:clamp(22px,3vw,30px);transition:transform .3s,background .3s,color .3s}
.rel-card:hover{transform:translateY(-5px);background:var(--brand);color:#fff}
.rel-card strong{font-size:1.15rem;font-weight:900;letter-spacing:-.03em}
.rel-card span{font-size:.92rem;line-height:1.65;opacity:.8}
.rel-card em{font-style:normal;margin-top:auto;padding-top:12px;color:var(--accent);font-weight:800;font-size:.9rem}
.banners{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,18px);margin-top:clamp(12px,1.8vw,18px)}
.banner{position:relative;border-radius:var(--r);overflow:hidden;display:block;min-height:240px;background:#111}
.banner img{width:100%;height:100%;min-height:240px;object-fit:cover;transition:transform .9s ease}
.banner:hover img{transform:scale(1.05)}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78))}
.banner-text{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;color:#fff;display:flex;flex-direction:column;gap:2px}
.banner-text small{color:var(--accent);font-weight:700;font-size:.82rem}
.banner-text strong{font-size:1.35rem;font-weight:900;letter-spacing:-.03em}
.modified{text-align:center;color:var(--muted);font-size:.88rem;margin-top:clamp(36px,5vw,56px)}

/* contact */
.contact-box{padding:0 0 clamp(8px,2vw,24px)}
.contact-grid .bcard{grid-column:span 4;scroll-margin-top:90px}
.big{font-size:clamp(26px,3.4vw,34px);font-weight:900;letter-spacing:-.04em;line-height:1.2}
.big.sm{font-size:clamp(18px,2.4vw,22px);word-break:break-all}
.contact-card .sub,.contact-grid .sub{flex:1}
.contact-sns{text-align:center;margin-top:24px;opacity:.8;font-size:.94rem}
.contact-sns a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* footer */
.site-footer{background:var(--navy);color:#8fa6b8;padding:clamp(48px,7vw,80px) 0 calc(48px + env(safe-area-inset-bottom));font-size:.92rem;overflow:hidden}
.foot-word{font-weight:900;color:var(--bg);font-size:clamp(56px,16vw,200px);line-height:.95;letter-spacing:-.06em;margin-bottom:clamp(24px,4vw,48px);white-space:nowrap}
.foot-info{font-style:normal}
.foot-info dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 28px}
.foot-info div{display:flex;gap:12px}
.foot-info dt{flex:none;width:7em;color:#6f879a}
.foot-info dd{margin:0;color:var(--bg)}
.foot-row{margin-top:28px;padding-top:20px;border-top:1px solid rgba(232,243,251,.15);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot-sns{display:flex;gap:18px}
.foot-sns a{text-decoration:underline;text-underline-offset:3px;color:var(--bg)}

/* floating / cta bar */
.float-home{position:fixed;right:18px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 20px;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:800;font-size:.94rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:transform .2s}
.float-home:hover{transform:translateY(-3px)}
.cta-bar{display:none}

/* reveal */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition-duration:.01ms!important}}

/* tablet / mobile */
@media (max-width:1024px){
  .photo-bento .row .bphoto,.photo-bento .row.flip .bphoto{grid-column:span 5}
  .photo-bento .row .bcard,.photo-bento .row.flip .bcard{grid-column:span 7;padding:clamp(22px,3vw,34px)}
  .photo-bento .row .bphoto img{aspect-ratio:auto}
  .bcard h2{font-size:clamp(22px,3.2vw,30px)}
}
@media (max-width:900px){
  .price-table,.price-side{grid-column:1/-1}
  .price-side{grid-template-columns:1fr 1fr}
  .contact-grid .bcard{grid-column:1/-1}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .hx-tag{font-size:5.5vw;white-space:nowrap;letter-spacing:-.045em}
  .photo-bento .row .bphoto,.photo-bento .row .bcard,.photo-bento .row.flip .bphoto,.photo-bento .row.flip .bcard{grid-column:1/-1;grid-row:auto;order:0}
  .photo-bento .row .bphoto img{aspect-ratio:4/3}
  .bcard h2{font-size:clamp(24px,6.4vw,32px)}
  .wrap{padding-inline:14px}
    .hx-sum{flex-direction:column;gap:18px}
  .hx-sum .stripe{order:-1}
  .steps,.reasons,.banners,.slide{grid-template-columns:1fr}
  .price-side{grid-template-columns:1fr}
  .fig{min-height:170px}
  .band-cols{grid-template-columns:1fr}
  .slide{width:88vw}
  .slide figcaption{padding:10px 12px;font-size:.85rem}
  .cta-pill{flex-direction:column;border-radius:28px;padding:18px;text-align:center}
  .cta-pill .btn{width:100%}
  .foot-info div{flex-direction:column;gap:2px}
  .foot-info dt{width:auto}
  .reason{min-height:0}
  table{min-width:0;table-layout:fixed}
  th,td{padding:10px 9px;font-size:.82em;line-height:1.5}
  tbody th{white-space:normal}
  caption{padding:10px 12px}
  .price-table{padding:20px 14px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .cta-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(6,26,46,.94);backdrop-filter:blur(10px)}
  .cta-bar a{display:flex;align-items:center;justify-content:center;height:50px;border-radius:999px;font-weight:900;font-size:1rem}
  .cta-call{background:var(--accent);color:var(--ink)}
  .cta-sms{background:var(--brand);color:#fff}
  .float-home{bottom:calc(86px + env(safe-area-inset-bottom));right:14px;height:44px;padding:0 16px}
}

/* 불릿 목록 */
.dots{display:grid;gap:9px;margin:0 0 14px;padding:0;list-style:none}
.dots li{position:relative;padding-left:22px;line-height:1.75}
.dots li::before{content:"";position:absolute;left:3px;top:.78em;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}
.bcard .dots li{font-size:.98em}
.b-brand .dots li::before{background:var(--accent);opacity:1}
.lead-list{max-width:760px;margin-inline:auto;font-size:clamp(16px,2.2vw,18px)}
.lead-list li{padding-left:24px}
.center-list{margin-bottom:8px}
.price-table .lead-list{margin-inline:0;font-size:1em}
.faq-a{align-items:flex-start}
.faq-list{margin:0;gap:7px}
.faq-list li strong{font-weight:800}
.faq-list li:first-child{padding-left:0}
.faq-list li:first-child::before{display:none}