@charset "utf-8";
/**
 * KMAGF Admin Design System
 *
 * 기존 theme-setting.css / admin_base.css 변수 체계 위에 구축.
 * 관리자 전용 레이아웃 + 컴포넌트.
 * 기존 클래스(btns, basic-input 등)와 공존하며 점진적 전환.
 */


/* ============================================================
   1. CSS 변수 확장
   ============================================================ */
:root {
    /* 레이아웃 */
    --ads-sidebar-width: 240px;
    --ads-sidebar-collapsed: 60px;
    --ads-topbar-height: 56px;

    /* 사이드바 색상 */
    --ads-sidebar-bg: #111b27;
    --ads-sidebar-text: #c0cdd8;
    --ads-sidebar-text-hover: #ffffff;
    --ads-sidebar-active-bg: rgba(45,106,159,.25);
    --ads-sidebar-active-text: #ffffff;
    --ads-sidebar-active-bar: #3b9eff;
    --ads-sidebar-group-text: #8a9bb0;
    --ads-sidebar-divider: rgba(255,255,255,.1);

    /* topbar */
    --ads-topbar-bg: #ffffff;
    --ads-topbar-border: #e8ecf0;

    /* 콘텐츠 */
    --ads-content-bg: #f0f2f5;
    --ads-card-bg: #ffffff;
    --ads-card-border: #e4e8ec;
    --ads-card-radius: 10px;
    --ads-card-shadow: 0 1px 3px rgba(0,0,0,.06);

    /* 시맨틱 컬러 (기존 변수 활용 + 확장) */
    --ads-primary: var(--color-admin-blue);
    --ads-primary-hover: #245a87;
    --ads-primary-light: rgba(40,116,172,.08);
    --ads-success: #27ae60;
    --ads-success-light: #d4edda;
    --ads-warning: #f39c12;
    --ads-warning-light: #fff3cd;
    --ads-danger: var(--color-red);
    --ads-danger-light: #f8d7da;
    --ads-info: #3498db;
    --ads-info-light: #d1ecf1;

    /* 텍스트 */
    --ads-text: var(--color-basic);
    --ads-text-secondary: #666666;
    --ads-text-muted: #999999;
    --ads-text-placeholder: var(--input-placeholder-color);

    /* 보더/구분선 */
    --ads-border: rgba(0,0,0,.08);
    --ads-border-strong: rgba(0,0,0,.15);

    /* 그림자 */
    --ads-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --ads-shadow-md: 0 2px 8px rgba(0,0,0,.08);
    --ads-shadow-lg: 0 4px 16px rgba(0,0,0,.12);

    /* 라운드 */
    --ads-radius-sm: 4px;
    --ads-radius-md: 8px;
    --ads-radius-lg: 12px;
    --ads-radius-full: 9999px;

    /* 간격 */
    --ads-gap-xs: 4px;
    --ads-gap-sm: 8px;
    --ads-gap-md: 16px;
    --ads-gap-lg: 24px;
    --ads-gap-xl: 32px;

    /* 투어 컬러 (기존 활용) */
    --ads-tour-regular: var(--color-regulartour);
    --ads-tour-green: var(--color-greentour);
    --ads-tour-chamaru: var(--color-chamarutour);

    /* 트랜지션 */
    --ads-transition: .2s ease;
}


/* ============================================================
   2. 레이아웃 시스템
   ============================================================ */

/* 사이드바 레이아웃 래퍼 */
.ads-layout {
    display: flex;
    min-height: 100vh;
}

/* 사이드바 */
.ads-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ads-sidebar-width);
    background: var(--ads-sidebar-bg);
    color: var(--ads-sidebar-text);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    transition: width var(--ads-transition);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.ads-sidebar::-webkit-scrollbar { width: 4px; }
.ads-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* 사이드바 로고 */
.ads-sidebar-logo {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--ads-sidebar-divider);
}

.ads-sidebar-logo img {
    height: 28px;
    filter: brightness(0) invert(1);
}

/* 사이드바 메뉴 영역 */
.ads-sidebar-menu {
    padding: 8px 0;
    flex: 1;
}

/* 사이드바 메뉴 그룹 */
.ads-nav-group {
    margin-bottom: 4px;
}

/* 그룹 토글 (1단계 메뉴 헤더) */
.ads-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--ads-sidebar-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--ads-transition);
    position: relative;
    border-left: 3px solid transparent;
}

.ads-nav-group-toggle:hover {
    color: #111b27 !important;
    background: #e8f0fe !important;
}

.ads-nav-group-toggle::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    position: absolute;
    right: 16px;
    font-size: 13px;
    transition: transform var(--ads-transition);
}

.ads-nav-group-toggle.open::after {
    transform: rotate(180deg);
}

.ads-nav-group-toggle i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* active 그룹 강조 */
.ads-nav-group.active-group > .ads-nav-group-toggle {
    color: #ffffff;
    border-left-color: var(--ads-sidebar-active-bar);
    background: rgba(59,158,255,.1);
}

/* 그룹 본문 (접기/펼치기) — 2뎁스 */
.ads-nav-group-body {
    display: none;
    padding: 4px 0 6px;
    background: #1c3048;
}

.ads-nav-group-body > .ads-nav-item,
.ads-nav-group-body > a.ads-nav-toggle {
    padding-left: 54px;
    font-size: 13.5px;
    font-weight: 400;
    color: #9ab0c4;
}

.ads-nav-group-body > .ads-nav-item:hover,
.ads-nav-group-body > a.ads-nav-toggle:hover {
    color: #111b27 !important;
    background: #dce8f5 !important;
}

.ads-nav-group-body > .ads-nav-item.active {
    color: #fff;
    font-weight: 600;
    background: rgba(59,158,255,.15);
    border-left-color: var(--ads-sidebar-active-bar);
}

/* 3뎁스 (대회/경기 > 투어별) */
.ads-nav-group-body .ads-nav-sub {
    display: none;
    background: #264060;
    margin-left: 0;
    border-left: none;
    border-radius: 0;
    padding: 4px 0;
}

.ads-nav-group-body .ads-nav-sub .ads-nav-item {
    padding-left: 68px;
    font-size: 13px;
    color: #8eaabb;
}

.ads-nav-group-body .ads-nav-sub .ads-nav-item:hover {
    color: #111b27 !important;
    background: #d0dff0 !important;
}

.ads-nav-group-body .ads-nav-sub .ads-nav-item.active {
    color: #fff;
    font-weight: 600;
}

/* 기존 nav-group-title 제거 (토글이 대체) */
.ads-nav-group-title {
    display: none;
}

/* 섹션 방식 (항상 펼침) */
.ads-nav-section {
    padding: 6px 0;
    border-bottom: 1px solid var(--ads-sidebar-divider);
}

.ads-nav-section:last-child { border-bottom: none; }

.ads-nav-section-title {
    padding: 10px 20px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ads-sidebar-group-text);
}

.ads-nav-section-title i {
    margin-right: 6px;
    font-size: 12px;
}

.ads-nav-section .ads-nav-item {
    padding-left: 44px;
}

/* 사이드바 메뉴 아이템 */
.ads-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    color: var(--ads-sidebar-text);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--ads-transition);
    cursor: pointer;
    border-left: 3px solid transparent;
    position: relative;
}

.ads-nav-item:hover {
    color: #111b27 !important;
    background: #e8f0fe !important;
}

.ads-nav-item.active {
    color: var(--ads-sidebar-active-text);
    background: var(--ads-sidebar-active-bg);
    border-left-color: var(--ads-sidebar-active-bar);
    font-weight: 700;
}

.ads-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* 서브메뉴 (펼치기/접기) */
.ads-nav-sub {
    display: none;
    padding-left: 0;
}

.ads-nav-sub.open { display: block; }

.ads-nav-sub .ads-nav-item {
    padding-left: 52px;
    font-size: 13.5px;
}

.ads-nav-toggle::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    position: absolute;
    right: 16px;
    font-size: 12px;
    transition: transform var(--ads-transition);
}

.ads-nav-toggle.open::after {
    transform: rotate(180deg);
}

/* 투어 컬러 도트 */
.ads-tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ads-tour-dot.regular { background: var(--ads-tour-regular); }
.ads-tour-dot.green { background: var(--ads-tour-green); }
.ads-tour-dot.chamaru { background: var(--ads-tour-chamaru); }

/* 사이드바 하단 (프로필) */
.ads-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--ads-sidebar-divider);
    margin-top: auto;
}

.ads-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--ads-radius-md);
    transition: background var(--ads-transition);
}

.ads-sidebar-user:hover { background: rgba(255,255,255,.04); }

.ads-sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.15);
}

.ads-sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.ads-sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ads-sidebar-user-role {
    font-size: 11px;
    color: var(--ads-sidebar-group-text);
}

/* topbar */
.ads-topbar {
    position: fixed;
    top: 0;
    left: var(--ads-sidebar-width);
    right: 0;
    height: var(--ads-topbar-height);
    background: var(--ads-topbar-bg);
    border-bottom: 1px solid var(--ads-topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 900;
    transition: left var(--ads-transition);
}

/* breadcrumb */
.ads-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ads-text-muted);
}

.ads-breadcrumb a {
    color: var(--ads-text-muted);
    text-decoration: none;
}

.ads-breadcrumb a:hover { color: var(--ads-primary); }

.ads-breadcrumb .separator {
    font-size: 10px;
    color: #ccc;
}

.ads-breadcrumb .current {
    color: var(--ads-text);
    font-weight: 600;
}

/* topbar 우측 액션 */
.ads-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ads-topbar-actions .ads-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ads-radius-md);
    color: var(--ads-text-secondary);
    font-size: 16px;
    transition: all var(--ads-transition);
    cursor: pointer;
    border: none;
    background: none;
}

.ads-topbar-actions .ads-icon-btn:hover {
    background: var(--ads-primary-light);
    color: var(--ads-primary);
}

/* 콘텐츠 영역 */
.ads-content {
    margin-left: var(--ads-sidebar-width);
    margin-top: var(--ads-topbar-height);
    padding: var(--ads-gap-lg);
    min-height: calc(100vh - var(--ads-topbar-height));
    background: var(--ads-content-bg);
    transition: margin-left var(--ads-transition);
    width: calc(100% - var(--ads-sidebar-width));
}

/* 페이지 헤더 */
.ads-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ads-gap-lg);
}

.ads-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ads-text);
}

.ads-page-subtitle {
    font-size: 13px;
    color: var(--ads-text-muted);
    margin-top: 2px;
}


/* ============================================================
   3. 카드 컴포넌트
   ============================================================ */

.ads-card {
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
}

.ads-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ads-card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ads-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ads-text);
}

.ads-card-body {
    padding: 20px;
}

.ads-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--ads-card-border);
    background: rgba(0,0,0,.01);
    border-radius: 0 0 var(--ads-card-radius) var(--ads-card-radius);
}

/* 통계 카드 */
.ads-stat-card {
    padding: 20px;
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
}

.ads-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ads-text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
}

.ads-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--ads-text);
    line-height: 1.2;
}

.ads-stat-change {
    font-size: 12px;
    margin-top: 4px;
}

.ads-stat-change.up { color: var(--ads-success); }
.ads-stat-change.down { color: var(--ads-danger); }


/* ============================================================
   4. 테이블 컴포넌트
   ============================================================ */

.ads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ads-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--ads-text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    border-bottom: 2px solid var(--ads-border-strong);
    background: rgba(0,0,0,.01);
    white-space: nowrap;
}

.ads-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--ads-border);
    color: var(--ads-text);
    vertical-align: middle;
}

.ads-table tbody tr:hover {
    background: rgba(0,0,0,.015);
}

.ads-table tbody tr:last-child td {
    border-bottom: none;
}

/* 테이블 내 정렬 */
.ads-table .text-center { text-align: center; }
.ads-table .text-right { text-align: right; }
.ads-table .text-nowrap { white-space: nowrap; }

/* 테이블 래퍼 (카드 내) */
.ads-table-wrap {
    overflow-x: auto;
}

/* 컴팩트 테이블 */
.ads-table.compact thead th { padding: 8px 10px; }
.ads-table.compact tbody td { padding: 7px 10px; font-size: 13px; }

/* 스트라이프 */
.ads-table.striped tbody tr:nth-child(even) {
    background: rgba(0,0,0,.015);
}


/* ============================================================
   5. 폼 컴포넌트
   ============================================================ */

.ads-form-group {
    margin-bottom: var(--ads-gap-md);
}

.ads-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ads-text);
    margin-bottom: 6px;
}

.ads-label .required {
    color: var(--ads-danger);
    margin-left: 2px;
}

.ads-input,
.ads-select,
.ads-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ads-border-strong);
    border-radius: var(--ads-radius-sm);
    font-size: 14px;
    color: var(--ads-text);
    background: #fff;
    transition: border-color var(--ads-transition), box-shadow var(--ads-transition);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ads-input:focus,
.ads-select:focus,
.ads-textarea:focus {
    outline: none;
    border-color: var(--ads-primary);
    box-shadow: 0 0 0 3px var(--ads-primary-light);
}

.ads-input::placeholder { color: var(--ads-text-placeholder); }

.ads-input.sm { padding: 5px 10px; font-size: 13px; }
.ads-input.lg { padding: 12px 16px; font-size: 15px; }

.ads-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.ads-textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

.ads-input[readonly],
.ads-input:disabled {
    background: rgba(0,0,0,.03);
    color: var(--ads-text-muted);
    cursor: not-allowed;
}

/* 인라인 폼 */
.ads-form-inline {
    display: flex;
    align-items: center;
    gap: var(--ads-gap-sm);
    flex-wrap: wrap;
}

/* 폼 도움말 */
.ads-form-help {
    font-size: 12px;
    color: var(--ads-text-muted);
    margin-top: 4px;
}

/* 에러 상태 */
.ads-input.error { border-color: var(--ads-danger); }
.ads-form-error { font-size: 12px; color: var(--ads-danger); margin-top: 4px; }

/* 라디오/체크박스 그룹 */
.ads-radio-group,
.ads-check-group {
    display: flex;
    align-items: center;
    gap: var(--ads-gap-md);
    margin-top: 4px;
}

.ads-radio-group label,
.ads-check-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    font-weight: normal;
}


/* ============================================================
   6. 버튼 컴포넌트
   ============================================================ */

.ads-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--ads-radius-sm);
    cursor: pointer;
    transition: all var(--ads-transition);
    text-decoration: none;
    white-space: nowrap;
}

.ads-btn:hover { filter: brightness(.95); }

/* 크기 */
.ads-btn.sm { padding: 5px 10px; font-size: 12px; }
.ads-btn.lg { padding: 12px 24px; font-size: 15px; }

/* 색상 */
.ads-btn.primary {
    background: var(--ads-primary);
    color: #fff;
    border-color: var(--ads-primary);
}
.ads-btn.primary:hover { background: var(--ads-primary-hover); }

.ads-btn.secondary {
    background: #fff;
    color: var(--ads-text-secondary);
    border-color: var(--ads-border-strong);
}
.ads-btn.secondary:hover { background: #f5f5f5; color: var(--ads-text); }

.ads-btn.success {
    background: var(--ads-success);
    color: #fff;
    border-color: var(--ads-success);
}

.ads-btn.danger {
    background: var(--ads-danger);
    color: #fff;
    border-color: var(--ads-danger);
}

.ads-btn.warning {
    background: var(--ads-warning);
    color: #fff;
    border-color: var(--ads-warning);
}

/* 아웃라인 */
.ads-btn.outline-primary {
    background: transparent;
    color: var(--ads-primary);
    border-color: var(--ads-primary);
}
.ads-btn.outline-primary:hover { background: var(--ads-primary-light); }

.ads-btn.outline-danger {
    background: transparent;
    color: var(--ads-danger);
    border-color: var(--ads-danger);
}
.ads-btn.outline-danger:hover { background: var(--ads-danger-light); }

/* 고스트 (보더 없음) */
.ads-btn.ghost {
    background: transparent;
    color: var(--ads-text-secondary);
    border-color: transparent;
}
.ads-btn.ghost:hover { background: rgba(0,0,0,.04); }

/* 버튼 그룹 */
.ads-btn-group {
    display: flex;
    align-items: center;
    gap: var(--ads-gap-sm);
}


/* ============================================================
   7. 배지/태그 컴포넌트
   ============================================================ */

.ads-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--ads-radius-full);
    line-height: 1.4;
}

.ads-badge.primary { background: var(--ads-primary-light); color: var(--ads-primary); }
.ads-badge.success { background: var(--ads-success-light); color: #155724; }
.ads-badge.warning { background: var(--ads-warning-light); color: #856404; }
.ads-badge.danger { background: var(--ads-danger-light); color: #721c24; }
.ads-badge.info { background: var(--ads-info-light); color: #0c5460; }
.ads-badge.gray { background: #eee; color: #666; }

/* 도트 배지 */
.ads-badge.dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}

.ads-badge.dot.success::before { background: var(--ads-success); }
.ads-badge.dot.warning::before { background: var(--ads-warning); }
.ads-badge.dot.danger::before { background: var(--ads-danger); }
.ads-badge.dot.primary::before { background: var(--ads-primary); }


/* ============================================================
   8. 탭 컴포넌트
   ============================================================ */

.ads-tabs {
    display: flex;
    border-bottom: 2px solid var(--ads-border);
    gap: 0;
    margin-bottom: var(--ads-gap-lg);
}

.ads-tab {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ads-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--ads-transition);
    text-decoration: none;
    white-space: nowrap;
}

.ads-tab:hover { color: var(--ads-text); }

.ads-tab.active {
    color: var(--ads-primary);
    border-bottom-color: var(--ads-primary);
    font-weight: 600;
}

/* 탭 그룹 구분선 */
.ads-tab-divider {
    width: 1px;
    background: var(--ads-border);
    margin: 6px 4px;
}


/* ============================================================
   9. 필터/검색 바
   ============================================================ */

.ads-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--ads-gap-sm);
    flex-wrap: wrap;
    margin-bottom: var(--ads-gap-md);
}

.ads-search-input {
    position: relative;
}

.ads-search-input input {
    padding-left: 36px;
}

.ads-search-input i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ads-text-muted);
    font-size: 14px;
}

/* 필터 칩 */
.ads-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--ads-border-strong);
    border-radius: var(--ads-radius-full);
    font-size: 13px;
    color: var(--ads-text-secondary);
    cursor: pointer;
    transition: all var(--ads-transition);
    background: #fff;
}

.ads-filter-chip:hover { border-color: var(--ads-primary); color: var(--ads-primary); }
.ads-filter-chip.active {
    background: var(--ads-primary);
    border-color: var(--ads-primary);
    color: #fff;
}


/* ============================================================
   10. 모달 컴포넌트
   ============================================================ */

.ads-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.ads-modal-overlay.open { display: flex; }

.ads-modal {
    background: #fff;
    border-radius: var(--ads-radius-lg);
    box-shadow: var(--ads-shadow-lg);
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    animation: adsModalIn .2s ease;
}

@keyframes adsModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ads-modal-header {
    padding: 20px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ads-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ads-text);
}

.ads-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ads-radius-sm);
    cursor: pointer;
    color: var(--ads-text-muted);
    border: none;
    background: none;
    font-size: 16px;
}

.ads-modal-close:hover { background: rgba(0,0,0,.05); }

.ads-modal-body { padding: 0 24px 20px; }
.ads-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--ads-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--ads-gap-sm);
}


/* ============================================================
   11. 토글 스위치
   ============================================================ */

.ads-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
}

.ads-toggle input { opacity: 0; width: 0; height: 0; }

.ads-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: var(--ads-transition);
}

.ads-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: var(--ads-transition);
}

.ads-toggle input:checked + .ads-toggle-slider { background: var(--ads-primary); }
.ads-toggle input:checked + .ads-toggle-slider::before { transform: translateX(20px); }


/* ============================================================
   12. 빈 상태 / 알림
   ============================================================ */

.ads-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--ads-text-muted);
}

.ads-empty i { font-size: 36px; margin-bottom: 12px; display: block; color: #ddd; }
.ads-empty p { font-size: 14px; }

/* 인라인 알림 */
.ads-alert {
    padding: 12px 16px;
    border-radius: var(--ads-radius-md);
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--ads-gap-md);
}

.ads-alert.info { background: var(--ads-info-light); color: #0c5460; }
.ads-alert.success { background: var(--ads-success-light); color: #155724; }
.ads-alert.warning { background: var(--ads-warning-light); color: #856404; }
.ads-alert.danger { background: var(--ads-danger-light); color: #721c24; }

.ads-alert i { margin-top: 1px; }


/* ============================================================
   13. 페이지네이션
   ============================================================ */

.ads-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: var(--ads-gap-lg);
}

.ads-pagination a,
.ads-pagination span {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ads-radius-sm);
    font-size: 13px;
    color: var(--ads-text-secondary);
    text-decoration: none;
    transition: all var(--ads-transition);
}

.ads-pagination a:hover { background: rgba(0,0,0,.04); }

.ads-pagination .active {
    background: var(--ads-primary);
    color: #fff;
    font-weight: 600;
}


/* ============================================================
   14. 유틸리티
   ============================================================ */

.ads-flex { display: flex; align-items: center; }
.ads-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ads-flex-end { display: flex; align-items: center; justify-content: flex-end; }
.ads-flex-wrap { flex-wrap: wrap; }
.ads-gap-xs { gap: var(--ads-gap-xs); }
.ads-gap-sm { gap: var(--ads-gap-sm); }
.ads-gap-md { gap: var(--ads-gap-md); }
.ads-gap-lg { gap: var(--ads-gap-lg); }

.ads-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ads-gap-md); }
.ads-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ads-gap-md); }
.ads-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ads-gap-md); }

.ads-mt-sm { margin-top: var(--ads-gap-sm); }
.ads-mt-md { margin-top: var(--ads-gap-md); }
.ads-mt-lg { margin-top: var(--ads-gap-lg); }
.ads-mb-sm { margin-bottom: var(--ads-gap-sm); }
.ads-mb-md { margin-bottom: var(--ads-gap-md); }
.ads-mb-lg { margin-bottom: var(--ads-gap-lg); }

.ads-text-muted { color: var(--ads-text-muted); }
.ads-text-sm { font-size: 12px; }
.ads-text-center { text-align: center; }
.ads-text-right { text-align: right; }
.ads-font-bold { font-weight: 700; }

.ads-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* dev 서버 표시 바 (하단) */
.ads-dev-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ads-danger);
    color: #fff;
    text-align: center;
    padding: 3px 0;
    font-size: 11px;
    font-weight: 700;
    z-index: 99999;
    opacity: .9;
}


/* ============================================================
   15. 레이아웃 오버라이드 (기존 구조 호환)
   ============================================================
   기존 #wrapper > #header > #container > #footer 구조를
   사이드바 레이아웃으로 전환.
   JSP 구조 변경 없이 CSS만으로 처리.
   ============================================================ */

/* 사이드바가 있을 때: 기존 헤더 숨기고, wrapper 재배치 */
body:has(.ads-sidebar) #header {
    display: none !important;
}

body:has(.ads-sidebar) #wrapper {
    padding-top: var(--ads-topbar-height) !important;
    margin-left: var(--ads-sidebar-width);
    min-width: auto !important;
    transition: margin-left var(--ads-transition);
}

body:has(.ads-sidebar) #container {
    padding: var(--ads-gap-lg);
    background: var(--ads-content-bg);
    min-height: calc(100vh - var(--ads-topbar-height));
}

body:has(.ads-sidebar) #footer {
    margin-left: 0;
}

/* 기존 respon 클래스 너비 제한 해제 (사이드바 레이아웃에서) */
body:has(.ads-sidebar) .respon {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* ============================================================
   16. 사이드바 접기/펴기 — 기본 접힘, hover 시 펼침
   ============================================================ */

/* 기본 상태: 접힘 — 높이에 영향주는 속성 일절 변경 안 함 */
.ads-sidebar {
    width: var(--ads-sidebar-collapsed) !important;
    transition: width .25s ease;
}

/* 텍스트: opacity만으로 숨김 (display, font-size, gap 등 레이아웃 속성 변경 없음) */
.ads-sidebar .ads-nav-section-title > span,
.ads-sidebar .ads-nav-item span {
    opacity: 0;
    white-space: nowrap;
    transition: opacity .15s ease;
}
.ads-sidebar .ads-sidebar-user-info {
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity .15s ease;
}
/* 섹션 제목: 줄바꿈 방지 */
.ads-sidebar .ads-nav-section-title {
    white-space: nowrap;
    overflow: hidden;
}
/* 섹션 아이템: 접힘 시 아이콘이 보이도록 패딩 축소 (높이 영향 없음) */
.ads-sidebar .ads-nav-section .ads-nav-item {
    padding-left: 20px;
    transition: padding-left .25s ease;
}
/* 로고: 중앙 정렬 */
.ads-sidebar .ads-sidebar-logo { text-align: center; }
.ads-sidebar .ads-sidebar-logo img { height: 28px; max-width: 36px; object-fit: contain; }

/* hover 시: 펼침 — 너비와 opacity만 변경 */
.ads-sidebar:hover {
    width: var(--ads-sidebar-width) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
}
.ads-sidebar:hover .ads-nav-section-title > span,
.ads-sidebar:hover .ads-nav-item span {
    opacity: 1;
}
.ads-sidebar:hover .ads-sidebar-user-info {
    opacity: 1;
}
.ads-sidebar:hover .ads-nav-section .ads-nav-item {
    padding-left: 44px;
}
.ads-sidebar:hover .ads-sidebar-logo { text-align: left; }
.ads-sidebar:hover .ads-sidebar-logo img { max-width: none; }

/* 콘텐츠 영역: 접힌 너비 기준 */
body:has(.ads-sidebar) #wrapper {
    margin-left: var(--ads-sidebar-collapsed) !important;
}
.ads-topbar {
    left: var(--ads-sidebar-collapsed) !important;
    width: calc(100% - var(--ads-sidebar-collapsed)) !important;
}

/* 설정 페이지의 9탭 서브메뉴만 숨김 (사이드바가 대체) — JS로 처리 */


/* ============================================================
   16. 기존 컴포넌트 글로벌 오버라이드 (Phase 3~6)
   ============================================================
   기존 CSS 클래스를 모던 스타일로 오버라이드.
   개별 JSP 수정 없이 전체 페이지가 리뉴얼됨.
   ============================================================ */

/* --- 컨테이너 --- */
body:has(.ads-sidebar) #container {
    background: var(--ads-content-bg);
    padding: 28px 32px;
    min-height: calc(100vh - var(--ads-topbar-height));
}

/* --- 테이블 리뉴얼 (.basic-tbl) --- */
body:has(.ads-sidebar) .basic-tbl {
    border-top: none;
    background: var(--ads-card-bg);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
    border: 1px solid var(--ads-card-border);
    overflow: hidden;
}

body:has(.ads-sidebar) .basic-tbl thead th {
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ads-text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    background: #f8f9fb;
    border-bottom: 1px solid var(--ads-card-border);
    border-color: var(--ads-card-border);
}

body:has(.ads-sidebar) .basic-tbl th,
body:has(.ads-sidebar) .basic-tbl td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: 14px;
    line-height: 1.5;
}

body:has(.ads-sidebar) .basic-tbl tbody tr:hover {
    background: rgba(40,116,172,.03);
}

body:has(.ads-sidebar) .basic-tbl tbody tr:last-child td {
    border-bottom: none;
}

body:has(.ads-sidebar) .basic-tbl.ver-mini th,
body:has(.ads-sidebar) .basic-tbl.ver-mini td {
    padding: 8px 10px;
    font-size: 13px;
}

/* --- 테이블 (.basic-write-tbl) --- */
body:has(.ads-sidebar) .basic-write-tbl {
    border-top: none;
    background: var(--ads-card-bg);
    border-radius: var(--ads-card-radius);
    border: 1px solid var(--ads-card-border);
    overflow: hidden;
}

body:has(.ads-sidebar) .basic-write-tbl th {
    background: #f8f9fb;
    font-weight: 600;
    font-size: 13px;
    color: var(--ads-text-secondary);
    width: 140px;
    vertical-align: middle;
}

body:has(.ads-sidebar) .basic-write-tbl th,
body:has(.ads-sidebar) .basic-write-tbl td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,.04);
}

/* --- 테이블 (.basic-table) --- */
body:has(.ads-sidebar) .basic-table {
    background: var(--ads-card-bg);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
    border: 1px solid var(--ads-card-border);
    overflow: hidden;
}

body:has(.ads-sidebar) .basic-table thead th {
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ads-text-muted);
    background: #f8f9fb;
    border-bottom: 1px solid var(--ads-card-border);
}

body:has(.ads-sidebar) .basic-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: 14px;
}

body:has(.ads-sidebar) .basic-table tbody tr:hover {
    background: rgba(40,116,172,.03);
}

/* --- 입력 필드 --- */
body:has(.ads-sidebar) input.basic-input {
    height: 38px;
    line-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ads-border-strong);
    border-radius: var(--ads-radius-sm);
    font-size: 14px;
    transition: border-color var(--ads-transition), box-shadow var(--ads-transition);
}

body:has(.ads-sidebar) input.basic-input:focus {
    border-color: var(--ads-primary);
    box-shadow: 0 0 0 3px var(--ads-primary-light);
    outline: none;
}

body:has(.ads-sidebar) select.basic-select {
    height: 38px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--ads-border-strong);
    border-radius: var(--ads-radius-sm);
    font-size: 14px;
    transition: border-color var(--ads-transition);
}

body:has(.ads-sidebar) select.basic-select:focus {
    border-color: var(--ads-primary);
    box-shadow: 0 0 0 3px var(--ads-primary-light);
    outline: none;
}

body:has(.ads-sidebar) textarea.basic-textarea {
    padding: 10px 12px;
    border: 1px solid var(--ads-border-strong);
    border-radius: var(--ads-radius-sm);
    font-size: 14px;
    transition: border-color var(--ads-transition);
}

body:has(.ads-sidebar) textarea.basic-textarea:focus {
    border-color: var(--ads-primary);
    box-shadow: 0 0 0 3px var(--ads-primary-light);
    outline: none;
}

/* --- 버튼 리뉴얼 (.btns) --- */
body:has(.ads-sidebar) .btns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    line-height: 1;
    padding: 0 16px;
    border-radius: var(--ads-radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--ads-transition);
    border: 1px solid var(--ads-border-strong);
}

body:has(.ads-sidebar) .btns:hover {
    filter: brightness(.92);
}

body:has(.ads-sidebar) .btns.size-big {
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: var(--ads-radius-md);
}

body:has(.ads-sidebar) .btns.size-small {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
}

/* --- 라운드 박스 --- */
body:has(.ads-sidebar) .basic-round-box {
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
    padding: 24px;
}

/* --- 대회 카드 목록 --- */
body:has(.ads-sidebar) .tour-list .tour-list-con {
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
    transition: box-shadow var(--ads-transition), transform var(--ads-transition);
}

body:has(.ads-sidebar) .tour-list .tour-list-con:hover {
    box-shadow: var(--ads-shadow-md);
    transform: translateY(-2px);
}

/* --- 대회 타이틀 박스 --- */
body:has(.ads-sidebar) .tour-titbox {
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
    padding: 24px 32px;
}

/* --- 검색 박스 --- */
body:has(.ads-sidebar) .basic-search-box {
    gap: 16px;
    flex-wrap: wrap;
}

body:has(.ads-sidebar) .basic-search-box .search-date {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- 탭 박스 (setting 외 일반용: gameTab, tourTab 등) --- */
body:has(.ads-sidebar) .basic-tab-box.mini-ver {
    display: flex;
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-radius-md);
    overflow: hidden;
    box-shadow: none;
}

body:has(.ads-sidebar) .basic-tab-box.mini-ver .tab-btn {
    font-size: 13px;
    font-weight: 500;
    transition: all var(--ads-transition);
}

body:has(.ads-sidebar) .basic-tab-box.mini-ver .tab-btn.active {
    background: var(--ads-primary);
    color: #fff;
    font-weight: 600;
}

/* --- 페이지네이션 --- */
body:has(.ads-sidebar) .pagination {
    gap: 4px;
    justify-content: center;
    margin-top: 24px;
}

body:has(.ads-sidebar) .pagination .num {
    width: 36px;
    height: 36px;
    line-height: 34px;
    border-radius: var(--ads-radius-sm);
    font-size: 13px;
    transition: all var(--ads-transition);
}

body:has(.ads-sidebar) .pagination .num:not(.active):hover {
    background: var(--ads-primary-light);
    border-color: var(--ads-primary);
    color: var(--ads-primary);
}

body:has(.ads-sidebar) .pagination .num.active {
    background: var(--ads-primary);
    color: #fff;
    border-radius: var(--ads-radius-sm);
}

/* --- h2 타이틀 --- */
body:has(.ads-sidebar) h2.tit-h2 em,
body:has(.ads-sidebar) h2.h2-tit {
    font-size: 18px;
    font-weight: 700;
    color: var(--ads-text);
}

body:has(.ads-sidebar) h1.tit-h1 em {
    font-size: 22px;
    font-weight: 700;
}

/* --- 푸터 --- */
body:has(.ads-sidebar) #footer {
    padding: 20px 32px;
    font-size: 12px;
    color: var(--ads-text-muted);
    border-top: 1px solid var(--ads-border);
}

/* --- 총건수/검색 박스 --- */
body:has(.ads-sidebar) .totalnum-box .total-num {
    font-size: 16px;
    font-weight: 700;
}

/* --- 파일 업로드 --- */
body:has(.ads-sidebar) .file-upload .fu-box {
    gap: 8px;
}

/* --- 체크리스트/라디오 --- */
body:has(.ads-sidebar) ul.checkradio-list {
    gap: 8px 24px;
}

/* --- 대회 조편성 --- */
body:has(.ads-sidebar) .team-box {
    gap: 24px;
}

/* --- 로딩 모달 --- */
body:has(.ads-sidebar) .loading-modal-wrap {
    backdrop-filter: blur(2px);
}

/* --- board-write 클래스 (설정 페이지 등) --- */
body:has(.ads-sidebar) .board-write {
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
    padding: 24px;
}

/* --- 스폰서 소트 --- */
body:has(.ads-sidebar) .sponsor-sort li {
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-radius-md);
    box-shadow: var(--ads-shadow-sm);
    transition: box-shadow var(--ads-transition);
}

body:has(.ads-sidebar) .sponsor-sort li:hover {
    box-shadow: var(--ads-shadow-md);
}

/* --- 주소 모달 --- */
body:has(.ads-sidebar) .modal-address {
    border-radius: var(--ads-radius-lg);
    box-shadow: var(--ads-shadow-lg);
    border: 1px solid var(--ads-card-border);
}

/* --- 전역 링크 스타일 (테이블 내) --- */
body:has(.ads-sidebar) .basic-tbl a:hover,
body:has(.ads-sidebar) .basic-table a:hover {
    color: var(--ads-primary);
}

/* --- point.jsp 등 인라인 카드 스타일 보정 --- */
body:has(.ads-sidebar) .point-setting,
body:has(.ads-sidebar) .point-tab-content {
    background: transparent;
}

body:has(.ads-sidebar) .point-tab-box .point-tab {
    border-radius: var(--ads-radius-sm);
    font-size: 14px;
}

body:has(.ads-sidebar) .point-tab-box .point-tab.active {
    background: var(--ads-primary);
    border-color: var(--ads-primary);
}

/* --- admin-form-section (설정 페이지 폼) --- */
body:has(.ads-sidebar) .admin-form-section {
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-card-radius);
    box-shadow: var(--ads-card-shadow);
    padding: 24px;
}

/* --- 검색폼 include --- */
body:has(.ads-sidebar) .list-top-area {
    margin-bottom: 20px;
}

/* 경기/대회 상세 탭 — 사이드바 레이아웃에서 너비 자동, 줄바꿈 허용 */
body:has(.ads-sidebar) .basic-tab-box {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
}

body:has(.ads-sidebar) .basic-tab-box .tab-btn {
    flex-grow: 0;
    white-space: nowrap;
    padding: 0 16px;
    font-size: 14px;
}

body:has(.ads-sidebar) .list-top-area .basic-search-box {
    background: var(--ads-card-bg);
    border: 1px solid var(--ads-card-border);
    border-radius: var(--ads-card-radius);
    padding: 16px 20px;
    box-shadow: var(--ads-card-shadow);
}