/* ===========================================================
   Signature Masterpiece — Header & Offcanvas (통합 스타일)
   - GUCCI 무드 탑바, 스크롤 투명→화이트 전환
   - 오른쪽 오프캔버스 메뉴(가우시안 백드롭, 내부만 스크롤)
   - 프리클로즈: X 클릭 시 패널 전체가 왼쪽 살짝 이동 후 닫힘
   - 접근성/스크롤바 보정 포함
   - 모든 수치/간격은 CSS 변수로 조정 가능
   =========================================================== */

/* 1) 폰트 (라틴: Jost) — 상업용은 자체 호스팅 권장, 일단 Google CDN 사용 */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap");

/* 2) 전역 토큰 (사이트 공용 감성) */
:root{
  --oc-hairline: 1px;               /* 기본 1px */
  --brand-weight-latin: 600; /* Cinzel 굵기 고정 */
  --burgundy: #7a1e27; --burgundy-dark:#5f171e;
  --ivory:#faf7f2; --ink:#111; --sub-ink:#414141; --gold:#c6a85f;

  /* 한/영 베이스 폰트 */
  --kr-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --serif: "Cinzel", serif; --serif-kr: "Noto Serif KR", serif;
  --ink:#111; --sub-ink:#414141;

  /* 헤더 전환 */
  --hdr-progress: 0;     /* 0~1 (JS가 갱신) */
  --hdr-h: 0px;

  /* 헤더 셰인(은은한 하이라이트) */
  --hdr-sheen-opacity: .12;
  --hdr-sheen-dur: .48s;

  /* 오프캔버스 타이포/간격 */
  --oc-font-latin: "Jost", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial;
  --oc-font-korean: var(--kr-body);

  --hdr-icon-gap: 14px;
  --hdr-icon-size: 20px;
  --hdr-menu-label-weight: 510;
  --oc-link-weight: 483;     /* 메뉴 링크 기본 굵기(기존 420 → 500로 교체) */

  
  --oc-link-size: clamp(16px, 2.2vw, 18.6px); /* 메뉴 글자 크기 */
  --oc-line-height: 1.28;                   /* 줄 간격(몰림 방지) */
  --oc-gap: 18px;                           /* 메뉴 항목 간격 */
  --oc-arrow-size: .9em;                    /* 화살표 크기 */
  --oc-arrow-gap: .51em;                    /* 글자-화살표 간격 */
  --oc-arrow-shift: 6px;                    /* 호버 시 화살표 슬라이드 거리 */

  /* 프리클로즈 */
  --oc-preclose-shift: 18px;     /* 14~22px 추천 */
  --oc-preclose-dur: .18s;
  --oc-preclose-ease: cubic-bezier(.22,.61,.36,1);

  --hdr-menu-label-weight: 560;   /* 기본 굵기(조절 가능) */
  --hdr-menu-label-size: 12px;    /* MENU 글자 크기 */
  --hdr-menu-label-tracking: .16em; /* MENU 자간 */
  --hdr-icon-stroke: 1.6;         /* 아이콘 선 굵기(햄버거·돋보기 등) */
  
  
    /* ===== 헤더 높이(두께) 제어 토큰 ===== */
    --hdr-pad-y: 16px;   /* 헤더 상·하 패딩 (기본 두께) */
    --hdr-pad-x: 16px;   /* 좌·우 패딩 */
    --hdr-btn-pad: 6px;  /* 오른쪽 아이콘 버튼의 내부 패딩 */
    /* 아이콘 크기에 따라 최소 높이가 자연스럽게 보장되도록 계산 */
    --hdr-min-h: calc((var(--hdr-pad-y) * 2) + max(20px, var(--hdr-icon-size)));

    /* ===== Offcanvas Menu Typo Tokens (조절용) ===== */

  /* MENU 타이틀(상단 ‘MENU’) */
  --oc-title-size: 12px;
  --oc-title-weight: 600;
  --oc-title-tracking: .18em;

  /* 메인 항목(1줄째) */
  --oc-main-font: var(--oc-font-latin), var(--oc-font-korean); /* 기본 Jost */
  --oc-main-size: clamp(16px, 2.2vw, 18.6px);
  --oc-main-weight: 500;
  --oc-main-tracking: .02em;
  --oc-main-line: 1.28;

  /* 서브 캡션(2줄째) */
  --oc-caption-font: var(--oc-font-latin), var(--oc-font-korean); /* 기본 Jost */
  --oc-caption-size: clamp(12px, 1.5vw, 13.5px);
  --oc-caption-weight: 400;
  --oc-caption-tracking: .02em;
  --oc-caption-gap: 4.2px; /* 첫줄 둘째줄 간격 */

  /* 섹션 간격(서브/유틸리티 블록 사이) */
  --oc-section-gap: 18px;

   /* 라인 색/두께/간격 */
   --oc-uline-black: #111;                 /* 1번: 블랙 라인 색 */
   --oc-uline-white: rgba(255,255,255,.96);/* 2번: 화이트 라인 색(백그라운드에서 보이도록 살짝 투명) */
   --oc-uline-white-shadow: rgba(0,0,0,.08); /* 화이트 라인 보조 외곽 */
 
   --oc-uline-h1: var(--oc-hairline);   /* 블랙 라인 두께 */
  --oc-uline-h2: var(--oc-hairline);   /* 화이트 라인 두께 */
  --oc-uline-shadow-w: var(--oc-hairline); /* 화이트 보정폭도 동일 */

  --oc-uline-offset: 1.5px;  /* ✅ em → px 고정(픽셀 스냅) */
  --oc-uline-gap:    1.5px;  /* ✅ 라인 간격 px 고정 */
 
   /* 모션(속도/이징/지연) */
   --oc-uline-dur1: .34s;   /* 블랙 라인 속도 */
   --oc-uline-dur2: .40s;   /* 화이트 라인 속도 */
   --oc-uline-ease: cubic-bezier(.22,.61,.36,1); /* ‘easy’ 느낌의 부드러운 이징 */
   --oc-uline-delay2: .06s; /* 화이트 라인 시작 지연(블랙 다음) */

   /* ===== Underline Variants (골드/라운드 캡 등) ===== */
   
  /* 골드 계열 */
  --oc-uline-gold1: var(--gold);                 /* 메인(블랙 라인 대체) */
  --oc-uline-gold2: color-mix(in oklab, var(--gold) 85%, white 15%); /* 보조(화이트 라인 대체) */

  /* 라운드 캡 반경 (기본 0 → 항목에서만 999px로 올림) */
  --oc-uline-radius: 0;

 
    /* Burgundy */
    --pal-burgundy-1: #7a1e27; /* 메인(진) */
    --pal-burgundy-2: color-mix(in oklab, #7a1e27 78%, white 22%); /* 보조(연) */
  
    /* Champagne Gold */
    --pal-champagne-1: #c6a85f;
    --pal-champagne-2: color-mix(in oklab, #c6a85f 82%, white 18%);
  
    /* Red (Vivid) */
    --pal-red-1: #b02222;
    --pal-red-2: color-mix(in oklab, #b02222 76%, white 24%);
  
    /* Emerald */
    --pal-emerald-1: #0e7a59;
    --pal-emerald-2: color-mix(in oklab, #0e7a59 78%, white 22%);
  
    /* Navy */
    --pal-navy-1: #0f274a;
    --pal-navy-2: color-mix(in oklab, #0f274a 76%, white 24%);
  
    /* Graphite (모노톤 포인트) */
    --pal-graphite-1: #2a2a2a;
    --pal-graphite-2: color-mix(in oklab, #2a2a2a 68%, white 32%);
  
    --hdr-logo-size-mobile: 24px;   /* JS에서 기본 주입됨 */
    --hdr-logo-size-desktop: 33px;  /* JS에서 기본 주입됨 */
    --hdr-logo-gap: 10px;           /* JS에서 기본 주입됨 */

     /* === 브랜드(텍스트) 유동 타이포 – 폭 확대 === */
  --brand-size-min: 13px;   /* 모바일 기본 크기 (기존 11px → 15px) */
  --brand-size-max: 21px;   /* 데스크톱 상한 (기존 19px → 28px) */
  --brand-track-min: .24em; /* 모바일 자간 */
  --brand-track-max: .34em; /* 데스크톱 자간 상한 */

  /* === 로고/간격 상·하한 및 유동폭 확대 === */
  --hdr-logo-size-mobile: 26px;  /* 모바일 기본 (기존 24px → 26px) */
  --hdr-logo-size-desktop: 40px; /* 데스크톱 상한 (기존 28px → 40px) */

  --hdr-logo-gap-min: 4px;  /* 로고-브랜드 간격(모바일) */
  --hdr-logo-gap-max: 6px;  /* 간격(데스크톱) */

  /* === 유동(Fluid) 계산 – vw 계수 상향으로 ‘체감 확대’ === */
  --brand-size-fluid: clamp(var(--brand-size-min),
                           calc(var(--brand-size-min) + 2.20vw),   /* 0.95vw → 2.20vw */
                           var(--brand-size-max));
  --brand-track-fluid: clamp(var(--brand-track-min),
                             calc(var(--brand-track-min) + 0.12vw), /* 0.06vw → 0.12vw */
                             var(--brand-track-max));

  --hdr-logo-size-fluid: clamp(var(--hdr-logo-size-mobile),
                               calc(var(--hdr-logo-size-mobile) + 2.00vw), /* 0.90vw → 2.00vw */
                               var(--hdr-logo-size-desktop));

  --hdr-logo-gap-fluid: clamp(var(--hdr-logo-gap-min),
                              calc(var(--hdr-logo-gap-min) + 1.40vw),       /* 0.8vw → 1.40vw */
                              var(--hdr-logo-gap-max));
}

.nft-header .right{ gap: var(--hdr-icon-gap); }
.icon-btn svg, .icon-btn .icon-img{ width:var(--hdr-icon-size); height:var(--hdr-icon-size); display:block; }
.icon-btn .menu-label{ font-weight: var(--hdr-menu-label-weight); }

/* 3) 메뉴 링크 두께를 명시적으로 500으로 (얇음 해결) */


/* 3) 글로벌(아이보리→화이트 배경 그라데이션 선택) */
html,body{margin:0;padding:0}
body{
  font-family: var(--kr-body);
  color: var(--ink);
  background: linear-gradient(180deg, var(--ivory) 0%, #fff 100%);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ===================== 헤더 ===================== */
.nft-header{
  grid-template-columns: 1fr auto 1fr; /* 좌/중앙/우 */
  align-items: center;
  position: fixed; inset: 0 0 auto 0; z-index: 950;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 12px 16px;
  background: rgba(255 255 255 / var(--hdr-progress));

  padding: var(--hdr-pad-y) var(--hdr-pad-x); /* ← 높이(두께) 변수화 */
  min-height: var(--hdr-min-h);              /* ← 최소 높이 보장 */
/* 안전 영역 패딩을 기본 패딩에 더해 자연 적용 */
  padding-left:  calc(var(--hdr-pad-x) + env(safe-area-inset-left));
  padding-right: calc(var(--hdr-pad-x) + env(safe-area-inset-right));


  border-bottom: 1px solid rgba(0 0 0 / calc(.06 * var(--hdr-progress)));
  box-shadow: 0 8px 28px rgba(0 0 0 / calc(.05 * var(--hdr-progress)));
  -webkit-backdrop-filter: blur(calc(14px * var(--hdr-progress)));
          backdrop-filter: blur(calc(14px * var(--hdr-progress)));
  transition: background .45s cubic-bezier(.22,.61,.36,1),
              border-color .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s cubic-bezier(.22,.61,.36,1);
}
html.has-fixed-header body{ padding-top: var(--hdr-h); }

/* 1) 오른쪽 그룹을 우측 정렬로 (중앙 몰림 방지) */
.nft-header .right{ justify-content:flex-end; }
.nft-header .left { justify-content:flex-start; }

.nft-header .left, .nft-header .right{
    display:flex; gap:14px; align-items:center;
  }
/* ======================= Header Logo (모바일 퍼스트) ======================= */
/* 로고 토큰 */
:root{
  --hdr-logo-size-mobile: 24px;   /* JS에서 기본 주입됨 */
  --hdr-logo-size-desktop: 28px;  /* JS에서 기본 주입됨 */
  --hdr-logo-gap: 10px;           /* JS에서 기본 주입됨 */
}

/* 중앙 컨테이너에 로고+브랜드를 한 줄 정렬 */
.nft-header .center { text-align:center; }
.nft-header .brand-wrap{
  display:inline-flex; align-items:center; justify-content:center;
  gap: var(--hdr-logo-gap-fluid);
  transition: gap .51s cubic-bezier(.22,.61,.36,1) .06s; /* ← 0.04s 지연 */
}

/* 로고 이미지 – 모바일 퍼스트 */
.nft-header .brand-logo{ display:inline-flex; }
.nft-header .brand-logo img{
  width: var(--hdr-logo-size-fluid);
  height: auto; display:block; object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  transition:
    width .48s cubic-bezier(.22,.61,.36,1) 0s, /* ← 로고가 먼저 */
    transform .30s cubic-bezier(.22,.61,.36,1),
    filter .30s;
}

/* 3-1) 로고 – 마우스 오버 시 아주 미세 리프트 & 새츄레이션 ↑ */
.nft-header .brand-wrap:hover .brand-logo img{
  transform: translateY(-0.6px) scale(1.060);
  filter: saturate(1.07) drop-shadow(0 2px 8px rgba(0,0,0,.08));
}

/* 3-2) 브랜드 텍스트 – 자간이 살짝 넓어지며(공기감) 잉크 톤 강조 */
.nft-header .brand-wrap:hover .brand{
  letter-spacing: calc(var(--brand-track-fluid) + .069em);
  color: color-mix(in oklab, var(--ink) 96%, black 4%); /* 잉크를 4% 더 진하게 */
}

/* 3-3) 브랜드 텍스트 쉬인(sheen) – 짧고 은은하게 한 번 스쳐 지나감 */
/* 브랜드 텍스트 래퍼 */
.nft-header .brand { position: relative; }
.nft-header .brand .brand-label{
  position: relative;
  display: inline-block;
  /* 성능/가독 보정 */
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0.001px);
}

/* ✨ 글자 내부에만 보이는 쉬인 레이어 */
.nft-header .brand .brand-label::after{
  /* 동일 텍스트를 겹쳐서 ‘그 텍스트’에만 그라디언트 클립 */
  content: attr(data-text);
  position:absolute; inset:0; pointer-events:none;
  font: inherit; letter-spacing: inherit;  /* 원문과 동일한 타이포 */
  /* 쉬인(하이라이트) 그라디언트 — 가운데만 밝게 */
  background:
    linear-gradient(75deg, transparent 0%,
      rgba(255,255,255,.85) 36%, transparent 66%) 0 0 / 220% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;             /* 배경을 글자 획에만 보이게 */
  opacity: 0;                     /* 호버시에만 등장 */
  mix-blend-mode: plus-lighter;   /* 흰 배경에서도 은은하게 */
  will-change: background-position, opacity;
}

/* 호버 시 한 번 스쳐 지나가는 하이라이트 */
.nft-header .brand-wrap:hover .brand .brand-label::after{
  animation: brandSheen .95s cubic-bezier(.25,.6,.36,1) forwards;
}

@keyframes brandSheen{
  0%   { background-position-x: -180%; opacity: .00; }
  35%  { opacity: .90; }
  100% { background-position-x:  180%; opacity: .00; }
}



/* 로고와 MENU 버튼의 최소 터치 영역 확보 */
.nft-header .brand-logo,
.nft-header .icon-btn{ min-width:40px; min-height:40px; }

.nft-header .brand-logo:hover img{ transform: translateY(-1px); filter: saturate(1.05); }


/* 데스크톱에서 조금 더 키움 */
@media (min-width: 768px){
  .nft-header .brand-logo img{ width: var(--hdr-logo-size-desktop); }
}

/* 매우 작은 화면에서 브랜드 글자 과밀 방지(옵션) */
@media (max-width: 360px){
  .nft-header .brand{ letter-spacing: .22em; font-size: 16px; }
}

/* 헤더 내부 링크 룩 통일 (기존 규칙과 합쳐 동작) */
.nft-header a,
.nft-header a:visited,
.nft-header a:hover,
.nft-header a:active,
.nft-header a:focus{ color: var(--ink); text-decoration: none; }

.nft-header .brand{
  font-family: var(--serif);                 /* Cinzel */
  font-weight: var(--brand-weight-latin);    /* 600 */
  font-size: var(--brand-size-fluid);        /* ← 유동 크기 */
  letter-spacing: var(--brand-track-fluid);  /* ← 유동 자간 */
  text-decoration: none; color: var(--ink);
  font-synthesis: none; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition:
    font-size .66s cubic-bezier(.22,.61,.36,1) .08s,     /* ← 0.08s 지연 */
    letter-spacing .66s cubic-bezier(.22,.61,.36,1) .08s;
}
  .nft-header .caps,
  
  /* [ADD] 헤더 안의 모든 링크는 항상 동일한 룩으로 (글로벌 a 규칙 무력화) */
.nft-header a,
.nft-header a:visited,
.nft-header a:hover,
.nft-header a:active,
.nft-header a:focus{
  color: var(--ink);
  text-decoration: none;
}

/* [ADD] 좌측 CONTACT US – 폰트/크기/자간 일치 + 밑줄 방지 */
.nft-header .left > a.contact.caps{
  color: var(--ink);
  text-decoration: none;
  font-family: var(--oc-font-latin), var(--kr-body); /* Jost */
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-synthesis: none;
}

/* [선택] 호버 시만 살짝 강조(구찌 무드) */
.nft-header .left > a.contact.caps:hover{ opacity:.6 }

/* MENU 라벨 – 페이지 전역 a/button 규칙이 덮어써도 이깁니다 */
.nft-header .icon-btn .menu-label {
    font-family: var(--oc-font-latin), var(--kr-body); /* Jost */
    font-weight: var(--hdr-menu-label-weight);
    font-variation-settings: "wght" var(--hdr-menu-label-weight); /* 가변폰트 축 직접 지정 */
    font-size: var(--hdr-menu-label-size);
    letter-spacing: var(--hdr-menu-label-tracking);
    text-transform: uppercase;
    font-synthesis: none;
    text-decoration: none;
    color: var(--ink);
  }
  
  /* 아이콘(햄버거/돋보기/장바구니 등) 선 두께도 변수로 통일 */
  .nft-header .icon-btn svg path,
  .nft-header .icon-btn svg circle {
    stroke-width: var(--hdr-icon-stroke);
  }
  
.nft-header .contact,
.icon-btn .menu-label{
    font-family: var(--oc-font-latin), var(--kr-body); /* "Jost", ... */
    font-size:12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-synthesis: none;
  }
  
.icon-btn{
  background:transparent; border:0; padding:var(--hdr-btn-pad); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; color:var(--ink);
  line-height:1;
}


/* 헤더 셰인 */
.nft-header{ overflow:hidden }
.nft-header.oc-sheen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
    rgba(255,255,255,var(--hdr-sheen-opacity)) 18%, rgba(255,255,255,0) 36%);
  transform: translateX(-120%); animation: hdr-sheen var(--hdr-sheen-dur) cubic-bezier(.22,.61,.36,1);
}
@keyframes hdr-sheen{ to{ transform: translateX(120%) } }

/* ================== 오프캔버스 ================== */
.oc-root{ position:fixed; inset:0; z-index:1000; pointer-events:none; visibility:hidden; }
.oc-root.is-active,
.oc-root.is-leaving{ pointer-events:auto; visibility:visible; }

.oc-backdrop{
  position:absolute; inset: calc(var(--hdr-h, 64px)) 0 0 0;
  background: rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.08) brightness(.98);
          backdrop-filter: blur(14px) saturate(1.08) brightness(.98);
  opacity:0; transition:opacity .46s cubic-bezier(.22,.61,.36,1);
}
.oc-root.is-active .oc-backdrop{ opacity:1; }
.oc-root:not(.is-active) .oc-backdrop{ opacity:0; }

.oc-panel{
  position:absolute; inset:0 0 0 auto; width:min(480px,86vw); height:100%;
  background:#fff; border-left:1px solid rgba(0,0,0,.06);
  box-shadow:-40px 0 90px rgba(0,0,0,.16);
  transform: translateX(100%);
  transition: transform .66s cubic-bezier(.22,.61,.36,1),
              opacity   .46s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
  display:flex; flex-direction:column;
}
.oc-root.is-active .oc-panel{ transform: translateX(0); }
.oc-root.is-leaving .oc-panel{ transform: translateX(100%); opacity:.94; }

.oc-header{ display:flex; justify-content:flex-end; padding:22px 22px 12px; }
.oc-close{
  background:transparent; border:1px solid var(--ink); width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center; color:var(--ink);
  transition: transform .25s ease, opacity .25s ease, border-color .25s ease;
}
.oc-close:hover{ transform: scale(.92) }
.oc-close:active{ transform: scale(.88) }
.oc-close:focus-visible{ outline:2px solid rgba(0,0,0,.22); outline-offset:2px; }

.oc-body{ padding:8px 28px 28px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* 상단 MENU 라벨도 Jost + 트래킹 */
.oc-title{
  margin:8px 0 18px; color:var(--sub-ink);
  font-family: var(--oc-font-latin), var(--oc-font-korean);
  font-weight: var(--oc-title-weight);
  font-size: var(--oc-title-size);
  letter-spacing: var(--oc-title-tracking);
  text-transform: uppercase;
}

/* 서브/유틸리티 링크 — Jost 기본, 크기 변수화 */
.oc-sub{ margin:14px 0 18px; display:grid; gap:10px; }
.oc-sub-link{
  text-decoration:none; color:var(--ink);
  font-family: var(--oc-font-latin), var(--oc-font-korean);
  font-weight: 500;
  font-size: clamp(13px, 1.6vw, 14px);
  line-height: 1.4; opacity:.9;
}
.oc-utility{ margin-top:22px; display:grid; gap:12px; border-top:1px solid rgba(0,0,0,.06); padding-top:18px; }
.oc-utility-link{
  text-decoration:none; color:var(--ink);
  font-family: var(--oc-font-latin), var(--oc-font-korean);
  font-weight: 500;
  font-size: clamp(13px, 1.6vw, 14px);
  line-height: 1.4;
}

/* ===================== Sub / Utility 링크: 2-패스 언더라인 ===================== */
/* 대상: 'Signature Masterpiece Services' ~ 아래 항목들 */
.oc-sub-link,
.oc-utility-link{
  position: relative;
  display: inline-block;
  padding-bottom: 4px;              /* 라인이 글자에 붙어 보이도록 여백 */
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0.001px);   /* 픽셀 스냅/경계 또렷하게 */
}

/* 메인(블랙) 라인 — 1번째 & 2번째 패스 모두 담당 */
.oc-sub-link::after,
.oc-utility-link::after{
  content:"";
  position:absolute; left:0; bottom: -2px;
  width:100%; height: var(--oc-hairline);
  background: var(--oc-uline-black);         /* 사이트 공통 토큰 재사용 */
  transform-origin: left center;
  transform: scaleX(0);
  /* 2번 스치도록 keyframes 사용 */
  animation: none; will-change: transform;
  border-radius: 999px;                       /* 끝단 pill */
}

/* 하이라이트(화이트) 라인 — 메인보다 살짝 아래 · 살짝 늦게 */
.oc-sub-link::before,
.oc-utility-link::before{
  content:"";
  position:absolute; left:0; bottom: -4px;    /* 약간 더 아래 */
  width:100%; height: var(--oc-hairline);
  background: var(--oc-uline-white);
  box-shadow: 0 0 0 var(--oc-uline-shadow-w) var(--oc-uline-white-shadow) inset;
  transform-origin: left center;
  transform: scaleX(0);
  animation: none; will-change: transform;
  border-radius: 999px;
  opacity: .96;                                /* 백그라운드에서도 보이게 */
}

/* Hover/Focus: 2-패스(두 번 지나감) 실행 */
.oc-sub-link:hover::after,
.oc-sub-link:focus-visible::after,
.oc-utility-link:hover::after,
.oc-utility-link:focus-visible::after{
  animation: uline-double-elite var(--oc-uline-dur1) var(--oc-uline-ease) forwards;
}
.oc-sub-link:hover::before,
.oc-sub-link:focus-visible::before,
.oc-utility-link:hover::before,
.oc-utility-link:focus-visible::before{
  animation: uline-double-elite var(--oc-uline-dur2) var(--oc-uline-ease)}

/* 2회 스윕(좌→우 두 번). 마지막에 유지(가시성↑) */
@keyframes uline-double-elite{
  0%   { transform: scaleX(0); }
  42%  { transform: scaleX(1); }   /* 1차 스윕 완료 */
  56%  { transform: scaleX(.10); } /* 완전 접지 않고 10% 남김 → 여운 */
  92%  { transform: scaleX(1); }   /* 2차 스윕 완료 */
  100% { transform: scaleX(1); }   /* 마지막 라인은 유지(고급감) */
}

/* 모션 최소화 환경: 즉시 표시(접근성) */
@media (prefers-reduced-motion: reduce){
  .oc-sub-link::before, .oc-sub-link::after,
  .oc-utility-link::before, .oc-utility-link::after{
    animation: none !important; transform: scaleX(1) !important;
  }
}


/* 서브/유틸리티 섹션 내부에서 그리드 늘어짐 방지 + 텍스트 너비만큼만 차지 */
.oc-sub, .oc-utility{
  /* 이 구역만 라인 모션을 ‘느리고 우아하게’로 오버라이드 */
  --oc-uline-dur1: 1.58s;  /* 1차 블랙 라인 속도(느리게) */
  --oc-uline-dur2: 1.72s;  /* 2차 화이트 라인 속도(더 느리게) */
  --oc-uline-delay2: 1.10s; 
  --oc-uline-ease: cubic-bezier(.19,.64,.21,1); /* ‘럭셔리’ 감성 이징 */
}

.oc-sub-link,
.oc-utility-link{
  position: relative;
  display: inline-block;     /* 인라인 박스 유지 */
  width: max-content;        /* ✅ 글자 너비에 딱 맞춤 */
  justify-self: start;       /* ✅ 그리드가 가로로 늘리지 않도록 */
  padding-bottom: 4px;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0.001px);
}

.oc-sub-link:hover, .oc-utility-link:hover{ color: color-mix(in oklab, var(--ink) 96%, black 4%); }

/* 메뉴 링크 (화살표는 글자 ‘바로 옆’) */
/* [REPLACE] .oc-nav .oc-link 정의 한 번만, 다음처럼 명시 */
/* 메인 메뉴 링크(2줄) – 왼쪽 텍스트 블록 + 오른쪽 화살표 */
.oc-nav{ display:grid; gap:var(--oc-gap); margin-bottom:var(--oc-section-gap); }

.oc-link{
  display:flex; align-items:flex-start; column-gap: var(--oc-arrow-gap);
  text-decoration:none; color:var(--ink);
  transition: opacity .25s ease;
  font-family: var(--oc-font-latin), var(--oc-font-korean);  /* Jost + KR */
  font-weight: var(--oc-link-weight);                        /* ← 500 */
  font-size: var(--oc-link-size);
  line-height: var(--oc-line-height);

}
.oc-link .text{ display:block; }
/* 1줄째(메인) */
.oc-link .oc-main{
  display:block;
  font-family: var(--oc-main-font);
  font-weight: var(--oc-main-weight);
  font-size: var(--oc-main-size);
  letter-spacing: var(--oc-main-tracking);
  line-height: var(--oc-main-line);
  position: relative;
  display: inline-block; /* 텍스트 너비만큼만 라인이 그어지도록 */
}

/* 2줄째(캡션) */
.oc-link .oc-caption{
  display:block; margin-top: var(--oc-caption-gap);
  font-family: var(--oc-caption-font);
  font-weight: var(--oc-caption-weight);
  font-size: var(--oc-caption-size);
  letter-spacing: var(--oc-caption-tracking);
  line-height: 1.35;
  color: var(--sub-ink); opacity: .80;
}

/* ===== 메인 라벨(첫째 줄) 언더라인: 블랙 → 화이트 순차 좌→우 ===== */
.oc-link .oc-main{
  position: relative;
  display: inline-block; /* 텍스트 너비만큼만 라인이 그어지도록 */
}

.oc-link .oc-main{
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0.001px); /* 합성층 유도 → 라인/텍스트 경계 깔끔 */
}

/* 1) 블랙 라인 */
.oc-link .oc-main::after{
  content:"";
  position:absolute;
  left:0;
  bottom: calc(-1 * var(--oc-uline-offset));
  width:100%;
  height: var(--oc-uline-h1);
  background: var(--oc-uline-black);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--oc-uline-dur1) var(--oc-uline-ease);
}

/* 2) 화이트 라인(약간 아래, 살짝 늦게) */
.oc-link .oc-main::before{
  content:"";
  position:absolute;
  left:0;
  bottom: calc(-1 * var(--oc-uline-offset) - var(--oc-uline-gap));
  width:100%;
  height: var(--oc-uline-h2);
  background: var(--oc-uline-white);
  /* 화이트 라인이 흰 배경에서도 살짝 보이도록 보조 외곽 */
  box-shadow: 0 0 0 var(--oc-uline-shadow-w) var(--oc-uline-white-shadow) inset;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--oc-uline-dur2) var(--oc-uline-ease) var(--oc-uline-delay2);
}

/* 첫째 줄 언더라인 요소에 둥근 끝(캡) 적용 가능하도록 반경 변수 연결 */
.oc-link .oc-main::after,
.oc-link .oc-main::before{
  border-radius: var(--oc-uline-radius);
}

/* 호버/포커스에서 좌→우로 동시에 그려지되, 화이트는 약간 늦게 */
.oc-link:hover .oc-main::after,
.oc-link:focus-visible .oc-main::after{ transform: scaleX(1); }

.oc-link:hover .oc-main::before,
.oc-link:focus-visible .oc-main::before{ transform: scaleX(1); }

/* ① 골드 포인트: 해당 항목의 라인 색만 골드 톤으로 */
.oc-link.u-gold .oc-main{
  /* 아래 두 줄로 블랙/화이트 라인의 '색'을 항목 범위에서만 치환 */
  --oc-uline-black: var(--oc-uline-gold1);
  --oc-uline-white: var(--oc-uline-gold2);
  --oc-uline-white-shadow: rgba(198,168,95,.25);
}

/* ===== Underline Theme Classes (항목별 linkClass로 적용) ===== */
/* 기본 원리는 해당 링크 범위에서 --oc-uline-black/white 변수를 덮어쓰기 */
.oc-link.u-theme-burgundy .oc-main{
  --oc-uline-black: var(--pal-burgundy-1);
  --oc-uline-white: var(--pal-burgundy-2);
  --oc-uline-white-shadow: color-mix(in oklab, var(--pal-burgundy-1) 30%, black 70%);
}
.oc-link.u-theme-champagne .oc-main{
  --oc-uline-black: var(--pal-champagne-1);
  --oc-uline-white: var(--pal-champagne-2);
  --oc-uline-white-shadow: rgba(198,168,95,.25);
}
.oc-link.u-theme-red .oc-main{
  --oc-uline-black: var(--pal-red-1);
  --oc-uline-white: var(--pal-red-2);
  --oc-uline-white-shadow: color-mix(in oklab, var(--pal-red-1) 30%, black 70%);
}
.oc-link.u-theme-emerald .oc-main{
  --oc-uline-black: var(--pal-emerald-1);
  --oc-uline-white: var(--pal-emerald-2);
  --oc-uline-white-shadow: color-mix(in oklab, var(--pal-emerald-1) 30%, black 70%);
}
.oc-link.u-theme-navy .oc-main{
  --oc-uline-black: var(--pal-navy-1);
  --oc-uline-white: var(--pal-navy-2);
  --oc-uline-white-shadow: color-mix(in oklab, var(--pal-navy-1) 30%, black 70%);
}
.oc-link.u-theme-graphite .oc-main{
  --oc-uline-black: var(--pal-graphite-1);
  --oc-uline-white: var(--pal-graphite-2);
  --oc-uline-white-shadow: rgba(0,0,0,.16);
}

/* (옵션) 골드 그라데이션 포인트 – 살짝 고급스러운 메탈 느낌 */
.oc-link.u-theme-champagne-grad .oc-main{
  --oc-uline-black: linear-gradient(90deg,
    #9f864b 0%, #c6a85f 45%, #efd89f 55%, #c6a85f 70%, #9f864b 100%);
  --oc-uline-white: color-mix(in oklab, #efd89f 80%, white 20%);
}
/* gradient일 때도 자연스럽게 보이도록 */
.oc-link.u-theme-champagne-grad .oc-main::after{ background: var(--oc-uline-black); }


/* ② 라운드 캡: 끝이 둥글게(필요한 항목에만) */
.oc-link.u-roundcap .oc-main{
  --oc-uline-radius: 999px;  /* 양 끝 pill 형태 */
}

/* ③(선택) 항목별 두께/간격을 가볍게 바꾸고 싶을 때 쓰는 프리셋 */
.oc-link.u-thin .oc-main{
  --oc-uline-h1: .8px;
  --oc-uline-h2: .8px;
  --oc-uline-gap: 2px;
}


/* 모션 최소화 환경에서는 전환 제거 */
@media (prefers-reduced-motion: reduce){
  .oc-link .oc-main::before,
  .oc-link .oc-main::after{
    transition: none; transform: none;
  }
}

@media (min-resolution: 2dppx){
  :root{ --oc-hairline: .5px; }     /* 레티나 2x */
}

@media (min-resolution: 3dppx){
  :root{ --oc-hairline: .3334px; }  /* 레티나 3x */
}

/* 영문 강제 Jost (개별 항목에 .en 또는 lang="en" 지정 시) */
.oc-link .oc-main.en, .oc-link .oc-caption.en,
.oc-link .oc-main[lang="en"], .oc-link .oc-caption[lang="en"]{
  font-family: var(--oc-font-latin), var(--oc-font-korean);
}

/* 화살표는 우측 끝에 고정 + 슬라이드 인터랙션 유지 */

.oc-link:hover{ opacity:.92 }
.oc-link:hover::after{ transform:none; opacity:.9 }


.oc-link:hover{ opacity:.92 }
.oc-link::after{
  content:"›"; display:inline-block; font-size:var(--oc-arrow-size); color:var(--ink);
  transform: translateX(calc(-1 * var(--oc-arrow-shift))); opacity:0; line-height:1;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s;
}
.oc-link:hover::after{ transform:none; opacity:.9 }

.oc-sub-link:hover{ opacity:1 }


/* 본문 스크롤 잠금 & 스크롤바 보정(좌우 ‘툭’ 방지) */
html.is-oc-open, body.is-oc-open{ overflow:hidden; }
html.oc-pad, body.oc-pad{ padding-right: var(--oc-sb, 0px); }
.nft-header.oc-pad{ padding-right: var(--oc-sb, 0px); }

/* === 프리클로즈 (패널 전체 왼쪽 미세 이동) === */
.oc-root.is-active .oc-panel.oc-preclose,
.oc-panel.oc-preclose{
  transform: translateX(calc(-1 * var(--oc-preclose-shift))) scale(.9985);
  transition-duration: var(--oc-preclose-dur);
  transition-timing-function: var(--oc-preclose-ease);
  box-shadow:-50px 0 120px rgba(0,0,0,.18);
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .oc-backdrop, .oc-panel{ transition:none !important }
}

/* === 메뉴 텍스트 줄바꿈 품질 개선(한글 음절 분리 금지) === */
.oc-link .text,
.oc-link .oc-main,
.oc-link .oc-caption,
.oc-sub-link,
.oc-utility-link{
  white-space: normal;       /* 기본 줄바꿈 허용 */
  word-break: keep-all;      /* ❗ 한글/영문 단어 중간 분리 금지 */
  overflow-wrap: break-word; /* 공간이 정말 부족하면 단어 경계에서 줄바꿈 */
  line-break: loose;         /* CJK 줄바꿈 완화(자연스럽게) */
  hyphens: auto;             /* 영문은 사전 기반 하이픈 허용(HTML lang 필요) */
}