/* ════════════════════════════════════════════════════════════
 * AI Link — Shared Slim Header (v1028)
 * /shared/css/al2-slim-header.css
 *
 * 집중/콘텐츠 페이지 공용 상단 헤더 — 단일 진실 소스(single source of truth).
 *   사용처: 제품 등록(/solutions/register) · 제조사 페이지(/vendors/{uid})
 *
 * 구조:
 *   <header class="al2-slim-header [al2-slim-header-fixed]">
 *     <a class="al2-sh-brand" href="/"><span class="al2-sh-logo">AI</span><span class="al2-sh-name">Link</span></a>
 *     <nav class="al2-sh-crumb"><a>출처</a><i class="fas fa-chevron-right"></i><span class="cur">현재</span></nav>
 *     <div class="al2-sh-right"> ...페이지별 액션(al2-sh-status / al2-sh-chip / al2-sh-btn)... </div>
 *   </header>
 *
 * ⚠ 페이지에서 로고·폰트·높이를 재정의하지 말 것. 위치(fixed/sticky)만 페이지가 지정.
 * ════════════════════════════════════════════════════════════ */

.al2-slim-header {
  display: flex; align-items: center; gap: 16px;
  height: 56px; box-sizing: border-box;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  font-family: 'Pretendard', system-ui, sans-serif;
}
/* fixed 변형 — 제품 등록처럼 뷰포트 상단 고정 시 */
.al2-slim-header-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }

/* ─── 브랜드 (로고 → 홈) ─── */
.al2-sh-brand { display: flex; align-items: center; gap: 7px; text-decoration: none; flex-shrink: 0; }
.al2-sh-logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #6C3AE0, #4A1FB8); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; letter-spacing: -.02em;
}
.al2-sh-name { font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }

/* ─── breadcrumb ─── */
.al2-sh-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; min-width: 0; }
.al2-sh-crumb a { color: #64748b; text-decoration: none; }
.al2-sh-crumb a:hover { color: #6c3ae0; }
.al2-sh-crumb i { font-size: 9px; color: #cbd5e1; }
.al2-sh-crumb .cur { color: #0f172a; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── 우측 액션 영역 (페이지별 콘텐츠) ─── */
.al2-sh-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.al2-sh-status { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.al2-sh-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #ede9fe; color: #6d28d9; white-space: nowrap; }
.al2-sh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; color: #475569; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .12s, background .12s, color .12s;
}
.al2-sh-btn:hover { border-color: #6c3ae0; color: #6c3ae0; background: #faf5ff; }
.al2-sh-btn.primary { background: #6c3ae0; border-color: #6c3ae0; color: #fff; }
.al2-sh-btn.primary:hover { background: #5b21b6; color: #fff; }

@media (max-width: 768px) {
  .al2-slim-header { gap: 10px; padding: 0 12px; }
  .al2-sh-crumb a, .al2-sh-crumb i { display: none; }
  .al2-sh-name { display: none; }
  .al2-sh-status .lbl { display: none; }
  .al2-sh-btn span.lbl { display: none; }
  .al2-sh-btn { padding: 7px 9px; }
  .al2-sh-chip { display: none; }
}