/* marron — storefront. Warm monochrome, editorial, quiet motion. */

:root {
  --ink: #1c1a17;
  --ink-2: #56514a;
  --ink-3: #8e877e;
  --line: #e7e3dc;
  --line-soft: #f1eee9;
  --canvas: #ffffff;
  --bone: #faf8f5;
  --sand: #efeae1;
  --accent: #b08d57;
  --drawer-w: 320px;
  --gap: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.serif {
  font-family: 'Cormorant Garamond', 'Apple SD Gothic Neo', serif;
  letter-spacing: -0.01em;
}

/* ---------- top bar: hamburger + wordmark (white over the hero, ink elsewhere) ---------- */
.top {
  position: fixed; top: 0; left: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  color: #fff;
  transition: color var(--t-mid) var(--ease);
}
.top .brand { display: block; line-height: 0; }
.top .brand img {
  width: 112px; height: auto; display: block;
  filter: drop-shadow(0 1px 2px rgba(28, 26, 23, 0.35));
  transition: filter var(--t-mid) var(--ease);
}
body.past-hero .top, body.nav-open .top { color: var(--ink); }
body.past-hero .top .brand img, body.nav-open .top .brand img { filter: invert(1); }

/* ---------- drawer menu (opens from the hamburger, like mischief.co.kr) ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(var(--drawer-w), 86vw);
  padding: 92px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  z-index: 40;
  background: #fff;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: none;
  transform: translateX(-100%);
  transition: transform var(--t-mid) var(--ease);
}
.sidebar::-webkit-scrollbar { display: none; }
body.nav-open .sidebar { transform: none; }

.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group a {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
  width: fit-content;
  position: relative;
  padding-bottom: 1px;
  transition: color var(--t-fast) ease-out, opacity var(--t-fast) ease-out;
}
.nav-group a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav-group a:hover { color: var(--accent); }
.nav-group a:hover::after { transform: scaleX(1); }
.nav-group a.is-sub { color: var(--ink-2); }

.flags { display: flex; gap: 6px; }
.flags span {
  width: 19px; height: 13px;
  border-radius: 2px;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform var(--t-fast) ease-out, opacity var(--t-fast) ease-out;
  opacity: 0.55;
}
.flags span:hover { transform: translateY(-1px); opacity: 1; }
.flags span[data-on='1'] { opacity: 1; }
.fl-kr { background: #fff; position: relative; overflow: hidden; }
.fl-kr::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(-30deg); border-radius: 50%;
  background: linear-gradient(90deg, #cd2e3a 50%, #0047a0 50%);
}
.fl-us { background: repeating-linear-gradient(#b22234 0 1.6px, #fff 1.6px 3.2px); position: relative; overflow: hidden; }
.fl-us::after { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 7px; background: #3c3b6e; }
.fl-cn { background: #de2910; position: relative; overflow: hidden; }
.fl-cn::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px;
  background: #ffde00; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.fl-jp { background: #fff; position: relative; overflow: hidden; }
.fl-jp::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #bc002d;
}

/* ---------- top utility ---------- */
.util {
  position: fixed;
  top: 26px; right: 30px;
  display: flex;
  gap: 18px;
  z-index: 45;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #fff; /* same rule as the logo: white over the hero, ink elsewhere */
  text-shadow: 0 1px 2px rgba(28, 26, 23, 0.35);
  transition: color var(--t-mid) var(--ease), text-shadow var(--t-mid) var(--ease);
}
body.past-hero .util, body.inner .util { color: var(--ink); text-shadow: none; }
.util a { transition: opacity var(--t-fast) ease-out; }
.util a:hover { opacity: 0.6; }
.util .util-admin { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.util a svg { display: none; } /* text links on desktop, icons on phones */

/* ---------- layout ---------- */
main { margin-left: 0; }

/* ---------- hero (5 stills, crossfade) ---------- */
.hero {
  position: relative;
  height: min(100vh, 56.25vw); /* one screen tall; on windows narrower than 16:9 the box shrinks so the still's central 16:9 safe zone is never cut */
  overflow: hidden;
  isolation: isolate;
  background: var(--sand);
  touch-action: pan-y;
}
.hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 170px; z-index: 2;
  background: linear-gradient(to bottom, rgba(28, 26, 23, 0.34), rgba(28, 26, 23, 0));
  pointer-events: none;
}
.hero .slide { position: absolute; inset: 0; display: block; margin: 0; opacity: 0; transition: opacity 1100ms var(--ease); }
.hero .slide img {
  width: 100%; height: 100%;
  object-fit: cover; /* stills are 8:3 with the subject inside the central 16:9, so narrower windows only lose background at the sides */
  transform: scale(1.06);
  transition: transform 0s 1100ms; /* snap back only after the fade has hidden it */
}
.hero .slide.is-on { opacity: 1; z-index: 1; }
.hero .slide.is-on img { transform: none; transition: transform 7s linear; } /* slow settle while on */
.hero .dots {
  position: absolute; right: 14px; bottom: 6px; z-index: 2;
  display: flex;
  mix-blend-mode: difference; /* stays visible over the photo and over the sand margins */
}
.hero .dots button { position: relative; width: 40px; height: 40px; padding: 0; } /* 40px hit area around a 22px bar */
.hero .dots button::before {
  content: ''; position: absolute; left: 9px; right: 9px; top: 19px; height: 2px;
  background: rgba(255, 255, 255, 0.45);
  transition: background var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.hero .dots button:hover::before { background: rgba(255, 255, 255, 0.85); }
.hero .dots button[aria-selected='true']::before { background: #fff; transform: scaleY(1.6); }
.hero .dots button:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

/* ---------- inner pages (no hero): the top bar is ink from the start ---------- */
body.inner .top { color: var(--ink); }
body.inner .top .brand img { filter: invert(1); }
body.inner .hamburger { filter: none; }
main.inner { padding-top: 118px; min-height: 70vh; }
.nav-group a[aria-current='page'] { color: var(--accent); }
.nav-group a[aria-current='page']::after { transform: scaleX(1); }

/* ---------- section head ---------- */
.sec-head { text-align: center; margin: 0 0 34px; padding: 0 16px; }
.sec-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.sec-head p { margin: 0; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-3); }

/* ---------- product grid ---------- */
.grid-wrap { padding: 0 0 70px; } /* full-bleed like mischief.co.kr/product/list.html */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 1px; /* hairline between the big 4:5 shots */
}
.card { position: relative; display: block; color: inherit; }
.card .thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.card .thumb .ph,
.card .thumb .shot { position: absolute; inset: 0; transition: transform 900ms var(--ease); }
.card .thumb .shot { width: 100%; height: 100%; object-fit: cover; }
.card:hover .thumb .ph,
.card:hover .thumb .shot { transform: scale(1.045); }
.card .meta { text-align: left; padding: 10px 12px 0; }
.card .meta .en { font-size: 12px; letter-spacing: 0.02em; }
.card .meta .ko { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.card .meta .price { font-size: 12px; margin-top: 8px; letter-spacing: 0.02em; }
.card .meta .price s { color: var(--ink-3); margin-right: 6px; }
.card .badge {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 19px;
}
.card .badge[data-b='SALE'] { background: #fdebec; color: #9f2f2d; }
.card .badge[data-b='BEST'] { background: #fbf3db; color: #956400; }
.card .badge[data-b='NEW'] { background: #edf3ec; color: #346538; }

.more-wrap { display: flex; justify-content: center; padding: 26px 0 96px; }
.more {
  border: 1px solid var(--line);
  padding: 15px 62px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  border-radius: 4px;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, transform 120ms ease-out;
}
.more:hover { background: var(--ink); color: #fff; }
.more:active { transform: scale(0.985); }

/* ---------- footer ---------- */
footer { background: var(--bone); border-top: 1px solid var(--line); }
.foot-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 66px 30px 30px;
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 1.3fr 1fr;
  gap: 30px;
}
.foot-grid h4 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink);
}
.foot-grid p { margin: 0 0 6px; font-size: 11px; color: var(--ink-2); line-height: 1.75; }
.foot-grid .strong { color: var(--ink); font-weight: 500; }
.foot-grid h4 a { transition: opacity var(--t-fast) ease-out; }
.foot-grid h4 a:hover { opacity: 0.6; }
/* business details stay folded until MARRON is pressed */
.foot-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; letter-spacing: inherit; font-weight: inherit; }
.foot-toggle::before { /* chevron sits in front of the word */
  content: ''; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-mid) var(--ease);
}
.foot-grid.is-open .foot-toggle::before { transform: translateY(1px) rotate(225deg); }
.foot-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.foot-body > div { min-height: 0; overflow: hidden; }
.foot-body > div > :first-child { margin-top: 14px; }
.foot-grid.is-open .foot-body { grid-template-rows: 1fr; opacity: 1; }
.foot-bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.foot-bar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-bar nav a { transition: color var(--t-fast) ease-out; }
.foot-bar nav a:hover { color: var(--ink); }

/* ---------- to top ---------- */
.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  border-radius: 4px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), background var(--t-fast) ease-out;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--bone); }
.to-top svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 1.4; }

/* ---------- placeholder art (generated in-CSS, no external assets) ---------- */
.ph {
  --a: #c9b7a0; --b: #efe6da; --c: #9c866c; --d: #6f5c46;
  background:
    /* vignette */
    radial-gradient(120% 100% at 50% 42%, transparent 44%, rgba(60, 46, 32, 0.26) 100%),
    /* soft-focus subject mass */
    radial-gradient(46% 38% at 44% 58%, var(--d), transparent 68%),
    radial-gradient(58% 46% at 68% 30%, var(--c), transparent 70%),
    /* light source */
    radial-gradient(70% 56% at 18% 12%, rgba(255, 252, 246, 0.92), transparent 62%),
    linear-gradient(163deg, var(--b) 6%, var(--a) 68%, var(--c) 100%);
  position: relative;
  overflow: hidden;
}
/* grain */
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* botanical line motif — the brand's illustration language, drawn not photographed */
.ph::before {
  content: '';
  position: absolute;
  inset: 8% 6%;
  opacity: 0.2;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' fill='none' stroke='%23fffaf2' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M150 396 C150 300 150 210 150 132'/%3E%3Cpath d='M150 300 C112 288 88 258 84 216 C126 220 148 250 150 300Z'/%3E%3Cpath d='M150 252 C188 240 212 210 216 168 C174 172 152 202 150 252Z'/%3E%3Cpath d='M150 196 C118 186 98 160 95 124 C130 128 148 154 150 196Z'/%3E%3Cpath d='M150 132 c-26 -20 -30 -56 -8 -80 c22 -22 58 -18 76 8 c16 24 8 58 -20 72'/%3E%3Cpath d='M108 60 c-18 6 -32 22 -34 42'/%3E%3Cpath d='M204 44 c20 10 30 30 28 52'/%3E%3C/svg%3E");
}
.ph[data-tone='0'] { --a: #cdb99f; --b: #f3ebdf; --c: #9d8464; --d: #6d5637; }
.ph[data-tone='1'] { --a: #a9bcc2; --b: #e8f0f2; --c: #728e97; --d: #47616b; }
.ph[data-tone='2'] { --a: #b2c0a4; --b: #ecf1e6; --c: #7d8f6c; --d: #4f6142; }
.ph[data-tone='3'] { --a: #d9b8b1; --b: #f7ebe8; --c: #ab7f76; --d: #7a4f47; }
.ph[data-tone='4'] { --a: #bfa992; --b: #ece0d2; --c: #8d745a; --d: #5d4831; }
.ph[data-tone='5'] { --a: #cabfaa; --b: #f4efe4; --c: #968a72; --d: #63594a; }
.ph[data-tone='6'] { --a: #b6a8c1; --b: #ece7f1; --c: #827490; --d: #574c66; }
.ph[data-tone='7'] { --a: #c8b28c; --b: #f0e6d2; --c: #977b4f; --d: #634a29; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ---------- hamburger ---------- */
.hamburger {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  color: inherit;
  filter: drop-shadow(0 1px 2px rgba(28, 26, 23, 0.35));
}
body.past-hero .hamburger, body.nav-open .hamburger { filter: none; }
.hamburger i { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; transition: transform var(--t-mid) var(--ease); }
.hamburger i::before, .hamburger i::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) ease-out;
}
.hamburger i::before { top: -6px; }
.hamburger i::after { top: 6px; }
body.nav-open .hamburger i { transform: rotate(45deg); }
body.nav-open .hamburger i::before { transform: translateY(6px) rotate(-90deg); }
body.nav-open .hamburger i::after { opacity: 0; }

.scrim {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(28, 26, 23, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}
body.nav-open .scrim { opacity: 1; pointer-events: auto; }

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* phone header: solid white bar — hamburger left, ink wordmark centred, search + bag icons right */
  .top {
    left: 0; right: 0; height: 56px; padding: 0 6px; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); color: var(--ink);
  }
  .top .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: auto; }
  .top .brand img { width: 96px; filter: invert(1); }
  .hamburger { filter: none; }
  .util { top: 0; right: 6px; height: 56px; align-items: center; gap: 2px; color: var(--ink); text-shadow: none; z-index: 61; } /* above the white bar */
  .util .util-hide { display: none; }
  .util .util-search, .util .util-cart { display: grid; place-items: center; width: 40px; height: 40px; }
  .util .util-search { order: 1; } .util .util-cart { order: 2; } /* magnifier left, bag right */
  .util a span { display: none; }
  .util a svg { display: block; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .hero::before { display: none; }
  main { padding-top: 56px; }
  main.inner { padding-top: 84px; }
  .hero { height: min(calc(100vh - 56px), 177.78vw); } /* portrait 9:16 stills on phones, under the bar, never taller than one screen */
  .hero .dots { right: 2px; bottom: 0; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr; padding: 44px 16px 24px; }
  .foot-bar { padding: 18px 16px 32px; }
  .to-top { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- product detail (/product/?id=) — same form as the reference Cafe24 detail page ---------- */
.pdp { max-width: 1180px; margin: 0 auto; padding: 0 30px 80px; }
.pdp-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.pdp-gallery { position: sticky; top: 90px; }
.pdp-main { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.pdp-main img, .pdp-main .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pdp-thumbs button { width: 64px; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 1px solid transparent; opacity: 0.6; transition: opacity var(--t-fast) ease-out, border-color var(--t-fast) ease-out; }
.pdp-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs button.on, .pdp-thumbs button:hover { opacity: 1; border-color: var(--ink); }
.pdp-info h1 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 28px; letter-spacing: 0.01em; margin: 6px 0 4px; line-height: 1.2; }
.pdp-sub { margin: 0 0 22px; font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; }
.pdp-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 12px; }
.pdp-tbl th, .pdp-tbl td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.pdp-tbl th { width: 96px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.04em; }
.pdp-price strong { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.pdp-price s { color: var(--ink-3); margin-right: 8px; }
.pdp-opts { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pdp-opts label { display: grid; grid-template-columns: 96px 1fr; align-items: center; font-size: 12px; }
.pdp-opts label > span:first-child { color: var(--ink-2); letter-spacing: 0.06em; }
.pdp-opts select { height: 40px; border: 1px solid var(--line); background: #fff; padding: 0 12px; font: inherit; font-size: 12px; color: var(--ink); border-radius: 0; }
.pdp-qty { display: inline-flex; border: 1px solid var(--line); width: fit-content; }
.pdp-qty button { width: 36px; height: 38px; font-size: 16px; }
.pdp-qty input { width: 48px; height: 38px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: inherit; font-size: 12px; }
.pdp-total { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ink); display: flex; align-items: baseline; gap: 10px; font-size: 12px; letter-spacing: 0.06em; }
.pdp-total strong { font-size: 20px; font-weight: 600; letter-spacing: 0.01em; margin-left: auto; }
.pdp-total em { font-style: normal; color: var(--ink-3); }
.pdp-actions { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pdp-actions button { height: 50px; border: 1px solid var(--ink); font-size: 12px; letter-spacing: 0.16em; transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out; }
.pdp-actions button:hover { background: var(--bone); }
.pdp-actions .pdp-buy { background: var(--ink); color: #fff; }
.pdp-actions .pdp-buy:hover { background: #000; }
.pdp-actions .pdp-buy:disabled { background: var(--line); border-color: var(--line); color: var(--ink-3); cursor: default; }
.pdp-sec { margin-top: 96px; }
.pdp-sec h2 { text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 24px; letter-spacing: 0.08em; margin: 0 0 30px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.pdp-desc { max-width: 720px; margin: 0 auto 36px; text-align: center; font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.pdp-detail { max-width: 860px; margin: 0 auto; }
.pdp-detail img { width: 100%; display: block; }
.rv-sum { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 12px; color: var(--ink-2); }
.rv-sum strong { color: #d9a441; letter-spacing: 2px; font-weight: 400; font-size: 14px; }
.rv-tbl { width: 100%; border-collapse: collapse; font-size: 12px; border-top: 1px solid var(--ink); }
.rv-tbl th { padding: 12px 8px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink-2); letter-spacing: 0.04em; text-align: center; }
.rv-tbl td { padding: 13px 8px; border-bottom: 1px solid var(--line); text-align: center; color: var(--ink-2); }
.rv-tbl .ttl { text-align: left; color: var(--ink); }
.rv-tbl .no, .rv-tbl .view { width: 56px; }
.rv-tbl .rate { width: 96px; color: #d9a441; letter-spacing: 1px; }
.rv-tbl .who { width: 90px; }
.rv-tbl .date { width: 100px; }
.rv-row { cursor: pointer; }
.rv-row:hover .ttl, .rv-row.open .ttl { text-decoration: underline; text-underline-offset: 3px; }
.rv-pic { display: inline-block; width: 10px; height: 8px; border: 1px solid currentColor; border-radius: 1px; margin-right: 6px; opacity: 0.6; }
.rv-body td { text-align: left; background: var(--bone); padding: 18px 20px; line-height: 1.8; }
.rv-body img { max-width: 320px; display: block; margin-bottom: 12px; }
.rv-body p { margin: 0; }
.pdp-notes dl { max-width: 860px; margin: 0 auto; font-size: 12px; line-height: 1.8; color: var(--ink-2); }
.pdp-notes dt { font-weight: 600; color: var(--ink); margin-top: 16px; letter-spacing: 0.04em; }
.pdp-notes dd { margin: 4px 0 0; }
.pdp-empty { text-align: center; color: var(--ink-3); font-size: 12px; padding: 30px 0; }
.pdp-toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(10px); background: var(--ink); color: #fff; font-size: 12px; letter-spacing: 0.04em; padding: 12px 20px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); z-index: 80; }
.pdp-toast.show { opacity: 1; transform: translateX(-50%); }
@media (max-width: 1080px) { .pdp-top { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 760px) {
  .pdp { padding: 0 16px 60px; }
  .pdp-top { grid-template-columns: 1fr; gap: 24px; }
  .pdp-gallery { position: static; margin: 0 -16px; }
  .pdp-thumbs { padding: 0 16px; }
  .pdp-sec { margin-top: 60px; }
  .rv-tbl .no, .rv-tbl .view, .rv-tbl th.date, .rv-tbl td.date { display: none; }
}

/* ---------- account pages: /join/ /login/ /cart/ /mypage/ ---------- */
.util .util-cart { position: relative; }
.cart-n { position: absolute; top: -9px; right: -12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; font-style: normal; letter-spacing: 0; line-height: 16px; text-align: center; text-shadow: none; }
.acct { max-width: 520px; margin: 0 auto; padding: 0 20px 90px; }
.acct.wide { max-width: 920px; }
.acct h1 { text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; letter-spacing: 0.1em; margin: 0 0 32px; }
.acct-form { display: flex; flex-direction: column; gap: 14px; }
.acct-form h2, .my-sec h2 { font-size: 12px; letter-spacing: 0.16em; font-weight: 600; margin: 24px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.acct-form label { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 12px; }
.acct-form label > span:first-child { color: var(--ink-2); letter-spacing: 0.04em; }
.acct-form input:not([type='checkbox']) { height: 42px; border: 1px solid var(--line); padding: 0 12px; font: inherit; font-size: 13px; color: var(--ink); background: #fff; border-radius: 0; }
.acct-form input:focus { outline: none; border-color: var(--ink); }
.acct-form label.chk { grid-template-columns: auto 1fr; justify-content: start; margin-top: 4px; }
.acct-form label.chk input { width: 16px; height: 16px; accent-color: var(--ink); }
.acct-form label.chk a { text-decoration: underline; text-underline-offset: 3px; }
.acct-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border: 1px solid var(--ink); font-size: 12px; letter-spacing: 0.16em; background: #fff; color: var(--ink); cursor: pointer; transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, opacity var(--t-fast) ease-out; }
.acct-btn:hover { background: var(--bone); }
.acct-btn.primary { background: var(--ink); color: #fff; }
.acct-btn.primary:hover { background: #000; }
.acct-btn.ghost { border-color: var(--line); color: var(--ink-3); }
.acct-btn.is-busy, .acct-btn:disabled { opacity: 0.5; cursor: default; }
.acct-form .acct-btn { margin-top: 10px; }
.acct-links { text-align: center; font-size: 12px; margin: 10px 0 0; }
.acct-links a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.acct-help { font-size: 12px; color: var(--ink-3); line-height: 1.8; margin: 0; }
.acct-empty { text-align: center; color: var(--ink-3); font-size: 12px; padding: 40px 0 10px; }
.acct-center { text-align: center; margin: 20px 0 0; }
.acct-notice { background: var(--bone); border: 1px solid var(--line); padding: 16px 18px; font-size: 12px; line-height: 1.8; margin-bottom: 26px; }
.cart-tbl { width: 100%; border-collapse: collapse; font-size: 12px; border-top: 1px solid var(--ink); }
.cart-tbl th { padding: 12px 8px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink-2); letter-spacing: 0.04em; text-align: left; }
.cart-tbl td { padding: 14px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-tbl .c-img { width: 72px; } .cart-tbl .c-img img { width: 64px; height: 80px; object-fit: cover; display: block; }
.cart-tbl .c-name .en { display: block; } .cart-tbl .c-name .ko, .cart-tbl .c-name .opt { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.cart-tbl .c-qty { width: 140px; } .cart-tbl .c-amt { width: 110px; text-align: right; font-weight: 600; }
.cart-tbl .c-del { width: 36px; text-align: right; } .cart-tbl .c-del button { font-size: 18px; color: var(--ink-3); }
.cart-sum { margin: 24px 0 0 auto; max-width: 360px; font-size: 12px; }
.cart-sum > div { display: flex; justify-content: space-between; padding: 8px 0; }
.cart-sum .total { border-top: 1px solid var(--ink); margin-top: 6px; padding-top: 14px; font-size: 14px; }
.cart-sum .total b { font-size: 18px; }
.cart-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 26px; }
.checkout { margin-top: 40px; }
.my-sec { margin-top: 36px; }
.my-info { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; font-size: 12px; margin: 14px 0 0; }
.my-info dt { color: var(--ink-2); } .my-info dd { margin: 0; }
.my-order { border: 1px solid var(--line); margin-top: 14px; font-size: 12px; }
.my-order-hd { display: flex; gap: 16px; padding: 10px 14px; background: var(--bone); border-bottom: 1px solid var(--line); }
.my-order-hd b { margin-left: auto; }
.my-order-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.my-order-row span { color: var(--ink-3); }
.my-order-ft { display: flex; justify-content: space-between; padding: 10px 14px; }
@media (max-width: 760px) {
  .acct { padding: 0 16px 60px; }
  .acct-form label { grid-template-columns: 1fr; gap: 6px; }
  .cart-tbl th.c-qty, .cart-tbl td.c-qty { width: 110px; }
  .cart-tbl .c-amt { width: 84px; }
  .my-order-row { grid-template-columns: 1fr auto; }
}