#loginOverlay {
        position: fixed;
        inset: 0;
        background: var(--md-sys-color-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }
      .login-dialog {
        background: var(--md-sys-color-surface-container);
        padding: 48px;
        border-radius: var(--radius-lg);
        text-align: center;
        width: 380px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
      }
      .top-app-bar {
        padding: 20px 40px 10px;
        flex-shrink: 0;
      }
      .header-main {
        display: flex;
        justify-content: space-between; /* 양 끝 정렬 (제목-왼쪽, 바-오른쪽) */
        align-items: center;
        max-width: var(--max-width);
        margin: 0 auto;
        gap: 20px; /* 제목과 바 사이 최소 간격 */
        width: 100%;
      }

      /* 제목 스타일 (기존 유지) */
      .editable-title {
        font-size: 28px;
        font-weight: 700;
        border: none;
        background: transparent;
        color: inherit;
        outline: none;
        width: auto;      
        min-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      /* ★ [핵심] 통합 컨트롤 바 디자인 */
      .integrated-control-bar {
        display: flex;
        align-items: center;
        gap: 0; /* 내부 요소 간격은 구분선으로 처리하므로 0 */
        
        /* 둥근 알약 모양 배경 */
        background: var(--md-sys-color-surface);
        border: 1px solid var(--md-sys-color-outline);
        border-radius: 100px; /* 완전 둥글게 */
        padding: 6px 16px;    /* 내부 여백 */
        height: 42px;         /* 높이 고정 */
        
        /* 우측 정렬을 위한 Flex 속성 */
        margin-left: auto;    /* 왼쪽 여백을 다 써서 오른쪽으로 밀어버림 */
        flex-shrink: 0;
        
        /* 그림자 살짝 (입체감) */
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      }

      /* 내부: 검색창 */
      .search-input {
        border: none;
        background: transparent;
        color: inherit;
        font-size: 13px;
        outline: none;
        width: 140px; /* 너비 적당히 */
        margin-left: 8px;
      }

      /* 내부: 구분선 (Vertical Divider) */
      .bar-divider {
        width: 1px;
        height: 14px;
        background: var(--md-sys-color-outline);
        opacity: 0.3;
        margin: 0 10px; /* 좌우 여백 */
      }

      /* 내부: 필터 래퍼 */
      .filter-wrapper {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        font-size: 13px;
        font-weight: 600;
        gap: 4px;
        padding: 4px 6px;
        border-radius: 6px;
        transition: 0.2s;
      }
      .filter-wrapper:hover {
        background: rgba(120,120,120,0.1);
      }

      /* 내부: My Task 버튼 */
      .my-task-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        color: var(--md-sys-color-primary);
        white-space: nowrap;
        padding: 4px 8px;
        border-radius: 100px;
        transition: 0.2s;
      }
      .my-task-btn:hover {
        background: rgba(120,120,120,0.1);
      }
      .my-task-btn.active {
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
      }

      /* 내부: 아이콘 그룹 (멤버/초대) */
      .icon-group {
        display: flex;
        align-items: center;
        gap: 2px;
        transform: translateY(-3px);
      }
      .icon-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 16px;
        padding: 5px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s;
        position: relative; 
      }
      .icon-btn:hover {
        background: transparent;
        transform: scale(1.15);
        opacity: 0.8;
      }
      .icon-group .icon-btn:last-child {
        top: 2px; /* 👥보다 💌가 높아서 2px 정도 강제로 내림 */
      }
      .progress-section {
        max-width: var(--max-width);
        margin: 0 auto 20px;
        padding: 0;
        width: 100%;
      }
      .progress-card {
        background: var(--md-sys-color-surface-container);
        padding: 16px 24px;
        border-radius: var(--radius-lg);
      }
      .progress-info {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 6px;
      }
      .progress-label {
        font-size: 16px;
        font-weight: 700;
        color: var(--md-sys-color-on-surface);
      }
      .progress-number {
        font-size: 28px;
        font-weight: 900;
        color: var(--md-sys-color-primary);
        line-height: 1;
      }
      .progress-track {
        width: 100%;
        height: 12px;
        background: var(--md-sys-color-surface);
        border-radius: 100px;
        overflow: hidden;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
      }
      .progress-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(
          90deg,
          var(--md-sys-color-primary),
          #4facfe
        );
        border-radius: 100px;
        transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .m3-switch {
        position: relative;
        width: 48px;
        height: 28px;
        cursor: pointer;
      }
      .m3-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .slider {
        position: absolute;
        inset: 0;
        background: var(--md-sys-color-outline);
        border-radius: 30px;
        transition: 0.4s;
      }
      .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background: white;
        border-radius: 50%;
        transition: 0.4s;
      }
      input:checked + .slider {
        background: var(--md-sys-color-primary);
      }
      input:checked + .slider:before {
        transform: translateX(20px);
      }

      .input-area-wrapper {
        padding: 0 0 30px;
        flex-shrink: 0;
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
      }
      .input-card {
        background: var(--md-sys-color-surface-container);
        padding: 12px 24px;
        border-radius: var(--radius-lg);
        display: flex;
        gap: 12px;
        align-items: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
      .input-grid {
        display: flex;
        flex: 1;
        gap: 10px;
        align-items: center;
      }
      .field {
        background: var(--md-sys-color-surface);
        border-radius: 12px;
        border: 1px solid var(--md-sys-color-outline);
        padding: 0 16px;
        flex: 1;
        height: 36px;
        display: flex;
        align-items: center;
        position: relative;
      }
      .field input,
      .field select {
        border: none;
        background: transparent;
        outline: none;
        color: inherit;
        font-size: 14px;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
      [data-theme="dark"] select#priorityInput option {
        background-color: #333333;
        color: #e2e2e6;
      }
      #priorityInput {
        color: var(--md-sys-color-on-surface);
      }
      .date-hidden {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: pointer;
      }
      .m3-btn {
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        border: none;
        padding: 0 20px;
        height: 36px;
        border-radius: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
        flex-shrink: 0;
      }

      .board {
        display: flex;
        gap: 24px;
        padding: 0;
        flex-grow: 1;
        overflow: hidden;
        justify-content: center;
        max-width: var(--max-width);
        margin: 0 auto;
        width: 100%;
      }
      .app-signature {
        text-align: center;
        font-size: 10px;
        color: var(--md-sys-color-outline);
        opacity: 0.7;
        height: 40px; line-height: 40px;
      }

      .column {
        flex: 1;
        background: var(--md-sys-color-surface-container);
        border-radius: var(--radius-lg);
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .col-header {
        padding: 12px 24px;
        font-weight: 700;
        font-size: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .task-list {
        flex-grow: 1;
        overflow-y: auto;
        padding: 8px 16px 16px;
        scrollbar-width: none;
      }
      .task-list::-webkit-scrollbar {
        display: none;
      }

      .card {
        background: var(--md-sys-color-surface);
        border-radius: var(--radius-md);
        padding: 12px 14px 12px 22px;
        margin-bottom: 12px;
        border: 1px solid var(--md-sys-color-surface-variant);
        cursor: pointer;
        position: relative;
        transition: var(--transition);
        overflow: hidden;
      }
      .card:hover {
        transform: translateY(-4px);
        border-color: var(--md-sys-color-primary);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      }

      /* --- [5단계 난이도 색상 + 구버전 호환 패치] --- */
      .priority-band {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8px;
        cursor: pointer;
      }

      /* Lv 1 : 단순 (회색) - 구버전 p-low 호환 */
      .p-lv1, .p-low { background: #9e9e9e; } 

      /* Lv 2 : 일반 (파랑) - 구버전 p-mid 호환 */
      .p-lv2, .p-mid { background: #3b82f6; } 

      /* Lv 3 : 중요 (초록) - 신규 */
      .p-lv3 { background: #10b981; } 

      /* Lv 4 : 매우중요 (노랑) - 구버전 p-high 호환 */
      .p-lv4, .p-high { background: #facc15; } 

      /* Lv 5 : 긴급 (빨강) - 구버전 p-urgent 호환 */
      .p-lv5, .p-urgent { background: #ef4444; }

      .card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
      }
      .card-title-text {
        font-weight: 700;
        font-size: 14px;
        line-height: 1.4;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        white-space: nowrap;
      }
      .d-day-badge {
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 8px;
        font-weight: 800;
        flex-shrink: 0;
        color: #000000 !important;
      }
      .d-day-badge.urgent { background: #ffcdd2; }
      .d-day-badge.safe { background: #c8e6c9; }
      .d-day-badge.today { background: #fff59d; }
      .d-day-badge.done-status { background: #d1e4ff; }
      .card-footer {
        font-size: 10px;
        opacity: 0.7;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid var(--md-sys-color-surface-variant);
        padding-top: 6px;
        gap: 8px;
      }
      .card.is-done {
        opacity: 0.6;
        background-color: var(--md-sys-color-surface-variant) !important;
        filter: saturate(0.3);
      }
      .card.is-overdue {
        border: 2px solid #ef4444 !important;
        background-color: rgba(239, 68, 68, 0.05) !important;
      }
      .d-day-badge.overdue { background: #ef4444; color: white !important; }

      .modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: none;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
        z-index: 2000;
      }
      .dialog {
        background: var(--md-sys-color-surface-container);
        border-radius: var(--radius-lg);
        width: 720px;
        height: 85vh;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .dialog-header {
        padding: 30px 40px 20px;
        flex-shrink: 0;
        background: var(--md-sys-color-surface-container);
        border-bottom: 1px solid rgba(120, 120, 120, 0.1);
      }
      .meta-slim-bar {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 13px;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .meta-slim-bar::-webkit-scrollbar { display: none; }
      .meta-chip {
        height: 32px;
        padding: 0 10px;
        border-radius: 6px; 
        border: 1px solid rgba(120, 120, 120, 0.2);
        background: var(--md-sys-color-surface);
        display: flex; align-items: center; justify-content: center;
        transition: 0.2s; cursor: pointer; flex-shrink: 0; gap: 4px;
      }
      .meta-chip:hover {
        background: var(--md-sys-color-surface-variant);
        border-color: var(--md-sys-color-outline);
      }

      /* 날짜 입력창 */
      .meta-chip.date-chip input {
        border: none; background: transparent; color: inherit;
        font-size: 13px; font-weight: 500; outline: none; cursor: pointer;
        width: 90px; text-align: center; font-family: 'Roboto', sans-serif;
      }
      .meta-chip input {
        border: none;
        background: transparent;
        color: inherit;
        font-size: 13px;
        font-weight: 700;
        outline: none;
        cursor: pointer;
        pointer-events: none;
        width: auto;
        text-align: center;
      }
      .meta-chip.assignee-chip { padding: 0 10px; justify-content: flex-start; }
      #modalAssignee {
        border: none; background: transparent; outline: none;
        font-size: 13px; font-weight: 600; color: inherit;
        cursor: pointer; text-align: left; min-width: 50px;
      }
      .meta-chip.assignee-chip input { pointer-events: auto; width: 60px; }
      .check-chip { height: 32px; border-radius: 6px; font-size: 12px; padding: 0 12px; }
      .check-chip.active {
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        border-color: var(--md-sys-color-primary);
      }
      .dialog-body {
        flex: 1;
        overflow-y: auto;
        padding: 15px 40px 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      /* 태스크 설명한 스타일 */
      .editable-desc {
        width: 100%;
        background-color: var(--input-area-bg);
        border-radius: 12px;
        padding: 16px;
        margin-top: 0 !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        min-height: 200px;

        /* [1] 흰색 테두리 및 그림자 강제 제거 */
        outline: none !important; 
        border: 2px solid transparent !important;  
        box-shadow: none !important;

        color: inherit;
        font-size: 15px;
        line-height: 1.6;

        /* [2] 높이 자동 조절 및 레이아웃 깨짐 방지 */
        min-height: 200px;       /* 기본 높이 확보 */
        height: auto !important; /* 내용만큼 늘어나게 강제 */
        flex-shrink: 0;          /* ★핵심: 내용이 길어져도 찌그러지지 않게 버팀 */

        /* [3] 커서 잘 보이게 설정 */
        cursor: text;            
        caret-color: var(--md-sys-color-primary); /* 커서를 테마색(파란색)으로 */

        overflow: visible;      
        white-space: pre-wrap;   
        word-break: break-word;  
      }

      /* 포커스 됐을 때도 스타일 유지 */
      .editable-desc:focus {
        border-color: transparent !important;
        outline: none !important;
      }

      /* placeholder 스타일 */
      .editable-desc:empty:before {
        content: attr(placeholder);
        color: var(--md-sys-color-outline);
        opacity: 0.7;
        pointer-events: none;
        display: block; 
      }

      /* 이미지 스타일 */
      .editable-desc img {
        max-width: 100%;
        border-radius: 8px;
        margin: 8px 0;
        cursor: pointer;
        display: block;
      }
      .link-section {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: var(--md-sys-color-surface);
        padding: 20px;
        border-radius: 12px;
        border: 2px solid transparent;
        box-sizing: border-box;
        flex-shrink: 0;
      }
      .link-section.dragover {
        border-style: dashed;
        border-color: var(--md-sys-color-primary);
        background: var(--md-sys-color-primary-container);
      }
      #modalDesc.dragover {
        background: var(--md-sys-color-primary-container) !important;
        outline: none !important;
        outline-offset: 0 !important;
        border: 2px dashed var(--md-sys-color-primary) !important;
        box-shadow: none !important;
      }
      .chat-input-box {
        position: relative; /* ::after 오버레이 기준점 */
      }
      .chat-input-box.dragover {
        background: var(--md-sys-color-primary-container) !important;
        outline: none !important;
        box-shadow: none !important;
      }
      .chat-input-box.dragover::after {
        content: "";
        position: absolute;
        inset: 0;
        /* 테두리: 2px 파란 점선 */
        border: 2px dashed var(--md-sys-color-primary); 
        border-radius: inherit;
        pointer-events: none;
        box-sizing: border-box;
      }
      .chat-input-box > * {
        position: relative;
        z-index: 1;
      }
      .link-label-row { display: flex; justify-content: space-between; align-items: center; }
      .link-label-txt { font-size: 13px; font-weight: 700; opacity: 0.6; }
      .link-btn-group { display: flex; gap: 8px; }
      .link-action-btn {
        background: var(--md-sys-color-surface-variant);
        border: none;
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        color: inherit;
      }
      .link-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        padding: 8px 14px;
        background: var(--md-sys-color-surface-container);
        border-radius: 8px;
      }
      .link-item a {
        color: var(--md-sys-color-primary);
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 450px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .link-item{
        overflow: hidden; /* 컨테이너 자체도 뚫고 나가지 않게 */
      }

      .link-item a{
        flex: 1 1 auto !important;
        min-width: 0 !important;       /* ✅ flex 말줄임 핵심 */
        max-width: none !important;    /* 고정 450px 때문에 오히려 깨질 수 있어 제거 */
      }

      /* 링크 텍스트(span)가 길어져도 내부에서 말줄임 되게 */
      .link-item a span{
        min-width: 0 !important;
      }

      /* 아이콘 + 텍스트 구조에서 텍스트만 말줄임 처리 */
      .link-item a span:last-child{
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block;
        min-width: 0 !important;
      }

      .del-btn-x {
        background: transparent;
        border: none;
        color: var(--md-sys-color-outline);
        font-size: 20px;
        cursor: pointer;
        font-weight: 300;
      }
      .check-list-preview {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
      }
      .checker-icon {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--md-sys-color-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        border: 2px solid var(--md-sys-color-surface);
        margin-left: -10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .history-section {
        display: flex;
        flex-direction: column;
        gap: 0; 
        margin-top: 0;
        margin-bottom: 0;
        border-bottom: none;
      }
      .history-item:first-child {
        border-top: none !important;
      }
      .history-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        padding: 8px 0;
        border-top: 1px solid var(--md-sys-color-surface-variant); /* 아이템 간 구분선 */
        color: var(--md-sys-color-on-surface);
      }
      /* 다크모드 등 배경색 제거 */
      .history-item, [data-theme="dark"] .history-item { 
        background: transparent; 
        border-left: none; 
        border-radius: 0;
      }
      .history-content { 
        flex: 1; 
        display: flex; 
        align-items: center; 
        gap: 8px; 
        overflow: hidden; /* 전체 컨텐츠 넘침 방지 */
        white-space: nowrap; 
      }

      .history-modifier { 
        font-weight: 700; 
        flex-shrink: 0; /* 이름 영역 크기 고정 */
        line-height: 1.2;
      }

      .history-range { 
        opacity: 0.8; 
        letter-spacing: -0.5px; 
        flex-shrink: 0; /* 날짜 영역이 줄어들지 않도록 고정 (날짜 잘림 방지) */
        /* font-family: monospace; 를 제거하여 폰트 통일 적용 */
      }

      .history-reason { 
        color: var(--md-sys-color-primary); 
        font-weight: 500; 
        margin-left: 4px;
        
        /* [요청사항 반영] 사유가 길어지면 ... 으로 표시 */
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap; 
        flex: 1; /* 남은 공간을 차지하도록 설정 */
        min-width: 0; /* flex 환경에서 ellipsis가 작동하기 위한 필수 조건 */
      }

      .history-time { 
        font-size: 11px; 
        opacity: 0.4; 
        margin-left: auto; 
        flex-shrink: 0; /* 시간 영역 크기 고정 */
      }

      .dialog-footer {
        padding: 20px 60px 30px 40px !important;
        flex-shrink: 0;
        background: var(--md-sys-color-surface-container);
        border-top: 1px solid rgba(120, 120, 120, 0.1);
        box-sizing: border-box; /* 너비 계산 고정 */
      }
      .footer-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        padding: 0 !important; /* 여백 제거 */
        border: none !important; /* 선 제거 */
      }
      .btn-delete-txt {
        background: transparent;
        color: var(--md-sys-color-outline);
        border: none;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        transition: color 0.2s;
      }
      .btn-delete-txt:hover { color: #ef4444; }
      .btn-close-chip {
        height: 36px;
        padding: 0 24px;
        border-radius: 100px;
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        border: none;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        transition: var(--transition);
      }
      .btn-close-chip:hover {
        filter: brightness(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      .no-show { display: none !important; }
      #assigneeFilter {
        background: transparent;
        color: inherit;
        border: none;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        padding: 0 8px;
        outline: none;
        appearance: none;
        text-align: center;
        border-left: 1px solid var(--md-sys-color-outline);
        margin-left: 4px;
        height: 24px;
        line-height: 24px;
      }
      [data-theme="dark"] #assigneeFilter option {
        background-color: var(--md-sys-color-surface-container);
        color: var(--md-sys-color-on-surface);
      }
      /* [신규] 멤버 리스트 스타일 */
      .member-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-bottom: 1px solid var(--md-sys-color-surface-variant);
      }
      .member-row:last-child { border-bottom: none; }
      .member-avatar {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: var(--md-sys-color-primary);
        color: white;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 14px;
        object-fit: cover;
      }
/* 알림 리스트 스타일 */
      .noti-item {
        padding: 16px 24px;
        border-bottom: none;
        cursor: pointer;
        transition: 0.2s;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        position: relative;
      }
      .noti-item::after {
        content: "";
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 0;
        height: 1px;
        background: var(--noti-divider);
        pointer-events: none;
      }
      .noti-item:last-child::after { display: none; }
      .noti-item:hover { background: var(--md-sys-color-surface-container); }

      .noti-icon { font-size: 16px; margin-top: 2px; }
      .noti-content { flex: 1; font-size: 13px; line-height: 1.35; }
      .noti-time { font-size: 11px; opacity: 0.6; margin-top: 4px; }
      .noti-dot { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
/*  태스크 상태 뱃지 디자인 (Soft Style) */
      .title-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-bottom: 16px;
      }
      .title-wrapper input#modalTitle {
        margin-bottom: 0 !important;
        flex: 1;
        margin-left: 7px;
      }
      .status-badge {
        height: 32px; padding: 0 12px; border-radius: 6px;
        font-size: 12px; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; user-select: none;
      }
      #badgeArea { position: relative; } /* 기준점 */
      .status-menu-dropdown {
         position: absolute !important; /* 절대 위치 강제 */
         top: 100% !important; 
         right: 0 !important; 
         margin-top: 4px !important;
         z-index: 9999 !important; /* 제일 위에 뜨게 */
         width: max-content;
         min-width: 100px;
      }
      .btn-delete-txt { display: none !important; }
      /* 라이트 모드 컬러 */
      .badge-todo { background: #f3f4f6; color: #4b5563; }
      .badge-doing { background: #dbeafe; color: #1e40af; }
      .badge-early { background: #dcfce7; color: #166534; }
      .badge-ontime { background: #f3f4f6; color: #1f2937; border: 1px solid #e5e7eb; }
      .badge-late { background: #fee2e2; color: #991b1b; }

      /* 다크 모드 컬러 */
      [data-theme="dark"] .badge-todo { background: #374151; color: #9ca3af; }
      [data-theme="dark"] .badge-doing { background: #1e3a8a; color: #93c5fd; }
      [data-theme="dark"] .badge-early { background: #14532d; color: #86efac; }
      [data-theme="dark"] .badge-ontime { background: #374151; color: #d1d5db; border-color: #4b5563; }
      [data-theme="dark"] .badge-late { background: #7f1d1d; color: #fca5a5; }

/* [신규] 입장/생성 탭 버튼 스타일 */
      .tab-group {
        display: flex;
        background: var(--md-sys-color-surface-variant);
        padding: 4px;
        border-radius: 12px;
        margin-bottom: 20px;
      }
      .tab-btn {
        flex: 1;
        padding: 10px;
        border: none;
        background: transparent;
        border-radius: 8px;
        font-weight: 700;
        font-size: 14px;
        color: var(--md-sys-color-outline);
        cursor: pointer;
        transition: 0.2s;
      }
      .tab-btn.active {
        background: var(--md-sys-color-surface);
        color: var(--md-sys-color-primary);
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      }
      .policy-txt {
        font-size: 12px;
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 16px;
        line-height: 1.4;
        text-align: left;
      }

      /* [신규] 내 정보 수정 모달 전용 스타일 */
      .info-input-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 20px;
      }
      .info-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: left;
      }
      .info-field label {
        font-size: 12px;
        font-weight: 700;
        opacity: 0.6;
      }
      .info-field input {
        padding: 12px;
        border-radius: 8px;
        border: 1px solid var(--md-sys-color-outline);
        background: var(--md-sys-color-surface);
        color: inherit;
        outline: none;
      }
      .profile-edit-img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 20px;
        display: block;
        border: 3px solid var(--md-sys-color-primary);
        cursor: pointer;
      }
      /* 멤버 현황 리스트 스크롤 보강 */
      #memberListArea {
        max-height: 50vh;
        overflow-y: auto;
        padding-right: 8px;
      }
      #memberListArea::-webkit-scrollbar { width: 4px; }
      #memberListArea::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline); border-radius: 10px; }


      /* [신규] 모달 내 담당자 선택박스 스타일 */

#modalAssignee {
        border: none;
        background: transparent;
        outline: none;
        font-size: 13px;
        font-weight: 600;
        color: inherit;
        cursor: pointer;
        text-align: left;
        width: auto;
        min-width: 60px;
      }
#modalAssignee option {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

/* [수정] 메인 화면 담당자 드롭다운 다크모드 패치 */
      [data-theme="dark"] #assigneeInput option {
        background-color: #222426; /* 어두운 회색 배경 */
        color: #e2e2e6;            /* 밝은 글자 */
      }

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    cursor: pointer;
}

/* 추가로 파이어폭스 등 다른 브라우저 대응 */
input[type="date"] {
    appearance: none;
    -moz-appearance: textfield;
}

/* ==========================================================================
   공통 스타일 (Common Styles)
   - PC(Desktop)와 모바일(Mobile) 화면 모두에 적용되는 공통 코드입니다.
   - 상태 드롭다운, 댓글/채팅 UI, 이미지 뷰어 등이 포함됩니다.
   ========================================================================== */

      /* 상태 변경 드롭다운 메뉴 디자인 ▼▼▼ */
    .status-menu-dropdown {
    top: 100%; right: 0; margin-top: 4px;

    /* 배경색: 테마에 따라 흰색/회색 자동 변경 */
    background: var(--md-sys-color-surface-container); 

    /* 테두리: 테마에 맞는 외곽선 색상 */
    border: 1px solid var(--md-sys-color-outline);

    border-radius: 12px;
    width: max-content; 
    min-width: 100%;    
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* 그림자 */
    z-index: 1000; 
    overflow: hidden;
    display: none; 
}

.menu-item {
    display: flex; 
    align-items: center;
    justify-content: flex-start;
    padding-left: 14px;
    gap: 10px;
    padding-right: 16px;
    height: 36px;

    /* 글자색: 테마에 따라 검정/흰색 자동 변경 */
    color: var(--md-sys-color-on-surface); 

    font-size: 14px; 
    font-weight: 500;
    cursor: pointer; 
    transition: 0.2s;

    /* 구분선: 테마에 맞는 연한 선 */
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.menu-item:last-child { 
    border-bottom: none; 
}

.menu-item:hover {
    background: var(--md-sys-color-surface-variant);
}

.menu-item:active { 
    /* 눌렀을 때 효과: 테마 강조색 */
    background: var(--md-sys-color-surface-variant); 
}

/* 댓글 이미지 첨부 관련 스타일 */
      .kakao-chat-bar {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: transparent;
        padding: 0 !important; /* 내부 여백 제거 */
        margin-bottom: 12px;
        border: none;
      }

      /* 사진 미리보기 영역 */
      .comment-img-preview {
        display: flex;
        gap: 8px;
        padding: 0 4px 8px 4px; /* 하단 여백 추가 */
        overflow-x: auto;
      }
      .preview-box {
        position: relative;
        width: 60px; height: 60px;
        border-radius: 12px; /* 둥글게 */
        overflow: hidden;
        border: 1px solid rgba(0,0,0,0.1);
        flex-shrink: 0;
        background: #fff;
      }
      .preview-box img {
        width: 100%; height: 100%; object-fit: cover;
      }
      .preview-close {
        position: absolute; top: 2px; right: 2px;
        background: rgba(0,0,0,0.6); color: white;
        width: 16px; height: 16px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; cursor: pointer;
      }

      /* 입력바 레이아웃 (좌:버튼, 중:입력, 우:전송) */
      .input-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100% !important; /* ★ 가로 100% 강제 */
      }

      /* 좌측 플러스 버튼 */
      .btn-plus {
        width: 32px; height: 32px;
        background: none; border: none; cursor: pointer;
        font-size: 22px; color: var(--md-sys-color-outline);
        display: flex; align-items: center; justify-content: center;
        transition: 0.2s; border-radius: 50%;
        margin-bottom: 0; /* 높이 미세 조정 */
        flex-shrink: 0;
      }
      .btn-plus:hover { background: rgba(0,0,0,0.05); color: var(--md-sys-color-primary); }

      /* 가운데 입력창 (둥근 회색 박스) */
      .chat-input-box {
        flex: 1;
        background: var(--md-sys-color-surface); /* 배경색 */
        border: 1px solid rgba(0,0,0,0.1); /* 연한 테두리 */
        border-radius: 20px; /* 알약 모양 */
        padding: 8px 14px;
        display: flex;
        align-items: center;
        min-height: 38px;
      }

      .chat-textarea {
        width: 100%;
        border: none !important;      /* 테두리 강제 제거 */
        outline: none !important;     /* 포커스 시 파란 테두리 제거 */
        background: transparent;
        color: inherit;
        resize: none;                 /* 크기 조절 핸들 제거 */
        font-size: 14px;
        line-height: 24px;

        height: 24px;                 /* 기본 높이 */
        min-height: 24px;
        max-height: 120px;            /* 최대 높이 제한 */

        /* 스크롤바 숨기기 (핵심) */
        overflow-y: hidden;
        -ms-overflow-style: none;     /* IE/Edge */
        scrollbar-width: none;        /* Firefox */

        padding: 0;
        margin: 0;
        display: block;
        box-shadow: none !important;  /* 혹시 모를 그림자 제거 */
        appearance: none;             /* 기본 UI 제거 */
      }

      /* 크롬, 사파리 스크롤바 숨김 */
      .chat-textarea::-webkit-scrollbar {
        display: none;
      }

      /* 우측 전송 버튼 (노란색/파란색 원형) */
      .btn-send-round {
        width: 32px; height: 32px;
        background: var(--md-sys-color-primary-container); /* 카톡은 노랑, 여기선 테마색 */
        color: var(--md-sys-color-on-primary-container);
        border: none; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        font-size: 14px;
        margin-bottom: 0;
        flex-shrink: 0;
        transition: 0.2s;
      }
      .btn-send-round:hover { filter: brightness(0.95); transform: scale(1.05); }
      .btn-send-round:active { transform: scale(0.95); }

      /* 상대 말풍선 안 이미지 스타일 왼쪽 배치*/
      .comment-attached-img {
        display: block;

        /* 1. 크기 제한 (240px -> 160px로 축소) */
        max-width: 130px;       
        max-height: 130px;      
        width: auto;            /* 원본 비율 유지 */
        height: auto;           /* 원본 비율 유지 */

        /* 2. 디자인 다듬기 */
        border-radius: 12px;    /* 둥근 모서리 */
        border: 1px solid rgba(0,0,0,0.1); /* 아주 옅은 테두리 */

        /* 3. 위치 및 간격 조정 */
        margin-bottom: 6px;     /* 사진 아래 텍스트와 간격 */
        cursor: pointer;        /* 클릭 가능 커서 */
        object-fit: cover;      
      }

      /* 내 말풍선 안 이미지 스타일 오른쪽 배치 */
      .comment-item.me .comment-attached-img {
        margin-left: auto;
      }

      .comment-feed {
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-top: 1px solid rgba(120,120,120,0.1);
        padding-top: 10px;
        flex-shrink: 0;
        padding-left: 7px;
        padding-right: 7px;
        overflow: visible;
      }

      .comment-item{
        display:flex;
        width:100%;
        gap:12px;
        align-items:flex-start; /* ✅ 이거 꼭 */
        overflow: visible;
      }
      .comment-item.me{ flex-direction: row-reverse; }

      .comment-avatar{
        width:32px; height:32px;
        border-radius:50%;
        background: var(--md-sys-color-primary);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:700;
        font-size:12px;
        flex-shrink:0;
      }

      /* ✅ 말풍선 + meta 묶음 */
      .comment-body{
        display: inline-flex;     /* ✅ 폭이 내용만큼만 잡힘 (빈공간 해결) */
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        max-width: 70%;
        position: relative;
        overflow: visible;
      }

      .comment-item.me .comment-body{
        align-items: flex-end;    /* 내 댓글 오른쪽 정렬 유지 */
      }
      .comment-bubble{
        padding: 8px 14px;
        font-size: 14px;
        line-height: 1.5;
        border-radius: 16px;

        white-space: pre-wrap;
        word-break: normal;
        overflow-wrap: break-word;  /* ✅ anywhere 말고 break-word */

        background: var(--chat-other-bg);
        color: var(--chat-other-text);
        box-sizing: border-box;

        max-width: 100%;
      }
      .comment-item.me .comment-bubble{
        background: var(--chat-me-bg);
        color:#000;
        border-bottom-right-radius:4px;
      }

      /* ✅ 여기서 margin-left:auto 절대 금지 */
      .comment-meta{
        display:flex;
        gap:8px;
        font-size:11px;
        opacity:0.5;
        margin-top:4px;
        align-items:center;
        margin-left:0;
      }
      .comment-item.me .comment-meta{ flex-direction: row-reverse; }

      /* ✅ 댓글 리액션(👀 / ✅ / 👍) */
      .reaction-row{
        display:flex;
        gap:6px;
        flex-wrap:wrap;
        margin-top:4px;
      }
      .comment-item.me .reaction-row{
        justify-content:flex-end;
      }

      .reaction-chip{
        display:inline-flex;
        align-items:center;
        gap:4px;
        padding:2px 8px;
        border-radius:999px;
        font-size:12px;
        line-height:1;
        cursor:pointer;
        user-select:none;
        border:1px solid rgba(17, 24, 39, 0.12);
        background: rgba(17, 24, 39, 0.04);
        color: inherit;
        position: relative;
      }
      [data-theme="dark"] .reaction-chip{
        border:1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.06);
      }

      .reaction-chip.active{
        border-color: var(--md-sys-color-primary);
        background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
      }

      .reaction-count{
        font-weight:700;
        font-size:11px;
        opacity:0.75;
      }
      .reaction-chip[data-tip]::after{
        content: attr(data-tip);
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
        transform: translateY(4px);

        padding: 7px 10px;
        border-radius: 12px;
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: -0.2px;

        background: rgba(255,255,255,0.96);
        border: 1px solid rgba(17,24,39,0.14);
        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
        backdrop-filter: blur(10px);

        color: var(--md-sys-color-on-surface);
        white-space: pre-line;
        max-width: 260px;
        text-align: left;
        width: max-content;

        opacity: 0;
        pointer-events: none;
        z-index: 50;
      }

      .reaction-chip[data-tip]::before{
        content: "";
        position: absolute;
        left: 14px;
        bottom: calc(100% + 4px);
        transform: rotate(45deg);

        width: 8px;
        height: 8px;
        background: rgba(255,255,255,0.96);

        border-left: 1px solid rgba(17,24,39,0.14);
        border-top: 1px solid rgba(17,24,39,0.14);

        opacity: 0;
        pointer-events: none;
        z-index: 49;
      }

      /* hover 시 노출 */
      .reaction-chip[data-tip]:hover::after{
        word-break: keep-all;
        overflow-wrap: normal;
        writing-mode: horizontal-tb;
        opacity: 1;
        transform: translateY(0);
      }
      .reaction-chip[data-tip]:hover::before{
        opacity: 1;
      }

      /* 다크 모드 */
      [data-theme="dark"] .reaction-chip[data-tip]::after{
        background: rgba(15,23,42,0.92);
        border: 1px solid rgba(255,255,255,0.14);
        color: rgba(255,255,255,0.92);
      }
      [data-theme="dark"] .reaction-chip[data-tip]::before{
        background: rgba(15,23,42,0.92);
        border-left: 1px solid rgba(255,255,255,0.14);
        border-top: 1px solid rgba(255,255,255,0.14);
      }
      .bubble-wrap{
        position: relative;
        display: inline-block;
        max-width: 100%;
        overflow: visible;
      }

      /* ✅ 슬랙 느낌: 말풍선 끝(오른쪽 상단)에 딱 붙게 */
      .bubble-wrap .reaction-actions{
        position: absolute;
        top: 2px;
        right: 0;

        /* ✅ 말풍선 오른쪽 바깥으로 */
        transform: translateX(calc(100% + 1.5px));

        display: flex;
        gap: 6px;
        padding: 4px 6px;
        border-radius: 10px;
        border: 1px solid rgba(17,24,39,0.12);
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(6px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.12);

        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease, transform .15s ease;
        z-index: 10;
      }


            [data-theme="dark"] .bubble-wrap .reaction-actions{
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(15,23,42,0.82);
      }

      /* ✅ hover는 말풍선 위에서만 */
      .bubble-wrap:hover .reaction-actions{
        opacity: 1;
        pointer-events: auto;
        transform: translateX(calc(100% + 1.5px));
      }

      /* ✅ 내 댓글은 오른쪽 정렬이라, 말풍선 '끝 옆' = 왼쪽 바깥으로 */
      .comment-item.me .bubble-wrap .reaction-actions{
        left: 0;
        right: auto;
        transform: translateX(calc(-100% - 2px));
      }

      .comment-item.me .bubble-wrap:hover .reaction-actions{
        transform: translateX(calc(-100% - 2px));
      }

      /* 버튼 (bubble-wrap 전용만 유지) */
      .bubble-wrap .react-action{
        border: none;
        background: transparent;
        cursor: pointer;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1;
        border-radius: 6px;
      }

      .bubble-wrap .react-action:hover{
        background: rgba(0,0,0,0.06);
      }

      [data-theme="dark"] .bubble-wrap .react-action:hover{
        background: rgba(255,255,255,0.10);
      }

      .comment-item.me .reaction-chip[data-tip]::after{
        left: auto;
        right: 0;
        text-align: right;
      }

      .comment-item.me .reaction-chip[data-tip]::before{
        left: auto;
        right: 14px;
      }

      .delete-cmt-link{
        color:#ef4444;
        cursor:pointer;
        text-decoration: underline;
        margin: 0 4px;
      }

      /* 이미지 뷰어 스타일 */
      .img-viewer-modal {
        display: none; /* 평소엔 숨김 */
        position: fixed;
        z-index: 3000; /* 설명창(2000)보다 더 위에 떠야 함 */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85); /* 배경 어둡게 */
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px); /* 배경 흐림 효과 */
      }

      .viewer-content {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain; /* 비율 유지하며 화면 안에 쏙 */
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(255,255,255,0.1);
        animation: zoomIn 0.2s ease-out; /* 뿅! 하고 나타나는 효과 */
      }

      .close-viewer {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.3s;
        z-index: 3001;
      }
      .close-viewer:hover { color: var(--md-sys-color-primary); }

  


      @keyframes zoomIn {
        from {transform: scale(0.9); opacity: 0;}
        to {transform: scale(1); opacity: 1;}
      }

      .title-input-styled {
        flex: 1; /* 남은 공간 차지 */
        min-width: 0; /* 글자 넘침 방지 */
        font-size: 24px; 
        font-weight: 700;
        border: 1px solid transparent !important;
        background: transparent !important;
        outline: none !important;
        color: inherit;
        padding: 6px 8px;
        border-radius: 8px;
        transition: 0.2s;
        margin: 0 !important;
        line-height: 1.3;
      }
      .title-input-styled:hover, 
      .title-input-styled:focus {
        background: var(--md-sys-color-surface);
        border-color: var(--md-sys-color-outline) !important;
      }

      /* =========================
          Inbox list 
          ========================= */
        #inboxModal .dialog-header {
            border-bottom: 1px solid var(--noti-divider) !important;
            padding: 30px 40px 20px !important; /* 상 30px, 좌우 40px로 닫기버튼과 일직선 */
        }

        #inboxList.dialog-body { gap: 0 !important; } /* 수신함 사이 여백 제거  */

        #inboxModal .dialog-header h2 {
           margin: 0 !important;
           display: inline-block;
           transform: translateX(-10px);
        }

        #inboxModal .dialog-footer {
            border-top: 1px solid var(--noti-divider) !important; /* 푸터 위 실선 */
            padding: 24px 40px 30px !important; /* 좌우 40px 여백 통일 */
            background: transparent !important;
            justify-content: flex-start !important; /* 비우기 버튼 좌측 정렬 */
        }

        /* 2. 바디 리스트 정렬 (좌측 타이틀 & 우측 X버튼 라인 40px 칼각) */
        #inboxList {
            padding: 0 !important;
            /* 라이트 모드일 때 태스크 모달 바디색과 동일하게 설정 */
            background: #f8f9fa !important; 
        }

        /* 다크 모드일 때 태스크 모달 바디색과 동일하게 덮어쓰기 */
        [data-theme="dark"] #inboxList {
            background: rgba(0, 0, 0, 0.3) !important;
        }

        #inboxList .noti-item {
            margin: 0 !important;
            padding: 14px 40px !important;
            padding-left: 65px !important;                 
            border-bottom: 1px solid var(--noti-divider) !important;
            display: flex;
            flex-direction: column;
            gap: 2px;
            border-radius: 0 !important;
            box-shadow: none !important;
            cursor: default;
          }

          /* ✅ divider 중복 제거 */
          #inboxList .noti-item::after { display: none !important; }

          /* ✅ 마지막 항목 border 제거 */
          #inboxList .noti-item:last-child { border-bottom: none !important; }

          /* ✅ unread dot */
          #inboxList .noti-item.unread{
            position: relative;
            background: transparent !important;
          }

          #inboxList .noti-item.unread::before{
            content: "";
            position: absolute;
            left: 40px;                                    /* ✅ dot 위치 */
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--md-sys-color-primary);
          }

          /* unread일 때 텍스트 위계 살짝 강화 */
          #inboxList .noti-item.unread .noti-title { font-weight: 800; }
          #inboxList .noti-item.unread .noti-line1 { font-weight: 600; }

        /* 3. 개별 알림 내 'x' 삭제 버튼 강제 제거 (정렬 방해 요소 삭제) */
        #inboxList .del-btn-x, 
        #inboxList .noti-item .close,
        #inboxList .noti-item button:not(.noti-del-btn) {
          display: none !important;
        }

        #inboxList .noti-item .noti-del-btn {
          display: flex !important;
        }

        /* 텍스트 가독성 및 정렬 설정 */
        #inboxList .noti-title { 
            font-size: 14px; 
            font-weight: 800; 
            color: var(--md-sys-color-primary); 
            margin-bottom: 2px;
        }
        #inboxList .noti-line1 { 
            font-size: 13px; 
            opacity: 0.9; 
            line-height: 1.4;
        }
        #inboxList .noti-time { 
            font-size: 11px; 
            opacity: 0.4; 
            margin-top: 4px; 
        }

        
        /* =========================
        [모달창 내 디자인] 우측 상단 헤더 아이콘 버튼 스타일 (껍데기 벗기기) */
        .btn-header-icon {
          background: transparent !important; /* 회색 배경 제거 */
          border: none !important;            /* 테두리 제거 */
          box-shadow: none !important;        /* 입체감 제거 */
          
          width: 34px; height: 34px;
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          cursor: pointer;
          color: var(--md-sys-color-outline); /* 아이콘 색상 */
          transition: 0.2s;
        }

        /* 마우스 올렸을 때 효과 */
        .btn-header-icon:hover {
          background-color: rgba(255, 255, 255, 0.1) !important;
          color: var(--md-sys-color-on-surface);
        }

        /* 휴지통 특정 스타일 (마우스 올리면 빨강) */
        .btn-header-icon.trash:hover {
          background-color: rgba(239, 68, 68, 0.1) !important;
          color: #ef4444;
        }

        /* =========================
          태스크 모달창 / 일반 모달 디자인
          ========================= */

        .dialog {
          background-color: var(--md-sys-color-surface-container) !important;
          overflow: hidden;
        }
        .dialog-header,
        .dialog-footer {
          background: transparent !important;
          border: none !important; 
        }
        .dialog-body {
          background: transparent !important;
        }


        /* 2. [라이트 모드] 태스크 상세창 디자인 
          - 설명: 제목(#modalTitle)이 있는 창은 A4용지(흰색) 스타일 적용 */
        .dialog:has(#modalTitle) {
          background-color: #ffffff !important; 
        }
        .dialog:has(#modalTitle) .dialog-header {
          border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
          background-color: #ffffff !important;
        }
        .dialog:has(#modalTitle) .dialog-body {
          background-color: #f8f9fa !important; /* 본문만 살짝 회색 */
        }
        .dialog:has(#modalTitle) .dialog-footer {
          border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
          background-color: #ffffff !important;
        }


        /* 3. [다크 모드] 태스크 상세창 디자인 (★여기가 수정됨★) 
          - 중요: 라이트 모드의 '흰색 강제'를 이기기 위해 선택자를 구체적으로 명시 */

        /* (1) 배경색을 다시 어둡게 복구 */
        [data-theme="dark"] .dialog:has(#modalTitle) {
            background-color: var(--md-sys-color-surface-container) !important;
        }

        /* (2) 헤더/푸터도 다시 어둡게 + 구분선은 흰색 투명도 */
        [data-theme="dark"] .dialog:has(#modalTitle) .dialog-header,
        [data-theme="dark"] .dialog:has(#modalTitle) .dialog-footer {
            background-color: var(--md-sys-color-surface-container) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        /* (3) 본문은 깊이감을 위해 약간 더 어둡게 */
        [data-theme="dark"] .dialog:has(#modalTitle) .dialog-body {
            background-color: rgba(0, 0, 0, 0.3) !important;
        }


        /* 4. 내부 카드(설명창, 자료공유) 스타일 & 드래그 효과 */
        /* 라이트 모드 기본 */
        .editable-desc, .link-section {
          background-color: #ffffff !important;        
          border: 1px solid rgba(0, 0, 0, 0.15) !important;
          color: var(--md-sys-color-on-surface) !important;
        }

        /* 다크 모드 오버라이드 */
        [data-theme="dark"] .editable-desc, 
        [data-theme="dark"] .link-section {
          background-color: rgba(255, 255, 255, 0.03) !important;
          border-color: rgba(255, 255, 255, 0.08) !important;
        }

        /* 드래그 오버 효과 (공통) */
        .link-section.dragover, #modalDesc.dragover {
          background-color: var(--md-sys-color-primary-container) !important;
          border: 1px solid transparent !important;
          outline: 2px dashed var(--md-sys-color-primary) !important;
          outline-offset: -2px !important;
          box-shadow: none !important;
        }

        [data-theme]:not([data-theme="dark"]) #inboxModal .dialog {
          background-color: #ffffff !important;
        }

        [data-theme]:not([data-theme="dark"]) #inboxModal .dialog-header {
          background-color: #ffffff !important;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        }

        [data-theme]:not([data-theme="dark"]) #inboxModal .dialog-footer {
          background-color: #ffffff !important;
          border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        }

        /* 메인화면 내 태스크 추가 바 비공개 드롭다운 칩 전용 스타일 */
        #privateMenu {
            background: var(--md-sys-color-surface-container) !important;
            border: 1px solid var(--md-sys-color-outline) !important;
            border-radius: 12px; /* 둥근 모서리 통일 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
            padding: 0 !important; /* 내부 여백 */
            overflow: hidden;
        }
        #privateMenu .menu-item {
            font-size: 14px;
            /* [핵심] 다른 입력칸(field) 높이인 36px와 정확히 일치시킵니다 */
            height: 36px !important; 
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 14px !important;
            border-bottom: 1px solid var(--md-sys-color-surface-variant);
        }

        /* 마지막 항목은 밑줄 제거 */
        #privateMenu .menu-item:last-child {
            border-bottom: none !important;
        }
       /* 여기까지 */

              /* [신규] 3단 컴팩트 헤더 스타일 */
        .compact-header {
          display: flex;
          flex-direction: column;
          padding: 20px 30px 16px !important; /* 여백을 최소화했습니다 */
          gap: 10px; /* 줄 간격 10px */
        }

        .c-row {
          display: flex;
          align-items: center;
          width: 100%;
        }

        /* 1단: 제목 */
        .header-right-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .btn-icon-mini {
          background: transparent; border: none; cursor: pointer;
          color: var(--md-sys-color-outline); padding: 4px; border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
        }
        .btn-icon-mini:hover { background: rgba(0,0,0,0.05); color: var(--md-sys-color-on-surface); }
        .btn-icon-mini.trash:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
        .v-sep { width: 1px; height: 12px; background: var(--md-sys-color-outline); opacity: 0.3; }

        /* 2단: 상태 + 날짜 */
        .row-2 { gap: 12px; }

        /* 상태 토글 슬림형 */
        .status-toggle-slim {
          display: flex;
          background: var(--md-sys-color-surface);
          border: 1px solid var(--md-sys-color-outline);
          border-radius: 6px;
          padding: 2px;
          height: 28px; /* 높이 28px로 고정 */
        }
        .st-btn {
          background: transparent; border: none; border-radius: 4px;
          padding: 0 10px; font-size: 11px; font-weight: 600;
          color: var(--md-sys-color-on-surface); opacity: 0.6; cursor: pointer; transition: 0.2s; height: 100%;
        }
        .st-btn:hover { opacity: 1; }
        .st-btn.active { opacity: 1; color: #fff !important; }
        .st-btn.active#btn-todo { background: #6b7280; }
        .st-btn.active#btn-doing { background: #3b82f6; }
        .st-btn.active#btn-done { background: #10b981; }

        .v-sep-light { width: 1px; height: 14px; background: var(--md-sys-color-outline); opacity: 0.2; }

        /* 날짜 */
        .date-range-compact { display: flex; align-items: center; gap: 4px; }
        .range-arrow { font-size: 10px; opacity: 0.4; margin: 0 2px; }

        /* 공통 미니 칩 (높이 28px) */
        .mini-chip {
          height: 28px;
          border-radius: 6px;
          border: 1px solid rgba(120, 120, 120, 0.2);
          background: var(--md-sys-color-surface);
          display: flex; align-items: center; padding: 0 8px;
          font-size: 12px; cursor: pointer; transition: 0.2s;
          color: var(--md-sys-color-on-surface);
        }
        .mini-chip:hover { border-color: var(--md-sys-color-outline); background: var(--md-sys-color-surface-variant); }
        .mini-chip input {
          border: none; background: transparent; outline: none; color: inherit;
          font-size: 12px; width: 85px; text-align: center; cursor: pointer; font-family: 'Roboto', sans-serif;
        }

        /* 3단: 담당자 + 협업 */
        .row-3 { gap: 8px; }
        .mini-chip.assignee { padding-left: 6px; gap: 2px; }
        .mini-chip .icon { opacity: 0.6; font-size: 13px; }
        .mini-chip select {
          border: none; background: transparent; outline: none; color: inherit;
          font-size: 12px; font-weight: 600; cursor: pointer; min-width: 50px;
        }
        .mini-chip.check-btn.active {
          background: var(--md-sys-color-primary); 
          color: #ffffff !important; /* ★ #000000을 #ffffff로 변경! */
          border-color: transparent;
          font-weight: 700;
        }
        [data-theme="dark"] .mini-chip.check-btn.active {
          color: #000000 !important;
        }
        
        .check-list-preview.compact-list { margin-left: 4px; }
        .check-list-preview.compact-list .checker-icon {
           width: 32px;
           height: 32px;
           font-size: 12px;
           border: 2px solid var(--md-sys-color-surface-container);
          }

        .compact-header {
          display: flex;
          flex-direction: column;
          /* [핵심] 상단 여백을 20px -> 32px로 늘려 시원하게 복구 */
          padding: 32px 40px 20px !important; 
          gap: 12px;
        }

        /* 1단 (제목줄) 스타일 */
        .c-row.row-1 {
          display: flex;
          /* [핵심] 수직 중앙 정렬: 제목과 버튼의 높이 중심을 맞춤 */
          align-items: center; 
          justify-content: space-between;
          width: 100%;
          
          /* 높이 강제 지정으로 정렬 오차 제거 */
          height: 40px; 
          margin-bottom: 4px; /* 아랫줄과 간격 살짝 */
        }

        /* 제목 입력창 */
        .title-input-compact {
          font-size: 18px; /* 제목 크기 */
          font-weight: 700;
          border: none; 
          background: transparent; 
          outline: none;
          width: 100%; 
          color: inherit;
          padding: 0; 
          margin: 0;     

        /* 우측 버튼 그룹 */
        .header-right-actions { 
          display: flex; 
          align-items: center; 
          gap: 8px; 
          flex-shrink: 0;
          height: 100%;
        }
      }

      /* =========================================
        [NEW] Web 전용 2단 헤더 디자인
        ========================================= */

      /* 1. 헤더 전체 컨테이너 */
      .web-header-2row {
        display: flex;
        flex-direction: column;
        padding: 24px 40px 16px !important; /* 상단 여백 확보 */
        gap: 12px !important;               /* 1단과 2단 사이 간격 */
        background: var(--md-sys-color-surface-container) !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
      }

      /* --- [Row 1] 제목 덩어리 + 우측 버튼 --- */
      .wh-row-1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 44px; /* 높이 고정 (입력하기 편하게) */
        gap: 16px;    /* 제목 그룹과 우측 버튼 사이 간격 */
      }

      /* ★ 핵심 디자인: 자물쇠+제목을 감싸는 테두리 덩어리 */
      .title-group-wrapper {
        flex: 1;              /* 남는 공간을 모두 차지 */
        min-width: 0;         /* 플렉스 내에서 말줄임 처리를 위해 필수 */
        height: 100%;
        
        display: flex;
        align-items: center;
        
        /* 테두리와 배경 */
        border: 1px solid rgba(0,0,0,0.15);
        background: var(--md-sys-color-surface);
        border-radius: 12px;
        padding: 0 14px;      /* 내부 여백 */
        
        transition: 0.2s;
      }

      /* 다크모드일 때 테두리 색 조정 */
      [data-theme="dark"] .title-group-wrapper { 
        border-color: rgba(255,255,255,0.15); 
      }

      /* 입력창 포커스 시 테두리 색상 강조 (파란색) */
      .title-group-wrapper:focus-within {
        border-color: var(--md-sys-color-primary);
        box-shadow: 0 0 0 1px var(--md-sys-color-primary); 
      }

      /* 자물쇠 버튼 */
      #headerPrivateBtn {
        background: none; border: none; padding: 0;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        margin-right: 10px; /* 제목 입력창과의 간격 */
        flex-shrink: 0;
        color: var(--md-sys-color-outline);
      }

      /* 제목 입력창 (테두리 없이 꽉 채움) */
      .title-input-chunk {
        border: none !important;
        background: transparent !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        
        font-size: 18px; 
        font-weight: 700;
        color: inherit;
        
        width: 100%;
        height: 100%;
        
        /* 긴 텍스트 처리 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* 우측 제어 그룹 (상태버튼 등) */
      .header-right-actions {
        flex-shrink: 0; /* 제목이 길어져도 찌그러지지 않음 */
        display: flex;
        align-items: center;
        gap: 10px;
      }

      /* 상태 토글 버튼 (높이 조정) */
      .status-toggle-slim {
        display: flex;
        background: rgba(0,0,0,0.05);
        border-radius: 8px;
        padding: 3px;
        height: 36px; 
      }
      [data-theme="dark"] .status-toggle-slim { background: rgba(255,255,255,0.1); }


      /* --- [Row 2] 메타 정보 (높이 32px 통일) --- */
      .wh-row-2 {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      /* 하단 칩 공통 스타일 */
      .mini-chip {
        height: 32px; /* 높이 32px로 통일 */
        border-radius: 8px;
        border: 1px solid rgba(120, 120, 120, 0.2);
        background: var(--md-sys-color-surface);
        display: flex; align-items: center; padding: 0 10px;
        font-size: 13px; font-weight: 500; cursor: pointer;
        color: var(--md-sys-color-on-surface);
        transition: 0.2s;
      }
      .mini-chip:hover { 
        background: var(--md-sys-color-surface-variant); 
        border-color: var(--md-sys-color-outline); 
      }

      /* 날짜 그룹 컨테이너 (시작일 ~ 마감일 전체) */
      .date-range-group {
        display: flex;
        align-items: center;
        gap: 8px; /* 날짜 박스와 물결표 사이 간격 */
      }

      /* 개별 날짜 칩 (시작일, 마감일 각각 버튼화) */
      .mini-chip.date-item {
        width: 110px;        /* 날짜가 잘 보이도록 너비 확보 */
        justify-content: center; /* 텍스트 가운데 정렬 */
        padding: 0;          /* 내부 여백 제거 */
        position: relative;
      }

      /* 날짜 input 스타일 다듬기 */
      .mini-chip.date-item input {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        text-align: center;
        font-family: 'Roboto', sans-serif; /* 숫자 폰트 깔끔하게 */
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        color: inherit;
      }

      /* 구분 기호 (~) 스타일 */
      .date-sep {
        font-size: 16px;
        color: var(--md-sys-color-outline);
        font-weight: 400;
        opacity: 0.6;
        margin-top: -2px; /* 높이 미세 조정 */
      }

      /* 담당자 */
      .mini-chip.assignee { padding-left: 8px; gap: 6px; }
      .mini-chip.assignee select {
        border:none; background:transparent; outline:none; 
        color:inherit; font-weight:600; cursor:pointer; 
        min-width: 60px;
        height: 100%;      /* 부모 높이를 가득 채워서 수직 정렬 영향받게 함 */
        padding-top: 2px;
      } 

      /* 모달창 담당자 이름 텍스트 너비 확보 */
      #modalAssigneeText {
        min-width: 50px;       /* 담당자 칩 너비 */
        text-align: center;    /* 글자 가운데 정렬 */
        display: inline-block; /* 너비 적용을 위해 필수 */
      }
      
      /* [신규] 협업자 강퇴(X) 오버레이 스타일 */
      .checker-wrapper {
        position: relative;
        cursor: pointer;
        display: inline-flex; /* 인라인 배치 유지 */
        margin-left: -10px; /* 기존 아이콘 겹침 효과 유지 */
        transition: transform 0.2s;
      }
      .checker-wrapper:hover {
        transform: scale(1.1); /* 마우스 올리면 살짝 커짐 */
        z-index: 10; /* 다른 아이콘보다 위로 올라오게 */
      }
      .checker-remove-overlay {
        display: none; /* 평소엔 숨김 */
        position: absolute;
        inset: 0;
        background: rgba(220, 38, 38, 0.85); /* 진한 빨간색 반투명 */
        color: white;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 900;
        z-index: 20;
      }
      /* 마우스 올리면(hover) X 표시 등장 */
      .checker-wrapper:hover .checker-remove-overlay {
        display: flex; 
      }

/* =========================================
   [NEW] 로비 & 대시보드 스타일 (Sidebar Layout) - 최종 통합본
   ========================================= */

      /* 1. 레이아웃 컨테이너 */
      #lobbySection {
        display: flex;
        width: 100%;
        height: 100vh;
        background: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        overflow: hidden;
        font-family: 'Pretendard', 'Google Sans', sans-serif;
      }

      /* 2. 사이드바 (Sidebar) */
      .lobby-sidebar {
        width: 260px;       /* 초기 너비 */
        min-width: 200px;   /* 최소 너비 */
        max-width: 400px;   /* 최대 너비 */
        position: relative; 
        background: var(--md-sys-color-surface-container);
        border-right: 1px solid var(--md-sys-color-outline-variant);
        display: flex;
        flex-direction: column;
        padding: 24px 16px;
        flex-shrink: 0;
        z-index: 10;
      }

      .sidebar-brand {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 24px;
        color: var(--md-sys-color-primary);
        letter-spacing: -0.5px;
        padding-left: 8px;
      }

      /* 3. 메뉴 그룹 & 기본 아이템 */
      .sidebar-menu-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .menu-label {
        font-size: 11px;
        font-weight: 700;
        opacity: 0.5;
        margin-bottom: 8px;
        margin-top: 8px;
        padding-left: 12px;
      }

      .menu-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 14px !important;
        font-weight: 500;
        cursor: pointer;
        transition: 0.2s;
        color: var(--md-sys-color-on-surface);
        opacity: 1 !important;
        border: none !important; 
        outline: none !important;
      }

      .menu-item:hover { background: rgba(0,0,0,0.05); opacity: 1; }
      .menu-item.active { 
        background: var(--md-sys-color-secondary-container); 
        color: var(--md-sys-color-on-secondary-container);
        opacity: 1; 
      }

      /* 아이콘 스타일 */
      .nav-icon {
        width: 18px; height: 18px;
        color: var(--md-sys-color-on-surface);
        opacity: 0.7;
      }
      .menu-item:hover .nav-icon { opacity: 1; }
      .menu-item.active .nav-icon { 
        color: var(--md-sys-color-on-secondary-container); opacity: 1; 
      }

      /* 구분선 */
      .sidebar-divider {
        display: block !important;
        height: 1px !important;
        background-color: var(--md-sys-color-outline) !important;
        opacity: 0.15 !important; 
        margin: 8px -16px !important;
        border: none !important;
        flex-shrink: 0;
      }

      /* 뱃지 (수신함용) */
      .sidebar-badge {
        background: #ef4444; color: white;
        font-size: 10px; font-weight: 800;
        padding: 2px 6px; border-radius: 10px;
        margin-left: auto;
      }

      /* 사이드바 하단 프로필 */
      .sidebar-footer { margin-top: auto; padding-top: 20px; border-top: none !important; }
      .user-profile-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
      .sidebar-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--md-sys-color-outline); flex-shrink: 0; }
      .user-name-text { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .user-email-text { font-size: 11px; opacity: 0.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .sidebar-toggle-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 8px; opacity: 0.8; }
      .sidebar-logout-btn { width: 100%; padding: 8px; background: none; border: 1px solid var(--md-sys-color-outline); border-radius: 6px; font-size: 12px; cursor: pointer; color: inherit; opacity: 0.7; transition: 0.2s; }
      .sidebar-logout-btn:hover {
        background: rgba(255, 255, 255, 0.1); /* 흰색 투명 배경 (살짝 밝게) */
        color: var(--md-sys-color-on-surface); /* 기본 글자색 (흰색/검정) */
        border-color: var(--md-sys-color-on-surface); /* 테두리도 기본색 */
        opacity: 1;
      }

      /* 너비 조절 손잡이 */
      .sidebar-resizer {
        width: 6px; height: 100%;
        position: absolute; right: 0; top: 0;
        cursor: col-resize;
        background: transparent; z-index: 100;
        transition: background 0.2s;
      }
      .sidebar-resizer:hover, .sidebar-resizer:active {
        background: var(--md-sys-color-primary); opacity: 0.5;
      }

      /* 4. 프로젝트/즐겨찾기 헤더 및 기능 */
      .sidebar-header-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 4px 6px 0;
        margin-top: 6px;
        user-select: none;
      }
      .header-left {
        display: flex; align-items: center; gap: 4px;
        cursor: pointer; flex: 1;
      }
      .header-left:hover .menu-label { color: var(--md-sys-color-on-surface); opacity: 1; }
      .header-left:hover .arrow-icon { opacity: 1; }

      .arrow-icon {
        width: 14px; height: 14px;
        opacity: 0.4;
        transition: transform 0.2s;
      }
      .arrow-icon.rotated { transform: rotate(90deg); }

      .btn-add-project {
        width: 20px; height: 20px;
        border-radius: 4px;
        border: none; background: transparent;
        color: var(--md-sys-color-outline);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        padding: 0;
      }
      .btn-add-project svg { width: 14px; height: 14px; }
      .btn-add-project:hover { background: rgba(0,0,0,0.1); color: var(--md-sys-color-primary); }

      .collapsible-content { overflow: hidden; transition: height 0.2s; }
      .collapsible-content.open { display: block; }

      /* ★ [핵심] 프로젝트 리스트 & 즐겨찾기 아이템 스타일 (중복 제거 및 통합) 
        - 꿀렁임 제거, 수직 정렬 보정 완료
      */
      .sidebar-project-item, 
      .fav-item {
        display: flex !important;
        align-items: center !important;
        height: 32px !important;       
        gap: 6px !important;           
        padding-left: 10px !important;
        padding-right: 4px !important; /* 상단 + 버튼과 라인 맞춤 */
        font-size: 14px !important;
        color: var(--md-sys-color-on-surface-variant);
        border-radius: 8px;
        transition: 0.2s;
        cursor: pointer;
        border: none !important; /* [핵심] 테두리로 인한 레이아웃 밀림 원천 차단 */
      }
      
      .menu-item:hover,
      .sidebar-project-item:hover, 
      .fav-item:hover {
        background: rgba(0, 0, 0, 0.03) !important; /* 라이트모드: 검은색 5% */
        color: var(--md-sys-color-primary) !important;
      }

      [data-theme="dark"] .menu-item:hover,
      [data-theme="dark"] .sidebar-project-item:hover, 
      [data-theme="dark"] .fav-item:hover {
        background: rgba(255, 255, 255, 0.04) !important; /* 다크모드: 흰색 8% */
      }

/* ==========================================================================
   [수정] 사이드바 아이콘 UX (즐겨찾기 ★ / 내 프로젝트 # → ☆)
   ========================================================================== */

      /* 1. 기본 해시태그 박스 (공통 모양) */
      .project-hash {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 400;
        color: var(--md-sys-color-outline);
        background: rgba(150, 150, 150, 0.1); /* 회색 박스 배경 */
        margin-right: 8px;
        flex-shrink: 0;
        cursor: pointer;
        transition: 0.2s;
        user-select: none;
      }

      /* 2. 아이콘 내용 제어 (기본값: #) */
      .project-hash::before {
        content: "#";
      }

      /* 3. [상단] 즐겨찾기 영역 (.in-fav) */
      /* ★ 핵심 변경: 배경을 투명하게 하지 않고, 박스 형태 유지 */
      .project-hash.in-fav {
        /* background: transparent;  <-- 삭제함 (박스 배경 살림) */
        color: #facc15;           /* 별 색상 (노랑) */
        font-size: 15px;          /* 별이니까 조금 크게 */
      }
      .project-hash.in-fav::before {
        content: "★";
      }
      .project-hash.in-fav:hover {
        background: rgba(250, 204, 21, 0.2); /* 호버 시 노란빛 배경 */
        transform: scale(1.1);
      }

      /* 4. [하단] 내 프로젝트 - 미등록 상태 (.can-fav) */
      /* 기본: #  ---> 호버: ☆ (빈 별) */
      .project-hash.can-fav:hover {
        background: rgba(250, 204, 21, 0.15);
        color: #facc15;
      }
      .project-hash.can-fav:hover::before {
        content: "☆";
        font-weight: 900;
      }

      /* 5. [하단] 내 프로젝트 - 이미 등록됨 (.is-fav) */
      /* ★ 핵심 변경: 흐리게(opacity) 처리 제거하여 일반 버튼과 똑같이 표현 */
      .project-hash.is-fav {
        opacity: 1;        /* 흐림 제거 (선명하게) */
        cursor: default;   /* 이미 추가됐으니 클릭 안 됨을 암시 */
        /* 모양은 기본 # 그대로 유지 */
      }

      /* 6. 텍스트 수직 정렬 보정 */
      .sidebar-project-item > span:last-child,
      .fav-item > span:last-child {
        line-height: 1.3 !important; 
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
        top: 1px; 
      }


      /* 5. 메인 대시보드 영역 (유지) */
      .lobby-main {
        flex: 1;
        padding: 40px 60px;
        overflow-y: auto;
        position: relative;
      }
      .lobby-header { margin-bottom: 30px; }
      .welcome-title { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
      .date-text { font-size: 14px; opacity: 0.6; }

      .dashboard-section { margin-bottom: 40px; }
      .section-title-row { font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; opacity: 0.9; }

      .urgent-task-container { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; min-height: 100px; }
      .empty-urgent-state { width: 100%; padding: 30px; text-align: center; background: var(--md-sys-color-surface-container); border-radius: 12px; border: 1px dashed var(--md-sys-color-outline); opacity: 0.6; font-size: 14px; }

      .urgent-card {
        min-width: 240px; max-width: 240px;
        background: var(--md-sys-color-surface-container-low);
        border: 1px solid var(--md-sys-color-outline-variant);
        border-left: 4px solid #ef4444;
        border-radius: 12px; padding: 16px;
        cursor: pointer; transition: 0.2s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      }
      .urgent-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
      .u-tag { font-size: 10px; font-weight: 800; color: #ef4444; margin-bottom: 6px; display: block; }
      .u-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; line-height: 1.3; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
      .u-project { font-size: 11px; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; }

      .action-bar-container { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 40px; background: var(--md-sys-color-surface-container); padding: 20px; border-radius: 16px; }
      .join-input-group { display: flex; gap: 10px; flex: 1; max-width: 400px; }
      .join-input-group input { flex: 1; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface); color: inherit; outline: none; transition: 0.2s; }
      .join-input-group input:focus { border-color: var(--md-sys-color-primary); }
      .btn-join { padding: 0 20px; border-radius: 8px; border: none; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 700; cursor: pointer; }
      .btn-create-new { padding: 12px 24px; border-radius: 8px; border: none; background: var(--md-sys-color-primary); color: #ffffff; font-weight: 700; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
      .btn-create-new:hover { filter: brightness(1.1); transform: translateY(-1px); }

      .project-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
      .project-card {
        background: var(--md-sys-color-surface-container-low);
        border: 1px solid var(--md-sys-color-outline-variant);
        border-top: 4px solid var(--md-sys-color-primary);
        border-radius: 12px; padding: 20px; height: 160px;
        display: flex; flex-direction: column; position: relative;
        cursor: pointer; transition: 0.2s;
      }
      .project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

      #appLayout {
        display: flex;
        width: 100%;
        height: 100vh;
        background: var(--md-sys-color-surface);
        overflow: hidden;
      }

      /* 2. 콘텐츠 영역 (로비 & 보드가 교체되는 곳) */
      #contentArea {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
      }

      /* 3. 로비 메인 스타일 보정 */
      .lobby-main {
        flex: 1;
        padding: 40px 60px;
        overflow-y: auto;
        width: 100%;
      }

      /* 4. 상태값 분리 (핵심!) */

      /* [State A] 현재 내가 보고 있는 곳 (Active Location) */
      .menu-item.active,
      .sidebar-project-item.active,
      .fav-item.active {
        /* 배경색: 검은색 틴트 (6%) */
        background: rgba(0, 0, 0, 0.06) !important; 
        
        /* 글자색: 파란색 포인트 */
        color: var(--md-sys-color-primary) !important;
        
        /* 볼드 제거 및 불투명도 유지 */
        font-weight: 500 !important;
        opacity: 1 !important;    
   
        border-left: none !important;
      }

      /* 2. [다크 모드] 선택된 항목 스타일 */
      [data-theme="dark"] .menu-item.active,
      [data-theme="dark"] .sidebar-project-item.active,
      [data-theme="dark"] .fav-item.active {
        /* 배경색: 흰색 틴트 (8%) */
        background: rgba(255, 255, 255, 0.08) !important;
        color: var(--md-sys-color-primary) !important;
      }

      /* [State B] 즐겨찾기 된 프로젝트 (Favorite) 아이콘 */
      .project-hash.fav {
        background-color: #facc15 !important;
        color: #000000 !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
      }

/* =================================================
   [필수] 프로젝트 생성/입장 모달 전용 디자인
   ================================================= */

      /* 탭 컨테이너 */
      .pm-tab-container {
        display: flex;
        gap: 24px;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
      }

      /* 탭 버튼 */
      .pm-tab-btn {
        padding: 12px 4px;
        font-size: 15px;
        font-weight: 500;
        color: var(--md-sys-color-outline);
        cursor: pointer;
        transition: all 0.2s;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
      }

      .pm-tab-btn:hover {
        color: var(--md-sys-color-on-surface);
      }

      .pm-tab-btn.active {
        color: var(--md-sys-color-primary);
        border-bottom: 2px solid var(--md-sys-color-primary);
        font-weight: 700;
      }

      /* 입력 그룹 */
      .pm-input-group {
        margin-bottom: 20px;
      }
      .pm-input-group label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--md-sys-color-on-surface);
        margin-bottom: 8px;
        opacity: 0.8;
      }

      /* 입력창 스타일 (표준) */
      .pm-input {
        width: 100%;
        padding: 14px;
        border-radius: 12px;
        
        /* [수정] 배경색을 살짝 투명하게, 테두리는 명확하게 */
        background: var(--md-sys-color-surface); 
        border: 1px solid var(--md-sys-color-outline); 
        
        color: var(--md-sys-color-on-surface);
        font-size: 15px;
        outline: none;
        transition: 0.2s;
      }
      .pm-input:focus {
        border-color: var(--md-sys-color-primary);
        box-shadow: 0 0 0 2px rgba(var(--md-sys-color-primary-rgb), 0.2);
      }
      [data-theme="dark"] .pm-input {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.2);
      }
      [data-theme="dark"] .pm-input:focus {
        border-color: var(--md-sys-color-primary);
      }
      .pm-input.center-text {
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
      }

      /* 정책 박스 */
      .policy-box {
        background: var(--md-sys-color-surface-variant);
        border-radius: 8px;
        padding: 16px;
        border: 1px solid rgba(0,0,0,0.05);
      }

      /* 버튼 스타일 */
      .m3-btn.full-btn {
        width: 100%;
        height: 52px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 12px;
        border: none;
        cursor: pointer;
      }
      .m3-btn.full-btn.primary {
        background: var(--md-sys-color-primary);
        
        /* [수정] #ffffff 강제 지정 삭제 -> 테마 변수 사용 */
        /* 라이트모드에선 흰색, 다크모드에선 진한 남색(가독성 확보)이 자동 적용됨 */
        color: var(--md-sys-color-on-primary); 
      }
      .m3-btn.full-btn.secondary {
        background: var(--md-sys-color-surface-variant);
        color: var(--md-sys-color-on-surface-variant);
      }

      .project-item {
          display: flex;
          align-items: center;
          justify-content: space-between; /* 이름은 왼쪽, 버튼은 오른쪽 */
          padding-right: 8px; /* 버튼 우측 여백 확보 */
          position: relative;
          /* 기존 스타일 유지 (height, padding 등은 그대로 둠) */
      }

      .sidebar-project-item, 
      .fav-item {
        display: flex !important;
        align-items: center !important;
        height: 32px !important;       
        gap: 6px !important;           
        padding: 0 4px 0 10px !important; 
        font-size: 14px !important;
        color: var(--md-sys-color-on-surface-variant);
        border-radius: 8px;
        transition: 0.2s;
        cursor: pointer;
        border: none !important;
        
        /* ★ 핵심 1: 버튼이 떠다닐 수 있게 기준 잡기 */
        position: relative !important; 
      }

      /* [수정] 텍스트 정렬 보정: :last-child 대신 :nth-of-type(2) 사용 
        -> 버튼이 있든 없든 무조건 '두 번째 span(텍스트)'을 잡아서 높이를 고정함 */
      .sidebar-project-item > span:nth-of-type(2),
      .fav-item > span:nth-of-type(2) {
        line-height: 1.3 !important; 
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
        top: 1px; 
        flex: 1; 
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* [수정] 나가기(X) 버튼: Absolute로 띄워서 Flex 정렬에 1도 영향 안 주게 만듦 */
      .sidebar-leave-btn {
        width: 20px;   
        height: 20px;  
        
        /* ★ 핵심 2: Flex 흐름에서 완전 제외 (공중부양) */
        position: absolute !important;
        right: 6px !important;  /* 우측 끝에 고정 */
        top: 50% !important;
        transform: translateY(-50%) !important; /* 정확한 수직 중앙 */
        margin: 0 !important;
        
        border-radius: 4px;
        border: none; 
        background: transparent !important; 
        color: var(--md-sys-color-outline);
        cursor: pointer;
        display: flex; 
        align-items: center; 
        justify-content: center;
        opacity: 0;
        transition: 0.2s;
        z-index: 10;
      }

      /* 호버 효과 */
      .sidebar-project-item:hover .sidebar-leave-btn { opacity: 1; }
      .sidebar-leave-btn:hover { color: #ff4444 !important; }

      /* 기존 클래스 잔재 처리 (혹시 모르니 초기화) */
      .proj-name-span { padding: 0 !important; margin: 0 !important; }

/* ==========================================================================
   Lobby Dashboard & Personal HQ Layout
   - PC 전용 그리드 레이아웃 및 위젯 스타일
   ========================================================================== */

    /* 1. 껍데기(Main) 초기화: JS 간섭 방지 및 영역 확보 */
    #lobbyMainContent {
        width: 100%;
        height: 100%;
        padding: 0 !important;
        overflow: hidden;
    }

    /* 2. 로비 내부 그리드 컨테이너 (실제 레이아웃 담당) */
    .lobby-inner-wrapper {
        width: 100%;
        height: 100%;
        padding: 24px 32px;
        background-color: var(--md-sys-color-background);
        box-sizing: border-box;
        display: grid;
        gap: 16px;
        
        /* 가로 비율 6 : 4 (좌측 60%, 우측 40%) */
        grid-template-columns: 3fr 3fr 4fr;
        
        /* 세로 6행 정의: 상단-340px구간-역량/멤버-성과 순 */
        grid-template-rows: 60px 1fr 1fr 1fr 1.2fr 1.5fr;
        
        /* 영역 배치도 (Personal HQ 설계도 준수) */
        grid-template-areas:
            "search   search   search"
            "cal      cal      urgent"
            "cal      cal      upcoming"
            "cal      cal      notice"
            "skill    members  memo"
            "perf     perf     memo";
    }

    /* 3. 패널 및 텍스트 공통 스타일 */
    .g-panel {
        background: rgba(30, 32, 35, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 20px;
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        overflow: hidden; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        position: relative;
    }

    .p-title {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .p-icon { opacity: 0.7; }

    /* 4. 개별 위젯 영역 지정 */
    .area-search   { grid-area: search; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 32px; background: rgba(59, 130, 246, 0.15) !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; }
    .area-cal      { grid-area: cal; }
    .area-urgent   { grid-area: urgent; background: rgba(239, 68, 68, 0.05) !important; }
    .area-upcoming { grid-area: upcoming;background: rgba(245, 158, 11, 0.05) !important; }
    .area-notice   { grid-area: notice; background: rgba(59, 130, 246, 0.05) !important; }
    .area-notice{
      font-size: 13px;
      line-height: 1.55;
      display: flex;
      flex-direction: column;

      /* 위젯 밖으로 내용이 삐져나오면 안 보이게 */
      overflow: hidden;
    }

    /* 제목(“서버 공지사항”)이 너무 크면 살짝만 줄임 (있을 수도/없을 수도 있음) */
    .area-notice .widget-title,
    .area-notice .notice-title,
    .area-notice h3,
    .area-notice h4{
      font-size: 13px;
      line-height: 1.3;
    }

    /* ✅ 핵심: "내용 영역"만 스크롤 되게 (여러 케이스 대비해서 선택자 묶음) */
    .area-notice .widget-body,
    .area-notice .notice-body,
    .area-notice .notice-content,
    .area-notice .content,
    .area-notice .text,
    .area-notice .body{
      flex: 1;
      overflow: auto;
      padding-right: 6px; /* 스크롤바 공간 */
    }

    /* 혹시 내부 구조 클래스가 다를 경우를 대비해서,
      위젯 자체도 스크롤 가능하게 한 번 더 안전장치 */
    .area-notice{
      overflow: auto;
    }

    /* 스크롤바(다크) */
    html[data-theme="dark"] .area-notice::-webkit-scrollbar{ width: 8px; }
    html[data-theme="dark"] .area-notice::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,0.18);
      border-radius: 10px;
    }
    html[data-theme="dark"] .area-notice::-webkit-scrollbar-track{
      background: rgba(255,255,255,0.06);
    }

    /* 스크롤바(라이트) */
    html[data-theme="light"] .area-notice::-webkit-scrollbar{ width: 8px; }
    html[data-theme="light"] .area-notice::-webkit-scrollbar-thumb{
      background: rgba(15,23,42,0.25);
      border-radius: 10px;
    }
    html[data-theme="light"] .area-notice::-webkit-scrollbar-track{
      background: rgba(15,23,42,0.06);
    }
    .area-skill    { grid-area: skill; align-items: center; justify-content: center; }
    .area-members  { grid-area: members; }
    .area-perf     { grid-area: perf; }
    .area-memo     { grid-area: memo; }

    /* 5. 내부 상세 요소 스타일 (캘린더, 검색, 성과 등) */
    .lobby-search-input { width: 400px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 16px; color: #fff; outline: none; font-size: 14px; text-align: center; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 24px repeat(6, 1fr); gap: 2px; height: 100%; }
/* --- [Lobby Calendar] Month navigation header --- */
.p-title.cal-title{
  justify-content: space-between;
  width: 100%;
}

.cal-title-left{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-title-right{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-ym{
  min-width: 78px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.85;
}

.cal-nav-btn,
.cal-today-btn{
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-nav-btn{
  width: 28px;
  font-size: 18px;
  line-height: 1;
}

.cal-today-btn{
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

/* Light mode tuning */
html[data-theme="light"] .cal-nav-btn,
html[data-theme="light"] .cal-today-btn{
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(15,23,42,0.06);
}

    .cal-cell { background: rgba(255,255,255,0.02); border-radius: 4px; padding: 6px; display: flex; flex-direction: column; justify-content: space-between; }
    .cal-cell.today { background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4); }
    .perf-container { flex: 1; display: flex; align-items: center; justify-content: space-around; gap: 12px; height: 100%; }
    .perf-box { flex: 1; height: 100%; background: rgba(255,255,255,0.02); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.03); }
    .big-num { font-size: 42px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 8px; }
    .memo-input { flex: 1; width: 100%; background: transparent; border: none; outline: none; color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.6; resize: none; font-family: 'Pretendard', sans-serif; }
    .area-cal .cal-cell.dow-0 .cal-num { color: #ef4444 !important; } /* SUN */
    .area-cal .cal-cell.dow-6 .cal-num { color: #3b82f6 !important; } /* SAT */
    .area-cal .cal-cell.dow-0 { }
    .area-cal .cal-cell.dow-6 { }


    /* --- [Row 1] Personal HQ 상단 바 디테일 --- */
    /* 1. 컨테이너: Flex 중앙 정렬의 기준 */
    .area-search {
        grid-area: search;
        
        /* [레이아웃] 세로(Column) 설정을 무시하고 가로(Row)로 강제 고정 */
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        
        /* [여백] */
        padding: 0 32px !important;
        gap: 16px !important;
        overflow: hidden;

        /* [디자인 - 라이트모드] 흰색 배경 */
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: none !important; 
        border-radius: 12px;
    }

    [data-theme="dark"] .area-search {
        background: var(--md-sys-color-surface-container) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* 2. 좌측 그룹 (제목 + 멘트) */
    .header-left-group {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        
        /* 유동적 공간 확보 (멘트가 길면 줄어듦) */
        flex: 1;
        min-width: 0; 
    }

    /* [추가] 제목: 절대 줄어들지 않음 (1계급) */
    .lobby-title {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 20px;     /* 기존 스타일 유지 */
        font-weight: 800;    /* 기존 스타일 유지 */
        letter-spacing: -0.5px;
        line-height: 1.2;
        margin: 0;
    }

    /* 좌측 멘트: 공간 부족 시 말줄임 처리 (3계급) */
    .lobby-briefing-text { 
        font-size: 13px; 
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6); 
        letter-spacing: -0.3px;
        line-height: 1.2; /* 기준선 고정 */
        
        /* [추가] 말줄임(...) 처리 핵심 코드 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1; /* 공간 부족하면 1순위로 줄어듦 */
    }

    /* 3. 검색창: 상황 봐서 줄어듦 */
    .lobby-search-input {
        /* [추가] 반응형 대응 */
        flex-shrink: 1;
        min-width: 200px;       /* 최소 너비 보장 */
        width: auto !important; /* 고정폭 해제 */
    }

    /* 4. 우측 그룹 (배지 + 날짜) */
    .header-right-group {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        
        /* 절대 줄어들지 않음 */
        flex-shrink: 0;
        white-space: nowrap;
        
        /* 위치 보정 제거하고 깔끔하게 마진으로 처리 */
        margin-left: 10px; 
    }

    /* 날짜: 절대 줄어들지 않음 */
    .lobby-date, .header-right-group .date {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.5;
        line-height: 1.2;
        
        /* [추가] 고정 */
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* 상태 배지 영역 */
    .status-badge-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0; /* 배지도 찌그러짐 방지 */
    }

    /* 공통 배지 */
    .s-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2; /* 핵심 */
        white-space: nowrap;
        height: 24px;
    }

    .s-badge svg {
      display: block;
    }

    /* 배지 내 강조 숫자 */
    .s-badge b {
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2; /* ❌ top 보정 제거 */
    }

    /* 배지 컬러 */
    .b-urgent {
        background: rgba(239, 68, 68, 0.15);
        color: #ff6b6b;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    .b-doing {
        background: rgba(59, 130, 246, 0.15);
        color: #60a5fa;
        border: 1px solid rgba(59, 130, 246, 0.2);
    }

    .b-done {
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
        border: 1px solid rgba(34, 197, 94, 0.2);
    }

    .b-imminent { 
        background: rgba(245, 158, 11, 0.15); 
        color: #fbbf24; 
        border: 1px solid rgba(245, 158, 11, 0.2); 
    }

/* ==========================================================
[Search Result] 로비 검색 결과 화면 스타일
========================================================== */

    #lobbyMainContent { position: relative; }

    /* 1) 검색 결과 영역(오버레이) */
    .area-results {
      position: absolute;
      inset: 0;                 /* top/right/bottom/left = 0 */
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      display: flex;
      flex-direction: column;

      z-index: 50;
      overflow: hidden;

      padding: 24px 40px 40px;  /* 보기 좋은 여백 */

      /* 기본(다크) */
      background: rgba(30, 32, 35, 0.95);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* 2) 결과 리스트 컨테이너 */
    .lobby-result-list {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-right: 8px;
      margin-top: 20px;
    }

    /* 스크롤바 */
    .lobby-result-list::-webkit-scrollbar { width: 6px; }
    .lobby-result-list::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.2);
      border-radius: 10px;
    }

    /* 3) 카드 기본(다크) */
    .result-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 18px 24px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }

    .result-card:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--md-sys-color-primary);
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* 다크 텍스트 */
    .rc-title  { color: #fff; }
    .rc-desc   { color: rgba(255,255,255,0.6); }
    .rc-header { color: rgba(255,255,255,0.6); }

    /* ✅ 라이트 모드 */
    html[data-theme="light"] .area-results {
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid #e5e7eb;
    }

    html[data-theme="light"] .result-card {
      background: #ffffff;
      color: #111827;
      border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    html[data-theme="light"] .result-card:hover {
      background: #f9fafb;
      border-color: var(--md-sys-color-primary);
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    html[data-theme="light"] .rc-title  { color: #111827 !important; }
    html[data-theme="light"] .rc-desc   { color: #4b5563 !important; }
    html[data-theme="light"] .rc-header { color: #9ca3af !important; }

    .rc-title .highlight,
    .rc-desc .highlight {
      background: rgba(250, 204, 21, 0.35) !important;
      color: #fde047 !important;
      font-weight: 900 !important;
      padding: 0 3px !important;
      border-radius: 4px !important;
    }

    /* ✅ 라이트 모드: 파란 하이라이트로 변경(가독성↑) */
    html[data-theme="light"] .rc-title .highlight,
    html[data-theme="light"] .rc-desc .highlight,
    body[data-theme="light"] .rc-title .highlight,
    body[data-theme="light"] .rc-desc .highlight,
    [data-theme="light"] .rc-title .highlight,
    [data-theme="light"] .rc-desc .highlight {
      background: rgba(59, 130, 246, 0.18) !important; /* 연한 파랑 배경 */
      color: #1e40af !important;                       /* 진한 파랑 글자 */
      border: 1px solid rgba(59, 130, 246, 0.35) !important;
    }

    html[data-theme="light"] #lobbySearchCloseBtn,
    body[data-theme="light"] #lobbySearchCloseBtn,
    [data-theme="light"] #lobbySearchCloseBtn {
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;
      color: #111827 !important;
      box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
    }

    html[data-theme="light"] #lobbySearchCloseBtn:hover,
    body[data-theme="light"] #lobbySearchCloseBtn:hover,
    [data-theme="light"] #lobbySearchCloseBtn:hover {
      background: #f3f4f6 !important;
    }

    html[data-theme="light"] .lobby-result-list::-webkit-scrollbar-thumb,
    body[data-theme="light"] .lobby-result-list::-webkit-scrollbar-thumb,
    [data-theme="light"] .lobby-result-list::-webkit-scrollbar-thumb {
      background: rgba(17, 24, 39, 0.25) !important; /* 어두운 회색 */
    }

    html[data-theme="light"] .lobby-result-list::-webkit-scrollbar-thumb:hover,
    body[data-theme="light"] .lobby-result-list::-webkit-scrollbar-thumb:hover,
    [data-theme="light"] .lobby-result-list::-webkit-scrollbar-thumb:hover {
      background: rgba(17, 24, 39, 0.38) !important;
    }

    /* (선택) 트랙(바닥)도 살짝 보이게 */
    html[data-theme="light"] .lobby-result-list::-webkit-scrollbar-track,
    body[data-theme="light"] .lobby-result-list::-webkit-scrollbar-track,
    [data-theme="light"] .lobby-result-list::-webkit-scrollbar-track {
      background: rgba(17, 24, 39, 0.06) !important;
      border-radius: 10px;
    }

    /* (선택) Firefox 대응 */
    html[data-theme="light"] .lobby-result-list,
    body[data-theme="light"] .lobby-result-list,
    [data-theme="light"] .lobby-result-list {
      scrollbar-color: rgba(17, 24, 39, 0.35) rgba(17, 24, 39, 0.06);
      scrollbar-width: thin;
    }

/* ==========================================================================
[수정 완료] 로비 검색바 디자인 (v2.0 최적화)
- 높이 축소(36px), 꿀렁거림 제거, 테두리 두께(1px) 완화
========================================================================== */

    /* 5. 검색창 X 버튼 (입력 시 등장) */
    .search-clear-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: #fff;
        
        font-size: 10px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: 0.2s;
        
        /* 기본적으로 숨김 (JS로 제어) */
        opacity: 0; 
        pointer-events: none;
    }

    /* 검색창에 글자가 있거나 포커스되면 X버튼 보이기 */
    #lobbySearchForm:focus-within .search-clear-btn,
    .search-clear-btn.show {
        opacity: 1;
        pointer-events: auto;
    }

    .search-clear-btn:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    #lobbySearchInput::-webkit-search-cancel-button { display:none; }
    #lobbySearchForm { position: relative; }
    
    /* 1. 검색창 컨테이너 */
    .lobby-search-container {
        position: relative;
        display: flex;
        align-items: center;
        
        /* [수정] 너비와 높이 축소 (420px/48px -> 340px/36px) */
        width: 340px; 
        height: 36px; 
        
        background: #ffffff;
        
        /* [수정] 테두리 2px -> 1px로 줄이고 색상을 연하게 변경 */
        border: 1px solid rgba(0, 0, 0, 0.15); 
        
        border-radius: 50px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* 그림자도 더 은은하게 */
        transition: all 0.2s ease;
        overflow: hidden;
    }

    /* 포커스 효과 (꿀렁거림 제거됨) */
    .lobby-search-container:focus-within {
        border-color: var(--md-sys-color-primary); /* 포커스 됐을 때만 색상 강조 */
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); /* 부드러운 파란 그림자 */
        /* transform: translateY(-1px); <-- [삭제] 꿀렁거림 원인 제거 */
    }

    /* [다크모드 대응] 어둡지만 튀지 않게 */
    [data-theme="dark"] .lobby-search-container {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }
    [data-theme="dark"] .lobby-search-container:focus-within {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--md-sys-color-primary);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
    }

    /* 2. 입력 필드 */
    .lobby-search-input {
        flex: 1;
        height: 100%;
        border: none;
        background: transparent;
        outline: none;
        
        /* [수정] 왼쪽 여백 및 폰트 사이즈 조정 */
        padding: 0 0 0 16px; 
        font-size: 14px; /* 16px -> 14px (높이에 맞춤) */
        
        font-weight: 500;
        color: #333;
        text-align: left;
    }

    [data-theme="dark"] .lobby-search-input {
        color: #e2e2e6
    }

    [data-theme="dark"] .search-submit-btn {
    color: rgba(255, 255, 255, 0.5);
    }

    [data-theme="dark"] .lobby-search-container:focus-within .search-submit-btn {
    color: var(--md-sys-color-primary); /* 포커스 시 아이콘만 파랗게 */
    }

    /* placeholder 색상 */
    .lobby-search-input::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    /* 3. 돋보기 버튼 (우측) */
    .search-submit-btn {
        /* [수정] 높이 36px에 맞춰 정사각형 유지 */
        width: 36px; 
        height: 100%;
        
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--md-sys-color-outline); /* 평소엔 회색 */
        transition: 0.2s;
        padding-right: 2px; 
    }

    /* 마우스 올리거나 포커스 되면 파란색 */
    .lobby-search-container:focus-within .search-submit-btn,
    .search-submit-btn:hover {
        color: var(--md-sys-color-primary);
    }

    .search-submit-btn svg {
        /* [수정] 아이콘 크기 살짝 축소 */
        width: 18px; 
        height: 18px;
        stroke-width: 2.5px;
    }

    /* 4. X 버튼 위치 조정 (높이 변경에 따른 보정) */
    .search-clear-btn {
        /* [수정] 돋보기 버튼 너비(36px)만큼 왼쪽으로 */
        right: 36px !important; 
        
        /* 크기 및 위치 미세 조정 */
        width: 18px; 
        height: 18px;
        font-size: 10px;
        
        color: #999 !important;
        background: rgba(0,0,0,0.05) !important; /* 배경 살짝 추가 */
    }

    [data-theme="dark"] .search-clear-btn {
        background: rgba(255,255,255,0.1) !important;
    }

    .search-clear-btn:hover {
        background: #ef4444 !important; /* 빨간 배경 */
        color: white !important;
    }

/* ==========================================================================
[로비 디자인 밸런스 패치] v3.0 (라이트/다크 완벽 대응)
========================================================================== */

    /* 1. 위젯(패널) 공통 베이스 - 색종이(Tint) 벗기기 */
    .g-panel {
        /* [공통] 배경색 틴트 제거 및 테두리만 남김 */
        backdrop-filter: blur(12px);
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); /* 그림자 최소화 */
    }

    /* 2. 사람 일러스트(대두 이미지) 강제 삭제 */
    .area-members img.mem-pic, 
    .area-members svg {
        display: none !important;
    }
    /* 대체 UI: 멤버 영역을 심플하게 */
    .area-members {
        align-items: flex-start !important; /* 중앙 정렬 해제 */
        padding-top: 20px !important;
    }


    /* ==========================================================================
      🌞 라이트 모드 (Light Mode) - 가독성 최우선
      ========================================================================== */
      
    /* 기본 상태 (body에 data-theme="dark"가 없을 때) */
    .g-panel {
        background: #ffffff !important;         /* 배경 완전 흰색 */
        border: 1px solid #e5e7eb !important;   /* 연한 회색 테두리 */
        color: #1f2937 !important;              /* 글자색 진한 쥐색 */
    }

    /* 특정 영역 틴트(붉은기, 푸른기) 강제 제거 -> 흰색으로 통일 */
    .area-search, .area-urgent, .area-upcoming, .area-notice {
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
    }

    /* 텍스트 컬러 강제 보정 (안 보이는 글자 심폐소생) */
    .p-title { color: #111827 !important; }   /* 위젯 제목: 검정 */
    .big-num { color: #111827 !important; }   /* 성과 숫자: 검정 */
    .lobby-title { color: #111827 !important; } /* Personal HQ 제목 */
    .lobby-briefing-text { color: #6b7280 !important; } /* 응원 문구: 회색 */
    .cal-num { color: #374151 !important; }   /* 달력 날짜 */
    .cal-head { color: #6b7280 !important; font-weight: 700 !important; } /* 요일 */

    /* 검색창 (라이트모드) */
    .lobby-search-container {
        background: #f3f4f6 !important; /* 연한 회색 배경 */
        border: 1px solid #d1d5db !important;
    }
    .lobby-search-input { color: #111827 !important; }
    .search-submit-btn { color: #6b7280 !important; }

    /* 캘린더/성과지표 내부 박스 (라이트모드) */
    .cal-cell, .perf-box {
        background: #f9fafb !important; /* 아주 연한 회색 */
        border: 1px solid #f3f4f6 !important;
    }
    .cal-cell.today {
        background: #eff6ff !important; /* 오늘 날짜: 연한 파랑 */
        border: 1px solid #bfdbfe !important;
    }
    .memo-input {
        color: #1f2937 !important; /* 메모장 글씨 검정 */
    }


    /* ==========================================================================
      🌙 다크 모드 (Dark Mode) - 프로젝트 보드와 톤앤매너 통일
      ========================================================================== */

    [data-theme="dark"] .g-panel {
        /* 배경: 프로젝트 보드와 동일한 짙은 회색 (색조 제거) */
        background: var(--md-sys-color-surface-container) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #e2e2e6 !important;
    }

    /* 특정 영역 틴트 제거 (다크모드에서도 회색 유지) */
    [data-theme="dark"] .area-search, 
    [data-theme="dark"] .area-urgent, 
    [data-theme="dark"] .area-upcoming, 
    [data-theme="dark"] .area-notice {
        background: var(--md-sys-color-surface-container) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        /* 왼쪽 컬러 띠는 상속받아 유지됨 */
    }

    /* 텍스트 컬러 (다크모드) */
    [data-theme="dark"] .p-title { color: #ffffff !important; opacity: 0.9; }
    [data-theme="dark"] .big-num { color: #ffffff !important; }
    [data-theme="dark"] .lobby-title { color: #ffffff !important; }
    [data-theme="dark"] .lobby-briefing-text { color: rgba(255, 255, 255, 0.6) !important; }
    [data-theme="dark"] .cal-num { color: #e5e7eb !important; }
    [data-theme="dark"] .cal-head { color: rgba(255, 255, 255, 0.5) !important; }

    /* 내부 박스 (다크모드) */
    [data-theme="dark"] .cal-cell, 
    [data-theme="dark"] .perf-box {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    [data-theme="dark"] .cal-cell.today {
        background: rgba(59, 130, 246, 0.15) !important;
        border: 1px solid rgba(59, 130, 246, 0.4) !important;
    }
    [data-theme="dark"] .memo-input {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* 검색창 (다크모드) - 아까 주신 피드백 반영 */
    [data-theme="dark"] .lobby-search-container {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    [data-theme="dark"] .lobby-search-input { color: #ffffff !important; }


    html[data-theme="light"] .area-results {
      background: rgba(255, 255, 255, 0.98) !important;
      border: 1px solid #e5e7eb !important;
    }

    html[data-theme="light"] .result-card {
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    html[data-theme="light"] .result-card:hover {
      background: #f9fafb !important;
      border-color: var(--md-sys-color-primary) !important;
      transform: translateX(4px);
    }

    html[data-theme="light"] .rc-title {
      color: #111827 !important;
    }

    html[data-theme="light"] .rc-desc {
      color: #4b5563 !important;
    }

    html[data-theme="light"] .rc-header {
      color: #9ca3af !important;
    }


/* =========================================================
   📅 캘린더 "• + 숫자" 배지 색상 테마 대응 (핵심 패치)
   ========================================================= */

    /* 기본(라이트) */
    .cal-dotwrap {
      border: 0.5px solid rgba(17, 24, 39, 0.18) !important;
      background: rgba(17, 24, 39, 0.06) !important;

      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      line-height: 1 !important;
      padding: 2px 8px !important;
    }

    .cal-dotwrap .task-count {
      color: #0f172a !important;
      line-height: 1 !important;
    }

    .cal-dotwrap .task-dot {
      line-height: 1 !important;
    }

    /* 다크 모드: 색/테두리/배경만 변경 */
    [data-theme="dark"] .cal-dotwrap {
      border: 0.5px solid rgba(255, 255, 255, 0.22) !important;
      background: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] .cal-dotwrap .task-count {
      color: #ffffff !important;
    }

    [data-theme="dark"] .cal-dotwrap .task-dot {
    }

/* ✅ 캘린더 날짜 클릭 시 뜨는 업무 목록 패널(테마 대응) */
    .task-popup-panel{
      position: absolute;              /* fixed → absolute */
      width: 320px;
      max-height: 360px;
      overflow: hidden;
      z-index: 9999;

      border-radius: 14px;
      backdrop-filter: blur(10px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.30);

      /* 기본(다크) */
      background: rgba(30, 32, 35, 0.92);
      border: 1px solid rgba(255,255,255,0.10);
    }

    .popup-header{
      display:flex;
      align-items:center;
      justify-content: space-between;
      padding: 12px 14px;
      font-weight: 800;
      font-size: 13px;
      color: rgba(255,255,255,0.92);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .popup-close{
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.75);
      cursor: pointer;
      font-size: 16px;
      padding: 4px 8px;
      border-radius: 10px;
    }
    .popup-close:hover{
      background: rgba(255,255,255,0.10);
    }

    .popup-task-list{
      list-style: none;
      margin: 0;
      padding: 8px;
      max-height: 300px;
      overflow: auto;
    }

    .popup-task-item{
      padding: 10px 10px;
      cursor: pointer;
      border-radius: 10px;
      color: rgba(255,255,255,0.88);
      font-size: 13px;
    }
    .popup-task-item:hover{
      background: rgba(255,255,255,0.08);
    }

    /* ✅ 라이트 모드 */
    html[data-theme="light"] .task-popup-panel,
    [data-theme="light"] .task-popup-panel{
      background: rgba(255,255,255,0.98);
      border: 1px solid #e5e7eb;
      box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    }

    html[data-theme="light"] .popup-header,
    [data-theme="light"] .popup-header{
      color: #111827;
      border-bottom: 1px solid #e5e7eb;
    }

    html[data-theme="light"] .popup-close,
    [data-theme="light"] .popup-close{
      color: #374151;
    }
    html[data-theme="light"] .popup-close:hover,
    [data-theme="light"] .popup-close:hover{
      background: #f3f4f6;
    }

    html[data-theme="light"] .popup-task-item,
    [data-theme="light"] .popup-task-item{
      color: #111827;
    }
    html[data-theme="light"] .popup-task-item:hover,
    [data-theme="light"] .popup-task-item:hover{
      background: #f3f4f6;
    }

/* 로비 긴급/임박(Upcoming) 리스트 컨테이너 */
/* 로비 긴급/임박(Upcoming) 리스트 컨테이너 */
/* 로비 긴급/임박(Upcoming) 리스트 컨테이너 */
    .upcoming-task-container {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 10px;
      min-height: 100px;
    }

    .empty-upcoming-state {
      width: 100%;
      padding: 30px;
      text-align: center;
      background: var(--md-sys-color-surface-container);
      border-radius: 12px;
      border: 1px dashed var(--md-sys-color-outline);
      opacity: 0.6;
      font-size: 14px;
    }

    /* 임박 카드(주황 톤) */
    .upcoming-card {
      min-width: 240px;
      max-width: 240px;
      background: var(--md-sys-color-surface-container-low);
      border: 1px solid var(--md-sys-color-outline-variant);
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      transition: 0.2s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .upcoming-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .up-tag {
      font-size: 10px;
      font-weight: 800;
      color: #f59e0b;
      margin-bottom: 6px;
      display: block;
    }

    /* 위젯 타이틀 오른쪽 더보기 버튼 */
    .widget-more-btn {
      margin-left: auto;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color: inherit;
      cursor: pointer;
      opacity: 0.9;
    }
    .widget-more-btn:hover {
      opacity: 1;
      transform: translateY(-1px);
    }

    .widget-task-list{
      list-style: none;
      margin: 10px 0 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .widget-task-item{
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
    }

    html[data-theme="light"] .widget-task-item,
    [data-theme="light"] .widget-task-item{
      border: 1px solid #e5e7eb;
      background: #ffffff;
    }

    .widget-task-item:hover{
      background: rgba(255,255,255,0.06);
    }

    html[data-theme="light"] .widget-task-item:hover,
    [data-theme="light"] .widget-task-item:hover{
      background: #f9fafb;
    }

    .w-badge{
      font-size: 11px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 999px;
      line-height: 1;
      white-space: nowrap;
    }

    .w-badge.urgent{
      color: #ef4444;
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.25);
    }

    .w-badge.imminent{
      color: #f59e0b;
      background: rgba(245,158,11,0.14);
      border: 1px solid rgba(245,158,11,0.28);
    }

    .w-title{
      font-weight: 700;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .w-meta{
      opacity: 0.6;
      font-size: 12px;
      white-space: nowrap;
    }

    .area-urgent .widget-task-list,
    .area-upcoming .widget-task-list{
      max-height: 160px;          /* ✅ 기본값: 5개 정도 보이는 높이 */
      overflow-y: auto;
      padding-bottom: 12px;       /* ✅ 스크롤 끝에서 마지막 줄이 잘 안 보이는 느낌 방지 */
    }

    /* 작은 화면일 때는 높이를 조금 더 줄여서 레이아웃 유지 */
    @media (max-width: 1200px){
      .area-urgent .widget-task-list,
      .area-upcoming .widget-task-list{
        max-height: 130px;
      }
    }

    /* 태스크 한 줄 자체를 더 컴팩트하게 */
    .widget-task-item{
      padding: 8px 10px;
      gap: 8px;
    }

    /* 제목(업무명) 글씨 크기 줄이기 + 한 줄로 고정 */
    .w-title{
      font-size: 13px;            /* ✅ 기존보다 살짝 작게 */
      font-weight: 650;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 메타(프로젝트명/마감일)도 조금 작게 */
    .w-meta{
      font-size: 11px;
      opacity: 0.55;
    }

    /* 배지(OVERDUE/D-1)도 약간 컴팩트하게 */
    .w-badge{
      font-size: 10px;
      padding: 3px 7px;
    }

    /* 스크롤바가 너무 튀지 않게(다크/라이트 공용) */
    .area-urgent .widget-task-list::-webkit-scrollbar,
    .area-upcoming .widget-task-list::-webkit-scrollbar{
      width: 8px;
    }
    .area-urgent .widget-task-list::-webkit-scrollbar-thumb,
    .area-upcoming .widget-task-list::-webkit-scrollbar-thumb{
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
    }
    html[data-theme="light"] .area-urgent .widget-task-list::-webkit-scrollbar-thumb,
    html[data-theme="light"] .area-upcoming .widget-task-list::-webkit-scrollbar-thumb{
      background: rgba(15,23,42,0.18);
    }

    .area-urgent .widget-task-list,
    .area-upcoming .widget-task-list{
      scrollbar-width: none;          /* Firefox */
      -ms-overflow-style: none;       /* IE/Edge legacy */
    }
    .area-urgent .widget-task-list::-webkit-scrollbar,
    .area-upcoming .widget-task-list::-webkit-scrollbar{
      display: none;                  /* Chrome/Safari */
    }

    .task-popup-panel{
      z-index: 99999;
      min-width: 360px;
      max-width: 420px;
      max-height: 360px;
      overflow: auto;
    }

    /* 패널 안 메타 텍스트 */
    .task-popup-panel .popup-meta{
      opacity: .6;
      font-size: 11px;
      margin-left: 6px;
    }

    /* 1) 위젯 자체 padding 줄여서 내용 영역 확보 */
    .area-urgent,
    .area-imminent,
    .area-urgent-list,
    .area-imminent-list {
      padding: 14px 16px !important;
    }

    /* 2) 제목 줄(🔥 + 텍스트 + 더보기)을 한 줄로 정렬 + 높이 축소 */
    .area-urgent .p-title,
    .area-imminent .p-title,
    .area-urgent-list .p-title,
    .area-imminent-list .p-title {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;

      margin: 0 0 10px 0 !important;
      padding: 0 !important;

      font-size: 13px !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
    }

    /* 3) 더보기 버튼 크기/패딩 축소 (버튼 클래스가 어떤 경우든 최대한 잡아줌) */
    .area-urgent button,
    .area-imminent button,
    .area-urgent-list button,
    .area-imminent-list button {
      padding: 4px 10px !important;
      height: 26px !important;
      border-radius: 10px !important;
      font-size: 11px !important;
    }

    /* 4) 리스트 항목 글자 약간 작게 + 줄간격 정리 */
    .area-urgent .mini-task-item,
    .area-imminent .mini-task-item,
    .area-urgent-list .mini-task-item,
    .area-imminent-list .mini-task-item {
      font-size: 12px !important;
      line-height: 1.25 !important;
      padding: 8px 10px !important;
    }

    /* 5) 작은 화면에서 스크롤바가 거슬릴 때: 스크롤바를 얇게/덜 튀게 */
    .area-urgent .mini-task-list,
    .area-imminent .mini-task-list,
    .area-urgent-list .mini-task-list,
    .area-imminent-list .mini-task-list {
      scrollbar-width: thin;                 /* Firefox */
    }

    .area-urgent .mini-task-list::-webkit-scrollbar,
    .area-imminent .mini-task-list::-webkit-scrollbar,
    .area-urgent-list .mini-task-list::-webkit-scrollbar,
    .area-imminent-list .mini-task-list::-webkit-scrollbar {
      width: 6px;
    }

    .area-urgent .mini-task-list::-webkit-scrollbar-thumb,
    .area-imminent .mini-task-list::-webkit-scrollbar-thumb,
    .area-urgent-list .mini-task-list::-webkit-scrollbar-thumb,
    .area-imminent-list .mini-task-list::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
    }

    .area-urgent,
    .area-upcoming,
    .area-imminent,
    .area-urgent-list,
    .area-imminent-list {
      display: flex !important;
      flex-direction: column !important;
    }

    /* 2) 헤더(🔥 제목 + 더보기) 영역을 "고정 높이" + "세로 가운데 정렬" */
    .area-urgent .p-title,
    .area-upcoming .p-title,
    .area-imminent .p-title,
    .area-urgent-list .p-title,
    .area-imminent-list .p-title {
      display: flex !important;
      align-items: center !important;          /* ✅ 세로 가운데 정렬 */
      justify-content: space-between !important;

      height: 42px !important;                 /* ✅ 헤더 높이(원하면 38~46 조절) */
      margin: 0 0 6px 0 !important;            /* ✅ 헤더 아래 여백 최소화 */
      padding: 0 !important;

      font-size: 13px !important;
      line-height: 1 !important;
      font-weight: 750 !important;
      white-space: nowrap !important;
    }

    /* 3) 더보기 버튼도 헤더 안에서 세로 중앙 정렬 + 크기 축소 */
    .area-urgent .widget-more-btn,
    .area-upcoming .widget-more-btn,
    .area-imminent .widget-more-btn,
    .area-urgent-list .widget-more-btn,
    .area-imminent-list .widget-more-btn {
      height: 26px !important;
      padding: 4px 10px !important;
      border-radius: 10px !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }

    /* 4) 리스트가 헤더 아래(빨간선 아래)부터 더 붙어서 보이게 */
    .area-urgent .widget-task-list,
    .area-upcoming .widget-task-list,
    .area-imminent .widget-task-list,
    .area-urgent-list .widget-task-list,
    .area-imminent-list .widget-task-list,
    .area-urgent .mini-task-list,
    .area-upcoming .mini-task-list,
    .area-imminent .mini-task-list,
    .area-urgent-list .mini-task-list,
    .area-imminent-list .mini-task-list {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* 5) 리스트 아이템도 살짝 컴팩트하게(보이는 줄 수 증가) */
    .area-urgent .widget-task-item,
    .area-upcoming .widget-task-item,
    .area-imminent .widget-task-item,
    .area-urgent-list .widget-task-item,
    .area-imminent-list .widget-task-item,
    .area-urgent .mini-task-item,
    .area-upcoming .mini-task-item,
    .area-imminent .mini-task-item,
    .area-urgent-list .mini-task-item,
    .area-imminent-list .mini-task-item {
      padding: 7px 10px !important;
    }
    /* 1) 위젯 자체 패딩 약간만 줄여서 내용 공간 확보 */
    .area-urgent,
    .area-imminent,
    .area-upcoming,
    .area-urgent-list,
    .area-imminent-list{
      padding: 12px 14px !important;
    }

    /* 2) 헤더(이모지+제목+더보기) 높이/여백 최소화 + 세로 가운데 정렬 */
    .area-urgent .p-title,
    .area-imminent .p-title,
    .area-upcoming .p-title,
    .area-urgent-list .p-title,
    .area-imminent-list .p-title{
      display: flex !important;
      align-items: center !important;           /* ✅ 세로 가운데 정렬 */
      justify-content: space-between !important;

      height: 34px !important;                  /* ✅ 헤더 높이 줄이기 (42 -> 34) */
      margin: 0 0 4px 0 !important;             /* ✅ 헤더 아래 여백 최소 */
      padding: 0 2px !important;

      font-size: 14px !important;               /* ✅ 텍스트 약간 축소 */
      line-height: 1 !important;
      font-weight: 750 !important;
      white-space: nowrap !important;
    }

    /* 3) 더보기 버튼도 헤더 안에서 작고 단정하게 */
    .area-urgent .widget-more-btn,
    .area-imminent .widget-more-btn,
    .area-upcoming .widget-more-btn,
    .area-urgent-list .widget-more-btn,
    .area-imminent-list .widget-more-btn{
      height: 24px !important;
      padding: 3px 9px !important;
      border-radius: 10px !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }

    /* 4) 리스트가 헤더 아래부터 '남은 공간'을 최대한 쓰게 만들기
          (max-height 제한을 풀고, 아래 잘림도 방지) */
    .area-urgent .widget-task-list,
    .area-imminent .widget-task-list,
    .area-upcoming .widget-task-list,
    .area-urgent-list .widget-task-list,
    .area-imminent-list .widget-task-list,
    .area-urgent .mini-task-list,
    .area-imminent .mini-task-list,
    .area-urgent-list .mini-task-list,
    .area-imminent-list .mini-task-list{
      max-height: none !important;              /* ✅ 기존 max-height 무력화 */
      height: auto !important;
      overflow-y: auto !important;
      padding-top: 0 !important;
      margin-top: 0 !important;
      padding-bottom: 12px !important;          /* ✅ 스크롤 끝에서 마지막 줄 안 잘리게 */
    }

/* ==========================================================================
   Lobby Dashboard - Focus Layout (캘린더/긴급/마감임박/역량/업무DNA/퀵메모)
   - 불필요 위젯(서버 공지사항/즐겨찾기 멤버/성과 지표) 제거한 버전
   - 32" / 24" 모니터 모두에서 비율 유지 + overflow 방지
   ========================================================================== */

/* 0) 제거 대상 위젯은 DOM에 남아있어도 화면에서 제외 */
.area-notice,
.area-members,
.area-perf{
  display: none !important;
}

/* 1) 큰 화면(데스크탑): 3열 그리드 유지, 캘린더/업무 위젯 공간 확장 */
@media (min-width: 1025px){

  .lobby-inner-wrapper{
    /* 세로 행을 단순화(공간 절약) */
    grid-template-columns: 3fr 3fr 4fr;
    grid-template-rows: 60px 1.35fr 1.15fr 1.10fr;

    grid-template-areas:
      "search   search   search"
      "cal      cal      urgent"
      "cal      cal      upcoming"
      "skill    skill    memo";
  }

  /* 역량/차트 영역: HTML이 (1) .area-skill 래퍼를 갖는 경우와
     (2) .lobby-stats-container가 직접 그리드 아이템인 경우를 모두 지원 */
  .area-skill,
  .lobby-stats-container{
    grid-area: skill;
    min-height: 0;
  }

  .lobby-stats-container{
    margin: 0 !important;
    height: 100%;

    display: grid;
    grid-template-columns: 1.0fr 1.0fr;   /* DNA 영역을 더 넓게 */
    gap: 16px;
  }

  .lobby-stats-container .stats-card{
    min-height: 0 !important;            /* base.css의 280px 고정값 제거 */
    height: 100%;
    padding: 20px;
  }

  .lobby-stats-container .chart-box{
    min-height: 0 !important;            /* base.css의 220px 고정값 제거 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 캘린더/우측 카드에서 내용이 길어져도 그리드가 늘어나지 않도록(스크롤 처리) */
  .area-urgent,
  .area-upcoming,
  .area-cal,
  .area-memo{
    min-height: 0;
  }

  .area-urgent .widget-body,
  .area-upcoming .widget-body{
    overflow: auto;
  }

  .area-memo .memo-input{
    overflow: auto;
  }
}

/* 2) 중간 화면(노트북/작은 모니터): 2열로 재배치하여 잘림 방지 */
@media (max-width: 1024px){

  .lobby-inner-wrapper{
    padding: 18px 18px;
    gap: 14px;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 60px 1.6fr 1fr 1.1fr 1.1fr;

    grid-template-areas:
      "search   search"
      "cal      cal"
      "urgent   upcoming"
      "skill    skill"
      "memo     memo";
  }

  .area-skill,
  .lobby-stats-container{
    grid-area: skill;
    min-height: 0;
  }

  .lobby-stats-container{
    margin: 0 !important;
    height: 100%;
    grid-template-columns: 1fr 1fr;  /* 폭이 좁아지면 균등 배치 */
    gap: 14px;
  }

  .lobby-stats-container .stats-card{
    min-height: 0 !important;
  }

  .area-memo{
    min-height: 260px;
  }
}

/* 3) 모바일: 1열 스택 */
@media (max-width: 768px){

  .lobby-inner-wrapper{
    padding: 14px 14px;
    gap: 12px;

    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "search"
      "cal"
      "urgent"
      "upcoming"
      "skill"
      "memo";
  }

  .lobby-stats-container{
    grid-template-columns: 1fr;
  }
}

/* 4) 라이트 모드에서 DNA 도움말( ? ) 호버 박스 가독성 개선 */
[data-theme="light"] .help-content{
  background: rgba(255,255,255,0.96);
  color: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .help-content strong{
  color: #2563eb;
  border-bottom: 1px solid rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .help-content li{
  color: rgba(15, 23, 42, 0.80);
}

[data-theme="light"] .help-content li b{
  color: rgba(15, 23, 42, 0.95);
}

[data-theme="light"] .help-content p{
  color: rgba(15, 23, 42, 0.55);
}

/* =========================================================
   [Inbox] 개별 알림 삭제(X) 버튼 - 미니멀 & 고급화
   ========================================================= */
#inboxList .noti-item .noti-del-btn{
  /* 위치 고정은 유지 */
  position: absolute !important;
  top: 50% !important;
  right: calc(40px - var(--inbox-sbw, 0px)) !important;
  transform: translateY(-50%) !important;

  /* ✅ 크기 축소 + 얇게 */
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;

  /* ✅ 기본은 완전 투명 (호버 시만 살짝) */
  background: transparent !important;
  border: 1px solid transparent !important;

  /* ✅ X 표시를 가볍게 */
  color: rgba(255,255,255,0.55) !important; /* 다크 기본 */
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* ✅ 존재감 줄이기 */
  opacity: 0 !important;
  pointer-events: none !important;

  transition: opacity .14s ease,
              background-color .14s ease,
              border-color .14s ease,
              transform .14s ease,
              color .14s ease !important;

  z-index: 10 !important;
}

/* ✅ 항목에 마우스 올렸을 때만 보이게 */
#inboxList .noti-item:hover .noti-del-btn{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ✅ 다크모드: 호버 시 은은한 글래스 느낌 */
[data-theme="dark"] #inboxList .noti-item .noti-del-btn:hover{
  background-color: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.78) !important;
  transform: translateY(-50%) scale(1.04) !important;
}

/* ✅ 라이트모드: 더 얇고 깔끔하게 */
html:not([data-theme="dark"]) #inboxList .noti-item .noti-del-btn{
  color: rgba(15,23,42,0.45) !important;
}

html:not([data-theme="dark"]) #inboxList .noti-item .noti-del-btn:hover{
  background-color: rgba(15,23,42,0.06) !important;
  border-color: rgba(15,23,42,0.08) !important;
  color: rgba(15,23,42,0.75) !important;
  transform: translateY(-50%) scale(1.04) !important;
}

/* ✅ 클릭감 */
#inboxList .noti-item .noti-del-btn:active{
  transform: translateY(-50%) scale(0.96) !important;
}

/* 수신함 닫기 버튼 위치 조절 */
#inboxModal .dialog-header .btn-header-icon.close{
  margin-right: -6px; /* 우측으로 6px 더 붙임 */
}

/* =========================
   [My Tasks] 리스트 Row Hover
   ========================= */

    .my-task-row{
      background: transparent;
      transition: background 0.2s ease;
    }

    /* 라이트 모드 */
    .my-task-row:hover{
      background: rgba(0, 0, 0, 0.03);
    }

    /* 다크 모드 */
    [data-theme="dark"] .my-task-row:hover{
      background: rgba(255, 255, 255, 0.05);
    }

/* =========================
[My Tasks] 컬럼 헤더 구분감 강화
========================= */

    .my-tasks-colhead{
      background: var(--md-sys-color-surface-container) !important;
      border-bottom: 1px solid rgba(0,0,0,0.12) !important;
    }

    /* 다크 모드에서 헤더 경계선 조금 더 또렷하게 */
    [data-theme="dark"] .my-tasks-colhead {
      border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    [data-theme="dark"] .my-tasks-topbar {
      border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    [data-theme="dark"] .my-tasks-footer{
      border-top: 1px solid rgba(255,255,255,0.12) !important;
    }

/* =========================
[Modal Link/File] 말줄임(ellipsis) 강제 처리
========================= */

    .link-item{
      display: flex;
      align-items: center;
      gap: 10px;
      overflow: hidden;
    }

    .link-a{
      display: flex;
      align-items: center;
      gap: 6px;

      flex: 1 1 auto;     /* ✅ 폭을 먹되 */
      min-width: 0;       /* ✅ 말줄임 핵심 */
      overflow: hidden;
      text-decoration: none;
    }

    .link-ico{
      flex: 0 0 auto;     /* 아이콘은 고정 */
    }

    .link-text{
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }