/* 목업(mall-mock.css) 위에 얹는 라이브 매핑.
   영카트 목록·장바구니·상세·주문서 마크업을 목업 클래스와 같은 얼굴로 맞춘다.
   키색은 소매몰 목업 주황으로 잠근다. 관리자(#1D5CFF)·옛 매장 초록이 새지 않게. */
/*
 * ■ [09SCM 운영 가이드] 수정 안내 (운영·개발 — 전체 표는 docs/guide/09SCM_운영·수정가이드_20261007.xlsx)
 *   · 키 색 바꾸기: 아래 :root 의 --key-color·--key-soft·--wl-primary·--wl-primary-dark·--wl-orange 를 함께 바꾼다
 *     (옛 영카트 마크업은 --wl-*, 목업 class 는 --key-* 를 읽는다). 몰별 강조색은 wl_header.php 의 --wl-accent 다.
 *   · 목업 규칙을 고치려고 mall-mock.css 를 바꾸지 말고 여기서 덮는다 — 목업 사본을 원본과 대조할 수 있게 둔다.
 *   · 판 번호는 head.sub.php 가 filemtime 으로 붙인다(Cloudflare 7일 보존 대책) — 손으로 ?ver= 를 적지 않는다.
 *   · 시험: php tools/selftest/run.php shop_mock1007_storefront (모양은 실브라우저로 PC·360px 두 폭을 본다)
 */
:root {
  --key-color: #f26b1d;
  --key-soft: #fff0e7;
  --wl-primary: #f26b1d;
  --wl-primary-dark: #d1550f;
  --wl-orange: #f26b1d;
}

#hd_login_msg { display: none !important; }

html,
body.mall-live {
  background: var(--surface, #ffffff) !important;
  color: var(--sitmt-ink, #1a1a1a);
}

.sitmt-skip {
  position: absolute;
  left: -9999px;
}
.sitmt-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 80;
  padding: 8px 12px;
  background: #fff;
  color: var(--text-body);
}

#wrapper.sitmt-wrapper,
#container.sitmt-container {
  width: auto;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  float: none;
}

/* 메인은 목업과 같이 풀폭. woorilink.css 의
   #container.sitmt-container.is-index { max-width:1340px !important } 를 이긴다.
   매장정보 띠가 화면을 가로지르고, 메인 섹션만 .site-width(1600) 안에 앉는다.
   목록 화면(.catalog-page)도 같은 폭 규칙이다 — 그 자신이 .site-width 와 목업 여백을 갖는다. */
body.mall-live #container.sitmt-container.is-index,
body.mall-live #container.sitmt-container:has(> .catalog-page),
body.mall-live #container.sitmt-container:has(.detail-page) {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* woorilink.css `#container img { height: auto }` 가 목업 카드의 1:1 그림 칸을 풀어 버린다.
   목업은 그림이 칸을 꽉 채운다(object-fit: cover). */
body.mall-live #container .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 모바일 분류 목록의 [더보기]용 li 겹(theme inc/wl_product_card.php)을 지워 카드가 곧 격자 칸이 되게 한다. */
.product-grid > li.product-grid-item { display: contents; list-style: none; }

.sitmt-header {
  background: var(--sitmt-orange, #f26b1d);
}
.sitmt-header .sitmt-nav a,
.sitmt-header .sitmt-nav__top,
.sitmt-header .sitmt-icon-btn,
.sitmt-header .sitmt-icon-link,
.sitmt-header .sitmt-member-link {
  color: #fff;
}

/* 로고 상자 바탕·테두리를 헤더 주황과 같게 한다.
   반투명 흰 바탕 + 흰 테두리는 헤더보다 밝은 다른 주황처럼 보였다. */
.sitmt-header .sitmt-brand .wl-logo {
  padding: 8px 16px;
  border: 1px solid var(--sitmt-orange, #f26b1d);
  background: var(--sitmt-orange, #f26b1d);
}
.sitmt-header .wl-logo__img {
  background: var(--sitmt-orange, #f26b1d);
}
.store-brand .store-logo {
  width: 36px;
  height: 36px;
  margin-right: 8px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* 분류는 가운데가 아니라 햄버거 서랍에 둔다. 가운데 칸은 이 몰의 로고와 이름 —
   두 번 보이던 이름을 사용자 지시로 하나로 모았고(2026-09-29), 흩어져 있던 로고와
   이름을 다시 한 묶음으로 붙였다(2026-09-30).
   ★ 워드마크를 감추는 규칙은 여기 없다 — `.sitmt-brandbar` 와 **같은 자리**
     (woorilink.css)에 있다. 붙여 놓은 뒤로는 그 묶음의 규칙이라 둘이 떨어지면 안 된다. */
body.mall-live .sitmt-drawer-toggle {
  display: inline-flex !important;
}
/* `min-width: 0` 은 **일부러 뺐다**(2026-09-30). 로고가 이 칸에 있던 동안에는 긴 로고가
   칸을 벌리지 못하게 막는 장치였는데, 로고가 가운데 묶음으로 간 지금은 이 칸에 44px
   아이콘 하나뿐이다. 0 을 남겨 두면 헤더 그리드의 왼쪽 `1fr` 칸이 **0 까지 줄어들어**
   햄버거가 가운데 묶음 위로 겹친다(좁은 폭 실측). */
body.mall-live .sitmt-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.mall-live .sitmt-sitename {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  body.mall-live .sitmt-sitename { font-size: 16px; }
}

.mall-inner-head {
  padding: 36px 24px 0;
}

#container #sod_bsk,
#container #sod_frm,
#container #sit_ov_from,
#container .sct_wrap,
#container #sct,
#container .shop_list,
#container #s_qna,
#container .smb_my {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 24px 24px 64px;
}

@media (max-width: 720px) {
  .mall-inner-head,
  #container #sod_bsk,
  #container #sod_frm,
  #container #sit_ov_from,
  #container .sct_wrap,
  #container #sct,
  #container .shop_list,
  #container .smb_my {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* 상품 그리드: 영카트 sct_10 → 목업 product-grid */
ul.sct_10,
ul.sct.sct_10,
ul.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
  width: 100% !important;
  margin: 0;
  padding: 0;
  list-style: none;
  float: none !important;
}
ul.sct_10:after,
ul.sct_10:before { display: none !important; content: none !important; }

.sct_10 .sct_li,
.sct_10 .product-card {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  background: transparent;
  list-style: none;
}
.sct_10 .sct_li.row-clear { clear: none; }

.sct_10 .sct_img,
.sct_10 .product-image {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  place-items: center;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--soft-surface);
}
.sct_10 .sct_img a { display: block; width: 100%; height: 100%; }
.sct_10 .sct_img img,
.sct_10 .product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sct_10 .sct_img > a::after {
  content: "상품 상세보기 →";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgb(26 26 26 / 72%);
  color: #fff;
  font-weight: 700;
  opacity: 0;
  transition: opacity 140ms ease;
}
.sct_10 .sct_li:hover .sct_img > a::after,
.sct_10 .sct_li:focus-within .sct_img > a::after { opacity: 1; }

.sct_10 .sct_ct_wrap,
.sct_10 .product-copy { display: block; min-width: 0; }
.sct_10 .sct_txt,
.sct_10 .product-name {
  display: block;
  min-height: 23px;
  margin: 0 0 6px;
  color: var(--text-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sct_10 .sct_txt a { color: inherit; }
.sct_10 .sct_basic,
.sct_10 .product-category {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
}
.sct_10 .sct_cost,
.sct_10 .product-pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  color: var(--text-body);
  font-size: 16px;
  font-weight: 700;
}
.sct_10 .sct_dict {
  flex-basis: 100%;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
  text-decoration: line-through;
}
.sct_10 .sct_star,
.sct_10 .sct_id,
.sct_10 .sct_op_btn,
.sct_10 .sit_icon_li { display: none; }
.sct_10 .sct_btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
}
.sct_10 .btn_cart {
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: var(--key-color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
}
.sct_10 .wl-badge-sale {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  border-radius: 4px;
  background: var(--key-color);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 6px;
}
.sct_10 .shop_icon_soldout {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 72%);
  color: var(--text-body);
  font-weight: 700;
}

@media (max-width: 1100px) {
  ul.sct_10, ul.sct.sct_10, ul.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  ul.sct_10, ul.sct.sct_10, ul.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .sct_10 .sct_img > a::after { display: none; }
  .sct_10 .sct_txt, .sct_10 .product-name { min-height: 41px; font-size: 14px; }
}

/* 장바구니: 기존 픽업/배달 탭을 목업 cart-tabs 얼굴로 */
#sod_bsk .page-heading { margin-bottom: 22px; }
.wl-cart-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--border);
}
.wl-cart-tab,
.wl-cart-tabs [role="tab"],
.wl-cart-tabs button {
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 0 18px;
}
.wl-cart-tab.is-on,
.wl-cart-tab.is-active,
.wl-cart-tabs button[aria-selected="true"] {
  border-bottom-color: var(--key-color);
  color: var(--text-body);
}
.wl-cart-tabsum { color: var(--text-secondary); font-size: 12px; margin: 0 0 12px; }

#sod_bsk .tbl_head03,
#sod_bsk table {
  width: 100%;
  border-collapse: collapse;
}
#sod_bsk th,
#sod_bsk td {
  border-bottom: 1px solid var(--border);
  padding: 16px 8px;
  text-align: left;
  vertical-align: middle;
}
#sod_bsk .btn_submit,
#sod_bsk .btn01,
#sod_frm .btn_submit,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: var(--key-color);
  color: #fff !important;
  font-weight: 700;
  padding: 0 18px;
}
#sod_bsk .btn02,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text-body);
  font-weight: 700;
  padding: 0 18px;
}

/* 상세: 2열 레이아웃 */
#sit_ov_wrap {
  display: grid;
  max-width: 1100px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}
#sit_pvi { min-width: 0; }
#sit_pvi_big img { width: 100%; height: auto; object-fit: cover; border-radius: 6px; }
#sit_ov { min-width: 0; padding-top: 12px; }
#sit_ov h1, #sit_title { margin: 7px 0 10px; font-size: 24px; line-height: 1.4; }
#sit_ov .sit_price, #sit_ov .price { font-size: 20px; font-weight: 700; }
.sit_ov_btn .btn_submit,
#sit_ov .btn_submit {
  background: var(--key-color);
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
}
@media (max-width: 720px) {
  #sit_ov_wrap { grid-template-columns: 1fr; gap: 20px; }
}

/* 주문서 */
#sod_frm .od_prd_list,
#sod_frm .sod_left, #sod_frm .sod_right { background: var(--surface); }
#sod_frm input[type="text"],
#sod_frm input[type="tel"],
#sod_frm input[type="email"],
#sod_frm select,
#sod_frm textarea {
  border: 1px solid var(--border);
  border-radius: 4px;
  min-height: 40px;
  padding: 8px 12px;
}

.sct_wrap .sct_ct, #sct_ct, .sct_admin { display: none; }

.mall-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 28px 0 0;
}
.mall-pager a {
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-weight: 700;
}
.mall-pager a[aria-current="page"] {
  border-color: var(--key-color);
  background: var(--key-soft);
  color: var(--key-color);
}

.empty-state, .sct_noitem {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-secondary);
}

.sitmt-footer { display: block; }

.mall-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  display: none;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  padding: 10px 16px;
}

/* 모바일 카드 스킨도 같은 그리드 */
.sct_10_list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.li_wr { border: 0; }

/* 마이페이지: 목업 셸을 #container 패딩과 맞춘다 */
#container .mypage-page {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 8px 24px 64px;
}
#container .mypage-page #sod_fin {
  width: auto;
  margin: 0;
  padding: 0;
}
.period-buttons a {
  min-width: 78px;
  height: 42px;
  margin-left: -1px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-body);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.period-buttons a:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
.period-buttons a:last-child { border-radius: 0 4px 4px 0; }
.period-buttons a.is-active {
  position: relative;
  z-index: 1;
  border-color: var(--key-color);
  color: var(--key-color);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--soft-surface);
  font-size: 12px;
  font-weight: 700;
}
.status-badge.is-done { background: var(--key-soft); color: var(--key-color); }
.status-badge.is-warn { background: #fdecea; color: var(--error); }
.status-badge.is-ing { background: #f4f4f4; color: var(--text-body); }
.order-history-product img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }
@media (max-width: 720px) {
  #container .mypage-page { padding-left: 14px; padding-right: 14px; }
}

body.mall-live .wla-mode-signup .wla-brand,
body.mall-live .wla-mode-signup .wla-tabs {
  display: none !important;
}
body.mall-live .wla-mode-signup .wla-split {
  display: flex !important;
  justify-content: center !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  grid-template-columns: none !important;
}
body.mall-live .wla-mode-signup .wla-card {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.mall-live .wla-mode-signup .wla-pane-signup {
  padding: 0;
}
body.mall-live .wla-term-fold {
  margin: 0 0 8px;
}
body.mall-live .wla-term-fold .wla-term-body {
  max-height: 140px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border, #ececec);
  border-radius: 4px;
  color: var(--text-secondary, #6f6f6f);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-line;
}
body.mall-live .auth-card .wl-cc {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.mall-live .auth-card .wl-cc > label { font-size: 13px; font-weight: 700; }
body.mall-live .auth-card .frm_input,
body.mall-live .auth-card input[type="text"],
body.mall-live .auth-card input[type="password"],
body.mall-live .auth-card input[type="email"],
body.mall-live .auth-card input[type="tel"] {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--border, #ececec);
  border-radius: 4px;
  padding: 0 12px;
  box-sizing: border-box;
}
body.mall-live .auth-card .wl-cc-row input { width: 7em; }
body.mall-live .primary-button.auth-submit {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 4px;
  background: var(--key-color, #f26b1d);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
body.mall-live #container .auth-page {
  width: min(100%, 1600px);
  margin: 0 auto;
}


/* ── 상품 상세(목업 renderProduct) 위 코어 수량 마크업 ─────────────────────
   수량 단추의 글자는 «감소»/«증가» 여야 한다(코어 shop.js 가 text() 로 동작을 고른다).
   그래서 글자는 sound_only 로 숨기고 목업 기호(−/+)는 여기서 그린다. */
.detail-copy .wl-qty-list { margin: 0; padding: 0; list-style: none; }
.detail-copy .wl-qty-list > li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; border: 0; background: none; }
.detail-copy .wl-qty-list .opt_name { flex: 1; min-width: 0; font-size: 13px; color: var(--text-secondary); }
.detail-copy .quantity-stepper .sit_qty_minus::before { content: "−"; }
.detail-copy .quantity-stepper .sit_qty_plus::before { content: "+"; }
.detail-copy .quantity-stepper input.num_input { height: 100%; padding: 0; }
.detail-copy .sit_option { margin-top: 18px; }
.detail-copy .sit_option h3 { margin: 0 0 8px; font-size: 14px; }
.detail-copy .detail-actions button { width: 100%; }
.detail-copy .wl-stocksms { margin: 12px 0 0; }
/* 그누보드 기본 CSS 는 legend 를 화면 밖으로 보낸다. 목업은 «수령방식» 제목을 보인다. */
.detail-copy .detail-fulfillment legend { position: static; margin-bottom: 10px; font-size: 14px; line-height: 1.5; text-indent: 0; overflow: visible; }
/* 영카트 스킨 style.css 의 #sit_sel_option 상자(테두리·회색 바탕)를 목업 수량 줄로 되돌린다. */
.detail-copy #sit_sel_option { margin: 0; padding: 0; border: 0; background: none; }
.detail-copy #sit_sel_option h3 { display: none; }
.detail-copy .opt_count { margin: 0; padding: 0; border: 0; background: none; }
/* 상세 아래 탭 단추 — 좁은 폭에서 woorilink.css 의 안쪽 여백 때문에 글자가 한 자씩 꺾였다. */
#sit_tab .tab_tit li button { padding-left: 4px; padding-right: 4px; white-space: nowrap; }