/* 확정 푸터 — design-tiktaka/ft.css 의 라이브판. 2026-08-12
   ⛔손편집 금지. 시안을 고친 뒤 _gen/mk_footer.py 로 다시 뽑을 것 */
/* ══════════════════════════════════════════════════════════════════
   푸터 시안 5안 — 2026-08-10
   대형 3(FT-1·2·3) + 중형 2(FT-4·5). 사장님이 고른 구성이다.

   적용 대상 = 홈 · 서비스 · 포폴목록 · 포폴상세 · 미디어목록 · 미디어상세
   ⛔상담문의(cf-final) · 진단·견적(estimate-v1) 은 푸터를 넣지 않는다
     (그 두 장은 페이지 자체가 전환 목적이라 하단에서 빠져나갈 길을 열지 않는다)

   ★미디어 목록(mx-2)·상세(md-final) 에는 지금 푸터가 아예 없다 → 확정되면 신설한다.

   색은 tokens.css 를 그대로 쓴다. 이 파일은 tokens.css 뒤에 실려야 한다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 공용 ─────────────────────────────────────────────── */
footer.ft{ --ft-pad:32px; --ft-max:1520px; font-family:'Paperlogy',Pretendard,system-ui,sans-serif; }
.ft-in{ max-width:var(--ft-max); margin:0 auto; padding:0 var(--ft-pad); }
footer.ft a{ color:inherit; text-decoration:none; }

/* 다크 바탕 공통 */
footer.ft.dk{ background:var(--navy); color:#fff; }
footer.ft.dk .ft-desc,
footer.ft.dk .ft-lnk{ color:var(--navy-tx); }
footer.ft.dk .ft-lnk:hover{ color:#fff; }
footer.ft.dk .ft-h{ color:rgba(255,255,255,.5); }
footer.ft.dk .ft-rule{ border-color:rgba(255,255,255,.12); }
footer.ft.dk .ft-legal{ color:rgba(255,255,255,.38); }

/* 그룹 제목 */
.ft-h{ font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--g500); margin-bottom:18px; }

/* 링크 — 밑줄이 왼→오로 그어진다(네비 최근 글과 같은 결) */
.ft-lnk{ display:inline-block; position:relative; font-size:15px; line-height:1.55; color:var(--g700); padding:5px 0; transition:color .3s var(--ease); }
.ft-lnk::after{
  content:''; position:absolute; left:0; right:0; bottom:3px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right center; transition:transform .42s var(--ease);
}
.ft-lnk:hover::after{ transform:scaleX(1); transform-origin:left center; }
.ft-col{ display:flex; flex-direction:column; align-items:flex-start; }

/* 로고 */
.ft-logo{ display:inline-flex; align-items:center; gap:11px; font-size:18px; font-weight:600; letter-spacing:-.01em; }
.ft-logo .m{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; background:var(--blue); color:#fff; }
footer.ft.dk .ft-logo .m{ background:#fff; color:var(--navy); }

.ft-desc{ margin-top:16px; font-size:14.5px; line-height:1.8; color:var(--g700); max-width:340px; }
.ft-rule{ border:0; border-top:1px solid var(--line); margin:0; }
.ft-legal{ font-size:12.5px; line-height:1.9; color:var(--g500); }
.ft-legal b{ font-weight:600; }

/* 연락처 줄 */
.ft-cts{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.ft-ct{ display:inline-flex; align-items:center; gap:11px; font-size:15px; font-weight:500; transition:color .3s var(--ease); }
.ft-ct .ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--tint); color:var(--blue); transition:background .3s var(--ease), color .3s var(--ease); }
footer.ft.dk .ft-ct .ic{ background:rgba(255,255,255,.08); color:var(--blue-l); }
.ft-ct:hover .ic{ background:var(--blue); color:#fff; }
.ft-ct svg{ width:15px; height:15px; }

/* SNS */
.ft-sns{ display:flex; gap:9px; }
.ft-sns a{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--g500); transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .45s var(--ease); }
footer.ft.dk .ft-sns a{ border-color:rgba(255,255,255,.14); color:var(--navy-tx); }
.ft-sns a:hover{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px); }
.ft-sns svg{ width:17px; height:17px; }

/* 맨 아래 바 */
.ft-bot{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:24px 0 30px; }

/* ══ FT-1 대형 · 사이트맵 4열 + 상담 CTA 밴드 ════════════ */
.ft1 .ft-cta{ background:var(--navy2); }
.ft1 .ft-cta .ft-in{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-top:38px; padding-bottom:38px; }
.ft1 .ft-cta .tx{ font-size:clamp(20px,2.1vw,27px); font-weight:600; line-height:1.4; letter-spacing:-.02em; }
.ft1 .ft-cta .tx small{ display:block; margin-top:8px; font-size:15px; font-weight:400; color:var(--navy-tx); letter-spacing:0; }
.ft1 .ft-cta .bs{ display:flex; gap:11px; flex-wrap:wrap; }
.ft1 .ft-btn{ display:inline-flex; align-items:center; gap:9px; font-size:15.5px; font-weight:600; padding:15px 26px; border-radius:11px;
  transition:background .3s var(--ease), transform .45s var(--ease), border-color .3s; }
.ft1 .ft-btn.fill{ background:var(--blue); color:#fff; }
.ft1 .ft-btn.fill:hover{ background:var(--blue-d); transform:translateY(-2px); }
.ft1 .ft-btn.ghost{ border:1px solid rgba(255,255,255,.22); color:#fff; }
.ft1 .ft-btn.ghost:hover{ border-color:#fff; transform:translateY(-2px); }
.ft1 .ft-main{ padding:64px 0 12px; }
/* ★마지막 열은 주소가 들어가서 1fr 로는 "부림로 / 121" 로 끊긴다 → 넓게 잡는다 */
.ft1 .ft-grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr 1.3fr; gap:40px; }
.ft1 .ft-addr{ align-items:flex-start; margin-bottom:16px; }
.ft1 .ft-addr .ic{ margin-top:1px; }
.ft1 .ft-bot{ border-top:1px solid rgba(255,255,255,.12); margin-top:44px; }

/* ══ FT-2 대형 · 브랜드 스테이트먼트 + 뉴스레터 ═════════ */
.ft2 .ft-main{ padding:76px 0 12px; }
/* ★첫 열이 좁으면 "같은 일을 / 반복해서입니다" 로 끊기면서 강조색이 문장 중간에서
   갈라진다 → 열을 넓히고 글자를 34px 로 눌러 세 줄에 떨어지게 맞췄다 */
.ft2 .ft-grid{ display:grid; grid-template-columns:1.85fr repeat(3,1fr); gap:44px; }
.ft2 .ft-word{ font-size:clamp(26px,2.7vw,34px); font-weight:600; line-height:1.32; letter-spacing:-.03em; }
.ft2 .ft-word em{ font-style:normal; color:var(--blue-l); }
.ft2 .ft-news{ margin-top:28px; max-width:392px; }
.ft2 .ft-news .lb{ font-size:13.5px; color:var(--navy-tx); margin-bottom:11px; }
.ft2 .ft-news .row{ display:flex; gap:8px; }
.ft2 .ft-news input{ flex:1; min-width:0; height:48px; padding:0 16px; border-radius:11px; font-family:inherit; font-size:14.5px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; transition:border-color .3s var(--ease); }
.ft2 .ft-news input::placeholder{ color:rgba(255,255,255,.32); }
.ft2 .ft-news input:focus{ outline:none; border-color:var(--blue-l); }
.ft2 .ft-news button{ height:48px; padding:0 22px; border:0; border-radius:11px; background:var(--blue); color:#fff;
  font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer; transition:background .3s var(--ease); }
.ft2 .ft-news button:hover{ background:var(--blue-d); }
.ft2 .ft-bot{ border-top:1px solid rgba(255,255,255,.12); margin-top:52px; }

/* ══ FT-3 대형 · 최근 사례·글 노출형 ═══════════════════ */
.ft3 .ft-feat{ padding:66px 0 46px; border-bottom:1px solid rgba(255,255,255,.12); }
.ft3 .ft-feat .hd{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:26px; }
.ft3 .ft-feat .hd .t{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.ft3 .ft-feat .hd .go{ font-size:14px; font-weight:600; color:var(--blue-l); }
.ft3 .ft-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ft3 .ft-card{ display:block; border-radius:14px; overflow:hidden; background:var(--navy2); border:1px solid rgba(255,255,255,.09);
  transition:transform .5s var(--ease), border-color .3s; }
.ft3 .ft-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.24); }
/* ★작업물 원본이 3166×2159(≈3:2)라 16:10 으로 자르면 이미지 안에 박힌 제목이 잘린다.
   원본 비율에 맞춰 3:2 로 두면 좌우가 안 깎인다. */
/* ★display:block 필수 — <span> 은 기본 inline 이라 aspect-ratio 가 안 먹는다 */
.ft3 .ft-card .im{ display:block; aspect-ratio:3166/2159; overflow:hidden; background:#0d1e36; }
.ft3 .ft-card .im img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.ft3 .ft-card:hover .im img{ transform:scale(1.05); }
/* ★제목은 이미지 안에 이미 크게 박혀 있다 → 카드 아래에 또 쓰면 같은 말이 두 번 나온다.
   분류와 분야만 한 줄로 남긴다. */
.ft3 .ft-card .bd{ padding:12px 15px 14px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ft3 .ft-card .cg{ font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--blue-l); }
.ft3 .ft-card .fd{ font-size:12.5px; color:var(--navy-tx); }
.ft3 .ft-card .fd::before{ content:'·'; margin-right:9px; opacity:.5; }
.ft3 .ft-main{ padding:44px 0 12px; }
.ft3 .ft-grid{ display:grid; grid-template-columns:1.35fr repeat(3,1fr) 1.1fr; gap:40px; }
.ft3 .ft-bot{ border-top:1px solid rgba(255,255,255,.12); margin-top:38px; }

/* ══ FT-4 중형 · 3열 정보형 ════════════════════════════ */
.ft4 .ft-main{ padding:56px 0 10px; }
.ft4 .ft-grid{ display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:48px; }
/* ★row-major 로 흘리면 메뉴가 좌우로 읽혀 순서가 뒤엉킨다(업무자동화 → AI·RPA → AX교육 이
   아니라 업무자동화, AI·RPA / AX교육, 포트폴리오 …) → 세로로 흐르게 세운다 */
.ft4 .ft-mn{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(5,auto); gap:2px 32px; justify-content:start; }
.ft4 .ft-bot{ border-top:1px solid rgba(255,255,255,.12); margin-top:36px; }

/* ══ FT-5 중형 · 라이트 톤 가로 강조형 ═════════════════ */
.ft5{ background:var(--bg2); color:var(--ink); border-top:1px solid var(--line); }
.ft5 .ft-top{ padding:54px 0; border-bottom:1px solid var(--line); }
.ft5 .ft-top .ft-in{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.ft5 .ft-big{ display:flex; gap:52px; flex-wrap:wrap; }
.ft5 .ft-big .it .lb{ font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--g500); }
.ft5 .ft-big .it .vv{ display:block; margin-top:9px; font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:-.02em; color:var(--ink); transition:color .3s var(--ease); }
.ft5 .ft-big .it:hover .vv{ color:var(--blue); }
.ft5 .ft-mid{ padding:30px 0; }
.ft5 .ft-mid .ft-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ft5 .ft-mn{ display:flex; gap:30px; flex-wrap:wrap; }
.ft5 .ft-mn .ft-lnk{ font-size:15px; font-weight:500; color:var(--ink); }
/* ★공용 .ft-bot 은 flex 라 안쪽 .ft-in 이 flex item 이 되면서 max-width·auto 마진이 죽고
   사업자정보가 가운데로 쏠린다 → FT-5 만 블록으로 되돌린다 */
.ft5 .ft-bot{ display:block; border-top:1px solid var(--line); padding:20px 0 34px; }

/* ══════════════════════════════════════════════════════════
   2차 — 푸터 위쪽 키워드 띠 (2026-08-10)
   사장님 요청: "서비스 분야나 핵심 키워드가 좌에서 우로 움직이는 슬라이드가 됐든,
   코드 전환이 되는 모션이 됐든" → 두 방식을 만들어 골라 쓰게 했다.
     .kw-slide  좌→우 무한 마퀴 2줄
     .kw-code   한자리에서 16진수를 거쳐 다음 키워드로 갈아 끼운다(네비 호버와 같은 결)
   ══════════════════════════════════════════════════════════ */
.ft-kw{ padding:44px 0; border-bottom:1px solid var(--line); overflow:hidden; }
footer.ft.dk .ft-kw{ border-bottom-color:rgba(255,255,255,.1); }
.ft-kw .lb{ font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); margin-bottom:20px; }
footer.ft.dk .ft-kw .lb{ color:rgba(255,255,255,.45); }

/* ══════════════════════════════════════════════════════════
   ★확정본(2026-08-10) — FT-2 + B
   라벨("WHAT WE AUTOMATE")을 빼고, "박수칠때퇴근 👏 · 업무자동화 ⚙️" 같은
   **큰 워딩**이 좌→우로 흐른다. 흐르는 중에 한 칸씩 코드로 전환된다.
   슬라이드와 코드 전환을 따로 고르는 게 아니라 **둘을 겹친 것**이다.
   ══════════════════════════════════════════════════════════ */
.kw-big{ padding:52px 0; }
.kw-big .rail{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.kw-big .tk{ display:flex; align-items:center; gap:clamp(28px,3.4vw,56px); width:max-content;
  animation:ftbig 42s linear infinite; }
.kw-big:hover .tk{ animation-play-state:paused; }
@keyframes ftbig{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.kw-big .w{ display:inline-flex; align-items:center; gap:clamp(10px,1vw,16px); flex-shrink:0;
  font-size:clamp(26px,3.1vw,46px); font-weight:700; letter-spacing:-.03em; line-height:1.2;
  color:var(--ink); white-space:nowrap; }
footer.ft.dk .kw-big .w{ color:#fff; }
.kw-big .w .em{ font-size:.86em; line-height:1; }              /* 이모지 */
.kw-big .w .tx{ display:inline-block; transition:color .3s var(--ease); }
/* 코드로 바뀌는 동안 — 코발트로 뜨고 자간이 살짝 벌어진다 */
.kw-big .w .tx.scr{ color:var(--blue); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
footer.ft.dk .kw-big .w .tx.scr{ color:var(--blue-l); }
/* 구분 점 */
.kw-big .sep{ flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--tint-b); }
footer.ft.dk .kw-big .sep{ background:rgba(255,255,255,.22); }

@media(prefers-reduced-motion:reduce){ .kw-big .tk{ animation:none; } }
@media(max-width:720px){ .kw-big{ padding:34px 0; } .kw-big .tk{ animation-duration:30s; } }

/* 공통 칩 */
.ft-kc{ display:inline-flex; align-items:center; gap:9px; flex-shrink:0;
  font-size:15px; font-weight:500; color:var(--g700); background:var(--bg2);
  border:1px solid var(--line); border-radius:999px; padding:11px 19px; white-space:nowrap; }
.ft-kc b{ font-weight:600; color:var(--ink); }
.ft-kc .dt{ width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0; }
footer.ft.dk .ft-kc{ color:var(--navy-tx); background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.11); }
footer.ft.dk .ft-kc b{ color:#fff; }
footer.ft.dk .ft-kc .dt{ background:var(--blue-l); }

/* ── A안 · 좌→우 슬라이드 ─────────────────────────── */
.kw-slide .rows{ display:flex; flex-direction:column; gap:11px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.kw-slide .tk{ display:flex; gap:11px; width:max-content; animation:ftroll 48s linear infinite; }
.kw-slide .tk.rev{ animation:ftrollRev 58s linear infinite; }
.kw-slide:hover .tk{ animation-play-state:paused; }
@keyframes ftroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes ftrollRev{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }

/* ── B안 · 코드 전환 ──────────────────────────────── */
.kw-code .slots{ display:flex; flex-wrap:wrap; gap:11px; }
.kw-code .ft-kc{ transition:border-color .35s var(--ease), background .35s var(--ease); }
.kw-code .ft-kc.hot{ border-color:var(--blue); background:var(--tint); }
footer.ft.dk .kw-code .ft-kc.hot{ border-color:var(--blue-l); background:rgba(77,162,255,.14); }
.kw-code .tx{ display:inline-block; font-variant-numeric:tabular-nums; }
.kw-code .tx.scr{ color:var(--blue); letter-spacing:.02em; }
footer.ft.dk .kw-code .tx.scr{ color:var(--blue-l); }

@media(prefers-reduced-motion:reduce){
  .kw-slide .tk{ animation:none; }
}

/* ── 반응형 ──────────────────────────────────────────── */
@media(max-width:1180px){
  .ft1 .ft-grid,
  .ft2 .ft-grid{ grid-template-columns:1fr 1fr 1fr; }
  .ft1 .ft-grid > :first-child,
  .ft2 .ft-grid > :first-child{ grid-column:1/-1; }
  .ft3 .ft-grid{ grid-template-columns:1fr 1fr 1fr; }
  .ft3 .ft-grid > :first-child,
  .ft3 .ft-grid > :last-child{ grid-column:1/-1; }
  .ft3 .ft-cards{ grid-template-columns:1fr 1fr; }
  .ft4 .ft-grid{ grid-template-columns:1fr 1fr; }
  .ft4 .ft-grid > :last-child{ grid-column:1/-1; }
}
@media(max-width:720px){
  .ft{ --ft-pad:20px; }
  .ft1 .ft-grid,
  .ft2 .ft-grid,
  .ft3 .ft-grid,
  .ft4 .ft-grid{ grid-template-columns:1fr; gap:34px; }
  .ft1 .ft-grid > :first-child,
  .ft2 .ft-grid > :first-child,
  .ft3 .ft-grid > :first-child,
  .ft3 .ft-grid > :last-child,
  .ft4 .ft-grid > :last-child{ grid-column:auto; }
  .ft3 .ft-cards{ grid-template-columns:1fr; }
  /* ★모바일은 1건만. 2건을 두면 푸터 혼자 1900px 을 넘어가 스크롤이 끝나지 않는다
     (카드 한 장이 세로 240px 을 먹는다). 나머지는 "전체 사례 보기" 로 넘긴다 */
  .ft3 .ft-cards > :nth-child(n+2){ display:none; }
  .ft3 .ft-feat{ padding:44px 0 36px; }
  .ft2 .ft-news{ max-width:none; }
  .ft5 .ft-big{ gap:26px; }
  .ft-bot{ flex-direction:column; gap:16px; }
}
@media(prefers-reduced-motion:reduce){
  .ft-lnk::after, .ft-sns a, .ft3 .ft-card, .ft3 .ft-card .im img{ transition:none; }
}


/* ── 라이브 추가분 ───────────────────────────────────────── */
/* 푸터 로고도 실제 브랜드 로고. 다크 배경이라 워드마크만 흰색 반전한다(헤더와 같은 방식) */
footer.ft .ft-logo{ display:inline-flex; align-items:center; gap:9px; }
footer.ft .ft-logo-mark{ width:30px; height:30px; display:block; }
footer.ft .ft-logo-type{ height:21px; width:auto; display:block; filter:brightness(0) invert(1); }