/* ═══════════════════════════════════════════════
   Agent Factory Panel — CSS 모듈
   ═══════════════════════════════════════════════ */

/* ── 헤더 영역 ── */
.factory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    gap: var(--s-3);
    flex-wrap: wrap;
}

.factory-title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.factory-title-icon {
    font-size: var(--text-xl);
    line-height: var(--leading-none);
}

.factory-title h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
    margin: 0;
}

.factory-subtitle {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: var(--s-1);
}

/* ── 서브탭 ── */
.factory-tabs {
    display: flex;
    gap: var(--s-1);
    background: var(--surface-w5);
    border-radius: var(--radius-s);
    padding: var(--s-1);
}

.factory-tab {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-s);
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    white-space: nowrap;
    font-family: var(--font);
}

.factory-tab:hover {
    color: var(--text);
    background: var(--surface-w10);
    transform: translateY(var(--hover-lift-sm));
}
.factory-tab:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.factory-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.factory-tab.active {
    background: var(--surface-active);
    color: var(--accent);
}

/* ── 콘텐츠 영역 ── */
.factory-content {
    padding: var(--s-5);
    overflow-y: auto;
    max-height: calc(100vh - 180px);
    container-type: inline-size;
    container-name: factcontent;
}

.factory-view {
    animation: factoryFadeIn var(--smooth);
}

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

/* ═══ WIZARD — 5단계 생성 위자드 ═══ */

/* Step Indicator */
.factory-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--s-5);
}

.factory-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-6);
    height: var(--s-6);
    border-radius: 50%;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    background: var(--surface-w10);
    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;
    position: relative;
}

.factory-step.active {
    background: var(--accent);
    color: var(--bg);
    box-shadow: var(--shadow-glow-accent-md);
}

.factory-step.completed {
    background: var(--clr-success);
    color: var(--text);
}

.factory-step-label {
    position: absolute;
    top: var(--s-7);
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
    font-weight: var(--weight-medium);
}

.factory-step.active .factory-step-label {
    color: var(--accent);
}

.factory-step.completed .factory-step-label {
    color: var(--clr-success);
}

.factory-step-line {
    width: var(--s-8);
    height: 2px;
    background: var(--surface-w10);
    flex-shrink: 0;
}

.factory-step-line.completed {
    background: var(--clr-success);
}

/* Wizard Body */
.factory-wizard-body {
    max-width: 720px;
    margin: 0 auto;
    padding-top: var(--s-5);
}

.factory-wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--s-5);
    padding-top: var(--s-4);
}

/* ── Step 1: 미션 정의 ── */
.factory-form-group {
    margin-bottom: var(--s-5);
}

.factory-form-label {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-2);
}

.factory-form-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-normal);
    margin-left: var(--s-1);
}

.factory-input {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-w5);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-base);
    font-family: var(--font);
    transition: border-color var(--smooth);
    box-sizing: border-box;
}

.factory-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow-ring-md);
}

.factory-textarea {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-w5);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-base);
    font-family: var(--font);
    resize: vertical;
    min-height: var(--s-16);
    transition: border-color var(--smooth);
    box-sizing: border-box;
}

.factory-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow-ring-md);
}

/* Domain Chips */
.factory-domain-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.factory-domain-chip {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius);
    background: var(--surface-w5);
    color: var(--text-sub);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    font-family: var(--font);
}

.factory-domain-chip:hover {
    background: var(--surface-w10);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.factory-domain-chip:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.factory-domain-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.factory-domain-chip.selected {
    background-color: var(--surface-active);
    color: var(--accent);
}

/* Scale Selector */
.factory-scale-group {
    display: flex;
    gap: var(--s-2);
}

.factory-scale-btn {
    flex: 1;
    padding: var(--s-3) var(--s-4);
    border: none;
    border-radius: var(--radius-s);
    background: var(--surface-w5);
    color: var(--text-sub);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    text-align: center;
    font-family: var(--font);
}

.factory-scale-btn:hover {
    background: var(--surface-w10);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.factory-scale-btn:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.factory-scale-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.factory-scale-btn.selected {
    background-color: var(--surface-active);
    color: var(--accent);
}

.factory-scale-label {
    display: block;
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    margin-bottom: var(--s-1);
}

.factory-scale-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ── Step 2: AI 분석 결과 ── */
.factory-analysis-loading {
    text-align: center;
    padding: var(--s-6) 0;
}

.factory-analysis-spinner {
    display: inline-block;
    width: var(--s-8);
    height: var(--s-8);
    border: 3px solid var(--surface-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin var(--duration-dramatic) linear infinite;
}

/* factorySpin → spin (reset.css) 통일 */

.factory-analysis-loading p {
    margin-top: var(--s-4);
    color: var(--text-sub);
    font-size: var(--text-base);
}

.factory-analysis-summary {
    padding: var(--s-4);
    background: var(--surface-w5);
    border-radius: var(--radius);
    margin-bottom: var(--s-5);
}

.factory-analysis-summary p {
    color: var(--text-sub);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ── Step 3: 에이전트 카드 ── */
.factory-squad-group {
    margin-bottom: var(--s-5);
}

.factory-squad-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--surface-w5);
    border-radius: var(--radius-s);
    cursor: pointer;
    margin-bottom: var(--s-3);
    user-select: none;
}

.factory-squad-header:hover {
    background: var(--surface-w10);
    transform: translateY(var(--hover-lift-sm));
}
.factory-squad-header:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}

.factory-squad-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text);
}

.factory-squad-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: auto;
}

.factory-squad-chevron {
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: transform var(--smooth);
}

.factory-squad-group.collapsed .factory-squad-chevron {
    transform: rotate(-90deg);
}

.factory-squad-group.collapsed .factory-agent-grid {
    display: none;
}

.factory-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-3);
}

.factory-agent-card {
    padding: var(--s-4);
    background: var(--bg-raised);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    position: relative;
}

/* Tier 1.5 (Card-Subtle) — surface-hover 통일 */
.factory-agent-card:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-card-hover);
}
.factory-agent-card:active {
    transform: translateY(0) scale(var(--active-scale));
    box-shadow: none;
}

.factory-agent-card.excluded {
    opacity: 0.4;
    border-style: dashed;
}

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

.factory-agent-icon {
    font-size: var(--text-xl);
    line-height: var(--leading-none);
}

.factory-agent-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text);
}

.factory-agent-id {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
}

.factory-agent-role {
    font-size: var(--text-base);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    margin-bottom: var(--s-2);
}

.factory-agent-meta {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.factory-agent-tag {
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    background: var(--surface-w10);
    color: var(--text-sub);
}

.factory-agent-tag.model-opus {
    background: var(--clr-purple-bg-md);
    color: var(--clr-purple-vivid);
}

.factory-agent-tag.model-sonnet {
    background: var(--clr-info-bg-lg);
    color: var(--clr-info);
}

.factory-agent-tag.model-haiku {
    background: var(--clr-green-bg-lg);
    color: var(--clr-success-vivid);
}

.factory-agent-remove {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    width: var(--s-5);
    height: var(--s-5);
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
}

.factory-agent-card:hover .factory-agent-remove {
    opacity: 1;
    transform: translateY(var(--hover-lift-sm));
}

.factory-agent-remove:hover {
    background: var(--clr-error-bg-lg);
    color: var(--clr-error);
    transform: translateY(var(--hover-lift-sm));
}
.factory-agent-remove:active {
    transform: scale(var(--active-scale));
}

/* Add Agent Button */
.factory-add-agent {
    padding: var(--s-4);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    color: var(--text-sub);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    background: transparent;
    width: 100%;
    font-family: var(--font);
    min-height: var(--s-16);
}

.factory-add-agent:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.factory-add-agent:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.factory-add-agent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Step 4: 프롬프트 에디터 ── */
.factory-prompt-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.factory-prompt-item {
    background: var(--bg-raised);
    border-radius: var(--radius);
    overflow: hidden;
}

.factory-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-w5);
    cursor: pointer;
}

.factory-prompt-header-left {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.factory-prompt-header .factory-agent-icon {
    font-size: var(--text-lg);
}

.factory-prompt-header .factory-agent-name {
    font-size: var(--text-base);
}

.factory-prompt-length {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
}

.factory-prompt-body {
    display: none;
    padding: var(--s-4);
}

.factory-prompt-item.expanded .factory-prompt-body {
    display: block;
}

.factory-prompt-editor {
    width: 100%;
    min-height: var(--card-min-sm);
    padding: var(--s-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-base);
    font-family: var(--font-mono);
    resize: vertical;
    line-height: var(--leading-relaxed);
    box-sizing: border-box;
}

.factory-prompt-editor:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-glow);
}

/* ── Step 5: 검증 & 배포 ── */
.factory-validation-card {
    background: var(--bg-raised);
    border-radius: var(--radius);
    padding: var(--s-5);
    margin-bottom: var(--s-5);
}

.factory-validation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-4);
}

.factory-validation-score {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--accent);
}

.factory-validation-badge {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.factory-validation-badge.pass {
    background: var(--clr-success-bg-lg);
    color: var(--clr-success);
}

.factory-validation-badge.fail {
    background: var(--clr-error-bg-lg);
    color: var(--clr-error);
}

.factory-validation-checks {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.factory-check-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.factory-check-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.factory-check-label {
    font-size: var(--text-base);
    color: var(--text);
    flex: 1;
}

.factory-check-score {
    font-size: var(--text-base);
    font-family: var(--font-mono);
    color: var(--text-sub);
}

/* Score bar */
.factory-score-bar {
    width: var(--s-20);
    height: var(--s-1-5);
    background: var(--surface-w10);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.factory-score-bar-fill {
    height: 100%;
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) ease;
}

.factory-score-bar-fill.high { background: var(--clr-success); }
.factory-score-bar-fill.mid { background: var(--clr-warning); }
.factory-score-bar-fill.low { background: var(--clr-error); }

/* ── 생성 결과 요약 ── */
.factory-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.factory-summary-stat {
    background: var(--surface-w5);
    border-radius: var(--radius-s);
    padding: var(--s-4);
    text-align: center;
}

.factory-summary-stat-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--accent);
}

.factory-summary-stat-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}

/* ═══ TEMPLATES ═══ */
.factory-template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
}

.factory-template-card {
    background: var(--bg-raised);
    border-radius: var(--radius);
    padding: var(--s-5);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
}

.factory-template-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-card-hover);
}
.factory-template-card:active {
    transform: translateY(0) scale(var(--active-scale));
    box-shadow: none;
    transition-duration: var(--duration-instant);
}

.factory-template-icon {
    font-size: var(--text-xl);
    margin-bottom: var(--s-3);
}

.factory-template-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-1);
}

.factory-template-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    margin-bottom: var(--s-4);
}

.factory-template-meta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.factory-template-actions {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

/* ═══ HISTORY ═══ */
.factory-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.factory-history-card {
    background: var(--bg-raised);
    border-radius: var(--radius);
    padding: var(--s-4) var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
}

/* Tier 1.5 (Card-Subtle) — shadow-card-hover 통일 + surface-hover 통일 */
.factory-history-card:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-card-hover);
}

.factory-history-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.factory-history-info {
    flex: 1;
    min-width: 0;
}

.factory-history-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.factory-history-desc {
    font-size: var(--text-base);
    color: var(--text-sub);
    margin-top: var(--s-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.factory-history-stats {
    display: flex;
    gap: var(--s-4);
    flex-shrink: 0;
}

.factory-history-stat {
    text-align: center;
}

.factory-history-stat-value {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
}

.factory-history-stat-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

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

/* Job status badges */
.factory-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);
}

.factory-status.analyzing { background: var(--clr-info-bg-lg); color: var(--clr-info); }
.factory-status.designing { background: var(--clr-purple-bg-md); color: var(--clr-purple-vivid); }
.factory-status.validating { background: var(--clr-warning-bg-lg); color: var(--clr-warning); }
.factory-status.pending_approval { background: var(--surface-w15); color: var(--accent); }
.factory-status.deploying { background: var(--clr-info-bg-lg); color: var(--clr-info); }
.factory-status.completed { background: var(--clr-success-bg-lg); color: var(--clr-success); }
.factory-status.failed { background: var(--clr-error-bg-lg); color: var(--clr-error); }

.factory-status-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: currentColor;
    /* 상태 전환 보간 — analyzing↔completed↔failed 스프링 전환 */
    transition: background var(--duration-moderate) var(--easing-spring),
                opacity var(--duration-moderate) var(--easing-spring);
}

.factory-status.analyzing .factory-status-dot,
.factory-status.designing .factory-status-dot,
.factory-status.deploying .factory-status-dot {
    animation: factoryDotPulse 1.5s var(--easing-smooth) infinite;
}

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

/* ═══ PROGRESS BAR (파이프라인 진행률) ═══ */
.factory-progress {
    margin-bottom: var(--s-5);
}

.factory-progress-bar {
    width: 100%;
    height: var(--s-2);
    background: var(--surface-w10);
    border-radius: var(--radius-s);
    overflow: hidden;
    margin-bottom: var(--s-2);
}

.factory-progress-fill {
    height: 100%;
    border-radius: var(--radius-s);
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    transition: width var(--duration-moderate) ease;
}

.factory-progress-text {
    font-size: var(--text-base);
    color: var(--text-sub);
}

.factory-progress-phase {
    font-weight: var(--weight-semibold);
    color: var(--accent);
}

/* ═══ EMPTY STATES ═══ */
.factory-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-6) var(--s-5);
    text-align: center;
}

.factory-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-9);
    height: var(--s-9);
    border-radius: 50%;
    background: var(--surface-w5);
    margin-bottom: var(--s-2);
}
.factory-empty-icon svg {
    width: var(--s-5-5);
    height: var(--s-5-5);
    color: var(--text-sub);
    opacity: 0.6;
}

.factory-empty-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-2);
}

.factory-empty-desc {
    font-size: var(--text-base);
    color: var(--text-sub);
    line-height: var(--leading-relaxed);
}

/* ═══ BUTTONS (Factory-specific) ═══ */
.factory-btn-primary {
    padding: var(--s-3) var(--s-5);
    border-radius: var(--radius-s);
    border: none;
    background: var(--accent);
    color: var(--bg);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    font-family: var(--font);
}

.factory-btn-primary:hover {
    background: var(--accent-deep);
    transform: translateY(var(--hover-lift-sm));
}
.factory-btn-primary:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.factory-btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.factory-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.factory-btn-secondary {
    padding: var(--s-3) var(--s-5);
    border-radius: var(--radius-s);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    font-family: var(--font);
}

.factory-btn-secondary:hover {
    border-color: var(--text-sub);
    background: var(--surface-w5);
    transform: translateY(var(--hover-lift-sm));
}
.factory-btn-secondary:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.factory-btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.factory-btn-ghost {
    padding: var(--s-2) var(--s-4);
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    font-family: var(--font);
}

.factory-btn-ghost:hover {
    color: var(--text);
    background: var(--surface-w5);
    transform: translateY(var(--hover-lift-sm));
}
.factory-btn-ghost:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.factory-btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.factory-btn-danger {
    padding: var(--s-3) var(--s-5);
    border-radius: var(--radius-s);
    border: 1px solid var(--clr-error-border);
    background: var(--clr-error-bg-md);
    color: var(--clr-error);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    font-family: var(--font);
}

.factory-btn-danger:hover {
    background: var(--clr-error-bg-xl);
    transform: translateY(var(--hover-lift-sm));
}
.factory-btn-danger:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.factory-btn-danger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* CQ: 팩토리 패널 컨테이너가 좁아질 때 템플릿 그리드 조정 */
@container factcontent (max-width: 600px) {
    .factory-template-grid {
        grid-template-columns: 1fr;
    }
    .factory-agent-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
    .factory-template-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .factory-header {
        padding: var(--s-3) var(--s-4);
    }
}
@media (max-width: 960px) {
    .factory-template-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .factory-agent-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .factory-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .factory-title h2 {
        font-size: var(--text-lg);
    }
    .factory-title-icon {
        font-size: var(--text-xl);
    }
    .factory-subtitle {
        font-size: var(--text-sm);
    }
    .factory-tab {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-3);
    }
    .factory-step {
        width: var(--s-5-5);
        height: var(--s-5-5);
        font-size: var(--text-sm);
    }
    .factory-step-label {
        font-size: var(--text-sm);
        top: var(--s-6);
    }
    .factory-step-line {
        width: var(--s-7);
    }
    .factory-form-label {
        font-size: var(--text-sm);
    }
    .factory-form-hint {
        font-size: var(--text-sm);
    }
    .factory-input,
    .factory-textarea {
        font-size: var(--text-sm);
    }
    .factory-domain-chip {
        font-size: var(--text-sm);
    }
    .factory-scale-label {
        font-size: var(--text-sm);
    }
    .factory-scale-btn {
        font-size: var(--text-sm);
    }
    .factory-scale-desc {
        font-size: var(--text-sm);
    }
    .factory-template-grid {
        grid-template-columns: 1fr;
    }
    .factory-template-icon {
        font-size: var(--text-xl);
    }
    .factory-template-name {
        font-size: var(--text-sm);
    }
    .factory-template-desc {
        font-size: var(--text-sm);
    }
    .factory-history-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .factory-history-icon {
        font-size: var(--text-xl);
    }
    .factory-history-name {
        font-size: var(--text-sm);
    }
    .factory-history-desc {
        font-size: var(--text-sm);
    }
    .factory-history-stat-value {
        font-size: var(--text-sm);
    }
    .factory-history-stats {
        width: 100%;
        justify-content: flex-start;
    }
    .factory-validation-score {
        font-size: var(--text-xl);
    }
    .factory-check-icon {
        font-size: var(--text-base);
    }
    .factory-check-label,
    .factory-check-score {
        font-size: var(--text-sm);
    }
    .factory-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .factory-summary-stat-value {
        font-size: var(--text-lg);
    }
    .factory-agent-icon {
        font-size: var(--text-lg);
    }
    .factory-agent-name {
        font-size: var(--text-sm);
    }
    .factory-agent-role {
        font-size: var(--text-sm);
    }
    .factory-prompt-editor {
        font-size: var(--text-sm);
    }
}

@media (max-width: 640px) {
    .factory-content {
        padding: var(--s-4);
    }
    .factory-tabs {
        overflow-x: auto;
    }
    .factory-title h2 {
        font-size: var(--text-reading);
    }
    .factory-title-icon {
        font-size: var(--text-xl);
    }
    .factory-subtitle {
        font-size: var(--text-sm);
    }
    .factory-form-label {
        font-size: var(--text-sm);
    }
    .factory-form-hint {
        font-size: var(--text-sm);
    }
    .factory-input,
    .factory-textarea {
        font-size: var(--text-sm);
        padding: var(--s-2) var(--s-3);
    }
    .factory-domain-chip {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-3);
    }
    .factory-scale-label {
        font-size: var(--text-sm);
    }
    .factory-scale-desc {
        font-size: var(--text-sm);
    }
    .factory-scale-btn {
        font-size: var(--text-sm);
        padding: var(--s-2) var(--s-3);
    }
    .factory-step {
        width: var(--s-5);
        height: var(--s-5);
        font-size: var(--text-sm);
    }
    .factory-step-label {
        font-size: var(--text-sm);
        top: var(--s-6);
    }
    .factory-step-line {
        width: var(--s-6);
    }
    .factory-wizard-body {
        padding-top: var(--s-4);
    }
    .factory-btn-primary,
    .factory-btn-secondary {
        font-size: var(--text-sm);
        padding: var(--s-2) var(--s-4);
    }
    .factory-scale-group {
        flex-wrap: wrap;
    }
    .factory-scale-btn {
        flex: none;
        width: calc(50% - var(--s-1));
    }
    .factory-tab {
        font-size: var(--text-sm);
    }
    .factory-template-icon {
        font-size: var(--text-lg);
    }
    .factory-template-name {
        font-size: var(--text-sm);
    }
    .factory-template-desc {
        font-size: var(--text-sm);
    }
    .factory-history-icon {
        font-size: var(--text-lg);
    }
    .factory-history-name {
        font-size: var(--text-sm);
    }
    .factory-history-desc {
        font-size: var(--text-sm);
    }
    .factory-history-stat-value {
        font-size: var(--text-sm);
    }
    .factory-validation-score {
        font-size: var(--text-lg);
    }
    .factory-check-icon {
        font-size: var(--text-sm);
    }
    .factory-check-label,
    .factory-check-score {
        font-size: var(--text-sm);
    }
    .factory-summary-stat-value {
        font-size: var(--text-base);
    }
    .factory-agent-icon {
        font-size: var(--text-lg);
    }
    .factory-agent-name,
    .factory-agent-role {
        font-size: var(--text-sm);
    }
    .factory-agent-tag {
        font-size: var(--text-sm);
    }
    .factory-prompt-editor {
        font-size: var(--text-sm);
    }
    .factory-squad-name {
        font-size: var(--text-sm);
    }
    .factory-squad-count {
        font-size: var(--text-sm);
    }
    .factory-add-agent {
        font-size: var(--text-sm);
        min-height: var(--s-11);
    }
    .factory-progress-text {
        font-size: var(--text-sm);
    }
    .factory-validation-badge {
        font-size: var(--text-sm);
    }
}

@media (max-width: 375px) {
    .factory-steps {
        transform: scale(0.8);
        transform-origin: center;
    }
    .factory-title h2 {
        font-size: var(--text-base);
    }
    .factory-title-icon {
        font-size: var(--text-lg);
    }
    .factory-form-label {
        font-size: var(--text-sm);
    }
    .factory-scale-label {
        font-size: var(--text-sm);
    }
    .factory-domain-chip {
        font-size: var(--text-sm);
    }
}