/* ══════════════════════════════════════════════════════════
   Pages — iBots v6 "500억짜리 UI"
   Steve Jobs Minimalism: Radical Simplicity.
   Every pixel intentional. Every border questioned.
   Every animation purposeful.

   4 Views: Dashboard · Command · Outputs · Settings
   + Sidebar · Workflow · GPT Chat · PWA

   Token source: tokens.css (:root)
   "Simplicity is the ultimate sophistication." — Leonardo da Vinci
   ══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   0. PAGE-LEVEL KEYFRAMES
   ═══════════════════════════════════════════════════════ */

@keyframes pgFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

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


@keyframes pgPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes pgDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes pgSkipPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════
   1. COMMAND VIEW — 채팅형 명령 인터페이스
   Apple Messages 수준의 클린 채팅 UX
   ═══════════════════════════════════════════════════════ */

/* 전체 컨테이너: 뷰포트 전체 활용, safe-area 대응 */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
}
/* cmd-sub-toggle / cmd-sub-btn / cmd-sub-badge / cmd-sub-view
   → command.css에서 통합 정의 (DRY) */

/* 메시지 래퍼 */
.chat-messages-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 메시지 피드 — 넉넉한 여백, 부드러운 스크롤 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-5) var(--s-4) var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--line-bold);
    border-radius: var(--radius-pill);
}
.chat-messages::-webkit-scrollbar-track { background: transparent; }

/* 메시지 아이템 — 보더 없이 호버 배경만 */
.msg {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    transition: background var(--motion-hover);
    animation: pgFadeUp 0.25s var(--easing-smooth) both;
}

.msg:hover { background: var(--surface); }

.msg-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}

/* 에이전트 상태 도트 — 작지만 의미있는 */
.msg-agent-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
}

.msg-agent-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    letter-spacing: var(--tracking-tight);
}

.msg-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.msg-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-sub);
    word-break: break-word;
}

/* 인라인 코드 */
.msg-text code {
    background: var(--surface);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: 0.88em;
}

/* 코드 블록 */
.msg-text pre {
    background: var(--surface);
    padding: var(--s-3);
    border-radius: var(--radius);
    overflow-x: auto;
    margin: var(--s-2) 0;
}
.msg-text pre code { background: none; padding: 0; }

/* 빈 상태 — 우아한 빈 공간 */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--s-3);
    color: var(--text-sub);
    min-height: var(--card-min-sm);
}
/* chat-empty-icon: 표준 56x56 원형 래퍼는 components.css에서 상속 */
.chat-empty-text { font-size: var(--text-base); }

/* 빈 상태 예시 명령 버튼 */
.chat-empty-examples {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-3);
    width: 100%;
    max-width: var(--layout-lg);
}
.chat-example-btn {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--motion-hover),
                transform var(--motion-hover),
                box-shadow var(--motion-hover);
    text-align: left;
}
.chat-example-btn:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-soft);
}
.chat-example-btn:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.chat-example-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* 예시 버튼 스태거 진입 */
.chat-example-btn:nth-child(1) { animation: pgFadeUp var(--duration-moderate) var(--easing-smooth) 0.1s both; }
.chat-example-btn:nth-child(2) { animation: pgFadeUp var(--duration-moderate) var(--easing-smooth) 0.18s both; }
.chat-example-btn:nth-child(3) { animation: pgFadeUp var(--duration-moderate) var(--easing-smooth) 0.26s both; }
.chat-example-btn:nth-child(4) { animation: pgFadeUp var(--duration-moderate) var(--easing-smooth) 0.34s both; }
.chat-example-icon {
    flex-shrink: 0;
    color: var(--accent);
    opacity: 0.7;
}
.chat-example-text {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: var(--weight-medium);
}
.chat-example-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Welcome Screen 오버레이 ── */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--backdrop-bg-strong);
    backdrop-filter: var(--glass-blur-xs);
    -webkit-backdrop-filter: var(--glass-blur-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: welcomeOverlayIn var(--duration-slow) var(--easing-smooth) forwards;
}
.welcome-overlay.welcome-fade-out {
    animation: welcomeOverlayOut var(--duration-moderate) var(--easing-smooth) forwards;
}
@keyframes welcomeOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes welcomeOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.welcome-overlay > .welcome-card {
    background: var(--bg-raised);
    border-radius: var(--radius);
    padding: var(--s-8) var(--s-6);
    max-width: var(--layout-xl);
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    box-shadow: var(--shadow-popover);
    animation: welcomeCardIn var(--duration-slow) cubic-bezier(.16,1.11,.36,1.01) forwards;
}
@keyframes welcomeCardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-logo img {
    border-radius: var(--radius-s);
}
.welcome-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}
.welcome-desc {
    font-size: var(--text-base);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    margin: 0;
}
.welcome-steps {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    width: 100%;
    text-align: left;
}
.welcome-step {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius-s);
    transition: background var(--motion-hover);
}
.welcome-step:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.welcome-step-num {
    flex-shrink: 0;
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-pill);
    background: var(--surface-w8);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.welcome-step-text {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.welcome-step-text strong {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: var(--weight-semibold);
}
.welcome-step-text span {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}
.welcome-start-btn {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: var(--accent);
    color: var(--accent-on);
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: filter var(--motion-hover), box-shadow var(--motion-hover);
}
.welcome-start-btn:hover {
    filter: brightness(var(--hover-brightness));
    box-shadow: var(--shadow-accent-glow-lg);
    transform: translateY(var(--hover-lift-sm));
}
.welcome-start-btn:active {
    filter: brightness(var(--active-brightness));
}
.welcome-dismiss-label {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
}
.welcome-dismiss-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: var(--s-3-5);
    height: var(--s-3-5);
}

/* .chat-bottom, .chat-input-area, .chat-input-meta, .chat-target-select → command.css에 통합 (DRY) */

/* .chat-input-row → command.css에 통합 (DRY) */

/* 입력 필드 — 포커스 시 프리미엄 accent 글로우 링 */
.chat-input {
    flex: 1;
    min-height: var(--s-7-5);
    max-height: var(--s-20);
    padding: var(--s-3);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    resize: none;
    outline: none;
    line-height: var(--leading-normal);
    transition: border-color var(--duration-base) var(--easing-out),
                box-shadow var(--duration-base) var(--easing-out),
                background var(--duration-base) var(--easing-out);
}
.chat-input:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.chat-input:focus {
    border-color: var(--line-bold);
    box-shadow: var(--shadow-btn-active-glow);
    background: var(--surface);
}

/* 전송 버튼 — accent 컬러, 프리미엄 글로우 호버 */
.chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-7-5);
    height: var(--s-7-5);
    border-radius: var(--radius-s);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-lg);
    flex-shrink: 0;
    transition: opacity var(--duration-base) var(--easing-out),
                transform var(--duration-base) var(--easing-out),
                box-shadow var(--duration-base) var(--easing-out),
                filter var(--duration-base) var(--easing-out);
}
.chat-send-btn:hover {
    filter: brightness(var(--hover-brightness));
    box-shadow: var(--shadow-send-btn-hover);
    transform: translateY(var(--hover-lift-sm));
}
.chat-send-btn:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); }
.chat-send-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.chat-send-btn:disabled { opacity: 0.25; cursor: not-allowed; filter: none; box-shadow: none; }

/* .chat-panel-head, .chat-panel-title → command.css에 통합 (DRY) */


/* ═══════════════════════════════════════════════════════
   2. OUTPUTS VIEW — 출력물 관리
   파일 시스템 수준의 직관적 트리 구조
   ═══════════════════════════════════════════════════════ */

/* 필터 바 */
.outputs-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.outputs-agent-select {
    padding: var(--s-1) var(--s-3);
    border: none;
    border-radius: var(--radius-pill);
    background-color: var(--bg-raised);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
    max-width: clamp(100px, 18vw, 160px);
    cursor: pointer;
    transition: border-color var(--motion-hover);
}
.outputs-agent-select:focus { border-color: var(--accent); }

/* GDrive 상태 바 — 미묘한 블루 힌트 */
.gdrive-status {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: var(--s-4);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.gdrive-status:empty { display: none; }

.gdrive-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--surface-w10);
    border-bottom: none;
    font-size: var(--text-sm);
}
.gdrive-label { color: var(--teal); font-weight: var(--weight-semibold); }
.gdrive-status-text { color: var(--text-sub); }

/* 출력물 파일 아이템 — 터치 영역 충분히, 호버 미묘하게 */
.output-file {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    transition: background var(--motion-hover),
                transform var(--duration-base) var(--easing-spring);
}
.output-file:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.output-file:active { transform: translateY(0) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.output-file:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

.output-file-icon {
    width: var(--s-6);
    height: var(--s-6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    background: var(--surface);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.output-file-info { flex: 1; min-width: 0; }

.output-file-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-file-meta {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: 1px;
}

.output-file-actions {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
}

/* JS 렌더 함수용 output-* 클래스 */
.output-icon { font-size: var(--text-xl); flex-shrink: 0; }
.output-info { flex: 1; min-width: 0; }
.output-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.output-detail {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}
.output-actions { display: flex; gap: var(--s-1); flex-shrink: 0; }
.output-actions:empty { display: none; }

/* 액션 버튼 — 필 없이 가볍게 */
.output-action,
.output-action-open {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    border: none;
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: color var(--motion-hover), background var(--motion-hover),
                transform var(--duration-base) var(--easing-spring);
}
.output-action { background: var(--surface); color: var(--text-sub); }
.output-action:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.output-action:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.output-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.output-action-open { border: 1px solid var(--purple); background: none; color: var(--purple); }
.output-action-open:hover { background: var(--purple-bg); transform: translateY(var(--hover-lift-sm)); }
.output-action-open:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.output-action-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* Final Deliverable */
.output-file.final-deliverable {
    background: var(--amber-bg);
    padding-left: calc(var(--s-3) - 3px);
}
.output-file.final-deliverable:hover { background: var(--clr-warning-bg-lg); transform: translateY(var(--hover-lift-sm)); }

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    background: var(--clr-warning-bg-xl);
    color: var(--amber);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 에이전트별 deliverable 컬러 */
.output-file.deliverable-pdfcreator   { background: var(--red-bg); }
.output-file.deliverable-cardnews     { background: var(--teal-bg); }
.output-file.deliverable-nefcon       { background: var(--purple-bg); }
.output-file.deliverable-telegram     { background: var(--green-bg); }
.output-file.deliverable-reelswriter  { background: var(--amber-bg); }
.output-file.deliverable-threadcreator { background: var(--surface-2); }
.output-file.deliverable-chartanalyst { background: var(--amber-bg); }
.output-file.deliverable-premiumcardnews,
.output-file.deliverable-pcnfundamentals,
.output-file.deliverable-pcnbriefing,
.output-file.deliverable-pcncompany,
.output-file.deliverable-pcnmacro,
.output-file.deliverable-pcnchart { background: var(--clr-agent-premiumcardnews-bg); }

/* deliverable hover — outputs.css로 통합 (이중화 제거) */

/* Creator 섹션 — 생산자 그룹핑 */
.creator-section {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: none;
}
/* heading-md 패턴 통일 — 타이포그래피 위계 */
.creator-section-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--amber);
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    margin-bottom: var(--s-2);
}
.creator-agent-badge {
    display: inline-flex;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-left: var(--s-1);
}
.creator-badge-pdfcreator  { background: var(--red-bg);    color: var(--red); }
.creator-badge-cardnews    { background: var(--teal-bg);   color: var(--teal); }
.creator-badge-nefcon      { background: var(--purple-bg); color: var(--purple); }
.creator-badge-telegram    { background: var(--green-bg);  color: var(--green); }

/* ── Job/Agent 토글 (접기/펼치기) ── */
.job-toggle-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    transition: background var(--motion-hover), border-color var(--motion-hover);
    flex-wrap: wrap;
}
.job-toggle-header:hover { background: var(--surface-hover); border-color: transparent; transform: translateY(var(--hover-lift-sm)); }
.job-toggle-header:active { transform: translateY(0) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.job-toggle-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.job-toggle-header.open { border-radius: var(--radius) var(--radius) 0 0; border-bottom-color: transparent; }

.job-toggle-arrow {
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: transform var(--smooth);
    flex-shrink: 0;
    width: var(--s-4);
    text-align: center;
}
.job-toggle-header.open .job-toggle-arrow { transform: rotate(90deg); }

/* Job 헤더 내부 요소 */
.job-toggle-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.job-toggle-meta {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}

.job-toggle-file-count {
    font-size: var(--text-sm);
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.job-toggle-preview {
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface);
    padding: var(--s-1) var(--s-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-toggle-body {
    display: none;
    border: none;
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}
.job-toggle-header.open + .job-toggle-body { display: block; }

.agent-toggle-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    transition: background var(--motion-hover),
                transform var(--duration-base) var(--easing-spring);
    border-bottom: none;
}
.agent-toggle-header:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.agent-toggle-header:active { transform: translateY(0) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.agent-toggle-header:last-child { border-bottom: none; }

.agent-toggle-arrow {
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: transform var(--smooth);
    flex-shrink: 0;
    width: var(--s-3-5);
    text-align: center;
}
.agent-toggle-header.open .agent-toggle-arrow { transform: rotate(90deg); }

/* 에이전트 토글 내부 요소 */
.agent-toggle-icon { font-size: var(--text-base); flex-shrink: 0; }
.agent-toggle-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.agent-toggle-count { font-size: var(--text-sm); color: var(--text-sub); }

.agent-toggle-body { display: none; background: var(--bg); }
.agent-toggle-header.open + .agent-toggle-body { display: block; }

/* Skipped Agent — 감소된 시인성 */
.agent-toggle-header.skipped {
    opacity: 0.6;
    transition: opacity var(--motion-hover), background var(--motion-hover);
}
.agent-toggle-header.skipped:hover { opacity: 0.85; transform: translateY(var(--hover-lift-sm)); }

.output-file.skipped {
    opacity: 0.6;
    background: var(--amber-bg);
    padding-left: calc(var(--s-3) - 3px);
    transition: opacity var(--motion-hover);
}
.output-file.skipped:hover { opacity: 0.85; transform: translateY(var(--hover-lift-sm)); }
.output-file.skipped .output-name {
    color: var(--text-sub);
    text-decoration: line-through;
    text-decoration-color: var(--amber);
    text-decoration-thickness: 1px;
}

/* Skip 뱃지 */
.skip-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    background: var(--amber-bg);
    color: var(--amber);
    white-space: nowrap;
    flex-shrink: 0;
}
.skip-badge::before {
    content: '';
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--amber);
    flex-shrink: 0;
}

.skip-creator-tag {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--amber-bg);
    color: var(--amber);
    font-weight: var(--weight-semibold);
}

/* 스킵 일괄 재생성 바 */
.skip-regen-bar {
    display: flex;
    justify-content: flex-end;
    padding: var(--s-1) var(--s-3);
}

/* 스킵 구분선 */
.skip-divider {
    border-top: 1px dashed var(--clr-warning-bg-lg);
    margin: var(--s-1) 0;
}

.skip-reason-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--amber-bg);
    border-bottom: none;
    font-size: var(--text-sm);
    color: var(--amber);
    line-height: var(--leading-normal);
}
.skip-reason-bar .skip-reason-icon { font-size: var(--text-xl); flex-shrink: 0; }
.skip-reason-bar .skip-reason-text { flex: 1; min-width: 0; }

/* 스킵 기존 파일 링크 */
.skip-existing-files { margin-top: var(--s-1); font-size: var(--text-sm); color: var(--text-sub); }
.skip-existing-link { color: var(--accent); text-decoration: underline; }

.skip-reason-bar .skip-existing-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    background: var(--surface);
    color: var(--text-sub);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--motion-hover), color var(--motion-hover);
}
.skip-reason-bar .skip-existing-link:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }

.skip-count-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    background: var(--amber-bg);
    border: 1px solid var(--clr-warning-bg-2xl);
    color: var(--amber);
    white-space: nowrap;
}
.skip-count-badge .skip-count-num {
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}
.skip-count-badge.pulse { animation: pgSkipPulse var(--duration-slow) var(--easing-smooth); }

/* ── Regenerate 버튼 — 미니멀 pill ── */
.btn-regenerate {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-pill);
    background: var(--surface-active);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--motion-hover), border-color var(--motion-hover), color var(--motion-hover), transform var(--motion-hover);
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-regenerate:hover {
    background: var(--surface-w20);
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.btn-regenerate:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.btn-regenerate.loading { pointer-events: none; opacity: 0.7; }
.btn-regenerate.loading .btn-regenerate-icon { animation: spin var(--duration-dramatic) linear infinite; }
.btn-regenerate:disabled,
.btn-regenerate.disabled { pointer-events: none; opacity: 0.35; background: transparent; color: var(--text-sub); }
.btn-regenerate.done { pointer-events: none; border-color: var(--green); background: var(--green-bg); color: var(--green); }
.btn-regenerate-icon { font-size: var(--text-base); line-height: var(--leading-none); flex-shrink: 0; }
.skip-reason-bar .btn-regenerate { margin-left: auto; }

.btn-regenerate-inline {
    margin-left: auto;
    padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm);
    opacity: 0;
    transition: opacity var(--motion-hover);
}
.agent-toggle-header:hover .btn-regenerate-inline { opacity: 1; transform: translateY(var(--hover-lift-sm)); }
.btn-regenerate-inline.loading,
.btn-regenerate-inline.done { opacity: 1; }

/* ── Feed Skip Event (메시지 피드 내 스킵 이벤트) ── */
.feed-skip-event {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--amber-bg);
    border-radius: var(--radius);
    transition: background var(--motion-hover);
}
.feed-skip-event:hover { background: var(--clr-warning-bg-lg); transform: translateY(var(--hover-lift-sm)); }
.feed-skip-event .feed-skip-icon { font-size: var(--text-4xl); flex-shrink: 0; line-height: var(--leading-snug); }
.feed-skip-event .feed-skip-body { flex: 1; min-width: 0; }
.feed-skip-event .feed-skip-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--amber); margin-bottom: var(--s-1); }
.feed-skip-event .feed-skip-detail { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); }
.feed-skip-event .feed-skip-agents { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.feed-skip-event .feed-skip-agent-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    background: var(--clr-warning-bg-lg);
    color: var(--amber);
    transition: background var(--motion-hover);
}
.feed-skip-event .feed-skip-agent-chip:hover { background: var(--clr-warning-bg-xl); transform: translateY(var(--hover-lift-sm)); }
.feed-skip-event .btn-regenerate { margin-top: var(--s-2); }

/* ── Feed Skip Group (접기/펼치기) ── */
.feed-skip-group { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--s-1); }
.feed-skip-group-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--amber-bg);
    cursor: pointer;
    user-select: none;
    transition: background var(--motion-hover);
}
.feed-skip-group-header:hover { background: var(--clr-warning-bg-lg); transform: translateY(var(--hover-lift-sm)); }
.feed-skip-group-header .feed-skip-group-arrow { font-size: var(--text-sm); color: var(--amber); transition: transform var(--smooth); flex-shrink: 0; width: 14px; text-align: center; }
.feed-skip-group-header.open .feed-skip-group-arrow { transform: rotate(90deg); }
.feed-skip-group-header .feed-skip-group-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--amber); flex: 1; }
.feed-skip-group-header .feed-skip-group-count { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--amber); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); background: var(--clr-warning-bg-lg); }
.feed-skip-group-body { display: none; }
.feed-skip-group-header.open + .feed-skip-group-body { display: block; }
.feed-skip-group-body .feed-skip-event { border-radius: 0; border-bottom: none; }
.feed-skip-group-body .feed-skip-event:last-child { border-bottom: none; }

/* Outputs 유틸리티 */
.feed-skip-agents:empty,
.feed-skip-group-body:empty { display: none; }
.outputs-body-scroll { max-height: 700px; }


/* ═══════════════════════════════════════════════════════
   3. SETTINGS VIEW — 통합 설정 화면
   Apple Settings 수준의 구조화된 리스트
   ═══════════════════════════════════════════════════════ */

.settings-container { max-width: clamp(600px, 70vw, 860px); }

/* 설정 네비게이션 — 깔끔한 탭 바 */
.settings-nav {
    display: flex;
    gap: var(--s-1);
    margin-bottom: var(--s-5);
    border-bottom: none;
    padding-bottom: var(--s-2);
}

/* settings-nav-item — 제거됨 (cmd-sub-btn 공유 구조로 통일) */

.settings-section { margin-bottom: var(--s-6); }

/* heading-sm 패턴 통일 — 타이포그래피 위계 */
.settings-section-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
    margin-bottom: var(--s-4);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-2);
    border-bottom: none;
    border-radius: var(--radius-s);
    margin: 0 calc(-1 * var(--s-2));
    transition: background-color var(--motion-hover),
                transform var(--duration-base) var(--easing-spring);
}
.settings-row:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.settings-row:active { transform: translateY(0) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.settings-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: var(--text-sm); color: var(--text-sub); }
.settings-row-value { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }

/* Settings App 탭 */
.settings-app-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}
.settings-app-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) var(--s-2);
    border-bottom: none;
    border-radius: var(--radius-s);
    margin: 0 calc(-1 * var(--s-2));
    transition: background-color var(--motion-hover),
                transform var(--duration-base) var(--easing-spring);
}
.settings-app-row:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.settings-app-row:active { transform: translateY(0) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.settings-app-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.settings-app-row:last-child { border-bottom: none; }
.settings-app-row-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.settings-app-row-desc { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); }

/* Prompt Editor — 2컬럼 그리드 */
.prompt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}

/* transform/transition → animations.css 단일 권위 선언으로 이관 */
.prompt-card {
    padding: var(--s-4);
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}
.prompt-card:hover {
    background: var(--surface-hover);
    box-shadow: var(--shadow-card-hover), var(--hover-ring);
    transform: translateY(var(--hover-lift-sm));
}
.prompt-card:active {
    box-shadow: none;
}
.prompt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

.prompt-card-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--s-1); }
.prompt-card-preview {
    font-size: var(--text-sm);
    color: var(--text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: var(--leading-normal);
}

/* Git 섹션 */
.git-section { margin-bottom: var(--s-5); }

/* transform/transition → animations.css §26c Tier 1 단일 권위 */
.git-branch-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
}
.git-branch-item:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.git-branch-item:active { transform: translateY(0) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.git-branch-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.git-branch-item.active { color: var(--accent); font-weight: var(--weight-semibold); }

.git-commit {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    font-size: var(--text-sm);
    align-items: baseline;
}
.git-commit-hash {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.git-commit-msg {
    color: var(--text-sub);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.git-commit-time {
    color: var(--text-sub);
    font-size: var(--text-sm);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.git-diff-line {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    padding: 0 var(--s-3);
    white-space: pre;
}
.git-diff-line.add { background: var(--green-bg); color: var(--green); }
.git-diff-line.remove { background: var(--red-bg); color: var(--red); }

/* Factory 위자드 */
.factory-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.factory-step {
    padding: var(--s-4);
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: border-color var(--motion-hover);
}
.factory-step.active { border-color: var(--accent); }
.factory-step-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--s-3); }


/* ═══════════════════════════════════════════════════════
   4. DASHBOARD VIEW — 에이전트 오버뷰
   미니멀 컨트롤 센터 — 수치는 간결, 여백으로 호흡
   ═══════════════════════════════════════════════════════ */

/* Summary 바 — 가로 나열 + 미니멀 수치 표시 */
.agent-summary-bar {
    display: flex;
    align-items: stretch;
    gap: var(--s-1);
    padding: var(--s-3) var(--s-4);
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
    border: none;
    flex-wrap: wrap;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    font-size: var(--text-base);
    color: var(--text-sub);
    white-space: nowrap;
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    padding: var(--s-1-5) var(--s-3);
    min-width: var(--s-9);
    position: relative;
    transition: background var(--motion-hover), color var(--motion-hover);
}
.summary-stat:hover {
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}

.summary-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text);
    letter-spacing: var(--tracking-tight);
    min-width: var(--s-4-5);
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-none);
}
.summary-stat.working .summary-value  { color: var(--status-running); }
.summary-stat.idle .summary-value     { color: var(--text-sub); }
.summary-stat.error .summary-value    { color: var(--red); }
.summary-stat.rate-limited .summary-value { color: var(--amber); }

/* 상태별 하단 인디케이터 라인 */
.summary-stat.working {
    background: transparent;
    box-shadow: var(--shadow-tab-running);
}
.summary-stat.error {
    background: transparent;
    box-shadow: var(--shadow-tab-error);
}
.summary-stat.rate-limited {
    background: transparent;
    box-shadow: var(--shadow-tab-warning);
}

.summary-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    opacity: 0.7;
}

.summary-divider {
    width: 1px;
    height: var(--s-5-0);
    background: var(--line);
    flex-shrink: 0;
    display: none;
}

/* 2-Column Overview — 레이아웃 기본은 layout.css, 여기는 gap만 보충 */
.overview-main {
    gap: var(--s-3);
}

/* 그래프 토글 바 — 클릭 가능한 헤더 */
.overview-graph-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) var(--s-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    transition: background var(--motion-hover), color var(--motion-hover);
}
.overview-graph-toggle:hover { background: var(--surface); color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); }
.overview-graph-toggle-label { display: flex; align-items: center; gap: var(--s-1); }
.overview-graph-toggle-actions { display: flex; align-items: center; gap: var(--s-1); }
.overview-graph-chevron {
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: transform var(--smooth);
    cursor: pointer;
}
.overview-graph.expanded .overview-graph-chevron { transform: rotate(90deg); }
.overview-graph.expanded .node-graph-wrap { margin-top: var(--s-1); }
.overview-graph.expanded .overview-graph-toggle {
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    border-bottom: none;
}


/* ═══════════════════════════════════════════════════════
   5. SIDEBAR — 워크플로우/GPT/OpenWebUI 탭
   ═══════════════════════════════════════════════════════ */


/* 탭 바 — 미니멀 세그먼트 */
.sidebar-tab-bar {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1-5) var(--s-3);
    background: transparent;
}
.sidebar-tab {
    padding: var(--s-1) var(--s-3);
    border: none;
    border-radius: var(--radius-s);
    background: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    color: var(--text-sub);
    cursor: pointer;
    transition: color var(--motion-hover), background var(--motion-hover),
                transform var(--duration-base) var(--easing-spring);
    white-space: nowrap;
    letter-spacing: var(--tracking-wide);
}
.sidebar-tab:hover { color: var(--text-sub); background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.sidebar-tab:active { transform: translateY(0) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.sidebar-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.sidebar-tab.active { color: var(--accent); background: var(--surface-active); }

.sidebar-tab-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.sidebar-tab-actions:empty { display: none; }
.sidebar-tab-content { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }

/* Workflow Stepper — 진행 표시 */
.wf-stepper {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3) 0;
}
.wf-step {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: background var(--motion-hover), color var(--motion-hover);
}
.wf-step.active { background: var(--surface); color: var(--text); }
.wf-step.done   { color: var(--green); }
.wf-step.fail   { color: var(--red); }

.wf-step-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-sub);
    transition: background var(--motion-hover);
}
.wf-step.active .wf-step-dot { background: var(--accent); animation: pgDotPulse 2s infinite; }
.wf-step.done .wf-step-dot   { background: var(--green); }
.wf-step.fail .wf-step-dot   { background: var(--red); }


/* ═══════════════════════════════════════════════════════
   6. GPT CHAT — 사이드바 내 GPT 채팅
   iMessage 수준의 클린 채팅 버블
   ═══════════════════════════════════════════════════════ */

.gpt-chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: var(--layout-lg);
    max-height: 600px;
}

.gpt-chat-status {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-sub);
    border-bottom: none;
}

.gpt-session-bar {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-bottom: none;
}

.gpt-session-select,
.gpt-conv-select {
    flex: 1;
    padding: var(--s-1) var(--s-2);
    background-color: var(--surface);
    border: none;
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--text-base);
    font-family: var(--font);
    cursor: pointer;
}

.gpt-conv-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    border-bottom: none;
}

.gpt-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

/* 공통 레이아웃은 components.css 셀렉터 그룹에서 상속 */
.gpt-empty-state,
.gpt-locked-state {
    padding: var(--s-8) var(--s-5);
}
.gpt-empty-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-w5); }
.gpt-empty-icon svg { width: 28px; height: 28px; color: var(--text-sub); opacity: 0.7; }
/* 타이포 → heading-md (HTML 클래스에 위임). 빈 상태용 색상만 override */
.gpt-empty-title { color: var(--text-sub); }
.gpt-empty-desc { font-size: var(--text-base); color: var(--text-sub); line-height: var(--leading-normal); max-width: 280px; }
.gpt-empty-examples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-top: var(--s-4);
    justify-content: center;
}
.gpt-example-btn {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    border: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--motion-hover), border-color var(--motion-hover), color var(--motion-hover), transform var(--motion-hover);
}
.gpt-example-btn:hover { background: var(--surface-active); border-color: var(--accent); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.gpt-example-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.gpt-example-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

.gpt-locked-steps {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin: var(--s-3) 0;
}
.gpt-locked-step {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.gpt-locked-step-num {
    width: var(--s-5-0);
    height: var(--s-5-0);
    border-radius: var(--radius-pill);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.gpt-locked-hint { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-2); }

/* GPT 메시지 버블 — 비대칭 radius로 방향성 표현 */
.gpt-msg {
    max-width: 88%;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    word-break: break-word;
    animation: pgFadeUp var(--smooth) both;
}

.gpt-msg.user {
    align-self: flex-end;
    background: var(--surface-w8);
    color: var(--text);
    border-radius: var(--radius) var(--radius) var(--s-1) var(--radius);
}

.gpt-msg.assistant {
    align-self: flex-start;
    background: var(--surface-hover);
    border: none;
    color: var(--text);
    border-radius: var(--radius) var(--radius) var(--radius) var(--s-1);
}

.gpt-msg.assistant pre {
    background: var(--bg);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    margin: var(--s-2) 0;
}
.gpt-msg.assistant code {
    background: var(--surface-active);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--text-base);
}
.gpt-msg.assistant pre code { background: none; padding: 0; }

.gpt-msg.error {
    align-self: flex-start;
    background: var(--red-bg);
    border: 1px solid var(--clr-error-bg-lg);
    color: var(--red);
    border-radius: var(--radius);
}

/* 타이핑 인디케이터 */
.gpt-typing {
    display: inline-block;
    width: 2px;
    height: var(--s-3-5);
    background: var(--accent);
    animation: pgBlink 0.8s infinite;
    margin-left: var(--s-1);
    vertical-align: text-bottom;
}

/* GPT 입력 영역 */
.gpt-input-area {
    display: flex;
    align-items: flex-end;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-top: none;
    background: var(--bg-raised);
}
.gpt-input {
    flex: 1;
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-3);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    resize: none;
    min-height: var(--s-7);
    max-height: var(--s-20);
    overflow-y: auto;
    outline: none;
    transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
}
.gpt-input:focus {
    border-color: var(--purple);
    box-shadow: var(--shadow-focus-ring-purple);
}

.gpt-send-btn {
    width: var(--s-7);
    height: var(--s-7);
    border-radius: var(--radius);
    background: var(--purple);
    color: var(--text);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--motion-hover), transform var(--motion-hover);
}
.gpt-send-btn:hover { opacity: 0.85; transform: translateY(var(--hover-lift-sm)); }
.gpt-send-btn:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); }
.gpt-send-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.gpt-send-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* GPT 재시도 */
.gpt-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    background: var(--red-bg);
    border: 1px solid var(--clr-error-bg-lg);
    color: var(--red);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    margin-top: var(--s-1);
    transition: background var(--motion-hover), transform var(--motion-hover);
}
.gpt-retry-btn:hover { background: var(--clr-error-bg-lg); transform: translateY(var(--hover-lift-sm)); }
.gpt-retry-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.gpt-retry-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* GPT 이미지 첨부 버튼 */
.gpt-attach-btn {
    width: var(--s-7);
    height: var(--s-7);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-sub);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--motion-hover), color var(--motion-hover);
}
.gpt-attach-btn:hover { background: var(--surface-hover); color: var(--accent); transform: translateY(var(--hover-lift-sm)); }
.gpt-attach-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.gpt-attach-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* GPT 첨부 이미지 미리보기 바 */
.gpt-img-preview-bar {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    overflow-x: auto;
    background: var(--bg-raised);
}
.gpt-img-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: var(--s-9);
    height: var(--s-9);
    border-radius: var(--radius);
    overflow: hidden;
}
.gpt-img-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gpt-img-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: var(--s-4-5);
    height: var(--s-4-5);
    border-radius: 50%;
    background: var(--overlay);
    color: var(--text);
    border: none;
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--leading-none);
    opacity: 0;
    transition: opacity var(--motion-hover);
}
.gpt-img-thumb-wrap:hover .gpt-img-thumb-remove { opacity: 1; transform: translateY(var(--hover-lift-sm)); }

/* GPT 메시지 내 이미지 그리드 */
.gpt-msg-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.gpt-msg-img {
    max-width: var(--card-min-sm);
    max-height: clamp(120px, 20vw, 180px);
    border-radius: var(--radius);
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity var(--motion-hover);
}
.gpt-msg-img:hover { opacity: 0.85; transform: translateY(var(--hover-lift-sm)); }


/* ═══════════════════════════════════════════════════════
   7. PWA — 설치/알림/오프라인
   ═══════════════════════════════════════════════════════ */

.pwa-install-banner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: var(--s-4);
}

.pwa-install-btn {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    border: none;
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: opacity var(--motion-hover);
}
.pwa-install-btn:hover { opacity: 0.88; transform: translateY(var(--hover-lift-sm)); }
.pwa-install-btn:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); }
.pwa-install-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

.pwa-install-btn-later {
    background: transparent;
    color: var(--text-sub);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--s-3) var(--s-5);
    font-size: var(--text-base);
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--motion-hover), color var(--motion-hover);
}
.pwa-install-btn-later:hover { border-color: var(--text-sub); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.pwa-install-btn-later:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.pwa-install-btn-later:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

.pwa-update-btn {
    background: var(--accent);
    color: var(--accent-on);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--s-1) var(--s-4);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: opacity var(--motion-hover);
}
.pwa-update-btn:hover { opacity: 0.88; transform: translateY(var(--hover-lift-sm)); }
.pwa-update-btn:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); }
.pwa-update-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

.pwa-offline-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-2);
    background: var(--amber-bg);
    color: var(--amber);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}


/* ═══════════════════════════════════════════════════════
   8. OWUI / MC — OpenWebUI + ManyChat 연동
   ═══════════════════════════════════════════════════════ */

/* ── OWUI Chat Panel ── */
.owui-chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.owui-chat-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    flex-shrink: 0;
}

.owui-status-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--text-sub);
    flex-shrink: 0;
}
.owui-status-dot.connected { background: var(--green); }

.owui-model-select {
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius);
    background-color: var(--surface);
    border: none;
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
}

.owui-conv-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    flex-shrink: 0;
}

.owui-conv-select {
    flex: 1;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius);
    background-color: var(--surface);
    border: none;
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
}

.owui-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

/* 공통 레이아웃은 components.css 셀렉터 그룹에서 상속 */
.owui-empty-state {
    padding: var(--s-8) var(--s-5);
}

.owui-empty-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-w5); }
.owui-empty-icon svg { width: 28px; height: 28px; color: var(--text-sub); opacity: 0.7; }
/* 타이포 → heading-md (HTML 클래스에 위임) — 추가 레이아웃 속성 없음 */
.owui-empty-desc { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); }
.owui-empty-examples { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-3); }

.owui-example-btn {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    border: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--motion-hover), border-color var(--motion-hover), color var(--motion-hover), transform var(--motion-hover);
}
.owui-example-btn:hover { background: var(--surface-active); border-color: var(--accent); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.owui-example-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.owui-example-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* OWUI Locked State */
.owui-locked-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-4);
    text-align: center;
}

.owui-locked-steps {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    text-align: left;
    width: 100%;
    max-width: var(--layout-xl);
    margin-top: var(--s-3);
}

.owui-locked-step {
    display: flex;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.owui-locked-step-num {
    width: var(--s-5);
    height: var(--s-5);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    flex-shrink: 0;
}

.owui-locked-step-text { flex: 1; line-height: var(--leading-normal); }

/* OWUI Settings */
.owui-settings-panel {
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.owui-field-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
    display: block;
}

.owui-field-input {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid transparent;
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
}

.owui-field-input:focus { border-color: var(--accent); }

.owui-field-textarea {
    width: 100%;
    min-height: var(--s-12);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid transparent;
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    resize: vertical;
}

.owui-field-textarea:focus { border-color: var(--accent); }

.owui-typing {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.owui-typing .dot {
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--text-sub);
    animation: pgDotPulse 1.5s infinite;
}

.owui-typing .dot:nth-child(2) { animation-delay: var(--duration-moderate); }
.owui-typing .dot:nth-child(3) { animation-delay: 0.6s; }


/* ── Job Timeline ── */
.job-tl-day {
    margin-bottom: var(--s-4);
}

.job-tl-day-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
}

.job-tl-day-items {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.job-tl-item {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--motion-hover), transform var(--motion-hover);
    position: relative;
}

.job-tl-item:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.job-tl-item:active { transform: translateY(0) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.job-tl-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

.job-tl-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    background: var(--text-sub);
    flex-shrink: 0;
    margin-top: var(--s-1);
}

.job-tl-dot.running { background: var(--status-running); animation: pgDotPulse 2s infinite; }
.job-tl-dot.complete { background: var(--status-complete); }
.job-tl-dot.paused { background: var(--status-waiting); }
.job-tl-dot.archived { background: var(--status-idle); opacity: 0.6; }
.job-tl-dot.error { background: var(--status-error); }
.job-tl-dot.cancelled { background: var(--status-cancelled); }

.job-tl-connector {
    position: absolute;
    left: var(--s-3-5);
    top: var(--s-5-0);
    bottom: -4px;
    width: 1px;
    background: var(--line);
}

.job-tl-item:last-child .job-tl-connector { display: none; }

.job-tl-content {
    flex: 1;
    min-width: 0;
}

.job-tl-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.job-tl-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.job-tl-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.job-tl-status {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.job-tl-status.running { background: var(--status-running-bg); color: var(--status-running); }
.job-tl-status.complete { background: var(--status-complete-bg); color: var(--status-complete); }
.job-tl-status.paused { background: var(--status-waiting-bg); color: var(--status-waiting); }
.job-tl-status.archived { background: var(--status-idle-bg); color: var(--status-idle); }
.job-tl-status.error { background: var(--status-error-bg); color: var(--status-error); }
.job-tl-status.cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled); }

.job-tl-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.job-tl-pct {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-weight: var(--weight-medium);
}

.job-tl-agents {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-top: var(--s-1);
}

.job-tl-agent {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-sub);
}


/* ── Draft Panel — 사이드 패널 기본 스타일 ── */
.draft-panel-toggle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    width: var(--s-5-5);
    height: var(--s-9);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--text-sub);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.draft-panel-toggle:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }

.draft-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: var(--s-4-5);
    height: var(--s-4-5);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s-1);
}

.draft-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--layout-xl);
    max-width: 90vw;
    height: 100vh;
    z-index: 1200;
    background: var(--bg-raised);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--smooth);
    overflow: hidden;
}
.draft-panel.open { transform: translateX(0); }

.draft-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4);
    flex-shrink: 0;
}
.draft-panel-header-left {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.draft-panel-header-left h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
}
.draft-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.draft-panel-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface-active);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
}
.draft-panel-header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.draft-panel-refresh,
.draft-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-5);
    height: var(--s-5-5);
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.draft-panel-refresh:hover,
.draft-panel-close:hover { background: var(--surface-active); color: var(--text); transform: scale(var(--hover-scale)); }

.draft-panel-tabs {
    display: flex;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-4);
    flex-shrink: 0;
}
.draft-tab {
    padding: var(--s-1) var(--s-3);
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.draft-tab:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.draft-tab.active { background: var(--surface-active); color: var(--accent); font-weight: var(--weight-semibold); }
.draft-tab-count {
    font-size: var(--text-sm);
    opacity: 0.7;
}

.draft-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4);
}

/* ── Draft Panel (확장 — 커버/PDF) ── */
/* 공통 레이아웃은 components.css 셀렉터 그룹에서 상속 */
.draft-empty-state {
    padding: var(--s-8) var(--s-5);
}

/* draft-empty-icon: 표준 56x56 원형 래퍼 패턴 */
.draft-empty-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-w5); }
.draft-empty-icon svg { width: 28px; height: 28px; color: var(--text-sub); opacity: 0.7; }
.draft-empty-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-sub); }
.draft-empty-desc { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); }

.draft-option {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--radius-s);
    background: var(--surface-active);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    margin-bottom: var(--s-2);
}

.draft-option:last-child { margin-bottom: 0; }
.draft-option:hover { background: var(--surface-w10); border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-float); }

.draft-option.choice-selected {
    background-color: var(--surface-active);
    border: 1px solid var(--clr-teal-border-subtle);
}

.draft-option-num {
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-w10);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}

.draft-option.choice-selected .draft-option-num {
    background-color: var(--accent);
    color: var(--accent-on);
}

.draft-option-content { flex: 1; min-width: 0; }
.draft-option-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--s-1); line-height: var(--leading-tight); }
.draft-option-desc { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); }
.draft-option[aria-disabled="true"] { opacity: 0.5; cursor: default; }

.draft-option-select {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    background-color: var(--surface-w10);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    flex-shrink: 0;
    align-self: center;
    border: 1px solid var(--line-bold);
}

.draft-option-select:hover { background: var(--accent); color: var(--accent-on); border-color: var(--accent); transform: translateY(var(--hover-lift-sm)); }
.draft-option.choice-selected .draft-option-select { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }

.draft-body-status {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--green);
    margin-top: var(--s-2);
    padding: var(--s-1) var(--s-2);
    background: var(--clr-success-bg-xs);
    border-radius: var(--radius-s);
}
.draft-body-status--center {
    justify-content: center;
}

.draft-cover-pdf-bar {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
}

.draft-cover-pdf-all {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1-5) var(--s-3);
    border-radius: var(--radius-s);
    background: var(--surface-w8);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    border: none;
}

.draft-cover-pdf-all:hover { background: var(--surface-w20); transform: translateY(var(--hover-lift-sm)); }

/* ── Draft Card (요청/초안 카드) ── */
/* transform/transition → animations.css 단일 권위 선언으로 이관 */
.draft-card {
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
}
.draft-card:last-child { margin-bottom: 0; }
.draft-card:hover {
    background: var(--surface-hover);
    box-shadow: var(--shadow-card-hover), var(--hover-ring);
    transform: translateY(var(--hover-lift-sm));
}
.draft-card:active {
    box-shadow: none;
}
.draft-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}
.draft-card.choice-urgent { box-shadow: var(--shadow-urgent-ring); }
.draft-card.choice-done { opacity: 0.65; pointer-events: none; }
.draft-card.choice-timedout { opacity: 0.5; }

.draft-card-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.draft-card-agent {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
}
.draft-card-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: auto;
}
.draft-card-timer {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    margin-left: auto;
    line-height: var(--leading-relaxed);
}
.draft-card-timer.timer-active { background: var(--surface-w15); color: var(--accent); }
.draft-card-timer.timer-done { background: var(--clr-success-bg-lg); color: var(--green); }
.draft-card-timer.timer-expired { background: var(--surface-active); color: var(--text-sub); }
.draft-card-timer.timer-urgent { background: var(--clr-orange-bg-md); color: var(--clr-orange); animation: pulse-urgent 1s var(--ease-in-out) infinite; }

@keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.draft-card-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5);
    height: var(--s-5);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover);
    flex-shrink: 0;
    border: none;
}
.draft-card-dismiss:hover { background: var(--surface-active); color: var(--text); transform: translateY(var(--hover-lift-sm)); }

.draft-card-orig-cmd {
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface-hover);
    border-radius: var(--radius-s);
    padding: var(--s-2) var(--s-3);
    margin-bottom: var(--s-3);
    line-height: var(--leading-normal);
    word-break: break-word;
    white-space: pre-wrap;
}
.draft-card-subject {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    line-height: var(--leading-normal);
    margin-bottom: var(--s-3);
}

/* 타이머 프로그레스 바 */
.draft-timer-bar {
    height: 3px;
    background: var(--surface-active);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-3);
    overflow: hidden;
}
.draft-timer-bar-fill {
    height: 100%;
    border-radius: var(--radius-s);
    transition: width var(--duration-dramatic) linear;
}
.draft-timer-bar-fill.timer-ok { background: var(--accent); }
.draft-timer-bar-fill.timer-urgent { background: var(--clr-orange); }

/* 요청 카드 액션 바 (확인 / +60s / 상태) */
.draft-choice-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
}
.draft-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1-5) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    border: none;
}
.draft-action-btn.primary {
    background: var(--accent);
    color: var(--accent-on);
}
.draft-action-btn.primary:hover { filter: brightness(var(--hover-brightness)); transform: translateY(var(--hover-lift-sm)); }
.draft-action-btn.primary:disabled {
    background: var(--surface-active);
    color: var(--text-sub);
    cursor: not-allowed;
}
.draft-action-btn.extend {
    background: var(--surface-w10);
    color: var(--text);
    border: 1px solid var(--line-bold);
}
.draft-action-btn.extend:hover { background: var(--surface-hover); color: var(--text); border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }
.draft-action-btn.extend:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.draft-choice-status {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
    margin-left: auto;
}

/* 초안 옵션 PDF 다운로드 버튼 */
.draft-option-pdf {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    background: var(--surface-w10);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    border: 1px solid var(--line-bold);
    flex-shrink: 0;
    align-self: center;
}
.draft-option-pdf:hover { background: var(--surface-hover); color: var(--text); border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }

.mc-action-btn {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-pill);
    border: none;
    background: var(--surface-hover);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--motion-hover), color var(--motion-hover);
}
.mc-action-btn:hover { background: var(--surface-active); color: var(--text); transform: translateY(var(--hover-lift-sm)); }

/* ManyChat 배포/인스타 섹션 */
.mc-deploy-section {
    background: linear-gradient(135deg, var(--green-bg), var(--purple-bg));
    border-radius: var(--radius);
}
/* 타이포 → heading-sm (HTML 클래스). 색상만 보존 */
.mc-deploy-title { color: var(--green); }
.mc-deploy-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--s-5); height: var(--s-5); border-radius: 50%;
    background: var(--green-bg); font-size: var(--text-sm);
}
.mc-deploy-btn {
    flex: 1;
    background: linear-gradient(135deg, var(--green), var(--clr-success-deep));
    border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    padding: var(--s-2) var(--s-5);
    box-shadow: var(--shadow-success-glow);
}
.mc-cancel-btn {
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    padding: var(--s-2) var(--s-4);
}
.mc-insta-section {
    background: linear-gradient(135deg, var(--clr-error-bg-xs), var(--clr-pink-bg-xs));
    border-radius: var(--radius);
}
/* 타이포 → heading-sm (HTML 클래스). 색상만 보존 */
.mc-insta-title { color: var(--clr-pink-insta); }
.mc-insta-icon { font-size: var(--text-reading); }
.mc-submit-btn {
    background: linear-gradient(135deg, var(--purple), var(--clr-purple-deep));
    border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    padding: var(--s-2) var(--s-6);
    box-shadow: var(--shadow-purple-glow);
}

/* ═══════════════════════════════════════════════════════
   9. RESPONSIVE — 4단계 브레이크포인트
   960 → 768 → 640 → 375
   ═══════════════════════════════════════════════════════ */

/* 1024px — 태블릿 가로 (넓은 태블릿 완만 전환) */
@media (max-width: 1024px) {
    .agent-summary-bar { flex-wrap: wrap; }
    .summary-stat { min-width: var(--s-9); }
    .overview-main { gap: var(--s-3); }
    /* 설정 섹션 — 태블릿에서 간격 축소 */
    .settings-section { margin-bottom: var(--s-4); }
    .settings-section-title { font-size: var(--text-sm); margin-bottom: var(--s-3); }
    .settings-row { padding: var(--s-2) var(--s-2); }
    /* 프롬프트 그리드 — 태블릿 2열 유지, 간격 축소 */
    .prompt-grid { gap: var(--s-2); }
    .prompt-card { padding: var(--s-3); }
    /* 스킵 이벤트 바 — 태블릿 간격 축소 */
    .feed-skip-event { padding: var(--s-2) var(--s-4); }
    .feed-skip-group-header { padding: var(--s-2) var(--s-4); }
    /* draft 패널 — 태블릿 최대 폭 축소 */
    .draft-panel { max-width: var(--layout-xl); }
}

/* 960px — Overview 1컬럼 전환 */
@media (max-width: 960px) {
    .agent-summary-bar { gap: var(--s-2); padding: var(--s-2) var(--s-3); }
    .summary-stat { padding: var(--s-2) var(--s-3); min-width: 60px; }
    .overview-main { flex-direction: column; gap: var(--s-3); }
    .overview-agents { flex: none; width: 100%; }
    .job-toggle-header { padding: var(--s-2) var(--s-3); }
    .agent-toggle-header { padding: var(--s-2) var(--s-3); }
}

/* 768px — 모바일 전환 시작 */
@media (max-width: 768px) {
    .chat-container { height: calc(100vh - var(--topbar-h) - var(--bottombar-h)); }
    .prompt-grid { grid-template-columns: 1fr; }
    .settings-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    /* cmd-sub-toggle/btn/::after → command.css 반응형에서 통합 관리 */
    .agent-summary-bar { gap: var(--s-1); }
    .summary-divider { display: none; }
    .summary-stat { font-size: var(--text-sm); padding: var(--s-1-5) var(--s-3); flex: 1; }
    .summary-value { font-size: var(--text-lg); min-width: 16px; }
    .skip-reason-bar { flex-wrap: wrap; }
    .skip-reason-bar .btn-regenerate { margin-left: 0; margin-top: var(--s-1); width: 100%; justify-content: center; }
    .btn-regenerate-inline { opacity: 1; font-size: var(--text-sm); padding: var(--s-1) var(--s-1); }
    .feed-skip-event { padding: var(--s-2) var(--s-3); }
    .feed-skip-group-header { padding: var(--s-2) var(--s-3); }
    /* 모바일에서 draft 사이드패널 풀스크린 */
    .draft-panel { width: 100vw; max-width: 100vw; }
    .draft-panel-toggle { display: none; }
}

/* 640px — 컴팩트 모드 */
@media (max-width: 640px) {
    .sidebar-tab-bar { padding: var(--s-1) var(--s-2); }
    .sidebar-tab { padding: var(--s-1) var(--s-2); font-size: var(--text-sm); }
    .skip-badge { font-size: var(--text-sm); padding: var(--s-1) var(--s-1); }
    .skip-count-badge { font-size: var(--text-sm); }
    .btn-regenerate { font-size: var(--text-sm); padding: var(--s-1) var(--s-2); }
    .output-file { gap: var(--s-2); padding: var(--s-2) var(--s-3); }
    .output-icon { font-size: var(--text-lg); }
    .output-name { font-size: var(--text-sm); }
    .feed-skip-event .feed-skip-agent-chip { font-size: var(--text-sm); }

    /* Dashboard 필터바 — cmd-sub-toggle 공유 구조로 이관 (가로 스크롤) */
    #dashboard-filter-bar {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    #dashboard-filter-bar::-webkit-scrollbar { display: none; }

    /* 요약 통계 — 컴팩트 패딩 */
    .summary-stat { padding: var(--s-1-5) var(--s-3); }
    .summary-value { font-size: var(--text-lg); }
}

/* 375px — 최소 폭 모바일 */
@media (max-width: 375px) {
    .chat-input-area { padding: var(--s-2) var(--s-3); }
    .agent-summary-bar {
        gap: var(--s-1);
        padding: var(--s-2) var(--s-3);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .agent-summary-bar::-webkit-scrollbar { display: none; }
    .summary-stat {
        flex: 0 0 auto;
        min-width: var(--s-9);
        justify-content: center;
        flex-direction: column;
        gap: var(--s-1);
        padding: var(--s-1) var(--s-2);
    }
    .summary-value { font-size: var(--text-base); }
    .summary-label { font-size: var(--text-sm); letter-spacing: var(--tracking-wide); }

    /* Dashboard 필터바 축소 — cmd-sub-toggle 반응형은 command.css에서 관리 */

    .sidebar-tab-bar { gap: var(--s-1); }
    .output-file { gap: var(--s-1); padding: var(--s-1) var(--s-2); }
    .output-name { font-size: var(--text-sm); }
    .skip-reason-bar { padding: var(--s-1) var(--s-3); font-size: var(--text-sm); }
    .feed-skip-event { padding: var(--s-1) var(--s-2); }
    .feed-skip-group-header { padding: var(--s-1) var(--s-3); }
    .btn-regenerate { font-size: var(--text-sm); padding: var(--s-1) var(--s-1); }
}


/* PromptFort CSS 제거됨 — css/archived/promptfort.css로 이관 (2026-03-15) */


/* ═══════════════════════════════════════════════════════
   11. OPENCLAW GATEWAY
   ═══════════════════════════════════════════════════════ */

.oc-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); }
/* heading-lg 패턴 통일 */
.oc-panel-title { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); color: var(--text); }
.oc-panel-actions { display: flex; align-items: center; gap: var(--s-2); }
.oc-btn-sm {
    padding: var(--s-1) var(--s-4); border-radius: var(--radius-pill); background: var(--surface);
    color: var(--text-sub); border: none; cursor: pointer; font-family: var(--font);
    font-size: var(--text-base); font-weight: var(--weight-medium); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); white-space: nowrap;
}
.oc-btn-sm:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.oc-btn-accent {
    padding: var(--s-1) var(--s-4); border-radius: var(--radius-s); background: var(--accent); color: var(--accent-on);
    border: none; cursor: pointer; font-family: var(--font); font-size: var(--text-base);
    font-weight: var(--weight-semibold); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); white-space: nowrap;
}
.oc-btn-accent:hover { filter: brightness(var(--hover-brightness)); box-shadow: var(--shadow); transform: translateY(var(--hover-lift-sm)); }

.oc-subtabs { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-5); }
.oc-subtab-btn {
    padding: var(--s-1) var(--s-4); border-radius: var(--radius-pill); background: transparent;
    color: var(--text-sub); border: none; cursor: pointer; font: inherit;
    font-size: var(--text-base); font-weight: var(--weight-medium); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.oc-subtab-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.oc-subtab-btn.active { background: var(--surface-active); color: var(--accent); font-weight: var(--weight-semibold); }
.oc-subtab-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.oc-subtab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.oc-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); padding: var(--s-5); }
.oc-agent-grid:empty { display: none; }
.oc-agent-card { background: transparent; border-radius: var(--radius); padding: var(--s-4); }
/* .oc-agent-card:hover — openclaw.css로 통합 (이중화 제거) */
.oc-agent-card-header { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.oc-agent-icon { font-size: var(--text-xl); }
.oc-agent-name { font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--text); }
.oc-agent-status { width: var(--s-2); height: var(--s-2); border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.oc-agent-status.active { background: var(--status-running); animation: pgDotPulse 2s infinite; }
.oc-agent-status.working { background: var(--status-running); animation: pgDotPulse 2s infinite; }
.oc-agent-status.idle { background: var(--text-sub); }
.oc-agent-card-body { display: flex; flex-direction: column; gap: var(--s-1); }
.oc-agent-model { font-size: var(--text-sm); color: var(--text-sub); font-family: var(--font-mono); }
.oc-agent-sessions { font-size: var(--text-sm); color: var(--text-sub); }
.oc-agent-card-footer { margin-top: var(--s-3); }

.oc-channel-summary { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); font-size: var(--text-sm); color: var(--text-sub); }
.oc-channel-summary:empty { display: none; }

.oc-msg-agent-select { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); }
.oc-msg-agent-select select { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s-1) var(--s-3); color: var(--text); font: inherit; font-size: var(--text-base); }
.oc-msg-agent-select select:focus { border-color: var(--accent); outline: none; }
.oc-session-label { font-size: var(--text-sm); color: var(--text-sub); font-family: var(--font-mono); }

.oc-msg-feed { flex: 1; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); scrollbar-width: thin; scrollbar-color: var(--surface-active) transparent; }
.oc-msg-feed::-webkit-scrollbar { width: var(--s-1); }
.oc-msg-feed::-webkit-scrollbar-track { background: transparent; }
.oc-msg-feed::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: var(--radius-s); }
.oc-msg-bubble { max-width: 80%; padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-size: var(--text-base); line-height: var(--leading-normal); }
.oc-msg-user { align-self: flex-end; background: var(--surface-w8); color: var(--text); }
.oc-msg-assistant { align-self: flex-start; background: var(--surface); color: var(--text); }
.oc-msg-time { font-size: var(--text-sm); color: var(--text-sub); display: block; margin-bottom: var(--s-1); }
.oc-msg-body { word-break: break-word; }
.oc-msg-body code { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--surface-active); padding: var(--s-1) var(--s-1); border-radius: var(--radius-s); }

.oc-msg-input-bar { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-5); }
.oc-msg-input-bar input { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s-2) var(--s-3); color: var(--text); font: inherit; font-size: var(--text-base); outline: none; transition: border-color var(--motion-hover); }
.oc-msg-input-bar input:focus { border-color: var(--accent); }
.oc-msg-input-bar input::placeholder { color: var(--text-sub); }

.oc-connection-badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.oc-connection-badge.connected { background: var(--green-bg); color: var(--green); }
.oc-connection-badge.disconnected { background: var(--red-bg); color: var(--red); }
.oc-conn-dot { width: var(--s-1-5); height: var(--s-1-5); border-radius: 50%; flex-shrink: 0; }
.oc-connection-badge.connected .oc-conn-dot { background: var(--green); animation: pgDotPulse 2s infinite; }
.oc-connection-badge.disconnected .oc-conn-dot { background: var(--red); }

.oc-sessions-container { padding: var(--s-5); }
.oc-session-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.oc-session-table th { text-align: left; padding: var(--s-2) var(--s-3); color: var(--text-sub); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.oc-session-table td { padding: var(--s-2) var(--s-3); color: var(--text-sub); }
.oc-session-table tr:hover td { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.oc-session-actions { display: flex; gap: var(--s-2); padding: var(--s-4) 0 0; }

.oc-channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); padding: var(--s-5); }
.oc-channel-card { background: transparent; border-radius: var(--radius); padding: var(--s-4); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); }
/* .oc-channel-card:hover — openclaw.css로 통합 (이중화 제거) */
.oc-channel-card-icon { font-size: var(--text-5xl); margin-bottom: var(--s-2); }
.oc-channel-card-name { font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--text); margin-bottom: var(--s-1); }
.oc-channel-card-status { font-size: var(--text-sm); display: flex; align-items: center; gap: var(--s-1); }
.oc-channel-card-status.connected { color: var(--green); }
.oc-channel-card-status.disconnected { color: var(--red); }
.oc-channel-card-account { font-size: var(--text-sm); color: var(--text-sub); font-family: var(--font-mono); margin-top: var(--s-1); }
.oc-channel-card-binding { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); }

.oc-routing-table { padding: var(--s-5); }
.oc-routing-table:empty { display: none; }
.oc-skills-list { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.oc-skills-list:empty { display: none; }

.oc-settings-form { display: flex; flex-direction: column; gap: var(--s-4); }
.oc-settings-form label { font-size: var(--text-base); color: var(--text-sub); display: flex; flex-direction: column; gap: var(--s-1); }
.oc-settings-form input[type="text"],
.oc-settings-form input[type="password"] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s-2) var(--s-3); color: var(--text); font: inherit; font-size: var(--text-base); outline: none; transition: border-color var(--motion-hover); }
.oc-settings-form input[type="text"]:focus,
.oc-settings-form input[type="password"]:focus { border-color: var(--accent); }
.oc-settings-form .oc-toggle-row { flex-direction: row; align-items: center; justify-content: space-between; }
.oc-toggle-row input[type="checkbox"] { width: 36px; height: 20px; appearance: none; -webkit-appearance: none; background: var(--surface-active); border-radius: var(--radius); position: relative; cursor: pointer; transition: background var(--duration-base) var(--easing-spring), box-shadow var(--duration-base) var(--easing-out); }
.oc-toggle-row input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform var(--duration-moderate) var(--easing-spring), background var(--duration-base) var(--easing-spring); }
.oc-toggle-row input[type="checkbox"]:checked { background: var(--accent); }
.oc-toggle-row input[type="checkbox"]:checked::after { transform: translateX(16px); }

/* oc-empty-state → openclaw.css로 통합 (중복 제거) */
.oc-subpanel { display: flex; flex-direction: column; min-height: 0; container-type: inline-size; container-name: ocpanel; }
#oc-sub-messages { height: calc(100vh - var(--topbar-h) - 180px); }

@media (max-width: 960px) { .oc-agent-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .oc-channel-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
@media (max-width: 768px) { .oc-agent-grid { grid-template-columns: 1fr 1fr; padding: var(--s-4); } .oc-channel-grid { grid-template-columns: 1fr 1fr; padding: var(--s-4); } .oc-msg-bubble { max-width: 90%; } .oc-panel-header { flex-direction: column; align-items: flex-start; gap: var(--s-2); } }
@media (max-width: 640px) { .oc-agent-grid { grid-template-columns: 1fr; } .oc-channel-grid { grid-template-columns: 1fr; } .oc-subtabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .oc-subtabs::-webkit-scrollbar { display: none; } .oc-subtab-btn { flex-shrink: 0; } .oc-msg-input-bar { padding: var(--s-2) var(--s-4); } .oc-sessions-container { padding: var(--s-4); overflow-x: auto; } }
@media (max-width: 375px) { .oc-agent-card { padding: var(--s-3); } .oc-panel-header { padding: var(--s-3) var(--s-4); } .oc-subtabs { padding: var(--s-2) var(--s-4); gap: var(--s-1); } .oc-msg-agent-select { flex-direction: column; align-items: flex-start; gap: var(--s-1); padding: var(--s-2) var(--s-4); } .oc-channel-card { padding: var(--s-3); } }

/* CQ: 서브패널 컨테이너가 좁아질 때 그리드 단일 컬럼 전환 */
@container ocpanel (max-width: 480px) { .oc-agent-grid { grid-template-columns: 1fr; } .oc-channel-grid { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════
   12. REMOTE EDITING
   ═══════════════════════════════════════════════════════ */

.re-panel { display: flex; flex-direction: column; gap: var(--s-4); }
.re-topbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.re-server-select { padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg-raised); color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-family: var(--font); cursor: pointer; outline: none; }
.re-server-select:hover { border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }

.re-sync-badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.re-sync-badge.synced { background: var(--green-bg); color: var(--green); }
.re-sync-badge.synced::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.re-sync-badge.unsynced { background: var(--amber-bg); color: var(--amber); }
.re-sync-badge.unsynced::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.re-sync-badge.loading { background: var(--surface); color: var(--text-sub); }
.re-sync-stats { font-size: var(--text-sm); color: var(--text-sub); display: flex; gap: var(--s-3); }
.re-sync-stats .stat-modified { color: var(--amber); }
.re-sync-stats .stat-local-only { color: var(--green); }
.re-sync-stats .stat-remote-only { color: var(--teal); }

.re-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.re-action-btn { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--text-sub); font-size: var(--text-sm); font-weight: var(--weight-medium); font-family: var(--font); cursor: pointer; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); white-space: nowrap; }
.re-action-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }
.re-action-btn.primary { background: var(--surface-active); color: var(--accent); border-color: var(--surface-w20); }
.re-action-btn.primary:hover { opacity: 0.88; transform: translateY(var(--hover-lift-sm)); }
.re-action-btn.danger { color: var(--red); }
.re-action-btn.danger:hover { background: var(--red-bg); border-color: var(--clr-error-border); transform: translateY(var(--hover-lift-sm)); }
.re-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.re-action-btn .re-btn-icon { display: flex; align-items: center; }

.re-content { display: grid; grid-template-columns: 300px 1fr; gap: var(--s-4); min-height: 0; }
.re-left-col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.re-right-col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

.re-section { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.re-section-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-sub); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.re-section-head .count { font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-sub); }

.re-tree-body { max-height: calc(100vh - 280px); overflow-y: auto; overflow-x: hidden; }
.re-tree-search { display: flex; padding: var(--s-2) var(--s-3); }
.re-tree-search input { width: 100%; padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); color: var(--text); font-size: var(--text-sm); font-family: var(--font); outline: none; }
.re-tree-search input:focus { border-color: var(--accent); }
.re-tree-search input::placeholder { color: var(--text-sub); }

.re-tree-item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-4); font-size: var(--text-sm); font-family: var(--font-mono); color: var(--text-sub); cursor: pointer; transition: background var(--motion-hover); user-select: none; }
.re-tree-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.re-tree-item.active { background: var(--surface-active); color: var(--accent); }
.re-tree-item[data-depth="0"] { padding-left: var(--s-4); }
.re-tree-item[data-depth="1"] { padding-left: var(--s-6); }
.re-tree-item[data-depth="2"] { padding-left: calc(var(--s-6) + var(--s-4)); }
.re-tree-item[data-depth="3"] { padding-left: calc(var(--s-6) * 2); }
.re-tree-chevron { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-sub); font-size: var(--text-sm); transition: transform var(--motion-hover); }
.re-tree-chevron.collapsed { transform: rotate(-90deg); }
.re-tree-chevron.spacer { visibility: hidden; }
.re-tree-icon { flex-shrink: 0; font-size: var(--text-base); width: 18px; text-align: center; }
.re-tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-tree-sync-dot { width: var(--s-1-5); height: var(--s-1-5); border-radius: 50%; flex-shrink: 0; }
.re-tree-sync-dot.synced { background: var(--green); }
.re-tree-sync-dot.modified { background: var(--amber); }
.re-tree-sync-dot.local-only { background: var(--green); }
.re-tree-sync-dot.remote-only { background: var(--teal); }
.re-tree-size { font-size: var(--text-sm); color: var(--text-sub); flex-shrink: 0; }
.re-tree-item.dir .re-tree-name { font-weight: var(--weight-semibold); color: var(--text); }
.re-tree-item.dir:hover .re-tree-name { color: var(--accent); transform: translateY(var(--hover-lift-sm)); }
.re-tree-group.collapsed { display: none; }

.re-editor-panel { flex: 1; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.re-editor-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); gap: var(--s-3); }
.re-editor-file-info { display: flex; align-items: center; gap: var(--s-2); flex: 1; min-width: 0; }
.re-editor-filename { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-editor-source-badge { font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); }
.re-editor-source-badge.local { background: var(--amber-bg); color: var(--amber); }
.re-editor-source-badge.remote { background: var(--surface-w8); color: var(--accent); }
.re-editor-modified-badge { font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); background: var(--amber-bg); color: var(--amber); display: none; }
.re-editor-modified-badge.visible { display: inline-flex; }
.re-editor-actions { display: flex; gap: var(--s-2); flex-shrink: 0; }

.re-editor-tabs { display: flex; background: var(--surface); }
.re-editor-tab { flex: 1; padding: var(--s-2) var(--s-4); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); text-align: center; font-family: var(--font); }
.re-editor-tab:hover { color: var(--text-sub); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.re-editor-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface-active); }

.re-editor-body { flex: 1; display: flex; flex-direction: column; min-height: var(--layout-xl); position: relative; }
.re-editor-textarea-wrap { flex: 1; display: flex; position: relative; overflow: hidden; }
.re-editor-line-numbers { width: 48px; flex-shrink: 0; padding: var(--s-3) 0; background: var(--surface); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-sub); text-align: right; overflow: hidden; user-select: none; }
.re-editor-line-numbers .line-num { display: block; padding: 0 var(--s-2) 0 0; height: 19.2px; }
.re-editor-textarea { flex: 1; width: 100%; padding: var(--s-3); border: none; background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); resize: none; outline: none; tab-size: 4; white-space: pre; overflow: auto; }
.re-editor-textarea:focus { box-shadow: var(--shadow-input-ring); }
.re-editor-textarea::placeholder { color: var(--text-sub); }
.re-editor-textarea[readonly] { opacity: 0.7; cursor: default; }

.re-diff-body { flex: 1; overflow: auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); min-height: 400px; }
.re-diff-stats-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--surface); font-size: var(--text-sm); color: var(--text-sub); }
.re-diff-stats-bar .additions { color: var(--green); font-weight: var(--weight-semibold); }
.re-diff-stats-bar .deletions { color: var(--red); font-weight: var(--weight-semibold); }
.re-diff-stats-bar .changes { color: var(--amber); font-weight: var(--weight-semibold); }
.re-diff-hunk-header { padding: var(--s-1) var(--s-4); background: var(--surface-w10); color: var(--teal); font-size: var(--text-sm); font-weight: var(--weight-semibold); position: sticky; top: 0; z-index: 1; }
.re-diff-line { display: flex; padding: 0 var(--s-4); min-height: 22px; align-items: center; }
.re-diff-line-num { width: 40px; flex-shrink: 0; text-align: right; padding-right: var(--s-3); color: var(--text-sub); font-size: var(--text-sm); user-select: none; }
.re-diff-line-num-pair { display: flex; flex-shrink: 0; }
.re-diff-line-content { flex: 1; white-space: pre; overflow-x: auto; padding: 0 var(--s-1); }
.re-diff-line.add { background: var(--green-bg); }
.re-diff-line.add .re-diff-line-content { color: var(--green); }
.re-diff-line.remove { background: var(--red-bg); }
.re-diff-line.remove .re-diff-line-content { color: var(--red); }
.re-diff-line.context { color: var(--text-sub); }
.re-diff-legend { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-4); font-size: var(--text-sm); color: var(--text-sub); }
.re-diff-legend-item { display: flex; align-items: center; gap: var(--s-1); }
.re-diff-legend-dot { width: 8px; height: 8px; border-radius: var(--radius-s); }
.re-diff-legend-dot.local { background: var(--red); }
.re-diff-legend-dot.remote { background: var(--green); }

.re-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-6); gap: var(--s-3); color: var(--text-sub); font-size: var(--text-sm); text-align: center; min-height: 300px; }
/* re-empty-icon: 표준 56x56 원형 래퍼 패턴 */
.re-empty-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-w5); }
.re-empty-icon svg { width: 28px; height: 28px; color: var(--text-sub); opacity: 0.7; }
.re-empty-text { max-width: 260px; line-height: var(--leading-normal); }
.re-loading { display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-5); color: var(--text-sub); font-size: var(--text-sm); }
.re-loading::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--line-bold); border-top-color: var(--accent); border-radius: 50%; animation: spin var(--duration-slower) linear infinite; flex-shrink: 0; }
.re-error { padding: var(--s-3) var(--s-4); background: var(--red-bg); border: 1px solid var(--clr-error-bg-lg); border-radius: var(--radius-s); color: var(--red); font-size: var(--text-sm); margin: var(--s-3); }

.re-editor-statusbar { display: flex; align-items: center; justify-content: space-between; padding: var(--s-1) var(--s-4); font-size: var(--text-sm); color: var(--text-sub); background: var(--surface); }
.re-editor-statusbar-left { display: flex; gap: var(--s-4); }
.re-editor-statusbar-right { display: flex; gap: var(--s-4); }
.re-statusbar-item { display: flex; align-items: center; gap: var(--s-1); }

.re-operation-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); background: var(--surface); border: 1px solid var(--line-bold); border-radius: var(--radius-s); font-size: var(--text-sm); color: var(--text-sub); animation: pgFadeUp var(--smooth); }
.re-operation-bar.hidden { display: none; }
.re-operation-bar::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--clr-teal-bg-2xl); border-top-color: var(--accent); border-radius: 50%; animation: spin var(--duration-slower) linear infinite; flex-shrink: 0; }

.re-confirm-overlay { position: fixed; inset: 0; background: var(--backdrop-bg-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; animation: pgFadeUp var(--motion-hover); }
.re-confirm-overlay.hidden { display: none; }
.re-confirm-box { width: 420px; max-width: 90vw; background: var(--bg-raised); border: 1px solid var(--line-bold); border-radius: var(--radius); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.re-confirm-title { font-size: var(--text-reading); font-weight: var(--weight-bold); color: var(--text); }
.re-confirm-msg { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); }
.re-confirm-file { padding: var(--s-2) var(--s-3); background: var(--surface); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); word-break: break-all; }
.re-confirm-warning { padding: var(--s-2) var(--s-3); background: var(--amber-bg); border: 1px solid var(--clr-warning-bg-lg); border-radius: var(--radius-s); font-size: var(--text-sm); color: var(--amber); }
.re-confirm-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }

@media (max-width: 960px) { .re-content { grid-template-columns: 260px 1fr; } }
@media (max-width: 768px) { .re-content { grid-template-columns: 1fr; } .re-topbar { flex-direction: column; align-items: stretch; } .re-actions { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--s-1); } .re-tree-body { max-height: 240px; } .re-editor-body { min-height: 300px; } }
@media (max-width: 640px) { .re-action-btn .re-btn-label { display: none; } .re-editor-tabs { font-size: var(--text-sm); } .re-editor-header { flex-wrap: wrap; } }
@media (max-width: 375px) { .re-editor-line-numbers { width: 36px; } .re-editor-textarea { font-size: var(--text-sm); } }


/* ═══════════════════════════════════════════════════════
   13. PROMPT VERSION MANAGER
   ═══════════════════════════════════════════════════════ */

.pvm-filter-btns { display: flex; gap: var(--s-1); }
.pvm-filter-btn { padding: var(--s-1) var(--s-2); border: 1px solid var(--line); border-radius: var(--radius-pill); background: none; color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; font-family: var(--font); }
.pvm-filter-btn:hover { border-color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); }
.pvm-filter-btn.active { border-color: var(--accent); color: var(--accent); background: var(--surface-active); }

.pvm-team-selector { display: flex; gap: var(--s-2); padding: var(--s-4) var(--s-4) 0; margin-bottom: var(--s-2); padding-bottom: var(--s-3); overflow-x: auto; flex-wrap: nowrap; }
.pvm-team-btn { padding: var(--s-1) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--text-sub); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; flex-shrink: 0; width: max-content; min-width: max-content; }
.pvm-team-btn:hover { background: var(--surface-hover); color: var(--text-sub); border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }
.pvm-team-btn.active { color: var(--accent); background: var(--surface-active); border-color: var(--accent); }
.pvm-team-btn .pvm-team-count { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--text-sub); background: var(--surface); padding: var(--s-1) var(--s-1); border-radius: var(--radius-pill); min-width: 18px; text-align: center; line-height: var(--leading-none);}
.pvm-team-btn.active .pvm-team-count { color: var(--accent); background: var(--surface-active); }

.pvm-agent-selector { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-4); padding: var(--s-4) var(--s-4) 0; }
.pvm-agent-btn { padding: var(--s-1) var(--s-4); border: none; border-radius: var(--radius-pill); background: var(--surface); color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); display: flex; align-items: center; gap: var(--s-1); }
.pvm-agent-btn:hover { background: var(--surface-active); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.pvm-agent-btn.active { color: var(--accent); background: var(--surface-active); }

.pvm-editor-wrap { flex: 1; overflow-y: auto; }
/* (v4: .pvm-split → prompts.css로 이동 완료) */
.pvm-sidebar { border: none; border-radius: var(--radius); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.pvm-sidebar-head { padding: var(--s-3) var(--s-4); display: flex; align-items: center; justify-content: space-between; background: transparent; }
.pvm-sidebar-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-sub); }
.pvm-ver-list { flex: 1; overflow-y: auto; max-height: 480px; }
.pvm-ver-list::-webkit-scrollbar { width: var(--s-1); }
.pvm-ver-list::-webkit-scrollbar-thumb { background: var(--line-bold); border-radius: var(--radius-s); }
.pvm-ver-item { padding: var(--s-3) var(--s-4); cursor: pointer; transition: background var(--motion-hover), transform var(--motion-hover); position: relative; }
.pvm-ver-item:hover { background: var(--surface-hover); transform: translateX(2px); }
.pvm-ver-item.active { background: var(--surface-active); }
.pvm-ver-item.active .pvm-ver-label { color: var(--accent); }
.pvm-ver-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); display: flex; align-items: center; gap: var(--s-1); }
.pvm-ver-meta { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); }
.pvm-ver-desc { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); }
.pvm-star { cursor: pointer; font-size: var(--text-base); opacity: 0.3; transition: opacity var(--motion-hover); position: absolute; right: 12px; top: 10px; }
.pvm-star:hover { opacity: 0.7; transform: translateY(var(--hover-lift-sm)); }
.pvm-star.fav { opacity: 1; color: var(--amber); }
.pvm-live-badge { font-size: var(--text-sm); font-weight: var(--weight-bold); padding: var(--s-1) var(--s-1); border-radius: var(--radius-pill); background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }

.pvm-main { border: none; border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.pvm-main-head { padding: var(--s-3) var(--s-4); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; background: transparent; }
.pvm-section-tag { display: inline-flex; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pvm-section-tag.core { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); }
.pvm-section-tag.variable { background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal); }
.pvm-content { flex: 1; overflow-y: auto; padding: var(--s-4); }
.pvm-content::-webkit-scrollbar { width: var(--s-1); }
.pvm-content::-webkit-scrollbar-thumb { background: var(--line-bold); border-radius: var(--radius-s); }
.pvm-prompt-text { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-sub); white-space: pre-wrap; word-break: break-word; font-family: var(--font); }
.pvm-prompt-text .core-section { background: var(--red-bg); padding: var(--s-3); margin-bottom: var(--s-3); border-radius: var(--radius-s); }
.pvm-prompt-text .variable-section { background: var(--surface-w10); padding: var(--s-3); margin-bottom: var(--s-3); border-radius: var(--radius-s); }
.pvm-actions { display: flex; gap: var(--s-1); margin-left: auto; }
.pvm-btn { padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); font-size: var(--text-sm); font-family: var(--font); cursor: pointer; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); border: none; background: var(--surface); color: var(--text-sub); }
.pvm-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.pvm-btn.primary { background: var(--accent); color: var(--accent-on); }
.pvm-btn.primary:hover { opacity: 0.88; transform: translateY(var(--hover-lift-sm)); }
.pvm-btn.danger { color: var(--red); }
.pvm-btn.danger:hover { background: var(--red-bg); transform: translateY(var(--hover-lift-sm)); }
.pvm-empty { color: var(--text-sub); font-size: var(--text-sm); padding: var(--s-6) 0; text-align: center; }
.pvm-snapshot-btn { padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: none; color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; font-family: var(--font); }
.pvm-snapshot-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(var(--hover-lift-sm)); }

.prompt-cmd-wrap { padding: var(--s-3) var(--s-4); background: transparent; }
.prompt-cmd-row { display: flex; gap: var(--s-2); align-items: flex-end; }
.prompt-cmd-input { flex: 1; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1.5px solid var(--surface); border-radius: var(--radius); color: var(--text); font-size: var(--text-sm); font-family: var(--font); outline: none; resize: none; min-height: 42px; max-height: 120px; }
.prompt-cmd-input:focus { border-color: var(--accent); background: var(--surface-hover); }
.prompt-cmd-input::placeholder { color: var(--text-sub); }
.prompt-cmd-send { padding: var(--s-3) var(--s-5); background: var(--accent); border: none; border-radius: var(--radius); color: white; font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; font-family: var(--font); white-space: nowrap; transition: background var(--motion-hover); }
.prompt-cmd-send:hover { opacity: 0.88; transform: translateY(var(--hover-lift-sm)); }
.prompt-cmd-send:disabled { opacity: 0.5; cursor: not-allowed; }
.prompt-attach-bar { display: flex; gap: var(--s-1); margin-bottom: var(--s-2); align-items: center; flex-wrap: wrap; }
.prompt-attach-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); background: var(--surface); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--text-sub); }
.prompt-attach-chip button { background: none; border: none; color: var(--text-sub); cursor: pointer; font-size: var(--text-sm); padding: 0 var(--s-1); }
.prompt-attach-btn { padding: var(--s-1) var(--s-3); background: none; border: 1px dashed var(--surface-hover); border-radius: var(--radius-pill); color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); }
.prompt-attach-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(var(--hover-lift-sm)); }

.prompt-card-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: transparent; }
.prompt-card-icon { font-size: var(--text-lg); }
.prompt-card-name { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.prompt-card-role { font-size: var(--text-sm); color: var(--text-sub); margin-left: auto; }
.prompt-card-body { padding: var(--s-3) var(--s-4); max-height: 340px; overflow-y: auto; }
.prompt-card-body::-webkit-scrollbar { width: var(--s-1); }
.prompt-card-body::-webkit-scrollbar-thumb { background: var(--line-bold); border-radius: var(--radius-s); }
.prompt-viewer { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-sub); white-space: pre-wrap; word-break: break-word; font-family: var(--font); }
.prompt-override-badge { display: inline-flex; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold); background: var(--amber-bg); color: var(--amber); margin-bottom: var(--s-2); }
.prompt-override-text { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber); border-radius: var(--radius-s); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2); white-space: pre-wrap; word-break: break-word; }
.prompt-loading { color: var(--text-sub); font-size: var(--text-sm); padding: var(--s-4) 0; }
.prompt-expand-btn { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: none; color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); margin-top: var(--s-2); }
.prompt-expand-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(var(--hover-lift-sm)); }

/* (v4 마이그레이션: block-editor/block-card/block-edit/pvm-split/prompt-grid → prompts.css로 이동 완료) */


/* ═══════════════════════════════════════════════════════
   14. COMMAND EXTRAS
   ═══════════════════════════════════════════════════════ */

.cwd-selector { position: relative; margin-left: auto; }
.cwd-selector-btn { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--text-sub); font-size: var(--text-sm); font-family: var(--font-mono); cursor: pointer; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); white-space: nowrap; max-width: 200px; }
.cwd-selector-btn:hover { border-color: var(--accent); color: var(--text); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.cwd-selector-btn.has-folder { border-color: var(--accent); color: var(--accent); background: var(--surface-active); }
.cwd-selector-icon { font-size: var(--text-sm); flex-shrink: 0; }
.cwd-selector-name { overflow: hidden; text-overflow: ellipsis; }
.cwd-selector-chevron { font-size: var(--text-sm); color: var(--text-sub); }

.cwd-dropdown { position: absolute; bottom: calc(100% + var(--s-1)); right: 0; min-width: 280px; max-height: 300px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); overflow: hidden; }
.cwd-dropdown-header { padding: var(--s-1) var(--s-2); font-size: var(--text-sm); color: var(--text-sub); }
.cwd-dropdown-list { max-height: 220px; overflow-y: auto; padding: var(--s-1); }
.cwd-dropdown-item { display: flex; align-items: center; gap: var(--s-1); width: 100%; padding: var(--s-1) var(--s-2); background: transparent; border: none; border-radius: var(--radius-s); color: var(--text); font-size: var(--text-sm); cursor: pointer; text-align: left; transition: background var(--motion-hover), transform var(--motion-hover); }
.cwd-dropdown-item:hover { background: var(--surface-hover); transform: translateX(2px); }
.cwd-dropdown-item.active { background: var(--surface-active); color: var(--accent); }
.cwd-item-check { width: 16px; flex-shrink: 0; color: var(--accent); font-size: var(--text-sm); }
.cwd-item-name { font-weight: var(--weight-medium); white-space: nowrap; }
.cwd-item-path { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; max-width: 160px; }
.cwd-dropdown-item.cwd-path-invalid .cwd-item-path { color: var(--amber); }
.cwd-dropdown-item.cwd-path-invalid .cwd-item-name { opacity: 0.6; }
.cwd-dropdown-add { display: block; width: 100%; padding: var(--s-1) var(--s-2); background: transparent; border: none; color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; text-align: left; transition: background var(--motion-hover), transform var(--motion-hover); }
.cwd-dropdown-add:hover { background: var(--surface-hover); color: var(--accent); transform: translateX(2px); }

.deploy-btn { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--teal); font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); white-space: nowrap; height: 26px; box-shadow: var(--shadow); }
.deploy-btn:hover { background: var(--surface-hover); box-shadow: var(--shadow-lg); border-color: var(--surface-hover); color: var(--teal); transform: translateY(var(--hover-lift-sm)); }
.deploy-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.deploy-btn:disabled { opacity: 0.5; cursor: default; }
.deploy-btn.deploying { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.deploy-btn.success { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.deploy-btn.fail { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.deploy-prod-btn { color: var(--red); border-color: var(--red); }
.deploy-prod-btn:hover { color: var(--red); border-color: var(--red); background: var(--red-bg); transform: translateY(var(--hover-lift-sm)); }
.deploy-status { font-size: var(--text-base); color: var(--text-sub); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.job-filter-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); flex-wrap: wrap; }
.job-search-wrap { display: flex; align-items: center; gap: var(--s-1); flex: 1; min-width: 140px; max-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s-1) var(--s-2); transition: border-color var(--motion-hover); }
.job-search-wrap:focus-within { border-color: var(--accent); }
.job-search-icon { flex-shrink: 0; color: var(--text-sub); }
.job-search-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: var(--text-sm); font-family: var(--font); min-width: 0; }
.job-search-input::placeholder { color: var(--text-sub); }
.job-search-clear { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--surface-active); color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; flex-shrink: 0; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); line-height: var(--leading-none);}
.job-search-clear:hover { background: var(--red-bg); color: var(--red); transform: scale(var(--hover-scale)); }

.job-filter-select { padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--text-sub); font-size: var(--text-sm); font-family: var(--font); cursor: pointer; outline: none; transition: border-color var(--motion-hover), color var(--motion-hover); -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-2) center; padding-right: var(--s-5); }
.job-filter-select:hover { border-color: var(--line-bold); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.job-filter-select:focus { border-color: var(--accent); color: var(--text); }
.job-filter-select option { background: var(--bg-raised); color: var(--text); }

/* node-graph 스타일은 agents.css §Node Graph에서 정의 (중복 제거) */

@media (max-width: 768px) { .job-filter-bar { padding: var(--s-1) var(--s-3); gap: var(--s-1); } .job-search-wrap { max-width: none; } }
@media (max-width: 640px) { .job-filter-bar { flex-direction: column; align-items: stretch; } .job-filter-select { font-size: var(--text-sm); } }

/* ── Work Memory Panel (작업 기억) ─────────────────── */
.wm-panel { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
.wm-section { background: var(--surface); border-radius: var(--radius-s); padding: var(--s-3); }
.wm-section-header { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.wm-section-icon { font-size: var(--text-base); }
.wm-badge { font-size: var(--text-sm); background: var(--surface-w8); color: var(--accent); padding: 1px var(--s-1); border-radius: var(--radius-pill); font-weight: var(--weight-medium); }
.wm-plan-content { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); max-height: 200px; overflow-y: auto; word-break: break-word; }
.wm-empty { font-size: var(--text-sm); color: var(--text-sub); font-style: italic; }
.wm-checklist { display: flex; flex-direction: column; gap: var(--s-1); }
.wm-check-item { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--text-sm); color: var(--text-sub); cursor: pointer; padding: var(--s-1) 0; }
.wm-check-item input[type="checkbox"] { accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.wm-check-done span { text-decoration: line-through; color: var(--text-sub); }
.wm-file-mods { display: flex; flex-direction: column; gap: var(--s-2); max-height: 250px; overflow-y: auto; }
.wm-mod-entry { background: var(--surface); border-radius: var(--radius-s); padding: var(--s-2); }
.wm-mod-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-1); }
.wm-mod-agent { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent); }
.wm-mod-meta { font-size: var(--text-sm); color: var(--text-sub); }
.wm-mod-files { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.wm-mod-file { font-size: var(--text-sm); font-family: var(--font-mono); background: var(--surface); padding: 1px var(--s-1); border-radius: var(--radius-s); color: var(--text-sub); }
.wm-meta { font-size: var(--text-sm); color: var(--text-sub); padding-top: var(--s-2); text-align: right; }
.wm-mod-syntax-badge { font-size: var(--text-sm); padding: var(--s-1) var(--s-1); border-radius: var(--radius-s); font-weight: var(--weight-medium); }
.wm-mod-syntax-badge.passed { background: var(--clr-success-bg-lg); color: var(--green); }
.wm-mod-syntax-badge.failed { background: var(--clr-error-bg-lg); color: var(--red); }
.wm-conflict-warning { background: var(--clr-warning-bg); padding: var(--s-1) var(--s-2); font-size: var(--text-sm); color: var(--clr-warning-light); margin-bottom: var(--s-1); border-radius: var(--radius-s); }

/* ── 구조화 보고서 렌더링 (GAP 1) ─────────────────── */
.sd-report { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.sd-report-section { background: var(--surface); border-radius: var(--radius-s); padding: var(--s-3); }
.sd-report-section-title { display: flex; align-items: center; gap: var(--s-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent); margin-bottom: var(--s-2); letter-spacing: var(--tracking-normal); }
.sd-report-section-icon { font-size: var(--text-base); flex-shrink: 0; }
.sd-report-section-body { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); word-break: break-word; }
.sd-report-section-body p { margin: 0 0 var(--s-1) 0; }
.sd-report-section-body ul, .sd-report-section-body ol { margin: 0 0 var(--s-1) 0; padding-left: var(--s-4); }
.sd-report-score { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.sd-report-score.score-high { background: var(--clr-success-bg-md); color: var(--green); }
.sd-report-score.score-mid { background: var(--clr-warning-bg-md); color: var(--clr-warning-light); }
.sd-report-score.score-low { background: var(--clr-error-bg-md); color: var(--red); }

/* ── 품질 검사 게이트 (GAP 2) ─────────────────── */
.sd-quality-gate { padding-top: var(--s-3); margin-top: var(--s-3); }
.sd-quality-gate-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-sub); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--s-2); }
.sd-qg-item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; }
.sd-qg-status { font-size: var(--text-sm); font-weight: var(--weight-semibold); min-width: 36px; text-align: center; padding: 1px var(--s-1); border-radius: var(--radius-s); }
.sd-qg-status.pass { background: var(--clr-success-bg-md); color: var(--green); }
.sd-qg-status.fail { background: var(--clr-error-bg-md); color: var(--red); }
.sd-qg-agent { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.sd-qg-detail { font-size: var(--text-sm); color: var(--text-sub); }

/* ── 파일 변경 타임라인 (GAP 3) ─────────────────── */
.wm-timeline { position: relative; padding-left: var(--s-4); }
.wm-timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.wm-tl-entry { position: relative; padding: var(--s-1) 0; }
.wm-tl-dot { width: 14px; height: 14px; border-radius: 50%; position: absolute; left: -23px; top: 8px; border: 2px solid var(--bg-base, var(--bg)); }
.wm-tl-dot.create { background: var(--green); }
.wm-tl-dot.modify { background: var(--accent); }
.wm-tl-dot.delete { background: var(--red); }
.wm-tl-content { font-size: var(--text-sm); color: var(--text-sub); }
.wm-tl-file { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
.wm-tl-meta { font-size: var(--text-sm); color: var(--text-sub); }

@media (max-width: 768px) {
    .sd-report-section { padding: var(--s-2); }
    .sd-report-section-title { font-size: var(--text-sm); }
}
@media (max-width: 640px) {
    .sd-report-section-title { font-size: var(--text-sm); }
    .sd-qg-detail { display: none; }
}

/* ── Skill Rules (스킬 규칙 관리) ─────────────────── */
.sk-rule-card { background: var(--surface); border-radius: var(--radius-s); padding: var(--s-3); }
.sk-rule-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.sk-rule-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.sk-rule-actions { display: flex; gap: var(--s-1); }
.sk-rule-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--surface-hover); border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--text-sub); cursor: pointer; font-size: var(--text-sm); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); }
.sk-rule-btn:hover { background: var(--surface-active); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.sk-rule-btn-del:hover { background: var(--red-bg); color: var(--red); border-color: var(--clr-error-border); transform: translateY(var(--hover-lift-sm)); }
.sk-rule-body { display: flex; flex-direction: column; gap: var(--s-1); }
.sk-rule-row { display: flex; gap: var(--s-2); font-size: var(--text-sm); align-items: baseline; }
.sk-rule-label { color: var(--text-sub); min-width: 80px; flex-shrink: 0; }
.sk-rule-val { color: var(--text-sub); word-break: break-word; }

/* 셀프 체크 리마인더 타임라인 */
.wm-sc-timeline { display: flex; flex-direction: column; gap: var(--s-2); }
.wm-sc-entry { background: var(--surface); border-radius: var(--radius-s); padding: var(--s-2); }
.wm-sc-header { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1); }
.wm-sc-cat { font-size: var(--text-sm); }
.wm-sc-agent { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent); }
.wm-sc-time { font-size: var(--text-sm); color: var(--text-sub); margin-left: auto; }
.wm-sc-items { margin: 0; padding-left: var(--s-4); list-style: disc; display: flex; flex-direction: column; gap: var(--s-1); }
.wm-sc-item { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); }
.wm-sc-content { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); }

/* 작업 기억 파일 (jobMemory) */
.wm-jm-file { border-radius: var(--radius-s); overflow: hidden; }
.wm-jm-file + .wm-jm-file { margin-top: var(--s-2); }
.wm-jm-file-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-sub); cursor: pointer; background: var(--surface); transition: background var(--motion-hover); }
.wm-jm-file-header:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.wm-jm-toggle { font-size: var(--text-sm); color: var(--text-sub); transition: transform var(--smooth); }
.wm-jm-file.open .wm-jm-toggle { transform: rotate(90deg); }
.wm-jm-file-body { max-height: 0; overflow: hidden; transition: max-height var(--smooth); }
.wm-jm-file.open .wm-jm-file-body { max-height: 300px; overflow-y: auto; }
.wm-jm-pre { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-normal); white-space: pre-wrap; word-break: break-word; padding: var(--s-2); margin: 0; background: var(--bg-primary, var(--bg)); }

/* ══════════════════════════════════════════════════════════
   Sidebar Queue Panel — 우측 사이드바 대기열 D&D 관리
   ══════════════════════════════════════════════════════════ */
.sidebar-queue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--s-4);
    height: var(--s-4);
    padding: 0 var(--s-1);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-w8);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
}
.sq-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
}
.sq-title {
    font-size: var(--text-sm, 13px);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.sq-hint {
    font-size: var(--text-sm, 10px);
    color: var(--text-sub);
}
.sq-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    overflow-y: auto;
    flex: 1;
}
.sq-empty {
    text-align: center;
    padding: var(--s-4);
    color: var(--text-sub);
    font-size: var(--text-sm, 12px);
}
.sq-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    border-radius: var(--radius, 8px);
    background: var(--surface);
    border: 1px solid transparent;
    cursor: grab;
    transition: background var(--ease), border-color var(--ease);
}
.sq-item:hover {
    background: var(--surface-hover);
    border-color: var(--line);
    transform: translateY(var(--hover-lift-sm));
}
.sq-item:active { cursor: grabbing; }
.sq-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-4);
    flex-shrink: 0;
    color: var(--text-sub);
    opacity: 0.4;
    cursor: grab;
    transition: opacity var(--motion-hover);
}
.sq-item:hover .sq-drag-handle { opacity: 0.8; transform: translateY(var(--hover-lift-sm)); }
.sq-position {
    font-size: var(--text-sm, 12px);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    min-width: var(--s-5-0);
    flex-shrink: 0;
}
.sq-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.sq-title-text {
    font-size: var(--text-sm, 12px);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sq-title-text:hover { color: var(--accent); transform: translateY(var(--hover-lift-sm)); }
.sq-meta {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.sq-scale {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius, 4px);
    background: var(--surface-hover);
    color: var(--text-sub);
}
.sq-cancel-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 0 var(--s-1);
    line-height: var(--leading-none);
    opacity: 0;
    transition: opacity var(--motion-hover),
                color var(--motion-hover);
}
.sq-item:hover .sq-cancel-btn { opacity: 1; transform: translateY(var(--hover-lift-sm)); }
.sq-cancel-btn:hover { color: var(--clr-error); transform: translateY(var(--hover-lift-sm)); }
/* D&D 상태 */
.sq-dragging {
    /* opacity → drag-source-dim 클래스가 제어 (dndApplyGhostLift) */
    box-shadow: var(--shadow-outline-ring) !important;
}
.sq-drag-over-top {
    background: linear-gradient(180deg, var(--surface-active) 0%, transparent 60%) !important;
}
.sq-drag-over-bottom {
    background: linear-gradient(0deg, var(--surface-active) 0%, transparent 60%) !important;
}

/* ══════════════════════════════════════════════════════════
   ACL (Access Control) — 인라인 스타일 → CSS 클래스 분리
   ══════════════════════════════════════════════════════════ */
.acl-card {
    background: transparent;
    border-radius: var(--radius);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.acl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.acl-card-header-info {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.acl-card-header-actions {
    display: flex;
    gap: var(--s-1);
}
.acl-user-email {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
/* 역할 배지 — 공통 */
.acl-badge {
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
}
.acl-badge--owner {
    background: var(--accent);
    color: var(--accent-on);
    font-weight: var(--weight-semibold);
}
.acl-badge--viewer {
    background: var(--bg-raised);
    color: var(--text-sub);
}
.acl-badge--commander {
    background: var(--clr-indigo-bg-lg);
    color: var(--clr-indigo-light);
}
/* 섹션 그리드 (팀 접근 / 에이전트 권한 / CWD 접근) */
.acl-section-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
}
.acl-section-col {
    flex: 1;
    min-width: var(--s-20);
}
.acl-section-col--wide {
    min-width: clamp(120px, 18vw, 180px);
}
.acl-section-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
    font-weight: var(--weight-semibold);
}
.acl-section-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
/* 체크박스 라벨 */
.acl-check-label {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.acl-check-label input[type="checkbox"] {
    accent-color: var(--accent);
}
/* 셀렉트 드롭다운 */
.acl-select {
    background-color: var(--bg-raised);
    color: var(--text);
    border: none;
    border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-1);
    font-size: var(--text-sm);
}
/* 권한 행 */
.acl-perm-row {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
}
.acl-perm-team-label {
    color: var(--text-sub);
    min-width: var(--s-9-5);
}
/* CWD 힌트 */
.acl-cwd-hint {
    font-size: var(--text-sm);
    color: var(--accent);
    margin-bottom: var(--s-1);
}
/* 삭제 버튼 */
.acl-delete-btn {
    background: none;
    color: var(--clr-error-light);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
}
/* 보조 텍스트 */
.acl-sub-label {
    color: var(--text-sub);
    font-size: var(--text-sm);
}
.acl-hint-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
/* ACL 상태 메시지 (로딩/에러) */
.acl-status-msg { padding: var(--s-4); }
.acl-status-msg--error { color: var(--clr-error-light); }
/* Tool Registry 아이템 */
.tool-item { background: var(--surface-w5); border-radius: var(--radius-s); padding: var(--s-3); }
.tool-name { color: var(--text); font-weight: var(--weight-semibold); }
.tool-type-badge { color: var(--text-sub); font-size: var(--text-sm); background: var(--surface-w5); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); }
.tool-provider { color: var(--text-sub); font-size: var(--text-sm); }
.tool-desc { color: var(--text-sub); font-size: var(--text-sm); margin-top: var(--s-1); }
.tool-cmd { color: var(--text-sub); font-size: var(--text-sm); margin-top: var(--s-1); font-family: var(--font-mono); }

/* ── 계정 전환 팝업 (tpl-switch) ── */
/* overlay + card → 범용 .overlay-center / .popup-card 사용 (components.css) */
.tpl-switch-card-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-4);
}
.tpl-switch-btn {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-sm);
    transition: background-color var(--anim-fast, 120ms) var(--ease-out, ease),
                border-color var(--anim-fast, 120ms) var(--ease-out, ease),
                color var(--anim-fast, 120ms) var(--ease-out, ease);
}
.tpl-switch-btn.active {
    border-color: var(--accent);
    background: var(--surface-active);
}
.tpl-switch-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-sub);
}
.tpl-switch-btn.active .tpl-switch-dot {
    background: var(--accent);
}
.tpl-switch-info {
    flex: 1;
    min-width: 0;
}
.tpl-switch-label {
    font-weight: var(--weight-medium);
}
.tpl-switch-email {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}
.tpl-switch-badge {
    font-size: var(--text-sm);
    color: var(--accent);
    flex-shrink: 0;
}

/* ── 의도 전달 상세 패널 ── */
#intent-detail-panel {
    padding: var(--s-3);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    margin: var(--s-2) 0;
}

/* ── Critic Loop 요약 인디케이터 ── */
.critic-summary-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: var(--s-2);
}

/* auth-setup 위저드 스타일은 components.css에 통합됨 */

/* ── @container evopanel — 진화 점수 패널 반응형 ── */
@container evopanel (max-width: 480px) {
    #evo-summary { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: var(--s-1) !important; }
    #evo-agent-filters { gap: var(--s-1) !important; }
}
@container evopanel (max-width: 360px) {
    #evo-summary { grid-template-columns: 1fr !important; }
    #evo-agent-filters { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════
   Pill 탭 바 변형 — jobs-filter-bar 전용
   ═══════════════════════════════════════════════════════ */
.cmd-sub-toggle--pill {
    gap: var(--s-1);
    padding: var(--s-1);
    background: var(--bg-raised);
    border-radius: var(--radius-pill);
    margin: var(--s-1) var(--s-3);
}




/* 더보기 드롭다운 */
.cmd-sub-more { position: relative; }
.cmd-sub-more-trigger { min-width: var(--s-6); justify-content: center; }
.cmd-sub-more-dropdown {
    position: absolute; top: calc(100% + var(--s-1)); right: 0; z-index: 50;
    background: var(--bg-raised); border-radius: var(--radius-s);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 120px; padding: var(--s-1) 0;
}
.cmd-sub-more-item {
    display: block; width: 100%; padding: var(--s-2) var(--s-3);
    background: none; border: none; color: var(--text-sub); cursor: pointer;
    font: inherit; font-size: var(--text-sm); text-align: left;
    transition: background var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth);
}
.cmd-sub-more-item:hover { background: var(--surface-hover, rgba(255,255,255,0.04)); color: var(--text); }
.cmd-sub-more-item.active { color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   프로젝트 트래킹 (Project Tracking) — Jobs > 프로젝트 탭
   ═══════════════════════════════════════════════════════ */

/* 패널 컨테이너 */
.pt-panel {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-3);
}

/* 요약 통계 바 — 카드(--bg-raised)보다 밝은 surface-2로 시각적 계층 분리 */
.pt-summary {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    padding-bottom: var(--s-3);
}
.pt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--s-2) var(--s-3);
    background: var(--surface-2);
    border-radius: var(--radius-s);
    min-width: var(--s-12);
    flex: 1;
}
.pt-stat-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: 1.2;
}
.pt-stat-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-0-5);
}

/* 프로젝트 카드 목록 */
.pt-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

/* 프로젝트 카드 */
.pt-card {
    background: transparent;
    border-radius: var(--radius-s);
    padding: var(--s-3) var(--s-4);
    transition: background var(--duration-fast) var(--easing-smooth);
    cursor: pointer;
}
.pt-card:hover {
    background: var(--surface-hover);
}
.pt-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--surface-hover);
}

/* 카드 헤더: 제목 + 상태 배지 */
.pt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.pt-card-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.pt-card-badges {
    display: flex;
    gap: var(--s-1);
    align-items: center;
    flex-shrink: 0;
}
.pt-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-1-5);
    border-radius: var(--radius-s);
    line-height: 1.3;
    white-space: nowrap;
}
.pt-badge-active { background: var(--clr-success-bg); color: var(--clr-success-light); }
.pt-badge-completed { background: var(--clr-info-bg, rgba(56,189,248,0.1)); color: var(--clr-info-light, #38bdf8); }
.pt-badge-archived { background: var(--surface); color: var(--text-sub); }
.pt-badge-priority-high { background: var(--clr-error-bg); color: var(--clr-error-light); }
.pt-badge-no-plan { background: var(--surface); color: var(--text-faint, var(--text-sub)); font-style: italic; }
.pt-card--no-plan { opacity: 0.7; }
.pt-card--no-plan .pt-progress-fill { background: var(--text-faint, var(--text-sub)); }

/* 설명 */
.pt-card-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.5;
    margin-bottom: var(--s-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 프로그레스 바 */
.pt-progress {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.pt-progress-bar {
    flex: 1;
    height: var(--s-1);
    background: var(--surface);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.pt-progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width var(--duration-moderate) var(--easing-smooth);
}
.pt-progress-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    min-width: var(--s-7);
    text-align: right;
}

/* 메타 행: Job 수, 산출물 수, 마지막 활동 */
.pt-card-meta {
    display: flex;
    gap: var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-sub);
    flex-wrap: wrap;
}
.pt-meta-item {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.pt-meta-item svg {
    width: var(--s-3);
    height: var(--s-3);
    flex-shrink: 0;
    opacity: 0.6;
}

/* 카드 활성 Phase 라벨 */
.pt-card-active-phase {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--accent);
    margin-top: var(--s-1);
}
.pt-card-active-phase-name {
    font-weight: var(--weight-medium);
}
.pt-card-active-phase-pct {
    color: var(--text-faint);
    font-size: var(--text-sm);
}

/* 카드 최근 에이전트 배지 */
.pt-card-agents {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
    margin-top: var(--s-1);
}
.pt-card-agent-badge {
    font-size: var(--text-sm);
    padding: 1px var(--s-1-5);
    border-radius: var(--radius-pill);
    background: var(--bg-raised);
    color: var(--text-sub);
}

/* 체크리스트 품질 분류 바 (상세 헤더) */
.pt-cl-quality {
    display: flex;
    gap: var(--s-2);
    font-size: var(--text-sm);
    margin-top: var(--s-1);
    flex-wrap: wrap;
}
.pt-cl-q-item {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.pt-cl-q--verified { color: var(--green); }
.pt-cl-q--unverified { color: var(--amber); }
.pt-cl-q--damaged { color: var(--red); }
.pt-cl-q--pending { color: var(--text-faint); }

/* 카드 확장 — 최근 Job 목록 */
.pt-card-jobs {
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.pt-job-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-smooth);
}
.pt-job-row:hover,
.pt-job-row:focus-visible {
    background: var(--surface-hover);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.pt-job-status-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.pt-job-title {
    flex: 1;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.pt-job-meta {
    color: var(--text-sub);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* 태그 */
.pt-tags {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
    margin-bottom: var(--s-2);
}
.pt-tag {
    font-size: var(--text-sm);
    padding: 1px var(--s-1);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text-sub);
}

/* 툴바 — 검색 + 정렬 */
.pt-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-2);
}
.pt-search-wrap { flex: 1; min-width: 0; }

/* 정렬 바 */
.pt-sort-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-shrink: 0;
}
.pt-sort-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.pt-sort-select {
    font-size: var(--text-sm);
    padding: var(--s-0-5) var(--s-2);
    background-color: var(--surface);
    color: var(--text);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
}

/* 새로고침 버튼 */
.pt-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-5);
    height: var(--s-5-5);
    flex-shrink: 0;
    background: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-sub);
    cursor: pointer;
    transition: color var(--duration-fast), background var(--duration-fast);
}
.pt-refresh-btn:hover { color: var(--accent); background: var(--surface-hover, var(--surface)); }
.pt-refresh-btn:active svg { transform: rotate(180deg); transition: transform var(--duration-moderate); }

/* 메타 상태 색상 */
.pt-meta-running { color: var(--accent); }
.pt-meta-running svg { opacity: 1; }
.pt-meta-error { color: var(--clr-error-light, #ef4444); }
.pt-meta-error svg { opacity: 1; }
.pt-meta-completed { color: var(--clr-info-light, #38bdf8); }
.pt-meta-completed svg { opacity: 1; }
.pt-meta-action { color: var(--text-faint); font-style: italic; }

/* 더 보기 버튼 */
.pt-load-more {
    display: block;
    width: 100%;
    padding: var(--s-2);
    background: var(--surface);
    color: var(--text-sub);
    border: none;
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth);
}
.pt-load-more:hover {
    background: var(--surface-hover);
    color: var(--text);
}
.pt-load-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Job 확장 (details/summary) */
.pt-card-jobs { cursor: default; }
.pt-jobs-toggle {
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
    padding: var(--s-1) 0;
    list-style: none;
    user-select: none;
}
.pt-jobs-toggle::-webkit-details-marker { display: none; }
.pt-jobs-toggle::before {
    content: '▸ ';
    display: inline;
}
details[open] > .pt-jobs-toggle::before { content: '▾ '; }
.pt-jobs-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-top: var(--s-1);
}

/* 스켈레톤 상태 — 기존 .skeleton shimmer 애니메이션 재사용 */
.pt-card.pt-skeleton {
    pointer-events: none;
}
.pt-card.pt-skeleton .skeleton {
    /* animations.css의 .skeleton 클래스가 shimmer 제공 — 별도 정의 불필요 */
    border-radius: var(--radius-s);
}

/* 에러 상태 — 다시 시도 버튼 */
.pt-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin-top: var(--s-2);
    padding: var(--s-1) var(--s-3);
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-family: var(--font);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--duration-fast);
}
.pt-retry-btn:hover { background: var(--accent-deep); }
.pt-retry-btn:active { transform: scale(0.97); }
.pt-retry-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.pt-retry-btn svg { flex-shrink: 0; }

/* ── 프로젝트 상세 보기 ───────────────── */
.pt-detail {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.pt-detail-back {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--s-1) 0;
    transition: color var(--duration-fast);
    user-select: none;
}
.pt-detail-back:hover { color: var(--text); }
.pt-detail-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-detail-back svg { flex-shrink: 0; }
.pt-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}
.pt-detail-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: 1.4;
    cursor: text;
    border-radius: var(--radius-s);
    transition: background var(--duration-fast);
}
.pt-detail-title:hover {
    background: var(--surface);
    padding: var(--s-1) var(--s-2);
    margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-2));
}
.pt-detail-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.6;
    cursor: text;
    border-radius: var(--radius-s);
    transition: background var(--duration-fast);
}
.pt-detail-desc:hover {
    background: var(--surface);
    padding: var(--s-1) var(--s-2);
    margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-2));
}
.pt-detail-desc--empty {
    color: var(--text-faint);
    font-style: italic;
}
/* 프로젝트 인라인 편집 폼 */
.pt-title-edit,
.pt-desc-edit {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.pt-title-edit-input {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
    background: var(--surface);
    border: none;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    line-height: 1.4;
    width: 100%;
    font-family: var(--font);
    outline: none;
}
.pt-title-edit-input:focus {
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.pt-desc-edit-input {
    font-size: var(--text-sm);
    color: var(--text);
    background: var(--surface);
    border: none;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    line-height: 1.6;
    width: 100%;
    resize: vertical;
    min-height: var(--s-9-5);
    font-family: var(--font);
    outline: none;
}
.pt-desc-edit-input:focus {
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.pt-title-edit-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
}
.pt-detail-stats {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.pt-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
}

/* ── 로드맵 오버뷰 바 (Phase/AC/체크리스트 진행률) ── */
.pt-roadmap-overview {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-3) 0;
}
.pt-roadmap-track {
    display: flex; align-items: center; gap: var(--s-2);
}
.pt-roadmap-track-label {
    font-size: var(--text-sm); color: var(--text-sub); min-width: 56px; flex-shrink: 0;
}
.pt-roadmap-track-bar {
    flex: 1; height: 6px; background: var(--surface-w8);
    border-radius: var(--radius-pill); overflow: hidden;
    display: flex;
}
.pt-roadmap-fill { height: 100%; transition: width var(--duration-moderate) var(--easing-smooth); }
.pt-roadmap-fill--done { background: var(--accent); }
.pt-roadmap-fill--active { background: var(--clr-warning-bright, #f59e0b); }
.pt-roadmap-fill--blocked { background: var(--clr-error-light, #ef4444); }
.pt-roadmap-fill--ac { background: var(--clr-warning-bright, #f59e0b); }
.pt-roadmap-fill--cl { background: var(--accent); }
.pt-roadmap-track-pct {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text);
    min-width: var(--s-6); text-align: right; flex-shrink: 0;
}

.pt-detail-section {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.pt-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pt-goals-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.pt-goals-list li {
    font-size: var(--text-sm);
    color: var(--text);
    padding-left: var(--s-3);
    position: relative;
}
.pt-goals-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent);
}
/* ── 마일스톤 CRUD UI ── */
/* .pt-ms-list → L4435에서 정의됨 (gap: --sp-sm). 중복 제거 */
.pt-ms-item {
    background: var(--surface);
    border-radius: var(--radius-s);
    overflow: hidden;
    transition: background var(--duration-fast) var(--easing-smooth);
}
.pt-ms-item:hover { background: var(--surface-hover); }
.pt-ms-view-wrap {
    padding: var(--s-3) var(--s-4);
    cursor: pointer;
    display: flex; flex-direction: column; gap: var(--s-1);
}
.pt-ms-header {
    display: flex; align-items: center; gap: var(--s-2); min-height: 28px;
}
.pt-ms-order {
    width: var(--s-5-0); height: var(--s-5-0);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-sub);
    background: var(--surface-w8); border-radius: 50%; flex-shrink: 0;
}
.pt-ms-title {
    flex: 1; min-width: 0;
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* .pt-ms-status-pill, .pt-ms-actions, .pt-ms-action-btn, .pt-ms-desc, .pt-ms-progress → 하단 블록(L4480+)에 통합 정의됨 */
/* 마일스톤 Phase 상세 확장 */
.pt-ms-detail { padding: 0 var(--s-4) var(--s-3); }
.pt-ms-detail.hidden { display: none; }
.pt-ms-detail-loading { padding: var(--s-2) 0; }
.pt-ms-detail-summary {
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: var(--text-sub); margin-bottom: var(--s-2);
}
.pt-ms-detail-empty {
    font-size: var(--text-sm); color: var(--text-sub); padding: var(--s-2) 0;
}
/* 마일스톤 Goal 섹션 */
.pt-ms-goals-section { margin-bottom: var(--s-3); }
.pt-ms-goals-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--s-1);
}
.pt-ms-goals-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px;
}
.pt-ms-goals-items { display: flex; flex-direction: column; gap: var(--s-1); }
.pt-ms-goal-item {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    cursor: pointer; transition: background var(--duration-fast) var(--easing-smooth);
}
.pt-ms-goal-item:hover { background: var(--surface-w8); }
.pt-ms-goal-text {
    flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-ms-goal-text--met { text-decoration: line-through; color: var(--text-sub); }
.pt-ms-goal-del {
    width: var(--s-5-0); height: var(--s-5-0); display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--radius-s);
    color: var(--text-faint); cursor: pointer; opacity: 0;
    transition: opacity var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth);
}
.pt-ms-goal-item:hover .pt-ms-goal-del { opacity: 1; }
.pt-ms-goal-del:hover { color: var(--clr-error-light, #ef4444); }
.pt-ms-goal-add {
    display: flex; align-items: center; gap: var(--s-1);
    margin-top: var(--s-1);
}
.pt-ms-goal-add-input {
    flex: 1; background: var(--bg-raised, var(--bg-raised));
    color: var(--text); border: none;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s); font-size: var(--text-sm);
    font-family: var(--font);
}
.pt-ms-goal-add-input::placeholder { color: var(--text-faint); }
.pt-ms-goal-add-input:focus { outline: 1px solid var(--accent); }
/* 마일스톤 Phase 연결 섹션 */
.pt-ms-phases-section { margin-top: var(--s-2); }
.pt-ms-phases-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--s-1);
}
.pt-ms-phases-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px;
}
.pt-ms-phase-link-btn {
    display: flex; align-items: center; gap: var(--s-1);
    background: none; border: none; color: var(--accent);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    cursor: pointer; padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s); font-family: var(--font);
    transition: background var(--duration-fast) var(--easing-smooth);
}
.pt-ms-phase-link-btn:hover { background: var(--surface-w8); }
.pt-ms-linked-phases { display: flex; flex-direction: column; gap: var(--s-1); }
.pt-ms-linked-phase {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    background: var(--surface);
    transition: background var(--duration-fast) var(--easing-smooth);
}
.pt-ms-linked-phase:hover { background: var(--surface-hover); }
.pt-lp-done { opacity: 0.7; }
.pt-lp-active .pt-ms-lp-title { color: var(--clr-success, #22c55e); }
.pt-ms-lp-title {
    flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-ms-lp-meta {
    font-size: var(--text-sm); color: var(--text-sub); white-space: nowrap;
}
.pt-ms-lp-unlink {
    width: var(--s-5-0); height: var(--s-5-0); display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--radius-s);
    color: var(--text-faint); cursor: pointer; opacity: 0;
    transition: opacity var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth);
}
.pt-ms-linked-phase:hover .pt-ms-lp-unlink { opacity: 1; }
.pt-ms-lp-unlink:hover { color: var(--clr-error-light, #ef4444); }
/* Phase 연결 선택기 */
.pt-ms-phase-picker { margin-bottom: var(--s-2); }
.pt-ms-phase-picker.hidden { display: none; }
.pt-ms-phase-picker-list { display: flex; flex-direction: column; gap: var(--s-1); }
.pt-ms-phase-pick-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-1) var(--s-2);
    background: var(--surface); border: none; border-radius: var(--radius-s);
    color: var(--text); cursor: pointer; font-family: var(--font);
    transition: background var(--duration-fast) var(--easing-smooth);
}
.pt-ms-phase-pick-item:hover { background: var(--surface-hover); }
.pt-ms-pick-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.pt-ms-pick-status { font-size: var(--text-sm); color: var(--text-sub); }
/* 인라인 편집 폼 */
.pt-ms-edit-wrap {
    padding: var(--s-3) var(--s-4);
    display: flex; flex-direction: column; gap: var(--s-2);
}
.pt-ms-edit-wrap.hidden { display: none; }
.pt-ms-edit-title, .pt-ms-edit-desc {
    background: var(--bg-raised, var(--bg-raised));
    color: var(--text); border: none;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); font-family: var(--font); outline: none;
}
.pt-ms-edit-title:focus, .pt-ms-edit-desc:focus {
    box-shadow: 0 0 0 2px var(--accent-dim);
}
/* 마일스톤 추가 영역 */
.pt-ms-add-area { margin-top: var(--s-2); }
.pt-ms-add-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    background: none; border: none;
    color: var(--text-sub); font-size: var(--text-sm); font-weight: var(--weight-medium);
    cursor: pointer; padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s); font-family: var(--font);
    transition: background var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth);
}
.pt-ms-add-btn:hover { background: var(--surface); color: var(--text); }
.pt-ms-form {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-3) 0;
}
.pt-ms-form.hidden { display: none; }
.pt-ms-title-input, .pt-ms-desc-input {
    background: var(--bg-raised, var(--bg-raised));
    color: var(--text); border: none;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); font-family: var(--font); outline: none;
}
.pt-ms-title-input:focus, .pt-ms-desc-input:focus {
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.pt-ms-form-actions { display: flex; gap: var(--s-2); }
.pt-ms-form-btn {
    padding: var(--s-2) var(--s-4);
    border: none; border-radius: var(--radius-s);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
    font-family: var(--font); transition: opacity var(--duration-fast) var(--easing-smooth);
}
.pt-ms-form-btn:hover { opacity: 0.85; }
.pt-ms-form-btn--save { background: var(--accent); color: var(--bg); }
.pt-ms-form-btn--cancel { background: var(--surface-w8); color: var(--text-sub); }
/* 섹션 구분선 */
.pt-section-divider {
    height: 1px; background: var(--surface-w5); margin: var(--s-3) 0;
}
/* 산출물 그룹 모드 토글 */
.ov-group-toggle {
    display: flex; gap: var(--s-1); padding: var(--s-1);
    background: var(--surface); border-radius: var(--radius-pill);
    margin-bottom: var(--s-2); width: fit-content;
}
.ov-group-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border: none; background: none; border-radius: var(--radius-pill);
    font-size: var(--text-sm); color: var(--text-sub); cursor: pointer;
    font-family: var(--font); white-space: nowrap;
    transition: background var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth);
}
.ov-group-btn:hover { background: var(--surface-hover); color: var(--text); }
.ov-group-btn.active {
    background: var(--bg-raised); color: var(--text); font-weight: var(--weight-semibold);
    box-shadow: var(--shadow);
}

/* ── 산출물 프로젝트별 그룹핑 ── */
.ov-project-list { display: flex; flex-direction: column; gap: var(--s-3); }
.ov-project-section {
    background: var(--surface);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.ov-project-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-2) var(--s-3);
    background: var(--surface-w5);
    transition: background var(--duration-fast) var(--easing-smooth);
}
.ov-project-header[role="button"] { cursor: pointer; }
.ov-project-header[role="button"]:hover { background: var(--surface-hover); }
.ov-project-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.ov-project-count { font-size: var(--text-sm); color: var(--text-sub); white-space: nowrap; }
.ov-project-files { padding: var(--s-1) var(--s-3) var(--s-3); }
.ov-project-job-group { margin-top: var(--s-2); }
.ov-project-job-group:first-child { margin-top: 0; }
.ov-project-job-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub);
    padding-bottom: var(--s-1); margin-bottom: var(--s-1);
    display: flex; align-items: center; gap: var(--s-1);
}
.ov-project-job-time { font-weight: var(--weight-normal); color: var(--text-faint); }

/* ── Phase별 산출물 분류 (프로젝트 상세) ── */
.pt-output-phase-group { margin-bottom: var(--s-2); }
.pt-output-phase-group[open] { margin-bottom: var(--s-3); }
.pt-output-phase-title {
    display: flex; align-items: center; gap: var(--s-1);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub);
    padding: var(--s-1) var(--s-1);
    cursor: pointer; list-style: none;
    transition: color var(--duration-fast) var(--easing-smooth);
}
.pt-output-phase-title::-webkit-details-marker { display: none; }
.pt-output-phase-title::before {
    content: ''; display: inline-block;
    width: 0; height: 0;
    border-left: var(--s-1) solid currentColor;
    border-top: var(--s-1) solid transparent;
    border-bottom: var(--s-1) solid transparent;
    transition: transform var(--duration-fast) var(--easing-smooth);
    flex-shrink: 0;
}
.pt-output-phase-group[open] > .pt-output-phase-title::before {
    transform: rotate(90deg);
}
.pt-output-phase-title:hover { color: var(--text); }
.pt-output-phase-title svg { color: var(--text-faint); flex-shrink: 0; }
.pt-output-phase-count { font-weight: var(--weight-normal); color: var(--text-faint); }
.pt-output-job {
    font-size: var(--text-sm); color: var(--text-sub);
    background: var(--surface-w5);
    padding: 1px var(--s-1);
    border-radius: var(--radius-s);
    white-space: nowrap; max-width: var(--s-20);
    overflow: hidden; text-overflow: ellipsis;
}
/* 상세 Job 목록 */
.pt-detail-jobs {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.pt-job-error {
    font-size: var(--text-sm);
    color: var(--clr-error-light, #ef4444);
    padding-left: var(--s-5);
    margin-top: calc(-1 * var(--s-1));
}
.pt-job-status-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: var(--s-1);
}
/* 활동 타임라인 */
.pt-activity-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-1) 0;
}
.pt-act-date-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    padding: var(--s-1) 0 var(--s-1);
    letter-spacing: 0.5px;
}
.pt-act-date-label:first-child { padding-top: 0; }
.pt-act-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    background: var(--surface);
}
.pt-act-icon {
    flex-shrink: 0;
    width: var(--s-5);
    height: var(--s-5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-raised);
    color: var(--text-sub);
}
.pt-act--success .pt-act-icon { color: var(--clr-success, #22c55e); background: rgba(34, 197, 94, 0.1); }
.pt-act--info .pt-act-icon { color: var(--accent); background: var(--accent-bg, rgba(45, 212, 191, 0.08)); }
.pt-act--warn .pt-act-icon { color: var(--clr-warning, #f59e0b); background: rgba(245, 158, 11, 0.1); }
.pt-act-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.pt-act-summary {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.4;
}
.pt-act-detail {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.3;
}
.pt-act-time {
    font-size: var(--text-sm);
    color: var(--text-faint);
}
.pt-act-actor {
    font-size: var(--text-sm);
    color: var(--accent);
    font-weight: var(--weight-medium);
    margin-right: var(--s-1);
}
.pt-act-load-more {
    display: block;
    width: 100%;
    padding: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    text-align: center;
    margin-top: var(--s-1);
}
.pt-act-load-more:hover { color: var(--text); background: var(--surface-hover); }
/* 산출물 목록 */
.pt-detail-outputs {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.pt-output-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text);
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
}
.pt-output-row svg { color: var(--text-sub); flex-shrink: 0; }
.pt-output-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-output-agent {
    font-size: var(--text-sm);
    color: var(--accent);
    background: var(--accent-bg);
    padding: 1px var(--s-1);
    border-radius: var(--radius-s);
}
.pt-output-meta { font-size: var(--text-sm); color: var(--text-sub); white-space: nowrap; }
.pt-output-group-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub);
    padding: var(--s-1) 0; margin-top: var(--s-2);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.pt-output-group-label:first-child { margin-top: 0; }
/* Phase별 산출물 그룹 — 스타일은 상단 ov-project 블록에 통합됨 */

/* ── Phase 타임라인 ── */
.pt-phases { display: flex; flex-direction: column; gap: 0; position: relative; }
.pt-phase {
    display: flex; gap: var(--s-3); padding: var(--s-3) 0;
    position: relative;
}
/* 타임라인 연결선 */
.pt-phase-line {
    width: 2px; background: var(--surface-w8); position: absolute;
    left: var(--s-2-5); top: 0; bottom: 0;
}
.pt-phase-line--done { background: var(--accent); }
.pt-phase:last-child .pt-phase-line { display: none; }
/* Phase dot — 24px, 터치 친화 + 아이콘 가시성 향상 */
.pt-phase-dot {
    width: var(--s-5); height: var(--s-5); border-radius: 50%;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
}
.pt-phase-dot--done { background: var(--accent); }
.pt-phase-dot--done svg { color: var(--bg); }
.pt-phase-dot--active { background: var(--clr-success); animation: pt-pulse 2s infinite; }
.pt-phase-dot--active svg { color: var(--bg); }
.pt-phase-dot--pending { background: var(--surface-w8); }
.pt-phase-dot--pending svg { color: var(--text-sub); }
.pt-phase-dot--blocked { background: var(--clr-error-bg-lg); }
.pt-phase-dot--blocked svg { color: var(--clr-error-light, #ef4444); }
@keyframes pt-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--clr-success-bg-strong); } 50% { box-shadow: 0 0 0 8px var(--clr-success-bg-2xs); } }
.pt-phase-content { flex: 1; min-width: 0; }
.pt-phase-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--s-1); }
.pt-phase-desc { font-size: var(--text-sm); color: var(--text-sub); margin-bottom: var(--s-2); line-height: 1.5; }
.pt-phase-progress-bar { display: flex; gap: var(--s-3); margin-bottom: var(--s-1); }
.pt-phase-prog-item { display: flex; align-items: center; gap: var(--s-1); flex: 1; }
.pt-phase-prog-label { font-size: var(--text-sm); color: var(--text-sub); white-space: nowrap; min-width: 72px; }
.pt-phase-prog-track { flex: 1; height: 4px; background: var(--surface-w8); border-radius: var(--radius-pill); overflow: hidden; }
.pt-phase-prog-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--duration-moderate) var(--easing-smooth); }
.pt-phase-prog-fill--ac { background: var(--clr-warning-bright); }
.pt-phase-ac-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub); margin-top: var(--s-2); margin-bottom: var(--s-1); }

/* ── AC / 체크리스트 ── */
.pt-checklist { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-1); }
.pt-check-item {
    display: flex; align-items: flex-start; gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); color: var(--text-sub);
    transition: background var(--duration-fast) var(--easing-smooth);
}
.pt-check-item:hover { background: var(--surface-hover); }
.pt-check-icon {
    width: var(--s-4); height: var(--s-4); flex-shrink: 0; margin-top: 1px;
    border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center;
}
.pt-check-icon--done { color: var(--accent); }
.pt-check-icon--pending { color: var(--text-sub); }
.pt-check-text { flex: 1; line-height: 1.4; }
.pt-check-text--done { color: var(--text-sub); text-decoration: line-through; text-decoration-color: var(--text-faint); }
/* AC 귀속 라벨 — 자동/수동 충족 출처 표시 */
.pt-ac-attribution {
    font-size: var(--text-sm); color: var(--text-faint); white-space: nowrap;
    margin-left: var(--s-1); flex-shrink: 0; line-height: 1;
}
/* 동기화 시각 표시 */
.pt-sync-time {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-faint);
    white-space: nowrap;
}
/* 체크리스트 삭제 버튼 */
.pt-check-del {
    opacity: 0; border: none; background: none; cursor: pointer;
    color: var(--text-faint); padding: var(--s-1); border-radius: var(--radius-s);
    transition: opacity var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.pt-check-item:hover .pt-check-del { opacity: 1; }
.pt-check-del:hover { color: var(--clr-error-light, #ef4444); }
/* 체크리스트 아이템 추가 영역 */
.pt-cl-add {
    display: flex; gap: var(--s-1); align-items: center;
    margin-top: var(--s-1); padding: var(--s-1) var(--s-1);
}
.pt-cl-add-input {
    flex: 1; min-width: 0; padding: var(--s-1) var(--s-1);
    font-size: var(--text-sm); font-family: var(--font);
    background: var(--surface); color: var(--text); border: none;
    border-radius: var(--radius-s); outline: none;
}
.pt-cl-add-input::placeholder { color: var(--text-faint); }
.pt-cl-add-input:focus { box-shadow: 0 0 0 1.5px var(--accent); }
.pt-cl-add-btn {
    border: none; background: none; cursor: pointer;
    color: var(--text-sub); padding: var(--s-1);
    border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center;
    transition: color var(--duration-fast) var(--easing-smooth), background var(--duration-fast) var(--easing-smooth);
}
.pt-cl-add-btn:hover { color: var(--accent); background: var(--surface-hover); }

/* ── 마일스톤 CRUD ── */
.pt-ms-list { display: flex; flex-direction: column; gap: var(--s-1); }
.pt-ms-item {
    background: var(--surface); border-radius: var(--radius-s);
    padding: var(--s-2) var(--s-3);
    transition: background var(--duration-fast) var(--easing-smooth);
}
.pt-ms-item:hover { background: var(--surface-hover); }
.pt-ms-header {
    display: flex; align-items: center; gap: var(--s-1);
}
.pt-ms-order {
    width: var(--s-5-0); height: var(--s-5-0); border-radius: 50%;
    background: var(--surface-w8); color: var(--text-sub);
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pt-ms-title {
    flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-ms-desc {
    font-size: var(--text-sm); color: var(--text-sub); line-height: 1.5;
    margin-top: var(--s-1); padding-left: var(--s-6);
}
.pt-ms-status-pill {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill); cursor: pointer; border: none;
    transition: filter var(--duration-fast) var(--easing-smooth); white-space: nowrap; font-family: var(--font);
}
.pt-ms-status-pill:hover { filter: brightness(1.2); }
.pt-ms-status--planned { background: var(--surface-w8); color: var(--text-sub); }
.pt-ms-status--active { background: var(--clr-success-bg-strong, rgba(34,197,94,0.2)); color: var(--clr-success); }
.pt-ms-status--done { background: var(--accent-bg, rgba(45,212,191,0.12)); color: var(--accent); }
.pt-ms-status--blocked { background: var(--clr-error-bg, rgba(239,68,68,0.1)); color: var(--clr-error-light, #ef4444); }
.pt-ms-actions {
    display: flex; gap: var(--s-1); opacity: 0;
    transition: opacity var(--duration-fast) var(--easing-smooth); margin-left: auto;
}
.pt-ms-item:hover .pt-ms-actions { opacity: 1; }
.pt-ms-action-btn {
    width: var(--s-5); height: var(--s-5);
    border: none; background: none; cursor: pointer; padding: var(--s-1);
    color: var(--text-sub); border-radius: var(--radius-s);
    display: flex; align-items: center; justify-content: center;
    transition: color var(--duration-fast) var(--easing-smooth), background var(--duration-fast) var(--easing-smooth);
}
.pt-ms-action-btn:hover { color: var(--text); background: var(--surface-w8); }
.pt-ms-action-btn--del:hover { color: var(--clr-error-light, #ef4444); }
.pt-ms-progress {
    height: 3px; background: var(--surface-w8); border-radius: var(--radius-s);
    margin: var(--s-1) var(--s-6) 0; overflow: hidden;
}
.pt-ms-progress-fill {
    height: 100%; background: var(--accent); border-radius: var(--radius-s);
    transition: width var(--duration-moderate) var(--easing-smooth);
}
.pt-ms-view-wrap { /* default visible */ }
.pt-ms-edit-wrap {
    display: flex; flex-direction: column; gap: var(--s-1);
    padding-top: var(--s-1);
}
.pt-ms-edit-wrap.hidden { display: none; }
.pt-ms-edit-title, .pt-ms-edit-desc {
    width: 100%; padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm); font-family: var(--font);
    background: var(--bg-secondary, var(--bg)); color: var(--text); border: none;
    border-radius: var(--radius-s); outline: none;
}
.pt-ms-edit-title:focus, .pt-ms-edit-desc:focus { box-shadow: 0 0 0 1.5px var(--accent); }
/* 마일스톤 추가 영역 */
.pt-ms-add-area { margin-top: var(--s-2); }
.pt-ms-add-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    border: none; background: none; cursor: pointer;
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-sub);
    padding: var(--s-1) var(--s-2); border-radius: var(--radius-s);
    font-family: var(--font); transition: color var(--duration-fast) var(--easing-smooth), background var(--duration-fast) var(--easing-smooth);
}
.pt-ms-add-btn:hover { color: var(--accent); background: var(--surface-hover); }
.pt-ms-form {
    display: flex; flex-direction: column; gap: var(--s-1);
    margin-top: var(--s-1); padding: var(--s-2);
    background: var(--surface); border-radius: var(--radius-s);
}
.pt-ms-form.hidden { display: none; }
.pt-ms-title-input, .pt-ms-desc-input {
    width: 100%; padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm); font-family: var(--font);
    background: var(--bg-secondary, var(--bg)); color: var(--text); border: none;
    border-radius: var(--radius-s); outline: none;
}
.pt-ms-title-input:focus, .pt-ms-desc-input:focus { box-shadow: 0 0 0 1.5px var(--accent); }
.pt-ms-title-input::placeholder, .pt-ms-desc-input::placeholder { color: var(--text-faint); }
.pt-ms-form-actions { display: flex; gap: var(--s-1); justify-content: flex-end; }
.pt-ms-form-btn {
    padding: var(--s-1) var(--s-3); font-size: var(--text-sm); font-weight: var(--weight-semibold);
    border: none; border-radius: var(--radius-s); cursor: pointer;
    font-family: var(--font); transition: filter var(--duration-fast) var(--easing-smooth);
}
.pt-ms-form-btn:hover { filter: brightness(1.15); }
.pt-ms-form-btn--save { background: var(--accent); color: var(--bg); }
.pt-ms-form-btn--cancel { background: var(--surface-w8); color: var(--text-sub); }

/* 섹션 구분선 */
.pt-section-divider {
    height: 1px; background: var(--surface-w6);
    margin: var(--s-3) 0;
}

/* ── 프로젝트 상세 탭 (내부 pill 탭) ── */
.pt-detail-tabs {
    display: flex; gap: var(--s-1); padding: var(--s-1);
    background: var(--surface); border-radius: var(--radius-pill);
    margin: var(--s-3) 0;
}
.pt-detail-tab {
    padding: var(--s-1-5) var(--s-3);
    border: none; background: none; border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-sub);
    cursor: pointer; transition: background var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth), box-shadow var(--duration-fast) var(--easing-smooth);
    font-family: var(--font); white-space: nowrap;
}
.pt-detail-tab:hover { background: var(--surface-hover); color: var(--text); }
.pt-detail-tab.active {
    background: var(--bg-raised); color: var(--text); font-weight: var(--weight-semibold);
    box-shadow: var(--shadow), 0 0 0 1px var(--surface-w6);
}
.pt-detail-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pt-detail-tab-panel { display: none; }
.pt-detail-tab-panel.active { display: block; }

/* ── 개요 탭 섹션 ── */
.pt-overview-section {
    margin-bottom: var(--s-4);
}
.pt-overview-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-2);
}
.pt-overview-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.pt-overview-section-count {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}
.pt-overview-progress {
    height: var(--s-1);
    background: var(--surface-w5);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-2);
    overflow: hidden;
}
.pt-overview-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) var(--easing-smooth);
}

/* ── 빈 탭 상태 ── */
.pt-empty-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-6) var(--s-4);
    color: var(--text-faint);
}
.pt-empty-tab svg { opacity: 0.4; margin-bottom: var(--s-2); }
.pt-empty-tab-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-align: center;
    line-height: 1.5;
}

/* ── 현재 Phase 미리보기 (개요 탭) ── */
.pt-current-phase {
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-3);
}
.pt-current-phase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}
.pt-current-phase-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.pt-current-phase-pct {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* ── 산출물 Agent별 그룹 ── */
.pt-output-group { margin-bottom: var(--s-3); }
.pt-output-group-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--s-1);
    padding-bottom: var(--s-1);
}

/* ── 카드 Phase 로드맵 미니바 ── */
.pt-phase-roadmap {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.pt-phase-dots {
    display: flex;
    gap: var(--s-0-5);
    align-items: center;
}
.pt-phase-roadmap .pt-phase-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    position: static;
    display: block;
}
.pt-phase-roadmap .pt-phase-dot--done { background: var(--accent); }
.pt-phase-roadmap .pt-phase-dot--active { background: var(--clr-success); animation: pt-pulse 2s infinite; }
.pt-phase-roadmap .pt-phase-dot--pending { background: var(--surface-w5); }
.pt-phase-roadmap .pt-phase-dot--blocked { background: var(--clr-error-bg-lg); }
.pt-phase-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
}

/* ── AC 배지 (카드 헤더) ── */
.pt-ac-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    white-space: nowrap;
    line-height: 1.3;
}
.pt-ac-badge--done { background: var(--accent-dim); color: var(--accent); }
.pt-ac-badge--partial { background: var(--clr-warning-bg); color: var(--clr-warning-bright); }
.pt-ac-badge--none { background: var(--surface-w8); color: var(--text-faint); }

/* 상세 스켈레톤 */
.pt-detail-skeleton { display: flex; flex-direction: column; gap: var(--s-2); }

/* 반응형 — 960px: 통계 카드 3열 + 검색바 축소 */
@media (max-width: 960px) {
    .pt-stat { min-width: 72px; padding: var(--s-1) var(--s-2); }
    .pt-stat-value { font-size: var(--text-lg); }
    .pt-detail-stats { gap: var(--s-1); }
}
/* 반응형 — 768px: 통계 2열 + 도구 모음 줄바꿈 */
@media (max-width: 768px) {
    .pt-summary { gap: var(--s-1); }
    .pt-stat { min-width: var(--s-10); }
    .pt-toolbar { flex-wrap: wrap; }
    .pt-search-wrap { flex: 1; min-width: 0; }
    .pt-card { padding: var(--s-2) var(--s-3); }
    .pt-detail-meta { gap: var(--s-1) var(--s-2); }
}
/* 반응형 — 640px: 세로 스택 */
@media (max-width: 640px) {
    .pt-summary { flex-direction: column; }
    .pt-stat { flex-direction: row; gap: var(--s-2); min-width: unset; }
    .pt-stat-value { font-size: var(--text-reading); }
    .pt-card-meta { gap: var(--s-2); }
    .pt-toolbar { flex-direction: column; align-items: stretch; }
    .pt-detail-header { flex-direction: column; align-items: flex-start; }
    .pt-detail-stats { flex-direction: column; }
    .pt-detail-stats .pt-stat { flex-direction: row; min-width: unset; }
    .pt-phase-roadmap .pt-phase-dot { width: var(--s-1-5); height: var(--s-1-5); }
    .pt-detail-tabs { flex-wrap: wrap; }
    .pt-detail-tab { padding: var(--s-1) var(--s-2); font-size: var(--text-sm); }
    /* 마일스톤 반응형 */
    .pt-ms-actions { opacity: 1; }
    .pt-ms-header { flex-wrap: wrap; }
    .pt-ms-view-wrap { padding: var(--s-2) var(--s-3); }
    /* 프로젝트 그룹핑 반응형 */
    .ov-project-header { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
    .ov-project-files { padding: var(--s-1); }
}

/* ═══════════════════════════════════════════
   Phase 타임라인 프리미엄 강화 — 프로덕션 수준
   ═══════════════════════════════════════════ */

/* 타임라인 커넥터 — 그라디언트 라인 */
.pt-phase-line {
    background: linear-gradient(180deg, var(--accent) 0%, var(--surface-w8) 100%) !important;
    width: 2px;
    opacity: 0.6;
}
.pt-phase-line--done {
    background: var(--accent) !important;
    opacity: 1;
    box-shadow: 0 0 6px var(--accent-glow);
}

/* Phase dot — 프리미엄 그림자 */
.pt-phase-dot {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 2px var(--surface);
    transition: transform var(--duration-base) var(--easing-smooth), box-shadow var(--duration-base) var(--easing-smooth);
}
.pt-phase-dot--active {
    box-shadow: 0 0 0 3px var(--clr-success-bg-2xs, rgba(34,197,94,0.15)), 0 0 12px var(--clr-success-bg-strong, rgba(34,197,94,0.25));
}
.pt-phase-dot--done {
    box-shadow: 0 0 0 2px var(--surface), 0 0 8px var(--accent-glow);
}

/* Phase 콘텐츠 — hover 시 글라스 배경 */
.pt-phase-content {
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    transition: background var(--duration-base) var(--easing-smooth), box-shadow var(--duration-base) var(--easing-smooth);
}
.pt-phase-content:hover {
    background: var(--surface-hover);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Active Phase — 깔끔한 하이라이트 */
.pt-phase:has(.pt-phase-dot--active) .pt-phase-content {
    background: rgba(255,255,255,0.02);
}

/* Phase 제목 — Active일 때 강조 */
.pt-phase:has(.pt-phase-dot--active) .pt-phase-title {
    color: var(--text);
}
.pt-phase:has(.pt-phase-dot--done) .pt-phase-title {
    color: var(--text-sub);
}

/* 진행률 바 — 그라디언트 + 글로우 */
.pt-phase-prog-fill {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%) !important;
    box-shadow: 0 0 6px var(--accent-glow);
}
.pt-phase-prog-fill--ac {
    background: linear-gradient(90deg, var(--clr-warning-bright) 0%, var(--clr-warning-light) 100%) !important;
    box-shadow: 0 0 6px var(--clr-warning-bg-xl);
}

/* 체크리스트 아이템 — 프리미엄 인터랙션 */
.pt-check-item {
    border-radius: var(--radius-s);
    transition: background var(--duration-fast) var(--easing-smooth), transform var(--duration-instant) var(--easing-smooth);
}
.pt-check-item:hover {
    transform: translateX(2px);
}
.pt-check-item:active {
    transform: translateX(2px) scale(0.995);
}

/* Done 아이템 — 시각적 완료감 */
.pt-check-text--done {
    opacity: 0.6;
}

/* 체크 아이콘 — 완료 시 그린 글로우 */
.pt-check-icon--done svg {
    filter: drop-shadow(0 0 3px var(--accent-glow));
}

/* Phase 상태 pill — 프리미엄 스타일 */
.pt-ph-status-pill {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    transition: all var(--duration-base) var(--easing-smooth);
}
.pt-ph-status--active {
    background: var(--clr-success-bg-2xs, rgba(34,197,94,0.12));
    color: var(--clr-success);
    box-shadow: 0 0 8px var(--clr-success-bg-2xs, rgba(34,197,94,0.1));
}
.pt-ph-status--done {
    background: var(--accent-dim);
    color: var(--accent);
}
.pt-ph-status--planned {
    background: var(--surface-w5);
    color: var(--text-sub);
}
.pt-ph-status--blocked {
    background: var(--clr-error-bg-lg, rgba(239,68,68,0.12));
    color: var(--clr-error-light, #ef4444);
}

/* Phase 입력 필드 — 깔끔한 포커스 */
.pt-cl-add-input:focus {
    box-shadow: 0 0 0 1.5px var(--accent), 0 0 8px var(--accent-glow) !important;
}

/* Phase 추가 버튼 — accent hover */
.pt-ms-add-btn {
    transition: all var(--duration-base) var(--easing-smooth);
}
.pt-ms-add-btn:hover {
    color: var(--accent);
    background: var(--surface-w8);
}

/* 카드 Phase 로드맵 미니바 — 프리미엄 */
.pt-phase-roadmap {
    padding: var(--s-1) var(--s-1) !important;
    background: var(--surface-w3, rgba(255,255,255,0.03)) !important;
    border-radius: var(--radius-s) !important;
}
.pt-phase-roadmap .pt-phase-dot {
    transition: transform var(--duration-fast) var(--easing-smooth);
}
.pt-phase-roadmap .pt-phase-dot:hover {
    transform: scale(1.5);
}

/* AC 배지 — 프리미엄 */
.pt-ac-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: 1px var(--s-1-5);
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}
.pt-ac-badge--done {
    background: var(--clr-success-bg-2xs, rgba(34,197,94,0.12));
    color: var(--clr-success);
}
.pt-ac-badge--partial {
    background: var(--clr-warning-bg-lg, rgba(245,158,11,0.12));
    color: var(--clr-warning-bright);
}
.pt-ac-badge--none {
    background: var(--surface-w5);
    color: var(--text-sub);
}

/* Phase 타임라인 등장 애니메이션 */
@keyframes ptPhaseSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.pt-phase {
    animation: ptPhaseSlideIn var(--duration-moderate) var(--easing-smooth) both;
}
.pt-phase:nth-child(1) { animation-delay: 0ms; }
.pt-phase:nth-child(2) { animation-delay: 60ms; }
.pt-phase:nth-child(3) { animation-delay: 120ms; }
.pt-phase:nth-child(4) { animation-delay: 180ms; }
.pt-phase:nth-child(5) { animation-delay: 240ms; }
.pt-phase:nth-child(n+6) { animation-delay: 300ms; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .pt-phase { animation: none !important; }
    .pt-phase-dot--active { animation: none !important; }
    .pt-phase-dot, .pt-phase-content, .pt-check-item { transition: none !important; }
}

/* ── 기획서 탭 스타일 ────────────────────────────── */
.pt-plans-list {
    display: flex; flex-direction: column; gap: var(--s-1);
    max-height: var(--card-min); overflow-y: auto;
    margin-bottom: var(--s-2);
}
.pt-plan-item {
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-s);
    cursor: pointer; transition: all var(--duration-fast);
}
.pt-plan-item:hover { background: var(--surface-hover); border-color: var(--accent); }
.pt-plan-item.active { border-color: var(--accent); background: var(--surface-w8); }
.pt-plan-item-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--s-1);
}
.pt-plan-agent-badge {
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    padding: 1px var(--s-1-5); border-radius: var(--radius-s);
    background: var(--accent-dim);
    color: var(--accent);
}
.pt-plan-date { font-size: var(--text-sm); color: var(--text-faint); }
.pt-plan-item-title {
    font-size: var(--text-sm); color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 기획서 뷰어 */
.pt-plan-viewer {
    border-top: 1px solid var(--border-subtle);
    max-height: 600px; overflow-y: auto;
}
.pt-plan-viewer.hidden { display: none; }
.pt-plan-viewer-header {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky; top: 0; z-index: 2;
    background: var(--bg);
}
.pt-plan-back-btn {
    display: flex; align-items: center; gap: var(--s-1);
    background: none; border: none; color: var(--accent);
    font-size: var(--text-sm); cursor: pointer; padding: var(--s-1) var(--s-1-5); border-radius: var(--radius-s);
}
.pt-plan-back-btn:hover { background: var(--surface-w10); }
.pt-plan-viewer-title {
    font-size: var(--text-sm); color: var(--text-sub);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-plan-content {
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-sm); line-height: 1.7; color: var(--text);
}
/* 마크다운 렌더링 */
.pt-md-h1 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: var(--s-3) 0 var(--s-1); color: var(--text); border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--s-1); }
.pt-md-h2 { font-size: var(--text-base); font-weight: var(--weight-bold); margin: var(--s-2) 0 var(--s-1); color: var(--text); }
.pt-md-h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: var(--s-1) 0 var(--s-1); color: var(--accent); }
.pt-md-h4 { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: var(--s-1) 0; color: var(--text); }
.pt-md-hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--s-2) 0; }
.pt-md-code {
    background: rgba(0,0,0,0.4); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-s); padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm); line-height: 1.5; overflow-x: auto;
    font-family: var(--font-mono);
    margin: var(--s-1) 0;
}
.pt-md-code code { color: var(--text); }
.pt-md-inline-code {
    background: var(--surface-w10); border-radius: var(--radius-s);
    padding: 1px var(--s-1); font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--accent);
}
.pt-md-table {
    width: 100%; border-collapse: collapse; margin: var(--s-1) 0;
    font-size: var(--text-sm);
}
.pt-md-td {
    padding: var(--s-1) var(--s-2); border: 1px solid var(--border-subtle);
}
.pt-md-li { font-size: var(--text-sm); line-height: 1.6; }
.pt-md-quote {
    border-left: 3px solid var(--accent);
    padding: var(--s-1) var(--s-2);
    margin: var(--s-1) 0;
    color: var(--text-sub); font-style: italic;
    background: var(--surface-w3);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.pt-md-spacer { height: var(--s-1); }

/* ── 알림 설정 패널 (M1) ── */
.notif-panel { display: flex; flex-direction: column; gap: var(--s-5); }
.notif-empty { color: var(--text-sub); font-size: var(--text-sm); padding: var(--s-5); text-align: center; background: var(--surface); border-radius: var(--radius-s); }
.notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--s-1); }
.notif-dot--ok { background: var(--green); }
.notif-dot--off { background: var(--text-faint); }
.notif-action-btn { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); background: var(--accent); color: var(--bg); font-size: var(--text-sm); font-weight: var(--weight-semibold); border: none; border-radius: var(--radius-s); cursor: pointer; }
.notif-action-btn:hover { opacity: 0.85; }
.notif-action-btn--secondary { background: var(--surface-w8); color: var(--text); }
.notif-channel-card { background: var(--bg-card); border-radius: var(--radius-s); padding: var(--s-3); margin-bottom: var(--s-2); }
.notif-channel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.notif-channel-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.notif-channel-body { display: flex; flex-direction: column; gap: var(--s-2); }
.notif-channel-actions { display: flex; gap: var(--s-2); margin-top: var(--s-1); }
.notif-field-row { display: flex; flex-direction: column; gap: var(--s-1); }
.notif-field-row label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--weight-medium); }
.notif-field-row input { background: var(--bg-secondary); color: var(--text); padding: var(--s-1) var(--s-2); font-size: var(--text-sm); border: none; border-radius: var(--radius-s); outline: none; }
.notif-field-row input:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
.notif-events-list { display: flex; flex-direction: column; gap: var(--s-1); }
.notif-event-row { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); background: var(--bg-card); border-radius: var(--radius-s); }
.notif-event-row input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.notif-event-name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); }
.sched-list { display: flex; flex-direction: column; gap: var(--s-2); }
.sched-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-1); }
.sched-meta-item { font-size: var(--text-sm); color: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--s-1); }
.sched-meta-item code { font-family: var(--font-mono); background: var(--bg-secondary); padding: 1px var(--s-1); border-radius: var(--radius-s); }
.sched-content { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-sub); background: var(--bg-secondary); padding: var(--s-1) var(--s-2); border-radius: var(--radius-s); max-height: 60px; overflow: auto; white-space: pre-wrap; word-break: break-all; }