/*
 * 손님 쇼핑몰 주황 테마·이펙트 층 — 2026-10-08 사용자 지시(D-SHOP1008).
 *
 * «메인이 목업 흰 판이 됐다 — 이전 주황 디자인으로, 어워드 수상작처럼 이펙트·롤오버를 넣고 스마트폰에서도
 * 돌게» 를 받아 만든 층이다. 2026-10-07 결정 5 가 정한 **구성**(헤더 단추·섹션 순서·간편 주문조회 문)은
 * 그대로 두고, 그 위의 **색과 움직임**만 바꾼다. 그래서:
 *   · 목업 사본 mall-mock.css 는 손대지 않는다(목업과 바이트 대조가 그 파일의 계약이다).
 *   · head.sub.php 가 이 파일을 **맨 뒤에** 싣고, 규칙마다 body.mall-live 를 붙여 앞의 층을 이긴다.
 *   · 이 파일을 빼면 화면은 목업 흰 판으로 돌아갈 뿐 깨지지 않는다(마크업 계약을 새로 만들지 않았다).
 *
 * 되살린 옛 주황 판의 얼굴(커밋 fb981f95 가 걷은 것): 베이지 바탕 #fbf8f3 · 전폭 주황 헤더(흰 글자) ·
 * 전폭 주황 바닥글(먹색 글자 — 이 주황 위 흰 글자는 명도비 3.04:1 뿐이다) · 스크롤 리빌.
 *
 * ■ 움직임의 규칙(옛 wl-anim.js 가 밟은 사고를 되풀이하지 않는다)
 *   · 숨기기는 html.ox-motion 이 있을 때만 — 그 class 는 js/mall-motion.js 가 «보이는 창 + 움직임 허용» 일 때만 단다.
 *     스크립트가 죽거나, 숨은 창이거나, 인쇄면 처음부터 다 보인다.
 *   · prefers-reduced-motion 이면 리빌·카드 기울기·부유 문 고리가 멈춘다(맨 아래 블록).
 *   · 롤오버는 (hover:hover) 기기에만, 터치 기기는 :active 눌림과 물결(.ox-ripple)로 같은 손맛을 준다.
 *
 * ■ [09SCM 운영 가이드] 수정 안내
 *   · 색: 아래 :root 의 --ox-* 다섯. 몰별 강조색(--wl-accent)은 헤더 PHP 가 따로 덮는다 — 여기 값을 몰마다 바꾸지 않는다.
 *   · 구역: ① 바탕·상단띠 ② 헤더 ③ 매장정보 띠 ④ 섹션 머리 ⑤ 상품 카드 ⑥ 바닥글·부유 문 ⑦ 리빌 ⑧ 반응형 ⑨ 움직임 끄기.
 *   · 판 번호는 head.sub.php 가 filemtime 으로 붙인다(Cloudflare 엣지 7일 캐시를 그 값이 가른다).
 *   · 시험: php tools/selftest/run.php shop_orange_motion_20261008 · shop_mock1007_storefront
 */

:root {
  --ox-orange: #f26b1d;
  --ox-orange-deep: #d1550f;
  --ox-ember: #ff9a52;
  --ox-cream: #fbf8f3;
  --ox-ink: #1a140e;
  --ox-ease: cubic-bezier(.22, .61, .36, 1);
  --ox-spring: cubic-bezier(.34, 1.56, .64, 1);
  --key-color: var(--ox-orange);
}

/* ① 바탕·상단띠 ─────────────────────────────────────────────────────────── */
html,
body.mall-live {
  background: var(--ox-cream) !important;
}
body.mall-live { -webkit-font-smoothing: antialiased; }
body.mall-live ::selection { background: var(--ox-orange); color: #fff; }

body.mall-live .utility-bar {
  position: relative;
  border-bottom: 0;
  background: #111111;
  letter-spacing: -.01em;
}
body.mall-live .utility-inner > span { opacity: .86; }
body.mall-live .utility-inner a { position: relative; font-weight: 700; }
body.mall-live .utility-inner a::after {
  position: absolute; right: 0; bottom: -2px; left: 0; height: 1px;
  background: var(--ox-ember); content: "";
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ox-ease);
}
body.mall-live .utility-links a + a::after { left: 14px; }
body.mall-live .utility-inner a:hover { color: var(--ox-ember); text-decoration: none; }
body.mall-live .utility-inner a:hover::after { transform: scaleX(1); transform-origin: left; }

/* 맨 위 스크롤 진행 막대 — mall-motion.js 가 --ox-progress(0~1)를 갱신한다. */
.ox-progress {
  position: fixed; top: 0; left: 0; z-index: 95;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #ffe1c8, #fff 60%, #ffd0a8);
  box-shadow: 0 0 10px rgb(255 255 255 / 55%);
  transform: scaleX(var(--ox-progress, 0)); transform-origin: left;
  pointer-events: none;
}

/* ② 헤더 — 전폭 주황, 흰 글자. 내려가면 얇아지고 유리처럼 비친다(.is-scrolled). ───────────── */
body.mall-live .main-header {
  border-bottom: 0;
  /* 몰 강조색(--wl-accent)을 쓰지 않는다 — 온마을 몰의 #f2913d 위 흰 글자는 명도비 2.4:1 로 읽히지 않았고(실측),
     옛 주황 판도 헤더는 테마 주황 고정이었다. 몰 강조색은 목업 층의 단추·배지에 그대로 남는다. */
  background: var(--ox-orange);
  color: #fff;
  box-shadow: 0 1px 0 rgb(0 0 0 / 6%);
  transition: box-shadow .35s var(--ox-ease), background-color .35s var(--ox-ease);
}
body.mall-live .main-header.is-scrolled {
  background: rgb(242 107 29 / 92%);
  box-shadow: 0 10px 30px -12px rgb(150 55 0 / 45%);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
body.mall-live .header-inner { transition: min-height .35s var(--ox-ease); }
body.mall-live .main-header.is-scrolled .header-inner { min-height: 64px; }

body.mall-live .main-header .icon-text-button,
body.mall-live .main-header .header-action,
body.mall-live .main-header .mobile-search-toggle {
  position: relative;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  transition: background-color .25s var(--ox-ease), transform .25s var(--ox-ease);
}
body.mall-live .main-header .icon-text-button:hover,
body.mall-live .main-header .header-action:hover,
body.mall-live .main-header .mobile-search-toggle:hover {
  background: rgb(255 255 255 / 18%);
  color: #fff;
}
body.mall-live .main-header .icon-text-button:active,
body.mall-live .main-header .header-action:active,
body.mall-live .main-header .mobile-search-toggle:active { transform: scale(.94); }
body.mall-live .main-header .menu-icon i { height: 2px; border-radius: 2px; transition: transform .3s var(--ox-ease); }
body.mall-live .main-header .icon-text-button:hover .menu-icon i:nth-child(2) { transform: translateX(4px); }
body.mall-live .main-header .icon-text-button:hover .menu-icon i:nth-child(3) { transform: translateX(-3px); }
body.mall-live .main-header .search-icon { border-width: 2px; }
body.mall-live .main-header .search-icon::after { height: 2px; }

body.mall-live .store-brand strong {
  position: relative;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
}
body.mall-live .store-brand strong::after {
  position: absolute; right: 0; bottom: -4px; left: 0; height: 2px; border-radius: 2px;
  background: #fff; content: "";
  transform: scaleX(0); transition: transform .45s var(--ox-ease);
}
body.mall-live .store-brand:hover strong::after { transform: scaleX(1); }

body.mall-live .main-header .cart-action b {
  background: #fff;
  color: var(--ox-orange-deep);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 25%);
}
body.mall-live .main-header .cart-action b.is-bump { animation: oxBump .5s var(--ox-spring); }

body.mall-live .search-panel { border-top: 0; background: #fff; box-shadow: 0 12px 24px -16px rgb(0 0 0 / 30%); }
body.mall-live .search-panel.is-open { animation: oxDrop .35s var(--ox-ease) both; }
body.mall-live .search-panel input { border-radius: 999px; padding: 0 18px; }
body.mall-live .search-panel input:focus { box-shadow: 0 0 0 4px rgb(242 107 29 / 15%); }

/* 서랍 — 들어올 때 줄이 하나씩 밀려 나온다. */
body.mall-live .category-drawer { border-right: 0; box-shadow: 30px 0 60px -30px rgb(0 0 0 / 35%); transition: transform .45s var(--ox-ease); }
body.mall-live .drawer-header { background: var(--ox-orange); color: #fff; border-bottom: 0; }
body.mall-live .drawer-header .icon-button { color: #fff; transition: transform .35s var(--ox-ease), background-color .2s; }
body.mall-live .drawer-header .icon-button:hover { background: rgb(255 255 255 / 18%); transform: rotate(90deg); }
body.mall-live .drawer-backdrop { background: rgb(26 20 14 / 45%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: oxFade .3s ease both; }
body.mall-live .category-drawer.is-open .category-list > * { animation: oxSlideIn .5s var(--ox-ease) both; }
body.mall-live .category-drawer.is-open .category-list > *:nth-child(2) { animation-delay: .04s; }
body.mall-live .category-drawer.is-open .category-list > *:nth-child(3) { animation-delay: .08s; }
body.mall-live .category-drawer.is-open .category-list > *:nth-child(4) { animation-delay: .12s; }
body.mall-live .category-drawer.is-open .category-list > *:nth-child(5) { animation-delay: .16s; }
body.mall-live .category-drawer.is-open .category-list > *:nth-child(n + 6) { animation-delay: .2s; }
body.mall-live .category-list a { transition: background-color .2s, color .2s, padding-left .25s var(--ox-ease); }
body.mall-live .category-list a:hover { padding-left: 18px; }
body.mall-live .drawer-fulfillment-links a { border-radius: 999px; transition: all .25s var(--ox-ease); }
body.mall-live .drawer-fulfillment-links a:hover { background: var(--ox-orange); border-color: var(--ox-orange); color: #fff; }

/* 하위 화면 머리(.sitmt-subhero) — 헤더와 같은 주황 결. */
body.mall-live .sitmt-subhero {
  background: radial-gradient(120% 140% at 0% 0%, var(--ox-ember) 0%, var(--ox-orange) 45%, var(--ox-orange-deep) 100%) !important;
  color: #fff !important;
}
body.mall-live .sitmt-subhero h1,
body.mall-live .sitmt-subhero p { color: #fff !important; }

/* ③ 매장정보 띠 — 베이지 위 흰 카드, 주황 윗줄. ─────────────────────────────── */
body.mall-live .store-information { border-bottom: 0; background: transparent; padding: 18px 0 0; }
body.mall-live .store-info-grid { gap: 10px; }
body.mall-live .info-item,
body.mall-live .info-item:first-child {
  position: relative;
  overflow: hidden;
  border: 1px solid #f0e6da;
  border-radius: 14px;
  background: #fff;
  transition: transform .35s var(--ox-ease), box-shadow .35s var(--ox-ease), border-color .35s;
}
body.mall-live .info-item::before {
  position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ox-orange), var(--ox-ember));
  content: ""; transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--ox-ease);
}
body.mall-live .info-item > span { color: var(--ox-orange-deep); font-weight: 700; letter-spacing: .02em; }
body.mall-live .copy-button { border-radius: 999px; transition: background-color .2s, color .2s, transform .2s; }
body.mall-live .copy-button:hover { background: var(--ox-orange); color: #fff; }
body.mall-live .copy-button:active { transform: scale(.94); }

/* ④ 섹션 머리 — 번호 눈썹·밑줄이 그려지고, «보기 →» 가 알약으로 찬다. ─────────────── */
body.mall-live .main-content { counter-reset: oxSection; padding-top: 36px; }
body.mall-live .main-content > .featured-section { counter-increment: oxSection; padding-top: 52px; }
body.mall-live .main-content > .featured-section:first-child { padding-top: 12px; }
body.mall-live .section-heading { align-items: flex-end; margin-bottom: 26px; }
body.mall-live .section-heading h1 {
  position: relative; display: inline-block;
  font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; letter-spacing: -.035em;
}
body.mall-live .main-content .section-heading h1::before {
  display: block; margin-bottom: 6px;
  color: var(--ox-orange); font-size: 12px; font-weight: 800; letter-spacing: .14em;
  content: counter(oxSection, decimal-leading-zero) " ─ TODAY'S PICK";
}
body.mall-live .section-heading h1::after {
  position: absolute; right: 0; bottom: -6px; left: 0; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ox-orange), var(--ox-ember));
  content: ""; transform: scaleX(.22); transform-origin: left; transition: transform .9s var(--ox-ease) .15s;
}
body.mall-live .featured-section.is-in .section-heading h1::after,
html:not(.ox-motion) body.mall-live .section-heading h1::after { transform: scaleX(1); }
body.mall-live .section-heading p { margin-top: 10px; }
body.mall-live .section-heading > a {
  position: relative; overflow: hidden; isolation: isolate; flex: 0 0 auto;
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1.5px solid var(--ox-orange); border-radius: 999px;
  color: var(--ox-orange); font-size: 13px; font-weight: 800;
  transition: color .3s var(--ox-ease);
}
body.mall-live .section-heading > a::before {
  position: absolute; inset: 0; z-index: -1; background: var(--ox-orange); content: "";
  transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ox-ease);
}
@media (hover: hover) {
  body.mall-live .section-heading > a:hover { color: #fff; }
  body.mall-live .section-heading > a:hover::before { transform: scaleY(1); }
}

/* ⑤ 상품 카드 — 들리고·확대되고·빛이 스치고·커서를 따라 비춘다. ───────────────────── */
body.mall-live .product-grid { gap: 34px 26px; }
body.mall-live .product-card {
  position: relative;
  overflow: hidden; /* 물결(.ox-ripple)이 카드 밖으로 번지지 않게 */
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 0 rgb(26 20 14 / 4%), 0 10px 30px -22px rgb(26 20 14 / 30%);
  transition: transform .5s var(--ox-ease), box-shadow .5s var(--ox-ease);
  transform: perspective(900px) rotateX(var(--ox-tx, 0deg)) rotateY(var(--ox-ty, 0deg)) translateY(var(--ox-lift, 0));
  will-change: transform;
}
body.mall-live .product-link { height: 100%; border-radius: 18px; padding: 10px 10px 16px; }
body.mall-live .product-image {
  margin-bottom: 14px; border: 0; border-radius: 13px; background: #f6efe6;
}
body.mall-live #container .product-image img { transition: transform .9s var(--ox-ease), filter .6s; }
/* 빛 줄기 — 그림 위를 비스듬히 지나간다. */
body.mall-live .product-image::after {
  position: absolute; top: 0; left: -75%; z-index: 1; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 45%) 50%, transparent 100%);
  content: ""; transform: skewX(-20deg); pointer-events: none;
}
/* 커서 조명 — JS 가 --ox-mx/--ox-my 를 카드 안 좌표로 준다. */
body.mall-live .product-card::before {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--ox-mx, 50%) var(--ox-my, 0%), rgb(242 107 29 / 14%), transparent 65%);
  content: ""; opacity: 0; transition: opacity .4s;
}
body.mall-live .product-hover {
  top: 10px; left: 10px; width: calc(100% - 20px);
  align-items: end; padding-bottom: 18px;
  border-radius: 13px;
  background: linear-gradient(180deg, transparent 40%, rgb(209 85 15 / 88%) 100%);
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
  transition: opacity .4s var(--ox-ease);
}
body.mall-live .product-hover { color: #fff; }
body.mall-live .product-name { transition: color .3s; }
body.mall-live .product-sale-line b {
  display: inline-grid; place-items: center; min-height: 22px; padding: 0 8px;
  border-radius: 999px; background: var(--ox-orange); color: #fff; font-size: 12px;
}
body.mall-live .fulfillment-badge { border-color: #f3dcc8; border-radius: 999px; background: #fff7f0; color: var(--ox-orange-deep); }
body.mall-live .product-soldout-badge { top: 20px; left: 20px; border-radius: 999px; padding: 6px 10px; background: rgb(26 20 14 / 78%); }
body.mall-live .product-card.is-soldout #container .product-image img,
body.mall-live .product-card.is-soldout .product-image img { filter: grayscale(.55); }

@media (hover: hover) {
  body.mall-live .product-card:hover {
    --ox-lift: -8px;
    box-shadow: 0 2px 0 rgb(26 20 14 / 3%), 0 36px 60px -30px rgb(150 55 0 / 45%);
  }
  body.mall-live .product-card:hover::before { opacity: 1; }
  body.mall-live #container .product-card:hover .product-image img { transform: scale(1.08); }
  body.mall-live .product-card:hover .product-image::after { animation: oxShine .9s var(--ox-ease); }
  body.mall-live .product-card:hover .product-name { color: var(--ox-orange-deep); }
  body.mall-live .product-link:hover .product-hover { opacity: 1; }
  body.mall-live .product-hover { transform: none; }
}
/* 터치 — 눌리는 손맛 + 물결(.ox-ripple 은 JS 가 눌린 자리에 꽂는다). */
body.mall-live .product-card:active { --ox-lift: 0px; transform: scale(.975); transition-duration: .15s; }
.ox-ripple {
  position: absolute; z-index: 4; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: rgb(242 107 29 / 28%); pointer-events: none;
  animation: oxRipple .6s ease-out forwards;
}

body.mall-live .empty-state { border: 1px dashed #ecd8c4; border-radius: 18px; background: #fff; }

/* ⑥ 바닥글·부유 문 ─────────────────────────────────────────────────────── */
body.mall-live .site-footer {
  position: relative; overflow: hidden;
  margin-top: 40px; border-top: 0;
  background: var(--ox-orange);
  color: var(--ox-ink);
}
/* 큰 글씨 낙관 — 장식이라 읽지 않는다(::after 는 낭독 대상이 아니다). 글자는 바닥글의 data-brand
   (운영사 브랜드 · wl_footer.php)에서 읽는다 — 낱말을 박으면 분양 본사 바닥에 «09SCM» 이 찍힌다. */
body.mall-live .site-footer::after {
  position: absolute; right: -2%; bottom: -.28em; z-index: 0;
  color: rgb(255 255 255 / 13%); font-size: clamp(90px, 16vw, 240px); font-weight: 900; letter-spacing: -.06em; line-height: 1;
  content: attr(data-brand); pointer-events: none;
}
body.mall-live .footer-inner { position: relative; z-index: 1; }
body.mall-live .footer-business { border-bottom-color: rgb(26 20 14 / 18%); color: rgb(26 20 14 / 85%); }
body.mall-live .footer-business strong,
body.mall-live .footer-service strong { color: var(--ox-ink); }
body.mall-live .footer-business a,
body.mall-live .footer-service a { color: var(--ox-ink) !important; font-weight: 700; }
body.mall-live .footer-business a:hover,
body.mall-live .footer-service a:hover { color: var(--ox-ink) !important; text-decoration: underline; text-underline-offset: 4px; }
body.mall-live .footer-service { min-height: 84px; }
body.mall-live .footer-service strong { font-size: 16px; font-weight: 800; }

body.mall-live .quick-order-lookup {
  border: 0; overflow: visible;
  background: linear-gradient(135deg, var(--ox-ember), var(--ox-orange) 55%, var(--ox-orange-deep));
  box-shadow: 0 14px 30px -10px rgb(209 85 15 / 60%);
  transition: transform .35s var(--ox-spring), box-shadow .35s;
}
body.mall-live .quick-order-lookup::before {
  position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--ox-orange);
  content: ""; animation: oxHalo 2.4s var(--ox-ease) infinite; pointer-events: none;
}
@media (hover: hover) {
  body.mall-live .quick-order-lookup:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 20px 36px -12px rgb(209 85 15 / 70%); }
}

/* 위로 단추 — 둘레의 고리가 스크롤 진행을 그린다(JS 가 --ox-progress 를 쓴다). */
.ox-top {
  position: fixed; right: 24px; bottom: 86px; z-index: 24;
  display: grid; width: 48px; height: 48px; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(var(--ox-orange) calc(var(--ox-progress, 0) * 360deg), #f1e3d6 0);
  color: var(--ox-ink); font-size: 18px; font-weight: 900;
  box-shadow: 0 10px 24px -12px rgb(26 20 14 / 45%);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .35s var(--ox-ease), transform .35s var(--ox-ease);
}
.ox-top::before { position: absolute; inset: 4px; border-radius: 50%; background: #fff; content: ""; }
.ox-top > span { position: relative; }
.ox-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ox-top:active { transform: scale(.92); }
.ox-top:focus-visible { outline: 2px solid var(--ox-orange); outline-offset: 3px; }

/* ⑦ 리빌 — html.ox-motion 일 때만 숨긴다(규칙은 머리 주석). ────────────────────── */
html.ox-motion .ox-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .9s var(--ox-ease), transform .9s var(--ox-ease);
  transition-delay: var(--ox-delay, 0s);
}
html.ox-motion .ox-reveal.is-in { opacity: 1; transform: none; }
/* 카드는 위 transform 을 기울기 변수와 함께 써야 하므로 따로 — 리빌 동안만 아래에서 올린다. */
html.ox-motion body.mall-live .product-card.ox-reveal { transform: perspective(900px) translateY(40px) scale(.97); }
html.ox-motion body.mall-live .product-card.ox-reveal.is-in {
  transform: perspective(900px) rotateX(var(--ox-tx, 0deg)) rotateY(var(--ox-ty, 0deg)) translateY(var(--ox-lift, 0));
}
html.ox-motion body.mall-live .product-card.ox-reveal.is-settled { transition: transform .5s var(--ox-ease), box-shadow .5s var(--ox-ease), opacity .9s; transition-delay: 0s; }

/* ⑧ 반응형 ──────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  body.mall-live .store-info-grid { padding: 0 24px; }
}
@media (max-width: 720px) {
  body.mall-live .store-information { padding-top: 12px; }
  body.mall-live .store-info-grid { gap: 8px; padding: 0 14px; }
  body.mall-live .info-item,
  body.mall-live .info-item:first-child { min-height: 0; padding: 10px 12px; border: 1px solid #f0e6da; border-radius: 12px; }
  body.mall-live .info-item > span { margin-bottom: 2px; font-size: 11px; }
  body.mall-live .info-item strong,
  body.mall-live .info-item a { font-size: 13px; }
  body.mall-live .main-header .header-action,
  body.mall-live .main-header .icon-text-button { border-radius: 10px; }
  body.mall-live .store-brand strong { font-size: 17px; }
  body.mall-live .main-header.is-scrolled .header-inner { min-height: 56px; }


  body.mall-live .main-content { padding-top: 22px; }
  body.mall-live .main-content > .featured-section { padding-top: 36px; }
  body.mall-live .section-heading { align-items: flex-end; }
  body.mall-live .section-heading > a { min-height: 34px; padding: 0 12px; font-size: 12px; }
  body.mall-live .product-grid { gap: 14px 10px; }
  body.mall-live .product-card { border-radius: 14px; }
  body.mall-live .product-link { padding: 6px 6px 12px; border-radius: 14px; }
  body.mall-live .product-image { margin-bottom: 10px; border-radius: 10px; }
  body.mall-live .product-soldout-badge { top: 14px; left: 14px; }
  body.mall-live .product-copy { padding: 0 4px; }

  body.mall-live .site-footer { margin-top: 28px; padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  body.mall-live .quick-order-lookup { border-radius: 0; }
  body.mall-live .quick-order-lookup::before { display: none; }
  .ox-top { right: 14px; bottom: calc(54px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
}
/* ⑨ 움직임 끄기 — 운영체제의 «동작 줄이기» 를 존중한다. ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.mall-live .quick-order-lookup::before { animation: none !important; }
  body.mall-live .product-card { transform: none !important; }
}
@media print {
  html.ox-motion .ox-reveal { opacity: 1 !important; transform: none !important; }
}

@keyframes oxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes oxDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes oxSlideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes oxShine { from { left: -75%; } to { left: 135%; } }
@keyframes oxRipple { to { opacity: 0; transform: scale(14); } }
@keyframes oxBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes oxHalo { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35, 1.6); } }

/* WI-028-04 푸터: 이용약관=400(Regular) / 개인정보처리방침=700(Bold) — 서로 다른 굵기(발주처 UdidBean 확정) */
body.mall-live .footer-business nav a{font-weight:400;}
body.mall-live .footer-business nav a.privacy-link{font-weight:700;}