/* ─────────────────────────────────────────
   Wildfish — footer.css
   블랙 풀페이지 푸터 (레퍼런스: Umihikari 풀페이지 푸터)
   서체: Poppins — 수치는 레퍼런스 스크린샷(2560×1294 뷰포트) 실측값
   --f : 푸터 기준 1px. 화면이 기준보다 작으면 비율대로 줄어 한 화면에 맞춰집니다.
───────────────────────────────────────── */

.wf-footer-main {
  --f: min(1px, calc(100vw / 1600));
  --ft-muted: rgba(255, 255, 255, 0.66);
  position: relative;
  background: #000;
  color: #fff;
  font-family: 'Poppins', 'Montserrat', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: calc(34 * var(--f));
  font-size: calc(18 * var(--f));
  -webkit-font-smoothing: antialiased;
}
html.wf-fp-on .wf-fp-section--footer {
  --f: min(1px, calc(100vw / 1600), calc(var(--vh) / 1294));
}
.wf-footer-main a { color: inherit; text-decoration: none; }

.ft-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  padding: calc(103 * var(--f)) calc(64 * var(--f)) calc(84 * var(--f));
}
.wf-footer-main:not(.wf-fp-section) .ft-inner { min-height: 0; height: auto; }

/* ─── 상단: 로고 + 맨위로 ─── */
.ft-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ft-logo { display: block; }
.ft-logo img {
  display: block;
  height: calc(72 * var(--f));
  width: auto;
}
.ft-totop {
  width: calc(66 * var(--f));
  height: calc(66 * var(--f));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.ft-totop svg { width: calc(22 * var(--f)); height: auto; transition: transform 0.35s ease; }
.ft-totop:hover { background: #fff; color: #000; border-color: #fff; }
.ft-totop:hover svg { transform: translateY(-3px); }

.ft-rule {
  height: 1px;
  margin-top: calc(78 * var(--f));
  background: rgba(255, 255, 255, 0.14);
}

/* ─── 메뉴 (SemiBold 22) ─── */
.ft-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(39 * var(--f));
  margin-top: calc(40 * var(--f));
  font-size: calc(22 * var(--f));
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ft-nav a { position: relative; display: inline-block; }
.ft-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(2 * var(--f)); height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ft-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ─── 정보 (Regular 18 / SemiBold 18 / 행간 34) ─── */
.ft-info { margin-top: calc(38 * var(--f)); }
.ft-strong { font-weight: 600; letter-spacing: -0.01em; }
.ft-row { display: flex; flex-wrap: wrap; align-items: center; }
.ft-row--gap { gap: 0 calc(37 * var(--f)); margin-top: calc(8 * var(--f)); }
.ft-row + .ft-strong { margin-top: calc(34 * var(--f)); }   /* 주소 줄 ↔ Services 는 넓게, 제목 ↔ 내용은 가깝게 */
.ft-row--slash { gap: 0 calc(18 * var(--f)); margin-top: calc(8 * var(--f)); }
.ft-row a { transition: opacity 0.2s; }
.ft-row a:hover { opacity: 0.6; }
.ft-slash {
  display: inline-block;
  width: calc(18 * var(--f));
  height: calc(18 * var(--f));
  background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.85) calc(50% - 0.5px), rgba(255, 255, 255, 0.85) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.ft-copy {
  margin-top: calc(35 * var(--f));
  font-size: calc(17 * var(--f));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─── 2×2 링크 버튼 (21 / 밑줄 2px) ─── */
.ft-links {
  display: grid;
  grid-template-columns: repeat(2, calc(322 * var(--f)));
  gap: calc(38 * var(--f)) calc(26 * var(--f));
  margin-top: calc(90 * var(--f));
}
.ft-linkbtn {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(12 * var(--f));
  padding: 0 calc(15 * var(--f)) calc(14 * var(--f)) 0;
  font-size: calc(21 * var(--f));
  line-height: calc(30 * var(--f));
  white-space: nowrap;
}
.ft-linkbtn::before,
.ft-linkbtn::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: rgba(255, 255, 255, 0.95);
}
.ft-linkbtn::after {
  background: #000;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
}
.ft-linkbtn:hover::after { animation: ft-line-wipe 0.9s cubic-bezier(0.77, 0, 0.175, 1); }
@keyframes ft-line-wipe {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.ft-linkbtn-txt em { font-style: normal; letter-spacing: 0.06em; }
.ft-linkbtn-dot {
  flex: none;
  width: calc(15 * var(--f));
  height: calc(15 * var(--f));
  border: 1px solid #fff;
  border-radius: 50%;
  transition: background 0.3s ease, transform 0.3s ease;
}
.ft-linkbtn:hover .ft-linkbtn-dot { background: #fff; transform: scale(0.72); }

/* ─── 우측 하단: 라벨 · 목록 · 아웃라인 워드마크 ─── */
.ft-bottom {
  margin-top: auto;
  padding-top: calc(60 * var(--f));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.ft-tagline {
  font-size: calc(16 * var(--f));
  letter-spacing: 0.3em;
  margin-right: -0.15em;
  text-transform: uppercase;
  color: var(--ft-muted);
}
.ft-worklist {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 calc(42 * var(--f));
  margin-top: calc(18 * var(--f));
  font-size: calc(21 * var(--f));
  line-height: calc(30 * var(--f));
  letter-spacing: 0.05em;
  color: var(--ft-muted);
}
.ft-worklist a { transition: color 0.25s; }
.ft-worklist a:hover { color: #fff; }

.ft-wordmark {
  width: calc(1040 * var(--f));
  max-width: 100%;
  margin-top: calc(44 * var(--f));
}
.ft-wordmark-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ft-wordmark-svg path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
/* 선이 그려지는 애니메이션 */
.wf-js .wf-anim .ft-wordmark-svg path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0s linear 0.9s;
}
.wf-js .wf-anim.is-active .ft-wordmark-svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--p, 0) * 110ms + 900ms);
}
@media (prefers-reduced-motion: reduce) {
  .wf-js .wf-anim .ft-wordmark-svg path { stroke-dashoffset: 0 !important; transition: none !important; }
}


/* ══════════════════════════════════════
   태블릿 · 모바일 (일반 스크롤)
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .wf-footer-main { --f: 0.86px; }
  .ft-inner { padding: 72px 40px 64px; height: auto; }
  .ft-bottom { margin-top: 72px; padding-top: 0; }
  .ft-wordmark { width: 100%; }
}
@media (max-width: 768px) {
  .wf-footer-main { --f: 1px; font-size: 14px; line-height: 1.7; }
  .ft-inner { padding: 104px 24px 48px; }
  .ft-logo img { height: 44px; }
  .ft-totop { width: 48px; height: 48px; }
  .ft-totop svg { width: 16px; }
  .ft-rule { margin-top: 36px; }
  .ft-nav { margin-top: 28px; font-size: 18px; gap: 4px 24px; line-height: 1.8; }
  .ft-info { margin-top: 24px; }
  .ft-row--gap { margin-top: 6px; gap: 2px 20px; }
  .ft-row--gap span { width: 100%; }
  .ft-strong, .ft-row + .ft-strong { margin-top: 24px; }
  .ft-info .ft-strong:first-child { margin-top: 0; }
  .ft-row--slash { margin-top: 6px; gap: 2px 10px; }
  .ft-slash { width: 12px; height: 12px; }
  .ft-copy { margin-top: 28px; font-size: 11px; line-height: 1.7; }
  .ft-links { grid-template-columns: 1fr; gap: 22px; margin-top: 44px; }
  .ft-linkbtn { font-size: 16px; line-height: 1.6; padding-bottom: 12px; }
  .ft-linkbtn-dot { width: 12px; height: 12px; }
  .ft-bottom { margin-top: 56px; align-items: flex-start; text-align: left; }
  .ft-tagline { font-size: 11px; }
  .ft-worklist { justify-content: flex-start; gap: 2px 20px; font-size: 15px; line-height: 1.8; margin-top: 10px; }
  .ft-wordmark { margin-top: 28px; }
}


/* ─── 모바일 풀페이지(포트폴리오 상세)의 마지막 장 ───
   푸터가 한 화면보다 길면 이 섹션 안에서만 스크롤됩니다. */
html.wf-fp-m .wf-fp-section--footer {
  --f: 0.86px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.wf-fp-m .wf-fp-section--footer .ft-inner { height: auto; min-height: 100%; }
@media (max-width: 768px) {
  html.wf-fp-m .wf-fp-section--footer { --f: 1px; }
  html.wf-fp-m .wf-fp-section--footer .ft-inner { padding-top: 64px; }
}