/* 셀링크 v2 디자인 토큰
 * 톤: 신뢰·전문 (B2B 통관) / 밝은 흰 배경 / 차분한 네이비 + 오렌지 액션
 * 폰트: Pretendard
 */

/* 모바일 반응형: 표 → 카드 변환 (cycle329 · opt-in .r-card) */
@import url('./responsive-table.css');

:root {
  /* ── Color: Brand ───────────────────────── */
  /* Sell-Link 메인 블루 — 신뢰감 있고 밝음, "이어주는 역할" 톤
   * (변수명 --sl-navy-* 는 호환 유지, 값은 블루로 교체됨) */
  --sl-navy-950: #0B2447;
  --sl-navy-900: #0F3D8C;   /* 메인 블루 (헤더·로고·강조) */
  --sl-navy-800: #1657BD;
  --sl-navy-700: #2570E0;   /* CTA 메인 */
  --sl-navy-600: #4A8EEF;
  --sl-navy-500: #6BA5F4;
  --sl-navy-400: #94BEF7;
  --sl-navy-300: #B9D3FB;
  --sl-navy-200: #D6E5FD;
  --sl-navy-100: #E8F0FE;
  --sl-navy-50:  #F3F7FE;

  /* 액센트 — 에메랄드 그린 (셀러 매출 성장 의미) */
  --sl-orange-700: #047857;
  --sl-orange-600: #059669;
  --sl-orange-500: #10B981;   /* 메인 액센트 */
  --sl-orange-400: #34D399;
  --sl-orange-100: #D1FAE5;
  --sl-orange-50:  #ECFDF5;

  /* 중성 (회색 — 정보 밀도용) */
  --sl-ink-950: #0E1116;
  --sl-ink-900: #1A1F26;     /* 본문 */
  --sl-ink-800: #2A323C;
  --sl-ink-700: #4A5462;
  --sl-ink-600: #6B7480;
  --sl-ink-500: #8B939E;
  --sl-ink-400: #ABB2BC;
  --sl-ink-300: #CDD2D9;
  --sl-ink-200: #E2E5EA;
  --sl-ink-100: #EEF0F3;
  --sl-ink-50:  #F6F7F9;
  --sl-bg:      #FAFBFC;
  --sl-white:   #FFFFFF;

  /* State color */
  --sl-success-700: #0F7A3F;
  --sl-success-500: #16A34A;
  --sl-success-50:  #E8F5EC;
  --sl-warn-700:    #B45309;
  --sl-warn-500:    #F59E0B;
  --sl-warn-50:     #FEF6E5;
  --sl-danger-700:  #B91C1C;
  --sl-danger-500:  #DC2626;
  --sl-danger-50:   #FEE9E9;
  --sl-info-700:    #1D4ED8;
  --sl-info-500:    #2563EB;
  --sl-info-50:     #E8EFFE;

  /* 셀링크 신청서 state 9개 (BEAR 룰) — 한 눈에 분기 */
  --sl-state-pending:    #8B939E;  /* 결제대기 */
  --sl-state-shipping:   #2570E0;  /* 중국 배송중 */
  --sl-state-arrived:    #0EA5E9;  /* 입고완료 */
  --sl-state-inspect:    #6366F1;  /* 검품중 */
  --sl-state-ready:      #F59E0B;  /* 결제대기2 */
  --sl-state-paid:       #16A34A;  /* 결제완료 */
  --sl-state-released:   #047857;  /* 출고완료 */
  --sl-state-delivered:  #0F3D8C;  /* 배송완료 */
  --sl-state-hold:       #DC2626;  /* 출고보류 */
  --sl-state-return:     #B45309;  /* 반품 */

  /* ── Type ──────────────────────────────── */
  --sl-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --sl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sl-font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", var(--sl-font-sans);

  /* Type scale — Customer (모바일 기본) */
  --sl-text-xs: 11px;
  --sl-text-sm: 12px;
  --sl-text-base: 14px;
  --sl-text-md: 15px;
  --sl-text-lg: 17px;
  --sl-text-xl: 20px;
  --sl-text-2xl: 24px;
  --sl-text-3xl: 32px;
  --sl-text-4xl: 40px;
  --sl-text-display: 56px;

  /* Type scale — Admin (정보 밀도) */
  --sl-admin-xs: 10px;
  --sl-admin-sm: 11px;
  --sl-admin-base: 12px;
  --sl-admin-md: 13px;
  --sl-admin-lg: 14px;

  /* ── Spacing ───────────────────────────── */
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 20px;
  --sl-space-6: 24px;
  --sl-space-8: 32px;
  --sl-space-10: 40px;
  --sl-space-12: 48px;
  --sl-space-16: 64px;
  --sl-space-20: 80px;

  /* ── Radius ────────────────────────────── */
  /* Material 3 계 라운드 스케일 */
  --sl-r-sm: 8px;
  --sl-r-md: 12px;
  --sl-r-lg: 16px;
  --sl-r-xl: 24px;
  --sl-r-2xl: 28px;
  --sl-r-full: 9999px;

  /* ── Shadow ────────────────────────────── */
  /* Material 3 elevation (연한, 단계적) */
  --sl-shadow-sm: 0 1px 2px rgba(15,61,140,0.05), 0 1px 3px rgba(15,61,140,0.06);
  --sl-shadow-md: 0 2px 6px rgba(15,61,140,0.06), 0 4px 12px rgba(15,61,140,0.08);
  --sl-shadow-lg: 0 4px 12px rgba(15,61,140,0.08), 0 12px 28px rgba(15,61,140,0.12);
  --sl-shadow-fab: 0 3px 5px rgba(15,61,140,0.20), 0 6px 16px rgba(15,61,140,0.18);

  /* ── Misc ──────────────────────────────── */
  --sl-border: var(--sl-ink-200);
  --sl-divider: var(--sl-ink-100);
}

/* Pretendard CDN */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

/* ── Screen frame base ─────────────────── */
.sl-screen {
  font-family: var(--sl-font-sans);
  color: var(--sl-ink-900);
  background: var(--sl-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.sl-screen.sl-customer {
  font-size: var(--sl-text-base);
  line-height: 1.5;
}
.sl-screen.sl-admin {
  font-size: var(--sl-admin-base);
  line-height: 1.4;
}

/* ── Common components ─────────────────── */
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: inherit; font-weight: 600;
  border: none; cursor: pointer;
  border-radius: var(--sl-r-full);   /* M3 pill */
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.05s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.sl-btn:active { transform: translateY(1px); }
/* M3 Filled */
.sl-btn-primary {
  background: var(--sl-navy-700); color: white;
  box-shadow: 0 1px 2px rgba(15,61,140,0.18);
}
.sl-btn-primary:hover {
  background: var(--sl-navy-800);
  box-shadow: 0 1px 2px rgba(15,61,140,0.18), 0 2px 6px rgba(15,61,140,0.20);
}

/* M3 Accent (에메랄드 그린) */
.sl-btn-accent {
  background: var(--sl-orange-500); color: white;
  box-shadow: 0 1px 2px rgba(16,185,129,0.20);
}
.sl-btn-accent:hover {
  background: var(--sl-orange-600);
  box-shadow: 0 1px 2px rgba(16,185,129,0.20), 0 2px 6px rgba(16,185,129,0.20);
}

/* M3 Tonal — 연한 색 채움 */
.sl-btn-tonal { background: var(--sl-navy-100); color: var(--sl-navy-800); }
.sl-btn-tonal:hover { background: var(--sl-navy-200); }

/* M3 Outlined */
.sl-btn-secondary {
  background: white; color: var(--sl-navy-800);
  border: 1px solid var(--sl-ink-300);
}
.sl-btn-secondary:hover { background: var(--sl-navy-50); border-color: var(--sl-navy-300); }

/* M3 Text */
.sl-btn-ghost { background: transparent; color: var(--sl-navy-700); }
.sl-btn-ghost:hover { background: var(--sl-navy-50); }

.sl-btn-lg { padding: 14px 24px; font-size: var(--sl-text-md); }
.sl-btn-md { padding: 10px 18px; font-size: var(--sl-text-base); }
.sl-btn-sm { padding: 7px 14px; font-size: var(--sl-text-sm); }
.sl-btn-xs { padding: 4px 10px; font-size: var(--sl-admin-sm); }

.sl-card {
  background: white;
  border-radius: var(--sl-r-lg);
  box-shadow: var(--sl-shadow-sm);
  border: 1px solid transparent;
}

/* M3 서피스 색 레벨 */
.sl-surface { background: var(--sl-bg); }
.sl-surface-1 { background: #F7F9FC; }
.sl-surface-2 { background: #EFF3FA; }
.sl-surface-container { background: var(--sl-navy-50); }

.sl-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: var(--sl-text-xs); font-weight: 600;
  border-radius: var(--sl-r-sm); line-height: 1.4;
}
.sl-badge-success { background: var(--sl-success-50); color: var(--sl-success-700); }
.sl-badge-warn    { background: var(--sl-warn-50);    color: var(--sl-warn-700); }
.sl-badge-danger  { background: var(--sl-danger-50);  color: var(--sl-danger-700); }
.sl-badge-info    { background: var(--sl-info-50);    color: var(--sl-info-700); }
.sl-badge-ghost   { background: var(--sl-ink-100);    color: var(--sl-ink-700); }
.sl-badge-accent  { background: var(--sl-orange-100); color: var(--sl-orange-700); }

.sl-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  background: var(--sl-ink-50); border: 1px solid transparent;
  border-radius: var(--sl-r-md);
  font: inherit; color: var(--sl-ink-900);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.sl-input:hover { background: var(--sl-ink-100); }
.sl-input:focus {
  outline: none; background: white;
  border-color: var(--sl-navy-700);
  box-shadow: 0 0 0 3px rgba(37,112,224,0.12);
}

/* M3 계 검색바 (Search pill) */
.sl-search {
  width: 100%; box-sizing: border-box;
  padding: 10px 16px 10px 40px;
  background: var(--sl-ink-100); border: 1px solid transparent;
  border-radius: var(--sl-r-full);
  font: inherit; color: var(--sl-ink-900);
  transition: background 0.18s, box-shadow 0.18s;
}
.sl-search:hover { background: var(--sl-ink-200); }
.sl-search:focus {
  outline: none; background: white;
  box-shadow: var(--sl-shadow-md);
}

/* Sell-Link logo block
 * 셀러들이 매출을 올릴 수 있도록 상품과 셀러를 이어주는 역할
 * 마크 = 두 점이 연결된 형태 (블루=상품·셀러 / 그린=매출 성장) */
.sl-logo {
  font-family: var(--sl-font-sans);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--sl-navy-800);
  display: inline-flex; align-items: center; gap: 7px;
}
.sl-logo-mark {
  width: 22px; height: 22px;
  display: inline-block; position: relative;
  flex-shrink: 0;
}
.sl-logo-mark::before, .sl-logo-mark::after {
  content: ''; position: absolute;
  width: 46%; height: 46%; border-radius: 50%;
}
.sl-logo-mark::before {
  background: var(--sl-navy-700); /* 셀러 (블루) */
  top: 4%; left: 4%;
  box-shadow: 0 0 0 2px rgba(37,112,224,0.15);
}
.sl-logo-mark::after {
  background: var(--sl-orange-500); /* 매출 성장 (그린) */
  bottom: 4%; right: 4%;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.15);
}
/* 두 점 잇는 선 */
.sl-logo-mark > i {
  position: absolute; top: 50%; left: 50%;
  width: 64%; height: 2px;
  background: linear-gradient(90deg, var(--sl-navy-700), var(--sl-orange-500));
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 1px;
  z-index: 0;
}

/* Stub watermark for wireframe screens */
.sl-stub-tag {
  position: absolute; top: 8px; right: 8px;
  background: rgba(11,31,58,0.85); color: white;
  font-size: 10px; font-weight: 600; padding: 3px 7px;
  border-radius: 4px; letter-spacing: 0.04em;
  z-index: 30;
}

/* Hide scrollbars in screen frames */
.sl-screen *::-webkit-scrollbar { display: none; }
.sl-screen * { scrollbar-width: none; }

/* Placeholder strip */
.sl-placeholder {
  background-image: repeating-linear-gradient(
    45deg,
    var(--sl-ink-100) 0px, var(--sl-ink-100) 8px,
    var(--sl-ink-50)  8px, var(--sl-ink-50)  16px
  );
  color: var(--sl-ink-500);
  font-family: var(--sl-font-mono);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sl-r-md);
}

/* Customer mobile chrome (status bar) */
.sl-mobile-status {
  height: 44px;
  background: white;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  font-size: 14px; font-weight: 600;
  color: var(--sl-ink-900);
}

/* M3 Bottom Navigation Bar (pill indicator) */
.sl-mobile-tab {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 72px;
  background: white;
  border-top: 1px solid var(--sl-divider);
  display: flex;
  z-index: 20;
  padding-top: 8px;
}
.sl-mobile-tab > div {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  font-size: 11px; font-weight: 500;
  color: var(--sl-ink-600);
  cursor: pointer;
}
.sl-mobile-tab > div .sl-tab-pill {
  width: 64px; height: 32px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background 0.18s;
}
.sl-mobile-tab > div.active { color: var(--sl-navy-800); font-weight: 700; }
.sl-mobile-tab > div.active .sl-tab-pill { background: var(--sl-navy-100); }

/* Admin chrome — 라이트 테마 (밝은 사이드바) */
.sl-admin-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 44px 1fr;
  width: 100%; height: 100%;
}
.sl-admin-topbar {
  grid-column: 1 / -1;
  background: white;
  color: var(--sl-ink-900);
  border-bottom: 1px solid var(--sl-border);
  display: flex; align-items: center; padding: 0 16px; gap: 16px;
  font-size: var(--sl-admin-md);
}
.sl-admin-sidebar {
  background: #F8FAFC;
  color: var(--sl-ink-700);
  border-right: 1px solid var(--sl-border);
  padding: 10px 0;
  font-size: var(--sl-admin-base);
  overflow: auto;
}
.sl-admin-nav-group {
  font-size: 10px; color: var(--sl-ink-500); padding: 12px 14px 6px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.sl-admin-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; cursor: pointer;
  font-size: var(--sl-admin-md);
  color: var(--sl-ink-700);
  border-left: 3px solid transparent;
}
.sl-admin-nav-item:hover { background: var(--sl-navy-50); color: var(--sl-navy-800); }
.sl-admin-nav-item.active {
  background: var(--sl-navy-100); color: var(--sl-navy-800);
  border-left-color: var(--sl-navy-700);
  font-weight: 700;
}
.sl-admin-main {
  background: var(--sl-bg);
  overflow: auto;
  padding: 16px 20px;
}

.sl-admin-table {
  width: 100%;
  font-size: var(--sl-admin-base);
  background: white;
  border-collapse: separate; border-spacing: 0;
  border-radius: var(--sl-r-md);
  overflow: hidden;
}
.sl-admin-table th {
  text-align: left;
  background: var(--sl-ink-50);
  padding: 6px 10px;
  font-weight: 600; color: var(--sl-ink-700);
  font-size: var(--sl-admin-sm);
  border-bottom: 1px solid var(--sl-border);
  white-space: nowrap;
}
.sl-admin-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--sl-divider);
  color: var(--sl-ink-800);
  white-space: nowrap;
}
.sl-admin-table tr:hover td {
  background: var(--sl-navy-50);
}
.sl-kbd {
  display: inline-block; padding: 1px 5px;
  font-family: var(--sl-font-mono); font-size: 10px;
  background: white; color: var(--sl-ink-700);
  border: 1px solid var(--sl-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  line-height: 1.4;
}