/* ═══════════════════════════════════════════════════════════════
   EOND UI v0.4 — 이온디 디자인 시스템 (eondui.css)
   버전 기록: /changelog 페이지 및 theme.json 참조
   기반 원칙: el_imin 디자인 언어(뉴트럴 위계·타이포 리듬·관용구)가 뼈대.
   통합 계보: el_axai(브랜드 컬러·다크 섹션·리빌 모션)
            + el_main(커머스 컴포넌트: 상태 배지·가격·썸네일·탭 카운트)
   사용: <link rel="stylesheet" href="/static/el_design/eondui.css">
   규칙: 모든 클래스는 .e- 접두사. 토큰은 --e-* CSS 변수.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand */
  --e-accent:        #FF6B35;  /* EOND 오렌지 — 주 액션·포인트 */
  --e-accent-strong: #E85A26;  /* hover/active */
  --e-accent-soft:   #FFF0EA;  /* 연한 배경 */
  --e-night:         #0B1120;  /* 딥네이비 — 다크 섹션·강조 배경 */
  --e-night-soft:    #1E2942;  /* 다크 위 카드 */

  /* Neutrals (el_imin 계승) */
  --e-ink:       #212121;  /* 본문 텍스트 */
  --e-muted:     #727272;  /* 보조 텍스트 */
  --e-faint:     #a8a8a8;  /* 흐린 텍스트·플레이스홀더 */
  --e-line:      #EBEBEB;  /* 구획선 */
  --e-border:    #dbdbdb;  /* 인풋·버튼 보더 */
  --e-paper:     #f8f8f8;  /* 섹션·카드 배경 */
  --e-white:     #ffffff;

  /* Semantic */
  --e-danger:    #FA2828;  /* el_imin point-color 계승 */
  --e-danger-soft: #FFEBEB;
  --e-success:   #12B76A;
  --e-success-soft: #E7F8F0;
  --e-warning:   #F79009;
  --e-warning-soft: #FEF3E2;
  --e-info:      #2563EB;
  --e-info-soft: #EBF1FE;

  /* 텍스트 계열 별칭 — 기본은 브랜드 원색 그대로(디자인 우선, 사용자 결정).
     KWCAG(AA) 대비가 필요한 프로젝트는 html에 data-a11y="strict" 하나로 전환 */
  --e-on-accent:   #ffffff;
  --e-accent-ink:  var(--e-accent);
  --e-success-ink: var(--e-success);
  --e-danger-strong: var(--e-danger);
  --e-warning-ink: var(--e-warning);

  /* Card meta states (el_main 계승 — 배지·태그 전용) */
  --e-state-hot:  #DC2626;
  --e-state-new:  #6D28D9;
  --e-state-best: #F79009;

  /* Typography */
  --e-font-sans: 'Pretendard', system-ui, -apple-system, sans-serif;
  --e-font-display: 'Outfit', 'Pretendard', system-ui, sans-serif;
  --e-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --e-text-hero: clamp(40px, 5vw, 64px);  /* 반응형 히어로 (el_main 계승) */
  --e-text-display: 40px;  /* 히어로 */
  --e-text-h1: 32px;
  --e-text-h2: 26px;
  --e-text-h3: 20px;
  --e-text-lg: 18px;
  --e-text-md: 15px;   /* 본문 기본 */
  --e-text-sm: 13px;
  --e-text-xs: 12px;
  --e-text-2xs: 11px;  /* 오버라인·태그 */

  /* Spacing (4px 베이스) */
  --e-sp-1: 4px;  --e-sp-2: 8px;   --e-sp-3: 12px; --e-sp-4: 16px;
  --e-sp-5: 20px; --e-sp-6: 24px;  --e-sp-8: 32px; --e-sp-10: 40px;
  --e-sp-12: 48px; --e-sp-16: 64px; --e-sp-20: 80px;

  /* Radius (el_imin: 4px 기본 / 10px 카드. 3xl·hero는 el_main CTA 관용구 승격) */
  --e-radius-sm: 4px;
  --e-radius: 8px;
  --e-radius-lg: 10px;
  --e-radius-xl: 16px;
  --e-radius-2xl: 24px;
  --e-radius-3xl: 32px;   /* 큰 인터랙션 카드 */
  --e-radius-hero: 40px;  /* CTA 박스·히어로 패널 (rounded-[2.5rem] 관용구) */
  --e-radius-full: 9999px;

  /* Shadow (el_imin 시그니처: sm=2px 2px 4px, md=이중 레이어 소프트 섀도우) */
  --e-shadow-sm: 2px 2px 4px rgba(0, 0, 0, 0.05);
  --e-shadow-md: 0 6px 12px -6px rgba(24, 39, 75, 0.12), 0 8px 24px -4px rgba(24, 39, 75, 0.08);
  --e-shadow-lg: 0 12px 32px rgba(11, 17, 32, 0.10);
  --e-shadow-accent: 0 8px 24px rgba(255, 107, 53, 0.18);
  --e-shadow-focus: 0 0 0 3px rgba(255, 107, 53, 0.18);  /* 포커스 링 (el_main 계승) */

  /* Motion */
  --e-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --e-dur-fast: 0.15s;
  --e-dur: 0.25s;
  --e-dur-slow: 0.35s;

  /* Layout */
  --e-skeleton-hi: #efefef;  /* 스켈레톤 하이라이트 */
  --e-inner: 1200px;   /* el_imin $inner-width */
  --e-content: 980px;  /* el_imin $content-width */

  /* Z-index scale */
  --e-z-overlay: 90;
  --e-z-modal: 100;
  --e-z-toast: 110;
  --e-z-tooltip: 120;
}

/* ── 1.5 다크 모드 (el_imin_ui의 변수 스왑 구조 계승) ──────────
   html 또는 임의 래퍼에 data-theme="dark" 만 붙이면 토큰이 전환된다.
   컴포넌트는 전부 토큰 참조라 추가 작업 불필요. accent는 유지.
   톤: 남색이 아닌 웜 블랙(흙빛·엄버 계열) — 오렌지 브랜드와 같은 온도. */
[data-theme="dark"] {
  /* 클로드(claude.ai) 다크 팔레트 이식 — 웜 그레이·아이보리 체계 */
  --e-white:  #262624;   /* 기본 배경 (claude 메인 캔버스) */
  --e-paper:  #30302E;   /* 카드·입력 표면 (claude 패널) */
  --e-ink:    #F5F4EF;   /* 본문 — 웜 아이보리 */
  --e-muted:  #B8B5AC;   /* 보조 텍스트 */
  --e-faint:  #838076;   /* 흐림·플레이스홀더 */
  --e-line:   #3A3833;   /* 구획선 */
  --e-border: #4A4741;   /* 인풋·버튼 보더 */
  --e-night:  #1F1E1D;   /* 더 깊은 섹션 (claude 사이드바) */
  --e-night-soft: #383632;
  --e-accent-soft:  #3E2A1D;
  --e-danger-soft:  #3E211D;
  --e-success-soft: #22301F;
  --e-warning-soft: #3A2C14;
  --e-info-soft:    #232B36;
  --e-skeleton-hi: #3A3833;
}

/* ── 1.7 접근성 엄격 모드 (KWCAG/공공기관) ─────────────────────
   <html data-a11y="strict"> 하나로 주황 버튼이 딥 오렌지로 전환되어
   흰 글자 대비 4.7:1(AA)을 충족한다. 나머지는 이미 AA 준수. */
[data-a11y="strict"] {
  --e-accent: #CC4708;          /* 흰 글자 4.7:1 */
  --e-accent-strong: #AD3B05;
  --e-accent-ink: #C2410C;      /* 밝은 배경 위 오렌지 텍스트 4.6:1 */
  --e-success-ink: #0B7A45;
  --e-danger-strong: #D31212;   /* 오류 텍스트·위험 버튼 5.4:1 */
  --e-warning-ink: #92400E;
  --e-faint: #757575;           /* 캡션류 4.6:1 */
  --e-shadow-accent: 0 8px 24px rgba(204, 71, 8, 0.22);
}
[data-theme="dark"][data-a11y="strict"], [data-a11y="strict"] [data-theme="dark"] {
  --e-accent: #FF6B35;          /* 다크 배경에선 원색이 이미 6:1 */
  --e-accent-strong: #E85A26;
}

/* ── 2. Typography helpers ────────────────────────────────────── */
.e-display { font-family: var(--e-font-display); font-size: var(--e-text-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--e-ink); }
.e-h1 { font-size: var(--e-text-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--e-ink); }
.e-h2 { font-size: var(--e-text-h2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--e-ink); }
.e-h3 { font-size: var(--e-text-h3); font-weight: 700; line-height: 1.4; color: var(--e-ink); }
.e-body-lg { font-size: var(--e-text-lg); line-height: 1.65; color: var(--e-ink); }
.e-body { font-size: var(--e-text-md); line-height: 1.65; color: var(--e-ink); }
.e-body-sm { font-size: var(--e-text-sm); line-height: 1.6; color: var(--e-muted); }
.e-caption { font-size: var(--e-text-xs); line-height: 1.5; color: var(--e-faint); }
/* 섹션 오버라인 (el_axai 시그니처) */
.e-overline {
  font-family: var(--e-font-display);
  font-size: var(--e-text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--e-accent-ink);
}
.e-mono { font-family: var(--e-font-mono); }

/* ── 3. Button ────────────────────────────────────────────────── */
.e-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-sp-2);
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--e-radius);
  font-family: var(--e-font-sans);
  font-size: var(--e-text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--e-ink);
  background: var(--e-white);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--e-dur-fast) ease, border-color var(--e-dur-fast) ease,
              color var(--e-dur-fast) ease, transform var(--e-dur-fast) ease,
              box-shadow var(--e-dur-fast) ease;
}
.e-btn:hover { transform: translateY(-1px); }
.e-btn:active { transform: translateY(0); }
.e-btn:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; }
.e-btn:disabled, .e-btn[aria-disabled="true"] {
  opacity: 0.45; pointer-events: none;
}

.e-btn-primary { background: var(--e-accent); color: var(--e-on-accent); }
.e-btn-primary:hover { background: var(--e-accent-strong); box-shadow: var(--e-shadow-accent); }
.e-btn-dark { background: var(--e-night); color: #fff; }
.e-btn-dark:hover { background: #1a2440; }
.e-btn-outline { border-color: var(--e-border); background: var(--e-white); }
.e-btn-outline:hover { border-color: var(--e-ink); }
.e-btn-ghost { background: transparent; color: var(--e-muted); }
.e-btn-ghost:hover { background: var(--e-paper); color: var(--e-ink); }
.e-btn-danger { background: var(--e-danger-strong); color: #fff; }
.e-btn-danger:hover { filter: brightness(0.92); }

/* 크기 */
.e-btn-sm { padding: 6px 12px; font-size: var(--e-text-xs); border-radius: var(--e-radius-sm); }
.e-btn-lg { padding: 14px 28px; font-size: var(--e-text-md); border-radius: var(--e-radius-lg); }
/* 형태 */
.e-btn-pill { border-radius: var(--e-radius-full); }
.e-btn-block { display: flex; width: 100%; }

/* ── 4. Badge ─────────────────────────────────────────────────── */
.e-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--e-radius-full);
  font-size: var(--e-text-2xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.5;
  background: var(--e-paper);
  color: var(--e-muted);
}
.e-badge-accent { background: var(--e-accent-soft); color: var(--e-accent-ink); }
.e-badge-dark { background: var(--e-night); color: #fff; }
.e-badge-success { background: var(--e-success-soft); color: var(--e-success-ink); }
.e-badge-danger { background: var(--e-danger-soft); color: var(--e-danger-strong); }
.e-badge-warning { background: var(--e-warning-soft); color: var(--e-warning-ink); }
.e-badge-info { background: var(--e-info-soft); color: var(--e-info); }
.e-badge-outline { background: transparent; border: 1px solid var(--e-border); }
/* 상품 상태 배지 (el_main 계승 — 마켓·커머스 전용, mono 대문자) */
.e-badge-hot, .e-badge-new, .e-badge-best, .e-badge-free, .e-badge-sale {
  font-family: var(--e-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--e-radius-sm);
}
.e-badge-source {  /* 썸네일 위 오버레이 배지 (반투명 화이트 + blur) */
  background: rgba(255, 255, 255, 0.92);
  color: var(--e-ink);
  backdrop-filter: blur(4px);
  font-family: var(--e-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--e-radius-sm);
}
.e-badge-hot  { background: var(--e-state-hot); color: #fff; }
.e-badge-new  { background: var(--e-state-new); color: #fff; }
.e-badge-best { background: var(--e-state-best); color: #fff; }
.e-badge-free { background: var(--e-success); color: #fff; }
.e-badge-sale { background: var(--e-danger-soft); color: var(--e-danger); }

/* ── 5. Card ──────────────────────────────────────────────────── */
.e-card {
  display: block;
  padding: var(--e-sp-6);
  background: var(--e-white);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius-xl);
  color: inherit;
  text-decoration: none;
}
.e-card-muted { background: var(--e-paper); }
.e-card-dark { background: var(--e-night-soft); border-color: rgba(255,255,255,.1); color: #fff; }
/* 호버 리프트 — 올린 카드만 떠오르며 확대 */
.e-card-hover {
  transition: transform var(--e-dur-slow) var(--e-ease),
              box-shadow var(--e-dur-slow) ease, border-color var(--e-dur-slow) ease;
  will-change: transform;
}
@media (hover: hover) {
  .e-card-hover:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255, 107, 53, 0.4);
    box-shadow: var(--e-shadow-lg);
  }
}

/* ── 6. Form ──────────────────────────────────────────────────── */
.e-label {
  display: block;
  margin-bottom: var(--e-sp-2);
  font-size: var(--e-text-sm);
  font-weight: 700;
  color: var(--e-ink);
}
.e-input, .e-select, .e-textarea {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--e-border);
  border-radius: var(--e-radius);
  font-family: var(--e-font-sans);
  font-size: var(--e-text-md);
  color: var(--e-ink);
  background: var(--e-white);
  transition: border-color var(--e-dur-fast) ease, box-shadow var(--e-dur-fast) ease;
}
.e-input::placeholder, .e-textarea::placeholder { color: var(--e-faint); }
.e-input:focus, .e-select:focus, .e-textarea:focus {
  outline: none;
  border-color: var(--e-accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}
.e-input[aria-invalid="true"], .e-input.e-invalid {
  border-color: var(--e-danger);
}
.e-input:disabled, .e-select:disabled, .e-textarea:disabled {
  background: var(--e-paper); color: var(--e-faint); cursor: not-allowed;
}
.e-textarea { min-height: 100px; resize: vertical; }
.e-select {
  appearance: none;
  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='%23727272' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.e-help { margin-top: var(--e-sp-2); font-size: var(--e-text-xs); color: var(--e-faint); }
.e-help-error { color: var(--e-danger-strong); }
/* 체크박스·라디오·스위치: accent-color 활용 */
.e-checkbox, .e-radio { width: 16px; height: 16px; accent-color: var(--e-accent); cursor: pointer; }
.e-check-label { display: inline-flex; align-items: center; gap: var(--e-sp-2); font-size: var(--e-text-sm); color: var(--e-ink); cursor: pointer; }
.e-switch {
  appearance: none; position: relative; width: 40px; height: 22px;
  border-radius: var(--e-radius-full); background: var(--e-border);
  cursor: pointer; transition: background var(--e-dur-fast) ease;
}
.e-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--e-shadow-sm);
  transition: transform var(--e-dur-fast) ease;
}
.e-switch:checked { background: var(--e-accent); }
.e-switch:checked::after { transform: translateX(18px); }

/* 아이콘 인풋 — 래퍼(.e-field) + 좌측 아이콘 슬롯 */
.e-field { position: relative; }
.e-field .e-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--e-faint);
  pointer-events: none;
}
.e-field .e-input { padding-left: 38px; }

/* 인풋 그룹 — 인풋+버튼/애드온 결합 (검색창, 구독 폼 등) */
.e-input-group { display: flex; align-items: stretch; width: 100%; }
.e-input-group > * { border-radius: 0; }
.e-input-group > :first-child { border-radius: var(--e-radius) 0 0 var(--e-radius); }
.e-input-group > :last-child { border-radius: 0 var(--e-radius) var(--e-radius) 0; }
.e-input-group > .e-input { flex: 1; min-width: 0; }
.e-input-group > .e-input + .e-btn,
.e-input-group > .e-input + .e-input-addon { margin-left: -1px; }
.e-input-group > .e-input:focus { position: relative; z-index: 1; }
.e-input-group > .e-btn { white-space: nowrap; }
/* 텍스트 애드온 (https:// , 원 등) */
.e-input-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--e-border);
  background: var(--e-paper);
  font-size: var(--e-text-sm);
  font-weight: 600;
  color: var(--e-muted);
  white-space: nowrap;
}
.e-input-addon + .e-input { margin-left: -1px; }

/* 인풋 우측 버튼 슬롯 — 비밀번호 보기 토글 등 (.e-field 래퍼 재사용) */
.e-field .e-field-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 0;
  border-radius: var(--e-radius-sm);
  background: transparent;
  color: var(--e-faint);
  cursor: pointer;
  transition: background var(--e-dur-fast) ease, color var(--e-dur-fast) ease;
}
.e-field .e-field-btn:hover { background: var(--e-paper); color: var(--e-ink); }
.e-field .e-field-btn.on { color: var(--e-accent); }
.e-field-trail .e-input { padding-right: 42px; padding-left: 14px; }

/* 검색+셀렉트 (콤보박스) — data-eui-combo로 자동 초기화 (eondui.js) */
.e-combo { position: relative; }
.e-combo-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--e-z-overlay);
  max-height: 240px;
  overflow-y: auto;
  padding: var(--e-sp-2);
  background: var(--e-white);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius-lg);
  box-shadow: var(--e-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--e-dur-fast) ease, transform var(--e-dur-fast) ease, visibility var(--e-dur-fast) ease;
}
.e-combo.open .e-combo-list { opacity: 1; visibility: visible; transform: none; }
.e-combo-item {
  display: flex;
  align-items: center;
  gap: var(--e-sp-2);
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--e-radius);
  background: none;
  font-size: var(--e-text-sm);
  font-weight: 600;
  color: var(--e-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--e-dur-fast) ease;
}
.e-combo-item:hover, .e-combo-item.focused { background: var(--e-paper); }
.e-combo-item.selected { background: var(--e-accent-soft); color: var(--e-accent); }
.e-combo-item.hidden { display: none; }
.e-combo-empty {
  padding: 12px;
  font-size: var(--e-text-sm);
  color: var(--e-muted);
  text-align: center;
}

/* 슬라이더 — input[type=range] 네이티브 스타일링. 채움 진행은 eondui.js가 --v 갱신 */
.e-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--e-radius-full);
  background: linear-gradient(to right, var(--e-accent) var(--v, 50%), var(--e-paper) var(--v, 50%));
  border: 1px solid var(--e-line);
  outline: none;
  cursor: pointer;
}
.e-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--e-white);
  border: 2px solid var(--e-accent);
  box-shadow: var(--e-shadow-sm);
  transition: transform var(--e-dur-fast) ease;
}
.e-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.e-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--e-white);
  border: 2px solid var(--e-accent);
  box-shadow: var(--e-shadow-sm);
}
.e-slider:focus-visible { box-shadow: var(--e-shadow-focus); }
.e-slider:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── 7. Tabs (el_imin 텍스트 탭 계승: 하단 보더 + 활성 강조) ──── */
.e-tabs {
  display: flex;
  gap: var(--e-sp-1);
  border-bottom: 1px solid var(--e-line);
  overflow-x: auto;
}
.e-tab {
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-family: var(--e-font-sans);
  font-size: var(--e-text-md);
  font-weight: 500;
  color: var(--e-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--e-dur-fast) ease, border-color var(--e-dur-fast) ease;
}
.e-tab:hover { color: var(--e-ink); }
.e-tab.active, .e-tab[aria-selected="true"] {
  color: var(--e-ink);
  font-weight: 700;
  border-bottom-color: var(--e-accent);
}
/* 알약형 변형 */
.e-tabs-pill { border-bottom: 0; gap: var(--e-sp-2); }
.e-tabs-pill .e-tab { border: 1px solid var(--e-border); border-radius: var(--e-radius-full); padding: 8px 16px; font-size: var(--e-text-sm); margin-bottom: 0; }
.e-tabs-pill .e-tab.active, .e-tabs-pill .e-tab[aria-selected="true"] { background: var(--e-night); border-color: var(--e-night); color: #fff; }
/* 탭 카운트 (el_main 계승 — 탭 옆 항목 수) */
.e-tab-count {
  margin-left: 6px;
  font-family: var(--e-font-mono);
  font-size: var(--e-text-xs);
  font-weight: 500;
  color: var(--e-faint);
  font-variant-numeric: tabular-nums;
}

/* ── 8. Alert ─────────────────────────────────────────────────── */
.e-alert {
  display: flex;
  gap: var(--e-sp-3);
  padding: var(--e-sp-4) var(--e-sp-5);
  border-radius: var(--e-radius-lg);
  border: 1px solid var(--e-line);
  background: var(--e-paper);
  font-size: var(--e-text-sm);
  line-height: 1.6;
  color: var(--e-ink);
}
.e-alert strong { font-weight: 700; }
.e-alert-info { background: var(--e-info-soft); border-color: rgba(37, 99, 235, 0.2); }
.e-alert-success { background: var(--e-success-soft); border-color: rgba(18, 183, 106, 0.25); }
.e-alert-warning { background: var(--e-warning-soft); border-color: rgba(247, 144, 9, 0.25); }
.e-alert-danger { background: var(--e-danger-soft); border-color: rgba(250, 40, 40, 0.2); }

/* ── 9. Table ─────────────────────────────────────────────────── */
.e-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--e-text-sm);
}
.e-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--e-text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e-muted);
  background: var(--e-paper);
  border-bottom: 1px solid var(--e-line);
}
.e-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--e-line);
  color: var(--e-ink);
}
.e-table-hover tbody tr { transition: background var(--e-dur-fast) ease; }
.e-table-hover tbody tr:hover { background: var(--e-paper); }

/* ── 10. Avatar ───────────────────────────────────────────────── */
.e-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--e-paper);
  border: 1px solid var(--e-line);
  overflow: hidden;
  font-size: var(--e-text-sm);
  font-weight: 700;
  color: var(--e-muted);
}
.e-avatar img { width: 100%; height: 100%; object-fit: cover; }
.e-avatar-sm { width: 28px; height: 28px; font-size: var(--e-text-2xs); }
.e-avatar-lg { width: 56px; height: 56px; font-size: var(--e-text-md); }

/* ── 11. Pagination ───────────────────────────────────────────── */
.e-pagination { display: inline-flex; gap: var(--e-sp-1); }
.e-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 6px;
  border-radius: var(--e-radius);
  border: 0;
  background: none;
  font-size: var(--e-text-sm);
  font-weight: 600;
  color: var(--e-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--e-dur-fast) ease, color var(--e-dur-fast) ease;
}
.e-page:hover { background: var(--e-paper); color: var(--e-ink); }
.e-page.active { background: var(--e-night); color: #fff; }

/* ── 11.5 커머스 (el_main 계승) ───────────────────────────────── */
/* 가격 표기 — mono + tabular-nums로 숫자 정렬 고정 */
.e-price {
  font-family: var(--e-font-mono);
  font-weight: 800;
  color: var(--e-ink);
  font-variant-numeric: tabular-nums;
}
.e-price-old {
  font-family: var(--e-font-mono);
  text-decoration: line-through;
  color: var(--e-faint);
  font-variant-numeric: tabular-nums;
}
.e-price-free {
  font-family: var(--e-font-mono);
  font-weight: 800;
  color: var(--e-success-ink);
  font-variant-numeric: tabular-nums;
}
/* 썸네일 비율 컨테이너 */
.e-thumb { aspect-ratio: 16 / 10; border-radius: var(--e-radius-lg); overflow: hidden; position: relative; background: var(--e-paper); }
.e-thumb-square { aspect-ratio: 1 / 1; border-radius: var(--e-radius-lg); overflow: hidden; position: relative; background: var(--e-paper); }
.e-thumb-book { aspect-ratio: 2 / 3; border-radius: var(--e-radius-lg); overflow: hidden; position: relative; background: var(--e-paper); }
.e-thumb img, .e-thumb-square img, .e-thumb-book img { width: 100%; height: 100%; object-fit: cover; }

/* ── 11.7 아이콘 (el_imin 아이콘 세트 96종 — eondui-icons.svg 스프라이트) ──
   사용: <svg class="e-icon"><use href="/static/el_design/eondui-icons.svg#ico-check"></use></svg>
   색은 currentColor — 부모 텍스트 색을 따라감. 크기는 font-size 또는 변형 클래스 */
.e-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.e-icon-sm { width: 14px; height: 14px; }
.e-icon-md { width: 20px; height: 20px; }
.e-icon-lg { width: 28px; height: 28px; }

/* ── 12. 기타 유틸 ────────────────────────────────────────────── */
.e-divider { border: 0; border-top: 1px solid var(--e-line); margin: var(--e-sp-8) 0; }
.e-kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--e-border);
  border-bottom-width: 2px;
  border-radius: var(--e-radius-sm);
  background: var(--e-paper);
  font-family: var(--e-font-mono);
  font-size: var(--e-text-xs);
  color: var(--e-ink);
}
.e-inner { max-width: var(--e-inner); margin: 0 auto; padding: 0 24px; }

/* 스탯 밴드 (el_main footer 위 통계 밴드 + el_axai 신뢰 스트립 통합) —
   셀 사이 세로 구분선. 다크 컨텍스트(.e-dark)에서는 반투명 화이트 라인 */
.e-stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.e-stat-band > * { padding: var(--e-sp-6) var(--e-sp-5); }
.e-stat-band > * + * { border-left: 1px solid var(--e-line); }
.e-dark .e-stat-band > * + * { border-left-color: rgba(255,255,255,.1); }
@media (max-width: 768px) {
  .e-stat-band { grid-template-columns: repeat(2, 1fr); }
  .e-stat-band > *:nth-child(odd) { border-left: 0; }
}

/* Stat (숫자 지표) */
.e-stat .e-stat-value {
  font-family: var(--e-font-display);
  font-size: var(--e-text-h1);
  font-weight: 800;
  color: var(--e-accent-ink);
  line-height: 1.2;
}
.e-stat .e-stat-label { font-size: var(--e-text-sm); font-weight: 700; color: var(--e-ink); margin-top: 2px; }
.e-stat .e-stat-desc { font-size: var(--e-text-xs); color: var(--e-muted); margin-top: 4px; }

/* 요금제 카드 (el_main services_subscription 계승) — is-popular만 강조 */
.e-plan-card {
  position: relative;
  padding: var(--e-sp-8) var(--e-sp-6);
  background: var(--e-white);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius-3xl);
}
.e-plan-card.is-popular {
  border-color: var(--e-accent);
  box-shadow: var(--e-shadow-accent);
}
.e-plan-card .e-plan-flag {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: var(--e-radius-full);
  background: var(--e-accent);
  color: #fff;
  font-size: var(--e-text-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* 프로세스 스텝 넘버 (el_axai 진행 방식 계승) — 원형 숫자 배지 */
.e-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--e-ink);
  color: #fff;
  font-family: var(--e-font-display);
  font-weight: 800;
  font-size: var(--e-text-md);
}

/* ── 13. Patterns ─────────────────────────────────────────────── */
/* 다크 섹션 키트 (el_axai 계승) — night 배경 + 그리드 텍스처 + 글로우 */
.e-dark {
  position: relative;
  background: var(--e-night);
  color: #fff;
}
.e-grid-bg {
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
}
.e-glow {
  background: radial-gradient(600px 320px at 70% 20%, rgba(255,107,53,.22), transparent 70%),
              radial-gradient(500px 300px at 15% 85%, rgba(76,110,245,.16), transparent 70%);
}
/* 히어로 눈썹 배지 — 펄스 도트 + 대문자 라벨 (다크 배경용) */
.e-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--e-radius-full);
  background: rgba(255,255,255,.05);
  font-size: var(--e-text-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.e-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--e-accent);
  animation: e-pulse 2s ease-in-out infinite;
}
@keyframes e-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
/* 다크 배경 위 보조 버튼 */
.e-btn-inverse {
  border-color: rgba(255,255,255,.2);
  background: transparent;
  color: rgba(255,255,255,.9);
}
.e-btn-inverse:hover { background: rgba(255,255,255,.1); }

/* CTA 박스 (el_axai 계승) — 둥근 다크 박스 + 글로우, 센터 정렬 */
.e-cta {
  position: relative;
  overflow: hidden;
  padding: var(--e-sp-16) var(--e-sp-6);
  border-radius: var(--e-radius-hero);
  background: var(--e-night);
  color: #fff;
  text-align: center;
}
.e-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 320px at 70% 20%, rgba(255,107,53,.22), transparent 70%),
              radial-gradient(500px 300px at 15% 85%, rgba(76,110,245,.16), transparent 70%);
  pointer-events: none;
}
.e-cta > * { position: relative; }

/* ── 슬라이드 (무한 루프 캐러셀) — data-eui-slides 자동 초기화 ──
   <div class="e-slides" data-eui-slides data-interval="5000">
     <div class="e-slides-track">
       <div class="e-slide">…</div> ×N
     </div>
   </div>
   도트·화살표는 JS가 자동 생성. 호버 시 일시정지, reduced-motion 시 자동재생 없음 */
.e-slides { position: relative; overflow: hidden; }
.e-slides-track {
  display: flex;
  will-change: transform;
  transition: transform 0.55s var(--e-ease);
}
.e-slide { flex: 0 0 100%; min-width: 100%; }
.e-slides-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.e-slides-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--e-radius-full);
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: width var(--e-dur) var(--e-ease), background var(--e-dur) ease;
}
.e-slides-dot.active { width: 22px; background: var(--e-accent); }
.e-slides-light .e-slides-dot { background: rgba(11,17,32,.2); }   /* 밝은 슬라이드용 */
.e-slides-light .e-slides-dot.active { background: var(--e-accent); }
.e-slides-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background var(--e-dur-fast) ease;
}
.e-slides-arrow:hover { background: rgba(255,255,255,.28); }
.e-slides-dot:focus-visible, .e-slides-arrow:focus-visible, .e-slides-pause:focus-visible {
  outline: 2px solid var(--e-accent); outline-offset: 2px;
}
.e-slides-pause {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.e-slides-pause:hover { background: rgba(255,255,255,.28); }
.e-slides-light .e-slides-pause { background: rgba(11,17,32,.08); color: var(--e-ink); }
.e-slides-arrow.prev { left: 14px; }
.e-slides-arrow.next { right: 14px; }
.e-slides-light .e-slides-arrow { background: rgba(11,17,32,.08); color: var(--e-ink); }
.e-slides-light .e-slides-arrow:hover { background: rgba(11,17,32,.16); }

/* ── 마퀴 (무한 흐름 스트립 — 로고·키워드) ──
   .e-marquee-track 안 내용을 JS가 1회 복제해 -50% 루프. --speed로 속도 조절 */
.e-marquee { overflow: hidden; position: relative; --speed: 30s; }
.e-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--e-sp-10);
  width: max-content;
  padding-right: var(--e-sp-10); /* 복제 경계 간격 */
  animation: e-marquee var(--speed) linear infinite;
}
.e-marquee:hover .e-marquee-track,
.e-marquee:focus-within .e-marquee-track,
.e-marquee.paused .e-marquee-track { animation-play-state: paused; }
@keyframes e-marquee { to { transform: translateX(-50%); } }

/* 히어로 스플릿 (좌 텍스트 + 우 비주얼) 레이아웃 헬퍼 */
.e-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-sp-10);
  align-items: center;
}
@media (min-width: 769px) {
  .e-hero-split { grid-template-columns: 1.1fr 0.9fr; gap: var(--e-sp-16); }
}

/* 프로모션 밴드 (el_imin promotion-wrap 계승, 컬러는 EOND 팔레트) */
.e-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-sp-5);
  padding: var(--e-sp-10) var(--e-sp-6);
  background: var(--e-night);
  color: #fff;
}
.e-promo .e-promo-title { font-size: var(--e-text-h3); font-weight: 300; letter-spacing: -0.01em; }
.e-promo .e-promo-title b, .e-promo .e-promo-title strong { font-weight: 700; }
.e-promo-accent { background: var(--e-accent); }
.e-promo-accent .e-btn-primary { background: var(--e-night); }

/* 롤링 텍스트 (el_imin rollin-txt 계승 — 3문장용) */
.e-rolling {
  display: block;
  height: 1.3em;
  overflow: hidden;
  position: relative;
}
.e-rolling span {
  display: block;
  height: 1.3em;
  line-height: 1.3;
  animation: e-roll 9s var(--e-ease) infinite;
}
@keyframes e-roll {
  0%, 26%   { transform: translateY(0); }
  33%, 59%  { transform: translateY(-1.3em); }
  66%, 92%  { transform: translateY(-2.6em); }
  100%      { transform: translateY(0); }
}

/* 스크롤 리빌 (el_axai 계승 — IntersectionObserver로 .is-in 부여) */
.e-reveal { opacity: 0; transform: translateY(26px); }
.e-reveal.is-in {
  opacity: 1; transform: none;
  animation: e-rise 0.7s var(--e-ease) var(--d, 0s) backwards;
}
@keyframes e-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* 모바일 밀도 — 큰 패턴 컨테이너 여백 축소 */
@media (max-width: 768px) {
  .e-cta { padding: var(--e-sp-10) var(--e-sp-5); border-radius: var(--e-radius-2xl); }
  .e-promo { padding: var(--e-sp-8) var(--e-sp-5); }
  .e-plan-card { padding: var(--e-sp-6) var(--e-sp-5); }
  .e-stat-band > * { padding: var(--e-sp-4) var(--e-sp-4); }
  .e-modal-body { padding: var(--e-sp-5); }
  .e-empty { padding: var(--e-sp-8) var(--e-sp-5); }
}

/* ── 14. Overlays (모달·바텀시트) ─────────────────────────────── */
/* 오버레이 백드롭 — .open 토글, eondui.js의 EUI.open()/close() 사용 권장 */
.e-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--e-z-overlay);
  background: rgba(11, 17, 32, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--e-dur) ease, visibility var(--e-dur) ease;
}
.e-overlay.open { opacity: 1; visibility: visible; }

/* 모달 */
.e-modal {
  position: fixed;
  inset: 0;
  z-index: var(--e-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-sp-4);
  visibility: hidden;
  pointer-events: none;
}
.e-modal.open { visibility: visible; pointer-events: auto; }
.e-modal-box {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--e-white);
  border-radius: var(--e-radius-2xl);
  box-shadow: var(--e-shadow-lg);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity var(--e-dur-slow) var(--e-ease), transform var(--e-dur-slow) var(--e-ease);
}
.e-modal.open .e-modal-box { opacity: 1; transform: none; }
.e-modal-lg .e-modal-box { max-width: 720px; }
.e-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sp-4);
  padding: var(--e-sp-5) var(--e-sp-6);
  border-bottom: 1px solid var(--e-line);
  font-weight: 700;
  font-size: var(--e-text-h4, 16px);
}
.e-modal-body { padding: var(--e-sp-6); font-size: var(--e-text-md); line-height: 1.65; color: var(--e-muted); }
.e-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-sp-2);
  padding: var(--e-sp-4) var(--e-sp-6);
  border-top: 1px solid var(--e-line);
}
.e-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--e-radius);
  background: transparent;
  color: var(--e-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--e-dur-fast) ease, color var(--e-dur-fast) ease;
}
.e-modal-close:hover { background: var(--e-paper); color: var(--e-ink); }

/* 바텀시트 — 모바일 우선 하단 패널 */
.e-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--e-z-modal);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--e-white);
  border-radius: var(--e-radius-2xl) var(--e-radius-2xl) 0 0;
  box-shadow: 0 -12px 32px rgba(11, 17, 32, 0.14);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--e-dur-slow) var(--e-ease), visibility var(--e-dur-slow) ease;
}
.e-sheet.open { transform: translateY(0); visibility: visible; }
.e-sheet-handle {
  width: 40px; height: 4px;
  margin: 10px auto 2px;
  border-radius: var(--e-radius-full);
  background: var(--e-line);
}
.e-sheet-body { padding: var(--e-sp-4) var(--e-sp-6) var(--e-sp-8); }
@media (min-width: 769px) {
  .e-sheet { left: 50%; right: auto; width: 480px; transform: translate(-50%, 100%); }
  .e-sheet.open { transform: translate(-50%, 0); }
}

/* ── 15. Toast (하단) & 알림 (우측) ───────────────────────────── */
/* 컨테이너: eondui.js의 EUI.toast()가 자동 생성. 수동 배치도 가능 */
.e-toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--e-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-sp-2);
  pointer-events: none;
}
.e-toasts-right {
  left: auto;
  right: 24px;
  transform: none;
  align-items: flex-end;
}
.e-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--e-sp-3);
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px 18px;
  border-radius: var(--e-radius-lg);
  background: var(--e-night);
  color: #fff;
  font-size: var(--e-text-sm);
  font-weight: 600;
  line-height: 1.5;
  box-shadow: var(--e-shadow-lg);
  pointer-events: auto;
  animation: e-toast-in var(--e-dur-slow) var(--e-ease) backwards;
}
.e-toasts-right .e-toast { animation-name: e-toast-in-right; }
.e-toast.leaving { animation: e-toast-out var(--e-dur) ease forwards; }
.e-toasts-right .e-toast.leaving { animation-name: e-toast-out-right; }
/* 상태 점 */
.e-toast::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--e-faint);
}
.e-toast-success::before { background: var(--e-success); }
.e-toast-danger::before  { background: var(--e-danger); }
.e-toast-warning::before { background: var(--e-warning); }
.e-toast-info::before    { background: var(--e-info); }
.e-toast-accent::before  { background: var(--e-accent); }
@keyframes e-toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes e-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes e-toast-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes e-toast-out-right {
  to { opacity: 0; transform: translateX(24px); }
}

/* ── 16. Chat (채팅창) ────────────────────────────────────────── */
.e-chat {
  display: flex;
  flex-direction: column;
  background: var(--e-white);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius-xl);
  overflow: hidden;
}
.e-chat-head {
  display: flex;
  align-items: center;
  gap: var(--e-sp-3);
  padding: var(--e-sp-3) var(--e-sp-4);
  border-bottom: 1px solid var(--e-line);
  background: var(--e-white);
}
.e-chat-head .e-chat-name { font-weight: 700; font-size: var(--e-text-sm); }
.e-chat-head .e-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--e-text-xs);
  color: var(--e-muted);
}
.e-chat-head .e-chat-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--e-success);
}
.e-chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--e-sp-4);
  background: var(--e-paper);
  display: flex;
  flex-direction: column;
  gap: var(--e-sp-2);
}
/* 말풍선 — 상대(기본) / 내 메시지(.mine) */
.e-msg {
  align-self: flex-start;
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 4px 16px 16px 16px;
  background: var(--e-white);
  border: 1px solid var(--e-line);
  font-size: var(--e-text-sm);
  line-height: 1.6;
  color: var(--e-ink);
  word-break: keep-all;
}
.e-msg.mine {
  align-self: flex-end;
  border-radius: 16px 4px 16px 16px;
  background: var(--e-accent);
  border-color: var(--e-accent);
  color: #fff;
}
.e-msg-time {
  align-self: flex-start;
  font-size: var(--e-text-2xs);
  color: var(--e-faint);
  margin: -2px 4px 4px;
}
.e-msg-time.mine { align-self: flex-end; }
/* 타이핑 인디케이터 */
.e-msg-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 4px 16px 16px 16px;
  background: var(--e-white);
  border: 1px solid var(--e-line);
}
.e-msg-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--e-faint);
  animation: e-typing 1.2s ease-in-out infinite;
}
.e-msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.e-msg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes e-typing {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
/* 입력바 */
.e-chat-input {
  display: flex;
  gap: var(--e-sp-2);
  padding: var(--e-sp-3);
  border-top: 1px solid var(--e-line);
  background: var(--e-white);
}
.e-chat-input .e-input { flex: 1; }

/* ── 17. 내비·피드백 보조 ─────────────────────────────────────── */
/* 드롭다운 메뉴 — 부모에 position:relative, .open 토글 */
.e-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--e-z-overlay);
  min-width: 180px;
  padding: var(--e-sp-2);
  background: var(--e-white);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius-lg);
  box-shadow: var(--e-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--e-dur-fast) ease, transform var(--e-dur-fast) ease, visibility var(--e-dur-fast) ease;
}
.e-menu.open { opacity: 1; visibility: visible; transform: none; }
.e-menu-item {
  display: flex;
  align-items: center;
  gap: var(--e-sp-2);
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--e-radius);
  background: none;
  font-size: var(--e-text-sm);
  font-weight: 600;
  color: var(--e-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--e-dur-fast) ease;
}
.e-menu-item:hover { background: var(--e-paper); }
.e-menu-item.danger { color: var(--e-danger); }
.e-menu-divider { border: 0; border-top: 1px solid var(--e-line); margin: var(--e-sp-2) 0; }

/* 툴팁 — CSS만으로: data-tip 속성 + hover/focus */
.e-tip { position: relative; }
.e-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  z-index: var(--e-z-tooltip);
  padding: 6px 10px;
  border-radius: var(--e-radius);
  background: var(--e-night);
  color: #fff;
  font-size: var(--e-text-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--e-dur-fast) ease, transform var(--e-dur-fast) ease;
}
.e-tip:hover::after, .e-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* 진행바 */
.e-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--e-radius-full);
  background: var(--e-paper);
  border: 1px solid var(--e-line);
  overflow: hidden;
}
.e-progress-bar {
  height: 100%;
  border-radius: var(--e-radius-full);
  background: var(--e-accent);
  transition: width var(--e-dur-slow) var(--e-ease);
}

/* 스피너 */
.e-spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border: 3px solid var(--e-line);
  border-top-color: var(--e-accent);
  border-radius: 50%;
  animation: e-spin 0.8s linear infinite;
}
.e-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.e-spinner-lg { width: 32px; height: 32px; }
@keyframes e-spin { to { transform: rotate(360deg); } }

/* 스켈레톤 로딩 */
.e-skeleton {
  border-radius: var(--e-radius);
  background: linear-gradient(90deg, var(--e-paper) 25%, var(--e-skeleton-hi) 50%, var(--e-paper) 75%);
  background-size: 200% 100%;
  animation: e-shimmer 1.4s ease-in-out infinite;
}
.e-skeleton-text { height: 13px; margin: 5px 0; }
.e-skeleton-circle { border-radius: 50%; }
@keyframes e-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* 브레드크럼 */
.e-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-sp-2);
  font-size: var(--e-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-faint);
}
.e-breadcrumb a { color: var(--e-muted); text-decoration: none; transition: color var(--e-dur-fast) ease; }
.e-breadcrumb a:hover { color: var(--e-accent); }
.e-breadcrumb > * + *::before {
  content: '/';
  margin-right: var(--e-sp-2);
  color: var(--e-line);
  font-weight: 400;
}
.e-breadcrumb .current { color: var(--e-ink); }

/* 빈 상태 (empty state) */
.e-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-sp-2);
  padding: var(--e-sp-12) var(--e-sp-6);
  text-align: center;
}
.e-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--e-paper);
  border: 1px solid var(--e-line);
  color: var(--e-faint);
  font-size: 24px;
  margin-bottom: var(--e-sp-2);
}
.e-empty-title { font-weight: 700; font-size: var(--e-text-md); color: var(--e-ink); }
.e-empty-desc { font-size: var(--e-text-sm); color: var(--e-muted); max-width: 320px; }

/* ── 18. 접근성: 모션 최소화 ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .e-reveal, .e-reveal.is-in { opacity: 1; transform: none; animation: none; }
  .e-rolling span { animation: none; }
  .e-eyebrow::before { animation: none; }
  .e-card-hover, .e-card-hover:hover { transform: none; transition: none; }
  .e-btn:hover { transform: none; }
  .e-toast, .e-toast.leaving { animation: none; }
  .e-msg-typing span { animation: none; }
  .e-skeleton { animation: none; }
  .e-modal-box, .e-sheet, .e-overlay, .e-menu { transition: none; }
  .e-marquee-track { animation: none; }
  .e-slides-track { transition: none; }
}