@font-face{font-family:'Pretendard';font-weight:45 920;font-style:normal;font-display:swap;src:url(/assets/fonts/PretendardVariable.woff2) format('woff2-variations')}
:root{--bk:#000;--wh:#fff;--bg:#ece9e4;--mut:#8a8a8a;--g1:#1a1b1c;--g2:#2a2c2e;--r:10px;--pad:clamp(20px,5vw,64px);--max:1440px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:'Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--bk);color:var(--wh);line-height:1.65;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:320px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;line-height:1.25}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* GNB — 양끝 꽉 채움 */
.gnb{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.gnb__in{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px var(--pad);gap:24px}
.logo{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700;letter-spacing:-.03em;flex:none}
.gnb__nav{display:flex;align-items:center;gap:32px;flex:1;justify-content:flex-end}
.gnb__list{display:flex;gap:30px;font-size:15px;flex:1;margin-left:40px}
.gnb__list a{opacity:.7;transition:opacity .2s;padding:6px 0;border-bottom:1px solid transparent}
.gnb__list a:hover{opacity:1}
.gnb__list a[aria-current]{opacity:1;border-bottom-color:#fff}
.nav-t{display:none}.burger{display:none}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:15px;font-weight:600;padding:13px 28px;line-height:1;transition:background .25s,color .25s,transform .25s;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.pill:hover{transform:translateY(-2px)}
.pill--w{background:var(--wh);color:var(--bk)}.pill--w:hover{background:#dcdcdc}
.pill--o{border-color:currentColor;background:transparent;color:inherit}.pill--o:hover{background:var(--wh);color:var(--bk);border-color:var(--wh)}
.sec--white .pill--o:hover,.sec--beige .pill--o:hover{background:var(--bk);color:var(--wh);border-color:var(--bk)}
.gnb .pill{padding:10px 22px;font-size:14px}

/* 화살표 (CSS 도형) */
.arr{display:inline-block;width:10px;height:10px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);flex:none;transition:transform .25s}
a:hover>.arr{transform:rotate(45deg) translate(2px,-2px)}

/* Hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch;min-height:clamp(560px,82vh,860px);background:var(--bk);overflow:hidden}
.hero__txt{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:72px clamp(24px,3vw,48px) 72px var(--pad)}
.hero h1{font-size:clamp(40px,5.6vw,92px);font-weight:600;letter-spacing:-.045em;line-height:1.04;word-break:keep-all}
.hero__sum{display:grid;gap:10px;max-width:560px}
.hero__sum p{font-size:clamp(15px,1.25vw,18px);line-height:1.7;color:#e6e6e6}
.hero__sum p:first-child{color:#fff;font-weight:500}
.hero .pill{align-self:flex-start}
.hero__img{position:relative;overflow:hidden;min-height:340px}
.hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0,transparent 22%)}

/* Sections */
.sec{padding:clamp(72px,9vw,140px) 0}
.sec--black{background:var(--bk);color:var(--wh)}
.sec--white{background:var(--wh);color:var(--bk)}
.sec--beige{background:var(--bg);color:var(--bk)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,72px);align-items:start}
.lab{position:sticky;top:96px}
.lab h2{font-size:clamp(22px,2.1vw,30px);font-weight:600;line-height:1.35}
.lab p{font-size:14px;color:var(--mut);margin-top:10px}
.body{min-width:0}

/* 사진 */
.gal{display:grid;gap:12px}
.gal--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal figure{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:#151515}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}

/* 핵심 요약 띠 */
.facts{background:var(--bk);color:var(--wh);padding:0}
.facts__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.facts__g li{padding:clamp(28px,4vw,52px) clamp(14px,2vw,28px);display:flex;flex-direction:column;gap:10px;border-right:1px solid rgba(255,255,255,.16)}
.facts__g li:last-child{border-right:0}
.facts__g span{font-size:13px;color:var(--mut)}
.facts__g strong{font-size:clamp(20px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.2}

/* 본문 */
.prose{max-width:720px}
.prose p{font-size:clamp(16px,1.25vw,18px);line-height:1.9;margin-bottom:22px;color:inherit}
.sec--white .prose p,.sec--beige .prose p{color:#2a2a2a}
.prose .mod{font-size:13px;color:var(--mut);margin-top:32px}
.signs{display:grid;gap:10px;margin-top:8px}
.signs li{position:relative;padding:18px 20px 18px 52px;background:rgba(255,255,255,.7);border-radius:var(--r);font-size:16px;line-height:1.6}
.sec--white .signs li{background:#f3f1ee}
.signs li::before{content:"";position:absolute;left:22px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:2px solid var(--bk)}
.signs li::after{content:"";position:absolute;left:27px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--bk)}

/* 표 */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl{width:100%;border-collapse:collapse;font-size:clamp(14px,1.15vw,16px)}
.tbl caption{text-align:left;font-size:13px;color:var(--mut);padding-bottom:14px}
.tbl th,.tbl td{text-align:left;padding:20px 16px 20px 0;border-bottom:1px solid rgba(255,255,255,.18);font-weight:400;vertical-align:top;line-height:1.6}
.tbl thead th{color:var(--mut);font-size:13px;font-weight:500;padding-top:0}
.tbl tbody th{font-weight:600;white-space:nowrap}
.tbl--white th,.tbl--white td,.tbl--beige th,.tbl--beige td{border-bottom-color:rgba(0,0,0,.16)}
.note{font-size:14px;color:var(--mut);margin:22px 0 30px;line-height:1.7}

/* 절차 번호 목록 */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.steps li{counter-increment:s;position:relative;background:#f3f1ee;border-radius:var(--r);padding:30px 26px 28px;min-height:190px;display:flex;flex-direction:column;gap:8px}
.sec--beige .steps li{background:#fff}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:14px;color:var(--mut);font-variant-numeric:tabular-nums;margin-bottom:auto;padding-bottom:28px}
.steps strong{font-size:18px;font-weight:600;letter-spacing:-.02em}
.steps span{font-size:15px;color:#555;line-height:1.65}

/* 서브사이트 카드 */
.subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.subcard{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 24px;border-radius:var(--r);background:var(--bg);font-size:16px;font-weight:500;transition:background .25s,transform .25s}
.subcard:hover{background:#dfdbd4;transform:translateY(-2px)}
.sec--beige .subcard{background:#fff}.sec--beige .subcard:hover{background:#f5f3f0}
.sec--black .subcard{background:var(--g2);color:#fff}.sec--black .subcard:hover{background:#3a3c3f}
.subs--s{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.netgrp{display:grid;gap:40px}
.netgrp__b h3{font-size:17px;font-weight:600;margin-bottom:14px}
.netgrp__b h3 a:hover{text-decoration:underline}

/* FAQ */
.faq{display:grid}
.qa{border-bottom:1px solid rgba(0,0,0,.18)}
.qa summary{cursor:pointer;list-style:none;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa h3{font-size:clamp(16px,1.45vw,20px);font-weight:600}
.qa p{padding:0 0 26px;max-width:680px;color:#333;font-size:16px;line-height:1.85}

/* 카드형 사진 내비 */
.rels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rel{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--g1);display:block}
.rel img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.rel:hover img{transform:scale(1.06)}
.rel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 55%)}
.rel__t{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:18px;font-weight:600;color:#fff}

.cta{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.cta__t{font-size:clamp(28px,4vw,56px);max-width:820px;letter-spacing:-.035em;font-weight:600;line-height:1.2}

/* 상담 */
.cgrp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ccard{background:var(--g2);border-radius:var(--r);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;gap:22px;min-height:300px}
.ccard__h{font-size:16px;font-weight:500;color:#d6d6d6;line-height:1.5}
.ccard__tel{font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.02em;margin-top:auto}
.ccard__btn{display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.foot{background:var(--wh);color:var(--bk);padding:88px 0 56px}
.foot__lead{max-width:460px;font-size:clamp(16px,1.4vw,20px);line-height:1.6;margin-bottom:60px}
.foot__cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;font-size:14px}
.fh{font-size:12px;font-weight:500;color:var(--mut);margin-bottom:12px}
.foot__cols p,.foot__cols li{margin-bottom:5px}
.foot__cols a:hover{text-decoration:underline}
.foot__copy{margin-top:56px;font-size:12px;color:var(--mut)}

/* 고정 CTA / 플로팅 */
.mbar{display:none}
.floatmain{position:fixed;right:20px;bottom:24px;z-index:60;background:var(--wh);color:var(--bk);border-radius:999px;padding:13px 22px;font-size:14px;font-weight:700;box-shadow:0 6px 28px rgba(0,0,0,.4);transition:transform .25s}
.floatmain:hover{transform:translateY(-3px)}

/* 스크롤 리빌 */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s ease,transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}

/* 태블릿 */
@media (max-width:1024px){
  .gnb__list{gap:18px;margin-left:16px;font-size:14px}
  .gnb__nav{gap:18px}
  .two{grid-template-columns:minmax(0,1fr);gap:28px}
  .lab{position:static}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero__txt{padding:56px var(--pad) 44px}
  .hero__img{min-height:0;aspect-ratio:4/3}
  .hero__img::after{display:none}
  .rels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 모바일 */
@media (max-width:768px){
  body{padding-bottom:72px}
  .gnb__in{padding:12px var(--pad)}
  .burger{display:flex;flex-direction:column;gap:6px;cursor:pointer;padding:10px;margin-right:-10px}
  .burger i{display:block;width:24px;height:1.5px;background:#fff;transition:transform .3s}
  .nav-t:checked~.burger i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .nav-t:checked~.burger i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .gnb__nav{position:absolute;left:0;right:0;top:100%;background:#000;flex-direction:column;align-items:stretch;gap:0;padding:0 var(--pad);max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .4s ease,opacity .3s,padding .3s}
  .nav-t:checked~.gnb__nav{max-height:560px;opacity:1;visibility:visible;padding:8px var(--pad) 24px}
  .gnb__list{flex-direction:column;gap:0;margin:0;font-size:17px}
  .gnb__list a{display:block;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .gnb__list a[aria-current]{border-bottom-color:rgba(255,255,255,.1);font-weight:700}
  .gnb__nav .pill{margin-top:20px;padding:14px}
  .hero__txt{gap:22px;padding:44px var(--pad) 36px}
  .hero h1{font-size:clamp(36px,10.5vw,52px)}
  .hero__img{aspect-ratio:1/1}
  .sec{padding:64px 0}
  .gal--3{gap:8px}.gal--3 figure{aspect-ratio:3/5}
  .gal--2{gap:8px}
  .facts__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts__g li{border-bottom:1px solid rgba(255,255,255,.16)}
  .facts__g li:nth-child(2n){border-right:0}
  .facts__g li:nth-last-child(-n+2){border-bottom:0}
  .steps,.subs,.cgrp{grid-template-columns:minmax(0,1fr)}
  .steps li{min-height:0}
  .tbl{min-width:0}
  .tbl th,.tbl td{padding:14px 10px 14px 0;font-size:13.5px}
  .tbl tbody th{white-space:normal}
  .rels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rel__t{font-size:14px;left:12px;right:12px;bottom:14px}
  .foot__cols{grid-template-columns:minmax(0,1fr)}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#000;border-top:1px solid rgba(255,255,255,.15);padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .mbar a{text-align:center;padding:14px 0;border-radius:999px;font-weight:700;font-size:15px;background:var(--wh);color:var(--bk)}
  .mbar a+a{background:transparent;color:#fff;border:1px solid #fff}
  .floatmain{bottom:82px;right:14px;padding:11px 18px;font-size:13px}
  body.has-float:not(:has(.mbar)){padding-bottom:0}
  body.has-float:not(:has(.mbar)) .floatmain{bottom:20px}
}
