@charset "utf-8";
/* ==========================================================================
   foodmall — 디자인 시스템 (단일 CSS)
   신선식품 이커머스 / 모바일 우선 / 외부 리소스 0건 / 라이트 톤 고정
   작성: 2026-07-29
   구성
     1. 디자인 토큰(CSS 변수)
     2. 리셋 & 기본 타이포
     3. 레이아웃(컨테이너/섹션)
     4. 헤더 · 검색 · 카테고리 네비 · 하단 탭바
     5. 버튼 / 배지 / 칩
     6. 카테고리 그리드 · 히어로
     7. 상품카드 & 그리드 · 썸네일 placeholder
     8. 필터바 · 정렬 · 페이지네이션 · 브레드크럼
     9. 상품상세
    10. 장바구니
    11. 폼 / 주문서 / 무통장 안내
    12. 주문완료
    13. 알림 · 빈 상태 · 유틸
    14. 푸터
    15. 반응형(768px / 1024px / 1200px)
   ========================================================================== */

/* ---------------------------------------------------------------
   1. 디자인 토큰
   --------------------------------------------------------------- */
:root {
  color-scheme: light;   /* 브라우저 강제 다크 변환 차단 */
  /* 브랜드 — 깊은 신선 그린 */
  --c-brand:        #067a3e;
  --c-brand-dark:   #045c2e;
  --c-brand-mid:    #0a9a51;
  --c-brand-soft:   #e7f5ec;
  --c-brand-line:   #bfe3cd;

  /* 강조 — 가격/할인(잘 익은 토마토) */
  --c-accent:       #e8442a;
  --c-accent-soft:  #fdeeeb;

  /* 중립 */
  --c-ink:          #17201b;   /* 본문 */
  --c-ink-2:        #4b5750;   /* 보조 텍스트 */
  --c-ink-3:        #7c8a83;   /* 흐린 텍스트 */
  --c-line:         #e4e8e6;   /* 경계선 */
  --c-line-2:       #f0f3f1;   /* 옅은 경계선 */
  --c-bg:           #ffffff;   /* 기본 배경 */
  --c-bg-soft:      #f7f9f8;   /* 페이지 배경 */
  --c-bg-mute:      #eef2f0;   /* 썸네일 바탕 */

  /* 보관방법 배지 */
  --c-frozen:       #1d5fd6;   /* 냉동 = 파랑 */
  --c-frozen-bg:    #e8f0fe;
  --c-chilled:      #12894a;   /* 냉장 = 초록 */
  --c-chilled-bg:   #e6f6ec;
  --c-room:         #5c6a63;   /* 실온 = 회색 */
  --c-room-bg:      #eef1ef;

  /* 상태 */
  --c-warn:         #b26a00;
  --c-warn-bg:      #fff5e5;
  --c-info-bg:      #eef4ff;
  --c-danger:       #c0392b;

  /* 타이포 — 시스템 폰트만(외부 로딩 금지) */
  --font-base: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
  --font-num:  "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;

  /* 간격 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 56px;

  /* 모양 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20, 35, 27, .06);
  --shadow-2: 0 2px 10px rgba(20, 35, 27, .08);
  --shadow-3: 0 8px 24px rgba(20, 35, 27, .12);

  --w-page: 1200px;   /* 데스크톱 최대폭 */
  --h-header: 56px;
  --h-tabbar: 56px;
}

/* ---------------------------------------------------------------
   2. 리셋 & 기본
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg-soft);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 하단 고정 탭바/구매바에 가리지 않도록 */
body { padding-bottom: calc(var(--h-tabbar) + env(safe-area-inset-bottom, 0px)); }
/* 하단 고정 구매바·결제바가 있는 페이지는 여백을 더 준다.
   바 실측 높이 = 상하 패딩 8+8 + 버튼 42 + 위쪽 테두리 1 = 59px → 60px 확보.
   (푸터의 전자상거래법 표기가 바에 가리지 않게 하는 값이므로 줄이지 말 것) */
body.has-sticky { padding-bottom: calc(var(--h-tabbar) + 60px + env(safe-area-inset-bottom, 0px)); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.35; }
p { margin: 0 0 var(--sp-3); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-brand); }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-5) 0; }

:focus-visible { outline: 2px solid var(--c-brand-mid); outline-offset: 2px; }

/* 숫자(가격·수량) 정렬 안정 */
.num, .p-price, .price-now, .sum-total b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* 스크린리더 전용 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   3. 레이아웃
   --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.page { padding: var(--sp-4) 0 var(--sp-10); }

.section { margin: 0 0 var(--sp-8); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.section-title { font-size: var(--fs-xl); letter-spacing: -.02em; }
.section-title small {
  display: block; margin-top: 2px;
  font-size: var(--fs-md); font-weight: 400; color: var(--c-ink-3);
}
.section-more { font-size: var(--fs-md); color: var(--c-ink-2); white-space: nowrap; }
.section-more::after { content: " ›"; }

/* 흰 카드 패널 */
.panel {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.panel + .panel { margin-top: var(--sp-4); }
.panel-title {
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}

/* 2단 레이아웃(주문/장바구니: 본문 + 요약) */
.layout-2col { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; }

/* ---------------------------------------------------------------
   4. 헤더 / 검색 / 카테고리 네비 / 탭바
   --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--h-header);
}
.logo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.03em;
  color: var(--c-brand); white-space: nowrap;
}
.logo:hover { color: var(--c-brand-dark); }
.logo-mark {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--c-brand); color: #fff; font-size: var(--fs-md); font-weight: 800;
}

.search-form { flex: 1 1 auto; min-width: 0; position: relative; display: flex; }
.search-input {
  width: 100%; height: 38px;
  padding: 0 40px 0 var(--sp-4);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
}
.search-input::placeholder { color: var(--c-ink-3); }
.search-input:focus { background: #fff; border-color: var(--c-brand-line); outline: none; box-shadow: 0 0 0 3px var(--c-brand-soft); }
.search-btn {
  position: absolute; right: 4px; top: 4px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--c-brand); color: #fff;
  cursor: pointer;
}

.header-actions { display: flex; align-items: center; gap: var(--sp-1); }
.icon-btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--c-ink-2);
  cursor: pointer; font-size: var(--fs-sm); line-height: 1;
}
.icon-btn:hover { background: var(--c-bg-soft); color: var(--c-brand); }
.cart-count {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--c-accent);
  border-radius: var(--r-pill);
}

/* 카테고리 가로 네비 */
.gnb { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.gnb-list {
  display: flex; gap: var(--sp-1);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gnb-list::-webkit-scrollbar { display: none; }
.gnb-item {
  flex: 0 0 auto;
  display: block; padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.gnb-item:hover { color: var(--c-brand); }
.gnb-item.is-active { color: var(--c-brand); border-bottom-color: var(--c-brand); }

/* 모바일 하단 탭바 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex;
  height: calc(var(--h-tabbar) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--c-line);
}
.tabbar-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: var(--fs-xs); color: var(--c-ink-3);
}
.tabbar-item i { font-style: normal; font-size: var(--fs-lg); line-height: 1; }
.tabbar-item.is-active { color: var(--c-brand); font-weight: 700; }

/* ---------------------------------------------------------------
   5. 버튼 / 배지 / 칩
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 var(--sp-5);
  font-size: var(--fs-base); font-weight: 700; line-height: 1;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.btn-primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.btn-primary:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: #fff; }
.btn-outline { background: #fff; border-color: var(--c-brand); color: var(--c-brand); }
.btn-outline:hover { background: var(--c-brand-soft); color: var(--c-brand-dark); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--c-ink-2); }
.btn-ghost:hover { background: var(--c-bg-soft); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-lg { min-height: 52px; font-size: var(--fs-lg); }
.btn[disabled], .btn.is-disabled {
  background: var(--c-bg-mute); border-color: var(--c-line); color: var(--c-ink-3);
  cursor: not-allowed; pointer-events: none;
}
.btn-row { display: flex; gap: var(--sp-2); }
.btn-row > .btn { flex: 1 1 0; }

/* 배지 공통 */
.badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1;
  border-radius: var(--r-sm);
  background: var(--c-bg-mute); color: var(--c-ink-2);
  white-space: nowrap;
}
/* 보관방법 */
.badge-frozen  { background: var(--c-frozen-bg);  color: var(--c-frozen); }
.badge-chilled { background: var(--c-chilled-bg); color: var(--c-chilled); }
.badge-room    { background: var(--c-room-bg);    color: var(--c-room); }
/* 상태 */
.badge-soldout { background: #f1f2f2; color: #8b9691; }
.badge-hot     { background: var(--c-accent-soft); color: var(--c-accent); }
.badge-new     { background: var(--c-brand-soft);  color: var(--c-brand); }
.badge-free    { background: var(--c-info-bg);     color: #2a5bd7; }

/* 원산지 등 미세 텍스트 라벨 */
.tag-origin {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); color: var(--c-ink-3);
}
.tag-origin::before { content: "원산지"; font-weight: 700; color: var(--c-ink-2); }

/* 필터 칩 */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 var(--sp-3);
  font-size: var(--fs-md); font-weight: 600;
  color: var(--c-ink-2); background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--c-brand-line); color: var(--c-brand); }
.chip.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

/* ---------------------------------------------------------------
   6. 히어로 / 카테고리 그리드
   --------------------------------------------------------------- */
.hero {
  margin: var(--sp-4) 0 var(--sp-6);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 92% 8%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-mid) 100%);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.hero-eyebrow {
  display: inline-block; margin-bottom: var(--sp-2);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
  background: rgba(255,255,255,.2);
}
.hero h2 { font-size: var(--fs-2xl); letter-spacing: -.03em; margin-bottom: var(--sp-2); }
.hero p { margin: 0; font-size: var(--fs-md); color: rgba(255,255,255,.9); }
.hero-actions { margin-top: var(--sp-5); display: flex; gap: var(--sp-2); }
.hero .btn-outline { background: #fff; border-color: #fff; color: var(--c-brand-dark); }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-3) var(--sp-1);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-align: center;
}
.cat-item:hover { border-color: var(--c-brand-line); background: var(--c-brand-soft); color: var(--c-brand-dark); }
.cat-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-brand-soft); font-size: var(--fs-xl); line-height: 1;
}
.cat-name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.cat-count { font-size: 10px; color: var(--c-ink-3); }

/* ---------------------------------------------------------------
   7. 상품카드 / 그리드
   --------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.product-card:hover { box-shadow: var(--shadow-2); border-color: var(--c-brand-line); }
.product-card > a { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; }
.product-card > a:hover { color: inherit; }

/* 썸네일 + placeholder */
.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-bg-mute);
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 이미지 로딩 실패 시: img 에 onerror 로 is-broken 부여 */
.thumb.is-broken::after,
.thumb-ph::after {
  content: "이미지 준비중";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 600; color: #a8b3ad;
  background:
    repeating-linear-gradient(45deg, #eef2f0 0 10px, #e7ecea 10px 20px);
}
.thumb.is-broken img { display: none; }
.thumb-ph { position: relative; aspect-ratio: 1 / 1; background: var(--c-bg-mute); }

/* 썸네일 위 배지 */
.thumb-badges {
  position: absolute; left: 6px; top: 6px; z-index: 4;  /* 품절 오버레이(3)보다 위 */
  display: flex; flex-wrap: wrap; gap: 4px;
}
.thumb-badges .badge { box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* 품절 오버레이 */
.thumb-soldout::before {
  content: "일시품절";
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  font-size: var(--fs-md); font-weight: 700; color: #fff;
  background: rgba(23,32,27,.5);
}

.p-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.p-cat { font-size: var(--fs-xs); color: var(--c-ink-3); }
.p-name {
  font-size: var(--fs-md); font-weight: 600; line-height: 1.4; color: var(--c-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em;
}
.p-desc {
  font-size: var(--fs-sm); color: var(--c-ink-3);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.p-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.p-price { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.p-price .won { font-size: var(--fs-md); font-weight: 700; margin-left: 1px; }
.p-ship { font-size: var(--fs-xs); color: var(--c-ink-3); }
.p-ship.is-free { color: #2a5bd7; font-weight: 700; }

/* 가로형 카드(장바구니/주문서 요약용) */
.p-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.p-row .thumb { flex: 0 0 72px; width: 72px; border-radius: var(--r-sm); }
.p-row-body { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------
   8. 필터바 / 정렬 / 페이지네이션 / 브레드크럼
   --------------------------------------------------------------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-ink-3);
}
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: var(--c-line); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb [aria-current="page"] { color: var(--c-ink-2); font-weight: 600; }

.list-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin: 0 0 var(--sp-3);
}
.list-head h1 { font-size: var(--fs-2xl); letter-spacing: -.03em; }
.list-count { font-size: var(--fs-md); color: var(--c-ink-3); }
.list-count b { color: var(--c-brand); }

.filter-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-4);
  background: transparent;
}
.filter-chips {
  display: flex; gap: 6px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-chips::-webkit-scrollbar { display: none; }
.sort-select {
  flex: 0 0 auto;
  height: 32px; padding: 0 26px 0 var(--sp-3);
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink-2);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237c8a83' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  -webkit-appearance: none; appearance: none;
}

.pagination {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  margin: var(--sp-8) 0 0;
  flex-wrap: wrap;
}
.page-link {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink-2);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.page-link:hover { border-color: var(--c-brand-line); color: var(--c-brand); }
.page-link.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.page-link.is-disabled { color: #c3ccc7; pointer-events: none; }
.page-dots { padding: 0 4px; color: var(--c-ink-3); }

/* ---------------------------------------------------------------
   9. 상품상세
   --------------------------------------------------------------- */
.detail { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }

.detail-media { min-width: 0; }
.detail-main-img {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--c-bg-mute);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden;
}
.detail-main-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.detail-thumbs::-webkit-scrollbar { display: none; }
.detail-thumbs li { flex: 0 0 64px; }
.detail-thumbs .thumb { border-radius: var(--r-sm); border: 1px solid var(--c-line); }
.detail-thumbs .is-active .thumb { border-color: var(--c-brand); box-shadow: 0 0 0 2px var(--c-brand-soft); }

.detail-info { min-width: 0; }
.detail-info h1 { font-size: var(--fs-2xl); letter-spacing: -.03em; margin: 6px 0 var(--sp-2); }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.detail-sub { font-size: var(--fs-md); color: var(--c-ink-2); margin-bottom: var(--sp-4); }

.price-row {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.price-now { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; }
.price-now .won { font-size: var(--fs-xl); }
.price-vat { font-size: var(--fs-sm); color: var(--c-ink-3); }

/* 스펙 표 */
.spec-table { margin: var(--sp-4) 0; font-size: var(--fs-md); }
.spec-table th, .spec-table td {
  padding: var(--sp-2) 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--c-line-2);
}
.spec-table th { width: 84px; color: var(--c-ink-3); font-weight: 600; white-space: nowrap; }
.spec-table td { color: var(--c-ink); }

/* 수량 스테퍼 */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.qty-btn {
  width: 34px; height: 34px; border: 0; background: #fff;
  font-size: var(--fs-lg); line-height: 1; color: var(--c-ink-2); cursor: pointer;
}
.qty-btn:hover { background: var(--c-bg-soft); color: var(--c-brand); }
.qty-input {
  width: 44px; height: 34px; border: 0; border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line);
  text-align: center; font-size: var(--fs-base); font-weight: 700;
  font-family: var(--font-num);
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-box {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.buy-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.buy-line + .buy-line { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--c-line); }
.buy-total { font-size: var(--fs-xl); font-weight: 800; }
.buy-total .won { font-size: var(--fs-base); }
.detail-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.detail-actions .btn { flex: 1 1 0; }

/* 모바일 하단 고정 구매바 */
.sticky-buy {
  position: fixed; left: 0; right: 0; z-index: 55;
  bottom: calc(var(--h-tabbar) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--c-line);
}
.sticky-buy .btn { flex: 1 1 0; }

/* 상세설명 본문 */
.detail-desc { margin-top: var(--sp-6); }
.desc-body { font-size: var(--fs-base); color: var(--c-ink-2); line-height: 1.75; }
.desc-body img { margin: var(--sp-3) auto; border-radius: var(--r-sm); }
.desc-body h3 { font-size: var(--fs-lg); color: var(--c-ink); margin: var(--sp-5) 0 var(--sp-2); }
.desc-body ul { list-style: disc; padding-left: 1.2em; margin: 0 0 var(--sp-3); }
.desc-body li { margin-bottom: 4px; }

/* 배송/보관 안내 표 */
.info-table { font-size: var(--fs-md); border-top: 1px solid var(--c-line); }
.info-table th, .info-table td { padding: var(--sp-3); border-bottom: 1px solid var(--c-line-2); text-align: left; vertical-align: top; }
.info-table th { width: 96px; background: var(--c-bg-soft); color: var(--c-ink-2); font-weight: 600; white-space: nowrap; }

/* 넓은 표는 가로 스크롤 컨테이너로 감싼다 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------
   10. 장바구니
   --------------------------------------------------------------- */
.cart-list { border-top: 2px solid var(--c-ink); }
.cart-item {
  display: grid;
  grid-template-columns: 20px 72px 1fr;
  grid-template-areas:
    "chk thumb info"
    "chk ctrl  ctrl";
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.cart-item > .cart-chk { grid-area: chk; margin-top: 4px; }
.cart-item > .thumb { grid-area: thumb; width: 72px; border-radius: var(--r-sm); }
.cart-item > .cart-info { grid-area: info; min-width: 0; }
.cart-item > .cart-ctrl { grid-area: ctrl; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cart-name { font-size: var(--fs-md); font-weight: 600; line-height: 1.4; }
.cart-opt { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: 2px; }
.cart-price { font-size: var(--fs-lg); font-weight: 800; }
.cart-price .won { font-size: var(--fs-md); }
.cart-del {
  border: 0; background: none; color: var(--c-ink-3);
  font-size: var(--fs-sm); cursor: pointer; padding: 4px;
}
.cart-del:hover { color: var(--c-danger); text-decoration: underline; }

.cart-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) 0;
}
.cart-toolbar label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); font-weight: 600; }

/* 금액 요약 */
.summary { position: static; }
.sum-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-2) 0;
  font-size: var(--fs-md); color: var(--c-ink-2);
}
.sum-row b { color: var(--c-ink); font-weight: 700; }
.sum-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-md); font-weight: 700;
}
.sum-total b { font-size: var(--fs-2xl); font-weight: 800; color: var(--c-accent); letter-spacing: -.02em; }
.sum-total b .won { font-size: var(--fs-lg); }
.sum-note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* ---------------------------------------------------------------
   11. 폼 / 주문서 / 무통장 안내
   --------------------------------------------------------------- */
.steps { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.steps li {
  flex: 1 1 0; text-align: center;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-3);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-line);
}
.steps li.is-active { color: var(--c-brand); border-bottom-color: var(--c-brand); }
.steps li.is-done { color: var(--c-ink-2); border-bottom-color: var(--c-brand-line); }

.form-row { margin-bottom: var(--sp-4); }
.form-row:last-child { margin-bottom: 0; }
.label {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-md); font-weight: 700; color: var(--c-ink);
}
.label .req { color: var(--c-accent); margin-left: 2px; }
.input, .textarea, .select {
  width: 100%; min-height: 42px; padding: 10px var(--sp-3);
  font-family: inherit; font-size: var(--fs-base); color: var(--c-ink);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.input::placeholder, .textarea::placeholder { color: #a8b3ad; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--c-brand-mid); box-shadow: 0 0 0 3px var(--c-brand-soft);
}
.textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237c8a83' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 30px;
}
.input-group { display: flex; gap: var(--sp-2); }
.input-group .input { flex: 1 1 auto; }
.input-group .btn { flex: 0 0 auto; }
.help { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }
.help.is-error { color: var(--c-danger); }

.check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-md); color: var(--c-ink-2); cursor: pointer;
}
.check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--c-brand); }
.check + .check { margin-top: var(--sp-2); }
.check a { text-decoration: underline; color: var(--c-ink-2); }

/* 결제수단 선택(1차는 무통장만) */
.pay-option {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 2px solid var(--c-brand); border-radius: var(--r-md);
  background: var(--c-brand-soft);
}
.pay-option input { margin-top: 3px; accent-color: var(--c-brand); }
.pay-option strong { display: block; font-size: var(--fs-base); }
.pay-option span { font-size: var(--fs-sm); color: var(--c-ink-2); }
.pay-option.is-off { border: 1px solid var(--c-line); background: var(--c-bg-soft); color: var(--c-ink-3); }
.pay-option.is-off strong { color: var(--c-ink-3); }

/* 무통장 입금 안내 박스 */
.bank-box {
  margin-top: var(--sp-3); padding: var(--sp-4);
  background: #fff; border: 1px dashed var(--c-brand-line); border-radius: var(--r-md);
}
.bank-row { display: flex; gap: var(--sp-3); font-size: var(--fs-md); padding: 4px 0; }
.bank-row dt { flex: 0 0 68px; color: var(--c-ink-3); font-weight: 600; }
.bank-row dd { margin: 0; font-weight: 700; }
.bank-amount { color: var(--c-accent); font-size: var(--fs-lg); }
.bank-guide { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.7; }
.bank-guide li { position: relative; padding-left: 12px; }
.bank-guide li::before { content: "·"; position: absolute; left: 3px; font-weight: 700; }

/* 하단 고정 결제바(모바일)
   금액과 버튼을 **한 줄**로 배치한다. 세로로 쌓이면 바 높이가 118px 까지 커져
   body.has-sticky 의 하단 여백(58px)을 넘어서고, 푸터의 법정 표기(전자상거래법 제10조)가
   영구히 가려진다. → display:flex 로 1줄 고정. */
.sticky-pay {
  position: fixed; left: 0; right: 0; z-index: 55;
  bottom: calc(var(--h-tabbar) + env(safe-area-inset-bottom, 0px));
  padding: var(--sp-2) var(--sp-4);
  background: rgba(255,255,255,.97); border-top: 1px solid var(--c-line);
  display: flex; align-items: center; gap: 8px;
}
/* 바 안의 합계는 요약 패널용 여백/구분선을 쓰지 않는다 (높이 증가 방지) */
.sticky-pay .sum-total { margin: 0; padding: 0; border: 0; flex: 0 0 auto; }
.sticky-pay .sum-total b { font-size: var(--fs-lg); }
.sticky-pay .btn, .sticky-pay .btn-block { width: auto; flex: 1 1 auto; }

/* ---------------------------------------------------------------
   12. 주문완료
   --------------------------------------------------------------- */
.done-hero {
  text-align: center; padding: var(--sp-10) var(--sp-4) var(--sp-8);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.done-icon {
  width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--c-brand-soft); color: var(--c-brand);
  font-size: 30px; line-height: 1;
}
.done-hero h1 { font-size: var(--fs-2xl); letter-spacing: -.03em; margin-bottom: var(--sp-2); }
.done-hero p { color: var(--c-ink-2); font-size: var(--fs-md); }
.order-no {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-family: var(--font-num); font-size: var(--fs-lg); font-weight: 800; letter-spacing: .02em;
}
.order-no span { font-family: var(--font-base); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-3); letter-spacing: 0; }

/* ---------------------------------------------------------------
   13. 알림 / 빈 상태 / 유틸
   --------------------------------------------------------------- */
.notice {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md); line-height: 1.6;
  border-radius: var(--r-md);
  background: var(--c-info-bg); color: #2a4f9e;
}
.notice-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.notice-brand { background: var(--c-brand-soft); color: var(--c-brand-dark); }
.notice strong { font-weight: 700; }

.topbar-notice {
  background: var(--c-brand-dark); color: #fff;
  font-size: var(--fs-sm); text-align: center; padding: 6px var(--sp-4);
}

.empty {
  padding: var(--sp-12) var(--sp-4); text-align: center;
  color: var(--c-ink-3);
}
.empty-icon { font-size: 34px; margin-bottom: var(--sp-3); }
.empty p { margin-bottom: var(--sp-4); font-size: var(--fs-md); }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mt-6 { margin-top: var(--sp-6) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.text-c { text-align: center !important; }
.text-r { text-align: right !important; }
.text-mute { color: var(--c-ink-3) !important; }
.text-accent { color: var(--c-accent) !important; }
.text-brand { color: var(--c-brand) !important; }
.fw-b { font-weight: 700 !important; }
.hide { display: none !important; }

/* ---------------------------------------------------------------
   14. 푸터
   --------------------------------------------------------------- */
.site-footer {
  margin-top: var(--sp-10);
  padding: var(--sp-6) 0 var(--sp-8);
  background: #fff;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm); color: var(--c-ink-3);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer-nav a { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink-2); }
.footer-legal { line-height: 1.9; }
.footer-legal b { color: var(--c-ink-2); }
.footer-legal span { display: inline-block; margin-right: var(--sp-3); white-space: nowrap; }
.footer-copy { margin-top: var(--sp-4); color: #a8b3ad; }

/* ---------------------------------------------------------------
   15. 반응형
   --------------------------------------------------------------- */

/* 작은 폰(360px 이하) — 여백만 살짝 줄인다 */
@media (max-width: 359px) {
  .container { padding: 0 var(--sp-3); }
  .cat-grid { gap: 6px; }
  .product-grid { gap: var(--sp-2); }
  .p-name { font-size: var(--fs-sm); }
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  :root { --h-header: 64px; }

  body, body.has-sticky { padding-bottom: 0; }   /* 탭바 숨김 → 하단 여백 불필요 */
  .tabbar { display: none; }
  .sticky-buy, .sticky-pay { display: none; }  /* 데스크톱은 인라인 버튼 사용 */

  .container { padding: 0 var(--sp-5); }
  .page { padding: var(--sp-6) 0 var(--sp-12); }

  .section-title { font-size: var(--fs-2xl); }
  .hero { padding: var(--sp-10) var(--sp-8); }
  .hero h2 { font-size: var(--fs-3xl); }

  .cat-grid { grid-template-columns: repeat(7, 1fr); gap: var(--sp-3); }
  .cat-icon { width: 48px; height: 48px; font-size: var(--fs-2xl); }
  .cat-name { font-size: var(--fs-md); }

  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .p-name { font-size: var(--fs-base); }
  .p-price { font-size: var(--fs-xl); }

  .layout-2col { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); }
  .summary { position: sticky; top: calc(var(--h-header) + var(--sp-4)); }

  .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
  .detail-info h1 { font-size: var(--fs-3xl); }

  .cart-item {
    grid-template-columns: 20px 96px 1fr auto;
    grid-template-areas: "chk thumb info ctrl";
    align-items: center;
    gap: var(--sp-4);
  }
  .cart-item > .thumb { width: 96px; }
  .cart-item > .cart-ctrl { justify-content: flex-end; gap: var(--sp-5); }

  .spec-table th { width: 100px; }
  .steps li { font-size: var(--fs-md); }
  .footer-legal { font-size: var(--fs-md); }
}

/* 데스크톱 */
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .layout-2col { grid-template-columns: minmax(0, 1fr) 340px; }
  .header-inner { gap: var(--sp-5); }
  .search-form { max-width: 520px; margin: 0 auto; }
}

/* 최대폭(1200px) 이상 — 중앙 정렬 유지 */
@media (min-width: 1200px) {
  .container { padding: 0 var(--sp-6); }
}

/* 인쇄(주문서 출력 대비) */
@media print {
  .site-header, .gnb, .tabbar, .sticky-buy, .sticky-pay, .site-footer,
  .btn, .filter-bar, .pagination { display: none !important; }
  body { background: #fff; padding: 0; }
  .panel { border: 1px solid #ccc; box-shadow: none; }
}

/* 모션 최소화 선호 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------
   16. 추가 — 상세 썸네일 클릭 버튼
   detail.php 의 <button class="fm-thumb-btn"><span class="thumb"><img></span></button>
   투명 버튼. 안쪽 .thumb 가 기존 썸네일 스타일(1:1 박스 · is-broken placeholder)을 그대로 받는다.
   --------------------------------------------------------------- */
.fm-thumb-btn { border: 0; background: none; padding: 0; cursor: pointer; display: block; width: 100%; }
.fm-thumb-btn .thumb { display: block; }
.fm-thumb-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* 동의 체크박스 안의 수집항목·목적·보유기간 요약 (order.php) — span 이라 블록화가 필요 */
.check .help { display: block; margin-top: 4px; }

/* 상세페이지 공통 안내 배너 (배송·반품·취소) — 상세정보 맨 앞 고정 */
.detail-notice-banner{margin:0 0 16px;border-radius:var(--radius,10px);overflow:hidden;background:#f4f6f8}
.detail-notice-banner img{display:block;width:100%;height:auto}

/* 히어로 일러스트 — 우측 상단 고정. 문구·버튼과 겹치지 않게 폭을 제한한다. */
.hero{position:relative;overflow:hidden}
.hero-copy{position:relative;z-index:1;max-width:calc(100% - 92px)}
.hero-art{
  position:absolute;top:12px;right:12px;width:84px;z-index:0;
  pointer-events:none;opacity:.95;
}
.hero-art svg{display:block;width:100%;height:auto}
@media (min-width:480px){
  .hero-art{width:108px;top:14px;right:16px}
  .hero-copy{max-width:calc(100% - 124px)}
}
@media (min-width:768px){
  .hero{display:flex;align-items:center;gap:24px}
  .hero-copy{max-width:none;flex:1 1 auto}
  .hero-art{position:static;width:180px;flex:0 0 auto;margin-left:auto;opacity:1}
}

/* ---------------------------------------------------------------
   17. 추가 — 소셜 로그인 (login.php / 헤더 로그아웃)
   브랜드 가이드 색상 고정값이라 CSS 변수를 쓰지 않는다.
   카카오 = #FEE500 배경 + 검정(85%) 글씨 / 네이버 = #03C75A 배경 + 흰 글씨
   --------------------------------------------------------------- */
.btn-kakao {
  background: #FEE500; border-color: #FEE500; color: rgba(0,0,0,.85);
}
.btn-kakao:hover { background: #F2DA00; border-color: #F2DA00; color: rgba(0,0,0,.85); }
.btn-naver {
  background: #03C75A; border-color: #03C75A; color: #fff;
}
.btn-naver:hover { background: #02B351; border-color: #02B351; color: #fff; }

/* 헤더의 로그아웃 버튼은 POST(CSRF) 라 form 으로 감싼다 — 아이콘 정렬 유지 */
.logout-form { display: flex; margin: 0; }

/* 헤더 회원 표시 — 이름을 눌러 마이페이지로 (로그아웃은 마이페이지 안에) */
.member-chip{display:inline-flex;align-items:center;gap:5px;max-width:9.5rem;
  padding:5px 10px 5px 8px;border-radius:999px;background:#eaf5ee;color:#14603a;
  font-size:.82rem;font-weight:700;text-decoration:none;line-height:1;white-space:nowrap}
.member-chip:hover{background:#dcefe3}
.member-chip-ico{font-size:.95rem}
.member-chip-name{overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){
  .member-chip{max-width:6.5rem;padding:5px 8px;font-size:.76rem}
}

/* 주소 검색 버튼 — 우편번호 칸 옆 */
.btn-addr-search{flex:0 0 auto;white-space:nowrap;padding:0 14px;height:44px;
  border-radius:8px;background:#eaf5ee;color:#14603a;border:1px solid #cfe3d6;
  font-weight:700;font-size:.9rem;cursor:pointer}
.btn-addr-search:hover{background:#dcefe3}
.input-group{display:flex;gap:8px;align-items:stretch}
.input-group .input{flex:1 1 auto;min-width:0}

/* 주소 검색 레이어 — 팝업 차단 회피를 위해 화면 안에 띄운다 */
.addr-layer{position:fixed;inset:0;z-index:1000;background:rgba(15,30,22,.55);
  display:flex;align-items:center;justify-content:center;padding:12px}
.addr-layer[hidden]{display:none}
.addr-layer-inner{background:#fff;border-radius:12px;width:100%;max-width:520px;
  height:min(560px,86vh);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.28)}
.addr-layer-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid #e6ece8;font-size:1rem}
.addr-layer-close{border:0;background:none;font-size:1.2rem;line-height:1;
  cursor:pointer;color:#5c6a63;padding:4px 6px}
.addr-layer-box{flex:1 1 auto;min-height:0}
.addr-layer-box iframe{width:100%;height:100%;border:0;display:block}

/* 주문 취소 버튼 — 파괴적 동작이라 눈에 띄되 주된 색은 아니게 */
.btn-cancel-order{background:#fff;color:#b3352b;border:1px solid #e3b7b2}
.btn-cancel-order:hover{background:#fdf3f2}

/* 주문내역 표 안의 취소 버튼 — 배지 아래 줄바꿈 */
.cancel-inline{display:block;margin-top:6px}
.cancel-inline .btn{white-space:nowrap}