@charset "UTF-8";
/* ==========================================================================
   기억이음(Memory-Link) 2026 엔터프라이즈 서비스 플랫폼 — Executive Master Stylesheet v2.0
   목표: 대기업(B2B/B2G) 임원 브리핑 및 실사용자 시연을 위한 압도적 시인성·가독성·고대비 디자인
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  /* 고시인성 엔터프라이즈 라이트 테마 (Crisp Executive Palette) */
  --ml-bg-primary: #EEF2F6;
  --ml-bg-secondary: #E2E8F0;
  --ml-bg-surface: #FFFFFF;
  --ml-bg-elevated: #FFFFFF;
  --ml-bg-subtle: #F8FAFC;

  /* 고대비 타이포그래피 컬러 (가독성 극대화) */
  --ml-text-primary: #0F172A;
  --ml-text-secondary: #1E293B;
  --ml-text-muted: #334155;

  /* 브랜드 액센트 컬러 */
  --ml-amber-gold: #B45309;
  --ml-amber-light: #FEF3C7;
  --ml-amber-border: #F59E0B;
  --ml-sage-green: #047857;
  --ml-sage-light: #D1FAE5;
  --ml-sage-border: #10B981;
  --ml-crimson-kill: #DC2626;
  --ml-indigo-tech: #1D4ED8;

  /* 선명한 테두리 및 깊이감 있는 그림자 */
  --ml-border-color: #CBD5E1;
  --ml-border-strong: #94A3B8;
  --ml-shadow-sm: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --ml-shadow-md: 0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
  --ml-shadow-lg: 0 20px 40px -8px rgba(15, 23, 42, 0.18);

  /* 폰트 패밀리 */
  --font-serif: 'Noto Serif KR', Georgia, serif;
  --font-sans: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   1. 전역 가독성 스케일업 엔진 (깨알 글씨 원천 제거 및 한글 가독성 최적화)
   ========================================================================== */
html {
  font-size: 16px;
}

html, body {
  font-family: var(--font-sans);
  background-color: var(--ml-bg-primary);
  color: var(--ml-text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 소형 유틸리티 폰트 클래스를 데스크톱(>=768px) 관리자 특허 콘솔(#admin-mode) 전용으로 스코프 한정 (모바일 및 공통 모달 글씨 비정상 확대 원천 차단) */
@media (min-width: 768px) {
  #admin-mode .text-\[10px\]:not(#visitor-gate-modal *):not(#experience-modal *):not(#human-legacy-theater-modal *):not(#openai-voice-config-modal *):not(#ft-collective-relay-modal *) {
    font-size: 0.825rem !important; /* 13.2px */
    line-height: 1.45 !important;
    font-weight: 600 !important;
  }

  #admin-mode .text-\[11px\]:not(#visitor-gate-modal *):not(#experience-modal *):not(#human-legacy-theater-modal *):not(#openai-voice-config-modal *):not(#ft-collective-relay-modal *) {
    font-size: 0.885rem !important; /* 14.2px */
    line-height: 1.55 !important;
    font-weight: 500 !important;
  }

  #admin-mode .text-xs:not(#visitor-gate-modal *):not(#experience-modal *):not(#human-legacy-theater-modal *):not(#openai-voice-config-modal *):not(#ft-collective-relay-modal *) {
    font-size: 0.95rem !important; /* 15.2px */
    line-height: 1.65 !important;
  }

  #admin-mode .text-sm:not(#visitor-gate-modal *):not(#experience-modal *):not(#human-legacy-theater-modal *):not(#openai-voice-config-modal *):not(#ft-collective-relay-modal *) {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.65 !important;
  }

  #admin-mode .text-base:not(#visitor-gate-modal *):not(#experience-modal *):not(#human-legacy-theater-modal *):not(#openai-voice-config-modal *):not(#ft-collective-relay-modal *) {
    font-size: 1.15rem !important; /* 18.4px */
    line-height: 1.7 !important;
  }

  #admin-mode .text-lg:not(#visitor-gate-modal *):not(#experience-modal *):not(#human-legacy-theater-modal *):not(#openai-voice-config-modal *):not(#ft-collective-relay-modal *) {
    font-size: 1.325rem !important; /* 21.2px */
    line-height: 1.55 !important;
  }

  #admin-mode .text-xl:not(#visitor-gate-modal *):not(#experience-modal *):not(#human-legacy-theater-modal *):not(#openai-voice-config-modal *):not(#ft-collective-relay-modal *) {
    font-size: 1.55rem !important; /* 24.8px */
    line-height: 1.45 !important;
  }
}

/* 흐릿한 회색 텍스트를 선명한 다크 슬레이트로 명도 대비 강화 */
.text-stone-400,
.text-stone-500,
.text-zinc-500 {
  color: #475569 !important;
}

.text-stone-600,
.text-stone-700,
.text-zinc-600,
.text-zinc-700 {
  color: #1E293B !important;
}

.text-zinc-800,
.text-stone-800,
.text-zinc-900,
.text-stone-900 {
  color: #0F172A !important;
}

/* 어두운 배경 박스 내부의 밝은 텍스트는 원래 밝기 유지 */
.bg-zinc-900 .text-stone-300,
.bg-zinc-900 .text-stone-400,
.bg-stone-900 .text-stone-300,
.bg-stone-900 .text-stone-400,
.bg-slate-900 .text-slate-300,
.bg-slate-900 .text-slate-400 {
  color: #E2E8F0 !important;
}

.font-serif-kr {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
}

.font-mono-code {
  font-family: var(--font-mono);
}

/* ==========================================================================
   2. 야간 예우 저휘도 다크 모드 (.night-courtesy-mode) — 350ms 교차 페이드
   ========================================================================== */
body.night-courtesy-mode {
  --ml-bg-primary: #090D16;
  --ml-bg-secondary: #0F172A;
  --ml-bg-surface: #151F32;
  --ml-bg-elevated: #1E293B;
  --ml-bg-subtle: #1E293B;
  --ml-text-primary: #F8FAFC;
  --ml-text-secondary: #E2E8F0;
  --ml-text-muted: #94A3B8;
  --ml-border-color: #334155;
  --ml-border-strong: #475569;

  background-color: #090D16 !important;
  color: #F8FAFC !important;
}

body.night-courtesy-mode .bg-white,
body.night-courtesy-mode .bg-\[\#FAF8F5\],
body.night-courtesy-mode .bg-\[\#FFFDF9\],
body.night-courtesy-mode .bg-\[\#F6F2E9\],
body.night-courtesy-mode .bg-\[\#F7F3E8\],
body.night-courtesy-mode .ml-card,
body.night-courtesy-mode .ml-card-elevated {
  background: #151F32 !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

body.night-courtesy-mode .bg-stone-50,
body.night-courtesy-mode .bg-stone-100,
body.night-courtesy-mode .bg-slate-50,
body.night-courtesy-mode .bg-amber-50,
body.night-courtesy-mode .bg-amber-50\/70,
body.night-courtesy-mode .bg-emerald-50,
body.night-courtesy-mode .bg-emerald-50\/70 {
  background-color: #1E293B !important;
  border-color: #475569 !important;
  color: #F1F5F9 !important;
}

body.night-courtesy-mode .text-zinc-900,
body.night-courtesy-mode .text-stone-900,
body.night-courtesy-mode .text-stone-800,
body.night-courtesy-mode .text-zinc-800,
body.night-courtesy-mode .text-amber-950,
body.night-courtesy-mode .text-emerald-950 {
  color: #F8FAFC !important;
}

body.night-courtesy-mode .text-stone-600,
body.night-courtesy-mode .text-stone-700,
body.night-courtesy-mode .text-zinc-600,
body.night-courtesy-mode .text-zinc-700,
body.night-courtesy-mode .text-stone-500 {
  color: #CBD5E1 !important;
}

body.night-courtesy-mode input,
body.night-courtesy-mode textarea,
body.night-courtesy-mode select {
  background-color: #0F172A !important;
  border-color: #475569 !important;
  color: #F8FAFC !important;
}

/* ==========================================================================
   3. 엔터프라이즈 카드, 네비게이션 탭, 버튼 스타일
   ========================================================================== */
.ml-card {
  background-color: var(--ml-bg-surface);
  border: 1.5px solid var(--ml-border-color);
  border-radius: 1.15rem;
  box-shadow: var(--ml-shadow-sm);
}

.ml-card-elevated {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFBEB 100%);
  border: 2px solid #F59E0B;
  border-radius: 1.25rem;
  box-shadow: var(--ml-shadow-md);
}

.ml-nav-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  font-weight: 600;
  color: #1E293B;
  background-color: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ml-nav-item:hover {
  background-color: #FEF3C7;
  border-color: #F59E0B;
  color: #0F172A;
  transform: translateX(3px);
}

.ml-nav-item.active {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF !important;
  border-color: #F59E0B;
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.35);
}

.ml-nav-item.active div,
.ml-nav-item.active span {
  color: #FFFFFF !important;
}

/* 환경 플래그 칩 */
.env-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.875rem !important;
  font-weight: 700;
  border: 1.5px solid #CBD5E1;
  background-color: #FFFFFF;
  color: #1E293B;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.env-flag-chip:hover {
  border-color: #F59E0B;
  background-color: #FEF3C7;
}

.env-flag-chip.active-flag {
  background: linear-gradient(135deg, #B45309 0%, #92400E 100%);
  color: #FFFFFF !important;
  border-color: #FBBF24;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.35);
}

/* 0.5초 하드웨어 인터럽트 긴급 버튼 */
.btn-hardware-kill {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  color: #FFFFFF;
  border: 2px solid #FCA5A5;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
  cursor: pointer;
}

.btn-hardware-kill:hover {
  background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
  transform: translateY(-1px);
}

/* [원본(P1) ↔ 해석(P2)] 토글 스위치 */
.p1-p2-toggle-pill {
  display: inline-flex;
  align-items: center;
  background-color: #E2E8F0;
  border: 2px solid #94A3B8;
  border-radius: 9999px;
  padding: 0.25rem;
  cursor: pointer;
  user-select: none;
}

.p1-p2-toggle-option {
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  font-size: 0.9rem !important;
  font-weight: 700;
  transition: all 0.22s ease;
}

.p1-p2-toggle-option.active-p2 {
  background-color: #047857;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.35);
}

.p1-p2-toggle-option.active-p1 {
  background-color: #0F172A;
  color: #FBBF24 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.4);
}

/* 15초 원컷 프로그레스 타이머 */
.stage1-timer-bar {
  width: 100%;
  height: 0.65rem;
  background-color: #E2E8F0;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid #CBD5E1;
}

.stage1-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #047857 0%, #D97706 70%, #F59E0B 100%);
  border-radius: 9999px;
  transition: width 0.25s linear;
}

.stage1-timer-fill.interrupted {
  background: #DC2626 !important;
}

/* ==========================================================================
   4. 우하단 고정 ELS 설명 배지 (명도 대비 14.8:1 · 큼직하고 선명한 가독성)
   ========================================================================== */
.els-badge-container {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}

.els-badge-item {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: #0F172A;
  color: #FEF08A;
  border: 2px solid #F59E0B;
  border-radius: 0.85rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.925rem !important;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  animation: elsDelayedFadeIn 0.35s ease forwards;
}

.els-badge-item .els-priority-tag {
  background-color: #F59E0B;
  color: #0F172A;
  font-family: var(--font-mono);
  font-size: 0.78rem !important;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 0.4rem;
}

.els-badge-item.safety-alert {
  border-color: #F87171;
  color: #FECACA;
}

.els-badge-item.safety-alert .els-priority-tag {
  background-color: #EF4444;
  color: #FFFFFF;
}

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

/* ==========================================================================
   5. JSON 코드 인스펙터 및 특수 애니메이션
   ========================================================================== */
.json-inspector-box {
  background-color: #0F172A;
  color: #F1F5F9;
  border: 1.5px solid #334155;
  border-radius: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.85rem !important;
  line-height: 1.6;
}

.elevation-glow {
  animation: elevationPulse 1.6s ease-out;
}

@keyframes elevationPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.75);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.digital-dust-shredded {
  background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%) !important;
  color: #F8FAFC !important;
  border-color: #EF4444 !important;
}


/* ==========================================================================
   6. 실제 이용자 체감형 5대 매체 비주얼 퍼포먼스 무대 애니메이션 (v3.0 Live Stage)
   ========================================================================== */

/* 무대 공통 컨테이너 */
.visual-stage-frame {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  min-height: 520px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  border: 2px solid rgba(245, 158, 11, 0.55);
}

/* 음성 출력 중 사운드웨이브 바 애니메이션 */
.voice-wave-bar {
  display: inline-block;
  width: 5px;
  border-radius: 9999px;
  background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%);
  animation: voiceWaveBounce 0.8s ease-in-out infinite alternate;
}

.voice-wave-bar.paused {
  animation: none !important;
  height: 6px !important;
  opacity: 0.4;
}

@keyframes voiceWaveBounce {
  0% { height: 8px; opacity: 0.6; }
  100% { height: 34px; opacity: 1; }
}

/* ① 스마트홈 창밖 가을비 애니메이션 */
.rain-drop {
  position: absolute;
  width: 2px;
  height: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(186,230,253,0.65) 100%);
  animation: rainFall 1.2s linear infinite;
}

@keyframes rainFall {
  0% { transform: translateY(-30px); opacity: 0; }
  30% { opacity: 0.8; }
  100% { transform: translateY(260px); opacity: 0; }
}

/* ② AR 글래스 홀로그램 피어오름 & 공간 스캔 링 */
.ar-hologram-figure {
  animation: arHologramFloat 3.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 22px rgba(251, 191, 36, 0.65)) drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}

@keyframes arHologramFloat {
  0% { transform: translateY(0px) scale(1); opacity: 0.82; }
  100% { transform: translateY(-6px) scale(1.015); opacity: 0.96; }
}

.ar-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.85) 50%, transparent 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.9);
  animation: arScanSweep 2.8s ease-in-out infinite;
}

@keyframes arScanSweep {
  0% { top: 8%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 88%; opacity: 0; }
}

/* ③ 메타버스 바닷가 물결 & 온기 파티클 애니메이션 */
.metaverse-wave {
  animation: waveSway 4s ease-in-out infinite alternate;
}

@keyframes waveSway {
  0% { transform: translateX(-10px) translateY(0px); }
  100% { transform: translateX(10px) translateY(4px); }
}

.avatar-float {
  animation: avatarBob 3s ease-in-out infinite alternate;
}

@keyframes avatarBob {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-5px); }
}

/* ④ 휴머노이드 로봇 0.8초 주기 고개 끄덕임 & 36.5°C 심장 박동 */
.robot-head-nod {
  transform-origin: center bottom;
  animation: gentleRobotNod 1.4s ease-in-out infinite;
}

@keyframes gentleRobotNod {
  0%, 100% { transform: rotate(0deg) translateY(0px); }
  45% { transform: rotate(4.5deg) translateY(5px); }
  75% { transform: rotate(-1.5deg) translateY(-1px); }
}

.robot-heart-glow {
  animation: heartWarmPulse 1.8s ease-in-out infinite;
}

@keyframes heartWarmPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }
  50% { transform: scale(1.08); box-shadow: 0 0 28px 10px rgba(251, 191, 36, 0.35); }
}

/* ⑤ 스마트 추모비 앰버 오라 링 */
.monument-halo-ring {
  animation: haloBreathe 3.2s ease-in-out infinite alternate;
}

@keyframes haloBreathe {
  0% { box-shadow: 0 0 18px rgba(251, 191, 36, 0.35), inset 0 0 15px rgba(251, 191, 36, 0.2); }
  100% { box-shadow: 0 0 42px rgba(251, 191, 36, 0.85), inset 0 0 28px rgba(251, 191, 36, 0.45); }
}

/* ==========================================================================
   이용자 경험 퍼포먼스 + 개발자 동기 패널 (v3 UX Theater)
   ========================================================================== */
.ux-root { max-width: 100%; }
.ux-toolbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  align-items: flex-end; padding: 0.25rem 0.15rem 0.5rem;
}
.ux-kicker {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em;
  color: #B45309; text-transform: none;
}
.ux-title {
  font-family: var(--font-serif); font-size: 1.65rem; font-weight: 700;
  color: #0F172A; line-height: 1.35; margin: 0.2rem 0;
}
.ux-sub { margin: 0; color: #334155; font-size: 0.98rem; max-width: 40rem; line-height: 1.55; }
.ux-toolbar-right { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.ux-seg {
  display: inline-flex; background: #E2E8F0; border: 1.5px solid #94A3B8;
  border-radius: 999px; padding: 0.2rem;
}
.ux-seg button {
  border: 0; background: transparent; padding: 0.45rem 0.9rem; border-radius: 999px;
  font-weight: 700; font-size: 0.85rem; color: #334155; cursor: pointer;
}
.ux-seg button.on { background: #0F172A; color: #FFF; }
.ux-btn-ghost {
  border: 1.5px solid #CBD5E1; background: #FFF; border-radius: 999px;
  padding: 0.5rem 1rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; color: #0F172A;
}
.ux-btn-ghost:hover { border-color: #F59E0B; background: #FFFBEB; }

.ux-who-where { display: grid; gap: 0.55rem; }
.ux-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ux-chip-label {
  font-size: 0.78rem; font-weight: 800; color: #64748B; min-width: 2.6rem;
}
.ux-chip {
  border: 1.5px solid #CBD5E1; background: #FFF; color: #1E293B;
  border-radius: 999px; padding: 0.4rem 0.85rem; font-weight: 700; font-size: 0.86rem; cursor: pointer;
}
.ux-chip.on { background: #0F172A; color: #FFF; border-color: #0F172A; }
.ux-chip.place.on { background: #B45309; border-color: #B45309; }

.ux-layout {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.85fr);
  gap: 1rem; align-items: stretch;
}
.ux-layout.user-only { grid-template-columns: 1fr; }
.ux-layout.user-only .ux-dev-pane { display: none; }
.ux-layout.dev-only { grid-template-columns: 1fr; }
.ux-layout.dev-only .ux-user-pane { display: none; }

.ux-user-pane {
  background: #0B1220; border-radius: 1.35rem; overflow: hidden;
  border: 1.5px solid #1E293B; min-height: 520px; display: flex; flex-direction: column;
}
.ux-pane-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1.15rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #F8FAFC;
}
.ux-pane-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em;
  color: #FCD34D; margin-bottom: 0.2rem;
}
.ux-pane-head h2 {
  font-family: var(--font-serif); font-size: 1.25rem; margin: 0; font-weight: 700;
}
.ux-feeling { margin: 0.35rem 0 0; color: #CBD5E1; font-size: 0.9rem; }
.ux-pane-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ux-beat {
  font-size: 0.75rem; font-weight: 700; color: #94A3B8; margin-right: 0.25rem;
}
.ux-btn-small {
  border: 1px solid #475569; background: #1E293B; color: #E2E8F0;
  border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.ux-btn-small.on { background: #FEF3C7; color: #78350F; border-color: #F59E0B; }
.ux-btn-small.danger.on { background: #FEE2E2; color: #991B1B; border-color: #F87171; }
.ux-btn-kill {
  border: 0; background: linear-gradient(135deg, #DC2626, #991B1B); color: #FFF;
  border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 800; cursor: pointer;
}

.ux-stage { position: relative; flex: 1; min-height: 420px; overflow: hidden; }
.ux-spoken {
  font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.55; font-weight: 700;
  color: #FFFDF8; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.ux-spoken.muted { color: rgba(255,255,255,0.55); font-weight: 600; font-size: 1rem; }
.ux-spoken.silence { color: #FDE68A; letter-spacing: 0.12em; }
.ux-spoken.is-soft { color: #E0F2FE; }
.ux-stage.is-killed .ux-spoken { opacity: 0.55; }

.ux-wrong-overlay {
  position: absolute; inset: 0; background: rgba(127, 29, 29, 0.55);
  display: flex; align-items: flex-end; justify-content: center; padding: 1.25rem;
  z-index: 5; backdrop-filter: blur(2px);
}
.ux-wrong-card {
  background: #FEF2F2; color: #7F1D1D; border: 2px solid #FCA5A5; border-radius: 1rem;
  padding: 1rem 1.15rem; max-width: 32rem; width: 100%;
}
.ux-wrong-label { font-size: 0.75rem; font-weight: 800; margin-bottom: 0.35rem; }
.ux-wrong-card p { margin: 0; font-weight: 700; line-height: 1.45; font-size: 0.95rem; }

.ux-provenance {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 4;
  background: rgba(255, 251, 235, 0.96); color: #78350F; border: 1.5px solid #F59E0B;
  border-radius: 0.9rem; padding: 0.85rem 1rem;
}
.ux-provenance-label { font-size: 0.72rem; font-weight: 800; margin-bottom: 0.25rem; }
.ux-provenance-body { margin: 0; font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.5; font-weight: 700; }

/* 거실 */
.ux-stage-home {
  background:
    linear-gradient(180deg, rgba(15,23,42,0.15) 0%, rgba(15,23,42,0.55) 100%),
    radial-gradient(ellipse at 20% 0%, #FDE68A 0%, transparent 45%),
    linear-gradient(160deg, #F5E6C8 0%, #D6B98C 42%, #8B6914 100%);
}
.ux-stage-home.is-legacy {
  background:
    linear-gradient(180deg, rgba(15,23,42,0.45) 0%, rgba(15,23,42,0.7) 100%),
    linear-gradient(160deg, #334155 0%, #1E293B 50%, #0F172A 100%);
}
.ux-home-room { position: absolute; inset: 0; padding: 1.5rem; }
.ux-home-window {
  position: absolute; top: 1.2rem; right: 1.5rem; width: 38%; height: 42%;
  border-radius: 0.6rem; border: 6px solid #A16207;
  background: linear-gradient(180deg, #BAE6FD 0%, #FEF3C7 100%);
  box-shadow: inset 0 0 30px rgba(255,255,255,0.35);
}
.ux-home-frame {
  position: absolute; left: 8%; top: 18%; width: min(420px, 52%);
  background: #1C1917; border: 10px solid #44403C; border-radius: 0.4rem;
  padding: 1rem; min-height: 210px; box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.ux-home-frame.is-speaking {
  box-shadow: 0 0 0 3px #F59E0B, 0 24px 48px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}
.ux-home-frame-photo {
  height: 72px; border-radius: 0.35rem; margin-bottom: 0.75rem;
  background:
    radial-gradient(circle at 50% 35%, #FDE68A 0%, transparent 28%),
    linear-gradient(180deg, #57534E 0%, #292524 100%);
}
.ux-countdown {
  margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
  color: #FDE68A; font-size: 0.75rem; font-weight: 700;
}
.ux-countdown-bar {
  display: inline-block; width: 72px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #F59E0B, transparent);
  animation: uxCountdown 15s linear infinite;
}
@keyframes uxCountdown {
  from { width: 72px; opacity: 1; }
  to { width: 8px; opacity: 0.35; }
}
.ux-home-watch {
  position: absolute; right: 8%; bottom: 18%;
  width: 118px; height: 118px; border-radius: 28px;
  background: #0F172A; border: 4px solid #334155; color: #E2E8F0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.ux-watch-face { font-weight: 800; font-size: 0.95rem; }
.ux-watch-sub { font-size: 0.68rem; color: #94A3B8; text-align: center; margin-top: 0.25rem; padding: 0 0.4rem; }
.ux-home-empty-chat {
  position: absolute; left: 8%; bottom: 10%;
  border: 1.5px dashed rgba(255,255,255,0.35); border-radius: 0.85rem;
  padding: 0.65rem 0.9rem; color: rgba(255,255,255,0.7); background: rgba(15,23,42,0.25);
}
.ux-home-empty-chat span { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; }
.ux-home-empty-chat em { font-style: normal; font-size: 0.82rem; font-weight: 600; }

/* 추모비 */
.ux-stage-monument {
  background: linear-gradient(180deg, #0C4A6E 0%, #075985 28%, #14532D 70%, #365314 100%);
}
.ux-mon-sky {
  position: absolute; inset: 0 0 45% 0;
  background: radial-gradient(ellipse at 50% 20%, #FDE68A55 0%, transparent 50%);
}
.ux-mon-path {
  position: absolute; left: 50%; bottom: 0; width: 28%; height: 42%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #A8A29E 0%, #78716C 100%);
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  opacity: 0.55; transition: width 0.8s ease;
}
.ux-stage-monument.approach-far .ux-mon-stone { transform: scale(0.72) translateY(18px); opacity: 0.75; }
.ux-stage-monument.approach-mid .ux-mon-stone { transform: scale(0.88) translateY(8px); }
.ux-stage-monument.approach-near .ux-mon-stone { transform: scale(1) translateY(0); }
.ux-mon-stone {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  width: min(280px, 55%); min-height: 260px; border-radius: 1.2rem 1.2rem 0.5rem 0.5rem;
  background: linear-gradient(180deg, #57534E 0%, #292524 100%);
  border: 2px solid #A8A29E; padding: 1.4rem 1.1rem; text-align: center;
  transition: transform 0.85s ease, opacity 0.85s ease;
}
.ux-mon-name {
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; color: #F5F5F4;
  margin-bottom: 1rem; letter-spacing: 0.08em;
}
.ux-mon-battery {
  margin-top: 1rem; font-size: 0.72rem; font-weight: 700; color: #FDE68A;
  border: 1px solid #F59E0B55; border-radius: 999px; padding: 0.3rem 0.6rem; display: inline-block;
}
.ux-mon-visitor {
  position: absolute; left: 1rem; bottom: 1rem; color: #ECFCCB; font-weight: 700; font-size: 0.85rem;
}
.ux-stage-monument.is-ritual .ux-mon-stone { filter: brightness(0.72); }

/* AR */
.ux-stage-ar {
  background:
    linear-gradient(180deg, rgba(15,23,42,0.2), rgba(15,23,42,0.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect fill='%23334155' width='160' height='160'/%3E%3Cpath fill='%23475569' d='M0 110h160v50H0z'/%3E%3Crect fill='%2378716C' x='55' y='55' width='50' height='70' rx='4'/%3E%3C/svg%3E");
  background-size: cover;
}
.ux-ar-lens {
  position: absolute; inset: 1.1rem; border-radius: 2.5rem;
  border: 10px solid #0F172A; box-shadow: inset 0 0 0 2px #64748B;
  overflow: hidden; background: rgba(15,23,42,0.15);
}
.ux-ar-center-clear {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 42%; height: 28%; border: 1.5px dashed rgba(255,255,255,0.25); border-radius: 1rem;
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55);
  font-size: 0.8rem; font-weight: 700; text-align: center; padding: 0.5rem;
}
.ux-ar-chair {
  position: absolute; left: 18%; bottom: 18%; width: 22%; height: 28%;
  background: linear-gradient(180deg, #A8A29E, #57534E); border-radius: 0.4rem 0.4rem 0.2rem 0.2rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}
.ux-ar-chair-label {
  position: absolute; top: -1.4rem; left: 0; white-space: nowrap;
  font-size: 0.7rem; font-weight: 800; color: #FDE68A;
}
.ux-ar-ghost {
  position: absolute; right: 8%; top: 18%; width: min(280px, 42%);
  background: rgba(254, 243, 199, 0.28); border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: 1rem; padding: 1rem; backdrop-filter: blur(4px);
}
.ux-ar-hint { margin-top: 0.55rem; font-size: 0.72rem; font-weight: 700; color: #FDE68A; }
.ux-ar-gaze, .ux-ar-walk {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  background: rgba(15,23,42,0.7); color: #E2E8F0; border-radius: 999px;
  padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 700;
}

/* 메타버스 */
.ux-stage-meta {
  background: linear-gradient(180deg, #7DD3FC 0%, #38BDF8 28%, #FDBA74 55%, #FB923C 78%, #9A3412 100%);
}
.ux-meta-sea {
  position: absolute; left: -5%; right: -5%; bottom: 0; height: 34%;
  background: linear-gradient(180deg, #0EA5E980, #0369A1);
  border-radius: 50% 50% 0 0;
}
.ux-meta-horizon {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
  color: #0F172A; font-weight: 800; font-size: 0.85rem;
  background: rgba(255,255,255,0.55); border-radius: 999px; padding: 0.35rem 0.9rem;
}
.ux-meta-people {
  position: absolute; left: 8%; right: 8%; bottom: 28%;
  display: flex; justify-content: space-between; gap: 0.5rem;
}
.ux-meta-person {
  flex: 1; text-align: center; background: rgba(15,23,42,0.55); color: #F8FAFC;
  border-radius: 1rem; padding: 0.7rem 0.35rem; font-size: 0.8rem; font-weight: 700;
  border: 1.5px solid transparent;
}
.ux-meta-person.is-you {
  background: #FEF3C7; color: #78350F; border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.35);
}
.ux-meta-father {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  width: min(420px, 70%); text-align: center;
  background: rgba(15,23,42,0.42); border-radius: 1.1rem; padding: 1rem 1.15rem;
  border: 1px solid rgba(255,255,255,0.25);
}
.ux-meta-tone { margin-top: 0.45rem; font-size: 0.75rem; font-weight: 700; color: #FDE68A; }

/* 로봇 */
.ux-stage-robot {
  background: linear-gradient(160deg, #1E293B 0%, #0F172A 45%, #334155 100%);
}
.ux-robot-room {
  position: absolute; inset: 0; display: grid; place-items: center; grid-template-columns: 1fr 1.2fr;
  gap: 1rem; padding: 1.5rem;
}
.ux-robot-body {
  width: 150px; height: 220px; margin: 0 auto; position: relative;
  background: linear-gradient(180deg, #CBD5E1, #64748B); border-radius: 1.4rem;
  border: 2px solid #94A3B8;
}
.ux-robot-head {
  position: absolute; top: -42px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 70px; border-radius: 1.1rem;
  background: linear-gradient(180deg, #E2E8F0, #94A3B8); border: 2px solid #CBD5E1;
}
.ux-robot-head.is-still { animation: none !important; }
.ux-robot-chest {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%; background: #F59E0B;
}
.ux-robot-speech { color: #F8FAFC; padding-right: 0.5rem; }
.ux-robot-reassure {
  margin-top: 0.85rem; display: inline-block; font-size: 0.78rem; font-weight: 700;
  color: #A7F3D0; border: 1px solid #34D39955; border-radius: 999px; padding: 0.35rem 0.75rem;
  background: rgba(6, 78, 59, 0.35);
}

/* 개발자 패널 */
.ux-dev-pane {
  background: #0F172A; color: #E2E8F0; border-radius: 1.35rem; padding: 1.1rem 1.15rem;
  border: 1.5px solid #334155; display: flex; flex-direction: column; gap: 0.85rem;
}
.ux-dev-mission {
  font-size: 0.78rem; font-weight: 800; line-height: 1.45; color: #FDE68A;
  border-bottom: 1px solid #334155; padding-bottom: 0.75rem;
}
.ux-dev-now-label { font-size: 0.7rem; font-weight: 700; color: #94A3B8; }
.ux-dev-now-main { font-size: 1rem; font-weight: 800; color: #FFF; margin-top: 0.15rem; }
.ux-dev-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ux-dev-chips li {
  border-radius: 0.7rem; padding: 0.55rem 0.7rem; font-size: 0.82rem; font-weight: 700;
  border: 1px solid #334155; background: #1E293B;
}
.ux-dev-chips li.ok { border-color: #05966955; color: #A7F3D0; }
.ux-dev-chips li.bad { border-color: #F8717155; color: #FECACA; background: #450A0A; }
.ux-dev-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ux-dev-links button {
  border: 1px solid #475569; background: #1E293B; color: #F8FAFC;
  border-radius: 0.7rem; padding: 0.45rem 0.7rem; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.ux-dev-links button:hover { border-color: #F59E0B; color: #FDE68A; }
.ux-dev-note { margin: 0; font-size: 0.75rem; color: #94A3B8; line-height: 1.45; }

.ux-jump-row {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.ux-jump-row button {
  border: 1.5px solid #CBD5E1; background: #FFF; color: #0F172A;
  border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.ux-jump-row button:hover { border-color: #F59E0B; background: #FFFBEB; }

@media (max-width: 1100px) {
  .ux-layout.dual { grid-template-columns: 1fr; }
}

/* 모바일·소형 태블릿(<=768px) UX 퍼포먼스 극장(.ux-layout, .ux-stage-home, .ux-robot-room) 1열 무겹침 적응형 배치 */
@media (max-width: 768px) {
  .ux-layout {
    grid-template-columns: 1fr !important;
  }
  .ux-user-pane {
    min-height: auto;
  }
  .ux-stage {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .ux-provenance {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0.75rem 1rem 1rem;
  }
  .ux-stage-home {
    min-height: auto;
  }
  .ux-stage-home .ux-home-room {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  .ux-stage-home .ux-home-window {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 86px;
  }
  .ux-stage-home .ux-home-frame {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: auto;
    border-width: 6px;
    padding: 0.85rem;
  }
  .ux-stage-home .ux-home-watch {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.95rem;
  }
  .ux-stage-home .ux-watch-sub {
    margin-top: 0;
    text-align: right;
  }
  .ux-stage-home .ux-home-empty-chat {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
  }
  .ux-stage-robot {
    min-height: auto;
  }
  .ux-robot-room {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    padding: 3.1rem 1rem 1rem;
    gap: 1rem;
    text-align: center;
  }
  .ux-robot-body {
    width: 118px;
    height: 168px;
  }
  .ux-robot-speech {
    padding-right: 0;
  }
  .ux-ar-lens {
    inset: 0.65rem;
    border-width: 6px;
    border-radius: 1.5rem;
  }
  .ux-ar-ghost {
    right: 5%;
    top: 10%;
    width: min(260px, 68%);
    padding: 0.75rem;
  }
  .ux-meta-father {
    width: calc(100% - 2rem);
    top: 3.2rem;
    padding: 0.75rem 0.9rem;
  }
  .ux-meta-people {
    left: 4%;
    right: 4%;
    bottom: 18%;
  }
}

/* ==========================================================================
   여정형 셸 — 나 → 우리 → 사회 → 진화 → 서비스 → 운영
   ========================================================================== */
.journey-strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-radius: 1.25rem;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #312E81 100%);
  color: #F8FAFC; border: 1.5px solid #F59E0B66;
}
.journey-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 0.55rem; }
.journey-crumb {
  border: 0; background: transparent; color: #94A3B8; font-weight: 800; font-size: 0.82rem;
  padding: 0.25rem 0.55rem; border-radius: 999px; cursor: pointer;
}
.journey-crumb.on { background: #F59E0B; color: #0F172A; }
.journey-crumb-sep { color: #64748B; font-size: 0.75rem; }
.journey-phenomenon {
  font-family: var(--font-serif); font-size: 1.45rem; font-weight: 700; margin: 0 0 0.45rem; line-height: 1.35;
}
.journey-thesis { margin: 0; color: #CBD5E1; font-size: 0.92rem; line-height: 1.55; max-width: 46rem; }
.journey-strip-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: flex-start; }
.journey-strip-actions .ux-btn-ghost { background: #1E293B; color: #F8FAFC; border-color: #64748B; }

.journey-body.has-side {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 0.85fr); gap: 1rem;
}
.journey-mvp-banner {
  background: #FFFBEB; border: 1.5px solid #F59E0B; border-radius: 1rem;
  padding: 0.85rem 1rem; margin-bottom: 0.85rem; color: #78350F;
  font-size: 0.92rem; font-weight: 600; line-height: 1.5;
}
.journey-mvp-banner strong { display: block; font-size: 0.78rem; letter-spacing: 0.04em; margin-bottom: 0.25rem; color: #B45309; }
.journey-mvp-banner button, .journey-inline-actions button {
  margin-top: 0.45rem; margin-right: 0.35rem;
  border: 1px solid #B45309; background: #0F172A; color: #FDE68A;
  border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.journey-inline-actions button.on { background: #B45309; color: #FFF; }

.journey-gov-card {
  background: #0F172A; color: #E2E8F0; border-radius: 1.2rem; padding: 1rem;
  border: 1.5px solid #334155; position: sticky; top: 9rem;
}
.journey-gov-title { font-size: 0.78rem; font-weight: 800; color: #FDE68A; margin-bottom: 0.55rem; }
.journey-inv-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.4rem; }
.journey-inv-list li {
  background: #1E293B; border-radius: 0.7rem; padding: 0.5rem 0.65rem; border: 1px solid #334155;
  display: grid; gap: 0.15rem;
}
.journey-inv-list strong { font-size: 0.8rem; color: #FFF; }
.journey-inv-list span { font-size: 0.75rem; color: #94A3B8; line-height: 1.4; }
.journey-gov-diff {
  background: #14532D33; border: 1px solid #22C55E55; border-radius: 0.75rem;
  padding: 0.65rem 0.75rem; margin-bottom: 0.65rem; font-size: 0.78rem; line-height: 1.45;
}
.journey-gov-diff em { color: #86EFAC; font-style: normal; font-weight: 800; }
.journey-scope { display: grid; gap: 0.35rem; font-size: 0.72rem; color: #CBD5E1; line-height: 1.4; }
.journey-scope .tag {
  display: inline-block; font-weight: 800; border-radius: 999px; padding: 0.1rem 0.45rem; margin-right: 0.25rem;
}
.journey-scope .tag.in { background: #065F46; color: #A7F3D0; }
.journey-scope .tag.design { background: #1E3A8A; color: #BFDBFE; }
.journey-scope .tag.out { background: #7F1D1D; color: #FECACA; }
.journey-side-btn {
  width: 100%; margin-top: 0.55rem; border: 1px solid #F59E0B; background: #F59E0B; color: #0F172A;
  border-radius: 0.75rem; padding: 0.55rem 0.7rem; font-weight: 800; font-size: 0.8rem; cursor: pointer;
}
.journey-receipt pre {
  margin: 0; max-height: 160px; overflow: auto; font-size: 0.65rem; background: #020617;
  padding: 0.5rem; border-radius: 0.5rem; color: #A7F3D0;
}

.society-stage { display: grid; gap: 0.85rem; }
.society-card {
  background: #FFF; border: 1.5px solid #CBD5E1; border-radius: 1.1rem; padding: 1.1rem 1.2rem;
}
.society-card.emphasis { background: #0F172A; color: #F8FAFC; border-color: #F59E0B; }
.society-card.emphasis h3 { color: #FDE68A; }
.society-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; margin: 0.2rem 0; }
.society-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.society-actions button, .society-card button {
  border: 1px solid #94A3B8; background: #F8FAFC; border-radius: 999px;
  padding: 0.4rem 0.8rem; font-weight: 700; font-size: 0.8rem; cursor: pointer;
}
.society-card.emphasis button { background: #F59E0B; border-color: #F59E0B; color: #0F172A; }
.society-stage.is-ritual .society-card.emphasis { background: #111827; }

.evolve-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem;
}
.evolve-col {
  border-radius: 1rem; padding: 1rem; border: 1.5px solid #CBD5E1; background: #FFF; min-height: 180px;
}
.evolve-col.locked { border-color: #B45309; background: #FFFBEB; }
.evolve-col.grow { border-color: #059669; background: #ECFDF5; }
.evolve-col h3 { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 800; }
.evolve-col ul { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; line-height: 1.45; }
.evolve-col p { margin: 0.65rem 0 0; font-size: 0.78rem; font-weight: 700; color: #475569; }

@media (max-width: 1100px) {
  .journey-body.has-side { grid-template-columns: 1fr; }
  .journey-gov-card { position: static; }
  .evolve-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   일상 기록 (나) — 자동 조각 + 데일리 일기 자동완성 + 가벼운 승인
   ========================================================================== */
.journey-strip.is-soft-life {
  background: linear-gradient(135deg, #1C1917 0%, #44403C 45%, #78716C 100%);
  border-color: #D6D3D1;
}
.daily-life { display: grid; gap: 1rem; }
.daily-hero {
  border-radius: 1.35rem; padding: 1.35rem 1.4rem; color: #1C1917;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-end;
  border: 1.5px solid #D6D3D1; overflow: hidden; position: relative;
}
.daily-hero.daily-morning {
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 40%, #FDE68A 100%);
}
.daily-hero.daily-day {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #FEF9C3 100%);
}
.daily-hero.daily-evening {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 35%, #FED7AA 100%);
}
.daily-greet { margin: 0; font-size: 0.9rem; font-weight: 700; color: #78716C; }
.daily-hero h2 {
  margin: 0.25rem 0; font-family: var(--font-serif); font-size: 1.55rem; font-weight: 700; line-height: 1.35;
}
.daily-mood { margin: 0.35rem 0 0; color: #44403C; font-size: 0.95rem; line-height: 1.5; max-width: 36rem; }
.daily-hero-pill {
  background: rgba(28,25,23,0.9); color: #FEF3C7; border-radius: 999px;
  padding: 0.55rem 0.95rem; font-size: 0.82rem; font-weight: 700; max-width: 16rem; line-height: 1.4;
}
.daily-section {
  background: #FFF; border: 1.5px solid #E7E5E4; border-radius: 1.2rem; padding: 1.1rem 1.2rem;
}
.daily-section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: baseline;
  margin-bottom: 0.85rem;
}
.daily-section-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #1C1917; }
.daily-section-head span { font-size: 0.78rem; font-weight: 700; color: #A8A29E; }
.daily-frags {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.65rem;
}
.daily-frag {
  display: flex; gap: 0.65rem; align-items: flex-start; text-align: left;
  border: 1.5px solid #E7E5E4; border-radius: 1rem; padding: 0.85rem; background: #FAFAF9;
}
.daily-frag.auto { border-color: #BBF7D0; background: #F0FDF4; }
.daily-frag.nudge { border-color: #FDE68A; background: #FFFBEB; }
.daily-frag.add {
  border-style: dashed; cursor: pointer; width: 100%; font: inherit; color: inherit;
}
.daily-frag-icon { font-size: 1.25rem; line-height: 1; }
.daily-frag-title { font-size: 0.82rem; font-weight: 800; color: #1C1917; }
.daily-frag-title em {
  font-style: normal; margin-left: 0.3rem; font-size: 0.68rem; font-weight: 800;
  color: #059669; background: #D1FAE5; border-radius: 999px; padding: 0.05rem 0.4rem;
}
.daily-frag.nudge .daily-frag-title em { color: #B45309; background: #FEF3C7; }
.daily-frag p { margin: 0.25rem 0 0; font-size: 0.8rem; color: #57534E; line-height: 1.4; }

.daily-draft-card { border-color: #F59E0B; box-shadow: 0 12px 28px rgba(180, 83, 9, 0.08); }
.daily-draft-help {
  margin: 0 0 0.85rem; font-size: 0.9rem; color: #44403C; line-height: 1.5;
}
.daily-draft-body {
  background: #1C1917; color: #FAFAF9; border-radius: 1rem; padding: 1.1rem 1.2rem; margin-bottom: 0.85rem;
}
.daily-draft-body h4 { margin: 0 0 0.5rem; font-size: 0.85rem; color: #FDE68A; font-weight: 800; }
.daily-draft-body p {
  margin: 0; font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.65; font-weight: 600;
}
.daily-reflect-label {
  display: block; font-size: 0.8rem; font-weight: 800; color: #78716C; margin-bottom: 0.35rem;
}
.daily-reflect {
  width: 100%; box-sizing: border-box; border: 1.5px solid #D6D3D1; border-radius: 0.9rem;
  padding: 0.75rem 0.9rem; font-size: 0.95rem; line-height: 1.5; resize: vertical;
  font-family: var(--font-sans); color: #1C1917; background: #FFF;
}
.daily-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
.daily-btn {
  border: 1.5px solid #D6D3D1; background: #FFF; color: #1C1917; border-radius: 999px;
  padding: 0.55rem 1rem; font-size: 0.86rem; font-weight: 800; cursor: pointer;
}
.daily-btn.primary { background: #1C1917; color: #FEF3C7; border-color: #1C1917; }
.daily-btn.ghost { background: transparent; }
.daily-btn:hover { border-color: #B45309; }
.daily-consent-hint { margin: 0.65rem 0 0; font-size: 0.78rem; color: #78716C; line-height: 1.45; }

.daily-recent {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.65rem;
}
.daily-recent-card {
  border: 1.5px solid #E7E5E4; border-radius: 1rem; padding: 0.9rem; background: #FAFAF9;
}
.daily-recent-date { font-size: 0.72rem; font-weight: 800; color: #A8A29E; }
.daily-recent-card h4 { margin: 0.3rem 0; font-size: 0.92rem; font-weight: 800; color: #1C1917; }
.daily-recent-card p { margin: 0; font-size: 0.8rem; color: #57534E; line-height: 1.45; }
.daily-empty { color: #A8A29E; font-size: 0.9rem; }

.daily-side {
  background: #FAFAF9; border: 1.5px solid #E7E5E4; border-radius: 1.2rem; padding: 1rem;
  position: sticky; top: 9rem;
}
.daily-side-title { font-size: 0.9rem; font-weight: 800; color: #1C1917; margin-bottom: 0.65rem; }
.daily-side-steps { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.55rem; color: #44403C; font-size: 0.86rem; line-height: 1.45; }
.daily-side-note { margin: 0.85rem 0; font-size: 0.84rem; color: #57534E; line-height: 1.5; }
.daily-side-link {
  display: block; width: 100%; margin-top: 0.45rem; border: 0; background: transparent;
  color: #78716C; font-size: 0.78rem; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline;
}

/* 나를 담는 초상 + 쉬운 인터뷰 */
.portrait-board { background: linear-gradient(180deg, #FFF 0%, #FAFAF9 100%); }
.portrait-fill {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem;
}
.portrait-fill-track {
  flex: 1; min-width: 160px; height: 10px; border-radius: 999px; background: #E7E5E4; overflow: hidden;
}
.portrait-fill-bar {
  height: 100%; border-radius: 999px; background: linear-gradient(90deg, #D97706, #059669);
  transition: width 0.45s ease;
}
.portrait-fill span { font-size: 0.78rem; font-weight: 800; color: #78716C; }
.portrait-facets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.55rem;
}
.portrait-facet {
  border-radius: 0.9rem; padding: 0.75rem 0.8rem; border: 1.5px dashed #D6D3D1; background: #FAFAF9; min-height: 88px;
}
.portrait-facet.filled { border-style: solid; border-color: #86EFAC; background: #F0FDF4; }
.portrait-facet-label { font-size: 0.75rem; font-weight: 800; color: #B45309; margin-bottom: 0.3rem; }
.portrait-facet.filled .portrait-facet-label { color: #047857; }
.portrait-facet p { margin: 0; font-size: 0.82rem; line-height: 1.4; color: #44403C; font-weight: 600; }
.portrait-facet.empty p { color: #A8A29E; font-weight: 500; }

.easy-interview { border-color: #FDBA74; }
.interview-lead {
  margin: 0 0 0.9rem; font-size: 0.92rem; color: #44403C; line-height: 1.55;
}
.interview-card {
  background: #1C1917; color: #FAFAF9; border-radius: 1.15rem; padding: 1.15rem 1.2rem;
}
.interview-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.65rem;
}
.interview-soft {
  font-size: 0.75rem; font-weight: 800; color: #FDE68A;
  background: rgba(253,230,138,0.12); border-radius: 999px; padding: 0.25rem 0.65rem;
}
.interview-step { font-size: 0.75rem; font-weight: 700; color: #A8A29E; }
.interview-q {
  margin: 0 0 0.9rem; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.45; font-weight: 700;
}
.interview-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.75rem; }
.interview-chip {
  border: 1.5px solid #57534E; background: #292524; color: #FEF3C7; border-radius: 999px;
  padding: 0.45rem 0.85rem; font-size: 0.84rem; font-weight: 700; cursor: pointer;
}
.interview-chip:hover { border-color: #F59E0B; background: #44403C; }
.interview-or {
  font-size: 0.75rem; font-weight: 800; color: #A8A29E; margin: 0.35rem 0 0.45rem; letter-spacing: 0.04em;
}
.interview-card .daily-reflect {
  background: #0C0A09; border-color: #44403C; color: #FAFAF9;
}
.interview-card .daily-btn { border-color: #57534E; }
.interview-card .daily-btn.primary { background: #F59E0B; color: #1C1917; border-color: #F59E0B; }
.interview-done {
  background: #ECFDF5; border: 1.5px solid #6EE7B7; border-radius: 1rem; padding: 1rem 1.1rem; color: #064E3B;
}
.interview-done h4 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.interview-done p { margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.5; }
.portrait-mini { margin: 0.75rem 0; }
.portrait-mini-bar {
  height: 8px; border-radius: 999px; background: #E7E5E4; overflow: hidden; margin-bottom: 0.35rem;
}
.portrait-mini-bar span {
  display: block; height: 100%; background: linear-gradient(90deg, #D97706, #059669);
}
.portrait-mini p { margin: 0; font-size: 0.78rem; font-weight: 800; color: #57534E; }
.self-axis-list {
  list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.35rem;
  max-height: 280px; overflow: auto;
}
.self-axis-list li {
  background: #FFF; border: 1px solid #E7E5E4; border-radius: 0.65rem;
  padding: 0.45rem 0.55rem; display: grid; gap: 0.1rem;
}
.self-axis-list strong { font-size: 0.78rem; color: #1C1917; }
.self-axis-list span { font-size: 0.72rem; color: #78716C; line-height: 1.35; }

/* 사람 × 장소 × 상황 — 실제 본인 검증 */
.context-triad { border-color: #0F766E; }
.triad-pickers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem;
}
.triad-label { font-size: 0.75rem; font-weight: 800; color: #0F766E; margin-bottom: 0.4rem; }
.triad-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.triad-chip {
  border: 1.5px solid #D6D3D1; background: #FFF; color: #1C1917; border-radius: 999px;
  padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.triad-chip.on { background: #0F766E; color: #ECFDF5; border-color: #0F766E; }
.triad-stage {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.75rem;
}
.triad-presence {
  background: #042F2E; color: #ECFDF5; border-radius: 1.1rem; padding: 1.1rem 1.15rem;
}
.triad-presence-meta { font-size: 0.75rem; font-weight: 800; color: #5EEAD4; margin-bottom: 0.55rem; }
.triad-speech {
  margin: 0 0 0.75rem; font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.55; font-weight: 700;
}
.triad-why { margin: 0 0 0.65rem; padding-left: 1.1rem; font-size: 0.8rem; line-height: 1.45; color: #99F6E4; }
.triad-depth { margin: 0; font-size: 0.78rem; font-weight: 700; color: #FDE68A; line-height: 1.45; }
.triad-generic {
  background: #FEF2F2; border: 1.5px solid #FECACA; border-radius: 1.1rem; padding: 1rem 1.05rem; color: #7F1D1D;
}
.triad-generic-label { font-size: 0.72rem; font-weight: 800; margin-bottom: 0.4rem; }
.triad-generic p { margin: 0; font-size: 0.88rem; line-height: 1.5; font-weight: 600; }
@media (max-width: 900px) {
  .triad-pickers, .triad-stage { grid-template-columns: 1fr; }
}

/* Google/Samsung 스타일 라이브 제품 시연 무대 */
.live-demo-launch {
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed #99F6E4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.live-demo-launch p { margin: 0; font-size: 0.9rem; color: #134E4A; line-height: 1.45; max-width: 36rem; }

.live-demo-root { display: grid; gap: 1rem; padding-bottom: 2rem; }
.live-demo-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-end;
  padding: 1.2rem 1.35rem; border-radius: 1.25rem;
  background: linear-gradient(135deg, #020617 0%, #0F172A 50%, #134E4A 100%); color: #F8FAFC;
}
.live-demo-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: #5EEAD4; }
.live-demo-top h1 { margin: 0.25rem 0; font-family: var(--font-serif); font-size: 1.7rem; }
.live-demo-top p { margin: 0; color: #CBD5E1; font-size: 0.92rem; max-width: 40rem; line-height: 1.5; }

.live-demo-grid {
  display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr); gap: 1rem; min-height: 560px;
}
.live-demo-controls {
  background: #FFF; border: 1.5px solid #E7E5E4; border-radius: 1.2rem; padding: 1rem; display: grid; gap: 0.85rem;
}
.live-block { padding-bottom: 0.65rem; border-bottom: 1px solid #F5F5F4; }
.live-actions { border-bottom: 0; display: grid; gap: 0.4rem; }
.live-act {
  width: 100%; text-align: left; border: 1.5px solid #D6D3D1; background: #FAFAF9; color: #1C1917;
  border-radius: 0.85rem; padding: 0.7rem 0.85rem; font-weight: 800; font-size: 0.86rem; cursor: pointer;
}
.live-act.primary { background: #0F766E; color: #ECFDF5; border-color: #0F766E; }
.live-act.danger { background: #991B1B; color: #FEE2E2; border-color: #991B1B; }
.live-act.ghost { background: #FFF; }
.live-log ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.live-log li {
  font-size: 0.75rem; color: #44403C; background: #FAFAF9; border-radius: 0.55rem; padding: 0.45rem 0.55rem; line-height: 1.4;
}
.live-log time { display: block; font-weight: 800; color: #0F766E; font-size: 0.68rem; }

.live-demo-device {
  border-radius: 1.4rem; border: 2px solid #334155; overflow: hidden; display: flex; flex-direction: column;
  background: #0F172A; min-height: 520px; box-shadow: 0 24px 50px rgba(15,23,42,0.25);
}
.live-demo-device.skin-home { background: linear-gradient(160deg, #44403C, #1C1917 40%, #78716C); }
.live-demo-device.skin-monument { background: linear-gradient(160deg, #0C4A6E, #14532D 70%); }
.live-demo-device.skin-ar { background: linear-gradient(160deg, #1E293B, #0F172A 50%, #334155); }
.live-demo-device.skin-meta { background: linear-gradient(160deg, #38BDF8, #FB923C 70%); }
.live-device-chrome {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
  background: rgba(0,0,0,0.35); color: #E2E8F0; font-size: 0.78rem; font-weight: 700;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 10px #34D399; }
.live-phase { margin-left: auto; font-size: 0.72rem; color: #FDE68A; }
.live-device-screen {
  flex: 1; display: grid; place-items: center; padding: 1.5rem; position: relative;
}
.live-out {
  width: min(420px, 100%); border-radius: 1.1rem; padding: 1.25rem 1.3rem; text-align: center;
}
.live-out.wait { color: rgba(255,255,255,0.7); font-size: 1rem; line-height: 1.5; font-weight: 600; }
.live-out.appear {
  background: rgba(0,0,0,0.55); color: #FFF; border: 1px solid rgba(253,230,138,0.45);
  animation: livePop 0.45s ease;
}
.live-out.appear p {
  margin: 0; font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.55; font-weight: 700;
}
.live-out-meta { margin-top: 0.75rem; font-size: 0.75rem; font-weight: 700; color: #FDE68A; }
.live-out.silence { color: #FDE68A; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; }
.live-out.silence span { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: #FECACA; }
.live-out.wrong {
  background: #FEF2F2; color: #7F1D1D; border: 2px solid #F87171; font-weight: 700; line-height: 1.5; text-align: left;
}
.live-seal {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  background: #ECFDF5; color: #065F46; border-radius: 999px; padding: 0.4rem 0.9rem;
  font-size: 0.78rem; font-weight: 800; white-space: nowrap;
}
.live-device-caption {
  padding: 0.85rem 1rem; background: rgba(0,0,0,0.4); color: #CBD5E1; font-size: 0.8rem; text-align: center;
}
@keyframes livePop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
  .live-demo-grid { grid-template-columns: 1fr; }
}

/* 다각도 인터뷰 · 학습 추출 */
.multi-angle { border-color: #7C3AED; }
.angle-sources {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.85rem;
}
.angle-src {
  border: 1.5px solid #E7E5E4; background: #FAFAF9; border-radius: 0.9rem;
  padding: 0.65rem 0.7rem; text-align: left; cursor: pointer;
}
.angle-src strong { display: block; font-size: 0.86rem; color: #1C1917; }
.angle-src span { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: #78716C; font-weight: 600; }
.angle-src.on { background: #5B21B6; border-color: #5B21B6; }
.angle-src.on strong, .angle-src.on span { color: #EDE9FE; }
.angle-learn-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0.75rem; margin-bottom: 0.85rem;
}
.angle-ask {
  background: #1C1917; color: #FAFAF9; border-radius: 1.1rem; padding: 1.05rem 1.1rem;
}
.angle-ask .interview-q { color: #FFF; }
.angle-lands {
  font-size: 0.75rem; font-weight: 700; color: #C4B5FD; margin: -0.35rem 0 0.75rem;
}
.angle-profiles { display: grid; gap: 0.45rem; }
.angle-prof-card {
  background: #F5F3FF; border: 1.5px solid #DDD6FE; border-radius: 0.85rem; padding: 0.65rem 0.75rem;
}
.angle-prof-card h5 { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 800; color: #5B21B6; }
.angle-prof-card p { margin: 0.15rem 0; font-size: 0.78rem; color: #44403C; line-height: 1.35; }
.angle-prof-card em { font-style: normal; font-weight: 800; color: #7C3AED; margin-right: 0.25rem; }
.angle-ledger ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.angle-ledger li {
  font-size: 0.78rem; background: #FAFAF9; border-radius: 0.55rem; padding: 0.45rem 0.6rem; color: #44403C; line-height: 1.4;
}
.angle-ledger time { font-weight: 800; color: #7C3AED; margin-right: 0.35rem; }
.angle-ledger .lands {
  display: inline-block; margin-left: 0.35rem; font-size: 0.68rem; font-weight: 800;
  background: #EDE9FE; color: #5B21B6; border-radius: 999px; padding: 0.05rem 0.45rem;
}
@media (max-width: 900px) {
  .angle-sources, .angle-learn-grid { grid-template-columns: 1fr; }
}