/*
 * 손님 쇼핑몰 목업 스타일시트 사본 — 09SCM-Shop 목업 styles.css 의 규칙을 그대로 옮긴 파일이다.
 *
 * ■ [09SCM 운영 가이드] 수정 안내 (운영·개발 — 전체 표는 docs/guide/09SCM_운영·수정가이드_20261007.xlsx)
 *   · 이 머리 주석 아래 본문은 목업 원본과 같게 둔다. 대조할 때는 이 머리 주석을 빼고 비교한다.
 *     라이브 화면에만 필요한 덧칠은 css/mall-live.css, 목업에 없는 상태는 css/order-mock1007.css 에 쓴다.
 *   · 디자인 토큰: :root 의 --key-color(키 색 #f26b1d) · --key-soft · --surface · --border · --text-* · --error.
 *     키 색을 바꿀 때는 이 파일이 아니라 mall-live.css 의 :root 에서 덮는다(뒤에 실려 이긴다).
 *   · 주요 구역: 헤더·서랍(.utility-bar·.main-header·.category-drawer) · 카드(.product-card·.product-grid) ·
 *     상세(.detail-*) · 장바구니(.cart-*) · 주문서(.checkout-*) · 마이페이지 · 간편조회(.quick-lookup-*) · 반응형 @media 720px.
 *   · 판 번호는 head.sub.php 가 filemtime 으로 붙인다 — 올리면 Cloudflare 엣지 캐시가 저절로 갈린다.
 *   · 시험: php tools/selftest/run.php shop_mock1007_storefront · mobile_viewport_layout_20260930
 */
:root {
  --surface: #ffffff;
  --soft-surface: #f4f4f4;
  --border: #ebebeb;
  --text-secondary: #6b6b6b;
  --text-body: #1a1a1a;
  --key-color: #f26b1d;
  --key-soft: #fff0e7;
  --error: #e0362e;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--surface);
  color: var(--text-body);
  font-family: "Noto Sans KR", "Noto Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

button,
input,
select { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.site-width {
  width: min(100%, 1600px);
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.utility-bar {
  min-height: 32px;
  border-bottom: 1px solid #000000;
  background: #000000;
  color: #ffffff;
  font-size: 12px;
}

.utility-inner {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
}

.utility-inner a { color: #ffffff; font-weight: 700; }
.utility-inner a:hover { color: #ffffff; text-decoration: underline; }
.utility-links { display: flex; align-items: center; justify-content: flex-end; gap: 14px; white-space: nowrap; }
.utility-links a + a { border-left: 1px solid #6b6b6b; padding-left: 14px; }

.main-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.header-inner {
  display: grid;
  min-height: 82px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-right { justify-content: flex-end; }

.icon-text-button,
.header-action,
.icon-button,
.copy-button,
.remove-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.icon-text-button,
.header-action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 4px;
  color: var(--text-secondary);
  padding: 0 10px;
}

.icon-text-button:hover,
.header-action:hover { background: var(--soft-surface); color: var(--text-body); }

.menu-icon { display: grid; width: 18px; gap: 4px; }
.menu-icon i { height: 1px; background: currentColor; }

.search-icon {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.search-icon::after {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 6px;
  height: 1.5px;
  transform: rotate(45deg);
  background: currentColor;
  content: "";
}

.store-brand {
  display: flex;
  min-width: 220px;
  align-items: center;
  justify-content: center;
}

.store-brand strong { font-size: 20px; font-weight: 700; }

.cart-action b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 20px;
  background: var(--key-color);
  color: var(--surface);
  font-size: 12px;
}

.search-panel {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.search-panel.is-open { display: block; }

.search-panel-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 560px) auto auto;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
}

.search-panel label { font-weight: 700; }

.search-panel input,
.quantity-row select,
.cart-quantity select {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-body);
  padding: 0 12px;
}

.search-panel input:focus,
.quantity-row select:focus,
.cart-quantity select:focus { border-color: var(--key-color); outline: 0; }

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 0 18px;
}

.primary-button { border: 1px solid var(--key-color); background: var(--key-color); color: var(--surface); }
.primary-button:hover { border-color: #d95912; background: #d95912; }
.secondary-button { border: 1px solid var(--border); background: var(--surface); color: var(--text-body); }
.secondary-button:hover { border-color: #cfcfcf; background: #fafafa; }

.icon-text-button:focus-visible,
.header-action:focus-visible,
.icon-button:focus-visible,
.category-list a:focus-visible,
.copy-button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.product-link:focus-visible,
.remove-button:focus-visible {
  outline: 2px solid var(--key-color);
  outline-offset: 2px;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(26 26 26 / 36%);
}

.category-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  display: flex;
  width: min(340px, 90vw);
  flex-direction: column;
  transform: translateX(-100%);
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: transform 160ms ease;
}

.category-drawer.is-open { transform: translateX(0); }

.drawer-header {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
}

.drawer-header span { color: var(--key-color); font-size: 12px; font-weight: 700; }
.drawer-header h2 { margin: 2px 0 0; font-size: 24px; }

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 24px;
}

.icon-button:hover { background: var(--soft-surface); }

.category-list { flex: 1; overflow-y: auto; padding: 16px 12px; }
.drawer-fulfillment-links { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.drawer-fulfillment-links a { display: flex; min-height: 40px; flex: 1; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 4px; color: var(--text-body); font-weight: 700; }
.drawer-fulfillment-links a:hover { border-color: var(--key-color); color: var(--key-color); }

.category-list a {
  display: flex;
  min-height: 44px;
  align-items: center;
  border-radius: 4px;
  color: var(--text-secondary);
  padding: 0 12px;
}

.category-list a:hover { background: var(--key-soft); color: var(--key-color); font-weight: 700; }

.drawer-admin-login,
.drawer-franchise-link {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  color: var(--key-color);
  font-weight: 700;
  padding: 0 24px;
}

.drawer-admin-login::after,
.drawer-franchise-link::after { content: "→"; }

.store-information { border-bottom: 1px solid var(--border); background: var(--surface); }

.store-info-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.5fr .9fr .9fr 1.5fr;
  padding: 0 24px;
}

.info-item {
  display: flex;
  min-width: 0;
  min-height: 80px;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--border);
  padding: 14px 18px;
}

.info-item:first-child { border-left: 1px solid var(--border); }
.info-item > span { margin-bottom: 5px; color: var(--text-secondary); font-size: 12px; }
.info-item strong,
.info-item a { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.info-item a:hover { color: var(--key-color); }

.bank-info > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
.bank-info strong { flex: 1; }

.copy-button {
  flex: 0 0 auto;
  height: 30px;
  border: 1px solid #ffd0b5;
  border-radius: 4px;
  background: var(--key-soft);
  color: var(--key-color);
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
}

.page-root { min-height: 520px; background: var(--surface); }
.main-content,
.catalog-page,
.detail-page,
.cart-page { padding: 24px 24px 64px; }

.featured-section { padding-top: 36px; }
.main-content > .featured-section:first-child { padding-top: 0; }

.section-heading,
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.section-heading h1,
.page-heading h1 { margin: 0 0 4px; font-size: 24px; line-height: 1.35; }
.section-heading p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.section-heading > a { color: var(--key-color); font-weight: 700; }
.page-heading > div > span { color: var(--key-color); font-size: 12px; font-weight: 700; }
.page-heading > strong { color: var(--text-secondary); font-size: 14px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
}

.product-card { min-width: 0; }
.product-soldout-badge { position: absolute; top: 10px; left: 10px; z-index: 3; border-radius: 4px; padding: 5px 8px; background: var(--text-secondary); color: var(--surface); font-size: 12px; font-weight: 700; line-height: 1; pointer-events: none; }

.product-link {
  position: relative;
  display: block;
  min-width: 0;
}

.product-image {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  place-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--soft-surface);
  color: var(--text-secondary);
  font-size: 13px;
}

.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-placeholder::before { width: 48px; height: 36px; border: 1px solid #cfcfcf; border-radius: 4px; content: ""; }
.product-placeholder > span { position: absolute; }

.product-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  border-radius: 6px;
  background: rgb(26 26 26 / 72%);
  color: var(--surface);
  opacity: 0;
  transition: opacity 140ms ease;
}

.product-link:hover .product-hover,
.product-link:focus-visible .product-hover { opacity: 1; }

.product-copy { display: grid; min-width: 0; gap: 7px; }
.product-category { display: block; color: var(--text-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; }
.product-name { display: block; color: var(--text-body); font-size: 16px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.product-price { display: block; color: var(--text-body); font-size: 16px; font-weight: 700; line-height: 1.4; }
.product-pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.product-sale-line { display: inline-flex; align-items: baseline; gap: 7px; }
.product-sale-line b { color: var(--key-color); font-size: 14px; }
.product-sale-line strong,
.product-price-single { color: var(--text-body); font-size: 16px; font-weight: 700; line-height: 1.4; }
.product-regular-price { flex-basis: 100%; color: var(--text-secondary); font-size: 12px; }
.product-availability { display: flex; flex-wrap: wrap; align-items: center; min-height: 22px; gap: 4px 8px; color: var(--text-secondary); font-size: 12px; }
.product-availability b { color: var(--key-color); font-weight: 700; }
.pickup-date-text { display: inline-flex; min-height: 22px; align-items: center; line-height: 1; }
.fulfillment-badge { display: inline-flex; min-height: 22px; align-items: center; border: 1px solid var(--border); border-radius: 3px; padding: 0 6px; color: var(--text-body); font-size: 12px; font-weight: 700; line-height: 1; }
.pickup-date-nav { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 24px; padding-bottom: 4px; white-space: nowrap; }
.pickup-date-nav a { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; border: 1px solid var(--border); border-radius: 4px; padding: 0 14px; }
.pickup-date-nav a.is-active { border-color: var(--key-color); background: var(--key-soft); color: var(--key-color); font-weight: 700; }
.pickup-period { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 12px; }
.pickup-summary { margin: 12px 0; border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.pickup-summary strong { color: var(--text-body); }
.order-item-lines { display: grid; gap: 7px; margin-top: 6px; }
.order-item-lines > span { display: grid; gap: 2px; }
.order-item-lines b { color: var(--text-body); font-size: 14px; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.order-item-lines small { color: var(--text-secondary); font-size: 12px; }

.catalog-page,
.detail-page,
.cart-page { padding-top: 36px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--text-secondary);
  font-size: 12px;
}

.breadcrumb a:hover { color: var(--key-color); }
.breadcrumb strong { overflow: hidden; color: var(--text-body); text-overflow: ellipsis; white-space: nowrap; }

.detail-layout {
  display: grid;
  max-width: 1100px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}

.detail-layout > .product-image { margin: 0; }
.product-image.is-detail { aspect-ratio: 1 / 1; }

.detail-copy { padding-top: 12px; }
.detail-copy h1 { margin: 7px 0 10px; font-size: 24px; line-height: 1.4; }
.detail-price { display: block; margin-bottom: 26px; font-size: 20px; }

.detail-list { margin: 0; border-top: 1px solid var(--border); }
.detail-list > div { display: grid; min-height: 52px; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); }
.detail-list dt { color: var(--text-secondary); }
.detail-list dd { margin: 0; font-weight: 700; }

.detail-fulfillment { margin: 18px 0 0; padding: 0; border: 0; }
.detail-fulfillment legend { margin-bottom: 10px; font-weight: 700; }
.detail-fulfillment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.detail-fulfillment-options label { position: relative; cursor: pointer; }
.detail-fulfillment-options input { position: absolute; opacity: 0; pointer-events: none; }
.detail-fulfillment-options span { display: grid; min-height: 44px; place-items: center; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-secondary); font-weight: 700; }
.detail-fulfillment-options input:checked + span { border-color: var(--key-color); background: var(--key-soft); color: var(--key-color); }
.detail-fulfillment-options label:only-child { grid-column: 1 / -1; }
.detail-fulfillment-options input:focus-visible + span { outline: 2px solid var(--key-color); outline-offset: 2px; }

.quantity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.quantity-row label { font-weight: 700; }

.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.detail-actions .primary-button,
.detail-actions .secondary-button { min-height: 46px; }

.simple-description {
  max-width: 1100px;
  margin-top: 44px;
  padding: 24px 0;
  border-top: 1px solid var(--text-body);
  border-bottom: 1px solid var(--border);
}

.simple-description h2 { margin: 0 0 10px; font-size: 16px; }
.simple-description p { margin: 0; color: var(--text-secondary); }

.cart-toolbar { display: flex; min-height: 50px; align-items: center; justify-content: space-between; border-top: 1px solid var(--text-body); border-bottom: 1px solid var(--border); }
.cart-toolbar label { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.cart-toolbar label span { color: var(--text-secondary); font-size: 12px; font-weight: 400; }
.cart-toolbar input,
.cart-select input { width: 18px; height: 18px; accent-color: var(--key-color); cursor: pointer; }
.selection-delete-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-secondary); cursor: pointer; }
.selection-delete-button:hover:not(:disabled) { border-color: var(--error); color: var(--error); }
.selection-delete-button:disabled { color: #bdbdbd; cursor: not-allowed; }
.cart-list { border-top: 0; }

.cart-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px 100px minmax(0, 1fr) minmax(260px, auto) 54px;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.cart-select { display: grid; place-items: center; }
.cart-image-wrap { position: relative; min-width: 0; }
.cart-image-wrap > .product-image { margin: 0; }
.cart-image-wrap > .product-soldout-badge { top: 8px; left: 8px; }
.cart-product { display: grid; gap: 7px; min-width: 0; }
.cart-product > a { display: block; font-size: 16px; font-weight: 700; }
.cart-product > a:hover { color: var(--key-color); }
.cart-row.is-soldout .cart-image-wrap > .product-image { opacity: .6; }
.cart-row.is-soldout .cart-line-total { color: var(--text-secondary); }
.cart-select input:disabled { cursor: not-allowed; }
.cart-product-pricing { margin: 0; }
.cart-row-controls { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.cart-quantity-stepper { display: grid; grid-template-columns: 36px 44px 36px; height: 38px; overflow: hidden; border: 1px solid var(--border); border-radius: 4px; }
.cart-quantity-stepper button,
.cart-quantity-stepper span { display: grid; min-width: 0; place-items: center; border: 0; background: var(--surface); color: var(--text-body); }
.cart-quantity-stepper button { cursor: pointer; font-size: 17px; }
.cart-quantity-stepper button:hover:not(:disabled) { background: var(--key-soft); color: var(--key-color); }
.cart-quantity-stepper button:disabled { color: #bdbdbd; cursor: not-allowed; }
.cart-quantity-stepper span { border-right: 1px solid var(--border); border-left: 1px solid var(--border); font-weight: 700; }
.cart-line-total { min-width: 110px; text-align: right; white-space: nowrap; font-size: 16px; }
.remove-button { min-height: 38px; border-radius: 4px; color: var(--text-secondary); }
.remove-button:hover { background: var(--soft-surface); color: var(--error); }

.cart-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.cart-summary-prices { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; gap: 12px 24px; color: var(--text-secondary); }
.cart-summary-prices span { display: inline-flex; align-items: baseline; gap: 9px; }
.cart-summary-prices strong { color: var(--text-body); font-size: 18px; }
.cart-summary-prices .cart-summary-pickup { align-items: center; min-height: 38px; border: 1px solid var(--border); border-radius: 4px; padding: 0 12px; font-size: 12px; }
.cart-summary-pickup strong { font-size: 14px; }
.cart-order-actions { display: flex; gap: 10px; }
.cart-order-actions .primary-button,
.cart-order-actions .secondary-button { min-width: 150px; min-height: 46px; }
.cart-order-actions button:disabled { border-color: var(--border); background: #efefef; color: #a5a5a5; cursor: not-allowed; }

.empty-state {
  display: grid;
  min-height: 300px;
  place-items: center;
  align-content: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  text-align: center;
}

.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner { padding: 0 24px; }

.footer-business,
.footer-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-business { min-height: 68px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }
.footer-business > div { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-business strong { color: var(--text-body); font-weight: 400; }
.footer-business nav { display: flex; flex: 0 0 auto; gap: 18px; }
.footer-business a:hover,
.footer-service a:hover { color: var(--key-color); }

.footer-service { min-height: 64px; }
.footer-service strong { font-size: 14px; }
.footer-service a { color: var(--key-color); font-weight: 700; }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  max-width: min(380px, calc(100vw - 32px));
  transform: translateY(16px);
  border-radius: 4px;
  background: var(--text-body);
  color: var(--surface);
  opacity: 0;
  padding: 13px 16px;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.toast.is-visible { transform: translateY(0); opacity: 1; }

@media (max-width: 1023px) {
  .store-info-grid { grid-template-columns: repeat(3, 1fr); padding: 16px 24px; gap: 1px; }
  .info-item { min-height: 76px; border: 1px solid var(--border); margin: 0 -1px -1px 0; padding: 12px 14px; }
  .info-item:first-child { border-left: 1px solid var(--border); }
  .bank-info { grid-column: span 2; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .availability-section .product-card:nth-child(n + 4) { display: none; }
}

@media (max-width: 720px) {
  .utility-inner { justify-content: center; padding: 0 8px; }
  .utility-inner > span { white-space: nowrap; }
  .utility-links { display: none; }



  .header-inner {
    min-height: 62px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 0 12px;
  }

  .icon-text-button { min-width: 42px; padding: 0 8px; }
  .icon-text-button > span:last-child { display: none; }
  #searchOpen { display: none; }
  .store-brand { min-width: 0; }
  .store-brand strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }

  .header-right { gap: 0; }
  .login-action { display: none; }
  .header-action { min-width: 42px; padding: 0 5px; font-size: 12px; }
  .cart-action { font-size: 0; }
  .cart-action::before { content: "장바구니"; font-size: 12px; }
  .my-action { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .search-panel { display: block; }
  .search-panel-inner { grid-template-columns: 1fr auto; gap: 8px; padding: 10px 16px; }
  .search-panel label,
  .desktop-only { display: none; }

  .store-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; }
  .info-item,
  .info-item:first-child { min-height: 70px; margin: 0; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 14px; }
  .info-item:nth-child(2n) { border-right: 0; }
  .bank-info { grid-column: 1 / -1; border-right: 0; }
  .info-item strong,
  .info-item a { white-space: normal; }

  .main-content,
  .catalog-page,
  .detail-page,
  .cart-page { padding: 18px 14px 44px; }

  .featured-section { padding-top: 28px; }
  .section-heading,
  .page-heading { align-items: flex-start; margin-bottom: 18px; }
  .section-heading h1,
  .page-heading h1 { font-size: 20px; }
  .section-heading p { font-size: 12px; }
  .section-heading > a { font-size: 12px; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .availability-section .product-card:nth-child(n + 4) { display: block; }
  .product-hover { display: none; }
  .product-name { font-size: 14px; line-height: 1.45; }
  .product-price,
  .product-sale-line strong,
  .product-price-single { font-size: 14px; }
  .product-sale-line b { font-size: 13px; }

  .breadcrumb { margin-bottom: 14px; }
  .detail-layout { grid-template-columns: 1fr; gap: 20px; }
  .detail-copy { padding-top: 0; }
  .detail-copy h1 { font-size: 20px; }
  .detail-price { margin-bottom: 20px; font-size: 18px; }
  .detail-list > div { grid-template-columns: 86px 1fr; gap: 12px; }
  .detail-actions { position: sticky; bottom: 0; z-index: 4; margin: 20px -14px -20px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface); }
  .simple-description { margin-top: 40px; }

  .cart-toolbar { min-height: 48px; }
  .cart-row { grid-template-columns: 26px 78px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
  .cart-select { grid-row: 1 / span 2; align-self: start; padding-top: 28px; }
  .cart-image-wrap { grid-row: 1 / span 2; }
  .cart-product { grid-column: 3; padding-right: 36px; }
  .cart-row-controls { grid-column: 3; justify-content: space-between; gap: 12px; }
  .cart-quantity-stepper { grid-template-columns: 34px 40px 34px; height: 36px; }
  .cart-line-total { min-width: auto; font-size: 14px; }
  .remove-button { position: absolute; top: 16px; right: 0; }

  .cart-summary { grid-template-columns: 1fr; align-items: stretch; gap: 16px; }
  .cart-summary-prices { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cart-summary-prices span { width: 100%; justify-content: space-between; }
  .cart-summary-prices .cart-summary-pickup { justify-content: flex-start; }
  .cart-order-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cart-order-actions .primary-button,
  .cart-order-actions .secondary-button { min-width: 0; width: 100%; }

  .footer-inner { padding: 0 14px; }
  .footer-business,
  .footer-service { align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px 0; }
  .footer-business > div { gap: 7px 12px; }
  .footer-business > div span { width: 100%; }
  .footer-business nav { gap: 14px; }
  .footer-service { min-height: auto; }

  .toast { right: 16px; bottom: 16px; }
}

@media (max-width: 390px) {
  .my-action { display: none; }
  .detail-actions { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .product-hover { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Approved IA refinement: category depth, product detail, and mobile navigation */
.mobile-search-toggle,
.drawer-member-menu { display: none; }

.drawer-category-title {
  display: block;
  padding: 18px 24px 8px;
  font-size: 16px;
}

.category-list { padding-top: 6px; }
.category-list .category-all { color: var(--text-body); font-weight: 700; }
.category-group { padding: 8px 0 12px; border-top: 1px solid var(--border); }
.category-list .category-parent { color: var(--text-body); font-weight: 700; }
.category-children { display: grid; grid-template-columns: 1fr 1fr; padding: 0 8px 4px; }
.category-list .category-children a { min-height: 38px; padding: 0 10px; font-size: 13px; }

.detail-inner { width: min(100%, 1280px); margin: 0 auto; }
.detail-layout { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.detail-layout > .product-image { max-width: 600px; }

.product-gallery { width: 100%; max-width: 600px; }
.gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--soft-surface);
  touch-action: pan-y;
}
.gallery-stage > img { width: 100%; height: 100%; object-fit: cover; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 50%;
  background: rgb(26 26 26 / 55%);
  color: #fff;
  font-size: 27px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}
.gallery-arrow:hover { background: rgb(26 26 26 / 75%); }
.gallery-prev { left: 16px; }
.gallery-next { right: 16px; }
.gallery-counter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 5px 10px;
  border-radius: 14px;
  background: rgb(26 26 26 / 68%);
  color: #fff;
  font-size: 12px;
}
.gallery-thumbnails { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.gallery-thumbnail {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
}
.gallery-thumbnail.is-active { border: 2px solid var(--key-color); }
.gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.detail-title-row { display: flex; align-items: flex-start; gap: 10px; }
.detail-title-row h1 { flex: 1; }
.soldout-badge { flex: 0 0 auto; margin-top: 10px; padding: 4px 8px; border-radius: 4px; background: var(--text-secondary); color: #fff; font-size: 12px; font-weight: 700; }
.detail-price-block { margin: 6px 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.detail-price-block > div { display: flex; align-items: baseline; gap: 10px; }
.price-label { min-width: 54px; color: var(--text-secondary); font-size: 13px; }
.detail-price-block .detail-price { display: inline; margin: 0; font-size: 24px; }
.discount-rate { color: var(--key-color); font-size: 18px; }
.regular-price { margin-top: 7px; }
.regular-price del { color: var(--text-secondary); font-size: 14px; }

.quantity-row > span { font-weight: 700; }
.quantity-stepper {
  display: grid;
  grid-template-columns: 40px 52px 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.quantity-stepper button,
.quantity-stepper input {
  min-width: 0;
  border: 0;
  background: var(--surface);
  color: var(--text-body);
  text-align: center;
}
.quantity-stepper button { cursor: pointer; font-size: 18px; }
.quantity-stepper button:hover:not(:disabled) { background: var(--key-soft); color: var(--key-color); }
.quantity-stepper button:disabled { color: #bdbdbd; cursor: not-allowed; }
.quantity-stepper input { width: 52px; border-right: 1px solid var(--border); border-left: 1px solid var(--border); font-weight: 700; }
.detail-total { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.detail-total span { color: var(--text-secondary); }
.detail-total strong { font-size: 20px; }
.detail-actions button:disabled { border-color: var(--border); background: #efefef; color: #a5a5a5; cursor: not-allowed; }

.simple-description {
  display: grid;
  max-width: none;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: 48px;
  margin: 52px 0 0;
  padding: 40px 0;
}
.simple-description > img {
  width: 100%;
  min-height: 300px;
  max-height: 380px;
  border-radius: 6px;
  object-fit: cover;
  object-position: 66% center;
}
.description-copy > span { color: var(--key-color); font-size: 12px; font-weight: 700; }
.description-copy h2 { margin: 7px 0 12px; font-size: 20px; line-height: 1.45; }
.description-copy > p { margin: 0 0 22px; color: var(--text-secondary); font-size: 14px; }
.description-copy dl { margin: 0; border-top: 1px solid var(--border); }
.description-copy dl > div { display: grid; grid-template-columns: 86px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.description-copy dt { color: var(--text-secondary); }
.description-copy dd { margin: 0; }

@media (max-width: 720px) {
  .desktop-member-menu { display: none; }
  .mobile-search-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
  }
  .mobile-search-toggle .close-icon { display: none; font-size: 24px; line-height: 1; }
  .mobile-search-toggle.is-open .search-icon { display: none; }
  .mobile-search-toggle.is-open .close-icon { display: block; }

  .search-panel { display: none; }
  .search-panel.is-open { display: block; }

  .drawer-member-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .drawer-member-menu button,
  .drawer-member-menu a {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-size: 13px;
  }
  .drawer-member-menu b { margin-left: 4px; color: var(--key-color); }
  .drawer-category-title { padding: 18px 20px 8px; }
  .category-list { padding: 4px 12px 16px; }
  .category-children { padding: 0 6px 4px; }

  .detail-page { padding-top: 18px; }
  .detail-layout { grid-template-columns: 1fr; gap: 20px; }
  .detail-layout > .product-image { max-width: none; }
  .product-gallery { max-width: none; }
  .gallery-arrow { width: 38px; height: 38px; font-size: 24px; }
  .gallery-prev { left: 10px; }
  .gallery-next { right: 10px; }
  .gallery-counter { right: 10px; bottom: 10px; }
  .gallery-thumbnail { flex-basis: 62px; width: 62px; height: 62px; }
  .detail-price-block .detail-price { font-size: 22px; }
  .quantity-stepper { grid-template-columns: 44px 54px 44px; height: 44px; }
  .quantity-stepper input { width: 54px; }

  .simple-description { grid-template-columns: 1fr; gap: 24px; margin-top: 42px; padding: 30px 0; }
  .simple-description > img { min-height: 190px; max-height: 240px; }
  .description-copy h2 { font-size: 18px; }
  .description-copy dl > div { grid-template-columns: 76px 1fr; gap: 10px; }
}

/* Order form and order completion */
.checkout-page,
.order-complete-page { padding-top: 28px; padding-bottom: 72px; }
.checkout-heading { margin-bottom: 22px; }
.checkout-layout,
.completion-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 24px; align-items: start; }
.checkout-main,
.completion-main { display: grid; gap: 16px; }
.checkout-section,
.checkout-summary,
.completion-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 24px;
}
.checkout-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.checkout-section-title > span { color: var(--key-color); font-size: 12px; font-weight: 700; }
.checkout-section-title h2,
.checkout-summary h2,
.completion-card h2 { margin: 0; font-size: 20px; }
.checkout-order-list { display: grid; gap: 16px; }
.checkout-order-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.checkout-order-row:last-child { padding-bottom: 0; border-bottom: 0; }
.checkout-order-row .product-image { width: 82px; aspect-ratio: 1 / 1; }
.checkout-order-row > div { display: grid; gap: 4px; }
.checkout-order-row > div > strong { font-size: 16px; }
.checkout-order-row small { color: var(--text-secondary); }
.checkout-order-row > b { white-space: nowrap; font-size: 16px; }
.checkout-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.member-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.checkout-field { display: grid; gap: 8px; }
.checkout-field > span { font-size: 13px; font-weight: 700; }
.checkout-field input,
.checkout-field select,
.checkout-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-body);
  font: inherit;
}
.checkout-field textarea { resize: vertical; }
.checkout-field input[readonly] { background: #f7f7f7; color: var(--text-secondary); }
.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus { outline: none; border-color: var(--key-color); }
.choice-cards { display: grid; gap: 12px; }
.fulfillment-options { grid-template-columns: 1fr 1fr; }
.payment-options { grid-template-columns: repeat(3, 1fr); }
.choice-card { position: relative; display: block; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card > span { display: grid; min-height: 76px; align-content: center; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.choice-card input:checked + span { border-color: var(--key-color); background: var(--key-soft); color: var(--key-color); }
.choice-card small { color: var(--text-secondary); }
.choice-card.is-compact > span { min-height: 52px; text-align: center; }
.fulfillment-panel { display: grid; gap: 16px; }
.fulfillment-panel[hidden],
.payment-options[hidden],
.delivery-payment[hidden],
.transfer-panel[hidden] { display: none; }
.store-summary { padding: 16px; border-radius: 4px; background: var(--soft-surface); }
.store-summary span { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 12px; }
.store-summary strong { display: block; }
.store-summary p { margin: 4px 0 0; color: var(--text-secondary); }
.delivery-address-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.delivery-address-heading > strong { font-size: 13px; }
.text-button { border: 0; background: transparent; color: var(--key-color); cursor: pointer; font-weight: 700; padding: 4px 0; }
.delivery-address-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.saved-address-card { position: relative; display: block; cursor: pointer; }
.saved-address-card > input { position: absolute; opacity: 0; pointer-events: none; }
.saved-address-card > span { display: grid; min-height: 88px; align-content: center; gap: 7px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.saved-address-card > input:checked + span { border-color: var(--key-color); background: var(--key-soft); }
.saved-address-card b { display: flex; align-items: center; gap: 7px; }
.saved-address-card em { border-radius: 3px; background: var(--key-color); color: #fff; font-size: 11px; font-style: normal; padding: 2px 5px; }
.saved-address-card small { color: var(--text-secondary); line-height: 1.5; }
.delivery-address-empty { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--soft-surface); color: var(--text-secondary); }
.manual-address-field[hidden] { display: none; }
.delivery-note { margin: 0; color: var(--key-color); font-size: 13px; }
.delivery-payment { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--key-color); border-radius: 4px; background: var(--key-soft); }
.delivery-payment span { color: var(--text-secondary); font-size: 13px; }
.transfer-panel { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border-radius: 4px; background: var(--soft-surface); }
.transfer-field { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.transfer-field > span { color: var(--text-secondary); font-size: 13px; font-weight: 700; }
.transfer-field input { min-width: 0; width: 100%; height: 42px; border: 1px solid var(--border); border-radius: 4px; padding: 0 12px; }
.transfer-field input:focus { border-color: var(--key-color); outline: 0; }
.transfer-panel p { display: grid; gap: 6px; margin: 0; }
.transfer-panel p span { color: var(--text-secondary); font-size: 12px; }
.order-agreement { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.order-agreement input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--key-color); }
.checkout-summary { position: sticky; top: 96px; }
.checkout-summary h2 { margin-bottom: 22px; }
.summary-line { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0; color: var(--text-secondary); }
.summary-line[hidden] { display: none; }
.summary-line strong { color: var(--text-body); }
.summary-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.summary-total strong { color: var(--key-color); font-size: 24px; }
.checkout-submit { width: 100%; margin-top: 22px; }
.checkout-summary > p { margin: 12px 0 0; color: var(--text-secondary); font-size: 12px; text-align: center; }

.completion-hero { max-width: 720px; margin: 20px auto 36px; text-align: center; }
.completion-check { display: grid; width: 54px; height: 54px; margin: 0 auto 14px; place-items: center; border-radius: 50%; background: var(--key-color); color: #fff; font-size: 24px; }
.completion-status { display: inline-block; padding: 5px 10px; border-radius: 4px; background: var(--key-soft); color: var(--key-color); font-size: 12px; font-weight: 700; }
.completion-hero h1 { margin: 12px 0 8px; font-size: 24px; }
.completion-hero > p { margin: 0; color: var(--text-secondary); }
.completion-hero dl { display: flex; justify-content: center; gap: 28px; margin: 22px 0 0; }
.completion-hero dl > div { display: flex; gap: 8px; }
.completion-hero dt { color: var(--text-secondary); }
.completion-hero dd { margin: 0; font-weight: 700; }
.completion-list { margin-top: 18px; }
.completion-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.completion-list > div:last-child { border-bottom: 0; }
.completion-list span { display: grid; gap: 4px; }
.completion-list small { color: var(--text-secondary); }
.completion-info { margin: 18px 0 0; }
.completion-info > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.completion-info > div:last-child { border-bottom: 0; }
.completion-info dt { color: var(--text-secondary); }
.completion-info dd { margin: 0; }
.completion-payment { position: sticky; top: 96px; }
.completion-payment h2 { margin-bottom: 20px; }
.completion-payment > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--text-secondary); }
.completion-payment > div strong { color: var(--text-body); }
.completion-payment .completion-payment-total { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-body); }
.completion-payment-total strong { color: var(--key-color) !important; font-size: 24px; }
.completion-actions { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.completion-actions .primary-button,
.completion-actions .secondary-button { min-width: 160px; }

@media (max-width: 900px) {
  .checkout-page,
  .order-complete-page { padding: 24px 24px 56px; }
  .checkout-layout,
  .completion-layout { grid-template-columns: 1fr; }
  .checkout-summary,
  .completion-payment { position: static; }
}

@media (max-width: 720px) {
  .checkout-page,
  .order-complete-page { padding: 18px 14px 48px; }
  .checkout-layout,
  .completion-layout { grid-template-columns: 1fr; }
  .checkout-section,
  .checkout-summary,
  .completion-card { padding: 18px; }
  .checkout-summary,
  .completion-payment { position: static; }
  .checkout-order-row { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .checkout-order-row .product-image { width: 68px; }
  .checkout-order-row > b { grid-column: 2; }
  .checkout-form-grid,
  .member-grid,
  .payment-options,
  .transfer-panel { grid-template-columns: 1fr; }
  .delivery-address-options { grid-template-columns: 1fr; }
  .fulfillment-options { grid-template-columns: 1fr 1fr; }
  .choice-card > span { min-height: 68px; padding: 12px; }
  .delivery-payment { align-items: flex-start; flex-direction: column; }
  .completion-hero { margin-top: 8px; }
  .completion-hero dl { align-items: center; flex-direction: column; gap: 8px; }
  .completion-info > div { grid-template-columns: 84px 1fr; gap: 12px; }
  .completion-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .completion-actions .primary-button,
  .completion-actions .secondary-button { min-width: 0; width: 100%; }
}

@media (max-width: 360px) {
  .fulfillment-options { grid-template-columns: 1fr; }
}

/* My page order history and order detail */
.mypage-page { padding: 28px 24px 72px; }
.mypage-breadcrumb { margin-bottom: 22px; }
.mypage-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.mypage-menu { border-top: 2px solid var(--text-body); }
.mypage-menu h1 { margin: 0; padding: 22px 16px; border-bottom: 1px solid var(--border); font-size: 24px; }
.mypage-menu nav { display: grid; }
.mypage-menu nav > a,
.mypage-menu nav > button {
  display: flex;
  min-height: 48px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: 0 16px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}
.mypage-menu nav > a:hover,
.mypage-menu nav > button:hover,
.mypage-menu nav > .is-active { color: var(--key-color); font-weight: 700; }
.mypage-menu nav > .is-active { background: var(--key-soft); }
.mypage-menu nav > span { height: 18px; border-bottom: 1px solid var(--border); }
.mypage-menu .withdrawal-link { color: #999; font-size: 12px; }
.mypage-content { min-width: 0; }
.mypage-content-heading { display: flex; min-height: 62px; align-items: flex-start; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--text-body); padding-bottom: 18px; }
.mypage-content-heading h2 { margin: 0 0 6px; font-size: 24px; }
.mypage-content-heading p { margin: 0; color: var(--text-secondary); }
.mypage-content-heading > span { padding-top: 8px; color: var(--text-secondary); }
.mypage-content-heading > span strong { margin-left: 8px; color: var(--text-body); }

.mypage-form { display: grid; gap: 16px; margin-top: 20px; }
.mypage-panel { display: grid; gap: 18px; border: 1px solid var(--border); background: var(--surface); padding: 24px; }
.mypage-panel h3 { margin: 0; font-size: 20px; }
.mypage-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mypage-panel-title > span { color: var(--key-color); font-size: 13px; font-weight: 700; }
.mypage-section-copy { margin: -8px 0 0; color: var(--text-secondary); font-size: 13px; }
.mypage-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.address-form-grid { grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); }
.mypage-panel textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  padding: 12px;
  color: var(--text-body);
  font: inherit;
}
.mypage-panel textarea:focus { border-color: var(--key-color); outline: 0; }
.mypage-panel input:disabled { background: #f4f4f4; color: #999; cursor: not-allowed; }
.mypage-panel button:disabled { border-color: var(--border); background: #efefef; color: #a5a5a5; cursor: not-allowed; }
.mypage-readonly-field { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 18px; }
.mypage-readonly-field > span { font-size: 13px; font-weight: 700; }
.mypage-readonly-field > strong { display: flex; min-height: 44px; align-items: center; border: 1px solid var(--border); border-radius: 4px; background: #f7f7f7; padding: 0 12px; color: var(--text-secondary); }
.mypage-readonly-field > p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.mypage-password-row { grid-template-columns: 1fr auto; align-items: center; }
.mypage-password-row > div { display: grid; gap: 8px; }
.mypage-password-row p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.mypage-password-row .secondary-button { min-width: 124px; align-self: center; white-space: nowrap; }
.mypage-actions { display: flex; justify-content: flex-end; }
.mypage-actions > button { min-width: 140px; }
.mypage-address-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mypage-address-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 16px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fafafa;
  padding: 14px 16px;
}
.mypage-address-item.is-default { border-color: var(--key-color); background: #fff; }
.mypage-address-item strong { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.mypage-address-item p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.mypage-address-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mypage-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 3px;
  background: var(--key-color);
  padding: 0 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.withdrawal-panel ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--text-secondary); }
.mypage-alert { margin: 0; border-left: 3px solid #e5a100; background: #fff8e6; padding: 13px 14px; color: #8a6200; font-size: 13px; }
.danger-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--error); border-radius: 4px; background: var(--error); padding: 0 18px; color: #fff; cursor: pointer; font-weight: 700; }
.danger-button:hover:not(:disabled) { background: #bd2b25; }

.order-history-filter {
  display: grid;
  grid-template-columns: 1fr 210px 84px;
  gap: 10px;
  margin-top: 20px;
  border: 1px solid var(--border);
  background: #fafafa;
  padding: 16px;
}
.order-channel-tabs { display: flex; gap: 20px; margin-top: 24px; border-bottom: 1px solid var(--border); }
.order-channel-tabs button { min-height: 42px; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 0 10px; color: var(--text-secondary); cursor: pointer; }
.order-channel-tabs button.is-active { border-bottom-color: var(--key-color); color: var(--key-color); font-weight: 700; }
.period-buttons { display: flex; }
.period-buttons button {
  min-width: 78px;
  height: 42px;
  margin-left: -1px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.period-buttons button:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
.period-buttons button:last-child { border-radius: 0 4px 4px 0; }
.period-buttons button.is-active { position: relative; z-index: 1; border-color: var(--key-color); color: var(--key-color); font-weight: 700; }
.order-history-filter select { width: 100%; height: 42px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); padding: 0 12px; }
.order-history-filter .secondary-button { min-height: 42px; }
.order-history-count { margin: 22px 0 10px; color: var(--text-secondary); }
.order-history-count strong { color: var(--key-color); }
.order-history-list { display: grid; gap: 16px; }
.order-history-card { border: 1px solid var(--border); background: var(--surface); }
.order-history-card[hidden] { display: none; }
.order-history-card > header { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); background: #fafafa; padding: 0 20px; }
.order-history-card > header > strong { font-size: 16px; }
.order-history-header-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 24px; }
.order-history-card > header span { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.order-history-card > header b { margin-left: 7px; color: var(--text-body); }
.order-history-body { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(310px, 0.9fr) 116px; gap: 28px; align-items: center; padding: 20px; }
.order-history-product { display: grid; grid-template-columns: 94px minmax(0, 1fr); align-items: center; gap: 16px; }
.order-history-product .product-image { width: 94px; aspect-ratio: 1 / 1; }
.order-history-product > span:last-child { display: grid; gap: 5px; min-width: 0; }
.order-history-product small,
.order-history-product em { color: var(--text-secondary); font-size: 12px; font-style: normal; }
.order-history-product strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.order-history-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; margin: 0; }
.order-history-meta > div { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 8px; }
.order-history-meta dt { color: var(--text-secondary); font-size: 13px; }
.order-history-meta dd { margin: 0; }
.status-badge { display: inline-flex; min-height: 26px; align-items: center; border-radius: 4px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.status-badge.is-neutral { background: #efefef; color: #555; }
.status-badge.is-warning { background: #fff6dc; color: #9a6900; }
.status-badge.is-success { background: #e5f6f3; color: #08786c; }
.status-badge.is-error { background: #fdeceb; color: var(--error); }
.order-history-actions { display: grid; gap: 8px; }
.order-history-actions .primary-button,
.order-history-actions .secondary-button { width: 100%; min-height: 40px; padding: 0 12px; white-space: nowrap; }
.order-case-action { color: var(--text-body); }

.order-detail-top { margin-bottom: 16px; }
.back-link { display: inline-flex; margin-bottom: 16px; color: var(--text-secondary); }
.back-link:hover { color: var(--key-color); }
.order-status-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-top: 0; }
.order-status-summary.has-request-status { grid-template-columns: repeat(4, 1fr); }
.order-status-summary > div { display: flex; min-height: 76px; align-items: center; justify-content: center; gap: 12px; border-left: 1px solid var(--border); }
.order-status-summary > div:first-child { border-left: 0; }
.order-status-summary > div > span { color: var(--text-secondary); font-size: 13px; }
.order-status-summary .order-request-status { flex-wrap: wrap; padding: 10px; }
.order-request-status .secondary-button { min-height: 28px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
.order-detail-section { margin-top: 16px; border: 1px solid var(--border); background: var(--surface); padding: 24px; }
.order-detail-section > h3 { margin: 0 0 20px; font-size: 20px; }
.order-detail-section > h3 span { margin-left: 5px; color: var(--key-color); font-size: 13px; }
.order-detail-products { border-top: 1px solid var(--text-body); }
.order-detail-products article { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--border); padding: 18px 0; }
.order-detail-products .product-image { width: 92px; aspect-ratio: 1 / 1; }
.order-detail-products article > div { display: grid; gap: 5px; min-width: 0; }
.order-detail-products small,
.order-detail-products article > div > span { color: var(--text-secondary); font-size: 12px; }
.order-detail-products article > div strong { font-size: 16px; }
.order-detail-products article > b { white-space: nowrap; font-size: 16px; }
.order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.order-detail-info { margin: 0; border-top: 1px solid var(--border); }
.order-detail-info > div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; border-bottom: 1px solid var(--border); padding: 13px 0; }
.order-detail-info dt { color: var(--text-secondary); }
.order-detail-info dd { margin: 0; }
.order-payment-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
.order-payment-total { margin: 0; }
.order-payment-total > div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; }
.order-payment-total dt { color: var(--text-secondary); }
.order-payment-total dd { margin: 0; }
.order-payment-total > div:last-child { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 18px; font-weight: 700; }
.order-payment-total > div:last-child dd { color: var(--key-color); font-size: 20px; }
.order-detail-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.order-detail-actions .primary-button,
.order-detail-actions .secondary-button { min-width: 120px; }

@media (max-width: 1100px) {
  .mypage-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
  .order-history-body { grid-template-columns: minmax(250px, 1fr) minmax(280px, 1fr); gap: 22px; }
  .order-history-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  .order-history-actions .primary-button,
  .order-history-actions .secondary-button { width: auto; min-width: 116px; }
}

@media (max-width: 820px) {
  .mypage-page { padding: 22px 24px 56px; }
  .mypage-layout { grid-template-columns: 1fr; gap: 24px; }
  .mypage-menu { border-top: 0; }
  .mypage-menu h1 { padding: 0 0 14px; border-bottom: 2px solid var(--text-body); font-size: 20px; }
  .mypage-menu nav { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); }
  .mypage-menu nav > a,
  .mypage-menu nav > button { flex: 0 0 auto; border-bottom: 0; padding: 0 14px; }
  .mypage-menu nav > span { display: none; }
  .order-history-filter { grid-template-columns: 1fr 190px 74px; }
  .order-history-body { grid-template-columns: 1fr; }
  .order-history-actions { grid-column: auto; }
  .order-detail-grid { grid-template-columns: 1fr; gap: 0; }
  .order-payment-layout { grid-template-columns: 1fr 280px; gap: 32px; }
}

@media (max-width: 620px) {
  .mypage-page { padding: 16px 14px 48px; }
  .mypage-breadcrumb { margin-bottom: 16px; }
  .mypage-content-heading { min-height: 0; flex-direction: column; gap: 4px; padding-bottom: 14px; }
  .mypage-content-heading h2 { font-size: 20px; }
  .mypage-content-heading > span { padding-top: 0; }
  .mypage-panel { padding: 18px 14px; }
  .mypage-form-grid,
  .address-form-grid,
  .mypage-password-row { grid-template-columns: 1fr; }
  .mypage-password-row .secondary-button { width: 100%; }
  .mypage-actions > button { width: 100%; }
  .order-history-filter { grid-template-columns: 1fr 76px; padding: 12px; }
  .period-buttons { grid-column: 1 / -1; }
  .period-buttons button { width: 33.333%; min-width: 0; }
  .order-history-filter label { min-width: 0; }
  .order-history-card > header { align-items: flex-start; flex-direction: column; gap: 2px; padding: 12px 14px; }
  .order-history-body { gap: 18px; padding: 14px; }
  .order-history-product { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
  .order-history-product .product-image { width: 78px; }
  .order-history-meta { grid-template-columns: 1fr 1fr; gap: 10px 14px; border-top: 1px solid var(--border); padding-top: 14px; }
  .order-history-meta > div { grid-template-columns: 64px 1fr; }
  .order-history-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .order-history-actions .primary-button,
  .order-history-actions .secondary-button { width: 100%; min-width: 0; }
  .order-history-actions > :only-child { grid-column: 1 / -1; }
  .order-status-summary { grid-template-columns: 1fr; }
  .order-status-summary > div { min-height: 54px; justify-content: space-between; border-top: 1px solid var(--border); border-left: 0; padding: 0 14px; }
  .order-status-summary > div:first-child { border-top: 0; }
  .order-detail-section { padding: 18px 14px; }
  .order-detail-section > h3 { font-size: 18px; }
  .order-detail-products article { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .order-detail-products .product-image { width: 72px; }
  .order-detail-products article > b { grid-column: 2; }
  .order-detail-info > div { grid-template-columns: 84px 1fr; gap: 10px; }
  .order-payment-layout { grid-template-columns: 1fr; gap: 20px; }
  .order-detail-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .order-detail-actions .primary-button,
  .order-detail-actions .secondary-button { width: 100%; min-width: 0; }
.order-detail-actions > :only-child { grid-column: 1 / -1; }
}

.order-modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  overflow-y: auto;
  place-items: center;
  background: rgb(0 0 0 / 48%);
  padding: 24px;
}
.order-request-modal {
  width: min(100%, 560px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 6px;
  background: var(--surface);
}
.order-request-modal > header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0 24px;
}
.order-request-modal > header h2 { margin: 0; font-size: 20px; }
.order-request-modal > header button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
}
.order-request-modal form,
.request-detail-body { padding: 24px; }
.request-product-summary { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.request-product-summary .product-image { width: 82px; aspect-ratio: 1 / 1; }
.request-product-summary > div { display: grid; gap: 4px; min-width: 0; }
.request-product-summary small,
.request-product-summary span { color: var(--text-secondary); font-size: 12px; }
.request-product-summary strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.request-form-fields { display: grid; gap: 16px; padding: 20px 0; }
.request-form-fields label,
.request-refund-fields label { display: grid; gap: 8px; }
.request-form-fields label > span,
.request-refund-fields label > span { font-size: 13px; font-weight: 700; }
.request-form-fields select,
.request-form-fields textarea,
.request-refund-fields select,
.request-refund-fields input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  padding: 10px 12px;
  color: var(--text-body);
  font: inherit;
}
.request-form-fields textarea { resize: vertical; }
.request-form-fields select:focus,
.request-form-fields textarea:focus,
.request-refund-fields select:focus,
.request-refund-fields input:focus { border-color: var(--key-color); outline: 0; }
.request-payment-summary { margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 0; }
.request-payment-summary > div { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; }
.request-payment-summary dt { color: var(--text-secondary); }
.request-payment-summary dd { margin: 0; font-weight: 700; }
.request-refund-fields { display: grid; gap: 14px; margin: 20px 0 0; border: 0; padding: 0; }
.request-refund-fields legend { margin-bottom: 12px; padding: 0; font-size: 16px; font-weight: 700; }
.request-notice { margin: 20px 0 0; border-radius: 4px; background: #fafafa; padding: 14px 16px; color: var(--text-secondary); }
.order-request-modal form > footer,
.request-detail-body > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.order-request-modal footer .primary-button,
.order-request-modal footer .secondary-button { min-width: 110px; }
.request-detail-list { margin: 20px 0 0; border-top: 1px solid var(--border); }
.request-detail-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; border-bottom: 1px solid var(--border); padding: 13px 0; }
.request-detail-list dt { color: var(--text-secondary); }
.request-detail-list dd { margin: 0; }
.seller-memo { margin-top: 20px; border: 1px solid var(--border); background: #fafafa; padding: 16px; }
.seller-memo h3 { margin: 0 0 8px; font-size: 14px; }
.seller-memo p { margin: 0; color: var(--text-secondary); line-height: 1.7; }

@media (max-width: 820px) {
  .order-status-summary.has-request-status { grid-template-columns: repeat(2, 1fr); }
  .order-status-summary.has-request-status > div:nth-child(3) { border-top: 1px solid var(--border); border-left: 0; }
  .order-status-summary.has-request-status > div:nth-child(4) { border-top: 1px solid var(--border); }
}

@media (max-width: 620px) {
  .order-modal-backdrop { align-items: end; padding: 0; }
  .order-request-modal { width: 100%; max-height: 92vh; border-radius: 6px 6px 0 0; }
  .order-request-modal > header { min-height: 56px; padding: 0 16px; }
  .order-request-modal form,
  .request-detail-body { padding: 18px 16px; }
  .request-product-summary { grid-template-columns: 68px minmax(0, 1fr); }
  .request-product-summary .product-image { width: 68px; }
  .order-request-modal form > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .order-request-modal footer .primary-button,
  .order-request-modal footer .secondary-button { width: 100%; min-width: 0; }
  .request-detail-list > div { grid-template-columns: 96px 1fr; gap: 10px; }
  .order-status-summary.has-request-status { grid-template-columns: 1fr; }
  .order-status-summary.has-request-status > div:nth-child(4) { border-left: 0; }
}

/* Terms and privacy policy */
.footer-business nav .privacy-link { color: var(--text-body); font-weight: 400; }

.policy-page {
  width: min(100%, 1000px);
  padding: 32px 24px 72px;
}
.policy-heading { padding: 18px 0 28px; border-bottom: 1px solid var(--border); }
.policy-heading > span { color: var(--key-color); font-size: 12px; font-weight: 700; }
.policy-heading h1 { margin: 6px 0 8px; font-size: 24px; }
.policy-heading p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.policy-placeholder { display: flex; gap: 16px; margin: 24px 0; padding: 16px 18px; border: 1px solid #ffd0b5; border-radius: 4px; background: var(--key-soft); }
.policy-placeholder strong { flex: 0 0 auto; color: var(--key-color); }
.policy-placeholder p { margin: 0; }
.policy-content { max-width: 860px; }
.policy-intro { margin: 0 0 32px; color: var(--text-secondary); line-height: 1.8; }
.policy-content section { padding: 22px 0; border-top: 1px solid var(--border); }
.policy-content section:first-of-type { border-top: 0; }
.policy-content h2 { margin: 0 0 10px; font-size: 16px; }
.policy-content section p { margin: 0; color: var(--text-secondary); line-height: 1.8; }

@media (max-width: 720px) {
  .policy-page { padding: 18px 14px 48px; }
  .policy-heading { padding: 10px 0 22px; }
  .policy-placeholder { align-items: flex-start; flex-direction: column; gap: 6px; margin: 18px 0; }
  .policy-intro { margin-bottom: 22px; }
  .policy-content section { padding: 18px 0; }
}

/* Member authentication */
.auth-page { display: flex; justify-content: center; padding: 48px 24px 72px; }
.auth-card { width: min(100%, 620px); border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 36px; }
.auth-card-small { width: min(100%, 480px); }
.auth-heading { margin-bottom: 30px; text-align: center; }
.auth-heading > span { color: var(--key-color); font-size: 12px; font-weight: 700; }
.auth-heading h1 { margin: 7px 0 8px; font-size: 24px; }
.auth-heading p { margin: 0; color: var(--text-secondary); }
.auth-form { display: grid; gap: 18px; }
.auth-form-long { gap: 0; }
.auth-form-section { display: grid; gap: 16px; padding: 28px 0; border-top: 1px solid var(--border); }
.auth-form-section:first-child { padding-top: 0; border-top: 0; }
.auth-section-title { display: flex; align-items: center; gap: 9px; }
.auth-section-title > span { color: var(--key-color); font-size: 12px; font-weight: 700; }
.auth-section-title h2 { margin: 0; font-size: 20px; }
.auth-section-title > b { margin-left: auto; color: var(--text-secondary); font-size: 12px; }
.auth-section-description { margin: -6px 0 0; color: var(--text-secondary); font-size: 13px; }
.auth-form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.auth-field .req-mark { color: #e0362e; margin-left: 4px; }
.auth-form-grid > .auth-field { min-width: 0; }
.address-grid { grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr); align-items: start; }
.auth-field { display: grid; gap: 8px; }
.auth-field > span:first-child { font-size: 13px; font-weight: 700; }
.auth-field > input,
.inline-field > input,
.password-field > input {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-body);
  padding: 0 12px;
}
.auth-field input:focus { border-color: var(--key-color); outline: 0; }
.inline-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.inline-field.hp-actions { grid-template-columns: minmax(0, 1fr) auto auto; }
.inline-field .secondary-button { min-width: 112px; height: 44px; }
.password-field { position: relative; display: block; }
.password-field > input { padding-right: 66px; }
.password-field > button { position: absolute; top: 0; right: 0; width: 62px; height: 44px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 700; }
.password-field > button:hover { color: var(--key-color); }
.field-message { color: var(--text-secondary); font-size: 12px; }
.field-message.is-success { color: #0f9d8c; font-weight: 700; }
.auth-checkbox { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.auth-checkbox input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--key-color); }
.auth-submit { width: 100%; min-height: 46px; }
.auth-submit:disabled { border-color: var(--border); background: #efefef; color: #a5a5a5; cursor: not-allowed; }
.auth-links { display: flex; justify-content: center; gap: 0; margin-top: 22px; color: var(--text-secondary); }
.auth-links a { padding: 0 18px; border-left: 1px solid var(--border); }
.auth-links a:first-child { border-left: 0; }
.auth-links a:hover,
.auth-bottom-copy a { color: var(--key-color); font-weight: 700; }
.auth-bottom-copy { margin: 22px 0 0; color: var(--text-secondary); text-align: center; }
.optional-section { margin: 0; padding: 24px; border: 1px solid var(--border); border-radius: 6px; background: #fafafa; }
.agreement-list { gap: 14px; }
.agreement-all { padding-bottom: 14px; border-bottom: 1px solid var(--border); font-weight: 700; }
.agreement-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.agreement-row > a { color: var(--text-secondary); font-size: 12px; text-decoration: underline; }
.auth-step[hidden] { display: none; }

/* Franchise application */
.franchise-signup-card { width: min(100%, 720px); }
.franchise-signup-heading { margin-bottom: 22px; }
.franchise-guide { margin-bottom: 28px; border: 1px solid var(--border); border-left: 3px solid var(--key-color); border-radius: 4px; background: #fafafa; padding: 18px 20px; }
.franchise-guide dl { display: grid; gap: 8px; margin: 0; }
.franchise-guide dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; }
.franchise-guide dt { color: var(--text-secondary); }
.franchise-guide dd { margin: 0; font-weight: 700; }
.franchise-guide p { margin: 14px 0 0; border-top: 1px solid var(--border); padding-top: 14px; color: var(--text-secondary); font-size: 13px; }
.business-type-field { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 8px; margin: 0; border: 0; padding: 0; }
.business-type-field legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 700; }
.business-type-field label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.business-type-field input { width: 18px; height: 18px; margin: 0; accent-color: var(--key-color); }
.optional-label { margin-left: 4px; color: var(--text-secondary); font-size: 12px; font-weight: 400; }
.address-search-field { grid-template-columns: minmax(0, 180px) auto; justify-content: start; }
#corporationNumberField[hidden] { display: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; clip-path: inset(50%) !important; }
.file-field { display: grid; gap: 8px; }
.file-field input { width: 100%; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); padding: 10px 12px; }
.file-field > span { color: var(--text-secondary); font-size: 12px; }
.agreement-row b { color: var(--key-color); font-size: 12px; }
.agreement-detail-button { border: 0; background: transparent; padding: 0; color: var(--text-secondary); cursor: pointer; font-size: 12px; text-decoration: underline; }
.franchise-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 28px; }
.franchise-form-actions .primary-button,
.franchise-form-actions .secondary-button { min-height: 48px; }
.franchise-modal-backdrop { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 48%); padding: 24px; }
.franchise-complete-modal { width: min(100%, 520px); border-radius: 6px; background: var(--surface); padding: 36px; text-align: center; }
.complete-mark { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 18px; border: 2px solid var(--key-color); border-radius: 50%; color: var(--key-color); font-size: 24px; font-weight: 700; }
.franchise-complete-modal h2 { margin: 0 0 12px; font-size: 24px; }
.franchise-complete-modal p { margin: 0; color: var(--text-secondary); line-height: 1.7; }
.franchise-modal-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 28px; }
.franchise-modal-actions .primary-button,
.franchise-modal-actions .secondary-button { min-height: 48px; }
.franchise-terms-modal-backdrop { position: fixed; z-index: 320; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 48%); padding: 24px; }
.franchise-terms-modal { display: grid; width: min(100%, 640px); max-height: min(760px, calc(100vh - 48px)); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 6px; background: var(--surface); box-shadow: 0 14px 36px rgb(0 0 0 / 18%); }
.franchise-terms-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); padding: 20px 24px; }
.franchise-terms-heading h2 { margin: 0; font-size: 20px; }
.franchise-terms-heading button { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 4px; background: var(--soft-surface); color: var(--text-secondary); font-size: 22px; cursor: pointer; }
.franchise-terms-content { overflow-y: auto; padding: 24px; }
.franchise-terms-placeholder { margin: 0 0 24px; border-left: 3px solid var(--key-color); background: var(--key-soft); padding: 13px 15px; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.franchise-terms-content section + section { margin-top: 22px; }
.franchise-terms-content h3 { margin: 0 0 8px; font-size: 16px; }
.franchise-terms-content section p { margin: 0; color: var(--text-secondary); line-height: 1.75; }
.franchise-terms-modal footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding: 16px 24px; }
.franchise-terms-modal footer button { min-width: 112px; min-height: 44px; }

@media (max-width: 720px) {
  .auth-page { padding: 18px 14px 48px; }
  .auth-card { padding: 24px 18px; }
  .auth-heading { margin-bottom: 24px; }
  .auth-form-section { padding: 24px 0; }
  .auth-form-grid { grid-template-columns: 1fr; }
  .inline-field.hp-actions { grid-template-columns: 1fr; }
  .inline-field.hp-actions .secondary-button { width: 100%; }
  .optional-section { padding: 20px; }
  .address-grid { grid-template-columns: 1fr; }
  .franchise-guide dl > div { grid-template-columns: 76px 1fr; }
  .address-search-field { grid-template-columns: minmax(0, 1fr) auto; }
  .franchise-complete-modal { padding: 30px 22px 22px; }
  .franchise-modal-actions { grid-template-columns: 1fr; }
  .franchise-terms-modal-backdrop { align-items: end; padding: 0; }
  .franchise-terms-modal { width: 100%; max-height: 86vh; border-radius: 6px 6px 0 0; }
  .franchise-terms-heading { padding: 18px 16px; }
  .franchise-terms-content { padding: 20px 16px; }
  .franchise-terms-modal footer { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .franchise-terms-modal footer button { width: 100%; }
}

@media (max-width: 390px) {
  .inline-field { grid-template-columns: 1fr; }
  .inline-field .secondary-button { width: 100%; }
  .optional-section { padding: 18px 14px; }
}

/* Fulfillment-specific cart */
.cart-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; border-bottom: 1px solid var(--border); }
.cart-tabs button { position: relative; min-height: 52px; border: 0; background: transparent; color: var(--text-secondary); font-size: 16px; font-weight: 700; cursor: pointer; }
.cart-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; content: ""; }
.cart-tabs button.is-active { color: var(--key-color); }
.cart-tabs button.is-active::after { background: var(--key-color); }
.cart-tabs button span { display: inline-grid; min-width: 24px; height: 24px; margin-left: 6px; place-items: center; border-radius: 12px; background: var(--soft-surface); color: inherit; font-size: 12px; }
.cart-fulfillment { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; }
.cart-fulfillment b { color: var(--text-body); }
.cart-fulfillment button { min-height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--key-color); font-size: 12px; font-weight: 700; cursor: pointer; }
.cart-fulfillment button:hover { border-color: var(--key-color); background: var(--key-soft); }
.fulfillment-modal-backdrop { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / 48%); }
.fulfillment-change-modal { width: min(100%, 480px); border-radius: 6px; background: var(--surface); padding: 24px; box-shadow: 0 14px 36px rgb(0 0 0 / 18%); }
.fulfillment-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fulfillment-modal-heading span { display: block; margin-bottom: 5px; color: var(--key-color); font-size: 12px; font-weight: 700; }
.fulfillment-modal-heading h2 { margin: 0; font-size: 20px; }
.fulfillment-modal-heading > button { width: 36px; height: 36px; border: 0; border-radius: 4px; background: var(--soft-surface); color: var(--text-secondary); font-size: 22px; cursor: pointer; }
.fulfillment-change-modal > p { margin: 16px 0 20px; color: var(--text-secondary); line-height: 1.6; }
.fulfillment-change-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fulfillment-change-options label { cursor: pointer; }
.fulfillment-change-options input { position: absolute; opacity: 0; pointer-events: none; }
.fulfillment-change-options span { display: grid; min-height: 82px; align-content: center; gap: 5px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 4px; }
.fulfillment-change-options input:checked + span { border-color: var(--key-color); background: var(--key-soft); color: var(--key-color); }
.fulfillment-change-options small { color: var(--text-secondary); }
.fulfillment-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.fulfillment-modal-actions button { min-height: 46px; }

@media (max-width: 720px) {
  .cart-tabs { margin-top: 18px; }
  .cart-tabs button { min-height: 48px; font-size: 14px; }
  .cart-product { padding-right: 32px; }
  .cart-fulfillment { align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
  .cart-fulfillment button { flex: 0 0 auto; }
  .fulfillment-modal-backdrop { align-items: end; padding: 0; }
  .fulfillment-change-modal { width: 100%; border-radius: 6px 6px 0 0; padding: 22px 16px 18px; }
  .fulfillment-change-options { grid-template-columns: 1fr; }
}

.quick-order-lookup { position: fixed; right: 24px; bottom: 24px; z-index: 25; display: inline-flex; min-width: 104px; min-height: 48px; align-items: center; justify-content: center; border: 1px solid var(--key-color); border-radius: 24px; background: var(--key-color); padding: 0 16px; color: #fff; font-weight: 700; box-shadow: 0 3px 12px rgb(0 0 0 / 12%); }
.quick-order-lookup:hover { color: #fff; }
.quick-order-lookup[hidden] { display: none; }
.quick-order-mobile { display: none; }
.auth-order-notice { margin: 0 0 18px; border-left: 3px solid var(--key-color); background: var(--key-soft); padding: 10px 12px; }
.auth-order-error { margin: -6px 0 0; color: var(--error); font-size: 12px; }
.auth-order-error[hidden] { display: none; }
.quick-lookup-page { max-width: 1100px; padding: 32px 24px 80px; }
.quick-lookup-heading { margin: 24px 0; }
.quick-lookup-heading h1 { margin: 0 0 6px; font-size: 24px; }
.quick-lookup-heading p { margin: 0; color: var(--text-secondary); }
.quick-lookup-search { border: 1px solid var(--border); border-radius: 6px; padding: 24px; }
.quick-lookup-search > label { display: block; margin-bottom: 10px; font-weight: 700; }
.quick-lookup-search > div { display: flex; gap: 10px; }
.quick-lookup-search input { width: min(100%, 320px); min-width: 0; height: 44px; border: 1px solid var(--border); border-radius: 4px; padding: 0 12px; font-size: 16px; }
.quick-lookup-search input:focus { border-color: var(--key-color); outline: none; }
.quick-lookup-search button { flex: 0 0 84px; }
.quick-lookup-member { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; border: 1px solid var(--border); border-radius: 6px; padding: 18px 20px; }
.quick-lookup-member span { color: var(--text-secondary); }
.quick-lookup-member strong { margin-left: 8px; color: var(--text-body); }
.quick-lookup-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; border-bottom: 1px solid var(--border); }
.quick-lookup-tabs button { min-height: 48px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; }
.quick-lookup-tabs button.is-active { border-bottom-color: var(--key-color); color: var(--key-color); font-weight: 700; }
.quick-lookup-tabs b { margin-left: 4px; }
.quick-lookup-list { display: grid; gap: 16px; margin-top: 20px; }
.quick-lookup-empty { margin: 0; border: 1px solid var(--border); padding: 32px 16px; color: var(--text-secondary); text-align: center; }
.quick-order-card { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.quick-order-card > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; border-bottom: 1px solid var(--border); padding: 14px 20px; }
.quick-order-card > header span { color: var(--text-secondary); }
.quick-order-card-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 18px 24px; padding: 20px; }
.quick-order-items { min-width: 0; }
.quick-order-items > span + span { margin-left: 8px; color: var(--text-secondary); }
.quick-order-items ul { display: grid; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.quick-order-items li { display: flex; flex-wrap: wrap; gap: 4px 8px; font-weight: 700; }
.quick-order-items li span { color: var(--text-secondary); font-weight: 400; }
.quick-order-facts { display: grid; gap: 8px; margin: 0; }
.quick-order-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quick-order-facts dt { color: var(--text-secondary); }
.quick-order-facts dd { margin: 0; text-align: right; }
.quick-order-facts dd > strong { font-size: 16px; }
.quick-order-actions { display: flex; justify-content: flex-end; gap: 8px; grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 16px; }
.quick-order-actions button { min-width: 108px; min-height: 40px; }

body.is-unavailable { padding-bottom: 0; background: var(--soft-surface); }
body.is-unavailable .utility-bar,
body.is-unavailable .main-header,
body.is-unavailable .category-drawer,
body.is-unavailable .drawer-backdrop,
body.is-unavailable .site-footer,
body.is-unavailable .quick-order-lookup { display: none; }
.unavailable-page { min-height: 100vh; padding-bottom: 80px; }
.unavailable-topbar { border-bottom: 1px solid var(--border); background: var(--surface); }
.unavailable-topbar-inner { display: flex; width: min(100% - 48px, 920px); min-height: 72px; align-items: center; gap: 14px; margin: 0 auto; }
.unavailable-brand-mark { color: var(--key-color); font-size: 16px; font-weight: 700; }
.unavailable-brand { border-left: 1px solid var(--border); padding-left: 14px; font-size: 16px; }
.unavailable-content { display: grid; width: min(100% - 48px, 920px); gap: 20px; margin: 48px auto 0; }
.unavailable-notice { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.unavailable-notice { border-top: 3px solid var(--key-color); padding: 32px 36px 36px; }
.unavailable-eyebrow { color: var(--key-color); font-size: 12px; font-weight: 700; }
.unavailable-notice h1 { margin: 12px 0 8px; font-size: 24px; }
.unavailable-notice p { margin: 0; color: var(--text-secondary); }
.unavailable-lookup { border: 1px solid var(--border); border-radius: 6px; padding: 32px 36px 36px; background: var(--surface); }
.unavailable-lookup .quick-lookup-heading { margin: 0 0 20px; }
.unavailable-lookup .quick-lookup-heading h2 { margin: 0 0 6px; font-size: 24px; }
.unavailable-lookup .quick-lookup-search { background: var(--surface); }
.unavailable-lookup .quick-lookup-member { margin-top: 24px; }

@media (max-width: 720px) {
  body { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .detail-actions { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .quick-order-lookup { right: 0; bottom: 0; left: 0; width: 100%; min-height: calc(40px + env(safe-area-inset-bottom, 0px)); border-radius: 0; padding: 0 12px env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 8px rgb(0 0 0 / 8%); }
  .quick-order-desktop { display: none; }
  .quick-order-mobile { display: inline; }
  .quick-lookup-page { padding: 18px 14px 56px; }
  .quick-lookup-heading { margin: 18px 0; }
  .quick-lookup-heading h1 { font-size: 20px; }
  .quick-lookup-search { padding: 18px 14px; }
  .quick-lookup-member { padding: 14px; }
  .quick-order-card > header { padding: 12px 14px; }
  .quick-order-card-body { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .quick-order-facts { border-top: 1px solid var(--border); padding-top: 14px; }
  .quick-order-actions { grid-column: auto; justify-content: stretch; }
  .quick-order-actions button { flex: 1; min-width: 0; }
  .unavailable-page { padding-bottom: 48px; }
  .unavailable-topbar-inner { width: calc(100% - 32px); min-height: 60px; }
  .unavailable-content { width: calc(100% - 32px); gap: 14px; margin-top: 20px; }
  .unavailable-notice { padding: 24px 20px 28px; }
  .unavailable-notice h1 { font-size: 20px; }
  .unavailable-lookup { padding: 24px 16px; }
  .unavailable-lookup .quick-lookup-heading h2 { font-size: 20px; }
}