    <style>
        /* 공통 스타일 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            padding-top: 20px;
        }
 
        .header {
            background-color: #0056b3;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .nav-links {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .guesthouse-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .form-group label {
            font-weight: bold;
        }
        .btn {
            margin: 5px;
        }
 

        .container {
            max-width: 1100px;
            background-color: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 1px;
        }

        .header, .footer {
            background-color: #005BAC;
            color: white;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }
        .footer {
            background-color: #333;
            margin-top: 20px;
            padding: 3px;
        }
        .table-container {
            overflow: auto;
            max-height: 500px; /* 원하는 높이로 설정 */
        }
        table {
            width: 100%;
            table-layout: fixed; /* 고정 테이블 레이아웃 */
            border-collapse: collapse;
        }
        col {
            width: 80px; /* 각 열의 너비를 200px로 설정 */
        }
        th, td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 10px;
            font-size: 14px; /* 폰트 크기 조정 */
            word-break: break-all; /* 긴 단어 줄바꿈 */
        }
        th {
            position: sticky;
            top: 0;
            background-color: #e9ecef; /* 헤더 배경색 */
            z-index: 1;
        }
        td:first-child {
            position: sticky;
            left: 0;
            background-color: #ffffff; /* 첫 번째 칼럼 배경색 */
            z-index: 2; /* 첫 번째 칼럼이 헤더 위로 오도록 */
        }
        .reserved {
            background-color: #ffeb3b; /* 예약된 셀의 배경색 */
        }
        .weekend {
            background-color: #F5F5F5; /* 주말 셀 배경색 */
        }
        .navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .highlight {
            color: #007bff; /* 원하는 색으로 설정 (예: 파란색) */
            font-weight: bold; /* 강조 효과를 주기 위해 글자 두껍게 설정 */
        }

        .container img {
            width: 100%;        /* 컨테이너의 100% 크기로 설정 */
            max-width: 100%;    /* 컨테이너보다 커지지 않도록 제한 */
            height: auto;       /* 원본 비율 유지 */
            display: block;     /* 불필요한 여백 제거 */
            margin: 0 auto;     /* 가운데 정렬 */
        }

  .status-badge {
    font-size: 1rem;
    font-weight: 500;
  }

    #tasks-info {
           max-width: 800px;
           margin: 0 auto;
     }
    /* 예약 변경 폼 초기 숨김 및 폭 설정 */
    #booking-frame {
      display: none;
      max-width: 800px;
      margin: 20px auto; /* 중앙 정렬 */
    }

/* 테이블 헤더 고정 */
thead tr th {
    position: sticky;
    top: 0;
    background-color: #e9ecef; /* 헤더 배경색 */
    z-index: 10; /* 다른 요소 위에 표시 */
}

/* 첫 번째 칼럼 고정 */
th:first-child, 
td:first-child {
    position: sticky;
    left: 0;
    background-color: #e9ecef; /* 헤더 배경색 */
    z-index: 20; /* 헤더보다 더 높은 우선순위 */
}

/* 헤더의 첫 번째 칼럼(방 번호)도 고정 */
thead tr th:first-child {
    z-index: 30; /* 최상위로 설정 */
}


/* ✅ 체크박스 기본 스타일 (활성/비활성 구분) */
#taskEditToggle {
  cursor: pointer;
  transform: scale(1.2); /* 약간 키움 */
  margin-right: 6px;
}

/* 비활성화 상태일 때 */
#taskEditToggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 레이블 스타일 - 마우스 커서 동기화 */
#taskEditToggle:enabled + label {
  cursor: pointer;
}

#taskEditToggle:disabled + label {
  cursor: not-allowed;
  opacity: 0.6;
}



  /* 요일 헤더 셀 - 배경색을 확실히 적용 */
  .fc .fc-col-header thead .fc-col-header-cell {
    background-color: #e9ecef !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 1.15rem;
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }

  /* 요일 글자 색 개별 지정 (선택적) */
  .fc .fc-col-header thead .fc-day-sun a { color: #ff5252 !important; }
  .fc .fc-col-header thead .fc-day-sat a { color: #448aff !important; }

/* 예약 가능 방 기본 스타일 */
svg polygon[data-status="available"],
svg rect[data-status="available"] {
  fill: rgba(255,255,0,0.2);
  stroke: yellow;
  cursor: pointer;
}

/* 선택된 방 스타일 */
svg polygon.selected,
svg rect.selected {
  fill: rgba(255,165,0,0.3) !important;
  stroke: orange !important;
}


svg polygon[data-status="repair"],
svg rect[data-status="repair"] {
  fill: rgba(255,0,0,0.3);
  stroke: red;
  pointer-events: none;
  cursor: not-allowed;
}

svg polygon[data-status="reserved"],
svg rect[data-status="reserved"] {
  fill: rgba(128,128,128,0.3);
  stroke: gray;
  pointer-events: none;
  cursor: not-allowed;
}


    </style>
