/* ====================================================================
VISAYAN GOLD — 디자인 B : Sinulog Crimson × 우측 지갑 레일 [2026-09-28]
--------------------------------------------------------------------
로드 순서 : main.css → bootstrap → font → styles.css → peso77-skin.css
→ visayan-theme.css (자동 생성 색) → 이 파일
★ PESO77 CSS 는 고치지 않는다. 레이아웃 차이는 전부 여기서.
★ 셸 마크업 추가분 : include/vg_pillnav.php · vg_rail.php · vg_mobile_wallet.php
원칙 : 크림슨 = "지금 여기(활성)"·지갑 카드, 골드 = 돈이 되는 행동(CTA)·금액.
브레이크포인트 (PESO77 과 같은 1024 를 모바일 경계로 쓴다)
≤1024 모바일 — 기존 드로어·하단 바, 로비 상단 지갑 카드
1025+ 사이드바 없음, 탑바 알약 메뉴, 콘텐츠 가운데
1280+ 우측 지갑 레일 340px 고정, 탑바 잔액 알약·체크인 배지 숨김
==================================================================== */
:root{
--vg-bg:#1C070C; --vg-panel:#2A0A12; --vg-panel2:#3A1019; --vg-panel3:#44131F; --vg-line:#55182A;
--vg-crimson:#C8245A; --vg-deep:#8E1440; --vg-gold:#FFC24A; --vg-gold-h:#FFD67F;
--vg-ink:#FFF1E6; --vg-mute:#D1B3AE;
--vg-wine:#2A0A12; --vg-gold-card:#EDBB4A; /* 잔액 카드 = "비사야의 금" (CK 2026-09-28 : 선홍 → 골드) */
--vg-rail:340px; --vg-top:72px;
--vg-display:'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
--vg-body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
--top-nav-logo-width: 200px; --top-nav-logo-mobile-width: 150px;
}
html, :root body{ background-color:var(--vg-bg); }
:root body{ font-family:var(--vg-body); }
:root .main-container{ color:var(--vg-ink); }
:root .main-container h1, :root .main-container h2, :root .div-title, :root .p77-hero__title{ font-family:var(--vg-display); letter-spacing:-.01em; }
/* ── 탑바 ───────────────────────────────────────────────────────── */
:root .top-nav{ background-color:var(--vg-panel); border-bottom:1px solid var(--vg-line); box-shadow:none; }
/* 알약 메뉴 — 모바일에서는 숨김 */
.vg-pillnav{ display:none; }
@media (min-width:1025px){
:root .top-nav{ height:var(--vg-top); padding:0 24px; gap:20px; }
:root body{ padding-top:var(--vg-top); }
:root .main-container{ margin-top:0; }
:root .top-nav-logo-link{ flex:none; }
:root .top-nav-logo{ margin-left:0; }
:root .top-nav-container{ padding:0; margin:0; max-width:none; }
.vg-pillnav{ display:flex; align-items:center; gap:4px; flex:none; }
.vg-pill{ height:40px; padding:0 14px; display:inline-flex; align-items:center; border-radius:10px;
font:700 15px/1 var(--vg-body); color:var(--vg-ink); text-decoration:none; white-space:nowrap; }
.vg-pill:hover, .vg-pill:focus-visible{ background:var(--vg-panel2); color:var(--vg-ink); }
.vg-pill.is-active{ background:var(--vg-crimson); color:#fff; }
/* 탑바 나머지 : 검색이 남는 폭을 먹는다 */
:root .top-nav-container{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; }
:root .top-nav-buttons{ flex:1 1 auto; min-width:98px; }
:root .top-user-controls{ flex:none; margin-right:0; }
:root .top-nav .favorites-button span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:root .top-nav .favorites-button{ width:44px; height:44px; padding:0; justify-content:center; border-radius:12px;
border:1px solid var(--vg-line); background:transparent; flex:none; }
:root .top-nav #searchBtn{ flex:1 1 auto; max-width:420px; min-width:44px; height:44px; padding:0 16px; gap:10px;
display:flex; align-items:center; border-radius:12px; background:var(--vg-bg); border:1px solid var(--vg-line);
color:var(--vg-mute); font-weight:500; text-decoration:none; }
:root .top-nav #searchBtn:hover{ border-color:var(--vg-crimson); color:var(--vg-ink); }
/* 왼쪽 고정 사이드바 제거 — 콘텐츠·푸터를 가운데 축으로 */
:root .side-menu{ display:none !important; }
:root .main-container, :root .footer-cont{ left:50%; max-width:min(1440px, 100vw); }
:root .footer-copyright{ padding-left:0; }
:root .side-banner{ left:20px !important; }
}
@media (min-width:1025px) and (max-width:1279px){
:root .top-nav .profile-chip-name{ display:none; }
}
@media (min-width:1025px) and (max-width:1199px){
:root .top-nav{ gap:12px; padding:0 16px; }
.vg-pill{ padding:0 9px; font-size:14px; }
:root .top-nav-logo{ width:170px; }
}
@media (min-width:1025px) and (max-width:1439px){
.vg-pill--wide{ display:none; }
:root .top-nav #searchBtn span{ display:none; }
:root .top-nav #searchBtn{ max-width:44px; padding:0; justify-content:center; }
}
/* ── 우측 지갑 레일 ─────────────────────────────────────────────── */
.vg-rail{ display:none; }
@media (min-width:1280px){
.vg-rail{ display:flex; flex-direction:column; gap:16px; position:fixed; z-index:900;
top:var(--vg-top); right:0; bottom:0; width:var(--vg-rail); box-sizing:border-box;
padding:24px 24px 32px 20px; overflow-y:auto; background:var(--vg-bg); border-left:1px solid var(--vg-line);
font-family:var(--vg-body); color:var(--vg-ink); }
:root .main-container, :root .footer-cont{ left:calc(50% - var(--vg-rail) / 2); max-width:min(1440px, calc(100vw - var(--vg-rail))); }
:root .footer-copyright{ padding-right:var(--vg-rail); box-sizing:border-box; }
/* 레일에 잔액이 있으므로 탑바 잔액 알약만 숨긴다 (마커 #memberBalance 는 DOM 에 남는다) */
:root .top-nav .balance-pill{ display:none !important; } /* Rewards 선물상자 배지(.dci-badge)는 그대로 둔다 — CK 2026-09-28 */
/* 오른쪽 아래 플로팅 독이 레일을 가리지 않게 */
:root .lt-dock{ right:calc(var(--vg-rail) + 16px) !important; }
}
.vg-wallet{ background:var(--vg-gold-card); color:var(--vg-wine); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:12px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 28px rgba(0,0,0,.35); }
.vg-wallet__k{ font:700 12px/1 var(--vg-body); letter-spacing:.1em; text-transform:uppercase; color:#5A1A24; }
.vg-wallet__v, .vg-wallet__v:hover{ font:800 32px/1.1 var(--vg-display); letter-spacing:-.02em; color:var(--vg-wine); text-decoration:none; }
.vg-wallet__acts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.vg-wallet__t{ font:800 24px/1.15 var(--vg-display); letter-spacing:-.01em; }
.vg-wallet--guest{ gap:10px; }
.vg-btn{ height:46px; display:flex; align-items:center; justify-content:center; border-radius:12px;
font:700 15px/1 var(--vg-body); text-decoration:none; border:1px solid transparent; transition:background-color .15s, color .15s; }
.vg-btn--gold{ background:var(--vg-gold); color:#2A0A12; }
.vg-btn--gold:hover, .vg-btn--gold:focus-visible{ background:var(--vg-gold-h); color:#2A0A12; }
.vg-btn--deep{ background:var(--vg-deep); color:#fff; }
.vg-btn--deep:hover, .vg-btn--deep:focus-visible{ background:#A51A4C; color:#fff; }
.vg-btn--line{ border-color:var(--vg-gold); color:var(--vg-gold); background:transparent; }
.vg-btn--line:hover, .vg-btn--line:focus-visible{ background:var(--vg-gold); color:#2A0A12; }
.vg-card{ background:var(--vg-panel); border:1px solid var(--vg-line); border-radius:20px; padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.vg-card__h{ font:700 16px/1.3 var(--vg-body); color:var(--vg-ink); margin-bottom:4px; }
.vg-checkin.is-done .vg-btn--line{ border-color:var(--vg-line); color:var(--vg-mute); }
.vg-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px;
color:var(--vg-ink); text-decoration:none; font:500 15px/1.3 var(--vg-body); border-bottom:1px solid var(--vg-line); }
.vg-row:last-child{ border-bottom:0; }
.vg-row:hover, .vg-row:focus-visible{ color:var(--vg-gold); }
.vg-row i{ font-style:normal; font-size:22px; color:var(--vg-gold); }
/* ── 모바일 로비 지갑 카드 ─────────────────────────────────────── */
.vg-mwallet{ display:none; }
@media (max-width:1024px){
.vg-mwallet{ display:flex; flex-direction:column; gap:10px; }
.vg-mwallet .vg-wallet{ padding:18px; border-radius:18px; }
.vg-mwallet .vg-wallet__v{ font-size:30px; }
.vg-mwallet .vg-btn{ height:44px; }
}
.vg-mcheckin{ display:flex; align-items:center; gap:10px; min-height:52px; padding:0 14px; border-radius:14px;
background:var(--vg-panel); border:1px solid var(--vg-line); color:var(--vg-ink); text-decoration:none; font:700 14px/1.2 var(--vg-body); }
.vg-mcheckin span{ flex:1; }
.vg-mcheckin b{ height:34px; padding:0 14px; display:inline-flex; align-items:center; border-radius:10px; border:1px solid var(--vg-gold); color:var(--vg-gold); font-size:13px; }
.vg-mcheckin.is-done b{ border-color:var(--vg-line); color:var(--vg-mute); }
/* ── 레일 버튼 : 테마의 a 색 덮어쓰기보다 강하게 ─────────────── */
:root .vg-rail .vg-btn--gold, :root .vg-mwallet .vg-btn--gold{ color:#2A0A12; }
:root .vg-rail .vg-btn--deep, :root .vg-mwallet .vg-btn--deep{ color:#fff; }
:root .vg-rail .vg-row{ color:var(--vg-ink); }
:root .vg-rail .vg-row:hover{ color:var(--vg-gold); }
@media (min-width:1280px){
:root .main-container{ padding-left:28px; padding-right:28px; }
}
/* ── 섹션 머리 : 색 띠 대신 굵은 제목 한 줄 (B) ──────────────── */
:root .div-bar{ background:transparent !important; box-shadow:none !important; padding:0 2px; height:auto; min-height:44px; margin:0; }
:root .div-bar .div-icon{ display:none; }
:root .div-bar .div-title, :root .div-bar .tdiv-title, :root .div-bar-plain .tdiv-title{ font:800 24px/1.2 var(--vg-display) !important; letter-spacing:-.01em; color:var(--vg-ink) !important; }
:root .div-bar .div-viewall, :root .div-bar-plain .div-viewall{ color:var(--vg-gold) !important; font-weight:700; }
:root .div-bar-plain{ margin-bottom:-18px; }
@media (max-width:1024px){
:root .div-bar .div-title, :root .div-bar .tdiv-title, :root .div-bar-plain .tdiv-title{ font-size:19px !important; }
}
/* ── 히어로 CTA : 골드 ─────────────────────────────────────────── */
:root .p77-hero .p77-hero__cta{ background:var(--vg-gold); color:#2A0A12; border-radius:12px; font-family:var(--vg-body); }
:root .p77-hero .p77-hero__cta:hover, :root .p77-hero .p77-hero__cta:focus{ background:var(--vg-gold-h); color:#2A0A12; }
:root .p77-hero{ border-radius:20px; overflow:hidden; }
/* ── 게임 카드 : 크림슨 패널 + 둥근 모서리 ────────────────────── */
:root .game-thumb-card{ border-radius:14px; }
:root .game-thumb-footer{ background:var(--vg-panel) !important; border-top:1px solid var(--vg-line); }
/* 모바일은 2칸 (PESO77 은 3칸) — 카드가 커져 게임 그림이 잘 보인다 */
@media (max-width:600px){
:root .game-thumb-list--wrap{ grid-template-columns:repeat(2, 1fr) !important; gap:10px !important; }
}
/* ── 뷰에 직접 박힌 inline style 의 초록 (MASPANALO 와 같은 방식) ─────
뷰를 고치지 않고(upstream merge 보호) 속성 선택자로 덮는다. */
:root [style*="#00a868" i]{ background:var(--vg-gold) !important; border-color:transparent !important; color:#2A0A12 !important; }
:root [style*="#5ac8a6" i],
:root [style*="#16b98c" i],
:root [style*="#0b7a5c" i],
:root [style*="#08df8d" i]{ color:var(--vg-gold) !important; }
:root [style*="#c9f5e4" i]{ color:var(--vg-ink) !important; }
:root [style*="#123832" i]{ background:var(--vg-panel) !important; border-color:var(--vg-line) !important; }
/* ── 대비 실측 보정 (tools/visayan_harness/contrast.js : 4건 → 0) ── */
:root .p77-rw2__num--extra{ color:#2A0A12; } /* 흰 숫자 on 골드 2.24 → 짙은 와인 */
:root .kyc-help{ background-color:var(--vg-crimson); } /* 흰 ? on 레드 3.01 → 크림슨 */
/* 탑바 잔액 알약(1024~1279px 에서 보인다)의 초록 + 아이콘 → 골드 */
:root .top-nav .balance-pill .balance-add{ filter:hue-rotate(265deg) saturate(1.3) brightness(1.1); }
/* ── 잔액 카드(골드) 위 버튼 — 짙은 와인 채움 / 와인 테두리 ─────── */
:root .vg-wallet .vg-btn--gold{ background:var(--vg-wine); color:var(--vg-gold); }
:root .vg-wallet .vg-btn--gold:hover, :root .vg-wallet .vg-btn--gold:focus-visible{ background:#44131F; color:var(--vg-gold-h); }
:root .vg-wallet .vg-btn--deep{ background:transparent; color:var(--vg-wine); border:1.5px solid var(--vg-wine); }
:root .vg-wallet .vg-btn--deep:hover, :root .vg-wallet .vg-btn--deep:focus-visible{ background:rgba(42,10,18,.1); color:var(--vg-wine); }
/* ── 레일 줄 아이콘 [아이콘] Activity ─────────────────────────── */
.vg-row{ justify-content:flex-start; }
.vg-row span{ flex:1 1 auto; }
.vg-ico{ flex:none; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
background:var(--vg-panel2); color:var(--vg-gold); font-style:normal; }
.vg-row:hover .vg-ico, .vg-row:focus-visible .vg-ico{ background:var(--vg-deep); }
.vg-btn--ico{ gap:8px; }
.vg-btn--ico .vg-ico{ width:auto; height:auto; background:transparent; color:currentColor; }
:root .vg-wallet .vg-wallet__v, :root .vg-wallet .vg-wallet__v span, :root .vg-wallet__t{ color:var(--vg-wine) !important; }
/* =====================================================================
[2026-09-28 CK 2차 피드백]
===================================================================== */
/* ── 히어로 : 얼굴이 잘리지 않게 ─────────────────────────────────
그림(hero-pc*)은 슬라이드 비율(1000:288)로 미리 잘라 두었다(assets.py).
모바일은 폭에 따라 2.4:1 ~ 3.44:1 로 바뀌므로 인물(오른쪽 위)을 붙잡는다. */
:root .p77-hero .slide img.p77-hero__img{ object-position:50% 20%; }
@media (max-width:1024px){
:root .p77-hero .main-slider .slide img.p77-hero__img{ object-position:74% 12% !important; }
}
/* ── 모바일 메뉴 : 칸마다 골드 테두리 ────────────────────────────── */
@media (max-width:1024px){
:root .mobile-menu-box .menu-box-bg{
border:1px solid rgba(237,187,74,.42);
box-shadow:inset 0 1px 0 rgba(255,241,230,.06), 0 4px 12px -6px rgba(0,0,0,.6);
background:linear-gradient(160deg, #4A1523 0%, #2E0B15 100%);
transition:border-color .18s, box-shadow .18s, transform .18s;
}
:root .mobile-menu-box:hover .menu-box-bg,
:root .mobile-menu-box:focus-visible .menu-box-bg,
:root .mobile-menu-box:active .menu-box-bg{
border-color:var(--vg-gold);
box-shadow:0 0 0 1px rgba(237,187,74,.35), 0 6px 16px -6px rgba(237,187,74,.35);
transform:translateY(-1px);
}
:root .mobile-menu-title{ color:var(--vg-gold); letter-spacing:.02em; }
/* ── 하단바 메뉴 버튼 : 골드 타일 + 전용 아이콘 ─────────────────
script.js 가 열고 닫을 때 ![]()
의 src 를 burger/close 로 바꾸고
aria-expanded 를 갱신한다. ![]()
는 JS 가 찾으므로 남겨 두고 숨기고,
그림은 aria-expanded 로 갈아 끼운다(JS·뷰는 그대로). */
:root .mobile-bottom-nav #mobile-menu-btn{
flex:0 0 46px; min-width:46px; height:46px; margin:0 6px 0 2px;
border-radius:14px; position:relative;
background:linear-gradient(145deg, #FFD978 0%, #EDBB4A 45%, #B8862B 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(90,50,10,.35), 0 4px 12px -4px rgba(237,187,74,.55);
}
:root .mobile-bottom-nav #mobile-menu-btn img{ display:none !important; }
:root .mobile-bottom-nav #mobile-menu-btn::before{
content:""; width:22px; height:22px; display:block;
background:url(/resources/img/icons/vg-menu.svg) center/contain no-repeat;
}
:root .mobile-bottom-nav #mobile-menu-btn[aria-expanded="true"]::before{
background-image:url(/resources/img/icons/vg-menu-close.svg);
}
:root .mobile-bottom-nav #mobile-menu-btn:active{ transform:translateY(1px); }
/* 돋보기 : 회색 필터를 빼고 골드 테두리 원 */
:root .mobile-bottom-nav .mobile-search-btn{
flex:0 0 46px; min-width:46px; height:46px; border-radius:50%;
border:1.5px solid rgba(237,187,74,.55); background:rgba(237,187,74,.06);
}
:root .mobile-bottom-nav .mobile-search-btn img{
filter:none !important; width:20px; height:20px;
}
}
/* ── Welcome Pass : PESO77 의 잉크 그린 → 와인 잉크 + 크림슨 도장 ──────────
welcome-pass.css 는 PESO77 원본 그대로 둔다(뒤에 실리므로 :root 로 이긴다).
종이(크림)는 그대로 — "티켓" 느낌은 이 사이트에도 맞다. */
:root #p77WelcomePass{
--ink:#2A0A12; --ink-2:#5A2A35; --muted:#86696D; --rule:rgba(42,10,18,.22);
--gold:#8E6A1E; --gold-2:#C9A24C;
--green:#A3123F; --green-lt:#EDBB4A; --stage:#14060A;
}
:root #p77WelcomePass{ background:rgba(20,6,10,.84); }
:root #p77WelcomePass .shot{ background:#1C070C; }
:root #p77WelcomePass .shot::after{ background:linear-gradient(190deg, rgba(28,7,12,.38) 0%, rgba(28,7,12,0) 34%, rgba(28,7,12,.74) 100%); }
:root #p77WelcomePass .livedot{ animation-name:vgping; }
@keyframes vgping{ 0%{ box-shadow:0 0 0 0 rgba(237,187,74,.6); } 70%{ box-shadow:0 0 0 9px rgba(237,187,74,0); } 100%{ box-shadow:0 0 0 0 rgba(237,187,74,0); } }
:root #p77WelcomePass .line .when{ border-color:rgba(163,18,63,.38); }
:root #p77WelcomePass .cta{ background:linear-gradient(180deg, #5A0F24 0%, #2A0A12 100%); color:#FFE2A0;
box-shadow:0 10px 24px -12px rgba(42,10,18,.85), inset 0 0 0 1px rgba(237,187,74,.6); }
:root #p77WelcomePass .cta:hover{ background:linear-gradient(180deg, #6E1430 0%, #3A0D18 100%); }
:root #p77WelcomePass .stp + .stp{ border-left-color:rgba(42,10,18,.14); }
@media (max-width:760px){
:root #p77WelcomePass .shot::after{ background:linear-gradient(180deg, rgba(28,7,12,.28) 0%, rgba(28,7,12,0) 44%, rgba(28,7,12,.74) 100%); }
}
/* =====================================================================
[2026-09-28 CK 3차 피드백] 테마 생성기가 "골드 위 짙은 초록 글자(#12332c)"를
골드로 바꿔서 글자가 바탕과 같은 색이 된 자리들 — 아래에서 직접 잡는다.
===================================================================== */
/* ── 탑바 Rewards 배지 : 골드 알약 + 와인 글자/아이콘 ───────────────── */
:root .top-nav .dci-badge.is-ready .dci-badge__ico,
:root .top-nav .dci-badge.is-ready .dci-badge__ready{ color:#2A0A12; }
:root .top-nav .dci-badge.is-ready{ background-image:linear-gradient(135deg,#FFD978,#EDBB4A); }
:root .top-nav .dci-badge.is-ready:hover{ background-image:linear-gradient(135deg,#FFE29A,#F2C55E); }
:root .top-nav .dci-badge.is-done{ border-color:rgba(237,187,74,.5); }
:root .top-nav .dci-badge.is-done .dci-badge__ico{ color:var(--vg-gold); }
:root .top-nav .dci-badge__t1{ color:#FFF1E6; }
:root .top-nav .dci-badge__t2{ color:#E9C9C0; }
/* ── 출석 체크 달력 모달 ──────────────────────────────────────────── */
:root #ltDailyCheckin{
--dci-bg:#1C070C; --dci-header:#5A0F24; --dci-accent:#FFC24A; --dci-text:#FFF1E6; --dci-muted:#D6B8B2;
--dci-line:rgba(255,241,230,.10); --dci-cell:#2E0B15; --dci-success:#FF8FB0; --dci-danger:#FF6B6B;
color:#FFF1E6;
}
:root #ltDailyCheckin .lt-dci__backdrop{ background:rgba(20,6,10,.8); }
:root #ltDailyCheckin .lt-dci__dialog{ background:#1C070C; border-color:rgba(237,187,74,.35); }
:root #ltDailyCheckin .lt-dci__header{ background:linear-gradient(135deg,#7A1533 0%,#4A0C1E 100%); border-bottom-color:rgba(237,187,74,.25); }
:root #ltDailyCheckin .lt-dci__eyebrow{ color:#FFC24A; }
:root #ltDailyCheckin .lt-dci__heading{ color:#FFFFFF; }
:root #ltDailyCheckin .lt-dci__intro{ color:#F3D9DE; }
:root #ltDailyCheckin .lt-dci__close{ background:rgba(0,0,0,.22); border-color:rgba(255,241,230,.25); color:#FFF1E6; }
:root #ltDailyCheckin .lt-dci__close:hover{ border-color:#FFC24A; color:#FFC24A; }
:root #ltDailyCheckin .lt-dci__close-count{ color:#FFF1E6; }
:root #ltDailyCheckin .lt-dci__body{ background:#1C070C; }
:root #ltDailyCheckin .lt-dci__summary{ background:#2A0A12; border-color:rgba(255,241,230,.10); }
:root #ltDailyCheckin .lt-dci__summary-label{ color:#D6B8B2; }
:root #ltDailyCheckin .lt-dci__summary-value{ color:#FFF1E6; }
:root #ltDailyCheckin .lt-dci__streak{ color:#FFC24A; }
:root #ltDailyCheckin .lt-dci__streak small{ color:#D6B8B2; }
:root #ltDailyCheckin .lt-dci__month{ color:#FFFFFF; }
:root #ltDailyCheckin .lt-dci__nav{ background:#2E0B15; border-color:rgba(255,241,230,.14); color:#F3E3D8; }
:root #ltDailyCheckin .lt-dci__nav:hover:not(:disabled){ border-color:#FFC24A; color:#FFC24A; }
:root #ltDailyCheckin .lt-dci__weekday{ color:#D6B8B2; }
:root #ltDailyCheckin .lt-dci__day{ background:#2E0B15; border-color:rgba(255,241,230,.10); color:#F3E3D8; }
:root #ltDailyCheckin .lt-dci__day--today{ background:#FFC24A; border-color:#FFC24A; color:#2A0A12; }
:root #ltDailyCheckin .lt-dci__day--reward::after{ color:#FFC24A; }
:root #ltDailyCheckin .lt-dci__day--today.lt-dci__day--reward::after{ color:#5A0F24; }
:root #ltDailyCheckin .lt-dci__day--claimed{ background:rgba(200,36,90,.28); border-color:rgba(255,143,176,.6); color:#FFE3EC; }
:root #ltDailyCheckin .lt-dci__day--claimed::before{ background:#FF8FB0; box-shadow:0 0 8px rgba(255,143,176,.5); }
:root #ltDailyCheckin .lt-dci__day--missed{ background:#24090F; color:#B9958F; }
:root #ltDailyCheckin .lt-dci__day--future, :root #ltDailyCheckin .lt-dci__day--before{ color:#B9958F; opacity:.7; }
:root #ltDailyCheckin .lt-dci__footer{ border-top-color:rgba(255,241,230,.10); }
:root #ltDailyCheckin .lt-dci__legend{ color:#D6B8B2; }
:root #ltDailyCheckin .lt-dci__legend-item--claimed{ color:#FF8FB0; }
:root #ltDailyCheckin .lt-dci__legend-item--missed{ color:#FF8A8A; }
:root #ltDailyCheckin .lt-dci__legend-item--reward{ color:#FFC24A; }
:root #ltDailyCheckin .lt-dci__claim{ background:linear-gradient(180deg,#FFD978,#EDBB4A); border-color:#EDBB4A; color:#2A0A12; }
:root #ltDailyCheckin .lt-dci__claim:disabled{ background:#3A1019; border-color:rgba(255,241,230,.14); color:#D6B8B2; }
:root #ltDailyCheckin .lt-dci__notice{ background:rgba(255,143,176,.12); border-color:rgba(255,143,176,.45); color:#FFE3EC; }
:root #ltDailyCheckin .lt-dci__notice--error{ background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.5); color:#FFD0D0; }
:root #ltDailyCheckin .lt-dci__rules{ color:#D6B8B2; }
/* ── Rewards 허브 모달 ────────────────────────────────────────────── */
:root #ltRewards{
--rw-bg:#1C070C; --rw-header:#5A0F24; --rw-accent:#FFC24A; --rw-text:#FFF1E6; --rw-muted:#D6B8B2;
--rw-line:rgba(255,241,230,.10); --rw-cell:#2E0B15; --rw-ready:#FFC24A; --rw-purple:#F7B7C8;
color:#FFF1E6;
}
:root #ltRewards .lt-rw__backdrop{ background:rgba(20,6,10,.78); }
:root #ltRewards .lt-rw__dialog{ background:#1C070C; border-color:rgba(237,187,74,.35); }
:root #ltRewards .lt-rw__header{ background:linear-gradient(135deg,#7A1533 0%,#4A0C1E 100%); }
:root #ltRewards .lt-rw__title{ color:#FFC24A; }
:root #ltRewards .lt-rw__lifetime-k{ color:#F3D9DE; }
:root #ltRewards .lt-rw__lifetime-v{ color:#FFFFFF; }
:root #ltRewards .lt-rw__close{ background:rgba(0,0,0,.22); border-color:rgba(255,241,230,.25); color:#FFF1E6; }
:root #ltRewards .lt-rw__close:hover{ color:#FFC24A; border-color:#FFC24A; }
:root #ltRewards .lt-rw__level-name{ color:#FFF1E6; }
:root #ltRewards .lt-rw__gem{ color:#F7B7C8; }
:root #ltRewards .lt-rw__milestone, :root #ltRewards .lt-rw__card, :root #ltRewards .lt-rw__tile{ background:#2E0B15; border-color:rgba(255,241,230,.10); color:#FFF1E6; }
:root #ltRewards .lt-rw__milestone-count{ background:rgba(255,194,74,.16); color:#FFC24A; }
:root #ltRewards .lt-rw__bar{ background:rgba(255,241,230,.08); }
:root #ltRewards .lt-rw__bar-fill{ background:linear-gradient(90deg,#C8245A,#FFC24A); }
:root #ltRewards .lt-rw__wager-note, :root #ltRewards .lt-rw__row-sub, :root #ltRewards .lt-rw__dual{ color:#E9CFC8; }
:root #ltRewards .lt-rw__wager-note b, :root #ltRewards .lt-rw__row-sub b{ color:#FFFFFF; }
:root #ltRewards .lt-rw__dual b{ color:#FFC24A; }
:root #ltRewards .lt-rw__row-title{ color:#FFF1E6; }
:root #ltRewards .lt-rw__row-ico{ color:#FFC24A; }
:root #ltRewards .lt-rw__row-num{ background:#FFC24A; color:#2A0A12; }
:root #ltRewards .lt-rw__row-tag{ background:rgba(255,241,230,.06); border-color:rgba(255,241,230,.14); color:#E9CFC8; }
:root #ltRewards .lt-rw__row-tag--extra{ background:rgba(255,194,74,.14); border-color:rgba(255,194,74,.55); color:#FFC24A; }
:root #ltRewards .lt-rw__action{ background:rgba(255,241,230,.05); border-color:rgba(255,241,230,.14); color:#F3E3D8; }
:root #ltRewards .lt-rw__action--ready{ background:linear-gradient(180deg,#FFD978,#EDBB4A); border-color:#EDBB4A; color:#2A0A12; }
:root #ltRewards .lt-rw__tile-k{ color:#FFF1E6; }
:root #ltRewards .lt-rw__tile-ico, :root #ltRewards .lt-rw__tile-v{ color:#E9CFC8; }
:root #ltRewards .lt-rw__tile:hover{ border-color:rgba(255,194,74,.5); }
:root #ltRewards .lt-rw__tile.is-pending{ border-color:#FFC24A; background:linear-gradient(180deg,rgba(255,194,74,.18),rgba(255,194,74,.06)); }
:root #ltRewards .lt-rw__tile.is-pending .lt-rw__tile-k, :root #ltRewards .lt-rw__tile.is-pending .lt-rw__tile-ico{ color:#FFC24A; }
:root #ltRewards .lt-rw__tile.is-pending .lt-rw__tile-v{ color:#FFF1E6; }
:root #ltRewards .lt-rw__notice--ok{ background:rgba(255,194,74,.14); color:#FFE7B0; }
:root #ltRewards .lt-rw__notice--bad{ background:rgba(255,107,107,.14); color:#FFD0D0; }
:root #ltRewards .lt-rw__skeleton{ color:#D6B8B2; }
/* ── 우측 하단 바로가기 독(Live Chat·Helpdesk·Deposit·Affiliates) ─────
마크업의 hidden 은 "CSS 도착 전 번쩍임 방지" 용인데, bootstrap.min.css 의
[hidden]{display:none!important} 가 .lt-dock{display:flex} 를 이겨서
독이 영영 안 나왔다. id 로 되받는다. [X] 닫기(.is-hidden)는 그대로 숨긴다. */
:root #ltDock[hidden]{ display:flex !important; }
:root #ltDock.is-hidden{ display:none !important; }
:root .lt-dock__btn{ color:#FFFFFF; }
:root .lt-dock__btn--chat, :root .lt-dock__btn--deposit, :root .lt-dock__btn--aff{ background-image:linear-gradient(135deg,#A3123F,#5A0F24); }
:root .lt-dock__btn--help{ background-image:linear-gradient(135deg,#3A1019,#2A0A12); box-shadow:inset 0 0 0 1px rgba(237,187,74,.45), 0 6px 18px rgba(0,0,0,.32); }
:root .lt-dock__btn .lt-dock__label, :root .lt-dock__btn--aff, :root .lt-dock__btn--aff:hover{ color:#FFFFFF; }
:root .lt-dock__btn svg{ color:#FFC24A; }
/* ── 모바일 하단바 Rewards 버튼 : 골드 채움 + 와인 글자 ─────────────── */
@media (max-width:1024px){
:root .mobile-bottom-nav .mobile-reward-btn{ background-image:linear-gradient(135deg,#FFD978,#EDBB4A) !important; color:#2A0A12 !important; }
:root .mobile-bottom-nav .mobile-reward-ico, :root .mobile-bottom-nav .mobile-reward-t1{ color:#2A0A12; }
:root .mobile-bottom-nav .mobile-reward-t2{ color:#5A2A35; }
}
/* ── 탑바 Rewards 배지 : 받을 것이 있어도 [선물상자] Rewards / Play to add + READY 딱지 ─ */
:root .top-nav .dci-badge.is-ready{ gap:7px; padding:3px 8px 3px 9px; }
:root .top-nav .dci-badge.is-ready .dci-badge__done{ display:inline-flex; }
:root .top-nav .dci-badge.is-ready .dci-badge__t1{ color:#2A0A12; }
:root .top-nav .dci-badge.is-ready .dci-badge__t2{ color:#5A2A35; }
:root .top-nav .dci-badge.is-ready .dci-badge__ready{
order:3; color:#FFE7B0; background:#5A0F24; border-radius:999px; padding:2px 6px; font-size:9px; letter-spacing:.06em;
}
:root .dci-badge--row.is-ready .dci-badge__done{ display:inline-flex; }
/* ── 플레이이력 기간 필터 칩 (전체 / 24시간 / 2일 / 7일) ──────────────── */
:root .history-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 6px; }
:root .history-filter__chip{
display:inline-block; padding:8px 16px; border:1px solid rgba(237,187,74,.4); border-radius:999px;
background:#2A0A12; color:#F3E3D8; font-size:13px; line-height:1.2; font-weight:600;
text-decoration:none; white-space:nowrap; transition:background-color .16s, border-color .16s, color .16s;
}
:root .history-filter__chip:hover{ border-color:#FFC24A; color:#FFC24A; }
:root .history-filter__chip.is-active{ border-color:#FFD978; color:#2A0A12; font-weight:800; background:linear-gradient(180deg,#FFD978,#EDBB4A); }
:root .history-empty{ padding:36px 12px; color:#D6B8B2; font-size:14px; text-align:center; }
@media (max-width:767px){
:root .history-filter{ justify-content:center; gap:6px; }
:root .history-filter__chip{ padding:7px 12px; font-size:12px; }
}
/* 탑바 폭이 모자라는 1025~1599px 에서는 글자 두 줄을 접고 [선물상자] READY 만 */
@media (min-width:1025px) and (max-width:1599px){
:root .top-nav .dci-badge.is-ready .dci-badge__done{ display:none; }
}
/* =====================================================================
[2026-09-28 CK 4차] 전 화면 대비 실측(tools/visayan_harness/contrast.js, 35화면 × 회원/비회원 × 1440/390)
===================================================================== */
/* ── 계정 패널 글자 팔레트 ────────────────────────────────────────────
peso77-skin 의 .account-section__body 는 "밝은 회색 패널" 전제의 짙은 글자
변수(--panel-ink #23293a 등)를 쓴다. 이 사이트에선 패널이 와인으로 어두워졌는데
변수 이름에 panel 이 들어 있어 테마 생성기가 "면" 색으로 바꿔 버렸다
→ RG 도구·출금 안내 등 본문이 와인 위 와인(대비 1.1). 어두운 면 기준으로 다시 준다. */
:root .account-section__body{
--panel-ink:#FFF1E6; --panel-ink-soft:#E9CFC8; --panel-ink-label:#F3E3D8;
--panel-warn:#FFB86B; --panel-ok:#FFC24A; --panel-line:rgba(255,241,230,.22);
color:#FFF1E6;
}
:root .account-section__body a:not([class*="btn"]):not(.lt-chat-button){ color:#FFC24A; }
:root .rg-intro, :root .rg-note, :root .rg-card__used, :root .rg-help{ color:#E9CFC8; }
:root .rg-card__label{ color:#FFF1E6; }
:root .rg-card__now, :root .rg-unit{ color:#D6B8B2; }
:root .rg-card__used b{ color:#FFC24A; }
:root .rg-btn{ color:#2A0A12; }
:root .rg-btn--danger{ background:#C62F3F; border-color:#C62F3F; color:#FFFFFF; }
:root .rg-btn--danger:hover{ background:#D9414F; }
:root .wd-card__hint{ color:#E9CFC8; }
/* ── 버튼 : 골드 면 위 골드/흰 글자 ─────────────────────────────────── */
:root .top-nav .btn-signup, :root .btn-signup{ background:linear-gradient(180deg,#FFD978,#EDBB4A); border-color:#EDBB4A; color:#2A0A12; }
:root .top-nav .btn-signup:hover, :root .btn-signup:hover{ background:linear-gradient(180deg,#FFE29A,#F2C55E); color:#2A0A12; }
:root .sup-chat, :root .sup-chat *{ color:#2A0A12; }
:root .lt-chat-button{ background:#A3123F; border-color:#A3123F; color:#FFFFFF; }
:root .lt-chat-button:hover{ background:#B8184A; color:#FFFFFF; }
:root .nav-tabs .nav-link, :root .nav-item .nav-link{ color:#FFF1E6; }
:root .nav-item .nav-link.active{ color:#2A0A12; }
:root font[color="blue"], :root font[color="#0000ff" i]{ color:#9CC2FF; }
:root font[color="red"]{ color:#FF8A8A; }
:root .sup-chat, :root .sup-chat:hover{ color:#2A0A12 !important; background-image:linear-gradient(180deg,#FFD978,#EDBB4A); }
:root .nav-item .nav-link.active{ background:#FFC24A; color:#2A0A12; }
/* About(helpdesk) 탭 — 지금 보고 있는 탭이 구분되게 */
:root .about-tabs{ background:#2A0A12; border:1px solid rgba(237,187,74,.25); border-radius:12px; overflow:hidden; }
:root .about-tab{ color:#E9CFC8; border:0 !important; }
:root .about-tab:hover{ background:#3A1019; color:#FFF1E6; }
:root .about-tab.is-active{ background:linear-gradient(180deg,#FFD978,#EDBB4A); color:#2A0A12; }