/* ============================================================
   STIZ Design System — Reusable Component Classes
   기반: 디자인 핸드오프 _ds/_ds_bundle.js의 React 컴포넌트를 CSS 클래스로 이식
   병합일: 2026-07-09

   컴포넌트 목록:
   1. Button (.stiz-btn + data-variant)
   2. IconButton (.stiz-icon-btn)
   3. Chip (.stiz-chip)
   4. Badge (.stiz-badge)
   5. Input (.stiz-input)
   6. QuantityStepper (.stiz-qty)
   7. SectionHeader (.stiz-section-header)
   8. Breadcrumb (.stiz-crumb)
   9. ProductCard (.stiz-product-card)

   사용 예:
   <button class="stiz-btn" data-variant="primary">주문하기</button>
   <span class="stiz-badge" data-tone="red">SALE</span>
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   1. Button — .stiz-btn
   variants: primary(검정) / secondary(아웃라인) / ghost(투명)
   sizes: sm / md(기본) / lg
   shape: square(디자인 기본 CTA) / rounded / pill
   ══════════════════════════════════════════════════════════ */
.stiz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
  white-space: nowrap;
}
.stiz-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* variant: primary */
.stiz-btn[data-variant="primary"] {
  background: var(--stiz-black);
  color: var(--stiz-white);
  border-color: var(--stiz-black);
}
.stiz-btn[data-variant="primary"]:not(:disabled):hover {
  background: var(--gray-800);
  border-color: var(--gray-800);
}

/* variant: secondary (아웃라인) */
.stiz-btn[data-variant="secondary"] {
  background: transparent;
  color: var(--stiz-black);
  border-color: var(--stiz-black);
}
.stiz-btn[data-variant="secondary"]:not(:disabled):hover {
  background: var(--stiz-black);
  color: var(--stiz-white);
}

/* variant: ghost (투명) */
.stiz-btn[data-variant="ghost"] {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.stiz-btn[data-variant="ghost"]:not(:disabled):hover {
  color: var(--stiz-black);
}

/* variant: danger (강조 액션, 빨강) */
.stiz-btn[data-variant="danger"] {
  background: var(--stiz-red);
  color: var(--stiz-white);
  border-color: var(--stiz-red);
}
.stiz-btn[data-variant="danger"]:not(:disabled):hover {
  background: var(--stiz-red-600);
  border-color: var(--stiz-red-600);
}

/* size 변형 */
.stiz-btn[data-size="sm"] { padding: 8px 14px; min-height: 36px; font-size: var(--fs-caption); }
.stiz-btn[data-size="lg"] { padding: 16px 28px; min-height: 52px; font-size: var(--fs-base); }

/* shape 변형 */
.stiz-btn[data-shape="rounded"] { border-radius: var(--radius-card); }
.stiz-btn[data-shape="pill"] { border-radius: var(--radius-full); }

/* uppercase 유틸 */
.stiz-btn[data-uppercase="true"] { text-transform: uppercase; }

/* full width */
.stiz-btn[data-fullwidth="true"] { width: 100%; }


/* ══════════════════════════════════════════════════════════
   2. IconButton — .stiz-icon-btn
   ══════════════════════════════════════════════════════════ */
.stiz-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: opacity var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.stiz-icon-btn:not(:disabled):hover { opacity: 0.65; }
.stiz-icon-btn[data-variant="outline"] {
  border-color: var(--border);
  border-radius: var(--radius-card);
}
.stiz-icon-btn[data-variant="outline"]:hover { border-color: var(--stiz-black); }
.stiz-icon-btn[data-size="sm"] { width: 32px; height: 32px; }
.stiz-icon-btn[data-size="lg"] { width: 48px; height: 48px; }


/* ══════════════════════════════════════════════════════════
   3. Chip — .stiz-chip
   필터 태그, 사이즈 선택 등 pill 형태
   ══════════════════════════════════════════════════════════ */
.stiz-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
  user-select: none;
}
.stiz-chip:not(:disabled):hover { border-color: var(--stiz-black); }

/* selected 상태 */
.stiz-chip[data-selected="true"] {
  background: var(--stiz-black);
  color: var(--stiz-white);
  border-color: var(--stiz-black);
}

/* 사이즈 선택 (사각형) */
.stiz-chip[data-shape="square"] { border-radius: var(--radius-none); }

/* 재고 없음 */
.stiz-chip[data-out-of-stock="true"] {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

.stiz-chip[data-size="sm"] { padding: 6px 10px; min-height: 28px; font-size: var(--fs-caption); }


/* ══════════════════════════════════════════════════════════
   4. Badge — .stiz-badge (NEW/BEST/SALE/CUSTOM/FEATURED)
   ══════════════════════════════════════════════════════════ */
.stiz-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-none);
  line-height: 1;
}
.stiz-badge[data-tone="dark"]  { background: var(--stiz-black); color: var(--stiz-white); }
.stiz-badge[data-tone="light"] { background: var(--stiz-white); color: var(--stiz-black); border: 1px solid var(--border); }
.stiz-badge[data-tone="red"]   { background: var(--stiz-red-600); color: var(--stiz-white); }
.stiz-badge[data-tone="blue"]  { background: var(--stiz-blue); color: var(--stiz-white); }
.stiz-badge[data-tone="mute"]  { background: var(--gray-100); color: var(--text-secondary); }

/* size */
.stiz-badge[data-size="md"] { padding: 5px 10px; font-size: 11px; }

/* shape */
.stiz-badge[data-shape="pill"] { border-radius: var(--radius-full); }


/* ══════════════════════════════════════════════════════════
   5. Input — .stiz-input-shell + .stiz-input
   .stiz-input-shell로 감싸면 label + input 컨테이너
   ══════════════════════════════════════════════════════════ */
.stiz-input-shell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.stiz-input-shell:focus-within {
  border-color: var(--stiz-black);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}
.stiz-input-shell[data-error="true"] {
  border-color: var(--stiz-red);
}

.stiz-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text-primary);
  min-width: 0;
}
.stiz-input::placeholder { color: var(--text-muted); }
.stiz-input:disabled { color: var(--text-muted); cursor: not-allowed; }

.stiz-input-label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.stiz-input-help {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.stiz-input-help[data-error="true"] { color: var(--stiz-red); }


/* ══════════════════════════════════════════════════════════
   6. QuantityStepper — .stiz-qty
   ══════════════════════════════════════════════════════════ */
.stiz-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}
.stiz-qty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 18px;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.stiz-qty button:hover:not(:disabled) { background: var(--surface-muted); }
.stiz-qty button:disabled { color: var(--text-muted); cursor: not-allowed; }
.stiz-qty input {
  width: 48px;
  border: none;
  outline: none;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: transparent;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.stiz-qty[data-size="sm"] button { width: 32px; height: 32px; }
.stiz-qty[data-size="sm"] input { width: 40px; }


/* ══════════════════════════════════════════════════════════
   7. SectionHeader — .stiz-section-header
   eyebrow + title + subtitle + 우측 action link
   ══════════════════════════════════════════════════════════ */
.stiz-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--stiz-black);
}
.stiz-section-header[data-align="center"] {
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
}
.stiz-section-header-eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.stiz-section-header-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: var(--stiz-black);
  line-height: var(--lh-tight);
  margin: 0;
}
.stiz-section-header-subtitle {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.stiz-section-header-action {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--text-secondary);
  padding-bottom: 2px;
  transition: color var(--dur-base) var(--ease-standard);
  white-space: nowrap;
}
.stiz-section-header-action:hover { color: var(--stiz-black); border-color: var(--stiz-black); }

@media (max-width: 640px) {
  .stiz-section-header { flex-direction: column; align-items: flex-start; }
  .stiz-section-header-title { font-size: var(--fs-2xl); }
}


/* ══════════════════════════════════════════════════════════
   8. Breadcrumb — .stiz-crumb
   ══════════════════════════════════════════════════════════ */
.stiz-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.stiz-crumb-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.stiz-crumb-link:hover { color: var(--text-secondary); }
.stiz-crumb-current {
  color: var(--stiz-black);
  font-weight: var(--fw-bold);
}
.stiz-crumb-sep {
  color: var(--gray-300);
  user-select: none;
}


/* ══════════════════════════════════════════════════════════
   9. ProductCard — .stiz-product-card
   시안: 카테고리 eyebrow + 이름 + 가격 + 배지
   ══════════════════════════════════════════════════════════ */
.stiz-product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.stiz-product-card-well {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  background: var(--surface-sunken);
  overflow: hidden;
  border-radius: var(--radius-none);
  margin-bottom: var(--space-3);
}
.stiz-product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.stiz-product-card:hover .stiz-product-card-img { transform: scale(1.05); }
.stiz-product-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
}
.stiz-product-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
}
.stiz-product-card-badge[data-position="right"] { left: auto; right: 8px; }
.stiz-product-card-category {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin: 0 0 var(--space-1);
}
.stiz-product-card-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stiz-product-card:hover .stiz-product-card-name { text-decoration: underline; }
.stiz-product-card-name-en {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin: 2px 0 0;
}
.stiz-product-card-price {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.stiz-product-card-price[data-consult="true"] {
  color: var(--stiz-blue);
  font-size: 13px;
}
.stiz-product-card-price[data-custom="true"]::before { content: "~"; }


/* ══════════════════════════════════════════════════════════
   Base 유틸 (기존 .stiz-container, .stiz-eyebrow와 병존)
   ══════════════════════════════════════════════════════════ */
.stiz-container-wide {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Eyebrow — 시안 정확한 letter-spacing 반영 */
.stiz-eyebrow-widest {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════════════════
   ChatFab — 소비자 페이지 우하단 고정
   js/chat-fab.js가 body 끝에 삽입
   ══════════════════════════════════════════════════════════ */
.stiz-chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: var(--z-chat-fab);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--stiz-black);
  color: var(--stiz-white);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-standard);
}
.stiz-chat-fab:hover { transform: scale(1.06); background: var(--gray-800); }
.stiz-chat-fab .material-symbols-outlined { font-size: 26px; }
.stiz-chat-fab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .stiz-chat-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}