.timeTable_lifeSarang {
  overflow-x: auto;
  margin: 20px 0;
}

.timetable {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-family: "Noto Sans KR", sans-serif;
}
.timetable th{
	width : 111px;
}

.timetable th,
.timetable td {
  border: 1px solid #ccc;
  padding: 8px;
}

.timetable thead th {
  background-color: #f5f5f5;
  white-space: nowrap;
}

.reservationIconWrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right : auto;
}

.reservationIcon {
  font-size: 1rem;
  padding : 3px;
  border-radious : 6px;
}

/* 아이콘별 색상 예시 */
.reservationIcon001 { color: #f39c12; } /* ☆ */
.reservationIcon002 { color: #27ae60; } /* ○ */
.reservationIcon003 { color: #8e44ad; } /* ◇ */
.reservationIcon004 { color: #e74c3c; } /* △ */
.reservationIcon005 { color: #2980b9; } /* ♤ */

/* 줄 띠무늬 배경 */
.timetable tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* 기존 스타일 그대로 유지 후 추가 */
.status-pending {
  background-color: rgba(52, 152, 219, 0.2);
  color: #2980b9;
  font-weight: bold;
}

.status-complete {
  background-color: rgba(231, 76, 60, 0.2);
  color: #c0392b;
  font-weight: bold;
}

/* CSS: modal-overlay 를 absolute 로 동작하도록 변경 */
.modal-overlay {
  display: none;
  position: absolute; /* fixed → absolute */
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  transition: opacity .1s;
  white-space: nowrap;
  z-index: 1000;
}
.modal-overlay.visible {
  display: block;
  opacity: 1;
}
.timetable td.status-pending, .timetable td.status-complete{
	transition : all 0.3s ease;
	
}
.whenDateSelected{
	display : none;
	grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    font-size: 15px;
    font-weight : bold;
}

.timetable td.status-pending:hover,
.timetable td.status-complete:hover {
  background-color: black;
  color: white;
}

.pop_use_calendar .pop_inside .reservation_box .reservation_ul{
	display : none;
}

#modalText {
  display: block;           /* 블록 레벨로 만들어서 너비가 먹히게 */
  max-width: 150px;             /* 고정 너비 */
  white-space: normal;      /* 공백도 기본 흐름대로 */
  overflow-wrap: break-word;/* 단어 중간이라도 넘치면 줄 바꿈 */
  word-break: break-all;    /* 매우 긴 단어도 강제로 줄 바꿈 */
}

td.cell--selected {
  outline: 2px solid #2980b9;
  background-color: rgba(52,152,219,0.2);
}




@media (max-width: 501px) {
  .reservationIconWrapper .reservationText {
    display: none;
  }
  
  .whenDateSelected{
  	gap : 5px;
  	font-size : 12px;
  }
  
  
}