/* JOBIS 모니터 — 다크 테마 (SCREEN_PLAN §2 디자인 토큰) */
:root {
  --bg:        #0d1117;
  --bg-card:   #161b22;
  --bg-inset:  #1c2128;
  --border:    #30363d;
  --text:      #e6edf3;
  --text-dim:  #8b949e;
  --accent:    #4493f8;
  --ok:        #3fb950;
  --warn:      #d29922;
  --danger:    #f85149;
  --plan:      #8957e5;
  --neutral:   #6e7681;
  --radius:    10px;
  --appbar-h:  52px;
  --tabbar-h:  56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 14px; line-height: 1.5;
  min-height: 100dvh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ── 셸 레이아웃 ─────────────────────────────── */
.shell { display: grid; grid-template-columns: 210px 1fr; grid-template-rows: var(--appbar-h) 1fr; min-height: 100dvh; }
.appbar {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--bg-card); border-bottom: 1px solid var(--border); height: var(--appbar-h);
}
.appbar .logo { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.appbar .logo .ring { width: 14px; height: 14px; border: 3px solid var(--accent); border-radius: 50%; display: inline-block; }
.appbar .spacer { flex: 1; }
/* v1.3.4 G: 세션 메뉴 드롭다운(우상단) — 로그아웃 중복/어색 톱니 정리 */
.session-menu-wrap { position: relative; }
.session-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 180px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 2px;
}
.session-menu.hidden { display: none; }
.session-menu .sm-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px;
  background: none; border: none; color: var(--text); font-size: 13px; font-weight: 600;
  text-align: left; width: 100%; min-height: 40px;
}
.session-menu .sm-item:hover { background: var(--bg-inset); text-decoration: none; }
.session-menu .sm-item.danger { color: var(--danger); }
.session-menu .sm-item .glyph { width: 16px; text-align: center; opacity: .85; }
/* v1.3.4 A: 팀별 상태 미니 인디케이터 */
.team-strip { display: flex; align-items: center; gap: 5px; min-width: 0; }
.team-strip .ts-full { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.team-strip .ts-summary { display: none; font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.team-strip .ts-summary.warn { color: var(--warn); }
.team-strip .ts-summary.danger { color: var(--danger); }
.ts-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bg-inset); border: 1px solid var(--border); color: var(--text-dim);
}
.ts-dot:hover { text-decoration: none; border-color: var(--accent); color: var(--text); }
.ts-dot.green { color: var(--ok); }
.ts-dot.yellow.hot { background: rgba(210,153,34,.16); border-color: var(--warn); color: var(--warn); }
.ts-dot.red.hot { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); font-weight: 800; }
/* 태블릿(≤1180): 점 대신 요약 텍스트 */
@media (max-width: 1180px) {
  .team-strip .ts-full { display: none; }
  .team-strip .ts-summary { display: inline; }
}
.iconbtn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.iconbtn:hover { background: var(--bg-inset); }
.iconbtn.spin .glyph { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.sidenav {
  border-right: 1px solid var(--border); background: var(--bg-card);
  display: flex; flex-direction: column; padding: 10px 8px; gap: 4px;
  position: sticky; top: var(--appbar-h); height: calc(100dvh - var(--appbar-h));
}
.sidenav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  color: var(--text-dim); font-weight: 600; min-height: 44px;
}
.sidenav a .glyph { width: 20px; text-align: center; }
.sidenav a:hover { background: var(--bg-inset); text-decoration: none; }
.sidenav a.active { color: var(--text); background: var(--bg-inset); border-left: 3px solid var(--accent); padding-left: 9px; }
.sidenav .navspacer { flex: 1; }
.tabbar { display: none; }

main.content { padding: 16px; min-width: 0; }
.page-title { font-size: 20px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 연결 배너 */
.conn-banner {
  grid-column: 1 / -1; background: #3d1d20; color: #ffb4ad;
  border-bottom: 1px solid var(--danger); padding: 6px 14px; font-size: 13px;
}

/* ── 카드 ────────────────────────────────────── */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 0; }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.card-title { font-size: 15px; font-weight: 600; margin: 0; }
.card-head .spacer { flex: 1; }
.card-foot { margin-top: 12px; text-align: right; }

/* ── 상태 표시 ───────────────────────────────── */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.green { background: var(--ok); } .dot.yellow { background: var(--warn); }
.dot.red { background: var(--danger); } .dot.planning { background: var(--plan); }
.dot.neutral, .dot.unknown { background: var(--neutral); }
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap;
}
.badge.green { color: var(--ok); } .badge.yellow { color: var(--warn); }
.badge.red { color: var(--danger); } .badge.planning { color: var(--plan); }
.badge.neutral { color: var(--text-dim); }
.badge.accent { color: var(--accent); }
.badge.running { color: var(--ok); }
.badge.running::first-letter { animation: pulse 1.6s ease-in-out infinite; }
.chip.engine-chip { font-size: 11px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  padding: 1px 7px; border-radius: 6px; background: var(--bg-inset);
  border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap;
}
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.danger { color: var(--danger); border-color: var(--danger); }
.chip.ok { color: var(--ok); }
.chip.team { color: var(--accent); }

/* ── 상태 4종(§7) ────────────────────────────── */
.skeleton { border-radius: 6px; background: var(--bg-inset); position: relative; overflow: hidden; min-height: 14px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(230,237,243,.06), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skel-stack > .skeleton { margin-bottom: 10px; }
.empty-state, .error-state { text-align: center; padding: 22px 10px; color: var(--text-dim); }
.empty-state .glyph, .error-state .glyph { font-size: 22px; display: block; margin-bottom: 6px; opacity: .7; }
.error-state { color: var(--danger); }
.error-state .sub { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
/* v1.3.4: 정상 상태 컴팩트(초록 체크 한 줄) */
.ok-state { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; color: var(--text-dim); font-size: 13px; }
.ok-state .ok-check {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(63,185,80,.16); color: var(--ok); font-size: 12px; font-weight: 700;
}

/* ── 홈 그리드 ───────────────────────────────── */
.home-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "org usage" "org engine" "sess mail" "pipe pipe"; }
/* v1.3.4 G: 그리드 자식 min-width:0 강제 — 팀 그리드가 열을 넘쳐 옆 카드를 덮는 문제 방지 */
.home-grid > * { min-width: 0; }
.area-org { grid-area: org; } .area-usage { grid-area: usage; } .area-engine { grid-area: engine; }
.area-sess { grid-area: sess; } .area-mail { grid-area: mail; } .area-pipe { grid-area: pipe; }

/* 조직도 */
.org-root { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; }
.org-root .node {
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 14px; font-weight: 600; display: flex; gap: 8px; align-items: center;
}
.org-root .link-line { width: 1px; height: 12px; background: var(--border); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.team-node { min-width: 0; }
.team-node .tn-top { min-width: 0; }
.team-node .tn-top, .team-node .tn-sub { overflow: hidden; text-overflow: ellipsis; }
.team-node {
  display: block; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text); min-height: 44px;
}
.team-node:hover { border-color: var(--accent); text-decoration: none; }
.team-node .tn-top { display: flex; align-items: center; gap: 6px; font-weight: 700; word-break: keep-all; overflow-wrap: break-word; }
.team-node .tn-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-node .tn-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.team-mini-grid { display: none; }
/* 팀 카드 로드맵 진행율 미니 바 */
.tn-progress { margin-top: 8px; }
.tn-progress .pl { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin-bottom: 3px; }
.tn-progress .bar { height: 4px; border-radius: 2px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.tn-progress .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.tn-progress.none .pl { opacity: .55; }
/* 로드맵 체크리스트(팀 상세) */
.roadmap-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.roadmap-section { margin-bottom: 14px; }
.roadmap-section h4 { margin: 0 0 6px; font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.roadmap-section h4 .cnt { color: var(--text-dim); font-weight: 400; font-size: 12px; }
.roadmap-item { display: flex; gap: 8px; padding: 4px 0 4px 6px; font-size: 13px; align-items: baseline; }
.roadmap-item .ri-ico { flex: none; width: 16px; text-align: center; color: var(--text-dim); }
.roadmap-item.done .ri-ico { color: var(--ok); }
.roadmap-item.done .ri-title { text-decoration: line-through; color: var(--text-dim); }
.roadmap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 20px; }

/* 게이지 */
.gauge { margin-bottom: 12px; }
.gauge .g-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; gap: 8px; }
.gauge .g-val { font-size: 15px; font-weight: 700; color: var(--text); }
.gauge .g-track { height: 10px; border-radius: 6px; background: var(--bg-inset); overflow: hidden; border: 1px solid var(--border); }
.gauge .g-fill { height: 100%; border-radius: 6px; background: var(--ok); transition: width .5s; }
.gauge.warn .g-fill { background: var(--warn); }
.gauge.danger .g-fill { background: var(--danger); }
.gauge.lg .g-track { height: 16px; }
.gauge.lg .g-val { font-size: 24px; }
.usage-mini { font-size: 12px; color: var(--text-dim); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.usage-mini b { color: var(--text); font-weight: 600; }

/* 엔진 카드 */
.engine-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.engine-card { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.engine-card .en-top { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.engine-card .en-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engine-banner {
  background: #3d2c12; border: 1px solid var(--warn); color: var(--warn);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 10px;
}

/* 세션 보드 */
.session-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 8px; background: var(--bg-inset); margin-bottom: 6px; min-height: 44px; min-width: 0;
}
.session-row .s-icon { flex: none; width: 18px; text-align: center; }
.session-row .s-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row .s-cwd { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 60px; direction: rtl; text-align: left; }
.session-row .s-cwd bdo { unicode-bidi: bidi-override; direction: ltr; }
.session-row .s-elapsed { font-size: 12px; color: var(--text-dim); flex: none; }
.s-state.run { color: var(--ok); } .s-state.wait { color: var(--warn); } .s-state.idle { color: var(--neutral); }

/* 파이프라인 */
.pipe-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pipe-strip .pc {
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; display: inline-flex; gap: 6px; align-items: center; color: var(--text); min-height: 36px;
}
.pipe-strip .pc b { font-size: 16px; }
.pipe-strip .arrow { color: var(--text-dim); }
.cmd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cmd-chip {
  border: 1px solid var(--border); background: var(--bg-inset); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; display: inline-flex; gap: 8px; align-items: center;
  color: var(--text); max-width: 100%; min-height: 36px;
}
.cmd-chip:hover { border-color: var(--accent); }
.cmd-chip .id { font-family: Consolas, monospace; color: var(--text-dim); }

/* 메일박스 */
.feed-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px;
  background: none; border: none; width: 100%; text-align: left; min-height: 44px;
}
.feed-item:hover { background: var(--bg-inset); }
.feed-item .f-icon { flex: none; width: 18px; text-align: center; }
.feed-item .f-body { min-width: 0; flex: 1; }
.feed-item .f-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-item .f-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 8px; }
.feed-list { max-height: 420px; overflow-y: auto; }

/* ── 팀 상세 ─────────────────────────────────── */
.team-detail-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px;
  grid-template-rows: min-content 1fr;
  grid-template-areas: "roster proj" "roster blk";
}
.team-detail-grid > * { min-width: 0; }
.td-roster { grid-area: roster; } .td-proj { grid-area: proj; } .td-blk { grid-area: blk; align-self: start; }
.roster-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.roster-tabs button {
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; color: var(--text-dim); font-size: 12px; font-weight: 600; min-height: 32px;
}
.roster-tabs button.active { color: var(--text); border-color: var(--accent); }
.member-row {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  border-bottom: 1px solid var(--border); min-height: 44px; flex-wrap: wrap;
}
.member-row:last-child { border-bottom: none; }
.member-row .m-avatar { flex: none; }
.member-row .m-agent { font-weight: 600; font-family: Consolas, monospace; font-size: 13px; }
.member-row .m-role { color: var(--accent); font-size: 12px; flex: none; }
.member-row .m-desc { color: var(--text-dim); font-size: 12px; flex-basis: 100%; }
.blocker-row {
  padding: 8px 10px 8px 12px; border-left: 3px solid var(--warn); background: var(--bg-inset);
  border-radius: 0 8px 8px 0; margin-bottom: 8px; cursor: pointer; font-size: 13px;
}
.blocker-row.hot { border-left-color: var(--danger); }
.blocker-row .full { display: none; margin-top: 6px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; }
.blocker-row.open .full { display: block; }
.blocker-row.open .brief { display: none; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.clamp-open { display: block; -webkit-line-clamp: unset; }
.proj-row { padding: 7px 4px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
.proj-row:last-child { border-bottom: none; }
.team-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 버튼 ────────────────────────────────────── */
.btn {
  background: var(--bg-inset); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 16px; font-weight: 600; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #06101f; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #1a0505; }
.btn.ghost { background: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { min-height: 34px; padding: 5px 12px; font-size: 13px; }

/* ── 컨트롤 화면 ─────────────────────────────── */
.control-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: start; }
.form-field { margin-bottom: 12px; }
.form-field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; font-weight: 600; }
.form-field input[type=text], .form-field input[type=number], .form-field select, .form-field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text); min-height: 44px;
}
.form-field textarea { min-height: 80px; resize: vertical; }
.form-field .hint { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.form-field .err { font-size: 12px; color: var(--danger); margin-top: 3px; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea { border-color: var(--danger); }
.check-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; min-height: 36px; }
.check-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.type-warn { color: var(--warn); }
.notice-box {
  background: var(--bg-inset); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--text-dim); margin-bottom: 12px;
}
.notice-box.warn { border-left-color: var(--warn); }
.notice-box.danger { border-left-color: var(--danger); }
.notice-box.info { border-left-color: var(--accent); }

/* v1.4.0: 에이전트 실행상태 요약(홈 세션 카드) */
.agent-summary { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 8px 10px; margin-bottom: 8px;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.agent-summary b { font-variant-numeric: tabular-nums; }
.agent-summary .as-run { color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.agent-summary .as-run .as-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }
.agent-summary .as-wait { color: var(--warn); }
.agent-summary .as-idle { color: var(--text-dim); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* v1.4.0: AI 코딩도구 카드 + 엔진 정책 편집 */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tool-card { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.tool-card.active { border-color: var(--accent); }
.tool-card.manual { border-style: dashed; }
.tool-card .tc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-card .tc-top b { font-size: 15px; }
.tool-card .tc-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.tool-card .tc-desc { margin: 6px 0 10px; }
.chip.rank-chip { color: var(--accent); border-color: var(--accent); font-weight: 700; }
/* v1.4.1: 정직 상태 배지(추정) + 알림 설정 폼 */
.chip.status-est { color: var(--text-dim); font-style: italic; }
.notify-ch { min-height: 40px; }
.notify-field { margin: 8px 0; }
.notify-field .agent-pick { margin-top: 4px; }
.stat-tiles.two { grid-template-columns: 1fr 1fr; }
.policy-order { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.policy-row { display: flex; align-items: center; gap: 8px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.policy-row .btn.sm { min-height: 30px; padding: 2px 10px; }
.policy-slider { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.policy-slider label { flex: none; width: 160px; font-size: 13px; color: var(--text-dim); }
.policy-slider input[type=range] { flex: 1; accent-color: var(--accent); }
.policy-slider .num { width: 44px; text-align: right; font-weight: 700; }
.mode-radios { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.mode-radio { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.mode-radio input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.mode-radio .mode-desc { display: block; margin-top: 2px; }

/* v1.3.4 H: 엔진 필터 탭(사용량 상세) */
.engine-tab-wrap { margin-bottom: 14px; }
.seg.engine-tabs { flex-wrap: wrap; }
.seg.engine-tabs .active.etab-claude { box-shadow: inset 0 -2px 0 var(--accent); }
.seg.engine-tabs .active.etab-codex { box-shadow: inset 0 -2px 0 var(--plan); }
.seg.engine-tabs .active.etab-hermes { box-shadow: inset 0 -2px 0 var(--ok); }

.board-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.board-col { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-width: 0; }
.board-col h4 { margin: 0 0 8px; font-size: 12px; color: var(--text-dim); display: flex; justify-content: space-between; }
.board-col.wide { grid-column: span 3; }
.board-done-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 10px; }
.cmd-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; cursor: pointer; font-size: 12px; min-height: 44px;
}
.cmd-card:hover { border-color: var(--accent); }
.cmd-card.flash { animation: flash 2s ease-out; }
@keyframes flash { 0%, 40% { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(68,147,248,.35); } 100% { box-shadow: none; } }
.cmd-card .cc-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.cmd-card .cc-prompt { color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cmd-card .cc-meta { color: var(--text-dim); margin-top: 4px; display: flex; gap: 8px; }
.minimap { display: flex; gap: 8px; flex-wrap: wrap; }
.minimap a {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-inset);
  padding: 7px 10px; color: var(--text); font-size: 12px; display: inline-flex; gap: 6px; align-items: center; min-height: 36px;
}
.minimap a:hover { border-color: var(--accent); text-decoration: none; }

/* ── 사용량 상세 ─────────────────────────────── */
.usage-grid-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat-tile { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.stat-tile .st-val { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-tile .st-label { font-size: 12px; color: var(--text-dim); }
.chart-scroll { overflow-x: auto; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; }
.chart-tip { font-size: 12px; color: var(--text-dim); margin-top: 6px; min-height: 18px; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { color: var(--text-dim); font-weight: 600; font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { background: none; border: none; padding: 7px 14px; color: var(--text-dim); font-weight: 600; min-height: 36px; }
.seg button.active { background: var(--bg-inset); color: var(--text); }
.block-hist { display: flex; gap: 8px; flex-wrap: wrap; }
.block-hist .bh {
  width: 84px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 8px; text-align: center;
}
.block-hist .bh .bar { height: 44px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 4px; }
.block-hist .bh .bar i { width: 20px; border-radius: 3px 3px 0 0; background: var(--ok); display: block; }
.block-hist .bh.warn .bar i { background: var(--warn); }
.block-hist .bh.danger .bar i { background: var(--danger); }
.block-hist .bh .lbl { font-size: 11px; color: var(--text-dim); }

/* ── 로그인 ──────────────────────────────────── */
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 420px; }
.login-logo { text-align: center; margin-bottom: 22px; }
.login-logo .ring { width: 34px; height: 34px; border: 5px solid var(--accent); border-radius: 50%; display: inline-block; }
.login-logo h1 { font-size: 22px; margin: 10px 0 2px; }
.login-logo p { color: var(--text-dim); margin: 0; font-size: 13px; }
.auth-tabs { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.auth-tabs button { flex: 1; background: none; border: none; padding: 11px 0; color: var(--text-dim); font-weight: 700; min-height: 44px; }
.auth-tabs button.active { background: var(--bg-inset); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 18px 0; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text-dim); }
.pin-dots i.on { background: var(--accent); border-color: var(--accent); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 260px; margin: 0 auto; }
.keypad button {
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px;
  font-size: 20px; font-weight: 600; height: 56px; color: var(--text);
}
.keypad button:hover { border-color: var(--accent); }
.pattern-wrap { display: flex; justify-content: center; margin: 12px 0; }
.pattern-wrap svg { touch-action: none; }
.login-msg { text-align: center; min-height: 22px; margin-top: 12px; font-size: 13px; }
.login-msg.err { color: var(--danger); }
.login-msg.ok { color: var(--ok); }
.otp-row { display: flex; gap: 10px; margin-top: 14px; }
.otp-row input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 18px; letter-spacing: 4px; text-align: center; min-width: 0; }
.login-foot { text-align: center; margin-top: 16px; font-size: 12px; }

/* ── 토스트 ──────────────────────────────────── */
#toasts { position: fixed; right: 14px; bottom: 14px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 28px)); }
.toast {
  background: var(--bg-inset); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
  animation: toastin .2s ease-out;
}
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.danger { border-left-color: var(--danger); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* ── 모달/다이얼로그/드로어 ──────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(1,4,9,.7); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; }
.dialog {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  width: 100%; max-width: 520px; max-height: min(86dvh, 720px); display: flex; flex-direction: column;
}
.dialog.wide { max-width: 760px; }
.dialog-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dialog-head h3 { margin: 0; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-body { padding: 16px 18px; overflow-y: auto; }
.dialog-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.dialog .kv { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; font-size: 13px; margin-bottom: 10px; }
.dialog .kv dt { color: var(--text-dim); } .dialog .kv dd { margin: 0; word-break: break-word; }
.dialog pre { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; max-height: 300px; overflow-y: auto; }
.dlist { margin: 8px 0; padding-left: 4px; list-style: none; font-size: 13px; }
.dlist li { padding: 3px 0; }
.type-input { width: 100%; background: var(--bg); border: 1px solid var(--danger); border-radius: 8px; padding: 10px 12px; color: var(--text); font-family: Consolas, monospace; }
.timeline { list-style: none; margin: 8px 0; padding: 0; font-size: 13px; }
.timeline li { padding: 4px 0 4px 18px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.md-view h1, .md-view h2, .md-view h3 { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.md-view code { background: var(--bg-inset); border-radius: 4px; padding: 1px 5px; font-family: Consolas, monospace; font-size: 12px; }
.md-view pre code { background: none; padding: 0; }
.md-view table { border-collapse: collapse; } .md-view td, .md-view th { border: 1px solid var(--border); padding: 4px 8px; font-size: 13px; }

/* ── 반응형: 태블릿(600~1023) ────────────────── */
@media (max-width: 1023px) {
  .shell { grid-template-columns: 56px 1fr; }
  .sidenav a span.lbl { display: none; }
  .sidenav a { justify-content: center; padding: 10px 0; }
  .home-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "org org" "usage engine" "sess sess" "pipe pipe" "mail mail"; }
  .control-grid, .usage-grid-top { grid-template-columns: 1fr; }
  /* 팀 상세 세로 1열 — 문제(blockers)를 로스터보다 위로(§5.3) */
  .team-detail-grid { display: flex; flex-direction: column; }
  .td-blk { order: 1; } .td-roster { order: 2; } .td-proj { order: 3; }
  .board-cols { grid-template-columns: repeat(2, 1fr); }
  .board-col.wide { grid-column: span 2; }
  .board-done-wrap { grid-template-columns: 1fr 1fr; }
}

/* ── 반응형: 모바일(<600) ────────────────────── */
@media (max-width: 599px) {
  .shell { grid-template-columns: 1fr; }
  .sidenav { display: none; }
  main.content { padding: 12px; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--bg-card); border-top: 1px solid var(--border);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--text-dim); font-size: 11px; font-weight: 600; min-height: 44px;
  }
  .tabbar a.active { color: var(--accent); }
  .tabbar a:hover { text-decoration: none; }
  .appbar { padding: 0 10px; gap: 6px; }
  .appbar .logo { font-size: 14px; }
  .appbar .hide-m { display: none; }
  .home-grid { grid-template-columns: 1fr; gap: 12px;
    grid-template-areas: "usage" "org" "engine" "sess" "pipe" "mail"; }
  .card { padding: 13px; }
  /* 조직도 강등(R3): 트리 선 제거 + 미니칩 2열 */
  .org-root, .team-grid { display: none; }
  .team-mini-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .team-mini {
    display: flex; align-items: center; gap: 6px; background: var(--bg-inset);
    border: 1px solid var(--border); border-radius: 8px; padding: 10px; color: var(--text);
    font-size: 13px; font-weight: 600; min-height: 44px; min-width: 0;
  }
  .team-mini > :not(.mini-name) { flex-shrink: 0; }
  .team-mini:hover { text-decoration: none; border-color: var(--accent); }
  .engine-wrap { grid-template-columns: 1fr 1fr; }
  .board-cols { grid-template-columns: 1fr; }
  .board-col.wide { grid-column: span 1; }
  .board-done-wrap { grid-template-columns: 1fr; }
  .session-row .s-cwd { display: none; }
  /* 다이얼로그 = 바텀시트(R7) */
  .overlay { align-items: flex-end; padding: 0; }
  .dialog { max-width: none; border-radius: 14px 14px 0 0; max-height: 88dvh; }
  .dialog::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--border); margin: 8px auto 0; }
  /* 테이블 → 가로 스크롤 컨테이너(R5, 페이지 가로 스크롤 금지) */
  .team-mini .mini-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 600px) {
  .tabbar { display: none; }
}

/* ═══════════════ v1.3.0 — IA 개편·공식 게이지·블로커 생명주기·조직도 개편 ═══════════════ */

/* 사이드바 1차/2차 트리 */
.sidenav .nav-group {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  color: var(--text-dim); font-weight: 600; min-height: 44px; background: none; border: none;
  width: 100%; text-align: left; font-size: 14px;
}
.sidenav .nav-group .glyph { width: 20px; text-align: center; }
.sidenav .nav-group .chev { margin-left: auto; font-size: 11px; transition: transform .15s; }
.sidenav .nav-group[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sidenav .nav-group:hover { background: var(--bg-inset); }
.sidenav .nav-group.active { color: var(--text); background: var(--bg-inset); border-left: 3px solid var(--accent); padding-left: 9px; }
.sidenav .subnav-list { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; }
.sidenav .subnav-list a { padding: 7px 10px 7px 40px; min-height: 36px; font-weight: 500; font-size: 13px; }
.sidenav .subnav-list a.active { color: var(--accent); background: var(--bg-inset); border-left: 3px solid var(--accent); padding-left: 37px; }

/* 뷰 내 2차 세그먼트(subnav) */
.seg.subnav { margin: 0 0 14px; flex-wrap: wrap; max-width: 100%; overflow-x: auto; }
.seg a {
  background: none; border: none; padding: 7px 14px; color: var(--text-dim);
  font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; white-space: nowrap;
}
.seg a:hover { text-decoration: none; color: var(--text); }
.seg a.active { background: var(--bg-inset); color: var(--text); }

/* 자비스 명령 입력창 */
.cmdbox-card { margin-bottom: 16px; border-color: var(--accent); }
.cmdbox-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cmdbox-input {
  flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; color: var(--text); min-height: 44px;
}
.cmdbox-input:focus { border-color: var(--accent); outline: none; }
.cmd-bubble { border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 13px; max-width: 100%; }
.cmd-bubble.q { background: var(--bg-inset); border: 1px solid var(--border); }
.cmd-bubble.a { background: rgba(68, 147, 248, .08); border: 1px solid var(--accent); }
.cmd-bubble.a .who { display: block; font-size: 11px; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.cmd-bubble.a pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; max-height: 260px; overflow-y: auto; }

/* 블로커 생명주기 */
.pending-card { border-color: var(--accent); margin-bottom: 16px; }
.blocker-row.life { cursor: default; }
.blocker-row.life.pending { border-left-color: var(--accent); }
.blocker-row.life.resolved { border-left-color: var(--ok); opacity: .72; }
.blk-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.blk-text { white-space: pre-wrap; word-break: break-word; }
.blk-cmd { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.blk-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.blk-evidence {
  margin: 6px 0 0; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; white-space: pre-wrap; word-break: break-word; font-family: inherit;
  font-size: 12px; max-height: 220px; overflow-y: auto;
}

/* 세션 보드 v2(팀·task·가동시간·범례) */
.session-row.v2 { display: block; cursor: pointer; }
.session-row.v2 .sr-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.session-row.v2 .sr-top .s-cwd { margin-left: auto; }
.session-row.v2 .sr-task { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.session-row.v2 .sr-task.none { opacity: .5; }
.session-row.v2 .sr-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
.session-row.v2:hover { background: var(--bg-inset); }
.session-row.v2.wj { border-left: 2px solid var(--accent); padding-left: 8px; }
.wj-head { font-size: 12px; color: var(--text-dim); font-weight: 700; margin: 10px 0 4px; border-top: 1px dashed var(--border); padding-top: 8px; }
.sess-legend { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.sess-legend b { color: var(--text); }

/* 호스트 탭 */
.host-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.host-tab {
  display: inline-flex; align-items: center; gap: 6px; background: var(--bg-inset);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; color: var(--text-dim);
  font-size: 12px; font-weight: 600; min-height: 34px;
}
.host-tab.active { color: var(--text); border-color: var(--accent); }
.host-tab.offline { opacity: .5; }

/* 조직도(v1.3.3): 자비스를 대표·팀그리드와 같은 세로 중앙축에 정렬 —
   3열 그리드[좌 스페이서 · 중앙 자비스 · 우측 곁가지]. 좌우 스페이서 동폭(minmax(0,1fr))이 중앙을 고정. */
.org-root { max-width: 100%; overflow-x: hidden; }
.org-root .org-root-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; width: 100%; max-width: 100%; column-gap: 0; margin: 0 auto;
}
.org-root .org-root-row .org-spacer { min-width: 0; }
.org-root .org-root-row .jarvis-node { grid-column: 2; justify-self: center; color: var(--text); white-space: nowrap; }
.org-root .org-root-row a.node:hover { border-color: var(--accent); text-decoration: none; }
.org-root .org-root-row .direct-branch { grid-column: 3; justify-self: start; display: flex; align-items: center; min-width: 0; max-width: 100%; }
.org-root .ceo-node { background: var(--bg-inset); }
.org-root .hline { width: 20px; height: 1px; background: var(--border); flex: none; }
.org-root .link-line { width: 1px; height: 14px; }
.agent-box { position: relative; }
.agent-box .agent-lbl {
  position: absolute; top: -8px; left: 10px; font-size: 10px; line-height: 1.4;
  padding: 0 6px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-dim); letter-spacing: .5px;
}
/* 자비스 직속 박스: 팀 카드보다 약간 작은 보조 카드로 시각 비중 낮춤(내용은 유지) */
.team-node.root-team {
  min-width: 0; width: 190px; max-width: 240px; text-align: left;
  padding: 8px 10px; font-size: 12.5px; background: var(--bg-card); flex-shrink: 1;
}
.team-node.root-team .tn-top { font-size: 13px; }
.team-node.root-team .tn-progress { margin-top: 6px; }
.team-mini.direct { grid-column: 1 / -1; }
/* v1.4.2: 팀 그리드 열수 단계적 축소(홈 조직도, 좁은 데스크톱일수록 열수 감소 → 카드 밀도 완화) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .team-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .team-grid.five { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .team-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* v1.4.2: 자비스 직속 박스가 우측 "토큰·한도" 카드 영역을 침범하는 문제 대응 —
   조직도 카드가 home-grid의 2fr 컬럼으로 좁아지는 데스크톱 폭(1024~1599)에서는
   자비스 직속을 우측 가로 곁가지 대신 자비스 노드 "아래"로 접는다.
   충분히 넓은 화면(≥1600)에서만 원래의 가로 곁가지 배치를 유지한다. */
@media (min-width: 1024px) and (max-width: 1599px) {
  .org-root .org-root-row {
    grid-template-columns: 1fr; row-gap: 8px; justify-items: center;
  }
  .org-root .org-root-row .org-spacer { display: none; }
  .org-root .org-root-row .jarvis-node { grid-column: 1; grid-row: 1; }
  .org-root .org-root-row .direct-branch {
    grid-column: 1; grid-row: 2; justify-self: center; flex-direction: column; gap: 4px;
  }
  .org-root .org-root-row .direct-branch .hline { width: 1px; height: 10px; }
}

/* 사용량: 참고(추정) 소구역 */
.est-box { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); opacity: .92; }
.est-box .est-title { font-size: 12px; color: var(--text-dim); font-weight: 700; margin-bottom: 8px; }

/* v1.3.1: 외부 AI 서비스 크레딧 카드 */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.svc-card { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.svc-card.pending { opacity: .75; border-style: dashed; }
.svc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.svc-top b { font-size: 13px; }

/* v1.3.1: 엔진(실행 출처) 라벨·비중 바 — 대표에게 "직접 API 호출 아님"을 알리는 시각 표시 */
.chip.origin-claude { color: var(--accent); border-color: var(--accent); }
.chip.origin-codex  { color: var(--plan); border-color: var(--plan); }
.chip.origin-hermes   { color: var(--ok); border-color: var(--ok); }
.chip.origin-unknown{ color: var(--neutral); border-color: var(--neutral); }
.eng-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bg-inset); border: 1px solid var(--border); }
.eng-seg { height: 100%; }
.eng-seg.origin-claude { background: var(--accent); }
.eng-seg.origin-codex  { background: var(--plan); }
.eng-seg.origin-hermes   { background: var(--ok); }
.eng-seg.origin-unknown{ background: var(--neutral); }
.eng-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.eng-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.eng-legend .sw.origin-claude { background: var(--accent); }
.eng-legend .sw.origin-codex  { background: var(--plan); }
.eng-legend .sw.origin-hermes   { background: var(--ok); }
.eng-legend .sw.origin-unknown{ background: var(--neutral); }

/* v1.3.4 D: 블로커 다이얼로그 정리 — 원문 인용 + 명확한 라벨 + 컴팩트 textarea */
.blk-dialog { display: flex; flex-direction: column; gap: 8px; }
.blk-quote {
  margin: 0; padding: 8px 12px; border-left: 3px solid var(--warn);
  background: var(--bg-inset); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto;
}
.blk-quote .bq-id { font-size: 11px; color: var(--text-dim); font-family: Consolas, monospace; }
.fld-label { font-size: 12px; color: var(--text-dim); font-weight: 600; }
textarea.ta-compact { min-height: 58px; max-height: 160px; resize: vertical; }

/* v1.3.4 E: 프로젝트 아코디언 */
.proj-acc { border-bottom: 1px solid var(--border); }
.proj-acc:last-child { border-bottom: none; }
.proj-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 4px;
  background: none; border: none; color: var(--text); text-align: left; font-size: 13px; min-height: 40px;
}
.proj-head:hover { color: var(--accent); }
.proj-head .caret { color: var(--text-dim); width: 12px; flex: none; }
.proj-head .proj-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-body { padding: 2px 4px 10px 24px; }
.proj-body.hidden { display: none; }
.proj-body .kv { grid-template-columns: 48px 1fr; gap: 3px 8px; margin: 4px 0; }
.proj-body .kv dd code { word-break: break-all; }
.proj-mile { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.proj-mile .pm-head { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.proj-links { display: flex; gap: 8px; flex-wrap: wrap; }
/* v1.4.0: 현재 진행 작업(팀 상세) + 담당자 작업 드로어 */
.team-work-card { margin-bottom: 16px; }
.tw-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.tw-item:last-child { border-bottom: none; }
.tw-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tw-text { margin-top: 4px; font-size: 13px; color: var(--text); }
.aw-head { display: flex; align-items: center; gap: 10px; }
.aw-head .aw-name { font-weight: 700; }
.member-row.clickable { cursor: pointer; }
.member-row.clickable:hover { background: var(--bg-inset); }
/* v1.4.0: 프로젝트 플랫폼 링크 + 상태 표 */
.proj-thead { display: grid; grid-template-columns: 1fr 40px 40px 40px 64px; gap: 6px; align-items: center;
  padding: 4px 4px 6px; font-size: 11px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.proj-thead .pt-name { padding-left: 20px; }
.proj-thead span { text-align: center; }
.proj-thead .pt-name { text-align: left; }
.proj-row-main { display: grid; grid-template-columns: 1fr 40px 40px 40px 64px; gap: 6px; align-items: center; }
.proj-row-main .proj-head { min-width: 0; }
.proj-row-main .pn-prog { margin-left: 6px; }
.plat-cell { display: flex; align-items: center; justify-content: center; }
.plat-cell.status-cell { justify-content: flex-end; }
.plat-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-size: 15px; text-decoration: none; }
.plat-link:hover { background: var(--bg-inset); text-decoration: none; }
.plat-dash { color: var(--text-dim); opacity: .45; }
@media (max-width: 599px) {
  .proj-thead { display: none; }
  .proj-row-main { grid-template-columns: 1fr auto; grid-auto-flow: row; }
  .proj-row-main .proj-head { grid-column: 1 / 2; grid-row: 1; }
  .proj-row-main .status-cell { grid-column: 2 / 3; grid-row: 1; }
  .proj-row-main .plat-cell:not(.status-cell) { grid-row: 2; justify-content: flex-start; }
}

/* v1.4.0: 명령창 파일 첨부(📎 + 드래그앤드롭 + 칩) */
.cmdbox-drop { border-radius: 10px; transition: box-shadow .15s; }
.cmdbox-drop.dragover { box-shadow: 0 0 0 2px var(--accent) inset; background: rgba(68,147,248,.06); }
/* v1.4.3: 인라인 SVG 아이콘 버튼(마이크·클립) — 이모지 대체 · 44px 터치타깃 · 포커스링 · 녹음 링펄스 */
.iconbtn .ico { display: block; flex: none; }
.cmdbox-row .iconbtn {
  min-width: 44px; height: 44px; padding: 0; position: relative;
  color: var(--text-dim); background: var(--bg);
  transition: color .15s, border-color .15s, background .15s;
}
.cmdbox-row .iconbtn:hover { color: var(--text); border-color: var(--text-dim); background: var(--bg-inset); }
.cmdbox-row .iconbtn:focus-visible {
  outline: none; color: var(--text); border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(68,147,248,.35);
}
/* 녹음 중: 아이콘 붉은 강조 + 바깥으로 퍼지는 링 펄스
   ※ hover/focus-visible 규칙(.cmdbox-row .iconbtn:hover 등)보다 우선하도록 선택자 특정도를 높인다.
      (그러지 않으면 마우스를 올리거나 클릭 포커스가 남았을 때 녹음 중인데도 회색으로 보인다) */
.cmdbox-row .mic-btn.recording,
.cmdbox-row .mic-btn.recording:hover,
.cmdbox-row .mic-btn.recording:focus-visible {
  color: var(--danger); border-color: var(--danger); background: rgba(248,81,73,.12);
}
.mic-btn.recording .ico { animation: micpulse 1.3s ease-in-out infinite; }
.mic-btn.recording::after {
  content: ''; position: absolute; inset: -1px; border-radius: 8px;
  border: 2px solid var(--danger); pointer-events: none;
  animation: micring 1.5s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes micpulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes micring { 0% { opacity: .65; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
/* 처리중(서버 STT 변환 대기): 녹음 종료 직후~텍스트 반영 전까지 별도 상태로 구분 — 클릭 잠금 + 원형 스피너 링.
   ※ 마이크 아이콘 자체(비대칭 도형)를 회전시키면 정지 프레임에서 마이크처럼 보이지 않는 문제가 있어,
      아이콘은 흐리게 고정하고 항상 원형인 ::after 링만 회전시킨다(어느 각도든 "로딩 중"으로 읽힘). */
.mic-btn.processing { color: var(--accent); cursor: wait; pointer-events: none; }
.mic-btn.processing .ico { opacity: .35; }
.mic-btn.processing::after {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  border: 2px solid rgba(68,147,248,.25); border-top-color: var(--accent); pointer-events: none;
  animation: micspin .8s linear infinite;
}
@keyframes micspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mic-btn.recording .ico, .mic-btn.recording::after, .mic-btn.processing::after { animation: none; }
  .mic-btn.recording::after { opacity: .6; }
  .mic-btn.processing::after { border-top-color: rgba(68,147,248,.25); opacity: .7; }
}
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 8px;
  background: var(--bg-inset); border: 1px solid var(--border); font-size: 12px; max-width: 100%; }
.attach-chip.uploading { border-color: var(--accent); }
.attach-chip.error { border-color: var(--danger); color: var(--danger); }
.attach-chip .ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.attach-chip .ac-size { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.attach-chip .ac-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 0 2px; min-height: 20px; }
.attach-chip .ac-x:hover { color: var(--text); }

/* v1.3.2: 결정론적 SVG 아바타(이니셜) — 팀장=골드 링, 자비스=강조 링 */
.jm-avatar { border-radius: 50%; flex: none; vertical-align: middle; }
.jm-avatar.lead { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px #e3b341; }
.jm-avatar.special { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent); }
.tn-lead-row { display: flex; align-items: center; gap: 6px; }
.sess-avatar, .blk-avatar { flex: none; margin-right: 4px; }

/* 로스터 퀵액션 · 이동 폼 통합 검색 */
.member-row .m-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.member-row .m-actions .btn.sm { min-height: 28px; padding: 2px 10px; font-size: 12px; }
.agent-pick { width: 100%; margin-top: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 4px; }
.agent-pick option { padding: 6px 8px; }

/* Git 현황 */
.git-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.git-row:last-child { border-bottom: none; }
.git-row.dirty code { color: var(--warn); }

/* 예약 자동화 */
.sched-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.sched-row:last-child { border-bottom: none; }
.sched-row .sc-main { flex: 1; min-width: 0; }
.sched-row .sc-prompt { font-size: 13px; }
.sched-row .sc-actions { display: flex; gap: 6px; flex: none; }
.sched-row.off { opacity: .55; }

/* v1.4.5: 에이전트 협업 뷰(세션 드로어·협업 현황) — 스폰 트리·메시지 흐름 */
.dialog hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.collab-panel { font-size: 13px; }
.collab-self { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.collab-sub-head { font-size: 12px; font-weight: 700; color: var(--text-dim); margin: 12px 0 6px; }
.collab-tree { border-left: 2px solid var(--border); padding-left: 10px; margin-left: 4px; }
.ct-root { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.ct-node { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.ct-node:last-child { border-bottom: none; }
.ct-branch { color: var(--text-dim); flex: none; }
.ct-task { color: var(--text-dim); flex: 1; min-width: 120px; }
.ct-time { flex: none; }
.collab-msgs { display: flex; flex-direction: column; gap: 8px; }
.collab-msg-row { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.collab-msg-row .cm-path { margin: 3px 0 2px; }
.collab-msg-row .cm-time { display: block; }
.collab-summary-stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.collab-summary-stats .cs-item { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; text-align: center; min-width: 100px; }
.collab-summary-stats .cs-num { display: block; font-size: 20px; font-weight: 700; }
.collab-summary-stats .cs-label { font-size: 12px; color: var(--text-dim); }
.collab-sess-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.collab-sess-row:last-child { border-bottom: none; }
.collab-sess-row:hover { background: var(--bg-inset); }
.collab-sess-row .cs-name { font-weight: 600; }
.collab-sess-row .cs-meta { color: var(--text-dim); font-size: 12px; margin-left: auto; }

/* 반응형 보정 */
@media (min-width: 600px) and (max-width: 1023px) {
  .sidenav .nav-group .lbl { display: none; }
  .sidenav .subnav-list { display: none !important; }
  .sidenav .nav-group { justify-content: center; padding: 10px 0; }
}
@media (max-width: 599px) {
  .cmdbox-row .btn { width: 100%; }
  .org-root .org-root-row { flex-direction: column; gap: 6px; }
  .org-root .hline { display: none; }
  .session-row.v2 .sr-top .s-cwd { display: none; }
  .seg.subnav { width: 100%; }
  .seg.subnav a { flex: 1; justify-content: center; padding: 7px 8px; font-size: 12px; }
  .collab-sess-row .cs-meta { margin-left: 0; width: 100%; }
}

/* 실행중 스피너 — 에이전트/워커가 실제 작동 중임을 회전으로 표시(대표 요구) */
.jm-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; box-sizing: border-box; }
.badge .jm-spin { width: 9px; height: 9px; margin-right: 4px; }
.as-run.live .as-dot { animation: pulse 1.1s ease-in-out infinite; }