axmap-cli 1.3.2 → 1.4.0

package/app/web/shell.css

@@ -1,538 +0,0 @@
-/*
-  새 껍데기의 스타일.
-
-  🔴 `style.css` 와 **따로 둔다.** 그쪽은 기존 화면(`/classic`)의 것이고
-  검은 배경에 밀도 높은 목록을 전제로 짜여 있다. 한 파일에 두 방향을 담으면
-  한쪽을 고칠 때마다 다른 쪽이 깨진다.
-
-  이 화면의 방향은 하나다 — **여백**. 기능을 덜어낸 자리를 다시 채우지 않는다.
-*/
-
-/**
- * 색과 치수는 Claude 브랜드 토큰에서 가져왔다.
- * 출처: github.com/ricocc/brands-design-md · brands/claude/variables.css
- *
- * 눈으로 고른 값이 아니라 **출처가 있는 값**이라는 것이 요점이다.
- * 고칠 일이 생기면 여기서 고치고, 쓰는 쪽은 토큰 이름만 쓴다 —
- * 하드코딩된 색이 한 곳이라도 남으면 다음에 바꿀 때 그것만 안 바뀐다.
- */
-:root {
-  --bg: #faf9f5;            /* canvas */
-  --side: #f5f0e8;          /* surface-soft */
-  --card: #efe9de;          /* surface-card */
-  --ink: #141413;           /* ink — 제목 */
-  --ink2: #6c6a64;          /* muted */
-  --ink3: #8e8b82;          /* muted-soft */
-  --line: #e6dfd8;          /* hairline */
-  --hover: #efe9de;
-  --accent: #cc785c;        /* primary */
-  --accent-down: #a9583e;   /* primary-active */
-  --accent-tint: #f7ede8;   /* primary 를 canvas 위에 옅게 깐 것 */
-  --warn: #c64545;          /* error */
-  --on-accent: #ffffff;     /* on-primary — 주황 위에 얹는 글자 */
-
-  --r-sm: 6px;
-  --r-md: 8px;
-  --r-lg: 12px;
-  --r-xl: 16px;
-
-  --mono: "JetBrains Mono", "Cascadia Mono", "D2Coding", Consolas, monospace;
-  /**
-   * 🔴 브랜드의 표시용 세리프(Copernicus · Tiempos Headline)는 **안 쓴다.**
-   *
-   * 이 화면은 한국어가 먼저다. 그 서체들은 한글 글리프가 없어서 제목의 한글만
-   * 시스템 서체로 떨어지고, 그러면 한 줄 안에서 라틴과 한글의 인상이 갈린다.
-   * 색은 브랜드를 따르되 서체는 한글이 읽히는 쪽을 고른다.
-   */
-  --ui: "Pretendard", "StyreneB", Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
-}
-
-* { box-sizing: border-box; }
-
-/**
- * 🔴 hidden 속성이 항상 이기게 한다.
- *
- * hidden 은 UA 스타일시트의 display:none 으로 동작하는데, 우리가 그 요소에
- * display:flex 를 직접 주면 **작성자 스타일이 이겨서 안 숨는다.**
- *
- * 실제로 #onboard 가 그랬다 — hidden = true 를 줘도 온보딩이 화면을 덮은 채
- * 남아 있었고, 자바스크립트는 아무 오류도 내지 않았다. 눌러 보기 전에는
- * 알 방법이 없는 종류의 실패다.
- */
-[hidden] { display: none !important; }
-
-html, body {
-  height: 100%; margin: 0;
-  background: var(--bg); color: var(--ink);
-  font: 14px/1.6 var(--ui);
-  -webkit-font-smoothing: antialiased;
-}
-
-button { font: inherit; cursor: pointer; }
-
-#app { display: flex; height: 100%; }
-
-/* 분할선 — 평소에는 보이지 않고 잡을 때만 드러난다 */
-.gut { width: 1px; flex: none; background: var(--line); cursor: col-resize; position: relative; }
-.gut::after { content: ''; position: absolute; inset: 0 -3px; }
-.gut:hover { background: var(--ink3); }
-
-/* ── 왼쪽 ──────────────────────────────────────────────────────────────── */
-
-#side {
-  width: 260px; min-width: 200px; flex: none;
-  background: var(--side);
-  display: flex; flex-direction: column;
-  padding: 10px;
-}
-
-#tabs { display: flex; gap: 4px; margin-bottom: 14px; }
-.tab {
-  flex: 1; padding: 7px 0; border: 0; border-radius: 8px;
-  background: transparent; color: var(--ink2); font-size: 13px;
-}
-.tab:hover { background: var(--hover); color: var(--ink); }
-.tab.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
-
-#new {
-  display: flex; align-items: center; gap: 10px; width: 100%;
-  padding: 8px 10px; margin-bottom: 22px;
-  border: 0; border-radius: 8px; background: transparent;
-  color: var(--ink); font-size: 14px; text-align: left;
-}
-#new:hover { background: var(--hover); }
-#new span { flex: 1; }
-
-.sec {
-  font-size: 12px; color: var(--ink3);
-  padding: 0 10px 8px;
-}
-
-#chats { flex: 1; overflow: auto; margin: 0 -4px; }
-.chat {
-  display: flex; align-items: center; gap: 9px;
-  padding: 7px 10px; border-radius: 8px;
-  font-size: 13px; color: var(--ink2);
-  overflow: hidden; white-space: nowrap;
-}
-.chat:hover { background: var(--hover); color: var(--ink); }
-.chat.on { background: var(--hover); color: var(--ink); }
-.chat .dot {
-  width: 5px; height: 5px; border-radius: 50%; flex: none;
-  border: 1px solid var(--ink3);
-}
-.chat.run .dot { background: var(--accent); border-color: var(--accent); }
-.chat.err .dot { background: var(--warn); border-color: var(--warn); }
-.chat .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
-.chat .n { font: 10px var(--mono); color: var(--accent); flex: none; }
-.empty { padding: 4px 10px; font-size: 12px; color: var(--ink3); }
-
-#foot {
-  border-top: 1px solid var(--line);
-  padding: 10px 10px 2px; margin-top: 8px;
-  display: flex; flex-direction: column; gap: 2px;
-  font-size: 11px; color: var(--ink3);
-}
-#foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* ── 가운데 ────────────────────────────────────────────────────────────── */
-
-/*
-  🔴 지금은 비어 있다. 그래프가 들어올 자리다.
-
-  기존 화면의 캔버스를 그대로 옮겨 오지 않은 이유: 그 렌더러는 검은 배경을
-  전제로 색을 고른다(`graph.js` 의 명암·안개). 밝은 바탕에 그대로 얹으면
-  읽히지 않는다. 옮길 때 색 채널을 다시 정하고 옮긴다.
-*/
-#center { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
-#stage { color: var(--ink3); font-size: 12px; }
-
-/* ── 오른쪽 · 대화 ─────────────────────────────────────────────────────── */
-
-#chat {
-  width: 520px; min-width: 360px; flex: none;
-  display: flex; flex-direction: column; min-height: 0;
-}
-
-#head {
-  flex: none; display: flex; align-items: center; gap: 10px;
-  padding: 14px 22px 6px; font-size: 13px; color: var(--ink2);
-  min-height: 42px;
-}
-#title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#stop {
-  border: 1px solid var(--line); background: var(--bg); color: var(--ink2);
-  border-radius: 7px; padding: 3px 10px; font-size: 12px;
-}
-#stop:hover { color: var(--warn); border-color: var(--warn); }
-
-#touched {
-  flex: none; margin: 0 22px 10px; padding: 9px 12px;
-  border: 1px solid var(--line); border-radius: 10px;
-  font-size: 12px; color: var(--ink2); background: var(--bg);
-}
-#touched b { color: var(--ink); font-weight: 600; }
-#touched .f {
-  display: block; font: 11px var(--mono); color: var(--ink);
-  padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-
-#thread {
-  flex: 1; overflow: auto; padding: 6px 22px 10px;
-  display: flex; flex-direction: column; gap: 16px;
-}
-#thread:empty { flex: 0; padding: 0; }
-
-/* 대화가 없을 때 — 인사말과 입력창이 칸 가운데에 뜬다 */
-#tail { flex: 0; }
-#chat.blank #tail { flex: 1; }
-
-/* 대화가 없을 때의 인사. 스크린샷의 가운데 그 화면이다. */
-#hello {
-  flex: 1; display: flex; flex-direction: column;
-  align-items: center; justify-content: flex-end;
-  padding-bottom: 26px; gap: 14px;
-}
-#hello .mark { color: var(--accent); font-size: 26px; line-height: 1; }
-#hello h1 { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -.01em; }
-
-.msg { font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
-.msg.user {
-  align-self: flex-end; max-width: 85%;
-  background: var(--side); padding: 10px 15px; border-radius: 16px 16px 4px 16px;
-}
-.msg.assistant { align-self: flex-start; }
-.msg.error {
-  align-self: flex-start; color: var(--warn); font-size: 13px;
-  border-left: 2px solid var(--warn); padding-left: 10px;
-}
-.msg.note { align-self: center; color: var(--ink3); font-size: 12px; }
-
-/* 도구 한 줄 — 대화가 아니라 **행동**이라 다르게 그린다 */
-.msg.tool {
-  align-self: flex-start; display: flex; gap: 8px; align-items: baseline;
-  font: 11px/1.5 var(--mono); color: var(--ink3); max-width: 100%;
-}
-.msg.tool .t { flex: none; }
-.msg.tool .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.msg.tool.edits .t { color: var(--accent); }
-.msg.tool.edits .a { color: var(--ink); }
-
-/* 계측·잡음은 버리지 않고 접어 둔다 */
-details.msg { align-self: flex-start; max-width: 100%; }
-details.msg summary { font-size: 11px; color: var(--ink3); cursor: pointer; list-style: none; }
-details.msg pre {
-  font: 11px var(--mono); color: var(--ink2); white-space: pre-wrap;
-  word-break: break-all; margin: 6px 0 0;
-}
-
-.think { align-self: flex-start; color: var(--ink3); font-size: 13px; }
-.think::after { content: ''; animation: d 1.4s steps(4, end) infinite; }
-@keyframes d { 0% { content: '' } 25% { content: '.' } 50% { content: '..' } 75% { content: '...' } }
-
-/* ── 입력 ──────────────────────────────────────────────────────────────── */
-
-#composer {
-  flex: none; margin: 0 22px 22px; padding: 14px 14px 10px;
-  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg);
-  box-shadow: 0 1px 3px rgba(0,0,0,.04);
-}
-#composer:focus-within { border-color: var(--ink3); }
-#input {
-  width: 100%; border: 0; outline: none; resize: none; background: transparent;
-  font: 14px/1.6 var(--ui); color: var(--ink); max-height: 200px;
-}
-#input::placeholder { color: var(--ink3); }
-#composer .row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
-#note { flex: 1; font-size: 11px; color: var(--ink3); }
-#send {
-  flex: none; width: 30px; height: 30px; border-radius: 9px; border: 0;
-  background: var(--accent); color: var(--on-accent); font-size: 14px;
-}
-#send:hover { background: var(--accent-down); }
-#send:disabled { background: var(--line); color: var(--ink3); cursor: default; }
-
-/* ══ 창 테두리 = 툴바 ═══════════════════════════════════════════════════════
-
-   🔴 이 줄은 **새로 만든 줄이 아니라 창의 제목표시줄**이다 (`frame: false`).
-
-   그래서 높이를 32px 로 낮추고 아래 테두리를 없앴다. 사이드바와 같은 색이라
-   왼쪽 위 모서리가 한 덩어리로 이어져 보인다 — 띠가 하나 더 얹힌 것처럼
-   보이면 그 줄은 낭비다.
-
-   빈 곳은 끌어서 창을 옮길 수 있어야 하고(`app-region: drag`), 버튼은 반대로
-   끌기에서 빼야 한다 — 안 빼면 눌리지 않는다. 실제로 그렇게 안 눌렸다.
-   ────────────────────────────────────────────────────────────────────────── */
-
-body { display: flex; flex-direction: column; }
-
-#bar {
-  flex: none; display: flex; align-items: center; gap: 2px;
-  height: 32px; padding-left: 6px;
-  background: var(--side);
-  -webkit-app-region: drag;
-  user-select: none;
-}
-
-/* 아이콘 단추 — 인라인 SVG. 아이콘 글꼴도 이미지도 안 쓴다 */
-.ico {
-  -webkit-app-region: no-drag;
-  display: grid; place-items: center;
-  width: 30px; height: 26px; padding: 0;
-  border: 0; border-radius: var(--r-sm); background: transparent;
-  color: var(--ink2);
-}
-.ico:hover, .ico.open { background: var(--hover); color: var(--ink); }
-.ico svg {
-  width: 16px; height: 16px;
-  fill: none; stroke: currentColor; stroke-width: 1.4;
-  stroke-linecap: round; stroke-linejoin: round;
-}
-/* 폴더는 채워야 폴더로 읽힌다 */
-#openrepo svg { fill: currentColor; fill-opacity: .13; }
-
-/*
-  지금 보고 있는 저장소. 창 제목이 놓이는 자리이고, **글자로 남긴 유일한 것**이다.
-  VS Code 가 여기에 파일 이름을 두는 것과 같은 이유 — 창 제목은 "무엇을 보고 있나" 다.
-*/
-#where {
-  flex: 1; text-align: center; font-size: 11px; color: var(--ink3);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  padding: 0 12px;
-}
-
-#wctl { display: flex; -webkit-app-region: no-drag; }
-#wctl button {
-  display: grid; place-items: center;
-  width: 44px; height: 32px; border: 0; background: transparent; color: var(--ink2);
-}
-#wctl svg {
-  width: 12px; height: 12px;
-  fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round;
-}
-#wctl button:hover { background: var(--hover); color: var(--ink); }
-#wctl button[data-win="close"]:hover { background: var(--warn); color: var(--on-accent); }
-
-/* 메뉴 펼침 */
-#drop {
-  position: fixed; z-index: 40; min-width: 220px; padding: 5px;
-  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
-  box-shadow: 0 8px 24px rgba(0,0,0,.12);
-}
-#drop button {
-  display: flex; width: 100%; align-items: center; gap: 10px;
-  border: 0; background: transparent; color: var(--ink);
-  font-size: 13px; padding: 7px 10px; border-radius: var(--r-sm); text-align: left;
-}
-#drop button:hover { background: var(--hover); }
-#drop button:disabled { color: var(--ink3); }
-#drop .k { margin-left: auto; font: 10px var(--mono); color: var(--ink3); }
-#drop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 2px; }
-
-#app { flex: 1; min-height: 0; }
-
-/* 사이드바 접기 — 가운데 칸에 자리를 준다 */
-body.no-side #side,
-body.no-side .gut[data-pane="side"] { display: none; }
-
-/* ══ 처음 오는 사람 ═════════════════════════════════════════════════════════ */
-
-#onboard {
-  position: fixed; inset: 0; z-index: 60;
-  background: var(--bg);
-  display: flex; align-items: center; justify-content: center;
-  padding: 24px;
-}
-#onboard .card { width: 100%; max-width: 460px; text-align: center; }
-#onboard .mark { color: var(--accent); font-size: 26px; margin-bottom: 12px; }
-#onboard h2 { margin: 0 0 8px; font-size: 24px; font-weight: 400; }
-#onboard p { margin: 0 0 22px; font-size: 13px; color: var(--ink2); line-height: 1.8; }
-
-.steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 26px; }
-.steps i { width: 22px; height: 3px; border-radius: 2px; background: var(--line); }
-.steps i.on { background: var(--accent); }
-
-/* CLI 고르기 — 설치·로그인 상태를 카드에 그대로 적는다 */
-#picks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
-.pick {
-  display: flex; align-items: center; gap: 12px; width: 100%;
-  padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;
-  background: var(--bg); text-align: left;
-}
-.pick:hover:not(:disabled) { border-color: var(--ink3); }
-.pick.on { border-color: var(--accent); background: var(--accent-tint); }
-.pick:disabled { opacity: .5; cursor: default; }
-.pick .nm { flex: 1; font-size: 14px; color: var(--ink); }
-.pick .st { font-size: 11px; color: var(--ink3); }
-.pick .st.ok { color: var(--accent); }
-.pick .st.warn { color: #a8742a; }
-
-.open { display: flex; gap: 8px; margin-bottom: 12px; }
-#url {
-  flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
-  font: 13px var(--ui); color: var(--ink); outline: none; background: var(--bg);
-}
-#url:focus { border-color: var(--ink3); }
-#go, #s1next {
-  padding: 11px 20px; border: 0; border-radius: 11px;
-  background: var(--accent); color: var(--on-accent); font-size: 13px;
-}
-#go:disabled, #s1next:disabled { background: var(--line); color: var(--ink3); cursor: default; }
-#pick {
-  width: 100%; padding: 11px; margin-bottom: 12px;
-  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
-  color: var(--ink2); font-size: 13px;
-}
-#pick:hover { border-color: var(--ink3); color: var(--ink); }
-
-#omsg { min-height: 20px; font-size: 12px; color: var(--ink2); margin-bottom: 14px; }
-#omsg.err { color: var(--warn); }
-
-.act { display: flex; gap: 8px; justify-content: center; align-items: center; }
-.ghost {
-  border: 0; background: transparent; color: var(--ink3);
-  font-size: 12px; padding: 8px 10px; border-radius: 8px;
-}
-.ghost:hover { background: var(--hover); color: var(--ink2); }
-
-/* ══ 모달 ═══════════════════════════════════════════════════════════════════
-   처음 오는 사람에게는 화면 전체를 쓰고, 그 뒤 `저장소 열기` 로 부를 때는
-   모달로 뜬다. 같은 markup 을 쓰되 겉모습만 바꾼다 — 두 벌을 만들면
-   한쪽만 고쳐서 어긋난다.
-   ────────────────────────────────────────────────────────────────────────── */
-
-#onboard.as-modal { background: rgba(20, 20, 19, .34); }
-#onboard.as-modal .card {
-  background: var(--bg);
-  border: 1px solid var(--line);
-  border-radius: var(--r-xl);
-  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
-  padding: 34px 34px 26px;
-  max-width: 480px;
-}
-/* 모달일 때는 걸음 표시가 뜻이 없다 — 한 걸음짜리다 */
-#onboard.as-modal .steps { display: none; }
-
-#oclose {
-  position: absolute; top: 14px; right: 16px;
-  border: 0; background: transparent; color: var(--ink3);
-  font-size: 15px; line-height: 1; padding: 6px 8px; border-radius: var(--r-sm);
-}
-#oclose:hover { background: var(--hover); color: var(--ink); }
-#onboard:not(.as-modal) #oclose { display: none; }
-#onboard .card { position: relative; }
-
-/* ══ 가운데 칸 — ladder 를 번호 카드로 ══════════════════════════════════════
-   조판 규율은 Zap 편집기에서 가져왔다. 실측값과 근거는 stage.js 머리말과
-   docs/RESEARCH-FLOWCANVAS.md 1.1 에 있다.
-   ────────────────────────────────────────────────────────────────────────── */
-
-#center { flex: 1; min-width: 0; display: block; overflow: auto; }
-
-#stage { position: relative; padding: 22px 26px 40px; min-height: 100%; }
-#stage.loading, #stage.note {
-  display: flex; align-items: center; justify-content: center;
-  color: var(--ink3); font-size: 12px; text-align: center; padding: 40px;
-}
-
-/* 선은 카드 아래에 깔린다. 클릭을 막지 않는다. */
-.wires { position: absolute; left: 0; top: 0; pointer-events: none; }
-/*
-  🔴 선이 조용해야 한다. 실측한 Zapier 연결선은 바탕 대비 4.4:1 밖에 안 된다 —
-  주인공은 카드의 글자이고 선은 배경 구조물이라는 선언이다.
-*/
-.w { fill: none; stroke: var(--line); stroke-width: 1.5; }
-
-.board { position: relative; }
-
-/* ── 겹 ─────────────────────────────────────────────────────────────────── */
-
-.layer { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 34px; }
-
-.lhead {
-  flex: none; width: 54px; padding-top: 4px; text-align: right;
-  display: flex; flex-direction: column; gap: 1px;
-}
-.lno { font-size: 12px; color: var(--ink); }
-.lcount { font-size: 10px; color: var(--ink3); }
-
-.cols { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: flex-start; }
-
-/* ── 묶음 ───────────────────────────────────────────────────────────────── */
-
-.grp { display: flex; flex-direction: column; gap: 8px; }
-
-/* 가지 머리의 알약 칩. Zap 편집기가 조건문을 두는 자리에 우리는 디렉터리를 둔다. */
-.chip {
-  display: inline-flex; align-items: baseline; gap: 6px; align-self: flex-start;
-  padding: 3px 10px; border-radius: var(--r-pill, 999px);
-  border: 1px solid var(--line); background: var(--bg);
-  font: 11px var(--mono); color: var(--ink2);
-  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.chip .cn { color: var(--accent); font-size: 10px; }
-
-/* ── 카드 ───────────────────────────────────────────────────────────────── */
-
-/*
-  폭을 고정한다. 실측한 Zapier 카드는 폭:높이 = 4.2:1 이고, 카드 사이 세로 여백이
-  카드 높이보다 크다(1.24배). 그 비율이 이 화면이 빽빽하지 않게 느껴지는 이유다.
-*/
-.card {
-  width: 210px; box-sizing: border-box;
-  padding: 8px 11px 9px;
-  border: 1px solid var(--line); border-radius: var(--r-md);
-  background: var(--bg);
-  position: relative; z-index: 1;
-}
-.card:hover { border-color: var(--ink3); }
-.card.aux { opacity: .62; }
-
-.card .r1 {
-  display: flex; gap: 8px; align-items: baseline;
-  font-size: 10px; color: var(--ink3); margin-bottom: 3px;
-}
-.card .r1 .opens { color: var(--accent); }
-.card .r1 .lines { margin-left: auto; }
-.card .r1 .tag { color: var(--ink3); }
-
-.card .r2 { display: flex; gap: 7px; align-items: baseline; }
-/* 🔴 번호가 이 카드의 정체다. 그림을 안 봐도 이 번호로 서로를 가리킬 수 있다. */
-.card .r2 .no { font: 11px var(--mono); color: var(--ink3); flex: none; }
-.card .r2 .nm {
-  font-size: 13px; color: var(--ink); min-width: 0;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.card .dir {
-  font: 10px var(--mono); color: var(--ink3); padding-top: 2px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-
-.more { font-size: 11px; color: var(--ink3); align-self: center; }
-
-.foot2 {
-  display: flex; flex-wrap: wrap; gap: 14px;
-  padding-top: 8px; border-top: 1px solid var(--line);
-  font-size: 11px; color: var(--ink3);
-}
-/* 자른 것은 잘랐다고 말한다. 조용히 자르면 "이게 전부" 로 읽힌다. */
-.foot2 .warn2 { color: var(--accent); }
-
-/* 프로젝트 고르는 줄 — 모노레포에서 "어디서부터" 의 첫 답이다 */
-.projs {
-  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
-  margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
-}
-.proj {
-  display: inline-flex; align-items: baseline; gap: 7px;
-  padding: 5px 12px; border-radius: var(--r-pill, 999px);
-  border: 1px solid var(--line); background: var(--bg); color: var(--ink2);
-  font-size: 12px;
-}
-.proj:hover { border-color: var(--ink3); color: var(--ink); }
-.proj.on { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
-.proj .pn { font-family: var(--mono); font-size: 11px; }
-.proj .pf { color: var(--accent); font-size: 10px; }
-/* 🔴 선언된 것과 짐작한 것을 눈으로 구분한다 (D5) */
-.proj .guess { color: var(--ink3); font-size: 10px; }
-.pout { font-size: 11px; color: var(--ink3); margin-left: 4px; }