/* ──────────────────────────────────────────────────────────────────
   tokens-toss.css — v1.1 Toss Mini 보강 토큰
   tokens.css 위에 덧붙여 로드되는 추가 토큰 + 컴포넌트.
   참고: https://tossmini-docs.toss.im/tds-mobile/
   ────────────────────────────────────────────────────────────────── */

:root {
  /* ═══ 9-stop 컬러 확장 ═══════════════════════════════════════ */
  /* RED — Specialized Brand (PRIMARY 그대로 유지) */
  --red-50:  #FFE5E6;
  --red-100: #FFD4D6;
  --red-200: #FEAFB4;
  --red-300: #FB8890;
  --red-400: #F66570;
  --red-500: #E31E26;  /* PRIMARY 유지 */
  --red-600: #C01019;
  --red-700: #9A0E14;
  --red-800: #7A0810;
  --red-900: #5C050B;

  /* GREY (Toss 9-stop 그대로 채택) */
  --grey-50:  #F9FAFB;
  --grey-100: #F2F4F6;
  --grey-200: #E5E8EB;
  --grey-300: #D1D6DB;
  --grey-400: #B0B8C1;
  --grey-500: #8B95A1;
  --grey-600: #6B7684;
  --grey-700: #4E5968;
  --grey-800: #333D4B;
  --grey-900: #191F28;

  /* BLUE / GREEN / YELLOW (시맨틱) */
  --blue-500:  #3182F6;
  --green-500: #03B26C;
  --yellow-500:#FFC342;

  /* ═══ Typography 토큰 (Toss 추상화 방식) ═══════════════════════ */
  --type-T1: 700 30px/40px var(--font-sans, system-ui);
  --type-T2: 700 26px/35px var(--font-sans, system-ui);
  --type-T3: 700 22px/31px var(--font-sans, system-ui);
  --type-T4: 600 20px/29px var(--font-sans, system-ui);
  --type-T5: 400 17px/25.5px var(--font-sans, system-ui);
  --type-T6: 400 15px/22.5px var(--font-sans, system-ui);
  --type-T7: 400 13px/19.5px var(--font-sans, system-ui);

  --type-T4-semibold: 600 20px/29px var(--font-sans, system-ui);
  --type-T5-medium:   500 17px/25.5px var(--font-sans, system-ui);
  --type-T5-semibold: 600 17px/25.5px var(--font-sans, system-ui);
  --type-T6-semibold: 600 15px/22.5px var(--font-sans, system-ui);
}

/* ────────────────────────────────────────────────────────────────
   터치 피드백 (Toss 표준)
   ──────────────────────────────────────────────────────────────── */
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:active, [role="button"]:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  button:active { transform: none; }
}

/* ────────────────────────────────────────────────────────────────
   Bottom Sheet (모바일) / 데스크탑은 중앙 모달로 자동 폴백
   ──────────────────────────────────────────────────────────────── */
.bs-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease; z-index: 1000;
}
.bs-backdrop.open { opacity: 1; pointer-events: auto; }
.bs-sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 8px 24px calc(32px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
}
.bs-backdrop.open .bs-sheet { transform: translateY(0); }
.bs-handle {
  width: 36px; height: 4px; background: var(--grey-200);
  border-radius: 2px; margin: 8px auto 16px;
}
.bs-title { font: var(--type-T3); color: var(--grey-900); margin: 0 0 16px; }
.bs-body { font: var(--type-T5); color: var(--grey-700); }

@media (min-width: 768px) {
  .bs-sheet {
    position: relative; max-width: 560px;
    margin: auto; top: 50%; transform: translateY(-50%) scale(0.96);
    border-radius: 20px; padding: 32px;
  }
  .bs-backdrop.open .bs-sheet { transform: translateY(-50%) scale(1); }
  .bs-handle { display: none; }
}

/* ────────────────────────────────────────────────────────────────
   Bottom CTA (고정 하단 액션 바)
   ──────────────────────────────────────────────────────────────── */
.bottom-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--grey-200);
  display: flex; gap: 8px; z-index: 90;
}
.bottom-cta .btn-primary {
  flex: 1; height: 56px; font: var(--type-T4-semibold);
  background: var(--red-500); color: #fff; border: 0;
  border-radius: 12px; cursor: pointer;
  transition: background .15s;
}
.bottom-cta .btn-primary:hover { background: var(--red-600); }
.bottom-cta .btn-primary:disabled {
  background: var(--grey-200); color: var(--grey-400); cursor: not-allowed;
}
.bottom-cta .btn-secondary {
  flex: 0 0 100px; height: 56px;
  background: var(--grey-100); color: var(--grey-700); border: 0;
  border-radius: 12px; font: var(--type-T4-semibold); cursor: pointer;
}
.with-bottom-cta { padding-bottom: 88px; }

/* ────────────────────────────────────────────────────────────────
   Skeleton (로딩 상태 — Apps Script 콜드 스타트 대응)
   ──────────────────────────────────────────────────────────────── */
.sk {
  display: inline-block; background: var(--grey-100);
  position: relative; overflow: hidden; border-radius: 4px;
}
.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.6), transparent);
  animation: skin 1.2s infinite linear;
}
@keyframes skin {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ────────────────────────────────────────────────────────────────
   Segmented Control
   ──────────────────────────────────────────────────────────────── */
.segctl {
  display: inline-flex; background: var(--grey-100);
  padding: 4px; border-radius: 12px; gap: 0;
}
.segctl button {
  padding: 8px 16px; border: 0; background: transparent;
  border-radius: 8px; font: var(--type-T6-semibold);
  color: var(--grey-600); cursor: pointer;
  transition: all .18s cubic-bezier(0.4, 0, 0.2, 1);
}
.segctl button.active {
  background: #fff; color: var(--grey-900);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ────────────────────────────────────────────────────────────────
   ListRow (목록 행)
   ──────────────────────────────────────────────────────────────── */
.lr {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fff; border: 0;
  width: 100%; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--grey-100);
  transition: background .15s;
}
.lr:hover, .lr:active { background: var(--grey-50); }
.lr-left { flex: 0 0 auto; }
.lr-main { flex: 1; min-width: 0; }
.lr-title {
  font: var(--type-T5-semibold);
  color: var(--grey-900); display: block;
}
.lr-sub {
  font: var(--type-T7); color: var(--grey-600);
  display: block; margin-top: 2px;
}
.lr-right {
  font: var(--type-T6); color: var(--grey-700);
  margin-left: auto; flex: 0 0 auto;
}

/* ────────────────────────────────────────────────────────────────
   Numeric Stepper
   ──────────────────────────────────────────────────────────────── */
.stepper {
  display: inline-flex; height: 44px;
  border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden;
}
.stepper button {
  width: 44px; background: #fff; border: 0;
  font: var(--type-T3); color: var(--grey-700);
  cursor: pointer; transition: background .12s;
}
.stepper button:active { background: var(--grey-100); }
.stepper button:disabled { color: var(--grey-300); cursor: not-allowed; }
.stepper input {
  width: 60px; border: 0; text-align: center;
  font: var(--type-T5-semibold);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { display: none; margin: 0; }

/* ────────────────────────────────────────────────────────────────
   Toast (3초 자동 닫힘)
   ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translate(-50%, 20px);
  background: var(--grey-900); color: #fff;
  padding: 12px 20px; border-radius: 12px;
  font: var(--type-T6-semibold);
  opacity: 0; transition: all .25s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2000; box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  max-width: calc(100% - 32px);
}
.toast.in { transform: translate(-50%, 0); opacity: 1; }
.toast-error   { background: var(--red-600); }
.toast-success { background: var(--green-500); }
.toast-warning { background: var(--yellow-500); color: var(--grey-900); }

/* ────────────────────────────────────────────────────────────────
   Badge (9-stop 컬러 활용)
   ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 6px;
  font: var(--type-T7); font-weight: 600;
  background: var(--grey-100); color: var(--grey-700);
}
.badge-red    { background: var(--red-50);    color: var(--red-700); }
.badge-blue   { background: #E8F3FF;          color: #1B64DA; }
.badge-green  { background: #F0FAF6;          color: #029359; }
.badge-yellow { background: #FFF9E7;          color: #DD7D02; }

/* ────────────────────────────────────────────────────────────────
   빈 상태 / 에러 상태 / ErrorBoundary (v3.4 신규)
   ──────────────────────────────────────────────────────────────── */
.es-empty, .es-error, .eb-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 64px 24px; text-align: center;
  min-height: 320px;
  background: var(--grey-50, #F9FAFB);
  border-radius: var(--radius-md, 12px);
}
.es-icon, .eb-icon { font-size: 48px; line-height: 1; margin-bottom: 8px; }
.es-title, .eb-title {
  font: var(--type-T3, 700 22px/31px var(--font-sans));
  color: var(--grey-900, #191F28); margin: 0;
}
.es-msg, .eb-msg {
  font: var(--type-T5, 400 17px/25.5px var(--font-sans));
  color: var(--grey-600, #6B7684); margin: 0;
  max-width: 480px;
}
.es-actions, .eb-actions {
  display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center;
}
.es-actions .btn-primary, .eb-actions .btn-primary {
  padding: 12px 24px; height: auto;
  background: var(--red-500); color: #fff; border: 0;
  border-radius: var(--radius-pill, 100px);
  font: var(--type-T5-semibold, 600 17px/25.5px var(--font-sans));
  cursor: pointer; transition: background .15s;
}
.es-actions .btn-primary:hover, .eb-actions .btn-primary:hover {
  background: var(--red-600);
}
.es-actions .btn-secondary, .eb-actions .btn-secondary {
  padding: 12px 24px; height: auto;
  background: var(--grey-100); color: var(--grey-700); border: 0;
  border-radius: var(--radius-pill, 100px);
  font: var(--type-T5-medium, 500 17px/25.5px var(--font-sans));
  cursor: pointer;
}
.eb-details {
  margin-top: 16px; max-width: 480px;
  font: var(--type-T7, 400 13px/19.5px var(--font-sans));
  color: var(--grey-500); text-align: left;
}
.eb-details summary { cursor: pointer; user-select: none; }
.eb-details pre {
  background: var(--grey-100); padding: 8px 12px;
  border-radius: 6px; overflow-x: auto;
  margin-top: 4px; font-size: 12px;
}

/* ────────────────────────────────────────────────────────────────
   카탈로그 카드 통일 (R-005) — v3.6 디자인가이드 v2.0 §4-4
   재고관리 카드 톤으로 통일. catalog.css의 .cat-pcard 오버라이드.
   ──────────────────────────────────────────────────────────────── */
.cat-pgrid {
  /* 4열 고정 → 반응형 auto-fill로 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 16px !important;
}
.cat-pcard {
  border: 1px solid var(--grey-200, #E5E8EB) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: transform .2s var(--ease-out, cubic-bezier(0.4,0,0.2,1)),
              box-shadow .2s var(--ease-out, cubic-bezier(0.4,0,0.2,1)),
              border-color .15s !important;
}
.cat-pcard:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  border-color: var(--grey-300, #D1D6DB) !important;
}
.cat-pcard-img {
  /* 카드 이미지 비율: 16:10 → 4:3 통일 */
  aspect-ratio: 4 / 3 !important;
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden;
}
.cat-pcard-body { padding: 16px 16px 18px !important; gap: 6px !important; }
.cat-pcard-eyebrow {
  font: var(--type-T7, 400 13px/19.5px var(--font-sans)) !important;
  color: var(--grey-600, #6B7684) !important;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cat-pcard-title {
  font: 600 19px/1.4 var(--font-sans) !important;
  letter-spacing: -0.02em !important;
  color: var(--grey-900, #191F28) !important;
}
.cat-pcard-sales {
  font: var(--type-T6, 400 15px/22.5px var(--font-sans)) !important;
  color: var(--grey-700, #4E5968) !important;
  background: var(--grey-50, #F9FAFB) !important;
  border-left: 3px solid var(--orange-500, #FF6B00) !important;
  padding: 8px 12px !important;
  border-radius: 0 6px 6px 0 !important;
}
.cat-pcard-stats {
  border-top: 1px solid var(--grey-100, #F2F4F6) !important;
  border-bottom: 1px solid var(--grey-100, #F2F4F6) !important;
  padding: 12px 0 !important; margin-top: 6px !important;
}
.cat-pcard-stat b {
  font: 700 17px/1 var(--font-sans) !important;
  color: var(--grey-900) !important;
}
.cat-pcard-stat span {
  font: 500 11px/1 var(--font-sans) !important;
  color: var(--grey-500, #8B95A1) !important;
}
.cat-pcard-status.blue  { background: #E8F3FF !important; color: #1B64DA !important; }
.cat-pcard-status.green { background: #F0FAF6 !important; color: #029359 !important; }
.cat-pcard-status.red   { background: var(--red-50, #FFE5E6) !important; color: var(--red-700, #9A0E14) !important; }
.cat-pcard-status.amber { background: #FFF9E7 !important; color: #DD7D02 !important; }