/* 기본 스타일 */
/* AT-0 · 전체 선택자에서 font-family 제거(margin/padding/box-sizing 은 그대로 유지).
   근거: `*` 가 모든 요소에 폰트를 직접 박고 있어 body 상속이 전파되지 않았다(A2Z 미적용의 실 원인).
   제거하면 app-front.css 의 `body { font-family: var(--app-font-base) }` 상속이 정상 동작하고,
   아이콘 폰트(FA5 `.fas` / Tabler `.ti` / Slick `::before`)는 자기 규칙이 그대로 이겨 영향 0. */
* { margin: 0; padding: 0; box-sizing: border-box; }

.popup-layout-container{padding:20px}
/* 대시보드 타이틀을 감싸는 전체 행 */
.title-header-row {
    display: block; /* flex 대신 block으로 설정하여 너비를 확실히 확보 */
    width: 100%;
    margin-bottom: 5px; /* 툴바와의 간격 */
}

/* 대시보드 타이틀 본체 */
.title-divider-title {
    display: flex;       /* 선과 글자를 일직선으로 놓기 위해 사용 */
    align-items: center;
    width: 200px;        /* 분석하신 200px 고정 */
    margin-left: auto;   /* 중요: 왼쪽 여백을 자동으로 채워 우측 끝으로 밀어냄 */
    font-size: 16px;     /* 원본 1.2rem 또는 16px 반영 */
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

/* 텍스트 양옆의 선 */
.title-divider-title::before,
.title-divider-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.12); /* 원본 옅은 회색 */
    margin: 0 10px;
}

/* --- 대시보드 전용 스타일 시작 --- */

/* 대시보드 전체를 중앙으로 모으는 컨테이너 */
.main-content {
    width: 100%;
    margin: 0 auto;    /* 좌우 자동 여백으로 중앙 배치 */
    padding: 120px 20px 20px 20px;     /* 내부 여백 */
    display: flex;
    flex-direction: column;
    /* AX1 · 셸 표준 간격 정본. flex gap 하나가 모든 자식 사이 간격을 담당한다.
       탭바/제목 블록의 개별 margin-bottom, padding 은 전부 0 으로 내려 이 값에 수렴시킨다
       (구 0/20/45px 편차의 원인 = gap + 개별 여백의 누적). */
    gap: 12px;
    /* AX1 · 파트너 전 페이지 폭 1248 통일. 폭 클래스 미지정 페이지(Member/List, Memberlist)도 여기에 걸린다. */
    max-width: 1248px;
}
/* AT 정정 B · `!important` 제거 — 상한을 **파트너 레이아웃 전용**으로 남긴다.
   실측: 파트너는 `.main-content w-1248px` / 회원은 `.main_content_wrap w-1248px` 로 조합이 갈리므로,
   important 만 걷으면 layout.css 의 `.main_content_wrap.w-1248px`(특이도 0,2,0)가 회원 페이지를 지배하고
   파트너는 이 규칙(0,1,0)이 그대로 적용된다. 파트너는 사이드바가 없어 1248 중앙정렬이 여전히 맞다. */
.w-1248px {
    max-width: 1248px;
}
.w-1400px {
    max-width: 1400px !important;
}

/* AX1 · 회원리스트 전용 예외 — 폭 상한 없음 + 좌우 패딩 0(표를 화면 끝까지 채운다).
   ⚠️ 기존 .w-1248px / .w-1400px 정의는 무접촉. 예외는 이 수식자 '추가'로만 처리한다.
   ⚠️ 특이도: `.main-content.w-full`(0,2,0) > `.main-content`(0,1,0) 이라 max-width:1248px 를 확실히 덮는다.
      important 를 쓰지 않는 이유 = 이 페이지는 .w-1248px / .w-1400px 를 달지 않아 경쟁 상대가 없다.
   ⚠️ padding 은 좌우만 0 — 상단 120px 은 구 fixed 헤더 보정분이라 이번 범위 밖(AW-1 에서 정리). */
.main-content.w-full {
    max-width: none;
    /* BJ-C3(사장 지시) · 구 padding-left/right:0 철회 — 표가 화면 끝까지 붙어 답답.
       .main-content 기본 좌우 20px 를 그대로 받아 전 사이트 파트너 회원리스트 여백 규격을 통일한다. */
}
/* 통계 섹션 간 여백 */
.trade-section {
    /* AX1 · 구 margin-top:25px 제거(gap 12px 로 수렴). */
    margin-top: 0;
    width: 83.3333%;
    /* AX3 · 표가 넘칠 때 페이지가 아니라 이 컨테이너 안에서만 좌우로 밀리게 한다. */
    overflow-x: auto;
    padding-bottom: 12px;
}

.trade-section h3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    padding-left: 2px;
}
/* 통계 섹션 간 여백 */
.stat-section {
    /* AX1 · 구 margin-top:25px 제거 — gap 12px 위에 얹혀 37px 이 되던 누적분. */
    margin-top: 0;
    width: 100%;
    overflow-x: auto; /* 대시보드 테이블 스크롤 */
    /* AX3 · 가로 스크롤바(8px)와 아래 페이징이 붙어 보이던 것 — 스크롤바 몫 + 여백. */
    padding-bottom: 12px;
}

.stat-section h3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    padding-left: 2px;
}

/* 통계 테이블 특화 (회원리스트보다 넓은 폭 필요 시) */
.stat-table {
    min-width: 1000px !important; 
}

/* 하위 포함 합계 행 (파란색 강조) */
.total-row td {
    background-color: #e8f0fe !important; /* 이미지와 유사한 연한 파란색 */
    font-weight: bold;
    color: #000;
}

/* 하단 수식 설명 (파란색 텍스트) */
.formula-info {
    text-align: right;
    font-size: 11px;
    color: #0000ff;
    margin-top: 8px;
    font-weight: 500;
}

/* 모바일 전용 (대시보드 상단 정렬 조정) */
@media (max-width: 900px) {
    .header-top-line {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding-bottom: 15px;
    }
    
    .dashboard-toolbar {
        width: 100%;
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr; /* 시작, 종료 2열 */
        gap: 8px;
    }

    .dashboard-toolbar .button-group {
        grid-column: span 2;
        display: flex;
        width: 100%;
    }

    .dashboard-toolbar .button-group button {
        flex: 1;
    }
}
/* --- 대시보드 전용 스타일 끝 --- */


        /* 테이블 공통 디자인 */
        /* 방법 A: 공통 클래스 정의 (가장 추천) */
        .w-83-wrapper {
            width: 83.333% !important;
            overflow: hidden; /* 영역 밖으로 나가는 것 방지 */
            /* 만약 여백이 생겨서 테이블이 왼쪽으로 쏠리는 게 싫다면 margin: 0 auto; 추가 */
        }
        /* 내부 table 조절 */
        .w-83-wrapper .member-table {
            width: 100% !important;
            table-layout: fixed;
            word-break: break-all;
            min-width: 0;
        }

        /* AX3 · overflow-x 복원(구 주석 처리분). 표가 min-width(1000~1200px)로 컨테이너를 넘칠 때
           페이지 전체가 좌우로 밀리던 것을 이 래퍼 안으로 가둔다 — 필터·페이징은 제자리에 남는다.
           ⚠️ AV① 의 세로축 통일(페이지 스크롤 1개)과는 축이 달라 충돌하지 않는다.
           padding-bottom = 가로 스크롤바 8px + 여백 4px(아래 페이징과 붙지 않게). */
        .table-wrapper { width: 100%; overflow-x: auto; padding-bottom: 12px; background: white; border: 1px solid #ccc; }
        .table-wrapper table {
            width: 100%;
            white-space: nowrap; /* 2. 중요: 셀 안의 내용이 줄바꿈되지 않게 고정 */
            border-collapse: collapse;
        }

        .table-wrapper th, .table-wrapper td {
            padding: 10px 15px; /* 3. 모바일은 터치 영역이 중요하므로 패딩을 넉넉히 */
        }
        .member-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 1200px; }
        
        /* 캡처본의 Teal(청록색) 헤더 */
        .member-table thead th {
            background-color:#007f93;
            color: white;
            padding: 10px 5px;
            font-weight: 500;
            /* border: 1px solid #006b6b; */
            white-space: nowrap;
        }
        .member-table tbody tr { border: 1px solid #ddd; background:#fff !important;}
        .member-table tbody td {
            padding: 8px 5px;
            /* border: 1px solid #ddd; */
            text-align: center;
            background-color: #fff;
            color: #333;   /* PDARK · 흰 표 위 고정색(airplane 이식) */
        }
        .trade-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 1200px; }
        
        /* 캡처본의 Teal(청록색) 헤더 */
        .trade-table thead th {
            background-color:#007f93;
            color: white;
            padding: 10px 5px;
            font-weight: 500;
            /* border: 1px solid #006b6b; */
            white-space: nowrap;
        }
        .trade-table tbody tr { border: 1px solid #ddd; background:#fff !important;}
        .trade-table tbody td {
            padding: 8px 5px;
            /* border: 1px solid #ddd; */
            text-align: center;
            background-color: #fff;
            color: #333;   /* PDARK */
        }
        /* 텍스트 정렬 및 강조 */
        .text-left { text-align: left !important; padding-left: 10px !important; }
        .text-right { text-align: right !important; padding-right: 10px !important; }
        .id-link { font-weight: bold; text-decoration: underline; cursor: pointer; color: #263238; }   /* PDARK */
        .role-tag { color: #888; font-size: 11px; margin-right: 4px; }

        /* 토글 버튼 스타일 */
        .btn-toggle {
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #bbb;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: bold;
            color: #333;   /* PDARK */
        }
        .btn-toggle.active { background-color: #fff; color: #007f93; }   /* PDARK */

        /* 설정 버튼들 */
        .action-link { color: #0066cc; text-decoration: none; margin: 0 3px; font-size: 11px; }
        .action-link:hover { text-decoration: underline; }

        /* 하부 리스트 컨테이너 (들여쓰기 및 배경색) */
        .sub-container-row { background-color: #f2f2f2; }
        /* .sub-inner-wrapper { padding: 8px 0 4px 10px; border-left: 3px solid #008282;} */

        /* 가짜 테두리 */
        /* 가짜 테두리 중복되어 td 클래스명 나누기 */
        .subtd { background-color: #fff !important;}
        .subbd { background-color: #a3a3a3 !important; border-bottom: 3px inset #fff; padding: 3px !important;}

        .member-header-container {
        width: 100%;
        /* AX1 · 상하 패딩 0 — 위/아래 간격은 .main-content 의 gap 12px 단일 소스. */
        padding: 0;
        /* AT · Arial 잔존 해소 — 토큰 참조로 교체(전 화면 폰트 통일). */
        font-family: var(--app-font-base);
        }

        .header-top-line {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 5px;
        position: relative;
        }

        .header-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        padding-right: 15px;
        }

        .header-date {
        position: absolute;
        right: 0;
        font-size: 11px;
        color: #888;
        }

/* 1. 모든 입력 요소 높이 및 폰트 통일 */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-group label {
    font-size: 12px;
    color: #666;
    height: 18px; /* 라벨 높이 고정으로 입력창 상단 위치 통일 */
    font-weight: bold;
    text-align: left;
}

/* 입력창 박스 스타일 통일 */
.custom-input, 
.custom-select, 
.input-with-icon {
    height: 36px !important; /* 높이 강제 통일 */
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    box-sizing: border-box !important;
    color: #333;   /* PDARK · 흰 입력창 안 글자 */
}

/* 날짜 입력창 내부 정렬 (아이콘 포함) */
.input-with-icon {
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.input-with-icon input {
    flex: 1;
    border: none !important;
    outline: none;
    background: transparent;
    width: 100%;
    height: 100%;
    font-size: 13px;
    color: #333;   /* PDARK · 날짜 텍스트 */
}

.icon-calendar {
    cursor: pointer;
    font-size: 14px;
    margin-left: 4px;
    display: flex;
    align-items: center;
}

/* 검색키(Select) 내부 여백 */
.custom-select {
    padding: 0 8px;
    outline: none;
    cursor: pointer;
}

/* 2. [PC 버전] 가로 일자 배치 */
.search-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 모든 요소를 바닥 정렬 */
    width: 100%;
    gap: 15px;
}
.toolbar-left {
    flex: 0 0 auto; /* 버튼 크기만큼 차지 */
}
.toolbar-right {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* PC 너비 설정 */
.date-group { width: 140px; }
.select-group { width: 100px; }
.value-group { width: 180px; }

/* 3. [모바일 버전] 900px 이하 정렬 (이미지 재현) */
@media (max-width: 900px) {
    .input-with-icon input { font-size: 11px}
    .search-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .toolbar-right {
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr; /* 시작:종료:검색키 3열 배치 */
        gap: 8px;
        width: 100%;
    }

    .date-group, .select-group {
        width: 100% !important;
    }

    /* 검색값: 두 번째 줄 꽉 채우기 */
    .value-group {
        grid-column: span 3;
        width: 100% !important;
    }

    /* 버튼 그룹: 세 번째 줄 꽉 채우기 */
    .button-group {
        grid-column: span 3;
        display: flex;
        gap: 4px;
        margin-top: 4px;
    }

    .button-group button {
        flex: 1;
        height: 38px;
        margin: 0 !important;
        font-size: 13px;
    }

    /* 머니 지급 버튼 */
    .toolbar-left .btn-outlined {
        width: 100%;
        margin-bottom: 5px;
        height: 38px;
    }
    .tabs-container {
        /* 모바일에서는 항목 사이 간격을 조금 좁혀 더 많은 메뉴가 보이게 조절 */
        gap: 15px;
        padding-bottom: 5px; /* 하단 보더와 텍스트 사이 여유 공간 */
    }
    
    .tab-item {
        /* 버튼이 찌그러지지 않도록 고정 */
        flex-shrink: 0; 
    }
}
/* 모바일 전용 스타일 (반응형) */
@media screen and (max-width: 768px) {
    .card-header {
        padding: 12px;
        font-size: 16px;
    }

    .card-content {
        /* 모바일에서는 3열 대신 2열 혹은 1열로 변경 */
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px;
        padding: 10px;
    }

    /* 입출금 차액 등 강조가 필요한 항목은 1줄 전체 차지 */
    .info-item:nth-child(7), /* 총 입금액 */
    .info-item:nth-child(8), /* 총 출금액 */
    .info-item:nth-child(9)  /* 입출금 차액 */ {
        grid-column: span 1; /* 필요시 span 2로 변경하여 한줄 전체 차지 가능 */
    }

    .info-item {
        background: #f9f9f9; /* 모바일에서 가독성을 위해 각 항목에 배경 추가 */
        padding: 10px;
        border-radius: 6px;
        flex-direction: column; /* 아이콘과 값을 위아래로 배치 */
        align-items: flex-start !important; 
    }

    .label-group {
        margin-bottom: 4px;
        font-size: 11px;
        color: #777;
    }

    .label-group svg {
        width: 14px;
        height: 14px;
    }

    .value {
        font-size: 14px;
        width: 100%;
        text-align: left;
    }

    /* 빈 칸(info-item empty)은 모바일에서 숨김 처리 */
    .info-item:empty {
        display: none;
    }
    .w-83-wrapper{ min-width: 1200px;}
}

/* 버튼 공통 스타일 */
.btn-outlined { background: transparent; border: 1px solid #008282; color: #008282; height: 36px; border-radius: 4px; cursor: pointer; padding: 0 12px;}
.btn-grey { background: #757575; border: none; color: white; border-radius: 4px; cursor: pointer; height: 36px; padding: 0 12px; }
.btn-search { background: #008282; border: none; color: white; border-radius: 4px; font-weight: bold; cursor: pointer; height: 36px; padding: 0 15px; }

/* 탭 메뉴 스타일 */
.tabs-container {
    display: flex;
    align-items: stretch;   /* AX1 · 라벨이 탭바 높이를 꽉 채우게(밑줄 위치 고정) */
    border-bottom: 1px solid #e0e0e0;
    /* AX1 · 탭바 높이 40px 고정. 라벨의 line-height 를 같은 40px 로 맞춰
       a/button/아이콘이 섞여도 높이가 흔들리지 않는다(마크업 종류가 높이를 정하던 구조 제거). */
    height: 40px;
    flex: none;
    /* AX1 · 개별 여백 0 — 탭바 아래 간격은 .main-content 의 gap 12px 이 담당한다. */
    margin-bottom: 0;
    /* AX1 · 좌우 여백은 .main-content 의 padding 20px 정본. 여기서 더 들여쓰면 아래 표와 좌측선이 어긋난다. */
    padding-left: 0;
    gap: 20px;
    /* 세로 스크롤 방지 및 가로 스크롤 허용 */
    overflow-x: auto;
    overflow-y: hidden; 
    
    /* 텍스트가 줄바꿈되어 높이가 늘어나는 것 방지 */
    white-space: nowrap; 
    
    /* iOS 등에서 부드러운 스크롤 적용 */
    -webkit-overflow-scrolling: touch;
}
/* 브라우저 기본 스크롤바 숨기기 (디자인적 요소) */
.tabs-container::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라 */
}
.tabs-container {
    -ms-overflow-style: none;  /* IE, 엣지 */
    scrollbar-width: none;  /* 파이어폭스 */
}

.tab-item {
    background: none;
    border: none;
    /* 🔴 AX1 핵심 · line-height 를 탭바 height 와 같은 40px 로 고정.
       구조: 구 `padding:10px 5px` + line-height 미지정이라 높이가
       (폰트 기본 행간 + 패딩) 으로 계산됐고, 그래서 a/button/아이콘 유무에 따라
       페이지마다 탭 높이가 달라졌다. 이제 마크업 종류와 무관하게 40px 로 확정된다. */
    padding: 0 12px;
    line-height: 40px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.tab-item.active {
    color: #007f93;
    font-weight: bold;
}

.tab-item.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #007f93;
}

/* 테이블 내용 강조 스타일 */
.member-table td {
    font-size: 12px;
}

.id-link {
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

/* 전체 그룹: 라벨과 정렬 맞춤 */
.fold-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 58px; /* 옆 박스들과 동일 높이 */
}

/* 상단 빈 공간 */
.top-label-space {
    height: 18px;
    margin-bottom: 4px;
}

/* 체크박스 + 텍스트 래퍼 */
.custom-mui-checkbox-label {
    display: flex;
    align-items: center; /* [중요] 세로 중앙 정렬 */
    height: 36px !important;
    cursor: pointer;
    margin-left: -8px; /* MUI 특유의 음수 마진 반영 */
}

/* 아이콘 부모: 상대 위치 설정 */
.mui-checkbox-root {
    position: relative; /* [중요] input이 이 위에 겹치게 함 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px; /* 클릭 반경 */
}

/* 실제 input: SVG를 완전히 덮음 */
.mui-hidden-input {
    position: absolute; /* 부모 span 기준으로 절대 위치 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 투명하게 숨김 */
    cursor: pointer;
    z-index: 2; /* SVG보다 위에 위치 */
    margin: 0;
}

/* SVG 아이콘 스타일 */
.mui-svg-icon {
    font-size: 24px; /* 옆의 텍스트와 밸런스 조정 */
    width: 1em;
    height: 1em;
    fill: #666;
    display: block; /* 여백 제거 */
}

/* 텍스트 라벨 미세 조정 */
.mui-label-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1; /* 텍스트 베이스라인 유지 */
    margin-top: 1px; /* 아이콘보다 낮아 보이면 수치 조절 */
}
/* 체크되었을 때 아이콘 색상을 파란색으로 변경 */
.mui-checkbox-root:has(.mui-hidden-input:checked) .mui-svg-icon {
    fill: #1976d2; /* MUI 기본 블루 컬러 */
}

/* 상세 내역 컨테이너 */
.detail-container {
    padding: 15px !important;
    background-color: #f5f7f9; /* 연한 배경색 */
}

/* 전체 상세 박스 */
.bet-detail-box {
    background: #ffffff;
    border: 1px solid #d1d9e0;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 헤더 공통 스타일 */
.detail-header, .game-header {
    display: flex;
    background-color: #ebf0f3;
    color: #475569;
    font-weight: bold;
    font-size: 13px;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #d1d9e0;
}

/* 데이터 행 공통 스타일 */
.detail-summary, .game-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
}

/* 컬럼별 너비 설정 (상단 요약) */
.col-type { width: 10%; }
.col-time { width: 15%; }
.col-fold { width: 25%; }
.col-amount { width: 20%; }
.col-win { width: 15%; }
.col-odds { width: 7.5%; }
.col-result { width: 7.5%; }

/* 경기 리스트 섹션 스타일 */
.game-list-section {
    margin: 10px;
    border: 1px solid #e2e8f0;
}

.game-header { background-color: #f8fafc; color: #64748b; }

/* 경기별 너비 설정 */
.game-col-time { width: 15%; }
.game-col-info { width: 40%; text-align: left; padding-left: 20px; }
.game-col-bet { width: 20%; }
.game-col-pick { width: 15%; }
.game-col-odds { width: 5%; }
.game-col-result { width: 5%; }

/* 팀 및 리그 텍스트 스타일 */
.league { font-weight: bold; font-size: 12px; color: #0891b2; margin-bottom: 2px; }
.teams { color: #334155; }

/* 상태 칩 스타일 (대기 등) */
.status-chip {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: white;
    font-weight: 500;
}

.status-chip.waiting { background-color: #e3971c; } /* 주황색 대기 */
.status-chip.dimmed { opacity: 0.5; } /* 경기별 대기는 약간 투명하게 */


/*** 입출금 ***/
/* 기본 테이블 셀 정렬 및 폰트 */
.transaction-table-body td {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    font-size: 14px;
}

/* 합계 행 스타일 */
.summary-row {
    font-weight: bold;
}
.summary-row .charge {
    color: #2196f3; /* 합계 금액 강조 */
}
.summary-row .withdraw {
    color: #f44336; /* 합계 금액 강조 */
}
.summary-row td {background:#d8e4ff !important}
/* 입출금 타입 강조 */
.type-deposit { color: #2196f3; font-weight: bold; } /* 입금: 파랑 */
.type-withdraw { color: #f44336; font-weight: bold; } /* 출금: 빨강 */
.highlight-blue { color: #2563eb; font-weight: 600; } /* 플러스 수익 */
.highlight-red { color: #dc2626; font-weight: 600; }  /* 마이너스 손익 */

/* 상세 박스 내부 스타일 (기존 선언 유지) */
.transaction-detail-box {
    margin: 5px 15px;
    border: 1px solid #d1d9e0;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.transaction-detail-box .detail-header {
    background: #00897b; /* 충/환전 테마색 */
    color: #fff;
    display: flex;
    font-size: 12px;
}
.transaction-detail-box .detail-content {
    display: flex;
    border-top: 1px solid #edf2f7;
}


/*** 회원 상세 정보***/

/*** 헤더 ***/
.top_header_common {
    background-color: #000000; /* 완전한 블랙 배경 */
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 요청하신 max-width 1248px 설정 */
.header-container {
    width: 100%;
    max-width: 1248px; /* 요청하신 규격 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}
.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 8px; /* 요소 간 간격 축소 */
}

/* 유저 닉네임 버튼 스타일 */
.btn_myinfo {
    color: #ffffff;
    font-size: 13px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn_myinfo img { width: 16px; height: 16px; }

/* 수치 강조 컬러 (캡쳐본의 하늘색) */
.highlight_val {
    color: #43c8de; /* 캡쳐본 고유의 사이언 블루 */
    font-weight: 500;
}

/* 머니/게임머니 텍스트 스타일 */
.money_display, .game_money_display {
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

/* 캡쳐본의 붉은색 전환/이동 버튼 */
.btn_red_rect {
    background-color: #d32f2f;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    margin-left: 8px;
    cursor: pointer;
}

/* 오른쪽 오렌지 문의 버튼 */
.btn_orange_rect {
    background-color: #ed6c02;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-size: 12px;
    cursor: pointer;
}

/* 충전/환전/내역 그룹 버튼 */
.group_blue_btns {
    display: flex;
    background-color: #0288d1;
    border-radius: 4px;
    overflow: hidden;
}
.group_blue_btns button {
    background: transparent;
    border: none;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.group_blue_btns button:last-child { border-right: none; }

.group_blue_btns .deposit{
    background: rgb(40, 156, 175)
}
.group_blue_btns .withdraw{
    background: rgb(201, 46, 46)
}
.group_blue_btns .history{
    background: rgb(59, 76, 110)
}
/* 기타 아이콘 및 로그아웃 */
.btn_icon_only, .btn_refresh_icon {
    background: transparent; border: none; color: #fff;
    display: flex; align-items: center; cursor: pointer;
}
.btn_icon_only svg, .btn_refresh_icon svg { width: 20px; height: 20px; fill: #fff; }

.btn_p_icon {
    background-color: #1976d2; color: #fff; border: none;
    width: 28px; height: 28px; border-radius: 4px; font-weight: bold; cursor: pointer;
}

.btn_logout_text {
    background: transparent; border: none; color: #fff;
    font-size: 13px; cursor: pointer; margin-left: 5px;
}

/*** 서브 헤더 ***/
/* AW-1 §1-3 · 파트너 전용 셸 껍데기 3종 제거 — `.sub_menu_full_bg`(전폭 검은 판) ·
   `.secondary_header_partner:hover` 메가메뉴 발동 규칙 · `.header-container-1248`(1248 헤더 컨테이너).
   소비 마크업이 MainLayout_Partner 1곳뿐이었고 그 헤더가 본 사이트 hdr_row2 로 이관돼 매칭 0 이 됐다.
   ⚠️ `.main_menu` / `.menu-item` / `.nav-link` / `.sub_menu` / `.sub_menu_link` / `.gnb_scroll_wrap` 은
      **남긴다** — 새 파트너 GNB(`.hdr_pnav`)가 그대로 재사용하는 자산이다(신규 클래스 최소화).
   ⚠️ 드롭다운 발동은 헤더 전체 호버(메가메뉴)에서 **항목 단위 호버**로 바뀐다 — 아래 AW-1 블록. */

.main_menu {
    display: flex;
    list-style: none;
    margin-left: auto;
    gap: 40px;
    height: 100%;
}

/* AG1 · GNB 스크롤 래퍼 — 와이드에선 통과 컨테이너(내부 main_menu margin-left:auto 우측 정렬 불변),
   태블릿 티어(아래 AG 블록)에서 가로 스크롤러+페이드 앵커로 전환. */
.gnb_scroll_wrap {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    position: relative;
}

/* AG1 · GNB active(현재 표면) — 기존 hover 색과 동일 톤 상시 표시(티어 자동 스크롤-인 축 겸용) */
.menu-item .nav-link.active { color: #43c8de; }

.menu-item {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
}

/* 개별 서브메뉴 스타일 */
.sub_menu {
    display: none; /* 평소엔 숨김 */
    position: absolute;
    top: 60px; /* 헤더 바로 아래 붙음 */
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 0;
    list-style: none;
    text-align: center;
    min-width: 100px;
}

/* 핵심 로직: 헤더 영역 어디든 호버하면 "모든" 서브메뉴 노출 */
.secondary_header:hover .sub_menu {
    display: block;
}

/* 서브메뉴 텍스트 스타일 */
.sub_menu_link {
    color: #999;
    padding: 15px 0;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s;
}

/* 개별 호버 시 강조색 */
.sub_menu_link:hover {
    color: #43c8de;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
}

/* 현재 마우스가 올라간 메인 메뉴 글자색 변경 */
.menu-item:hover .nav-link {
    color: #43c8de;
}

/*** 모바일 헤더 ***/
/* 모바일 헤더 기본 스타일 */
.mobile_header {
    width: 100%;
    background-color: #000;
    /* CEO-M-FIX · 모바일 헤더 상단 고정(지시) — sticky = 흐름 유지라 본문 padding 보정 불요.
       z-index 1000 = 드로어 래퍼(.mobile_menu_wrapper 999) 위 · PC 헤더 sticky(1000)와 동급.
       PC 에선 display:none 이라 무영향. 한줄공지(m_hdr_notice)가 헤더 안이면 함께 고정된다. */
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* 상단 메인 바 */
.m_header_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 0 10px;
}

.m_header_left, .m_header_right {
    flex: 1; /* 로고가 중앙에 오도록 균형 유지 */
    display: flex;
    align-items: center;
}

.m_header_right { justify-content: flex-end; }

/* 아이콘 및 버튼 */
.btn_m_menu, .btn_m_mail {
    background: none; border: none; color: #fff;
    padding: 8px; cursor: pointer;
}
.btn_m_menu svg, .btn_m_mail svg { width: 24px; fill: #fff; }

/* 사용자 정보 버튼 (상단 헤더 우측) */
.btn_m_user {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* 사용자 아이콘 스타일 (동그란 사람 모양 — 지시로 테두리 제거·SNS 아이콘 32px 규격의 기준) */
.icon_user_profile {
    display: inline-block;
    width: 32px; /* 아이콘 크기 */
    height: 32px;
    background-color: #333; /* 아이콘 배경색 */
    border-radius: 50%; /* 동그랗게 처리 */
    position: relative;
}

    /* 아이콘 내부 사람 모양 (FontAwesome이나 SVG를 쓰지 않을 경우 CSS로 구현) */
    .icon_user_profile::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 14px;
        height: 14px;
        /* 사람 머리와 몸통 모양을 표현하는 아이콘 이미지 또는 SVG 경로 */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }

/* 버튼 클릭(활성화) 시 효과 */
.btn_m_user:active {
    opacity: 0.7;
}

/* 지시 · 모바일 로고 축소(구 50px — 헤더 대비 과대) */
.m_header_logo img { height: 34px; }

/* 지시 · SNS 32px 원형 아이콘(카카오톡·텔레그램) — icon_user_profile 과 같은 규격.
   이미지 자산(32×32)은 후속 제작분 — 미배치 시 마크업 onerror 가 버튼째 숨긴다. */
.btn_m_sns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 0;
    background: none;
    text-decoration: none;
}

.btn_m_sns img {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.btn_m_sns.is_static { cursor: default; }

.btn_m_partner {
    background-color: #1976d2; /* 파란색 포인트 */
    color: #fff; border: none; border-radius: 4px;
    padding: 4px 10px; font-size: 12px; font-weight: bold;
    /* AX · 두 상태(P 텍스트 / 홈 아이콘)의 버튼 크기를 같게 고정해 모바일 헤더가 흔들리지 않게 한다.
       지시 · 라벨 「파트너」 → 「P」 축소에 맞춰 폭도 32 로(정사각 톤 — PC hdr_btn_partner 와 동형). */
    min-width: 32px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* AX · 파트너 경로일 때의 홈 상태. 색 = PC 헤더와 같은 브랜드 골드 축(--app-primary)로 P 상태(청)와 구분. */
.btn_m_partner.btn_m_home {
    background-color: var(--app-primary);
    color: #04180c;
}
.btn_m_partner.btn_m_home svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* 가로 스크롤 탭 메뉴 */
/* .m_header_nav {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.m_header_nav::-webkit-scrollbar { display: none; }

.m_tab_list {
    display: flex;
    list-style: none;
    white-space: nowrap;
    padding: 0 5px;
}

.m_tab_item {
    padding: 12px 15px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    position: relative;
}

.m_tab_item.active {
    color: #1976d2;
    font-weight: bold;
}
.m_tab_item.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background-color: #1976d2;
} */

.m_tab_container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f5f5f5; /* 탭 영역 배경 */
    border-bottom: 1px solid #ddd;
    /* AX1 · 탭바 높이 40px 통일(.tabs-container 와 동일 규격). */
    height: 40px;
    width: 100%;
}

/* 탭이 보이는 창 */
.m_tab_viewport {
    flex: 1;
    /* 🔴 AX1 · 뷰포트를 탭바 높이에 맞춰 늘린다.
       인디케이터(.m_tab_indicator)가 이 요소 기준 `bottom:0` 이라, 뷰포트가 내용 높이만큼만
       차지하면 밑줄이 탭바 하단이 아니라 "내용 하단"에 붙어 화면마다 위치가 달라진다.
       stretch 로 뷰포트 하단 = 탭바 하단을 맞춰 밑줄 기준을 고정한다. */
    align-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    scroll-behavior: smooth; /* 화살표 클릭 시 부드러운 이동 */
    -webkit-overflow-scrolling: touch; /* 모바일 관성 스크롤 */
    position: relative;
}

/* 스크롤바 숨기기 */
.m_tab_viewport::-webkit-scrollbar { display: none; }

.m_tab_list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* 전체 너비 사용 */
}

.m_tab_item {
    flex: 0 0 calc(100% / 3); /* 너비를 정확히 1/3로 고정 */
    text-align: center;
    /* AX1 · .tab-item 과 동일 규격 — line-height 를 탭바 height 와 일치시켜 높이 고정. */
    padding: 0;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 혹시 글자가 길면 ... 처리 */
}
/* 활성화된 탭 */
.m_tab_item.active {
    color: #1976d2;
    font-weight: bold;
}

/* 탭 아래 파란색 인디케이터 선 */
.m_tab_indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    /* AX1 · .tab-item.active::after 와 두께 통일(2px). 선택 표시는 전 표면 한 가지 규격. */
    height: 2px;
    background-color: #1976d2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 더 부드러운 움직임 */
    z-index: 5;
    width: 0; /* 초기값은 0, JS에서 설정 */
}
/* 해상도가 조금 더 큰 경우 (예: 400px 이상): 한 화면에 메뉴 4개 노출 */
@media (min-width: 426px) {
    .m_tab_item {
        flex: 0 0 calc(100% / 4); /* 너비를 정확히 1/4로 고정 */
    }
}

/* 태블릿이나 큰 모바일 (예: 600px 이상): 한 화면에 메뉴 5개 노출 */
@media (min-width: 600px) {
    .m_tab_item {
        flex: 0 0 calc(100% / 5);
    }
}
/* 화살표 버튼 스타일 */
.m_tab_arrow {
    width: 40px;
    height: 100%;
    background: #f5f5f5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    opacity: 0; /* 기본적으로 숨김 */
    pointer-events: none;
    transition: opacity 0.2s;
}

.m_tab_arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

.m_tab_arrow svg { width: 20px; fill: #666; }

/* 기본 상태: PC 버전 노출, 모바일 숨김 */
.pc_header {
    /* ⚠️ display 선언 금지 — PC 표시형은 layout.css CJ-3 `.pc_header { display:grid }`(로고 2행 걸침) 정본.
       이 파일이 layout.css 보다 **뒤에** 로드되므로 여기서 block 을 선언하면 그리드가 죽어
       로고·row0·메뉴행이 세로 3단으로 쌓인다(실사고). ≤1024 숨김(display:none)은 아래 미디어 블록 그대로. */
    /* AT-1 Option C · fixed → sticky. 헤더가 .page_shell_body(우측 컬럼) 안으로 들어가면서
       flow 공간을 갖게 되고, 좌측 오프셋은 flex 가 자동 추적한다(사이드바 260/레일 44/0 전 구간).
       ⚠️ `left` 선언 추가 금지 — 하드코딩하면 사이드바 폭 변경 시 헤더가 깨지고 그 결합이 10개 데모로 복제된다.
       width:100% 는 유지(이제 셸 폭이 아니라 우측 컬럼 폭 기준으로 해석됨). */
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.mobile_header {
    display: none;
}

/* 전체 감싸는 영역 */
.mobile_menu_wrapper {
    position: fixed;
    top: 56px; /* 헤더 높이만큼 아래에서 시작 */
    left: 0;
    width: 100%;
    height: 0; /* 평소에는 높이 0 */
    z-index: 999;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

    /* 메뉴가 열렸을 때 */
    .mobile_menu_wrapper.open {
        height: 100vh;
    }

/* 실제 메뉴 컨텐츠 (위에서 아래로 슬라이드) */
.mobile_nav_container {
    background-color: #0f1621; /* 배경색 */
    padding: 20px 15px;
    border-bottom: 2px solid #81d8d0; /* 하단 포인트 라인 */
    transform: translateY(-100%); /* 처음엔 위로 숨김 */
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 1001;
}

.mobile_menu_wrapper.open .mobile_nav_container {
    transform: translateY(0); /* 열리면 아래로 내려옴 */
    /* N1 · 메뉴 내부 스크롤 — 배경 체이닝 금지(user_drawer와 동형·락은 site.js 공통 유틸). */
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --- 사용자 정보창 (User Drawer) 스타일 --- */
/* 전체 감싸는 영역 */
.mobile_user_drawer {
    position: fixed;
    top: 56px; /* 헤더 높이만큼 아래에서 시작 */
    left: 0;
    width: 100%;
    height: 0;
    /* CEO-M-FIX2 · 999 → 1001(지시): 한줄공지(32px)가 헤더 안이라 공지 노출 시 헤더 실높이 88px —
       sticky 헤더(z 1000)가 드로어를 덮어 카드 상단이 공지에 가려졌다(캡쳐 실증상).
       1001 = 상단바(0~56px)는 겹치지 않아 그대로 두고, 공지 구간(56~88px)만 드로어가 위로 덮는다. */
    z-index: 1001;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.mobile_user_drawer.open {
    height: 100vh;
}

/* 실제 컨텐츠 컨테이너 (위에서 아래로 슬라이드) */
.user_info_container {
    background-color: #252525; /* CEO-M-FIX2 · 지시 색상(구 #0f1621) */
    padding: 20px;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 1001;
    color: #fff;
}

.mobile_user_drawer.open .user_info_container {
    transform: translateY(0);
    /* N1 · 드로어 내부 스크롤 — 끝까지 스크롤해도 배경 체이닝 금지(락은 site.js appBodyScrollLock). */
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 상단 프로필 영역 (닉네임, 설정, 로그아웃) */
.myinfo_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.user_profile {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .user_profile img {
        width: 24px;
        height: 24px;
    }

    .user_profile .nickname {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
    }

.user_actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.btn_icon_action {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .btn_icon_action .svg_icon {
        width: 22px;
        height: 22px;
        fill: #ccc; /* 설정 아이콘 색상 */
    }

.logout_img {
    width: 20px;
    height: 20px;
}

/* 자산 정보 리스트 (보유머니, 포인트) */
.info_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .info_list li {
        display: flex;
        justify-content: space-between; /* 라벨은 왼쪽, 밸류는 오른쪽으로 밀어냄 */
        align-items: center;
        padding: 12px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .info_list .label {
        font-size: 14px;
        color: #fff;
        /* --- 글자 짤림 방지 핵심 속성 --- */
        white-space: nowrap; /* 줄바꿈 금지 */
        flex-shrink: 0; /* 공간이 부족해도 라벨 크기를 줄이지 않음 */
        min-width: fit-content; /* 컨텐츠 내용만큼 최소 너비 확보 */
    }

    .info_list .value {
        font-size: 15px;
        font-weight: 500;
        color: #00ffcc; /* 강조 색상 */
        display: flex;
        align-items: center;
        gap: 8px; /* 숫자와 단위(원/P), 버튼 사이 간격 */
        text-align: right; /* 텍스트 우측 정렬 */
        margin-left: auto; /* 왼쪽 마진을 최대로 하여 항상 오른쪽 밀착 */
        justify-content: flex-end;
    }

        .info_list .value span {
            color: #fff;
            margin-left: 2px;
            font-size: 13px;
        }

/* 포인트 전환 버튼 */
.btn_transfer_small {
    background-color: #81d8d0; /* 금색 계열 버튼 */
    border: none;
    border-radius: 4px;
    color: #000;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

/* 배경 어둡게 처리 (오버레이) */
.user_overlay {
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}
/* 섹션 및 그리드 설정 */
.menu_section {
    margin-bottom: 25px;
}

.section_title {
    color: #8a96a3;
    font-size: 14px;
    margin-bottom: 10px;
    padding-left: 5px;
}

/* 게임 버튼 그리드 (2열) */
.game_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.menu_item {
    background: #1a222d;
    border: 1px solid #2c3544;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    font-size: 14px;
}

    .menu_item.active {
        border-color: #81d8d0;
        color: #81d8d0;
    }

/* 퀵 메뉴 그리드 (3열) */
.quick_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.quick_item {
    background: #1a222d;
    border: 1px solid #2c3544;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 5px;
    font-size: 12px;
    border-radius: 4px;
}

    .quick_item img {
        width: 24px;
        height: 24px;
        margin-bottom: 8px;
    }

/* 하단 검은 배경 */
.menu_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s;
}
.user_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile_menu_wrapper.open .menu_overlay,
.mobile_user_drawer.open .user_overlay {
    opacity: 1;
}
/* ==========================================================================
   AG · 태블릿 헤더 티어(정본 — 값 변경은 여기 1곳)
   구간 = 901 ~ 1399.98px:
     하한 901 = 기존 모바일 전환(max-width:900 — 아래 블록)과 경계 공유(모바일 무접촉·헤더 진입점 1개).
     상한 1400 = GNB 필요폭 실측(로고 ~180 + 메뉴 12개 라벨 ×~55 + gap 40×11 ≈ 1400 — AE/AF 필요폭 합 체계 편입).
   Row1 = 좌측 nowrap(극단 폭 머니 ellipsis) + 우측 유지·퀵 4버튼 → 🎁 드랍다운 수렴.
   Row2 = 로고 flex:none 고정 + GNB 잔여 폭 가로 스크롤(nowrap·페이드 양끝 — appGnbScroll).
   PC 와이드(≥1400)·모바일(≤900) 무접촉.
   ========================================================================== */

/* 🎁 드롭다운 — 구 AG 태블릿 티어(901~1399.98) 전용이었으나, s2 는 그 티어의 header-right 마크업이
   AT-3 에서 사라졌다. 추가지시로 **모바일 헤더(≤1024) 퀵 진입점**으로 재배치한다.
   기본 display:block(모바일 헤더 안에서만 렌더되는 요소라 별도 티어 게이트 불요 —
   구 `display:none` + 티어에서만 표시하던 구조는 소비처가 없어져 오히려 항상 숨김이 된다).
   ⚠️ 색은 --app-* 토큰으로 교체(구 #17171a/#2d3642/#c0c0c0/#232019 하드코딩 제거).
   ⚠️ right:0 = 우측 정렬 — 🎁 가 헤더 우측에 있어 좌측으로 펼치면 392px 에서 뷰포트를 벗어난다. */
.gift_dd_wrap { display: block; position: relative; }
.gift_dd_backdrop { position: fixed; inset: 0; z-index: 1090; background: transparent; }
.gift_dd_menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100; min-width: 130px;
    background: var(--app-bg-panel); border: 1px solid var(--app-border); border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5); padding: 4px 0;
}
.gift_dd_item {
    display: block; width: 100%; text-align: left; padding: 9px 14px;
    background: none; border: 0; color: var(--app-text-secondary); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.gift_dd_item:hover { background: var(--app-primary-tint); color: var(--app-primary); }

/* 🎁 버튼 — 모바일 헤더 우측 아이콘군과 같은 28px 규격(파트너 버튼 좌측). */
.m_header_right .gift_dd_btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; margin-right: 4px;
    border: 1px solid var(--app-border-soft); border-radius: 4px;
    background: transparent; font-size: 15px; line-height: 1; cursor: pointer;
}
.m_header_right .gift_dd_btn:hover { border-color: var(--app-primary); }

@media (min-width: 901px) and (max-width: 1399.98px) {
    /* Row1 · 좌측 nowrap — 극단 폭에서 머니포인트만 ellipsis(닉네임·쪽지·버튼은 불변) */
    .header-container { flex-wrap: nowrap; }
    .header-left { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; white-space: nowrap; }
    .header-left .money_display { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-wrap: nowrap; }
    .header-right { flex: none; flex-wrap: nowrap; white-space: nowrap; }
    /* 구 AG 티어 규칙 2줄(.header-right > .btn_header_quick 숨김 / .gift_dd_wrap 표시) 제거 —
       소비 마크업(.header-right)이 AT-3 에서 사라져 매칭 0이고, 🎁 는 이제 기본 display:block 이라
       여기서 다시 켤 필요가 없다(도리어 티어 밖에서 꺼지는 원인이 됐다). */

    /* Row2 · GNB 가로 스크롤(스크롤바 숨김·nowrap — 세로 깨짐 0)
       AW-1 · `.header-container-1248 .logo { flex:none }` 제거 — 구 파트너 헤더 로고 슬롯이 사라져 매칭 0.
       (본 사이트 로고는 사이드바 최상단 슬롯 소관 — AT-3 이관분) */
    .gnb_scroll_wrap .main_menu {
        margin-left: 20px;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .gnb_scroll_wrap .main_menu::-webkit-scrollbar { display: none; }
    .gnb_scroll_wrap .menu-item { flex: none; }
    .gnb_scroll_wrap .nav-link { white-space: nowrap; }
    /* 페이드 양끝 — appGnbScroll 이 끝 도달 시 클래스 제거(배경 #080F1C = secondary_header) */
    .gnb_scroll_wrap.gnb-fade-l::before,
    .gnb_scroll_wrap.gnb-fade-r::after {
        content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; pointer-events: none;
    }
    .gnb_scroll_wrap.gnb-fade-l::before { left: 0; background: linear-gradient(90deg, rgb(8, 15, 28), rgba(8, 15, 28, 0)); }
    .gnb_scroll_wrap.gnb-fade-r::after { right: 0; background: linear-gradient(270deg, rgb(8, 15, 28), rgba(8, 15, 28, 0)); }
}

/* AT · 헤더 축 경계 = **1024**(구 900에서 확대).
   근거: 901~1024 에서 `pc_header`(>900)만 있고 `btn_m_menu`(≤900)가 없어 off-canvas 사이드바(≤1024)를
         여는 버튼이 사라지는 사각지대였다. 레퍼런스 910px 실측도 "헤더=모바일형 / 콘텐츠=데스크톱"이라
         이 구간을 모바일 헤더로 보는 것이 정본. 900 축이 소멸해 경계가 1024 하나로 통일된다(신규 BP 0).
   ⚠️ 이 블록은 **헤더 교체 전용**이라 통째로 올린다. 같은 900 경계의 다른 두 블록
      (105행 파트너 대시보드 툴바 · 337행 파트너 검색 툴바)은 헤더와 무관하므로 **900 에 그대로 둔다**
      (1024 로 올리면 파트너 화면이 901~1024 에서 불필요하게 세로 배치로 바뀜).
   ⚠️ 잔액 소실 없음 확인: 보유머니·포인트·통화토글·포인트전환은 `mobile_user_drawer` 가 이미 보유. */
@media (max-width: 1024px) {
    /* PC 헤더 전체를 한 번에 숨김 */
    .pc_header {
        display: none;
    }

    /* 모바일 헤더를 한 번에 노출 */
    .mobile_header {
        display: block;
    }
    /* (구 보정값 — Option C 로 .main_index_container 의 padding-top 자체가 제거돼 현재는 중복·무해) */
    .main_index_container {
        padding-top: 0
    }
}
/* ==========================================================================
   AW-1 · 파트너 레이아웃 이관 (구 자체 셸 → 본 사이트 셸의 중첩 레이아웃)
   ─────────────────────────────────────────────────────────────────────────
   DOM: .page_shell > SportsSidebar + .page_shell_body > .pc_header(hdr_row1/2)
                                                       + .partner_scope > .main-content
   ⚠️ 여기 규칙은 전부 `.hdr_pnav` / `.hdr_row2_pnav` / `.partner_scope` 마커 **하위**로만 쓴다.
      헤더는 전 페이지에 뜨므로 마커 없는 전역 규칙을 하나라도 두면 본 사이트가 같이 움직인다.
   ⚠️ 1248 상한은 **추가 규칙 없이 유지**된다 — 파트너는 `.main-content.w-1248px`(위 0,1,0 규칙),
      회원은 `.main_content_wrap.w-1248px`(layout.css 0,2,0)로 클래스 조합이 갈려 서로 닿지 않는다.
   ========================================================================== */

/* ── §2 · Row2 파트너 GNB ────────────────────────────────────────────────── */
/* 좌측 = 남는 폭 전부 + min-width:0(없으면 우측 사용자정보가 밀려 나간다).
   .gnb_scroll_wrap 이 이미 flex:1 1 auto / min-width:0 이라 재선언하지 않는다(AG1 자산 재사용). */
/* ⚠️ 셀렉터에 `.pc_header` 를 붙인다 — layout.css `.pc_header .hdr_row2 { justify-content:flex-end }`
   가 (0,2,0)이라 `.hdr_row2_pnav` 단독(0,1,0)으로는 파일 순서와 무관하게 진다. */
.pc_header .hdr_row2_pnav { justify-content: flex-start; }

/* 우측 사용자정보군 = 절대 줄지 않음. 마크업 무접촉이라 CSS 로만 고정한다. */
.hdr_row2_pnav > .hdr_user,
.hdr_row2_pnav > .hdr_mail,
.hdr_row2_pnav > .hdr_bal,
.hdr_row2_pnav > .hdr_cur,
.hdr_row2_pnav > .hdr_btn { flex: none; }

/* 구 파트너 헤더는 우측 정렬(margin-left:auto)이었다 — Row2 에서는 좌측 시작이 정본. */
.hdr_pnav .main_menu {
    margin-left: 0;
    gap: 22px;
    align-items: center;
}

.hdr_pnav .nav-link {
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
    color: var(--app-text-secondary);
    white-space: nowrap;
}

.hdr_pnav .nav-link:hover,
.hdr_pnav .menu-item:hover .nav-link { color: var(--app-primary-light); }
.hdr_pnav .nav-link.active { color: var(--app-primary); font-weight: 700; }

/* 드롭다운 — 구조는 구 마크업 그대로(.sub_menu > .sub_menu_link) 쓰되 발동 축만 바꾼다.
   구: `.secondary_header_partner:hover` = 모든 서브메뉴 동시 노출(메가메뉴 + 전폭 검은 판).
   신: **항목 단위 호버**. Row2 높이가 38px 뿐이라 전폭 판을 깔 자리가 없고,
       셸 안에서는 헤더 우측이 사용자정보라 전폭 판이 그 위를 덮는다. */
.hdr_pnav .sub_menu {
    top: 100%;
    left: 0;
    transform: none;
    padding: 4px 0;
    min-width: 148px;
    z-index: 1200;
    background: var(--app-bg-panel);
    border: 1px solid var(--app-border);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    text-align: left;
}

.hdr_pnav .menu-item:hover .sub_menu { display: block; }

.hdr_pnav .sub_menu_link {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--app-text-secondary);
    text-decoration: none;
}

.hdr_pnav .sub_menu_link:hover { background: var(--app-primary-tint); color: var(--app-primary); }

/* 태블릿 티어(901~1399.98)의 가로 스크롤 페이드 색 보정 — 앵커 배경이 구 secondary_header(#080F1C)가
   아니라 Row2 배경이다. 의사요소 자체는 위 AG 블록이 만든다(여기는 색만). */
.hdr_pnav.gnb-fade-l::before { background: linear-gradient(90deg, var(--app-bg-panel-2), rgba(0, 0, 0, 0)); }
.hdr_pnav.gnb-fade-r::after { background: linear-gradient(270deg, var(--app-bg-panel-2), rgba(0, 0, 0, 0)); }

/* 🔴 태블릿 티어에서 `.gnb_scroll_wrap .main_menu { overflow-x:auto }` 를 파트너 nav 에만 되돌린다.
   이유: overflow-x:auto 는 **세로도 같이 클리핑**한다(CSS 규격 — 한 축만 visible 로 둘 수 없다).
   Row2 는 38px 뿐이라 클리핑되면 드롭다운이 통째로 잘려 `현재접속자` 처럼 하위에만 있는 표면이
   1025~1399.98 구간에서 도달 불가가 된다(그 구간은 모바일 스트립도 안 뜬다).
   파트너 GNB 는 상위 5개(≈330px)라 사이드바 260 을 빼도 1025 에서 여유가 크므로 스크롤이
   실제로 필요한 적이 없다 → 클리핑만 손해다.
   ⚠️ AG1 자산(gnb_scroll_wrap 클래스 + appGnbScroll 배선)은 그대로 유지한다. 메뉴가 늘어
      실제로 넘치게 되면 이 블록만 걷어내면 스크롤 거동이 즉시 복귀한다.
   ⚠️ 회원 GNB 는 이 규칙에 닿지 않는다(.hdr_pnav 스코프). */
@media (min-width: 901px) and (max-width: 1399.98px) {
    .hdr_pnav .main_menu {
        width: auto;
        overflow: visible;
        margin-left: 0;
        gap: 18px;
    }
}

/* ── §1 · 본문 스코프 ────────────────────────────────────────────────────── */
/* layout.css `.main_index_container` 와 동형 역할(파트너판). 페이지는 `.main-content` 를 그대로
   쓰므로(13개 무수정) 바깥 한 겹만 이 클래스가 맡는다.
   ⚠️ 라이트 톤은 여기까지만 — 구 MainLayout_Partner 의 `body{background:#f8f9fa}` 전역 override 를
      대체한다. 전역으로 칠하면 셸(사이드바·헤더)이 같이 밝아져 다크 UI 가 무너진다.
   min-height 78px = hdr_row1(40) + hdr_row2(38) — 기존 값 파생이며 새 브레이크포인트가 아니다.
   ⚠️ CJ §A-1 · 헤더에 로고행(hdr_row0 64px)이 추가돼 78 이 더 이상 헤더 실높이가 아니다.
      상수를 그대로 두면 파트너 화면 하단에 64px 만큼 불필요한 스크롤이 생긴다 →
      헤더 높이 토큰(layout.css `--app-hdr-h`)에 위임한다. 폴백 78px 는 토큰 미로드 시 구 동작 유지용. */
.partner_scope {
    width: 100%;
    min-height: calc(100dvh - var(--app-hdr-h, 78px));
    background: #f8f9fa;
    color: #333;
    position: relative;
    z-index: 1;
}

/* 구 `.main-content` 의 padding-top:120px 은 **fixed 파트너 헤더가 덮던 자리**를 비우는 보정값이었다.
   셸의 pc_header 는 sticky 라 flow 공간을 직접 차지하므로 그대로 두면 상단이 통째로 빈다.
   ⚠️ 좌우/하단 20px 은 유지(페이지별 표 여백 규격) — 위쪽만 정상 여백으로 되돌린다. */
.partner_scope .main-content { padding-top: 18px; }

/* ── §3 · 모바일(≤1024) 파트너 내비 ─────────────────────────────────────── */
/* 이 구간은 pc_header 가 숨어(위 max-width:1024 블록) 파트너 GNB 가 화면에서 사라진다.
   ⚠️ 드로어를 새로 만들지 않는다 — 드로어는 MainLayout 것 1벌(AV 처리와 충돌 금지).
      대신 본문 최상단에 가로 스크롤 스트립 1줄을 둔다(구 m_tab_container 의 JS 인디케이터 기구는 폐기). */
.partner_mnav { display: none; }

@media (max-width: 1024px) {
    .partner_mnav {
        display: flex;
        gap: 6px;
        align-items: center;
        padding: 8px 12px;
        background: #fff;
        border-bottom: 1px solid #dfe4e8;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .partner_mnav::-webkit-scrollbar { display: none; }

    .partner_mnav_item {
        flex: none;
        padding: 7px 12px;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        font-size: 13px;
        color: #37474f;
        text-decoration: none;
        white-space: nowrap;
    }

    .partner_mnav_item.active {
        background: #007f93;
        border-color: #007f93;
        color: #fff;
        font-weight: 700;
    }
}

/* ==========================================================================
   AX2 · 파트너 흰 배경 영역 스크롤바 (청록 #008282)
   --------------------------------------------------------------------------
   범위 = `.main-content` 하위로 **한정**. 실측: s1 에서 이 클래스를 쓰는 파일 12개가
   전부 Components/Pages/Partner/ 하위라 파트너 전용 마커로 안전하다.
   전역(common.css `::-webkit-scrollbar` 다크 톤)은 무접촉 이므로 스포츠 목록 등
   어두운 화면의 대비는 그대로 유지된다.

   표준(scrollbar-color)과 WebKit 계열을 양쪽 대응한다.
   ⚠️ iOS Safari 는 오버레이 스크롤바라 두 방식 모두 적용되지 않는다(플랫폼 제약).
      데스크톱 Chrome/Edge/Firefox 와 안드로이드 Chrome 에서만 반영된다.
   ⚠️ 트랙은 밝은 회색 #e9eef0 (흰 배경 위에서 썸 위치가 보이도록 최소 대비만).
   ========================================================================== */
.main-content,
.main-content *,
.popup-layout-container,
.popup-layout-container * {
    scrollbar-width: thin;
    scrollbar-color: #008282 #e9eef0;
}

.popup-layout-container::-webkit-scrollbar,
.popup-layout-container ::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.main-content ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.popup-layout-container::-webkit-scrollbar-track,
.popup-layout-container ::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.main-content ::-webkit-scrollbar-track {
    background: #e9eef0;
    border-radius: 8px;
}

.popup-layout-container::-webkit-scrollbar-thumb,
.popup-layout-container ::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.main-content ::-webkit-scrollbar-thumb {
    background: #008282;
    border-radius: 8px;
    border: 1px solid #e9eef0;
}

.popup-layout-container::-webkit-scrollbar-thumb:hover,
.popup-layout-container ::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.main-content ::-webkit-scrollbar-thumb:hover {
    background: #00a3a3;
}

/* BJ ⑦ · w-full 파트너 페이지(회원리스트·현재접속자 등)도 대시보드처럼 좌우 살짝 여백.
   margin 이 아니라 padding + border-box = 폭(스크롤 테이블 영역)은 유지한 채 가장자리만 띄운다. */
@media (max-width: 1024px) {
    .main-content.w-full {
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }
}


/* BN-PVW4/5(2026-08-31 지시 · 미러 동기) — 파트너 모달 레이어/스크롤 공통 수리.
   1) partner_scope 스택 컨텍스트가 내부 fixed 모달을 셸 헤더 아래 층에 가두는 구조 대비 — 모달 열림 동안만 승격.
   2) 모달 열림 동안 뒷배경 페이지 스크롤 잠금(스크롤 = 모달 본문 내부만 — 본문 overscroll-behavior와 한 쌍).
   3) 모바일 팝업 레이아웃 여백 최소화. */
.partner_scope:has(.pml_modal_bd),
.partner_scope:has(.pmm_bd),
.partner_scope:has(.ptm-back) {
    z-index: 2000;
}
body:has(.pml_modal_bd),
body:has(.pmm_bd),
body:has(.ptm-back) {
    overflow: hidden;
}
@media (max-width: 1024px) {
    .popup-layout-container { padding: 4px 6px; }
}