/* ── FOOTER (CTA 통합) ────────────────────────────── */
/* 최종 CTA를 별도 라임 박스에서 푸터 상단으로 합쳤다.
   다크 서피스는 STEP 03 카드·solid Pain 카드와 같은 blurpleStrong 을 쓴다 */
.foot{position:relative;overflow:hidden;isolation:isolate;
 background:var(--nf-color-blurpleStrong);color:var(--nf-color-onDark);
 padding:clamp(64px,7vw,104px) var(--gut) clamp(28px,3vw,40px)}
.foot .fold{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:repeating-linear-gradient(59deg,#ffffff08 0 1.5px,transparent 1.5px 24px);
 -webkit-mask-image:linear-gradient(#000 0%,transparent 62%);
 mask-image:linear-gradient(#000 0%,transparent 62%)}
.foot .rule{max-width:var(--max);margin:clamp(44px,5vw,72px) auto;height:1px;background:#ffffff1f}

/* 상단 CTA ─ 홈에서만 나온다. 서브 페이지는 본문 마지막에 자기 블록을 둔다.
   data-page 는 서브 페이지만 갖는다 */
body[data-page] .foot-cta,
body[data-page] .foot .rule{display:none}
/* 본문 마지막 CTA 카드가 푸터 윗단에 걸친다. 그만큼 위를 비워 둔다 */
body[data-page] .foot{padding-top:clamp(120px,11vw,168px)}

/* 상단 CTA */
.foot-cta{max-width:var(--max);margin:0 auto;display:grid;gap:32px;
 grid-template-columns:1.5fr auto;align-items:end}
.foot-cta .pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 8px;
 border-radius:var(--nf-radius-full);background:#ffffff14;
 box-shadow:inset 0 0 0 1px #ffffff24;font-size:.8125rem;font-weight:600}
.foot-cta .pill svg{display:block;width:22px;height:22px}
.foot-cta h2{margin:26px 0 0;font-size:clamp(30px,4vw,54px);line-height:1.2;
 text-wrap:balance;color:#fff}
.foot-cta .r{display:flex;flex-direction:column;align-items:flex-end;gap:16px;
 padding-bottom:6px}
.foot .mail{display:inline-block;padding:9px 0;font-size:.9375rem;color:var(--nf-color-onDarkDim);text-decoration:none;
 transition:color .16s linear}
.foot .mail:hover{color:#fff}
/* 라임 알약 + 화살표 원. 라임을 여기로 옮겨 최종 액션의 무게를 유지한다 */
.btn.lime{background:var(--nf-color-lime);color:var(--nf-color-onAccent);
 padding:0 8px 0 26px;gap:14px}
.btn.lime:hover{background:#E7F86A}
.btn.lime:active{background:#CFE52F}
.btn.lime .arw{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
 background:var(--nf-color-onAccent);color:var(--nf-color-lime);
 transition:translate .18s cubic-bezier(.2,0,0,1)}
.btn.lime:hover .arw{translate:3px 0}

/* 링크 ─ 로고 + 3열. 푸터는 GNB 를 되풀이하지 않고 전체를 펼친다 */
.foot-in{max-width:var(--max);margin:0 auto;display:grid;gap:40px;
 /* 로고 + 링크 네 칸(OFFERING · AX LAB · INSIGHT · COMPANY) */
 grid-template-columns:1.4fr repeat(4,1fr)}
.foot .mk svg{display:block;height:26px;width:auto}
.foot h4{margin:0 0 18px;font-size:.6875rem;font-weight:700;letter-spacing:.16em;
 color:var(--nf-color-onDarkDim)}
.foot ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.foot ul a{display:inline-block;padding:9px 0}   /* 손가락이 닿는 최소 높이 */
.foot a{font-size:.9375rem;color:var(--nf-color-onDarkDim);text-decoration:none;
 transition:color .16s linear}
.foot a:hover{color:#fff}

/* 거대 워드마크. 바닥에서 잘려 나가는 크롭이 레퍼런스의 핵심이다 */
.foot .wordmark{max-width:var(--max);margin:clamp(40px,5vw,64px) auto 0;
 font-size:min(20.2vw,273px);font-weight:700;line-height:.78;
 letter-spacing:-.03em;color:#ffffff0f;user-select:none;
 overflow:hidden;height:.56em}
.foot .bar{max-width:var(--max);margin:0 auto;padding-top:24px;
 border-top:1px solid #ffffff1f;display:flex;justify-content:space-between;
 gap:16px;flex-wrap:wrap;font-size:.8125rem;color:var(--nf-color-onDarkDim)}
.foot .bar .co{opacity:.3}
/* 사업자 정보. 법인명을 쓰는 자리라 두지만 눈에 띄게 둘 줄은 아니다.
   항목이 줄 중간에서 끊기지 않게 하나씩 nowrap 으로 묶는다.
   자식이 span 이 아니라 small 인 이유: readability.css 가 700px 이하에서
   `.foot .bar :is(span,a)` 를 1rem 으로 올려 버린다(레이어 안 !important 라 못 이긴다) */
.foot .bar .biz{flex-basis:100%;display:flex;flex-wrap:wrap;
 font-style:normal;font-size:.75rem;line-height:1.7;opacity:.34;
 /* 저작권 줄 바로 아래 붙인다. 위 칸이 방침 링크 높이(46px)만큼 늘어나 있어
    row-gap 16 을 지우고도 글자 사이에는 숨 쉴 자리가 남는다 */
 margin-top:-30px}
.foot .bar .biz small{font-size:inherit;white-space:nowrap}
.foot .bar .biz small:not(:last-child)::after{content:' · ';white-space:pre}
/* 폰에서는 줄이 접히면서 줄 끝에 가운뎃점이 매달린다. 한 항목씩 쌓고 구분자를 뺀다 */
@media(max-width:600px){
 .foot .bar .biz{flex-direction:column}
 .foot .bar .biz small:not(:last-child)::after{content:none}
}
/* 420px 안쪽에서는 방침 링크가 저작권 줄 아래로 내려온다. 그만큼 덜 당겨야 링크에 안 붙는다 */
@media(max-width:420px){.foot .bar .biz{margin-top:-10px}}
.foot .bar .legal{display:flex;gap:26px}
.foot .bar a{display:inline-block;padding:10px 0;font-size:.8125rem}
/* 맨 위로 ─ 긴 페이지에서만 나온다. 앵커는 gnb 파샬의 header 가 갖는다.
   푸터 안에 두지만 fixed 라 화면 오른쪽 아래에 붙는다 */
.totop{position:fixed;right:clamp(16px,2.2vw,28px);bottom:clamp(16px,2.2vw,28px);
 z-index:60;display:grid;place-items:center;width:46px;height:46px;
 border-radius:15px;background:#fff;color:var(--nf-color-primary);
 box-shadow:0 2px 5px #0515240f,0 14px 30px -12px #12326359,inset 0 0 0 1px #0B120E14;
 opacity:0;visibility:hidden;translate:0 10px;
 transition:opacity .24s ease,translate .24s ease,visibility .24s}
.totop.on{opacity:1;visibility:visible;translate:0 0}
.totop svg{width:17px;height:17px}
.totop:hover{background:var(--nf-color-primary);color:#fff;
 box-shadow:0 2px 5px #1868db2e,0 16px 34px -12px #1868db8c,inset 0 0 0 1px #1868db00}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}

/* 맨 위로 버튼(fixed 46px)은 화면 오른쪽에 붙는다. 바가 화면 끝까지 차는 폭에서만 자리를 비운다 */
@media(max-width:1280px){.foot .bar{padding-right:62px}}

@media(max-width:900px){
 /* 로고는 한 줄을 다 쓴다. 링크 칸과 나란히 두면 그 칸 아래가 빈 채로 남는다 */
 .foot-in{grid-template-columns:repeat(3,1fr);align-items:start;gap:34px}
 .foot-in>div:first-child{grid-column:1/-1}
 .foot-cta{grid-template-columns:1fr}
 .foot-cta .r{align-items:flex-start}
}
@media(max-width:600px){
 /* 세 칸은 좁아서 링크가 접힌다. 한 줄에 한 칸씩 쌓는다 */
 .foot-in{grid-template-columns:1fr;gap:36px}
 /* 한 줄로 쌓으면 머리말과 링크가 같은 간격이라 묶음이 안 읽힌다.
    머리말은 자기 링크에 붙이고, 링크는 한 칸 들여 아래 딸린 것으로 보이게 한다 */
 .foot .foot-in .foot-label{margin-bottom:0;font-weight:700}
 .foot-in ul{padding-left:13px}
}