body {
    margin: 0;
    display: flex;
    /* [수정] 높이를 무조건 100vh로 고정하는 대신, 최소 높이로 설정하여 내용이 많아지면 화면이 아래로 늘어나게 합니다. */
    min-height: 100vh; 
    background-image: url("../images/maple_bg.jpg");
    background-size: cover;
    background-position: center;
    /* 배경 이미지가 스크롤할 때 끊기지 않고 화면에 고정되도록 만듭니다. */
    background-attachment: fixed; 
    font-family: Arial;
}
.sidebar {
    width: 300px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    /* [추가] 왼쪽 메뉴가 너무 길어지거나 화면 높이가 낮아지면 사이드바 자체에 스크롤바가 생기도록 안전장치를 둡니다. */
    box-sizing: border-box;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.sidebar button{

    width:100%;

    height:60px;

    border:none;

    border-radius:10px;

    background:#d9d9d9;

    font-size:20px;

    cursor:pointer;

    transition:0.2s;
}

.sidebar button:hover{

    transform:translateX(5px);
}

.content {
    flex: 1;
    margin: 20px;
    border-radius: 20px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    
    /* [추가] 내용물(보스+시즌미션 리스트)이 아무리 길어져도 하얀 박스가 내용물을 감싸며 아래로 자연스럽게 늘어나도록 설정합니다. */
    height: fit-content; 
    box-sizing: border-box;
}

.menu-title{

    text-align:center;

    margin-bottom:15px;

    font-weight:bold;

    color:#ffdd55;

    font-size:20px;
}
.event-button{

    padding:0;

    border:none;

    background:none;

    cursor:pointer;
}

.event-button img{

    width:250px;

    border-radius:10px;

    transition:0.2s;
}

.event-button img:hover{

    transform:scale(1.03);

    box-shadow:0 0 15px rgba(255,255,255,0.5);
}
.section-header {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
.section-header h3 {
    margin: 0;
}
.select-all-label {
    font-size: 14px;
    margin-left: 15px;
    font-weight: normal;
    cursor: pointer;
    background: #eee;
    padding: 3px 8px;
    border-radius: 5px;
    transition: 0.2s;
}
.select-all-label:hover {
    background: #ddd;
}

/* 보스 테이블 스타일 */
.boss-table {
    width: 100%;
    max-width: 600px; /* 너무 퍼지지 않게 적당한 너비 제한 */
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 15px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden; /* 라운드 코너 짤림 방지 */
}

.boss-table th {
    background-color: #333333;
    color: #ffdd55; /* 메이플 느낌의 노란 포인트 컬러 */
    font-weight: bold;
    padding: 10px;
    text-align: center;
    border: 1px solid #444;
}

.boss-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: middle;
}

/* 첫 번째 열(체크박스)과 세 번째 열(코인)은 가운데 정렬 */
.boss-table td:first-child,
.boss-table td:last-child {
    text-align: center;
}

/* 마지막 열 코인 글자 강조 */
.boss-table td:last-child {
    font-weight: bold;
    color: #2c3e50;
}

/* 마우스 올렸을 때 행 하이라이트 효과 */
.boss-table tbody tr:hover {
    background-color: #f9f9f9;
}

/* 글자 클릭해도 체크박스 켜지도록 label 범위 확장 */
.boss-table td label {
    display: block;
    width: 100%;
    cursor: pointer;
}/* MAX 버튼 스타일 */
.max-btn {
    background-color: #ffdd55;
    color: #333;
    border: 1px solid #cca100;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
}

.max-btn:hover {
    background-color: #ffea88;
}

.max-btn:active {
    background-color: #e6c229;
}