/* ════════════════════════════════════════════════════════════════════════════
   기억이음 (Memory-Link) 2026 — High-End Agency Portfolio Design System
   - Track A (Service & Showcase): Vivid Aurora Blue/Indigo Gradient + Tall White Floating Cards (Screenshot 2 Style)
   - Track B (Visual Analytics): Deep Obsidian Data Visualization Dashboard with SVG Charts (Screenshot 1 Style)
   ════════════════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── 1. 디자인 토큰 ── */
:root {
  --um-bg: #F3F6FC;
  --um-surface: #F8FAFC;
  --um-card: #FFFFFF;
  --um-accent: #3B5BDB;
  --um-accent-hover: #2B4BC8;
  --um-accent-light: #EEF2FF;
  --um-text: #0F172A;
  --um-text-secondary: #334155;
  --um-text-light: #64748B;
  --um-border: #E2E8F0;
  --um-green: #10B981;
  --um-radius: 22px;
  --um-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --um-shadow-lg: 0 24px 48px -12px rgba(29, 78, 216, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
  --um-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Screenshot 1 다크 비주얼 대시보드 컬러 */
  --dash-bg: #0B101E;
  --dash-card: #131B2E;
  --dash-border: rgba(148, 163, 184, 0.14);
  --dash-cyan: #00F5D4;
  --dash-blue: #38BDF8;
  --dash-indigo: #6366F1;
  --dash-coral: #FF5C77;
  --dash-amber: #FBBF24;
  --dash-emerald: #10B981;
}

/* ── 2. 타이포그래피 & 가독성·시인성 최적화 ── */
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Noto Sans KR", sans-serif !important;
  background-color: var(--um-bg);
  color: var(--um-text);
  letter-spacing: -0.02em;
  line-height: 1.6;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif !important;
  letter-spacing: -0.028em;
}

/* 초소형 텍스트 가독성 스케일업 */
#user-mode .text-\[8px\],
#user-mode .text-\[9px\] {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

#user-mode .text-\[10px\] {
  font-size: 11.75px !important;
  line-height: 1.48 !important;
}

#user-mode .text-\[11px\] {
  font-size: 12.75px !important;
  line-height: 1.55 !important;
}

#user-mode .text-xs {
  font-size: 13.4px !important;
  line-height: 1.6 !important;
}

#user-mode .text-sm {
  font-size: 14.6px !important;
  line-height: 1.65 !important;
}

#user-mode .border-dashed {
  border-style: solid !important;
}

/* ── 3. Screenshot 2 스타일: 오로라 블루/인디고 그라데이션 & 에이전시 필러 카드 ── */
.aurora-canvas-bg {
  background: radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.45) 0%, transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(99, 102, 241, 0.5) 0%, transparent 50%),
              linear-gradient(135deg, #2563EB 0%, #3B5BDB 38%, #4F46E5 72%, #0EA5E9 100%);
  position: relative;
}

.agency-pillar-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 22px 44px -10px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.34s var(--um-ease), box-shadow 0.34s var(--um-ease);
}

.agency-pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px -12px rgba(15, 23, 42, 0.32), 0 8px 20px rgba(59, 91, 219, 0.15);
}

.agency-progress-track {
  height: 5px;
  border-radius: 9999px;
  background: #E2E8F0;
  overflow: hidden;
}

.agency-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #3B5BDB 0%, #8B5CF6 60%, #06B6D4 100%);
  transition: width 0.6s var(--um-ease);
}

/* 우측 플로팅 퀵 독 (#user-mode 활성 & 데스크톱 >=1024px 전용) */
.floating-quick-dock {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 45;
  display: none;
  flex-direction: column;
  gap: 10px;
}

.floating-dock-pill {
  width: 54px;
  height: 54px;
  border-radius: 9999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
  background: linear-gradient(135deg, #3B5BDB 0%, #6366F1 100%);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 24px -4px rgba(59, 91, 219, 0.45);
  transition: all 0.25s var(--um-ease);
  cursor: pointer;
}

.floating-dock-pill:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 14px 28px -4px rgba(59, 91, 219, 0.65);
}

.floating-kakao-cta {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 45;
  padding: 11px 20px;
  border-radius: 9999px;
  background: #FEE500;
  color: #191919;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.22);
  transition: all 0.25s var(--um-ease);
  cursor: pointer;
}

.floating-kakao-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -4px rgba(15, 23, 42, 0.3);
}

/* ── 4. Screenshot 1 스타일: 다크 데이터 비주얼라이제이션 대시보드 ── */
.cyber-dashboard-wrap {
  background: linear-gradient(180deg, #0B101E 0%, #0F172A 100%);
  border-radius: 26px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  box-shadow: 0 24px 48px -12px rgba(11, 16, 30, 0.45);
  color: #F8FAFC;
}

.cyber-widget-card {
  background: rgba(19, 27, 46, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  padding: 18px;
  transition: border-color 0.25s var(--um-ease), transform 0.25s var(--um-ease);
}

.cyber-widget-card:hover {
  border-color: rgba(0, 245, 212, 0.4);
}

/* ── 5. 사용자 모드 공통 카드 & 글래스 헤더 ── */
.um-card {
  background: var(--um-card) !important;
  border-radius: var(--um-radius) !important;
  border: 1px solid var(--um-border) !important;
  box-shadow: var(--um-shadow) !important;
  transition: box-shadow 0.28s var(--um-ease), transform 0.28s var(--um-ease), border-color 0.28s var(--um-ease);
}

#user-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
}

.user-nav {
  background: #F1F5F9;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
}

.user-nav-tab {
  color: #475569;
  border-radius: 10px !important;
  font-weight: 600;
  transition: all 0.22s var(--um-ease);
}

.user-nav-tab:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.75);
}

.user-nav-tab.active {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%) !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(59, 91, 219, 0.28);
}

.user-nav-tab.active::after {
  display: none !important;
}

/* ── 6. 가계도 노드 카드 (모던 미니멀 프로필 칩) ── */
.ft-node-btn {
  border-radius: 16px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF;
  padding: 12px 14px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: all 0.25s var(--um-ease) !important;
}

.ft-node-btn [id^="node-presence-"],
.ft-node-btn [id^="node-subnote-"] {
  display: none !important;
}

.ft-node-btn:hover {
  transform: translateY(-2px);
  border-color: #6366F1 !important;
  box-shadow: 0 10px 22px -4px rgba(59, 91, 219, 0.14);
}

#ft-node-rel_self_core {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%) !important;
  border-color: #6366F1 !important;
  color: #FFFFFF !important;
}

/* ── 7. 부드러운 데이터 전환 애니메이션 ── */
.um-fade-in {
  animation: umFadeIn 0.36s var(--um-ease) forwards;
}

.modern-data-enter {
  animation: modernDataSlideFade 0.32s var(--um-ease) forwards;
}

@keyframes umFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modernDataSlideFade {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 8. 스크롤바 & 반응형 ── */
#chat-messages-container {
  background-color: #F8FAFC;
  background-image: radial-gradient(circle at 20px 20px, rgba(59, 91, 219, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

#chat-messages-container::-webkit-scrollbar,
#album-timeline::-webkit-scrollbar,
#live-xray-drawer::-webkit-scrollbar {
  width: 6px;
}

#chat-messages-container::-webkit-scrollbar-thumb,
#album-timeline::-webkit-scrollbar-thumb,
#live-xray-drawer::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border-radius: 9999px;
}

@media (max-width: 1023px) {
  .floating-quick-dock {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .floating-kakao-cta {
    display: none;
  }
}

/* ── 9. 플로팅 CTA & 퀵 독 가시성 정밀 제어 (#user-mode 활성 시에만 표시 · 전시관/관리자 침범 원천 차단) ── */
#continuum-exhibition-board:not(.hidden) ~ .floating-kakao-cta,
#gateway-screen:not(.hidden) ~ .floating-kakao-cta,
#admin-mode:not(.hidden) ~ .floating-kakao-cta,
#user-mode.hidden ~ .floating-kakao-cta,
body:has(#continuum-exhibition-board:not(.hidden)) .floating-kakao-cta,
body:has(#gateway-screen:not(.hidden)) .floating-kakao-cta,
body:has(#admin-mode:not(.hidden)) .floating-kakao-cta,
body:has(#user-mode.hidden) .floating-kakao-cta,
#continuum-exhibition-board:not(.hidden) ~ .floating-quick-dock,
#gateway-screen:not(.hidden) ~ .floating-quick-dock,
#admin-mode:not(.hidden) ~ .floating-quick-dock,
#user-mode.hidden ~ .floating-quick-dock,
body:has(#continuum-exhibition-board:not(.hidden)) .floating-quick-dock,
body:has(#gateway-screen:not(.hidden)) .floating-quick-dock,
body:has(#admin-mode:not(.hidden)) .floating-quick-dock,
body:has(#user-mode.hidden) .floating-quick-dock {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 769px) {
  #continuum-exhibition-board.hidden ~ #user-mode:not(.hidden) ~ #admin-mode.hidden ~ .floating-kakao-cta {
    display: inline-flex !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (min-width: 1024px) {
  #continuum-exhibition-board.hidden ~ #user-mode:not(.hidden) ~ #admin-mode.hidden ~ .floating-quick-dock {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* 하단 통합 도슨트 바 열림 시 플로팅 버튼 높이 자동 상향 (겹침 0%) */
body.ml-docent-open .floating-kakao-cta {
  bottom: 112px !important;
}

body.ml-docent-open .floating-quick-dock {
  bottom: 178px !important;
}

/* ── 10. 7개 워크스페이스 서브탭 생전(LIFE)↔사후(LEGACY) 역할 구분 길잡이 ── */
.ml-workspace-role-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.35);
  margin-bottom: 10px;
}

.ml-ws-role-chip {
  position: relative;
}