/* ══════════════════════════════════════════
   Modals + Drawer — iBots v5 "Unified Minimalism"
   기본 modal/drawer 스타일은 components.css에서 정의.
   이 파일: 확장/고유 컴포넌트만 포함.
   ══════════════════════════════════════════ */

/* 모달 폼 필드 라벨 (인라인 스타일 → 클래스 통합) */
.modal-field-label {
    font-size: var(--text-sm); color: var(--text-sub);
    display: block; margin-bottom: var(--s-1);
}
.modal-field-label .modal-input { margin-top: var(--s-1); }

/* 모달 textarea .tall 확장 */
.modal-textarea.tall { min-height: clamp(140px, 22vw, 200px); }
.modal-hint { font-size: var(--text-sm); color: var(--text-sub); margin-top: calc(-1 * var(--s-3)); margin-bottom: var(--s-4); } /* WCAG AA: 모달 내부 가독성 확보 */
.ref-file-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ref-file-chip {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3); border-radius: var(--radius-s); font-size: var(--text-sm);
    background: var(--clr-purple-bg-sm); border: 1px solid var(--clr-purple); color: var(--clr-purple-pale); cursor: default;
}
.ref-file-chip .ref-remove { cursor: pointer; opacity: 0.6; font-size: var(--text-lg); margin-left: var(--s-1); transition: opacity var(--anim-fast, 120ms) var(--ease-out, ease), color var(--anim-fast, 120ms) var(--ease-out, ease); }
.ref-file-chip .ref-remove:hover { opacity: 1; color: var(--clr-error-bright); transform: scale(var(--hover-scale)); }
.ref-file-browse-list { background: var(--bg); border: 1px solid transparent; border-radius: var(--radius-s); max-height: 180px; overflow-y: auto; padding: var(--s-1); }
.ref-browse-item { padding: var(--s-1) var(--s-2); border-radius: var(--radius-s); cursor: pointer; font-size: var(--text-base); color: var(--text-sub); display: flex; align-items: center; gap: var(--s-1); transition: background var(--anim-fast, 120ms) var(--ease-out, ease), color var(--anim-fast, 120ms) var(--ease-out, ease); }
.ref-browse-item:hover { background: var(--clr-purple-bg-sm); color: var(--text); transform: translateX(2px); }

/* ── Agent Detail Drawer (확장 — 기본 open/close + grid는 components.css에서 정의) ── */
.drawer-section { padding: var(--s-4) var(--s-5); border-bottom: none; }
.drawer-section-title {
    font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-sub);
    line-height: var(--leading-none); letter-spacing: var(--tracking-wider);
    text-transform: uppercase; margin-bottom: var(--s-3);
}
.drawer-status-row { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.drawer-status-row .badge { font-size: var(--text-sm); padding: var(--s-1) var(--s-3); }
.drawer-task {
    font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text);
    padding: var(--s-3) var(--s-4); background: var(--surface);
    border-radius: var(--radius-s); border: 1px solid transparent;
}
.drawer-task-none { font-size: var(--text-lg); color: var(--text-sub); font-style: italic; }
.drawer-msgs { padding: var(--s-2) var(--s-4); }
.drawer-msgs .msg { padding: var(--s-2) var(--s-1); }
.drawer-msgs .msg-text { font-size: var(--text-sm); }
.drawer-msgs-empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-sub); font-size: var(--text-base); }
.drawer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.drawer-meta-item { padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--radius-s); border: none; }
.drawer-meta-label { font-size: var(--text-sm); color: var(--text-sub); margin-bottom: var(--s-1); }
.drawer-meta-value { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }

/* ── Thinking Flow (재설계 v2 — 시간순, 접기/펼치기, 실시간 타이핑) ── */
.thinking-flow { padding: 0 var(--s-5) var(--s-4); }
.thinking-empty { color: var(--text-sub); font-size: var(--text-sm); padding: var(--s-4) 0; }

/* 기본 단계 */
.thinking-step {
    display: flex; gap: var(--s-3); padding: var(--s-1) 0; position: relative;
    animation: animFadeIn var(--anim-base, 200ms) var(--ease-out, ease) both;
}
.thinking-step::before {
    content: ''; position: absolute; left: var(--s-2-5); top: var(--s-5-5); bottom: 0;
    width: 1px; background: var(--line);
}
.thinking-step:last-child::before { display: none; }

/* 접기/펼치기 가능한 단계 */
.thinking-step--collapsible .thinking-detail {
    display: none;
    margin-top: var(--s-1);
}
.thinking-step--collapsible.expanded .thinking-detail {
    display: block;
}
.thinking-step--collapsible .thinking-summary {
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    text-transform: none;
    letter-spacing: var(--tracking-normal);
    margin-left: var(--s-1);
}
.thinking-step--collapsible.expanded .thinking-summary {
    display: none;
}
.thinking-chevron {
    display: inline-block;
    font-size: var(--text-sm);
    margin-left: var(--s-1);
    transition: transform var(--anim-base, 200ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    color: var(--text-sub);
}
.thinking-step--collapsible.expanded .thinking-chevron {
    transform: rotate(90deg);
}
.thinking-label--toggle {
    cursor: pointer;
    user-select: none;
}
.thinking-label--toggle:hover {
    color: var(--text-sub);
    transform: translateY(var(--hover-lift-sm));
}

/* dot */
.thinking-dot {
    width: var(--s-5-0); height: var(--s-5-0); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); flex-shrink: 0; z-index: 1;
}
.thinking-dot.request { background: var(--clr-info-bg-lg); color: var(--clr-info-bright); }
.thinking-dot.working { background: var(--clr-success-bg-lg); color: var(--clr-success-bright); }
.thinking-dot.response { background: var(--surface-w15); color: var(--accent); }

/* body */
.thinking-body { flex: 1; min-width: 0; }
.thinking-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub);
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1);
}
.thinking-text {
    font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-sub);
    margin-top: var(--s-1); word-break: break-word; white-space: normal;
    max-height: 480px; overflow-y: auto;
}
.thinking-time {
    font-size: var(--text-sm); color: var(--text-sub); font-weight: var(--weight-normal);
    text-transform: none; letter-spacing: var(--tracking-normal); margin-left: auto; white-space: nowrap;
}
.thinking-hint {
    font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--duration-slow) var(--easing-out);
}

/* 실시간 스트리밍 타이핑 효과 */
.thinking-text--typing::after {
    content: '▌';
    animation: thinkBlink var(--duration-dramatic) step-end infinite;
    color: var(--accent);
    font-weight: var(--weight-bold);
}
@keyframes thinkBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.thinking-step--streaming {
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-2);
    margin: var(--s-1) 0;
}

/* ── Codex Reasoning 전용 ── */
.thinking-dot.reasoning {
    background: var(--clr-warning-bg-lg);
    color: var(--clr-warning-light);
}
.thinking-dot.error {
    background: var(--clr-error-bg-lg);
    color: var(--clr-error-bright);
}
.thinking-step--reasoning {
    padding-left: var(--s-3);
    margin-left: var(--s-3);
}
.thinking-text--reasoning {
    color: var(--text);
    font-style: italic;
    background: var(--clr-warning-bg-2xs);
    border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-2);
}
.thinking-engine-badge {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    margin-right: var(--s-1);
    vertical-align: middle;
}
.thinking-engine-badge.codex {
    background: var(--clr-warning-bg-lg);
    color: var(--clr-warning-light);
}
.thinking-engine-badge.claude {
    background: var(--surface-w8);
    color: var(--accent);
}

/* ── Deliverable Picker Modal ── */
.mc-dpick-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; animation: animFadeIn var(--motion-hover); }
.mc-dpick-modal { background: var(--bg-raised); border: none; border-radius: var(--radius); width: 380px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-popover); animation: animSpringIn 350ms var(--ease-spring) both; }
.mc-dpick-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-4); border-bottom: none; }
.mc-dpick-title { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text); }
.mc-dpick-close { background: none; border: none; color: var(--text-sub); font-size: var(--text-xl); cursor: pointer; padding: var(--s-1) var(--s-1); border-radius: var(--radius-s); transition: color var(--motion-hover), background var(--motion-hover), transform var(--duration-fast) var(--ease-spring); }
.mc-dpick-close:hover { background: var(--surface-hover); color: var(--text); transform: rotate(90deg); }
.mc-dpick-list { overflow-y: auto; padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); }
.mc-dpick-item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-3); border-radius: var(--radius-s); cursor: pointer; transition: background var(--anim-fast, 120ms) var(--ease-out, ease), transform var(--anim-fast, 120ms) var(--ease-out, ease); }
.mc-dpick-item:active { transform: scale(var(--active-scale)); }
.mc-dpick-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.mc-dpick-name { flex: 1; font-size: var(--text-base); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-dpick-meta { font-size: var(--text-sm); color: var(--text-sub); flex-shrink: 0; }

/* ══════════════════════════════════════════
   Create Team / Create Agent Modals
   ══════════════════════════════════════════ */

/* ── Modal Input Field (스코프: .modal-field 내부 — components.css 베이스와 충돌 방지) ── */
.modal-field .modal-input {
    width: 100%;
    padding: var(--s-3) var(--s-3);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-lg);
    font-family: var(--font);
    margin-bottom: var(--s-4);
    outline: none;
    transition: border-color var(--anim-base, 200ms) var(--ease-out, ease),
                box-shadow var(--anim-smooth, 300ms) var(--ease-out, ease);
}
.modal-field .modal-input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-glow), 0 0 12px var(--surface-active);
}
.modal-field .modal-input::placeholder {
    color: var(--text-sub);
}
.modal-field .modal-input.invalid {
    border-color: var(--clr-error);
    box-shadow: var(--shadow-ring-error-soft);
}

/* ── Modal Field Group ── */
.modal-field {
    margin-bottom: var(--s-4);
}
.modal-field:last-child {
    margin-bottom: 0;
}

/* ── Modal Validation Hint ── */
.modal-validation {
    font-size: var(--text-sm);
    color: var(--clr-error-bright);
    margin-top: calc(-1 * var(--s-3));
    margin-bottom: var(--s-3);
    display: none;
}
.modal-validation.visible {
    display: block;
    animation: animFadeIn var(--anim-base, 200ms) var(--ease-out, ease) both;
}

/* ── Create Modal — Icon Picker ── */
.modal-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-bottom: var(--s-4);
}
.modal-icon-option {
    width: var(--s-7-5);
    height: var(--s-7-5);
    border-radius: var(--radius-s);
    border: none;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    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);
}
.modal-icon-option:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.modal-icon-option:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.modal-icon-option.selected {
    border-color: var(--accent);
    background-color: var(--surface-active);
    box-shadow: var(--shadow-ring-glow);
}

/* ── Create Modal — Role / Squad Selector ── */
.modal-squad-select {
    width: 100%;
    padding: var(--s-3) var(--s-3);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background-color: var(--bg);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    margin-bottom: var(--s-4);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--s-6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239399a8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
}
.modal-squad-select:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-glow);
}

/* ── Create Modal — Preview Card ── */
.modal-preview {
    padding: var(--s-4) var(--s-4);
    border-radius: var(--radius);
    background: var(--surface);
    border: none;
    margin-bottom: var(--s-4);
}
.modal-preview-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--s-2);
}
.modal-preview-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.modal-preview-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}
.modal-preview-info {
    flex: 1;
    min-width: 0;
}
.modal-preview-name {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
}
.modal-preview-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}
.modal-preview-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-w8);
    color: var(--accent);
}

/* ── Shortcut Add Modal (lightweight) ── */
.shortcut-modal {
    width: var(--layout-xl);
    max-width: 90vw;
}
.shortcut-modal .modal-footer {
    margin-top: var(--s-4);
}
.shortcut-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}
.shortcut-field-row .modal-input {
    margin-bottom: 0;
}
.shortcut-icon-input {
    width: var(--s-9-5);
    text-align: center;
    font-size: var(--text-reading);
}
.shortcut-command-preview {
    font-size: var(--text-sm);
    color: var(--accent);
    font-family: var(--font-mono);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    background: var(--surface);
    border: 1px solid transparent;
    margin-top: var(--s-2);
    word-break: break-all;
}

/* ── MCP Manager Modal ── */
.mcp-modal {
    width: var(--layout-2xl);
    max-width: 94vw;
}
.mcp-tool-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: var(--s-4);
}
.mcp-tool-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-s);
    background: var(--surface);
    border: 1px solid transparent;
    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);
}
.mcp-tool-item:hover {
    border-color: transparent;
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.mcp-tool-icon {
    font-size: var(--text-reading);
    flex-shrink: 0;
}
.mcp-tool-info {
    flex: 1;
    min-width: 0;
}
.mcp-tool-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.mcp-tool-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcp-tool-status {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.mcp-tool-status.active {
    background: var(--clr-success-bg-lg);
    color: var(--clr-success-bright);
}
.mcp-tool-status.inactive {
    background: var(--surface-hover);
    color: var(--text-sub);
}
.mcp-tool-actions {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
}
.mcp-tool-btn {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    border: none;
    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);
}
.mcp-tool-btn.add {
    background: var(--surface-w5);
    color: var(--accent);
}
.mcp-tool-btn.add:hover {
    background: var(--surface-w20);
    transform: translateY(var(--hover-lift-sm));
}
.mcp-tool-btn.remove {
    background: var(--clr-error-bg-sm);
    color: var(--clr-error-bright);
}
.mcp-tool-btn.remove:hover {
    background: var(--clr-error-bg-lg);
    transform: translateY(var(--hover-lift-sm));
}
.mcp-tool-btn:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}

/* ── Modal Tabs ── */
.modal-tabs {
    display: flex;
    gap: var(--s-1);
    padding: var(--s-1);
    background: var(--surface);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-4);
}
/* 스코프: .modal-tabs 내부 — components.css 베이스와 충돌 방지 */
.modal-tabs .modal-tab {
    flex: 1;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    text-align: center;
}
.modal-tabs .modal-tab:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-subtle);
}
.modal-tabs .modal-tab:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.modal-tabs .modal-tab.active {
    background: var(--surface-active);
    color: var(--accent);
}

/* ── Modal Responsive ── */
/* 1024px — 태블릿 완만 전환 */
@media (max-width: 1024px) {
    .modal-content { max-width: min(480px, 92vw); }
    .create-modal { max-width: min(520px, 94vw); }
    .mcp-modal { max-width: min(600px, 94vw); }
    .create-modal-checkbox-grid { gap: var(--s-2); }
    .create-modal-checkbox-grid label { padding: var(--s-2) var(--s-3); font-size: var(--text-sm); }
}
@media (max-width: 640px) {
    .modal-box, .modal-content { padding: var(--s-5); width: 100%; max-width: 100vw; max-height: 90vh; border-radius: var(--radius) var(--radius) 0 0; }
    .create-modal { max-height: 90vh; }
    .mcp-modal { width: 100%; }
    .shortcut-field-row { grid-template-columns: 1fr; }
}

/* ── Create Modal (Team / Agent / Project / Shortcut) ── */
.create-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}
.create-modal-overlay.active {
    display: flex;
    animation: animFadeIn var(--motion-hover);
}

.create-modal {
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius);
    width: 90%;
    max-width: var(--layout-xl);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-popover);
    animation: animSpringIn 350ms var(--ease-spring) both;
}

.create-team-modal-wide { width: 640px; }
.shortcut-modal { width: var(--layout-xl); }

.create-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    border-bottom: none;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    flex-shrink: 0;
}

.create-modal-header h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.create-modal-header button {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-reading);
    cursor: pointer;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    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);
}

.create-modal-header button:hover {
    color: var(--text);
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}
.create-modal-header button:active {
    transform: scale(var(--active-scale));
}

.create-modal-body {
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* CQ: 모달 내부 레이아웃 적응 */
    container-type: inline-size;
    container-name: modalbody;
}

.create-modal-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.create-modal-field label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
}

.create-modal-field input,
.create-modal-field select,
.create-modal-field textarea {
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    transition: border-color var(--motion-hover);
    outline: none;
}

.create-modal-field input:focus,
.create-modal-field select:focus,
.create-modal-field textarea:focus {
    border-color: var(--accent);
}

.create-modal-field textarea {
    resize: vertical;
    min-height: var(--s-12);
}

.create-modal-field select {
    cursor: pointer;
    appearance: auto;
}

.create-modal-char-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-align: right;
}

/* ── CQ: modalbody 너비별 필드 적응 ── */
@container modalbody (max-width: 480px) {
    .create-modal-field { gap: var(--s-1); }
    .create-modal-field label { font-size: var(--text-sm); }
    .create-modal-field input,
    .create-modal-field select,
    .create-modal-field textarea { font-size: var(--text-sm); padding: var(--s-1) var(--s-2); }
}

.create-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5) var(--s-4);
    border-top: none;
    flex-shrink: 0;
}

.create-modal-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
}

.create-modal-checkbox-grid label {
    display: 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);
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: var(--weight-normal);
    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);
}

.create-modal-checkbox-grid label:has(input:checked) {
    border-color: var(--accent);
    background: var(--surface-active);
}

.create-modal-checkbox-grid input[type="checkbox"] {
    accent-color: var(--accent);
}

/* ── Create Team Modal — AI 2-Step UX ── */
.create-team-modal-wide {
    max-width: var(--layout-2xl);
}

/* ── Step Indicator ── */
.create-team-steps {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.create-team-step {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}

.create-team-step::before {
    content: attr(data-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-0);
    height: var(--s-5-0);
    border-radius: 50%;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    background: var(--surface);
    border: none;
    color: var(--text-sub);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    flex-shrink: 0;
}

.create-team-step.active {
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.create-team-step.active::before {
    background: var(--surface-active);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-subtle);
}

.create-team-step.done {
    color: var(--clr-success);
}

.create-team-step.done::before {
    content: '✓';
    background: var(--clr-success-bg-lg);
    border-color: var(--clr-success);
    color: var(--clr-success);
}

.create-team-step-arrow {
    display: block;
    width: var(--s-5);
    height: 2px;
    background: var(--line);
    border-radius: var(--radius-hairline);
    transition: background var(--motion-hover);
    font-size: 0;
    overflow: hidden;
}

.create-team-step.done + .create-team-step-arrow {
    background: var(--clr-success);
}

.create-team-required {
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
}

.create-team-desc-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}

/* ── Project Auto-Create Modal ── */
.auto-gen-badge {
    color: var(--accent);
    font-size: var(--text-sm);
    background: var(--surface-w5);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
}
.path-preview-label {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.path-preview-box {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--bg);
    border-radius: var(--radius-s);
    padding: var(--s-2);
    word-break: break-all;
    min-height: var(--s-5-0);
}
.path-edit-link {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--s-1) 0;
    text-align: left;
}
.path-edit-link:hover {
    color: var(--text-sub);
    transform: translateY(var(--hover-lift-sm));
}

/* ── Planning / Loading ── */
.create-team-planning {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-6) var(--s-5);
}

.create-team-planning-spinner {
    width: var(--s-7-5);
    height: var(--s-7-5);
    border: 3px solid var(--surface-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin var(--duration-dramatic) linear infinite;
}


.create-team-planning-text {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    text-align: center;
}

.create-team-planning-sub {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-align: center;
    animation: teamPlanPulse 2s var(--ease-in-out) infinite;
}

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

/* ── AI Result ── */
.create-team-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-2);
}

.create-team-result-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text);
    letter-spacing: var(--tracking-normal);
}

.create-team-replan-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    padding: var(--s-1) var(--s-2);
    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);
}

.create-team-replan-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-w5);
    transform: translateY(var(--hover-lift-sm));
}

.create-team-replan-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.create-team-result-summary {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    margin-bottom: var(--s-3);
}

/* ── Agent Cards List ── */
.create-team-agent-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    max-height: 300px;
    overflow-y: auto;
    padding-right: var(--s-1);
}

/* 스크롤바 스타일 */
.create-team-agent-list::-webkit-scrollbar { width: var(--s-1); }
.create-team-agent-list::-webkit-scrollbar-track { background: transparent; }
.create-team-agent-list::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: var(--radius-s); }
.create-team-agent-list::-webkit-scrollbar-thumb:hover { background: var(--surface-active); }

.create-team-agent-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-3);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    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;
}

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

.create-team-agent-card.excluded {
    opacity: 0.35;
    background: transparent;
    border-style: dashed;
}

.create-team-agent-card.excluded .create-team-agent-info {
    text-decoration: line-through;
    text-decoration-color: var(--text-sub);
}

.create-team-agent-card.excluded:hover {
    opacity: 0.5;
    transform: translateY(var(--hover-lift-sm));
}

.create-team-agent-toggle {
    flex-shrink: 0;
    margin-top: var(--s-1);
}

.create-team-agent-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: var(--s-3-5);
    height: var(--s-3-5);
    cursor: pointer;
}

.create-team-agent-icon {
    flex-shrink: 0;
    width: var(--s-6);
    height: var(--s-6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-reading);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
}

.create-team-agent-info {
    flex: 1;
    min-width: 0;
}

.create-team-agent-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-wrap: wrap;
}

.create-team-agent-id {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--text-sub);
    font-family: var(--font-mono);
}

.create-team-agent-role {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    line-height: var(--leading-snug);
}

/* ── Agent Badges (Tier / Squad) ── */
.create-team-agent-badges {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: var(--s-1);
}

.create-team-agent-tier {
    flex-shrink: 0;
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
}

.create-team-agent-tier.tier-opus {
    color: var(--clr-purple-softer);
    background: var(--clr-purple-bg-xs);
    border: 1px solid var(--clr-purple-border-light);
}

.create-team-agent-tier.tier-sonnet {
    color: var(--clr-info-bright);
    background: var(--clr-info-bg-xs);
    border: 1px solid var(--clr-info-border-light);
}

.create-team-agent-tier.tier-haiku {
    color: var(--clr-success-bright);
    background: var(--clr-success-bg-xs);
    border: 1px solid var(--clr-success-border-light);
}

.create-team-agent-squad {
    flex-shrink: 0;
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: var(--surface);
    border: 1px solid transparent;
}

.create-team-count {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-1);
}

.create-team-workflow {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    white-space: pre-line;
    margin-top: var(--s-1);
}

/* ── Footer buttons ── */
.modal-btn-back {
    background: none;
    border: 1px solid transparent;
    color: var(--text-sub);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    margin-right: auto;
}

.modal-btn-back:hover {
    border-color: var(--text-sub);
    color: var(--text);
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}

.modal-btn-back:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Create Team Modal — Responsive ── */
@media (max-width: 640px) {
    .create-team-modal-wide {
        max-width: 100%;
    }
    .create-team-steps {
        gap: var(--s-1);
    }
    .create-team-step {
        font-size: var(--text-sm);
    }
    .create-team-step::before {
        width: var(--s-4-5);
        height: var(--s-4-5);
        font-size: var(--text-sm);
    }
    .create-team-step-arrow {
        width: var(--s-4);
    }
    .create-team-agent-list {
        max-height: 300px;
    }
    .create-team-agent-card {
        padding: var(--s-2);
    }
    .create-team-agent-icon {
        width: var(--s-5-5);
        height: var(--s-5-5);
        font-size: var(--text-base);
    }
    .create-team-agent-badges {
        flex-wrap: wrap;
    }
    .create-team-planning {
        padding: var(--s-5) var(--s-4);
    }
}

/* ══════════════════════════════════════════
   Job Detail Drawer
   작업 클릭 시 열리는 상세 정보 패널
   — 기존 에이전트 드로어 디자인 언어 계승
   ══════════════════════════════════════════ */

/* ── Overlay ── */
.job-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 1);
    background: var(--overlay);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    align-items: center;
    justify-content: center;
}
.job-drawer-overlay.open {
    display: flex;
}

/* ── Drawer Container ── */
.job-drawer {
    position: relative;
    width: min(1280px, 94vw);
    height: min(85vh, 860px);
    background: var(--bg-raised);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay-heavy);
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(8px);
    opacity: 0;
    transition: opacity var(--duration-moderate) var(--ease-out, ease),
                transform var(--duration-moderate) var(--easing-organic),
                box-shadow var(--duration-moderate) var(--ease-out, ease);
    overflow: hidden;
}
.job-drawer.open {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Header ── */
.job-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    flex-shrink: 0;
}

.job-drawer-header-left {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: 1;
    min-width: 0;
}

.job-drawer-icon {
    width: var(--s-7-5);
    height: var(--s-7-5);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    flex-shrink: 0;
    background: var(--surface);
    border: none;
    transition: background var(--duration-base) var(--easing-out), color var(--duration-base) var(--easing-out);
}
/* V5: 드로어 아이콘 — 상태색 배경 */
.job-drawer-icon.s-running { background: var(--status-running-bg); color: var(--status-running); }
.job-drawer-icon.s-triaging { background: var(--status-triaging-bg); color: var(--status-triaging); }
.job-drawer-icon.s-complete { background: var(--status-complete-bg); color: var(--status-complete); }
.job-drawer-icon.s-error { background: var(--status-error-bg); color: var(--status-error); }
.job-drawer-icon.s-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled); }
.job-drawer-icon.s-frozen { background: var(--status-frozen-bg); color: var(--status-frozen); }
.job-drawer-icon.s-waiting-input { background: var(--status-input-bg); color: var(--status-input); }

.job-drawer-title-wrap {
    flex: 1;
    min-width: 0;
}

.job-drawer-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* 작업 상태 배지 */
.job-drawer-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    white-space: nowrap;
}
.job-drawer-badge.s-running {
    background: var(--status-running-bg);
    color: var(--status-running);
}
.job-drawer-badge.s-running::before {
    content: '';
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--status-running);
    animation: dotPulse 2s infinite;
}
.job-drawer-badge.s-complete {
    background: var(--status-complete-bg);
    color: var(--status-complete);
}
.job-drawer-badge.s-error {
    background: var(--status-error-bg);
    color: var(--status-error);
}
.job-drawer-badge.s-cancelled {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled);
}
.job-drawer-badge.s-interrupted {
    background: var(--status-interrupted-bg);
    color: var(--status-interrupted);
}
.job-drawer-badge.s-frozen {
    background: var(--status-frozen-bg);
    color: var(--status-frozen);
}
.job-drawer-badge.s-triaging {
    background: var(--status-triaging-bg);
    color: var(--status-triaging);
}
.job-drawer-badge.s-triaging::before {
    content: '';
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--status-triaging);
    animation: dotPulse 2s infinite;
}
.job-drawer-badge.s-waiting-input {
    background: var(--status-input-bg);
    color: var(--status-input);
}

/* 경과 시간 */
.job-drawer-elapsed {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

/* 라운드 카운터 */
.job-drawer-round {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    color: var(--text-sub);
}

/* 닫기 버튼 */
.job-drawer-close {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-lg);
    cursor: pointer;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    flex-shrink: 0;
}
.job-drawer-close:hover {
    color: var(--text);
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}

/* ── Body (2-Column Layout) ── */
.job-drawer-body {
    flex: 1;
    display: grid;
    grid-template-columns: 260px 1fr;
    overflow: hidden;
    min-height: 0;
    /* §CQ5: 드로어 본문 너비별 그리드 적응 */
    container-type: inline-size;
    container-name: jddrawerbody;
}

/* ── 좌측 사이드바: 참여 에이전트 리스트 ── */
.job-drawer-sidebar {
    border-right: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* CQ: 사이드바 축소 모드 적응 */
    container-type: inline-size;
    container-name: jobsidebar;
}

.job-drawer-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    border-bottom: none;
    flex-shrink: 0;
}

/* 타이포 → label-caps (HTML 클래스) */
.job-drawer-sidebar-title { /* 레이아웃 전용 — 추가 속성 없음 */ }

/* ── CQ: jobsidebar 축소 모드 적응 ── */
@container jobsidebar (max-width: 200px) {
    .job-drawer-sidebar-header { padding: var(--s-2) var(--s-3); }
    .job-drawer-agent-count { font-size: var(--text-sm); padding: var(--s-1); }
}

.job-drawer-agent-count {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    color: var(--text-sub);
}

/* 에이전트 리스트 스크롤 */
.job-drawer-agents {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-2);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.job-drawer-agents::-webkit-scrollbar { width: var(--s-1); }
.job-drawer-agents::-webkit-scrollbar-track { background: transparent; }
.job-drawer-agents::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: var(--radius-s); }

/* ── 에이전트 미니 카드 ── */
.sd-agent-card {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    position: relative;
}
/* Tier 1.5 (Card-Subtle) — 소형 카드: hover-lift-sm + shadow-card-hover */
.sd-agent-card:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-card-hover);
}
.sd-agent-card:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.sd-agent-card.active {
    background: var(--surface-active);
    border-color: var(--accent);
}

/* 에이전트 상태 도트 */
.sd-agent-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    flex-shrink: 0;
}
.sd-agent-dot.s-working {
    background: var(--status-running);
    animation: dotPulse 2s infinite;
}
.sd-agent-dot.s-idle { background: var(--text-sub); opacity: 0.4; }
.sd-agent-dot.s-complete { background: var(--status-complete); }
.sd-agent-dot.s-error { background: var(--status-error); }
.sd-agent-dot.s-waiting {
    background: var(--status-waiting);
    animation: dotPulse 2s infinite;
}

/* 에이전트 아이콘 */
.sd-agent-icon {
    font-size: var(--text-reading);
    flex-shrink: 0;
    width: var(--s-5);
    text-align: center;
}

/* 에이전트 정보 */
.sd-agent-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.sd-agent-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sd-agent-role {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 에이전트 미니 상태 배지 */
.sd-agent-status {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    flex-shrink: 0;
    white-space: nowrap;
}
.sd-agent-status.s-working {
    background: var(--clr-success-bg-lg);
    color: var(--clr-success-bright);
}
.sd-agent-status.s-complete {
    background: var(--surface-active);
    color: var(--accent);
}
.sd-agent-status.s-error {
    background: var(--clr-error-bg-md);
    color: var(--clr-error-bright);
}
.sd-agent-status.s-waiting {
    background: var(--clr-purple-bg-md);
    color: var(--clr-purple-light);
}
.sd-agent-status.s-idle {
    background: var(--surface-hover);
    color: var(--text-sub);
}

/* ── 우측 메인: 타임라인 + 상세 ── */
.job-drawer-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* §CQ6: 드로어 메인 영역 탭/콘텐츠 적응 */
    container-type: inline-size;
    container-name: jdmain;
}

/* 탭 바 */
.job-drawer-tabs {
    display: flex;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-4);
    border-bottom: none;
    flex-shrink: 0;
    background: var(--bg-raised);
}
.sd-tab {
    padding: var(--s-1) var(--s-4);
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}
.sd-tab:hover {
    color: var(--text-sub);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-subtle);
}
.sd-tab:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.sd-tab.active {
    color: var(--accent);
    background: var(--surface-active);
}
.sd-tab-count {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    background: var(--surface-hover);
    color: var(--text-sub);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    min-width: var(--s-4-5);
    text-align: center;
}
.sd-tab.active .sd-tab-count {
    background: var(--surface-w12);
    color: var(--accent);
}

/* 메인 콘텐츠 스크롤 영역 */
.job-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4);
    scrollbar-width: thin;
    scrollbar-color: var(--surface-hover) transparent;
}
.job-drawer-content::-webkit-scrollbar { width: var(--s-1); }
.job-drawer-content::-webkit-scrollbar-track { background: transparent; }
.job-drawer-content::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: var(--radius-s); }

/* ── 라운드 타임라인 UI ── */
.sd-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

/* 라운드 아이템 */
.sd-round {
    position: relative;
    padding-left: var(--s-5);
}

/* 타임라인 세로선 */
.sd-round::before {
    content: '';
    position: absolute;
    left: var(--s-2-5);
    top: var(--s-5);
    bottom: 0;
    width: 1px;
    background: var(--line);
}
.sd-round:last-child::before {
    display: none;
}

/* 라운드 헤더 (번호 + 라벨) */
.sd-round-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    position: relative;
}
.sd-round-header:hover {
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* 라운드 번호 도트 */
.sd-round-dot {
    position: absolute;
    left: -28px;
    width: var(--s-5-0);
    height: var(--s-5-0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-extrabold);
    z-index: 1;
    flex-shrink: 0;
}
.sd-round-dot.active {
    background: var(--clr-success-bg-lg);
    color: var(--clr-success-bright);
    box-shadow: var(--shadow-ring-success);
    animation: dotPulse 2s infinite;
}
.sd-round-dot.done {
    background: var(--surface-w15);
    color: var(--accent);
}
.sd-round-dot.pending {
    background: var(--surface-hover);
    color: var(--text-sub);
}
.sd-round-dot.error {
    background: var(--clr-error-bg-md);
    color: var(--clr-error-bright);
}

/* 라운드 라벨 */
.sd-round-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text);
}

/* 라운드 타임스탬프 */
.sd-round-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* 라운드 쉐브론 */
.sd-round-chevron {
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: transform var(--smooth);
}
.sd-round.collapsed .sd-round-chevron {
    transform: rotate(-90deg);
}

/* 라운드 본문 (에이전트별 진행 상황) */
.sd-round-body {
    padding: var(--s-2) 0 var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    transition: max-height var(--smooth), opacity var(--smooth);
    overflow: hidden;
}
.sd-round.collapsed .sd-round-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── 라운드 내 에이전트 진행 카드 ── */
.sd-agent-progress {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    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);
}
.sd-agent-progress:hover {
    background: var(--surface-hover);
    border-color: transparent;
    transform: translateY(var(--hover-lift-sm));
}

/* 상태별 배경 틴트 */
.sd-agent-progress.s-working { background: color-mix(in srgb, var(--status-running) 8%, var(--surface)); }
.sd-agent-progress.s-complete { background: color-mix(in srgb, var(--status-complete) 8%, var(--surface)); }
.sd-agent-progress.s-error { background: color-mix(in srgb, var(--status-error) 8%, var(--surface)); }
.sd-agent-progress.s-waiting { background: color-mix(in srgb, var(--status-waiting) 8%, var(--surface)); }

/* 에이전트 진행 카드 아이콘 */
.sd-progress-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    width: var(--s-5-5);
    text-align: center;
    margin-top: var(--s-1);
}

/* 에이전트 진행 카드 정보 */
.sd-progress-info {
    flex: 1;
    min-width: 0;
}
.sd-progress-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.sd-progress-task {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    margin-top: var(--s-1);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd-progress-task:empty { display: none; }

/* 에이전트 진행 카드 메타 */
.sd-progress-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-1);
}
.sd-progress-elapsed {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}
.sd-progress-calls {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ── 작업 요약 탭 내용 ── */
.sd-summary {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.sd-summary-section {
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
}

/* label-caps 유틸리티 기반 — 타이포그래피 위계 통일 */
.sd-summary-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-sub);
    margin-bottom: var(--s-3);
}

/* Job 진행률 바 (실행 중일 때) */
.sd-progress-section {
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
}
.sd-progress-bar-container {
    height: var(--s-1);
    background: var(--surface-hover);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: var(--s-2);
}
.sd-progress-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-pill);
    transition: width var(--duration-moderate) var(--ease-in-out);
}
.sd-progress-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}

/* 요약 통계 그리드 */
.sd-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--s-2);
}

.sd-stat-item {
    padding: var(--s-3);
    background: var(--bg);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
}
.sd-stat-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}
.sd-stat-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    color: var(--text);
    letter-spacing: var(--tracking-tighter);
}
.sd-stat-value.accent { color: var(--accent); }
.sd-stat-value.success { color: var(--clr-success-bright); }
.sd-stat-value.error { color: var(--clr-error-bright); }
.sd-stat-value.warning { color: var(--clr-warning-light); }

/* 작업 명령 내용 블록 */
.sd-command-block {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text);
    padding: var(--s-4);
    background: var(--surface);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── 출력물 탭 내용 ── */
.sd-outputs-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.sd-output-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    cursor: pointer;
}
.sd-output-item:hover {
    background: var(--surface-hover);
    border-color: transparent;
    transform: translateY(var(--hover-lift-sm));
}
.sd-output-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}
.sd-output-info {
    flex: 1;
    min-width: 0;
}
.sd-output-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sd-output-detail {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}
.sd-output-agent {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-w8);
    color: var(--accent);
    flex-shrink: 0;
}

/* ── 메시지 탭 내용 ── */
.sd-messages-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sd-message {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    transition: background var(--motion-hover);
}
.sd-message:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.sd-message-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: var(--s-1);
    background: var(--accent);
}
.sd-message-body {
    flex: 1;
    min-width: 0;
}
.sd-message-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}
.sd-message-from {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text);
}
.sd-message-to {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.sd-message-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.sd-message-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    word-break: break-word;
}

/* ── 빈 상태 ── */
.sd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-6) var(--s-4);
    text-align: center;
}
.sd-empty-icon {
    width: var(--s-8);
    height: var(--s-8);
    border-radius: var(--radius);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    color: var(--text-sub);
    border: 1px solid transparent;
}
.sd-empty-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}

/* skeleton 에이전트 목록 아이템 (sd-summary 내부) */
.sd-skel-agent {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius);
    margin-top: var(--s-2);
}

/* 빈 요소 숨김 — 유령 공간 방지 */
.sd-agent-progress:empty,
.sd-timeline:empty,
.sd-outputs-list:empty,
.sd-messages-list:empty,
.sd-summary:empty {
    display: none;
}

/* ── Meta Bar (4칸 수평 통계) ── */
.job-drawer-metabar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-bottom: none;
    flex-shrink: 0;
    background: var(--surface);
}
.sd-metabar-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
}
.sd-metabar-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.sd-metabar-value {
    font-size: var(--text-reading);
    font-weight: var(--weight-extrabold);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}
.sd-metabar-value.accent { color: var(--accent); }
.sd-metabar-value.success { color: var(--clr-success-bright); }
.sd-metabar-value.live {
    color: var(--clr-success-bright);
    animation: dotPulse 2s infinite;
}

/* ── Footer 액션바 ── */
.job-drawer-footer {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-top: none;
    flex-shrink: 0;
    background: var(--bg-raised);
}

/* 수정지시 인풋 (running 상태) */
.sd-footer-input {
    flex: 1;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
    transition: border-color var(--motion-hover);
}
.sd-footer-input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-glow);
}
.sd-footer-input::placeholder {
    color: var(--text-sub);
}

/* 액션 버튼 (공통) */
.sd-footer-btn {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    border: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    display: flex;
    align-items: center;
    gap: var(--s-1);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 전송 버튼 */
.sd-footer-btn.send {
    background: var(--accent);
    color: var(--bg);
}
.sd-footer-btn.send:hover {
    background: var(--accent-deep);
    transform: translateY(var(--hover-lift-sm));
}
.sd-footer-btn.send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 취소 버튼 */
.sd-footer-btn.cancel {
    background: var(--clr-error-bg-md);
    color: var(--clr-error-bright);
    border: 1px solid var(--clr-error-bg-xl);
}
.sd-footer-btn.cancel:hover {
    background: var(--clr-error-bg-lg);
    transform: translateY(var(--hover-lift-sm));
}

/* 재시도 버튼 */
.sd-footer-btn.retry {
    background: var(--clr-warning-bg-md);
    color: var(--clr-warning-light);
    border: 1px solid var(--clr-warning-bg-xl);
}
.sd-footer-btn.retry:hover {
    background: var(--clr-warning-bg-lg);
    transform: translateY(var(--hover-lift-sm));
}

/* 닫기 버튼 (완료 상태) */
.sd-footer-btn.close {
    background: var(--surface);
    color: var(--text-sub);
    border: 1px solid transparent;
}
.sd-footer-btn.close:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* Footer 좌측 정보 */
.sd-footer-info {
    font-size: var(--text-sm);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-right: auto;
}

/* ── 작업 에이전트 카드 (JS renderSessionAgents에서 사용) ── */
.job-agent-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--duration-base) var(--easing-out),
                box-shadow var(--duration-base) var(--easing-out),
                transform var(--duration-base) var(--easing-out);
    border: 1px solid transparent;
    overflow: hidden;
    max-width: 100%;
    flex-wrap: wrap;
    position: relative;
}
/* Tier 1.5 (Card-Subtle) — 소형 카드: hover-lift-sm + shadow-card-hover */
.job-agent-card:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-card-hover);
}
.job-agent-card.agent-working {
    background: color-mix(in srgb, var(--clr-success-bright) 8%, var(--surface));
}
.job-agent-card.agent-error {
    background: color-mix(in srgb, var(--clr-error) 8%, var(--surface));
}
.job-agent-card.agent-complete {
    background: var(--surface-active);
}
.job-agent-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    width: var(--s-5-5);
    text-align: center;
}
.job-agent-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.job-agent-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-agent-role {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-agent-thinking {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    line-height: var(--leading-snug);
    max-height: var(--s-6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.job-agent-status {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   에이전트 카드 인라인 확장 (작업 드로어)
   ══════════════════════════════════════════ */

/* 쉐브론 표시 */
.job-agent-chevron {
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: transform var(--smooth), color var(--motion-hover);
    flex-shrink: 0;
    margin-left: var(--s-1);
}
.job-agent-card.expanded .job-agent-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

/* 현재 작업 한 줄 표시 */
.job-agent-task {
    font-size: var(--text-sm);
    color: var(--accent);
    margin-top: var(--s-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
    font-weight: var(--weight-medium);
    opacity: 0.85;
}
.job-agent-task:empty {
    display: none;
}

/* 확장 컨테이너 */
.job-agent-expand {
    width: 100%;
    flex-basis: 100%;
    grid-column: 1 / -1;
    max-height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height var(--smooth), opacity var(--smooth), padding var(--smooth);
}
.job-agent-card.expanded .job-agent-expand {
    opacity: 1;
    border-top: none;
    margin-top: var(--s-2);
    padding: var(--s-3) 0 var(--s-2);
}

/* 확장 내부 레이아웃 */
.sd-expand-section {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
}
.sd-expand-section:last-of-type {
    margin-bottom: var(--s-2);
}

/* 섹션 타이틀 (사고흐름, 최근 활동, ...) — label-caps 패턴 통일 */
.sd-expand-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}

/* 사고흐름 미니 스텝 */
.sd-expand-thinking-step {
    display: flex;
    align-items: flex-start;
    gap: var(--s-1);
    padding: var(--s-1) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.sd-expand-thinking-body {
    flex: 1;
    min-width: 0;
}
.sd-expand-thinking-label {
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-right: var(--s-1);
    white-space: nowrap;
}
.sd-expand-thinking-text {
    color: var(--text);
    font-size: var(--text-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 출력물 미리보기 */
.sd-expand-output-preview {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    max-height: var(--s-9-5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 메시지 카운트 */
.sd-expand-meta {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}

/* 빈 상태 */
.sd-expand-empty {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-style: italic;
    padding: var(--s-1) 0;
}
.sd-expand-empty:empty {
    display: none;
}

/* 전체 보기 버튼 */
.sd-expand-full-btn {
    display: block;
    width: 100%;
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    text-align: center;
    transition: background var(--motion-hover), border-color var(--motion-hover);
    margin-top: var(--s-1);
}
.sd-expand-full-btn:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}

/* 확장 내부 컨테이너 */
.sd-expand-inner {
    padding: var(--s-2) var(--s-3);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 진행률 바 (카드 내) */
.job-agent-pbar {
    height: 3px;
    background: var(--surface-hover);
    border-radius: var(--radius-s);
    margin-top: var(--s-1);
    overflow: hidden;
}
.job-agent-pfill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) ease;
}

/* 진행률 바 (확장 내) */
.sd-expand-progress {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.sd-expand-pbar {
    flex: 1;
    height: var(--s-1);
    background: var(--surface-hover);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.sd-expand-pfill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) ease;
}
.sd-expand-ptext {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--accent);
    flex-shrink: 0;
    min-width: var(--s-6);
    text-align: right;
}

/* 타임라인 아이템 (확장 내) */
.sd-expand-tl-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-1);
    padding: var(--s-1) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.sd-expand-tl-icon {
    flex-shrink: 0;
    font-size: var(--text-sm);
    width: var(--s-4);
    text-align: center;
}
.sd-expand-tl-body {
    flex: 1;
    min-width: 0;
}
.sd-expand-tl-label {
    color: var(--text);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
}
.sd-expand-tl-preview {
    display: block;
    color: var(--text-sub);
    font-size: var(--text-sm);
    margin-top: var(--s-1);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sd-expand-tl-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
    flex-shrink: 0;
    white-space: nowrap;
}

/* 사고흐름 스텝 (확장 내) */
.sd-expand-ts-icon {
    flex-shrink: 0;
    font-size: var(--text-sm);
    width: var(--s-4);
    text-align: center;
}
.sd-expand-ts-body {
    flex: 1;
    min-width: 0;
}
.sd-expand-ts-label {
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-right: var(--s-1);
    white-space: nowrap;
}
.sd-expand-ts-text {
    color: var(--text-sub);
    font-size: var(--text-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 출력 미리보기 (확장 내) */
.sd-expand-output {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    max-height: var(--s-9-5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* agentTimeline 이벤트 유형 — 타임라인 라벨 색상 */
.job-timeline-item.tl-agent-request_received .job-timeline-label {
    color: var(--clr-purple-light);
}
.job-timeline-item.tl-agent-request_sent .job-timeline-label {
    color: var(--clr-purple-light);
}
.job-timeline-item.tl-agent-response_complete .job-timeline-label {
    color: var(--accent);
}
.job-timeline-item.tl-agent-rate_limited .job-timeline-label {
    color: var(--clr-error-bright);
}
.job-timeline-item.tl-agent-thinking .job-timeline-label {
    color: var(--text-sub);
    font-weight: var(--weight-medium);
}

/* ── 작업 타임라인 (JS renderSessionTimeline에서 사용) ── */
.job-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: var(--s-4);
}
.job-timeline-list::before {
    content: '';
    position: absolute;
    left: var(--s-3-5);
    top: var(--s-3);
    bottom: var(--s-3);
    width: 2px;
    background: var(--line);
}
.job-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    position: relative;
    transition: opacity var(--smooth);
}
.job-timeline-item.active {
    background: var(--surface-active);
    border-radius: var(--radius-s);
    padding: var(--s-2) var(--s-3);
    margin: 0 calc(-1 * var(--s-3));
}
.job-timeline-dot {
    font-size: var(--text-reading);
    flex-shrink: 0;
    width: var(--s-5);
    text-align: center;
    position: relative;
    z-index: 1;
}
.job-timeline-body {
    flex: 1;
    min-width: 0;
}
.job-timeline-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.job-timeline-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.job-timeline-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    flex-shrink: 0;
    font-family: var(--font-mono);
}

/* ══════════════════════════════════════════
   타임라인 인터리빙 — 이벤트 유형별 시각 구분
   ══════════════════════════════════════════ */

/* 에이전트 시작 — teal 강조 */
.job-timeline-item.tl-agent-start .job-timeline-label {
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

/* 에이전트 진행 중 — 초록 */
.job-timeline-item.tl-agent-activity .job-timeline-label {
    color: var(--clr-success-bright);
}
.job-timeline-item.tl-agent-activity .job-timeline-dot {
    animation: tlDotPulse 1.5s var(--ease-in-out) infinite;
}
.job-timeline-item.tl-agent-activity .job-timeline-desc {
    color: var(--text-sub);
    font-style: italic;
}

/* 에이전트 완료 — accent */
.job-timeline-item.tl-agent-complete .job-timeline-label {
    color: var(--accent);
}

/* 에이전트 결과 도출 */
.job-timeline-item.tl-agent-result .job-timeline-label {
    color: var(--accent);
}

/* 에이전트 응답 */
.job-timeline-item.tl-agent-response .job-timeline-label {
    color: var(--accent-deep);
}

/* 에이전트 오류 — 빨간색 */
.job-timeline-item.tl-agent-error .job-timeline-label {
    color: var(--clr-error-bright);
}
.job-timeline-item.tl-agent-error {
    background: var(--clr-error-bg-xs);
    border-radius: var(--radius-s);
    padding-left: var(--s-1);
    padding-right: var(--s-1);
}

/* 에이전트 보류됨 (Rate Limit Deferred) — 반투명 */
.job-timeline-item.tl-agent-deferred .job-timeline-dot {
    opacity: 0.6;
}
.job-timeline-item.tl-agent-deferred .job-timeline-label {
    color: var(--text-sub);
    font-style: italic;
}

/* ══════════════════════════════════════════
   Rate Limit 미완료 작업 섹션 (Job Drawer)
   ══════════════════════════════════════════ */
.rl-failed-section {
    margin-top: var(--s-4);
    padding: var(--s-4);
    background: color-mix(in srgb, var(--status-triaging) 6%, transparent);
    border: 1px solid var(--status-triaging-bg);
    border-radius: var(--radius);
}
.rl-failed-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--status-triaging);
    margin-bottom: var(--s-3);
}
.rl-failed-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.rl-failed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
}
.rl-failed-item-info {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.rl-failed-item-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.rl-failed-item-task {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.rl-failed-item-meta {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.rl-failed-item-actions {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
}
.rl-failed-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
    margin-top: var(--s-3);
    padding-top: var(--s-3);
}

/* ══════════════════════════════════════════
   서브잡 분할 현황 패널
   ══════════════════════════════════════════ */
.sub-status-card {
    margin: var(--s-3) var(--s-4);
    padding: var(--s-3);
    background: var(--surface-w4);
    border-radius: var(--radius-s);
}
.sub-status-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-2);
}
.sub-status-counts {
    margin-left: auto;
    font-weight: var(--weight-normal);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.sub-status-bar {
    height: var(--s-1);
    background: var(--surface-w8);
    border-radius: var(--radius-s);
    overflow: hidden;
    margin-bottom: var(--s-3);
}
.sub-status-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) ease;
}
.sub-job-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.sub-job-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: background var(--motion-hover), transform var(--duration-base) var(--easing-spring);
}
.sub-job-row:hover {
    background: var(--surface-w8);
    transform: translateY(var(--hover-lift-sm));
}
.sub-job-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.sub-job-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.sub-job-status {
    flex-shrink: 0;
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ══════════════════════════════════════════
   Auth Circuit Breaker 상태 패널
   ══════════════════════════════════════════ */
.cb-status-card {
    margin: var(--s-3) var(--s-4);
    padding: var(--s-3);
    background: color-mix(in srgb, var(--clr-warning) 8%, transparent);
    border-radius: var(--radius-s);
}
.cb-status-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-warning);
    margin-bottom: var(--s-1);
}
.cb-status-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    padding-left: var(--s-5-0);
}
.cb-trip-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ══════════════════════════════════════════
   Rate Limit 일시정지 배너 (Job Drawer)
   ══════════════════════════════════════════ */
.rl-paused-banner {
    margin: var(--s-4);
    padding: var(--s-5);
    background: color-mix(in srgb, var(--status-triaging) 6%, transparent);
    border: 1px solid var(--status-triaging-bg);
    border-radius: var(--radius);
    text-align: center;
}
.rl-paused-icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--s-3);
}
.rl-paused-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--status-triaging);
    margin-bottom: var(--s-2);
    letter-spacing: var(--tracking-normal);
}
.rl-paused-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-4);
}
.rl-paused-timer {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-3);
}
.rl-paused-progress {
    height: var(--s-1);
    background: var(--surface-w6);
    border-radius: var(--radius-s);
    overflow: hidden;
    margin-bottom: var(--s-4);
}
.rl-paused-progress-bar {
    height: 100%;
    background: var(--status-triaging);
    border-radius: var(--radius-s);
    transition: width var(--duration-dramatic) linear;
}
.rl-paused-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: center;
}


/* 이전 작업 컨텍스트 감지 시스템 메시지 */
.status--context-resume {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: var(--s-4);
    text-align: left;
}
.context-resume-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.context-resume-job {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-3);
}
.context-resume-actions {
    display: flex;
    gap: var(--s-2);
}

/* 시스템 이벤트 (작업 시작/종료) — 도트 강조 */
.job-timeline-item.tl-system .job-timeline-dot {
    background: var(--surface-w8);
    border-radius: 50%;
    width: var(--s-5-5);
    height: var(--s-5-5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 시스템 상태 이벤트 */
.job-timeline-item.tl-system-status .job-timeline-label {
    color: var(--text-sub);
    font-weight: var(--weight-medium);
}

/* 클릭 가능한 타임라인 아이템 피드백 */
.job-timeline-item[style*="cursor:pointer"]:hover {
    background: var(--surface-hover);
    border-radius: var(--radius-s);
    transform: translateY(var(--hover-lift-sm));
}
.job-timeline-item[style*="cursor:pointer"]:hover .job-timeline-desc.expandable {
    color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}

/* REQUEST 이벤트 스타일 */
.job-timeline-item.tl-agent-request .job-timeline-label {
    color: var(--text-sub);
    font-weight: var(--weight-medium);
}

/* 하이라이트된 타임라인 이벤트 (사이드바 에이전트 선택 시) */
.job-timeline-item.tl-highlighted {
    background: var(--surface-active);
    border-radius: var(--radius-s);
    padding-left: var(--s-1);
    padding-right: var(--s-1);
}
.job-timeline-item.tl-highlighted .job-timeline-label {
    color: var(--accent);
}

/* dim 처리된 비선택 이벤트 */
.job-timeline-item.tl-dimmed {
    opacity: 0.25;
}

/* 라이브 활동 도트 펄스 */
@keyframes tlDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* 활성 타임라인 도트 펄스 */
.job-timeline-item.active .job-timeline-dot {
    animation: pulse-timeline-dot 1.5s var(--ease-in-out) infinite;
}
@keyframes pulse-timeline-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.job-timeline-desc.expandable {
    cursor: pointer;
    position: relative;
}
.job-timeline-desc.expandable:hover {
    color: var(--text);
    background: var(--surface-hover);
    border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-1);
    margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-1));
    transform: translateY(var(--hover-lift-sm));
}
.job-timeline-desc.expandable::after {
    content: ' ▸ 클릭하여 펼치기';
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.6;
}
.job-timeline-desc.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow-y: auto;
    max-height: 300px;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--surface);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    margin-top: var(--s-1);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-sub);
    scrollbar-width: thin;
}
.job-timeline-desc.expanded::after {
    content: ' ▾ 클릭하여 접기';
}

/* ── 작업 Drawer 명령어 블록 ── */
.job-drawer-command {
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
}
.job-drawer-command:empty {
    display: none;
}
.job-drawer-command-text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text);
    word-break: break-word;
}
/* 명령어 3줄 clamp */
.job-drawer-command-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.job-drawer-cmd-toggle {
    display: inline-block;
    margin-top: var(--s-1);
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--text-sm);
    cursor: pointer;
    font-family: var(--font);
}
.job-drawer-cmd-toggle:hover { text-decoration: underline; transform: translateY(var(--hover-lift-sm)); }

/* ── 작업 Drawer 탭 패널 ── */
.sd-tab-panel {
    padding: var(--s-3) 0;
}

/* ── 작업 메시지 그룹 ── */
.sd-msg-group {
    margin-bottom: var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
}
.sd-msg-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    border-bottom: none;
}
.sd-msg-group-count {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    background: var(--surface);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
}
.sd-msg-item {
    padding: var(--s-3);
    border-bottom: none;
}
.sd-msg-item:last-child {
    border-bottom: none;
}
.sd-msg-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}
.sd-msg-type {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: var(--tracking-wide);
}
.sd-msg-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
}
.sd-msg-body {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-sub);
    word-break: break-word;
}

/* ══════════════════════════════════════════
   Job Detail Drawer — Responsive
   ══════════════════════════════════════════ */

/* Tablet landscape */
@media (max-width: 960px) {
    .job-drawer {
        width: min(1100px, 96vw);
        height: min(85vh, 800px);
    }
    .job-drawer-body {
        grid-template-columns: 220px 1fr;
    }
    .sd-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .job-drawer-metabar {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--s-1);
        padding: var(--s-2) var(--s-4);
    }
    .sd-metabar-value {
        font-size: var(--text-base);
    }
    /* 인라인 확장: 사고흐름 텍스트 축소 */
    .sd-expand-thinking-text {
        font-size: var(--text-sm);
    }
}

/* Tablet portrait */
@media (max-width: 768px) {
    .job-drawer {
        width: 100%;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0;
        /* iOS safe area — 상단(노치/상태바) + 하단 잘림 방지 */
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .job-drawer-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .job-drawer-main {
        min-height: 0;
    }
    /* 사이드바를 상단 수평 스크롤 에이전트 리스트로 변환 — 모바일에서 축소 */
    .job-drawer-sidebar {
        border-right: none;
        border-bottom: none;
        max-height: var(--s-16);
        flex-shrink: 0;
    }
    .job-drawer-agents {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: var(--s-1);
        padding: var(--s-2);
        scrollbar-width: none;
    }
    .job-drawer-agents::-webkit-scrollbar { display: none; }
    .sd-agent-card {
        flex-shrink: 0;
        min-width: clamp(120px, 20vw, 180px);
    }
    .sd-agent-role { display: none; }
    /* job-agent-card도 수평 스크롤 시 min-width 보장 */
    .job-agent-card {
        flex-shrink: 0;
        min-width: clamp(140px, 22vw, 200px);
    }
    .job-agent-role { display: none; }
    /* 타임라인 간격 축소 */
    .sd-agent-progress {
        padding: var(--s-2);
    }
    .job-drawer-content {
        padding: var(--s-3);
    }
    /* Meta Bar 2x2 그리드 */
    .job-drawer-metabar {
        grid-template-columns: repeat(2, 1fr);
        padding: var(--s-2) var(--s-4);
    }
    /* Footer 세로 정렬 */
    .job-drawer-footer {
        flex-wrap: wrap;
        padding: var(--s-3) var(--s-4);
    }
    .sd-footer-input {
        width: 100%;
        order: 1;
    }
    .sd-footer-info {
        order: 0;
        width: 100%;
    }
    /* 인라인 확장: 수평 사이드바에서 확장 영역 간소화 */
    .job-agent-expand {
        max-width: var(--layout-lg);
    }
    .sd-expand-thinking-step {
        font-size: var(--text-sm);
    }
    .sd-expand-thinking-text {
        -webkit-line-clamp: 1;
        font-size: var(--text-sm);
    }
    .sd-expand-output-preview {
        -webkit-line-clamp: 2;
        font-size: var(--text-sm);
    }
    /* 타임라인 본문 축소 */
    .job-timeline-desc {
        -webkit-line-clamp: 1;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .job-drawer-header {
        padding: var(--s-2) var(--s-3);
        flex-wrap: wrap;
        gap: var(--s-1);
    }
    .job-drawer-icon {
        width: var(--s-5-5);
        height: var(--s-5-5);
        font-size: var(--text-base);
    }
    .job-drawer-meta {
        flex-wrap: wrap;
        gap: var(--s-1);
        font-size: var(--text-sm);
    }
    .job-drawer-sidebar {
        max-height: var(--s-11);
    }
    .job-drawer-sidebar-header {
        padding: var(--s-1) var(--s-3);
    }
    .job-drawer-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        padding: var(--s-2) var(--s-3);
    }
    .job-drawer-tabs::-webkit-scrollbar { display: none; }
    .sd-tab {
        font-size: var(--text-sm);
        padding: var(--s-1) var(--s-3);
        white-space: nowrap;
    }
    .job-drawer-content {
        padding: var(--s-3);
    }
    .sd-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .sd-agent-progress {
        flex-direction: column;
        gap: var(--s-1);
    }
    .sd-round {
        padding-left: var(--s-5);
    }
    .sd-round-dot {
        left: -24px;
        width: var(--s-4-5);
        height: var(--s-4-5);
        font-size: var(--text-sm);
    }
    /* Meta Bar 2x2 유지, 패딩 축소 */
    .job-drawer-metabar {
        padding: var(--s-2) var(--s-3);
        gap: var(--s-1);
    }
    .sd-metabar-item {
        padding: var(--s-1) var(--s-2);
    }
    .sd-metabar-value {
        font-size: var(--text-sm);
    }
    /* Footer 축소 */
    .job-drawer-footer {
        padding: var(--s-2) var(--s-3);
        gap: var(--s-1);
    }
    .sd-footer-btn {
        padding: var(--s-1) var(--s-3);
        font-size: var(--text-sm);
    }
    /* 640px 이하: 인라인 확장 비활성화 — 카드 클릭 시 바로 openDrawer 전환 */
    .job-agent-chevron {
        display: none;
    }
    .job-agent-expand {
        display: none;
    }
    /* 에이전트 카드 가로 스크롤 시 min-width 보장 */
    .job-agent-card {
        flex-shrink: 0;
        min-width: clamp(120px, 20vw, 180px);
    }
    /* 타임라인 서술 — 1줄 줄임 */
    .job-timeline-desc {
        -webkit-line-clamp: 1;
    }
}

/* Small mobile */
@media (max-width: 375px) {
    .job-drawer-header {
        padding: var(--s-1) var(--s-2);
    }
    .job-drawer-title {
        font-size: var(--text-sm);
    }
    .sd-stats-grid {
        grid-template-columns: 1fr;
    }
    .job-drawer-sidebar {
        max-height: var(--s-10);
    }
    .sd-agent-card {
        min-width: clamp(100px, 18vw, 160px);
        padding: var(--s-1) var(--s-2);
    }
    .job-agent-card {
        min-width: clamp(100px, 18vw, 160px);
        padding: var(--s-1) var(--s-2);
    }
    .sd-agent-name { font-size: var(--text-sm); }
    .job-agent-name { font-size: var(--text-sm); }
    /* Meta Bar 1x4 세로 */
    .job-drawer-metabar {
        grid-template-columns: repeat(2, 1fr);
        padding: var(--s-1) var(--s-3);
    }
    .sd-metabar-value {
        font-size: var(--text-sm);
    }
    .sd-metabar-label {
        font-size: var(--text-sm);
    }
    /* Footer 풀 폭 버튼 */
    .job-drawer-footer {
        padding: var(--s-2) var(--s-3);
    }
    .sd-footer-btn {
        flex: 1;
        justify-content: center;
    }
}

/* 클릭 가능한 타임라인 아이템 — hover 효과 (onclick 기반) */
.job-timeline-item[onclick] {
    cursor: pointer;
    border-radius: var(--radius-s);
    transition: background var(--motion-hover);
}
.job-timeline-item[onclick]:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.job-timeline-item[onclick]:active {
    background: var(--surface-hover);
}

/* ══════════════════════════════════════════
   작업 드로어 — 인라인 확장 반응형
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .job-agent-expand {
        font-size: var(--text-sm);
    }
    .sd-expand-thinking-step {
        font-size: var(--text-sm);
    }
    .sd-expand-thinking-text {
        font-size: var(--text-sm);
    }
    .sd-expand-output-preview {
        font-size: var(--text-sm);
        max-height: var(--s-7-5);
    }
}

@media (max-width: 375px) {
    .job-timeline-desc {
        display: none;
    }
    .job-timeline-time {
        font-size: var(--text-sm);
    }
}

/* ══════════════════════════════════════════
   Agent Template System Modal
   ══════════════════════════════════════════ */

/* ── Settings Entry Card ── */
.cmd-tool-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-s);
    transition: background var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    cursor: default;
}
/* Tier 1.5 (Card-Subtle) — 소형 카드: hover-lift-sm + shadow-card-hover */
.cmd-tool-card:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-card-hover);
}
.cmd-tool-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    width: var(--s-5-5);
    text-align: center;
}
.cmd-tool-info {
    flex: 1;
    min-width: 0;
}
.cmd-tool-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.cmd-tool-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Template Modal Container ── */
.tpl-modal {
    width: clamp(480px, 60vw, 720px);
    max-width: 94vw;
}

/* ── Template Modal Tabs ── */
.tpl-tabs {
    display: flex;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}
.tpl-tab {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-pill);
    border: none;
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-sm);
    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-weight: var(--weight-semibold);
    font-family: var(--font);
}
.tpl-tab.active {
    background: var(--accent);
    color: var(--accent-on);
    box-shadow: var(--glow-accent);
}
.tpl-tab:hover:not(.active) {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.tpl-tab-content {
    display: none;
}
.tpl-tab-content.active {
    display: block;
    animation: fadeIn var(--duration-base) var(--easing-smooth);
}

/* ── Team Selector ── */
.tpl-team-select {
    width: auto;
    min-width: var(--card-min-sm);
    padding: var(--s-2) var(--s-3);
    padding-right: var(--s-6);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background-color: var(--bg);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    margin-bottom: var(--s-5);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239399a8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
}
.tpl-team-select:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-glow);
}

/* ── Preset Grid ── */
.tpl-preset-grid {
    display: flex;
    gap: var(--s-4);
}

/* ── Preset Card ── */
.tpl-preset-card {
    flex: 1;
    min-width: 0;
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    transition: border-color var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    cursor: pointer;
}
.tpl-preset-card:hover:not(.active) {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-card-hover);
}
.tpl-preset-card.active {
    border-color: var(--accent);
    background: var(--surface-active);
    box-shadow: var(--shadow-ring-glow-combo);
    cursor: default;
}

/* ── Preset Card Header ── */
.tpl-preset-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.tpl-preset-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}
.tpl-preset-name {
    font-size: var(--text-reading);
    font-weight: var(--weight-bold);
    color: var(--text);
}
.tpl-preset-card.active .tpl-preset-name {
    color: var(--accent);
}

/* ── Preset Card Description ── */
.tpl-preset-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-4);
    line-height: var(--leading-snug);
}

/* ── Preset Model Summary ── */
.tpl-preset-summary {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-4);
}
.tpl-preset-summary-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
}
.tpl-preset-summary-model {
    color: var(--text);
    font-weight: var(--weight-medium);
    flex: 1;
    min-width: 0;
}
.tpl-preset-summary-count {
    font-weight: var(--weight-bold);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}
.tpl-preset-summary-row .tpl-model-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    flex-shrink: 0;
}
.tpl-model-dot.opus { background: var(--accent); }
.tpl-model-dot.codex { background: var(--clr-info); }
.tpl-model-dot.sonnet { background: var(--clr-purple); }
.tpl-model-dot.haiku { background: var(--clr-warning); }

/* ── Preset Card Actions ── */
.tpl-preset-actions {
    border-top: none;
    padding-top: var(--s-4);
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.tpl-preset-apply {
    width: 100%;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    border: none;
    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);
}
.tpl-preset-apply.btn-apply {
    background: var(--surface-hover);
    color: var(--text-sub);
}
.tpl-preset-apply.btn-apply:hover {
    background: var(--accent);
    color: var(--accent-on);
    transform: translateY(var(--hover-lift-sm));
}
.tpl-preset-apply.btn-active {
    background: var(--surface-active);
    color: var(--accent);
    cursor: default;
}
.tpl-preset-apply.btn-applying {
    background: var(--surface);
    color: var(--text-sub);
    cursor: wait;
}

/* ── Preset Detail Toggle ── */
.tpl-preset-detail-toggle {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    font-family: var(--font);
    padding: var(--s-1) 0;
    transition: color var(--motion-hover);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.tpl-preset-detail-toggle:hover {
    color: var(--text-sub);
    transform: translateY(var(--hover-lift-sm));
}
.tpl-preset-detail-toggle .arrow {
    display: inline-block;
    transition: transform var(--smooth);
    font-size: var(--text-sm);
}
.tpl-preset-detail-toggle.open .arrow {
    transform: rotate(90deg);
}

/* ── Preset Detail (Accordion) ── */
.tpl-preset-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--smooth);
}
.tpl-preset-detail.open {
    max-height: 600px;
}
.tpl-preset-detail-inner {
    padding-top: var(--s-3);
}
.tpl-preset-detail-squad {
    margin-bottom: var(--s-3);
}
.tpl-preset-detail-squad:last-child {
    margin-bottom: 0;
}
.tpl-preset-detail-squad-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}
.tpl-preset-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-1) 0;
    font-size: var(--text-sm);
}
.tpl-preset-detail-agent {
    color: var(--text-sub);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}
.tpl-preset-detail-model {
    color: var(--text-sub);
    font-size: var(--text-sm);
}
.tpl-preset-detail-row.changed .tpl-preset-detail-model {
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

/* ── Active Badge ── */
.tpl-active-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-w5);
}

/* ── Modal Footer Info ── */
.tpl-footer-info {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

/* ══════════════════════════════════════════
   Template Modal — Custom Templates Tab
   ══════════════════════════════════════════ */

.tpl-custom-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.tpl-custom-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--bg-raised);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color var(--motion-hover);
}
.tpl-custom-item:hover {
    border-color: transparent;
    transform: translateY(var(--hover-lift-sm));
}
.tpl-custom-item-info {
    flex: 1;
    min-width: 0;
}
.tpl-custom-item-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.tpl-custom-item-summary {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}
.tpl-custom-item-date {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}
.tpl-custom-item-actions {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
}
.tpl-custom-item .tpl-menu-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-reading);
    cursor: pointer;
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    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);
}
.tpl-custom-item .tpl-menu-btn:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ── Empty State ── */
.tpl-custom-empty {
    text-align: center;
    padding: var(--s-6) var(--s-4);
    color: var(--text-sub);
}
.tpl-custom-empty-icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--s-3);
    opacity: 0.5;
}
.tpl-custom-empty-text {
    font-size: var(--text-sm);
    margin-bottom: var(--s-4);
}

/* ── Create Button ── */
.tpl-create-btn {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    border: 1.5px dashed var(--line-bold);
    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);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    margin-top: var(--s-4);
}
.tpl-create-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ══════════════════════════════════════════
   Template Modal — Custom Editor
   ══════════════════════════════════════════ */

.tpl-editor {
    display: none;
}
.tpl-editor.active {
    display: block;
    animation: fadeIn var(--duration-base) var(--easing-smooth);
}
.tpl-editor-header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.tpl-editor-back {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-reading);
    cursor: pointer;
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    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);
}
.tpl-editor-back:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.tpl-editor-title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    letter-spacing: var(--tracking-normal);
}

/* ── Squad Sections ── */
.tpl-editor-squad {
    margin-bottom: var(--s-5);
}
.tpl-editor-squad:last-of-type {
    margin-bottom: 0;
}
.tpl-editor-squad-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-sub);
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
    border-bottom: none;
}
.tpl-editor-row {
    display: grid;
    grid-template-columns: 130px 1fr 1fr;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-1) 0;
}
.tpl-editor-agent-name {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpl-editor-select {
    padding: var(--s-1) var(--s-3);
    padding-right: var(--s-5);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background-color: var(--bg);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239399a8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    transition: border-color var(--motion-hover);
}
.tpl-editor-select:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-glow);
}

/* ── Editor Summary Bar ── */
.tpl-editor-summary {
    position: sticky;
    bottom: 0;
    background: var(--bg-raised);
    border-top: none;
    padding: var(--s-4);
    margin: var(--s-5) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 0 var(--radius) var(--radius);
}
.tpl-editor-summary-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.tpl-editor-summary-text strong {
    color: var(--text);
    font-weight: var(--weight-semibold);
}
.tpl-editor-summary-actions {
    display: flex;
    gap: var(--s-2);
}

/* ══════════════════════════════════════════
   Template Modal — CLI Login Tab
   ══════════════════════════════════════════ */

.tpl-cli-section {
    margin-bottom: var(--s-5);
}
.tpl-cli-section:last-child {
    margin-bottom: 0;
}
.tpl-cli-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-sub);
    margin-bottom: var(--s-3);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.tpl-cli-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}
.tpl-cli-card {
    padding: var(--s-5);
    background: var(--bg-raised);
    border: 1px solid transparent;
    border-radius: var(--radius);
}
.tpl-cli-status {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--s-4);
}
.tpl-cli-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    flex-shrink: 0;
}
.tpl-cli-status.connected .tpl-cli-dot {
    background: var(--clr-success);
    box-shadow: var(--shadow-glow-success-xs);
}
.tpl-cli-status.connected {
    color: var(--clr-success-bright);
}
.tpl-cli-status.disconnected .tpl-cli-dot {
    background: var(--clr-error);
}
.tpl-cli-status.disconnected {
    color: var(--clr-error-bright);
}
.tpl-cli-status.warning .tpl-cli-dot {
    background: var(--clr-warning);
    box-shadow: var(--shadow-glow-warning-xs);
}
.tpl-cli-status.warning {
    color: var(--clr-warning-bright);
}
.tpl-cli-status.pending .tpl-cli-dot {
    background: var(--clr-warning);
    animation: dotPulse 2s infinite;
}
.tpl-cli-status.pending {
    color: var(--clr-warning-light);
}
.tpl-cli-detail {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-loose);
}
.tpl-cli-detail-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.tpl-cli-detail-label {
    color: var(--text-sub);
    min-width: var(--s-8);
}
.tpl-cli-actions {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-4);
    justify-content: flex-end;
}
.tpl-cli-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--s-4);
}

/* ── CLI Login Progress (Codex login 진행 중) ── */
.tpl-cli-login-progress {
    padding: var(--s-4);
    background: var(--clr-warning-bg-sm);
    border: 1px solid var(--clr-warning-border);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-4);
    text-align: center;
}
.tpl-cli-login-spinner {
    width: var(--s-5);
    height: var(--s-5);
    border: 2px solid var(--surface-hover);
    border-top-color: var(--clr-warning);
    border-radius: 50%;
    margin: 0 auto var(--s-2);
    animation: spin var(--duration-dramatic) linear infinite;
}
.tpl-cli-login-msg {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-warning-light);
    margin-bottom: var(--s-2);
}
.tpl-cli-login-url {
    display: inline-block;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--accent);
    word-break: break-all;
    text-decoration: underline;
    margin-bottom: var(--s-1);
}
.tpl-cli-login-url:hover {
    color: var(--accent-deep);
    transform: translateY(var(--hover-lift-sm));
}
.tpl-cli-login-sub {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ── CLI Usage Bar ── */
.tpl-cli-usage {
    margin: var(--s-3) 0;
}
.tpl-cli-usage-bar {
    width: 100%;
    height: var(--s-1-5);
    border-radius: var(--radius-s);
    background: var(--surface);
    overflow: hidden;
}
.tpl-cli-usage-fill {
    height: 100%;
    border-radius: var(--radius-s);
    background: var(--accent);
    transition: width var(--motion-hover);
}
.tpl-cli-usage-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    display: flex;
    justify-content: space-between;
}

/* ── CLI Path Row ── */
.tpl-cli-paths {
    margin-top: var(--s-5);
}
.tpl-cli-path-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    font-size: var(--text-sm);
}
.tpl-cli-path-label {
    color: var(--text-sub);
    font-weight: var(--weight-semibold);
    min-width: var(--s-9-5);
}
.tpl-cli-path-value {
    color: var(--text-sub);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    flex: 1;
}
.tpl-cli-path-status {
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   CLI Auth Sync (서버 동기화)
   ══════════════════════════════════════════ */

.tpl-cli-sync {
    margin-top: var(--s-4);
}
.tpl-cli-sync-divider {
    height: 1px;
    background: var(--line);
    margin-bottom: var(--s-4);
}
.tpl-cli-sync-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
}
.tpl-cli-sync-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
}

/* Badge */
.tpl-cli-sync-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    line-height: var(--leading-snug);
}
.tpl-cli-sync-badge.synced {
    background: var(--clr-success-bg-sm);
    color: var(--clr-success-bright);
    border: 1px solid var(--clr-success-border);
}
.tpl-cli-sync-badge.need-sync {
    background: var(--clr-warning-bg-sm);
    color: var(--clr-warning-light);
    border: 1px solid var(--clr-warning-border);
}
.tpl-cli-sync-badge.no-server {
    background: var(--clr-error-bg-sm);
    color: var(--clr-error-bright);
    border: 1px solid var(--clr-error-border);
}
.tpl-cli-sync-badge.no-local {
    background: var(--surface);
    color: var(--text-sub);
    border: 1px solid var(--surface-hover);
}
.tpl-cli-sync-badge.syncing {
    background: var(--surface-active);
    color: var(--accent);
    border: 1px solid var(--line-bold);
    animation: dotPulse 2s infinite;
}

/* Status Grid */
.tpl-cli-sync-status {
    font-size: var(--text-sm);
    margin-bottom: var(--s-3);
}
.tpl-cli-sync-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-1) 0;
}
.tpl-cli-sync-label {
    color: var(--text-sub);
    min-width: var(--s-12);
}
.tpl-cli-sync-value {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--text-sub);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}
.tpl-cli-sync-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-sub);
}
.tpl-cli-sync-dot.connected {
    background: var(--clr-success);
    box-shadow: var(--shadow-glow-success-xs);
}
.tpl-cli-sync-dot.disconnected {
    background: var(--clr-error);
}

/* Actions */
.tpl-cli-sync-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}
.tpl-cli-sync-auto-label {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
    user-select: none;
}
.tpl-cli-sync-auto-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: var(--s-3-5);
    height: var(--s-3-5);
    cursor: pointer;
}

/* Feedback */
.tpl-cli-sync-feedback {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
}
.tpl-cli-sync-feedback.success {
    background: var(--clr-success-bg-sm);
    color: var(--clr-success-bright);
    border: 1px solid var(--clr-success-border);
}
.tpl-cli-sync-feedback.error {
    background: var(--clr-error-bg-sm);
    color: var(--clr-error-bright);
    border: 1px solid var(--clr-error-border);
}
.tpl-cli-sync-feedback.loading {
    background: var(--surface);
    color: var(--text-sub);
    border: 1px solid var(--surface-hover);
}
.tpl-cli-sync-spinner {
    width: var(--s-3-5);
    height: var(--s-3-5);
    border: 2px solid var(--surface-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin var(--duration-dramatic) linear infinite;
    flex-shrink: 0;
}
.tpl-cli-sync-feedback-text {
    flex: 1;
}

/* Sync Reason (동기화 사유 경고) */
.tpl-cli-sync-reason {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-3);
    margin-bottom: var(--s-3);
    border-radius: var(--radius-s);
    background: var(--clr-warning-bg-sm);
    color: var(--clr-warning-light);
    border: 1px solid var(--clr-warning-border);
    line-height: var(--leading-normal);
}

/* Auto-sync Indicator (활성 시 초록 펄스 dot) */
.tpl-cli-sync-auto-indicator {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--clr-success);
    box-shadow: var(--shadow-glow-success-xs);
    animation: dotPulse 2s infinite;
    flex-shrink: 0;
}

/* Watcher dot 상태별 */
.tpl-cli-sync-dot.watching {
    background: var(--accent);
    box-shadow: var(--shadow-dot-accent);
    animation: dotPulse 2s infinite;
}

/* 640px 이하 모바일 */
@media (max-width: 640px) {
    .tpl-cli-sync-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-3);
    }
    .tpl-cli-sync-auto-label {
        justify-content: center;
    }
}

/* ══════════════════════════════════════════
   Setup Token Guide
   ══════════════════════════════════════════ */
.st-guide { margin-top: var(--s-4); }
.st-guide-divider {
    height: 1px;
    background: var(--line);
    margin-bottom: var(--s-4);
}
.st-guide-header {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    position: relative;
    padding-right: var(--s-5-5);
}
.st-guide-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.st-guide-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.st-guide-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.st-guide-badge.active {
    background: var(--surface-w15);
    color: var(--accent);
}
.st-guide-badge.expired {
    background: var(--clr-error-bg-lg);
    color: var(--clr-error-bright);
}
.st-guide-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-snug);
}
.st-guide-chevron {
    position: absolute;
    top: var(--s-1);
    right: 0;
    color: var(--text-sub);
    transition: transform var(--smooth);
}
.st-guide-chevron.open { transform: rotate(180deg); }

/* 가이드 본문 */
.st-guide-body {
    margin-top: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

/* 상태 표시 */
.st-status {
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius-s);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.st-status-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
}
.st-status-label {
    color: var(--text-sub);
    min-width: var(--s-9);
}
.st-status-value { color: var(--text); }

/* 단계별 가이드 */
.st-steps {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.st-step {
    display: flex;
    gap: var(--s-3);
}
.st-step-num {
    width: var(--s-5);
    height: var(--s-5);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-w8);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    margin-top: var(--s-0);
    transition: background var(--smooth), color var(--smooth), box-shadow var(--smooth);
}

/* Step Indicator 상태별 비주얼 */
.st-step--pending .st-step-num {
    background: var(--surface);
    color: var(--text-sub);  /* WCAG AA: --text-faint는 카드 배경 위 ~4.4:1 미충족 → --text-sub(5.2:1) */
}
.st-step--current .st-step-num {
    background: var(--surface-active);
    color: var(--accent);
    box-shadow: var(--shadow-ring-accent);
}
.st-step--completed .st-step-num {
    background: var(--green-bg);
    color: var(--green);
}
/* 미완료 단계 텍스트 흐리게 */
.st-step--pending .st-step-title,
.st-step--pending .st-step-desc,
.st-step--pending .st-step-note {
    opacity: 0.5;
}
/* 완료 단계 제목 — 보조 색상으로 전환 */
.st-step--completed .st-step-title {
    color: var(--text-sub);
}
.st-step-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.st-step-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.st-step-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}
.st-step-note {
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.8;
    line-height: var(--leading-normal);
}
.st-step-note strong {
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

/* Setup Token — OS 비교 카드 행/카드 (inline style → 클래스 전환) */
.st-os-row { display: flex; gap: var(--s-2); margin-top: var(--s-1); flex-wrap: wrap; }
.st-os-card { flex: 1; min-width: 100px; padding: var(--s-1) var(--s-2); background: var(--surface); border-radius: var(--radius-s); }
.st-os-card-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.st-os-card-desc { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); line-height: var(--leading-normal); }
/* Setup Token — 출력 예시 프리뷰 */
.st-output-preview { margin-top: var(--s-1); padding: var(--s-1) var(--s-2); background: var(--bg); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-sub); }
.st-output-preview .st-value { color: var(--accent); }

/* 커맨드 복사 블록 */
.st-cmd {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    background: var(--bg);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--motion-hover);
    max-width: 100%;
}
.st-cmd:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.st-cmd code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-cmd svg { flex-shrink: 0; color: var(--text-sub); }
.st-cmd-inline {
    cursor: pointer;
    transition: opacity var(--motion-hover);
}
.st-cmd-inline:hover { opacity: 0.8; transform: translateY(var(--hover-lift-sm)); }
.st-cmd-inline code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent);
}

/* 토큰 입력 */
.st-token-input-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-1);
}
.st-token-input {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    resize: vertical;
    min-height: var(--s-9-5);
    line-height: var(--leading-normal);
    /* AC-SEC-5: 토큰 평문 시각 노출 방지 — 기본 마스킹 */
    -webkit-text-security: disc;
    -moz-text-security: disc;
    text-security: disc;
}
.st-token-input.st-unmasked {
    -webkit-text-security: none;
    -moz-text-security: none;
    text-security: none;
}
.st-token-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-accent);
}
.st-token-input::placeholder {
    color: var(--text-sub);
    opacity: 0.5;
}
/* 토큰 입력 액션 (토글 + 저장) */
.st-token-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
}
.st-token-toggle {
    background: none;
    border: none;
    padding: var(--s-1);
    cursor: pointer;
    color: var(--text-sub);
    border-radius: var(--radius-s);
    transition: background var(--motion-hover), color var(--motion-hover);
    display: flex;
    align-items: center;
}
.st-token-toggle:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.st-save-btn {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}
.st-save-feedback {
    font-size: var(--text-sm);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    line-height: var(--leading-normal);
}
.st-save-feedback.success {
    background: var(--clr-success-bg-md);
    color: var(--clr-success-bright);
}
.st-save-feedback.error {
    background: var(--clr-error-bg-md);
    color: var(--clr-error-bright);
}

/* 현재 토큰 표시 */
.st-current {
    padding: var(--s-3) var(--s-4);
    background: var(--surface-w5);
    border-radius: var(--radius-s);
}
.st-current-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}
.st-current-value-wrap {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.st-current-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text);
    word-break: break-all;
    flex: 1;
    min-width: 0;
}
.st-current-copy {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: var(--s-1);
    cursor: pointer;
    color: var(--text-sub);
    border-radius: var(--radius-s);
    transition: background var(--motion-hover);
}
.st-current-copy:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }

/* 참고 사항 */
.st-info {
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius-s);
}
.st-info-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--s-2);
}
.st-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.st-info-list li {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    padding-left: var(--s-3-5);
    position: relative;
}
.st-info-list li::before {
    content: '·';
    position: absolute;
    left: var(--s-1);
    color: var(--accent);
    font-weight: bold;
}

/* ══════════════════════════════════════════
   Setup Token Guide — stg-* 위저드
   ══════════════════════════════════════════ */

/* 프로그레스 인디케이터 */
.stg-progress {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
}
.stg-progress-item {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    opacity: 0.45;
    transition: opacity var(--duration-base) var(--easing-out);
}
.stg-progress-item.active,
.stg-progress-item.done { opacity: 1; }
.stg-progress-dot {
    width: var(--s-5-0);
    height: var(--s-5-0);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-hover);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    transition: background var(--duration-base) var(--easing-out),
                color var(--duration-base) var(--easing-out),
                box-shadow var(--duration-base) var(--easing-out);
}
.stg-progress-item.active .stg-progress-dot {
    background: var(--surface-active);
    color: var(--accent);
    box-shadow: var(--shadow-ring-accent);
}
.stg-progress-item.done .stg-progress-dot {
    background: var(--green-bg);
    color: var(--green);
}
.stg-progress-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
}
.stg-progress-line {
    flex: 1;
    height: 1px;
    min-width: var(--s-3);
    background: var(--line);
}

/* 카드 (각 스텝) */
.stg-card {
    padding: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-2);
    transition: opacity var(--duration-base) var(--easing-out);
}
.stg-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.stg-card-num {
    width: var(--s-5);
    height: var(--s-5);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-w8);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}
.stg-card-header-text { flex: 1; min-width: 0; }
/* 타이포 → heading-sm (HTML 클래스에 위임) */
.stg-card-title {
    margin: 0;
}
.stg-card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin: var(--s-1) 0 0;
    line-height: var(--leading-normal);
}

/* 힌트 바 */
.stg-hint {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-2);
    line-height: var(--leading-normal);
}
.stg-hint svg { flex-shrink: 0; color: var(--accent); opacity: 0.7; }
.stg-hint strong { color: var(--text); }

/* 명령어 복사 블록 */
.stg-cmd-block {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--bg);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--duration-base) var(--easing-out),
                box-shadow var(--duration-base) var(--easing-out);
    margin-bottom: var(--s-2);
}
.stg-cmd-block:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.stg-cmd-block:active { transform: scale(var(--active-scale)); }
.stg-cmd-sm { padding: var(--s-1) var(--s-2); margin-bottom: var(--s-1); }
.stg-cmd-prompt {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
    user-select: none;
}
.stg-cmd-text {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stg-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    transition: color var(--duration-fast) var(--easing-out),
                background var(--duration-fast) var(--easing-out);
    flex-shrink: 0;
}
.stg-copy-btn:hover { color: var(--accent); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }

/* 플로우 설명 */
.stg-flow {
    margin-bottom: var(--s-2);
}
.stg-flow-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}
.stg-flow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.stg-flow-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}
.stg-flow-list li svg { flex-shrink: 0; margin-top: var(--s-0); }
.stg-flow-list li strong { color: var(--text); }

/* FAQ 접기/펼치기 */
.stg-faq {
    margin-top: var(--s-1);
}
.stg-faq summary {
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
    padding: var(--s-1) 0;
    transition: color var(--duration-fast) var(--easing-out);
    list-style: none;
}
.stg-faq summary::-webkit-details-marker { display: none; }
.stg-faq summary::before {
    content: '▸';
    display: inline-block;
    margin-right: var(--s-1);
    transition: transform var(--duration-fast) var(--easing-out);
}
.stg-faq[open] summary::before { transform: rotate(90deg); }
.stg-faq summary:hover { color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); }
.stg-faq-body {
    padding: var(--s-1) var(--s-2);
    margin-top: var(--s-1);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}
.stg-faq-body p { margin: 0; }
.stg-faq-body strong { color: var(--text); }

/* 토큰 입력 */
.stg-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
}
.stg-token-input {
    flex: 1;
    padding: var(--s-1) var(--s-2);
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    transition: border-color var(--duration-base) var(--easing-out),
                box-shadow var(--duration-base) var(--easing-out);
}
.stg-token-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-accent);
}
.stg-token-input::placeholder {
    color: var(--text-sub);
    opacity: 0.5;
}
.stg-eye-btn {
    background: none;
    border: none;
    padding: var(--s-1);
    cursor: pointer;
    color: var(--text-sub);
    border-radius: var(--radius-s);
    transition: color var(--duration-fast) var(--easing-out),
                background var(--duration-fast) var(--easing-out);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.stg-eye-btn:hover { color: var(--text); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
/* eye 아이콘 토글 — off/on 전환 */
.stg-eye-off,
.stg-eye-on { display: block; }
.stg-eye-on.hidden { display: none; }

/* 저장 버튼 */
.stg-save-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--duration-base) var(--easing-out),
                transform var(--duration-instant) ease;
    font-family: var(--font);
}
.stg-save-btn:hover { background: var(--accent-deep); transform: translateY(var(--hover-lift-sm)); }
.stg-save-btn:active { transform: scale(var(--active-scale-btn)); }
.stg-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 피드백 */
.stg-feedback {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    margin-top: var(--s-1);
    line-height: var(--leading-normal);
}
.stg-feedback.success {
    background: var(--clr-success-bg-md);
    color: var(--clr-success-bright);
}
.stg-feedback.error {
    background: var(--clr-error-bg-md);
    color: var(--clr-error-bright);
}

/* 상태 카드 (Step 3) */
.stg-status-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--surface-hover);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-2);
}
.stg-status-icon { flex-shrink: 0; color: var(--text-sub); margin-top: var(--s-0); }
.stg-status-icon.ok { color: var(--green); }
.stg-status-icon.err { color: var(--clr-error-bright); }
.stg-status-body { flex: 1; min-width: 0; }
.stg-status-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.stg-status-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    line-height: var(--leading-normal);
}

/* 메타 정보 */
.stg-meta {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
}
.stg-meta-row {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
}
.stg-meta-label { color: var(--text-sub); min-width: 56px; }
.stg-meta-value { color: var(--text-sub); }

/* 안내 노트 */
.stg-note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-1);
    padding: var(--s-1) 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);
}
.stg-note svg { flex-shrink: 0; color: var(--accent); opacity: 0.6; margin-top: var(--s-0); }
.stg-note strong { color: var(--accent); }

/* ══════════════════════════════════════════
   Setup Token Modal — st-prereq / st-verify
   ══════════════════════════════════════════ */

/* 사전 요구사항 */
.st-prereq {
    padding: var(--s-3) var(--s-4);
    background: color-mix(in srgb, var(--amber) 6%, transparent);
    border-radius: var(--radius-s);
    margin-top: var(--s-3);
}
.st-prereq-title {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--amber);
    margin-bottom: var(--s-2);
}
.st-prereq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.st-prereq-list li {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    padding-left: var(--s-3-5);
    position: relative;
}
.st-prereq-list li::before {
    content: '·';
    position: absolute;
    left: var(--s-1);
    color: var(--amber);
    font-weight: bold;
}
.st-prereq-list li strong { color: var(--text); }

/* 검증 결과 */
.st-verify-result {
    font-size: var(--text-sm);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    margin-top: var(--s-2);
    line-height: var(--leading-normal);
}
.st-verify-result.success {
    background: var(--clr-success-bg-md);
    color: var(--clr-success-bright);
}
.st-verify-result.error {
    background: var(--clr-error-bg-md);
    color: var(--clr-error-bright);
}

/* 문제 해결 (Troubleshoot) 접기 */
.st-troubleshoot {
    margin-top: var(--s-2);
}
.st-troubleshoot summary {
    font-size: var(--text-sm);
    color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
    cursor: pointer;
    padding: var(--s-1) 0;
    transition: color var(--anim-fast, 120ms) var(--easing-out, ease);
    list-style: none;
}
.st-troubleshoot summary::-webkit-details-marker { display: none; }
.st-troubleshoot summary::before {
    content: '▸';
    display: inline-block;
    margin-right: var(--s-1);
    transition: transform var(--anim-fast, 120ms) var(--easing-out, ease);
}
.st-troubleshoot[open] summary::before { transform: rotate(90deg); }
.st-troubleshoot summary:hover { color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); }
/* auth-setup 위저드 스타일은 components.css에 통합됨 */
/* ══════════════════════════════════════════
   Template Confirm Modal (Diff)
   ══════════════════════════════════════════ */

.tpl-confirm-modal {
    width: var(--layout-2xl);
    max-width: 92vw;
}
.tpl-confirm-header {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    margin-bottom: var(--s-4);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.tpl-confirm-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-5);
}
.tpl-confirm-diff {
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: var(--s-4);
    max-height: 300px;
    overflow-y: auto;
}
.tpl-confirm-diff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
    font-size: var(--text-sm);
}
.tpl-confirm-diff-title {
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.tpl-confirm-diff-count {
    font-size: var(--text-sm);
    color: var(--accent);
    font-weight: var(--weight-bold);
}
.tpl-confirm-diff-row {
    display: grid;
    grid-template-columns: 110px 1fr auto 1fr;
    gap: var(--s-2);
    align-items: center;
    padding: var(--s-1) 0;
    font-size: var(--text-sm);
    border-bottom: none;
}
.tpl-confirm-diff-row:last-child {
    border-bottom: none;
}
.tpl-confirm-diff-agent {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.tpl-confirm-diff-old {
    color: var(--text-sub);
    text-decoration: line-through;
    font-size: var(--text-sm);
}
.tpl-confirm-diff-arrow {
    color: var(--accent);
    font-size: var(--text-sm);
    text-align: center;
}
.tpl-confirm-diff-new {
    color: var(--accent);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
}

/* ── Unchanged Section ── */
.tpl-confirm-unchanged {
    margin-top: var(--s-4);
}
.tpl-confirm-unchanged-toggle {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    font-family: var(--font);
    padding: 0;
    transition: color var(--motion-hover);
}
.tpl-confirm-unchanged-toggle:hover {
    color: var(--text-sub);
    transform: translateY(var(--hover-lift-sm));
}
.tpl-confirm-unchanged-list {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    line-height: var(--leading-relaxed);
    display: none;
}
.tpl-confirm-unchanged-list.open {
    display: block;
}

/* ── Confirm Warning Banner ── */
.tpl-confirm-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--clr-warning-bg-sm);
    border: 1px solid var(--clr-warning-bg-lg);
    border-radius: var(--radius-s);
    margin-top: var(--s-4);
    font-size: var(--text-sm);
    color: var(--clr-warning-light);
    line-height: var(--leading-normal);
}
.tpl-confirm-warning-icon {
    flex-shrink: 0;
    font-size: var(--text-base);
}
.tpl-confirm-footer {
    display: flex;
    gap: var(--s-3);
    justify-content: flex-end;
    margin-top: var(--s-5);
}

/* ══════════════════════════════════════════
   Template Modal — Responsive
   ══════════════════════════════════════════ */

/* 960px — 프리셋 카드 약간 축소 */
@media (max-width: 960px) {
    .tpl-modal {
        width: var(--layout-2xl);
    }
    .tpl-preset-card {
        padding: var(--s-4);
    }
    .tpl-preset-name {
        font-size: var(--text-base);
    }
}

/* 768px — 카드 축소, 에디터 1열 */
@media (max-width: 768px) {
    .tpl-modal {
        width: 90vw;
    }
    .tpl-preset-grid {
        gap: var(--s-3);
    }
    .tpl-preset-card {
        padding: var(--s-4);
    }
    .tpl-preset-desc {
        font-size: var(--text-sm);
    }
    .tpl-editor-row {
        grid-template-columns: 110px 1fr 1fr;
    }
    .tpl-confirm-diff-row {
        grid-template-columns: 90px 1fr auto 1fr;
    }
}

/* 640px — 프리셋 세로 스택, 에디터 단순화 */
@media (max-width: 640px) {
    .tpl-modal {
        width: 95vw;
    }
    .tpl-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .tpl-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .tpl-preset-grid {
        flex-direction: column;
    }
    .tpl-preset-card {
        padding: var(--s-4);
    }
    .tpl-editor-row {
        grid-template-columns: 1fr;
        gap: var(--s-1);
        padding: var(--s-2) 0;
        border-bottom: none;
    }
    .tpl-editor-agent-name {
        font-weight: var(--weight-semibold);
        color: var(--text);
    }
    .tpl-confirm-diff-row {
        grid-template-columns: 1fr;
        gap: var(--s-1);
        padding: var(--s-3) 0;
    }
    .tpl-confirm-diff-arrow {
        display: none;
    }
    .tpl-confirm-diff-new::before {
        content: '→ ';
        color: var(--accent);
    }
    .tpl-custom-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .tpl-custom-item-actions {
        align-self: flex-end;
    }
}

/* 375px — 풀스크린 시트 */
@media (max-width: 375px) {
    .tpl-modal {
        width: 100vw;
        max-width: 100vw;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 92vh;
    }
    .tpl-tabs {
        gap: var(--s-1);
    }
    .tpl-tab {
        padding: var(--s-1) var(--s-3);
        font-size: var(--text-sm);
    }
    .tpl-preset-summary {
        padding: var(--s-2);
    }
    .tpl-preset-summary-row {
        font-size: var(--text-sm);
    }
    .tpl-team-select {
        width: 100%;
    }
    .tpl-confirm-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 92vh;
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

/* ═══ 비용 추정 바 ═══ */
.tpl-cost-bar {
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
}
.tpl-cost-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-2);
}
.tpl-cost-bar-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.tpl-cost-bar-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text);
    font-family: var(--font-mono);
}
.tpl-cost-bar-track {
    position: relative;
    height: var(--s-2);
    background: var(--surface-active);
    border-radius: var(--radius-pill);
    overflow: visible;
    margin-bottom: var(--s-2);
}
.tpl-cost-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--gradient-accent);
    transition: width var(--motion-hover), background var(--motion-hover);
    min-width: var(--s-2);
}
.tpl-cost-bar-fill.high-cost { background: var(--clr-warning); }
.tpl-cost-bar-fill.low-cost { background: var(--clr-success); }
.tpl-cost-bar-marker {
    position: absolute;
    top: -6px;
    width: var(--s-5-0);
    height: var(--s-5-0);
    border-radius: 50%;
    background: var(--bg-raised);
    border: 2px solid var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-extrabold);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    pointer-events: none;
}
.tpl-cost-bar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tpl-cost-bar-savings {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-success);
}
.tpl-cost-bar-savings.no-savings { color: var(--text-sub); }
.tpl-cost-bar-detail {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ═══ Squad 일괄 변경 헤더 ═══ */
.tpl-squad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) 0;
    margin-top: var(--s-4);
    border-bottom: none;
}
.tpl-squad-header:first-child { margin-top: 0; }
.tpl-squad-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.tpl-squad-batch {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.tpl-squad-batch-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
}
.tpl-squad-batch-select {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-2);
    background-color: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--text-sub);
    cursor: pointer;
    transition: border-color var(--motion-hover);
}
.tpl-squad-batch-select:hover { border-color: var(--accent); transform: translateY(var(--hover-lift-sm)); }
.tpl-squad-batch-select:focus { border-color: var(--accent); outline: none; }

/* ═══ 에이전트 역할 추천 힌트 ═══ */
.tpl-agent-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: var(--s-1);
    font-style: italic;
}

/* ═══ 프리셋 카드 비용 표시 ═══ */
.tpl-preset-cost {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) 0;
    border-top: none;
    margin-top: var(--s-2);
}
.tpl-preset-cost-value {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    font-family: var(--font-mono);
}
.tpl-preset-cost-period {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.tpl-preset-cost-savings {
    margin-left: auto;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--clr-success-bg-sm);
    color: var(--clr-success);
}
.tpl-preset-cost-savings.baseline {
    background: var(--surface);
    color: var(--text-sub);
}

/* ═══ 확인 모달 비용 비교 ═══ */
.tpl-confirm-cost {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3);
    margin: var(--s-3) 0;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
}
.tpl-confirm-cost-item {
    text-align: center;
    flex: 1;
}
.tpl-confirm-cost-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--s-1);
}
.tpl-confirm-cost-amount {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-family: var(--font-mono);
    color: var(--text);
}
.tpl-confirm-cost-arrow {
    font-size: var(--text-lg);
    color: var(--text-sub);
}
.tpl-confirm-cost-delta {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-success);
}
.tpl-confirm-cost-delta.increase {
    color: var(--clr-warning);
}

/* ═══ 인라인 프리셋 세그먼트 컨트롤 (AC-1) ═══ */
/* 모달 내부에서만 적용 — config bar(.config-tpl-group) 오염 방지 */
.tpl-modal .tpl-segment-control {
    display: inline-flex;
    gap: var(--s-1);
    background: var(--bg);
    border-radius: var(--radius-pill);
    padding: var(--s-1);
    border: 1px solid transparent;
    margin-top: var(--s-1);
}
.tpl-modal .tpl-segment-btn {
    padding: var(--s-1) var(--s-3);
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    font-family: var(--font);
    letter-spacing: var(--tracking-wide);
}
.tpl-modal .tpl-segment-btn.active {
    background: var(--accent);
    color: var(--bg);
}
.tpl-modal .tpl-segment-btn:hover:not(.active):not(:disabled) {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
/* 세그먼트 버튼 disabled 상태 (적용 진행 중 등) */
.tpl-modal .tpl-segment-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* 설정 카드 상세 관리 링크 */
.tpl-settings-link {
    font-size: var(--text-sm);
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
    padding: var(--s-1) var(--s-2);
}
.tpl-settings-link:hover {
    text-decoration: underline;
    transform: translateY(var(--hover-lift-sm));
}

/* ═══ 비용 절감율 뱃지 (AC-7) ═══ */
.tpl-cost-badge {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    margin-top: var(--s-1);
    display: inline-block;
}
.tpl-cost-badge.baseline {
    background: var(--surface-w8);
    color: var(--accent);
}
.tpl-cost-badge.saving {
    background: var(--clr-green-bg-sm);
    color: var(--clr-success-vivid);
}

/* ═══ 편집기 기반 프리셋 선택기 (AC-4) ═══ */
.tpl-editor-base-selector {
    display: flex;
    align-items: center;
    padding: var(--s-2) var(--s-4);
    border-bottom: none;
    background-color: var(--bg-raised);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: var(--s-2);
}
.tpl-editor-base-selector .tpl-segment-control {
    margin-top: 0;
    margin-left: var(--s-2);
}

/* ══════════════════════════════════════════
   Template Constraints (hardLock / noCodex)
   ══════════════════════════════════════════ */

/* ── hardLock 에이전트 행 ── */
.tpl-editor-row.hard-locked {
    background: var(--clr-warning-bg-xs);
    border-radius: var(--radius);
    padding: var(--s-1) var(--s-2);
    margin: var(--s-1) 0;
}

/* ── 잠금 아이콘 (에이전트명 옆) ── */
.tpl-lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-4);
    height: var(--s-4);
    font-size: var(--text-sm);
    flex-shrink: 0;
    cursor: help;
    position: relative;
}

/* ── 잠금 아이콘 툴팁 ── */
.tpl-lock-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--s-1) var(--s-3);
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--clr-warning-light);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-hover);
    z-index: 10;
    box-shadow: var(--shadow);
}
.tpl-lock-icon[data-tooltip]:hover::after {
    opacity: 1;
}

/* ── disabled 드롭다운 (hardLock 에이전트) ── */
.tpl-editor-select:disabled,
.tpl-editor-select.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--surface);
    border-color: var(--line);
    pointer-events: none;
}

/* ── noCodex 뱃지 (Codex 비허용 에이전트) ── */
.tpl-nocodex-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-info);
    background: var(--clr-info-bg-xs);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* ── constraint 위반 에러 (인라인) ── */
.tpl-constraint-error {
    font-size: var(--text-sm);
    color: var(--clr-error-bright);
    padding: var(--s-1) var(--s-2);
    background: var(--clr-error-bg-xs);
    border: 1px solid var(--clr-error-bg-md);
    border-radius: var(--radius-s);
    margin-top: var(--s-1);
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.tpl-constraint-error-icon {
    flex-shrink: 0;
    font-size: var(--text-sm);
}

/* ── constraint 경고 배너 (편집기 상단) ── */
.tpl-constraint-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--clr-warning-bg-xs);
    border: 1px solid var(--clr-warning-border);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-4);
    font-size: var(--text-sm);
    color: var(--clr-warning-light);
    line-height: var(--leading-normal);
}
.tpl-constraint-banner-icon {
    flex-shrink: 0;
    font-size: var(--text-base);
}

/* ── codexRecommended 힌트 (구현 에이전트) ── */
.tpl-codex-hint {
    font-size: var(--text-sm);
    color: var(--clr-success);
    font-style: italic;
    white-space: nowrap;
}

/* ── 확인 모달 constraint 경고 ── */
.tpl-confirm-constraint-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--clr-error-bg-xs);
    border: 1px solid var(--clr-error-bg-md);
    border-radius: var(--radius-s);
    margin-top: var(--s-3);
    font-size: var(--text-sm);
    color: var(--clr-error-bright);
    line-height: var(--leading-normal);
}

/* ══════════════════════════════════════════
   Inline Style Migration — Modal Section (L900-1350)
   ══════════════════════════════════════════ */

/* -- Drawer header: icon + info 영역 -- */
/* 기본 스타일은 components.css에서 정의. 여기선 flex:1만 보충 */
.drawer-header-info { flex: 1; }

/* -- Job drawer actions bar -- */
.sd-actions-bar { display: flex; gap: var(--s-2); }

/* -- Manychat modal box -- */
.mc-modal-box {
    max-width: var(--layout-2xl);
    border-radius: var(--radius);
    border: none;
}

/* -- Modal title (large bold) -- */
.modal-title-lg {
    font-size: var(--text-reading);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
}

/* -- PDF badge: flex content area -- */
.mc-pdf-badge-content { flex: 1; min-width: 0; }

/* -- Radio/checkbox label 스타일 -- */
.mc-radio-label {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.mc-radio-label-disabled {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.45;
}

/* -- Manychat caption textarea -- */
.mc-caption-textarea {
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
}

/* -- Manychat browser bot toggle label -- */
.mc-browser-toggle-label {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
}

/* -- Manychat auto-label hint -- */
.mc-auto-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* -- Manychat progress section (non-display properties) -- */
.mc-progress-box {
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
}

/* -- Progress header text -- */
.mc-progress-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text);
}

/* -- Progress pulsing dot indicator -- */
.mc-progress-dot {
    display: inline-block;
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    background: var(--clr-warning);
    animation: dotPulse 1.5s infinite;
}

/* -- Progress steps text -- */
.mc-progress-steps {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-loose);
}

/* -- Manychat result box (non-display properties) -- */
.mc-result-box {
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
}

/* -- Deploy section container (non-display properties) -- */
.mc-deploy-box {
    background: linear-gradient(135deg, var(--clr-green-bg-xs), var(--clr-purple-bg-2xs));
    border: 1px solid var(--clr-success-border);
    border-radius: var(--radius);
}

/* -- Deploy success title -- */
.mc-deploy-success-title {
    font-size: var(--text-base);
    font-weight: var(--weight-extrabold);
    color: var(--clr-success-vivid);
}

/* -- Deploy success check icon -- */
.mc-deploy-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5);
    height: var(--s-5);
    border-radius: 50%;
    background: var(--clr-green-bg-lg);
    font-size: var(--text-sm);
}

/* -- Deploy description text -- */
.mc-deploy-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}

/* -- Deploy caption preview box -- */
.mc-deploy-caption-box {
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
    max-height: var(--s-12);
    overflow-y: auto;
    white-space: pre-wrap;
}

/* -- Deploy action buttons -- */
.mc-btn-deploy {
    flex: 1;
    background: linear-gradient(135deg, var(--clr-success-vivid), var(--clr-success-deep));
    color: var(--text);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
    box-shadow: var(--shadow-glow-success-lg);
}
.mc-btn-deploy:hover {
    box-shadow: var(--shadow-glow-success-xl);
    filter: brightness(var(--hover-brightness));
    transform: translateY(var(--hover-lift-sm));
}

.mc-btn-deploy-cancel {
    background: var(--surface);
    color: var(--text-sub);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.mc-btn-deploy-cancel:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* -- Deploy result text -- */
.mc-deploy-result-text { font-size: var(--text-sm); }

/* -- Instagram link section (non-display properties) -- */
.mc-insta-link-box {
    background: linear-gradient(135deg, var(--clr-error-bg-xs), var(--clr-pink-bg-xs));
    border: 1px solid var(--clr-pink-bg-md);
    border-radius: var(--radius);
}

/* mc-insta-title 타이포 → heading-sm (HTML 클래스), 색상 → pages.css */

/* -- Instagram emoji icon size -- */
.mc-insta-icon { font-size: var(--text-reading); }

/* -- Instagram section body text -- */
.mc-insta-body {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-relaxed);
}

/* -- Inline muted parenthetical -- */
.mc-insta-aside { color: var(--text-sub); }

/* -- Manual link summary -- */
.mc-manual-summary {
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
}

/* -- Instagram URL input -- */
.mc-insta-url-input {
    flex: 1;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    border-radius: var(--radius-s);
}

/* -- Instagram link button -- */
.mc-btn-insta-link {
    background: linear-gradient(135deg, var(--clr-pink-insta), var(--clr-pink-insta-bright));
    color: var(--text);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
}
.mc-btn-insta-link:hover {
    filter: brightness(var(--hover-brightness));
    transform: translateY(var(--hover-lift-sm));
}

/* -- Keyword input -- */
.mc-keyword-input {
    flex: 1;
    font-size: var(--text-sm);
    border-radius: var(--radius-s);
}

/* -- Keyword hint -- */
.mc-keyword-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
}

/* -- Instagram link result text -- */
.mc-insta-link-result { font-size: var(--text-sm); }

/* -- Modal footer with top border -- */
.mc-modal-footer-bordered {
    border-top: none;
}

/* -- Manychat submit button -- */
.mc-btn-submit-primary {
    background: var(--gradient-accent);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    box-shadow: var(--shadow-glow-accent);
}
.mc-btn-submit-primary:hover {
    box-shadow: var(--shadow-glow-teal-md);
    filter: brightness(var(--hover-brightness));
    transform: translateY(var(--hover-lift-sm));
}

/* -- Monospace config input (small) -- */
.mc-config-input-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* -- Config small label -- */
.mc-config-label-sm { font-size: var(--text-sm); }

/* -- Config tiny monospace input -- */
.mc-config-input-mono-sm {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* -- Config hint (tiny muted) -- */
.mc-config-hint-xs {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* -- Config section divider -- */
.mc-config-section-divider {
    border-top: none;
}

/* -- Config description text -- */
.mc-config-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* -- Config action button inline (tiny) -- */
.mc-config-action-sm { font-size: var(--text-sm); }

/* -- Config field label (tiny muted) -- */
.mc-config-field-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* -- Config dropdown (medium) -- */
.mc-config-select { font-size: var(--text-sm); }

/* -- Bot fields list box (non-display properties) -- */
.mc-bot-fields-box {
    font-size: var(--text-sm);
    color: var(--text-sub);
    max-height: var(--s-16);
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
}

/* -- Browser config label (cursor + font) -- */
.mc-browser-config-label {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* -- Block label (display block for label) -- */
.mc-block-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    display: block;
}

/* -- Config save button (accent) -- */
.mc-btn-save-purple { background: var(--accent-deep); }
.mc-btn-save-purple:hover { background: var(--accent); transform: translateY(var(--hover-lift-sm)); }

/* -- Workflow config modal box -- */
.mc-wf-modal-box {
    max-width: clamp(480px, 60vw, 720px);
    border-radius: var(--radius);
    border: none;
}

/* -- Workflow config hint (inline override) -- */
/* .modal-hint already covers color:var(--text-sub);font-size:11px; */

/* -- Workflow editor textarea (tall monospace) -- */
.mc-wf-editor-textarea {
    min-height: var(--layout-xl);
    font-family: var(--font-mono);
}

/* -- Workflow modal sub-hint -- */
.mc-wf-hint-sm {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* -- Prompt upgrade preview box -- */
.mc-prompt-preview-box {
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    max-height: var(--s-20);
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: var(--leading-snug);
}

/* -- Prompt upgrade ref button -- */
.mc-prompt-ref-btn { font-size: var(--text-sm); }


/* ═══════════════════════════════════════════
   Codex Setup Wizard
   ═══════════════════════════════════════════ */

/* Step Indicator */
.codex-steps {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) 0;
    margin-bottom: var(--s-4);
}

.codex-step {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.codex-step-circle {
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    background: var(--surface);
    color: var(--text-sub);
    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);
}

.codex-step.active .codex-step-circle {
    background: var(--accent);
    color: var(--accent-on);
}

.codex-step.done .codex-step-circle {
    background: var(--green-bg);
    color: var(--green);
}

.codex-step-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
}

.codex-step.active .codex-step-label { color: var(--text); }
.codex-step.done .codex-step-label { color: var(--text-sub); }

.codex-step-line {
    flex: 1;
    height: 1px;
    background: var(--line);
    min-width: var(--s-4);
}

.codex-step-line.done { background: var(--green); }

.codex-step-indicator-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-align: center;
    margin-top: var(--s-1);
}

/* Wizard Container */
.codex-wizard {
    padding: var(--s-4);
}

.codex-wizard-content {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.codex-wizard-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.codex-wizard-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}

/* Install Box */
.codex-install-box {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.codex-install-step {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
}

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

.codex-install-detail {
    flex: 1;
    min-width: 0;
}

.codex-install-title {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
    margin-bottom: var(--s-1);
}

.codex-install-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: var(--s-2) var(--s-3);
    background: var(--bg);
    border-radius: var(--radius-s);
    color: var(--accent);
    cursor: pointer;
    transition: background var(--motion-hover);
    word-break: break-all;
}

.codex-install-code:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }

/* Info Card */
.codex-info-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--s-3);
}

.codex-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-1) 0;
}

.codex-info-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.codex-info-value {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: var(--weight-medium);
}

.codex-info-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent);
}

/* Auth Link */
.codex-auth-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    text-decoration: none;
}

.codex-auth-link:hover { filter: brightness(var(--hover-brightness)); text-decoration: none; transform: translateY(var(--hover-lift-sm)); }
.codex-auth-link-icon { font-size: var(--text-base); }
.codex-auth-link-text { line-height: var(--leading-none); }
.codex-auth-link-arrow { font-size: var(--text-sm); opacity: 0.7; }

/* Buttons */
.codex-login-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}

.codex-login-btn:hover { filter: brightness(var(--hover-brightness)); transform: translateY(var(--hover-lift-sm)); }

.codex-logout-btn {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    background: var(--red-bg);
    color: var(--red);
    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);
}

.codex-logout-btn:hover { background: var(--clr-error-bg-lg); transform: translateY(var(--hover-lift-sm)); }

/* Benefit List */
.codex-benefit-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.codex-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.codex-benefit-icon {
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: var(--s-0);
}

/* Error / Success */
.codex-error-box {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--red-bg);
    border-radius: var(--radius);
}

.codex-error-icon { color: var(--red); flex-shrink: 0; font-size: var(--text-base); margin-top: var(--s-0); }
.codex-error-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--red); }
.codex-error-text { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); }

.codex-success-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--green);
}

/* Note / Hint */
.codex-note {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius);
}

.codex-note-icon { font-size: var(--text-base); flex-shrink: 0; margin-top: var(--s-0); }
.codex-note-body { flex: 1; min-width: 0; }
.codex-note-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.codex-note-text { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); line-height: var(--leading-normal); }
.codex-note-info { color: var(--teal); }
.codex-note-tip { color: var(--accent); }

.codex-path-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}

.codex-path-input-wrap {
    display: flex;
    gap: var(--s-2);
    align-items: center;
}

/* Pending State */
.codex-pending-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-5);
    text-align: center;
}

.codex-pending-spinner {
    width: var(--s-6);
    height: var(--s-6);
    border: 3px solid var(--surface-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin var(--duration-dramatic) linear infinite;
}
.codex-spin { animation: spin var(--duration-dramatic) linear infinite; }

.codex-pending-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.codex-pending-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.codex-pending-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--amber);
    animation: pgDotPulse 2s infinite;
}

.codex-pending-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    text-align: left;
    width: 100%;
}

.codex-checklist-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

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

.codex-copy-icon {
    display: inline-flex;
    color: var(--text-sub);
    margin-left: var(--s-1);
    cursor: pointer;
    transition: color var(--motion-hover);
}

.codex-copy-icon:hover { color: var(--accent); transform: translateY(var(--hover-lift-sm)); }

.codex-countdown {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}

.codex-troubleshoot {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-3);
}

.codex-troubleshoot a { color: var(--accent); }

/* ══════════════════════════════════════════
   프로젝트 레지스트리 모달
   ══════════════════════════════════════════ */
.registry-modal { width: var(--layout-2xl); max-width: 92vw; }

.registry-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-height: 50vh;
    overflow-y: auto;
}

.registry-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: border-color var(--smooth), transform var(--smooth), box-shadow var(--smooth), background var(--smooth);
}
/* Tier 1.5 (Card-Subtle) — border 남용 금지 규칙: border-color 제거, shadow-card-hover 통일 */
.registry-card:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-card-hover); }

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

.registry-card-body { flex: 1; min-width: 0; }

.registry-card-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.registry-card-meta {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.registry-card-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--card-min-sm);
}

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

.registry-card-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: var(--s-1);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    transition: color var(--smooth), background var(--smooth);
}
.registry-card-btn:hover { color: var(--text); background: var(--bg-raised); transform: translateY(var(--hover-lift-sm)); }
.registry-card-btn--danger:hover { color: var(--clr-error-bright); transform: translateY(var(--hover-lift-sm)); }

.registry-empty {
    text-align: center;
    padding: var(--s-8) var(--s-4);
    color: var(--text-sub);
    font-size: var(--text-sm);
}

/* 편집 폼 */
.registry-edit-form {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
}

.registry-edit-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-3);
    letter-spacing: var(--tracking-normal);
}

.registry-field {
    margin-bottom: var(--s-3);
}

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

.registry-required { color: var(--clr-error-bright); }

.registry-input {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    transition: border-color var(--smooth);
}
.registry-input:focus {
    outline: none;
    border-color: var(--accent);
}
.registry-input::placeholder { color: var(--text-sub); }

/* ── §CQ2 Container Query: 모달 내부 2열→1열 적응 ── */
@container modalbody (max-width: 480px) {
    .shortcut-field-row {
        grid-template-columns: 1fr;
    }
    .create-modal-body {
        padding: var(--s-3) var(--s-4);
        gap: var(--s-3);
    }
}
/* ── §CQ5 Container Query: 드로어 본문 좁은 폭 — 사이드바 숨김 ── */
@container jddrawerbody (max-width: 560px) {
    .job-drawer-body {
        grid-template-columns: 1fr;
    }
    .job-drawer-sidebar {
        display: none;
    }
}

/* ── §CQ6 Container Query: 드로어 메인 탭 축소 ── */
@container jdmain (max-width: 480px) {
    .sd-tab {
        padding: var(--s-1) var(--s-2);
        font-size: var(--text-sm);
    }
    .job-drawer-tabs {
        gap: var(--s-1);
        padding: var(--s-1) var(--s-2);
    }
}

/* ── Instagram 댓글→DM 자동화 모달 ── */
.ig-dm-modal-box {
    max-width: var(--layout-2xl);
    border-radius: var(--radius);
    border: none;
}

/* 섹션 카드 */
.ig-dm-section {
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-3) var(--s-4);
    margin-top: var(--s-4);
}
.ig-dm-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-2);
}

/* 마스터 토글 행 */
.ig-dm-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ig-dm-toggle-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
/* 토글 스위치 */
.ig-dm-switch { position: relative; width: var(--s-7-5); height: var(--s-5-0); cursor: pointer; }
.ig-dm-switch input { opacity: 0; width: 0; height: 0; }
.ig-dm-slider {
    position: absolute; inset: 0;
    background: var(--surface-w12);
    border-radius: var(--radius-pill);
    transition: background var(--motion-hover);
}
.ig-dm-slider::before {
    content: '';
    position: absolute;
    width: var(--s-4); height: var(--s-4);
    left: 3px; bottom: 3px;
    background: var(--text);
    border-radius: 50%;
    transition: transform var(--motion-hover);
}
.ig-dm-switch input:checked + .ig-dm-slider { background: var(--accent); }
.ig-dm-switch input:checked + .ig-dm-slider::before { transform: translateX(18px); }

/* 체크박스 행 */
.ig-dm-check-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
}

/* 선택된 게시글 목록 */
.ig-dm-selected-posts { margin-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); }
.ig-dm-post-chip {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    background: var(--surface-hover);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.ig-dm-post-chip .ig-dm-chip-remove {
    margin-left: auto;
    cursor: pointer;
    color: var(--text-faint);
    font-size: var(--text-sm);
}
.ig-dm-post-chip .ig-dm-chip-remove:hover { color: var(--red); }

/* 필드 라벨 */
.ig-dm-field-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}
/* textarea */
.ig-dm-textarea {
    width: 100%;
    min-height: var(--s-8);
    resize: vertical;
    font-family: var(--font);
}

/* Webhook 상태 */
.ig-dm-status-row { display: flex; align-items: center; gap: var(--s-3); }
.ig-dm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface);
}
.ig-dm-dot {
    display: inline-block;
    width: var(--s-2); height: var(--s-2);
    border-radius: 50%;
}
.ig-dm-dot.idle { background: var(--text-faint); }
.ig-dm-dot.connected { background: var(--green); box-shadow: var(--shadow-dot-healthy); }

.ig-dm-hint {
    font-size: var(--text-sm);
    color: var(--text-faint);
    word-break: break-all;
    margin-top: var(--s-1);
}
/* Verify Token 행 */
.ig-dm-verify-token-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.ig-dm-token-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface-hover);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    user-select: all;
}
.ig-dm-copy-btn {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: var(--s-1);
    border-radius: var(--radius-s);
    display: inline-flex;
    align-items: center;
}
.ig-dm-copy-btn:hover { color: var(--accent); background: var(--surface-hover); }

/* 활동 로그 */
.ig-dm-log-details { cursor: default; }
.ig-dm-log-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ig-dm-log-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: var(--s-1);
    transition: transform var(--motion-hover);
}
.ig-dm-log-details[open] .ig-dm-log-summary::before { transform: rotate(90deg); }
.ig-dm-log-table { margin-top: var(--s-2); }
.ig-dm-log-row {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 80px;
    gap: var(--s-2);
    padding: var(--s-1) 0;
    font-size: var(--text-sm);
    color: var(--text-sub);
    align-items: center;
}
.ig-dm-log-row + .ig-dm-log-row {
    box-shadow: var(--shadow-separator);
}
.ig-dm-log-header {
    font-size: var(--text-sm);
    color: var(--text-faint);
    font-weight: var(--weight-semibold);
}
.ig-dm-log-status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
}
.ig-dm-log-status.success { color: var(--green); }
.ig-dm-log-status.error { color: var(--red); }
.ig-dm-log-status.warn { color: var(--amber); }
.ig-dm-log-status.muted { color: var(--text-faint); }

/* 서브라벨 (토글 옆 작은 텍스트) */
.ig-dm-toggle-sublabel {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* 중복 방지 행 */
.ig-dm-dedup-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.ig-dm-dedup-select {
    width: auto;
    min-width: var(--s-14);
    font-size: var(--text-sm);
}

/* 진단 결과 */
.ig-dm-diagnostics { font-size: var(--text-sm); }
.ig-dm-diag-ok { color: var(--green); }
.ig-dm-diag-warn {
    color: var(--amber);
}
.ig-dm-diag-warn ul {
    margin: var(--s-1) 0 0;
    padding-left: var(--s-4);
    list-style: disc;
}
.ig-dm-diag-warn li { margin-bottom: var(--s-1); }
.ig-dm-diag-err { color: var(--red); }
.ig-dm-diag-detail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.ig-dm-diag-detail span {
    background: var(--bg-raised);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
}
/* 진단 그리드 — 2열 레이아웃 */
.ig-dm-diag-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-1);
    margin-top: var(--s-2);
}
.ig-dm-diag-item {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
}
.ig-dm-diag-item .ig-dm-diag-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
}
.ig-dm-diag-dot.ok { background: var(--green); }
.ig-dm-diag-dot.warn { background: var(--amber); }
.ig-dm-diag-dot.err { background: var(--red); }
/* 통계 요약 행 */
.ig-dm-stats-row {
    display: flex;
    gap: var(--s-3);
    margin-top: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.ig-dm-stat {
    display: flex;
    align-items: baseline;
    gap: var(--s-1);
}
.ig-dm-stat-value {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text);
}
.ig-dm-stat-value.success { color: var(--green); }
.ig-dm-stat-value.error { color: var(--red); }
.ig-dm-stat-value.warning { color: var(--amber); }
/* 에러코드 힌트 섹션 */
.ig-dm-error-hints {
    margin-top: var(--s-2);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.ig-dm-error-hints-title {
    font-size: var(--text-sm);
    color: var(--text-faint);
    font-weight: var(--weight-medium);
}
.ig-dm-hint-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
}
.ig-dm-hint-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--red);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.ig-dm-hint-text { color: var(--text-sub); }
.ig-dm-hint-retry {
    margin-left: var(--s-1);
    font-size: var(--text-sm);
    color: var(--amber);
    background: var(--amber-bg);
    padding: 1px var(--s-1);
    border-radius: var(--radius-pill);
}

/* 로그 초기화 버튼 */
.ig-dm-log-clear-btn {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: var(--s-1);
    border-radius: var(--radius-s);
    display: inline-flex;
    align-items: center;
    margin-left: var(--s-2);
    vertical-align: middle;
}
.ig-dm-log-clear-btn:hover { color: var(--red); background: var(--surface-hover); }

/* Webhook 구독 버튼 */
.ig-dm-subscribe-btn { font-size: var(--text-sm); padding: var(--s-1) var(--s-2); }

/* P1-1: 로딩 스피너 */
.ig-dm-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-3); padding: var(--s-6) 0; color: var(--text-sub);
    font-size: var(--text-sm);
}
.ig-dm-spinner {
    width: var(--s-5-5); height: var(--s-5-5); border-radius: 50%;
    border: 2.5px solid var(--surface-hover);
    border-top-color: var(--accent);
    animation: ig-dm-spin 0.7s linear infinite;
}
@keyframes ig-dm-spin { to { transform: rotate(360deg); } }

/* P2-1: 마스터 OFF 안내 배너 */
.ig-dm-disabled-banner {
    font-size: var(--text-sm); color: var(--text-faint); text-align: center;
    padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2);
    background: var(--bg-raised); border-radius: var(--radius-s);
}

/* P1-3: Webhook 설정 가이드 */
.ig-dm-setup-guide { cursor: default; }
.ig-dm-guide-summary {
    font-size: var(--text-sm); color: var(--accent); cursor: pointer;
    list-style: none; display: flex; align-items: center; gap: var(--s-1);
}
.ig-dm-guide-summary::-webkit-details-marker { display: none; }
.ig-dm-guide-summary::before {
    content: ''; display: inline-block; width: var(--s-1); height: var(--s-1);
    border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg); transition: transform var(--duration-fast);
}
.ig-dm-setup-guide[open] .ig-dm-guide-summary::before { transform: rotate(45deg); }
.ig-dm-guide-steps {
    margin: var(--s-2) 0 0 var(--s-3); padding: 0; font-size: var(--text-sm);
    color: var(--text-sub); line-height: 1.7;
}
.ig-dm-guide-steps a { color: var(--accent); text-decoration: none; }
.ig-dm-guide-steps a:hover { text-decoration: underline; }

/* P2-3: 문자 수 카운터 */
.ig-dm-char-count {
    font-size: var(--text-sm); color: var(--text-faint); text-align: right;
    margin-top: var(--s-1);
}
.ig-dm-char-count.ig-dm-char-warn { color: var(--amber); }

/* 반응형 */
@media (max-width: 640px) {
    .ig-dm-modal-box { max-width: 100%; }
    .ig-dm-diag-grid { grid-template-columns: 1fr; }
    .ig-dm-stats-row { flex-wrap: wrap; }
    .ig-dm-log-row { grid-template-columns: 80px 1fr 80px; }
    .ig-dm-log-row > :nth-child(3) { display: none; }
    .ig-dm-dedup-row { gap: var(--s-2); }
}