/* SynapMall — 럭셔리 스킨(명품·주얼리·시계·프리미엄). 마켓 스킨(skins/market/shop.css) 위에 얹어 토큰과 일부 모양만 바꾼다.
   검정·흰색·뉴트럴, 세리프 제목(Cormorant Garamond + 본명조), 넓은 여백과 큰 사진, 장식은 가는 줄 하나까지만. */
:root {
  --sm-ink: #0B0B0B;
  --sm-text: #1C1C1C;
  --sm-text-2: #4D4D4D;
  --sm-muted: #7A7671;
  --sm-faint: #A19C95;
  --sm-line: #E8E5E0;
  --sm-line-2: #D3CFC8;
  --sm-soft: #F4F2EE;          /* 사진 바탕 — 아이보리 */
  --sm-soft-2: #FAF9F7;
  --sm-ivory: #EFEBE4;         /* 사진 없는 배너 */
  --sm-night: #0B0B0B;
  --sm-accent: #8B7355;
  --sm-accent-soft: #F3EEE7;
  --sm-radius: 0px;
  --sm-radius-sm: 0px;
  --sm-serif: 'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;
  --bs-link-color-rgb: 11, 11, 11;
}
body { letter-spacing: 0; font-variant-numeric: lining-nums; }   /* Cormorant 의 옛 숫자(아래로 처지는 3·4·5)를 가지런하게 */
::selection { background: var(--sm-ink); color: #fff; }

/* 머리말 — 가늘고 조용하게 */
.sm-notice { background: var(--sm-ink); font-size: .74rem; font-weight: 400; letter-spacing: .14em; }
.sm-header-row { height: 84px; }
.sm-logo { font-family: var(--sm-serif); font-weight: 600; font-size: 1.9rem; letter-spacing: .18em; text-transform: uppercase; }
.sm-search input { border: 0; border-bottom: 1px solid var(--sm-line-2); border-radius: 0; background: transparent; height: 40px; padding-left: 2px; font-size: .88rem; }
.sm-search input:focus { border-bottom-color: var(--sm-ink); }
.sm-search button { top: 2px; }
.sm-util a:hover { color: var(--sm-accent); }
.sm-util .lbl { display: none; }
.sm-navrow .container { justify-content: center; }
.sm-catbar { gap: 36px; }
.sm-catbar a { font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.sm-catbar a:hover { color: var(--sm-accent); }
.sm-catbar a.active::after { height: 1px; }
.sm-allcat summary { font-size: .8rem; font-weight: 500; letter-spacing: .14em; }

.btn, .btn-lg, .btn-sm { --bs-btn-border-radius: 0; }
.btn { --bs-btn-font-weight: 500; letter-spacing: .08em; }
.btn-lg { --bs-btn-font-size: .88rem; --bs-btn-padding-x: 2.6rem; text-transform: uppercase; }
.form-control, .form-select { border-radius: 0; }

/* 메인 배너 — 큰 사진, 가운데 세리프 제목(사진이 없으면 아이보리 판) */
.sm-slider, .sm-hero { border-radius: 0; }
.sm-slides { aspect-ratio: 1280 / 640; }
.sm-slide-text { background: var(--sm-night); align-items: center; text-align: center; }
.sm-slide-text b { font-family: var(--sm-serif); font-weight: 500; font-size: 3.4rem; letter-spacing: .02em; }
.sm-hero { min-height: 680px; align-items: center; text-align: center; background: var(--sm-ivory); padding: 80px 40px; }
.sm-hero > * { max-width: 760px; }
.sm-hero-eyebrow { color: var(--sm-ink); font-size: .74rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; margin-bottom: 20px; }
.sm-hero h1 { font-family: var(--sm-serif); font-weight: 500; font-size: 4.8rem; letter-spacing: .01em; line-height: 1.08; }
.sm-hero p { font-size: 1rem; letter-spacing: .02em; color: var(--sm-text-2); margin-bottom: 36px; }
.sm-hero .btn { align-self: center; }
.sm-hero > .sm-lx-cover { position: absolute; z-index: 0; inset: 0; max-width: none; overflow: hidden; }
.sm-lx-cover img { width: 100%; height: 100%; object-fit: cover; }
.sm-hero.has-img, .sm-hero.has-img .sm-hero-eyebrow, .sm-hero.has-img p { color: #fff; }
.sm-hero.has-img .sm-lx-cover::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.38); }
.sm-lx-cta { --bs-btn-bg: transparent; --bs-btn-color: var(--sm-ink); --bs-btn-border-color: var(--sm-ink); --bs-btn-hover-bg: var(--sm-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--sm-ink); }
.sm-hero.has-img .sm-lx-cta { --bs-btn-color: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--sm-ink); --bs-btn-hover-border-color: #fff; }

/* 섹션 제목 — 가운데, 작은 영문 위 큰 세리프, 아래 가는 줄 */
.sm-section { margin-top: 128px; }
.sm-lx-head { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; margin-bottom: 48px; }
.sm-lx-head p { margin: 0 0 10px; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sm-muted); }
.sm-lx-head h2 { margin: 0; font-family: var(--sm-serif); font-weight: 500; font-size: 2.6rem; letter-spacing: .01em; color: var(--sm-ink); }
.sm-lx-head::after { content: ''; width: 40px; height: 1px; margin-top: 22px; background: var(--sm-ink); }
.sm-lx-head > a { position: absolute; right: 0; bottom: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sm-ink);
  border-bottom: 1px solid var(--sm-ink); padding-bottom: 2px; }
.sm-lx-head > a:hover { color: var(--sm-accent); border-color: var(--sm-accent); }
.sm-rail-nav button { border-radius: 0; }

/* 상품 카드 — 세 줄, 큰 세로 사진, 가운데 이름·가격 */
.sm-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 64px 32px; }
.sm-rail { gap: 32px; grid-auto-columns: calc((100% - 2 * 32px) / 3); }
.sm-thumb { aspect-ratio: 4 / 5; border-radius: 0; background: var(--sm-soft); }
.sm-noimg { color: #D6D1C8; font-size: 2.4rem; }
.sm-card-wish { color: var(--sm-ink); filter: none; font-size: 1.1rem; }
.sm-card-wish.on { color: var(--sm-ink); }
.sm-card-body { align-items: center; text-align: center; gap: 6px; padding-top: 20px; }
.sm-card-body:hover .sm-name { text-decoration: none; }
.sm-name { font-family: var(--sm-serif); font-size: 1.12rem; font-weight: 500; color: var(--sm-ink); -webkit-line-clamp: 1; }
.sm-price { justify-content: center; }
.sm-price b { font-size: .88rem; font-weight: 500; letter-spacing: .04em; }
.sm-price b small { font-weight: 500; }
.sm-price del { font-size: .78rem; }
.sm-soldout { background: rgba(255,255,255,.7); font-family: var(--sm-serif); font-weight: 500; font-size: 1.1rem; letter-spacing: .1em; }
.sm-tags { display: none; }

/* 대표 상품 한 점 — 검정 띠 */
.sm-band { background: var(--sm-night); box-shadow: 0 0 0 100vmax var(--sm-night); clip-path: inset(0 -100vmax); padding: 96px 0; color: #fff; }
.sm-lx-feature { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 96px; }
.sm-lx-feature-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1A1A1A; }
.sm-lx-feature-img img { width: 100%; height: 100%; object-fit: cover; }
.sm-lx-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 420px; }
.sm-lx-feature-body > span { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: #B8AE9F; }
.sm-lx-feature-body h2 { margin: 0; font-family: var(--sm-serif); font-weight: 500; font-size: 2.8rem; line-height: 1.15; color: #fff; }
.sm-lx-feature-body p { margin: 0; font-size: .95rem; line-height: 1.8; color: #B5B5B5; }
.sm-lx-feature-body b { font-weight: 500; font-size: 1rem; letter-spacing: .04em; }
.sm-lx-feature-body a { margin-top: 12px; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: #fff; border-bottom: 1px solid #fff; padding-bottom: 3px; }
.sm-lx-feature-body a:hover { color: #B8AE9F; border-color: #B8AE9F; }

/* 분류 — 큰 세리프 글자 줄 */
.sm-cattiles { display: block; border-top: 1px solid var(--sm-ink); }
.sm-cattile { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 24px; padding: 26px 8px; border-bottom: 1px solid var(--sm-line-2); color: var(--sm-ink); }
.sm-cattile:hover { color: var(--sm-ink); }
.sm-cattile span { font-size: .78rem; letter-spacing: .2em; color: var(--sm-muted); }
.sm-cattile b { font-family: var(--sm-serif); font-weight: 500; font-size: 2rem; letter-spacing: .01em; }
.sm-cattile i { font-size: 1.2rem; }

/* 기획전 */
.sm-event-img { aspect-ratio: 4 / 5; }
.sm-event-body { align-items: center; text-align: center; }
.sm-event-body b { font-family: var(--sm-serif); font-weight: 500; font-size: 1.35rem; }
.sm-event-date { color: var(--sm-muted); letter-spacing: .08em; font-weight: 400; }

/* 상품 상세·주문 */
.sm-gallery #mainImg, .sm-noimg.big { border-radius: 0; }
.sm-thumb-sm { border-radius: 0; }
.sm-buy h1 { font-family: var(--sm-serif); font-weight: 500; font-size: 2.2rem; }
.sm-total .sm-price b, .sm-sum .total > span:last-child, .sm-paytotal b, .sm-deposit .amt { color: var(--sm-ink); }
.sm-sum { border: 1px solid var(--sm-line-2); background: #fff; }
.sm-paybtn input:checked + .sm-paybtn-face, .sm-cashopt input:checked + span { background: var(--sm-ink); color: #fff; border-color: var(--sm-ink); }
.sm-tabs button { background: #fff; }
.sm-tabs button.active { border-top: 1px solid var(--sm-ink); }
.sm-steps .on .n { background: var(--sm-ink); }
.sm-profile .grade { background: var(--sm-accent); }
.sm-footer { background: var(--sm-soft-2); }
.sm-tabbar a.on { color: var(--sm-ink); }

@media (max-width: 991px) {
  .sm-hero { min-height: 560px; }
  .sm-hero h1 { font-size: 3.4rem; }
  .sm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 20px; }
  .sm-rail { grid-auto-columns: calc((100% - 32px) / 2); }
  .sm-lx-feature { gap: 48px; }
  .sm-lx-feature-body h2 { font-size: 2.2rem; }
}
@media (max-width: 767px) {
  .sm-header-row { height: auto; }
  .sm-logo { font-size: 1.4rem; letter-spacing: .14em; }
  .sm-search input { background: transparent; border-width: 0 0 1px; border-color: var(--sm-line-2); }
  .sm-navrow .container { justify-content: flex-start; }
  .sm-catbar { gap: 22px; }
  .sm-slides { aspect-ratio: 4 / 5; }
  .sm-slide-text b { font-size: 2.2rem; }
  .sm-hero { min-height: 76vh; padding: 48px 24px; justify-content: center; }
  .sm-hero h1 { font-size: 2.6rem; }
  .sm-section { margin-top: 80px; }
  .sm-lx-head { margin-bottom: 32px; }
  .sm-lx-head h2 { font-size: 1.9rem; }
  .sm-lx-head > a { position: static; margin-top: 16px; }
  .sm-grid { gap: 36px 10px; }
  .sm-rail { grid-auto-columns: 62%; gap: 12px; }
  .sm-name { font-size: 1rem; }
  .sm-band { padding: 56px 0; }
  .sm-lx-feature { grid-template-columns: 1fr; gap: 32px; }
  .sm-lx-feature-body h2 { font-size: 1.9rem; }
  .sm-cattile { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 18px 4px; }
  .sm-cattile b { font-size: 1.45rem; }
}

/* ── 움직임(럭셔리) — 아주 느리고 조용하게: 배너 사진이 어둠에서 떠오르고, 줄이 그어지고, 글자 사이가 벌어진다 ── */
:root { --sm-dur: 1.2s; --sm-rise: 14px; --sm-stagger: 120ms; --sm-ease: cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes lx-dawn { from { opacity: 0; translate: none; scale: 1.08; } to { opacity: 1; translate: none; scale: 1; } }
  @keyframes lx-track { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .32em; } }
  .sm-hero > .sm-lx-cover { animation: lx-dawn 2.4s var(--sm-ease) both; }
  .sm-lx-cover img { translate: 0 calc(var(--sm-p, 0) * 100px); }
  .sm-hero > .sm-hero-eyebrow { animation: lx-track 1.8s var(--sm-ease) .3s both; }
  .sm-hero > h1 { animation-duration: 1.6s; animation-delay: .5s; }
  .sm-hero > p { animation-duration: 1.6s; animation-delay: .7s; }
  .sm-hero > .btn { animation-duration: 1.6s; animation-delay: .9s; }
  /* 섹션 제목 — 나타날 때 아래 줄이 그어진다 */
  .sm-lx-head.sm-reveal::after { width: 0; transition: width 1.2s var(--sm-ease) .4s; }
  .sm-lx-head.sm-reveal.is-in::after { width: 40px; }
  /* 카드 — 사진이 아주 천천히 다가오고, 하트는 올릴 때만 보인다(터치 화면은 늘 보임) */
  .sm-card .sm-thumb img, .sm-lx-feature-img img { transition: transform 1.6s var(--sm-ease), opacity .4s; }
  .sm-card:hover .sm-thumb img, .sm-lx-feature-img:hover img { transform: scale(1.04); }
  /* 분류 줄 — 올리면 글자가 오른쪽으로 비켜서고 화살표가 나온다 */
  .sm-cattile b, .sm-cattile i { transition: translate .8s var(--sm-ease), opacity .6s; }
  .sm-cattile i { opacity: 0; translate: -12px 0; }
  .sm-cattile:hover b { translate: 12px 0; }
  .sm-cattile:hover i { opacity: 1; translate: 0 0; }
  .sm-lx-feature-body a, .sm-lx-head > a { transition: color .3s, border-color .3s, letter-spacing .6s var(--sm-ease); }
  .sm-lx-feature-body a:hover { letter-spacing: .3em; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .sm-card-wish { opacity: 0; transition: opacity .4s; }
  .sm-card:hover .sm-card-wish, .sm-card-wish:focus-visible, .sm-card-wish.on { opacity: 1; }
}