/* =====================================================================
   동료 시간표(#work): [달력] [카테고리] [동료 시간표] 세 영역을 각각 카드로 분리
   - 색은 theme.css / dark.css 의 변수를 따라가므로 라이트·다크 모두 적용됨
   - index.html 에서 theme.css 다음 줄에 이 파일을 연결하세요.
   ===================================================================== */

/* 1) 달력 영역 (#work 바로 아래 div 중 툴바·입력창·라디오·목록이 아닌 것) */
#work > div:not(.toolbar):not(#personal):not(.radio-group):not(#todos) {
    margin: 6px 6px 0;
    border-radius: 20px;
    overflow: hidden;                       /* 안쪽 노란 머리글이 둥근 모서리에 맞게 잘림 */
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    background: var(--card);
}
#work .Calendar { border-radius: 0 !important; box-shadow: none !important; }

/* 2) 카테고리(반원/동기/모임/기타) 영역 */
#work .radio-group {
    margin: 6px 6px 0;
    width: auto !important;
    padding: 4px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    background: var(--card);
}

/* 3) 동료 시간표 목록 영역 */
#work #todos {
    margin: 6px 6px 16px !important;
    width: auto !important;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
}
#work .work-list-table { border-radius: 0; }

/* 카드 안으로 들어가 폭이 줄었으므로 라벨 안쪽 여백을 줄여 "반원"이 줄바꿈되지 않게 */
#work .radio-item label { padding: 12px 2px 12px 30px !important; white-space: nowrap; border-color: transparent !important; border-radius: 12px; }
#work .radio-item label::after { left: 6px !important; }

/* ===== 달력 + 카테고리를 하나의 카드로 합치기 (시간표 목록만 따로 떨어짐) ===== */
#work > div:not(.toolbar):not(#personal):not(.radio-group):not(#todos) {
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    box-shadow: 0 -1px 2px rgba(25,25,25,.04), 0 -4px 14px rgba(25,25,25,.04);   /* 위쪽에만 그림자 */
}
#work .radio-group {
    margin-top: 0;
    border-radius: 0 0 20px 20px;
    border-top: 1px solid var(--line);          /* 달력과 카테고리 사이 얇은 구분선 */
    box-shadow: 0 6px 14px rgba(25,25,25,.05);  /* 아래쪽에만 그림자 */
}
html.dark-mode #work > div:not(.toolbar):not(#personal):not(.radio-group):not(#todos),
html.dark-mode #work .radio-group { box-shadow: none; }

/* '수정' 입력창이 열려 있을 땐 달력 카드와 카테고리 카드가 떨어져 있으므로 각각 둥글게 */
#work #personal:not([style*="none"]) + .radio-group {
    margin-top: 12px; border-radius: 18px; border-top: 1px solid var(--line); box-shadow: var(--shadow-1);
}