/* 랭킹 규칙 및 보상 (/rules) — rules.html 전용. 색은 사이트 토큰(--rt-*)을 따르고, 금·은·동만 고정색이다. */
.pd-rules { --rl-gold-a:#ffe38a; --rl-gold-b:#d9a21f; --rl-silver-a:#e8edf8; --rl-silver-b:#9aa6bf; --rl-bronze-a:#f0b184; --rl-bronze-b:#a8653a; --rl-line:rgba(var(--rl-brand-rgb),.3); --rl-s1:#120E2B; --rl-s2:#181336; --rl-s3:#1F1943; --rl-brand:#956BFF; --rl-brand-rgb:149,107,255; --rl-brand-text:#B49AFF; --rl-edge:rgba(149,107,255,.24); --rl-edge-soft:rgba(149,107,255,.14); --rl-gap:16px; display:grid; gap:var(--rl-gap); width:100%; }
.pd-rules, .pd-rules * { box-sizing:border-box; }
.pd-rules :where(h1,h2,h3,p,ul) { margin:0; padding:0; }
.pd-rules :where(ul) { list-style:none; }
.pd-rules :where(svg) { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pd-rules :where(em) { font-style:normal; color:var(--rl-brand-text); }

/* 상단 */
.rl-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:200px; padding:28px 32px; overflow:hidden; border:1px solid var(--rl-line); border-radius:18px;
  background:radial-gradient(60% 140% at 85% 0%,rgba(var(--rl-brand-rgb),.34),transparent 62%),radial-gradient(40% 90% at 5% 100%,rgba(149,107,255,.12),transparent 70%),linear-gradient(120deg,#1E1545,#0F0B27 62%); color:#fff; }
.rl-eyebrow { font-size:12px; font-weight:800; letter-spacing:2px; color:#b79cff; }
.rl-hero h1 { margin:6px 0 10px; font-size:38px; font-weight:900; letter-spacing:-.5px; line-height:1.2; color:#fff; }
.rl-hero h1 em { color:#a77bff; }
.rl-lead { font-size:17px; color:#e6e9fb; }
.rl-lead b { color:#a77bff; }
.rl-sub { margin-top:6px; font-size:13px; color:#aab2d6; }
.rl-trophy { flex:none; width:170px; height:170px; stroke:none; fill:none; filter:drop-shadow(0 0 28px rgba(139,92,246,.55)); }
.rl-trophy * { stroke-width:inherit; }
.rl-trophy path[stroke] { stroke:url(#rlCup); }

/* 목차 */
.rl-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.rl-tabs a { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 10px; border:1px solid var(--rl-edge); border-radius:10px; background:var(--rl-s1); color:var(--rt-text-2); font-size:14px; font-weight:700; text-decoration:none; transition:background .15s,border-color .15s,color .15s; }
.rl-tabs a svg { width:18px; height:18px; flex:none; }
.rl-tabs a:hover { border-color:rgba(var(--rl-brand-rgb),.5); background:rgba(var(--rl-brand-rgb),.12); color:var(--rt-text); }
.rl-tabs a.is-on { border-color:rgba(var(--rl-brand-rgb),.65); background:rgba(var(--rl-brand-rgb),.22); color:#fff; }
.rl-tabs a.is-on svg,.rl-tabs a:hover svg { color:var(--rl-brand-text); }
.rl-tabs a:focus-visible { outline:2px solid var(--rl-brand); outline-offset:2px; }

/* 카드 공통 */
.rl-card { --cy:22px; --cx:22px; padding:var(--cy) var(--cx); border:1px solid var(--rl-edge); border-radius:16px; background:var(--rl-s1); scroll-margin-top:16px; }
.rl-head { display:flex; align-items:center; gap:14px; margin:calc(var(--cy) * -1) calc(var(--cx) * -1) 8px; padding:var(--cy) var(--cx) 10px; border-radius:15px 15px 0 0; border-bottom:1px solid var(--rl-edge-soft); background:linear-gradient(90deg,rgba(var(--rl-brand-rgb),.20),rgba(var(--rl-brand-rgb),.06) 70%,transparent); }
.rl-head h2 { font-size:21px; font-weight:900; color:var(--rt-text); }
.rl-head p { margin-top:4px; font-size:13px; color:var(--rt-muted); }
.rl-ico { flex:none; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid rgba(var(--rl-brand-rgb),.4); border-radius:12px; background:rgba(var(--rl-brand-rgb),.2); color:var(--rl-brand-text); }
.rl-ico svg { width:22px; height:22px; }
.rl-ico-lg { width:48px; height:48px; }
.rl-foot { margin-top:12px; font-size:12px; color:var(--rt-muted); }

/* 요약 */
.rl-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--rl-gap); }
.rl-sum { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--rl-edge); border-radius:14px; background:var(--rl-s1); }
.rl-sum small { font-size:13px; color:var(--rt-text-2); }
.rl-sum strong { display:block; margin:2px 0 4px; font-size:22px; font-weight:900; color:var(--rt-text); }
.rl-sum p { font-size:12px; color:var(--rt-muted); }

/* 경품 */
.rl-prize { border-color:var(--rl-line); background:linear-gradient(180deg,rgba(var(--rl-brand-rgb),.12),var(--rl-s1) 70%); }
.rl-total { margin-left:auto; flex:none; padding:12px 18px; border:1px solid var(--rl-line); border-radius:10px; background:rgba(var(--rl-brand-rgb),.18); color:var(--rt-text); font-size:17px; font-weight:900; white-space:nowrap; }
.rl-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:end; padding-top:26px; }
.rl-medal { --m-rgb:160,176,226; --m-a:var(--rl-silver-a); --m-b:var(--rl-silver-b); position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:30px 16px 22px; border:2px solid rgba(var(--m-rgb),.55); border-radius:16px; color:#fff; text-align:center;
  background:radial-gradient(80% 90% at 50% 0%,rgba(var(--m-rgb),.22),transparent 70%),linear-gradient(180deg,#1C1642,#120E2C); box-shadow:0 14px 36px rgba(var(--m-rgb),.16); }
.rl-medal.is-gold { --m-rgb:240,190,60; --m-a:var(--rl-gold-a); --m-b:var(--rl-gold-b); padding-top:40px; padding-bottom:28px; box-shadow:0 0 0 1px rgba(var(--m-rgb),.25),0 22px 52px rgba(var(--m-rgb),.24); }
.rl-medal.is-bronze { --m-rgb:226,140,88; --m-a:var(--rl-bronze-a); --m-b:var(--rl-bronze-b); }
.rl-crown { position:absolute; left:50%; top:-22px; width:44px; height:34px; transform:translateX(-50%); background:linear-gradient(var(--m-a),var(--m-b)); clip-path:polygon(0 25%,25% 55%,50% 0,75% 55%,100% 25%,88% 100%,12% 100%); filter:drop-shadow(0 2px 8px rgba(var(--m-rgb),.6)); }
.rl-place { font-size:22px; font-weight:900; color:var(--m-a); }
.rl-amt { font-size:34px; font-weight:900; letter-spacing:-.5px; line-height:1.15; background:linear-gradient(var(--m-a),var(--m-b)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rl-kind { font-size:14px; font-weight:700; color:#e6e9fb; }
.rl-medal.is-gold .rl-amt { font-size:40px; }
.rl-note { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; font-size:13px; color:var(--rt-text-2); }
.rl-note svg { width:18px; height:18px; flex:none; color:var(--rl-brand-text); }

/* 참여 규칙 */
.rl-grid6 { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.rl-grid6 li { display:flex; flex-direction:column; gap:6px; padding:16px 12px; border:1px solid var(--rl-edge); border-radius:12px; background:var(--rl-s2); text-align:center; }
.rl-grid6 b { font-size:13px; color:var(--rt-text-2); }
.rl-grid6 strong { font-size:16px; font-weight:900; color:var(--rt-text); word-break:keep-all; }
.rl-grid6 span { font-size:12px; line-height:1.5; color:var(--rt-muted); word-break:keep-all; }

/* 랭킹 종류 */
.rl-types { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.rl-types article { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 14px; border:1px solid var(--rl-edge); border-radius:12px; background:var(--rl-s2); text-align:center; }
.rl-types article.is-prize { border-color:var(--rl-line); background:rgba(var(--rl-brand-rgb),.14); }
.rl-types h3 { font-size:16px; font-weight:900; color:var(--rt-text); }
.rl-types h3 small { display:block; margin-top:2px; font-size:13px; font-weight:700; color:var(--rl-brand-text); }
.rl-types p { flex:1; font-size:13px; line-height:1.55; color:var(--rt-text-2); word-break:keep-all; }
.rl-types b { width:100%; padding:10px; border:1px solid var(--rl-edge-soft); border-radius:8px; background:var(--rl-s1); font-size:13px; line-height:1.5; color:var(--rt-text); }
.rl-tag { padding:2px 10px; border:1px solid var(--rl-line); border-radius:999px; background:rgba(var(--rl-brand-rgb),.16); color:var(--rl-brand-text); font-size:11px; font-weight:800; }
.rl-tag.is-prize { border-color:rgba(240,190,60,.5); background:rgba(240,190,60,.16); color:var(--rl-gold-b); }

/* EXP + 안내 */
.rl-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--rl-gap); align-items:start; }
.rl-exp { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--rl-edge); border-radius:10px; font-size:14px; }
.rl-exp th,.rl-exp td { padding:11px 14px; text-align:center; border-bottom:1px solid var(--rl-edge-soft); color:var(--rt-text); }
.rl-exp thead th { background:var(--rl-s2); font-size:13px; color:var(--rt-text-2); }
.rl-exp tbody th { font-weight:700; }
.rl-exp tbody tr:last-child th,.rl-exp tbody tr:last-child td { border-bottom:0; }
.rl-exp td { font-weight:800; color:var(--rl-brand-text); }
.rl-exp .is-top1 td { color:var(--rl-gold-b); } .rl-exp .is-top2 td { color:var(--rl-silver-b); } .rl-exp .is-top3 td { color:var(--rl-bronze-b); }
.rl-notes { display:grid; gap:0; padding:8px 22px; }
.rl-notes section { padding:16px 0; border-bottom:1px solid var(--rl-edge-soft); }
.rl-notes section:last-child { border-bottom:0; }
.rl-notes h3 { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:15px; font-weight:900; color:var(--rt-text); }
.rl-notes h3 svg { width:20px; height:20px; flex:none; color:var(--rl-brand-text); }
.rl-notes li { position:relative; padding-left:14px; font-size:13px; line-height:1.65; color:var(--rt-text-2); word-break:keep-all; }
.rl-notes li::before { content:""; position:absolute; left:2px; top:.7em; width:4px; height:4px; border-radius:50%; background:var(--rl-brand); }

/* 하단 CTA */
.rl-cta { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 32px; border:1px solid var(--rl-line); border-radius:16px; color:#fff;
  background:radial-gradient(50% 160% at 100% 0%,rgba(var(--rl-brand-rgb),.32),transparent 65%),linear-gradient(120deg,#1E1545,#0F0B27); }
.rl-cta p { font-size:15px; color:#cfd6f5; }
.rl-cta strong { display:block; margin-top:2px; font-size:24px; font-weight:900; color:#fff; }
.rl-btn { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 24px; border-radius:10px; background:var(--rl-brand); color:#fff; font-size:16px; font-weight:800; text-decoration:none; }
.rl-btn:hover { filter:brightness(1.1); }

/* 태블릿 */
@media (max-width:1023px) {
  .rl-grid6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rl-types { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rl-two { grid-template-columns:minmax(0,1fr); }
  .rl-head { flex-wrap:wrap; } .rl-total { margin-left:0; }
}
/* 모바일 */
@media (max-width:640px) {
  .pd-rules { --rl-gap:12px; padding:0 16px 16px; }
  .rl-hero { min-height:0; padding:22px 18px; }
  .rl-hero h1 { font-size:27px; } .rl-lead { font-size:15px; }
  .rl-hero-copy { padding-right:76px; }
  .rl-trophy { position:absolute; right:10px; top:14px; width:70px; height:70px; }
  .rl-tabs { display:flex; overflow-x:auto; gap:8px; padding-bottom:4px; scrollbar-width:none; }
  .rl-tabs::-webkit-scrollbar { display:none; }
  .rl-tabs a { flex:none; padding:0 14px; white-space:nowrap; }
  .rl-summary { grid-template-columns:minmax(0,1fr); }
  .rl-card { --cy:18px; --cx:16px; }
  .rl-podium { grid-template-columns:minmax(0,1fr); gap:26px; padding-top:22px; }
  .rl-medal.is-gold { order:-1; }
  .rl-amt,.rl-medal.is-gold .rl-amt { font-size:30px; }
  .rl-grid6 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rl-types { grid-template-columns:minmax(0,1fr); }
  .rl-notes { padding:4px 16px; }
  .rl-cta { flex-direction:column; align-items:stretch; padding:22px 18px; text-align:center; }
  .rl-cta strong { font-size:20px; }
  .rl-btn { justify-content:center; }
}

/* ── 라이트 테마 ─ html[data-theme="light"] 안에서만 적용되어 다크는 그대로다. ──
   바탕은 사이트 라이트 토큰(#FFF 카드 · #F3F5F9 페이지 · #161B2C 글자)을 따르고 퍼플(#956BFF)은 테두리·머리띠에만 얹는다.
   글자용 퍼플은 흰 바탕에서 읽히도록 한 단계 진하게(#6A3FE0) 쓴다. */
html[data-theme="light"] .pd-rules { --rl-s1:#FFFFFF; --rl-s2:#F7F4FF; --rl-s3:#EFE9FF; --rl-brand-text:#6A3FE0; --rl-edge:rgba(149,107,255,.30); --rl-edge-soft:rgba(149,107,255,.16); --rl-line:rgba(149,107,255,.34);
  --rl-gold-a:#F2B83B; --rl-gold-b:#8F5D00; --rl-silver-a:#9AA7C2; --rl-silver-b:#566380; --rl-bronze-a:#DE9560; --rl-bronze-b:#8F4F22; }
html[data-theme="light"] .rl-hero,
html[data-theme="light"] .rl-cta { color:var(--rt-text); border-color:var(--rl-edge);
  background:radial-gradient(60% 140% at 85% 0%,rgba(149,107,255,.20),transparent 64%),linear-gradient(120deg,#FFFFFF,#F1EBFF); }
html[data-theme="light"] .rl-eyebrow { color:var(--rl-brand-text); }
html[data-theme="light"] .rl-hero h1,
html[data-theme="light"] .rl-cta strong { color:var(--rt-text); }
html[data-theme="light"] .rl-hero h1 em,
html[data-theme="light"] .rl-lead b { color:var(--rl-brand-text); }
html[data-theme="light"] .rl-lead,
html[data-theme="light"] .rl-cta p { color:var(--rt-text-2); }
html[data-theme="light"] .rl-sub { color:var(--rt-muted); }
html[data-theme="light"] .rl-trophy { filter:drop-shadow(0 8px 18px rgba(106,63,224,.28)); }
/* 탭 */
html[data-theme="light"] .rl-tabs a { background:#fff; color:var(--rt-text-2); }
html[data-theme="light"] .rl-tabs a:hover { background:var(--rl-s2); border-color:rgba(149,107,255,.55); color:var(--rt-text); }
html[data-theme="light"] .rl-tabs a.is-on { background:#EEE7FF; border-color:rgba(149,107,255,.7); color:#4B2AB5; }
html[data-theme="light"] .rl-tabs a.is-on svg,
html[data-theme="light"] .rl-tabs a:hover svg { color:var(--rl-brand-text); }
/* 카드·머리띠·아이콘 */
html[data-theme="light"] .rl-head { background:linear-gradient(90deg,rgba(149,107,255,.14),rgba(149,107,255,.04) 70%,transparent); }
html[data-theme="light"] .rl-ico { background:rgba(149,107,255,.14); border-color:rgba(149,107,255,.38); }
html[data-theme="light"] .rl-prize { background:linear-gradient(180deg,rgba(149,107,255,.10),#fff 70%); }
html[data-theme="light"] .rl-total { background:#EEE7FF; border-color:rgba(149,107,255,.45); color:#4B2AB5; }
html[data-theme="light"] .rl-types article.is-prize { background:rgba(149,107,255,.10); }
html[data-theme="light"] .rl-types article { background:var(--rl-s2); }
html[data-theme="light"] .rl-tag { background:rgba(149,107,255,.14); }
html[data-theme="light"] .rl-tag.is-prize { background:rgba(242,184,59,.20); border-color:rgba(168,111,0,.45); color:#8A5A00; }
/* 금·은·동 — 고유 색은 유지하고 바탕만 밝게 */
html[data-theme="light"] .rl-medal { color:var(--rt-text);
  background:radial-gradient(80% 90% at 50% 0%,rgba(var(--m-rgb),.20),transparent 70%),linear-gradient(180deg,#FFFFFF,#F7F4FF); box-shadow:0 10px 26px rgba(var(--m-rgb),.20); }
html[data-theme="light"] .rl-medal.is-gold { background:radial-gradient(80% 90% at 50% 0%,rgba(var(--m-rgb),.26),transparent 70%),linear-gradient(180deg,#FFFFFF,#FFF8E6); box-shadow:0 0 0 1px rgba(var(--m-rgb),.30),0 16px 38px rgba(var(--m-rgb),.28); }
html[data-theme="light"] .rl-place { color:var(--m-b); }
html[data-theme="light"] .rl-kind { color:var(--rt-text-2); }
/* EXP 표 */
html[data-theme="light"] .rl-exp td { color:var(--rl-brand-text); }
html[data-theme="light"] .rl-exp .is-top1 td { color:var(--rl-gold-b); }
html[data-theme="light"] .rl-exp .is-top2 td { color:var(--rl-silver-b); }
html[data-theme="light"] .rl-exp .is-top3 td { color:var(--rl-bronze-b); }