/* Shared cinematic film shell — used by all product films */
html, body { margin: 0; padding: 0; height: 100%; background: #0a0d12; }
body {
  font-family: 'Pretendard Variable', system-ui, sans-serif;
  color: #f6f3ec;
}
#root { width: 100vw; height: 100vh; position: relative; }

.v-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, #14181f 0%, #07090c 100%); }
.v-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: overlay;
}
.v-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 50%, rgba(0,0,0,0.65) 100%);
}
.v-bars { position: absolute; left: 0; right: 0; height: 60px; background: #000; z-index: 10; }
.v-bars.top { top: 0; }
.v-bars.bottom { bottom: 0; }

.serif { font-family: 'Cormorant Garamond', 'Noto Serif KR', serif; font-weight: 300; }
.serif-it { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.serif-ko { font-family: 'Noto Serif KR', serif; font-weight: 300; }

.frame-slot {
  position: absolute;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%),
    repeating-linear-gradient(45deg, rgba(196,162,107,0.05) 0 12px, transparent 12px 24px),
    #14181f;
  border: 1px solid rgba(246,243,236,0.16);
  overflow: hidden;
}
.frame-slot::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.frame-slot .lbl {
  position: absolute; top: 14px; left: 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 0.18em; color: rgba(246,243,236,0.55);
  z-index: 2;
}
.frame-slot .lbl::before { content: '◉ '; color: #d4b783; margin-right: 4px; }
.frame-slot .corner {
  position: absolute; width: 18px; height: 18px;
  border: 1px solid rgba(212,183,131,0.7); z-index: 2;
}
.frame-slot .corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.frame-slot .corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.frame-slot .corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.frame-slot .corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }