/* 여와 — 옥빛(창조) + 금빛(복원) + 밤하늘(지혜) 색상 체계 */ :root { --accent:#0a7569; --gold:#b78318; --jade:#0a7569; --pg:#f8f6ef; --card:#efede4; --card2:#e6e2d7; --bub:#e9e6dc; --tx:#16231f; --tx2:#3b4c46; --mut:#74827c; --faint:#a2aaa5; --ok:#37865f; --warn:#ad781d; --dgr:#bd4d38; --track:rgba(22,35,31,0.14); --soft:rgba(10,117,105,0.055); --soft2:rgba(10,117,105,0.11); --knob:#ffffff; --shadow:0 2px 12px rgba(23,52,45,0.055); --code:#f2efe6; } /* 밤 테마 변수 — hud.js 가 를 지정한다. AUTO 는 시간 기준(06:30~18:30 낮)이라 OS 가 항상 밝음이어도 밤이 온다. 아래 media 블록은 JS 가 아직 안 돌았을 때(첫 페인트)의 폴백이다. */ :root[data-theme="dark"] { --accent:#58c8b3; --gold:#efc15a; --jade:#58c8b3; --pg:#06151b; --card:#0c2227; --card2:#102a30; --bub:#112b31; --tx:#edf4ef; --tx2:#c5d5cf; --mut:#88a099; --faint:#56716b; --ok:#55bc82; --warn:#e1ad46; --dgr:#e4775d; --track:rgba(255,255,255,0.13); --soft:rgba(255,255,255,0.05); --soft2:rgba(255,255,255,0.09); --knob:#06151b; --shadow:0 5px 24px rgba(0,0,0,0.28); --code:#081b20; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent:#58c8b3; --gold:#efc15a; --jade:#58c8b3; --pg:#06151b; --card:#0c2227; --card2:#102a30; --bub:#112b31; --tx:#edf4ef; --tx2:#c5d5cf; --mut:#88a099; --faint:#56716b; --ok:#55bc82; --warn:#e1ad46; --dgr:#e4775d; --track:rgba(255,255,255,0.13); --soft:rgba(255,255,255,0.05); --soft2:rgba(255,255,255,0.09); --knob:#06151b; --shadow:0 5px 24px rgba(0,0,0,0.28); --code:#081b20; } } * { box-sizing: border-box; } html, body { margin:0; height:100%; background:var(--pg); color:var(--tx); font-family:'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body { display:flex; flex-direction:column; height:100dvh; overflow:hidden; } .hidden { display:none !important; } .mono { font-family:'IBM Plex Mono', ui-monospace, monospace; } .dim { color:var(--faint); } button { font-family:inherit; } a { color:var(--accent); text-decoration:none; } a:hover { opacity:.75; } ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-thumb { background:var(--track); border-radius:99px; } @keyframes paisBlink { 0%,100%{opacity:1} 50%{opacity:.28} } /* ---------- 헤더 ---------- */ #topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; position:relative; z-index:30; padding:max(env(safe-area-inset-top),12px) 22px 12px; } #topbar::after { content:''; position:absolute; left:22px; right:22px; bottom:0; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 48%,transparent),transparent); } .brand { display:flex; align-items:center; gap:11px; } .brand-mark { width:38px; height:38px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--gold) 26%,transparent)); } .btext { display:flex; flex-direction:column; gap:3px; } .btext b { font:600 16px/1 'IBM Plex Mono',monospace; letter-spacing:.38em; } .btext b .dim { color:var(--gold); } .btext small { font:400 9px/1 'IBM Plex Mono',monospace; letter-spacing:.2em; color:var(--faint); } .hstat { display:flex; align-items:center; gap:16px; } .chip { display:flex; align-items:center; gap:7px; font:500 11px/1 'IBM Plex Mono',monospace; letter-spacing:.1em; color:var(--mut); } .led { width:6px; height:6px; border-radius:50%; background:var(--ok); display:inline-block; } .led.off { background:var(--track); } .actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; } .action-group { display:flex; align-items:center; gap:2px; padding:0 3px; border-left:1px solid var(--track); border-right:1px solid var(--track); } .clock { min-width:70px; font-size:13px; color:var(--tx2); letter-spacing:.05em; text-align:right; } .actions button { width:32px; height:32px; border:none; border-radius:9px; background:transparent; color:var(--mut); font-size:14px; cursor:pointer; } .actions button:hover { background:var(--soft); color:var(--tx2); } .actions .ui-mode-btn { width:auto; padding:0 11px; border:1px solid var(--track); color:var(--tx2); font-size:11px; white-space:nowrap; } .actions .ui-mode-btn:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--track)); } .action-menu { position:relative; } .action-menu summary { list-style:none; height:32px; padding:0 10px; display:flex; align-items:center; gap:6px; border:1px solid transparent; border-radius:9px; color:var(--mut); cursor:pointer; user-select:none; white-space:nowrap; } .action-menu summary::-webkit-details-marker { display:none; } .action-menu summary b { font-size:11px; font-weight:500; } .action-menu summary:hover, .action-menu[open] summary { color:var(--tx2); background:var(--soft); border-color:var(--track); } .action-menu-pop { position:absolute; z-index:50; top:calc(100% + 9px); right:0; width:250px; padding:9px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; border:1px solid var(--track); border-radius:13px; background:var(--card); box-shadow:0 14px 42px rgba(0,0,0,.22); } .action-menu-pop::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; } .actions .action-menu-pop button { width:100%; height:39px; padding:0 10px; display:flex; align-items:center; gap:8px; justify-content:flex-start; color:var(--tx2); font-size:14px; text-align:left; } .actions .action-menu-pop button::after { content:attr(data-label); font-size:11px; color:var(--mut); white-space:nowrap; } .actions .action-menu-pop button:hover::after { color:var(--tx2); } .actions .action-menu-pop .danger-action { grid-column:1/-1; color:var(--dgr); } /* 밤낮 토글 — 글자 버튼이라 폭을 아이콘에 맞추지 않는다 */ #themeTag { width:auto; padding:0 9px; font-size:10px; letter-spacing:.14em; color:var(--faint); } .actions .action-menu-pop #themeTag { width:100%; letter-spacing:.08em; } #themeTag:hover { color:var(--accent); } #wakeBtn.recording, #micBtn.recording { color:var(--accent); animation:paisBlink 1s infinite; } /* ---------- 3열 덱 ---------- */ .deck { flex:1; min-height:0; display:grid; grid-template-columns:282px minmax(0,1fr) 326px; gap:16px; padding:4px 22px max(env(safe-area-inset-bottom),20px); } /* 레일이 화면보다 길어지면 레일 자체가 스크롤된다. 예전엔 레일에 overflow 가 없어 MEMORY 카드가 화면 밖으로 삐져나가고, flex:1 이던 PERMISSIONS 는 0 에 가깝게 짜부라져 읽을 수 없었다(맥 크롬 신고). */ .rail { display:flex; flex-direction:column; gap:16px; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; } .rail > .card { flex:0 0 auto; } /* 기본은 내용만큼만 */ #permPanel { flex:1 1 auto; min-height:190px; } /* 남는 높이를 받되 바닥은 지킨다 */ #factList { max-height:34vh; overflow-y:auto; } /* 기억이 늘어도 카드를 넘지 않게 */ .center { display:grid; grid-template-rows:minmax(220px,42%) minmax(0,1fr); gap:16px; min-height:0; min-width:0; } /* 기본값은 대화 중심의 간단 화면. 기존 관제판은 "전체 보기" 한 번으로 그대로 돌아온다. */ body.simple-ui .deck { grid-template-columns:minmax(0,1060px); justify-content:center; } body.simple-ui .rail, body.simple-ui .core { display:none; } body.simple-ui .center { grid-template-rows:minmax(0,1fr); width:100%; } body.simple-ui .chatwrap { border:1px solid color-mix(in srgb,var(--gold) 12%,transparent); } body.simple-ui #chat { padding:28px clamp(18px,4vw,48px); } body.simple-ui .msg { max-width:min(78%,760px); font-size:15px; } body.simple-ui .tools-menu { display:none; } .card { background:var(--card); border:1px solid color-mix(in srgb,var(--gold) 9%,transparent); border-radius:16px; box-shadow:var(--shadow); padding:15px 17px 17px; } .card.grow { flex:1; min-height:0; display:flex; flex-direction:column; } .chead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; } .chead h4 { margin:0; font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.2em; color:var(--faint); } .mini { border:none; background:transparent; color:var(--faint); font-size:13px; cursor:pointer; width:22px; height:22px; border-radius:6px; } .mini:hover { background:var(--soft); color:var(--tx2); } .scroll { overflow-y:auto; min-height:0; flex:1; } /* 세션 지표 */ .vitals { display:grid; gap:12px; } .vrow { display:grid; gap:6px; } .vtop { display:flex; justify-content:space-between; align-items:baseline; } .vtop span:first-child { font:400 12px/1 'IBM Plex Sans KR',sans-serif; color:var(--mut); } .vtop span:last-child { font:500 12px/1 'IBM Plex Mono',monospace; color:var(--tx2); } .vbar { height:3px; border-radius:99px; background:var(--track); overflow:hidden; } .vbar i { display:block; height:100%; background:var(--accent); transition:width .5s ease; } /* ---------- 코어 ---------- */ .core { position:relative; overflow:hidden; border-radius:18px; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--jade) 10%,var(--card)),var(--card) 68%); box-shadow:var(--shadow); border:1px solid color-mix(in srgb,var(--gold) 11%,transparent); } /* 그래프를 다룰 땐 좁은 칸이 답답하다 — 캔버스 더블클릭으로 크게 보기(다시 더블클릭하면 원래대로). .center 가 grid 라 행 크기를 바꿔야 실제로 커진다. */ .center:has(.core.expanded) { grid-template-rows:minmax(0,1fr) 96px; } #neural { touch-action:none; } /* 두 손가락 확대가 브라우저 기본 동작에 뺏기지 않게 */ #neural { position:absolute; inset:0; width:100%; height:100%; display:block; } .core-tl { position:absolute; left:20px; top:18px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; pointer-events:none; } .core-tl .lbl { font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.2em; color:var(--faint); } .core-tl .state { font:500 20px/1.1 'IBM Plex Sans KR',sans-serif; color:var(--tx2); } /* 뇌 재료 전환 — 라벨 밑의 작은 칩. core-tl 은 클릭 통과라 버튼만 살린다 */ .gsrc { pointer-events:auto; border:none; cursor:pointer; margin-top:2px; padding:4px 9px; border-radius:8px; background:var(--soft); font:500 9px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; color:var(--mut); } .gsrc:hover { background:var(--soft2); color:var(--accent); } /* 노드 클릭 미리보기 — 그래프 위 유리 카드. HUD 든 클래식이든 코어 안에서 뜬다 */ .ninfo { position:absolute; z-index:8; width:min(320px, 72vw); padding:12px 14px; border-radius:12px; background:color-mix(in srgb, var(--pg) 84%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid color-mix(in srgb, var(--tx) 10%, transparent); box-shadow:0 8px 28px rgba(10,14,20,0.18); } .ninfo b { display:block; font:600 14px/1.35 'IBM Plex Sans KR',sans-serif; color:var(--tx); margin-bottom:4px; word-break:break-all; } .ninfo .ni-meta { font:400 10px/1.5 'IBM Plex Mono',monospace; color:var(--faint); letter-spacing:.04em; word-break:break-all; } .ninfo .ni-body { margin-top:8px; font:300 12px/1.65 'IBM Plex Sans KR',sans-serif; color:var(--tx2); white-space:pre-wrap; word-break:break-word; max-height:170px; overflow-y:auto; } body.thinking .core-tl .state { color:var(--accent); } .core-tr { position:absolute; right:20px; top:18px; display:grid; gap:11px; justify-items:end; pointer-events:none; } .core-tr .m { display:flex; align-items:baseline; gap:10px; } .core-tr .m b { font:400 9px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; color:var(--faint); } .core-tr .m span { font:500 13px/1 'IBM Plex Mono',monospace; color:var(--tx2); min-width:52px; text-align:right; } .core-bl { position:absolute; left:20px; right:20px; bottom:16px; display:flex; justify-content:space-between; gap:14px; font:300 11px/1.4 'IBM Plex Sans KR',sans-serif; color:var(--faint); pointer-events:none; } .core-bl .mono { font-size:9px; letter-spacing:.18em; opacity:.75; } /* ---------- 대화 ---------- */ .chatwrap { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; min-height:0; min-width:0; border-radius:18px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; } #recoveryBanner { grid-row:1; } #chat { grid-row:2; overflow-y:auto; min-height:0; padding:20px 22px; display:flex; flex-direction:column; gap:14px; } #attachBar { grid-row:3; } #composer { grid-row:4; } .msg { max-width:74%; padding:11px 15px; border-radius:14px; line-height:1.65; font:300 14px/1.65 'IBM Plex Sans KR',sans-serif; white-space:pre-wrap; word-break:break-word; text-wrap:pretty; } .msg.user { align-self:flex-end; background:var(--accent); color:var(--pg); border-bottom-right-radius:5px; } .msg.assistant { align-self:flex-start; background:var(--bub); color:var(--tx); border-bottom-left-radius:5px; } .msg.thinking { background:transparent; color:var(--mut); font-style:italic; animation:paisBlink 1.2s infinite; padding-left:2px; } .msg pre { background:var(--code); border-radius:10px; padding:12px; overflow-x:auto; font:400 12px/1.6 'IBM Plex Mono',monospace; margin:8px 0; } .msg code { background:var(--soft); padding:1px 5px; border-radius:4px; font:400 12px/1.5 'IBM Plex Mono',monospace; } .msg pre code { background:none; padding:0; } .msg.user code, .msg.user pre { background:rgba(255,255,255,0.16); } .progress { align-self:flex-start; max-width:88%; display:grid; gap:5px; padding:2px 2px 2px 0; } .progress .step { font:300 12px/1.5 'IBM Plex Mono',monospace; color:var(--mut); } .task-trace { width:min(620px,94%); padding:12px 13px; gap:9px; border:1px solid var(--track); border-radius:13px; background:color-mix(in srgb,var(--card2) 62%,transparent); } .trace-top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .trace-top .phead { color:var(--tx2); font-weight:500; } .trace-time { color:var(--faint); font:400 10px/1 'IBM Plex Mono',monospace; } .trace-plan { display:grid; gap:6px; margin:1px 0 2px; padding:0; list-style:none; } .trace-plan li { display:grid; grid-template-columns:12px 1fr; align-items:center; gap:7px; color:var(--faint); font:400 11px/1.35 'IBM Plex Sans KR',sans-serif; } .trace-plan li i { width:8px; height:8px; border:1px solid var(--track); border-radius:50%; } .trace-plan li.running { color:var(--tx2); } .trace-plan li.running i { border-color:var(--accent); border-top-color:transparent; animation:traceSpin .8s linear infinite; } .trace-plan li.done { color:var(--mut); } .trace-plan li.done i { border-color:var(--ok); background:var(--ok); box-shadow:inset 0 0 0 2px var(--card2); } .trace-activity { color:var(--faint); font:400 10px/1.4 'IBM Plex Mono',monospace; } .trace-activity summary { cursor:pointer; user-select:none; } .trace-steps { display:grid; gap:5px; margin-top:7px; padding-left:3px; } .status-step { display:flex; align-items:center; gap:7px; } .status-dot { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); } .route-label { color:var(--tx2); } .task-trace.trace-done { border-color:color-mix(in srgb,var(--ok) 38%,var(--track)); } .task-trace.trace-done .phead { color:var(--ok); } .task-trace.trace-failed { border-color:color-mix(in srgb,var(--dgr) 46%,var(--track)); } .task-trace.trace-failed .phead { color:var(--dgr); } @keyframes traceSpin { to { transform:rotate(360deg); } } @media (max-width:700px) { .task-trace { width:100%; max-width:100%; } .trace-top { align-items:flex-start; } .trace-time { white-space:nowrap; } } .relay-provider-box { display:grid; gap:7px; margin-top:14px; padding:12px; border:1px solid var(--track); border-radius:11px; background:var(--soft); } .relay-provider-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .relay-provider-head b { color:var(--tx2); font:600 12px/1.2 'IBM Plex Sans KR',sans-serif; } .relay-provider-head span { color:var(--faint); font:500 9px/1 'IBM Plex Mono',monospace; } .provider-results { display:grid; gap:5px; } .provider-result { display:flex; justify-content:space-between; gap:8px; padding:7px 8px; border-radius:7px; background:var(--card); color:var(--mut); font:400 9px/1.35 'IBM Plex Sans KR',sans-serif; } .provider-result.ok { color:var(--ok); }.provider-result.fail { color:var(--dgr); } .recovery-banner { margin:10px 14px 0; padding:9px 12px; border:1px solid var(--track); border-radius:10px; background:var(--soft); color:var(--mut); font:400 11px/1.45 'IBM Plex Sans KR',sans-serif; } .recovery-banner b { margin-right:7px; color:var(--tx2); font:500 10px/1 'IBM Plex Mono',monospace; } .recovery-banner.warn { border-color:color-mix(in srgb,var(--warn) 45%,var(--track)); } .recovery-banner.bad { border-color:color-mix(in srgb,var(--dgr) 52%,var(--track)); } /* 줄바꿈을 허용한다. 폭이 모자랄 때 예전엔 마지막 자식(전송 버튼)이 그대로 밀려나가 .chatwrap 의 overflow:hidden 에 잘려 "버튼이 사라진" 것처럼 보였다(아이폰). 이제는 잘리는 대신 아래 줄로 내려간다. 오른쪽 안전영역도 함께 확보한다. */ #composer { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; min-width:0; padding:13px max(15px,env(safe-area-inset-right)) 13px max(15px,env(safe-area-inset-left)); background:var(--card2); } #modeSel { flex:0 1 auto; min-width:0; border:none; border-radius:12px; padding:0 8px; height:40px; cursor:pointer; background:var(--soft); color:var(--tx2); font:500 13px/1 'IBM Plex Sans KR',sans-serif; } #micBtn, #attachBtn, #durableBtn { width:40px; height:40px; flex:0 0 auto; border:none; border-radius:12px; background:var(--soft); color:var(--mut); font-size:15px; cursor:pointer; } #micBtn:hover, #attachBtn:hover, #durableBtn:hover { background:var(--soft2); color:var(--tx2); } #durableBtn.on { color:#07171b; background:linear-gradient(135deg,#45c9af,#f2c85d); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent); } .durable-jobs { flex:0 0 auto; max-height:210px; overflow:auto; padding:9px 15px; border-top:1px solid var(--track); background:var(--card2); } .durable-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; color:var(--mut); font:500 10px/1.2 'IBM Plex Mono',monospace; letter-spacing:.1em; } .durable-head button,.durable-job button { border:1px solid var(--track); border-radius:7px; background:var(--soft); color:var(--tx2); cursor:pointer; padding:4px 8px; font-size:10px; } .durable-storage { display:flex; align-items:center; gap:8px; margin:-1px 0 7px; padding:6px 8px; border-radius:8px; background:var(--soft); color:var(--mut); font:400 9px/1.2 'IBM Plex Mono',monospace; } .durable-storage label { margin-left:auto; display:flex; align-items:center; gap:5px; } .durable-storage select,.durable-storage button { border:1px solid var(--track); border-radius:6px; padding:3px 6px; background:var(--pg); color:var(--tx2); font-size:10px; } .durable-storage button { cursor:pointer; }.durable-storage button:disabled { opacity:.45; cursor:default; } .durable-list { display:grid; gap:6px; } .durable-job { display:grid; grid-template-columns:9px minmax(0,1fr) auto; gap:8px; align-items:start; padding:8px 9px; border:1px solid var(--track); border-radius:10px; background:var(--pg); } .durable-job>i { width:7px; height:7px; margin-top:5px; border-radius:50%; background:var(--faint); } .durable-job.pending>i { background:#f2c85d; }.durable-job.running>i { background:#65b7ff; animation:pulse 1.2s infinite; } .durable-job.completed>i { background:#45c9af; }.durable-job.failed>i,.durable-job.cancelled>i { background:#ef756d; } .durable-main { min-width:0; }.durable-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tx2); font-size:12px; } .durable-meta { margin-top:3px; color:var(--faint); font:400 9px/1.3 'IBM Plex Mono',monospace; } .durable-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }.durable-actions button[title] { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .durable-result { grid-column:2/4; margin:4px 0 0; max-height:120px; overflow:auto; white-space:pre-wrap; color:var(--mut); font-size:11px; line-height:1.55; } @media(max-width:560px){.durable-storage{flex-wrap:wrap}.durable-storage label{margin-left:0}.durable-storage button{margin-left:auto}} /* 토큰 사용량 한 줄 (Phase 7e) */ .usage-line { align-self:flex-start; font:400 11px/1.5 'IBM Plex Mono',monospace; color:var(--faint); padding:2px 2px 0; } /* ---------- 볼트 (Phase 7d) ---------- */ .panel-inner.wide { max-width:1040px; } .vault { display:grid; grid-template-columns:236px minmax(0,1fr); gap:14px; margin-top:12px; min-height:0; height:min(62dvh,560px); } .vault-list { overflow-y:auto; border-right:1px solid var(--soft); padding-right:8px; } .vnote { padding:8px 10px; border-radius:9px; cursor:pointer; display:flex; flex-direction:column; gap:2px; } .vnote:hover { background:var(--soft); } .vnote.on { background:var(--soft2); } .vnote .vname { font:500 13px/1.3 'IBM Plex Sans KR',sans-serif; color:var(--tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vnote .vmeta { font:400 11px/1 'IBM Plex Mono',monospace; color:var(--faint); } .vault-view { overflow-y:auto; min-width:0; padding-right:4px; } .vault-title { display:flex; align-items:center; gap:10px; font:600 17px/1.3 'IBM Plex Sans KR',sans-serif; color:var(--tx); padding-bottom:8px; border-bottom:1px solid var(--soft); margin-bottom:10px; } .vault-body { font:400 14px/1.7 'IBM Plex Sans KR',sans-serif; color:var(--tx2); } .vault-body h1,.vault-body h2,.vault-body h3,.vault-body h4 { color:var(--tx); margin:16px 0 6px; line-height:1.35; } .vault-body h1 { font-size:20px; } .vault-body h2 { font-size:17px; } .vault-body h3 { font-size:15px; } .vault-body h4 { font-size:14px; } .vault-body p { margin:6px 0; } .vault-body ul,.vault-body ol { margin:6px 0 6px 20px; } .vault-body li { margin:3px 0; } .vault-body pre { background:var(--code); border-radius:10px; padding:12px; overflow-x:auto; font:400 12px/1.6 'IBM Plex Mono',monospace; } .vault-body code { background:var(--code); border-radius:5px; padding:1px 5px; font:400 12px/1.5 'IBM Plex Mono',monospace; } .wl { color:var(--accent); cursor:pointer; text-decoration:none; border-bottom:1px dashed var(--accent); } .wl:hover { opacity:.75; } .wl.missing { color:var(--faint); border-bottom-style:dotted; cursor:default; } .vault-links { margin-top:18px; padding-top:10px; border-top:1px solid var(--soft); } .vault-links h4 { margin:0 0 6px; font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.2em; color:var(--faint); } /* ---------- 첨부 ---------- */ .attachbar { display:flex; flex-wrap:wrap; gap:8px; padding:10px 15px 0; background:var(--card2); } .achip { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:6px 8px 6px 10px; border-radius:10px; background:var(--soft); color:var(--tx2); font:400 12px/1.2 'IBM Plex Sans KR',sans-serif; } .achip .aname { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .achip .asize { color:var(--faint); font-family:'IBM Plex Mono',monospace; font-size:11px; } .achip .ax { border:none; background:transparent; color:var(--faint); cursor:pointer; font-size:12px; line-height:1; padding:2px 4px; border-radius:6px; } .achip .ax:hover { background:var(--soft2); color:var(--tx2); } .chatwrap.dropping { outline:2px dashed var(--accent); outline-offset:-4px; } /* 전체 화면 드롭 안내 — pointer-events:none 이라 drop 은 밑의 window 리스너가 받는다 */ #dropOverlay { position:fixed; inset:0; z-index:200; pointer-events:none; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--pg) 55%, transparent); border:3px dashed var(--accent); } #dropOverlay .drop-msg { padding:14px 22px; border-radius:14px; background:var(--card); box-shadow:var(--shadow); font:500 15px/1 'IBM Plex Sans KR',sans-serif; color:var(--tx); } #input { flex:1 1 0; min-width:0; resize:none; max-height:120px; padding:11px 14px; border:none; border-radius:12px; background:var(--pg); color:var(--tx); font:400 14px/1.4 'IBM Plex Sans KR',sans-serif; outline:none; } #input::placeholder { color:var(--faint); } #sendBtn { width:40px; height:40px; flex:0 0 auto; border:none; border-radius:12px; background:var(--accent); color:var(--pg); font:500 17px/1 'IBM Plex Mono',monospace; cursor:pointer; } #sendBtn:hover { opacity:.85; } #sendBtn:disabled { opacity:.35; } /* ---------- 권한 ---------- */ .perm-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 8px; border-radius:10px; } .perm-item:hover { background:var(--soft); } .perm-item .info { display:grid; gap:3px; min-width:0; } .perm-item .plabel { font:400 12px/1.3 'IBM Plex Sans KR',sans-serif; color:var(--tx2); } .perm-item .prisk { font:400 9px/1 'IBM Plex Mono',monospace; letter-spacing:.14em; color:var(--mut); text-transform:uppercase; } .perm-item .prisk.high { color:var(--dgr); } .perm-item .prisk.medium { color:var(--warn); } .perm-item .prisk.low { color:var(--ok); } .switch { position:relative; width:36px; height:19px; flex:0 0 auto; } .switch input { opacity:0; width:0; height:0; } .slider { position:absolute; inset:0; background:var(--track); border-radius:99px; transition:.18s; cursor:pointer; } .slider:before { content:''; position:absolute; width:13px; height:13px; left:3px; top:3px; background:var(--pg); border-radius:50%; transition:.18s; } .switch input:checked + .slider { background:var(--accent); } .switch input:checked + .slider:before { background:var(--knob); transform:translateX(17px); } /* ---------- 기억 ---------- */ .memory-tools { display:grid; grid-template-columns:1fr auto auto; gap:6px; margin-bottom:7px; } .memory-tools select, .memory-tools button { min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--pg); color:var(--tx2); font:400 10px/1.2 'IBM Plex Sans KR',sans-serif; } .memory-tools button { cursor:pointer; } .memory-tools button:hover { background:var(--soft2); } #memoryMsg { min-height:14px; margin:0 0 6px; } #memPanel .row { display:flex; gap:7px; margin-bottom:10px; } #memPanel .row input { flex:1; min-width:0; padding:8px 11px; border:none; border-radius:9px; background:var(--pg); color:var(--tx); font:400 12px/1.4 'IBM Plex Sans KR',sans-serif; outline:none; } #memPanel .row button { border:none; border-radius:9px; padding:0 12px; background:var(--soft); color:var(--tx2); font-size:12px; cursor:pointer; } #memPanel .row button:hover { background:var(--soft2); } .fact { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:6px 0; } .fact span { font:300 12px/1.5 'IBM Plex Sans KR',sans-serif; color:var(--mut); text-wrap:pretty; } .fact button { background:transparent; border:none; color:var(--faint); font-size:12px; cursor:pointer; } .fact button:hover { color:var(--dgr); } /* ---------- 루프 상태 / 실행 로그 / 시스템 ---------- */ .loop { display:grid; gap:13px; } .lrow { display:grid; gap:6px; } .ltop { display:flex; align-items:center; justify-content:space-between; gap:10px; } .ltop .lname { display:flex; align-items:center; gap:9px; font:500 11px/1 'IBM Plex Mono',monospace; letter-spacing:.14em; color:var(--tx2); } .ldot { width:7px; height:7px; border-radius:50%; background:var(--faint); } .lrow.run .ldot { background:var(--accent); animation:paisBlink 1s infinite; } .lrow.done .ldot { background:var(--ok); } .lstate { font:400 9px/1 'IBM Plex Mono',monospace; letter-spacing:.14em; color:var(--faint); } .lrow.run .lstate { color:var(--accent); } .lrow.done .lstate { color:var(--ok); } .ldesc { font:300 11px/1.4 'IBM Plex Sans KR',sans-serif; color:var(--mut); padding-left:16px; } .log { display:grid; gap:8px; align-content:start; } .lgrow { display:grid; grid-template-columns:auto auto 1fr; gap:9px; align-items:baseline; } .lgrow .t { font:400 9px/1.4 'IBM Plex Mono',monospace; color:var(--faint); } .lgrow .tag { font:500 9px/1.4 'IBM Plex Mono',monospace; letter-spacing:.1em; color:var(--mut); } .lgrow .tag.plan { color:var(--accent); } .lgrow .tag.ok { color:var(--ok); } .lgrow .tag.warn { color:var(--warn); } .lgrow .tag.err { color:var(--dgr); } .lgrow .x { font:300 11px/1.45 'IBM Plex Mono',monospace; color:var(--mut); word-break:break-all; } .sysgrid { display:grid; grid-template-columns:1fr 1fr; gap:13px 12px; } .sys { display:flex; align-items:center; gap:9px; min-width:0; } .sys .sdot { width:6px; height:6px; border-radius:50%; background:var(--track); flex:0 0 auto; } .sys.on .sdot { background:var(--ok); } .sys .sm { display:grid; gap:3px; min-width:0; } .sys .sname { font:400 11px/1.2 'IBM Plex Sans KR',sans-serif; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sys .sstate { font:400 9px/1 'IBM Plex Mono',monospace; letter-spacing:.14em; color:var(--faint); } .sys.on .sstate { color:var(--mut); } /* ---------- 모달 패널 (설정 / 파일함) ---------- */ .panel { position:fixed; inset:0; background:rgba(10,14,20,0.42); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px; } .panel-inner { width:100%; max-width:430px; max-height:88dvh; overflow-y:auto; background:var(--pg); border-radius:18px; padding:22px; box-shadow:0 24px 60px rgba(10,14,20,0.28); } .panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } .panel-head h3 { margin:0; font:500 15px/1.2 'IBM Plex Sans KR',sans-serif; } .panel-head button { background:transparent; border:none; color:var(--faint); font-size:16px; cursor:pointer; } .panel label { display:block; margin:14px 0 6px; font:400 11px/1 'IBM Plex Mono',monospace; letter-spacing:.12em; color:var(--faint); } .panel input, .panel select { width:100%; padding:11px 12px; border:none; border-radius:10px; background:var(--card); color:var(--tx); font:400 14px/1.4 'IBM Plex Sans KR',sans-serif; outline:none; } .panel .row { display:flex; gap:8px; } .panel .row input { flex:1; min-width:0; } .panel .row button { border:none; border-radius:10px; padding:0 14px; background:var(--card2); color:var(--tx2); font-size:13px; cursor:pointer; } .primary { width:100%; margin-top:18px; padding:12px; border:none; border-radius:12px; background:var(--accent); color:var(--pg); font:500 14px/1 'IBM Plex Sans KR',sans-serif; cursor:pointer; } .status { font:400 10px/1 'IBM Plex Mono',monospace; letter-spacing:.1em; } .status.on { color:var(--ok); } .status.off { color:var(--warn); } .msg-line { color:var(--mut); font:300 12px/1.6 'IBM Plex Sans KR',sans-serif; min-height:16px; } .settings-intro { margin:8px 0 14px; color:var(--mut); font-size:12px; line-height:1.6; } .settings-section { margin:10px 0; border:1px solid var(--track); border-radius:13px; overflow:hidden; background:var(--card); } .settings-section summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; cursor:pointer; list-style:none; color:var(--tx2); font-size:13px; font-weight:500; } .settings-section summary::-webkit-details-marker { display:none; } .settings-section summary::after { content:'＋'; color:var(--faint); margin-left:auto; } .settings-section[open] summary::after { content:'－'; } .settings-section summary small { color:var(--faint); font-size:10px; font-weight:400; margin-left:auto; } .settings-section-body { padding:0 14px 15px; border-top:1px solid var(--soft); } .settings-section-body .inline-check { display:flex; align-items:center; gap:8px; margin:10px 0; color:var(--mut); font:400 12px/1.4 'IBM Plex Sans KR',sans-serif; cursor:pointer; } .settings-section-body .inline-check input[type="checkbox"] { width:auto; padding:0; margin:0; accent-color:var(--accent); } /* ---------- 파일 목록 / 결과물 카드 ---------- */ .file-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; } .finfo { display:flex; align-items:center; gap:10px; min-width:0; } .ficon { font-size:15px; } .fmeta { display:grid; gap:2px; min-width:0; } .fname { font:400 13px/1.3 'IBM Plex Sans KR',sans-serif; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fsize { font:400 10px/1 'IBM Plex Mono',monospace; color:var(--faint); } .fbtns, .fc-btns { display:flex; gap:6px; flex:0 0 auto; } .fbtn { padding:5px 11px; border-radius:8px; background:var(--card); color:var(--tx2); font:400 11px/1.4 'IBM Plex Sans KR',sans-serif; } .fbtn.dl { background:var(--accent); color:var(--pg); } .file-cards { align-self:flex-start; max-width:88%; display:grid; gap:8px; padding:12px 14px; border-radius:14px; background:var(--bub); } .fc-title { font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; color:var(--faint); } .fc-item { display:flex; align-items:center; gap:9px; } .fc-name { flex:1; min-width:0; font:400 12px/1.4 'IBM Plex Mono',monospace; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---------- 좁은 화면 / 아이폰 ---------- */ @media (max-width: 1080px) { /* 세로 화면: 레일을 접고 채팅이 남은 높이를 "정확히" 채운다. 높이 하드코딩(calc - 150px) 금지 — 노치·홈바(safe-area) 기기에서 어긋난다. */ .deck { display:flex; flex-direction:column; overflow:hidden; padding:4px 14px max(env(safe-area-inset-bottom),14px); } .rail { display:none; } .center { flex:1; min-height:0; display:flex; flex-direction:column; } .core { flex:0 0 190px; } .chatwrap { flex:1; min-height:0; } #topbar { grid-template-columns:1fr auto; padding-bottom:8px; } .hstat { display:none; } .clock { display:none; } .msg { max-width:88%; } body.simple-ui .core { display:none; } body.simple-ui .center { gap:0; } } /* ---------- 폰 (아이폰) ---------- 코어의 라벨·계기는 캔버스 위에 절대 위치로 얹혀 있어서, 폭이 좁아지면 가운데 뉴럴 그림과 겹친다. 폰에서만 장식 문구를 접고 계기를 압축한다. */ @media (max-width: 560px) { .btext small { display:none; } /* 4줄로 접히던 부제 */ .btext b { letter-spacing:.28em; } .core { flex:0 0 172px; } .core-tl { left:14px; top:13px; gap:4px; } .core-tl .state { font-size:16px; } .core-tr { right:14px; top:13px; gap:6px; } .core-tr .m { gap:6px; } .core-tr .m span { min-width:auto; font-size:12px; } .core-bl { display:none; } /* 캔버스와 겹치던 설명 문구 */ #topbar { gap:10px; padding-left:16px; padding-right:16px; } .actions { gap:2px; } .actions .ui-mode-btn { padding:0 8px; font-size:10px; } .action-group { padding:0 1px; } .action-menu summary { width:32px; padding:0; justify-content:center; } .action-menu summary b { display:none; } .action-menu-pop { position:fixed; top:calc(max(env(safe-area-inset-top),12px) + 44px); left:10px; right:10px; width:auto; } body.simple-ui .primary-actions #filesBtn, body.simple-ui .action-menu { display:none; } body.simple-ui #chat { padding:18px 12px; } body.simple-ui .msg { max-width:92%; font-size:14px; } #themeTag { display:flex; } .deck { padding-left:10px; padding-right:10px; gap:12px; } .center { gap:12px; } #chat { padding:14px 12px; } #input { font-size:16px; } /* 16px 미만이면 iOS가 포커스 때 화면을 확대해버린다 */ #composer { gap:7px; padding:10px max(10px,env(safe-area-inset-right)) 12px max(10px,env(safe-area-inset-left)); } /* 폰에서는 모드 선택을 아이콘 폭까지 줄인다 — 이게 넓어서 전송 버튼을 밀어내고 있었다 */ #modeSel { max-width:62px; padding:0 4px; font-size:12px; } #micBtn, #attachBtn, #durableBtn { width:36px; height:36px; font-size:14px; } #sendBtn { width:38px; height:38px; } #input { min-width:80px; } /* 이 아래로는 줄바꿈이 일어나게 */ .attachbar { padding:8px 10px 0; } .achip .aname { max-width:120px; } /* 폰에서는 볼트를 한 열로 — 목록과 본문을 위아래로 */ .vault { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:min(72dvh,620px); } .vault-list { max-height:150px; border-right:none; border-bottom:1px solid var(--soft); padding-right:0; padding-bottom:6px; } } /* 진행 표시 — 머리줄은 또렷하게, 인자 설명은 흐리게 (줄이 길어도 눈이 안 피로하게) */ .progress .phead { font-weight:500; color:var(--tx2); } /* ── 작업 과정: 성공한 단계도 흐리게 쌓아 무슨 일 하는지 보이게 ── */ .progress .done-step { color:var(--tx2); opacity:.92; } .progress .done-step .dtick { color:#3fb950; font-weight:600; margin-right:2px; } .progress .done-dim { opacity:.5; } /* ── 코드블록 헤더 + 버튼 ── */ .msg .codeblock { border:1px solid var(--line,rgba(255,255,255,.1)); border-radius:10px; overflow:hidden; margin:8px 0; } .msg .codeblock .cb-head { display:flex; align-items:center; justify-content:space-between; padding:5px 10px; background:rgba(255,255,255,.05); font:500 11px 'IBM Plex Mono',monospace; } .msg .codeblock .cb-lang { color:var(--faint); text-transform:uppercase; letter-spacing:.05em; } .msg .codeblock .cb-btns { display:flex; gap:6px; } .msg .codeblock .cb-btn { background:rgba(255,255,255,.08); color:var(--tx2); border:none; border-radius:6px; padding:3px 9px; font:500 11px 'IBM Plex Sans KR',sans-serif; cursor:pointer; transition:.15s; } .msg .codeblock .cb-btn:hover { background:var(--acc,#3b82f6); color:#fff; } .msg .codeblock pre { margin:0; border-radius:0; border:none; } /* ── 미리보기 오버레이 ── */ .code-preview-ov { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; } .code-preview-ov .cpv-inner { background:#fff; border-radius:12px; width:min(1000px,92vw); height:min(760px,88vh); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); } .code-preview-ov .cpv-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#0b1220; color:#e6edf3; font:500 13px 'IBM Plex Sans KR',sans-serif; } .code-preview-ov .cpv-close { background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:6px; padding:4px 12px; cursor:pointer; } .code-preview-ov .cpv-frame { flex:1; border:none; width:100%; background:#fff; } /* ── 토스트 ── */ .pais-toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px); background:#1f2937; color:#fff; padding:10px 18px; border-radius:10px; font:500 13px 'IBM Plex Sans KR',sans-serif; opacity:0; pointer-events:none; transition:.25s; z-index:10000; box-shadow:0 8px 24px rgba(0,0,0,.4); } .pais-toast.show { opacity:1; transform:translateX(-50%) translateY(0); } .progress .sdetail { color:var(--faint); font-size:11px; } /* ---------- 작업 중지 버튼 (Phase 2 잡) ---------- */ .stopJob { border:none; border-radius:8px; padding:5px 11px; background:var(--soft); color:var(--mut); font:500 11px/1 'IBM Plex Sans KR',sans-serif; cursor:pointer; } .stopJob:hover { background:var(--soft2); color:var(--tx2); } .stopJob:disabled { opacity:.4; } /* ================================================================== HUD 모드 — 뇌 그래프가 전면, 나머지는 그 위에 떠 있는 반투명 층. 데스크탑 전용(hud.js 가 body.hud 를 켠다). 폰은 기존 세로 배치 그대로. ================================================================== */ @media (max-width: 1080px) { #hudBtn, #hudQuick { display:none; } } @media (min-width: 1081px) { /* 그래프 = 바닥 전체 */ body.hud .core { position:fixed; inset:0; z-index:0; border-radius:0; background:var(--pg); box-shadow:none; } body.hud .core::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 58%, color-mix(in srgb, var(--pg) 60%, transparent) 100%); } /* 상태 라벨·칩은 상단 가운데로 — 좌우 구석은 패널 기본 자리라 겹친다(실사용 신고). CORE ONLINE(헤더) 바로 아래 한 줄: 상태 · NOTES · FULL VIEW, 그 밑에 계기들. */ body.hud .core-tl { left:50%; transform:translateX(-50%); top:48px; flex-direction:row; align-items:center; gap:12px; } body.hud .core-tl .lbl { display:none; } /* COGNITIVE CORE 글귀 — 헤더와 중복 */ body.hud .core-tl .state { font-size:15px; } body.hud .core-tl .gsrc { margin-top:0; } body.hud .core-tr { right:auto; left:50%; transform:translateX(-50%); top:82px; display:flex; gap:18px; } body.hud .core-bl { display:none; } /* 헤더 — 유리판 */ body.hud #topbar { position:fixed; top:0; left:0; right:0; z-index:10; background:color-mix(in srgb, var(--pg) 32%, transparent); backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1); } /* 덱은 흐름에서 빠진다 — 모든 것이 떠 있는 층 */ body.hud .deck { display:block; padding:0; overflow:visible; } body.hud .center { display:contents; } /* 좌우 레일 — 투명 기둥. 빈 공간은 그래프 조작이 통과한다 */ body.hud .rail { position:fixed; top:58px; bottom:16px; z-index:5; display:flex; flex-direction:column; gap:14px; pointer-events:none; overflow:visible; } body.hud .deck > .rail:first-of-type { left:14px; width:280px; } body.hud .deck > .rail:last-of-type { right:14px; width:322px; z-index:7; } body.hud .rail .card { pointer-events:auto; } /* 카드 = 유리 패널 — 바탕색(--pg) 기반이라 낮에는 흰 유리, 밤에는 검은 유리. 투명도는 --glass 하나로 전부 통제한다(🛰️ 메뉴의 슬라이더가 조정, 기본 30%). */ body.hud { --glass:30%; } /* 흐림(blur)은 기본 끔 — 흐리면 투명도를 아무리 낮춰도 뒤 그래프가 뭉개져 안 보인다 (사용자 지적). 서리 낀 유리를 원하면 🛰️ 메뉴에서 켠다. */ body.hud:not(.blur) .card, body.hud:not(.blur) #topbar, body.hud:not(.blur) .chatwrap.open #chat, body.hud:not(.blur) #composer, body.hud:not(.blur) .msg.assistant, body.hud:not(.blur) .msg.user, body.hud:not(.blur) .file-cards, body.hud:not(.blur) .attachbar { backdrop-filter:none; -webkit-backdrop-filter:none; } body.hud .card { background:color-mix(in srgb, var(--pg) var(--glass,30%), transparent); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); border:1px solid color-mix(in srgb, var(--tx) 7%, transparent); box-shadow:none; resize:both; overflow:hidden; min-width:200px; max-width:560px; min-height:44px; } body.hud #deptPanel { position:relative; z-index:7; overflow-y:auto; overflow-x:hidden; } body.hud .card.off { display:none; } /* 🛰️ 메뉴에서 끈 패널 */ /* 입력해야 하는 것들은 유리 위에서 구분이 안 갔다 — 액센트 기운을 살짝 입힌다. (#memPanel ID 규칙보다 세야 해서 ID 를 포함해 적는다) */ body.hud .card input, body.hud #memPanel .row input { background:color-mix(in srgb, var(--accent) 8%, transparent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); } body.hud .card .row button, body.hud #memPanel .row button { background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--tx2); } body.hud .card .chead { cursor:move; user-select:none; } /* 드래그로 떼어낸 카드 — hud.js 가 좌표를 넣는다 */ body.hud .card.float { position:fixed; z-index:7; width:300px; } /* 헤더 더블클릭 = 접기 (제목줄만 남긴다) */ body.hud .card.min > :not(.chead) { display:none; } body.hud .card.min { padding-bottom:13px; } body.hud .card.min.grow { flex:0 0 auto; min-height:0; } /* ---- 대화 = CAD 명령창 -------------------------------------- */ body.hud .chatwrap { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; width:var(--chatW, min(1240px, 82vw)); z-index:6; display:flex; flex-direction:column; background:transparent; box-shadow:none; border-radius:0; overflow:visible; } /* 챗창 크기 손잡이(오른쪽 위 모서리) — 끌면 폭·높이가 같이 조절된다 */ .chresize { position:absolute; right:-2px; top:-14px; width:20px; height:20px; z-index:7; cursor:nesw-resize; pointer-events:auto; opacity:.45; border-top:2px solid var(--mut); border-right:2px solid var(--mut); border-radius:0 5px 0 0; } .chresize:hover { opacity:.9; border-color:var(--accent); } /* 챗창 이동 손잡이(왼쪽 위 모서리) — 끌면 챗창이 통째로 움직인다 */ .chmove { position:absolute; left:-2px; top:-14px; width:20px; height:20px; z-index:7; cursor:move; pointer-events:auto; opacity:.45; border-top:2px solid var(--mut); border-left:2px solid var(--mut); border-radius:5px 0 0 0; } .chmove:hover { opacity:.9; border-color:var(--accent); } /* 옮겨진 챗창은 가운데 고정을 풀고 좌표를 따른다 */ body.hud .chatwrap.moved { left:var(--chatX, 50%); bottom:var(--chatY, 14px); transform:none; } /* 접힘(기본): 최근 것만 아래에 보이고, 시간이 지나면 흐려진다. 글자 층은 클릭을 통과시켜 그 밑의 그래프를 그대로 만질 수 있다. */ body.hud #chat { overflow:hidden; max-height:min(var(--chatH, 48vh), 400px); padding:0 6px 10px; pointer-events:none; } body.hud #chat::before { content:''; margin-top:auto; } /* 내용이 적을 때 아래 정렬 */ body.hud #chat > * { transition:opacity 2.2s ease; } body.hud #chat > .faded { opacity:0; } /* 말풍선 색을 다 뺀다 — 내 글도 PAIS 글도 투명 유리에 본문 글자색(낮=검정, 밤=흰색). 구분은 정렬(오른쪽=나)로 충분하다. 색 덩어리가 그래프를 가리던 게 "난잡함"의 원인. */ body.hud .msg { text-shadow:0 1px 10px var(--pg), 0 0 3px var(--pg); } body.hud .msg.assistant, body.hud .msg.user { background:color-mix(in srgb, var(--pg) var(--glass,30%), transparent); color:var(--tx); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } body.hud .msg.user code, body.hud .msg.user pre { background:var(--soft); } body.hud .file-cards { background:color-mix(in srgb, var(--pg) var(--glass,30%), transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } /* 펼침: 입력칸을 클릭하면 반투명 스크롤 패널로 — 지난 대화를 다시 밝게 */ body.hud .chatwrap.open #chat { pointer-events:auto; overflow-y:auto; max-height:var(--chatH, 48vh); background:color-mix(in srgb, var(--pg) var(--glass,30%), transparent); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); border-radius:16px; padding:16px 18px; border:1px solid color-mix(in srgb, var(--tx) 7%, transparent); } body.hud .chatwrap.open #chat > .faded { opacity:1; } /* 입력줄 = 유리 알약 — 납작하게 (버튼 40px 는 HUD 에선 둔해 보인다) */ body.hud #composer { border-radius:14px; margin-top:6px; padding:7px 10px; gap:8px; background:color-mix(in srgb, var(--pg) var(--glass,30%), transparent); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); border:1px solid color-mix(in srgb, var(--tx) 7%, transparent); } body.hud #composer #modeSel { height:32px; font-size:12px; } body.hud #composer #micBtn, body.hud #composer #attachBtn, body.hud #composer #durableBtn { width:32px; height:32px; font-size:13px; } body.hud #composer #sendBtn { width:32px; height:32px; font-size:15px; } body.hud #input { background:color-mix(in srgb, var(--accent) 8%, transparent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); padding:7px 12px; max-height:96px; } /* 🛰️ HUD 설정 메뉴 — 패널 켜고 끄기·투명도·초기화 */ #hudMenu { position:fixed; top:50px; right:14px; z-index:30; width:236px; background:color-mix(in srgb, var(--pg) 72%, transparent); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); border:1px solid color-mix(in srgb, var(--tx) 9%, transparent); border-radius:14px; padding:13px 15px; display:grid; gap:10px; } #hudMenu h5 { margin:0 0 2px; font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.18em; color:var(--faint); } #hudMenu label.hm-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font:400 12px/1.3 'IBM Plex Sans KR',sans-serif; color:var(--tx2); cursor:pointer; } #hudMenu input[type="checkbox"] { accent-color:var(--accent); } #hudMenu input[type="range"] { width:100%; accent-color:var(--accent); } #hudMenu .hm-reset { border:none; border-radius:9px; padding:8px; cursor:pointer; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--tx2); font:500 12px/1 'IBM Plex Sans KR',sans-serif; } #hudMenu .hm-reset:hover { background:color-mix(in srgb, var(--accent) 24%, transparent); } body.hud .attachbar { border-radius:14px 14px 0 0; background:color-mix(in srgb, var(--card2) 58%, transparent); } } /* ===== AI 부서 관제판 (v29) ===== */ .deptgrid { display:flex; flex-direction:column; gap:7px; } .deptempty { font:400 10px/1.4 'IBM Plex Sans KR',sans-serif; color:var(--faint); padding:4px 2px; } .dept { display:flex; align-items:center; gap:9px; min-width:0; padding:5px 7px; border-radius:8px; background:rgba(255,255,255,.02); border:1px solid transparent; transition:all .25s ease; } .dept .ddot { width:7px; height:7px; border-radius:50%; background:var(--track); flex:0 0 auto; transition:all .25s ease; } .dept .dm { display:grid; gap:2px; min-width:0; flex:1; } .dept .dname { font:500 11px/1.2 'IBM Plex Sans KR',sans-serif; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dept .dmodel { font:400 9px/1 'IBM Plex Mono',monospace; letter-spacing:.04em; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dept .djob { font:400 8px/1 'IBM Plex Mono',monospace; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; flex:0 0 auto; opacity:.7; } .dept.run { background:rgba(64,220,160,.09); border-color:rgba(64,220,160,.35); } .dept.run .ddot { background:#40dca0; box-shadow:0 0 8px #40dca0; animation:deptPulse 1s ease-in-out infinite; } .dept.run .dname { color:#7df0c4; } .dept.done .ddot { background:#40dca0; box-shadow:0 0 6px #40dca0; } .dept.fail { background:rgba(240,90,90,.08); border-color:rgba(240,90,90,.3); } .dept.fail .ddot { background:#f05a5a; box-shadow:0 0 6px #f05a5a; } @keyframes deptPulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(1.4);} } .ophead { margin:11px 2px 6px; padding-top:9px; border-top:1px solid var(--line); font:500 8px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; color:var(--faint); } .opsgrid { display:grid; gap:5px; } .opempty { font:400 9px/1.4 'IBM Plex Sans KR',sans-serif; color:var(--faint); padding:2px; } .oprow { width:100%; display:flex; align-items:center; gap:7px; min-width:0; padding:5px 7px; border:1px solid var(--line); border-radius:7px; background:transparent; color:inherit; text-align:left; cursor:pointer; } .oprow:hover { background:color-mix(in srgb,var(--accent) 8%,transparent); border-color:color-mix(in srgb,var(--accent) 28%,var(--line)); } .opdot { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:#d6a84c; } .optitle { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 10px/1.2 'IBM Plex Sans KR',sans-serif; color:var(--tx2); } .opstatus { flex:0 0 auto; font:400 8px/1 'IBM Plex Sans KR',sans-serif; color:var(--faint); } .oprow.monitoring .opdot { background:#40dca0; box-shadow:0 0 6px rgba(64,220,160,.7); } .oprow.incident .opdot { background:#f05a5a; box-shadow:0 0 6px rgba(240,90,90,.7); } .oprow.sla-breach { border-color:rgba(240,160,70,.45); }.oprow.sla-breach .opstatus { color:#e8a34b; } .oprow.paused .opdot,.oprow.completed .opdot { background:var(--faint); } .opsdaily { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 8px; margin:6px 0 10px; padding:7px; border:1px dashed var(--line); border-radius:8px; } .opsdaily-info { display:grid; gap:2px; min-width:0; color:var(--mut); font:500 8px/1.2 'IBM Plex Sans KR',sans-serif; } .opsdaily-info small { color:var(--faint); font:400 7px/1.2 'IBM Plex Sans KR',sans-serif; white-space:nowrap; } .opsdaily-deadline { color:var(--faint); font:500 7px/1 'IBM Plex Sans KR',sans-serif; white-space:nowrap; } .opsdaily-actions { display:flex; align-items:center; gap:5px; flex:0 0 auto; } .opsdaily button,.opsdaily a { padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--mut); cursor:pointer; text-decoration:none; font:500 7px/1 'IBM Plex Sans KR',sans-serif; } .opsdaily button:hover,.opsdaily a:hover { border-color:var(--accent); color:var(--tx); } .opsdaily.busy { opacity:.55; pointer-events:none; }.opsdaily-error { color:#f05a5a; font:400 8px/1.3 'IBM Plex Sans KR',sans-serif; } .trend-shell { max-width:800px; } .trend-loading { padding:40px 0; text-align:center; color:var(--faint); font:400 12px/1.5 'IBM Plex Sans KR',sans-serif; } .trend-loading.error { color:#f05a5a; } .trend-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 14px; color:var(--faint); font:400 10px/1 'IBM Plex Sans KR',sans-serif; } .trend-tabs { display:flex; gap:5px; }.trend-tabs button { padding:6px 14px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--mut); cursor:pointer; font:500 10px/1 'IBM Plex Sans KR',sans-serif; } .trend-tabs button.active { border-color:rgba(64,220,160,.35); background:rgba(64,220,160,.1); color:#40dca0; } .trend-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:15px; } .trend-metrics > div { display:grid; gap:5px; padding:13px; border:1px solid var(--line); border-radius:11px; background:var(--card); } .trend-metrics b { color:var(--tx); font:600 17px/1 'IBM Plex Mono',monospace; }.trend-metrics span { color:var(--faint); font:400 9px/1.2 'IBM Plex Sans KR',sans-serif; } .trend-legend { display:flex; gap:14px; align-items:center; color:var(--faint); font:400 9px/1 'IBM Plex Sans KR',sans-serif; }.trend-legend .uptime{color:#40dca0}.trend-legend .incident-key{color:#f05a5a}.trend-legend small{margin-left:auto} .trend-svg { width:100%; height:auto; min-height:210px; margin-top:4px; overflow:visible; } .trend-svg .grid line { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }.trend-svg text { fill:var(--faint); font:8px 'IBM Plex Mono',monospace; } .trend-svg .availability polyline { fill:none; stroke:#40dca0; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }.trend-svg .availability circle { fill:#40dca0; stroke:var(--bg); stroke-width:2; }.trend-svg .availability circle.missing { fill:var(--faint); opacity:.35; stroke:none; }.trend-svg .incident { fill:#f05a5a; } .review-shell{max-width:800px}.review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:5px 0 15px}.review-head span{color:var(--faint);font:400 9px/1 'IBM Plex Mono',monospace}.review-head h2{margin:7px 0 0;color:var(--tx);font:600 21px/1.2 'IBM Plex Sans KR',sans-serif}.review-head>div:last-child{display:flex;gap:7px}.review-head button,.review-head a{display:inline-flex;align-items:center;min-height:31px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--mut);cursor:pointer;text-decoration:none;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.review-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:11px}.review-metrics>div{display:grid;gap:5px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.review-metrics b{color:var(--tx);font:600 17px/1 'IBM Plex Mono',monospace}.review-metrics span{color:var(--faint);font:400 9px/1.2 'IBM Plex Sans KR',sans-serif}.review-highlights,.review-priorities{margin-top:9px;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.review-highlights h4,.review-priorities h4{margin:0;color:var(--faint);font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em}.review-highlights ul{display:grid;gap:7px;margin:10px 0 0;padding-left:17px;color:var(--tx2);font:300 11px/1.45 'IBM Plex Sans KR',sans-serif}.review-priorities>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.review-priorities>div span{color:var(--faint);font:400 9px/1 'IBM Plex Sans KR',sans-serif}.review-priorities>ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}.review-priorities li{display:flex;gap:9px;padding:8px;border:1px solid var(--line);border-radius:8px}.review-priorities li>span{padding:4px 7px;border-radius:99px;background:var(--soft);color:var(--mut);font:500 8px/1 'IBM Plex Sans KR',sans-serif}.review-priorities li>div{display:grid;gap:3px}.review-priorities li b{color:var(--tx2);font:500 10px/1.3 'IBM Plex Sans KR',sans-serif}.review-priorities li small{color:var(--faint);font:400 8px/1.2 'IBM Plex Sans KR',sans-serif}.review-priorities li.none{color:var(--faint);font:300 10px/1.4 'IBM Plex Sans KR',sans-serif} .opdetail-shell { max-width:760px; } .opdetail-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin:8px 0 18px; } .opdetail-head h2 { margin:8px 0 0; font:600 21px/1.3 'IBM Plex Sans KR',sans-serif; color:var(--tx); } .opdetail-head > p { max-width:48%; margin:4px 0; text-align:right; color:var(--mut); font:300 11px/1.5 'IBM Plex Mono',monospace; word-break:break-all; } .opbadge { display:inline-block; padding:5px 9px; border-radius:99px; background:var(--soft); color:var(--mut); font:500 9px/1 'IBM Plex Sans KR',sans-serif; } .opbadge.monitoring { background:rgba(64,220,160,.12); color:#40dca0; } .opbadge.incident { background:rgba(240,90,90,.12); color:#f05a5a; } .opactions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:-5px 0 16px; } .opaction { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--mut); cursor:pointer; text-decoration:none; font:500 10px/1 'IBM Plex Sans KR',sans-serif; } .opaction:hover { border-color:var(--accent); color:var(--tx); opacity:1; } .opaction.primary { border-color:rgba(64,220,160,.3); background:rgba(64,220,160,.1); color:#40dca0; } .opaction:disabled { cursor:wait; opacity:.5; } .opactionmsg { margin-left:auto; color:var(--faint); font:400 10px/1.3 'IBM Plex Sans KR',sans-serif; } .sla-config { margin-bottom:12px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); } .sla-config.breach { border-color:rgba(240,160,70,.45); background:rgba(240,160,70,.05); } .sla-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }.sla-head h4 { margin:0; color:var(--faint); font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.12em; } .sla-badge { padding:4px 8px; border-radius:99px; background:var(--soft); color:var(--mut); font:500 9px/1 'IBM Plex Sans KR',sans-serif; }.sla-config.healthy .sla-badge{background:rgba(64,220,160,.12);color:#40dca0}.sla-config.breach .sla-badge{background:rgba(240,160,70,.14);color:#e8a34b} .sla-config > p { margin:8px 0 12px; color:var(--mut); font:300 11px/1.45 'IBM Plex Sans KR',sans-serif; } .sla-fields { display:flex; align-items:end; flex-wrap:wrap; gap:8px; }.sla-fields label { display:grid; grid-template-columns:auto auto; gap:4px 6px; align-items:center; color:var(--faint); font:400 9px/1 'IBM Plex Sans KR',sans-serif; }.sla-fields label>span{grid-column:1/-1}.sla-fields input[type=number]{width:78px;padding:6px 7px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--tx);font:500 10px/1 'IBM Plex Mono',monospace}.sla-fields small{color:var(--faint)} .sla-fields .sla-enabled { display:flex; align-items:center; gap:5px; min-height:29px; }.sla-fields .sla-enabled span{grid-column:auto}.sla-fields button{min-height:29px;padding:0 10px;border:1px solid rgba(64,220,160,.3);border-radius:7px;background:rgba(64,220,160,.1);color:#40dca0;cursor:pointer;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.sla-fields button:disabled{opacity:.5}.sla-fields #slaMsg{color:var(--faint);font:400 9px/1.3 'IBM Plex Sans KR',sans-serif} .playbook-card { margin-bottom:12px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }.playbook-card.awaiting_manual{border-color:rgba(240,160,70,.45)} .playbook-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.playbook-head h4{margin:0;color:var(--faint);font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em}.playbook-head>span{padding:4px 8px;border-radius:99px;background:var(--soft);color:var(--mut);font:500 9px/1 'IBM Plex Sans KR',sans-serif}.playbook-card.completed .playbook-head>span{background:rgba(64,220,160,.12);color:#40dca0}.playbook-card.awaiting_manual .playbook-head>span{background:rgba(240,160,70,.14);color:#e8a34b} .playbook-trigger,.playbook-empty{margin:9px 0;color:var(--mut);font:300 11px/1.45 'IBM Plex Sans KR',sans-serif}.playbook-card ol{display:grid;gap:6px;margin:10px 0;padding:0;list-style:none}.playbook-card li{display:flex;gap:9px;padding:8px;border:1px solid var(--line);border-radius:8px}.playbook-card li>span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--soft);color:var(--faint);font:500 9px/1 'IBM Plex Mono',monospace}.playbook-card li>div{display:grid;gap:2px;min-width:0}.playbook-card li b{color:var(--tx2);font:500 10px/1.2 'IBM Plex Sans KR',sans-serif}.playbook-card li small{color:var(--faint);font:400 8px/1.2 'IBM Plex Sans KR',sans-serif}.playbook-card li p{margin:2px 0 0;white-space:pre-wrap;color:var(--mut);font:300 10px/1.4 'IBM Plex Sans KR',sans-serif}.playbook-card li.completed>span{background:rgba(64,220,160,.14);color:#40dca0}.playbook-card li.failed>span{background:rgba(240,90,90,.14);color:#f05a5a} .playbook-outcome{margin:8px 0;padding:8px;border-radius:8px;background:var(--soft);color:var(--mut);font:400 10px/1.45 'IBM Plex Sans KR',sans-serif}.playbook-actions{display:flex;align-items:center;gap:9px;margin-top:9px}.playbook-actions button{min-height:30px;padding:0 11px;border:1px solid rgba(64,220,160,.3);border-radius:8px;background:rgba(64,220,160,.1);color:#40dca0;cursor:pointer;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.playbook-actions button:disabled{opacity:.5}.playbook-actions span{color:var(--faint);font:400 9px/1.3 'IBM Plex Sans KR',sans-serif} .postmortem-card{margin-bottom:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.postmortem-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.postmortem-head h4{margin:0;color:var(--faint);font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em}.postmortem-head>span{padding:4px 8px;border-radius:99px;background:var(--soft);color:var(--mut);font:500 9px/1 'IBM Plex Sans KR',sans-serif}.postmortem-card.reviewed .postmortem-head>span{background:rgba(64,220,160,.12);color:#40dca0}.postmortem-card h5{margin:12px 0 5px;color:var(--tx2);font:600 13px/1.3 'IBM Plex Sans KR',sans-serif}.postmortem-card>p{margin:0 0 10px;color:var(--mut);font:300 11px/1.5 'IBM Plex Sans KR',sans-serif} .postmortem-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.postmortem-grid>div,.postmortem-bottom>div{padding:9px;border:1px solid var(--line);border-radius:8px}.postmortem-grid b,.postmortem-bottom b{color:var(--faint);font:500 9px/1 'IBM Plex Sans KR',sans-serif}.postmortem-grid p{margin:5px 0 0;color:var(--tx2);font:300 10px/1.45 'IBM Plex Sans KR',sans-serif}.postmortem-bottom{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.postmortem-bottom ul{display:grid;gap:5px;margin:7px 0 0;padding-left:16px;color:var(--mut);font:300 9px/1.4 'IBM Plex Sans KR',sans-serif}.postmortem-bottom .pm-timeline{list-style:none;padding:0}.pm-timeline li{display:grid;grid-template-columns:auto 1fr;gap:7px}.pm-timeline time{color:var(--faint);font:400 8px/1.3 'IBM Plex Mono',monospace}.postmortem-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.postmortem-actions button,.postmortem-actions a{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid rgba(64,220,160,.3);border-radius:8px;background:rgba(64,220,160,.1);color:#40dca0;cursor:pointer;text-decoration:none;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.postmortem-actions button:disabled{opacity:.5}.postmortem-actions span{color:var(--faint);font:400 9px/1.3 'IBM Plex Sans KR',sans-serif} .improvements-card{margin-bottom:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.improvements-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.improvements-head h4{margin:0;color:var(--faint);font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em}.improvements-head>span{color:var(--mut);font:500 9px/1 'IBM Plex Sans KR',sans-serif}.improvements-card>p{margin:10px 0 0;color:var(--mut);font:300 10px/1.5 'IBM Plex Sans KR',sans-serif}.improvements-card ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}.improvement{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:8px}.improvement.overdue{border-color:rgba(240,160,70,.4)}.improvement-state{padding:4px 7px;border-radius:99px;background:var(--soft);color:var(--faint);font:500 8px/1 'IBM Plex Sans KR',sans-serif}.improvement.in_progress .improvement-state{background:rgba(70,150,240,.12);color:#66aaf5}.improvement.completed .improvement-state{background:rgba(64,220,160,.12);color:#40dca0}.improvement>div{display:grid;gap:3px;min-width:0}.improvement b{color:var(--tx2);font:500 10px/1.35 'IBM Plex Sans KR',sans-serif}.improvement small{color:var(--faint);font:400 8px/1.2 'IBM Plex Sans KR',sans-serif}.improvement p{margin:1px 0 0;color:var(--mut);font:300 9px/1.35 'IBM Plex Sans KR',sans-serif}.improvement button{padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--mut);cursor:pointer;font:500 8px/1 'IBM Plex Sans KR',sans-serif}.improvement button:hover{border-color:var(--accent);color:var(--tx)}.improvement button:disabled{opacity:.5}.improvement-msg{min-height:12px;margin-top:7px;color:var(--faint);font:400 9px/1.3 'IBM Plex Sans KR',sans-serif} .opmetrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; } .opmetrics > div { display:grid; gap:5px; padding:13px; border:1px solid var(--line); border-radius:11px; background:var(--card); } .opmetrics b { font:600 17px/1 'IBM Plex Mono',monospace; color:var(--tx); } .opmetrics span { font:400 9px/1.3 'IBM Plex Sans KR',sans-serif; color:var(--faint); } .opsections { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .opsections section { padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--card); } .opsections h4 { margin:0 0 10px; font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.12em; color:var(--faint); } .opsections p { margin:0; white-space:pre-wrap; font:300 12px/1.6 'IBM Plex Sans KR',sans-serif; color:var(--tx2); } .opsections dl { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; margin:13px 0 0; font:400 10px/1.4 'IBM Plex Sans KR',sans-serif; } .opsections dt { color:var(--faint); }.opsections dd { margin:0; color:var(--mut); word-break:break-all; } .opincidents { grid-column:1/-1; }.opnone { color:var(--faint); font:300 12px/1.5 'IBM Plex Sans KR',sans-serif; } .opincident { padding:10px 0; border-top:1px solid var(--line); }.opincident:first-of-type { border-top:none; } .opincident > div { display:flex; justify-content:space-between; gap:10px; }.opincident b { color:var(--tx2); font-size:12px; } .opincident span,.opincident small { color:var(--faint); font:400 10px/1.4 'IBM Plex Sans KR',sans-serif; } .opincident p { margin:6px 0 2px; }.opincident.open b { color:#f05a5a; } .briefing-shell{max-width:840px}.briefing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:5px 0 15px}.briefing-head span{color:#d5a933;font:500 9px/1 'IBM Plex Mono',monospace}.briefing-head h2{margin:7px 0 5px;color:var(--tx);font:600 22px/1.2 'IBM Plex Sans KR',sans-serif}.briefing-head p{margin:0;color:var(--mut);font:300 11px/1.5 'IBM Plex Sans KR',sans-serif}.briefing-head>div:last-child{display:flex;gap:7px}.briefing-head button,.briefing-head a{display:inline-flex;align-items:center;min-height:31px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--mut);cursor:pointer;text-decoration:none;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.briefing-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.briefing-metrics>div{display:grid;gap:5px;padding:13px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(135deg,rgba(213,169,51,.08),var(--card))}.briefing-metrics b{color:var(--tx);font:600 18px/1 'IBM Plex Mono',monospace}.briefing-metrics span{color:var(--faint);font:400 9px/1.2 'IBM Plex Sans KR',sans-serif}.briefing-priorities,.briefing-columns>section{padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.briefing-priorities>div{display:flex;justify-content:space-between;gap:10px}.briefing-priorities h4,.briefing-columns h4{margin:0;color:var(--faint);font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.1em}.briefing-priorities>div>span{color:var(--faint);font:400 9px/1 'IBM Plex Sans KR',sans-serif}.briefing-priorities ol,.briefing-columns ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}.briefing-priorities li,.briefing-columns li{display:flex;gap:9px;padding:8px;border:1px solid var(--line);border-radius:8px}.briefing-priorities li>span{align-self:flex-start;padding:4px 7px;border-radius:99px;background:var(--soft);color:var(--mut);font:500 8px/1 'IBM Plex Sans KR',sans-serif}.briefing-priorities li.critical>span,.briefing-priorities li.high>span{background:rgba(240,90,90,.12);color:#f05a5a}.briefing-priorities li.medium>span{background:rgba(213,169,51,.12);color:#d5a933}.briefing-priorities li>div,.briefing-columns li>div{display:grid;gap:3px}.briefing-priorities b,.briefing-columns b{color:var(--tx2);font:500 10px/1.35 'IBM Plex Sans KR',sans-serif}.briefing-priorities small,.briefing-columns small{color:var(--faint);font:400 8px/1.3 'IBM Plex Sans KR',sans-serif}.briefing-priorities li.none,.briefing-columns li.none{color:var(--faint);font:300 10px/1.4 'IBM Plex Sans KR',sans-serif}.briefing-columns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.briefing-columns time{min-width:38px;color:#d5a933;font:500 9px/1.4 'IBM Plex Mono',monospace}.briefing-warn{margin:9px 0 0;color:#d5a933;font:400 9px/1.4 'IBM Plex Sans KR',sans-serif} @media(max-width:600px){.opdetail-head{display:block}.opdetail-head>p{max-width:none;text-align:left}.opactions{align-items:stretch}.opactionmsg{width:100%;margin-left:0}.opmetrics,.trend-metrics,.review-metrics,.briefing-metrics{grid-template-columns:1fr 1fr}.opsections,.postmortem-grid,.postmortem-bottom,.briefing-columns{grid-template-columns:1fr}.opincidents{grid-column:auto}.trend-legend small{display:none}.sla-fields{align-items:stretch}.sla-fields label{flex:1 1 90px}.sla-fields button{flex:1 1 100%}.improvement{grid-template-columns:auto 1fr}.improvement button{grid-column:1/-1}.review-head,.briefing-head{display:block}.review-head>div:last-child,.briefing-head>div:last-child{margin-top:10px}} #deptPanel .chead>span{display:flex;gap:4px}.department-map-shell{max-width:940px}.department-map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:4px 0 14px}.department-map-head span{color:#40dca0;font:500 9px/1 'IBM Plex Mono',monospace}.department-map-head h2{margin:7px 0 0;color:var(--tx);font:600 22px/1.2 'IBM Plex Sans KR',sans-serif}.department-map-head p{max-width:390px;margin:3px 0 0;color:var(--mut);text-align:right;font:300 10px/1.5 'IBM Plex Sans KR',sans-serif}.department-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.department-role{padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.department-role>div{display:flex;align-items:center;justify-content:space-between}.department-role>div span{padding:4px 7px;border-radius:99px;background:var(--soft);color:var(--faint);font:500 8px/1 'IBM Plex Mono',monospace}.department-role>div b{color:var(--tx);font:600 12px/1 'IBM Plex Sans KR',sans-serif}.department-role h4{margin:9px 0 5px;color:#40dca0;font:500 10px/1.3 'IBM Plex Sans KR',sans-serif}.department-role>p{margin:0;color:var(--mut);font:300 10px/1.45 'IBM Plex Sans KR',sans-serif}.department-role dl{display:grid;grid-template-columns:auto 1fr;gap:5px 9px;margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);font:400 8px/1.35 'IBM Plex Sans KR',sans-serif}.department-role dt{color:var(--faint)}.department-role dd{margin:0;color:var(--tx2);word-break:break-all}.department-flows{margin-top:9px;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.department-flows>h4{margin:0;color:var(--faint);font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.1em}.department-flows ul{display:grid;gap:7px;margin:11px 0 0;padding:0;list-style:none}.department-flows li{display:grid;grid-template-columns:minmax(160px,.8fr) 1.2fr;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:9px}.department-flows li>div{display:grid;gap:3px}.department-flows b{color:var(--tx2);font:500 10px/1.2 'IBM Plex Sans KR',sans-serif}.department-flows small{color:var(--faint);font:300 8px/1.35 'IBM Plex Sans KR',sans-serif}.department-flows p{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0}.department-flows p span{padding:5px 7px;border-radius:7px;background:var(--soft);color:var(--mut);font:500 8px/1 'IBM Plex Sans KR',sans-serif}.department-flows p i{color:var(--faint);font-style:normal} .goals-shell{max-width:900px}.goal-create{display:grid;grid-template-columns:1.2fr 1.5fr auto auto auto;gap:7px;margin:4px 0 3px}.goal-create input,.goal-create select{min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--tx);font:400 10px/1 'IBM Plex Sans KR',sans-serif}.goal-create button{padding:0 12px;border:1px solid rgba(64,220,160,.3);border-radius:8px;background:rgba(64,220,160,.1);color:#40dca0;cursor:pointer;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.goal-create button:disabled{opacity:.5}.goals-summary{display:flex;gap:8px;margin:11px 0}.goals-summary span{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--faint);font:400 9px/1 'IBM Plex Sans KR',sans-serif}.goals-summary b{margin-left:4px;color:var(--tx2);font:600 10px/1 'IBM Plex Mono',monospace}.goals-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.goal-card{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.goal-card.paused{opacity:.65}.goal-card.completed{border-color:rgba(64,220,160,.25)}.goal-card-head{display:flex;align-items:center;justify-content:space-between}.goal-card-head span{padding:4px 8px;border-radius:99px;background:rgba(70,150,240,.12);color:#66aaf5;font:500 8px/1 'IBM Plex Sans KR',sans-serif}.goal-card.paused .goal-card-head span{background:var(--soft);color:var(--faint)}.goal-card.completed .goal-card-head span{background:rgba(64,220,160,.12);color:#40dca0}.goal-card-head small{color:var(--faint);font:400 8px/1 'IBM Plex Sans KR',sans-serif}.goal-card h4{margin:10px 0 5px;color:var(--tx);font:600 14px/1.3 'IBM Plex Sans KR',sans-serif}.goal-card>p{margin:0 0 8px;color:var(--mut);font:300 10px/1.45 'IBM Plex Sans KR',sans-serif}.goal-next{display:grid;grid-template-columns:auto 1fr;gap:7px;padding:8px;border-radius:8px;background:var(--soft)}.goal-next b{color:var(--faint);font:500 8px/1.3 'IBM Plex Sans KR',sans-serif}.goal-next span{color:var(--tx2);font:400 9px/1.3 'IBM Plex Sans KR',sans-serif}.goal-progress{height:5px;margin:12px 0 7px;border-radius:99px;background:var(--soft);overflow:hidden}.goal-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#40dca0,#4aa9df)}.goal-foot{display:flex;align-items:center;justify-content:space-between}.goal-foot strong{color:var(--mut);font:600 10px/1 'IBM Plex Mono',monospace}.goal-foot>div{display:flex;gap:5px}.goal-foot button{min-height:26px;padding:0 8px;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--mut);cursor:pointer;font:500 8px/1 'IBM Plex Sans KR',sans-serif}.goals-empty{grid-column:1/-1;padding:40px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--faint);font:300 11px/1.7 'IBM Plex Sans KR',sans-serif} .personal-review-shell{max-width:860px}.personal-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:5px 0 15px}.personal-review-head span{color:#4aa9df;font:500 9px/1 'IBM Plex Mono',monospace}.personal-review-head h2{margin:7px 0 5px;color:var(--tx);font:600 22px/1.2 'IBM Plex Sans KR',sans-serif}.personal-review-head p{margin:0;color:var(--mut);font:300 11px/1.5 'IBM Plex Sans KR',sans-serif}.personal-review-head>div:last-child{display:flex;gap:7px}.personal-review-head button,.personal-review-head a{display:inline-flex;align-items:center;min-height:31px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--mut);cursor:pointer;text-decoration:none;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.personal-review-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:9px}.personal-review-metrics>div{display:grid;gap:5px;padding:13px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(135deg,rgba(74,169,223,.07),var(--card))}.personal-review-metrics b{color:var(--tx);font:600 18px/1 'IBM Plex Mono',monospace}.personal-review-metrics span{color:var(--faint);font:400 9px/1.2 'IBM Plex Sans KR',sans-serif}.personal-chart,.personal-review-columns>section{padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.personal-chart h4,.personal-review-columns h4{margin:0;color:var(--faint);font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.1em}.personal-chart>div{display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:8px;height:150px;margin-top:12px}.personal-day{display:grid;grid-template-rows:1fr auto auto;align-items:end;justify-items:center;height:100%;gap:4px}.personal-day i{display:block;width:min(26px,70%);min-height:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(#4aa9df,#8a78e8)}.personal-day b{color:var(--mut);font:500 8px/1 'IBM Plex Mono',monospace}.personal-day span{color:var(--faint);font:400 8px/1 'IBM Plex Mono',monospace}.personal-day.missing i{height:2px!important;background:var(--line)}.personal-review-columns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.personal-review-columns ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}.personal-review-columns li{display:flex;gap:9px;padding:8px;border:1px solid var(--line);border-radius:8px}.personal-review-columns li>span{align-self:flex-start;padding:4px 7px;border-radius:99px;background:rgba(74,169,223,.1);color:#4aa9df;font:500 8px/1 'IBM Plex Sans KR',sans-serif}.personal-review-columns li>div{display:grid;gap:3px}.personal-review-columns b{color:var(--tx2);font:500 10px/1.35 'IBM Plex Sans KR',sans-serif}.personal-review-columns small{color:var(--faint);font:400 8px/1.3 'IBM Plex Sans KR',sans-serif}.personal-review-columns li.none{color:var(--faint);font:300 10px/1.4 'IBM Plex Sans KR',sans-serif} .dayreview-shell{max-width:840px}.dayreview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:5px 0 15px}.dayreview-head span{color:#8a78e8;font:500 9px/1 'IBM Plex Mono',monospace}.dayreview-head h2{margin:7px 0 5px;color:var(--tx);font:600 22px/1.2 'IBM Plex Sans KR',sans-serif}.dayreview-head p{margin:0;color:var(--mut);font:300 11px/1.5 'IBM Plex Sans KR',sans-serif}.dayreview-head>div:last-child{display:flex;gap:7px}.dayreview-head button,.dayreview-head a{display:inline-flex;align-items:center;min-height:31px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--mut);cursor:pointer;text-decoration:none;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.dayreview-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:9px}.dayreview-metrics>div{display:grid;gap:5px;padding:13px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(135deg,rgba(138,120,232,.07),var(--card))}.dayreview-metrics b{color:var(--tx);font:600 18px/1 'IBM Plex Mono',monospace}.dayreview-metrics span{color:var(--faint);font:400 9px/1.2 'IBM Plex Sans KR',sans-serif}.dayreview-highlights,.dayreview-columns>section{padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.dayreview-highlights h4,.dayreview-columns h4{margin:0;color:var(--faint);font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.1em}.dayreview-highlights>ul{display:grid;gap:6px;margin:10px 0 0;padding-left:17px;color:var(--tx2);font:300 10px/1.45 'IBM Plex Sans KR',sans-serif}.dayreview-columns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.dayreview-columns ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}.dayreview-columns li{display:flex;gap:9px;padding:8px;border:1px solid var(--line);border-radius:8px}.dayreview-columns li>span{align-self:flex-start;padding:4px 7px;border-radius:99px;background:var(--soft);color:var(--faint);font:500 8px/1 'IBM Plex Sans KR',sans-serif}.dayreview-columns>section:first-child li>span{background:rgba(64,220,160,.12);color:#40dca0}.dayreview-columns li.high>span{background:rgba(240,90,90,.12);color:#f05a5a}.dayreview-columns li>div{display:grid;gap:3px}.dayreview-columns b{color:var(--tx2);font:500 10px/1.35 'IBM Plex Sans KR',sans-serif}.dayreview-columns small{color:var(--faint);font:400 8px/1.3 'IBM Plex Sans KR',sans-serif}.dayreview-columns li.none{color:var(--faint);font:300 10px/1.4 'IBM Plex Sans KR',sans-serif} .dayplan-shell{max-width:840px}.dayplan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:5px 0 15px}.dayplan-head span{color:#e47b4c;font:500 9px/1 'IBM Plex Mono',monospace}.dayplan-head h2{margin:7px 0 5px;color:var(--tx);font:600 22px/1.2 'IBM Plex Sans KR',sans-serif}.dayplan-head p{margin:0;color:var(--mut);font:300 11px/1.5 'IBM Plex Sans KR',sans-serif}.dayplan-head>div:last-child{display:flex;gap:7px}.dayplan-head button,.dayplan-head a{display:inline-flex;align-items:center;min-height:31px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--mut);cursor:pointer;text-decoration:none;font:500 9px/1 'IBM Plex Sans KR',sans-serif}.dayplan-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}.dayplan-metrics>div{display:grid;gap:5px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.dayplan-metrics b{color:var(--tx);font:600 18px/1 'IBM Plex Mono',monospace}.dayplan-metrics span{color:var(--faint);font:400 9px/1.2 'IBM Plex Sans KR',sans-serif}.dayplan-progress{height:5px;margin:0 2px 12px;border-radius:99px;background:var(--soft);overflow:hidden}.dayplan-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e47b4c,#d5a933);transition:width .25s ease}.dayplan-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}.dayplan-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}.dayplan-list li.focus{border-color:rgba(228,123,76,.35);background:linear-gradient(100deg,rgba(228,123,76,.07),var(--card))}.dayplan-state{padding:4px 7px;border-radius:99px;background:var(--soft);color:var(--faint);font:500 8px/1 'IBM Plex Sans KR',sans-serif}.dayplan-list li.in_progress .dayplan-state{background:rgba(70,150,240,.12);color:#66aaf5}.dayplan-list li.completed{opacity:.68}.dayplan-list li.completed .dayplan-state{background:rgba(64,220,160,.12);color:#40dca0}.dayplan-list li>div{display:grid;gap:3px;min-width:0}.dayplan-list b{color:var(--tx2);font:500 11px/1.35 'IBM Plex Sans KR',sans-serif}.dayplan-list small{color:var(--faint);font:400 9px/1.3 'IBM Plex Sans KR',sans-serif}.dayplan-list p{margin:1px 0 0;color:var(--mut);font:300 9px/1.35 'IBM Plex Sans KR',sans-serif}.dayplan-list button{min-height:29px;padding:0 10px;border:1px solid rgba(228,123,76,.3);border-radius:7px;background:rgba(228,123,76,.08);color:#e47b4c;cursor:pointer;font:500 8px/1 'IBM Plex Sans KR',sans-serif}.dayplan-list button.done{border-color:var(--line);background:var(--soft);color:var(--faint)}.dayplan-list li.none{display:block;color:var(--faint);font:300 10px/1.4 'IBM Plex Sans KR',sans-serif}.dayplan-error{margin-bottom:8px;padding:8px;border-radius:8px;background:rgba(240,90,90,.1);color:#f05a5a;font:400 9px/1.4 'IBM Plex Sans KR',sans-serif} .integration-checks{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:7px 0 3px}.integration-check{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--card)}.integration-check i{width:8px;height:8px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px var(--soft)}.integration-check.ok i{background:#40dca0}.integration-check.fail i{background:#f05a5a}.integration-check.ready i{background:#d5a933}.integration-check>div{display:grid;gap:3px;min-width:0}.integration-check b{color:var(--tx2);font:500 9px/1.2 'IBM Plex Sans KR',sans-serif}.integration-check small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint);font:400 8px/1.2 'IBM Plex Sans KR',sans-serif}.integration-check button{min-height:27px;padding:0 8px;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--mut);cursor:pointer;font:500 8px/1 'IBM Plex Sans KR',sans-serif}.integration-check button:disabled{cursor:wait;opacity:.5} @media(max-width:600px){.integration-checks{grid-template-columns:1fr}.department-map-head{display:block}.department-map-head p{margin-top:8px;max-width:none;text-align:left}.department-role-grid{grid-template-columns:1fr}.department-flows li{grid-template-columns:1fr}.goal-create{grid-template-columns:1fr 1fr}.goal-create input:nth-child(-n+2){grid-column:1/-1}.goal-create button{min-height:34px}.goals-grid{grid-template-columns:1fr}.goals-summary{display:grid;grid-template-columns:1fr 1fr}.dayplan-head,.dayreview-head,.personal-review-head{display:block}.dayplan-head>div:last-child,.dayreview-head>div:last-child,.personal-review-head>div:last-child{margin-top:10px}.dayplan-metrics,.dayreview-metrics,.personal-review-metrics{grid-template-columns:1fr 1fr}.dayreview-columns,.personal-review-columns{grid-template-columns:1fr}.personal-chart>div{gap:3px}.dayplan-list li{grid-template-columns:auto 1fr}.dayplan-list button{grid-column:1/-1}} /* 대화 속 작업공간 파일 경로 → 클릭 다운로드 칩 (linkifyFiles) */ .msg a.filelink { display:inline-flex; align-items:center; gap:5px; padding:1px 8px; margin:0 1px; border-radius:7px; background:var(--soft); color:var(--accent); font:500 12px/1.5 'IBM Plex Sans KR', sans-serif; text-decoration:none; word-break:break-all; border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .msg a.filelink:hover { background:var(--soft2); opacity:1; } /* ===== PAIS camera ===== */ #camBtn{cursor:pointer} .cam-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(4,8,16,.72);backdrop-filter:blur(4px)} .cam-modal.hidden{display:none} /* 여와 업무지시센터 v1 */ .work-orders-shell{max-width:1120px;max-height:92vh;overflow:auto;background:linear-gradient(145deg,#07171b 0%,#0a1118 55%,#101820 100%)} .work-orders-shell>.panel-head h3{display:flex;align-items:center;gap:9px}.work-orders-shell>.panel-head h3 span{font:500 10px/1 'IBM Plex Mono';letter-spacing:.12em;color:#f6c85f;border:1px solid #8b6b29;border-radius:20px;padding:4px 7px} .work-order-create{padding:24px;border:1px solid #1d3c42;border-radius:16px;background:radial-gradient(circle at 90% 0,rgba(23,155,139,.14),transparent 42%),rgba(4,15,19,.72)} .work-order-create>div:first-child>span{font:500 10px/1.4 'IBM Plex Mono';letter-spacing:.18em;color:#45c8b7}.work-order-create h2{margin:5px 0 4px;font-size:24px}.work-order-create p{margin:0;color:#8da5a8;font-size:13px} .work-order-create textarea{box-sizing:border-box;width:100%;resize:vertical;margin-top:18px;padding:14px 16px;border:1px solid #31535a;border-radius:11px;background:#061014;color:#eaf5f3;font:400 14px/1.65 'IBM Plex Sans KR';outline:none}.work-order-create textarea:focus{border-color:#3bc0ad;box-shadow:0 0 0 3px rgba(59,192,173,.1)} .work-order-create-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.work-order-create-actions button,.work-order footer button{border:1px solid #31535a;border-radius:8px;padding:8px 13px;background:#10252a;color:#cce2df;cursor:pointer}.work-order-create-actions .primary,.work-order footer .approve{border-color:#1aa58f;background:#128371;color:white}.work-order-create-actions button:disabled{opacity:.45} .work-preview-head{display:flex;align-items:baseline;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #193238}.work-preview-head b{color:#f2d584}.work-preview-head span{font-size:12px;color:#81999c}.work-preview-chain{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}.work-preview-chain>span{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #29565a;border-radius:8px;background:#0b2226;font-size:12px}.work-preview-chain>span.approval{border-color:#9a7131;color:#f4cf76}.work-preview-chain small{font-size:9px;padding:2px 5px;border-radius:8px;background:#6c4c18;color:#fff0bc}.work-preview-chain>i{font-style:normal;color:#44666b} .work-order-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:15px 0}.work-order-overview>div{display:flex;flex-direction:column;padding:13px 15px;border:1px solid #1c343b;border-radius:11px;background:#09151b}.work-order-overview b{font:600 21px/1.2 'IBM Plex Mono';color:#e2efec}.work-order-overview span{margin-top:4px;font-size:11px;color:#758f94}.work-order-overview .approval b{color:#f0c565} .work-orders-view{display:grid;gap:12px}.work-order-empty{display:flex;min-height:140px;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #29434a;border-radius:13px;color:#779095}.work-order-empty b{color:#b9ccca;margin-bottom:5px}.work-order-empty.error{color:#ef8981} .work-order{padding:18px;border:1px solid #203941;border-radius:14px;background:rgba(8,19,25,.84)}.work-order.awaiting_approval{border-color:#816027;box-shadow:inset 3px 0 #d9a943}.work-order.failed{border-color:#703a3a}.work-order.completed{border-color:#28564d} .work-order>header{display:flex;justify-content:space-between;gap:18px}.work-order>header>div{min-width:0}.work-order>header span{font:500 10px/1.4 'IBM Plex Mono';letter-spacing:.1em;color:#49b8aa}.work-order>header h3{margin:4px 0;font-size:17px}.work-order>header p{margin:0;color:#829a9e;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.work-order>header strong{flex:none;align-self:flex-start;padding:5px 9px;border-radius:20px;background:#173036;color:#74d8ca;font-size:11px}.work-order.awaiting_approval>header strong{background:#4f3b17;color:#ffd778}.work-order.failed>header strong{background:#442425;color:#ff9a92} .work-progress{height:4px;margin-top:15px;border-radius:8px;background:#17282e;overflow:hidden}.work-progress i{display:block;height:100%;background:linear-gradient(90deg,#27a08f,#69e1c9);transition:width .35s}.work-meta{display:flex;gap:14px;margin-top:7px;color:#6f888d;font:400 10px/1.4 'IBM Plex Mono'}.work-meta time{margin-left:auto} .work-order>ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:7px;margin:15px 0 0;padding:0;list-style:none}.work-order>ol>li{position:relative;display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:start;padding:11px;border:1px solid #1b3339;border-radius:9px;background:#08151a}.work-order>ol>li>i{width:7px;height:7px;margin-top:5px;border-radius:50%;background:#42575b}.work-order>ol>li.completed>i{background:#45c9af;box-shadow:0 0 8px #32aa95}.work-order>ol>li.running>i{background:#6db7ff;animation:pulse 1.2s infinite}.work-order>ol>li.awaiting_approval>i{background:#f0bd54}.work-order>ol>li.failed>i{background:#ef756d}.work-order>ol>li div{display:flex;min-width:0;flex-direction:column}.work-order>ol>li b{font-size:12px}.work-order>ol>li span{margin-top:2px;color:#6d8589;font-size:10px}.work-order>ol>li em{font-style:normal;font-size:10px;color:#8ca2a6}.work-order>ol>li details{grid-column:2/4;margin-top:4px}.work-order>ol>li summary{cursor:pointer;color:#6dcaba;font-size:10px}.work-order>ol>li pre{max-height:220px;overflow:auto;white-space:pre-wrap;color:#b9ccca;font:400 11px/1.6 'IBM Plex Sans KR'}.work-order>ol>li>p{grid-column:2/4;color:#f18d86;font-size:10px} .work-order>footer{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}.work-order>footer .quiet{background:transparent;color:#789095} @media(max-width:700px){.work-order-overview{grid-template-columns:repeat(2,1fr)}.work-order-create{padding:16px}.work-order>header{align-items:flex-start}.work-meta{flex-wrap:wrap}.work-meta time{margin-left:0;width:100%}.work-order>ol{grid-template-columns:1fr}} .cam-inner{width:min(92vw,520px);background:#0d1526;border:1px solid rgba(120,160,220,.28);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;color:#dce6f5} .cam-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(120,160,220,.18);font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;font-size:13px} .cam-close{background:transparent;border:0;color:#8fa6c8;font-size:18px;cursor:pointer} .cam-stage{background:#000;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center} .cam-stage video{width:100%;height:100%;object-fit:cover} .cam-hint{padding:10px 16px;font-size:12px;color:#9db1d0;line-height:1.5} .cam-hint b{color:#cfe0ff} .cam-bar{display:flex;gap:10px;padding:12px 16px 16px;justify-content:center} .cam-bar button{padding:10px 18px;border-radius:10px;border:1px solid rgba(120,160,220,.28);background:#16233c;color:#dce6f5;font-size:15px;cursor:pointer} .cam-bar .cam-shot{background:#2f6df0;border-color:#2f6df0;font-weight:600} .cam-bar button:active{transform:scale(.97)}