/* ============================================================
   views.css — 4열 캔버스가 그리는 것

   셸 셋(`chrome.css` · `stream.css` · `editor.css`)은 참조 앱과 **바이트까지
   같다**(`tools/check_shell.py` 가 센다). 이 파일만 앱마다 자기 벌을 든다 —
   캔버스가 그리는 것이 앱마다 다르기 때문이다 (`상태/계약/app-shell.md` §3).

   앞부분(공통 카드 · 표 · 히어로 · 파이프라인 · 모달 · 토스트)은 참조 앱의
   같은 이름 규칙을 그대로 쓴다. 뒷부분이 이 앱만의 것이다 — 단계 열 · 관문 ·
   논문 조각.

   짧은 클래스는 부모 아래로 스코프한다.
   ============================================================ */

/* 고정폭 글꼴. **셸(`chrome.css`)에 넣지 않는다** — 그 파일은 참조 앱과 바이트까지
   같아야 하고, 이 앱만 파일 이름·시그널 키·에이전트 이름을 고정폭으로 그린다.
   CDN 을 부르지 않는 것은 셸과 같은 규칙이다(고객사 VPS 에서 iframe 으로 열리고
   바깥이 막힌 판에서도 떠야 한다). */
:root{
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
}

/* ---------- 공통 카드 ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px}
.card-h{display:flex;align-items:baseline;gap:9px;margin:0 0 13px;flex-wrap:wrap}
.card-h h3{font-size:14px;font-weight:800;margin:0;letter-spacing:-.2px}
.card-h .d{font-size:11px;color:var(--muted)}
.card-h .rt{margin-left:auto}
.tagn{font-size:10px;font-weight:800;color:#fff;background:var(--navy);border-radius:20px;padding:2px 8px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g2>*{margin-bottom:0}
@media(max-width:1500px){.g2{grid-template-columns:1fr}}

/* Hero */
.hero{background:linear-gradient(120deg,var(--navy),var(--navy3));color:#fff;border:none;border-radius:12px;
  padding:18px 20px;margin-bottom:14px}
.hero .hn{font-size:20px;font-weight:800;margin:0;letter-spacing:-.4px;word-break:keep-all}
.hero .ht{font-size:12.5px;opacity:.8;margin:4px 0 12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:20px;
  padding:3px 10px;font-size:11px;font-weight:600}
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:15px}
.kpi{flex:1;min-width:130px;background:rgba(255,255,255,.09);border-radius:9px;padding:10px 12px}
.kpi .l{font-size:10px;opacity:.72;margin-bottom:2px}
.kpi .v{font-size:18px;font-weight:800;letter-spacing:-.3px}
.kpi .v small{font-size:11px;opacity:.7;font-weight:600}

/* 정보 그리드 */
.igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.iitem{background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.iitem .l{font-size:10px;color:var(--muted);font-weight:700}
.iitem .v{font-size:12.5px;font-weight:700;margin-top:2px;letter-spacing:-.2px;word-break:keep-all}

/* 표 */
table.tb{width:100%;border-collapse:collapse;font-size:12px}
table.tb th,table.tb td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--line2);
  vertical-align:top;word-break:keep-all}
table.tb th{background:var(--soft);font-size:10.5px;color:var(--muted);font-weight:800;white-space:nowrap}
table.tb td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tb tr:last-child td{border-bottom:none}
table.tb tr.hl td{background:var(--red-soft);font-weight:700}
.tnote{font-size:10.5px;color:var(--muted);margin-top:9px;line-height:1.6;padding-top:9px;
  border-top:1px dashed var(--line);word-break:keep-all}
.tnote code{font-size:10px;background:var(--soft);border:1px solid var(--line);border-radius:3px;padding:0 3px}

/* 지분 바 — 절편 실험의 막대로 쓴다 */
.sh{margin-bottom:9px}
.sh-t{display:flex;align-items:baseline;gap:7px;font-size:11.5px;margin-bottom:3px}
.sh-t b{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-t .p{font-weight:800;font-variant-numeric:tabular-nums;color:var(--navy)}
.sh-b{height:7px;border-radius:4px;background:var(--line2);overflow:hidden}
.sh-b i{display:block;height:100%;border-radius:4px;background:var(--navy3)}
.sh.max .sh-b i{background:var(--red)}
.flagbox{background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:10px 12px;font-size:11.5px;
  color:#78350f;line-height:1.7;margin-top:12px;word-break:keep-all}
.flagbox b{font-weight:800}

/* 파이프라인 — 단계 하나가 한 칸이다 */
.pipe{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:8px}
.pipe-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pipe-t b{font-size:12.5px;font-weight:800;white-space:nowrap}
.pipe-t .tg{font-size:10.5px;color:var(--muted);flex:1;min-width:0}
.pipe-t .st{margin-left:auto;font-size:10px;font-weight:800;color:var(--navy);background:#eef4fa;
  border-radius:20px;padding:1px 8px;white-space:nowrap}
.pipe-b{height:6px;border-radius:4px;background:var(--line2);overflow:hidden;margin:8px 0 6px}
.pipe-b i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--navy3),var(--gold));
  transition:width .3s ease}
.pipe .nt{font-size:10.5px;color:var(--muted);line-height:1.7}
.pipe .nt b{color:var(--ink2);font-weight:800}

/* 확인 필요 / 로그 */
.gap{display:flex;gap:9px;align-items:flex-start;border:1px dashed #fbbf24;background:#fffdf5;
  border-radius:9px;padding:9px 11px;margin-bottom:7px}
.gap .gi{color:#d97706;font-size:12px;flex:0 0 auto;line-height:1.4}
.gap .gt{flex:1;min-width:0}
.gap .gt b{display:block;font-size:12px;font-weight:700}
.gap .gt span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.6;word-break:keep-all}
.gap .gw{font-size:10px;font-weight:800;color:#92400e;background:#fef3c7;border-radius:20px;
  padding:2px 8px;white-space:nowrap;flex:0 0 auto}
.log{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:5px 0;border-bottom:1px solid var(--line2)}
.log:last-child{border-bottom:none}
.log .ls{flex:1;min-width:0}
.log .lc{font-weight:800;font-variant-numeric:tabular-nums;color:var(--navy)}
.log .lb{font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:20px}
.log .lb.ok{background:#ecfdf5;color:#047857}
.log .lb.no{background:#fef2f2;color:#b91c1c}
table.tb .lb{font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:20px;white-space:nowrap}
table.tb .lb.ok{background:#ecfdf5;color:#047857}
table.tb .lb.no{background:#fef2f2;color:#b91c1c}

/* 캔버스 문서 폭 */
.doc{max-width:1000px}

/* 탭 (캔버스 머리글) */
.cv-rt .tabs{display:flex;gap:2px;background:var(--soft);border:1px solid var(--line);
  border-radius:8px;padding:2px}
.cv-rt .tab{border:none;background:transparent;border-radius:6px;padding:3px 11px;font-size:11.5px;
  font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
.cv-rt .tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* 접수 입력 상자 */
.ibox{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;transition:.14s}
.ibox.over{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.ibox textarea{width:100%;border:none;outline:none;resize:vertical;font-family:inherit;font-size:13px;
  line-height:1.8;color:var(--ink);min-height:110px}
.ibox .ib-f{display:flex;align-items:center;gap:9px;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--line)}
.ibox .ib-n{font-size:10.5px;color:var(--muted)}
.rq-read{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;margin-top:13px;
  padding-top:11px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--muted)}
.rq-read>b{font-size:10px;font-weight:800;color:var(--muted2);letter-spacing:.2px}

/* ---------- 모달 ---------- */
.mask{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;z-index:60;
  backdrop-filter:blur(2px);padding:24px}
.modal{background:#fff;border-radius:14px;width:min(760px,100%);max-height:88vh;overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-h{padding:18px 22px 0;display:flex;align-items:baseline;gap:10px}
.modal-h h3{font-size:16px;font-weight:800;margin:0}
.modal-h .d{font-size:11.5px;color:var(--muted)}
.modal-h .x{margin-left:auto;border:none;background:transparent;font-size:12px;color:var(--muted);
  cursor:pointer;font-weight:700;padding:2px 6px;font-family:inherit}
.modal-b{padding:16px 22px}
.modal-f{padding:0 22px 18px;display:flex;gap:7px;justify-content:flex-end}

/* ---------- 토스트 ---------- */
.toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;
  flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.toast{background:var(--navy);color:#fff;border-radius:9px;padding:9px 16px;font-size:12px;font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.25);animation:tin .22s ease}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   연구 전용 — 단계 열 · 관문 · 논문 조각
   ============================================================ */

/* 첫 화면과 관문 화면에 고정으로 붙는 안내.
   「부르면 나온다」를 전제하는 형제 앱과 다른 점을 말하는 자리다. */
.ws-notice{margin:20px 0 4px;padding:13px 16px;border-radius:9px;line-height:1.8;
  font-size:12.5px;color:var(--accent-text);background:var(--accent-subtle);
  border:1px solid var(--accent-border);word-break:keep-all}
.ws-notice code{font-size:11px;background:rgba(255,255,255,.6);border-radius:3px;padding:0 3px}

/* 2열 · 단계 열 */
.stg-list{list-style:none;margin:0;padding:0}
.stg{margin-bottom:4px}
.stg>button{width:100%;display:flex;align-items:flex-start;gap:8px;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;cursor:pointer;font-family:inherit;
  transition:.12s}
.stg>button:hover{border-color:#c7d3e2}
.stg .no{flex:0 0 auto;font-size:10px;font-weight:800;color:var(--muted2);
  font-variant-numeric:tabular-nums;padding-top:1px}
.stg .tx{flex:1;min-width:0}
.stg .tx b{display:block;font-size:12px;font-weight:700}
.stg .tx .d{display:block;font-size:10px;color:var(--muted);margin-top:1px;line-height:1.5;
  word-break:keep-all}
.stg .mk{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--line2)}
.stg.on>button{background:var(--soft)}
.stg.on .mk{color:#167c3c}
.stg.now>button{border-color:var(--accent);background:var(--accent-subtle)}
.stg.now .mk{color:var(--accent)}
.stg.sel>button{border-color:var(--navy);box-shadow:0 0 0 2px rgba(22,104,179,.12)}
/* 국면 머리. **단계 목록을 국면으로 묶는 자리다** — 번호와 제목만 있던 동안 이
   목록은 「검증을 지나야 산출이 열린다」를 하나도 말하지 않았다. */
.stg-ph{font-size:9.5px;font-weight:800;color:var(--muted2);letter-spacing:.4px;
  padding:9px 2px 4px;text-transform:none}
.stg-ph:first-child{padding-top:1px}
.stg .tx .ag{display:block;font-size:9.5px;font-weight:700;color:var(--accent-text);
  font-family:var(--mono);margin-top:1px}
.stg .tx .d code{font-family:var(--mono);font-size:9.5px}
.stg.bad>button{border-color:var(--danger-border);background:var(--danger-subtle)}
.stg.bad .mk{color:var(--danger)}

/* ============================================================
   4열 · 흐름 (DAG) — 국면 넷을 가로로 세운다

   **가로로 세우는 것이 요점이다.** 열 줄을 늘어놓으면 「검증 국면을 지나야 산출이
   열린다」가 화면에 없고, 그 순서가 이 앱의 계약이다.
   ============================================================ */
.dag{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  margin-bottom:14px}
.dag-row{display:flex;align-items:flex-start;gap:6px;overflow-x:auto;padding-bottom:4px}
.dag-p{flex:1 1 0;min-width:148px;display:flex;flex-direction:column;gap:6px}
.dag-ph{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;
  color:var(--muted);padding-bottom:2px}
.dag-ph .n{width:15px;height:15px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:9px;font-weight:800;flex:0 0 auto}
.dag-gap{flex:0 0 auto;align-self:center;color:var(--line2);font-size:13px;padding:0 1px}
.dag-n{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--soft);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer;
  font-family:inherit;transition:.12s}
.dag-n:hover{border-color:#c7d3e2}
.dag-n .dn-t{display:flex;align-items:center;gap:6px}
.dag-n .dn-no{font-size:9.5px;font-weight:800;color:var(--muted2);
  font-variant-numeric:tabular-nums}
.dag-n .dn-ag{flex:1;min-width:0;font-size:9.5px;font-weight:700;color:var(--accent-text);
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dag-n .dn-d{width:7px;height:7px;border-radius:50%;background:var(--line2);flex:0 0 auto}
.dag-n .dn-n{font-size:11.5px;font-weight:700;line-height:1.4;word-break:keep-all}
.dag-n .dn-m{font-size:9.5px;color:var(--muted);line-height:1.4;word-break:break-all}
.dag-n.ok{background:#fff}
.dag-n.ok .dn-d{background:var(--success)}
.dag-n.running{border-color:var(--accent);background:var(--accent-subtle)}
.dag-n.running .dn-d{background:var(--accent)}
.dag-n.failed{border-color:var(--danger-border);background:var(--danger-subtle)}
.dag-n.failed .dn-d{background:var(--danger)}
.dag-n.sel{border-color:var(--navy);box-shadow:0 0 0 2px rgba(74,29,56,.12)}
.dag-note{font-size:11px;color:var(--ink2);line-height:1.75;word-break:keep-all;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-top:13px}
.kpi{background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.kpi .k{display:block;font-size:9.5px;font-weight:800;color:var(--muted2);letter-spacing:.2px}
.kpi .v{display:block;font-size:18px;font-weight:800;line-height:1.3;margin-top:2px;
  font-variant-numeric:tabular-nums}
.kpi .v small{font-size:11px;font-weight:700;color:var(--muted)}
.kpi .d{display:block;font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1.4}
/* 바로 위 `.kpi` 가 머리글(`.hero`) 안의 타일까지 밝은 바탕으로 덮어 흰 숫자가 사라졌다 */
.hero .kpi{background:rgba(255,255,255,.09);border-color:transparent}
.hero .kpi .v small{color:inherit}

/* ============================================================
   4열 · 단계 상세

   **층 순서를 단계마다 바꾸지 않는다.** 같은 자리에서 비교해야 열 단계를 한
   파이프라인으로 읽을 수 있다.
   ============================================================ */
.sd-rail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sd-g{display:flex;align-items:center;gap:3px}
.sd-g .gl{font-size:9.5px;font-weight:800;color:var(--muted2);margin-right:3px}
.sd-chip{width:24px;height:22px;border-radius:6px;border:1px solid var(--line);background:#fff;
  font-size:9.5px;font-weight:800;color:var(--muted2);cursor:pointer;font-family:inherit;
  font-variant-numeric:tabular-nums;transition:.12s}
.sd-chip:hover{border-color:#c7d3e2}
.sd-chip.ok{background:var(--success-subtle);color:#0f6b33;border-color:#bfe3cd}
.sd-chip.running{background:var(--accent-subtle);color:var(--accent-text);border-color:var(--accent-border)}
.sd-chip.failed{background:var(--danger-subtle);color:var(--danger);border-color:var(--danger-border)}
.sd-chip.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
.sd-mv{margin-left:auto;display:flex;gap:5px}
.sd-hl{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:13px 16px}
.sd-hl .num{font-size:22px;font-weight:800;color:var(--line2);font-variant-numeric:tabular-nums;
  line-height:1}
.sd-hl .tt{flex:1;min-width:0}
.sd-hl .tt b{display:block;font-size:14px;font-weight:800}
.sd-hl .tt .sub{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.sd-hl .tt .ag{font-family:var(--mono);font-weight:700;color:var(--accent-text)}
.sd-st{flex:0 0 auto;font-size:9.5px;font-weight:800;border-radius:20px;padding:3px 9px;
  border:1px solid var(--line);color:var(--muted);background:var(--soft)}
.sd-st[data-s="ok"]{background:var(--success-subtle);color:#0f6b33;border-color:#bfe3cd}
.sd-st[data-s="running"]{background:var(--accent-subtle);color:var(--accent-text);
  border-color:var(--accent-border)}
.sd-st[data-s="failed"]{background:var(--danger-subtle);color:var(--danger);
  border-color:var(--danger-border)}
.sd-goal{font-size:12px;color:var(--ink2);line-height:1.85;word-break:keep-all;
  background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--navy);
  border-radius:0 10px 10px 0;padding:12px 15px;margin:10px 0 12px}
.sd-goal.none{border-left-color:var(--line2);color:var(--muted)}
.sd-goal code{font-family:var(--mono);font-size:11px}
.sig{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px;margin-bottom:14px}
.sig-c{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.sig-c .k{display:block;font-size:9.5px;font-weight:800;color:var(--muted2);
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sig-c .v{display:block;font-size:12px;font-weight:700;margin-top:2px;line-height:1.45;
  word-break:break-all}
.sd-io{display:flex;align-items:stretch;gap:10px}
.sd-side{flex:1 1 0;min-width:0}
.sd-side .lab{font-size:9.5px;font-weight:800;color:var(--muted2);margin-bottom:5px}
.sd-side .art{background:var(--soft);border:1px solid var(--line);border-radius:7px;
  padding:5px 8px;margin-bottom:4px}
.sd-side .art code{font-family:var(--mono);font-size:10px;word-break:break-all}
.sd-side .art.none,.sd-side .art.more{font-size:10px;color:var(--muted);background:#fff;
  border-style:dashed}
.sd-side.out .art{background:var(--accent-subtle);border-color:var(--accent-border)}
.sd-io .ar{flex:0 0 auto;align-self:center;color:var(--line2);font-size:14px}
.sd-dec{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:7px}
.sd-dec .pick,.sd-dec .drop{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;
  line-height:1.65;word-break:keep-all;margin-bottom:4px}
.sd-dec .lb{flex:0 0 auto}
.sd-dec .why{font-size:10.5px;color:var(--muted);line-height:1.7;word-break:keep-all;
  margin-top:6px;padding-top:7px;border-top:1px dashed var(--line2)}
.sd-note{font-size:11.5px;color:var(--ink2);line-height:1.8;word-break:keep-all;
  background:var(--accent-subtle);border:1px solid var(--accent-border);border-radius:10px;
  padding:12px 15px;margin-bottom:14px}
.sd-note .h{display:block;font-size:9.5px;font-weight:800;color:var(--accent-text);
  letter-spacing:.2px;margin-bottom:4px}
.sd-note code{font-family:var(--mono);font-size:10.5px}
.sd-foot{display:flex;gap:7px;justify-content:flex-end;padding-bottom:6px}

/* 4열 · 리더보드 · 관찰값 · 조각 본문 */
.tb.lbd .rk{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;
  background:var(--soft);border:1px solid var(--line);font-size:9px;font-weight:800;
  color:var(--muted2);margin-right:6px;vertical-align:middle}
.tb.lbd tr.hi .rk{background:var(--navy);border-color:var(--navy);color:#fff}
.tb.lbd .rk.b{width:auto;padding:0 5px}
.tb.lbd tr.base{color:var(--muted)}
.tb .pm{font-size:9.5px;color:var(--muted);margin-left:3px;font-weight:600}
.sh .fx{font-size:9.5px;color:var(--muted);font-weight:700;margin-left:6px}
.sh .p .dl{font-size:9.5px;color:var(--danger);margin-left:4px;font-weight:800}
.ob{display:inline-flex;align-items:baseline;gap:4px;margin:0 8px 2px 0}
.ob .k{font-size:9.5px;font-family:var(--mono);color:var(--muted2)}
.ob .n{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
pre.snip{background:var(--soft);border:1px solid var(--line);border-radius:8px;
  font-family:var(--mono);font-size:10.5px;line-height:1.65;padding:11px 13px;margin-top:10px;
  max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-all}

/* 2열 · 관문 행 */
.grow{width:100%;display:flex;flex-direction:column;gap:5px;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:6px;cursor:pointer;
  font-family:inherit;transition:.12s}
.grow:hover{border-color:#c7d3e2}
.grow.sel{border-color:var(--navy);box-shadow:0 0 0 2px rgba(22,104,179,.12)}
.grow-t{display:flex;align-items:center;gap:7px}
.grow-t b{font-size:12.5px;font-weight:800;flex:1;min-width:0}
.grow .wait{font-size:9.5px;font-weight:800;color:var(--muted);background:var(--soft);
  border-radius:20px;padding:1px 7px}
.grow .gq{font-size:10.5px;color:var(--muted);line-height:1.5;word-break:keep-all}
.grow .gbar{display:flex;gap:3px}
.grow .gbar i{flex:1;height:5px;border-radius:3px;background:var(--line2)}
.grow .gbar i[data-s="ok"]{background:#167c3c}
.grow .gbar i[data-s="no"]{background:var(--red)}
.grow .gmeta{display:flex;gap:9px;font-size:10px;color:var(--muted2);font-weight:700}
.grow .gmeta span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}

/* 관문 판정 배지 — 「돌린 적 없다」와 「막혔다」가 다른 색이다 */
.gpill{font-size:10px;font-weight:800;border-radius:20px;padding:2px 9px;white-space:nowrap}
.gpill[data-s="ok"]{background:#ecfdf5;color:#047857}
.gpill[data-s="bad"]{background:#fef2f2;color:#b91c1c}
.gpill[data-s="warn"]{background:#fef3c7;color:#92400e}
.gpill[data-s="run"]{background:#eef4fa;color:var(--navy)}
.gpill[data-s="wait"]{background:var(--soft);color:var(--muted)}


/* 2열 · 논문 조각 목록 */
.snp-list{list-style:none;margin:0;padding:0}
.snp{margin-bottom:4px}
.snp>button{width:100%;display:flex;align-items:flex-start;gap:8px;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;cursor:pointer;font-family:inherit;
  transition:.12s}
.snp>button:hover{border-color:#c7d3e2}
.snp .kd{flex:0 0 auto;font-size:9.5px;font-weight:800;color:var(--navy);background:#eef4fa;
  border-radius:4px;padding:1px 5px;margin-top:1px;white-space:nowrap}
.snp .tx{flex:1;min-width:0}
.snp .tx b{display:block;font-size:11.5px;font-weight:700;word-break:break-all}
.snp .tx .d{display:block;font-size:10px;color:var(--muted);margin-top:1px;line-height:1.5;
  word-break:keep-all}
.snp .mk{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--line2)}
.snp.on>button{background:var(--soft)}
.snp.on .mk{color:#167c3c}
.snp.now>button{border-color:var(--accent);background:var(--accent-subtle)}
.snp.now .mk{color:var(--accent)}

/* 2열 · 자료 확인 묶음 (참조 앱의 .cgrp 규칙을 잇는다) */
.cgrp{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:7px;background:#fff}
.cgrp.on{background:var(--soft)}
.cgrp-h{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.cgrp-h .no{font-size:9.5px;font-weight:800;color:#fff;background:var(--navy3);border-radius:20px;
  width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto}
.cgrp-h b{font-size:12px;font-weight:800;flex:1;min-width:0}
.cgrp .src{font-size:10px;color:var(--muted);margin-bottom:6px}
.cgrp ul{list-style:none;margin:0;padding:0}
.cgrp li{display:flex;align-items:baseline;gap:6px;font-size:11px;padding:3px 0}
.cgrp li .ck{flex:0 0 auto;font-weight:800;color:var(--line2);width:10px}
.cgrp.on li .ck{color:#167c3c}
.cgrp li .cn{flex:1;min-width:0;color:var(--ink2)}
.cgrp li .cc{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cgrp li .srcpill{font-size:9px;font-weight:800;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:0 5px;white-space:nowrap}

/* 2열 · 접수 항목 (참조 앱의 .ipn 규칙을 잇는다) */
.ipn-r{display:flex;align-items:flex-start;gap:7px;padding:7px 0;border-bottom:1px solid var(--line2)}
.ipn-r:last-of-type{border-bottom:none}
.ipn-r .ck{flex:0 0 auto;font-weight:800;color:var(--line2);width:11px}
.ipn-r.on .ck{color:#167c3c}
.ipn-r .tx{flex:1;min-width:0}
.ipn-r .tx b{display:block;font-size:11.5px;font-weight:700}
.ipn-r .tx .d{display:block;font-size:10px;color:var(--muted);margin-top:1px;line-height:1.5}
.ipn-r .vv{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--navy);
  font-variant-numeric:tabular-nums}
.ipn-n{font-size:10.5px;color:var(--muted);line-height:1.6;margin-top:10px;padding-top:9px;
  border-top:1px dashed var(--line);word-break:keep-all}

/* 팀 모달 */
.team-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}
@media(max-width:820px){.team-grid{grid-template-columns:1fr}}
.team-sec h4{font-size:11px;font-weight:800;color:var(--muted);margin:0 0 9px;letter-spacing:.2px}
.person{display:flex;align-items:center;gap:9px;padding:6px 0}
.person .avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:11px;font-weight:800;flex:0 0 auto}
.person .pn{flex:1;min-width:0}
.person .pn b{display:block;font-size:12.5px;font-weight:700}
.person .pn span{display:block;font-size:10.5px;color:var(--muted)}
.person .dot{width:7px;height:7px;border-radius:50%;background:var(--line2);flex:0 0 auto}
.person .dot.on{background:#22c55e}
.person .dot.away{background:var(--gold)}
.agent-card{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px}
.agent-card.primary{border-color:var(--accent);background:var(--accent-subtle)}
.agent-card .at{display:flex;align-items:center;gap:8px}
.agent-card .em{font-size:16px;flex:0 0 auto}
.agent-card .an{flex:1;min-width:0}
.agent-card .an b{display:block;font-size:12.5px;font-weight:800}
.agent-card .an span{display:block;font-size:10.5px;color:var(--muted)}
.agent-card .stat{font-size:9.5px;font-weight:800;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:1px 7px;white-space:nowrap}
.agent-card .stat.run{background:#eef4fa;color:var(--navy);border-color:#cfe0f0}
.agent-card .stat.done{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.agent-card .ad{font-size:11px;color:var(--ink2);line-height:1.7;margin-top:7px;word-break:keep-all}
.agent-card .askills{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.agent-card .askill{font-size:9.5px;font-weight:700;color:var(--muted);background:var(--soft);
  border:1px solid var(--line);border-radius:20px;padding:1px 7px}


/* 입력 상자의 바닥 줄 — **착수 버튼이 오른쪽 끝에 붙는다.** 형제 앱의 `.ik-bar`
   와 같은 자리다. 머리글에 두면 글을 쓰는 자리와 열 하나만큼 떨어진다. */
.ibox .ib-f .btn.primary{margin-left:auto}

/* ============================================================
   실물 · 시연 표시 — 머리글마다 붙는다

   **둘이 같은 모양이면 사람은 가를 수 없다.** 표를 올려 착수한 사람이 「실제 파일로
   도는지 목업인지 구분이 안 된다」고 신고했고, 그때 실제로 시연이 돌고 있었다.
   ============================================================ */
.mode{font-size:10px;font-weight:800;border-radius:20px;padding:2px 9px;white-space:nowrap;
  border:1px solid transparent;letter-spacing:.1px}
.mode[data-m="live"]{background:var(--success-subtle);color:#0f6b33;border-color:#bfe3cd}
.mode[data-m="used"]{background:#eef4fa;color:#1d4f86;border-color:#cfe0f0}
.mode[data-m="busy"]{background:var(--accent-subtle);color:var(--accent-text);border-color:var(--accent-border)}
.mode[data-m="demo"]{background:var(--warning-subtle);color:var(--warning);border-color:#f3d9b1}
.ws-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
@media(max-width:1100px){.ws-mode{grid-template-columns:1fr}}
.ws-mode .m{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fff;
  display:flex;flex-direction:column;gap:5px}
.ws-mode .m b{font-size:12px;font-weight:800}
.ws-mode .m span{font-size:11px;color:var(--muted);line-height:1.65;word-break:keep-all}
.ws-mode .m[data-m="demo"]{border-left:3px solid #e2b36b}
.ws-mode .m[data-m="live"]{border-left:3px solid var(--success)}
.ws-mode .m .btn{align-self:flex-start;margin-top:3px}

/* 단계 상태 — 실물 학습 전의 「미리보기 · 확인 필요」와 「확인함」 */
.stg.rv>button{border-color:#f3d9b1;background:#fffaf1}
.stg.rv .mk{color:var(--warning)}
.sd-chip.review{background:#fffaf1;color:var(--warning);border-color:#f3d9b1}
.sd-chip.checked{background:var(--success-subtle);color:#0f6b33;border-color:#bfe3cd}
.dag-n.review{border-color:#f3d9b1;background:#fffaf1}
.dag-n.review .dn-d{background:#e2b36b}
.dag-n.checked{background:#fff}
.dag-n.checked .dn-d{background:var(--success)}
.sd-st[data-s="review"]{background:#fffaf1;color:var(--warning);border-color:#f3d9b1}
.sd-st[data-s="checked"]{background:var(--success-subtle);color:#0f6b33;border-color:#bfe3cd}

/* ============================================================
   단계 화면 — 가운데(이 표로 나온 것) · 오른쪽(선택 옵션과 설정)
   목업(`shot-6-stage-02.png`)의 2단 구성이다.
   ============================================================ */
.scr{border-color:#d9dde6}
.scr-g{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media(max-width:1300px){.scr-g{grid-template-columns:1fr}}
.scr-c{min-width:0}
.scr-r{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.scr-rh{font-size:10px;font-weight:800;color:var(--muted2);letter-spacing:.2px;margin-bottom:8px}
.scr-fd{margin-bottom:11px}
.scr-fd>label{display:block;font-size:10.5px;font-weight:800;color:var(--ink2);margin-bottom:4px}
.scr-fd .nt{display:block;font-size:10px;color:var(--muted);line-height:1.6;margin-top:4px;word-break:keep-all}
.scr-fd .nt code{font-family:var(--mono);font-size:9.5px}
.scr-fd.lock>label{color:var(--muted)}
.scr-in{width:100%;font-family:inherit;font-size:11.5px;padding:5px 7px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--ink)}
.scr-in:disabled{background:var(--soft);color:var(--muted)}
.scr-range{display:flex;align-items:center;gap:8px}
.scr-range input{flex:1}
.scr-range b{font-size:12px;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.scr-ck{display:flex;align-items:baseline;gap:6px;font-size:11.5px;padding:3px 0;cursor:pointer}
.scr-ck input{flex:0 0 auto;margin:0}
.scr-ck .src{margin-left:auto;font-size:9.5px;color:var(--muted2);font-weight:700;white-space:nowrap}
.scr-ck.lock{color:var(--muted);cursor:default}
.scr-ck code{font-family:var(--mono);font-size:10.5px}
.scr-cks{display:flex;flex-direction:column}
.scr-list{max-height:200px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:4px 8px}
.scr-radio label{display:block;font-size:11.5px;padding:2px 0}
.scr-radio label.lock{color:var(--muted)}
.scr-radio .nt{display:block;margin-left:18px}
.scr-mods{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.scr-mod{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.scr-mod.on{border-color:var(--accent-border);box-shadow:inset 3px 0 0 var(--accent)}
.scr-mod.lock{background:transparent;border-style:dashed}
.scr-mod .why{display:block;font-size:10px;color:var(--muted);line-height:1.55;margin-top:1px;word-break:keep-all}
.scr-pp{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line2)}
.scr-pp .scr-fd{margin-bottom:6px}
.scr-act{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center;
  padding-top:10px;border-top:1px solid var(--line)}
.scr-lock{flex:1 1 100%;font-size:10.5px;color:var(--muted);line-height:1.6;word-break:keep-all}
.scr-none{display:flex;flex-direction:column;gap:4px;font-size:11.5px;line-height:1.7;color:var(--ink2)}
.scr-none b{font-size:12.5px}
.scr-none span{color:var(--muted);word-break:keep-all}
.scr-err{border:1px solid var(--danger-border);background:var(--danger-subtle);border-radius:9px;
  padding:9px 12px;margin-bottom:10px;font-size:11.5px;line-height:1.6}
.scr-err b{display:block;color:var(--danger);font-weight:800}
.scr-err span{display:block;color:var(--ink2);word-break:break-all;font-family:var(--mono);font-size:10.5px}
.scr-dirty{border:1px dashed #e2b36b;background:#fffaf1;border-radius:9px;padding:7px 11px;margin-bottom:10px;
  font-size:11px;color:var(--warning)}
.scr-tag{font-size:9.5px;font-weight:800;color:var(--accent-text);background:var(--accent-subtle);
  border:1px solid var(--accent-border);border-radius:20px;padding:0 6px;margin-left:4px;white-space:nowrap}
.scr-files{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.scr-f{display:flex;flex-direction:column;gap:1px;text-align:left;border:1px solid var(--line);background:#fff;
  border-radius:8px;padding:6px 9px;cursor:pointer;font-family:inherit;min-width:0;max-width:100%}
.scr-f b{font-size:11px;font-weight:800;word-break:break-all}
.scr-f span{font-size:9.5px;color:var(--muted)}
.scr-f.sel{border-color:var(--navy);box-shadow:0 0 0 2px rgba(74,29,56,.12)}
.scr-pv{overflow:auto;max-height:260px;border:1px solid var(--line);border-radius:8px;margin-top:4px}
table.tb.mini{font-size:10.5px}
table.tb.mini th,table.tb.mini td{padding:4px 7px;white-space:nowrap;font-variant-numeric:tabular-nums}
table.tb.kv td:first-child{color:var(--muted);font-size:11px;white-space:nowrap;width:1%}
table.tb.kv td.n{text-align:left;white-space:normal}
table.tb.kv code,table.tb code{font-family:var(--mono);font-size:10.5px}
table.tb tr.sel td{background:#f6f2f5}
.scr-curve{display:flex;align-items:flex-end;gap:5px;padding:8px 2px 0;height:96px}
.scr-curve .cv-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;color:var(--muted)}
.scr-curve .cv-b i{display:block;width:100%;max-width:28px;background:var(--line2);border-radius:3px 3px 0 0}
.scr-curve .cv-b.on i{background:var(--accent)}
.scr-curve .cv-b.on span{color:var(--accent-text);font-weight:800}
.scr-curve .cv-b em{font-style:normal;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}

/* ============================================================
   논문 조각 — 누르면 본문이 펼쳐진다
   ============================================================ */
.snp.sel>button{border-color:var(--navy);box-shadow:0 0 0 2px rgba(74,29,56,.12)}
.snp.mini>button{padding:4px 8px}
.snp.mini .tx b{font-size:10.5px;font-weight:600;font-family:var(--mono)}
.snp-g{margin-bottom:6px}
.snp-gh{font-size:10px;font-weight:800;color:var(--ink2);padding:4px 2px}
.snp-gh span{color:var(--muted2);margin-left:3px}
pre.snip.big{max-height:none;font-size:11px}
.sn-open .card-h .rt{display:flex;gap:6px;align-items:center}
.fig-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.fig-c{margin:0;border:1px solid var(--line);border-radius:9px;padding:8px;background:#fff}
.fig-c img{display:block;width:100%;height:auto;border-radius:5px}
.fig-c figcaption{font-size:10.5px;color:var(--muted);margin-top:6px;word-break:break-all}
.fig-c figcaption b{font-family:var(--mono);color:var(--ink2);font-weight:700}
.fig-none{font-size:10.5px;color:var(--muted);border:1px dashed var(--line);border-radius:6px;padding:26px 10px;
  text-align:center;line-height:1.6;word-break:keep-all}

/* ============================================================
   1열 아래 — 서비스 소개 셋. 셸(`chrome.css`)은 참조 앱과 바이트까지 같아야
   하므로 형제 앱이 셸에 둔 `.std-chip` 을 이 앱은 여기 든다.
   ============================================================ */
a.std-chip {
  display: block; margin-top: 6px; padding: 7px 8px; border-radius: var(--r-6);
  background: var(--accent-subtle); border: 1px solid var(--accent-border);
  text-decoration: none; color: inherit;
}
a.std-chip:hover { background: #f6e1ec; }
a.std-chip b { display: block; font-size: var(--fs-11); font-weight: 650; color: var(--accent-text); }
a.std-chip span { display: block; font-size: var(--fs-10); color: var(--text-2); margin-top: 1px; }
.intro-media { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.intro-media a {
  display: block; padding: 5px 6px; border-radius: var(--r-6); text-align: center; text-decoration: none;
  font-size: var(--fs-10); font-weight: 600; color: var(--accent-text);
  background: var(--accent-subtle); border: 1px solid var(--accent-border); white-space: nowrap;
}
.intro-media a:hover { background: #f6e1ec; }