/* FearlessDraft.css - 피어리스 룰 관련 스타일 */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap'); /* 커스텀 폰트 불러오기 */

h1 {
  font-family:  sans-serif;
  font-size: 3em;
  background: linear-gradient(90deg, #000000, #f10000);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /* 표준 속성 */
  -webkit-text-fill-color: transparent; /* 일부 오래된 브라우저에서 필요할까봐 정의*/
  text-shadow: 5px 5px 1px rgba(44, 9, 9, 0.1);
  animation: slideIn 1s ease-out;
  margin-left: 20px;
}

#champion-ban-status h2 {
    font-size: 35px; /* 원하는 크기로 설정 */
    font-weight: bold;
    color: #ff0019;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 0; /* 필요시 패딩도 제거 */
}

/* 사이드 그리드 스타일 (h3 위치명) */
.side-grid {
    width: 40px; /* 너비 고정 */
    margin-right: 5px; /* 이미지 그리드와의 간격 */
    align-items: center; /* 텍스트가 중앙에 위치하도록 설정 */
    display: flex;
    padding-top: 40px; /* 텍스트를 아래로 내리기 위해 상단 패딩 추가 */
}

.side-grid h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 2px; /* 모든 외부 여백 제거 */
    padding: 0; /* 내부 여백 제거 */
    text-align: center; /* 텍스트를 왼쪽 정렬 */
}

/* main-container를 Flexbox로 설정하여 좌우 배치 */
#main-container {
    display: flex;
    justify-content: space-between; /* 좌우로 분리 배치 */
    align-items: flex-start;
    max-width: 1000px; /* 필요에 따라 최대 너비 조절 */
    margin: 0 auto; /* 화면 가운데 정렬 */
}

/* 라인별 구분선 스타일 */
.champion-section {
    display: flex;
    align-items: flex-start; /* 세로 정렬 시작 지점 맞춤 */
    border-top: none; /* 상단에 구분선 추가 */
    padding-top: 2px; /* 구분선과 챔피언 그리드 사이의 간격 */
    margin-top: 2px; /* 구분선과 이전 섹션 사이의 간격 */
}

/* 첫 번째 섹션에는 구분선을 제거 */
.champion-section:first-of-type {
    border-top: none;
}


/* champion-ban-status 컨테이너 스타일 */
#champion-ban-status {
    flex-basis: auto; /* 내용에 따라 너비 결정 */
    max-width: 63%; /* 최대 너비를 70%로 제한 */
    background-color: #f4f4f4;
    padding: 5px;
    border-radius: 8px;
}


/* 검색창 스타일 */
#new-champion-name {
    width: 200px;
    padding: 10px;
    font-size: 18px;
    border: 2px solid #000000;
    border-radius: 25px;
    outline: none;
    transition: border 0.3s;
    height: 35px; /* 필요에 따라 높이 조절 */
    box-sizing: border-box; /* padding과 border 포함 */
}

#new-champion-name:focus {
    border-color: #007BFF;
}

.champion-add-remove {
    display: flex;
    align-items: center; /* 버튼들이 가운데 정렬되도록 설정 */
    margin-left: 12px;
}

#add-champion-button {
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
    min-width: 80px; /* 필요에 따라 최소 너비 설정 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    margin-left: 5px;
}

#add-champion-button:hover {
    background-color: #0056b3;
}

/* 초기화 버튼에만 여백 추가 */
#reset-button {
    margin-left: 100px; /* 원하는 여백 크기 설정 */
}

#capture-button {
    margin-left: 0px; /* 원하는 만큼 오른쪽 여백 추가 */
}

/* 액션 버튼 스타일 */
.action-buttons {
    min-width: 80px; /* 필요에 따라 최소 너비 설정 */
    padding: 10px 20px; /* 버튼 내부 여백 설정 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    display: flex;
    align-items: center; /* 캡처 및 초기화 버튼만 수직 정렬 */
    gap: 0px;
}

.action-buttons button {
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.action-buttons button:hover {
    background-color: #218838;
}

/* 챔피언 그리드 */
.champion-grid {
    display: grid;
    grid-template-columns: repeat(12, 90px); /* 6개의 이미지를 한 줄에 표시 (80px 너비로 설정) */
    gap: 2px;
    padding: 0px;
    background-color: #f4f4f4;
    border-radius: 8px;
    width: calc(12 * 90px + 5px * 5); /* 6개 이미지와 간격만큼 너비 제한 */
    min-height: 95px;  /* ✅ 빈 라인도 드롭 가능하도록 바닥 확보 */
    padding: 6px;
}

/* 챔피언 이미지와 텍스트 스타일 */
.champion-display {
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: center;
    background-color: #2c2c2c;
    border: 2px solid #555;
    padding: 0px;
    border-radius: 5px;
    pointer-events: auto; /* 클릭 이벤트가 전달되도록 설정 */
}

.champion-display img {
    width: 90px;
    height: 88px;
    border-radius: 5px;
    object-fit: cover;
    pointer-events: auto; /* 이미지에 클릭 이벤트 전달 */
}

.champion-display span {
    margin-top: 5px;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}

#autocomplete-list {
    position: absolute;
    top: 175px; /* 필요에 따라 위치 조정 */
    background-color: white;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    width: 200px;
}

.autocomplete-item {
    padding: 5px;
    cursor: pointer;
}

.autocomplete-active {
    background-color: #e9e9e9; /* 선택된 항목을 강조 */
}

.autocomplete-item:hover {
    background-color: #e9e9e9;
}

.remove-champion-button {
    display: block;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    margin-top: 5px;
    transition: background-color 0.3s;
}

.remove-champion-button:hover {
    background-color: #c82333;
}

/* =========================
   드래그 앤 드롭 보조 스타일
   ========================= */

/* 드래그 중인 카드 */
.champion-display.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* 드롭 가능 영역 표시 */
.champion-grid.drag-over {
    outline: 2px dashed #888;
    outline-offset: 6px;
}

/* 드래그 중에는 클릭/삭제 방지 (오동작 방지) */
.champion-display.dragging * {
    pointer-events: none;
}

/* 카드가 이동 중일 때 레이아웃 튀는 것 방지 */
.champion-display {
    user-select: none;
}

/* 이미지/텍스트 위에서도 카드(div)가 드래그/클릭을 받도록 */
.champion-display img,
.champion-display span {
  pointer-events: none;
}

.champion-display {
  cursor: grab;
}
.champion-display.dragging {
  cursor: grabbing;
}