:root{ --gold:#e9c15a; --gold2:#c9962e; --bg:#0a0705; --card:#141210; --line:rgba(233,193,90,.35); }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans JP','Malgun Gothic',system-ui,sans-serif;color:#eee;background:#000}
.page{position:relative;min-height:100vh;background:#0a0705 url('bg_main.jpg') center top / cover no-repeat fixed;}
.page:before{content:'';position:fixed;inset:0;background:linear-gradient(180deg,rgba(6,4,2,.5),rgba(6,4,2,.82));z-index:0;pointer-events:none}
.col{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 12px 60px;}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* 헤더 */
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:10px 4px 4px;font-size:13px}
.topbar .uid{color:var(--gold)}
.topbar .cred b{color:var(--gold);font-size:15px}
.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:14px}
.navgrp{display:flex;gap:8px}
.navgrp.r{justify-content:flex-end}
.tab{transform:skewX(-12deg);background:linear-gradient(180deg,#1c1712,#0d0a07);border:1px solid var(--line);
     padding:14px 26px;font-weight:800;font-size:15px;letter-spacing:.04em;cursor:pointer;color:#f0e6d0;white-space:nowrap}
.tab>span{display:inline-block;transform:skewX(12deg)}
.tab:hover{border-color:var(--gold)}
.tab.on{background:linear-gradient(180deg,#f3d375,#c9962e);color:#241a06;border-color:var(--gold)}
.logo{display:flex;flex-direction:column;align-items:center}
.logo img{width:118px}
.brand-sub{font-size:10px;letter-spacing:.35em;color:var(--gold);margin-top:-4px}

/* 히어로 + 티커 */
.hero{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#000}
.hero img{width:100%;height:clamp(140px,23vw,280px);object-fit:cover;object-position:center}
.ticker{display:flex;align-items:center;gap:12px;margin:12px 0 6px;padding:8px 8px 8px 14px;
        background:linear-gradient(180deg,#17130d,#0b0906);border:1px solid var(--line);border-radius:40px}
.ticker .mega{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#f3d375,#c9962e);color:#241a06;flex:0 0 auto}
.ticker .txt{flex:1;color:#cbb98c;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker .btn{background:linear-gradient(180deg,#f3d375,#c9962e);color:#241a06;font-weight:800;border-radius:30px;padding:8px 18px;font-size:13px;flex:0 0 auto}

/* 섹션 제목 */
.sec-title{display:flex;align-items:center;gap:14px;justify-content:center;margin:34px 0 16px}
.sec-title:before,.sec-title:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.sec-title h2{font-family:'Times New Roman',serif;font-size:26px;letter-spacing:.14em;color:var(--gold);font-weight:700;text-shadow:0 2px 10px rgba(201,150,46,.4)}
.ribbon{display:flex;justify-content:center;margin:18px 0 14px}
.ribbon span{background:linear-gradient(180deg,#f3d375,#c9962e);color:#241a06;font-weight:900;letter-spacing:.1em;
             padding:9px 40px;border-radius:6px;font-size:15px;box-shadow:0 4px 16px rgba(201,150,46,.4);border:1px solid #f7e6a8}

/* 추천게임 가로 */
.reco{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.reco::-webkit-scrollbar{height:6px}.reco::-webkit-scrollbar-thumb{background:var(--gold2);border-radius:3px}
.reco a{flex:0 0 auto;width:180px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#100d0a}
.reco img{width:100%;height:118px;object-fit:cover}

/* 프로바이더 카드 그리드 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#181410,#0c0906);
       aspect-ratio:5/3;cursor:pointer;transition:.18s}
.pcard:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.pcard .art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:6px}
.pcard .meta{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(0deg,rgba(6,4,2,.95),transparent)}
.pcard .jp{font-size:18px;font-weight:800;color:var(--gold);text-shadow:0 2px 6px #000}
.pcard .en{font-size:10px;letter-spacing:.18em;color:#b7a988;text-transform:uppercase;margin-top:2px}

/* 게임 썸네일 그리드 (슬롯 게임목록) */
.ggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.gcard{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#100d0a;aspect-ratio:1/1;cursor:pointer;transition:.16s}
.gcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.gcard img{width:100%;height:100%;object-fit:cover}
.gcard .nm{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-size:11px;color:#eee;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard.noimg{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font-size:12px;color:var(--gold);font-weight:700}

/* 뒤로/페이지 헤더 */
.pagehead{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.pagehead h1{font-family:'Times New Roman',serif;font-size:24px;letter-spacing:.1em;color:var(--gold)}
.backlink{color:#cbb98c;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:8px 14px}
.backlink:hover{border-color:var(--gold);color:var(--gold)}
.empty{text-align:center;color:#8a7b5c;padding:40px;font-size:14px}

/* 푸터 */
.footer{margin-top:44px;padding:22px;border-top:1px solid var(--line);text-align:center;color:#8a7b5c;font-size:12px}

/* 로그인 모달 */
.modal-bd{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;place-items:center;z-index:50}
.modal-bd.on{display:grid}
.modal{width:340px;max-width:92vw;background:linear-gradient(180deg,#1a1510,#0c0906);border:1px solid var(--gold);border-radius:14px;padding:24px}
.modal h3{text-align:center;color:var(--gold);font-size:20px;margin-bottom:16px;letter-spacing:.1em}
.modal input{width:100%;padding:13px 14px;margin-bottom:10px;background:#0a0806;border:1px solid var(--line);border-radius:8px;color:#fff;font-size:14px}
.modal .go{width:100%;padding:13px;background:linear-gradient(180deg,#f3d375,#c9962e);color:#241a06;font-weight:900;border:none;border-radius:8px;font-size:15px;cursor:pointer}
.modal .err{color:#ff7676;font-size:12px;min-height:16px;margin-bottom:6px;text-align:center}
.modal .x{float:right;color:#888;cursor:pointer;font-size:18px;margin-top:-8px}

@media(max-width:820px){ .grid{grid-template-columns:repeat(2,1fr)} .ggrid{grid-template-columns:repeat(3,1fr)} .header{grid-template-columns:1fr} .navgrp{flex-wrap:wrap;justify-content:center} .tab{padding:10px 16px;font-size:13px} }