/* ─────────────────────────────────────────────────────────────
   rh-detail.css — 로비(index.html)와 같은 톤의 상세페이지 공통 스타일
   팔레트·질감·타이포를 로비에서 그대로 가져왔다.
   (딥블랙 + 웜골드, Georgia 세리프 골드 그라데이션, 얇은 골드 라인)
   2026-09-05
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#05080a;--panel:#10161a;--panel2:#151b1e;
  --gold:#d9a84f;--gold2:#f7d58f;--goldDk:#b47a2f;
  --ink:#f6f0e4;--muted:#989b9c;--dim:#7e8385;
  --line:rgba(218,168,79,.48);--edge:#30383c;--edge2:#394146;
}
*{box-sizing:border-box}
/* [2026-09-05] .rh-user 등에 display 를 직접 주기 때문에 UA 의 [hidden]{display:none} 이
   특이도에서 밀린다. hidden 속성이 항상 이기도록 못박는다. */
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{
  background:radial-gradient(circle at 70% 0,rgba(180,118,38,.10),transparent 27%),var(--bg);
  color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%}

/* ── 상단바 (로비 .topbar 와 같은 높이·그라데이션) ───────────── */
.rh-top{
  position:sticky;top:0;z-index:20;height:88px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
  padding:0 4vw;
  background:linear-gradient(180deg,rgba(3,7,9,.96),rgba(3,7,9,.78));
  border-bottom:1px solid rgba(218,168,79,.18);
  backdrop-filter:blur(6px);
}
.rh-brand img{width:196px;height:auto;display:block}
.rh-nav{display:flex;align-items:center;justify-content:center;gap:30px}
.rh-nav a{font-size:13px;letter-spacing:1px;color:#c8c5bf;opacity:.8;padding:6px 2px;border-bottom:1px solid transparent;transition:.2s}
.rh-nav a:hover{opacity:1;color:var(--gold2)}
.rh-nav a.on{opacity:1;color:var(--gold2);border-bottom-color:var(--gold)}
.rh-actions{display:flex;gap:9px}
.rh-btn{padding:9px 17px;border-radius:4px;font-size:12px;font-weight:800;letter-spacing:.4px;border:1px solid #4a5257;background:#141a1d;color:#d8d5cf;transition:.2s;white-space:nowrap}
.rh-btn:hover{border-color:var(--gold);color:var(--gold2)}
.rh-btn.gold{border:0;background:linear-gradient(100deg,#b87c2e,#edca77,#b47a2f);color:#171009;box-shadow:inset 0 1px 0 #ffe4a2}
.rh-btn.gold:hover{filter:brightness(1.13)}

/* 로그인 상태 표시 (로비 프로필과 같은 톤, 상단바에 맞춰 가로 배치) */
.rh-user{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-right:4px;line-height:1.25}
.rh-user .nm{font-size:13.5px;color:#e8dcc0;letter-spacing:.2px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-user .bal{font-size:12.5px;color:var(--gold2);font-variant-numeric:tabular-nums;letter-spacing:.4px}
@media(max-width:820px){.rh-user .nm{max-width:110px;font-size:12px}.rh-user .bal{font-size:11px}}


/* ── 히어로 ─────────────────────────────────────────────────── */
.rh-hero{position:relative;min-height:330px;display:flex;align-items:flex-end;overflow:hidden}
.rh-hero-bg{position:absolute;inset:0;background-image:url('/arena-assets/arena-hero-v2.webp?v=20260910');background-size:cover;background-position:center 32%;opacity:.5}
.rh-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,8,10,.94) 22%,rgba(4,8,10,.45) 68%,rgba(4,8,10,.72));z-index:1}
.rh-hero:after{content:"";position:absolute;inset:auto 0 0;height:52%;background:linear-gradient(transparent,#05080a 88%);z-index:1}
.rh-hero-in{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:64px 4vw 42px}
.rh-crumb{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:2px;color:#8d9294;margin-bottom:20px}
.rh-crumb a:hover{color:var(--gold2)}
.rh-crumb i{font-style:normal;color:#4d5457}
.rh-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:900;letter-spacing:.32em;color:var(--gold);margin-bottom:15px}
.rh-kicker:before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.rh-title{
  margin:0 0 14px;font:700 clamp(30px,4vw,54px)/1.12 Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;letter-spacing:-.5px;
  background:linear-gradient(#fff6d6 5%,#c48928 62%,#fff2be 88%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 8px 30px rgba(0,0,0,.6);max-width:16em;
}
.rh-lead{margin:0;color:#c3c6c5;font-size:15px;line-height:1.75;max-width:640px}
.rh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.rh-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(20,26,29,.72);font-size:12px;color:#e2d9c4;letter-spacing:.3px}
.rh-chip b{color:var(--gold2);font-weight:800}
.rh-chip.live{border-color:#c0532f;color:#f3c2a8}
.rh-chip.live i{width:6px;height:6px;border-radius:50%;background:#e2673a;animation:rhpulse 1.4s infinite}
@keyframes rhpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.55)}}

/* ── 본문 레이아웃 ──────────────────────────────────────────── */
.rh-wrap{max-width:1280px;margin:0 auto;padding:0 4vw 90px;display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:26px;align-items:start}
.rh-main{min-width:0;display:flex;flex-direction:column;gap:22px}
.rh-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}

/* ── 카드 (로비 .arena / .dashboard 질감) ──────────────────── */
.card{background:linear-gradient(160deg,#192126,#0d1316);border:1px solid var(--edge2);border-radius:8px;padding:26px 28px}
.card.hi{border-color:var(--line);box-shadow:inset 0 0 40px rgba(201,135,38,.10)}
.card h2{margin:0 0 6px;font:700 17px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#e5c281;letter-spacing:.4px}
.card h2 + .sub{margin:0 0 20px;color:var(--muted);font-size:12.5px}
.card p{color:#c0c3c3;font-size:14px;line-height:1.85;margin:0 0 12px}
.card p:last-child{margin-bottom:0}
.card p b{color:var(--gold2);font-weight:700}
.sec-rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:0 0 20px}

/* 리스트 */
.rlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.rlist li{position:relative;padding-left:20px;color:#bcc0c0;font-size:13.5px;line-height:1.7}
.rlist li:before{content:"◆";position:absolute;left:0;top:0;color:var(--gold);font-size:9px;line-height:2.2}
.rlist li b{color:#ecd9ae;font-weight:700}
.rlist.warn li:before{content:"※";color:#c9803e;font-size:11px;line-height:1.7}

/* 혜택 타일 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:linear-gradient(150deg,#1d252a,#0e1417);border:1px solid var(--edge);border-radius:6px;padding:20px 18px;text-align:center;transition:.2s}
.tile:hover{border-color:var(--gold);box-shadow:inset 0 0 30px rgba(201,135,38,.14)}
.tile .ico{font-size:24px;line-height:1;margin-bottom:12px;display:block}
.tile .v{display:block;font:700 20px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:var(--gold2);margin-bottom:7px;letter-spacing:.3px}
.tile .k{display:block;font-size:11.5px;color:var(--muted);line-height:1.6}

/* 단계 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{position:relative;background:linear-gradient(150deg,#1d252a,#0e1417);border:1px solid var(--edge);border-radius:6px;padding:22px 16px 18px}
.step .n{position:absolute;top:12px;right:14px;font:700 22px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:rgba(218,168,79,.24)}
.step b{display:block;font-size:13.5px;color:#ecd9ae;margin-bottom:7px;letter-spacing:.2px}
.step span{display:block;font-size:12px;color:var(--muted);line-height:1.65}

/* 키-값 표 */
.kv{display:flex;flex-direction:column}
.kv .row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:13px 2px;border-bottom:1px solid #232b2f;font-size:13.5px}
.kv .row:last-child{border-bottom:0}
.kv .k{color:var(--muted);letter-spacing:.3px}
.kv .v{color:#dfe1df}
.kv .v b{color:var(--gold2);font-weight:800}

/* 상금 분배 표 */
.prize{display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.prize .r{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;gap:10px;padding:12px 16px;font-size:13px;border-bottom:1px solid #1e2529;background:#101619}
.prize .r:last-child{border-bottom:0}
.prize .r.head{background:#151d21;color:var(--muted);font-size:11px;letter-spacing:2px}
.prize .r.top{background:linear-gradient(90deg,rgba(201,135,38,.16),transparent)}
.prize .rk{color:#dcdedc;font-weight:700}
.prize .r.top .rk{color:var(--gold2)}
.prize .pc{text-align:center;color:var(--gold2);font-weight:800;font-family:Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
.prize .r.head .pc,.prize .r.head .amt{color:var(--muted);font-weight:400;font-family:inherit}
.prize .amt{text-align:right;color:#a9adad}

/* 스케줄 표 */
.sched{display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.sched .r{display:grid;grid-template-columns:64px 1fr 1fr 1fr;gap:10px;padding:11px 16px;font-size:12.5px;border-bottom:1px solid #1e2529;background:#101619}
.sched .r:last-child{border-bottom:0}
.sched .r.head{background:#151d21;color:var(--muted);font-size:11px;letter-spacing:1.6px}
.sched .r.now{background:linear-gradient(90deg,rgba(201,135,38,.15),transparent)}
.sched .lv{color:var(--gold2);font-weight:800;font-family:Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
.sched .r.head .lv{color:var(--muted);font-weight:400;font-family:inherit}
.sched span{color:#b9bdbd}

/* ── 사이드 요약 카드 ───────────────────────────────────────── */
.sum{background:linear-gradient(145deg,#231a10,#111719);border:1px solid var(--line);border-radius:8px;padding:24px 22px;box-shadow:inset 0 0 45px rgba(201,135,38,.12)}
.sum h3{margin:0 0 4px;font:700 15px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#e5c281;letter-spacing:.5px}
.sum .sum-note{margin:0 0 18px;font-size:11.5px;color:var(--muted)}
.sum .big{display:block;font:700 clamp(26px,3vw,34px)/1 Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;margin:0 0 6px;
  background:linear-gradient(#fff6d6 5%,#d09b34 62%,#fff2be 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sum .big-k{display:block;font-size:11px;letter-spacing:3px;color:#9b8c6c;margin-bottom:20px}
.sum .srow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(218,168,79,.14);font-size:13px}
.sum .srow:last-of-type{border-bottom:0;margin-bottom:16px}
.sum .srow .k{color:var(--muted)}
.sum .srow .v{color:#eadfc4;font-weight:700;text-align:right}
.cta-gold{display:block;width:100%;padding:14px 8px;border:0;border-radius:4px;
  background:linear-gradient(100deg,#b87c2e,#edca77,#b47a2f);color:#171009;font-weight:900;font-size:13.5px;letter-spacing:.6px;
  box-shadow:inset 0 1px 0 #ffe4a2;transition:.15s;text-align:center}
.cta-gold:hover{filter:brightness(1.14)}
.cta-ghost{display:block;width:100%;margin-top:9px;padding:12px 8px;border:1px solid #4a5257;border-radius:4px;background:transparent;color:#c9ccca;font-size:12.5px;font-weight:700;text-align:center;transition:.2s}
.cta-ghost:hover{border-color:var(--gold);color:var(--gold2)}
.sum .fine{margin:14px 0 0;font-size:11px;color:#7c8082;line-height:1.7;text-align:center}

/* 카운트다운 */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px}
.cd .u{background:#0c1114;border:1px solid var(--edge2);border-radius:5px;padding:11px 2px;text-align:center}
.cd .u b{display:block;font:700 22px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:var(--gold2);letter-spacing:1px}
.cd .u span{display:block;font-size:9px;letter-spacing:1.4px;color:#7d8284;margin-top:4px}

/* 다른 항목 리스트 (사이드) */
.more{background:linear-gradient(160deg,#192126,#0d1316);border:1px solid var(--edge2);border-radius:8px;padding:20px 20px 12px}
.more h3{margin:0 0 14px;font:700 13px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#e5c281;letter-spacing:1.4px}
.more a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #232b2f;font-size:12.5px;color:#b6baba;transition:.15s}
.more a:last-child{border-bottom:0}
.more a:hover{color:var(--gold2)}
.more a em{font-style:normal;font-size:11px;color:#7d8284;white-space:nowrap}
.more a.on{color:var(--gold2)}

/* ── 푸터 ───────────────────────────────────────────────────── */
.rh-foot{border-top:1px solid #1c2327;background:#040709;padding:34px 4vw 44px}
.rh-foot-in{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center}
.rh-foot .fl{font:700 15px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;letter-spacing:3px;color:#8a7d63}
.rh-foot .fn{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:#797e80}
.rh-foot .fn a:hover{color:var(--gold2)}
.rh-foot .cp{width:100%;font-size:11px;color:#5d6365;letter-spacing:.3px}

/* ── 토스트 (로비와 동일) ──────────────────────────────────── */
.toast{position:fixed;z-index:60;left:50%;bottom:26px;transform:translate(-50%,120px);opacity:0;
  background:#171d20;border:1px solid var(--gold);padding:13px 22px;border-radius:5px;box-shadow:0 10px 35px #000;
  transition:.25s;color:#f1d392;font-size:14px}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ── 반응형 ─────────────────────────────────────────────────── */
@media(max-width:1080px){
  .rh-wrap{grid-template-columns:1fr}
  .rh-side{position:static}
  .rh-nav{display:none}
  .rh-top{grid-template-columns:auto 1fr;gap:14px}
  .rh-actions{justify-content:flex-end}
}
@media(max-width:820px){
  /* 좁은 화면에서 버튼이 세로로 접히지 않도록 압축.
     로고가 이미 로비 링크라 '로비로' 버튼은 숨긴다. */
  .rh-actions{gap:6px}
  .rh-btn{padding:8px 11px;font-size:11.5px;letter-spacing:0}
  .rh-lobby-btn{display:none}
  .rh-top{height:70px;padding:0 18px}
  .rh-brand img{width:150px}
  .rh-hero{min-height:250px}
  .rh-hero-in{padding:38px 18px 30px}
  .rh-wrap{padding:0 18px 60px;gap:18px}
  .card{padding:20px 18px}
  .tiles{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .kv .row{grid-template-columns:1fr;gap:4px}
  .prize .r{grid-template-columns:1fr 74px 1fr;padding:11px 12px;font-size:12px}
  .sched .r{grid-template-columns:46px 1fr 1fr 1fr;padding:10px 12px;font-size:11.5px}
  .rh-foot{padding:26px 18px 34px}
}