.hidden-force {
    display: none !important;
}

.game_lobby_num {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    text-align: center;
    background: #000;
    border: 2px solid white;
    width: 36px;
    height: 36px;
    padding: 2px;
    font-size: 18px;
    color: white;
}

.loading {
    position: fixed;
    z-index: 99999;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: none;
}

.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
}

.loading:not(:required) {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 50px;
    height: 50px;
    margin-top: -0.5em;
    border: 5px solid rgba(33, 150, 243, 1.0);
    border-radius: 100%;
    border-bottom-color: transparent;
    -webkit-animation: spinner 1s linear 0s infinite;
    animation: spinner 1s linear 0s infinite;
}

@-webkit-keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body {
    background: linear-gradient(135deg, #07111e 0%, #0f1d2f 100%);
    color: #f2f6ff;
}

.blank-main-panel {
    width: 100%;
    min-height: 320px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 32px rgba(0,0,0,0.22);
}

.blank-empty-block {
    min-height: 220px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10, 18, 30, 0.9);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

/* PC: the left slot-banner column and right member-sidebar are absolutely
   positioned, so a short blank body lets the footer ride up and overlap them.
   Reserve enough centre height for the footer to clear both side columns. */
@media (min-width: 1321px) {
    .blank-empty-block {
        min-height: 860px;
    }
}

/* ===== 서브페이지(blank/notice) 모바일: 회원정보·배너 영역 제거 =====
   PC에서는 좌/우 사이드 컬럼이므로 유지하고, 모바일에서만 숨김 */
@media (max-width: 1320px) {
    body.subpage .member-sidebar,
    body.subpage .slot-banners,
    body.subpage .mobile-quick {
        display: none !important;
    }
}

/* ===== 공지사항 게시판 (notice.html) ===== */
.notice-section {
    width: 100%;
    padding: 0 0 40px;
}

.notice-board {
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
}

/* 공지 페이지 히어로: 좌측 메뉴는 유지하고 우측 빈 배너 카드 자리에 본문(공지)을 배치 */
.notice-hero .notice-main {
    width: 100%;
}

@media (min-width: 1321px) {
    /* 좌측 슬롯배너 컬럼(절대배치: top 380px + 10개×78px + 간격 = 약 1268px)과
       우측 회원정보 컬럼이 absolute라, 본문이 짧으면 푸터가 위로 올라와 겹친다.
       상단 영역(본문 포함)이 두 컬럼 높이를 넘도록 최소 높이를 확보해 푸터가 비켜가게 한다. */
    .notice-top {
        min-height: 1320px;
    }

    /* 320px 고정 높이를 풀어 본문 높이에 맞춰 늘어나게 */
    .notice-hero,
    .notice-hero .container {
        height: auto;
    }
    /* 좌측 메뉴와 본문을 상단 기준으로 정렬 */
    .notice-hero .container {
        align-items: flex-start;
        padding-bottom: 20px;
    }
    /* 좌측 메뉴는 기존 히어로와 동일한 높이를 유지(아래 슬롯배너와 자연스럽게 연결) */
    .notice-hero .banner-side-menu {
        height: 320px;
    }
    /* 본문이 메뉴 우측의 남은 폭을 모두 차지 */
    .notice-hero .notice-main {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* gold-line title bar — same look as board-panel/.header in the main page */
.notice-board > .header {
    width: 100%;
    height: 56px;
    overflow: hidden;
    padding: 0 20px;
    margin-bottom: 18px;
    border: 1.5px solid rgba(255, 204, 88, 0.7);
    border-radius: 28px;
    background: linear-gradient(180deg, #2a2a36 0%, #191921 100%);
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.notice-board > .header .title-panel {
    color: #e0e9ff;
    font-size: 24px;
}

.notice-board > .header .title-panel .icon-panel {
    margin-right: 10px;
}

.notice-board > .header .title-panel .sub {
    margin-left: 12px;
    font-size: 13px;
    color: #9aa3b2;
}

/* search box on the right of the header */
.notice-search {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 6px 0 16px;
    border-radius: 18px;
    background-color: rgba(10, 18, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.notice-search input {
    width: 170px;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f2f6ff;
    font-size: 13px;
}

.notice-search input::placeholder {
    color: #6f7787;
}

.notice-search button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    color: #191921;
    background: linear-gradient(180deg, #ffe070, #ffce5a);
    cursor: pointer;
    transition: 0.2s;
}

.notice-search button:hover {
    box-shadow: 0 0 10px rgba(255, 190, 60, 0.6);
}

/* list panel */
.notice-list {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 18, 30, 0.9);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.notice-list table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.notice-list thead th {
    height: 50px;
    color: #9aa3b2;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notice-list tbody tr td {
    height: 56px;
    color: #ffffff;
    font-size: 15px;
    transition: 0.25s;
    border-bottom: solid 1px #1d2636;
}

.notice-list tbody tr:last-child td {
    border-bottom: 0;
}

.notice-list tbody tr:hover td {
    background-color: rgba(255, 200, 80, 0.1);
    color: #ffe07a;
    text-shadow: 0 0 8px rgba(255, 190, 60, 0.4);
    cursor: pointer;
}

/* gold accent bar on the left of the hovered row */
.notice-list tbody tr td:first-child {
    box-shadow: inset 0 0 0 rgba(255, 206, 90, 0);
}

.notice-list tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #ffce5a;
}

.notice-list .col-no {
    width: 80px;
    text-align: center;
    color: #6f7787;
    font-size: 14px;
}

.notice-list .col-title {
    text-align: left;
    padding-left: 24px;
}

.notice-list .col-title a {
    color: inherit;
}

.notice-list .col-title a:hover {
    text-decoration: underline;
}

.notice-list .col-date {
    width: 150px;
    text-align: center;
    color: #999ea5;
    font-size: 13px;
}

.notice-list tbody tr:hover .col-date {
    color: #ffd9a6;
}

.notice-list .col-views {
    width: 110px;
    text-align: center;
    color: #999ea5;
    font-size: 13px;
}

/* category badge in the title cell */
.notice-cat {
    display: inline-block;
    min-width: 52px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    margin-right: 12px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

.notice-cat.is-event {
    color: #191921;
    background: linear-gradient(180deg, #ffe070, #ffce5a);
}

.notice-cat.is-notice {
    color: #ffe07a;
    background-color: rgba(255, 200, 80, 0.14);
    border: 1px solid rgba(255, 204, 88, 0.45);
}

.notice-cat.is-rule {
    color: #ff8f7a;
    background-color: rgba(255, 35, 10, 0.12);
    border: 1px solid rgba(255, 80, 60, 0.45);
}

/* pinned (중요) rows */
.notice-list tr.is-pinned td {
    background-color: rgba(255, 255, 255, 0.025);
}

.notice-list tr.is-pinned .col-no i {
    color: #ffce5a;
    font-size: 17px;
}

.notice-list .col-title .new-icon {
    width: 18px;
    height: 18px;
    line-height: 17px;
    border-radius: 4px;
    display: inline-block;
    margin-left: 8px;
    background-color: #ff230a;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}

/* pagination */
.notice-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}

.notice-pagination a {
    min-width: 38px;
    height: 38px;
    line-height: 36px;
    padding: 0 6px;
    text-align: center;
    border-radius: 10px;
    color: #c6cede;
    font-size: 14px;
    background-color: rgba(10, 18, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: 0.2s;
}

.notice-pagination a:hover {
    color: #ffe07a;
    border-color: rgba(255, 204, 88, 0.5);
}

.notice-pagination a.is-active {
    color: #191921;
    font-weight: 700;
    background: linear-gradient(180deg, #ffe070, #ffce5a);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.4);
}

.notice-pagination a.nav i {
    font-size: 16px;
}

@media (max-width: 768px) {
    .notice-board > .header {
        height: 50px;
        padding: 0 14px;
    }
    .notice-board > .header .title-panel {
        font-size: 19px;
    }
    .notice-board > .header .title-panel .sub,
    .notice-search,
    .notice-list .col-views {
        display: none;
    }
    .notice-list tbody tr td {
        height: 52px;
        font-size: 14px;
    }
    .notice-list .col-no {
        width: 48px;
        font-size: 13px;
    }
    .notice-list .col-title {
        padding-left: 14px;
    }
    .notice-list .col-date {
        width: 92px;
        font-size: 12px;
    }
    .notice-cat {
        min-width: 0;
        display: block;
        width: fit-content;
        margin: 0 0 5px;
    }
}

/* ===== 이용규정 게시판 (rule.html) — notice 게시판 레이아웃 재사용 ===== */
/* 작성자 컬럼 (번호 / 제목 / 작성자) */
.notice-list .col-author {
    width: 140px;
    text-align: center;
    color: #999ea5;
    font-size: 13px;
}

.notice-list tbody tr:hover .col-author {
    color: #ffd9a6;
}

@media (max-width: 768px) {
    .notice-list .col-author {
        width: 84px;
        font-size: 12px;
    }
}

/* ===== notice/terms grid list (iOS Chrome <table> hit test 이슈 회피용) =====
   각 row 를 block-level <a> 로 만들어 브라우저 표준 hit test 를 확실히 함.
   기존 table 스타일과 유사한 톤을 grid 로 재현. */
.notice-list--grid .notice-list-head,
.notice-list--grid .notice-list-row {
    display: grid;
    grid-template-columns: 80px 1fr 150px 100px;
    align-items: center;
    padding: 0 24px;
}
.notice-list--grid.notice-list--terms .notice-list-head,
.notice-list--grid.notice-list--terms .notice-list-row {
    /* terms 는 조회 컬럼 대신 작성자 컬럼 */
    grid-template-columns: 80px 1fr 140px;
}
.notice-list--grid .notice-list-head {
    height: 50px;
    color: #9aa3b2;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.notice-list--grid .notice-list-row {
    height: 56px;
    color: #ffffff;
    font-size: 15px;
    transition: background 0.25s, color 0.25s;
    border-bottom: solid 1px #1d2636;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 200, 80, 0.2);
}
.notice-list--grid .notice-list-row:last-child { border-bottom: 0; }
.notice-list--grid .notice-list-row:hover { background-color: rgba(255, 200, 80, 0.1); }
.notice-list--grid .notice-list-row:hover .col-date,
.notice-list--grid .notice-list-row:hover .col-author { color: #ffd9a6; }
.notice-list--grid .col-no { text-align: center; color: #9aa3b2; font-size: 13px; }
.notice-list--grid .col-title {
    text-align: left;
    padding-left: 0;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.notice-list--grid .col-title .notice-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: inherit;
}
.notice-list--grid .col-date,
.notice-list--grid .col-views,
.notice-list--grid .col-author {
    text-align: center;
    color: #999ea5;
    font-size: 13px;
}
.notice-list-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9aa3b2;
    font-size: 14px;
}
@media (max-width: 768px) {
    .notice-list--grid .notice-list-head,
    .notice-list--grid .notice-list-row {
        grid-template-columns: 56px 1fr 92px;
        padding: 0 14px;
    }
    .notice-list--grid.notice-list--terms .notice-list-head,
    .notice-list--grid.notice-list--terms .notice-list-row {
        grid-template-columns: 56px 1fr 84px;
    }
    .notice-list--grid .col-views { display: none; }
    .notice-list--grid .notice-list-row {
        height: 52px;
        font-size: 14px;
    }
    .notice-list--grid .col-title {
        flex-wrap: wrap;
    }
    .notice-list--grid .notice-cat {
        min-width: 0;
        display: inline-block;
        width: fit-content;
    }
}

.marquee {
    overflow: hidden;
}

.marquee ul {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: site-marquee 24s linear infinite;
    will-change: transform;
}

.marquee:hover ul {
    animation-play-state: paused;
}

.marquee ul li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

@keyframes site-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* =====================================================================
   서브페이지 공통 패널/폼 컴포넌트 (mypage / point / deposit / withdraw /
   betting / support / message) — notice 다크 골드 테마에 맞춤
   ===================================================================== */
.panel { margin-bottom: 22px; }
.panel:last-child { margin-bottom: 0; }

/* 골드 라인 섹션 헤더 (notice .header 와 동일한 룩) */
.panel-head {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    margin-bottom: 14px;
    border: 1.5px solid rgba(255, 204, 88, 0.7);
    border-radius: 25px;
    background: linear-gradient(180deg, #2a2a36 0%, #191921 100%);
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.panel-head .ph-title {
    display: flex;
    align-items: center;
    color: #e0e9ff;
    font-size: 17px;
    font-weight: 700;
}
.panel-head .ph-title i { color: #ffce5a; font-size: 19px; margin-right: 9px; }
.panel-head .ph-meta { margin-left: auto; color: #9aa3b2; font-size: 13px; }
.panel-head .ph-meta b { color: #ffe07a; }

/* 다크 본문 패널 */
.panel-body {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 18, 30, 0.9);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    padding: 22px 24px;
}

/* 2열 그리드 (마이페이지 활동요약+비번변경 등) */
.col2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .col2-grid { grid-template-columns: 1fr; } }

/* ---- 폼 ---- */
.form-row { margin-bottom: 16px; }
.form-row:last-child { margin-bottom: 0; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
@media (max-width: 768px) { .form-grid2 { grid-template-columns: 1fr; } }

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #d6deec;
    font-size: 13.5px;
    font-weight: 600;
}
.form-label .req { color: #ff5a44; margin-left: 3px; }
.form-label .sub { color: #808897; font-weight: 400; font-size: 12px; margin-left: 6px; }

.fld {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 13, 22, 0.85);
    color: #f2f6ff;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
}
.fld:focus { border-color: rgba(255, 204, 88, 0.6); box-shadow: 0 0 0 3px rgba(255, 190, 60, 0.12); }
.fld::placeholder { color: #6f7787; }
select.fld { appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffce5a' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
textarea.fld { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.fld[readonly], .fld.is-readonly {
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed; color: #c6cede; cursor: default;
}
.fld.text-right { text-align: right; }
.fld-wrap { display: flex; gap: 8px; }
.fld-wrap .fld { flex: 1 1 auto; min-width: 0; }

.note { margin: 8px 0 0; color: #808897; font-size: 12.5px; line-height: 1.6; }
.note-warn {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 16px; margin-bottom: 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 204, 88, 0.4);
    background: rgba(255, 200, 80, 0.08);
    color: #ffd98a; font-size: 13px;
}
.note-warn i { color: #ffce5a; font-size: 17px; }

/* ---- 버튼 ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 44px; padding: 0 24px;
    border: 0; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: 0.2s; text-decoration: none;
}
.btn-gold { color: #191921; background: linear-gradient(180deg, #ffe070, #ffce5a); box-shadow: 0 0 14px rgba(255, 190, 60, 0.3); }
.btn-gold:hover { box-shadow: 0 0 18px rgba(255, 190, 60, 0.55); color: #191921; }
.btn-red { color: #fff; background: linear-gradient(180deg, #ff4a32, #d81e08); }
.btn-red:hover { box-shadow: 0 0 16px rgba(255, 60, 40, 0.5); color: #fff; }
.btn-dark { color: #e7eaf2; background: linear-gradient(180deg, #33333f, #23232c); border: 1px solid rgba(255,255,255,0.1); }
.btn-dark:hover { color: #ffe07a; border-color: rgba(255,204,88,0.45); }
.btn-block { display: flex; width: 100%; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13px; border-radius: 9px; }
.btn-center { display: flex; justify-content: center; margin-top: 20px; }
.btn-center .btn { min-width: 160px; }

/* ---- 계정정보 라벨/값 리스트 (마이페이지) ---- */
.info-list { display: flex; flex-direction: column; }
.info-list .info-row {
    display: flex; align-items: center;
    padding: 14px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.info-list .info-row:last-child { border-bottom: 0; }
.info-list .info-k { flex: 0 0 150px; color: #9aa3b2; font-size: 13.5px; }
.info-list .info-v { color: #f2f6ff; font-size: 14.5px; font-weight: 600; }
.info-list .info-v.mono { font-family: Consolas, monospace; letter-spacing: 0.3px; }
.info-list .info-v .unit { color: #9aa3b2; font-weight: 400; margin-right: 2px; }
.verify-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 10px; padding: 3px 10px;
    border-radius: 11px; font-size: 12px; font-weight: 700;
    color: #57e08a; background: rgba(60, 220, 130, 0.12); border: 1px solid rgba(60, 220, 130, 0.4);
}

/* ---- 활동요약 (라벨 + 값 + 화살표) ---- */
.act-list { display: flex; flex-direction: column; }
.act-row {
    display: flex; align-items: center;
    padding: 16px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #d6deec; font-size: 14px;
}
.act-row:last-child { border-bottom: 0; }
.act-row .act-v { margin-left: auto; margin-right: 14px; min-width: 30px; text-align: right; color: #ffe07a; font-weight: 700; }
.act-row .act-go { color: #6f7787; font-size: 16px; transition: 0.2s; }
.act-row:hover { color: #ffe07a; cursor: pointer; }
.act-row:hover .act-go { color: #ffce5a; transform: translateX(3px); }

/* ---- 금액 빠른선택 그리드 ---- */
.amt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
.amt-btn {
    height: 42px; border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 13, 22, 0.85);
    color: #d6deec; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.amt-btn:hover { color: #ffe07a; border-color: rgba(255, 204, 88, 0.5); background: rgba(255, 200, 80, 0.08); }
.amt-btn.is-reset { color: #ff8f7a; border-color: rgba(255, 80, 60, 0.35); }
@media (max-width: 768px) { .amt-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- 입금/출금 주소 + QR ---- */
.qr-row { display: flex; gap: 18px; align-items: flex-start; }
.qr-img {
    flex: 0 0 auto; width: 120px; height: 120px; border-radius: 12px;
    background: #fff; padding: 8px; object-fit: contain;
}
.addr-box { flex: 1 1 auto; min-width: 0; }

/* ---- 환전 미리보기 ---- */
.convert-preview {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 14px; margin: 14px 0 0;
    border-radius: 10px; background: rgba(255, 255, 255, 0.03);
    color: #f2f6ff; font-size: 16px; font-weight: 700;
}
.convert-preview .cp-arrow { color: #ffce5a; }
.convert-preview .won, .convert-preview .pt { color: #9aa3b2; font-weight: 400; margin-right: 2px; }

/* ---- 베팅 요약 카드 ---- */
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 768px) { .sum-grid { grid-template-columns: 1fr; } }
.sum-card {
    border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    padding: 18px 20px;
}
.sum-card .sum-k { color: #9aa3b2; font-size: 13px; margin-bottom: 8px; }
.sum-card .sum-v { color: #f2f6ff; font-size: 26px; font-weight: 800; }
.sum-card .sum-v .won { color: #ffce5a; font-size: 18px; margin-right: 2px; }
.sum-card .sum-sub { color: #6f7787; font-size: 12px; margin-top: 6px; }
.sum-card.is-profit .sum-v { color: #57e08a; }

/* ---- 필터칩 / 기간검색 ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
    height: 34px; padding: 0 16px; line-height: 32px;
    border-radius: 17px; font-size: 13px; cursor: pointer; transition: 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 13, 22, 0.7); color: #c6cede;
}
.chip:hover { color: #ffe07a; border-color: rgba(255, 204, 88, 0.45); }
.chip.is-active { color: #191921; font-weight: 700; background: linear-gradient(180deg, #ffe070, #ffce5a); border-color: transparent; }
.date-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.date-filter .radio { display: inline-flex; align-items: center; gap: 6px; color: #c6cede; font-size: 13.5px; cursor: pointer; }
.date-filter .radio input { accent-color: #ffce5a; }
.date-filter .date-in {
    height: 38px; padding: 0 10px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(7,13,22,0.85);
    color: #f2f6ff; font-size: 13px; color-scheme: dark;
}
.date-filter .date-sep { color: #6f7787; }
.date-filter .df-count { margin-left: auto; color: #9aa3b2; font-size: 13px; }

/* ---- 빈 상태 ---- */
.empty-state {
    padding: 50px 20px; text-align: center;
    color: #7a8294; font-size: 14px;
}
.empty-state i { display: block; font-size: 30px; color: #3a4456; margin-bottom: 10px; }

/* ---- 게시판 추가 컬럼 (쪽지/문의) ---- */
.notice-list .col-time { width: 150px; text-align: center; color: #999ea5; font-size: 13px; }
.notice-list .col-manage { width: 90px; text-align: center; }
.notice-list .col-status { width: 110px; text-align: center; }
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 11px; font-size: 12px; font-weight: 700; }
.status-badge.is-wait { color: #ffd98a; background: rgba(255,200,80,0.12); border: 1px solid rgba(255,204,88,0.4); }
.status-badge.is-done { color: #57e08a; background: rgba(60,220,130,0.12); border: 1px solid rgba(60,220,130,0.4); }
.del-btn { color: #ff8f7a; background: transparent; border: 1px solid rgba(255,80,60,0.35); border-radius: 8px; height: 30px; padding: 0 12px; font-size: 12px; cursor: pointer; transition: 0.2s; }
.del-btn:hover { background: rgba(255,80,60,0.12); }
.notice-list td.empty-cell { padding: 46px 10px; text-align: center; color: #7a8294; font-size: 14px; }

@media (max-width: 768px) {
    .panel-body { padding: 16px 14px; }
    .panel-head { height: 46px; padding: 0 16px; }
    .panel-head .ph-title { font-size: 15px; }
    .qr-row { flex-direction: column; }
    .info-list .info-k { flex-basis: 96px; font-size: 12.5px; }
    .notice-list .col-time, .notice-list .col-manage { display: none; }
}

/* ===================================================================== 
   슬롯 게임 목록 서브페이지 (slot.html) — notice 히어로 레이아웃 재사용
   ===================================================================== */

/* 프로바이더 타이틀 바: 로고 + 게임사명 + 골드 라인 */
.game-head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 18px;
}

.game-head .gh-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.game-head .gh-logo i {
    color: #ff3d7f;
    font-size: 30px;
    line-height: 1;
}

.game-head .gh-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.game-head .gh-name {
    flex: 0 0 auto;
    color: #f2f6ff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(255, 61, 127, 0.35);
}

.game-head .gh-line {
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 204, 88, 0.85), rgba(255, 204, 88, 0));
}

/* 검색 + 게임 수 툴바 */
.game-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.game-search {
    display: flex;
    align-items: center;
    flex: 0 1 360px;
    height: 44px;
    padding: 0 8px 0 18px;
    border-radius: 24px;
    background-color: rgba(10, 18, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.game-search input {
    flex: 1 1 auto;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f2f6ff;
    font-size: 14px;
}

.game-search input::placeholder {
    color: #6f7787;
}

.game-search button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    color: #191921;
    background: linear-gradient(180deg, #ffe070, #ffce5a);
    cursor: pointer;
    transition: 0.2s;
}

.game-search button:hover {
    box-shadow: 0 0 10px rgba(255, 190, 60, 0.6);
}

.game-count {
    flex: 0 0 auto;
    color: #9aa3b2;
    font-size: 14px;
    font-weight: 600;
}

.game-count b {
    color: #ffce5a;
}

/* 게임 카드 그리드 */
.game-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.game-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #2a2a36 0%, #191921 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.game-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 204, 88, 0.6);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 190, 60, 0.25);
}

.game-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.game-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.game-card:hover .game-thumb img {
    transform: scale(1.06);
}

/* 즐겨찾기(하트) 버튼 */
.game-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 20, 32, 0.6);
    backdrop-filter: blur(2px);
    cursor: pointer;
    transition: 0.2s;
    z-index: 2;
}

.game-fav i {
    font-size: 17px;
    line-height: 1;
}

.game-fav:hover {
    background: rgba(15, 20, 32, 0.85);
    color: #ff5d7f;
}

.game-fav.is-active {
    color: #ff3d6e;
    background: rgba(255, 61, 110, 0.18);
}

/* 마우스 오버 시 나타나는 게임입장 버튼 */
.game-thumb .game-play {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translate(-50%, 18px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 18px;
    color: #191921;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(180deg, #ffe070, #ffce5a);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    cursor: pointer;
    transition: 0.25s;
    z-index: 2;
}

.game-card:hover .game-thumb .game-play {
    opacity: 1;
    transform: translate(-50%, 0);
}

.game-card .game-name {
    display: block;
    padding: 12px 10px;
    text-align: center;
    color: #cfd6e4;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.game-card:hover .game-name {
    color: #ffe07a;
}

/* 반응형 */
@media (max-width: 1320px) {
    .game-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .game-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .game-head .gh-name {
        font-size: 19px;
    }
    .game-toolbar {
        flex-wrap: wrap;
        margin-bottom: 14px;
    }
    .game-search {
        flex: 1 1 100%;
        order: 2;
        height: 40px;
    }
    .game-count {
        order: 1;
        font-size: 13px;
    }
    .game-card .game-name {
        font-size: 12.5px;
        padding: 9px 8px;
    }
    .game-fav {
        width: 28px;
        height: 28px;
    }
    .game-fav i {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================================
   왼쪽 배너 옆 메뉴(.banner-side-menu)의 카지노/슬롯 호버 플라이아웃 서브메뉴
   — 상단 메뉴(.drop-d)와 동일한 톤. PC(>=1321px)에서만 노출.
   ===================================================================== */
@media (min-width: 1321px) {
    /* 메뉴 컬럼이 배너 위로 떠야 플라이아웃이 잘림 없이 보임 */
    .banner-side-menu {
        position: relative;
        z-index: 40;
    }

    /* 카지노/슬롯 버튼 + 플라이아웃을 감싸는 래퍼 (기존 버튼 높이 유지) */
    .banner-side-menu .bsm-item {
        position: relative;
        flex: 1 1 0;
        display: flex;
    }

    .banner-side-menu .bsm-item > .bsm-link {
        flex: 1 1 auto;
        width: 100%;
    }

    /* 오른쪽으로 펼쳐지는 플라이아웃 패널 */
    .banner-side-menu .bsm-drop {
        position: absolute;
        top: 0;
        left: 100%;
        margin-left: 10px;
        min-width: 196px;
        padding: 8px;
        background-color: #26262f;
        border: 1px solid #34343f;
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px);
        transition: 0.25s;
        z-index: 60;
    }

    /* 버튼과 패널 사이 간격에서도 호버가 끊기지 않도록 투명 브릿지 */
    .banner-side-menu .bsm-drop::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -12px;
        width: 12px;
    }

    .banner-side-menu .bsm-item:hover .bsm-drop {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* 플라이아웃 내부 항목 — 상단 메뉴 depth-a와 동일 톤 */
    .banner-side-menu .bsm-sub-a {
        display: flex;
        align-items: center;
        height: 42px;
        padding: 0 16px;
        margin-bottom: 4px;
        border-radius: 8px;
        background-color: rgba(164, 164, 195, 0.05);
        border: 1px solid rgba(164, 164, 195, 0.1);
        color: #b2bdcf;
        font-size: 14px;
        white-space: nowrap;
        transition: 0.2s;
    }

    .banner-side-menu .bsm-sub-a:last-child {
        margin-bottom: 0;
    }

    .banner-side-menu .bsm-sub-a:hover {
        background-color: rgba(255, 200, 80, 0.14);
        border-color: rgba(255, 204, 88, 0.5);
        color: #ffe07a;
        text-shadow: 0 0 8px rgba(255, 190, 60, 0.4);
        box-shadow: 0 0 10px rgba(255, 190, 60, 0.2);
    }
}

/* 왼쪽 메뉴 플라이아웃 서브메뉴 항목 앞 브랜드 아이콘 */
@media (min-width: 1321px) {
    .banner-side-menu .bsm-sub-a .bsm-sub-ico {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        margin-right: 10px;
        border-radius: 50%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.3);
        color: #ffe07a;
        font-size: 15px;
    }

    .banner-side-menu .bsm-sub-a .bsm-sub-ico img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 14%;
    }

    .banner-side-menu .bsm-sub-a:hover .bsm-sub-ico {
        background-color: rgba(0, 0, 0, 0.5);
    }
}

/* =====================================================================
   슬롯 페이지 내 브랜드(프로바이더) 카테고리 탭
   — flex-wrap 으로 카테고리가 늘어나면 자동 줄바꿈. 가로 스크롤 대신 흐름 정렬.
   ===================================================================== */
.provider-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.provider-tabs .ptab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 18px 0 8px;
    border-radius: 22px;
    background: linear-gradient(180deg, #2a2a36 0%, #191921 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #c6cede;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: 0.2s;
}

.provider-tabs .ptab .ptab-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffce5a;
    font-size: 16px;
}

.provider-tabs .ptab .ptab-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 14%;
}

.provider-tabs .ptab:hover {
    color: #ffe07a;
    border-color: rgba(255, 204, 88, 0.5);
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.2);
}

.provider-tabs .ptab.is-active {
    color: #191921;
    font-weight: 700;
    background: linear-gradient(180deg, #ffe070, #ffce5a);
    border-color: transparent;
    box-shadow: 0 0 14px rgba(255, 190, 60, 0.4);
}

.provider-tabs .ptab.is-active .ptab-ico {
    background-color: rgba(0, 0, 0, 0.18);
    color: #191921;
}

@media (max-width: 768px) {
    .provider-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 4px;
    }
    .provider-tabs::-webkit-scrollbar {
        height: 4px;
    }
    .provider-tabs::-webkit-scrollbar-thumb {
        background: rgba(255, 204, 88, 0.4);
        border-radius: 2px;
    }
    .provider-tabs .ptab {
        flex: 0 0 auto;
        height: 40px;
        font-size: 13px;
        padding: 0 14px 0 7px;
    }
    .provider-tabs .ptab .ptab-ico {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
}

/* =====================================================================
   쪽지 리스트 보조 (message.html) — 안읽음 행 / 삭제 버튼
   ===================================================================== */
.notice-list tr.is-unread .col-title a {
    color: #ffffff;
    font-weight: 700;
}
.notice-list tr.is-unread .col-no {
    color: #ffce5a;
}

.msg-del {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background-color: rgba(10, 18, 30, 0.7);
    color: #9aa3b2;
    cursor: pointer;
    transition: 0.2s;
}
.msg-del:hover {
    color: #ff7a66;
    border-color: rgba(255, 80, 60, 0.5);
    background-color: rgba(255, 35, 10, 0.1);
}

/* =====================================================================
   쪽지 보기 (message_view.html)
   ===================================================================== */
.msg-view {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 18, 30, 0.9);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    padding: 26px 28px;
}

.msg-view .mv-subject {
    margin: 0 0 14px;
    color: #f2f6ff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.msg-view .mv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #9aa3b2;
    font-size: 13px;
}
.msg-view .mv-meta i { color: #ffce5a; margin-right: 4px; }
.msg-view .mv-meta b { color: #ffe07a; font-weight: 700; }

.msg-view .mv-body {
    padding: 24px 2px 10px;
    min-height: 220px;
    color: #d6deec;
    font-size: 14.5px;
    line-height: 1.85;
}
.msg-view .mv-body p { margin: 0 0 14px; }
.msg-view .mv-body p:last-child { margin-bottom: 0; }

/* 액션 버튼 행 */
.msg-view .mv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.msg-view .mv-nav {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.mv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(10, 18, 30, 0.7);
    color: #c6cede;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}
.mv-btn i { font-size: 16px; }
.mv-btn:hover {
    color: #ffe07a;
    border-color: rgba(255, 204, 88, 0.5);
    box-shadow: 0 0 10px rgba(255, 190, 60, 0.2);
}
.mv-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.mv-btn.mv-btn-danger:hover {
    color: #ff7a66;
    border-color: rgba(255, 80, 60, 0.5);
    box-shadow: 0 0 10px rgba(255, 60, 40, 0.2);
}
.mv-btn.mv-btn-gold {
    color: #191921;
    font-weight: 700;
    background: linear-gradient(180deg, #ffe070, #ffce5a);
    border-color: transparent;
}
.mv-btn.mv-btn-gold:hover {
    color: #191921;
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.5);
}

/* 답장 영역 */
.msg-view .mv-reply {
    margin-top: 18px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}
.msg-view .mv-reply-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: #e0e9ff;
    font-size: 14px;
    font-weight: 600;
}
.msg-view .mv-reply-head i { color: #ffce5a; }
.msg-view .mv-reply-text {
    width: 100%;
    min-height: 120px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(10, 18, 30, 0.7);
    color: #f2f6ff;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
}
.msg-view .mv-reply-text::placeholder { color: #6f7787; }
.msg-view .mv-reply-text:focus { border-color: rgba(255, 204, 88, 0.5); }
.msg-view .mv-reply-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .msg-view { padding: 18px 16px; }
    .msg-view .mv-subject { font-size: 17px; }
    .msg-view .mv-actions .mv-nav { margin-left: 0; width: 100%; }
    .mv-btn { height: 38px; padding: 0 13px; font-size: 13px; }
}