/* assets/css/draft.css */

/* 1. 전체 레이아웃 (강제 고정) */
.page-content-container.draft-layout {
    display: flex;
    gap: 20px;
    height: calc(100vh - 80px) !important;
    overflow: hidden !important;
    padding: 20px !important;
    align-items: stretch;
}

/* 2. 왼쪽 팀 섹션 */
.teams-section {
    flex: 1;
    overflow-y: auto !important;
    height: 100% !important;
    padding-right: 10px;
    padding-bottom: 50px;
}
.teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* 팀 카드 */
.team-card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; min-height: 220px; flex-shrink: 0;
}
.team-header {
    padding: 12px 15px;
    background-color: var(--bg-hover);
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
}
.team-name { font-weight: bold; color: var(--accent-gold); font-size: 16px; }
.team-count { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.team-cost { 
    font-size: 13px; color: var(--text-muted); 
    background: var(--bg-main); 
    padding: 4px 8px; border-radius: 6px;
}
.team-cost b { color: var(--accent-gold); }

.team-slots {
    flex: 1; padding: 15px; display: flex; flex-direction: column; gap: 8px;
    background-color: var(--bg-panel);
    transition: background-color 0.2s;
    
    /* 그리드 배치 */
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start;
}
.team-slots.drag-over { background-color: var(--accent-gold-dim); }
.team-slots.full.drag-over { background-color: rgba(255, 71, 87, 0.15); cursor: not-allowed; }

/* 3. 오른쪽 대기실 */
.pool-section {
    width: 360px;
    background-color: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    display: flex; flex-direction: column; flex-shrink: 0; border-radius: 8px;
    height: 100% !important; overflow: hidden !important;
}
.section-header {
    padding: 20px; border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-hover); flex-shrink: 0;
}
.section-header h3 { margin: 0; font-size: 16px; color: var(--text-main); font-weight: 700; }

.pool-tiers-scroll {
    flex: 1; overflow-y: auto !important; min-height: 0;
    padding: 15px; display: flex; flex-direction: column; gap: 15px;
}

/* 티어 박스 */
.tier-group-box {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.tier-header {
    padding: 10px 15px; font-weight: 800; font-size: 14px;
    background-color: var(--bg-hover);
    border-bottom: 1px solid var(--border-color);
    border-left: 4px solid transparent;
    color: var(--text-main); /* 기본 글자색 */
}
/* 티어별 색상 */
.tier-header.sss { border-left-color: var(--tier-sss); color: var(--tier-sss); }
.tier-header.ss { border-left-color: var(--tier-ss); color: var(--tier-ss); }
.tier-header.s { border-left-color: var(--tier-s); color: var(--tier-s); }
.tier-header.a { border-left-color: var(--tier-a); color: var(--tier-a); }
.tier-header.b { border-left-color: var(--tier-b); color: var(--tier-b); }
.tier-header.c { border-left-color: var(--tier-c); color: var(--tier-c); }
.tier-header.d { border-left-color: var(--tier-d); color: var(--tier-d); }
.tier-header.f { border-left-color: var(--tier-f); color: var(--tier-f); }
.tier-header.unranked { border-left-color: #555; color: var(--text-muted); }
.tier-header.chicken {border-left-color: #f5f6fa; color: var(--tier-chicken); }
.tier-header.stick {border-left-color: #8d6e63; color: var(--tier-stick); }

.tier-body-pool {
    padding: 10px; background-color: var(--bg-panel);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; min-height: 40px;
}
.tier-body-pool.drag-over { background-color: var(--bg-hover); }

/* 선수 칩 (공통) */
.player-chip {
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: grab; user-select: none; transition: 0.2s; position: relative; overflow: hidden;
}
.player-chip:hover { border-color: var(--accent-gold); background-color: var(--bg-panel); transform: translateY(-2px); }
.player-chip:active { cursor: grabbing; }

.chip-img-box {
    width: 50px; height: 50px; background-color: var(--bg-main);
    border-radius: 8px; margin-bottom: 8px; overflow: hidden;
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
}
.chip-img-box img { width: 100%; height: 100%; object-fit: cover; }
.chip-img-box i { font-size: 24px; color: var(--text-muted); }

.chip-info { text-align: center; width: 100%; }
.chip-name { display: block; font-size: 13px; font-weight: bold; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-meta { display: flex; justify-content: center; gap: 4px; margin-top: 4px; font-size: 11px; }
.chip-tier { color: var(--accent-gold); font-weight: 800; }
.chip-cost { color: var(--text-muted); }

/* 컨트롤 버튼 */
.draft-controls { display: flex; gap: 8px; align-items: center; }
.team-control-group { display: flex; gap: 5px; margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--border-color); }
.btn-control {
    border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 6px;
    cursor: pointer; font-weight: 600; font-size: 13px;
    display: flex; align-items: center; gap: 6px; color: white; transition: 0.2s;
}
/* assets/css/draft.css - 맨 아래에 추가/수정 */

/* =========================================
   버튼 그룹 디자인 (통일감 부여)
   ========================================= */
.control-group {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 오른쪽 정렬 */
    gap: 8px; /* 버튼 사이 간격 */
    flex-wrap: wrap; 
    margin-bottom: 20px;
}

/* ★ 모든 버튼 공통 스타일 (크기 강제 통일) */
.btn-control {
    height: 42px; /* 높이 통일 */
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    
    font-size: 14px;
    font-weight: 700;
    color: white;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* 눌렀을 때 효과 */
.btn-control:active {
    transform: translateY(2px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* 호버 효과 (밝게) */
.btn-control:hover {
    filter: brightness(1.1);
}

/* --- ★ 기존 색상 복구 --- */

/* 1. 팀 추가/삭제 */
.btn-add-team { background-color: #16a085; }
.btn-remove-team { background-color: #c0392b; }

/* 2. 자동 배정 (Magic) */
.btn-magic { 
    background-color: #8e44ad; 
    border-color: #9b59b6; 
}

/* 3. 복사 */
.btn-copy { background-color: #2980b9; }

/* 4. 초기화 */
.btn-reset { background-color: #2c3e50; }

/* 5. [신규] 저장 버튼 (눈에 띄게 주황색) */
.btn-save-team {
    background: linear-gradient(135deg, #f39c12, #d35400);
    border: 1px solid rgba(255,255,255,0.2);
}

/* 비활성화 상태 */
.btn-control:disabled {
    background: #7f8c8d;
    color: #bdc3c7;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* 스크롤바 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }