/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — 2026 Refresh
   4개 사이트 공통 (SBU 메인/어드민 · ESDS · SDMS)
   • Primary 네이비 #1e2761 (살짝 fresh 한 hue 보정)
   • Accent 머스타드 #d4a72c (vivid 보정)
   • 보조: Coral #ff6b7d, Violet #7c5cff, Mint #14c8a3
   • Pretendard · 가독성 우선 · Modern Korean Commerce
   ════════════════════════════════════════════════════════════ */

/* ── Pretendard 폰트 ── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ─ Brand (네이비 살짝 vivid 보정) ─ */
  --primary:        #1e2761;
  --primary-hover:  #141a4d;
  --primary-soft:   #eef1fb;
  --primary-text:   #1e2761;
  --primary-border: #c9d0ec;

  /* ─ Accent (mustard — 살짝 더 saturated) ─ */
  --accent:         #d4a72c;
  --accent-hover:   #b88f1e;
  --accent-soft:    #fbf2d3;
  --accent-text:    #7d6212;

  /* ─ Surface (밝게: 흰 dominant + 옅은 cool gray) ─ */
  --bg-app:         #ffffff;   /* 어드민 본문 배경 — 순백 */
  --bg-page:        #f8f9fb;   /* 일반 페이지 배경 — 옅은 cool gray */
  --surface:        #ffffff;
  --surface-hover:  #f4f6fa;
  --surface-elev:   #ffffff;

  /* ─ Text (WCAG AA 이상 — 위계 명확) ─ */
  --ink:            #111317;   /* primary — 더 진하게 (#fff 위 16:1+) */
  --ink-soft:       #2a2d33;
  --gray-1:         #5a5f6b;   /* secondary — 진하게 (가독성↑) */
  --gray-2:         #757a87;   /* meta/보조 */
  --gray-3:         #9b9fac;   /* tertiary — 한정 사용 */
  --gray-4:         #c1c5d0;   /* 비활성 */

  /* ─ Borders (좀 더 명확 — 카드 보이게) ─ */
  --border:         #e2e6ed;
  --border-soft:    #ebeef3;
  --border-strong:  #cdd2dc;

  /* ─ Status (살짝 더 vivid + fresh) ─ */
  --success:        #0fb682;
  --success-soft:   #e3f7ee;
  --warning:        #f5a524;
  --warning-soft:   #fef2dd;
  --danger:         #f04e4e;
  --danger-soft:    #fde6e6;
  --info:           #3b82f6;
  --info-soft:      #e6effd;

  /* ─ Radius (modern soft) ─ */
  --r-xs:           4px;
  --r-sm:           8px;
  --r-md:           12px;    /* 버튼/입력 — 더 부드럽게 */
  --r-lg:           18px;    /* 카드 */
  --r-xl:           22px;    /* 큰 카드/hero */
  --r-2xl:          28px;    /* 거대 surface */
  --r-full:         99px;    /* 배지 */

  /* ─ Shadows (multi-layer crisp + soft) ─ */
  --shadow-xs:      0 1px 2px rgba(20,22,30,.04);
  --shadow-sm:      0 1px 2px rgba(20,22,30,.04), 0 1px 3px rgba(20,22,30,.05);
  --shadow-md:      0 2px 6px rgba(20,22,30,.05), 0 8px 20px -6px rgba(20,22,30,.08);
  --shadow-lg:      0 4px 12px rgba(20,22,30,.06), 0 18px 38px -10px rgba(20,22,30,.14);
  --shadow-subtle:  0 1px 2px rgba(20,22,30,.04), 0 2px 6px rgba(20,22,30,.04);
  --shadow-elevated:0 3px 10px rgba(20,22,30,.06), 0 14px 34px -10px rgba(20,22,30,.12);
  --shadow-floating:0 6px 18px -4px rgba(20,22,30,.14), 0 22px 52px -16px rgba(30,39,97,.20);
  --shadow-accent:  0 8px 22px -6px rgba(212,167,44,.42), 0 4px 12px rgba(212,167,44,.20);
  --shadow-primary: 0 10px 26px -6px rgba(30,39,97,.32), 0 4px 14px rgba(30,39,97,.18);
  --shadow-coral:   0 8px 22px -6px rgba(255,107,125,.36), 0 4px 12px rgba(255,107,125,.18);
  --shadow-violet:  0 8px 22px -6px rgba(124,92,255,.34), 0 4px 12px rgba(124,92,255,.18);

  /* ─ Coral (보조 코랄 — vivid 보정) ─ */
  --coral:          #ff6b7d;
  --coral-soft:     #ffe5e9;
  --coral-text:     #c83f53;

  /* ─ Violet (액센트 추가 — trendy fashion / 카테고리 점프) ─ */
  --violet:         #7c5cff;
  --violet-soft:    #ecdcff;
  --violet-hover:   #6442ed;
  --violet-text:    #5638cf;

  /* ─ Mint (액센트 추가 — success/eco/fresh feel) ─ */
  --mint:           #14c8a3;
  --mint-soft:      #d6f7ef;
  --mint-text:      #0a8f74;

  /* ─ Gradient (2026 trend — Light & airy, dark는 한정) ─ */
  --gradient-primary:  linear-gradient(135deg, #1e2761 0%, #2a3380 55%, #3b4dbe 100%);
  --gradient-accent:   linear-gradient(135deg, #d4a72c 0%, #f0c75c 100%);
  --gradient-warm:     linear-gradient(135deg, #fef2dd 0%, #ffffff 50%, #ffe5e9 100%);
  /* hero — 옛 어두운 네이비 → 밝은 라일락/민트 → 화이트 (color glow) */
  --gradient-hero:     linear-gradient(135deg, #f4f1ff 0%, #ffffff 45%, #eaf6f3 100%);
  --gradient-hero-dark:linear-gradient(135deg, #161d52 0%, #1e2761 35%, #2a2f7e 65%, #4a3aa0 100%); /* 한정 사용 (다크 영역만) */
  --gradient-surface:  linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  --gradient-border:   linear-gradient(135deg, rgba(212,167,44,.6), rgba(255,107,125,.5), rgba(124,92,255,.4));
  --gradient-coral:    linear-gradient(135deg, #ff6b7d 0%, #ffa178 100%);
  --gradient-violet:   linear-gradient(135deg, #7c5cff 0%, #b896ff 100%);
  --gradient-mint:     linear-gradient(135deg, #14c8a3 0%, #5eddc1 100%);
  --gradient-vibrant:  linear-gradient(135deg, #d4a72c 0%, #ff6b7d 55%, #7c5cff 100%);

  /* ─ Motion (Apple-like spring) ─ */
  --ease:           cubic-bezier(.22,.61,.36,1);
  --ease-out:       cubic-bezier(.16,1,.3,1);   /* spring-out */
  --ease-in-out:    cubic-bezier(.65,0,.35,1);
  --ease-bounce:    cubic-bezier(.34,1.56,.64,1); /* gentle bounce */

  /* ─ Font ─ */
  --font-sans:      'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', sans-serif;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL RESET + TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body, .dt-scope {
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.014em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "tnum";
}

/* 한국어 가독성: 헤딩 — 더 굵직, weight 차이 명확 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ink);
}

/* 다크 hero 배경 위의 헤딩은 부모 색(흰색) 유지 — 글로벌 ink 규칙 예외
   2026.05 추가: hero/cta/about 등 다크 그라데이션 영역 전수 예외 */
.hero h1, .hero h2, .hero h3,
.hero-card h1, .hero-card h2, .hero-card h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.sell-hero h1, .sell-hero h2, .sell-hero h3,
.dash-hero h1, .dash-hero h2, .dash-hero h3,
.cta-section h1, .cta-section h2, .cta-section h3,
.dt-on-dark h1, .dt-on-dark h2, .dt-on-dark h3 {
  color: inherit;
}

/* 다크 배경 영역 안의 모든 텍스트 기본 색 보호 — 검정 글씨 방지
   p, span, div 등 자식 텍스트가 부모(흰색)을 상속하도록 */
.dt-on-dark { color: #fff; }
.dt-on-dark p, .dt-on-dark .section-desc, .dt-on-dark .desc { color: rgba(255,255,255,.78); }
.dt-on-dark .section-eyebrow, .dt-on-dark .eyebrow { color: var(--accent, #d4a72c); }

/* 2026.05 round-2 — page-hero/sell-hero 가 light 배경으로 바뀜.
   dt-on-dark 클래스가 붙어 있더라도 light hero 안에서는 dark text 유지 */
.page-hero.dt-on-dark,
.sell-hero.dt-on-dark,
.dash-hero.dt-on-dark { color: var(--ink) !important; }
.page-hero.dt-on-dark p, .sell-hero.dt-on-dark p, .dash-hero.dt-on-dark p,
.page-hero.dt-on-dark .desc, .sell-hero.dt-on-dark .desc, .dash-hero.dt-on-dark .desc { color: var(--gray-1) !important; }

/* ════════════════════════════════════════════════════════════
   LUCIDE ICON BASELINE
   ════════════════════════════════════════════════════════════ */
.ico, i[data-lucide], svg.lucide {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  stroke-width: 2;
  color: currentColor;
  flex-shrink: 0;
}
/* 아이콘 크기 변형 */
.ico-sm { width: .9em; height: .9em; }
.ico-lg { width: 1.2em; height: 1.2em; }

/* 상태 점 (status dot — circle 대용) */
.dt-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-3);
  vertical-align: middle;
}
.dt-dot.success { background: var(--success); }
.dt-dot.warning { background: var(--warning); }
.dt-dot.danger  { background: var(--danger); }
.dt-dot.info    { background: var(--info); }
.dt-dot.muted   { background: var(--gray-3); }

/* ════════════════════════════════════════════════════════════
   UTILITY: BUTTONS (.dt-btn)
   기존 .btn 과 충돌 회피 위해 dt- 프리픽스 + body-level 보강
   ════════════════════════════════════════════════════════════ */
.dt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 42px; padding: 0 20px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background .22s var(--ease-out), border-color .22s var(--ease-out), color .22s var(--ease-out), box-shadow .25s var(--ease-out), transform .18s var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.dt-btn:hover { background: var(--primary-hover); box-shadow: var(--shadow-primary); transform: translateY(-1px); }
.dt-btn:active { transform: translateY(0) scale(.98); }
.dt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.dt-btn-secondary {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary-border);
}
.dt-btn-secondary:hover { background: var(--primary-soft); border-color: var(--primary); box-shadow: var(--shadow-sm); }

.dt-btn-ghost {
  background: transparent;
  color: var(--gray-1);
  border-color: transparent;
}
.dt-btn-ghost:hover { background: var(--surface-hover); color: var(--ink); box-shadow: none; transform: none; }

.dt-btn-danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger-soft);
}
.dt-btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.dt-btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(212,167,44,.18);
}
.dt-btn-accent:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent); }

.dt-btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.dt-btn-lg { height: 50px; padding: 0 28px; font-size: 15px; border-radius: var(--r-md); }
.dt-btn-block { width: 100%; }

/* ════════════════════════════════════════════════════════════
   UTILITY: CARD (.dt-card)
   ════════════════════════════════════════════════════════════ */
.dt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-subtle);
  transition: box-shadow .32s var(--ease-out), border-color .22s var(--ease-out), transform .32s var(--ease-out);
}
.dt-card-hoverable:hover {
  box-shadow: var(--shadow-elevated);
  border-color: var(--primary-border);
  transform: translateY(-3px);
}
.dt-card-flush { padding: 0; overflow: hidden; }
.dt-card-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dt-card-title {
  font-size: 16px; font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em;
}
.dt-card-body { padding: 20px 24px; }

/* ════════════════════════════════════════════════════════════
   UTILITY: INPUT (.dt-input)
   ════════════════════════════════════════════════════════════ */
.dt-input,
.dt-textarea,
.dt-select {
  display: block;
  width: 100%;
  height: 46px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out), background .2s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.dt-textarea { height: auto; min-height: 100px; resize: vertical; line-height: 1.6; }
.dt-input::placeholder, .dt-textarea::placeholder { color: var(--gray-3); }
.dt-input:hover, .dt-textarea:hover, .dt-select:hover { border-color: var(--border-strong); }
.dt-input:focus, .dt-textarea:focus, .dt-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(30,39,97,.10);
  background: var(--surface);
}
.dt-input.error, .dt-textarea.error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(240,78,78,.12); }
.dt-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.dt-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.dt-field { margin-bottom: 16px; }
.dt-field-hint { margin-top: 7px; font-size: 12.5px; color: var(--gray-2); }
.dt-field-error { margin-top: 7px; font-size: 12.5px; color: var(--danger); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   UTILITY: BADGE (.dt-badge)
   ════════════════════════════════════════════════════════════ */
.dt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700;
  line-height: 1.5;
  border: 1px solid transparent;
  background: var(--surface-hover);
  color: var(--gray-1);
  letter-spacing: 0.01em;
}
.dt-badge-primary { background: var(--primary-soft); color: var(--primary-text); border-color: var(--primary-border); }
.dt-badge-accent  { background: var(--accent-soft);  color: var(--accent-text);  border-color: #ecdfb0; }
.dt-badge-success { background: var(--success-soft); color: var(--mint-text);    border-color: #b8eed8; }
.dt-badge-warning { background: var(--warning-soft); color: #a06200;             border-color: #f0d28a; }
.dt-badge-danger  { background: var(--danger-soft);  color: var(--danger);       border-color: #f5c8c8; }
.dt-badge-info    { background: var(--info-soft);    color: var(--info);         border-color: #c5d8f7; }
.dt-badge-muted   { background: #f3f4f8;             color: #52525b;             border-color: #e6e7ed; }
.dt-badge-coral   { background: var(--coral-soft);   color: var(--coral-text);   border-color: #ffd0d6; }
.dt-badge-violet  { background: var(--violet-soft);  color: var(--violet-text);  border-color: #d8c5fc; }
.dt-badge-mint    { background: var(--mint-soft);    color: var(--mint-text);    border-color: #aae8d8; }

/* ════════════════════════════════════════════════════════════
   UTILITY: TABLE STRIPE / WRAP HELPERS
   ════════════════════════════════════════════════════════════ */
.dt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  max-width: 100%;
}
/* 모바일 스크롤 힌트 그라데이션 */
@media (max-width: 640px) {
  .dt-table-wrap {
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
      linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
      radial-gradient(ellipse at left,  rgba(0,0,0,.06), transparent 70%) left center / 10px 50% no-repeat,
      radial-gradient(ellipse at right, rgba(0,0,0,.06), transparent 70%) right center / 10px 50% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ════════════════════════════════════════════════════════════
   UTILITY: TEXT HELPERS
   ════════════════════════════════════════════════════════════ */
.dt-muted   { color: var(--gray-2); }
.dt-subtle  { color: var(--gray-3); }
.dt-strong  { font-weight: 700; color: var(--ink); }
.dt-eyebrow { font-size: 11px; font-weight: 700; color: var(--gray-2); letter-spacing: 0.08em; text-transform: uppercase; }

/* ════════════════════════════════════════════════════════════
   FOCUS / A11Y
   ════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ════════════════════════════════════════════════════════════
   SUBTLE LINK
   ════════════════════════════════════════════════════════════ */
.dt-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s var(--ease);
}
.dt-link:hover { border-bottom-color: var(--primary); }

/* ════════════════════════════════════════════════════════════
   MOBILE LEGIBILITY OVERRIDES
   • 너무 작은 폰트는 13.5px 이상으로
   • 한국어 letter-spacing 살짝 좁게
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body { font-size: 14px; }
}

/* iOS 자동확대 방지 (보조) */
@media (max-width: 768px) {
  .dt-input, .dt-select, .dt-textarea {
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════════════
   GLOBAL POLISH — apply to all .dt- scoped components
   기존 .btn / .a-btn 등은 영향 없음 (변수만 매핑)
   ════════════════════════════════════════════════════════════ */
/* 너무 작은 폰트 시각 보호 (12px 이하) — 보조 텍스트는 13px 이상으로 */
.help, .hint, .note, small.muted { font-size: 12.5px; }

/* 한국어 본문 가독 보조 — 너비가 너무 좁아지지 않도록 */
@media (min-width: 768px) {
  p, .p, .desc { max-width: 70ch; }
}

/* ════════════════════════════════════════════════════════════
   2026 TRENDY UPGRADES — 전역 미세 보정
   • 본문 약간 큼직 (14.5 → 15.5)
   • 헤딩 weight 800 → 900, 타이트한 letter-spacing
   • fade-in/stagger 진입 모션
   • 카드/버튼 호버 인터랙션 (translateY + soft shadow)
   • 코랄·머스타드 그라데이션 액센트
   ════════════════════════════════════════════════════════════ */

/* — 본문 폰트 크기 살짝 키움 (가독성 우선) — */
body {
  font-size: 15.5px;
  letter-spacing: -0.014em;
  line-height: 1.72;
}
@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.65; }
}

/* — 헤딩 더 임팩트 있게 (weight 차이 명확) — */
h1, .h1 { font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; }
h2, .h2 { font-weight: 900; letter-spacing: -0.03em; line-height: 1.2; }
h3, .h3 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.3; }
h4, .h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }

/* — 진입 페이드 (stagger 클래스 u1~u5는 style.css에 정의됨, 보조 키프레임) — */
@keyframes dt-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dt-fade-in-soft {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dt-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* — Skeleton (로딩 상태) — */
.dt-skeleton {
  background: linear-gradient(90deg, #f0ece4 0%, #f7f5ef 50%, #f0ece4 100%);
  background-size: 800px 100%;
  animation: dt-shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}

/* — 호버 카드 강화 (dt-card 기본 hover 톤 보정) — */
.dt-card { box-shadow: var(--shadow-subtle); }
.dt-card-hoverable:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-3px);
}

/* — Hero glass overlay (선택적) — */
.dt-glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.18);
}

/* — KPI 강조 (큰 숫자 + 작은 라벨) — */
.dt-kpi-n {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  font-feature-settings: "tnum";
}
.dt-kpi-l {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* — 그라데이션 텍스트 (CTA 강조용) — */
.dt-grad-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}

/* ════════════════════════════════════════════════════════════
   기존 사이트 컴포넌트 (.gp-card / .feat / .cat-card / .banner-card
   / .dash-hero / .dash-kpis / .order-card / .sell-card 등) — 2026 톤 보정
   클래스는 그대로 유지, 값만 풍부하게
   ════════════════════════════════════════════════════════════ */

/* dash-hero — LIGHT 그라데이션 (라일락→화이트→민트) + 컬러 글로우 */
.dash-hero {
  background: var(--gradient-hero) !important;
  color: var(--ink) !important;
  position: relative;
  border-bottom: 1px solid var(--border) !important;
}
.dash-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(212,167,44,.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(124,92,255,.10) 0%, transparent 60%);
}
.dash-hero-inner { position: relative; z-index: 2; }

/* dash-kpis — 옅은 카드 (light bg 위) */
.dash-kpis {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-subtle) !important;
}
.dk-n { font-size: 28px !important; letter-spacing: -0.045em !important; color: var(--primary) !important; }
.dk-l { color: var(--gray-1) !important; }

/* page-hero (myorders/seller-orders) — LIGHT + 라이트 컬러 글로우 */
.page-hero,
.sell-hero {
  background: var(--gradient-hero) !important;
  color: var(--ink) !important;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border) !important;
}
.page-hero::after,
.sell-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 90% 0%, rgba(212,167,44,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 110%, rgba(124,92,255,.10) 0%, transparent 60%);
}
.page-hero > *,
.sell-hero > * { position: relative; z-index: 1; }

/* 헤더 텍스트 색 — 밝은 hero 위에 ink 컬러 */
.dash-hero h1, .dash-hero h2, .dash-hero h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.sell-hero h1, .sell-hero h2, .sell-hero h3 { color: var(--ink) !important; }
.dash-welcome, .dash-welcome em { color: var(--primary) !important; }
.page-hero-desc, .sell-hero-desc, .dash-company { color: var(--gray-1) !important; }
/* page-hero-count chip — light 위에 진한 chip */
.page-hero-count {
  background: rgba(30,39,97,.06) !important;
  border-color: rgba(30,39,97,.14) !important;
  color: var(--primary) !important;
}
/* hero 안의 .ico (페이지 헤더) — accent 그대로 */
.page-hero h1 .ico, .sell-hero h1 .ico { color: var(--accent) !important; }

/* gp-card (대시보드 판매 카드) — 더 부드러운 모서리 + soft shadow + 강한 호버 */
.gp-card {
  border-radius: 18px !important;
  border-color: var(--border-soft, #ecebe5) !important;
  box-shadow: var(--shadow-subtle) !important;
  padding: 24px 22px !important;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s !important;
}
.gp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-floating) !important;
  border-color: rgba(30,39,97,.18) !important;
}
.gp-name { font-size: 16px !important; font-weight: 800 !important; }

/* feat / cat-card / sell-card — 따뜻한 호버 톤 */
.feat, .cat-card {
  border-radius: 18px !important;
  box-shadow: var(--shadow-subtle) !important;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s !important;
}
.feat:hover, .cat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-elevated) !important;
}

/* sell-card — 더 부드러운 모서리, soft shadow, 살짝 떠오름 */
.sell-card {
  border-radius: 16px !important;
  box-shadow: var(--shadow-subtle) !important;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out) !important;
}
.sell-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-floating) !important;
}

/* product-card (index 페이지 상품) */
.product-card {
  border-radius: 18px !important;
  box-shadow: var(--shadow-subtle) !important;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out) !important;
}
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-floating) !important;
}

/* order-card — 살짝 떠오르는 hover */
.order-card {
  border-radius: 16px !important;
  box-shadow: var(--shadow-subtle) !important;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s !important;
}
.order-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-elevated) !important;
}

/* banner-card — 그라데이션 오버레이 깊이감 + 호버 */
.banner-card {
  border-radius: 18px !important;
  box-shadow: var(--shadow-subtle) !important;
}
.banner-card:hover {
  box-shadow: var(--shadow-floating) !important;
}

/* btn — 2026 살짝 더 부드럽고 묵직한 그림자 */
.btn-gold, .btn-ink {
  transition: background .18s var(--ease-out), box-shadow .25s var(--ease-out), transform .15s var(--ease-out) !important;
}
.btn-gold:hover, .btn-ink:hover {
  box-shadow: var(--shadow-primary) !important;
  transform: translateY(-1px);
}

/* btn-xl — 2026 hero CTA 살짝 묵직 */
.btn-xl {
  padding: 15px 36px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
}

/* Section 헤딩 위계 강화 */
.section-title { font-weight: 900 !important; letter-spacing: -0.035em !important; }
.section-eyebrow { color: var(--accent, #d4a72c) !important; }

/* ds-title (대시보드 섹션 타이틀) — 약간 더 큼직 */
.ds-title { font-size: 24px !important; font-weight: 900 !important; letter-spacing: -0.03em !important; }
.ds-eyebrow { color: var(--accent, #d4a72c) !important; }

/* dash-eyebrow (hero 안의 eyebrow) — 머스타드로 도드라지게 */
.dash-eyebrow,
.page-hero-eyebrow,
.sell-hero-eyebrow {
  color: var(--accent, #d4a72c) !important;
  font-weight: 800 !important;
}

/* dash-welcome (대시보드 환영 문구) — 살짝 더 임팩트 */
.dash-welcome { font-weight: 900 !important; letter-spacing: -0.045em !important; }
.dash-welcome em {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
  font-style: normal;
}

/* nav-logo ring — 그라데이션 살짝 */
.nav-logo .ring {
  background: var(--gradient-primary) !important;
  box-shadow: 0 4px 12px rgba(30,39,97,.22);
}

/* 카드 stagger 모션 — 다수 카드에 적용 */
.gp-grid > *, .feats > *, .cats > *, .sell-grid > *, .products-grid > * {
  animation: dt-fade-in .5s var(--ease-out) both;
}
.gp-grid > *:nth-child(1), .feats > *:nth-child(1), .cats > *:nth-child(1), .sell-grid > *:nth-child(1), .products-grid > *:nth-child(1) { animation-delay: .04s; }
.gp-grid > *:nth-child(2), .feats > *:nth-child(2), .cats > *:nth-child(2), .sell-grid > *:nth-child(2), .products-grid > *:nth-child(2) { animation-delay: .08s; }
.gp-grid > *:nth-child(3), .feats > *:nth-child(3), .cats > *:nth-child(3), .sell-grid > *:nth-child(3), .products-grid > *:nth-child(3) { animation-delay: .12s; }
.gp-grid > *:nth-child(4), .feats > *:nth-child(4), .cats > *:nth-child(4), .sell-grid > *:nth-child(4), .products-grid > *:nth-child(4) { animation-delay: .16s; }
.gp-grid > *:nth-child(5), .feats > *:nth-child(5), .cats > *:nth-child(5), .sell-grid > *:nth-child(5), .products-grid > *:nth-child(5) { animation-delay: .20s; }
.gp-grid > *:nth-child(6), .feats > *:nth-child(6), .cats > *:nth-child(6), .sell-grid > *:nth-child(6), .products-grid > *:nth-child(6) { animation-delay: .24s; }

/* 모션 비선호 사용자 — 진입 모션 끔 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* 모바일 — 카드 패딩 너무 좁아지지 않게 살짝 보호 */
@media (max-width: 640px) {
  .gp-card { padding: 20px 18px !important; }
  .order-card { padding: 16px !important; }
}

/* ════════════════════════════════════════════════════════════
   2026.05 — 마이크로 인터랙션 + 트렌드 다듬기
   • 본문 line-height 1.7 (한국어 가독성)
   • 카드 hover transform + 미세 brightness
   • Apple-like easing 일관성
   • Bento grid 헬퍼
   • Subtle noise texture (다크 영역)
   • Focus ring gradient
   ════════════════════════════════════════════════════════════ */

/* 본문 줄간격 살짝 더 */
body, .dt-scope {
  line-height: 1.7;
}

/* 카드/버튼 hover 시 미세한 깊이감 + brightness */
.gp-card:hover, .feat:hover, .cat-card:hover, .product-card:hover, .sell-card:hover, .order-card:hover {
  filter: brightness(1.02);
}

/* 주요 CTA 버튼 hover 시 살짝 scale (magnetic feel) */
.btn-xl:hover, .btn-lg:hover, .dt-btn-lg:hover {
  transform: translateY(-2px) scale(1.015);
}

/* 입력 focus 시 그라데이션 ring (subtle) */
.input:focus, .dt-input:focus, .dt-textarea:focus, .dt-select:focus {
  box-shadow:
    0 0 0 3px rgba(30,39,97,.12),
    0 0 0 4px rgba(212,167,44,.08) !important;
}

/* 배지 hover 시 살짝 회전 + lift */
.dt-badge { transition: transform .2s var(--ease-out); }
.dt-badge:hover { transform: rotate(-1.5deg) translateY(-1px); }

/* ─ Noise texture utility (다크 영역에 깊이감 부여) ─
   기존 배경을 보존하면서 자식 ::after로 노이즈만 덧입힘.
   ::before/::after를 이미 사용하는 hero에는 inline svg를 첫 자식으로 inject 대신
   CSS attr selector로 보조 — 단순화: ::before가 비어있는 경우만 활성.
   대신 hero/dash-hero/page-hero/sell-hero/cta-section은 별도 처리 */
.dt-noise { position: relative; isolation: isolate; }

/* hero/cta 등 이미 ::before/::after가 있는 컨테이너 — 노이즈를 background-image로 살짝 위에 덧입힘 */
.dt-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* hero 가족의 기존 ::after(라이트 글로우)와 충돌 — 노이즈는 light 배경에선 빼고 글로우만 */
.hero.dt-noise::after,
.dash-hero.dt-noise::after,
.page-hero.dt-noise::after,
.sell-hero.dt-noise::after,
.cta-section.dt-noise::after {
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(212,167,44,.20) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 10% 90%, rgba(124,92,255,.10) 0%, transparent 60%);
  mix-blend-mode: normal;
  opacity: 1;
}
/* dt-noise 자식들은 노이즈 위로 — 단, hero-slides는 배경 레이어 유지 */
.dt-noise > *:not(.hero-slides):not(.hero-slide) { position: relative; z-index: 3; }
.dt-noise > .hero-slides { position: absolute; inset: 0; z-index: 0; }

/* ─ Bento grid (대시보드용 비대칭 배치) ─ */
.dt-bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: minmax(140px, auto);
  gap: 16px;
}
.dt-bento > .bento-lg { grid-column: span 2; grid-row: span 2; }
.dt-bento > .bento-md { grid-row: span 2; }
@media (max-width: 960px) {
  .dt-bento { grid-template-columns: 1fr 1fr; }
  .dt-bento > .bento-lg { grid-column: span 2; grid-row: auto; }
  .dt-bento > .bento-md { grid-row: auto; }
}
@media (max-width: 640px) {
  .dt-bento { grid-template-columns: 1fr; }
  .dt-bento > .bento-lg { grid-column: auto; }
}

/* ─ Glass card (강조 카드용) ─ */
.dt-glass-card {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-elevated);
}

/* ─ KPI number ticker (CSS 카운트업 — 진입 시 부드러운 증가감) ─ */
@keyframes dt-ticker {
  from { opacity: 0; transform: translateY(8px) scale(.96); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.dk-n, .dt-kpi-n, .stat-n, .about-stat-value {
  animation: dt-ticker .6s var(--ease-out) both;
  animation-delay: .15s;
}

/* ─ Section heading 카운터 보조 (이미 위에 정의된 section-title 보완) ─ */
.section-eyebrow { font-weight: 800 !important; }

/* ─ 다크 hero 영역 — 매우 옅은 격자 + 노이즈 (이미 hero에 있지만 강화) ─ */
.dash-hero, .page-hero, .sell-hero, .cta-section {
  isolation: isolate;
}

/* ─ 사장님 피드백: 옅은 회색 보호 (#aaa → #777로 한 단계 진하게) ─ */
.product-deadline, .sell-card-date { color: var(--gray-1, #666) !important; }

/* ─ 모션 강화 — 모든 카드 호버에 일관된 easing ─ */
.cat-card, .feat, .gp-card, .product-card, .sell-card, .order-card, .banner-card, .mp-card {
  transition: transform .36s var(--ease-out),
              box-shadow .36s var(--ease-out),
              border-color .22s var(--ease-out),
              filter .25s var(--ease-out) !important;
}

/* ════════════════════════════════════════════════════════════
   2026.11 — Modern Korean Commerce Refresh
   • Vivid accent (coral/violet/mint) — 카테고리·배지·CTA 톤업
   • 카드 hover lift 더 자연스럽게
   • 입력 focus brand-color ring + accent halo
   • Section heading 위계 강화 (eyebrow → accent)
   • Footer 톤 차분 + 새 surface
   • Pill 배지 + 액센트 그라데이션
   ════════════════════════════════════════════════════════════ */

/* — page-hero/sell-hero/dash-hero 강화: light glow (라일락+머스타드+민트) — */
.dash-hero::after,
.page-hero::after,
.sell-hero::after {
  background:
    radial-gradient(ellipse 55% 50% at 85% 12%, rgba(212,167,44,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 8% 92%, rgba(124,92,255,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 45% at 50% 50%, rgba(20,200,163,.08) 0%, transparent 60%) !important;
}

/* — 새 액센트 솔리드 버튼 (coral/violet/mint) 변형 — */
.dt-btn-coral { background: var(--coral); color: #fff; box-shadow: 0 2px 6px rgba(255,107,125,.20); }
.dt-btn-coral:hover { background: #ec5466; box-shadow: var(--shadow-coral); }
.dt-btn-violet { background: var(--violet); color: #fff; box-shadow: 0 2px 6px rgba(124,92,255,.20); }
.dt-btn-violet:hover { background: var(--violet-hover); box-shadow: var(--shadow-violet); }
.dt-btn-mint { background: var(--mint); color: #fff; box-shadow: 0 2px 6px rgba(20,200,163,.20); }
.dt-btn-mint:hover { background: #0db28d; box-shadow: 0 8px 22px -6px rgba(20,200,163,.36); }

/* — Gradient text helper (제목 강조에 사용 가능) — */
.dt-grad-text-vibrant {
  background: var(--gradient-vibrant);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}
.dt-grad-text-coral {
  background: var(--gradient-coral);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}
.dt-grad-text-violet {
  background: var(--gradient-violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}

/* — Section eyebrow — 머스타드 액센트로 도드라지게 — */
.dt-section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.dt-section-eyebrow::before {
  content: '';
  width: 24px; height: 2px; background: var(--accent);
  border-radius: 2px;
}

/* — Footer surface 살짝 — */
.footer { background: var(--bg-page) !important; border-top-color: var(--border) !important; }

/* — nav-actions 버튼 간격 살짝 더 — */
.nav-actions { gap: 10px !important; }

/* — cat-card / cat-tile checked 상태 (signup에서 사용) — accent border + soft gradient — */
.cat-label input:checked + .cat-tile {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 6px 16px -4px rgba(30,39,97,.30) !important;
  transform: translateY(-1px);
}

/* — link hover underline 색 brand — */
a:hover { transition: color .18s var(--ease-out); }

/* — pill button (rounded full) — clean look — */
.dt-btn[class*="dt-btn-"]:not(.dt-btn-sm):not(.dt-btn-lg) { border-radius: var(--r-md); }

/* — Subtle gradient border (액센트 카드 강조용) — */
.dt-card-accent-border {
  position: relative;
  background: var(--surface);
  border: 1px solid transparent;
  background-clip: padding-box;
}
.dt-card-accent-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--gradient-border);
  border-radius: inherit;
}

/* — 헤딩 더 큼직 (기존 28-32px → 32-40px) — */
.dash-welcome { font-size: clamp(30px, 4.4vw, 48px) !important; }
.section-title { font-size: clamp(28px, 4vw, 44px) !important; }

/* — 본문 max-width 가독성 보호 (한국어 70ch 자연스럽게) — */
.dt-scope p, .dt-scope .desc { line-height: 1.75; }

/* — Input wrapper: 패스워드/이메일 verify 버튼 정렬 (input-wrap 안 .input-eye, .input-verify-btn) — */
.input-wrap .input { font-size: 14.5px; }

/* — checkbox/radio 강조 — */
.check-box:checked { box-shadow: 0 0 0 3px rgba(30,39,97,.10); }

/* — scroll-margin (anchor link 가독) — */
section[id], h2[id], h3[id] { scroll-margin-top: 88px; }

/* — Sticky CTA 모바일 안전: bottom safe-area inset — */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .toast { bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* — Modal backdrop 더 modern blur — */
.modal-backdrop, .modal-overlay {
  background: rgba(20,22,30,.55) !important;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

/* — Selection color brand — */
::selection { background: rgba(30,39,97,.14); color: var(--primary); }
::-moz-selection { background: rgba(30,39,97,.14); color: var(--primary); }

/* — Skeleton 색 cool 톤 보정 — */
.dt-skeleton {
  background: linear-gradient(90deg, #eef0f5 0%, #f6f7fb 50%, #eef0f5 100%);
  background-size: 800px 100%;
}

/* — Scrollbar 살짝 — */
::-webkit-scrollbar-thumb { background: var(--gray-pale, #edeff4) !important; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong, #d2d6e0) !important; }