/* ============================================================
   renewal-tokens.css — 四柱鏡·사주경 · 심야편 (2026-07)
   ============================================================
   컨셉: 심야괴담회 방송실 라이브
   - 배경: 완전 암전 · 검붉은 스튜디오 조명
   - 강조: 크림슨 ON AIR 시그널 · 촛불 warm amber
   - 텍스처: 필름 그레인 · CRT 스캔라인 · 간헐 지직 노이즈
   - 폰트: Noto Serif KR (한글 세리프) · IBM Plex Mono (방송 라벨) · Pretendard (본문)
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ── 심야 방송실 팔레트 ────────────────────────────────── */
  /* 배경 · 어둠의 계층 */
  --void:            #05030a;   /* 방송실 밖 · 가장 깊은 어둠 */
  --bg:              #0a0608;   /* 방송실 벽 (약한 crimson tint) */
  --bg-solid:        #0a0608;
  --surface:         #14090d;   /* 가까운 벽·책상 */
  --surface-2:       #1c0d14;   /* 강조된 표면 */
  --surface-3:       #260f18;   /* crimson-tinted 표면 */
  --surface-hover:   #1e0c14;

  /* 텍스트 (스모키 아이보리 · 밝은 밤 톤) */
  --ink:             #e8dfd0;
  --ink-soft:        #a89a88;
  --ink-dim:         #746656;
  --ink-mute:        #4a4038;
  --ink-inv:         #05030a;

  /* ── 시그니처 컬러 ─────────────────────────────────────── */
  /* Crimson: 스튜디오 조명 · ON AIR 신호 */
  --crimson:         #8b1a2f;
  --crimson-bri:     #c9243f;   /* ON AIR 붉은 점멸 */
  --crimson-deep:    #4a0a15;
  --crimson-blood:   #2a0508;   /* 벨벳 커튼 · 벽면 */
  --crimson-soft:    rgba(139, 26, 47, 0.18);
  --crimson-glow:    rgba(201, 36, 63, 0.45);

  /* Amber: 촛불 · warm 광원 (1800~2200K) */
  --amber:           #c9a960;
  --amber-bri:       #e8c47a;   /* 촛불 코어 */
  --amber-warm:      #ff9a3c;   /* 촛불 심 · 가장 뜨거운 부분 */
  --amber-dim:       #6a542a;
  --amber-soft:      rgba(201, 169, 96, 0.15);
  --amber-glow:      rgba(232, 196, 122, 0.32);

  /* Signal Green: 파형·오실로스코프 (라이브 신호) */
  --signal:          #4a8f6e;   /* 살아있는 신호 */
  --signal-bri:      #6dcf9a;   /* 파형 하이라이트 */
  --signal-glow:     rgba(109, 207, 154, 0.4);

  /* Moon / Cool: 원경 미광 (달빛 아닌 방송실 형광의 잔광) */
  --moon:            #d4c9e8;
  --moon-soft:       rgba(212, 201, 232, 0.28);

  /* 도메인 색조 (사주 = amber · 꽃패 = crimson) */
  --dom-saju:        var(--amber);
  --dom-saju-ink:    var(--amber-bri);
  --dom-hwapae:      var(--crimson);
  --dom-hwapae-ink:  #e58a9e;
  /* dream·face 는 사주 통합 안으로 흡수, 별도 색 X */

  /* 라인·보더 */
  --border:          rgba(232, 223, 208, 0.09);
  --border-soft:     rgba(232, 223, 208, 0.05);
  --border-strong:   rgba(232, 223, 208, 0.18);
  --border-crimson:  rgba(201, 36, 63, 0.42);
  --border-amber:    rgba(232, 196, 122, 0.36);
  --border-signal:   rgba(109, 207, 154, 0.38);

  /* 그림자 · 글로우 (근접·저조도 감성) */
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.7);
  --shadow-md:       0 6px 20px rgba(0, 0, 0, 0.7);
  --shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.85);
  --shadow-vignette: inset 0 0 200px rgba(0, 0, 0, 0.85);
  --shadow-card:     0 6px 24px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--border-amber);
  --glow-amber:      0 0 30px rgba(232, 196, 122, 0.45);
  --glow-crimson:    0 0 32px rgba(201, 36, 63, 0.55);
  --glow-signal:     0 0 20px rgba(109, 207, 154, 0.5);

  /* 라운드 */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* 폰트 스케일 */
  --fs-caption: 10.5px;
  --fs-small:   12px;
  --fs-body:    14px;
  --fs-body-lg: 15px;
  --fs-title:   17px;
  --fs-h3:      20px;
  --fs-h2:      28px;
  --fs-h1:      38px;
  --fs-hero:    56px;
  --fs-hero-mo: 34px;

  /* 폰트 패밀리 (심야 방송실 감성) */
  --font-sans:  "Pretendard Variable", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", "Consolas", monospace;

  /* 스페이싱 (8pt 그리드) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* 호환용 (기존 CSS 참조 재매핑) */
  --bg-night:   var(--bg);
  --bg-deep:    var(--void);
  --bg-mid:     var(--surface);
  --milk:       var(--surface);
  --cream:      var(--surface-2);
  --cream-dk:   var(--surface-3);
  --hanji-md:   var(--surface);
  --hanji-lt:   var(--surface-2);
  --hanji-dk:   var(--surface-3);
  --hanji-edge: var(--border-strong);
  --text-main:  var(--ink);
  --text-soft:  var(--ink-soft);
  --text-dim:   var(--ink-dim);
  --text-mute:  var(--ink-mute);
  --gold:       var(--amber);
  --gold-bri:   var(--amber-bri);
  --gold-dim:   var(--amber-dim);
  --gold-soft:  var(--amber-soft);
  --pink-dp:    var(--crimson);
  --violet:     #4a2a5c;
  --violet-bri: #6d4585;
}

/* ── 페이지 기본 (심야 방송실 벽) ─────────────────────── */
body {
  background: var(--bg) !important;
  background-image:
    /* 하단 crimson 스튜디오 조명 (커튼·벽면) */
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(74, 10, 21, 0.55) 0%, transparent 60%),
    /* 상단 좌측 미묘한 amber 광점 (촛불 잔광) */
    radial-gradient(ellipse 40% 30% at 20% 15%, rgba(201, 169, 96, 0.08) 0%, transparent 55%),
    /* 우상단 ON AIR 붉은 잔영 */
    radial-gradient(ellipse 30% 25% at 88% 10%, rgba(201, 36, 63, 0.10) 0%, transparent 55%),
    /* 베이스 그라디언트 */
    linear-gradient(180deg, var(--void) 0%, var(--bg) 40%, var(--crimson-blood) 100%) !important;
  background-attachment: fixed !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-body) !important;
  line-height: 1.65 !important;
  letter-spacing: -0.005em !important;
  padding: 0 !important;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ── 베이스 필름 그레인 (항상 깔림) ──────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.09 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.7;
  mix-blend-mode: overlay;
  animation: grainDrift 2.6s steps(6) infinite;
}
@keyframes grainDrift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-4%, 3%); }
  33%  { transform: translate(3%, -5%); }
  50%  { transform: translate(-6%, 2%); }
  66%  { transform: translate(4%, 4%); }
  83%  { transform: translate(-3%, -3%); }
  100% { transform: translate(0, 0); }
}

/* ── CRT 스캔라인 (전체 상단 오버레이) ──────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2.5px,
    rgba(0, 0, 0, 0.12) 3px
  );
  opacity: 0.5;
  mix-blend-mode: multiply;
}

body.in-app { padding: 0 !important; }

.app-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  min-height: 100vh !important;
  position: relative;
  z-index: 3;
}

@media (min-width: 768px) {
  .app-container {
    max-width: 100% !important;
    padding: 0 !important;
  }
}

.app-container::before,
.app-container::after { display: none !important; }

.bg-overlay { display: none !important; }

/* 코너 버튼 (전체화면) */
.corner-btn {
  background: rgba(20, 9, 13, 0.7) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.corner-btn:hover {
  background: var(--surface-hover) !important;
  color: var(--amber-bri) !important;
  border-color: var(--border-amber) !important;
}

/* 스크롤바 (다크) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 223, 208, 0.15) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(232, 223, 208, 0.12); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(232, 223, 208, 0.22); }

/* 텍스트 선택 */
::selection {
  background: var(--crimson-bri);
  color: var(--ink);
}

/* prefers-reduced-motion: 애니 정적으로 fallback */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}