/* ============================================================
   SJ.Company Display — 공통 베이스
   ============================================================ */
:root {
  --text: #ffffff;
  --scale: 1;
  --clock-font: 'Orbitron', sans-serif;
  --clock-weight: 800;
  --clock-size: 1;
  --clock-ls: 2px;
  --clock-color: #ffffff;
  --clock-grad-from: #a5f3fc;
  --clock-grad-to: #c4b5fd;
  --clock-glow: .6;
  --msg-size: 1;
  --msg-color: #ffffff;
  --msg-accent: #7dd3fc;
  --card-blur: 18px;
  --card-alpha: .14;
  --tint: .35;
  --vignette: .55;
  --grain: .18;
  --logo-size: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05060f;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── 배경 레이어 ───────────────────────────── */
.bg-image,
.bg-canvas,
.bg-tint,
.bg-vignette,
.bg-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bg-image {
  background-color: #05060f;
  transition: opacity .6s ease;
  transform-origin: center;
  z-index: 0;
}
.bg-canvas { z-index: 1; transition: opacity .6s ease; }

.bg-tint {
  z-index: 2;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .75));
  opacity: var(--tint);
}

.bg-vignette {
  z-index: 3;
  box-shadow: inset 0 0 min(28vw, 380px) rgba(0, 0, 0, .95);
  opacity: var(--vignette);
}

.bg-grain {
  z-index: 4;
  opacity: var(--grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: sjGrain 1.2s steps(3) infinite;
}

@keyframes sjGrain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

@keyframes sjGradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ken-burns { animation: sjKen 42s ease-in-out infinite alternate !important; }
@keyframes sjKen {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

/* ── 유리 카드 ─────────────────────────────── */
.glass-on .card,
.glass-on .glass {
  background: rgba(255, 255, 255, var(--card-alpha));
  backdrop-filter: blur(var(--card-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  border-radius: 22px;
}

/* ── 스크롤바 ──────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .38); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  .bg-grain { animation: none; }
}