/* ════════════════════════════════════════════════
   LAYERS DESIGN SYSTEM — GLOBAL
   모든 페이지에서 공통으로 사용하는 스타일.
   반드시 tokens.css 다음에 로드하세요.
   ════════════════════════════════════════════════ */

/* ── BASE RESET ─────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:var(--fs-body); overflow-x:clip; word-break:keep-all }
/* 2026-09-01: 다크 → 라이트로 통일.
   전 페이지가 '어두운 히어로 + 밝은 본문' 구조로 정리되면서 body의 --ink는 레거시가 됐고,
   섹션이 덮지 못한 틈(마진 상쇄 구간 등)마다 검은 띠로 드러나는 문제가 있었다.
   배경만 바꾸면 스타일 없는 텍스트가 안 보이므로 color도 함께 다크로 뒤집는다. */
body {
  background:var(--surface-white); color:var(--text-basic);
  font-family:var(--type-sans); font-weight:var(--fw-regular);
  line-height:1.5; overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img   { display:block; max-width:100% }
a     { color:inherit; text-decoration:none }
button { font-family:var(--type-sans); cursor:pointer }

/* ── 스크롤바 ───────────────────────────────── */
::-webkit-scrollbar       { width:2px }
::-webkit-scrollbar-track { background:var(--ink) }
::-webkit-scrollbar-thumb { background:var(--gold-dk); border-radius:1px }

/* ── 스크롤 진행 바 (#prog) ─────────────────── */
#prog {
  position:fixed; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt));
  transform:scaleX(0); transform-origin:left;
  z-index:1100; pointer-events:none;
}

/* ════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; flex-direction:column;
  transition:background .4s var(--ease-out),border-color .4s;
  border-bottom:1px solid transparent;
}
/* 스크롤 시: 불투명 화이트 + 하단 보더 없음 (border는 transparent 1px 유지 — 높이 흔들림 방지) */
.nav.pinned {
  background:var(--white-100);
}
/* pinned 상태 — 라이트 배경 전용 오버라이드 */
.nav.pinned .nav-logo svg path,
.nav.pinned .nav-logo svg polygon,
.nav.pinned .nav-logo svg rect        { fill:var(--primary-50) }
.nav.pinned .nav-logo svg             { color:var(--primary-50) }
.nav.pinned .nav-menu > li > a        { color:var(--text-basic) }
.nav.pinned .nav-menu > li > a:hover,
.nav.pinned .nav-menu > li > a.act    { color:var(--text-bolder) }
.nav.pinned .nav-burger span          { background:var(--primary-50) }
/* 스크롤(pinned) 시에도 로고·헤더 높이는 기본 상태와 동일하게 유지한다.
   (이전: 로고 24→19px 축소 → 헤더 높이 83→78px로 흔들리는 문제) */
/* ── 라이트 네비게이션 (서브페이지 전용 .nav--light) ── */
/* 서브페이지 라이트 nav: 불투명 화이트 + 하단 보더 없음 */
.nav--light {
  background:var(--white-100);
}
.nav--light .nav-logo svg path,
.nav--light .nav-logo svg polygon,
.nav--light .nav-logo svg rect        { fill:var(--text-basic) }
.nav--light .nav-logo svg             { color:var(--text-basic) }
.nav--light .nav-menu > li > a        { color:var(--text-basic) }
.nav--light .nav-menu > li > a:hover,
.nav--light .nav-menu > li > a.act    { color:var(--text-bolder) }
.nav--light .nav-burger span          { background:var(--text-basic) }
.nav-row-logo {
  display:flex; justify-content:center; align-items:center;
  padding:25px var(--px);
}
.nav-row-menu {
  position:relative;
  display:flex; justify-content:center; align-items:center;
  height:60px; padding:0 var(--px);
}
.nav-row-menu .nav-actions {
  position:absolute; right:var(--px); top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:12px;
}
/* 데스크톱: 항상 1줄 — 로고 좌측 / 메뉴+액션 우측 (양끝 정렬) */
@media (min-width:900px){
  /* ⚠️ 실제 헤더 높이(패딩+로고+보더 합)를 --nav 토큰(82px)과 일치시킨다.
     scroll-margin-top 등 여러 곳이 --nav를 기준으로 삼으므로 어긋나면 오차가 누적된다. */
  .nav{ flex-direction:row; align-items:center; min-height:var(--nav) }
  .nav-row-logo{ flex:0 0 auto; padding:29px 0 29px var(--px) }
  .nav-row-menu{
    flex:1 1 auto; height:auto; padding:0 var(--px) 0 0;
    justify-content:flex-end; align-items:center; gap:24px;
  }
  .nav-row-menu .nav-actions{ position:static; transform:none }
}

/* 로고 */
.nav-logo            { display:flex; align-items:center }
.nav-logo svg        { display:block; height:16px; width:auto; fill:var(--cream); color:var(--cream); transition:opacity .3s var(--ease) }
.nav-logo:hover svg  { opacity:.65 }

/* 1depth 메뉴 */
.nav-menu            { display:flex; gap:0; list-style:none; align-items:center }
.nav-menu > li       { position:relative }
.nav-menu > li > a {
  display:flex; align-items:center; gap:4px;
  font-size:var(--fs-body); font-weight:var(--fw-regular); color:var(--text-bolder-inverse);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  transition:color .2s; position:relative;
  padding:0 16px; padding-bottom:2px; white-space:nowrap;
}
.nav-menu > li > a::after {
  content:''; position:absolute; bottom:-2px; left:16px; right:16px; height:1px;
  background:var(--border-primary-darker); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav-menu > li > a:hover,
.nav-menu > li > a.act             { color:var(--cream) }
.nav-menu > li > a:hover::after,
.nav-menu > li > a.act::after      { transform:scaleX(1) }
/* 활성(현재 페이지) 강조 — 호버와 같은 1px 두께에 글자색으로만 진하게.
   2px 는 메뉴 글자에 비해 선이 굵어 무거웠다(2026-09-08). */
.nav-menu > li > a.act::after      { background:currentColor }

/* 액션 버튼 (우측) */
.nav-actions { display:flex; align-items:center; gap:16px }
.nav-btn {
  font-size:var(--fs-label-xs); font-weight:var(--fw-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:9px 22px; border:1px solid var(--button-secondary-border); color:var(--text-secondary); border-radius:2px;
  transition:background .22s,color .22s,transform .18s,box-shadow .22s;
}
.nav-btn:hover {
  background:var(--button-secondary-fill); color:var(--text-basic-inverse);
  transform:translateY(-1px); box-shadow:var(--shadow-1);
}

/* 햄버거 메뉴 */
.nav-burger {
  display:none; width:42px; height:42px; background:none; border:none;
  align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:6px;
}
.nav-burger span {
  display:block; width:22px; height:1px; background:var(--cream);
  transition:transform .3s var(--ease-out),opacity .2s,width .2s;
}
/* 2줄 햄버거(2026-09-04 요청). 마크업은 span 3개 그대로 두고 셋째만 숨긴다 —
   18개 HTML 의 마크업을 건드리지 않고 CSS 한 곳에서 되돌릴 수 있게. */
.nav-burger span:nth-child(3) { display:none }
/* 두 줄로 X 를 만든다. 줄 간격 5px + 두께 1px → 중심 간 거리 6px 이므로 각 3px 씩 좁힌다. */
.nav-burger.open span:nth-child(1) { transform:translateY(3px) rotate(45deg) }
.nav-burger.open span:nth-child(2) { transform:translateY(-3px) rotate(-45deg) }

/* 모바일 오버레이 */
.nav-overlay      { display:none; position:fixed; inset:var(--nav) 0 0 0; background:var(--black-50); z-index:880 }
.nav-overlay.open { display:block }

/* 모바일 드로어 */
.nav-drawer {
  position:fixed; top:var(--nav); left:0; right:0; bottom:0; width:100%;
  background:var(--white-100); backdrop-filter:blur(20px);
  transform:translateX(100%); transition:transform .36s var(--ease-out);
  z-index:890; padding:28px var(--px); display:flex; flex-direction:column; overflow-y:auto;
}
.nav-drawer.open          { transform:translateX(0) }
.nav-drawer > ul          { list-style:none; margin-bottom:28px }
.drawer-link {
  display:block; padding:15px 0;
  font-size:var(--fs-body-md); font-weight:var(--fw-medium); color:var(--text-basic); letter-spacing:var(--tracking);
  transition:color .2s,padding-left .2s; border-bottom:.5px solid var(--border-primary);
}
.drawer-link:hover { color:var(--text-bolder); padding-left:6px }
.nav-drawer .nav-btn { display:inline-block; text-align:center; padding:13px 24px; width:100%; margin-top:8px }

/* 드로어(풀스크린 메뉴) 열림 시 상단 nav 띠를 화이트 + 로고/버거를 어둡게 (.pinned 처리 미러링) */
body:has(.nav-drawer.open) .nav {
  background:var(--white-100);
}
body:has(.nav-drawer.open) .nav-logo svg path,
body:has(.nav-drawer.open) .nav-logo svg polygon,
body:has(.nav-drawer.open) .nav-logo svg rect { fill:var(--primary-50) }
body:has(.nav-drawer.open) .nav-logo svg        { color:var(--primary-50) }
body:has(.nav-drawer.open) .nav-burger span      { background:var(--primary-50) }

@media (max-width:900px) {
  .nav-menu,.nav-actions .nav-btn { display:none }
  .nav-burger { display:flex }
  /* 1행 압축: 로고행만 흐름에 남겨 nav 높이=--nav, 로고 중앙 유지.
     ⚠️ 실제 헤더 높이를 --nav와 일치시켜야 한다 — 드로어·오버레이가 top:var(--nav)로
     붙으므로 어긋나면 그 차이만큼 헤더와 드로어 사이가 비어 배경이 비친다. */
  .nav           { min-height:var(--nav) }
  .nav-row-logo  { flex:1 1 auto; padding:20px var(--px) }
  /* 메뉴행은 절대배치로 로고행 위에 겹쳐 버거만 우측에 표시 */
  .nav-row-menu  { position:absolute; top:0; left:0; right:0; height:var(--nav); padding:0 var(--px); pointer-events:none }
  /* 빈 오버레이 영역은 탭을 아래 로고로 통과시키고, 버거만 클릭 가능하게 */
  .nav-row-menu .nav-actions { pointer-events:auto }
}

/* ════════════════════════════════════════════════
   BUTTONS — 디자인 시스템 4개 카테고리
   Figma 스펙 기준 사이즈:
   - regular (기본): h=44px, px=16px, gap=12px, fs=14px
   - large:          h=64px, px=24px, gap=12px, fs=15px  → .btn-lg
   - medium:         h=56px, px=20px, gap=12px, fs=15px  → .btn-md
   - small:          h=36px, px=10px, gap=8px,  fs=14px  → .btn-sm
   ════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-12);
  min-height:44px; padding:0 var(--sp-16);
  font-family:var(--type-sans); font-size:var(--fs-label-sm); font-weight:var(--fw-regular);
  letter-spacing:var(--tracking-wide); border-radius:var(--br-sm);
  white-space:nowrap;
}
.btn:active { transform:translateY(0) scale(.98) }

/* 사이즈 수식어 */
.btn-lg { min-height:64px; padding:0 var(--sp-24); font-size:var(--fs-label) }
.btn-md { min-height:56px; padding:0 var(--sp-36); font-size:var(--fs-label) }
.btn-sm { min-height:36px; padding:0 var(--sp-10); gap:var(--sp-8) }

/* Primary — --button-primary-fill (primary-50 #3e3a39) */
.btn-primary {
  background:var(--button-primary-fill);
  color:var(--text-basic-inverse);
  border:none;
}
.btn-primary:hover {
  background:var(--button-primary-fill-hover);
  box-shadow:var(--shadow-2);
}
.btn-primary:active {
  background:var(--button-primary-fill-pressed);
  transform:translateY(0) scale(.98);
}

/* Secondary — --button-secondary-fill (secondary-50 #38543f) */
.btn-secondary {
  background:var(--button-secondary-fill);
  color:var(--text-basic-inverse);
  border:none;
}
.btn-secondary:hover {
  background:var(--button-secondary-fill-hover);
  box-shadow:var(--shadow-2);
}
.btn-secondary:active {
  background:var(--button-secondary-fill-pressed);
  transform:translateY(0) scale(.98);
}

/* Tertiary — --button-tertiary-fill (primary-5 #eeedec) + border */
.btn-tertiary {
  background:var(--button-tertiary-fill);
  color:var(--text-bolder);
  border:1px solid var(--button-tertiary-border);
}
.btn-tertiary:hover {
  background:var(--button-tertiary-fill-hover);
  box-shadow:var(--shadow-1);
}
.btn-tertiary:active {
  background:var(--button-tertiary-fill-pressed);
  transform:translateY(0) scale(.98);
}

/* Text — --button-text-fill (transparent) */
.btn-text {
  background:var(--button-text-fill);
  color:var(--text-subtle);
  padding:0; min-height:auto; border:none; gap:var(--sp-8);
}
.btn-text:hover {
  background:var(--button-text-fill-hover);
  color:var(--text-bolder);
  transform:none;
}
.btn-text:active { background:var(--button-text-fill-pressed) }
.btn-text:hover .btn-arr { width:30px }
.btn-arr {
  display:inline-block; width:22px; height:1px; background:currentColor;
  position:relative; transition:width .25s var(--ease-out); flex-shrink:0;
}
.btn-arr::after {
  content:''; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg);
}

/* ════════════════════════════════════════════════
   LAYOUT & TYPOGRAPHY
   ════════════════════════════════════════════════ */
.wrap   { max-width:var(--max); margin:0 auto }
/* 재팬디: 여백이 곧 위계. 섹션 간 숨 쉴 공간을 크게 준다.
   모바일은 아래 반응형에서 다시 좁힌다(작은 화면에서 과한 여백은 스크롤만 늘림). */
.sec    { padding:var(--sp-160) var(--px) }
.sec-sm { padding:var(--sp-96) var(--px) }
.sec-xs { padding:var(--sp-64) var(--px) }
@media (max-width:1100px){ .sec{padding:var(--sp-120) var(--px)} }
@media (max-width:900px) { .sec{padding:var(--sp-96) var(--px)}  .sec-sm{padding:var(--sp-72) var(--px)} }
@media (max-width:768px) { .sec{padding:var(--sp-80) var(--px)}  .sec-sm{padding:var(--sp-64) var(--px)} }
@media (max-width:480px) { .sec{padding:var(--sp-64) var(--px)}  .sec-sm{padding:var(--sp-48) var(--px)} }

@media (max-width:768px) {
  .sec    { padding:72px var(--px) }
  .sec-sm { padding:52px var(--px) }
  .sec-xs { padding:36px var(--px) }
}
@media (max-width:480px) {
  .sec    { padding:56px var(--px) }
  .sec-sm { padding:40px var(--px) }
  .sec-xs { padding:28px var(--px) }
}

/* 섹션 헤더 */
.sec-head        { margin-bottom:var(--sp-80) }
@media (max-width:768px){ .sec-head{ margin-bottom:var(--sp-48) } }
.sec-head.center { text-align:center }
.sec-head.center .gold-rule { margin-left:auto; margin-right:auto }

/* 타이포그래피 유틸리티 */
/* 재팬디: eyebrow는 자간을 크게 벌려 '작지만 존재감 있는' 라벨로 */
.eyebrow {
  display:inline-flex; align-items:center;
  font-size:var(--fs-label-xs); font-weight:var(--fw-regular); letter-spacing:var(--tracking-wider); text-transform:uppercase;
  color:var(--text-subtle); margin-bottom:20px;
}

/* 재팬디 핵심: 대형 제목일수록 얇게(300). 자간은 살짝 좁혀 덩어리감을 유지 */
.hdg {
  font-family:var(--type-display); font-size:var(--fs-display-lg);
  font-weight:var(--fw-light); line-height:1.35; letter-spacing:var(--tracking-tight);
  color:var(--text-bolder); margin-bottom:20px;
}

.body-text {
  font-size:clamp(13px,1.2vw,14.5px); font-weight:var(--fw-regular);
  color:var(--text-basic); line-height:1.8; max-width:480px;
}

/* 구분선 */
.gold-rule   { display:none }
.full-rule   { border:none; border-top:.5px solid var(--line) }
.sec-divider {
  width:100%; height:.5px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
}

/* ════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM  (.rv)
   IntersectionObserver가 .in 클래스를 추가합니다.
   ════════════════════════════════════════════════ */
.rv         { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease-out),transform .75s var(--ease-out) }
.rv.rv-left  { transform:translateX(-32px) }
.rv.rv-right { transform:translateX(32px) }
.rv.rv-scale { transform:scale(.94) translateY(12px) }
.rv.rv-none  { transform:none }
.rv.in       { opacity:1; transform:none }

/* 딜레이 유틸리티 */
.rv.d05 { transition-delay:.05s }
.rv.d1  { transition-delay:.1s }
.rv.d2  { transition-delay:.2s }
.rv.d3  { transition-delay:.3s }
.rv.d4  { transition-delay:.4s }

/* ════════════════════════════════════════════════
   PAGE HERO  (내부 페이지 공통 상단 영역)
   ════════════════════════════════════════════════ */
.page-hero {
  position:relative; min-height:52svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav) + 80px) var(--px) 72px;
  overflow:hidden; border-bottom:.5px solid var(--line);
}
/* 모바일: 상하 패딩·높이 축소 (긴 빈 공간 방지).
   페이지별 .page-hero{min-height:800px} 오버라이드(global보다 나중 로드)를 이기려고
   `html .page-hero`로 우선순위를 한 단계 높여 모바일 높이를 일괄 캡한다. */
@media (max-width:768px) {
  html .page-hero { min-height:56svh; padding:calc(var(--nav) + var(--sp-56)) var(--px) var(--sp-48) }
}
.ph-bg {
  position:absolute; inset:0;
  background: linear-gradient(160deg, var(--bg-primary-subtle) 0%, var(--bg-dim) 100%);
}
.ph-grid { display:none }
.ph-body { position:relative; z-index:2; max-width:860px }

/* 브레드크럼 */
.breadcrumb {
  display:flex; align-items:center; gap:10px;
  font-size:var(--fs-label-xs); font-weight:var(--fw-regular); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color: var(--text-subtle); margin-bottom:36px;
}
.breadcrumb a       { color: var(--text-subtle); transition:color .2s }
.breadcrumb a:hover { color: var(--action-secondary) }
.breadcrumb-sep     { color: var(--action-secondary); opacity:.4 }

/* 페이지 히어로 타이포 */
.ph-overline {
  display:inline-flex; align-items:center; gap:14px;
  font-size:var(--fs-label-xs); font-weight:var(--fw-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--action-secondary); margin-bottom:24px;
  opacity:0; animation:fadeUp .8s .1s var(--ease-out) forwards;
}
.ph-overline::before { content:''; width:32px; height:1px; background: var(--action-secondary) }
.ph-title {
  font-family:var(--type-display); font-size:var(--fs-display-lg);
  font-weight:var(--fw-medium); line-height:1.5; letter-spacing:var(--tracking); color:var(--text-bolder);
  margin-bottom:16px; opacity:0; animation:fadeUp .9s .3s var(--ease-out) forwards;
}
.ph-sub {
  font-size:var(--fs-body-sm); font-weight:var(--fw-regular); color: var(--text-basic);
  opacity:0; animation:fadeUp .9s .5s var(--ease-out) forwards;
}

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
footer { background:var(--bg-primary-subtle); border-top:.5px solid var(--line); padding:72px var(--px) 44px }

.ft-inner {
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:48px; padding-bottom:52px; border-bottom:.5px solid var(--line); margin-bottom:28px;
}
.ft-nav-group       { display:flex; gap:48px; flex-shrink:0 }
.ft-nav-group > div { width:120px }
.ft-brand-wrap      { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:16px }
.ft-sub             { font-size:var(--fs-body-sm); font-weight:var(--fw-regular); color:var(--text-subtle); line-height:1.5 }
.ft-col-ttl         { font-size:16px; font-weight:var(--fw-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-subtle); margin-bottom:18px }
.ft-links           { list-style:none; display:flex; flex-direction:column; gap:9px }
.ft-links a         { font-size:var(--fs-body-sm); color:var(--text-subtle); transition:color .2s,padding-left .2s; display:inline-flex; align-items:center; gap:5px }
.ft-links a:hover   { color:var(--text-basic); padding-left:4px }

.ft-bottom { max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px }
.ft-copy   { font-size:var(--fs-label-xs); color:var(--text-subtle) }
.ft-legal  { display:flex; gap:20px; flex-wrap:wrap }
.ft-legal a       { font-size:var(--fs-label-xs); color:var(--text-subtle); transition:color .2s }
.ft-legal a:hover { color:var(--text-basic) }

@media (max-width:900px) { .ft-inner { flex-wrap:wrap } }
@media (max-width:600px) {
  .ft-inner { flex-direction:column }
  .ft-inner > div     { max-width:100% }            /* 브랜드 블록 인라인 width:340px 오버플로 방지 (max-width로 캡) */
  .ft-nav-group       { width:100%; gap:var(--sp-24) } /* 풀폭 + 간격 축소 */
  .ft-nav-group > div { width:auto; flex:1 }          /* 3개 링크열 균등 분배 */
}

/* ════════════════════════════════════════════════
   ANIMATIONS (공통 @keyframes)
   ════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════
   CERT BANNER (공유 인증 카드 컴포넌트)
   ════════════════════════════════════════════════ */
.cert-banner{background:var(--bg-primary-subtle);border-top:.5px solid var(--border-primary);padding:72px var(--px)}
/* auto-fit: 인증 뱃지 최소 150px 유지하며 폭 따라 6→…→2→1 자동 (미디어쿼리 불필요) */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin-top:48px}
.cert-card{background:var(--bg-primary-subtle);border:1px solid var(--border-primary);border-radius:2px;padding:28px 20px;text-align:center;transition:border-color .3s,background .3s}
.cert-card:hover{border-color:var(--gold-dk);background:var(--action-primary-hover)}
.cert-icon{display:flex;justify-content:center;color:var(--icon-primary);margin-bottom:12px}
.cert-icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cert-name{font-size:var(--fs-label-xs);font-weight:var(--fw-medium);color:var(--text-bolder);margin-bottom:4px}
.cert-desc{font-size:var(--fs-label-xs);font-weight:var(--fw-regular);color:var(--text-subtle);line-height:1.5}

@keyframes fadeUp  { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes pulse   { 0%,100% { opacity:.4; transform:scaleY(1) } 50% { opacity:1; transform:scaleY(1.15) } }

/* ════════════════════════════════════════════════
   DATA TABLE (공유 테이블 컴포넌트 — 면/서피스 기반)
   라인 구분선이 아닌 헤더 면 + 행 교차(zebra) 면으로 구성.
   사용:  <table class="data-table"> … </table>
   클릭형 행은 <tr> 에 .is-clickable 추가.
   ════════════════════════════════════════════════ */
.data-table {
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--bg-primary);
  border-radius:var(--br-lg); overflow:hidden;
}
.data-table thead th {
  padding:var(--sp-16);
  background:var(--bg-dim);                       /* 헤더 = 채워진 면 */
  font-size:var(--fs-label-xs); font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--text-basic); text-align:left; white-space:nowrap;
}
.data-table tbody td {
  padding:var(--sp-16);
  font-size:var(--fs-body-xs); color:var(--text-basic);
  vertical-align:middle;
}
.data-table tbody tr {
  background:var(--bg-primary);                   /* 기본 행 면 */
  transition:background .18s;
}
.data-table tbody tr:nth-child(even) {
  background:var(--bg-primary-subtle);            /* 교차 행 면 (zebra) */
}
.data-table tbody tr.is-clickable { cursor:pointer }
.data-table tbody tr:hover {
  background:var(--bg-dim);                        /* 호버 = 면 강조 */
}

/* ════════════════════════════════════════════════
   BADGE (공유 라벨 배지 — 시맨틱 톤 시스템)
   일관 공식: tint 면 -0 배경 + 텍스트 -60 + 테두리 -20
   사용:  <span class="badge badge--success">이벤트</span>
   변형:  --brand(골드) / --success(녹) / --info(청) / --warning(주) / --danger(적) / --neutral(회)
   ════════════════════════════════════════════════ */
.badge {
  display:inline-block;
  padding:var(--sp-4) var(--sp-10);
  font-size:var(--fs-label-xs); font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  border-radius:var(--br-sm);
  border:1px solid transparent; white-space:nowrap;
}
.badge--brand   { background:var(--gold-a15);   color:var(--gold);       border-color:var(--gold-a30) }
.badge--success { background:var(--success-0);  color:var(--success-60); border-color:var(--success-20) }
.badge--info    { background:var(--info-0);     color:var(--info-60);    border-color:var(--info-20) }
.badge--warning { background:var(--warning-0);  color:var(--warning-60); border-color:var(--warning-20) }
.badge--danger  { background:var(--danger-0);   color:var(--danger-60);  border-color:var(--danger-20) }
.badge--neutral { background:var(--gray-0);     color:var(--gray-60);    border-color:var(--gray-20) }

/* ════════════════════════════════════════════════
   PAGINATION (공유 페이지네이션 — 게시판형)
   사용: <div class="pagination"><button class="pg-btn">‹</button>…
         <span class="pg-ellipsis">…</span></div>
   현재 페이지 버튼에 .on 부여 (골드 채움)
   ════════════════════════════════════════════════ */
.pagination { display:flex; justify-content:center; align-items:center; gap:var(--sp-8); margin-top:var(--sp-48) }
.pg-btn {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-primary); border-radius:var(--br-sm);
  font-size:var(--fs-label-xs); font-weight:var(--fw-regular);
  color:var(--text-subtle); background:none; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.pg-btn:hover { color:var(--text-basic); border-color:var(--line-warm) }
.pg-btn.on   { background:var(--action-primary); color:var(--text-bolder); border-color:var(--action-primary) }
.pg-ellipsis { font-size:var(--fs-label-xs); color:var(--text-subtle); padding:0 var(--sp-4) }

/* ════════════════════════════════════════════════
   FORM FIELD (공유 폼 입력 — label + input/select/textarea)
   인풋 색은 --input-* 토큰 사용.
   사용:  <label class="field-label">…</label>
          <input class="field-input"> / <select class="field-input"> / <textarea class="field-input">
   ════════════════════════════════════════════════ */
.field-label {
  display:block;
  font-size:var(--fs-label-xs); font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--text-basic); margin-bottom:var(--sp-8);
}
.field-input {
  width:100%;
  background:var(--input-surface); border:1px solid var(--input-border);
  color:var(--text-bolder);
  font-family:var(--type-sans); font-size:var(--fs-body-sm); font-weight:var(--fw-regular);
  padding:var(--sp-14) var(--sp-16); border-radius:var(--br-md);
  outline:none; transition:border-color .2s; -webkit-appearance:none;
}
.field-input:focus            { border-color:var(--input-border-active) }
.field-input::placeholder     { color:var(--text-subtle); font-weight:var(--fw-regular) }
.field-input:disabled         { background:var(--input-surface-disabled); border-color:var(--input-border-disabled); cursor:not-allowed }
select.field-input            { cursor:pointer; color:var(--text-basic) }
select.field-input option     { background:var(--input-surface); color:var(--text-bolder) }
textarea.field-input          { min-height:140px; resize:vertical; line-height:1.5 }

/* ════════════════════════════════════════════════
   ACCORDION  (접이식 Q&A · FAQ 등에서 재사용)
   구조: .accordion-item > .accordion-btn(button) + .accordion-body > .accordion-body-inner
   열림 상태: .accordion-item.open  (JS로 토글)
   ════════════════════════════════════════════════ */
.accordion-item  { border-bottom:.5px solid var(--border-primary); overflow:hidden }
.accordion-btn {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  width:100%; padding:40px 0; background:none; border:none; text-align:left;
  cursor:pointer; transition:color .2s;
}
.accordion-btn:hover .accordion-title { color:var(--text-bolder) }
.accordion-title {
  font-size:var(--fs-body-lg); font-weight:var(--fw-medium); color:var(--text-basic);
  line-height:1.5; flex:1; transition:color .2s;
}
/* 우측 아이콘 — 원형 없이 깔끔한 V(셰브론). 열림 시 180° 회전(∨→∧) + 골드 */
.accordion-icon {
  flex-shrink:0; margin-top:4px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-subtle);
  transition:transform .3s,color .2s;
}
.accordion-icon svg { width:24px; height:24px }
.accordion-btn:hover .accordion-icon  { color:var(--gold) }
.accordion-item.open .accordion-icon  { transform:rotate(180deg); color:var(--gold) }
.accordion-item.open .accordion-title { color:var(--text-bolder) }
.accordion-body       { max-height:0; overflow:hidden; transition:max-height .35s ease }
.accordion-item.open .accordion-body { max-height:500px }
.accordion-body-inner {
  padding:0 0 24px;
  font-size:var(--fs-body); font-weight:var(--fw-regular); color:var(--text-subtle); line-height:1.5;
}

/* ─── FOOTER (레이어스 전용) ────────────────────────────────────
   기본 footer{}(밝은 판) 대신 검은 판. 요소 선택자를 클래스로 덮는다.
   2026-09-02: --bg-inverse(#3e3a39) → --black-100 — 2번 섹션과 같은 검정으로 맞췄다.
   구성: [큰 워드마크 | 사이트맵] → 소셜 아이콘 줄 → 저작권 줄. */
/* 좌우 여백은 --px(20px)가 아니라 80px — 페이지 본문은 화면 끝까지 쓰지만
   푸터는 정보가 양 끝으로 갈라지는 구조라 20px이면 글자가 화면에 붙는다.
   히어로 하단 줄(.hero-rows)과 같은 값이라 두 끝단의 여백이 맞는다. */
.ftl{background:var(--black-100);color:var(--text-bolder-inverse);
  border-top:none;padding:var(--sp-96) var(--sp-80) var(--sp-32)}
.ftl__top{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:var(--sp-40)}
/* 워드마크가 푸터의 주인공 — 화면 폭을 따라 커지되 상한을 둔다 */
.ftl__mark{max-width:min(240px,100%)}
.ftl__mark svg{display:block;width:min(240px,100%);height:auto;color:var(--text-bolder-inverse)}
.ftl__ttl{font-size:var(--fs-label-2xs);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--text-subtle-inverse);margin-bottom:var(--sp-20)}
.ftl__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-24)}
.ftl__links a{font-size:var(--fs-body-sm);color:var(--text-bolder-inverse);transition:opacity .2s}
.ftl__links a:hover{opacity:.6}
/* 소셜 줄 — 아이콘만 두면 무엇인지 알기 어려워 이름을 같이 둔다 */
.ftl__social{max-width:var(--max);margin:var(--sp-32) auto 0;
  display:flex;flex-wrap:wrap;gap:var(--sp-32);justify-content:center}
.ftl__ico{display:inline-flex;align-items:center;gap:var(--sp-8);
  font-size:var(--fs-label-xs);letter-spacing:var(--tracking);
  color:var(--text-subtle-inverse);transition:color .2s}
.ftl__ico:hover{color:var(--text-bolder-inverse)}
.ftl__ico svg{width:18px;height:18px;display:block}
.ftl__bottom{max-width:var(--max);margin:var(--sp-40) auto 0;
  display:flex;justify-content:center;text-align:center;gap:var(--sp-20);flex-wrap:wrap;
  font-size:var(--fs-label-2xs);letter-spacing:var(--tracking);color:var(--text-subtle-inverse)}
.ftl__bottom a{color:inherit;text-decoration:underline;text-underline-offset:.25em;transition:opacity .2s}
.ftl__bottom a:hover{opacity:.6}
@media(max-width:1100px){.ftl{padding:var(--sp-80) var(--sp-48) var(--sp-32)}}
@media(max-width:768px){
  .ftl{padding:var(--sp-64) var(--sp-32) var(--sp-32)}
  .ftl__top{gap:var(--sp-32)}
  /* 워드마크가 화면 폭까지 꽉 차지 않게 상한을 낮춘다 */
  .ftl__mark svg{width:min(140px,40vw)}
  /* 사이트맵은 모바일에서도 가로 1행(2026-09-04 요청) — 항목이 둘뿐이라 세로로 쌓으면
     푸터가 불필요하게 길어진다. 늘어나면 flex-wrap 이 알아서 접는다. */
  .ftl__links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--sp-24)}
  .ftl__social{flex-direction:column;align-items:center;gap:var(--sp-16);margin-top:var(--sp-24)}
}
@media(max-width:600px){.ftl{padding:var(--sp-56) var(--px) var(--sp-32)}}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL FX — 부드러운 스크롤 · 패럴랙스 · 이미지 등장
   film.html(메인)의 연출을 다른 페이지에서도 쓰려고 공용으로 뺀 층이다.
   (2026-09-02, 브랜드·컬렉션 페이지 요청)
   ⚠️ film.html은 자체 <style>·<script>에 같은 로직을 이미 갖고 있어 건드리지 않았다.
      나중에 정리한다면 film 쪽을 이 클래스로 옮기는 방향이 맞다.
   함께 쓰는 파일: static/js/scroll-fx.js
   ═══════════════════════════════════════════════════════════════════ */

/* Lenis(부드러운 스크롤) 필수 스타일 — 없으면 스크롤이 두 번 튄다.
   위쪽 html{scroll-behavior:smooth}를 반드시 auto로 눌러야 한다. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* 패럴랙스 층 — 부모에 position:relative + overflow:hidden 이 있어야 한다.
   위아래로 10%씩 넘치게 잡아 두어야 흘러도 빈 곳이 생기지 않는다.
   이동은 이 층이, 등장 확대는 안쪽 .mrv 가 맡는다 — 한 요소에 둘 다 걸면
   transform 이 서로를 덮어쓴다. */
.pan{position:absolute;inset:-10% 0;will-change:transform;transform:translateY(var(--py,0))}

/* 이미지 등장 — 살짝 확대된 채 기다리다 제 크기로 수렴한다(메인 갤러리와 동일 값) */
.mrv{transform:scale(1.14);transition:transform 1.6s var(--ease-out)}
.mrv.in{transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  .pan{transform:none}
  .mrv,.mrv.in{transform:none;transition:none}
}

/* ── 콘텐츠 보호 — 우클릭·드래그는 static/js/protect.js.
   ⛔ .is-selectable(대리점 연락처)은 복사되게 남겨 둔다. */
body{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.is-selectable,.is-selectable *,input,textarea,[contenteditable]{
  -webkit-user-select:text;-moz-user-select:text;user-select:text}
/* 이미지·영상을 바탕화면으로 끌어다 놓는 것 차단 */
img,video{-webkit-user-drag:none;user-drag:none}

/* ═══════════════════════════════════════════════════════════════════
   TOAST — 짧은 결과 알림 (복사 완료 등)
   마크업을 손으로 쓰지 않는다. static/js/toast.js 의 showToast('문구') 로만 띄운다.

   ⚠️ 배경은 브랜드 블랙(--bg-inverse = #3e3a39)이다. 순검정(--primary-100)이 아니다.
      사이트 어디에도 순검정 면이 없어서 토스트만 다른 검정을 쓰면 그 하나가 튄다.
   글자 크기는 --fs-body 하나면 된다 — 웹 16px, 768px 이하에서 14px 로 토큰이 알아서 갈린다.
   ═══════════════════════════════════════════════════════════════════ */
.toast-host{
  position:fixed;left:50%;bottom:var(--sp-32);transform:translateX(-50%);
  z-index:1200;                       /* 내비(1100)보다 위 */
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);
  width:max-content;max-width:calc(100vw - var(--sp-32) * 2);
  pointer-events:none;                /* 토스트가 화면을 막지 않는다 */
}
.toast{
  background:var(--bg-inverse);color:var(--text-inverse-static);
  font-family:var(--type-sans);font-size:var(--fs-body);line-height:1.45;
  padding:var(--sp-12) var(--sp-20);
  border-radius:var(--br-lg);box-shadow:var(--shadow-3);
  max-width:100%;text-align:center;
  opacity:0;transform:translateY(var(--sp-8));
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);
}
.toast.is-in{opacity:1;transform:none}

@media(max-width:768px){
  /* 하단 제스처 바를 피한다 */
  .toast-host{bottom:calc(var(--sp-20) + env(safe-area-inset-bottom,0px));
    max-width:calc(100vw - var(--sp-20) * 2)}
  .toast{padding:var(--sp-10) var(--sp-16)}
}
@media(prefers-reduced-motion:reduce){
  .toast{transition:opacity .01s;transform:none}
}