/* Lively Context — DESIGN-GUIDE.md 토큰/컴포넌트/모션 적용 (덱 deck.html 실측 기준) */

/* ── §1 컬러 토큰 ── */
:root {
  /* 베이스 */
  --bg:            #FFFFFF;
  --bg-tint:       #F6FAFF;
  --bg-tint-2:     #EEF5FF;
  --bg-punch:      #EEF4FF;
  --bg-note:       #F0F5FF;
  --bg-success:    #F3FBF8;
  --bg-sel:        #F4F8FF;  /* 선택/키보드 커서 행 배경 (가이드 §4 강조 열) */
  --canvas:        #E6EBF3;

  /* 브랜드 */
  --blue:          #2D6BF0;
  --blue-deep:     #1E54CC;
  --mint:          #16C79A;
  --mint-deep:     #0FA37E;
  --mint-bright:   #36E0A8;
  --teal:          #1BAEB0;
  --coral:         #E4756B;
  --coral-text:    #B84E44; /* 텍스트 전용 코랄 — 백색/틴트 위 4.5:1 이상(에러 카피 가독) */

  /* 텍스트 */
  --ink:           #15233B;
  --ink-sub:       #5A6B85;
  --ink-note:      #2D4A7A;
  --muted:         #8A99B5;
  --muted-2:       #A6B2C8;
  --muted-3:       #C2CCDD;
  --muted-head:    #7A88A3;

  /* 라인/보더 */
  --line:          #E6ECF5;
  --line-row:      #EDF1F8;
  --line-net:      #DCE6F5;
  --line-net-2:    #CFE0F7;
  --line-note:     #D6E4FF;

  /* 네트워크 보조 노드 */
  --node-blue-soft:#9DBDF2;
  --node-mint-soft:#7FE0C4;

  /* 다크(클로징/푸터 액센트 전용 — 기본 배경 금지) */
  --dark-1:        #15233B;
  --dark-2:        #1C3962;
  --dark-sub:      #AEBFD8;
  --dark-foot:     #7C8DA8;
}

/* ── §2 베이스 타이포 ── */
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* display 지정 요소(#gate 등)에서도 hidden 속성이 이기도록 */
html, body { margin: 0; padding: 0; }
body {
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}
b, strong { font-weight: 700; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* §8 포커스 링 */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 스킵 링크 — 포커스 시에만 노출(§8 키보드 탐색) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--bg); color: var(--blue); font-size: 14px; font-weight: 700;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 0 0 11px 0;
}
.skip-link:focus { left: 0; }

/* ── 상단바 ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: 64px; display: flex; align-items: center; gap: 36px;
  padding: 0 24px; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.4px;
}
.wordmark-sub { font-size: 15px; font-weight: 600; color: var(--ink-sub); letter-spacing: 0; }
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
  align-self: center;
  box-shadow: 0 0 0 3px rgba(22, 199, 154, .16);
  animation: breathe 2.8s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22, 199, 154, .18); }
  50%      { box-shadow: 0 0 0 7px rgba(22, 199, 154, .06); }
}
.tabs { display: flex; gap: 4px; height: 100%; margin: 0 auto; }
.tabs a {
  display: flex; align-items: center; padding: 0 16px;
  font-size: 15px; font-weight: 700; color: var(--ink-sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--blue); border-bottom-color: var(--blue); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.sync-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-sub); }
.dot-static { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
/* 마지막 갱신(liveness) — 헤더 우측에서 빼 화면 좌하단 구석에 조용히. 우하단 toasts 와 안 겹침, 클릭은 통과(pointer-events:none). */
.app-foot { position: fixed; left: 16px; bottom: 12px; z-index: 10; pointer-events: none; }
.app-foot .sync-chip { font-size: 11.5px; color: var(--muted-2); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 9px; box-shadow: 0 2px 8px rgba(21, 35, 59, .05); }
/* 우측 상단 보조 유틸 3종 통일 — 같은 알약형(헤어라인 + 무채): [사용 가이드] · [내 프로필] · [로그아웃] */
.help-link, .user-email, .logout-btn {
  display: inline-flex; align-items: center; height: 30px; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted-2);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.help-link { padding: 0 13px; }
.logout-btn { padding: 0 13px; }
.user-email { padding: 0 12px 0 4px; gap: 7px; } /* 왼쪽은 아바타 들어갈 자리라 좁게 */
.help-link:hover, .user-email:hover, .logout-btn:hover { color: var(--ink-sub); border-color: var(--line-net); background: var(--bg-tint); }
.help-link.active { color: var(--ink-sub); border-color: var(--line-net); background: var(--bg-tint); }
/* 상단바 아바타 — 작은 원형 이니셜(배경색은 profileAvatar 가 인라인으로 칠함). */
.topbar-ava { width: 22px; height: 22px; flex: none; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; overflow: hidden; }
.topbar-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 본문 셸 ── */
main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }

/* ── §4 카드 — §0.5 calm: 화이트 + 헤어라인만(컬러 탑보더 금지, 선택/활성만 블루 보더) ── */
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px;
}
.card h2 { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: var(--ink); }
/* 섹션 제목(h3) 기본 margin 제거 — UA 기본 margin-block 이 카드 상단 패딩에 더해져 '위쪽 패딩 너무 큼'(본문·지식 등 #254). WIP styles.css 에서 유실됐던 것 복원(2026-06-30). */
.card-head h3 { margin: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 화이트 패널(필터 바 등) */
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }

/* ── 페이지 헤더 — §0.5: 제품 화면에 그라데이션 히어로 금지. 조용한 숫자+여백이 위계. ── */
.page-head { padding: 8px 0 4px; }
.page-head h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: -0.8px; color: var(--ink); }
.page-head .sub { margin: 0 0 22px; font-size: 14.5px; color: var(--ink-sub); }
/* 제목 + 우측 액션(예: 🗑 휴지통)을 한 줄에 — 제목은 좌, 액션은 우 끝. */
.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.page-head-row h1 { margin: 0; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--muted-head); text-transform: uppercase; margin: 0 0 10px; }
.accent { color: var(--blue); }
.stat-row { display: flex; gap: 32px; flex-wrap: wrap; }
/* §2 num 토큰(44px 기준, 웹 0.85~1배) — 숫자 800/-1.5px + 단위 small 600 --muted-2 분리 */
.stat .num { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; color: var(--ink); line-height: 1.1; }
.stat .num small { font-size: 16px; font-weight: 600; color: var(--muted-2); letter-spacing: 0; margin-left: 3px; }
.stat .lbl { font-size: 12.5px; font-weight: 600; color: var(--muted-2); margin-top: 2px; }

/* ── 그리드/분할 ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.grid-2 > * { min-width: 0; } /* nowrap 제목이 1fr 칼럼을 밀어내지 않게 */
.split { display: flex; gap: 20px; align-items: flex-start; margin-top: 16px; }
.split-list { flex: 1; min-width: 0; }
.split-detail { flex: 1.35; min-width: 0; position: sticky; top: 80px; }
@media (max-width: 960px) {
  .grid-2 { grid-template-columns: 1fr; }
  .split:not(.admin-split) { flex-direction: column; }
  .split-detail { position: static; width: 100%; }
}

/* ── 입장 모션(§6) — 부팅 1회만 ── */
.reveal { animation: reveal 250ms ease-out backwards; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 상태 변경 민트 플래시 1회 */
.flash { animation: mintflash 600ms ease-out; }
@keyframes mintflash { from { background-color: var(--bg-success); } }

/* ── 필/배지 — §0.5: 채운 컬러 필 금지. 키/슬러그 = 뉴트럴 모노 칩, 상태 = 점+무채 라벨. ── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 10px; padding: 2px 9px;
  font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
/* 키 칩 — 화이트 + 헤어라인 + 잉크, 모노스페이스(키=코드 의미론, 구 domain-map UI 매력) */
.pill-domain, .pill-project {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 500;
}
/* 상태 = 6px 점 + 무채 텍스트 라벨(채움/보더 없음) */
.pill-state {
  background: none; border: none; padding: 1px 2px; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-sub);
}
.pill-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); flex: none; }
.pill-state.confirmed::before { background: var(--mint); }
.pill-state.proposed::before { background: var(--muted-2); }
.pill-state.rejected { color: var(--muted-2); }
.pill-state.rejected::before { background: var(--muted-3); }
.pill-more { background: var(--bg); border: 1px solid var(--line); color: var(--muted-head); }
.chip-by {
  display: inline-flex; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink-sub); font-size: 12px; font-weight: 700;
  border-radius: 9px; padding: 1px 7px;
}
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }

/* ── 배너(§4 note) ── */
.note {
  background: var(--bg-note); border: 1px solid var(--line-note); color: var(--ink-note);
  border-radius: 12px; padding: 13px 18px; font-size: 14px;
}
.note.coral { color: var(--coral-text); }

/* ── 버튼 ── */
.btn {
  border: 1px solid transparent; cursor: pointer; font-weight: 700; border-radius: 11px;
  padding: 9px 18px; font-size: 14px; white-space: nowrap; transition: background-color 150ms ease, border-color 150ms ease;
}
/* §0.5 예산: 채운 블루 primary 는 화면당 1개만 — 나머지는 전부 btn-ghost(화이트+헤어라인+잉크) */
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-ghost { background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); }
.btn-sm { padding: 5px 13px; font-size: 13px; border-radius: 9px; }
.btn-text { background: none; border: none; color: var(--ink-sub); font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.btn-text:hover { color: var(--blue); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── 폼 요소 ── */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="date"],
input[type="number"], select, textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 11px; color: var(--ink); font-size: 14px; font-weight: 500;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
select:disabled { color: var(--muted-2); background: var(--bg-tint); }
textarea { resize: vertical; }
label.fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted-head); }

/* ── 필터 바 ── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filter-bar input[type="search"] { flex: 1; min-width: 180px; }

/* ── 리스트 행(테이블풍) ── */
.list-box { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 12px; }
.row { padding: 14px 16px; border-bottom: 1px solid var(--line-row); cursor: pointer; }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--bg-tint); }
.row.sel { background: var(--bg-sel); box-shadow: inset 3px 0 0 var(--blue); }
.row.row-pick { display: flex; align-items: center; gap: 10px; }
.row-pick .row-pick-body { flex: 1; min-width: 0; }
.row-check { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--blue); pointer-events: none; }
.row-title {
  font-size: 15px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-meta { font-size: 12.5px; font-weight: 600; color: var(--muted-2); margin-top: 3px; }
.row-meta .thread-mark { color: var(--muted-head); }
.list-foot { display: flex; align-items: center; gap: 14px; padding: 12px 4px; }
.caption { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }

/* ── 디테일 페인 ── */
.detail-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.detail-title { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 6px; line-height: 1.35; }
.detail-meta { font-size: 13px; font-weight: 600; color: var(--muted-2); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sec-label { font-size: 13px; font-weight: 700; color: var(--muted-head); margin: 22px 0 8px; }
.sec-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.body-text {
  white-space: pre-wrap; word-break: break-word;
  font-size: 15px; line-height: 1.55; color: var(--ink-sub); margin: 0;
  font-family: inherit;
}

/* ── 렌더된 마크다운 본문 — DESIGN 절제(기존 토큰만, 새 컬러 없음). ── */
.md-rendered { font-size: 15px; line-height: 1.6; color: var(--ink-sub); word-break: break-word; }
.md-rendered > .md > :first-child { margin-top: 0; }
.md-rendered > .md > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 12px; }
.md-h { color: var(--ink); font-weight: 800; line-height: 1.35; margin: 22px 0 8px; }
.md-h1 { font-size: 19px; }
.md-h2 { font-size: 17px; }
.md-h3 { font-size: 15.5px; }
.md-h4, .md-h5, .md-h6 { font-size: 14px; color: var(--ink-sub); }
.md-rendered strong { font-weight: 800; color: var(--ink); }
.md-rendered em { font-style: italic; }
.md-code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.88em; background: var(--bg-tint); color: var(--ink);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; word-break: break-all;
}
.md-pre {
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 12px; overflow: auto; white-space: pre;
}
.md-pre code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; color: var(--ink); background: none; border: 0; padding: 0;
}
.md-list { margin: 0 0 12px; padding-left: 22px; }
.md-list li { margin: 2px 0; }
.md-list .md-list { margin-bottom: 0; }
.md-quote {
  margin: 0 0 12px; padding: 4px 14px; border-left: 3px solid var(--line-note);
  color: var(--ink-sub); background: var(--bg-note); border-radius: 0 8px 8px 0;
}
.md-quote > :last-child { margin-bottom: 0; }
.md-hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.md-link { color: var(--blue); text-decoration: underline; word-break: break-all; }
.md-link:hover { color: var(--blue-deep); }
/* 본문 속 지식 링크 언펄(#317) — 위키 지식임을 작은 문서 글리프로 표시. URL 대신 제목이라 단어 단위 줄바꿈. */
.md-link.kn-unfurl { word-break: normal; }
.md-link.kn-unfurl::before { content: '📄'; margin-right: 3px; font-size: .9em; opacity: .75; }
.md-table { border-collapse: collapse; margin: 0 0 12px; font-size: 13.5px; display: block; overflow-x: auto; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 6px 11px; text-align: left; vertical-align: top; }
.md-table th { background: var(--bg-tint); font-weight: 700; color: var(--ink); }
.md-raw-toggle { flex: none; }
.unit-body-raw { margin-top: 0; }
details.fields summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted-head); margin-top: 20px; }
.fields-table { margin-top: 8px; font-size: 12.5px; color: var(--ink-sub); border-collapse: collapse; }
.fields-table td { padding: 3px 14px 3px 0; vertical-align: top; word-break: break-all; }
.fields-table td:first-child { font-weight: 700; color: var(--muted-head); white-space: nowrap; }

/* WIKI 카테고리 설정 — calm 리스트(무채·헤어라인·아웃라인, domain-map 톤). 표 대신 균일 단일행 + space 그룹. */
.wikicat { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.wikicat-grouphead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wikicat-grouptitle { font-size: 13px; font-weight: 800; color: var(--ink); }
.wikicat-groupcount { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.wikicat-add { margin-left: auto; }
.wikicat-rows { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.wikicat-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line-row); }
.wikicat-row:last-child { border-bottom: none; }
.wikicat-row:hover { background: var(--bg-tint); }
.wikicat-row-main { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wikicat-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wikicat-key { font-size: 11.5px; color: var(--muted-head); }
.wikicat-should { width: 100%; font-size: 12.5px; line-height: 1.5; color: var(--ink-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wikicat-should-label { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted-2);
  margin-right: 6px; text-transform: none; }
.wikicat-should-empty { color: var(--muted-2); font-style: italic; }
.wikicat-row-acts { display: flex; gap: 6px; flex-shrink: 0; opacity: .55; transition: opacity .12s; }
.wikicat-row:hover .wikicat-row-acts, .wikicat-row:focus-within .wikicat-row-acts { opacity: 1; }
.wikicat-empty { padding: 12px 14px; color: var(--muted-2); font-size: 12.5px; }

/* ── 스레드(대화형) ── */
.thread { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bubble {
  background: var(--bg); border-radius: 12px; padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--line-row);
}
.bubble:hover { border-color: var(--line-net-2); }
.bubble.current { background: var(--bg-sel); box-shadow: inset 3px 0 0 var(--blue); cursor: default; }
.bubble.child { margin-left: 16px; }
.bubble-head { font-size: 12.5px; font-weight: 700; color: var(--ink-sub); display: flex; gap: 8px; align-items: baseline; }
.bubble-head .when { font-weight: 600; color: var(--muted-2); }
.bubble-body { font-size: 14px; color: var(--ink-sub); margin-top: 3px; word-break: break-word; }

/* ── 매핑/근거 ── */
.map-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 8px 0; }
.map-row .caption { margin-left: 2px; }
.evidence {
  border-left: 3px solid var(--line); background: var(--bg);
  padding: 10px 14px; font-size: 13.5px; color: var(--ink-sub);
  border-radius: 0 9px 9px 0; margin: 2px 0 8px; word-break: break-word; white-space: pre-wrap;
}
.inline-note { font-size: 13px; font-weight: 600; color: var(--coral-text); margin-top: 6px; }

/* ── 제안 폼 ── */
.propose-form { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.propose-form .form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.kind-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.kind-toggle button { border: none; background: var(--bg); padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--ink-sub); cursor: pointer; }
.kind-toggle button.on { background: var(--bg); color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); } /* 선택=블루 언더라인(채움 금지) */

/* ── 큐레이션 카드 ── */
.inbox-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.inbox-card { padding: 24px; }
.inbox-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.inbox-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
.inbox-title a:hover { color: var(--blue); }
.inbox-detail-link { font-size: 13px; font-weight: 600; color: var(--ink-sub); white-space: nowrap; }
.inbox-detail-link:hover { color: var(--blue); }
.snippet-2l {
  font-size: 14px; color: var(--ink-sub); margin: 8px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.curation-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 960px) { .curation-strip { grid-template-columns: minmax(0, 1fr); } }
.mini-form { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mini-form .mf-title { font-size: 12.5px; font-weight: 700; color: var(--muted-head); }
.mini-form .mf-row { display: flex; gap: 8px; }
.mini-form select, .mini-form input { flex: 1; min-width: 0; }
/* §2 num 토큰 — 숫자만 크게, 라벨('미매핑')·단위('건')는 small 로 분리 */
.num-big { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.num-big small { font-size: 15px; font-weight: 600; color: var(--muted-2); letter-spacing: 0; margin: 0 3px; }

/* ── 커버리지 ── */
.cov-repo { margin-bottom: 16px; }
.cov-repo:last-child { margin-bottom: 0; }
.cov-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.cov-line { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; margin-bottom: 6px; }
.cov-lbl { font-size: 13px; font-weight: 600; color: var(--ink-sub); }
/* §0.5: 커버리지 바 무채 + 우단 민트 끝점(살아있음 신호만 컬러) */
.track { height: 6px; background: var(--line); border-radius: 3px; }
.fill { height: 6px; background: var(--muted-3); border-radius: 3px; position: relative; min-width: 4px; }
.fill::after { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 6px; border-radius: 2px; background: var(--mint); }
.cov-stat { font-size: 12px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.cov-stat .ok { color: var(--mint-deep); font-weight: 700; }

/* ── 최근 유입 미니 바 ── */
.bars { display: flex; gap: 3px; align-items: flex-end; height: 36px; margin-top: 6px; }
.bar { width: 10px; background: var(--muted-3); border-radius: 2px; min-height: 2px; }
.bar.today { background: var(--mint); } /* '오늘=살아있음' 끝점 의미 — 유지 */

/* ── 도메인 페이지 ── */
.repo-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.repo-pill {
  border-radius: 18px; padding: 6px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-sub);
}
.repo-pill.on { background: var(--bg); border: 1px solid var(--blue); color: var(--ink); } /* 선택=블루 보더(채움 금지) */
/* (구 도메인 카드 그리드 규칙 제거 — 큐레이션 two-pane 으로 대체, 아래 '도메인 큐레이션' 블록 참조) */

/* ── 스켈레톤(정적 — 쉬머 금지) ── */
.skel { background: var(--bg-tint); border: 1px solid var(--line); border-radius: 12px; min-height: 88px; }
.skel-stack { display: flex; flex-direction: column; gap: 12px; }
.loading-caption { font-size: 13px; font-weight: 600; color: var(--muted-2); margin: 10px 0; }

/* ── 빈 상태 ── */
.empty { text-align: center; padding: 44px 20px; color: var(--ink-sub); font-size: 14px; }
.empty svg { display: block; margin: 0 auto 14px; }

/* ── 토큰 게이트 ── */
#gate {
  position: fixed; inset: 0; background: var(--bg); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.gate-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  width: 100%; max-width: 380px; padding: 32px;
}
.gate-mark { font-size: 22px; margin-bottom: 14px; }
.gate-copy { font-size: 14px; color: var(--ink-sub); margin: 0 0 18px; }
#gate-form { display: flex; flex-direction: column; gap: 10px; }
#gate-input, #gate-email, #gate-password { width: 100%; }
.gate-error { font-size: 13px; font-weight: 600; color: var(--coral-text); margin: 0; }
.gate-btn { width: 100%; }
.gate-token-toggle { background: none; border: 0; color: var(--muted-2); font-size: 12.5px; cursor: pointer; padding: 4px; text-decoration: underline; align-self: center; }
.gate-token-toggle:hover { color: var(--ink-sub); }

/* ── 토스트 — 헤어라인 보더 + 선두 6px 점(성공=민트·에러=코랄) ── */
/* z-index 는 모든 모달/오버레이/드로어 위여야 한다(현 최대 .cmt-backdrop=1300). 토스트는 전역 피드백이라
   모달이 떠 있어도 항상 보여야 함 — 이 값을 1300 이하로 낮추면 우하단 카드가 모달 뒤로 숨는다(#343). */
#toasts { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; }
.toast {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--ink);
  box-shadow: 0 8px 30px rgba(20, 35, 60, .12);
}
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex: none; }
.toast.coral { color: var(--coral-text); }
.toast.coral::before { background: var(--coral); }
.toast .btn-text { padding: 0 2px; color: var(--blue); }

/* ════════ 도메인 큐레이션(domainmap 흡수) — §0.5 calm 등급 ════════ */
/* 모노스페이스 — 슬러그/경로/키(코드 의미론, 구 domain-map UI 매력) */
.mono { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); word-break: break-all; }

/* 라벨 없는 상태 점(6px) — 목록 행 선두용(이름이 곧 라벨) */
.dot6 { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); flex: none; align-self: center; }
.dot6.ok { background: var(--mint); }

/* 상태 점 + 무채 라벨(6px) — domainmap status/debt status 공용 */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); flex: none; }
.st.ok::before { background: var(--mint); }       /* 확정/해결됨 */
.st.dim { color: var(--muted-2); }
.st.dim::before { background: var(--muted-3); }    /* 기각/무시됨 */
.st.warn::before { background: var(--coral); }     /* 열린 이슈 */

/* 인페이지 섹션 탭(언더라인 세그먼트 — 전역 내비 아님) */
.seg-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 16px; }
.seg-tabs button {
  border: none; background: none; cursor: pointer; padding: 9px 14px;
  font-size: 14px; font-weight: 700; color: var(--ink-sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.seg-tabs button:hover { color: var(--ink); }
.seg-tabs button.on { color: var(--ink); border-bottom-color: var(--blue); } /* 화면당 1곳 채색 슬롯 */

/* 필터 탭(전체/확인 필요/이슈) — 무채 텍스트 토글 */
.dm-filters { display: flex; gap: 4px; margin: 12px 0 0; }
.dm-filters button {
  border: 1px solid transparent; background: none; cursor: pointer; border-radius: 9px;
  padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--ink-sub);
}
.dm-filters button:hover { color: var(--ink); }
.dm-filters button.on { border-color: var(--line); color: var(--ink); background: var(--bg); }

/* 영역 목록 */
.dm-group-head { font-size: 12px; font-weight: 700; color: var(--muted-head); letter-spacing: 1px; padding: 12px 16px 4px; }
.dm-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-row .nm { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.dm-counts { font-size: 12px; font-weight: 600; color: var(--ink-sub); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* 상세 — 매핑 행 */
.map-sec { margin-top: 6px; }
.maprow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 10px; border-bottom: 1px solid var(--line-row); border-left: 3px solid transparent;
}
.maprow:last-child { border-bottom: none; }
.maprow .mono { flex: 1; min-width: 160px; color: var(--ink); }
.maprow .meta { font-size: 12px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.maprow .conf { font-size: 12px; font-weight: 600; color: var(--ink-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.maprow.removed .mono { text-decoration: line-through; color: var(--muted-2); }
.maprow.cur { background: var(--bg-sel); border-left-color: var(--blue); } /* 키보드 커서 = 블루 인셋(.row.sel 문법) */
.maprow select { font-size: 12.5px; padding: 4px 8px; }

/* 이슈(debt) 행 */
.debt-row { padding: 13px 16px; border-bottom: 1px solid var(--line-row); }
.debt-row:last-child { border-bottom: none; }
.debt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.debt-title { font-size: 14.5px; font-weight: 700; color: var(--ink); flex: 1; min-width: 200px; }
.debt-detail { font-size: 13.5px; color: var(--ink-sub); margin: 5px 0 0; word-break: break-word; }
.debt-refs { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }

/* 변경 이력 스트림 */
.hist-row { padding: 12px 16px; border-bottom: 1px solid var(--line-row); }
.hist-row:last-child { border-bottom: none; }
.hist-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 13.5px; }
.hist-head .when { font-size: 12px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.hist-head .who { font-weight: 700; color: var(--ink); }
.hist-head .op { font-weight: 600; color: var(--ink-sub); }
.hist-note { font-size: 12.5px; color: var(--muted); margin-top: 3px; word-break: break-word; }
.hist-diff { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-sub); }
.hist-diff .k { font-weight: 700; color: var(--muted-head); }
.hist-diff .arrow { color: var(--muted-2); }

/* 인라인 수정 폼(영역) */
.dm-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.dm-edit input[type="text"], .dm-edit textarea { width: 100%; box-sizing: border-box; }
.dm-edit .frow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* 액션 바 */
.dm-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

/* 키보드 도움말 힌트 */
.kbd-hint { font-size: 12px; font-weight: 600; color: var(--muted-2); padding: 10px 4px; }

/* ── §6 절제: prefers-reduced-motion 이면 펄스·리빌·플래시 전부 끔 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ════════ 관리(전달/관리) — workflow-std 흡수 섹션 ════════ */
.admin-head { margin-bottom: 4px; }
.admin-sub { font-size: 13px; font-weight: 600; color: var(--muted-head); }
/* overflow:hidden — 행 배경(.row.sel 파란 채움)이 카드의 16px 라운딩 모서리를 삐져나오지 않게 클립. */
.admin-nav { padding: 0; overflow: hidden; }
/* nav 행은 <a> — .row 가 display 를 안 줘서 inline 으로 떨어지면 블록 자식(title/meta)과 충돌해 높이가 부풂. 명시 block. */
.admin-nav .row { display: block; }
.admin-hint { font-size: 13px; color: var(--ink-sub); margin: 4px 0 12px; line-height: 1.5; }
.admin-what { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 2px 0 8px; }
.admin-status { font-size: 13px; font-weight: 600; color: var(--muted-head); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 2px; }
.admin-ta { width: 100%; min-height: 320px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.6; }
.admin-add { margin: 12px; }

/* 편집 폼 필드 */
.field { margin: 12px 0; }
.field-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted-head); margin-bottom: 5px; }
.field input[type="text"], .field select, .field textarea { width: 100%; }
.admin-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-sub); margin: 8px 0; }
/* 구성원 보기 모드 — 읽기 전용 값 표시(입력칸 아님) */
.admin-ro { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.admin-ro-pre { white-space: pre-wrap; }
.member-read-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.member-read-head h3 { margin: 0; }
/* 구성원 추가 패널 — ①/② 단계 헤더 */
.member-add-step { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }

/* 상세 박스 내부(목록·편집)는 1단(세로 스택) — 목록 위, 편집/내용 아래. (사용자 요청)
   ※ 맨 좌측 카테고리 nav(.admin-split .split-list)는 사이드바 그대로 유지 — 여기선 건드리지 않음. */
.admin-two { display: flex; flex-direction: column; gap: 14px; align-items: stretch; margin-top: 8px; }
.admin-sublist { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
.admin-two > div:last-child { width: 100%; min-width: 0; }
/* 좌우 2단 변형(구성원 관리 전용) — 목록 좌측 고정폭 + 편집 우측. 좁은 화면에서만 세로. */
.admin-two-cols { flex-direction: row; gap: 18px; align-items: flex-start; }
.admin-two-cols .admin-sublist { flex: 0 0 230px; width: auto; border-right: 1px solid var(--line); border-bottom: none; padding: 0 4px 0 0; }
.admin-two-cols > div:last-child { flex: 1; }
@media (max-width: 760px) {
  .admin-two-cols { flex-direction: column; }
  .admin-two-cols .admin-sublist { flex-basis: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
}
.mini-row { padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.mini-row:hover { background: var(--bg-tint); }
.mini-row.sel { background: var(--bg-sel); box-shadow: inset 3px 0 0 var(--blue); }
.mini-title { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.mini-meta { font-size: 12px; font-weight: 600; color: var(--muted-2); margin-top: 2px; }
/* 가로 카드 목록 변형(예: 훅 주입 미리보기) — 1단 레이아웃에서 전체폭을 가로로 활용 */
.admin-sublist-row { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: none; padding-bottom: 0; }
.admin-sublist-row .mini-row { flex: 1 1 200px; min-width: 180px; border: 1px solid var(--line); border-radius: 10px; }
.admin-sublist-row .mini-row.sel { box-shadow: inset 0 0 0 2px var(--blue); border-color: var(--blue); }

/* 팀 공유 메모리 — 카드 그리드(열·행). 세로 1열 목록의 가독성 문제 해소(06-22). 클릭 시 편집 팝업(overlay). */
.mem-grid-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.mem-grid-head .admin-hint { margin: 0; }
.mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mem-card { display: flex; flex-direction: column; gap: 5px; min-height: 76px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease; }
.mem-card:hover { border-color: var(--blue); box-shadow: 0 3px 12px rgba(21,35,59,.09); }
.mem-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mem-card-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.mem-card-name { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.mem-card-dom { align-self: flex-start; margin-top: auto; font-size: 11px; font-weight: 700; color: var(--blue); background: var(--bg-punch); border: 1px solid var(--line-net-2); border-radius: 999px; padding: 2px 9px; }

/* 메모리 보기 팝업 — 메타 + 서식 렌더된 본문. 본문은 내부 스크롤로 팝업 세로가 짧지 않게(가독성 개선 06-22). */
.mem-modal { display: flex; flex-direction: column; }
.mem-read-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 11px; margin: 2px 0 14px; }
.mem-read-meta .mem-card-dom { align-self: center; margin-top: 0; }
.mem-read-name { font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.mem-read-upd { font-size: 12px; color: var(--muted); }
.mem-read-body { max-height: 68vh; overflow: auto; padding-right: 8px; }
/* 편집 본문 textarea — 넉넉한 세로로(본문 잘림 해소). */
.ov-box textarea.mem-edit-ta { width: 100%; min-height: 46vh; resize: vertical; }

/* identities(외부 계정 연결) 에디터 */
.idn-wrap { display: flex; flex-direction: column; gap: 6px; }
.idn-row { display: flex; gap: 6px; align-items: center; }
.idn-row .idn-sys { flex: 0 0 130px; }
.idn-row input { width: 100%; }

/* pill */
.pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--bg-tint-2); color: var(--muted-head); }
.pill-ok { background: var(--bg-success); color: var(--mint-deep); }
.pill-warn { background: #FFF6E9; color: #B5791E; }

/* ── 의미 패널(meaning) — '구성원에게 미치는 효과'. 의미 인지의 핵심. ── */
.meaning { margin-top: 18px; border: 1px solid var(--line-note); border-radius: 13px; background: var(--bg-note); padding: 15px 17px; }
.meaning-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.meaning-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; }
.meaning-title { font-size: 12.5px; font-weight: 800; color: var(--ink-note); letter-spacing: -0.2px; }
.meaning-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: #fff; color: var(--ink-note); border: 1px solid var(--line-note); margin-left: auto; }
.meaning-what { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 11px; line-height: 1.55; }
.meaning-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; }
.meaning-row { display: flex; gap: 12px; align-items: baseline; font-size: 13px; }
.meaning-k { flex: 0 0 92px; font-weight: 700; color: var(--muted-head); }
.meaning-v { color: var(--ink-sub); }
.meaning-ex { font-size: 13px; color: var(--ink-sub); background: #fff; border-radius: 9px; padding: 10px 12px; line-height: 1.55; }
.meaning-ex-label { font-weight: 800; color: var(--blue-deep); margin-right: 8px; }
/* tone 변주: 절대 규칙은 코랄, 신원은 민트, 연결은 청록 */
.meaning-critical { border-color: #F3D2CD; background: #FFF6F4; }
.meaning-critical .meaning-dot { background: var(--coral); }
.meaning-critical .meaning-ex-label { color: var(--coral-text); }
.meaning-identity { border-color: var(--line-net-2); background: var(--bg-success); }
.meaning-identity .meaning-dot { background: var(--mint-deep); }
.meaning-identity .meaning-ex-label { color: var(--mint-deep); }
.meaning-infra .meaning-dot { background: var(--teal); }

/* '이게 뭐예요?' 트리거 — 제목 옆에 밋밋한(덜 활성화) 회색 텍스트. 클릭 시 팝업으로 설명 노출 */
.section-title { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.field-label-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.field-label-row .field-label { margin-bottom: 0; }
.meaning-trigger { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: -0.2px; }
.meaning-trigger:hover { color: var(--ink-sub); text-decoration: underline; }
.meaning-trigger-icon { font-size: 12px; color: var(--muted); line-height: 1; }
.meaning-pop { margin-top: 0; }

/* 미리보기/명령 오버레이 */
.ov-back { position: fixed; inset: 0; background: rgba(21,35,59,.42); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 20px; z-index: 200; overflow: auto; }
.ov-box { background: var(--bg); border-radius: 16px; box-shadow: 0 24px 64px rgba(21,35,59,.28); max-width: 760px; width: 100%; padding: 22px 24px; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ov-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.admin-preview { background: var(--dark-1); color: #E8EEF8; border-radius: 11px; padding: 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 56vh; overflow: auto; margin: 6px 0 12px; }
.admin-warn { font-size: 12.5px; font-weight: 600; color: var(--coral-text); background: #FFF6F4; border: 1px solid #F3D2CD; border-radius: 9px; padding: 9px 12px; margin: 4px 0 10px; line-height: 1.5; }

/* 관리 가로 중분류 바(기본 설정 · 회사·조직 · AI 동작/연결) — '관리' 머리글과 좌우 split 사이.
   세그먼트형(밑줄 강조). 상단 .tabs 와 시각 언어를 맞추되 카드 안이라 살짝 담백하게. */
.admin-cats {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 4px 0 16px; padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.admin-cat {
  padding: 9px 16px; border-radius: 9px 9px 0 0;
  font-size: 14px; font-weight: 700; color: var(--ink-sub);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -3px;
}
.admin-cat:hover { color: var(--ink); background: var(--bg-tint); }
.admin-cat.active { color: var(--blue); border-bottom-color: var(--blue); }
@media (max-width: 560px) { .admin-cat { padding: 8px 11px; font-size: 13px; } }

/* 상위 탭(회사 맥락·시작하기)의 가로 중분류 바 — 페이지 맨 위에 깔리는 보조 탭 스트립(.admin-cats 와 같은 시각 언어). */
.sub-cats {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 0 18px; border-bottom: 1px solid var(--line);
}
.sub-cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 9px 9px 0 0;
  font-size: 14px; font-weight: 700; color: var(--ink-sub);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sub-cat:hover { color: var(--ink); background: var(--bg-tint); }
.sub-cat.active { color: var(--blue); border-bottom-color: var(--blue); }
@media (max-width: 560px) { .sub-cat { padding: 8px 11px; font-size: 13px; } }

/* WIKI 하위바 우측 '지식 그래프' 버튼 — 탭이 아닌 액션(도메인 지도를 풀스크린 새 창으로). #290 */
.sub-graph-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto; margin-bottom: 3px;
  padding: 7px 13px; border-radius: 9px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-sub);
  background: var(--bg-tint); border: 1px solid var(--line); cursor: pointer;
  transition: color .14s, border-color .14s, background .14s, box-shadow .14s;
}
.sub-graph-btn:hover { color: var(--ink); border-color: #16C79A; background: #fff; box-shadow: 0 2px 12px rgba(22,199,154,.16); }
.sub-graph-btn .sub-graph-ic { color: #16C79A; flex: none; }
@media (max-width: 560px) { .sub-graph-btn { margin-left: 0; padding: 7px 11px; font-size: 12.5px; } }

/* 가이드(#/learn) — 목적 카드 + '지식 하나' 예시 + 쉬운 용어집 */
/* 카드 스택 간격 — .card 자체엔 마진이 없어 카드끼리 붙는다(이전엔 eyebrow가 사이를 벌렸음). 설치 페이지 .install-guide 와 동일 패턴. */
.guide-cards { display: flex; flex-direction: column; gap: 18px; }
.guide-lead { font-size: 14.5px; line-height: 1.65; color: var(--ink); margin: 0 0 12px; }
.guide-what-rows { margin-top: 4px; }
.guide-kinds-intro { margin: -2px 0 14px; }
/* '지식 하나'가 뭔지 — 실제 한 개 예시 카드(추상 개념을 눈으로) */
.gloss-example { border: 1px solid var(--line-net); border-radius: 12px; padding: 14px 16px; background: var(--bg-tint); margin: 4px 0 2px; }
.gloss-example-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--blue); background: var(--bg-punch); border: 1px solid var(--line-net-2); border-radius: 999px; padding: 2px 9px; margin-bottom: 8px; }
.gloss-example-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.gloss-example-body { font-size: 14px; line-height: 1.6; color: var(--ink-sub); margin-top: 4px; }
/* 네 종류(R/K/H/W) 각각 + 쉬운 예시 한 개씩 */
/* 2열 2행 그리드 — 좁아지면 1열로 자동 폴백. 칸 사이는 gap 으로 구분(구 1열의 구분선·padding 제거). */
.kind-ex-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 18px; margin-top: 8px; align-items: start; }
.kind-ex { padding-top: 0; border-top: none; }
.kind-ex-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 9px; }
.kind-ex .gloss-example { margin: 0; }
/* 쉬운 용어집(규칙/지식/절차/할일) */
.gloss-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.gloss-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-row); }
.gloss-row:last-child { border-bottom: none; }
.gloss-glyph { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--blue); background: var(--bg-punch); border-radius: 7px; }
.gloss-main { min-width: 0; }
.gloss-ko { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.gloss-code { font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.gloss-desc { font-size: 13.5px; color: var(--ink-sub); line-height: 1.5; margin-top: 1px; }

/* ════════ 사용 가이드(#/learn) 전면 재구성 — 비개발자용(2026-06-30) ════════ */
/* ① 히어로 — 서비스를 관통하는 한 문장 + 작동 3단계 */
.guide-hero { background: linear-gradient(135deg, #F4F8FF 0%, #F1FBF7 100%); border-color: var(--line-net); padding: 28px 28px 24px; }
.guide-hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--muted-head); text-transform: uppercase; margin: 0 0 11px; }
/* .card h2(0,1,1) 보다 높은 특이도로 히어로 제목 크기를 유지(.guide-hero .guide-hero-title = 0,2,0). */
.guide-hero .guide-hero-title { font-size: 25px; font-weight: 800; line-height: 1.4; letter-spacing: -0.6px; color: var(--ink); margin: 0 0 13px; }
.guide-hero-lead { font-size: 15px; line-height: 1.75; color: var(--ink-sub); margin: 0 0 22px; max-width: 780px; }
.guide-hero-lead b { color: var(--ink); }
/* 작동 3단계 흐름(카드 3 + 화살표 2) */
.guide-flow { display: flex; align-items: stretch; gap: 10px; }
.guide-flow-step { flex: 1; background: var(--bg); border: 1px solid var(--line-net); border-radius: 13px; padding: 16px 16px 15px; }
.guide-flow-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--blue); background: var(--bg-punch); margin-bottom: 11px; }
.guide-flow-icon svg { width: 21px; height: 21px; }
.guide-flow-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.guide-flow-desc { font-size: 13px; line-height: 1.55; color: var(--ink-sub); margin: 0; }
.guide-flow-arrow { flex: none; align-self: center; color: var(--muted-2); font-size: 19px; font-weight: 700; line-height: 1; }
@media (max-width: 720px) {
  .guide-flow { flex-direction: column; }
  .guide-flow-arrow { transform: rotate(90deg); margin: -3px 0; }
}
/* '딱 한 줄' 강조 */
.guide-remember { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 13px 16px;
  background: rgba(45,107,240,.06); border: 1px solid var(--line-note); border-radius: 12px; }
.guide-remember-key { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; color: #fff;
  background: var(--blue); border-radius: 999px; padding: 4px 11px; }
.guide-remember p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--ink); }

/* ② 메뉴 한눈에 보기 — 탭 카드 그리드(2열, 좁아지면 1열) */
.tabguide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tabguide-grid--single { grid-template-columns: 1fr; } /* 단일 항목 묶음(시작)은 전폭 */
@media (max-width: 720px) { .tabguide-grid { grid-template-columns: 1fr; } }
.tabguide-card { display: flex; flex-direction: column; gap: 9px; padding: 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--bg); text-decoration: none; color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
a.tabguide-card:hover { border-color: var(--line-net-2); box-shadow: 0 6px 22px rgba(21,35,59,.07); transform: translateY(-2px); }
a.tabguide-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tabguide-card.is-current { background: var(--bg-tint); border-style: dashed; }
.tabguide-top { display: flex; align-items: center; gap: 12px; }
.tabguide-icon { flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.tabguide-icon svg { width: 22px; height: 22px; }
.tabguide-headtext { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.tabguide-name { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.tabguide-tag { font-size: 11.5px; font-weight: 700; color: var(--ink-sub); background: var(--bg-tint);
  border: 1px solid var(--line-net); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.tabguide-summary { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.tabguide-desc { font-size: 13.5px; line-height: 1.65; color: var(--ink-sub); margin: 0; }
.tabguide-go { margin-top: auto; padding-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 5px; }
.tabguide-go-arrow { transition: transform .14s ease; }
a.tabguide-card:hover .tabguide-go-arrow { transform: translateX(3px); }
.tabguide-current { margin-top: auto; padding-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted-head); }

/* 처음이라면 — 순서 경로(번호 + 설명 + 이동 버튼) */
.guide-path { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.guide-path-step { display: flex; gap: 14px; align-items: flex-start; padding: 15px 16px;
  border: 1px solid var(--line-net); border-radius: 13px; background: var(--bg-tint); }
.guide-path-num { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--blue); border-radius: 999px; }
.guide-path-body { min-width: 0; flex: 1; }
.guide-path-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.guide-path-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-sub); margin: 0 0 10px; }
.guide-path-btn { display: inline-block; text-decoration: none; }

/* 메뉴 한눈에 보기 — 챕터(묶음) 박스 그루핑 */
.tabchapter { background: var(--bg-tint); border: 1px solid var(--line-net); border-radius: 14px; padding: 15px 15px 16px; }
.tabchapter + .tabchapter { margin-top: 13px; }
.tabchapter-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.tabchapter-num { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--blue); background: var(--bg-punch); border: 1px solid var(--line-net-2); border-radius: 8px; }
.tabchapter-headtext { min-width: 0; }
.tabchapter-title { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.tabchapter-sub { font-size: 12.5px; color: var(--muted-head); margin-top: 1px; }
.tabchapter .tabguide-grid { margin-top: 0; }
.tabguide-help { margin-top: 14px; }

/* WIKI 지식 설명 — 예시 메타(카테고리+칩) + 주입/출처 두 축 */
.kn-ex-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.kn-cat-pill { font-size: 11px; font-weight: 700; color: var(--ink-sub); background: var(--bg); border: 1px solid var(--line-net); border-radius: 999px; padding: 1px 9px; }
.kn-ex-meta-sep { color: var(--muted-2); }
.kn-ex-cap { font-size: 12px; color: var(--muted-head); margin-top: 9px; line-height: 1.5; }
.guide-kinds-q { font-size: 14px; font-weight: 700; color: var(--ink); margin: 18px 0 0; }
.kn-axis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 720px) { .kn-axis-grid { grid-template-columns: 1fr; } }
.kn-axis { border: 1px solid var(--line-net); border-radius: 13px; padding: 16px; background: var(--bg-tint); }
.kn-axis-q { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.kn-axis-sub { font-size: 12.5px; color: var(--muted-head); margin: 2px 0 8px; }
.kn-axis-opt { padding: 11px 0; border-top: 1px solid var(--line-row); }
.kn-axis-opt:first-of-type { border-top: none; padding-top: 2px; }
.kn-axis-opt-head { margin-bottom: 5px; }
.kn-axis-opt-desc { font-size: 13px; line-height: 1.55; color: var(--ink-sub); }
.kn-axis-opt-ex { font-size: 12.5px; line-height: 1.5; color: var(--muted-head); margin-top: 3px; }
.kn-axis-opt-ex b { color: var(--ink-sub); }
.guide-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 11px 14px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 11px; font-size: 13px; line-height: 1.55; color: var(--ink-sub); }
.guide-note b { color: var(--ink); }
.guide-note .kn-chip { flex: none; }

/* 관리 좌:우 너비 3:7 (오른쪽 내용이 더 많음) */
/* 탐색탭처럼 좌측 고정폭 nav + 우측 detail — 좁아져도 row 유지(아래로 안 내려감). */
.admin-split .split-list { flex: 0 0 220px; }
.admin-split .split-detail { flex: 1; }
/* 섹션 1개 그룹 — 좌측 nav 없이 본문 전폭(.split 의 상단 여백만 승계). */
.admin-solo-detail { margin-top: 16px; }
/* 권한(scopes) 체크박스 */
.scope-wrap { display: flex; flex-direction: column; gap: 2px; }
.scope-opt { margin: 2px 0; }

/* 배포 안내(설치/업데이트/제거) */
.os-tabs { display: flex; gap: 6px; }
.deploy-block { margin: 16px 0 4px; }
.deploy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.deploy-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.deploy-block .admin-preview { white-space: pre-wrap; }
/* 토큰 발급 후 '이렇게 전달하세요' 단계 안내 */
.minter-steps { margin: 4px 0 10px; padding-left: 20px; list-style: decimal; }
.minter-steps li { font-size: 13px; line-height: 1.6; color: var(--ink-sub); margin: 3px 0; }
.minter-steps li b { color: var(--ink); }

/* ── 시작하기 > 설치 — 비개발자용 단계별 온보딩 ── */
.install-guide { display: flex; flex-direction: column; gap: 18px; }
.install-intro .guide-lead, .install-next .guide-lead { margin-bottom: 10px; }
/* 어디서 쓰나 — 두 갈래 선택 카드 */
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
@media (max-width: 720px) { .mode-choice { grid-template-columns: 1fr; } }
.mode-card { border: 1.5px solid var(--line-net); border-radius: 13px; padding: 16px 18px; cursor: pointer;
  background: var(--bg); transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; }
.mode-card:hover { border-color: var(--line-net-2); background: var(--bg-tint); }
.mode-card.active { border-color: var(--blue); background: var(--bg-tint); box-shadow: 0 0 0 3px rgba(45,107,240,.10); }
.mode-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.mode-card-radio { flex: none; width: 17px; height: 17px; border-radius: 999px; border: 2px solid var(--line-net-2); background: var(--bg); }
.mode-card.active .mode-card-radio { border-color: var(--blue); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 9px var(--blue); }
.mode-card-tag { font-size: 12px; font-weight: 700; color: var(--blue); }
.mode-card-title { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.3; }
/* '이런 분께' — 상황 기반 자가선택 신호. 무채색 핀(채운 배지 금지, §0.5). */
.mode-card-who { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.mode-card-who-label { flex: none; font-size: 11px; font-weight: 800; color: var(--ink-sub); letter-spacing: .01em;
  background: var(--bg-tint); border: 1px solid var(--line-net); border-radius: 6px; padding: 2px 7px; }
.mode-card-who-text { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.mode-card-hint { font-size: 13px; color: var(--ink-sub); line-height: 1.5; margin-top: 6px; }
/* 모드별 한 줄 강조 콜아웃 */
.install-callout { display: flex; flex-direction: column; gap: 4px; background: var(--bg-tint); border-color: var(--line-net); }
.callout-strong { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.callout-sub { font-size: 13.5px; color: var(--ink-sub); line-height: 1.6; margin: 0; }
.note-ul { padding-left: 18px; }
/* 준비물 체크리스트 */
.install-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.install-check { display: flex; gap: 11px; align-items: flex-start; }
.check-mark { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--blue); background: var(--bg-punch); border-radius: 999px; }
.check-main { min-width: 0; }
.check-k { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.check-v { font-size: 13.5px; color: var(--ink-sub); line-height: 1.55; margin-top: 1px; }
/* OS 선택(설치 단계 헤더) */
.os-pick { display: flex; align-items: center; gap: 8px; }
.os-pick-label { font-size: 12.5px; font-weight: 700; color: var(--muted-head); }
/* 번호 매긴 단계 */
.step-list { display: flex; flex-direction: column; }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line-row); }
.step:first-child { border-top: none; padding-top: 6px; }
.step-num { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--blue); border-radius: 999px; }
.step-body { min-width: 0; flex: 1; }
.step-title { font-size: 15.5px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.step-p { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 6px; }
.step-note { font-size: 13.5px; line-height: 1.55; color: var(--ink-sub); margin: 4px 0 0; }
/* 단계 안의 CTA 버튼(예: '터미널 새 창으로 열기') — 앵커를 버튼처럼 렌더(설치 가이드 한정) */
.install-guide a.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.step-cta { margin: 10px 0 8px; }
.step-ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.step-ul li { font-size: 13.5px; line-height: 1.55; color: var(--ink-sub); }
.step-ul li b, .step-p b, .step-note b { color: var(--ink); }
.install-ok { font-size: 13.5px; font-weight: 600; color: var(--blue-deep); margin: 6px 0; }
.install-token-err { font-size: 13px; font-weight: 600; color: var(--coral-text); margin: 8px 0 0; line-height: 1.5; }
.install-cmd-slot:empty { display: none; }
/* 키캡(키보드·메뉴 강조) */
.kbd { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; font-weight: 700;
  color: var(--ink); background: var(--bg-tint); border: 1px solid var(--line-net); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 7px; margin: 0 1px; line-height: 1.7; white-space: nowrap; }
/* 확인용 한 줄 명령 */
.cmd-line { display: flex; align-items: center; gap: 10px; background: var(--bg-tint); border: 1px solid var(--line-net);
  border-radius: 10px; padding: 9px 12px; margin: 8px 0; }
.cmd-line-text { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--ink);
  overflow-x: auto; white-space: nowrap; }
/* 유지보수(접힘) */
.install-maint { border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; background: var(--bg-tint); }
.install-maint > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-sub); padding: 12px 0; list-style: none; }
.install-maint > summary::-webkit-details-marker { display: none; }
.install-maint > summary::before { content: "▸ "; color: var(--muted-head); }
.install-maint[open] > summary::before { content: "▾ "; }
.install-maint[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }

/* 토큰 회수 패널 */
.token-section { margin-top: 14px; }
.token-section-h { font-size: 12.5px; font-weight: 700; color: var(--muted-head); margin: 4px 0 6px; }
.token-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-row); }
.token-row:last-child { border-bottom: none; }
.token-main { min-width: 0; }
.token-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.token-revoked { opacity: .55; }

/* 설치 미니터(구성원 선택 + 발급) */
.install-minter { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
.install-minter select, .install-minter input { flex: 1; min-width: 0; }
.install-minter .btn { flex: none; white-space: nowrap; }

/* 커스텀 훅 · AI 도구(런타임 권한) */
.admin-subhead { font-size: 13px; font-weight: 800; color: var(--ink); margin: 18px 0 4px; }
.warn-badge { background: #FFF6E9; color: #B5791E; border: 1px solid #F0DBB0; border-radius: 9px; padding: 9px 12px; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.builtin-toggles { margin-top: 10px; }
.builtin-row { display: flex; align-items: center; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line-row); }
.builtin-row:last-child { border-bottom: none; }
.builtin-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-sub); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.builtin-row .admin-check { margin: 0; }

/* ════════ P4b 재설계 — 지식 지도 / 탐색 / 유닛 / 검토 (§0.5 calm 등급) ════════ */

/* 탭의 검토 대기 배지 — 채운 필 금지, 작은 무채 카운트 + 민트 점 의미만 */
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px;
  font-size: 11px; font-weight: 700; color: var(--ink-sub);
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  vertical-align: middle;
}
.tabs a.active .tab-count { border-color: var(--line-net-2); color: var(--blue); }

/* ── 1) 지식 지도 ── */
.health-card { margin-top: 8px; }
.stat-link { text-decoration: none; }
.stat-link:hover .num { color: var(--blue); }

.kind-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px; margin-top: 12px;
}
/* 카드 = 폴더(kind). §0.5: 헤어라인 보더 + 틴트, 상단 교대 보더 금지. 선택/호버만 블루. */
.kind-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 18px 16px; min-height: 132px; cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}
.kind-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.kind-card.empty { background: var(--bg); }
.kind-card.empty .kind-card-num { color: var(--muted-2); }
.kind-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 글리프 = 폴더 식별 문자(kind). 모노스페이스 무채 — 코드 의미론 */
.kind-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 800; color: var(--ink-sub);
}
.kind-inject { font-size: 11.5px; font-weight: 700; color: var(--muted-head); white-space: nowrap; }
.kind-card-name { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.kind-card-sub { font-size: 12px; font-weight: 600; color: var(--muted-2); margin-top: -4px; }
.kind-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; }
.kind-card-num { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -1px; line-height: 1; }
.kind-card-num small { font-size: 13px; font-weight: 600; color: var(--muted-2); letter-spacing: 0; }
.kind-card-fresh { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-sub); }
.kind-card-fresh.dim { color: var(--muted-2); }
/* 주제 영역 카드(제품/비즈니스) — 보통 2장이라 auto-fill 4칸의 우측 빈칸이 생긴다. flex+중앙정렬로 빈칸 없애고
   카드 폭은 위 종류 카드와 비슷하게 유지(과하게 넓어지지 않게 cap). */
.area-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.area-grid > .area-card { flex: 1 1 240px; max-width: 340px; }

/* ── 2) 탐색 ── */
.browse-layout { display: flex; gap: 22px; align-items: flex-start; margin-top: 8px; }
.browse-side { flex: 0 0 218px; min-width: 0; position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
.browse-main { flex: 1; min-width: 0; }
@media (max-width: 820px) { .browse-layout { flex-direction: column; } .browse-side { position: static; flex-basis: auto; width: 100%; } }

.browse-tree { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.tree-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; color: var(--ink-sub); border: 1px solid transparent;
}
.tree-item:hover { background: var(--bg-tint); color: var(--ink); }
.tree-item.on { background: var(--bg-sel); border-color: var(--line-net-2); color: var(--ink); }
.tree-glyph {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 800; color: var(--muted-head);
}
.tree-glyph.all { color: var(--muted-2); }
.tree-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { font-size: 12px; font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.tree-item-sub { padding-left: 24px; }   /* '전체' 하위 한 단 들여쓰기 — 인덱스(핀) 필터(#336) */
.tree-item-sub .tree-glyph { font-size: 11px; }   /* 📌 이모지 글리프를 박스에 맞게 살짝 축소 */

.browse-filter { margin-bottom: 4px; }
.browse-filter .flt-domain { flex: 0 0 200px; min-width: 0; }
/* 도메인 맵 등 filter-bar 의 레포 select — 기본이 너무 좁아 레포명이 잘렸다(browse 는 위에서 별도 폭 지정). */
.flt-domain { min-width: 220px; }
.browse-list .row { display: block; }
.browse-list .snippet-2l { margin-top: 6px; }

/* kind 배지(목록/검토 공용) — 모노 글리프 + 무채 한글 라벨 */
.kind-badge { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.kb-glyph {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 5px; background: var(--bg-tint-2); color: var(--muted-head);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 800;
}
.kb-ko { font-size: 12.5px; font-weight: 600; color: var(--ink-sub); }

/* ── 3) 유닛 상세 ── */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ink-sub); }
.crumb-link:hover { color: var(--blue); }
.crumb-sep { color: var(--muted-2); }
.unit-head { padding-bottom: 0; }
.unit-layout { display: flex; gap: 22px; align-items: flex-start; margin-top: 10px; }
.unit-layout .detail-card { flex: 1.6; min-width: 0; }
.unit-side { flex: 1; min-width: 0; position: sticky; top: 80px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.unit-side .fields-table { font-size: 13px; }
.unit-side .fields-table td { padding: 5px 14px 5px 0; }
@media (max-width: 820px) { .unit-layout { flex-direction: column; } .unit-side { position: static; width: 100%; } }

/* 수정 이력(작성자/리비전) 타임라인 — 메타 패널 하단 접이식 */
.rev-details { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.rev-summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-sub); list-style: none; }
.rev-summary::-webkit-details-marker { display: none; }
.rev-summary::before { content: '▸ '; color: var(--muted); }
.rev-details[open] .rev-summary::before { content: '▾ '; }
.rev-count { color: var(--muted); font-weight: 600; }
.rev-list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.rev-row { font-size: 12.5px; border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }
.rev-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rev-ver { font-weight: 700; color: var(--ink); }
.rev-op { color: var(--ink-sub); font-weight: 600; }
.rev-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--bg-tint-2); color: var(--ink-note); }
.rev-actor-ai { background: #EEF4FF; color: var(--blue-deep); }
.rev-actor-human { background: var(--bg-success); color: var(--mint-deep); }
.rev-actor-connector { background: #FBF3EE; color: var(--coral-text); }
.rev-actor-system { background: var(--bg-tint-2); color: var(--muted-head); }
.rev-chan { background: var(--bg-tint); color: var(--ink-sub); }
.rev-meta { margin-top: 3px; color: var(--muted); }
.rev-snippet { margin-top: 4px; color: var(--ink-sub); font-size: 12px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.unit-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.unit-title-row .detail-title { margin: 0; }
.unit-actions { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.unit-actions-end { justify-content: flex-end; }
.unit-body { margin-top: 6px; white-space: pre-wrap; word-break: break-word; }

/* ── 4) 검토 ── */
.review-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--line-row); }
.review-row:last-child { border-bottom: none; }
.review-main { flex: 1; min-width: 0; }
.review-title { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.review-title:hover { color: var(--blue); }
.review-acts { display: flex; gap: 8px; flex: none; }

/* ── 지식(#/knowledge) — 두 직교축(주입·출처) 칩 + 카테고리 칩. §0.5 절제: 채운 필 최소, 점·테두리로 위계. ── */
.kn-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; line-height: 1.7;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; color: var(--ink-sub); white-space: nowrap; vertical-align: middle; }
/* 주입 = 항상(민트 계열, 서비스 포인트 — '늘 곁에 있는 규칙') / 검색(중립 — 필요할 때 소환) */
.kn-inject-always { color: var(--mint-deep); background: #F2FBF8; border-color: #DCEFE8; }
.kn-inject-recalled { color: var(--ink-sub); background: var(--bg-tint); border-color: var(--line); }
/* 출처 = 저작(중립 푸른 계열) / 외부 미러(흐린 회색 — 큐레이션 아님, 외부 진실) */
.kn-prov-authored { color: var(--blue); background: var(--bg-tint-2); border-color: var(--line-net-2); }
.kn-prov-observed { color: var(--muted-2); background: var(--bg-tint); border-color: var(--line); }
/* 핀(WIKI 인덱스) 뱃지 — 항상-주입이라 inject-always 와 같은 민트 계열로 묶는다('늘 곁에' 의미 일관). */
.kn-pin { color: var(--mint-deep); background: #F2FBF8; border-color: #DCEFE8; }
.kn-cat-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 2px; }
.kn-cat-chip { color: var(--ink-sub); background: var(--bg-tint); }
.kn-cat-empty { font-size: 13px; color: var(--muted-2); margin: 4px 0 2px; }
/* 카테고리를 메타데이터 셀로 편입(#290) — 단독 섹션 마진 제거, pill만 2px 위로 정렬. */
.kn-cat-inmeta { margin: 2px 0 0; gap: 6px; }
.umeta-empty { color: var(--muted-2); }

/* ── #290 연결된 지식 — 방향(포워드 →/백링크 ←) 그룹 + 컴팩트 리스트(제목 한 줄 전체폭, 옵시디언식). 카드 없음. ── */
.kn-links { margin: 4px 0 2px; }
.kn-links-body { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.kn-linkdir { display: flex; flex-direction: column; gap: 3px; }
.kn-linkdir-head { font-size: 11.5px; font-weight: 700; color: var(--muted-head); }
.kn-linkrows { display: flex; flex-direction: column; }
.kn-linkrow { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 6px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.kn-linkrow:hover { background: var(--bg-tint); }
.kn-linkrow-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.5; }
.kn-linkrow:hover .kn-linkrow-title { color: var(--blue); }
.kn-link-rel { flex: none; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 5px; color: var(--blue-deep); background: var(--bg-punch); letter-spacing: -.2px; }
.kn-link-rel.kn-link-contradicts { color: var(--coral-text); background: #FCF1EF; }
.kn-link-rel.kn-link-source { color: var(--ink-sub); background: var(--bg-tint-2); }
.kn-linkrow-x { flex: none; width: 18px; height: 18px; border: none; background: transparent; color: var(--muted-2); cursor: pointer; border-radius: 5px; font-size: 11px; line-height: 1; opacity: 0; transition: opacity .12s; }
.kn-linkrow:hover .kn-linkrow-x { opacity: 1; }
.kn-linkrow-x:hover { background: #FDECEC; color: #D6453C; }
/* 비슷한 지식(벡터 #172, 자동) — 같은 컴팩트 리스트 행 재사용. % pill은 '관계'가 아니라 유사도라 색을 구분. */
.kn-link-rel.kn-link-sim { color: var(--muted-head); background: var(--bg-tint-2); font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; }
.kn-sim-hint { flex: none; font-size: 11px; font-weight: 600; color: var(--muted-2); }

/* ── 위키 ↔ 프로젝트 연결(#255·#256·#257) — 연결된 프로젝트 칩(필요/산출) + 선택 피커. ── */
.kn-projlinks { margin: 4px 0 2px; }
.kn-projlink-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.kn-projlink-group { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.kn-projlink-rel { flex: none; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; letter-spacing: -.2px; }
.kn-projlink-rel-required { color: var(--blue); background: var(--bg-tint-2); border: 1px solid var(--line-net-2); }
.kn-projlink-rel-produced { color: #1F9D6B; background: var(--bg-success, #F0FAF5); border: 1px solid #CFEBDF; }
.kn-projchip { gap: 6px; padding: 1px 4px 1px 9px; }
.kn-projchip-link { color: var(--ink); text-decoration: none; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-projchip-link:hover { color: var(--blue); }
.kn-projchip-x { flex: none; width: 18px; height: 18px; border: none; background: transparent; color: var(--muted-2); cursor: pointer; border-radius: 5px; font-size: 11px; line-height: 1; }
.kn-projchip-x:hover { background: var(--bg-danger, #FDECEC); color: var(--danger, #D6453C); }
/* 선택 피커 상단 관계 토글 바 */
.kn-projpick-bar { display: flex; align-items: center; gap: 8px; }
.kn-projpick-rel { flex: none; }
/* 생성 페이지 — 프로젝트 연결 스테이징 */
.kn-create-card .field { margin-bottom: 14px; }
.kn-create-projhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kn-staged-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }

/* ════════ 작업 현황(#/dash) — 구성원 요약 + 작업 타임라인(펼침형). §0.5 절제: 채운 필 금지, 점·라인으로 위계. ════════ */
/* 섹션 헤더 */
.dash-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; flex-wrap: wrap; }
.dash-sec-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.dash-sec-hint { font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* 유형 태그(점 + 라벨) — 색은 점에만 */
.act-type { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-sub); white-space: nowrap; flex: none; }
.act-type-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); flex: none; }
.act-type.tone-mint  .act-type-dot { background: var(--mint); }
.act-type.tone-blue  .act-type-dot { background: var(--blue); }
.act-type.tone-coral .act-type-dot { background: var(--coral); }
.act-type.tone-teal  .act-type-dot { background: var(--teal); }
.act-type.tone-amber  .act-type-dot { background: #D9A441; }
.act-type.tone-violet .act-type-dot { background: #8B7BD8; }
.act-type.tone-muted .act-type-dot { background: var(--muted-2); }

/* ① 구성원 요약 */
.dash-summary .dash-person { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line-row); }
.dash-summary .dash-person:last-child { border-bottom: none; }
.dash-person[role="button"] { cursor: pointer; transition: background .12s; }
.dash-person[role="button"]:hover { background: var(--bg-tint); }
.dash-person.active { background: var(--bg-sel); box-shadow: inset 3px 0 0 var(--blue); }
.dash-person-top { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.dash-person-name { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.dash-person-meta { font-size: 12.5px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.dash-person-meta strong { color: var(--ink); }
.dash-ai-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dash-ai { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-tint); font-size: 12px; font-weight: 600; color: var(--ink-sub); }
.dash-ai-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--node-blue-soft); flex: none; }
.dash-ai-name { color: var(--ink-sub); }
.dash-ai-n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted-head); }
.dash-latest { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; min-width: 0; }
.dash-latest-label { font-size: 11.5px; font-weight: 700; color: var(--muted); flex: none; }
.dash-latest-title { font-size: 13px; color: var(--ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ② 필터 칩 */
.dash-filters { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.dash-chip-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.dash-chip-label { font-size: 12px; font-weight: 700; color: var(--muted-head); margin-right: 4px; }
.dash-chip { padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-sub); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.dash-chip:hover { border-color: var(--blue); color: var(--ink); }
.dash-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
/* 내 프로필 — 단일선택 chip 그룹(개발 이해도·말투·응답 길이). CSS 누락으로 기본 버튼처럼 보이던 것 수정 — .dash-chip 패턴과 통일. */
.prof-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.prof-chip { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-sub); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.prof-chip:hover { border-color: var(--blue); color: var(--ink); }
.prof-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ③ 작업 타임라인(펼침형) */
.dash-feed .act-card { border-bottom: 1px solid var(--line-row); }
.dash-feed .act-card:last-child { border-bottom: none; }
.act-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; cursor: pointer; transition: background .12s; }
.act-head:hover { background: var(--bg-tint); }
.act-card.open > .act-head { background: var(--bg-tint); }
.act-caret { color: var(--muted-2); font-size: 11px; line-height: 1.7; flex: none; width: 12px; }
.act-head-main { flex: 1; min-width: 0; }
.act-titleline { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.act-title { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.act-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.act-meta .act-who { color: var(--ink-sub); font-weight: 700; }
.act-meta .act-ai { color: var(--muted-head); }
.act-meta .act-sep { color: var(--muted-3); }
.act-sig { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--line-net-2); color: var(--ink-note); background: var(--bg-punch); }
.act-sig.sig-is { color: var(--mint-deep); background: var(--bg-success); border-color: var(--node-mint-soft); }

/* 펼친 상세 */
.act-detail { padding: 4px 16px 18px 38px; }
.act-detail .md { font-size: 13.5px; color: var(--ink-sub); line-height: 1.6; }
.act-group { margin-top: 14px; }
.act-group-label { font-size: 11.5px; font-weight: 800; color: var(--muted-head); text-transform: none; margin-bottom: 7px; }
.act-links { display: flex; flex-direction: column; gap: 6px; }
.act-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-tint); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; max-width: 100%; }
.act-link:hover { border-color: var(--blue); }
.act-link-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.act-rel { font-size: 11px; font-weight: 800; color: var(--muted-head); background: var(--bg-tint-2); border-radius: 5px; padding: 1px 6px; flex: none; }
.act-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-row); }
@media (max-width: 600px) { .act-facts { grid-template-columns: 1fr; } }
.act-fact { display: flex; gap: 10px; font-size: 12.5px; align-items: baseline; }
.act-fact-k { color: var(--muted-head); font-weight: 600; flex: none; min-width: 120px; }
.act-fact-v { color: var(--ink-sub); font-weight: 600; min-width: 0; word-break: break-word; }
/* 펼침 — AI가 기록한 기술 상세 제목(겉엔 쉬운 summary, 펼치면 원제목) */
.act-techtitle { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 12px; padding: 8px 11px; background: var(--bg-tint); border: 1px solid var(--line-row); border-radius: 9px; }
.act-techtitle-label { font-size: 11px; font-weight: 800; color: var(--muted-head); flex: none; }
.act-techtitle-text { font-size: 13px; color: var(--ink-sub); font-weight: 600; min-width: 0; word-break: break-word; }

/* 구성원 섹션 — 내 목록 편집 버튼(우측) + 편집 팝업(검색·체크) */
.dash-edit-btn { margin-left: auto; }
.dash-watch-help { font-size: 13px; color: var(--ink-sub); margin: 0 0 12px; line-height: 1.5; }
.dash-watch-search { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; margin-bottom: 10px; }
.dash-watch-search:focus { outline: none; border-color: var(--blue); }
.dash-watch-list { max-height: 46vh; overflow: auto; border: 1px solid var(--line-row); border-radius: 10px; }
.dash-watch-row { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--line-row); cursor: pointer; }
.dash-watch-row:last-child { border-bottom: none; }
.dash-watch-row:hover { background: var(--bg-tint); }
.dash-watch-row input { flex: none; width: 16px; height: 16px; accent-color: var(--blue); }
.dash-watch-name { font-size: 14px; color: var(--ink); font-weight: 600; }
.dash-watch-tag { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted-head); }
.dash-watch-empty { padding: 16px 13px; font-size: 13px; color: var(--muted); text-align: center; }
.dash-watch-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ── 저장/편집 오버레이 액션 ── */
.ov-actions { display: flex; gap: 10px; margin-top: 16px; }
.ov-box .frow { display: flex; gap: 12px; flex-wrap: wrap; }
.ov-box .frow .field { flex: 1; min-width: 160px; }
.ov-box textarea.admin-ta { min-height: 220px; }

/* ── 종류 레지스트리 테이블(관리) ── */
.kinds-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.kinds-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-row); vertical-align: middle; }
.kinds-table tr:last-child td { border-bottom: none; }
.kinds-table .kr-h { font-size: 12px; font-weight: 700; color: var(--muted-head); border-bottom: 1px solid var(--line); white-space: nowrap; }
.kr-row { cursor: pointer; }
.kr-row:hover { background: var(--bg-tint); }
.kr-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.inject-tag { font-size: 12.5px; font-weight: 600; color: var(--ink-sub); white-space: nowrap; }

/* ── 안내(#/learn) — §0.5 절제: 무채색 카드 + 작은 점만. 채색은 글리프/탭 언더라인 외 없음. ── */
.learn-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
@media (max-width: 820px) { .learn-kinds { grid-template-columns: 1fr; } }
.learn-kind { padding: 18px 20px 16px; }
/* V4: 통합 예정(legacy) 종류 카드 — 약하게(graceful, 무중단 — 행은 유지하되 신규 분류엔 안 씀) */
.learn-kind-legacy { opacity: .72; }
.learn-kind-head { display: flex; align-items: center; gap: 11px; }
.learn-kind-titles { flex: 1; min-width: 0; }
.learn-kind-name { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.learn-kind-en { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.learn-def { margin: 12px 0 4px; font-size: 13.5px; color: var(--ink-sub); line-height: 1.55; }
.learn-def .md-p { margin: 0; }
.learn-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; border-top: 1px solid var(--line-row); padding-top: 12px; }
.learn-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.learn-row-k { font-size: 12px; font-weight: 700; color: var(--muted-head); padding-top: 1px; }
.learn-row-v { font-size: 13px; color: var(--ink-sub); line-height: 1.5; }
.learn-row-v .md-p { margin: 0; }
.learn-kind-foot { margin-top: 14px; }
.learn-src-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.learn-src-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-row); vertical-align: top; font-size: 13px; color: var(--ink-sub); }
.learn-src-table tr:last-child td { border-bottom: none; }
.src-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); white-space: nowrap; }
.dot6.dim { background: var(--muted-2); }
.learn-cadence { color: var(--muted-2); }

/* ════════ 신규(8개 화면 개선) ════════ */

/* (1) 지식 편집 페이지 #/u/<name>/edit — split view(좌 에디터 | 우 실시간 프리뷰) */
.edit-meta-bar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin: 6px 0 16px; }
.edit-meta-bar .field { margin: 0; flex: 1; min-width: 180px; }
.edit-meta-static { flex: 1; min-width: 180px; }
.edit-static-val { display: block; font-size: 13px; color: var(--ink-sub); padding: 7px 0; word-break: break-all; }
.edit-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.edit-pane { display: flex; flex-direction: column; min-width: 0; }
.edit-pane-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-head); margin-bottom: 6px; }
.edit-editor {
  width: 100%; min-height: 60vh; resize: vertical; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px; line-height: 1.6; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); tab-size: 2;
}
.edit-editor:focus { outline: none; border-color: var(--blue); }
.edit-preview {
  min-height: 60vh; max-height: 78vh; overflow: auto; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-tint);
}
.edit-preview > .md > :first-child { margin-top: 0; }
.edit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
@media (max-width: 820px) { .edit-split { grid-template-columns: 1fr; } .edit-editor, .edit-preview { min-height: 42vh; } }

/* (v5b) 유닛 상세 — 단일 컬럼. 메타는 상단 가로 바, 본문은 가독폭. 우측 절반 패널 폐기. */
.unit-card { width: 100%; }
/* 메타 바 — 라벨:값 카드. 와이드에서 auto-fill 로 여러 열을 채워 가로 공간 활용. */
.unit-metabar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 20px; margin: 4px 0 6px; }
.umeta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.umeta-k { font-size: 11px; color: var(--muted); letter-spacing: .01em; }
.umeta-v { font-size: 13px; color: var(--ink); word-break: break-word; }
/* 값 옆 ⓘ 설명 점 — 긴 주입/출처 설명을 호버·클릭 팝오버로 분리(인라인 길이 축소). */
.umeta-v-info { display: inline-flex; align-items: center; gap: 5px; }
.info-dot { position: relative; flex: none; width: 15px; height: 15px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: var(--muted-2); font-size: 12px; line-height: 1; cursor: pointer; }
.info-dot:hover, .info-dot.open { color: var(--blue); }
.info-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; display: none; width: max-content; max-width: 260px; padding: 7px 10px; text-align: left; white-space: normal; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--ink-sub); background: var(--bg); border: 1px solid var(--line-net); border-radius: 8px; box-shadow: 0 4px 16px rgba(21, 35, 59, .12); pointer-events: none; }
.info-dot:hover .info-pop, .info-dot:focus-visible .info-pop, .info-dot.open .info-pop { display: block; }
.unit-meta-details, .unit-history-details { width: 100%; margin: 8px 0; border-top: 1px solid var(--line); padding-top: 8px; }
.unit-meta-summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted-head); list-style: none; padding: 2px 0; }
.unit-meta-summary::-webkit-details-marker { display: none; }
.unit-meta-summary::before { content: '▾ '; color: var(--muted); }
.unit-meta-details:not([open]) .unit-meta-summary::before, .unit-history-details:not([open]) .unit-meta-summary::before { content: '▸ '; }
/* 본문 폭 — 카드 전체너비를 채운다(우측 여백 없이). 가독폭 제한(78ch)은 윤상민 요청으로 해제(2026-06-24). */
.unit-card .unit-body, .unit-card .md-rendered { max-width: none; }
.unit-card .md-rendered .unit-body { max-width: none; }

/* (4) 좌측 주제(space>domain) 위계 */
.area-tree { margin-bottom: 6px; }
.area-tree .area-space { font-weight: 700; margin-top: 4px; }
.area-tree .area-space .tree-label { font-weight: 700; color: var(--ink); }
.area-tree .area-domain { padding-left: 22px; }
.area-tree .area-domain .tree-label { font-weight: 600; }
.area-tree .area-domain .tree-glyph { width: 16px; height: 16px; font-size: 10px; }

/* (6) 관리 헤더 + 반응형(우 섹션 wrap 방지) */
.admin-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-head-l h2 { margin: 0; }
/* 훅 계층 — '훅'은 AI 도구·MCP·DB 와 동급 최상위 항목(클릭 시 개요 설명). 그 아래 런타임·커스텀·미리보기가 들여쓰기 자식(연결선). */
.admin-nav .row.admin-nav-child { padding-left: 34px; position: relative; }
.admin-nav .row.admin-nav-child .row-title { font-size: 13px; color: var(--ink-sub); }
.admin-nav .row.admin-nav-child::before { content: '└'; position: absolute; left: 17px; top: 13px; color: var(--muted); font-size: 11px; }
/* '훅' 개요 — 3 하위(런타임·커스텀·미리보기)로 가는 안내 카드. */
.hooks-ov-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hooks-ov-card { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.hooks-ov-card:hover { background: var(--bg-tint); }
.hooks-ov-title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hooks-ov-desc { font-size: 13px; color: var(--ink-sub); margin-top: 4px; line-height: 1.5; }
/* admin-two(좌 목록·우 편집) 가 좁은 화면에서 wrap 되지 않게 — 기존 760 breakpoint 보강 */
.admin-two { flex-wrap: nowrap; }
@media (max-width: 760px) { .admin-two { flex-wrap: wrap; } }
/* 좌측 nav(220px)+detail 가 더는 안 들어갈 만큼 좁을 때만 스택(탐색탭 820 패턴에 맞춤). */
@media (max-width: 720px) {
  .admin-split { flex-direction: column; }
  .admin-split .split-list { flex: 1 1 auto; }
  .admin-split .split-detail { position: static; width: 100%; }
}

/* (7) 영구삭제(hard-delete) 위험 버튼 + 행 액션 묶음 */
.btn-text-danger { color: var(--coral-text); }
.btn-text-danger:hover { color: var(--coral); }
.row-actions { white-space: nowrap; }
.row-actions .btn-text { padding: 4px 6px; }

/* (검토) 정렬 필터 바 */
.review-filter { margin: 0 0 12px; align-items: center; }
.review-filter .field-label { margin: 0; }

/* 터미널 — 팀 폴더 / 헤더 액션 / 팀원 체크리스트 */
.term-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.term-section-title { font-size: 15px; font-weight: 700; color: var(--ink-sub); margin: 20px 0 8px; }
/* 섹션 헤더 한 줄 — 제목 좌, (있으면) 토글 우. 제목 마진은 행으로 이관해 정렬 유지. */
.term-section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 8px; }
.term-section-row .term-section-title { margin: 0; }
.term-sel-toggle { flex: none; }
.term-checklist { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; }
.term-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 3px 2px; }
.term-check input { margin: 0; flex: 0 0 auto; }
.term-input:disabled { background: var(--bg-soft, #f4f4f6); color: var(--ink-sub); cursor: default; }
/* 배지 — 팀원·세션 메타(공개/비공개·작성자·자동승인 등) 공통 알약형 */
.term-members { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.term-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-sub); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.term-badge.author { color: var(--ink-note); background: var(--bg-tint-2); }
.term-badge.owner { color: var(--ink-note); background: var(--bg-tint-2); border-color: var(--line-note); }
.term-badge.danger { color: #9A5B2E; background: #FBF1E7; border-color: #F0DCC4; }

/* ════ 도메인 맵 (#/domainmap) — 회사맥락 하위. should(의도)·is(구조) 2열 + 괴리/변경이력. ════ */
/* 준비중 안내 배너 — 탭 최상단(프로젝트 #342). 아직 불완전한 기능임을 알린다(warn 앰버 톤: warn-badge·dm-debt 팔레트 재사용). */
.dm-wip { border: 1px solid #F0DBB0; border-left: 3px solid #C9742E; border-radius: 12px; padding: 12px 14px; background: #FFF6E9; }
.dm-wip-title { font-size: 13.5px; font-weight: 800; color: #9A5B2E; }
.dm-wip-sub { font-size: 12.5px; line-height: 1.55; color: #8A6A3A; margin-top: 4px; }
.dm-section { margin-top: 16px; }
.dm-section-hint { font-size: 12.5px; font-weight: 600; color: var(--ink-sub); }
.dm-list { display: flex; flex-direction: column; gap: 10px; }

/* 도메인 카드 — should | is 2열 + 괴리 칩 */
.dm-dom { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
.dm-dom.has-debt { border-color: var(--line-net-2); }
.dm-dom-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-dom-key { font-size: 13px; font-weight: 700; color: var(--ink); }
.dm-dom-name { font-size: 13.5px; color: var(--ink-sub); }
.dm-tag { font-size: 10.5px; font-weight: 700; color: var(--ink-sub); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.dm-debt-chip { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #9A5B2E; background: #FBF1E7; border: 1px solid #F0DCC4; border-radius: 999px; padding: 1px 9px; }
.dm-axes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 720px) { .dm-axes { grid-template-columns: 1fr; } }
.dm-axis { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 9px; background: var(--bg-tint); border: 1px solid var(--line); }
.dm-should { background: #F2FBF8; border-color: #DCEFE8; }   /* 의도 = 민트 계열(서비스 포인트 컬러) */
.dm-axis-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-sub); text-transform: uppercase; }
.dm-axis-val { font-size: 13px; color: var(--ink); line-height: 1.5; }
.dm-axis-empty { font-size: 12.5px; color: var(--muted-2); font-style: italic; }
.dm-prop { color: var(--ink-sub); }

/* 괴리(debt) — should↔is 괴리는 좌측 색띠 강조 */
.dm-debt { border: 1px solid var(--line); border-left: 3px solid var(--line-net-2); border-radius: 9px; padding: 10px 12px; background: var(--bg); }
.dm-sev-should_no_is { border-left-color: #C9742E; background: #FCF6EF; }
.dm-sev-vanished { border-left-color: #B5534A; }
.dm-sev-eroded { border-left-color: #C2A23E; }
.dm-debt-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-sev-tag { font-size: 10.5px; font-weight: 700; color: var(--ink-sub); white-space: nowrap; }
.dm-debt-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.dm-debt-status { margin-left: auto; font-size: 11px; color: var(--muted-2); }
.dm-debt-detail { font-size: 12.5px; color: var(--ink-sub); line-height: 1.55; margin-top: 5px; }

/* 변경 이력(should·is 공통) */
.dm-change { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--bg); }
.dm-change-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-change-dom { font-size: 12.5px; color: var(--ink-sub); }
.dm-change-when { margin-left: auto; font-size: 12px; color: var(--muted-2); }
.dm-diff { display: flex; align-items: stretch; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.dm-diff-side { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 8px; background: var(--bg-tint); border: 1px solid var(--line); }
.dm-after { background: #F2FBF8; border-color: #DCEFE8; }
.dm-diff-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-2); }
.dm-diff-val { font-size: 12.5px; color: var(--ink); line-height: 1.45; white-space: pre-wrap; }
.dm-diff-arrow { align-self: center; color: var(--ink-sub); font-weight: 700; }
.dm-change-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-sub); }
.dm-by-act { display: inline-flex; align-items: center; gap: 6px; }
.dm-act-title { color: var(--ink); }
.dm-change-who { margin-left: auto; color: var(--muted-2); }
.dm-change-noact { color: var(--muted-2); font-style: italic; }
.dm-op-tag { font-size: 10.5px; font-weight: 700; color: var(--ink-sub); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.dm-is-ent { font-size: 12.5px; }
.dm-commit { font-size: 11.5px; color: var(--ink-sub); }

/* ════════ 카테고리(#/categories) — 분류축 트리 CRUD. dm-* / card 시각 언어 재사용, 차분한 톤. ════════ */
/* 카테고리 카드 목록(사업·제품·시스템 공통) */
.cat-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cat-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: var(--bg); }
.cat-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cat-card-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.cat-card-key { font-size: 12px; }
.cat-card-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.cat-card-should { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--ink-sub); white-space: pre-wrap; word-break: break-word; }
.cat-card-should.empty { color: var(--muted-2); font-style: italic; }
.cat-card-desc { margin-top: 5px; font-size: 12.5px; color: var(--muted); word-break: break-word; }

/* 제품 — 도메인맵·의존관계 하위 섹션 헤더 */
.cat-dm-host, .cat-edge-host { margin-top: 18px; }
.cat-sec-head { margin: 6px 0 4px; }
.cat-sec-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }

/* 도메인 의존 관계(category-edges) */
.cat-edges-card { margin-top: 18px; }
.cat-edge-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.cat-edge-group-label { font-size: 12px; font-weight: 700; color: var(--muted-head); letter-spacing: 0.04em; margin: 14px 0 6px; }
.cat-edge-list { display: flex; flex-direction: column; gap: 8px; }
.cat-edge-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: var(--bg); }
.cat-edge-from, .cat-edge-to { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cat-edge-meta { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.cat-edge-ro { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.cat-edge-del { margin-left: auto; color: var(--muted-2); }
.cat-edge-del:hover { color: var(--coral-text); }

/* 프로젝트 보드(#/projects) — 진행 중/완료 두 섹션 + 행 단위 카드. 차분한 톤(채운 색 지양). */
.project-sec-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.project-count { font-size: 12.5px; font-weight: 700; color: var(--muted-2); background: var(--bg-tint); border-radius: 999px; padding: 1px 9px; }
.project-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.project-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.project-main { min-width: 0; flex: 1; }
.project-name { font-size: 15px; font-weight: 700; color: var(--ink); word-break: break-word; }
.project-name.done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-3); }
.project-desc { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink-sub); word-break: break-word; white-space: pre-wrap; }
.project-meta { margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.project-acts { flex: none; }
.project-main-link { cursor: pointer; }
.project-main-link:hover .project-name { color: var(--blue); }
/* 보드 — 카드 타일 그리드 */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px; margin-top: 14px; }
.project-grid.done { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.project-tile { display: flex; flex-direction: column; gap: 9px; min-height: 132px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; background: var(--bg); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.project-tile:hover { border-color: var(--line-net-2); box-shadow: 0 6px 18px rgba(21, 35, 59, .08); transform: translateY(-1px); }
/* 완료 카드 — 더 비활성된 톤(흐린 배경·헤어라인·무채색 텍스트) + 전체클릭 아님(cursor 기본). 접근은 '보기' 버튼. */
.project-tile.done { background: var(--bg-tint); border-color: var(--line-row); min-height: 0; cursor: default; }
.project-tile.done:hover { border-color: var(--line-row); box-shadow: none; transform: none; }  /* 완료는 호버 이펙트 제거 */
.project-tile-name { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.3; word-break: break-word; }
.project-tile.done .project-tile-name { font-size: 14px; color: var(--muted); }
.project-tile.done .project-tile-desc { color: var(--muted-2); }
.project-tile-acts { display: flex; align-items: center; gap: 6px; }
.project-tile-desc { font-size: 13px; color: var(--ink-sub); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-tile-faces { display: flex; align-items: center; }
.project-face { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; border: 2px solid var(--bg); margin-left: -7px; flex: none; }
.project-tile.done .project-face { width: 24px; height: 24px; font-size: 10px; }
.project-face:first-child { margin-left: 0; }
.project-face.more { background: var(--muted-2); }
.project-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
/* 완료 카드(좁은 200px 칼럼): 날짜+버튼2개를 한 줄에 욱여넣어 버튼 글자가 세로로 깨지던 것 → 날짜 위, 버튼 줄 아래로 스택. */
.project-tile.done .project-tile-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.project-tile-meta { font-size: 11.5px; color: var(--muted-2); font-weight: 600; }

/* ── 프로젝트(v2) #/projects2 — 보드 타일 배지 + 태스크 트리 + 연결 지식. 기존 .card/.row/.pill-state 재사용. ── */
.pjv-tile-badge { display: inline-flex; align-items: center; gap: 8px; }
.pjv-tile-members { font-size: 11.5px; font-weight: 600; color: var(--muted-2); }
/* 태스크(클릭업형 리스트뷰) — 상태 그룹 + 컬럼(담당자·마감일·우선순위) + 인라인 편집. 절제: 채운 필 금지, 얇은 선·점 결. */
.pjv-tasks-card .pjv-thead,
.pjv-tasks-card .pjv-addrow.editing,
.pjv-trow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 104px) minmax(0, 100px) minmax(0, 124px) 34px;
  align-items: center;
  gap: 0; /* 표처럼 셀이 붙게(여백 0) — 헤더·행·추가행 동일 격자라 같이 0 으로 둬야 컬럼이 안 어긋남. */
}
.pjv-addrow.editing { padding: 0 6px; }
/* 추가행 셀도 일반 행처럼 셀이 행 높이로 늘어나게(align stretch) + 동일 min-height → 담당자·마감·우선순위 호버 박스가
   이미 만들어진 행의 호버 박스와 같은 크기. (기본 그리드는 align center 라 추가행 셀이 콘텐츠 높이로 줄어 호버 박스가
   작게 떴던 문제 해결. 프로젝트 추가행은 더 아래 .pjv-proj-card 규칙이 min-height 를 46px 로 덮어 행 높이 일치.) */
.pjv-tasks-card .pjv-addrow.editing { align-items: stretch; min-height: 37px; }
/* 컬럼 헤더 — 무거운 행이 아니라 가벼운 라벨 한 줄. 작고 연하게, 구분선 얇게. ('이름' 라벨 제거됨) */
.pjv-thead {
  padding: 4px 6px 6px;
  margin-top: 2px;
  border-bottom: 1px solid var(--line-row);
  font-size: 11.5px; font-weight: 600; color: var(--muted-2);
  letter-spacing: .2px;
}
.pjv-thead .pjv-tcell { padding-left: 2px; }

/* 상태 그룹 — 얇은 밑줄 한 줄로만 섹션 구분(채운 바 금지). caret 은 라벨 오른쪽 끝으로. */
.pjv-tgroup { margin-top: 16px; }
.pjv-tgroup-head { display: flex; align-items: center; gap: 8px; padding: 5px 4px 7px; border-bottom: 1px solid var(--line); }
/* 첫 그룹 헤더 = 행 그리드와 동일 컬럼으로 그려 컬럼 라벨(담당자/마감일/우선순위)을 컬럼 위에 정렬(별도 thead 대체). */
.pjv-tgroup-head.pjv-tgroup-head-cols { display: grid; gap: 0; align-items: center; }
.pjv-tgroup-head-cols .pjv-trow-title-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pjv-colhead { font-size: 11.5px; font-weight: 600; color: var(--muted-2); letter-spacing: .2px; padding-left: 7px; }
.pjv-tgroup-caret { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 10px; padding: 0; border-radius: 4px; }
.pjv-tgroup-caret:hover { color: var(--ink); background: var(--bg-tint); }
.pjv-tgroup-label { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.1px; }
.pjv-tgroup-count { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.pjv-tgroup-body { padding-top: 2px; }
.pjv-tgroup-body[hidden] { display: none; }

/* 한 행 */
.pjv-trow-wrap { display: flex; flex-direction: column; }
.pjv-trow { padding: 0 6px; align-items: stretch; border-bottom: 1px solid var(--line-row); border-radius: 6px; transition: background-color .14s ease; }
.pjv-trow:hover { background: var(--bg-tint); }
/* 행 높이 통일 + 컴팩트(클릭업 느낌). 아이콘/아바타 크기는 유지하고 여백만 축소: 셀버튼 28 + 패딩 8 + 보더 1 ≈ 37px. */
.pjv-trow-wrap > .pjv-trow { min-height: 37px; }
.pjv-trow-title-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* 제목 셀 전체를 클릭 타깃으로(글자뿐 아니라 여백까지) — 캐럿·상태점만 예외(JS 핸들러가 제외). 클릭 가능 신호로 포인터. */
.pjv-trow-wrap > .pjv-trow > .pjv-trow-title-cell { cursor: pointer; }
.pjv-trow-title { flex: 0 1 auto; min-width: 0; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-trow-title.done { color: var(--muted-2); text-decoration: line-through; }
.pjv-trow-subcount { flex: none; font-size: 11px; font-weight: 700; color: var(--muted-2); background: var(--bg-tint-2); border-radius: 8px; padding: 0 6px; line-height: 16px; }
/* 리스트 행 태그 칩(클릭업식) — 이름 옆 작은 색칩, 최대 2 + "+N". */
.pjv-trow-tags { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.pjv-trow-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; line-height: 18px; padding: 1px 8px; border-radius: 10px; color: var(--tag, var(--muted)); background: color-mix(in srgb, var(--tag, var(--muted-3)) 16%, transparent); white-space: nowrap; max-width: 170px; }
.pjv-trow-tag-name { overflow: hidden; text-overflow: ellipsis; }
/* 호버 시 우측 × — 평소엔 폭 0(접힘), 칩 호버 시 펼쳐짐(클릭업식). 클릭=태그 제거. */
.pjv-trow-tag-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 0; height: 15px; overflow: hidden; border: none; background: none; padding: 0; margin: 0; color: inherit; opacity: 0; font-size: 11px; line-height: 1; cursor: pointer; border-radius: 50%; transition: width .12s ease, opacity .12s ease; }
.pjv-trow-tag:hover .pjv-trow-tag-x { width: 15px; opacity: .7; }
.pjv-trow-tag-x:hover { opacity: 1; background: color-mix(in srgb, var(--tag, var(--muted)) 28%, transparent); }
.pjv-trow-tag-more { font-size: 13px; font-weight: 600; color: var(--muted-2); }
.pjv-trow-caret { flex: none; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 10px; padding: 0; border-radius: 4px; }
.pjv-trow-caret:hover { color: var(--ink); background: var(--bg-tint-2); }
.pjv-trow-caret.empty { cursor: default; visibility: hidden; }
.pjv-trow-subs[hidden] { display: none; }

/* 상태 점 — 빈 원(할 일)·반채움(진행)·체크(완료) */
.pjv-status-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.6px dashed var(--muted-3); background: var(--bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; font-size: 10px; line-height: 1; transition: border-color .13s ease, background-color .13s ease; }
.pjv-status-dot:hover { border-color: var(--blue); }
.pjv-status-dot.sm { width: 15px; height: 15px; font-size: 9px; cursor: default; }
/* 할 일 = 점선 원(클릭업식). 진행 중·완료는 실선으로 되돌린다. */
.pjv-status-dot.inprog, .pjv-status-dot.done { border-style: solid; }
.pjv-status-dot.inprog { border-color: var(--blue); color: var(--blue); }
.pjv-status-dot.done { background: var(--mint); border-color: var(--mint); color: #fff; }
.pjv-status-glyph { display: inline-flex; }

/* 컬럼 셀 + 인라인 편집 버튼 */
.pjv-tcell { display: flex; align-items: center; min-width: 0; }
.pjv-tcell-add { justify-content: center; }
/* 셀 전체를 클릭 타깃으로 — 버튼이 셀 폭을 채워, 아이콘뿐 아니라 셀 여백 어디를 눌러도 동작(호버 하이라이트도 셀 전체).
   justify-content:inherit → 셀의 정렬(담당자/마감일/우선순위 셀은 center, 커스텀필드는 left)을 그대로 따라 아이콘 위치 유지. */
.pjv-cell-btn { display: flex; box-sizing: border-box; width: 100%; justify-content: inherit; align-items: center; gap: 5px; border: none; background: none; cursor: pointer; padding: 4px 7px; border-radius: 2px; font-size: 14px; color: var(--ink-sub); box-shadow: inset 0 0 0 1px transparent; transition: background-color .13s ease, box-shadow .13s ease, color .13s ease; }
/* 호버 시 배경색은 그대로 두고 얇은 테두리(박스 링)만 — 흰 박스 채움 없이 클릭 영역만 표시. */
.pjv-cell-btn:hover { box-shadow: inset 0 0 0 1px var(--line); }
/* 모든 셀 버튼(담당자/마감일/우선순위, 채워짐·빈칸 무관) 높이 고정 30px → 행 높이가 아바타 유무에 따라 달라지지 않게.
   (빈 셀의 아이콘 버튼이 39px 로 부풀어 행이 들쭉날쭉하던 문제 해소 — 전 행 49px 통일) */
.pjv-tasks-card .pjv-cell-btn { height: 100%; }
.pjv-cell-btn.empty { color: var(--muted-3); }
.pjv-cell-ph { font-size: 17px; line-height: 1; color: var(--muted-2); transition: color .13s ease; }
.pjv-cell-btn:hover .pjv-cell-ph { color: var(--blue); }
.pjv-cell-ph.sm { width: 16px; text-align: center; font-size: 14px; }
/* margin:0 으로 무관한 전역 `.empty svg { margin:0 auto 14px }` 의 14px 하단 여백 상속을 차단 — 아이콘이 셀 중앙에 오게. (.pjv-tasks-card 스코프로 .empty svg 보다 높은 우선순위) */
.pjv-tasks-card .pjv-cell-ico { width: 17px; height: 17px; flex: none; color: var(--muted-2); display: block; margin: 0; transition: color .13s ease; }
.pjv-cell-btn.empty:hover .pjv-cell-ico { color: var(--blue); }

/* 담당자 아바타 */
.pjv-ava { flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* 마감일 */
.pjv-due-text { font-size: 14px; color: var(--ink-sub); font-weight: 600; }
.pjv-due-text.overdue { color: var(--coral-text); }

/* 우선순위 깃발 */
.pjv-flag { display: inline-flex; align-items: center; gap: 4px; }
.pjv-flag-glyph { font-size: 16px; line-height: 1; }
.pjv-flag-label { font-size: 15px; font-weight: 600; }
.pjv-flag.urgent { color: var(--coral-text); }
.pjv-flag.high { color: #E08A2B; }
.pjv-flag.normal { color: var(--blue); }
.pjv-flag.low { color: var(--muted-2); }

/* 행 오른쪽 끝 ⋯ 더보기 버튼(클릭업식) — 평소 숨김, 행 hover 시 노출. */
.pjv-trow-more { flex: none; border: none; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--muted-2); padding: 0; width: 26px; height: 24px; border-radius: 6px; opacity: 0; transition: opacity .12s ease; }
.pjv-trow:hover .pjv-trow-more { opacity: 1; }
.pjv-trow-more:hover { color: var(--ink); background: var(--bg-tint); }
.pjv-trow-more:focus-visible { opacity: 1; }
/* 이름 변경 팝오버 입력 */
.pjv-rename-pop { padding: 5px; }
.pjv-rename-input { width: 210px; font-size: 13.5px; padding: 6px 9px; border: 1px solid var(--line-net); border-radius: 7px; color: var(--ink); font-family: inherit; }

/* 인라인 추가행(클릭업식) + 빈 상태 */
.pjv-task-total { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.pjv-empty-hint { font-size: 14px; color: var(--ink-sub); padding: 12px 6px 2px; line-height: 1.5; }

/* Closed 토글 버튼(클릭업식 툴바 필) + popover + 스위치 — 닫힌(완료) 항목 노출 제어. */
.pjv-closed-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; padding: 4px 10px 4px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); }
.pjv-closed-btn:hover { background: var(--bg-tint); color: var(--ink); }
.pjv-closed-btn.active { color: var(--blue); border-color: var(--blue); background: var(--bg-tint); }
.pjv-closed-ic { width: 15px; height: 15px; flex: none; }
.pjv-closed-pop { min-width: 172px; padding: 4px; }
.pjv-closed-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 9px; font-size: 13px; color: var(--ink); }
.pjv-switch { position: relative; flex: none; width: 34px; height: 20px; border: none; border-radius: 999px; background: var(--muted-3); cursor: pointer; padding: 0; transition: background .15s ease; }
.pjv-switch.on { background: var(--blue); }
.pjv-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.pjv-switch.on .pjv-switch-knob { transform: translateX(14px); }
.pjv-empty-hint b { color: var(--ink); }
.pjv-empty-chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--blue); background: var(--bg-tint-2); border-radius: 6px; padding: 1px 7px; }
.pjv-addrow { padding: 2px 0; }
.pjv-addrow-trigger { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-start; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--muted); padding: 9px 8px; border-radius: 7px; }
.pjv-addrow-trigger:hover { background: var(--bg-tint-2); color: var(--blue); }
.pjv-addrow-plus { font-size: 15px; line-height: 1; font-weight: 600; }
/* 새 태스크 입력 — 박스 없이 자연스럽게(타이핑하면 태스크 행 제목처럼 보이게). 테두리·배경 제거. */
.pjv-addrow-input { width: 100%; box-sizing: border-box; font-size: 15px; padding: 9px 8px; border: none; background: transparent; color: var(--ink); font-family: inherit; outline: none; }
.pjv-addrow-input::placeholder { color: var(--muted-2); }

/* 인라인 팝오버 + 메뉴 */
.pjv-pop { position: absolute; z-index: 1000; background: var(--bg); border: 1px solid var(--line-net); border-radius: 10px; box-shadow: 0 8px 28px rgba(20,35,59,.13); padding: 5px; min-width: 150px; }
.pjv-menu { display: flex; flex-direction: column; gap: 1px; max-height: 280px; overflow: auto; }
.pjv-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--ink); }
.pjv-menu-item:hover { background: var(--bg-tint-2); }
.pjv-menu-item.sel { background: var(--bg-sel); font-weight: 600; }
.pjv-menu-item.danger { color: var(--coral-text); }
.pjv-menu-empty { padding: 8px 9px; font-size: 12.5px; color: var(--muted-2); }
.pjv-date-pop { padding: 4px; gap: 4px; }
.pjv-date-input { font-size: 13px; padding: 6px 8px; border: 1px solid var(--line-net); border-radius: 7px; color: var(--ink); font-family: inherit; }
/* 연결 지식(필요/산출) — 두 그룹 */
.pjv-kn-group + .pjv-kn-group { margin-top: 18px; }
.pjv-kn-empty { font-size: 13px; color: var(--muted-2); padding: 8px 2px; }
.browse-list .row.pjv-kn-row, .list-box .row.pjv-kn-row { display: block; text-decoration: none; }

/* 프로젝트 상세 — 팀원 선택/칩 */
.proj-members-pick { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.proj-member-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; padding: 3px 2px; }
.proj-member-opt input { width: auto; flex: none; }
/* 팀원 검색-추가 위젯 */
.proj-mp { display: flex; flex-direction: column; gap: 8px; }
.proj-mp-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; align-items: center; }
.proj-mp-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--bg-tint-2); border: 1px solid var(--line-net); border-radius: 999px; padding: 3px 8px 3px 4px; }
.proj-mp-chip-x { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 50%; }
.proj-mp-chip-x:hover { color: var(--ink); background: var(--line); }
.proj-mp-results { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.proj-mp-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border-top: 1px solid var(--line-row); }
.proj-mp-row:first-child { border-top: none; }
.proj-mp-row:hover { background: var(--bg-sel); }
.proj-mp-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.proj-mp-name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); }
.proj-mp-add { flex: none; font-size: 12px; font-weight: 600; color: var(--blue); }
.proj-mp-empty { padding: 12px; font-size: 13px; color: var(--muted-2); text-align: center; }
.proj-member-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-chip { font-size: 12.5px; font-weight: 600; color: var(--ink-sub); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
/* 팀원 한 줄(제목 아래, 박스 없이) — 작은 아바타 + 이름 칩. 액션 버튼과 분리(높이 불일치 제거). */
.proj-team-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 30px; margin: 2px 0 22px; }
.proj-team-row .admin-hint { margin: 0; }

/* 프로젝트 상세 헤더 — 제목(이름+상태칩) 좌 / 액션(완료·삭제) 우 한 줄. 박스 높이·세로정렬 통일. */
.proj-detail-back { margin-bottom: 16px; }
.proj-detail-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.proj-detail-titlebox { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.proj-detail-titlebox h1 { margin: 0; }
.proj-detail-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.proj-detail-desc { margin: 0 0 18px; }
/* 프로젝트 이름·설명 인라인 편집 */
.proj-detail-title-edit { cursor: text; border-radius: 6px; padding: 0 6px; margin-left: -6px; transition: background-color .12s ease; }
.proj-detail-title-edit:hover { background: var(--bg-tint-2); }
.proj-detail-title-input { font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: -0.8px; color: var(--ink); font-family: inherit; border: 1px solid var(--blue); border-radius: 8px; padding: 1px 8px; outline: none; background: var(--bg); max-width: 100%; }
.proj-detail-desc-wrap { margin: 0 0 18px; }
.proj-detail-desc-wrap .proj-detail-desc { margin: 0; }
.proj-detail-desc-edit { cursor: text; border-radius: 6px; padding: 2px 6px; margin-left: -6px; transition: background-color .12s ease; }
.proj-detail-desc-edit:hover { background: var(--bg-tint-2); }
.proj-detail-desc-add { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13.5px; padding: 3px 0; }
.proj-detail-desc-add:hover { color: var(--blue); }
.proj-detail-desc-ta { width: 100%; box-sizing: border-box; font-size: 14px; font-family: inherit; line-height: 1.5; color: var(--ink); border: 1px solid var(--blue); border-radius: 8px; padding: 8px 10px; outline: none; resize: vertical; background: var(--bg); }
/* 본문(마크다운) — 클릭업식: 평소 접힘(높이제한+하단 페이드), 본문 클릭 시 편집. Expand 로 펼침/접기. */
.proj-detail-body-box { position: relative; border-radius: 8px; cursor: text; transition: background-color .12s ease; }
.proj-detail-body-box:hover { background: var(--bg-tint-2); }
.proj-detail-body-box.collapsed { max-height: 116px; overflow: hidden; }
.proj-detail-body-box.collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg)); pointer-events: none; border-radius: 0 0 8px 8px; }
.proj-detail-body { padding: 4px 6px; }
.proj-detail-body > :first-child { margin-top: 0; }
.proj-detail-body > :last-child { margin-bottom: 0; }
/* 펼침 컨트롤 — 접힘 땐 페이드 위에 가운데 떠 있는 작은 알약(노션/클릭업식), 펼치면 본문 아래 가운데. */
.proj-detail-body-wrap { position: relative; }
.proj-detail-body-expand-row { display: flex; justify-content: center; margin-top: 8px; }
.proj-detail-body-wrap.is-collapsed .proj-detail-body-expand-row { position: absolute; left: 0; right: 0; bottom: 6px; margin-top: 0; pointer-events: none; }
.proj-detail-body-wrap.is-collapsed .proj-detail-body-expand-row .proj-detail-body-expand { pointer-events: auto; }
.proj-detail-body-expand { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; box-shadow: 0 1px 4px rgba(21,35,59,.08); transition: color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.proj-detail-body-expand:hover { color: var(--blue); border-color: var(--blue); box-shadow: 0 2px 9px rgba(45,107,240,.16); }
.proj-detail-body-expand .caret { font-size: 9px; line-height: 1; }
/* 본문 편집 — 마크다운 입력칸 + 라이브 미리보기(서식 바·타이핑이 바로바로 렌더). */
/* 위지위그 본문 에디터 — 렌더된 본문 '위에서 바로' 편집(contentEditable). 미리보기 따로 없음. */
.proj-body-wysiwyg { outline: none; min-height: 60px; padding: 4px 6px; cursor: text; border-radius: 8px; }
.proj-body-wysiwyg:focus { outline: none; }
.proj-body-wysiwyg > :first-child { margin-top: 0; }
.proj-body-wysiwyg > :last-child { margin-bottom: 0; }
.proj-body-wysiwyg:empty::before, .proj-body-wysiwyg > p:only-child:empty::before { content: '본문 입력 — 텍스트를 드래그하면 서식 바가 떠요. ⌘/Ctrl+Enter 저장 · Esc 취소'; color: var(--muted-3); pointer-events: none; }
/* 본문 인라인 에디터 — 박스 없이(테두리·배경 없음) 페이지에 녹아드는 편집(클릭업식). 자동 높이(JS), 마크다운 원문 편집. */
.proj-body-editor { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; outline: none; resize: none; overflow: hidden; padding: 4px 6px; margin: 0; font-family: inherit; font-size: 14px; line-height: 1.75; color: var(--ink); min-height: 120px; }
.proj-body-editor::placeholder { color: var(--muted-2); }
/* 선택 시 뜨는 서식 툴바(고정 위치, 선택 위로). */
.fmt-toolbar { position: fixed; z-index: 1000; display: inline-flex; align-items: center; gap: 1px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 26px rgba(21,35,59,.18); }
.fmt-toolbar[hidden] { display: none; }
.fmt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 7px; border: none; background: none; border-radius: 7px; cursor: pointer; color: var(--ink-sub); font-size: 15px; font-weight: 700; line-height: 1; }
.fmt-btn:hover { background: var(--bg-tint); color: var(--ink); }
.fmt-btn.fmt-i { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.fmt-ic { width: 18px; height: 18px; }
/* 코멘트 섹션 — 본문↔태스크 사이, 같은 급. 얇은 가로 스트립(최신 코멘트 카드). 클릭=드로어. */
.pjv-cmt-sec { cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease; }
.pjv-cmt-sec:hover { border-color: var(--line-net); box-shadow: 0 2px 14px rgba(21,35,59,.06); }
.pjv-cmt-sec-head { margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pjv-cmt-sec-head h3 { margin: 0; display: inline-flex; align-items: baseline; gap: 6px; }
.pjv-cmt-sec-count { color: var(--muted-2); font-weight: 700; }
.pjv-cmt-sec-hint { color: var(--muted-2); font-size: 12.5px; white-space: nowrap; }
/* 안 읽은 코멘트 강조 — 헤더 파란 배지 + 섹션 카드 좌측 파란 액센트 + 안읽음 미니 카드 강조. 드로어를 열면 해제. */
.pjv-cmt-unread { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--blue); padding: 1px 9px; border-radius: 9px; align-self: center; }
.pjv-cmt-unread::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.pjv-cmt-sec.pjv-cmt-has-unread { border-color: var(--node-blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.pjv-cmt-mini-unread { border-color: var(--node-blue-soft); box-shadow: inset 3px 0 0 var(--blue); background: var(--bg-tint); }
.pjv-cmt-mini-unread .pjv-cmt-mini-name { font-weight: 800; }
.pjv-cmt-mini-unread .pjv-cmt-mini-name::after { content: '●'; color: var(--blue); font-size: 7px; vertical-align: middle; margin-left: 5px; }
.pjv-cmt-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.pjv-cmt-mini { flex: 0 0 auto; width: 232px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: var(--bg); }
.pjv-cmt-mini-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pjv-cmt-mini-ava { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9.5px; font-weight: 700; }
.pjv-cmt-mini-name { font-weight: 700; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pjv-cmt-mini-time { margin-left: auto; flex: none; font-size: 11px; color: var(--muted-2); }
.pjv-cmt-mini-text { font-size: 12.5px; color: var(--ink-sub); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pjv-cmt-empty-card { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 13px; padding: 4px 2px; }
.pjv-cmt-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--line-net); color: var(--muted-2); }
.pjv-cmt-loading { color: var(--muted-2); font-size: 13px; padding: 4px 2px; }
/* 코멘트 드로어 — 우측에서 슬라이드되는 오버레이(상시 점유 X). 백드롭 클릭/Esc 로 닫힘. */
.cmt-backdrop { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: flex-end; background: rgba(13,22,40,0); transition: background .2s ease; }
.cmt-backdrop.open { background: rgba(13,22,40,.32); }
.cmt-drawer { width: 600px; max-width: 94vw; height: 100%; background: var(--bg); box-shadow: -14px 0 44px rgba(13,22,40,.22); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1); }
.cmt-backdrop.open .cmt-drawer { transform: translateX(0); }
.cmt-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); flex: none; }
.cmt-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.cmt-close { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; flex: none; }
.cmt-close:hover { background: var(--bg-tint); color: var(--ink); }
/* 헤더 우측 액션 — 정렬·검색 토글(보이는 버튼은 기능까지). */
.cmt-head-actions { display: flex; align-items: center; gap: 2px; }
.cmt-hbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: none; cursor: pointer; color: var(--muted); border-radius: 8px; }
.cmt-hbtn:hover { background: var(--bg-tint); color: var(--ink); }
.cmt-hbtn.on { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.cmt-search { flex: none; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.cmt-search[hidden] { display: none; }
.cmt-search-in { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; font: inherit; font-size: 13.5px; outline: none; background: var(--bg); color: var(--ink); }
.cmt-search-in:focus { border-color: var(--blue); }
.cmt-feed { flex: 1; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.cmt-empty { color: var(--muted-2); font-size: 13.5px; text-align: center; padding: 28px 8px; }
/* 코멘트 카드(게시글 모양) — 흰 박스 + 얇은 테두리 + 부드러운 그림자, 호버 시 살짝 들림. 우상단 호버 액션. (이미지 참고) */
.cmt-card { position: relative; display: flex; gap: 11px; padding: 13px 14px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(21,35,59,.04); transition: box-shadow .14s ease, border-color .14s ease; }
.cmt-card:hover { box-shadow: 0 4px 14px rgba(21,35,59,.09); border-color: var(--line-net); }
.cmt-actions { position: absolute; top: 9px; right: 10px; display: inline-flex; align-items: center; gap: 1px; opacity: 0; transition: opacity .12s ease; }
.cmt-card:hover .cmt-actions { opacity: 1; }
.cmt-act { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 7px; cursor: pointer; color: var(--muted-2); }
.cmt-act:hover { background: var(--bg-tint-2); color: var(--ink); }
.cmt-act svg { width: 15px; height: 15px; }
.cmt-emoji-pop { display: flex; gap: 2px; padding: 5px; }
.cmt-emoji-opt { border: none; background: none; cursor: pointer; font-size: 19px; line-height: 1; padding: 5px 6px; border-radius: 8px; }
.cmt-emoji-opt:hover { background: var(--bg-tint); }
.cmt-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.cmt-body { flex: 1; min-width: 0; }
.cmt-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.cmt-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.cmt-time { font-size: 12px; color: var(--muted-2); }
.cmt-text { font-size: 14px; color: var(--ink); line-height: 1.6; word-break: break-word; }
.cmt-text > :first-child { margin-top: 0; }
.cmt-text > :last-child { margin-bottom: 0; }
/* 코멘트 푸터 — 👍 반응(좌) + 답글(우). (이미지 참고) */
.cmt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line-row); }
.cmt-react { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmt-foot-btn { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 3px 8px; border-radius: 8px; line-height: 1.2; }
.cmt-foot-btn:hover { background: var(--bg-tint); color: var(--ink); }
.cmt-like.on { color: var(--blue); }
.cmt-like-n { font-size: 12px; font-weight: 600; }
.cmt-reply { font-weight: 600; }
.cmt-react-chip { border: 1px solid var(--line); background: var(--bg-tint); cursor: pointer; font-size: 12px; padding: 1px 9px; border-radius: 11px; color: var(--ink-sub); line-height: 1.6; }
.cmt-react-chip:hover { border-color: var(--line-net); }
.cmt-react-chip.mine { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
/* 스레드(답글) — 'N개의 답글' 칩 + 스레드 보기. 클릭업 Thread by 참고. */
.cmt-thread-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; padding: 5px 12px 5px 6px; border: 1px solid var(--line); background: var(--bg-tint); border-radius: 999px; cursor: pointer; color: var(--ink-sub); font-size: 12.5px; font-weight: 600; line-height: 1.4; transition: border-color .12s ease, background .12s ease; }
.cmt-thread-pill:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--blue); }
.cmt-thread-pill-avas { display: inline-flex; }
.cmt-thread-pill-ava { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 700; border: 2px solid var(--bg); margin-left: -7px; }
.cmt-thread-pill-avas .cmt-thread-pill-ava:first-child { margin-left: 0; }
.cmt-thread-pill-n { white-space: nowrap; }
.cmt-thread-pill-time { color: var(--muted-2); font-weight: 500; white-space: nowrap; }
.cmt-thread-replies { margin: 2px 0 2px 13px; padding-left: 19px; border-left: 2px solid var(--line); }
.cmt-thread-replies .cmt-card { padding: 12px 14px; }
.cmt-reply-card .cmt-ava { width: 28px; height: 28px; font-size: 11px; }
.cmt-thread-empty { margin: 8px 0 4px 32px; font-size: 13px; color: var(--muted-2); }
.cmt-back { color: var(--ink); }
/* 작성칸 — 드로어 하단 고정(이미지처럼). 크고 편한 멀티라인 카드 + 파란 전송. */
.cmt-composer { flex: none; margin: 10px 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 1px 3px rgba(21,35,59,.04); transition: border-color .14s ease, box-shadow .14s ease; }
.cmt-composer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.cmt-input { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; outline: none; resize: none; padding: 12px 15px 4px; font-family: inherit; font-size: 14.5px; line-height: 1.55; color: var(--ink); min-height: 56px; }
.cmt-composer-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 9px 15px; }
.cmt-composer-hint { font-size: 12px; color: var(--muted-2); }
.cmt-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 10px; background: var(--blue); color: #fff; cursor: pointer; transition: filter .12s ease; }
.cmt-send:hover { filter: brightness(1.07); }
.cmt-send:disabled { opacity: .5; cursor: default; }
/* 상태 토글 — 상태칩 곁의 덜 튀는 보조 버튼(파란 주버튼 자리는 '세부 설정'에 양보) */
.pjv-status-toggle { font-size: 12px; color: var(--ink-sub); padding: 3px 10px; }

/* ── 프로젝트 세부 설정 팝업 ── */
.proj-settings { display: flex; flex-direction: column; gap: 4px; }
.ps-block { padding: 4px 0 16px; }
.ps-block + .ps-block { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 16px; }
.ps-block-title { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; margin: 0 0 4px; }
.ps-block-hint { font-size: 12.5px; color: var(--ink-sub); margin: 0 0 12px; line-height: 1.5; }
.ps-rules-ta { width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--bg-tint); }
.ps-rules-ta:focus { outline: none; border-color: var(--blue); background: #fff; }
.ps-rules-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ps-save-status { font-size: 12px; }
/* 레포/파일 목록 행 (관련 레포 블록 등에서 재사용 — 참고 파일 아이콘/크기 스타일은 #246 에서 제거) */
.ps-refs-list { display: flex; flex-direction: column; margin: 2px 0; }
.ps-refs-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line-row); }
.ps-refs-row:last-child { border-bottom: none; }
.ps-refs-nm { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-kn-group { margin-top: 6px; }
.ps-kn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ps-kn-acts { display: flex; gap: 6px; flex: none; }
.ps-kn-list { display: flex; flex-direction: column; margin-top: 4px; }
.ps-kn-list .ps-kn-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line-row); }
.ps-kn-list .ps-kn-row:last-child { border-bottom: none; }
.ps-kn-row .row-title { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-kn-row .row-title:hover { color: var(--blue); }
.ps-kn-row .row-meta { flex: none; display: flex; align-items: center; }
/* 지식 고르기 팝업 */
.ps-kn-pick { display: flex; flex-direction: column; gap: 10px; }
.ps-kn-pick .proj-file-search { width: 100%; max-width: none; box-sizing: border-box; }
.ps-kn-pick-results { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.ps-kn-pick-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--line-row); }
.ps-kn-pick-row:last-child { border-bottom: none; }
.ps-kn-pick-main { flex: 1; min-width: 0; display: block; text-decoration: none; color: inherit; cursor: pointer; }
.ps-kn-pick-main .row-title { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-kn-pick-main:hover .row-title { color: var(--blue); }
.ps-kn-pick-snip { margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 지식 흐름 섹션(#245) — 필요 지식 → [이 프로젝트] → 산출 지식 을 한 화면에. */
.pjk-head-hint { font-size: 12.5px; color: var(--ink-sub); font-weight: 500; }
.pjk-flow { display: flex; align-items: stretch; gap: 12px; margin-top: 14px; }
.pjk-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: var(--bg); }
.pjk-col-req { background: var(--bg-tint); border-color: var(--line-net); }
.pjk-col-prod { background: var(--bg-success); border-color: #CFEBDF; }
.pjk-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pjk-col-title { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.pjk-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-net); font-size: 12px; font-weight: 700; color: var(--ink-sub); }
.pjk-col-prod .pjk-count { border-color: #CFEBDF; }
.pjk-list { flex: 1; display: flex; flex-direction: column; }
.pjk-empty { font-size: 12.5px; color: var(--muted-2); padding: 10px 2px; line-height: 1.5; }
.pjk-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--line-row); }
.pjk-row:last-child { border-bottom: none; }
.pjk-row-title { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjk-row-title:hover { color: var(--blue); }
.pjk-row-meta { flex: none; display: flex; align-items: center; }
.pjk-row-x { flex: none; width: 22px; height: 22px; border: none; background: transparent; color: var(--muted-2); cursor: pointer; border-radius: 6px; font-size: 12px; line-height: 1; }
.pjk-row-x:hover { background: var(--bg-danger, #FDECEC); color: var(--danger, #D6453C); }
.pjk-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pjk-arrow { flex: none; align-self: center; color: var(--muted-3); font-size: 22px; font-weight: 700; user-select: none; }
.pjk-node { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 160px; padding: 12px 14px; border: 1.5px solid var(--line-net-2); border-radius: 12px; background: var(--bg-punch); text-align: center; }
.pjk-node-label { font-size: 11px; font-weight: 700; color: var(--muted-head); text-transform: uppercase; letter-spacing: .3px; }
.pjk-node-name { font-size: 13px; font-weight: 800; color: var(--ink); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjk-node-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-sub); }
.pjk-node-status.done { color: #1F9D6B; }
.pjk-node-status.inprog { color: var(--blue); }
.pjk-node-glyph { font-size: 11px; }
/* 좁은 화면 — 세로 스택, 화살표는 아래 방향. */
@media (max-width: 720px) {
  .pjk-flow { flex-direction: column; }
  .pjk-arrow { transform: rotate(90deg); align-self: center; }
  .pjk-node { max-width: none; align-self: stretch; }
}
/* 길면 접기 — 본문 섹션과 동일한 클립+페이드(.proj-detail-body-expand 알약 재사용). */
.pjk-collapse { position: relative; }
.pjk-collapse.collapsed { max-height: 300px; overflow: hidden; }
.pjk-collapse.collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg)); pointer-events: none; }
.pjk-expand-row { margin-top: 10px; }
/* 직접 작성 모달 입력 */
.pjk-create-in { width: 100%; box-sizing: border-box; padding: 7px 9px; font: inherit; border: 1px solid var(--line-net); border-radius: 8px; }
.pjk-create-cat { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* 지식 흐름(#317) — '왜' 배너 + 필요 빈칸 추천 인라인 + 픽커 관계토글. §0.5 절제: 무채색·작은 글자. */
.pjk-why { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--line-net); border-radius: 10px; background: var(--bg-tint); }
.pjk-why-ico { flex: none; color: var(--ink-sub); font-size: 13px; line-height: 1.55; }
.pjk-why-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-sub); line-height: 1.55; }
.pjk-why-text a { color: var(--blue); text-decoration: none; }
.pjk-why-text a:hover { text-decoration: underline; }
.pjk-why-x { flex: none; width: 20px; height: 20px; border: none; background: transparent; color: var(--muted-2); cursor: pointer; border-radius: 6px; font-size: 11px; line-height: 1; }
.pjk-why-x:hover { background: var(--bg); color: var(--ink); }
.pjk-rec { display: flex; flex-direction: column; }
.pjk-rec-head { font-size: 12px; font-weight: 700; color: var(--ink-sub); padding: 4px 2px 6px; }
.pjk-rec-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px solid var(--line-row); }
.pjk-rec-row:last-child { border-bottom: none; }
.pjk-rec-title { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjk-rec-title:hover { color: var(--blue); }
.pjk-rec-pct { flex: none; font-size: 11px; }
.pjk-rec-row .btn { flex: none; padding: 3px 8px; font-size: 12px; }
.ps-kn-sec { font-size: 12px; font-weight: 700; color: var(--ink-sub); padding: 2px 2px 0; }
.pjk-rel-row { display: flex; align-items: center; gap: 14px; margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line-row); }
.pjk-rel-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.pjk-rel-opt input { margin: 0; }

/* 일괄 선택(대시보드) — 액션바 + 선택 가능한 타일 체크 + 솔리드 삭제 버튼. */
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 11px 16px; background: var(--bg-sel); border: 1px solid var(--line-net); border-radius: 12px; }
.bulk-bar-count { font-size: 14px; font-weight: 700; color: var(--ink); }
.bulk-bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.project-tile.select-mode { cursor: pointer; }
/* 세션 일괄삭제 — 선택모드 행(체크박스 + 메타). 행 전체가 토글되도록 label. */
.term-row--sel { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.term-row-check { display: flex; align-items: center; flex-shrink: 0; }
.term-row-check input { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.project-tile.select-mode .project-tile-name { padding-right: 28px; }
.project-tile.selectable { position: relative; }
.project-tile-check { position: absolute; top: 13px; right: 13px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-net-2); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; line-height: 1; }
.project-tile.selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: var(--bg-sel); }
.project-tile.selected .project-tile-check { background: var(--blue); border-color: var(--blue); }
.project-tile.not-selectable { opacity: .5; cursor: default; }
.project-tile.not-selectable:hover { border-color: var(--line); box-shadow: none; transform: none; }
.project-tile-mine-no { font-size: 11.5px; color: var(--muted-2); font-weight: 600; }
.btn-danger { background: var(--coral); color: #fff; border: 1px solid var(--coral); }
.btn-danger:hover { background: var(--coral-text); border-color: var(--coral-text); }
.proj-team-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 13px 3px 4px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); }
.proj-team-ava { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.proj-team-edit { border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); padding: 5px 13px; border-radius: 999px; }
.proj-team-edit:hover { border-color: var(--line-net-2); color: var(--blue); }
/* 상세 ① 공유 폴더 */
.proj-file-search { max-width: 180px; }
.card.drop-active { outline: 2px dashed var(--line-net-2); outline-offset: -4px; background: var(--bg-tint); }
.proj-file-list { display: flex; flex-direction: column; }
.proj-file-crumb { font-size: 12.5px; color: var(--ink-sub); padding: 4px 2px 10px; }
.proj-crumb-link { color: var(--blue); cursor: pointer; font-weight: 600; }
.proj-file-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line-row); }
.proj-file-row:first-child { border-top: none; }
.proj-file-row.dir { cursor: pointer; }
.proj-file-row.dir:hover { background: var(--bg-sel); }
.proj-file-ic { flex: none; width: 18px; text-align: center; }
.proj-file-nm { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); word-break: break-all; }
.proj-file-sz { flex: none; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
/* 공유 폴더 — 가로 카드 그리드(6열 균등 + 횡스크롤), 큰 아이콘. 파일 클릭 → 뷰어/편집 팝업. */
.proj-file-grid { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding: 8px 2px 14px; }
/* 맥 데스크탑 아이콘 느낌 — 박스 없이 큰 아이콘 + 이름, 호버 시 은은한 선택 배경. */
.proj-file-card { flex: 0 0 124px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; border-radius: 10px; padding: 14px 6px 12px; cursor: pointer; background: transparent; transition: background .12s ease; }
.proj-file-card:hover { background: var(--bg-sel); }
.proj-file-card:active { background: var(--bg-tint-2); }
.proj-file-card-ic { height: 72px; display: flex; align-items: center; justify-content: center; }
.proj-file-card-ic .ft { filter: drop-shadow(0 1px 2px rgba(21, 35, 59, .12)); }
.proj-file-card-ic .ft-file { width: 57px; height: 68px; }
.proj-file-card-ic .ft-folder { width: 76px; height: auto; }
.proj-file-card-ic .ft-img { width: 70px; height: 70px; }
/* ── 파일 미리보기(.ft) — 문서 색 아이콘 · 이미지 썸네일 · 폴더 ── */
.ft { display: block; }
.ft-page { fill: #fff; stroke: var(--line-net); stroke-width: 1; }
.ft-fold { fill: var(--line-net-2); }
.ft-band { fill: var(--muted); }
.ft-label { fill: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .2px; font-family: ui-sans-serif, system-ui, sans-serif; }
.ft-pdf .ft-band { fill: #E5484D; }
.ft-word .ft-band { fill: #2B6CB0; }
.ft-ppt .ft-band { fill: #E2683C; }
.ft-xls .ft-band { fill: #1F9D63; }
.ft-zip .ft-band { fill: #8A6BB0; }
.ft-av .ft-band { fill: #5A6B85; }
.ft-txt .ft-band { fill: #7A88A3; }
.ft-folder-tab { fill: #7FA8E8; }
.ft-folder-body { fill: #A9C6F2; }
.ft-img { overflow: hidden; border-radius: 7px; background: var(--bg-tint); border: 1px solid var(--line); box-sizing: border-box; }
.ft-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-img:not(.loaded) img { opacity: 0; }
.proj-file-card-nm { font-size: 12px; color: var(--ink); text-align: center; line-height: 1.35; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; padding: 0 2px; }
.proj-file-card-sz { font-size: 10.5px; color: var(--muted-2); }
/* 업로드 중 카드 — 비활성 아이콘 + 실시간 % + 진행 막대 */
.proj-file-card.uploading { cursor: default; pointer-events: none; }
.proj-file-card.uploading .proj-file-card-ic { opacity: .3; filter: grayscale(1); }
.proj-up-icwrap { position: relative; display: flex; align-items: center; justify-content: center; }
.proj-up-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.proj-up-pct { font-size: 14px; font-weight: 800; color: var(--ink); }
.proj-up-bar { width: 100%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 4px; }
.proj-up-bar-fill { height: 100%; width: 0; background: var(--blue); transition: width .15s ease; }
/* '전체 보기' 팝업 — 넓은 모달 + 여러 행 그리드(횡스크롤 없이 다 보임). */
.ov-box-wide { max-width: 920px; }
/* '전체 보기' — 깔끔한 파일 목록(행 호버 시 아이콘 액션). */
.proj-fg-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.proj-fg-head .proj-file-search { flex: 1; max-width: none; box-sizing: border-box; }
.proj-fg-actions { display: flex; gap: 6px; flex: none; }
.proj-file-llist { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; margin-top: 2px; }
.proj-file-lrow { display: flex; align-items: center; gap: 11px; padding: 9px 8px; cursor: pointer; border-bottom: 1px solid var(--line-row); }
.proj-file-llist > .proj-file-lrow:last-child { border-bottom: none; }
.proj-file-lrow:hover { background: var(--bg-sel); }
.proj-file-lic { flex: none; width: 26px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; }
.proj-file-lic .fic { width: 18px; height: 18px; }
.proj-file-lic .fic-dir { color: var(--ink-sub); }
.proj-file-lic .ft-file { width: 18px; height: 22px; }
.proj-file-lic .ft-folder { width: 24px; height: auto; }
.proj-file-lic .ft-img { width: 22px; height: 22px; border-radius: 5px; }
.proj-file-lnm { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-file-lnm.is-dir { font-weight: 600; }
.proj-file-lsz { flex: none; min-width: 62px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.proj-file-lacts { flex: none; display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease; margin-left: 2px; }
.proj-file-lrow:hover .proj-file-lacts { opacity: 1; }
/* 단색 라인 아이콘 — currentColor 상속, 획굵기만 여기서. (.proj-file-lic / .proj-file-card-ic 가 크기·색 지정) */
.fic { display: block; stroke-width: 1.6px; }
.proj-file-iconbtn { width: 28px; height: 28px; border: none; background: none; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.proj-file-iconbtn:hover { background: var(--line); color: var(--ink); }
.proj-file-iconbtn.danger:hover { background: #FDEAE6; color: #D14A32; }
.proj-file-edit { width: 100%; min-height: 52vh; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
.proj-file-img { max-width: 100%; max-height: 64vh; display: block; margin: 0 auto; border-radius: 8px; }
.proj-file-pdf { width: 100%; height: 74vh; border: none; border-radius: 8px; background: #fff; }
/* 상세 ② 터미널 세션 */
.proj-sess-list { display: flex; flex-direction: column; gap: 8px; }
.proj-sess-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.proj-sess-main { min-width: 0; }
.proj-sess-name { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.proj-sess-live { font-size: 11.5px; font-weight: 600; color: #3DBE94; }
.proj-sess-meta { margin-top: 3px; font-size: 12px; color: var(--muted-2); }
.proj-sess-acts { display: flex; gap: 6px; flex: none; align-items: center; }
/* 팀원 프로필 그리드(아바타 폴더) */
.proj-term-card { padding-bottom: 36px; } /* 상단 여백(43px)과 균형 — 상태 아래 ~ 박스 하단 */
.proj-people-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 8px 0 4px; }
.proj-person { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 124px; padding: 10px 6px 8px; border-radius: 14px; cursor: pointer; transition: background .12s ease; }
.proj-person:hover { background: var(--bg-sel); }
.proj-person.active { background: var(--bg-tint-2); }
.proj-person.dragging { opacity: .4; }
.proj-person.drop-target { background: var(--bg-tint-2); outline: 2px dashed var(--line-net-2); outline-offset: -2px; }
.proj-avatar { position: relative; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 27px; font-weight: 700; box-shadow: 0 2px 5px rgba(21, 35, 59, .2); }
.proj-avatar-badge { position: absolute; top: -2px; right: -2px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--bg); box-sizing: border-box; }
.proj-person-name { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-person-status { font-size: 12.5px; line-height: 1.35; text-align: center; max-width: 112px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; box-sizing: border-box; }
.proj-person-status:empty { display: none; } /* 상태 안 적은 사람 — 빈 칸이 높이 차지하지 않게 */
.proj-person-status.filled { color: var(--ink-sub); background: var(--bg-tint); padding: 3px 10px; border-radius: 10px; font-weight: 500; }
.proj-person-status.me { cursor: pointer; }
.proj-person-status.empty.me { color: var(--blue); border: 1px dashed var(--line-net-2); padding: 3px 11px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.proj-person-status.empty.me:hover { background: var(--bg-tint); border-color: var(--blue); }
.proj-person-status.filled.me:hover { background: var(--bg-tint-2); }
.proj-status-pen { color: var(--muted-2); font-size: 10px; }
.proj-person-status.filled.me:hover .proj-status-pen { color: var(--blue); }
.proj-people-panel { margin-top: 0; }
.proj-people-panel:empty { display: none; }
.proj-panel-head { display: flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--ink); padding: 6px 2px 10px; border-top: 1px solid var(--line); margin-top: 0; }
.proj-panel-cnt { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.proj-sess-auto { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.proj-sess-auto input { width: auto; flex: none; }
/* 상세 ③ 타임라인 */
.proj-tl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.proj-tl-chip { font-size: 12.5px; font-weight: 600; color: var(--ink-sub); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.proj-tl-chip.active { background: var(--bg-sel); color: var(--ink); border-color: var(--line-net-2); }
.proj-tl-list { display: flex; flex-direction: column; }
.proj-tl-row { display: flex; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line-row); }
.proj-tl-row:first-child { border-top: none; }
.proj-tl-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--muted-2); }
.proj-tl-dot.tone-mint { background: #3DBE94; }
.proj-tl-dot.tone-blue { background: var(--blue); }
.proj-tl-dot.tone-coral { background: #E8826B; }
.proj-tl-dot.tone-teal { background: #2BA6A6; }
.proj-tl-main { min-width: 0; flex: 1; }
.proj-tl-summary { font-size: 13.5px; color: var(--ink); word-break: break-word; }
.proj-tl-meta { margin-top: 3px; font-size: 12px; color: var(--muted-2); }
.proj-tl-note { display: flex; gap: 7px; font-size: 12px; color: var(--ink-sub); line-height: 1.55; margin: 8px 0 2px; background: var(--bg-tint); border-radius: 8px; padding: 9px 11px; }
.proj-tl-note-ic { flex: none; color: var(--muted-2); }
.proj-tl-more { margin-top: 10px; }

/* 작업(activity) 타임라인 한 줄 — 접힘(캐럿+유형칩+요약/메타) → 클릭 펼침(본문·연결·변경). #/projects2 회사전체·#/dash 공용. */
.act-row { border-top: 1px solid var(--line-row); }
.act-row:first-child { border-top: none; }
.act-row-head { display: flex; align-items: flex-start; gap: 9px; padding: 10px 6px; }
.act-row-expandable > .act-row-head { cursor: pointer; border-radius: 9px; }
.act-row-expandable > .act-row-head:hover { background: var(--bg-tint); }
.act-row-caret { flex: none; width: 12px; text-align: center; color: var(--muted-2); font-size: 10px; line-height: 20px; }
.act-row-caret-empty { visibility: hidden; }
.act-row.open > .act-row-head .act-row-caret { color: var(--ink-sub); }
.act-row-head > .act-type { flex: none; margin-top: 2px; }
.act-row-body { min-width: 0; flex: 1; }
.act-row-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.42; word-break: break-word; }
.act-row-meta { margin-top: 3px; font-size: 12px; color: var(--muted-2); }
.act-row-who { color: var(--ink-sub); font-weight: 600; }
.act-row-agent { color: var(--muted-2); }
.act-row-time { color: var(--muted-2); }
.act-row-tag { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--ink-note); background: var(--bg-note); border: 1px solid var(--line-note); border-radius: 6px; padding: 0 6px; line-height: 16px; vertical-align: 1px; }
.act-row-detail { margin: 0 6px 11px 33px; padding: 11px 14px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.act-row-tech { font-size: 12.5px; font-weight: 700; color: var(--ink); word-break: break-word; }
.act-row-note { font-size: 13px; color: var(--ink-sub); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.act-row-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12.5px; }
.act-row-sec-label { flex: none; font-weight: 700; color: var(--muted-head); font-size: 11px; letter-spacing: .3px; min-width: 40px; }
.act-row-links { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.act-row-link { color: var(--blue); text-decoration: none; font-weight: 600; word-break: break-word; }
.act-row-link:hover { text-decoration: underline; }
.act-row-chg { color: var(--ink-sub); }
.act-row-exact { font-size: 11px; color: var(--muted-2); }

/* 붙여넣기 이름 지정 팝업 — 동작 안내 + [이름][.확장자 고정태그]. */
.paste-action { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-sub); line-height: 1.55; }
.paste-action b { color: var(--ink); font-weight: 700; }
.paste-name-row { display: flex; align-items: stretch; gap: 8px; }
.paste-name-row input { flex: 1; min-width: 0; }
.paste-ext { flex: none; display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--ink-sub); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 9px; }

/* 공유 폴더 카드 — 선택(일괄삭제) 모드 체크박스 + 선택 강조. */
.proj-file-card { position: relative; }
.proj-file-card.select-mode { cursor: pointer; }
.proj-file-check { position: absolute; top: 6px; right: 10px; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-net-2); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; line-height: 1; }
.proj-file-card.selected { background: var(--bg-sel); box-shadow: inset 0 0 0 1.5px var(--blue); }
.proj-file-card.selected .proj-file-check { background: var(--blue); border-color: var(--blue); }

/* ── 커스텀 필드(클릭업형 "+ 컬럼 추가") — 우리 톤(단색 라인 아이콘·차분한 칩). 끝에 append. ── */
.pjv-ficon { width: 16px; height: 16px; flex: none; color: var(--ink-sub); }

/* 셀 래퍼 + 표시값 */
/* 커스텀 필드 래퍼도 셀을 꽉 채워야(width/height:100%) 안의 .pjv-cell-btn 이 셀 전체로 퍼져 호버·클릭이 표 칸처럼 동작. */
.pjv-fcell-wrap { display: flex; width: 100%; height: 100%; align-items: center; min-width: 0; }
.pjv-fval { font-size: 13.5px; color: var(--ink-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pjv-flink { color: var(--blue); }
.pjv-flabels { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; }

/* 옵션 칩(드롭다운/라벨) */
.pjv-fopt { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--opt) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--opt) 34%, #fff); border-radius: 999px; padding: 1px 9px 1px 7px; }
.pjv-fopt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--opt); }
.pjv-fopt-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 체크박스 셀 */
.pjv-fcheck { border: none; background: none; cursor: pointer; padding: 3px; border-radius: 6px; color: var(--muted-3); display: inline-flex; }
.pjv-fcheck:hover { background: var(--bg-tint-2); color: var(--muted); }
.pjv-fcheck.on { color: var(--mint); }
.pjv-fcheck-ic { width: 18px; height: 18px; }

/* 별점 셀 */
.pjv-frating { display: inline-flex; align-items: center; gap: 1px; }
.pjv-fstar { border: none; background: none; cursor: pointer; padding: 1px; border-radius: 4px; color: var(--muted-3); display: inline-flex; }
.pjv-fstar:hover { color: #E0A93B; }
.pjv-fstar.on { color: #E8B23E; }
.pjv-fstar-ic { width: 16px; height: 16px; }

/* 진행률 셀 */
.pjv-fprog { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pjv-fprog-track { width: 56px; height: 6px; border-radius: 999px; background: var(--bg-tint-2); overflow: hidden; flex: none; }
.pjv-fprog-fill { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.pjv-fprog-num { font-size: 12px; font-weight: 600; color: var(--ink-sub); font-variant-numeric: tabular-nums; }

/* 티셔츠 사이즈 칩 */
.pjv-fsize { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 1px 7px;
  font-size: 12px; font-weight: 700; color: var(--ink-sub); background: var(--bg-tint-2); border-radius: 6px; letter-spacing: .2px; }

/* 값 편집기(팝오버 안) */
.pjv-field-editor { display: flex; flex-direction: column; gap: 8px; padding: 4px; min-width: 200px; }
.pjv-field-editor.wide { min-width: 280px; }
.pjv-field-input { width: 100%; box-sizing: border-box; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line-net); border-radius: 8px; color: var(--ink); font-family: inherit; outline: none; }
.pjv-field-input:focus { border-color: var(--blue); }
.pjv-field-textarea { width: 100%; box-sizing: border-box; font-size: 13.5px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line-net); border-radius: 8px; color: var(--ink); font-family: inherit; outline: none; resize: vertical; }
.pjv-field-textarea:focus { border-color: var(--blue); }
.pjv-fe-actions { display: flex; align-items: center; gap: 6px; }
.pjv-fe-btn { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--line-net); background: var(--bg); color: var(--ink-sub); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.pjv-fe-btn:hover { background: var(--bg-tint-2); }
.pjv-fe-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.pjv-fe-btn.primary:hover { filter: brightness(1.05); background: var(--blue); }
.pjv-fe-btn.danger { color: var(--coral-text); border-color: transparent; margin-left: auto; }
.pjv-fe-btn.danger:hover { background: var(--bg-tint-2); }

/* 진행률 편집기 */
.pjv-prog-editor { min-width: 240px; }
.pjv-prog-row { display: flex; align-items: center; gap: 12px; }
.pjv-prog-range { flex: 1; accent-color: var(--blue); }
.pjv-prog-pct { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--ink-sub); }
.pjv-prog-num-input { width: 46px; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line-net); border-radius: 6px; color: var(--ink); font-family: inherit; text-align: right; }

/* 즉석 옵션 추가 행(드롭다운/라벨 편집기 하단) */
.pjv-opt-add { padding: 3px 2px 1px; border-top: 1px solid var(--line-row); margin-top: 2px; }
.pjv-opt-add-input { width: 100%; box-sizing: border-box; font-size: 12.5px; padding: 6px 9px; border: 1px dashed var(--line-net); border-radius: 7px; color: var(--ink); font-family: inherit; outline: none; }
.pjv-opt-add-input:focus { border-color: var(--blue); border-style: solid; }

/* 라벨 체크 미니 */
.pjv-check-mini { width: 16px; height: 16px; flex: none; color: var(--muted-3); }
.pjv-check-mini.on { color: var(--blue); }

/* 컬럼 헤더(커스텀) */
/* 커스텀 필드 헤더를 표준 헤더(.pjv-colhead: 13px·600·muted)와 동일한 폰트/색으로 — 타입 아이콘은 표준처럼 숨김. */
.pjv-thcol { gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .2px; }
.pjv-thcol-ic { display: none; }
.pjv-thcol-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-thcol-menu { flex: none; border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 5px; opacity: 0; transition: opacity .12s ease; }
.pjv-thcol:hover .pjv-thcol-menu { opacity: 1; }
.pjv-thcol-menu:hover { color: var(--ink); background: var(--bg-tint-2); }

/* (+) 컬럼 추가 버튼 */
.pjv-addcol-btn { border: none; background: none; cursor: pointer; color: var(--muted-2); padding: 3px; border-radius: 6px; display: inline-flex; }
.pjv-addcol-btn:hover { color: var(--blue); background: var(--bg-tint-2); }
.pjv-addcol-ic { width: 18px; height: 18px; }

/* Fields 패널 */
.pjv-fields-panel { width: 280px; max-height: min(70vh, 540px); display: flex; flex-direction: column; }
.pjv-fields-head { padding: 4px 6px 8px; }
.pjv-fields-title { font-size: 14px; font-weight: 800; color: var(--ink); }
.pjv-fields-search { width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px 11px; border: 1px solid var(--line-net); border-radius: 8px; color: var(--ink); font-family: inherit; outline: none; margin-bottom: 8px; }
.pjv-fields-search:focus { border-color: var(--blue); }
.pjv-fields-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pjv-fields-tab { border: none; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pjv-fields-tab:hover { color: var(--ink-sub); }
.pjv-fields-tab.on { color: var(--blue); border-bottom-color: var(--blue); }
.pjv-fields-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px; }
.pjv-fields-sec { font-size: 11px; font-weight: 700; color: var(--muted-2); letter-spacing: .3px; padding: 6px 8px 3px; }
.pjv-fields-empty { font-size: 12.5px; color: var(--muted-2); padding: 14px 8px; text-align: center; }
.pjv-field-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 8px 9px; border-radius: 8px; }
.pjv-field-opt:hover { background: var(--bg-tint-2); }
.pjv-field-opt-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--bg-tint); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-sub); }
.pjv-field-opt-ic .pjv-ficon { width: 16px; height: 16px; }
.pjv-field-opt-tx { display: flex; flex-direction: column; min-width: 0; }
.pjv-field-opt-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pjv-field-opt-desc { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 형식 설정 폼 */
.pjv-fcfg { width: 280px; display: flex; flex-direction: column; gap: 7px; padding: 2px; }
.pjv-fcfg-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 4px; }
.pjv-fcfg-back { border: none; background: none; cursor: pointer; font-size: 16px; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.pjv-fcfg-back:hover { color: var(--ink); background: var(--bg-tint-2); }
.pjv-fcfg-ic { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--bg-tint); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-sub); }
.pjv-fcfg-ic .pjv-ficon { width: 15px; height: 15px; }
.pjv-fcfg-title { font-size: 14px; font-weight: 800; color: var(--ink); }
.pjv-fcfg-lbl { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .2px; margin-top: 2px; }
.pjv-fcfg-name, .pjv-fcfg-sel { width: 100%; box-sizing: border-box; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line-net); border-radius: 8px; color: var(--ink); font-family: inherit; outline: none; background: var(--bg); }
.pjv-fcfg-name:focus, .pjv-fcfg-sel:focus { border-color: var(--blue); }
.pjv-fcfg-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pjv-fcfg-create { flex: 1; font-size: 13px; font-weight: 700; padding: 9px; border-radius: 8px; border: none; background: var(--blue); color: #fff; cursor: pointer; }
.pjv-fcfg-create:hover { filter: brightness(1.05); }
.pjv-fcfg-cancel { font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line-net); background: var(--bg); color: var(--ink-sub); cursor: pointer; }
.pjv-fcfg-cancel:hover { background: var(--bg-tint-2); }

/* 옵션 빌더(생성/편집 공용) */
.pjv-optb { display: flex; flex-direction: column; gap: 6px; }
.pjv-optb-rows { display: flex; flex-direction: column; gap: 6px; }
.pjv-optb-row { display: flex; align-items: center; gap: 8px; }
.pjv-optb-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; background: var(--opt); box-shadow: 0 0 0 1px var(--line-net); cursor: pointer; padding: 0; }
.pjv-optb-input { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line-net); border-radius: 7px; color: var(--ink); font-family: inherit; outline: none; }
.pjv-optb-input:focus { border-color: var(--blue); }
.pjv-optb-rm { flex: none; border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.pjv-optb-rm:hover { color: var(--coral-text); background: var(--bg-tint-2); }
.pjv-optb-add { align-self: flex-start; border: none; background: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--blue); padding: 4px 6px; border-radius: 6px; }
.pjv-optb-add:hover { background: var(--bg-tint-2); }

/* 더블클릭 → 하위 태스크 인라인 추가 입력 */
.pjv-subadd { padding: 6px 6px 6px 28px; }

/* ── 태스크 상세 모달(클릭업형 팝업) #/projects2 ── */
body.pjv-tm-open { overflow: hidden; }
.pjv-tm-back { position: fixed; inset: 0; background: rgba(21,35,59,.5); display: flex; align-items: center; justify-content: center; padding: 4vh 20px; z-index: 210; }
.pjv-tm { display: flex; width: min(1180px, 96vw); height: min(90vh, 920px); background: var(--bg); border: 1px solid var(--line-net); border-radius: 14px; box-shadow: 0 24px 70px rgba(20,35,59,.30); overflow: hidden; }
.pjv-tm-loading { padding: 40px; color: var(--muted-2); font-size: 14px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* 좌측(상세) */
.pjv-tm-main { flex: 1.55; min-width: 0; overflow-y: auto; padding: 18px 28px 40px; }
.pjv-tm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pjv-tm-crumb { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted-2); min-width: 0; }
.pjv-tm-crumb-link { color: var(--ink-sub); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-tm-crumb-link:hover { color: var(--blue); }
.pjv-tm-x { border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: 16px; width: 30px; height: 30px; border-radius: 8px; flex: none; }
.pjv-tm-x:hover { background: var(--bg-tint-2); color: var(--ink); }
.pjv-tm-typebar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pjv-tm-typepill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 700; color: var(--ink-sub); }
.pjv-tm-typedot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted-3); }
.pjv-tm-subcount { font-size: 12.5px; color: var(--muted-2); }
.pjv-tm-title { width: 100%; border: none; resize: none; overflow: hidden; font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -0.5px; color: var(--ink); background: none; padding: 4px 0; margin-bottom: 8px; font-family: inherit; }
.pjv-tm-title:focus { outline: none; background: var(--bg-tint); border-radius: 6px; }

/* 필드 그리드(2열) */
.pjv-tm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; padding: 8px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pjv-tm-field { display: grid; grid-template-columns: 18px 96px 1fr; align-items: center; gap: 8px; min-height: 36px; }
.pjv-tm-field-ico { font-size: 13px; color: var(--muted-2); text-align: center; filter: grayscale(1); opacity: .7; }
.pjv-tm-field-label { font-size: 13.5px; color: var(--muted-2); font-weight: 600; }
.pjv-tm-field-val { min-width: 0; }
.pjv-tm-valbtn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; font-size: 13.5px; color: var(--ink); padding: 4px 8px; border-radius: 7px; max-width: 100%; }
.pjv-tm-valbtn:hover { background: var(--bg-tint-2); }
.pjv-tm-valbtn.empty { color: var(--muted-3); }
.pjv-tm-valtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjv-tm-statuspill { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .4px; color: #fff; background: var(--muted-2); padding: 5px 12px; border-radius: 7px; }
.pjv-tm-statuspill.todo { background: var(--muted-2); }
.pjv-tm-statuspill.inprog { background: var(--blue); }
.pjv-tm-statuspill.done { background: var(--mint); }
.pjv-tm-dates { display: inline-flex; align-items: center; gap: 4px; }
.pjv-tm-datebtn { border: none; background: none; cursor: pointer; font-size: 13.5px; color: var(--ink); padding: 4px 8px; border-radius: 7px; }
.pjv-tm-datebtn:hover { background: var(--bg-tint-2); }
.pjv-tm-datebtn.empty { color: var(--muted-3); }
.pjv-tm-datebtn.overdue { color: var(--coral-text); font-weight: 700; }
.pjv-tm-datearrow { color: var(--muted-3); font-size: 12px; }
/* 프로젝트 상세 헤더의 메타 패널 — 모달과 동일 결, 팀원 칩 아래 간격. 태그 피커 팝오버. */
.pjv-proj-meta { margin-top: 14px; }
/* 메타 패널 안의 보드 셀 컨트롤(우선순위 등)을 태그 'Empty'처럼 — 값셀 전체폭/가운데정렬이 아니라 좌측 컴팩트 + 태그형 호버.
   (보드 표의 .pjv-cell-btn 은 그대로; 여기 메타 안에서만 좁힌다.) */
.pjv-proj-meta .pjv-tm-field-val .pjv-cell-btn { width: auto; height: auto; justify-content: flex-start; padding: 4px 8px; border-radius: 7px; box-shadow: none; gap: 6px; }
/* 전역 `.empty svg { margin:0 auto 14px }` 의 14px 하단 여백 누수 차단 — 빈 우선순위 깃발 등 메타 아이콘이 위로 떠 보이던 문제. */
.pjv-proj-meta .pjv-cell-ico { margin: 0; }
.pjv-proj-meta .pjv-tm-field-val .pjv-cell-btn:hover { box-shadow: none; background: var(--bg-tint-2); }
.pjv-proj-tagpicker { min-width: 244px; padding: 8px; }
.pjv-proj-tagpicker-list { margin-top: 6px; max-height: 280px; overflow: auto; }
.pjv-tm-time { display: inline-flex; align-items: center; gap: 8px; }
.pjv-tm-timebtn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); padding: 3px 9px; border-radius: 999px; }
.pjv-tm-timebtn:hover { border-color: var(--blue); color: var(--blue); }
.pjv-tm-timebtn.on { border-color: var(--coral-text); color: var(--coral-text); }
.pjv-tm-timer-live { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pjv-tm-timemore { border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: 15px; padding: 0 6px; border-radius: 6px; }
.pjv-tm-timemore:hover { background: var(--bg-tint-2); color: var(--ink); }
.pjv-tm-timepop { min-width: 240px; padding: 10px; gap: 8px; }
.pjv-tm-tmanual { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted-2); flex-wrap: wrap; }
.pjv-tm-tnum { width: 46px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.pjv-tm-tentries { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.pjv-tm-tentry { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-sub); }
.pjv-tm-tentry-src { color: var(--muted-3); font-size: 11px; }
.pjv-tm-tentry-x { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--muted-3); font-size: 11px; }
.pjv-tm-tentry-x:hover { color: var(--coral-text); }

/* 태그 */
.pjv-tm-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pjv-tm-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--tag, var(--blue)); background: color-mix(in srgb, var(--tag, var(--blue)) 14%, transparent); border-radius: 6px; padding: 2px 4px 2px 8px; }
.pjv-tm-tag-x { border: none; background: none; cursor: pointer; color: inherit; opacity: .55; font-size: 10px; }
.pjv-tm-tag-x:hover { opacity: 1; }
.pjv-tm-tagadd { border: 1px dashed var(--line-net); background: none; cursor: pointer; color: var(--muted-2); font-size: 12px; padding: 2px 9px; border-radius: 6px; }
.pjv-tm-tagadd.empty { border: none; color: var(--muted-3); padding: 4px 8px; }
.pjv-tm-tagadd:hover { color: var(--blue); border-color: var(--blue); }
.pjv-tm-tagpop, .pjv-tm-linkpop { min-width: 230px; padding: 8px; gap: 6px; }
.pjv-tm-taginput { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.pjv-tm-tagresults { display: flex; flex-direction: column; gap: 1px; max-height: 200px; overflow: auto; }
.pjv-tm-tagdot { width: 10px; height: 10px; border-radius: 3px; background: var(--blue); flex: none; }
.pjv-tm-linktype-sel { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }

/* 설명 */
.pjv-tm-desc { margin-bottom: 18px; }
.pjv-tm-desc-body { font-size: 14px; color: var(--ink-sub); line-height: 1.6; cursor: text; border-radius: 8px; padding: 6px 8px; margin: -6px -8px; }
.pjv-tm-desc-body:hover { background: var(--bg-tint); }
.pjv-tm-desc-add { border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: 13.5px; padding: 8px 0; }
.pjv-tm-desc-add:hover { color: var(--blue); }
.pjv-tm-desc-ta { width: 100%; border: 1px solid var(--line-net); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.6; resize: vertical; font-family: inherit; }
.pjv-tm-desc-acts { display: flex; gap: 6px; margin-top: 8px; }

/* 블록(하위·의존성·체크리스트) */
.pjv-tm-block { padding: 14px 0; border-top: 1px solid var(--line); }
.pjv-tm-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pjv-tm-block-title { font-size: 14px; font-weight: 800; color: var(--ink); }
.pjv-tm-block-count { font-size: 12px; color: var(--muted-2); }
.pjv-tm-block-add { border: none; background: none; cursor: pointer; color: var(--ink-sub); font-size: 13px; padding: 7px 0; display: block; }
.pjv-tm-block-add:hover { color: var(--blue); }
.pjv-tm-sub-head { display: grid; grid-template-columns: minmax(0,1fr) 88px 92px 92px; gap: 8px; font-size: 11.5px; color: var(--muted-3); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.pjv-tm-sub-row { display: grid; grid-template-columns: minmax(0,1fr) 88px 92px 92px; gap: 8px; align-items: center; padding: 3px 6px; border-bottom: 1px solid var(--line); }
.pjv-tm-sub-name { display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; font-size: 13.5px; color: var(--ink); text-align: left; padding: 4px 0; }
.pjv-tm-sub-name:hover { color: var(--blue); }
.pjv-tm-sub-name .done { text-decoration: line-through; color: var(--muted-3); }
.pjv-tm-sub-cell { display: flex; align-items: center; }
.pjv-tm-sub-add, .pjv-tm-cl-add { width: 100%; border: none; border-bottom: 1px dashed transparent; background: none; font-size: 13px; padding: 7px 6px; color: var(--ink); }
.pjv-tm-sub-add::placeholder, .pjv-tm-cl-add::placeholder { color: var(--muted-3); }
.pjv-tm-sub-add:focus, .pjv-tm-cl-add:focus { outline: none; border-bottom-color: var(--blue); }
.pjv-tm-link-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13.5px; }
.pjv-tm-link-type { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 7px; }
.pjv-tm-link-type.blocking { color: var(--coral-text); background: color-mix(in srgb, var(--coral-text) 13%, transparent); }
.pjv-tm-link-type.waiting_on { color: #E08A2B; background: color-mix(in srgb, #E08A2B 14%, transparent); }
.pjv-tm-link-type.linked { color: var(--muted-2); background: var(--bg-tint-2); }
.pjv-tm-link-name { border: none; background: none; cursor: pointer; color: var(--ink); font-size: 13.5px; text-align: left; }
.pjv-tm-link-name:hover { color: var(--blue); }
.pjv-tm-link-x, .pjv-tm-cl-x { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--muted-3); font-size: 11px; }
.pjv-tm-link-x:hover, .pjv-tm-cl-x:hover { color: var(--coral-text); }
.pjv-tm-cl { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.pjv-tm-cl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pjv-tm-cl-name { font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: text; border-radius: 4px; padding: 1px 4px; margin-left: -4px; }
.pjv-tm-cl-name:hover { background: var(--bg-tint-2); }
.pjv-tm-cl-nameedit { font-size: 13.5px; font-weight: 700; color: var(--ink); font-family: inherit; border: 1px solid var(--blue); border-radius: 5px; padding: 1px 5px; outline: none; background: var(--bg); }
.pjv-tm-cl-prog { font-size: 12px; color: var(--muted-2); }
.pjv-tm-cl-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.pjv-tm-cl-check { width: 18px; height: 18px; border: 1.6px solid var(--muted-3); border-radius: 5px; background: var(--bg); cursor: pointer; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pjv-tm-cl-check.on { background: var(--mint); border-color: var(--mint); }
.pjv-tm-cl-itemname { font-size: 13.5px; color: var(--ink); }
.pjv-tm-cl-itemname.done { text-decoration: line-through; color: var(--muted-3); }

/* 우측(Activity) */
.pjv-tm-side { flex: 1; min-width: 340px; max-width: 440px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg-tint); }
.pjv-tm-side-head { padding: 16px 20px; font-size: 15px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line); }
.pjv-tm-feed { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.pjv-tm-feed-empty { color: var(--muted-3); font-size: 13px; text-align: center; margin-top: 30px; }
.pjv-tm-c { display: flex; gap: 9px; }
.pjv-tm-c-body { min-width: 0; flex: 1; }
.pjv-tm-c-meta { display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px; }
.pjv-tm-c-who { font-size: 13px; font-weight: 700; color: var(--ink); }
.pjv-tm-c-time { font-size: 11.5px; color: var(--muted-3); }
.pjv-tm-c-text { font-size: 13.5px; color: var(--ink-sub); line-height: 1.55; background: var(--bg); border: 1px solid var(--line); border-radius: 0 10px 10px 10px; padding: 8px 11px; }
.pjv-tm-ev { font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }
.pjv-tm-ev-dot { color: var(--muted-3); margin-right: 4px; }
.pjv-tm-ev-who { font-weight: 600; color: var(--ink-sub); }
.pjv-tm-ev-time { color: var(--muted-3); }
.pjv-tm-composer-wrap { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.pjv-tm-composer { flex: 1; border: 1px solid var(--line-net); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; line-height: 1.5; resize: none; font-family: inherit; max-height: 160px; }
.pjv-tm-composer:focus { outline: none; border-color: var(--blue); }
.pjv-tm-send { border: none; background: var(--blue); color: #fff; cursor: pointer; width: 34px; height: 34px; border-radius: 9px; font-size: 14px; flex: none; }
.pjv-tm-send:disabled { opacity: .5; }

/* 클릭 가능 태스크 행(리스트뷰) — 제목에 hover 강조 */
.pjv-trow-title.clickable { cursor: pointer; }
.pjv-trow-title.clickable:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .pjv-tm { flex-direction: column; height: 94vh; }
  .pjv-tm-side { max-width: none; border-left: none; border-top: 1px solid var(--line); min-height: 240px; }
}

/* 태스크 모달 — 첨부 파일 블록(의존성/체크리스트와 동일 레벨) */
.pjv-tm-att-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.pjv-tm-att { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; }
.pjv-tm-att:hover { background: var(--bg-tint-2); }
.pjv-tm-att-ico { font-size: 13px; filter: grayscale(1); opacity: .6; flex: none; }
.pjv-tm-att-name { border: none; background: none; cursor: pointer; color: var(--ink); font-size: 13.5px; text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.pjv-tm-att-name:hover { color: var(--blue); text-decoration: underline; }
.pjv-tm-att-size { font-size: 11.5px; color: var(--muted-3); flex: none; }
.pjv-tm-att-act { border: none; background: none; cursor: pointer; color: var(--muted-3); font-size: 12px; flex: none; padding: 2px 5px; border-radius: 5px; }
.pjv-tm-att-act:hover { color: var(--blue); background: var(--bg-tint); }
.pjv-tm-att-act.danger:hover { color: var(--coral-text); }
/* 클립보드 붙여넣기 안내 힌트 */
.pjv-tm-att-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--muted-head); }
.pjv-tm-att-hint-ic { flex: none; filter: grayscale(1); opacity: .7; }
.pjv-tm-att-hint b { color: var(--ink-sub); font-weight: 700; }
/* 클립보드 이미지 붙여넣기 다이얼로그(모달 위 미니 모달) */
.pjv-tm-paste-back { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(21,35,59,.45); }
.pjv-tm-paste-card { background: var(--bg); border-radius: 16px; padding: 20px; width: min(440px, 92vw);
  box-shadow: 0 24px 64px rgba(21,35,59,.32); display: flex; flex-direction: column; gap: 12px; }
.pjv-tm-paste-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.pjv-tm-paste-preview { max-width: 100%; max-height: 280px; object-fit: contain; align-self: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-tint); }
.pjv-tm-paste-label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted-head); }
.pjv-tm-paste-name { padding: 9px 11px; border: 1px solid var(--line-net); border-radius: 9px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--bg); box-sizing: border-box; width: 100%; }
.pjv-tm-paste-name:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45,107,240,.12); }
.pjv-tm-paste-err { font-size: 13px; font-weight: 600; color: var(--coral-text); }
.pjv-tm-paste-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

/* ── 2차 필드: 파일(공유폴더 선택)·관계(태스크 연결)·진행률(자동) ── */
.pjv-ffiles { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink-sub); }
.pjv-fmini { width: 14px; height: 14px; flex: none; }
.pjv-frel { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.pjv-rel-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 120px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--bg-tint-2); border: 1px solid var(--line-net); border-radius: 6px; padding: 1px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-rel-chip.removable { padding-right: 2px; }
.pjv-rel-more { font-size: 11.5px; font-weight: 700; color: var(--muted-2); }
.pjv-rel-x { border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: 12px; line-height: 1; padding: 1px 4px; border-radius: 4px; }
.pjv-rel-x:hover { color: var(--coral-text); background: var(--bg-tint); }
.pjv-chip-dl { border: none; background: none; cursor: pointer; color: var(--blue); font-size: 12px; line-height: 1; padding: 1px 3px; border-radius: 4px; }
.pjv-chip-dl:hover { background: var(--bg-tint); }

/* 파일 선택 편집기(공유 폴더 브라우저) */
.pjv-files-editor { min-width: 300px; max-width: 340px; gap: 7px; }
.pjv-files-head2 { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pjv-files-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pjv-files-sel-label { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pjv-files-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 12px; }
.pjv-files-crumb-btn { border: none; background: none; cursor: pointer; color: var(--blue); font-size: 12px; padding: 2px 5px; border-radius: 5px; }
.pjv-files-crumb-btn:hover { background: var(--bg-tint-2); }
.pjv-files-crumb-sep { color: var(--muted-3); }
.pjv-files-browser { display: flex; flex-direction: column; gap: 1px; max-height: 240px; overflow-y: auto; border: 1px solid var(--line-row); border-radius: 8px; padding: 4px; }
.pjv-files-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--ink); }
.pjv-files-row:hover { background: var(--bg-tint-2); }
.pjv-files-row.on { background: var(--bg-sel); }
.pjv-files-row .fic, .pjv-files-row .ft { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pjv-files-row .pjv-check-mini { flex: none; }
.pjv-files-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-files-size { flex: none; font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.pjv-files-chev { flex: none; color: var(--muted-3); font-size: 15px; }
.pjv-files-empty { font-size: 12.5px; color: var(--muted-2); padding: 12px 8px; text-align: center; }

/* 관계(태스크 연결) 편집기 */
.pjv-rel-editor { min-width: 280px; gap: 8px; }
.pjv-rel-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pjv-rel-results { display: flex; flex-direction: column; gap: 1px; max-height: 220px; overflow-y: auto; }
.pjv-rel-result { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--ink); }
.pjv-rel-result:hover { background: var(--bg-tint-2); }
.pjv-rel-result-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-rel-add { flex: none; font-size: 11.5px; font-weight: 700; color: var(--blue); }

/* pjv 인라인 이름 입력 — 박스 제거: 전역 input[type=text](테두리·배경·라운드)를 같은 specificity+후순위로 무력화.
   (하위)태스크·체크리스트 이름 타이핑을 클릭업식 매끄러운 인라인 텍스트로(박스 없음).
   #320: 글로벌 input[type=text] 가 font-size:14px 로 덮어써 타이핑 글자가 14px 였고(확정 제목 .pjv-trow-title 는 15px),
   좌측 padding 8px 때문에 글자가 확정 제목보다 8px 오른쪽에서 시작 → 확정 순간 크기·위치가 튀어 어색.
   여기서 font-size 15px(+weight 500)로 맞추고 좌우 padding 0 으로 — 타이핑 글자가 .pjv-trow-title 와 픽셀 일치. */
input.pjv-addrow-input { border: none; background: transparent; border-radius: 0; box-shadow: none; outline: none; padding: 9px 0; font-size: 15px; font-weight: 500; }
input.pjv-addrow-input:focus { border: none; background: transparent; box-shadow: none; outline: none; }
input.pjv-tm-sub-add, input.pjv-tm-cl-add { border: none; background: transparent; border-radius: 0; box-shadow: none; outline: none; padding: 7px 6px; }
input.pjv-tm-sub-add:focus, input.pjv-tm-cl-add:focus { border: none; background: transparent; box-shadow: none; outline: none; }

/* ── 태스크 모달 Activity — 클릭업식 댓글 카드·반응·작성기 툴바 ── */
.pjv-tm-c-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; min-height: 24px; }
.pjv-tm-c-react { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.pjv-tm-react-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line-net); background: var(--bg); border-radius: 999px; padding: 1px 8px; font-size: 12px; cursor: pointer; color: var(--ink-sub); }
.pjv-tm-react-chip:hover { border-color: var(--line-net-2); }
.pjv-tm-react-chip.mine { background: var(--bg-sel); border-color: var(--blue); color: var(--blue); }
.pjv-tm-react-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.pjv-tm-c-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: var(--muted-2); border-radius: 6px; padding: 0; opacity: 0; transition: opacity .12s ease; }
.pjv-tm-c:hover .pjv-tm-c-act, .pjv-tm-c:focus-within .pjv-tm-c-act { opacity: 1; }
.pjv-tm-c-act:hover { color: var(--blue); background: var(--bg-tint-2); }
.pjv-tm-c-act .pjv-tm-ic { width: 15px; height: 15px; }
.pjv-tm-c-reply { border: none; background: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted-2); padding: 2px 6px; border-radius: 6px; opacity: 0; transition: opacity .12s ease; }
.pjv-tm-c:hover .pjv-tm-c-reply, .pjv-tm-c:focus-within .pjv-tm-c-reply { opacity: 1; }
.pjv-tm-c-reply:hover { color: var(--blue); background: var(--bg-tint-2); }
.pjv-tm-filelink { color: var(--blue); text-decoration: none; font-weight: 600; }
.pjv-tm-filelink:hover { text-decoration: underline; }

/* 시스템 이벤트 — 좌(불릿·텍스트) / 우(시간) */
.pjv-tm-ev { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pjv-tm-ev-main { min-width: 0; }
.pjv-tm-ev-time { flex: none; white-space: nowrap; }

/* 작성기 박스 + 툴바 */
.pjv-tm-composer-box { display: flex; flex-direction: column; margin: 12px 16px; border: 1px solid var(--line-net); border-radius: 12px; background: var(--bg); overflow: hidden; }
.pjv-tm-composer-box:focus-within { border-color: var(--blue); }
.pjv-tm-composer-box .pjv-tm-composer { border: none; border-radius: 0; padding: 11px 12px 6px; }
.pjv-tm-composer-box .pjv-tm-composer:focus { border: none; outline: none; }
.pjv-tm-toolbar { display: flex; align-items: center; gap: 1px; padding: 5px 7px; border-top: 1px solid var(--line-row); }
.pjv-tm-tool { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; cursor: pointer; color: var(--muted); border-radius: 7px; padding: 0; }
.pjv-tm-tool:hover { color: var(--ink-sub); background: var(--bg-tint-2); }
.pjv-tm-tool.soon { color: var(--muted-3); }
.pjv-tm-ic { width: 17px; height: 17px; }
.pjv-tm-ctypepill { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-net); background: var(--bg); cursor: pointer; border-radius: 7px; padding: 3px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); margin: 0 3px; }
.pjv-tm-ctypepill:hover { background: var(--bg-tint-2); }
.pjv-tm-type-caret { font-size: 9px; color: var(--muted-2); }
.pjv-tm-tool-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex: none; }
.pjv-tm-tool-spacer { flex: 1; }
.pjv-tm-toolbar .pjv-tm-send { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.pjv-tm-toolbar .pjv-tm-send .pjv-tm-ic { width: 16px; height: 16px; }

/* 이모지 그리드 */
.pjv-tm-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; max-width: 288px; }
.pjv-tm-emoji { border: none; background: none; cursor: pointer; font-size: 19px; line-height: 1; padding: 5px; border-radius: 7px; }
.pjv-tm-emoji:hover { background: var(--bg-tint-2); }

/* 태스크 컬럼 정렬·크기 보정 (담당자·마감일·우선순위) — 헤더 글자 중앙 아래로 아이콘 정렬 + 폰트/아이콘 확대 (사용자 요청) */
/* 헤더 라벨: 더 크고 또렷하게 + 컬럼 중앙 정렬 */
.pjv-colhead { font-size: 13px; font-weight: 600; color: var(--muted); justify-content: center; text-align: center; padding-left: 0; }
/* 헤더 트랙과 행 트랙 정렬 — 그룹 헤더 가로 패딩을 행(6px)에 맞춤 */
.pjv-tgroup-head { padding-left: 6px; padding-right: 6px; }
/* 값 셀(담당자·마감일·우선순위) 중앙 정렬 → 헤더 글자 중앙 아래 */
.pjv-trow > .pjv-tcell:nth-child(2),
.pjv-trow > .pjv-tcell:nth-child(3),
.pjv-trow > .pjv-tcell:nth-child(4),
.pjv-addrow.editing > .pjv-tcell:nth-child(2),
.pjv-addrow.editing > .pjv-tcell:nth-child(3),
.pjv-addrow.editing > .pjv-tcell:nth-child(4) { justify-content: center; }
/* 값 폰트·아이콘 확대 */
.pjv-cell-btn { font-size: 15px; }
.pjv-ava { width: 26px; height: 26px; font-size: 12px; }
.pjv-tasks-card .pjv-cell-ico { width: 20px; height: 20px; }
.pjv-due-text { font-size: 15px; }
.pjv-flag-glyph { font-size: 18px; }
.pjv-flag-label { font-size: 15px; }
/* 담당자 다중 — 페이스파일(겹친 아바타, 흰 링) + 메뉴 토글 체크 */
.pjv-asg-faces { display: inline-flex; align-items: center; }
.pjv-asg-faces .pjv-ava { box-shadow: 0 0 0 2px var(--bg); }
.pjv-asg-faces .pjv-ava + .pjv-ava { margin-left: -9px; }
.pjv-ava-more { background: var(--muted-2); color: #fff; }
.pjv-asg-menu .pjv-asg-mname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjv-asg-check { flex: none; margin-left: 6px; width: 14px; text-align: center; color: var(--blue); font-weight: 800; }
/* 팀원 셀 팝오버 — 전체 구성원 검색 + 다중토글(프로젝트 '담당자' 대체). */
.pjv-team-menu { min-width: 240px; }
.pjv-team-searchwrap { padding: 2px 4px 6px; }
.pjv-team-search { width: 100%; }
.pjv-team-list { max-height: 240px; overflow: auto; }
.pjv-cell-ph { font-size: 19px; }
.pjv-tasks-card .pjv-cell-btn { height: 100%; }

/* 댓글 컴포저 입력 영역 확대 — 기본 1행(37px)은 너무 작아서 불편. 기본 ~4행, 최대 220px(grow JS와 일치). */
.pjv-tm-composer { min-height: 88px; max-height: 220px; }
/* 첨부 파일 미리보기 등 오버레이(.ov-back)가 태스크 모달(z 210) 위에 뜨도록 — 기존 z 200 이면 모달 뒤로 가려져 잘림. */
.ov-back { z-index: 300; }

/* 액티비티 헤더 도구 + 댓글 푸터 항상 표시(클릭업식) */
.pjv-tm-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pjv-tm-side-tools { display: inline-flex; align-items: center; gap: 2px; }
.pjv-tm-side-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: none; cursor: pointer; color: var(--muted-2); border-radius: 7px; padding: 0; }
.pjv-tm-side-icon:hover { background: var(--bg-tint-2); color: var(--ink); }
.pjv-tm-side-icon.on { color: var(--blue); }
.pjv-tm-side-icon .pjv-tm-ic { width: 17px; height: 17px; }
.pjv-tm-search { padding: 10px 16px 0; }
.pjv-tm-search-in { width: 100%; box-sizing: border-box; }
/* 댓글 푸터: 좋아요/이모지/Reply 항상 보이게(기존 hover-only opacity:0 override) */
.pjv-tm-c-act, .pjv-tm-c-reply { opacity: 1; }

/* ── 태그 피커(클릭업식): 검색·생성·색 선택기 ── */
.pjv-tm-tagpop { min-width: 256px; max-width: 300px; padding: 8px; gap: 0; }
.pjv-tm-tagpop-top { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; border: 1px solid var(--line-net); border-radius: 9px; padding: 5px 7px; }
.pjv-tm-tagpop-top:focus-within { border-color: var(--blue); }
/* 선택된 태그 칩들 사이 간격 — 서로 붙지 않게. */
.pjv-tm-tagpop-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.pjv-tm-tagpop-chips:empty { display: none; }
.pjv-tm-tagpop .pjv-tm-taginput { flex: 1; min-width: 90px; border: none; padding: 3px 2px; font-size: 13px; outline: none; background: none; }
.pjv-tm-tagpop-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 4px; font-size: 12px; color: var(--muted-2); }
.pjv-tm-tagresults { display: flex; flex-direction: column; gap: 1px; max-height: 248px; overflow-y: auto; }
.pjv-tm-tagrow { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 8px; border-radius: 7px; font-size: 13px; color: var(--ink); }
/* 태그 popover 하단 '모든 태그 관리' 진입 버튼 + 관리뷰 제목 */
.pjv-tm-tagmanage-btn { display: flex; align-items: center; gap: 7px; width: 100%; border: none; border-top: 1px solid var(--line-row); background: none; cursor: pointer; padding: 9px 8px 4px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); }
.pjv-tm-tagmanage-btn:hover { color: var(--blue); }
.pjv-tm-tagmanage-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.pjv-tm-tagrow:hover { background: var(--bg-tint-2); }
.pjv-tm-tagrow-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-tm-tagrow-gear { flex: none; border: none; background: none; cursor: pointer; color: var(--muted-2); padding: 2px; border-radius: 5px; opacity: 0; display: inline-flex; }
.pjv-tm-tagrow:hover .pjv-tm-tagrow-gear { opacity: 1; }
.pjv-tm-tagrow-gear:hover { color: var(--ink); background: var(--bg-tint); }
.pjv-tm-tagrow-gear .pjv-tm-ic { width: 15px; height: 15px; }
.pjv-tm-tagcreate .pjv-tm-tagcreate-label { color: var(--muted-2); font-size: 12.5px; flex: none; }
.pjv-tm-tagcreate-enter { margin-left: auto; color: var(--muted-3); font-size: 13px; }
/* 색/이름/삭제 뷰 */
.pjv-tm-tagcolor-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pjv-tm-tagcolor-back { flex: none; border: none; background: none; cursor: pointer; color: var(--muted); padding: 3px; border-radius: 6px; display: inline-flex; }
.pjv-tm-tagcolor-back:hover { color: var(--ink); background: var(--bg-tint-2); }
.pjv-tm-tagcolor-back .pjv-tm-ic { width: 18px; height: 18px; }
.pjv-tm-tagcolor-name { flex: 1; min-width: 0; border: 1px solid var(--ink); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; outline: none; font-weight: 600; color: var(--ink); }
.pjv-tm-tagcolor-name:focus { border-color: var(--blue); }
.pjv-tm-tagcolor-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; padding: 4px 2px; justify-items: center; }
.pjv-tm-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; box-shadow: 0 0 0 1px var(--line-net); padding: 0; transition: transform .1s ease; }
.pjv-tm-swatch:hover { transform: scale(1.1); }
.pjv-tm-swatch.sel { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.pjv-tm-swatch.none { background: var(--bg); color: var(--muted-2); display: inline-flex; align-items: center; justify-content: center; }
.pjv-tm-swatch.none.sel { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--muted); }
.pjv-tm-swatch.none .pjv-tm-ic { width: 18px; height: 18px; }
.pjv-tm-tagcolor-sep { height: 1px; background: var(--line); margin: 9px 0; }
.pjv-tm-tagdelete { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; cursor: pointer; padding: 7px 6px; border-radius: 7px; font-size: 13px; color: var(--ink-sub); }
.pjv-tm-tagdelete:hover { background: var(--bg-tint-2); color: var(--coral-text); }
.pjv-tm-tagdelete .pjv-tm-ic { width: 16px; height: 16px; }

.pjv-tm-tagrow .pjv-check-mini { width: 16px; height: 16px; flex: none; color: var(--muted-3); }
.pjv-tm-tagrow.sel .pjv-check-mini { color: var(--blue); }
.pjv-tm-tagrow.sel { background: var(--bg-sel); }
.pjv-tm-tagrow.sel:hover { background: var(--bg-sel); }

/* ── 좌상단 하위 태스크(Subtasks) 버튼 — 접힘/펼침/분리 (Closed 와 대칭, 좌측) ── */
.pjv-tasks-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pjv-tasks-head-left h2 { margin: 0; }
.pjv-subtask-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; padding: 4px 11px 4px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); }
.pjv-subtask-btn:hover { background: var(--bg-tint); color: var(--ink); }
.pjv-subtask-btn.active { color: var(--blue); border-color: var(--blue); background: var(--bg-tint); }
.pjv-subtask-ic { width: 15px; height: 15px; }
.pjv-subtask-pop { min-width: 210px; padding: 4px; }
.pjv-subtask-pop-head { font-size: 11.5px; font-weight: 700; color: var(--muted-2); padding: 6px 9px 4px; letter-spacing: .2px; }
.pjv-subtask-item { justify-content: space-between; gap: 10px; }
.pjv-subtask-item-main { display: flex; flex-direction: column; min-width: 0; }
.pjv-subtask-item-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pjv-subtask-item-hint { font-size: 11.5px; color: var(--muted-2); }
.pjv-subtask-item.sel .pjv-subtask-item-label { color: var(--blue); }
.pjv-subtask-check { flex: none; color: var(--blue); font-size: 13px; font-weight: 700; }

/* 댓글 밀도 — 클릭업처럼 촘촘하게(글자·줄간격·패딩·모서리·간격 축소, 말풍선→균일 카드) */
.pjv-tm-feed { gap: 9px; padding: 12px 16px; }
.pjv-tm-c { gap: 8px; }
.pjv-tm-c .pjv-ava { width: 24px; height: 24px; font-size: 10.5px; }
.pjv-tm-c-who { font-size: 12.5px; }
.pjv-tm-c-time { font-size: 11px; }
.pjv-tm-c-text { font-size: 12.5px; line-height: 1.5; padding: 6px 10px; border-radius: 7px; }
.pjv-tm-c-foot { margin-top: 2px; min-height: 20px; }
.pjv-tm-ev { font-size: 12px; }

/* === 프로젝트 목록(클릭업식 리스트) === */
/* 카드 대신 태스크 리스트 톤 재사용 + 프로젝트 전용 보강 */
.pjv-proj-card .pjv-tgroup:first-child { margin-top: 4px; }
/* 너비 마진 축소(#339) — 리스트보드 카드 좌우 패딩을 24→16 으로 줄여 제목에 폭을 더 준다(세로 24 유지). */
.pjv-proj-card { padding-left: 16px; padding-right: 16px; }
/* 창이 좁아 메타 컬럼이 minmax(0,W) 로 줄 때 셀 내용이 밖으로 새지 않게 클립 — 제목셀(.pjv-trow-title-cell)은 .pjv-tcell 이 아니라 제외됨. */
.pjv-proj-card .pjv-tcell { overflow: hidden; }
/* 프로젝트 행 — '박스'가 아니라 평평한 클릭업 리스트로 존재감을 살림:
   큰·굵은 제목 + 넉넉한 행 높이 + 행 사이 옅은 하이라인 + hover 틴트/좌측 액센트.
   (테두리·그림자로 행마다 박스 두르던 방식은 컬럼 정렬과 충돌·과해서 폐기.) */
/* 세로 패딩 0(높이는 min-height 46px 로 유지) → 호버 셀 박스가 키운 행 높이를 꽉 채움. 가로 8px(#339) 는 헤더 정렬 유지. */
.pjv-proj-card .pjv-proj-wrap > .pjv-proj-row { min-height: 46px; padding: 0 8px; border-radius: 8px; transition: background .14s ease, box-shadow .14s ease; }
/* 행 사이 옅은 구분선(박스 아님) — 그룹 본문 안에서만, 마지막 행 제외 */
.pjv-proj-card .pjv-tgroup-body .pjv-proj-wrap:not(:last-child) { border-bottom: 1px solid var(--line-row); }
.pjv-proj-card .pjv-proj-row:hover { background: var(--bg-tint); box-shadow: inset 3px 0 0 var(--blue); }
.pjv-proj-card .pjv-proj-row .pjv-trow-title.clickable { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
/* 인라인 추가행(편집 상태)을 위 프로젝트 행과 픽셀·타이포 정확히 일치 — 좌우 패딩·행높이·글자크기·볼드·자간을 행과 동일하게,
   입력칸 내부 패딩 0 으로 제목 텍스트 시작점(캐럿+점+gap)을 행과 픽셀 단위로 맞춤. */
.pjv-proj-card .pjv-addrow.editing { padding: 0 8px; min-height: 46px; }
.pjv-proj-card .pjv-addrow.editing .pjv-addrow-input { font-size: 15px; font-weight: 600; letter-spacing: -.1px; padding: 0; line-height: 1.3; }
/* 병합 컬럼헤더 좌우 패딩을 행 콘텐츠 시작점(8px·#339)과 맞춰 컬럼 정렬 보존 */
.pjv-proj-card .pjv-tgroup-head-cols { padding-left: 8px; padding-right: 8px; }
/* 프로젝트 펼침 — 그 안의 태스크 행. 프로젝트 행과 같은 좌우 패딩(8px·#339)·그리드(pjvProjGridTemplate)라 컬럼 정렬 일치.
   titleCell 의 depth*22px 들여쓰기로 중첩 표현. 펼친 영역은 아주 옅은 틴트로 묶어 보이게. */
/* 고정 높이로 핀 — 담당자(아바타 26px) 있고 없고(아이콘 20px)에 따라 행 높이가 달라지지 않게.
   grid align-items:center 라 내용은 가운데 정렬, 행은 항상 44px. (프로젝트 행 46px 보다 살짝 작아 위계도 생김) */
.pjv-proj-card .pjv-proj-taskrow { padding: 0 8px; height: 44px; min-height: 44px; }
.pjv-proj-card .pjv-proj-subs { background: color-mix(in srgb, var(--bg-tint) 50%, var(--bg)); }
.pjv-proj-card .pjv-proj-subnote { padding: 8px 12px 9px 50px; color: var(--muted-2); font-size: 12.5px; }
.pjv-proj-when { color: var(--muted-2); font-size: 13px; }
/* 내 세션 컬럼(프로젝트 목록 전용) — 표준 컬럼처럼 아이콘 가운데 정렬 + 세션 바로가기 팝업 */
.pjv-sess-cell { justify-content: center; }
/* 터미널 아이콘은 사각형(창)이라 같은 크기여도 선아이콘보다 꽉 차 보임 → 셀 아이콘만 살짝 축소(다른 컬럼 20px 유지). */
.pjv-sess-cell .pjv-cell-ico { width: 20px; height: 20px; }
/* '내 세션' 활성(내 세션 있음) — 컬러(틸) 터미널 아이콘 + 우상단 작은 라이브 점(민트). 없으면 .empty 로 옅게(비활성). */
.pjv-sess-ico-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.pjv-cell-btn.pjv-sess-active .pjv-cell-ico,
.pjv-cell-btn.pjv-sess-active:hover .pjv-cell-ico { color: var(--teal); }
.pjv-sess-dot { position: absolute; top: -2px; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1.5px var(--bg); }
.pjv-sess-menu { min-width: 224px; }
.pjv-sess-menu .pjv-menu-item { gap: 9px; }
.pjv-sess-ico { flex: none; display: inline-flex; align-items: center; color: var(--muted); }
.pjv-sess-ico svg { width: 16px; height: 16px; }
.pjv-sess-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 메뉴의 '새 세션 만들기' — ＋ 아이콘을 세션 아이콘 자리에 맞춰 파란 강조. */
.pjv-sess-add { color: var(--blue); }
.pjv-sess-add-ico { width: 16px; justify-content: center; font-size: 15px; font-weight: 700; color: var(--blue); }
.pjv-proj-noface { color: var(--muted-3); font-size: 13px; }

/* ════ 클릭업식 행 호버 컨트롤 + 다중선택 하단 바 ════ */
/* 좌측 체크박스 — 평소 숨김(자리 유지, 헤더엔 동폭 spacer 로 정렬), 행 호버/선택 시 표시. */
.pjv-row-check { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.6px solid var(--muted-3); background: var(--bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; font-size: 11px; line-height: 1; opacity: 0; transition: opacity .12s ease, background-color .12s ease, border-color .12s ease; }
.pjv-row-check-spacer { flex: none; width: 16px; }
.pjv-trow:hover .pjv-row-check, .pjv-row-check.on { opacity: 1; }
.pjv-row-check:hover { border-color: var(--blue); }
.pjv-row-check.on { background: var(--blue); border-color: var(--blue); }
.pjv-row-check.on::after { content: '✓'; }
.pjv-trow-wrap.pjv-row-selected > .pjv-trow { background: var(--bg-sel); box-shadow: inset 2px 0 0 var(--blue); }
/* 제목 우측 아이콘 3개 — margin-left:auto 로 제목셀 우측 끝에. 평소 숨김, 행 호버 시 표시. */
/* 제목 우측 호버 아이콘 — ⋯ 버튼과 동일 언어(테두리 없음·작게·muted). 담당자 컬럼과 겹치지 않게 우측 여백. */
.pjv-row-actions { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 1px; padding-left: 8px; margin-right: 12px; opacity: 0; transition: opacity .12s ease; }
.pjv-trow:hover .pjv-row-actions { opacity: 1; }
.pjv-row-act { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 6px; cursor: pointer; color: var(--muted-2); padding: 0; transition: background-color .12s ease, color .12s ease; }
.pjv-row-act:hover { color: var(--ink); background: var(--bg-tint); }
.pjv-act-ic { width: 16px; height: 16px; display: block; }
/* 태스크는 조금, 프로젝트 목록은 좀 많이 크게 — 프로젝트 행은 더 큰 버튼·아이콘. */
.pjv-proj-row .pjv-row-act { width: 30px; height: 28px; border-radius: 7px; }
.pjv-proj-row .pjv-act-ic { width: 19px; height: 19px; }
/* 제목 우측 호버 액션을 '절대배치'로 빼 제목 폭을 상시 점유하지 않게(#339) — 숨김(opacity 0) 상태에서도 ~112px 를 먹어 제목을 짓누르던 문제 제거.
   평소: 클릭 통과(pointer-events:none)라 제목 어디를 눌러도 상세로 이동. 행 호버 시에만 우측에 살짝 겹쳐 뜨고 버튼만 클릭 가능.
   배경 그라데이션(투명→호버틴트)으로 제목 글자 위에서도 아이콘이 또렷하게 보인다(클릭업식). */
.pjv-proj-row .pjv-trow-title-cell { position: relative; }
.pjv-proj-row .pjv-row-actions {
  position: absolute; right: 0; top: 0; bottom: 0; margin: 0; padding-left: 30px;
  background: linear-gradient(to right, transparent, var(--bg-tint) 24px);
  pointer-events: none;
}
.pjv-proj-row:hover .pjv-row-actions .pjv-row-act { pointer-events: auto; }
/* 태스크 리스트(.pjv-tasks-card — 프로젝트 보드와 달리 .pjv-proj-card 없음)도 같은 패턴(#339) —
   제목 우측 호버 액션을 절대배치로 빼 제목 폭을 상시 점유하지 않게 + 메타 셀 클립. 좁은 창에서 태스크 제목 보호. */
.pjv-tasks-card:not(.pjv-proj-card) .pjv-tcell { overflow: hidden; }
.pjv-tasks-card:not(.pjv-proj-card) .pjv-trow-title-cell { position: relative; }
.pjv-tasks-card:not(.pjv-proj-card) .pjv-row-actions {
  position: absolute; right: 0; top: 0; bottom: 0; margin: 0; padding-left: 28px;
  background: linear-gradient(to right, transparent, var(--bg-tint) 22px);
  pointer-events: none;
}
.pjv-tasks-card:not(.pjv-proj-card) .pjv-trow:hover .pjv-row-actions .pjv-row-act { pointer-events: auto; }
/* 개수 칩 — 숫자 왼쪽에 하위태스크 아이콘(프로젝트 행·태스크 행·펼침 태스크 행 공통). */
.pjv-subcount-ico { display: inline-flex; align-items: center; gap: 3px; }
.pjv-subcount-ico .pjv-subtask-ic { width: 12px; height: 12px; flex: none; }
/* 하위 태스크 아이콘 배지(클릭하여 펼침) — 클릭 어포던스(커서·호버·키보드 포커스) */
.pjv-subcount-ico.clickable { cursor: pointer; transition: background .12s, color .12s; }
.pjv-subcount-ico.clickable:hover { background: var(--bg-sel); color: var(--blue); }
.pjv-subcount-ico.clickable:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* 팀원 보기전용 팝오버 — 목록만(토글·체크 없음). 행은 버튼이 아니라 정적 표시. */
.pjv-team-view { min-width: 180px; }
.pjv-team-view-row { display: flex; align-items: center; gap: 9px; padding: 6px 12px; font-size: 13px; color: var(--ink); }
.pjv-team-view-hint { padding: 7px 12px 8px; font-size: 11.5px; color: var(--muted-2); border-top: 1px solid var(--line); margin-top: 3px; }
/* 하단 일괄작업 바 — 어두운 알약, 화면 하단 중앙 고정. 선택 1개 이상이면 .show. */
.pjv-bulkbar { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px); z-index: 1200; display: none; align-items: center; gap: 6px; padding: 10px 12px 10px 20px; background: #1B2942; color: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(13,22,40,.4); opacity: 0; transition: opacity .16s ease, transform .16s ease; max-width: calc(100vw - 32px); }
.pjv-bulkbar.show { display: inline-flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.pjv-bulk-count { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; padding-right: 8px; }
.pjv-bulk-n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; }
.pjv-bulk-lbl { color: #C7D2E6; font-weight: 500; white-space: nowrap; }
.pjv-bulk-x { width: 28px; height: 28px; border: none; background: rgba(255,255,255,.08); color: #C7D2E6; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1; }
.pjv-bulk-x:hover { background: rgba(255,255,255,.16); color: #fff; }
.pjv-bulk-actions { display: inline-flex; align-items: center; gap: 3px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.12); }
.pjv-bulk-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: none; background: none; color: #E4EAF4; border-radius: 10px; cursor: pointer; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.pjv-bulk-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.pjv-bulk-btn.danger:hover { background: rgba(228,117,107,.22); color: #FFB3AC; }
.pjv-bulk-btn svg { width: 19px; height: 19px; flex: none; color: currentColor; }
.pjv-bulkbar .pjv-cell-ico { color: currentColor; }
/* 메인 액션 — 선택 태스크를 클로드로 실행. 어두운 바 위에서 확 튀게: 밝은 그라데이션 + 글로우 + 은은한 펄스. 보조 버튼들과 간격으로 분리. */
.pjv-bulk-run { display: inline-flex; align-items: center; gap: 9px; height: 40px; margin-left: 14px; padding: 0 18px; border: none; border-radius: 11px; cursor: pointer; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap; color: #fff; background: linear-gradient(135deg, #4F8CFF 0%, #8A5CFF 100%); box-shadow: 0 4px 18px rgba(110,99,255,.5); animation: pjvBulkRunPulse 2.4s ease-in-out infinite; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.pjv-bulk-run:hover { animation: none; transform: translateY(-1px); box-shadow: 0 9px 28px rgba(110,99,255,.72); filter: brightness(1.07); }
.pjv-bulk-run:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(110,99,255,.5); }
.pjv-bulk-run:disabled { opacity: .6; cursor: default; animation: none; transform: none; }
.pjv-bulk-run svg { width: 18px; height: 18px; flex: none; }
@keyframes pjvBulkRunPulse { 0%, 100% { box-shadow: 0 4px 18px rgba(110,99,255,.45); } 50% { box-shadow: 0 6px 26px rgba(110,99,255,.85); } }
.pjv-menu-head { padding: 6px 12px 4px; font-size: 11.5px; font-weight: 700; color: var(--muted-2); letter-spacing: .2px; }
.pjv-bulk-sep-h { height: 1px; background: var(--line); margin: 4px 0; }
.pjv-bulk-apply { color: var(--blue); font-weight: 600; }
.pjv-rowtag-input { width: calc(100% - 16px); margin: 2px 8px 6px; box-sizing: border-box; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; outline: none; }
.pjv-rowtag-input:focus { border-color: var(--blue); }
.pjv-proj-faces .project-face { width: 24px; height: 24px; font-size: 10px; }
.pjv-proj-empty { padding: 12px 8px; color: var(--muted-2); font-size: 13px; }
/* 선택(일괄삭제) 모드 체크박스 — 상태 동그라미 자리 */
.pjv-proj-check { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.6px solid var(--muted-3); background: var(--bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; font-size: 11px; line-height: 1; }
.pjv-proj-check:hover { border-color: var(--blue); }
.pjv-proj-check.on { background: var(--blue); border-color: var(--blue); }
.pjv-proj-check.disabled { cursor: default; opacity: .4; }

/* ── 세션 주입 지도(injectionMap) — 주입 시점별 블록 + 조각 + 딥링크 (2026-06-26) ── */
.inj-moments { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.inj-moment { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--bg); }
.inj-moment-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.inj-moment-h { min-width: 0; }
.inj-moment-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.inj-sub { margin: 2px 0 0; color: var(--ink-sub); }
.inj-toggle { flex: none; white-space: nowrap; }
.inj-pieces { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; }
.inj-piece { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.inj-piece:hover { background: var(--line-row); }
.inj-n { flex: none; width: 22px; text-align: center; color: var(--muted); font-weight: 700; }
.inj-piece-body { flex: 1 1 auto; min-width: 0; }
.inj-piece-label { font-weight: 600; color: var(--ink); }
.inj-custom { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.inj-custom-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-left: 2px solid var(--line-net); }
.inj-preview { margin-top: 8px; }

/* ════ 팀 기능(2026-06-26) — 사이드바 공간 통합(우리 팀 접이식) + 분류체계 오너 + 팀 관리 ════ */
/* 사이드바 카테고리 그룹(<details>) — 우리 팀 상단 펼침(★), 나머지 space별 접이식 */
.tree-group { margin: 2px 0; }
.tree-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; user-select: none;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-head);
}
.tree-group > summary::-webkit-details-marker { display: none; }
.tree-group > summary::before {
  content: '▸'; font-size: 9px; color: var(--muted-2); transition: transform .12s; display: inline-block; flex: none;
}
.tree-group[open] > summary::before { transform: rotate(90deg); }
.tree-group > summary:hover { background: var(--bg-tint); color: var(--ink-sub); }
.tree-grouptitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-groupcount { font-weight: 600; color: var(--muted-2); letter-spacing: 0; }
.tree-groupstar { color: var(--blue); font-size: 11px; flex: none; }
.tree-group-mine > summary { color: var(--blue); }
.tree-group-mine { margin-bottom: 6px; }
.tree-group .tree-item { padding-left: 20px; } /* 그룹 내 들여쓰기 */
/* 우리 팀 하위 — 사업/제품/시스템 대분류(#338). 항상 보이는 가벼운 하위 헤더 + 한 단계 더 들여쓴 항목 */
.tree-group-mine .tree-subhead {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  padding: 4px 10px 4px 22px;
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted-2);
}
.tree-subtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-subcount { font-weight: 600; color: var(--muted-2); letter-spacing: 0; }
.tree-group-mine .tree-item { padding-left: 30px; } /* 하위그룹 항목 — 우리 팀 일반 항목(20px)보다 한 단계 더 */

/* 분류체계 관리 — 카테고리별 오너 팀(드롭다운/표시) */
.wikicat-owner { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.wikicat-owner-label { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted-2); }
.wikicat-owner-name { font-weight: 700; color: var(--blue); }
.wikicat-owner-sel { font-size: 12px; padding: 2px 6px; border: 1px solid var(--line-net-2, #d9dee6); border-radius: 6px; background: var(--bg-soft, #fff); color: var(--ink-sub); }

/* 팀 관리 — 팀원 체크 + 역할 select */
.team-members-wrap { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; padding: 2px; }
.team-member-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-sub); padding: 5px 6px; border-radius: 7px; }
.team-member-opt:hover { background: var(--bg-tint); }
/* 한 줄: [체크박스] [이름(가운데 채움)] [역할(우측)]. 이름은 진한 색·항상 보임(길면 말줄임). */
.team-member-name { flex: 1 1 auto; min-width: 60px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .field select{width:100%}(styles.css:569)를 이 행에선 무력화 — 역할 select 는 내용폭으로 우측에. 특이도 (0,2,0) > (0,1,1). */
.team-members-wrap .team-role-sel { width: auto; min-width: 92px; flex: 0 0 auto; margin-left: auto; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line-net-2, #d9dee6); border-radius: 6px; background: var(--bg-soft, #fff); }

/* 세션 주입 지도 — 가이드 템플릿 안 ${} 자식(들여쓰기) */
.inj-subpieces { margin: 2px 0 2px 18px; padding-left: 12px; border-left: 2px dashed var(--line-net); }
.inj-subpiece { padding: 5px 8px; }
.inj-token { flex: none; min-width: 92px; font-size: 12px; font-weight: 700; color: var(--ink-note); background: var(--line-row); padding: 1px 6px; border-radius: 5px; }

/* ============================================================
   프로젝트 보드(#/projects2) — '보기' 팝오버(영역/상태 스위치) + 영역 사이드바
   (옛 리스트›상태/리스트/상태 세그먼트 + 층위강조/사이드바 레이아웃 토글을 통합)
   ============================================================ */

/* '보기' 버튼 — 헤더 좌측. .pjv-subtask-btn 톤 + caret. */
.pjv-view-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; padding: 4px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); }
.pjv-view-btn:hover { background: var(--bg-tint); color: var(--ink); }
.pjv-view-btn.active { color: var(--blue); border-color: var(--blue); background: var(--bg-tint); }
.pjv-view-ic { width: 16px; height: 16px; flex: none; }
.pjv-view-btn-label { letter-spacing: -.1px; }
.pjv-view-btn-caret { font-size: 9px; line-height: 1; color: var(--muted-2); margin-left: 1px; }
.pjv-view-btn.active .pjv-view-btn-caret { color: var(--blue); }

/* '보기' 팝오버 — 스위치 행 2개(영역으로 / 상태로). */
.pjv-view-pop { min-width: 272px; padding: 5px; }
.pjv-view-pop-head { font-size: 11.5px; font-weight: 700; color: var(--muted-2); padding: 6px 9px 5px; letter-spacing: .2px; }
.pjv-view-item { justify-content: space-between; gap: 12px; align-items: center; padding: 8px 9px; }
.pjv-view-item:hover { background: var(--bg-tint-2); }
.pjv-view-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pjv-view-item-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pjv-view-item.on .pjv-view-item-label { color: var(--blue); }
.pjv-view-item-hint { font-size: 11.5px; color: var(--muted-2); line-height: 1.35; white-space: normal; }

/* 토글 스위치(iOS 형) */
.pjv-switch { flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line-net, #d9dee6); position: relative; transition: background .15s ease; }
.pjv-view-item.on .pjv-switch { background: var(--blue); }
.pjv-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(20,35,59,.28); transition: transform .15s ease; }
.pjv-view-item.on .pjv-switch-knob { transform: translateX(14px); }

/* ＋ 글리프(새 영역 버튼 안) */
.pjv-newlist-plus { font-size: 13px; font-weight: 700; line-height: 1; }

/* 영역 사이드바 — 좌측 영역 네비 + 본문(선택 영역의 프로젝트). */
.pjv-side-wrap { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
/* nav = 본문 높이만큼 늘어나는 레일(구분선이 끝까지 이어짐). 항목은 inner 가 sticky 로 들고 스크롤 따라온다. */
.pjv-side-nav { padding: 0 12px 8px 0; border-right: 1px solid var(--line); }
.pjv-side-nav-inner { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 1px; }
.pjv-side-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 4px 6px 8px; }
.pjv-side-nav-head-label { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); }
.pjv-side-collapse { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: 11px; border-radius: 6px; padding: 0; }
.pjv-side-collapse:hover { background: var(--bg-tint-2); color: var(--ink); }
.pjv-side-navitem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 6px 9px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-sub); }
.pjv-side-navitem:hover { background: var(--bg-tint-2); color: var(--ink); }
.pjv-side-navitem.active { background: var(--bg-sel); color: var(--ink); font-weight: 700; }
.pjv-side-navlabel { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-side-navcount { flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted-2); }
.pjv-side-navitem.active .pjv-side-navcount { color: var(--ink-sub); }
.pjv-side-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.pjv-side-dot.all { background: linear-gradient(135deg, var(--blue), #8b5cf6); }
.pjv-side-dot.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted-3, #aab1bd); }
.pjv-side-newlist { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; border: 1px dashed var(--line-net, #d9dee6); background: none; cursor: pointer; padding: 6px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); align-self: flex-start; }
.pjv-side-newlist:hover { border-color: var(--blue); color: var(--blue); background: var(--bg-tint); }
.pjv-side-main { padding-left: 16px; min-width: 0; }
.pjv-side-main > .pjv-tgroup:first-child { margin-top: 0; }

/* 영역 목록 접힘 — 얇은 레일(▶ 펼치기 + 영역 색점 아이콘). 영역 묶음은 유지, 본문은 그대로. */
.pjv-side-wrap.pjv-side-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
.pjv-side-rail { border-right: 1px solid var(--line); }
.pjv-side-rail-inner { position: sticky; top: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 10px; }
.pjv-side-expand { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--bg); cursor: pointer; color: var(--muted); font-size: 10px; border-radius: 7px; padding: 0; margin-bottom: 2px; }
.pjv-side-expand:hover { border-color: var(--blue); color: var(--blue); background: var(--bg-tint); }
.pjv-side-raildot { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; border-radius: 7px; padding: 0; }
.pjv-side-raildot:hover { background: var(--bg-tint-2); }
.pjv-side-raildot.active { background: var(--bg-sel); box-shadow: inset 0 0 0 1.5px var(--blue); }
.pjv-side-raildot .pjv-side-dot { width: 11px; height: 11px; }

/* ════════════ WIP styles.css 에서 유실됐던 HEAD 코어 규칙 복원 (2026-06-30 #317 재발방지) ════════════
   원인: learn-redesign WIP styles.css 가 옛 base 기준이라, 그 뒤 추가된 코어 규칙들(프로필 아바타·헤더 hidden·
   프로젝트 보드 리스트 그룹 #280 등)을 통째로 떨궜다 → 라이브에서 해당 UI 들 스타일 깨짐. 아래는 HEAD 에서 되살린 38건. */
.logout-btn:hover { color: var(--ink-sub); border-color: var(--line-net); background: var(--bg-tint); }
/* display 를 줬으므로 hidden 속성이 안 먹는다 → 셋 다 명시적으로 숨김 복구. */
.help-link[hidden], .user-email[hidden], .logout-btn[hidden] { display: none; }
.prof-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; min-height: 1em; }
/* 아바타(프로필 원형) — 업로드 이미지 또는 이니셜+색상. core.profileAvatar 가 생성. */
.pava { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 700; font-size: 12px; line-height: 1; user-select: none; }
.pava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-ava-lg { width: 72px; height: 72px; font-size: 27px; box-shadow: 0 2px 5px rgba(21, 35, 59, .15); }
/* 내 프로필 모달 — 아바타 행(미리보기 + 올리기/기본으로). */
.prof-ava-row { display: flex; align-items: center; gap: 16px; }
.prof-ava-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prof-ava-actions .prof-hint { flex-basis: 100%; }
.cmt-card:last-child { border-bottom: none; }
.pjk-acts .btn { padding: 3px 8px; font-size: 12px; }
/* ─────────────────────────────────────────────────────────────────────────
   프로젝트 보드 리스트 그룹(#280) — 리스트 1차 그룹핑(클릭업 List▸Task)
   ───────────────────────────────────────────────────────────────────────── */
.pjv-list-colhead { margin-bottom: 2px; }
.pjv-list-colhead-name { font-size: 11.5px; font-weight: 600; color: var(--muted-2); letter-spacing: .2px; }
.pjv-list-group { margin-top: 2px; }
/* 리스트 헤더 — 좌(캐럿·색점·이름·개수·내리스트칩) / 우(멤버 페이스파일·⋯). 헤더 빈 곳 클릭 = 접기/펼치기. */
.pjv-tgroup-head.pjv-list-head { justify-content: space-between; cursor: pointer; padding: 9px 12px; margin-top: 6px; gap: 10px; }
.pjv-tgroup-head.pjv-list-head:hover { background: var(--bg-tint); }
.pjv-list-head-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pjv-list-head-main .pjv-tgroup-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjv-list-head-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.pjv-list-head-actions .pjv-cell-btn { width: auto; height: auto; padding: 3px 6px; border-radius: 7px; }
.pjv-list-head-un .pjv-tgroup-label { color: var(--muted); font-weight: 600; }
.pjv-list-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(21,35,59,.10); }
.pjv-list-dot.sm { width: 9px; height: 9px; }
.pjv-list-mine-chip { font-size: 11px; font-weight: 700; color: var(--blue); background: var(--bg-tint); border: 1px solid var(--line-net); border-radius: 999px; padding: 1px 8px; letter-spacing: .2px; flex: none; }
/* 헤더 버튼 — 내 할당만(토글, .pjv-closed-btn 재사용) · 새 리스트 */
.pjv-mine-btn svg { width: 14px; height: 14px; flex: none; }
.pjv-newlist-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-net); background: var(--bg); cursor: pointer; padding: 4px 11px 4px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--blue); font-family: inherit; }
.pjv-newlist-btn:hover { background: var(--bg-tint); border-color: var(--blue); }
/* 리스트 색 팔레트(생성/수정 폼) — 'A'=자동(이름 해시색) */
.pjv-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pjv-sw { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(21,35,59,.10); }
.pjv-sw.on { border-color: var(--ink); }
.pjv-sw-none { background: var(--bg-tint); color: var(--muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* 그룹 기준 토글(리스트 ⇄ 상태) — 보드 헤더 (#280) */
.pjv-groupseg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.pjv-groupseg-btn { border: none; background: var(--bg); padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit; }
.pjv-groupseg-btn + .pjv-groupseg-btn { border-left: 1px solid var(--line); }
.pjv-groupseg-btn:hover { background: var(--bg-tint); color: var(--ink-sub); }
.pjv-groupseg-btn.active { background: var(--blue); color: #fff; }
/* 2단계(리스트›상태) — 리스트 안의 상태 하위그룹: 헤더만 살짝 들여쓰고 라벨은 작게(행 그리드는 정렬 유지) */
.pjv-list-group .pjv-tgroup-body .pjv-tgroup > .pjv-tgroup-head { padding-left: 26px; }
.pjv-list-group .pjv-tgroup-body .pjv-tgroup .pjv-tgroup-label { font-size: 13px; font-weight: 600; color: var(--ink-sub); }