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

/**
 * ==============================================================================
 * @file style.css
 * @description UNNAMED (unnamed.co.kr) - 안개 & 구름 속 볼륨 에디션 (Misty Cloud Realm)
 * - 기본 폰트: 프리텐다드(Pretendard) 전역 최우선 적용
 * - 철학: "이름을 지우면, 본질이 보인다" (자욱한 안개와 운해 속에서 피어나는 본질)
 * ==============================================================================
 */

:root {
  /* ==========================================================================
     글로벌 폰트: 프리텐다드(Pretendard)를 사이트 전체의 절대적 기본 폰트로 확립
     ========================================================================== */
  --font-default: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-display: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-narrative: 'Pretendard', -apple-system, sans-serif;
  --font-creative: 'Pretendard', -apple-system, sans-serif;
  --font-tech-display: 'Pretendard', -apple-system, sans-serif;
  --font-tech-body: 'Pretendard', -apple-system, sans-serif;
  --font-mono: 'Fira Code', 'Pretendard', monospace;

  /* 안개 & 구름(Misty Cloud) 앰비언트 배경 팔레트 */
  --bg-mist-base: #e5eaed;
  --bg-mist-deep: #d8e0e5;
  --bg-mist-card: rgba(255, 255, 255, 0.72);
  --bg-mist-card-hover: rgba(255, 255, 255, 0.88);
  --bg-glass-nav: rgba(255, 255, 255, 0.78);

  /* 호환용 변수 */
  --bg-sandstone-card: var(--bg-mist-card);
  --bg-sandstone-subtle: rgba(240, 245, 248, 0.7);

  /* 결로와 이슬을 머금은 듯한 반투명 테두리 */
  --border-mist: rgba(255, 255, 255, 0.88);
  --border-mist-subtle: rgba(148, 163, 184, 0.22);
  --border-sand: rgba(148, 163, 184, 0.22);
  --border-sand-hover: rgba(71, 85, 105, 0.4);

  /* 선명하고 묵직한 스톤 차콜 잉크 (안개 속에서도 완벽한 가독성 보장) */
  --text-ink: #0f172a;
  --text-sub: #334155;
  --text-muted: #64748b;
  --text-dim: #94a3b8;

  /* 5대 카테고리 에테리얼 안개 액센트 */
  --accent-giving: #059669;
  --accent-giving-bg: rgba(209, 250, 229, 0.85);
  --accent-giving-border: rgba(110, 231, 183, 0.6);

  --accent-labs: #0284c7;
  --accent-labs-bg: rgba(224, 242, 254, 0.85);
  --accent-labs-border: rgba(125, 211, 252, 0.6);

  --accent-creators: #7c3aed;
  --accent-creators-bg: rgba(237, 233, 254, 0.85);
  --accent-creators-border: rgba(196, 181, 253, 0.6);

  --accent-talk: #d97706;
  --accent-talk-bg: rgba(254, 243, 199, 0.85);
  --accent-talk-border: rgba(252, 211, 77, 0.6);

  --accent-heroes: #e11d48;
  --accent-heroes-bg: rgba(255, 228, 230, 0.85);
  --accent-heroes-border: rgba(253, 164, 175, 0.6);

  /* 구름 속 앰비언트 소프트 섀도우 */
  --shadow-sm: 0 4px 12px -2px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 16px 36px -4px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(15, 23, 42, 0.03);
  --shadow-card-hover: 0 24px 50px -6px rgba(15, 23, 42, 0.13), 0 8px 18px rgba(15, 23, 42, 0.05);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  --transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   전역 스타일 & 기본 셋업 (Pretendard 절대 강제)
   ========================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
}

html, body, button, input, select, textarea {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

/* =========================================
   안개 & 구름속 테마 배경 (Misty Cloud Theme)
   ========================================= */
body.mist-theme,
body.sandstone-theme {
  background-color: var(--bg-mist-base);
  color: var(--text-ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  /* 새벽 운해(구름 바다) 속의 부드러운 다각도 그라데이션 */
  background: 
    radial-gradient(ellipse at 15% 15%, rgba(224, 242, 254, 0.8) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 20%, rgba(243, 232, 255, 0.75) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(254, 243, 199, 0.5) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 85%, rgba(2, 132, 199, 0.15) 0%, transparent 65%),
    linear-gradient(145deg, #e2e8ec 0%, #dae2e7 40%, #e0e7ec 75%, #d8e0e6 100%);
  background-attachment: fixed;
}

/* =========================================
   몽환적인 안개 & 구름 속 볼륨 레이어 (Mist Cloud Realm)
   ========================================= */
.mist-cloud-realm {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* 태초의 운해(Sea of Clouds) 고해상도 베이스 텍스처 레이어 */
.mist-cloud-realm::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/primordial_light_mist.jpg');
  background-size: cover;
  background-position: center 35%;
  opacity: 0.52;
  filter: blur(2px) saturate(110%);
  transform: scale(1.05);
  animation: subtleBreathe 20s ease-in-out infinite alternate;
}

@keyframes subtleBreathe {
  0% { transform: scale(1.04) translateY(0); }
  100% { transform: scale(1.08) translateY(-15px); }
}

/* 빛의 3원색(Red, Green, Blue) 태초의 빛 오르브 */
.cloud-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* 빛의 3원색 - BLUE (무한의 지성 & 심연의 랩스) */
.cloud-orb.orb-1 {
  top: -10%;
  left: -5%;
  width: 950px;
  height: 950px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.35) 0%, rgba(56, 189, 248, 0.18) 45%, rgba(255, 255, 255, 0) 75%);
  filter: blur(95px);
  animation: floatCloud1 28s ease-in-out infinite alternate;
}

/* 빛의 3원색 - RED (생명의 불꽃 & 온기 넘치는 나눔과 영웅) */
.cloud-orb.orb-2 {
  top: 0%;
  right: -10%;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.32) 0%, rgba(244, 63, 94, 0.16) 45%, rgba(255, 255, 255, 0) 75%);
  filter: blur(105px);
  animation: floatCloud2 34s ease-in-out infinite alternate;
}

/* 빛의 3원색 - GREEN (창조의 숨결 & 태초의 생명 인디 창작자) */
.cloud-orb.orb-3 {
  bottom: 0%;
  left: 5%;
  width: 950px;
  height: 950px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, rgba(52, 211, 153, 0.16) 45%, rgba(255, 255, 255, 0) 75%);
  filter: blur(100px);
  animation: floatCloud3 31s ease-in-out infinite alternate;
}

/* 삼원색 융합 - WHITE LIGHT (편견 없는 익명 라운지 프리즘) */
.cloud-orb.orb-4 {
  bottom: -15%;
  right: 10%;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(254, 243, 199, 0.35) 45%, rgba(255, 255, 255, 0) 75%);
  filter: blur(90px);
  animation: floatCloud4 26s ease-in-out infinite alternate;
}

/* 구름 부유 애니메이션 (Cloud Float Keyframes) */
@keyframes floatCloud1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(120px, 80px) scale(1.12); }
  100% { transform: translate(-60px, 140px) scale(0.95); }
}

@keyframes floatCloud2 {
  0% { transform: translate(0, 0) scale(1.05); }
  50% { transform: translate(-140px, 110px) scale(0.92); }
  100% { transform: translate(-80px, -70px) scale(1.1); }
}

@keyframes floatCloud3 {
  0% { transform: translate(0, 0) scale(0.96); }
  50% { transform: translate(90px, -90px) scale(1.15); }
  100% { transform: translate(160px, -40px) scale(1.02); }
}

@keyframes floatCloud4 {
  0% { transform: translate(0, 0) scale(1.1); }
  50% { transform: translate(-110px, -100px) scale(0.95); }
  100% { transform: translate(70px, -80px) scale(1.08); }
}

/* 자욱한 안개 연무 레이어 (Flowing Fog Drift) */
.fog-smoke-layer {
  position: absolute;
  inset: -100%;
  width: 300%;
  height: 300%;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, 0.45) 0%, transparent 60%);
  filter: blur(60px);
  opacity: 0.65;
  mix-blend-mode: overlay;
  animation: fogDrift 45s linear infinite;
  pointer-events: none;
}

@keyframes fogDrift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-15%, -8%); }
  100% { transform: translate(0, 0); }
}

/* 마우스 추적 은은한 안개 빛무리 */
.ambient-glow-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease-out;
  z-index: 0;
  filter: blur(40px);
}


.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* =========================================
   스페이셜 글래스 네비게이션
   ========================================= */
.spatial-navbar {
  position: sticky;
  top: 14px;
  z-index: 100;
  padding: 0 20px;
  margin-bottom: 20px;
}

.nav-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--bg-glass-nav);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-sand);
  border-radius: var(--radius-full);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 16px;
  box-shadow: 0 10px 30px -4px rgba(44, 38, 30, 0.08);
}

.brand-monolith {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-ink);
}

.brand-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.brand-monolith:hover .brand-symbol {
  transform: scale(1.06);
}

.brand-copy {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-ink);
  line-height: 1.05;
}

.brand-domain {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: #78716c;
  letter-spacing: 0.05em;
}

/* 5대 포털 캡슐 내비게이션 */
.portal-capsule-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(234, 228, 218, 0.75);
  border: 1px solid var(--border-sand);
  border-radius: var(--radius-full);
  padding: 4px;
}

.capsule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: #57534e;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.capsule-btn:hover {
  color: var(--text-ink);
  background: rgba(255, 255, 255, 0.6);
}

.capsule-btn.active {
  background: #ffffff;
  color: var(--text-ink);
  box-shadow: 0 2px 8px rgba(44, 38, 30, 0.1);
}

.btn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.dot-all { background: #1c1917; }
.dot-giving { background: var(--accent-giving); }
.dot-creators { background: var(--accent-creators); }
.dot-labs { background: var(--accent-labs); }
.dot-talk { background: var(--accent-talk); }
.dot-heroes { background: var(--accent-heroes); }

.classified-pill {
  font-size: 0.6rem;
  font-family: var(--font-mono);
  background: #e0f2fe;
  color: #0369a1;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.system-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #047857;
  background: #e6f4ea;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  border: 1px solid #a7f3d0;
  font-weight: 700;
}

.live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #047857;
  box-shadow: 0 0 6px #047857;
  animation: pulseAnim 1.8s infinite;
}

@keyframes pulseAnim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* =========================================
   시네마틱 히어로 매트릭스
   ========================================= */
.monolith-hero {
  padding: 68px 0 50px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-full);
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.badge-icon {
  color: #0284c7;
}

.hero-main-title {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  font-size: 3.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--text-ink);
  margin-bottom: 20px;
}

.gradient-glimmer {
  background: linear-gradient(135deg, #0f172a 15%, #0369a1 55%, #6d28d9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-sub-text {
  font-size: 1.1rem;
  color: var(--text-sub);
  max-width: 780px;
  line-height: 1.75;
  margin-bottom: 30px;
}

.hero-sub-text strong {
  color: var(--text-ink);
}

/* =========================================
   태초의 빛: 삼원색(RGB) 프리즘 바 (Primordial Light Bar)
   ========================================= */
.primordial-light-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 38px;
  max-width: 900px;
}

.light-prism-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), inset 0 1px 1px #ffffff;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-default);
  text-decoration: none;
}

.light-prism-chip:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 22px -3px rgba(15, 23, 42, 0.1), inset 0 1px 2px #ffffff;
}

.chip-glow-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: relative;
}

.chip-glow-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: pulseLight 2s infinite ease-out;
}

@keyframes pulseLight {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.chip-badge {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.chip-meaning {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-sub);
  letter-spacing: -0.01em;
}

/* 1. RED: 생명의 불꽃 */
.chip-red .chip-badge,
.chip-red .chip-meaning {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
}
.chip-red .chip-glow-pulse { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
.chip-red .chip-glow-pulse::after { background: #ef4444; }
.chip-red .chip-badge { color: #dc2626; font-size: 0.8rem; }
.chip-red:hover { border-color: rgba(239, 68, 68, 0.45); background: rgba(254, 242, 242, 0.9); }

/* 2. GREEN: 창조의 숨결 */
.chip-green .chip-badge,
.chip-green .chip-meaning {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
}
.chip-green .chip-glow-pulse { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.7); }
.chip-green .chip-glow-pulse::after { background: #10b981; }
.chip-green .chip-badge { color: #059669; font-weight: 800; }
.chip-green:hover { border-color: rgba(16, 185, 129, 0.45); background: rgba(236, 253, 245, 0.9); }

/* 3. BLUE: 심연의 지성 */
.chip-blue .chip-badge,
.chip-blue .chip-meaning {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
}
.chip-blue .chip-badge {
  color: #0284c7;
  font-weight: 800;
}
.chip-blue .chip-meaning {
  font-weight: 600;
}
.chip-blue .chip-glow-pulse { background: #0284c7; box-shadow: 0 0 10px rgba(2, 132, 199, 0.7); }
.chip-blue .chip-glow-pulse::after { background: #0284c7; }
.chip-blue:hover { border-color: rgba(2, 132, 199, 0.45); background: rgba(240, 249, 255, 0.9); }

/* 4. WHITE / FUSION: 편견 없는 본질 */
.chip-fusion .chip-badge,
.chip-fusion .chip-meaning {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
}
.chip-fusion .chip-badge { color: #d97706; font-weight: 900; }
.chip-fusion .chip-glow-pulse { background: #f59e0b; box-shadow: 0 0 10px rgba(245, 158, 11, 0.7); }
.chip-fusion .chip-glow-pulse::after { background: #f59e0b; }
.chip-fusion:hover { border-color: rgba(245, 158, 11, 0.45); background: rgba(255, 251, 235, 0.9); }

.hero-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.hero-scroll-cue:hover {
  color: var(--text-ink);
  transform: translateY(3px);
}

.scroll-arrow-anim {
  animation: bounceDown 1.8s infinite ease-in-out;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* =========================================
   5대 포털 벤토 매트릭스 그리드 (Bento Matrix)
   ========================================= */
.bento-spatial-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto 90px;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.bento-span-2 {
  grid-column: span 2;
}

/* 구름 위에 부유하는 프로스티드 글래스 벤토 카드 */
.bento-card {
  background: var(--bg-mist-card);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-mist);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.bento-card:hover {
  background: var(--bg-mist-card-hover);
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: var(--shadow-card-hover), inset 0 1px 2px rgba(255, 255, 255, 1);
}

/* 각 카드별 백라이트 앰비언트 오로라 글로우 */
.bento-glow-bg {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.22;
  transition: opacity 0.35s ease;
}

.bento-card:hover .bento-glow-bg {
  opacity: 0.42;
}

.glow-emerald { background: #34d399; }
.glow-blue { background: #60a5fa; }
.glow-purple { background: #c084fc; }
.glow-amber { background: #fbbf24; }
.glow-rose { background: #f472b6; }

.bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.bento-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.tag-emerald { background: var(--accent-giving-bg); color: var(--accent-giving); border: 1px solid var(--accent-giving-border); }
.tag-blue { background: var(--accent-labs-bg); color: var(--accent-labs); border: 1px solid var(--accent-labs-border); }
.tag-purple { background: var(--accent-creators-bg); color: var(--accent-creators); border: 1px solid var(--accent-creators-border); }
.tag-amber { background: var(--accent-talk-bg); color: var(--accent-talk); border: 1px solid var(--accent-talk-border); }
.tag-rose { background: var(--accent-heroes-bg); color: var(--accent-heroes); border: 1px solid var(--accent-heroes-border); }

.bento-status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: #f4f0e8;
  color: #44403c;
}

.badge-live {
  border: 1px solid var(--accent-giving-border);
  color: var(--accent-giving);
  background: var(--accent-giving-bg);
}

.bento-title {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: var(--text-ink);
  margin-bottom: 12px;
}

.bento-desc {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  font-size: 0.95rem;
  color: var(--text-sub);
  line-height: 1.65;
  margin-bottom: 24px;
}

.cyber-terminal-box,
.classified-stamp,
.odometer-value,
.code-mono {
  font-family: var(--font-mono);
}

/* =========================================
   [BENTO 1: GIVING] 오도미터 전광판 & 티커
   ========================================= */
.odometer-display-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: #f7f3eb;
  border: 1px solid var(--accent-giving-border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
}

.odometer-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.odometer-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #78716c;
}

.odometer-value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-ink);
}

.text-emerald { color: #047857; }
.text-sky { color: #0369a1; }
.text-blue { color: #1d4ed8; }
.text-amber { color: #b45309; }

.live-giving-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fbf9f5;
  border: 1px dashed var(--border-sand-hover);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: #44403c;
  margin-bottom: 24px;
}

.ticker-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: #047857;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 4px;
}

/* =========================================
   [BENTO 2: LABS] 사이버 터미널 콘솔
   ========================================= */
.classified-stamp {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  color: #b91c1c;
  border: 1px solid #f87171;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  background: #fef2f2;
}

.cyber-terminal-box {
  background: #1c1917;
  border: 1px solid #44403c;
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-bottom: 20px;
}

.terminal-bar {
  background: #292524;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #44403c;
}

.term-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.term-title {
  margin-left: 8px;
  font-size: 0.68rem;
  color: #a8a29e;
}

.terminal-content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #f5f5f4;
}

.prompt { color: #38bdf8; font-weight: 700; }
.cmd { color: #ffffff; }
.output { color: #d6d3d1; font-size: 0.76rem; }
.tag-status {
  background: rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.65rem;
  margin-left: 6px;
}

.passport-waitlist-box {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.passport-waitlist-box input {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--border-sand-hover);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  color: var(--text-ink);
  font-size: 0.86rem;
  outline: none;
  transition: var(--transition);
}

.passport-waitlist-box input:focus {
  border-color: #0369a1;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.15);
}

.waitlist-count-label {
  font-size: 0.78rem;
  color: #78716c;
}

/* =========================================
   [BENTO 3: CREATORS] 오디오 웨이브 & 창작자 카드
   ========================================= */
.audio-wave-anim {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}

.audio-wave-anim span {
  width: 3px;
  background: #6d28d9;
  border-radius: 2px;
  animation: wavePulse 1.2s infinite ease-in-out;
}

.audio-wave-anim span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.audio-wave-anim span:nth-child(2) { height: 16px; animation-delay: 0.3s; }
.audio-wave-anim span:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.audio-wave-anim span:nth-child(4) { height: 14px; animation-delay: 0.4s; }
.audio-wave-anim span:nth-child(5) { height: 8px; animation-delay: 0.15s; }

@keyframes wavePulse {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.2); }
}

.creator-featured-box {
  background: #f8f6f0;
  border: 1px solid var(--accent-creators-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

.creator-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.creator-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: #ede9fe;
  color: #6d28d9;
  padding: 2px 7px;
  border-radius: 4px;
}

.creator-author {
  font-size: 0.75rem;
  color: #78716c;
}

.creator-work-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-ink);
  margin-bottom: 6px;
}

.creator-work-desc {
  font-size: 0.85rem;
  color: var(--text-sub);
  margin-bottom: 12px;
}

.creator-tags {
  display: flex;
  gap: 6px;
}

.creator-tags span {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  background: #ffffff;
  color: #57534e;
  border: 1px solid var(--border-sand);
  padding: 2px 6px;
  border-radius: 4px;
}

.card-like-btn-big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-creators-bg);
  border: 1px solid var(--accent-creators-border);
  color: var(--accent-creators);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.card-like-btn-big:hover {
  background: #6d28d9;
  color: #ffffff;
  transform: scale(1.04);
}

/* =========================================
   [BENTO 4: TALK] 익명 모놀로그 피드 & 프롬프트
   ========================================= */
.anonymous-privacy-shield {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
}

.monologue-feed-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.monologue-bubble {
  background: #fbf9f4;
  border: 1px solid var(--accent-talk-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.monologue-text {
  font-size: 0.88rem;
  color: var(--text-ink);
  line-height: 1.6;
}

.monologue-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #78716c;
  border-top: 1px solid rgba(44, 38, 30, 0.06);
  padding-top: 8px;
}

.monologue-like {
  background: transparent;
  border: none;
  color: #b45309;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.anonymous-input-dock {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--accent-talk-border);
  border-radius: var(--radius-lg);
  padding: 8px 14px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.dock-prefix {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #b45309;
  white-space: nowrap;
}

.anonymous-input-dock input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-ink);
  font-size: 0.9rem;
}

.anonymous-counter-text {
  font-size: 0.78rem;
  color: #78716c;
}

/* =========================================
   [BENTO 5: HEROES] 시네마틱 필름 뷰어
   ========================================= */
.film-grain-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #9f1239;
  letter-spacing: 0.1em;
  border: 1px solid #fecdd3;
  padding: 2px 7px;
  border-radius: 4px;
  background: #ffe4e6;
  font-weight: 700;
}

.hero-cinematic-card {
  background: #faf4ed;
  border: 1px solid var(--accent-heroes-border);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  position: relative;
  margin-bottom: 24px;
}

.film-quote-mark {
  font-family: serif;
  font-size: 2.8rem;
  line-height: 1;
  color: #9f1239;
  opacity: 0.35;
  margin-bottom: -10px;
}

.film-quote-text {
  font-size: 0.96rem;
  font-weight: 600;
  color: #881337;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 16px;
}

.film-person-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(44, 38, 30, 0.08);
  padding-top: 12px;
}

.film-person-meta strong {
  font-size: 0.85rem;
  color: var(--text-ink);
}

.film-person-meta span {
  font-size: 0.72rem;
  color: #78716c;
}

/* =========================================
   버튼 시스템 (내추럴 샌드스톤 & 안료)
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  border: none;
  outline: none;
}

.btn-glass {
  background: #ffffff;
  color: var(--text-ink);
  border: 1px solid var(--border-sand-hover);
  box-shadow: var(--shadow-sm);
}
.btn-glass:hover {
  background: #f4f0e8;
  transform: translateY(-2px);
}

.btn-glass-sm {
  background: #ffffff;
  color: #44403c;
  border: 1px solid var(--border-sand);
  padding: 7px 14px;
  font-size: 0.8rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.btn-glass-sm:hover {
  color: var(--text-ink);
  border-color: var(--border-sand-hover);
}

.btn-action-glow {
  background: #047857;
  color: #ffffff;
  padding: 8px 18px;
  font-size: 0.82rem;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.25);
}
.btn-action-glow:hover {
  background: #065f46;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4, 120, 87, 0.35);
}

.btn-emerald-glow {
  background: #047857;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(4, 120, 87, 0.25);
}
.btn-emerald-glow:hover {
  background: #065f46;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4, 120, 87, 0.35);
}

.btn-blue-glow {
  background: #0369a1;
  color: #ffffff;
  font-weight: 800;
  padding: 8px 16px;
  box-shadow: 0 4px 14px rgba(3, 105, 161, 0.25);
}
.btn-blue-glow:hover {
  background: #075985;
}

.btn-amber-glow {
  background: #b45309;
  color: #ffffff;
  font-weight: 800;
  padding: 8px 18px;
}
.btn-amber-glow:hover {
  background: #92400e;
}

.btn-rose-glow {
  background: #9f1239;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(159, 18, 57, 0.25);
}
.btn-rose-glow:hover {
  background: #881337;
  transform: translateY(-2px);
}

.bento-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid var(--border-sand);
  padding-top: 20px;
}

/* =========================================
   스페이셜 모달 다이얼로그 (Warm Sand Glass)
   ========================================= */
.spatial-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.spatial-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.spatial-modal-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 580px;
  padding: 36px 32px;
  box-shadow: 0 30px 70px -10px rgba(15, 23, 42, 0.18), inset 0 1px 2px #ffffff;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
  font-family: var(--font-default);
}

.spatial-modal-card.modal-card-wide {
  max-width: 680px;
}

.spatial-modal-overlay.active .spatial-modal-card {
  transform: scale(1) translateY(0);
}

.modal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.modal-badge {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.modal-x-btn {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: #78716c;
  cursor: pointer;
  transition: color 0.18s ease;
}
.modal-x-btn:hover { color: var(--text-ink); }

.modal-h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-ink);
  margin-bottom: 6px;
}

.modal-sub {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 24px;
}

.input-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.input-field label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-ink);
}

.input-field input,
.input-field select,
.input-field textarea {
  background: #ffffff;
  border: 1px solid var(--border-sand-hover);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-ink);
  font-size: 0.92rem;
  outline: none;
  transition: var(--transition);
}

.input-field input:focus,
.input-field select:focus,
.input-field textarea:focus {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

/* 아티클 리더 전용 */
.article-meta {
  font-size: 0.8rem;
  color: #9f1239;
  font-weight: 700;
  margin-bottom: 20px;
}

.article-content-body {
  font-size: 0.95rem;
  color: var(--text-sub);
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-quote {
  background: #ffe4e6;
  border-left: 3px solid #9f1239;
  padding: 16px 18px;
  border-radius: 4px;
  color: #881337;
  font-style: italic;
  font-weight: 600;
}

/* =========================================
   토스트 도킹 시스템
   ========================================= */
.spatial-toast-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spatial-toast {
  background: #1c1917;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  animation: toastPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastPop {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================
   스페이셜 푸터 (Sandstone Footer)
   ========================================= */
.spatial-footer {
  border-top: 1px solid var(--border-sand);
  padding: 60px 0 30px;
  background: #eae4da;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.f-logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-ink);
  letter-spacing: 0.15em;
}

.f-logo-sub {
  font-size: 0.75rem;
  color: #78716c;
  font-family: var(--font-mono);
}

.footer-philo {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.7;
  max-width: 520px;
}

.footer-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.f-col h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-ink);
  margin-bottom: 14px;
}

.f-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.f-col a {
  text-decoration: none;
  color: #57534e;
  font-size: 0.84rem;
  font-weight: 600;
  transition: color 0.18s ease;
}

.f-col a:hover {
  color: var(--text-ink);
}

.footer-copyright {
  border-top: 1px solid rgba(44, 38, 30, 0.08);
  padding-top: 24px;
  text-align: center;
  font-size: 0.75rem;
  color: #78716c;
}

/* =========================================
   [BENTO 6: MANIFESTO] 본질 선언문 스타일
   ========================================= */
.manifesto-principles-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.principle-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: var(--transition);
}

.principle-item:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
}

.p-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  color: #7c3aed;
  background: rgba(237, 233, 254, 0.9);
  padding: 3px 7px;
  border-radius: 4px;
}

.p-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-text strong {
  font-size: 0.9rem;
  color: var(--text-ink);
}

.p-text span {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.45;
}

/* =========================================
   [BENTO 7: TIME CAPSULE] 1년 타임캡슐 스타일
   ========================================= */
.capsule-input-dock {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(125, 211, 252, 0.5);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.capsule-input-dock textarea {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-default);
  font-size: 0.88rem;
  color: var(--text-ink);
  resize: none;
}

.capsule-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.capsule-meta {
  font-size: 0.72rem;
  color: #64748b;
  font-family: var(--font-mono);
}

.sealed-capsules-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #0284c7;
  background: rgba(224, 242, 254, 0.75);
  border: 1px dashed rgba(56, 189, 248, 0.6);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.ticker-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0284c7;
  box-shadow: 0 0 8px #0284c7;
  animation: pulseLight 1.8s infinite;
}

/* =========================================
   [BENTO 8: GLOBAL PULSE MAP] 등불 지도 스타일
   ========================================= */
.pulse-visual-radar {
  position: relative;
  height: 170px;
  background: radial-gradient(circle, rgba(209, 250, 229, 0.6) 0%, rgba(255, 255, 255, 0.5) 70%);
  border: 1px solid rgba(110, 231, 183, 0.5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.radar-circle.circle-1 { width: 80px; height: 80px; }
.radar-circle.circle-2 { width: 140px; height: 140px; }
.radar-circle.circle-3 { width: 200px; height: 200px; }

.pulse-beacon {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pulse-beacon:hover {
  transform: scale(1.12);
}

.beacon-glow {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 10px #059669;
  animation: pulseLight 2s infinite;
}

.beacon-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
  color: #065f46;
  border: 1px solid rgba(110, 231, 183, 0.6);
}

.beacon-seoul { top: 32%; left: 45%; }
.beacon-tokyo { top: 40%; left: 68%; }
.beacon-berlin { top: 60%; left: 25%; }
.beacon-nyc { top: 68%; left: 78%; }

.pulse-status-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(110, 231, 183, 0.4);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.stat-number {
  font-family: var(--font-tech-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #059669;
  display: block;
}

.stat-name {
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 600;
}

/* =========================================
   실시간 글로벌 임팩트 배너 (Impact Banner)
   ========================================= */
.essence-impact-banner {
  margin: 0 auto 50px;
  padding: 0 24px;
}

.impact-banner-inner {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-mist);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  box-shadow: var(--shadow-card), inset 0 1px 2px #ffffff;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: center;
}

.impact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.live-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseLight 1.8s infinite;
}

.impact-headline {
  font-family: var(--font-narrative);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-ink);
  margin-bottom: 14px;
}

.impact-subtext {
  font-size: 0.95rem;
  color: var(--text-sub);
  line-height: 1.65;
}

.impact-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.impact-metric-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.04);
  transition: var(--transition);
}

.impact-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -4px rgba(15, 23, 42, 0.09);
}

.metric-top-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.metric-big-num {
  font-family: var(--font-tech-display);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 6px;
}

.metric-caption {
  font-size: 0.78rem;
  color: var(--text-sub);
}

/* =========================================
   오늘의 본질 명언 & 앰비언트 사운드 독
   ========================================= */
.essence-inspiration-dock {
  margin: 0 auto 70px;
  padding: 0 24px;
}

.dock-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-mist);
  border-radius: var(--radius-full);
  padding: 14px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dock-quote-box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.dock-quote-icon {
  color: #d97706;
  font-size: 1.1rem;
}

.dock-quote-text {
  font-family: var(--font-narrative);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-ink);
  line-height: 1.5;
}

.dock-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dock-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-mist);
  border-radius: var(--radius-full);
  padding: 7px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-sub);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.dock-action-btn:hover {
  background: #ffffff;
  color: var(--text-ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.sound-toggle-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* =========================================
   반응형 모바일/태블릿 최적화
   ========================================= */
@media (max-width: 1024px) {
  .portal-capsule-nav {
    display: none;
  }
  .bento-spatial-container {
    grid-template-columns: 1fr;
  }
  .bento-span-2 {
    grid-column: span 1;
  }
  .odometer-display-box {
    grid-template-columns: 1fr;
  }
  .monologue-feed-wall {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* 🌟 [태블릿/중소형 화면] 임팩트 배너 1열 전환 */
  .impact-banner-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 30px;
  }

  /* 🌟 [태블릿/중소형 화면] 본질의 울림 독 카드 세로 정렬 및 패딩 최적화 */
  .dock-card {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    gap: 16px;
  }

  .dock-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .hero-main-title {
    font-size: 2.2rem;
  }
  .bento-card {
    padding: 24px 20px;
  }
  .bento-title {
    font-size: 1.35rem;
  }
  .bento-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .passport-waitlist-box {
    flex-direction: column;
  }

  /* 🌟 [모바일 스마트폰] 우리가 이름을 지웠을 때... 카드 레이아웃 완벽 최적화 */
  .essence-impact-banner {
    padding: 0 16px;
    margin-bottom: 36px;
  }

  .impact-banner-inner {
    padding: 26px 18px;
    gap: 24px;
    border-radius: var(--radius-lg);
  }

  .impact-headline {
    font-size: 1.4rem;
    line-height: 1.35;
    word-break: keep-all;
    margin-bottom: 10px;
  }

  .impact-subtext {
    font-size: 0.86rem;
    line-height: 1.55;
    word-break: keep-all;
  }

  /* 4개 지표 카드를 1열로 넉넉하고 시원하게 배치하여 숫자 깨짐 원천 차단 */
  .impact-metrics-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .impact-metric-card {
    padding: 16px 18px;
    border-radius: var(--radius-md);
  }

  .metric-big-num {
    font-size: 1.45rem;
  }

  .metric-caption {
    font-size: 0.74rem;
    line-height: 1.4;
    word-break: keep-all;
  }

  /* 🌟 [모바일 스마트폰] 또 다른 본질의 울림 독 카드 모바일 뷰 최적화 */
  .essence-inspiration-dock {
    padding: 0 16px;
    margin-bottom: 45px;
  }

  .dock-card {
    padding: 16px 16px;
    border-radius: var(--radius-lg);
    gap: 14px;
  }

  .dock-quote-box {
    align-items: flex-start;
    gap: 10px;
  }

  .dock-quote-icon {
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
  }

  .dock-quote-text {
    font-size: 0.88rem;
    line-height: 1.55;
    word-break: keep-all;
  }

  /* 모바일 버튼 2개(울림 넘기기 & 백색소음)를 1:1 너비로 나란히 배치 */
  .dock-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }

  .dock-action-btn {
    flex: 1;
    justify-content: center;
    padding: 10px 10px;
    font-size: 0.74rem;
    text-align: center;
    white-space: nowrap;
  }
}