/* (주)유니크르 — 라이트 럭셔리
 * 웜 아이보리 + 샴페인 골드 / 세리프 디스플레이 + 절제된 여백
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  --ivory: #faf7f1;
  --ivory-2: #f3eee4;
  --ivory-3: #ece5d7;
  --line: #ded5c4;
  --line-soft: #eae3d6;
  --ink: #211d18;
  --ink-2: #4a423a;
  --ink-mute: #8c8177;
  --gold: #b08d4f;
  --gold-lt: #d4b878;
  --gold-dp: #8a6d38;
  --maxw: 1220px;
  --ease: cubic-bezier(.25,.6,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-b-sans);
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }

.serif {
  font-family: var(--font-b-display);
}
.myeongjo { font-family: var(--font-b-serif); }

/* ---------- 헤더 ---------- */
header.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,241,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 30px;
  height: 78px; display: flex; align-items: center; justify-content: space-between;
}
.brandmark { display: flex; flex-direction: column; gap: 2px; }
.brandmark .ko {
  font-family: var(--font-b-display); font-weight: 500;
  font-size: 25px; letter-spacing: .16em; color: var(--ink); line-height: 1;
}
.brandmark .sub {
  font-size: 9px; letter-spacing: .3em; color: var(--ink-mute); text-transform: uppercase;
}
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-size: 13px; letter-spacing: .09em; color: var(--ink-2);
  position: relative; padding: 5px 0; font-weight: 400;
  transition: color .3s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 50%; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .35s var(--ease), left .35s var(--ease);
}
.nav-links a:hover { color: var(--gold-dp); }
.nav-links a:hover::after { width: 100%; left: 0; }

/* ---------- 히어로 ---------- */
.hero {
  position: relative; padding: 132px 0 108px; text-align: center; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 48% at 50% 0%, rgba(212,184,120,.2), transparent 70%),
    radial-gradient(ellipse 40% 30% at 82% 78%, rgba(176,141,79,.09), transparent 70%);
  pointer-events: none;
}
.hero-rule {
  width: 1px; height: 62px; background: linear-gradient(var(--gold), transparent);
  margin: 0 auto 30px; opacity: 0; animation: fade .9s var(--ease) .05s forwards;
}
.hero-eyebrow {
  font-size: 10.5px; letter-spacing: .42em; color: var(--gold-dp);
  text-transform: uppercase; margin-bottom: 28px; position: relative;
  opacity: 0; animation: fadeUp .9s var(--ease) .15s forwards;
}
.hero h1 {
  font-family: var(--font-b-display); font-weight: 300;
  font-size: clamp(46px, 8vw, 116px); line-height: 1.02;
  letter-spacing: .02em; margin: 0; position: relative;
  opacity: 0; animation: fadeUp 1s var(--ease) .28s forwards;
}
.hero h1 em {
  font-style: italic; color: var(--gold-dp); font-weight: 400;
}
.hero-ko {
  font-family: var(--font-b-serif);
  font-size: clamp(15px, 1.75vw, 19px); color: var(--ink-2);
  max-width: 560px; margin: 36px auto 0; line-height: 2.05; position: relative;
  opacity: 0; animation: fadeUp 1s var(--ease) .44s forwards;
}
.hero-meta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
  margin-top: 66px; position: relative;
  opacity: 0; animation: fadeUp 1s var(--ease) .58s forwards;
}
.hero-meta .cell { padding: 0 38px; border-left: 1px solid var(--line); }
.hero-meta .cell:first-child { border-left: none; }
.hero-meta .cell .k {
  font-size: 9.5px; letter-spacing: .26em; color: var(--ink-mute);
  text-transform: uppercase; margin-bottom: 9px;
}
.hero-meta .cell .v {
  font-family: var(--font-b-display); font-size: 20px;
  color: var(--ink); font-weight: 500; letter-spacing: .02em;
}

@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
.hero-eyebrow, .hero h1, .hero-ko, .hero-meta { transform: translateY(18px); }

/* ---------- 섹션 ---------- */
section { padding: 108px 0; }
.sec-head { margin-bottom: 60px; text-align: center; }
.sec-head.left { text-align: left; }
.sec-num {
  font-size: 10px; letter-spacing: .34em; color: var(--gold-dp);
  text-transform: uppercase; margin-bottom: 18px;
}
.sec-head h2 {
  font-family: var(--font-b-display); font-weight: 300;
  font-size: clamp(30px, 4.6vw, 56px); letter-spacing: .02em;
  margin: 0 0 18px; line-height: 1.18;
}
.sec-head h2 em { font-style: italic; color: var(--gold-dp); }
.sec-head p {
  color: var(--ink-2); max-width: 600px; margin: 0 auto; font-size: 14.5px;
}
.sec-head.left p { margin-left: 0; }

/* ---------- 소개 ---------- */
.about { background: var(--ivory-2); border-block: 1px solid var(--line-soft); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: start; }
.about-lead {
  font-family: var(--font-b-serif);
  font-size: clamp(19px, 2.4vw, 28px); line-height: 1.85;
  letter-spacing: -.01em; margin: 0; color: var(--ink);
}
.about-lead b { font-weight: 800; color: var(--gold-dp); }
.about-body p { color: var(--ink-2); margin: 0 0 20px; font-size: 15px; }
.about-body p:last-child { margin-bottom: 0; }

.facts { margin-top: 46px; border-top: 1px solid var(--line); }
.fact {
  display: grid; grid-template-columns: 132px 1fr; gap: 22px;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft); align-items: start;
}
.fact dt {
  font-size: 11px; letter-spacing: .18em; color: var(--ink-mute);
  text-transform: uppercase; padding-top: 3px;
}
.fact dd { margin: 0; font-size: 14.5px; color: var(--ink); font-weight: 400; }

/* ---------- 브랜드 그리드 ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bcard {
  background: #fff; border: 1px solid var(--line-soft); padding: 44px 34px 34px;
  display: flex; flex-direction: column; min-height: 336px; position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  overflow: hidden;
}
.bcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
  transform: scaleX(0); transition: transform .5s var(--ease);
}
.bcard::after {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, var(--ac), transparent 68%);
  opacity: 0; transition: opacity .55s var(--ease);
}
.bcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px -18px rgba(74,66,58,.2);
  border-color: var(--line);
}
.bcard:hover::before { transform: scaleX(1); }
.bcard:hover::after { opacity: .13; }
.bcard-cat {
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 24px; position: relative;
}
.wordmark {
  font-family: var(--font-b-serif); font-weight: 700;
  font-size: 26px; line-height: 1.28; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: 7px; position: relative;
  transition: color .35s var(--ease);
}
.bcard:hover .wordmark { color: var(--gold-dp); }
.wordmark-en {
  font-family: var(--font-b-display); font-size: 13px;
  letter-spacing: .17em; color: var(--ink-mute);
  text-transform: uppercase; margin-bottom: 22px; position: relative;
}
.bcard-desc {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.85;
  flex: 1; position: relative; margin: 0 0 24px;
}
.bcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--line-soft); position: relative;
}
.bcard-band {
  font-family: var(--font-b-display); font-size: 16px;
  color: var(--ink); font-weight: 500; letter-spacing: .01em;
}
.bcard-go {
  font-size: 10px; letter-spacing: .2em; color: var(--gold-dp);
  text-transform: uppercase; display: flex; align-items: center; gap: 8px;
}
.bcard-go svg { transition: transform .35s var(--ease); }
.bcard:hover .bcard-go svg { transform: translateX(5px); }

/* ---------- 브랜드 상세 ---------- */
.detail-hero {
  padding: 82px 0 64px; border-bottom: 1px solid var(--line-soft);
  position: relative; overflow: hidden; background: var(--ivory-2);
}
.detail-hero::before {
  content: ""; position: absolute; top: -180px; right: -120px;
  width: 580px; height: 580px; border-radius: 50%;
  background: radial-gradient(circle, var(--ac), transparent 66%);
  opacity: .16;
}
.crumb { font-size: 11.5px; color: var(--ink-mute); margin-bottom: 34px; position: relative; letter-spacing: .06em; }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--gold-dp); }
.wordmark-lg {
  font-family: var(--font-b-serif); font-weight: 800;
  font-size: clamp(34px, 5.4vw, 68px); letter-spacing: -.015em;
  line-height: 1.14; margin: 0 0 12px; position: relative;
}
.en-lg {
  font-family: var(--font-b-display); font-size: 16px;
  letter-spacing: .24em; color: var(--ink-mute);
  text-transform: uppercase; margin-bottom: 32px; position: relative;
}
.moods { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; position: relative; }
.mood {
  font-size: 11.5px; letter-spacing: .07em; padding: 8px 17px;
  border: 1px solid var(--line); border-radius: 100px;
  color: var(--ink-2); background: rgba(255,255,255,.6);
}

/* 브랜드 소개 고지 */
.disclosure {
  background: #fff; border: 1px solid var(--line-soft);
  border-left: 2px solid var(--ac, var(--gold));
  padding: 28px 32px; margin: 46px 0 0; position: relative;
}
.disclosure h3 {
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-dp); margin: 0 0 14px; font-weight: 500;
}
.disclosure p {
  margin: 0 0 12px; font-size: 14px; line-height: 1.9; color: var(--ink-2);
}
.disclosure p:last-child { margin-bottom: 0; }
.disclosure b { color: var(--ink); font-weight: 500; }

/* 상품 목록 */
.items { margin-top: 8px; }
.item-row {
  display: grid; grid-template-columns: 1fr 100px 220px 170px;
  gap: 26px; padding: 24px 0; border-bottom: 1px solid var(--line-soft);
  align-items: center; transition: background .35s var(--ease);
}
.item-row:hover { background: var(--ivory-2); }
.item-head {
  border-bottom: 1px solid var(--line); padding-bottom: 14px;
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-mute);
}
.item-head:hover { background: none; }
.item-name {
  font-family: var(--font-b-serif); font-size: 16px;
  font-weight: 400; color: var(--ink);
}
.item-cat { font-size: 12.5px; color: var(--ink-mute); }
.item-mat { font-size: 13px; color: var(--ink-2); }
.item-price {
  font-family: var(--font-b-display); font-size: 21px; font-weight: 500;
  text-align: right; color: var(--ink); letter-spacing: .01em;
}
.item-price .won {
  font-family: var(--font-b-sans); font-size: 12px;
  font-weight: 300; color: var(--ink-mute); margin-left: 3px;
}
.item-price.ask {
  font-family: var(--font-b-sans); font-size: 12.5px;
  font-weight: 400; color: var(--gold-dp);
}

.price-note {
  margin-top: 30px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.9;
}

/* ---------- 매장 안내 ---------- */
.visit { background: var(--ivory-2); border-block: 1px solid var(--line-soft); }
.visit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 68px; }
.visit-cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 34px;
  background: var(--ink); color: var(--ivory); padding: 16px 34px;
  font-size: 14.5px; letter-spacing: .03em; font-weight: 400;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.visit-cta:hover { background: var(--gold-dp); transform: translateY(-2px); }

/* ---------- 푸터 ---------- */
footer {
  background: var(--ivory); border-top: 1px solid var(--line);
  padding: 68px 0 44px; font-size: 13px;
}
.foot-top {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px;
  padding-bottom: 36px; border-bottom: 1px solid var(--line-soft);
}
.foot-logo {
  font-family: var(--font-b-display); font-size: 24px;
  letter-spacing: .16em; margin-bottom: 18px; font-weight: 500;
}
.biz {
  display: grid; gap: 9px; color: var(--ink-mute);
  font-size: 12.5px; line-height: 1.65;
}
.biz .row { display: flex; gap: 10px; }
.biz .row .k { flex-shrink: 0; min-width: 92px; }
.biz .row .v { color: var(--ink-2); }
.foot-bottom {
  padding-top: 28px; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; color: var(--ink-mute); font-size: 12px;
}
.foot-note { color: var(--ink-mute); font-size: 11.5px; line-height: 1.9; margin-top: 0; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .visit-grid { grid-template-columns: 1fr; gap: 46px; }
  .item-row { grid-template-columns: 1fr 92px 140px; }
  .item-row .item-mat, .item-head .item-mat { display: none; }
}
@media (max-width: 720px) {
  .wrap, .nav-in { padding: 0 18px; }
  section { padding: 68px 0; }
  .hero { padding: 84px 0 68px; }
  .nav-in { height: 64px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 12px; }
  .brand-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-meta .cell { padding: 10px 22px; }
  .item-row { grid-template-columns: 1fr auto; gap: 5px 14px; padding: 20px 0; }
  .item-row .item-cat { grid-column: 1; }
  .item-row .item-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .item-head { display: none; }
  .foot-top { grid-template-columns: 1fr; gap: 34px; }
  .fact { grid-template-columns: 100px 1fr; gap: 14px; }
}


/* ===== 인터랙션 이펙트 (agy) ===== */
/* ==========================================================================
   [B] JEWELRY SITE — LIGHT LUXURY INTERACTION STYLES
   Accent: #b08d4f | Background: #faf7f1 | Text: #211d18
   ========================================================================== */

/* 1. Scroll Reveal (Soft Fade & Micro Scale) */
.sec-head,
.bcard,
.wordmark,
.item-row {
  opacity: 0;
  will-change: transform, opacity, filter;
}

html.fx-on .sec-head:not(.is-revealed),
html.fx-on .bcard:not(.is-revealed),
html.fx-on .wordmark:not(.is-revealed) {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(4px);
}

.sec-head.is-revealed,
.bcard.is-revealed,
.wordmark.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: 
    opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2. Brand Card Hover (Golden Metallic Sheen) */
.bcard {
  position: relative;
  overflow: hidden;
  transition: 
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.6s ease;
}

.bcard::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    55deg,
    transparent 42%,
    rgba(255, 255, 255, 0.5) 48%,
    rgba(176, 141, 79, 0.45) 50%,
    rgba(255, 245, 220, 0.75) 52%,
    transparent 58%
  );
  transform: rotate(20deg) translateY(-80%);
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .bcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -12px rgba(176, 141, 79, 0.18);
    border-color: rgba(176, 141, 79, 0.35);
  }

  .bcard:hover::before {
    transform: rotate(20deg) translateY(80%);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  }
}

/* 3. Hero Title Staggered Settling Reveal */
.hero h1 .char-unit {
  display: inline-block;
  opacity: 0;
  letter-spacing: 0.18em;
  transform: translateY(12px);
  filter: blur(6px);
  transition: 
    opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--char-index, 0) * 0.045s);
}

.hero h1.is-loaded .char-unit {
  opacity: 1;
  letter-spacing: normal;
  transform: translateY(0);
  filter: blur(0);
}

/* 4. Product Table Rows & Elegant Price Highlight */
.item-row {
  transform: translateY(18px);
  position: relative;
  transition: 
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease;
  transition-delay: calc(var(--row-index, 0) * 0.08s);
}

.item-row.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.item-price {
  display: inline-block;
  position: relative;
  transition: 
    color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.item-price::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #b08d4f, rgba(176, 141, 79, 0.2));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .item-row:hover {
    background-color: rgba(176, 141, 79, 0.035);
  }

  .item-row:hover .item-price {
    color: #b08d4f;
    letter-spacing: 0.04em;
    text-shadow: 0 0 10px rgba(176, 141, 79, 0.3);
  }

  .item-row:hover .item-price::after {
    width: 100%;
  }
}

/* 5. Cursor Proximity Radial Glow on Cards */
@media (hover: hover) and (pointer: fine) {
  .bcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(176, 141, 79, 0.14),
      transparent 75%
    );
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 1;
  }

  .bcard:hover::after {
    opacity: 1;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .sec-head,
  .bcard,
  .wordmark,
  .item-row,
  .hero h1 .char-unit {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: normal !important;
    transition: none !important;
  }

  .bcard::before,
  .bcard::after {
    display: none !important;
  }
}



/* ===== 이미지 레이어 (주얼리) ===== */
.hero {
  background-image:
    linear-gradient(180deg, rgba(250,247,241,.93) 0%, rgba(250,247,241,.86) 50%, rgba(250,247,241,.97) 100%),
    url('img/hero.jpg');
  background-size: cover;
  background-position: center;
}
.about { position: relative; }
.about::before {
  content: ""; position: absolute; inset: 0;
  background: url('img/about.jpg') center/cover;
  opacity: .045; pointer-events: none;
}
.about > .wrap { position: relative; }
.visit {
  background-image:
    linear-gradient(90deg, rgba(243,238,228,.97) 0%, rgba(243,238,228,.9) 52%, rgba(243,238,228,.66) 100%),
    url('img/store.jpg');
  background-size: cover;
  background-position: center;
}
@media (max-width: 720px) {
  .visit { background-image: linear-gradient(180deg, rgba(243,238,228,.95), rgba(243,238,228,.97)), url('img/store.jpg'); }
}
.about::before {
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
}


/* ===== 리빌 안전장치 =====
 * fx.js가 <html>에 .fx-on을 달았을 때만 초기 은닉을 적용한다.
 * JS 실패·차단·크롤러 환경에서는 콘텐츠가 그대로 보이도록.
 */
.sec-head:not(.is-revealed),
.bcard:not(.is-revealed),
.wordmark:not(.is-revealed),
.item-row:not(.is-revealed) {
  opacity: 1;
  transform: none;
  clip-path: none;
}
html.fx-on .sec-head:not(.is-revealed),
html.fx-on .bcard:not(.is-revealed),
html.fx-on .wordmark:not(.is-revealed) {
  opacity: 0;
}
html.fx-on .sec-head:not(.is-revealed),
html.fx-on .bcard:not(.is-revealed) { transform: translateY(40px); }
html.fx-on .wordmark:not(.is-revealed) { transform: translateX(-30px); }

/* 안전 타이머: 3초 안에 리빌 안 되면 무조건 보이게 */
html.fx-timeout .sec-head,
html.fx-timeout .bcard,
html.fx-timeout .wordmark,
html.fx-timeout .item-row {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}


/* ===== 상품 갤러리 (주얼리) ===== */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px; margin-top: 10px;
}
.gitem {
  background: #fff; border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.gitem:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(74,66,58,.22);
  border-color: var(--line);
}
.gthumb {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(140deg, var(--ivory-2), var(--ivory-3));
}
.gthumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.gitem:hover .gthumb img { transform: scale(1.045); }
.gthumb.noimg::after {
  content: attr(data-cat);
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-b-display); font-size: 15px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute);
}
.gcat {
  position: absolute; top: 13px; left: 13px; z-index: 2;
  background: rgba(255,255,255,.88); backdrop-filter: blur(6px);
  padding: 5px 12px; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2);
}
.gbody { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.gname {
  font-family: var(--font-b-serif); font-size: 15px;
  color: var(--ink); line-height: 1.5; margin-bottom: 8px; word-break: keep-all;
}
.gmat {
  font-size: 12px; color: var(--ink-mute); line-height: 1.65;
  margin-bottom: 15px; flex: 1; word-break: keep-all;
}
.gprice {
  font-family: var(--font-b-display); font-size: 21px; font-weight: 500;
  color: var(--ink); letter-spacing: .01em;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.gprice .won {
  font-family: var(--font-b-sans); font-size: 11.5px;
  font-weight: 300; color: var(--ink-mute); margin-left: 3px;
}
.gprice.ask {
  font-family: var(--font-b-sans); font-size: 12.5px;
  font-weight: 400; color: var(--gold-dp);
}

@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }


/* ===== 브랜드 역사 블록 (주얼리) ===== */
.history {
  margin: 48px 0 0; position: relative;
  padding: 32px 36px; background: #fff;
  border: 1px solid var(--line-soft); border-left: 2px solid var(--ac, var(--gold));
}
.history h3 {
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-dp); margin: 0 0 16px; font-weight: 500;
}
.history p {
  margin: 0; font-family: var(--font-b-serif);
  font-size: 14.5px; line-height: 2; color: var(--ink-2);
  word-break: keep-all;
}
.history-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.hmetas { display: flex; gap: 28px; flex-wrap: wrap; }
.hmeta { display: flex; align-items: baseline; gap: 9px; }
.hmeta .k {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.hmeta .v {
  font-family: var(--font-b-display); font-size: 17px;
  color: var(--ink); font-weight: 500;
}
.official-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; letter-spacing: .04em; color: var(--gold-dp);
  padding: 9px 17px; border: 1px solid var(--line);
  background: var(--ivory);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.official-link:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.official-link svg { flex-shrink: 0; }

/* ===== 고지 밴드 (푸터 위) ===== */
.notice-band {
  padding: 28px 0 !important;
  background: var(--ivory-2); border-top: 1px solid var(--line-soft);
}
.notice-band p {
  margin: 0; font-size: 11.5px; line-height: 1.9;
  color: var(--ink-mute); max-width: 900px; word-break: keep-all;
}
.notice-band b { color: var(--ink-2); font-weight: 500; }

@media (max-width: 720px) {
  .history { padding: 26px 22px; }
  .history-foot { flex-direction: column; align-items: flex-start; gap: 15px; }
}


/* ===== Ox: 갤러리 보강 + 브랜드별 커스터마이즈 ===== */

/* ---------- 공통 갤러리 보강 ---------- */
.gallery{
  display:grid;
  /* 상품 6개가 3+3으로 떨어지도록 3열 고정 (auto-fill은 넓은 화면서 4열이 됨) */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,36px);
}
.gitem{
  position:relative;
  background:linear-gradient(180deg,#fffdf9, #f7f2e9);
  border:1px solid rgba(176,141,79,.14);
  border-radius:2px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 10px 24px -18px rgba(33,29,24,.25);
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             box-shadow .5s ease,
             border-color .5s ease;
}
.gthumb{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#fff;
}
.gthumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1), filter .6s ease;
}
/* 밝은 배경에서 상품 돋보이게: 미묘한 비네트 + 하단 그림자 */
.gthumb::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(33,29,24,.05) 100%),
    radial-gradient(70% 40% at 50% 92%, rgba(33,29,24,.08), transparent 60%);
  pointer-events:none;
}
/* 광택 스윕 (전역 sheen과 별개의 썸네일 전용) */
.gthumb::before{
  content:"";
  position:absolute;top:-60%;left:-80%;
  width:55%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:rotate(12deg) translateX(-120%);
  pointer-events:none;
  z-index:1;
}
.gcat{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--font-b-sans);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#211d18;background:rgba(250,247,241,.85);
  border:1px solid rgba(176,141,79,.25);
  padding:3px 9px;border-radius:999px;
  backdrop-filter:blur(4px);
}
.gbody{padding:16px 18px 18px;}
.gname{
  font-family:var(--font-b-serif);font-weight:700;
  font-size:15.5px;line-height:1.45;letter-spacing:-.01em;color:#211d18;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gmat{
  font-family:var(--font-b-display);font-style:italic;
  font-size:13px;color:var(--ac,var(--b08d4f));margin-top:4px;color:var(--ac,#b08d4f);
}
.gprice{
  margin-top:10px;
  font-family:var(--font-b-sans);font-weight:500;
  font-size:13.5px;letter-spacing:.04em;color:#211d18;
}
.gprice::before{content:"₩ ";color:var(--ac,#b08d4f);font-weight:400;}
.gitem:hover,.gitem:focus-within{
  transform:translateY(-5px);
  box-shadow:0 24px 44px -26px rgba(33,29,24,.35);
  border-color:color-mix(in srgb,var(--ac,#b08d4f) 40%,transparent);
}
.gitem:hover .gthumb img{transform:scale(1.06);}
.gitem:hover .gthumb::before{transition:transform .8s cubic-bezier(.22,1,.36,1);transform:rotate(12deg) translateX(420%);}

@media (prefers-reduced-motion:reduce){
  .gitem,.gthumb img,.gthumb::before{transition:none!important;}
  .gitem:hover{transform:none;}
  .gitem:hover .gthumb img{transform:none;}
}

/* ---------- 브랜드별 CSS ---------- */

/* ===== 1. 스톤헨지 : 미니멀 실버 ===== */
main[data-brand="stonehenge"]{
  --ac:#8a95a3;
  background:linear-gradient(180deg,#f7f8fa 0%,#faf7f1 42%,#faf7f1 100%);
}
main[data-brand="stonehenge"] .detail-hero h1.wordmark-lg{
  letter-spacing:.32em;font-weight:400;font-style:normal;
}
main[data-brand="stonehenge"] .moods .mood{
  background:#fff;border:1px solid #cfd6de;border-radius:0;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);
  padding:5px 18px;color:#5a6470;
}
main[data-brand="stonehenge"] .gallery .gthumb{
  background:linear-gradient(160deg,#ffffff,#eef1f4);
}
main[data-brand="stonehenge"] .gitem{
  border-radius:0;border-color:#dde2e8;
}
main[data-brand="stonehenge"] .gitem:hover .gthumb img{filter:saturate(.85) brightness(1.05);}
/* 인터랙션: 실버 라인이 가로질러 스캔 */
main[data-brand="stonehenge"] .gthumb .scan{
  position:absolute;left:0;right:0;height:1px;top:0;
  background:linear-gradient(90deg,transparent,rgba(138,149,163,.9),transparent);
  opacity:0;pointer-events:none;
}
main[data-brand="stonehenge"] .gitem:hover .scan{
  opacity:1;animation:silver-scan 1.4s ease-in-out infinite;
}
@keyframes silver-scan{
  0%{top:8%;}50%{top:90%;}100%{top:8%;}
}

/* ===== 2. 디디에두보 : 프렌치 로맨틱 ===== */
main[data-brand="didierdubot"]{
  --ac:#c2a3ad;
  background:radial-gradient(80% 50% at 50% 0%,#fbf3f4 0%,transparent 70%),#faf7f1;
}
main[data-brand="didierdubot"] .detail-hero h1.wordmark-lg{font-style:italic;letter-spacing:.06em;}
main[data-brand="didierdubot"] .moods .mood{
  background:#fdf8f8;border:1px solid #ecd9dd;border-radius:2px 12px 2px 12px;color:#a07f89;
}
main[data-brand="didierdubot"] .gitem{
  border-radius:2px 14px 2px 14px;border-color:#eedfe2;
  background:linear-gradient(180deg,#fffcfc,#faf1f2);
}
/* 인터랙션: 데미파인 랩 — 리본처럼 감기는 테두리 드로우 */
main[data-brand="didierdubot"] .gitem::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid #c2a3ad;
  border-radius:2px 10px 2px 10px;
  mask:linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(90deg,#000 50%,transparent 0) top/200% 1px no-repeat,
    linear-gradient(-90deg,#000 50%,transparent 0) bottom/200% 1px no-repeat,
    linear-gradient(0deg,#000 50%,transparent 0) left/1px 200% no-repeat,
    linear-gradient(180deg,#000 50%,transparent 0) right/1px 200% no-repeat;
  transition:-webkit-mask-position .9s ease, mask-position .9s ease;
  -webkit-mask-composite:xor;mask-composite:exclude;
}
main[data-brand="didierdubot"] .gitem:hover::after{-webkit-mask-position:center;mask-position:center;}

/* ===== 3. 제이에스티나 : 티아라 시그니처 ===== */
main[data-brand="jestina"]{
  --ac:#b9879a;
  background:linear-gradient(180deg,#fbf5f6 0%,#faf7f1 55%);
}
main[data-brand="jestina"] .detail-hero{position:relative;}
main[data-brand="jestina"] .detail-hero::before{
  content:"✦";position:absolute;top:14%;right:12%;
  font-size:clamp(48px,7vw,88px);color:rgba(185,135,154,.18);
  animation:tiara-glow 4s ease-in-out infinite;
}
@keyframes tiara-glow{
  0%,100%{opacity:.35;text-shadow:0 0 0 rgba(185,135,154,0);}
  50%{opacity:.9;text-shadow:0 0 22px rgba(185,135,154,.45);}
}
main[data-brand="jestina"] .moods .mood{
  border:1px solid #ecd2da;border-radius:999px;background:#fdf6f8;color:#a3717f;
}
main[data-brand="jestina"] .moods .mood:first-child{
  background:linear-gradient(120deg,#f7e3ea,#fdf6f8);border-color:#dcb4c1;
}
main[data-brand="jestina"] .gitem:hover{border-color:#dcb4c1;}
/* 인터랙션: 스파클 포인트가 카드 위를 순회 */
main[data-brand="jestina"] .spark{
  position:absolute;width:14px;height:14px;z-index:3;pointer-events:none;
  background:
    radial-gradient(circle,#fff 0 1.5px,rgba(185,135,154,.9) 2px,transparent 3px);
  opacity:0;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
main[data-brand="jestina"] .gitem:hover .spark{
  animation:spark-travel 2.2s ease-in-out infinite;
}
@keyframes spark-travel{
  0%{opacity:0;top:12%;left:8%;}15%{opacity:1;}45%{top:70%;left:82%;opacity:1;}
  55%{opacity:0;}56%{top:30%;left:60%;}75%{opacity:1;}95%{opacity:0;top:15%;left:30%;}
  100%{opacity:0;}
}

/* ===== 4. 로즈몽 : 앤틱 클래식 · 탄생석 ===== */
main[data-brand="rosemont"]{
  --ac:#7f9a86;
  background:
    repeating-linear-gradient(45deg,rgba(127,154,134,.03) 0 1px,transparent 1px 14px),
    linear-gradient(180deg,#f6f8f4,#faf7f1 60%);
}
main[data-brand="rosemont"] .detail-hero h1.wordmark-lg{letter-spacing:.14em;}
main[data-brand="rosemont"] .moods .mood{
  border:1px solid #ccd8cd;border-radius:3px;background:#f7faf6;color:#5f7a66;
  position:relative;padding-left:22px;
}
main[data-brand="rosemont"] .moods .mood::before{
  content:"";position:absolute;left:9px;top:50%;translate:0 -50%;
  width:7px;height:7px;border-radius:50%;
  background:conic-gradient(#c98a8a,#c9b28a,#8aa3c9,#9a86c0,#c98a8a);
  animation:birthstone-spin 8s linear infinite;
}
@keyframes birthstone-spin{to{--a:360deg;}}
@property --bs-hue{syntax:'<angle>';inherits:false;initial-value:0deg;}
main[data-brand="rosemont"] .moods .mood::before{
  background:hsl(var(--bs-hue) 38% 62%);
  animation:birthstone-hue 12s linear infinite;
}
@keyframes birthstone-hue{to{--bs-hue:360deg;}}
main[data-brand="rosemont"] .gitem{
  border-color:#dbe3da;background:linear-gradient(180deg,#fdfefd,#f4f7f2);
  box-shadow:inset 0 0 0 1px rgba(127,154,134,.06);
}
/* 인터랙션: 호버 시 탄생석 컬러 조명이 썸네일을 통과 */
main[data-brand="rosemont"] .gthumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,hsl(var(--bs-hue,140deg) 34% 60%) 0%,transparent 40%);
  mix-blend-mode:multiply;opacity:0;transition:opacity .5s ease;
}
main[data-brand="rosemont"] .gitem:hover .gthumb::after{opacity:.22;}

/* ===== 5. 미니골드 : 14K 데일리 골드 ===== */
main[data-brand="minigold"]{
  --ac:#c9a227;
  background:linear-gradient(180deg,#fbf6e8 0%,#faf7f1 46%);
}
main[data-brand="minigold"] .detail-hero h1.wordmark-lg{
  background:linear-gradient(105deg,#8f6d13,#c9a227 40%,#f3dfa0 50%,#c9a227 60%,#8f6d13);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gold-shift 6s ease-in-out infinite;
}
@keyframes gold-shift{
  0%,100%{background-position:0% 0;}
  50%{background-position:100% 0;}
}
main[data-brand="minigold"] .moods .mood{
  border:1px solid #e5d49a;border-radius:999px;background:#fdf9ec;color:#8a6d1a;
}
main[data-brand="minigold"] .gitem{border-color:#eadfae;background:linear-gradient(180deg,#fffdf4,#faf3dd);}
/* 인터랙션: 골드 프라이스에 반짝임 (CSS only) */
main[data-brand="minigold"] .gprice{
  background:linear-gradient(100deg,#7a5f0f 20%,#c9a227 40%,#ffe9a8 50%,#c9a227 60%,#7a5f0f 80%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position .8s ease;
}
main[data-brand="minigold"] .gitem:hover .gprice{animation:gold-price 1.2s ease forwards;}
@keyframes gold-price{to{background-position:-120% 0;}}

/* ===== 6. 골든듀 : 브라이덜 파인 ===== */
main[data-brand="goldendew"]{
  --ac:#9a8055;
  background:
    radial-gradient(60% 34% at 78% 6%,rgba(154,128,85,.09),transparent 70%),
    linear-gradient(180deg,#faf6ec,#faf7f1 52%);
}
main[data-brand="goldendew"] .detail-hero{border-bottom:double 3px #d9cbae;}
main[data-brand="goldendew"] .en-lg{font-style:italic;letter-spacing:.28em;}
main[data-brand="goldendew"] .moods .mood{
  border:1px solid #ddd2ba;border-radius:2px;background:#fdfaf1;color:#7d6844;
  text-transform:uppercase;font-size:11px;letter-spacing:.18em;
}
main[data-brand="goldendew"] .gitem{border-color:#e4dcc6;}
/* 인터랙션: 천천히 도는 다이아 하이라이트 (CSS only) */
main[data-brand="goldendew"] .gitem .halo{
  position:absolute;inset:-40%;pointer-events:none;z-index:1;
  background:conic-gradient(from 0deg,transparent 0 40%,rgba(255,255,255,.75) 50%,transparent 60% 100%);
  opacity:0;transition:opacity .6s ease;
  mix-blend-mode:soft-light;
}
main[data-brand="goldendew"] .gitem:hover .halo{opacity:1;animation:halo-rot 5s linear infinite;}
@keyframes halo-rot{to{transform:rotate(360deg);}}
main[data-brand="goldendew"] .gitem:hover .gthumb img{filter:brightness(1.04) contrast(1.02);}

/* ===== 7. 오에스티 : 실버925 로맨틱 ===== */
main[data-brand="ost"]{
  --ac:#A8B6C8;
  background:linear-gradient(165deg,#f5f7fb 0%,#faf7f1 48%);
}
main[data-brand="ost"] .detail-hero h1.wordmark-lg{font-style:italic;}
main[data-brand="ost"] .moods .mood{
  border:1px solid #ccd6e2;border-radius:999px;background:#f6f8fc;color:#6b7c94;
}
main[data-brand="ost"] .gitem{border-radius:10px;border-color:#dce3ee;background:linear-gradient(180deg,#fefeff,#f2f5fa);}
/* 인터랙션: 큐빅 프리즘 플래시 — 각도 따라 무지개 빛번짐 */
main[data-brand="ost"] .prism{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(120deg,
    rgba(255,150,150,.25),rgba(255,230,150,.2),rgba(150,255,190,.2),
    rgba(150,200,255,.25),rgba(210,160,255,.2));
  background-size:300% 300%;
  transition:opacity .5s ease;
  mix-blend-mode:screen;
}
main[data-brand="ost"] .gitem:hover .prism{opacity:.5;animation:prism-move 3s ease-in-out infinite alternate;}
@keyframes prism-move{
  from{background-position:0% 50%;}
  to{background-position:100% 50%;}
}

/* ===== 8. 클루 : 캐릭터 러블리 실버 ===== */
main[data-brand="clue"]{
  --ac:#B79AA2;
  background:radial-gradient(50% 30% at 20% 0%,rgba(183,154,162,.10),transparent 70%),#faf7f1;
}
main[data-brand="clue"] .detail-hero h1.wordmark-lg{letter-spacing:.1em;}
main[data-brand="clue"] .moods .mood{
  border:1.5px dashed #dcc6cc;border-radius:14px;background:#fbf4f6;color:#96717d;
}
main[data-brand="clue"] .gitem{border-radius:14px;border-color:#ecdde1;background:linear-gradient(180deg,#fffafb,#f9eff2);}
/* 인터랙션: 호버 시 살짝 기울며 통통 (CSS only) */
main[data-brand="clue"] .gitem:hover{animation:clue-bounce .55s cubic-bezier(.28,1.6,.4,1);}
@keyframes clue-bounce{
  0%{transform:translateY(0) rotate(0);}
  35%{transform:translateY(-8px) rotate(-1.2deg);}
  65%{transform:translateY(-2px) rotate(.8deg);}
  100%{transform:translateY(-4px) rotate(0);}
}
main[data-brand="clue"] .gcat{border-radius:999px 999px 999px 2px;}

/* ===== 9. 로이드 : 14K 데일리 ===== */
main[data-brand="lloyd"]{
  --ac:#C9A56A;
  background:linear-gradient(180deg,#faf4e7,#faf7f1 44%);
}
main[data-brand="lloyd"] .detail-hero h1.wordmark-lg{letter-spacing:.18em;font-weight:600;}
main[data-brand="lloyd"] .moods .mood{
  border:1px solid #e3cfab;border-radius:3px;background:#fcf7eb;color:#8a6c39;
}
main[data-brand="lloyd"] .gitem{border-radius:4px;border-color:#ead9b6;background:linear-gradient(180deg,#fffdf6,#f9f1de);}
/* 인터랙션: 코인 엣지 — 카드 하단 금테가 호버 시 점등 */
main[data-brand="lloyd"] .gitem{position:relative;}
main[data-brand="lloyd"] .gitem::after{
  content:"";position:absolute;left:10%;right:10%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#C9A56A,transparent);
  opacity:.25;transition:opacity .5s ease,left .5s ease,right .5s ease,height .5s ease;
}
main[data-brand="lloyd"] .gitem:hover::after{opacity:1;left:0;right:0;height:3px;box-shadow:0 0 12px rgba(201,165,106,.5);}

/* ===== 10. 골드팡 : 14K/18K ===== */
main[data-brand="goldpang"]{
  --ac:#C89B3C;
  background:linear-gradient(180deg,#faf3e2,#faf7f1 50%);
}
main[data-brand="goldpang"] .moods .mood{
  border:1px solid #e0c48a;border-radius:999px;background:#fdf8ea;color:#8f6d21;
}
/* 인터랙션: 팡! 터지는 스파클 버스트 (JS로 노드 생성, CSS 애니메이션) */
main[data-brand="goldpang"] .gp-spark{
  position:absolute;width:6px;height:6px;border-radius:50%;z-index:4;pointer-events:none;
  background:radial-gradient(circle,#ffe9ad,#C89B3C 70%,transparent);
}
main[data-brand="goldpang"] .gp-spark.go{animation:gp-burst .7s cubic-bezier(.1,.8,.3,1) forwards;}
@keyframes gp-burst{
  from{opacity:1;transform:translate(0,0) scale(1);}
  to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3);}
}

/* ===== 11. 메드스튜디오 : 천연석 · 진주 ===== */
main[data-brand="maad-studio"]{
  --ac:#7E8B7A;
  background:
    radial-gradient(40% 24% at 84% 10%,rgba(126,139,122,.10),transparent 70%),
    radial-gradient(36% 22% at 10% 30%,rgba(126,139,122,.06),transparent 70%),
    #f8f8f4;
}
main[data-brand="maad-studio"] .detail-hero h1.wordmark-lg{font-weight:500;letter-spacing:.06em;}
main[data-brand="maad-studio"] .moods .mood{
  border:none;border-radius:50%/40%;padding:7px 22px;
  background:radial-gradient(circle at 32% 30%,#ffffff,#e9ede6 60%,#d6ded2);
  color:#5c6a58;box-shadow:0 2px 6px -2px rgba(126,139,122,.35);
}
main[data-brand="maad-studio"] .gitem{border-color:#dee4db;background:linear-gradient(180deg,#fefefe,#f4f6f1);}
main[data-brand="maad-studio"] .gmat{color:#7E8B7A;}
/* 인터랙션: 진주 이리데센스 — 부드럽게 색이 흐르는 오버레이 */
main[data-brand="maad-studio"] .pearl{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(115deg,rgba(214,222,210,.6),rgba(233,225,235,.5),
    rgba(210,224,232,.6),rgba(238,232,220,.5));
  background-size:260% 260%;
  mix-blend-mode:overlay;
  transition:opacity .6s ease;
}
main[data-brand="maad-studio"] .gitem:hover .pearl{opacity:.85;animation:pearl-drift 6s ease-in-out infinite alternate;}
@keyframes pearl-drift{
  from{background-position:0% 30%;}
  to{background-position:100% 70%;}
}

/* ===== 12. 커플레인 : 커플링 · 예물 ===== */
main[data-brand="couplerain"]{
  --ac:#9B7E8C;
  background:linear-gradient(180deg,#f9f3f5,#faf7f1 48%);
}
main[data-brand="couplerain"] .moods .mood{
  border:1px solid #e0d0d8;border-radius:999px 2px 999px 2px;background:#fbf5f7;color:#87687a;
}
main[data-brand="couplerain"] .gitem{border-radius:6px;border-color:#eadbe1;}
/* 인터랙션: 두 링이 겹쳐지는 모션 — 카드 위 두 링 SVG가 호버 시 합체 */
main[data-brand="couplerain"] .rings{
  position:absolute;top:10px;right:12px;z-index:3;width:44px;height:30px;pointer-events:none;
}
main[data-brand="couplerain"] .rings svg{width:100%;height:100%;overflow:visible;}
main[data-brand="couplerain"] .ring-l,
main[data-brand="couplerain"] .ring-r{
  fill:none;stroke-width:2;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  transform-origin:22px 15px;
}
main[data-brand="couplerain"] .ring-l{stroke:#B99AA8;}
main[data-brand="couplerain"] .ring-r{stroke:#C9A56A;}
main[data-brand="couplerain"] .gitem:hover .ring-l{transform:translate(6px,0) rotate(14deg);}
main[data-brand="couplerain"] .gitem:hover .ring-r{transform:translate(-6px,0) rotate(-14deg);}

/* 모바일 경량화: 무거운 블렌드/애니 최소화 */
@media (max-width:720px){
  main[data-brand="goldendew"] .halo{display:none;}
  main[data-brand="ost"] .prism{mix-blend-mode:normal;opacity:0 !important;}
  main[data-brand="maad-studio"] .pearl{mix-blend-mode:normal;}
  main[data-brand="jestina"] .detail-hero::before{display:none;}
}
@media (prefers-reduced-motion:reduce){
  [class] *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  main[data-brand="minigold"] h1.wordmark-lg{background-position:50% 0;-webkit-text-fill-color:#c9a227;}
  main[data-brand="rosemont"] .moods .mood::before{background:#7f9a86;}
}



/* ===== 갤러리 반응형 — 3열 고정보다 뒤에 와야 적용됨 ===== */
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: minmax(0,1fr); }
}


/* ===== 타이포그래피 시스템 (sol 설계 · 로컬 서브셋 폰트) ===== */

/*
 * 기존 Google Fonts @import에서는 Nanum Myeongjo와 Noto Sans KR를 제거하고
 * Cormorant Garamond만 유지한다.
 *
 * @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');
 */

@font-face {
  font-family: "MaruBuri";
  src: url("./fonts/MaruBuri-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MaruBuri";
  src: url("./fonts/MaruBuri-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./fonts/PretendardVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-b-display:
    "Cormorant Garamond",
    "MaruBuri",
    Georgia,
    "Times New Roman",
    "AppleMyungjo",
    serif;

  --font-b-serif:
    "MaruBuri",
    "AppleMyungjo",
    "Batang",
    serif;

  --font-b-sans:
    "Pretendard",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    Arial,
    sans-serif;
}

body {
  font-family: var(--font-b-sans);
  font-weight: 400;
  line-height: 1.8;
  word-break: keep-all;
  font-synthesis: none;
}

/* 기존 유틸리티의 Nanum Myeongjo 참조 제거 */
.serif {
  font-family: var(--font-b-display);
}

.myeongjo {
  font-family: var(--font-b-serif);
}

.hero h1 {
  font-family: var(--font-b-display);
  font-weight: 300;
  font-size: clamp(46px, 8vw, 116px);
  line-height: 1.02;
  letter-spacing: .015em;
}

.sec-head h2 {
  font-family: var(--font-b-display);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.16;
  letter-spacing: 0;
}

.wordmark-lg {
  font-family: var(--font-b-display);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.12;
  letter-spacing: -.015em;
}

.wordmark {
  font-family: var(--font-b-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.28;
  letter-spacing: -.01em;
}

.gname {
  font-family: var(--font-b-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  letter-spacing: -.01em;
}

.bcard-cat {
  font-family: var(--font-b-sans);
  font-weight: 500;
  font-size: clamp(9.5px, .75vw, 11px);
  line-height: 1.35;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.en-lg {
  font-family: var(--font-b-display);
  font-weight: 500;
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.3;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.hero-ko {
  font-family: var(--font-b-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.75vw, 19px);
  line-height: 2;
  letter-spacing: -.01em;
}

.about-lead {
  font-family: var(--font-b-serif);
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.82;
  letter-spacing: -.015em;
}

.about-lead b {
  font-weight: 600;
}

.history p {
  font-family: var(--font-b-serif);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.9;
  letter-spacing: -.012em;
}

.gmat {
  font-family: var(--font-b-sans);
  font-weight: 400;
  font-size: clamp(12px, .9vw, 13px);
  line-height: 1.65;
  letter-spacing: -.005em;
}

.mood {
  font-family: var(--font-b-sans);
  font-weight: 500;
  font-size: clamp(10px, .8vw, 11.5px);
  line-height: 1.35;
  letter-spacing: .07em;
}

.gprice,
.item-price {
  font-family: var(--font-b-sans);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.gprice .won,
.item-price .won {
  font-family: var(--font-b-sans);
  font-size: 12px;
  font-weight: 400;
}

.notice-band p {
  font-family: var(--font-b-sans);
  font-weight: 400;
  font-size: clamp(11px, .85vw, 12px);
  line-height: 1.75;
  letter-spacing: -.005em;
}



/* ===== 우측 플로팅 문의 버튼 (주얼리) ===== */
.floatcall {
  position: fixed; right: 24px; bottom: 28px; z-index: 900;
  display: flex; flex-direction: column; gap: 11px; align-items: flex-end;
}
.fc-btn {
  display: flex; align-items: center; gap: 11px;
  height: 56px; padding: 0 22px 0 19px;
  background: var(--ink); color: var(--ivory);
  border-radius: 999px; font-size: 15px; font-weight: 400;
  letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 10px 30px -8px rgba(33,29,24,.42);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fc-btn:hover {
  background: var(--gold-dp); transform: translateY(-3px);
  box-shadow: 0 16px 38px -10px rgba(138,109,56,.5);
}
.fc-btn:active { transform: translateY(-1px); }
.fc-btn svg { flex-shrink: 0; }
.fc-num {
  font-family: 'Cormorant Garamond', var(--font-b-sans);
  font-size: 19px; font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.fc-top {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--ink-2);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
}
.fc-top.show { opacity: 1; pointer-events: auto; transform: none; }
.fc-top:hover { color: var(--gold-dp); border-color: var(--gold); }

@media (max-width: 720px) {
  .floatcall { right: 14px; bottom: 16px; gap: 9px; }
  .fc-btn { height: 52px; padding: 0 18px 0 16px; font-size: 14px; }
  .fc-num { font-size: 17px; }
  .fc-top { width: 42px; height: 42px; }
}
@media (max-width: 400px) {
  .fc-btn .fc-label { display: none; }
  .fc-btn { padding: 0 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-btn, .fc-top { transition: none; }
  .fc-btn:hover { transform: none; }
}