/* ═══════════════════════════════════════════════════════════════
   EOND UI v0.6 — 이온디 디자인 시스템 (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 — easing(속도 변화 곡선) */
  --e-ease: cubic-bezier(0.16, 1, 0.3, 1);            /* 기본 = ease-out 계열 (빠르게 → 천천히) */
  --e-ease-linear: linear;                             /* 일정: 처음부터 끝까지 같은 속도 */
  --e-ease-in: cubic-bezier(0.4, 0, 1, 1);             /* 천천히 → 빠르게 (가속) · 퇴장 모션에 적합 */
  --e-ease-out: cubic-bezier(0.16, 1, 0.3, 1);         /* 빠르게 → 천천히 (감속) · 등장 모션에 적합 */
  --e-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* 느림 → 빠름 → 느림 · 위치 이동에 적합 */
  --e-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 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. 기타 유틸 ────────────────────────────────────────────── */

/* Easing 유틸 — 요소의 transition에 곡선만 갈아끼울 때 */
.e-ease-linear  { transition-timing-function: var(--e-ease-linear); }
.e-ease-in      { transition-timing-function: var(--e-ease-in); }
.e-ease-out     { transition-timing-function: var(--e-ease-out); }
.e-ease-in-out  { transition-timing-function: var(--e-ease-in-out); }
.e-ease-spring  { transition-timing-function: var(--e-ease-spring); }

/* Easing 라이브 데모 랩 — .e-ease-lab.run 토글 시 dot이 각자 곡선으로 왕복 */
.e-ease-lab { display: flex; flex-direction: column; gap: var(--e-sp-3); }
.e-ease-row { display: grid; grid-template-columns: 168px 1fr; gap: var(--e-sp-4); align-items: center; }
.e-ease-row .lbl { display: flex; flex-direction: column; gap: 2px; }
.e-ease-row .lbl b { font-size: var(--e-text-sm); font-weight: 700; color: var(--e-ink); }
.e-ease-row .lbl code { font-size: var(--e-text-2xs); color: var(--e-muted); font-family: var(--e-font-mono); }
.e-ease-track {
  position: relative; height: 40px; border-radius: var(--e-radius);
  background: var(--e-paper); border: 1px solid var(--e-line);
}
.e-ease-dot {
  position: absolute; top: 50%; left: 6px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--e-accent); box-shadow: var(--e-shadow-accent);
  transition-property: left; transition-duration: 1.15s;
  /* transition-timing-function 은 각 행에서 개별 지정 */
}
.e-ease-lab.run .e-ease-dot { left: calc(100% - 34px); }
.e-ease-dot.is-linear  { transition-timing-function: var(--e-ease-linear); }
.e-ease-dot.is-in      { transition-timing-function: var(--e-ease-in); }
.e-ease-dot.is-out     { transition-timing-function: var(--e-ease-out); }
.e-ease-dot.is-in-out  { transition-timing-function: var(--e-ease-in-out); }
.e-ease-dot.is-spring  { transition-timing-function: var(--e-ease-spring); }
@media (max-width: 640px) { .e-ease-row { grid-template-columns: 116px 1fr; } }

/* 세로 이징 랩 — dot이 위 → 아래로 각 곡선으로 낙하 */
.e-ease-lab-v { display: flex; flex-wrap: wrap; gap: var(--e-sp-5); }
.e-ease-col { display: flex; flex-direction: column; align-items: center; gap: var(--e-sp-2); }
.e-ease-vtrack {
  position: relative; width: 46px; height: 168px;
  border-radius: var(--e-radius); background: var(--e-paper); border: 1px solid var(--e-line);
}
.e-ease-vdot {
  position: absolute; left: 50%; margin-left: -14px; top: 6px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--e-accent); box-shadow: var(--e-shadow-accent);
  transition-property: top; transition-duration: 1.15s;
}
.e-ease-lab-v.run .e-ease-vdot { top: calc(100% - 34px); }
.e-ease-vdot.is-linear { transition-timing-function: var(--e-ease-linear); }
.e-ease-vdot.is-in     { transition-timing-function: var(--e-ease-in); }
.e-ease-vdot.is-out    { transition-timing-function: var(--e-ease-out); }
.e-ease-vdot.is-in-out { transition-timing-function: var(--e-ease-in-out); }
.e-ease-vdot.is-spring { transition-timing-function: var(--e-ease-spring); }
.e-ease-col .cap { font-size: var(--e-text-2xs); font-weight: 700; color: var(--e-muted); text-align: center; }

/* 텍스트 이징 샘플 — 곡선을 골라 실제 텍스트가 아래→위로 움직이는 걸 확인 */
.e-ease-picker { display: flex; flex-wrap: wrap; gap: var(--e-sp-2); margin-bottom: var(--e-sp-3); }
.e-ease-picker button {
  padding: 6px 12px; border-radius: var(--e-radius-full);
  border: 1px solid var(--e-border); background: var(--e-white);
  font-family: inherit; font-size: var(--e-text-sm); font-weight: 600; color: var(--e-muted);
  cursor: pointer; transition: border-color var(--e-dur-fast) ease, color var(--e-dur-fast) ease, background var(--e-dur-fast) ease;
}
.e-ease-picker button:hover { border-color: var(--e-border-strong, var(--e-faint)); color: var(--e-ink); }
.e-ease-picker button.active { border-color: var(--e-accent); background: var(--e-accent-soft); color: var(--e-accent-strong); }
.e-ease-sample-stage {
  position: relative; height: 96px; overflow: hidden;
  border-radius: var(--e-radius-lg); background: var(--e-paper); border: 1px solid var(--e-line);
  display: flex; align-items: center; justify-content: center;
}
.e-ease-sample-text {
  font-family: var(--e-font-display); font-size: clamp(22px, 3vw, 34px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--e-ink);
  opacity: 0; transform: translateY(1.1em);
}
.e-ease-sample-stage.run .e-ease-sample-text {
  opacity: 1; transform: none;
  transition-property: opacity, transform; transition-duration: .5s, .95s;
  /* transition-timing-function 은 JS가 선택 곡선으로 지정 */
}

.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-progress 부여 시 활성 도트가 알약형으로 늘어나며
   좌→우로 채워짐(자동재생 간격에 동기화). eondui.js가 --dot-dur을 주입하고
   호버/포커스 정지 시 .paused 클래스로 채움 애니메이션을 함께 멈춘다. */
.e-slides-progress .e-slides-dot.active {
  position: relative;
  width: 28px;
  background: rgba(255,255,255,.28);
  overflow: hidden;
}
.e-slides-progress.e-slides-light .e-slides-dot.active { background: rgba(11,17,32,.16); }
.e-slides-progress .e-slides-dot.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  border-radius: var(--e-radius-full);
  background: var(--e-accent);
  animation: e-dot-fill var(--dot-dur, 5s) linear forwards;
}
.e-slides-progress .e-slides-dot.active.paused::before { animation-play-state: paused; }
@keyframes e-dot-fill { from { width: 0%; } to { width: 100%; } }
.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-slides에 부여하면 화살표가 평소엔 숨어 있다가
   호버/포커스 시 살짝 바깥에서 안으로 밀려들어오며 나타난다 */
.e-slides-arrow-reveal .e-slides-arrow {
  opacity: 0;
  transition: opacity var(--e-dur) ease, transform var(--e-dur) var(--e-ease), background var(--e-dur-fast) ease;
}
.e-slides-arrow-reveal .e-slides-arrow.prev { transform: translate(8px, -50%); }
.e-slides-arrow-reveal .e-slides-arrow.next { transform: translate(-8px, -50%); }
.e-slides-arrow-reveal:hover .e-slides-arrow,
.e-slides-arrow-reveal:focus-within .e-slides-arrow { opacity: 1; }
.e-slides-arrow-reveal:hover .e-slides-arrow.prev,
.e-slides-arrow-reveal:focus-within .e-slides-arrow.prev,
.e-slides-arrow-reveal:hover .e-slides-arrow.next,
.e-slides-arrow-reveal:focus-within .e-slides-arrow.next { transform: translate(0, -50%); }

/* ── 마퀴 (무한 흐름 스트립 — 로고·키워드) ──
   .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; }
}

/* ── 13.2 Split Showcase (SaaS 피처 투어) — data-eui-showcase 자동 초기화 ──
   <div class="e-showcase" data-eui-showcase data-interval="5000">
     <div class="e-showcase-media">
       <div class="e-showcase-media-img active" style="background-image:url(...)"></div>
       <div class="e-showcase-media-img" style="background-image:url(...)"></div>
     </div>
     <div class="e-showcase-list">
       <button class="e-showcase-item active" type="button" aria-selected="true">
         <span class="e-showcase-item-title">제목</span>
         <span class="e-showcase-item-desc">설명</span>
       </button>
       ...
     </div>
   </div>
   미디어는 여러 레이어를 겹쳐 opacity로만 크로스페이드(항상 DOM에 존재하는
   레이어 전환 — el_pro split-slider의 이중 오버레이가 노리는 "깜빡임 없는
   전환"을 배경 재계산 없이 달성하는 방식). 활성 아이템은 좌측 보더가
   강조되고 자동 전환까지 남은 시간만큼 그 위에 진행바(::before)가 채워진다. */
.e-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-sp-10);
  align-items: center;
}
@media (min-width: 769px) {
  .e-showcase { grid-template-columns: 1fr 1fr; gap: var(--e-sp-16); }
}
.e-showcase-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--e-radius-2xl);
  background: var(--e-paper);
  aspect-ratio: 4 / 3;
}
.e-showcase-media-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--e-dur-slow) var(--e-ease);
}
.e-showcase-media-img.active { opacity: 1; }
.e-showcase-list {
  display: flex;
  flex-direction: column;
  gap: var(--e-sp-1);
}
.e-showcase-item {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--e-sp-5) var(--e-sp-6);
  border: 0;
  border-left: 2px solid var(--e-line);
  background: none;
  font-family: var(--e-font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--e-dur) ease;
}
.e-showcase-item::before {
  content: '';
  position: absolute;
  left: -2px; top: 0;
  width: 2px; height: 0%;
  background: var(--e-accent);
}
.e-showcase-item.active::before {
  animation: e-showcase-fill var(--dot-dur, 5s) linear forwards;
}
.e-showcase-item.active.paused::before { animation-play-state: paused; }
@keyframes e-showcase-fill { from { height: 0%; } to { height: 100%; } }
.e-showcase-item.active { border-left-color: var(--e-accent); }
.e-showcase-item-title {
  display: block;
  font-size: var(--e-text-lg);
  font-weight: 700;
  color: var(--e-muted);
  transition: color var(--e-dur) ease;
}
.e-showcase-item.active .e-showcase-item-title { color: var(--e-ink); }
.e-showcase-item-desc {
  display: block;
  margin-top: 0;
  font-size: var(--e-text-sm);
  line-height: 1.6;
  color: var(--e-muted);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--e-dur-slow) var(--e-ease), opacity var(--e-dur) ease, margin-top var(--e-dur-slow) var(--e-ease);
}
.e-showcase-item.active .e-showcase-item-desc { max-height: 200px; opacity: 1; margin-top: var(--e-sp-2); }

/* ── 13.4 세로 진행 타임라인 (How it works) — data-eui-timeline 자동 초기화 ──
   다크 섹션(.e-dark) 기본 가정, 라이트에서도 토큰만으로 동작.
   <div class="e-timeline" data-eui-timeline data-interval="4000">
     <button class="e-timeline-item active" type="button" aria-selected="true">
       <span class="e-timeline-marker">
         <span class="e-timeline-no">1</span>
         <span class="e-timeline-rail"><span class="e-timeline-bar"></span></span>
       </span>
       <span class="e-timeline-body">
         <span class="e-timeline-title">제목</span>
         <span class="e-timeline-desc">설명</span>
       </span>
     </button>
     ...
   </div> */
.e-timeline {
  display: flex;
  flex-direction: column;
}
.e-timeline-item {
  display: flex;
  align-items: stretch;
  gap: var(--e-sp-5);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--e-font-sans);
  text-align: left;
  cursor: pointer;
}
.e-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.e-timeline-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--e-paper);
  color: var(--e-ink);
  font-family: var(--e-font-display);
  font-weight: 800;
  font-size: var(--e-text-sm);
  transition: background var(--e-dur) ease, color var(--e-dur) ease;
}
.e-timeline-item.active .e-timeline-no { background: var(--e-accent); color: var(--e-on-accent); }
.e-timeline-rail {
  position: relative;
  width: 2px;
  flex: 1;
  min-height: 24px;
  margin: var(--e-sp-2) 0;
  background: var(--e-line);
  border-radius: var(--e-radius-full);
}
.e-timeline-item:last-child .e-timeline-rail { visibility: hidden; }
.e-timeline-bar {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0%;
  background: var(--e-accent);
  border-radius: var(--e-radius-full);
}
.e-timeline-item.active .e-timeline-bar {
  animation: e-timeline-fill var(--dot-dur, 5s) linear forwards;
}
.e-timeline-item.active.paused .e-timeline-bar { animation-play-state: paused; }
@keyframes e-timeline-fill { from { height: 0%; } to { height: 100%; } }
.e-timeline-body { flex: 1; padding-bottom: var(--e-sp-8); }
.e-timeline-title {
  display: block;
  font-size: var(--e-text-lg);
  font-weight: 700;
  color: var(--e-muted);
  transition: color var(--e-dur) ease;
}
.e-timeline-item.active .e-timeline-title { color: var(--e-ink); }
.e-timeline-desc {
  display: block;
  margin-top: 6px;
  font-size: var(--e-text-sm);
  line-height: 1.6;
  color: var(--e-muted);
}
/* 다크 섹션 오버라이드 — 화이트 기준 반투명 톤(el_axai .e-eyebrow 계승 관용구) */
.e-dark .e-timeline-no { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.e-dark .e-timeline-rail { background: rgba(255,255,255,.14); }
.e-dark .e-timeline-title { color: rgba(255,255,255,.55); }
.e-dark .e-timeline-item.active .e-timeline-title { color: #fff; }
.e-dark .e-timeline-desc { color: rgba(255,255,255,.5); }

/* ── 13.6 비대칭 벤토 그리드 — .e-card 등과 조합하는 레이아웃 유틸 ──
   <div class="e-bento">
     <div class="e-card e-bento-lg">…</div>  ← 2칸 차지
     <div class="e-card">…</div>
     <div class="e-card">…</div>
   </div> */
.e-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-sp-6);
}
.e-bento > .e-bento-lg { grid-column: span 2; }
@media (max-width: 768px) {
  .e-bento { grid-template-columns: 1fr; gap: var(--e-sp-4); }
  .e-bento > .e-bento-lg { grid-column: span 1; }
}

/* 모바일 밀도 — 큰 패턴 컨테이너 여백 축소 */
@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; }

/* ── 19. 페이지 컴포넌트 (게시판·FAQ·에디터·업로드·위키) ─────────── */

/* 아코디언 (FAQ) — <details>/<summary> 기반 */
.e-accordion { border-top: 1px solid var(--e-line); }
.e-accordion-item { border-bottom: 1px solid var(--e-line); }
.e-accordion-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-sp-4);
  padding: var(--e-sp-5) var(--e-sp-2);
  font-weight: 700; color: var(--e-ink); font-size: var(--e-text-lg);
}
.e-accordion-item > summary::-webkit-details-marker { display: none; }
.e-accordion-item > summary::after {
  content: ''; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--e-faint); border-bottom: 2px solid var(--e-faint);
  transform: rotate(45deg); transition: transform var(--e-dur) var(--e-ease);
}
.e-accordion-item[open] > summary::after { transform: rotate(-135deg); }
.e-accordion-item > summary .q { color: var(--e-accent); font-weight: 800; margin-right: var(--e-sp-2); }
.e-accordion-body { padding: 0 var(--e-sp-2) var(--e-sp-5); color: var(--e-muted); line-height: 1.75; font-size: var(--e-text-md); }

/* 파일 업로드 — 드롭존 + 파일 리스트 */
.e-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-sp-2);
  padding: var(--e-sp-10) var(--e-sp-6); text-align: center;
  border: 2px dashed var(--e-border); border-radius: var(--e-radius-xl);
  background: var(--e-paper); color: var(--e-muted);
  transition: border-color var(--e-dur) ease, background var(--e-dur) ease, color var(--e-dur) ease;
  cursor: pointer;
}
.e-dropzone:hover, .e-dropzone.is-over { border-color: var(--e-accent); background: var(--e-accent-soft); color: var(--e-accent-strong); }
.e-dropzone svg { width: 32px; height: 32px; }
.e-dropzone .hint { font-size: var(--e-text-sm); }
.e-dropzone .sub { font-size: var(--e-text-2xs); color: var(--e-faint); }
.e-file-list { display: flex; flex-direction: column; gap: var(--e-sp-2); margin-top: var(--e-sp-4); }
.e-file-item {
  display: flex; align-items: center; gap: var(--e-sp-3);
  padding: var(--e-sp-3) var(--e-sp-4); border-radius: var(--e-radius-lg);
  border: 1px solid var(--e-line); background: var(--e-white);
}
.e-file-item .ico { flex: none; width: 34px; height: 34px; border-radius: var(--e-radius); background: var(--e-accent-soft); color: var(--e-accent); display: flex; align-items: center; justify-content: center; }
.e-file-item .ico svg { width: 16px; height: 16px; }
.e-file-item .meta { flex: 1; min-width: 0; }
.e-file-item .name { font-size: var(--e-text-sm); font-weight: 600; color: var(--e-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-file-item .size { font-size: var(--e-text-2xs); color: var(--e-faint); }
.e-file-item .bar { height: 4px; border-radius: 999px; background: var(--e-line); overflow: hidden; margin-top: 5px; }
.e-file-item .bar > i { display: block; height: 100%; background: var(--e-accent); border-radius: 999px; }
.e-file-item .del { flex: none; color: var(--e-faint); cursor: pointer; background: none; border: 0; padding: 4px; line-height: 0; }
.e-file-item .del:hover { color: var(--e-danger); }

/* 에디터 (툴바 + 본문 목업 — TipTap 스타일) */
.e-editor { border: 1px solid var(--e-border); border-radius: var(--e-radius-lg); overflow: hidden; background: var(--e-white); }
.e-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: var(--e-sp-2); border-bottom: 1px solid var(--e-line); background: var(--e-paper); }
.e-editor-toolbar button {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--e-radius-sm);
  border: 0; background: transparent; color: var(--e-muted);
  font-size: var(--e-text-sm); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--e-dur-fast) ease, color var(--e-dur-fast) ease;
}
.e-editor-toolbar button:hover { background: var(--e-line); color: var(--e-ink); }
.e-editor-toolbar button.active { background: var(--e-accent-soft); color: var(--e-accent); }
.e-editor-toolbar .sep { width: 1px; height: 20px; background: var(--e-line); margin: 0 4px; }
.e-editor-body { min-height: 260px; padding: var(--e-sp-5); color: var(--e-ink); line-height: 1.8; font-size: var(--e-text-md); }
.e-editor-body:focus { outline: none; }
.e-editor-body p { margin: 0 0 var(--e-sp-3); }
.e-editor-body.is-empty::before { content: attr(data-placeholder); color: var(--e-faint); }

/* 댓글 (글보기) */
.e-comment { display: flex; gap: var(--e-sp-3); padding: var(--e-sp-4) 0; border-top: 1px solid var(--e-line); }
.e-comment .cbody { flex: 1; min-width: 0; }
.e-comment .chead { display: flex; align-items: center; gap: var(--e-sp-2); margin-bottom: 4px; }
.e-comment .who { font-weight: 700; font-size: var(--e-text-sm); color: var(--e-ink); }
.e-comment .date { font-size: var(--e-text-2xs); color: var(--e-faint); }
.e-comment .text { font-size: var(--e-text-sm); line-height: 1.7; color: var(--e-muted); }
.e-comment.reply { margin-left: var(--e-sp-10); }

/* 위키 목차 (TOC) */
.e-toc { font-size: var(--e-text-sm); }
.e-toc .t { font-size: var(--e-text-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--e-faint); margin-bottom: var(--e-sp-3); }
.e-toc a { display: block; padding: 4px 0 4px var(--e-sp-3); color: var(--e-muted); border-left: 2px solid var(--e-line); transition: color var(--e-dur-fast) ease, border-color var(--e-dur-fast) ease; }
.e-toc a:hover, .e-toc a.active { color: var(--e-accent); border-color: var(--e-accent); }
.e-toc a.lv2 { padding-left: var(--e-sp-6); }

/* 답변 채택(지식인) 강조 카드 */
.e-answer-accepted { border-color: var(--e-success) !important; box-shadow: 0 0 0 1px var(--e-success); }
.e-answer-accepted .tag { background: var(--e-success-soft); color: var(--e-success-ink); }

/* 본문 타이포 (게시글·위키·답변 공용) */
.e-prose > * + * { margin-top: 0.9em; }
.e-prose ul, .e-prose ol { padding-left: 1.4em; }
.e-prose ul { list-style: disc; }
.e-prose ol { list-style: decimal; }
.e-prose li + li { margin-top: 0.25em; }
.e-prose code { padding: 1px 6px; border-radius: var(--e-radius-sm); background: var(--e-paper); font-family: var(--e-font-mono); font-size: 0.88em; color: var(--e-accent-strong); }
.e-prose pre code { padding: 0; background: none; color: inherit; }
.e-prose blockquote { border-left: 3px solid var(--e-accent); padding-left: var(--e-sp-4); color: var(--e-muted); }
.e-prose a { color: var(--e-accent); }
.e-prose a:hover { text-decoration: underline; }

/* ── 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; }
  .e-slides-progress .e-slides-dot.active::before { animation: none; width: 100%; }
  .e-slides-arrow-reveal .e-slides-arrow {
    transition: opacity var(--e-dur-fast) ease;
    transform: translateY(-50%) !important;
  }
  .e-showcase-item.active::before { animation: none; height: 100%; }
  .e-showcase-media-img { transition: none; }
  .e-timeline-item.active .e-timeline-bar { animation: none; height: 100%; }
}