/* ══════════════════════════════════════════
   Output Files + Creator Outputs
   ══════════════════════════════════════════ */

.output-group { margin-bottom: var(--s-4); }
.output-group-title {
    font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--accent);
    letter-spacing: var(--tracking-normal); line-height: var(--leading-snug);
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-3); margin-bottom: var(--s-1);
}
.output-file {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-3); border-radius: var(--radius-s);
    transition: background var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    cursor: pointer;
    /* 긴 출력물 목록 성능 최적화 — 뷰포트 밖 아이템 렌더링 지연 */
    content-visibility: auto;
    contain-intrinsic-size: auto 44px;
}
.output-file:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.output-file:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-card-hover); }
.output-file:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.output-icon { font-size: var(--text-xl); flex-shrink: 0; }
.output-info { flex: 1; min-width: 0; }
.output-name { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-detail { font-size: var(--text-sm); color: var(--text-sub); } /* WCAG AA: 카드 내부 가독성 확보 */
.output-action {
    padding: var(--s-1) var(--s-3); border: none; border-radius: var(--radius-pill);
    font-size: var(--text-sm); background: var(--surface-hover); color: var(--text-sub);
    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);
}
.output-action:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.output-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.output-action-png-save {
    background: var(--accent); color: var(--bg); font-weight: var(--weight-bold);
    border-color: var(--accent);
}
.output-action-png-save:hover { background: var(--accent-deep); color: var(--bg); filter: brightness(var(--hover-brightness)); transform: translateY(var(--hover-lift-sm)); }
.output-action-png-save:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.output-action-png-save:disabled { opacity: 0.5; cursor: wait; filter: none; }
.output-actions { display: flex; gap: var(--s-1); flex-shrink: 0; }
.output-action-open {
    padding: var(--s-1) var(--s-3); border: 1px solid var(--clr-purple-border); border-radius: var(--radius-pill);
    font-size: var(--text-sm); background: none; color: var(--clr-purple-light);
    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);
}
.output-action-open:hover { border-color: var(--clr-purple-light); background: var(--clr-purple-bg-xs); transform: translateY(var(--hover-lift-sm)); }

/* Final Deliverable Highlight */
.output-file.final-deliverable { background: var(--clr-warning-bg-xs); padding-left: calc(var(--s-3) - 3px); }
.output-file.final-deliverable:hover { background: var(--clr-warning-bg-md); 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-bold); background: var(--clr-warning-bg-lg);
    color: var(--clr-warning); white-space: nowrap; flex-shrink: 0;
}

/* Agent-specific deliverable colors — 토큰 기반 */
.output-file.deliverable-pdfcreator { background: var(--clr-agent-pdfcreator-bg); }
.output-file.deliverable-pdfcreator:hover { background: var(--clr-error-bg-md); transform: translateY(var(--hover-lift-sm)); }
.output-file.deliverable-cardnews { background: var(--clr-agent-cardnews-bg); }
.output-file.deliverable-cardnews:hover { background: var(--clr-info-bg-md); transform: translateY(var(--hover-lift-sm)); }
.output-file.deliverable-nefcon { background: var(--clr-agent-nefcon-bg); }
.output-file.deliverable-nefcon:hover { background: var(--clr-agent-nefcon-bg-hover); transform: translateY(var(--hover-lift-sm)); }
.output-file.deliverable-telegram { background: var(--clr-agent-telegram-bg); }
.output-file.deliverable-telegram:hover { background: var(--clr-success-bg-md); transform: translateY(var(--hover-lift-sm)); }
.output-file.deliverable-reelswriter { background: var(--clr-agent-reelswriter-bg); }
.output-file.deliverable-reelswriter:hover { background: var(--clr-agent-reelswriter-bg-hover); transform: translateY(var(--hover-lift-sm)); }
.output-file.deliverable-threadcreator { background: var(--surface-w5); }
.output-file.deliverable-threadcreator:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.output-file.deliverable-chartanalyst { background: var(--clr-agent-chartanalyst-bg); }
.output-file.deliverable-chartanalyst:hover { background: var(--clr-agent-chartanalyst-bg-hover); transform: translateY(var(--hover-lift-sm)); }

/* 프리미엄 카드뉴스 deliverable 색상 — 골드 톤 */
.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); }
.output-file.deliverable-premiumcardnews:hover,
.output-file.deliverable-pcnfundamentals:hover,
.output-file.deliverable-pcnbriefing:hover,
.output-file.deliverable-pcncompany:hover,
.output-file.deliverable-pcnmacro:hover,
.output-file.deliverable-pcnchart:hover { background: var(--clr-agent-premiumcardnews-bg-hover); transform: translateY(var(--hover-lift-sm)); }

/* PREMIUM 뱃지 */
.premium-badge {
    display: inline-flex; align-items: center;
    padding: 1px var(--s-1); border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest);
    background: linear-gradient(135deg, var(--clr-agent-premiumcardnews) 0%, var(--clr-agent-premiumcardnews-gold) 100%);
    color: var(--accent-on); white-space: nowrap; flex-shrink: 0;
    margin-left: var(--s-1);
}

/* 프리미엄 카드뉴스 카테고리 라벨 */
.premium-cat-label {
    display: inline-flex; align-items: center;
    padding: 1px var(--s-1); border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    white-space: nowrap; flex-shrink: 0; margin-left: var(--s-1);
}
.premium-cat-fundamentals { background: rgba(10, 22, 40, 0.6); color: var(--clr-agent-premiumcardnews); }
.premium-cat-briefing { background: var(--overlay); color: var(--text-sub); }
.premium-cat-company, .premium-cat-industry { background: var(--overlay); color: var(--text-sub); }
.premium-cat-macro { background: rgba(11, 29, 58, 0.6); color: var(--clr-warning-light); }
.premium-cat-chart { background: rgba(20, 30, 50, 0.6); color: var(--clr-info-light); }

/* FREE 뱃지 — 무료 미리보기 버전 표시 */
.free-badge {
    display: inline-flex; align-items: center;
    padding: 1px var(--s-1); border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest);
    background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%);
    color: var(--accent-on); white-space: nowrap; flex-shrink: 0;
    margin-left: var(--s-1);
}

/* 출력물 뷰: 프리미엄 파일 골드 하이라이트 */
.ov-file-item.ov-file-premium { background: var(--clr-agent-premiumcardnews-bg-subtle); }
.ov-file-item.ov-file-free { background: var(--surface-w5); }
.ov-file-item.ov-file-premium:hover { background: var(--clr-agent-premiumcardnews-bg-mid); transform: translateY(var(--hover-lift-sm)); }
.ov-file-item.ov-file-free:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }

/* 프리미엄 카테고리 하위 필터 스트립 */
.ov-premium-cat-strip {
    display: flex; gap: var(--s-1); padding: var(--s-1) var(--s-2);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ov-premium-cat-strip::-webkit-scrollbar { display: none; }
.ov-premium-cat-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-medium); cursor: pointer;
    background: var(--clr-agent-premiumcardnews-bg-subtle); color: var(--text-sub);
    white-space: nowrap; flex-shrink: 0;
    transition: background var(--motion-hover),
                color var(--motion-hover),
                transform var(--motion-hover);
}
.ov-premium-cat-chip:hover { background: var(--clr-agent-premiumcardnews-bg-mid); color: var(--clr-agent-premiumcardnews); transform: translateY(var(--hover-lift-sm)); }
.ov-premium-cat-chip:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.ov-premium-cat-chip.active { background: var(--clr-agent-premiumcardnews-bg-active); color: var(--clr-agent-premiumcardnews); font-weight: var(--weight-semibold); }

/* Creator Outputs Section */
.creator-section { margin-top: var(--s-4); padding-top: var(--s-4); border-top: none; }
.creator-section-title {
    font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--clr-warning);
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-3); margin-bottom: var(--s-1);
}
.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(--clr-badge-pdfcreator-bg); color: var(--clr-error-bright); }
.creator-badge-cardnews { background: var(--clr-badge-cardnews-bg); color: var(--clr-info-bright); }
.creator-badge-nefcon { background: var(--clr-badge-nefcon-bg); color: var(--clr-purple-softer); }
.creator-badge-telegram { background: var(--clr-badge-telegram-bg); color: var(--clr-success-bright); }
.creator-badge-reelswriter { background: var(--clr-badge-reelswriter-bg); color: var(--clr-warning); }
.creator-badge-threadcreator { background: var(--clr-badge-threadcreator-bg); color: var(--clr-purple-softer); }
.creator-badge-chartanalyst { background: var(--clr-badge-chartanalyst-bg); color: var(--accent); }
.creator-badge-premiumcardnews,
.creator-badge-pcnfundamentals,
.creator-badge-pcnbriefing,
.creator-badge-pcncompany,
.creator-badge-pcnmacro,
.creator-badge-pcnchart { background: var(--clr-badge-premiumcardnews-bg); color: var(--clr-agent-premiumcardnews); }

/* Job/Agent Toggle */
.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-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-wrap: wrap;
}
.job-toggle-header:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.job-toggle-header:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.job-toggle-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.job-toggle-header.open { border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; }
.job-toggle-arrow { font-size: var(--text-sm); color: var(--text-sub); transition: transform var(--anim-base, 200ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); flex-shrink: 0; width: 16px; text-align: center; } /* WCAG AA */
.job-toggle-header.open .job-toggle-arrow { transform: rotate(90deg); }
.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: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.agent-toggle-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.agent-toggle-header:last-child { border-bottom: none; }
.agent-toggle-arrow { font-size: var(--text-sm); color: var(--text-sub); transition: transform var(--anim-base, 200ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); flex-shrink: 0; width: 14px; text-align: center; } /* WCAG AA */
.agent-toggle-header.open .agent-toggle-arrow { transform: rotate(90deg); }
.agent-toggle-body { display: none; background: var(--surface-black); }
.agent-toggle-header.open + .agent-toggle-body { display: block; }

/* ══════════════════════════════════════════
   Skipped Agent — 콘텐츠 생성 스킵 표시
   ══════════════════════════════════════════ */

/* 에이전트 토글 헤더: 스킵 상태 */
.agent-toggle-header.skipped {
    background: var(--surface);
    opacity: 0.65;
    transition: opacity var(--motion-hover), background var(--motion-hover);
}
.agent-toggle-header.skipped:hover {
    opacity: 0.85;
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}

/* 출력 파일 레벨: 스킵된 에이전트 결과물 카드 */
.output-file.skipped {
    opacity: 0.65;
    background: var(--clr-warning-bg-xs);
    padding-left: calc(var(--s-3) - 3px);
    transition: opacity var(--motion-hover), background var(--motion-hover);
}
.output-file.skipped:hover {
    opacity: 0.85;
    background: var(--clr-warning-bg-sm);
    transform: translateY(var(--hover-lift-sm));
}
.output-file.skipped .output-name {
    color: var(--text-sub);
    text-decoration: line-through;
    text-decoration-color: var(--clr-warning);
    text-decoration-thickness: 1px;
}

/* 스킵 에이전트 헤더 내 생성기 태그 */
.skip-creator-tag {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--clr-warning-bg-sm);
    color: var(--clr-warning);
    font-weight: var(--weight-semibold);
}

/* 스킵 뱃지 (에이전트 헤더 안) */
.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-bold);
    background: var(--clr-warning-bg-sm);
    color: var(--clr-warning-light);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: var(--tracking-wide);
}
.skip-badge::before {
    content: '';
    display: inline-block;
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--clr-warning-light);
    flex-shrink: 0;
}

/* 스킵 이유 텍스트 (에이전트 토글 바디 안) */
.skip-reason-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--clr-warning-bg-xs);
    border-bottom: none;
    font-size: var(--text-sm);
    color: var(--clr-warning-light);
    line-height: var(--leading-normal);
}
.skip-reason-bar .skip-reason-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}
.skip-reason-bar .skip-reason-text {
    flex: 1;
    min-width: 0;
}
.skip-reason-bar .skip-reason-text strong {
    color: var(--clr-warning-bright);
    font-weight: var(--weight-bold);
}
/* 기존 파일 링크 */
.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);
    font-weight: var(--weight-medium);
    background: var(--surface);
    color: var(--text-sub);
    text-decoration: none;
    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);
    cursor: pointer;
}
.skip-reason-bar .skip-existing-link:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-subtle);
}

/* 작업 헤더: 스킵된 에이전트 수 카운터 뱃지 */
.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(--clr-warning-bg-xs);
    border: 1px solid var(--clr-warning-bg-lg);
    color: var(--clr-warning);
    white-space: nowrap;
    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);
}
/* 숫자 강조 */
.skip-count-badge .skip-count-num {
    font-weight: var(--weight-extrabold);
    color: var(--clr-warning-light);
    font-variant-numeric: tabular-nums;
}
/* 스킵 수 변경 시 펄스 애니메이션 */
.skip-count-badge.pulse {
    animation: skip-pulse var(--duration-slow) var(--easing-smooth);
}
@keyframes skip-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); box-shadow: 0 0 8px var(--clr-warning-bg-2xl); }
    100% { transform: scale(1); }
}

/* ── 새로 생성 (Regenerate) 버튼 ── */
.btn-regenerate {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--clr-teal-border);
    border-radius: var(--radius-pill);
    background: var(--surface-w5);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    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;
    flex-shrink: 0;
    min-width: var(--s-16);
    justify-content: center;
}
.btn-regenerate:hover {
    background: var(--surface-active);
    border-color: var(--accent);
    box-shadow: var(--glow-accent);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.btn-regenerate:active {
    transform: scale(var(--active-scale));
}
.btn-regenerate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* 새로 생성 버튼 — 로딩 상태 */
.btn-regenerate.loading {
    pointer-events: none;
    opacity: 0.7;
    border-color: var(--clr-teal-border-subtle);
}
.btn-regenerate.loading .btn-regenerate-icon {
    animation: spin-once 0.8s linear infinite;
}

/* 새로 생성 버튼 — disabled 상태 */
.btn-regenerate:disabled,
.btn-regenerate.disabled {
    pointer-events: none;
    opacity: 0.4;
    border-color: var(--clr-teal-bg-xs);
    background: transparent;
    color: var(--text-sub);
}

/* 새로 생성 버튼 — 완료 상태 */
.btn-regenerate.done {
    pointer-events: none;
    border-color: var(--clr-success-border);
    background: var(--clr-success-bg-xs);
    color: var(--clr-success-bright);
}

/* 새로 생성 버튼 아이콘 */
.btn-regenerate-icon {
    font-size: var(--text-base);
    line-height: var(--leading-none);
    flex-shrink: 0;
    transition: transform var(--smooth);
}

/* 스킵 이유 바 안의 새로 생성 버튼 (오른쪽 배치) */
.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), background var(--motion-hover), border-color 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;
}

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

/* ── 메시지 피드: 스킵 이벤트 표시 ── */
.feed-skip-event {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--clr-warning-bg-xs);
    border-radius: var(--radius);
    transition: background var(--motion-hover);
}
.feed-skip-event:hover {
    background: var(--clr-warning-bg-sm);
    transform: translateY(var(--hover-lift-sm));
}
.feed-skip-event .feed-skip-icon {
    font-size: var(--text-xl);
    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-bold);
    color: var(--clr-warning-light);
    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-sm);
    color: var(--clr-warning-light);
    transition: background var(--motion-hover);
}
.feed-skip-event .feed-skip-agent-chip:hover {
    background: var(--clr-warning-bg-md);
    transform: translateY(var(--hover-lift-sm));
}
.feed-skip-event .btn-regenerate {
    margin-top: var(--s-2);
}

/* 접기/펼치기 토글 (다중 스킵 이벤트 그룹) */
.feed-skip-group {
    border-radius: var(--radius-s);
    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(--clr-warning-bg-xs);
    cursor: pointer;
    user-select: none;
    transition: background var(--motion-hover), transform var(--motion-hover);
}
.feed-skip-group-header:hover {
    background: var(--clr-warning-bg-sm);
    transform: translateX(2px);
}
.feed-skip-group-header .feed-skip-group-arrow {
    font-size: var(--text-sm);
    color: var(--clr-warning);
    transition: transform var(--smooth);
    flex-shrink: 0;
    width: var(--s-3-5);
    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-bold);
    color: var(--clr-warning-light);
    flex: 1;
}
.feed-skip-group-header .feed-skip-group-count {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-warning);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--clr-warning-bg-sm);
}
.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;
}

/* 빈 요소 방지 */
.feed-skip-agents:empty,
.feed-skip-group-body:empty,
.output-actions:empty {
    display: none;
}

/* ── 반응형: 태블릿 완만 전환 ── */
@media (max-width: 1024px) {
    .output-card { padding: var(--s-3); }
    .job-toggle-header { font-size: var(--text-sm); }
}

@media (max-width: 960px) {
    .job-toggle-header {
        padding: var(--s-2) var(--s-3);
    }
    .agent-toggle-header {
        padding: var(--s-2) var(--s-3);
    }
}

@media (max-width: 768px) {
    .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);
    }
}

@media (max-width: 640px) {
    .skip-badge {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-1);
    }
    .btn-regenerate {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-2);
    }
    .skip-count-badge {
        font-size: var(--text-sm);
    }
    .output-file {
        gap: var(--s-2);
        padding: var(--s-2) var(--s-3);
    }
    .feed-skip-agent-chip {
        font-size: var(--text-sm);
    }
}

@media (max-width: 375px) {
    .output-group-title {
        padding: var(--s-1) var(--s-2);
        font-size: var(--text-sm);
    }
    .output-file {
        gap: var(--s-1);
        padding: var(--s-1) var(--s-2);
    }
    .output-name {
        font-size: var(--text-base);
    }
    .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);
    }
}

/* ══════════════════════════════════════════
   Job Filter Bar — 검색/필터/정렬
   ══════════════════════════════════════════ */

.job-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border-bottom: none;
    flex-wrap: wrap;
}

/* 검색 래퍼 */
.job-search-wrap {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex: 1;
    min-width: clamp(100px, 18vw, 160px);
    max-width: var(--card-min);
    background: var(--surface);
    border: none;
    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: var(--s-4-5);
    height: var(--s-4-5);
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    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(--clr-error-bg-strong);
    color: var(--clr-error-bright);
    transform: translateY(var(--hover-lift-sm));
}
.job-search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* 필터/정렬 select */
.job-filter-select {
    padding: var(--s-1) var(--s-3);
    border: none;
    border-radius: var(--radius-s);
    background-color: 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: transparent;
    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-color: var(--bg-raised);
    color: var(--text);
}

/* ── 반응형: Job Filter Bar ── */
@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);
    }
}

/* ══════════════════════════════════════════
   Inline Style Migration: Outputs Panel
   ══════════════════════════════════════════ */

/* 에이전트 필터 select */
.outputs-agent-select {
    padding: var(--s-1) var(--s-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background-color: var(--bg-raised);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    font-family: var(--font);
    outline: none;
    max-width: clamp(100px, 18vw, 160px);
}

/* Google Drive 동기화 바 */
.gdrive-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--clr-gdrive-bg);
    border-bottom: none;
    font-size: var(--text-sm);
}

/* Google Drive 레이블 */
.gdrive-label {
    color: var(--clr-gdrive-blue);
    font-weight: var(--weight-semibold);
}

/* Google Drive 상태 텍스트 */
.gdrive-status-text {
    color: var(--text-sub);
}

/* 출력물 본문 스크롤 영역 */
.outputs-body-scroll {
    max-height: 700px;
}

/* ══════════════════════════════════════════
   Work Projects — 프로젝트 보드 뷰
   ══════════════════════════════════════════ */

/* 뷰 전환 바 */
.wp-view-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border-bottom: none;
}
.wp-view-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    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-semibold);
    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);
}
.wp-view-btn:hover {
    background: var(--surface-hover);
    border-color: transparent;
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.wp-view-btn.active {
    background: var(--surface-active);
    border-color: var(--line-bold);
    color: var(--text);
}
.wp-view-spacer { flex: 1; }

/* 프로젝트 카드 그리드 */
.wp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s-4);
    padding: var(--s-4);
}

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

/* 카드 헤더 */
.wp-card-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.wp-card-title {
    flex: 1;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.wp-card-status {
    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);
    white-space: nowrap;
    flex-shrink: 0;
}
.wp-card-status[data-status="active"] {
    background: var(--clr-info-bg);
    color: var(--clr-info-bright);
    border: 1px solid var(--clr-info-border);
}
.wp-card-status[data-status="completed"] {
    background: var(--clr-success-bg);
    color: var(--clr-success-bright);
    border: 1px solid var(--clr-success-border);
}
.wp-card-status[data-status="paused"] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
    border: 1px solid var(--clr-warning-border);
}
.wp-card-status[data-status="archived"] {
    background: var(--surface);
    color: var(--text-sub);
    border: none;
}
.wp-card-status[data-status="error"] {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
}

/* 카드 메트릭 라인 */
.wp-card-meta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-3);
}

/* 프로그레스 바 */
.wp-progress {
    height: var(--s-1);
    background: var(--surface);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: var(--s-3);
}
.wp-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-pill);
    transition: width var(--duration-moderate) ease;
}
.wp-progress-fill[data-status="completed"] {
    background: var(--clr-success);
}

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

/* 최근 작업 미리보기 */
.wp-card-jobs {
    border-top: none;
    padding-top: var(--s-3);
}
.wp-card-job-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) 0;
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.wp-card-job-dot {
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--text-sub);
    flex-shrink: 0;
}
.wp-card-job-dot.running {
    background: var(--clr-info);
    animation: pulse 1.5s infinite;
}
.wp-card-job-dot.complete {
    background: var(--clr-success);
}
.wp-card-job-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 카드 하단 액션 */
.wp-card-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: none;
}

/* 마지막 활동 */
.wp-card-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* 빈 상태 — components.css .wp-empty 로 통합됨 */

/* ── 프로젝트 상세 Drawer ── */
.wp-detail-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    max-width: 720px;
    height: 100vh;
    background: var(--bg);
    border-left: none;
    z-index: calc(var(--z-modal) + 1);
    transform: translateX(100%);
    transition: transform var(--duration-base) ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wp-detail-drawer.open {
    transform: translateX(0);
}
.wp-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay);
    z-index: calc(calc(var(--z-modal) + 1) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) ease;
}
.wp-detail-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Drawer 헤더 */
.wp-detail-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: none;
    flex-shrink: 0;
}
.wp-detail-back {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-base);
    cursor: pointer;
    padding: var(--s-1);
    transition: color var(--motion-hover);
    font-family: var(--font);
}
.wp-detail-back:hover { color: var(--text); transform: translateX(-2px); }
.wp-detail-title {
    flex: 1;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.wp-detail-close {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-lg);
    cursor: pointer;
    padding: var(--s-1);
    transition: color var(--motion-hover);
    line-height: var(--leading-none);
}
.wp-detail-close:hover { color: var(--text); transform: scale(var(--hover-scale)); }

/* Drawer 탭 */
.wp-detail-tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--s-5);
    border-bottom: none;
    flex-shrink: 0;
}
.wp-detail-tab {
    padding: var(--s-3) 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;
    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);
}
.wp-detail-tab:hover { color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); }
.wp-detail-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Drawer 바디 */
.wp-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4) var(--s-5);
}

/* 타임라인 */
.wp-timeline {
    position: relative;
    padding-left: var(--s-5);
}
.wp-timeline::before {
    content: '';
    position: absolute;
    left: var(--s-2);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line);
}
.wp-timeline-item {
    position: relative;
    padding-bottom: var(--s-5);
}
.wp-timeline-item:last-child { padding-bottom: 0; }
.wp-timeline-dot {
    position: absolute;
    left: calc(-1 * var(--s-5) + 4px);
    top: var(--s-1);
    width: var(--s-3);
    height: var(--s-3);
    border-radius: 50%;
    background: var(--surface-hover);
    border: none;
}
.wp-timeline-dot.created { background: var(--accent); border-color: var(--accent); }
.wp-timeline-dot.running { background: var(--clr-info); border-color: var(--clr-info); animation: pulse 1.5s infinite; }
.wp-timeline-dot.complete { background: var(--clr-success); border-color: var(--clr-success); }
.wp-timeline-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}
.wp-timeline-content {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: var(--leading-normal);
}
.wp-timeline-agents {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-top: var(--s-1);
}
.wp-timeline-agent {
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    background: var(--surface);
    color: var(--text-sub);
}

/* ── Command 탭 프로젝트 컨텍스트 바 ── */
.wp-cmd-context {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--surface);
    border-bottom: none;
    font-size: var(--text-sm);
    color: var(--text-sub);
    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);
}
.wp-cmd-context:empty { display: none; }
.wp-cmd-context svg { width: var(--s-3-5); height: var(--s-3-5); flex-shrink: 0; }
.wp-cmd-project-name {
    font-weight: var(--weight-semibold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--card-min-sm);
}
.wp-cmd-info {
    color: var(--text-sub);
    font-size: var(--text-sm);
}

/* ── 시스템 메시지: 프로젝트 피드백 ── */
.wp-feedback-msg {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: var(--s-2);
    animation: wp-slide-in var(--motion-hover);
}
.wp-feedback-msg .wp-feedback-icon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--text-sub); }
.wp-feedback-msg .wp-feedback-icon svg { width: var(--s-4); height: var(--s-4); }
.wp-feedback-msg .wp-feedback-text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text);
    line-height: var(--leading-normal);
}
.wp-feedback-msg .wp-feedback-project {
    font-weight: var(--weight-bold);
    color: var(--text);
}
@keyframes wp-slide-in {
    from { opacity: 0; transform: translateY(var(--s-2)); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── 반응형 ── */
@media (max-width: 960px) {
    .wp-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--s-3);
        padding: var(--s-3);
    }
    .wp-detail-drawer {
        width: 75%;
    }
}
@media (max-width: 768px) {
    .wp-grid {
        grid-template-columns: 1fr;
        gap: var(--s-3);
        padding: var(--s-3);
    }
    .wp-detail-drawer {
        width: 100%;
        max-width: none;
    }
    .wp-card {
        padding: var(--s-4);
    }
    .wp-card-tags { display: none; }
}
@media (max-width: 640px) {
    .wp-card {
        padding: var(--s-3);
    }
    .wp-card-jobs { display: none; }
    .wp-card-title { font-size: var(--text-sm); }
    .wp-detail-head {
        padding: var(--s-3) var(--s-4);
    }
    .wp-detail-body {
        padding: var(--s-3) var(--s-4);
    }
}
@media (max-width: 375px) {
    .wp-grid { padding: var(--s-2); gap: var(--s-2); }
    .wp-view-bar { padding: var(--s-1) var(--s-3); }
}

/* ══════════════════════════════════════════
   Job 연결 선택 바 — 커스텀 드롭다운 + Sticky Mode
   ══════════════════════════════════════════ */

.job-link-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-4);
    background: transparent;
    border-bottom: none;
    font-size: var(--text-sm);
    color: var(--text-sub);
    position: relative;
    transition: background var(--motion-hover), border-color var(--motion-hover);
}

/* ── Job Link Bar 3-Group 레이아웃 ── */
.jlb-scale-group,
.jlb-project-group,
.jlb-deploy-group {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.jlb-project-group {
    flex: 0 1 auto;
    min-width: 0;
}
.jlb-deploy-group {
    flex-shrink: 0;
}
.job-link-bar.linked {
    background: var(--surface);
    border-bottom-color: var(--line);
}

/* ── 상태 표시 (indicator) ── */
.job-link-indicator {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--text-sm);
    color: var(--text-sub);
    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;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--layout-lg);
}
.job-link-indicator.linked {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--clr-teal-border-subtle);
}
.job-link-icon {
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* ── 토글/변경 버튼 ── */
.job-link-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-sub);
    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);
    white-space: nowrap;
}
.job-link-toggle:hover {
    border-color: var(--line-bold);
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.job-link-toggle svg { flex-shrink: 0; }
.job-link-toggle-label { }

/* ── 연결 해제 버튼 ── */
.job-link-disconnect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-0);
    height: var(--s-5-0);
    border: none;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    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;
}
.job-link-disconnect:hover {
    border-color: var(--clr-error);
    color: var(--clr-error);
    background: var(--clr-error-bg);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 배포 버튼 (job-link-bar 우측 통합) ── */
.job-bar-deploy-test,
.job-bar-deploy-prod {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-sub);
    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);
    white-space: nowrap;
    flex-shrink: 0;
}
.job-bar-deploy-test { margin-left: 0; }
.job-bar-deploy-test:hover,
.job-bar-deploy-prod:hover {
    border-color: var(--text-sub);
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.job-bar-deploy-test.deploying,
.job-bar-deploy-prod.deploying {
    opacity: 0.7;
    pointer-events: none;
    border-color: var(--clr-warning-border, var(--border));
    color: var(--clr-warning, var(--text-sub));
}
/* 테스트 배포 미지원 프로젝트 — 비활성 스타일 */
.job-bar-deploy-test.deploy-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.job-bar-deploy-icon {
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.job-bar-deploy-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* ══════════════════════════════════════════
   Job Picker 커스텀 드롭다운
   ══════════════════════════════════════════ */
.job-picker-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--elevation-md);
    z-index: var(--z-dropdown);
    overflow: hidden;
    flex-direction: column;
    animation: jobPickerSlideIn var(--motion-hover);
}
.job-picker-dropdown.open {
    display: flex;
}
@keyframes jobPickerSlideIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.job-picker-header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
}
.job-picker-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}
.job-picker-search {
    flex: 1;
    background: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-2);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
    transition: border-color var(--motion-hover);
}
.job-picker-search:focus {
    border-color: var(--accent);
}
.job-picker-search::placeholder {
    color: var(--text-sub);
}

.job-picker-options {
    overflow-y: auto;
    max-height: var(--card-min);
}

.job-picker-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    cursor: pointer;
    transition: background var(--motion-hover), transform var(--motion-hover);
}
.job-picker-item:hover {
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}
.job-picker-item.active {
    background: var(--surface-active);
}
.job-picker-item-icon {
    width: var(--s-5-0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-sm);
}
.job-picker-item-content {
    flex: 1;
    min-width: 0;
}
.job-picker-item-title {
    display: block;
    font-size: var(--text-sm);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.job-picker-item-desc,
.job-picker-item-meta {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}
.job-picker-item-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface-hover);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.job-picker-empty {
    padding: var(--s-5);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ── Status Dot (Job Picker 내) ── */
.job-status-dot {
    display: inline-block;
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    background: var(--text-sub);
    /* 상태 전환 보간 — running↔complete 스프링 전환 */
    transition: background var(--duration-moderate) var(--easing-spring),
                box-shadow var(--duration-moderate) var(--easing-out);
}
.job-status-dot.running {
    background: var(--accent);
    animation: pulse 1.5s infinite;
}
.job-status-dot.complete {
    background: var(--clr-success);
}

/* ══════════════════════════════════════════
   연속 명령 추천 바 (Suggestion Bar)
   ══════════════════════════════════════════ */
.job-suggest-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-4);
    background: var(--surface);
    font-size: var(--text-sm);
    animation: suggestSlideIn var(--smooth);
}
@keyframes suggestSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.job-suggest-icon {
    flex-shrink: 0;
    font-size: var(--text-sm);
}
.job-suggest-text {
    flex: 1;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.job-suggest-buttons {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
}
.job-suggest-accept {
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    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);
}
.job-suggest-accept:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    transform: translateY(var(--hover-lift-sm));
}
.job-suggest-dismiss {
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-sub);
    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);
}
.job-suggest-dismiss:hover {
    border-color: var(--text-sub);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* ══════════════════════════════════════════
   Job 카드 하단 영역 (기존 유지)
   ══════════════════════════════════════════ */
.wp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}
.wp-card-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    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;
    flex-shrink: 0;
    opacity: 0;
}
.wp-card:hover .wp-card-link-btn {
    opacity: 1;
    transform: translateY(var(--hover-lift-sm));
}
.wp-card-link-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 반응형: Job 연결 바 + 커스텀 드롭다운 ── */
@media (max-width: 768px) {
    .job-link-bar {
        padding: var(--s-1) var(--s-3);
        gap: var(--s-1);
    }
    .jlb-scale-group,
    .jlb-deploy-group { gap: var(--s-1); }
    .job-picker-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 50vh;
        border-radius: var(--radius) var(--radius) 0 0;
        z-index: var(--z-modal);
    }
    .wp-card-link-btn {
        opacity: 1;
    }
    .job-suggest-bar {
        flex-wrap: wrap;
    }
}
@media (max-width: 640px) {
    .job-bar-deploy-label {
        display: none;
    }
    .job-suggest-text {
        font-size: var(--text-sm);
    }
}

/* ══════════════════════════════════════════
   Topbar Job 칩 — Job 그룹 카운트 뱃지
   ══════════════════════════════════════════ */
.topbar-job-chip-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);
    background: var(--accent);
    color: var(--bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    margin-left: var(--s-1);
}

/* ══════════════════════════════════════════
   ZIP 이미지 뷰어 — 개별 PNG 저장
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   ZIP 캐러셀 뷰어 (카드뉴스 미리보기)
   ══════════════════════════════════════════ */
.zip-viewer-overlay {
    position: fixed; inset: 0; z-index: calc(var(--z-toast) + 1);
    background: var(--bg);
    display: flex; flex-direction: column;
    animation: zipFadeIn var(--duration-base) var(--easing-smooth);
}
@keyframes zipFadeIn { from { opacity: 0; } to { opacity: 1; } }
.zip-viewer {
    display: flex; flex-direction: column;
    height: 100%; width: 100%;
    overflow: hidden;
}
.zip-viewer-header {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    background: var(--bg-raised);
    border-bottom: none;
    flex-shrink: 0;
}
.zip-viewer-title {
    flex: 1; font-weight: var(--weight-bold); font-size: var(--text-reading);
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zip-viewer-count {
    font-size: var(--text-sm); color: var(--text-sub);
    white-space: nowrap;
}
.zip-viewer-close {
    width: var(--s-7); height: var(--s-7);
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-hover); border: none; border-radius: var(--radius-s);
    color: var(--text-sub); font-size: var(--text-lg);
    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);
}
.zip-viewer-close:hover {
    background: var(--surface-hover); color: var(--text); transform: scale(var(--hover-scale));
}

/* 캐러셀 영역 — 트랙 기반 (겹치지 않는 좌우 슬라이드) */
.zip-carousel-wrap {
    flex: 1; position: relative; overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    container-type: inline-size;
    container-name: zipcarousel;
}
.zip-carousel-track {
    display: flex;
    height: 100%;
    transition: transform var(--duration-moderate) var(--easing-out);
    will-change: transform;
}
.zip-carousel-track.no-transition { transition: none; }
.zip-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--s-4) var(--s-10);
    position: relative;
    box-sizing: border-box;
}
.zip-carousel-slide img {
    display: block;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    border-radius: var(--radius-s);
    pointer-events: none;
}
/* 개별 이미지 로딩 스피너 */
.zip-slide-loading {
    display: flex; align-items: center; justify-content: center;
    width: 100%; flex: 1;
}
/* 개별 이미지 로드 실패 */
.zip-slide-error {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
    color: var(--text-sub); font-size: var(--text-sm);
    padding: var(--s-4);
}
.zip-slide-error svg { opacity: 0.4; }

/* 이미지 라벨 (표지/본문 구분 — 슬라이드 하단) */
.zip-carousel-label {
    display: flex; align-items: center; gap: var(--s-2);
    margin-top: var(--s-2);
    padding: var(--s-1) var(--s-3);
    background: var(--surface-hover);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); color: var(--text-sub);
}
.zip-carousel-label-badge {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
}
.zip-carousel-label-badge.cover {
    background: var(--clr-warning-bg-lg); color: var(--clr-warning-light);
}
.zip-carousel-label-badge.content {
    background: var(--surface-w8); color: var(--accent);
}

/* 좌우 네비게이션 */
.zip-carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: var(--s-8); height: var(--s-8);
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-hover); border: 1px solid var(--surface-w10);
    border-radius: 50%; color: var(--text-sub); font-size: var(--text-4xl);
    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); z-index: 3;
}
.zip-carousel-nav:hover {
    background: var(--surface-w15); color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.zip-carousel-nav:active { transform: translateY(-50%) scale(0.93); }
.zip-carousel-nav[disabled] { opacity: 0; pointer-events: none; }
.zip-carousel-prev { left: var(--s-3); }
.zip-carousel-next { right: var(--s-3); }

/* 하단 컨트롤 바 */
.zip-viewer-footer {
    display: flex; align-items: center;
    padding: var(--s-3) var(--s-5);
    background: var(--bg-raised);
    border-top: none;
    flex-shrink: 0;
    gap: var(--s-3);
}

/* 섹션 정보 표시 (좌측 — 표지/본문 구분) */
.zip-carousel-section-info {
    display: flex; align-items: center; gap: var(--s-1);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    white-space: nowrap; flex-shrink: 0;
}
.zip-carousel-section-info .section-badge {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.zip-carousel-section-info .section-badge.cover {
    background: var(--clr-warning-bg-lg); color: var(--clr-warning-light);
}
.zip-carousel-section-info .section-badge.content {
    background: var(--surface-w8); color: var(--accent);
}

/* 페이지 카운터 */
.zip-carousel-counter {
    font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.zip-carousel-counter span { color: var(--text-sub); font-weight: var(--weight-normal); }

/* 인디케이터 도트 (중앙) */
.zip-carousel-dots {
    display: flex; align-items: center; gap: var(--s-1);
    overflow-x: auto; max-width: 30%;
    padding: var(--s-1) 0;
    scrollbar-width: none;
    flex: 1;
    justify-content: center;
}
.zip-carousel-dots::-webkit-scrollbar { display: none; }
.zip-carousel-dot {
    width: var(--s-2); height: var(--s-2); border-radius: 50%;
    background: var(--surface-hover); flex-shrink: 0;
    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);
}
.zip-carousel-dot:hover { transform: scale(var(--scale-pop-sm)); }
.zip-carousel-dot.active {
    background: var(--accent); width: 20px; border-radius: var(--radius-s);
}
.zip-carousel-dot.cover-dot { border: 1.5px solid var(--clr-warning-border); }
.zip-carousel-dot.cover-dot.active { background: var(--clr-warning-light); }
/* 표지↔본문 구분 세퍼레이터 */
.zip-carousel-dot-sep {
    width: 1px; height: 14px; background: var(--line-strong);
    flex-shrink: 0;
}

/* 하단 우측 버튼 그룹 */
.zip-viewer-footer-actions {
    display: flex; align-items: center; gap: var(--s-2);
    flex-shrink: 0;
    margin-left: auto;
}

/* 개별 이미지 저장 버튼 */
.zip-carousel-save-btn {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    background: var(--surface-w8); border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    color: var(--text-sub); 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);
    font-family: var(--font); white-space: nowrap;
}
.zip-carousel-save-btn:hover {
    background: var(--accent); color: var(--accent-on); border-color: var(--accent); transform: translateY(var(--hover-lift-sm));
}
.zip-carousel-save-btn svg { flex-shrink: 0; }

/* 일괄 저장 버튼 */
.zip-viewer-save-all-btn {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-4);
    background: var(--accent); color: var(--accent-on);
    border: none; border-radius: var(--radius-s);
    font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer;
    transition: opacity var(--motion-hover);
    font-family: var(--font); white-space: nowrap;
}
.zip-viewer-save-all-btn:active { opacity: 0.8; }
.zip-viewer-save-all-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ZIP→PDF 내보내기 버튼 */
.zip-export-pdf-btn {
    background: var(--clr-purple-bg-lg); color: var(--clr-purple-light);
}
.zip-export-pdf-btn:hover { background: var(--clr-purple-bg-xl); transform: translateY(var(--hover-lift-sm)); }
.zip-export-pdf-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 딥링크 공유 버튼 */
.zip-viewer-share-btn {
    display: flex; align-items: center; justify-content: center;
    width: var(--s-6); height: var(--s-6);
    background: var(--surface-hover); border: none; border-radius: var(--radius-s);
    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); flex-shrink: 0;
}
.zip-viewer-share-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }

/* 로딩/에러 상태 */
.zip-viewer-loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-3);
    color: var(--text-sub); font-size: var(--text-base);
    z-index: 2;
}
.zip-viewer-spinner {
    width: var(--s-6); height: var(--s-6);
    border: 3px solid var(--surface-hover);
    border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.7s linear infinite;
}
.zip-viewer-error,
.zip-viewer-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-2);
    color: var(--text-sub); font-size: var(--text-base);
}

/* 저장 진행 상황 표시 */
.zip-save-progress {
    position: fixed; bottom: var(--s-5);
    left: 50%; transform: translateX(-50%);
    width: var(--layout-xl); max-width: calc(100vw - 32px);
    background: var(--bg-raised); border: none;
    border-radius: var(--radius);
    padding: var(--s-4);
    z-index: calc(var(--z-toast) + 2); box-shadow: var(--shadow-overlay-popover);
    animation: zipFadeIn var(--motion-hover);
}
.zip-save-progress-text {
    font-size: var(--text-base); color: var(--text-sub);
    margin-bottom: var(--s-2);
    text-align: center;
}
.zip-save-progress-bar {
    height: 6px; background: var(--surface);
    border-radius: var(--radius-s); overflow: hidden;
}
.zip-save-progress-fill {
    height: 100%; background: var(--accent);
    border-radius: var(--radius-s); transition: width var(--smooth);
}

/* iOS 사진첩 저장 가이드 배너 (모바일) */
.ios-save-guide {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10002;
    padding: var(--s-2) var(--s-4);
    padding-top: max(var(--s-2), calc(env(safe-area-inset-top) + 6px));
    background: var(--gradient-accent);
    backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
    box-shadow: var(--shadow-lg);
    animation: iosGuideFadeIn 0.25s var(--easing-smooth);
}
@keyframes iosGuideFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iosGuideFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
.ios-save-guide-content {
    display: flex; align-items: center; gap: var(--s-2);
}
.ios-save-guide-icon { font-size: var(--text-xl); flex-shrink: 0; }
.ios-save-guide-text {
    flex: 1; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent-on); line-height: var(--leading-normal);
}
.ios-save-guide-dismiss {
    background: rgba(0,0,0,0.12); border: none; border-radius: var(--radius-pill);
    padding: var(--s-1) var(--s-2); font-size: var(--text-sm); color: var(--overlay);
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
}

/* ── 반응형: ZIP 캐러셀 ── */
@media (max-width: 768px) {
    .zip-carousel-nav { width: 40px; height: 40px; font-size: var(--text-xl); }
    .zip-carousel-prev { left: var(--s-2); }
    .zip-carousel-next { right: var(--s-2); }
    .zip-carousel-slide { padding: var(--s-3) var(--s-8); }
    .zip-viewer-header { padding: var(--s-3) var(--s-4); }
    .zip-viewer-footer { padding: var(--s-3) var(--s-4); gap: var(--s-2); }
    .zip-carousel-dots { max-width: 25%; }
    .zip-save-progress { width: calc(100vw - var(--s-6)); }
    .zip-carousel-section-info { min-width: var(--s-9-5); }
}
@media (max-width: 640px) {
    .zip-carousel-nav { width: 36px; height: 36px; font-size: var(--text-lg); }
    .zip-carousel-prev { left: var(--s-1); }
    .zip-carousel-next { right: var(--s-1); }
    .zip-carousel-slide { padding: var(--s-2) var(--s-6); }
    .zip-viewer-title { font-size: var(--text-base); }
    .zip-viewer-save-all-btn { font-size: var(--text-sm); padding: var(--s-2) var(--s-3); }
    .zip-carousel-save-btn { font-size: var(--text-sm); padding: var(--s-1) var(--s-2); }
    .zip-carousel-counter { font-size: var(--text-sm); }
    .zip-carousel-dots { gap: var(--s-1); }
    .zip-carousel-dot { width: var(--s-1-5); height: var(--s-1-5); }
    .zip-carousel-dot.active { width: var(--s-4); }
    .zip-carousel-section-info { font-size: var(--text-sm); }
    .zip-carousel-section-info .section-badge { font-size: var(--text-sm); }
    .zip-viewer-footer { flex-wrap: wrap; }
}
@media (max-width: 375px) {
    .zip-carousel-slide { padding: var(--s-1) var(--s-6); }
    .zip-carousel-save-btn span { display: none; }
    .zip-viewer-footer-actions { gap: var(--s-1); }
}

/* D4: @container zipcarousel — 카드뉴스 캐러셀 반응형 */
@container zipcarousel (max-width: 480px) {
    .zip-carousel-slide { padding: var(--s-2) var(--s-6); }
    .zip-carousel-nav { width: 36px; height: 36px; font-size: var(--text-lg); }
    .zip-carousel-prev { left: var(--s-1); }
    .zip-carousel-next { right: var(--s-1); }
}
@container zipcarousel (max-width: 360px) {
    .zip-carousel-slide { padding: var(--s-1) var(--s-4); }
    .zip-carousel-label { font-size: var(--text-sm); padding: var(--s-1) var(--s-2); }
}

/* ══════════════════════════════════════════
   Job Drawer — Job 컨텍스트 네비게이션
   ══════════════════════════════════════════ */
.sd-job-context {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-4);
    background: var(--surface);
    flex-shrink: 0;
}
.sd-job-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    flex-shrink: 0;
}
.sd-job-title {
    font-size: var(--text-sm);
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: var(--tracking-normal);
}
.sd-job-nav {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-shrink: 0;
}
.sd-job-nav-btn {
    background: var(--surface-hover);
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-sub);
    padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm);
    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);
    font-family: var(--font);
}
.sd-job-nav-btn:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.sd-job-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.sd-job-nav-pos {
    font-size: var(--text-sm);
    color: var(--text-sub);
    min-width: var(--s-5-5);
    text-align: center;
}

/* ══════════════════════════════════════════ */
/* ZIP 뷰어 — ZIP 다운로드 버튼 */
/* ══════════════════════════════════════════ */
.zip-viewer-zip-download-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-4);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    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);
}
.zip-viewer-zip-download-btn:hover {
    background: var(--surface-active);
    color: var(--text);
    border-color: var(--line-bold);
    transform: translateY(var(--hover-lift-sm));
}

/* ══════════════════════════════════════════ */
/* 에디터블 출력물 뷰어 */
/* ══════════════════════════════════════════ */
.output-editor-overlay {
    position: fixed; inset: 0; z-index: calc(var(--z-toast) + 1);
    height: 100%; height: 100dvh; /* dvh 폴백 — 모바일 주소창 높이 보정 */
    background: var(--bg);
    display: flex; flex-direction: column;
    overflow: hidden; /* 오버플로 방지 — 내부 flex로만 레이아웃 */
    animation: zipFadeIn var(--duration-base) var(--easing-smooth);
}
.output-editor {
    display: flex; flex-direction: column;
    flex: 1; width: 100%;
    min-height: 0; /* flex 아이템 축소 보장 — 하단 잘림 방지 */
    overflow: hidden;
}
.output-editor-header {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--bg-raised);
    flex-shrink: 0;
}
.output-editor-title {
    font-weight: var(--weight-bold); font-size: var(--text-base);
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.output-editor-toolbar {
    display: flex; align-items: center; gap: var(--s-1);
    flex: 1;
    justify-content: flex-end;
}
.oe-toolbar-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    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);
    white-space: nowrap;
}
.oe-toolbar-btn:hover {
    background: var(--surface-active);
    color: var(--text);
    border-color: var(--line-strong);
    transform: translateY(var(--hover-lift-sm));
}
.oe-toolbar-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.oe-toolbar-btn.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.oe-save-btn {
    background: var(--clr-success-bg);
    color: var(--clr-success);
    border-color: var(--clr-success-border);
}
.oe-save-btn:hover {
    background: var(--clr-success);
    color: var(--bg);
    transform: translateY(var(--hover-lift-sm));
}
.oe-download-all-btn {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    font-weight: var(--weight-bold);
}
.oe-download-all-btn:hover {
    background: var(--accent-deep, var(--accent));
    color: var(--bg);
    border-color: var(--accent-deep, var(--accent));
    transform: translateY(var(--hover-lift-sm));
}
.oe-download-all-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.oe-color-btn {
    position: relative;
    cursor: pointer;
}
.oe-cardnews-tools {
    display: flex; align-items: center; gap: var(--s-1);
    padding-left: var(--s-1);
    margin-left: var(--s-2);
}
.oe-export-tools {
    display: flex; align-items: center; gap: var(--s-1);
    padding-left: var(--s-1);
    margin-left: var(--s-2);
}
.oe-export-png-btn { color: var(--accent); }
.oe-export-png-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translateY(var(--hover-lift-sm)); }
.oe-export-pdf-btn { color: var(--red); }
.oe-export-pdf-btn:hover { background: var(--red); color: var(--bg); border-color: var(--red); transform: translateY(var(--hover-lift-sm)); }
.oe-export-png-btn:disabled,
.oe-export-pdf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* PDF 뷰어 모드 */
.output-editor.pdf-mode .output-editor-iframe {
    background: var(--bg-raised);
}
.output-editor-close {
    width: var(--s-7); height: var(--s-7);
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-hover); border: none; border-radius: var(--radius-s);
    color: var(--text-sub); font-size: var(--text-lg);
    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);
}
.output-editor-close:hover {
    background: var(--surface-active); color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.output-editor-body {
    flex: 1 1 0%; position: relative; overflow: hidden;
    min-height: 0; /* flex 아이템 축소 보장 — 하단 잘림 방지 */
    background: var(--bg);
}
.output-editor-loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-2);
    background: var(--bg);
    color: var(--text-sub);
    font-size: var(--text-base);
    z-index: 2;
}
/* 에러 상태 — 로딩 영역에 표시 */
.oe-error-state {
    color: var(--text-sub);
    text-align: center;
    padding: var(--s-4);
}
.oe-error-icon {
    font-size: var(--text-xl);
    margin-bottom: var(--s-2);
}
.oe-error-msg {
    margin-bottom: var(--s-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    word-break: break-word;
}
.oe-error-retry {
    background: var(--accent);
    color: var(--accent-on);
    border: none;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: opacity var(--motion-hover);
}
.oe-error-retry:hover {
    opacity: 0.85;
    transform: translateY(var(--hover-lift-sm));
}
.output-editor-iframe {
    position: absolute; inset: 0; /* absolute로 부모 채움 — flex 높이 해상도 문제 회피 */
    width: 100%; height: 100%;
    border: none;
    background: white;
}
/* 줌 컨트롤 */
.oe-zoom-controls {
    display: flex; align-items: center; gap: var(--s-1);
    padding-left: var(--s-1);
    margin-left: var(--s-2);
}
.oe-zoom-level {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub);
    min-width: var(--s-7-5); text-align: center; user-select: none;
    font-variant-numeric: tabular-nums;
    transition: color var(--duration-base) ease;
}
.oe-zoom-level:hover { color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.oe-zoom-btn { padding: var(--s-1) !important; min-width: unset !important; }
/* 편집 모드 표시 */
.output-editor.editing .output-editor-body {
    border: 2px solid var(--accent);
    border-radius: var(--radius-s);
    margin: var(--s-1);
}
.output-editor.editing .oe-edit-toggle {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
/* 편집 중 수정된 텍스트 하이라이트 */
.output-editor.dirty .output-editor-title::after {
    content: ' (수정됨)';
    color: var(--clr-warning);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
}
/* 리치 텍스트 툴바 */
.oe-rich-tools {
    display: flex; align-items: center; gap: var(--s-1);
    padding-left: var(--s-1);
    margin-left: var(--s-2);
}
.oe-fmt-btn {
    min-width: var(--s-5-5);
    justify-content: center;
    padding: var(--s-1) var(--s-1);
    font-family: var(--font);
}
.oe-font-size-select {
    padding: var(--s-1) var(--s-1);
    background-color: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    outline: none;
}
.oe-font-size-select:hover {
    border-color: var(--line-strong);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.oe-font-size-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.oe-fmt-color {
    position: relative;
    cursor: pointer;
}
/* 복사 버튼 */
.oe-copy-html-btn { color: var(--text-sub); }
.oe-copy-html-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }
/* HTML/MD 다운로드 버튼 */
.oe-export-html-btn { color: var(--teal); }
.oe-export-html-btn:hover { background: var(--teal); color: var(--bg); border-color: var(--teal); transform: translateY(var(--hover-lift-sm)); }
.oe-export-md-btn { color: var(--text-sub); }
.oe-export-md-btn:hover { background: var(--surface-active); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
/* MD 모드 — textarea 전체 표시 */
.output-editor-textarea {
    position: absolute; inset: 0; /* absolute로 부모 채움 — 하단 잘림 방지 */
    width: 100%; height: 100%;
    background: var(--bg-raised);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    border: none;
    resize: none;
    padding: var(--s-5);
    outline: none;
    tab-size: 4;
}
.output-editor.md-mode .output-editor-body {
    background: var(--bg-raised);
}

/* ── 다크/라이트 배경 모드 ── */
.output-editor.dark-bg .output-editor-body {
    background: var(--bg-raised);
}
.output-editor.dark-bg .output-editor-iframe {
    background: var(--bg-raised);
}
.output-editor.light-bg .output-editor-body {
    background: #fff; /* 라이트 모드 — 의도적 하드코딩 (콘텐츠 미리보기용) */
}
.output-editor.light-bg .output-editor-iframe {
    background: #fff; /* 라이트 모드 — 의도적 하드코딩 (콘텐츠 미리보기용) */
}

/* ── HSL 색감 조절 패널 ── */
.oe-hsl-tools {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    position: relative;
    padding-left: var(--s-1);
    margin-left: var(--s-2);
}
.oe-hsl-toggle.active {
    background: var(--surface-active);
    color: var(--text);
    border-color: var(--line-bold);
}
.oe-hsl-panel {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s-3);
    min-width: var(--card-min);
    z-index: 10;
    box-shadow: var(--shadow-lg);
    margin-top: var(--s-1);
}
.oe-hsl-row {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
}
.oe-hsl-row:last-of-type {
    margin-bottom: var(--s-1);
}
.oe-hsl-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    min-width: var(--s-5-5);
    flex-shrink: 0;
}
.oe-hsl-slider {
    flex: 1;
    height: var(--s-1-5);
    border-radius: var(--radius-s);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-hover);
    outline: none;
}
.oe-hsl-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--s-4);
    height: var(--s-4);
    border-radius: 50%;
    background: white;
    border: 2px solid var(--accent);
    cursor: pointer;
    box-shadow: var(--shadow);
}
.oe-hsl-slider::-moz-range-thumb {
    width: var(--s-4);
    height: var(--s-4);
    border-radius: 50%;
    background: white;
    border: 2px solid var(--accent);
    cursor: pointer;
    box-shadow: var(--shadow);
}
/* 키보드 포커스 — 접근성 */
.oe-hsl-slider:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}
/* 색조 슬라이더 — 무지개 그라디언트 */
#oe-hsl-hue {
    background: linear-gradient(to right,
        hsl(0, 80%, 50%), hsl(60, 80%, 50%), hsl(120, 80%, 50%),
        hsl(180, 80%, 50%), hsl(240, 80%, 50%), hsl(300, 80%, 50%), hsl(360, 80%, 50%));
}
.oe-hsl-value {
    font-size: var(--text-sm);
    color: var(--text-sub);
    min-width: var(--s-5-5);
    text-align: right;
    font-family: var(--font-mono);
}
.oe-hsl-preview-row {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-top: var(--s-1);
    padding-top: var(--s-1);
    border-top: 1px solid var(--border);
}
.oe-hsl-preview {
    width: var(--s-5);
    height: var(--s-5);
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.oe-hsl-hex {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
}
.oe-bg-toggle.active {
    background: var(--surface-active);
    color: var(--text);
    border-color: var(--line-bold);
}

/* 색상 팔레트 패널 */
.oe-palette-section {
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--line-bold);
}
.oe-palette-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
    letter-spacing: var(--tracking-wide);
}
.oe-palette-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    align-items: center;
}
.oe-palette-swatch {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    border-radius: var(--radius-s);
    overflow: hidden;
    transition: box-shadow var(--motion-hover), transform var(--motion-hover);
}
.oe-palette-swatch:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-ring-accent-solid);
    z-index: 1;
}
.oe-palette-swatch.overridden {
    box-shadow: var(--shadow-ring-accent-deep);
}
.oe-palette-swatch input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}
.oe-swatch-color {
    display: block;
    width: var(--s-5-0);
    height: var(--s-5-0);
    border-radius: var(--radius-s);
    border: 1px solid var(--line-strong);
}
.oe-palette-empty {
    font-size: var(--text-sm);
    color: var(--text-sub);
    padding: var(--s-1) 0;
}
.oe-palette-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-0);
    height: var(--s-5-0);
    border: none;
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background var(--motion-hover), color var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    padding: 0;
    line-height: var(--leading-none);
}
.oe-palette-reset:hover {
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: var(--shadow-soft);
    transform: translateY(var(--hover-lift-sm));
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .output-editor-header {
        padding: var(--s-1) var(--s-2);
        flex-wrap: wrap;
        gap: var(--s-1);
    }
    .output-editor-toolbar {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }
    .oe-toolbar-btn span {
        display: none;
    }
    .oe-toolbar-btn {
        padding: var(--s-1);
    }
    .oe-cardnews-tools,
    .oe-export-tools,
    .oe-rich-tools,
    .oe-hsl-tools {
        padding-left: 0;
        margin-left: 0;
    }
    .oe-font-size-select {
        max-width: var(--s-9-5);
    }
    .oe-hsl-panel {
        right: auto;
        left: 0;
        min-width: var(--card-min-sm);
    }
}
@media (max-width: 640px) {
    .oe-hsl-panel {
        min-width: clamp(140px, 22vw, 200px);
        padding: var(--s-2);
    }
}
@media (max-width: 375px) {
    .oe-hsl-toggle span,
    .oe-bg-toggle span {
        display: none;
    }
}

/* ── 부분 편집 패널 (페이지별/문단별 수정) ── */
.oe-partial-edit-panel {
    flex-shrink: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--smooth), opacity var(--motion-hover), padding var(--smooth);
    box-shadow: 0 -1px 0 var(--border-subtle);
}
.oe-partial-edit-panel.open {
    max-height: 480px;
    opacity: 1;
    padding: var(--s-3) var(--s-4);
}
.pe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-2);
}
.pe-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.pe-close {
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    font-size: var(--text-lg);
    padding: var(--s-1);
    line-height: var(--leading-none);
    border-radius: var(--radius-s);
    transition: color var(--motion-hover), background var(--motion-hover);
}
.pe-close:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.pe-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.pe-row {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.pe-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.pe-hint {
    font-weight: var(--weight-normal);
    text-transform: none;
    letter-spacing: var(--tracking-normal);
    color: var(--text-sub);
}
.pe-action-btns {
    display: flex;
    gap: var(--s-1);
}
.pe-action-btn {
    flex: 1;
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.pe-action-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: var(--shadow-soft);
    transform: translateY(var(--hover-lift-sm));
}
.pe-action-btn.active {
    background: var(--surface-active);
    color: var(--text);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-soft);
}
/* 블록 클릭 선택 가이드 UI */
.pe-selection-guide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-s);
    background-color: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
    color: var(--text-sub);
    font-size: var(--text-sm);
    transition: background-color var(--motion-hover), color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    cursor: default;
}
.pe-selection-guide svg {
    flex-shrink: 0;
    color: var(--text-sub);
    transition: color var(--motion-hover);
}
.pe-selection-guide.pe-selected {
    background-color: var(--surface-active);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--surface-w15);
}
.pe-selection-guide.pe-selected svg {
    color: var(--text);
}
.pe-guide-text {
    line-height: var(--leading-snug);
}
.pe-fallback-index {
    width: var(--s-9);
    padding: var(--s-1) var(--s-1);
    border: none;
    border-radius: var(--radius-s);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
    color: var(--text);
    font-size: var(--text-sm);
    text-align: center;
    -moz-appearance: textfield;
}
.pe-fallback-index::-webkit-inner-spin-button,
.pe-fallback-index::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pe-fallback-index:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--accent);
}
.pe-instruction {
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-s);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    resize: vertical;
    min-height: var(--s-9-5);
    outline: none;
    transition: box-shadow var(--motion-hover);
}
.pe-instruction:focus {
    box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-ring-glow);
}
.pe-instruction::placeholder {
    color: var(--text-sub);
}
.pe-char-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-align: right;
}
.pe-chips {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.pe-chip {
    padding: var(--s-1) var(--s-1);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.pe-chip:hover {
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: var(--shadow-soft);
    transform: translateY(var(--hover-lift-sm));
}
.pe-chip.active {
    background: var(--surface-active);
    color: var(--text);
    box-shadow: var(--shadow-soft);
}
.pe-actions {
    display: flex;
    justify-content: flex-end;
}
.pe-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border: none;
    border-radius: var(--radius-s);
    background: var(--accent);
    color: var(--bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity var(--motion-hover), transform var(--fast);
}
.pe-submit-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(var(--hover-lift-sm));
}
.pe-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pe-status {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    margin-top: var(--s-1);
}
.pe-status.pe-success {
    background: var(--clr-success-bg-sm);
}
.pe-status-spinner {
    width: var(--s-4);
    height: var(--s-4);
    border: 2px solid var(--surface-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin var(--duration-dramatic) linear infinite;
}
.pe-status-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* 반응형 — 부분 편집 패널 */
@media (max-width: 640px) {
    .oe-partial-edit-panel.open {
        padding: var(--s-2);
    }
    .pe-action-btns {
        flex-direction: column;
    }
    .pe-chips {
        gap: var(--s-1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .oe-partial-edit-panel {
        transition: none;
    }
}

/* ══════════════════════════════════════════
   시각화 생성 패널
   ══════════════════════════════════════════ */
.oe-viz-btn {
    color: var(--text-sub);
    border-color: var(--line-bold);
    background: transparent;
}
.oe-viz-btn:hover {
    background: var(--surface-active);
    color: var(--text);
    border-color: var(--line-bold);
    transform: translateY(var(--hover-lift-sm));
}

/* 패널 컨테이너 — 부분 편집 패널과 동일 패턴 */
.oe-viz-panel {
    flex-shrink: 0; /* flex 레이아웃에서 축소 방지 — body 영역 안정화 */
    background: var(--bg-raised);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--smooth), opacity var(--motion-hover), padding var(--smooth);
    /* D4: @container 반응형 — 사이드바 열림/닫힘에 따른 자동 조절 */
    container-type: inline-size;
    container-name: vizpanel;
}
.oe-viz-panel.open {
    max-height: 600px;
    opacity: 1;
    padding: var(--s-3) var(--s-4);
    overflow-y: auto;
}
.viz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-2);
}
.viz-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.viz-close {
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    font-size: var(--text-lg);
    padding: var(--s-1);
    line-height: var(--leading-none);
    border-radius: var(--radius-s);
    transition: color var(--motion-hover), background var(--motion-hover);
}
.viz-close:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.viz-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.viz-row {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.viz-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* 시각화 유형 버튼 */
.viz-type-btns {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.viz-type-btn {
    flex: 0 0 auto;
    padding: var(--s-1) var(--s-2);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    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);
    font-family: var(--font);
    white-space: nowrap;
}
.viz-type-btn:hover {
    border-color: var(--line-bold);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.viz-type-btn.active {
    border-color: var(--line-bold);
    background: var(--surface-active);
    color: var(--text);
    font-weight: var(--weight-semibold);
}

/* 삽입 위치 버튼 */
.viz-position-btns {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.viz-pos-btn {
    flex: 0 0 auto;
    padding: var(--s-1) var(--s-2);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    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);
    font-family: var(--font);
    white-space: nowrap;
}
.viz-pos-btn:hover {
    border-color: var(--line-bold);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.viz-pos-btn.active {
    border-color: var(--line-bold);
    background: var(--surface-active);
    color: var(--text);
    font-weight: var(--weight-semibold);
}

/* 프롬프트 입력 */
.viz-prompt {
    width: 100%;
    min-height: var(--s-9-5);
    padding: var(--s-1) var(--s-2);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    resize: vertical;
    transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
    box-sizing: border-box;
}
.viz-prompt:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-glow);
}
.viz-prompt::placeholder {
    color: var(--text-sub);
}
.viz-char-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-align: right;
}

/* 칩 버튼 */
.viz-chips {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.viz-chip {
    padding: var(--s-1) var(--s-1);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-sub);
    font-size: var(--text-sm);
    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);
    font-family: var(--font);
    white-space: nowrap;
}
.viz-chip:hover {
    border-color: var(--line-bold);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.viz-chip.active {
    border-color: var(--line-bold);
    background: var(--surface-active);
    color: var(--text);
}

/* 제출 버튼 */
.viz-actions {
    display: flex;
    justify-content: flex-end;
}
.viz-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    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-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity var(--motion-hover), transform var(--fast);
    font-family: var(--font);
}
.viz-submit-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(var(--hover-lift-sm));
}
.viz-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 상태 표시 — 부분 편집 패널과 동일 패턴 */
.viz-status {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    margin-top: var(--s-1);
}
.viz-status.pe-success {
    background: var(--clr-success-bg-sm);
}
.viz-status-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ── 시각화 수정 팝오버 ── */
.viz-edit-popover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s-3);
    min-width: var(--layout-lg);
    max-width: var(--layout-xl);
    box-shadow: var(--shadow-popover);
}
.viz-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.viz-edit-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.viz-edit-actions {
    display: flex;
    gap: var(--s-1);
    justify-content: flex-end;
}
.viz-edit-submit {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-3);
}
.viz-delete-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--s-1) var(--s-3);
    background: transparent;
    color: var(--clr-error);
    border: 1px solid var(--clr-error-border);
    border-radius: var(--radius-s);
    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);
    font-family: var(--font);
}
.viz-delete-btn:hover {
    background: var(--clr-error);
    color: var(--text);
    border-color: var(--clr-error);
    transform: translateY(var(--hover-lift-sm));
}

/* 반응형 — 시각화 패널 */
@media (max-width: 960px) {
    .viz-edit-popover {
        min-width: var(--layout-lg);
        max-width: 80vw;
    }
}
@media (max-width: 768px) {
    .oe-viz-panel.open {
        padding: var(--s-2) var(--s-3);
    }
    .viz-prompt {
        min-height: var(--s-8);
        font-size: var(--text-sm);
    }
    /* 시각화 수정 팝오버 — 모바일 하단 시트 */
    .viz-edit-popover {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        min-width: auto;
        max-width: none;
        border-radius: var(--radius) var(--radius) 0 0;
        z-index: var(--z-modal, 10001);
        max-height: 70vh;
        overflow-y: auto;
    }
    .viz-chips { gap: var(--s-1); }
}
@media (max-width: 640px) {
    .oe-viz-panel.open {
        padding: var(--s-2);
    }
    .viz-type-btns,
    .viz-position-btns {
        gap: var(--s-1);
    }
    .viz-type-btn,
    .viz-pos-btn {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-1);
    }
    .viz-edit-popover {
        min-width: auto;
        max-width: none;
        padding: var(--s-2);
    }
    .viz-submit-btn {
        width: 100%;
        justify-content: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .oe-viz-panel {
        transition: none;
    }
}

/* D4: @container vizpanel — 카드뉴스 시각화 패널 반응형 */
@container vizpanel (max-width: 480px) {
    .viz-header { margin-bottom: var(--s-1); }
    .viz-body { gap: var(--s-1); }
    .viz-type-btns,
    .viz-position-btns { gap: var(--s-1); }
    .viz-type-btn,
    .viz-pos-btn { font-size: var(--text-sm); padding: var(--s-1); }
}
@container vizpanel (max-width: 360px) {
    .viz-title { font-size: var(--text-sm); }
    .viz-prompt { min-height: 40px; font-size: var(--text-sm); }
}

/* ══════════════════════════════════════════
   출력물 뷰 — Job 단위 가로 스크롤 레이아웃
   ══════════════════════════════════════════ */

.outputs-view-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    container-name: outputsview;
}

/* 생성기별 필터 스트립 */
.ov-creator-strip {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4) 0;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}
.ov-creator-strip::-webkit-scrollbar {
    height: 0;
}
.ov-creator-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-family: var(--font);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: var(--surface);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--motion-hover), color var(--motion-hover), transform var(--motion-hover);
    flex-shrink: 0;
}
.ov-creator-chip:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.ov-creator-chip.active {
    background: var(--surface-active);
    color: var(--text);
}
.ov-chip-count {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    opacity: 0.7;
}
.ov-creator-chip.active .ov-chip-count {
    opacity: 1;
}

/* 산출물 그룹 모드 토글 (Job별 ↔ 프로젝트별) */
.ov-group-toggle {
    display: flex; gap: var(--s-1); padding: var(--s-3) var(--s-4) 0;
}
.ov-group-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2); border: none; border-radius: var(--radius-s);
    font-size: var(--text-sm); font-family: var(--font); font-weight: var(--weight-medium);
    color: var(--text-sub); background: transparent; cursor: pointer;
    transition: background var(--motion-hover), color var(--motion-hover);
}
.ov-group-btn:hover { background: var(--surface-hover); color: var(--text); }
.ov-group-btn.active { background: var(--surface-active); color: var(--text); }

/* 프로젝트별 산출물 그룹핑 */
.ov-project-list { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4); }
.ov-project-section { display: flex; flex-direction: column; gap: var(--s-2); }
.ov-project-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-2) var(--s-3); background: var(--surface);
    border-radius: var(--radius-s); cursor: pointer;
    transition: background var(--motion-hover);
}
.ov-project-header: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); }
.ov-project-files { display: flex; flex-direction: column; gap: var(--s-1); padding-left: var(--s-2); }
.ov-project-job-group { display: flex; flex-direction: column; gap: var(--s-1); }
.ov-project-job-label {
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-sub);
    padding: var(--s-1) var(--s-1); margin-top: var(--s-1);
}
.ov-project-job-time { opacity: 0.6; margin-left: var(--s-1); }

/* 가로 스크롤 래퍼 */
.ov-scroll-wrap {
    display: flex;
    gap: var(--s-4);
    padding: var(--s-4);
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    align-items: flex-start;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Container Query — 출력물 목록 자체 너비에 반응 */
    container-type: inline-size;
    container-name: outputlist;
}
.ov-scroll-wrap::-webkit-scrollbar {
    height: var(--s-1-5);
}
.ov-scroll-wrap::-webkit-scrollbar-track {
    background: transparent;
}
.ov-scroll-wrap::-webkit-scrollbar-thumb {
    background: var(--surface-w10);
    border-radius: var(--radius-s);
}
.ov-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--surface-w20);
}

/* 개별 Job 카드 */
.ov-job-card {
    flex: 0 0 340px;
    min-width: var(--layout-lg);
    max-width: var(--layout-xl);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-s);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}
.ov-job-card::-webkit-scrollbar {
    width: var(--s-1);
}
.ov-job-card::-webkit-scrollbar-track {
    background: transparent;
}
.ov-job-card::-webkit-scrollbar-thumb {
    background: var(--surface-w8);
    border-radius: var(--radius-s);
}

/* Job 카드 헤더 */
.ov-job-head {
    padding: var(--s-3) var(--s-4);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.ov-job-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold, 600);
    color: var(--text);
    letter-spacing: var(--tracking-normal);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--leading-snug);
}
.ov-job-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-1);
}
.ov-job-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.ov-job-status {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    line-height: var(--leading-snug);
}
.ov-status-ok {
    background: var(--clr-success-bg-sm);
    color: var(--clr-success);
}
.ov-status-err {
    background: var(--clr-error-bg-sm);
    color: var(--clr-error);
}
.ov-status-run {
    background: var(--surface-w12);
    color: var(--accent);
}

/* 파일 목록 영역 */
.ov-job-files {
    padding: 0 var(--s-3) var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

/* 에이전트 섹션 */
.ov-agent-section {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.ov-agent-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    padding: var(--s-1) var(--s-1);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.ov-file-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-normal);
}

/* 개별 파일 아이템 */
.ov-file-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-2);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--motion-hover);
    will-change: background;
}
.ov-file-item:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.ov-file-item:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.ov-file-final {
    background: var(--surface-w5);
}
.ov-file-final:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.ov-file-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    width: var(--s-5);
    text-align: center;
}
.ov-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.ov-file-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ov-file-detail {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.ov-file-actions {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--motion-hover);
}
.ov-file-item:hover .ov-file-actions {
    opacity: 1;
    transform: translateY(var(--hover-lift-sm));
}
.ov-action {
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    background: var(--surface-hover);
    color: var(--text-sub);
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    transition: background var(--motion-hover), color var(--motion-hover);
}
.ov-action:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 반응형: 출력물 뷰 — container query 기반 ── */
@container outputsview (max-width: 768px) {
    .ov-creator-strip {
        padding: var(--s-2) var(--s-3) 0;
        gap: var(--s-1);
    }
    .ov-scroll-wrap {
        padding: var(--s-3);
        gap: var(--s-3);
    }
    .ov-job-card {
        flex: 0 0 280px;
        min-width: var(--card-min);
    }
    .ov-file-actions {
        opacity: 1;
    }
}
@container outputsview (max-width: 640px) {
    .ov-creator-strip {
        padding: var(--s-1) var(--s-2) 0;
    }
    .ov-scroll-wrap {
        padding: var(--s-2);
        gap: var(--s-2);
    }
    .ov-job-card {
        flex: 0 0 260px;
        min-width: var(--panel-w-sm);
    }
}
@container outputsview (max-width: 375px) {
    .ov-creator-strip {
        padding: var(--s-1) var(--s-1) 0;
        gap: var(--s-1);
    }
    .ov-creator-chip {
        padding: var(--s-1) var(--s-2);
        font-size: var(--text-sm);
    }
    .ov-scroll-wrap {
        padding: var(--s-1);
        gap: var(--s-1);
    }
    .ov-job-card {
        flex: 0 0 240px;
        min-width: var(--card-min-sm);
    }
    .ov-job-head {
        padding: var(--s-2) var(--s-3);
    }
    .ov-job-files {
        padding: 0 var(--s-2) var(--s-2);
    }
}

/* ── outputlist Container Query (A2) ──
   .ov-scroll-wrap 자체 너비에 반응하여 Job 카드 크기 조정.
   패널 크기 변화 시 outputsview CQ보다 정밀한 반응 제공. */
@container outputlist (max-width: 480px) {
    .ov-job-card {
        flex: 0 0 220px;
        min-width: var(--card-min-sm);
    }
    .ov-job-head {
        padding: var(--s-2);
    }
    .ov-job-files {
        padding: 0 var(--s-2) var(--s-2);
    }
    .ov-file-actions {
        opacity: 1;
    }
}
@container outputlist (min-width: 481px) and (max-width: 768px) {
    .ov-job-card {
        flex: 0 0 260px;
        min-width: var(--panel-w-sm);
    }
}

/* ══════════════════════════════════════════
   #15: 출력물 파일 필터 칩 바
   ALL / PDF / ZIP / HTML / OTHER
   ══════════════════════════════════════════ */
.output-filter-bar {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3); margin-bottom: var(--s-2);
    overflow-x: auto; flex-shrink: 0;
}
.output-filter-chip {
    padding: var(--s-1) var(--s-3);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--text-sub); background: transparent;
    border-radius: var(--radius-pill); cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--easing-out), background-color var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out);
}
.output-filter-chip:hover { color: var(--text); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.output-filter-chip:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.output-filter-chip.active { color: var(--text); background: var(--surface-active); }
.output-filter-chip-count {
    font-size: var(--text-sm); color: var(--text-sub);
    margin-left: var(--s-1);
}
/* 필터링으로 숨겨진 파일 */
.output-file.filter-hidden { display: none; }

/* ── 반응형: 출력물 파일 필터 바 ── */
@media (max-width: 640px) {
    .output-filter-bar {
        padding: var(--s-1) var(--s-2);
        gap: var(--s-1);
    }
    .output-filter-chip {
        padding: var(--s-1) var(--s-2);
        font-size: var(--text-sm);
    }
}
@media (max-width: 375px) {
    .output-filter-chip-count { display: none; }
}

/* ═══════════════════════════════════════════
   Premium Enhancements (Wave A)
   출력물 패널 마이크로 인터랙션 + 시각적 정교화
   ═══════════════════════════════════════════ */

/* ── 출력 그룹 진입 애니메이션 ── */
.output-group {
    animation: animOutputGroupIn var(--duration-base) var(--easing-out) both;
}
@keyframes animOutputGroupIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── 출력물 파일 행 — 마우스 추종 글로우 트레일 ── */
.output-file {
    position: relative;
    overflow: hidden;
}
.output-file::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 120px at var(--mouse-x, -50%) var(--mouse-y, 50%),
        var(--surface-hover) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--motion-hover);
    pointer-events: none;
    border-radius: inherit;
}
.output-file:hover::before {
    opacity: 1;
}

/* ── Deliverable 뱃지 프리미엄 진입 ── */
.final-badge {
    animation: animFinalBadgeIn var(--duration-base) var(--easing-spring) both;
}
@keyframes animFinalBadgeIn {
    0%   { opacity: 0; transform: scale(0.8) translateX(-4px); }
    100% { opacity: 1; transform: none; }
}

/* ── Job 카드 호버 리프트 + 글로우 ── */
.ov-job-card {
    transition: transform var(--duration-base) var(--easing-spring),
                box-shadow var(--motion-hover);
}
.ov-job-card:hover {
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-float);
}

/* ── Creator 출력물 스트립 — 호버 시 아이콘 바운스 ── */
/* animIconBounce → components.css §24.4에 정의됨 */
.ov-creator-card:hover .output-icon {
    animation: animIconBounce var(--duration-base) var(--easing-spring);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 필터 칩 — 활성화 시 스프링 팝 ── */
.output-filter-chip.active {
    animation: animChipActivate var(--duration-fast) var(--easing-spring);
}
@keyframes animChipActivate {
    0%   { transform: scale(0.92); }
    60%  { transform: scale(1.04); }
    100% { transform: none; }
}

/* ── 768px: 터치 기기 최적화 ── */
@media (max-width: 768px) {
    /* 마우스 추종 글로우 비활성 — 터치 기기에서 불필요 */
    .output-file::before { display: none; }
    /* 파일 액션 항상 표시 — 호버 없음 */
    .ov-file-actions { opacity: 1; }
    /* 카드 링크 버튼 항상 표시 */
    .wp-card-link-btn { opacity: 1; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .output-group, .final-badge, .output-filter-chip.active,
    .ov-creator-card:hover .output-icon {
        animation: none !important;

    }
    .ov-job-card:hover {  transform: none; }
}


/* ═══ 체크리스트 검증/손상 상태 스타일 ═══ */
.pt-check-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--s-1-5);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.3px;
    margin-left: var(--s-1-5);
    flex-shrink: 0;
}
.pt-check-badge--verified {
    background: var(--clr-success-bg-lg);
    color: var(--clr-success);
}
.pt-check-badge--unverified {
    background: var(--clr-warning-bg-lg);
    color: var(--clr-warning);
}
.pt-check-badge--damaged {
    background: var(--clr-error-bg-lg);
    color: var(--clr-error);
    animation: pulse-damaged 2s ease-in-out infinite;
}
.pt-check-badge--auto {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}
@keyframes pulse-damaged {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.pt-check-item--damaged {
    background: var(--clr-error-bg-xs);
    padding-left: var(--s-1-5);
}
.pt-check-text--damaged {
    color: var(--clr-error);
    text-decoration: line-through;
    opacity: 0.8;
}
.pt-check-icon--damaged { color: var(--clr-error); }
.pt-check-icon--verified { color: var(--clr-success); }
.pt-check-icon--unverified { color: var(--clr-warning); }
.pt-check-assignee {
    display: inline-flex;
    padding: var(--s-0) var(--s-1);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub, #888);
    background: var(--bg-tertiary, rgba(255,255,255,0.05));
    margin-left: var(--s-1);
    flex-shrink: 0;
}
.pt-check-damage, .pt-check-repair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-0);
    height: var(--s-5-0);
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-fast);
    color: var(--text-sub, #888);
    padding: 0;
    margin-left: var(--s-1);
    border-radius: var(--radius-s);
    flex-shrink: 0;
}
.pt-check-damage:hover { color: var(--clr-error); background: var(--clr-error-bg); }
.pt-check-repair:hover { color: var(--clr-success); background: var(--clr-success-bg); }
.pt-check-item:hover .pt-check-damage,
.pt-check-item:hover .pt-check-repair,
.pt-check-item--damaged .pt-check-repair {
    opacity: 1;
}

/* [HOTFIX] 산출물 카드 scroll-reveal 강제 표시 — IntersectionObserver 미작동 대응 */
.ov-card.scroll-reveal,
.output-card.scroll-reveal,
.wp-card.scroll-reveal,
#wp-outputs-body .scroll-reveal,
#outputs-view-inner .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
}