/* ══════════════════════════════════════════
   Workflow Stepper + Pipeline + Flow
   ══════════════════════════════════════════ */

/* ── Flow Panel ── */
.flow-panel { background: var(--surface); border: none; border-radius: var(--radius); padding: var(--s-4); }
.flow-label { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin-bottom: var(--s-3); }
.flow-steps { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.flow-step {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-4); border-radius: var(--radius-s);
    font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text); white-space: nowrap;
}
.flow-arrow { color: var(--text-sub); font-size: var(--text-lg); }

/* ── Global Workflow (Vertical Stepper) ── */
.mc-global-workflow {
    margin-bottom: var(--s-4);
    margin-left: calc(-1 * var(--s-4));
    margin-right: calc(-1 * var(--s-4));
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: visible;
    transition: border-color var(--smooth);
    /* §CQ3: 컨테이너 쿼리 — 워크플로우 축소 레이아웃 */
    container-type: inline-size;
    container-name: wfpanel;
}
.mc-global-workflow:hover { border-color: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }

/* ── Collapsible Header ── */
.mc-wf-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    user-select: none;
    border-radius: var(--radius);
    transition: background var(--motion-hover);
}
.mc-wf-head:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.mc-wf-head-left {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}
.mc-wf-head-right {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
}
.mc-wf-collapse-chevron {
    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: var(--s-4);
    text-align: center;
}
.mc-wf-collapsed .mc-wf-collapse-chevron { transform: rotate(-90deg); }
.mc-wf-title {
    font-size: var(--text-base);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
}
.mc-wf-progress {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    background: var(--surface-active);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
/* 인라인 프로그레스 바 (헤더 우측) */
.mc-wf-progress-bar-inline {
    width: var(--s-12);
    height: 3px;
    background: var(--surface);
    border-radius: var(--radius-s);
    overflow: hidden;
    flex-shrink: 0;
}
.mc-wf-progress-bar-inline .mc-wf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--clr-success));
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) var(--easing-out);
}
/* 헤더 아이콘 버튼 */
.mc-wf-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-s);
    border: none;
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.mc-wf-icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.mc-wf-icon-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.mc-wf-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mc-wf-head-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

/* ── Collapsible Body ── */
.mc-wf-body {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height var(--duration-moderate) ease, opacity var(--smooth);
    opacity: 1;
    /* CQ: 워크플로우 패널 적응 */
    container-type: inline-size;
    container-name: wfbody;
}
.mc-wf-collapsed .mc-wf-body {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Legacy progress bar (hidden, replaced by inline) ── */
.mc-wf-progress-bar { display: none; }
.mc-wf-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--clr-success)); border-radius: var(--radius-s); transition: width var(--duration-moderate) var(--easing-out); }

/* ── Toolbar ── */
.mc-wf-toolbar {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
    padding: var(--s-2) var(--s-4);
    border-bottom: 1px solid var(--surface);
    /* §CQ7: 툴바 너비별 버튼 적응 */
    container-type: inline-size;
    container-name: wftoolbar;
}
.mc-wf-toolbar .mc-action-btn {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semibold);
    border: none;
    background: var(--surface-hover);
    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);
}
.mc-wf-toolbar .mc-action-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }

/* ── Job Tabs ── */
.mc-job-tabs-wrap { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-3) var(--s-4) 0; overflow-x: auto; scrollbar-width: none; }
.mc-job-tabs-wrap::-webkit-scrollbar { display: none; }
.mc-sess-tab {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-4); border-radius: var(--radius-s);
    border: 1px solid transparent; background: transparent; color: var(--text-sub);
    font-size: var(--text-base); cursor: pointer; 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); flex-shrink: 0;
}
.mc-sess-tab:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.mc-sess-tab:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.mc-sess-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mc-sess-tab.active { background: var(--surface-active); border-color: var(--surface-w15); color: var(--accent); font-weight: var(--weight-semibold); }
.mc-sess-tab-label { max-width: var(--s-16); overflow: hidden; text-overflow: ellipsis; }
.mc-sess-tab-progress { font-size: var(--text-sm); color: var(--text-sub); }
.mc-sess-tab.active .mc-sess-tab-progress { color: var(--accent); opacity: 0.7; }
.mc-sess-tab-close { font-size: var(--text-sm); opacity: 0; margin-left: var(--s-1); transition: opacity var(--motion-hover); }
.mc-sess-tab:hover .mc-sess-tab-close { opacity: 0.5; transform: translateY(var(--hover-lift-sm)); }
.mc-sess-tab-close:hover { opacity: 1; color: var(--clr-error); transform: translateY(var(--hover-lift-sm)); }
.mc-sess-add { border-style: dashed; color: var(--text-sub); font-size: var(--text-lg); padding: var(--s-1) var(--s-3); }
.mc-sess-add:hover { color: var(--accent); border-color: var(--accent); transform: translateY(var(--hover-lift-sm)); }

/* ── Vertical Stepper ── */
.mc-wf-stepper { padding: var(--s-5) var(--s-4) var(--s-5); }
.mc-wf-step { display: grid; grid-template-columns: 40px 1fr auto; gap: 0 var(--s-4); position: relative; }
.mc-wf-step:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 40px; bottom: -20px; width: 2px; background: var(--line); transition: background var(--smooth); }
.mc-wf-step.done:not(:last-child)::after { background: linear-gradient(180deg, var(--clr-success-bg-strong), var(--clr-green-bg-lg)); }
.mc-wf-step.active:not(:last-child)::after { background: linear-gradient(180deg, var(--clr-warning-bg-strong), var(--line)); }
.mc-wf-step + .mc-wf-step { margin-top: var(--s-5); }
.mc-wf-node {
    width: var(--s-7-5); height: var(--s-7-5); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xl); font-weight: var(--weight-bold);
    background: var(--surface); border: none; color: var(--text-sub);
    transition: background var(--anim-smooth, 300ms) var(--ease-out, ease),
                color var(--anim-smooth, 300ms) var(--ease-out, ease),
                box-shadow var(--anim-smooth, 300ms) var(--ease-out, ease),
                transform var(--anim-base, 200ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    position: relative; z-index: var(--z-base);
}
.mc-wf-step.active .mc-wf-node { background: var(--surface-active); color: var(--accent); box-shadow: var(--shadow-step-active); animation: stepPulse 2s infinite; }
.mc-wf-step.done .mc-wf-node { background: var(--clr-green-bg-lg); color: var(--clr-success-vivid); }
.mc-wf-step.fail .mc-wf-node { background: var(--clr-error-bg-lg); color: var(--clr-error); }
.mc-wf-step-body { min-height: 40px; display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); }
.mc-wf-step-title { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text); transition: color var(--smooth); }
.mc-wf-step.pending .mc-wf-step-title { color: var(--text-sub); }
.mc-wf-step-detail { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-sub); max-width: 800px; }
.mc-wf-step-actions { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.mc-wf-step-actions .mc-action-btn {
    font-size: var(--text-sm); padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); font-weight: var(--weight-semibold);
    border: none; background: var(--surface-hover); 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); white-space: nowrap;
}
.mc-wf-step-actions .mc-action-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.mc-wf-step-actions .mc-action-btn.btn-confirm { background: var(--surface-active); color: var(--accent); }
.mc-wf-step-actions .mc-action-btn.btn-confirm:hover { background: var(--surface-w20); transform: translateY(var(--hover-lift-sm)); }
.mc-wf-badge {
    display: inline-flex; align-items: center; gap: var(--s-1);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); white-space: nowrap;
}
.mc-wf-badge.badge-done { background: var(--clr-green-bg-sm); color: var(--clr-success-vivid); }
.mc-wf-badge.badge-wait { background: var(--clr-warning-bg-sm); color: var(--clr-warning); }
.mc-wf-badge.badge-pending { background: var(--surface-hover); color: var(--text-sub); }

/* ── CQ: wfbody 너비별 스텝 레이아웃 적응 ── */
@container wfbody (max-width: 480px) {
    .mc-wf-step { grid-template-columns: 32px 1fr; }
    .mc-wf-step-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: var(--s-1); }
    .mc-wf-step-detail { font-size: var(--text-sm); }
    .mc-wf-node { width: 32px; height: 32px; font-size: var(--text-sm); }
}

/* ── Parallel Sub-stepper ── */
.mc-wf-parallel-zone { grid-column: 1 / -1; margin-top: var(--s-4); margin-left: calc(40px + var(--s-4)); padding-left: var(--s-5); }
.mc-par-list { display: grid; gap: var(--s-1); max-height: 800px; overflow: hidden; transition: max-height var(--duration-moderate) var(--ease-in-out), opacity var(--duration-base) ease; opacity: 1; }
.mc-wf-parallel-zone.collapsed .mc-par-list { max-height: 0; opacity: 0; pointer-events: none; }
.mc-par-summary { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--text-sm); color: var(--text-sub); cursor: pointer; user-select: none; padding: var(--s-1) 0; }
.mc-par-summary:hover { color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); }
.mc-par-summary-bar { flex: 1; max-width: 180px; height: 4px; background: var(--surface); border-radius: var(--radius-s); overflow: hidden; }
.mc-par-summary-fill { height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--clr-success-vivid)); border-radius: var(--radius-s); transition: width var(--duration-moderate) ease; }
.mc-par-chevron { display: inline-flex; transition: transform var(--duration-moderate) ease; font-size: var(--text-lg); color: var(--text-sub); }
.mc-wf-parallel-zone.collapsed .mc-par-chevron { transform: rotate(-90deg); }
.mc-par-toggle { background: none; border: none; color: var(--accent); font-size: var(--text-sm); cursor: pointer; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); 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); }
.mc-par-toggle:hover { color: var(--text-sub); background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.mc-par-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 0 var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); background: var(--surface); border: none; margin-bottom: var(--s-1); transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth); min-height: 48px; }
.mc-par-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.mc-par-item.done { background: var(--clr-green-bg-xs); }
.mc-par-item.active { background: var(--surface-active); }
.mc-par-item.fail { background: var(--clr-error-bg-xs); }
.mc-par-node { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); background: var(--surface); border: none; color: var(--text-sub); transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth); flex-shrink: 0; }
.mc-par-item.done .mc-par-node { background: var(--clr-green-bg-lg); color: var(--clr-success-vivid); }
.mc-par-item.active .mc-par-node { background: var(--surface-active); color: var(--accent); }
.mc-par-item.fail .mc-par-node { background: var(--clr-error-bg-lg); color: var(--clr-error); }
.mc-par-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.mc-par-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--text); line-height: var(--leading-snug); }
.mc-par-item.pending .mc-par-title { color: var(--text-sub); }
.mc-par-detail { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-par-actions { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.mc-par-actions .mc-action-btn { font-size: var(--text-sm); padding: var(--s-1) var(--s-3); }
.mc-par-open-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    font-size: var(--text-sm); padding: var(--s-1) var(--s-2);
    background: var(--surface-w10); color: var(--accent); border: 1px solid var(--surface-w15);
    border-radius: var(--radius-pill); 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;
}
.mc-par-open-btn:hover { background: var(--surface-w15); border-color: var(--surface-w20); transform: translateY(var(--hover-lift-sm)); }
.mc-par-files-row { grid-column: 1 / -1; margin-left: calc(28px + var(--s-1)); display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1) 0 var(--s-1); }
.mc-par-dep { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) 0 var(--s-1) calc(28px + var(--s-1)); font-size: var(--text-sm); color: var(--text-sub); }
.mc-par-dep::before { content: '↳'; font-size: var(--text-sm); }
.mc-wf-collapse-btn { background: none; border: none; color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); 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); }
.mc-wf-collapse-btn:hover { color: var(--text-sub); background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.mc-wf-stepper.collapsed .mc-wf-step:not(.active):not(.current-action) { display: none; }

/* ══════════════════════════════════════════
   Non-linear Workflow Stepper (Bullstory)
   — Step skip, checkboxes, mid-start support
   ══════════════════════════════════════════ */

/* ── Step Skip / Jump Controls ── */
.mc-wf-step.skippable .mc-wf-node {
    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);
}
.mc-wf-step.skippable .mc-wf-node:hover {
    background: var(--surface-hover);
    color: var(--accent);
    box-shadow: var(--shadow-glow-ring-md);
    transform: translateY(var(--hover-lift-sm));
}
.mc-wf-step.skipped {
    opacity: 0.45;
}
.mc-wf-step.skipped .mc-wf-node {
    background: var(--surface);
    color: var(--text-sub);
    text-decoration: line-through;
}
.mc-wf-step.skipped:not(:last-child)::after {
    background: var(--surface);
    stroke-dasharray: 4 4;
}
.mc-wf-step.skipped .mc-wf-step-title {
    text-decoration: line-through;
    color: var(--text-sub);
}

/* ── Step Start Button (Mid-start) ── */
.mc-wf-start-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    border: 1.5px dashed var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}
.mc-wf-start-btn:hover {
    background: var(--surface-hover);
    border-style: solid;
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-subtle);
}
.mc-wf-start-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.mc-wf-start-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* ── Parallel Checkbox Selection ── */
.mc-par-checkbox {
    width: var(--s-4);
    height: var(--s-4);
    border-radius: var(--s-1);
    border: none;
    background: var(--bg);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
    position: relative;
}
.mc-par-checkbox:hover {
    border-color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
.mc-par-checkbox:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.mc-par-checkbox:checked::after {
    content: '';
    width: var(--s-2);
    height: var(--s-1);
    border-left: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    transform: rotate(-45deg) translate(0, -1px);
    display: block;
}
.mc-par-checkbox:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Parallel item with checkbox layout ── */
.mc-par-item.selectable {
    grid-template-columns: 16px 24px 1fr auto;
    gap: 0 var(--s-2);
}

/* ── Parallel Select All / Proceed Bar ── */
.mc-par-select-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    background-color: var(--surface);
    border: 1px solid transparent;
    margin-top: var(--s-2);
}
.mc-par-select-all {
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--s-1);
    transition: color var(--motion-hover);
}
.mc-par-select-all:hover {
    color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
.mc-par-proceed-btn {
    margin-left: auto;
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-pill);
    border: none;
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}
.mc-par-proceed-btn:hover {
    background: var(--accent-deep);
    filter: brightness(var(--hover-brightness));
    transform: translateY(var(--hover-lift-sm));
}
.mc-par-proceed-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mc-par-selected-count {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

/* ── Workflow Team Visibility ── */
.mc-wf-bullstory-only {
    display: none;
}
.mc-wf-bullstory-only.visible {
    display: block;
}
.mc-wf-dev-only {
    display: none;
}
.mc-wf-dev-only.visible {
    display: block;
}

/* ── Workflow Step Status Indicators ── */
.mc-wf-step-status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.mc-wf-step-status.required {
    background: var(--clr-warning-bg-sm);
    color: var(--clr-warning);
}
.mc-wf-step-status.optional {
    background: var(--surface-hover);
    color: var(--text-sub);
}
.mc-wf-step-status.in-progress {
    background: var(--surface-active);
    color: var(--accent);
}

/* ── Workflow Responsive ── */
@media (max-width: 1024px) {
    .mc-wf-stepper {
        padding: var(--s-6) var(--s-5) var(--s-6);
    }
    .mc-wf-head {
        padding: var(--s-3) var(--s-4);
    }
    .mc-wf-toolbar {
        padding: var(--s-2) var(--s-4);
    }
    .mc-wf-progress-bar-inline { width: var(--s-12); }
}
@media (max-width: 960px) {
    .mc-wf-stepper {
        padding: var(--s-5) var(--s-4) var(--s-5);
    }
    .mc-wf-head {
        padding: var(--s-3) var(--s-3);
    }
    .mc-wf-toolbar {
        padding: var(--s-2) var(--s-3);
    }
    .mc-job-tabs-wrap {
        padding: var(--s-2) var(--s-3) 0;
    }
    .mc-wf-progress-bar-inline { width: var(--s-9-5); }
}

@media (max-width: 768px) {
    .mc-wf-step {
        grid-template-columns: 32px 1fr;
        gap: 0 var(--s-3);
    }
    .mc-wf-step + .mc-wf-step {
        margin-top: var(--s-5);
    }
    .mc-wf-step-actions {
        grid-column: 2;
        margin-top: var(--s-1);
    }
    .mc-wf-node {
        width: var(--s-6);
        height: var(--s-6);
        font-size: var(--text-lg);
    }
    .mc-wf-step:not(:last-child)::after {
        left: var(--s-3-5);
        top: var(--s-6);
    }
    .mc-wf-parallel-zone {
        margin-left: calc(32px + var(--s-3));
        padding-left: var(--s-4);
    }
    .mc-par-select-bar {
        flex-wrap: wrap;
    }
    .mc-par-item {
        min-height: var(--s-8-5);
        padding: var(--s-2) var(--s-3);
    }
}

@media (max-width: 640px) {
    .mc-wf-stepper {
        padding: var(--s-4) var(--s-4) var(--s-5);
    }
    .mc-wf-head {
        padding: var(--s-2) var(--s-3);
    }
    .mc-wf-head-left { gap: var(--s-1); }
    .mc-wf-head-right { gap: var(--s-2); }
    .mc-wf-progress-bar-inline { width: var(--s-8); }
    .mc-wf-toolbar {
        padding: var(--s-1) var(--s-3);
    }
    .mc-job-tabs-wrap {
        padding: var(--s-1) var(--s-3) 0;
    }
    .mc-par-item.selectable {
        grid-template-columns: 16px 24px 1fr auto;
        gap: 0 var(--s-1);
        padding: var(--s-2) var(--s-3);
    }
    .mc-wf-parallel-zone {
        margin-left: calc(32px + var(--s-2));
        padding-left: var(--s-3);
    }
}

@media (max-width: 375px) {
    .mc-wf-step {
        grid-template-columns: 28px 1fr;
        gap: 0 var(--s-2);
    }
    .mc-wf-node {
        width: var(--s-5-5);
        height: var(--s-5-5);
        font-size: var(--text-base);
    }
    .mc-wf-step:not(:last-child)::after {
        left: var(--s-3);
        top: var(--s-5-5);
    }
    .mc-wf-parallel-zone {
        margin-left: calc(28px + var(--s-2));
        padding-left: var(--s-3);
    }
    .mc-wf-step-title {
        font-size: var(--text-lg);
    }
    .mc-wf-step-detail {
        font-size: var(--text-sm);
    }
    .mc-wf-head { padding: var(--s-2) var(--s-2); }
    .mc-wf-title { font-size: var(--text-sm); }
    .mc-wf-progress-bar-inline { display: none; }
    .mc-wf-head-actions { gap: 0; }
    .mc-wf-icon-btn { width: var(--s-5); height: var(--s-5); }
}

/* ── Regeneration Feedback Panel ── */
.mc-regen-feedback-panel {
    grid-column: 1 / -1;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--smooth), opacity var(--motion-hover), margin var(--smooth), padding var(--smooth);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0 var(--s-3);
    margin-top: 0;
}
.mc-regen-feedback-panel.open {
    max-height: 300px;
    opacity: 1;
    margin-top: var(--s-2);
    padding: var(--s-3);
    border-color: var(--clr-teal-border-subtle);
}
.mc-regen-feedback-input {
    width: 100%;
    min-height: var(--s-8);
    max-height: var(--s-20);
    padding: var(--s-2) var(--s-3);
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-base);
    resize: vertical;
    transition: border-color var(--motion-hover);
    box-sizing: border-box;
}
.mc-regen-feedback-input::placeholder { color: var(--text-sub); }
.mc-regen-feedback-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-glow);
}
.mc-regen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-top: var(--s-2);
}
.mc-regen-chip {
    background: var(--surface-w5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: var(--s-1) var(--s-3);
    font-size: var(--text-sm);
    font-family: var(--font);
    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);
    white-space: nowrap;
}
.mc-regen-chip:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.mc-regen-chip.active {
    background: var(--surface-active);
    border-color: var(--line-bold);
    color: var(--text);
}
.mc-regen-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-3);
}
.mc-regen-btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-sub);
    border-radius: var(--radius-s);
    padding: var(--s-2) var(--s-4);
    font-size: var(--text-base);
    font-family: var(--font);
    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);
    white-space: nowrap;
}
.mc-regen-btn-ghost:hover {
    background: var(--surface);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.mc-regen-btn-accent {
    background: var(--surface-active);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: var(--radius-s);
    padding: var(--s-2) var(--s-4);
    font-size: var(--text-base);
    font-family: var(--font);
    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;
}
.mc-regen-btn-accent:hover {
    background: var(--surface-w15);
    transform: translateY(var(--hover-lift-sm));
}
.mc-regen-btn-accent:disabled {
    opacity: 0.35;
    pointer-events: none;
}
.mc-regen-char-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: auto;
}

/* Workflow main step regen button */
.mc-wf-step-actions .mc-regen-trigger {
    color: var(--accent);
    background: var(--surface-active);
    border: 1px solid var(--clr-teal-border-subtle);
}
.mc-wf-step-actions .mc-regen-trigger:hover {
    background: var(--surface-w15);
    transform: translateY(var(--hover-lift-sm));
}

/* Parallel item regen icon button */
.mc-par-regen-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    cursor: pointer;
    padding: var(--s-1) var(--s-1);
    font-size: var(--text-sm);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    color: var(--text-sub);
    white-space: nowrap;
}
.mc-par-regen-btn:hover {
    background: var(--surface-hover);
    border-color: var(--line-bold);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* Responsive */
@media (max-width: 640px) {
    .mc-regen-chips { flex-wrap: wrap; }
    .mc-regen-actions { flex-direction: column; }
    .mc-regen-btn-ghost, .mc-regen-btn-accent { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-regen-feedback-panel { transition: none; }
}

/* Legacy compat (hidden) */
.mc-wf-timeline-wrap, .mc-wf-timeline, .mc-wf-actions, .mc-wf-stage-wrap, .mc-wf-connector, .mc-wf-stage, .mc-wf-stage-head, .mc-wf-stage-title, .mc-wf-stage-detail, .mc-wf-action-row, .mc-wf-action-title, .mc-wf-action-status { display: none; }

/* ── Workflow Enhancements ── */
.mc-step-start-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--surface-w8);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--accent);
    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);
    opacity: 0.7;
}

.mc-step-start-btn:hover {
    opacity: 1;
    background: var(--surface-w10);
    transform: translateY(var(--hover-lift-sm));
}

.mc-parallel-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background-color: var(--surface);
    border-radius: var(--radius-s);
    margin: var(--s-2) 0;
}

.mc-parallel-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-base);
    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);
}

.mc-parallel-checkbox:has(input:checked) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-w5);
}

.mc-parallel-checkbox input[type="checkbox"] {
    accent-color: var(--accent);
    width: var(--s-3-5);
    height: var(--s-3-5);
}

.mc-parallel-actions {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

.mc-parallel-actions button {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-s);
    font-size: var(--text-base);
    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);
}

.mc-parallel-actions .mc-action-selected {
    background-color: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
}

.mc-parallel-actions .mc-action-all {
    background: var(--surface);
    color: var(--text-sub);
    border: 1px solid transparent;
}

.mc-parallel-actions .mc-action-all:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* 건너뛴 단계 */
.mc-step-skipped {
    opacity: 0.4;
    pointer-events: none;
}

.mc-step-skipped .mc-step-status::after {
    content: '건너뜀';
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: var(--s-1);
}

/* ══════════════════════════════════════════
   V2 Workflow Overhaul — 배포 워크플로우 개편
   ══════════════════════════════════════════ */

/* ── V2 컨테이너 ── */
.mc-wf-v2 {
    background: var(--bg-raised, var(--surface));
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: visible;
    box-shadow: var(--elevation-1), 0 0 0 1px var(--surface);
}
.mc-wf-v2:hover {
    border-color: var(--surface-hover);
    box-shadow: var(--elevation-md), 0 0 0 1px var(--surface);
    transform: translateY(var(--hover-lift-sm));
}

/* ── V2 헤더 ── */
.mc-wf-v2 .mc-wf-head {
    padding: var(--s-3) var(--s-5);
    gap: var(--s-3);
    border-bottom: 1px solid transparent;
    transition: background var(--motion-hover), border-color var(--smooth);
}
.mc-wf-v2:not(.mc-wf-collapsed) .mc-wf-head {
    border-bottom-color: var(--line);
}
.mc-wf-v2 .mc-wf-head:hover {
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}
.mc-wf-v2 .mc-wf-collapse-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-0);
    height: var(--s-5-0);
    color: var(--text-sub);
    transition: transform var(--smooth);
}
.mc-wf-v2.mc-wf-collapsed .mc-wf-collapse-chevron {
    transform: rotate(-90deg);
}
.mc-wf-v2 .mc-wf-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
}
.mc-wf-v2 .mc-wf-current-step {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--layout-lg);
}
/* 접혀있을 때 현재 단계를 더 강조 */
.mc-wf-v2.mc-wf-collapsed .mc-wf-current-step {
    color: var(--text);
    font-weight: var(--weight-semibold);
}
.mc-wf-v2 .mc-wf-progress {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
}
.mc-wf-v2 .mc-wf-progress-bar-inline {
    width: var(--s-11);
    height: var(--s-1);
    border-radius: var(--radius-s);
}

/* ── V2 본문 ── */
.mc-wf-v2 .mc-wf-body {
    transition: max-height var(--duration-moderate) ease, opacity var(--smooth);
}

/* ── V2 툴바 ── */
.mc-wf-toolbar-v2 {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--surface);
}
.mc-wf-toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.mc-wf-toolbar-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}
.mc-wf-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: var(--surface);
    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;
}
.mc-wf-quick-btn:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
.mc-wf-quick-btn:active {
    transform: scale(0.97);
}
.mc-wf-quick-btn svg {
    flex-shrink: 0;
}

/* ── V2 스텝 카드 ── */
.mc-wf-v2 .mc-wf-stepper {
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.mc-wf-v2 .mc-wf-step {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 0 var(--s-4);
    position: relative;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid transparent;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
}
.mc-wf-v2 .mc-wf-step:hover {
    background: var(--surface);
    border-color: var(--line);
    transform: translateY(var(--hover-lift-sm));
}
.mc-wf-v2 .mc-wf-step + .mc-wf-step {
    margin-top: 0;
}

/* V2 스텝 연결선 제거 — 카드 사이 연결 불필요 */
.mc-wf-v2 .mc-wf-step:not(:last-child)::after {
    display: none;
}

/* V2 노드 (작은 원) */
.mc-wf-v2 .mc-wf-node {
    width: var(--s-7);
    height: var(--s-7);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
}
.mc-wf-v2 .mc-wf-step.active .mc-wf-node {
    box-shadow: var(--shadow-focus-ring-teal);
}

/* V2 스텝 텍스트 */
.mc-wf-v2 .mc-wf-step-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.mc-wf-v2 .mc-wf-step-detail {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-sub);
    margin-top: var(--s-1);
}

/* V2 배지 개선 */
.mc-wf-v2 .mc-wf-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: var(--s-1) var(--s-2);
}

/* V2 스텝 액션 버튼 */
.mc-wf-v2 .mc-wf-step-actions {
    align-self: center;
}
.mc-wf-v2 .mc-wf-step-actions .mc-action-btn {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-4);
}

/* V2 active 스텝 강조 */
.mc-wf-v2 .mc-wf-step.active {
    background: var(--surface-hover);
    border-color: var(--border);
}

/* V2 done 스텝 */
.mc-wf-v2 .mc-wf-step.done {
    background: var(--clr-green-bg-xs);
    border-color: transparent;
}

/* V2 fail 스텝 */
.mc-wf-v2 .mc-wf-step.fail {
    background: var(--clr-error-bg-xs);
    border-color: var(--clr-error-bg-lg);
}

/* ── V2 병행 영역 ── */
.mc-wf-v2 .mc-wf-parallel-zone {
    grid-column: 1 / -1;
    margin-top: var(--s-4);
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* V2 병행 요약 */
.mc-wf-v2 .mc-par-summary {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    background: var(--surface);
    margin-bottom: var(--s-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    cursor: pointer;
    user-select: none;
    transition: background var(--motion-hover);
}
.mc-wf-v2 .mc-par-summary:hover {
    background: var(--surface);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* V2 병행 그리드 */
.mc-wf-v2 .mc-par-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-2);
}

/* V2 병행 아이템 카드 */
.mc-wf-v2 .mc-par-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid transparent;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    min-height: auto;
}
.mc-wf-v2 .mc-par-item:hover {
    border-color: var(--surface-hover);
    box-shadow: var(--elevation-1);
    transform: translateY(var(--hover-lift-sm));
}
.mc-wf-v2 .mc-par-item .mc-par-item-top {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.mc-wf-v2 .mc-par-item .mc-par-item-bottom {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-wrap: wrap;
}
/* 보조 액션 영역 — 주요 CTA 오른쪽에 작게 배치 */
.mc-wf-v2 .mc-par-item .mc-par-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
}

/* V2 병행 노드 (아이콘) */
.mc-wf-v2 .mc-par-node {
    width: var(--s-5-5);
    height: var(--s-5-5);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

/* V2 병행 제목/설명 */
.mc-wf-v2 .mc-par-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}
.mc-wf-v2 .mc-par-detail {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: normal;
    line-height: var(--leading-snug);
}

/* V2 병행 체크박스 카드 레이아웃 */
.mc-wf-v2 .mc-par-item.selectable {
    grid-template-columns: unset;
    cursor: pointer;
}
.mc-wf-v2 .mc-par-item.selectable:hover {
    border-color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}

/* V2 select bar 개선 */
.mc-wf-v2 .mc-par-select-bar {
    margin-top: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--radius);
    background-color: var(--surface);
    border: 1px solid transparent;
}

/* ── V2 반응형 ── */
@media (max-width: 1024px) {
    .mc-wf-v2 .mc-wf-head {
        padding: var(--s-4) var(--s-5);
    }
    .mc-wf-toolbar-v2 {
        padding: var(--s-3) var(--s-5);
    }
}
@media (max-width: 960px) {
    .mc-wf-v2 .mc-wf-head {
        padding: var(--s-3) var(--s-4);
    }
    .mc-wf-toolbar-v2 {
        padding: var(--s-3) var(--s-4);
    }
    .mc-wf-v2 .mc-wf-stepper {
        padding: var(--s-4) var(--s-4) var(--s-5);
    }
}

@media (max-width: 768px) {
    .mc-wf-v2 .mc-wf-step {
        grid-template-columns: 32px 1fr;
        gap: 0 var(--s-3);
        padding: var(--s-3);
    }
    .mc-wf-v2 .mc-wf-step-actions {
        grid-column: 2;
        margin-top: var(--s-1);
        justify-content: flex-start;
    }
    .mc-wf-v2 .mc-wf-node {
        width: var(--s-6);
        height: var(--s-6);
        font-size: var(--text-base);
    }
    .mc-wf-v2 .mc-par-list {
        grid-template-columns: 1fr;
    }
    .mc-wf-toolbar-v2 {
        padding: var(--s-2) var(--s-4);
    }
    .mc-wf-v2 .mc-wf-head {
        padding: var(--s-2) var(--s-4);
    }
}

@media (max-width: 640px) {
    .mc-wf-v2 .mc-wf-stepper {
        padding: var(--s-3) var(--s-3) var(--s-4);
        gap: var(--s-2);
    }
    .mc-wf-v2 .mc-wf-step {
        padding: var(--s-2) var(--s-3);
    }
    .mc-wf-toolbar-v2 {
        padding: var(--s-2) var(--s-3);
        flex-wrap: wrap;
    }
    .mc-wf-toolbar-v2 .mc-wf-toolbar-group:last-child {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        margin-top: var(--s-1);
    }
    .mc-wf-toggle-btn span {
        display: none;
    }
    .mc-wf-v2 .mc-wf-head {
        padding: var(--s-2) var(--s-3);
    }
    .mc-wf-v2 .mc-wf-step-title {
        font-size: var(--text-base);
    }
    .mc-wf-v2 .mc-par-item {
        padding: var(--s-2);
    }
    .mc-wf-v2 .mc-par-select-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .mc-wf-v2 .mc-par-proceed-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 375px) {
    .mc-wf-v2 .mc-wf-step {
        grid-template-columns: 28px 1fr;
        gap: 0 var(--s-2);
    }
    .mc-wf-v2 .mc-wf-node {
        width: var(--s-5-5);
        height: var(--s-5-5);
        font-size: var(--text-sm);
    }
    .mc-wf-v2 .mc-wf-head {
        padding: var(--s-1) var(--s-2);
    }
    .mc-wf-v2 .mc-wf-title {
        font-size: var(--text-base);
    }
    .mc-wf-v2 .mc-wf-progress-bar-inline {
        display: none;
    }
}

/* ── V2 병행 그룹 (접기/뱃지 지원) ── */
.mc-par-group {
    margin-bottom: var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
}
.mc-par-group:last-child {
    margin-bottom: 0;
}

/* 그룹 헤더 (클릭 가능) */
.mc-par-group-header {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    cursor: pointer;
    user-select: none;
    background: var(--surface);
    transition: background var(--motion-hover);
}
.mc-par-group-header:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* 그룹 chevron (접기/펼치기) */
.mc-par-group-chevron {
    color: var(--text-sub);
    flex-shrink: 0;
    transition: transform var(--smooth);
}
.mc-par-group--collapsed .mc-par-group-chevron {
    transform: rotate(-90deg);
}

/* 그룹 아이콘 */
.mc-par-group-icon {
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* 그룹 레이블 */
.mc-par-group-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    flex: 1;
}

/* 그룹 뱃지 (완료수/전체수) */
.mc-par-group-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    background: var(--bg-raised);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}
.mc-par-group-badge--partial {
    color: var(--clr-warning);
    background: var(--clr-warning-bg-md);
}
.mc-par-group-badge--done {
    color: var(--clr-success-bright);
    background: var(--clr-success-bg-md);
}

/* 그룹 내부 리스트 — 접기 애니메이션 */
.mc-par-group > .mc-par-list {
    padding: var(--s-1);
    max-height: 2000px;
    opacity: 1;
    transition: max-height var(--duration-moderate) ease, opacity var(--smooth), padding var(--smooth);
}
.mc-par-group--collapsed > .mc-par-list {
    max-height: 0;
    opacity: 0;
    padding: 0 var(--s-1);
    overflow: hidden;
    pointer-events: none;
}

/* 완료된 그룹 시각적 변경 */
.mc-par-group--done {
    border-color: var(--clr-success-border);
}
.mc-par-group--done .mc-par-group-header {
    background: var(--clr-success-bg-xs);
}
.mc-par-group--done .mc-par-group-label {
    color: var(--text-sub);
}

/* 그룹 인라인 진행률 바 */
.mc-par-group-progress {
    width: var(--s-8);
    height: 3px;
    background: var(--surface);
    border-radius: var(--radius-s);
    overflow: hidden;
    flex-shrink: 0;
}
.mc-par-group-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--clr-success-vivid));
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) ease;
}
.mc-par-group--done .mc-par-group-progress-fill {
    background: var(--clr-success-vivid);
}

/* 그룹 전체 선택 버튼 */
.mc-par-group-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5);
    height: var(--s-5);
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-base);
    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);
}
.mc-par-group-select-btn:hover {
    background-color: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* 그룹 활성 상태 힌트 */
.mc-par-group-active-hint {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    background: var(--surface-active);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    animation: stepPulse 2s infinite;
}

/* V2 병행 요약 SVG chevron */
.mc-wf-v2 .mc-par-chevron {
    display: inline-flex;
    align-items: center;
    transition: transform var(--smooth);
}
.mc-wf-v2 .mc-wf-parallel-zone.collapsed .mc-par-chevron {
    transform: rotate(-90deg);
}

/* V2 collapsed 병행 존 전체 숨기기 */
.mc-wf-v2 .mc-wf-parallel-zone.collapsed .mc-par-group,
.mc-wf-v2 .mc-wf-parallel-zone.collapsed .mc-par-select-bar {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    border: none;
    transition: max-height var(--smooth), opacity var(--smooth);
}
.mc-wf-v2 .mc-wf-parallel-zone .mc-par-select-bar {
    max-height: 2000px;
    opacity: 1;
    transition: max-height var(--duration-moderate) ease, opacity var(--smooth);
}

/* ── 완료 단계 숨기기 ── */
.mc-wf-hide-done .mc-wf-step.confirmed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    pointer-events: none;
    transition: max-height var(--smooth), opacity var(--smooth), padding var(--smooth), margin var(--smooth);
}
.mc-wf-v2 .mc-wf-step.confirmed {
    max-height: var(--card-min-sm);
    transition: max-height var(--smooth), opacity var(--smooth), padding var(--smooth), margin var(--smooth);
}

/* ── 툴바 토글 버튼 ── */
.mc-wf-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    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;
}
.mc-wf-toggle-btn:hover {
    background: var(--surface);
    color: var(--text-sub);
    transform: translateY(var(--hover-lift-sm));
}
.mc-wf-toggle-btn.active {
    background: var(--surface-active);
    border-color: var(--line-bold);
    color: var(--text);
}
.mc-wf-toggle-btn svg {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Context-aware CTA Banner (상황 인식 제안)
   ══════════════════════════════════════════ */
.mc-wf-context-cta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    margin: 0;
    border-bottom: none;
    background: var(--surface);
    transition: background var(--smooth), opacity var(--smooth);
    animation: ctaSlideIn var(--duration-moderate) var(--easing-smooth)-out;
}
@keyframes ctaSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* CTA 타입별 배경 */
.mc-wf-context-cta[data-cta-type="suggest-free-pdf"] {
    background: linear-gradient(90deg, var(--surface-hover), var(--surface));
    border-bottom-color: var(--border-subtle);
}
.mc-wf-context-cta[data-cta-type="free-pdf-progress"] {
    background: linear-gradient(90deg, var(--clr-warning-bg-sm), var(--surface));
    border-bottom-color: var(--clr-warning-bg-md);
}
.mc-wf-context-cta[data-cta-type="suggest-deploy"] {
    background: linear-gradient(90deg, var(--clr-success-bg-sm), var(--surface));
    border-bottom-color: var(--clr-success-bg-md);
}

.mc-ctx-cta-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
    line-height: var(--leading-none);
}
.mc-ctx-cta-icon--spin {
    animation: ctaSpin 1.5s var(--ease-in-out) infinite;
}
@keyframes ctaSpin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.mc-ctx-cta-body {
    flex: 1;
    min-width: 0;
}
.mc-ctx-cta-title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: var(--leading-snug);
}
.mc-ctx-cta-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-snug);
    margin-top: var(--s-1);
}

.mc-ctx-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: var(--surface-hover);
    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;
}
.mc-ctx-cta-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.mc-ctx-cta-btn--accent {
    background: var(--surface-active);
    border-color: var(--accent);
    color: var(--accent);
}
.mc-ctx-cta-btn--accent:hover {
    background: var(--surface-w15);
    border-color: var(--accent-deep);
    transform: translateY(var(--hover-lift-sm));
}

.mc-ctx-cta-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5);
    height: var(--s-5);
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-reading);
    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);
}
.mc-ctx-cta-dismiss:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* 반응형 */
@media (max-width: 768px) {
    .mc-wf-context-cta {
        padding: var(--s-2) var(--s-4);
        gap: var(--s-2);
        flex-wrap: wrap;
    }
    .mc-ctx-cta-icon {
        font-size: var(--text-lg);
    }
    .mc-ctx-cta-btn {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-3);
    }
}
@media (max-width: 640px) {
    .mc-wf-context-cta {
        padding: var(--s-2) var(--s-3);
    }
    .mc-ctx-cta-body {
        flex-basis: calc(100% - 40px);
    }
    .mc-ctx-cta-btn {
        margin-top: var(--s-1);
    }
}

/* ── FactBot 사후검증 배너 ── */
.mc-factbot-verify-banner {
    display: none;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    border-bottom: 1px solid var(--border-subtle);
    transition: opacity var(--smooth);
    animation: ctaSlideIn var(--duration-moderate) var(--easing-smooth)-out;
}
.mc-factbot-verify-banner.active {
    display: flex;
    background: linear-gradient(90deg, var(--surface-hover), var(--surface));
    color: var(--text);
}
.mc-factbot-verify-banner.done {
    display: flex;
    background: linear-gradient(90deg, var(--surface), var(--surface));
    color: var(--text-sub);
}
.mc-factbot-verify-banner.hiding { opacity: 0; }
.mc-factbot-verify-icon { font-size: var(--text-reading); flex-shrink: 0; line-height: var(--leading-none); }
.mc-factbot-verify-text { flex: 1; min-width: 0; }
.mc-factbot-verify-spinner {
    width: var(--s-3-5); height: var(--s-3-5);
    border: 2px solid var(--surface-active);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin var(--duration-dramatic) linear infinite;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .mc-factbot-verify-banner { padding: var(--s-2) var(--s-3); font-size: var(--text-sm); }
}

/* ══════════════════════════════════════════
   Shared Context Timeline
   Job 드로어 내 에이전트 간 공유 컨텍스트 타임라인
   ══════════════════════════════════════════ */

/* 타임라인 컨테이너 */
.sc-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: var(--s-5);
}

/* 좌측 수직 연결선 */
.sc-timeline::before {
    content: '';
    position: absolute;
    left: var(--s-2-5);
    top: var(--s-3);
    bottom: var(--s-3);
    width: 2px;
    background: var(--line-bold);
    border-radius: var(--radius-s);
}

/* 개별 타임라인 항목 */
.sc-entry {
    position: relative;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-s);
    background: transparent;
    transition: background-color var(--motion-hover);
}
.sc-entry:hover {
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}

/* 좌측 노드 (타임라인 점) */
.sc-node {
    position: absolute;
    left: calc(-1 * var(--s-5) + 5px);
    top: var(--s-4);
    width: var(--s-3-5);
    height: var(--s-3-5);
    border-radius: 50%;
    background: var(--bg-raised);
    border: 2px solid var(--line-bold);
    z-index: 1;
    transition: border-color var(--motion-hover), background-color var(--motion-hover);
}
.sc-entry:hover .sc-node {
    border-color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}

/* 에이전트/시간 헤더 */
.sc-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
    flex-wrap: wrap;
}

.sc-agent {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.sc-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}

/* 카테고리 태그 */
.sc-cat {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-1-5);
    border-radius: var(--radius-pill);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.sc-cat--api {
    background: var(--surface-w8);
    color: var(--accent);
}
.sc-cat--decision {
    background: var(--clr-purple-bg-sm);
    color: var(--clr-purple-light);
}
.sc-cat--file {
    background: var(--clr-warning-bg-sm);
    color: var(--clr-warning-light);
}
.sc-cat--constraint {
    background: var(--clr-error-bg-sm);
    color: var(--clr-error-light);
}
.sc-cat--summary {
    background: var(--clr-success-bg-sm);
    color: var(--clr-success-light);
}

/* 콘텐츠 본문 */
.sc-body {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    overflow: hidden;
    max-height: 3.6em;
    transition: max-height var(--duration-moderate) ease;
}
.sc-entry.expanded .sc-body {
    max-height: 600px;
}

/* 더보기 버튼 */
.sc-expand {
    display: none;
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    padding: var(--s-1) 0;
    margin-top: var(--s-1);
    transition: color var(--motion-hover);
}
.sc-expand:hover {
    color: var(--accent-deep);
    transform: translateY(var(--hover-lift-sm));
}
.sc-entry.has-overflow .sc-expand {
    display: inline-block;
}
.sc-entry.expanded .sc-expand::after {
    content: '접기';
}
.sc-entry:not(.expanded) .sc-expand::after {
    content: '더보기';
}

/* 빈 상태 */
.sc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-8) var(--s-4);
    color: var(--text-sub);
    font-size: var(--text-sm);
    text-align: center;
}
.sc-empty-icon {
    width: var(--s-6);
    height: var(--s-6);
    color: var(--text-sub);
    opacity: 0.5;
}

/* 타임라인 반응형 */
@media (max-width: 768px) {
    .sc-timeline { padding-left: var(--s-4); }
    .sc-timeline::before { left: var(--s-2); }
    .sc-node { left: calc(-1 * var(--s-4) + 3px); width: 12px; height: 12px; }
    .sc-entry { padding: var(--s-2) var(--s-3); }
}
@media (max-width: 640px) {
    .sc-header { gap: var(--s-1); }
    .sc-cat { font-size: var(--text-sm); }
}


/* ══════════════════════════════════════════
   Critic Verdict Badges
   코드 리뷰 PASS/REVISE/FAIL 판정 뱃지
   ══════════════════════════════════════════ */

.critic-verdict {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--motion-hover), color var(--motion-hover);
}

/* PASS — 녹색 */
.critic-verdict--pass {
    background: var(--clr-success-bg-sm);
    color: var(--clr-success-vivid);
    border: 1px solid var(--clr-success-border-light);
}

/* REVISE — 앰버/경고 */
.critic-verdict--revise {
    background: var(--clr-warning-bg-sm);
    color: var(--clr-warning-light);
    border: 1px solid var(--clr-warning-border);
}

/* FAIL — 레드 */
.critic-verdict--fail {
    background: var(--clr-error-bg-sm);
    color: var(--clr-error-light);
    border: 1px solid var(--clr-error-border);
}

/* 뱃지 내 SVG 아이콘 */
.critic-verdict svg {
    width: var(--s-2-5);
    height: var(--s-2-5);
    flex-shrink: 0;
}
.critic-verdict--pass svg { color: var(--clr-success-vivid); }
.critic-verdict--revise svg { color: var(--clr-warning-light); }
.critic-verdict--fail svg { color: var(--clr-error-light); }

/* Critic 라인 — 타임라인 항목 내 리뷰 요약 */
.critic-summary {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    margin-top: var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}
.critic-summary--pass {
    background: color-mix(in srgb, var(--clr-success) 8%, var(--surface));
}
.critic-summary--revise {
    background: var(--clr-warning-bg-xs);
}
.critic-summary--fail {
    background: var(--clr-error-bg-xs);
}

/* Critic 리뷰어 이름 */
.critic-reviewer {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Critic 수정 지시 (REVISE 시) */
.critic-instructions {
    font-size: var(--text-sm);
    color: var(--clr-warning-light);
    line-height: var(--leading-normal);
    margin-top: var(--s-1);
    padding-left: var(--s-3);
    background: var(--amber-bg);
    border-radius: var(--radius-s);
}

/* Critic 뱃지 반응형 */
@media (max-width: 640px) {
    .critic-verdict { font-size: var(--text-sm); padding: var(--s-1) var(--s-1-5); }
    .critic-verdict svg { width: var(--s-2); height: var(--s-2); }
    .critic-summary { padding: var(--s-1) var(--s-2); }
}

/* ── Intent Preservation 점수 표시 ── */
.intent-score {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.intent-score--high {
    background: var(--clr-success-bg-sm);
    color: var(--clr-success-vivid);
}
.intent-score--mid {
    background: var(--clr-warning-bg-sm);
    color: var(--clr-warning-light);
}
.intent-score--low {
    background: var(--clr-error-bg-sm);
    color: var(--clr-error-light);
}

/* ── Container Query: 워크플로우 패널 너비별 적응 ── */
@container wfbody (max-width: 480px) {
    .mc-wf-step { grid-template-columns: 32px 1fr auto; gap: 0 var(--s-2); }
    .mc-wf-stepper { padding: var(--s-3) var(--s-2) var(--s-3); }
}

/* ── §CQ3 Container Query: 워크플로우 전체 축소 레이아웃 ── */
@container wfpanel (max-width: 480px) {
    .mc-wf-head {
        padding: var(--s-2) var(--s-3);
        gap: var(--s-1);
    }
    .mc-wf-toolbar {
        padding: var(--s-1) var(--s-3);
        gap: var(--s-1);
    }
    .mc-wf-toolbar .mc-action-btn {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-2);
    }
    .mc-wf-step {
        grid-template-columns: 28px 1fr;
    }
    .mc-wf-step-actions {
        grid-column: 2;
    }
}

/* ── §CQ7 Container Query: 툴바 좁은 폭 버튼 축소 ── */
@container wftoolbar (max-width: 360px) {
    .mc-wf-toolbar .mc-action-btn {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-1);
    }
}