/* --- 공통 버튼 --- */
.btn-black {
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    padding: 10px 16px;
    font-size: var(--font-button);
    cursor: pointer;
    transition: opacity 0.2s;
}
.btn-black:hover { opacity: 0.8; }

/* --- 작업내역: Toast UI Editor (툴바 하단·컴팩트, 기획안 정렬) --- */
.planner-task-detail-editor-host {
    width: 100%;
    height: 340px;
    box-sizing: border-box;
    position: relative;
}

/* 에디터 마운트 전(또는 initToastEditor 미실행) */
.planner-task-detail-editor-host:not(.planner-task-editor-mounted) {
    border: 1px solid #ddd;
    background-color: var(--color-white);
    padding: 16px;
    color: var(--color-grey);
    font-size: 14px;
}

.planner-task-detail-editor-host.planner-task-editor-mounted {
    padding: 0;
    border: none;
    background: transparent;
}

.planner-task-detail-editor-host .toastui-editor-defaultUI {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.planner-task-detail-editor-host .toastui-editor-defaultUI .toastui-editor-main {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
}

.planner-task-detail-editor-host .toastui-editor-defaultUI .toastui-editor-defaultUI-toolbar {
    order: 2;
    flex-shrink: 0;
    height: auto;
    min-height: 34px;
    padding: 4px 8px 5px;
    align-items: center;
    border-top: 1px solid #ebedf2;
    border-bottom: none;
    border-radius: 0;
    background-color: #f7f9fc;
}

.planner-task-detail-editor-host .toastui-editor-toolbar {
    height: auto;
    min-height: 0;
    align-items: center;
}

.planner-task-detail-editor-host .toastui-editor-defaultUI-toolbar button {
    width: 26px;
    height: 26px;
    margin: 2px 3px;
    min-width: 0;
    box-sizing: border-box;
}

.planner-task-detail-editor-host .toastui-editor-toolbar-divider {
    height: 12px;
    margin: 5px 6px;
    align-self: center;
}

.planner-task-detail-editor-host .toastui-editor-toolbar-item-wrapper {
    margin: 2px 3px;
    height: 24px;
    line-height: 24px;
}

.planner-task-detail-editor-host .toastui-editor-defaultUI-toolbar .scroll-sync {
    width: 52px;
    height: 8px;
    line-height: 8px;
}

.planner-task-detail-editor-host .toastui-editor-defaultUI-toolbar .scroll-sync::before {
    font-size: 11px;
}

.planner-task-detail-editor-host .toastui-editor-ww-container .toastui-editor-contents {
    padding: 12px 14px 10px;
}

.planner-task-detail-editor-host .toastui-editor-defaultUI .ProseMirror {
    padding: 12px 14px;
}

/* --- 작업내역: 저장 스냅샷 아카이브 (상단 최신 1칸 + 더보기 시 이전 목록) --- */
.planner-work-history-latest > .planner-work-history-card {
    margin-bottom: 16px;
}

.planner-work-history-card {
    position: relative;
    box-sizing: border-box;
    background: var(--color-white);
    border: 1px solid #ddd;
    padding: 14px 16px 16px;
    border-radius: 4px;
}

.planner-work-history-card__time {
    font-weight: 500;
    font-size: 12px;
    color: var(--color-grey);
    margin-bottom: 10px;
}

.planner-work-history-card__delete {
    position: absolute;
    top: 14px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
    font-size: 12px;
    color: var(--color-grey);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.planner-work-history-card__delete:hover {
    color: var(--color-black);
}

.planner-work-history-card__delete .planner-icon {
    width: 12px;
    height: 12px;
}

.planner-work-history-card__body {
    font-size: 14px;
    color: var(--color-black);
    line-height: 1.5;
    word-break: break-word;
}

.planner-work-history-card__body.toastui-editor-contents p {
    margin: 0 0 0.5em;
}

.planner-work-history-card__body.toastui-editor-contents p:last-child {
    margin-bottom: 0;
}

.planner-work-history-expanded {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.planner-work-history-expanded:not(.d-none) {
    margin-bottom: 0;
}

/* --- 프로젝트 리스트 (Flex 테이블) --- */
.list-table {
    background-color: var(--color-white);
    margin : 0 -24px;
    height: 100vh;
}

.list-table .col-brand { width: 150px; flex-shrink: 0; padding: 16px; border-right: 1px solid var(--color-light-grey); }
.list-table .col-category { width: 140px; flex-shrink: 0; padding: 16px;border-right: 1px solid var(--color-light-grey);}
.list-table .col-project { width: 240px; flex-shrink: 0; padding: 16px; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--color-light-grey);}
#view-manage .col-project{border-left: 1px solid var(--color-light-grey);}
#view-manage .col-project{border-right: none;}
.list-table .col-project.col-project--list-row {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.list-table .col-project__start {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.list-table .col-project--list-row .color-tag {
    flex-shrink: 0;
    align-self: center;
}
.list-table .col-project--list-row .editable-project-name {
    align-self: center;
    line-height: 1.25;
}
.list-table .col-project__private-lock {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    line-height: 0;
}
.list-table .col-project__private-lock-icon {
    width: 12px;
    height: 12px;
    display: block;
}

.list-table .editable-project-name {
    cursor: pointer;
    transition: color 0.2s;
    word-break: break-word;
    min-width: 0;
    flex: 1;
}
.list-table .editable-project-name:hover {
    color: var(--color-blue);
}
.list-table .project-name-readonly {
    cursor: default;
}
.list-table .project-inline-name-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    color: inherit;
    border: 1px solid var(--color-line, #ddd);
    border-radius: 6px;
    padding: 4px 8px;
    background: var(--color-white);
    box-sizing: border-box;
}

.col-workflow { flex: 1; padding: 16px; border-right: 1px solid var(--color-light-grey); color: var(--color-dark-grey); }
.list-table .col-depts { width: 280px; flex-shrink: 0; padding: 16px; }

.list-header {
    display: flex;
    border-bottom: 1px solid var(--color-light-grey);
    border-top: 1px solid var(--color-light-grey);
    background-color: var(--color-white);
    color: var(--color-grey);
}

.row-brand-group {
    display: flex;
    border-bottom: 1px solid var(--color-light-grey);
}
.brand-content { flex: 1; display: flex; flex-direction: column; }

.row-category-group {
    display: flex;
    border-bottom: 1px solid var(--color-light-grey);
}
.row-category-group:last-child { border-bottom: none; }
.category-content { flex: 1; display: flex; flex-direction: column; }

.row-project {
    display: flex;
    border-bottom: 1px solid var(--color-light-grey);
}
#project-list-container .row-project[data-project-id] {
    cursor: pointer;
}
.row-project:last-child { border-bottom: none; }

.color-tag {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    margin-right : 3px;
}
.color-tag.color-tag--editable {
    cursor: pointer;
    flex-shrink: 0;
}
.color-tag.transparent { border: 1px solid var(--color-grey); }

.planner-color-popover {
    z-index: 1005;
    min-width: 200px;
    padding: 12px 12px 10px;
    background: var(--color-lighter-grey);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--color-grey);
}
.planner-color-popover__title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-black);
}
.planner-color-popover__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.planner-color-popover__swatch {
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
}
.planner-color-popover__swatch:hover {
    filter: brightness(0.95);
}
.planner-color-popover__swatch--selected {
    outline: 1px solid var(--color-black);
    outline-offset: 1px;
}

/* 부서 캡슐 (겹침) */
.dept-labels-container {
    display: flex;
    align-items: center;
}

.dept-labels-middots {
    font-weight: 600;
    color: var(--color-dark-grey);
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin-left: 6px;
    flex-shrink: 0;
}

.dept-pill {
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 8px;
    padding: 4px 13px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-black);
    margin-left: -10px;
    position: relative;
    transition: transform 0.2s, z-index 0s;
}
.wf-create-dept-wrap > .dept-pill {
    padding: 2px 10px;
    font-size: 10px;
}
.dept-pill:first-child { margin-left: 0; }
.dept-pill:hover {
    z-index: 10;
    transform: translateY(-2px);
    background-color: var(--color-light-grey);
}

/* --- 워크플로우 (Grid) --- */
.btn-outline {
    background-color: var(--color-white);
    color: var(--color-dark-grey);
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    padding: 8px 16px;
    font-size: var(--font-button);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-outline:hover { background-color: var(--color-light-grey); }

/* #btn-save-detail(.btn-black, padding 12px, border 없음)과 동일 높이 — 테두리 1px만큼 padding 보정 */
.btn-detail-delete {
    flex: 1;
    padding: 11px 12px;
    border: 1px solid var(--color-black);
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color-black);
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-detail-delete:hover {
    background-color: var(--color-light-grey);
}

.btn-detail-delete:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

div#view-create{
    margin-top: 2rem;
    margin : 0 -24px;
}
/* =========================================
   행 추가 버튼 스타일 (시안 기반 텍스트+아이콘 형태)
   ========================================= */
   .row-add-controls-custom {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
}

/* 행 추가(워크플로 생성 / 업무 보드 / 타임라인 드롭다운 기준점) 공통 */
.add-btn-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-light-grey);
    cursor: pointer;
    color: var(--color-black);
    transition: background-color 0.2s;
}

.add-btn-row.indent-name {
    padding-left: 56px;
}

.add-btn-row:hover {
    background-color: #F8F9FA;
}

.add-icon {
    margin-right: 12px;
    color: var(--color-dark-grey);
}
#btn-add-activity,#btn-add-task{
    display: flex !important;
    align-items: center;
    padding : 14px 24px;
}
/* 삭제 버튼(X) 유지 */
.btn-delete-row {
    background: none; border: none; color: #CCC; font-size: 16px; 
    cursor: pointer; transition: color 0.2s; padding: 4px;
}
.btn-delete-row:hover { color: var(--color-black); }

.period-input {
    width: 60px; 
    border: none;
    background: transparent;
    outline: none;
    color: var(--color-black);
    text-align: left;
}
.period-input::placeholder {
    color: var(--color-grey);
}
/* =========================================
워크플로우 템플릿 생성 뷰
========================================= */
.create-view-header {
position: relative; /* 우측 버튼 고정을 위한 기준점 */
display: flex;
justify-content: center; /* 핵심: 내부 요소 완벽한 중앙 정렬 */
align-items: flex-end;
margin-bottom: 32px;
width: 100%;
}
.header-center-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.header-left-group {
    position: absolute;
    left: 24px;
    bottom: 0;
    display: flex;
    align-items: center;
}
.header-right-group {
    position: absolute;
    right: 24px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.view-tabs {
    display: flex;
    gap: 24px;
}

.view-tabs .tab {
    height : 40px;
    padding : 0 60px;
    text-align: center;
    line-height: 40px;
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-dark-grey);
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size : 12px;
}

.view-tabs .tab.active {
    background: var(--color-black);
    color: var(--color-white);
}
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.filter-btn {
    color: var(--color-dark-grey);
    cursor: pointer;
}

.workflow-create-container {
    background: var(--color-white);
}

.title-input-wrapper {
    padding: 32px 24px;
    border-top: 1px solid #EAEAEA;
    padding-bottom: 0;
    margin-bottom: 24px;
}

.title-input-wrapper.custom-header-style {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.title-input-wrapper.custom-header-style .workflow-title-input {
    flex: 1;
    min-width: 0;
}

.wf-title-delete-btn {
    flex-shrink: 0;
}

.workflow-title-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    color: var(--color-black);
}
.workflow-title-input::placeholder { color: #A0A0A0; }

.create-grid {
    display: grid;
    grid-template-columns: minmax(250px, 2fr) 120px minmax(200px, 1.5fr) 100px 40px;
    align-items: center;
    border-bottom: 1px solid #EAEAEA;
    background-color: var(--color-white);
}

/* 워크플로 생성 표: 목록(.workflow-grid)과 동일하게 복제·삭제 2열 — 이름열 넓힘, 담당부서·구분(relative-cell)·복제열 축소 */
.workflow-create-table .create-grid {
    grid-template-columns: minmax(300px, 2.65fr) 180px minmax(168px, 1.05fr) 180px minmax(50px, 0.4fr) minmax(50px, 0.4fr);
}

.create-grid > div {
    padding: 5px 24px;
    display: flex;
    align-items: center;
    min-width: 0;
}
.create-grid > div:last-child { border-right: none; }
div#workflow-create-rows > div{
    border : 1px solid var(--color-light-grey);
    border-bottom: none;
}
.create-header { border-bottom: none; color: var(--color-dark-grey); }
.create-row { border-top: none; min-height: 48px;}
.col-name, .col-dept, .col-category, .col-period {
    display: flex;
    align-items: center;
    padding-right: 16px;
}
.col-category.text-top {
    align-items: flex-start;
}
.col-name .transparent-input,
.col-name input,
.col-period input {
    flex: 1;
    min-width: 0; /* 핵심: flex 자식이 부모 너비를 넘지 못하게 함 */
}

/* 워크플로 템플릿 생성표: 행 전체 높이에 맞춤 + 열 세로 구분선 */
.workflow-create-table .create-grid.create-row {
    align-items: stretch;
    min-height: 48px;
    border-top: 1px solid #e0e0e0;
}

.workflow-create-table .create-grid.create-row > div {
    align-self: stretch;
    border-right: 1px solid #e0e0e0;
    box-sizing: border-box;
}

.workflow-create-table .create-grid.create-row > div:last-child {
    border-right: none;
}

.workflow-create-table .create-grid.create-header > div:not(:last-child) {
    box-sizing: border-box;
}

/* 생성 표: 헤더·본문 동일 기준 왼쪽 정렬(열 시작선 일치) */
.workflow-create-table .create-grid > div {
    justify-content: flex-start;
    text-align: left;
    padding: 10px 16px;
}

.workflow-create-table .create-grid.create-header > div {
    font-weight: 600;
    color: var(--color-dark-grey);
}

.workflow-create-table .workflow-copy-header,
.workflow-create-table .workflow-delete-header {
    justify-content: flex-start !important;
}

.workflow-create-table .create-grid.create-row .workflow-copy-col,
.workflow-create-table .create-grid.create-row .workflow-delete-col {
    justify-content: flex-start;
}

.workflow-create-table .create-grid.create-row .trigger-dropdown {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* 생성 표: 그리드 트랙 안에 맞춤(전역 .relative-cell !important / create-grid overflow와 충돌 방지) */
.workflow-create-table .create-grid .col-category,
.workflow-create-table .create-grid .col-dept.relative-cell {
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.workflow-create-table .create-grid .col-category.relative-cell {
    overflow: hidden;
}

.workflow-create-table .create-grid .col-category .trigger-dropdown {
    display: block;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-create-table .create-grid .task-row .wf-task-category-display {
    display: block;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-black);
    cursor: default;
    user-select: none;
}

.workflow-create-table .create-grid .task-row .wf-task-category-display.is-empty {
    color: var(--color-grey);
}

/* TASK 행 — 담당부서·구분·기간: Activity 집계(직접 편집 불가) 열 */
.workflow-create-table .create-grid .wf-task-derived-col {
    background-color: color-mix(in srgb, var(--color-light-grey) 50%, var(--color-white));
}

.workflow-create-table .create-grid.create-header .wf-task-derived-col {
    background-color: color-mix(in srgb, var(--color-light-grey) 14%, var(--color-white));
    color: var(--color-grey);
    font-weight: 500;
}

.workflow-create-table .create-grid.task-row .wf-task-derived-col .trigger-dropdown {
    cursor: default;
}

.workflow-create-table .create-grid.task-row .wf-task-derived-col .period-input:read-only {
    cursor: default;
}

.workflow-create-table .create-grid .relative-cell {
    position: relative;
}

.workflow-create-table .wf-create-col-period {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.workflow-create-table .wf-create-col-period .period-input {
    width: 48px;
    min-width: 0;
    text-align: left;
    padding-right: 0;
}

.col-name.col-name--with-type-icon {
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
}

.col-name.col-name--with-type-icon .tree-toggle-icon {
    align-self: center;
}

.col-name-input-inner {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-row-type-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.85;
}

.wf-name-leader-spacer {
    width: 24px;
    margin-right: 8px;
    flex-shrink: 0;
    align-self: center;
}
/* Task / Activity 배경 및 들여쓰기 */
.activity-row { background-color: var(--color-white); }
.indent-name { padding-left: 56px !important; }

.transparent-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    color: var(--color-black);
}
.tree-children-container {
    display: none; /* 기본적으로 하위 요소는 숨김 */
    background-color: var(--color-white);
}

.tree-task-group.open .tree-children-container {
    display: block; /* open 클래스가 붙으면 노출 */
}

/* 🌟 3. 계층별 들여쓰기 (Indent) 적용 */
.col-name.indent-level-1 {
    padding-left: 24px;
}
.col-name.indent-level-2 {
    padding-left: 64px; /* ACTIVITY는 TASK보다 깊게 들여쓰기 */
}
.add-btn-row.indent-level-1 { padding-left: 24px;}
.add-btn-row.indent-level-2 { padding-left: 64px;}

/* 🌟 4. 아이콘 정렬 */
.tree-toggle-icon, .bullet-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    margin-right: 8px;
    color: #A0A0A0;
    cursor: pointer;
    user-select: none;
}

.bullet-icon {
    font-size: 16px; /* 불릿 포인트 크기 */
}

.add-icon {
    margin-right: 0;
    color: #A0A0A0;
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}
.workflow-create-table .add-btn-row .font-text {
    display: inline-flex;
    align-items: center;
    line-height: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
}

.workflow-create-table .add-btn-row .add-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 0;
    flex-shrink: 0;
}

.workflow-create-table .add-btn-row {
    display: flex;
    align-items: center;
    min-height: 35px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 0;
    padding-right: 0;
}
.workflow-create-table .add-btn-row.indent-level-1 {
    padding-left: 24px;
}
.workflow-create-table .add-btn-row.indent-level-2 {
    padding-left: 64px;
}
.transparent-input::placeholder { color: #A0A0A0; }

.trigger-dropdown { color: #808080; cursor: pointer; }
.trigger-dropdown:hover { color: var(--color-black); }

/* 검색형 드롭다운 */
.search-dropdown-menu {
    position: absolute;
    top: 100%;
    left: -1px;
    width: calc(100% + 25px);
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    box-shadow: var(--shadow-default);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.search-dropdown-menu--above {
    top: auto;
    bottom: 100%;
    margin-bottom: 4px;
}

.workflow-create-table .create-grid .relative-cell.is-search-dropdown-open {
    overflow: visible !important;
    z-index: 1000;
}

.search-dropdown-header { padding: 12px 16px;}
.search-dropdown-input { width: 100%; border: none; outline: none; font-size: 12px; color: var(--color-black); }
.search-dropdown-input::placeholder { color: #A0A0A0; }

.search-dropdown-list { max-height: 200px; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.search-dropdown-list::-webkit-scrollbar { width: 6px; }
.search-dropdown-list::-webkit-scrollbar-thumb { background: var(--color-black); border-radius: 3px; }
.search-dropdown-list::-webkit-scrollbar-track { background: var(--color-light-grey); }

.search-dropdown-list li { padding: 12px 16px; font-size: 13px; color: var(--color-dark-grey); cursor: pointer; }
.search-dropdown-list li:hover { background-color: #F8F8F8; color: var(--color-black); }
.search-dropdown-list li.is-selected {
    background-color: #E8E8E8;
    color: var(--color-black);
    font-weight: 600;
}
.search-dropdown-list li.is-selected:hover { background-color: #DCDCDC; }
.workflow-table {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-light-grey);
    margin : 0 -24px;
    height: 100vh;
}
/* 목록 뷰: 복제·삭제 열 없음 (생성 화면 .workflow-create-container 전용) */
.workflow-table .workflow-grid {
    grid-template-columns: 1fr 6fr 5fr 5fr 3fr;
}
/* =========================================
   워크플로우 기간 선택 (Date Range Picker)
   ========================================= */
   .date-range-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.date-input {
    flex: 1;
    width: 100%;
    max-width: 140px; 
    color: var(--color-black);
    cursor: pointer;
    padding: 0;
}

/* 날짜가 비어있을 때(placeholder 텍스트 느낌을 주기 위함) */
.date-input:invalid::-webkit-datetime-edit { color: #A0A0A0; }


.date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.date-dash {
    color: #A0A0A0;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
/* grid-template-columns: 수정 : 워크플로 : 부서 : 구분 : 기간 : 작업(복제·삭제) */
.workflow-grid {
    display: grid;
    grid-template-columns: 1fr 6fr 5fr 5fr 3fr minmax(120px, 1.2fr) minmax(72px, 0.8fr);
    align-items: center;
    border-bottom: 1px solid var(--color-light-grey);
    min-height: 50px;
    font-size: var(--font-text);
}

.workflow-grid > div {
    padding: 12px 16px;
    border-right: 1px solid var(--color-light-grey);
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--color-dark-grey);
}
.workflow-grid > div:last-child { border-right: none; }

.workflow-header {
    border-top: 1px solid var(--color-light-grey);
    background-color: var(--color-white);
    color: var(--color-grey);
    font-weight: 500;
}

.workflow-row { background-color: var(--color-white); }
.workflow-row:hover { background-color: #fafafa; }

.tree-toggle {
    cursor: pointer;
    margin-right: 8px;
    font-size: 10px;
    display: inline-block;
    width: 12px;
}

.depth-1 .col-workflow { font-weight: 400; color: var(--color-black); }
.depth-2 .col-workflow { padding-left: 32px; }
.depth-3 .col-workflow { padding-left: 56px; color: var(--color-grey); }

/* 워크플로우 템플릿 트리 전용: open 클래스가 붙을 때만 노출 */
.workflow-grid.child-row { display: none; }
.workflow-grid.child-row.open { display: grid; }

/* 업무 관리(task-board) 트리 전용: 기본 노출, .closed로만 접기 */
.task-board-container .task-grid.child-row,
#task-board-container-my-work .task-grid.child-row {
    display: grid;
}

.edit-icon { cursor: pointer; color: var(--color-grey); }
.edit-icon:hover { color: var(--color-black); }

.workflow-copy-header,
.workflow-delete-header {
    justify-content: center;
}

.workflow-delete-header {
    border-right: none !important;
}
#workflow-tree-container .workflow-copy-col,
#workflow-tree-container .workflow-delete-col {
    justify-content: center;
}
.workflow-delete-col {
    border-right: none !important;
}

.workflow-dup-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-dark-grey);
    cursor: pointer;
    font-family: inherit;
}

.workflow-dup-btn:hover {
    color: var(--color-black);
}

.workflow-dup-btn .planner-icon {
    width: 14px;
    height: 14px;
}

.workflow-del-btn {
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-grey);
    line-height: 0;
}

.workflow-del-btn:hover {
    color: var(--color-red);
}

.workflow-del-btn .planner-icon {
    width: 14px;
    height: 14px;
}

/* 워크플로 목록 — 작업 복제 모달 */
.wf-dup-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.wf-dup-modal {
    width: 100%;
    max-width: 420px;
    background: var(--color-white);
    padding: 20px 20px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* 업무 관리 — 필터 저장 모달 (필터 사이드바·오버레이보다 위) */
#filter-save-modal.wf-dup-modal-overlay {
    z-index: 8100;
    background: rgba(234, 234, 234, 0.9);
}
#filter-save-modal .wf-dup-modal {
    background: rgba(251, 251, 251, 1);
}
.filter-overlay.is-hidden-for-save-modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 업무 관리 — 필터 불러오기 모달 */
#filter-load-modal.filter-load-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(234, 234, 234, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#filter-load-modal.filter-load-modal-overlay.is-open {
    display: flex !important;
}
.filter-load-modal {
    width: 100%;
    max-width: 520px;
    max-height: min(640px, 85vh);
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.filter-load-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    flex-shrink: 0;
}
.filter-load-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
}
.filter-load-modal-list {
    flex: 1;
    min-height: 120px;
    max-height: 420px;
    overflow-y: auto;
    border-top: 1px solid var(--color-light-grey);
}
.filter-load-modal-row {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-bottom: 1px solid var(--color-light-grey);
    background: var(--color-white);
    text-align: left;
    font-size: 13px;
    color: var(--color-black);
    cursor: pointer;
    box-sizing: border-box;
}
.filter-load-modal-row:last-child {
    border-bottom: none;
}
.filter-load-modal-row:hover {
    background: #f5f5f5;
}
.filter-load-modal-empty {
    margin: 0;
    padding: 24px 20px;
    font-size: 13px;
    color: var(--color-grey);
    text-align: center;
}
.filter-load-modal-pagination {
    flex-shrink: 0;
    padding: 16px 0 20px;
    margin: 0;
}

/* 업무 필터 관리 페이지 */

.filters-page-heading {
    margin: 0 0 20px;
    font-weight: 500;
    font-size: 24px;
}
.filters-page-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: 8px;
    padding: 24px;
    min-height: calc(100vh - 180px);
    box-sizing: border-box;
}
.filters-page-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    min-height: calc(100vh - 228px);
}
.filters-page-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.filters-page-pane--left {
    flex: 5.5 1 0;
    min-width: 0;
}
.filters-page-pane--left.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
.filters-pane-head-row--list {
    align-items: center;
    margin-bottom: 0;
}
.filters-pane-head-row--list .filters-pane-subtitle {
    margin: 0;
}
.btn-outline-filter-create {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--color-dark-grey, #404040);
    border-radius: 4px;
    background: var(--color-white, #fbfbfb);
    color: var(--color-black, #0c0c0c);
    font-size: 12px;
    font-weight: 400;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.btn-outline-filter-create:hover {
    background: #f5f5f5;
}
.btn-outline-filter-create:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.filters-page-pane--right {
    flex: 4.5 1 0;
    min-width: 0;
    min-height: calc(100vh - 280px);
}
.filters-pane-subtitle {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black);
}
/* 좌·우 공통: 서브타이틀 아래 회색 스크롤 패널 */
.filters-pane-panel {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    border: 1px solid var(--color-grey);
    border-radius: 8px;
    background: rgba(245, 245, 245, 1);
    padding: 8px;
    box-sizing: border-box;
    margin-top: 18px;
}
.filters-pane-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}
.filters-pane-head-row .filters-pane-subtitle {
    margin: 0;
}
.filters-pane-head-row .btn-black {
    flex-shrink: 0;
    min-width: 88px;
    padding: 10px 20px;
    font-size: 13px;
    justify-content: center;
}
.filters-edit-inner {
    background: var(--color-white);
    border-radius: 8px;
    padding: 20px 24px 24px;
    box-sizing: border-box;
    min-height: 100%;
}
.filters-edit-name-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border: none;
    border-bottom: 1px solid var(--color-light-grey);
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    background: transparent;
    outline: none;
}
.filters-edit-name-input::placeholder {
    color: var(--color-grey);
    font-weight: 500;
}
.filters-edit-name-input:focus {
    border-bottom-color: var(--color-black);
}
.filters-edit-inner .filter-group {
    margin-bottom: 20px;
}
.filters-edit-inner .filter-group:last-child {
    margin-bottom: 0;
}
.filters-edit-inner .filter-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-dark-grey);
}
.filters-selected-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 8px;
    margin-bottom: 10px;
}
.filters-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border: 1px solid var(--color-grey);
    border-radius: 16px;
    font-size: 12px;
    color: var(--color-dark-grey);
    background: var(--color-white);
}
.filters-pill-tag--assignee {
    padding-left: 4px;
}
.filters-pill-tag--assignee .avatar-pill {
    width: 22px;
    height: 22px;
    font-size: 10px;
    flex-shrink: 0;
}
.filters-pill-remove {
    border: none;
    background: none;
    padding: 0 0 0 2px;
    font-size: 14px;
    line-height: 1;
    color: var(--color-grey);
    cursor: pointer;
}
.filters-pill-remove:hover {
    color: var(--color-black);
}
.filters-pill-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.filters-pill-add-row .filter-select {
    flex: 1;
    min-width: 0;
}
.filters-fe-status-grid {
    grid-template-columns: repeat(3, 1fr);
}
.filters-fe-discussion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filters-accordion-item {
    border-bottom: 1px solid var(--color-light-grey);
}
.filters-accordion-item:last-child {
    border-bottom: none;
}
.filters-accordion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-white);
    border-radius: 8px;
}
.filters-accordion-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-black);
}
.filters-accordion-caret {
    flex-shrink: 0;
    width: 16px;
    font-size: 10px;
    color: var(--color-grey);
    line-height: 1;
    display: inline-block;
    transition: transform 0.28s ease;
}
.filters-accordion-item.is-expanded .filters-accordion-caret {
    transform: rotate(180deg);
}
.filters-accordion-title {
    font-size: 14px;
    font-weight: 400;
}
.filters-accordion-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.filters-btn-edit,
.filters-btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 12px;
}
.filters-btn-delete {
    color: var(--color-red);
}
.filters-btn-delete .filters-icon-delete {
    filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(747%) hue-rotate(319deg) brightness(97%) contrast(89%);
}
.filters-accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 16px 0 20px;
    background: var(--color-white);
    opacity: 0;
    overflow: hidden;
    transition:
        grid-template-rows 0.32s ease,
        opacity 0.26s ease,
        padding 0.32s ease;
}
.filters-accordion-item.is-expanded .filters-accordion-body {
    grid-template-rows: 1fr;
    padding-bottom: 16px;
    opacity: 1;
}
.filters-accordion-body-inner {
    min-height: 0;
    overflow: hidden;
}
.filters-criteria-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filters-criteria-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
}
.filters-criteria-label {
    color: var(--color-grey);
    font-size: 12px;
    font-weight: 400;
}
.filters-criteria-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filters-criteria-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 12px;
    border-radius: 8px;
    background: #eaeaea;
    color: #404040;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}
.filters-criteria-value {
    color: var(--color-black);
    font-weight: 400;
    word-break: break-word;
}
.filters-empty-msg {
    margin: 24px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--color-grey);
}

.wf-dup-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.wf-dup-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
}

.wf-dup-modal-body {
    margin-bottom: 16px;
}

.wf-dup-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-dark-grey);
    margin-bottom: 6px;
}

.wf-dup-name-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-light-grey);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.wf-dup-section-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-dark-grey);
}

.wf-dup-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wf-dup-checklist li {
    margin-bottom: 8px;
}

.wf-dup-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-black);
    cursor: pointer;
}

.wf-dup-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-black);
}

.wf-dup-note {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--color-grey);
    line-height: 1.45;
}

.wf-dup-submit {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

/* 첨부링크 — 추가 모달 */
.planner-link-add-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(234, 234, 234, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.planner-link-add-modal {
    width: 100%;
    max-width: 440px;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 24px 24px 20px;
    box-sizing: border-box;
}

.planner-link-add-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.planner-link-add-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
}

.planner-link-add-modal-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.planner-link-add-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-dark-grey);
    margin-bottom: 6px;
}

.planner-link-add-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-light-grey, #ccc);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.planner-link-add-modal-foot {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.planner-link-add-btn-cancel,
.planner-link-add-btn-submit {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* --- 업무 관리 보드 --- */
/* 브랜드별 .task-table-wrapper는 세로로만 쌓고, 가로 스크롤은 .task-board-container 한 곳에서만 */
#view-list {
    width: 100%;
    min-width: 0;
}

#task-board-container.task-board-container,
.task-board-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.task-board-container > .task-table-wrapper {
    flex: 0 0 auto;
    min-width: min-content;
}

.task-table-wrapper {
    background-color: var(--color-white);
    margin-bottom: 40px;
    margin-left: -24px;
    margin-right: -24px;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible;
}

.task-board-container > .task-table-wrapper:last-child {
    margin-bottom: 0;
}

.brand-content-area {
    min-width: min-content;
}

.brand-group-header {
    padding: 24px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-title);
    font-weight: 500;
    margin-bottom: 8px;
    cursor: pointer;
}
.brand-category-text {
    padding: 24px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--font-text);
    color: var(--color-grey);
    margin-bottom: 16px;
}

/* grid-template-columns: 7열 비율 */
.task-grid {
    display: grid;
    grid-template-columns:minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 0.5fr);
    align-items: stretch; /* 🌟 기존 center에서 stretch로 변경! (세로선이 위아래 꽉 차도록) */
    border-bottom: 1px solid var(--color-light-grey);
    min-height: 50px;
}

.task-grid > div {
    padding: 12px 16px;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--color-black);
}

.task-grid .workflow-copy-col,
.task-grid .workflow-delete-col {
    justify-content: center;
}

/* 업무 목록 — 인라인 WF 생성 행 */
.task-grid.new-workflow-row {
    background-color: #f5f5f5;
}
.task-grid.new-workflow-row .col-title {
    color: var(--color-grey);
    font-weight: 500;
}
.task-grid.new-workflow-row .new-wf-input {
    color: var(--color-grey);
    width: 100%;
    flex: 1;
    min-width: 0;
}
.task-grid.new-workflow-row .new-wf-placeholder {
    color: var(--color-grey);
    font-size: var(--font-text);
}
.task-grid.new-workflow-row .new-wf-cancel-btn {
    color: var(--color-grey);
}

.task-project-header {
    font-weight: 600;
    color: var(--color-grey);
    font-size: 12px;
}

/* 업무 보드 담당부서 열: 그리드 안에서 넘침 방지, 1·겹침·말줄임 */
.task-grid .task-col-depts {
    min-width: 0;
}
.task-grid .task-col-depts > div {
    min-width: 0;
    max-width: 100%;
}
.task-dept-pills {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}
.task-dept-pills--single {
    gap: 8px;
}
.task-dept-pills--single .dept-pill {
    margin-left: 0 !important;
}
.task-dept-pills--overlap .dept-pill {
    margin-left: -15px !important;
    flex-shrink: 0;
    position: relative;
}
.task-dept-pills--overlap .dept-pill:first-child {
    margin-left: 0 !important;
}
.task-dept-pills--overlap .dept-pill:nth-child(1) { z-index: 5; }
.task-dept-pills--overlap .dept-pill:nth-child(2) { z-index: 4; }
.task-dept-pills--overlap .dept-pill:nth-child(3) { z-index: 3; }
.task-dept-pills--overlap .more-dots {
    flex-shrink: 0;
    position: relative;
    z-index: 6;
    margin-left: 2px;
}
/* =========================================
   프로젝트 리스트 헤더 & 액션 드롭다운
   ========================================= */
   .project-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.project-list-header__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.wf-list-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.wf-list-page-header__left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.action-btn-trigger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    transition: background-color 0.2s;
}
#btn-project-action{
    border-radius: 4px;
}

/* role_level 6 (Viewer) — 쓰기 UI 숨김 */
html.planner-role-viewer #btn-project-action,
html.planner-role-no-project-registry #btn-project-action,
html.planner-role-no-project-registry .role-limit-project-registry {
    display: none !important;
}

html.planner-role-viewer #btn-show-create-view,
html.planner-role-no-workflow-templates #btn-show-create-view,
html.planner-role-no-workflow-templates .role-limit-workflow-template,
html.planner-role-viewer .role-limit-workflow-template {
    display: none !important;
}

html.planner-role-no-project-registry #btn-add-key-event,
html.planner-role-no-project-registry .role-limit-key-event-create,
html.planner-role-no-project-registry #btn-ke-save-detail,
html.planner-role-no-project-registry #btn-ke-delete-detail,
html.planner-role-no-project-registry #btn-ke-delete-ok,
html.planner-role-no-project-registry .role-limit-key-event-mutate,
html.planner-role-no-project-registry .ke-detail-btn-row,
html.planner-role-no-project-registry #btn-ke-create-event,
html.planner-role-viewer #btn-add-key-event,
html.planner-role-viewer #btn-ke-create-event,
html.planner-role-viewer #btn-ke-save-detail,
html.planner-role-viewer #btn-ke-delete-detail,
html.planner-role-viewer #btn-ke-delete-ok,
html.planner-role-viewer #ke-new-btn-add-file,
html.planner-role-viewer #ke-new-btn-add-link,
html.planner-role-viewer #ke-new-link-confirm,
html.planner-role-viewer .ke-detail-btn-row {
    display: none !important;
}

html.planner-role-no-workflow-templates #btn-save-workflow,
html.planner-role-no-workflow-templates #btn-delete-workflow-template,
html.planner-role-no-workflow-templates #btn-add-task-global,
html.planner-role-no-workflow-templates .icon.edit-icon.role-limit,
html.planner-role-no-workflow-templates .wf-create-dup-btn,
html.planner-role-no-workflow-templates .wf-create-del-btn,
html.planner-role-no-workflow-templates .add-btn-row.task-depth-2.child-row {
    display: none !important;
}

html.planner-role-no-project-registry .btn-visibility,
html.planner-role-no-project-registry .btn-delete-icon {
    display: none !important;
}

html.planner-role-viewer #task-mode-topbar,
html.planner-role-viewer .icon.edit-icon.role-limit,
html.planner-role-viewer .workflow-dup-btn,
html.planner-role-viewer .workflow-del-btn {
    display: none !important;
}

/* role_level 5·6 — 목록 Workflow·TASK 추가 */
html.planner-role-level-5 .add-btn-row.task-depth-2.child-row,
html.planner-role-viewer .add-btn-row.task-depth-2.child-row,
html.planner-role-level-5 .add-btn-row.task-depth-3.child-row,
html.planner-role-viewer .add-btn-row.task-depth-3.child-row {
    display: none !important;
}

/* role_level 6 — Activity 추가 (5는 유지) */
html.planner-role-viewer .add-btn-row.task-depth-4.child-row {
    display: none !important;
}

/* 본인 저장 필터 (task_saved_filters) — role_level·Viewer 무관 */
html.planner-role-viewer .planner-saved-filters-exempt,
html.planner-role-viewer .planner-filters-management-page #filters-btn-save-edit {
    display: revert !important;
}

/* role_level 6 — 업무관리 쓰기 UI */
html.planner-role-viewer #wf-dup-submit,
html.planner-role-viewer .workflow-dup-btn,
html.planner-role-viewer .workflow-del-btn,
html.planner-role-viewer #task-detail-sidebar .role-limit {
    display: none !important;
}

/* Lv4·5 등 — 상세 패널 읽기 전용 (담당·역할 불일치) */
#task-detail-sidebar.planner-task-detail-readonly .role-limit,
#task-detail-sidebar.planner-task-detail-readonly .btn-status-color,
#task-detail-sidebar.planner-task-detail-readonly #detail-important-toggle,
#task-detail-sidebar.planner-task-detail-readonly #detail-discussion-section {
    display: none !important;
}

#task-detail-sidebar.planner-task-detail-readonly #detail-title-input,
#task-detail-sidebar.planner-task-detail-readonly #detail-comment-input {
    pointer-events: none;
    background-color: var(--color-light-grey);
}

#task-detail-sidebar.planner-task-detail-readonly .planner-task-detail-editor-host {
    pointer-events: none;
    opacity: 0.88;
}

#task-detail-sidebar.planner-task-detail-readonly .select-pill .remove-btn,
#task-detail-sidebar.planner-task-detail-readonly .file-pill .remove-btn,
#task-detail-sidebar.planner-task-detail-readonly .attachment-pill .remove-btn,
#task-detail-sidebar.planner-task-detail-readonly .avatar-pill {
    pointer-events: none;
    cursor: default;
}

#task-detail-sidebar.planner-task-detail-readonly .planner-task-detail-editor-host .toastui-editor-defaultUI-toolbar,
.planner-task-detail-editor-host.planner-task-editor-readonly .toastui-editor-defaultUI-toolbar {
    display: none !important;
}

#task-detail-sidebar.planner-task-detail-readonly .hidden-date-input,
#task-detail-sidebar.planner-task-detail-readonly .custom-dropdown-list {
    pointer-events: none;
}

#btn-go-tasks{
    padding: 14px 32px;
}
/* 캡처 이미지 기반 다크 드롭다운 */
.dark-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: 6px;
    padding: 8px 0;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.dark-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dark-dropdown-menu .dropdown-item:hover {
    background-color: var(--color-dark-grey);
}

.dark-dropdown-menu .dropdown-item svg {
    flex-shrink: 0;
}
.page-content {
    position: relative;
    min-height: 100%;
}

/* page-content 영역만 꽉 채우는 라이트 그레이 배경 */
.page-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-light-grey);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    box-sizing: border-box;
}

.main-content.is-project-create-open {
    overflow: hidden;
}

.new-project-form-container {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 8rem;
}

.btn-new-project-dismiss {
    width: 100%;
    padding: 16px;
    margin-top: 0;
    box-sizing: border-box;
    background: var(--color-white);
    color: var(--color-black);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

/* 신규 프로젝트 — 공개범위 설정 */
.project-visibility-form-group {
    gap: 8px;
}
.new-project-form-container .font-text{
    color: var(--color-dark-grey);
}
.project-visibility-field-label {
    margin: 0;
    font-size: 12px;
    color: var(--color-dark-grey);
    line-height: 1.4;
}

.project-visibility-options {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.project-visibility-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.project-visibility-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--color-black);
    border-radius: 4px;
    background-color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.project-visibility-checkbox:checked {
    background-color: var(--color-black);
    border-color: var(--color-black);
}

.project-visibility-option-icon {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.project-visibility-option-text {
    font-size: var(--font-text);
    color: var(--color-black);
    line-height: 1.4;
}

/* 비공개 프로젝트 — 공유 인원 지정 모달 */
.project-share-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(234, 234, 234, 0.92);
}

.project-share-modal {
    width: 100%;
    max-width: 695px;
    background: var(--color-white);
    padding: 28px 32px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.project-share-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.project-share-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.project-share-modal-close {
    flex-shrink: 0;
    margin-top: 2px;
}

.project-share-modal-body {
    margin-bottom: 28px;
}

.project-share-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-share-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
    column-gap: 12px;
    align-items: end;
}

.project-share-row-fields {
    display: contents;
}

.project-share-field {
    min-width: 0;
}

.project-share-field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--color-grey);
    line-height: 1.3;
}

.project-share-row .custom-select-box {
    margin-top: 0;
    min-height: 40px;
    box-sizing: border-box;
}
.project-share-field .project-share-team-select,.project-share-field .project-share-member-select{
    padding: 8px 16px;
}
.project-share-team-select .select-value,
.project-share-member-select .select-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    min-height: 22px;
    overflow: hidden;
}

.project-share-member-select .select-value .project-share-member-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.project-share-member-select .select-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-share-member-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-white);
    overflow: hidden;
}

.project-share-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-share-row-remove {
    flex-shrink: 0;
    justify-self: end;
    align-self: end;
    border: none;
    background: transparent;
    padding: 0 0 14px;
    font-size: 12px;
    color: var(--color-grey);
    cursor: pointer;
    white-space: nowrap;
}

.project-share-row-remove.is-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.project-share-row-remove:hover {
    color: var(--color-black);
}

.project-share-add-btn {
    margin-top: 16px;
    padding: 0;
    font-size: 12px;
    color: var(--color-grey);
}

.project-share-add-btn:hover {
    color: var(--color-black);
}

.project-share-complete-btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 12px;
}

.custom-select-box, .custom-input-box {
    position: relative;
    width: 100%;
    border: 1px solid #CCC;
    border-radius: 6px;
    padding: 14px 16px;
    background: var(--color-white);
    color: var(--color-black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s;
}

.custom-select-box { cursor: pointer; margin-top : 8px;}
.custom-select-box.is-disabled {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
}
.custom-select-box .select-value--placeholder {
    color: var(--color-grey);
}
.custom-dropdown-list .dropdown-hint {
    color: var(--color-grey);
    pointer-events: none;
    cursor: default;
}
.custom-input-box:focus { border-color: var(--color-black); outline: none; }

.custom-select-box[data-state="open"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.custom-select-box .select-list {
    position: absolute;
    top: 100%;
    left: -1px; right: -1px;
    background: var(--color-white);
    border: 1px solid #CCC;
    border-radius: 0 0 6px 6px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    list-style: none;
    margin: 0; padding: 0;
}

.custom-select-box .select-list li {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-light-grey);
    font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
}
.custom-select-box .select-list li:last-child { border-bottom: none; }
.custom-select-box .select-list li:hover { background-color: var(--color-light-grey); }

/* 신규 프로젝트 색상 팔레트(라벨만 표시, 값은 data-value hex로 저장) */
.project-color-meta {
    display: flex;
    align-items: center;
    line-height: 1.2;
}
.project-color-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--color-black);
}

/* =========================================
   프로젝트 관리 뷰 (보기/숨기기/삭제)
   ========================================= */
   .manage-header-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    padding-top: 24px;
}

.manage-title {
    margin-bottom: 24px;
}

.manage-filter-group {
    display: flex;
    gap: 8px;
}

.manage-filter-btn {
    padding: 12px 26px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--color-white);
    color: var(--color-dark-grey);
    border: 1px solid #EAEAEA;
}

.manage-filter-btn.active {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.btn-manage-right {
    position: absolute;
    right: 0;
    top: 24px; /* 타이틀 라인과 대략 맞춤 */
}

.btn-manage-back {
    position: absolute;
    left: 0;
    top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    background-color: var(--color-white);
    color: var(--color-dark-grey);
    border: 1px solid #EAEAEA;
}

.btn-manage-back:hover {
    background-color: var(--color-light-grey);
    color: var(--color-black);
    border-color: var(--color-grey);
}

.btn-manage-back__icon {
    font-size: 14px;
    line-height: 1;
    margin-top: -1px;
}

/* 관리 뷰: 브랜드/구분/프로젝트 행 높이 — col-brand stretch로 brand-content만 커지며 생기던 하단 여백 방지 */
#manage-list-container .row-brand-group {
    align-items: flex-start;
}

#manage-list-container .col-brand {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    line-height: 1.25;
    box-sizing: border-box;
}

#manage-list-container .row-category-group {
    align-items: center;
}

#manage-list-container .category-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#manage-list-container .row-project {
    align-items: center;
}

#manage-list-container .row-project .col-project {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#manage-list-container .col-manage-action {
    align-self: center;
}

/* 관리 뷰: 프로젝트 공개범위 */
#manage-list-container .col-project-access {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
    width: 148px;
    flex-shrink: 0;
    padding: 0 16px;
    box-sizing: border-box;
}

#manage-list-container .project-access-scope {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-black);
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

#manage-list-container img.project-access-scope__icon {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center center;
}

#manage-list-container .project-access-scope__label {
    font-weight: 400;
    line-height: 1;
    display: block;
    padding: 0;
    margin: 0;
}

#manage-list-container .col-project-access--clickable {
    display: flex;
    align-items: center;
    align-self: center;
    height: 100%;
    min-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

#manage-list-container .col-project-access--clickable:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

#manage-list-container .col-project-access--clickable:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: -2px;
}

/* 관리 뷰 — 프로젝트 공개 범위 설정 모달 (UI) */
.project-access-scope-overlay {
    position: fixed;
    inset: 0;
    z-index: 125;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(234, 234, 234, 0.92);
    box-sizing: border-box;
}

.project-access-scope-modal {
    width: 100%;
    max-width: 695px;
    background: var(--color-white);
    padding: 28px 32px 32px;
    box-sizing: border-box;
}

.project-access-scope-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.project-access-scope-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-black);
}

.project-access-scope-modal-close {
    flex-shrink: 0;
    margin-top: 2px;
}

.project-access-scope-modal-body {
    margin-bottom: 32px;
}

.access-scope-share-section {
    margin-top: 24px;
    padding-top: 20px;
}

.project-share-section-label {
    font-size: var(--font-text);
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 14px;
}

/* ── 비공개 전환 최종 확인 모달 ────────────────────────────── */
.scope-to-private-box {
    width: 340px;
}
.scope-to-private-title {
    margin-bottom: 12px;
    font-weight: 400;
}
.scope-to-private-desc {
    color: var(--color-dark-grey);
    margin-bottom: 20px;
    line-height: 1.5;
}
.scope-to-private-members-label {
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 10px;
    text-align: left;
    font-weight: 400;
}
.scope-to-private-members-list {
    border: 1px solid var(--color-black);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 24px;
    background: var(--color-white);
}
.scope-to-private-member-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: var(--font-text);
    color: var(--color-black);
}
.scope-to-private-member-row:last-child {
    border-bottom: none;
}
.scope-to-private-member-team {
    color: var(--color-dark-grey);
    flex-shrink: 0;
}
.scope-to-private-member-sep {
    color: var(--color-dark-grey);
    flex-shrink: 0;
}
.scope-to-private-member-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.scope-to-private-actions {
    display: flex;
    gap: 8px;
}
.scope-to-private-btn {
    flex: 1;
    padding: 13px 0;
    font-size: var(--font-text);
}

.project-access-scope-modal-options {
    margin-top: 0;
    gap: 40px;
}

.project-access-scope-modal-submit {
    width: 50%;
    padding: 16px;
    font-size: var(--font-text);
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

/* 테이블 우측 버튼 영역 (숨기기/표시, 삭제) */
.col-manage-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    flex-shrink: 0;
    border-left: 1px solid var(--color-light-grey);
}

/* 관리 뷰: 숨김(is_hidden) 프로젝트의 프로젝트명 열 */
#manage-list-container .col-project--hidden-manage {
    opacity: 0.6;
}

.btn-visibility {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    border: none;
}

.btn-visibility.shown { background-color: #F0F0F0; color: var(--color-dark-grey); }
.btn-visibility.hidden { background-color: var(--color-dark-grey); color: var(--color-white); }

.btn-delete-icon {
    background: none; border: none; cursor: pointer; color: var(--color-dark-grey);
    display: flex; align-items: center; justify-content: center;
}

/* 삭제 모달 스타일 */
.delete-modal-box {
    position: relative;
    background: var(--color-white);
    padding: 80px;
    width: 100%;
    max-width: 510px;
    text-align: center;
}

.btn-close-modal {
    position: absolute;
    top: 16px; right: 16px;
    background: none; border: none; cursor: pointer; color: var(--color-dark-grey);
}
.task-row:hover { background-color: #f5f5f5; }
.task-row.task-row--expandable { cursor: pointer; }
.task-depth-1 .col-title { font-weight: 400; color: var(--color-black); font-size: 16px; }
.task-depth-2 .col-title { padding-left: 24px; }
.task-depth-3 .col-title { padding-left: 48px; color: var(--color-black); }
.task-depth-4 .col-title { padding-left: 72px; color: var(--color-black); }

.task-grid .col-title .delay-icon-small {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

/* 업무 보드: 그리드 행(.task-grid > div)과 맞춘 여백 */
.task-board-container .add-btn-row {
    padding: 8px 16px;
}

.btn-add-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--color-dark-grey);
    cursor: pointer;
    font-size: 12px;
}
.btn-add-item .plus-box {
    border: 1px solid var(--color-grey);
    border-radius: 2px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-badge,
.btn-status-color {
    border-radius: 8px;
    min-width: 64px;
    width: auto;
    height: 24px;
    line-height: 22px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 400;
    border: 2px solid transparent;
    text-align: center;
    color: var(--color-black);
    background: transparent;
    box-sizing: border-box;
}

.btn-status-color {
    padding: 0 8px;
    cursor: pointer;
}

.status-done { border-color: var(--color-green); }
.status-ing { border-color: var(--color-dark-blue); }
.status-todo { border-color: var(--color-yellow); }
.status-waiting { border-color: var(--color-orange); }
.status-stopped { border-color: var(--color-red); }

/* 업무 상세 사이드바 — 상태 토글 버튼 */
.btn-status-color {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.btn-status-color:not(.active) {
    opacity: 0.5;
    background: transparent;
}
.btn-status-color:not(.active):hover:not(:disabled) {
    opacity: 0.85;
}
.btn-status-color:not(.active).status-todo:hover:not(:disabled) {
    background: rgba(254, 220, 126, 0.35);
}
.btn-status-color:not(.active).status-ing:hover:not(:disabled) {
    background: rgba(45, 67, 139, 0.12);
}
.btn-status-color:not(.active).status-done:hover:not(:disabled) {
    background: rgba(23, 119, 60, 0.12);
}
.btn-status-color:not(.active).status-waiting:hover:not(:disabled) {
    background: rgba(255, 148, 102, 0.2);
}
.btn-status-color:not(.active).status-stopped:hover:not(:disabled) {
    background: rgba(227, 87, 87, 0.15);
}
.btn-status-color.active {
    opacity: 1;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.btn-status-color.status-todo.active {
    background: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-black);
}
.btn-status-color.status-ing.active {
    background: var(--color-dark-blue);
    border-color: var(--color-dark-blue);
    color: var(--color-white);
}
.btn-status-color.status-done.active {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}
.btn-status-color.status-waiting.active {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-black);
}
.btn-status-color.status-stopped.active {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white);
}
.btn-status-color:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}
.btn-status-color:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.avatar-pill {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.flex-gap-8 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-direction: row; }
.overlap-mode { display: flex; align-items: center; }
.overlap-mode > * {
    margin-left: -6px;
    position: relative;
    transition: transform 0.2s, z-index 0s;
}
.overlap-mode > *:first-child { margin-left: 0; }
.overlap-mode > *:hover { z-index: 10; transform: translateY(-2px); }

.task-row, .add-btn-row, .brand-content-area {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out, min-height 0.3s ease-in-out, margin 0.3s ease-in-out;
    opacity: 1;
}

.task-grid > div {
    transition: padding 0.3s ease-in-out;
    font-size: var(--font-text);
    font-weight: 400;
    padding: 12px 16px;
    display: flex;
    align-items: center; /* 🌟 텍스트의 세로 중앙 정렬은 플렉스 자식 단에서 유지 */
    color: var(--color-black);
    border-right: 1px solid var(--color-light-grey); /* 🌟 핵심: 각 열의 우측에 세로 구분선 추가 */
    box-sizing: border-box; /* 패딩과 테두리를 너비에 포함시켜 그리드 엇나감 방지 */
}
.task-grid > div:last-child {
    border-right: none;
}
.closed {
    max-height: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

.closed > div,
.add-btn-row.closed {
    height: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.add-btn-depth-2 { margin-left: 24px; }
.add-btn-depth-3 { margin-left: 48px; }
.add-btn-depth-4 { margin-left: 72px; }

.leaf-node-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--color-grey);
    margin-right: 4px;
    font-size: 10px;
}

/* 업무 관리 상단: 보기/수정 토글 + 저장 버튼 */
.task-mode-topbar {
    position: absolute;
    width: 97%;
    gap: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-mode-switch {
    width: 180px;
    height: 48px;
    border-radius: 16px;
    background: #FBFBFB;
    padding: 4px;
    position: relative;
    display: flex;
    align-items: center;
}

.task-mode-switch-thumb {
    position: absolute;
    top: 4px;
    left: 90px; /* 기본: 수정 모드(오른쪽) */
    width: 86px;
    height: 40px;
    border-radius: 16px;
    background: var(--color-black);
    transition: left 0.22s ease;
}

.task-mode-switch.is-view .task-mode-switch-thumb {
    left: 4px;
}

.task-mode-option {
    width: 86px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-grey);
    cursor: pointer;
}

.task-mode-option.is-active {
    color: var(--color-white);
}

.btn-timeline-save {
    width: 144px;
    height: 40px;
    border-radius: 16px;
    border: none;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* 업무 관리 — 제목·탭 중앙 정렬 (탭 행은 3열 그리드, 우측 툴바와 분리) */
.tasks-page-title {
    margin: 0 0 24px;
    font-weight: 500;
    text-align: center;
}
.tasks-page-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 16px;
    margin-bottom: 24px;
}
.tasks-page-header__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 16px;
    align-items: center;
}
/* 적용된 필터 요약 (목록 보기 상단) */
.planner-filter-summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
}
.planner-filter-summary-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 14px;
    gap: 3px;
    border-radius: 999px;
    background: var(--color-light-grey);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-black);
    box-sizing: border-box;
}
.planner-filter-summary-chip__label {
    flex-shrink: 0;
    color: var(--color-dark-grey);
    font-weight: 400;
}
.planner-filter-summary-chip__value {
    color: var(--color-black);
    font-weight: 400;
    word-break: break-all;
}
.task-table-wrapper > .planner-filter-summary-bar {
    padding: 24px 24px 0;
    margin-bottom: 8px;
}
.list-table > .planner-filter-summary-bar,
.workflow-table > .planner-filter-summary-bar {
    padding: 13px 5px 0;
    margin-bottom: 8px;
}

/* ───── 헤더 검색 결과 ───── */
.search-result-bar {
    padding: 20px 24px 16px;
    font-size: var(--font-text);
    color: var(--color-dark-grey);
    line-height: 1.5;
    font-size: var(--font-title);
    text-align: center;
}
.search-result-query,
.search-result-count {
    color: var(--color-blue);
    font-weight: 400;
}
/* 매칭 텍스트 하이라이트 */
span.search-hl {
    color: var(--color-blue);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-blue);
    text-underline-offset: 2px;
}
/* 결과 없음 */
.search-no-result {
    padding: 60px 24px;
    text-align: center;
    color: var(--color-dark-grey);
    font-size: var(--font-text);
}

/* 업무 관리 탭 — 컨테이너에 연속 라인, 선택 탭만 ::after 검정 하이라이트 */
.task-tabs {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    padding-left: 50px;
}
/* gap 구간 포함 탭 바 전체에 이어지는 1px 회색 라인 */
.task-tabs::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-grey);
    pointer-events: none;
}
.task-tab {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 8px 15px;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-grey);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.task-tab:hover:not(.is-active) {
    color: var(--color-dark-grey);
}
.task-tab.is-active {
    color: var(--color-black);
    font-weight: 500;
    padding-bottom: 13px;
}
/* 선택 탭 구간만 3px 검정 (연속 회색 라인 위에 덮음) */
.task-tab.is-active::after {
    content: '';
    position: absolute;
    left: -20px;
    right: -20px;
    bottom: 0;
    height: 2px;
    background: var(--color-black);
    z-index: 2;
    pointer-events: none;
}

/* 화면 숨김 처리용 유틸리티 클래스 */
.d-none {
    display: none !important;
}

#view-timeline {
    margin-left: -24px;
    margin-right: -24px;
}

/* --- 타임라인 (간트차트) 메인 레이아웃 --- */
.timeline-wrapper {
    display: flex;
    width: 100%;
    background-color: var(--color-white);
    min-height: 600px;
    position: relative;
}

/* 좌측 프로젝트 정보 패널 (스크롤 시 고정됨) */
.timeline-sidebar {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-light-grey);
    background-color: var(--color-white);
    position: relative;
    z-index: 10; 
}

/* 우측 타임라인 — 헤더(sticky) + 바디(가로 스크롤) 스택 */
.timeline-grid-stack {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/*
 * sticky 예약 높이(60px)가 스크롤 시 공백으로 남는 문제 방지:
 * 셸 height:0 + 본문 padding-top:60px
 */
.timeline-header-hscroll {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 0;
    flex-shrink: 0;
    overflow: visible;
}
.timeline-header-hscroll-inner {
    height: 60px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--color-white);
    box-shadow: 0 1px 0 var(--color-light-grey);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.timeline-header-hscroll-inner::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* 우측 타임라인 그리드 영역 (가로 스크롤) */
.timeline-grid-area {
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: clip;
    position: relative;
    padding-top: 60px;
    box-sizing: border-box;
}

/* --- 타임라인 그리드 & 헤더 영역 --- */
:root {
    --day-width: 30px;
    --row-height: 44px;
    --project-row-height: 60px;
}

/* 상단 날짜 헤더 래퍼 (가로 폭만 — sticky는 .timeline-header-hscroll) */
.timeline-header-container {
    position: relative;
    height: 60px;
    z-index: 1;
    background: var(--color-white);
}

/* 1. 월(Month) 헤더 */
.timeline-months {
    display: flex;
    height : 30px;
    border-bottom: 1px solid var(--color-light-grey);
    color: var(--color-dark-grey);
    font-size: 12px;
}
.timeline-month-cell {
    padding: 8px 12px;
    border-right: 1px solid var(--color-light-grey);
    box-sizing: border-box;
    font-weight: 600;
}
.attachment-pill,.file-pill{
    display: flex;
    align-items: center;
    gap: 4px;
}
.attach-name{font-size: var(--font-text); color: var(--color-black);}
/* 2. 주(Week/Day) 헤더 */
.timeline-weeks {
    display: flex;
    height : 30px;
    color: var(--color-grey);
    font-size: 11px;
    border-bottom: 1px solid var(--color-light-grey);
}
.timeline-week-cell {
    padding: 6px 12px;
    border-right: 1px solid var(--color-light-grey);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.timeline-day-cell {
    flex-shrink: 0;
    box-sizing: border-box;
    border-right: 1px solid var(--color-light-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-grey);
    font-size: 11px;
}

/* 3. 배경 그리드 세로선 (헤더 아래로 쫙 깔림) */
.timeline-grid-lines {
    position: absolute;
    top: 60px; 
    left: 0;
    height: calc(100% - 60px);
    display: flex;
    z-index: 0;
}
.timeline-grid-col {
    border-right: 1px solid var(--color-light-grey);
    box-sizing: border-box;
    height: 100%;
    transition: background-color 0.1s ease; 
}
.timeline-grid-col.is-15th {
    background-color: rgba(218, 243, 255, 0.6) !important;
}
.timeline-grid-col:hover {
    background-color: rgba(0, 0, 0, 0.03); 
}
.timeline-today-line {
    position: absolute;
    top: 60px;
    bottom: 0;
    width: 1px;
    background-color: #355FE9;
    z-index: 20;
    pointer-events: none;
}
.timeline-today-line::before {
    content: '';
    position: absolute;
    top: -4px; 
    left: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #355FE9;
    z-index: 10;
}
.timeline-sidebar-row {
    height: var(--row-height);
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-sidebar-row.depth-1 {
    height: var(--project-row-height);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    padding-bottom: 4px;
    border-top : 1px solid var(--color-light-grey);
    box-sizing: border-box;
}

.project-meta {
    font-size: 11px;
    color: var(--color-grey);
    margin-bottom: 3px;
}

.project-name-line {
    display: flex;
    align-items: flex-start;
    width: 100%;
    color: var(--color-black);
    font-weight: 500;
    font-size: 13px;
    gap: 6px;
}

.timeline-bar-row {
    height: var(--row-height);
    position: relative;
    width: 100%;
    overflow: visible !important; /* 툴팁 잘림 방지 */
    box-sizing: border-box;
}

@keyframes timelineRowNudge {
    0% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    45% { transform: translateX(3px); }
    70% { transform: translateX(-2px); }
    88% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

.timeline-bar-row.mode-locked-shake {
    animation: timelineRowNudge 0.28s ease;
}

.timeline-bar-row.depth-1 {
    height: var(--project-row-height);
    border-top : 1px solid var(--color-light-grey);
}
.timeline-sidebar-row.depth-1:first-child,
.timeline-bar-row.depth-1:first-child {
    border-top: none; 
}

/* =========================================
   1. 간트차트 바(Bar) 공통 스타일
   ========================================= */
.gantt-bar {
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 11px;
    white-space: nowrap;
    overflow: visible !important; /* 툴팁 잘림 방지 */
    cursor: grab;
    pointer-events: auto;
    z-index: 2;
}
.gantt-bar.is-dragging {
    cursor: grabbing !important;
    opacity: 0.7;
    z-index: 100 !important;
    transition: none !important; 
}
/* 진행완료 막대 — 사이드바 .btn-status-color.status-done 과 동일 상태 */
#timeline-bars-container .gantt-bar.status-done,
#mt-timeline-bars-container .gantt-bar.status-done {
    opacity: 0.6;
}
#timeline-bars-container .gantt-bar.status-done.is-dragging,
#mt-timeline-bars-container .gantt-bar.status-done.is-dragging {
    opacity: 0.7;
}
#timeline-bars-container .gantt-bar.status-waiting,
#mt-timeline-bars-container .gantt-bar.status-waiting {
    border: 1px solid var(--color-orange);
}
#timeline-bars-container .gantt-bar.status-stopped,
#mt-timeline-bars-container .gantt-bar.status-stopped {
    border: 1px solid var(--color-red);
    opacity: 0.85;
}
/* 💡 마우스 오버 시 막대를 통째로 들어올려 툴팁 안 잘리게 함 */
.gantt-bar:hover {
    z-index: 999 !important;
}

/* =========================================
   2. 간트차트 뎁스(Depth)별 막대 디자인 (근본 완벽 해결판)
   ========================================= */

   .gantt-bar.depth-2 {
    color: var(--color-black);
    font-weight: 500;
}
.gantt-bar.depth-2.gantt-bar--ink-light,
.gantt-bar.depth-2.gantt-bar--ink-light .gantt-task-name,
.gantt-bar.depth-2.gantt-bar--ink-light .toggle-icon {
    color: #ffffff;
}
.gantt-bar.depth-2.gantt-bar--ink-dark,
.gantt-bar.depth-2.gantt-bar--ink-dark .gantt-task-name,
.gantt-bar.depth-2.gantt-bar--ink-dark .toggle-icon {
    color: var(--color-black);
}

/* 💡 3, 4-Depth 공통 (박스 모델 통일) */
.gantt-bar.depth-3, 
.gantt-bar.depth-4 {
    background-color: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: 5px; /* 둥근 캡슐 모양 */
    color: var(--color-dark-grey);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 17px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* 💡 3-Depth 태스크 */
.gantt-bar.depth-3 {
    border-radius: 6px; 
}
.gantt-bar.depth-3::before {
    content: "";
    position: absolute;
    top: 0;   /* 테두리가 사라졌으므로 0으로 딱 맞춤 */
    left: 0;
    right: 0;
    height: 6px; 
    background-color: var(--workflow-color, var(--color-grey)); 
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    z-index: 0;
}
.gantt-bar.depth-3 > :not(.resize-handle):not(.delay-badge):not(.danger-badge):not(.gantt-bar-label) {
    position: relative;
    z-index: 10;
}

/* 가로 스크롤 시 바 라벨을 뷰포트 왼쪽에 고정 (overflow:visible 바는 유지, 라벨만 sticky) */
.gantt-bar .gantt-bar-label {
    position: sticky;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 8px);
    min-width: 0;
    z-index: 11;
    box-sizing: border-box;
    /* sticky 안정화: 라벨 자체는 클리핑, 바 overflow:visible(툴팁/미니캡슐)은 유지 */
    overflow: hidden;
}

.gantt-bar.depth-2 .gantt-bar-label {
    gap: 0;
}

.gantt-bar .gantt-bar-label .gantt-task-name {
    min-width: 0;
    flex: 1 1 auto;
}

/* 💡 4-Depth 액티비티 */
.gantt-bar.depth-4 {
    border-radius: 8px; 
    transform: scale(0.95);
    transform-origin: left center;
}

/* 좌측 상단 — sticky 예약 높이 제거(공백 방지), 시각 헤더는 ::after */
.timeline-sidebar-header {
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 31;
    overflow: visible;
}
.timeline-sidebar-header::after {
    content: '';
    display: block;
    height: 60px;
    box-sizing: border-box;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-light-grey);
}
.timeline-sidebar > [id$="timeline-sidebar-container"],
.timeline-sidebar > #timeline-sidebar-container,
.timeline-sidebar > #mt-timeline-sidebar-container {
    padding-top: 60px;
    box-sizing: border-box;
}
.gantt-group-bg {
    position: absolute;
    background-color: #F3F4F6; 
    border-radius: 16px; 
    z-index: 1; 
    pointer-events: none; 
    border: 1px solid rgba(0,0,0,0.05); 
}

/* --- 캡슐 내부 요소 스타일 --- */
.gantt-icon-arrow {
    font-size: 10px;
    color: var(--color-grey);
}
.timeline-dept-pill {
    border: 1px solid var(--color-black);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-black);
    background: var(--color-white);
    white-space: nowrap;
    text-transform: uppercase;
}
.timeline-dept-pills {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.timeline-dept-pills--overlap .timeline-dept-pill {
    margin-left: -8px;
    position: relative;
    transition: transform 0.2s, z-index 0s;
}
.timeline-dept-pills--overlap .timeline-dept-pill:first-child {
    margin-left: 0;
}
.timeline-dept-pills--overlap .timeline-dept-pill:nth-child(1) { z-index: 5; }
.timeline-dept-pills--overlap .timeline-dept-pill:nth-child(2) { z-index: 4; }
.timeline-dept-pills--overlap .timeline-dept-pill:nth-child(3) { z-index: 3; }
.timeline-dept-pills--overlap .timeline-dept-pill:nth-child(4) { z-index: 2; }
.timeline-dept-pills--overlap .timeline-dept-pill:nth-child(5) { z-index: 1; }
.timeline-dept-pills--overlap .timeline-dept-pill:hover {
    z-index: 10;
    transform: translateY(-1px);
}
.timeline-dept-pills--overlap .dept-labels-middots {
    margin-left: 4px;
    z-index: 6;
    position: relative;
}
.gantt-task-name {
    font-weight: 500;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-task-meta {
    margin-right: auto; 
    font-size: 10px;
    color: var(--color-grey);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
/* =========================================
   타임라인 마일스톤 (지정일정 표시선)
   ========================================= */
   .gantt-milestone {
    position: absolute;
    width: 1px;
    background-color: #E64646; /* 시안의 빨간색 선 */
    z-index: 5;
    pointer-events: none;
}

.milestone-label {
    position: absolute;
    left: 6px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: max-content;
    pointer-events: auto;
}

.milestone-label svg {
    margin-top: 1px;
}

.milestone-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.milestone-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-dark-grey);
}

.milestone-date {
    font-size: 8px;
    color: var(--color-grey);
}

/* Key Event 핀 — 프로젝트 행 milestone */
.gantt-key-event {
    background-color: var(--color-red);
    pointer-events: auto;
    cursor: default;
}
/* --- 타임라인 스케일 필터 버튼 --- */
.btn-scale {
    border: none;
    background: transparent;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--color-dark-grey);
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.2s, font-weight 0.2s;
}
.btn-scale.active {
    background: var(--color-white);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.timeline-month-cell,
.timeline-week-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeline-day-cell.is-holiday {
    background-color: rgba(255, 205, 205, 0.6);
}
.timeline-day-cell.is-weekend {
    background-color: #ddd;
}
.timeline-grid-col.is-holiday {
    background-color: rgba(255, 205, 205, 0.6); 
}
.timeline-grid-col.is-weekend {
    background-color: #ddd;
    opacity: 0.6;
}
.timeline-grid-col.is-holiday:hover {
    background-color: rgba(255, 205, 205, 0.8);
}

/* --- 오늘 버튼 --- */
#btn-go-today,
#mt-btn-go-today {
    border: 1px solid var(--color-grey);
    background: var(--color-white);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 12px;
    color: var(--color-dark-grey);
    transition: background 0.2s;
}
#btn-go-today:hover,
#mt-btn-go-today:hover {
    background: var(--color-light-grey);
}
#timeline-bars-container,
#mt-timeline-bars-container {
    pointer-events: none;
}
#timeline-bars-container .gantt-bar,
#mt-timeline-bars-container .gantt-bar {
    pointer-events: auto;
}
.gantt-canvas-container {
    position: relative;
    width: 100%;
}

/* =========================================
   3. 리사이즈 핸들 (0으로 완벽 통일 고정)
   ========================================= */
.resize-handle {
    position: absolute !important;
    top: 0 !important;    /* 🌟 이제 모든 막대의 기준이 같으므로 무조건 0! */
    bottom: 0 !important; 
    width: 10px;
    background-color: var(--color-dark-grey) !important;
    cursor: col-resize;
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 50 !important;
}
.gantt-bar:hover .resize-handle,
#pane-timeline .wf-gantt-bars-mount .gantt-activity-bar.wf-gantt-activity:hover .resize-handle {
    display: flex;
}
.resize-handle.left {
    left: 0px !important;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}
.resize-handle.right {
    right: 0px !important;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}
.resize-handle::after {
    content: "";
    display: block;
    width: 2px;
    height: 14px;
    border-left: 1.5px solid white;
    border-right: 1.5px solid white;
}

/* =========================================
   4. 지연 알림(Overdue) 뱃지 & 툴팁
   ========================================= */
.delay-badge {
    position: absolute;
    right: 12px; 
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    z-index: 20;
}
.delay-badge .delay-icon,
.delay-badge .danger-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border-radius: 50%;
    overflow: visible;
}

.delay-badge .delay-icon .planner-icon,
.delay-badge .danger-icon .planner-icon {
    width: 22px;
    height: 22px;
}
.delay-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    background-color: #FDF13E; 
    color: #000;
    border: 1.5px solid #000;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    pointer-events: none; 
    z-index: 1000;
    width: max-content;
}
.delay-badge:hover .delay-tooltip,
.danger-badge:hover .danger-tooltip {
    opacity: 1;
    visibility: visible;
}

.danger-tooltip {
    background-color: #E35757;
    color: #fff;
    border-color: #0C0C0C;
}

/* =========================================
   지연 툴팁 overflow 클리핑 방지
   ========================================= */
.my-work-scroll {
    overflow-x: visible;
    overflow-y: auto;
}
.my-work-row {
    overflow: visible;
}

/* =========================================
   지연 업무 마감일 Red
   ========================================= */
.dash-col-sched.is-overdue {
    color: var(--color-red);
    font-weight: 600;
}

/* =========================================
   오늘 날짜 강조 (캘린더)
   ========================================= */
.my-cal-cell.is-today {
    background-color: var(--color-light-light-grey);
}


/* =========================================
   코멘트 간격
   ========================================= */
#detail-comment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.comment-item {
    display: flex;
    gap: 8px;
}

/* =========================================
   알림 필터/정렬 버튼 활성 상태
   ========================================= */
#btn-toggle-filter.is-applied,
#btn-toggle-sort.is-applied {
    color: var(--color-blue);
    border-color: var(--color-blue);
}
#btn-toggle-filter.is-active,
#btn-toggle-sort.is-active {
    background-color: var(--color-light-light-grey);
}

/* =========================================
   필터 목록 라벨 간격 (나의 필터 관리)
   ========================================= */
.filter-group + .filter-group {
    margin-top: 16px;
}
.filter-group .filter-title {
    margin-bottom: 8px;
}

/* =========================================
   필터 사이드바 & 오버레이 (Overlay)
   ========================================= */
   .filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 8000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filter-sidebar {
    position: fixed;
    top: 0;
    right: -400px; /* 초기엔 화면 밖에 숨김 */
    width: 380px;
    height: 100vh;
    background-color: var(--color-white);
    z-index: 8001;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 15px rgba(0,0,0,0.05);
    transition: right 0.3s ease-in-out;
}

/* 활성화 클래스 */
.filter-overlay.active {
    opacity: 1;
    visibility: visible;
}
.filter-sidebar.active {
    right: 0;
}

/* 패널 내부 레이아웃 */
.filter-header-top {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-light-grey);
}
.filter-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.filter-footer {
    padding: 24px;
    border-top: 1px solid var(--color-light-grey);
    background: var(--color-white);
}

/* 아코디언 및 그룹 스타일 */
.filter-group {
    margin-bottom: 24px;
}
.filter-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-dark-grey);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.filter-title .arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
.filter-title.collapsed .arrow {
    transform: rotate(180deg);
}

.filter-content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
}
.filter-content.collapsed {
    max-height: 0;
    opacity: 0;
}
.filter-sidebar .filter-group:has(.pl-filter-brand-category-select.is-open) {
    position: relative;
    z-index: 3;
}
.filter-sidebar .filter-group:has(.pl-filter-brand-category-select.is-open) .filter-content {
    overflow: visible;
}

/* 체크박스 그리드 */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-dark-grey);
    cursor: pointer;
}

.filter-cascade-hint {
    margin: 0;
    padding: 4px 0 8px;
    font-size: 12px;
    color: var(--color-grey);
    line-height: 1.5;
}

/* 프로젝트 리스트 — 브랜드별 구분 select */
.pl-filter-brand-category-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pl-filter-brand-category-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pl-filter-brand-category-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
}
.pl-filter-brand-category-select {
    position: relative;
    width: 100%;
}
.pl-filter-brand-category-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}
.pl-filter-brand-category-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pl-filter-brand-category-value--placeholder {
    color: var(--color-grey);
}
.pl-filter-brand-category-arrow {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--color-grey);
    line-height: 1;
}
.pl-filter-brand-category-select.is-open .pl-filter-brand-category-trigger {
    border-color: var(--color-black);
}
.pl-filter-brand-category-select.is-open .pl-filter-brand-category-arrow {
    transform: rotate(180deg);
}
.pl-filter-brand-category-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.pl-filter-brand-category-panel--fixed {
    right: auto;
}
.pl-filter-brand-category-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pl-filter-brand-category-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-dark-grey);
    cursor: pointer;
}

.filter-schedule-type-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}
.color-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid var(--color-grey);
}

/* Select Box */
.filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-dark-grey);
    background-color: var(--color-white);
    outline: none;
    appearance: none;
    cursor: pointer;
}
.filter-select:disabled {
    background-color: var(--color-light-grey);
    color: var(--color-grey);
    cursor: not-allowed;
}
.mb-8 { margin-bottom: 8px; }

/* 텍스트 버튼 (+ 필터 추가, 상세 사이드바 공통) */
.btn-text {
    background: none;
    border: none;
    color: var(--color-black);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.filters-btn-delete{
    color: var(--color-red);
}
.btn-text:hover { color: var(--color-black); }

/* 논의 알약 버튼 (Pill Checkbox) */
.pill-checkbox input {
    display: none; /* 실제 체크박스 숨김 */
}
.pill-checkbox span {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #D9534F; /* 기획안의 붉은 테두리 */
    border-radius: 16px;
    font-size: 11px;
    color: #D9534F;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
/* 체크되었을 때 스타일 반전 */
.pill-checkbox input:checked + span {
    background-color: #D9534F;
    color: var(--color-white);
}

/* =========================================
   필터 사이드바 - 커스텀 체크박스 (기획안 원복)
   ========================================= */

/* 1. 기본 브라우저 체크박스 스타일 숨기기 & 커스텀 틀 잡기 */
/* 주의: '논의' 필터의 알약(pill) 모양 체크박스는 건드리지 않도록 예외 처리 */
.filter-sidebar input[type="checkbox"]:not(.pill-checkbox input),
.filters-edit-inner input[type="checkbox"]:not(.pill-checkbox input) {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-grey);
    border-radius: 2px;
    background-color: var(--color-white); /* 🌟 배경은 항상 하얀색으로 유지 */
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    vertical-align: middle;
    transition: all 0.2s ease;
}

/* 2. 체크박스 선택 시 (테두리만 검은색으로 변경) */
.filter-sidebar input[type="checkbox"]:not(.pill-checkbox input):checked,
.filters-edit-inner input[type="checkbox"]:not(.pill-checkbox input):checked {
    background-color: var(--color-black); /* 🌟 테두리만 검은색으로 바꿉니다 */
}

/* 3. 체크 마크 (검은색 V자 가상 요소) */
.filter-sidebar input[type="checkbox"]:not(.pill-checkbox input):checked::after,
.filters-edit-inner input[type="checkbox"]:not(.pill-checkbox input):checked::after {
    content: "";
    width: 3.5px;
    height: 7px;
    border: solid var(--color-black); /* 🌟 체크 마크는 검은색으로 바꿉니다 */
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    margin-bottom: 2px; /* 브이(V)자 위치 미세조정 */
}

.btn-icon { background: none; border: none; cursor: pointer; color: var(--color-grey); }

/* =========================================
   월/주간 이슈 모아보기 (Kanban View)
   ========================================= */

   #view-issue {
    margin-left: -24px;
    margin-right: -24px;
    background-color: var(--color-white);
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

#view-issue .btn-add-item {
    display: none !important;
}
/* 상단 네비게이션 헤더 */
.issue-header {
    padding: 16px 24px 16px 10px;
    border-bottom: 1px solid var(--color-light-grey);
    display: flex;
    align-items: center;
}
.issue-date-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}
input[type="month"].issue-current-date {
    font-size: 16px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--color-black);
    cursor: pointer;
    outline: none;
    font-family: inherit;
    padding: 0;
    margin: 0;
}
input[type="month"].issue-current-date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
input[type="month"].issue-current-date::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
.issue-view-dropdown {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark-grey);
    cursor: pointer;
    margin-left: 8px;
}
.issue-view-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 8px 0;
    z-index: 100;
    width: max-content;
}
.dropdown-item {
    padding: 8px 16px;
    font-size: 12px;
    transition: background 0.2s;
}
.dropdown-item:hover {
    background-color: var(--color-light-grey);
}

/* 보드 컨테이너 (핵심: 가로 스크롤) */
.issue-board-container {
    display: flex;
    gap: 16px;
    padding: 24px;
    overflow-x: scroll;
    flex: 1;
    background-color: #F8F9FA; /* 기획안 배경의 연한 회색 */
    align-items: flex-start;
}

/* 프로젝트 열 (Column) */
.issue-column {
    width: 320px;
    flex-shrink: 0; /* 폭이 줄어들지 않도록 강제 */
    background-color: var(--color-light-grey);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    border: 1px solid var(--color-light-grey);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}
.issue-col-header {
    margin-bottom: 24px;
}
.project-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.task-count {
    color: var(--color-grey);
    font-weight: 500;
}

/* 워크플로우 그룹 */
.issue-workflow-group {
    margin-bottom: 24px;
}
.workflow-title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}
.workflow-title .toggle-icon {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: -1px;
}
.issue-workflow-group.is-open .workflow-title .toggle-icon {
    transform: rotate(45deg);
}
.issue-workflow-group:not(.is-open) .workflow-title .toggle-icon {
    transform: rotate(-135deg);
}
.workflow-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.28s ease, opacity 0.22s ease;
    will-change: max-height, opacity;
}
.issue-workflow-group.is-open .workflow-body {
    opacity: 1;
}

/* 태스크 카드 */
.issue-task-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.task-card-header .task-name {
    font-size: 13px;
    font-weight: 600;
}
.task-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.task-card-footer .dept-date {
    flex-wrap: wrap;
}
.dept-date {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* 이슈 카드: 부서 pill — 2개 이상이면 가로로 겹쳐 보이게(폭 절약) */
.issue-dept-pills {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.issue-dept-pills .dept-pill {
    flex-shrink: 0;
}

.issue-dept-pills--overlap .dept-pill {
    margin-left: -12px;
    padding: 2px 10px;
    font-size: 11px;
    border-radius: 6px;
}

.issue-dept-pills--overlap .dept-pill:first-child {
    margin-left: 0;
}

.issue-dept-pills--overlap .dept-pill:nth-child(1) { z-index: 5; position: relative; }
.issue-dept-pills--overlap .dept-pill:nth-child(2) { z-index: 4; position: relative; }
.issue-dept-pills--overlap .dept-pill:nth-child(3) { z-index: 3; position: relative; }
.issue-dept-pills--overlap .dept-pill:nth-child(4) { z-index: 2; position: relative; }
.issue-dept-pills--overlap .dept-pill:nth-child(n+5) { z-index: 1; position: relative; }

.issue-dept-pills--overlap .dept-pill:hover {
    z-index: 10;
}
.date-text {
    font-size: 11px;
    color: var(--color-dark-grey);
}
.btn-toggle-activity {
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--color-dark-grey);
    cursor: pointer;
    flex-shrink: 0;
}

/* 4-Depth 액티비티 리스트 */
.activity-list {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-light-grey);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--color-dark-grey);
}
/* 이슈 뷰·업무 테이블 지연 텍스트 */
.date-text.delayed-text, 
.activity-date.delayed-text,
.task-table-wrapper .task-grid.task-row > div.font-text.delayed-text {
    color: var(--color-red);
}
.delay-icon-small {
    transform: scale(0.85); /* 뱃지 크기 살짝 축소 */
    transform-origin: right center;
    position: relative; /* absolute 해제해서 텍스트 옆에 자연스럽게 배치 */
    right: auto;
    top: auto;
}
.delay-icon-small .delay-badge,
.delay-icon-small .danger-badge {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
}
/* 이슈보드: tooltip scrollWidth 밀림 방지 — 평소 숨김, hover 시 카드 안쪽으로 표시 */
.issue-board-container .delay-tooltip,
.issue-board-container .danger-tooltip {
    display: none;
}
.issue-board-container .delay-badge:hover .delay-tooltip,
.issue-board-container .danger-badge:hover .danger-tooltip {
    display: block;
    left: auto;
    right: 0;
    transform: none;
}
/* =========================================
   논의(Discussion) 뱃지 스타일
   ========================================= */
   .discussion-badge {
    font-size: 10px;
    font-weight: 700;
    width: 50px;
    height: 24px;
    border-radius: 8px;
    opacity: 1;

    white-space: nowrap;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}
.badge-important {
    color: var(--color-black);
    border: 2px solid var(--color-dark-red);
}
.badge-review {
    color: var(--color-black);
    border: 2px solid var(--color-dark-red);
}
.badge-confirm {
    color: var(--color-black);
    border: 2px solid var(--color-dark-red);
}
/* =========================================
   업무 상세 사이드바 (넓은 레이아웃 & #F5F5F5)
   ========================================= */
   .detail-sidebar-wide {
    position: fixed;
    top: 0;
    right: -600px; /* 훨씬 넓어진 600px 너비 */
    width: 100%;
    max-width: 600px;
    height: 100vh;
    background-color: #F5F5F5; /* 기획안 배경색 */
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease-in-out;
}
.detail-sidebar-wide.active { right: 0; }

.detail-sidebar-wide .sidebar-header { 
    padding: 24px 40px; 
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
}
.detail-sidebar-wide .sidebar-header .detail-type-icon--copyable {
    cursor: pointer;
}
.detail-sidebar-wide .sidebar-content.wide-content { 
    padding: 0 40px 40px 40px; 
    flex: 1; 
    overflow-y: auto; 
    background-color: #F5F5F5;
}

/* 타이틀 인풋 (크고 시원하게) */
.detail-title-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    color: var(--color-black);
    margin-bottom: 10px;
    padding: 0;
    font-size: 24px; /* Title 사이즈 */
    font-weight: 700;
}
.detail-title-input::placeholder { color: #A0A0A0; }

/* 폼 리스트 레이아웃 (간격 넓게) */
.detail-form-list { display: flex; flex-direction: column; gap: 24px; }
.detail-form-row { display: flex; align-items: center; min-height: 28px; }
.detail-form-row .form-label { width: 100px; color: var(--color-black); font-weight: 500; flex-shrink: 0; }
.detail-form-row .form-value { flex: 1; display: flex; align-items: center; }

/* 날짜 그리드 */
.date-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%; flex-wrap: wrap; }
.date-input-item { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--color-black); font-weight: 600; width : 47%; }
#task-detail-sidebar .date-input-item--schedule-end.is-schedule-delayed .btn-add-date.role-limit,
#task-detail-sidebar .date-input-item--schedule-end.is-schedule-overdue .btn-add-date.role-limit {
    color: var(--color-red);
}
#task-detail-sidebar .date-input-item--schedule-end.is-schedule-delayed #detail-end-date,
#task-detail-sidebar .date-input-item--schedule-end.is-schedule-overdue #detail-end-date {
    accent-color: var(--color-red);
}
.hidden-date-input { position: absolute; opacity: 0; pointer-events: none; } /* 달력을 숨겨두고 버튼 클릭으로 띄우는 용도 */


/* 다중 선택 드롭다운 리스트 */
.dropdown-wrapper { position: relative; }
.custom-dropdown-list {
    position: absolute; top: 100%; left: 0; width: 200px;
    background: var(--color-white); border: 1px solid var(--color-light-grey); 
    max-height: 240px; overflow-y: auto; z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-top: 8px;
    border-radius: 4px;
}
.custom-dropdown-list li { padding: 12px 16px; cursor: pointer; font-size: 12px; color: var(--color-dark-grey); }
.custom-dropdown-list li:hover { background-color: #F5F5F5; color: var(--color-black); }

/* 알약(Pill) */
.selected-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.select-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; font-size: 12px;
    background-color: var(--color-white); border: 1px solid #ddd;
    color: var(--color-black); border-radius: 100px;
}
.select-pill .remove-btn { cursor: pointer; color: #aaa; font-size: 10px; }
.select-pill .remove-btn:hover { color: var(--color-black); }
.pill-checkbox {
    font-size: 10px;
    font-weight: 700;
    padding: 6px;
    border-radius: 100px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* 상세 사이드바 논의 알약: 체크된 항목은 기존 강조, 미선택만 흐림 */
#detail-discussion-section .pill-checkbox {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
#detail-discussion-section .pill-checkbox:has(input:checked) {
    opacity: 1;
}
#detail-discussion-section .pill-checkbox:not(:has(input:checked)):hover {
    opacity: 0.9;
}

/* =========================================
   워크플로우 타임라인 (상대 기간 간트차트)
   ========================================= */
#pane-timeline {
    width: 100%;
    background: #F9F9F9;
    min-height: 400px;
    position: relative;
    border-top: 1px solid #EAEAEA;
    display: flex;
    flex-direction: column;
}

/* 워크플로 타임라인 상단: 업무관리와 동일 스케일·줌 UI */
.wf-timeline-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 0 8px;
    flex-shrink: 0;
    background: var(--color-white);
    border-bottom: 1px solid #EAEAEA;
}

/* 업무관리 타임라인(tasks.php)과 동일한 래퍼·그리드 패턴: 가로 스크롤은 grid 영역에서만 */
.wf-workflow-timeline-wrapper {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: 0;
    background-color: var(--color-white);
    position: relative;
}

.wf-workflow-timeline-grid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}

.wf-workflow-gantt-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-white);
    flex-shrink: 0;
    overflow: visible;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

.wf-gantt-scroll-inner {
    position: relative;
    flex: 1;
    min-height: 280px;
    box-sizing: border-box;
    overflow: visible;
}

.wf-gantt-bars-mount {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

/* 헤더 행: flex 자식이 뷰포트에 맞춰 압축되지 않도록(달/주 셀 노출) */
#pane-timeline .wf-gantt-header-row.gantt-header-row {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    border-bottom: 1px solid #EAEAEA;
    background: var(--color-white);
}

.gantt-chart-wrapper { position: relative; }

/* 헤더 (달, 주) — 워크플로·레거시 단일 래퍼 공통 */
.gantt-header-row { display: flex; border-bottom: 1px solid #EAEAEA; background: var(--color-white); }
.gantt-header-cell {
    border-right: 1px solid #EAEAEA; text-align: left; padding: 8px 12px;
    font-size: 11px; color: var(--color-grey); box-sizing: border-box;
    flex-shrink: 0;
}

/* 본문 영역 안 세로 그리드(헤더는 형제 요소이므로 top: 0) */
.wf-gantt-bars-mount .wf-gantt-grid-bg.gantt-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #EAEAEA 1px, transparent 1px);
    background-size: var(--wf-gantt-day-width, 30px) 100%;
    z-index: 1;
    pointer-events: none;
}

/* 레거시: 헤더가 같은 래퍼 안에 있을 때 */
.gantt-chart-wrapper > .gantt-grid-bg {
    position: absolute; top: 60px; left: 0; width: 100%; height: calc(100% - 60px);
    background-image: linear-gradient(to right, #EAEAEA 1px, transparent 1px);
    background-size: 20px 100%; z-index: 1;
}

/* 전체 묶음 회색 배경 박스 */
.gantt-workflow-bg-box {
    position: absolute;
    background-color: #EFEFEF; /* 시안의 연회색 배경 */
    border-radius: 8px;
    z-index: 5;
}

.gantt-bar-item {
    position: absolute; display: flex; align-items: center;
    padding: 0 12px; font-size: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 10; box-sizing: border-box; 
}

.gantt-workflow-title { 
    background-color: #B3E5FC; 
    color: #01579B; 
    font-weight: 700; 
    height: 28px;
    border-radius: 4px;
}

/* 2-Depth: Task 막대 (상단 포인트 라인) */
.gantt-task-bar { 
    background-color: var(--color-white); 
    border: 1px solid #E0E0E0; 
    color: var(--color-black); 
    font-weight: 600;
    height: 36px;
    border-radius: 6px;
    border-top: 4px solid #B3E5FC;
}
.gantt-activity-bar { 
    background-color: var(--color-white); 
    border: 1px solid #CCC; 
    color: var(--color-dark-grey); 
    height: 30px;
    border-radius: 5px; /* 알약 형태 */
    font-size: 11px;
}

/* 워크플로 타임라인: TASK 막대는 좌우 이동만(리사이즈 없음), Activity는 드래그·리사이즈 */
.wf-gantt-bars-mount .gantt-task-bar.wf-gantt-task-bar {
    pointer-events: auto;
    cursor: grab;
}
.wf-gantt-bars-mount .gantt-task-bar.wf-gantt-task-bar.is-dragging {
    cursor: grabbing !important;
    opacity: 0.92;
    z-index: 1100 !important;
}
#pane-timeline .wf-gantt-bars-mount .gantt-task-bar.wf-gantt-task-bar:hover {
    z-index: 850 !important;
}
.wf-gantt-bars-mount .gantt-activity-bar.wf-gantt-activity {
    position: absolute;
    overflow: visible;
    cursor: grab;
}
.wf-gantt-bars-mount .gantt-activity-bar.wf-gantt-activity.is-dragging {
    cursor: grabbing !important;
    opacity: 0.7;
    z-index: 100 !important;
    transition: none !important;
}
#pane-timeline .wf-gantt-bars-mount .gantt-activity-bar.wf-gantt-activity:hover {
    z-index: 999 !important;
}

/* 워크플로 타임라인 — 좁은 막대(<120px): tasks.js is-mini-capsule과 동일 호버 확장 */
.wf-gantt-bars-mount .gantt-activity-bar.wf-gantt-activity.is-mini-capsule,
.wf-gantt-bars-mount .gantt-task-bar.wf-gantt-task-bar.is-mini-capsule {
    padding-left: 6px;
    padding-right: 6px;
    overflow: hidden;
}

.wf-gantt-bars-mount .gantt-activity-bar.wf-gantt-activity.is-mini-capsule:hover:not(.is-dragging),
.wf-gantt-bars-mount .gantt-task-bar.wf-gantt-task-bar.is-mini-capsule:hover:not(.is-dragging) {
    overflow: visible !important;
    width: max-content !important;
    max-width: min(92vw, 420px);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.12);
    z-index: 1000 !important;
    transition: box-shadow 0.15s ease;
}

.wf-gantt-bars-mount .gantt-activity-bar.wf-gantt-activity.is-mini-capsule:hover:not(.is-dragging) .gantt-text,
.wf-gantt-bars-mount .gantt-task-bar.wf-gantt-task-bar.is-mini-capsule:hover:not(.is-dragging) .gantt-text {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

/* Activity 위쪽 꼬리 삼각형 */
.gantt-triangle-up {
    position: absolute; top: -5px; left: 16px;
    width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 5px solid #CCC;
}
.gantt-triangle-up::after {
    content: ''; position: absolute; top: 1px; left: -4px;
    width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-bottom: 4px solid var(--color-white);
}
.gantt-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gantt-dept-badge {
    border: 1px solid var(--color-black); border-radius: 12px; padding: 2px 6px;
    font-size: 10px; margin-right: 6px; font-weight: 600; background: var(--color-white);
}
/* 3-Depth: Activity 캡슐 */
.gantt-activity-pill {
    background-color: var(--color-white);
    border: 1px solid #D0D0D0;
    color: var(--color-black);
}

/* 부서 뱃지 (타임라인용) */
.gantt-dept-badge {
    border: 1px solid var(--color-black);
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 10px;
    margin-right: 6px;
    font-weight: 500;
}
/* =========================================
   워크플로우 템플릿 모달 스타일 (tasks.php)
   ========================================= */
   .template-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 99999; /* 모든 것 위에 띄우기 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-modal-container {
    background-color: var(--color-white);
    width: 786px; /* 기획안처럼 넉넉한 가로 사이즈 */
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    overflow: hidden;
    position: relative;
}

.template-modal-header {
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
}

.template-modal-title,
.template-modal-header h2 {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    color: var(--color-black);
    flex: 1;
    min-width: 0;
}

.template-modal-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    transition: transform 0.2s;
}

.template-modal-close:hover {
    transform: scale(1.08);
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-grey);
    transition: color 0.2s;
}
.btn-close-modal:hover { color: var(--color-black); }

.template-modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 테이블 헤더 및 로우 비율 설정 */
.template-list-header {
    display: flex;
    margin: 0 24px;
    height: 51px;
    font-size: 13px;
    color: var(--color-grey);
    border-bottom: 1px solid var(--color-light-grey);
}
.template-modal-header > div{
    border-bottom: 1px solid var(--color-light-grey);
}
.template-list-content {
    overflow-y: auto;
    padding: 0 24px;
    max-height: 500px;
}

.template-item-row {
    display: flex;
    height: 51px;
    border-bottom: 1px solid var(--color-light-grey);
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.template-item-row:hover {
    background-color: #F4F6F8; /* 살짝 시원한 호버 효과 */
}
.template-list-header > .col-category {border-right : none;}
.template-list-header .col-name, .template-item-row .col-name { flex: 2.5; color: var(--color-black); font-size: 14px; }
.template-list-header .col-dept, .template-item-row .col-dept { flex: 1.5; display: flex; flex-wrap: wrap; gap: 4px; }
.template-list-header .col-category, .template-item-row .col-category { flex: 3; color: var(--color-grey); font-size: 13px; }
.template-list-header .col-period, .template-item-row .col-period { flex: 0.5; text-align: right; font-size: 14px; }

.btn-close-modal {
    position: absolute;
    right: 24px;
    top: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-black);
    padding: 4px;
    display: flex;
    transition: transform 0.2s;
}
.btn-close-modal:hover { transform: scale(1.1); }

/* 페이지네이션 스타일 */
.template-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
    gap: 12px;
}
.page-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--color-grey);
    cursor: pointer;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-btn.active {
    font-weight: 700;
    color: var(--color-black);
}
.page-btn.nav-btn {
    font-size: 12px;
    color: #D0D0D0; /* 연한 회색 화살표 */
}
.page-btn:hover:not(.active) { color: var(--color-black); }

/* 구분(Category) 영역 말줄임표 처리 */
.col-category {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 16px; /* 텍스트가 짤릴 때 여유 공간 */
}
/* =========================================
   실시간 알림 팝업 (Toast Notification)
   ========================================= */
.toast-container {
    position: fixed;
    top: 28px;
    left: 28px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: none;
}

.toast-item {
    width: 320px;
    padding: 16px;
    border-radius: 8px;
    color: var(--color-white);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    position: relative;
    cursor: pointer;
    animation: slideInRight 0.3s ease-out;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: auto;
}

/* 4가지 알림 상태별 컬러 */
.toast-item.info    { background-color: #2D8CFF; } /* Blue */
.toast-item.alert   { background-color: #F9BF15; } /* Yellow */
.toast-item.danger  { background-color: #E64646; } /* Red */
.toast-item.success { background-color: #28C76F; } /* Green */

.toast-notification-card {
    width: 324px;
    min-height: 126px;
    padding: 16px 18px 18px;
    border-radius: 10px;
    display: block;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}

.toast-notification-card.toast-tone-blue { background: #1478f2; }
.toast-notification-card.toast-tone-yellow { background: #ffc400; }
.toast-notification-card.toast-tone-orange { background: #f05b43; }
.toast-notification-card.toast-tone-green { background: #17c842; }

.toast-header,
.toast-title,
.toast-body {
    display: flex;
    align-items: center;
}

.toast-header {
    justify-content: space-between;
    margin-bottom: 27px;
}

.toast-title {
    gap: 7px;
    font-size: 16px;
    font-weight: 500;
}

.toast-title-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toast-body {
    align-items: flex-start;
}

.toast-notification-card .noti-avatar {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(25, 25, 25, 0.35);
}

.toast-content {
    flex: 1;
    font-size: 13px;
    line-height: 1.45;
    word-break: keep-all;
}

.btn-toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}

.btn-toast-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}
.btn-toast-close:hover { color: var(--color-white); }

@media (max-width: 480px) {
    .toast-container {
        top: 16px;
        right: 16px;
        left: 16px;
    }

    .toast-notification-card {
        width: 100%;
    }
}

/* 애니메이션 */
@keyframes slideInRight {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-item.fade-out {
    opacity: 0;
    transform: translateX(-20px);
}
/* =========================================
   알림 내역 페이지 (Notifications) - 디자인 시안 완벽 반영
   ========================================= */

/* --- 헤더 및 탭 영역 --- */
.notifications-header {
    display: flex;
    flex-direction: column;
    padding: 40px 48px 0 48px; /* 좌우 여백 넓게 */
    position: relative;
    background-color: var(--color-light-grey);
}

.notifications-header .page-title {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 32px;
}

.header-controls {
    display: flex;
    justify-content: center; /* 탭을 중앙에 */
    align-items: center;
    position: relative;
    padding-bottom: 16px;
}

/* 독립된 버튼 형태의 탭 */
.notification-tabs {
    display: flex;
    gap: 12px;
}

.notification-tabs .tab-btn {
    padding: 10px 40px; /* 시안처럼 넓적하게 */
    border-radius: 8px;
    border: 1px solid var(--color-light-grey);
    background-color: var(--color-white);
    color: var(--color-grey);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* 아주 미세한 그림자 */
    transition: all 0.2s;
}

.notification-tabs .tab-btn.active {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
    font-weight: 600;
}

/* 필터/정렬 우측 절대 배치 */
.notification-filters {
    position: absolute;
    right: 0;
    display: flex;
    gap: 20px;
    align-items: center;
}

/* =========================================
   알림 페이지 커스텀 드롭다운 (필터/정렬)
   ========================================= */
   .dropdown-wrapper {
    position: relative;
}

/* 네가 지정해준 디자인 값 완벽 반영 */
.custom-dropdown-menu {
    display: none; /* 기본은 숨김 */
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: #F5F5F5;
    border: 1px solid #404040;
    box-shadow: 0px 2px 10px 0px #0000000D;
    border-radius: 8px; /* 모서리 살짝 둥글게 */
    min-width: 180px;
    z-index: 1000;
    padding: 12px 0;
    flex-direction: column;
}

.custom-dropdown-menu.show {
    display: flex;
}

.custom-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: #0C0C0C;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-dropdown-menu .dropdown-item:hover {
    background-color: #EAEAEA;
}

/* 활성화(선택된) 메뉴 표시 */
.custom-dropdown-menu .dropdown-item.active {
    font-weight: 700;
    background-color: #EAEAEA;
}

/* 페이지 상단 툴바: 필터·정렬 묶음 (tasks.php 목록 헤더, my_tasks 내 작업 등) */
.planner-page-filter-sort-wrap {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-shrink: 0;
}

/* 필터·정렬 트리거 (전 페이지 공통: 텍스트 12px / 500, 아이콘 16×16) */
.planner-toolbar-fs,
button.planner-toolbar-fs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-dark-grey);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
}

.planner-toolbar-fs .planner-toolbar-fs-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.notification-filters .btn-filter-icon {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-black);
    cursor: pointer;
}

.notification-filters .sort-select {
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--color-black);
    cursor: pointer;
    outline: none;
}

/* --- 리스트 영역 --- */
.notifications-list-container {
    padding: 0 48px 60px 48px;
}

/* 그룹 헤더 (▲ 오늘) */
.notification-group-header {
    width: 100%;
    padding: 24px 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark-grey);
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-bottom: 1px solid var(--color-light-grey);
    background: transparent;
    text-align: left;
}

.notification-group-chevron {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--color-dark-grey);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.notification-group-header.collapsed .notification-group-chevron {
    transform: rotate(180deg);
}

.notification-date-subgroup {
    margin-top: 4px;
}

.notification-date-header {
    padding: 14px 0 6px 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-grey);
}

.notifications-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 28px 0 8px;
}

.noti-page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--color-grey);
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
}

.noti-page-btn:hover:not(:disabled) {
    color: var(--color-black);
    background: #f4f4f4;
}

.noti-page-btn.is-active {
    color: var(--color-black);
    font-weight: 600;
}

.noti-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.btn-bookmark .noti-bookmark-icon {
    display: block;
    opacity: 0.45;
}

.btn-bookmark.active .noti-bookmark-icon {
    opacity: 1;
}

.notification-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    opacity: 0.6;
    border-bottom: 1px solid #F4F4F4; /* 아주 연한 테두리 */
}

/* 안읽음 상태 배경 미세 조정 */
.notification-item.unread {
    opacity: 1;
    background-color: var(--color-white); /* 시안에 맞게 아주 미세한 푸른빛/회색빛 */
}

.notification-item--navigable .noti-col-middle {
    cursor: pointer;
}

.notification-item--navigable .noti-col-middle:hover {
    color: var(--color-blue, #355fe9);
}

/* 시안처럼 3단 칼럼 정렬을 위한 Flex 레이아웃 */
.noti-col-left {
    display: flex;
    align-items: center;
    flex: 1; /* 남는 공간 다 차지 (가장 길게) */
    min-width: 0; 
}

.noti-col-middle {
    width: 350px; /* 가운데 관련 업무 영역 고정 너비 (줄맞춤용) */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-grey);
    padding: 0 16px;
}

.noti-type-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.noti-col-right {
    width: 130px; /* 우측 시간 영역 고정 너비 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

/* 아바타 및 텍스트 디테일 */
.noti-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    margin-right: 12px;
    flex-shrink: 0;
}
.noti-avatar.grey { background-color: #717171; }
.noti-avatar.green { background-color: #28C76F; }
.noti-avatar.purple { background-color: #9C27B0; }
.noti-avatar.blue { background-color: #82A5FF; }
.noti-avatar.orange { background-color: #FF9800; }
.noti-avatar.red { background-color: #F44336; }

.noti-text {
    font-size: 12px;
    color: var(--color-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.noti-text strong {
    font-weight: 500;
}

/* 북마크 및 시간 */
.btn-bookmark {
    background: none;
    border: none;
    cursor: pointer;
    color: #D0D0D0;
}
.btn-bookmark.active { color: var(--color-black); }

.noti-time {
    font-size: 12px;
    color: var(--color-grey);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 60px; /* 시간이 차지하는 고정 너비 */
}

.unread-dot {
    width: 5px;
    height: 5px;
    background-color: #E64646;
    border-radius: 50%;
    display: inline-block;
}
/* =========================================
   알림 그룹 헤더 토글 (아코디언) 기능
   ========================================= */
.notification-group-header {
    cursor: pointer;
    user-select: none;
}

/* 리스트 숨김 처리 */
.notification-group-list.collapsed {
    display: none;
}
/* =========================================
   타임라인 캡슐 미니 모드 처리 (말줄임표)
   ========================================= */
   .gantt-bar {
    display: flex;
    align-items: center;
    overflow: hidden; /* 밖으로 삐져나가는 것 방지 */
}

.gantt-task-name {
    white-space: nowrap; /* 줄바꿈 금지 */
    overflow: hidden; /* 영역을 넘어가면 숨김 */
    text-overflow: ellipsis; /* 말줄임표(...) 표시 */
    min-width: 0; /* flex-item이 컨테이너 밖으로 밀려나는 것 방지 */
}

/* 막대기 너비가 좁을 때 발동하는 전용 클래스 */
.gantt-bar.is-mini-capsule {
    padding-left: 6px;
    padding-right: 6px;
}

/* 캔버스 내 TASK/Activity: `is-mini-capsule`(JS: 일정 폭 < 120px)일 때만 호버로 이름 확장 */
.timeline-bar-row .gantt-bar.is-mini-capsule.depth-2:hover:not(.is-dragging),
.gantt-canvas-container .gantt-bar.is-mini-capsule.depth-3:hover:not(.is-dragging),
.gantt-canvas-container .gantt-bar.is-mini-capsule.depth-4:hover:not(.is-dragging) {
    overflow: visible !important;
    width: max-content !important;
    max-width: min(92vw, 420px);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.12);
    z-index: 1000 !important;
    transition: box-shadow 0.15s ease;
}

.gantt-canvas-container .gantt-bar.is-mini-capsule.depth-4:hover:not(.is-dragging) {
    transform: none !important;
}

.timeline-bar-row .gantt-bar.is-mini-capsule.depth-2:hover:not(.is-dragging) .gantt-task-name,
.gantt-canvas-container .gantt-bar.is-mini-capsule.depth-3:hover:not(.is-dragging) .gantt-task-name,
.gantt-canvas-container .gantt-bar.is-mini-capsule.depth-4:hover:not(.is-dragging) .gantt-task-name {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}
.timeline-bar-row .gantt-bar.is-mini-capsule.depth-2:hover:not(.is-dragging) .gantt-bar-label,
.gantt-canvas-container .gantt-bar.is-mini-capsule.depth-3:hover:not(.is-dragging) .gantt-bar-label {
    overflow: visible;
    max-width: none;
}
.timeline-bar-row .gantt-bar.is-mini-capsule.depth-2:hover:not(.is-dragging) .timeline-dept-pills,
.gantt-canvas-container .gantt-bar.is-mini-capsule.depth-3:hover:not(.is-dragging) .timeline-dept-pills,
.gantt-canvas-container .gantt-bar.is-mini-capsule.depth-4:hover:not(.is-dragging) .timeline-dept-pills {
    overflow: visible;
    flex-shrink: 0;
}

.major-tasks-sidebar-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    padding-left: 0;
    padding-bottom: 16px;      
    background-color: transparent; 
    align-items: flex-start;
}

.major-tasks-title {
    font-size: 11px;
    color: var(--color-grey);
    margin-bottom: 4px;
    padding-left: 20px;
}

.major-task-item {
    font-size: 12px;
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 20px;
    height: 24px;
    cursor: pointer;
    transition: color 0.2s;
}

.major-task-item:hover {
    color: var(--color-blue);
}

/* Workflow 추가 옵션 드롭다운 */
.workflow-add-dropdown {
    position: absolute;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 140px;
    margin-top: 4px;
    margin-left: 28px;
}

.workflow-add-dropdown button {
    padding: 12px 16px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 13px;
    color: var(--color-black, #0c0c0c);
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: inherit;
}

.workflow-add-dropdown button:hover {
    background-color: var(--color-light-grey);
}
/* jsPlumb 연결점 (평소엔 투명, 마우스 올리면 표시) */
.timeline-endpoint {
    opacity: 0; 
    z-index: 9999 !important; 
    transition: all 0.2s ease-in-out;
}

body:not(.planner-view-mode):not(.planner-role-viewer) .timeline-endpoint {
    cursor: crosshair;
}

.timeline-endpoint.show-endpoint {
    opacity: 1;
}

body.is-drawing-connection .gantt-bar,
body.is-drawing-connection .timeline-bar-row,
body.is-drawing-connection .gantt-canvas-container {
    pointer-events: none !important; 
}

body.is-drawing-connection .timeline-endpoint {
    pointer-events: auto !important; 
    opacity: 1 !important;
    transform: scale(1.5);
}

body.planner-view-mode .timeline-endpoint,
html.planner-role-viewer .timeline-endpoint,
html.planner-role-no-timeline-edit .timeline-endpoint,
body.planner-view-mode #view-timeline .jtk-endpoint,
html.planner-role-viewer #view-timeline .jtk-endpoint,
html.planner-role-no-timeline-edit #view-timeline .jtk-endpoint {
    pointer-events: none !important;
    cursor: inherit !important;
}

/* Lv4~6·보기 모드 — #view-timeline 간트 수정 UI 비활성 */
body.planner-view-mode #view-timeline .gantt-bar,
body.planner-view-mode #view-timeline .gantt-bar.jtk-endpoint-anchor,
html.planner-role-viewer #view-timeline .gantt-bar,
html.planner-role-viewer #view-timeline .gantt-bar.jtk-endpoint-anchor,
html.planner-role-no-timeline-edit #view-timeline .gantt-bar,
html.planner-role-no-timeline-edit #view-timeline .gantt-bar.jtk-endpoint-anchor {
    cursor: default !important;
}
body.planner-view-mode #view-timeline .gantt-bar.depth-2,
body.planner-view-mode #view-timeline .gantt-bar.depth-2.jtk-endpoint-anchor,
html.planner-role-viewer #view-timeline .gantt-bar.depth-2,
html.planner-role-viewer #view-timeline .gantt-bar.depth-2.jtk-endpoint-anchor,
html.planner-role-no-timeline-edit #view-timeline .gantt-bar.depth-2,
html.planner-role-no-timeline-edit #view-timeline .gantt-bar.depth-2.jtk-endpoint-anchor {
    cursor: pointer !important;
}
body.planner-view-mode #view-timeline .gantt-bar .delay-badge,
body.planner-view-mode #view-timeline .gantt-bar .danger-badge,
html.planner-role-viewer #view-timeline .gantt-bar .delay-badge,
html.planner-role-viewer #view-timeline .gantt-bar .danger-badge,
html.planner-role-no-timeline-edit #view-timeline .gantt-bar .delay-badge,
html.planner-role-no-timeline-edit #view-timeline .gantt-bar .danger-badge {
    cursor: help !important;
}
body.planner-view-mode #view-timeline .gantt-bar .toggle-icon,
html.planner-role-viewer #view-timeline .gantt-bar .toggle-icon,
html.planner-role-no-timeline-edit #view-timeline .gantt-bar .toggle-icon {
    cursor: pointer !important;
}
body.planner-view-mode #view-timeline .gantt-bar:hover .resize-handle,
html.planner-role-viewer #view-timeline .gantt-bar:hover .resize-handle,
html.planner-role-no-timeline-edit #view-timeline .gantt-bar:hover .resize-handle {
    display: none;
}

html.planner-role-no-timeline-edit .btn-timeline-save {
    display: none !important;
}

.jtk-connector {
    z-index: 9998 !important;
    cursor: pointer;
}
body.planner-view-mode #view-timeline .jtk-connector,
html.planner-role-viewer #view-timeline .jtk-connector,
html.planner-role-no-timeline-edit #view-timeline .jtk-connector {
    cursor: default !important;
    pointer-events: none !important;
}
.jtk-endpoint.jtk-dragging circle,
.jtk-floating-endpoint circle {
    fill: transparent !important;
    stroke: transparent !important;
    display: none !important;
    opacity: 0 !important;
}


.jtk-floating-endpoint {
    background: transparent !important;
    box-shadow: none !important;
}

.endpoint-drop-hover {
    fill: var(--color-blue, #2b6dd4) !important;
}
/* 🌟 말줄임표 기본 설정 */
.more-dots {
    color: var(--color-black, #0c0c0c);
    margin-left: 6px;
    font-weight: bold;
    letter-spacing: 1px;
    height: 21px;
    display: inline-block;
    align-self: center;
    position: relative; /* 툴팁 위치 기준 */
    cursor: pointer;
}

/* 🌟 툴팁 박스 (속성이 아닌 실제 HTML 요소를 사용!) */
.more-dots .tooltip-box {
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
    white-space: nowrap; /* br 태그로 줄바꿈하므로 nowrap 설정 */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
    line-height: 1.5; /* 줄간격 확보 */
}

/* 🌟 말풍선 꼬리(삼각형) */
.more-dots .tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* 마우스를 올렸을 때 툴팁 박스 보여주기 */
.more-dots:hover .tooltip-box {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 8px); /* 자연스럽게 떠오르는 애니메이션 */
}


/* 🌟 [수정] 기존에 있던 overlap-mode를 강화해서 동전처럼 겹치게 만들기 */
.overlap-mode {
    display: flex;
    align-items: center;
}

/* 담당자 아바타 겹치기 */
.overlap-mode .avatar-pill {
    border: 2px solid var(--color-white, #FBFBFB);
    margin-left: -10px; /* 앞사람 뒤로 쏙 파고들기 */
    position: relative;
}

.overlap-mode .avatar-pill:first-child { margin-left: 0; z-index: 5; }
.overlap-mode .avatar-pill:nth-child(2) { z-index: 4; }
.overlap-mode .avatar-pill:nth-child(3) { z-index: 3; }
.overlap-mode .avatar-pill:nth-child(4) { z-index: 2; }
.overlap-mode .avatar-pill:nth-child(5) { z-index: 1; }

/* 카테고리 텍스트 겹치기 (기획안처럼 첫 번째만 보여주고 줄이기 위함) */
.overlap-mode .category-text-item {
    display: inline-block;
}

/* =========================================
   타임라인 스케일 & 줌 컨트롤 (기획안 디자인)
   ========================================= */
.timeline-toolbar {
    display: flex;
}
.timeline-scale-control {
    display: flex;
    align-items: center;
    gap: 16px; /* 글자와 기호 사이 간격 */
}

.scale-dropdown-wrapper {
    position: relative;
}

/* 현재 상태 텍스트 (ex. '달') */
.scale-current-label {
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
    cursor: pointer;
    padding: 0;
    text-decoration: underline; 
    text-underline-offset: 1px;
}

/* 드롭다운 메뉴 (기획안 반영) */
.scale-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100px;
    height: 80px;
    background-color: #F5F5F5;
    border: 1px solid var(--color-dark-grey);
    border-radius: 8px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 8px 16px;
    box-sizing: border-box;
}

.scale-dropdown-item {
    background: transparent;
    border: none;
    text-align: left;
    font-size: 12px;
    cursor: pointer;
    color: var(--color-dark-grey);
    padding: 0;
}

.scale-dropdown-item.active {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* - , + 줌 버튼 */
.scale-zoom-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
}

.scale-zoom-controls button {
    background: transparent;
    border: none;
    color: var(--color-black);
    cursor: pointer;
    padding: 0;
    width: 24px;   /* 클릭하기 편한 여백 확보 */
    height: 24px;
    position: relative; /* 자식(가상요소) 절대위치의 기준 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-zoom-out::before,
.btn-zoom-in::before {
    content: '';
    position: absolute;
    width: 12px;           /* 요청하신 길이 12px */
    height: 1.5px;         /* 요청하신 두께 1.5px */
    background-color: currentColor; /* 부모의 색상을 그대로 상속받음 (hover시 파란색 변환) */
}
.btn-zoom-in::after {
    content: '';
    position: absolute;
    width: 1.5px;         
    height: 12px;         
    background-color: currentColor;
}

.scale-zoom-controls button:hover {
    color: var(--color-blue); /* 마우스 올렸을 때 살짝 파란색 포인트를 줘서 UX 향상 */
}
/* =========================================
   정렬(Sort) 드롭다운 (기획안 디자인)
   ========================================= */
   .sort-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 197px;
    height: 76px;
    background-color: var(--color-white);
    border: 1px solid var(--color-dark-grey);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
    box-sizing: border-box;
}

.sort-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sort-label {
    font-size: 12px;
    color: var(--color-black);
}

.sort-options {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sort-btn {
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--color-dark-grey);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

/* 🌟 선택된 옵션 스타일 (여백 없는 언더라인) */
.sort-btn.active {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 0px; /* 텍스트에 딱 붙는 밑줄 */
}

.sort-divider {
    font-size: 12px;
    color: var(--color-dark-grey);
}
/* =========================================
   타임라인 그리드 특이일 배경색
   ========================================= */

/* 🌟 주차 숫자 강조 (공휴일/15일 포함 시) */
.timeline-week-cell .week-num.is-special {
    color: var(--color-red) !important; /* 포인트 레드 */
}
/* --- 반응형 (≤1024px) --- */
@media screen and (max-width: 1024px) {
    .tasks-page-header {
        grid-template-columns: 1fr;
        justify-items: stretch;
        gap: 12px;
    }
    .task-tabs {
        grid-column: 1;
        justify-self: center;
        gap: 24px 32px;
        flex-wrap: wrap;
        max-width: 100%;
        padding: 0 8px;
    }
    .tasks-page-header__actions {
        grid-column: 1;
        justify-self: end;
    }
    .list-table,
    .workflow-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-right: 1px solid var(--color-light-grey);
        border-left: 1px solid var(--color-light-grey);
    }
    .task-tab {
        font-size: 11px;
        padding-bottom: 14px;
    }
    .task-tab.is-active {
        padding-bottom: 12px;
    }
    .workflow-grid {
        min-width: 900px;
    }
    .row-brand-group {
        min-width: 900px;
    }
    .task-grid { min-width: 1000px; }
    .add-btn-row { min-width: 1000px; border-right: 1px solid var(--color-light-grey); border-left: 1px solid var(--color-light-grey); }
    .timeline-wrapper {
        min-width: 800px; 
    }
    #view-timeline {
        width: 100%;
    }
}

/* =========================================
   조직도 (pages/ppl.php)
   ========================================= */

/* ── 페이지 레이아웃 ──────────────────────── */
.page-content--ppl {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    height: calc(100vh - 60px); /* 헤더 높이 제외 */
    background: var(--color-white);
}

.ppl-page-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 32px 0;
    flex-shrink: 0;
}

.ppl-link-banner {
    width: 320px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-title);
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: default;
    user-select: none;
    flex-shrink: 0;
}

/* ── 탭 ──────────────────────────────────── */
.ppl-view-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.ppl-view-tab {
    padding: 6px 16px;
    font-size: 12px;
    background: none;
    border: 1px solid var(--color-light-grey);
    color: var(--color-grey);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.ppl-view-tab.is-active {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* ── 앱 영역 ──────────────────────────────── */
.ppl-app {
    flex: 1;
    min-height: 0;
    padding: 32px 32px 40px;
    overflow: auto;
}

.ppl-view-pane { display: block; }
.ppl-view-pane.d-none { display: none; }

/* ── 카드뷰 줌 컨트롤 ──────────────────────── */
.page-content--ppl { position: relative; }

.ppl-zoom-ctrl {
    position: sticky;
    bottom: 24px;
    width: 112px;
    height: 40px;
    background: var(--color-dark-grey);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 100;
    margin: 0 auto;
    pointer-events: auto;
}

.ppl-zoom-btn {
    width: 56px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}
.ppl-zoom-btn:hover { opacity: 0.7; }

.ppl-zoom-divider {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
}

/* ── 카드 보기 — Communities 행 ───────────── */
.ppl-communities-row {
    display: flex;
    flex-wrap: wrap;
    gap: 48px 160px; /* row-gap col-gap */
    align-items: flex-start;
}

/* ── Community 블록 ───────────────────────── */
.ppl-community-block {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ppl-community-bar {
    background: var(--color-dark-grey);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    padding: 0 16px;
    height: 36px;
    width: 100%;
    border: none;
    cursor: default;
    margin-bottom: 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ── Teams 행 ─────────────────────────────── */
.ppl-teams-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* ── Team 컬럼 ────────────────────────────── */
.ppl-team-col {
    width: 160px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ppl-team-bar {
    background: var(--color-grey);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    padding: 0 8px;
    height: 25px;
    width: 100%;
    border: none;
    cursor: pointer;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}
.ppl-team-bar:hover { opacity: 0.85; }

/* ── 팀원 카드 ────────────────────────────── */
.ppl-member-card {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-light-grey);
    padding: 8px;
    background: var(--color-white);
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.ppl-member-card:hover { background: var(--color-light-grey); }

.ppl-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 600;
    overflow: hidden;
}

.ppl-avatar-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
}

.ppl-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.ppl-card-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ppl-card-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ppl-card-position {
    font-size: 10px;
    color: var(--color-grey);
}

/* ── 리스트 보기 ──────────────────────────── */
.ppl-list-head {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr 2fr;
    background: var(--color-light-grey);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-dark-grey);
    margin-bottom: 4px;
}

.ppl-grid-row {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr 2fr;
    padding: 8px 16px;
    font-size: 12px;
    align-items: center;
    border-bottom: 1px solid var(--color-light-grey);
}

.ppl-chart-mount { width: 100%; }

.ppl-community-block-list { margin-bottom: 8px; }
.ppl-team-block-list { padding-left: 16px; }
.ppl-members-wrap { padding-left: 32px; }

.ppl-row-community { background: var(--color-light-grey); font-weight: 600; }
.ppl-row-team { background: var(--color-white); }
.ppl-row-member { background: var(--color-white); font-size: 11px; }

.ppl-level-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    margin-right: 6px;
    font-weight: 500;
}
.ppl-level-badge--community { background: var(--color-dark-grey); color: var(--color-white); }
.ppl-level-badge--team      { background: var(--color-grey);      color: var(--color-white); }

.ppl-name-btn {
    background: none;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.ppl-name-btn:hover { color: var(--color-blue); }

.ppl-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px 2px 0;
    font-size: 10px;
    color: var(--color-grey);
}

.ppl-member-indent { width: 16px; display: inline-block; }
.ppl-member-avatar { width: 22px; height: 22px; margin-right: 6px; }

.ppl-kpi-link {
    font-size: 11px;
    color: var(--color-grey);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppl-col-org      { display: flex; align-items: center; }
.ppl-col-kpi      { color: var(--color-grey); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-col-position { color: var(--color-dark-grey); }
.ppl-col-email    { color: var(--color-dark-grey); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }

/* ── 상태 메시지 ──────────────────────────── */
.ppl-status-msg {
    padding: 40px;
    text-align: center;
    font-size: 13px;
    color: var(--color-grey);
}
.ppl-status-msg--error { color: var(--color-red, #d43a2b); }

/* ── 모달 ─────────────────────────────────── */
.ppl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ppl-modal-overlay.d-none { display: none; }

.ppl-modal-panel {
    background: var(--color-white);
    width: 480px;
    max-width: calc(100vw - 40px);
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.ppl-modal-panel--team  { width: 1012px; background: var(--color-white); }
.ppl-modal-panel--member { width: 400px; }

.ppl-modal-close {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 1;
    filter: brightness(0) invert(1); /* dark 헤더 위 X버튼 흰색 */
}

/* 팀 모달: 연한 회색 배경이므로 X버튼 다크로 */
.ppl-modal-panel--team .ppl-modal-close { filter: none; }

.ppl-modal-hero {
    background: var(--color-dark-grey);
    padding: 28px 24px 20px;
}
.ppl-modal-hero-title {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
}
.ppl-modal-crumb {
    color: var(--color-light-grey);
    font-size: 12px;
    margin-top: 4px;
}

/* 팀 모달 inner wrapper: X버튼 공간 확보 + 좌우하단 여백 */
.ppl-team-modal-inner {
    margin: 80px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 팀 모달 hero: 전체 dark 아님 — 내부 bar만 dark */
.ppl-modal-panel--team .ppl-modal-hero {
    background: var(--color-lighter-grey);
    padding: 0;
}

/* 팀명 dark 배너 */
.ppl-team-hero-bar {
    background: var(--color-grey);
    padding: 16px 24px;
}

/* KPI 영역: 흰 배경, 충분한 여백 */
.ppl-modal-panel--team #ppl-team-modal-kpi {
    padding: 24px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--color-dark-grey);
}
.ppl-modal-body { padding: 24px; }

/* 팀원 카드 영역: 연한 회색 배경 */
.ppl-modal-panel--team .ppl-modal-body {
    background: var(--color-white);
    padding: 20px 0;
    overflow-y: auto;
}
.ppl-view-tabs{display: none;}
.ppl-kpi-html { font-size: 13px; line-height: 1.6; color: var(--color-dark-grey); }
.ppl-kpi-empty { color: var(--color-grey); font-size: 13px; }

.ppl-team-member-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 0;
}

/* ── 팀 모달 멤버 카드 ─────────────────────── */
.ppl-tmc {
    border: 1px solid var(--color-light-grey);
    padding: 14px;
    background: var(--color-white);
    cursor: pointer;
    transition: background 0.12s;
}
.ppl-tmc:hover { background: #f8f8f8; }

.ppl-tmc-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ppl-tmc-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 600;
    overflow: hidden;
}

.ppl-tmc-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ppl-tmc-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-black);
    word-break: break-word;
}

.ppl-tmc-email {
    font-size: 11px;
    color: var(--color-grey);
    word-break: break-all;
}

.ppl-tmc-position {
    font-size: 11px;
    color: var(--color-grey);
}

.ppl-tmc-rnr {
    margin-top: 10px;
    font-size: 11px;
    color: var(--color-dark-grey);
    line-height: 1.65;
    border-top: 1px solid var(--color-light-grey);
    padding-top: 10px;
}

.ppl-modal-section { margin-top: 20px; }
.ppl-modal-section-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--color-black); }
.ppl-rnr-text { font-size: 13px; line-height: 1.6; color: var(--color-dark-grey); }
.ppl-rnr-list { padding-left: 18px; margin: 0; }
.ppl-rnr-list li { margin-bottom: 4px; }

/* 멤버 모달 */
.ppl-member-modal-body { padding: 24px; }
.ppl-member-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-top: 12px;
}
.ppl-member-modal-avatar-wrap .ppl-avatar-fallback,
.ppl-member-modal-avatar-wrap .ppl-avatar-img {
    width: 56px;
    height: 56px;
    font-size: 20px;
}
.ppl-member-modal-name { font-size: 16px; font-weight: 700; color: var(--color-black); }
.ppl-member-modal-meta { font-size: 12px; color: var(--color-grey); margin-top: 2px; }
.page-content .key-events-header {
    margin: 12px 15px;
}
#btn-add-key-event{
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-dark-grey);
    border-radius: 4px;
    padding: 8px 16px;
}

/* ============================================================
   Key Events (일정 관리) — 독립 스타일 (ke-cal-* / ke-* 전용)
   ============================================================ */

/* ── 레이아웃 높이 ─────────────────────────────────────────── */
#key-events-app #ke-view-main        { height: calc(100vh - 140px); }
#key-events-app .my-tasks-split--dashboard { height: 100%; }

#ke-view-main .ke-filter-summary-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* 필터 칩 표시 시 그리드를 3행으로 확장 */
#key-events-app .my-tasks-split--dashboard.has-ke-filter {
    grid-template-rows: auto auto minmax(0, 1fr);
}
#key-events-app .my-tasks-split--dashboard.has-ke-filter .my-dash-title-cell,
#key-events-app .my-tasks-split--dashboard.has-ke-filter .my-dash-cal-header-cell {
    grid-row: 2;
}
#key-events-app .my-tasks-split--dashboard.has-ke-filter .my-work-panel,
#key-events-app .my-tasks-split--dashboard.has-ke-filter .ke-cal-panel {
    grid-row: 3;
}
#key-events-app .my-work-panel,
#key-events-app .ke-cal-panel        { height: 100%; border-radius: 12px;}

/* 좌: 이벤트 목록 패널 */
#key-events-app .my-work-panel {
    border-color: var(--color-grey);
    background: var(--color-white);
    padding: 0;
    overflow: hidden;
}
#key-events-app #ke-list-host {
    background: var(--color-white);
    padding-right: 0;
}

/* ── 우: 캘린더 패널 (ke-cal-* 독립 클래스) ───────────────── */
.ke-cal-panel {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    overflow: hidden;
}
.ke-cal-grid-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ke-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    font-size: 12px;
    color: var(--color-dark-grey);
    font-weight: 600;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.ke-cal-weekdays .ke-weekend { color: #e85d5d; }

/* 캘린더 셀 그리드 */
.ke-cal-cells {
    --week-count: 6;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-width: 0;
}
.ke-cal-week {
    position: relative;
    --bar-top-offset: 24px;
    --bar-row-height: 22px;
    height: calc(100% / var(--week-count));
}
.ke-cal-week-cells {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    height: 100%;
    min-width: 0;
}
.ke-cal-cell {
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    height: 100%;
    padding-bottom: 4px;
    background: var(--color-white);
    font-size: var(--font-text);
    min-width: 0;
}
.ke-cal-cell:nth-child(7n) { border-right: none; }

/* 셀 상태 modifier */
.ke-cal-cell--muted    { background: #fbfbfb; }
.ke-cal-cell--flex-day { background: var(--color-sky-blue); }

.ke-cal-cell--muted   .ke-cal-daynum { color: #c8c8c8; }
.ke-cal-cell--weekend .ke-cal-daynum { color: #e85d5d; }

.ke-cal-daynum {
    font-weight: 400;
    color: var(--color-black);
    margin-bottom: 4px;
    position: relative;
    z-index: 2;
    padding: 6px 4px 0;
    font-size: 12px;
}
.ke-flex-day {
    color: var(--color-dark-blue);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 2px;
    padding: 0 4px;
}

/* 바(bar) 절대 위치 레이어 */
.ke-cal-week-bars {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--bar-top-offset);
    pointer-events: none;
    z-index: 1;
}
.ke-cal-task-bar {
    position: absolute;
    left: calc(var(--bar-left) + 2px);
    width: calc(var(--bar-width) - 4px);
    top: calc(var(--bar-lane) * var(--bar-row-height));
    height: 20px;
    border-radius: 6px;
    background: var(--bar-color);
    color: #111827;
    display: flex;
    align-items: center;
    padding: 0 6px 0 8px;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
}
/* 홈 캘린더 key event 바 오버레이 — 높이/위치는 home_dashboard.css에서 지정 */
.my-cal-week-ke-bars {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--bar-top-offset, 24px);
    pointer-events: none;
}
.my-cal-week-ke-bars .ke-cal-task-bar--home {
    pointer-events: auto;
    color: var(--color-white);
    font-weight: 500;
    opacity: 0.92;
}

.ke-cal-task-bar__label {
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    font-weight: 400;
}

/* 캘린더 더보기 버튼 */
.ke-cal-more-btn {
    position: absolute;
    left: 4px;
    top: calc(var(--bar-lane) * var(--bar-row-height));
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    color: var(--color-dark-grey, #666);
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
}
.ke-cal-more-btn:hover {
    color: var(--color-blue, #355FE9);
    text-decoration: underline;
}

.ke-cal-more-popover {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 30;
    background: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    min-width: 200px;
    max-width: 280px;
    max-height: 220px;
    overflow-y: auto;
    text-decoration: none;
    line-height: 1.4;
}
.ke-cal-more-btn:hover .ke-cal-more-popover,
.ke-cal-more-btn:focus-within .ke-cal-more-popover {
    display: block;
}
.ke-cal-more-popover__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ke-cal-more-popover__item:hover {
    background: var(--color-light-grey);
}

/* ── Left panel: Event list ─────────────────────────────── */
.ke-brand-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black);
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 1;
}
.ke-brand-header__toggle {
    font-size: 11px;
    color: var(--color-dark-grey);
    transition: transform 0.2s;
    display: inline-block;
}
.ke-brand-group.is-collapsed .ke-brand-header__toggle {
    transform: rotate(180deg);
}
.ke-brand-events {
    background: var(--color-light-grey);
    margin: 0 16px 14px;
    border-radius: 6px;
    overflow: hidden;
}
.ke-brand-group.is-collapsed .ke-brand-events {
    display: none;
}
.ke-event-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    align-items: center;
    gap: 30px;
    padding: 10px 16px;
    border-bottom: 1px solid #d8d8d8;
    background: var(--color-white);
    transition: background 0.12s;
}
.ke-event-row:last-child { border-bottom: none; }
.ke-event-row:hover      { background: #f5f5f5; cursor: pointer; }

/* Type badge — colored text only (no bg pill) */
.ke-type-badge {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}
.ke-type--open     { color: var(--color-orange); }
.ke-type--launch   { color: var(--color-blue); }
.ke-type--launching { color: var(--color-blue); }
.ke-type--event    { color: var(--color-green); }
.ke-type--space-open { color: var(--color-orange); }
.ke-type--global-sales { color: #c9a227; }
.ke-type--service  { color: #9c27b0; }
.ke-type--system   { color: #7c3aed; }
.ke-type--press    { color: var(--color-green); }
.ke-type--frequent { color: #9c27b0; }
.ke-type--notice   { color: #7c3aed; }
.ke-type--other    { color: var(--color-dark-grey); }

.ke-event-name {
    font-size: 13px;
    color: var(--color-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ke-event-datetime {
    font-size: 12px;
    color: var(--color-dark-grey);
    white-space: nowrap;
}
.ke-dday-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 3px 6px;
    border: 1px solid var(--color-black);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-black);
    white-space: nowrap;
}
.ke-dday-badge--past  { border-color: var(--color-dark-grey); color: var(--color-dark-grey); }
.ke-dday-badge--today { background: var(--color-black); color: #fff; border-color: var(--color-black); }

#ke-cal-panel {
    border: 1px solid var(--color-grey);
}

/* ============================================================
   Key Events — 새로운 일정 만들기 모달
   ============================================================ */
.ke-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(234,234,234,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.ke-modal-overlay.d-none { display: none; }

.ke-modal-box {
    background: var(--color-white);
    width: 540px;
    max-width: calc(100vw - 40px);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 2컬럼 와이드 모달 */
.ke-modal-box--wide {
    width: 1200px;
    max-width: calc(100vw - 40px);
}

.ke-modal-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

.ke-modal-left {
    width: 50%;
    flex-shrink: 0;
    overflow-y: auto;
}

.ke-modal-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 24px;
    overflow-y: auto;
}

.ke-new-editor-host {
    flex: 1;
    min-height: 0;
}

.ke-new-editor-host .toastui-editor-defaultUI {
    height: 100% !important;
}

.ke-new-editor-host .ProseMirror {
    height: 100% !important;
}

.ke-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
    flex-shrink: 0;
}

.ke-modal-title {
    font-size: var(--font-subtitle);
    font-weight: 500;
    color: var(--color-black);
}

.ke-modal-body {
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.ke-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ke-modal-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ke-modal-label {
    font-size: var(--font-text);
    font-weight: 500;
    color: var(--color-dark-grey);
}

/* ── Inputs ─────────────────────────────────────────────── */
.ke-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    font-size: var(--font-text);
    color: var(--color-black);
    background: var(--color-white);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.ke-input::placeholder { color: var(--color-grey); }
.ke-input:focus { border-color: var(--color-dark-grey); }

/* ── Select ─────────────────────────────────────────────── */
.ke-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ke-select {
    width: 100%;
    padding: 10px 32px 10px 12px;
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    font-size: var(--font-text);
    color: var(--color-black);
    background: var(--color-white);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.ke-select:focus { border-color: var(--color-dark-grey); }
.ke-select:disabled {
    background: var(--color-lighter-grey);
    color: var(--color-grey);
    cursor: not-allowed;
}
.ke-select-arrow {
    position: absolute;
    right: 10px;
    font-size: 10px;
    color: var(--color-dark-grey);
    pointer-events: none;
}

/* ── Time row ───────────────────────────────────────────── */
.ke-time-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ke-select-wrap--time {
    flex: 1;
}
.ke-select-wrap--time .ke-select {
    width: 100%;
}
.ke-time-sep {
    font-size: var(--font-text);
    color: var(--color-dark-grey);
    flex-shrink: 0;
}

/* ── 일정 구분 라디오 ─────────────────────────────────────── */
.ke-type-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ke-type-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-text);
    color: var(--color-black);
    cursor: pointer;
    user-select: none;
}
.ke-type-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-grey);
    border-radius: 2px;
    background: var(--color-white);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background 0.12s, border-color 0.12s;
}
.ke-type-radio:checked {
    background: var(--color-black);
    border-color: var(--color-black);
}

/* ── 기간 날짜 블록 ──────────────────────────────────────── */
.ke-date-range-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ke-date-range-block + .ke-date-range-block {
    margin-top: 14px;
}
.ke-date-range-label {
    font-size: var(--font-subtitle);
    font-weight: 500;
    color: var(--color-dark-grey);
}

/* ── 기간으로 입력하기 ────────────────────────────────────── */
.ke-toggle-range-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--font-text);
    color: var(--color-dark-grey);
    cursor: pointer;
    text-decoration: underline;
    text-align: right;
    align-self: flex-end;
    margin-top: -6px;
}
.ke-toggle-range-btn:hover { color: var(--color-black); }

/* ── 일정 생성 버튼 ──────────────────────────────────────── */
.ke-modal-submit {
    margin: 24px auto 0;
    padding: 14px;
    width: 100%;
    font-size: var(--font-text);
    border-radius: 4px;
    flex-shrink: 0;
}
#btn-ke-delete-detail{
    background-color: var(--color-light-grey);
    border:none;
}
#btn-ke-create-event{width : 50%; margin: 24px auto 24px;}
/* ============================================================
   Key Events — 일정 상세 모달
   ============================================================ */
.ke-detail-box {
    width: 580px;
}
.ke-detail-body {
    padding: 20px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    overflow-y: auto;
}
.ke-detail-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.ke-detail-info-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ke-detail-info-field--full {
    width: 100%;
}
.ke-detail-label {
    font-size: var(--font-text);
    color: var(--color-grey);
    font-weight: 400;
}
.ke-detail-value {
    font-size: var(--font-text);
    color: var(--color-black);
    font-weight: 500;
}
#ke-detail-type{
    color: var(--color-blue);
}
#ke-btn-link-confirm{
    border-radius: 4px;
}
.ke-detail-divider {
    border: none;
    border-top: 1px solid var(--color-light-grey);
    margin: 4px 0;
}
.ke-link-input-row {
    display: flex;
    gap: 6px;
    width: 100%;
    align-items: center;
}
.ke-link-input-row.d-none { display: none; }

/* 날짜 읽기 전용 표시 */
.ke-detail-date-display {
    color: var(--color-black);
    font-weight: 500;
    font-size: var(--font-text);
}

/* 내용 섹션 */
.ke-detail-content-section {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    padding-bottom: 8px;
}

/* 일정 상세 — 하단 버튼 영역 */
.ke-detail-btn-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 24px;
    flex-shrink: 0;
}

.ke-detail-btn-row {
    display: flex;
    gap: 8px;
}

.ke-detail-btn {
    flex: 1;
    padding: 12px 0;
    font-size: var(--font-text);
    text-align: center;
}

/* 삭제 확인 모달 */
.ke-delete-confirm-box {
    background: var(--color-white);
    width: 360px;
    max-width: calc(100vw - 40px);
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.ke-delete-confirm-text {
    font-size: var(--font-subtitle);
    font-weight: 500;
    color: var(--color-black);
    text-align: center;
}

.ke-delete-confirm-btns {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* 일정 상세 — 내용 읽기 전용 뷰 */
.ke-detail-content-view {
    min-height: 80px;
    padding: 12px;
    border: 1px solid var(--color-grey);
    font-size: var(--font-text);
    line-height: 1.6;
    color: var(--color-black);
    white-space: pre-wrap;
    word-break: break-word;
}
.ke-detail-content-view.toastui-editor-contents,
.ke-detail-content-view.ke-detail-content-view--html {
    white-space: normal;
}
.ke-detail-content-view.toastui-editor-contents img,
.ke-detail-content-view.ke-detail-content-view--html img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
    border-radius: 4px;
}
#ke-new-editor-host{
    padding: 0;
    border: none;
}
.ke-detail-body{
    margin-bottom: 20px;
}
.ke-detail-body .detail-form-row{
    align-items: flex-end !important;
}
/* =========================================
   알림 리스트 커서 (클릭 가능 영역 표시)
   ========================================= */
.noti-col-left { cursor: pointer; }

/* =========================================
   필터/정렬 아이콘 활성화 상태 강조
   ========================================= */
.planner-toolbar-fs.is-active {
    color: var(--color-blue);
}
.planner-toolbar-fs.is-active .planner-toolbar-fs-icon {
    filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2000%) hue-rotate(210deg) brightness(95%);
}

/* =========================================
   내 업무 날짜 필터 탭 선택 상태 강조
   ========================================= */
.my-date-filter-tabs {
    display: flex;
    gap: 6px;
    margin: 8px 0;
    flex-wrap: wrap;
}
.my-date-filter-btn {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--color-dark-grey);
}
.my-date-filter-btn.is-active,
.my-date-filter-tabs .date-filter-tab.is-active {
    color: var(--color-black);
    font-weight: 600;
    border-color: var(--color-black);
    background: var(--color-light-light-grey, #f5f5f5);
}

/* =========================================
   목록 보기 세로 스크롤 (#29)
   .main-content--fixed-height 컨텍스트에서
   #view-list가 남은 높이를 차지하고 세로 스크롤 생성
   ========================================= */
.main-content--fixed-height #view-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* =========================================
   타임라인 레이아웃 고정 (#33, #37)
   #view-timeline .timeline-wrapper의 min-height: unset (ID specificity)을
   .main-content--fixed-height #view-timeline 조합으로 무효화
   - wrapper: 뷰포트 내 고정 높이 + 세로 스크롤 (사이드바+그리드 함께)
   - sidebar: 세로 스크롤 wrapper에 위임
   - grid-area: 가로 스크롤만 담당
   ========================================= */
.main-content--fixed-height #view-timeline .timeline-wrapper {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.main-content--fixed-height .timeline-sidebar {
    overflow-y: visible;
}