/* src/styles/nft/footer.css  — 2025-10-03 또리 리디자인
   목적: Gucci 무드의 'center-left' 레이아웃 + 밑줄 애니메이션 정교화  */


   /* ── 링크 밑줄 애니메이션 전역 변수(푸터 한정) ───────────────── */
.sm-footer{
  /* ...기존 속성 유지... */

  /* ⏱ 속도/간격 */
  --link-sweep-duration: .52s;   /* 블랙(좌→우) */
  --link-white-duration: .48s;   /* 화이트(우→좌) */
  --link-gap: .10s;              /* 두 라인 사이 간격(딜레이) */

  /* 🎚 이징(부드럽고 고급스러운 가속/감속) */
  --link-ease: cubic-bezier(.22,.61,.36,1); /* = easeOutQuint 느낌 */
}

   @import url("./nft_variables.css");

   /* ========== Dark Luxury Footer ========== */
   .sm-footer{
     position: relative;
     background: linear-gradient(180deg, #0b0b0b 0%, #000 100%);
     color:#e9e9e9;
     padding: 56px 0 72px;
     overflow:hidden;
     border-top:1px solid rgba(255,255,255,.06);
     isolation:isolate; /* 상단 요소와 블렌딩 분리 */
   }
   
   /* ✅ '가운데 컨테이너'에 놓고, 내부 콘텐츠는 왼쪽 정렬(Gucci 무드) */
   .sm-footer .footer-inner{
     /* 가운데 컨테이너 폭: 페이지 좌우로 여백을 주어 '딱 붙는 느낌' 제거 */
     width: min(var(--maxw), calc(100% - 96px));
     margin: 0 auto;
     padding: 0 var(--gutter);
   
     /* 좌측 정보 / 우측 락업 그리드 */
     display: grid;
     grid-template-columns: minmax(280px, 1.15fr) 1fr;
     gap: 28px 56px;
     align-items: start;
   }
   
   /* ───────────────────────────────────────────────────────────── */
   /* 링크 컬럼: '텍스트 폭만큼' 밑줄이 생기도록 inline-block 강제  */
   .footer-links{
     display: grid;
     gap: 16px;
     align-content: start;
     justify-self: start;      /* 그리드 안에서 좌측에 고정 */
     max-width: 420px;         /* 과도한 폭 확장을 방지 (Gucci 무드) */
     justify-items: start;        /* ← 핵심: 그리드 아이템 가로 스트레치 방지 */
}

   
   /* 기본 상태: 얇은 화이트 1px 밑줄이 '항상' 글자 폭만큼 보임 */
   .footer-links .link{
     display: inline-block !important;      /* ⚑ 글자 폭만큼만 차지 */
     width: fit-content;                 /* 근래 브라우저 */
     max-width: max-content;             /* 호환 보강 */
     white-space: nowrap;                /* 줄바꿈 방지 → 밑줄 길이 안정화 */
     padding-bottom: 2px;
     border-bottom: 1px solid rgba(255,255,255,.92); /* 기본 화이트 라인 */
     text-decoration: none;
     color:#f3f3f3;
     opacity:.92;
     position: relative;
     line-height: 1.7;
   }
   
   /* 1) 블랙 스윕: 하얀 선 위를 왼→오로 지나가며 잠깐 '지우는' 효과 */
   @keyframes footerSweep {
     0%   { transform: scaleX(0); }
     55%  { transform: scaleX(1); }   /* 완전히 덮었다가 */
     100% { transform: scaleX(0); }   /* 다시 0으로 사라짐 */
   }
   
   .footer-links .link::before{
     content:"";
     position:absolute; left:0; right:0; bottom:-1px; height:1px;
     background:#000;           /* 검정색 '지우개' */
     transform-origin:left;
     transform: scaleX(0);
     z-index: 2;                /* 기본 화이트 라인 위에서 동작 */
     will-change: transform;
   }
   
   /* 2) 화이트 재그림: 블랙 스윕이 지나간 뒤, 왼→오로 다시 그어짐 */
   .footer-links .link::after{
     content:"";
     position:absolute; left:0; bottom:-1px; height:1px; width:0;
     background:#fff; z-index:3;
     transition: width .34s cubic-bezier(.21,.61,.35,1) .26s; /* 스윕 타이밍과 맞춤 */
   }
   
   /* Hover 타이밍 제어 */
   .footer-links .link:hover{ opacity:1; }
   .footer-links .link:hover::before{
    animation: footerSweep var(--link-sweep-duration) cubic-bezier(.55,.06,.19,.97) forwards;
  }
   .footer-links .link:hover::after{
    transition: width var(--link-redraw-duration) cubic-bezier(.21,.61,.35,1) var(--link-redraw-delay);
   }
   
   /* ───────────────────────────────────────────────────────────── */
   /* 우측 락업(심볼 + 워드마크) */
   .footer-lockup{
     display:flex; align-items:center; gap:10px;
     justify-content:flex-end;
   }
   .footer-lockup .brand{
     font-family: var(--en-geo); /* 영문 Jost (Futura 계열 무드) */
     font-size:13px;
     letter-spacing:.24em;
     text-transform: uppercase;
     color:#dcdcdc; white-space:nowrap;
   }
   .footer-lockup .brand-mark{
     width:24px; height:24px; object-fit:contain;
     filter: grayscale(1) brightness(1.15) contrast(1.05);
     opacity:.92;
   }
   
   /* 회사 정보/저작권: 좌측 컬럼에 고정(가운데 컨테이너 안에서 왼쪽 정렬) */
   .footer-meta{
     grid-column: 1 / 2;
     text-align:left;
     font-size:13px;
     line-height:1.9; color:#bdbdbd;
   }
   .footer-meta a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25) }
   .footer-meta a:hover{ border-bottom-color:#fff }
   
   .footer-legal{
     grid-column: 1 / 2;
     text-align:left;
     font-size:13px; color:#a9a9a9; letter-spacing:.02em;
   }
   
   /* ===== 바닥 워터마크(텍스트) 강화 ===== */
.sm-footer .footer-inner{ position: relative; z-index: 1; } /* 본문을 워터마크 위로 */
/* ===== 푸터 워터마크: GUCCI 스타일로 중앙 고정 & 선명한 실색 ===== */

/* 본문 콘텐츠가 워터마크 위 레이어에 오도록 z-index ↑ */
.sm-footer .footer-inner{
  position: relative;
  z-index: 2; /* 기존 1 → 2로 상향 */
}

/* PNG 워드마크는 감춤(텍스트가 주도권) */
.footer-watermark-img{ display:none !important; }

/* 중앙 정렬 + 실색 채움(Jost) + 크고 선명하게 */
.footer-watermark{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);  /* 브라우저 크기와 무관하게 '정·중앙' 고정 */
  z-index:0;

  /* 타이포그래피: Jost(기하 산세리프)로 GUCCI급 존재감 */
  font-family: var(--en-geo);
  font-weight: 150;
  text-transform: uppercase;
  letter-spacing: .24em;
  white-space: nowrap;
  line-height: .9;

  /* 크기: 화면 폭에 따라 유동. 데스크톱에서 크게, 모바일에서 자동 축소 */
  font-size: clamp(140px, 10vw, 640px);

  /* 실색 채움(흐릿함 제거), 대비↑ */
  color: rgba(255,255,255,.22);  /* GUCCI처럼 '확실히' 보이도록 채움 */
  -webkit-text-stroke: 0 transparent; /* 윤곽선 제거(블러 원인 차단) */
  text-shadow: none;
  mix-blend-mode: normal;

  pointer-events:none;
  user-select:none;
}

/* 모바일에서는 살짝 투명도↓, 크기도 자동 축소되어 가독성 유지 */
@media (max-width: 920px){
  .footer-watermark{
    font-size: clamp(96px, 42vw, 360px);
    color: rgba(255,255,255,.18);
  }
}


   
   /* 반응형 */
   @media (max-width: 920px){
     .sm-footer .footer-inner{
       width: calc(100% - 40px);
       grid-template-columns: 1fr;
       gap: 20px 0;
     }
     .footer-lockup{ justify-content:flex-start; }
   }
   
   /* 접근성: 모션 최소화 환경 */
   @media (prefers-reduced-motion: reduce){
     .footer-links .link::after{ transition: none; }
   }
   
   /* address 기본 이탤릭 제거 */
.footer-meta,
.footer-meta *{
  font-style: normal !important; /* 기본 italic 상쇄 */
}


/* ===== Footer Bottom Mark (푸터 '아래' 별도 영역) ===== */

/* 이전에 쓰던 오버랩형 워터마크는 비활성화 */
.footer-watermark{ display:none !important; }

/* 밴드 영역 자체: 푸터와 분리된 '검은 바닥' */
.footer-bottom-mark{
  background:#000;
  padding: clamp(56px, 6vw, 120px) 0 clamp(56px, 8vw, 140px);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* 가운데 컨테이너 (푸터 본문과 동일한 폭 규칙 유지) */
.fbm-inner{
  width: min(var(--maxw), calc(100% - 96px));
  margin: 0 auto;
  display:flex; align-items:center; justify-content:center;
}

/* 중앙 워드마크: 항상 '전체 글자'가 보이도록 설계 */
.fbm-text{
  /* 타이포 */
  font-family: var(--en-geo);     /* = Jost (변수에 이미 선언됨) */
  font-weight: 90;
  text-transform: uppercase;
  letter-spacing: clamp(.24em, 6vw, .22em);
  line-height: .9;
  text-align:center;

  /* 색/선명도 */
  color:#fff;                     /* 선명한 실색(흐릿함 제거) */
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;

  /* 크기: 뷰포트에 맞춰 유연하게 축소/확대
     - 데스크톱: 대형 단일 라인
     - 모바일: 너무 작아지지 않도록 적절히 줄임 */
  font-size: clamp(28px, 8.5vw, 160px);

  /* 단일 라인을 우선; 모바일에서는 자동 줄바꿈 허용(아래 미디어쿼리) */
  white-space: nowrap;
}

/* 아주 좁은 화면(모바일)에서는 두 줄 허용: 전체 글자가 '항상' 보이도록 보장 */
@media (max-width: 720px){
  .fbm-text{
    white-space: normal;
    line-height: .95;
  }
}

.footer-links .link{
  /* ...기존 속성 유지... */
  font-size: var(--footer-link-size);  /* ✅ 폰트 크기 전역 제어 */
}

/* === 푸터 내 EN/Jost 전용 적용 (모듈 자급자족) ===================== */
/* - 전역 변수 --en-geo가 없을 때도 안전하게 Jost로 폴백 */
.sm-footer :where(.en, [lang="en"], .brand.en){
  font-family: var(--en-geo, 'Jost','Helvetica Neue',Arial,sans-serif);
  font-weight: 400;
  letter-spacing: .02em;
  font-feature-settings: "kern" 1, "liga" 1; /* 커닝/합자 */
}

/* 브랜드 락업/워드마크(대문자 + 넓은 자간) */
:root{
  --footer-brand-weight: 400;         /* ✔ 필요 시 500/600 등으로 조절 */
}
.footer-lockup .brand,
.sm-footer .brand.en{
  font-family: var(--en-geo, 'Jost','Helvetica Neue',Arial,sans-serif);
  font-weight: var(--footer-brand-weight);
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #dcdcdc;
}

/* (기존 스타일은 그대로 유지하시되, 위 블록을 파일 상단 '타이포' 섹션으로 추가) */

/* === Footer: 줄바꿈 품질 개선(한글 '음절' 분리 금지 + 자연스러운 개행) === */
/* 1) 메뉴 링크 중 '두 줄 이상' 허용하고 싶을 때만 .link--wrap 클래스 사용 */
.footer-links .link.link--wrap{
  white-space: normal;        /* 줄바꿈 허용 */
  word-break: keep-all;       /* ❗ 한글 음절 분리 금지 */
  overflow-wrap: break-word;  /* 공간 부족시 단어 경계에서 개행 */
  line-break: loose;          /* CJK 줄바꿈을 부드럽게 */
  hyphens: auto;              /* 영문은 하이픈 기반 자연스런 개행 */
  text-wrap: balance;         /* (지원 브라우저) 줄 길이 밸런싱 → 고급스러운 행 갈림 */
}

/* 2) 회사 주소/법적고지(긴 문자열 포함) — 안전한 개행 폭넓게 허용 */
.footer-meta, .footer-meta p,
.footer-meta .addr, .footer-legal, .footer-legal p{
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;    /* 아주 긴 URL/이메일도 안전하게 감김 */
  line-break: loose;
  hyphens: auto;
}

/* 3) 특정 덩어리는 절대 끊기지 않게(전화번호·브랜드명 등) */
.u-nobreak{ white-space: nowrap; }

/* 4) URL/이메일만 따로 강하게 감기게 하고 싶을 때 */
a.u-softwrap, .addr .u-softwrap{
  overflow-wrap: anywhere;
  word-break: break-word;     /* 레거시 브라우저 보강 */
  hyphens: auto;
}