/*
  Styles for the NOVUS narrative site.
  Integrated with Enhanced Celestial Brutalism design.
  Focus on calm surfaces, generous spacing, and readable typography.
*/

:root {
  /* Obsidian Theme: Deeper, cooler black */
  --bg-night: #05070a;
  --bg-tide: rgba(8, 12, 16, 0.85);

  --fg-primary: #f7f9fc;
  /* WCAG AA 준수를 위한 명도 개선 */
  --fg-muted: rgba(247, 249, 252, 0.85);

  /* Celestial Brutalism - Gold + Deep Indigo + Rust */
  /* Enhanced Gold for better contrast against deep black */
  --accent-gold: #ffd700;
  --accent-rust: #c4704f;
  --accent-indigo: #4a6fa5;
  --accent-terracotta: #d47853;
  --accent-bronze: #cd7f32;
  --accent-midnight: #1a2332;

  /* Legacy/fallback colors */
  --accent-amber: #ffcf40;
  --accent-cerulean: #5bb1f8;
  --accent-teal: #5eead4;
  --accent-purple: #a78bfa;

  /* Semantic colors */
  --gold: var(--accent-gold);
  --ink: var(--fg-primary);
  --ink-d: var(--fg-muted);
  --s-color: var(--accent-indigo);
  --h-color: var(--accent-gold);

  /* Surface gradients - More subtle for obsidian feel */
  --surface-dawn: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(212, 120, 83, 0.05));
  --surface-ember: linear-gradient(135deg, rgba(196, 112, 79, 0.12), rgba(205, 127, 50, 0.08));
  --surface-noon: linear-gradient(135deg, rgba(61, 90, 128, 0.12), rgba(26, 35, 50, 0.7));
  --surface-twilight: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(74, 111, 165, 0.3));
  --surface-night: linear-gradient(135deg, rgba(10, 14, 20, 0.8), rgba(0, 0, 0, 0.95));
  --surface-stone: linear-gradient(135deg, rgba(205, 127, 50, 0.08), rgba(74, 111, 165, 0.05));

  --max-width: 1120px;
  --header-height: 72px;
  /* Slightly taller for elegance */
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Pretendard', sans-serif;
  line-height: 1.7;
  /* Slightly tighter for editorial feel */
  /* Increased breathing room */
  color: var(--fg-primary);
  /* Make transparent for 3D Universe */
  background: transparent;
  min-height: 100vh;
  overflow-x: hidden;
  /* 한글 줄바꿈 최적화 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.menu-open {
  overflow: hidden;
}

/* ===== GRAIN TEXTURE OVERLAY (From Enhanced) ===== */
/* 시각적 피로도 완화: opacity 0.025 -> 0.02로 미세 조정 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.4"/></svg>');
  opacity: 0.05;
  /* More visible noise for texture */
  /* Adjusted for analog feel */
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 50;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translate(-50%, -120%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.95);
  color: var(--fg-primary);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  z-index: 1000;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ===== Global Light Effects ===== */
/* 시각적 피로도 완화: 배경 효과 투명도 조절 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg,
      transparent 0%,
      rgba(247, 199, 112, 0.08) 20%,
      rgba(61, 90, 128, 0.06) 40%,
      transparent 60%,
      rgba(196, 112, 79, 0.05) 80%,
      transparent 100%);
  animation: auroraDrift 45s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  /* 0.75 -> 0.6 */
  filter: blur(70px);
}

@keyframes auroraDrift {
  0% {
    transform: translateX(-10%) translateY(0) scale(1);
    opacity: 0.4;
  }

  50% {
    transform: translateX(10%) translateY(-5%) scale(1.1);
    opacity: 0.6;
  }

  100% {
    transform: translateX(-5%) translateY(5%) scale(0.95);
    opacity: 0.5;
  }
}

main {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

.container {
  width: min(var(--max-width), 94vw);
  margin: 0 auto;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  background: rgba(5, 7, 10, 0.6);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.site-header[data-theme="transparent"] {
  background: linear-gradient(180deg, rgba(15, 20, 25, 0.15), rgba(15, 20, 25, 0.65));
}

.site-header.is-scrolled {
  background: rgba(17, 24, 31, 0.92);
  border-bottom-color: rgba(247, 199, 112, 0.25);
}

.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-primary);
}

.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 199, 112, 0.28);
  background: rgba(17, 24, 31, 0.48);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.site-nav {
  position: absolute;
  inset: calc(var(--header-height) + 8px) 3vw auto 3vw;
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(16, 21, 28, 0.95);
  border: 1px solid rgba(247, 199, 112, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.site-nav.is-open {
  display: flex;
}

.site-nav a {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 6px 0;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.is-active {
  color: var(--accent-amber);
}

.nav-link--accent {
  color: var(--accent-amber);
}

/* ===== Falling Stars & Particles ===== */
.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  will-change: transform, top;
}

/* ===== Mobile Optimizations ===== */
@media (max-width: 768px) {

  /* Thumb-friendly Navigation */
  .site-nav a {
    padding: 14px 0;
    /* Larger touch target */
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Smooth Touch Cards */
  .feature-card:active,
  .principle-card:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.08);
  }
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--star-color, rgba(247, 199, 112, 0.9));
  border-radius: 50%;
  box-shadow: 0 0 6px var(--star-color, rgba(247, 199, 112, 0.8));
  animation: fall linear infinite;
  opacity: 0;
}

.particle {
  position: absolute;
  width: 1px;
  height: 1px;
  background: var(--particle-color, rgba(196, 112, 79, 0.7));
  border-radius: 50%;
  animation: floatDrift 20s ease-in-out infinite;
  opacity: 0;
}

@keyframes floatDrift {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }

  15% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
    transform: translate(var(--drift-x, 30px), var(--drift-y, -50px)) scale(1);
  }

  85% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: translate(var(--drift-x-end, -20px), var(--drift-y-end, -100px)) scale(0.3);
  }
}

@keyframes fall {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 0
      /* universe container behind everything */
    ;
  }

  100% {
    opacity: 0;
    transform: translateY(100vh) translateX(var(--drift, 0)) scale(0.5);
  }
}

#universe-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  overflow: hidden;
  /* Removed border/line artifacts */
}

/* Hide hero-visual to allow 3D universe visibility and remove line artifacts */
.hero-visual {
  display: none;
}




.hero-visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-beam {
  position: absolute;
  width: min(460px, 60vw);
  height: 120vh;
  background: radial-gradient(circle at center, rgba(247, 199, 112, 0.38), rgba(247, 199, 112, 0) 68%);
  filter: blur(36px);
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.8;
  /* Reduced opacity */
}

.hero-content {
  display: grid;
  gap: 24px;
  max-width: 720px;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-rust);
  font-weight: 600;
}

h1 {
  font-family: 'Pretendard', system-ui, sans-serif;
  /* 통합된 반응형 타이포그래피 */
  font-size: clamp(2rem, 8vw, 5.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 700;
  text-shadow: 0 0 50px rgba(255, 215, 0, 0.15);
  word-break: keep-all;
  letter-spacing: -0.04em;
  /* Tighter heading */
}

/* 데스크탑에서 더 큰 타이틀 */
@media (min-width: 769px) {
  h1 {
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: 1.05;
  }
}

.lead {
  color: var(--fg-muted);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.8;
  max-width: 60ch;
  /* 가독성: 텍스트 그림자 추가 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Hero Dialogue */
.hero-dialogue {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(247, 199, 112, 0.15);
  border-bottom: 1px solid rgba(247, 199, 112, 0.15);
}

.dialogue-line {
  font-size: clamp(1.05rem, 2.3vw, 1.25rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--fg-muted);
  word-break: keep-all;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-bronze));
  /* WCAG AAA 대비 보장: 어두운 텍스트 */
  color: #0a0e14;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(247, 199, 112, 0.25);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(247, 199, 112, 0.35);
}

.btn--ghost {
  background: rgba(15, 21, 28, 0.3);
  border: 1px solid rgba(247, 199, 112, 0.3);
  color: var(--fg-muted);
}

.btn--ghost:hover {
  border-color: var(--accent-gold);
  color: var(--fg-primary);
  background: rgba(247, 199, 112, 0.05);
}

/* ===== Story Sections ===== */
.story {
  position: relative;
  padding: clamp(96px, 18vh, 160px) 0;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.story.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Surface Colors */
.surface--dawn {
  background: var(--surface-dawn);
}

.surface--ember {
  background: var(--surface-ember);
}

.surface--noon {
  background: var(--surface-noon);
}

.surface--twilight {
  background: var(--surface-twilight);
}

.surface--night {
  background: var(--surface-night);
}

/* S section: keep night mood but reveal universe stars */
#s.surface--night {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.03) 0%,
    rgba(74, 111, 165, 0.22) 55%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

.surface--stone {
  background: var(--surface-stone);
}

.story-inner {
  display: grid;
  gap: clamp(48px, 8vw, 96px);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .story-inner {
    grid-template-columns: 3fr 4fr;
    /* Asymmetrical Layout (3:4) */
    align-items: center;
  }

  .story-inner--reverse {
    grid-template-columns: 4fr 3fr;
    /* Asymmetrical Layout Reversed */
    direction: rtl;
  }

  .story-inner--reverse .story-text {
    direction: ltr;
  }
}

.story-text {
  display: grid;
  gap: 24px;
  text-align: left;
}

.story-text p {
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  /* 가독성 */
}

.story-text h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.25;
  margin-bottom: 8px;
  word-break: keep-all;
}

.story-tag {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.76rem;
  /* WCAG 대비 개선: 0.6 -> 0.75 */
  color: rgba(247, 249, 252, 0.75);
}

.story-note {
  font-size: 1rem;
  color: var(--accent-gold);
  opacity: 0.9;
  font-style: italic;
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px solid rgba(247, 199, 112, 0.3);
}

/* ===== Manifesto ===== */
.manifesto {
  padding: clamp(80px, 15vh, 140px) 0;
}

.manifesto-content {
  max-width: 800px;
  margin: 0 auto;
}

.manifesto-quote {
  margin: 48px 0;
  padding: 0 0 0 40px;
  border-left: 2px solid var(--accent-gold);
  background: linear-gradient(90deg, rgba(247, 199, 112, 0.05), transparent);
  border-radius: 0 16px 16px 0;
}

.manifesto-quote p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--accent-gold);
  text-shadow: 0 0 30px rgba(247, 199, 112, 0.15);
}

.manifesto-text {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--fg-muted);
  margin-bottom: 24px;
}

/* ===== Studio & Principles ===== */
.section-intro {
  margin-bottom: clamp(56px, 8vw, 88px);
  text-align: center;
}

.section-lead {
  max-width: 680px;
  margin: 0 auto;
  color: var(--fg-muted);
  font-size: clamp(1.05rem, 2.3vw, 1.2rem);
  line-height: 1.8;
}

.feature-grid,
.principle-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 1024px) {
  .principle-grid {
    /* 데스크탑에서는 4개를 한 줄에 정렬 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.feature-card,
.principle-card {
  padding: 32px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.feature-card:hover,
.principle-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(247, 199, 112, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(-8px);
}

.feature-card h3,
.principle-card h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
  color: var(--fg-primary);
}

.feature-card p,
.principle-card p {
  font-size: 0.95rem;
  color: var(--fg-muted);
  line-height: 1.7;
}

.principle-icon {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--accent-amber);
  margin-bottom: 16px;
}

/* ===== Epilogue ===== */
.epilogue {
  padding: clamp(80px, 15vh, 140px) 0;
  text-align: center;
}

.epilogue-quote p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-style: italic;
  color: var(--accent-cerulean);
  margin: 40px 0;
}

.epilogue-cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

/* ===== Cursor Trail ===== */
.cursor-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  transform: scale(1);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  filter: blur(2px);
  box-shadow: 0 0 10px currentColor;
}

@media (pointer: coarse) {
  .cursor-trail {
    display: none;
  }
}

/* Ensure cursor trail is visible on desktop */
@media (pointer: fine) {
  .cursor-trail {
    display: block !important;
  }
}

/* ===== Cursor Lantern Effect (등불 효과) ===== */
.cursor-lantern {
  position: fixed;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      rgba(255, 235, 180, 0.12) 0%,
      rgba(255, 215, 140, 0.08) 20%,
      rgba(255, 200, 100, 0.04) 40%,
      rgba(255, 180, 80, 0.02) 60%,
      transparent 75%);
  filter: blur(30px);
  opacity: 0;
  transition: opacity 0.5s ease-out;
  mix-blend-mode: screen;
}

.cursor-lantern.is-active {
  opacity: 1;
}

/* 등불 내부 코어 (더 밝은 중심) */
.cursor-lantern::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 250, 230, 0.2) 0%,
      rgba(255, 240, 200, 0.1) 40%,
      transparent 70%);
  filter: blur(15px);
  animation: lanternFlicker 3s ease-in-out infinite;
}

/* 은은한 깜빡임 애니메이션 */
@keyframes lanternFlicker {

  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  25% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.97);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }

  75% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.99);
  }
}

@media (pointer: coarse) {
  .cursor-lantern {
    display: none;
  }
}

/* ===== QR / Consult Landing Page ===== */
.qr-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.qr-page::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px;
  background:
    radial-gradient(circle at 50% 0%, rgba(248, 250, 252, 0.32), transparent 60%),
    linear-gradient(to bottom, rgba(251, 191, 36, 0.18), transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.qr-main {
  position: relative;
  z-index: 1;
  width: min(480px, 94vw);
}

.qr-card {
  position: relative;
  border-radius: 24px;
  padding: 28px 24px 26px;
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(248, 250, 252, 0.12);
  backdrop-filter: blur(22px);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.6);
}

.qr-card::before,
.qr-card::after {
  content: none;
}

.qr-card+.qr-card {
  margin-top: 20px;
}

.qr-title {
  margin-top: 10px;
  margin-bottom: 14px;
  font-family: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.qr-sub {
  font-size: 0.98rem;
  color: var(--fg-muted);
  margin-bottom: 22px;
}

.qr-time,
.qr-countdown {
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.qr-time-value,
.qr-countdown-value {
  display: inline-block;
  margin-top: 4px;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--accent-amber);
}

.qr-messages {
  margin: 18px 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.qr-message-line {
  font-size: 0.9rem;
  color: var(--fg-muted);
}

.qr-note {
  margin-top: 10px;
  font-size: 0.76rem;
  color: rgba(148, 163, 184, 0.9);
}

.qr-note--small {
  margin-top: 18px;
}

.qr-stars {
  margin-top: 10px;
  font-size: 0.86rem;
  color: rgba(209, 213, 219, 0.9);
}

.qr-button {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

.spark-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px;
  border-radius: 999px;
  background: #f9fafb;
  box-shadow:
    0 0 4px rgba(249, 250, 251, 0.9),
    0 0 10px rgba(249, 250, 251, 0.8);
  animation: sparkPulse 2.4s ease-in-out infinite;
  vertical-align: middle;
}

.consult-name {
  display: inline-block;
  margin-left: 2px;
  color: rgba(248, 250, 252, 0.96);
  text-shadow:
    0 0 4px rgba(248, 250, 252, 0.75),
    0 0 10px rgba(248, 250, 252, 0.6);
  animation: consultNameGlow 3s ease-in-out infinite;
}

.qr-card .qr-button.btn--primary {
  position: relative;
  background: linear-gradient(90deg, rgba(247, 199, 112, 0.3), rgba(251, 191, 36, 0.4));
  border-color: rgba(247, 199, 112, 0.8);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 0 16px rgba(251, 191, 36, 0.65);
  animation: consultGlow 2.8s ease-in-out infinite;
}

.qr-card .qr-button.btn--primary::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: radial-gradient(circle at 20% 20%, rgba(248, 250, 252, 0.25), transparent 55%);
  opacity: 0.9;
  pointer-events: none;
}

@keyframes consultGlow {
  0% {
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.9),
      0 0 10px rgba(251, 191, 36, 0.4);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 1),
      0 0 20px rgba(251, 191, 36, 0.85);
  }

  100% {
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.9),
      0 0 10px rgba(251, 191, 36, 0.4);
  }
}

@keyframes sparkPulse {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translateY(-1px) scale(1.15);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
}

@keyframes consultNameGlow {
  0% {
    text-shadow:
      0 0 2px rgba(248, 250, 252, 0.5),
      0 0 6px rgba(248, 250, 252, 0.3);
  }

  50% {
    text-shadow:
      0 0 5px rgba(248, 250, 252, 0.9),
      0 0 14px rgba(248, 250, 252, 0.7);
  }

  100% {
    text-shadow:
      0 0 2px rgba(248, 250, 252, 0.5),
      0 0 6px rgba(248, 250, 252, 0.3);
  }
}

.qr-card--open {
  border-color: rgba(248, 250, 252, 0.2);
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid rgba(247, 199, 112, 0.12);
  background: rgba(10, 14, 18, 0.95);
  padding: 48px 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-note {
  margin-top: 40px;
  text-align: center;
  font-size: 0.8rem;
  /* WCAG 최소 대비 확보: 0.4 -> 0.65 */
  color: rgba(247, 249, 252, 0.65);
}

/* ===== Mobile Responsive Improvements ===== */
@media (max-width: 768px) {
  .site-nav {
    display: none;
    /* Mobile menu handled by JS */
  }

  /* 모바일 밸런스: 여백 확보 */
  .hero {
    padding: 120px 0 80px;
    min-height: auto;
  }

  .hero-content {
    gap: 16px;
  }

  .story-inner {
    gap: 40px;
  }

  /* 한국어는 좌측 정렬이 가독성 우수 */
  .story-text {
    text-align: left;
  }

  .story-note {
    border-left: none;
    border-top: 2px solid rgba(247, 199, 112, 0.3);
    padding-left: 0;
    padding-top: 16px;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }
}

@media (min-width: 960px) {
  .menu-button {
    display: none;
  }

  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
}

/* ===== Reveal Animation ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.8;
  }

  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== Print Styles ===== */
@media print {

  body::before,
  body::after,
  .stars-container {
    display: none;
  }

  body {
    background: white;
    color: black;
  }
}

/* ===== Mobile Optimizations (Final Override) ===== */
@media (max-width: 768px) {

  /* Thumb-friendly Navigation */
  .site-nav a {
    padding: 14px 0;
    /* Larger touch target */
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Smooth Touch Cards - Force override hover */
  .feature-card:active,
  .principle-card:active {
    transform: scale(0.98) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.1s;
  }
}

/* ===== Scroll Progress Indicator ===== */
.scroll-progress-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  mix-blend-mode: screen;
}

.scroll-progress-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 0%;
  /* JS will update this */
  background: linear-gradient(to bottom, transparent, var(--accent-gold), var(--accent-indigo));
  box-shadow: 0 0 10px var(--accent-gold);
  border-radius: 0 0 4px 4px;
  transition: height 0.1s linear;
  opacity: 0.6;
}

.scroll-progress-star {
  position: absolute;
  right: -6px;
  /* Center partially */
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at center, #fff, var(--accent-gold) 60%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--accent-gold);
  transform: translateY(-50%);
  /* Top will be set by JS */
}

/* ===== Typed Hero Highlighting ===== */
.text-highlight {
  position: relative;
  color: transparent;
  background: linear-gradient(135deg, #fff 20%, var(--accent-gold) 60%, var(--accent-bronze) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
  /* Stronger glow */
  display: inline-block;
}

.block-line {
  display: inline-block;
}

/* BR was leaving an extra gap when block-line is forced to block; hide globally */
.mobile-break {
  display: none;
}

/* Force break on mobile if needed, or just let natural flow handle it if width is small. 
   But user explicitly asked for a break. */
@media (max-width: 768px) {
  .block-line {
    display: block;
    margin-bottom: 8px;
    /* Slight gap */
  }

  .mobile-break {
    display: none;
    /* Hide BR if block works, or keep BR if display:inline used */
  }
}

/* Desktop: User said "Enter is wrong... break at Shining Place". 
   So we should probably break on desktop too if the user implies "Ent" (Enter) was "wrongly placed" or "should be placed".
   User said: "엔터가 잘못됬자나... 생각이 먼저 (Enter) 빛나는곳 하던지"
   So I will force a break on all screens for dramatic effect.
*/
.block-line {
  display: block;
  /* Force new line always as per "Enter" comment */
}

/* Animation Fallback Color */
.text-gold-fallback {
  color: var(--accent-gold) !important;
  background: none !important;
  -webkit-text-fill-color: var(--accent-gold) !important;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Ensure spans inside inherit this fallback properly if needed, although simple inheritance works */
.text-gold-fallback span {
  color: inherit;
}