/**
 * agent 최외곽 레이아웃 v3 — 모던 어드민 스킨.
 *
 * - release.admin_header_v3 면 본사/하위 에이전트 모두 로드되며(데이터는 등급별 스코프),
 *   모든 셀렉터를 html.ag-v3 아래에 두어 v1/v2 화면과 내부 페이지(UIkit/Semantic)에는 영향이 없다.
 * - 신규 클래스는 전부 ag- 프리픽스. 기존 layout.css 는 수정하지 않고 여기서 덮어쓴다.
 * - 구조: 헤더(전폭 고정) = 1행 로고+상태+알림+유틸 / 2행 GNB / 3행 일별 통계 스트립.
 *         사이드바는 헤더 아래에서 시작하고 현재 GNB 섹션의 하위메뉴만 보여준다.
 */

html.ag-v3 {
    /* ===== 디자인 토큰 ===== */
    --ag-bg: #f6f7f9;
    --ag-surface: #ffffff;
    --ag-surface-2: #fafafa;
    --ag-border: #e5e7eb;
    --ag-border-strong: #d1d5db;
    --ag-text: #18181b;
    --ag-text-2: #52525b;
    --ag-text-3: #a1a1aa;
    --ag-accent: #4f46e5;
    --ag-accent-strong: #4338ca;
    --ag-accent-weak: #eef2ff;
    --ag-green: #059669;
    --ag-green-weak: #ecfdf5;
    --ag-red: #dc2626;
    --ag-red-weak: #fef2f2;
    --ag-radius: 8px;
    --ag-radius-sm: 6px;
    --ag-radius-lg: 12px;
    --ag-shadow-sm: 0 1px 2px rgba(24, 24, 27, .05);
    --ag-shadow-lg: 0 10px 30px rgba(24, 24, 27, .12), 0 2px 8px rgba(24, 24, 27, .06);
    --ag-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

    /* 다크 헤더 존 (1~2행: 로고·상태·GNB) — 인디고 언더톤의 차콜 */
    --ag-dark-bg: #232130;
    --ag-dark-bg-2: #1b1a25;
    --ag-dark-border: rgba(255, 255, 255, .09);
    --ag-dark-text: #f4f4f6;
    --ag-dark-text-2: rgba(255, 255, 255, .68);
    --ag-dark-text-3: rgba(255, 255, 255, .42);
    --ag-dark-hover: rgba(255, 255, 255, .08);
    --ag-accent-on-dark: #a5b4fc; /* 다크 위 가독용 인디고 (indigo-300) */

    --ag-topbar-h: 48px;
    --ag-gnb-h: 46px;   /* 2행: GNB(좌) + 대기알림(우) 공용 행 */
    --ag-strip-h: 42px;
    --ag-header-h: calc(var(--ag-topbar-h) + var(--ag-gnb-h) + var(--ag-strip-h)); /* 136px */
    --ag-sidebar-w: 216px;   /* 로고/사이드바 폭 — 헤더 상단 가로 공간 확보 위해 약간 축소 (240→216) */
}

/* 페이지(문서) 레벨 가로 스크롤 차단 — Semantic '.ui.grid' 의 음수 마진(-1rem) 거터가
   body 직속에 놓이면 좌우로 ~13px 씩 삐져나와 창 전체 가로 스크롤바를 만든다. 그 거터는 빈
   여백이라 잘라도 안전. 세로 스크롤, '#content' 내부 표의 가로 스크롤(#content overflow:auto),
   헤더 행 내부 스크롤(.ag-topbar/.ag-alarms overflow-x:auto)은 각자 컨테이너에서 처리되므로 무관.
   창 전체 가로 스크롤바는 루트(html)가 관장하므로 html 에 걸어야 한다(body 만으론 안 막힘).
   clip 우선(다른 축 visible 유지 → 세로 스크롤 정상), 미지원 브라우저는 hidden 폴백(둘 다 선언). */
html.ag-v3, html.ag-v3 body { overflow-x: hidden; overflow-x: clip; }

/* ===== 헤더 골격 (전폭 고정 + 그리드) ===== */
html.ag-v3 #top-head {
    left: 0;
    right: 0;
    /* 베이스 layout.css 의 z-index:9 를 상향.
       본문 장식요소(Semantic floating label z100·라벨/드롭다운·스티키 z800)가 헤더/메뉴 위로
       삐져나오던 문제 해결. GNB 드롭다운(.gnb-sub)이 #top-head 안에 있어 이 한 줄이면 묶여서 올라간다.
       모달/딤(z999~1001)·SLB 라이트박스(z1000+)보다는 아래라, 그것들은 정상적으로 헤더를 덮는다. */
    z-index: 900;
    display: grid;
    /* 사이드바 | GNB(내용폭 auto) | 나머지(1fr) — 2행에서 GNB 오른쪽 '남는 공간'에 알림을 중앙 배치하려고 3컬럼 */
    grid-template-columns: var(--ag-sidebar-w) auto 1fr;
    /* 1·2행은 최소높이만 주고 내용이 많으면 늘어나게(minmax …auto) — 좁은 화면에서 칩이 가로 스크롤
       대신 다음 줄로 접히면 행이 그만큼 커진다. 늘어난 높이는 JS(syncHeaderH)가 --ag-header-h 로
       반영해 본문/사이드바 시작 위치를 맞춘다. 3행(통계 스트립)은 고정 높이 + 자체 가로 스크롤 유지. */
    grid-template-rows: minmax(var(--ag-topbar-h), auto) minmax(var(--ag-gnb-h), auto) var(--ag-strip-h);
    background: linear-gradient(180deg, var(--ag-dark-bg) 0%, var(--ag-dark-bg-2) 100%);
    border-bottom: 1px solid var(--ag-border);
    font-family: var(--ag-font);
    color: var(--ag-dark-text);
}

/* 로고 — 헤더 좌측 컬럼(3행 전체)을 세로로 차지, 사이드바 폭과 정렬 */
html.ag-v3 .ag-logo {
    grid-column: 1;
    grid-row: 1 / 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-right: 1px solid var(--ag-dark-border);
    text-decoration: none;
}
html.ag-v3 .ag-logo:hover { text-decoration: none; }
html.ag-v3 .ag-logo .ag-logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--ag-accent) 0%, #7c6ff0 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
/* 텍스트 워드마크 — 로고 이미지가 없어 타이포로 브랜드 표현 (이름 + 인디고 마침표) */
html.ag-v3 .ag-logo .ag-logo-name {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.035em;
    color: var(--ag-dark-text);
}
html.ag-v3 .ag-logo .ag-logo-name::after {
    content: '.';
    color: var(--ag-accent-on-dark);
}

/* Vue 루트는 레이아웃에 참여하지 않고(자식이 직접 grid 셀로) 데이터 바인딩만 담당 */
html.ag-v3 #app_header_info { display: contents; }

/* ===== 1행 — 상태 칩 + 유틸 ===== */
html.ag-v3 .ag-topbar {
    grid-column: 2 / 4;   /* GNB 컬럼 + 나머지 컬럼을 모두 차지 (사이드바 우측 전체) */
    grid-row: 1;
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;      /* 가로 스크롤 대신 다음 줄로 접어 모든 칩을 보이게 한다 */
    gap: 4px;
    padding: 6px 8px;     /* 두 줄로 접힐 때 위아래 여백 확보 */
    min-width: 0;
}

html.ag-v3 .ag-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--ag-radius-sm);
    background: none;
    color: var(--ag-dark-text-2);
    cursor: pointer;
    flex-shrink: 0;
}
html.ag-v3 .ag-icon-btn:hover { background: var(--ag-dark-hover); color: var(--ag-dark-text); }
html.ag-v3 .ag-icon-btn i.icon { margin: 0; }

html.ag-v3 .ag-chips {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
html.ag-v3 .ag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 5px;
    border-radius: var(--ag-radius-sm);
    font-size: 12px;
    color: var(--ag-dark-text-2);
    white-space: nowrap;
}
html.ag-v3 .ag-chip b {
    font-size: 12px;
    font-weight: 680;
    color: var(--ag-dark-text);
    font-variant-numeric: tabular-nums;
}
html.ag-v3 a.ag-chip { text-decoration: none; cursor: pointer; }
html.ag-v3 a.ag-chip:hover { background: var(--ag-dark-hover); text-decoration: none; }

/* 접속보안로그 — 다른 상태칩처럼 늘 보인다(0 이어도).
   평상시엔 조용한 톤이고, 확인할 것이 있을 때(.is-alert)만 붉게 강조 + 펄스한다.
   항상 붉으면 경보가 배경이 되어 정작 사고가 났을 때 눈에 안 들어온다. */
html.ag-v3 button.ag-chip-secalert {
    border: 1px solid var(--ag-dark-border);
    background: transparent;
    color: var(--ag-dark-text-2);
    cursor: pointer;
    margin-right: 4px;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
html.ag-v3 button.ag-chip-secalert:hover {
    background: var(--ag-dark-hover);
    color: var(--ag-dark-text);
}
html.ag-v3 button.ag-chip-secalert i.icon { margin: 0; font-size: 12px; opacity: .75; }
html.ag-v3 button.ag-chip-secalert b { color: var(--ag-dark-text); margin-left: 2px; }

/* 확인 전 신규 건이 있을 때 */
html.ag-v3 button.ag-chip-secalert.is-alert {
    border-color: rgba(248, 113, 113, .45);
    background: rgba(248, 113, 113, .12);
    color: #fca5a5;
    animation: ag-secalert-pulse 2.4s ease-in-out infinite;
}
html.ag-v3 button.ag-chip-secalert.is-alert:hover {
    background: rgba(248, 113, 113, .22);
    border-color: rgba(248, 113, 113, .7);
}
html.ag-v3 button.ag-chip-secalert.is-alert i.icon { opacity: .9; }
html.ag-v3 button.ag-chip-secalert.is-alert b { color: #fecaca; }
html.ag-v3 button.ag-chip-secalert.is-alert .ag-secalert-block { color: #fca5a5; }
@keyframes ag-secalert-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .0); }
    50%      { box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }
}
/* 애니메이션을 원치 않는 사용자 설정 존중 (다른 펄스 처리와 동일 규약) */
@media (prefers-reduced-motion: reduce) {
    html.ag-v3 button.ag-chip-secalert.is-alert { animation: none; }
}

/* 라이브 인디케이터(접속 지표) — 다크 위에서 형광 그린 */
html.ag-v3 .ag-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}

/* 외부 잔액(SWIX R / Holdem R) 칩 — 보더형으로 구분 */
html.ag-v3 .ag-chip.ag-chip-api {
    border: 1px solid var(--ag-dark-border);
    background: rgba(255, 255, 255, .04);
}
html.ag-v3 .ag-chip.ag-chip-api b { color: var(--ag-accent-on-dark); }

html.ag-v3 .ag-topbar-divider {
    width: 1px;
    height: 18px;
    background: var(--ag-dark-border);
    flex-shrink: 0;
}

/* ===== 2행 우측 — 대기 알림 (GNB 와 같은 행, 우측 정렬, 각 항목을 칩으로 가로 배치) ===== */
html.ag-v3 .ag-alarms {
    grid-column: 3;          /* GNB 오른쪽 '남는 공간' 컬럼 */
    grid-row: 2;
    justify-self: center;    /* 남는 공간 안에서 가운데 정렬 (우측 끝에 붙지 않게) */
    align-self: center;
    max-width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;      /* 가로 스크롤 대신 다음 줄로 접어 모든 대기알림을 보이게 한다 */
    gap: 3px;
    padding: 5px 6px;     /* 두 줄로 접힐 때 위아래 여백 확보 */
    min-width: 0;
    /* 그룹색 기본값 — g-agent / g-user / g-royal 이 그룹 단위로 덮어쓰고, 버튼/배지/라벨이 상속한다.
       (버튼 자신에 정의하면 그룹 상속을 막으므로 반드시 상위 컨테이너에 둔다) */
    --k: #a5b4fc;
    --k-soft: rgba(255, 255, 255, .06);
    --k-soft-h: rgba(255, 255, 255, .12);
    --k-bd: rgba(255, 255, 255, .14);
    --k-ring: rgba(165, 180, 252, .4);
    --k-on-text: #15171f;
}
html.ag-v3 .ag-alarms::-webkit-scrollbar { display: none; }
html.ag-v3 .ag-alarm-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;     /* 컬럼이 매우 좁아도 그룹 내부 항목까지 접혀 가로 스크롤이 절대 생기지 않게 */
    max-width: 100%;     /* 그룹이 컨테이너 폭을 넘지 못하게 — 넘으면 내부 항목이 다음 줄로 접힌다 */
    gap: 2px;
}
html.ag-v3 .ag-alarm-group .ag-alarm-title {
    margin: 0 3px 0 1px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--k); /* 그룹색을 따라가 묶임을 강조 */
    white-space: nowrap;
}
/* 각 알림 = .ag-chip 과 같은 톤의 클릭 가능한 칩 ( GNB 와 한 행을 나눠 쓰므로 콤팩트하게 ) */
html.ag-v3 .ag-alarm-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 7px;
    border-radius: var(--ag-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    color: #fff; /* 그룹색 배경 위 — 흰 라벨로 또렷하게 */
    cursor: pointer;
    background: var(--k-soft);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--k-bd); /* 같은색 보더로 칩 윤곽을 또렷하게 */
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, box-shadow .15s ease;
}
html.ag-v3 .ag-alarm-item:hover {
    background: var(--k-soft-h);
    box-shadow: inset 0 0 0 1px var(--k);
}

/* 그룹 색 — 에이전트=시안/틸, 회원=앰버, 적중환급=오렌지, 로얄공지=핑크
   (적중환급은 적중내역 화면의 '지급대기' 오렌지 라벨과 같은 계열로 맞췄다. 회원 앰버와는 톤을 벌려 구분) */
html.ag-v3 .g-agent  { --k:#22d3ee; --k-soft:rgba(34,211,238,.34);  --k-soft-h:rgba(34,211,238,.48); --k-bd:rgba(34,211,238,.6);  --k-ring:rgba(34,211,238,.55); }
html.ag-v3 .g-user   { --k:#fbbf24; --k-soft:rgba(245,158,11,.34);  --k-soft-h:rgba(245,158,11,.48); --k-bd:rgba(245,158,11,.6);  --k-ring:rgba(245,158,11,.6); }
html.ag-v3 .g-sports { --k:#fb923c; --k-soft:rgba(234,88,12,.34);   --k-soft-h:rgba(234,88,12,.48);  --k-bd:rgba(251,146,60,.6); --k-ring:rgba(251,146,60,.6); }
html.ag-v3 .g-royal  { --k:#f472b6; --k-soft:rgba(244,114,182,.25); --k-soft-h:rgba(244,114,182,.42); --k-bd:rgba(244,114,182,.62); --k-ring:rgba(244,114,182,.65); }
html.ag-v3 .ag-royal-notice.has-new {
    background: var(--k-soft-h);
    box-shadow: inset 0 0 0 1px var(--k), 0 0 8px rgba(244, 114, 182, .28);
    font-weight: 800;
}

html.ag-v3 .ag-alarm-item .ag-count {
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--k); /* 대기 0 이어도 항상 그룹 정색 */
    color: var(--k-on-text);
    transition: background .15s ease, color .15s ease;
}
/* 대기 건이 있을 때 — 같은 그룹색 위에 펄스만 추가로 점등 */
html.ag-v3 .ag-alarm-item .ag-count.is-on {
    animation: ag-pulse 2.4s ease-in-out infinite;
}
@keyframes ag-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--k-ring); }
    50% { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); }
}

/* 유틸 링크 (홈 / 로그아웃) — 가로 스크롤이 생겨도 우측에 고정(sticky) */
/* 상태칩과 유틸 사이 나눔선 — 자기 자신이 우측으로 밀리며 그 뒤 유틸을 끌고 간다 */
html.ag-v3 .ag-utils-divider {
    margin-left: auto;
    height: 24px;
}
html.ag-v3 .ag-utils {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-left: 8px;
}
/* 유틸(홈/로그아웃) 아이콘 — 자주 쓰므로 다른 아이콘보다 한 단계 크게 */
html.ag-v3 .ag-utils .ag-icon-btn {
    width: 36px;
    height: 36px;
}
html.ag-v3 .ag-utils .ag-icon-btn i.icon {
    font-size: 18px;
}

/* ===== 2행 좌측 — GNB (header_gnb.php 의 다크 스킨을 라이트로 오버라이드) ===== */
html.ag-v3 .agent-gnb {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;     /* 내용 폭만 차지 → 같은 행 우측에 대기알림(.ag-alarms)이 들어온다 */
    background: transparent;
    align-self: center;
}
html.ag-v3 .agent-gnb .gnb-list {
    height: var(--ag-gnb-h);
    padding: 0 4px 0 6px;
    gap: 1px;
    font-family: var(--ag-font);
}
html.ag-v3 .agent-gnb .gnb-name {
    height: 32px;
    gap: 4px;            /* 아이콘·라벨·캐럿 간격 압축 (GNB 폭 축소 → 대기알림과 한 행에 더 잘 맞음) */
    padding: 0 8px;
    border-radius: var(--ag-radius-sm);
    color: var(--ag-dark-text-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background .15s ease, color .15s ease;
}
html.ag-v3 .agent-gnb .gnb-name:hover { color: var(--ag-dark-text); background: var(--ag-dark-hover); }
html.ag-v3 .agent-gnb .gnb-name.is-active {
    color: #c7d2fe;
    background: rgba(99, 102, 241, .24);
}
/* 기존 밑줄 액티브 표시는 끄고, 현재 페이지 섹션은 인디고 텍스트로 표시 */
html.ag-v3 .agent-gnb .gnb-label::after { display: none; }
html.ag-v3 .agent-gnb .gnb-name.is-current { color: var(--ag-accent-on-dark); }
html.ag-v3 .agent-gnb .gnb-name i.icon { opacity: .55; }

/* 메뉴별 드롭다운 — 디자인 토큰(인디고/라이트)에 맞춰 오버라이드 */
html.ag-v3 .agent-gnb .gnb-name {
    height: 32px;
    border-radius: var(--ag-radius-sm);
    color: var(--ag-dark-text-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background .15s ease, color .15s ease;
}
html.ag-v3 .agent-gnb .gnb-name:hover,
html.ag-v3 .agent-gnb .gnb-item.is-open .gnb-name { color: var(--ag-dark-text); background: var(--ag-dark-hover); }
html.ag-v3 .agent-gnb .gnb-name.is-current { color: var(--ag-accent-on-dark); }
html.ag-v3 .agent-gnb .gnb-name i.icon { opacity: .55; }

html.ag-v3 .agent-gnb .gnb-sub {
    margin-top: 8px;
    padding: 6px;
    border-radius: var(--ag-radius-lg);
    border: 1px solid var(--ag-border);
    box-shadow: var(--ag-shadow-lg);
    font-family: var(--ag-font);
}
html.ag-v3 .agent-gnb .gnb-link {
    color: var(--ag-text-2);
    border-radius: var(--ag-radius-sm);
}
html.ag-v3 .agent-gnb .gnb-link:hover {
    background: var(--ag-accent-weak);
    color: var(--ag-accent-strong);
}
html.ag-v3 .agent-gnb .gnb-link.is-current { color: var(--ag-accent-strong); font-weight: 700; }

/* ===== 3행 — 일별 통계 스트립 (로고 우측 정렬, 다른 행들처럼 col2~) ===== */
html.ag-v3 .ag-strip {
    grid-column: 2 / 4;
    grid-row: 3;
    display: flex;
    align-items: stretch;
    /* 헤더와 같은 남색 계열 — 한 단계 밝은 인디고 네이비로만 차별 */
    background: linear-gradient(180deg, #312f47 0%, #2a2840 100%);
    border-top: 1px solid rgba(255, 255, 255, .08);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
    font-family: var(--ag-font);
}
html.ag-v3 .ag-strip::-webkit-scrollbar { height: 6px; }
html.ag-v3 .ag-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 3px; }

html.ag-v3 .ag-cell {
    flex: 1 0 auto;
    /* 금액칸이 10~100억대(예: 10,000,000,000)까지 와도 줄바꿈/잘림 없이 한 줄로 들어가도록 충분히 확보.
       white-space:nowrap 으로 잘리진 않지만, 최소폭을 키워 칸 간 폭이 들쭉날쭉하지 않게 한다. */
    min-width: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 4px 12px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, box-shadow .15s ease;
}
/* hover — 밝은 틴트 + 하단 인디고 라인으로 칼럼이 또렷하게 */
html.ag-v3 .ag-cell:hover {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 -2px 0 #c7d2fe; /* indigo-200 — 남색 배경 위에서 또렷한 언더바 */
    text-decoration: none;
}
html.ag-v3 .ag-cell.is-empty:hover { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .25); }
html.ag-v3 .ag-cell .ag-cell-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .48);
    letter-spacing: -.01em;
}
html.ag-v3 .ag-cell .ag-cell-value {
    font-size: 13px;
    font-weight: 650;
    color: var(--ag-dark-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
html.ag-v3 .ag-cell .ag-cell-value small {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .42);
    margin-left: 3px;
}
html.ag-v3 .ag-cell .ag-cell-value.is-plus { color: #6ee7b7; }
html.ag-v3 .ag-cell .ag-cell-value.is-minus { color: #fb7185; }
/* 데이터 소스가 아직 없는 칸 (2단계 예정) */
html.ag-v3 .ag-cell.is-empty .ag-cell-value { color: rgba(255, 255, 255, .3); font-weight: 500; }
html.ag-v3 .ag-cell.is-empty { cursor: help; }

/* ===== 사이드바 — 라이트 + 현재 섹션 모드 ===== */
html.ag-v3 #left-col {
    top: var(--ag-header-h);
    width: var(--ag-sidebar-w);   /* base layout.css 의 240px 고정값을 토큰으로 덮어 로고 컬럼과 폭 일치 */
    background: var(--ag-surface-2);
    border-right: 1px solid var(--ag-border);
    font-family: var(--ag-font);
    z-index: 2;
}
/* 하단 고정 바(쓰는 화면이 있으면) 도 같은 폭으로 */
html.ag-v3 .bar-bottom { width: var(--ag-sidebar-w); }
html.ag-v3 aside {
    scrollbar-width: thin;
    scrollbar-color: var(--ag-border-strong) transparent;
}
html.ag-v3 aside::-webkit-scrollbar { width: 6px; }
html.ag-v3 aside::-webkit-scrollbar-thumb { background-color: var(--ag-border-strong); border-radius: 3px; }
html.ag-v3 aside::-webkit-scrollbar-track { background-color: transparent; }

html.ag-v3 .ag-side-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 16px 10px 16px;
}
html.ag-v3 .ag-side-section i.icon {
    margin: 0;
    color: var(--ag-text-3);
    font-size: 14px;
}
html.ag-v3 .ag-side-section .ag-side-title {
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -.01em;
    color: var(--ag-text);
}
html.ag-v3 .ag-side-nav {
    list-style: none;
    margin: 0;
    padding: 10px 10px 28px 10px;
}
html.ag-v3 .ag-side-nav li { margin: 1px 0; }
html.ag-v3 .ag-side-nav a {
    position: relative;
    display: block;
    padding: 7px 12px;
    border-radius: var(--ag-radius-sm);
    font-size: 13px;
    color: var(--ag-text-2);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
html.ag-v3 .ag-side-nav a:hover { background: #f0f0f2; color: var(--ag-text); }
html.ag-v3 .ag-side-nav li.is-active > a {
    background: var(--ag-accent-weak);
    color: var(--ag-accent-strong);
    font-weight: 650;
}
html.ag-v3 .ag-side-nav li.is-active > a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--ag-accent);
}
/* 섹션 매칭 실패(전체 폴백) 시 — 접이식 그룹. 그룹 단위가 분명히 보이도록 밴드형 헤더 */
html.ag-v3 .ag-side-grp { margin: 4px 0; }
html.ag-v3 .ag-side-grp + .ag-side-grp { margin-top: 6px; }
html.ag-v3 .ag-side-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-left: 3px solid var(--ag-border-strong);
    border-radius: var(--ag-radius-sm);
    background: #eef0f3;
    color: var(--ag-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: -.01em;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
html.ag-v3 .ag-side-group:hover { background: #e6e9ee; }
html.ag-v3 .ag-side-group i.icon { margin: 0; color: var(--ag-text-3); font-size: 13px; }
html.ag-v3 .ag-side-group .ag-side-group-name { flex: 1; }
html.ag-v3 .ag-side-group .ag-side-chev {
    color: var(--ag-text-3);
    transition: transform .25s cubic-bezier(.43, .195, .02, 1);
}
html.ag-v3 .ag-side-grp.is-open .ag-side-group {
    border-left-color: var(--ag-accent);
    background: var(--ag-accent-weak);
    color: var(--ag-accent-strong);
}
html.ag-v3 .ag-side-grp.is-open .ag-side-group i.icon { color: var(--ag-accent-strong); }
html.ag-v3 .ag-side-grp.is-open .ag-side-chev { transform: rotate(180deg); }
html.ag-v3 .ag-side-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(.43, .195, .02, 1);
}
html.ag-v3 .ag-side-sub li { margin: 1px 0; }
html.ag-v3 .ag-side-sub li:first-child { margin-top: 3px; }

/* 사이드바 상단 — 계정 정보 ( 하단 고정은 시야에서 벗어나 상단 인라인으로 배치 ) */
html.ag-v3 .ag-side-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ag-border);
    cursor: pointer;
}
html.ag-v3 .ag-side-account:hover { background: #f0f0f2; }
html.ag-v3 .ag-side-account .ag-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ag-accent-weak);
    color: var(--ag-accent-strong);
    font-size: 13px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}
html.ag-v3 .ag-side-account .ag-account-name {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--ag-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.ag-v3 .ag-side-account .ag-account-role {
    font-size: 11px;
    color: var(--ag-text-3);
    line-height: 1.25;
}

/* ===== 본문 보정 ===== */
html.ag-v3 #content {
    margin-top: var(--ag-header-h);
    margin-left: var(--ag-sidebar-w);   /* base layout.css 의 240px 고정 여백을 토큰으로 덮어 사이드바 폭과 일치 */
    background-color: var(--ag-bg);
    /* base layout.css 의 'transition: margin .2s' 를 margin-left 로 좁힌다.
       margin-top 은 헤더 높이(--ag-header-h)에 묶여 페이지 로드/높이 동기화(syncHeaderH) 때마다 바뀌는데,
       transition 이 걸려 있으면 본문이 0.2s 동안 출렁이며 내려온다 → 깜빡임의 원인.
       margin-left 만 남겨 사이드바 토글(toggleLeftSide) 슬라이드 애니메이션은 그대로 유지한다. */
    transition: margin-left 0.2s cubic-bezier(.4, 0, .2, 1);
}

/* GNB(좌) + 대기알림(우)이 한 행을 나눠 쓰므로, 폭이 좁아지면 알림을 단계적으로 콤팩트하게 만들어
   GNB 트리거와 겹치지 않게 한다. (그룹색은 칩 자체에 남아 에이전트/회원 구분은 유지된다) */
@media (max-width: 1480px) {
    html.ag-v3 .ag-alarm-group .ag-alarm-title { display: none; }
    html.ag-v3 .ag-alarm-item { padding: 0 8px; gap: 5px; }

    /* 이 폭 아래에선 GNB 옆 '남는 공간'에 대기알림이 한 줄로 들어가지 못해 col3(1fr)가 쪼그라들고
       알림이 세로로 탑처럼 쌓인다. → 알림을 GNB 아래 '전폭 자기 행'으로 내려 전체 폭을 쓰게 하면
       대부분 한 줄에 들어간다. (행 추가: 1=상태칩 2=GNB 3=대기알림 4=통계스트립) */
    html.ag-v3 #top-head {
        grid-template-rows: minmax(var(--ag-topbar-h), auto) minmax(var(--ag-gnb-h), auto) minmax(var(--ag-gnb-h), auto) var(--ag-strip-h);
    }
    html.ag-v3 .ag-logo { grid-row: 1 / 5; }
    html.ag-v3 .ag-alarms {
        grid-column: 2 / 4;
        grid-row: 3;
        justify-self: stretch;
        justify-content: flex-start;
        border-top: 1px solid var(--ag-dark-border);
    }
    html.ag-v3 .ag-strip { grid-row: 4; }
}
@media (max-width: 1320px) {
    html.ag-v3 .ag-alarms { gap: 2px; padding: 0 8px; }
    html.ag-v3 .ag-alarm-item { font-size: 12px; }
    html.ag-v3 .ag-alarms .ag-topbar-divider { display: none; }
}

/* ===== 스포츠 폴드별 요율 — 마켓 탭 =====
   행렬이 마켓(5) × 지급구분(4) × 폴드(5) 로 커져 마켓 단위 탭으로 나눠 보여 준다.
   에이전트 수정 팝업 / 회원등급 / 회원 상세에서 공통으로 쓰므로 스코프 없이 둔다. */
.sports-fold-rate-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--ag-border, #e2e8f0);
}
.sports-fold-rate-tab {
    appearance: none;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ag-text-muted, #64748b);
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}
.sports-fold-rate-tab:hover { background: var(--ag-surface-2, #f8fafc); }
.sports-fold-rate-tab.is-active {
    background: #fff;
    color: var(--ag-accent, #3b82f6);
    border-color: var(--ag-border, #e2e8f0);
    box-shadow: inset 0 2px 0 var(--ag-accent, #3b82f6);
}
.sports-fold-rate-pane { display: none; }
.sports-fold-rate-pane.is-active { display: block; }
.sports-fold-rate-paneact {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 6px;
}

/* ===== 스포츠 폴드별 요율 — 요율 행렬 표 =====
   SportsFoldRate::renderMatrixHtml() / renderDisplayTableHtml() 가 만드는 표.
   회원등급 화면의 .fold-grid 스타일은 #lvl-form 스코프라 에이전트 수정 팝업·회원 상세에는
   적용되지 않는다. 같은 렌더러를 쓰는 세 화면이 동일하게 보이도록 여기에 공통으로 둔다. */
.sports-fold-rate-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sports-fold-rate-table {
    /* 컨테이너 폭에 맞춰 지급구분 4열이 균등하게 줄어든다(table-layout: fixed).
       에이전트 수정 팝업처럼 폭이 좁은 곳에서도 가로 스크롤이 생기지 않게 하려는 것이다.
       min-width 아래로 더 좁아지면 그때만 래퍼가 가로 스크롤한다. */
    width: 100%;
    min-width: 420px;
    table-layout: fixed;
    margin: 0 !important;
}
/* Semantic 의 compact 셀 여백(.7em)이 5열에서는 과해 좌우로 넘친다. */
.sports-fold-rate-table th,
.sports-fold-rate-table td {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.sports-fold-rate-table th {
    text-align: center;
    white-space: nowrap;
    font-size: 12.5px;
}
/* table-layout: fixed 는 첫 행에서 열 폭을 정하므로 폴드 라벨 열은 th 에 지정해야 한다. */
.sports-fold-rate-table thead th:first-child { width: 74px; text-align: left; }
.sports-fold-rate-table td { vertical-align: middle; }
.sports-fold-rate-table td.fold-no {
    text-align: left;
    white-space: nowrap;
    font-size: 12.5px;
}
.sports-fold-rate-table .ui.icon.input {
    width: 100%;
    max-width: 96px;
    min-width: 0;
}
.sports-fold-rate-table .ui.icon.input > input {
    width: 100%;
    text-align: right;
    font-size: 12px;
    padding: 5px 24px 5px 8px !important;
}
.sports-fold-rate-table .ui.icon.input > i.icon {
    font-size: 0.8em;
    opacity: 0.55;
}
.sports-fold-rate-table .sports-fold-rate-bulk-row td { background: var(--ag-surface-2, #f8fafc); }
.sports-fold-rate-bulk {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 열이 좁아지면 「적용」 버튼이 입력칸 아래로 내려가 열을 밀어내지 않는다. */
    flex-wrap: wrap;
    gap: 4px;
}
.sports-fold-rate-bulk .ui.icon.input {
    width: 100%;
    max-width: 84px;
    min-width: 0;
}
.sports-fold-rate-bulk .fold-rate-bulk-apply { white-space: nowrap; }
.sports-fold-rate-notice {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--ag-text-muted, #64748b);
    line-height: 1.5;
}