:root { color-scheme: dark; --ink: #e9eef7; --muted: #93a4bd; --accent: #2dd4bf; --accent-2: #34d399; --accent-ink: #5eead4; --card: rgba(19, 27, 45, 0.55); --card-strong: rgba(22, 31, 52, 0.72); --line: rgba(125, 211, 252, 0.12); --line-strong: rgba(125, 211, 252, 0.22); --danger: #fca5a5; --warn: #fcd34d; --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45); --glass-blur: blur(16px); /* Sunken input/log surfaces (previously scattered rgba(9,14,26,*) / rgba(2,6,14,*) literals — consolidated so the light theme can flip them). */ --surface-1: rgba(9, 14, 26, 0.5); --surface-2: rgba(2, 6, 14, 0.5); /* Status-chip text tones (pair with the low-alpha tinted chip backgrounds, which stay as-is — only the text needs a theme-aware value). */ --tint-danger: #fca5a5; --tint-success: #6ee7b7; --tint-warn: #fcd34d; --tint-info: #cbd5e1; --tint-purple: #d8ccff; --page-bg: radial-gradient(1200px 700px at 80% -10%, rgba(45, 212, 191, 0.12), transparent 60%), radial-gradient(1000px 600px at 0% 110%, rgba(56, 189, 248, 0.1), transparent 55%), linear-gradient(180deg, #070b16 0%, #060912 60%, #04060d 100%); --glow-bg: radial-gradient(620px 620px at 78% 12%, rgba(45, 212, 191, 0.08), transparent 70%), radial-gradient(520px 520px at 18% 88%, rgba(99, 102, 241, 0.08), transparent 70%); } /* Light theme — toggled via (top-nav switch, persisted in localStorage). Brand accents darken slightly for contrast on white; card/ surface/line tones flip from translucent-dark to translucent-white; status-chip text darkens so it stays readable against the now-pale chip backgrounds. The coding terminal (.terminal-mount / xterm) intentionally stays dark in both themes, like most editors/IDEs. */ [data-theme="light"] { color-scheme: light; --ink: #101826; --muted: #55627a; --accent: #0d9488; --accent-2: #059669; --accent-ink: #0f766e; --card: rgba(255, 255, 255, 0.72); --card-strong: rgba(255, 255, 255, 0.9); --line: rgba(15, 23, 42, 0.08); --line-strong: rgba(15, 23, 42, 0.16); --danger: #b91c1c; --warn: #92400e; --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.1); --surface-1: rgba(255, 255, 255, 0.75); --surface-2: rgba(241, 245, 249, 0.85); --tint-danger: #b91c1c; --tint-success: #047857; --tint-warn: #92400e; --tint-info: #334155; --tint-purple: #6d28d9; --page-bg: radial-gradient(1200px 700px at 80% -10%, rgba(45, 212, 191, 0.1), transparent 60%), radial-gradient(1000px 600px at 0% 110%, rgba(56, 189, 248, 0.08), transparent 55%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 55%, #e7ecf3 100%); --glow-bg: radial-gradient(620px 620px at 78% 12%, rgba(45, 212, 191, 0.1), transparent 70%), radial-gradient(520px 520px at 18% 88%, rgba(99, 102, 241, 0.07), transparent 70%); } [data-theme="light"] a:hover { color: #0d9488; } [data-theme="light"] .meta-select option { background: #fff; color: #101826; } /* Brand wordmark gradient's light stop (#99f6e4) is near-invisible on white — darken it so "Agent Driver" keeps contrast in light mode. 주의: background 축약형은 base 의 background-clip: text 를 리셋해 통짜 에메랄드 블록이 되므로(라이트 모드 버그), clip 을 반드시 함께 재지정한다. */ [data-theme="light"] .top-nav-brand { background: linear-gradient(90deg, #0f766e, #0d9488); -webkit-background-clip: text; background-clip: text; } * { box-sizing: border-box; } html { /* Backdrop lives on so the fixed particle canvas is never hidden behind the background. */ background: var(--page-bg); background-attachment: fixed; } body { margin: 0; min-height: 100vh; background: transparent; color: var(--ink); font-family: "Sohne", "SF Pro Text", "Pretendard", "Helvetica Neue", "Segoe UI", sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Animated particle-network background (above the html backdrop, below content) */ #bg-particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; } .bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--glow-bg); animation: glowdrift 18s ease-in-out infinite alternate; } @keyframes glowdrift { from { transform: translate3d(0, 0, 0); opacity: 0.8; } to { transform: translate3d(0, -18px, 0); opacity: 1; } } a { color: var(--accent-ink); text-decoration: none; transition: color 140ms ease; } a:hover { color: #99f6e4; } button { appearance: none; border: 1px solid transparent; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #04231d; border-radius: 999px; padding: 0.62rem 1.02rem; cursor: pointer; font: inherit; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 8px 22px rgba(45, 212, 191, 0.28); transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease; } button:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(45, 212, 191, 0.34); filter: brightness(1.05); } .subtle-button { appearance: none; border: 1px solid var(--line-strong); background: rgba(125, 211, 252, 0.06); color: var(--muted); border-radius: 999px; padding: 0.32rem 0.72rem; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600; box-shadow: none; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .subtle-button:hover { transform: none; background: rgba(125, 211, 252, 0.12); border-color: var(--accent); color: var(--ink); } pre { margin: 0; white-space: pre-wrap; word-break: break-word; } code, pre, .mono { font-family: "Sohne Mono", "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace; } .mono, .numeric { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; } .app-shell { max-width: 1660px; margin: 0 auto; padding: 2.25rem 1.75rem 3.5rem; position: relative; z-index: 1; } .dashboard-shell { display: grid; gap: 1rem; } .hero-card, .section-card, .metric-card, .error-card { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .hero-card { position: relative; border-radius: 28px; padding: clamp(1.4rem, 3vw, 2.2rem); overflow: hidden; background: linear-gradient(180deg, rgba(45, 212, 191, 0.08), rgba(19, 27, 45, 0) 40%), var(--card-strong); } .hero-card::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.6), transparent); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; } .eyebrow { margin: 0; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem; font-weight: 700; } .hero-title { margin: 0.4rem 0 0; padding-bottom: 0.08em; font-size: clamp(1.7rem, 3.3vw, 2.75rem); line-height: 1.12; letter-spacing: -0.04em; background: linear-gradient(180deg, #ffffff, #b9c6dc); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-copy { margin: 0.8rem 0 0; max-width: 46rem; color: var(--muted); font-size: 1rem; } .status-stack { display: grid; justify-items: end; align-content: start; min-width: min(100%, 9rem); } .status-badge { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding: 0.35rem 0.82rem; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(45, 212, 191, 0.1); color: var(--accent-ink); font-size: 0.82rem; font-weight: 700; } .status-badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.78); } } .status-badge-live { background: rgba(45, 212, 191, 0.12); } .status-badge-offline { display: none; } .hero-glance { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; } .hero-glance-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .hero-glance-chip b { color: var(--ink); } .metric-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .metric-card { border-radius: 20px; padding: 1.1rem 1.1rem 1.2rem; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .metric-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(45, 212, 191, 0.12); } .metric-label { margin: 0; color: var(--muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .metric-value { margin: 0.4rem 0 0; font-size: clamp(1.7rem, 2vw, 2.2rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); } .metric-detail { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.86rem; } .section-card { border-radius: 22px; padding: 1.25rem; } .section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .section-title { margin: 0; font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); } .section-title-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; margin-left: 0.3rem; border-radius: 999px; background: rgba(45, 212, 191, 0.16); color: var(--accent-ink); font-size: 0.74rem; font-weight: 700; vertical-align: middle; } .section-copy { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.92rem; } .table-wrap { overflow-x: auto; margin-top: 1rem; } .data-table { width: 100%; min-width: 720px; border-collapse: collapse; } .data-table-running { table-layout: fixed; min-width: 980px; } .data-table th { padding: 0 0.5rem 0.75rem 0; text-align: left; color: var(--muted); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .data-table td { padding: 0.9rem 0.5rem; border-top: 1px solid var(--line); vertical-align: top; font-size: 0.93rem; color: var(--ink); } .data-table tbody tr { transition: background 140ms ease; } .data-table tbody tr:hover { background: rgba(125, 211, 252, 0.04); } .issue-stack, .session-stack, .detail-stack, .token-stack { display: grid; gap: 0.24rem; min-width: 0; } .event-text { font-weight: 500; line-height: 1.45; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .state-badge { display: inline-flex; align-items: center; min-height: 1.85rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(125, 211, 252, 0.08); color: var(--ink); font-size: 0.8rem; font-weight: 600; line-height: 1; } .state-badge-active { background: rgba(45, 212, 191, 0.16); border-color: rgba(45, 212, 191, 0.32); color: var(--accent-ink); } .state-badge-warning { background: rgba(252, 211, 77, 0.14); border-color: rgba(252, 211, 77, 0.3); color: var(--warn); } .state-badge-danger { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.32); color: var(--danger); } .issue-id { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .issue-id-link { color: var(--accent-ink); text-decoration: none; } .issue-id-link:hover { text-decoration: underline; text-underline-offset: 0.18em; } .issue-link { color: var(--muted); font-size: 0.84rem; } .muted { color: var(--muted); } .code-panel { margin-top: 1rem; padding: 1rem; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); color: var(--tint-info); font-size: 0.88rem; } .empty-state { margin: 1rem 0 0; color: var(--muted); } .flash-banner { border: 1px solid var(--line-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .error-card { border-radius: 22px; padding: 1.25rem; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); } .error-title { margin: 0; color: var(--danger); font-size: 1.15rem; letter-spacing: -0.02em; } .error-copy { margin: 0.45rem 0 0; color: var(--danger); } /* ── Live board: main agent (orchestrator) + sub agents ─────────────── */ .live-board { display: grid; gap: 1rem; } .agent-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.1rem 1.2rem; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); } .agent-card-main { position: relative; overflow: hidden; border-color: rgba(45, 212, 191, 0.28); background: linear-gradient(180deg, rgba(45, 212, 191, 0.1), rgba(19, 27, 45, 0) 45%), var(--card-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(45, 212, 191, 0.12) inset; } .agent-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .agent-kind { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .live-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.6rem; border-radius: 999px; border: 1px solid rgba(45, 212, 191, 0.32); background: rgba(45, 212, 191, 0.12); color: var(--accent-ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; } .live-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: pulse 1.6s ease-in-out infinite; flex: 0 0 auto; } .agent-now { display: flex; align-items: center; gap: 0.5rem; margin: 0.7rem 0 0; font-size: 1.02rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .agent-detail { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agent-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; } .chip { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.28rem 0.62rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(125, 211, 252, 0.05); color: var(--muted); font-size: 0.8rem; } .chip b { color: var(--ink); font-weight: 700; } .agent-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); } .agent-stats > div { display: grid; gap: 0.15rem; } .agent-stats span { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; } .agent-stats b { font-size: 1.25rem; color: var(--ink); letter-spacing: -0.02em; } .agent-sub-head { margin: 0.25rem 0 0.7rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .agent-sub-head .numeric { color: var(--accent-ink); } .agent-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .agent-card-sub { padding: 1rem 1.05rem; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .agent-card-sub:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(45, 212, 191, 0.14); } .agent-card-sub .agent-now { font-size: 0.96rem; } /* ── Modal / live-log overlay ──────────────────────────────────────── */ .overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(3, 6, 14, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadein 140ms ease; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* 이슈 상세는 "베이스" 모달 — 상세에서 여는 확정/반려/플랜/로그/편집 다이얼로그(z-index 50)가 항상 그 위에 뜨도록 한 층 아래에 둔다. */ .overlay-detail-layer { z-index: 40; } .overlay-card { width: min(880px, 100%); max-height: 82vh; display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--card-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); overflow: hidden; } .overlay-card-log { width: min(980px, 100%); } .overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); } .overlay-title { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: 0.6rem; } .overlay-body { margin: 0; padding: 1.2rem; overflow: auto; font-size: 0.9rem; line-height: 1.6; color: var(--tint-info); white-space: pre-wrap; word-break: break-word; } .log-body { min-height: 240px; max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; } .log-stream { padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .log-note { margin: 0 0 0.6rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.22); color: var(--muted); font-size: 0.8rem; font-weight: 600; } .log-empty { flex: 1 1 auto; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; padding: 2rem; } .log-empty-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); } .log-empty .muted { margin: 0; } .log-pill-saved { display: inline-flex; align-items: center; padding: 0.14rem 0.6rem; border-radius: 999px; background: rgba(148, 163, 184, 0.16); border: 1px solid rgba(148, 163, 184, 0.3); color: var(--tint-info); font-size: 0.72rem; font-weight: 700; } .log-line { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.32rem 0.5rem; border-radius: 8px; font-size: 0.88rem; line-height: 1.5; } .log-line:hover { background: rgba(125, 211, 252, 0.05); } .log-time { flex: 0 0 auto; color: var(--accent-ink); font-size: 0.78rem; opacity: 0.85; } .log-text { color: var(--tint-info); word-break: break-word; } /* ── Custom confirm dialog (replaces native confirm) ───────────────── */ .overlay-card-confirm { width: min(470px, 100%); } .overlay-card-confirm.is-danger { border-color: rgba(248, 113, 113, 0.42); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(248, 113, 113, 0.18) inset; } .confirm-body { padding: 1.25rem 1.35rem 1.4rem; } .confirm-message { margin: 0; color: var(--tint-info); font-size: 0.96rem; line-height: 1.65; white-space: pre-line; } .confirm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.4rem; } .btn-ghost { appearance: none; border: 1px solid var(--line-strong); background: rgba(125, 211, 252, 0.05); color: var(--muted); border-radius: 12px; padding: 0.6rem 1.15rem; font: inherit; font-weight: 600; cursor: pointer; box-shadow: none; } .btn-ghost:hover { background: rgba(125, 211, 252, 0.1); color: var(--ink); transform: none; box-shadow: none; } .btn-confirm { border: none; border-radius: 12px; padding: 0.6rem 1.3rem; font: inherit; font-weight: 700; cursor: pointer; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #04231d; box-shadow: 0 8px 22px rgba(45, 212, 191, 0.28); } .btn-confirm.btn-danger { background: linear-gradient(180deg, #fb7185, #ef4444); color: #fff; box-shadow: 0 8px 22px rgba(239, 68, 68, 0.32); } .act-btn:disabled, .btn-confirm:disabled { cursor: not-allowed; opacity: 0.4; filter: grayscale(0.4); box-shadow: none; transform: none; } .act-btn:disabled:hover, .btn-confirm:disabled:hover { transform: none; filter: grayscale(0.4); } .detail-readonly-note { margin-top: 0.6rem; font-size: 0.82rem; } .reject-textarea { width: 100%; margin-top: 1rem; padding: 0.8rem 0.9rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.94rem; line-height: 1.55; resize: vertical; min-height: 7rem; } .reject-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); } .reject-textarea::placeholder { color: var(--muted); } /* ── Approval decision buttons (clean, no inline styles) ───────────── */ .decision-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } .act-btn { appearance: none; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.45rem 0.85rem; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: none; transition: transform 140ms ease, filter 140ms ease, background 140ms ease; } .act-btn:hover { transform: translateY(-1px); box-shadow: none; filter: brightness(1.06); } .act-view { background: rgba(125, 211, 252, 0.08); border-color: rgba(125, 211, 252, 0.28); color: var(--tint-info); } .act-approve { background: linear-gradient(180deg, #34d399, #10b981); border: none; color: #04231d; font-weight: 700; } .act-reject { background: rgba(125, 211, 252, 0.05); color: var(--tint-info); } @media (max-width: 560px) { .agent-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .app-shell { padding: 1.25rem 0.85rem 2rem; } .hero-grid { grid-template-columns: 1fr; } .status-stack { justify-items: start; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .metric-grid { grid-template-columns: 1fr; } .section-card, .hero-card, .error-card { border-radius: 18px; padding: 1rem; } } /* ── Internal tracker: issue board ─────────────────────────────────── */ .board-card { overflow: hidden; } .board-new-btn { appearance: none; border: none; border-radius: 10px; padding: 0.55rem 1rem; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #04231d; box-shadow: 0 6px 18px rgba(45, 212, 191, 0.22); transition: transform 140ms ease, filter 140ms ease; } .board-new-btn:hover { transform: translateY(-1px); filter: brightness(1.05); } .board { display: flex; gap: 0.85rem; margin-top: 1.1rem; overflow-x: auto; padding-bottom: 0.7rem; scrollbar-width: thin; } .board-col { flex: 0 0 270px; width: 270px; display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; max-height: 72vh; } .board-col-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); } .board-col-name { font-weight: 700; font-size: 0.86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-col-count { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } .board-add { margin-left: auto; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1; box-shadow: none; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .board-add:hover { background: rgba(125, 211, 252, 0.1); color: var(--ink); border-color: var(--accent); transform: none; box-shadow: none; } .board-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-sizing: border-box; } .dot-todo { background: transparent; border: 2px solid #8aa0bd; } .dot-progress { background: conic-gradient(#fcd34d 0 50%, transparent 50% 100%); border: 2px solid #fcd34d; } .dot-review { background: #5eead4; } .dot-approve { background: #34d399; } .dot-rework { background: #fb923c; } .dot-deploy { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); } .dot-done { background: #818cf8; } .dot-cancel { background: #6b7280; } .board-col-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.65rem; overflow-y: auto; } .board-issue { background: var(--card-strong); border: 1px solid var(--line); border-radius: 11px; padding: 0.7rem 0.75rem; cursor: pointer; transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .board-issue:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); } .board-issue-top { display: flex; /* 칩이 많으면(실행 중 에이전트·분석중·내 이슈…) 카드 밖으로 밀리지 않고 줄바꿈 */ flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.3rem 0.4rem; margin-bottom: 0.3rem; } .board-issue-top .board-issue-id { margin-right: auto; } .board-issue-id { color: var(--muted); font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .board-issue-title { margin: 0 0 0.45rem; font-size: 0.9rem; line-height: 1.35; color: var(--ink); } .board-issue .label-chips { margin-bottom: 0.45rem; } .board-issue-foot { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; } .board-col-add { width: 100%; text-align: left; padding: 0.45rem 0.6rem; border-radius: 9px; border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; box-shadow: none; transition: background 140ms ease, color 140ms ease; } .board-col-add:hover { background: rgba(125, 211, 252, 0.06); color: var(--ink); transform: none; box-shadow: none; } .label-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; } .label-chip { display: inline-flex; align-items: center; padding: 0.16rem 0.5rem; border-radius: 999px; border: 1px solid rgba(125, 211, 252, 0.22); background: rgba(125, 211, 252, 0.08); color: var(--tint-info); font-size: 0.72rem; font-weight: 600; } /* ── Issue create/edit modal (polished) ────────────────────────────── */ .overlay-card-form { max-width: 600px; width: 100%; } .icon-close { appearance: none; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: none; transition: background 140ms ease, color 140ms ease; } .icon-close:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); transform: none; box-shadow: none; } .issue-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .issue-form-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .issue-title-input { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; } .issue-title-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); } .issue-title-input::placeholder { color: var(--muted); font-weight: 600; } .issue-desc-input { width: 100%; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.92rem; line-height: 1.55; resize: vertical; min-height: 5rem; } .issue-desc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); } .issue-desc-input::placeholder { color: var(--muted); } .issue-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } .meta-field { display: flex; flex-direction: column; gap: 0.35rem; } .meta-field-wide { grid-column: 1 / -1; } .meta-label { font-size: 0.76rem; font-weight: 600; color: var(--muted); } .select-wrap { position: relative; } .select-wrap::after { content: ""; position: absolute; right: 0.75rem; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; } .meta-select { appearance: none; -webkit-appearance: none; width: 100%; padding: 0.55rem 1.8rem 0.55rem 0.7rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease; } .meta-select:hover { border-color: var(--accent); } .meta-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); } .meta-select option { background: #0b1220; color: var(--ink); } .dependency-select { min-height: 7.5rem; padding-right: 0.7rem; } .issue-form-foot { display: flex; justify-content: flex-end; gap: 0.6rem; flex: 0 0 auto; padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); } /* ── Issue detail / tracking modal ─────────────────────────────────── */ /* ── Issue detail: large two-column modal ──────────────────────────── */ .overlay-card-detail { width: min(1180px, 96vw); max-width: none; height: min(88vh, 980px); max-height: 88vh; } .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; flex: 1 1 auto; min-height: 0; } .detail-main { min-width: 0; padding: 1.2rem 1.4rem 1.4rem; overflow-y: auto; } .detail-side { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem 1.1rem; border-left: 1px solid var(--line); background: var(--surface-1); overflow-y: auto; } .detail-confirm-btn { width: 100%; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.92rem; } .side-group { display: flex; flex-direction: column; gap: 0.4rem; } .side-label { margin: 0; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .side-value { font-size: 0.88rem; color: var(--ink); font-weight: 600; } .side-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; } .side-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); } .side-facts b { color: var(--ink); font-weight: 600; word-break: break-all; } .side-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .side-foot { margin-top: auto; display: flex; gap: 0.45rem; padding-top: 0.8rem; border-top: 1px solid var(--line); } .overlay-card-detail .timeline { max-height: none; overflow: visible; } /* Comment threads (replies) */ .thread { display: flex; flex-direction: column; gap: 0.55rem; } /* .timeline-item.timeline-reply so these win over the base .timeline-item rules that appear later in the stylesheet. */ .timeline-item.timeline-reply { margin-left: 1.4rem; border-left: 2px solid rgba(125, 211, 252, 0.5); } .timeline-item.timeline-reply::before { background: #7dd3fc; box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.15); } .thread-reply-btn { margin-left: auto; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; box-shadow: none; } .thread-reply-btn:hover { color: var(--accent-ink); border-color: var(--accent); transform: none; box-shadow: none; } .comment-form-reply { margin-left: 1.4rem; } @media (max-width: 960px) { .overlay-card-detail { height: auto; max-height: 92vh; } .detail-layout { grid-template-columns: 1fr; overflow-y: auto; } .detail-main, .detail-side { overflow: visible; } .detail-side { border-left: none; border-top: 1px solid var(--line); } } /* ── Board card highlighting (mine / priority / blocked) ───────────── */ .board-issue.is-mine { border-color: rgba(45, 212, 191, 0.55); box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.35), 0 6px 18px rgba(45, 212, 191, 0.12); background: linear-gradient(180deg, rgba(45, 212, 191, 0.09), var(--card-strong) 55%); } .board-issue.prio-urgent { border-left: 3px solid #f87171; } .board-issue.prio-high { border-left: 3px solid #fbbf24; } .board-issue.prio-urgent:not(.is-mine) { background: linear-gradient(180deg, rgba(248, 113, 113, 0.08), var(--card-strong) 55%); } .board-issue.is-blocked { opacity: 0.9; } .mine-chip { display: inline-flex; align-items: center; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid rgba(45, 212, 191, 0.4); background: rgba(45, 212, 191, 0.12); color: var(--accent-ink); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; } /* 실행 중 에이전트 칩(보드 카드) — 어떤 서브가 어떤 모델로 돌고 있는지 */ .agent-chip { border-color: rgba(94, 234, 212, 0.45); background: rgba(94, 234, 212, 0.1); color: #99f6e4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* 상세 모달 — 모델/추론 셀렉트 2개 가로 배치 */ .side-selects { display: flex; gap: 0.4rem; } .side-selects .select-wrap { flex: 1 1 0; min-width: 0; } .side-hint { margin-top: 0.3rem; font-size: 0.72rem; } /* 보드 상단 도메인(카테고리) 필터 탭 — 상태 필터 옆에 구분선으로 분리 */ .domain-filter-tabs { margin-left: 0.6rem; padding-left: 0.6rem; border-left: 1px solid var(--line-strong); } /* 도메인(카테고리) — 다른 메타 필드와 같은 드롭다운 + 라벨 옆 작은 ＋(추가) */ .meta-label .domain-add-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; padding: 0; margin-left: 0.35rem; border-radius: 50%; border: 1px solid rgba(45, 212, 191, 0.45); background: rgba(45, 212, 191, 0.1); color: var(--accent-ink); font-size: 0.75rem; font-weight: 800; line-height: 1; cursor: pointer; vertical-align: middle; flex: 0 0 auto; } .meta-label .domain-add-toggle:hover { background: rgba(45, 212, 191, 0.22); } /* .meta-input 의 row flex-basis(200px)가 세로 flex(.meta-field) 안에서 높이로 해석돼 입력창이 거대해지는 문제 방지 — 설정 화면(.settings-field)과 같은 픽스. 기본 .meta-input 규칙이 이 파일 뒤쪽에 있어 같은 특이도로는 지므로, .meta-field 를 붙여 특이도를 올린다. */ .meta-field .domain-new-input { flex: none; width: 100%; height: 42px; margin-bottom: 0.3rem; } .domain-label-chip { border-color: rgba(129, 140, 248, 0.5); background: rgba(129, 140, 248, 0.12); color: #c7d2fe; } /* 트리아지 진행 중(단일/분해 판정) — 보드 카드 "분석중" 배지 + 스피너 */ .triage-chip { gap: 0.3rem; border-color: rgba(250, 204, 21, 0.45); background: rgba(250, 204, 21, 0.1); color: #fde68a; } .chip-spinner { width: 0.72em; height: 0.72em; border-radius: 50%; border: 2px solid rgba(253, 230, 138, 0.35); border-top-color: #fde68a; animation: chip-spin 0.8s linear infinite; } @keyframes chip-spin { to { transform: rotate(360deg); } } .dependency-chip.is-open { border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.12); color: var(--tint-danger); } /* Higher specificity than .filter-tab.is-active (later in the file); .filter-tab has border:none, so use an inset box-shadow to avoid a layout shift. */ .filter-tab.filter-tab-mine.is-active { color: var(--accent-ink); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.5); } .detail-head-left { display: flex; align-items: center; gap: 0.5rem; } .detail-id { color: var(--muted); font-weight: 700; font-size: 0.84rem; font-variant-numeric: tabular-nums; } .detail-title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 700; color: var(--ink); line-height: 1.3; } .detail-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; } .detail-section { margin-top: 1.1rem; } .dependency-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 0.2rem 0.45rem; border-radius: 999px; border: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.1); color: var(--tint-warn); font-size: 0.72rem; font-weight: 700; } .project-settings-form { display: flex; flex-direction: column; gap: 0.8rem; } .settings-row-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } .settings-field-wide { grid-column: 1 / -1; } .project-checks { display: flex; flex-wrap: wrap; gap: 0.4rem; } .detail-section-title { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.04em; } .detail-desc { margin: 0; color: var(--ink); font-size: 0.92rem; line-height: 1.6; white-space: pre-wrap; } /* 트리아지 서브이슈 (이슈 상세의 🧩 목록 + 보드 카드 칩) */ .subtask-list { display: flex; flex-direction: column; gap: 0.35rem; } .subtask-row { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(148, 163, 184, 0.06); color: var(--ink); font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer; } .subtask-row:hover { border-color: var(--line-strong); background: rgba(148, 163, 184, 0.12); } .subtask-id { font-size: 0.78rem; color: var(--muted); white-space: nowrap; } .subtask-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .subtask-note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--muted); } .subtask-chip, .subtask-parent-chip { cursor: pointer; } .timeline { display: flex; flex-direction: column; gap: 0.7rem; max-height: 40vh; overflow-y: auto; padding-right: 0.3rem; } .timeline-item { border-left: 2px solid var(--line-strong); padding: 0 0 0 0.8rem; position: relative; } .timeline-item::before { content: ""; position: absolute; left: -5px; top: 0.25rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); } .timeline-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .timeline-author { font-size: 0.82rem; font-weight: 700; color: var(--ink); } .timeline-time { font-size: 0.74rem; color: var(--muted); } .timeline-body { margin: 0; font: inherit; font-size: 0.86rem; line-height: 1.55; color: var(--ink); white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.7rem; } .detail-body { padding: 1.2rem; overflow-y: auto; flex: 1 1 auto; } .detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.2rem; border-top: 1px solid var(--line); background: var(--surface-1); } .detail-state-form { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; min-width: 12rem; } .detail-controls { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; } .detail-foot-actions { display: flex; gap: 0.45rem; } @media (max-width: 560px) { .issue-meta { grid-template-columns: 1fr; } .detail-foot { flex-direction: column; align-items: stretch; } .detail-controls { flex-direction: column; align-items: stretch; } } /* ── Top navigation (관제 / 이슈 보드) ──────────────────────────────── */ .top-nav { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; padding: 0.5rem 0.25rem 0.9rem; border-bottom: 1px solid var(--line); } .top-nav-brand { font-weight: 800; letter-spacing: -0.02em; font-size: 1.02rem; color: var(--ink); background: linear-gradient(90deg, var(--accent-ink), #99f6e4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 상단바의 프로젝트명 칩 — 어느 인스턴스인지 항상 보이게 */ .top-nav-project { display: inline-block; margin-left: 0.55rem; padding: 0.12rem 0.62rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(45, 212, 191, 0.1); color: var(--accent-ink); -webkit-text-fill-color: var(--accent-ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; } .top-nav-tabs { display: flex; gap: 0.35rem; } .top-nav-spacer { flex: 1; } .theme-toggle-btn { appearance: none; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); width: 2.2rem; height: 2.2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: none; transition: transform 140ms ease, filter 140ms ease; } .theme-toggle-btn:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: none; } /* Icon-swap driven purely by the data-theme attribute, so it's correct on first paint (no JS needed to sync it) and flips instantly with the toggle. */ html:not([data-theme="light"]) .theme-toggle-light-icon { display: none; } html[data-theme="light"] .theme-toggle-dark-icon { display: none; } .member-session { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; } .member-session-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 0.86rem; font-weight: 700; } .member-session-logout { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 0.82rem; font-weight: 700; padding: 0.38rem 0.65rem; } .member-session-logout:hover { color: var(--ink); border-color: var(--accent); background: var(--card-strong); } .nav-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.9rem; border-radius: 10px; color: var(--muted); font-size: 0.9rem; font-weight: 600; transition: background 140ms ease, color 140ms ease; } .nav-tab:hover { background: rgba(125, 211, 252, 0.07); color: var(--ink); } .nav-tab.is-active { background: rgba(45, 212, 191, 0.14); color: var(--accent-ink); } .nav-ico { font-size: 0.95rem; } /* --- Auth (login / signup) ------------------------------------------------ */ .auth-shell { min-height: 100vh; width: min(1180px, 100%); margin: 0 auto; padding: 3rem 2rem; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; gap: 2.4rem; } .auth-brand { position: relative; overflow: hidden; display: flex; align-items: center; padding: 2.6rem; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(160deg, rgba(19, 27, 45, 0.72), var(--surface-1)); box-shadow: var(--shadow-lg); backdrop-filter: var(--glass-blur); } .auth-brand-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.1rem; } .auth-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); } /* 로그인 좌측 패널의 프로젝트명 — 어느 프로젝트 인스턴스인지 크게 */ .auth-project-name { margin-top: 0.9rem; font-size: 2.2rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); word-break: break-all; } /* 로그인 폼 상단의 프로젝트 칩 */ .auth-project-chip { display: inline-block; margin-bottom: 0.65rem; padding: 0.2rem 0.72rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(45, 212, 191, 0.1); color: var(--accent-ink); font-size: 0.82rem; font-weight: 700; } .auth-logo-mark { font-size: 1.35rem; } .auth-brand-title { margin: 0; font-size: 1.9rem; line-height: 1.28; letter-spacing: -0.02em; } .auth-brand-copy { margin: 0; max-width: 34rem; color: var(--muted); font-size: 0.95rem; } .auth-brand-points { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; color: var(--ink); font-size: 0.9rem; font-weight: 600; } .auth-brand-points li { display: flex; align-items: center; gap: 0.6rem; } .auth-point-ico { width: 1.95rem; height: 1.95rem; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: rgba(45, 212, 191, 0.1); } .auth-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; } .auth-orb-a { width: 340px; height: 340px; right: -120px; top: -120px; background: radial-gradient(circle, rgba(45, 212, 191, 0.35), transparent 70%); } .auth-orb-b { width: 300px; height: 300px; left: -110px; bottom: -110px; background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 70%); } .auth-card { align-self: center; width: 100%; display: flex; flex-direction: column; gap: 1.1rem; padding: 2.4rem 2.2rem; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--card-strong); box-shadow: var(--shadow-lg); backdrop-filter: var(--glass-blur); } .auth-form-head { display: flex; flex-direction: column; gap: 0.3rem; } .auth-title { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; } .auth-sub { margin: 0; color: var(--muted); font-size: 0.9rem; } .auth-form { display: flex; flex-direction: column; gap: 0.95rem; } .auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .auth-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .auth-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .auth-input, .auth-select { width: 100%; min-width: 0; height: 46px; padding: 0 0.85rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink); font: inherit; font-size: 0.92rem; transition: border-color 140ms ease, box-shadow 140ms ease; } .auth-input::placeholder { color: var(--muted); } .auth-input:focus, .auth-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14); } .auth-submit { margin-top: 0.3rem; height: 48px; border-radius: 12px; font-size: 0.95rem; } .auth-alt { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding-top: 1.05rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; } .auth-alt-link { font-weight: 700; } .auth-message { margin: 0; padding: 0.65rem 0.75rem; border-radius: 10px; font-size: 0.82rem; font-weight: 650; } .auth-message.is-success { color: var(--tint-success); border: 1px solid rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.12); } .auth-message.is-error { color: var(--tint-danger); border: 1px solid rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.12); } .auth-message.is-info { color: var(--accent-ink); border: 1px solid rgba(45, 212, 191, 0.3); background: rgba(45, 212, 191, 0.1); } @media (max-width: 920px) { .auth-shell { grid-template-columns: 1fr; padding: 1.4rem 1rem; gap: 1.2rem; } .auth-brand { display: none; } .auth-field-row { grid-template-columns: 1fr; } } /* Flash banners (shared): 화면 상단 중앙에 얼럿 팝업(토스트)으로 떴다가 fade out 된다. 애니메이션이 끝나는 시점(5.2s)에 맞춰 서버(FlashAutoDismiss)가 플래시를 지워 DOM에서 제거한다. 마크업은 Layouts.app 의 .flash-stack 한 곳. */ .flash-stack { position: fixed; top: 4.6rem; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; width: min(540px, calc(100vw - 2rem)); pointer-events: none; } .flash-banner { margin: 0; padding: 0.85rem 1.2rem; border-radius: 14px; font-weight: 600; text-align: center; cursor: pointer; pointer-events: auto; box-shadow: 0 18px 44px rgba(2, 6, 14, 0.55); animation: flash-banner-life 5.2s ease forwards; } @keyframes flash-banner-life { 0% { opacity: 0; transform: translateY(-12px) scale(0.97); } 6% { opacity: 1; transform: translateY(0) scale(1); } 84% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } } /* 이슈 상세 미리보기: 마지막 출력 라인 (시작 실패 원인 확인용) */ .preview-last-output { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--muted); word-break: break-all; } .preview-command-form { margin-top: 0.9rem; } .flash-info { background: rgba(7, 32, 25, 0.94); border: 1px solid rgba(52, 211, 153, 0.45); color: var(--tint-success); } .flash-error { background: rgba(44, 12, 14, 0.94); border: 1px solid rgba(248, 113, 113, 0.5); color: var(--tint-danger); } /* Light theme: flip the toast fills to pale tints so the darkened status text (var(--tint-*) goes dark in light mode) stays readable. */ [data-theme="light"] .flash-info { background: rgba(209, 250, 229, 0.96); border-color: rgba(5, 150, 105, 0.4); } [data-theme="light"] .flash-error { background: rgba(254, 226, 226, 0.96); border-color: rgba(185, 28, 28, 0.35); } /* ── Issue board page ──────────────────────────────────────────────── */ .board-page { display: flex; flex-direction: column; gap: 1rem; } .board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .filter-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--line); } .filter-tab { appearance: none; border: none; background: transparent; color: var(--muted); border-radius: 9px; padding: 0.4rem 0.95rem; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; box-shadow: none; transition: background 140ms ease, color 140ms ease; } .filter-tab:hover { color: var(--ink); transform: none; } .filter-tab.is-active { background: rgba(125, 211, 252, 0.12); color: var(--ink); } .board-toolbar-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .board-search { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.35rem 0.7rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); min-width: 16rem; transition: border-color 140ms ease, box-shadow 140ms ease; } .board-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); } .board-search-ico { font-size: 0.82rem; opacity: 0.7; } .board-search-input { flex: 1 1 auto; appearance: none; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 0.88rem; } .board-search-input:focus { outline: none; } .board-search-input::placeholder { color: var(--muted); } .board-layout { display: flex; gap: 1rem; align-items: flex-start; } .board-main { flex: 1 1 auto; min-width: 0; } .board-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-height: 40vh; text-align: center; border: 1px dashed var(--line-strong); border-radius: 16px; background: var(--surface-1); } .board-empty-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); } .board-empty-sub { margin: 0; color: var(--muted); font-size: 0.9rem; } /* Hidden (empty) columns panel */ .hidden-cols { flex: 0 0 280px; width: 280px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .hidden-cols-title { margin: 0.2rem 0.3rem 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); } .hidden-cols-title-spaced { margin-top: 1rem; } .wbs-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem; margin-bottom: 0.6rem; } .wbs-list { display: flex; flex-direction: column; gap: 0.35rem; } .wbs-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .wbs-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .wbs-title { color: var(--ink); font-size: 0.86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wbs-delete { appearance: none; border: none; border-radius: 8px; background: rgba(248, 113, 113, 0.1); color: var(--tint-danger); font: inherit; font-size: 1rem; line-height: 1; width: 1.7rem; height: 1.7rem; cursor: pointer; } .hidden-col-row { width: 100%; display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.65rem; border: none; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; box-shadow: none; transition: background 140ms ease; } .hidden-col-row:hover { background: rgba(125, 211, 252, 0.07); transform: none; } .hidden-col-name { flex: 1 1 auto; text-align: left; } .hidden-col-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.82rem; } .hidden-col-row.is-filled .hidden-col-name { color: var(--ink); } .hidden-col-row.is-filled .hidden-col-count { color: var(--accent-ink); font-weight: 700; } @media (max-width: 860px) { .board-layout { flex-direction: column; } .hidden-cols { flex: 1 1 auto; width: 100%; } } .console-ticket-add { min-width: 2.5rem; justify-content: center; } .console-ticket-close { border-color: rgba(248, 113, 113, 0.35); color: var(--tint-danger); } .console-ticket-close:hover { background: rgba(248, 113, 113, 0.12); } /* ── Web console ───────────────────────────────────────────────────── */ .console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.25rem; } .console-warn { color: var(--warn); font-weight: 700; } .console-card { display: flex; flex-direction: column; margin-top: 1rem; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: rgba(3, 6, 13, 0.82); height: 340px; } /* xterm.js terminal mount — flex-fills the console column so the claude TUI (incl. the bottom input box + statusline) is never clipped */ .terminal-mount { flex: 1 1 auto; min-height: 420px; margin-top: 0; /* 패딩은 반드시 .xterm 쪽에 둔다 — FitAddon은 부모의 height에서 .xterm 의 패딩만 빼고 행 수를 계산하므로, 부모에 패딩을 주면 행이 과대계산되어 맨 아래 줄(claude statusline)이 잘린다. */ padding: 0; border-radius: 12px; border: 1px solid var(--line-strong); background: #05080f; overflow: hidden; } .terminal-mount .xterm { height: 100%; padding: 8px 10px; } .terminal-mount .xterm-viewport { background-color: transparent !important; } .console-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.9rem 1rem; font-family: "Sohne Mono", "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace; font-size: 0.86rem; line-height: 1.5; } .console-hint { margin: 0; color: var(--muted); } .console-line { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; color: var(--tint-info); } .console-cmd { color: var(--accent-ink); font-weight: 700; } .console-err { color: var(--tint-danger); } .console-sys { color: var(--muted); } .console-input-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.8rem; border-top: 1px solid var(--line); background: rgba(8, 13, 25, 0.6); } .console-prompt { color: var(--accent-ink); font-weight: 800; font-family: "Sohne Mono", "SFMono-Regular", monospace; } .console-input { flex: 1 1 auto; appearance: none; border: none; background: transparent; color: var(--ink); font-family: "Sohne Mono", "SFMono-Regular", "SF Mono", Consolas, monospace; font-size: 0.9rem; padding: 0.3rem 0; } .console-input:focus { outline: none; } .console-input::placeholder { color: var(--muted); } .console-run { appearance: none; border: none; border-radius: 9px; padding: 0.42rem 0.95rem; font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #04231d; box-shadow: none; } .console-run:hover { transform: none; filter: brightness(1.05); } @media (prefers-reduced-motion: reduce) { #bg-particles, .bg-glow, .status-badge-dot { animation: none !important; } } /* ── Console tab (per-ticket terminals) ─────────────────────────────── */ .console-page { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem 1.6rem 1.8rem; height: calc(100vh - 165px); box-sizing: border-box; } .console-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .console-page-title { margin: 0; font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; color: var(--ink); } .console-page-copy { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.9rem; } .console-ticket-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.3rem 0.1rem; } .console-ticket { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 0.82rem; font-weight: 600; cursor: pointer; box-shadow: none; transition: border-color 0.15s ease, background 0.15s ease; max-width: 280px; } .console-ticket:hover { border-color: var(--accent); } .console-ticket.is-active { border-color: var(--accent); background: rgba(45, 212, 191, 0.14); color: var(--accent-ink); } .console-ticket-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .console-ticket-ico { font-size: 0.8rem; } .console-ticket-flag { font-size: 0.72rem; opacity: 0.85; } /* ── Detail-modal comment box (continue same session) ──────────────── */ .comment-form { display: flex; flex-direction: column; gap: 0.55rem; } .comment-input { width: 100%; resize: vertical; min-height: 64px; padding: 0.6rem 0.7rem; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(3, 6, 13, 0.55); color: var(--ink); font-family: inherit; font-size: 0.9rem; line-height: 1.45; box-sizing: border-box; } .comment-input:focus { outline: none; border-color: var(--accent); } .comment-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .comment-hint { font-size: 0.78rem; color: var(--muted); } .comment-hint.is-linked { color: var(--accent-ink); font-weight: 600; } /* ── Agent feedback ([→ Agent]) ───────────────────────────────────── */ .agent-feedback-block { margin-top: 1.1rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(167, 139, 250, 0.24); border-radius: 12px; background: rgba(124, 58, 237, 0.07); } .agent-feedback-title { color: var(--tint-purple); } .agent-feedback-warning { margin: 0 0 0.7rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(251, 191, 36, 0.35); border-radius: 10px; background: rgba(251, 191, 36, 0.1); color: var(--tint-warn); font-size: 0.82rem; line-height: 1.5; } .act-agent { background: linear-gradient(180deg, #a78bfa, #7c3aed); border: none; color: #16053a; font-weight: 700; } .agent-target-chip { font-size: 0.7rem; padding: 0.08rem 0.45rem; border-radius: 999px; border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(124, 58, 237, 0.14); color: var(--tint-purple); font-weight: 600; white-space: nowrap; } /* ── Settings tab ──────────────────────────────────────────────────── */ .accent { color: var(--accent-ink); } .accent-link { color: var(--accent-ink); text-decoration: underline; } .settings-page { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 0 2rem; max-width: none; } .settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .settings-title { margin: 0; font-size: 1.35rem; font-weight: 750; letter-spacing: -0.01em; color: var(--ink); } .settings-copy { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.9rem; } .setup-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.65rem; } .setup-step { display: flex; flex-direction: column; gap: 0.12rem; padding: 0.75rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); } .setup-step b { color: var(--ink); font-size: 0.86rem; } .setup-step span { color: var(--muted); font-size: 0.78rem; } .setup-step.is-done { border-color: rgba(45, 212, 191, 0.38); background: rgba(45, 212, 191, 0.08); } .backend-grid, .login-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; margin-top: 0.4rem; } .backend-card { text-align: left; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: 13px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; box-shadow: none; transition: border-color 0.15s ease, background 0.15s ease; } .backend-card:hover { border-color: var(--accent); } .backend-card.is-active { border-color: var(--accent); background: rgba(45, 212, 191, 0.1); box-shadow: 0 0 0 1px var(--accent) inset; } .backend-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .backend-card-name { font-weight: 700; font-size: 1.02rem; } .backend-card-on { color: var(--accent-ink); font-weight: 700; font-size: 0.8rem; } .backend-card-pick { color: var(--muted); font-size: 0.8rem; } .backend-card-desc { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.45; } .backend-card-foot { display: flex; gap: 0.4rem; flex-wrap: wrap; } .cli-chip { font-size: 0.72rem; font-weight: 600; padding: 0.16rem 0.5rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); } .cli-chip.ok { color: var(--accent-ink); border-color: rgba(45, 212, 191, 0.4); } .cli-chip.default { color: var(--warn); border-color: rgba(252, 211, 77, 0.35); } .settings-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.3rem; } .settings-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 180px; } .settings-field-wide { grid-column: 1 / -1; } .field-help { color: var(--muted); font-size: 0.74rem; line-height: 1.35; } .field-help.is-ok { color: var(--accent-ink); } .field-help.is-error { color: var(--danger); } .input-action-row { display: flex; gap: 0.5rem; align-items: stretch; } .input-action-row .meta-input { flex: 1 1 auto; } .input-action-row .act-btn { flex: 0 0 auto; white-space: nowrap; } .project-connect-form { margin-top: 0.75rem; } .repo-connect-row { display: grid; gap: 0.55rem; } .repo-current { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.8rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); } .repo-current span, .repo-current em { color: var(--muted); font-size: 0.78rem; font-style: normal; } .repo-current b { color: var(--ink); font-size: 0.8rem; word-break: break-all; } .branch-picker { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); } .branch-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.55rem; } .branch-picker-head b { color: var(--ink); font-size: 0.92rem; } .branch-picker-head span { color: var(--muted); font-size: 0.78rem; } .branch-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.5rem; } .branch-option { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; min-height: 42px; padding: 0.55rem 0.7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); box-shadow: none; text-align: left; } .branch-option:hover { border-color: var(--accent); } .branch-option.is-selected { border-color: rgba(45, 212, 191, 0.45); background: rgba(45, 212, 191, 0.1); } .branch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Sohne Mono", "SF Mono", Menlo, Consolas, monospace; font-size: 0.8rem; } .branch-action { flex: 0 0 auto; color: var(--accent-ink); font-size: 0.72rem; font-weight: 800; } .settings-note { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.82rem; } .login-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card-strong); } .login-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .login-path { margin: 0; font-size: 0.78rem; color: var(--ink); word-break: break-all; } .login-hint { margin: 0; color: var(--muted); font-size: 0.82rem; } /* --- Claude accounts (Settings) --- */ .account-list { list-style: none; margin: 0.4rem 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .account-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); } .account-row.is-active { border-color: var(--accent); background: var(--card-strong); } .account-row-main { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 240px; min-width: 0; } .account-label { color: var(--ink); font-weight: 600; font-size: 0.9rem; } .account-dir { color: var(--muted); font-size: 0.76rem; word-break: break-all; } .account-row-flags { display: flex; gap: 0.35rem; flex-wrap: wrap; } .account-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .cli-chip.warn { color: var(--warn); border-color: rgba(252, 211, 77, 0.4); } .account-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.3rem; } .member-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin: 0.65rem 0; } .member-summary > div { padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); } .member-summary b { display: block; color: var(--ink); font-size: 1.05rem; } .member-summary span { color: var(--muted); font-size: 0.76rem; } .member-empty { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.45rem 0 0.85rem; padding: 0.75rem 0.85rem; border: 1px dashed rgba(252, 211, 77, 0.35); border-radius: 12px; background: rgba(252, 211, 77, 0.06); } .member-empty b { color: var(--warn); font-size: 0.88rem; } .member-empty span { color: var(--muted); font-size: 0.8rem; } .member-add-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem 0.8rem; align-items: end; margin-top: 0.6rem; padding: 0.95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); } /* Inputs/selects that sit directly in a column .settings-field must not inherit .meta-input's row flex-basis (which would be read as a 200px HEIGHT and blow the field up); keep them a normal single-line control. */ .settings-field > .meta-input, .settings-field > .meta-select { flex: none; width: 100%; height: 42px; } .member-add-panel .act-btn { height: 42px; } .member-card-list { list-style: none; margin: 0.7rem 0 0.9rem; padding: 0; display: grid; gap: 0.65rem; } .member-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.78rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); } .member-card.is-disabled { opacity: 0.68; } .member-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(45, 212, 191, 0.3); background: rgba(45, 212, 191, 0.1); color: var(--accent-ink); font-weight: 850; } .member-card-main { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .member-card-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .member-card-title b { color: var(--ink); font-size: 0.92rem; } .member-status { padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; font-weight: 800; } .member-status.is-active { color: var(--accent-ink); border-color: rgba(45, 212, 191, 0.35); } .member-email { color: var(--muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-metrics { display: flex; gap: 0.45rem; flex-wrap: wrap; } .member-metrics span { color: var(--muted); font-size: 0.72rem; } .member-metrics b { color: var(--ink); } .member-role-toggle, .member-card-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } /* 권한 토글은 우측 버튼 행의 첫 그룹 — 버튼들과 한 줄로 정렬되고, 구분선으로 액션 버튼과 시각적으로 분리한다. */ .member-card-actions .member-role-toggle { margin-right: 0.5rem; padding-right: 0.65rem; border-right: 1px solid var(--line); } .role-pill { padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-1); color: var(--muted); box-shadow: none; font-size: 0.74rem; font-weight: 800; } .role-pill.is-selected { color: var(--accent-ink); border-color: rgba(45, 212, 191, 0.42); background: rgba(45, 212, 191, 0.1); } /* Inline "정보 수정" editor — spans the full member card width below the row. */ .member-edit-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin-top: 0.6rem; padding-top: 0.75rem; border-top: 1px dashed var(--line-strong); } .member-edit-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 160px; min-width: 0; } .member-edit-field > span { font-size: 0.72rem; font-weight: 700; color: var(--muted); } .member-edit-field > .meta-input { flex: none; width: 100%; height: 40px; } .member-edit-actions { display: flex; gap: 0.4rem; align-items: flex-end; margin-left: auto; } .meta-input { flex: 1 1 200px; min-width: 0; padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink); font-size: 0.85rem; } .meta-input::placeholder { color: var(--muted); } .meta-input:focus { outline: none; border-color: var(--accent); } .meta-input:disabled { cursor: not-allowed; opacity: 0.45; } @media (max-width: 820px) { .input-action-row, .member-add-panel { grid-template-columns: 1fr; } .member-summary, .member-card { grid-template-columns: 1fr; } .input-action-row { flex-direction: column; } } /* ── WBS page ──────────────────────────────────────────────────────── */ .wbs-page { display: flex; flex-direction: column; gap: 1rem; } .wbs-overview { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .wbs-overview-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .wbs-overview-progress { display: flex; flex-direction: column; gap: 0.35rem; min-width: 220px; } .progress-track { height: 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-1); overflow: hidden; } .progress-track-sm { height: 5px; margin-top: 0.35rem; } .progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 300ms ease; } .progress-label { color: var(--muted); font-size: 0.82rem; font-weight: 700; text-align: right; } .wbs-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; } .wbs-tree { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.9rem; } .wbs-node { padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .wbs-node:hover { border-color: var(--line-strong); } .wbs-node.is-selected { border-color: rgba(45, 212, 191, 0.55); background: rgba(45, 212, 191, 0.07); } .wbs-node-main { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .wbs-node-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 600; color: var(--ink); } .wbs-node-count { color: var(--muted); font-size: 0.76rem; font-weight: 700; } .wbs-status { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(125, 211, 252, 0.07); color: var(--muted); font-size: 0.68rem; font-weight: 800; white-space: nowrap; } .wbs-status.is-active { border-color: rgba(45, 212, 191, 0.45); color: var(--accent-ink); background: rgba(45, 212, 191, 0.1); } .wbs-status.is-done { border-color: rgba(52, 211, 153, 0.45); color: var(--tint-success); background: rgba(52, 211, 153, 0.1); } .wbs-status.is-hold { border-color: rgba(251, 191, 36, 0.4); color: var(--tint-warn); background: rgba(251, 191, 36, 0.08); } .wbs-add-form-page { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; } .wbs-detail-actions { display: flex; align-items: center; gap: 0.45rem; } .wbs-status-form { margin: 0; } .wbs-blockers { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; } .wbs-sub-title { margin: 0.9rem 0 0.6rem; font-size: 0.95rem; color: var(--ink); } .wbs-artifacts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; } .wbs-empty-detail { padding: 1.5rem 0.5rem; } .wbs-unassigned { margin-top: 1.2rem; } @media (max-width: 960px) { .wbs-layout { grid-template-columns: 1fr; } } .member-reset-form { display: flex; gap: 0.35rem; align-items: center; } .member-reset-input { width: 9.5rem; height: 34px; font-size: 0.8rem; } /* ── Dependency (선후행) states ─────────────────────────────────────── */ .dependency-chip.is-resolved { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.1); color: var(--tint-success); } .dependency-chip.is-canceled { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.14); color: var(--tint-danger); } .wait-chip { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.12); color: var(--tint-warn); } .wait-chip.is-review { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.14); color: var(--tint-danger); } .dep-warning, .dep-waiting { margin-bottom: 0.45rem; padding: 0.4rem 0.55rem; border-radius: 9px; font-size: 0.76rem; font-weight: 650; line-height: 1.4; } .dep-warning { border: 1px solid rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.12); color: var(--tint-danger); } .dep-waiting { border: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.1); color: var(--tint-warn); } .board-issue.is-blocked { opacity: 0.82; border-style: dashed; } .prereq-split-form { display: flex; gap: 0.4rem; align-items: center; } .prereq-split-form .meta-input { flex: 1 1 auto; } /* ============================================================================ WBS 시트 + 간트 타임라인 (엑셀형 Work Breakdown Structure) ========================================================================== */ .wbs-sheet-card { margin-top: 1rem; } .wbs-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .gantt-pager { display: flex; align-items: center; gap: 0.5rem; } .gantt-month-label { font-weight: 800; min-width: 7.5rem; text-align: center; } .wbs-sheet-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; } /* 프로젝트 기간 전체를 그리는 시트 — 좌측 6개 컬럼은 position: sticky 로 고정되어 타임라인을 가로 스크롤해도 업무 정보가 남는다. sticky 셀은 스크롤되는 셀 위로 겹치므로 반드시 불투명 배경이어야 한다. */ .wbs-sheet { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 0.82rem; } .wbs-sheet th, .wbs-sheet td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.45rem 0.6rem; white-space: nowrap; } .wbs-sheet thead th { background: var(--sheet-head, #101a2e); font-weight: 800; text-align: center; } .wbs-sheet .sticky-col { position: sticky; z-index: 2; background: var(--sheet-sticky, #0c1424); } .wbs-sheet thead .sticky-col { z-index: 3; background: var(--sheet-head, #101a2e); } /* 컬럼 폭은 root CSS 변수로 조절(헤더 그립 드래그 — 아래 .wbs-col-grip), sticky left 오프셋은 앞 컬럼 폭의 누적 calc() 라 폭이 바뀌어도 어긋나지 않는다 */ .wbs-sheet .col-part { left: 0; width: var(--wbs-col-part, 110px); min-width: var(--wbs-col-part, 110px); max-width: var(--wbs-col-part, 110px); } .wbs-sheet .col-task { left: var(--wbs-col-part, 110px); width: var(--wbs-col-task, 250px); min-width: var(--wbs-col-task, 250px); max-width: var(--wbs-col-task, 250px); overflow: hidden; text-overflow: ellipsis; } .wbs-sheet .col-start { left: calc(var(--wbs-col-part, 110px) + var(--wbs-col-task, 250px)); width: var(--wbs-col-start, 100px); min-width: var(--wbs-col-start, 100px); max-width: var(--wbs-col-start, 100px); } .wbs-sheet .col-end { left: calc(var(--wbs-col-part, 110px) + var(--wbs-col-task, 250px) + var(--wbs-col-start, 100px)); width: var(--wbs-col-end, 100px); min-width: var(--wbs-col-end, 100px); max-width: var(--wbs-col-end, 100px); } .wbs-sheet .col-flag { left: calc(var(--wbs-col-part, 110px) + var(--wbs-col-task, 250px) + var(--wbs-col-start, 100px) + var(--wbs-col-end, 100px)); width: var(--wbs-col-flag, 72px); min-width: var(--wbs-col-flag, 72px); max-width: var(--wbs-col-flag, 72px); } .wbs-sheet .col-assignee { left: calc(var(--wbs-col-part, 110px) + var(--wbs-col-task, 250px) + var(--wbs-col-start, 100px) + var(--wbs-col-end, 100px) + var(--wbs-col-flag, 72px)); width: var(--wbs-col-assignee, 92px); min-width: var(--wbs-col-assignee, 92px); max-width: var(--wbs-col-assignee, 92px); } /* 컬럼 리사이즈 그립 — 헤더 셀 우측 가장자리를 드래그, 더블클릭이면 기본 폭 복원 */ .wbs-col-grip { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 4; user-select: none; } .wbs-col-grip:hover, .wbs-col-grip.is-dragging { background: linear-gradient(to right, transparent 2px, var(--accent, #2dd4bf) 2px, var(--accent, #2dd4bf) 5px, transparent 5px); } body.wbs-col-resizing { cursor: col-resize; user-select: none; } .gantt-month-head { background: rgba(45, 212, 191, 0.12) !important; } .gantt-day-head { min-width: 24px; padding: 0.25rem 0.12rem !important; font-size: 0.68rem; text-align: center; } .gantt-day-head.is-weekend { color: #f87171; } .gantt-day-head.is-today { box-shadow: inset 0 -2px 0 var(--accent); } /* 월 경계선 — 달이 바뀌는 첫날에 진한 세로선 */ .gantt-day-head.month-first, .gantt-cell.month-first { border-left: 2px solid var(--line-strong); } .part-cell { font-weight: 800; text-align: center; vertical-align: middle; background: var(--sheet-head, #101a2e) !important; } .task-cell { cursor: pointer; } .wbs-sheet-row:hover .gantt-cell:not(.bar-active):not(.bar-done):not(.bar-hold) { background: rgba(45, 212, 191, 0.045); } .wbs-sheet-row:hover .sticky-col:not(.part-cell) { background: var(--sheet-sticky-hover, #11203a); } .wbs-sheet-row.is-selected .sticky-col:not(.part-cell) { background: var(--sheet-sticky-selected, #12263f); } .col-date { text-align: center; } .col-flag { text-align: center; } .col-flag.is-done { color: #34d399; font-weight: 800; } .col-assignee { text-align: center; } .gantt-cell { min-width: 24px; height: 1.8rem; padding: 0 !important; } .gantt-cell.is-weekend { background: rgba(248, 113, 113, 0.05); } .gantt-cell.is-today { box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.35); } .gantt-cell.bar-active { background: #facc15; } .gantt-cell.bar-done { background: #34d399; } .gantt-cell.bar-hold { background: rgba(148, 163, 184, 0.5); } .wbs-add-form-page { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .wbs-add-form-page .meta-input { height: 40px; } /* ============================================================================ 화면 여백 정돈 — 촘촘한 요소들에 숨 쉴 공간 (로직 무관, 스타일만) ========================================================================== */ .section-card { padding: 1.5rem 1.6rem; } .section-card + .section-card, .section-card ~ .section-card { margin-top: 1.1rem; } .settings-field { gap: 0.45rem; margin-bottom: 0.9rem; } .field-help { margin-top: 0.25rem; } .input-action-row { gap: 0.55rem; } /* 구성원 카드: 행 간격·내부 여백·버튼 줄바꿈 허용 */ .member-card-list { display: flex; flex-direction: column; gap: 0.7rem; } .member-card { padding: 1rem 1.1rem; gap: 0.9rem; } .member-card-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; } .member-card-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .member-metrics { display: flex; gap: 0.8rem; margin-top: 0.3rem; } .member-reset-form { display: flex; align-items: center; gap: 0.45rem; } /* 보드 카드: 내부 블록 간 간격 */ .board-issue { padding: 0.85rem 0.9rem; } .board-issue .label-chips { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.3rem; } .board-issue-foot { margin-top: 0.45rem; } /* 이슈 상세 사이드: 그룹 간 간격 */ .side-group + .side-group { margin-top: 0.9rem; } /* 이슈 폼: 메타 필드 간격 */ .issue-meta { gap: 0.8rem 0.9rem; } /* WBS 인라인 생성 행 + 이슈 매핑 */ .gantt-cell { cursor: pointer; } .wbs-add-row td { background: rgba(45, 212, 191, 0.03); } .wbs-inline-input { width: 100%; height: 30px; padding: 0.15rem 0.4rem; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); font-size: 0.78rem; } .wbs-inline-input:focus { outline: none; border-color: var(--accent); } .wbs-add-cell { text-align: left; padding-left: 0.6rem !important; } .wbs-inline-add { height: 30px; padding: 0.15rem 0.7rem; } .wbs-link-form { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.9rem; } .wbs-link-select { flex: 0 1 420px; min-width: 240px; } .wbs-unlink-btn { padding: 0.15rem 0.5rem; font-size: 0.72rem; } /* 이슈 첨부 파일 업로드 */ .issue-attach { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0 0.2rem; } .attach-input { color: var(--muted); font-size: 0.8rem; } .attach-entry { display: flex; align-items: center; gap: 0.5rem; } .attach-name { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; } .attach-progress { width: 120px; height: 8px; } .attach-error { font-size: 0.75rem; color: var(--tint-danger); } /* 첨부 드롭존 — 클릭 선택 + 드래그&드롭 */ .attach-dropzone { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; padding: 0.8rem 0.9rem; border: 1.5px dashed var(--line-strong); border-radius: 10px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .attach-dropzone-hint { color: var(--muted); font-size: 0.78rem; } .issue-attach.is-dragover .attach-dropzone { border-color: var(--accent); background: rgba(45, 212, 191, 0.07); } /* WBS 시트 테마 변수 — sticky 셀은 불투명 배경이 필요해 변수로 양 테마 대응 */ :root { --sheet-head: #101a2e; --sheet-sticky: #0c1424; --sheet-sticky-hover: #11203a; --sheet-sticky-selected: #12263f; } [data-theme="light"] { --sheet-head: #e9eef6; --sheet-sticky: #ffffff; --sheet-sticky-hover: #eef6f4; --sheet-sticky-selected: #dcefeb; } [data-theme="light"] .wbs-add-row td { background: rgba(13, 148, 136, 0.05); } /* 라이트 모드 프로젝트 칩 — 밝은 배경 위 틸 톤 */ [data-theme="light"] .top-nav-project { border-color: rgba(13, 148, 136, 0.45); background: rgba(13, 148, 136, 0.1); color: #0f766e; -webkit-text-fill-color: #0f766e; } /* 위험성 평가 결과 모달 목록 */ .risk-list { list-style: none; padding: 0; margin: 0.6rem 0 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; } .risk-item { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; } /* 비활성화된 백엔드 카드 (Codex 고정 해제 전까지) */ .backend-card.is-disabled { opacity: 0.45; cursor: not-allowed; } /* ============================================================ Board v2 — 프로젝트 보드 개편 (히어로·컬럼 액센트·카드 리디자인) 이 섹션이 보드 관련 이전 정의를 최종 확정한다 (파일 끝 = 우선). ============================================================ */ /* ── 보드 히어로 ── */ .board-hero { display: flex; align-items: stretch; gap: 1.6rem; padding: 1.15rem 1.4rem; margin-bottom: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); flex-wrap: wrap; } .board-hero-heading { display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; min-width: 160px; } .board-hero-title { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); } .board-hero-sub { margin: 0; font-size: 0.82rem; color: var(--muted); } .board-hero-sub b { color: var(--ink); } .board-progress { flex: 1 1 260px; display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; min-width: 220px; } .board-progress-head { display: flex; align-items: baseline; justify-content: space-between; } .board-progress-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .board-progress-pct { font-size: 1.05rem; font-weight: 800; color: var(--accent-ink); } .board-progress-bar { display: flex; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); } .board-progress-fill { height: 100%; } .board-progress-fill.seg-done { background: linear-gradient(90deg, #34d399, #2dd4bf); } .board-progress-fill.seg-active { background: linear-gradient(90deg, rgba(252, 211, 77, 0.95), rgba(251, 146, 60, 0.9)); } .board-stage-chips { display: flex; gap: 0.7rem; flex-wrap: wrap; } .stage-chip { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.74rem; color: var(--muted); } .stage-chip b { color: var(--ink); } .stage-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .stage-chip.stage-done .stage-dot { background: #34d399; } .stage-chip.stage-active .stage-dot { background: #fcd34d; } .stage-chip.stage-todo .stage-dot { background: #8aa0bd; } .board-hero-team { display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding-left: 1.2rem; border-left: 1px solid var(--line); } .board-team-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .board-team-avatars { display: flex; } .board-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: #fff; border: 2px solid var(--card-strong); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); user-select: none; } .board-team-avatars .board-avatar + .board-avatar { margin-left: -8px; } .board-avatar-sm { width: 20px; height: 20px; font-size: 0.62rem; border-width: 1px; box-shadow: none; } /* ── 컬럼 ── */ .board { gap: 0.95rem; padding-bottom: 0.9rem; } .board-col { --col-accent: #8aa0bd; flex: 0 0 290px; width: 290px; max-height: 76vh; background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; position: relative; overflow: hidden; } .board-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--col-accent); opacity: 0.9; } .board-col.col-todo { --col-accent: #8aa0bd; } .board-col.col-progress { --col-accent: #fcd34d; } .board-col.col-review { --col-accent: #5eead4; } .board-col.col-approve { --col-accent: #34d399; } .board-col.col-rework { --col-accent: #fb923c; } .board-col.col-deploy { --col-accent: #22c55e; } .board-col.col-done { --col-accent: #818cf8; } .board-col.col-cancel { --col-accent: #6b7280; } .board-col-head { padding: 0.78rem 0.85rem 0.66rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--col-accent) 6%, transparent); } .board-col-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 19px; padding: 0 0.4rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--col-accent) 18%, transparent); } .board-col.col-done .board-issue { opacity: 0.9; } /* ── 카드 ── */ .board-issue { background: var(--card-strong); border: 1px solid var(--line); border-radius: 12px; padding: 0.72rem 0.8rem 0.66rem; cursor: pointer; transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease; } .board-issue:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); } .board-issue-title { margin: 0 0 0.45rem; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; } /* 시스템 구분 칩 — [FO]/[BO]/[RULE] 제목 프리픽스를 색 칩으로 승격 */ .sys-chip { display: inline-flex; align-items: center; padding: 0.08rem 0.42rem; border-radius: 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.4; } .sys-chip-fo { color: #67e8f9; background: rgba(34, 211, 238, 0.14); border: 1px solid rgba(34, 211, 238, 0.35); } .sys-chip-bo { color: #c4b5fd; background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(139, 92, 246, 0.38); } .sys-chip-rule { color: #fcd34d; background: rgba(252, 211, 77, 0.13); border: 1px solid rgba(252, 211, 77, 0.34); } .sys-chip-etc { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-strong); } [data-theme="light"] .sys-chip-fo { color: #0e7490; background: rgba(14, 116, 144, 0.1); border-color: rgba(14, 116, 144, 0.3); } [data-theme="light"] .sys-chip-bo { color: #6d28d9; background: rgba(109, 40, 217, 0.09); border-color: rgba(109, 40, 217, 0.28); } [data-theme="light"] .sys-chip-rule { color: #a16207; background: rgba(161, 98, 7, 0.1); border-color: rgba(161, 98, 7, 0.28); } /* 우선순위 칩 */ .prio-chip { display: inline-flex; align-items: center; gap: 0.18rem; padding: 0.06rem 0.4rem; border-radius: 6px; font-size: 0.66rem; font-weight: 700; line-height: 1.5; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); } .prio-chip-1 { color: #fca5a5; background: rgba(248, 113, 113, 0.13); border-color: rgba(248, 113, 113, 0.4); } .prio-chip-2 { color: #fdba74; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.36); } [data-theme="light"] .prio-chip-1 { color: #b91c1c; background: rgba(185, 28, 28, 0.08); border-color: rgba(185, 28, 28, 0.3); } [data-theme="light"] .prio-chip-2 { color: #c2410c; background: rgba(194, 65, 12, 0.08); border-color: rgba(194, 65, 12, 0.28); } /* 서브태스크 진행바 */ .board-sub-progress { display: flex; align-items: center; gap: 0.45rem; margin: 0.15rem 0 0.45rem; } .board-sub-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .board-sub-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #818cf8, #34d399); } .board-sub-count { font-size: 0.68rem; color: var(--muted); white-space: nowrap; } /* 카드 푸터 — 아바타 + 메타 */ .board-issue-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; font-size: 0.72rem; } .board-assignee { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; } .board-assignee-name { color: var(--muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; } .board-assignee-none { color: var(--muted); opacity: 0.55; font-size: 0.7rem; } .board-foot-meta { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; } .foot-item { color: var(--muted); } /* ── 상단 네비 외부 링크 (K-Smith 등) ── */ .nav-tab-external { border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--accent) 8%, transparent); } .nav-tab-external:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } /* ── 반응형 ── */ @media (max-width: 900px) { .board-hero { flex-direction: column; gap: 0.9rem; } .board-hero-team { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 0.8rem; } } /* ── 설정: 라벨(도메인) 관리 ── */ .domain-manage-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .domain-manage-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); } .domain-manage-row .domain-label-chip { font-size: 0.85rem; } .domain-usage { font-size: 0.76rem; } .domain-delete-btn { margin-left: auto; } .domain-add-form { display: flex; align-items: center; gap: 0.5rem; max-width: 420px; } .domain-add-form .domain-add-input { flex: 1; } /* ── 섹션(스윔레인) 보드 ── */ .board-lanes { display: flex; flex-direction: column; gap: 1.15rem; margin-top: 1.1rem; } .board-lane { border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--card) 55%, transparent); padding: 0.95rem 1.05rem 0.55rem; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .board-lane-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .lane-chip { font-size: 0.82rem; padding: 0.22rem 0.66rem; border-radius: 8px; } .lane-count { font-size: 0.78rem; color: var(--muted); } .lane-progress { flex: 0 1 180px; min-width: 90px; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin-left: auto; } .lane-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #34d399, #2dd4bf); } .lane-done { font-size: 0.74rem; color: var(--muted); white-space: nowrap; } .board-lane .board { margin-top: 0.7rem; padding-bottom: 0.5rem; } .board-lane .board-col { max-height: 60vh; } .board-view-toggle { flex: none; } /* ── WBS 임포트 바 ── */ .wbs-import-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.2rem 0 0.9rem; padding: 0.6rem 0.8rem; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface-1); } .wbs-import-form { display: flex; align-items: center; gap: 0.5rem; } .wbs-import-input { font-size: 0.8rem; color: var(--muted); max-width: 260px; } .wbs-import-hint { font-size: 0.72rem; } /* ── 📁 문서 탭 (프로젝트 .md 브라우저·에디터) ── */ .docs-page { display: flex; flex-direction: column; gap: 1rem; } .docs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .docs-root { font-size: 0.78rem; word-break: break-all; } .docs-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1rem; align-items: start; } .docs-tree { max-height: 74vh; overflow-y: auto; padding: 0.8rem; } .docs-tree-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; } .docs-node { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.83rem; padding: 0.28rem 0.5rem; border-radius: 8px; color: var(--ink); background: transparent; border: none; box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .docs-node-dir { color: var(--muted); font-weight: 700; font-size: 0.76rem; margin-top: 0.25rem; } .docs-node-file { cursor: pointer; transition: background 120ms ease; } .docs-node-file:hover { background: rgba(125, 211, 252, 0.08); transform: none; } .docs-node-file.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); } .docs-editor { min-height: 60vh; display: flex; flex-direction: column; } .docs-editor-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; } .docs-path { font-size: 0.85rem; font-weight: 700; color: var(--accent-ink); overflow-wrap: anywhere; } .docs-meta { font-size: 0.72rem; margin-left: auto; } .docs-editor-form { display: flex; flex-direction: column; flex: 1; gap: 0.6rem; } .docs-textarea { flex: 1; min-height: 56vh; resize: vertical; padding: 0.9rem 1rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font-size: 0.82rem; line-height: 1.55; tab-size: 2; } .docs-textarea:focus { outline: none; border-color: var(--accent); } .docs-textarea[readonly] { opacity: 0.75; } .docs-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .docs-hint { font-size: 0.74rem; } @media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; } } /* ── 콘솔 레이아웃 조정: 칩 바 컴팩트 + 터미널 확대 + 페이지 스크롤 허용 ── */ /* 티켓이 많아지면(시드 63건+) 칩이 화면을 다 먹고 터미널이 쪼그라들었다. 페이지 고정 높이를 풀어 메인 스크롤을 허용하고, 칩 바는 2~3줄까지만 보여주고 내부 스크롤로 접는다. 터미널은 최소 68vh 를 보장한다. */ .console-page { height: auto; min-height: calc(100vh - 165px); } .console-ticket-bar { max-height: 6.6rem; overflow-y: auto; align-content: flex-start; scrollbar-width: thin; padding-right: 0.4rem; } .terminal-mount { min-height: 68vh; } /* ── 관제 히어로 상태 라인 정렬 ── */ /* '실시간' 배지와 실행/대기/차단 칩이 두 줄 스택으로 떠 보이던 것을 한 줄의 응집된 상태 라인으로 정렬한다 (높이·간격 통일, 우측 정렬). */ .status-stack { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem; min-width: 0; } .status-stack .status-badge { min-height: 1.95rem; box-sizing: border-box; } .status-stack .hero-glance { gap: 0.45rem; } .status-stack .hero-glance-chip { min-height: 1.95rem; box-sizing: border-box; align-items: center; } @media (max-width: 860px) { .status-stack { justify-content: flex-start; } } /* ── Agent Driver CI 로고 ── */ .top-nav-brand { display: flex; align-items: center; gap: 0.55rem; } .brand-logo { display: inline-flex; align-items: center; flex: none; } .ad-logo { display: block; } .brand-word { font-weight: 800; letter-spacing: -0.012em; background: linear-gradient(92deg, #5eead4 10%, #7dd3fc 55%, #a5b4fc 95%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; } [data-theme="light"] .brand-word { background: linear-gradient(92deg, #0d9488 10%, #0369a1 55%, #6d28d9 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-logo { display: flex; align-items: center; gap: 0.6rem; } .auth-logo .auth-logo-mark { display: inline-flex; align-items: center; } .auth-logo .brand-word { font-size: 1.12em; } /* ── 섹션 레인: 카드 가로 퍼짐 ── */ /* 레인 안 컬럼(대부분 Done 하나)이 290px 세로 기둥으로만 쌓여 우측이 비었다. 레인에서는 컬럼이 가용 폭을 나눠 갖고, 카드는 반응형 그리드로 가로로 퍼진다. (상태 뷰의 고정폭 컬럼은 그대로 유지) */ .board-lane .board { flex-wrap: wrap; overflow-x: visible; } .board-lane .board-col { flex: 1 1 340px; width: auto; max-height: none; } .board-lane .board-col-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; align-items: start; max-height: none; overflow: visible; } .board-lane .board-col-add { grid-column: 1 / -1; } /* 레인의 '＋ 이슈 추가'는 전체 폭 대신 컴팩트 칩으로 */ .board-lane .board-col-add { grid-column: 1 / -1; justify-self: start; width: auto; padding: 0.32rem 0.75rem; font-size: 0.76rem; border-radius: 999px; } /* 콘솔 티켓 칩 바: 내부 스크롤 제거 — 전부 펼쳐 보이게 (페이지 스크롤 사용) */ .console-ticket-bar { max-height: none; overflow-y: visible; padding-right: 0.1rem; } /* 콘솔 티켓 칩 바: 내부 스크롤 제거 — 전부 펼치고(살짝 컴팩트) 페이지 스크롤에 맡긴다 */ .console-ticket-bar { max-height: none; overflow: visible; padding-right: 0.1rem; } .console-ticket { padding: 0.3rem 0.6rem; font-size: 0.78rem; max-width: 250px; } /* 임베드 페이지(/ext/:index) — nav_links embed 링크를 대시보드 안 iframe 으로 */ .embed-page { display: block; /* app-shell 하단 패딩(3.5rem)을 회수해 iframe 이 화면 바닥까지 내려간다 */ margin-bottom: -3.25rem; } .embed-frame { display: block; width: 100%; height: calc(100vh - 118px); min-height: 560px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); } /* WBS 업무 상세 모달 — 행 클릭 시 팝업 (기존 하단 카드에서 전환) */ .overlay-card-wbs { width: min(1080px, 100%); } .wbs-detail-body { color: var(--ink); font-size: 0.88rem; } /* ── 📁 문서 탭: 보기/편집 토글 + 마크다운 렌더 뷰 ─────────────────────── */ .docs-view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; margin-left: 0.2rem; } .docs-view-btn { font: inherit; font-size: 0.76rem; font-weight: 700; padding: 0.24rem 0.62rem; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .docs-view-btn + .docs-view-btn { border-left: 1px solid var(--line-strong); } .docs-view-btn:hover { color: var(--ink); background: rgba(125, 211, 252, 0.08); } .docs-view-btn.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); } .docs-preview { flex: 1; min-height: 56vh; overflow-y: auto; padding: 1.4rem 1.6rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); } /* 렌더된 마크다운 본문 — 대시보드 디자인 토큰에 맞춘 타이포그래피 */ .markdown-body { color: var(--ink); font-size: 0.9rem; line-height: 1.7; word-break: break-word; } .markdown-body > :first-child { margin-top: 0; } .markdown-body > :last-child { margin-bottom: 0; } .markdown-body .md-h1, .markdown-body .md-h2, .markdown-body .md-h3, .markdown-body .md-h4, .markdown-body .md-h5, .markdown-body .md-h6 { color: var(--ink); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 1.5em 0 0.6em; } .markdown-body .md-h1 { font-size: 1.6rem; padding-bottom: 0.3em; border-bottom: 1px solid var(--line); } .markdown-body .md-h2 { font-size: 1.32rem; padding-bottom: 0.25em; border-bottom: 1px solid var(--line); } .markdown-body .md-h3 { font-size: 1.14rem; } .markdown-body .md-h4 { font-size: 1rem; } .markdown-body .md-h5 { font-size: 0.9rem; color: var(--muted); } .markdown-body .md-h6 { font-size: 0.84rem; color: var(--muted); } .markdown-body .md-p { margin: 0.7em 0; } .markdown-body .md-list { margin: 0.6em 0; padding-left: 1.6em; } .markdown-body .md-list .md-list { margin: 0.2em 0; } .markdown-body li { margin: 0.2em 0; } .markdown-body .md-link { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .markdown-body .md-link:hover { border-bottom-color: var(--accent); } .markdown-body .md-inline-code { font-family: var(--mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.86em; padding: 0.12em 0.4em; border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); white-space: break-spaces; } .markdown-body .md-code { margin: 0.9em 0; padding: 0.9rem 1.1rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(2, 6, 14, 0.6); overflow-x: auto; } .markdown-body .md-code code { font-family: var(--mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.82rem; line-height: 1.55; color: var(--ink); white-space: pre; } .markdown-body .md-quote { margin: 0.9em 0; padding: 0.3em 1em; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--muted); border-radius: 0 8px 8px 0; } .markdown-body .md-quote > :first-child { margin-top: 0; } .markdown-body .md-quote > :last-child { margin-bottom: 0; } .markdown-body .md-hr { margin: 1.6em 0; border: none; border-top: 1px solid var(--line-strong); } .markdown-body .md-table { margin: 1em 0; border-collapse: collapse; width: 100%; font-size: 0.84rem; display: block; overflow-x: auto; } .markdown-body .md-table th, .markdown-body .md-table td { border: 1px solid var(--line-strong); padding: 0.45rem 0.7rem; text-align: left; } .markdown-body .md-table th { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 800; color: var(--ink); } .markdown-body .md-table tbody tr:nth-child(even) td { background: rgba(125, 211, 252, 0.04); } .markdown-body .md-img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); } .markdown-body strong { font-weight: 800; color: var(--ink); } .markdown-body del { opacity: 0.6; } /* ── 설정 · 사용량/한도 ──────────────────────────────────────────────── */ .usage-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; margin-top: 0.6rem; } .usage-block-title { margin: 0 0 0.65rem; font-size: 0.95rem; font-weight: 800; } .usage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; } .usage-stats > div { display: grid; gap: 0.15rem; padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); } .usage-stats span { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.04em; } .usage-stats b { font-size: 1.02rem; } .usage-window-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .usage-window-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; } .usage-window-label { font-weight: 700; font-size: 0.88rem; } .usage-window-pct { font-weight: 800; font-size: 0.92rem; } .usage-window-pct.is-warn { color: #facc15; } .usage-window-pct.is-crit { color: #f87171; } .progress-fill.is-warn { background: linear-gradient(90deg, #f59e0b, #facc15); } .progress-fill.is-crit { background: linear-gradient(90deg, #ef4444, #f87171); } .usage-window-reset { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.78rem; } .usage-raw summary { cursor: pointer; } .usage-updated { text-align: right; }