/* ===== 기본 초기화 및 폰트 설정 ===== */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: #f8f9fa; font-family: "Pretendard", sans-serif; color: #1a1a1b; }

/* 사이드 네비게이션 */
.side-nav {
    position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 12px; z-index: 1000;
}
.nav-item {
    width: 52px; height: 52px; background: #ffffff; border: 1px solid #eceef0; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: all 0.2s ease; font-size: 20px;
}
.nav-item.active { background: #1a1a1a; color: #ffffff; border-color: #1a1a1a; }

/* 메인 컨테이너 */
.container { max-width: 700px; margin: 40px auto; background: #ffffff; border: 1px solid #eceef0; border-radius: 24px; padding: 35px; }
h1 { margin: 0 0 25px; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }

/* 탭 버튼 */
.tab-container { display: flex; gap: 8px; margin-bottom: 20px; padding: 6px; background: #f1f3f5; border-radius: 14px; }
.tab-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 14px; background: transparent; color: #868e96; }
.tab-btn.active { background: #ffffff; color: #1a1a1a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

/* 버튼 및 입력창 */
input { padding: 12px 16px; border: 1px solid #efefef; border-radius: 12px; outline: none; background: #f9f9f9; width: 100%; margin-bottom: 10px; }
.btn-blue { background: #1a1a1a; color: #ffffff; border: none; border-radius: 12px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
.btn-black { background: #1a1a1a; color: #ffffff; border: none; border-radius: 12px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.btn-gray-small, .btn-red-small { border-radius: 8px; padding: 6px 12px; border: none; cursor: pointer; font-weight: 600; font-size: 13px; }
.btn-gray-small { background: #f1f3f5; color: #495057; }
.btn-red-small { background: #fff0f0; color: #ff4d4f; }
.btn-gray-mini, .btn-red-mini { border-radius: 6px; padding: 5px 10px; font-size: 12px; border: none; cursor: pointer; font-weight: 600; }
.btn-gray-mini { background: #f1f3f5; color: #495057; }
.btn-red-mini { background: #fff0f0; color: #ff4d4f; }

/* 카드 레이아웃 (수정/삭제 나란히 배치) */
.team { border: 1px solid #f1f3f5; border-radius: 20px; margin-bottom: 25px; overflow: hidden; background: #fff; }
.team-header, .player-header { padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; }
.team-header div, .player-header div { display: flex; gap: 6px; }

.player { border: 1px solid #f1f3f5; border-radius: 16px; margin: 15px; padding: 18px; background: #fff; }
.item { background: #f8f9fa; border-radius: 14px; padding: 15px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.item-btns { display: flex; gap: 6px; }

/* 모달 */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.modal.hidden { display: none; }
.modal-box { background: #ffffff; padding: 35px; border-radius: 28px; width: 350px; }