/* ===== 3패널 히어로 (GUCCI 무드) ===== */
#nft-hero{
    position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;
    max-width:var(--maxw); margin:32px auto; padding:0 var(--gutter);
  }

  #nft-hero::before{
    content:"";
    position:absolute; inset:0;
    /* 하단 중심에만 어둡게 깔리는 복합 스크림 (이미지를 과도하게 죽이지 않음) */
    background:
      radial-gradient(80% 55% at 50% 85%, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 60%),
      linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.28) 100%);
    pointer-events:none;
    z-index:0; /* 패널 위, 텍스트 아래 */
  }

  #nft-hero::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(80% 55% at 50% 85%, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 60%),
      linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.22) 100%);
  }


  #nft-hero .panel{
    aspect-ratio: 3/4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
    background:var(--burgundy-dark);
  }
  #nft-hero .panel img{
    width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) contrast(1.02);
    transform:scale(1.02); transition:transform .6s ease;
  }
  #nft-hero .panel:hover img{ transform:scale(1.06) }
  
  /* 중앙 카피 (GUCCI 느낌의 타이포) */
 /* 중앙 카피 (Glass Plate) */
#nft-hero .hero-copy{
    position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
    text-align:center; color:#fff; z-index:1;
    max-width:min(86%,1050px);
    padding:14px 22px;
  
    /* 글라스 베이스는 '안정적인' 얇은 필름만 유지 */
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.18);
    border-radius:18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:0 14px 36px rgba(0,0,0,.28);
  
    /* 합성 안정화 (초기 깜빡임 방지) */
    transform: translateX(-50%) translateZ(0);
    backface-visibility:hidden;
    contain: paint;
    isolation:isolate;
    will-change: opacity, transform;
  }
  
  /* ❖ 어둡게 만드는 오버레이는 별도 레이어로 만들고, '서서히' 밝아지게 */
  #nft-hero .hero-copy::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit; z-index:-1;
    background:
      linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.56) 100%); /* 처음엔 진함 */
    opacity:1;
    animation: plateFadeToSoft 1400ms cubic-bezier(.21,.61,.35,1) 220ms forwards;
  }
  
  /* 처음 진함 → 서서히 덜 진하게(밝아지도록) */
  @keyframes plateFadeToSoft{
    0%   { opacity: 1; }
    100% { opacity: .62; } /* 최종엔 은은하게만 남김 */
  }
  
#nft-hero h1{ display:inline-block } /* 줄바꿈 안정화 */
#nft-hero h1{
    /* ✔ 한글 세리프 적용 */
    font-family: var(--serif-kr);
    font-weight: 510;
    letter-spacing: .06em;
    line-height: 1.24;
    font-size: clamp(15px, 1.6vw, 33px); /* 화면에 맞게 유동 확대 */
    margin: 0 0 8px;
  
    /* ✔ 고급 가독성: 멀티 레이어 섀도 + 미세 스트로크 */
    text-shadow:
      0 2px 18px rgba(0,0,0,.55),
      0 0 30px rgba(0,0,0,.45),
      0 1px 0 rgba(0,0,0,.35);
    -webkit-text-stroke: 0.4px rgba(0,0,0,.35); /* 지원 브라우저에서 윤곽선 보강 */
    text-wrap: balance; /* 줄바꿈 균형(지원 브라우저) */
  }

  #nft-hero p{
  margin: 0;
  font-size: clamp(6px, 1.6vw, 16px);
  letter-spacing: .01em;
  opacity: 0.96;
  text-shadow:
    0 2px 14px rgba(0,0,0,.55),
    0 0 24px rgba(0,0,0,.45);
}

#nft-hero h1 .en{
    font-family: var(--en-geo);   /* ✅ EN = Jost */
    letter-spacing: .10em;        /* Futura 톤 살짝 넓게 */
    font-weight: 300;
  }
  #nft-hero h1 .ko{
    font-family: var(--serif-kr); /* 기존 유지 */
    letter-spacing: .02em;
    font-weight: 330;
  }
  

  /* ===== 로드 인 줌아웃(확대→축소) 순차 재생 ===== */
@keyframes zoomOutSmooth {
    0%   { transform: scale(1.16); }   /* 처음 크게 */
    100% { transform: scale(1.02); }   /* 기본값과 동일 스케일로 안착 */
  }
  
  /* 공통 애니메이션: 최종 transform은 기존 값과 동일하여 이후 패럴랙스/호버와 충돌 없음 */
  #nft-hero .panel img{
    animation: zoomOutSmooth 1.15s ease-in-out both;
    animation-delay: var(--z-delay, .24s); /* 지연은 패널별로 다르게 */
    will-change: transform;
  }
  
  /* 1→2→3 순서로 시간차 적용 (조금 이후에 시작하도록 지연값 부여) */
  #nft-hero .panel-left  img{ --z-delay: .28s; }
  #nft-hero .panel-center img{ --z-delay: .48s; }
  #nft-hero .panel-right img{ --z-delay: .68s; }
  
  /* 모션 최소화 환경에서는 애니메이션 비활성화 */
  @media (prefers-reduced-motion: reduce){
    #nft-hero .panel img{ animation:none !important; }
  }
  

  @media (max-width:960px){
    #nft-hero{grid-template-columns:1fr; gap:12px}
    #nft-hero .hero-copy{
        position: static;
        left: auto;
        bottom: auto;
        transform: none;           /* ← 치우침 원인 제거 */
        color: var(--ink);
        padding: 8px 0 0;
        width: 100%;
        margin: 0 auto;            /* 컨테이너 내 중앙 */
        text-align: center;        /* 텍스트 중앙 정렬 */
        background: transparent;   /* 데스크톱 글라스는 모바일에선 제거 */
        border: 0;
        box-shadow: none;
      }

      #nft-hero h1{
        font-size: 28px;           /* 가독성 좋은 사이즈 */
        line-height: 1.28;
        text-shadow: none;
        text-align: center;
        margin-bottom: 6px;
      }

      #nft-hero p{
        color: var(--sub-ink);
        text-align: center;
        font-size: 14.5px;
        line-height: 1.7;
        text-shadow: none;
      }
  .m-only{display:inline}
}
.m-only{display:none}