@charset "utf-8";
/* ==========================================================================
   Storefront header, top banner, phone drawer and quick menu — 11/2026 rebuild "Midnight & Brass".
   Markup: components/HeaderClient.tsx (.nh), components/QuickMenu.tsx (.qb). Loaded last (src/app/layout.tsx).
   A white bar with a pill search, then a midnight-navy second row with brass details: the department-store
   signature that the home page (public/css/home.css) carries on.
   Mechanics kept from the 05/11 fix: the sticky bar never changes the page's layout height; the second row,
   the mega panel and the phone search hang below it (absolute) and fold with transform/opacity.
   ========================================================================== */

:root {
  --brand-950: #111a33;
  --brand-900: #172443;
  --brand-800: #1f315c;
  --brand-700: #2c437a;
  --brand-100: #e8ecf5;
  --brass: #c8a24a;
  --brass-hi: #dcc07a;
  --brass-ink: #86671c;
  --brass-soft: #f5edd8;
  --nb-ink: #121725;
  --nb-ink-2: #343b4c;
  --nb-muted: #5d6475;
  --nb-line: #e3e6ee;
  --nb-mist: #f3f5f9;
  --nb-display: 'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', serif;
  --nb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nh-bar: 76px;
  --nh-sub: 52px;
  /* height of the stuck header (bar + category row); sticky page parts sit right under it */
  --nh-stick: calc(var(--nh-bar) + var(--nh-sub));
}

/* the legacy header reserved space with padding / margins for its absolute bars; this one is in the flow */
#wrap > .nh ~ #container.hs01,
#wrap > .nh ~ #container.hs01.spe { margin-top: 0; padding-top: 0; }
@media (max-width: 768px) {
  #wrap:has(> .nh) { padding-top: 0 !important; }
}

.nh .lucide,
.nh-drawer .lucide { stroke-width: 1.6px; }

/* ---------- top banner ---------- */
.nh-topbanner { position: relative; height: 52px; background: var(--brand-950); }
.nh-topbanner__img { display: block; height: 100%; background: center / auto 100% no-repeat; }
.nh-topbanner__tools { position: absolute; top: 50%; right: 16px; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); }
.nh-topbanner__tools button {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.nh-topbanner__x { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0 !important; }

/* ---------- bar ---------- */
.nh {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  transition: margin-bottom .25s var(--nb-ease);
}
.nh-inner { display: flex; align-items: center; gap: 24px; width: calc(100% - 48px); max-width: var(--ui-container, 1400px); margin: 0 auto; }
.nh-bar { position: relative; z-index: 3; background: #fff; }
.nh-bar .nh-inner { height: var(--nh-bar); transition: height .25s var(--nb-ease); }
.nh.is-scrolled .nh-bar { box-shadow: 0 1px 0 var(--nb-line); }
.nh-logo { display: flex; flex: 0 0 auto; align-items: center; }
.nh-logo img { display: block; width: auto; height: 38px; transition: height .25s var(--nb-ease); }
.nh-only-mo { display: none !important; }

/* search: a long pill; focus draws an navy ring */
.nh-search {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 240px;
  max-width: 620px;
  height: 50px;
  margin: 0 auto;
  padding: 0 5px 0 20px;
  border-radius: 999px;
  background: var(--nb-mist);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .2s var(--nb-ease), background-color .2s var(--nb-ease);
}
.nh-search:hover { box-shadow: inset 0 0 0 1px var(--nb-line); }
.nh-search.is-focus { background: #fff; box-shadow: inset 0 0 0 2px var(--brand-800), 0 16px 32px -20px rgba(31, 49, 92, .5); }
.nh-search__ico { flex: 0 0 auto; color: var(--nb-muted); }
#wrap .nh-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--nb-ink);
  font-size: 15px;
  letter-spacing: -0.01em;
}
#wrap .nh-search input::placeholder { color: #7b8480; }
#wrap .nh-search input:focus { border: 0; box-shadow: none; outline: none; }
:is(.nh-search, .nh-msearch) input:focus-visible:not(#__v2a):not(#__v2b) { outline: none !important; }
.nh-search__btn {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--brand-800);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s var(--nb-ease);
}
.nh-search__btn:hover { background: var(--brand-700); }
.nh-search__pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 21, 33, .06), 0 32px 64px -28px rgba(16, 21, 33, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s var(--nb-ease), visibility .2s;
}
.nh-search.is-focus .nh-search__pop { opacity: 1; visibility: visible; transform: none; }
.nh-search__poptit { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--nb-ink); font-size: 13px; font-weight: 700; }
.nh-search__poptit .lucide { color: var(--brass); }
.nh-search__pop ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.nh-search__pop a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 12px; color: var(--nb-ink-2); font-size: 14px; }
.nh-search__pop a:hover { background: var(--nb-mist); color: var(--nb-ink); }
.nh-search__pop em { width: 18px; color: var(--brass-ink); font-family: var(--nb-display); font-style: normal; font-weight: 700; }

/* actions */
.nh-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.nh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s var(--nb-ease), color .2s var(--nb-ease), box-shadow .2s var(--nb-ease);
}
.nh-btn--primary { background: var(--brand-800); color: var(--brass-hi) !important; }
.nh-btn--primary:hover { background: var(--brand-700); }
.nh-btn--dark { background: var(--nb-ink); color: #fff !important; }
.nh-btn--dark:hover { background: var(--brand-800); }
.nh-btn--ghost { background: #fff; color: var(--nb-ink) !important; box-shadow: inset 0 0 0 1px var(--nb-line); }
.nh-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--nb-ink); }
.nh-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--nb-ink-2);
  transition: background-color .2s var(--nb-ease), color .2s var(--nb-ease);
}
.nh-iconbtn:hover { background: var(--nb-mist); color: var(--nb-ink); }
.nh-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--brand-800);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}
.nh-badge--red { background: #c4373b; }
.nh-auth { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.nh-auth .nh-link { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; color: var(--nb-ink-2); font-size: 14px; font-weight: 600; }
.nh-auth .nh-link:hover { color: var(--nb-ink); }

/* member menu */
.nh-me { position: relative; margin-left: 4px; }
.nh-me__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--nb-line);
  transition: box-shadow .2s var(--nb-ease);
}
.nh-me__btn:hover,
.nh-me__btn.on { box-shadow: inset 0 0 0 1px var(--nb-ink); }
.nh-me__name { max-width: 90px; overflow: hidden; color: var(--nb-ink); font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.nh-chev { transition: transform .2s var(--nb-ease); }
.nh-allbtn.on .nh-chev,
.nh-me__btn.on .nh-chev { transform: rotate(180deg); }
.nh-avatar {
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nb-mist) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(16, 21, 33, .06);
}
.nh-avatar--lg { width: 52px; height: 52px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brass); }
.nh-me__pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 304px;
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 21, 33, .06), 0 32px 64px -28px rgba(16, 21, 33, .35);
  animation: v2-pop .2s var(--nb-ease);
}
.nh-me__card { display: flex; align-items: center; gap: 14px; }
.nh-me__card > div { flex: 1 1 auto; min-width: 0; }
.nh-me__card strong { display: block; overflow: hidden; color: var(--nb-ink); font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.nh-me__card span { display: block; margin-top: 2px; color: var(--nb-muted); font-size: 12px; }
.nh-me__cash {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--brand-800);
}
.nh-me__cash span { color: rgba(255, 255, 255, .72); font-size: 13px; }
.nh-me__cash strong { margin-left: auto; color: #fff; font-family: var(--nb-display); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nh-me__cash em { padding: 4px 10px; border-radius: 999px; background: var(--brass); color: var(--brand-950); font-size: 11px; font-style: normal; font-weight: 700; }
.nh-me__pop ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nh-me__pop ul a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; color: var(--nb-ink-2); font-size: 14px; font-weight: 500; }
.nh-me__pop ul a:hover { background: var(--nb-mist); color: var(--nb-ink); }
.nh-me__foot { display: flex; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--nb-line); }
.nh-me__foot a { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; color: var(--nb-muted); font-size: 13px; font-weight: 600; }
.nh-me__foot a:hover { background: var(--nb-mist); color: var(--nb-ink); }

/* ---------- second row: the navy band ---------- */
.nh-sub { background: var(--brand-800); }
.nh-sub .nh-inner { height: var(--nh-sub); gap: 2px; }
.nh-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nh-allbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-right: 14px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--brand-950);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s var(--nb-ease);
}
.nh-allbtn:hover,
.nh-allbtn.on { background: var(--brass-hi); }
.nh-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .82);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s var(--nb-ease), color .2s var(--nb-ease);
}
.nh-sub .nh-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nh-sub .nh-link.on { color: #fff; font-weight: 700; }
.nh-sub .nh-link.on::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--brass);
}
.nh-sublink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(220, 192, 122, .55);
  color: var(--brass-hi);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s var(--nb-ease), color .2s var(--nb-ease);
}
.nh-sublink:hover { background: var(--brass); color: var(--brand-950); }

/* ---------- mega panel ---------- */
.nh-mega { background: #fff; animation: v2-drop .22s var(--nb-ease); }
.nh-mega__in { align-items: stretch; gap: 0; padding: 32px 0 36px; }
.nh-mega__cats { flex: 0 0 auto; width: 232px; padding-right: 20px; border-right: 1px solid var(--nb-line); }
.nh-mega__cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  color: var(--nb-ink-2);
  font-size: 15px;
  font-weight: 600;
  transition: background-color .15s, color .15s;
}
.nh-mega__cats a::after { content: '›'; color: var(--brass); font-size: 18px; opacity: 0; transition: opacity .15s, transform .15s; }
.nh-mega__cats a.on { background: var(--brand-800); color: #fff; }
.nh-mega__cats a.on::after { opacity: 1; transform: translateX(2px); }
.nh-mega__subs { flex: 1 1 auto; padding: 4px 32px; }
.nh-mega__head { display: inline-block; margin-bottom: 16px; color: var(--nb-ink); font-family: var(--nb-display); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.nh-mega__head:hover { color: var(--brand-700); }
.nh-mega__subs ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 16px; }
.nh-mega__subs ul a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; color: var(--nb-ink-2); font-size: 14px; }
.nh-mega__subs ul a:hover { background: var(--nb-mist); color: var(--brand-800); }
.nh-mega__side { display: flex; flex: 0 0 248px; flex-direction: column; gap: 12px; }
.nh-mega__card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  border-radius: 22px;
  background: var(--brass-soft);
  transition: transform .25s var(--nb-ease);
}
.nh-mega__card--mint { background: var(--brand-800); }
.nh-mega__card:hover { transform: translateY(-2px); }
.nh-mega__card strong { color: var(--nb-ink); font-family: var(--nb-display); font-size: 18px; font-weight: 700; }
.nh-mega__card span { margin-top: 4px; color: var(--nb-ink-2); font-size: 13px; }
.nh-mega__card--mint strong { color: #fff; }
/* icon chip on the two mega cards (전체상품 보기 / 견적요청 작성하기) */
.nh-mega__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: auto; border-radius: 14px; background: #fff; color: var(--brand-800); box-shadow: 0 6px 16px -10px rgba(16, 21, 33, .45); }
.nh-mega__card--mint .nh-mega__ico { background: rgba(255, 255, 255, .12); color: var(--brass-hi); box-shadow: none; }
.nh-mega__card { gap: 4px; }
.nh-mega__card--mint span { color: rgba(255, 255, 255, .72); }

/* ---------- PC layout: the header keeps one size while scrolling (owner review 11/2026: folding the second row
   made the whole header grow and shrink); scrolling only adds the hairline under the bar ---------- */
@media (min-width: 769px) {
  .nh { margin-bottom: var(--nh-sub); }
  .nh-sub {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 2;
    transition: transform .28s var(--nb-ease), opacity .2s, visibility 0s;
  }
  /* scrolling down slides the category row up behind the bar (hover or the open mega menu bring it back) */
  html.nh-subhide { --nh-stick: var(--nh-bar); }
  html.nh-subhide .nh:not(:hover):not(.is-mega) .nh-sub {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform .28s var(--nb-ease), opacity .2s, visibility 0s .28s;
  }
  .nh-mega {
    position: absolute;
    top: calc(100% + var(--nh-sub));
    right: 0;
    left: 0;
    z-index: 1;
    max-height: calc(100vh - var(--nh-bar) - var(--nh-sub) - 24px);
    overflow-y: auto;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 32px 48px -32px rgba(16, 21, 33, .45);
  }
}

/* ---------- phones ---------- */
@media (max-width: 768px) {
  :root { --nh-bar: 60px; --nh-stick: var(--nh-bar); }
  .nh { margin-bottom: 0; border-bottom: 1px solid var(--nb-line); }
  .nh-only-pc { display: none !important; }
  .nh-only-mo { display: inline-flex !important; }
  .nh-msearch.nh-only-mo { display: block !important; }
  .nh-bar .nh-inner { gap: 4px; width: calc(100% - 16px); }
  .nh-logo img,
  .nh.is-scrolled .nh-logo img { height: 30px; }
  .nh-actions { margin-left: auto; gap: 0; }
  .nh-btn { padding: 0 16px; font-size: 13px; }
  /* 판매하기 on phones: a slim tinted pill (32px) inside the 44px tap area instead of a big navy block */
  .nh-actions .nh-btn--primary { position: relative; isolation: isolate; padding: 0 12px; background: none; color: var(--brand-800) !important; font-size: 13px; }
  .nh-actions .nh-btn--primary::before { content: ''; position: absolute; inset: 6px 0; z-index: -1; border-radius: 999px; background: var(--brand-100); box-shadow: inset 0 0 0 1px rgba(31, 49, 92, .16); transition: background-color .2s var(--nb-ease); }
  .nh-actions .nh-btn--primary:hover { background: none; }
  .nh-actions .nh-btn--primary:hover::before { background: #dde3f0; }
  .nh-topbanner { height: 44px; }
  .nh-topbanner__tools button:first-child { display: none; }

  .nh-msearch {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--nb-line);
    background: #fff;
    box-shadow: 0 24px 32px -24px rgba(16, 21, 33, .4);
    animation: v2-drop .2s var(--nb-ease);
  }
  .nh-msearch form { display: flex; align-items: center; height: 50px; padding: 0 5px 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--brand-800); }
  #wrap .nh-msearch input[type='text'] { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 8px; border: 0; background: none; box-shadow: none; font-size: 15px; }
  .nh-msearch form button { height: 40px; padding: 0 18px; border-radius: 999px; background: var(--brand-800); color: #fff; font-size: 13px; font-weight: 700; }
  .nh-msearch__pop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
  .nh-msearch__pop span { margin-right: 4px; color: var(--nb-muted); font-size: 12px; font-weight: 700; }
  .nh-msearch__pop a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--nb-mist); color: var(--nb-ink-2); font-size: 13px; }
  .nh-msearch__pop em { color: var(--brass-ink); font-style: normal; font-weight: 700; }
}

/* ---------- phone drawer ---------- */
.nh-drawer { position: fixed; inset: 0; z-index: 100002; visibility: hidden; }
.nh-drawer.open { visibility: visible; }
.nh-drawer__dim { position: absolute; inset: 0; background: rgba(10, 17, 36, .5); opacity: 0; transition: opacity .25s; }
.nh-drawer.open .nh-drawer__dim { opacity: 1; }
.nh-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(88vw, 360px);
  overflow-y: auto;
  padding: 14px 16px 24px;
  border-radius: 0 28px 28px 0;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .32s var(--nb-ease);
  box-sizing: border-box;
}
.nh-drawer.open .nh-drawer__panel { transform: none; }
.nh-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.nh-drawer__guest { padding: 20px; border-radius: 22px; background: var(--brand-800); }
.nh-drawer__guest p { color: #fff; font-family: var(--nb-display); font-size: 17px; font-weight: 700; line-height: 1.45; }
.nh-drawer__guest div { display: flex; gap: 8px; margin-top: 16px; }
.nh-drawer__guest .nh-btn { flex: 1 1 0; }
.nh-drawer__guest .nh-btn--primary { background: var(--brass); color: var(--brand-950) !important; }
.nh-drawer__guest .nh-btn--ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.nh-drawer__me { padding: 16px; border-radius: 22px; background: var(--nb-mist); }
.nh-drawer__set { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--nb-muted); }
.nh-drawer__counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nh-drawer__counts button { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 10px 0; border-radius: 14px; background: #fff; }
.nh-drawer__counts strong { color: var(--nb-ink); font-family: var(--nb-display); font-size: 17px; font-weight: 700; }
.nh-drawer__counts span { margin-top: 2px; color: var(--nb-muted); font-size: 12px; }
.nh-drawer__nav { display: flex; flex-direction: column; margin-top: 18px; }
.nh-drawer__label { margin: 16px 0 8px; color: var(--brass-ink); font-size: 12px; font-weight: 700; }
.nh-drawer__nav > a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--nb-line); color: var(--nb-ink); font-size: 16px; font-weight: 700; }
.nh-drawer__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nh-drawer__chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--nb-mist); color: var(--nb-ink-2); font-size: 14px; font-weight: 600; }
.nh-drawer__logout { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding-top: 24px; color: var(--nb-muted); font-size: 14px; font-weight: 600; }

/* ---------- quick bar (components/QuickMenu.tsx .qb) — Korean-mall style: icon over its name ---------- */
.qb {
  position: fixed;
  right: 20px;
  bottom: 96px; /* above the chat button (.cw-fab: bottom 28px, 48px tall) */
  z-index: 9980;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 72px;
}
.qb-list {
  width: 100%;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 21, 33, .07), 0 12px 32px -16px rgba(16, 21, 33, .28);
}
.qb-list > li { position: relative; }
.qb-list > li + li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--nb-line);
}
.qb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 64px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--nb-ink-2);
  font: inherit;
  cursor: pointer;
  transition: color .2s var(--nb-ease);
}
.qb-item > span { font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.04em; white-space: nowrap; }
.qb-item:hover,
.qb-item.on { color: var(--brand-800); }
.qb-item:hover svg,
.qb-item.on svg { transform: translateY(-1px); }
.qb-item svg { transition: transform .2s var(--nb-ease); }
.qb-item--kakao svg { color: #191919; fill: #fee500; stroke: #191919; }
.qb-pop {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  width: 240px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 21, 33, .07), 0 20px 40px -20px rgba(16, 21, 33, .35);
  transform: translateY(-50%);
  animation: v2-pop .18s var(--nb-ease);
}
.qb-pop strong { display: block; margin-bottom: 6px; color: var(--nb-ink); font-size: 13px; font-weight: 700; }
.qb-pop ul { margin: 0; padding: 0; list-style: none; }
.qb-pop li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--nb-line); }
.qb-pop img { flex: none; width: 44px; height: 30px; object-fit: contain; }
.qb-pop span { color: var(--nb-ink-2); font-size: 13px; line-height: 1.4; }
.qb-top {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--nb-ink);
  font-family: var(--nb-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 0 0 1px rgba(16, 21, 33, .07), 0 12px 32px -16px rgba(16, 21, 33, .28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s var(--nb-ease), transform .25s var(--nb-ease), visibility 0s .25s, color .2s;
}
.qb-top:hover { color: var(--brand-800); }
.qb-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--nb-ease), transform .25s var(--nb-ease), visibility 0s, color .2s; }
/* 최근 본 상품 on top of the quick bar (the goods page's visitGoods cookie) */
.qb-recent { width: 100%; padding: 10px 8px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 0 0 1px rgba(16, 21, 33, .07), 0 12px 32px -16px rgba(16, 21, 33, .28); }
.qb-recent strong { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--nb-ink-2); }
.qb-recent strong b { margin-left: 3px; color: #e8352b; }
.qb-recent ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qb-recent a {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 10px;
  background: var(--nb-mist) url('/img/main/lx/no-image.svg') center / 24px no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(16, 21, 33, .06);
  transition: transform .2s var(--nb-ease);
}
.qb-recent a:hover { transform: scale(1.06); }
@media (max-width: 768px) {
  .qb-recent { display: none; }
}
/* phones: only TOP shows (the legacy .quick_link was hidden there too) */
@media (max-width: 768px) {
  .qb { right: 16px; bottom: 88px; width: 56px; }
  .qb-list { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qb-item svg, .qb-top, .qb-pop { transition: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nh *, .nh-drawer * { transition: none !important; animation: none !important; }
}

/* ---------- Flash Sale price on the goods page (app/item/ItemDetailView.tsx .fs-price) ---------- */
.fs-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fs-price__tag { align-self: center; padding: 3px 8px; border-radius: 6px; background: #e8352b; font-size: 11px; font-weight: 800; font-style: italic; letter-spacing: .02em; color: #fff; }
.fs-price__pct { font-style: normal; font-size: 1.15em; font-weight: 900; color: #e8352b; }
.fs-price__was { font-size: .8em; font-weight: 400; color: #8a909b; }
.fs-price__now strong { color: var(--nb-ink); }