/* 화면 소재(시안 C 하나로 확정, 11/08). 문제: 흰 Xlence 화면이 검은 아누비 위에 '떠' 보이면 안 된다.
   C = 그래파이트 안개 유리. html[data-v="C"] 선택자는 우선순위를 그대로 두려고 남겨 둔다.
   배경 층은 화면·단계마다 transform·opacity만 바뀌고, app.js가 그 사이를 이어 준다. */

.bg-vig { background: radial-gradient(130% 95% at 50% 42%, transparent 55%, rgba(0, 0, 0, .55)); }

/* ── C · 그래파이트 안개 유리 ──────────────────────── */
html[data-v="C"] { --bg: #232528; --faint: rgba(243, 239, 228, .16); }
html[data-v="C"] .bg-base { background: linear-gradient(160deg, #303237, #24262a 45%, #1d1e21); }
html[data-v="C"] .bg-glow { background: radial-gradient(42% 50% at 76% 30%, rgba(255, 255, 255, .07), transparent 70%); }
html[data-v="C"][data-page="2"] .bg-glow { transform: translate3d(8%, 18%, 0) scale(1.2); }
/* 멈춰 있는 안개 덩어리(움직이지 않음 = 비용 0) */
html[data-v="C"] .bg-smoke { background:
  radial-gradient(30% 26% at 18% 76%, rgba(200, 206, 216, .07), transparent 70%),
  radial-gradient(36% 30% at 58% 12%, rgba(210, 214, 222, .06), transparent 70%),
  radial-gradient(28% 34% at 92% 84%, rgba(190, 196, 206, .07), transparent 70%); }
html[data-v="C"] .bg-vig { background: radial-gradient(130% 95% at 50% 42%, transparent 50%, rgba(10, 10, 12, .5)); }
html[data-v="C"] .bg-noise { opacity: .07; }
html[data-v="C"] {
  --card-bg: rgba(68, 71, 78, .42); --card-bd: rgba(255, 255, 255, .12); --card-hi: rgba(255, 255, 255, .16); --card-blur: 30px;
  --card-shadow: 0 2.4rem 5rem -1.8rem rgba(8, 8, 10, .6), 0 .4rem 1.2rem rgba(8, 8, 10, .2);
  --field-bg: rgba(20, 21, 24, .45); --field-bd: rgba(255, 255, 255, .11); --field-hover: rgba(255, 255, 255, .22); --slot-bg: rgba(20, 21, 24, .45);
  --gc-bg: rgba(255, 255, 255, .055); --gc-bd: rgba(255, 255, 255, .11);
  --gc-shadow: 0 1.8rem 3.4rem -1.6rem rgba(8, 8, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  --mute: rgba(243, 239, 228, .7); --dim: rgba(243, 239, 228, .5);
  --shot-bar: #c9cacd; --shot-bar-fg: #6c7078;
}
html[data-v="C"] .gcard { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
html[data-v="C"] .stepper ol, html[data-v="C"] .modechip { background: rgba(30, 32, 36, .5); }
/* 스크린샷은 한 톤 낮춰 두었다가 볼 때(가리킬 때)만 원래 밝기로 */
html[data-v="C"] .shot { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 1.2rem 2.2rem -1.1rem rgba(8, 8, 10, .7); }
html[data-v="C"] .shot-tone { background: #2a2c30; opacity: .3; transition: opacity .45s var(--ease); }
html[data-v="C"] .shot-bar { transition: filter .45s var(--ease); filter: brightness(.82); }
html[data-v="C"] .gcard:hover .shot-tone { opacity: 0; }
html[data-v="C"] .gcard:hover .shot-bar { filter: none; }
html[data-v="C"] .gcard:hover .shot { transform: translateY(-.3rem); }
html[data-v="C"] .b-face { background: linear-gradient(160deg, #3a3e44, #24272b 60%, #1c1e21); }
html[data-v="C"] .badge[data-id="live"] .b-face { background: linear-gradient(160deg, #343d22, #1c2114 55%, #171a12); }
html[data-v="C"] .qr-tile { background: #ecebe7; }

/* 미리보기 오른쪽 끝을 부드럽게 끊는다(두 번째 카드는 반만) */
.preview { padding: 1.5rem 0 3.5rem; margin: -1.5rem 0 -3.5rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 7rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 7rem), transparent); }