/* ════════════════════════════════════════════════════════════════════════
 * engineui.css — MOSO 엔진 UI 공유 디자인 토큰 (100% 원본 · 토스급)
 *
 *   moso-loading.js · moso-pricepulse.js 가 함께 쓰는 단일 토큰원천.
 *   ★카피 0 — 토스/마리트/당근/배민 어떤 마크업·에셋도 안 봄. 결만 계승.
 *   MOSO 네이비(#1d3557) + 의미색 6세트(초록·주황·청록·보라·인디고·코랄).
 *   상태닷 · stroke-2 아이콘 베이스 · 이징 변수 · reduced-motion 정지.
 *
 *   <link rel="stylesheet" href="...moso-shared/web/engineui.css">  한 줄.
 *   (JS 라이브러리는 이 토큰이 없어도 폴백값으로 graceful 동작 — 깨짐 0)
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 브랜드 코어 ─────────────────────────────────────────────────────── */
  --eu-navy:        #1d3557;   /* MOSO 네이비(중심 노드·강조) */
  --eu-navy-deep:   #13233b;   /* 더 깊은 네이비(토스트·통화 배경 결) */
  --eu-navy-soft:   #457b9d;   /* 보조 네이비(관측·중립 상태) */
  --eu-powder:      #a8dadc;   /* 파우더(스캔 궤도·은은한 면) */

  /* ── 의미색 6세트(상태닷·배지) : 색=보조, 형태가 본체 ─────────────────── */
  --eu-green:       #06d6a0;   /* optimal/RAISE  — 좋음·상승 */
  --eu-green-bg:    #e3faf3;
  --eu-amber:       #ffd166;   /* DROP           — 주의·내림 */
  --eu-amber-ink:   #b07d00;   /* 노랑 위 텍스트 대비용 */
  --eu-amber-bg:    #fff6e0;
  --eu-teal:        #4cc9f0;   /* up(수요강세)/EXPLORE — 청록 */
  --eu-teal-bg:     #e4f7fd;
  --eu-violet:      #7b6cf6;   /* competitor     — 경쟁사 레이더 */
  --eu-violet-bg:   #efecfe;
  --eu-indigo:      #5a67d8;   /* longstay       — 장박 유도 */
  --eu-indigo-bg:   #eaecfb;
  --eu-coral:       #ef476f;   /* rescue/경고    — 막판 구제 */
  --eu-coral-bg:    #fde7ec;
  --eu-undercut:    #ff7b54;   /* undercut 오버레이 배지 */
  --eu-undercut-bg: #fff0ea;

  /* ── 중립·텍스트(토스급 위계) ─────────────────────────────────────────── */
  --eu-ink:    #13233b;   /* 본문 강(제목) */
  --eu-ink2:   #27384a;   /* 본문 */
  --eu-mut:    #7d8da0;   /* 설명·캡션 */
  --eu-mut2:   #9aa8b8;   /* 더 흐린 보조 */
  --eu-line:   #eaeff4;   /* 경계선 */
  --eu-line2:  #e0e7ee;   /* 입력·칩 경계 */
  --eu-paper:  #ffffff;   /* 카드 면 */
  --eu-bg:     #f4f6f9;   /* 화면 배경 */
  --eu-skel:   #e9eef4;   /* 스켈레톤 베이스 */
  --eu-skel-hi:#f4f7fb;   /* 스켈레톤 하이라이트(shimmer) */
  --eu-scrim:  rgba(15,23,42,.45);  /* 오버레이 딤 */

  /* ── 간격(8 그리드) ──────────────────────────────────────────────────── */
  --eu-sp-1: 4px;  --eu-sp-2: 8px;  --eu-sp-3: 12px;
  --eu-sp-4: 16px; --eu-sp-5: 20px; --eu-sp-6: 24px; --eu-sp-8: 32px;

  /* ── 라운드 ──────────────────────────────────────────────────────────── */
  --eu-r-1: 8px;  --eu-r-2: 12px; --eu-r-3: 15px;
  --eu-r-4: 18px; --eu-r-5: 22px; --eu-r-pill: 999px;

  /* ── 그림자 ──────────────────────────────────────────────────────────── */
  --eu-sh-1: 0 2px 8px rgba(19,35,59,.08);
  --eu-sh-2: 0 8px 24px rgba(19,35,59,.12);
  --eu-sh-3: 0 18px 50px rgba(19,35,59,.22);

  /* ── 이징(토스를 안 베낀 우리 곡선) ──────────────────────────────────── */
  --eu-ease:        cubic-bezier(.4, 0, .2, 1);     /* 표준 등장·소멸 */
  --eu-ease-out:    cubic-bezier(.22, 1, .36, 1);   /* 부드러운 감속 */
  --eu-ease-spring: cubic-bezier(.34, 1.56, .64, 1);/* 탄성 팝 */
  --eu-ease-inout:  cubic-bezier(.65, 0, .35, 1);   /* 드로우·궤도 */
  --eu-dur-1: .14s;  --eu-dur-2: .22s;  --eu-dur-3: .32s;  --eu-dur-orbit: 3.2s;

  /* ── 타이포 ──────────────────────────────────────────────────────────── */
  --eu-font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', sans-serif;
  --eu-num:  'Pretendard', ui-monospace, system-ui, sans-serif; /* tabular 숫자용 */

  /* ── 상태닷 기본(개별 색은 .is-* 가 덮음) ────────────────────────────── */
  --eu-dot-size: 8px;
}

/* ── 상태닷 : 8px 점 1개 + 라벨 텍스트 동반(색맹 대비 형태/텍스트 병기) ──── */
.eu-dot {
  display: inline-block;
  width: var(--eu-dot-size); height: var(--eu-dot-size);
  border-radius: 50%;
  background: var(--eu-mut2);
  flex: none;
  vertical-align: middle;
}
.eu-dot.is-green  { background: var(--eu-green); }
.eu-dot.is-amber  { background: var(--eu-amber); }
.eu-dot.is-teal   { background: var(--eu-teal); }
.eu-dot.is-violet { background: var(--eu-violet); }
.eu-dot.is-indigo { background: var(--eu-indigo); }
.eu-dot.is-coral  { background: var(--eu-coral); }
.eu-dot.is-navy   { background: var(--eu-navy-soft); }

/* 점멸은 '실시간/관측중'에만(과용 시 불안 → 의도적으로 한 곳만) */
.eu-dot.pulse { position: relative; }
.eu-dot.pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: euDotPulse 1.8s var(--eu-ease-out) infinite;
}
@keyframes euDotPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ── stroke-2 아이콘 베이스(전 엔진 아이콘 통일 골격) ────────────────────── */
.eu-ic {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 의미색 유틸(텍스트/배경) ─────────────────────────────────────────── */
.eu-fg-green  { color: var(--eu-green); }
.eu-fg-amber  { color: var(--eu-amber-ink); }
.eu-fg-teal   { color: var(--eu-teal); }
.eu-fg-violet { color: var(--eu-violet); }
.eu-fg-indigo { color: var(--eu-indigo); }
.eu-fg-coral  { color: var(--eu-coral); }
.eu-fg-navy   { color: var(--eu-navy); }

/* tabular 숫자(가격·델타 점프 방지) */
.eu-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: -.01em; }

/* ── 스켈레톤 베이스(레이아웃 보존 → CLS 0) ──────────────────────────────── */
.eu-skel {
  position: relative; overflow: hidden;
  background: var(--eu-skel);
  border-radius: var(--eu-r-1);
}
.eu-skel::after {
  content: ''; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--eu-skel-hi), transparent);
  animation: euShimmer 1.4s var(--eu-ease-inout) infinite;
}
@keyframes euShimmer { 100% { transform: translateX(100%); } }

/* ── reduced-motion : 모든 모션 정지/페이드 대체(절대원칙) ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .eu-dot.pulse::after { animation: none; opacity: 0; }
  .eu-skel::after { animation: none; }
  .eu-skel { background: var(--eu-skel-hi); }
}