/* =====================================================================
   casino1.css — "카지노1" 디자인 스킨 레이어 (web4 전용)
   기존 base/components/layout.css 위에 덮어 색/레이아웃을 카지노1 룩으로 전환.
   백엔드 연동(data-action) 마크업은 그대로, 시각 표현만 교체.
   ===================================================================== */

/* ---- 폰트 (Gmarket Sans: 배너 타이틀용, CDN) ---- */
@font-face{font-family:'GmarketSans';font-weight:300;
  src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff) format('woff');font-display:swap;}
@font-face{font-family:'GmarketSans';font-weight:500;
  src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff) format('woff');font-display:swap;}
@font-face{font-family:'GmarketSans';font-weight:700;
  src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff) format('woff');font-display:swap;}

/* ===================================================================
   1. 토큰 재정의 — 카지노1 팔레트
   =================================================================== */
:root{
  --c1-bg:#1f1e24;
  --c1-panel:#2d2c3a;
  --c1-panel-2:#25283b;
  --c1-ink:#13171e;
  --c1-line:#3c3b4d;
  --c1-line-2:#62616b;
  --c1-teal:#0e9597;
  --c1-teal-lite:#5fb8bb;
  --c1-gold:#ffcc00;
  --c1-gold-grad:linear-gradient(90deg,#ffe938,#fc9b30);
  --c1-green:#95e99b;
  --c1-blue:#00a8ea;
  --c1-sidebar-w:280px;

  /* 기존 컴포넌트가 참조하는 토큰을 카지노1 색으로 매핑 */
  --brand-pink:#ffcc00;
  --brand-purple:#0e9597;
  --brand-gradient:linear-gradient(90deg,#ffe938,#fc9b30);
  --brand-gradient-strong:linear-gradient(135deg,#ffe938 0%,#fc9b30 100%);

  --bg:#1f1e24;
  --bg-1:#25283b;
  --bg-2:#2d2c3a;
  --bg-3:#13171e;
  --bg-elev:rgba(255,255,255,.04);
  --bg-hover:rgba(255,255,255,.07);
  --bg-input:#222230;

  --fg:#ffffff;
  --fg-muted:#aaaaaa;
  --fg-dim:#62616b;

  --ok:#95e99b;
  --warn:#ffaa00;
  --err:#ff5c6c;
  --info:#00a8ea;

  --border:rgba(255,255,255,.08);
  --border-strong:#3c3b4d;
  --focus-ring:0 0 0 2px rgba(255,204,0,.40);

  --shadow-glow:0 10px 30px rgba(14,149,151,.20);
}

/* 본문 배경을 카지노1 플랫 다크로 (기존 핑크/퍼플 글로우 제거) */
body{
  background:var(--c1-bg) !important;
}
a:hover{color:var(--c1-gold);}

/* 기존 상단바 row/nav 무력화 — 사이드바 마크업으로 대체됨 */
.topbar-row{display:none !important;}

/* ===================================================================
   2. 레이아웃 셸 — 사이드바 + 콘텐츠 오프셋
   =================================================================== */
#topbar{display:contents;}

/* 좌측 고정 사이드바 */
#header{
  position:fixed;top:0;left:0;width:var(--c1-sidebar-w);height:100%;
  z-index:99;background:var(--c1-bg);overflow-y:auto;
  border-right:1px solid var(--c1-line);
}
#header::-webkit-scrollbar{width:6px;}
#header::-webkit-scrollbar-thumb{background:#3a3946;border-radius:3px;}

#header .logo{margin-top:20px;text-align:center;}
#header .logo img{width:180px;max-width:80%;display:inline-block;}
.c1-logo{
  font-family:'GmarketSans','Segoe UI',sans-serif;font-weight:700;font-size:26px;letter-spacing:1px;
  background:var(--c1-gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;display:inline-block;
}
.m_header .c1-logo{font-size:20px;}
.m_header .money a{color:inherit;text-decoration:underline;}

#header .top-nav-box{margin:14px auto 0 auto;}
#header .top-nav-box ul{list-style:none;margin:0;padding:0;}

#header .top-nav-box>ul.top_nav_left{
  width:83%;padding:10px 0;margin:0 auto;border-bottom:1px solid var(--c1-line);
}
#header .top-nav-box ul>li{
  padding:0 15px;position:relative;border:1px solid var(--c1-line-2);
  border-radius:15px;margin-bottom:8px;transition:.25s;
}
#header .top-nav-box ul>li:hover,
#header .top-nav-box ul>li.active{
  background:var(--c1-gold-grad);border-color:var(--c1-gold);
}
#header .top-nav-box ul>li>a{
  font-weight:400;height:50px;font-size:14px;display:flex;align-items:center;
  color:var(--c1-line-2);gap:10px;
}
#header .top-nav-box ul>li>a i{font-size:22px;}
#header .top-nav-box ul>li>a img{height:30px;transition:.25s;}
#header .top-nav-box ul>li>a>div{display:flex;align-items:center;flex-wrap:wrap;line-height:1.1;}
#header .top-nav-box ul>li>a>div p{width:100%;margin:0;}
#header .top-nav-box ul>li>a>div small{line-height:13px;font-size:11px;}
#header .top-nav-box ul>li:hover a,
#header .top-nav-box ul>li:hover a>div,
#header .top-nav-box ul>li.active a{color:#000;}
#header .top-nav-box ul>li:hover a>img,
#header .top-nav-box ul>li.active a img{filter:brightness(.2);}

/* 하단 메뉴 묶음 (베팅내역/공지/이벤트/포인트/쪽지/내정보/출석) */
#header .top-nav-box>ul.top_nav_left.bot{border-bottom:0;margin:9px auto 90px auto;}
#header .top-nav-box>ul.top_nav_left.bot li{
  background:var(--c1-panel);border-radius:0;margin-bottom:0;border-top:0;border-color:var(--c1-line);
}
#header .top-nav-box>ul.top_nav_left.bot li:first-child{border-radius:15px 15px 0 0;border-top:1px solid var(--c1-line-2);}
#header .top-nav-box>ul.top_nav_left.bot li:last-child{border-radius:0 0 15px 15px;}
#header .top-nav-box ul.top_nav_left.bot>li>a{color:#cfcfe0;font-size:13px;}
#header .top-nav-box ul.top_nav_left.bot>li:hover{background:#34333f;border-color:var(--c1-line);}
#header .top-nav-box ul.top_nav_left.bot>li:hover a{color:#fff;}
#header .top-nav-box ul.top_nav_left.bot>li:hover a i{color:var(--c1-gold);}

/* 콘텐츠/푸터 좌측 오프셋 */
#view{margin:0 20px 0 calc(var(--c1-sidebar-w) + 10px);padding:0 0 40px;min-height:60vh;}
#view .container{max-width:1180px;padding:0;}
#footer{margin-left:var(--c1-sidebar-w);}

/* ===================================================================
   3. 상단 정보바 (.top_notice) — 데스크탑
   =================================================================== */
.top_notice{
  position:relative;width:calc(100% - var(--c1-sidebar-w));height:88px;z-index:9;
  display:flex;align-items:center;margin-left:var(--c1-sidebar-w);padding:0 24px;
  border-bottom:1px solid var(--c1-line);
}
.top_notice .oneline{flex:1;overflow:hidden;}
.top_notice .oneline ul{display:flex;align-items:center;margin:0;padding:0;list-style:none;}
.top_notice .oneline ul li{display:inline-block;color:#cfcfe0;font-size:14px;}
.top_notice .oneline marquee{color:var(--c1-teal-lite);}
.top_notice .uinfo{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.top_notice .uinfo>div{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap;}
.top_notice .uinfo .money{color:var(--c1-gold);font-weight:600;}
.top_notice .uinfo .point{color:var(--c1-green);}
.top_notice .uinfo .point a{
  background:var(--c1-green);color:#000;border-radius:5px;padding:0 10px;height:30px;
  font-size:12px;display:flex;align-items:center;cursor:pointer;
}
.top_notice .uinfo span.bar{width:2px;height:12px;background:#666;margin:0 6px;}
.top_notice .uinfo .nick{color:#fff;display:flex;align-items:center;gap:6px;}
.top_notice .uinfo .logout{
  height:32px;display:flex;align-items:center;justify-content:center;padding:0 14px;
  border-radius:5px;font-size:13px;cursor:pointer;background:var(--c1-panel);color:#fff;
}
.top_notice .uinfo .logout:hover{background:#3a3946;}
.top_notice .uinfo .lang{margin-left:4px;}
/* 비로그인 상단 버튼 */
.top_notice .guest-actions{display:flex;gap:8px;align-items:center;}
.top_notice .guest-actions .c1-login,
.top_notice .guest-actions .c1-register{
  height:34px;padding:0 18px;border-radius:6px;font-size:13px;font-weight:600;
  display:flex;align-items:center;cursor:pointer;border:0;
}
.top_notice .guest-actions .c1-login{background:var(--c1-panel);color:#fff;}
.top_notice .guest-actions .c1-register{background:var(--c1-gold-grad);color:#000;}

/* 메시지 카운트 뱃지 */
.top_notice .uinfo .msg .badge{
  background:var(--c1-gold);color:#000;border-radius:10px;padding:0 6px;font-size:11px;margin-left:2px;
}

/* ===================================================================
   4. 모바일 헤더 (.m_header) + 사이드바 오버레이
   =================================================================== */
.m_header{display:none;}
#hamburger-menu{position:relative;width:25px;height:20px;cursor:pointer;}
#hamburger-menu span{position:absolute;left:0;height:3px;width:100%;background:#cfcfe0;border-radius:2px;transition:.3s;}
#hamburger-menu span:nth-child(1){top:0;}
#hamburger-menu span:nth-child(2){top:9px;}
#hamburger-menu span:nth-child(3){top:18px;width:70%;}

/* ===================================================================
   5. 메인 — 배너 캐러셀
   =================================================================== */
.main--wrap{margin-top:20px;}
.banner-main{width:100%;text-align:center;margin:20px 0 0;}
.banner-main .banner-center{position:relative;}
.c1-carousel{position:relative;width:100%;overflow:hidden;border-radius:25px;}
.c1-carousel .c1-slide{display:none;position:relative;}
.c1-carousel .c1-slide.active{display:block;animation:c1fade .6s ease;}
.c1-carousel .c1-slide>img{width:100%;display:block;border-radius:25px;}
.c1-carousel .textwrap{position:absolute;left:0;right:0;top:12%;text-shadow:2px 4px 8px #000;}
.c1-carousel .textwrap>img{display:block;margin:0 auto 10px;width:170px;}
.c1-carousel .textwrap .first{
  font-size:24px;font-weight:700;padding:10px 20px;border-radius:10px;display:inline-block;color:#fff;
  font-family:'GmarketSans';
  background:radial-gradient(ellipse farthest-corner at right bottom,#FEDB37 0%,#FDB931 8%,#9f7928 30%,#8A6E2F 40%,transparent 80%),
             radial-gradient(ellipse farthest-corner at left top,#FFFFFF 0%,#FFFFAC 8%,#D1B464 25%,#5d4a1f 62.5%,#5d4a1f 100%);
}
.c1-carousel .textwrap .second{
  margin-top:10px;display:flex;align-items:center;justify-content:center;height:80px;font-size:18px;
  color:#969fd0;font-family:'GmarketSans';
  background:linear-gradient(90deg,transparent,#3a485f,transparent);
}
.c1-carousel .c1-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;justify-content:center;}
.c1-carousel .c1-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;}
.c1-carousel .c1-dots button.active{background:var(--c1-gold);}
@keyframes c1fade{from{opacity:.3}to{opacity:1}}

/* ===================================================================
   6. 카테고리 스위치 (카지노/슬롯/스포츠)
   =================================================================== */
.category-main{width:100%;text-align:center;margin:-25px auto 0;position:relative;z-index:5;}
.category-main .category-center{display:flex;gap:15px;align-items:flex-start;justify-content:center;}
.category-main .category-center a{
  width:33%;text-decoration:none;transition:.4s;position:relative;border-radius:10px;cursor:pointer;
}
.category-main .category-center a img{transition:.4s;width:100%;}
.category-main .category-center a img.on{display:none;}
.category-main .category-center a.active img.off{display:none;}
.category-main .category-center a.active img.on{display:block;}
.category-main .category-center a:hover{filter:brightness(1.08);}

/* ===================================================================
   7. 게임 그리드 (cs-container) — vendor-card 를 카지노1 타일로
   =================================================================== */
.cs-container{
  width:100%;margin-top:14px;padding:20px;background:var(--c1-panel);border-radius:20px;
}
.cs-title{width:100%;margin-bottom:22px;text-align:center;border-bottom:1px solid var(--c1-line);padding-bottom:8px;}
.cs-title p{display:none;color:#e59375;font-weight:700;font-size:24px;}
.cs-title p.active{display:block;}
.cs-title p small{display:block;font-size:15px;color:#aaa;margin-top:2px;}

.cs-group{display:none;}
.cs-group.active{display:block;animation:c1fade .5s ease;}

/* 기존 vendor-grid/vendor-card 를 카지노1 라운드 타일로 재스킨 (홈 + 카지노/슬롯 목록 공통) */
#view .vendor-grid{
  display:grid !important;grid-template-columns:repeat(6,1fr);gap:22px;padding:0;background:none;
}
#view .vendor-card-wrap{margin:0;}
#view .vendor-card{
  position:relative;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:1/1;
  border:1px solid #3a3946;background:#1a1924;transition:transform .25s, box-shadow .25s;
}
#view .vendor-card:hover{transform:scale(1.03);box-shadow:0 10px 24px rgba(0,0,0,.5);}
#view .vendor-card-img{width:100%;height:100%;object-fit:cover;}
#view .vendor-card-bg{position:absolute;inset:0;}
#view .vendor-card-bg-fallback{display:flex;align-items:center;justify-content:center;height:100%;}
#view .vendor-card-fallback-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#bbb;font-weight:700;font-size:14px;text-align:center;padding:8px;}
#view .vendor-card-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.75));opacity:0;transition:.25s;}
#view .vendor-card:hover .vendor-card-overlay{opacity:1;}
#view .vendor-card-name-top{padding:10px;color:#fff;font-weight:600;font-size:13px;}
#view .vendor-card-name-bottom{
  display:block; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); padding:8px 10px;
  color:#fff; font-weight:800; line-height:1.25; text-align:center;
  font-size:clamp(13px,1.15vw,20px); word-break:keep-all;
  text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.8);
  pointer-events:none; z-index:3;
}
#view .vendor-card-label{text-align:center;margin-top:8px;color:#cfcfe0;font-size:13px;}
#view .vendor-card-corner-num{position:absolute;right:8px;bottom:8px;background:var(--c1-gold);color:#000;
  font-weight:800;border-radius:8px;padding:2px 8px;font-size:13px;}

@media(max-width:1100px){#view .vendor-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:760px){#view .vendor-grid{grid-template-columns:repeat(3,1fr);gap:12px;}}
@media(max-width:480px){#view .vendor-grid{grid-template-columns:repeat(2,1fr);}}

/* ===================================================================
   8. 하단 박스 (공지 / 이벤트 / 고객센터)
   =================================================================== */
.notice_area{
  display:flex;justify-content:space-between;gap:18px;width:100%;margin-top:40px;
  border-top:1px solid var(--c1-line);padding-top:0;
}
.notice_area .boardbox,.notice_area .eventbox,.notice_area .csbox{
  background:var(--c1-panel);border-radius:15px;padding:23px;margin-top:35px;width:100%;vertical-align:top;
}
.notice_area h2{font-size:18px;color:#aaa;margin-bottom:14px;font-weight:700;}
.notice_area h2 span{font-size:18px;color:var(--c1-gold);}
.notice_area .nlist{list-style:none;margin:0;padding:0;}
.notice_area .nlist li{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px dashed #3c3b4d;
  font-size:13px;color:#cfcfe0;cursor:pointer;}
.notice_area .nlist li:hover{color:#fff;}
.notice_area .nlist li .date{color:#7a7990;font-size:12px;flex:none;}
.notice_area .nlist .empty{color:#7a7990;text-align:center;padding:16px 0;cursor:default;}
.notice_area .csbox .txt-box{text-align:center;}
.notice_area .csbox .txt-box h2{color:#fff;font-size:18px;margin:6px 0 12px;}
.notice_area .csbox .txt-box p{color:#aaa;font-size:13px;line-height:1.6;}
.notice_area .main_qna{
  background:#59576d;border-radius:15px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;margin-top:18px;color:#fff;font-size:14px;cursor:pointer;
}
.notice_area .main_qna img{height:20px;}

@media(max-width:900px){.notice_area{display:block;}}

/* ===================================================================
   9. 푸터 (#footer) — 카지노1 형태
   =================================================================== */
.footer-inner,.footer-top{display:none;}     /* 기존 푸터 그리드 숨김 */
#footer{width:auto;padding-top:40px;text-align:center;}
#footer .c1-foot-top{padding:0 20px 24px;}
#footer .c1-foot-top img{height:56px;margin-bottom:12px;display:inline-block;}
#footer .c1-foot-top p{color:#9a99af;line-height:20px;font-size:12px;max-width:900px;margin:0 auto;}
#footer .c1-agency{border-top:1px solid #444;margin:0 auto;padding:14px 0;}
#footer .c1-agency ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  list-style:none;margin:0;padding:0;}
#footer .c1-agency ul li{cursor:pointer;}
#footer .c1-agency ul li img{height:36px;filter:contrast(.25);transition:.3s;}
#footer .c1-agency ul li:hover img{filter:contrast(1);}

/* ===================================================================
   10. SPA 컴포넌트 리테마 (모달/폼/버튼/칩/드롭다운/토스트)
   =================================================================== */
.btn-primary{background:var(--c1-gold-grad) !important;color:#000 !important;border:0 !important;font-weight:700;}
.btn-primary:hover{filter:brightness(1.05);}
.btn-ghost{border:1px solid var(--c1-line) !important;}
.card,.modal,.modal-card,.sheet{background:var(--c1-panel) !important;border-color:var(--c1-line) !important;}
.modal-root .modal-backdrop,.modal-backdrop{background:rgba(0,0,0,.62) !important;}
input,select,textarea{background:var(--bg-input) !important;border-color:var(--c1-line) !important;color:#fff !important;}
input::placeholder,textarea::placeholder{color:#7a7990;}
.chip{background:var(--c1-panel) !important;border:1px solid var(--c1-line) !important;}
.dropdown{background:var(--c1-ink) !important;border:1px solid var(--c1-line) !important;}
.dropdown a:hover{background:rgba(255,255,255,.05) !important;color:var(--c1-gold) !important;}
table th{color:var(--c1-gold) !important;}
.section-head h2{color:#eee;}
.section-head h2::before{background:var(--c1-gold-grad) !important;}
.more{color:var(--c1-teal-lite) !important;}

/* 게임 실행 타일(슬롯 게임 리스트 등) */
.game-tile{background:#1a1924 !important;border:1px solid #3a3946 !important;border-radius:14px !important;}
.game-tile:hover{border-color:var(--c1-gold) !important;}

/* 베팅내역 — 스포츠 카테고리 칩 색상 */
.bet-cat-chip.sports{background:rgba(14,149,151,.18);color:#5fe3d8;}

/* ── 입금/출금/내정보/베팅내역/쪽지 등 모달 ──
   전체화면을 덮지 않고 콘텐츠 영역(사이드바·상단바 바깥)에만 표시.
   → 좌측 사이드바 + 상단 정보바가 계속 보이고 클릭도 가능. */
.modal{
  inset:88px 0 0 var(--c1-sidebar-w) !important;
  padding:24px !important;
  background:rgba(0,0,0,.55) !important;
  backdrop-filter:blur(3px) !important;
  align-items:flex-start !important;
}
.modal-card{margin:0 auto !important;max-height:calc(100vh - 88px - 48px) !important;}
.modal-card.size-xl{max-width:1100px !important;width:100% !important;}
@media(max-width:1024px){
  /* 모바일: m_header(상단) 아래로, 전체폭 */
  .modal{inset:92px 0 0 0 !important;padding:14px !important;}
  .modal-card{max-height:calc(100vh - 92px - 28px) !important;}
}

/* ===================================================================
   11. 반응형 — 모바일에서 사이드바 → 오버레이, m_header 노출
   =================================================================== */
@media(max-width:1024px){
  #header{display:none;width:100%;top:64px;height:calc(100% - 64px);border-right:0;
    box-shadow:0 12px 30px rgba(0,0,0,.5);}
  #header.active{display:block;animation:c1slide .35s ease;}
  #header .logo{display:none;}
  #header .top-nav-box>ul.top_nav_left{width:92%;}

  .m_header{
    display:block;width:100%;position:fixed;left:0;top:0;background:#1f212b;z-index:100;text-align:center;
    border-bottom:1px solid #313651;
  }
  .m_header .logo{margin:0;padding:7px 0;}
  .m_header .logo img{height:46px;display:inline-block;}
  .m_header .menu-wrapper{position:absolute;left:14px;top:14px;}
  .m_header .money{display:flex;align-items:center;justify-content:center;font-size:12px;height:30px;
    background:#25283b;border-top:1px solid #313651;gap:18px;}
  .m_header .money>div{display:flex;align-items:center;gap:5px;}
  .m_header .money>div.money-amt{color:var(--c1-gold);}
  .m_header .money>div.point-amt{color:var(--c1-green);}
  .m_header .money>div.point-amt a{background:var(--c1-green);color:#000;border-radius:4px;padding:0 6px;font-size:11px;}

  .top_notice{display:none;}
  #view{margin:104px 12px 0;}
  #footer{margin-left:0;}
  .banner-main{margin-top:0;}
  .category-main .category-center a{font-size:12px;}
}
@keyframes c1slide{from{transform:translateX(-12px);opacity:.4}to{transform:none;opacity:1}}

/* drawer-host(기존 모바일 드로어)는 카지노1 사이드바로 대체 → 숨김 */
#drawer-host{display:none !important;}