:root{--ink:#16212e;--sub:#5b6775;--bg:#fff;--card:#f4f5f6;--line:#e4e7ea;--navy:#1f2d3d;--accent:#e8590c;--r:32px;--max:1200px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Pretendard Variable',Pretendard,'NanumSquare',-apple-system,'Malgun Gothic',sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:17px;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* GNB: 좌우 끝까지 */
.gnb{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s}
.gnb-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(20px,3vw,40px)}
.gnb.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff;letter-spacing:-.02em}
.logo-mark{width:26px;height:26px;border-radius:50%;border:4px solid currentColor;position:relative;display:block}
.logo-mark:after{content:"";position:absolute;inset:4px;border-radius:50%;background:currentColor}
.gnb.scrolled .logo,.gnb.scrolled .gnb-menu a,.gnb.scrolled .gnb-tel{color:var(--ink)}
.gnb-menu{display:flex;gap:6px;position:absolute;left:50%;transform:translateX(-50%)}
.gnb-menu a{color:rgba(255,255,255,.92);font-size:15px;font-weight:600;padding:8px 14px;border-radius:99px;transition:background .2s}
.gnb-menu a:hover,.gnb-menu a[aria-current]{background:rgba(255,255,255,.18)}
.gnb.scrolled .gnb-menu a:hover,.gnb.scrolled .gnb-menu a[aria-current]{background:var(--card)}
.gnb-menu .gnb-cta-m{display:none}
.gnb-r{display:flex;align-items:center;gap:14px}
.gnb-tel{color:#fff;font-weight:700;font-size:15px}
.burger{display:none;width:44px;height:44px;border:0;background:rgba(255,255,255,.2);border-radius:50%;cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.gnb.scrolled .burger{background:var(--card)}.gnb.scrolled .burger span{background:var(--ink)}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}

/* 버튼 */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:99px;font-weight:700;font-size:15px;padding:10px 20px;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.pill:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.14)}
.pill-dark{background:var(--navy);color:#fff}
.pill-white{background:#fff;color:var(--ink)}
.pill-lg{padding:15px 28px;font-size:16px}

/* 히어로 */
.hero{margin:8px 8px 0;border-radius:40px;background:linear-gradient(180deg,#2f4258 0%,#6f879f 55%,#c9d6e2 100%);color:#fff;padding:150px 20px 0;text-align:center;position:relative;overflow:visible}
.hero-in{max-width:820px;margin:0 auto}
.crumb{font-size:14px;opacity:.85;margin-bottom:14px}
.hero h1{font-size:clamp(44px,8vw,92px);line-height:1.08;font-weight:800;letter-spacing:-.04em;margin-bottom:26px}
.lead{font-size:clamp(16px,2vw,19px);line-height:1.8;opacity:.95;max-width:760px;margin:0 auto 32px}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-photos{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:20px;max-width:1080px;margin:56px auto -150px;align-items:end;position:relative;z-index:2}
.ph{background:#fff;padding:10px;border-radius:30px;box-shadow:0 24px 60px rgba(20,35,55,.28);margin:0}
.ph img{border-radius:22px;aspect-ratio:1/1;object-fit:cover;width:100%}
.ph figcaption{color:var(--ink);font-size:14px;font-weight:600;padding:10px 8px 4px;text-align:left}
.ph0{transform:rotate(-3deg) translateY(10px)}.ph2{transform:rotate(3deg) translateY(10px)}
.ph1 img{aspect-ratio:4/5}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pair{background:var(--card);padding:14px;border-radius:32px;margin:0}
.pair-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pair-i{position:relative}
.pair-i img{border-radius:22px;aspect-ratio:1/1;object-fit:cover;width:100%}
.chip{position:absolute;left:10px;top:10px;z-index:1;background:rgba(22,33,46,.82);color:#fff;font-size:13px;font-weight:700;padding:4px 12px;border-radius:99px}
.chip-a{background:var(--accent)}
.ba{margin-top:-20px}
.pair figcaption{color:var(--ink);font-size:14px;font-weight:700;padding:12px 10px 4px;text-align:left}

/* 본문 */
.wrap{max-width:var(--max);margin:0 auto;padding:230px 24px 40px}
.sec{margin-bottom:clamp(72px,10vw,130px)}
.sec h2{font-size:clamp(26px,4vw,42px);line-height:1.3;letter-spacing:-.03em;text-align:center;margin-bottom:36px;font-weight:800}
.card{background:var(--card);border-radius:var(--r);padding:clamp(24px,4vw,44px)}
.card-lg p{font-size:clamp(16px,1.8vw,18px);color:#2b3744}
.card p+p{margin-top:16px}
.card h3{font-size:22px;margin:14px 0 8px;letter-spacing:-.02em}
.card .pill{margin-top:18px}
.tag{display:inline-block;background:#fff;border-radius:99px;padding:5px 14px;font-size:13px;font-weight:700}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card-img{margin:0;border-radius:var(--r);overflow:hidden;background:var(--card)}
.card-img img{aspect-ratio:4/3;width:100%;object-fit:cover}
.card-img figcaption{padding:14px 22px;font-weight:600;font-size:15px}
.tbl-wrap{overflow-x:auto;margin-top:22px;border-radius:20px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:16px}
th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--navy);color:#fff;font-size:14px}
tbody th{font-weight:700}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td:nth-child(2){color:var(--accent);font-weight:700;white-space:nowrap}
.steps{counter-reset:s;display:grid;gap:14px;max-width:820px;margin:0 auto}
.steps li{counter-increment:s;background:var(--card);border-radius:26px;padding:22px 26px 22px 80px;position:relative;font-weight:600}
.steps li:before{content:counter(s);position:absolute;left:22px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800}
.list{display:grid;gap:12px}
.list li{padding-left:22px;position:relative}
.list li:before{content:"";position:absolute;left:0;top:.8em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.faq{display:grid;gap:14px;max-width:900px;margin:0 auto}
.faq-i{background:var(--card);border-radius:26px;transition:background .25s}
.faq-i[open]{background:#eceff2}
.faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;cursor:pointer;list-style:none}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i h3{margin:0;font-size:18px;line-height:1.5;letter-spacing:-.02em}
.faq-i h3:before{content:"Q. ";color:var(--accent)}
.faq-ic{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;position:relative;transition:transform .3s}
.faq-ic:before,.faq-ic:after{content:"";position:absolute;left:10px;right:10px;top:16px;height:2px;background:var(--ink);border-radius:2px}
.faq-ic:after{transform:rotate(90deg);transition:transform .3s}
.faq-i[open] .faq-ic:after{transform:rotate(0)}
.faq-i p{padding:0 26px 24px;margin:0;color:#2b3744}
.faq-i p:before{content:"A. ";font-weight:800}
.faq-i summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:26px}
@media (max-width:768px){.faq-i summary{padding:18px 18px}.faq-i h3{font-size:16.5px}.faq-i p{padding:0 18px 20px}}
.mod{text-align:center;color:var(--sub);font-size:14px;margin-top:26px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.rel{background:var(--card);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.rel:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,35,55,.14)}
.rel img{aspect-ratio:4/3;width:100%;object-fit:cover}
.rel-t{font-weight:800;font-size:18px;padding:16px 20px 4px}
.rel-d{font-size:14px;color:var(--sub);padding:0 20px 20px;line-height:1.6}
.banner{position:relative;margin:0 8px 8px;border-radius:40px;overflow:hidden;min-height:340px;display:grid}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,33,46,.85),rgba(22,33,46,.35));z-index:1}
.banner-in{position:relative;z-index:2;align-self:center;padding:clamp(28px,6vw,80px);color:#fff}
.banner-t{font-size:clamp(24px,3.6vw,40px);font-weight:800;line-height:1.35;letter-spacing:-.03em;margin-bottom:24px;max-width:640px}

/* 푸터 */
.foot{padding:56px 20px 120px;text-align:center;color:var(--sub);font-size:14px}
.foot-brand{font-weight:800;font-size:22px;color:var(--ink);margin-bottom:16px}
.foot address{font-style:normal;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;max-width:900px;margin:0 auto 18px;line-height:1.8}
.copy{font-size:13px}

/* 플로팅/하단바 */
.float-main{position:fixed;right:20px;bottom:24px;z-index:40;background:var(--navy);color:#fff;font-weight:700;font-size:14px;padding:13px 20px;border-radius:99px;box-shadow:0 10px 30px rgba(20,35,55,.3);transition:transform .2s}
.float-main:hover{transform:translateY(-3px)}
.mbar{display:none}

/* 스크롤 모션 */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),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}}

/* 태블릿 */
@media (max-width:1024px){.gnb-menu a{padding:8px 10px;font-size:14px}.gnb-tel{display:none}.trio{grid-template-columns:1fr}}

/* 모바일 */
@media (max-width:768px){
  body{font-size:16px}
  .burger{display:block}
  .gnb-r .pill-white{display:none}
  .gnb-menu{position:fixed;left:12px;right:12px;top:72px;transform:none;flex-direction:column;background:#fff;border-radius:26px;padding:12px;box-shadow:0 20px 50px rgba(20,35,55,.25);opacity:0;visibility:hidden;translate:0 -10px;transition:.25s}
  .gnb-menu.open{opacity:1;visibility:visible;translate:0 0}
  .gnb-menu a,.gnb.scrolled .gnb-menu a{color:var(--ink);padding:14px 18px;font-size:16px;border-radius:16px}
  .gnb-menu .gnb-cta-m{display:inline-flex;margin-top:6px;color:#fff!important;background:var(--navy)}
  .hero{margin:6px 6px 0;border-radius:28px;padding:104px 18px 0}
  .hero h1{margin-bottom:18px}
  .lead{text-align:left;font-size:15.5px;margin-bottom:24px}
  .btns .pill-lg{flex:1;padding:14px 12px}
  .hero-photos{grid-template-columns:1fr 1fr 1fr;gap:8px;margin:36px -4px -90px}
  .ph{padding:5px;border-radius:18px}.ph img,.ph1 img{border-radius:13px;aspect-ratio:3/4}
  .ph figcaption{display:none}.ph0,.ph2{transform:none}
  .pairs{grid-template-columns:1fr;gap:14px}
  .pair{padding:10px;border-radius:26px}.pair-i img{border-radius:16px}
  .chip{left:8px;top:8px;font-size:12px;padding:3px 10px}
  .pair figcaption{font-size:13px;padding:10px 6px 2px}
  .wrap{padding:130px 16px 20px}
  .duo{grid-template-columns:1fr}
  .card{border-radius:26px}
  .steps li{padding:18px 18px 18px 68px}.steps li:before{left:16px;width:38px;height:38px}
  .banner{margin:0 6px 6px;border-radius:28px;min-height:300px}
  .float-main{right:12px;bottom:84px;padding:11px 16px;font-size:13px}
  .mbar{display:grid;grid-template-columns:1fr 2fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--line)}
  .mbar a{display:flex;align-items:center;justify-content:center;border-radius:99px;font-weight:800;padding:14px;font-size:16px}
  .mbar-tel{background:var(--card)}.mbar-go{background:var(--accent);color:#fff}
}

/* 소형 모바일 */
@media (max-width:600px){
  .tbl-wrap{background:none;overflow:visible;border-radius:0}
  table{min-width:0;display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tbody{display:grid;gap:10px}
  tbody tr{display:block;background:#fff;border-radius:20px;padding:14px 18px}
  tbody th,tbody td{display:block;border:0;padding:3px 0;font-size:15px}
  tbody th{font-size:16px}
  td[data-l]:before{content:attr(data-l) "  ";color:var(--sub);font-weight:600;font-size:13px}
  td:nth-child(2){white-space:normal}
}
@media (max-width:480px){
  .btns{flex-direction:column}.btns .pill-lg{width:100%;flex:none}
  .sec h2{margin-bottom:24px}
  .faq-i h3{font-size:16px}
  .banner-t{font-size:22px}
  .float-main{padding:10px 14px;font-size:12.5px}
}
@media (min-width:1600px){:root{--max:1280px}.hero-photos{max-width:1180px}}
@media (hover:none){.pill:hover,.rel:hover,.float-main:hover{transform:none;box-shadow:none}}

.card .lead-s{font-weight:700;font-size:clamp(17px,2vw,19px);line-height:1.65;color:var(--ink);margin-bottom:18px}
.card-lg .list{gap:12px}
.card-lg .list li{font-size:clamp(15.5px,1.7vw,17px);color:#2b3744;line-height:1.7}