/* ============================================================
   윤결 (YOON GYEOL) — 공예 오브제 큐레이션 플랫폼
   레퍼런스(HAZ) 디자인 시스템 구조를 그대로 따르되
   팔레트를 딥 브라운 + 금으로 치환하고, 플랫폼 컴포넌트를 추가한다.
   ============================================================ */

/* ------------------------------------------------------------
   0. 토큰
   ------------------------------------------------------------ */
:root {
  --bg:#F7F6F3;
  --bg-soft:#EFEEE9;
  --bg-deep:#E7E5DE;
  --ink:#1F1B16;
  --ink-2:#4A443C;
  --muted:#8A857C;
  --line:#D6D3CB;
  --line-2:#9C978E;

  /* 윤결 고유 — 로고 원본 컬러(#3D2910)를 브랜드 축으로 */
  --brown:#3D2910;
  --brown-2:#5A4022;
  --brown-ink:#F3EFE6;
  --gold:#B08D57;
  --gold-soft:#DAC49C;
  --accent:#C75B39;        /* 버밀리온 — 할인율 등 소형 */
  --vermilion:#C75B39;

  --ok:#6B5433; --warn:#B0812F; --danger:#B2452A;

  --font-en:'Jost','Poppins',sans-serif;
  --font-ko:'Pretendard Variable',Pretendard,-apple-system,sans-serif;

  --container:1280px;
  --gutter:clamp(16px,4vw,48px);
  --section-pad:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.4,0,.2,1);

  /* 광학 정렬 — Jost 대문자는 좌측 베어링이 7/100em, Pretendard 한글은 2~5/100em.
     그 차이만큼 영문 라벨을 왼쪽으로 당겨 한글 제목과 시각적으로 맞춘다. */
  --optical:-0.04em;
}

/* ------------------------------------------------------------
   1. 리셋 & 타이포
   ------------------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--font-ko); font-weight:400;
  font-size:15px; line-height:1.7; letter-spacing:-0.01em;
  word-break:keep-all; -webkit-font-smoothing:antialiased; min-height:100svh;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea { font:inherit; color:inherit; }
table { border-collapse:collapse; width:100%; }
h1,h2,h3,h4,h5 { font-weight:600; line-height:1.3; }
strong,b { font-weight:600; }
::selection { background:var(--ink); color:var(--bg); }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.en { font-family:var(--font-en); font-weight:500; text-transform:uppercase; letter-spacing:.1em; line-height:1.15; }
.en-sm { font-family:var(--font-en); font-weight:400; text-transform:uppercase; letter-spacing:.2em; font-size:11px; }

.container { width:100%; max-width:calc(var(--container) + var(--gutter)*2);
  margin-inline:auto; padding-inline:var(--gutter); }
.section-pad { padding-block:var(--section-pad); }
.band-gap { margin-block:clamp(56px,7vw,110px); }
.rule { height:1px; background:var(--line); border:0; }

.link-underline { display:inline-block; font-family:var(--font-en); font-weight:500; font-size:12px;
  text-transform:uppercase; letter-spacing:.16em; border-bottom:1px solid currentColor;
  padding-bottom:4px; transition:opacity .25s var(--ease); }
.link-underline:hover { opacity:.6; }

/* ------------------------------------------------------------
   2. 버튼
   ------------------------------------------------------------ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; font-family:var(--font-en); font-weight:500; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease); }
.btn-fill { background:var(--ink); color:var(--bg); }
.btn-fill:hover { opacity:.82; }
.btn-line { background:transparent; color:var(--ink); }
.btn-line:hover { background:var(--ink); color:var(--bg); }
.btn-vir { background:var(--brown); border-color:var(--brown); color:var(--brown-ink); }
.btn-vir:hover { opacity:.86; }
.btn-block { width:100%; }
.btn-sm { padding:9px 16px; font-size:11px; letter-spacing:.06em; }
.btn:disabled { opacity:.35; cursor:not-allowed; }

/* ------------------------------------------------------------
   3. 프로모바 · 헤더
   ------------------------------------------------------------ */
.promo-bar { background:var(--ink); color:var(--bg); text-align:center;
  font-size:12px; letter-spacing:.02em; padding:9px 16px; }
.promo-bar a { border-bottom:1px solid currentColor; }

.site-header { position:sticky; top:0; z-index:100; background:var(--bg);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:15px var(--gutter); }
/* 로고 앵커 — 인라인 여백(디센더) 제거해 상하 여백을 정확히 맞춘다 */
.site-header > a { display:flex; align-items:center; flex:none; }

.logo { flex:none; display:flex; align-items:center; gap:10px; line-height:1; }
.logo-symbol { width:30px; height:30px; flex:0 0 auto; color:var(--ink); }
.logo-symbol svg { width:100%; height:100%; display:block; }
.logo-word { font-weight:600; font-size:19px; letter-spacing:.06em; }
.logo-word small { display:block; font-family:var(--font-en); font-size:8px; letter-spacing:.28em;
  color:var(--muted); margin-top:2px; font-weight:400; text-transform:uppercase; }
.logo-mark-only .logo-word { display:none; }

.gnb { display:flex; }
.gnb ul { display:flex; align-items:center; gap:clamp(16px,2.1vw,32px); }
.gnb-primary { justify-self:start; margin-left:clamp(20px,3.4vw,48px); margin-right:auto; }
.gnb-secondary { margin-right:clamp(12px,2.4vw,36px); }
.gnb-secondary ul { gap:clamp(12px,1.5vw,22px); }
.gnb a { position:relative; display:inline-flex; align-items:center; font-family:var(--font-ko);
  font-weight:600; font-size:14px; letter-spacing:.01em;
  padding:6px 0; white-space:nowrap; transition:opacity .25s var(--ease); }
.gnb-secondary a { font-size:11.5px; letter-spacing:.09em; }
.gnb a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.gnb a:hover::after, .gnb a.active::after { transform:scaleX(1); }
.gnb .is-house a { color:var(--brown); font-weight:600; }

.hd-util { display:flex; align-items:center; gap:clamp(8px,1vw,14px); }

/* 언어 전환 KO / EN */
.lang-switch { display:inline-flex; align-items:center; border:1px solid var(--line); }
.lang-switch button { font-family:var(--font-en); font-size:10.5px; font-weight:500; letter-spacing:.1em;
  padding:5px 8px; color:var(--muted); transition:background .25s var(--ease), color .25s var(--ease); }
.lang-switch button + button { border-left:1px solid var(--line); }
.lang-switch button:hover { color:var(--ink); }
.lang-switch button.on { background:var(--ink); color:var(--bg); }

.util-link { font-family:var(--font-ko); font-weight:500; font-size:12.5px; color:var(--ink);
  white-space:nowrap; padding:6px 2px; transition:opacity .25s var(--ease); }
.util-link:hover { opacity:.55; }
.util-link.partner { color:var(--brown); font-weight:600; }
.util-sep { width:1px; height:13px; background:var(--line); }

/* 아이콘 + 라벨 유틸 (검색 · 좋아요 · 마이 · 장바구니) */
.util-set { display:flex; align-items:center; gap:clamp(10px,1.2vw,18px); }
.util-item { position:relative; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink); white-space:nowrap; padding:6px 0;
  transition:opacity .25s var(--ease); }
.util-item:hover { opacity:.55; }
.util-item svg { width:16px; height:16px; stroke-width:1.3; flex:0 0 auto; }
.util-item .lb { font-weight:500; letter-spacing:-.005em; }
.util-count { position:absolute; top:-1px; left:9px; background:var(--accent); color:#fff;
  font-family:var(--font-en); font-size:9px; line-height:1; min-width:14px; height:14px;
  border-radius:7px; display:grid; place-items:center; padding:0 4px; }

/* 로그인 / 회원가입 — 아웃라인 버튼 */
.btn-auth { display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); padding:8px 14px; font-size:12.5px; font-weight:500;
  white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease),
  border-color .25s var(--ease); }
.btn-auth:hover { background:var(--ink); border-color:var(--ink); color:var(--bg); }

/* 검색 오버레이 */
.search-overlay { position:fixed; inset:0; z-index:300; background:var(--bg);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.search-overlay.open { opacity:1; visibility:visible; }
.search-head { display:flex; align-items:center; gap:20px;
  padding:0 var(--gutter); height:72px; border-bottom:1px solid var(--line); }
.search-head form { flex:1; display:flex; align-items:center; gap:14px; }
.search-head input { flex:1; border:0; background:none; font-size:clamp(18px,2.4vw,28px);
  font-weight:500; padding:8px 0; letter-spacing:-.01em; }
.search-head input::placeholder { color:var(--line-2); }
.search-close { font-size:28px; line-height:1; color:var(--muted); }
.search-close:hover { color:var(--ink); }
.search-body { max-width:calc(var(--container) + var(--gutter)*2); margin-inline:auto;
  padding:clamp(28px,4vw,52px) var(--gutter); max-height:calc(100svh - 72px); overflow-y:auto; }
.search-sug { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.search-hint { font-family:var(--font-en); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.burger { display:none; width:24px; height:15px; position:relative; }
.burger span { position:absolute; left:0; right:0; height:1.4px; background:var(--ink); }
.burger span:nth-child(1){top:0} .burger span:nth-child(2){top:6.8px} .burger span:nth-child(3){top:13.6px}

.drawer { position:fixed; inset:0; z-index:200; background:var(--bg); transform:translateX(100%);
  transition:transform .4s var(--ease); overflow-y:auto; padding:16px var(--gutter) 60px; }
.drawer.open { transform:none; }
.drawer-head { display:flex; justify-content:space-between; align-items:center; height:52px; margin-bottom:22px; }
.drawer nav a { display:block; padding:15px 0; border-bottom:1px solid var(--line);
  font-family:var(--font-en); letter-spacing:.12em; text-transform:uppercase; font-size:14px; }

/* ------------------------------------------------------------
   4. 히어로 배너 — 2분할 슬라이드
   ------------------------------------------------------------ */
.hero-banner { position:relative; height:clamp(480px,88svh,900px); overflow:hidden; background:var(--bg-soft); }
.hero-banner::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.32), transparent 30%); }
.hb-slide { position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); }
.hb-slide.active { opacity:1; }

/* 통배너 — 이미지에 카피가 인쇄된 경우.
   카피가 하단에 있으므로 아래쪽을 살리고 천장 쪽을 잘라낸다.
   오버레이 그라데이션도 약하게 둬야 인쇄된 글자를 방해하지 않는다. */
.hero-banner.is-full { height:clamp(460px,72svh,760px); }
.hero-banner.is-full > .hb-slide > img {
  width:100%; height:100%; object-fit:cover; object-position:center 88%; }
.hero-banner.is-full::after {
  background:linear-gradient(to top, rgba(0,0,0,.14), transparent 22%); }
/* 인쇄된 카피가 좌하단이므로 페이지네이션은 우하단으로 비켜준다 */
.hero-banner.is-full .hb-nav { justify-content:flex-end; padding-right:var(--gutter); }

.hb-split { display:grid; grid-template-columns:1fr 1fr; gap:2px; height:100%; background:var(--bg); }
.hb-pane { position:relative; overflow:hidden; background:var(--bg-soft); }
.hb-pane img { width:100%; height:100%; object-fit:cover; }

.hb-cap { position:absolute; left:clamp(20px,4vw,56px); bottom:clamp(66px,11vh,120px); z-index:2;
  color:#fff; font-family:var(--font-en); font-weight:500; font-size:clamp(13px,1.4vw,15px);
  letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 16px rgba(0,0,0,.45); }
.hb-nav { position:absolute; left:0; right:0; bottom:clamp(22px,3vw,40px); z-index:3;
  display:flex; align-items:center; justify-content:center; gap:18px; }
.hb-prev, .hb-next { width:40px; height:40px; display:grid; place-items:center; color:#fff;
  font-size:22px; line-height:1; opacity:.85; transition:opacity .25s var(--ease); }
.hb-prev:hover, .hb-next:hover { opacity:1; }
.hb-count { font-family:var(--font-en); font-weight:500; font-size:13px; letter-spacing:.12em;
  color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 1px 12px rgba(0,0,0,.4);
  min-width:64px; text-align:center; }
.hb-sep { opacity:.7; margin:0 2px; }

/* ------------------------------------------------------------
   5. 태그 마퀴
   ------------------------------------------------------------ */
.tag-marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:13px 0; }
.tag-marquee-track { display:flex; width:max-content; animation:tag-scroll 120s linear infinite; }
.tag-marquee span { font-family:var(--font-en); font-weight:500; font-size:13px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; padding:0 clamp(28px,3.5vw,54px); }
@keyframes tag-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ------------------------------------------------------------
   6. 피처 레일 — 좌 텍스트패널 + 우 화살표 캐러셀 (풀블리드)
   ------------------------------------------------------------ */
.feature-rail { display:grid; grid-template-columns:minmax(260px,32%) 1fr; gap:0;
  align-items:stretch; height:clamp(540px,82vh,800px); border-bottom:1px solid var(--line); }
.feature-rail-panel { align-self:center; padding-left:var(--gutter); padding-right:clamp(24px,3vw,48px); }
.feature-rail-panel .eyebrow { font-family:var(--font-en); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px; margin-left:var(--optical); }
.feature-rail-panel h2 { font-family:var(--font-ko); font-weight:700; font-size:clamp(26px,2.9vw,38px);
  line-height:1.2; letter-spacing:-.02em; }
.feature-rail-panel p { margin-top:16px; color:var(--muted); font-size:14px; max-width:300px; }
.rail-shopall { display:inline-flex; align-items:center; gap:10px; margin-top:24px;
  background:var(--ink); color:var(--bg); font-family:var(--font-en); font-weight:500;
  font-size:12px; letter-spacing:.04em; padding:11px 22px; border:1px solid var(--ink);
  transition:opacity .25s var(--ease); }
.rail-shopall:hover { opacity:.82; }

.feature-rail-slider { position:relative; min-width:0; height:100%; }
.rail-track { display:flex; gap:8px; height:100%; align-items:stretch; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; }
.rail-track::-webkit-scrollbar { display:none; }
.rail-card { flex:0 0 calc((100% - 8px) / 2); scroll-snap-align:start; height:100%;
  position:relative; display:block; }
.rail-card::before { content:""; position:absolute; top:0; left:0; right:0; height:110px; z-index:1;
  background:linear-gradient(rgba(247,246,243,.85), rgba(247,246,243,0)); pointer-events:none; }
.rail-card-head { position:absolute; top:0; left:0; right:0; z-index:2; display:flex;
  flex-direction:column; align-items:flex-start; gap:3px; padding:16px 18px; }
.rail-brand { font-family:var(--font-en); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); }
.rail-name { font-family:var(--font-ko); font-weight:500; font-size:13.5px; color:var(--ink); }
.rail-price { font-family:var(--font-en); font-weight:600; font-size:13px; }
.rail-card-img { position:absolute; inset:0; overflow:hidden; background:var(--bg-soft); }
.rail-card-img img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; padding:16% 10% 10%;
  transition:transform .6s var(--ease); }
.rail-card:hover .rail-card-img img { transform:scale(1.03); }
.rail-badge { position:absolute; bottom:16px; left:18px; z-index:2; font-family:var(--font-en);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px;
  border:1px solid var(--gold); color:var(--gold); background:rgba(247,246,243,.9); }
.rail-prev, .rail-next { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:62px;
  display:grid; place-items:center; background:rgba(31,27,22,.5); font-size:18px; color:#fff; z-index:3;
  transition:background .25s; }
.rail-prev { left:0; } .rail-next { right:0; }
.rail-prev:hover, .rail-next:hover { background:rgba(31,27,22,.72); }

/* ------------------------------------------------------------
   7. 상품 카드 (중앙 정렬) · 신착 그리드
   ------------------------------------------------------------ */
.arr-head { text-align:left; margin-bottom:clamp(28px,3.5vw,50px); }
.arr-head .eyebrow { font-family:var(--font-en); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px; margin-left:var(--optical); }
.arr-head h2 { font-family:var(--font-ko); font-weight:700; font-size:clamp(24px,2.7vw,34px);
  letter-spacing:-.02em; }
.arr-head p { margin-top:12px; color:var(--muted); font-size:14px; max-width:58ch; }
.arr-more { text-align:center; margin-top:clamp(34px,4vw,54px); }
.arr-more a { font-family:var(--font-en); font-weight:500; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:opacity .25s var(--ease); }
.arr-more a:hover { opacity:.55; }

.arrival-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,2.2vw,40px) clamp(14px,1.4vw,22px); }
.prod-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,2.2vw,40px) clamp(14px,1.4vw,22px); }
.prod-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }

.arr-card { display:flex; flex-direction:column; height:100%; min-width:0; }
.prod-card { display:flex; flex-direction:column; flex:1; text-align:center; min-width:0; }
.prod-card .price-row { margin-top:auto; padding-top:8px; }   /* 가격을 아래로 밀어 기준선 정렬 */
.prod-card-img { position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-soft);
  margin-bottom:20px; display:block; }
/* absolute 로 타일에 정확히 맞춘다 — grid + height:100% 는 높이가 순환 참조로 풀려 넘친다 */
.prod-card-img img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; padding:7%;
  transition:transform .4s var(--ease); }
.prod-card-img.cover img { object-fit:cover; padding:0; }
.prod-card:hover .prod-card-img img { transform:scale(1.03); }
.prod-card-name { display:block; font-size:14px; font-weight:500; line-height:1.5; }
.prod-card-sub { display:block; margin-top:3px; font-family:var(--font-en); font-weight:400;
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.price-row { display:flex; align-items:baseline; justify-content:center; gap:8px;
  margin-top:8px; font-size:14px; }
.price-sale { font-weight:600; font-family:var(--font-en); }
.price-org { color:var(--muted); text-decoration:line-through; font-size:12px; }
.price-off { color:var(--accent); font-family:var(--font-en); font-weight:500; font-size:11px; }
.prod-one { margin-top:7px; font-size:11.5px; color:var(--gold); letter-spacing:.02em; min-height:19px; }
.prod-card.no-one::after { content:''; display:block; min-height:19px; margin-top:7px; }

.card-badges { position:absolute; top:12px; left:12px; z-index:2; display:flex; flex-direction:column;
  gap:5px; align-items:flex-start; }
/* 카드 좋아요 */
.wish-btn { position:absolute; top:10px; right:10px; z-index:3; width:30px; height:30px;
  display:grid; place-items:center; color:var(--ink-2); transition:color .25s var(--ease); }
.wish-btn svg { width:17px; height:17px; }
.wish-btn:hover { color:var(--accent); }
.wish-btn.on { color:var(--accent); }
.wish-btn.on svg { fill:var(--accent); }
.badge { font-family:var(--font-en); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 9px; background:rgba(247,246,243,.94); border:1px solid var(--line-2); }
.badge-one { border-color:var(--gold); color:var(--gold); }
.badge-house { background:var(--brown); border-color:var(--brown); color:var(--brown-ink); }
.badge-sold { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.add-cart { display:block; width:100%; margin-top:12px; flex:0 0 auto; padding:11px; border:1px solid var(--ink);
  font-family:var(--font-en); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease); }
.add-cart:hover { background:var(--ink); color:var(--bg); }

/* ------------------------------------------------------------
   8. 2분할 에디토리얼 밴드 · 3열 무드 그리드
   ------------------------------------------------------------ */
.split-band { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.split-cell { position:relative; height:clamp(360px,44vw,600px); overflow:hidden; display:block; }
.split-cell img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.split-cell:hover img { transform:scale(1.03); }
.split-center::after { content:""; position:absolute; inset:0; z-index:0; background:rgba(0,0,0,.26); }
.split-center-text { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:#fff; gap:7px; padding:24px; }
.scl-title { font-family:var(--font-en); font-weight:500; font-size:clamp(18px,1.8vw,25px); letter-spacing:.02em; }
.scl-sub { font-family:var(--font-en); font-weight:400; font-size:13px; letter-spacing:.04em; opacity:.92; }
.split-tag { position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex;
  padding:0 0 clamp(20px,2.6vw,34px) clamp(20px,2.6vw,34px); }
.split-tag a { background:rgba(31,27,22,.62); color:#fff; font-family:var(--font-en); font-weight:500;
  font-size:11px; letter-spacing:.06em; padding:11px 18px; transition:background .25s; }
.split-tag a:hover { background:var(--ink); }
/* 브라운 텍스트 셀 — 월간 입점회 등에서 사용 */
.split-cell.brown-cell { background:var(--brown); color:var(--brown-ink); display:flex;
  flex-direction:column; justify-content:center; padding:clamp(32px,5vw,72px); }
.split-cell.brown-cell .eyebrow { font-family:var(--font-en); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; }
.split-cell.brown-cell h2 { font-size:clamp(22px,2.6vw,34px); font-weight:400; line-height:1.32; }
.split-cell.brown-cell p { margin-top:18px; font-size:14px; opacity:.86; line-height:1.85; }
.split-cell.brown-cell .link-underline { margin-top:28px; color:var(--gold-soft); align-self:flex-start; }
  flex-direction:column; justify-content:center; padding:clamp(32px,5vw,72px); }
.split-cell.brown-cell .eyebrow { font-family:var(--font-en); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; }
.split-cell.brown-cell h2 { font-size:clamp(22px,2.6vw,34px); font-weight:400; line-height:1.32; }
.split-cell.brown-cell p { margin-top:18px; font-size:14px; opacity:.86; line-height:1.85; }
.split-cell.brown-cell .link-underline { margin-top:28px; color:var(--gold-soft); align-self:flex-start; }

.mood-3col { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1vw,16px); }
.mood-cell { position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--bg-soft); display:block; }
.mood-cell img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mood-cell:hover img { transform:scale(1.04); }
.mood-cell::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.44), transparent 52%); }
.mood-cell-cap { position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:clamp(16px,2vw,28px); color:#fff; }
.mood-cell-cap h4 { font-family:var(--font-en); font-weight:600; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; margin-left:var(--optical); }
.mood-cell-cap .link-underline { margin-top:8px; color:#fff; font-size:11px; }

/* ------------------------------------------------------------
   9. 리뷰 밴드
   ------------------------------------------------------------ */
.review-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:clamp(36px,4vw,60px); }
.review-grid { display:grid; grid-template-columns:minmax(220px,28%) 1fr; gap:clamp(24px,3vw,56px);
  align-items:start; max-width:calc(var(--container) + var(--gutter)*2); margin-inline:auto;
  padding-inline:var(--gutter); }
.review-left h2 { font-family:var(--font-en); font-weight:400; font-size:clamp(26px,2.7vw,36px); letter-spacing:.01em; }
.review-left p { margin-top:14px; color:var(--muted); font-size:14px; line-height:1.7; }
.review-nav { display:flex; gap:10px; margin-top:26px; }
.review-nav button { width:38px; height:38px; border:1px solid var(--line-2); display:grid; place-items:center;
  transition:background .25s, color .25s; }
.review-nav button:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.review-viewport { overflow:hidden; height:clamp(300px,30vw,380px); }
.review-track { display:flex; flex-direction:column; transition:transform .7s var(--ease); }
.review-card { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:clamp(18px,2.5vw,44px);
  align-items:center; padding:clamp(22px,2.6vw,34px) 0; flex:0 0 auto; }
.review-card + .review-card { border-top:1px solid var(--line); }
/* a 요소라 display:block이 없으면 width/height가 먹지 않아 카드가 부풀어 오른다 */
.review-thumb { display:block; flex:0 0 auto; width:120px; height:120px;
  overflow:hidden; background:var(--bg-soft); }
.review-thumb img { width:100%; height:100%; object-fit:contain; padding:9%; }
.review-stars { color:var(--gold); letter-spacing:3px; font-size:13px; }
.review-body h3 { margin-top:9px; font-size:15px; font-weight:600; line-height:1.4; }
.review-body > p { margin-top:8px; color:var(--muted); font-size:13.5px; line-height:1.6; }
.review-meta { margin-top:12px; display:flex; gap:12px; font-size:12px; color:var(--muted); }
.review-tag { display:inline-block; margin-top:12px; font-size:12px; color:var(--gold); font-weight:500; }
.review-more { align-self:center; font-family:var(--font-en); font-size:12px; color:var(--muted);
  white-space:nowrap; transition:color .25s var(--ease); }
.review-more:hover { color:var(--ink); }

/* ------------------------------------------------------------
   10. 비디오 밴드 · 인스타
   ------------------------------------------------------------ */
.video-band { display:grid; grid-template-columns:1.5fr 1fr; gap:0; align-items:stretch; aspect-ratio:2.45; }
.video-media { position:relative; display:block; width:100%; height:100%; overflow:hidden; background:var(--ink); }
.video-media img { width:100%; height:100%; object-fit:cover; opacity:.84; transition:opacity .3s var(--ease); }
.video-media:hover img { opacity:.72; }
.video-play { position:absolute; inset:0; margin:auto; width:66px; height:66px; display:grid;
  place-items:center; border-radius:999px; background:rgba(255,255,255,.9); color:var(--ink); }
.video-play svg { margin-left:3px; }
.video-text { background:var(--bg-soft); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,4vw,58px); }
.video-text h3 { font-family:var(--font-en); font-weight:500; font-size:clamp(22px,2.4vw,30px); letter-spacing:.01em; }
.video-text p { margin-top:12px; color:var(--muted); font-size:14px; }
.video-text .btn { margin-top:24px; align-self:flex-start; }

.insta-section { padding-top:clamp(40px,5vw,72px); }
.insta-head { text-align:center; margin-bottom:clamp(22px,3vw,40px); }
.insta-head h2 { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-en);
  font-weight:600; font-size:clamp(15px,1.6vw,19px); letter-spacing:.14em; text-transform:uppercase; }
.insta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--ink); }
.insta-cell { position:relative; aspect-ratio:5/3; overflow:hidden; background:var(--bg-soft); }
.insta-cell img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s; }
.insta-cell:hover img { transform:scale(1.05); opacity:.9; }
.insta-big { grid-row:span 2; aspect-ratio:auto; }

/* ------------------------------------------------------------
   11. 푸터
   ------------------------------------------------------------ */
/* 푸터 — 딥 브라운 바탕 */
.site-footer { background:var(--brown); color:var(--brown-ink); }
.footer-main { display:grid; grid-template-columns:1.25fr 1.75fr; gap:clamp(32px,5vw,80px);
  max-width:var(--container); margin-inline:auto;
  padding:clamp(48px,6vw,88px) var(--gutter) clamp(36px,4vw,56px); }
.footer-cs h4, .footer-links .footer-col h4 { font-family:var(--font-en); font-weight:600; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; }
.footer-tel { font-family:var(--font-en); font-weight:700; font-size:clamp(26px,3vw,38px);
  letter-spacing:.02em; line-height:1; color:var(--brown-ink); margin-bottom:14px; }
.footer-cs-sub { font-size:13px; color:rgba(243,239,230,.66); margin-bottom:3px; }
.footer-biz { margin-top:24px; padding-top:22px; border-top:1px solid rgba(243,239,230,.16); }
.footer-biz p { font-size:12px; color:rgba(243,239,230,.5); line-height:1.85; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer-links .footer-col a { display:block; font-size:13px; color:rgba(243,239,230,.72);
  margin-bottom:11px; transition:color .25s var(--ease); }
.footer-links .footer-col a:hover { color:var(--brown-ink); }
.footer-bottom { border-top:1px solid rgba(243,239,230,.16); display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:var(--container); margin-inline:auto; padding:18px var(--gutter); }
.footer-copy { font-family:var(--font-en); font-size:11px; letter-spacing:.08em;
  color:rgba(243,239,230,.42); }
.footer-nav { display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.footer-nav a { font-family:var(--font-en); font-weight:500; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(243,239,230,.6); transition:color .25s var(--ease); }
.footer-nav a:hover { color:var(--brown-ink); }

/* ------------------------------------------------------------
   11-b. 서브 페이지 공용 유틸 (홈 외 페이지가 쓰는 섹션 유틸)
   ------------------------------------------------------------ */
.section { padding-block:var(--section-pad); }
.section-sm { padding-block:clamp(56px,7vw,96px); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:44px; }
.section-title { font-family:var(--font-en); font-size:clamp(24px,2.7vw,34px); font-weight:600; letter-spacing:.01em; }
.section-title.ko-title { font-family:var(--font-ko); font-weight:700; letter-spacing:-.02em; }
.section-desc { color:var(--muted); font-size:14px; margin-top:10px; max-width:58ch; }
.section-link { font-family:var(--font-en); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:4px; white-space:nowrap;
  transition:opacity .25s var(--ease); }
.section-link:hover { opacity:.55; }
.eyebrow { font-family:var(--font-en); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px; margin-left:var(--optical); }

/* ------------------------------------------------------------
   프로모 배너 — 사진 위에 카피를 얹는 가로 배너 (라운드 없음)
   푸터가 브라운이므로 그 위에 브라운 밴드를 두지 않는다.
   ------------------------------------------------------------ */
.promo-banner { position:relative; overflow:hidden; background:var(--bg-deep);
  aspect-ratio:3.6/1; min-height:260px; display:flex; align-items:center; }
.promo-banner > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.promo-banner::after { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(24,20,14,.74) 0%, rgba(24,20,14,.5) 46%, rgba(24,20,14,.12) 100%); }
.promo-banner .pb-in { position:relative; z-index:2; color:#fff;
  padding:clamp(34px,4vw,56px) clamp(28px,5vw,72px); max-width:60ch; }
.promo-banner .eyebrow { color:var(--gold-soft); margin-bottom:14px; }
.promo-banner h2 { font-size:clamp(24px,3vw,36px); font-weight:700; letter-spacing:-.02em; line-height:1.28; }
.promo-banner p { margin-top:14px; font-size:14px; line-height:1.8; color:rgba(255,255,255,.84); max-width:46ch; }
.promo-banner .pb-btn { display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  background:#fff; color:var(--ink); font-size:13px; font-weight:600; padding:13px 24px;
  transition:opacity .25s var(--ease); }
.promo-banner .pb-btn:hover { opacity:.86; }
@media (max-width:1080px){ .promo-banner { aspect-ratio:2.6/1; } }
@media (max-width:860px){
  .promo-banner { aspect-ratio:auto; min-height:0; }
  .promo-banner::after { background:linear-gradient(180deg, rgba(24,20,14,.5) 0%, rgba(24,20,14,.82) 60%); }
  .promo-banner .pb-in { max-width:none; padding-block:clamp(120px,34vw,180px) 32px; }
}

/* 브라운 에디토리얼 밴드 (2단) */
.edit-band { background:var(--brown); color:var(--brown-ink); }
.edit-band .container { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px);
  align-items:center; padding-block:var(--section-pad); }
.edit-band img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.edit-band .eyebrow { color:var(--gold-soft); margin-bottom:18px; }
.edit-band h2 { font-size:clamp(24px,3vw,38px); font-weight:400; line-height:1.3; }
.edit-band p { margin-top:20px; opacity:.86; font-size:14.5px; line-height:1.85; }
.edit-band .btn { margin-top:30px; border-color:var(--gold-soft); color:var(--gold-soft); background:transparent; }
.edit-band .btn:hover { background:var(--gold-soft); color:var(--brown); }

/* 비대칭 3분할 */
.asym { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:clamp(10px,1vw,16px); }
.asym-cell { position:relative; overflow:hidden; background:var(--bg-soft); }
.asym-cell img { width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.asym-cell:first-child img { aspect-ratio:4/5; }
.asym-cell::after { content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent 50%); }
.asym-cell figcaption { position:absolute; left:22px; bottom:20px; color:#fff; z-index:2; }
.asym-cell figcaption strong { display:block; font-size:19px; font-weight:500; margin-top:6px; }

/* 구 상품카드 클래스 별칭 */
.prod-thumb { position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-soft); display:block; }
.prod-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:7%; }
.prod-thumb.cover img { object-fit:cover; padding:0; }
.prod-brand { margin-top:15px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-family:var(--font-en); color:var(--muted); }
.prod-name { margin-top:6px; font-size:14px; font-weight:500; }
.prod-meta { margin-top:4px; font-size:12px; color:var(--muted); }
.prod-price { margin-top:9px; font-size:14px; font-family:var(--font-en); font-weight:600; }

/* ------------------------------------------------------------
   12. 목록 페이지 공용
   ------------------------------------------------------------ */
.page-head { padding-block:clamp(44px,6vw,80px) 0; }
.page-head h1 { font-family:var(--font-en); font-size:clamp(28px,3.6vw,46px); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; margin-left:var(--optical); }
.page-head .ko { font-size:14.5px; color:var(--muted); margin-top:12px; max-width:62ch; }
.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:40px; padding-bottom:16px; border-bottom:1px solid var(--ink); flex-wrap:wrap; }
.tabs { display:flex; gap:26px; flex-wrap:wrap; }
.tabs a, .tabs button { font-size:14px; color:var(--muted); transition:color .25s; }
.tabs a:hover, .tabs button:hover { color:var(--ink); }
.tabs .on { color:var(--ink); font-weight:600; }
.sort { display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); }
.sort select { border:0; background:none; padding:4px 2px; cursor:pointer; color:var(--ink); }
.sub-filter { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.empty { padding:100px 0; text-align:center; color:var(--muted); font-size:14px; grid-column:1/-1; }

/* ------------------------------------------------------------
   13. 브랜드관
   ------------------------------------------------------------ */
.brand-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,48px) clamp(18px,2vw,28px); }
.brand-card { display:block; }
.brand-cover { aspect-ratio:4/3; overflow:hidden; background:var(--bg-soft); }
.brand-cover img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.brand-card:hover .brand-cover img { transform:scale(1.03); }
.brand-head { display:flex; align-items:baseline; gap:10px; margin-top:18px; }
.brand-name { font-size:17px; font-weight:500; }
.brand-en { font-family:var(--font-en); font-size:10.5px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
.brand-desc { margin-top:8px; font-size:13.5px; color:var(--ink-2); }
.brand-tags { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-size:11px; padding:3px 9px; border:1px solid var(--line); color:var(--muted); background:var(--bg); }
.brand-hero { position:relative; height:clamp(300px,44svh,480px); overflow:hidden; background:var(--bg-deep); }
.brand-hero img { width:100%; height:100%; object-fit:cover; }
.brand-hero::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,17,13,.1),rgba(20,17,13,.62)); }
.brand-hero-copy { position:absolute; left:0; right:0; bottom:clamp(32px,5vw,56px); color:#fff; z-index:2; }

/* ------------------------------------------------------------
   14. ⭐ 개체(One of One)
   ------------------------------------------------------------ */
.one-intro { border-top:1px solid var(--gold); border-bottom:1px solid var(--line);
  padding:26px 0; margin-bottom:34px; display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; }
.one-intro .mark { font-family:var(--font-en); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap; padding-top:3px; }
.one-intro p { font-size:14px; color:var(--ink-2); max-width:66ch; }

.unit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,20px); }
.unit-card { position:relative; border:1px solid var(--line); background:var(--bg); text-align:left;
  width:100%; display:block; transition:border-color .3s var(--ease); }
.unit-card:hover { border-color:var(--gold); }
.unit-card.sel { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.unit-card.sold { opacity:.42; cursor:not-allowed; }
.unit-thumb { aspect-ratio:1/1; background:var(--bg-soft); overflow:hidden; position:relative; }
.unit-thumb img { width:100%; height:100%; object-fit:contain; padding:9%; }
.unit-no { position:absolute; top:8px; left:9px; font-family:var(--font-en); font-size:10px;
  letter-spacing:.12em; color:var(--muted); }
.unit-sold-tag { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-en);
  font-size:12px; letter-spacing:.2em; background:rgba(247,246,243,.55); }
.unit-body { padding:12px 13px 15px; border-top:1px solid var(--line); }
.unit-grain { font-size:12.5px; font-weight:500; }
.unit-spec { margin-top:5px; font-size:11.5px; color:var(--muted); font-family:var(--font-en); }
.unit-price { margin-top:8px; font-size:13px; font-family:var(--font-en); font-weight:500; }
.grain-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.grain-chip { font-size:12px; padding:7px 15px; border:1px solid var(--line); transition:.25s var(--ease); }
.grain-chip:hover { border-color:var(--ink); }
.grain-chip.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ------------------------------------------------------------
   15. PDP
   ------------------------------------------------------------ */
.pdp { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,4vw,72px);
  padding-block:clamp(36px,5vw,64px); align-items:start; }
.pdp-gallery { position:sticky; top:96px; }
.pdp-main { aspect-ratio:1/1.02; background:var(--bg-soft); overflow:hidden; }
.pdp-main img { width:100%; height:100%; object-fit:contain; padding:8%; }
.pdp-main.cover img { object-fit:cover; padding:0; }
.pdp-thumbs { display:flex; gap:9px; margin-top:12px; flex-wrap:wrap; }
.pdp-thumbs button { width:70px; aspect-ratio:1; background:var(--bg-soft); border:1px solid transparent; }
.pdp-thumbs button.on { border-color:var(--ink); }
.pdp-thumbs img { width:100%; height:100%; object-fit:contain; padding:8%; }
.pdp-brand { font-family:var(--font-en); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--line-2); padding-bottom:2px; }
.pdp-title { font-size:clamp(24px,2.7vw,34px); font-weight:500; margin-top:16px; }
.pdp-sku { margin-top:8px; font-family:var(--font-en); font-size:12px; letter-spacing:.1em; color:var(--muted); }
.pdp-price { margin-top:24px; font-size:26px; font-family:var(--font-en); font-weight:600; }
.pdp-price .unit { font-family:var(--font-ko); font-size:20px; font-weight:400; }
.pdp-info { margin-top:22px; border-top:1px solid var(--line); }
.pdp-info dl { display:grid; grid-template-columns:96px 1fr; gap:11px 16px; padding:20px 0;
  border-bottom:1px solid var(--line); font-size:13.5px; }
.pdp-info dt { color:var(--muted); }
.pdp-actions { margin-top:26px; display:grid; gap:9px; }
.pdp-note { margin-top:18px; font-size:12.5px; color:var(--muted); display:flex; gap:8px; }
.qty { display:inline-flex; border:1px solid var(--line-2); }
.qty button { width:40px; height:44px; }
.qty span { width:52px; display:grid; place-items:center; font-family:var(--font-en); border-inline:1px solid var(--line-2); }
.pdp-total { display:flex; justify-content:space-between; align-items:baseline; padding:20px 0;
  border-top:1px solid var(--ink); margin-top:22px; }
.pdp-total strong { font-size:24px; font-family:var(--font-en); font-weight:600; }
.pdp-story { border-top:1px solid var(--line); }

/* ------------------------------------------------------------
   16. 폼 · 카드 · 스텝퍼 · 상태
   ------------------------------------------------------------ */
.field { margin-bottom:20px; }
.field label { display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:8px; }
.field label .req { color:var(--accent); margin-left:3px; }
.input, .field input, .field select, .field textarea { width:100%; padding:13px 15px; background:var(--bg);
  border:1px solid var(--line-2); font-size:14px; transition:border-color .25s var(--ease); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--ink); }
.field textarea { min-height:130px; resize:vertical; line-height:1.7; }
.field .hint { margin-top:7px; font-size:11.5px; color:var(--muted); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.auth-card { max-width:440px; margin:clamp(48px,7vw,96px) auto; background:var(--bg-soft); padding:clamp(36px,4vw,52px); }
.auth-card h1 { font-family:var(--font-en); font-size:26px; letter-spacing:.22em; text-align:center; font-weight:500; }
.auth-card .sub { text-align:center; color:var(--muted); font-size:13px; margin:12px 0 34px; }
.auth-divider { display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--muted); font-size:12px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--line-2); }
.btn-kakao { background:#FEE500; color:#191600; border-color:#FEE500; }
.auth-foot { margin-top:26px; text-align:center; font-size:12.5px; color:var(--muted); display:flex; gap:18px; justify-content:center; }
.auth-partner { margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2); text-align:center; font-size:12.5px; }
.auth-partner a { color:var(--brown); font-weight:600; border-bottom:1px solid var(--brown); }

.card { background:var(--bg-soft); padding:clamp(22px,2.4vw,32px); }
.card-line { background:var(--bg); border:1px solid var(--line); padding:clamp(22px,2.4vw,32px); }

.stepper { display:flex; margin:34px 0; }
.step { flex:1; padding:16px 14px; border-top:2px solid var(--line); }
.step .n { font-family:var(--font-en); font-size:10.5px; letter-spacing:.16em; color:var(--muted); }
.step .t { font-size:13.5px; margin-top:5px; color:var(--muted); }
.step.done { border-top-color:var(--brown); } .step.done .t { color:var(--ink); }
.step.on { border-top-color:var(--gold); } .step.on .t { color:var(--ink); font-weight:600; }
.step.on .n { color:var(--gold); }

.st { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; padding:4px 10px;
  border:1px solid currentColor; white-space:nowrap; }
.st::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.st-draft{color:var(--muted)} .st-review{color:var(--warn)} .st-info{color:var(--accent)}
.st-ok{color:var(--ok)} .st-no{color:var(--danger)} .st-live{color:var(--brown)}

/* ------------------------------------------------------------
   17. 파트너 / 어드민 콘솔
   ------------------------------------------------------------ */
.console { display:grid; grid-template-columns:236px 1fr; min-height:100svh; }
.console-side { background:var(--bg-soft); border-right:1px solid var(--line); padding:22px 0;
  position:sticky; top:0; height:100svh; overflow-y:auto; }
.console-brandmark { padding:0 22px 22px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.console-brandmark .logo-symbol { width:28px; height:28px; }
.console-brandmark .logo-word { font-size:17px; }
.console-brandmark .role { font-family:var(--font-en); font-size:9.5px; letter-spacing:.2em;
  color:var(--gold); text-transform:uppercase; margin-top:8px; }
.console-brandmark .role.admin { color:var(--accent); }
.console-nav { padding:0 12px; }
.console-nav .grp { font-family:var(--font-en); font-size:9.5px; letter-spacing:.18em; color:var(--muted);
  text-transform:uppercase; padding:18px 10px 8px; }
.console-nav a { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; font-size:13.5px; transition:background .2s; }
.console-nav .lbl { display:inline-flex; align-items:center; gap:10px; }
.console-nav .lbl svg { opacity:.75; flex:0 0 auto; }
.console-nav a.on .lbl svg { opacity:1; }
.console-nav a:hover { background:var(--bg-deep); }
.console-nav a.on { background:var(--ink); color:var(--bg); }
.console-nav .cnt { font-family:var(--font-en); font-size:10.5px; background:var(--accent); color:#fff;
  min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding:0 5px; }
.console-nav a.on .cnt { background:var(--bg); color:var(--ink); }
.console-nav a.lock { color:var(--line-2); }
.console-nav a.lock .lbl svg { opacity:.4; }
.console-nav .lockmark { font-size:10px; color:var(--line-2); border:1px solid var(--line);
  padding:1px 6px; white-space:nowrap; }

/* 탭 전환 (로그인 / 회원가입) */
.seg { display:flex; border:1px solid var(--line-2); margin-bottom:24px; }
.seg button { flex:1; padding:11px 8px; font-size:13.5px; font-weight:500; color:var(--muted);
  transition:background .25s var(--ease), color .25s var(--ease); }
.seg button + button { border-left:1px solid var(--line-2); }
.seg button.on { background:var(--ink); color:var(--bg); }
.console-main { padding:clamp(24px,3vw,40px) clamp(20px,3vw,44px) 80px; min-width:0; }
.console-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:28px; flex-wrap:wrap; }
.console-head h1 { font-size:23px; font-weight:500; }
.console-head .sub { font-size:13px; color:var(--muted); margin-top:6px; }

.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:32px; }
.stat { background:var(--bg-soft); padding:20px 22px; border-left:2px solid var(--line); }
.stat.hl { border-left-color:var(--gold); }
.stat.alert { border-left-color:var(--accent); }
.stat .k { font-size:12px; color:var(--muted); }
.stat .v { font-size:27px; font-family:var(--font-en); font-weight:600; margin-top:9px; }
.stat .v small { font-size:14px; font-family:var(--font-ko); font-weight:400; margin-left:2px; }
.stat .d { font-size:11.5px; color:var(--muted); margin-top:6px; }

.tbl-wrap { overflow-x:auto; border:1px solid var(--line); background:var(--bg); }
.tbl { min-width:760px; font-size:13.5px; }
.tbl th { text-align:left; font-weight:500; font-size:11.5px; letter-spacing:.06em; color:var(--muted);
  text-transform:uppercase; font-family:var(--font-en); padding:13px 16px;
  border-bottom:1px solid var(--line-2); background:var(--bg-soft); white-space:nowrap; }
.tbl td { padding:15px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover { background:var(--bg-soft); }
.tbl .num { font-family:var(--font-en); }
.tbl .right { text-align:right; }
.tbl-thumb { width:44px; height:44px; object-fit:contain; background:var(--bg-soft); padding:4px; }
.tbl-prod { display:flex; align-items:center; gap:12px; }
.tbl-prod .nm { font-weight:500; }
.tbl-prod .sk { font-size:11px; color:var(--muted); font-family:var(--font-en); }

.panel { border:1px solid var(--line); background:var(--bg); }
.panel-head { padding:16px 20px; border-bottom:1px solid var(--line); display:flex;
  justify-content:space-between; align-items:center; gap:14px; }
.panel-head h2 { font-size:15px; font-weight:600; }
.panel-head p { font-size:12px; color:var(--muted); margin-top:3px; }
.panel-body { padding:20px; }
.panel-body.flush { padding:0; }

/* KPI 카드 */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.kpi { background:var(--bg-soft); padding:20px 22px; border-left:2px solid var(--line); }
.kpi.hl { border-left-color:var(--gold); }
.kpi.alert { border-left-color:var(--accent); }
.kpi .k { font-size:12px; color:var(--muted); }
.kpi .v { font-size:26px; font-family:var(--font-en); font-weight:600; margin-top:9px; line-height:1.1; }
.kpi .v .u { font-size:13px; font-family:var(--font-ko); font-weight:400; margin-left:2px; color:var(--ink-2); }
.kpi .d { font-size:11.5px; margin-top:7px; color:var(--muted); }
.kpi .d.up { color:var(--ok); } .kpi .d.dn { color:var(--danger); }

/* 라벨-값 한 줄 */
.stat-line { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.stat-line:last-child { border-bottom:0; }
.stat-line .l { color:var(--muted); }
.stat-line .r { font-weight:500; text-align:right; }
.stat-line .r.num { font-family:var(--font-en); }
.stat-line.total { border-top:1px solid var(--ink); border-bottom:0; margin-top:6px; padding-top:14px; }
.stat-line.total .l { color:var(--ink); font-weight:600; }
.stat-line.total .r { font-size:16px; font-weight:600; }

/* 정산 강조 박스 */
.settle { background:var(--brown); color:var(--brown-ink); padding:22px; }
.settle .k { font-size:11.5px; color:var(--gold-soft); letter-spacing:.02em; }
.settle .big { font-family:var(--font-en); font-weight:600; font-size:30px; margin:10px 0 6px; }
.settle .big span { font-size:16px; }
.settle .d { font-size:11.5px; opacity:.7; }

/* 막대 차트 */
.bar-chart { display:flex; align-items:flex-end; gap:12px; height:170px; }
.bar-chart .col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
.bar-chart .b { width:100%; background:var(--brown); margin-top:auto; transition:height .6s var(--ease); }
.bar-chart .b.mut { background:var(--bg-deep); }
.bar-chart .lb { font-size:11px; color:var(--muted); margin-top:9px; font-family:var(--font-en); }

/* 칩 */
.chip { display:inline-block; font-size:11.5px; padding:3px 9px; border:1px solid var(--line-2);
  color:var(--muted); white-space:nowrap; }
.chip.cel { border-color:var(--brown); color:var(--brown); }
.chip.amb { border-color:var(--warn); color:var(--warn); }
.chip.red { border-color:var(--danger); color:var(--danger); }
.chip.gold { border-color:var(--gold); color:var(--gold); }

/* 안내 노트 */
.note { display:flex; gap:11px; padding:15px 18px; font-size:13px; line-height:1.75;
  background:var(--bg-soft); border-left:2px solid var(--line-2); margin-bottom:22px; }
.note .i { color:var(--gold); flex:0 0 auto; }
.note.info { border-left-color:var(--gold); }
.note.warn { border-left-color:var(--accent); }
.note b { font-weight:600; }

/* ------------------------------------------------------------
   공간별 타일 — 어느 자리를 채우시나요
   ------------------------------------------------------------ */
.spaces { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1vw,16px); }
.sptile { position:relative; overflow:hidden; aspect-ratio:3/4; display:block; background:var(--bg-soft); }
.sptile img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.sptile:hover img { transform:scale(1.05); }
.sptile::after { content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(24,22,20,.66),transparent 56%); }
.sptile .tx { position:absolute; left:16px; right:12px; bottom:15px; z-index:2; color:#fff; }
.sptile .tx .k { display:block; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.sptile .tx .e { display:block; font-family:var(--font-en); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; opacity:.72; margin-top:5px; font-weight:500; margin-left:var(--optical); }

/* ------------------------------------------------------------
   실제로 놓인 모습 — 핀으로 제품을 짚는 사진
   ------------------------------------------------------------ */
.ugc { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); }
.ucard { position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--bg-soft); }
.ucard > img { width:100%; height:100%; object-fit:cover; }
.ucard::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(24,22,20,.62),transparent 50%); }
.ucard .info { position:absolute; left:18px; right:18px; bottom:16px; z-index:3; color:#fff; }
.ucard .info .t { font-size:14.5px; font-weight:600; margin-bottom:5px; letter-spacing:-.01em; }
.ucard .info .m { font-size:11.5px; opacity:.78; }
.pin { position:absolute; z-index:4; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center;
  font-family:var(--font-en); font-size:13px; font-weight:600; color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.24); transition:transform .2s var(--ease), background .2s; }
.pin:hover { transform:scale(1.18); background:#fff; }
.pin::before { content:''; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); animation:pin-pulse 2.6s ease-out infinite; }
@keyframes pin-pulse { 0%{transform:scale(.75);opacity:.9} 70%,100%{transform:scale(1.25);opacity:0} }

/* 핀을 눌렀을 때 뜨는 제품 쪽지 — 기본은 감춰 둔다 */
.pin-pop { position:absolute; z-index:5; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%);
  width:216px; background:var(--bg); box-shadow:0 8px 30px rgba(24,22,20,.28); display:flex;
  align-items:center; gap:11px; padding:10px; text-align:left; cursor:pointer; }
.pin-pop[hidden] { display:none; }          /* display:flex 가 [hidden] 을 덮으므로 명시 */
.pin-pop img { width:52px; height:52px; object-fit:contain; background:var(--bg-soft); flex:0 0 auto; }
.pin-pop > span { min-width:0; }
.pin-pop .b { display:block; font-family:var(--font-en); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pin-pop .n { display:block; font-size:12.5px; font-weight:600; margin-top:3px; line-height:1.35; }
.pin-pop .p { display:block; font-family:var(--font-en); font-size:12px; font-weight:600; margin-top:4px; }
.pin-pop::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--bg); }
/* 카드 가장자리 핀은 쪽지를 안쪽으로 밀어 잘리지 않게 */
.pin.edge-l .pin-pop { left:0; transform:none; }
.pin.edge-l .pin-pop::after { left:13px; }
.pin.edge-r .pin-pop { left:auto; right:0; transform:none; }
.pin.edge-r .pin-pop::after { left:auto; right:13px; }

/* 이벤트 목록 */
.event-row { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,56px); align-items:center; padding:clamp(28px,3.2vw,44px) 0;
  border-bottom:1px solid var(--line); }
.event-row:first-child { border-top:1px solid var(--ink); }
.event-img { overflow:hidden; background:var(--bg-soft); }
.event-img img { width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .7s var(--ease); }
.event-row:hover .event-img img { transform:scale(1.03); }
.event-row.is-end .event-img img { filter:grayscale(1); opacity:.5; }
.event-row.is-end .event-body { opacity:.55; }
.event-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.event-tag { font-size:12px; color:var(--muted); }
.event-period { font-family:var(--font-en); font-size:12px; color:var(--muted); letter-spacing:.03em; }
.event-body h2 { font-size:clamp(19px,2vw,26px); font-weight:700; letter-spacing:-.015em; }
.event-body p { margin-top:12px; font-size:14px; color:var(--ink-2); line-height:1.85; max-width:52ch; }
.event-body .link-underline { margin-top:20px; }

/* 심사 큐 항목 */
.queue-item { display:flex; gap:12px; align-items:flex-start; padding:13px 0;
  border-bottom:1px solid var(--line); }
.queue-item:last-of-type { border-bottom:0; }
.queue-item img { width:46px; height:46px; flex:0 0 auto; object-fit:cover; background:var(--bg-soft); }
.qi-body { min-width:0; flex:1; }
.qi-name { font-size:13.5px; font-weight:600; line-height:1.4; }
.qi-meta { font-size:11.5px; color:var(--muted); margin-top:2px; }
.qi-body .chip { margin-top:7px; }

/* 페이지 헤더 (콘솔) */
.phead { display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:26px; flex-wrap:wrap; }
.phead h2 { font-size:23px; font-weight:500; }
.phead p { font-size:13px; color:var(--muted); margin-top:6px; }

/* 입점 절차 스텝 */
.flow-step { display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.flow-step .n { font-family:var(--font-en); font-size:12px; font-weight:600; color:var(--gold);
  letter-spacing:.1em; padding-top:3px; flex:0 0 auto; }
.flow-step .t { font-size:15.5px; font-weight:600; margin-bottom:6px; }
.flow-step p { font-size:13px; color:var(--muted); line-height:1.75; }
.review-split { display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start; }
.checklist { display:grid; gap:11px; }
.checklist label { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; cursor:pointer; }
.checklist input { margin-top:4px; accent-color:var(--brown); }
.kv { display:grid; grid-template-columns:118px 1fr; gap:10px 14px; font-size:13.5px; }
.kv dt { color:var(--muted); }

/* ------------------------------------------------------------
   18. 토스트 · 데모 리본
   ------------------------------------------------------------ */
.toast { position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px); z-index:300;
  background:var(--ink); color:var(--bg); padding:14px 24px; font-size:13.5px; opacity:0;
  pointer-events:none; transition:.35s var(--ease); }
.toast.on { opacity:1; transform:translate(-50%,0); }
.demo-flag { position:fixed; right:0; bottom:0; z-index:150; background:var(--gold); color:#fff;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-en); padding:7px 14px; }

/* ------------------------------------------------------------
   19. 반응형
   ------------------------------------------------------------ */
@media (max-width:1180px){
  .prod-grid, .arrival-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .unit-grid { grid-template-columns:repeat(3,1fr); }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .review-split { grid-template-columns:1fr; }
}
@media (max-width:1240px){
  .util-item .lb.hide-sm { display:none; }
  .util-link.hide-sm, .util-sep.hide-sm { display:none; }
}
@media (max-width:1080px){
  .gnb, .util-link { display:none; }
  .burger { display:block; }
  .brand-grid { grid-template-columns:repeat(2,1fr); }
  .pdp { grid-template-columns:1fr; } .pdp-gallery { position:static; }
  .console { grid-template-columns:1fr; }
  .console-side { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .console-nav { display:flex; gap:4px; overflow-x:auto; padding:0 12px; }
  .console-nav .grp { display:none; }
  .console-nav a { white-space:nowrap; }
  .btn-auth { display:none; }
}
@media (max-width:860px){
  body { font-size:14.5px; }
  .hero-banner { height:clamp(400px,66svh,560px); }
  .feature-rail { grid-template-columns:1fr; height:auto; }
  .feature-rail-panel { padding:clamp(40px,7vw,64px) var(--gutter); }
  .feature-rail-panel p { max-width:none; }
  .feature-rail-slider { height:clamp(380px,80vw,520px); }
  .rail-card { flex-basis:calc((100% - 12px) / 1.25); }
  .arrival-grid, .prod-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 12px; }
  .split-band { grid-template-columns:1fr; }
  .split-cell { height:clamp(300px,64vw,440px); }
  .mood-3col { grid-template-columns:1fr 1fr; }
  .review-grid { grid-template-columns:1fr; }
  .pt-split { grid-template-columns:1fr !important; }
  .kpis { grid-template-columns:repeat(2,1fr); }
  .review-card { grid-template-columns:92px minmax(0,1fr); }
  .event-row { grid-template-columns:1fr; gap:20px; }
  .review-more { display:none; }
  .video-band { grid-template-columns:1fr; aspect-ratio:auto; }
  .video-media { min-height:240px; }
  .footer-main { grid-template-columns:1fr; gap:40px; }
  .field-row { grid-template-columns:1fr; }
  .stepper { flex-wrap:wrap; } .step { flex:1 1 46%; }
}
@media (max-width:620px){
  .unit-grid { grid-template-columns:repeat(2,1fr); }
  .brand-grid { grid-template-columns:1fr; }
  .stat-row, .kpis { grid-template-columns:1fr; }
  .insta-grid { grid-template-columns:repeat(2,1fr); }
  .insta-big { grid-row:auto; aspect-ratio:5/3; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .hb-cap { bottom:clamp(76px,14vh,110px); }
}