/* 프로젝트 관리 — 진행 기록 리치 에디터(Trix)와 기록 본문 표시.
   Trix 기본 스타일은 밝은 화면 기준이라 PI 다크 테마에서 도구 막대 아이콘(검은 SVG)이 안 보인다 → 다크에서만 반전. */

trix-toolbar .trix-button-row { flex-wrap: wrap; gap: 4px; }
trix-toolbar .trix-button-group { margin-bottom: 4px; border-color: var(--bd); border-radius: 8px; overflow: hidden; }
trix-toolbar .trix-button { border-bottom: none; background: var(--bg-base); }
trix-toolbar .trix-button:not(:first-child) { border-left-color: var(--bd); }
trix-toolbar .trix-button.trix-active { background: var(--bg-elev); }
html:not([data-theme="light"]) trix-toolbar .trix-button--icon::before { filter: invert(1); opacity: .75; }
html:not([data-theme="light"]) trix-toolbar .trix-button--icon.trix-active::before { opacity: 1; }
trix-toolbar .pj-trix-img { width: auto; padding: 0 8px; font-size: 11px; color: var(--t2); white-space: nowrap; }
trix-toolbar .trix-dialog { background: var(--bg-surf); border-color: var(--bd); color: var(--t1); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
trix-toolbar .trix-input--dialog { background: var(--bg-base); color: var(--t1); border-color: var(--bd); }
trix-toolbar .trix-button--dialog { color: var(--t2); }

trix-editor.pj-trix {
  min-height: 90px; max-height: 360px; overflow-y: auto;
  background: var(--bg-base); color: var(--t1);
  border: 1px solid var(--bd); border-radius: 8px; padding: 8px 10px; line-height: 1.6;
}
trix-editor.pj-trix:empty:not(:focus)::before { color: var(--t4); }
trix-editor.pj-trix a, .pj-rich a { color: #818cf8; text-decoration: underline; }
html[data-theme="light"] trix-editor.pj-trix a, html[data-theme="light"] .pj-rich a { color: #4f46e5; }   /* 밝은 배경에서 연보라는 대비가 낮다 */
/* 이미지 — 폭(width 속성)은 사람이 고른 크기, 높이는 비율대로(height:auto). 예전엔 max-height 만 걸려 정사각형이 가로로 눌려 보였다.
   크기를 안 고른 옛 이미지만 높이 상한(가로세로 둘 다 auto 라 비율 유지) */
trix-editor.pj-trix img, .pj-rich img { max-width: 100%; height: auto; border-radius: 6px; }
trix-editor.pj-trix img:not([width]), .pj-rich img:not([width]) { width: auto; max-height: 360px; }
/* 이미지 툴바의 크기 버튼(Trix 첨부 툴바 안) */
.pj-img-size { position: absolute; top: 3.2em; left: 50%; transform: translateX(-50%); display: flex; gap: 2px;
  padding: 2px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--bd); box-shadow: 0 4px 14px rgba(0,0,0,.35); z-index: 2; }
.pj-img-size button { font-size: 11px; padding: 2px 8px; border-radius: 6px; color: var(--t2); white-space: nowrap; }
.pj-img-size button:hover { background: var(--bg-surf); color: var(--t1); }
.pj-img-size button.on { background: var(--c-accent); color: #fff; }
trix-editor.pj-trix .attachment__caption, .pj-rich figcaption { color: var(--t3); font-size: 11px; }
trix-editor.pj-trix .attachment--file { border-color: var(--bd); }

/* 저장된 기록 본문(서버가 정화한 HTML) */
.pj-rich ul { list-style: disc; padding-left: 1.2em; }
.pj-rich ol { list-style: decimal; padding-left: 1.2em; }
.pj-rich blockquote { border-left: 3px solid var(--bd); padding-left: .7em; color: var(--t3); }
.pj-rich pre { background: var(--bg-base); padding: 6px 8px; border-radius: 6px; white-space: pre-wrap; }
.pj-rich h1 { font-size: 1.15em; font-weight: 600; }
.pj-rich figure { margin: 6px 0; }
.pj-rich figure > a:not(:has(img))::before { content: "📎 "; }

/* 진행률 숫자 입력 — 기본 스핀 화살표는 다크 테마에서 안 보이고 작아서 숨기고 −/+ 버튼을 쓴다 */
.pj-spin::-webkit-outer-spin-button, .pj-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pj-spin { -moz-appearance: textfield; appearance: textfield; }

/* 펼침 목록(고르기 칸) — 창 배경(--bg-surf)과 같은 색이면 목록이 창에 묻힌다. 한 단계 밝게 + 진한 테두리 + 그림자 */
.pj-pop { --pj-pop-sel: rgba(99,102,241,.22); background: var(--bg-elev); border: 1px solid var(--bd-sub);
          box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.18); }
.pj-pop button:hover { background: rgba(99,102,241,.12); }
html[data-theme="light"] .pj-pop { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 10px 28px rgba(15,23,42,.16), 0 0 0 1px rgba(99,102,241,.15); }
html[data-theme="light"] .pj-pop { --pj-pop-sel: rgba(99,102,241,.12); }

/* 고정 크기 창 안의 편집기 — 남는 세로 공간을 본문 칸이 채운다(도구 막대는 위, 본문은 늘어난다) */
.pj-trix-fill trix-editor.pj-trix { flex: 1 1 auto; min-height: 120px; max-height: none; }

/* Jira 같은 코드(MB-12) — Project·Task 에만 */
.pj-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600;
  padding: 0 5px; border-radius: 4px; line-height: 16px; color: #93c5fd; background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.3); letter-spacing: .01em; }
html[data-theme="light"] .pj-key { color: #1d4ed8; background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.35); }

/* 상세 화면 등록일 — 글자처럼 보이다가 누르면 날짜 고르기 */
.pj-reg-input { background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--t3);
  font-size: 10px; padding: 0 2px; cursor: pointer; color-scheme: dark; }
.pj-reg-input:hover, .pj-reg-input:focus { border-color: var(--bd); color: var(--t1); outline: none; }
html[data-theme="light"] .pj-reg-input { color-scheme: light; }

/* Initiative 순서 바꾸기 — 줄에 올렸을 때만 보인다(터치 화면은 항상) */
.pj-row .pj-move { opacity: 0; transition: opacity .12s; }
.pj-row:hover .pj-move, .pj-row:focus-within .pj-move { opacity: 1; }
@media (hover: none) { .pj-row .pj-move { opacity: 1; } }
.pj-move button { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; line-height: 1; color: var(--t2);
  background: var(--bg-surf); border: 1px solid var(--bd); }
.pj-move button:hover:not(:disabled) { color: var(--t1); border-color: var(--c-accent); }
.pj-move button:disabled { opacity: .3; cursor: default; }

/* 연결된 저장소 칩 · 개발일지에서 자동으로 들어온 기록 표시 */
.pj-clue { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: 999px; font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--t2); background: var(--bg-surf); border: 1px solid var(--bd); }
.pj-clue .pj-clue-name { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.pj-clue .pj-clue-name:hover { color: var(--t1); }
.pj-clue .pj-clue-hint { font-family: inherit; font-size: 10px; color: var(--t4); }
.pj-clue .pj-clue-x { width: 16px; height: 16px; border-radius: 999px; font-size: 9px; color: var(--t4); }
.pj-clue .pj-clue-x:hover { color: #f87171; background: var(--bg-elev); }
.pj-triage { font-size: 10px; padding: 0 6px; border-radius: 4px; line-height: 16px; color: #fbbf24; background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35); }
html[data-theme="light"] .pj-triage { color: #b45309; }
.pj-auto { font-size: 10px; padding: 0 6px; border-radius: 4px; line-height: 16px; color: #34d399; background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3); }
html[data-theme="light"] .pj-auto { color: #047857; }

/* 참여자 칩(D26) */
.pj-member { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 2px; border-radius: 999px; font-size: 11px;
  color: var(--t2); background: var(--bg-surf); border: 1px solid var(--bd); }
.pj-member img { width: 16px; height: 16px; border-radius: 999px; object-fit: cover; background: var(--bg-elev); }
.pj-member button { width: 14px; height: 14px; border-radius: 999px; font-size: 9px; color: var(--t4); }
.pj-member button:hover { color: #f87171; background: var(--bg-elev); }