/* CSS 변수는 css-variables.css에서 공통 관리 */

/* ═══════════════════════════════════════════════
   페이지 전환 Fade-in 애니메이션
   - 헤더/네비게이션은 즉시 표시
   - 콘텐츠 영역만 부드럽게 fade-in
   ═══════════════════════════════════════════════ */
@keyframes page-content-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 콘텐츠 영역에 적용되는 fade-in 클래스 */
.page-fade-in {
    animation: page-content-fade-in 0.35s ease-out both;
}

/* 각 페이지별 콘텐츠 영역 자동 fade-in */
/* Home 페이지: 사이드바 제외한 메인 영역 */
.project-home-page .pdb-main,
.project-home-page .pdb-right-sidebar {
    animation: page-content-fade-in 0.35s ease-out both;
}

/* Chat 페이지: 채팅 영역 */
.project-chat-page .pdb-main--chat {
    animation: page-content-fade-in 0.35s ease-out both;
}

/* Timeline 페이지: 메인 영역 */
.project-timeline-page .ptl-main {
    animation: page-content-fade-in 0.35s ease-out both;
}

/* Archive 페이지: inner_content 영역 */
.archiving-mode .archiving-detail,
.archiving-mode .archiving-content,
.archiving-mode .archive-task-detail {
    animation: page-content-fade-in 0.35s ease-out both;
}

/* ═══════════════════════════════════════════════
   페이지 전환 Fade-out 애니메이션 (SPA 간 이동)
   - body.page-navigating 클래스 추가 시 페이드아웃
   ═══════════════════════════════════════════════ */
@keyframes page-content-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

body.page-navigating {
    pointer-events: none;
}

body.page-navigating .pdb-main,
body.page-navigating .pdb-right-sidebar,
body.page-navigating .pdb-main--chat,
body.page-navigating .ptl-main,
body.page-navigating .td-layout,
body.page-navigating .archiving-detail,
body.page-navigating .archiving-content {
    animation: page-content-fade-out 0.15s ease-out both;
}

/* app.css 또는 global css */
/* app.css 또는 global css */

/* 1. 스크롤바 전체 컨테이너에 적용할 클래스 */
.glass-scroll-theme * {
    /* Firefox용 설정: 아주 얇게, 투명하게 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* 2. Webkit (Chrome, Edge, Safari) 설정 */
.glass-scroll-theme *::-webkit-scrollbar {
    width: 10px;
    /* 세로 스크롤바 너비 */
    height: 10px;
    /* 가로 스크롤바 높이 */
}

/* 3. 트랙(배경): 완전히 투명하게 해서 유리의 질감을 해치지 않음 */
.glass-scroll-theme *::-webkit-scrollbar-track {
    background: transparent;
}

/* 4. 썸(손잡이): 물방울이나 얇은 유리 조각 느낌 */
.glass-scroll-theme *::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    /* 기본: 아주 연한 흰색 투명도 */
    border-radius: 20px;
    /* 알약 모양 */

    /* ✨ 핵심 트릭: 투명 테두리를 줘서 스크롤바를 공중에 띄움 */
    border: 3px solid transparent;
    background-clip: content-box;
}

/* 5. 호버 효과: 마우스를 가져다 대면 조금 더 명확해짐 */
.glass-scroll-theme *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.7);
    /* 불투명도를 높여서 인식 강화 */
    border: 2px solid transparent;
    /* 호버 시엔 살짝 두꺼워지는 느낌 */
}

/* 6. 코너(가로/세로 스크롤 교차점): 투명 처리 */
.glass-scroll-theme *::-webkit-scrollbar-corner {
    background: transparent;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family:
        Pretendard,
        ui-sans-serif,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.35;
}

/* 다이얼로그가 열렸을 때 배경 스크롤 방지 */
body.dialog-open {
    overflow: hidden;
}

body.dialog-open .board {
    overflow: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.material-symbols-rounded {
    font-variation-settings:
        "opsz" 20,
        "wght" 400,
        "FILL" 0,
        "GRAD" 0;
    font-size: 18px;
    line-height: 1;
    vertical-align: -3px;
}

.material-symbols-rounded.icon-filled {
    font-variation-settings:
        "opsz" 20,
        "wght" 400,
        "FILL" 1,
        "GRAD" 0;
}

/* ========================================
   MOBILE BANNER (640px 이하에서 표시)
   전체 화면 바텀시트 스타일
   ======================================== */
.mobile-banner {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    flex-direction: column;
    justify-content: flex-end;
}

.mobile-banner[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .mobile-banner:not([hidden]) {
        display: flex;
    }
}

/* 배경 오버레이 */
.mobile-banner__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: mobile-banner-fade-in 0.3s ease-out;
}

@keyframes mobile-banner-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 바텀시트 */
.mobile-banner__sheet {
    position: relative;
    z-index: 1;
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.78),
        rgba(255, 255, 255, 0.52)
    );
    border-radius: 24px 24px 0 0;
    padding: 12px 24px 24px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    animation: mobile-banner-slide-up 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes mobile-banner-slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* 핸들 */
.mobile-banner__handle {
    width: 36px;
    height: 4px;
    background: rgba(15, 23, 42, 0.2);
    border-radius: 2px;
    margin: 0 auto 20px;
}

/* 히어로 섹션 (아이콘) */
.mobile-banner__hero {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.mobile-banner__icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 28px;
    box-shadow:
        0 12px 40px rgba(99, 102, 241, 0.4),
        0 4px 12px rgba(99, 102, 241, 0.2);
}

.mobile-banner__icon {
    font-size: 48px;
    color: white;
}

.mobile-banner__sparkle {
    position: absolute;
    font-size: 20px;
    color: #fbbf24;
    animation: sparkle-pulse 2s ease-in-out infinite;
}

.mobile-banner__sparkle--1 {
    top: -8px;
    right: -8px;
    animation-delay: 0s;
}

.mobile-banner__sparkle--2 {
    bottom: -4px;
    left: -8px;
    animation-delay: 1s;
}

@keyframes sparkle-pulse {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.2) rotate(15deg);
        opacity: 0.7;
    }
}

/* 콘텐츠 */
.mobile-banner__content {
    text-align: center;
    margin-bottom: 24px;
}

.mobile-banner__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-content);
    margin: 0 0 12px;
    line-height: 1.3;
}

.mobile-banner__desc {
    font-size: 15px;
    color: var(--muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

/* 기능 목록 */
.mobile-banner__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-banner__features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.35);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-radius: 12px;
    text-align: left;
}

.mobile-banner__features li .material-symbols-rounded {
    font-size: 24px;
    color: #6366f1;
    flex-shrink: 0;
}

.mobile-banner__features li span:last-child {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-content);
}

/* 액션 버튼 */
.mobile-banner__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.mobile-banner__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-banner__btn:active {
    transform: scale(0.98);
}

.mobile-banner__btn--primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.mobile-banner__btn--primary:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

.mobile-banner__btn--primary:active {
    transform: scale(0.98) translateY(0);
}

.mobile-banner__btn--primary .material-symbols-rounded {
    font-size: 20px;
}

.mobile-banner__btn--secondary {
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-content);
    border: 1px solid rgba(148, 163, 184, 0.4);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.mobile-banner__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.78);
}

/* Safe area for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-banner__sheet {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* 다크모드 */
[data-theme="dark"] .mobile-banner__backdrop {
    background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .mobile-banner__sheet {
    background: linear-gradient(
        140deg,
        rgba(15, 23, 42, 0.86),
        rgba(15, 23, 42, 0.62)
    );
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .mobile-banner__handle {
    background: rgba(148, 163, 184, 0.45);
}

[data-theme="dark"] .mobile-banner__features li {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .mobile-banner__btn--secondary:hover {
    background: rgba(30, 41, 59, 0.6);
}

/* ========================================
   RESIZE REFRESH BANNER
   데스크톱 → 모바일 리사이즈 시 새로고침 안내
   ======================================== */
.resize-refresh-banner {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    flex-direction: column;
    justify-content: flex-end;
}

.resize-refresh-banner[hidden] {
    display: none !important;
}

.resize-refresh-banner:not([hidden]) {
    display: flex;
}

.resize-refresh-banner__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: resize-refresh-fade-in 0.3s ease-out;
}

@keyframes resize-refresh-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.resize-refresh-banner__sheet {
    position: relative;
    z-index: 1;
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.78),
        rgba(255, 255, 255, 0.52)
    );
    border-radius: 24px 24px 0 0;
    padding: 12px 24px 24px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    animation: resize-refresh-slide-up 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes resize-refresh-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.resize-refresh-banner__handle {
    width: 36px;
    height: 4px;
    background: rgba(15, 23, 42, 0.2);
    border-radius: 2px;
    margin: 0 auto 20px;
}

.resize-refresh-banner__hero {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.resize-refresh-banner__icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #eab308);
    border-radius: 20px;
    box-shadow:
        0 12px 40px rgba(245, 158, 11, 0.4),
        0 4px 12px rgba(245, 158, 11, 0.2);
}

.resize-refresh-banner__icon {
    font-size: 40px;
    color: white;
}

.resize-refresh-banner__content {
    text-align: center;
    margin-bottom: 24px;
}

.resize-refresh-banner__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-content);
    margin: 0 0 12px;
    line-height: 1.3;
}

.resize-refresh-banner__desc {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

.resize-refresh-banner__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.resize-refresh-banner__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 24px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resize-refresh-banner__btn:active {
    transform: scale(0.98);
}

.resize-refresh-banner__btn--primary {
    background: linear-gradient(135deg, #f59e0b, #eab308);
    color: white;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.resize-refresh-banner__btn--primary:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

.resize-refresh-banner__btn--primary:active {
    transform: scale(0.98) translateY(0);
}

.resize-refresh-banner__btn--primary .material-symbols-rounded {
    font-size: 20px;
}

.resize-refresh-banner__btn--secondary {
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-content);
    border: 1px solid rgba(148, 163, 184, 0.4);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.resize-refresh-banner__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.78);
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .resize-refresh-banner__sheet {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* 다크모드 */
[data-theme="dark"] .resize-refresh-banner__backdrop {
    background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .resize-refresh-banner__sheet {
    background: linear-gradient(
        140deg,
        rgba(15, 23, 42, 0.86),
        rgba(15, 23, 42, 0.62)
    );
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .resize-refresh-banner__handle {
    background: rgba(148, 163, 184, 0.45);
}

[data-theme="dark"] .resize-refresh-banner__btn--secondary:hover {
    background: rgba(30, 41, 59, 0.6);
}

.btn .material-symbols-rounded,
.mini-btn .material-symbols-rounded,
.icon-btn .material-symbols-rounded,
.persona-picker__btn .material-symbols-rounded,
.topic-picker__btn .material-symbols-rounded,
.topic-option .material-symbols-rounded,
.label-picker__btn .material-symbols-rounded,
.label-option .material-symbols-rounded,
.tasktype-picker__icon,
.tasktype-option .material-symbols-rounded,
.persona-option .material-symbols-rounded {
    vertical-align: 0;
}

/* 헤더 바 */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 200;
}

.header-bar__left {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* TODO: 제거 필요 - archive.css로 이동됨 (header-bar__archiving 관련 스타일) */
.header-bar__archiving {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.header-bar__archiving-back {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 0px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-content);
    transition:
        box-shadow 0.15s,
        transform 0.15s,
        border-color 0.15s;
}

.header-bar__archiving-back:hover {
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

/* 홈 버튼 - 뒤로가기 버튼과 동일한 스타일 */
.header-bar__home-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 0px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-content);
    text-decoration: none;
    transition:
        box-shadow 0.15s,
        transform 0.15s,
        border-color 0.15s;
}

.header-bar__home-btn:hover {
    /* border-color: rgba(37, 99, 235, 0.4); */
    /* box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18); */
    transform: translateY(-1px);
    color: var(--accent);
}

.header-bar__home-btn .material-symbols-rounded {
    font-weight: 400;
}

/* TODO: 제거 필요 - archive.css로 이동됨 */
.header-bar__archiving-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-content);
}

/* TODO: 제거 필요 - archive.css로 이동됨 */
.header-bar__archiving-sep {
    margin: 0 6px;
    font-weight: 400;
    opacity: 0.4;
}

.header-bar__project-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-content);
}

.header-bar__dropdown {
    position: relative;
}

.header-bar__search::after {
    content: "|";
    margin-left: 12px;
}

/* TODO: 제거 필요 - archive.css로 이동됨 (header-bar__archiving-link 관련) */
/* .header-bar__archiving-link::before {
    content: "|";
    margin-right: 9px;
} */
.header-bar__archiving-link {
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--text-content);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.15s,
        color 0.15s;
}

.header-bar__archiving-link .material-symbols-rounded {
    font-size: 18px;
}

.header-bar__archiving-link:hover {
    background: rgba(15, 23, 42, 0.06);
}

.header-bar__archiving-link[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.header-bar__center {
    display: flex;
    min-width: 480px;
    gap: 16px;
}

.header-bar__filter {
    position: relative;
    display: flex;
    align-items: center;
}

.header-bar__filter-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
    color: rgba(15, 23, 42, 0.74);
}

.header-bar__filter-btn--active {
    color: var(--accent);
}

.header-bar__dropdown-menu--filter {
    min-width: 260px;
    padding: 10px;
}

.header-bar__filter-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.header-bar__filter-picker .member-picker__btn {
    width: 100%;
}

.header-bar__dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--muted);
    transition:
        background 0.15s,
        color 0.15s;
}

.header-bar__dropdown-btn:hover {
    background: var(--surface);
    color: var(--text-content);
}

.header-bar__dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    padding: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 201;
}

.header-bar__dropdown-menu--right {
    left: auto;
    right: 0;
}

.header-bar__menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    text-align: left;
    transition: background 0.15s;
}

.header-bar__menu-item:hover {
    background: var(--surface);
}

.header-bar__menu-item--primary {
    color: var(--accent);
}

.header-bar__menu-item--danger {
    color: var(--danger);
}

.header-bar__menu-item--more {
    color: var(--text-secondary);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
}

.header-bar__menu-item--more:hover {
    color: var(--text);
    background: var(--surface);
}

.header-bar__menu-item--more .material-symbols-rounded {
    font-size: 18px;
}

.header-bar__menu-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--line);
}

.header-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-bar__my-card-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    /* color: var(--accent); */
}

.header-bar__my-card-btn--active {
    background-color: var(--accent);
    font-weight: 700;
    color: #fff;
}
.header-bar__my-card-btn:hover,
.header-bar__my-card-btn--active:hover {
    background-color: var(--accent-dark, #4f46e5);
}

.header-bar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

.header-bar__search-input {
    min-width: 300px;
    flex: 1;
}

.header-bar__search-input {
    min-height: 42px !important;
}

.header-bar__desktop-only {
    display: flex;
    align-items: center;
}

.header-bar__connected {
    display: flex;
    align-items: center;
    padding-left: 6px;
}

.header-bar__member {
    position: relative;
    margin-left: -6px;
    border-radius: 999px;
    border: 2px solid var(--bg);
}

.header-bar__member:first-child {
    margin-left: 0;
}

.header-bar__member-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--avatar-bg, #14b8a6);
    overflow: hidden;
}

.header-bar__member-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.header-bar__member-avatar .material-symbols-rounded {
    font-size: 16px;
    line-height: 1;
}

.header-bar__member--overflow .header-bar__member-avatar {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
}

.header-bar__profile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

@media (max-width: 960px) {
    .header-bar__desktop-only {
        display: none;
    }
}

.header-bar__profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: opacity 0.15s;
    position: relative;
    padding: 0;
}

.header-bar__profile-btn:hover {
    opacity: 0.9;
}

.header-bar__profile-btn .material-symbols-rounded {
    font-size: 20px;
}

/* 사용자 아바타 (이니셜) */
.header-bar__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.72);
    background: var(--avatar-bg, #e8f2ff);
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.header-bar__sse-indicator {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #94a3b8;
    border: 2px solid var(--bg);
    /* box-shadow: 0 4px 8px rgba(15, 23, 42, 0.18); */
    transition:
        transform 0.2s ease,
        background 0.2s ease;
    pointer-events: none;
}

.header-bar__sse-indicator[data-state="online"] {
    background: #22c55e;
    transform: scale(1.05);
}

.header-bar__avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.header-bar__avatar .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
}

.header-bar__profile:hover .header-bar__avatar,
.header-bar__profile:focus-within .header-bar__avatar {
    /* transform: translateY(-1px); */
    /* box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2); */
}

.header-bar__hovercard {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    min-width: 220px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    z-index: 101;
}

.header-bar__profile:hover .header-bar__hovercard,
.header-bar__profile:focus-within .header-bar__hovercard {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.header-bar__hovercard-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.header-bar__hovercard .header-bar__user-name {
    font-size: 14px;
}

.header-bar__hovercard .header-bar__user-email {
    font-size: 12px;
}

/* 넓은 드롭다운 메뉴 */
.header-bar__dropdown-menu--wide {
    width: 280px;
}

/* 사용자 정보 헤더 */
.header-bar__user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.header-bar__user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--avatar-bg, #e8f2ff);
    color: rgba(15, 23, 42, 0.72);
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.header-bar__user-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.header-bar__user-avatar .material-symbols-rounded {
    font-size: 20px;
    line-height: 1;
}

.header-bar__user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-bar__user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-content);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-bar__user-email {
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 메뉴 섹션 타이틀 */
.header-bar__menu-section-title {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 조직 목록 */
.header-bar__org-list {
    max-height: 180px;
    overflow-y: auto;
}

.header-bar__org-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.header-bar__org-item:hover {
    background: var(--surface);
}

.header-bar__org-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(49, 130, 246, 0.1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.header-bar__org-name {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.header-bar__org-type {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--muted);
    flex-shrink: 0;
}

.header-bar__org-empty {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* 메뉴 아이템 링크 스타일 */
a.header-bar__menu-item {
    text-decoration: none;
}

/* 프로젝트 목록 */
.header-bar__project-list {
    max-height: 160px; /* 약 3.5개 아이템 높이 */
    overflow-y: auto;
}

/* 프로젝트 목록 아이템 */
.header-bar__project-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.header-bar__project-item:hover {
    background: var(--surface);
}

.header-bar__project-item--active {
    background: rgba(49, 130, 246, 0.08);
}

.header-bar__project-item__name {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 프로젝트 모달 스타일 */
.project-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 18px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(242, 244, 246, 0.82);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.04);
}

.app-title h1 {
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.2px;
}

.app-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.app-actions {
    display: flex;
    gap: 10px;
}

.plan-timeline {
    min-height: 320px;
}

.icon-btn[data-action="plan-regenerate"] {
    /* border-radius: 24px; */
    font-size: 14px;
    display: flex;
    gap: 4px;
    padding: 0 8px;
    width: fit-content !important;
    max-width: fit-content;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* background-color: rgba(255, 255, 255, 0.8); */
    color: var(--accent) !important;
    /* color: #fff !important; */
    font-weight: 700 !important;
}

.icon-btn[data-action="plan-regenerate"] span.material-symbols-rounded {
    margin-right: 4px;
    font-weight: 500;
}

.icon-btn[data-action="plan-regenerate"] span.spin {
    animation-direction: reverse;
}

.btn {
    border: 0;
    background: #111827;
    color: rgba(255, 255, 255, 0.96);
    padding: 10px 20px;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: none;
    transition:
        background 0.15s,
        border-color 0.15s,
        transform 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    min-height: 44px;
    text-decoration: none;
}

.btn:hover {
    background: #0b1220;
}

.btn:active {
    transform: scale(0.99);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.card:focus-visible,
.column__title:focus-visible {
    outline: 2px solid rgba(49, 130, 246, 0.65);
    outline-offset: 2px;
}

.btn-ghost {
    background: transparent;
    color: rgba(15, 23, 42, 0.62);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.42);
}

/* Icon button variant */
.btn--icon {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
    justify-content: center;
}

.btn--icon .material-symbols-rounded {
    font-size: 20px;
}

/* Ghost variant (modifier) */
.btn--ghost {
    background: transparent;
    color: var(--muted);
}

.btn--ghost:hover {
    background: var(--surface-component);
    color: var(--text-content);
}

.btn--ghost.btn--danger:hover {
    background: rgba(180, 35, 46, 0.12);
    color: #b4232e;
}

.btn-danger {
    background: rgba(180, 35, 46, 0.12);
    color: #b4232e;
    text-decoration: none;
}

.btn-danger:hover {
    background: rgba(180, 35, 46, 0.18);
}

.btn-danger-text {
    color: #b4232e;
}

.btn-danger-text:hover {
    background: rgba(180, 35, 46, 0.12);
}

.app-main {
    /* padding: 34px 28px 26px; */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* padding-bottom: 92px; */
}

.board-nav {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 auto 10px;
    max-width: calc(var(--lane-width) + 24px);
}

.board-nav__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background: rgba(25, 31, 40, 0.18);
    cursor: pointer;
}

.dot--active {
    background: rgba(25, 31, 40, 0.55);
}

.icon-btn--nav {
    width: 38px;
    height: 38px;
    border-radius: 14px;
}

.board {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: 12px;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.board section:first-child {
    margin-left: 24px;
}

.board section:last-child {
    margin-right: 24px;
}

.column {
    width: 100%;
    max-width: 360px;
    min-width: 220px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 1 1 260px;
    position: relative;
    min-height: 0;
}

.column::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.22);
}

.column:first-child::before {
    display: none;
}

.column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    background: transparent;
}

.column__title {
    font-size: 13px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 10px;
    cursor: text;
    user-select: none;
}

.column__title[contenteditable="true"] {
    user-select: text;
}

.column__title:focus {
    background: rgba(49, 130, 246, 0.1);
}

.column__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(25, 31, 40, 0.06);
}

.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 0;
    background: rgba(25, 31, 40, 0.06);
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.icon-btn--mini {
    width: 28px;
    height: 28px;
    border-radius: 10px;
}

.icon-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto;
}
.icon-btn--disabled:hover {
    background: rgba(25, 31, 40, 0.06);
}

.icon-btn:hover {
    background: rgba(25, 31, 40, 0.1);
}

.icon-btn--subtle {
    background: transparent;
    color: rgba(15, 23, 42, 0.34);
}

.icon-btn--subtle:hover {
    background: transparent;
    color: rgba(15, 23, 42, 0.56);
}

.icon-btn--muted {
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.4);
}

.icon-btn--muted:hover {
    background: rgba(15, 23, 42, 0.1);
    color: rgba(15, 23, 42, 0.6);
}

.icon-btn--confirm {
    background: #22c55e;
    color: #fff;
}

.icon-btn--confirm:hover {
    background: #16a34a;
    color: #fff;
}

.column__body {
    padding: 0px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 20px;
    flex: 1;
    min-height: 0;
    overflow: visible;
    padding: 10px;
    position: relative;
}

.card {
    text-align: left;
    border-radius: var(--radius-sm);
    border: 0;
    background-color: rgba(255, 255, 255, 0.98);
    color: rgba(15, 23, 42, 0.92);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
    padding: 18px;
    min-height: 120px;
    flex: 0 0 auto;
    cursor: grab;
    touch-action: none;
    position: relative;
    overflow: hidden;
    transition:
        transform 180ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 180ms ease,
        background 180ms ease;
    animation: card-appear 180ms cubic-bezier(0.2, 0, 0, 1) both;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    filter: blur(50px);
}

.card--in-progress {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: rgba(255, 255, 255, 0.8);
    /* border: var(--inprogress-border-width) solid transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)), var(--inprogress-sheen-gradient);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, var(--inprogress-sheen-size); */
    /* animation-name: var(--inprogress-sheen-animation);
  animation-duration: var(--inprogress-sheen-speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: var(--inprogress-sheen-direction); */
}

.card--in-progress::before,
.card--in-progress::after {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    /* background: linear-gradient(120deg, #fb0094, #4a4aff, #00ffa2, #ff7b00, #fb0094, #5d00ff, #ff0040); */
    /* background: linear-gradient(120deg, #4a4aff, #00ffa2, #5d00ff, #ff0453, #4a4aff, #00ffa2, #5d00ff, #00f7fb); */
    background: var(--inprogress-sheen-gradient);
    background-size: 400%;
    width: calc(100%);
    height: calc(100%);
    z-index: -1;
    animation: steam 10s linear infinite;
}

.card--in-progress > * {
    position: relative;
    z-index: 1;
}

.card--in-progress::after,
.gradient-border-spin::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(-1 * var(--inprogress-glow-spread));
    top: calc(-1 * var(--inprogress-glow-spread));
    width: calc(100% + var(--inprogress-glow-spread) * 2);
    height: calc(100% + var(--inprogress-glow-spread) * 2);
    border-radius: inherit;
    /* background: var(--inprogress-glow-gradient); */
    background-size: var(--inprogress-sheen-size);
    background-position: 0% 50%;
    opacity: var(--inprogress-glow-opacity);
    filter: blur(var(--inprogress-glow-blur));
    will-change: background-position, filter;
    animation-name: var(--inprogress-glow-animation);
    animation-duration: var(--inprogress-sheen-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--inprogress-sheen-direction);
    pointer-events: none;
}

/* .hint-popover - 통합됨: .hover-popover--agent 사용 */

@keyframes hintTextAppear {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.avatar-agent--speaking {
    animation: persona-busy 1.4s cubic-bezier(0.2, 0, 0, 1) 1;
    animation-delay: var(--busy-delay, 0s);
    transform-origin: 50% 55%;
}
@keyframes float-agent-idle {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}
/* 카드 내 아바타 - 말하는 애니메이션 */
/* .avatar-agent--speaking {
    
    animation: persona-busy 2.4s cubic-bezier(0.2, 0, 0, 1) infinite;
    animation-delay: var(--busy-delay, 0s);
    transform-origin: 50% 55%;
}

@keyframes avatarSpeaking {
    0% {
        transform: scale(1) rotate(0deg) translateX(0);
    }

    15% {
        transform: scale(1.18) rotate(-8deg) translateX(-3px);
    }

    30% {
        transform: scale(1.15) rotate(7deg) translateX(3px);
    }

    45% {
        transform: scale(1.12) rotate(-6deg) translateX(-2px);
    }

    60% {
        transform: scale(1.08) rotate(4deg) translateX(2px);
    }

    75% {
        transform: scale(1.04) rotate(-2deg) translateX(-1px);
    }

    100% {
        transform: scale(1) rotate(0deg) translateX(0);
    }
} */

/* In Review 상태 - 회전하는 그라디언트 보더 + 글로우 애니메이션 */
.card--in-review {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #f97316,
                #fdba74,
                #fb923c,
                #fed7aa,
                #ffedd5,
                #fbbf24
            )
            border-box;
    border: 3px solid transparent;
    animation: inreview-rotating 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* .card--in-review::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: repeating-conic-gradient(from var(--inreview-angle), #f97316, #fdba74, #fb923c, #fed7aa, #ffedd5, #fbbf24);
  border-radius: calc(var(--radius-sm) + 3px);
  z-index: -1;
  animation: inreview-rotating 4s linear 3;
}

.card--in-review::after {
  content: "";
  position: absolute;
  inset: -6px;
  background: repeating-conic-gradient(from var(--inreview-angle), #f97316, #fdba74, #fb923c, #fed7aa, #ffedd5, #fbbf24);
  border-radius: calc(var(--radius-sm) + 6px);
  z-index: -2;
  filter: blur(35px);
  opacity: 0.65;
  animation: inreview-rotating 4s linear 3, inreview-glow-pulse 3s ease-in-out 5;
  pointer-events: none;
} */

.card--in-review > * {
    position: relative;
    z-index: 1;
}

.card--in-review:hover {
    background:
        linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #f97316,
                #fdba74,
                #fb923c,
                #fed7aa,
                #ffedd5,
                #fbbf24
            )
            border-box;
}

/* Planning Pending 상태 - 계획 생성 중 (in-progress 스타일 복제, 초록~파란 그라데이션) */
.card--planning-pending {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: rgba(255, 255, 255, 0.8);
}

.card--planning-pending::before,
.card--planning-pending::after {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    border-radius: inherit;
    background: linear-gradient(
        -105deg,
        #00c896,
        #00b4d8,
        #0098fe,
        #33e4ff,
        #23c483,
        #0098fe,
        #00c896,
        #3182f6
    );
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    animation: steam 10s linear infinite;
}

.card--planning-pending > * {
    position: relative;
    z-index: 1;
}

.card--planning-pending::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(-1 * var(--inprogress-glow-spread));
    top: calc(-1 * var(--inprogress-glow-spread));
    width: calc(100% + var(--inprogress-glow-spread) * 2);
    height: calc(100% + var(--inprogress-glow-spread) * 2);
    border-radius: inherit;
    background-size: var(--inprogress-sheen-size);
    background-position: 0% 50%;
    opacity: var(--inprogress-glow-opacity);
    filter: blur(var(--inprogress-glow-blur));
    will-change: background-position, filter;
    animation-name: var(--inprogress-glow-animation);
    animation-duration: var(--inprogress-sheen-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--inprogress-sheen-direction);
    pointer-events: none;
}

/* Planning Done 상태 - 계획 생성 완료 (in-review 스타일 복제, 초록~파란 그라데이션) */
.card--planning-done {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #00c896,
                #33e4ff,
                #0098fe,
                #76d4c6,
                #23c483,
                #3182f6
            )
            border-box;
    border: 3px solid transparent;
    animation: inreview-rotating 4s linear infinite reverse;
}

.card--planning-done > * {
    position: relative;
    z-index: 1;
}

.card--planning-done:hover {
    background:
        linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #00c896,
                #33e4ff,
                #0098fe,
                #76d4c6,
                #23c483,
                #3182f6
            )
            border-box;
}

.gradient-border-spin {
    position: relative;
    overflow: visible;
    isolation: isolate;
    z-index: 0;
    border: var(--inprogress-border-width) solid transparent;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)),
        var(--inprogress-sheen-gradient);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-size: auto, var(--inprogress-sheen-size);
    animation-name: var(--inprogress-sheen-animation);
    animation-duration: var(--inprogress-sheen-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--inprogress-sheen-direction);
}

.gradient-border-spin > * {
    position: relative;
    z-index: 1;
}

.card--enter {
    animation: card-enter 780ms cubic-bezier(0.2, 0, 0, 1);
}

.card:active {
    cursor: grabbing;
}

.card:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.card--resolved {
    opacity: 0.62;
    background: rgba(248, 250, 252, 0.96);
    color: rgba(15, 23, 42, 0.62);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    transform: translateY(1px);
}

.card--resolved.card--resolved-enter {
    animation: card-resolve 620ms cubic-bezier(0.2, 0, 0, 1);
}

.card--resolved-enter .card__title--big {
    text-decoration-color: rgba(15, 23, 42, 0);
    animation: strike-color 520ms cubic-bezier(0.2, 0, 0, 1) forwards;
}

.card--resolved.card--success-enter {
    animation: card-success-pop 900ms cubic-bezier(0.2, 0, 0, 1);
}

.card--resolved.card--success-enter .card__title--big {
    text-decoration-color: rgba(15, 23, 42, 0);
    animation: strike-color 560ms cubic-bezier(0.2, 0, 0, 1) 360ms forwards;
}

.card--resolved.card--success-enter::after {
    content: "Done!";
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: -0.2px;
    font-size: 22px;
    color: rgba(15, 23, 42, 0.78);
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(0.96);
    animation: done-badge 900ms cubic-bezier(0.2, 0, 0, 1);
    /* animation: done-badge 900ms ease-out; */
}

.card--resolved:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09);
}

.card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.card__top-right {
    margin-right: -10px;
    margin-top: -10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.persona {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.persona__meta {
    min-width: 0;
}

.persona__team {
    font-size: 12px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.74);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.persona__kw {
    margin-top: 3px;
    font-size: 11px;
    color: rgba(15, 23, 42, 0.56);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.persona-picker__btn .persona__team,
.persona-option .persona__team {
    font-size: 14px;
    color: var(--text-content);
}

.persona-picker__btn .persona__kw,
.persona-option .persona__kw {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.62);
}

.persona__position {
    font-size: 11px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.5);
    margin-left: 4px;
}
.subtask-card .persona__chip {
    display: none;
}

.persona__chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.56);
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.persona-picker {
    position: relative;
}

.dropdown__btn {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(25, 31, 40, 0.06);
    min-height: var(--control-height);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-content);

    transition:
        background 0.15s,
        transform 0.1s;
}

.dropdown__btn:hover {
    background: rgba(25, 31, 40, 0.06);
}

.dropdown__btn:active {
    transform: scale(0.99);
}

.dropdown[data-open="true"] .dropdown__btn {
    background: rgba(49, 130, 246, 0.06);
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.14);
}

.dropdown__menu {
    z-index: 20;

    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    padding: 8px;
    display: none;
    margin-bottom: 24px;

    background: #fafafaad;
    border: 2px solid #ffffffad;
    backdrop-filter: blur(5px);
}

.dropdown[data-open="true"] .dropdown__menu {
    display: grid;
    gap: 6px;
}

.dropdown__option {
    background: transparent;
}

.dropdown__option:hover {
    background: rgba(15, 23, 42, 0.06);
}

.persona-picker__chev {
    margin-left: auto;
    color: rgba(15, 23, 42, 0.5);
}

.persona-picker__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
}

.persona-option {
    border: 0;
    border-radius: 14px;
    padding: 10px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

.field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 8px;
}

.tag-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--dot, transparent);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex: 0 0 auto;
}

.tag-dot--lg {
    width: 16px;
    height: 16px;
}

.tag-dot--xl {
    width: 22px;
    height: 22px;
}

.topic-picker,
.label-picker,
.tasktype-picker {
    position: relative;
}

.topic-picker__text,
.label-picker__text,
.tasktype-picker__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-picker__chev,
.label-picker__chev,
.tasktype-picker__chev {
    margin-left: auto;
    color: rgba(15, 23, 42, 0.5);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 2px;
}

.topic-picker__menu,
.label-picker__menu,
.tasktype-picker__menu {
    /* position: fixed; */
}

.label-preview {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    align-items: center;
}

.label-preview__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.label-preview__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-preview__more {
    color: rgba(15, 23, 42, 0.62);
    font-weight: 700;
    flex: 0 0 auto;
}

.label-preview__count {
    color: rgba(15, 23, 42, 0.5);
    font-size: 13px;
    flex: 0 0 auto;
    margin-left: 6px;
    display: none;
}

.topic-option,
.label-option,
.tasktype-option {
    border: 0;
    border-radius: 14px;
    padding: 10px 10px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: rgba(15, 23, 42, 0.74);
}

.topic-option__text,
.label-option__text,
.tasktype-option__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-content);
}

.topic-option__check,
.label-option__check {
    margin-left: auto;
    color: rgba(15, 23, 42, 0.55);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topic-menu__divider,
.label-menu__divider {
    height: 1px;
    margin: 6px 6px;
    background: rgba(0, 0, 0, 0.08);
}

.member-picker,
.permission-picker {
    position: relative;
}

.member-picker__menu,
.permission-picker__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
}

.member-picker__chev,
.permission-picker__chev {
    margin-left: auto;
    color: rgba(15, 23, 42, 0.5);
}

.member-option,
.permission-option {
    border: 0;
    border-radius: 14px;
    padding: 10px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

.member-option__role {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.55);
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.member-option__check {
    margin-left: auto;
    color: rgba(15, 23, 42, 0.55);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-option__role + .member-option__check {
    margin-left: 0;
}

.member__meta {
    min-width: 0;
    overflow: hidden;
}

.member__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}
.member-picker__btn .member__name {
    padding-right: 36px;
}

.member__sub {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.member__chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.56);
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.avatar-initial {
    font-size: 14px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.7);
}

.permission-stack {
    display: grid;
    gap: 10px;
}

.toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.toggle__ui {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: rgba(25, 31, 40, 0.12);
    position: relative;
    transition: background 0.16s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.toggle__ui::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    position: absolute;
    left: 2px;
    top: 2px;
    transition:
        transform 0.16s ease,
        background 0.16s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.toggle__input:checked + .toggle__ui {
    background: rgba(35, 196, 131, 0.4);
}

.toggle__input:checked + .toggle__ui::after {
    transform: translateX(20px);
    background: #23c483;
}

.toggle__input:disabled + .toggle__ui {
    opacity: 0.45;
}

/* 단순 토글 스위치 (input[type="checkbox"].toggle) */
input[type="checkbox"].toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: rgba(25, 31, 40, 0.12);
    position: relative;
    cursor: pointer;
    transition: background 0.16s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

input[type="checkbox"].toggle::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    position: absolute;
    left: 2px;
    top: 2px;
    transition:
        transform 0.16s ease,
        background 0.16s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

input[type="checkbox"].toggle:checked {
    background: rgba(35, 196, 131, 0.4);
}

input[type="checkbox"].toggle:checked::after {
    transform: translateX(20px);
    background: #23c483;
}

input[type="checkbox"].toggle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 토글 필드 레이아웃 */
.field__row--toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}

.field__label-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field__desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.cat-admin {
    display: grid;
    gap: 10px;
}

.cat-row {
    display: grid;
    grid-template-columns: 30px 1fr 1fr auto;
    gap: 10px;
    align-items: center;
}

.cat-row--extended {
    grid-template-columns: 30px 1fr auto;
    align-items: flex-start;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.cat-row__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-row__top {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
}

.cat-field {
    display: grid;
    gap: 4px;
}

.cat-field--grow {
    flex: 1;
}

.cat-field--full {
    width: 100%;
}

.cat-field__label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.56);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cat-desc {
    resize: vertical;
    min-height: 48px;
    max-height: 120px;
}

.cat-row__dates {
    display: flex;
    gap: 16px;
}

.cat-date {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.44);
}

.cat-row__swatch {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(25, 31, 40, 0.04);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cat-row__swatch:hover {
    background: rgba(25, 31, 40, 0.06);
}

.cat-row__dates {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
}

.cat-row__date {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.48);
    white-space: nowrap;
}

.task-meta {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(25, 31, 40, 0.04);
}

.ref-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ref-chip__body {
    border-radius: 14px;
    background: rgba(25, 31, 40, 0.04);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0);
    transition:
        background 0.12s ease,
        box-shadow 0.12s ease;
}

.ref-chip input:checked + .ref-chip__body {
    background: rgba(49, 130, 246, 0.08);
    box-shadow: inset 0 0 0 1.5px rgba(49, 130, 246, 0.28);
}

.ref-chip__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.ref-chip__label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.78);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-list {
    display: grid;
    gap: 10px;
}

.plan-cards {
    display: block;
}

.plan-row {
    display: flex;
    gap: 8px;
    margin: 0px 6px;
}

/* Rail column (left side - numbers with connecting line) */
.plan-rail-col {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.plan-rail-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    /* min-height: 80px; */
}

.plan-rail-node::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--plan-route-gap) * -0.5);
    bottom: calc(var(--plan-route-gap) * -0.5);
    width: 4px;
    /* border-radius: 999px; */
    background: #eaeaea;
    z-index: 0;
}

.plan-rail-node--first::before {
    top: 50%;
}

.plan-rail-node--last::before {
    bottom: 50%;
}

.plan-rail-node--first.plan-rail-node--last::before {
    display: none;
}

.plan-rail-node__num {
    position: relative;
    z-index: 0;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 4px solid #aeaeae;
    background: #fff;
    color: #aeaeae00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.06);
    user-select: none;
}

.plan-rail-node--done::before {
    background: rgba(35, 196, 131, 1);
}

.plan-rail-node--done .plan-rail-node__num {
    border-color: rgba(35, 196, 131, 1);
    background: rgba(35, 196, 131, 1);
    color: rgba(255, 255, 255, 1);
}

/* Cards column (right side) */
.plan-item {
    /* display: block; */
}

.plan-item__body {
    min-width: 0;
    display: block;
    width: 90%;
}

.plan-item--done .plan-card .plan-card__content {
    background: rgba(35, 196, 131, 0.08);
    border: 1px solid rgba(35, 196, 131, 0.25);
}

.plan-item--done .plan-card__title {
    color: rgba(35, 196, 131, 0.9);
}

.plan-item--dragging {
    opacity: 0.75;
    transform: scale(0.9);
}

.plan-card {
    position: relative;
    display: flex;
    align-items: stretch;
    /* background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 3px 10px 5px rgba(0, 0, 0, 0.02); */
    margin: 6px 0px;
    min-width: 160px;
}

.plan-card__content {
    flex: 1;
    padding: 18px 18px 10px;
    min-width: 0;
    /* margin-right: 42px; */
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 3px 10px 5px rgba(0, 0, 0, 0.02);
}
.task-theme-adaptive .plan-card__content {
    margin-right: 22px !important;
}
.task-theme-adaptive .plan-card__actions-panel {
    right: -20px !important;
}
/* 카드 액션 패널 (content 우측, 세로 배열, 호버 시 표시) */
.plan-card__actions-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: -42px;
    top: 25%;
    transition: opacity 0.15s;
}

.plan-card:hover .plan-card__actions-panel {
    opacity: 1;
    pointer-events: auto;
}

.plan-card__top {
    /* display: flex; */
    align-items: center;
    /* justify-content: space-between; */
    /* gap: 10px; */
}

.plan-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.plan-card__title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.84);
    min-width: 0;
    word-break: keep-all;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.plan-card__badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(49, 130, 246, 0.1);
    color: rgba(49, 130, 246, 0.86);
}

.plan-card__memo {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.62);
    line-height: 1.35;
    word-break: keep-all;
}

/* 컴팩트 계획 카드 (적응형 레이아웃용) */
.plan-cards--compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plan-card--compact {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    font-size: 13px;
    line-height: 1.4;
}

.plan-card--compact.plan-card--done {
    opacity: 0.6;
}

.plan-card--compact.plan-card--done .plan-card__text {
    text-decoration: line-through;
}

.plan-card--compact .plan-card__check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.5);
}

.plan-card--compact.plan-card--done .plan-card__check {
    color: #23c483;
}

.plan-card--compact .plan-card__text {
    flex: 1;
    color: var(--text-content);
    word-break: keep-all;
}

.plan-item--sample {
    opacity: 0.82;
}

/* 글래스모피즘 컴팩트 계획 카드 (settings 패널용) */
.plan-card-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.2) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.plan-card-compact:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.plan-card-compact--done {
    opacity: 0.7;
}

.plan-card-compact--done .plan-card-compact__title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.plan-card-compact__check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.plan-card-compact__check .material-symbols-rounded {
    font-size: 20px;
}

.plan-card-compact--done .plan-card-compact__check {
    color: #23c483;
}

.plan-card-compact__avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    overflow: hidden;
}

.plan-card-compact__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plan-card-compact__avatar .material-symbols-rounded {
    font-size: 16px;
}

.plan-card-compact__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plan-card-compact__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-content);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-card-compact__agent {
    font-size: 11px;
    color: var(--text-muted);
}

.plan-card-compact__actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.plan-card-compact:hover .plan-card-compact__actions {
    opacity: 1;
}

/* field__label-row 스타일 */
.field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.field__label-row .field__label {
    margin-bottom: 0;
}

.field__label-row .section__actions {
    display: flex;
    gap: 4px;
}

/* empty-note 스타일 개선 */
[data-plan-timeline-settings] .empty-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

[data-plan-timeline-settings] .empty-note .material-symbols-rounded {
    font-size: 32px;
    opacity: 0.5;
}

/* 글래스 버튼 */
.btn--glass {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.2) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--accent);
}

.btn--glass:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.4) 100%
    );
    border-color: rgba(99, 102, 241, 0.3);
}

.plan-edit-item {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 12px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.plan-edit-item__head {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    gap: 10px;
    align-items: center;
}

.plan-edit-item__memo {
    margin-top: 10px;
}

.plan-edit-item__handle {
    cursor: grab;
}

.plan-edit-item--dragging {
    opacity: 0.7;
    transform: scale(0.99);
}

/* ===== Plan Card: 워크플로 스타일 메타 행 ===== */
/* ===== Plan Card: 뷰 모드 메타 (1줄 수평) ===== */
.plan-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.plan-card__meta-agent {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: default;
}

.plan-card__meta-review {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: default;
    margin-left: auto;
}

.plan-card__meta-icon {
    font-size: 16px;
    color: rgba(15, 23, 42, 0.35);
    flex-shrink: 0;
}

.plan-card__meta-icon--review {
    color: #22c55e;
    font-size: 18px;
}

/* .plan-card__meta-hint[popover] - 통합됨: .hover-popover--meta 사용 */
.plan-card__meta-value {
    font-size: 12px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 미니 에이전트 아바타 (뷰 + 편집 공용) */
.avatar-agent--xs {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    flex-shrink: 0;
}

.avatar-agent--xs .material-symbols-rounded {
    font-size: 14px !important;
}

.avatar-agent--xs .avatar-img {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    object-fit: cover;
}

/* ===== Plan View: 인라인 편집 모드 스타일 ===== */

/* 순서 변경 버튼 (up/down arrow) */
.plan-order-btns {
    position: absolute;
    /* left: -28px; */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 5;
}
.plan-item--done .plan-order-btns {
    display: none;
}
.plan-rail-col {
    position: relative;
}

.plan-rail-col:hover .plan-order-btns {
    opacity: 1;
}

.plan-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #555;
    border: 0px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.plan-order-btn .material-symbols-rounded {
    font-size: 16px;
    /* color: rgba(15, 23, 42, 0.5); */
    color: #fff;
}

.plan-order-btn:hover:not(:disabled) {
    background: #000;
    border-color: #000;
}

.plan-order-btn:hover:not(:disabled) .material-symbols-rounded {
    color: #fff;
}

.plan-order-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 제목 행 */
.plan-card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* 제목 수정 버튼 (액션 패널 내부) */
.plan-view-title-edit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.plan-view-title-edit .material-symbols-rounded {
    font-size: 16px;
    color: rgba(15, 23, 42, 0.5);
}

.plan-view-title-edit:hover {
    background: rgba(0, 0, 0, 0.06);
}

.plan-view-title-edit:hover .material-symbols-rounded {
    color: rgba(15, 23, 42, 0.8);
}

/* 인라인 제목 편집 인풋 */
.plan-view-title-input {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.84);
    padding: 4px 8px;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    background: white;
    outline: none;
    min-width: 0;
}

.plan-view-title-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* 뷰 모드 에이전트 피커 */
.plan-view-agent-picker {
    position: relative;
}

.plan-view-agent-picker .plan-agent-picker__btn {
    padding: 4px 8px;
}

/* 뷰 모드 사람 검토 토글 */
.plan-view-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: rgba(15, 23, 42, 0.3);
    transition:
        background 0.15s,
        color 0.15s;
    margin-left: auto;
}

.plan-view-review:hover {
    background: rgba(0, 0, 0, 0.04);
}

.plan-view-review--on {
    color: #22c55e;
}

.plan-view-review__icon {
    font-size: 18px;
}

/* 뷰 모드 삭제 버튼 (액션 패널 내부) */
.plan-view-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: rgba(15, 23, 42, 0.35);
    transition:
        background 0.15s,
        color 0.15s;
}

.plan-view-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.plan-view-delete .material-symbols-rounded {
    font-size: 16px;
}

/* ===== Plan Edit: 워크플로 스타일 메타 편집 ===== */
.plan-edit-item__meta {
    margin-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 12px 4px 2px;
}

.plan-edit-item__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* 사람 검토 on/off — 오른쪽 정렬, 아이콘 토글 */
.plan-edit-review {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 8px;
    transition:
        background 0.15s,
        color 0.15s;
    margin-left: auto;
    color: rgba(15, 23, 42, 0.35);
}

.plan-edit-review:hover {
    background: rgba(0, 0, 0, 0.04);
}

.plan-edit-review__icon {
    font-size: 18px;
    transition: color 0.15s;
    color: inherit;
}

.plan-edit-review__label {
    font-size: 12px;
    white-space: nowrap;
    color: inherit;
    font-weight: 500;
}

.plan-edit-review__toggle {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #22c55e;
    cursor: pointer;
    display: none;
}

/* on 상태: 초록색 강조 */
.plan-edit-review--on {
    color: #22c55e;
}

/* plan-agent-picker: workplan용 에이전트 선택 컨텍스트 메뉴 */
.plan-agent-picker {
    position: relative;
}

.plan-agent-picker__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    transition: background 0.15s;
}

.plan-agent-picker__btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.plan-agent-picker__icon {
    font-size: 16px;
    color: rgba(15, 23, 42, 0.4);
}

.plan-agent-picker__name {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.65);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* plan-agent-picker__menu: persona-picker와 동일한 스타일 */
.plan-agent-picker__menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 50;
    min-width: 240px;
    max-width: 300px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    padding: 10px;
    display: none;
    background: var(--surface-component);
    backdrop-filter: blur(var(--surface-component--blur));
    border: 2px solid var(--surface-component--border);
}

.plan-agent-picker[data-open="true"] .plan-agent-picker__menu {
    display: grid;
    gap: 2px;
}

/* persona-option 스타일은 기존 CSS에서 상속 */
.input.input--sm {
    padding: 10px 12px;
    border-radius: 12px;
    min-height: 40px;
}

.textarea.textarea--sm {
    min-height: 72px;
}

.meta-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.meta-line__k {
    color: rgba(15, 23, 42, 0.56);
}

.meta-line__v {
    color: rgba(15, 23, 42, 0.78);
    font-variant-numeric: tabular-nums;
}

.task-logs {
    margin-top: 10px;
}

.empty-note {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.56);
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(25, 31, 40, 0.03);
}

.activity {
    display: grid;
    gap: 12px;
}

.activity__item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
}

.activity__rail {
    position: relative;
}

.activity__rail::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 2px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.28);
}

.activity__rail::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 12px;
    bottom: -10px;
    width: 1px;
    background: rgba(15, 23, 42, 0.12);
}

.activity__item:last-child .activity__rail::after {
    display: none;
}

.activity__time {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.52);
    font-variant-numeric: tabular-nums;
    text-align: left;
    font-weight: 600;
}

.activity__time:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.activity__content {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-content);
    word-break: keep-all;
}

[data-locale-confirm-dialog],
[data-locale-confirm-dialog] .dialog__panel,
[data-locale-confirm-dialog] .dialog__body,
[data-locale-confirm-dialog] .dialog__footer {
    width: 320px;
    min-height: 0;
}

[data-locale-confirm-dialog] .dialog__body {
    height: 240px;
}

[data-dialog="color"] .dialog__panel {
    width: 480px;
}

.color-popover {
    width: 100%;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.color-popover__title {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.66);
    margin-bottom: 10px;
}

.color-popover__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.color-dot-btn {
    width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: rgba(25, 31, 40, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.color-dot-btn:hover {
    background: rgba(25, 31, 40, 0.06);
}

.color-dot-btn[aria-pressed="true"] {
    background: rgba(25, 31, 40, 0.12);
}

.color-dot-btn .tag-dot {
    background: var(--dot, transparent);
}

.color-popover__custom {
    margin-top: 10px;
}

.task-type-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(15, 23, 42, 0.58);
    font-size: 12px;
    letter-spacing: -0.1px;
    user-select: none;
}

.task-type-inline .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.52);
    vertical-align: 0;
}

.task-type-inline__text {
    font-weight: 600;
}

.card__title {
    font-size: 13px;
    margin: 0 0 6px;
    font-weight: 640;
    letter-spacing: 0.1px;
}

.card__title--big {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin: 0 0 10px;
    font-weight: 600;
    color: var(--text-content);
}

.card--resolved .card__title--big {
    color: rgba(15, 23, 42, 0.56);
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(15, 23, 42, 0.34);
    text-decoration-skip-ink: none;
}

.card--resolved .card__desc {
    display: none;
}

.card--resolved .persona__team {
    color: rgba(15, 23, 42, 0.56);
}

.card--resolved .persona__kw {
    color: rgba(15, 23, 42, 0.4);
}

.card--resolved .task-type-inline {
    color: rgba(15, 23, 42, 0.42);
}

.card--resolved .task-type-inline .material-symbols-rounded {
    color: rgba(15, 23, 42, 0.38);
}

.card--resolved .chip {
    background: rgba(25, 31, 40, 0.04);
    color: rgba(15, 23, 42, 0.52);
}

.card--resolved .chip--topic {
    background: color-mix(
        in srgb,
        var(--chip-accent, #64748b) 12%,
        rgba(25, 31, 40, 0.04)
    );
}

.card--resolved .chip--status {
    background: color-mix(
        in srgb,
        var(--chip-accent, #64748b) 10%,
        rgba(25, 31, 40, 0.04)
    );
}

/* .card--lead-team.card--in-progress:not(.card--resolved)
    .persona
    .avatar-circle--lg
    .material-symbols-rounded {
    animation: persona-busy 2.4s cubic-bezier(0.2, 0, 0, 1) infinite;
    animation-delay: var(--busy-delay, 0s);
    transform-origin: 50% 55%;
} */

.card__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(15, 23, 42, 0.56);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__desc--small {
    -webkit-line-clamp: 2;
    line-height: 1.5;
    margin-bottom: 8px;
    word-wrap: normal;
    word-break: keep-all;
}

@keyframes inprogress-sheen {
    from {
        background-position:
            0 0,
            0% 50%;
    }

    to {
        background-position:
            0 0,
            var(--inprogress-sheen-travel) 50%;
    }
}

@keyframes inprogress-glow-sheen {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: var(--inprogress-sheen-travel) 50%;
    }
}

@keyframes inprogress-rotate {
    to {
        transform: rotate(1turn);
    }
}

@keyframes inreview-rotating {
    0% {
        --inreview-angle: 0deg;
    }

    100% {
        --inreview-angle: 360deg;
    }
}

@keyframes inreview-glow-pulse {
    0% {
        opacity: 0;
        filter: blur(55px);
    }

    50% {
        opacity: 0.75;
        filter: blur(25px);
    }

    100% {
        opacity: 0;
        filter: blur(55px);
    }
}

@keyframes steam {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes card-enter {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
        filter: blur(3px) saturate(1.25);
        box-shadow: 0 30px 70px rgba(49, 130, 246, 0.22);
    }

    55% {
        opacity: 1;
        transform: translateY(0px) scale(1.02);
        filter: blur(0px) saturate(1.1);
        box-shadow: 0 22px 54px rgba(49, 130, 246, 0.18);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
        filter: none;
    }
}

@keyframes card-resolve {
    0% {
        opacity: 1;
        filter: saturate(1);
    }

    100% {
        opacity: 0.62;
        filter: saturate(0.85);
    }
}

@keyframes card-success-pop {
    0% {
        opacity: 1;
        background: rgba(34, 197, 94, 0.6);
        box-shadow: 0 34px 84px rgba(34, 197, 94, 0.28);
        transform: translateY(-2px) scale(1.2);
        filter: saturate(1.35);
    }

    24% {
        opacity: 1;
        background: rgba(34, 197, 94, 0.6);
        box-shadow: 0 34px 84px rgba(34, 197, 94, 0.28);
        /* transform: translateY(-1px) scale(1.08); */
        filter: saturate(1.25);
    }

    62% {
        background: rgba(248, 250, 252, 0.96);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
        /* transform: translateY(2px) scale(1.01); */
        filter: saturate(0.9);
    }

    100% {
        opacity: 0.62;
        background: rgba(248, 250, 252, 0.96);
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
        transform: translateY(1px) scale(1);
        filter: saturate(0.85);
    }
}

@keyframes done-badge {
    0% {
        opacity: 0;
        transform: scale(0.94);
    }

    18% {
        opacity: 1;
        transform: scale(1.04);
    }

    45% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes strike-color {
    0% {
        text-decoration-color: rgba(15, 23, 42, 0);
    }

    100% {
        text-decoration-color: rgba(15, 23, 42, 0.34);
    }
}

@keyframes persona-busy {
    0% {
        transform: rotate(0deg) scale(1);
    }

    /* Fast burst */
    6% {
        transform: rotate(-22deg) scale(1.18);
    }

    12% {
        transform: rotate(26deg) scale(1.14);
    }

    18% {
        transform: rotate(-18deg) scale(1.17);
    }

    24% {
        transform: rotate(16deg) scale(1.12);
    }

    /* Slow settle */
    44% {
        transform: rotate(-9deg) scale(1.08);
    }

    62% {
        transform: rotate(12deg) scale(1.06);
    }

    74% {
        transform: rotate(0deg) scale(1.06);
    }

    /* Rest */
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.card__chips {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
    font-size: 12px;
    color: rgba(15, 23, 42, 0.72);
}

.chip--topic {
    background: color-mix(
        in srgb,
        var(--chip-accent, #3182f6) 22%,
        rgba(255, 255, 255, 0.34)
    );
    color: rgba(15, 23, 42, 0.8);
}

.chip--status {
    background: color-mix(
        in srgb,
        var(--chip-accent, #64748b) 18%,
        rgba(255, 255, 255, 0.34)
    );
    color: rgba(15, 23, 42, 0.72);
}

/* ── depends-on 칩 ── */
.chip--depends {
    /* background: color-mix(in srgb, #f59e0b 18%, rgba(255, 255, 255, 0.34)); */
    background: #ededed;
    color: rgba(15, 23, 42, 0.8);
    cursor: default;
    position: relative;
    font-weight: 500;
}
.chip--depends .material-symbols-rounded {
    font-size: 18px;
}
[data-theme="dark"] .chip--depends {
    background: color-mix(in srgb, #f59e0b 22%, rgba(30, 30, 30, 0.5));
    color: #fbbf24;
}

.chip--schedule {
    background: color-mix(in srgb, #6366f1 14%, rgba(255, 255, 255, 0.34));
    color: #4f46e5;
    cursor: default;
    font-size: 11px;
    gap: 2px;
}
.chip--schedule .material-symbols-rounded {
    font-size: 14px;
}
[data-theme="dark"] .chip--schedule {
    background: color-mix(in srgb, #6366f1 22%, rgba(30, 30, 30, 0.5));
    color: #818cf8;
}

.avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--avatar-bg, rgba(49, 130, 246, 0.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.avatar-circle--lg {
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.avatar-circle .material-symbols-rounded,
.header-bar__member-avatar .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.72);
    vertical-align: 0;
}

/* 에이전트 전용 아바타 (RoundSquare - 둥근 사각형) */
.avatar-agent {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--avatar-bg, rgba(49, 130, 246, 0.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-review-filter-menu] {
    min-width: 320px !important;
}

.avatar-agent--lg {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px;
}

.avatar-agent--xl {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.avatar-agent .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.72);
    vertical-align: 0;
}

.avatar-agent--lg .material-symbols-rounded {
    font-size: 20px;
}

.avatar-agent--xl .material-symbols-rounded {
    font-size: 24px;
}

/* 삭제된 에이전트 스타일 */
.avatar-agent--deleted {
    opacity: 0.6;
}

.persona__team--deleted,
.just-chat__message-agent-name--deleted {
    color: rgba(15, 23, 42, 0.45);
    font-style: italic;
}

/* 회원 전용 아바타 (원형) */
.avatar-member {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--avatar-bg, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.avatar-member--lg {
    width: 40px;
    height: 40px;
}

.avatar-member--xl {
    width: 48px;
    height: 48px;
}

.avatar-member .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.72);
    vertical-align: 0;
}

.avatar-member--lg .material-symbols-rounded {
    font-size: 20px;
}

.avatar-member--xl .material-symbols-rounded {
    font-size: 24px;
}

.avatar-member__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-type-art {
    display: none;
}

.card__row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.card__time {
    font-size: 11px;
    color: rgba(107, 118, 132, 0.9);
}

.card__actions {
    display: flex;
    gap: 6px;
}

.mini-btn {
    transition:
        background 0.15s,
        transform 0.1s;
    min-width: 52px;
    border: 0;
    background: rgba(25, 31, 40, 0.06);
    justify-content: center;
    border-radius: 14px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    color: rgba(15, 23, 42, 0.74);
}

.mini-btn:hover {
    background: rgba(25, 31, 40, 0.1);
}

.mini-btn:active {
    transform: scale(0.95);
}

.mini-btn.danger {
    background: transparent;
    color: #b4232e;
    box-shadow: inset 0 0 0 1.5px rgba(180, 35, 46, 0.28);
}

.mini-btn.danger:hover {
    background: rgba(240, 68, 82, 0.06);
}

.mini-btn--accent {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.mini-btn--accent:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.mini-btn--accent:disabled {
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.5);
    box-shadow: none;
    cursor: not-allowed;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

.mini-btn--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.row {
    display: flex;
}

.row--gap {
    gap: 10px;
}

.input--sm {
    width: 54px;
    padding: 0;
    height: 44px;
}

.palette {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.palette__chip {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    background: color-mix(in srgb, var(--swatch) 18%, white);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.palette__chip::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 10px;
    background: var(--swatch);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.palette__chip[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px rgba(25, 31, 40, 0.55);
}

.palette__chip[aria-pressed="true"]::after {
    inset: 8px;
}

.palette__chip--custom {
    background: var(--surface-component-2);
}

.palette__chip--custom::after {
    background: conic-gradient(
        from 180deg,
        #3182f6,
        #a855f7,
        #ec4899,
        #f04452,
        #f59e0b,
        #22c55e,
        #14b8a6,
        #0ea5e9,
        #3182f6
    );
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.input,
.textarea,
.select {
    width: 100%;
    border-radius: 14px;
    border: 0;
    background: var(--surface-component-2);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-content);
    min-height: var(--control-height);
    font-weight: 600;
}

.status-display {
    width: 100%;
    border-radius: 14px;
    border: 0;
    background: var(--surface-component-2);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-content);
    min-height: var(--control-height);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.status-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.select-wrap {
    position: relative;
}

.select {
    padding: 12px 44px 12px 14px;
    min-height: var(--control-height);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-wrap__icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(15, 23, 42, 0.5);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.textarea {
    resize: vertical;
    min-height: var(--control-height);
    font-weight: 500;
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(49, 130, 246, 0.22);
    background: rgba(49, 130, 246, 0.06);
}

.input[readonly][data-lockable],
.textarea[readonly][data-lockable] {
    cursor: text;
    /* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); */
}

.input[readonly][data-lockable]:hover,
.textarea[readonly][data-lockable]:hover {
    background: rgba(25, 31, 40, 0.075);
}

[data-dialog="card"] [data-editable-field="description"] textarea {
    min-height: 280px;
    resize: none;
}

/*
 * ============================================================================
 * Editable Field Component (Input / TextArea)
 * ----------------------------------------------------------------------------
 * 이 디자인과 인터랙션은 앞으로 모든 Input 및 TextArea에 공통적으로 사용됩니다.
 * - focus 시에만 저장(✓)/취소(✗) 버튼 표시
 * - Input: Enter=저장, ESC=취소
 * - TextArea: Cmd/Ctrl+Enter=저장, Shift+Enter=개행, ESC=취소
 * ============================================================================
 */
.editable-field {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.editable-field .input,
.editable-field .textarea {
    width: 100%;
}

.editable-field__actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 4px;
    z-index: 2;
}

.editable-field__actions:not([hidden]) {
    display: flex;
}

.editable-field .textarea ~ .editable-field__actions {
    top: auto;
    bottom: 8px;
    transform: none;
}

.editable-field__btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition:
        background 0.12s ease,
        transform 0.08s ease;
}

.editable-field__btn .material-symbols-rounded {
    font-size: 18px;
    vertical-align: 0;
}

.editable-field__btn--save {
    color: #16a34a;
}

.editable-field__btn--save:hover {
    background: rgba(35, 196, 131, 0.12);
}

.editable-field__btn--save:active {
    transform: scale(0.95);
}

.editable-field__btn--cancel {
    color: #9ca3af;
}

.editable-field__btn--cancel:hover {
    background: rgba(156, 163, 175, 0.15);
}

.editable-field__btn--cancel:active {
    transform: scale(0.95);
}

.editable-field .input:focus,
.editable-field .textarea:focus {
    padding-right: 72px;
}

.editable-field[data-has-actions="true"] .input,
.editable-field[data-has-actions="true"] .textarea {
    padding-right: 72px;
}

/* Hint text for textarea keyboard shortcut */
.editable-field__hint {
    position: absolute;
    bottom: 8px;
    left: 10px;
    font-size: 11px;
    color: rgba(100, 116, 139, 0.7);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.editable-field .textarea:focus ~ .editable-field__hint {
    opacity: 1;
}

.editable-field .textarea:focus {
    padding-bottom: 32px;
}

/* Chat section */
.chat-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    overflow-y: auto;
    padding: 12px;
    min-height: 0;
    /* background: var(--surface); */
    /* border-radius: var(--radius-sm); */
}

.chat-list:empty::before {
    content: attr(data-empty-label);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

.chat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 85%;
}

.chat-item--sent {
    align-self: flex-end;
    align-items: flex-end;
}

/* 사용자 메시지 헤더 (sender 정보) */
.chat-msg__header--sent {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 6px 0;
    margin-bottom: 4px;
    justify-content: flex-end;
}

.chat-msg__header--sent .persona__meta--sent {
    text-align: right;
    order: -1;
}

.chat-msg__header--sent .persona__meta--sent .persona__team {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.chat-msg__header--sent .persona__meta--sent .persona__kw {
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

.chat-msg__header--sent .avatar-member--sm {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--avatar-bg, var(--accent-light, #e0e7ff));
    overflow: hidden;
}

.chat-msg__header--sent .avatar-member--sm .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-msg__header--sent .avatar-member--sm .avatar-initials {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #4f46e5);
}

.chat-msg__header--sent .chat-msg__time {
    margin-left: 0;
    margin-right: auto;
    order: -2;
    display: none;
}

.chat-item--received {
    align-self: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.chat-item--received .chat-msg__header .chat-msg__time {
    /* display: none; */
}
.chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
    white-space: normal;
}

.chat-item--sent .chat-bubble {
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-item--received .chat-bubble {
    background: transparent;
    color: var(--text-content);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.chat-bubble hr {
    display: none;
}

.chat-bubble pre {
    white-space: normal;
}

.chat-item--system {
    justify-content: center;
}

.chat-item--system .chat-bubble {
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.6);
    font-size: 12px;
    font-style: italic;
    border-radius: 12px;
}

/* 검토 대기 중인 메시지 스타일 */
.chat-item--pending-review .chat-bubble {
    background: var(--warning-bg-2);
    color: #650101;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    width: 100%;
    padding: 48px;
    min-height: 120px;
    border-radius: 24px;
}

.chat-item--pending-review .chat-bubble::before {
    content: "⏳ ";
    font-size: 32px;
}

[data-theme="dark"] .chat-item--pending-review .chat-bubble {
    background: linear-gradient(
        135deg,
        rgba(217, 119, 6, 0.2) 0%,
        rgba(245, 158, 11, 0.15) 100%
    );
    border-color: rgba(217, 119, 6, 0.5);
    color: #fcd34d;
}

/* 검토자가 검토해야 하는 메시지 스타일 (검토 대기 중) */
.chat-item--needs-review {
    background: rgba(245, 159, 11, 0.409);
    /* border: 3px solid #f59e0b; */
    padding-left: 12px;
    margin-left: -12px;
    border-radius: 16px;
    padding-top: 12px;
    margin-top: -12px;
    padding-right: 12px;
    /* margin-right: -12px; */
    padding-bottom: 12px;
    /* margin-bottom: -12px; */
}

.chat-item--needs-review .chat-msg__header {
    position: relative;
}

.chat-item--needs-review .chat-msg__header::after {
    /* content: "검토 필요";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px; */
}

[data-theme="dark"] .chat-item--needs-review {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: #fbbf24;
}

[data-theme="dark"] .chat-item--needs-review .chat-msg__header::after {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.chat-item__time {
    font-size: 10px;
    color: var(--muted);
    padding: 0 4px;
}

/* AI 메시지 마크다운 스타일 */
.chat-bubble--markdown {
    white-space: normal;
}

.chat-bubble--markdown p {
    margin: 0 0 0.75em 0;
}

.chat-bubble--markdown p:last-child {
    margin-bottom: 0;
}

.chat-bubble--markdown h1,
.chat-bubble--markdown h2,
.chat-bubble--markdown h3,
.chat-bubble--markdown h4,
.chat-bubble--markdown h5,
.chat-bubble--markdown h6 {
    margin: 0.75em 0 0.5em 0;
    font-weight: 600;
    line-height: 1.3;
}

.chat-bubble--markdown h1:first-child,
.chat-bubble--markdown h2:first-child,
.chat-bubble--markdown h3:first-child {
    margin-top: 0;
}

.chat-bubble--markdown h1 {
    font-size: 1.25em;
}

.chat-bubble--markdown h2 {
    font-size: 1.15em;
}

.chat-bubble--markdown h3 {
    font-size: 1.05em;
}

.chat-bubble--markdown ul,
.chat-bubble--markdown ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.chat-bubble--markdown li {
    margin: 0.25em 0;
}

.chat-bubble--markdown code {
    background: rgba(0, 0, 0, 0.08);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
    font-size: 0.9em;
}

.chat-bubble--markdown pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1em 1.25em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.75em 0;
    font-size: 13px;
    line-height: 1.5;
}

.chat-bubble--markdown pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.chat-bubble--markdown blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.5em 0;
    padding-left: 1em;
    color: rgba(0, 0, 0, 0.7);
}

.chat-bubble--markdown a {
    color: var(--accent);
    text-decoration: underline;
}

.chat-bubble--markdown hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0.75em 0;
}

.chat-bubble--markdown table {
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.9em;
}

.chat-bubble--markdown th,
.chat-bubble--markdown td {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0.4em 0.6em;
}

.chat-bubble--markdown th {
    background: rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.chat-bubble--markdown strong {
    font-weight: 600;
}

.chat-bubble--markdown em {
    font-style: italic;
}

/* 스트리밍 메시지 스타일 (Task Execution & Just Chat) */
.chat-item--streaming,
.just-chat__message--streaming {
    /* 컨테이너는 애니메이션 없음 - 개별 청크에만 fade-in 적용 */
}

.chat-item--streaming .chat-msg__body,
.just-chat__message--streaming .just-chat__message-content,
.just-chat__message--streaming .just-chat__message-body {
    word-wrap: break-word;
}

.streaming-text {
    /* 일반 텍스트처럼 표시 */
}

/* 스트리밍 청크 fade in 효과 */
.streaming-chunk {
    display: inline;
    animation: chunkFadeIn 0.3s ease-out forwards;
}

@keyframes chunkFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.streaming-cursor {
    display: inline-block;
    animation: cursorBlink 1s infinite;
    color: #2f2f2f;
    font-weight: 400;
    margin-left: 1px;
}

[data-theme="dark"] .streaming-cursor {
    color: #e0e0e0;
}

@keyframes cursorBlink {
    0%,
    50% {
        opacity: 1;
    }
    51%,
    100% {
        opacity: 0;
    }
}

/* Just Chat 스트리밍 전용 스타일 - 기존 message-body 스타일 상속 */
.just-chat__message--streaming .just-chat__message-content,
.just-chat__message--streaming .just-chat__message-body {
    /* 기존 just-chat__message-body 스타일 유지 */
}

/* Just Chat 재연결 중 표시 */
.just-chat__reconnecting {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 6px;
    font-size: 12px;
    color: #f59e0b;
}

[data-theme="dark"] .just-chat__reconnecting {
    background: rgba(255, 193, 7, 0.15);
    color: #fbbf24;
}

.just-chat__reconnecting-dot {
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
    animation: reconnectPulse 1.5s ease-in-out infinite;
}

[data-theme="dark"] .just-chat__reconnecting-dot {
    background: #fbbf24;
}

@keyframes reconnectPulse {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Just Chat 오류 메시지 */
.just-chat__message-error {
    display: block;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    color: #ef4444;
    font-size: 13px;
}

[data-theme="dark"] .just-chat__message-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Just Chat 에러 메시지 컨테이너 */
.just-chat__message--error .just-chat__message-body {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: #dc2626;
}

[data-theme="dark"] .just-chat__message--error .just-chat__message-body {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.chat-input-wrap {
    display: flex;
    flex-direction: column;
    /* gap: 6px; */
    position: relative;
    margin: 16px;
}

.chat-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chat-input {
    padding-right: 48px;
    background: var(--surface-component-3);
    backdrop-filter: blur(var(--surface-component-3--blur));
    border: 0px solid var(--surface-component-3--border);
    flex: 1;
    font-size: 14px;
    resize: none;
    min-height: 72px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* MentionInput이 textarea를 대체할 때 사용하는 컨테이너 */
.mention-input-container {
    flex: 1;
    width: 100%;
}

.mention-input-container .mention-editor-wrapper {
    width: 100%;
}

textarea.chat-input:focus {
    outline: none;
    /* 만약 border 색상도 변한다면 아래 코드 추가 */
    border-color: transparent;
    /* 또는 원하는 색상 */
    box-shadow: none !important;
    background: var(--surface-component-3) !important;
}

.chat-input-tool-row {
    /* width: 100%;
    max-width: min-content;
    max-height: max-content;
    height: auto; */
    padding-right: 6px !important;
    padding-bottom: 6px !important;
    justify-content: space-between;
    padding: 0 12px;
    background: var(--surface-component-3);
    backdrop-filter: blur(var(--surface-component-3--blur));
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}
.block-editor {
    font-size: 16px;
    letter-spacing: -0.02em;
}
.chat-input-tool {
    display: flex;
    flex-direction: row;
    gap: 0px;
}

.chat-input-tool .btn {
    font-size: 12px !important;
    min-height: 0px;
    width: auto !important;
    padding: 6px 10px !important;
    height: auto !important;
    cursor: pointer;
    display: flex;
    gap: 0px;
    border: none;
    font-weight: 600;
}

.chat-continue-btn {
    margin-left: 8px;
    background: #00000000 !important;
    box-shadow: none;
    /* border: 2px solid rgba(15, 23, 42, 0.56) !important; */
    color: rgba(15, 23, 42, 0.56) !important;
    border-radius: 10px !important;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        transform 0.1s;
}

.chat-continue-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

.chat-continue-btn:active {
    transform: scale(0.98);
}

.chat-send-btn {
    margin-left: 8px;
    border-radius: 10px !important;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
    /* padding: 6px 12px !important; */
    font-weight: 600;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        transform 0.1s;
    background: var(--accent) !important;
    color: #fff !important;
}

.chat-send-btn:hover {
    background: #000000a0 !important;
}

.chat-send-btn:active {
    transform: scale(0.98);
}

.chat-input-tool .material-symbols-rounded {
    font-size: 24px;
    margin-left: -2px !important;
    margin-right: 4px !important;
}

.chat-input-hint {
    font-size: 11px;
    color: var(--muted);
    text-align: left;
    opacity: 0;
    transition: opacity 0.15s;
    /* position: absolute; */
    /* z-index: 99; */
    /* bottom: -22px; */
    margin-bottom: -12px;
    left: 14px;
    bottom: 0;
}

.chat-input-wrap:focus-within .chat-input-hint {
    opacity: 1;
}

/* Pending Attachments Preview - Base styles (shared with just-chat) */
.pending-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.04);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.pending-attachments:empty,
.pending-attachments[hidden] {
    display: none;
}

/* Just Chat Pending Attachments - Enhanced UI */
.just-chat__pending-attachments[hidden] {
    display: none;
}

.just-chat__pending-attachments {
    /* background: rgb(207 207 207 / 90%); */
    /* border-top: 1px solid rgba(59, 130, 246, 0.1); */
    backdrop-filter: blur(var(--surface-component-3--blur));
    border-radius: 16px;
    margin-bottom: 4px;
    max-height: 120px;
    overflow-y: auto;
}

.just-chat__pending-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    max-width: 220px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.just-chat__pending-attachment__preview {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(59, 130, 246, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.just-chat__pending-attachment__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.just-chat__pending-attachment__preview .material-symbols-rounded {
    font-size: 18px;
    color: #3b82f6;
}

.just-chat__pending-attachment__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.just-chat__pending-attachment__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.just-chat__pending-attachment__size {
    font-size: 11px;
    color: var(--muted);
}

.just-chat__pending-attachment__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background 0.15s,
        transform 0.1s;
}

.just-chat__pending-attachment__remove:hover {
    background: rgba(239, 68, 68, 0.15);
    transform: scale(1.1);
}

.just-chat__pending-attachment__remove .material-symbols-rounded {
    font-size: 14px;
    color: var(--text-secondary);
}

.just-chat__pending-attachment__remove:hover .material-symbols-rounded {
    color: #ef4444;
}

/* Chat Message Attachments (sent messages) */
.chat-msg__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    max-width: 100%;
}

.chat-msg__attachment {
    flex-shrink: 0;
}

.chat-msg__attachment-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
    transition:
        box-shadow 0.15s,
        transform 0.15s;
    border: 1px solid #ededed;
}

.chat-msg__attachment-link:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* transform: scale(1.02); */
}

.chat-msg__attachment-img {
    display: block;
    max-width: 200px;
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.chat-msg__attachment-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.chat-msg__attachment-file:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.chat-msg__attachment-file .material-symbols-rounded {
    font-size: 20px;
    color: #3b82f6;
}

.chat-msg__attachment-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chat item sent - attachments alignment */
.chat-item--sent .chat-msg__attachments {
    justify-content: flex-end;
}

/* Just Chat attach button active state */
.just-chat__tool-btn--active {
    color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.1) !important;
}

.just-chat__tool-btn--active .material-symbols-rounded {
    color: #3b82f6 !important;
}

/* Just Chat attach button uploading state */
.just-chat__tool-btn--uploading {
    opacity: 0.7;
    pointer-events: none;
}

.just-chat__tool-btn--uploading .material-symbols-rounded {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.field,
.fieldset {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
}

.field--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.field__label,
.label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.field__hint {
    margin: 2px 0 4px;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.48);
    font-weight: 500;
}

.task-id {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: rgba(15, 23, 42, 0.58);
    font-size: 10px;
}

.task-id__label {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.task-id__value {
    font-size: 10px;
    color: rgba(15, 23, 42, 0.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.drop-indicator {
    height: 56px;
    min-height: 56px;
    border-radius: var(--radius-sm);
    border: 0;
    background: rgba(49, 130, 246, 0.1);
    box-shadow: inset 0 0 0 2px rgba(49, 130, 246, 0.35);
    transition:
        height 160ms cubic-bezier(0.2, 0, 0, 1),
        transform 160ms cubic-bezier(0.2, 0, 0, 1),
        background 160ms ease;
}

.drag-ghost {
    position: fixed;
    z-index: 50;
    width: min(360px, calc(100vw - 26px));
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
}

.dragging .card {
    transition: none;
}

.dragging .card,
.dragging .card * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.card--create select[name="columnId"] {
    pointer-events: none;
    color: #bbbbbb;
}
.card--create:not select[name="columnId"] {
    pointer-events: inherit;
    color: inherit;
}

.drag-hidden {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dialog {
    border: none;
    padding: 0;
    /* background: transparent; */
    background: #fffffff0;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
    /* max-height: 90vh; */
    overflow: visible;
    /* tooltip이 dialog 밖으로 나올 수 있도록 */
    position: fixed;
    /* tooltip absolute/fixed 위치 기준 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.dialog > .dialog__panel {
    overflow: hidden;
    border-radius: 16px;
}

/* 마스킹 tooltip이 dialog top-layer에서 보이도록 */
.dialog .mask-tooltip {
    position: fixed !important;
    z-index: 2147483647 !important;
}

.dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}

[data-dialog="card"] .dialog__panel {
    max-height: 90vh;
    height: 95vh;
    /* width: 90vw; */
    max-width: 960px;
}

/* 태스크 테마 적응형 (3열 레이아웃) */
/* 기본: unified-area는 투명하게 동작 */
.unified-area {
    display: contents;
}

.unified-area__header {
    display: none;
}

.unified-area__content {
    display: contents;
}

.unified-area__input {
    display: none;
}

/* 기본: 3열 전용 탭 숨김 */
.unified-tabs[data-unified-tabs-3col] {
    display: none;
}

/* 3열 모드: 다이얼로그 너비 확장 + 전환 애니메이션 */
[data-dialog="card"] .dialog__panel {
    transition:
        max-width 0.3s ease,
        width 0.3s ease;
}

[data-dialog="card"].task-theme-adaptive .dialog__panel {
    max-width: 1600px;
    width: 95vw;
}

/* 3열 모드: 상태 영역(col-2) 비중 줄이기 */
[data-dialog="card"].task-theme-adaptive .dialog--col1 {
    flex: 8;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

[data-dialog="card"].task-theme-adaptive .dialog--col2 {
    flex: 2;
    min-width: fit-content;
}

/* 3열 모드: col1 내부 섹션 높이 확장 */
[data-dialog="card"].task-theme-adaptive .dialog--col1 > .section {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

[data-dialog="card"].task-theme-adaptive .dialog--col1 > .section > .field {
    flex: 0 0 auto;
}
[data-dialog="card"].task-theme-adaptive .dialog--col2 .section {
    max-width: 320px;
}
[data-dialog="card"].task-theme-adaptive .dialog--col1 [data-unified-tabs-3col],
[data-dialog="card"].task-theme-adaptive
    .dialog--col1
    [data-unified-tabs-default] {
    flex: 0 0 auto;
}

[data-dialog="card"].task-theme-adaptive .dialog--col1 .unified-body {
    flex: 1;
    min-height: 0;
}

[data-dialog="card"].task-theme-adaptive .dialog-grid {
    height: 100%;
}

/* 3열 모드: 기존 탭 숨기고 3열 전용 탭 표시 */
[data-dialog="card"].task-theme-adaptive [data-unified-tabs-default] {
    display: none;
}

[data-dialog="card"].task-theme-adaptive [data-unified-tabs-3col] {
    display: flex;
}

/* 3열 모드: 하단 채팅 입력창 표시 (2열과 동일) */
[data-dialog="card"].task-theme-adaptive [data-chat-input-default] {
    display: block;
}

[data-dialog="card"].task-theme-adaptive .dialog--col1 {
    overflow: hidden;
}

/* 3열 모드: unified-body - 영역은 기본적으로 숨김, hidden 속성으로 제어 */
[data-dialog="card"].task-theme-adaptive .unified-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-width: 0;
    min-height: 0;
    gap: 0;
    height: 100%;
}

/* 3열 모드: 좌측 영역 (업무내용) */
[data-dialog="card"].task-theme-adaptive .unified-area--left {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding-bottom: 20px;
    width: 380px;
    height: 100%;
}

[data-dialog="card"].task-theme-adaptive .unified-area--left[hidden] {
    display: none;
}

/* 3열 모드: 좌측 패널 기본 스타일 */
[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    [data-unified-panel] {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    [data-unified-panel][hidden] {
    display: none !important;
}

[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    [data-unified-panel="description"]
    [data-autosave-wrap="description"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    [data-unified-panel="description"]
    [data-editable-field="description"] {
    flex: 1;
    min-height: 0;
}

[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    [data-unified-panel="description"]
    [data-editable-field="description"]
    textarea {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: none;
}

/* 3열 모드: 좌측 계획 패널 스타일 */
[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    [data-unified-panel="plan"] {
    overflow-y: auto;
}

[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    [data-unified-panel="plan"]
    [data-plan-timeline],
[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    [data-unified-panel="plan"]
    [data-plan-editor] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* 3열 모드: 우측 영역 (계획 및 채팅) */
[data-dialog="card"].task-theme-adaptive .unified-area--right {
    display: flex;
    flex-direction: column;
    flex: 2;
    margin-left: 24px;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

[data-dialog="card"].task-theme-adaptive .unified-area--right[hidden] {
    display: none;
}

[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    .unified-area__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    height: 100%;
}

/* 3열 모드: 우측 패널 기본 스타일 */
[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    [data-unified-panel] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    [data-unified-panel][hidden] {
    display: none !important;
}

/* 3열 모드: 채팅 패널 스타일 */
[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    [data-unified-panel="chat"] {
    min-width: 0;
    position: relative;
    height: 100%;
}

/* 3열 모드: 채팅 목록 영역 - 스크롤 가능 */
[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    [data-unified-panel="chat"]
    [data-chat-list] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 120px;
}

[data-chat-list] img {
    width: 100%;
    height: auto;
}

/* 3열 모드: 채팅 입력창을 채팅 패널 하단에 고정 */
[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    [data-unified-panel="chat"]
    .workbench-input-fixed--chat {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 8px 8px;
    z-index: 5;
}

/* 3열 모드: 채팅 패널 내부 입력창 숨김 (기본 입력창 사용) */
[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    [data-unified-panel="chat"]
    .unified-area__input {
    display: none;
}

/* 3열 모드: 아티팩트 패널 스타일 */
[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    [data-unified-panel="artifacts"] {
    overflow-y: auto;
    padding: 8px 0;
}

/* 3열 모드: 첨부파일 패널 스타일 */
[data-dialog="card"].task-theme-adaptive
    .unified-area--right
    [data-unified-panel="attachments"] {
    overflow-y: auto;
    padding: 8px 0;
}

/* 첨부파일 패널의 title-row: 버튼을 우측에 배치 */
[data-unified-panel="attachments"] .section__title-row {
    justify-content: flex-end;
    margin-bottom: 8px;
}

[data-dialog="agent-edit"] .dialog__panel {
    max-width: 1400px;
}

[data-dialog="settings"] .dialog__panel {
    height: 80vh;
}

.dialog__panel__glass {
    background: #edededeb;
    backdrop-filter: blur(3px);
    border: 2px solid #ffffff70;
}

.dialog__panel {
    width: 80vw;
    max-width: 1400px;
    border-radius: 16px;
    /* border: 0; */
    background: var(--surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* background: #f8f8f8eb; */
    backdrop-filter: blur(var(--surface--blur));
    border: 2px solid var(--surface--border);
}

[data-dialog="card"] .dialog__header {
    padding: 24px 24px;
}

[data-dialog="card"] .dialog__header .dialog__header__left {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.dialog__header {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dialog__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.2;
    color: var(--text-content);
}

.dialog__title-input {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.2;
    color: var(--text-content);
    background: transparent;
    border: none;
    outline: none;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 200px;
    max-width: 400px;
    transition: background-color 0.2s;
}

.dialog__title-input:hover {
    background: rgba(15, 23, 42, 0.04);
}

.dialog__title-input:focus {
    background: rgba(15, 23, 42, 0.06);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.dialog__title-input::placeholder {
    color: var(--muted);
    font-weight: 400;
}

[data-unified-panel="plan"] .section__title-row {
    justify-content: start !important;
    /* margin-top: -42px; */
}

[data-dialog="card"] .dialog__body {
    padding: 0px;
}

[data-dialog="card"].task-theme-adaptive .dialog__body {
    overflow: hidden;
}

.dialog__body {
    /* padding-top: 24px; */
    padding: 14px 18px 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dialog-header-actions {
    position: absolute;
    right: 12px;
    z-index: 5;
    display: flex;
    gap: 4px;
    align-items: center;
}

.dialog-close {
    position: static;
}

.id-line {
    display: none;
    align-items: center;
    gap: 3px;
    /* margin: 0 0 14px; */
    color: rgba(15, 23, 42, 0.58);
    /* border-left: 1px solid rgba(15, 23, 42, 0.08); */
    /* padding-left: 16px; */
}

.id-line__value::before {
    content: "|";
    padding-right: 16px;
}

.id-line__value {
    font-size: 12px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.title-status {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.title-status .input {
    flex: 1 1 auto;
}

.title-status .editable-field {
    flex: 1 1 auto;
}

.title-status .select-wrap {
    flex: 0 0 220px;
}

.schedule-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.schedule-datetime {
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-datetime .input {
    flex: 1 1 auto;
}

.schedule-datetime .mini-btn {
    flex-shrink: 0;
}

[data-repeat-wrap] {
    margin-top: 16px;
}
.repeat-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
}
.repeat-options[hidden] {
    display: none;
}

.repeat-options .field__select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 0;
    background: var(--surface-component-2);
    color: var(--text-content);
    font-size: 14px;
    font-weight: 600;
    min-height: var(--control-height);
}

/* 반복 주기 상세 안내 */
.repeat-detail {
    margin-bottom: 4px;
}
.repeat-detail[hidden] {
    display: none;
}
.repeat-detail__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-component-2);
    border-radius: 14px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}
.repeat-detail__hint[hidden] {
    display: none;
}
.repeat-detail__icon {
    font-size: 18px;
    color: #6366f1;
    flex-shrink: 0;
}
[data-theme="dark"] .repeat-detail__icon {
    color: #818cf8;
}

/* 매주 요일 피커 */
.repeat-detail__weekly {
    padding: 10px 14px;
    background: var(--surface-component-2);
    border-radius: 14px;
}
.repeat-detail__weekly[hidden] {
    display: none;
}
.repeat-day-picker {
    display: flex;
    gap: 6px;
}
.repeat-day-picker__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 36px;
    border-radius: 10px;
    border: 0;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.repeat-day-picker__btn:hover {
    color: #6366f1;
    background: color-mix(in srgb, #6366f1 8%, var(--surface));
}
.repeat-day-picker__btn--active {
    background: #6366f1;
    color: #fff;
}
.repeat-day-picker__btn--active:hover {
    background: #4f46e5;
    color: #fff;
}
.repeat-day-picker__btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.repeat-day-picker__btn--active:disabled {
    opacity: 0.85;
}
[data-theme="dark"] .repeat-day-picker__btn--active {
    background: #818cf8;
    color: #1e1e2e;
}
[data-theme="dark"] .repeat-day-picker__btn--active:hover {
    background: #6366f1;
    color: #1e1e2e;
}

.dialog-tabs {
    display: none;
    gap: 8px;
    padding: 4px 0 14px;
}

.tab-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.7);
    font-weight: 800;
    font-size: 13px;
}

.tab-btn[aria-selected="true"] {
    background: rgba(17, 24, 39, 0.92);
    color: rgba(255, 255, 255, 0.96);
}

.dialog-grid {
    /* padding-top: 32px; */
    display: flex;
    gap: 0px;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dialog--col2 .section:last-child {
    margin-bottom: 32px;
}

.dialog-col {
    min-width: 0;
    display: grid;
    gap: 14px;
    align-content: start;
    overflow-y: auto;
}

/* 3열 레이아웃 */
.dialog--col1 {
    flex: 6;
    padding-left: 16px;
    padding-right: 8px;
}

.dialog--col2 .section {
    min-width: 0;
}

.dialog--col2 {
    padding-left: 4px;
    flex: 4;
    padding-right: 4px;
}

/* 워크벤치 섹션 */
.workbench-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    margin: 0 !important;
    padding: 0;
}

/* 업무 내용 / 계획 패널 */
.content-body {
    flex: 1;
    min-height: 0;
}

.content-panel {
    display: block;
}

.content-panel[hidden] {
    display: none;
}

/* 구분선 */
.dialog-divider {
    border: none;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    margin: 16px 0 8px 0;
}

.workbench-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 0;
    /* margin-bottom: 12px; */
}

.workbench-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workbench-tab-btn {
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.7);
    font-weight: 700;
    font-size: 12px;
    transition:
        background 0.15s,
        color 0.15s;
}

.workbench-tab-btn[aria-selected="true"] {
    background: rgba(17, 24, 39, 0.92);
    color: rgba(255, 255, 255, 0.96);
}

.workbench-tab-btn:hover:not([aria-selected="true"]) {
    background: rgba(25, 31, 40, 0.1);
}

.workbench-body {
    flex: 1;
    min-height: 0;
    padding: 4px 0;
}

.workbench-panel {
    display: block;
    min-height: 200px;
}

.workbench-panel[hidden] {
    display: none;
}

/* 탭 버튼 배지 (첨부파일 개수 표시) */
.workbench-tab-btn .tab-icon {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 2px;
}

.workbench-tab-btn .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.workbench-tab-btn .tab-badge[hidden] {
    display: none;
}

.workbench-tab-btn[aria-selected="true"] .tab-badge {
    background: rgba(255, 255, 255, 0.25);
}

/* 통합 탭 (업무내용, 계획, 채팅, 업로드, 아티팩트, 로그) */
.unified-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    /* margin-bottom: 4px; */
    /* border-bottom: 1px solid var(--surface-component-3); */
}

.unified-tabs__left,
.unified-tabs__right {
    display: flex;
    gap: 6px;
    align-items: center;
}

.unified-tab-chip {
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.7);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition:
        background 0.15s,
        color 0.15s;
}

.unified-tab-chip[aria-selected="true"] {
    background: rgba(17, 24, 39, 0.92);
    color: rgba(255, 255, 255, 0.96);
}

.unified-tab-chip:hover:not([aria-selected="true"]) {
    background: rgba(25, 31, 40, 0.1);
}

.unified-tab-chip .tab-icon {
    font-size: 16px;
    vertical-align: middle;
}

.unified-tab-chip .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.unified-tab-chip .tab-badge[hidden] {
    display: none;
}

.unified-tab-chip[aria-selected="true"] .tab-badge {
    background: rgba(255, 255, 255, 0.25);
}

/* 2열 모드: 아이콘만 표시하는 탭 (업로드, 아티팩트, 로그) */
.unified-tab-chip--icon-only {
    padding: 6px 8px;
}

.unified-tab-chip--icon-only > .tab-label {
    display: none;
}

/* 통합 패널 영역 */
.unified-body {
    flex: 1;
    min-height: 0;
    padding: 4px 0;
}

.unified-panel {
    display: flex;
    flex-direction: column;
    min-height: 200px;
    flex: 1;
}

.unified-panel[hidden] {
    display: none;
}

/* 첨부파일 그리드 (Google Drive 스타일) */
.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 4px 0;
}

.attachment-item {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition:
        box-shadow 0.15s,
        border-color 0.15s;
}

.attachment-item:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}

.attachment-item__preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.attachment-item__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-item__preview .attachment-icon {
    font-size: 40px;
    color: rgba(15, 23, 42, 0.35);
}

.attachment-item__info {
    padding: 8px 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.attachment-item__name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-item__meta {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.5);
    margin-top: 2px;
}

.attachment-item__analysis {
    font-size: 10px;
    color: rgba(15, 23, 42, 0.4);
    margin-top: 4px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-item__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity 0.15s,
        background 0.15s;
    padding: 0;
    z-index: 1;
}

.attachment-item__remove .material-symbols-rounded {
    font-size: 16px;
}

.attachment-item:hover .attachment-item__remove {
    opacity: 1;
}

.attachment-item__remove:hover {
    background: rgba(239, 68, 68, 0.85);
}

/* 첨부파일 없음 상태 */
.attachments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
}

.attachments-empty[hidden] {
    display: none;
}

.attachments-empty__icon {
    font-size: 48px;
    color: rgba(15, 23, 42, 0.2);
    margin-bottom: 12px;
}

.attachments-empty__text {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.5);
    margin: 0;
}

/* 아티팩트 패널 – 섹션 컨테이너 (세로 방향) */
.artifacts-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 4px 0;
}

.artifacts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
}

.artifacts-empty[hidden] {
    display: none;
}

.artifacts-empty__icon {
    font-size: 48px;
    color: rgba(15, 23, 42, 0.2);
    margin-bottom: 12px;
}

.artifacts-empty__text {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.5);
    margin: 0;
}

/* 아티팩트 아이템 – 새 카드 레이아웃 (썸네일 → 본문 → 푸터) */
.artifact-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease,
        aspect-ratio 0.3s ease;
    background: #fff;
    min-height: 200px;
    aspect-ratio: 3 / 4;
}

/* 이미지: 정사각형 비율 */
.artifact-item--image-bg {
    aspect-ratio: 1 / 1;
}

/* 비디오: 가로 비율, 2칸 차지 */
.artifact-item--landscape {
    aspect-ratio: unset; /* 기본 비율 해제, 높이는 다른 카드와 동일 */
    grid-column: span 2;
}

/* 썸네일 영역 (상단) */
.artifact-item__thumbnail {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    flex-shrink: 0;
}

.artifact-item__thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.artifact-item:hover .artifact-item__thumbnail-img {
    transform: scale(1.05);
}

/* 썸네일 없을 때 배경색 표시 */
.artifact-item:not(.artifact-item--has-thumbnail) {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

/* 내부 래퍼 (artifact-item과 동일 크기) */
.artifact-item__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* 이미지 타입 아티팩트 배경 이미지 스타일 */
.artifact-item--image-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.artifact-item--image-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.95) 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* 콘텐츠 타입별 배경색 (썸네일 없을 때) */
.artifact-item[data-content-type="image"]:not(.artifact-item--has-thumbnail) {
    background: url(https://img.freepik.com/free-photo/professional-photographer-takes-photos-with-camera-tripod-rocky-peak-sunset-dark-tone_335224-432.jpg);
    background-clip: content-box;
    background-position: center;
}

.artifact-item[data-content-type="video"]:not(.artifact-item--has-thumbnail) {
    /* background: linear-gradient(180deg, rgba(254, 243, 199, 0.4) 0%, #fff 100%); */
}

.artifact-item[data-content-type="audio"]:not(.artifact-item--has-thumbnail) {
    /* background: linear-gradient(180deg, rgba(233, 213, 255, 0.4) 0%, #fff 100%); */
}

.artifact-item[data-content-type="text"]:not(.artifact-item--has-thumbnail),
.artifact-item[data-content-type="document"]:not(
        .artifact-item--has-thumbnail
    ) {
    /* background: linear-gradient(180deg, rgba(219, 234, 254, 0.4) 0%, #fff 100%); */
}

.artifact-item[data-content-type="code"]:not(.artifact-item--has-thumbnail) {
    /* background: linear-gradient(180deg, rgba(209, 250, 229, 0.4) 0%, #fff 100%); */
}

.artifact-item[data-content-type="service"]:not(.artifact-item--has-thumbnail) {
    /* background: linear-gradient(180deg, rgba(224, 231, 255, 0.4) 0%, #fff 100%); */
}

.artifact-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 본문 영역 (중앙) */
.artifact-item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 8px;
}

/* 이미지/비디오 카드 본문 영역 - 그라데이션 + blur + 흰 글씨 */
.artifact-item__body--media {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
}

/* 미디어 카드 그라데이션 오버레이 (fade in/out) */
.artifact-item__body--media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.2) 60%,
        transparent 100%
    );
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
    border-radius: 16px;
}

.artifact-item__body--media > * {
    position: relative;
    z-index: 1;
}

.artifact-item__body--media .artifact-item__title,
.artifact-item__body--media .artifact-item__preview-text,
.artifact-item__body--media .artifact-item__description {
    color: #ffffff;
}

/* 미디어 카드 타이틀은 효과 제거 */
.artifact-item__body--media .artifact-item__title {
    text-shadow: none;
}

.artifact-item__body--media .artifact-item__preview-text,
.artifact-item__body--media .artifact-item__description {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

/* 비디오/이미지 본문 hover 효과 - 그라데이션/텍스트 fadeout */
.artifact-item__body--media:hover::before {
    opacity: 0;
}

.artifact-item__body--media:hover .artifact-item__preview-text,
.artifact-item__body--media:hover .artifact-item__description {
    opacity: 0;
}

/* 미리보기 텍스트 (강조) */
.artifact-item__preview-text {
    font-size: 18px;
    font-weight: 400;
    color: #454c5d;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    padding-right: 32px;
    letter-spacing: -0.01em;
}

/* 타이틀 (미리보기 없을 때 강조) */
.artifact-item__title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    padding-right: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    padding-right: 32px;
    overflow: hidden;
}

/* 설명 */
.artifact-item__description {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 헤더 영역 - 숨김 */
.artifact-item__header {
    display: none;
}

/* 푸터 영역 (하단) - 아이콘 + 파일명 + 다운로드 버튼 */
.artifact-item__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgb(15 23 42 / 5%);
    backdrop-filter: blur(4px);
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    margin-top: auto;
    position: relative;
}

.artifact-item__footer-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--muted);
    opacity: 0.8;
}

.artifact-item--image-bg .artifact-item__footer,
.artifact-item--video-bg .artifact-item__footer {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
}

.artifact-item__footer-name {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    max-width: 150px;
    position: relative;
    cursor: default;
}

/* 파일명 hover 시 밑줄 힌트 */
.artifact-item__footer-name:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

/* 다운로드 버튼 (액션 버튼 스타일) */
.artifact-item__download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.artifact-item__download-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(49, 130, 246, 0.3);
}

.artifact-item__download-btn .material-symbols-rounded {
    font-size: 16px;
}

/* 비디오 배경 */
.artifact-item--video-bg {
    position: relative;
}

.artifact-item__video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 16px;
    z-index: 0;
}

.artifact-item__video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artifact-item--video-bg .artifact-item__inner {
    position: relative;
    z-index: 1;
}

/* 상태 뱃지 */
.artifact-item__status-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.artifact-item__status-badge--pending {
    background: rgba(234, 179, 8, 0.15);
    color: #b45309;
}

/* 카드 미리보기 영역 - 숨김 (전체 카드가 배경) */
.artifact-item__preview {
    display: none;
}

/* 레거시 호환 - 미리보기 타입별 클래스 (더 이상 사용하지 않음) */
.artifact-item__preview--image,
.artifact-item__preview--code,
.artifact-item__preview--document,
.artifact-item__preview--text,
.artifact-item__preview--diagram,
.artifact-item__preview--video,
.artifact-item__preview--audio,
.artifact-item__preview--service,
.artifact-item__preview--default {
    display: none;
}

/* 미리보기 내 이미지 */
.artifact-item__preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.artifact-item:hover .artifact-item__preview-img {
    transform: scale(1.03);
}

/* 미리보기 내 코드 스니펫 */
.artifact-item__preview-code {
    margin: 0;
    font-size: 10px;
    font-family:
        "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.85);
    white-space: pre;
    overflow: hidden;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 미리보기 내 큰 아이콘 (문서/다이어그램/기타) - 벤토 스타일 */
.artifact-item__preview-icon {
    font-size: 56px;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* 콘텐츠 타입별 아이콘 색상 */
.artifact-item__preview--image .artifact-item__preview-icon {
    color: #be185d;
}

.artifact-item__preview--document .artifact-item__preview-icon,
.artifact-item__preview--text .artifact-item__preview-icon {
    color: #1d4ed8;
}

.artifact-item__preview--diagram .artifact-item__preview-icon {
    color: #047857;
}

.artifact-item__preview--video .artifact-item__preview-icon {
    color: #b45309;
}

.artifact-item__preview--audio .artifact-item__preview-icon {
    color: #7c3aed;
}

.artifact-item__preview--code .artifact-item__preview-icon {
    color: #10b981;
}

.artifact-item__preview--service .artifact-item__preview-icon,
.artifact-item__preview--default .artifact-item__preview-icon {
    color: #475569;
}

/* 미리보기 위에 떠있는 타입 뱃지 */
.artifact-item__type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

.artifact-item__type-badge .material-symbols-rounded {
    font-size: 13px;
}

.artifact-item__type-badge--image {
    background: rgba(139, 92, 246, 0.85);
    color: #fff;
}

.artifact-item__type-badge--code {
    background: rgba(16, 185, 129, 0.85);
    color: #fff;
}

.artifact-item__type-badge--document {
    background: rgba(59, 130, 246, 0.85);
    color: #fff;
}

.artifact-item__type-badge--diagram {
    background: rgba(245, 158, 11, 0.85);
    color: #fff;
}

.artifact-item__type-badge--default {
    background: rgba(100, 116, 139, 0.85);
    color: #fff;
}

/* 카드 위에 떠있는 액션 버튼 오버레이 */
.artifact-item__overlay-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.artifact-item:hover .artifact-item__overlay-actions {
    opacity: 1;
}

.artifact-item__overlay-actions .icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.artifact-item__overlay-actions .icon-btn:hover {
    background: rgba(255, 255, 255, 1);
    color: rgba(15, 23, 42, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.artifact-item__overlay-actions .icon-btn .material-symbols-rounded {
    font-size: 16px;
}

/* 레거시 스타일 - 숨김 처리 */
.artifact-item__icon,
.artifact-item__title-wrap,
.artifact-item__type-label,
.artifact-item__actions,
.artifact-item__content,
.artifact-item__body--image {
    display: none;
}

.artifact-item__thumbnail {
    display: none;
}

.artifact-item__meta {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto;
    flex-shrink: 0;
}

/* 민감 도구 표시 (하단 우측 배치) */
.artifact-item__tools {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.artifact-item__tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.6);
}

.artifact-item__tool-more {
    font-size: 10px;
    color: rgba(15, 23, 42, 0.5);
    font-weight: 600;
}

/* 아티팩트 검토 대기 상태 */
.artifact-item--pending {
    background: linear-gradient(
        145deg,
        rgba(254, 243, 199, 0.6) 0%,
        rgba(253, 230, 138, 0.5) 100%
    ) !important;
}

.artifact-item--pending .artifact-item__icon {
    color: #b45309;
    background: rgba(234, 179, 8, 0.1);
}

/* 내가 검토해야 하는 아티팩트 - card--in-review와 동일한 애니메이션 border + glow */
.artifact-item--needs-review {
    position: relative;
    overflow: visible;
    isolation: isolate;
    background:
        linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #f97316,
                #fdba74,
                #fb923c,
                #fed7aa,
                #ffedd5,
                #fbbf24
            )
            border-box;
    border: 2px solid transparent;
    animation: inreview-rotating 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Glossy glow 효과 - 제거됨 */

.artifact-item--needs-review > * {
    position: relative;
    z-index: 1;
}

.artifact-item--needs-review:hover {
    background:
        linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #f97316,
                #fdba74,
                #fb923c,
                #fed7aa,
                #ffedd5,
                #fbbf24
            )
            border-box;
}

/* ::after 효과 제거됨 */

.artifact-item--needs-review .artifact-item__icon {
    color: #ea580c;
}

.artifact-item__pending-message {
    display: none; /* 새 벤토 디자인에서는 숨김 */
}

/* 아티팩트 검토 배너 (review-annotation 스타일 재사용) */
.artifact-item__review-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 16px;
    background-color: var(--warning-bg-1);
    border-top: 1px solid rgba(217, 119, 6, 0.2);
    border-bottom: 1px solid rgba(217, 119, 6, 0.2);
}

.artifact-item__review-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.artifact-item__review-banner-icon .material-symbols-rounded {
    font-size: 20px;
    color: #d97706;
}

.artifact-item__review-banner-content {
    flex: 1;
    min-width: 0;
}

.artifact-item__review-banner-message {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    line-height: 1.3;
}

.artifact-item__review-banner-hint {
    margin: 1px 0 0;
    font-size: 11px;
    color: #b45309;
    line-height: 1.3;
}

.artifact-item__review-banner-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.artifact-item__review-banner-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
}

.artifact-item__review-banner-actions .btn .material-symbols-rounded {
    font-size: 14px;
}

/* 검토 완료 상태의 배너 */
.artifact-item__review-banner--completed {
    background-color: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
}

.artifact-item__review-banner--completed
    .artifact-item__review-banner-icon
    .material-symbols-rounded {
    color: #16a34a;
}

.artifact-item__review-banner--completed .artifact-item__review-banner-message {
    color: #166534;
}

.artifact-item__review-banner--completed .artifact-item__review-banner-hint {
    color: #15803d;
}

/* 아티팩트 푸터 (도구 아이콘 + 미리보기 셀렉트) */
.artifact-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(15, 23, 42, 0.02);
    flex-wrap: wrap;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

.artifact-item__footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.artifact-item__footer-date {
    font-size: 11px;
    color: var(--muted);
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
}

.artifact-item__footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 푸터 다운로드 버튼 */
.artifact-item__footer-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--muted);
    text-decoration: none;
    transition:
        background 0.15s,
        color 0.15s;
}

.artifact-item__footer-download:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text);
}

.artifact-item__footer-download .material-symbols-rounded {
    font-size: 16px;
}

[data-theme="dark"] .artifact-item__footer-download:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* 제목 아래 날짜 */
.artifact-item__date {
    font-size: 11px;
    color: var(--muted);
    opacity: 0.7;
    margin-top: 2px;
}

.artifact-item__reviewer-info {
    font-size: 11px;
    color: #aaaaaa;
    font-style: italic;
}

.artifact-item__reviewed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.artifact-item__reviewed-badge .material-symbols-rounded {
    font-size: 14px;
}

.artifact-item__viewer-label {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.5);
}

/* 아티팩트 미리보기 셀렉트 (챗 메세지 스타일과 유사) */
.artifact-viewer-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 6px;
    background: white;
    color: rgba(15, 23, 42, 0.8);
    cursor: pointer;
}

.artifact-viewer-select:hover {
    border-color: rgba(15, 23, 42, 0.3);
}

/* 아티팩트 블러 처리 (검토 대기 중 또는 lv2 시점 미리보기) */
.artifact-item__thumbnail--blurred,
.artifact-item__preview-img--blurred {
    filter: blur(12px);
    pointer-events: none;
}

.artifact-item__body--blurred,
.artifact-item__preview--blurred {
    position: relative;
}

.artifact-item__body--blurred::after,
.artifact-item__preview--blurred::after {
    content: "검토가 완료되면 볼 수 있습니다";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.6);
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

/* 다크 모드 – 새 카드 레이아웃 */
[data-theme="dark"] .artifact-item {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .artifact-item__thumbnail {
    background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
}

[data-theme="dark"] .artifact-item:not(.artifact-item--has-thumbnail) {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
}

[data-theme="dark"]
    .artifact-item[data-content-type="image"]:not(
        .artifact-item--has-thumbnail
    ) {
    background: linear-gradient(
        180deg,
        rgba(190, 24, 93, 0.2) 0%,
        #1e293b 100%
    );
}

[data-theme="dark"]
    .artifact-item[data-content-type="video"]:not(
        .artifact-item--has-thumbnail
    ) {
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.2) 0%, #1e293b 100%);
}

[data-theme="dark"]
    .artifact-item[data-content-type="text"]:not(.artifact-item--has-thumbnail),
[data-theme="dark"]
    .artifact-item[data-content-type="document"]:not(
        .artifact-item--has-thumbnail
    ) {
    background: linear-gradient(
        180deg,
        rgba(29, 78, 216, 0.2) 0%,
        #1e293b 100%
    );
}

[data-theme="dark"]
    .artifact-item[data-content-type="code"]:not(
        .artifact-item--has-thumbnail
    ) {
    background: linear-gradient(180deg, rgba(4, 120, 87, 0.2) 0%, #1e293b 100%);
}

[data-theme="dark"] .artifact-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .artifact-item__preview-text,
[data-theme="dark"] .artifact-item__title {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .artifact-item__description {
    color: rgba(148, 163, 184, 0.9);
}

[data-theme="dark"] .artifact-item__footer {
    background: rgba(15, 23, 42, 0.7);
    border-top-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .artifact-item__footer-name {
    color: rgba(148, 163, 184, 0.8);
}

[data-theme="dark"] .artifact-item__download-btn {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(148, 163, 184, 0.9);
}

[data-theme="dark"] .artifact-item__download-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

[data-theme="dark"] .artifact-item--image-bg .artifact-item__footer,
[data-theme="dark"] .artifact-item--video-bg .artifact-item__footer {
    background: rgba(15, 23, 42, 0.85) !important;
}

[data-theme="dark"] .artifact-item__status-badge--pending {
    background: rgba(234, 179, 8, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .artifact-item--pending {
    background: linear-gradient(
        180deg,
        rgba(180, 83, 9, 0.2) 0%,
        #1e293b 100%
    ) !important;
}

[data-theme="dark"] .artifact-item--pending .artifact-item__title {
    color: #fef3c7;
}

[data-theme="dark"] .artifact-item__reviewer-info {
    color: #fcd34d;
}

[data-theme="dark"] .artifact-item__reviewed-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

[data-theme="dark"] .artifact-item__viewer-label {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .artifact-viewer-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .artifact-viewer-select:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .artifact-item__body--blurred::after {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .artifact-item__review-banner {
    background: linear-gradient(
        135deg,
        rgba(217, 119, 6, 0.15) 0%,
        rgba(217, 119, 6, 0.08) 100%
    );
    border-color: rgba(217, 119, 6, 0.25);
}

[data-theme="dark"] .artifact-item__review-banner-message {
    color: #fcd34d;
}

[data-theme="dark"] .artifact-item__review-banner-hint {
    color: #fbbf24;
}

[data-theme="dark"]
    .artifact-item__review-banner-icon
    .material-symbols-rounded {
    color: #fbbf24;
}

/* 다크 모드: 검토 완료 상태의 배너 */
[data-theme="dark"] .artifact-item__review-banner--completed {
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.15) 0%,
        rgba(34, 197, 94, 0.08) 100%
    );
    border-color: rgba(34, 197, 94, 0.25);
}

[data-theme="dark"]
    .artifact-item__review-banner--completed
    .artifact-item__review-banner-icon
    .material-symbols-rounded {
    color: #4ade80;
}

[data-theme="dark"]
    .artifact-item__review-banner--completed
    .artifact-item__review-banner-message {
    color: #86efac;
}

[data-theme="dark"]
    .artifact-item__review-banner--completed
    .artifact-item__review-banner-hint {
    color: #4ade80;
}

[data-theme="dark"] .artifact-item__overlay-actions .icon-btn {
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .artifact-item__overlay-actions .icon-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ========================================
   아티팩트 섹션 (서브태스크별 그룹화)
   ======================================== */
.artifacts-section {
    display: flex;
    flex-direction: column;
}

.artifacts-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.artifacts-section__title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.9);
}

.artifacts-section__count {
    font-size: 12px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.5);
    background: rgba(15, 23, 42, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
}

.artifacts-section--subtask .artifacts-section__title {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.7);
}

.artifacts-section--subtask .artifacts-section__header::before {
    content: "";
    display: block;
    width: 3px;
    height: 16px;
    background: var(--color-primary, #3b82f6);
    border-radius: 2px;
    margin-right: 4px;
}

.artifacts-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* ========================================
   아티팩트 버전 스택 카드
   ======================================== */
.artifact-stack {
    position: relative;
    display: flex;
}

/* 이미지 스택: 정사각형 비율 */
.artifact-stack--image {
    aspect-ratio: 1 / 1;
}

.artifact-stack--image .artifact-stack__front {
    aspect-ratio: 1 / 1;
}

/* 비디오 스택: 가로 비율, 2칸 차지 */
.artifact-stack--video {
    grid-column: span 2;
}

.artifact-stack--video .artifact-stack__front {
    aspect-ratio: unset;
}

/* 스택 배경 카드 (겹쳐 보이는 효과) */
.artifact-stack__bg {
    position: absolute;
    inset: 0;
    background: var(--surface, #fff);
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    pointer-events: none;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.3s ease;
}

/* 첫 번째 배경 카드 (바로 뒤) */
.artifact-stack__bg--1 {
    transform: rotate(2deg) translateX(4px) translateY(2px);
    opacity: 0.7;
    z-index: 1;
}

/* 두 번째 배경 카드 (가장 뒤) */
.artifact-stack__bg--2 {
    transform: rotate(-2deg) translateX(-4px) translateY(4px);
    opacity: 0.5;
    z-index: 0;
}

/* 스택 hover 효과 - rotation 증가 */
.artifact-stack:hover .artifact-stack__bg--1 {
    transform: rotate(6deg) translateX(12px) translateY(4px);
    opacity: 0.85;
}

.artifact-stack:hover .artifact-stack__bg--2 {
    transform: rotate(-6deg) translateX(-12px) translateY(8px);
    opacity: 0.7;
}

/* 앞 카드 */
.artifact-stack__front {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* 버전 인디케이터 */
.artifact-stack__indicator {
    position: absolute;
    bottom: 52px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.artifact-stack__indicator-count {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.artifact-stack__indicator-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

/* 버전 popover */
.artifact-version-popover {
    background: #fff;
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgba(15, 23, 42, 0.15),
        0 2px 8px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.08);
    min-width: 220px;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    animation: popoverFadeIn 0.15s ease;
}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.artifact-version-popover__list {
    padding: 6px;
}

.artifact-version-popover__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}

.artifact-version-popover__item:hover {
    background: rgba(15, 23, 42, 0.05);
}

.artifact-version-popover__item--latest {
    background: rgba(59, 130, 246, 0.08);
}

.artifact-version-popover__item--latest:hover {
    background: rgba(59, 130, 246, 0.12);
}

.artifact-version-popover__name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.artifact-version-popover__item--latest .artifact-version-popover__name::after {
    content: "latest";
    margin-left: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.artifact-version-popover__date {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.5);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 다크 모드: 스택 카드 */
[data-theme="dark"] .artifact-stack__bg {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .artifact-stack__indicator {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .artifact-version-popover {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .artifact-version-popover__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .artifact-version-popover__item--latest {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .artifact-version-popover__item--latest:hover {
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .artifact-version-popover__name {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .artifact-version-popover__date {
    color: rgba(255, 255, 255, 0.5);
}

/* 아티팩트 카드 썸네일 (인라인 - 아이콘 대신 표시) */
.artifact-item__thumbnail-wrap {
    display: none; /* 기본 숨김 - 배경 이미지로 대체 */
}

.artifact-item__thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.artifact-item:hover .artifact-item__thumbnail-img {
    transform: scale(1.05);
}

/* 아티팩트 카드 텍스트 미리보기 */
.artifact-item__content-preview {
    flex: 1;
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.7);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    backdrop-filter: blur(4px);
}

/* 아티팩트 카드 한줄소개 */
.artifact-item__description {
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(15, 23, 42, 0.55);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 다크 테마 */
[data-theme="dark"] .artifacts-section__title {
    color: rgba(248, 250, 252, 0.9);
}

[data-theme="dark"] .artifacts-section__count {
    color: rgba(248, 250, 252, 0.6);
    background: rgba(248, 250, 252, 0.1);
}

[data-theme="dark"] .artifacts-section--subtask .artifacts-section__title {
    color: rgba(248, 250, 252, 0.7);
}

[data-theme="dark"] .artifact-item__thumbnail-wrap {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .artifact-item__content-preview {
    background: rgba(0, 0, 0, 0.25);
    color: rgba(226, 232, 240, 0.75);
}

[data-theme="dark"] .artifact-item__description {
    color: rgba(226, 232, 240, 0.55);
}

/* 아티팩트 라이트박스 (dialog 기반 - top layer) */
.artifact-lightbox-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    animation: artifact-lightbox-fade-in 0.2s ease-out;
}

.artifact-lightbox-dialog::backdrop {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@keyframes artifact-lightbox-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.artifact-lightbox__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.artifact-lightbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
}

/* 헤더 좌측 영역 (태그 버튼 + 타이틀) */
.artifact-lightbox__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* 태그 복사 버튼 (# 버튼) */
.artifact-lightbox__tag-btn {
    flex-shrink: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.artifact-lightbox__tag-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.artifact-lightbox__type-icon {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.artifact-lightbox__title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artifact-lightbox__date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    flex-shrink: 0;
}

.artifact-lightbox__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.artifact-lightbox__actions .icon-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.artifact-lightbox__actions .icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.artifact-lightbox__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: auto;
}

.artifact-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    animation: artifact-lightbox-zoom-in 0.25s ease-out;
}

@keyframes artifact-lightbox-zoom-in {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 비디오 라이트박스 */
.artifact-lightbox__video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    animation: artifact-lightbox-zoom-in 0.25s ease-out;
}

/* 이미지/비디오 컨테이너 - overflow 처리 */
.artifact-lightbox__container--image,
.artifact-lightbox__container--video {
    overflow: hidden;
}

.artifact-lightbox__container--image .artifact-lightbox__header,
.artifact-lightbox__container--video .artifact-lightbox__header {
    border-radius: 0;
}

/* 미디어용 검토 배너 */
.review-banner--media {
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.review-banner--media.review-banner--alert {
    background: rgba(180, 83, 9, 0.9);
}

.review-banner--media.review-banner--completed {
    background: rgb(194, 233, 209);
}

.review-banner--completed .review-banner__message {
    color: #00973a;
}

.review-banner--media .review-banner__info {
    color: rgba(255, 255, 255, 0.95);
}

.review-banner--media .review-banner__icon {
    color: rgba(255, 255, 255, 0.95);
}

.review-banner--media .review-banner__message {
    color: rgba(255, 255, 255, 0.95);
}

.review-banner--media .review-banner__preview-label {
    color: rgba(255, 255, 255, 0.7);
}

.review-banner--media .chat-viewer-select {
    background: rgb(68 68 68 / 15%);
    color: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.3);
}

.review-banner--media .chat-viewer-select:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* 미디어 검토 버튼 (비공개/공개) */
.review-banner__media-actions {
    display: flex;
    gap: 8px;
}

.btn-review--private,
.btn-review--public {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.btn-review--private {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.btn-review--private:hover {
    background: rgba(0, 0, 0, 0.8);
}

.btn-review--public {
    background: #16a34a;
    color: #fff;
}

.btn-review--public:hover {
    background: #15803d;
}

.btn-review--private:active,
.btn-review--public:active {
    transform: scale(0.97);
}

.btn-review--private .material-symbols-rounded,
.btn-review--public .material-symbols-rounded {
    font-size: 18px;
}

/* 마크다운 라이트박스 */
.artifact-lightbox-dialog--markdown {
    padding: 0;
}

.artifact-lightbox__container--markdown {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 마크다운 모드 헤더 스타일 (밝은 배경) */
.artifact-lightbox__container--markdown .artifact-lightbox__header {
    background: #f7f6f3;
    border-bottom: 1px solid rgba(55, 53, 47, 0.09);
    border-radius: 0;
    flex-shrink: 0;
}

.artifact-lightbox__container--markdown .artifact-lightbox__title {
    color: #37352f;
}

.artifact-lightbox__container--markdown .artifact-lightbox__type-icon {
    color: #111827;
}

.artifact-lightbox__container--markdown .artifact-lightbox__tag-btn,
.artifact-lightbox__container--markdown .artifact-lightbox__actions .icon-btn {
    color: #37352f;
    background: rgba(55, 53, 47, 0.08);
}

.artifact-lightbox__container--markdown .artifact-lightbox__tag-btn:hover,
.artifact-lightbox__container--markdown
    .artifact-lightbox__actions
    .icon-btn:hover {
    background: rgba(55, 53, 47, 0.16);
}

.artifact-lightbox__content--markdown {
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    padding: 24px 32px 24px;
    overflow-y: auto;
    overflow-anchor: none;
    background: #fff;
    border-radius: 0;
    flex: 1;
    min-height: 0;
}

/* 노션 스타일 문서 렌더링 (TaskNote와 동일) */
.artifact-lightbox__markdown-body {
    width: 100%;
    min-height: 100%;
    font-size: 16px;
    line-height: 1.75;
    color: #37352f;
    font-family:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;
    padding-top: 0;
    box-sizing: border-box;
}

.artifact-lightbox__markdown-body h1 {
    font-size: 1.875em;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.25em;
    line-height: 1.3;
    color: #37352f;
    border-bottom: none;
}

.artifact-lightbox__markdown-body h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 1.4em;
    margin-bottom: 0.25em;
    line-height: 1.3;
    color: #37352f;
}

.artifact-lightbox__markdown-body h3 {
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.25em;
    line-height: 1.3;
    color: #37352f;
}

.artifact-lightbox__markdown-body h4,
.artifact-lightbox__markdown-body h5,
.artifact-lightbox__markdown-body h6 {
    font-size: 1em;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.25em;
    line-height: 1.3;
    color: #37352f;
}

.artifact-lightbox__markdown-body p {
    margin: 0 0 0.5em;
}

.artifact-lightbox__markdown-body code {
    font-family:
        "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono",
        Courier, monospace;
    font-size: 0.875em;
    background: rgba(135, 131, 120, 0.15);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    color: #eb5757;
}

.artifact-lightbox__markdown-body pre {
    background: #f7f6f3;
    color: #37352f;
    padding: 20px 24px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.5em 0;
    font-size: 0.875em;
    line-height: 1.6;
}

.artifact-lightbox__markdown-body pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.artifact-lightbox__markdown-body ul,
.artifact-lightbox__markdown-body ol {
    margin: 0.5em 0;
    padding-left: 1.7em;
}

.artifact-lightbox__markdown-body li {
    margin: 0.25em 0;
    padding-left: 0.2em;
}

.artifact-lightbox__markdown-body li::marker {
    color: #37352f;
}

.artifact-lightbox__markdown-body blockquote {
    margin: 0.5em 0;
    padding: 0 0 0 14px;
    border-left: 3px solid currentColor;
    color: #37352f;
    background: none;
}

.artifact-lightbox__markdown-body hr {
    border: none;
    border-top: 1px solid rgba(55, 53, 47, 0.16);
    margin: 1.5em 0;
}

.artifact-lightbox__markdown-body a {
    color: #37352f;
    text-decoration: underline;
    text-decoration-color: rgba(55, 53, 47, 0.4);
    text-underline-offset: 2px;
}

.artifact-lightbox__markdown-body a:hover {
    text-decoration-color: #37352f;
}

.artifact-lightbox__markdown-body img {
    max-width: 100%;
    border-radius: 4px;
    margin: 0.5em 0;
}

.artifact-lightbox__markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.9375em;
}

.artifact-lightbox__markdown-body th,
.artifact-lightbox__markdown-body td {
    border: 1px solid rgba(55, 53, 47, 0.16);
    padding: 8px 10px;
    text-align: left;
}

.artifact-lightbox__markdown-body th {
    background: rgba(55, 53, 47, 0.04);
    font-weight: 600;
}

/* 체크박스 리스트 스타일 */
.artifact-lightbox__markdown-body input[type="checkbox"] {
    margin-right: 6px;
    vertical-align: middle;
}

/* 수평 스크롤 테이블 래퍼 */
.artifact-lightbox__markdown-body .markdown-table-wrapper {
    overflow-x: auto;
    margin: 0.5em 0;
}

.artifact-lightbox__markdown-raw {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
    margin: 0;
}

/* 터미널 스타일 텍스트 뷰어 (밝은 배경 + 모노스페이스) */
.artifact-lightbox__text-body {
    width: 100%;
    min-height: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    font-family:
        "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono",
        Courier, monospace;
    font-size: 14px;
    line-height: 1.7;
    color: #1a1a1a;
    background: #faf9f7;
    padding: 24px 28px;
    padding-top: 24px;
    border-radius: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 다크모드 터미널 스타일 텍스트 - 역방향 (어두운 배경 + 밝은 텍스트) */
[data-theme="dark"] .artifact-lightbox__text-body {
    background: #1e1e1e;
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.08);
}

.artifact-lightbox__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    padding: 40px;
}

.artifact-lightbox__spinner {
    font-size: 32px;
    animation: artifact-spinner 1s linear infinite;
}

@keyframes artifact-spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.artifact-lightbox__error {
    color: #ef4444;
    padding: 40px;
    text-align: center;
}

/* 다크 모드 마크다운 라이트박스 */
/* 다크모드 - 노션 스타일 */
[data-theme="dark"] .artifact-lightbox__container--markdown {
    background: #191919;
}

[data-theme="dark"]
    .artifact-lightbox__container--markdown
    .artifact-lightbox__header {
    background: #252525;
    border-bottom-color: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"]
    .artifact-lightbox__container--markdown
    .artifact-lightbox__title {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"]
    .artifact-lightbox__container--markdown
    .artifact-lightbox__tag-btn,
[data-theme="dark"]
    .artifact-lightbox__container--markdown
    .artifact-lightbox__actions
    .icon-btn {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"]
    .artifact-lightbox__container--markdown
    .artifact-lightbox__tag-btn:hover,
[data-theme="dark"]
    .artifact-lightbox__container--markdown
    .artifact-lightbox__actions
    .icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .artifact-lightbox__content--markdown {
    background: #191919;
}

[data-theme="dark"] .artifact-lightbox__markdown-body {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .artifact-lightbox__markdown-body h1,
[data-theme="dark"] .artifact-lightbox__markdown-body h2,
[data-theme="dark"] .artifact-lightbox__markdown-body h3,
[data-theme="dark"] .artifact-lightbox__markdown-body h4,
[data-theme="dark"] .artifact-lightbox__markdown-body h5,
[data-theme="dark"] .artifact-lightbox__markdown-body h6 {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .artifact-lightbox__markdown-body code {
    background: rgba(135, 131, 120, 0.15);
    color: #ff7b72;
}

[data-theme="dark"] .artifact-lightbox__markdown-body pre {
    background: #2f2f2f;
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .artifact-lightbox__markdown-body blockquote {
    background: none;
    color: rgba(255, 255, 255, 0.7);
    border-left-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .artifact-lightbox__markdown-body hr {
    border-top-color: rgba(255, 255, 255, 0.13);
}

[data-theme="dark"] .artifact-lightbox__markdown-body a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .artifact-lightbox__markdown-body th {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .artifact-lightbox__markdown-body th,
[data-theme="dark"] .artifact-lightbox__markdown-body td {
    border-color: rgba(255, 255, 255, 0.13);
}

[data-theme="dark"] .artifact-lightbox__markdown-raw {
    color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   버전 선택기 (라이트박스 헤더)
   ======================================== */

.artifact-lightbox__version-selector {
    position: relative;
    margin-left: 8px;
}

/* 단일 버전 (드롭다운 없음): 날짜만 표시 */
.artifact-lightbox__version-selector--single {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(55, 53, 47, 0.06);
    border-radius: 4px;
    color: rgba(55, 53, 47, 0.65);
    font-size: 12px;
}

.artifact-lightbox__version-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(55, 53, 47, 0.08);
    border: 1px solid rgba(55, 53, 47, 0.16);
    border-radius: 4px;
    color: #37352f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.artifact-lightbox__version-btn:hover {
    background: rgba(55, 53, 47, 0.16);
}

.artifact-lightbox__version-btn .material-symbols-rounded {
    font-size: 16px;
}

.artifact-lightbox__version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}

.artifact-lightbox__version-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(55, 53, 47, 0.16);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

.artifact-lightbox__version-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.artifact-lightbox__version-item:hover {
    background: rgba(55, 53, 47, 0.04);
}

.artifact-lightbox__version-item--active {
    background: rgba(55, 53, 47, 0.08);
}

.artifact-lightbox__version-item-name {
    font-size: 13px;
    color: #37352f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artifact-lightbox__version-item-date {
    font-size: 13px;
    color: #37352f;
    flex-shrink: 0;
}

.artifact-lightbox__version-item-badge {
    font-size: 10px;
    color: #fff;
    background: #3b82f6;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

/* 다크모드 버전 선택기 */
[data-theme="dark"] .artifact-lightbox__version-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .artifact-lightbox__version-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .artifact-lightbox__version-dropdown {
    background: #2f2f2f;
    border-color: rgba(255, 255, 255, 0.13);
}

[data-theme="dark"] .artifact-lightbox__version-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .artifact-lightbox__version-item--active {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .artifact-lightbox__version-item-name {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .artifact-lightbox__version-item-date {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .artifact-lightbox__version-badge {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .artifact-lightbox__version-item-badge {
    background: #60a5fa;
    color: #1e1e1e;
}

/* ========================================
   비교 모드 버튼
   ======================================== */

.artifact-lightbox__compare-btn {
    color: #37352f !important;
}

.artifact-lightbox__compare-btn--active {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
}

.artifact-lightbox__compare-btn--active:hover {
    background: rgba(59, 130, 246, 0.25) !important;
}

/* ========================================
   비교 모드 레이아웃
   ======================================== */

.artifact-lightbox-dialog--compare {
    padding: 0;
    /* 가운데 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.artifact-lightbox__container--compare {
    max-width: 1400px;
    width: 95vw;
    height: 100vh;
    max-height: 100vh;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.artifact-lightbox__compare-panels {
    flex: 1;
    display: flex;
    min-height: 0;
}

.artifact-lightbox__compare-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.artifact-lightbox__compare-panel-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #f7f6f3;
    border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}

.artifact-lightbox__compare-panel-content {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

.artifact-lightbox__compare-divider {
    width: 1px;
    background: rgba(55, 53, 47, 0.16);
}

/* 비교 모드 이미지/비디오 */
.artifact-lightbox__compare-image,
.artifact-lightbox__compare-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* 다크모드 비교 모드 */
[data-theme="dark"] .artifact-lightbox__container--compare {
    background: #191919;
}

[data-theme="dark"] .artifact-lightbox__compare-panel-header {
    background: #252525;
    border-bottom-color: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .artifact-lightbox__compare-divider {
    background: rgba(255, 255, 255, 0.13);
}

[data-theme="dark"] .artifact-lightbox__compare-btn {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .artifact-lightbox__compare-btn--active {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

/* ========================================
   Side-by-side Diff 뷰
   ======================================== */

/* 렌더링된 마크다운 블록에 적용되는 diff 하이라이트 */
.diff-highlight--add {
    background: rgba(46, 160, 67, 0.15) !important;
    border-left: 3px solid #2ea043;
    padding-left: 8px;
    margin-left: -11px;
}

.diff-highlight--remove {
    background: rgba(248, 81, 73, 0.15) !important;
    border-left: 3px solid #f85149;
    padding-left: 8px;
    margin-left: -11px;
}

/* 다크모드 diff 하이라이트 */
[data-theme="dark"] .diff-highlight--add {
    background: rgba(46, 160, 67, 0.2) !important;
    border-left-color: #3fb950;
}

[data-theme="dark"] .diff-highlight--remove {
    background: rgba(248, 81, 73, 0.2) !important;
    border-left-color: #f85149;
}


/* ========================================
   복사 버튼
   ======================================== */

.artifact-lightbox__copy-btn {
    color: #37352f !important;
}

.artifact-lightbox__container--markdown .artifact-lightbox__copy-btn {
    color: #37352f !important;
}

[data-theme="dark"] .artifact-lightbox__container--markdown .artifact-lightbox__copy-btn {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ========================================
   구글 드라이브 스타일 아티팩트 파일 목록
   ======================================== */

.artifacts-list--drive-style {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
}

.artifact-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s;
    position: relative;
}

.artifact-file-item:hover {
    background: rgba(15, 23, 42, 0.04);
}

.artifact-file-item:active {
    background: rgba(15, 23, 42, 0.08);
}

/* 파일 아이콘 */
.artifact-file-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
}

.artifact-file-item__icon .material-symbols-rounded {
    font-size: 24px;
}

/* 파일 정보 */
.artifact-file-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.artifact-file-item__name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artifact-file-item__meta {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 액션 버튼 */
.artifact-file-item__actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.artifact-file-item:hover .artifact-file-item__actions {
    opacity: 1;
}

.artifact-file-item__action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.15s,
        color 0.15s;
}

.artifact-file-item__action-btn:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #1f2937;
}

.artifact-file-item__action-btn .material-symbols-rounded {
    font-size: 20px;
}

/* 민감 도구 인디케이터 */
.artifact-file-item__tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.artifact-file-item__tool-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.artifact-file-item__tool-icon .material-symbols-rounded {
    font-size: 16px;
}

.artifact-file-item__tool-more {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* 대기 중 상태 */
.artifact-file-item--pending {
    opacity: 0.7;
}

.artifact-file-item--pending .artifact-file-item__name {
    color: #9ca3af;
}

/* 다크 모드 */
[data-theme="dark"] .artifact-file-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .artifact-file-item:active {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .artifact-file-item__icon {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .artifact-file-item__name {
    color: #f1f5f9;
}

[data-theme="dark"] .artifact-file-item__meta {
    color: #94a3b8;
}

[data-theme="dark"] .artifact-file-item__action-btn {
    color: #94a3b8;
}

[data-theme="dark"] .artifact-file-item__action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

[data-theme="dark"] .artifact-file-item__tool-icon {
    color: #6b7280;
}

[data-theme="dark"] .artifact-file-item__tool-more {
    color: #6b7280;
}

[data-theme="dark"] .artifact-file-item--pending .artifact-file-item__name {
    color: #6b7280;
}

.workbench-input-fixed {
    flex-shrink: 0;
    padding: 12px 0;
    /* border-top: 1px solid rgba(15, 23, 42, 0.08); */
    margin-left: 16px;
    margin-right: 16px;
    margin-top: auto;
    position: sticky;
    padding-bottom: 16px;
    bottom: 0;
}

.workbench-input-fixed[hidden] {
    display: none;
}

.workbench-input-fixed.workbench-input-fixed--chat {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 8px 8px;
    padding-bottom: 12px;
}

.dialog--wide .dialog__panel,
.dialog__panel--wide {
    max-width: 640px;
}

.dialog__desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.56);
    line-height: 1.5;
}

.section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-left: 8px;
    margin-right: 8px;
}

.section__title {
    font-size: 13px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.72);
    letter-spacing: 0.2px;
    margin-bottom: 12px;
}

.section__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.section__actions {
    display: flex;
    gap: 8px;
}

.field-actions {
    display: inline-flex;
    gap: 8px;
}

.hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.12);
    cursor: pointer;
    vertical-align: middle;
    border: 0px;
}

.hint::before {
    content: "?";
    font-size: 10px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.5);
    line-height: 1;
}

.hint .material-symbols-rounded {
    display: none;
}

/* .hint-popover[popover] - 통합됨: .hover-popover--field 사용 */
/* .dropdown__menu[popover] [data-open="true"] {
  display: grid !important;
} */

/* Popover-based floating UIs (dropdowns, pickers, etc) */
.dropdown__menu[popover] {
    z-index: 1000;
    position: fixed;
    inset: auto;
    display: none;
    gap: 6px;
    padding: 8px;
    border-radius: 16px;
    background: var(--surface-component);
    /* background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)); */
    backdrop-filter: blur(var(--surface-component--blur));
    border: 2px solid var(--surface-component--border);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    margin: 0;
    max-height: min(420px, calc(100vh - 24px));
    overflow: auto;
    overscroll-behavior: contain;
}

.dropdown__menu[popover]:popover-open {
    display: grid;
}

.dropdown__menu[popover]::backdrop {
    background: transparent;
}

.dropdown:has(> .dropdown__menu[popover]:popover-open) .dropdown__btn {
    background: rgba(49, 130, 246, 0.06);
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.14);
}

@supports (top: anchor(bottom)) and (anchor-name: --a) {
    .dropdown__menu[popover] {
        top: calc(anchor(bottom) + 8px);
        left: anchor(left);
        inline-size: anchor-size(width);
    }
}

@supports (position-try-fallbacks: flip-block) {
    .dropdown__menu[popover] {
        position-try-fallbacks: flip-block;
    }
}

/* Anchor mappings - hint-popover 관련 제거됨 (hover-popover 통합 시스템 사용) */

button.dropdown__btn[popovertarget="card-topic-menu"] {
    anchor-name: --card-topic-menu-anchor;
}

#card-topic-menu {
    position-anchor: --card-topic-menu-anchor;
}

button.dropdown__btn[popovertarget="card-label-menu"] {
    anchor-name: --card-label-menu-anchor;
}

#card-label-menu {
    position-anchor: --card-label-menu-anchor;
}

button.dropdown__btn[popovertarget="card-persona-menu"] {
    anchor-name: --card-persona-menu-anchor;
}

#card-persona-menu {
    position-anchor: --card-persona-menu-anchor;
}

button.dropdown__btn[popovertarget="card-member-reviewer-menu"] {
    anchor-name: --card-member-reviewer-menu-anchor;
}

#card-member-reviewer-menu {
    position-anchor: --card-member-reviewer-menu-anchor;
}

button.dropdown__btn[popovertarget="card-member-contributors-menu"] {
    anchor-name: --card-member-contributors-menu-anchor;
}

#card-member-contributors-menu {
    position-anchor: --card-member-contributors-menu-anchor;
}

button.dropdown__btn[popovertarget="card-permission-view-menu"] {
    anchor-name: --card-permission-view-menu-anchor;
}

#card-permission-view-menu {
    position-anchor: --card-permission-view-menu-anchor;
}

button.dropdown__btn[popovertarget="card-member-perm-view-menu"] {
    anchor-name: --card-member-perm-view-menu-anchor;
}

#card-member-perm-view-menu {
    position-anchor: --card-member-perm-view-menu-anchor;
}

button.dropdown__btn[popovertarget="card-permission-execute-menu"] {
    anchor-name: --card-permission-execute-menu-anchor;
}

#card-permission-execute-menu {
    position-anchor: --card-permission-execute-menu-anchor;
}

button.dropdown__btn[popovertarget="card-member-perm-execute-menu"] {
    anchor-name: --card-member-perm-execute-menu-anchor;
}

#card-member-perm-execute-menu {
    position-anchor: --card-member-perm-execute-menu-anchor;
}

button.dropdown__btn[popovertarget="card-permission-edit-menu"] {
    anchor-name: --card-permission-edit-menu-anchor;
}

#card-permission-edit-menu {
    position-anchor: --card-permission-edit-menu-anchor;
}

button.dropdown__btn[popovertarget="card-member-perm-edit-menu"] {
    anchor-name: --card-member-perm-edit-menu-anchor;
}

#card-member-perm-edit-menu {
    position-anchor: --card-member-perm-edit-menu-anchor;
}

button.dropdown__btn[popovertarget="card-permission-delete-menu"] {
    anchor-name: --card-permission-delete-menu-anchor;
}

#card-permission-delete-menu {
    position-anchor: --card-permission-delete-menu-anchor;
}

button.dropdown__btn[popovertarget="card-member-perm-delete-menu"] {
    anchor-name: --card-member-perm-delete-menu-anchor;
}

#card-member-perm-delete-menu {
    position-anchor: --card-member-perm-delete-menu-anchor;
}

button.dropdown__btn[popovertarget="project-member-picker-menu"] {
    anchor-name: --project-member-picker-menu-anchor;
}

#project-member-picker-menu {
    position-anchor: --project-member-picker-menu-anchor;
}

button.dropdown__btn[popovertarget="project-agent-picker-menu"] {
    anchor-name: --project-agent-picker-menu-anchor;
}

#project-agent-picker-menu {
    position-anchor: --project-agent-picker-menu-anchor;
}

.id-status {
    display: grid;
    grid-template-columns: 1fr minmax(180px, 240px);
    gap: 12px;
    align-items: center;
}

.task-id--inline {
    margin: 0;
}

.readonly-pill {
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.72);
    font-weight: 700;
    font-size: 14px;
    min-height: var(--control-height);
    display: flex;
    align-items: center;
}

.accordion {
    /* background: #fff; */
    border-radius: 16px;
    box-shadow: none;
    padding: 12px 16px;
    min-height: 52px;

    background: var(--surface-2);
    backdrop-filter: blur(var(--surface-2--blur));
    border: 2px solid var(--surface-2--border);

    margin: 0 0 16px;
}

.accordion__body {
    padding: 12px 0 0;
    display: none;
}

.accordion[open] .accordion__body {
    display: block;
}

.accordion__summary {
    list-style: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 900;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.72);
}

.accordion__summary::-webkit-details-marker {
    display: none;
}

.accordion__chev {
    transition: transform 0.16s ease;
    color: rgba(15, 23, 42, 0.45);
}

.accordion[open] .accordion__chev {
    transform: rotate(180deg);
}

.switch {
    display: flex;
    align-items: center;
    gap: 16px;
}

.switch__ui {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: rgba(25, 31, 40, 0.12);
    position: relative;
    transition: background 0.16s ease;
    /* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); */
    display: inline-block;
}

.switch__ui::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    position: absolute;
    left: 2px;
    top: 2px;
    transition:
        transform 0.16s ease,
        background 0.16s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.switch input:checked + .switch__ui {
    background: rgba(35, 196, 131, 1);
}

.switch input:checked + .switch__ui::after {
    transform: translateX(20px);
    background: #fff;
}

.ref-grid--mono .ref-chip__icon {
    filter: grayscale(1);
    opacity: 0.85;
}

.ref-chip__check {
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(49, 130, 246, 0.85);
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity 0.12s ease,
        transform 0.12s ease;
}

.ref-chip input:checked + .ref-chip__body .ref-chip__check {
    opacity: 1;
    transform: scale(1);
}

.plan-editor {
    margin-top: 12px;
}

.timeline {
    display: grid;
    gap: 12px;
}

.timeline__item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: start;
}

.timeline__rail {
    display: grid;
    grid-template-rows: 16px 1fr;
    justify-items: center;
}

.timeline__dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(49, 130, 246, 0.35);
    box-shadow: inset 0 0 0 2px rgba(49, 130, 246, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.timeline__num {
    font-size: 11px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.7);
    line-height: 1;
}

.timeline__line {
    width: 2px;
    background: rgba(49, 130, 246, 0.18);
    border-radius: 999px;
    margin-top: 4px;
}

.timeline__card {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px 14px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.timeline__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.timeline__title {
    font-size: 15px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.84);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline__order {
    font-size: 13px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.5);
}

.timeline__memo {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.62);
    line-height: 1.35;
}

.log-list {
    display: grid;
    gap: 10px;
}

.log-item {
    border-radius: 16px;
    background: rgba(25, 31, 40, 0.04);
    padding: 12px 14px;
}

.log-item__msg {
    font-size: 14px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.78);
}

.log-item__time {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(107, 118, 132, 0.92);
}

@media (max-width: 640px) {
    .dialog {
        border-radius: 0px;
        width: 100dvw;
        height: 100dvh;
        margin: 0px;
        max-width: 100dvw;
        max-height: 100dvh;
    }

    /* [data-dialog="color"] .dialog__panel, */
    [data-dialog="card"] .dialog__panel,
    /* [data-dialog=""] .dialog__panel */
    .dialog__panel {
        width: 100vw !important;
        height: 100vh !important;
        margin: 0;
        border-radius: 0;
        max-height: 100vh !important;
    }

    .dialog__body {
        /* padding: 12px 14px 0; */
    }

    .dialog-tabs {
        display: flex;
        padding-left: 12px;
        padding-right: 12px;
    }

    .dialog--col2,
    .dialog--col1 {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card--create .workbench-input-fixed {
        display: none;
    }

    /* 모바일: autosave 확인/취소 버튼 및 단축키 힌트 숨김 */
    .field-actions,
    [data-shortcut-hint],
    .chat-input-hint {
        display: none !important;
    }

    .agent-edit-fields {
        flex-direction: column !important;
    }

    .dialog-grid {
        display: block;
        overflow-y: scroll;
    }

    .dialog-grid[data-active-tab="left"] [data-card-col="right"] {
        display: none;
    }

    .dialog-grid[data-active-tab="right"] [data-card-col="left"] {
        display: none;
    }

    .dialog-grid--2col [data-card-col="col1"],
    .dialog-grid--2col [data-card-col="col2"] {
        display: none;
        max-width: 100%;
        flex: 1 1 100%;
    }

    .dialog-col .section {
        margin-bottom: 16px;
    }

    .dialog-grid--2col[data-active-tab="col1"] [data-card-col="col1"] {
        display: block;
    }

    .dialog-grid--2col[data-active-tab="col2"] [data-card-col="col2"] {
        display: block;
    }

    .id-status {
        grid-template-columns: 1fr;
    }

    /* 모바일: 3열 모드 완전 비활성화 - 항상 2열 모드처럼 동작 */
    [data-dialog="card"].task-theme-adaptive .dialog__panel {
        max-width: 100vw;
        width: 100vw;
    }

    /* 모바일: 3열 전용 탭 숨기고 기본 탭 표시 */
    [data-dialog="card"].task-theme-adaptive [data-unified-tabs-3col] {
        display: none !important;
    }

    [data-dialog="card"].task-theme-adaptive [data-unified-tabs-default] {
        display: flex !important;
    }

    /* 모바일: unified-area를 투명하게 (2열 모드처럼) */
    [data-dialog="card"].task-theme-adaptive .unified-area {
        display: contents !important;
    }

    [data-dialog="card"].task-theme-adaptive .unified-area__content {
        display: contents !important;
    }

    [data-dialog="card"].task-theme-adaptive .unified-body {
        display: block;
    }

    /* 모바일: 패널 기본 숨김, hidden 없을 때만 표시 */
    [data-dialog="card"].task-theme-adaptive [data-unified-panel] {
        display: none !important;
    }

    [data-dialog="card"].task-theme-adaptive
        [data-unified-panel]:not([hidden]) {
        display: block !important;
    }

    /* 모바일: 채팅 입력창 항상 표시 (하단 고정) */
    [data-dialog="card"].task-theme-adaptive [data-chat-input-default] {
        display: block !important;
    }

    /* 모바일: 채팅 패널 내부 입력창 숨김 (기본 입력창 사용) */
    [data-dialog="card"].task-theme-adaptive
        [data-unified-panel="chat"]
        .unified-area__input {
        display: none !important;
    }

    /* 모바일: col-1, col-2 비율 원복 */
    [data-dialog="card"].task-theme-adaptive .dialog--col1 {
        flex: 6;
    }

    [data-dialog="card"].task-theme-adaptive .dialog--col2 {
        flex: 4;
    }
}

.dialog__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 18px;
}

.dialog__footer[hidden] {
    display: none;
}

.card-dialog__footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.8);
}

.spacer {
    flex: 1;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 14px 16px;
    border-radius: 16px;
    border: 0;
    background: rgba(25, 31, 40, 0.95);
    color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    z-index: 9999;
}

/* Popover-based toast styling */
.toast[popover] {
    inset: unset;
    left: 50%;
    bottom: 14px;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .card--in-progress::after,
    .card--planning-pending::after,
    .sap-agent-card--in-review::after,
    .gradient-border-spin::after {
        animation: none !important;
    }

    .card,
    .card--in-progress,
    .card--planning-pending,
    .card--planning-done,
    .sap-agent-card--in-review,
    .sap-agent-card--in-review::before,
    .gradient-border-spin {
        animation: none !important;
    }

    .skeleton-block {
        animation: none !important;
    }

    .board--stale::before {
        animation: none !important;
    }
}

@media (max-width: 1200px) {
    :root {
        --lane-width: clamp(280px, 30vw, 360px);
    }

    .board {
        padding: 0px;
        gap: 14px;
        align-items: stretch;
        scroll-snap-type: x proximity;
    }

    .column {
        flex: 0 0 var(--lane-width);
        max-width: none;
        scroll-snap-align: start;
    }
}

@media (max-width: 420px) {
    .app-main {
        /* padding: 22px 16px 18px; */
    }
}

@media (max-width: 640px) {
    .app-main {
        padding: 0px;
    }

    :root {
        --lane-width: min(480px, calc(100vw - 40px));
    }

    .board-nav {
        margin-top: 24px;
        display: flex;
    }

    .board {
        scroll-snap-type: none;
        padding: 0 16px 12px;
        gap: 12px;
        overflow-x: hidden;
    }

    .column {
        scroll-snap-align: none;
    }

    .task-type-dot {
        width: 38px;
        height: 38px;
    }

    .fab-stack {
        bottom: 24px;
    }

    /* 모바일에서 스크롤 영역 마지막 아이템에 여백 */
    .card-list > .card:last-child {
        margin-bottom: 48px;
    }

    .settings-content > .settings-section:last-child {
        padding-bottom: 48px;
    }

    .dialog-col:last-child {
        padding-bottom: 48px;
    }
}

.fab-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    z-index: 30;
}

.fab {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    border: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.96);
    background: #111827;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fab--secondary {
    background: #111827;
    color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.fab--white {
    background: #ffffff;
    color: rgba(15, 23, 42, 0.78);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.fab--white:hover {
    background: #f8fafc;
}

.fab--secondary:hover,
.fab:not(.fab--white):hover {
    background: #0f172a;
}

.fab--secondary:active,
.fab:active {
    transform: translateY(1px);
}

.fab .material-symbols-rounded {
    font-size: 22px;
    vertical-align: 0;
}

/* FAB 컨텍스트 메뉴 */
.fab-context-wrapper {
    position: relative;
}

.fab-context-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 140px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow:
        0 10px 40px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fab-menu-in 0.15s ease-out;
}

@keyframes fab-menu-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fab-context-menu[hidden] {
    display: none;
}

.fab-context-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.78);
    white-space: nowrap;
    transition: background 0.12s;
}

.fab-context-menu__item:hover {
    background: rgba(15, 23, 42, 0.06);
}

.fab-context-menu__item .material-symbols-rounded {
    font-size: 20px;
    color: rgba(15, 23, 42, 0.54);
}

/* 단독 FAB 버튼 (fab-stack 밖에서 사용할 때 위치 고정) */
.fab--just-chat-standalone {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
}

/* FAB 버튼 툴팁 (왼쪽에 표시) */
.fab[data-tooltip] {
    position: relative;
}

.fab[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(17, 24, 39, 0.95);
    color: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 31;
}

.fab[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   ANNOUNCEMENT POPOVER
   ======================================== */
.announcement-popover {
    position: fixed;
    right: 18px;
    bottom: 96px;
    z-index: 60;
    opacity: 0;
    transform: translateY(16px);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
    pointer-events: none;
}

.announcement-popover--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.announcement-popover__panel {
    min-width: 280px;
    max-width: 360px;
    background: #fff;
    border-radius: 18px;
    /* border: 1px solid rgba(15, 23, 42, 0.12); */
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.24),
        0 12px 26px rgba(15, 23, 42, 0.12);
    padding: 16px 16px 14px;
    padding-right: 0px;
    display: grid;
    gap: 12px;
}

.announcement-popover__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.announcement-popover__icon {
    font-size: 24px;
    color: var(--accent);
    line-height: 1;
    font-weight: 400;
}

.announcement-popover__header .announcement-popover__title {
    flex: 1;
    min-width: 0;
}

.announcement-popover__body {
    padding: 0 2px;

    max-height: 720px;
    overflow: auto;
}

.announcement-popover__title {
    padding-top: 7px;

    padding-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-content);
}

.announcement-popover__version {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.56);
    font-family:
        ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas, monospace;
}

.announcement-popover__desc {
    font-size: 14px;
    color: rgba(15, 23, 42, 0.72);
    line-height: 1.5;
    font-weight: 500;
    padding-right: 16px;
    white-space: normal;
    word-break: keep-all;
}

.announcement-popover__more {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.56);
}

.announcement-popover__actions {
    padding-right: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.announcement-popover__actions .btn-sm {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    min-height: auto;
}

.announcement-popover__actions .btn-primary {
    background: var(--accent);
    color: #fff;
}

.announcement-popover__actions .btn-primary:hover {
    background: #2563eb;
}

.announcement-popover__close {
    margin-top: -4px;
}

.announcement-popover__pointer {
    position: absolute;
    right: 28px;
    bottom: -7px;
    width: 18px;
    height: 18px;
    background: #fff;
    /* border: 1px solid rgba(15, 23, 42, 0.12); */
    transform: rotate(45deg);
    box-shadow: 6px 6px 16px rgba(15, 23, 42, 0.08);
}

.announcement-popover__title--urgent {
    color: var(--danger);
}

.announcement-popover__title--maintenance {
    color: #7c5cff;
}

.announcement-popover__title--warning {
    color: #f59e0b;
}

@media (max-width: 640px) {
    .announcement-popover {
        left: 16px;
        right: 16px;
        bottom: 100px;
    }

    .announcement-popover__panel {
        width: 100%;
        max-width: none;
    }

    .announcement-popover__pointer {
        right: 48px;
    }
}

.settings-grid {
    display: grid;
    gap: 10px;
}

.settings-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
    .settings-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== Message Style Selector ========== */
.message-style-selector {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.message-style-select {
    flex: 0 0 240px;
}

.message-style-preview {
    flex: 1;
    min-width: 280px;
    max-width: 360px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.message-style-preview__list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    min-height: 120px;
}

.message-style-preview__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.message-style-preview__avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #6366f1;
    flex-shrink: 0;
}

.message-style-preview__content {
    flex: 1;
    min-width: 0;
}

.message-style-preview__name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1d1c1d;
    margin-bottom: 2px;
}

.message-style-preview__text {
    display: block;
    font-size: 13px;
    color: #1d1c1d;
    line-height: 1.4;
}

.message-style-preview__time {
    font-size: 10px;
    color: #616061;
    flex-shrink: 0;
    margin-top: 2px;
}

.message-style-preview__item--mine .message-style-preview__avatar {
    background: #10b981;
}

/* --- Simple Style Preview --- */
.message-style-preview--simple .message-style-preview__list {
    background: #fff;
}

.message-style-preview--simple .message-style-preview__avatar {
    display: none;
}

.message-style-preview--simple .message-style-preview__item {
    gap: 0;
}

.message-style-preview--simple .message-style-preview__name {
    display: inline;
    color: #6366f1;
    margin-bottom: 0;
}

.message-style-preview--simple .message-style-preview__name::after {
    content: ":";
    margin-right: 6px;
}

.message-style-preview--simple .message-style-preview__text {
    display: inline;
}

.message-style-preview--simple .message-style-preview__time {
    display: none;
}

.message-style-preview--simple
    .message-style-preview__item--mine
    .message-style-preview__name {
    color: #16a34a;
}

/* --- Slack Style Preview (default) --- */
.message-style-preview--slack .message-style-preview__list {
    background: #fff;
}

/* --- iMessage Style Preview --- */
.message-style-preview--imessage .message-style-preview__list {
    background: #fff;
}

.message-style-preview--imessage .message-style-preview__avatar {
    display: none;
}

.message-style-preview--imessage .message-style-preview__item {
    flex-direction: column;
    align-items: flex-start;
    max-width: 80%;
}

.message-style-preview--imessage .message-style-preview__name {
    display: none;
}

.message-style-preview--imessage .message-style-preview__text {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 16px;
    background: #e5e5ea;
}

.message-style-preview--imessage .message-style-preview__time {
    font-size: 9px;
    margin-left: 8px;
}

.message-style-preview--imessage .message-style-preview__item--mine {
    align-items: flex-end;
    margin-left: auto;
}

.message-style-preview--imessage
    .message-style-preview__item--mine
    .message-style-preview__text {
    background: #007aff;
    color: #fff;
}

/* --- KakaoTalk Style Preview --- */
/* iMessage와 동일한 버블 구조 (단순히 색상만 다름) */
.message-style-preview--kakaotalk .message-style-preview__list {
    background: #b2c7d9;
}

.message-style-preview--kakaotalk .message-style-preview__avatar {
    display: none;
}

.message-style-preview--kakaotalk .message-style-preview__item {
    flex-direction: column;
    align-items: flex-start;
    max-width: 80%;
}

.message-style-preview--kakaotalk .message-style-preview__name {
    display: none;
}

.message-style-preview--kakaotalk .message-style-preview__text {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.message-style-preview--kakaotalk .message-style-preview__time {
    font-size: 9px;
    margin-left: 8px;
}

.message-style-preview--kakaotalk .message-style-preview__item--mine {
    align-items: flex-end;
    margin-left: auto;
}

.message-style-preview--kakaotalk
    .message-style-preview__item--mine
    .message-style-preview__text {
    background: #fef01b;
    color: #000;
}

/* --- Discord Style Preview --- */
.message-style-preview--discord .message-style-preview__list {
    background: #313338;
}

.message-style-preview--discord .message-style-preview__item {
    padding-left: 52px;
    position: relative;
}

.message-style-preview--discord .message-style-preview__avatar {
    position: absolute;
    left: 12px;
    top: 0;
    border-radius: 50%;
    background: #5865f2;
}

.message-style-preview--discord .message-style-preview__name {
    font-weight: 500;
    color: #f2f3f5;
}

.message-style-preview--discord .message-style-preview__text {
    color: #dbdee1;
}

.message-style-preview--discord .message-style-preview__time {
    color: #949ba4;
}

.message-style-preview--discord
    .message-style-preview__item--mine
    .message-style-preview__avatar {
    background: #57f287;
}

@media (max-width: 640px) {
    .message-style-selector {
        flex-direction: column;
    }
    .message-style-select {
        flex: 1;
        width: 100%;
    }
    .message-style-preview {
        width: 100%;
        max-width: none;
    }
}

.setting-option {
    display: block;
    cursor: pointer;
}

.setting-option__body {
    display: grid;
    gap: 4px;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(25, 31, 40, 0.04);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.setting-option__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-content);
}

.setting-option__desc {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.62);
}

.setting-option__input:focus-visible + .setting-option__body {
    outline: 2px solid rgba(49, 130, 246, 0.65);
    outline-offset: 2px;
}

.setting-option__input:checked + .setting-option__body {
    background: rgba(49, 130, 246, 0.08);
    box-shadow: inset 0 0 0 2px rgba(49, 130, 246, 0.55);
}

/* 스위치 옵션 (우측 토글) */
.switch-option-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.switch-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(25, 31, 40, 0.04);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition:
        background 0.15s,
        box-shadow 0.15s;
}

.switch-option:hover {
    background: rgba(25, 31, 40, 0.06);
}

.switch-option__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.switch-option__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-content);
}

.switch-option__desc {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.62);
    line-height: 1.4;
}

.switch-option .toggle {
    flex-shrink: 0;
}

.card--lead-team .persona__team {
    font-size: 13px;
}

.card--lead-team .persona__kw {
    font-size: 12px;
}

/* ═══════════════════════════════════════════
   New Task Dialog
   ═══════════════════════════════════════════ */

.dialog--new-task {
    overflow: visible;
}

.dialog--new-task > .dialog__panel {
    overflow: visible;
}

.dialog__panel--new-task {
    width: 90vw;
    max-width: 640px;
    min-height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.dialog__panel--new-task .dialog__body {
    overflow: visible;
    flex: 1;
    min-height: 0;
}

/* ntd-form 내부에서 스크롤 처리 */
.dialog__panel--new-task .ntd-form {
    max-height: calc(90vh - 160px);
    overflow-y: auto;
    overflow-x: visible;
    padding-bottom: 8px;
}

/* Popover 드롭다운이 다이얼로그 밖으로 나갈 수 있도록 */
.dialog--new-task .dropdown__menu[popover] {
    z-index: 2147483647;
}

/* dialog 내부의 picker 컨테이너가 popover를 가리지 않도록 */
.dialog--new-task .persona-picker,
.dialog--new-task .topic-picker,
.dialog--new-task .label-picker,
.dialog--new-task .member-picker {
    position: static;
}

.dialog__panel--new-task .dialog__footer {
    justify-content: flex-end;
}

.ntd-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ntd-form .field:last-child {
    margin-bottom: 0;
}

.ntd-form .textarea[name="taskNote"] {
    min-height: 120px;
}

.ntd-form .accordion {
    margin-top: 4px;
}

.ntd-form .accordion__body {
    padding-bottom: 4px;
}

@media (max-width: 600px) {
    .dialog__panel--new-task {
        width: 100vw;
        max-width: 100vw;
        min-height: 100vh;
        border-radius: 0;
    }

    .dialog--new-task {
        margin: 0;
        border-radius: 0;
    }
}

/* ═══════════════════════════════════════════
   New Subtask Dialog
   ═══════════════════════════════════════════ */

.dialog__panel--new-subtask {
    width: 90vw;
    max-width: 420px;
    min-height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog__panel--new-subtask .dialog__body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.dialog__panel--new-subtask .dialog__footer {
    justify-content: flex-end;
}

.nsd-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nsd-form .field:last-child {
    margin-bottom: 0;
}

.nsd-form .textarea[name="description"] {
    min-height: 80px;
}

.nsd-form .accordion {
    margin-top: 4px;
}

.nsd-form .accordion__body {
    padding-bottom: 4px;
}

@media (max-width: 600px) {
    .dialog__panel--new-subtask {
        width: 100vw;
        max-width: 100vw;
        min-height: 100vh;
        border-radius: 0;
    }

    .dialog--new-subtask {
        margin: 0;
        border-radius: 0;
    }
}

/* ═══════════════════════════════════════════
   Lane Footer - Add Subtask Button
   ═══════════════════════════════════════════ */

.subtask-board .column__footer {
    padding: 6px 10px 10px;
    display: flex;
    justify-content: center;
}

.subtask-board .column__add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    border: 1.5px dashed rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--muted, rgba(15, 23, 42, 0.44));
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}

.subtask-board .column__add-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.25);
    color: var(--text-content, rgba(15, 23, 42, 0.78));
}

.subtask-board .column__add-btn .material-symbols-rounded {
    font-size: 20px;
}

/* Settings Dialog - 2 Column Layout */
.dialog--settings {
}

.dialog__panel--settings {
    /* width: 90vw;
    max-width: 960px;
    min-height: 540px; */
}

.settings-body {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.settings-nav {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    background: rgba(25, 31, 40, 0.03);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    overflow-y: auto;
}

.settings-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(15, 23, 42, 0.72);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}

.settings-nav__item:hover {
    background: rgba(25, 31, 40, 0.06);
}

.settings-nav__item--active {
    background: rgba(49, 130, 246, 0.1);
    color: var(--accent);
}

.settings-nav__item--active:hover {
    background: rgba(49, 130, 246, 0.14);
}

.settings-nav__item .material-symbols-rounded {
    font-size: 20px;
    flex: 0 0 auto;
}

.settings-nav__item--danger {
    color: #dc2626;
}

.settings-nav__item--danger:hover {
    background: rgba(220, 38, 38, 0.08);
}

.settings-nav__item--danger.settings-nav__item--active {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.settings-content {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
    min-height: 0;
}

.settings-section {
    animation: settings-fade-in 0.2s ease;
}

.settings-section[hidden] {
    display: none;
}

.settings-section__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-content);
    margin: 0 0 8px;
}

.settings-section__desc {
    font-size: 14px;
    color: rgba(15, 23, 42, 0.62);
    margin: 0 0 20px;
    line-height: 1.5;
}

/* Danger Zone Section */
.settings-section--danger .settings-section__title {
    color: #dc2626;
}

.danger-box {
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.danger-box__header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dc2626;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
}

.danger-box__header .material-symbols-rounded {
    font-size: 22px;
}

.danger-box__desc {
    font-size: 14px;
    color: #7f1d1d;
    line-height: 1.6;
    margin: 0 0 8px;
}

.danger-box__warning {
    font-size: 12px;
    color: #b91c1c;
    line-height: 1.5;
    margin: 0 0 16px;
    padding: 8px 12px;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 6px;
}

.btn-danger {
    background: #dc2626;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-danger:disabled {
    background: #fca5a5;
    cursor: not-allowed;
}

@keyframes settings-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Settings Readonly State (for project_member) */
.settings-section--readonly {
    opacity: 0.6;
}

.settings-section--readonly input,
.settings-section--readonly select,
.settings-section--readonly textarea,
.settings-section--readonly .toggle__input {
    pointer-events: none;
    cursor: not-allowed;
}

.settings-section--readonly .btn,
.settings-section--readonly .mini-btn {
    pointer-events: none;
    opacity: 0.5;
}

.settings-readonly-notice,
.settings-warning-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.settings-readonly-notice {
    background: rgba(59, 130, 246, 0.08);
    color: var(--color-primary);
}

.settings-readonly-notice .material-symbols-rounded {
    font-size: 18px;
    flex-shrink: 0;
}

.settings-warning-notice {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.settings-warning-notice .material-symbols-rounded {
    font-size: 18px;
    flex-shrink: 0;
    color: #f59e0b;
}

/* Repo List */
.repo-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.repo-list__item:last-child {
    border-bottom: none;
}

.repo-list__item-info {
    flex: 1;
    min-width: 0;
}

.repo-list__item-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-content);
    word-break: break-word;
}

.repo-list__item-desc {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repo-list__empty {
    padding: 32px;
    text-align: center;
    color: var(--color-text-muted);
}

/* Integration List */
.integration-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
}

.integration-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    /* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); */
}

.integration-item__header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.integration-item__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    filter: grayscale(1);
    opacity: 0.7;
}

.integration-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.integration-item__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-content);
}

.integration-item__status {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.56);
}

.integration-item__status[data-status="connected"] {
    color: var(--ok);
}

.integration-item__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.integration-item__field {
    width: 180px;
}

.integration-item__field .input {
    width: 100%;
}

.btn--sm {
    padding: 8px 12px;
    font-size: 13px;
    min-height: 36px;
    border-radius: 10px;
}

/* In Progress 오버레이 */
.in-progress-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--surface));
    backdrop-filter: blur(var(--surface-2--blur));
    z-index: 100;

    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.in-progress-overlay:not[hidden] {
}

.in-progress-overlay[hidden] {
    display: none;
}

.in-progress-overlay__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 48px;
    /* background: #fff; */
    /* border-radius: 16px; */
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16); */
    text-align: center;
}

.in-progress-overlay__icon {
    font-size: 48px;
    color: #3b82f6;
}

.in-progress-overlay__title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.in-progress-overlay__desc {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 4px;
}

/* 스피닝 애니메이션 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* Deactivated state for In Progress cards */
.dialog.__deactivated .dialog__body {
    position: relative;
}

.dialog.__deactivated .dialog__header,
.dialog.__deactivated .dialog__footer {
    pointer-events: auto;
    opacity: 1;
}

.__disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

[data-settings-panel] .btn {
    /* width: auto !important;
    display: inline-block; */
    align-self: flex-start;
}

/* n8n Workflow Settings */
.n8n-workflow-list {
    display: grid;
    gap: 16px;
}

.n8n-workflow-item {
    padding: 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--line);
}

.n8n-workflow-item__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.n8n-workflow-item__icon {
    font-size: 28px;
    color: var(--accent);
    flex: 0 0 auto;
}

.n8n-workflow-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.n8n-workflow-item__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-content);
}

.n8n-workflow-item__desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

.n8n-workflow-item__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.n8n-workflow-item__body .field {
    margin: 0;
}

.n8n-workflow-item__body .field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    display: block;
}

.n8n-workflow-item__body .input {
    width: 100%;
}

/* Toggle Switch Group */
.toggle-switch-group {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
}

.toggle-switch {
    flex: 1;
    cursor: pointer;
}

.toggle-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-switch__label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    transition: all 0.15s ease;
}

.toggle-switch__input:checked + .toggle-switch__label {
    background: var(--accent);
    color: #fff;
}

.toggle-switch__input:focus-visible + .toggle-switch__label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Data List (for topics, labels, task types) */
.data-list {
    display: grid;
    gap: 10px;
}

.data-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    /* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); */
}

.data-row__color {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    flex-shrink: 0;
    cursor: pointer;
    background: rgba(25, 31, 40, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.data-row__color:hover {
    background: rgba(25, 31, 40, 0.08);
}

.data-row__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.data-row__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-content);
}

.data-row__sub {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.56);
}

.data-row__subtitle {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.56);
}

.data-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--avatar-bg, #e8f2ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.7);
    overflow: hidden;
}

.data-row__avatar .material-symbols-rounded {
    font-size: 20px;
}

.data-row__avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.data-row__avatar--agent {
    border-radius: 10px;
}

.data-row__chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.56);
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.data-row__chip--warning {
    background: #fef3c7;
    color: #92400e;
}

.data-row__avatar--muted {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-secondary);
}

.data-row__actions {
    display: flex;
    gap: 6px;
    align-self: flex-start;
}

.data-empty {
    padding: 24px 16px;
    text-align: center;
    color: rgba(15, 23, 42, 0.56);
    font-size: 13px;
}

/* Topic Data Row */
.data-row--topic {
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    padding: 16px;
}

.data-row__content--topic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.topic-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.topic-field--full {
    grid-column: 1 / -1;
}

.topic-field__label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.56);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.topic-desc {
    resize: vertical;
    min-height: 48px;
    max-height: 120px;
}

.topic-dates {
    grid-column: 1 / -1;
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.topic-date {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.44);
}

/* Tag Edit Dialog (공통: Topic, Label) */
.tag-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tag-edit-color-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tag-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-color-option {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.1s;
}

.tag-color-option:hover {
    transform: scale(1.1);
}

.tag-color-option .tag-dot {
    width: 28px;
    height: 28px;
    background: var(--dot-color, #888);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.tag-color-option--selected {
    outline: 2px solid var(--dot-color, #3182f6);
    outline-offset: 2px;
}

/* Custom color picker option */
.tag-color-option--custom {
    position: relative;
}

.tag-dot--custom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag-dot__icon {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.7);
}

.tag-color-picker-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.tag-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.tag-edit-dates {
    display: flex;
    gap: 16px;
    padding-top: 4px;
}

.tag-edit-date {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.44);
}

/* Member Edit Dialog */
.member-edit-date {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.44);
}

/* TaskType Edit Dialog dates */
.tasktype-edit-date {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.44);
}

/* Task Type Edit Dialog */
.tasktype-edit-form {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.tasktype-edit-icon {
    flex-shrink: 0;
}

.tasktype-icon-display {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(49, 130, 246, 0.1);
    color: var(--accent);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.tasktype-edit-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tasktype-edit-dates {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.56);
    margin-top: 4px;
}

/* [data-tasktype-id].data-row__icon {} */
.data-row__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(49, 130, 246, 0.1);
    color: var(--accent);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Member Edit Dialog */
.member-edit-form {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.member-edit-avatar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.member-edit-avatar__preview {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--avatar-bg, #e8f2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.7);
    overflow: hidden;
}

.member-edit-avatar__preview .material-symbols-rounded {
    font-size: 36px;
}

.member-edit-avatar__preview .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-edit-avatar__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.member-edit-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.member-edit-dates {
    display: flex;
    gap: 16px;
    padding-top: 4px;
}

/* Agent Edit Dialog */
.agent-edit-form {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.agent-edit-avatar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.agent-edit-avatar__preview {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--avatar-bg, #e8f2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.7);
    overflow: hidden;
}

.agent-edit-avatar__preview .material-symbols-rounded {
    font-size: 36px;
}

.agent-edit-fields {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 14px;
    min-width: 0;
}

.agent-edit-fields .dialog--col1 {
    flex: 4;
}

.agent-edit-fields .dialog--col2 {
    flex: 6;
}

/* Icon button (for data rows) */
.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: rgba(15, 23, 42, 0.56);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        color 0.15s;
}

.icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-content);
}

.icon-btn--danger:hover {
    background: rgba(180, 35, 46, 0.12);
    color: #b4232e;
}

.icon-btn .material-symbols-rounded {
    font-size: 18px;
}

.data-row--label {
    grid-template-columns: auto 1fr auto auto;
}

.data-row__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.data-row__label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.48);
}

.data-row__field .input {
    width: 100%;
}

.data-row__dates {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
}

.data-row__date {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.48);
    white-space: nowrap;
}

.data-list__empty {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.48);
    text-align: center;
    padding: 24px;
}

/* Agent List */
.agent-list {
    display: grid;
    gap: 10px;
}

.agent-card {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s;
}

.agent-card--editing {
    box-shadow:
        inset 0 0 0 1px rgba(49, 130, 246, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.agent-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-card--editing .agent-card__header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.agent-card__info {
    flex: 1;
    min-width: 0;
}

.agent-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-content);
}

.agent-card__position {
    font-size: 11px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.5);
    margin-left: 4px;
}

.agent-card__role {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.5);
    margin-top: 2px;
}

.agent-card__actions {
    display: flex;
    gap: 4px;
}

.agent-card__body {
    display: grid;
    gap: 12px;
}

.agent-card__body[hidden] {
    display: none;
}

.agent-card__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-card__row--full {
    flex-direction: column;
    align-items: stretch;
}

.agent-card__label {
    flex: 0 0 80px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.6);
}

.agent-card__row--full .agent-card__label {
    margin-bottom: 6px;
}

.agent-card__input,
.agent-card__select {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(25, 31, 40, 0.06);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-content);
}

.agent-card__input:focus,
.agent-card__select:focus {
    outline: none;
    background: rgba(49, 130, 246, 0.06);
    box-shadow: 0 0 0 2px rgba(49, 130, 246, 0.2);
}

.agent-card__textarea {
    width: 100%;
    min-height: 80px;
    border: 0;
    border-radius: 10px;
    padding: 12px;
    background: rgba(25, 31, 40, 0.06);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-content);
    resize: vertical;
    font-family: inherit;
}

.agent-card__textarea:focus {
    outline: none;
    background: rgba(49, 130, 246, 0.06);
    box-shadow: 0 0 0 2px rgba(49, 130, 246, 0.2);
}

.agent-card__icon-picker,
.agent-card__color-picker {
    flex: 1;
}

.agent-card__icon-btn,
.agent-card__color-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    background: rgba(25, 31, 40, 0.06);
    cursor: pointer;
    font-size: 14px;
}

.agent-card__icon-btn:hover,
.agent-card__color-btn:hover {
    background: rgba(25, 31, 40, 0.1);
}

.agent-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--agent-color, #e8f2ff);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.agent-card__knowledge {
    padding: 12px;
    border-radius: 10px;
    background: rgba(25, 31, 40, 0.04);
    min-height: 44px;
}

.agent-card__empty {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.4);
}

/* Agent Popup (아이콘/색상 선택) */
.agent-popup {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    padding: 14px;
    min-width: 200px;
    max-width: 280px;
}

.agent-popup__title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.6);
    margin-bottom: 12px;
    padding-left: 2px;
}

.agent-popup__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.agent-popup__icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(25, 31, 40, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        transform 0.15s;
}

.agent-popup__icon-btn:hover {
    background: rgba(49, 130, 246, 0.12);
    transform: scale(1.05);
}

.agent-popup__icon-btn--active {
    background: rgba(49, 130, 246, 0.18);
    box-shadow: inset 0 0 0 2px rgba(49, 130, 246, 0.5);
}

.agent-popup__icon-btn .material-symbols-rounded {
    font-size: 20px;
    color: rgba(15, 23, 42, 0.7);
}

.agent-popup__colors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.agent-popup__color-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.15s;
}

.agent-popup__color-btn:hover {
    transform: scale(1.1);
}

.agent-popup__color-btn--active {
    box-shadow: 0 0 0 2px rgba(49, 130, 246, 0.6);
    border-radius: 10px;
}

.agent-popup__color-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Member List */
.member-list {
    display: grid;
    gap: 10px;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.member-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(49, 130, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.member-row__info {
    flex: 1;
    min-width: 0;
}

.member-row__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-content);
}

.member-row__email {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.56);
}

/* Member Admin Row */
.member-admin-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.member-admin-row__avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.member-admin-row__avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--avatar-bg, rgba(49, 130, 246, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.member-admin-row__avatar .avatar-initial {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-content);
}

.member-admin-row__avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-admin-row__avatar .material-symbols-rounded {
    font-size: 28px;
    color: rgba(15, 23, 42, 0.7);
}

.member-admin-row__avatar-actions {
    display: flex;
    gap: 4px;
}

.member-admin-row__fields {
    display: grid;
    gap: 12px;
}

.member-admin-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-admin-field__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-content);
}

.member-admin-field__hint {
    font-weight: 400;
    color: rgba(15, 23, 42, 0.5);
}

.member-admin-row__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.member-admin-row__timestamps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.member-admin-row__ts {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.5);
    white-space: nowrap;
}

/* Member Icon Grid */
.member-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.member-icon-option {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        box-shadow 0.15s;
}

.member-icon-option:hover {
    background: rgba(0, 0, 0, 0.08);
}

.member-icon-option--selected {
    background: rgba(49, 130, 246, 0.15);
    box-shadow: inset 0 0 0 2px #3182f6;
}

.member-icon-option .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.7);
}

/* Member Color Grid */
.member-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.member-color-option {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: var(--swatch-color, #e8f2ff);
    cursor: pointer;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.member-color-option:hover {
    transform: scale(1.15);
}

.member-color-option--selected {
    box-shadow:
        inset 0 0 0 2px #3182f6,
        0 0 0 2px white,
        0 0 0 4px #3182f6;
}

/* Avatar Upload Section */
.avatar-upload {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar-upload__preview {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}

.avatar-upload__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-upload__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: rgba(15, 23, 42, 0.5);
}

.avatar-upload__placeholder .material-symbols-rounded {
    font-size: 36px;
}

.avatar-upload__remove {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--danger, #ef4444);
    color: white;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.avatar-upload__remove:hover {
    background: var(--danger-hover, #dc2626);
}

.avatar-upload__remove .material-symbols-rounded {
    font-size: 14px;
}

.avatar-upload__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 프로필 페이지: 아바타 미리보기를 원형으로 표시 */
#profile-avatar-preview {
    border-radius: 50%;
    overflow: hidden;
}

/* Glass card icon 내 avatar-img */
.glass-card__icon .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Avatar img style for picker */
.avatar-circle .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.avatar-agent {
    overflow: hidden;
}

.avatar-agent .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 640px) {
    .member-admin-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .member-admin-row__avatar-section {
        flex-direction: row;
        justify-content: flex-start;
    }

    .member-admin-row__meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .member-admin-row__timestamps {
        flex-direction: row;
        gap: 12px;
    }
}

/* Settings Dialog Mobile */
@media (max-width: 640px) {
    .dialog__panel--settings {
        width: 100vw;
        max-width: none;
        min-height: auto;
        height: 100vh;
        border-radius: 0;
    }

    .settings-body {
        flex-direction: column;
    }

    .settings-nav {
        flex: 0 0 auto;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        gap: 8px;
    }

    .settings-nav__item {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 12px;
    }

    .settings-nav__item span:last-child {
        display: none;
    }

    .settings-content {
        padding: 16px;
    }

    .integration-list {
        grid-template-columns: 1fr;
    }

    .integration-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .integration-item__actions {
        flex-wrap: wrap;
    }

    .integration-item__field {
        width: 100%;
    }
}

/* ========================================
   AUTH PAGES (Login, Sign-up)
   ======================================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px 16px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
}

.auth-card__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.auth-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text-content);
    color: #fff;
    border-radius: 12px;
    flex-shrink: 0;
}

.auth-card__icon .material-symbols-rounded {
    font-size: 24px;
}

.auth-card__title-wrap {
    flex: 1;
}

.auth-card__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0;
}

.auth-card__subtitle {
    font-size: 14px;
    color: rgba(15, 23, 42, 0.56);
    margin: 4px 0 0;
}

.auth-card__error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 20px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.auth-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
}

.auth-btn--social {
    margin-top: 4px;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.auth-btn--social:hover {
    border-color: rgba(15, 23, 42, 0.2);
    background: rgba(15, 23, 42, 0.02);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.4);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(15, 23, 42, 0.1);
}

.auth-link {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.56);
    text-decoration: none;
    transition: color 0.15s;
}

.auth-link:hover {
    color: var(--text-content);
}

.auth-link--strong {
    font-weight: 600;
    color: var(--text-content);
}

.auth-link--strong:hover {
    color: var(--accent);
}

.auth-card__footer {
    text-align: center;
    font-size: 14px;
    color: rgba(15, 23, 42, 0.56);
    margin-top: 24px;
}

/* ========================================
   ORGANIZATION OVERVIEW PAGE
   ======================================== */
.org-page {
    min-height: 100vh;
    background: var(--bg);
}

.org-page__container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 40px 24px;
}

.org-header {
    margin-bottom: 32px;
}

.org-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.org-header__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.4);
}

.org-header__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-content);
    margin: 8px 0 0;
}

.org-header__slug {
    font-size: 14px;
    color: rgba(15, 23, 42, 0.5);
    margin-top: 8px;
}

.org-header__badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.7);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
}

.org-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.org-section {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.org-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.org-section__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0;
}

.org-section__count {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.4);
}

.org-section__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.org-section__empty {
    border: 1px dashed rgba(15, 23, 42, 0.15);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.4);
}

/* ========================================
   DIALOG SCROLL FIX
   ======================================== */
/* Dialog panel should constrain height for proper scrolling */
.dialog__panel--settings {
    max-height: 85vh;
}

/* ========================================
   CARD ANNOTATIONS CONTAINER
   (상태 배너 컨테이너 - header와 body 사이에 위치)
   ======================================== */
.card-annotations {
    flex-shrink: 0;
    padding: 12px 16px 0;
}

.card-annotations:empty,
.card-annotations:not(:has(*:not([hidden]))) {
    display: none;
    padding: 0;
}

/* annotation 내부 마진 조정 (컨테이너가 패딩을 가지므로) */
.card-annotations > *:not([hidden]) {
    margin-bottom: 0;
}

/* ========================================
   IN PROGRESS ANNOTATION
   (작업중 알림 카드 - 제목 아래)
   ======================================== */
.in-progress-annotation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    padding: 14px 18px;
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.1) 0%,
        rgba(251, 191, 36, 0.08) 100%
    );
    border: 1.5px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.in-progress-annotation[hidden] {
    display: none;
}

.in-progress-annotation__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.in-progress-annotation__icon .material-symbols-rounded {
    font-size: 22px;
    color: #f59e0b;
}

.in-progress-annotation__content {
    flex: 1;
    min-width: 0;
}

.in-progress-annotation__message {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #b45309;
    line-height: 1.4;
}

.in-progress-annotation__hint {
    margin: 3px 0 0;
    font-size: 12px;
    color: #92400e;
    opacity: 0.8;
}

.in-progress-annotation__cancel {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
    /* background: rgba(220, 38, 38, 0.1); */
    background: transparent;
    border: none !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.in-progress-annotation__cancel:hover {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(220, 38, 38, 0.35);
}

.in-progress-annotation__cancel:active {
    transform: scale(0.98);
}

/* 스피닝 애니메이션 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* Read-only state for In Progress cards */
.dialog.__read-only input:disabled,
.dialog.__read-only textarea:disabled,
.dialog.__read-only select:disabled {
    /* background: rgba(0, 0, 0, 0.02); */
    cursor: default;
    opacity: 0.4;
}

.dialog.__read-only textarea.chat-input:disabled {
    /* background: rgba(0, 0, 0, 0.02); */
    opacity: 1;
}

.dialog.__read-only
    button:disabled:not([data-action="cancel-in-progress"]):not(
        [data-action="cancel-task-planning"]
    ):not([data-action="close-card-dialog"]):not([role="tab"]) {
    opacity: 0.5;
    cursor: not-allowed;
}

.__disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Dark mode for in-progress annotation */
[data-theme="dark"] .in-progress-annotation {
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.12) 0%,
        rgba(251, 191, 36, 0.08) 100%
    );
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .in-progress-annotation__message {
    color: #fbbf24;
}

[data-theme="dark"] .in-progress-annotation__hint {
    color: #fcd34d;
}

[data-theme="dark"] .in-progress-annotation__cancel {
    background: rgba(220, 38, 38, 0.15);
    /* border-color: rgba(220, 38, 38, 0.25); */
}

[data-theme="dark"] .in-progress-annotation__cancel:hover {
    background: rgba(220, 38, 38, 0.25);
}

[data-theme="dark"] .dialog.__read-only input:disabled,
[data-theme="dark"] .dialog.__read-only textarea:disabled,
[data-theme="dark"] .dialog.__read-only select:disabled {
    background: rgba(255, 255, 255, 0.03);
}

/* ========================================
   Restricted View Annotation (조회 제한 Lv.2)
   ======================================== */
.restricted-annotation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    padding: 12px 16px;
    background: linear-gradient(
        135deg,
        rgba(107, 114, 128, 0.12) 0%,
        rgba(107, 114, 128, 0.06) 100%
    );
    border: 1px solid rgba(107, 114, 128, 0.15);
    border-radius: 12px;
    box-sizing: border-box;
}

.restricted-annotation[hidden] {
    display: none;
}

.restricted-annotation__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.restricted-annotation__icon .material-symbols-rounded {
    font-size: 22px;
    color: #6b7280;
}

.restricted-annotation__content {
    flex: 1;
    min-width: 0;
}

.restricted-annotation__message {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    line-height: 1.4;
}

.restricted-annotation__hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

[data-theme="dark"] .restricted-annotation {
    background: linear-gradient(
        135deg,
        rgba(107, 114, 128, 0.15) 0%,
        rgba(107, 114, 128, 0.08) 100%
    );
    border-color: rgba(107, 114, 128, 0.2);
}

[data-theme="dark"] .restricted-annotation__message {
    color: #d1d5db;
}

[data-theme="dark"] .restricted-annotation__hint {
    color: #9ca3af;
}

[data-theme="dark"] .restricted-annotation__icon .material-symbols-rounded {
    color: #9ca3af;
}

/* Viewer card on board (Lv.2 — read-only mode, full content visible) */
.card--restricted {
    /* 조회자(lv2)도 모든 내용을 볼 수 있음 - opacity와 content hiding 제거 */
}

/* Planning Annotation (계획 생성 중 알림 카드) */
.planning-annotation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    padding: 12px 16px;
    background: linear-gradient(
        135deg,
        rgba(0, 200, 150, 0.12) 0%,
        rgba(0, 152, 254, 0.06) 100%
    );
    border: 1.5px solid rgba(0, 152, 254, 0.3);
    border-radius: 12px;
}

.planning-annotation[hidden] {
    display: none;
}

.planning-annotation__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 152, 254, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.planning-annotation__icon .material-symbols-rounded {
    font-size: 20px;
    color: #0098fe;
}

.planning-annotation__content {
    flex: 1;
    min-width: 0;
}

.planning-annotation__message {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #0077cc;
    line-height: 1.4;
}

.planning-annotation__hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--muted, #64748b);
}

.planning-annotation__cancel {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
    /* background: rgba(220, 38, 38, 0.1); */
    background: transparent;
    border: none !important;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.planning-annotation__cancel:hover {
    background: rgba(220, 38, 38, 0.18);
}

.planning-annotation__cancel:active {
    transform: scale(0.98);
}

/* Dark mode for planning annotation */
[data-theme="dark"] .planning-annotation {
    background: linear-gradient(
        135deg,
        rgba(0, 200, 150, 0.15) 0%,
        rgba(0, 152, 254, 0.08) 100%
    );
    border-color: rgba(0, 152, 254, 0.35);
}

[data-theme="dark"] .planning-annotation__message {
    color: #33e4ff;
}

[data-theme="dark"] .planning-annotation__cancel {
    background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .planning-annotation__cancel:hover {
    background: rgba(220, 38, 38, 0.25);
}

/* Done Annotation (완료된 카드 아카이브 안내) */
.done-annotation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    padding: 14px 18px;
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.1) 0%,
        rgba(74, 222, 128, 0.08) 100%
    );
    border: 1.5px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.08);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.done-annotation[hidden] {
    display: none;
}

.done-annotation__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.done-annotation__icon .material-symbols-rounded {
    font-size: 22px;
    color: #22c55e;
}

.done-annotation__content {
    flex: 1;
    min-width: 0;
}

.done-annotation__message {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #15803d;
    line-height: 1.4;
}

.done-annotation__hint {
    margin: 3px 0 0;
    font-size: 12px;
    color: #166534;
    opacity: 0.8;
}

.done-annotation__action {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #22c55e;
    border: none !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.done-annotation__action:hover {
    background: #16a34a;
}

.done-annotation__action:active {
    transform: scale(0.98);
}

.done-annotation__action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark mode for done annotation */
[data-theme="dark"] .done-annotation {
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.12) 0%,
        rgba(74, 222, 128, 0.08) 100%
    );
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .done-annotation__message {
    color: #4ade80;
}

[data-theme="dark"] .done-annotation__hint {
    color: #86efac;
}

[data-theme="dark"] .done-annotation__action {
    background: #22c55e;
}

[data-theme="dark"] .done-annotation__action:hover {
    background: #16a34a;
}

/* TODO: 제거 필요 - archive.css로 이동됨 (archiving-annotation 관련 스타일 전체) */
/* Archiving Annotation (아카이빙 진행 중) */
.archiving-annotation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    padding: 14px 18px;
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.1) 0%,
        rgba(74, 222, 128, 0.08) 100%
    );
    border: 1.5px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.08);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.archiving-annotation[hidden] {
    display: none;
}

.archiving-annotation__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.archiving-annotation__icon .material-symbols-rounded {
    font-size: 22px;
    color: #22c55e;
}

.archiving-annotation__content {
    flex: 1;
    min-width: 0;
}

.archiving-annotation__message {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #15803d;
    line-height: 1.4;
}

/* Dark mode for archiving annotation */
[data-theme="dark"] .archiving-annotation {
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.12) 0%,
        rgba(74, 222, 128, 0.08) 100%
    );
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .archiving-annotation__message {
    color: #4ade80;
}

/* ========================================
   ARCHIVING VIEW
   TODO: 제거 필요 - archive.css로 이동됨 (아래 archiving 관련 스타일 전체)
   ======================================== */
.archiving-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 8px 24px;
    height: 100%;
}

.archiving-shell {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 20px;
}

.archiving-shell--3col {
    grid-template-columns: 20fr 20fr 60fr;
}

.archiving-panel--filter {
    /* max-height: calc(100vh - 200px); */
    overflow-y: auto;
}

.archiving-panel--list {
    /* max-height: calc(100vh - 200px); */
    overflow-y: auto;
}

.archiving-panel--list .archiving-list {
    margin-top: 0;
}

.archiving-panel {
    background: var(--surface);
    border: 1px solid var(--surface--border);
    border-radius: 22px;
    padding: 20px;
    backdrop-filter: blur(var(--surface--blur));
    box-shadow: var(--shadow-sm);
}

.archiving-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.archiving-panel__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
}

.archiving-panel__subtitle {
    font-size: 13px;
    margin: 0;
    color: var(--muted);
}

.archiving-count {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(49, 130, 246, 0.12);
    color: rgba(37, 99, 235, 0.9);
    white-space: nowrap;
}

.archiving-search .field {
    margin-bottom: 12px;
}

.archiving-scope {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.archiving-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archiving-filters .dropdown {
    position: relative;
}

.archiving-filters .dropdown__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    margin-bottom: 0;
    z-index: 40;
}

.archiving-scope .dropdown {
    position: relative;
}

.archiving-scope .dropdown__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    margin-bottom: 0;
    z-index: 40;
}

.archiving-input,
.archiving-select {
    border-radius: 14px;
}

.archiving-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.archiving-card {
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.archiving-card.is-active {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.archiving-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.archiving-detail__eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.archiving-detail__eyebrow-sep {
    opacity: 0.4;
}

.archiving-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--primary, #2563eb);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.archiving-detail__back-link:hover {
    text-decoration: underline;
}

.archiving-detail__back-link .material-symbols-rounded {
    font-size: 14px;
}

.archiving-detail__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
}

.archiving-detail__subtitle {
    font-size: 13px;
    margin: 0;
    color: var(--muted);
}

.archiving-detail__project {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.55);
}

.archiving-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.archiving-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.archiving-meta-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
}

.archiving-meta-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(15, 23, 42, 0.5);
    margin: 0 0 6px;
}

.archiving-meta-card__value {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--text-content);
}

.archiving-meta-card__rows {
    display: grid;
    gap: 6px;
}

.archiving-meta-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.archiving-meta-card__key {
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.55);
}

.archiving-meta-card__people {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.archiving-persona {
    align-items: center;
}

.archiving-persona .persona__meta {
    gap: 4px;
}

.archiving-persona .persona__team {
    font-size: 13px;
}

.archiving-persona .persona__kw {
    font-size: 11px;
}

.archiving-meta-card__mono {
    font-family:
        "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    word-break: break-all;
}

.archiving-preview {
    background: rgba(15, 23, 42, 0.03);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 20px;
}

.archiving-preview__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.archiving-preview__title {
    font-size: 13px;
    font-weight: 700;
}

.archiving-preview__hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.archiving-markdown {
    background: transparent;
    border-radius: 12px;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    max-height: 320px;
    overflow: auto;
}

.archiving-history__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.archiving-history__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.archiving-history__subtitle {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}

.archiving-history__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archiving-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.85);
}

.archiving-version__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px;
}

.archiving-version__meta {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    display: flex;
    gap: 8px;
}

.archiving-version__stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.archiving-diff {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
}

.archiving-diff--add {
    color: rgba(16, 185, 129, 0.95);
    background: rgba(16, 185, 129, 0.16);
}

.archiving-diff--remove {
    color: rgba(239, 68, 68, 0.95);
    background: rgba(239, 68, 68, 0.16);
}

.archiving-empty {
    padding: 18px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.04);
    text-align: center;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.5);
}

.archiving-empty--detail {
    padding: 40px 24px;
}

body.archiving-mode .header-bar__center,
body.archiving-mode .fab-stack {
    display: none;
}

body.archiving-mode .header-bar__project-name,
body.archiving-mode .header-bar__dropdown,
body.archiving-mode .header-bar__archiving-link {
    display: none;
}

body.archiving-mode .header-bar__archiving {
    display: inline-flex;
}

@media (max-width: 1400px) {
    .archiving-shell--3col {
        grid-template-columns: 30fr 70fr;
    }

    .archiving-shell--3col .archiving-panel--filter {
        grid-row: 1;
        grid-column: 1;
    }

    .archiving-shell--3col .archiving-panel--list {
        grid-row: 2;
        grid-column: 1;
    }

    .archiving-shell--3col .archiving-panel--detail {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

@media (max-width: 1100px) {
    .archiving-shell {
        grid-template-columns: 1fr;
    }

    .archiving-shell--3col {
        grid-template-columns: 1fr;
    }

    .archiving-shell--3col .archiving-panel--detail {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 720px) {
    .archiving-filters {
        grid-template-columns: 1fr;
    }
}

/* Picker context menu z-index fix */
.picker__menu,
.archiving-filters .dropdown__menu,
.archiving-scope .dropdown__menu,
.archiving-sort-outer .dropdown__menu {
    z-index: 9999;
}

/* Archiving sort outside accordion */
.archiving-sort-outer {
    margin-bottom: 12px;
}

.archiving-sort-outer .dropdown {
    position: relative;
}

.archiving-sort-outer .dropdown__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    margin-bottom: 0;
}

/* Archiving extra settings (추가 설정 아코디언 내부) */
.archiving-extra-settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archiving-extra-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.archiving-extra-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.archiving-extra-row .dropdown {
    position: relative;
}

.archiving-extra-row .dropdown__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 9999;
}

/* ===== 태스크 로그 ===== */
.task-logs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-logs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
}

.task-logs-empty[hidden] {
    display: none;
}

.task-logs-empty__icon {
    font-size: 48px;
    color: rgba(15, 23, 42, 0.2);
    margin-bottom: 12px;
}

.task-logs-empty__text {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.5);
    margin: 0;
}

/* 로그 아이템: 1행 40px 컴팩트 레이아웃 */
.task-log-item {
    display: flex;
    align-items: center;
    gap: 0;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.02);
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
}

.task-log-item:hover {
    background: rgba(15, 23, 42, 0.05);
}

.task-log-item__text {
    font-size: 12px;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.task-log-item__text strong {
    font-weight: 600;
}

.task-log-item__sep {
    flex-shrink: 0;
    margin: 0 8px;
    color: rgba(15, 23, 42, 0.15);
    font-size: 12px;
}

.task-log-item__transition {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.task-log-item__arrow {
    font-size: 11px;
    color: var(--muted);
}

.task-log-item__st {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
}

.task-log-item__st--todo {
    color: #9ca3af;
    background: #f3f4f6;
}

.task-log-item__st--planned {
    color: #06b6d4;
    background: #cffafe;
}

.task-log-item__st--in_progress {
    color: #e84393;
    background: #fce7f3;
}

.task-log-item__st--in_review {
    color: #f97316;
    background: #fff7ed;
}

.task-log-item__st--done {
    color: #22c55e;
    background: #dcfce7;
}

.task-log-item__st--cancelled {
    color: #ef4444;
    background: #fef2f2;
    text-decoration: line-through;
}

.task-log-item__time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--muted);
}

.task-logs-load-more {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(59, 130, 246, 0.06);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
}

.task-logs-load-more:hover {
    background: rgba(59, 130, 246, 0.12);
}

.task-logs-load-more[hidden] {
    display: none;
}

/* ===== 통합 Hover Popover 시스템 ===== */
/* 모든 hover popover에 공통 적용 (task-log, meta-hint 등) */
.hover-popover {
    z-index: 1000;
    position: fixed;
    inset: unset;
    margin: 0;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(17, 24, 39, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    overflow: visible;
    animation: hintTextAppear 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* 일본어: 문자 단위 개행 허용 (공백 없이 이어지는 CJK 문자열 대응) */
:lang(ja) .hover-popover {
    word-break: normal;
}

.hover-popover:popover-open {
    display: flex;
    flex-direction: row;
    gap: 0px;
    inset: unset;
    margin: 0;
}

.hover-popover::backdrop {
    background: transparent;
}

/* Task Log용 변형 */
.hover-popover--log {
    min-width: 200px;
}

.hover-popover__row {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}

.hover-popover__label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 6px;
}

.hover-popover__badge {
    display: inline-block;
    padding: 0 5px;
    margin-right: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    vertical-align: baseline;
}

/* Meta Hint용 변형 */
.hover-popover--meta {
    min-width: 180px;
    max-width: 200px;
    padding: 8px 12px;
}

/* Field Hint용 변형 (카드 다이얼로그 필드 도움말) */
.hover-popover--field {
    min-width: 40px;
    max-width: 260px;
    padding: 8px 12px;
}

/* Agent Hint용 변형 (In Progress 카드 에이전트 말풍선) */
.hover-popover--agent {
    max-width: min(280px, calc(100vw - 24px));
}

/* Review Hint용 변형 (사람 검토 필요 여부 안내) */
.hover-popover--review {
    min-width: 120px;
    max-width: 220px;
    padding: 8px 12px;
}

.hover-popover__text {
    display: block;
}

/* Fallback: popover API 미지원 시 */
.hover-popover--visible {
    display: flex !important;
}

/* Tool Hint용 변형 (프로필 카드 내 MCP 도구명) */
.hover-popover--tool {
    min-width: auto;
    max-width: 200px;
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
}

/* ===== Profile Card Hover Popover ===== */
.hover-popover--profile {
    /* min-width: 260px; */
    /* width: 180px; */
    /* height: 240px; */

    width: 160px;
    height: 200px;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.06);
}

.profile-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

/* 접속중 뱃지 (우측 상단) */
.profile-card__online-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
    z-index: 10;
}

/* 커버 영역: 이미지 또는 아이콘만 표시 */
.profile-card__cover {
    position: relative;
    height: 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.profile-card__cover-bg {
    position: absolute;
    inset: 0;
    opacity: 0.35;
}

.profile-card__cover-icon {
    position: relative;
    z-index: 1;
    font-size: 36px !important;
    color: rgba(0, 0, 0, 0.55);
}

.profile-card__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 멤버 커버 */
.profile-card__cover--member {
    /* height: 80px; */
}

.profile-card__cover--member .profile-card__cover-bg {
    opacity: 0.35;
}

/* 아바타: 커버와 body 사이에 겹쳐서 표시 */
.profile-card__avatar-overlap {
    position: relative;
    z-index: 2;
    margin-top: -24px;
    padding: 0 16px;
}

.profile-card__avatar-overlap .avatar-agent,
.profile-card__avatar-overlap .avatar-member {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18),
        0 0 0 2px rgba(255, 255, 255, 0.8);
}

.profile-card--agent .profile-card__body {
    /* background: #fefefe00; */
    backdrop-filter: none;
    height: 100%;
}

/* body 영역 */
.profile-card__body {
    padding: 8px 16px 16px;
    bottom: 0;
    align-self: baseline;
    width: 100%;
    margin-top: auto;

    background: #fefefe00;
    backdrop-filter: blur(4px);
    height: inherit;
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
}
.profile-card__info {
    flex: 1;
    min-width: 0;
}

.profile-card--agent .profile-card__info {
    justify-content: end;
    display: flex;
    flex-direction: column;
}

.profile-card--agent .profile-card__name {
    /* color: rgba(0, 0, 0, 0.85); */
}
.profile-card__name {
    font-size: 18px;
    padding-right: 24px;
    font-weight: 200;
    color: rgba(0, 0, 0, 0.85);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.profile-card--agent .profile-card__chip {
    /* background: rgba(255, 255, 255, 0.06); */
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.7);
    backdrop-filter: none;
    width: fit-content;
}
.profile-card__chip {
    margin-bottom: 10px;
    margin-left: -2px;
    margin-top: 6px;
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    color: rgb(55 55 55 / 75%);
    background: #9e99993d;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.profile-card--member .profile-card__chip {
    position: absolute;
    top: 8px;
    left: 16px;
}

.profile-card__role-badge {
    margin-bottom: 4px;
    margin-top: 6px;
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.15);
    color: rgba(79, 70, 229, 0.9);
    white-space: nowrap;
}
.profile-card--agent .profile-card__subtitle {
}
.profile-card__subtitle {
    font-size: 10px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1.4;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 24px;
}

/* MCP 도구 섹션 */
.profile-card__tools {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.profile-card__tools-label {
    display: none;
    font-size: 10px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* ========================================
   UNIFIED COMMENTS SECTION
   ======================================== */
.unified-comments-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
}

.unified-comments-divider {
    display: none;
}

.unified-comments-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 0;
    flex-shrink: 0;
}

/* 코멘트 정렬 드롭다운 - mini-btn 스타일 기반 */
.unified-comments-sort {
    position: relative;
    display: flex;
    align-items: center;
}

.unified-comments-sort__trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    background: rgba(25, 31, 40, 0.06);
    cursor: pointer;
    border-radius: 10px;
    color: rgba(15, 23, 42, 0.74);
    font-size: 13px;
    font-weight: 600;
    transition:
        background 0.15s,
        transform 0.1s;
}

.unified-comments-sort__trigger:hover {
    background: rgba(25, 31, 40, 0.1);
}

.unified-comments-sort__trigger:active {
    transform: scale(0.95);
}

.unified-comments-sort__trigger .material-symbols-rounded {
    font-size: 18px;
}

.unified-comments-sort__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 140px;
    background: var(--bg);
    border-radius: 14px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 100;
    overflow: hidden;
    padding: 6px;
}

.unified-comments-sort__option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: rgba(15, 23, 42, 0.74);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s;
}

.unified-comments-sort__option:hover {
    background: rgba(25, 31, 40, 0.06);
}

.unified-comments-sort__option--active {
    color: #3182f6;
    background: rgba(49, 130, 246, 0.08);
}

.unified-comments-sort__option--active:hover {
    background: rgba(49, 130, 246, 0.12);
}

[data-theme="dark"] .unified-comments-sort__menu {
    background: var(--bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .unified-comments-sort__option {
    color: rgba(255, 255, 255, 0.74);
}

[data-theme="dark"] .unified-comments-sort__option:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .unified-comments-sort__option--active {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
}

.unified-comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    justify-content: flex-start;
    align-content: flex-start;
    margin-bottom: 8px;
}

.unified-comments-list:empty::after {
    content: "";
    display: none;
}

/* Comment Item - 디자인 시스템 기반 */
.unified-comment {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(25, 31, 40, 0.03);
    border-radius: 12px;
    transition: background 0.15s;
}

.unified-comment:hover {
    background: rgba(25, 31, 40, 0.06);
}

.unified-comment__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}

.unified-comment__avatar .material-symbols-rounded {
    font-size: 16px;
    color: rgba(15, 23, 42, 0.72);
}

.unified-comment__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unified-comment__body {
    flex: 1;
    min-width: 0;
}

.unified-comment__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.unified-comment__author {
    font-size: 13px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.87);
}

.unified-comment__time {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.44);
}

.unified-comment__edited {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.44);
}

.unified-comment__actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.unified-comment:hover .unified-comment__actions {
    opacity: 1;
}

.unified-comment__action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    color: rgba(15, 23, 42, 0.54);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        color 0.15s;
}

.unified-comment__action-btn:hover {
    background: rgba(25, 31, 40, 0.08);
    color: rgba(15, 23, 42, 0.74);
}

.unified-comment__action-btn .material-symbols-rounded {
    font-size: 16px;
}

.unified-comment__content {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.87);
    word-break: break-word;
}

.unified-comment__content--deleted {
    color: rgba(15, 23, 42, 0.44);
    font-style: italic;
}

.unified-comment__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.unified-comment__like-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.54);
    transition:
        background 0.15s,
        color 0.15s;
}

.unified-comment__like-btn:hover {
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.74);
}

.unified-comment__like-btn--liked {
    color: rgba(15, 23, 42, 0.54);
}

.unified-comment__like-btn--liked .material-symbols-rounded {
    color: #ef4444;
    font-weight: 700;
}

.unified-comment__like-btn .material-symbols-rounded {
    font-size: 16px;
}

.unified-comment__reply-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.54);
    transition:
        background 0.15s,
        color 0.15s;
}

.unified-comment__reply-btn:hover {
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.74);
}

.unified-comment__reply-btn .material-symbols-rounded {
    font-size: 16px;
}

/* Replies - 들여쓰기 */
.unified-comment__replies {
    margin-top: 8px;
    padding-left: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unified-comment__replies .unified-comment {
    background: rgba(25, 31, 40, 0);
    border-radius: 0px;
    border-left: 2px solid #dcdcdc;
}

.unified-comment__replies .unified-comment__avatar {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

/* Input Area - field 스타일 기반 */
.unified-comments-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(25, 31, 40, 0.04);
    border-radius: 14px;
    border: 2px solid transparent;
    transition:
        border-color 0.15s,
        background 0.15s;
}

.unified-comments-input:focus-within {
    background: rgba(25, 31, 40, 0.02);
    border-color: rgba(49, 130, 246, 0.4);
}

.unified-comments-input__avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d8d8d8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}

.unified-comments-input__avatar .material-symbols-rounded {
    font-size: 14px;
    color: inherit;
}

.unified-comments-input__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unified-comments-input__field {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.87);
    outline: none;
}

.unified-comments-input__field::placeholder {
    color: rgba(15, 23, 42, 0.44);
}

.unified-comments-input__btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: #555;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        transform 0.1s;
    box-shadow: 0 2px 8px rgb(163 163 163 / 25%);
}

.unified-comments-input__btn:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(49, 130, 246, 0.35);
}

.unified-comments-input__btn:active {
    transform: scale(0.95);
}

.unified-comments-input__btn:disabled {
    background: rgba(25, 31, 40, 0.1);
    color: rgba(15, 23, 42, 0.34);
    cursor: not-allowed;
    box-shadow: none;
}

.unified-comments-input__btn .material-symbols-rounded {
    font-size: 18px;
}

/* Replying indicator */
.unified-comments-input--replying {
    border-color: rgba(49, 130, 246, 0.4);
}

.unified-comments-replying-to {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: rgba(49, 130, 246, 0.08);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #3182f6;
}

.unified-comments-replying-to__cancel {
    margin-left: auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    color: rgba(15, 23, 42, 0.54);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        color 0.15s;
}

.unified-comments-replying-to__cancel:hover {
    background: rgba(25, 31, 40, 0.08);
    color: rgba(15, 23, 42, 0.74);
}

.unified-comments-replying-to__cancel:hover {
    background: rgba(203, 213, 225, 0.5);
    color: #475569;
}

.unified-comments-replying-to__cancel .material-symbols-rounded {
    font-size: 14px;
}

/* 3-Column mode: Comments at bottom of left area */
[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    .unified-comments-section {
    margin-top: auto;
}

[data-dialog="card"].task-theme-adaptive
    .unified-area--left
    .unified-comments-section
    .unified-comments-divider {
    display: none;
}

/* 2-Column mode: Ensure comments section is always visible */
[data-dialog="card"].task-theme-adaptive
    .dialog--col1
    .unified-comments-section {
    display: flex;
}

/* 2-Column mode (mobile): Show comments below panel content */
@media (max-width: 1023px) {
    .unified-comments-section {
        max-height: 180px;
    }
}

/* ========================================
   Review Mode - 민감 정보 검토 마스킹
   ======================================== */

/* 검토 배너 (annotation 스타일 - restricted-annotation과 동일한 패턴) */
.review-annotation {
    display: flex;
    align-items: center;
    gap: 12px;
    /* tasknote-viewer와 동일한 좌우 여백 */
    margin: 0 20px 16px 20px;
    padding: 12px 16px;
    /* background: linear-gradient(
        135deg,
        rgba(217, 119, 6, 0.12) 0%,
        rgba(217, 119, 6, 0.06) 100%
    ); */
    background-color: var(--warning-bg-1);
    /* border 제거 */
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
}

/* tasknote-editor-wrap 및 tasknote-container 내부에 있을 때 margin 조정 */
.tasknote-editor-wrap .review-annotation,
.tasknote-container .review-annotation {
    margin: 0 0 12px 0;
}

.tasknote-editor-wrap .review-annotation--inline,
.tasknote-container .review-annotation--inline {
    margin: 0 0 12px 0;
}

.tasknote-editor-wrap .review-preview-bar,
.tasknote-container .review-preview-bar {
    margin: 0 0 8px 0;
}

.review-annotation[hidden] {
    display: none;
}

.review-annotation__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.review-annotation__icon .material-symbols-rounded {
    font-size: 22px;
    color: #d97706;
}

.review-annotation__content {
    flex: 1;
    min-width: 0;
}

.review-annotation__message {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    line-height: 1.4;
}

.review-annotation__hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: #b45309;
    line-height: 1.4;
}

.review-annotation__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

[data-theme="dark"] .review-annotation {
    background: linear-gradient(
        135deg,
        rgba(217, 119, 6, 0.15) 0%,
        rgba(217, 119, 6, 0.08) 100%
    );
    border: none;
}

[data-theme="dark"] .review-annotation__message {
    color: #fcd34d;
}

[data-theme="dark"] .review-annotation__hint {
    color: #fbbf24;
}

[data-theme="dark"] .review-annotation__icon .material-symbols-rounded {
    color: #fbbf24;
}

/* MCP 알림 배너 (검토 전 상태) */
.review-annotation--info .review-annotation__hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* MCP 알림 배너 인라인 스타일 (노트 하단용) */
.review-annotation--inline {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 12px 20px 0 20px;
    border-radius: 8px;
    background: var(--warning-bg-1);
    border: none;
}

.review-annotation--inline[style*="display: flex"],
.review-annotation--inline:not([style*="display: none"]):not([hidden]) {
    display: flex;
}

.review-annotation__icon-inline {
    font-size: 18px;
    color: #d97706;
    flex-shrink: 0;
}

.review-annotation--inline .review-annotation__message {
    font-size: 12px;
    font-weight: 500;
    color: #92400e;
    margin: 0;
    white-space: nowrap;
}

.review-annotation__tools-inline {
    font-size: 11px;
    color: rgba(146, 64, 14, 0.75);
    margin-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.review-annotation--inline .btn-review--sm {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: #d97706;
    color: white;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
}

.review-annotation--inline .btn-review--sm:hover {
    background: #b45309;
}

[data-theme="dark"] .review-annotation--inline {
    background: rgba(217, 119, 6, 0.15);
}

[data-theme="dark"] .review-annotation__icon-inline {
    color: #fbbf24;
}

[data-theme="dark"] .review-annotation--inline .review-annotation__message {
    color: #fcd34d;
}

[data-theme="dark"] .review-annotation__tools-inline {
    color: rgba(252, 211, 77, 0.75);
}

/* 검토 완료 annotation (비검토자용) */
.review-annotation--completed {
    background: rgba(22, 163, 74, 0.1);
    display: flex;
}

.review-annotation--completed .review-annotation__icon-inline {
    color: #16a34a;
}

.review-annotation--completed .review-annotation__message {
    color: #166534;
}

.review-annotation--completed .review-annotation__reviewer {
    font-size: 12px;
    color: #166534;
    opacity: 0.8;
    margin-left: 4px;
}

.review-annotation--completed .review-annotation__tools-inline {
    color: #166534;
}

.review-annotation--completed .chat-msg__tool-icon {
    cursor: default;
}

.review-annotation__preview-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.review-annotation__preview-label {
    font-size: 12px;
    color: #166534;
    opacity: 0.8;
}

[data-theme="dark"] .review-annotation--completed {
    background: rgba(22, 163, 74, 0.15);
}

[data-theme="dark"]
    .review-annotation--completed
    .review-annotation__icon-inline {
    color: #4ade80;
}

[data-theme="dark"] .review-annotation--completed .review-annotation__message {
    color: #86efac;
}

[data-theme="dark"] .review-annotation--completed .review-annotation__reviewer {
    color: #86efac;
}

[data-theme="dark"]
    .review-annotation--completed
    .review-annotation__tools-inline {
    color: rgba(134, 239, 172, 0.75);
}

[data-theme="dark"] .review-annotation__preview-label {
    color: #86efac;
}

/* ========================================
   Review Banner - 통합 검토 배너
   ======================================== */

.review-banner {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 24px 18px;
    background: var(--warning-bg-1);
    border-radius: 16px;
    overflow: hidden;
}

.review-banner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    width: 100%;
    box-sizing: border-box;
}

.review-banner__info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.review-banner__icon {
    font-size: 20px;
    color: #d97706;
    flex-shrink: 0;
}

.review-banner__text {
    flex: 1;
    min-width: 0;
}

.review-banner__message {
    margin: 0;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-weight: 600;
    color: #92400e;
    line-height: 1.4;
}

.review-banner__hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: #b45309;
    line-height: 1.4;
}

.review-banner__tools {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: 4px;
}

.review-banner__tools .chat-msg__tool-icon {
    cursor: default;
}

.review-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* 미리보기 영역 */
.review-banner__preview {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 0px 24px 16px;
}

.review-banner__preview-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-banner__preview-label {
    font-size: 12px;
    margin: auto;
    color: #656a73;
    margin-right: 4px;
    font-weight: 700;
}

.review-banner__preview-chips {
    display: flex;
    gap: 4px;
}

.review-banner__chip {
    /* font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    background: transparent;
    color: #92400e;
    border: 1px solid rgba(146, 64, 14, 0.3);
    cursor: pointer;
    transition: all 0.15s ease; */
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.7);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition:
        background 0.15s,
        color 0.15s;
}

.review-banner__chip:hover {
    background: rgba(146, 64, 14, 0.1);
}

.review-banner__chip.active {
    background: #4338ca;
    color: white;
}

.review-banner__details {
    font-size: 12px;
}

.review-banner__summary {
    cursor: pointer;
    color: #717171;
    font-weight: 700;
}

.review-banner__mask-list {
    margin-top: 8px;
    padding: 8px;
    /* background: rgba(0, 0, 0, 0.03); */
    border-radius: 6px;
}

/* 알림 스타일 (검토 전 상태) */
.review-banner--alert {
    background: var(--warning-bg-1);
}

.review-banner--alert .review-banner__message {
    font-size: 12px;
    font-weight: 500;
}

/* 검토 편집 모드 스타일 */
.review-banner--editing {
    background: rgba(99, 102, 241, 0.05);
}

.review-banner--editing .review-banner__icon {
    color: #6366f1;
}

.review-banner--editing .review-banner__message {
    color: #4338ca;
}

[data-theme="dark"] .review-banner--editing {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.2) 0%,
        rgba(99, 102, 241, 0.1) 100%
    );
    border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .review-banner--editing .review-banner__icon {
    color: #818cf8;
}

[data-theme="dark"] .review-banner--editing .review-banner__message {
    color: #a5b4fc;
}

/* 검토 완료 스타일 */
.review-banner--completed {
    background: rgba(22, 163, 74, 0.1);
}

.review-banner--completed .review-banner__icon {
    color: #16a34a;
}

.review-banner--completed .review-banner__message {
    color: #166534;
}

.review-banner--completed .review-banner__preview-label {
    color: #166534;
}

.review-banner--completed .chat-msg__tool-icon {
    cursor: default;
}

.review-banner__reviewer {
    padding: 8px 16px;
    font-size: 12px;
    color: #166534;
    background: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .review-banner--completed {
    background: rgba(22, 163, 74, 0.15);
}

[data-theme="dark"] .review-banner--completed .review-banner__icon {
    color: #4ade80;
}

[data-theme="dark"] .review-banner--completed .review-banner__message {
    color: #86efac;
}

[data-theme="dark"] .review-banner--completed .review-banner__preview-label {
    color: #86efac;
}

[data-theme="dark"] .review-banner__reviewer {
    color: #86efac;
    background: rgba(0, 0, 0, 0.15);
    border-top-color: rgba(255, 255, 255, 0.05);
}

/* 검은색 버튼 */
.btn-review--dark {
    background: #1e293b;
    color: white;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.btn-review {
    font-size: 12px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;

    background: #1e293b;
    color: white;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.btn-review--dark:hover {
    background: #0f172a;
}

/* 다크 테마 */
[data-theme="dark"] .review-banner {
    background: rgba(217, 119, 6, 0.15);
}

[data-theme="dark"] .review-banner__icon {
    color: #fbbf24;
}

[data-theme="dark"] .review-banner__message {
    color: #fcd34d;
}

[data-theme="dark"] .review-banner__hint {
    color: #fbbf24;
}

[data-theme="dark"] .review-banner__preview {
    background: rgba(0, 0, 0, 0.15);
    border-top-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .review-banner__preview-label {
    color: #fcd34d;
}

[data-theme="dark"] .review-banner__chip {
    color: #fcd34d;
    border-color: rgba(252, 211, 77, 0.3);
}

[data-theme="dark"] .review-banner__chip:hover {
    background: rgba(252, 211, 77, 0.1);
}

[data-theme="dark"] .review-banner__chip.active {
    background: #fbbf24;
    color: #1e293b;
    border-color: #fbbf24;
}

[data-theme="dark"] .review-banner__summary {
    color: #fcd34d;
}

[data-theme="dark"] .btn-review--dark {
    background: #f8fafc;
    color: #1e293b;
}

[data-theme="dark"] .btn-review--dark:hover {
    background: #e2e8f0;
}

/* 검토 대기 알림 (비검토자용) */
.review-pending-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    margin: 20px;
    background: var(--warning-bg-1);
    border: none;
    border-radius: 16px;
    text-align: center;
}

.review-pending-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    background: rgba(180, 83, 9, 0.15);
    border-radius: 50%;
}

.review-pending-notice__icon .material-symbols-rounded {
    font-size: 32px;
    color: #b45309;
}

.review-pending-notice__content {
    max-width: 400px;
}

.review-pending-notice__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #78350f !important;
    margin: 0 0 8px 0;
}

.review-pending-notice__message {
    font-size: 14px;
    line-height: 1.6;
    color: #92400e;
    margin: 0 0 16px 0;
}

.review-pending-notice__tools {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.review-pending-notice__tools .chat-msg__tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(180, 83, 9, 0.12);
    border-radius: 8px;
    cursor: default;
}

.review-pending-notice__tools .chat-msg__tool-icon .material-symbols-rounded {
    font-size: 20px;
    color: #8b8e94;
}

/* 툴 아이콘 SVG 이미지 색상 통일 */
.review-pending-notice__tools .chat-msg__tool-icon img {
    opacity: 0.85;
}

[data-theme="dark"] .review-pending-notice {
    background: var(--warning-bg-1);
}

[data-theme="dark"] .review-pending-notice__icon {
    background: rgba(251, 191, 36, 0.2);
}

[data-theme="dark"] .review-pending-notice__icon .material-symbols-rounded {
    color: #f59e0b;
}

[data-theme="dark"] .review-pending-notice__title {
    color: #fcd34d;
}

[data-theme="dark"] .review-pending-notice__message {
    color: #fbbf24;
}

[data-theme="dark"] .review-pending-notice__tools .chat-msg__tool-icon {
    background: rgba(251, 191, 36, 0.15);
}

[data-theme="dark"]
    .review-pending-notice__tools
    .chat-msg__tool-icon
    .material-symbols-rounded {
    color: #f59e0b;
}

/* 미리보기 툴바 (검토 배너 아래 분리) */
.review-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 16px;
    margin: 0 0 12px 0;
    background: var(--warning-bg-1);
    border: 0px solid rgba(217, 119, 6, 0.15);
    border-radius: 8px;
    box-sizing: border-box;
}

.review-preview-bar[hidden] {
    display: none;
}

.review-preview-bar__group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-preview-bar__label {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
}

.review-preview-bar__chips {
    display: flex;
    gap: 4px;
}

.review-preview-bar__chip {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(217, 119, 6, 0.25);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #92400e;
    cursor: pointer;
    transition: all 0.15s;
}

.review-preview-bar__chip:hover {
    background: rgba(255, 255, 255, 0.95);
}

.review-preview-bar__chip.active {
    background: #d97706;
    color: white;
    border-color: #d97706;
}

.review-preview-bar__details {
    position: relative;
    display: flex;
    align-items: center;
}

.review-preview-bar__summary {
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #92400e;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.review-preview-bar__summary::-webkit-details-marker {
    display: none;
}

.review-preview-bar__summary:hover {
    background: rgba(255, 255, 255, 0.5);
}

.review-preview-bar__details[open] .review-preview-bar__summary {
    background: #d97706;
    color: white;
}

.review-preview-bar__mask-list {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 8px;
    margin-top: 4px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

[data-theme="dark"] .review-preview-bar {
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.2);
}

[data-theme="dark"] .review-preview-bar__label {
    color: #fcd34d;
}

[data-theme="dark"] .review-preview-bar__chip {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(217, 119, 6, 0.3);
    color: #fcd34d;
}

[data-theme="dark"] .review-preview-bar__chip:hover {
    background: rgba(51, 65, 85, 0.9);
}

[data-theme="dark"] .review-preview-bar__chip.active {
    background: #d97706;
    color: white;
}

[data-theme="dark"] .review-preview-bar__summary {
    background: transparent;
    color: #fcd34d;
}

[data-theme="dark"] .review-preview-bar__summary:hover {
    background: rgba(51, 65, 85, 0.5);
}

[data-theme="dark"]
    .review-preview-bar__details[open]
    .review-preview-bar__summary {
    background: #d97706;
    color: white;
}

[data-theme="dark"] .review-preview-bar__mask-list {
    background: #1e293b;
    border-color: #334155;
}

.btn-review--cancel {
    background: #eaeaea;
    color: #6a6765;
}

.btn-review--cancel:hover {
    background: rgba(217, 119, 6, 0.1);
}

.btn-review--finish {
    color: white;
}

.btn-review--finish:hover {
}

/* 마스킹 현황 아코디언 */
.mask-accordion {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.mask-accordion__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s;
}

.mask-accordion__header::-webkit-details-marker {
    display: none;
}

.mask-accordion__header:hover {
    background: #f1f5f9;
}

.mask-accordion__header .material-symbols-rounded {
    font-size: 18px;
}

.mask-accordion__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #3b82f6;
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.mask-accordion__chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.mask-accordion[open] .mask-accordion__chevron {
    transform: rotate(180deg);
}

.mask-accordion__content {
    padding: 0 16px 12px 16px;
}

.mask-sidebar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-bottom: 4px;
    font-size: 12px;
}

.mask-sidebar__item--level-1 {
    border-left: 3px solid #ef4444;
}

.mask-sidebar__item--level-2 {
    border-left: 3px solid #3b82f6;
}

.mask-sidebar__level {
    font-weight: 600;
    color: #64748b;
    font-size: 10px;
    min-width: 28px;
}

.mask-sidebar__text {
    flex: 1;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mask-sidebar__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.15s;
}

.mask-sidebar__remove:hover {
    background: #fee2e2;
    color: #ef4444;
}

.mask-sidebar__remove .material-symbols-rounded {
    font-size: 14px;
}

/* AI 메시지 헤더 (검토 버튼 포함) */
.chat-msg__header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 0 0 6px 0;
    margin-bottom: 4px;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */
}

.chat-msg__role {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.chat-msg__time {
    font-size: 10px;
    color: #94a3b8;
    margin-left: auto;
}

.chat-msg__review-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 8px 10px;
    background: transparent;

    /* color: white; */
    color: var(--warning);
    font-weight: 700;
    border: 2px solid var(--warning);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    height: 42px;
    cursor: pointer;
    transition: all 0.15s;
}

.chat-msg__review-btn:hover {
    filter: brightness(1.1);
}

.chat-msg__review-btn .material-symbols-rounded {
    font-size: 15px;
    font-weight: 700;
}

/* 검토 중인 메시지 강조 */
.chat-item[data-msg-id].editor-msg--reviewing {
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* 검토 모드에서 chat-list 레이아웃 */
.chat-list--review-mode {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.chat-list--review-mode .chat-item.editor-msg--reviewing {
    flex: 1;
    max-width: 100%;
}

.chat-list--review-mode .chat-item.editor-msg--reviewing .chat-bubble {
    max-width: 100%;
}

/* 검토 완료된 메시지 */
.chat-item--reviewed {
    border-left: 3px solid #22c55e;
}

/* 메시지 푸터 (1줄 구성) */
.chat-msg__footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

/* 푸터 행 - 좌우 양쪽 정렬 */
.chat-msg__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

/* 좌측 그룹 (검토자 정보 + 도구 아이콘) */
.chat-msg__footer-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
}

/* 우측 그룹 (검토 완료 + 미리보기) */
.chat-msg__footer-right {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.chat-msg__footer .chat-msg__time {
    display: none;
    font-size: 10px;
    color: #94a3b8;
}

/* 사용된 도구 아이콘들 */
.chat-msg__tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-msg__tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: default;
}

.chat-msg__tool-icon .material-symbols-rounded {
    font-size: 18px;
    font-weight: 400;
}

.chat-msg__tool-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* 검토자 정보 */
.chat-msg__reviewer-info {
    font-size: 11px;
    color: #aaaaaa;
    font-style: italic;
}

[data-theme="dark"] .chat-msg__tool-icon {
    color: #94a3b8;
}

[data-theme="dark"] .chat-msg__reviewer-info {
    color: #fcd34d;
}

/* 뷰어 선택 드롭다운 - chip 스타일과 유사하게 */
.chat-viewer-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-weight: 700;
    padding-right: 26px;
    background: rgba(25, 31, 40, 0.06);
    border: none;
    border-radius: 12px;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url(
        data:image/svg + xml,
        %3Csvgxmlns="http://www.w3.org/2000/svg"width="12"height="12"viewBox="0 0 24 24"fill="none"stroke="%2364748b"stroke-width="2"%3E%3Cpathd="M6 9l6 6 6-6"/%3E%3C/svg%3E
    );
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.chat-viewer-select:hover {
    background: rgba(25, 31, 40, 0.1);
    /* border-color: rgba(148, 163, 184, 0.5); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.chat-viewer-select:focus {
    outline: none;
    /* border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); */
}

/* 검토 완료 뱃지 - chip 스타일과 유사하게 */
.chat-msg__reviewed-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    /* background: rgba(34, 197, 94, 0.7); */
    background: none;
    border: 0px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
    /* color: #fff; */
    color: rgba(34, 197, 94, 1);
}

.chat-msg__reviewed-badge .material-symbols-rounded {
    font-size: 15px;
    font-weight: 700;
    /* color: #fff; */
    color: rgba(34, 197, 94, 1);
}

.chat-msg__reviewed-badge--pending {
    color: rgba(245, 158, 11, 1);
}
.chat-msg__reviewed-badge--pending .material-symbols-rounded {
    color: rgba(245, 158, 11, 1);
}

/* 보기 옵션 라벨 */
.chat-msg__viewer-label {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.56);
    margin-left: 4px;
}

/* 태스크 노트 검토 푸터 — chat-msg__footer 공용 클래스 사용, 위치 보정만 */
.tasknote-content .chat-msg__footer[data-tasknote-footer] {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .tasknote-content .chat-msg__footer[data-tasknote-footer] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

/* 보기 옵션 툴바 (review-banner 아래) */
.review-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 16px;
    font-size: 12px;
    color: #64748b;
}

.review-preview-toolbar__label {
    font-weight: 600;
}

.review-preview-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.review-preview-toolbar__btn:hover {
    background: #f1f5f9;
}

.review-preview-toolbar__btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* 비활성화된 링크 스타일 */
.disabled-link {
    color: #6366f1;
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: default;
}

/* 테스트용 검토 모드 트리거 버튼 (다이얼로그 내부) */
.review-mode-test-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-mode-test-btn:hover {
    filter: brightness(1.1);
}

.review-mode-test-btn .material-symbols-rounded {
    font-size: 16px;
}

/* ========== 조회가능 멤버 '나만' 옵션 숨김 (추후 사용 예정) ========== */
.permission-option[data-permission-mode="me_only"] {
    display: none;
}

/* ========================================
   HEADER MORE BUTTON (프로젝트 페이지 이동)
   ======================================== */

.header-bar__more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(15, 23, 42, 0.56);
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.15s,
        color 0.15s;
}

.header-bar__more-btn:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-content);
}

.header-bar__more-btn .material-symbols-rounded {
    font-size: 22px;
}

[data-theme="dark"] .header-bar__more-btn {
    color: rgba(255, 255, 255, 0.56);
}

[data-theme="dark"] .header-bar__more-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-content);
}

/* ========================================
   INBOX BUTTON & DROPDOWN
   ======================================== */

.inbox-button {
    position: relative;
    display: flex;
    align-items: center;
}

.inbox-button__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(15, 23, 42, 0.56);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.inbox-button__trigger:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-content);
}

.inbox-button__trigger[aria-expanded="true"] {
    background: rgba(15, 23, 42, 0.1);
    color: var(--text-content);
}

.inbox-button__icon {
    font-size: 22px;
}

/* Badge (red dot with count) */
.inbox-button__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: #ef4444;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.35);
    animation: inbox-badge-pulse 2s ease-in-out infinite;
}

@keyframes inbox-badge-pulse {
    0%,
    100% {
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.35);
    }

    50% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    }
}

/* Dropdown */
.inbox-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--surface);
    backdrop-filter: blur(var(--surface--blur));
    -webkit-backdrop-filter: blur(var(--surface--blur));
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.inbox-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.inbox-dropdown__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-content);
}

.inbox-dropdown__mark-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(15, 23, 42, 0.5);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.inbox-dropdown__mark-all:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--accent);
}

/* Filter Chips */
.inbox-filter-chips {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.inbox-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.55);
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}

.inbox-filter-chip:hover {
    background: rgba(15, 23, 42, 0.1);
    color: rgba(15, 23, 42, 0.75);
}

.inbox-filter-chip--active {
    background: rgba(49, 130, 246, 0.1);
    color: var(--accent);
    border-color: rgba(49, 130, 246, 0.2);
}

.inbox-filter-chip--active:hover {
    background: rgba(49, 130, 246, 0.15);
    color: var(--accent);
}

.inbox-dropdown__list {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
}

.inbox-dropdown__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: rgba(15, 23, 42, 0.4);
    font-size: 13px;
}

.inbox-dropdown__footer {
    padding: 8px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    text-align: center;
}

.inbox-dropdown__load-more {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(49, 130, 246, 0.08);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.inbox-dropdown__load-more:hover {
    background: rgba(49, 130, 246, 0.14);
}

/* Inbox Item */
.inbox-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.inbox-item:hover {
    background: rgba(15, 23, 42, 0.04);
}

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

/* Unread indicator */
.inbox-item__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    margin-top: 6px;
}

.inbox-item--unread .inbox-item__indicator {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.15);
}

.inbox-item--urgent .inbox-item__indicator {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    animation: inbox-urgent-pulse 1.5s ease-in-out infinite;
}

@keyframes inbox-urgent-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.1);
    }
}

.inbox-item__content {
    flex: 1;
    min-width: 0;
}

.inbox-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.inbox-item__type {
    display: flex;
    align-items: center;
}

.inbox-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.6);
}

.inbox-type-icon--mention {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.inbox-type-icon--status {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.inbox-type-icon--assigned {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.inbox-type-icon--comment {
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
}

.inbox-type-icon--reply {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.inbox-type-icon--archived {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.inbox-type-icon--task-created {
    background: rgba(232, 67, 147, 0.12);
    color: #e84393;
}

/* 상태 변경 아이콘 - 텍스트가 길어서 width auto */
.inbox-type-icon--status-todo,
.inbox-type-icon--status-planned,
.inbox-type-icon--status-in-progress,
.inbox-type-icon--status-in-review,
.inbox-type-icon--status-done,
.inbox-type-icon--status-cancelled,
.inbox-type-icon--status-default {
    width: auto;
    padding: 0 6px;
    font-size: 9px;
    white-space: nowrap;
}

.inbox-type-icon--status-todo {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.inbox-type-icon--status-planned {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.inbox-type-icon--status-in-progress {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.inbox-type-icon--status-in-review {
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
}

.inbox-type-icon--status-done {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.inbox-type-icon--status-cancelled {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.inbox-type-icon--status-default {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.inbox-item__time {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
    flex-shrink: 0;
}

.inbox-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.inbox-item--unread .inbox-item__title {
    color: #0f172a;
}

.inbox-item__body {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.inbox-item__actor {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
}

/* MCP Review Pending - 주황색 배경과 경고 스타일 */
.inbox-item--mcp-review {
    background: rgba(245, 158, 11, 0.12);
    border-left: 3px solid #f59e0b;
}

.inbox-item--mcp-review:hover {
    background: rgba(245, 158, 11, 0.18);
}

.inbox-item--mcp-review .inbox-item__indicator {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    animation: inbox-mcp-pulse 1.5s ease-in-out infinite;
}

@keyframes inbox-mcp-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.15);
    }
}

.inbox-item--mcp-review .inbox-item__title {
    color: #92400e;
    font-weight: 700;
}

.inbox-type-icon--mcp-review {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    width: 20px;
    height: 20px;
}

.inbox-type-icon .material-symbols-rounded {
    font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .inbox-dropdown {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 56px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ==========================================================================
   Just Chat - 플로팅 AI 채팅 (Glassmorphism + Expansion)
   ========================================================================== */

/* Backdrop overlay - 채팅 시작 후 확장 모드 */
.just-chat__backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
    opacity: 0;
    transition:
        background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.just-chat__backdrop--active {
    background: rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    opacity: 1;
}

.just-chat {
    position: fixed;
    width: 100%;
    bottom: 82px;
    z-index: 1000;
}

.just-chat[hidden] {
    display: none;
}

/* 인라인 모드: Home 콘텐츠 영역에 직접 배치 (워크벤치 프롬프트 스타일) */
.just-chat--inline {
    position: relative;
    bottom: auto;
    width: auto;
    z-index: auto;
    margin-top: 100px;
}

/* 위젯 그리드 로드 전 Just Chat 숨김 (포탈 전 원래 위치에서 깜빡임 방지) */
.pov-view--widget-grid .just-chat--inline:not(.just-chat--in-widget) {
    opacity: 0;
    pointer-events: none;
}
.pov-view--widget-grid .widget-grid-container--ready ~ .just-chat--inline:not(.just-chat--in-widget) {
    opacity: 1;
    pointer-events: auto;
}
.just-chat--in-widget {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 위젯 그리드 모드에서 Just Chat 하단 고정 (위젯 내부가 아닐 때만) */
.pov-view--widget-grid .just-chat--inline:not(.just-chat--in-widget) {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 260px - 48px); /* sidebar 너비 + 양쪽 패딩 */
    max-width: 800px;
    margin-top: 0;
    z-index: 20;
}

/* 위젯 그리드 모드에서 Just Chat 백드롭 */
.pov-view--widget-grid .just-chat__backdrop {
    position: fixed;
}

/* 인라인 모드: backdrop-filter 제거 → overflow:visible 시 자식 클리핑 방지 */
.just-chat--inline .just-chat__panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
}

/* 인라인 모드: 헤더/메시지 영역 숨김 (프롬프트 입력만 표시) */
.just-chat--inline .just-chat__header--expand-only {
    display: none;
}

.just-chat--inline .just-chat__messages--expand-only {
    display: none;
}

/* 인라인 모드: 사이드바 숨김 */
.just-chat--inline .just-chat__sidebar {
    display: none;
}

/* 인라인 확장 모드: 사이드바 표시 */
.just-chat--inline.just-chat--expanded .just-chat__sidebar {
    display: flex;
}

/* ========== 풀스크린 모드 (Chat 페이지) ========== */
/* Chat 페이지에서 사용 - 페이지 사이드바를 사용하고 JustChat은 메시지 영역만 담당 */

/* 풀스크린 모드: 페이지 전체를 차지 */
.just-chat--fullscreen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.just-chat--fullscreen .just-chat__panel {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    animation: none;
    margin: 0;
    background: var(--bg, #f8fafc);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .just-chat--fullscreen .just-chat__panel {
    background: var(--bg, #0f172a);
}

/* 풀스크린 모드: 헤더 */
.just-chat--fullscreen .just-chat__header {
    display: flex;
    padding: 12px 20px;
    border-bottom: 1px solid var(--surface--border);
    background: var(--surface);
    flex-shrink: 0;
}

/* 풀스크린 모드: 내부 사이드바 숨김 (페이지 사이드바 사용) */
.just-chat--fullscreen .just-chat__sidebar {
    display: none !important;
}

.just-chat--fullscreen .just-chat__main {
    display: contents;
}

/* 풀스크린 모드: 메시지 영역 */
.just-chat--fullscreen .just-chat__messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg);
    min-height: 0;
}

/* 풀스크린 모드: 입력 영역 */
.just-chat--fullscreen .just-chat__input-area {
    border-top: 1px solid var(--surface--border);
    background: var(--surface);
    padding: 16px 20px;
    flex-shrink: 0;
}

.just-chat--fullscreen .just-chat__input-wrap {
    max-width: 800px;
    margin: 0 auto;
}

/* 풀스크린 모드: 환영 메시지 */
.just-chat--fullscreen .just-chat__welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 모바일 풀스크린 모드 */
@media (max-width: 768px) {
    .just-chat--fullscreen .just-chat__messages {
        padding: 12px;
    }

    .just-chat--fullscreen .just-chat__input-area {
        padding: 12px;
    }
}

/* 인라인 모드: 에이전트 선택 행 표시 */
.just-chat__inline-agent-row {
    display: flex;
    align-items: center;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    margin: 8px;
}

/* 인라인 모드: 삭제 버튼 기본 숨김 (메시지 있을 때만 표시) */
.just-chat--inline:not(.just-chat--expanded) .just-chat__inline-agent-row [data-just-chat-clear] {
    display: none;
}
.just-chat--inline:not(.just-chat--expanded).just-chat--has-messages .just-chat__inline-agent-row [data-just-chat-clear] {
    display: inline-flex;
}

.just-chat__agent-btn--compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-title, #0f172a);
    transition: background 0.15s;
}

.just-chat__agent-btn--compact:hover {
    background: rgba(15, 23, 42, 0.04);
}

.just-chat__agent-btn--compact .just-chat__agent-name {
    font-weight: 500;
    white-space: nowrap;
}

.just-chat__agent-avatar--sm {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.just-chat__agent-avatar--sm .material-symbols-rounded {
    font-size: 18px;
}

.just-chat__agent-avatar--sm .avatar-agent {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.just-chat__agent-btn--compact .just-chat__agent-chev {
    font-size: 18px;
    color: var(--muted, rgba(15, 23, 42, 0.4));
    transition: transform 0.2s;
}

/* 인라인 에이전트 행의 메뉴는 아래로 열기 */
.just-chat__inline-agent-row .just-chat__agent-menu {
    top: calc(100% + 6px);
    bottom: auto;
}

/* 확장 모드: 인라인 에이전트 행 숨기고, 헤더/메시지 표시 */
.just-chat--inline.just-chat--expanded .just-chat__header--expand-only {
    display: flex;
}

.just-chat--inline.just-chat--expanded .just-chat__messages--expand-only {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.just-chat--inline.just-chat--expanded .just-chat__inline-agent-row {
    display: none;
}

/* 인라인 확장 모드: backdrop-filter 복원 (overflow:hidden이므로 안전) */
.just-chat--inline.just-chat--expanded .just-chat__panel {
    backdrop-filter: blur(var(--surface--blur));
    -webkit-backdrop-filter: blur(var(--surface--blur));
    background: var(--surface);
}

/* 인라인 모드 확장: 화면 정중앙 고정 오버레이 전환 */
.just-chat--inline.just-chat--expanded {
    position: fixed;
    inset: 0;
    margin-top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* 확장 모드: 화면 정중앙 고정 오버레이 */
.just-chat--expanded {
    inset: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.just-chat--expanded .just-chat__panel {
    pointer-events: auto;
}

/* 채팅 패널 - glassmorphism */
.just-chat__panel {
    margin: auto;
    width: 640px;
    max-height: calc(100dvh - 120px);
    background: var(--surface);
    backdrop-filter: blur(var(--surface--blur));
    -webkit-backdrop-filter: blur(var(--surface--blur));
    border: 1px solid var(--surface--border);
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.18),
        0 12px 26px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* 트랜지션/애니메이션 제거됨 */
}

/* 확장 모드 패널: 화면의 많은 영역 차지 */
.just-chat--expanded .just-chat__panel {
    width: min(800px, calc(100vw - 80px));
    max-height: min(85vh, calc(100dvh - 60px));
    overflow: hidden;
    box-shadow:
        0 32px 80px rgba(15, 23, 42, 0.24),
        0 16px 40px rgba(15, 23, 42, 0.12);
}

/* ========== 다중 세션 모드 (ChatGPT 스타일) ========== */

.just-chat--multi-session {
    inset: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.just-chat--multi-session .just-chat__panel {
    width: min(1100px, calc(100vw - 48px));
    max-height: min(90vh, calc(100dvh - 48px));
    height: min(800px, calc(100dvh - 48px));
    flex-direction: row;
    overflow: hidden;
}

/* 사이드바 */
.just-chat__sidebar {
    width: 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.02);
    border-right: 1px solid var(--surface--border);
    border-radius: 18px 0 0 18px;
    padding: 12px;
}

[data-theme="dark"] .just-chat__sidebar {
    background: rgba(255, 255, 255, 0.02);
}

/* 사이드바 헤더 - Chat 페이지와 동일 */
.just-chat__sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px 4px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.just-chat__sidebar-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.just-chat__sidebar-header-left .material-symbols-rounded {
    font-size: 18px;
}

.just-chat__sidebar-header-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #e84393;
    background: rgba(232, 67, 147, 0.1);
    padding: 1px 7px;
    border-radius: 8px;
}

/* New 버튼 - Chat 페이지와 동일 */
.just-chat__new-chat-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.55);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.15s;
}

.just-chat__new-chat-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--primary);
}

.just-chat__new-chat-btn .material-symbols-rounded {
    font-size: 14px;
}

[data-theme="dark"] .just-chat__new-chat-btn {
    color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .just-chat__new-chat-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary);
}

/* 세션 목록 - Chat 페이지와 동일 */
.just-chat__session-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.just-chat__session-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: var(--muted);
    text-align: center;
}

.just-chat__session-empty .material-symbols-rounded {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.4;
}

.just-chat__session-empty p {
    margin: 0;
    font-size: 12px;
}

/* 세션 아이템 - Chat 페이지와 동일한 크기 */
.just-chat__session-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.just-chat__session-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .just-chat__session-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.just-chat__session-item--active {
    background: rgba(108, 93, 241, 0.08);
}

[data-theme="dark"] .just-chat__session-item--active {
    background: rgba(108, 93, 241, 0.15);
}

.just-chat__session-item-content {
    flex: 1;
    min-width: 0;
}

.just-chat__session-item-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .just-chat__session-item-title {
    color: rgba(255, 255, 255, 0.85);
}

.just-chat__session-item-time {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
    margin-top: 1px;
}

[data-theme="dark"] .just-chat__session-item-time {
    color: rgba(255, 255, 255, 0.45);
}

.just-chat__session-item-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
}

.just-chat__session-item:hover .just-chat__session-item-delete {
    opacity: 1;
}

.just-chat__session-item-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.just-chat__session-item-delete .material-symbols-rounded {
    font-size: 14px;
}

/* 메인 영역 */
.just-chat__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* 다중 세션 모드에서 메시지 영역 */
.just-chat--multi-session .just-chat__messages {
    flex: 1;
    min-height: 0;
}

/* 다중 세션 모드에서 입력 영역 */
.just-chat--multi-session .just-chat__input-area {
    border-top: 1px solid var(--surface--border);
}

/* 다중 세션 모드에서 헤더 */
.just-chat--multi-session .just-chat__header {
    border-bottom: 1px solid var(--surface--border);
}

/* 다중 세션 모드에서 확장 상태 처리 불필요 (이미 크게 열림) */
.just-chat--multi-session.just-chat--expanded .just-chat__panel {
    width: min(1100px, calc(100vw - 48px));
    max-height: min(90vh, calc(100dvh - 48px));
}

/* 모바일 세션 메뉴 토글 버튼 - 데스크톱에서 숨김 */
.just-chat__mobile-sessions-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-title);
    cursor: pointer;
    transition: background 0.15s ease;
}

.just-chat__mobile-sessions-btn:hover {
    background: rgba(15, 23, 42, 0.06);
}

.just-chat__mobile-sessions-btn .material-symbols-rounded {
    font-size: 22px;
}

/* 모바일 세션 오버레이 */
.just-chat__mobile-sessions {
    display: none;
}

.just-chat__mobile-sessions[hidden] {
    display: none !important;
}

/* 모바일에서 사이드바 숨김 */
@media (max-width: 768px) {
    .just-chat--multi-session .just-chat__panel {
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    .just-chat__sidebar {
        display: none;
    }

    .just-chat__main {
        border-radius: 0;
    }

    /* 모바일 세션 토글 버튼 표시 */
    .just-chat__mobile-sessions-btn {
        display: flex;
    }

    /* 모바일 세션 오버레이 */
    .just-chat__mobile-sessions {
        display: flex;
        position: absolute;
        inset: 0;
        z-index: 100;
        flex-direction: column;
        background: var(--surface);
    }

    .just-chat__mobile-sessions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid var(--surface--border);
        font-size: 16px;
        font-weight: 600;
        color: var(--text-title);
    }

    .just-chat__mobile-sessions-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-title);
        cursor: pointer;
    }

    .just-chat__mobile-sessions-close:hover {
        background: rgba(15, 23, 42, 0.06);
    }

    .just-chat__mobile-sessions-header-actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .just-chat__mobile-new-chat-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-title);
        cursor: pointer;
    }

    .just-chat__mobile-new-chat-btn:hover {
        background: rgba(15, 23, 42, 0.06);
    }

    .just-chat__new-chat-btn--mobile {
        margin: 12px 16px;
    }

    .just-chat__mobile-session-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 8px 16px;
    }
}

/* Mobile full-screen chat */
.m-just-chat {
    position: fixed;
    inset: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

.m-just-chat .just-chat__panel {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
}

.m-just-chat .just-chat__close-btn,
.m-just-chat + .just-chat__backdrop,
.m-just-chat ~ .just-chat__backdrop,
.m-chat-host .just-chat__backdrop {
    display: none;
}

/* 헤더 */
.just-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.just-chat__header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* 에이전트 선택 영역 */
.just-chat__agent-selector {
    position: relative;
    flex: 1;
    min-width: 0;
}

.just-chat__agent-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.just-chat__agent-btn:hover {
    background: rgba(15, 23, 42, 0.04);
}

.just-chat__agent-selector[data-open="true"] .just-chat__agent-btn {
    background: rgba(15, 23, 42, 0.06);
}

.just-chat__agent-btn .avatar-agent {
    flex-shrink: 0;
}

.just-chat__agent-btn .persona__meta {
    flex: 1;
    min-width: 0;
}

.just-chat__agent-btn .persona__team {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.just-chat__agent-btn .persona__kw {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.just-chat__agent-chev {
    font-size: 18px;
    color: var(--muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.just-chat__agent-selector[data-open="true"] .just-chat__agent-chev {
    transform: rotate(180deg);
}

/* 에이전트 피커 메뉴 - glassmorphism dropdown */
.just-chat__agent-menu {
    position: absolute;
    top: inherit;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 100;
    display: none;
    min-width: 240px;
    max-width: 320px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 14px;
    background: var(--surface);
    backdrop-filter: blur(var(--surface--blur));
    -webkit-backdrop-filter: blur(var(--surface--blur));
    border: 1px solid var(--surface--border);
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.16),
        0 8px 16px rgba(15, 23, 42, 0.08);
}
.just-chat--expanded .just-chat__agent-menu {
    top: calc(100% + 6px) !important;
    bottom: inherit;
}
.just-chat__agent-selector[data-open="true"] .just-chat__agent-menu {
    display: block;
}

/* 에이전트 메뉴 위치 자동 조정 - 아래로 표시 */
.just-chat__agent-menu.just-chat__agent-menu--below {
    top: calc(100% + 6px);
    bottom: auto;
}

/* 에이전트 메뉴 위치 자동 조정 - 위로 표시 */
.just-chat__agent-menu.just-chat__agent-menu--above {
    top: auto;
    bottom: calc(100% + 6px);
}

/* 에이전트 옵션 */
.just-chat__agent-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.just-chat__agent-option:hover {
    background: rgba(15, 23, 42, 0.05);
}

.just-chat__agent-option--selected {
    background: rgba(15, 23, 42, 0.08);
}

.just-chat__agent-option--selected:hover {
    background: rgba(15, 23, 42, 0.1);
}

.just-chat__agent-option .avatar-agent {
    flex-shrink: 0;
}

.just-chat__agent-option .persona__meta {
    flex: 1;
    min-width: 0;
}

.just-chat__agent-option .persona__team {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    display: flex;
    align-items: center;
    gap: 4px;
}

.just-chat__agent-option .persona__kw {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.just-chat__agent-option .persona__position {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
}

.just-chat__header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

/* Just Chat 세션 토큰 사용량 */
.just-chat__token-usage {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--surface--blur);
    font-size: 11px;
    color: var(--muted);
    margin-right: 4px;
}

.just-chat__token-icon {
    font-size: 11px;
    color: var(--muted);
}

.just-chat__token-values {
    display: flex;
    align-items: center;
    gap: 4px;
}

.just-chat__token-in,
.just-chat__token-out {
    display: flex;
    align-items: center;
    gap: 2px;
}

.just-chat__token-sep {
    color: var(--muted);
    opacity: 0.5;
}

.just-chat__token-values [data-just-chat-token-input],
.just-chat__token-values [data-just-chat-token-output] {
    font-weight: 600;
    color: var(--text-content);
}

.just-chat__cookie-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    color: var(--text-content);
}

/* JustChat 토큰 tooltip - 아래로 표시 (헤더 overflow 때문) */
.just-chat__token-usage .token-usage-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
}

.just-chat__token-usage .token-usage-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--surface-overlay, #1e293b);
}

.just-chat__header-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        color 0.15s;
}

.just-chat__header-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-content);
}

.just-chat__header-btn .material-symbols-rounded {
    font-size: 20px;
}

/* 메시지 영역 */
.just-chat__messages {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    flex-direction: column;
    gap: 16px;
}

/* 확장 모드: 메시지 영역 크게 확장 */
.just-chat--expanded .just-chat__messages {
    display: flex;
    min-height: 0;
    padding: 24px 28px;
}

/* 환영 메시지 */
.just-chat__welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    gap: 10px;
}

.just-chat__welcome-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.just-chat__welcome-icon .material-symbols-rounded {
    font-size: 24px;
    color: var(--muted);
}

.just-chat__welcome-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-title);
    margin: 0;
}

.just-chat__welcome-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

/* 메시지 아이템 */
.just-chat__message {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: justChatMessageIn 0.2s ease;
}

@keyframes justChatMessageIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 사용자 메시지 - 버블 스타일 (오른쪽 정렬) */
.just-chat__message--user {
    align-self: flex-end;
    align-items: flex-end;
    max-width: 85%;
}

.just-chat__message--user .just-chat__message-bubble {
    padding: 10px 14px;
    background: #111827;
    color: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    border-bottom-right-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 사용자 메시지 본문 (Home Redirect Loading 등에서 사용) */
.just-chat__message--user .just-chat__message-body {
    padding: 10px 14px;
    background: #111827;
    color: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    border-bottom-right-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: min(600px, 100%);
    width: fit-content;
}

.just-chat__message--user .just-chat__message-time {
    font-size: 10px;
    color: var(--muted);
    padding: 0 4px;
}

/* 사용자 메시지 sender 정보 헤더 (Just Chat) */
.just-chat__message-sender {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    justify-content: flex-end;
}

.just-chat__message-sender .avatar-member--sm {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--avatar-bg, var(--accent-light, #e0e7ff));
    overflow: hidden;
}

.just-chat__message-sender .avatar-member--sm .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.just-chat__message-sender .avatar-member--sm .avatar-initials {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #4f46e5);
}

.just-chat__message-sender-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.just-chat__message-sender-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.just-chat__message-sender-meta {
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

.just-chat__message-sender .just-chat__message-time {
    font-size: 10px;
    color: var(--muted);
    margin-right: auto;
}

/* AI 메시지 - 마크다운 본문 스타일 (전체 너비) */
.just-chat__message--assistant {
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.just-chat__message--assistant:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* AI 메시지 헤더 (에이전트 정보) */
.just-chat__message-agent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.just-chat__message-agent .avatar-agent {
    flex-shrink: 0;
}

.just-chat__message-agent-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.just-chat__message-agent-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
}

.just-chat__message-agent-name .persona__chip {
    font-size: 10px;
}

.just-chat__message-agent-meta {
    font-size: 11px;
    color: var(--muted);
}

/* AI 메시지 본문 */
.just-chat__message--assistant .just-chat__message-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-content);
    word-break: break-word;
}

/* 타이핑 인디케이터 */
.just-chat__typing {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
}

/* msg-avatar가 포함된 경우 가로 배치 */
.just-chat__typing:has(> .just-chat__msg-avatar) {
    flex-direction: row;
    align-items: center;
    padding: 8px 0;
}

.just-chat__typing-dots {
    display: flex;
    gap: 3px;
    padding-left: 2px;
}

/* typing-dots 내 span 기본 dot 스타일 */
.just-chat__typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted, rgba(15, 23, 42, 0.35));
    animation: justChatTypingDot 1.4s ease-in-out infinite;
}

.just-chat__typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.just-chat__typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.just-chat__typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: justChatTypingDot 1.4s ease-in-out infinite;
}

.just-chat__typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.just-chat__typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes justChatTypingDot {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

/* 홈에서 채팅으로 이동 시 로딩 UI */
.just-chat__home-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    animation: justChatHomeLoadingFadeIn 0.3s ease-out;
}

@keyframes justChatHomeLoadingFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 메시지 예약 인디케이터 */
.just-chat__scheduled-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.08);
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    font-size: 13px;
    color: var(--accent, #6366f1);
    animation: scheduledIndicatorIn 0.2s ease;
}

.just-chat__scheduled-indicator[hidden] {
    display: none;
}

.just-chat__scheduled-indicator .material-symbols-rounded {
    font-size: 18px;
    color: var(--accent, #6366f1);
}

.just-chat__scheduled-text {
    flex: 1;
}

.just-chat__scheduled-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--muted, #64748b);
    transition: background 0.15s, color 0.15s;
}

.just-chat__scheduled-cancel:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-content);
}

.just-chat__scheduled-cancel .material-symbols-rounded {
    font-size: 16px;
}

@keyframes scheduledIndicatorIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 다크 테마 예약 인디케이터 */
[data-theme="dark"] .just-chat__scheduled-indicator {
    background: rgba(99, 102, 241, 0.15);
    border-bottom-color: rgba(99, 102, 241, 0.25);
}

[data-theme="dark"] .just-chat__scheduled-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 입력 영역 - workbench 스타일 참고 */
.just-chat__input-area {
    padding: 0;
    border-top: none;
    flex-shrink: 0;
}

.just-chat__input-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
}

.just-chat__input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.just-chat--expanded .just-chat__input {
    border-top: 1px solid #dddddd;
    border-bottom: none;
    border-left: none;
    border-right: none;
}
.just-chat__input {
    flex: 1;
    min-height: 64px;
    max-height: 140px;
    padding: 12px 16px;
    padding-right: 48px;

    border: none;
    border-radius: 0;
    /* background: var(--surface-component-1); */
    background: transparent;
    /* backdrop-filter: blur(var(--surface-component-3--blur)); */
    font-size: 16px;
    line-height: 1.5;
    resize: none;
    outline: none;
    transition: background 0.15s;
}

.just-chat__input:focus {
    /* background: var(--surface-component-1); */
    outline: none;
    box-shadow: none;
    /* background: var(--surface); */
}

.just-chat__input::placeholder {
    color: var(--muted);
}

/* 하단 도구 행 */
.just-chat__tool-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 8px 14px;
    background-color: transparent;
    /* background: var(--surface); */
    /* backdrop-filter: blur(var(--surface-component-3--blur)); */
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.just-chat__tool-hint {
    font-size: 11px;
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.15s;
}

.just-chat__input-wrap:focus-within .just-chat__tool-hint {
    opacity: 1;
}

.just-chat__tool-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* 도구 버튼 스타일 (icon-btn--mini 참고) */
.just-chat__tool-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.56);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.just-chat__tool-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-content);
}

.just-chat__tool-btn .material-symbols-rounded {
    font-size: 18px;
    margin-right: 2px;
}

/* 태스크 생성 버튼 (tool-btn 파란색 오버라이드) */
.just-chat__tool-btn--create-task {
    color: #3b82f6;

    background: rgb(235 240 250);
    font-weight: 600;
    margin-left: 2px;
}

.just-chat__tool-btn--create-task:hover {
    color: #2563eb;
    background: rgb(222 231 249);
}

.just-chat__tool-btn--create-task .material-symbols-rounded {
    color: #3b82f6;
}

.just-chat__tool-btn--create-task:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .just-chat__tool-btn--create-task {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
}

[data-theme="dark"] .just-chat__tool-btn--create-task:hover {
    color: #93bbfd;
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"]
    .just-chat__tool-btn--create-task
    .material-symbols-rounded {
    color: #60a5fa;
}

/* ── Create Task 로딩 상태 ── */

/* 입력 영역 숨김 */
.just-chat--creating-task .just-chat__input-area {
    display: none !important;
}

/* 태스크 생성 버튼 숨김 */
.just-chat--creating-task .just-chat__tool-btn--create-task {
    display: none !important;
}

/* 메시지 영역 숨김 (공간도 제거) */
.just-chat--creating-task .just-chat__messages {
    display: none !important;
}

/* 에이전트 영역 숨김 (인라인 모드) */
.just-chat--creating-task .just-chat__inline-agent-row {
    display: none !important;
}

/* 헤더 전체 숨김 (확장 모드 에이전트 선택 포함) */
.just-chat--creating-task .just-chat__header--expand-only {
    display: none !important;
}

/* 태스크 생성 중 패널 너비 축소 */
.just-chat--creating-task .just-chat__panel {
    width: min(400px, calc(100vw - 80px));
}

/* 로딩 오버레이 (패널 direct child, 입력 영역 자리에 표시) */
.just-chat__creating-overlay {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 20px;
}

.just-chat--creating-task .just-chat__creating-overlay {
    display: flex;
    flex: 1;
    min-height: 320px;
    animation: createTaskFadeIn 0.4s ease-out 0.15s both;
}

/* 에이전트 아바타 컨테이너 */
.just-chat__creating-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.just-chat__creating-avatar .avatar-agent {
    width: 84px !important;
    height: 84px !important;
    border-radius: 24px;
    animation: persona-busy 2.4s cubic-bezier(0.2, 0, 0, 1) infinite;
    transform-origin: 50% 55%;
}

.just-chat__creating-avatar .avatar-agent .avatar-img {
    border-radius: 24px;
}

.just-chat__creating-avatar .avatar-agent .material-symbols-rounded {
    font-size: 42px;
}

/* 아바타 주변 링 이펙트 */
.just-chat__creating-avatar::before,
.just-chat__creating-avatar::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 33px;
    border: 2px solid var(--accent, #6c5df1);
    opacity: 0;
    animation: createTaskRing 2.4s ease-out infinite;
}

.just-chat__creating-avatar::after {
    animation-delay: 1.2s;
}

/* 텍스트 */
.just-chat__creating-text {
    text-align: center;
}

.just-chat__creating-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-title);
    margin: 0 0 4px;
}

.just-chat__creating-desc {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

/* 프로그레스 바 */
.just-chat__creating-progress {
    width: 120px;
    height: 3px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

[data-theme="dark"] .just-chat__creating-progress {
    background: rgba(255, 255, 255, 0.08);
}

.just-chat__creating-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent, #6c5df1);
    border-radius: 2px;
    animation: createTaskProgress 12s ease-in-out forwards;
}

/* 힌트 말풍선 (아바타 위) */
.just-chat__creating-hint {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-title, #0f172a);
    background: var(--surface-component, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--surface--border, rgba(15, 23, 42, 0.08));
    border-radius: 12px;
    padding: 8px 14px;
    margin: 0;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    opacity: 0;
}

/* 단일 메시지: 기존처럼 fade-in 후 유지 */
.just-chat__creating-hint--single {
    animation: createTaskFadeIn 0.5s ease-out 1s both;
}

/* 두 메시지 순환: 첫 번째 (0~2.4s 보이고 2.4s~4.8s 숨김, 1s 딜레이) */
.just-chat__creating-hint--cycle-a {
    animation: createHintCycleA 4.8s ease-in-out 1s both infinite;
}

/* 두 메시지 순환: 두 번째 (0~2.4s 숨기고 2.4s~4.8s 보임, 1s 딜레이) */
.just-chat__creating-hint--cycle-b {
    animation: createHintCycleB 4.8s ease-in-out 1s both infinite;
}

/* 말풍선 꼬리 (아래 삼각형) */
.just-chat__creating-hint::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--surface-component, rgba(255, 255, 255, 0.95));
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.06));
}

[data-theme="dark"] .just-chat__creating-hint {
    background: var(--surface-component, rgba(30, 41, 59, 0.95));
    color: var(--text-title, #f1f5f9);
    border-color: var(--surface--border, rgba(255, 255, 255, 0.1));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .just-chat__creating-hint::after {
    border-top-color: var(--surface-component, rgba(30, 41, 59, 0.95));
}

/* 상태 텍스트 (아바타 아래) */
.just-chat__creating-status {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted, rgba(15, 23, 42, 0.5));
    margin: 4px 0 0;
    text-align: center;
    opacity: 0;
    animation: createTaskFadeIn 0.5s ease-out 0.6s both;
}

/* 롤링 안내 텍스트 (아바타 아래에 표시) */
.just-chat__creating-overlay .just-chat__creating-hint {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted, rgba(15, 23, 42, 0.45));
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 16px 0 0;
    white-space: normal;
    box-shadow: none;
    text-align: center;
    max-width: 280px;
    line-height: 1.5;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    animation: createTaskFadeIn 0.5s ease-out 0.8s both;
}

.just-chat__creating-overlay .just-chat__creating-hint::after {
    display: none;
}

/* Keyframes */
@keyframes createTaskAvatarPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(108, 93, 241, 0.15);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 4px 24px rgba(108, 93, 241, 0.18);
    }
}

@keyframes createTaskRing {
    0% {
        transform: scale(0.85);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes createTaskProgress {
    0% {
        width: 0%;
    }
    15% {
        width: 25%;
    }
    40% {
        width: 55%;
    }
    70% {
        width: 78%;
    }
    100% {
        width: 92%;
    }
}

@keyframes createTaskFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 말풍선 순환 A: 전반부(0~50%) 보이고 후반부(50~100%) 숨김 */
@keyframes createHintCycleA {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(4px) scale(0.97);
    }
    6% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    44% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px) scale(0.97);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(4px) scale(0.97);
    }
}

/* 말풍선 순환 B: 전반부(0~50%) 숨기고 후반부(50~100%) 보임 */
@keyframes createHintCycleB {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(4px) scale(0.97);
    }
    50% {
        opacity: 0;
        transform: translateX(-50%) translateY(4px) scale(0.97);
    }
    56% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    94% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px) scale(0.97);
    }
}

/* 전송 버튼 */
.just-chat__send-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #3182f6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(49, 130, 246, 0.25);
    transition:
        background 0.15s,
        transform 0.1s,
        opacity 0.15s;
}

.just-chat__send-btn:hover:not(:disabled) {
    background: #1d6ce3;
}

.just-chat__send-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.just-chat__send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.just-chat__send-btn .material-symbols-rounded {
    font-size: 18px;
}

/* 예약 상태 전송 버튼 */
.just-chat__send-btn--scheduled {
    background: #6366f1;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

.just-chat__send-btn--scheduled:hover:not(:disabled) {
    background: #4f46e5;
}

/* 닫기 버튼 (확장 모드에서 표시) */
.just-chat__close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.just-chat__close-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-content);
}

.just-chat--expanded .just-chat__close-btn {
    display: flex;
}

/* 마크다운 렌더링 (본문 스타일) */
.just-chat__message-body--markdown {
    line-height: 1.7;
}

.just-chat__message-body--markdown p {
    margin: 0 0 12px;
}

.just-chat__message-body--markdown p:last-child {
    margin-bottom: 0;
}

.just-chat__message-body--markdown code {
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "SF Mono", Monaco, monospace;
    font-size: 13px;
}

.just-chat__message-body--markdown pre {
    background: rgba(15, 23, 42, 0.04);
    padding: 12px 14px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.just-chat__message-body--markdown pre code {
    background: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

.just-chat__message-body--markdown ul,
.just-chat__message-body--markdown ol {
    margin: 12px 0;
    padding-left: 24px;
}

.just-chat__message-body--markdown li {
    margin: 6px 0;
}

.just-chat__message-body--markdown h1,
.just-chat__message-body--markdown h2,
.just-chat__message-body--markdown h3 {
    margin: 16px 0 8px;
    font-weight: 500;
    color: var(--text-title);
}

.just-chat__message-body--markdown h1 {
    font-size: 18px;
}

.just-chat__message-body--markdown h2 {
    font-size: 16px;
}

.just-chat__message-body--markdown h3 {
    font-size: 15px;
}

.just-chat__message-body--markdown blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.02);
    border-radius: 0 8px 8px 0;
    color: var(--muted);
}

.just-chat__message-body--markdown a {
    color: var(--accent);
    text-decoration: none;
}

.just-chat__message-body--markdown a:hover {
    text-decoration: underline;
}

.just-chat__message-body--markdown table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    margin: 12px 0;
    font-size: 13px;
    display: block;
    overflow-x: auto;
}

.just-chat__message-body--markdown th,
.just-chat__message-body--markdown td {
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 8px 12px;
    text-align: left;
}

.just-chat__message-body--markdown th {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 600;
}

/* ========== Just Chat 테마 스타일 ========== */

/* --- Simple Style --- */
.just-chat--simple .just-chat__messages {
    background: transparent;
}

.just-chat--simple .just-chat__message {
    padding: 4px 0;
}

.just-chat--simple .just-chat__message-header {
    display: none;
}

.just-chat--simple .just-chat__message--assistant .just-chat__message-body {
    background: transparent;
    padding: 0;
}

.just-chat--simple .just-chat__message-agent-name {
    display: inline;
    font-weight: 600;
    color: #7c3aed;
}

.just-chat--simple .just-chat__message-agent-name::after {
    content: ":";
    margin-right: 6px;
}

/* --- iMessage Style --- */
.just-chat--imessage .just-chat__messages {
    padding: 12px;
}

.just-chat--imessage .just-chat__message {
    max-width: 80%;
}

.just-chat--imessage .just-chat__message-header {
    display: none;
}

.just-chat--imessage .just-chat__message--assistant {
    align-self: flex-start;
}

.just-chat--imessage .just-chat__message--assistant .just-chat__message-body {
    background: #e5e5ea;
    color: #000;
    border-radius: 18px;
    padding: 10px 14px;
}

.just-chat--imessage .just-chat__message--user {
    align-self: flex-end;
}

.just-chat--imessage .just-chat__message--user .just-chat__message-body {
    background: #007aff;
    color: #fff;
    border-radius: 18px;
    padding: 10px 14px;
}

/* --- KakaoTalk Style --- */
.just-chat--kakaotalk .just-chat__panel {
    background: #b2c7d9;
}

.just-chat--kakaotalk .just-chat__messages {
    background: #b2c7d9;
    padding: 12px;
}

.just-chat--kakaotalk .just-chat__message {
    max-width: 80%;
}

.just-chat--kakaotalk .just-chat__message--assistant {
    align-self: flex-start;
}

.just-chat--kakaotalk .just-chat__message--assistant .just-chat__message-body {
    background: #fff;
    color: #000;
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.just-chat--kakaotalk .just-chat__message--user {
    align-self: flex-end;
}

.just-chat--kakaotalk .just-chat__message--user .just-chat__message-body {
    background: #fef01b;
    color: #000;
    border-radius: 12px;
    padding: 8px 12px;
}

.just-chat--kakaotalk .just-chat__message-agent-avatar {
    border-radius: 16px;
}

/* --- Discord Style --- */
.just-chat--discord .just-chat__panel {
    background: #313338;
}

.just-chat--discord .just-chat__header {
    background: #313338;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.just-chat--discord .just-chat__messages {
    background: #313338;
}

.just-chat--discord .just-chat__message {
    padding: 8px 16px;
}

.just-chat--discord .just-chat__message:hover {
    background: rgba(0, 0, 0, 0.06);
}

.just-chat--discord .just-chat__message-agent-name {
    color: #f2f3f5;
}

.just-chat--discord .just-chat__message--assistant .just-chat__message-body {
    color: #dbdee1;
    background: transparent;
}

.just-chat--discord .just-chat__message-time {
    color: #949ba4;
}

.just-chat--discord .just-chat__input-wrap {
    background: #383a40;
    border-radius: 8px;
    margin: 0 16px 16px;
}

.just-chat--discord .just-chat__input {
    background: transparent;
    color: #dbdee1;
}

.just-chat--discord .just-chat__input::placeholder {
    color: #949ba4;
}

.just-chat--discord .just-chat__welcome {
    color: #dbdee1;
}

.just-chat--discord .just-chat__welcome-title {
    color: #f2f3f5;
}

.just-chat--discord .just-chat__welcome-desc {
    color: #949ba4;
}

/* ── 공용 Just Chat 모듈 - 에이전트/메시지 세부 스타일 ── */

.just-chat__agent-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 130, 246, 0.1);
    flex-shrink: 0;
    overflow: hidden;
}

.just-chat__agent-avatar .avatar-agent {
    width: 100%;
    height: 100%;
}

.just-chat__agent-avatar .material-symbols-rounded {
    font-size: 18px;
    color: #000000;
}

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

.just-chat__agent-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.just-chat__agent-desc {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.just-chat__agent-option-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.just-chat__agent-option-avatar .avatar-agent {
    width: 100%;
    height: 100%;
}

.just-chat__agent-option-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.just-chat__agent-option-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.88);
}

.just-chat__agent-option-desc {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
}

/* ── 메시지 레이아웃: msg-avatar가 포함된 경우 가로 배치 ── */
.just-chat__message:has(> .just-chat__msg-avatar) {
    flex-direction: row;
    gap: 10px;
    padding: 8px 0;
}

.just-chat__message--user:has(> .just-chat__msg-avatar) {
    flex-direction: row-reverse;
}

/* ── 메시지 세부 요소 (msg-*) ── */

.just-chat__msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
}

.just-chat__msg-avatar .avatar-agent {
    width: 100%;
    height: 100%;
}

.just-chat__msg-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.just-chat__msg-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.just-chat__message--user .just-chat__msg-content {
    align-items: flex-end;
}

.just-chat__msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.just-chat__message--user .just-chat__msg-header {
    flex-direction: row-reverse;
}

.just-chat__msg-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
}

.just-chat__msg-time {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.35);
}

.just-chat__msg-body {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-content, rgba(15, 23, 42, 0.85));
    word-break: break-word;
    overflow-wrap: anywhere;
}

.just-chat__message--user .just-chat__msg-body {
    background: rgba(49, 130, 246, 0.08);
    padding: 8px 12px;
    border-radius: 12px 2px 12px 12px;
    max-width: 85%;
    width: fit-content;
    /* 모바일에서 min-width 충돌 방지: 480px 이하에서는 auto 사용 */
    min-width: auto;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 데스크톱에서만 최소 너비 적용 */
@media (min-width: 481px) {
    .just-chat__message--user .just-chat__msg-body {
        min-width: min(480px, 100%);
    }
}

.just-chat--expanded .just-chat__message--assistant .just-chat__msg-body {
    background: transparent;
    padding: 0;
    border-radius: 0;
    max-width: 100%;
    line-height: 1.7;
}

.just-chat__message--assistant .just-chat__msg-body {
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 12px;
    border-radius: 2px 12px 12px 12px;
    max-width: 85%;
}

/* 다크 테마: 사용자 메시지 */
[data-theme="dark"] .just-chat__message--user .just-chat__msg-body {
    background: rgba(99, 102, 241, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

/* 다크 테마: 어시스턴트 메시지 */
[data-theme="dark"] .just-chat__message--assistant .just-chat__msg-body {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.just-chat--expanded .just-chat__message--user .just-chat__msg-body {
    max-width: 100%;
    width: fit-content;
}

.just-chat__message--error .just-chat__msg-body {
    /* color: #ef4444; */
    /* font-weight: 600; */
}

/* 시스템 메시지 - 중앙 정렬, 연한 배경 */
.just-chat__message--system {
    align-self: center;
    max-width: 90%;
}

.just-chat__message--system .just-chat__msg-content {
    align-items: center;
}

.just-chat__message--system .just-chat__msg-body {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    padding: 10px 16px;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    color: rgba(55, 65, 81, 0.9);
}

.just-chat__message--system .just-chat__msg-body a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 500;
}

.just-chat__message--system .just-chat__msg-body a:hover {
    text-decoration: underline;
}

/* 다크 테마: 시스템 메시지 */
[data-theme="dark"] .just-chat__message--system .just-chat__msg-body {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .just-chat__message--system .just-chat__msg-body a {
    color: #818cf8;
}

.just-chat__msg-body p {
    margin: 0 0 8px;
}
.just-chat__msg-body p:last-child {
    margin-bottom: 0;
}

.just-chat__msg-body code {
    font-size: 12px;
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: "SF Mono", Monaco, monospace;
}

.just-chat__msg-body pre {
    background: rgba(15, 23, 42, 0.04);
    padding: 12px 14px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 13px;
    margin: 12px 0;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.just-chat__msg-body pre code {
    background: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* 다크 테마: 코드 블록 */
[data-theme="dark"] .just-chat__msg-body code {
    background: rgba(255, 255, 255, 0.1);
    color: #f472b6;
}

[data-theme="dark"] .just-chat__msg-body pre {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .just-chat__msg-body pre code {
    color: rgba(255, 255, 255, 0.9);
}

.just-chat__msg-body ul,
.just-chat__msg-body ol {
    margin: 12px 0;
    padding-left: 24px;
}

.just-chat__msg-body li {
    margin: 6px 0;
}

.just-chat__msg-body h1,
.just-chat__msg-body h2,
.just-chat__msg-body h3 {
    margin: 16px 0 8px;
    font-weight: 500;
    color: var(--text-title, rgba(15, 23, 42, 0.95));
}

.just-chat__msg-body h1 {
    font-size: 18px;
}
.just-chat__msg-body h2 {
    font-size: 16px;
}
.just-chat__msg-body h3 {
    font-size: 15px;
}

.just-chat__msg-body blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.02);
    border-radius: 0 8px 8px 0;
    color: rgba(15, 23, 42, 0.6);
}

.just-chat__msg-body a {
    color: var(--accent, #3182f6);
    text-decoration: none;
}

.just-chat__msg-body a:hover {
    text-decoration: underline;
}

.just-chat__msg-body table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    margin: 12px 0;
    font-size: 13px;
    display: block;
    overflow-x: auto;
}

.just-chat__msg-body th,
.just-chat__msg-body td {
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 8px 12px;
    text-align: left;
}

.just-chat__msg-body th {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 600;
}

/* ── 본문 내 이미지/비디오 (마크다운, 아티팩트 등) ── */

.just-chat__msg-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
}

.just-chat__msg-body video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
}

/* ── 첨부파일 (메시지 내) ── */

.just-chat__msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.just-chat__msg-attachment {
    border-radius: 8px;
    overflow: hidden;
}

.just-chat__msg-attachment--image img {
    max-width: 200px;
    max-height: 160px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
}

.just-chat__msg-attachment--video video {
    max-width: 200px;
    max-height: 160px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
}

.just-chat__msg-attachment--file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 8px;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.65);
}

.just-chat__msg-attachment--file .material-symbols-rounded {
    font-size: 16px;
}

/* ── 메시지 액션 버튼 ── */

.just-chat__msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.just-chat__message:hover .just-chat__msg-actions {
    opacity: 1;
}

.just-chat__msg-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.5);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.just-chat__msg-action:hover {
    background: rgba(15, 23, 42, 0.12);
    color: rgba(15, 23, 42, 0.8);
}

.just-chat__msg-action .material-symbols-rounded {
    font-size: 16px;
}

.just-chat__msg-action--disabled,
.just-chat__msg-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* 반응형 */
@media (max-width: 768px) {
    .just-chat {
        right: 12px;
        bottom: 76px;
    }

    .just-chat__panel {
        width: calc(100vw - 24px);
        max-width: 380px;
        max-height: calc(100dvh - 120px);
    }

    .just-chat--expanded .just-chat__panel {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 60px);
    }
}

/* 640px 이하에서 Just Chat 숨김 (모바일에서는 별도 UI 사용) */
@media (max-width: 640px) {
    .just-chat,
    .just-chat__backdrop {
        display: none !important;
    }
}

/* ===========================================
   Token Usage Display
   =========================================== */
.token-usage-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-component-2);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text);
}

.token-usage-icon {
    font-size: 18px;
    color: var(--muted);
}

.token-usage-breakdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.token-usage-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.token-usage-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.token-usage-separator {
    color: var(--muted);
    font-size: 12px;
}

[data-token-usage-input],
[data-token-usage-output] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

/* 쿠키 숫자 공통 스타일 - 항상 700 굵게 표시 */
[data-cookie-usage] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.token-usage-unit {
    color: var(--muted);
    font-size: 12px;
}

/* Token Usage Hover Tooltip */
.token-usage-display--hoverable {
    position: relative;
    cursor: pointer;
}

.token-usage-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-overlay, #1e293b);
    color: var(--text-on-dark, #f8fafc);
    border-radius: var(--radius-md, 8px);
    padding: 10px 14px;
    min-width: 140px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.15s,
        visibility 0.15s;
    pointer-events: none;
}

.token-usage-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--surface-overlay, #1e293b);
}

.token-usage-display--hoverable:hover .token-usage-tooltip:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

.token-usage-tooltip__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
}

.token-usage-tooltip__row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.token-usage-tooltip__label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    font-weight: 500;
}

.token-usage-tooltip__value {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    color: #f8fafc;
}

/* ===========================================
   Document Display Mode (3열 레이아웃)
   - 1열: 태스크 정보 (제목, 상세, 계획, 메타데이터)
   - 2열: MD 파일 리뷰 영역 (아티팩트 리스트 포함)
   - 3열: 프롬프트 채팅 (에이전트/유저 아바타 포함)
   =========================================== */

/* 다이얼로그를 document-display 모드로 확장 */
[data-dialog="card"].task-theme-document .dialog__panel {
    max-width: 1800px;
    width: 98vw;
    height: 95vh;
}

[data-dialog="card"].task-theme-document .dialog__body {
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* document-display 모드: dialog__body를 2열 그리드 컨테이너로 사용 */
/* 1열: 콘텐츠 영역 (남은 공간)  */
/* 2열: 프롬프트 채팅 (25%~33%, 최소 360px) */
[data-dialog="card"].task-theme-document .dialog__body {
    display: grid;
    grid-template-columns: 1fr minmax(25%, 33%);
    gap: 0;
    overflow: hidden;
}

/* document-display 모드 (넓은 화면): 기존 dialog-grid를 contents로 설정하고 col1만 숨김 */
[data-dialog="card"].task-theme-document .dialog-grid {
    display: contents;
}

/* document-display 모드 (넓은 화면): 기존 col1 숨김 */
[data-dialog="card"].task-theme-document .dialog-grid [data-card-col="col1"] {
    display: none;
}

/* document-display 모드 (넓은 화면): 기존 2열 모드 UI 숨김 */
[data-dialog="card"].task-theme-document [data-unified-tabs-default] {
    display: none;
}

[data-dialog="card"].task-theme-document [data-unified-body] {
    display: none;
}

/* document-display 모드: col2 숨김 (2열 레이아웃) */
[data-dialog="card"].task-theme-document .dialog-grid [data-card-col="col2"] {
    display: none;
}

/* task-detail-grid를 contents로 설정 */
[data-dialog="card"].task-theme-document .task-detail-grid {
    display: contents;
}

/* task-detail__content (콘텐츠 영역)는 첫번째 열 */
[data-dialog="card"].task-theme-document .task-detail__content {
    grid-column: 1;
    grid-row: 1;
}

/* task-detail__chat (채팅 영역)는 두번째 열 */
[data-dialog="card"].task-theme-document .task-detail__chat {
    grid-column: 2;
    grid-row: 1;
}

/* 기본적으로 task-detail-grid 숨김 */
.task-detail-grid {
    display: none;
}

/* ===== 탭 공통 스타일 (unified-tab-chip 스타일 통일) ===== */
.task-detail__settings-tabs,
.task-detail__chat-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    background: transparent;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.task-detail__settings-tab,
.task-detail__chat-tab {
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    background: rgba(25, 31, 40, 0.06);
    color: rgba(15, 23, 42, 0.7);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition:
        background 0.15s,
        color 0.15s;
}

.task-detail__settings-tab:hover,
.task-detail__chat-tab:hover {
    background: rgba(25, 31, 40, 0.1);
}

.task-detail__settings-tab[aria-selected="true"],
.task-detail__chat-tab[aria-selected="true"] {
    background: rgba(17, 24, 39, 0.92);
    color: rgba(255, 255, 255, 0.96);
}

.task-detail__settings-tab .material-symbols-rounded,
.task-detail__chat-tab .material-symbols-rounded {
    font-size: 16px;
    vertical-align: middle;
}

/* 탭 뱃지 */
.task-detail__chat-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.task-detail__chat-tab-badge[hidden] {
    display: none;
}

.task-detail__chat-tab[aria-selected="true"] .task-detail__chat-tab-badge {
    background: rgba(255, 255, 255, 0.25);
}

.task-detail__settings-panel {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.task-detail__settings-panel[hidden] {
    display: none;
}

/* ===== 채팅 영역 ===== */
.task-detail__chat-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.task-detail__chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.task-detail__chat-panel[hidden] {
    display: none;
}

.task-detail__chat-panel .comments-list,
.task-detail__chat-panel .chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    min-height: 60px;
}

.task-detail__comment-input {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
}

/* 정보 패널 (채팅 영역 내) */
.task-detail__info-panel {
    flex: 1;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
}

.task-detail__info-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-info-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.chat-info-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chat-info-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-info-value--vertical {
    flex-direction: column;
    align-items: flex-start;
}

.chat-info__agent,
.chat-info__member {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.chat-info__agent .text-muted,
.chat-info__member .text-muted {
    font-size: 12px;
}

.select-wrap--sm .select--sm {
    padding: 4px 24px 4px 8px;
    font-size: 13px;
    min-height: 28px;
}

.task-detail__comment-input .textarea {
    flex: 1;
    min-height: 36px;
    resize: none;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.task-detail__comment-input .textarea:focus {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.task-detail__comment-input .btn {
    flex-shrink: 0;
    align-self: flex-end;
}

/* 코멘트 목록 스타일 */
.task-detail__empty {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.task-detail__comment {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}

.task-detail__comment + .task-detail__comment {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.task-detail__comment-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    overflow: hidden;
}

.task-detail__comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-detail__comment-avatar .material-symbols-rounded {
    font-size: 18px;
}

.task-detail__comment-body {
    flex: 1;
    min-width: 0;
}

.task-detail__comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.task-detail__comment-author {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-content);
}

.task-detail__comment-time {
    font-size: 11px;
    color: var(--muted);
}

.task-detail__comment-content {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-content);
    white-space: pre-wrap;
    word-break: break-word;
}

.task-detail__prompt-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.task-detail__prompt-section .chat-list {
    flex: 1;
    padding: 12px 16px;
}

/* Document Display - 1열: 태스크 정보 패널 */
.task-detail__settings {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
    background: rgba(248, 250, 252, 0.5);
}

.task-detail__header {
    margin-bottom: 16px;
}

.task-detail__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-content);
    margin: 0 0 8px;
    word-break: break-word;
}

.task-detail__meta-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-detail__meta-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.task-detail__meta-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.task-detail__meta-value {
    font-size: 14px;
    color: var(--text-content);
    line-height: 1.4;
}

.task-detail__meta-value--muted {
    color: var(--muted);
    font-style: italic;
}

/* 상태 배지 */
.task-detail__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--accent-light, #e0e7ff);
    color: var(--accent, #4f46e5);
}

/* 주제/라벨 표시 */
.task-detail__topic {
    display: flex;
    align-items: center;
    gap: 6px;
}

.task-detail__labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.task-detail__label-chip {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

/* 계획 섹션 */
.task-detail__plans {
    margin-top: 16px;
}

.task-detail__plans-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.task-detail__plans-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-detail__plan-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 13px;
    line-height: 1.4;
}

.task-detail__plan-item--done {
    opacity: 0.6;
}

.task-detail__plan-item--done .task-detail__plan-text {
    text-decoration: line-through;
}

.task-detail__plan-check {
    font-size: 16px;
    color: var(--success, #22c55e);
    flex-shrink: 0;
}

.task-detail__plan-check--pending {
    color: var(--muted);
}

.task-detail__plan-text {
    flex: 1;
    color: var(--text-content);
}

/* Document Display - 2열: MD 리뷰 영역 */
.task-detail__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(248, 250, 252, 0.3);
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.task-detail__content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.8);
    flex-shrink: 0;
}

.task-detail__content-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.task-detail__artifact-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-detail__artifact-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.7);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.task-detail__artifact-tab:hover {
    background: rgba(15, 23, 42, 0.1);
}

.task-detail__artifact-tab[aria-selected="true"] {
    background: var(--accent);
    color: #fff;
}

.task-detail__artifact-tab .tab-icon {
    font-size: 16px;
}

.task-detail__artifact-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    background: #fff;
    color: var(--text-content);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s;
}

.task-detail__artifact-list-btn:hover {
    border-color: var(--accent);
    background: rgba(49, 130, 246, 0.04);
}

.task-detail__artifact-list-btn .material-symbols-rounded {
    font-size: 18px;
}

.task-detail__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
}

/* 마크다운 콘텐츠 스타일 */
.task-detail__markdown {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-content);
}

.task-detail__markdown h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(15, 23, 42, 0.08);
}

.task-detail__markdown h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 12px;
}

.task-detail__markdown h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 10px;
}

.task-detail__markdown p {
    margin: 0 0 12px;
}

.task-detail__markdown ul,
.task-detail__markdown ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.task-detail__markdown li {
    margin-bottom: 4px;
}

.task-detail__markdown code {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.06);
    font-family: "Fira Code", "Consolas", monospace;
    font-size: 0.9em;
}

.task-detail__markdown pre {
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
    overflow-x: auto;
}

.task-detail__markdown pre code {
    padding: 0;
    background: transparent;
}

.task-detail__markdown blockquote {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-left: 4px solid var(--accent);
    background: rgba(49, 130, 246, 0.04);
    border-radius: 0 8px 8px 0;
}

.task-detail__markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
}

.task-detail__markdown th,
.task-detail__markdown td {
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    text-align: left;
}

.task-detail__markdown th {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 600;
}

/* 빈 상태 */
.task-detail__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--muted);
}

.task-detail__empty-icon {
    font-size: 48px;
    opacity: 0.5;
}

.task-detail__empty-text {
    font-size: 14px;
}

/* Document Display - 3열: 채팅 영역 */
.task-detail__chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.3);
}

.task-detail__chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.8);
}

.task-detail__chat-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-content);
    display: flex;
    align-items: center;
    gap: 6px;
}

.task-detail__chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 채팅 메시지 - 에이전트 (좌측) */
.task-detail__chat-item {
    display: flex;
    gap: 10px;
    max-width: 95%;
}

.task-detail__chat-item--agent {
    align-self: flex-start;
    flex-direction: row;
}

.task-detail__chat-item--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* 아바타 스타일 */
.task-detail__avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--avatar-bg, #6b7280);
    color: #fff;
    font-size: 14px;
    overflow: hidden;
}

.task-detail__avatar--agent {
    border-radius: 12px;
}

.task-detail__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-detail__avatar .material-symbols-rounded {
    font-size: 20px;
}

/* 메시지 콘텐츠 */
.task-detail__chat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.task-detail__chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.task-detail__chat-item--user .task-detail__chat-header {
    flex-direction: row-reverse;
}

.task-detail__chat-name {
    font-weight: 600;
    color: var(--text-content);
}

.task-detail__chat-time {
    color: var(--muted);
}

.task-detail__chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.task-detail__chat-item--agent .task-detail__chat-bubble {
    background: #fff;
    color: var(--text-content);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-top-left-radius: 4px;
}

.task-detail__chat-item--user .task-detail__chat-bubble {
    background: var(--accent);
    color: #fff;
    border-top-right-radius: 4px;
}

/* 마크다운 채팅 버블 */
.task-detail__chat-bubble--markdown {
    background: transparent;
    border: none;
    padding: 0;
}

.task-detail__chat-bubble--markdown p {
    margin: 0 0 8px;
}

.task-detail__chat-bubble--markdown p:last-child {
    margin-bottom: 0;
}

.task-detail__chat-bubble--markdown code {
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 0.9em;
}

.task-detail__chat-bubble--markdown pre {
    margin: 8px 0;
    padding: 12px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
    overflow-x: auto;
}

.task-detail__chat-bubble--markdown pre code {
    padding: 0;
    background: transparent;
}

/* 채팅 입력 영역 */
.task-detail__chat-input-wrap {
    padding: 12px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}

.task-detail__chat-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.task-detail__chat-input {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 14px;
    border: 1.5px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    font-size: 14px;
    resize: none;
    background: rgba(248, 250, 252, 0.8);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.task-detail__chat-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1);
}

.task-detail__chat-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.task-detail__chat-send:hover {
    background: var(--accent-hover);
}

.task-detail__chat-send .material-symbols-rounded {
    font-size: 20px;
}

.task-detail__chat-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.task-detail__chat-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.task-detail__chat-tool-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-content);
}

.task-detail__chat-tool-btn .material-symbols-rounded {
    font-size: 16px;
}

/* 아티팩트 목록 드롭다운 */
.task-detail__artifact-dropdown {
    position: relative;
}

.task-detail__artifact-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
    z-index: 100;
    display: none;
}

.task-detail__artifact-dropdown[data-open="true"] .task-detail__artifact-menu {
    display: block;
}

.task-detail__artifact-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.task-detail__artifact-menu-item:hover {
    background: rgba(49, 130, 246, 0.06);
}

.task-detail__artifact-menu-item[aria-selected="true"] {
    background: rgba(49, 130, 246, 0.1);
}

.task-detail__artifact-menu-item .material-symbols-rounded {
    font-size: 20px;
    color: var(--accent);
}

.task-detail__artifact-menu-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.task-detail__artifact-menu-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-detail__artifact-menu-item-type {
    font-size: 11px;
    color: var(--muted);
}

/* 반응형 레이아웃 */
@media (max-width: 1400px) {
    [data-dialog="card"].task-theme-document .task-detail-grid {
        grid-template-columns: 240px 1fr 360px;
    }
}

@media (max-width: 719px) {
    /* 좁은 화면 (720px 미만): task-theme-document 모드에서 기존 2열 모드 UI로 복원 */

    /* task-detail-grid 숨김 (3열 레이아웃 비활성화) */
    [data-dialog="card"].task-theme-document .task-detail-grid {
        display: none !important;
    }

    /* dialog-grid를 기존 2열 flex 레이아웃으로 복원 */
    [data-dialog="card"].task-theme-document .dialog-grid {
        display: flex !important;
        flex-direction: column;
    }

    /* col1 표시 (좌측: 업무정보, 아티팩트 등) */
    [data-dialog="card"].task-theme-document
        .dialog-grid
        [data-card-col="col1"] {
        display: block !important;
        grid-column: unset;
        grid-row: unset;
    }

    /* col2 숨김 (720px 미만에서는 unified-tabs로 통합됨) */
    [data-dialog="card"].task-theme-document
        .dialog-grid
        [data-card-col="col2"] {
        display: none !important;
    }

    /* 기존 unified-tabs 표시 */
    [data-dialog="card"].task-theme-document [data-unified-tabs-default] {
        display: flex !important;
    }

    /* 기존 unified-body 표시 */
    [data-dialog="card"].task-theme-document [data-unified-body] {
        display: block !important;
    }

    /* dialog 패널 너비 조정 */
    [data-dialog="card"].task-theme-document .dialog__panel {
        max-width: 100%;
        width: 100%;
    }
}

/* Task Detail - 퍼소나/멤버 표시 */
.task-detail__persona {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-detail__persona .task-detail__meta-value {
    font-size: 14px;
}

.task-detail__contributors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Document Display - 아바타에 이미지 있을 때 */
.task-detail__avatar img {
    border-radius: inherit;
}

/* Document Display - 채팅 시스템 메시지 */
.task-detail__chat-item--system {
    align-self: center;
    max-width: 90%;
}

.task-detail__chat-item--system .task-detail__chat-bubble {
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.6);
    font-size: 12px;
    font-style: italic;
    border-radius: 12px;
    text-align: center;
}

/* Document Display - 스트리밍 채팅 애니메이션 */
.task-detail__chat-item--streaming .task-detail__chat-bubble::after {
    content: "▊";
    animation: blink 0.8s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Document Display - 빈 콘텐츠 상태일 때 높이 채우기 */
.task-detail__content:has(.task-detail__empty:not([hidden])) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Document Display - 첨부파일 표시 */
.task-detail__chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.task-detail__chat-attachment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-content);
}

.task-detail__chat-attachment .material-symbols-rounded {
    font-size: 14px;
    color: var(--accent);
}

/* Document Display - 1열 기존 스타일 재사용 보완 */
.task-detail__settings.dialog-col {
    overflow-y: auto;
    padding: 16px;
    gap: 0;
}

.task-detail__settings .section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.task-detail__settings .section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.task-detail__settings .field {
    margin-bottom: 12px;
}

.task-detail__settings .field:last-child {
    margin-bottom: 0;
}

/* 제목 readonly-pill 스타일 */
.readonly-pill--title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}

/* 퍼소나/멤버 표시용 */
.persona-display,
.member-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.persona-display__name,
.member-display__name {
    font-size: 14px;
    color: var(--text-content);
}

/* 주제 표시용 */
.topic-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topic-display__text {
    font-size: 14px;
    color: var(--text-content);
}

/* 라벨 칩 컨테이너 */
.label-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 멤버 칩 컨테이너 */
.member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 설명 표시용 */
.description-display {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-content);
    white-space: pre-wrap;
    word-break: break-word;
}

/* muted-text 공통 */
.muted-text {
    color: var(--muted);
    font-style: italic;
}

/* plan-timeline readonly 모드 */
.plan-timeline--readonly .plan-card {
    cursor: default;
}

.plan-timeline--readonly .plan-card--empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(15, 23, 42, 0.02);
    border-radius: 8px;
    color: var(--muted);
}

/* Document Display - 2열 콘텐츠 영역 */
.task-detail__content {
    position: relative;
}

.task-detail__thread-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.task-detail__thread-view[hidden] {
    display: none;
}

.task-detail__thread-view .chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.task-detail__artifact-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.task-detail__artifact-view[hidden] {
    display: none;
}

/* Plan View 스타일 */
.task-detail__plan-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
}

.task-detail__plan-view[hidden] {
    display: none;
}

.task-detail__plan-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.plan-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--muted);
}

.plan-empty__icon {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 16px;
}

.plan-empty__text {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

.plan-empty__hint {
    font-size: 13px;
    margin: 0;
    opacity: 0.8;
}

/* Document Display - 3열 채팅 영역 기존 스타일 재사용 */
.task-detail__chat .chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}

.task-detail__chat .workbench-input-fixed {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}

/* Document Display - 2열 헤더 탭 스타일 */
.task-detail__content-header .unified-tabs__left {
    display: flex;
    gap: 6px;
    align-items: center;
}

.task-detail__content-header .dropdown {
    position: relative;
}

.task-detail__content-header .dropdown[data-open="true"] .dropdown__menu {
    display: block;
}

.task-detail__content-header .dropdown__menu {
    display: none;
}

/* 아티팩트 메뉴 아이템 - 기존 dropdown__item 스타일 재사용 */
.task-detail__content-header .dropdown__menu .dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.task-detail__content-header .dropdown__menu .dropdown__item:hover {
    background: rgba(49, 130, 246, 0.06);
}

.task-detail__content-header
    .dropdown__menu
    .dropdown__item[aria-selected="true"] {
    background: rgba(49, 130, 246, 0.1);
}

.artifact-menu-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.artifact-menu-item__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artifact-menu-item__type {
    font-size: 11px;
    color: var(--muted);
}

/* ==========================================================================
   서브태스크 뷰 (Subtask View)
   - URL: /projects/:project_id/tasks/:task_id (legacy: ?view=subtask)
   ========================================================================== */

.subtask-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg);
}

/* ===== 서브태스크 헤더 ===== */
.subtask-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.subtask-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.subtask-header__back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s ease;
}

.subtask-header__back-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.subtask-header__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subtask-header__topic {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.subtask-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.subtask-header__connected {
    display: flex;
    align-items: center;
    gap: -8px;
}

/* ===== 서브태스크 본문 ===== */
.subtask-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.subtask-body__main {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--line);
}

.subtask-body__aside {
    flex: 0 0 30%;
    min-width: 480px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== 서브태스크 탭 ===== */
.subtask-tabs,
.subtask-aside-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.subtask-tabs__btn,
.subtask-aside-tabs__btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.subtask-tabs__btn:hover,
.subtask-aside-tabs__btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text);
}

.subtask-tabs__btn.active,
.subtask-aside-tabs__btn.active {
    background: var(--accent);
    color: #fff;
}

/* ===== 서브태스크 콘텐츠 영역 ===== */
.subtask-content,
.subtask-aside-content {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

/* ===== 서브태스크 노트 ===== */
.subtask-note {
    max-width: 960px;
    margin: 0 auto;
}

.subtask-note__content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-content);
}

.subtask-note__content pre {
    background: rgba(0, 0, 0, 0.04);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
}

.subtask-note__empty {
    color: var(--muted);
    text-align: center;
    padding: 48px;
}

/* ===== 서브태스크 아티팩트/첨부파일 ===== */
.subtask-artifacts,
.subtask-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.subtask-artifact,
.subtask-attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.subtask-artifact:hover,
.subtask-attachment:hover {
    background: var(--surface-2);
}

.subtask-artifact__icon,
.subtask-attachment__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(49, 130, 246, 0.1);
    border-radius: 10px;
    color: var(--accent);
}

.subtask-artifact__info,
.subtask-attachment__info {
    flex: 1;
    min-width: 0;
}

.subtask-artifact__name,
.subtask-attachment__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subtask-artifact__type {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* ===== 서브태스크 스레드 ===== */
.subtask-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.subtask-thread__messages {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 16px;
}

.subtask-thread__empty {
    color: var(--muted);
    text-align: center;
    padding: 24px;
}

.subtask-thread__input {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.subtask-thread__textarea {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    resize: none;
    background: var(--bg);
    color: var(--text-content);
}

.subtask-thread__textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.subtask-thread__send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--accent);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.subtask-thread__send-btn:hover {
    background: #2563eb;
}

/* ===== 서브태스크 정보 ===== */
.subtask-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subtask-info__section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subtask-info__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subtask-info__value {
    font-size: 14px;
    color: var(--text-content);
}

/* ===== 서브태스크 빈 상태 ===== */
.subtask-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--muted);
    font-size: 14px;
}

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
    .subtask-body {
        flex-direction: column;
    }

    .subtask-body__main {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .subtask-body__aside {
        flex: 1;
        min-width: 100%;
        max-width: 100%;
    }

    .subtask-kanban {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 16px;
    }

    .subtask-kanban__column {
        flex: 0 0 280px;
    }
}

@media (max-width: 640px) {
    .subtask-header {
        padding: 0 16px;
    }

    .subtask-header__title {
        font-size: 14px;
    }

    .subtask-tabs,
    .subtask-aside-tabs {
        padding: 8px 16px;
        overflow-x: auto;
    }

    .subtask-tabs__btn,
    .subtask-aside-tabs__btn {
        padding: 6px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .subtask-content,
    .subtask-aside-content {
        padding: 16px;
    }
}

/* ========== Mention Dropdown (Popover) ========== */
.mention-dropdown[popover] {
    inset: unset;
    margin: 0;
    padding: 0;
}

.mention-dropdown[popover]::backdrop {
    background: transparent;
}

.mention-dropdown .mention-item {
    transition: background 0.15s ease;
}

.mention-dropdown .mention-item:hover,
.mention-dropdown .mention-item.selected {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .mention-dropdown {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .mention-dropdown .mention-item:hover,
[data-theme="light"] .mention-dropdown .mention-item.selected {
    background: rgba(0, 0, 0, 0.05);
}

/* Mention Highlight Overlay */
.mention-highlight-overlay {
    box-sizing: border-box;
    line-height: inherit;
}

/* Mention link styles in rendered content */
.mention {
    color: var(--accent, #6366f1);
    text-decoration: none;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.1);
    padding: 0 3px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mention:hover {
    background: rgba(99, 102, 241, 0.2);
}

.mention-member {
    --mention-color: var(--accent, #6366f1);
}

.mention-agent {
    --mention-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.mention-agent:hover {
    background: rgba(16, 185, 129, 0.2);
}

.mention-task {
    --mention-color: #f59e0b;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.mention-task:hover {
    background: rgba(245, 158, 11, 0.2);
}

.mention-subtask {
    --mention-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.mention-subtask:hover {
    background: rgba(139, 92, 246, 0.2);
}

/* ========== Chat Comment Styles ========== */
.chat-item--comment {
    /* 코멘트 메시지 스타일 */
}

.chat-item--comment .chat-msg__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.chat-item--comment .avatar-member {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background: var(--avatar-bg, #cbd5e1);
    flex-shrink: 0;
}

.chat-item--comment .avatar-member img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-item--comment .chat-msg__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 4px;
}

.chat-item--comment .chat-msg__actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chat-item--comment:hover .chat-msg__actions {
    opacity: 1;
}

.chat-item--comment .chat-msg__action-btn {
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
}

.chat-item--comment .chat-msg__action-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
}

[data-theme="dark"] .chat-item--comment .chat-msg__action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.chat-item--comment .chat-msg__action-btn .material-symbols-rounded {
    font-size: 18px;
}

.chat-item--comment .like-count {
    font-size: 11px;
}

.chat-item--comment.chat-item--deleted .chat-msg__content {
    color: var(--muted);
    font-style: italic;
}

.chat-item--comment .chat-msg__content--deleted {
    color: var(--muted);
    font-style: italic;
}

/* ========================================
   TASK NOTE (태스크 노트 섹션)
   아카이브 요약 디자인 참고
   ======================================== */
.task-note {
    padding: 16px;
    background: var(--surface-component);
    border-radius: 12px;
    margin: 8px;
}

.task-note__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.task-note__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.task-note__title .material-symbols-rounded {
    font-size: 18px;
    color: var(--accent);
}

.task-note__version {
    font-size: 11px;
    color: var(--muted);
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
}

.task-note__content {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-content);
}

/* task-note 내부 마크다운 스타일 - archiving-markdown 스타일 재사용 */
.task-note__content.archiving-markdown {
    max-height: none;
    overflow: visible;
}

/* Dark theme support */
[data-theme="dark"] .task-note {
    background: var(--surface-component);
}

[data-theme="dark"] .task-note__header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .task-note__version {
    background: rgba(255, 255, 255, 0.1);
    color: var(--muted);
}

/* Task Note Actions */
.task-note__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-note__edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.task-note__edit-btn:hover:not(:disabled) {
    background: var(--accent);
    color: white;
}

.task-note__edit-btn:disabled {
    color: var(--muted);
    border-color: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.task-note__edit-btn .material-symbols-rounded {
    font-size: 16px;
}

/* AI Editing State */
.task-note--ai-editing {
    position: relative;
}

.task-note--ai-editing::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent);
    border-radius: 12px;
    pointer-events: none;
    animation: ai-editing-pulse 2s ease-in-out infinite;
}

@keyframes ai-editing-pulse {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

.task-note__status {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    background: rgba(49, 130, 246, 0.1);
    border-radius: 999px;
    animation: status-blink 1.5s ease-in-out infinite;
}

@keyframes status-blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

[data-theme="dark"] .task-note__edit-btn {
    border-color: var(--accent);
}

[data-theme="dark"] .task-note__edit-btn:hover:not(:disabled) {
    background: var(--accent);
    color: white;
}

[data-theme="dark"] .task-note__status {
    background: rgba(49, 130, 246, 0.2);
}

/* ===== 서브태스크 뷰: 아티팩트/첨부파일 패널 (task-detail과 동일한 스타일 적용) ===== */
.subtask-content [data-unified-panel="artifacts"],
.subtask-content [data-unified-panel="attachments"] {
    overflow-y: auto;
    padding: 8px 0;
}

.subtask-content [data-unified-panel="attachments"] .section__title-row {
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* 서브태스크 뷰: unified-panel 기본 스타일 */
.subtask-content .unified-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.subtask-content .unified-panel[hidden] {
    display: none;
}

/* Task Note Editor */
.task-note--editing {
    background: var(--surface);
}

.task-note__editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-note__textarea {
    width: 100%;
    min-height: 300px;
    padding: 12px;
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s ease;
}

.task-note__textarea:focus {
    border-color: var(--accent);
}

.task-note__textarea::placeholder {
    color: var(--muted);
}

.task-note__editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.task-note__editor-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.task-note__editor-actions .btn--secondary {
    color: var(--text);
    background: var(--surface-component);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

.task-note__editor-actions .btn--secondary:hover {
    background: var(--surface-component-2);
}

.task-note__editor-actions .btn--primary {
    color: white;
    background: var(--accent);
    border: none;
}

.task-note__editor-actions .btn--primary:hover {
    background: var(--accent-hover, #2563eb);
}

.task-note__editor-actions .btn .material-symbols-rounded {
    font-size: 18px;
}

[data-theme="dark"] .task-note__textarea {
    background: var(--surface-component);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .task-note__textarea:focus {
    border-color: var(--accent);
}

[data-theme="dark"] .task-note__editor-actions .btn--secondary {
    background: var(--surface-component-2);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .task-note__editor-actions .btn--secondary:hover {
    background: var(--surface-component-3);
}

/* ========================================
   TASK DETAIL PAGE
   태스크 상세 조회 페이지 전용 스타일
   ======================================== */

/* 페이지 기본 레이아웃 */
.task-detail-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.task-detail-page .header-bar {
    flex-shrink: 0;
}

/* 헤더 스타일 */
.task-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.header-bar__back-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-content);
    cursor: pointer;
    transition:
        box-shadow 0.15s,
        transform 0.15s,
        background 0.15s;
}

.header-bar__back-btn:hover {
    transform: translateY(-1px);
    color: var(--accent);
}

.task-detail-header__title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    flex: 1;
    min-width: 0;
    max-width: calc(50vw - 300px);
}

.task-detail-header__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.task-detail-header__title:hover {
    background: var(--surface-hover);
    border-color: var(--border);
    color: var(--accent);
}

.task-detail-header__title-input.input {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 4px 8px;
    width: 480px;
    height: auto;
}

.task-detail-header__topic {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--surface-component);
    border-radius: 999px;
    color: var(--muted);
}

.task-detail-header__topic:empty {
    display: none;
}

/* 상태 뱃지 (제목 옆) */
.task-detail-header__status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-component);
    border-radius: 999px;
    color: var(--muted);
    white-space: nowrap;
}

.task-detail-header__status-badge[hidden] {
    display: none;
}

.task-detail-header__schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, #6366f1 14%, rgba(255, 255, 255, 0.34));
    border-radius: 999px;
    color: #4f46e5;
    white-space: nowrap;
}
.task-detail-header__schedule-badge .material-symbols-rounded {
    font-size: 14px;
}
.task-detail-header__schedule-badge[hidden] {
    display: none;
}
[data-theme="dark"] .task-detail-header__schedule-badge {
    background: color-mix(in srgb, #6366f1 22%, rgba(30, 30, 30, 0.5));
    color: #818cf8;
}

/* Dev 모드 상태 select */
.dev-status-select {
    appearance: auto;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    padding: 0;
    color: inherit;
}

/* 메인 컨텐츠 영역 */
.task-detail-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 16px;
}

.viewer-only-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: 480px;
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    animation: viewer-banner-in 0.35s ease-out;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.viewer-only-banner__icon {
    font-size: 18px;
    opacity: 0.75;
    flex-shrink: 0;
}

.viewer-only-banner__text {
    flex: 1;
}

.viewer-only-banner__join-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    background: #fff;
    color: #0f172a;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    transition:
        background 0.15s ease,
        transform 0.1s ease;
}

.viewer-only-banner__join-btn:hover {
    background: #e2e8f0;
}

.viewer-only-banner__join-btn:active {
    transform: scale(0.97);
}

@keyframes viewer-banner-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Trial Banner */
.trial-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    max-width: 480px;
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    animation: trial-banner-in 0.35s ease-out;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.trial-banner__icon {
    font-size: 18px;
    opacity: 0.9;
    flex-shrink: 0;
}

.trial-banner__text {
    flex: 1;
}

.trial-banner__link {
    flex-shrink: 0;
    padding: 6px 14px;
    background: #fff;
    color: #d97706;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.15s ease,
        transform 0.1s ease;
}

.trial-banner__link:hover {
    background: #fef3c7;
}

.trial-banner__link:active {
    transform: scale(0.97);
}

@keyframes trial-banner-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Warning variant for subscription expired / credits exhausted */
.trial-banner--warning {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.trial-banner--warning .trial-banner__link {
    color: #dc2626;
}

.trial-banner--warning .trial-banner__link:hover {
    background: #fee2e2;
}

/* Trial banner close button */
.trial-banner__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.trial-banner__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.trial-banner__close .material-symbols-rounded {
    font-size: 16px;
}

/* Trial banner hiding animation */
.trial-banner--hiding {
    animation: trial-banner-out 0.3s ease-out forwards;
}

@keyframes trial-banner-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }
}

/* Permission Denied Overlay (lv3 접근 차단) */
.permission-denied-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    min-height: 400px;
}

.permission-denied-overlay__icon {
    font-size: 56px;
    color: var(--md-sys-color-error, #ba1a1a);
    opacity: 0.7;
    margin-bottom: 16px;
}

.permission-denied-overlay__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #1c1b1f);
    margin: 0 0 8px;
}

.permission-denied-overlay__desc {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant, #49454f);
    margin: 0 0 24px;
    max-width: 320px;
    line-height: 1.5;
}

.permission-denied-overlay__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: var(--md-sys-color-primary, #6750a4);
    color: var(--md-sys-color-on-primary, #fff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.permission-denied-overlay__btn:hover {
    opacity: 0.9;
}

.schedule-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: 520px;
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(79, 70, 229, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    animation: viewer-banner-in 0.35s ease-out;
    box-shadow: 0 4px 24px rgba(79, 70, 229, 0.3);
}
.schedule-banner[hidden] {
    display: none;
}
.schedule-banner__icon {
    font-size: 18px;
    opacity: 0.85;
    flex-shrink: 0;
}
.schedule-banner__text {
    flex: 1;
}
/* 예약 실행 시작됨 상태 (녹색) */
.schedule-banner--started {
    background: rgba(34, 197, 94, 0.92);
    box-shadow: 0 4px 24px rgba(34, 197, 94, 0.35);
}
.schedule-banner--started .schedule-banner__icon {
    animation: schedule-pulse 1.5s ease-in-out infinite;
}
@keyframes schedule-pulse {
    0%,
    100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

.task-detail-layout {
    display: flex;
    gap: 16px;
    height: 100%;
    min-height: 0;
}

/* 1열: 콘텐츠 영역 (약 70%) */
.task-detail-col1 {
    flex: 7;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--surface--blur));
    border: 1px solid var(--surface--border);
    overflow: hidden;
}

/* ── Task Detail View Tabs → pov-view-tabs 공통 컴포넌트 사용 ── */

.task-detail-col1__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* 콘텐츠 패널 */
.task-detail-content-panel {
    position: absolute;
    inset: 0;
    overflow: auto;
}

.task-detail-content-panel[hidden] {
    display: none;
}

/* 칸반(보드) 패널 내부 패딩 */
[data-content-panel="kanban"] .subtask-board {
    padding: 16px;
}

/* 결과물 패널 내부 */
[data-content-panel="artifacts"] .artifacts-list,
[data-content-panel="artifacts"] .artifacts-empty {
    padding: 0 24px 16px;
}

/* 첨부파일 패널 내부 */
[data-content-panel="attachments"] .attachments-grid,
[data-content-panel="attachments"] .attachments-empty {
    padding: 0 16px 16px;
}

/* 2열: 사이드 패널 (약 30%, 고정 너비) — 2카드 컨테이너 */
.task-detail-col2 {
    flex: 0 0 480px;
    min-width: 400px;
    max-width: 520px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 채팅/정보 카드 (header + body 통합) */
.task-detail-col2__chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--surface);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--surface--blur));
    border: 1px solid #bcbcbc42;
    overflow: hidden;
    box-shadow: none;
}

[data-theme="dark"] .task-detail-col2__chat {
    box-shadow: none;
}

/* ── Col2 Top Row: status-action-panel + agent-card 가로 배치 ── */
.col2-top-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
}

/* ========================================
   Unified Status + Action Panel (독립 카드형)
   ======================================== */
.status-action-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 24px;
    min-height: 140px;
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid #bcbcbc42;
    border-radius: var(--radius);
}
.subtask-detail-dialog__aside .status-action-panel {
    flex: 0;
}

/* 좌상단 제목 (상태 아이콘 + 라벨) */
.status-action-panel__title {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

.status-action-panel__icon {
    font-size: 18px;
    flex-shrink: 0;
}

.status-action-panel__label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-content);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* 본문 영역 (가운데 분산) */
.status-action-panel__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* Progress bar */
.status-action-panel__progress {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-action-panel__progress[hidden] {
    display: none;
}

.status-action-panel__progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.status-action-panel__progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

.status-action-panel--in_progress .status-action-panel__progress-fill {
    background: var(--inprogress-sheen-gradient);
    background-size: var(--inprogress-sheen-size);
    animation: inprogress-sheen var(--inprogress-sheen-speed) linear infinite;
}

.status-action-panel--in_review .status-action-panel__progress-fill {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.status-action-panel--done .status-action-panel__progress-fill {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.status-action-panel__progress-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

/* Chips (검토 알림, 권한 알림) */
.status-action-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-action-panel__chips[hidden] {
    display: none;
}

.sap-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.sap-chip[hidden] {
    display: none;
}

.sap-chip .material-symbols-rounded {
    font-size: 14px;
}

.sap-chip--review {
    background: rgba(124, 92, 255, 0.1);
    color: #7c5cff;
}

.sap-chip--permission {
    background: rgba(107, 114, 128, 0.06);
    color: var(--muted);
}

.sap-chip--permission-subtle {
    background: transparent;
    padding: 2px 0;
    font-size: 10px;
    opacity: 0.7;
}

/* ── 액션 버튼 그룹 (가로 배열) ── */
.sap-action-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── 주요 액션 버튼 ── */
.sap-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: flex-start;
    padding: 10px 24px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.15s,
        box-shadow 0.15s;
}

.sap-action-btn--primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(49, 130, 246, 0.25);
}

.sap-action-btn--primary:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 4px 14px rgba(49, 130, 246, 0.3);
}

.sap-action-btn--ghost {
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    padding: 10px 12px !important;
}

.sap-action-btn--ghost:hover:not(:disabled) {
    background: var(--surface-component);
    color: var(--text-content);
}

.sap-action-btn--success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.25);
}

.sap-action-btn--success:hover:not(:disabled) {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
}

/* Approve/Done 버튼: cyan 계열 (연한 청록색 배경 + 청록색 글씨) */
.sap-action-btn--approve {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
    border: 0;
    box-shadow: none;
}

.sap-action-btn--approve:hover:not(:disabled) {
    background: rgba(6, 182, 212, 0.2);
    color: #0e7490;
}

/* Reject/Cancel 버튼: danger 스타일 (연한 분홍 배경 + 붉은 글씨) */
.sap-action-btn--reject {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 0;
    box-shadow: none;
}

.sap-action-btn--reject:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

.sap-action-btn--danger {
    background: rgba(180, 35, 46, 0.12);
    color: #b4232e;
    box-shadow: none;
}

.sap-action-btn--danger:hover:not(:disabled) {
    background: rgba(180, 35, 46, 0.18);
    color: #b4232e;
}

.sap-action-btn--ghost-danger {
    background: rgba(180, 35, 46, 0.12);
    color: #b4232e;
    box-shadow: none;
}

.sap-action-btn--ghost-danger:hover:not(:disabled) {
    background: rgba(180, 35, 46, 0.18);
    color: #b4232e;
}

.sap-action-btn:disabled {
    background: var(--surface-component-2);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
}

.sap-action-btn[hidden] {
    display: none;
}

.sap-action-btn .material-symbols-rounded {
    font-size: 18px;
}

/* Dark mode */
[data-theme="dark"] .status-action-panel {
    background: var(--surface-component);
    border-color: var(--line);
}

[data-theme="dark"] .sap-chip--review {
    background: rgba(124, 92, 255, 0.15);
}

[data-theme="dark"] .sap-chip--permission {
    background: rgba(107, 114, 128, 0.15);
}

[data-theme="dark"] .sap-action-btn--primary {
    box-shadow: 0 2px 10px rgba(49, 130, 246, 0.3);
}

[data-theme="dark"] .sap-action-btn--success {
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
}

/* ── in_review 상태 액션 버튼 그룹 ── */
.sap-review-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.sap-review-actions__decision {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sap-review-actions__decision > .sap-action-btn {
    flex: 1;
}

.sap-review-actions__retry {
    align-self: center;
}

.sap-review-actions__cancel {
    align-self: center;
}

.sap-review-actions[hidden] {
    display: none;
}

/* ── 확인 다이얼로그 오버레이 ── */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.confirm-dialog {
    max-width: 400px;
    width: 90%;
    background: var(--surface-card);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.confirm-dialog__header {
    padding: 20px 24px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-title);
}

.confirm-dialog__body {
    padding: 12px 24px 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-content);
}

.confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    background: var(--surface-card);
    border-top: 1px solid var(--line);
}

/* ── Agent Card (검토 담당 에이전트, 정사각형) ── */
.sap-agent-card {
    flex: 0 0 140px;
    width: 140px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(240, 245, 255, 0.55) 100%
    );
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius);
    box-shadow:
        0px 3px 18px 9px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: box-shadow 0.2s;
    font-family: inherit;
    color: inherit;
}

.sap-agent-card:hover {
    box-shadow:
        0px 5px 24px 12px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.sap-agent-card__header {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.sap-agent-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    border: 2px solid #c1c1c1;
    flex-shrink: 0;
    background: rgba(49, 130, 246, 0.12);
    color: rgba(15, 23, 42, 0.5);
}

.sap-agent-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sap-agent-card__avatar .material-symbols-rounded {
    font-size: 28px;
}

.sap-agent-card__avatar--speaking {
    animation: persona-busy 1.4s cubic-bezier(0.2, 0, 0, 1) 1;
    transform-origin: 50% 55%;
}

/* Avatar animated border per task state */
.sap-agent-card__avatar--in-review,
.sap-agent-card__avatar--planning,
.sap-agent-card__avatar--executing {
    border: 2.5px solid transparent;
    animation: inreview-rotating 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* in-review avatar: 배경 유지 + border 그라데이션 */
.sap-agent-card__avatar--in-review {
    background:
        linear-gradient(
                var(--avatar-bg, rgba(49, 130, 246, 0.12)),
                var(--avatar-bg, rgba(49, 130, 246, 0.12))
            )
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #f97316,
                #fdba74,
                #fb923c,
                #fed7aa,
                #ffedd5,
                #fbbf24
            )
            border-box;
}

.sap-agent-card__avatar--planning {
    background:
        linear-gradient(
                var(--avatar-bg, rgba(49, 130, 246, 0.12)),
                var(--avatar-bg, rgba(49, 130, 246, 0.12))
            )
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #00c896,
                #33e4ff,
                #0098fe,
                #76d4c6,
                #23c483,
                #3182f6
            )
            border-box;
}

.sap-agent-card__avatar--executing {
    background:
        linear-gradient(
                var(--avatar-bg, rgba(49, 130, 246, 0.12)),
                var(--avatar-bg, rgba(49, 130, 246, 0.12))
            )
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #a670ed,
                #d824a5,
                #ee3469,
                #f75d42,
                #d824a5,
                #8800ff
            )
            border-box;
}

/* dark 모드 in-review avatar */
[data-theme="dark"] .sap-agent-card__avatar--in-review {
    background:
        linear-gradient(rgba(30, 35, 50, 0.95), rgba(30, 35, 50, 0.95))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #f97316,
                #fdba74,
                #fb923c,
                #fed7aa,
                #ffedd5,
                #fbbf24
            )
            border-box;
}

[data-theme="dark"] .sap-agent-card__avatar--planning {
    background:
        linear-gradient(rgba(30, 35, 50, 0.95), rgba(30, 35, 50, 0.95))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #00c896,
                #33e4ff,
                #0098fe,
                #76d4c6,
                #23c483,
                #3182f6
            )
            border-box;
}

[data-theme="dark"] .sap-agent-card__avatar--executing {
    background:
        linear-gradient(rgba(30, 35, 50, 0.95), rgba(30, 35, 50, 0.95))
            padding-box,
        repeating-conic-gradient(
                from var(--inreview-angle),
                #a670ed,
                #d824a5,
                #ee3469,
                #f75d42,
                #d824a5,
                #8800ff
            )
            border-box;
}

/* In-review: 전체 배경 그라데이션 */
.sap-agent-card--in-review {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(
        105deg,
        #fff8e8,
        #ffe8c8,
        #ffd8a8,
        #ffe4c0,
        #fff0d8,
        #ffe0b0,
        #fff8e8
    );
    background-size: 400%;
    animation: steam 10s linear infinite reverse;
    box-shadow:
        0px 3px 18px 9px rgba(254, 139, 45, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sap-agent-card--in-review::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(-1 * var(--inprogress-glow-spread));
    top: calc(-1 * var(--inprogress-glow-spread));
    width: calc(100% + var(--inprogress-glow-spread) * 2);
    height: calc(100% + var(--inprogress-glow-spread) * 2);
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        #f97316,
        #fdba74,
        #fb923c,
        #fed7aa,
        #ffedd5,
        #fbbf24,
        #f97316
    );
    background-size: 400%;
    opacity: var(--inprogress-glow-opacity);
    filter: blur(var(--inprogress-glow-blur));
    animation: steam 10s linear infinite reverse;
    pointer-events: none;
}

.sap-agent-card--in-review > * {
    position: relative;
    z-index: 1;
}

.sap-agent-card--in-review:hover {
    box-shadow:
        0px 5px 24px 12px rgba(254, 139, 45, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .sap-agent-card--in-review {
    background: linear-gradient(
        105deg,
        #3d2a15,
        #4a3018,
        #52351a,
        #4a3018,
        #3d2a15,
        #4a3018,
        #3d2a15
    );
    background-size: 400%;
    animation: steam 10s linear infinite reverse;
    box-shadow:
        0px 3px 18px 9px rgba(254, 139, 45, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sap-agent-card--in-review:hover {
    box-shadow:
        0px 5px 24px 12px rgba(254, 139, 45, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sap-agent-card__name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-content);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    line-height: 1.2;
}

.sap-agent-card__position {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.sap-agent-card__position:empty {
    display: none;
}

/* Agent Picker Context Menu (popover, top-layer, glassmorphism) */
.sap-agent-picker {
    position: fixed;
    margin: 0;
    min-width: 280px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--surface-component);
    backdrop-filter: blur(var(--surface-component--blur));
    -webkit-backdrop-filter: blur(var(--surface-component--blur));
    border: 1px solid var(--surface--border);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 6px;
    inset: auto;
}

.sap-agent-picker:popover-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sap-agent-picker__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: background 0.15s;
}

.sap-agent-picker__option:hover {
    background: var(--surface-component);
}

.sap-agent-picker__option[aria-selected="true"] {
    background: rgba(49, 130, 246, 0.08);
}

.sap-agent-picker__option-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sap-agent-picker__option-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sap-agent-picker__option-avatar .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.6);
}

.sap-agent-picker__option-meta {
    min-width: 0;
    flex: 1;
}

.sap-agent-picker__option-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-content);
    line-height: 1.2;
}

.sap-agent-picker__option-name .persona__chip {
    margin-left: 4px;
}

.sap-agent-picker__option-desc {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark mode - Agent Card */
[data-theme="dark"] .sap-agent-card {
    background: linear-gradient(
        135deg,
        rgba(30, 35, 50, 0.7) 0%,
        rgba(40, 45, 65, 0.6) 100%
    );
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0px 3px 18px 9px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sap-agent-card:hover {
    box-shadow:
        0px 5px 24px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sap-agent-card__avatar {
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); */
}

[data-theme="dark"] .sap-agent-picker {
    background: linear-gradient(
        135deg,
        rgba(30, 35, 50, 0.8) 0%,
        rgba(40, 45, 65, 0.75) 100%
    );
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.task-detail-col2__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background-color: #fff;
    flex-shrink: 0;
}

.task-detail-col2__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.task-detail-col2__body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* 사이드 패널 */
.task-detail-side-panel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.task-detail-side-panel[hidden] {
    display: none;
}

/* 사이드 패널 내 settings panel */
.task-detail-side-panel > .task-detail__settings-panel {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ========================================
   서브태스크 칸반 보드
   ======================================== */
.subtask-board {
    display: flex;
    gap: 12px;
    height: 100%;
    padding: 0;
    overflow-x: auto;
}

.subtask-board .column {
    width: 100%;
    max-width: 320px;
    min-width: 240px;
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    position: relative;
    min-height: 0;
}

.subtask-board .column::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.12);
}

.subtask-board .column:first-child::before {
    display: none;
}

.subtask-board .column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    background: transparent;
}

.subtask-board .column__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-content);
}

.subtask-board .column__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
}

.subtask-board .column__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
}

.subtask-board .card-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 20px;
    position: relative;
}

/* 서브태스크 카드: 클릭 + FLIP 애니메이션 지원 */
.subtask-board .card {
    cursor: pointer;
    touch-action: auto;
    /* FLIP 애니메이션을 위한 transform 기본값 */
    transform: translate(0, 0);
    will-change: transform;
}

/* FLIP reflow 애니메이션 중인 카드 */
.subtask-board .card[data-flipping] {
    transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

/* 카드 나타남 애니메이션 */
.subtask-board .card[data-appear] {
    animation: subtask-card-appear 220ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes subtask-card-appear {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 카드 사라짐 애니메이션 */
.subtask-board .card[data-leaving] {
    animation: subtask-card-leave 200ms cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
}

@keyframes subtask-card-leave {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.94);
    }
}

/* ========================================
   서브태스크 상세 다이얼로그
   ======================================== */
.subtask-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
    animation: subtask-overlay-fade-in 0.2s ease;
}

@keyframes subtask-overlay-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

dialog.subtask-detail-dialog {
    background: var(--surface);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 600px;
    max-height: 95vh;
    min-height: 70vh;
    animation: subtask-dialog-slide-up 0.3s ease;
    padding: 0;
    border: none;
    transition:
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

dialog.subtask-detail-dialog[open] {
    display: flex;
    backdrop-filter: blur(var(--surface-component--blur));
    flex-direction: column;
    z-index: 1000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* 2열 레이아웃 모드 */
dialog.subtask-detail-dialog--wide {
    max-width: 1200px;
}

/* 에이전트 로그 탭 활성 시 확장 */
dialog.subtask-detail-dialog.agentlog-active {
    max-width: min(90vw, 1400px);
    height: 85vh;
    max-height: 85vh;
}

dialog.subtask-detail-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: subtask-overlay-fade-in 0.2s ease;
    z-index: 999;
}

@keyframes subtask-dialog-slide-up {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.subtask-detail-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    gap: 16px;
}

.subtask-detail-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.subtask-detail-dialog__title:not(.subtask-detail-dialog__title--readonly):hover {
    background: var(--surface-hover);
    border-color: var(--border);
    color: var(--accent);
}

/* 유저가 만들지 않은 서브태스크는 제목 편집 불가 (호버 효과 제거) */
.subtask-detail-dialog__title--readonly {
    cursor: default;
}

.subtask-detail-dialog__title-input {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0;
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 480px;
    width: 100%;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--primary);
    background: var(--surface-base);
    outline: none;
    font-family: inherit;
}

.subtask-detail-dialog__title-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.subtask-detail-dialog__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.subtask-detail-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--muted);
    transition:
        background 0.15s,
        color 0.15s;
}

.subtask-detail-dialog__close:hover {
    background: var(--surface-component);
    color: var(--text-content);
}

.subtask-detail-dialog__body {
    flex: 1;
    overflow: hidden;
    padding: 24px;
}

/* 2열 레이아웃 바디 */
.subtask-detail-dialog--wide .subtask-detail-dialog__body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    overflow: hidden;
}

.subtask-detail-dialog__main {
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    overflow-y: auto;
    padding-right: 8px;
    min-height: 0;
}

.subtask-detail-dialog__main .subtask-detail-dialog__section--fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.subtask-detail-dialog__main
    .subtask-detail-dialog__section--fill
    .subtask-detail-dialog__tasknote {
    flex: 1;
    overflow-y: auto;
    min-height: 120px;
}

/* 블록 에디터 사용 시 popover가 잘리지 않도록 overflow 해제 */
.subtask-detail-dialog__body:has(.subtask-note-editor) {
    overflow: visible;
}

.subtask-detail-dialog__main:has(.subtask-note-editor) {
    overflow: visible;
}

.subtask-detail-dialog__main
    .subtask-detail-dialog__section--fill:has(.subtask-note-editor) {
    overflow: visible;
}

.subtask-detail-dialog__main
    .subtask-detail-dialog__section--fill
    .subtask-detail-dialog__tasknote:has(.subtask-note-editor) {
    overflow: visible;
}

.subtask-detail-dialog__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 1px solid var(--line);
    padding-left: 24px;
    overflow-y: auto;
    min-height: 0;
}

.subtask-detail-dialog__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.subtask-detail-dialog__agent {
    display: flex;
    align-items: center;
    gap: 12px;
}

.subtask-detail-dialog__agent-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-content);
}

.subtask-detail-dialog__review-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    padding: 6px 12px;
    background: var(--surface-component);
    border-radius: var(--radius-sm);
}

.subtask-detail-dialog__review-status[data-reviewed="true"] {
    color: var(--ok);
    background: rgba(34, 197, 94, 0.1);
}

.subtask-detail-dialog__review-status .material-symbols-rounded {
    font-size: 18px;
}

.subtask-detail-dialog__info {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--surface-component);
    border-radius: var(--radius-sm);
}

.subtask-detail-dialog__info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subtask-detail-dialog__info-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subtask-detail-dialog__info-value {
    font-size: 13px;
    color: var(--text-content);
}

/* 서브태스크 정보 섹션 (피커 영역) */
.subtask-detail-dialog__info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.subtask-detail-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subtask-detail-field__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 날짜 표시 (작은 글씨 라벨) */
.subtask-detail-dates {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    flex-direction: column;
}

.subtask-detail-dates__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.subtask-detail-dates__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
}

.subtask-detail-dates__value {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ── 서브태스크 메인 탭 칩 네비게이션 ── */
.subtask-main-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* ── depends-on 피커 (읽기 전용) ── */
.depends-on-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.depends-on-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.depends-on-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--surface-component);
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    text-decoration: none;
    color: inherit;
}
.depends-on-item--clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.depends-on-item--clickable:hover {
    background: var(--surface-hover, rgba(0, 0, 0, 0.06));
}
.depends-on-item__icon {
    font-size: 16px !important;
    color: #393939;
    font-weight: 700 !important;
    flex-shrink: 0;
}
.depends-on-item__title {
    color: var(--text-content);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.depends-on-item__arrow {
    font-size: 16px !important;
    color: var(--muted);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.depends-on-item--clickable:hover .depends-on-item__arrow {
    opacity: 1;
}
.subtask-detail-dialog__section {
    margin-bottom: 20px;
}

.subtask-detail-dialog__section:last-child {
    margin-bottom: 0;
}

.subtask-detail-dialog__workplan {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.subtask-detail-dialog__workplan--single {
    overflow-y: auto;
}

.subtask-detail-dialog__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.subtask-detail-dialog__section-title .material-symbols-rounded {
    font-size: 18px;
}

.subtask-detail-dialog__tasknote {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-content);
}

/* 서브태스크 모달 내 tasknote-viewer padding 제거 */
.subtask-detail-dialog__tasknote .tasknote-viewer {
    /* padding: 0; */
}

/* 서브태스크 모달 내 tasknote-container 상단 여백 제거 */
.subtask-detail-dialog .tasknote-container,
.subtask-detail-dialog .tasknote-history-container {
    /* padding: 0; */
}

/* 서브태스크 모달 내 가로 스크롤 방지 */
.subtask-detail-dialog .tasknote-content,
.subtask-detail-dialog .tasknote-history-list {
    word-break: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

.subtask-detail-section {
    margin-bottom: 24px;
}

.subtask-detail-section:last-child {
    margin-bottom: 0;
}

.subtask-detail-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.subtask-detail-section__title .material-symbols-rounded {
    font-size: 18px;
}

.subtask-detail-section__content {
    padding-left: 26px;
}

.subtask-detail-empty {
    font-size: 14px;
    color: var(--muted);
    font-style: italic;
}

.subtask-detail-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-content);
    margin: 0;
}

/* 업무 계획 아이템 */
.workplan-item {
    padding: 12px;
    background: var(--surface-component);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.workplan-item:last-child {
    margin-bottom: 0;
}

.workplan-item__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.workplan-item__done-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.workplan-item__icon {
    font-size: 20px;
    color: var(--muted);
    flex-shrink: 0;
}

.workplan-item__icon--done {
    color: var(--ok);
}

.workplan-item__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workplan-item__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-content);
    line-height: 1.4;
}

.workplan-item__title-display,
.workplan-item__desc-display {
    border-radius: var(--radius-xs);
    padding: 2px 6px;
    text-align: left;
}

.workplan-item__title-display {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-content);
    line-height: 1.4;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.workplan-item__desc-display {
    font-size: 14px;
    color: var(--text-content);
    line-height: 1.5;
    word-break: break-word;
    padding: 4px 6px;
    min-height: 32px;
}

.workplan-item__title-display.is-empty,
.workplan-item__desc-display.is-empty {
    color: var(--muted);
    font-style: italic;
}

.workplan-item__title-input {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-content);
    line-height: 1.4;
    border: 0px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    padding: 2px 6px;
    width: 100%;
    font-family: inherit;
}

.workplan-item__title-input:focus {
    border-color: var(--primary);
    background: var(--surface-base);
    outline: none;
}

.workplan-item__content-input {
    font-size: 13px;
    color: var(--text-content);
    line-height: 1.5;
    border: 0px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    padding: 4px 6px;
    width: 100%;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    height: auto;
    min-height: 28px;
}

.workplan-item__content-input:focus {
    border-color: var(--primary);
    background: var(--surface-base);
    outline: none;
}

.workplan-item__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    justify-content: flex-end;
}

.workplan-item__edit-btn,
.workplan-item__review-btn,
.workplan-item__delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-xs);
    color: var(--muted);
    display: flex;
    align-items: center;
}

.workplan-item__review-btn:hover,
.workplan-item__delete-btn:hover {
    background: var(--surface-hover);
}

.workplan-item__edit-btn:hover {
    background: var(--surface-hover);
}

.workplan-item__review-btn .material-symbols-rounded,
.workplan-item__delete-btn .material-symbols-rounded,
.workplan-item__edit-btn .material-symbols-rounded {
    font-size: 18px;
}

.workplan-item__review-btn--on {
    color: var(--primary);
}

.workplan-item__review-text {
    font-size: 12px;
    margin-left: 2px;
    font-weight: 700;
}

.workplan-item__delete-btn:hover {
    color: var(--danger);
}

.workplan-item__desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.workplan-item__badges {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    padding-left: 34px;
}

.workplan-item__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--surface-hover);
    color: var(--muted);
}

.workplan-item__badge--review {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.workplan-item__result {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

/* ── 에이전트 로그 터미널 ── */
.agent-log-terminal {
    background: #0d1117;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid #21262d;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.agent-log-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 0;
}

.agent-log-body::-webkit-scrollbar {
    width: 6px;
}

.agent-log-body::-webkit-scrollbar-track {
    background: transparent;
}

.agent-log-body::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}

.agent-log-body::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

.agent-log-line {
    display: flex;
    gap: 12px;
    font-family:
        "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas",
        "Monaco", monospace;
    font-size: 12px;
    line-height: 1.7;
    min-height: 20px;
}

.agent-log-ts {
    color: #484f58;
    flex-shrink: 0;
    user-select: none;
    font-size: 11.5px;
}

.agent-log-text {
    color: #58a6ff;
    white-space: pre-wrap;
    word-break: break-all;
}

/* pagination — older/newer 버튼 */
.agent-log-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: #161b22;
    border-top: 1px solid #21262d;
    flex-shrink: 0;
}

.agent-log-pagination__btn {
    background: none;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 5px 14px;
    cursor: pointer;
    color: #8b949e;
    font-size: 12px;
    font-family:
        "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas",
        "Monaco", monospace;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}

.agent-log-pagination__btn:hover:not(:disabled) {
    background: #21262d;
    border-color: #484f58;
    color: #c9d1d9;
}

.agent-log-pagination__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.agent-log-pagination__btn .material-symbols-rounded {
    font-size: 16px;
}

/* 에이전트 로그 패널이 부모 높이를 꽉 채우도록 */
[data-subtask-main-panel="agentlog"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

[data-subtask-main-panel="agentlog"][hidden] {
    display: none;
}

/* 에이전트 노트 내용 */
.subtask-note-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-content);
}

.subtask-note-content pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    font-family: inherit;
}

.subtask-note-content h1,
.subtask-note-content h2,
.subtask-note-content h3 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.subtask-note-content p {
    margin: 0.5em 0;
}

.subtask-note-content ul,
.subtask-note-content ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}

.subtask-note-content code {
    background: var(--surface-component);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* 완료된 멤버 서브태스크 읽기 전용 뷰어 */
.subtask-note-readonly {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.subtask-note-readonly__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--surface-2--border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    width: fit-content;
}

.subtask-note-readonly__badge .material-symbols-rounded {
    font-size: 16px;
    color: var(--success, #22c55e);
}

/* 서브태스크 다이얼로그 내 섹션 스타일 */
.subtask-workplan-section,
.subtask-note-section {
    margin-bottom: 20px;
}

.subtask-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0 0 12px;
}

.subtask-section-title .material-symbols-rounded {
    font-size: 18px;
    color: var(--muted);
}

.workplan-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0;
}

.workplan-list--single {
    height: auto;
    overflow: visible;
}

.workplan-list--single .workplan-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.workplan-list--single .workplan-item__text {
    flex: 0 0 auto;
}

.workplan-list--single .workplan-item__content-input {
    flex: 0 0 auto;
    min-height: 120px;
    overflow: hidden;
}

/* Workplan 패널이 부모 높이를 꽉 채우도록 */
[data-subtask-main-panel="workplan"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

[data-subtask-main-panel="workplan"][hidden] {
    display: none;
}

.subtask-detail-dialog.workplan-active .subtask-detail-dialog__main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.subtask-action-panel {
    min-height: 160px;
}

/* ========================================
   콘텐츠 패널 헤더
   ======================================== */
.tasknote-header {
    display: flex;
    justify-content: flex-start;
    padding: 24px 24px 16px;
    background: var(--bg);
}

/* 노트/히스토리는 가운데 정렬 */
.tasknote-header--centered {
    justify-content: center;
}

.tasknote-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* 가운데 정렬 헤더는 max-width 적용 */
.tasknote-header--centered .tasknote-header__inner {
    max-width: 960px;
}

.tasknote-header__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tasknote-header__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.02em;
}

/* 제목 옆 인라인 편집 버튼 */
.tasknote-header__btn--inline {
    opacity: 0.5;
    transition: opacity 0.15s;
}

.tasknote-header__title-group:hover .tasknote-header__btn--inline {
    opacity: 1;
}

.tasknote-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tasknote-header__nav {
    display: flex;
    align-items: center;
}

.tasknote-header__btn--edit[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tasknote-header__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.tasknote-header__btn:hover:not(:disabled) {
    background: var(--hover);
    color: var(--text);
}

.tasknote-header__btn:disabled {
    color: var(--text-disabled);
    cursor: default;
    opacity: 0.4;
}

.tasknote-header__btn .material-symbols-rounded {
    font-size: 20px;
}

/* 비교 버튼 (preview.js와 동일한 스타일) */
.tasknote-header__btn--compare {
    margin-left: 4px;
    border-left: 1px solid var(--border);
    padding-left: 8px;
}

.tasknote-header__btn--compare:hover {
    color: var(--primary);
    background: var(--primary-light, rgba(99, 102, 241, 0.1));
}

/* 탭 칩 스타일 헤더 */
.tasknote-header--chip-style {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.tasknote-header--chip-style .tasknote-tabs {
    display: flex;
    gap: 6px;
    padding: 0;
    background: transparent;
    border-bottom: none;
}

.tasknote-header--chip-style .tasknote-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 첨부파일 헤더 - 추가 버튼 좌측 정렬 */
[data-attachments-header] .tasknote-header__inner {
    justify-content: flex-start;
    gap: 12px;
}

/* 기존 탭 스타일 (호환성) */
.tasknote-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.tasknote-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.tasknote-tab:hover {
    background: var(--hover);
    color: var(--text);
}

.tasknote-tab--active {
    background: var(--primary-light);
    color: var(--primary);
}

.tasknote-tab .material-symbols-rounded {
    font-size: 18px;
}

/* 버전 네비게이션 (드롭다운 + 화살표) */
.tasknote-header__version-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* 버전 라벨 버튼 (< v1 >) */
.tasknote-version-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: default;
    min-width: 48px;
}

[data-theme="dark"] .tasknote-version-btn {
    background: var(--surface-component);
    border-color: var(--border);
}

.tasknote-version-dropdown {
    position: relative;
}

.tasknote-version-dropdown__btn {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 56px;
    justify-content: center;
}

.tasknote-version-dropdown__btn:hover {
    background: var(--hover);
    border-color: var(--border-hover, var(--border));
}

.tasknote-version-dropdown__btn .material-symbols-rounded {
    font-size: 16px;
    color: var(--text-muted);
}

.tasknote-version-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 120px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.tasknote-version-dropdown__menu[hidden] {
    display: none;
}

.tasknote-version-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.tasknote-version-dropdown__item:hover {
    background: var(--hover);
}

.tasknote-version-dropdown__item[aria-selected="true"] {
    background: var(--primary-light, rgba(99, 102, 241, 0.1));
    color: var(--primary);
}

.tasknote-version-dropdown__item-version {
    font-weight: 600;
}

.tasknote-version-dropdown__item-name {
    color: var(--text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
}

/* 다크모드 */
[data-theme="dark"] .tasknote-version-dropdown__btn {
    background: var(--surface-component);
    border-color: var(--border);
}

[data-theme="dark"] .tasknote-version-dropdown__menu {
    background: var(--surface-elevated, #1e293b);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* 히스토리 리스트 */
.tasknote-history-container {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.tasknote-history-list {
    width: 100%;
    max-width: 960px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tasknote-history-item {
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.tasknote-history-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tasknote-history-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasknote-history-item__time {
    font-size: 12px;
    color: var(--text-muted);
}

.tasknote-history-item__content {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 8px;
}

.tasknote-history-item__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.tasknote-history-item__version {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg);
    border-radius: 4px;
}

/* ========================================
   태스크 노트 (마크다운 뷰어/에디터)
   ======================================== */
.tasknote-container {
    display: flex;
    justify-content: center;
    padding: 0 24px 24px;
}

/* 태스크 상세 페이지에서만 배경색 적용 */
.task-detail-content-panel .tasknote-container {
    background: var(--bg);
}

.tasknote-editor-wrap {
    width: 100%;
    max-width: 960px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tasknote-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 16px;
}

.tasknote-content {
    flex: 1;
    overflow: visible;
}

.tasknote-viewer {
    line-height: 1.75;
    font-size: 15px;
    color: var(--text);
    padding: 0px 20px;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

/* 노트 헤딩 - 명확한 계층 구조 */
.tasknote-viewer h1 {
    font-size: 1.75em;
    margin: 0 0 0.6em;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.tasknote-viewer h2 {
    font-size: 1.4em;
    margin: 1.4em 0 0.5em;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--border);
}
.tasknote-viewer h3 {
    font-size: 1.15em;
    margin: 1.2em 0 0.4em;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}
.tasknote-viewer h4,
.tasknote-viewer h5,
.tasknote-viewer h6 {
    font-size: 1em;
    margin: 1em 0 0.3em;
    font-weight: 600;
    color: var(--text-secondary);
}

/* 문단 */
.tasknote-viewer p {
    margin: 0 0 1em;
}
.tasknote-viewer p:last-child {
    margin-bottom: 0;
}

/* 리스트 */
.tasknote-viewer ul,
.tasknote-viewer ol {
    padding-left: 1.8em;
    margin: 0.8em 0;
}
.tasknote-viewer li {
    margin: 0.4em 0;
}
.tasknote-viewer li > ul,
.tasknote-viewer li > ol {
    margin: 0.3em 0;
}

/* 코드 블록 */
.tasknote-viewer pre {
    background: var(--surface-component);
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
    border: 1px solid var(--border);
    word-break: normal;
    overflow-wrap: normal;
    max-width: 100%;
}
.tasknote-viewer code {
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 0.9em;
}
.tasknote-viewer :not(pre) > code {
    background: var(--surface-component-2);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--accent);
}

/* 인용문 */
.tasknote-viewer blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 16px;
    margin: 1em 0;
    color: var(--text-muted);
    font-style: italic;
}

/* 구분선 */
.tasknote-viewer hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5em 0;
}

/* 링크 */
.tasknote-viewer a {
    color: var(--accent);
    text-decoration: none;
}
.tasknote-viewer a:hover {
    text-decoration: underline;
}

/* 이미지 */
.tasknote-viewer img {
    max-width: 100%;
    border-radius: 8px;
    margin: 0.5em 0;
}

/* 테이블 wrapper - overflow-x 스크롤 지원 */
.tasknote-viewer .markdown-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 1em 0;
    -webkit-overflow-scrolling: touch;
}
.tasknote-viewer .markdown-table-wrapper table {
    margin: 0;
}

/* 테이블 */
.tasknote-viewer table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    margin: 1em 0;
    font-size: 14px;
}
.tasknote-viewer th,
.tasknote-viewer td {
    border: 1px solid var(--border);
    padding: 10px 14px;
    text-align: left;
    min-width: 64px;
}
.tasknote-viewer th {
    background: var(--surface-component);
    font-weight: 600;
}

/* 체크리스트 */
.tasknote-viewer input[type="checkbox"] {
    margin-right: 6px;
}

/* ── Task Note Pagination ── */
.tasknote-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--surface-component);
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-content);
}
.tasknote-pagination__title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tasknote-pagination__title .version-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
}
[data-theme="dark"] .tasknote-pagination__title .version-badge {
    background: rgba(255, 255, 255, 0.08);
}
.tasknote-pagination__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.tasknote-pagination__nav .btn--page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-content);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}
.tasknote-pagination__nav .btn--page:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .tasknote-pagination__nav .btn--page:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}
.tasknote-pagination__nav .btn--page:disabled {
    opacity: 0.3;
    cursor: default;
}
.tasknote-pagination__nav .btn--page .material-symbols-rounded {
    font-size: 18px;
}
.tasknote-pagination__counter {
    font-size: 12px;
    color: var(--muted);
    min-width: 40px;
    text-align: center;
    white-space: nowrap;
}

/* ── EasyMDE Editor Mount ── */
.tasknote-editor-mount {
    width: 100%;
    min-height: 400px;
}

/* EasyMDE 디자인 시스템 오버라이드 */
.tasknote-editor-mount .EasyMDEContainer {
    font-family:
        "Pretendard",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
}
.tasknote-editor-mount .EasyMDEContainer .editor-toolbar {
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--surface-component);
    opacity: 1;
}
.tasknote-editor-mount .EasyMDEContainer .editor-toolbar button {
    color: var(--text-content);
    border: none;
    border-radius: 4px;
}
.tasknote-editor-mount .EasyMDEContainer .editor-toolbar button:hover,
.tasknote-editor-mount .EasyMDEContainer .editor-toolbar button.active {
    background: var(--surface-component-2);
    border: none;
}
.tasknote-editor-mount .EasyMDEContainer .editor-toolbar i.separator {
    border-left-color: var(--line);
}
.tasknote-editor-mount .EasyMDEContainer .CodeMirror {
    border: 1px solid var(--line);
    border-radius: 0 0 8px 8px;
    background: var(--bg);
    color: var(--text-content);
    font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
    font-size: 14px;
    line-height: 1.7;
    padding: 8px 16px;
    min-height: 400px;
}
.tasknote-editor-mount .EasyMDEContainer .CodeMirror-focused {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1);
}
.tasknote-editor-mount .EasyMDEContainer .CodeMirror .CodeMirror-cursor {
    border-left-color: var(--text-content);
}
.tasknote-editor-mount .EasyMDEContainer .CodeMirror .CodeMirror-selected {
    background: rgba(49, 130, 246, 0.15);
}
.tasknote-editor-mount .EasyMDEContainer .CodeMirror .CodeMirror-placeholder {
    color: var(--muted);
    opacity: 0.6;
}
/* EasyMDE 프리뷰 스타일 (side-by-side & preview) */
.tasknote-editor-mount .EasyMDEContainer .editor-preview,
.tasknote-editor-mount .EasyMDEContainer .editor-preview-side {
    background: var(--bg);
    color: var(--text-content);
    font-family:
        "Pretendard",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    font-size: 15px;
    line-height: 1.8;
    padding: 16px 24px;
}
.tasknote-editor-mount .EasyMDEContainer .editor-preview-side {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
/* 마크다운 구문 하이라이팅 (편집 모드) */
.tasknote-editor-mount .cm-header-1 {
    font-size: 1.6em;
    font-weight: 700;
}
.tasknote-editor-mount .cm-header-2 {
    font-size: 1.3em;
    font-weight: 600;
}
.tasknote-editor-mount .cm-header-3 {
    font-size: 1.1em;
    font-weight: 600;
}
.tasknote-editor-mount .cm-quote {
    color: var(--muted);
    font-style: italic;
}
.tasknote-editor-mount .cm-link {
    color: var(--accent);
}
.tasknote-editor-mount .cm-url {
    color: var(--muted);
}

/* ========================================
   메세지 패널 (Slack 테마 기본)
   ======================================== */
.msg-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.msg-list__messages .msg-item:first-of-type {
    margin-top: 32px;
}
.msg-list {
    flex: 1;
    overflow-y: auto;
    /* padding: 16px; */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msg-list:empty::before {
    content: attr(data-empty-label);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
}

/* 메세지 아이템 - 기본 스타일은 message-list.css에서 관리
   여기서는 msg-item__badge만 정의 (리뷰 기능에서 사용) */
.msg-item__badge {
    display: inline-flex;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

/* 메세지 입력 영역 (just-chat 스타일 기반, msg 네이밍) */
.msg__input-area {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.msg__input-wrap {
    background: var(--surface-component-3);
    backdrop-filter: blur(var(--surface-component-3--blur));
    border-radius: 14px;
    overflow: hidden;
}

.msg__input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.msg__input {
    flex: 1;
    min-height: 64px;
    max-height: 140px;
    padding: 12px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
}

.msg__input::placeholder {
    color: var(--muted);
}

.msg__pending-attachments {
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.msg__pending-attachments[hidden] {
    display: none;
}

.msg__tool-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 8px 14px;
    background-color: transparent;
}

.msg__tool-hint {
    font-size: 11px;
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.15s;
}

.msg__input-wrap:focus-within .msg__tool-hint {
    opacity: 1;
}

.msg__tool-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}

.msg__tool-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.56);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.msg__tool-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-content);
}

.msg__tool-btn .material-symbols-rounded {
    font-size: 18px;
    margin-right: 2px;
}

.msg__send-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #3182f6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(49, 130, 246, 0.25);
    transition:
        background 0.15s,
        transform 0.1s,
        opacity 0.15s;
}

.msg__send-btn:hover:not(:disabled) {
    background: #1d6ce3;
}

.msg__send-btn:active:not(:disabled) {
    transform: scale(0.97);
}

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

.msg__send-btn .material-symbols-rounded {
    font-size: 18px;
}

/* ========================================
   서브태스크 다이얼로그
   ======================================== */
.subtask-dialog__panel {
    width: 600px;
    max-width: 90vw;
}

.subtask-dialog__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========================================
   Col2 오버레이 모드
   - 레인 표시 공간이 부족할 때 col2를 오버레이로 표시
   ======================================== */

/* FAB 그룹 — CSS-only 위치 제어
   col2 표시 상태에 따라 right 위치 자동 조정 */
.overlay-fab-group {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    z-index: 110;
    transition: right 0.25s ease-out;
}

/* col2 토글 FAB — 기본 숨김, overlay 모드에서만 CSS로 표시 */
.fab--col2-toggle {
    display: none;
}

.task-detail-layout--overlay-mode .fab--col2-toggle {
    display: inline-flex;
}

/* col2가 보일 때: col2 바로 옆에 배치 */
.task-detail-layout--overlay-mode:has(
        .task-detail-col2--overlay:not(.task-detail-col2--hidden)
    )
    .overlay-fab-group {
    right: calc(480px);
}

/* col2 max-width: 90vw 대응 — 뷰포트가 좁을 때 */
@media (max-width: 466px) {
    .task-detail-layout--overlay-mode:has(
            .task-detail-col2--overlay:not(.task-detail-col2--hidden)
        )
        .overlay-fab-group {
        right: calc(90vw + 18px);
    }
}

/* 오버레이 모드 레이아웃 */
.task-detail-layout--overlay-mode {
    position: relative;
}

.task-detail-layout--overlay-mode .task-detail-col1 {
    flex: 1;
    max-width: none;
}

/* 칸반 캐로셀 네비게이션 */
.kanban-carousel-nav {
    display: flex;
    gap: 2px;
    margin-left: 8px;
    margin-right: auto; /* 타이틀 옆에 붙이기 위해 오른쪽 공간 밀기 */
}

.kanban-carousel-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-content);
    cursor: pointer;
    transition:
        background 0.15s,
        opacity 0.15s;
}

.kanban-carousel-nav__btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.kanban-carousel-nav__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.kanban-carousel-nav__btn:disabled:hover {
    background: rgba(0, 0, 0, 0.06);
}

.kanban-carousel-nav__btn .material-symbols-rounded {
    font-size: 20px;
}

/* 오버레이 모드에서 칸반 보드 가로 스크롤 */
.task-detail-layout--overlay-mode .subtask-board {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    padding-right: 500px; /* 오버레이 너비만큼 여유 공간 확보 */
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.task-detail-layout--overlay-mode .subtask-board::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* 오버레이 모드에서 전체 세로 스크롤 제거 */
.task-detail-layout--overlay-mode
    .task-detail-content-panel[data-content-panel="kanban"] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.task-detail-layout--overlay-mode
    .task-detail-content-panel[data-content-panel="kanban"]
    .subtask-board {
    flex: 1;
    min-height: 0;
}

/* 오버레이 모드에서 칸반 컬럼 높이 제한 및 개별 스크롤 */
.task-detail-layout--overlay-mode .subtask-board .column {
    flex-shrink: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.task-detail-layout--overlay-mode .subtask-board .column__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.task-detail-layout--overlay-mode .subtask-board .card-list {
    max-height: 100%;
    overflow-y: auto;
}

/* 오버레이 모드에서 노트/히스토리 본문 및 헤더 좌측 정렬 */
.task-detail-layout--overlay-mode .tasknote-container {
    justify-content: flex-start;
}

.task-detail-layout--overlay-mode .tasknote-header--centered {
    justify-content: flex-start;
}

/* col2 오버레이 스타일 */
.task-detail-col2--overlay {
    position: fixed;
    top: 56px; /* 헤더 높이 */
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 90vw;
    z-index: 100;
    gap: 0;
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius) 0 0 var(--radius);
    transform: translateX(0);
    transition:
        transform 0.25s ease-out,
        opacity 0.25s ease-out;
}

.task-detail-col2--overlay .col2-top-row {
    gap: 12px;
    padding: 12px;
    border-bottom: none;
}

.task-detail-col2--overlay .status-action-panel {
    background: var(--surface);
    border: 1px solid #bcbcbc42;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(var(--surface--blur));
    margin: 0;
}

.task-detail-col2--overlay .sap-action-btn-group {
    gap: 6px;
    flex-wrap: wrap;
}

.task-detail-col2--overlay .sap-action-btn {
    padding: 12px 16px;
    font-size: 12px;
}

.task-detail-col2--overlay .sap-agent-card {
    background: var(--surface);
    border: 1px solid #bcbcbc42;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(var(--surface--blur));
    min-height: auto;
}

.task-detail-col2--overlay .task-detail-col2__chat {
    background: var(--surface);
    border: 1px solid #bcbcbc42;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(var(--surface--blur));
    margin: 0 12px 12px;
}

.task-detail-col2--overlay.task-detail-col2--hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* 오버레이 백드롭 */
.task-detail-layout--overlay-mode::before {
    /* content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out; */
}

.task-detail-layout--overlay-mode:has(
        .task-detail-col2--overlay:not(.task-detail-col2--hidden)
    )::before {
    opacity: 1;
    pointer-events: auto;
}

/* 다크 모드 오버레이 */
[data-theme="dark"] .task-detail-col2--overlay {
    box-shadow: none;
}

[data-theme="dark"] .task-detail-col2--overlay .status-action-panel,
[data-theme="dark"] .task-detail-col2--overlay .sap-agent-card,
[data-theme="dark"] .task-detail-col2--overlay .task-detail-col2__chat {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .task-detail-layout--overlay-mode::before {
    background: rgba(0, 0, 0, 0.5);
}

/* ========================================
   반응형 레이아웃
   ======================================== */
@media (max-width: 1200px) {
    .task-detail-col2 {
        flex: 0 0 360px;
        min-width: 320px;
        max-width: 400px;
    }
}

@media (max-width: 960px) {
    /* 960px 이하에서는 오버레이 모드로 전환됨 (JS에서 처리) */
    /* 오버레이 모드가 아직 적용되지 않은 경우 col2를 숨겨 밀림 방지 */
    .task-detail-layout:not(.task-detail-layout--overlay-mode)
        .task-detail-col1 {
        flex: 1;
        max-width: none;
    }

    .task-detail-layout:not(.task-detail-layout--overlay-mode)
        .task-detail-col2 {
        display: none;
    }

    .subtask-board {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }
}

@media (max-width: 640px) {
    .task-detail-main {
        padding: 8px;
    }

    .task-detail-layout {
        gap: 8px;
    }

    .task-detail-header__title {
        font-size: 16px;
    }

    .task-detail-header__topic {
        display: none;
    }
}

/* 다크 모드 지원 */
[data-theme="dark"] .task-detail-page {
    background: var(--bg);
}

/* 다크 테마 msg-item 스타일은 message-list.css에서 관리 */

/* ========================================
   Message Review UI (메시지 검토 UI)
   ======================================== */
.msg-item__reviewer-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(49, 130, 246, 0.08);
    border-radius: 6px;
    font-size: 12px;
    color: var(--accent);
}

.msg-item__reviewer-info .material-symbols-rounded {
    font-size: 14px;
}

.msg-item__review-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.msg-item__review-badge--completed {
    background: rgba(35, 196, 131, 0.1);
    color: var(--ok);
}

.msg-item__review-badge--pending {
    background: var(--warning-bg-1);
    color: var(--warning);
}

.msg-item__review-badge .material-symbols-rounded {
    font-size: 14px;
}

.msg-item__review-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.msg-item__review-btn:hover {
    background: #2563eb;
}

.msg-item__review-btn .material-symbols-rounded {
    font-size: 16px;
}

/* Restricted Note (권한 없는 콘텐츠) */
.restricted-note {
    color: var(--muted);
    font-style: italic;
}

/* ===== Subtask Card Actions ===== */
.subtask-card {
    position: relative;
}

.subtask-card__actions {
    display: flex;
    flex-direction: row;
    gap: 4px;
    position: absolute;
    right: 8px;
    top: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.subtask-card:hover .subtask-card__actions,
.artifact-item:hover .subtask-card__actions {
    opacity: 1;
    pointer-events: auto;
}

.subtask-card__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: var(--surface-component, #efefeff0);
    color: var(--text, rgba(15, 23, 42, 0.78));
    cursor: pointer;
    transition:
        background 0.15s ease,
        transform 0.1s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.subtask-card__action-btn:hover {
    background: var(--surface-component-2, #e0e0e0);
    transform: scale(1.05);
}

.subtask-card__action-btn:active {
    transform: scale(0.95);
}

.subtask-card__action-btn .material-symbols-rounded {
    font-size: 16px;
}

.subtask-card__action-btn--danger {
    color: #b4232e;
}

.subtask-card__action-btn--danger:hover {
    background: rgba(180, 35, 46, 0.12);
}

/* ═══════════════════════════════════════════
   Subtask Status Transition Animations
   - FLIP 기반 애니메이션 (.subtask-board .card에 정의)
   - 레거시 클래스 호환 (.subtask-card--leave, .subtask-card--appear)
   ═══════════════════════════════════════════ */

/* 레거시 호환 - 새 data 속성 기반 애니메이션 사용 권장 */
.subtask-card--leave {
    animation: subtask-card-leave 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

.subtask-card--appear {
    animation: subtask-card-appear 220ms cubic-bezier(0.2, 0, 0, 1);
}

/* ===== Templated Subtask Card ===== */
/* 반복 작업으로 템플릿 처리된 서브태스크 */
.card--templated {
    border: 2px solid var(--purple-500, #8b5cf6);
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.05) 0%,
        rgba(139, 92, 246, 0.02) 100%
    );
}

.card--templated::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .card--templated {
    border-color: var(--purple-400, #a78bfa);
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.12) 0%,
        rgba(139, 92, 246, 0.05) 100%
    );
}

[data-theme="dark"] .card--templated::before {
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3);
}

/* Templated Badge (좌측 상단 핀 아이콘) */
.card__templated-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--purple-500, #8b5cf6);
    color: white;
    cursor: help;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.card__templated-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4);
}

.card__templated-badge .material-symbols-rounded {
    font-size: 16px;
}

/* ===== Member Type Subtask Card - Drag & Drop ===== */
.subtask-card[data-assignee-type="member"] {
    cursor: grab;
}

.subtask-card[data-assignee-type="member"]:active,
.subtask-card.dragging {
    cursor: grabbing;
    opacity: 0.7;
    transform: rotate(2deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 드래그 드롭 완료 후 페이드인 애니메이션 */
.subtask-card--dropped {
    animation: subtask-card-fadein 0.3s ease-out;
}

@keyframes subtask-card-fadein {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Subtask Lane Drag Over State */
.subtask-lane--dragover,
[data-card-list].subtask-lane--dragover {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 2px dashed var(--blue-400, #60a5fa) !important;
    border-radius: 12px;
}

[data-theme="dark"] .subtask-lane--dragover,
[data-theme="dark"] [data-card-list].subtask-lane--dragover {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: var(--blue-500, #3b82f6) !important;
}

/* ===== Member Type Subtask - Task Note Editor ===== */
.subtask-note-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    /* 툴바가 왼쪽으로 나가도 잘리지 않도록 여백 확보 */
    padding-left: 24px;
    margin-left: -24px;
    overflow: visible;
}

.subtask-note-editor__textarea {
    flex: 1;
    min-height: 200px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text-primary, #1e293b);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    transition: border-color 0.2s;
}

.subtask-note-editor__textarea:focus {
    outline: none;
    border-color: var(--blue-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.subtask-note-editor__textarea::placeholder {
    color: var(--text-tertiary, #94a3b8);
}

[data-theme="dark"] .subtask-note-editor__textarea {
    background: var(--surface-dark, #1e293b);
    border-color: var(--border-dark, #334155);
    color: var(--text-primary-dark, #f1f5f9);
}

[data-theme="dark"] .subtask-note-editor__textarea:focus {
    border-color: var(--blue-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .subtask-note-editor__textarea::placeholder {
    color: var(--text-tertiary-dark, #64748b);
}

/* ===== Editor.js Block Editor ===== */
.subtask-note-editor__editorjs {
    flex: 1;
    min-height: 200px;
    margin-top: 32px;
    /* 테두리, 배경 제거 - 깔끔한 인라인 에디터 */
    /* overflow visible로 툴바/팝오버가 잘리지 않도록 */
    overflow: visible;
}

.subtask-note-editor__editorjs .codex-editor__redactor {
    padding-bottom: 100px !important;
    overflow: visible;
}

/* Editor.js 내부 스타일 오버라이드 */
.subtask-note-editor__editorjs .codex-editor {
    font-size: 14px;
}

.subtask-note-editor__editorjs .ce-block__content {
    max-width: 100%;
    margin: 0;
    /* 툴바를 좌측으로 옮기기 위해 padding 조정 */
    padding-left: 40px;
}

.subtask-note-editor__editorjs .ce-toolbar__content {
    max-width: 100%;
}

/* Editor.js 툴바 위치 조정 - 잘리지 않도록 */
.subtask-note-editor__editorjs .ce-toolbar {
    left: 0 !important;
    right: auto !important;
    z-index: 10000 !important;
    overflow: visible;
}

.subtask-note-editor__editorjs .ce-toolbar__actions {
    position: absolute;
    left: -24px;
    right: auto;
    flex-direction: row;
    overflow: visible;
    z-index: 10000;
}

/* 인라인 툴바 (선택 시 나타나는 포맷 툴바) - 모달 위에 표시 */
.subtask-note-editor__editorjs .ce-inline-toolbar {
    z-index: 10001 !important;
    position: fixed !important;
}

.subtask-note-editor__editorjs .ce-paragraph {
    line-height: 1.6;
    padding: 0;
}

.subtask-note-editor__editorjs .ce-header {
    padding: 0;
    margin-bottom: 8px;
}

.subtask-note-editor__editorjs .cdx-checklist__item {
    padding: 4px 0;
}

.subtask-note-editor__editorjs .cdx-list {
    padding-left: 20px;
}

.subtask-note-editor__editorjs .ce-code__textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    background: var(--surface-component-2, #f8fafc);
    border-radius: 4px;
}

.subtask-note-editor__editorjs .cdx-quote {
    border-left: 3px solid var(--blue-400, #60a5fa);
    padding-left: 12px;
    font-style: italic;
}

/* Editor.js 툴바 스타일 */
.subtask-note-editor__editorjs .ce-toolbar__plus,
.subtask-note-editor__editorjs .ce-toolbar__settings-btn {
    color: var(--text-secondary, #64748b);
    background: var(--surface, #fff);
}

.subtask-note-editor__editorjs .ce-toolbar__plus:hover,
.subtask-note-editor__editorjs .ce-toolbar__settings-btn:hover {
    background: var(--surface-hover, #f1f5f9);
}

.subtask-note-editor__editorjs .ce-inline-toolbar {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subtask-note-editor__editorjs .ce-inline-tool {
    color: var(--text-secondary, #64748b);
}

.subtask-note-editor__editorjs .ce-inline-tool:hover {
    background: var(--surface-hover, #f1f5f9);
}

.subtask-note-editor__editorjs .ce-inline-tool--active {
    color: var(--blue-500, #3b82f6);
}

/* Dark mode - 테두리/배경 제거했으므로 focus 스타일만 유지 */

[data-theme="dark"] .subtask-note-editor__editorjs .ce-paragraph,
[data-theme="dark"] .subtask-note-editor__editorjs .ce-header,
[data-theme="dark"] .subtask-note-editor__editorjs .cdx-list__item,
[data-theme="dark"] .subtask-note-editor__editorjs .cdx-checklist__item-text {
    color: var(--text-primary-dark, #f1f5f9);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-code__textarea {
    background: var(--surface-component-2-dark, #0f172a);
    color: var(--text-primary-dark, #f1f5f9);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-toolbar__plus,
[data-theme="dark"] .subtask-note-editor__editorjs .ce-toolbar__settings-btn {
    color: var(--text-secondary-dark, #94a3b8);
    background: var(--surface-dark, #1e293b);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-toolbar__plus:hover,
[data-theme="dark"] .subtask-note-editor__editorjs .ce-toolbar__settings-btn:hover {
    background: var(--surface-hover-dark, #334155);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-inline-toolbar {
    background: var(--surface-dark, #1e293b);
    border-color: var(--border-dark, #334155);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-inline-tool {
    color: var(--text-secondary-dark, #94a3b8);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-inline-tool:hover {
    background: var(--surface-hover-dark, #334155);
}

/* Editor.js Popover - 부모 overflow에 영향받지 않도록 fixed positioning */
.subtask-note-editor__editorjs .ce-popover {
    position: fixed !important;
    z-index: 10001 !important;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.subtask-note-editor__editorjs .ce-popover-item {
    padding: 8px 12px;
}

.subtask-note-editor__editorjs .ce-popover-item:hover {
    background: var(--surface-hover, #f1f5f9);
}

.subtask-note-editor__editorjs .ce-popover-item__icon {
    color: var(--text-secondary, #64748b);
}

.subtask-note-editor__editorjs .ce-popover-item__title {
    color: var(--text-primary, #1e293b);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-popover {
    background: var(--surface-dark, #1e293b);
    border-color: var(--border-dark, #334155);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-popover-item:hover {
    background: var(--surface-hover-dark, #334155);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-popover-item__icon {
    color: var(--text-secondary-dark, #94a3b8);
}

[data-theme="dark"] .subtask-note-editor__editorjs .ce-popover-item__title {
    color: var(--text-primary-dark, #f1f5f9);
}

/* ===== Member Assignee Display (읽기 전용) ===== */
.member-assignee-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface-component-2, #f8fafc);
    border-radius: 8px;
}

.member-assignee__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.member-assignee__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.member-assignee__role {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

[data-theme="dark"] .member-assignee-display {
    background: var(--surface-component-2-dark, #0f172a);
}

[data-theme="dark"] .member-assignee__name {
    color: var(--text-primary-dark, #f1f5f9);
}

[data-theme="dark"] .member-assignee__role {
    color: var(--text-secondary-dark, #94a3b8);
}

/* ===== Member Type Subtask - Work Plan TODO List ===== */
.workplan-item--member-editable .workplan-item__header {
    cursor: pointer;
}

.workplan-item--member-editable .workplan-item__icon {
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}

.workplan-item--member-editable .workplan-item__icon:hover {
    color: var(--blue-500, #3b82f6);
    transform: scale(1.1);
}

.workplan-item--member-editable .workplan-item__icon--done {
    color: var(--green-500, #22c55e);
}

/* Work Plan Add Button for Member Type */
.workplan-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    justify-content: center;
}

.workplan-add-btn:hover {
    border-color: var(--blue-400, #60a5fa);
    color: var(--blue-500, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}

.workplan-add-btn .material-symbols-rounded {
    font-size: 18px;
}

[data-theme="dark"] .workplan-add-btn {
    border-color: var(--border-dark, #334155);
    color: var(--text-secondary-dark, #94a3b8);
}

[data-theme="dark"] .workplan-add-btn:hover {
    border-color: var(--blue-500, #3b82f6);
    color: var(--blue-400, #60a5fa);
    background: rgba(59, 130, 246, 0.1);
}

/* Work Plan Inline Edit for Member Type */
.workplan-item__title-input,
.workplan-item__content-input {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 4px 6px;
    font-family: inherit;
    background: var(--surface, #fff);
    color: var(--text-primary, #1e293b);
    box-shadow: 0 0 0 2px var(--blue-400, #60a5fa);
}

.workplan-item__title-input {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 28px;
}

.workplan-item__content-input {
    font-size: 14px;
    line-height: 1.5;
    min-height: 32px;
    resize: vertical;
}

.workplan-item__title-input:focus,
.workplan-item__content-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--blue-500, #3b82f6), 0 0 0 4px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .workplan-item__title-input,
[data-theme="dark"] .workplan-item__content-input {
    background: var(--surface-dark, #1e293b);
    box-shadow: 0 0 0 2px var(--blue-500, #3b82f6);
    color: var(--text-primary-dark, #f1f5f9);
}

[data-theme="dark"] .workplan-item__title-input:focus,
[data-theme="dark"] .workplan-item__content-input:focus {
    box-shadow: 0 0 0 2px var(--blue-400, #60a5fa), 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* ===== Mobile Member Subtask Status Dropdown ===== */
.m-status-dropdown {
    position: relative;
    display: inline-block;
}

.m-status-badge--clickable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding-right: 4px;
}

.m-status-badge--clickable:hover {
    filter: brightness(0.95);
}

.m-status-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 140px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
}

.m-status-dropdown__menu button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 14px;
    color: var(--text, #1f2937);
    cursor: pointer;
}

.m-status-dropdown__menu button:hover {
    background: var(--surface-hover, #f3f4f6);
}

.m-status-dropdown__menu button:active {
    background: var(--surface-active, #e5e7eb);
}

[data-theme="dark"] .m-status-dropdown__menu {
    background: var(--surface-dark, #1e293b);
    border-color: var(--border-dark, #334155);
}

[data-theme="dark"] .m-status-dropdown__menu button {
    color: var(--text-dark, #e2e8f0);
}

[data-theme="dark"] .m-status-dropdown__menu button:hover {
    background: var(--surface-hover-dark, #334155);
}

/* ===== Assignee Type Toggle Button Group ===== */
/* btn-group--toggle: pov-view-tabs와 동일한 스타일 */
.btn-group--toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--surface-component-2);
    border-radius: 10px;
    padding: 3px;
    border: none;
    width: fit-content;
}

.btn-group--toggle .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 560;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 160ms ease;
    margin: 0;
}

.btn-group--toggle .btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.5);
}

.btn-group--toggle .btn--active,
.btn-group--toggle .btn[aria-pressed="true"] {
    color: var(--text-content);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .btn-group--toggle {
    background: var(--surface-component-2-dark, #1e293b);
}

[data-theme="dark"] .btn-group--toggle .btn {
    color: var(--muted-dark, #64748b);
}

[data-theme="dark"] .btn-group--toggle .btn:hover {
    color: var(--text-dark, #f1f5f9);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-group--toggle .btn--active,
[data-theme="dark"] .btn-group--toggle .btn[aria-pressed="true"] {
    color: var(--text-content-dark, #f1f5f9);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .card__templated-badge {
    background: var(--purple-400, #a78bfa);
    box-shadow: 0 2px 4px rgba(167, 139, 250, 0.4);
}

[data-theme="dark"] .card__templated-badge:hover {
    box-shadow: 0 4px 8px rgba(167, 139, 250, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   Project Overview (pov-*)
   Home 페이지 내 Project 탭에서 사용
   ═══════════════════════════════════════════════════════════════════ */

/* ── View tabs (공통 탭 컴포넌트) ── */
/* 사용처: pov-view-tabs (프로젝트 뷰 전환), td-view-tabs (태스크 상세 콘텐츠 탭) */
.pov-view-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface-component-2);
    border-radius: 10px;
    padding: 3px;
    min-width: max-content;
}

/* header-bar 내에서 사용 시 좌측 간격 */
.header-bar .pov-view-tabs {
    margin-left: 12px;
}

.pov-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 560;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 160ms ease;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    min-width: 80px;
    justify-content: center;
}

.pov-view-tab .material-symbols-rounded {
    font-size: 18px;
}

.pov-view-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.5);
}

.pov-view-tab--active,
.pov-view-tab[aria-selected="true"] {
    color: var(--text-content);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pov-view-tab--active:hover,
.pov-view-tab[aria-selected="true"]:hover {
    background: rgba(255, 255, 255, 0.92);
}

/* 탭 뱃지 */
.pov-view-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 11px;
    font-weight: 700;
}

.pov-view-tab .tab-badge[hidden] {
    display: none;
}

.pov-view-tab[aria-selected="true"] .tab-badge,
.pov-view-tab--active .tab-badge {
    background: rgba(0, 0, 0, 0.1);
}

/* 다크모드 준비 */
[data-theme="dark"] .pov-view-tab:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pov-view-tab--active,
[data-theme="dark"] .pov-view-tab[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pov-view-tab--active:hover,
[data-theme="dark"] .pov-view-tab[aria-selected="true"]:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Global Search ── */
.gs-container {
    position: relative;
    margin-left: 16px;
    flex-shrink: 0;
}

.gs-search {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 280px;
    /* height: 36px; */
    transition:
        background 0.15s,
        border-color 0.15s,
        box-shadow 0.15s;

    border-radius: 10px;
    border: 0;
    background: var(--surface-component-2) !important;
    padding: 2px 8px;
    font-size: 14px;
    color: var(--text-content);
    min-height: 20px;
    font-weight: 600;
}

.gs-search:focus-within {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--primary, #6c5df1);
    box-shadow: 0 0 0 2px rgba(108, 93, 241, 0.15);
}

.gs-search__icon {
    font-size: 16px;
    color: var(--text-secondary, #888);
    flex-shrink: 0;
}

.gs-search__input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--text, #1a1a1a);
    flex: 1;
    min-width: 0;
    padding: 0;
    line-height: 32px;
}

.gs-search__input::placeholder {
    color: var(--text-secondary, #999);
}

.gs-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary, #888);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.gs-search__clear:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text, #1a1a1a);
}

.gs-search__clear .material-symbols-rounded {
    font-size: 16px;
}

.gs-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 320px;
    max-width: 420px;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 4px;
}

.gs-dropdown__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.gs-dropdown__item:hover,
.gs-dropdown__item--active {
    background: rgba(108, 93, 241, 0.06);
}

.gs-dropdown__item-icon {
    font-size: 18px;
    color: var(--text-secondary, #888);
    flex-shrink: 0;
}

.gs-dropdown__item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gs-dropdown__item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-dropdown__item-topic {
    font-size: 11px;
    color: var(--text-secondary, #999);
}

.gs-dropdown__item-status {
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
}

.gs-dropdown__item-status--todo {
    color: #9ca3af;
    background: #f3f4f6;
}
.gs-dropdown__item-status--planned {
    color: #06b6d4;
    background: #cffafe;
}
.gs-dropdown__item-status--in_progress {
    color: #e84393;
    background: #fce7f3;
}
.gs-dropdown__item-status--in_review {
    color: #f97316;
    background: #fff7ed;
}
.gs-dropdown__item-status--done {
    color: #22c55e;
    background: #dcfce7;
}
.gs-dropdown__item-status--cancelled {
    color: #ef4444;
    background: #fef2f2;
}

.gs-dropdown__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    color: var(--text-secondary, #999);
    font-size: 13px;
}

/* Dark mode */
[data-theme="dark"] .gs-search {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .gs-search:focus-within {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary, #6c5df1);
}

[data-theme="dark"] .gs-dropdown {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .gs-dropdown__item:hover,
[data-theme="dark"] .gs-dropdown__item--active {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Compact Mode (1400px 이하) ── */
.gs-compact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--surface-component-2);
    color: var(--text-secondary, #888);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.gs-compact-btn:hover {
    background: var(--surface-component-3, rgba(0, 0, 0, 0.08));
    color: var(--text-content);
}

.gs-compact-btn .material-symbols-rounded {
    font-size: 20px;
}

/* ── Search Modal ── */
.gs-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}

.gs-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.gs-modal__content {
    position: relative;
    width: 90%;
    max-width: 560px;
    background: var(--surface, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: gs-modal-fadein 0.2s ease;
}

@keyframes gs-modal-fadein {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gs-modal__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.gs-search--modal {
    flex: 1;
    width: auto;
}

.gs-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #888);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
    flex-shrink: 0;
}

.gs-modal__close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-content);
}

.gs-dropdown--modal {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 400px;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Dark mode for modal */
[data-theme="dark"] .gs-modal__backdrop {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .gs-modal__content {
    background: #1a1a1a;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .gs-modal__header {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .gs-compact-btn {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .gs-compact-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Main layout ── */
.pov-main {
    flex: 1;
    overflow: hidden;
}

.pov-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    height: calc(100vh - 56px);
    gap: 0;
}

/* ── Left column: Task lists ── */
.pov-col-tasks {
    overflow-y: auto;
    padding: 24px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Section ── */
.pov-section {
    display: flex;
    flex-direction: column;
}

.pov-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}

.pov-section__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pov-section__header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pov-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--surface-component-2);
    color: var(--muted);
}

.pov-section__icon .material-symbols-rounded {
    font-size: 18px;
}

.pov-section__icon--active {
    background: linear-gradient(135deg, #e84393, #db2777);
    color: #fff;
}

.pov-section__icon--review {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
}

.pov-section__title {
    font-size: 15px;
    font-weight: 680;
    color: var(--text-content);
    letter-spacing: -0.2px;
    margin: 0;
}

.pov-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-component-2);
    border-radius: 11px;
}

.pov-section__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pov-section__body--list {
    gap: 4px;
}

.pov-section__body--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.pov-section__body--grid .pov-empty-state {
    grid-column: 1 / -1;
}

.pov-section__body--grid .pov-task-card {
    margin-bottom: 0;
}

.pov-section__body--compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Compact row (backlog list item) ── */
.pov-compact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease;
    min-height: 36px;
}

.pov-compact-row:hover {
    background: rgba(15, 23, 42, 0.04);
}

.pov-compact-row__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pov-compact-row__title {
    flex: 1;
    font-size: 13px;
    font-weight: 520;
    color: var(--text-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pov-compact-row__agent {
    font-size: 11px;
    font-weight: 520;
    color: var(--muted);
    flex-shrink: 0;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pov-compact-row__status {
    font-size: 11px;
    font-weight: 620;
    flex-shrink: 0;
    white-space: nowrap;
}

.pov-compact-row__time {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Filter chips ── */
.pov-filter-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.pov-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 580;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 16px;
    cursor: pointer;
    transition: all 140ms ease;
    white-space: nowrap;
}

.pov-filter-chip:hover {
    color: var(--text);
    border-color: rgba(0, 0, 0, 0.12);
    background: var(--surface-component-2);
}

.pov-filter-chip--active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(49, 130, 246, 0.06);
}

.pov-filter-chip--active:hover {
    background: rgba(49, 130, 246, 0.1);
}

/* ── Task card (overview list item) ── */
.pov-task-card {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--surface--border);
    padding: 0;
    cursor: pointer;
    transition: all 180ms cubic-bezier(0.2, 0, 0, 1);
    overflow: hidden;
}

.pov-task-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    border-color: rgba(0, 0, 0, 0.08);
}

.pov-task-card__status-indicator {
    width: 4px;
    flex-shrink: 0;
    border-radius: 4px 0 0 4px;
    background: var(--surface-component-2);
}

.pov-section--active .pov-task-card__status-indicator {
    background: var(--inprogress-sheen-gradient);
    background-size: 400%;
    animation: steam 10s linear infinite;
}

.pov-section--review .pov-task-card__status-indicator {
    background: linear-gradient(180deg, #f97316, #fb923c);
}

.pov-task-card__body {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pov-task-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pov-task-card__persona {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pov-task-card__status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 640;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pov-task-card__status-badge--in-progress {
    color: #e84393;
    background: #fce7f3;
}

.pov-task-card__status-badge--in-review {
    color: #f97316;
    background: #fff7ed;
}

.pov-task-card__status-badge--todo {
    color: #9ca3af;
    background: #f3f4f6;
}

.pov-task-card__status-badge--done {
    color: #22c55e;
    background: #dcfce7;
}

.pov-task-card__title {
    font-size: 14px;
    font-weight: 620;
    color: var(--text-content);
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pov-task-card__desc {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pov-task-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.pov-task-card__chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.pov-task-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 560;
    color: var(--muted);
    background: var(--surface-component-2);
    border-radius: 6px;
    white-space: nowrap;
}

.pov-task-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
}

.pov-task-card__meta .material-symbols-rounded {
    font-size: 14px;
}

/* ── Empty states ── */
.pov-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}

.pov-empty-state__icon {
    font-size: 36px;
    color: rgba(15, 23, 42, 0.15);
    margin-bottom: 10px;
}

.pov-empty-state__text {
    font-size: 14px;
    font-weight: 560;
    color: var(--muted);
    margin: 0 0 4px;
}

.pov-empty-state__hint {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.4);
    margin: 0;
}

/* ── Project Info section ── */
.pov-settings-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 560;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: color 140ms ease;
}

.pov-settings-link:hover {
    color: var(--accent);
}

.pov-settings-link .material-symbols-rounded {
    font-size: 16px;
}

.pov-project-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pov-project-meta__row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pov-project-meta__label {
    flex-shrink: 0;
    width: 80px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    padding-top: 2px;
}

.pov-project-meta__members,
.pov-project-meta__agents,
.pov-project-meta__topics {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pov-project-meta__stats {
    display: flex;
    gap: 16px;
}

.pov-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pov-stat__value {
    font-size: 20px;
    font-weight: 780;
    color: var(--text-content);
    letter-spacing: -0.5px;
}

.pov-stat__value--active {
    color: #e84393;
}

.pov-stat__value--review {
    color: #f97316;
}

.pov-stat__value--done {
    color: var(--ok);
}

.pov-stat__label {
    font-size: 11px;
    font-weight: 560;
    color: var(--muted);
}

/* ─── Right column: Just Chat ─── */
.pov-col-chat {
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    backdrop-filter: blur(var(--surface--blur));
    -webkit-backdrop-filter: blur(var(--surface--blur));
}

.pov-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.pov-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.pov-chat__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-content);
}

.pov-chat__header-left .material-symbols-rounded {
    font-size: 20px;
    color: var(--accent);
}

.pov-chat__title {
    font-size: 15px;
    font-weight: 680;
    margin: 0;
    letter-spacing: -0.2px;
}

.pov-chat__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Chat messages ── */
.pov-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Welcome screen ── */
.pov-chat__welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px 32px;
    flex: 1;
}

.pov-chat__welcome-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(49, 130, 246, 0.1),
        rgba(108, 93, 241, 0.1)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.pov-chat__welcome-icon .material-symbols-rounded {
    font-size: 28px;
    color: var(--accent);
}

.pov-chat__welcome-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-content);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.pov-chat__welcome-desc {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 24px;
    line-height: 1.55;
    max-width: 320px;
}

/* ── Suggestion chips ── */
.pov-chat__suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 300px;
}

.pov-chat__suggestion-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 540;
    color: var(--text);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--surface--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 160ms ease;
    text-align: left;
}

.pov-chat__suggestion-chip .material-symbols-rounded {
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

.pov-chat__suggestion-chip:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(49, 130, 246, 0.2);
    box-shadow: 0 2px 8px rgba(49, 130, 246, 0.08);
    transform: translateY(-1px);
}

/* ── Chat message ── */
.pov-chat__message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.pov-chat__message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--avatar-bg, var(--surface-component-2));
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.pov-chat__message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pov-chat__message-content {
    flex: 1;
    min-width: 0;
}

.pov-chat__message-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.pov-chat__message-name {
    font-size: 13px;
    font-weight: 660;
    color: var(--text-content);
}

.pov-chat__message-time {
    font-size: 11px;
    color: var(--muted);
}

.pov-chat__message-body {
    font-size: 14px;
    color: var(--text);
    line-height: 1.55;
    word-wrap: break-word;
}

.pov-chat__message-body p {
    margin: 0 0 6px;
}

.pov-chat__message-body p:last-child {
    margin-bottom: 0;
}

/* ── Inline create task button ── */
.pov-chat__message-actions {
    margin-top: 8px;
}

.pov-chat__inline-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(49, 130, 246, 0.06);
    border: 1px solid rgba(49, 130, 246, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 160ms ease;
}

.pov-chat__inline-create-btn .material-symbols-rounded {
    font-size: 16px;
}

.pov-chat__inline-create-btn:hover {
    background: rgba(49, 130, 246, 0.12);
    border-color: rgba(49, 130, 246, 0.25);
}

/* ── Floating "create task" button ── */
.pov-chat__create-task-float {
    padding: 8px 20px;
    flex-shrink: 0;
}

.pov-chat__create-task-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 620;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), #6c5df1);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 180ms ease;
    box-shadow: 0 2px 8px rgba(49, 130, 246, 0.25);
}

.pov-chat__create-task-btn .material-symbols-rounded {
    font-size: 18px;
}

.pov-chat__create-task-btn:hover {
    box-shadow: 0 4px 16px rgba(49, 130, 246, 0.35);
    transform: translateY(-1px);
}

.pov-chat__create-task-btn:active {
    transform: scale(0.98);
}

/* ── Chat input area ── */
.pov-chat__input-area {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}

.pov-chat__input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--surface--border);
    border-radius: 16px;
    padding: 10px 12px;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.pov-chat__input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1);
}

.pov-chat__input {
    flex: 1;
    min-height: 20px;
    max-height: 120px;
    overflow-y: auto;
    font-size: 14px;
    color: var(--text-content);
    line-height: 1.45;
    outline: none;
    word-wrap: break-word;
}

.pov-chat__input:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
}

.pov-chat__send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 160ms ease;
}

.pov-chat__send-btn:disabled {
    background: var(--surface-component-2);
    color: var(--muted);
    cursor: not-allowed;
}

.pov-chat__send-btn:not(:disabled):hover {
    background: #2970e0;
    transform: scale(1.05);
}

.pov-chat__send-btn .material-symbols-rounded {
    font-size: 18px;
}

.pov-chat__input-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 8px 4px 0;
    font-size: 11px;
    color: rgba(15, 23, 42, 0.35);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .pov-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .pov-col-tasks {
        padding: 16px;
        max-height: 50vh;
    }

    .pov-col-chat {
        border-left: none;
        border-top: 1px solid var(--line);
    }

    .pov-view-tabs {
        display: none;
    }

    .pov-section__body--grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PROJECT OVERVIEW VIEW SWAP  —  pov-view-* prefix
   ═══════════════════════════════════════════════════════════════ */

.pov-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* Home view: keep vertical centering like pdb-main */
[data-pov-home-view] {
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Widget Grid mode: pov-view 전체를 위젯 그리드로 사용 */
.pov-view--widget-grid {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow-x: clip;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    /* 스크롤바 숨김 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* 스크롤바 숨김 (Chrome, Safari) */
.pov-view--widget-grid::-webkit-scrollbar {
    display: none;
}

.pov-view--hidden {
    display: none !important;
}

/* Project view: enhanced backdrop-filter when active */
[data-pov-project-view]:not(.pov-view--hidden) {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px 32px 48px;
    max-width: 100%;
    box-sizing: border-box;
}

[data-pov-project-view]:not(.pov-view--hidden)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

/* 2-column grid layout */
.pov-view__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    margin: 0 auto;
    align-items: start;
}

.pov-view__col-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.pov-view__col-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Card-style sections */
.pov-section--card {
    background: var(--surface);
    backdrop-filter: blur(var(--surface--blur));
    -webkit-backdrop-filter: blur(var(--surface--blur));
    border: 1px solid var(--surface--border);
    border-radius: 16px;
    padding: 20px;
}

.pov-section--stretch {
    flex: 1;
}

/* Section dot indicator */
.pov-section__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

/* Section empty state */
.pov-section__empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--muted);
    font-size: 13px;
}

.pov-section__empty .material-symbols-rounded {
    font-size: 18px;
    opacity: 0.5;
}

/* Settings link in section header */
.pov-section__settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--muted);
    transition:
        background 140ms ease,
        color 140ms ease;
    text-decoration: none;
}

.pov-section__settings-link:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-content);
}

.pov-section__settings-link .material-symbols-rounded {
    font-size: 18px;
}

/* ── Project info grid ── */
.pov-info-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.pov-info-grid__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pov-info-grid__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}

/* ── Stats row ── */
.pov-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.pov-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
}

.pov-stat-chip__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-content);
    line-height: 1.1;
}

.pov-stat-chip__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}

.pov-stat-chip--purple {
    background: rgba(232, 67, 147, 0.08);
}
.pov-stat-chip--purple .pov-stat-chip__value {
    color: #e84393;
}

.pov-stat-chip--amber {
    background: rgba(249, 115, 22, 0.08);
}
.pov-stat-chip--amber .pov-stat-chip__value {
    color: #f97316;
}

.pov-stat-chip--green {
    background: rgba(34, 197, 94, 0.08);
}
.pov-stat-chip--green .pov-stat-chip__value {
    color: #22c55e;
}

/* ── Responsive: stack columns on narrow screens ── */
@media (max-width: 820px) {
    .pov-view__grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PROJECT TIMELINE (GANTT CHART)  —  ptl-* prefix
   ═══════════════════════════════════════════════════════════════ */

/* ── Page base ── */
.project-timeline-page {
    background: var(--bg);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Toolbar ── */
.ptl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
    flex-shrink: 0;
}

.ptl-toolbar__left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ptl-toolbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ptl-toolbar__date-label {
    font-size: 14px;
    font-weight: 620;
    color: var(--text-content);
    margin-left: 8px;
    white-space: nowrap;
}

/* ── Nav buttons ── */
.ptl-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 6px;
    border: 1px solid var(--surface--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 580;
    transition: all 140ms ease;
}

.ptl-nav-btn .material-symbols-rounded {
    font-size: 20px;
}

.ptl-nav-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-sm);
}

.ptl-nav-btn--today {
    padding: 0 12px;
    font-weight: 640;
    color: var(--accent);
}

/* ── Floating zoom control (inside chart) ── */
.ptl-zoom-floating {
    position: absolute;
    top: 48px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ptl-zoom-floating__btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: all 140ms ease;
    white-space: nowrap;
}

.ptl-zoom-floating__btn:hover {
    color: var(--text-content);
    background: rgba(0, 0, 0, 0.04);
}

.ptl-zoom-floating__btn--active {
    color: var(--accent);
    background: rgba(49, 130, 246, 0.1);
    font-weight: 700;
}

/* ── Filter chips ── */
.ptl-filter-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ptl-filter-chip {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 140ms ease;
    white-space: nowrap;
}

.ptl-filter-chip:hover {
    color: var(--text-content);
    background: rgba(0, 0, 0, 0.03);
}

.ptl-filter-divider {
    width: 1px;
    height: 16px;
    background: var(--line);
    margin: 0 4px;
    flex-shrink: 0;
}

.ptl-filter-chip--active {
    color: var(--accent);
    background: rgba(49, 130, 246, 0.08);
    border-color: rgba(49, 130, 246, 0.15);
}

/* ── Main area ── */
.ptl-main {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ── Gantt layout ── */
.ptl-gantt {
    display: flex;
    height: 100%;
    position: relative;
}

/* ── Sidebar (left) ── */
.ptl-gantt__sidebar {
    width: 320px;
    min-width: 320px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ptl-gantt__sidebar-header {
    height: 37px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    box-sizing: border-box;
}

.ptl-gantt__sidebar-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ptl-gantt__sidebar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Sidebar group header ── */
.ptl-sidebar-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.015);
    transition: background 140ms ease;
    user-select: none;
    box-sizing: border-box;
}

.ptl-sidebar-group:hover {
    background: rgba(0, 0, 0, 0.035);
}

.ptl-sidebar-group__toggle {
    font-size: 18px;
    color: var(--muted);
    flex-shrink: 0;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: transform 200ms ease, background 140ms ease, color 140ms ease;
}

.ptl-sidebar-group__toggle:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-content);
}

.ptl-sidebar-group__label-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding: 4px 6px;
    margin: -4px 0;
    border-radius: 4px;
    transition: background 140ms ease;
}

.ptl-sidebar-group__label-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.ptl-sidebar-group__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ptl-sidebar-group__title {
    font-size: 13px;
    font-weight: 660;
    color: var(--text-content);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptl-sidebar-group__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   Topic Chat Panel (Floating Window 내부)
   ══════════════════════════════════════════════════════════════════ */

/* 플로팅 윈도우 내 메시지 입력 영역 */
.floating-window .msg-list .workbench-input-fixed {
    margin: 0;
    padding: 0;
    padding-bottom: 0;
    border-radius: 0;
}

.floating-window .msg-list .msg-list__input-area {
    margin: 0;
    border-radius: 0 0 12px 12px;
}

.floating-window .msg-list .chat-input-wrapper {
    border-radius: 0 0 12px 12px;
}

/* 채팅 테마 적용 (msg-list에서 상속) */
.floating-window .msg-list {
    height: 100%;
}

/* ── Sidebar task row ── */
.ptl-sidebar-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 28px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 140ms ease;
    box-sizing: border-box;
}

.ptl-sidebar-task:hover {
    background: rgba(49, 130, 246, 0.04);
}

/* 태스크 하이라이트 애니메이션 (뒤로가기 시 해당 태스크 강조) */
.ptl-sidebar-task--highlight {
    animation: task-highlight-blink 1.5s ease-out 2;
}

@keyframes task-highlight-blink {
    0% {
        background: var(--primary);
    }
    50% {
        background: rgba(49, 130, 246, 0.15);
    }
    100% {
        background: transparent;
    }
}

.ptl-sidebar-task__indicator {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ptl-sidebar-task__title {
    font-size: 13px;
    font-weight: 520;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptl-sidebar-task__avatar {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.ptl-sidebar-task__status {
    font-size: 10px;
    font-weight: 650;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Timeline (right) ── */
.ptl-gantt__timeline {
    flex: 1;
    min-width: 0;
    overflow: auto;
    position: relative;
}

.ptl-gantt__timeline-header {
    display: flex;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.ptl-gantt__timeline-body {
    position: relative;
    min-height: 200px;
    overflow: hidden;
}

/* ── Timeline column headers ── */
.ptl-timeline-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 37px;
    padding: 0 4px;
    flex-shrink: 0;
    border-right: 1px solid var(--line);
    box-sizing: border-box;
    gap: 1px;
}

.ptl-timeline-col--weekend {
    background: rgba(0, 0, 0, 0.02);
}

.ptl-timeline-col--odd-month {
    background: rgba(0, 0, 0, 0.025);
}

.ptl-timeline-col--month-start {
    border-left: 2px solid var(--muted);
}

.ptl-timeline-col--today {
    background: rgba(49, 130, 246, 0.06);
}

.ptl-timeline-col__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

.ptl-timeline-col__sublabel {
    font-size: 9px;
    font-weight: 500;
    color: var(--muted);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.1;
}

.ptl-timeline-col--today .ptl-timeline-col__label {
    color: var(--accent);
    font-weight: 700;
}

/* ── Timeline column stripes (body background for month shading) ── */
.ptl-timeline-col-stripe {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.ptl-timeline-col-stripe--odd {
    background: rgba(0, 0, 0, 0.025);
}

/* ── Timeline row backgrounds ── */
.ptl-timeline-row {
    position: absolute;
    left: 0;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
}

.ptl-timeline-row--group {
    background: rgba(0, 0, 0, 0.015);
}

/* ── Task bars ── */
.ptl-bar {
    position: absolute;
    height: 24px;
    border-radius: 4px;
    cursor: grab;
    transition: filter 140ms ease;
    overflow: visible;
    z-index: 2;
}

.ptl-bar:active {
    cursor: grabbing;
}

.ptl-bar:hover {
    filter: brightness(1.08);
    z-index: 5;
}

.ptl-bar--dragging {
    transition: none !important;
    z-index: 10;
}

.ptl-bar--dragging .ptl-bar__handle {
    opacity: 1;
}

.ptl-bar__label {
    display: block;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 620;
    color: #fff;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Status-specific bar styles */
.ptl-bar--in_progress {
    background: var(--inprogress-sheen-gradient) !important;
    background-size: var(--inprogress-sheen-size) !important;
    animation: inprogress-sheen var(--inprogress-sheen-speed) linear infinite;
}

.ptl-bar--done {
    opacity: 0.7;
}

.ptl-bar--cancelled {
    opacity: 0.5;
}

/* in_progress + startDate 있으면 바 전체 이동 불가 (포인터로 표시) */
.ptl-bar--move-disabled {
    cursor: pointer;
}

.ptl-bar--move-disabled:active {
    cursor: pointer;
}

/* ── Bar resize handles ── */
.ptl-bar__handle {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 10px;
    cursor: ew-resize;
    z-index: 3;
    opacity: 0;
    transition: opacity 140ms ease;
}

.ptl-bar__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    border-radius: 1.5px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.ptl-bar__handle--left {
    left: -3px;
    border-radius: 4px 0 0 4px;
}

.ptl-bar__handle--left::after {
    left: 3px;
}

.ptl-bar__handle--right {
    right: -3px;
    border-radius: 0 4px 4px 0;
}

.ptl-bar__handle--right::after {
    right: 3px;
}

.ptl-bar:hover .ptl-bar__handle {
    opacity: 1;
}

.ptl-bar__handle--disabled {
    cursor: not-allowed;
    opacity: 0 !important;
    pointer-events: none;
}

/* 날짜가 정의되지 않은 바는 반투명 처리 */
.ptl-bar--no-dates {
    opacity: 0.3;
}

.ptl-bar--no-dates:hover {
    opacity: 0.5;
}

/* ── Start date locked marker (chevron outside bar) ── */
.ptl-bar__locked-marker {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid currentColor;
    opacity: 0.9;
    cursor: help;
    z-index: 4;
}

.ptl-bar__locked-marker:hover {
    opacity: 1;
}

/* ── Bar hover tooltip ── */
.ptl-bar-tooltip {
    position: absolute;
    z-index: 50;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transform: translate(-50%, -100%);
    max-width: 240px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ptl-bar-tooltip__title {
    font-size: 12px;
    font-weight: 650;
    color: var(--text-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.ptl-bar-tooltip__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.ptl-bar-tooltip__status {
    color: var(--muted);
    font-weight: 600;
}

.ptl-bar-tooltip__dates {
    color: var(--text-content);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ptl-bar-tooltip::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.97);
}

/* ── Drag hint popover ── */
.ptl-drag-hint {
    position: absolute;
    z-index: 100;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: var(--text-content, #1a1a1a);
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transform: translateX(-50%);
}

.ptl-drag-hint::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--text-content, #1a1a1a);
}

/* ── Bar context menu ── */
.ptl-bar-ctx {
    position: fixed;
    z-index: 100;
    min-width: 170px;
    padding: 6px;
    background: var(--surface-component-2);
    border: 1px solid var(--surface-component--border);
    border-radius: 16px;
    backdrop-filter: blur(var(--surface-component--blur));
    -webkit-backdrop-filter: blur(var(--surface-component--blur));
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.06);
}

.ptl-bar-ctx__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-content);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 100ms ease;
}

.ptl-bar-ctx__item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ptl-bar-ctx__icon {
    font-size: 16px;
    color: var(--muted);
}

.ptl-bar-ctx__divider {
    height: 1px;
    background: var(--line);
    margin: 4px 6px;
}

.ptl-bar-ctx__info {
    padding: 4px 10px 2px;
}

.ptl-bar-ctx__info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.ptl-bar-ctx__info-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

.ptl-bar-ctx__info-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-content);
    font-variant-numeric: tabular-nums;
}

/* ── Today marker ── */
.ptl-gantt__today-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--danger);
    z-index: 4;
    pointer-events: none;
}

.ptl-gantt__today-marker::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger);
}

/* ── Empty state ── */
.ptl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
}

.ptl-empty-state__icon {
    font-size: 48px;
    color: var(--muted);
    opacity: 0.3;
}

.ptl-empty-state__text {
    font-size: 16px;
    font-weight: 620;
    color: var(--text-content);
    margin: 0;
}

.ptl-empty-state__hint {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* ── Scrollbar styling ── */
.ptl-gantt__sidebar-body::-webkit-scrollbar,
.ptl-gantt__timeline::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.ptl-gantt__sidebar-body::-webkit-scrollbar-thumb,
.ptl-gantt__timeline::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

.ptl-gantt__sidebar-body::-webkit-scrollbar-track,
.ptl-gantt__timeline::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ptl-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 8px 12px;
    }

    .ptl-toolbar__left,
    .ptl-toolbar__right {
        justify-content: center;
    }

    .ptl-gantt__sidebar {
        width: 200px;
        min-width: 200px;
    }

    .ptl-sidebar-task {
        padding-left: 16px;
    }

    .ptl-sidebar-task__status {
        display: none;
    }

    .project-timeline-page .pov-view-tabs {
        display: none;
    }
}

/* ── Date picker popover ── */
.ptl-date-popover {
    position: fixed;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
    min-width: 240px;
}

.ptl-date-popover__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-content);
    margin-bottom: 12px;
}

.ptl-date-popover__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.ptl-date-popover__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ptl-date-popover__input {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--surface--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
    color: var(--text);
    outline: none;
    transition: border-color 140ms ease;
}

.ptl-date-popover__input:focus {
    border-color: var(--accent);
}

.ptl-date-popover__input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.04);
}

.ptl-date-popover__info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    padding: 6px 8px;
    background: rgba(255, 152, 0, 0.06);
    border-radius: 6px;
    margin-bottom: 10px;
}

.ptl-date-popover__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ptl-date-popover__btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 620;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 140ms ease;
}

.ptl-date-popover__btn--save {
    background: var(--accent);
    color: #fff;
}

.ptl-date-popover__btn--save:hover {
    filter: brightness(1.08);
}

.ptl-date-popover__btn--cancel {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-content);
}

.ptl-date-popover__btn--cancel:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* ── Sidebar popout button ── */
.ptl-sidebar-task__popout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 140ms ease;
    opacity: 0;
}

.ptl-sidebar-task:hover .ptl-sidebar-task__popout-btn {
    opacity: 1;
}

.ptl-sidebar-task__popout-btn:hover {
    background: rgba(49, 130, 246, 0.08);
    color: var(--accent);
}

.ptl-sidebar-task__popout-btn .material-symbols-rounded {
    font-size: 16px;
}

/* ── Sidebar date button ── */
.ptl-sidebar-task__date-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 140ms ease;
    opacity: 0;
}

.ptl-sidebar-task:hover .ptl-sidebar-task__date-btn {
    opacity: 1;
}

.ptl-sidebar-task__date-btn:hover {
    background: rgba(49, 130, 246, 0.08);
    color: var(--accent);
}

.ptl-sidebar-task__date-btn .material-symbols-rounded {
    font-size: 16px;
}

/* task with dates set: always show icon */
.ptl-sidebar-task__date-btn--has-date {
    opacity: 0.6;
    color: var(--accent);
}

.ptl-sidebar-task:hover .ptl-sidebar-task__date-btn--has-date {
    opacity: 1;
}

.ptl-sidebar-task__schedule {
    display: inline-flex;
    align-items: center;
    color: #6366f1;
    flex-shrink: 0;
}
.ptl-sidebar-task__schedule .material-symbols-rounded {
    font-size: 15px;
}
[data-theme="dark"] .ptl-sidebar-task__schedule {
    color: #818cf8;
}

/* ═══════════════════════════════════════════════════════════════
   PROJECT DASHBOARD  —  pdb-* prefix
   /projects/:projId/dashboard
   ═══════════════════════════════════════════════════════════════ */

/* ── Page base (CSS Grid 2-column) ── */
.project-dashboard-page,
.project-home-page {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    overflow: hidden;
}

.project-home-page > .pdb-sidebar {
    grid-row: 1 / -1;
}

.project-home-page > .header-bar {
    grid-column: 2;
    grid-row: 1;
    background: transparent;
    border-bottom: none;
}

.project-home-page > .pdb-main {
    grid-column: 2;
    grid-row: 2;
}
.pdb-sidebar__active-avatar .material-symbols-rounded {
    font-size: 18px !important;
}
/* ── Background gradient animation ── */
.pdb-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.pdb-bg__gradient {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        -70deg,
        #e8f4ff 0%,
        #f0e6ff 25%,
        #ffe6f0 50%,
        #ffe9d0 75%,
        #d5ebff 100%
    );
    background-size: 200% 200%;
    animation: pdb-gradient 30s ease infinite;
    opacity: 1;
}

@keyframes pdb-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ── Floating agents overlay ── */
.pdb-agents {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pdb-agents.pdb-agents--ready {
    opacity: 1;
    visibility: visible;
}

.pdb-floating-agent {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0.95;
    transform: translate3d(
        calc(var(--agent-x, 50) * 1vw),
        calc(var(--agent-y, 50) * 1vh),
        0
    );
    transition: opacity 0.3s;
    will-change: transform;
}

.pdb-floating-agent--instant {
    transition: none !important;
}

.pdb-floating-agent:hover {
    opacity: 1;
}

.pdb-floating-agent-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform-origin: center center;
}

.pdb-floating-agent-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
}

.pdb-floating-agent-avatar .material-symbols-rounded {
    font-size: 26px;
    color: rgba(15, 23, 42, 0.75);
}

/* Animation classes (controlled by JS) */
.pdb-anim__idle {
    animation: pdb-float-idle 8s ease-in-out infinite;
    animation-delay: var(--busy-delay, 0s);
}

.pdb-anim__speaking {
    animation: pdb-speaking 1.4s cubic-bezier(0.2, 0, 0, 1) 1;
    transform-origin: 50% 55%;
}

.pdb-anim__transition {
    transition: transform 0.56s ease;
}

@keyframes pdb-float-idle {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes pdb-speaking {
    0% {
        transform: rotate(0deg) scale(1);
    }
    6% {
        transform: rotate(-22deg) scale(1.18);
    }
    12% {
        transform: rotate(26deg) scale(1.14);
    }
    18% {
        transform: rotate(-18deg) scale(1.17);
    }
    24% {
        transform: rotate(16deg) scale(1.12);
    }
    30% {
        transform: rotate(-12deg) scale(1.1);
    }
    40% {
        transform: rotate(6deg) scale(1.05);
    }
    50% {
        transform: rotate(-3deg) scale(1.02);
    }
    65% {
        transform: rotate(1deg) scale(1.01);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.pdb-floating-agent-name {
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
    background: rgba(255, 255, 255, 0.9);
    padding: 3px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pdb-floating-agent-kw {
    font-size: 10px;
    font-weight: 400;
    color: rgba(15, 23, 42, 0.45);
    text-align: center;
    margin-top: 2px;
}

.pdb-floating-agent-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.85);
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    margin-bottom: 10px;
}

.pdb-floating-agent-bubble--visible {
    animation: pdb-bubble-pop 3s ease-in-out forwards;
}

@keyframes pdb-bubble-pop {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.8) translateY(5px);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.9) translateY(-5px);
    }
}

/* ══════════════════════════════════════
   Sidebar (260px, glassmorphism)
   ══════════════════════════════════════ */

.pdb-sidebar {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    padding: 24px 0 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* ── Project Row (selector + settings button) ── */
.pdb-sidebar__project-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
    flex-shrink: 0;
    padding-right: 16px;
}

.pdb-sidebar__project-row > .pdb-sidebar__project-selector {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.pdb-sidebar__settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    margin-top: 1px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    color: rgba(15, 23, 42, 0.45);
    font-family: inherit;
}

.pdb-sidebar__settings-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    color: rgba(15, 23, 42, 0.75);
}

.pdb-sidebar__settings-btn .material-symbols-rounded {
    font-size: 20px;
}

/* ── Project Dropdown (sidebar top) ── */
.pdb-sidebar__project-selector {
    position: relative;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.pdb-sidebar__project-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    font-size: 14px;
    color: rgba(15, 23, 42, 0.88);
}

.pdb-sidebar__project-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.pdb-sidebar__project-icon {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.5);
    flex-shrink: 0;
}

.pdb-sidebar__project-selector .pdb-sidebar__project-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.pdb-sidebar__project-chevron {
    font-size: 20px;
    color: rgba(15, 23, 42, 0.4);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.pdb-sidebar__project-menu:not([hidden])
    ~ .pdb-sidebar__project-btn
    .pdb-sidebar__project-chevron,
.pdb-sidebar__project-selector:has(.pdb-sidebar__project-menu:not([hidden]))
    .pdb-sidebar__project-chevron {
    transform: rotate(180deg);
}

.pdb-sidebar__project-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    max-height: 320px; /* 약 3.5개 아이템 높이 */
    overflow-y: auto;
    z-index: 100;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdb-sidebar__project-menu[hidden] {
    display: none;
}

.pdb-sidebar__project-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(15, 23, 42, 0.8);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}

.pdb-sidebar__project-option:hover {
    background: rgba(15, 23, 42, 0.05);
}

.pdb-sidebar__project-option .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.4);
}

.pdb-sidebar__project-option--current {
    background: rgba(49, 130, 246, 0.08);
    color: #3182f6;
    font-weight: 600;
}

.pdb-sidebar__project-option--current .material-symbols-rounded {
    color: #3182f6;
}

.pdb-sidebar__project-option--current:hover {
    background: rgba(49, 130, 246, 0.12);
}

.pdb-sidebar__project-divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.1);
    margin: 6px 0;
}

.pdb-sidebar__project-option--add {
    color: #3182f6;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.pdb-sidebar__project-option--add .material-symbols-rounded {
    color: #3182f6;
}

.pdb-sidebar__project-option--more {
    color: rgba(15, 23, 42, 0.5);
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: 12px;
}

.pdb-sidebar__project-option--more:hover {
    color: rgba(15, 23, 42, 0.8);
    background: rgba(15, 23, 42, 0.03);
}

.pdb-sidebar__project-option--more .material-symbols-rounded {
    font-size: 18px;
    color: inherit;
}

/* 주제, 라벨, 태스크유형, 프로젝트 추가 다이얼로그 너비 통일 */
[data-dialog="topic-edit"] .dialog__panel,
[data-dialog="label-edit"] .dialog__panel,
[data-dialog="tasktype-edit"] .dialog__panel,
[data-dialog="add-project"] .dialog__panel {
    width: 480px;
    max-width: 90vw;
}

/* 상단: 프로젝트 + 아카이브 (스크롤 가능) */
.pdb-sidebar__top {
    flex: 1;
    min-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 8px;
    margin-right: -4px;
}

/* 하단: Active Now + 프로필/메뉴 */
.pdb-sidebar__bottom {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: auto;
    padding-top: 8px;
    padding-right: 16px;
}

/* 섹션 헤더 */
.pdb-sidebar__header {
    justify-content: space-between;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 8px 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.pdb-sidebar__header > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pdb-sidebar__header .material-symbols-rounded {
    font-size: 18px;
}

/* more 링크 */
.pdb-sidebar__more {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.45);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.15s;
}

.pdb-sidebar__more:hover {
    color: #3182f6;
}

/* 헤더 액션 버튼 (New 버튼 등) */
.pdb-sidebar__header-action {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.55);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.15s;
}

.pdb-sidebar__header-action:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--primary);
}

.pdb-sidebar__header-action .material-symbols-rounded {
    font-size: 14px;
}

[data-theme="dark"] .pdb-sidebar__header-action {
    color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .pdb-sidebar__header-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary);
}

/* ── Sidebar Tasks section ── */
.pdb-sidebar__tasks {
    margin-bottom: 8px;
}

.pdb-sidebar__task-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #e84393;
    background: rgba(232, 67, 147, 0.1);
    padding: 1px 7px;
    border-radius: 8px;
}

.pdb-sidebar__task-group {
    margin-bottom: 4px;
}

.pdb-sidebar__task-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.45);
}

.pdb-sidebar__task-group-count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.4);
}

.pdb-sidebar__task-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pdb-sidebar__task-dot--active {
    background: #e84393;
}

.pdb-sidebar__task-dot--review {
    background: #f97316;
}

.pdb-sidebar__task-dot--in_review {
    background: #f97316;
}

.pdb-sidebar__task-dot--in_progress {
    background: #e84393;
}

.pdb-sidebar__task-dot--todo {
    background: #9ca3af;
}

.pdb-sidebar__task-dot--planned {
    background: #06b6d4;
}

.pdb-sidebar__task-dot--done {
    background: #22c55e;
}

.pdb-sidebar__task-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 280px; /* 약 7개 항목 */
    overflow-y: auto;
}

.pdb-sidebar__task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.pdb-sidebar__task-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

.pdb-sidebar__task-item-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.pdb-sidebar__task-item-avatar {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdb-sidebar__task-item-avatar .material-symbols-rounded {
    font-size: 12px;
}

.pdb-sidebar__task-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.pdb-sidebar__task-more {
    display: block;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.4);
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s;
}

.pdb-sidebar__task-more:hover {
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.6);
}

.pdb-sidebar__task-more[hidden] {
    display: none;
}

.pdb-sidebar__task-empty {
    padding: 12px 10px;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.35);
    text-align: center;
}

/* ── Projects section ── */
.pdb-sidebar__projects {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdb-sidebar__project {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.pdb-sidebar__project:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* 현재 프로젝트 하이라이트 */
.pdb-sidebar__project--current {
    background: rgba(49, 130, 246, 0.08);
    border-left: 3px solid #3182f6;
    padding-left: 11px;
}

.pdb-sidebar__project--current:hover {
    background: rgba(49, 130, 246, 0.12);
}

.pdb-sidebar__project-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.2);
    flex-shrink: 0;
}

.pdb-sidebar__project--current .pdb-sidebar__project-dot {
    background: #3182f6;
}

.pdb-sidebar__project-name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-sidebar__project--current .pdb-sidebar__project-name {
    color: #3182f6;
    font-weight: 600;
}

.pdb-sidebar__empty {
    padding: 12px 10px;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.4);
}

/* ── Archives section ── */
.pdb-sidebar__archives {
    /* margin-top: 8px; */
}

.pdb-sidebar__archive-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px; /* 약 7개 항목 */
    overflow-y: auto;
}

.pdb-sidebar__archive {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.pdb-sidebar__archive:hover {
    background: rgba(255, 255, 255, 0.6);
}

.pdb-sidebar__archive-icon {
    font-size: 16px;
    color: rgba(15, 23, 42, 0.45);
    flex-shrink: 0;
}

.pdb-sidebar__archive-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-sidebar__archive-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(15, 23, 42, 0.75);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}

.pdb-sidebar__archive-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

.pdb-sidebar__archive-item .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.4);
    flex-shrink: 0;
}

.pdb-sidebar__archive-item--active {
    background: rgba(49, 130, 246, 0.06);
    color: #3182f6;
    font-weight: 600;
}

.pdb-sidebar__archive-item--active .material-symbols-rounded {
    color: #3182f6;
}

.pdb-sidebar__archive-item--active:hover {
    background: rgba(49, 130, 246, 0.1);
}

.pdb-sidebar__archive-time {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: rgba(15, 23, 42, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Active Now section ── */
.pdb-sidebar__active {
    /* min-height: 200px; */
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.pdb-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.pdb-sidebar__active-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}

.pdb-sidebar__active-member:hover {
    background: rgba(255, 255, 255, 0.5);
}

.pdb-sidebar__active-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--avatar-bg, #e8f2ff);
    color: rgba(15, 23, 42, 0.72);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.pdb-sidebar__active-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pdb-sidebar__active-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pdb-sidebar__online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    border: 1.5px solid #fff;
    pointer-events: none;
}

.pdb-sidebar__active-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pdb-sidebar__empty-text {
    padding: 12px 10px;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.35);
    text-align: center;
}

.pdb-sidebar__member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.15s;
    cursor: default;
}

.pdb-sidebar__member:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* 아바타: 기본 */
.pdb-sidebar__avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdb-sidebar__avatar .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.6);
}

.pdb-sidebar__avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 에이전트: 둥근 사각형 */
.pdb-sidebar__avatar--agent {
    border-radius: 10px;
}

/* 유저: 원형, 멤버 색상 배경 */
.pdb-sidebar__avatar--user {
    border-radius: 50%;
    background: var(--avatar-bg, #e8f2ff);
    color: rgba(15, 23, 42, 0.72);
    overflow: hidden;
}

.pdb-sidebar__avatar--user .material-symbols-rounded {
    color: rgba(15, 23, 42, 0.72);
}

.pdb-sidebar__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pdb-sidebar__name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-sidebar__status {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.48);
}

.pdb-sidebar__status--working {
    color: #22c55e;
}

.pdb-sidebar__status--online {
    color: #3182f6;
}

.pdb-sidebar__status--resting {
    color: rgba(15, 23, 42, 0.4);
}

/* ── Divider ── */
.pdb-sidebar__divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    margin: 8px 6px;
}

/* ── Profile menu item ── */
.pdb-sidebar__menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    margin-bottom: 8px;
}

.pdb-sidebar__menu-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* ── Menu links ── */
.pdb-sidebar__menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdb-sidebar__menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(15, 23, 42, 0.7);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}

.pdb-sidebar__menu-link:hover {
    background: rgba(255, 255, 255, 0.6);
    color: rgba(15, 23, 42, 0.9);
}

.pdb-sidebar__menu-link .material-symbols-rounded {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.5);
}

.pdb-sidebar__menu-link:hover .material-symbols-rounded {
    color: rgba(15, 23, 42, 0.7);
}

/* ══════════════════════════════════════
   Top bar (project name + view tabs)
   ══════════════════════════════════════ */

.pdb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 720px;
    padding: 0 0 16px;
    margin-bottom: 8px;
}

.pdb-topbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pdb-topbar__home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: rgba(15, 23, 42, 0.5);
    text-decoration: none;
    transition: all 0.15s;
}

.pdb-topbar__home:hover {
    background: rgba(255, 255, 255, 0.6);
    color: rgba(15, 23, 42, 0.8);
}

.pdb-topbar__home .material-symbols-rounded {
    font-size: 20px;
}

.pdb-topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdb-topbar__project-name {
    display: none;
    font-size: 14px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════
   Main content (centered)
   ══════════════════════════════════════ */

.pdb-main {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    min-height: 0;
    overflow-y: auto;
    animation: pdb-content-fade-in 300ms ease-out;
}

@keyframes pdb-content-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pdb-content {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 72px;
}

/* ── Greeting ── */
.pdb-greeting {
    text-align: center;
}

.pdb-title {
    text-align: left;
    letter-spacing: -0.02em;
    font-size: 48px;
    font-weight: 100;
    color: rgba(15, 23, 42, 0.9);
    margin: 0 0 8px;
    line-height: 1.3;
}

.pdb-subtitle {
    font-size: 15px;
    color: rgba(15, 23, 42, 0.45);
    margin: 0;
    font-weight: 500;
    text-align: left;
}

/* ══════════════════════════════════════
   Focus section: In-Progress tasks
   ══════════════════════════════════════ */

.pdb-focus {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdb-focus__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdb-focus__icon {
    font-size: 22px;
    color: #e84393;
}

.pdb-focus__title {
    font-size: 15px;
    font-weight: 660;
    color: rgba(15, 23, 42, 0.88);
    margin: 0;
}

.pdb-focus__count {
    font-size: 12px;
    font-weight: 700;
    color: #e84393;
    background: rgba(232, 67, 147, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.pdb-focus__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdb-focus__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
    color: rgba(15, 23, 42, 0.4);
}

.pdb-focus__empty .material-symbols-rounded {
    font-size: 36px;
    opacity: 0.3;
}

.pdb-focus__empty p {
    margin: 0;
    font-size: 14px;
}

/* ── Focus card (glassmorphism) ── */
.pdb-focus-card {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.pdb-focus-card:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.pdb-focus-card__indicator {
    width: 4px;
    flex-shrink: 0;
    background: var(--inprogress-sheen-gradient);
    background-size: var(--inprogress-sheen-size);
    animation: inprogress-sheen var(--inprogress-sheen-speed) linear infinite;
}

.pdb-focus-card__body {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdb-focus-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pdb-focus-card__persona {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 550;
    color: rgba(15, 23, 42, 0.6);
    min-width: 0;
}

.pdb-focus-card__persona-avatar {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdb-focus-card__persona-avatar .material-symbols-rounded {
    font-size: 14px;
}

.pdb-focus-card__status-badge {
    font-size: 10px;
    font-weight: 650;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    background: rgba(232, 67, 147, 0.1);
    color: #e84393;
}

.pdb-focus-card__title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.9);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-focus-card__desc {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.55);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pdb-focus-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.pdb-focus-card__chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.pdb-focus-card__chip {
    font-size: 10px;
    font-weight: 560;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.55);
    white-space: nowrap;
}

.pdb-focus-card__meta {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.4);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Review icon/count variants ── */
.pdb-focus__icon--review {
    color: #f59e0b;
}

.pdb-focus__count--review {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.pdb-focus__icon--backlog {
    color: #9ca3af;
}

.pdb-focus__count--backlog {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

/* ══════════════════════════════════════
   Backlog list (inline task items)
   ══════════════════════════════════════ */

.pdb-backlog {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdb-backlog__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdb-backlog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pdb-backlog-item:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(2px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.pdb-backlog-item__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.pdb-backlog-item__agent {
    flex-shrink: 0;
}

.pdb-backlog-item__agent .avatar-agent {
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.pdb-backlog-item__agent .avatar-agent .material-symbols-rounded {
    font-size: 14px;
}

.pdb-backlog-item__title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pdb-backlog-item__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pdb-backlog-item__topic {
    font-size: 11px;
    font-weight: 560;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.5);
    white-space: nowrap;
}

.pdb-backlog-item__badge {
    font-size: 10px;
    font-weight: 650;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.pdb-backlog-item__badge--todo {
    background: rgba(156, 163, 175, 0.12);
    color: #6b7280;
}

.pdb-backlog-item__badge--planned {
    background: rgba(96, 165, 250, 0.12);
    color: #3b82f6;
}

.pdb-backlog-item__time {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.35);
    white-space: nowrap;
}

/* ══════════════════════════════════════
   Carousel (horizontal scroll)
   ══════════════════════════════════════ */

.pdb-carousel {
    position: relative;
    width: 100%;
}

.pdb-carousel__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 12px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.pdb-carousel__track::-webkit-scrollbar {
    display: none;
}

/* Override focus card for carousel layout */
.pdb-carousel__track .pdb-focus-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    min-width: 280px;
    max-width: 280px;
}

.pdb-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 4px;
}

.pdb-carousel__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    color: rgba(15, 23, 42, 0.5);
    cursor: pointer;
    transition: all 0.15s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pdb-carousel__arrow:hover {
    background: rgba(255, 255, 255, 0.95);
    color: rgba(15, 23, 42, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pdb-carousel__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.pdb-carousel__arrow .material-symbols-rounded {
    font-size: 18px;
}

.pdb-carousel__dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pdb-carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.15);
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.pdb-carousel__dot--active {
    background: #e84393;
    width: 16px;
    border-radius: 3px;
}

/* ══════════════════════════════════════
   Stat cards
   ══════════════════════════════════════ */

.pdb-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdb-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    text-align: left;
}

.pdb-stat-card:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.pdb-stat-card:active {
    transform: translateX(2px);
}

.pdb-stat-icon {
    font-size: 22px;
    color: rgba(15, 23, 42, 0.5);
    flex-shrink: 0;
}

.pdb-stat-text {
    font-size: 15px;
    color: rgba(15, 23, 42, 0.7);
    line-height: 1.4;
}

.pdb-stat-text strong {
    font-weight: 700;
    color: rgba(15, 23, 42, 0.9);
    font-size: 17px;
}

/* 더보기 카드 */
.pdb-stat-card--more {
    text-decoration: none;
    color: inherit;
}

.pdb-stat-card--more .pdb-stat-icon {
    color: var(--primary, #6c5df1);
}

.pdb-stat-card--more .pdb-stat-text {
    font-weight: 600;
    color: var(--primary, #6c5df1);
}

/* ══════════════════════════════════════
   Quick Actions (My Tasks + Inbox Buttons)
   ══════════════════════════════════════ */

.pdb-quick-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pdb-quick-action {
    position: relative;
}

.pdb-quick-action__trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 24px;
    min-width: 180px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.4s ease-out,
        opacity 0.3s ease;
}

.pdb-quick-action__trigger:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.pdb-quick-action__trigger:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

/* 검토해야 할 태스크 - 주황색 계열 */
.pdb-quick-action__trigger--review {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    position: relative;
}

.pdb-quick-action__trigger--review::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #fdba74 0%, #fb923c 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pdb-quick-action__trigger--review:hover::before {
    opacity: 1;
}

.pdb-quick-action__trigger--review > * {
    position: relative;
    z-index: 1;
}

/* 참여 중인 태스크 - 분홍/빨간색 계열 */
.pdb-quick-action__trigger--contrib {
    background: linear-gradient(135deg, #fecdd3 0%, #fda4af 100%);
    position: relative;
}

.pdb-quick-action__trigger--contrib::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #fda4af 0%, #fb7185 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pdb-quick-action__trigger--contrib:hover::before {
    opacity: 1;
}

.pdb-quick-action__trigger--contrib > * {
    position: relative;
    z-index: 1;
}

/* 라벨 텍스트 */
.pdb-quick-action__label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(60, 60, 60, 0.8);
    transition: color 0.3s ease;
}

.pdb-quick-action__trigger:hover .pdb-quick-action__label {
    color: rgba(40, 40, 40, 0.9);
}

/* 카운트 숫자 - 우측 하단에 크게 */
.pdb-quick-action__count {
    align-self: flex-end;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: rgba(30, 30, 30, 0.85);
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s ease;
}

.pdb-quick-action__trigger:hover .pdb-quick-action__count {
    transform: scale(1.05);
    color: rgba(20, 20, 20, 0.95);
}

/* My Tasks Dropdown - 화면 우측 플로팅 (inbox 스타일) */
.my-tasks-dropdown {
    position: fixed;
    top: 72px;
    right: 24px;
    left: auto;
    bottom: auto;
    width: 420px;
    max-height: calc(100vh - 96px);
    background: var(--surface, #fff);
    backdrop-filter: blur(var(--surface--blur, 20px));
    -webkit-backdrop-filter: blur(var(--surface--blur, 20px));
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.my-tasks-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.my-tasks-dropdown__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-content, #0f172a);
}

.my-tasks-dropdown__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(15, 23, 42, 0.5);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.my-tasks-dropdown__close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.8);
}

/* Content area */
.my-tasks-dropdown__content {
    flex: 1;
    overflow-y: auto;
    max-height: 480px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Task Sections */
.my-tasks-section {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.my-tasks-section:last-of-type {
    border-bottom: none;
}

.my-tasks-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(15, 23, 42, 0.02);
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.my-tasks-section__icon {
    font-size: 20px;
}

.my-tasks-section__icon--review {
    color: #f97316;
}

.my-tasks-section__icon--contrib {
    color: #6c5df1;
}

.my-tasks-section__title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
    flex: 1;
}

.my-tasks-section__count {
    font-size: 12px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.5);
    background: rgba(15, 23, 42, 0.08);
    padding: 2px 8px;
    border-radius: 999px;
}

.my-tasks-section__list {
    /* 빈 리스트는 자동으로 숨겨짐 */
}

.my-tasks-section__empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.4);
}

/* 섹션이 비어있을 때 숨김 */
.my-tasks-section[hidden] {
    display: none;
}

/* Filter Chips (하위 호환용, 사용 안함) */
.my-tasks-filter-chips {
    display: none;
}

.my-tasks-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.55);
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}

.my-tasks-filter-chip:hover {
    background: rgba(15, 23, 42, 0.1);
    color: rgba(15, 23, 42, 0.75);
}

.my-tasks-filter-chip--active {
    background: rgba(108, 93, 241, 0.1);
    color: var(--primary, #6c5df1);
    border-color: rgba(108, 93, 241, 0.2);
}

.my-tasks-filter-chip--active:hover {
    background: rgba(108, 93, 241, 0.15);
    color: var(--primary, #6c5df1);
}

/* Task List */
.my-tasks-dropdown__list {
    flex: 1;
    overflow-y: auto;
    max-height: 420px;
}

.my-tasks-dropdown__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
    color: rgba(15, 23, 42, 0.4);
    font-size: 14px;
}

/* Task Item - 더 크게 */
.my-tasks-item {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    text-decoration: none;
    color: inherit;
}

.my-tasks-item:hover {
    background: rgba(15, 23, 42, 0.04);
}

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

.my-tasks-item__status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.my-tasks-item__status--in_progress {
    background: #e84393;
    box-shadow: 0 0 0 3px rgba(232, 67, 147, 0.15);
}

.my-tasks-item__status--in_review {
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.my-tasks-item__status--todo {
    background: #9ca3af;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.15);
}

.my-tasks-item__status--done {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.my-tasks-item__status--planned {
    background: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.my-tasks-item__content {
    flex: 1;
    min-width: 0;
}

.my-tasks-item__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-content, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    line-height: 1.4;
}

.my-tasks-item__desc {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    line-height: 1.4;
}

.my-tasks-item__meta {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.45);
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .pdb-quick-actions {
        flex-direction: row;
        gap: 12px;
    }

    .pdb-quick-action__trigger {
        min-width: 140px;
        padding: 16px 18px;
    }

    .pdb-quick-action__count {
        font-size: 28px;
    }

    .my-tasks-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        transform: none;
        border-radius: 16px 16px 0 0;
    }
}

/* ══════════════════════════════════════
   Just Chat Panel (inline)
   ══════════════════════════════════════ */

/* ── Just Chat 백드롭 (확장 모드용) ── */
.pdb-just-chat__backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
    opacity: 0;
    transition:
        background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdb-just-chat__backdrop--active {
    background: rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    opacity: 1;
}

.pdb-just-chat {
    margin-top: 140px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 확장 모드: 화면 중앙 고정 오버레이 */
.pdb-just-chat--expanded {
    position: fixed;
    inset: 0;
    margin-top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.pdb-just-chat--expanded .pdb-just-chat__panel {
    pointer-events: auto;
    width: min(800px, calc(100vw - 80px));
    max-height: min(85vh, calc(100dvh - 60px));
    box-shadow:
        0 32px 80px rgba(15, 23, 42, 0.24),
        0 16px 40px rgba(15, 23, 42, 0.12);
    border-radius: 20px;
}

.pdb-just-chat__panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* ── Header: Agent selector + actions ── */
.pdb-just-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.pdb-just-chat__agent-selector {
    position: relative;
    flex: 1;
    min-width: 0;
}

.pdb-just-chat__agent-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    text-align: left;
}

.pdb-just-chat__agent-btn:hover {
    background: rgba(15, 23, 42, 0.04);
}

.pdb-just-chat__agent-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 130, 246, 0.1);
    flex-shrink: 0;
    overflow: hidden;
}

.pdb-just-chat__agent-avatar .avatar-agent {
    width: 100%;
    height: 100%;
}

.pdb-just-chat__agent-avatar .material-symbols-rounded {
    font-size: 18px;
    color: #3182f6;
}

.pdb-just-chat__agent-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pdb-just-chat__agent-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-just-chat__agent-desc {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-just-chat__agent-chev {
    font-size: 20px;
    color: rgba(15, 23, 42, 0.35);
    flex-shrink: 0;
    transition: transform 0.2s;
}

/* ── Agent dropdown menu ── */
.pdb-just-chat__agent-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdb-just-chat__agent-menu[hidden] {
    display: none;
}

.pdb-just-chat__agent-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    text-align: left;
}

.pdb-just-chat__agent-option:hover {
    background: rgba(15, 23, 42, 0.04);
}

.pdb-just-chat__agent-option--selected {
    background: rgba(49, 130, 246, 0.08);
}

.pdb-just-chat__agent-option--selected:hover {
    background: rgba(49, 130, 246, 0.12);
}

.pdb-just-chat__agent-option-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.pdb-just-chat__agent-option-avatar .avatar-agent {
    width: 100%;
    height: 100%;
}

.pdb-just-chat__agent-option-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pdb-just-chat__agent-option-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.88);
}

.pdb-just-chat__agent-option-desc {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
}

/* ── Header actions ── */
.pdb-just-chat__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Collapse button (확장 모드에서만 표시) ── */
.pdb-just-chat__collapse-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.pdb-just-chat__collapse-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.65);
}

.pdb-just-chat__collapse-btn .material-symbols-rounded {
    font-size: 20px;
}

.pdb-just-chat--expanded .pdb-just-chat__collapse-btn {
    display: flex;
}

.pdb-just-chat__clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.pdb-just-chat__clear-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.65);
}

.pdb-just-chat__clear-btn .material-symbols-rounded {
    font-size: 20px;
}

/* ── Messages area ── */
.pdb-just-chat__messages {
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.35s ease;
    overscroll-behavior: contain;
}

.pdb-just-chat--expanded .pdb-just-chat__messages {
    flex: 1;
    min-height: 50vh;
    max-height: calc(85vh - 180px);
    padding: 24px 28px;
}

.pdb-just-chat__messages::-webkit-scrollbar {
    width: 4px;
}

.pdb-just-chat__messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
}

/* ── Welcome state ── */
.pdb-just-chat__welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
}

.pdb-just-chat__welcome[hidden] {
    display: none;
}

.pdb-just-chat__welcome-icon {
    font-size: 36px;
    color: rgba(15, 23, 42, 0.15);
}

.pdb-just-chat__welcome-icon .material-symbols-rounded {
    font-size: 36px;
}

.pdb-just-chat__welcome-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
    margin: 0;
}

.pdb-just-chat__welcome-desc {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.4);
    margin: 0;
}

/* ── Message ── */
.pdb-just-chat__message {
    display: flex;
    gap: 10px;
    padding: 8px 0;
}

.pdb-just-chat__message--user {
    flex-direction: row-reverse;
}

.pdb-just-chat__message--error .pdb-just-chat__msg-body {
    color: #ef4444;
}

.pdb-just-chat__msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    background: var(--avatar-bg, rgba(15, 23, 42, 0.1));
}

.pdb-just-chat__msg-avatar .avatar-agent {
    width: 100%;
    height: 100%;
}

.pdb-just-chat__msg-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdb-just-chat__msg-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pdb-just-chat__message--user .pdb-just-chat__msg-content {
    align-items: flex-end;
}

.pdb-just-chat__msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdb-just-chat__message--user .pdb-just-chat__msg-header {
    flex-direction: row-reverse;
}

.pdb-just-chat__msg-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
}

.pdb-just-chat__msg-time {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.35);
}

.pdb-just-chat__msg-body {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.85);
    letter-spacing: -0.02em;
    word-break: break-word;
}

.pdb-just-chat__message--user .pdb-just-chat__msg-body {
    background: rgba(49, 130, 246, 0.08);
    padding: 8px 12px;
    border-radius: 12px 2px 12px 12px;
    max-width: 85%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 확장 모드: assistant 메시지 — 버블 제거, 마크다운 전체 폭 */
.pdb-just-chat--expanded
    .pdb-just-chat__message--assistant
    .pdb-just-chat__msg-body {
    background: transparent;
    padding: 0;
    border-radius: 0;
    max-width: 100%;
    line-height: 1.7;
}

/* 비확장 모드: assistant 메시지 — 기존 버블 유지 */
.pdb-just-chat__message--assistant .pdb-just-chat__msg-body {
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 12px;
    border-radius: 2px 12px 12px 12px;
    max-width: 85%;
}

/* 확장 모드: user 메시지도 max-width 확대 */
.pdb-just-chat--expanded
    .pdb-just-chat__message--user
    .pdb-just-chat__msg-body {
    max-width: 70%;
}

.pdb-just-chat__msg-body p {
    margin: 0 0 8px;
}

.pdb-just-chat__msg-body p:last-child {
    margin-bottom: 0;
}

.pdb-just-chat__msg-body code {
    font-size: 12px;
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: "SF Mono", Monaco, monospace;
}

.pdb-just-chat__msg-body pre {
    background: rgba(15, 23, 42, 0.04);
    padding: 12px 14px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 13px;
    margin: 12px 0;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.pdb-just-chat__msg-body pre code {
    background: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

.pdb-just-chat__msg-body ul,
.pdb-just-chat__msg-body ol {
    margin: 12px 0;
    padding-left: 24px;
}

.pdb-just-chat__msg-body li {
    margin: 6px 0;
}

.pdb-just-chat__msg-body h1,
.pdb-just-chat__msg-body h2,
.pdb-just-chat__msg-body h3 {
    margin: 16px 0 8px;
    font-weight: 500;
    color: var(--text-title, rgba(15, 23, 42, 0.95));
}

.pdb-just-chat__msg-body h1 {
    font-size: 18px;
}
.pdb-just-chat__msg-body h2 {
    font-size: 16px;
}
.pdb-just-chat__msg-body h3 {
    font-size: 15px;
}

.pdb-just-chat__msg-body blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.02);
    border-radius: 0 8px 8px 0;
    color: rgba(15, 23, 42, 0.6);
}

.pdb-just-chat__msg-body a {
    color: var(--accent, #3182f6);
    text-decoration: none;
}

.pdb-just-chat__msg-body a:hover {
    text-decoration: underline;
}

.pdb-just-chat__msg-body table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    margin: 12px 0;
    font-size: 13px;
    display: block;
    overflow-x: auto;
}

.pdb-just-chat__msg-body th,
.pdb-just-chat__msg-body td {
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 8px 12px;
    text-align: left;
}

.pdb-just-chat__msg-body th {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 600;
}

/* ── Typing indicator ── */
.pdb-just-chat__typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.pdb-just-chat__typing-dots {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
}

.pdb-just-chat__typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.3);
    animation: pdb-jc-dot-bounce 1.4s infinite ease-in-out both;
}

.pdb-just-chat__typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}
.pdb-just-chat__typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}
.pdb-just-chat__typing-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes pdb-jc-dot-bounce {
    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Input area ── */
.pdb-just-chat__input-area {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.pdb-just-chat__input-wrap {
    display: flex;
    flex-direction: column;
}

.pdb-just-chat__input {
    display: block;
    width: 100%;
    min-height: 48px;
    max-height: 120px;
    padding: 14px 14px 6px;
    font-size: 14px;
    font-family:
        "Pretendard Variable",
        "Pretendard",
        -apple-system,
        sans-serif;
    color: rgba(15, 23, 42, 0.88);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    line-height: 1.5;
}

.pdb-just-chat__input::placeholder {
    color: rgba(15, 23, 42, 0.38);
}

.pdb-just-chat__tool-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 10px;
}

.pdb-just-chat__tool-hint {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.35);
    flex: 1;
}

.pdb-just-chat__tool-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.pdb-just-chat__tool-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.56);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
    font-family: inherit;
}

.pdb-just-chat__tool-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-content);
}

.pdb-just-chat__tool-btn .material-symbols-rounded {
    font-size: 18px;
    margin-right: 2px;
}

.pdb-just-chat__pending-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px;
}

.pdb-just-chat__send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 14px;
    border: none;
    background: #3182f6;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

.pdb-just-chat__send-btn:disabled {
    background: rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.3);
    cursor: not-allowed;
}

.pdb-just-chat__send-btn:not(:disabled):hover {
    background: #2970e0;
    transform: scale(1.03);
}

.pdb-just-chat__send-btn .material-symbols-rounded {
    font-size: 16px;
}

/* ══════════════════════════════════════
   Popovers (right-side panels)
   ══════════════════════════════════════ */

.pdb-popover {
    position: fixed;
    inset: unset;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    width: 360px;
    min-height: 360px;
    max-height: 420px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.pdb-popover:popover-open {
    display: flex;
}

.pdb-popover__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 14px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.88);
}

.pdb-popover__header .material-symbols-rounded {
    font-size: 20px;
    color: rgba(15, 23, 42, 0.5);
}

.pdb-popover__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}

.pdb-popover__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.15s;
}

.pdb-popover__item:hover {
    background: rgba(15, 23, 42, 0.04);
}

.pdb-popover__item-title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-popover__item-status {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.55);
    align-self: flex-start;
}

.pdb-popover__empty {
    display: none;
    padding: 32px 20px;
    text-align: center;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.4);
}

.pdb-popover__list:empty + .pdb-popover__empty {
    display: block;
}

/* ══════════════════════════════════════
   Scrollbar styling
   ══════════════════════════════════════ */

.pdb-sidebar__top::-webkit-scrollbar,
.pdb-sidebar__list::-webkit-scrollbar,
.pdb-sidebar__active::-webkit-scrollbar {
    width: 4px;
}

.pdb-sidebar__top::-webkit-scrollbar-thumb,
.pdb-sidebar__list::-webkit-scrollbar-thumb,
.pdb-sidebar__active::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
    transition: background 0.2s;
}

.pdb-sidebar__top:hover::-webkit-scrollbar-thumb,
.pdb-sidebar__list:hover::-webkit-scrollbar-thumb,
.pdb-sidebar__active:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
}

.pdb-sidebar__top::-webkit-scrollbar-track,
.pdb-sidebar__list::-webkit-scrollbar-track,
.pdb-sidebar__active::-webkit-scrollbar-track {
    background: transparent;
}

/* ══════════════════════════════════════
   Home: Stat Cards Grid (5 cards)
   ══════════════════════════════════════ */

.pdb-stats--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.pdb-stat-icon--active {
    color: #e84393;
}
.pdb-stat-icon--review {
    color: #f97316;
}
.pdb-stat-icon--todo {
    color: #9ca3af;
}
.pdb-stat-icon--done {
    color: #22c55e;
}

/* ══════════════════════════════════════
   Home: Popover item (agent + title + badge)
   ══════════════════════════════════════ */

.pdb-popover__item a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.pdb-popover__item a .avatar-agent {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 14px;
}

.pdb-popover__item-title {
    flex: 1;
    min-width: 0;
}

.pdb-popover__item-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.5);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ══════════════════════════════════════
   Overview: Task Card (pov-task-card)
   ══════════════════════════════════════ */

.pov-task-card {
    display: flex;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.pov-task-card:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.pov-task-card__status-indicator {
    width: 4px;
    flex-shrink: 0;
}

.pov-task-card__body {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
}

.pov-task-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pov-task-card__persona {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.6);
}

.pov-task-card__persona-name {
    font-weight: 500;
}

.pov-task-card__persona .avatar-agent {
    width: 20px;
    height: 20px;
    font-size: 12px;
}

.pov-task-card__status-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.55);
}

.pov-task-card__title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.88);
    margin: 0 0 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pov-task-card__desc {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.5);
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pov-task-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pov-task-card__chips {
    display: flex;
    gap: 4px;
}

.pov-task-card__chip {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(108, 93, 241, 0.08);
    color: rgba(108, 93, 241, 0.7);
}

.pov-task-card__meta {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.35);
}

/* ══════════════════════════════════════
   Overview: Project Info Helpers
   ══════════════════════════════════════ */

.pov-avatar-stack__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--avatar-bg, #9ca3af);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    margin-right: -6px;
    border: 2px solid #fff;
    overflow: hidden;
}

.pov-avatar-stack__item .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pov-avatar-stack__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.5);
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}

.pov-agent-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.04);
    font-size: 12px;
    color: rgba(15, 23, 42, 0.7);
    margin-right: 4px;
    margin-bottom: 4px;
}

.pov-agent-chip .avatar-agent {
    width: 20px;
    height: 20px;
    font-size: 12px;
}

.pov-topic-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(108, 93, 241, 0.06);
    color: rgba(108, 93, 241, 0.65);
    font-size: 12px;
    margin-right: 4px;
    margin-bottom: 4px;
}

/* ══════════════════════════════════════
   Overview: Chat Typing
   ══════════════════════════════════════ */

.pov-chat__typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
}

.pov-chat__typing-dots {
    display: flex;
    gap: 4px;
}

.pov-chat__typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.3);
    animation: pov-typing-bounce 1.4s infinite ease-in-out;
}

.pov-chat__typing-dots span:nth-child(2) {
    animation-delay: 0.16s;
}
.pov-chat__typing-dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes pov-typing-bounce {
    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ══════════════════════════════════════
   Responsive
   ══════════════════════════════════════ */

@media (max-width: 768px) {
    .project-dashboard-page,
    .project-home-page {
        grid-template-columns: 1fr;
    }

    .pdb-sidebar {
        display: none;
    }

    .project-home-page > .header-bar,
    .project-home-page > .pdb-main {
        grid-column: 1;
    }

    .pdb-main {
        padding: 24px 16px;
    }

    .pdb-topbar {
        max-width: 100%;
        padding: 0 0 12px;
    }

    .pdb-topbar__project-name {
        display: none;
    }

    .pdb-title {
        font-size: 32px;
    }

    .pdb-carousel__track .pdb-focus-card {
        flex: 0 0 260px;
        min-width: 260px;
        max-width: 260px;
    }

    .pdb-carousel__nav {
        display: none;
    }

    .pdb-popover {
        right: 8px;
        width: calc(100vw - 16px);
        max-width: 360px;
    }

    /* 아티팩트 파일 목록 모바일 */
    .artifact-file-item {
        padding: 12px;
        gap: 10px;
    }

    .artifact-file-item__icon {
        width: 36px;
        height: 36px;
    }

    .artifact-file-item__icon .material-symbols-rounded {
        font-size: 20px;
    }

    .artifact-file-item__name {
        font-size: 13px;
    }

    .artifact-file-item__meta {
        font-size: 11px;
    }

    .artifact-file-item__actions {
        opacity: 1;
        gap: 2px;
    }

    .artifact-file-item__action-btn {
        width: 36px;
        height: 36px;
    }

    .artifact-file-item__tools {
        display: none;
    }

    /* 마크다운 라이트박스 모바일 */
    .artifact-lightbox__container--markdown {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        height: 100%;
    }

    .artifact-lightbox__content--markdown {
        padding: 16px;
        border-radius: 0;
    }

    .artifact-lightbox__markdown-body {
        font-size: 14px;
    }

    .artifact-lightbox__markdown-body pre {
        padding: 12px;
        font-size: 12px;
    }

    .artifact-lightbox__text-body {
        font-size: 13px;
        padding: 16px;
    }

    /* 라이트박스 헤더 모바일 */
    .artifact-lightbox__header {
        padding: 10px 12px;
    }

    .artifact-lightbox__title {
        font-size: 13px;
    }

    .artifact-lightbox__actions {
        gap: 4px;
    }

    .artifact-lightbox__actions .icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* ═══════════════════════════════════════════
   Skeleton Loading
   ═══════════════════════════════════════════ */

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-block {
    background: linear-gradient(
        90deg,
        var(--surface-component-2) 25%,
        rgba(25, 31, 40, 0.1) 50%,
        var(--surface-component-2) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-block--title {
    width: 80px;
    height: 16px;
}

.skeleton-block--pill {
    width: 28px;
    height: 20px;
    border-radius: 999px;
}

.skeleton-block--row {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}

.skeleton-block--text-lg {
    width: 85%;
    height: 18px;
    margin-bottom: 8px;
}

.skeleton-block--text-sm {
    width: 60%;
    height: 14px;
}

.card--skeleton {
    pointer-events: none;
    min-height: 120px;
}

.column--skeleton {
    pointer-events: none;
}

.skeleton-block--avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-msg-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.skeleton-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Gantt sidebar skeleton */
.skeleton-gantt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

/* ═══════════════════════════════════════════
   Card Appear (subtle fade on DOM rebuild)
   ═══════════════════════════════════════════ */

@keyframes card-appear {
    from {
        opacity: 0.85;
    }
    to {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════
   Board Stale Indicator (SSE disconnect)
   ═══════════════════════════════════════════ */

@keyframes stale-indicator {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.board--stale::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: stale-indicator 1.5s ease-in-out infinite;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.7;
}

.deletion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    background: rgba(244, 63, 94, 0.08);
    border: 1px solid rgba(244, 63, 94, 0.2);
    color: #7f1d1d;
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(8px);
}

.deletion-banner__content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.deletion-banner__content .material-symbols-rounded {
    color: #dc2626;
    font-size: 20px;
    margin-top: 2px;
}

.deletion-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.deletion-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .deletion-banner {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.3);
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .deletion-banner__content .material-symbols-rounded {
    color: #fca5a5;
}

/* ===== JustChat Instruction Popup (Create Task) ===== */
.just-chat__instruction-popup {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.just-chat__instruction-popup--open {
    opacity: 1;
}

.just-chat__instruction-popup--closing {
    opacity: 0;
}

.just-chat__instruction-popup__dialog {
    position: relative;
    width: calc(100% - 32px);
    max-width: 380px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.15s ease;
}

.just-chat__instruction-popup--open .just-chat__instruction-popup__dialog {
    transform: translateY(0) scale(1);
}

.just-chat__instruction-popup__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.just-chat__instruction-popup__header .material-symbols-rounded:first-child {
    font-size: 22px;
    color: var(--primary);
}

.just-chat__instruction-popup__header h3 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.just-chat__instruction-popup__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s;
}

.just-chat__instruction-popup__close:hover {
    background: rgba(0, 0, 0, 0.06);
}
/* [data-onboarding-target] {
    padding: 24px;
} */
.just-chat__instruction-popup__close .material-symbols-rounded {
    font-size: 18px;
}

.just-chat__instruction-popup__desc {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.just-chat__instruction-popup__input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;

    background-color: #ededed;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
    box-sizing: border-box;
}

.just-chat__instruction-popup__input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.just-chat__instruction-popup__input::placeholder {
    color: var(--muted);
}

.just-chat__instruction-popup__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.just-chat__instruction-popup__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.15s,
        transform 0.1s;
}

.just-chat__instruction-popup__btn:active {
    transform: scale(0.97);
}

.just-chat__instruction-popup__btn--cancel {
    background: rgba(0, 0, 0, 0.06);
    color: var(--muted);
}

.just-chat__instruction-popup__btn--cancel:hover {
    background: rgba(0, 0, 0, 0.1);
}

.just-chat__instruction-popup__btn--confirm {
    background: var(--primary);
    color: #fff;
}

.just-chat__instruction-popup__btn--confirm:hover {
    filter: brightness(1.1);
}

.just-chat__instruction-popup__btn--confirm .material-symbols-rounded {
    font-size: 18px;
}

[data-theme="dark"] .just-chat__instruction-popup {
    background: rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .just-chat__instruction-popup__dialog {
    background: #1e293b;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .just-chat__instruction-popup__input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .just-chat__instruction-popup__input:focus {
    border-color: var(--primary);
}

[data-theme="dark"] .just-chat__instruction-popup__btn--cancel {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .just-chat__instruction-popup__btn--cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .just-chat__instruction-popup__close:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ===========================================
   Archived Task Banner (하단 고정 스타일)
   =========================================== */
.archived-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: 480px;
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(100, 116, 139, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    animation: viewer-banner-in 0.35s ease-out;
    box-shadow: 0 4px 24px rgba(100, 116, 139, 0.35);
}

.archived-banner__icon {
    font-size: 18px;
    opacity: 0.85;
    flex-shrink: 0;
}

.archived-banner__text {
    flex: 1;
}

[data-theme="dark"] .archived-banner {
    background: rgba(71, 85, 105, 0.95);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ========================================
   Disapprove Plan Dialog
   ======================================== */
dialog.disapprove-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 420px;
    width: calc(100% - 32px);
    padding: 0;
    border: none;
    border-radius: 16px;
    background: var(--bg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

dialog.disapprove-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.disapprove-dialog__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.disapprove-dialog__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-content);
}

.disapprove-dialog__desc {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

.disapprove-dialog__textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-content);
    background: var(--surface-component);
    border: 1px solid var(--line);
    border-radius: 8px;
    resize: vertical;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.disapprove-dialog__textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.15);
}

.disapprove-dialog__textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.disapprove-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

[data-theme="dark"] dialog.disapprove-dialog {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ===========================================
   Project Chat Page - Fullscreen Chat UI
   =========================================== */

/* Chat 페이지 - 그라데이션 배경 위 glassmorphism */
.project-chat-page {
    background: transparent !important;
}

/* Chat 페이지 헤더: ViewTabs 가운데 정렬, 검색 우측 배치 */
.project-chat-page > .header-bar > .header-bar__left {
    flex: 1;
    justify-content: center;
    position: relative;
}

.project-chat-page > .header-bar > .header-bar__left .pov-view-tabs {
    margin-left: 0;
}

.project-chat-page > .header-bar > .header-bar__left .gs-container {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

/* Task/Archive 페이지: ViewTabs만 화면 정중앙 fixed (헤더는 그대로) */
.project-timeline-page .header-bar .pov-view-tabs,
.archiving-mode .header-bar .pov-view-tabs {
    position: fixed;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    z-index: 1001;
    margin-left: 0;
}

/* Task 페이지: 검색 버튼 우측 고정 */
.project-timeline-page > .header-bar > .header-bar__left {
    flex: 1;
    position: relative;
}

.project-timeline-page > .header-bar > .header-bar__left .gs-container {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

/* Task Detail 페이지: ViewTabs 화면 정중앙 fixed */
.task-detail-page .header-bar .pov-view-tabs {
    position: fixed;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    z-index: 1001;
    margin-left: 0;
    transition: opacity 0.15s ease;
}

/* 제목 편집 중일 때 탭 숨기기 */
.task-detail-page:has(.task-detail-header__title-input:not([hidden])) .header-bar .pov-view-tabs {
    opacity: 0;
    pointer-events: none;
}

/* Task Detail 페이지: 검색 버튼 우측 고정 */
.task-detail-page > .header-bar > .header-bar__left {
    flex: 1;
    position: relative;
}

.task-detail-page > .header-bar > .header-bar__left .gs-container {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

/* Task Detail 페이지: 좁은 화면 반응형 (960px 이하) */
@media (max-width: 960px) {
    /* 제목 영역 숨기기 */
    .task-detail-page .task-detail-header__title-wrap {
        display: none;
    }

    /* 검색 위치 조정 - 뒤로가기 버튼 옆으로 */
    .task-detail-page > .header-bar > .header-bar__left .gs-container {
        position: static;
        transform: none;
        margin-left: 8px;
    }

    /* 탭 위치 유지 (중앙) */
    .task-detail-page .header-bar .pov-view-tabs {
        position: fixed;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
    }
}

/* Task Detail 페이지: 더 좁은 화면 (768px 이하) */
@media (max-width: 768px) {
    /* 탭 텍스트 숨기고 아이콘만 표시 */
    .task-detail-page
        .header-bar
        .pov-view-tabs
        .pov-view-tab
        span:not(.material-symbols-rounded):not(.tab-badge) {
        display: none;
    }

    /* 탭 패딩 축소 */
    .task-detail-page .header-bar .pov-view-tabs .pov-view-tab {
        padding: 6px 10px;
    }

    /* 검색 아이콘만 표시 */
    .task-detail-page .gs-container .gs-trigger__text {
        display: none;
    }

    .task-detail-page .gs-container .gs-trigger {
        padding: 6px 10px;
        min-width: auto;
    }
}

/* Task Detail 페이지: 매우 좁은 화면 (480px 이하) - 모바일 전환 권장 */
@media (max-width: 480px) {
    /* 탭을 더 작게 */
    .task-detail-page .header-bar .pov-view-tabs {
        padding: 2px;
        gap: 1px;
    }

    .task-detail-page .header-bar .pov-view-tabs .pov-view-tab {
        padding: 5px 8px;
    }

    .task-detail-page
        .header-bar
        .pov-view-tabs
        .pov-view-tab
        .material-symbols-rounded {
        font-size: 18px;
    }

    /* 헤더 우측 요소들 숨기기 */
    .task-detail-page .header-bar__right .header-bar__connected,
    .task-detail-page .header-bar__right .fbw-header-btn {
        display: none;
    }
}

/* 히스토리 탭 숨김 (태스크 및 서브태스크) */
.task-detail-page .pov-view-tab[data-tab="history"] {
    display: none;
}

.project-chat-page .pdb-bg {
    display: block;
}

/* Chat 페이지 메인 영역 - 홈 뷰는 중앙 정렬 */
.project-chat-page > .pdb-main {
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
}

/* 홈 뷰 수직 중앙 정렬 */
.project-chat-page [data-home-view] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
}

/* Chat 뷰가 활성화된 경우 (세션 선택됨) */
.project-chat-page > .pdb-main:has([data-chat-view]:not(.pov-view--hidden)) {
    justify-content: flex-start;
    align-items: stretch;
}

/* Chat 페이지 메인 영역 */
.pdb-main--chat {
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
}

/* 전체 화면 채팅 컨테이너 */
.chat-fullscreen {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.chat-fullscreen__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Chat 헤더 */
.chat-fullscreen__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--surface--border);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 24px 24px 0 0;
}

.chat-fullscreen__header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.chat-fullscreen__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Chat 페이지 에이전트 메뉴 - 아래로 표시 */
.chat-fullscreen .just-chat__agent-menu {
    top: calc(100% + 6px);
    bottom: auto;
}

/* Chat 메시지 영역 */
.chat-fullscreen__messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: var(--radius-lg);
}

/* Chat 입력 영역 */
.chat-fullscreen__input-area {
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0 0 24px 24px;
}

.chat-fullscreen__input-area .just-chat__input-wrap {
    background: var(--surface);
    border: 1px solid var(--surface--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
}

.chat-fullscreen__input-area .just-chat__input {
    border: none;
    background: transparent;
    resize: none;
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-title);
    outline: none;
}

.chat-fullscreen__input-area .just-chat__input::placeholder {
    color: var(--text-muted);
}

/* 사이드바 채팅 세션 스타일 - Home 태스크와 동일한 크기 */
.pdb-sidebar__chats {
    margin-bottom: 8px;
}

.pdb-sidebar__chat-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pdb-sidebar__chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    min-height: 40px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.pdb-sidebar__chat-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

.pdb-sidebar__chat-item--active {
    background: rgba(108, 93, 241, 0.08);
}

.pdb-sidebar__chat-item--active:hover {
    background: rgba(108, 93, 241, 0.12);
}

.pdb-sidebar__chat-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pdb-sidebar__chat-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 시간/삭제 버튼 컨테이너 - 우측 끝 고정 */
.pdb-sidebar__chat-actions {
    position: relative;
    flex-shrink: 0;
    min-width: 44px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pdb-sidebar__chat-time {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.45);
    transition: opacity 0.15s ease;
}

/* 태스크 생성 인디케이터 점 */
.pdb-sidebar__chat-task-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary, #6c5df1);
    flex-shrink: 0;
}

.pdb-sidebar__chat-delete {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
}

/* Hover 시 시간 숨기고 삭제 버튼 표시 */
.pdb-sidebar__chat-item:hover .pdb-sidebar__chat-time {
    opacity: 0;
}

.pdb-sidebar__chat-item:hover .pdb-sidebar__chat-delete {
    opacity: 1;
    pointer-events: auto;
}

.pdb-sidebar__chat-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.pdb-sidebar__chat-delete .material-symbols-rounded {
    font-size: 14px;
}

/* ── 태스크 생성 오버레이 (fullscreen 모드) ── */

/* 태스크 생성 중 입력 영역 숨김 */
.chat-fullscreen.just-chat--creating-task .chat-fullscreen__input-area {
    display: none !important;
}

/* 태스크 생성 중 메시지 영역 숨김 */
.chat-fullscreen.just-chat--creating-task .chat-fullscreen__messages {
    display: none !important;
}

/* 태스크 생성 중 헤더 숨김 */
.chat-fullscreen.just-chat--creating-task .chat-fullscreen__header {
    display: none !important;
}

/* 오버레이가 chat-fullscreen__main 안에 표시되도록 */
.chat-fullscreen .just-chat__creating-overlay {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 24px;
}

.chat-fullscreen.just-chat--creating-task .just-chat__creating-overlay {
    display: flex;
    flex: 1;
    min-height: 400px;
    animation: createTaskFadeIn 0.4s ease-out 0.15s both;
}

/* 다크 테마 */
[data-theme="dark"] .chat-fullscreen__main {
    background: var(--surface);
    border-color: var(--surface--border);
}

[data-theme="dark"] .chat-fullscreen__header {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .chat-fullscreen__input-area {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pdb-sidebar__chat-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .pdb-sidebar__chat-item--active {
    background: rgba(108, 93, 241, 0.15);
}

[data-theme="dark"] .pdb-sidebar__chat-title {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .pdb-sidebar__chat-time {
    color: rgba(255, 255, 255, 0.45);
}

/* ── 태스크 목록 모달 ── */
.chat-tasks-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.chat-tasks-modal::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.chat-tasks-modal__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 80vh;
}

.chat-tasks-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--surface--border);
    flex-shrink: 0;
}

.chat-tasks-modal__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-content);
}

.chat-tasks-modal__title .material-symbols-rounded {
    font-size: 22px;
    color: var(--primary);
}

.chat-tasks-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.chat-tasks-modal__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-content);
}

.chat-tasks-modal__close .material-symbols-rounded {
    font-size: 20px;
}

.chat-tasks-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-tasks-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--text-muted);
    text-align: center;
}

.chat-tasks-modal__empty .material-symbols-rounded {
    font-size: 48px;
    opacity: 0.3;
}

/* 태스크 카드 (모달 내) */
.chat-tasks-modal__card {
    background: var(--surface);
    border: 1px solid var(--surface--border);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.chat-tasks-modal__card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(108, 93, 241, 0.12);
    transform: translateY(-1px);
}

.chat-tasks-modal__card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.chat-tasks-modal__card-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.chat-tasks-modal__card-status--todo {
    background: var(--status-todo, #94a3b8);
}

.chat-tasks-modal__card-status--planned {
    background: var(--status-planned, #a78bfa);
}

.chat-tasks-modal__card-status--in_progress {
    background: var(--status-in-progress, #3b82f6);
}

.chat-tasks-modal__card-status--in_review {
    background: var(--status-in-review, #f59e0b);
}

.chat-tasks-modal__card-status--done {
    background: var(--status-done, #10b981);
}

.chat-tasks-modal__card-info {
    flex: 1;
    min-width: 0;
}

.chat-tasks-modal__card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-content);
    margin: 0 0 4px;
    line-height: 1.4;
}

.chat-tasks-modal__card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.chat-tasks-modal__card-status-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.chat-tasks-modal__card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-tasks-modal__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--surface--border);
}

.chat-tasks-modal__card-assignee {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-tasks-modal__card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.chat-tasks-modal__card-avatar .material-symbols-rounded {
    font-size: 14px;
}

.chat-tasks-modal__card-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.chat-tasks-modal__card-name {
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-tasks-modal__card-action {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--primary);
    font-weight: 500;
}

.chat-tasks-modal__card-action .material-symbols-rounded {
    font-size: 16px;
}

[data-theme="dark"] .chat-tasks-modal {
    background: var(--surface);
}

[data-theme="dark"] .chat-tasks-modal__close:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .chat-tasks-modal__card {
    background: var(--surface-elevated);
}

[data-theme="dark"] .chat-tasks-modal__card:hover {
    border-color: var(--primary);
}

[data-theme="dark"] .project-chat-page {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .project-chat-page > .pdb-main {
    background: var(--bg-primary);
}

[data-theme="dark"] .chat-fullscreen__main {
    background: var(--surface);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .chat-fullscreen {
        padding: 0 12px;
    }

    .chat-fullscreen__main {
        border-radius: var(--radius-lg);
        margin-bottom: 12px;
    }

    .chat-fullscreen__messages {
        padding: 16px;
    }

    .chat-fullscreen__input-area {
        padding: 12px;
    }
}

/* ═══════════════════════════════════════════
   Chat Fullscreen - Assistant Message (Bubble 제거)
   ═══════════════════════════════════════════ */

/* Fullscreen chat에서 assistant 메시지는 bubble 없이 전체 마크다운으로 표시 */
.chat-fullscreen .just-chat__message--assistant .just-chat__msg-body {
    background: transparent;
    padding: 0;
    border-radius: 0;
    max-width: 100%;
    line-height: 1.7;
}

/* Fullscreen chat에서 user 메시지도 넓게 */
.chat-fullscreen .just-chat__message--user .just-chat__msg-body {
    max-width: 100%;
    width: fit-content;
}

/* ═══════════════════════════════════════════
   Markdown Table - 스크롤 처리 (공통)
   min-width: 64px, overflow-x: auto
   ═══════════════════════════════════════════ */

/* Just Chat - 마크다운 테이블 래퍼 (JS에서 자동 추가) */
.just-chat__table-wrapper,
.markdown-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0;
    -webkit-overflow-scrolling: touch;
}

/* Just Chat 테이블 셀 min-width */
.just-chat__msg-body table th,
.just-chat__msg-body table td {
    min-width: 64px;
}

/* Chat Fullscreen 테이블 셀 min-width */
.chat-fullscreen .just-chat__msg-body table th,
.chat-fullscreen .just-chat__msg-body table td {
    min-width: 64px;
}

/* Task Detail - 마크다운 테이블 래퍼 */
.task-detail__markdown .markdown-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0;
}

/* Task Detail 테이블 셀 min-width */
.task-detail__markdown table th,
.task-detail__markdown table td {
    min-width: 64px;
}

/* Task Detail 테이블 - overflow 처리 */
.task-detail__markdown table {
    display: block;
    overflow-x: auto;
    width: max-content;
    min-width: 100%;
}

/* Subtask Notes (note-content) - 마크다운 테이블 */
.note-content table,
.subtask-note table,
.note-markdown table {
    display: block;
    overflow-x: auto;
    width: max-content;
    min-width: 100%;
    margin: 12px 0;
}

.note-content table th,
.note-content table td,
.subtask-note table th,
.subtask-note table td,
.note-markdown table th,
.note-markdown table td {
    min-width: 64px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 8px 12px;
    text-align: left;
}

.note-content table th,
.subtask-note table th,
.note-markdown table th {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 600;
}

/* PDB Just Chat (Project Dashboard Board) 테이블 */
.pdb-just-chat__msg-body table th,
.pdb-just-chat__msg-body table td {
    min-width: 64px;
}

/* Message Body Markdown 테이블 */
.just-chat__message-body--markdown table th,
.just-chat__message-body--markdown table td {
    min-width: 64px;
}

/* Chat Bubble Markdown 테이블 */
.chat-bubble--markdown table th,
.chat-bubble--markdown table td {
    min-width: 64px;
}

/* Mirror sync icon and keep mirrored state while spinning */
.sync-icon-mirrored {
    transform: scaleX(-1);
}

.sync-icon-mirrored.spin {
    animation-name: spin-mirrored-sync !important;
}

@keyframes spin-mirrored-sync {
    from {
        transform: scaleX(-1) rotate(0deg);
    }

    to {
        transform: scaleX(-1) rotate(-360deg);
    }
}

/* ========================================
   DESKTOP BUTTON OVERRIDES
   ======================================== */
@media (min-width: 769px) {
    .btn {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 36px;
        border-radius: 10px;
    }

    .btn-primary {
        background: #111827;
    }
}

/* Settings Tab Danger Color */
[data-settings-tab="danger"] {
    color: #b4232e;
}

/* ========================================
   PERFORMANCE OPTIMIZATION - User Settings
   ======================================== */

/* ── Reduce Motion (data-reduce-motion="true") ── */
[data-reduce-motion="true"] *,
[data-reduce-motion="true"] *::before,
[data-reduce-motion="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Preserve essential feedback animations even with reduce-motion */
[data-reduce-motion="true"] .btn:active,
[data-reduce-motion="true"] .dialog[open] {
    transition-duration: 0.1s !important;
}

/* ── Reduce Blur (data-reduce-blur="true") ── */
[data-reduce-blur="true"] .dialog,
[data-reduce-blur="true"] .sidebar,
[data-reduce-blur="true"] .popover,
[data-reduce-blur="true"] .dropdown-menu,
[data-reduce-blur="true"] .toast,
[data-reduce-blur="true"] [class*="glass"],
[data-reduce-blur="true"] [class*="backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Disable Gradient Background (data-gradient-bg="false") ── */
[data-gradient-bg="false"] .pdb-gradient-bg::before {
    animation: none !important;
    background: linear-gradient(
        -70deg,
        #e8f4ff 0%,
        #f0e6ff 50%,
        #d5ebff 100%
    ) !important;
    background-size: 100% 100% !important;
}

[data-gradient-bg="false"] .card--in-progress::after,
[data-gradient-bg="false"] .card--planning-pending::after,
[data-gradient-bg="false"] .sap-agent-card--in-review::after,
[data-gradient-bg="false"] .gradient-border-spin::after {
    animation: none !important;
}

/* ── Disable Glow Effect (data-glow-effect="false") ── */
[data-glow-effect="false"] .pdb-floating-agent-avatar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-glow-effect="false"] .card--in-progress,
[data-glow-effect="false"] .card--planning-pending,
[data-glow-effect="false"] .card--planning-done {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

[data-glow-effect="false"] .inbox-badge::after {
    display: none !important;
}

[data-glow-effect="false"] [class*="glow"],
[data-glow-effect="false"] [class*="pulse"]::after {
    animation: none !important;
    box-shadow: none !important;
}

/* ── Disable Glass Effect / Blur (data-glass-effect="false") ── */
[data-glass-effect="false"] .dialog,
[data-glass-effect="false"] .sidebar,
[data-glass-effect="false"] .popover,
[data-glass-effect="false"] .dropdown-menu,
[data-glass-effect="false"] [class*="glass"],
[data-glass-effect="false"] [class*="backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Disable Gradient Card (data-gradient-card="false") ── */
[data-gradient-card="false"] .card {
    background: var(--card-bg, #fff) !important;
}

[data-gradient-card="false"] .card::before {
    display: none !important;
}

/* ── Combined: Low Performance Mode ── */
[data-reduce-motion="true"][data-gradient-bg="false"][data-glow-effect="false"]
    .pdb-anim__idle,
[data-reduce-motion="true"][data-gradient-bg="false"][data-glow-effect="false"]
    .pdb-anim__speaking {
    animation: none !important;
}

/* ── System Preference: prefers-reduced-motion (extended) ── */
@media (prefers-reduced-motion: reduce) {
    /* PDB animations */
    .pdb-gradient-bg::before {
        animation: none !important;
    }

    .pdb-anim__idle,
    .pdb-anim__speaking {
        animation: none !important;
    }

    .pdb-floating-agent {
        transition: none !important;
    }

    /* Chat animations */
    .pdb-jc-dot-bounce,
    [class*="typing-dot"] {
        animation: none !important;
    }

    /* Badge animations */
    .inbox-badge::after,
    [class*="badge-pulse"] {
        animation: none !important;
    }

    /* Steam/particle effects */
    .card-steam,
    [class*="steam"] {
        display: none !important;
    }

    /* General sparkle/pulse effects */
    [class*="sparkle"],
    [class*="pulse"] {
        animation: none !important;
    }
}

/* ========================================
   TOOL CREDENTIAL MODAL (<dialog> 요소 사용)
   ======================================== */
dialog.tool-credential-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    border: none;
    background: var(--modal-bg, #ffffffe8);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: calc(100% - 32px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: tool-modal-slideUp 0.2s ease-out;
}

dialog.tool-credential-modal::backdrop {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    animation: tool-modal-fadeIn 0.15s ease-out;
}

@keyframes tool-modal-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes tool-modal-slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.tool-credential-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.tool-credential-modal__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary, #111827);
}

.tool-credential-modal__title .material-symbols-rounded {
    font-size: 20px;
    color: var(--color-primary, #3b82f6);
}

.tool-credential-modal__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.tool-credential-modal__desc {
    font-size: 14px;
    color: var(--color-text-secondary, #6b7280);
    margin: 0 0 16px;
    line-height: 1.5;
}

.tool-credential-modal__tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-credential-modal__tool {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-surface, #f9fafb);
    border-radius: 10px;
    border: 1px solid transparent;
}

.tool-credential-modal__tool--connected {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.05);
}

.tool-credential-modal__tool--disconnected {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.05);
}

.tool-credential-modal__tool-icon {
    font-size: 20px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary, #6b7280);
}

.tool-credential-modal__tool-icon--svg {
    width: 20px;
    height: 20px;
}

.tool-credential-modal__tool-icon--svg svg {
    width: 100%;
    height: 100%;
}

.tool-credential-modal__tool-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #111827);
}

.tool-credential-modal__tool-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.tool-credential-modal__tool--connected .tool-credential-modal__tool-status {
    color: #22c55e;
}

.tool-credential-modal__tool--disconnected .tool-credential-modal__tool-status {
    color: #ef4444;
}

.tool-credential-modal__status-icon {
    font-size: 16px;
}

.tool-credential-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.tool-credential-modal__footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tool-credential-modal__footer .btn .material-symbols-rounded {
    font-size: 18px;
}

/* ===== Cookie Consent Banner ===== */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    background: var(--md-sys-color-surface, #fff);
    border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    padding: 20px 24px;
    transform: translateY(100%);
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease;
}

.cookie-consent-banner--visible {
    transform: translateY(0);
    opacity: 1;
}

.cookie-consent-banner--hiding {
    transform: translateY(100%);
    opacity: 0;
}

.cookie-consent-banner__content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.cookie-consent-banner__text {
    flex: 1;
    min-width: 280px;
}

.cookie-consent-banner__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #1c1b1f);
}

.cookie-consent-banner__title .material-symbols-rounded {
    font-size: 22px;
    color: var(--md-sys-color-primary, #6750a4);
}

.cookie-consent-banner__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface-variant, #49454f);
}

.cookie-consent-banner__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-consent-banner__btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.15s ease,
        transform 0.1s ease,
        box-shadow 0.15s ease;
    border: none;
}

.cookie-consent-banner__btn:active {
    transform: scale(0.97);
}

.cookie-consent-banner__btn--primary {
    background: var(--md-sys-color-primary, #6750a4);
    color: var(--md-sys-color-on-primary, #fff);
}

.cookie-consent-banner__btn--primary:hover {
    background: var(--md-sys-color-primary-hover, #7c68b3);
    box-shadow: 0 2px 8px rgba(103, 80, 164, 0.3);
}

.cookie-consent-banner__btn--secondary {
    background: var(--md-sys-color-surface-variant, #e7e0ec);
    color: var(--md-sys-color-on-surface-variant, #49454f);
}

.cookie-consent-banner__btn--secondary:hover {
    background: var(--md-sys-color-surface-variant-hover, #d9d0e0);
}

.cookie-consent-banner__link {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: var(--md-sys-color-primary, #6750a4);
    text-decoration: none;
}

.cookie-consent-banner__link:hover {
    text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cookie-consent-banner {
        padding: 16px;
    }

    .cookie-consent-banner__content {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .cookie-consent-banner__text {
        min-width: 0;
    }

    .cookie-consent-banner__actions {
        flex-direction: column;
        width: 100%;
    }

    .cookie-consent-banner__btn {
        width: 100%;
        justify-content: center;
    }

    .cookie-consent-banner__link {
        margin-top: 4px;
    }
}


/* ═══════════════════════════════════════════════
   Widget Grid Wrapper (pdb-content 내)
   ═══════════════════════════════════════════════ */

.pdb-widget-grid-wrapper {
    margin-top: 24px;
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════
   Widget Picker Dialog
   ═══════════════════════════════════════════════ */

.widget-picker-dialog {
    padding: 0;
    border: none;
    border-radius: 16px;
    background: var(--bg-primary, #fff);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
    max-width: 780px;
    width: calc(100% - 32px);
    max-height: 80vh;
    overflow: hidden;
}

.widget-picker-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.widget-picker {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.widget-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-secondary, #e5e7eb);
}

.widget-picker__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0;
}

.widget-picker__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-tertiary, #9ca3af);
    transition: background 0.2s ease, color 0.2s ease;
}

.widget-picker__close:hover {
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-primary, #111827);
}

.widget-picker__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.widget-picker__desc {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 20px 0;
}

.widget-picker__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.widget-picker__card {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #f9fafb);
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.widget-picker__card:hover {
    border-color: var(--color-primary, #3b82f6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 위젯 미리보기 영역 */
.widget-picker__card-preview {
    aspect-ratio: 16 / 9;
    background: var(--bg-tertiary, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 요약 위젯 미리보기 - quick-action 스타일 */
.widget-picker__card-preview--summary {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.widget-picker__card-preview--summary.widget-picker__card-preview--review {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}

.widget-picker__card-preview--summary.widget-picker__card-preview--contrib {
    background: linear-gradient(135deg, #fecdd3 0%, #fda4af 100%);
}

.widget-picker__card-preview--summary.widget-picker__card-preview--progress {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
}

.widget-picker__card-preview--summary.widget-picker__card-preview--archive {
    background: linear-gradient(135deg, #e9d5ff 0%, #c4b5fd 100%);
}

.widget-picker__preview-icon {
    font-size: 28px;
    opacity: 0.7;
}

.widget-picker__preview-count {
    font-size: 28px;
    font-weight: 700;
    color: rgba(30, 30, 30, 0.85);
    align-self: flex-end;
}

.widget-picker__preview-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(60, 60, 60, 0.8);
}

/* 목록 위젯 미리보기 */
.widget-picker__card-preview--list {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    gap: 4px;
}

.widget-picker__preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: var(--bg-primary, #fff);
    border-radius: 4px;
}

.widget-picker__preview-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
}

.widget-picker__preview-dot--review {
    background: var(--color-warning, #f59e0b);
}

.widget-picker__preview-dot--progress {
    background: var(--color-success, #22c55e);
}

.widget-picker__preview-dot--contrib {
    background: var(--color-info, #3b82f6);
}

.widget-picker__preview-dot--archive {
    background: var(--color-purple, #a855f7);
}

.widget-picker__preview-line {
    height: 6px;
    background: var(--border-secondary, #e5e7eb);
    border-radius: 3px;
    flex: 1;
}

.widget-picker__preview-line--short {
    flex: 0.6;
}

/* 유틸리티 위젯 미리보기 */
.widget-picker__card-preview--utility {
    flex-direction: column;
    gap: 4px;
}

.widget-picker__preview-time {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #111827);
}

.widget-picker__preview-greeting {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.widget-picker__preview-memo-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 80%;
}

.widget-picker__preview-memo-line {
    height: 4px;
    background: var(--border-secondary, #e5e7eb);
    border-radius: 2px;
}

.widget-picker__preview-memo-line--short {
    width: 60%;
}

/* 미디어 위젯 미리보기 */
.widget-picker__card-preview--media {
    background: var(--bg-tertiary, #f3f4f6);
}

.widget-picker__preview-media-icon {
    font-size: 32px;
    color: var(--text-tertiary, #9ca3af);
}

.widget-picker__card-preview--youtube {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.widget-picker__preview-play {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff0000;
    border-radius: 8px;
    color: #fff;
    font-size: 24px;
}

/* 기본 미리보기 */
.widget-picker__card-preview--default {
    flex-direction: column;
}

.widget-picker__card-preview--default .widget-picker__preview-icon {
    font-size: 32px;
    color: var(--text-tertiary, #9ca3af);
}

/* 카드 정보 영역 */
.widget-picker__card-info {
    padding: 12px 14px;
}

.widget-picker__card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.widget-picker__card-icon {
    font-size: 18px;
    color: var(--color-primary, #3b82f6);
}

.widget-picker__card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.widget-picker__card-desc {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    line-height: 1.4;
}

.widget-picker__footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border-secondary, #e5e7eb);
}

/* Dark Mode */
[data-theme="dark"] .widget-picker-dialog {
    background: var(--bg-primary, #1f2937);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .widget-picker__header {
    border-color: var(--border-secondary, #374151);
}

[data-theme="dark"] .widget-picker__card {
    background: var(--bg-secondary, #111827);
}

[data-theme="dark"] .widget-picker__card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .widget-picker__card-preview {
    background: var(--bg-tertiary, #1f2937);
}

[data-theme="dark"] .widget-picker__preview-item {
    background: var(--bg-secondary, #111827);
}

[data-theme="dark"] .widget-picker__preview-line {
    background: var(--border-secondary, #374151);
}

[data-theme="dark"] .widget-picker__footer {
    border-color: var(--border-secondary, #374151);
}