/*	룰렛 이벤트 제작 안내 전용 (2026-09-30)
	guide.css 를 그대로 쓰고, 이 페이지에만 있는 것(휠 무대·카드·확률표)만 여기 둔다.

	지키는 것
	  · WebGL 없음. 휠은 2D 캔버스, 나머지는 CSS.
	  · prefers-reduced-motion 이면 움직임을 전부 끈다(맨 아래 한 블록).
	  · 한국어 줄바꿈은 word-break:keep-all — guide.css 의 규칙을 따른다.
	  · 브랜드 빨강 #ff5851 은 면적이 작은 곳(포인터·라벨)에만. 글자로 쓰면 흰 바탕에서 3.1:1 이다.
*/

/* ── 제목: 실제로 렌더된 줄이 아래에서 밀려 올라온다 (split-lines.js) ──────
   줄마다 --line-index 가 들어오므로 지연은 CSS 가 계산한다. JS 타임라인이 없다. */
[data-split-lines] .split-line { display:block; overflow:hidden; }
/*	split-lines 는 <br> 구간마다 .split-chunk 를 만들고 <br> 는 그대로 남긴다.
	.split-line 이 이미 block 이라 <br> 까지 살아 있으면 빈 줄이 하나 더 생긴다
	(375px 에서 제목 두 줄 사이가 한 줄만큼 벌어졌다). 줄바꿈은 block 이 한다.

	다만 **쪼개진 뒤에만** 숨긴다. 그냥 `br{display:none}` 으로 두면
	JS 가 실패했을 때(구형 브라우저·모듈 차단) 제목이 한 줄로 붙어 버린다.
	`.split-chunk` 는 쪼개진 뒤에만 생기므로, 그 뒤에 오는 br 만 고른다. */
[data-split-lines] .split-chunk ~ br { display:none; }
[data-split-lines] .split-line__inner {
	display:block; transform:translateY(105%);
	transition:transform .9s cubic-bezier(.16,1,.3,1);
	transition-delay:calc(var(--line-index, 0) * 90ms);
}
[data-split-lines].is-in .split-line__inner { transform:none; }

/* ── 섹션 등장 ───────────────────────────────────────────────────────────
	`.js-reveal` 가 붙은 뒤에만 숨긴다. 이 클래스는 본문 맨 위 인라인 스크립트가 단다.
	그냥 opacity:0 으로 두면 **JS 가 막힌 브라우저에서 페이지가 빈 화면이 된다** —
	연출 때문에 내용을 못 읽게 만드는 일은 없어야 한다. */
.rl_page.js-reveal .rl_stage,
.rl_page.js-reveal .rl_cards,
.rl_page.js-reveal .gd_tb_wrap,
.rl_page.js-reveal .gd_num,
.rl_page.js-reveal .rl_cta {
	opacity:0; transform:translateY(22px);
	transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.rl_page.js-reveal .is-in { opacity:1; transform:none; }

/* ── 휠 무대 ───────────────────────────────────────────────────────────── */
.rl_stage {
	/*	전구판은 --a 만큼 돌아간다. 회전한 요소의 '경계 상자'는 원래보다 커져(√2배까지)
		좁은 화면에서 페이지에 가로 스크롤을 만든다. 보이는 것은 전부 원 안이므로 여기서 자른다. */
	overflow:hidden;
	margin-top:56px; padding:44px 40px 48px;
	border-radius:20px; background:#14141a; color:#fff;
	box-shadow:0 24px 60px -30px rgba(20,20,26,.55);
	/*	어두운 배경 위 흰 글자가 자글자글해 보이는 것을 없앤다 (2026-09-30)
		윈도우 크롬은 글자 가장자리를 RGB 서브픽셀로 칠한다. 배경이 밝으면 눈에 안 띄지만
		어두우면 빨강·초록 테두리가 그대로 드러나 글자가 거칠어 보인다.
		이 영역만 회색조 안티에일리어싱으로 바꾼다 — 밝은 본문은 지금 방식이 더 또렷하다. */
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.rl_stage__head { margin-bottom:30px; }
.rl_stage__title { margin:0 0 8px; font-size:30px; font-weight:700; letter-spacing:-1px; color:#fff; word-break:keep-all; }
.rl_stage__sub { margin:0; font-size:16px; line-height:1.75; color:#a9a9b4; word-break:keep-all; }

.rl_stage__body { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:44px; align-items:start; }

/* ── 유리 휠 ───────────────────────────────────────────────────────────────
	캔버스에는 backdrop-filter 를 걸 수 없다. 그래서 유리를 세 겹으로 쌓는다.
	  ① .rl_aura   — 색 번짐. 유리가 흐릴 대상이 있어야 유리처럼 보인다.
	  ② .rl_glass  — 원형 유리판. 뒤(aura)를 흐리고 흰 테두리로 가장자리를 세운다.
	  ③ canvas     — 반투명 칸. 아래 두 겹이 그대로 비친다.
	순서가 바뀌면 그냥 반투명 원이 된다. */
.rl_wheelbox { position:relative; width:100%; max-width:420px; margin:0 auto; isolation:isolate; }

.rl_aura {
	position:absolute; inset:-4%; border-radius:50%; z-index:0; pointer-events:none;
	/*	흐림은 경계를 넘어 번진다. 원으로 잘라 두지 않으면 어두운 무대에 얼룩처럼 남는다.
		색은 '유리 너머로 비치는 것'이라 판 안쪽에 머물러야 한다. */
	clip-path:circle(50% at 50% 50%);
	background:
		radial-gradient(38% 38% at 28% 24%, rgba(255, 88, 81,.85) 0%, rgba(255,88,81,0) 70%),
		radial-gradient(34% 34% at 78% 32%, rgba(126, 96,255,.70) 0%, rgba(126,96,255,0) 70%),
		radial-gradient(40% 40% at 62% 82%, rgba( 0,196,255,.55) 0%, rgba(0,196,255,0) 72%),
		radial-gradient(30% 30% at 20% 76%, rgba(255,186, 72,.55) 0%, rgba(255,186,72,0) 72%);
	filter:blur(20px);
	opacity:.85;
	animation:rl_drift 22s ease-in-out infinite alternate;
}
@keyframes rl_drift {
	from { transform:rotate(0deg)   scale(1);    }
	to   { transform:rotate(18deg)  scale(1.06); }
}

.rl_glass {
	position:absolute; inset:0; border-radius:50%; z-index:1; pointer-events:none;
	background:linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.04) 46%, rgba(255,255,255,.12));
	-webkit-backdrop-filter:blur(18px) saturate(150%);
	backdrop-filter:blur(18px) saturate(150%);
	border:1px solid rgba(255,255,255,.30);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55),      /* 윗면에 걸리는 빛 */
		inset 0 -18px 34px -22px rgba(0,0,0,.65), /* 아래쪽 두께감 */
		0 26px 60px -24px rgba(0,0,0,.75);
}
/*	backdrop-filter 를 못 쓰는 브라우저에서는 흐림 대신 살짝 더 채운다 — 깨져 보이지 않게 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
	.rl_glass { background:linear-gradient(145deg, rgba(255,255,255,.26), rgba(20,20,26,.42)); }
	.rl_aura  { filter:blur(40px); }
}

/*	바깥 헤일로 — 유리판 뒤로 빛이 한 겹 퍼진다 */
.rl_halo {
	position:absolute; inset:-5%; border-radius:50%; z-index:0; pointer-events:none;
	background:radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0) 72%);
	box-shadow:0 0 44px 4px rgba(255,88,81,.16);
}

/*	테두리 전구 — 게임 UI 의 그 느낌을 만드는 요소.
	칸이 아니라 **틀**에 붙어 있어야 하므로 휠과 같이 돌지 않는다. */
.rl_bulbs { position:absolute; inset:0; z-index:3; pointer-events:none; }
/*	전구 하나가 '판 전체 크기의 투명한 판'이고, 그 판을 --a 만큼 돌린다.
	실제 전구는 그 판의 12시 자리에 ::before 로 찍는다.

	왜 이렇게 하나 — 예전에는 전구 자체를 translateY(%) 로 밀었는데,
	**translate 의 %는 자기 height 기준**이라 폰트·반올림으로 높이가 1px만 달라져도
	반지름이 통째로 어긋났다. 여기서는 모든 값이 컨테이너 기준(%)이라 어긋날 곳이 없다. */
.rl_bulbs i { position:absolute; inset:0; transform:rotate(var(--a)); }
.rl_bulbs i::before {
	content:''; position:absolute; left:50%; top:0.1%;   /* 중심이 반지름 48.1% = 베젤 한가운데 */
	width:3.6%; aspect-ratio:1/1; margin-left:-1.8%;
	border-radius:50%;
	background:radial-gradient(circle at 34% 30%, #fff 0%, #fff3d6 38%, #ffb36b 100%);
	box-shadow:
		0 0 6px 1px rgba(255,255,255,.95),
		0 0 14px 4px rgba(255,190,120,.85),
		0 0 30px 10px rgba(255,120, 80,.40);
	animation:rl_blink 1.8s ease-in-out infinite;
	animation-delay:var(--d);
}
@keyframes rl_blink {
	0%, 100% { opacity:1;   transform:scale(1);   }
	50%      { opacity:.35; transform:scale(.78); }
}

.rl_wheel {
	position:relative; z-index:2;
	display:block; width:100%; height:auto; aspect-ratio:1/1;
	border-radius:50%; background:transparent;
}
/* 12시 포인터 — roulette.js 의 pointerAngle:0 과 같은 자리다 */
/*	포인터 — 유리 위에 얹힌 한 방울. 회전 중심을 위쪽 끝으로 두어 딸깍일 때 끝이 고정된다 */
.rl_pointer {
	position:absolute; top:-3.5%; left:50%; z-index:4;
	width:8%; aspect-ratio:1/1.35; margin-left:-4%;
	background:linear-gradient(180deg, #ff7a74, #e8443c);
	border-radius:50% 50% 50% 50% / 38% 38% 62% 62%;
	clip-path:polygon(50% 100%, 0 26%, 12% 6%, 50% 0, 88% 6%, 100% 26%);
	box-shadow:0 4px 10px rgba(0,0,0,.5);
	transform-origin:50% 12%;
}
.rl_spin {
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
	/*	너비를 % 로 잡아야 휠이 줄어들 때 허브도 같이 줄어든다.
		28% 는 모듈이 글자 자리를 비워 둔 반지름(rIn*0.3)과 맞춘 값이다. */
	width:28%; aspect-ratio:1/1; height:auto; border-radius:50%;
	border:1px solid rgba(255,255,255,.34);
	background:rgba(20,20,26,.46); color:#fff;
	-webkit-backdrop-filter:blur(12px) saturate(140%);
	backdrop-filter:blur(12px) saturate(140%);
	font-family:inherit; font-size:17px; font-weight:700; letter-spacing:-.3px;
	cursor:pointer;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px -10px rgba(0,0,0,.8);
	transition:transform .18s ease, background .18s ease, border-color .18s ease;
	display:flex; align-items:center; justify-content:center;
	/*	연타하면 글자가 선택돼 파란/초록 블록으로 덮인다. 돌리는 버튼에 선택은 필요 없다 */
	-webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.rl_spin > span { font-size:clamp(14px, 4.2vw, 19px); font-weight:800; letter-spacing:-.4px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.rl_spin:hover { background:rgba(255,88,81,.42); border-color:rgba(255,255,255,.55); transform:translate(-50%,-50%) scale(1.06); }
.rl_spin:active { transform:translate(-50%,-50%) scale(.97); }
.rl_spin:focus-visible { outline:3px solid #ff5851; outline-offset:4px; }
.rl_spin[disabled] { background:rgba(20,20,26,.62); color:rgba(255,255,255,.55); cursor:default; transform:translate(-50%,-50%); }

/* 오른쪽 패널 */
.rl_panel { min-width:0; }
.rl_result {
	margin:0 0 24px; min-height:40px;
	font-size:26px; font-weight:700; line-height:1.4; letter-spacing:-.8px;
	color:#fff; word-break:keep-all;
}
.rl_odds { width:100%; border-collapse:collapse; font-size:15px; }
.rl_odds th, .rl_odds td { padding:12px 10px; border-bottom:1px solid #2a2a34; text-align:left; color:#e3e3e8; word-break:keep-all; }
.rl_odds thead th { padding-bottom:9px; font-size:12px; font-weight:700; letter-spacing:.3px; color:#8b8b97; border-bottom-color:#33333f; }
.rl_odds tbody th { font-weight:700; color:#fff; }
.rl_odds td:nth-child(2) { font-variant-numeric:tabular-nums; color:#b6b6c2; white-space:nowrap; }
.rl_got { width:46%; }
.rl_got b { display:inline-block; min-width:44px; font-variant-numeric:tabular-nums; font-size:14px; color:#fff; }
.rl_bar { display:inline-block; width:calc(100% - 52px); height:8px; margin-right:8px; border-radius:99px; background:#2a2a34; vertical-align:middle; }
.rl_bar i { display:block; height:100%; border-radius:99px; background:#ff5851; transition:width .5s cubic-bezier(.16,1,.3,1); }
.rl_dash { color:#5a5a66; }

.rl_sim {
	margin-top:22px; padding:13px 20px;
	border:1px solid #3a3a46; border-radius:8px; background:transparent; color:#fff;
	font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
	transition:border-color .18s ease, background .18s ease;
}
.rl_sim:hover { border-color:#ff5851; background:rgba(255,88,81,.12); }
.rl_sim:focus-visible { outline:3px solid #ff5851; outline-offset:3px; }
.rl_note { margin:18px 0 0; font-size:14px; line-height:1.8; color:#9b9ba7; word-break:keep-all; }
.rl_note strong { color:#fff; }

/* ── 특징 카드 ─────────────────────────────────────────────────────────── */
.rl_cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:6px; }
.rl_card { perspective:900px; }
.rl_card__in {
	height:100%; padding:30px 28px 32px;
	border:1px solid #ececec; border-radius:14px; background:#fff;
	transform-style:preserve-3d;
	transition:border-color .25s ease, box-shadow .25s ease;
}
/*	will-change 를 늘 걸어 두면 카드 4장이 계속 별도 레이어로 떠 있고,
	그 레이어에서는 글자가 서브픽셀 없이 그려져 평소에도 흐릿해진다.
	기울어지는 동안에만 건다. (2026-09-30) */
.rl_card:hover .rl_card__in { border-color:#ddd; box-shadow:0 18px 40px -26px rgba(26,26,26,.45); will-change:transform; }
.rl_card__no { display:block; margin-bottom:12px; font-size:13px; font-weight:700; letter-spacing:1px; color:#ff5851; }
.rl_card h3 { margin:0 0 10px; font-size:21px; font-weight:700; letter-spacing:-.6px; color:#1a1a1a; word-break:keep-all; text-wrap:balance; }
.rl_card p { margin:0; font-size:16px; line-height:1.8; color:#555; word-break:keep-all; text-wrap:pretty; }

/* ── 닫는 말 ───────────────────────────────────────────────────────────── */
.rl_cta { margin-top:72px; padding:52px 44px; border-radius:20px; background:#f7f7f9; }
.rl_cta h2 { margin:0 0 12px; font-size:32px; font-weight:700; letter-spacing:-1px; color:#1a1a1a; word-break:keep-all; text-wrap:balance; }
.rl_cta p { margin:0 0 26px; font-size:18px; line-height:1.8; color:#555; word-break:keep-all; text-wrap:pretty; }

/* ── 태블릿 ────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
	.rl_stage { margin-top:40px; padding:32px 24px 36px; border-radius:16px; }
	.rl_stage__title { font-size:22px; }
	.rl_stage__sub { font-size:15px; }
	.rl_stage__body { grid-template-columns:1fr; gap:34px; }
	.rl_result { font-size:21px; min-height:34px; }
	.rl_cards { grid-template-columns:1fr; gap:14px; }
	.rl_card__in { padding:24px 22px 26px; }
	.rl_card h3 { font-size:19px; }
	.rl_card p { font-size:15px; }
	.rl_cta { margin-top:52px; padding:36px 24px; }
	.rl_cta h2 { font-size:24px; }
	.rl_cta p { font-size:16px; }
}

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width:640px){
	.rl_stage { padding:26px 16px 30px; }
	.rl_wheelbox { max-width:300px; }
	.rl_spin { width:88px; height:88px; font-size:15px; }
	.rl_odds { font-size:14px; }
	.rl_odds th, .rl_odds td { padding:10px 6px; }
	.rl_got { width:42%; }
	.rl_got b { min-width:38px; font-size:13px; }
	.rl_bar { width:calc(100% - 46px); }
	.rl_sim { width:100%; }
	.rl_cta { padding:30px 18px; }
}

/* ── 아주 좁은 화면(320px) ────────────────────────────────────────────── */
@media (max-width:360px){
	.rl_wheelbox { max-width:250px; }
	.rl_spin { width:76px; height:76px; font-size:14px; }
	.rl_result { font-size:19px; }
	/*	확률표에서 '설정 확률' 열을 접는다. 세 열을 320px 에 욱여넣으면 글자가 어절 단위로 쪼개진다.
		모의 결과 열이 설정값을 검증하는 자리라 그쪽을 남긴다. */
	.rl_odds th:nth-child(2), .rl_odds td:nth-child(2) { display:none; }
	.rl_got { width:52%; }
}

/* ── 움직임을 원치 않는 사용자 ────────────────────────────────────────────
   외부 샘플 382개 중 이 대응이 있는 것은 0개였다. 우리는 붙인다.
   (휠 자체는 roulette.js 가 스스로 즉시 정지로 바꾼다) */
@media (prefers-reduced-motion: reduce){
	[data-split-lines] .split-line__inner { transform:none; transition:none; }
	.rl_page.js-reveal .rl_stage,
	.rl_page.js-reveal .rl_cards,
	.rl_page.js-reveal .gd_tb_wrap,
	.rl_page.js-reveal .gd_num,
	.rl_page.js-reveal .rl_cta { opacity:1; transform:none; transition:none; }
	.rl_spin, .rl_sim, .rl_card__in, .rl_bar i { transition:none; }
	.rl_bulbs i::before { animation:none; opacity:1; }
	.rl_aura { animation:none; }
	.rl_spin:hover { transform:translate(-50%,-50%); }
}