:root{
  --bg: #ffffff;
  --bg-alt: #faf8f5;
  --line: #eae6de;
  --ink: #1b1a18;
  --ink-soft: #55524c;
  --ink-mute: #9a968c;
  --gold: #a9895c;
  --gold-dark: #8a6d43;
  --radius: 2px;
  --maxw: 1360px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Noto Sans KR', sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
.serif{ font-family:'Playfair Display', serif; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }

/* ---------- Promo bar ---------- */
.promo-bar{
  background:var(--ink);
  color:#fff;
  text-align:center;
  font-size:12px;
  letter-spacing:.08em;
  padding:9px 20px;
  font-weight:300;
}
.promo-bar b{ color:var(--gold); font-weight:500; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; height:88px;
}
.menu-trigger{
  display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.12em; color:var(--ink-soft);
  justify-self:start;
}
.menu-trigger svg{ width:18px; height:18px; }
.menu-trigger:hover{ color:var(--ink); }

.logo{ justify-self:center; text-align:center; line-height:1; }
.logo .mark{ font-size:26px; letter-spacing:.06em; font-weight:600; }
.logo .sub{ display:block; font-size:9.5px; letter-spacing:.35em; color:var(--ink-mute); margin-top:5px; font-family:'Noto Sans KR',sans-serif; }

.header-icons{ justify-self:end; display:flex; align-items:center; gap:22px; }
.header-icons svg{ width:19px; height:19px; }
.icon-btn{ display:flex; align-items:center; color:var(--ink-soft); }
.icon-btn:hover{ color:var(--ink); }
.signin-btn{
  font-size:11.5px; letter-spacing:.1em; padding:9px 20px;
  border:1px solid var(--ink); border-radius:20px;
  transition:.2s;
}
.signin-btn:hover{ background:var(--ink); color:#fff; }

/* GNB */
.gnb{ border-top:1px solid var(--line); }
.gnb-list{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:flex; justify-content:center; gap:70px; }
.gnb-item{ position:relative; }
.gnb-item > a{
  display:block; padding:16px 4px 15px; font-size:13.5px; letter-spacing:.14em;
  border-bottom:2px solid transparent;
}
.gnb-item:hover > a{ border-color:var(--gold); color:var(--ink); }
.mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.06);
  padding:26px 34px; display:grid; grid-template-columns:repeat(2,auto); gap:10px 42px;
  opacity:0; visibility:hidden; translate:0 6px;
  transition:.18s ease; white-space:nowrap;
}
.gnb-item:hover .mega{ opacity:1; visibility:visible; translate:0 0; }
.mega a{ font-size:12.5px; color:var(--ink-soft); padding:3px 0; display:block; }
.mega a:hover{ color:var(--gold-dark); }

/* ---------- Category Drawer ---------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(20,18,16,.35);
  opacity:0; visibility:hidden; transition:.25s; z-index:300;
}
.category-drawer{
  position:fixed; top:0; left:-420px; width:400px; max-width:88vw; height:100%;
  background:#fff; z-index:301; display:flex; flex-direction:column;
  transition:left .3s ease; box-shadow:20px 0 50px rgba(0,0,0,.08);
}
body.drawer-open .drawer-overlay{ opacity:1; visibility:visible; }
body.drawer-open .category-drawer{ left:0; }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 26px; border-bottom:1px solid var(--line);
}
.drawer-head span{ font-size:12px; letter-spacing:.2em; color:var(--ink-mute); }
.drawer-close svg{ width:18px; height:18px; }

.drawer-main-list{ display:flex; border-bottom:1px solid var(--line); }
.drawer-main-list li{
  flex:1; text-align:center; padding:16px 6px; font-size:12.5px; letter-spacing:.08em;
  color:var(--ink-mute); border-bottom:2px solid transparent; cursor:pointer;
}
.drawer-main-list li small{ display:block; font-size:14px; margin-top:3px; letter-spacing:.02em; color:inherit; font-family:'Playfair Display',serif;}
.drawer-main-list li.active{ color:var(--ink); border-color:var(--gold); }
.drawer-main-list li.disabled{ cursor:default; color:#d8d4cb; }
.drawer-main-list li.disabled small{ font-size:9.5px; margin-top:5px; font-family:'Noto Sans KR'; letter-spacing:.05em;}

.drawer-body{ flex:1; overflow-y:auto; padding:22px 24px 40px; }
.drawer-panel{ display:none; }
.drawer-panel.active{ display:block; }
.drawer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px 14px; }
.drawer-brand{ text-align:center; }
.drawer-brand .thumb{
  aspect-ratio:1/1; border-radius:50%; overflow:hidden; margin-bottom:9px;
  border:1px solid var(--line);
}
.drawer-brand .thumb img{ width:100%; height:100%; object-fit:cover; }
.drawer-brand span{ font-size:11.5px; color:var(--ink-soft); letter-spacing:.02em; }

/* ---------- Hero ---------- */
.hero{ position:relative; height:78vh; min-height:560px; overflow:hidden; }
.hero img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,9,8,.42), rgba(10,9,8,.06) 55%);
}
.hero-caption{
  position:absolute; left:0; right:0; bottom:64px; text-align:center; color:#fff; z-index:2;
  padding:0 20px;
}
.hero-caption .eyebrow{ font-size:12px; letter-spacing:.35em; color:#e9e2d4; margin-bottom:18px; }
.hero-caption h1{
  font-family:'Playfair Display', serif; font-weight:500; font-style:italic;
  font-size:clamp(26px,4vw,46px); line-height:1.35; max-width:780px; margin:0 auto 30px;
}
.hero-cta{
  display:inline-block; padding:14px 38px; border:1px solid #fff; font-size:12px; letter-spacing:.16em;
  transition:.2s;
}
.hero-cta:hover{ background:#fff; color:var(--ink); }

/* ---------- Wide Banner ---------- */
.wide-banner{ width:100%; line-height:0; }
.wide-banner img{ width:100%; height:auto; }

/* ---------- Section heading ---------- */
.section-head{ text-align:center; margin-bottom:56px; }
.section-head .eyebrow{ font-size:11.5px; letter-spacing:.3em; color:var(--gold-dark); margin-bottom:14px; }
.section-head h2{ font-family:'Playfair Display', serif; font-size:32px; font-weight:500; letter-spacing:.01em; }
.section-head p.desc{ margin-top:12px; font-size:13px; color:var(--ink-mute); letter-spacing:.02em; }

section.pad{ padding:110px 0; }
section.alt{ background:var(--bg-alt); }

/* ---------- Brand showcase ---------- */
.brand-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 240px));
  gap:34px; justify-content:center;
}
.brand-card{ position:relative; text-align:center; }
.brand-card .frame{
  aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius);
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  /*padding:15%;*/
  transition:border-color .3s ease, box-shadow .3s ease;
  border-radius:50%;
}
.brand-card .frame img{ width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.brand-card:hover .frame{ border-color:var(--gold); box-shadow:0 16px 34px rgba(20,18,16,.07); }
.brand-card:hover .frame img{ transform:scale(1.04); }
.brand-card .cap{ margin-top:20px; }
.brand-card .cap .kr{ font-size:16px; letter-spacing:.06em; font-weight:500; }
.brand-card .cap .en{ display:block; font-size:10px; letter-spacing:.22em; color:var(--ink-mute); margin-top:6px; }

.brand-grid.cols-4-single{ max-width:1080px; margin:0 auto; }

/* ---------- Product grid ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:38px 30px; }
.product-card .frame{
  position:relative; aspect-ratio:1/1; overflow:hidden; background:#f5f3ef; border-radius:var(--radius);
}
.product-card .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .frame img{ transform:scale(1.05); }
.badge{
  position:absolute; top:12px; left:12px; background:var(--ink); color:#fff;
  font-size:10px; letter-spacing:.12em; padding:5px 10px;
}
.wish-btn{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-6px); transition:.2s;
}
.product-card:hover .wish-btn{ opacity:1; transform:none; }
.wish-btn svg{ width:15px; height:15px; }
.product-card .info{ margin-top:16px; }
.product-card .brand{ font-size:10.5px; letter-spacing:.16em; color:var(--ink-mute); }
.product-card .name{ font-size:13.5px; margin-top:6px; line-height:1.5; color:var(--ink-soft); }
.product-card .price{ margin-top:9px; font-size:14.5px; font-weight:500; display:flex; gap:8px; align-items:baseline; }
.product-card .price .old{ font-size:12px; color:var(--ink-mute); text-decoration:line-through; font-weight:300; }
.product-card .price .sale{ color:var(--gold-dark); }

.section-more{ text-align:center; margin-top:56px; }
.section-more a{
  font-size:12px; letter-spacing:.16em; padding:13px 34px; border:1px solid var(--ink-mute); display:inline-block;
  transition:.2s;
}
.section-more a:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line); padding:70px 20px; text-align:center; background:#fff;
}
.footer-logo{ display:inline-flex; align-items:center; gap:12px; }
.footer-logo .monogram{
  width:38px; height:38px; border:1px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:16px;
}
.footer-logo .name{ text-align:left; line-height:1.3; }
.footer-logo .name .mark{ font-size:18px; letter-spacing:.05em; font-weight:600; }
.footer-logo .name .sub{ font-size:9px; letter-spacing:.3em; color:var(--ink-mute); }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .brand-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  section.pad{ padding:80px 0; }
  .header-inner{ padding:0 24px; height:78px; }
  .gnb-list{ gap:44px; }
}
@media (max-width:640px){
  .promo-bar{ font-size:10.5px; }
  .header-icons{ gap:14px; }
  .header-icons .signin-btn{ display:none; }
  .logo .mark{ font-size:20px; }
  .brand-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .drawer-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-caption{ bottom:36px; }
  .container{ padding:0 20px; }
  .header-inner{ padding:0 16px; }
  .gnb-list{ padding:0 16px; gap:30px; }
  .mega{ display:none; }
}