body {
    margin: 0;
    /*font-family: 'Poppins', sans-serif;*/
      /*font-family: "IBM Plex Sans KR", sans-serif;
      font-weight: 500;
      font-style: normal;*/
    font-family: "Noto Sans KR", sans-serif;
    /*font-optical-sizing: auto;*/
    font-size: 15px;
    /*font-weight: <weight>;*/
    font-style: normal;
}
#taskMemo,#routineMemo, input, select {
    font-family: "Noto Sans KR", sans-serif;
    /*font-optical-sizing: auto;*/
    font-size: 15px;
    font-style: normal;
    /*font-weight: <weight>;*/
}

.custom-day-font,
.sidebar,
#navigation-bar {
    /*font-family: "PT Mono", sans-serif;*/ /* Use your preferred font family */
    font-size: 18px;
    font-family: "Inconsolata", monospace;
    /*font-optical-sizing: auto;*/
}
.sidebar,
#navigation-bar {
    font-weight: 500;
}

.container {
    display: flex;
    align-items: stretch; /* Ensure sidebar and main-content have the same height */
}

.sidebar {
    position: sticky;
    top: 0;
    /*left: 0;*/
    width: 250px; /* 고정된 너비 설정 */
    min-width: 190px; /* 최소 너비 설정 */
    max-width: 300px; /* 최대 너비 설정 */
    background-color: #f4f4f4;
    padding: 10px;
    box-sizing: border-box;
    height: 100vh;
}

.main-content {
    flex-grow: 1;
    padding: 20px 20px 60px 20px;
    max-width: 1300px; /* 최대 너비 설정 */
    margin-left: auto; /* 자동 정렬 */
    margin-right: auto; /* 자동 정렬 */
}

.user-info {
    position: absolute; /* Position the user-info section absolutely */
    bottom: 35px; /* Distance from the bottom of the sidebar */
    /*right: 5px;*/
    /*max-width: 50px;*/
    font-size: 12px; /* Make text smaller */
    color: gray; /* Change text color to gray */
    white-space: nowrap; /* Prevent line breaks */
}

.user-info span, .user-info p {
    display: inline; /* Make sure they are inline */
    margin: 0; /* Remove any default margin */
}

.logout-button {
    font-size: 12px; /* Make text smaller */
    color: gray; /* Change text color to gray */
    border: 0px; /* Define border with width, style, and color */
    cursor: pointer;
    display: inline; /* Make sure they are inline */
    font-family: "Inconsolata", monospace;
    font-weight: 500;
    padding: 0 0 0 0;
    background: transparent;
}

.logout-button:hover {
    color: #87CEEB;
    text-decoration: underline;
}

.category {
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    padding-top: 30px;
    padding-bottom: 40px;
}

.side-item {
    padding: 10px;
    cursor: pointer;
    text-align: left;
    position: relative; /* 버튼을 절대 위치로 배치하기 위해 필요 */
    padding-right: 10px; /* 버튼과 텍스트 간의 여백 확보 */
}

.side-item.active {
    background-color: #87CEEB; /* Sky blue */
    color: white;
}

#week-display {
    display: flex;
    align-items: center;
    justify-content: center;
}

#prev-week, #next-week {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    width: 25px;
    padding: 0;
}

#week-info {
    font-weight: bold;
    margin: 0 20px;
}

#side-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#navigation-bar {
    display: flex;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.nav-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #ddd;
    box-sizing: border-box;
    position: relative;
}

.nav-item.active {
    background-color: #87CEEB; /* Sky blue */
    color: white;
}

.nav-item .edit-btn,
.nav-item .delete-btn {
    display: none; /* Initially hidden */
    position: absolute;
    bottom: 0px; /* 하단에 위치 고정 */
    background: transparent;
    border: 0px;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px;
    font-size: 18px;
    text-shadow: -1px 0px white, 0px 1px white, 1px 0px white, 0px -1px white;
}

.nav-item .edit-btn {
    right: 15px;
    bottom: 0px;
    color: #87CEEB;
}

.nav-item .delete-btn {
    right: 0px;
    bottom: 0px;
    color: #f44336;
}

.nav-item:hover .edit-btn,
.nav-item:hover .delete-btn {
    display: inline;
}

.work-edit-btn {
    visibility: hidden;
    margin-left: 5px;
    /*position: absolute;
    top: 50%;
    transform: translateY(-50%);*/
    background: transparent;
    border: 0px;
    cursor: pointer;
    color: #87CEEB;
}
.work-delete-btn,
#clearParent {
    visibility: hidden;
    margin-left: 5px;
    /*position: absolute;
    top: 50%;
    transform: translateY(-50%);*/
    background: transparent;
    border: 0px;
    cursor: pointer;
    color: #f44336;
}
.work-title {
    display: flex;
    cursor: pointer;
    align-items: center; /* 세로 정렬을 가운데로 설정 */
}
.work-title-group {
    display: flex;
    cursor: default;
    align-items: center; /* 세로 정렬을 가운데로 설정 */
}

.work-title:hover .work-edit-btn,
.work-title:hover .work-delete-btn,
.main-task:hover #clearParent {
    visibility: visible;
    /*color: black;*/
}

.work-edit-btn:hover,
.edit-btn:hover {
    color: #4bb1db;
    font-weight: bold;
}

.work-delete-btn:hover,
#clearParent:hover,
.delete-btn:hover {
    color: #d32f2f;
    font-weight: bold;
}

#list-detail {
    display: flex;
    flex-direction: row; /* Side by side layout for left and right panels */
    width: 100%;
    /*height: 100%;*/
}

.left-panel,
.right-panel {
    width: 50%;
    padding: 12px 20px 0px 20px;
    box-sizing: border-box;
}

.task-input {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

.work-input {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.group-input {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

.routine-input,
.task-input{
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#taskInput, #workInput, #groupInput, #routineInput {
    flex: 1;
    padding: 7px 10px 10px 10px;
    font-size: 15px;
    /*padding: 5px 10px 8px 10px; *//* Padding inside inputs */
    border: 1px solid #ccc; /* Border for inputs/selects */
    border-radius: 4px; /* Rounded corners */
}

#addTaskButton, #addWorkButton, #addGroupButton, #addRoutineButton {
    background-color: #87CEEB; /* Sky blue */
    color: white;
    width: 80px;
    padding: 7px 10px 10px 10px;
    /*padding: 10px 20px;*/ /* Add padding */
    border: none; /* Remove border */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block for alignment */
    font-size: 15px;
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
}
#addGroupButton, #addRoutineButton {
    font-size: 14px;
}
.group-checkbox-container {
    display: flex; /* 내부 요소들을 플렉스로 배치 */
    align-items: center; /* 세로 중앙 정렬 */
    margin-left: auto; /* 오른쪽 끝으로 밀기 */
}

.group-checkbox {
    margin-right: 10px; /* 버튼과 체크박스 사이 간격 설정 */
}
.routineToListBtn {
    background-color: white;
    color: #87CEEB;
    border: solid 1px #87CEEB;
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block for alignment */
    border-radius: 5px; /* Rounded corners */
    font-size: 10px;
    /*letter-spacing: -0.5px;*/
    font-weight: 700;
    width: 80px;
    padding: 6px 3px 6px 3px; /* 패딩을 통일성 있게 설정 */
    cursor: pointer;
}
#addTaskButton:hover, #addWorkButton:hover, #addGroupButton:hover, #addRoutineButton:hover {
    background-color: #4bb1db;
    color: white;
}
.routineToListBtn:hover {
    background-color: #87CEEB;
    color: white;
}
#taskList, #daysList, #assignedToMeList {
    list-style: none;
    padding: 0;
}

#taskList {
    margin-top: 2px;
}

#taskList li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    cursor: default;
    /*cursor: pointer;*/
}

.group-checkbox input[type="checkbox"] {
    margin-right: 10px;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #b7e1f3   ;
}

#rememberMe {
    accent-color: #b7dfb9;
}

ul, ol {
    list-style-type: none;
}

ul {
    padding-inline-start: 0px;
}

.days-list {
    margin-top: 20px;
}

#daysList li {
    margin-bottom: 5px;
    cursor: default;
    /*cursor: pointer;*/
}

#assignedToMeList li {
    margin-bottom: 5px;
    cursor: default;
    /*cursor: pointer;*/
}

.task-detail {
    border: 1px solid #ccc;
    padding: 5px 20px 20px 20px;
    background-color: #f9f9f9;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 70px); /* 화면의 높이에 맞춰 최대 높이 설정 */
    overflow-y: auto; /* 내용이 넘칠 때만 수직 스크롤 추가 */
    /*border: none;*/
    border-radius: 5px; /* Rounded corners */
}


.task-detail h2 {
    margin: 0 0 20px 0;
}

.task-detail-content {
    display: flex;
    flex-direction: column;
}

.task-detail-content label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.task-detail-content input,
.task-detail-content textarea,
.task-detail-content select {
    /*margin-left: 10px; *//* Adjust to space out label and input *//*
    padding: 10px;
    font-size: 16px;*/
        /*flex: 1;*/
    margin-right: 5px;
    padding: 5px 10px 8px 10px;
    font-size: 15px;
}

/*.task-detail-content button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 10px; *//* Space between buttons *//*
}*/
/* Ensure the buttons are next to each other */
.button-container {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right (or center as needed) */
    gap: 10px; /* Space between buttons */
    margin-top: 20px; /* Add space above the buttons */
}
/* Save button styling */
#saveChangesButton {
    background-color: #87ceeb; /* Green background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block for alignment */
    font-size: 15px;
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
}

#saveChangesButton:hover {
    background-color: #45a049; /* Darker green on hover */
}

.confirmDel {
    background-color: #f44336; /* Red background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block for alignment */
    font-size: 15px;
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
    margin-right: 10px; /* Space between buttons */
}

.confirmDel:hover {
    background-color: #d32f2f; /* Darker red on hover */
}

.cancelDel {
    background-color: #ccc; /* Gray background */
    color: black; /* Black text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block for alignment */
    font-size: 15px;
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
}

.cancelDel:hover {
    background-color: #aaa; /* Darker gray on hover */
}

#saveCloseButton {
    background-color: #ccc; /* Gray background */
    color: black; /* Black text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block for alignment */
    font-size: 15px;
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
}

#warningCloseButton {
    background-color: #ccc; /* Gray background */
    color: black; /* Black text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block for alignment */
    font-size: 15px;
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
}

#saveCloseButton:hover {
    background-color: #aaa; /* Darker gray on hover */
}

/* Delete button styling */
#deleteConfirmationButton {
    background-color: #f44336; /* Red background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block for alignment */
    font-size: 15px;
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
}

#deleteConfirmationButton:hover {
    background-color: #d32f2f; /* Darker red on hover */
}

/* Container for label and input pairs */
.input-group {
    display: flex;
    align-items: flex-start; /* Align items vertically centered */
    margin-top: 5px; /* Space between each group */
}

/* Style labels for horizontal alignment */
.input-group label {
    padding-top: 6px;
    margin-right: 10px; /* Space between label and input */
    flex-shrink: 0; /* Prevent labels from shrinking */
    min-width: 120px; /* Minimum width for labels (adjust as needed) */
}

/* Style inputs and selects */
.input-group input,
.input-group select,
.input-group textarea,
.routine-input select,
.task-input select {
    flex: 1; /* Allow inputs/selects to take up remaining space */
    padding: 5px 10px 8px 10px;
    font-size: 15px;
    border: 1px solid #ccc; /* Border for inputs/selects */
    border-radius: 4px; /* Rounded corners */
}

.status-radio-group {
    display: flex;
    flex-wrap: wrap; /* Wrap to next line if needed */
    gap: 10px; /* Space between radio buttons */
    margin-top: 1px; /* Space above the status group */
}

.status-select-group label {
    display: flex;
    align-items: center; /* Align radio button and text vertically */
    font-size: 15px;
}

.date-group {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}

.date-group input[type="date"] {
    flex: 1;
    margin-right: 5px;
    padding: 5px 10px 8px 10px;
    font-size: 15px;
}

#doDatesContainer input[type="date"] {
    flex: 1;
    margin-right: 5px;
    padding: 5px 10px 8px 10px;
    font-size: 15px;
    margin-bottom: 3px;
}

#doDatesContainer input[type="text"] {
    flex: 1;
    margin-right: 5px;
    padding: 5px 10px 8px 10px;
    font-size: 15px;
    margin-bottom: 3px;
}

#dueDate {
    flex: 1;
    margin-right: 5px;
    padding: 5px 10px 8px 10px;
    font-size: 15px;
}

.date-group .date-button {
    background: #f1f1f1;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    color: #333;
}

.date-group .date-button.remove {
    background: #FFFFFF; /* A vibrant green color */
    color: #404040;
    border: none;
    border-radius: 50%; /* Ensures the button is circular */
    width: 20px; /* Smaller width */
    height: 20px; /* Smaller height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px; /* Adjust font size to fit the smaller button */
    margin-left: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0.2, 0.2); /* Subtle shadow for depth */
    transition: background 0.3s, transform 0.2s; /* Smooth transition effects */
    margin-bottom: 4px;
}

.date-group .date-button.add {
    background: #81c784; /* Green for add */
    color: white;
}

.date-group .date-button:hover {
    background: #ddd;
}

.date-group .date-button.remove:hover {
    background: #fa6c61; /* Darker red on hover */
}

.date-button.add:hover {
    background: #66bb6a; /* Darker green on hover */
}

#doDatesContainer {
    /*margin-top: 10px;*/
}

#addDateButton,
#addSubTaskButton {
    background: #FFFFFF; /* A vibrant green color */
    color: #404040;
    border: none;
    border-radius: 50%; /* Ensures the button is circular */
    width: 20px; /* Smaller width */
    height: 20px; /* Smaller height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px; /* Adjust font size to fit the smaller button */
    margin-left: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0.2, 0.2); /* Subtle shadow for depth */
    transition: background 0.3s, transform 0.2s; /* Smooth transition effects */
}

#addDateButton:hover,
#addSubTaskButton:hover {
    background: #6bc76f; /* Lighter green on hover */
}

#addDateButton:active,
#addSubTaskButton:active {
    transform: scale(0.9); /* Slightly scale down on click */
}

.task-item {
    display: flex;
    align-items: center; /* Align items vertically */
    padding: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.day-item {
    display: flex;
    align-items: center; /* Align items vertically */
    padding: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.task-item input[type="checkbox"] {
    margin-right: 10px;
}

.task_content {
    font-size: 15px;
    margin-right: 5px;
    cursor: pointer;
}

.parent_task_content {
    font-size: 15px;
    margin-right: 5px;
    color: #87CEEB;
    cursor: pointer;
}

.hamburger-icon {
    /*display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);*/
    font-size: 15px;
    margin-right: 10px;
    cursor: move;
}

.non-hamburger-icon {
    font-size: 15px;
    margin-right: 10px;
    cursor: default;
}

.work_name {
    color: #87CEEB; /* Light sky blue color */
    margin-right: 5px;
}

.due_date {
    /*color: lightblue;*/ /* Light sky blue color */
}

.task_done {
    color: OrangeRed;
}

.task_done,
.work_name,
.due_date {
    font-size: 0.8em;
}

.task-status-completed {
    text-decoration: line-through; /* Adds a strikethrough */
    color: grey; /* Optional: Change text color to grey */
    opacity: 0.7; /* Optional: Make the text slightly transparent */
}

#notificationContainer {
    position: fixed;
    top: 130px;
    right: 10px;
    z-index: 1000; /* Ensure notifications appear above other content */
}

.notification {
    background-color: #4CAF50; /* Green for success */
    color: white;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 15px;
    opacity: 1;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transform: translateY(-20px);
}

.notification.success {
    background-color: #4CAF50; /* Green for success */
}

.notification.delete {
    background-color: #f44336; /* Red for delete */
}

.notification.error {
    background-color: #f44336; /* Red for errors */
}

.notification.hide {
    opacity: 0;
    transform: translateY(0);
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#addUserModal{
    z-index: 2; /* Sit on top */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Center the modal */
    padding: 20px;
    border: 1px solid #888;
    width: 300px; /* Width of the modal */
    text-align: center;
    border-radius: 10px; /* Rounded corners */
    font-size: 15px;
}

.modal-content h2 {
    font-size: 20px;
    margin-bottom: 15px;
}

.modal-content p {
    margin-bottom: 20px;
}

#today-button {
    background-color: white; /* 배경색 흰색 */
    color: #87CEEB; /* 글자색 하늘색 */
    font-family: "Inconsolata", monospace;
    border: 2px solid #87CEEB; /* 하늘색 테두리 */
    border-radius: 15px; /* 둥근 모서리 */
    padding: 1px 6px; /* 버튼 내부 여백 */
    font-size: 15px; /* 글자 크기 조정 */
    font-weight: bold;
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
    position: absolute; /* 절대 위치 */
    right: 8px; /* 오른쪽에서 10px 여백 추가 */
    top: 50%; /* 세로 중앙 정렬 */
    transform: translateY(-50%); /* 정확한 중앙 정렬을 위해 사용 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 배경색과 글자색 변환 애니메이션 */
}

#today-button:hover {
    background-color: skyblue; /* 마우스 오버 시 배경색 하늘색 */
    color: white; /* 마우스 오버 시 글자색 흰색 */
}

#saveChangesButton {
    display: none;
}
.empty-placeholder {
    color: grey;
    font-size: 0.8em; /* 작은 글씨 */
    text-align: center; /* 텍스트 중앙 정렬 */
    pointer-events: none; /* 상호작용 비활성화 */
    cursor: default !important; /* 기본 커서 모양 강제 적용 */
}


/* Align labels and inputs vertically */
.login-form-group {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    margin-bottom: 10px;
}

.loginLabel, .addUserLabel {
    margin-bottom: 5px; /* Space between label and input */
    text-align: left;
}

input#username, input#password,
input#newusername, input#newpassword,
input#confirmpassword, input#adminpassword {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    max-width: 300px; /* Input width limited to 300px */
}

/* Left-align Remember Me checkbox and label */
.login-form-remember {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.login-form-remember label {
    margin-left: 5px;
}

/* Button styling */
button#loginSubmit, button#addUserSubmit {
    background-color: #4CAF50; /* Green for Login */
    color: white;
    border: none;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px; /* Rounded corners */
    width: 100%; /* Match the width of the inputs */
    max-width: 300px; /* Same max-width as inputs */
    box-sizing: border-box;
    margin-top: 10px;
    height: 40px;
}

button#loginSubmit:hover, button#addUserSubmit:hover, {
    background-color: #45a049;
}

/* Gray color for other buttons */
button#addUser, button#developerAccount {
    background-color: #adadad; /* Gray color for other buttons */
    color: white;
    border: none;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px; /* Rounded corners */
    width: calc(50% - 4px); /* Equal width */
    box-sizing: border-box;
    height: 40px;
}

button#addUser:hover, button#developerAccount:hover {
    background-color: #bbb; /* Darker gray on hover */
}

/* Center Login button */
.login-button-group {
    display: flex;
    justify-content: center; /* Center Login button */
    margin-bottom: 8px;
}

/* Inline buttons with equal width */
.login-button-group-inline {
    display: flex;
    justify-content: center; /* Center inline buttons */
    gap: 8px; /* Space between buttons */
    max-width: 300px; /* Total width same as Login button */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#overdue .task_content,
#overdue .work_name {
    color: OrangeRed;
}

#assigned .task_content,
#assigned .work_name {

}
#assignedToMeList {
    background-color: #f0f0f0; /* 연한 회색 배경 */
    padding: 10px; /* 안쪽 여백 */
    border-radius: 5px; /* 모서리를 둥글게 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 미세한 그림자 효과 */
    list-style-type: none; /* 기본 목록 스타일 제거 */
}
.disabled-label {
     color: #b0b0b0; /* 비활성화된 레이블 색상 */
     cursor: not-allowed; /* 커서를 변경하여 비활성화된 느낌 강조 */
}

.disabled-style {
    opacity: 0.8; /* 요소를 흐리게 처리 */
    pointer-events: none; /* 마우스 이벤트 차단 (클릭 불가) */
    background-color: #f0f0f0; /* 배경을 회색으로 */
    color: #a0a0a0; /* 텍스트 색상 회색으로 */
    cursor: not-allowed; /* 마우스 커서를 '금지' 모양으로 */
}

#subTasksContainer,
#mainTask,
#clearParent {
    padding: 6px 0px 0px 0px;
    cursor: pointer;
}

#mainTask {
    font-weight: bold;
}

.sub-tasks-group {
    display: block;
}

#subTasksContainer input {
    /*flex:1;*/
    width: 100%; /* 부모 컨테이너의 전체 너비를 차지 */
    box-sizing: border-box; /* 패딩과 테두리를 너비 안에 포함시킴 */
    margin-right: 20px;
    padding: 5px 10px 8px 10px;
}
.hidden {
    display: none; /* 숨김 */
}
.new-sub-input {
    margin-top: 5px;
}

#routineDateSelects {
    display: flex;
    gap: 10px; /* 월과 일 사이의 간격 조절 */
}

#routineDateSelects select {
    width: auto; /* 선택 박스의 크기를 자동으로 조정 */
}

#routineCycle {
    width: 100px;
    min-width: 60px;
    margin-right: 10px;
}

#routineThisNext {
    display: inline-flex;
    justify-content: space-around; /* 라벨들이 그룹 내에서 고르게 배치되도록 */
    align-items: center;
    width: auto; /* 너비 자동 조정 */
}

#routineThisNext label {
    margin-right: 10px; /* 라벨 사이 간격 줄이기 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    min-width: 60px;
}

#routineThisNext input[type="radio"] {
    margin-right: 6px; /* 라디오 버튼과 라벨 텍스트 사이 간격 줄이기 */
}

.hide-completed-tasks {
    display: flex;
    justify-content: flex-end; /* 오른쪽 정렬 */
    align-items: center;
}

#hideCompletedTasks {
    width: 12px;  /* 체크박스 크기 조절 */
    height: 12px;
    margin-right: 3px;
}

.hideCompletedLabel {
    font-size: 12px; /* label의 글자 크기 조절 */
}

#groupContentForInput,
#workNameForInput {
    /*flex: 0.3;*/
    width: 48px;
/*    min-width: 80px; *//* 최소 너비 설정 *//*
    max-width: 300px; *//* 최대 너비 설정 */
}
.disabled-style {
    pointer-events: none; /* 마우스 이벤트 차단 (클릭 및 hover 불가) */
    cursor: not-allowed; /* 마우스 커서를 '금지' 모양으로 */
}