body {
    font-family: 'Malgun Gothic', sans-serif;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    padding: 20px;
}
.container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1, h2 {
    text-align: center;
    color: #2c3e50;
}
hr {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    margin: 40px 0;
}
/* 입력 폼 스타일 */
.form-group {
    margin-bottom: 15px;
}
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="time"],
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #2980b9;
}

/* 목록 스타일 (회의실 관리, 예약 취소 공통 사용) */
.item-list ul {
    list-style-type: none;
    padding: 0;
}
.item-list li {
    padding: 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item-list li:last-child {
    border-bottom: none;
}
.delete-btn {
    background-color: #e74c3c;
    font-size: 12px;
    padding: 5px 10px;
}
.delete-btn:hover {
    background-color: #c0392b;
}

.cancel-btn {
    background-color: #e74c3c;
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap; /* Add this line */
}

.cancel-btn:hover {
    background-color: #c0392b;
}

.delete-btn {
    background-color: #e74c3c;
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap; /* Add this line */
}


.management-btn {
    background-color: #3498db;
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap; /* Add this line */
}

/* 예약 현황 테이블 스타일 */
.reservation-status {
    overflow-x: auto; /* 화면이 작을 때 가로 스크롤 생성 */
}
table {
    width: 100%; /* 👈 이 줄을 삭제하거나 주석 처리하세요! */
    border-collapse: collapse;
    margin-top: 20px;
    /* table-layout: fixed; */ /* (이건 주석/삭제된 상태가 맞습니다) */
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    white-space: nowrap; /* 👈 이 줄을 추가하세요! */
}
th {
    background-color: #f2f2f2;
    white-space: nowrap; /* 시간 줄바꿈 방지 */
}
.room-name {
    font-weight: bold;
    background-color: #f8f9fa;
}
.available {
    background-color: #e8f5e9; /* 사용 가능 */
}
.booked {
    background-color: #ffcdd2; /* 예약됨 */
    font-weight: bold;
}

/* 목록 스타일 (회의실 관리, 예약 취소 공통 사용) */
/*.item-list ul {*/
/*    list-style-type: none;*/
/*    padding: 0;*/
/*    display: flex; !* Flexbox 레이아웃 적용 *!*/
/*    flex-wrap: wrap; !* 자식 요소들이 컨테이너를 벗어나면 다음 줄로 넘김 *!*/
/*    gap: 15px; !* 아이템 사이의 간격 추가 *!*/
/*}*/

/*.item-list li {*/
/*    padding: 12px;*/
/*    border: 1px solid #eee; !* 테두리를 추가하여 각 항목을 구분 *!*/
/*    border-radius: 4px; !* 테두리를 둥글게 처리 *!*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    flex-basis: calc(50% - 8px); !* 한 줄에 2개씩 배치되도록 너비 계산 (gap의 절반 제외) *!*/
/*    box-sizing: border-box; !* 패딩과 테두리를 너비에 포함 *!*/
/*}*/

/* Apply this to the parent li element */
.item-list li {
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex; /* This is already set */
    justify-content: space-between; /* This is already set */
    align-items: center; /* This is already set */
    flex-basis: calc(50% - 8px);
    box-sizing: border-box;
}

/* Add a new rule for the span inside the li */
.item-list li > span {
    flex-grow: 1; /* Allows the span to take up available space */
    overflow: hidden; /* Hides text that overflows */
    text-overflow: ellipsis; /* Adds '...' to overflowing text */
    white-space: nowrap; /* Prevents the span text itself from wrapping */
    margin-right: 10px; /* Adds some space between the text and the button */
}

/* 2개씩 배치되므로 마지막 자식 요소의 아래쪽 테두리는 필요 없습니다. */
.item-list li:last-child {
    border-bottom: 1px solid #eee;
}

/*.delete-btn:hover {*/
/*    background-color: #c0392b;*/
/*}*/

.calendar-table {
    width: 100%;
    border-collapse: collapse; /* 기존 스타일과 동일 */
    margin-top: 20px;
    table-layout: fixed; /* 캘린더 셀 너비를 균일하게 고정 */
}

/* 캘린더 요일(th) 및 날짜(td) 공통 스타일 */
.calendar-table th,
.calendar-table td {
    border: 1px solid #ddd;   /* 기존 스타일과 동일 */
    padding: 10px;
    height: 100px; /* 캘린더 셀의 높이를 지정 */
    text-align: left; /* 날짜를 왼쪽 상단에 배치 */
    vertical-align: top;  /* 날짜를 왼쪽 상단에 배치 */
}

/* 캘린더 헤더(요일) 스타일 */
.calendar-table th {
    background-color: #f2f2f2; /* 기존 스타일과 동일 */
    text-align: center;      /* 요일은 가운데 정렬 */
    font-size: 14px;
    height: auto;            /* 요일 셀 높이는 자동으로 */
    padding: 12px 8px;       /* 기존 스타일 재정의 */
    white-space: normal;     /* 기존 nowrap 재정의 */
}

/* 캘린더 날짜(td) 스타일 */
/* 캘린더 날짜(td) 스타일 */
.calendar-table td {
    font-size: 16px;
    font-weight: 500;

    /* 기존 스타일 (th, td 공통) */
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    vertical-align: top;

    /* ▼▼▼ [수정됨] 높이 및 비율 ▼▼▼ */

    /* height: 100px;  <-- 이 줄을 삭제하거나 주석 처리 */

    height: auto;           /* 높이 자동 설정 */
    aspect-ratio: 1 / 1;    /* 가로:세로 비율을 1:1 (정사각형)로 고정 */
                            /* 4 / 3, 5 / 4 등으로 비율 조절 가능 */

    overflow: hidden;       /* (안전장치) 셀 내용이 넘칠 경우 숨김 */
}


/* ▼▼▼ [새로 추가] <td> 내부 텍스트 말줄임 처리 ▼▼▼ */
/* HTML이 <td class="booked">24<br><small>1층 회의실</small></td>
  와 같은 구조라고 가정합니다.
*/
.calendar-table td small {
    display: block;      /* 블록 요소로 만들어 너비를 100%로 설정 */
    overflow: hidden;    /* 넘치는 텍스트 숨김 */
    white-space: nowrap; /* 텍스트가 길어도 줄바꿈 방지 */
    text-overflow: ellipsis; /* 넘칠 경우 ... 말줄임표 적용 */
}
/* 오늘 날짜 'today' 클래스 스타일 */
.calendar-table td.today {
    background-color: #e8f5e9; /* 기존 CSS의 .available 색상 */
    font-weight: bold;
}

/* 일요일 (첫 번째 th, 첫 번째 td) */
.calendar-table th:first-child,
.calendar-table td:first-child {
    color: #e74c3c; /* 기존 CSS의 .delete-btn 계열 색상 */
}

/* 토요일 (마지막 th, 마지막 td) */
.calendar-table th:last-child,
.calendar-table td:last-child {
    color: #3498db; /* 기존 CSS의 button 계열 색상 */
}

/* 에러 메시지 스타일 */
.error-message {
    color: red;
    font-size: 0.9em;
    /* 평소에는 숨겨 둡니다 */
    display: none;
}

.empty-message {
    text-align: center; /* 텍스트 가로 중앙 정렬 */
    padding: 20px;       /* 보기 좋게 위아래 여백 추가 */
}

/* ▼▼▼ [추가] 월별 컨트롤 정렬용 ▼▼▼ */

.month-controls {
    display: flex;
    justify-content: center; /* 3개 아이템을 그룹으로 묶어 중앙 정렬 */
    align-items: center;     /* 버튼과 셀렉트 박스 높이를 수직 중앙 정렬 */
    gap: 10px;               /* 아이템(버튼, select) 사이의 간격 */
}

/* .month-controls 내부의 .form-group에만 적용 */
.month-controls .form-group {
    margin-bottom: 0; /* 기존에 설정된 하단 여백(15px) 제거 */
}

/* .month-controls 내부의 select에만 적용 */
.month-controls .form-group select {
    width: auto;      /* 기존 width: 100%를 무시하고 내용에 맞게 자동 조절 */
    min-width: 150px; /* 너무 작아지지 않도록 최소 너비 지정 (값은 조절하세요) */
}


.management th {
  background-color: white; /* 배경 흰색 */
  color: black;            /* 글자색 검정 */
}

table th input,
table td input {
  width: 100%;         /* 셀 폭에 맞게 자동 조정 */
  box-sizing: border-box; /* padding, border 포함해서 폭 계산 */
}