@qualisoft/ai-skills 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # 변경 이력
 
+## 1.4.1 — 2026-09-14
+
+`비활성 관리` 를 켰을 때 체크박스가 상태 점에 붙어 보이던 것을 고쳤습니다.
+
+체크박스를 절대 배치해서 상태 점과 **1px 겹쳐 있었습니다.**
+
+```
+체크박스  left 7px  + 폭 12  →  7 ~ 19
+상태 점   left 18px + 폭 5   →  18 ~ 23   ← 겹침
+```
+
+행은 이미 `flex` + `gap:8px` 이므로, 체크박스를 절대 배치하지 않고 **흐름 안에
+두면 간격이 저절로 맞습니다.** 절대 배치와 `padding-left` 로 억지로 맞추던 것을
+걷어냈습니다.
+
+체크박스가 없는 행(홈 · 가이드 · 추적성 매트릭스)도 같은 만큼 밀어 주어, 관리
+모드에서 왼쪽 끝이 들쭉날쭉하지 않습니다. 어느 행에 체크박스가 있는지는 JS 가
+`has-check` 클래스로 표시합니다 — `:has()` 선택자에 기대지 않아 브라우저를 가리지
+않습니다.
+
+곁들여: 체크박스 12px → 13px, 관리 모드에서 행 hover 표시, 상단 관리 줄 여백 정리.
+
+### 검증
+
+```
+체크박스 16~29 · 상태 점 37~42 · 이름표 50~
+간격 8px 균일 · 겹침 없음
+체크박스 없는 행과 점·이름표 좌표 일치 (37 / 50)
+모드 해제 시 원래 정렬로 복귀 (16 / 16)
+```
+
+
 ## 1.4.0 — 2026-09-14
 
 대본을 **고객 송부용**으로 다시 세웠습니다. 세 가지 문제를 고쳤습니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qualisoft/ai-skills",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "기획 인터뷰부터 문서 체계·디자인 시안·구현까지 이어지는 AI 에이전트 스킬 5종. Claude Code · Codex · Gemini 등 어느 도구에서나 쓴다. 외부 의존성 없음.",
   "keywords": [
     "ai-skills",

package/skills/project-init/build.mjs

@@ -1889,15 +1889,21 @@ const CSS = `
   background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.22)}
 .nav-item.unused .nav-label{color:var(--tx-faint)}
 .nav-item.unused:hover .nav-label{color:var(--tx-dim)}
-/* 관리 모드 */
-body.inactive-mode .nav-item{position:relative; padding-left:30px}
-body.inactive-mode .nav-item .nav-dot{position:absolute; left:18px}
-.nav-check{position:absolute; left:7px; top:50%; transform:translateY(-50%);
-  width:12px; height:12px; margin:0; cursor:pointer; accent-color:var(--accent);
-  display:none}
+/* 관리 모드
+ *
+ * 체크박스를 절대 배치하면 상태 점과 겹친다(7~19 vs 18~23). 행은 이미
+ * flex + gap 이므로 흐름 안에 두면 간격이 저절로 맞는다. */
+.nav-check{display:none; flex:none; width:13px; height:13px; margin:0;
+  cursor:pointer; accent-color:var(--accent)}
 body.inactive-mode .nav-check{display:block}
+/* 체크박스가 없는 행(홈·가이드·추적성)도 왼쪽을 맞춘다.
+ * 8 + 13 + 8 = 29 — 체크박스가 차지하는 폭만큼 밀어 준다. */
+body.inactive-mode .nav-item{padding-left:29px}
+body.inactive-mode .nav-item.has-check{padding-left:8px}
+body.inactive-mode .nav-item:hover{background:var(--hover)}
 body.inactive-mode .nav-tools{background:var(--hover); border-radius:7px;
-  margin:0 6px 6px; padding:6px 8px}
+  margin:0 6px 8px; padding:7px 9px}
+body.inactive-mode .nav-toggle{color:var(--tx)}
 html{-webkit-text-size-adjust:100%}
 body{
   margin:0; background:var(--bg); color:var(--tx);
@@ -2300,6 +2306,7 @@ const JS = `
       cb.className = 'nav-check';
       cb.title = '비활성으로 표시';
       item.insertBefore(cb, item.firstChild);
+      item.classList.add('has-check');
     });
 
     /* 체크박스가 <a> 안에 있어 클릭이 그대로 두면 문서 이동까지 간다.