/* ════════════════════════════════════════════════════════════════════
   Yukifu · Common-component Apple-minimal polish
   Targets: header (m24-header), footer (m24-footer), floating chat
   FAB / callout, cookie banner. Loaded on every page.
   Version: 20260512h (final — footer dot scope + search submit + cookie grid)
   ════════════════════════════════════════════════════════════════════ */

:root{
  --cp-text:    #1d1d1f;
  --cp-soft:    #424245;
  --cp-mute:    #6e6e73;
  --cp-dim:     #86868b;
  --cp-bg:      #ffffff;
  --cp-bg-soft: #fbfbfd;
  --cp-bg-muted:#f5f5f7;
  --cp-bg-tint: #eef0f3;
  --cp-line:    #d2d2d7;
  --cp-line-soft:#e5e5ea;
  --cp-line-faint:#ececef;
  --cp-accent:  #0071e3;
  --cp-accent-hover:#0077ed;
  --cp-radius:  14px;
  --cp-radius-pill:980px;
  --cp-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --cp-shadow:  0 4px 16px rgba(0,0,0,.06);
  --cp-shadow-lg:0 10px 30px rgba(0,0,0,.08);
  --cp-font:
    -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","SF Pro KR",
    "Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",
    system-ui,sans-serif;
  --cp-ease: cubic-bezier(.22,1,.36,1);
  --cp-dur: 220ms;
  --cp-dur-fast: 140ms;
}

/* ── 1. Header ──────────────────────────────────────────────── */
header.m24-header,
.m24-header.light-surface,
header.m24-header.mounted{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:saturate(180%) blur(18px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(18px) !important;
  border-bottom:1px solid var(--cp-line-faint) !important;
  box-shadow:none !important;
  min-height:52px !important;
}
.m24-header .m24-header-inner,
.m24-header.light-surface .m24-header-inner{
  min-height:52px !important;
  padding:0 clamp(20px,2.5vw,40px) !important;
  font-family:var(--cp-font) !important;
}

/* Logo wordmark — clean Pretendard/SF Pro, NOT Quicksand */
.m24-header .m24-logo-mark,
.m24-logo-mark{
  font-family:var(--cp-font) !important;
  font-size:22px !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
  color:var(--cp-accent) !important;
  text-rendering:geometricPrecision !important;
}

/* Nav links */
.m24-header .m24-nav-link,
.m24-mega-nav .m24-nav-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:6px 12px !important;
  border-radius:var(--cp-radius-pill) !important;
  background:transparent !important;
  color:var(--cp-text) !important;
  font-family:var(--cp-font) !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  letter-spacing:-.012em !important;
  text-decoration:none !important;
  transition:background var(--cp-dur-fast) var(--cp-ease) !important;
}
.m24-header .m24-nav-link:hover{
  background:var(--cp-bg-muted) !important;
  color:var(--cp-text) !important;
}
.m24-header .m24-nav-link.active{
  background:var(--cp-bg-muted) !important;
  color:var(--cp-text) !important;
  font-weight:600 !important;
}
.m24-header .m24-nav-link-chev{
  font-size:9px !important;
  opacity:.5 !important;
  margin-left:2px !important;
}

/* Mega menu */
.m24-mega-menu{
  border:1px solid var(--cp-line-soft) !important;
  border-radius:var(--cp-radius) !important;
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  box-shadow:var(--cp-shadow-lg) !important;
  padding:18px 22px !important;
}
.m24-mega-col h2{
  color:var(--cp-text-mute) !important;
  font-family:var(--cp-font) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  margin:0 0 6px !important;
}
.m24-mega-col a{
  display:block !important;
  padding:6px 0 !important;
  color:var(--cp-text) !important;
  font-family:var(--cp-font) !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  letter-spacing:-.012em !important;
  text-decoration:none !important;
  transition:color var(--cp-dur-fast) var(--cp-ease) !important;
}
.m24-mega-col a:hover{
  color:var(--cp-accent) !important;
}

/* Header search bar */
.m24-header .m24-header-search,
.m24-header-search{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  height:36px !important;
  padding:0 6px 0 14px !important;
  border:1px solid var(--cp-line-soft) !important;
  border-radius:var(--cp-radius-pill) !important;
  background:rgba(255,255,255,.7) !important;
  box-shadow:none !important;
  transition:border-color var(--cp-dur-fast) var(--cp-ease),
             background var(--cp-dur-fast) var(--cp-ease) !important;
}
.m24-header .m24-header-search:focus-within{
  border-color:var(--cp-accent) !important;
  background:#fff !important;
}
.m24-header .m24-header-search input,
.m24-header-search input{
  border:0 !important;
  background:transparent !important;
  outline:0 !important;
  width:160px !important;
  color:var(--cp-text) !important;
  font-family:var(--cp-font) !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:-.012em !important;
}
.m24-header .m24-header-search input::placeholder{
  color:var(--cp-text-mute) !important;
}
.m24-header .m24-search-submit,
.m24-search-submit{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  position:relative !important;
  height:28px !important;
  min-width:auto !important;
  width:auto !important;
  padding:0 14px !important;
  border:0 !important;
  border-radius:var(--cp-radius-pill) !important;
  background:var(--cp-accent) !important;
  color:#fff !important;
  font-family:var(--cp-font) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:-.005em !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  cursor:pointer !important;
  transition:background var(--cp-dur-fast) var(--cp-ease) !important;
}
/* Disable legacy ::before/::after icon glyphs that would overlay on the text */
.m24-header .m24-search-submit::before,
.m24-header .m24-search-submit::after,
.m24-search-submit::before,
.m24-search-submit::after{
  display:none !important;
  content:none !important;
}
.m24-header .m24-search-submit:hover,
.m24-search-submit:hover{
  background:var(--cp-accent-hover, #0077ed) !important;
}
.m24-header .m24-search-submit:hover{
  background:#000 !important;
}

/* Lang toggle (한 / EN) */
.m24-lang-toggle{
  display:inline-flex !important;
  align-items:center !important;
  height:30px !important;
  padding:2px !important;
  border:1px solid var(--cp-line-soft) !important;
  border-radius:var(--cp-radius-pill) !important;
  background:var(--cp-bg-muted) !important;
  box-shadow:none !important;
  font-family:var(--cp-font) !important;
}
.m24-lang-toggle button,
.m24-lang-toggle [role="button"],
.m24-lang-toggle a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:24px !important;
  min-width:30px !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:var(--cp-radius-pill) !important;
  background:transparent !important;
  color:var(--cp-text-mute) !important;
  font-family:var(--cp-font) !important;
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:-.005em !important;
  cursor:pointer !important;
  transition:background var(--cp-dur-fast) var(--cp-ease),
             color var(--cp-dur-fast) var(--cp-ease) !important;
}
.m24-lang-toggle button.active,
.m24-lang-toggle button[aria-pressed="true"],
.m24-lang-toggle button[aria-current],
.m24-lang-toggle .is-active{
  background:#fff !important;
  color:var(--cp-text) !important;
  font-weight:600 !important;
  box-shadow:var(--cp-shadow-sm) !important;
}

/* Header right icons (account, cart) */
.m24-header .m24-icon-btn,
.m24-header .m24-header-icon,
.m24-header [class*="icon-btn"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  border:0 !important;
  border-radius:var(--cp-radius-pill) !important;
  background:transparent !important;
  color:var(--cp-text) !important;
  cursor:pointer !important;
  transition:background var(--cp-dur-fast) var(--cp-ease) !important;
}
.m24-header .m24-icon-btn:hover,
.m24-header .m24-header-icon:hover,
.m24-header [class*="icon-btn"]:hover{
  background:var(--cp-bg-muted) !important;
}
.m24-header .m24-icon-btn svg{
  width:18px !important;
  height:18px !important;
}

/* Mobile hamburger */
.m24-header .m24-mobile-menu-btn,
.m24-header .m24-burger,
.m24-mobile-menu-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  border:0 !important;
  border-radius:var(--cp-radius-pill) !important;
  background:transparent !important;
  color:var(--cp-text) !important;
}
.m24-header .m24-mobile-menu-btn:hover,
.m24-header .m24-burger:hover{
  background:var(--cp-bg-muted) !important;
}

/* Mobile drawer */
.m24-mobile-drawer,
.m24-drawer{
  background:#fff !important;
  border-left:1px solid var(--cp-line-soft) !important;
  box-shadow:-12px 0 36px rgba(0,0,0,.16) !important;
  font-family:var(--cp-font) !important;
}

/* ── 2. Footer ──────────────────────────────────────────────── */
footer.m24-footer,
.m24-footer.light-surface{
  background:var(--cp-bg-soft) !important;
  border-top:1px solid var(--cp-line-faint) !important;
  color:var(--cp-text) !important;
  font-family:var(--cp-font) !important;
}
.m24-footer .m24-footer-inner,
.m24-footer-inner{
  padding:48px clamp(20px,2.5vw,40px) 32px !important;
  font-family:var(--cp-font) !important;
}

/* Footer logo — keep brand blue, but Pretendard not Quicksand */
.m24-footer .m24-footer-logo,
.m24-footer-logo{
  font-family:var(--cp-font) !important;
  font-size:20px !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
  color:var(--cp-accent) !important;
}

/* Footer column heads */
.m24-footer-col-head,
.m24-footer .m24-footer-col h3,
.m24-footer .m24-footer-col-title{
  color:var(--cp-text) !important;
  font-family:var(--cp-font) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:-.012em !important;
  margin:0 0 12px !important;
  text-transform:none !important;
}

/* Footer column links */
.m24-footer .m24-footer-col a,
.m24-footer-col a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  padding:5px 0 !important;
  color:var(--cp-text-soft) !important;
  font-family:var(--cp-font) !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  letter-spacing:-.012em !important;
  text-decoration:none !important;
  transition:color var(--cp-dur-fast) var(--cp-ease) !important;
}
.m24-footer-col a:hover{
  color:var(--cp-text) !important;
}
.m24-footer-col a svg,
.m24-footer-col a [class*="arrow"]{
  width:11px !important;
  height:11px !important;
  color:var(--cp-text-dim) !important;
  opacity:.6 !important;
}

/* Channel dots in 다른 마켓 구매 — 외부 마켓 a.m24-footer-shop 안의 도트 span만 */
.m24-footer .m24-footer-channel-dot,
.m24-footer-col [class*="channel-dot"],
.m24-footer-col [class*="shop-dot"],
.m24-footer-col a.m24-footer-shop > span:first-child{
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  flex:0 0 auto !important;
}

/* Footer description / lead */
.m24-footer .m24-footer-lead,
.m24-footer-lead{
  color:var(--cp-text-mute) !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  letter-spacing:-.012em !important;
  margin:8px 0 0 !important;
}

/* Footer bottom legal info row */
.m24-footer .m24-footer-legal,
.m24-footer-legal,
.m24-footer .m24-footer-meta,
.m24-footer-meta{
  border-top:1px solid var(--cp-line-faint) !important;
  margin-top:32px !important;
  padding-top:18px !important;
  color:var(--cp-text-mute) !important;
  font-size:11.5px !important;
  font-weight:400 !important;
  letter-spacing:-.005em !important;
  line-height:1.7 !important;
}
.m24-footer-legal a,
.m24-footer-meta a,
.m24-footer-meta span{
  color:inherit !important;
  font-size:inherit !important;
}

/* Footer bottom row (copyright + links) */
.m24-footer .m24-footer-bottom,
.m24-footer-bottom{
  margin-top:14px !important;
  padding-top:14px !important;
  border-top:1px solid var(--cp-line-faint) !important;
  color:var(--cp-text-mute) !important;
  font-size:11.5px !important;
  font-weight:400 !important;
}

/* ── 3. Floating chat FAB — make smaller, cleaner ─────────────── */
.m24-chat-fab,
button.m24-chat-fab,
#m24ChatFab{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  padding:0 !important;
  border:1px solid var(--cp-line-soft) !important;
  border-radius:var(--cp-radius-pill) !important;
  background:rgba(255,255,255,.92) !important;
  color:var(--cp-text) !important;
  bottom:20px !important;
  right:20px !important;
  box-shadow:var(--cp-shadow-lg) !important;
  backdrop-filter:saturate(180%) blur(12px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(12px) !important;
  transition:transform var(--cp-dur-fast) var(--cp-ease),
             background var(--cp-dur-fast) var(--cp-ease) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
}
.m24-chat-fab:hover{
  background:var(--cp-text) !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}
.m24-chat-fab .m24-chat-fab-copy{
  display:none !important;
}
.m24-chat-fab .m24-chat-fab-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:20px !important;
  height:20px !important;
  background:transparent !important;
  border:0 !important;
  color:inherit !important;
  margin:0 !important;
  padding:0 !important;
}
.m24-chat-fab .m24-chat-fab-icon svg{
  width:18px !important;
  height:18px !important;
  color:inherit !important;
  stroke:currentColor !important;
}
.m24-chat-fab .m24-chat-fab-icon img,
.m24-chat-fab .m24-chat-fab-icon picture{
  display:none !important;
}
.m24-chat-fab .m24-chat-fab-badge,
.m24-chat-fab [class*="badge"]{
  position:absolute !important;
  top:8px !important; right:8px !important;
  width:8px !important;
  height:8px !important;
  border:1.5px solid #fff !important;
  border-radius:50% !important;
  background:#ff453a !important;
  color:transparent !important;
  font-size:0 !important;
}

/* Chat callout (popup tooltip "주문·다운로드를 바로 도와드려요") */
.m24-chat-callout{
  display:none !important;
}

/* Chat panel (when opened) */
.m24-chat-panel,
#m24ChatPanel{
  border:1px solid var(--cp-line-soft) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:var(--cp-shadow-lg) !important;
  font-family:var(--cp-font) !important;
}
.m24-chat-panel-head,
.m24-chat-head{
  border-bottom:1px solid var(--cp-line-faint) !important;
  background:transparent !important;
  padding:14px 18px !important;
}
.m24-chat-panel-head h2,
.m24-chat-panel-head .m24-chat-title{
  font-family:var(--cp-font) !important;
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:-.018em !important;
  color:var(--cp-text) !important;
}
.m24-chat-panel-head p,
.m24-chat-panel-head .m24-chat-sub{
  color:var(--cp-text-mute) !important;
  font-size:12.5px !important;
  font-weight:400 !important;
}

/* ── 4. Cookie banner ──────────────────────────────────────── */
.m24-cookie-bar,
[class*="m24-cookie-bar"]{
  position:fixed !important;
  bottom:18px !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  justify-content:start !important;
  gap:18px !important;
  width:min(760px, calc(100vw - 36px)) !important;
  min-width:280px !important;
  max-width:min(760px, calc(100vw - 36px)) !important;
  height:auto !important;
  min-height:60px !important;
  padding:14px 20px !important;
  border:1px solid var(--cp-line-soft) !important;
  border-radius:var(--cp-radius) !important;
  background:rgba(255,255,255,.96) !important;
  color:var(--cp-text) !important;
  font-family:var(--cp-font) !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  letter-spacing:-.012em !important;
  box-shadow:var(--cp-shadow-lg) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  z-index:240 !important;
  word-break:keep-all !important;
}
.m24-cookie-bar .m24-cookie-bar-text,
.m24-cookie-bar > div:first-child,
.m24-cookie-bar p{
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  grid-column:1 !important;
  min-width:0 !important;
  max-width:none !important;
  font-family:var(--cp-font) !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  letter-spacing:-.012em !important;
  color:var(--cp-text-soft) !important;
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
}
.m24-cookie-bar .m24-cookie-bar-actions{
  display:flex !important;
  grid-column:2 !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
}
.m24-cookie-bar a,
.m24-cookie-bar [class*="link"]{
  color:var(--cp-accent) !important;
  font-weight:500 !important;
  text-decoration:underline !important;
}
.m24-cookie-bar button,
.m24-cookie-bar [role="button"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  height:32px !important;
  padding:0 14px !important;
  border:1px solid var(--cp-line) !important;
  border-radius:var(--cp-radius-pill) !important;
  background:#fff !important;
  color:var(--cp-text) !important;
  font-family:var(--cp-font) !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:-.012em !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  transition:background var(--cp-dur-fast) var(--cp-ease) !important;
}
.m24-cookie-bar button:hover{
  background:var(--cp-bg-muted) !important;
}
.m24-cookie-bar button.is-primary,
.m24-cookie-bar button[data-primary],
.m24-cookie-bar button.m24-cookie-accept,
.m24-cookie-bar #m24CookieAccept{
  background:var(--cp-text) !important;
  border-color:var(--cp-text) !important;
  color:#fff !important;
}
.m24-cookie-bar button.is-primary:hover,
.m24-cookie-bar button.m24-cookie-accept:hover{
  background:#000 !important;
}

/* ── 5. Mobile responsive ─────────────────────────────────── */
@media (max-width: 720px){
  header.m24-header{
    min-height:48px !important;
  }
  .m24-header .m24-header-inner{
    min-height:48px !important;
    padding:0 16px !important;
  }
  .m24-logo-mark{
    font-size:20px !important;
  }
  .m24-chat-fab,
  #m24ChatFab{
    width:44px !important;
    height:44px !important;
    bottom:16px !important;
    right:16px !important;
  }
  .m24-cookie-bar{
    bottom:12px !important;
    max-width:calc(100vw - 20px) !important;
    width:calc(100vw - 20px) !important;
    padding:12px 16px !important;
    font-size:12.5px !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:10px !important;
  }
  .m24-cookie-bar .m24-cookie-bar-text{
    text-align:left !important;
  }
  .m24-cookie-bar .m24-cookie-bar-actions{
    justify-content:flex-end !important;
  }
  .m24-footer-inner{
    padding:36px 20px 24px !important;
  }
}