/* ═══════════════════════════════════════════════════════════
   MND — Maison de Coiffure · dark cinematic / champagne gold
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg: #0b0a09;
  --bg-2: #110f0d;
  --panel: #15120f;
  --ink: #f4efe6;
  --ink-soft: #b3aa9b;
  --ink-faint: #968b76;
  --gold: #c8a96a;
  --gold-bright: #e0c388;
  --line: rgba(244, 239, 230, .10);
  --line-2: rgba(244, 239, 230, .06);
  --accent: #c8a96a;
  /* 전면 고딕(Pretendard). 헤딩 위계는 굵기·자간으로 — 명조 제거 */
  --serif: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --kserif: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --sans: "Pretendard Variable", Pretendard, sans-serif;
  --max: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: #1a1409; }
/* 키보드 포커스 가시성 (WCAG 2.4.7) — 마우스 클릭엔 안 뜨고 키보드 탐색에만 */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
/* 한글 제목이 단어 중간에서 끊기지 않게 */
h1, h2, h3, h4, .hero-title, .sec-title, .ccard-title, .cta-h, .cd-title, .dd-name, .modal-h { word-break: keep-all; }

/* film grain overlay across whole site */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035;
  background-image: 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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── NAV ───────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(11, 10, 9, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto;
  height: 76px; padding: 0 32px;
  display: flex; align-items: center; gap: 40px;
}
.brand { display: flex; flex-direction: column; line-height: 1; margin-right: auto; }
.brand-mark {
  font-family: var(--serif); font-weight: 500; font-size: 26px;
  letter-spacing: .18em; color: var(--ink);
}
.brand-sub {
  font-size: 10px; letter-spacing: .42em; color: var(--gold);
  margin-top: 5px; margin-left: 2px;
}
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-size: 12.5px; letter-spacing: .16em; color: var(--ink-soft);
  transition: color .2s; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px;
  background: var(--gold); transition: width .25s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  font-size: 12.5px; letter-spacing: .08em;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 20px; color: var(--ink); transition: all .22s;
}
.nav-cta:hover { background: var(--gold); border-color: var(--gold); color: #1a1409; }

/* ── 모바일 햄버거 토글 (데스크탑 숨김 · ≤760px 표시) ── */
.nav-toggle {
  display: none; width: 40px; height: 40px; margin-left: 8px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; cursor: pointer; transition: border-color .2s;
}
.nav-toggle:hover { border-color: var(--gold); }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── HERO ──────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 32px 72px; max-width: 100%;
}
.hero-media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 18%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%),
    radial-gradient(140% 120% at 30% 90%, #1c1813, transparent 55%),
    linear-gradient(160deg, #14110d 0%, #0b0a09 70%);
}
.hero-media[data-loaded] { background-size: cover; background-position: center 20%; }
.hero-monogram {
  position: absolute; right: -2vw; top: 4vh;
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 52vh; line-height: .8; color: var(--accent);
  opacity: .14; user-select: none; pointer-events: none;
}
.hero-grain, .hero-vignette { position: absolute; inset: 0; }
.hero-vignette {
  background:
    linear-gradient(to top, var(--bg) 2%, transparent 38%),
    linear-gradient(to right, rgba(11,10,9,.7) 0%, transparent 50%);
}
.hero-title {
  font-family: var(--kserif); font-weight: 700;
  font-size: clamp(40px, 6.4vw, 88px); line-height: 1.04;
  letter-spacing: -.01em;
}

/* ── BUTTONS ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; letter-spacing: .04em; font-weight: 500;
  padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  transition: all .22s; cursor: pointer;
}
.btn-gold { background: var(--gold); color: #1a1409; }
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--gold); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-lg { padding: 17px 38px; font-size: 15px; }

/* ── SECTION SHARED ────────────────────────── */
section { position: relative; }
.intro, .classes, .designers, .reviews { max-width: var(--max); margin: 0 auto; padding: 120px 32px; }
.sec-eyebrow { font-size: 11.5px; letter-spacing: .36em; color: var(--gold); margin-bottom: 16px; }
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 30px;
  border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 44px;
}
.sec-title { font-family: var(--kserif); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; }
.sec-note { font-size: 13px; color: var(--ink-faint); text-align: right; line-height: 1.7; }

/* ── INTRO ─────────────────────────────────── */
.intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; }

/* ── CLASS GRID ────────────────────────────── */
.class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ccard {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-2);
  overflow: hidden; transition: transform .28s, border-color .28s, box-shadow .28s;
}
.ccard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 26px 50px -28px #000; }
.ccard.is-closed { opacity: .56; }
.ccard.is-closed:hover { transform: none; }
.ccard-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background:
    radial-gradient(120% 110% at 72% 20%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 58%),
    linear-gradient(155deg, #1b1712, #0d0b09);
}
.ccard-media[data-loaded] { background-size: cover; background-position: center; }
.ccard-mono {
  position: absolute; right: -.06em; bottom: -.28em;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 200px; line-height: 1; color: var(--accent); opacity: .2;
}
.ccard-badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 2px; color: #fff;
}
.badge-모집중 { background: rgba(92, 140, 110, .92); }
.badge-모집임박 { background: rgba(190, 110, 70, .94); }
.badge-마감 { background: rgba(120, 110, 100, .8); }
.ccard-format {
  position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; letter-spacing: .1em; color: var(--ink);
  background: rgba(11,10,9,.6); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 2px; backdrop-filter: blur(4px);
}
.ccard-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.ccard-designer { font-size: 11.5px; letter-spacing: .1em; color: var(--gold); margin-bottom: 10px; }
.ccard-title { font-family: var(--kserif); font-weight: 700; font-size: 20px; line-height: 1.32; }
.ccard-sub { font-size: 13px; color: var(--ink-soft); margin-top: 8px; flex: 1; }
.ccard-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint); margin-top: 16px; }
.ccard-meta i { opacity: .5; }
.ccard-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.ccard-price s { display: block; font-size: 11.5px; color: var(--ink-faint); }
.ccard-price b { font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--ink); }
.ccard-price small { font-size: 12px; font-family: var(--sans); color: var(--ink-soft); margin-left: 2px; }
.ccard-seats { font-size: 11.5px; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); padding: 4px 10px; border-radius: 999px; }
.ccard-seats.off { color: var(--ink-faint); border-color: var(--line); }

/* ── DESIGNER GRID ─────────────────────────── */
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dcard { background: var(--panel); border: 1px solid var(--line-2); overflow: hidden; transition: transform .3s, border-color .3s; }
.dcard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.dcard-media {
  position: relative; aspect-ratio: 3 / 3.4; overflow: hidden;
  background:
    radial-gradient(110% 90% at 50% 12%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 55%),
    linear-gradient(165deg, #1d1813, #0c0a08);
  filter: grayscale(.2);
}
.dcard-media[data-loaded] { background-size: cover; background-position: center top; }
.dcard:hover .dcard-media { filter: grayscale(0); }
.dcard-mono {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 170px; color: var(--accent); opacity: .26;
}
.dcard-info { padding: 22px; }
.dcard-city { font-size: 11px; letter-spacing: .16em; color: var(--gold); }
.dcard-name { font-family: var(--kserif); font-weight: 700; font-size: 23px; margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.dcard-name span { font-family: var(--serif); font-weight: 400; font-size: 11px; letter-spacing: .2em; color: var(--ink-faint); }
.dcard-title { font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; }
.dcard-spec { font-size: 13px; color: var(--ink); margin-top: 6px; }
.dcard-stats { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-faint); margin-top: 14px; }
.dcard-stats i { opacity: .5; }

/* ── REVIEWS ───────────────────────────────── */
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rcard { background: var(--bg-2); border: 1px solid var(--line-2); padding: 28px; display: flex; flex-direction: column; }
.rcard-stars { color: var(--gold); letter-spacing: 3px; font-size: 13px; }
.rcard-off { color: var(--ink-faint); opacity: .4; }
.rcard-title { font-family: var(--kserif); font-weight: 700; font-size: 17px; margin: 16px 0 12px; line-height: 1.4; }
.rcard-body { font-size: 13.5px; color: var(--ink-soft); flex: 1; font-style: normal; }
.rcard-by { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink); }
.rcard-by b { font-weight: 600; }
.rcard-class { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; letter-spacing: .02em; }

/* ── CTA ───────────────────────────────────── */
.cta { border-top: 1px solid var(--line); padding: 130px 32px; text-align: center; background: radial-gradient(80% 130% at 50% 0%, #16120d, var(--bg) 70%); }
.cta-inner { max-width: 680px; margin: 0 auto; }
.cta-h { font-family: var(--kserif); font-weight: 700; font-size: clamp(30px, 5vw, 56px); line-height: 1.16; margin-top: 16px; }
.cta-h em { font-style: normal; color: var(--gold); font-family: var(--serif); font-weight: 500; }
.cta-p { color: var(--ink-soft); font-size: 15px; margin: 22px auto 38px; max-width: 480px; }

/* ── FOOTER ────────────────────────────────── */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 70px 32px 30px; }
.footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 2fr; gap: 50px; }
.footer-mark { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: .16em; }
.footer-name { font-size: 10px; letter-spacing: .4em; color: var(--gold); margin-top: 8px; }
.footer-tag { font-size: 13px; color: var(--ink-soft); margin-top: 18px; max-width: 280px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-h { font-size: 11px; letter-spacing: .2em; color: var(--ink-faint); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13px; color: var(--ink-soft); padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: var(--gold); }
.footer-base { max-width: var(--max); margin: 50px auto 0; padding-top: 24px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-faint); }

/* ── ANIM ──────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 1000px) {
  .class-grid, .dgrid, .rgrid { grid-template-columns: repeat(2, 1fr); }
  .intro { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  /* .nav-links → 헤더 아래로 펼쳐지는 드로어. 기본 숨김, .open일 때 표시 */
  .nav-links {
    position: fixed; top: 76px; left: 0; right: 0; z-index: 99;
    flex-direction: column; gap: 0; padding: 8px 0;
    background: rgba(8, 8, 10, .97); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .24s ease, transform .24s ease, visibility .24s;
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a { font-size: 15px; letter-spacing: .12em; padding: 15px 24px; color: var(--ink-soft); }
  .nav-links a::after { display: none; }
  .nav-inner { padding: 0 20px; gap: 16px; }
  .hero { padding: 0 20px 56px; }
  .intro, .classes, .designers, .reviews { padding: 80px 20px; }
  .class-grid, .dgrid, .rgrid { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-note { text-align: left; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-base { flex-direction: column; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   DETAIL PAGES (class / designer) + MODALS
   ═══════════════════════════════════════════════════════════ */
.page-detail { padding-top: 76px; }
.cd-back { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .04em; transition: color .2s; }
.cd-back:hover { color: var(--gold); }
.cd-kicker { font-size: 11.5px; letter-spacing: .3em; color: var(--gold); }
.cd-h { font-family: var(--kserif); font-weight: 700; font-size: clamp(22px, 3vw, 30px); margin-bottom: 22px; }
.cd-h em { font-style: normal; color: var(--gold); font-family: var(--serif); font-size: .8em; margin-left: 4px; }

/* class hero */
.cd-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; padding: 48px 32px; overflow: hidden; }
.cd-hero-media { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 90% at 72% 16%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 58%),
  linear-gradient(160deg, #15110d, #0a0908); }
.cd-hero-media[data-loaded] { background-size: cover; background-position: center; }
.cd-hero-mono { position: absolute; right: 0; bottom: -.2em; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 44vh; color: var(--accent); opacity: .14; }
.cd-hero-veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg), transparent 60%), linear-gradient(to right, rgba(11,10,9,.65), transparent 55%); }
.cd-hero-inner { position: relative; max-width: var(--max); margin: 0 auto; width: 100%; }
.cd-title { font-family: var(--kserif); font-weight: 700; font-size: clamp(30px, 5vw, 60px); line-height: 1.08; margin: 18px 0 14px; }
.cd-sub { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2vw, 22px); color: var(--ink-soft); }
.cd-by { display: inline-block; margin-top: 22px; font-size: 13.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: color .2s, border-color .2s; }
.cd-by:hover { color: var(--gold); border-color: var(--gold); }
.cd-by b { color: var(--ink); }

/* class grid layout */
.cd-grid { max-width: var(--max); margin: 0 auto; padding: 70px 32px; display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
.cd-block { margin-bottom: 56px; }
.cd-lead { font-size: 16px; color: var(--ink-soft); line-height: 1.8; }
.cd-learn { list-style: none; display: grid; gap: 12px; }
.cd-learn li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink); }
.cd-learn li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-size: 14px; }
.cd-curri { list-style: none; counter-reset: c; }
.cd-curri li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; align-items: baseline; }
.cd-curri-n { font-family: var(--serif); font-size: 15px; color: var(--gold); min-width: 28px; }

/* tutor block */
.cd-tutor { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 30px; background: var(--bg-2); border: 1px solid var(--line-2); align-items: start; }
.cd-tutor-media { position: relative; aspect-ratio: 3/3.6; overflow: hidden; background: radial-gradient(110% 90% at 50% 14%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 55%), linear-gradient(165deg, #1d1813, #0c0a08); }
.cd-tutor-media[data-loaded] { background-size: cover; background-position: center top; }
.cd-tutor-mono { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 120px; color: var(--accent); opacity: .26; }
.cd-tutor-name { font-family: var(--kserif); font-weight: 700; font-size: 24px; margin: 10px 0 14px; }
.cd-tutor-name span { font-family: var(--serif); font-weight: 400; font-size: 12px; letter-spacing: .18em; color: var(--ink-faint); margin-left: 8px; }
.cd-tutor-bio { font-size: 14px; color: var(--ink-soft); line-height: 1.75; }
.cd-tutor-career { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cd-tutor-career span { font-size: 11.5px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }

/* reviews on detail */
.cd-rev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.cd-rev-head .cd-h { margin: 0; }
.cd-reviews { display: grid; gap: 14px; }
.cd-review { background: var(--bg-2); border: 1px solid var(--line-2); padding: 22px; }
.cd-review h4 { font-family: var(--kserif); font-weight: 700; font-size: 16px; margin: 10px 0 8px; }
.cd-review p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.cd-review figcaption { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }
.cd-review figcaption b { color: var(--ink); }
.cd-empty { color: var(--ink-faint); font-size: 14px; padding: 20px 0; }

/* sticky apply panel */
.cd-side { position: sticky; top: 100px; }
.cd-panel { background: var(--panel); border: 1px solid var(--line); padding: 28px; }
.cd-panel-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 2px; color: #fff; }
.cd-panel-price { margin: 18px 0 22px; }
.cd-panel-price s { display: block; font-size: 13px; color: var(--ink-faint); }
.cd-panel-price b { font-family: var(--serif); font-weight: 500; font-size: 34px; }
.cd-panel-price small { font-size: 15px; font-family: var(--sans); color: var(--ink-soft); margin-left: 3px; }
.cd-panel-early { display: inline-block; margin-left: 8px; font-size: 11px; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); padding: 3px 9px; border-radius: 999px; vertical-align: middle; }
.cd-spec { display: grid; gap: 14px; margin-bottom: 24px; }
.cd-spec div { display: grid; grid-template-columns: 52px 1fr; gap: 12px; font-size: 13.5px; }
.cd-spec dt { color: var(--ink-faint); }
.cd-spec dd { color: var(--ink); }
.cd-seats { color: var(--gold); margin-left: 6px; }
.btn-block { width: 100%; justify-content: center; }
.btn-disabled { background: var(--line); color: var(--ink-faint); cursor: not-allowed; }
.cd-panel-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 14px; text-align: center; }

.cd-other { max-width: var(--max); margin: 0 auto; padding: 30px 32px 100px; }
.cd-other .cd-h { margin-bottom: 28px; }

/* designer detail */
.dd-hero { position: relative; min-height: 66vh; display: flex; align-items: flex-end; padding: 48px 32px; overflow: hidden; }
.dd-hero-media { position: absolute; inset: 0; z-index: -1; filter: grayscale(.25); background: radial-gradient(100% 80% at 60% 14%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 56%), linear-gradient(165deg, #18130e, #0a0908); }
.dd-hero-media[data-loaded] { background-size: cover; background-position: center 25%; }
.dd-hero-mono { position: absolute; right: 2vw; top: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 56vh; color: var(--accent); opacity: .13; }
.dd-hero-veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg), transparent 55%), linear-gradient(to right, rgba(11,10,9,.6), transparent 50%); }
.dd-hero-inner { position: relative; max-width: var(--max); margin: 0 auto; width: 100%; }
.dd-name { font-family: var(--kserif); font-weight: 900; font-size: clamp(40px, 7vw, 96px); line-height: 1; margin: 16px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.dd-name span { font-family: var(--serif); font-weight: 400; font-size: 14px; letter-spacing: .3em; color: var(--ink-faint); }
.dd-title { font-size: 15px; color: var(--ink-soft); }
.dd-tagline { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.4vw, 26px); color: var(--gold); margin-top: 20px; }
.dd-stat-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 13.5px; color: var(--ink-soft); }
.dd-stat-row i { opacity: .4; }
.dd-body { max-width: 920px; margin: 0 auto; padding: 70px 32px 100px; }
.dd-sign { margin-top: 20px; font-size: 14px; color: var(--ink-soft); }
.dd-sign b { color: var(--gold); font-weight: 500; margin-right: 8px; }
.dd-career { list-style: none; display: grid; gap: 12px; }
.dd-career li { position: relative; padding-left: 24px; font-size: 15px; color: var(--ink); }
.dd-career li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

/* MODALS */
.modal { position: fixed; inset: 0; z-index: 200; background: rgba(6,5,4,.7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: rise .2s ease; }
.modal[hidden] { display: none; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--gold); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 34px; position: relative; }
.modal-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 50%; font-size: 18px; cursor: pointer; transition: all .2s; }
.modal-x:hover { background: var(--gold); color: #1a1409; }
.modal-h { font-family: var(--kserif); font-weight: 700; font-size: 24px; margin: 10px 0 6px; }
.modal-sub { font-size: 13px; color: var(--ink-faint); margin-bottom: 22px; }
.modal form { display: grid; gap: 14px; }
.modal label { display: grid; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.modal input, .modal textarea { background: var(--bg); border: 1px solid var(--line); color: var(--ink); padding: 12px 14px; font-family: var(--sans); font-size: 14px; border-radius: 4px; resize: vertical; transition: border-color .2s; }
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--gold); }
.star-pick { display: flex; gap: 4px; }
.star-pick button { background: none; border: none; font-size: 24px; color: var(--ink-faint); cursor: pointer; transition: color .15s; padding: 0; }
.star-pick button.on { color: var(--gold); }
.modal-msg { font-size: 13px; text-align: center; min-height: 18px; }
.modal-msg.ok { color: var(--gold); }
.modal-msg.err { color: #d98c7a; }

@media (max-width: 1000px) {
  .cd-grid { grid-template-columns: 1fr; gap: 36px; }
  .cd-side { position: static; }
  .cd-tutor { grid-template-columns: 1fr; }
  .cd-tutor-media { max-width: 200px; }
}
@media (max-width: 760px) {
  .cd-hero, .dd-hero { padding: 40px 20px; }
  .cd-grid, .dd-body, .cd-other { padding-left: 20px; padding-right: 20px; }
}

/* prefers-reduced-motion: 무한 펄스/리빌 정지 (WCAG 2.2.2/2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MULTI-PAGE (wonderwall 구조) — nav 확장 / 홈 포털 / 리스트 페이지
   ═══════════════════════════════════════════════════════════ */

/* nav 우측 (검색 + SIGN IN + CTA) */
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-search { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; transition: all .2s; }
.nav-search:hover { border-color: var(--gold); color: var(--gold); }
.nav-signin { font-size: 12px; letter-spacing: .12em; color: var(--ink-soft); transition: color .2s; }
.nav-signin:hover { color: var(--ink); }
.nav-links a.active { color: var(--gold); }
.nav-links a.active::after { width: 100%; }

/* ── HERO CAROUSEL (override) ────────────────── */
.hero { position: relative; height: 90vh; min-height: 600px; max-width: 100%; padding: 0; overflow: hidden; display: block; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-slide .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-monogram { position: absolute; right: -1vw; top: 8%; font-size: 64vh; line-height: .8; opacity: .12; }
.hero-vignette { background: linear-gradient(to top, var(--bg) 1%, transparent 45%), linear-gradient(to right, rgba(8,7,6,.82) 0%, rgba(8,7,6,.2) 46%, transparent 65%); }
.hero-card { position: absolute; left: max(32px, calc((100% - var(--max))/2 + 32px)); bottom: 96px; z-index: 2; max-width: 540px; background: rgba(12,10,8,.42); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 4px; padding: 32px 34px; animation: rise .8s ease both; }
.hero-card-label { font-size: 11px; letter-spacing: .3em; color: var(--gold); }
.hero-card-title { font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.12; margin: 14px 0 12px; letter-spacing: -.02em; }
.hero-card-desc { font-size: 15px; color: var(--ink-soft); }
.hero-card-by { font-size: 13px; color: var(--ink-faint); margin-top: 16px; }
.hero-card-btn { display: inline-block; margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 5px; transition: gap .2s; }
.hero-card-btn:hover { color: var(--gold); }
.hero-nav { position: absolute; top: 50%; right: 40px; z-index: 3; display: flex; align-items: center; gap: 14px; }
.hero-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(12,10,8,.4); backdrop-filter: blur(6px); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: all .2s; }
.hero-arrow:hover { background: var(--gold); border-color: var(--gold); color: #1a1409; }
.hero-count { font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); }
.hero-count b { color: var(--ink); }
.hero-dots { position: absolute; bottom: 40px; right: 40px; z-index: 3; display: flex; gap: 9px; }
.hero-dots button { width: 26px; height: 3px; border: 0; background: rgba(244,239,230,.25); cursor: pointer; transition: background .2s; }
.hero-dots button.on { background: var(--gold); }

/* ── CATEGORY CARDS ──────────────────────────── */
.cats { max-width: var(--max); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-left: 0; border-right: 0; margin-top: -1px; }
.cat { padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--line); transition: background .25s; position: relative; }
.cat:last-child { border-right: 1px solid var(--line); }
.cat:hover { background: rgba(200,169,106,.06); }
.cat > div { display: flex; flex-direction: column; gap: 4px; }
.cat-eng { font-size: 12px; letter-spacing: .24em; color: var(--gold); }
.cat-ko { font-weight: 700; font-size: 19px; }
.cat-desc { font-size: 12.5px; color: var(--ink-faint); flex: 1; }
.cat-arrow { font-size: 18px; color: var(--ink-soft); transition: transform .25s, color .25s; align-self: flex-start; }
.cat:hover .cat-arrow { transform: translateX(5px); color: var(--gold); }

/* ── 공통 센터 헤더 ──────────────────────────── */
.sec-center { text-align: center; margin-bottom: 44px; }
.sec-center .sec-eyebrow { margin-bottom: 14px; }

/* ── NEWS & EVENT ────────────────────────────── */
.ne { max-width: var(--max); margin: 0 auto; padding: 110px 32px; }
.ne-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.ne-main { position: relative; overflow: hidden; border-radius: 6px; padding: 44px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 30%, #15110d), #100d0a 72%); border: 1px solid var(--line); }
.ne-main-glow { position: absolute; top: -30%; right: -10%; width: 70%; height: 80%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 65%); filter: blur(20px); opacity: .7; }
.ne-tag { position: relative; align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: #1a1409; background: var(--gold); padding: 5px 12px; border-radius: 2px; margin-bottom: auto; }
.ne-main-title { position: relative; font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.16; letter-spacing: -.02em; margin-top: 24px; }
.ne-main-sub { position: relative; font-size: 14px; color: var(--ink-soft); margin-top: 14px; }
.ne-main-btn { position: relative; align-self: flex-start; margin-top: 24px; font-size: 13.5px; font-weight: 600; border-bottom: 1px solid var(--gold); padding-bottom: 5px; }
.ne-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ne-thumb { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); overflow: hidden; transition: transform .25s, border-color .25s; }
.ne-thumb:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ne-thumb-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: radial-gradient(120% 110% at 70% 20%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 58%), linear-gradient(155deg, #1b1712, #0d0b09); }
.ne-thumb-media[data-loaded] { background-size: cover; background-position: center; }
.ne-thumb-mono { position: absolute; right: -.05em; bottom: -.3em; font-style: italic; font-weight: 300; font-size: 90px; color: var(--accent); opacity: .2; }
.ne-thumb-info { padding: 14px 16px 16px; }
.ne-thumb-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 2px; color: #fff; }
.ne-thumb-title { font-weight: 700; font-size: 14px; margin: 10px 0 5px; line-height: 1.35; }
.ne-thumb-by { font-size: 11.5px; color: var(--ink-faint); }

/* ── BANNER ──────────────────────────────────── */
.banner { display: block; background: linear-gradient(100deg, #15110d, #0c0a08); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.banner-inner { max-width: var(--max); margin: 0 auto; padding: 40px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.banner-eng { font-size: 11px; letter-spacing: .3em; color: var(--gold); }
.banner-ko { font-weight: 700; font-size: clamp(18px, 2.4vw, 26px); margin-top: 8px; }
.banner-arrow { font-size: 14px; color: var(--ink-soft); white-space: nowrap; transition: color .2s; }
.banner:hover .banner-arrow { color: var(--gold); }

/* ── DISCOVER YOUR DESIGNER ──────────────────── */
.discover { max-width: var(--max); margin: 0 auto; padding: 110px 32px; }
.disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.disc-card { overflow: hidden; border-radius: 4px; }
.disc-media { position: relative; aspect-ratio: 3/3.7; overflow: hidden; background: radial-gradient(100% 80% at 50% 14%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 56%), linear-gradient(165deg, #1d1813, #0b0a08); filter: grayscale(.25); transition: filter .35s, transform .5s; }
.disc-media[data-loaded] { background-size: cover; background-position: center top; }
.disc-card:hover .disc-media { filter: grayscale(0); transform: scale(1.03); }
.disc-mono { position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%); font-style: italic; font-weight: 300; font-size: 160px; color: var(--accent); opacity: .24; }
.disc-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,7,6,.92) 6%, transparent 52%); }
.disc-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; }
.disc-city { font-size: 11px; letter-spacing: .14em; color: var(--gold); }
.disc-name { font-weight: 800; font-size: 25px; margin: 8px 0 8px; }
.disc-spec { font-size: 13px; color: var(--ink-soft); }
.disc-tag { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: .08em; color: var(--ink-soft); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; }
.more-wrap { text-align: center; margin-top: 50px; }
.more-btn { display: inline-block; font-size: 13px; letter-spacing: .24em; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 15px 54px; transition: all .25s; }
.more-btn:hover { background: var(--ink); color: var(--bg); letter-spacing: .3em; }

/* ── LIST PAGES (CLASS/DESIGNER/REVIEW) ──────── */
.page-list { padding-top: 76px; }
.list-hero { border-bottom: 1px solid var(--line); padding: 80px 32px 54px; background: radial-gradient(90% 140% at 80% 0%, #15110d, var(--bg) 65%); }
.list-hero-inner { max-width: var(--max); margin: 0 auto; }
.list-title { font-weight: 800; font-size: clamp(34px, 5vw, 60px); letter-spacing: -.02em; margin: 14px 0 16px; }
.list-lead { font-size: 15px; color: var(--ink-soft); max-width: 540px; }
.list-wrap { max-width: var(--max); margin: 0 auto; padding: 44px 32px 100px; }
.list-filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 36px; }
.chip { font-size: 12.5px; font-weight: 500; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); padding: 8px 17px; cursor: pointer; transition: all .18s; }
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip i { font-style: normal; opacity: .6; margin-left: 4px; }
.list-empty { text-align: center; color: var(--ink-faint); padding: 60px 0; }
.dgrid-lg { grid-template-columns: repeat(3, 1fr); }
.dcard-tagline { font-size: 13px; color: var(--gold); font-style: italic; margin-top: 12px; }
.rgrid-lg { grid-template-columns: repeat(3, 1fr); }
.rgrid-lg .rcard { border-top: 2px solid var(--accent); }
a.rcard-class { transition: color .2s; }
a.rcard-class:hover { color: var(--gold); }
.rev-summary { display: flex; align-items: baseline; gap: 16px; margin-top: 26px; }
.rev-avg { font-weight: 800; font-size: 30px; color: var(--gold); }
.rev-count { font-size: 13px; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .cats { grid-template-columns: 1fr 1fr; }
  .cat:nth-child(2) { border-right: 1px solid var(--line); }
  .cat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ne-grid { grid-template-columns: 1fr; }
  .disc-grid { grid-template-columns: 1fr 1fr; }
  .disc-grid .disc-card:last-child { grid-column: span 2; }
  .dgrid-lg, .rgrid-lg { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nav-signin { display: none; }
  .hero { height: 78vh; }
  .hero-card { left: 16px; right: 16px; bottom: 70px; max-width: none; padding: 24px; }
  .hero-nav { top: auto; bottom: 70px; right: 16px; }
  .hero-dots { display: none; }
  .cats { grid-template-columns: 1fr; padding: 0 20px; }
  .cat { border-right: 1px solid var(--line); }
  .cat:not(:last-child) { border-bottom: 1px solid var(--line); }
  .ne, .discover { padding: 70px 20px; }
  .ne-thumbs { grid-template-columns: 1fr; }
  .banner-inner { flex-direction: column; align-items: flex-start; padding: 30px 20px; }
  .disc-grid { grid-template-columns: 1fr; }
  .disc-grid .disc-card:last-child { grid-column: auto; }
  .dgrid-lg, .rgrid-lg { grid-template-columns: 1fr; }
  .list-hero { padding: 54px 20px 40px; }
  .list-wrap { padding: 32px 20px 70px; }
}

/* ── STORE ───────────────────────────────────── */
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pcard { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); overflow: hidden; transition: transform .26s, border-color .26s, box-shadow .26s; }
.pcard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 26px 50px -28px #000; }
.pcard.is-soldout { opacity: .6; }
.pcard-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: radial-gradient(120% 110% at 70% 22%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 58%), linear-gradient(155deg, #1b1712, #0d0b09); }
.pcard-media[data-loaded] { background-size: cover; background-position: center; }
/* 제품 썸네일 위 미세 필름그레인 (에디토리얼 질감) */
.pcard-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23pn)'/%3E%3C/svg%3E");
}
.pcard-mono { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); font-weight: 800; font-size: 60px; letter-spacing: .12em; color: var(--accent); opacity: .16; }
.pcard-cat { position: absolute; top: 14px; left: 14px; font-size: 10.5px; letter-spacing: .12em; color: var(--ink); background: rgba(11,10,9,.55); border: 1px solid var(--line); padding: 4px 10px; border-radius: 2px; backdrop-filter: blur(4px); }
.pcard-status { position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 2px; color: #fff; }
.status-품절 { background: rgba(120,110,100,.85); }
.status-예약 { background: rgba(120,140,160,.9); }
.pcard-sale { position: absolute; bottom: 14px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #1a1409; background: var(--gold); padding: 4px 10px; border-radius: 2px; }
.pcard-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.pcard-eng { font-size: 10.5px; letter-spacing: .2em; color: var(--gold); }
.pcard-name { font-weight: 700; font-size: 18px; margin: 9px 0 8px; line-height: 1.32; }
.pcard-summary { font-size: 13px; color: var(--ink-soft); flex: 1; }
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pcard-tags span { font-size: 11px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.pcard-price s { display: block; font-size: 11.5px; color: var(--ink-faint); }
.pcard-price b { font-weight: 700; font-size: 19px; color: var(--ink); }
.pcard-price small { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-left: 2px; }
.pcard-btn { font-size: 12.5px; font-weight: 600; color: #1a1409; background: var(--gold); border: 0; border-radius: 999px; padding: 9px 20px; cursor: pointer; transition: all .2s; }
.pcard-btn:hover { background: var(--gold-bright); }
.pcard-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.pcard-btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
.pcard-btn.off { background: var(--line); color: var(--ink-faint); cursor: not-allowed; }
.store-note { margin-top: 40px; font-size: 12px; color: var(--ink-faint); text-align: center; }
.store-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); background: var(--panel); border: 1px solid var(--gold); color: var(--ink); font-size: 13.5px; padding: 13px 22px; border-radius: 999px; z-index: 300; opacity: 0; transition: opacity .25s, transform .25s; box-shadow: 0 12px 30px -12px #000; }
.store-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1000px) { .store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .store-grid { grid-template-columns: 1fr; } }

/* ── HERO VIDEO (영상 배경 + 카드 캐러셀, 최종 override) ──────── */
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b0a09; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-wrap .hero-vignette { position: absolute; inset: 0; background:
  linear-gradient(to top, var(--bg) 1%, transparent 46%),
  linear-gradient(to right, rgba(8,7,6,.78) 0%, rgba(8,7,6,.18) 48%, transparent 66%); }
.hero-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-cards .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.hero-cards .hero-slide.active { opacity: 1; visibility: visible; }
.hero-cards .hero-card { pointer-events: auto; }
.hero-nav, .hero-dots { z-index: 4; }

/* ── HERO 생태계 슬로건 (메인 강조 · 모든 슬라이드 위 고정) ───── */
.hero-slogan {
  position: absolute; z-index: 3; pointer-events: none;
  left: max(32px, calc((100% - var(--max))/2 + 32px));
  top: 23%; max-width: 640px;
  animation: rise 1s cubic-bezier(.2,.7,.2,1) both;
}
.hero-slogan-eyebrow {
  display: inline-flex; align-items: center; gap: 13px;
  font-size: 11.5px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px;
}
.hero-slogan-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.hero-slogan-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 72px); line-height: 1.07;
  letter-spacing: -.022em; color: var(--ink);
  text-shadow: 0 2px 44px rgba(0,0,0,.55);
}
.hero-slogan-title em { color: var(--gold); font-style: italic; font-weight: 500; }
/* 부정→긍정 반전: 1행(전제) 흐리게·얇게, 2행(선언) 풀화이트·풀웨이트 */
.hero-slogan-title .t-dim { color: var(--ink-soft); font-weight: 300; }
.hero-slogan-sub {
  margin-top: 24px; max-width: 500px;
  font-size: clamp(14.5px, 1.4vw, 18px); line-height: 1.72;
  color: var(--ink-soft); text-shadow: 0 1px 20px rgba(0,0,0,.5);
}
.hero-slogan-sub b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .hero-slogan { top: 13%; left: 16px; right: 16px; max-width: none; }
  .hero-slogan-eyebrow { margin-bottom: 16px; }
  .hero-slogan-sub { display: none; }
}

/* ── ne-main veil (이미지 위 텍스트 가독) ───── */
.ne-main-veil { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8,7,6,.82) 0%, rgba(8,7,6,.45) 55%, rgba(8,7,6,.7) 100%); z-index: 0; }
.ne-main[data-loaded] { background-size: cover; background-position: center; }
.ne-main > *:not(.ne-main-glow):not(.ne-main-veil) { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   ABOUT 페이지
   ═══════════════════════════════════════════════════════════ */
.page-about { padding-top: 76px; }
.about-hero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; padding: 64px 32px; overflow: hidden; }
.about-hero-media { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, #16120d, #0a0908); }
.about-hero-media[data-loaded] { background-size: cover; background-position: center; }
.about-hero-veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 4%, transparent 60%), linear-gradient(to right, rgba(8,7,6,.7), transparent 60%); }
.about-hero-inner { position: relative; max-width: var(--max); margin: 0 auto; width: 100%; }
.about-h1 { font-weight: 800; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.14; letter-spacing: -.02em; margin: 16px 0 18px; }
.about-h1 em { font-style: normal; color: var(--gold); }
.about-lead { font-size: 16px; color: var(--ink-soft); max-width: 560px; }

.about-vim { border-bottom: 1px solid var(--line); }
.about-vim-inner { max-width: 820px; margin: 0 auto; padding: 110px 32px; text-align: center; }
.about-vim-h { font-weight: 800; font-size: clamp(30px, 4.6vw, 52px); margin: 14px 0 24px; letter-spacing: -.02em; }
.about-vim-p { font-size: 17px; line-height: 1.85; color: var(--ink-soft); }
.about-vim-p b { color: var(--ink); font-weight: 600; }

.about-stats { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.about-stat { background: var(--bg); padding: 50px 26px; text-align: center; }
.about-stat-n { display: block; font-weight: 800; font-size: clamp(34px,4.5vw,56px); letter-spacing: -.02em; }
.about-stat-l { font-size: 11px; letter-spacing: .26em; color: var(--ink-faint); margin-top: 10px; display: block; }

.about-craft { max-width: var(--max); margin: 0 auto; padding: 110px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-craft-media { aspect-ratio: 4/5; background: linear-gradient(155deg,#1b1712,#0d0b09); border: 1px solid var(--line-2); }
.about-craft-media[data-loaded] { background-size: cover; background-position: center; }
.about-craft-h { font-weight: 800; font-size: clamp(26px,3.4vw,40px); margin: 14px 0 30px; letter-spacing: -.02em; }
.about-principles { list-style: none; display: grid; gap: 22px; }
.about-principles li { display: flex; gap: 18px; }
.about-principles span { font-weight: 800; font-size: 15px; color: var(--gold); min-width: 26px; }
.about-principles b { font-weight: 700; font-size: 16px; }
.about-principles p { font-size: 14px; color: var(--ink-soft); margin-top: 5px; }

.about-maestros { max-width: var(--max); margin: 0 auto; padding: 30px 32px 110px; }
.about-maestro-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.about-maestro-media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(165deg,#1d1813,#0c0a08); filter: grayscale(.3); transition: filter .3s; }
.about-maestro-media[data-loaded] { background-size: cover; background-position: center top; }
.about-maestro:hover .about-maestro-media { filter: grayscale(0); }
.about-maestro-mono { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); font-weight: 300; font-style: italic; font-size: 70px; color: var(--accent); opacity: .26; }
.about-maestro-name { font-weight: 700; font-size: 14.5px; margin-top: 12px; }
.about-maestro-city { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }

@media (max-width: 1000px) {
  .about-craft { grid-template-columns: 1fr; gap: 36px; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-maestro-row { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 760px) {
  .about-hero, .about-vim-inner, .about-craft, .about-maestros { padding-left: 20px; padding-right: 20px; }
  .about-maestro-row { grid-template-columns: repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════
   BLACK & WHITE 모드 — 골드 포인트 제거, 전면 모노크롬 (최종 override)
   ═══════════════════════════════════════════════════════════ */
:root {
  --gold: #cfc8ba;          /* 액센트 → 뉴트럴 그레이 */
  --gold-bright: #ffffff;
}
/* 사진·영상은 컬러 유지 (UI 팔레트만 모노크롬) */
/* 액센트 틴트 → 뉴트럴 (인라인 --accent로 남는 색 지점 중화) */
.ccard:hover, .dcard:hover, .ne-thumb:hover, .pcard:hover, .disc-card:hover { border-color: rgba(244,239,230,.42) !important; }
.rgrid-lg .rcard { border-top-color: rgba(244,239,230,.5); }
.ne-main:not([data-loaded]) { background: linear-gradient(150deg,#1a1714,#0e0c0a 72%); }  /* 이미지 로드 전만 뉴트럴 */
.ne-main-glow { background: radial-gradient(circle, rgba(244,239,230,.16), transparent 65%) !important; }
.disc-mono, .ne-thumb-mono, .pcard-mono, .hero-monogram, .ccard-mono, .dcard-mono,
.cd-hero-mono, .cd-tutor-mono, .dd-hero-mono, .about-maestro-mono { color: rgba(244,239,230,.5) !important; }
/* 버튼: 화이트 (블랙 텍스트) */
.btn-gold, .pcard-btn { background: var(--ink); color: #15120f; }
.btn-gold:hover, .pcard-btn:hover { background: #fff; box-shadow: 0 12px 30px -12px rgba(244,239,230,.5); }
/* 배지 그레이스케일 */
.badge-모집중 { background: rgba(225,220,210,.92); color: #15120f; }
.badge-모집임박 { background: #f4efe6; color: #15120f; }
.badge-마감 { background: rgba(118,112,104,.85); color: #fff; }
.pcard-sale { background: #f4efe6; color: #15120f; }
.status-품절 { background: rgba(118,112,104,.85); }
.status-예약 { background: rgba(180,176,168,.92); color: #15120f; }
.ne-tag { background: #f4efe6; color: #15120f; }

/* ── 로고 mmd. (소문자·볼드·타이트 자간) + 본문 줄바꿈 보정 ── */
.brand-mark { font-weight: 800; letter-spacing: -.04em; text-transform: lowercase; font-size: 27px; }
.footer-mark { font-weight: 800; letter-spacing: -.04em; text-transform: lowercase; }
/* 한글 본문 단어 중간 끊김 방지 (오리지널 → 오리지/널 방지) */
.list-lead, .about-lead, .ne-main-sub, .hero-card-desc, .pcard-summary, .cd-lead { word-break: keep-all; }

/* ── 언어 드롭다운 ───────────────────────────── */
.nav-lang { position: relative; }
.nav-lang-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 12px; font-weight: 500; padding: 7px 12px; cursor: pointer; transition: all .2s; }
.nav-lang-btn:hover { border-color: var(--gold); color: var(--ink); }
.nav-lang-chev { transition: transform .2s; }
.nav-lang.open .nav-lang-chev { transform: rotate(180deg); }
.nav-lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 140px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px; list-style: none; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; box-shadow: 0 18px 40px -20px #000; z-index: 60; }
.nav-lang.open .nav-lang-menu { opacity: 1; visibility: visible; transform: none; }
.nav-lang-menu a { display: block; font-size: 13px; color: var(--ink-soft); padding: 9px 14px; border-radius: 4px; transition: background .15s, color .15s; }
.nav-lang-menu a:hover { background: rgba(244,239,230,.06); color: var(--ink); }
.nav-lang-menu a.on { color: var(--ink); background: rgba(244,239,230,.05); }
.nav-lang-menu a.on::after { content: "✓"; float: right; color: var(--gold); }
@media (max-width: 760px) { .nav-lang-btn span { display: none; } .nav-lang-btn { padding: 8px; } }

/* ═══════════════════════════════════════════════════════════
   VOLT.X CINEMATIC REFINE (2026-06-23) — 재스킨
   Volt.X(아임웹) 룩앤필 차용: 차가운 딥블랙 · 볼드 에디토리얼 · 시네마틱 분할 히어로
   원칙 유지: B&W 크롬 / 미디어는 컬러 / Pretendard 고딕 / 클래스명·JS 의존 보존
   ═══════════════════════════════════════════════════════════ */

/* ① 팔레트 — 따뜻한 세피아 → 차갑고 깊은 블랙 + 깨끗한 화이트 */
:root {
  --bg: #08080a; --bg-2: #0d0d11; --panel: #111117;
  --ink: #f5f4f1; --ink-soft: #a7a5a1; --ink-faint: #8c8a85; /* AA 대비 유지(중성) */
  --line: rgba(245,244,241,.13); --line-2: rgba(245,244,241,.06);
  --gold: #dcd8d1; --gold-bright: #ffffff; --accent: #dcd8d1;
}
::selection { background: #f5f4f1; color: #08080a; }

/* ② 미디어 — 풀컬러 시네마틱(컬러포워드). 인물만 hover 전 미세 데세추 */
.dcard-media, .disc-media, .dd-hero-media, .about-maestro-media { filter: grayscale(.05) contrast(1.05); }
.dcard:hover .dcard-media, .disc-card:hover .disc-media, .about-maestro:hover .about-maestro-media { filter: grayscale(0) contrast(1.07); }

/* ③ 따뜻한 리터럴 그라디언트 → 중성 딥그레이 */
.banner { background: linear-gradient(100deg, #121218, #0a0a0c); }
.cta { background: radial-gradient(80% 130% at 50% 0%, #141419, var(--bg) 70%); }
.list-hero { background: radial-gradient(90% 140% at 80% 0%, #141419, var(--bg) 65%); }
.about-hero-media { background: linear-gradient(160deg, #131319, #08080a); }
.about-craft-media { background: linear-gradient(155deg, #16161c, #0c0c10); }
.about-vim { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.ccard-media, .ne-thumb-media, .pcard-media, .cd-tutor-media, .cd-hero-media { background: linear-gradient(155deg, #16161c, #0b0b0e); }
.dcard-media, .disc-media, .dd-hero-media { background: linear-gradient(165deg, #17171d, #0a0a0d); }
.ne-main-veil { background: linear-gradient(120deg, rgba(6,6,9,.84) 0%, rgba(6,6,9,.45) 55%, rgba(6,6,9,.72) 100%); }
.disc-veil { background: linear-gradient(to top, rgba(6,6,9,.93) 6%, transparent 52%); }

/* ④ 시네마틱 분할 히어로 (Volt.X) — 좌측 딥블랙 패널 + 우측 영상 노출 */
.hero { height: 92vh; min-height: 640px; }
.hero-video { transform: scale(1.03); }
.hero-video-wrap .hero-vignette {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(8,8,10,.25) 28%, transparent 50%),
    linear-gradient(to right, rgba(6,6,9,.94) 0%, rgba(6,6,9,.72) 26%, rgba(6,6,9,.18) 50%, transparent 68%),
    radial-gradient(75% 110% at 0% 55%, rgba(6,6,9,.5), transparent 60%);
}
/* 카드 박스 제거 → 텍스트가 어두운 좌측에 직접 얹힘 (에디토리얼).
   ※ 메인은 생태계 슬로건(좌상단). 추천 클래스는 좌하단 보조 모듈로 축소. */
.hero-card {
  background: transparent; backdrop-filter: none; border: 0; border-radius: 0; padding: 0;
  bottom: 72px; max-width: 540px;
  left: max(40px, calc((100% - var(--max)) / 2 + 32px));
}
.hero-card-label { display: flex; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: .3em; color: var(--ink-soft); }
.hero-card-label::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.hero-card-title { font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.16; letter-spacing: -.02em; margin: 12px 0 9px; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero-card-desc { font-size: 14px; color: var(--ink-soft); max-width: 430px; }
.hero-card-by { font-size: 12px; letter-spacing: .05em; color: var(--ink-faint); margin-top: 14px; }
.hero-card-btn {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 11px;
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 7px;
  transition: gap .25s, color .2s;
}
.hero-card-btn::before { content: "▷"; font-size: 10px; color: var(--gold); }
.hero-card-btn:hover { gap: 16px; color: var(--ink); }
.hero-count { letter-spacing: .2em; }
.hero-arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ⑤ 볼드 에디토리얼 타이포 */
.sec-title, .list-title, .about-h1, .about-vim-h, .cta-h, .ne-main-title, .disc-name, .dd-name, .hero-card-title { letter-spacing: -.034em; }
.sec-head { padding-bottom: 30px; }

/* ⑥ nav / 카테고리 / 인터랙션 — 중성 화이트로 또렷하게 */
.brand-sub { color: var(--ink-faint); letter-spacing: .42em; }
.nav-cta:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.nav-links a.active { color: var(--ink); }
.nav-links a::after, .nav-links a.active::after { background: var(--ink); }
.cat:hover { background: rgba(245,244,241,.045); }
.cat:hover .cat-arrow { color: var(--ink); }
.more-btn:hover { background: var(--ink); color: var(--bg); }

/* ⑦ 모바일 — 히어로 카드 규칙 재보존 (위 데스크탑 오버라이드가 모바일에 새지 않게) */
@media (max-width: 760px) {
  .hero { height: 80vh; }
  .hero-card { left: 20px; right: 20px; bottom: 84px; max-width: none; padding: 0; }
  .hero-card-title { font-size: clamp(32px, 9vw, 46px); }
}