/* =====================================================================
   대시보드(NOC) — 테마 색 변수만 사용(어두운 tidark · 밝은 ti 모두)
   글자는 12px 이상 · 카드 모양 통일 · 900px 이하 한 칸
   ===================================================================== */
:root{--c-gold:#d2b47a;--c-blue:#6f8cff;--c-green:#3fcf8e;--c-violet:#a48cff;--c-red:#f06a62;--c-gray:#8a8e97}
.noc{
  --tint:color-mix(in srgb,var(--text) 4%,transparent);
  --tint-2:color-mix(in srgb,var(--text) 8%,transparent);
  color:var(--text); min-height:calc(100vh - 56px); padding:26px 30px 60px; overflow-x:clip;
  background:
    radial-gradient(900px 420px at 100% -10%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 60%),
    radial-gradient(800px 500px at -10% 110%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 60%),
    var(--bg);
}
.noc a{color:inherit}
.noc .hint{color:var(--muted)}
.noc .grow{flex:1}
.noc-ph{margin-top:0}
.noc-ph .ph-a .btn svg{vertical-align:-3px}

/* 실시간 연결 표시 */
.live-big{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:20px;border:1px solid var(--line-2);background:var(--panel);font-size:13px;color:var(--muted)}
.live-big i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.live-big b{font-weight:750;color:var(--text)}
.live-big.on{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.live-big.on b{color:var(--ok)}
.live-big.on i{background:var(--ok);animation:livep 1.6s infinite}
.live-big.off i{background:var(--bad)}
.live-big.off b{color:var(--bad)}
@keyframes livep{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.live-ind{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--mono);letter-spacing:.1em;color:var(--muted)}
.live-ind i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.live-ind.on{color:var(--ok)}.live-ind.on i{background:var(--ok);animation:livep 1.6s infinite}
.live-ind.off i{background:var(--bad)}

/* 위젯 카드 */
.noc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.w{grid-column:span var(--span);background:linear-gradient(180deg,var(--tint),transparent 120px),var(--panel);border:1px solid var(--line);
  border-radius:16px;position:relative;box-shadow:var(--shadow);min-width:0}
.w.hidden{display:none}
.w:hover,.w:focus-within{z-index:3}
.w>header{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);min-height:52px}
.w .wt{margin:0;font-size:15px;font-weight:750;letter-spacing:-.01em;color:var(--text);display:flex;align-items:center;gap:9px}
.w .wt::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--syn-grad,var(--brand));flex:none}
.w .wm{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.w .wb{padding:16px 18px}
@media (max-width:1280px){.w{grid-column:span 12}}
.tag{font:700 12px var(--sans);letter-spacing:.02em;border-radius:6px;padding:2px 8px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.tag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.tag.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 9%,transparent)}
.noc .empty-x.sm{padding:26px 16px}
.noc .empty-x.sm b{font-size:15px}
.noc .empty-x.sm p{font-size:13.5px;margin-bottom:0}

/* 핵심 지표 */
#w-kpi .wb{padding:0}
#w-kpi>header{display:none}
.kpis6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.kpis6{grid-template-columns:repeat(3,minmax(0,1fr))}.kt:nth-child(4){border-left:0}.kt:nth-child(n+4){border-top:1px solid var(--line)}}
.kt{padding:18px 20px;border-left:1px solid var(--line);position:relative;min-width:0}
.kt:first-child{border-left:0}
.kl{font-size:13px;font-weight:650;color:var(--muted);display:flex;align-items:center;gap:6px}
.kv{font-size:32px;font-weight:700;letter-spacing:-.03em;margin-top:8px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.kv small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0;margin-left:3px}
.ks{font-size:13px;color:var(--text-2);margin-top:8px}
.kt.ok::after,.kt.warn::after,.kt.bad::after{content:"";position:absolute;left:20px;top:0;width:32px;height:3px;border-radius:0 0 3px 3px}
.kt.ok::after{background:var(--ok)}.kt.warn::after{background:var(--warn)}.kt.bad::after{background:var(--bad)}
.kt.bad .kv{color:var(--bad)}

/* 실행 중 작업(이퀄라이저) */
.eq-legend{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.eq-legend i{display:inline-block;width:12px;height:5px;border-radius:2px;margin-right:6px;vertical-align:2px}
.eq-legend .n,.eq-fill.n{background:var(--brand)}
.eq-legend .w,.eq-fill.w{background:var(--warn)}
.eq-legend .c,.eq-fill.c{background:var(--bad)}
.eq-row{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) 92px;gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--line);text-decoration:none}
.eq-row:first-of-type{border-top:0}
.eq-n{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-n small{display:block;font-size:12px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.eq-track{height:10px;border-radius:6px;background:var(--tint);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.eq-fill{display:block;height:100%;border-radius:6px;transition:width .9s linear}
.eq-row.q .eq-fill{background:var(--faint)}
.eq-t{font:600 13px var(--mono);text-align:right;color:var(--text)}
.eq-idle{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 0 8px;color:var(--muted);font-size:13.5px;text-align:center}
.eq-bars{display:flex;gap:4px;align-items:flex-end;height:44px}
.eq-bars i{width:8px;border-radius:2px;background:color-mix(in srgb,var(--brand) 25%,transparent);animation:eqidle 2.4s ease-in-out infinite}
.eq-bars i:nth-child(3n){animation-delay:.3s}.eq-bars i:nth-child(3n+1){animation-delay:.7s}.eq-bars i:nth-child(4n){animation-delay:1.1s}
@keyframes eqidle{0%,100%{height:6px}50%{height:22px}}

/* 서버 자원 */
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.hl{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:650;color:var(--muted)}
.hl b{font:650 15px var(--mono);color:var(--text)}
.htrack{height:7px;border-radius:4px;background:var(--tint-2);margin-top:7px;overflow:hidden}
.htrack i{display:block;height:100%;border-radius:4px;background:var(--brand);transition:width .8s}
.htrack i.w{background:var(--warn)}.htrack i.c{background:var(--bad)}
.hs{font-size:12px;color:var(--muted);margin-top:5px}
.hspark{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.hspark svg{width:100%;height:42px;display:block}
.hspark span{font-size:12px;color:var(--muted)}

/* 작업 소요 시간 분포 */
svg.xv{width:100%;height:auto;display:block}
.xv text{font:500 13px var(--sans);fill:var(--muted)}
.xv .g{stroke:var(--line);stroke-width:1}
.xv .nowl{stroke:var(--gold);stroke-width:1.4;stroke-dasharray:4 4}
.xv .pt{stroke:var(--panel);stroke-width:1.2;opacity:.92;transition:r .15s}
.xv .pt:hover{r:7}
.xv .pt.success{fill:var(--brand)}.xv .pt.failure{fill:var(--bad)}.xv .pt.cancelled{fill:var(--faint)}
.xv-leg{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:8px;align-items:center;flex-wrap:wrap}
.xv-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.xv-leg i.success{background:var(--brand)}.xv-leg i.failure{background:var(--bad)}.xv-leg i.cancelled{background:var(--faint)}
.xv-leg .hint{font-size:12.5px}

/* 확인이 필요한 일 */
.al{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.al li{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)}
.al li>i{align-self:stretch;border-radius:3px}
.al li.bad>i{background:var(--bad)}.al li.warn>i{background:var(--warn)}
.al b{display:block;font-size:14px}.al span{font-size:13px;color:var(--muted)}
.al-clear{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 0;color:var(--muted);text-align:center;font-size:13px}
.al-clear svg{width:30px;height:30px;color:var(--ok)}
.al-clear b{color:var(--text);font-size:15px}

/* 처리량 */
.tp{display:flex;gap:4px;height:150px;align-items:flex-end}
.tc{flex:1;height:100%;display:flex}
.tcs{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:1px}
.tcs b{display:block;border-radius:2px}
.tcs .s{background:var(--brand)}.tcs .f{background:var(--bad)}.tcs .o{background:var(--faint)}
.tcs .e{height:2px;background:var(--line-2)}
.tpx{display:flex;gap:4px;margin-top:6px}.tpx span{flex:1;text-align:center;font-size:12px;color:var(--muted);white-space:nowrap;overflow:visible}

/* 워크플로 · PR */
.noc .wfrow{display:grid;grid-template-columns:18px minmax(0,1.5fr) minmax(0,1fr) 140px 90px;gap:12px;align-items:center;padding:10px 4px;border-top:1px solid var(--line);text-decoration:none}
.noc .wfrow:first-child{border-top:0}
.noc .wfrow:hover{background:var(--tint)}
.noc .wfrow.pr{grid-template-columns:18px minmax(0,1fr)}
.noc .wfrow .nm{font-size:14px;font-weight:650;min-width:0}
.noc .wfrow .nm small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.noc .wfrow .evs span{border-color:var(--line-2);color:var(--muted);font-size:12px}
.noc .ticks i{background:var(--line-2)}
.noc .ticks i.success{background:var(--brand)}.noc .ticks i.failure{background:var(--bad)}
.noc .nextrun{color:var(--text);font-size:13.5px}
.noc .nextrun small{display:block;font-size:12px;color:var(--muted);letter-spacing:0;font-family:var(--sans)}

/* 일정 */
.sbar{position:relative;height:64px;border-radius:10px;border:1px solid var(--line);background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/24)),var(--tint)}
.sev{position:absolute;top:3px;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:3px}
.sev i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.sev em{font:600 12px var(--mono);font-style:normal;color:var(--text-2)}
.sev.alt{top:auto;bottom:3px;flex-direction:column}
.snow{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.saxis{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:6px 0 10px}
.slist{list-style:none;margin:0;padding:0}
.slist li{display:grid;grid-template-columns:9px 46px minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.slist li.hint{display:block}
.slist li>.tag,.slist li>.btn{justify-self:end}
.sev.nolab em{visibility:hidden}
.slist li.off{opacity:.5}
.slist .dot{width:9px;height:9px;border-radius:50%;flex:none}
.slist .st2{font:600 13px var(--mono);width:46px;color:var(--text);flex:none}
/* studio.css 의 전역 .sn(동그란 번호)이 덮어쓰지 않게 모두 되돌린다 */
.slist .sn{display:block;width:auto;height:auto;min-width:0;border:0;border-radius:0;background:none;place-items:initial;font:600 14px/1.45 var(--sans);color:var(--text);animation:none}
.slist .sn small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slist code{font-size:12px;background:var(--tint-2);border-radius:4px;padding:0 4px}

/* 실시간 이벤트 */
.lf{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto;font-size:13px}
.lf li{display:grid;grid-template-columns:70px 18px 76px minmax(0,1fr);gap:8px;align-items:center;padding:7px 2px;border-top:1px solid var(--line)}
.lf li:first-child{border-top:0}
.lf li.lf-wait{display:block;padding:14px}
.lf li.new{animation:flash 1.6s ease}
@keyframes flash{from{background:color-mix(in srgb,var(--brand) 16%,transparent)}to{background:transparent}}
.lf .lt{font:500 12px var(--mono);color:var(--muted)}
.lf .li svg{width:14px;height:14px}
.lf .lk{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf .lx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.lf .lx b{color:var(--text);font-weight:650}
.lf li.bad .lx b{color:var(--bad)}.lf li.ok .lx b{color:var(--ok)}

/* AI 실행 한도 */
.qg{display:flex;align-items:center;gap:14px;padding:6px 0}
.qg svg{width:76px;height:76px;flex:none}
.qg text{fill:var(--text)}
.qg .kv{font-size:26px;margin-top:4px}
.noc .ring-bg{stroke:var(--line-2)}
.wpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* 큰 화면(TV) 모드 */
body.tv .side{display:none}
body.tv .app{grid-template-columns:1fr}
body.tv .mtop{display:none}
body.tv .noc{min-height:100vh;padding:22px}
body.tv .noc-ph .ph-d{display:none}

/* 움직임 줄이기: 물방울 · 흐름 애니메이션 끄기(엔진도 따로 멈춘다) */
@media (prefers-reduced-motion: reduce){
  .eq-bars i,.live-big.on i,.live-ind.on i,.lf li.new{animation:none!important}
  .eq-fill,.htrack i{transition:none}
}

/* 모바일 · 태블릿(900px 이하): 한 칸 */
@media (max-width:900px){
  .noc{padding-top:18px}
  .w{grid-column:1/-1}
  .w>header{padding:12px 14px}
  .w .wb{padding:14px}
  .kpis6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt{padding:14px 16px}
  .kt:nth-child(odd){border-left:0}.kt:nth-child(4){border-left:1px solid var(--line)}
  .kt:nth-child(n+3){border-top:1px solid var(--line)}
  .kv{font-size:26px}
  .eq-row{grid-template-columns:minmax(0,1fr) 80px}
  .eq-row .eq-track{grid-column:1/-1;grid-row:2}
  .noc .wfrow{grid-template-columns:18px minmax(0,1fr) 80px}
  .noc .wfrow .evs,.noc .wfrow .ticks{display:none}
  .lf li{grid-template-columns:64px 18px minmax(0,1fr)}
  .lf .lk{display:none}
}
@media (max-width:520px){
  .slist li{grid-template-columns:9px minmax(0,1fr) auto;align-items:start}
  .slist .dot{margin-top:5px}
  .slist .st2{grid-column:2;grid-row:1;width:auto}
  .slist .sn{grid-column:2/-1;grid-row:2}
  .slist li>.tag,.slist li>.btn{grid-column:3;grid-row:1}
  .slist .sn small{white-space:normal;overflow-wrap:anywhere}
  .sev em{font-size:11px}
  .kpis6{grid-template-columns:1fr}
  .kt{border-left:0!important}
  .kt+.kt{border-top:1px solid var(--line)}
  .hgrid{grid-template-columns:1fr}
}
/* ---------------------------------------------------------------- 시작 체크리스트(2026-11-11 개편) */
.ck{margin:0 0 20px;padding:18px 20px 20px;border-radius:16px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.ck-h{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 14px}
.ck-h h2{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em;color:var(--text)}
.ck-prog{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ck-prog i{display:block;width:72px;height:6px;border-radius:99px;background:var(--tint-2);overflow:hidden}
.ck-prog i em{display:block;height:100%;border-radius:99px;background:var(--ok)}
.ck-h>a{margin-left:auto;font-size:13.5px;font-weight:650;color:var(--muted)!important;text-decoration:none}
.ck-h>a:hover{color:var(--brand)!important}
.ck-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ck-i{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:4px 10px;align-items:start;padding:14px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-2);color:inherit;text-decoration:none;transition:border-color .15s,background .15s;min-width:0}
.ck-i:hover{border-color:var(--line-2);background:var(--panel-2)}
.ck-s{grid-row:1/4;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);color:var(--muted);background:var(--panel)}
.ck-s svg{width:13px;height:13px}
.ck-i b{font-size:15px;font-weight:750;color:var(--text);line-height:24px}
.ck-i p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.ck-go{justify-self:start;margin-top:8px;font-size:13.5px;font-weight:650;color:var(--muted)}
.ck-i.done .ck-s{border-color:var(--ok);background:var(--ok);color:#fff}
.ck-i.done b{color:var(--text-2)}
.ck-i.now{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--bg-2));animation:ckGlow 2.6s ease-in-out infinite}
.ck-i.now .ck-s{border-color:var(--brand);box-shadow:inset 0 0 0 4px var(--panel);background:var(--brand)}
.ck-i.now .ck-go{color:var(--brand-ink);background:var(--brand);border-color:var(--brand);padding:0 14px;min-height:34px;display:inline-flex;align-items:center;border-radius:9px;font-weight:700}
.ck-i.now:hover .ck-go{background:var(--brand-2)}
.ck-badge{position:absolute;top:-9px;right:12px;font-size:11.5px;font-weight:750;letter-spacing:.02em;padding:2px 8px;border-radius:99px;background:var(--brand);color:var(--brand-ink)}
@keyframes ckGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent),0 6px 24px color-mix(in srgb,var(--brand) 18%,transparent)}}
@media (max-width:1100px){.ck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .ck{padding:14px 14px 16px}
  .ck-grid{grid-template-columns:1fr;gap:8px}
  .ck-i{padding:12px;grid-template-rows:auto auto auto}
  .ck-i.done p{display:none}.ck-i.done{grid-template-rows:auto}.ck-i.done .ck-go{display:none}.ck-i.done .ck-s{grid-row:1}
  #w-tv{display:none}
}
@media (prefers-reduced-motion: reduce){.ck-i.now{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}}

/* ---------------------------------------------------------------- 개발 파이프라인(2026-11-11 개편)
   AI 연결 상자 → 왼쪽 레일 → 프로젝트 카드(프로젝트 | 예약 실행 › 자동 테스트 › 출시 · 웹 배포) */
.pp{margin:0 0 20px;padding:18px 20px 20px;border-radius:16px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.pp-h{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px}
.pp-h>div{flex:1;min-width:0}
.pp-h h2{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em;color:var(--text)}
.pp-h p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-2);max-width:640px}
.pp-live{flex:none;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:99px;border:1px solid var(--line-2);font-size:12.5px;font-weight:650;color:var(--muted)}
.pp-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:livep 1.6s infinite}
.pp-kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;margin:0 0 18px;overflow:hidden}
.pp-kt{display:grid;gap:4px;align-content:start;padding:12px 14px;border-left:1px solid var(--line);min-width:0;position:relative}
.pp-kt:first-child{border-left:0}
.pp-kt>span{font-size:12.5px;font-weight:650;color:var(--muted)}
.pp-kt>b{font-size:24px;font-weight:750;letter-spacing:-.02em;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
.pp-kt>b em{font-style:normal;font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.pp-kt>small{font-size:12.5px;line-height:1.5;color:var(--text-2)}
.pp-kt.wide{grid-column:span 1}
.pp-kt.ok::after,.pp-kt.bad::after{content:"";position:absolute;left:14px;top:0;width:24px;height:3px;border-radius:0 0 3px 3px}
.pp-kt.ok::after{background:var(--ok)}.pp-kt.bad::after{background:var(--bad)}.pp-kt.bad>b{color:var(--bad)}
.pp-wait{padding:20px;text-align:center;font-size:13.5px;color:var(--muted)}
.pp-lab{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;margin:0 0 8px}
.pp-lab b{font-size:13px;font-weight:750;letter-spacing:.02em;color:var(--text)}
.pp-lab span{font-size:12.5px;color:var(--muted)}
.pp-lab a{margin-left:auto;font-size:13px;font-weight:650;color:var(--muted)!important;text-decoration:none}
.pp-lab a:hover{color:var(--brand)!important}
/* AI 연결 상자 */
.pp-src{position:relative;margin:0 0 18px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2)}
.pp-src::after{content:"";position:absolute;left:6px;bottom:-5px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--panel)}
.pp-ais{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pp-ai{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
  color:inherit;text-decoration:none;min-width:0;transition:border-color .15s}
.pp-ai:hover{border-color:color-mix(in srgb,var(--c) 60%,var(--line-2))}
.pp-ai>i{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.pp-ai.on>i{background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.pp-ai.hot>i{animation:ppPulse 1.8s ease-in-out infinite}
.pp-ai>span{display:grid;min-width:0}
.pp-ai b{font-size:14px;font-weight:750;color:var(--text)}
.pp-ai small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-ai em{font-style:normal;font-size:12px;font-weight:650;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.pp-ai em.cta{color:var(--brand)}
.pp-ai.off{border-style:dashed}
.pp-ai.off b{color:var(--text-2)}
/* 레일 + 프로젝트 카드 */
.pp-lanes{position:relative;padding-left:28px;display:grid;gap:10px}
.pp-lanes>.pp-lab{margin:0}
.pp-lanes::before{content:"";position:absolute;left:9px;top:-18px;width:2px;height:calc(var(--rail,0px) + 18px);border-radius:2px;
  background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 30%,var(--line-2)))}
.pp-lane{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) 22px minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);align-items:stretch;
  padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--panel);transition:border-color .15s}
.pp-lane:hover{border-color:var(--line-2)}
.pp-stub{position:absolute;left:-19px;top:50%;width:18px;height:2px;margin-top:-1px;background:color-mix(in srgb,var(--brand) 45%,var(--line-2))}
.pp-stub::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-right:0;border-left:6px solid color-mix(in srgb,var(--brand) 45%,var(--line-2))}
.pp-lane.hot .pp-stub{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 30%,transparent),var(--brand),color-mix(in srgb,var(--brand) 30%,transparent));background-size:200% 100%;animation:ppFlow 1.4s linear infinite}
.pp-lane.ghost{border-style:dashed}
.pp-p{position:relative;display:grid;gap:6px;align-content:center;padding:8px 10px;min-width:0}
.pp-pt{display:flex;align-items:center;gap:8px;min-width:0}
.pp-pt a{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:var(--text)!important}
.pp-pt a:hover b{text-decoration:underline}
.pp-pt b{font-size:15px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-pd{flex:none;width:10px;height:10px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px var(--panel)}
.pp-lane.warm .pp-pd{background:var(--brand)}
.pp-lane.hot .pp-pd{background:var(--brand);animation:ppPulse 1.8s ease-in-out infinite}
.pp-sl{flex:none;margin-left:auto;font-size:12px;font-weight:650;padding:1px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.pp-pm{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;font-size:13px;color:var(--text-2)}
.pp-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:var(--text)}
.pp-tag i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.pp-bar{height:5px;border-radius:99px;background:var(--tint-2);overflow:hidden}
.pp-bar i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.pp-act{font-size:12.5px;color:var(--muted)}
.pp-p .btn{justify-self:start}
.pp-ar{position:relative;align-self:center;height:12px}
.pp-ar::before{content:"";position:absolute;left:3px;right:7px;top:5px;height:2px;border-radius:2px;background:var(--line-2)}
.pp-ar::after{content:"";position:absolute;right:2px;top:1px;border:5px solid transparent;border-right:0;border-left:6px solid var(--line-2)}
.pp-st{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 7px;align-content:start;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-2);color:inherit;text-decoration:none;min-width:0;transition:border-color .15s}
.pp-st:hover{border-color:var(--line-2)}
.pp-st .pp-k{grid-column:2;font-size:12px;font-weight:650;color:var(--muted)}
.pp-st b{grid-column:1/-1;display:block;font-size:13.5px;font-weight:700;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.pp-st small{grid-column:1/-1;font-size:12.5px;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.pp-dot{grid-column:1;grid-row:1;width:8px;height:8px;border-radius:50%;background:var(--faint)}
.pp-st.t-on .pp-dot{background:var(--brand)}
.pp-st.t-ok .pp-dot{background:var(--ok)}
.pp-st.t-bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.pp-st.t-bad .pp-dot{background:var(--bad)}
.pp-st.t-bad b{color:var(--bad)}
.pp-st.t-off{background:transparent;border-style:dashed}
.pp-st.t-off b{color:var(--text-2);font-weight:650}
.pp-st.t-off small{color:var(--muted)}
@keyframes ppPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 0%,transparent),0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}}
@keyframes ppFlow{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){.pp-live i,.pp-ai.hot>i,.pp-lane.hot .pp-pd,.pp-lane.hot .pp-stub{animation:none}}
/* 좁은 화면: 프로젝트 카드 = 제목 줄 + 세로로 이어진 단계 3개 */
@media (max-width:1100px){.pp-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}.pp-kt:nth-child(4){border-left:0}.pp-kt:nth-child(n+4){border-top:1px solid var(--line)}.pp-kt.wide{grid-column:span 1}}
@media (max-width:820px){
  .pp{padding:14px 14px 16px}
  .pp-h p{font-size:13px}
  .pp-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-kt{border-left:0!important;border-top:1px solid var(--line)}
  .pp-kt:nth-child(-n+2){border-top:0}
  .pp-kt:nth-child(2){border-left:1px solid var(--line)!important}
  .pp-kt.wide{grid-column:1/-1}
  .pp-kt:nth-child(5){border-left:1px solid var(--line)!important}
  .pp-kt>b{font-size:21px}
  .pp-src{padding:10px}
  .pp-ais{gap:6px}
  .pp-ai{grid-template-columns:auto minmax(0,1fr);gap:7px;padding:8px 9px}
  .pp-ai em{display:none}
  .pp-ai .pp-ago{display:none}
  .pp-ai b{font-size:13.5px}
  .pp-ai small{font-size:12px}
  .pp-lanes{padding-left:22px}
  .pp-lanes::before{left:9px}
  .pp-lane{display:block;padding:12px 12px 4px}
  .pp-stub{left:-13px;width:12px;top:23px}
  .pp-p{padding:0 0 10px;gap:5px}
  .pp-p::before{content:"";position:absolute;left:4px;top:14px;bottom:0;width:2px;background:var(--line-2)}
  .pp-pt{gap:8px}
  .pp-pt a{gap:10px}
  .pp-p>:not(.pp-pt){margin-left:20px}
  .pp-ar{display:none}
  .pp-st{position:relative;grid-template-columns:minmax(0,1fr);gap:2px;padding:6px 4px 10px 20px;border:0;border-radius:0;background:transparent!important}
  .pp-st::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:var(--line-2)}
  .pp-st:last-child::before{bottom:auto;height:12px}
  .pp-st .pp-k{grid-column:1}
  .pp-st b,.pp-st small{grid-column:1}
  .pp-dot{position:absolute;grid-column:auto;grid-row:auto;left:0;top:8px;width:10px;height:10px;box-shadow:0 0 0 3px var(--panel);z-index:1}
  .pp-st.t-off .pp-dot{background:var(--panel);border:2px solid var(--line-2);width:10px;height:10px;box-sizing:border-box}
  .pp-st:hover{background:var(--tint)!important}
}

/* ---------------------------------------------------------------- 도움말 말풍선: 카드 안에 머물게(머리줄 · 지표 칸 기준으로 배치) */
.noc .w>header{position:relative}
.noc .w>header .help,.noc .kt .help{position:static}
.noc .w>header .help::after,.noc .kt .help::after{left:14px;right:auto;max-width:min(320px,calc(100% - 28px));transform:translateY(4px)}
.noc .w>header .help:hover::after,.noc .w>header .help:focus::after,.noc .kt .help:hover::after,.noc .kt .help:focus::after{transform:translateY(0)}
.noc .w>header .help.b::after{top:calc(100% - 6px)}
.noc .kt .help.b::after{top:44px}