/* 2시안 공통: 색·글꼴, 버튼, 상단 메뉴, 호버, 스크롤 등장. 메인(index)과 하위 페이지가 같이 쓴다 */
:root{
  --ink:#191F28; --g7:#333D4B; --g6:#4E5968; --g5:#6B7684; --g4:#8B95A1; --g3:#B0B8C1; --g2:#E5E8EB; --g1:#F2F4F6; --g0:#F9FAFB;
  --blue:#2F6BFF; --blue-d:#1B55E8; --blue-l:#EAF1FF; --mint:#13C29A; --orange:#FF8A3D; --red:#F04452;
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-o:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.45,.5,1);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{-webkit-tap-highlight-color:transparent}
html.menu-open{overflow:hidden} /* 휴대폰 메뉴가 열려 있는 동안 뒤 화면이 스크롤되지 않게 */
body{font-family:var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:clip}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:10px 14px;border-radius:10px}
.wrap{width:min(1140px,100% - 40px);margin:0 auto}
.eyebrow{font-size:15px;font-weight:700;color:var(--blue);margin-bottom:14px;letter-spacing:-.01em}
.eyebrow-light{color:#8FB2FF}
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:52px;padding:0 24px;border-radius:14px;font-size:16px;font-weight:700;transition:transform .2s var(--ease),background .2s}
.btn:active{transform:scale(.97)}
.btn-blue{background:var(--blue);color:#fff}
@media (hover:hover){.btn-blue:hover{background:var(--blue-d)}}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (hover:hover){.btn-glass:hover{background:rgba(255,255,255,.22)}}

/* 버튼 호버: 커서 쪽으로 살짝 끌려오고(자석), 커서 자리에 빛이 맺히고, 글자가 위로 굴러 바뀐다. 누르면 눌렸다가 탄성 있게 돌아온다 */
.mag{position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--ps,1));transition:transform .6s var(--spring),background .3s,box-shadow .45s var(--ease)}
.mag::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 70%);opacity:0;transition:opacity .4s}
@media (hover:hover){.mag:hover::before{opacity:1}}
.mag:active{--ps:.955;transition-duration:.16s}
.bl{display:block;overflow:hidden;height:1.3em;line-height:1.3em;transform:translate(calc(var(--tx,0px) * .45),calc(var(--ty,0px) * .45));transition:transform .6s var(--spring)}
.bl>span{display:block;transition:transform .6s var(--ease-o)}
@media (hover:hover){.mag:hover .bl>span{transform:translateY(-100%)}}
@media (hover:hover){.btn-blue.mag:hover,.gnb-cta.mag:hover{background:var(--blue-d);box-shadow:0 14px 34px -10px rgba(47,107,255,.75)}}
.btn-glass.mag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
@media (hover:hover){.btn-glass.mag:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}}
.mag:focus-visible{outline:0;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--blue)}

/* 상단 메뉴 */
.gnb{position:fixed;inset:0 0 auto;z-index:50;height:76px;transition:background .35s,color .35s,box-shadow .35s}
.gnb-in{height:100%;width:min(1320px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:-.02em}
.gnb-menu{position:relative;display:flex;align-items:center;gap:40px;font-size:16.5px;font-weight:600}
.gnb-menu a{position:relative;opacity:.86;transition:opacity .3s}
.gnb-menu a:hover,.gnb-menu a:focus-visible{opacity:1;outline:0}
@media (hover:hover){.gnb-menu.hov a:not(:hover){opacity:.55}}
/* 메뉴 위를 따라 미끄러지는 알약 */
.gnb-pill{position:absolute;left:-16px;top:50%;height:40px;margin-top:-20px;border-radius:999px;background:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:transform .55s var(--ease-o),width .55s var(--ease-o),opacity .3s}
.gnb-menu.hov .gnb-pill{opacity:1}
.gnb.is-light .gnb-pill{background:rgba(25,31,40,.06);box-shadow:none}
/* 로고: 앞쪽 빗금 세 줄이 순서대로 스치며 지나간다 */
.logo-svg path:nth-child(-n+3){transform-box:fill-box}
@media (hover:hover){.logo:hover .logo-svg path:nth-child(-n+3){animation:streak .75s var(--ease-o) both}}
@media (hover:hover){.logo:hover .logo-svg path:nth-child(2){animation-delay:.05s}}
@media (hover:hover){.logo:hover .logo-svg path:nth-child(3){animation-delay:.1s}}
@keyframes streak{0%{transform:none}35%{transform:translateX(9px);opacity:0}36%{transform:translateX(-9px);opacity:0}100%{transform:none;opacity:1}}
.gnb-cta{justify-self:end;height:46px;padding:0 22px;border-radius:12px;background:var(--blue);color:#fff;font-size:15.5px;font-weight:700;display:flex;align-items:center}
.logo{justify-self:start}
.logo-svg{display:block;height:26px;width:auto;aspect-ratio:136/22}
.logo-svg .acc{fill:url(#tlB)}
.gnb.is-dark .logo-svg .acc{fill:url(#tlW)}
.gnb.is-dark{color:#fff}
.gnb.is-glass{background:rgba(8,18,31,.66);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.06)} /* 상담 글자가 메뉴 밑으로 지나갈 때 */
.gnb.is-light{color:var(--ink);background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
[data-rv]{opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0)) * 44px))}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;opacity:1!important;transform:none!important}
.ln>span{display:block;transform:translateY(calc((1 - var(--k,0)) * 105%))}
/* 하단 링크 (메인 전용): 밑줄이 왼쪽부터 그어진다 */
.foot .foot-cols a{position:relative;width:fit-content}
.foot .foot-cols a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease-o)}
@media (hover:hover){.foot .foot-cols a:hover::after{transform:scaleX(1);transform-origin:0 50%}}

/* 휴대폰 메뉴: 오른쪽 위 버튼을 누르면 화면 가득 메뉴가 내려온다 */
.gnb-act{justify-self:end;display:flex;align-items:center;gap:8px}
.gnb-tog{display:none;position:relative;width:42px;height:42px;border-radius:12px}
.gnb-tog i{position:absolute;left:12px;right:12px;height:2px;border-radius:1px;background:currentColor;transition:transform .45s var(--ease-o),top .45s var(--ease-o)}
.gnb-tog i:first-child{top:16px}.gnb-tog i:last-child{top:24px}
.gnb.open .gnb-tog i:first-child{top:20px;transform:rotate(45deg)}
.gnb.open .gnb-tog i:last-child{top:20px;transform:rotate(-45deg)}

@media (max-width:900px){
  .gnb{height:64px}
  .gnb-in{display:flex;width:min(1240px,100% - 40px)}
  .gnb-cta{height:38px;padding:0 16px;border-radius:10px;font-size:14px}
  .logo-svg{height:20px}
  .gnb-tog{display:block}
  .gnb-act{margin-left:auto}
  .gnb-menu{position:fixed;left:0;right:0;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 40px;background:#fff;color:var(--ink);font-size:26px;font-weight:700;letter-spacing:-.03em;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease-o),visibility 0s .6s}
  .gnb-menu a{opacity:1!important;padding:18px 4px;border-bottom:1px solid var(--g2);transform:translateY(-14px);transition:transform .6s var(--ease-o)}
  .gnb.open .gnb-menu{clip-path:inset(0);visibility:visible;transition:clip-path .6s var(--ease-o)}
  .gnb.open .gnb-menu a{transform:none}
  .gnb.open{color:var(--ink);background:#fff}
  .gnb.open .logo-svg .acc{fill:url(#tlB)}
  .gnb-pill{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}