/* ============================================================
   REVERN — Design System
   브랜드 컬러 3색: Gold #CD963B · Deep Green #292A1C · White #FFFFFF
   서체 2종: Cormorant Garamond(영문) · Noto Sans KR(국문 고딕)
   기울임(italic) 미사용. 빌드 도구 없음.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--gold); color: #fff; }

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* 브랜드 3색 */
  --gold:        #cd963b;   /* R205 G150 B59 */
  --green:       #292a1c;   /* R41 G42 B28 */
  --white:       #ffffff;

  /* 골드 파생 — 밝은 배경에서 본문 대비 확보용 */
  --gold-deep:   #8a5f1e;
  --gold-soft:   #e2bd80;
  --green-soft:  #3c3f2b;
  /* STORY 페이지 액센트 — 브랜드 골드 R205 G150 B59 계열.
     밝은 배경(#faf9f5)에서 #cd963b 원색은 대비 2.49:1 로 WCAG AA(4.5:1)에
     못 미쳐, 같은 색상환의 gold-deep 을 쓴다. 다른 페이지도 동일한 규칙이다. */
  --accent: var(--gold-deep);

  /* 서피스 */
  --paper:       var(--white);
  --bg:          #faf9f5;
  --bg-deep:     #f3f1ea;

  /* 텍스트 */
  --ink:         var(--green);
  --ink-soft:    rgba(41, 42, 28, 0.70);
  /* 0.46 은 밝은 배경에서 대비 2.70:1 로 AA 미달이었다. 0.66 = 4.73:1 */
  --ink-faint:   rgba(41, 42, 28, 0.66);

  /* 선 */
  --line:        rgba(41, 42, 28, 0.12);
  --line-soft:   rgba(41, 42, 28, 0.06);
  --line-gold:   rgba(205, 150, 59, 0.42);

  /* 서체 — 영문은 Cormorant, 한글은 자동으로 Noto Sans KR 로 폴백된다 */
  --font:   'Cormorant Garamond', 'Noto Sans KR', system-ui, sans-serif;
  --ko:     'Noto Sans KR', system-ui, sans-serif;

  /* 모션 */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 레이아웃 */
  --gutter:   clamp(20px, 5vw, 88px);
  --maxw:     1320px;
  --nav-h:    clamp(64px, 8vw, 88px);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ============================================================
   Base
   ============================================================ */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ko);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  position: relative;
  /* Cormorant 는 기본이 올드스타일 숫자라 2026 이 "2o26" 처럼 보인다 — 전역으로 라이닝 고정 */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  opacity: 0.022;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9999;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* 한글은 어절 단위로만 끊는다 */
h1, h2, h3, h4, p, li, dd, th, td, caption, .lede,
.product-card__name, .manifesto__lead, .etym__gloss { word-break: keep-all; overflow-wrap: break-word; }
/* 제목 마지막 줄에 한 어절만 남지 않게("고유한 / 특성", "여섯 / 가지"). pretty 는 Chrome 에서
   이 경우를 못 잡아 balance 를 쓴다. 히어로 h1 은 어절마다 마스크 리빌 span 으로 줄을 직접
   짜므로 대상에서 뺀다. 띠 배너 제목은 강조 구(.em) 앞에서 끊기는 게 자연스러운데 balance 가
   "더 궁금한 / 점이 있으신가요" 처럼 구를 갈라서 기본 줄바꿈으로 둔다. */
h2, h3 { text-wrap: balance; }
.band h2 { text-wrap: wrap; }

/* ---- 타입 프리미티브 ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(0.66rem, 0.9vw, 0.78rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  line-height: 1.6;
}
/* 한글 라벨용 — 0.32em 자간은 한글에서 낱자가 흩어져 보인다 */
.eyebrow--lg { font-size: calc(clamp(0.66rem, 0.9vw, 0.78rem) + 2px); }
.eyebrow--ko {
  font-family: var(--ko);
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: none;
}
.lede {
  font-family: var(--ko);
  font-weight: 300;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.85;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}
.body-text { color: var(--ink-soft); font-size: clamp(0.95rem, 1.1vw, 1.02rem); line-height: 1.85; }

/* 영문 디스플레이 — Cormorant */
h1, h2, h3, .display { font-family: var(--font); font-weight: 400; letter-spacing: 0.005em; }

/* 강조 — 기울임 대신 색으로만 구분 */
.em { color: var(--gold-deep); }

.rule-h { width: clamp(36px, 5vw, 60px); height: 1px; background: var(--gold); opacity: 0.6; }

/* ---- 링크 ---- */
/* 본문 인라인 링크·버튼 문구는 대부분 한글이라 넓은 자간과 uppercase 를 쓰지 않는다 */
.link {
  position: relative;
  display: inline-block;
  font-family: var(--ko);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding-bottom: 5px;
  color: var(--ink);
}
.link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.link:hover::after { transform: scaleX(0); transform-origin: right; }
.link--ghost::after { transform: scaleX(0); transform-origin: left; }
.link--ghost:hover::after { transform: scaleX(1); }
/* 밑줄은 bottom:0 기준이라 위쪽 여백을 줘도 자리가 그대로다 — 탭 영역만 44px 로 키운다 */
@media (max-width: 700px) { .link { padding-top: 14px; } }

/* ---- 버튼 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--ko);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--white);
  background: var(--green);
  padding: 1.05em 2.1em;
  border-radius: 2px;
  transition: background 0.5s var(--ease), transform 0.5s var(--ease);
}
.btn:hover { background: var(--gold-deep); transform: translateY(-2px); }
.btn .arrow { transition: transform 0.5s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn--gold { background: var(--gold); color: var(--green); }
.btn--gold:hover { background: var(--gold-deep); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { background: transparent; color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background 0.5s var(--ease);
}
.nav__inner {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav.is-solid {
  background: rgba(250, 249, 245, 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid var(--line-soft);
}
.nav__menu { display: flex; gap: clamp(18px, 2.4vw, 40px); }
.nav__menu a {
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav__menu a:hover { color: var(--gold-deep); }
.nav__menu a:hover::after,
.nav__menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__menu--right { justify-content: flex-end; }

.nav__logo { display: block; text-align: center; text-decoration: none; line-height: 0; }
.nav__logo img { width: clamp(92px, 9vw, 138px); height: auto; display: inline-block; }

.nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding-inline: 8px; margin-right: -8px; justify-self: end; }
.nav__toggle span { display: block; height: 1px; background: var(--ink); transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); }

@media (max-width: 900px) {
  .nav__menu { display: none; }
  .nav__toggle { display: flex; }
  .nav__inner { display: flex; justify-content: space-between; align-items: center; }
  /* 로고는 홈 링크다 — 워드마크 높이(29px)가 곧 탭 영역이라 44px 로 맞춘다 */
  .nav__logo { text-align: left; display: inline-flex; align-items: center; min-height: 44px; }
}

/* 모바일 드로어 */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(20px, 5vw, 34px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(1.7rem, 7vw, 2.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.4s var(--ease);
}
.drawer.is-open a { opacity: 1; transform: translateY(0); }
.drawer.is-open a:nth-child(1) { transition-delay: 0.10s; }
.drawer.is-open a:nth-child(2) { transition-delay: 0.16s; }
.drawer.is-open a:nth-child(3) { transition-delay: 0.22s; }
.drawer.is-open a:nth-child(4) { transition-delay: 0.28s; }
.drawer a:hover, .drawer a[aria-current="page"] { color: var(--gold-deep); }

body.nav-open { overflow: hidden; }
body.nav-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Symbol
   ============================================================ */
.symbol { display: block; pointer-events: none; }
/* 시계 안에 놓여 바늘 축 정가운데에 온다. 지름 대비 77% — 종전 크기와 같다.
   부모(.hero__time)의 opacity 0.5 가 곱해져 실효 0.10 이 된다. */
.symbol--hero {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: auto;
  opacity: 0.2;
  z-index: 1;
}
.symbol--divider {
  display: block; margin-inline: auto;
  width: clamp(48px, 8vw, 80px); height: auto; opacity: 0.22;
}

/* ============================================================
   Reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.10s; }
.reveal[data-d="2"] { transition-delay: 0.20s; }
.reveal[data-d="3"] { transition-delay: 0.30s; }
.reveal[data-d="4"] { transition-delay: 0.40s; }
.reveal[data-d="5"] { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .marquee__track, .hero__hand, .hero__wave, .hero__scroll i { animation: none !important; }
  /* 애니메이션을 끄면 세 바늘이 12시에 겹친다 — 멈춘 시계처럼 보이도록 각도를 준다 */
  .hero__hand--hour { transform: rotate(38deg); }
  .hero__hand--min  { transform: rotate(196deg); }
  .hero__hand--sec  { transform: rotate(302deg); }
  .hero__wave { opacity: 0.18; transform: scale(0.62); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  position: relative; overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 72% 22%, rgba(205, 150, 59, 0.10), transparent 58%),
    radial-gradient(100% 80% at 10% 88%, rgba(41, 42, 28, 0.06), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--bg) 52%, var(--bg-deep));
}

/* ---- 시간의 상징: 시계 ----
   눈금은 두지 않는다. 대신 초침이 한 칸 움직일 때마다 원이 하나씩,
   물의 파장처럼 퍼져 나간다. 로고는 바늘 축 정가운데에 놓는다.
   치수는 전부 --clock 기준이라 지름이 변해도 비례가 유지된다. */
.hero__time {
  --clock: clamp(460px, 62vw, 940px);
  position: absolute;
  right: -4%; top: 50%;
  transform: translateY(-50%);
  width: var(--clock);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}
.hero__time-ring { position: absolute; inset: 0; border: 1px solid var(--line-gold); border-radius: 50%; }
/* 파장 — 수면에 돌을 던진 것처럼 시계 바깥으로 서서히 번진다.
   3장이 3초 간격으로 겹치고, 퍼질수록 느려지도록 감속 곡선을 쓴다. */
.hero__wave {
  position: absolute; inset: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 9s linear infinite;
}
.hero__wave--b { animation-delay: -3s; }
.hero__wave--c { animation-delay: -6s; }
@keyframes ripple {
  0%   { transform: scale(0.34); opacity: 0; }
  14%  { opacity: 0.44; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* 유럽 탑시계의 숫자 링 — 촘촘한 눈금 대신 로마숫자 12개 */
.hero__num {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: rotate(calc(var(--i) * 30deg)) translateY(calc(var(--clock) * -0.38));
}
.hero__num > span {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * -30deg));
  font-family: var(--font); font-weight: 500;
  font-size: calc(var(--clock) * 0.033);
  line-height: 1; white-space: nowrap;
  color: var(--gold); opacity: 0.35;
}
/* 바늘 축 */
.hero__time::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--clock) * 0.018); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--gold); opacity: 0.8;
  z-index: 2;
}
/* 클래식 바늘 — 끝의 빈 원(브레게)과 축 아래 짧은 꼬리 */
.hero__hand {
  position: absolute; left: 50%; bottom: 50%;
  transform-origin: 50% 100%;
  background: var(--gold);
  border-radius: 999px;
  z-index: 2;
}
.hero__hand::before {
  content: ""; position: absolute; left: 50%; top: 11%;
  width: 300%; aspect-ratio: 1;
  transform: translateX(-50%);
  border: calc(var(--clock) * 0.0024) solid var(--gold);
  border-radius: 50%;
}
.hero__hand::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 130%; height: calc(var(--clock) * 0.018);
  transform: translateX(-50%);
  background: var(--gold);
  border-radius: 999px;
}
/* 음수 delay 로 시작 각도를 벌려, 로드 직후에도 바늘이 겹쳐 보이지 않게 한다 */
.hero__hand--hour { width: calc(var(--clock) * 0.015); margin-left: calc(var(--clock) * -0.0075); height: 26%; opacity: 0.62; animation: sweep 720s linear infinite; animation-delay: -210s; }
.hero__hand--min  { width: calc(var(--clock) * 0.0105); margin-left: calc(var(--clock) * -0.00525); height: 36%; opacity: 0.65; animation: sweep 60s linear infinite; animation-delay: -8s; }
/* 초침만 1초에 한 칸씩 — 파장과 박자를 맞춘다. 얇으므로 브레게 원은 빼고 꼬리만 남긴다 */
.hero__hand--sec { width: calc(var(--clock) * 0.004); margin-left: calc(var(--clock) * -0.002); height: 41%; opacity: 0.35; animation: sweep 60s steps(60) infinite; }
.hero__hand--sec::before, .hero__hand--sec::after { display: none; }
@keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* 좁은 화면에서는 시계가 화면 폭보다 커서 축이 본문 위로 올라온다.
   굵어진 바늘이 헤드라인을 가로지르지 않도록 축을 오른쪽으로 밀고 농도를 낮춘다. */
@media (max-width: 700px) {
  .hero__time { right: -26%; opacity: 0.2; }
  .hero__hand--hour { width: calc(var(--clock) * 0.0095); margin-left: calc(var(--clock) * -0.00475); }
  .hero__hand--min  { width: calc(var(--clock) * 0.007);  margin-left: calc(var(--clock) * -0.0035); }
}

.hero__inner {
  align-self: center;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--nav-h) var(--gutter) 0;
  position: relative; z-index: 3;
}
.hero__eyebrow { display: inline-flex; align-items: center; gap: 1em; margin-bottom: clamp(20px, 3vw, 32px); }
.hero__eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }

.hero h1 {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(2.4rem, 7.6vw, 6rem);
  line-height: 1.1;
  letter-spacing: 0.008em;
}
.hero h1 .em { color: var(--gold-deep); }
.hero h1 .word {
  display: inline-block; overflow: hidden; vertical-align: top;
  /* 마스크 리빌이 디센더를 자르지 않도록 여유를 주고 레이아웃은 되돌린다 */
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
.hero h1 .word > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s var(--ease-out) forwards; }
.hero h1 .word:nth-child(1) > span { animation-delay: 0.15s; }
.hero h1 .word:nth-child(2) > span { animation-delay: 0.28s; }
.hero h1 .word:nth-child(3) > span { animation-delay: 0.41s; }
@keyframes rise { to { transform: translateY(0); } }

.hero__sub { margin-top: clamp(24px, 3.4vw, 40px); max-width: 40ch; opacity: 0; animation: fade 1.1s var(--ease) 0.7s forwards; }
.hero__cta { margin-top: clamp(26px, 3.6vw, 40px); display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; animation: fade 1.1s var(--ease) 0.9s forwards; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero__foot {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter) clamp(24px, 4vw, 44px);
  opacity: 0; animation: fade 1.1s var(--ease) 1.1s forwards;
}
.hero__meta { font-family: var(--font); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 0.9em; font-family: var(--font); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.hero__scroll i { display: block; width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: scrolldot 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes scrolldot { 0% { transform: scaleY(0); } 40% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: clamp(72px, 11vw, 160px); }
.section--tight { padding-block: clamp(56px, 8vw, 108px); }
.section-head { display: flex; align-items: baseline; gap: 0.9em 1.2em; margin-bottom: clamp(34px, 5vw, 64px); flex-wrap: wrap; }
/* 아이브로가 직계 자식이면 flex 가 제목 옆에 붙여 버린다 — 항상 제목 위 한 줄을 차지하게 */
.section-head > .eyebrow { flex: 0 0 100%; }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.18; }
.section-head--between { justify-content: space-between; align-items: flex-end; }
.section-head > div { min-width: 0; }

/* 매니페스토 */
.manifesto { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .manifesto { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.manifesto__lead { font-family: var(--font); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.42; color: var(--ink); min-width: 0; }
.manifesto__lead .em { color: var(--gold-deep); }
.manifesto__body p { margin-bottom: 1.5em; max-width: 50ch; }
.manifesto__body p:last-of-type { margin-bottom: 0; }
.manifesto__list { list-style: none; margin: 1.8em 0 0; padding: 0; max-width: 50ch; }
.manifesto__list li { padding-block: 1.05em; font-size: clamp(0.92rem, 1.05vw, 0.98rem); border-top: 1px solid var(--line); color: var(--ink-soft); line-height: 1.8; }
.manifesto__term { display: block; margin-bottom: 0.35em; font-family: var(--font); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.14em; color: var(--gold-deep); }
.manifesto__term span { font-family: var(--ko); letter-spacing: 0.02em; color: var(--ink-faint); }
.manifesto__sign { margin-top: 2.2em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.9em 1.2em; }
.manifesto__sign .who { font-family: var(--font); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }

.symbol-row { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); padding-block: clamp(32px, 5vw, 56px); }
.symbol-row::before, .symbol-row::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============================================================
   제품 사진
   ============================================================ */
.shot {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: 2px; overflow: hidden;
  background: var(--bg-deep);
  transition: transform 0.7s var(--ease);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--pano { aspect-ratio: 16 / 11; }
.shot--pano img { object-position: center 46%; }

/* ============================================================
   컬렉션 그리드
   ============================================================ */
.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 3vw, 40px); }
@media (min-width: 760px) { .collection-grid { grid-template-columns: repeat(3, 1fr); } }
/* 4개 구성 — 좁은 화면 2열, 넓은 화면 한 줄 4열 */
.collection-grid--quad { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) { .collection-grid--quad { grid-template-columns: repeat(4, 1fr); } }
/* 열이 좁아 이름과 가격을 나란히 두면 서로 밀린다 — 세로로 쌓는다 */
.collection-grid--quad .product-card__meta { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.collection-grid--quad .product-card__price { display: block; margin-top: auto; padding-top: 0.6em; }
/* 2개 구성 */
.collection-grid--duo { grid-template-columns: repeat(2, 1fr); }

/* 카드는 세로 플렉스다. 그리드 행 높이만큼 늘어나고, 가격을 바닥에 붙여 같은 줄
   카드끼리 가격선이 맞는다. 이름·영문명이 한쪽만 두 줄로 넘어가면 가격이 들쭉날쭉했다
   (2026-10-03 360px 검수). */
.product-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.product-card:hover .shot { transform: scale(1.03); }
.product-card__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.1em; gap: 12px; flex: 1; }
.product-card__meta > div { min-width: 0; }
.product-card__name { font-family: var(--ko); font-weight: 400; font-size: clamp(0.98rem, 1.2vw, 1.08rem); letter-spacing: -0.01em; line-height: 1.5; }
.product-card__cat { font-family: var(--font); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.5em; }
/* 가격은 세리프에 ₩ 글리프가 없어 폴백이 섞인다 — 한글 서체로 통일 */
.product-card__price { font-family: var(--ko); font-weight: 400; font-size: 0.98rem; color: var(--ink); white-space: nowrap; }
.product-card__price s { color: var(--ink-faint); margin-right: 0.5em; font-size: 0.88em; font-weight: 300; }

/* 이름과 가격을 한 줄에 나란히 두는 배치는 카드가 넓을 때만 성립한다.
   가격은 white-space: nowrap 이라 줄바꿈이 안 되고, 그리드 트랙은 1fr 이어도
   항목의 min-content 아래로는 줄지 않는다. 그래서 좁은 화면에서 카드가 통째로
   화면 밖으로 밀려 나가고 이름과 가격이 겹쳤다(2026-09-13 실제 발생).
   예외를 '어느 그리드냐' 로 걸면 새 그리드를 만들 때마다 같은 버그가 난다 —
   --quad 에만 있고 --duo 에는 없어서 생긴 문제다. 화면 폭으로 건다.
   이 블록은 반드시 위 기본 규칙 '뒤' 에 와야 한다. @media 는 특이도를 올리지
   않으므로 앞에 두면 뒤의 같은 특이도 규칙에 덮인다(한 번 그렇게 틀렸다). */
@media (max-width: 759px) {
  .product-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .product-card__price { display: block; margin-top: auto; padding-top: 0.6em; white-space: normal; }
}

/* 그리드 항목은 기본이 min-width: auto 라 내용의 min-content 아래로 줄지 않는다.
   이것이 트랙을 컨테이너보다 넓게 만들어 가로 넘침을 낸다. 카드가 줄어들 수 있게 한다. */
.product-card { min-width: 0; }

/* ============================================================
   원칙 / 가치 카드
   ============================================================ */
.craft { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .craft { grid-template-columns: repeat(3, 1fr); } }
.craft--duo { grid-template-columns: 1fr; }
@media (min-width: 760px) { .craft--duo { grid-template-columns: repeat(2, 1fr); } }
.craft__item { padding-top: 1.5em; border-top: 1px solid var(--line); }
.craft__num { font-family: var(--font); font-weight: 500; font-size: 0.94rem; color: var(--gold-deep); letter-spacing: 0.12em; }
.craft__item h3 { font-family: var(--ko); font-weight: 400; font-size: clamp(1.08rem, 1.6vw, 1.3rem); margin: 0.7em 0 0.6em; line-height: 1.5; }
.craft__item p { font-size: 0.94rem; line-height: 1.85; color: var(--ink-soft); max-width: 38ch; }

/* ============================================================
   Marquee
   ============================================================ */
/* 제목만큼 커지면 브랜드 문구를 밀어낸다 — 얇은 정보 리본으로 유지한다 */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(14px, 1.8vw, 20px); --gap: clamp(26px, 4vw, 52px); }
.marquee__track { display: flex; gap: var(--gap); width: max-content; animation: marq 72s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--ko); font-weight: 400; font-size: clamp(0.78rem, 0.95vw, 0.88rem); letter-spacing: 0.05em; color: var(--ink-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--gap); }
.marquee__track span::after { content: "·"; color: var(--gold); opacity: 0.75; }
@keyframes marq { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* ============================================================
   Feature (이미지 + 텍스트)
   ============================================================ */
.feature { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; } }
.feature__text { max-width: 46ch; }
.feature__text h2 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.24; margin: 0.5em 0 0.7em; }
.feature__text p { color: var(--ink-soft); margin-bottom: 1.5em; }
.feature__text p:last-of-type { margin-bottom: 1.5em; }

/* ============================================================
   Band
   ============================================================ */
.band { background: var(--green); color: var(--white); position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px; opacity: 0.06; mix-blend-mode: screen; }
.band__inner { position: relative; z-index: 1; text-align: center; padding-block: clamp(64px, 10vw, 132px); }
.band .eyebrow { color: var(--gold); }
.band h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.2; margin: 0.55em auto 0.7em; max-width: 22ch; color: var(--white); }
.band h2 .em { color: var(--gold); }
.band p { color: rgba(255, 255, 255, 0.76); max-width: 46ch; margin-inline: auto; }
.band strong { color: var(--white); font-weight: 400; }
.band__note { margin-top: 1.6em; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }
.band__note a { color: inherit; }
.band__actions { margin-top: 2em; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* .band__note 는 원래 버튼 뒤에 붙는 꼬리말이라 위 여백이 넓다. 특가 조건 고지처럼
   가격 문단과 버튼 '사이'에 놓일 때는 간격을 좁혀 가격 설명에 붙여 읽히게 한다.
   구매 조건이므로 일반 꼬리말보다 조금 더 또렷하게 둔다(대비 6.2:1, AA 충족). */
.band__note--lead { margin-top: 0.9em; color: rgba(255, 255, 255, 0.6); }
/* 두 문장을 각각 inline-block 으로 묶어, 줄바꿈이 구 중간이 아니라 문장 경계에서
   일어나게 한다. text-wrap: balance 는 줄 길이만 맞춰 "스마트스토어 / 한정입니다" 로 갈랐다. */
.band__note--lead span { display: inline-block; }
.band__note--lead + .band__actions { margin-top: 1.5em; }
/* 채널별 혜택 안내. 채널마다 한 줄씩 두고, 채널명은 흰색으로 올려 혜택 문구와 구분한다.
   ul 기본 들여쓰기·글머리표를 지워 가운데 정렬을 유지한다. */
.band__stores { list-style: none; padding: 0; display: grid; gap: 0.45em; font-size: 0.86rem; }
.band__stores strong { margin-right: 0.6em; letter-spacing: 0.01em; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 92px) clamp(28px, 4vw, 40px); }
.footer__top { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 56px); }
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand .mark img { width: 120px; height: auto; display: block; margin-bottom: 0.4em; }
.footer__brand p { margin-top: 1.1em; color: var(--ink-soft); font-size: 0.9rem; max-width: 34ch; }
.footer__col h2 { font-family: var(--font); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1.3em; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.85em; }
.footer__col a { text-decoration: none; font-size: 0.9rem; color: var(--ink-soft); transition: color 0.4s var(--ease); }
.footer__col a:hover { color: var(--gold-deep); }
/* ---- 채널 아이콘 ---- */
/* 푸터 Contact 목록과 contact 페이지 dl 의 모든 채널 항목 앞에 붙는 선 아이콘.
   일부만 아이콘을 쓰면 텍스트 시작 위치가 들쭉날쭉해지므로 전 항목 통일.
   currentColor 를 쓰므로 다크 모드·hover 색을 별도 규칙 없이 따른다.
   vertical-align: -0.15em 으로 텍스트 베이스라인에 정렬. */
.social-icon {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  vertical-align: -0.15em;
  margin-inline-end: 0.4em;
  flex-shrink: 0;
}
/* 손가락으로 누르는 화면에서는 글자 높이(21px)가 곧 탭 영역이라 너무 작다.
   줄간격을 링크 안쪽 여백으로 옮겨 44px 를 확보한다 — 시각적 간격은 그대로다. */
@media (max-width: 700px) {
  .footer__col ul { gap: 0; }
  .footer__col a { display: inline-block; padding-block: 12px; }
  .footer__bottom a { display: inline-block; padding-block: 12px; }
}

.footer__legal {
  margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--line);
  font-size: 0.78rem; line-height: 2; color: var(--ink-faint);
}
.footer__legal span { white-space: nowrap; }
.footer__legal span + span::before { content: "·"; margin: 0 0.7em; opacity: 0.5; }
.footer__legal a { text-decoration: none; border-bottom: 1px solid var(--line); }
.footer__legal a:hover { color: var(--gold-deep); }
@media (max-width: 560px) { .footer__legal span { white-space: normal; } .footer__legal span + span::before { margin: 0 0.45em; } }

.footer__bottom {
  margin-top: clamp(24px, 4vw, 36px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer__bottom p, .footer__bottom a { font-family: var(--font); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; }

/* ============================================================
   서브 페이지 히어로
   ============================================================ */
/* padding 단축 속성을 쓰면 함께 붙은 .wrap 의 padding-inline 이 0 으로 덮여
   히어로만 본문 그리드에서 어긋난다 — 반드시 padding-block 으로 둔다 */
.page-hero { padding-block: calc(var(--nav-h) + clamp(40px, 6.5vw, 84px)) clamp(40px, 6vw, 76px); position: relative; }
/* 히어로의 아래 여백과 다음 섹션의 위 여백이 그대로 더해져 두 배로 벌어진다.
   컬렉션에서는 이 때문에 첫 제품이 접힘 아래로 밀렸다 — 붙을 때만 접어 준다. */
.page-hero + .section--tight, .page-hero + .section { padding-top: clamp(8px, 2vw, 28px); }
.page-hero__inner { display: grid; gap: clamp(18px, 2.6vw, 28px); }
.page-hero h1 { font-size: clamp(2.4rem, 7vw, 5.6rem); line-height: 1.1; }
.page-hero h1 .em { color: var(--gold-deep); }
.page-hero__lede { max-width: 52ch; }
.breadcrumb { font-family: var(--font); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }
.breadcrumb a { text-decoration: none; color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--gold-deep); }

/* ============================================================
   제품 상세
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 68px); align-items: start; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: 1.05fr 0.95fr; }
  .pdp__gallery { position: sticky; top: calc(var(--nav-h) + 24px); }
}
.pdp__gallery { display: grid; gap: 14px; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pdp__thumbs .shot { padding: 0; width: 100%; }
.pdp__thumbs .shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.4s var(--ease);
}
.pdp__thumbs .shot[aria-pressed="true"]::after { box-shadow: inset 0 0 0 2px var(--gold); }
.pdp__thumbs .shot:hover::after { box-shadow: inset 0 0 0 1px var(--gold-deep); }

.pdp__info .eyebrow { display: block; margin-bottom: 0.9em; }
.pdp__info h1 { font-family: var(--ko); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.32; letter-spacing: -0.015em; }
.pdp__desc { margin: clamp(22px, 2.8vw, 32px) 0; color: var(--ink-soft); max-width: 46ch; }
.pdp__divider { height: 1px; background: var(--line); margin-block: clamp(24px, 3vw, 34px); }
.pdp__spec { display: grid; grid-template-columns: auto 1fr; gap: 0.9em 1.6em; }
.pdp__spec dt { font-family: var(--ko); font-weight: 500; font-size: 0.84rem; letter-spacing: 0.02em; color: var(--ink-faint); line-height: 2.1; white-space: nowrap; }
.pdp__spec dd { font-size: 0.94rem; line-height: 1.8; color: var(--ink); }
.pdp__actions { margin-top: clamp(26px, 3.4vw, 36px); display: flex; gap: 14px; flex-wrap: wrap; }
/* 좁은 화면에서 버튼이 줄바꿈되면 폭이 제각각인 채로 왼쪽에 몰려 들쭉날쭉했다.
   남는 폭을 나눠 가져 각 줄을 꽉 채운다. */
@media (max-width: 520px) {
  .pdp__actions .btn { flex: 1 1 auto; justify-content: center; }
}
.pdp__note { margin-top: 1.5em; font-size: 0.84rem; line-height: 1.9; color: var(--ink-faint); }
.pdp__note strong { color: var(--ink-soft); font-weight: 400; }

.tagline-price { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; margin-top: 0.8em; }
.tagline-price .now { font-family: var(--ko); font-weight: 500; font-size: 1.5rem; color: var(--ink); }
.tagline-price .was { font-family: var(--ko); font-weight: 300; font-size: 1rem; color: var(--ink-faint); text-decoration: line-through; }
.tagline-price .badge {
  font-family: var(--ko); font-weight: 400; font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--gold-deep); border: 1px solid var(--line-gold); border-radius: 2px; padding: 0.45em 0.8em;
}

.swatch-row { margin-top: 1.4em; }
.swatch-row .eyebrow { display: block; margin-bottom: 0.85em; }
.swatches { display: flex; gap: 4px; }
.swatch { width: 44px; height: 44px; display: grid; place-items: center; background: none; cursor: pointer; }
.swatch::before { content: ""; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15); background: inherit;
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.swatch:hover::before, .swatch[aria-pressed="true"]::before { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-deep); }
.swatch--black::before { background: radial-gradient(circle at 35% 30%, #3b3d3f, #17181a); }
.swatch--tan::before   { background: radial-gradient(circle at 35% 30%, #b07f52, #7d5230); }

/* ============================================================
   설명 리스트 (소재와 마감 · 가죽 지식)
   ============================================================ */
.notes { display: grid; gap: clamp(24px, 3.4vw, 40px); }
.notes__item { padding-top: 1.4em; border-top: 1px solid var(--line); }
.notes__item h3 { font-family: var(--ko); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.22rem); margin-bottom: 0.6em; line-height: 1.55; }
.notes__item p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.9; max-width: 62ch; }
.notes__item p + p { margin-top: 0.9em; }
@media (min-width: 900px) { .notes--two { grid-template-columns: repeat(2, 1fr); } }

/* 가죽 타입 표 */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.spec-table caption { text-align: left; font-family: var(--ko); font-weight: 500; font-size: 0.84rem; letter-spacing: 0.02em; color: var(--gold-deep); padding-bottom: 1.1em; }
.spec-table th, .spec-table td { text-align: left; padding: 1em 1.2em 1em 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.8; }
.spec-table th { font-family: var(--ko); font-weight: 400; color: var(--ink); white-space: nowrap; }
.spec-table td { color: var(--ink-soft); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 660px; }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 76px); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info dl { display: grid; gap: 1.7em; }
.contact-info dt { font-family: var(--ko); font-weight: 500; font-size: 0.84rem; letter-spacing: 0.02em; color: var(--gold-deep); margin-bottom: 0.5em; }
.contact-info dd { font-family: var(--ko); font-weight: 300; font-size: 1.1rem; color: var(--ink); line-height: 1.7; }
.contact-info dd a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.4s var(--ease); }
.contact-info dd a:hover { border-color: var(--gold); }

/* ============================================================
   404
   ============================================================ */
.nf { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--nav-h) var(--gutter); }
.nf__num { font-family: var(--font); font-weight: 400; font-size: clamp(6rem, 20vw, 15rem); color: transparent; -webkit-text-stroke: 1.2px var(--line-gold); line-height: 1; }
.nf h1 { font-family: var(--ko); font-weight: 400; font-size: clamp(1.5rem, 3.6vw, 2.2rem); margin: 0.5em 0 0.5em; }
.nf p { color: var(--ink-soft); margin-bottom: 2em; }

/* ============================================================
   Story — 브랜드 이야기 전용
   ============================================================ */
.story-hero { padding-block: calc(var(--nav-h) + clamp(44px, 8vw, 104px)) clamp(40px, 6vw, 76px); }
.story-hero__inner { display: block; }
.story-hero h1 {
  font-family: var(--ko); font-weight: 300;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.3; letter-spacing: -0.025em;
  margin-top: clamp(16px, 2.2vw, 26px);
}
.story-hero h1 .em { font-weight: 400; color: var(--accent); }
.story-hero__lede { margin-top: clamp(20px, 2.6vw, 30px); max-width: 44ch; }

/* 이름의 어원 분해 */
.etym { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 26px); align-items: start; }
@media (min-width: 1000px) { .etym { grid-template-columns: 1fr auto 1fr auto 1fr auto 1.2fr; gap: clamp(14px, 1.8vw, 24px); } }
.etym__part { border-top: 1px solid var(--line); padding-top: 1.15em; }
.etym__word { display: block; font-family: var(--font); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.12; }
.etym__part--result .etym__word { color: var(--accent); letter-spacing: 0.05em; }
.etym__gloss { display: block; margin-top: 0.8em; font-size: 0.92rem; line-height: 1.75; color: var(--ink-soft); }
.etym__op { font-family: var(--font); font-size: clamp(1.2rem, 2vw, 1.7rem); color: var(--ink-faint); align-self: center; padding-top: 0.8em; }
@media (max-width: 999px) { .etym__op { display: none; } }

/* 큰 인용 — band 안에서 */
.band .band__quote { font-family: var(--ko); font-weight: 300; font-size: clamp(1.45rem, 3.2vw, 2.5rem); line-height: 1.55; letter-spacing: -0.025em; max-width: 18ch; margin-inline: auto; color: var(--white); }
.band .band__quote .em { color: var(--gold); font-weight: 400; }
.band .band__cite { display: block; max-width: none; margin-top: 1.8em; font-family: var(--font); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.52); font-style: normal; }

/* 가치 — 세로 괘선으로 나눈 에디토리얼 3단 */
.values { display: grid; grid-template-columns: 1fr; }
.values__item { padding-block: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line); }
@media (min-width: 860px) {
  .values { grid-template-columns: repeat(3, 1fr); }
  .values__item { padding: 0 clamp(24px, 3vw, 44px); border-top: none; border-left: 1px solid var(--line); }
  .values__item:first-child { padding-left: 0; border-left: none; }
  .values__item:last-child { padding-right: 0; }
}
.values__num { font-family: var(--font); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.2em; color: var(--accent); }
.values__item h3 { font-family: var(--ko); font-weight: 400; font-size: clamp(1.18rem, 1.9vw, 1.45rem); margin: 0.9em 0 0.65em; line-height: 1.5; }
.values__item p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.9; }

/* 약속 — 카드 2단 */
.promise { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.6vw, 28px); }
@media (min-width: 860px) { .promise { grid-template-columns: repeat(2, 1fr); } }
.promise__item { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 2px; padding: clamp(26px, 3.4vw, 42px); }
.promise__num { font-family: var(--font); font-weight: 600; font-size: 1rem; letter-spacing: 0.2em; color: var(--accent); }
.promise__item h3 { font-family: var(--ko); font-weight: 400; font-size: clamp(1.08rem, 1.6vw, 1.28rem); margin: 0.9em 0 0.65em; line-height: 1.5; }
.promise__item p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.9; }

/* ============================================================
   Utilities
   ============================================================ */
/* STORY 페이지 — 본문 영역 액센트 (밴드 위는 골드 원색) */
.page-green main .eyebrow,
.page-green main .em,
.page-green main .breadcrumb a:hover,
.page-green main .link:hover { color: var(--accent); }
.page-green main .band .eyebrow,
.page-green main .band .em { color: var(--gold); }
.page-green main .rule-h { background: var(--accent); }

.center { text-align: center; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--green); color: var(--white); padding: 0.8em 1.4em; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ============================================================
   다크 모드 — 브랜드 딥그린 배경 + 화이트 텍스트 + 골드 액센트
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #31331f;
    --bg:         #292a1c;
    --bg-deep:    #212217;
    --ink:        var(--white);
    --ink-soft:   rgba(255, 255, 255, 0.74);
    --ink-faint:  rgba(255, 255, 255, 0.48);
    --line:       rgba(255, 255, 255, 0.14);
    --line-soft:  rgba(255, 255, 255, 0.07);
    --line-gold:  rgba(205, 150, 59, 0.46);
    /* 어두운 배경에서는 골드를 그대로 써야 대비가 산다 */
    --gold-deep:  #dcae62;
    --green:      #212217;
  }
  body::after { mix-blend-mode: screen; opacity: 0.035; }
  .nav.is-solid { background: rgba(41, 42, 28, 0.9); }
  .nav__logo img, .footer__brand .mark img { filter: invert(1) brightness(1.6); }
  .symbol--hero, .symbol--divider { filter: invert(1); }
  .hero__bg {
    background:
      radial-gradient(120% 90% at 72% 22%, rgba(205, 150, 59, 0.12), transparent 58%),
      linear-gradient(180deg, #31331f, var(--bg) 52%, var(--bg-deep));
  }
  .hero__time { opacity: 0.42; }
  .btn { background: var(--gold); color: var(--green); }
  .btn:hover { background: var(--gold-soft); color: var(--green); }
  .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .btn--ghost:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
  .band { background: #1b1c12; }
  .shot { background: #33351f; }
  .swatch::before { border-color: rgba(255,255,255,0.2); }
  ::selection { background: var(--gold); color: var(--green); }
}