/* 참모 표면. 관리자 셸(lm-shell.css·lm-admin.css) 위에 얹는 화면 전용 규칙.
   색은 토큰만 쓴다(public/assets/lm-tokens.css). 이 파일에 hex 리터럴을 두지 않는다.

   화면의 생각 하나: 브리프는 서식이 아니라 **아는 것과 모르는 것의 원장**이다.
   채운 칸은 근거를 달고, 빈 칸은 다음에 물을 질문을 그 자리에 적는다. 그래서 빈 칸이 할 일 목록이 된다.
   차원은 점수를 매기지 않고 개수만 센다. 비율 그래프를 만들지 않는다. */

/* ── 레일 알림(모듈이 꺼졌거나 구성원이 아닐 때) ── */

.cmd-rail-note {
  margin: 0 0 8px;
  padding: 0 12px;
  color: var(--lm-rail-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ── 머리 ── */

.cmd-subline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 아직 채우지 않은 칸(부대 이름·브리프 수치)이 빈 채로 간격만 먹어 뒤 링크가 안으로 밀렸다 */
.cmd-subline > span:empty {
  display: none;
}

/* 데스크 머리의 차원 점검표(사실·사회·시간 n/m)는 뺐다(2026-09-29). 바로 옆 브리프의 차원 머리가 같은 수를 적고,
   곁패널을 접은 좁은 화면에서는 작업 줄의 '브리프 n/10칸'이 그 몫을 한다. 한 화면에 같은 수를 두 번 두지 않는다 */

/* ── 브리프 패널(데스크 곁패널) ── */

.cmd-ledger {
  display: flex;
  flex-direction: column;
}

.cmd-ledger > .queue-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--lm-hairline);
}

/* ── 브리프 원장 ── */

/* 브리프는 제 안에서 스크롤하지 않는다. 곁패널(.cmd-chat-aside) 하나가 스크롤한다(2026-09-29).
   예전에는 46vh로 묶어 곁패널 안에 스크롤 영역이 하나 더 생겼고, 휠이 어느 쪽을 굴리는지 매번 달랐다 */
.cmd-ledger-body {
  padding: 8px 0 12px;
}

.cmd-dim {
  padding: 8px 0 4px;
}

.cmd-dim + .cmd-dim {
  border-top: 1px solid var(--lm-hairline);
  margin-top: 4px;
}

.cmd-dim-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 20px 6px;
}

.cmd-dim-name {
  font-size: 12px;
  font-weight: 650;
  color: var(--lm-text-muted);
}

.cmd-dim-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--lm-text-muted);
}

.cmd-cell {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 20px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cmd-cell:hover {
    background: var(--lm-bg-subtle);
  }
}

/* 칸은 누르는 목록이다. 눌림은 면 한 단계로 보이고 전환 없이 바로 바뀐다(DESIGN 모션: 눌림은 모션이 아니다) */
.cmd-cell:active {
  background: var(--lm-bg-selected);
  transition: none;
}

.cmd-cell[aria-pressed="true"] {
  background: var(--lm-bg-selected);
  border-left-color: var(--lm-primary);
}

.cmd-cell:focus-visible {
  outline: var(--lm-focus-ring);
  outline-offset: -3px;
}

/* 근거가 방금 붙은 칸. 한 번만 물들었다가 제자리로 돌아온다.
   면 색이 바뀌는 것이라 모션 3종의 ① 색 전환(160ms)이다. 200ms(--lm-duration)는 ② 이동의 등장 값이었다(2026-09-29) */
.cmd-cell[data-fresh="true"] {
  background: var(--lm-success-surface);
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

.cmd-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cmd-cell-label {
  font-size: 14px;
  font-weight: 650;
  color: var(--lm-text-strong);
}

.cmd-cell-value {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lm-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 아직 답을 못 들은 칸은 값 대신 물어볼 것을 적는다 */
.cmd-cell-ask {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lm-text-muted);
}

.cmd-cell[data-next="true"] .cmd-cell-ask {
  color: var(--lm-primary);
  font-weight: 650;
}

/* 모른다고 답하신 칸은 물어볼 것 대신 그 말씀을 옮긴다. 간부의 말이라 본문 잉크이고, 값처럼 두 줄에서 줄인다 */
.cmd-cell-known {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── 봉인한 브리프의 안내 ── */

.cmd-sealed-note {
  margin: 0;
  max-width: 52ch;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── 근거·자료 ── */

/* 패널 제목. .queue-head h2(18px·700)를 따르지 않는 패널 h2는 브라우저 기본 1.5em(22.5px)으로 그려져
   한 화면에 제목 크기가 둘이었다(데스크 곁패널·조치 계획·문서·결심, 2026-09-28 점검). 참모 화면의 패널 h2는 모두 18px다.
   :where로 구체성을 0에 두어, 크기를 따로 정한 제목(.cmd-side-head h2 15px 등)은 그대로 이긴다 */
:where(#main .panel) h2 {
  margin: 0 0 8px;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

/* blockquote로도 쓰고 문서 미리보기에서는 span으로도 쓴다. 블록을 박아 두지 않으면
   인라인이 되어 위아래 padding이 옆 줄을 덮는다(2026-09-17 실제 화면에서 찾음). */
.cmd-quote {
  display: block;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-page);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lm-text-strong);
}

.cmd-quote-source {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--lm-text-muted);
}

.cmd-evidence-value {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lm-text-strong);
}

.cmd-evidence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

/* 참모 제안. [브리프에 넣기] 전에는 브리프에 들어가지 않는다. 점선으로 "아직 아님"을 보인다 */
.cmd-proposal-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.cmd-proposal {
  padding: 10px 12px;
  border: 1px dashed var(--lm-border);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-page);
}

.cmd-proposal + .cmd-proposal {
  margin-top: 8px;
}

.cmd-proposal-field {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--lm-text-muted);
}

.cmd-proposal-value {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lm-text-strong);
}

.cmd-proposal-why {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lm-text-muted);
}

/* 이미 채운 칸에 대한 제안: 지금 값과 제안 값을 같은 글자선에 이름표를 달아 나란히 둔다 */
.cmd-proposal-now {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lm-text-muted);
}

/* 이름표 칸을 따로 두어 긴 문장이 둘째 줄로 넘어가도 본문 첫머리에 맞춘다 */
.cmd-proposal-now,
.cmd-proposal-value.is-compared {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr);
  column-gap: 8px;
}

.cmd-proposal-now-label {
  font-size: 12px;
  font-weight: 650;
  line-height: 2;
  color: var(--lm-text-muted);
}

.cmd-proposal-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* 자료함도 제 안에서 스크롤하지 않는다. 브리프와 같은 까닭이다(곁패널 하나만 스크롤) */
.cmd-material-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmd-material {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px;
}

.cmd-material + .cmd-material {
  border-top: 1px solid var(--lm-hairline);
}

.cmd-material .lm-icon {
  flex: none;
  margin-top: 2px;
  color: var(--lm-text-muted);
}

.cmd-material-name {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--lm-text-strong);
}

.cmd-material-meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--lm-text-muted);
}

.cmd-material[data-status="failed"] .cmd-material-meta {
  color: var(--lm-danger);
}

/* ── 사안 목록 ── */

.cmd-case-table td:first-child {
  font-weight: 650;
  color: var(--lm-text-strong);
}

/* 시각과 브리프 수치는 줄바꿈하지 않는다. 잘리면 제목 칸이 줄어드는 편이 낫다 */
.cmd-case-table .lm-num,
.cmd-case-table .cmd-case-brief {
  white-space: nowrap;
}

.cmd-case-brief {
  font-size: 13.5px;
  color: var(--lm-text-muted);
}

.cmd-case-row {
  cursor: pointer;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cmd-case-row:hover {
    background: var(--lm-bg-subtle);
  }
}

.cmd-case-row:focus-within {
  background: var(--lm-bg-selected);
}

/* ── 방책 비교표 ──
   세로가 기준, 가로가 방책이다. 한 기준 안에서 방책들을 눈으로 훑을 수 있어야 비교가 된다.
   총점 열도 추천 표시도 없다. */

/* lm-table 기본값은 한 줄짜리 조밀한 표용이라 nowrap·말줄임·48px 고정 높이가 걸려 있다.
   비교표는 기준마다 한두 문장이 들어가므로 이 표에서만 푼다. */
.cmd-coa-table thead th,
.cmd-coa-table tbody td,
.cmd-coa-table tbody th {
  height: auto;
  min-height: 48px;
  padding: 12px;
  vertical-align: top;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cmd-coa-table thead th {
  position: static;
}

.cmd-coa-criterion {
  width: 200px;
  text-align: start;
}

.cmd-coa-critname {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--lm-text-strong);
}

.cmd-coa-critq {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--lm-text-muted);
}

.cmd-coa-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--lm-text-strong);
}

.cmd-coa-sum {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--lm-text-muted);
}

.cmd-coa-cell {
  min-width: 200px;
}

.cmd-coa-note {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lm-text);
}

.cmd-coa-source {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--lm-text-muted);
}

/* 근거가 붙은 칸만 눌린다. 눌리는 것처럼 보이면 눌려야 한다 */
.cmd-coa-cell-evidence {
  cursor: pointer;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cmd-coa-cell-evidence:hover {
    background: var(--lm-bg-subtle);
  }
}

.cmd-coa-cell-evidence:active {
  background: var(--lm-bg-selected);
  transition: none;
}

/* 좁은 화면에서만 보이는 방책 이름. 넓은 화면에서는 열 머리가 이름을 말한다 */
.cmd-coa-cellname {
  display: none;
}

.cmd-coa-cell-evidence:focus-visible {
  outline: var(--lm-focus-ring);
  outline-offset: -3px;
}

.cmd-coa-detailrow {
  background: var(--lm-bg-subtle);
}

.cmd-coa-detail {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lm-text-strong);
}

@media (prefers-reduced-motion: reduce) {
  .cmd-coa-cell-evidence {
    transition: none;
  }
}

/* 레일의 막힌 도구.
   도구에는 번호를 달지 않는다. 순서가 정보가 아니고, 앞 도구를 쓰지 않아도 뒤 도구를 쓴다(2026-09-28).
   칸 끝에 그 도구로 한 것(방책 수·계획 판·문서 수·결심 체크)을 적던 표시(.cmd-nav-did)는 뺐다(2026-09-29).
   그 표시가 서던 도구 화면마다 작업 줄이 같은 수를 적는다(DESIGN.md Count Once Rule). 레일은 지금 위치와 잠김만 적는다.
   지금 쓸 수 없는 도구를 숨기지 않는 것은 무엇을 꺼낼 수 있는지 보여야 하기 때문이고,
   대신 누를 수 없다는 것을 색과 커서로 먼저 알리고 까닭은 아래 한 줄에 글자로 적는다. */

/* 막힌 도구는 흐리게(opacity) 하지 않는다. 흐리면 이름이 3.3:1까지 떨어져 무엇이 막혔는지 읽히지 않았다(2026-09-28 점검).
   레일의 흐린 잉크(--lm-rail-muted, 6.52:1)와 자물쇠 아이콘으로 막힘을 보이고, 까닭은 아래 한 줄에 글자로 적는다 */
.app-navitem.is-blocked {
  cursor: not-allowed;
  opacity: 1;
  color: var(--lm-rail-muted);
}

.app-navitem.is-blocked .lm-icon {
  color: var(--lm-rail-muted);
}

/* 셸의 hover 면(.app-navitem:hover)을 막힌 칸에서는 늘 걷는다. 누를 수 없는 칸이 눌리는 것처럼 보이면 안 된다 */
.app-navitem.is-blocked:hover {
  background: transparent;
  color: var(--lm-rail-muted);
}

/* 참모 레일의 칸은 누르면 면이 한 단계 밝아진다. 전환 없이 바로 바뀐다 */
.app-navitem:not(.is-blocked):active {
  background: var(--lm-rail-selected);
  transition: none;
}

/* ── 시작하는 자리 ──
   사안이 하나도 없을 때 사안 목록이 쓰는 모양. 회색 한 줄로 두면 처음 쓰는 사람이
   여기서 멈춘다. 레일의 뒤 네 항목은 전부 사안 안에서 열리므로 갈 곳이 없다.
   그래서 주 행동을 가운데로 가져오고, 누른 뒤에 무슨 일이 일어나는지를 적어 둔다. */

.cmd-start {
  max-width: 62ch;
  margin: 48px auto 0;
  padding: 0 16px 32px;
  text-align: center;
}

.cmd-start-title {
  margin: 0 0 8px;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.cmd-start-lead {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--lm-text-muted);
  /* 램프의 Body(15px). 14.5px는 램프 밖이었다(2026-09-29) */
  font-size: 15px;
  line-height: 1.7;
}

.cmd-start-action {
  justify-content: center;
  margin-top: 24px;
}

/* 세 단계. 번호를 다는 이유는 순서 자체가 정보이기 때문이다. 앞 단계 없이 뒤로 갈 수 없다 */
.cmd-start-steps {
  counter-reset: cmd-start;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--lm-hairline);
  list-style: none;
  text-align: start;
}

.cmd-start-steps li {
  counter-increment: cmd-start;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.cmd-start-steps li + li {
  margin-top: 16px;
}

.cmd-start-steps li::before {
  content: counter(cmd-start);
  display: block;
  min-width: 24px;
  padding-top: 1px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.cmd-start-step {
  display: block;
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

.cmd-start-note {
  /* 그리드 칸을 명시하지 않으면 ::before 다음 세 번째 칸(= 다음 줄 28px)으로 밀려
     글자가 세로로 쌓인다. 설명은 제목과 같은 칸에 서야 한다. */
  grid-column: 2;
  display: block;
  margin-top: 2px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── 조치 계획 ──
   왜쪽은 네 가지 물음, 오른쪽은 그 답이 가린 방식이다. 답을 고치면 오른쪽이 바뀜는 것이
   한 화면 안에서 보여야 한다. 그래서 물음을 접어 두거나 다음 쪽으로 넘기지 않는다. */

.cmd-plan-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

/* 물음 네 개는 안쪽 스크롤 없이 모두 편다. 예전에는 높이를 창에 묶어 넷째 물음이 패널 안 스크롤 밑에 숨었다
   (1280×800에서 보이는 높이 751px / 내용 995px, 2026-09-28 점검). 붙박이(sticky)는 패널 전체가 창에 들어갈 만큼
   높은 창에서만 건다 — 창보다 긴 붙박이는 아랫부분이 페이지 끝까지 가려진다 */
.cmd-plan-ask h2 {
  margin: 0 0 4px;
}

@media (min-width: 1181px) and (min-height: 1080px) {
  .cmd-plan-ask {
    position: sticky;
    top: 24px;
  }
}

.cmd-plan-ask > .lm-field-help {
  margin: 0 0 16px;
}

.cmd-plan-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 물음 하나. fieldset의 기본 테두리를 지우고 질문을 소제목처럼 세운다 */
.cmd-axis {
  margin: 0;
  padding: 0;
  border: 0;
}

.cmd-axis + .cmd-axis {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--lm-hairline);
}

/* legend는 fieldset 테두리 위에 걸쳐 그려져, 위 선이 있는 둘째~넷째 물음만 선택지와 사이가 벌어졌다.
   띄워(float) 두면 보통 글처럼 안쪽에 서서 네 물음의 간격이 같아진다 */
.cmd-axis legend {
  float: left;
  width: 100%;
}

.cmd-axis-options {
  clear: both;
}

.cmd-axis legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.cmd-axis-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmd-axis-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 44px;
  /* 간격 토큰과 1px 어긋난 9px를 8px로 맞췄다(2026-09-29) */
  padding: var(--lm-space-8) 10px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  cursor: pointer;
  transition:
    border-color var(--lm-duration-fast) var(--lm-ease-out),
    background-color var(--lm-duration-fast) var(--lm-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cmd-axis-option:hover {
    border-color: var(--lm-border-strong);
  }
}

.cmd-axis-option input {
  margin: 2px 0 0;
}

.cmd-axis-option:has(input:checked) {
  border-color: var(--lm-primary);
  background: var(--lm-primary-subtle);
}

.cmd-axis-option:has(input:focus-visible) {
  outline: 2px solid var(--lm-focus);
  outline-offset: 2px;
}

.cmd-axis-body {
  display: block;
  min-width: 0;
}

.cmd-axis-label {
  display: block;
  color: var(--lm-text-strong);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.cmd-axis-note {
  display: block;
  margin-top: 2px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* 방식 카드. 좋은 점과 맞지 않는 때를 같은 크기로 적는다 */
.cmd-plan-cand-head {
  margin-bottom: 12px;
}

.cmd-plan-cand-head h2 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 650;
}

.cmd-plan-cand-head .lm-field-help {
  margin: 0;
}

.cmd-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

/* 카드마다 글이 길이가 다르다. 그대로 두면 고르는 버튼이 줄마다 다른 높이에 서서 눈이 훑지 못한다.
   칸 높이를 맞추고 버튼을 아래로 밀어 같은 줄에 세운다. */
.cmd-method {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

.cmd-method-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cmd-method-head h3 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.cmd-method-line {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
}

.cmd-method-missed {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-method-missed .lm-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.cmd-method-kv {
  margin: 0;
}

/* 램프의 Label(12px/650). 11.5px는 램프 밖이었다(2026-09-29) */
.cmd-method-kv dt {
  margin-top: 10px;
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.cmd-method-kv dt:first-child {
  margin-top: 0;
}

.cmd-method-kv dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.cmd-method-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lm-hairline);
}

.cmd-method-kv:last-of-type {
  margin-bottom: 16px;
}

.cmd-method-when {
  margin: 12px 0 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-plan-picked {
  border-color: var(--lm-primary);
}

.cmd-plan-picked .cmd-method-line,
.cmd-plan-picked .cmd-method-kv dd,
.cmd-plan-picked .cmd-method-missed {
  max-width: 78ch;
}

.cmd-plan-picked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cmd-plan-picked-head h2 {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cmd-axis-option {
    transition: none;
  }
}

/* ── 산출물 ──
   왼쪽은 만든 자료의 개정 목록, 오른쪽은 미리보기다. 미리보기는 PDF와 같은 중간표현을 읽는다. */

.cmd-doc-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

/* 만든 문서는 '문서'와 '조치 계획' 두 묶음이다(pages/documents.js paintList). 작업 줄과 같은 셈으로 가른다.
   묶음 이름은 레일 묶음 이름처럼 12px/650 muted 한 줄이고 수를 적지 않는다(같은 수는 작업 줄이 한 번 적는다).
   묶음 사이는 카드 안 구획이라 hairline 1px이다 */
.cmd-doc-group + .cmd-doc-group {
  border-top: 1px solid var(--lm-hairline);
}

.cmd-doc-group-label {
  margin: 0;
  padding: var(--lm-space-12) var(--lm-space-20) var(--lm-space-4);
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.cmd-doc-items {
  margin: 0;
  padding: 0 0 var(--lm-space-8);
  list-style: none;
}

.cmd-doc-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cmd-doc-item:hover {
    background: var(--lm-bg-subtle);
  }
}

.cmd-doc-item:active {
  background: var(--lm-bg-selected);
  transition: none;
}

.cmd-doc-item[aria-pressed="true"] {
  background: var(--lm-bg-selected);
  border-left-color: var(--lm-primary);
}

.cmd-doc-item:focus-visible {
  outline: var(--lm-focus-ring);
  outline-offset: -3px;
}

.cmd-doc-name {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--lm-text-strong);
}

.cmd-doc-meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--lm-text-muted);
}

.cmd-doc-tags {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* 단추가 제목 옆에 다 들어가지 않으면 다음 줄로 내린다. 390px에서 단추 셋이 폭을 차지해 '미리보기'가 48px로 눌려
   '미리보/기'로 끊겼다(2026-09-29 재측정) */
.cmd-doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.cmd-doc-head h2 {
  margin: 0;
}

.cmd-doc-headline {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-subtle);
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.cmd-doc-warn {
  border-color: var(--lm-warning-accent);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
}

.cmd-doc-sec {
  margin-top: 24px;
}

.cmd-doc-sec h3 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lm-hairline);
  font-size: 15px;
  font-weight: 700;
  color: var(--lm-text-strong);
}

.cmd-doc-kv {
  margin: 0;
}

.cmd-doc-kv dt {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--lm-text-strong);
}

.cmd-doc-kv dt:first-child {
  margin-top: 0;
}

.cmd-doc-kv dd {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lm-text);
}

.cmd-doc-kv dd.open {
  color: var(--lm-text-muted);
}

.cmd-doc-src {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lm-text-muted);
}

.cmd-doc-note {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lm-text);
}

.cmd-doc-consider {
  margin: 0;
  padding-left: 20px;
}

.cmd-doc-consider li {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.cmd-doc-consider li:first-child {
  margin-top: 0;
}

/* 조치 계획 미리보기. PDF와 같은 IR을 읽으므로 같은 모양으로 세운다 */
.cmd-doc-method {
  margin: 0 0 4px;
  color: var(--lm-text-strong);
  /* 램프의 Body 크기(15px)에 굵기로 세운다. 15.5px는 램프 밖이었다(2026-09-29) */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.cmd-step-table .cmd-step-seq {
  width: 40px;
  color: var(--lm-text-muted);
  font-variant-numeric: tabular-nums;
}

.cmd-step-table .cmd-step-who {
  width: 15%;
  color: var(--lm-text-strong);
  font-weight: 650;
}

.cmd-step-table .cmd-step-when {
  width: 15%;
  color: var(--lm-trust);
  font-weight: 650;
}

/* 기본 표는 한 줄로 잘라 말줄임표를 붙이고 행 높이를 48px로 박아 둔다.
   조치 문장은 한 줄이 아니고 근거 인용까지 뒤따르므로 방책 비교표와 같은 정도로 덮어쓴다.
   실제 모델이 쓴 긴 문장을 화면에서 보고 찾은 결함이다(2026-09-17). 짧은 canned 문장으로는 드러나지 않았다. */
.cmd-step-table thead th,
.cmd-step-table tbody td,
.cmd-step-table tbody th {
  height: auto;
  min-height: 48px;
  padding: 12px 10px;
  vertical-align: top;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.cmd-step-table thead th {
  position: static;
}

/* 좁은 화면에서는 누가·언제까지 칸을 낱말 가운데서 끊지 않는다. 공용 표의 고정 배치(table-layout: fixed)에서 15%는
   390px에 45px라 '지휘/관'·'언제/까지'로 끊겼다(2026-09-29 재측정). 배치를 내용에 맡기고 두 칸만 break-word로 둔다.
   anywhere는 칸의 최소 폭을 글자 하나로 셈해 다시 눌리고, break-word는 가장 긴 낱말만큼은 칸을 세운다.
   무엇을 칸은 그대로 anywhere라 남는 폭을 받는다. 폭이 모자라면 표만 판 안에서 가로로 밀린다(쪽은 밀리지 않는다) */
@media (max-width: 640px) {
  .cmd-step-table {
    table-layout: auto;
  }

  .cmd-step-table .cmd-step-who,
  .cmd-step-table .cmd-step-when {
    width: auto;
    overflow-wrap: break-word;
  }
}

/* 근거 줄도 접힌다. 어느 칸에서 왔는지가 잘리면 근거를 달아 둔 뜻이 없다 */
.cmd-step-table .cmd-doc-src {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* 승인된 조치 계획의 "마침" 칸. 표시·시각·누가를 세로로 쌓고 버튼은 칸 폭에 맞춘다 */
.cmd-step-table .cmd-step-mark {
  width: 168px;
}

.cmd-step-mark-slot {
  display: grid;
  justify-items: start;
  gap: 2px;
}

.cmd-step-mark .cmd-mark-done {
  display: grid;
  grid-template-columns: 16px auto;
  align-items: center;
  gap: 2px 6px;
  min-height: 0;
}

.cmd-step-mark .cmd-mark-done strong {
  margin-left: 0;
}

.cmd-step-mark .cmd-mark-done time,
.cmd-step-mark .cmd-mark-done .cmd-mark-by {
  grid-column: 2;
}

.cmd-step-mark .cmd-mark-undo {
  margin-left: -12px;
  margin-right: 0;
}

.cmd-step-mark-none {
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

.cmd-doc-sec h3 .cmd-step-progress {
  margin-left: 8px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  font-weight: 600;
}

.cmd-step-stale {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 8px;
}

.cmd-step-stale .lm-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--lm-trust);
}

.cmd-step-stale:focus {
  outline: none;
}

.cmd-step-stale:focus-visible {
  outline: var(--lm-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .cmd-doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 좌우로 나눠 두기에 좁으면 물음을 위로 올린다(붙박이는 1181px 이상에서만 건다) */
  .cmd-plan-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-doc-item {
    transition: none;
  }
}

/* 자료 종류 고르기. 방식 고르기와 같은 모양을 쓰되 창 안이라 더 좀다 */
.cmd-kind-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.cmd-kind-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  cursor: pointer;
  transition:
    border-color var(--lm-duration-fast) var(--lm-ease-out),
    background-color var(--lm-duration-fast) var(--lm-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cmd-kind-option:hover {
    border-color: var(--lm-border-strong);
  }
}

.cmd-kind-option input {
  margin: 3px 0 0;
}

.cmd-kind-option:has(input:checked) {
  border-color: var(--lm-primary);
  background: var(--lm-primary-subtle);
}

.cmd-kind-option:has(input:focus-visible) {
  outline: 2px solid var(--lm-focus);
  outline-offset: 2px;
}

.cmd-kind-body {
  display: block;
  min-width: 0;
}

.cmd-kind-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cmd-kind-label {
  color: var(--lm-text-strong);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
}

.cmd-kind-note {
  display: block;
  margin-top: var(--lm-space-4);
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .cmd-kind-option {
    transition: none;
  }
}

/* 이 문서에서 가릴 사람. 지휘서신·부대 공지문을 고르면 종류 목록 아래에 선다. 창 안의 두 번째 물음이라
   종류 목록과 hairline 한 줄로 가르고, 고르는 칸은 종류 고르기와 같은 부품을 쓴다 */
.cmd-withhold {
  min-width: 0;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--lm-hairline);
}

.cmd-withhold-legend {
  float: left;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.cmd-withhold > .lm-field-help {
  clear: both;
}

.cmd-withhold .cmd-kind-list {
  margin-top: 12px;
}

/* 고른 칸 바로 아래에 붙는 입력칸. 칸 안쪽 글자(라디오 18px + 10px)와 왼쪽을 맞춘다 */
.cmd-withhold-field {
  padding: 4px 0 8px 40px;
}

/* 파생 문서 미리보기 머리: 만들 때 고르신 가릴 사람 한 줄 */
.cmd-doc-withhold {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-doc-withhold .lm-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* ── 창 ── */

.cmd-dialog textarea {
  resize: vertical;
  min-height: 160px;
}

.cmd-dialog .lm-check {
  margin-top: 12px;
}

/* ── 넓은 창 ──
   관리자 셸은 본문 폭을 막지 않는다. 2000px 창에서 그대로 두면 문서 미리보기는 한 줄이 너무 길어진다.
   화면마다 일하는 폭을 따로 묶는다. */

.cmd-docs {
  max-width: 1240px;
}

.cmd-cases,
.cmd-members {
  max-width: 1440px;
}

.cmd-plan {
  max-width: 1520px;
}

@media (prefers-reduced-motion: reduce) {
  .cmd-cell,
  .cmd-case-row {
    transition: none;
  }
}

/* ── 참모와 대화: 대화 화면 ──
   여기만 관리자 셸 모습을 벗는다. 대화는 표가 아니라 말이고, 말하는 자리는 넓고 조용해야 한다.
   나머지 화면(대화 목록·방책·조치·문서·쓰는 사람)은 Dream Ventures 셸 그대로 둔다(2026-09-18 대표 지시).

   편한 것이 첫째 기준이다. 그래서 이렇게 한다.
     - 들어오면 커서가 입력칸에 있고, 대화는 이미 맨 아래(가장 최근 말)에 있다. 굴러 내려가지 않는다
     - Enter로 보낸다. 줄을 바꾸려면 Shift+Enter다. 빈 칸에서 Enter는 아무 일도 하지 않는다
     - 입력칸은 친 만큼 늘어난다. 스크롤바를 보며 쓰지 않는다
     - 답을 기다리는 동안 참모 자리에 스켈레톤 한 줄과 "답을 준비하고 있습니다"가 선다. 멈춘 것이 아니라는 표시다 */

.cmd-chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  padding: 0;
}

.cmd-chat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--lm-hairline);
  background: var(--lm-bg-surface);
}

/* 사안 제목이 이 화면의 h1이다. 오른쪽 패널 제목(18px)보다 작으면 위계가 뒤집힌다.
   2026-09-29 램프의 Headline(24px/750)으로 맞췄다. 20px는 램프 밖이었고, 도구 화면 h1(24px)에서 대화로 오면 제목이
   한 단 줄어 같은 사안이 다른 무게로 읽혔다. 머리의 점검표를 뺀 자리가 있어 머리 높이는 4px만 는다 */
.cmd-chat-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cmd-chat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-chat-meta:empty { display: none; }

.cmd-chat-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 권한 밖(현장 간부가 주소로 연 경우)에서는 쓸 수 없는 머리 단추를 보이지 않는다.
   대화의 브리프 숨기기, 방책·조치·문서의 만들기 단추. 누르면 403이 일반 오류로 바뀌어 권한 없음 상태를 덮었다 */
#main[data-state="forbidden"] .cmd-chat-top-actions,
#main[data-state="forbidden"] .lm-page-actions {
  display: none;
}

/* 브리프가 넓어야 칸 값과 근거 인용이 한눈에 읽힌다. 340px 고정일 때 인용이 여러 줄로 쪼개지고
   대화는 남는 폭을 다 가져가 한 줄이 너무 길었다(2026-09-28 사용자 지적). 브리프는 창의 42%(380~600px)를 받고
   대화는 나머지에서 읽는 폭(40rem)으로 가운데 선다. */
.cmd-chat-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 42%, 600px);
  gap: 0;
  flex: 1;
  min-height: 0;
}

/* 곁패널을 접으면 대화가 그 자리를 가져간다 */
.cmd-chat[data-aside="off"] .cmd-chat-body {
  grid-template-columns: minmax(0, 1fr);
}

.cmd-chat[data-aside="off"] .cmd-chat-aside {
  display: none;
}

.cmd-chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* 대화. 읽는 폭을 묶고 가운데 세운다 */
.cmd-chat-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 24px 24px 8px;
  list-style: none;
  /* 스크롤은 굴리지 않는다. 열 때도 보낼 때도 맨 아래로 곧바로 간다(desk.js scrollThread).
     smooth로 두면 열 때마다 대화가 맨 위에서 0.5초 동안 굴러 내려왔다(2026-09-28 점검) */
  scroll-behavior: auto;
}

/* 키보드로 지난 말을 올려 볼 수 있게 대화 목록이 포커스를 받는다(tabindex=0). 포커스 링은 다른 조작 요소와 같다 */
.cmd-chat-thread:focus-visible {
  outline: var(--lm-focus-ring);
  outline-offset: -3px;
}

/* 말풍선. 내 말은 오른쪽 옅은 남색 면, 참모의 말은 왼쪽 흰 면에 선 하나. 누가 한 말인지 색과 자리로 가른다
   (2026-09-28 사용자 요청 — 전에는 둘 다 같은 줄에 선으로만 나뉘어 "나" 글자 색만 달랐다). */
.cmd-chat-turn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 40rem;
  margin: 0 auto;
  padding: 8px 0;
  /* 좁은 화면에서 새 답이 오면 화면이 그 말풍선으로 내려간다(desk.js followTurn). 모바일 윗줄에 머리가 가리지 않게 띄운다 */
  scroll-margin-top: 72px;
}

.cmd-chat-turn[data-role="officer"] {
  align-items: flex-end;
}

.cmd-chat-turn > * {
  max-width: 88%;
}

.cmd-chat-who {
  display: block;
  margin: 0 2px 4px;
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.cmd-chat-turn[data-role="officer"] .cmd-chat-who {
  color: var(--lm-trust);
}

.cmd-chat-text {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  /* 램프의 Body(15px). 15.5px는 램프 밖이었다(2026-09-29) */
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cmd-chat-turn[data-role="officer"] .cmd-chat-text {
  border-color: transparent;
  background: var(--lm-trust-soft);
}

.cmd-chat-field {
  display: block;
  margin: 6px 2px 0;
  color: var(--lm-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* 먼저 답하고 이어서 묻는 참모 말풍선(2026-09-28). 답이 먼저, 질문은 선 하나 아래 다음 문단이다.
   새 색을 쓰지 않는다. 가르는 선은 말풍선 테두리와 같은 hairline 한 줄이다.
   두 문단은 말풍선의 pre-wrap을 물려받아 답 안의 줄바꿈이 그대로 산다 */
.cmd-chat-text.is-answered {
  padding: 0;
}

.cmd-chat-answer,
.cmd-chat-ask {
  margin: 0;
  padding: 10px 14px;
}

.cmd-chat-ask {
  border-top: 1px solid var(--lm-hairline);
}

/* ── 도구 단추: 하나의 부품(2026-09-29) ──
   데스크 도구 줄(입력칸 아래)·작업 줄 도구(도구 화면 머리)·참모 권함의 머리가 모두 이 부품을 쓴다.
   예전에는 셋이 모서리(pill·pill·8px)·글자(13·13.5·13px)·간격이 제각각이라 같은 도구가 자리마다 다른 물건으로 보였다.
   - 모서리: 조작 요소의 8px(--lm-radius). pill은 DESIGN.md Shapes가 상태 chip·저장 pill·스위치에만 허락한다
   - 글자: 레일 항목(DESIGN.md Rail)과 같은 13.5px/600. 같은 도구 이름이 레일과 같은 무게로 읽힌다
   - 경계: 누르는 것이라 조작 요소 경계(border-strong). hover는 경계 ink + subtle 면, 눌림은 translateY(1px) + 선택 면
   - 지금 보고 있는 도구(aria-current)는 선택 면 + 코발트 경계. 경계가 있어 고대비 모드에서도 갈린다
   - 잠김(aria-disabled)은 흐리게 하지 않는다(흐리면 이름이 2.25~3.37:1). 점선 경계·면 없음·muted 글자·자물쇠 아이콘
   - 높이: 어디서나 44px(PRODUCT.md 조작 요소 44×44, DESIGN.md 간격·높이 집합). 예전에는 넓은 창의 정밀 포인터에서
     36px로 낮췄는데, 이 표면만의 예외가 되어 같은 도구가 창 폭과 입력 장치에 따라 높이가 달랐다(2026-09-29 44px로 통일) */
.cmd-toolbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: 44px;
  padding: 0 var(--lm-space-12);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color var(--lm-duration-fast) var(--lm-ease-out),
    background-color var(--lm-duration-fast) var(--lm-ease-out),
    color var(--lm-duration-fast) var(--lm-ease-out);
}

.cmd-toolbtn .lm-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--lm-text-muted);
}

@media (hover: hover) and (pointer: fine) {
  a.cmd-toolbtn:hover {
    border-color: var(--lm-text);
    background: var(--lm-bg-subtle);
    color: var(--lm-text-strong);
  }
}

a.cmd-toolbtn:active {
  transform: translateY(1px);
  background: var(--lm-bg-selected);
  transition-duration: 0s;
}

.cmd-toolbtn[aria-current="page"] {
  border-color: var(--lm-primary);
  background: var(--lm-bg-selected);
  color: var(--lm-primary-pressed);
}

.cmd-toolbtn[aria-current="page"] .lm-icon {
  color: currentColor;
}

.cmd-toolbtn[aria-disabled="true"] {
  border-style: dashed;
  background: transparent;
  color: var(--lm-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* 참모가 권한 도구. 말풍선 아래 한 줄이다 — 머리(아이콘·도구 이름)는 위 도구 단추 그대로이고,
   까닭 한 문장과 화살표가 붙어 줄 폭을 다 쓴다. 코발트는 쓰지 않는다 */
.cmd-chat-suggest {
  display: grid;
  gap: var(--lm-space-8);
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.cmd-suggest {
  display: flex;
  align-items: flex-start;
  min-height: 44px;
  padding: var(--lm-space-8) var(--lm-space-12);
  line-height: 1.5;
}

/* 까닭이 두 줄이 되어도 아이콘이 첫 줄(도구 이름)에 붙어 있게 위에서 맞춘다 */
.cmd-suggest .lm-icon {
  margin-top: 2px;
}

/* 도구 이름 한 줄, 까닭 한 줄. 까닭 길이에 따라 한 줄로 붙었다 두 줄로 갈렸다 하면 권함 둘이 서로 다른 모양이 된다 */
.cmd-suggest-text {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.cmd-suggest-tool {
  white-space: nowrap;
}

.cmd-suggest-why {
  color: var(--lm-text-muted);
  font-weight: 500;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  a.cmd-suggest:hover .cmd-suggest-go {
    color: var(--lm-text-strong);
  }
}

/* 확인된 칸이 없어 아직 못 여는 도구. 링크 대신 까닭을 적는다(도구 줄의 잠금과 같은 문구).
   잠김 모양은 도구 단추의 aria-disabled 그대로다 */
.cmd-suggest-lock {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  font-weight: 500;
}

.cmd-suggest-lock .lm-icon {
  margin-top: 1px;
}

.cmd-chat-drop {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
  font-size: 13.5px;
  line-height: 1.6;
}

/* 답을 기다리는 동안. 멈춘 것이 아니라는 표시 하나.
   새 애니메이션을 만들지 않고 이미 쓰는 스켈레톤을 그대로 쓴다. 모션은 한 종류면 충분하다.
   폭을 정해 둔다. 말풍선 줄(li)은 align-items:flex-start라 폭 없는 스켈레톤은 0px로 줄어 보이지 않았다(2026-09-28 점검).
   글자 한 줄을 같이 둔다. 줄인 모션 설정에서 반짝임이 멈춰도, 화면 읽기에서도 상태가 글로 전해진다 */
.cmd-chat-wait {
  display: grid;
  gap: 8px;
  width: min(20rem, 88%);
  margin-top: 2px;
}

.cmd-chat-wait .skeleton {
  height: 14px;
}

.cmd-chat-wait-text {
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* 답을 받지 못한 말 아래의 한 줄: 왜 안 됐는지와 [다시 보내기]. 위험 잉크·아이콘·글자로 알리고 면은 칠하지 않는다 */
.cmd-chat-fail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px 12px;
  margin: 6px 2px 0;
  /* foundation의 :where([role="alert"]) 주의 상자(경계·면)를 걷는다. 붉은 면을 넓게 칠하지 않는다(DESIGN 오류 상태) */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lm-danger);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: start;
}

.cmd-chat-fail-text {
  display: flex;
  flex: 1 1 16rem;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.cmd-chat-fail-text .lm-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.cmd-chat-fail-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.cmd-chat-fail .btn {
  flex: 0 0 auto;
  min-height: 36px;
}

/* [고쳐 쓰기]는 글자 단추다. 줄 안에서는 본문 선 밖으로 내미는 음수 여백(foundation)을 거둔다 */
.cmd-chat-fail-actions .btn.quiet {
  margin-left: 0;
}

/* [다시 보내기]를 손가락·마우스로 누르면 포커스가 그 말씀 줄로 온다(tabindex=-1, desk.js focusTurn).
   키보드로 온 포커스만 링을 그린다 — 다른 조작 요소와 같은 3px 링 */
.cmd-chat-turn:focus {
  outline: none;
}

.cmd-chat-turn:focus-visible {
  outline: var(--lm-focus-ring);
  outline-offset: 3px;
  border-radius: var(--lm-radius);
}

/* 첫 화면. 칠판이 아니라 바로 칠 수 있는 자리다 */
.cmd-chat-empty {
  max-width: 40rem;
  margin: 8vh auto 0;
  padding: 0 4px;
}

/* 램프의 Title(18px). 19px는 램프 밖이었다(2026-09-29) */
.cmd-chat-empty-lead {
  margin: 0 0 6px;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.cmd-chat-empty p:last-child {
  margin: 0;
  max-width: 52ch;
  color: var(--lm-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* 입력칸. 아래 붙고, 친 만큼 늘어나고, 보내기는 화살표 하나다 */
.cmd-chat-composer {
  padding: 8px 24px 10px;
  background: var(--lm-bg-page);
}

.cmd-chat-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  max-width: 40rem;
  margin: 0 auto;
  padding: 8px;
  /* 입력칸은 조작 요소라 경계를 border-strong으로 둔다(DESIGN Measured Line Rule: 조작 요소 경계 3:1 이상).
     카드 윤곽용 --lm-border는 바탕 위 2.33:1이라 입력칸이 어디인지 흐렸다(2026-09-28 점검) */
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

/* 포커스는 다른 조작 요소와 같은 3px 링이다. 안쪽 textarea는 링을 끄고 입력칸 틀 전체에 링을 준다.
   틀 안의 [자료 넣기]·[보내기]에 포커스가 있을 때는 그 단추의 링만 보인다(링이 두 겹이 되지 않게) */
.cmd-chat-form:has(textarea:focus-visible) {
  outline: var(--lm-focus-ring);
  outline-offset: 3px;
}

.cmd-chat-form textarea {
  min-height: 28px;
  max-height: 40vh;
  padding: 4px 0;
  border: 0;
  background: transparent;
  resize: none;
  /* 램프의 Body(15px). 손가락으로 쓰는 자리에서는 16px로 올린다 — iOS가 16px 미만 칸을 누르면 화면을 확대한다
     (현장 보고 폼 .cmd-report-form과 같은 규칙, 2026-09-29) */
  font-size: 15px;
  line-height: 1.65;
  overflow-y: auto;
}

@media (max-width: 640px), (pointer: coarse) {
  .cmd-chat-form textarea {
    font-size: 16px;
  }
}

.cmd-chat-form textarea:focus,
.cmd-chat-form textarea:focus-visible {
  outline: none;
  box-shadow: none;
}

/* 누르는 자리는 44px를 지킨다(손가락 최소 크기). 정사각으로 두어 찌그러지지 않게 한다 */
/* 자료 넣기. 보내기와 같은 크기로 양쪽 끝에 선다 */
.cmd-chat-clip {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--lm-radius-inner);
}

.cmd-chat-clip .lm-icon {
  width: 18px;
  height: 18px;
}

.cmd-chat-send .btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--lm-radius-inner);
}

.cmd-chat-send .lm-icon {
  width: 18px;
  height: 18px;
}

.cmd-chat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 40rem;
  margin: 8px auto 0;
}

.cmd-chat-foot .lm-field-help {
  margin: 0;
  max-width: 52ch;
}

/* 예전에 정리를 마친(봉인한) 브리프의 아랫자리. 그 브리프는 고쳐 쓸 수 없어 입력칸 대신 들어서며,
   [대화 이어가기] 하나를 주 행동으로 둔다. 이어가면 새 브리프가 열린다(2026-09-28부터 새로 봉인하지 않는다) */
.cmd-sealed {
  display: grid;
  gap: 10px;
  max-width: 40rem;
  margin: 0 auto;
}

.cmd-sealed .cmd-sealed-note {
  margin: 0;
}

.cmd-sealed-again {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* 도구 줄. 입력칸 바로 아래, 대화 옆에 둔다. 번호도 "지금 할 차례"도 없다 — 대화마다 쓰는 도구가 다르다.
   코발트는 보내기 단추 하나뿐이라 도구는 테두리 한 줄짜리 조용한 단추(.cmd-toolbtn)로 둔다 */
.cmd-tools {
  display: grid;
  gap: var(--lm-space-8);
  max-width: 40rem;
  margin: 12px auto 0;
}

.cmd-tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmd-tools-lock {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-tools-lock .lm-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.cmd-chat-talksub {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 24px 14px;
  color: var(--lm-text-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* 곁패널. 아는 것과 모르는 것이 대화 옆에 붙어 있다 */
.cmd-chat-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 24px;
  border-left: 1px solid var(--lm-hairline);
  background: var(--lm-bg-page);
}

/* 곁패널의 패널들은 줄어들지 않는다. 자리가 모자라면 곁패널이 스크롤한다.
   줄어들게 두면 높이가 모자랄 때 브리프 패널이 머리만 남기고 눌렸다(작업 줄이 생긴 뒤 실제 크롬에서 봄). */
.cmd-chat-aside > * {
  flex-shrink: 0;
}

/* 1100px 이하: 곁패널은 대화 아래로 내려간다. 기본은 접힘이다(desk.js, 저장한 값이 없을 때).
   펼치면 100dvh 틀 안에서 대화와 높이를 나누지 않고 화면 전체가 스크롤한다. 나눠 가지면 1024×768·1100×700에서
   대화가 32~60px만 남았다(2026-09-28 점검). 대화는 적어도 창 높이의 절반을 받는다 */
@media (max-width: 1100px) {
  .cmd-chat-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmd-chat-aside {
    display: none;
  }

  .cmd-chat[data-aside="on"] .cmd-chat-aside {
    display: flex;
    overflow-y: visible;
    border-left: 0;
    border-top: 1px solid var(--lm-hairline);
  }

  .cmd-chat[data-aside="on"] {
    height: auto;
    min-height: 100dvh;
  }

  .cmd-chat[data-aside="on"] .cmd-chat-body {
    flex: none;
  }

  .cmd-chat[data-aside="on"] .cmd-chat-thread {
    flex: none;
    min-height: 50vh;
    overflow-y: visible;
  }

  /* 곁패널이 창 폭을 다 쓰면 차원 묶음을 둘씩 앉힌다. 640px 이하에서는 다시 한 줄에 하나다 */
  .cmd-chat-aside .cmd-ledger-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    align-content: start;
  }

  .cmd-chat-aside .cmd-dim + .cmd-dim {
    border-top: 0;
    margin-top: 0;
  }
}

/* ── C-11 결심 기록·선례 ─────────────────────────────────────
   이 화면에는 점수도 줄 세우기도 없다. 카드는 같은 크기로 서고, 다른 것은 결과 꼬리표 색뿐이다.
   왼쪽은 이번 결심을 적는 자리, 오른쪽은 규칙이 고른 선례다. */

.cmd-dec-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

/* 되물을 것은 layout 위에 폭 전체로 선다. 이 화면이 가장 먼저 묻는 것이다 */
.cmd-dec-due {
  margin-top: 16px;
  border-color: color-mix(in srgb, var(--lm-warning-accent) 45%, var(--lm-border));
}

.cmd-dec-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmd-dec-card {
  display: grid;
  gap: var(--lm-space-4);
  padding: 12px 14px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

.cmd-dec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.cmd-dec-case {
  font-size: 13.5px;
  font-weight: 600;
}

.cmd-dec-tags {
  display: flex;
  align-items: center;
  gap: var(--lm-space-4);
  flex-wrap: wrap;
}

.cmd-dec-choice {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 15px;
  line-height: 1.55;
}

.cmd-dec-reason {
  margin: 0;
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.6;
}

/* 그때 무엇을 몰랐는가. 선례를 읽는 사람에게 가장 쓸모 있는 줄이라 눈에 걸리게 둔다 */
.cmd-dec-open {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  padding: var(--lm-space-8);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-dec-open .lm-icon {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
}

/* 결과 메모. 결과가 무엇이었는지(상태)는 카드 머리의 상태 chip이 색과 문구로 적고, 이 줄은 그 메모다.
   왼쪽 선은 카드 안 구획이라 hairline 1px이다. 2px는 선 규칙에서 rail-accent·primary(선택)에만 허락된다(2026-09-29) */
.cmd-dec-outcome {
  margin: 0;
  padding-left: var(--lm-space-8);
  border-left: 1px solid var(--lm-hairline);
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.cmd-dec-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 0;
  color: var(--lm-text-muted);
  font-size: 12px;
}

.cmd-dec-foot .lm-num {
  font-variant-numeric: tabular-nums;
}

.cmd-dec-when::before {
  content: "·";
  margin-right: 8px;
}

/* 고르는 칩. 라디오는 감추고 테두리로 고른 것을 보인다.
   DESIGN.md Chips의 선택형 chip이다: 8px 모서리 + border-strong, 고르면 선택 면 + 코발트 글자와 경계.
   상태 chip(pill, 24px)과 모양을 달리해야 누르는 것과 읽는 것이 갈린다. 예전에는 pill + border에 높이 38px였다(2026-09-29).
   조작 요소라 44px이고, 칩 사이는 인접 대상 간격 8px다(PRODUCT.md) */
.cmd-dec-chips {
  display: flex;
  gap: var(--lm-space-8);
  flex-wrap: wrap;
}

.cmd-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--lm-space-12);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--lm-duration-fast) var(--lm-ease-out),
    background-color var(--lm-duration-fast) var(--lm-ease-out),
    color var(--lm-duration-fast) var(--lm-ease-out);
}

.cmd-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .cmd-chip:hover {
    border-color: var(--lm-text);
    background: var(--lm-bg-subtle);
  }
}

.cmd-chip:has(input:checked) {
  border-color: var(--lm-primary);
  background: var(--lm-bg-selected);
  color: var(--lm-primary-pressed);
  font-weight: 600;
}

.cmd-chip:has(input:focus-visible) {
  outline: var(--lm-focus-ring);
  outline-offset: 2px;
}

/* 결과 네 갈래는 설명이 붙어 한 줄씩 선다 */
.cmd-chip-wide {
  width: 100%;
  border-radius: var(--lm-radius);
  padding: 10px 12px;
}

.cmd-chip-wide span {
  display: grid;
  gap: 2px;
}

.cmd-chip-wide small {
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 400;
}

.cmd-dec-error {
  color: var(--lm-danger);
}

.cmd-dec-book {
  margin-top: 16px;
}

/* 결심 양식의 "언제 다시 보시겠습니까". fieldset.lm-field에 초기화가 없어 브라우저 기본 2px groove 테두리와
   안쪽 여백이 그려졌다(2026-09-28 점검). 다른 칸처럼 테두리 없이 두고, legend는 칸 라벨(12px/650)과 같게 둔다 */
.cmd-dec-write fieldset.lm-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* 띄운(float) legend는 테두리 자리에서 내려와 칸 격자(.lm-field, gap 4px)의 첫 줄이 된다. 라벨과 같은 간격이다 */
.cmd-dec-write fieldset.lm-field > legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--lm-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .cmd-dec-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ════════════════════════════════════════════════════════════════
   간부 중심 재편(2026-09-27) — 업무현황·기준정보·자료실·작업 줄·가입
   Dream Ventures가 회사 한 곳을 가운데 두듯 간부 한 사람을 가운데 둔다.
   새 색은 없다. 선은 border·hairline 1px, 강조는 코발트 주 버튼 하나와 선택 표면뿐이다.
   ════════════════════════════════════════════════════════════════ */

/* 레일 칸 끝 수 배지(받은 초대·대기 중인 가입 신청). 상태 chip이 아니라 레일 항목 안의 작은 요소라
   pill이 아니라 레일 안쪽 요소의 6px(--lm-radius-inner)이다. 높이는 chip과 같은 24px(간격·높이 집합)다(2026-09-29).
   도구 칸의 '한 것' 표시와 달리 이 수는 다른 곳에 적히지 않아(초대·신청 화면을 열어야 보인다) 레일에 남긴다 */
.cmd-nav-count {
  margin-left: auto;
  min-width: 24px;
  padding: 0 8px;
  border: 1px solid var(--lm-rail-line);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-rail-selected);
  color: var(--lm-rail-ink-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* ── 작업 줄: 대화 하나를 다루는 화면의 맨 위 ──
   이 대화에서 한 것, 꺼내 쓸 도구, 무엇을 딛고 있는지(기준정보)를 둔다. 첫 줄은 한 것·기준정보,
   둘째 줄은 도구다. 도구에 번호도 잇는 선도 없다 — 순서가 아니라 고르는 것이라서다(2026-09-28).
   대화 제목은 적지 않는다(2026-09-29). 바로 아래 페이지 제목(h1)이 같은 제목을 크게 적는다. */
.cmd-workline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: 44px;
  margin: 0 0 20px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--lm-hairline);
}

/* 도구 화면에서는 페이지 머리(h1·주 행동) 바로 아래에 선다(cmd-shell.js mountWorkline). 머리와 붙지 않게 16px 띄운다 */
.lm-page-header + .cmd-workline {
  margin-top: var(--lm-space-16);
}

.cmd-chat > .cmd-workline {
  margin: 0;
  padding: 6px 24px;
  background: var(--lm-bg-surface);
}

.cmd-wl-did {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.cmd-wl-did-label {
  color: var(--lm-text-muted);
  font-size: 12px;
}

/* "이 대화에서 한 것" 한 줄. 업무현황·대화 목록·작업 줄이 같은 모양을 쓴다.
   가운뎃점으로 이은 짧은 사실들이다. 칩으로 세우면 누르는 것처럼 보이고, 성취 배지처럼 읽힌다 */
.cmd-did {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.cmd-did li {
  white-space: nowrap;
}

/* 가운뎃점은 앞 사실의 끝에 붙인다. 뒤 사실의 앞에 붙이면 줄이 바뀔 때 새 줄이 '· 문서 2건'처럼 점으로 시작했다
   (대화 목록 '한 것' 칸, 2026-09-29 글자를 13.5px로 올린 뒤 실제 크롬에서 봄) */
.cmd-did li:not(:last-child)::after {
  content: "·";
  margin: 0 6px;
  color: var(--lm-text-muted);
}

.cmd-did li[data-did="decision"],
.cmd-did li[data-did="outcome"] {
  color: var(--lm-success-text);
  font-weight: 600;
}

.cmd-did-none {
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

/* 도구. 단추는 데스크 도구 줄과 같은 부품(.cmd-toolbtn)이고, 지금 보고 있는 화면은 aria-current 한 가지로 가른다.
   레일이 늘 보이는 넓은 창(1025px 이상)에서는 도구 칸과 잠김 까닭을 두지 않는다(2026-09-29). 레일의 '참모 업무'가
   같은 도구·같은 잠김·같은 까닭을 이미 적어, 이동 길이 레일·작업 줄·'대화로 돌아가기' 세 겹이었다.
   레일이 서랍으로 들어가는 1024px 이하에서만 작업 줄이 도구 이동을 맡는다 */
.cmd-wl-tools {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lm-space-8);
  order: 5;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmd-wl-lock {
  display: inline-flex;
  flex: 1 0 100%;
  align-items: center;
  gap: 6px;
  order: 6;
  margin: -4px 0 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-wl-lock .lm-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* 감추는 규칙은 두 기본 규칙 뒤에 둔다. 명시도가 같아 앞에 두면 .cmd-wl-lock의 display가 되살린다(2026-09-29 재측정) */
@media (min-width: 1025px) {
  .cmd-wl-tools,
  .cmd-wl-lock {
    display: none;
  }
}

.cmd-wl-base {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.4;
}

.cmd-wl-base .lm-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.cmd-wl-base > .lm-icon:first-child {
  color: var(--lm-success-text);
}

/* 기준정보가 바뀐 대화. 주의 면 한 줄에 [다시 넣기]가 붙는 알림 줄이지 상태 chip이 아니다.
   말풍선 아래 주의 블록(.cmd-chat-drop)과 같은 안쪽 요소 6px이다. pill은 상태 chip·저장 pill·스위치에만 쓴다(2026-09-29) */
.cmd-wl-base.is-stale {
  padding: 0 4px 0 12px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
}

.cmd-wl-base.is-stale > .lm-icon:first-child {
  color: var(--lm-warning-text);
}

.cmd-wl-base .btn {
  min-height: 36px;
}

.cmd-wl-base a {
  color: inherit;
}

/* ── 업무현황 ── */

.cmd-home {
  display: grid;
  gap: 24px;
  align-content: start;
}

/* 지금 할 일. 화면에서 가장 무거운 자리지만 면을 칠하지 않는다. 크기와 코발트 버튼 하나가 무게를 낸다 */
.cmd-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 32px;
  padding: 24px;
}

.cmd-focus-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cmd-focus h2 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.cmd-focus-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.cmd-focus-meta[hidden],
.cmd-focus-detail[hidden],
.cmd-focus-did[hidden] {
  display: none;
}

.cmd-focus-when {
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

.cmd-focus-detail {
  max-width: 68ch;
  margin: 0;
  color: var(--lm-text);
  font-size: 15px;
  line-height: 1.6;
}

.cmd-focus-did {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
}

.cmd-focus-did-label {
  color: var(--lm-text-muted);
  font-size: 12px;
}

.cmd-focus-action .btn {
  min-height: 48px;
  padding-inline: 20px;
  white-space: nowrap;
}

.cmd-focus-action .btn .lm-icon {
  margin-left: 4px;
}

.cmd-sk-focus {
  height: 152px;
}

/* 밴드 칸이 링크다. 누르면 그 조건으로 일 목록이 열린다.
   업무현황 밴드는 늘 네 칸이다. auto-fit에 맡기면 좁은 화면에서 2+2로 접히며 셋째 칸이 세로선과 여백을 단 채
   둘째 줄 첫머리에 온다. 넓으면 한 줄 네 칸, 좁으면 두 줄 두 칸으로 정하고 둘째 줄은 가로선으로 나눈다 */
.cmd-home-band {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

/* 업무현황 밴드는 조용하게 둔다(2026-09-29). 공용 밴드(lm-shell.css)는 값을 26px/750으로 세워, 대개 셋이 0인 네 칸이
   '지금 할 일'보다 큰 글자로 화면을 눌렀다. 값은 DESIGN.md Band 정본(숫자 20px/700, 높이 72px)으로 낮추고,
   0건 칸은 링크 없이 '없음'을 muted 14px로만 적는다(muted는 page 바탕에서 AA를 넘는다). 값이 있는 칸만 또렷하다.
   '없음'도 숫자와 같은 줄 높이(24px)를 받아 칸마다 이름 줄이 같은 높이에 선다 */
.cmd-home-band > .lm-band-cell {
  min-height: 72px;
}

.cmd-home-band .lm-band-cell .lm-band-value {
  /* impeccable-disable-next-line design-system-font-size -- DESIGN.md Components > Band 정본이 밴드 숫자를 20px/700로 정한다 */
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.cmd-home-band .lm-band-cell.is-zero .lm-band-value {
  color: var(--lm-text-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

@media (max-width: 640px) {
  .cmd-home-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmd-home > .cmd-home-band > .lm-band-cell:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .cmd-home > .cmd-home-band > .lm-band-cell:nth-child(n + 3) {
    border-top: 1px solid var(--lm-hairline);
  }
}

a.lm-band-cell {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  a.lm-band-cell:hover {
    background: var(--lm-bg-subtle);
  }

  a.lm-band-cell:hover .lm-band-value {
    color: var(--lm-primary);
  }
}

a.lm-band-cell:active {
  background: var(--lm-bg-selected);
  transition: none;
}

a.lm-band-cell:focus-visible {
  outline-offset: -3px;
}

.cmd-home > .lm-band > .lm-band-cell:first-child {
  padding-left: 0;
}

.cmd-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

/* 한 일 한 줄. DV의 "검증 가능한 실행선"을 이 제품 말로: 무엇 · 어디까지 · 다음 */
.cmd-line-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmd-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 24px;
  min-height: 72px;
  padding: 12px 20px;
}

.cmd-line + .cmd-line {
  border-top: 1px solid var(--lm-hairline);
}

.cmd-line-head {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cmd-line-title {
  overflow: hidden;
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a.cmd-line-title:hover {
    color: var(--lm-primary);
  }
}

.cmd-line-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

.cmd-line-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--lm-primary);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

.cmd-line-next .lm-icon {
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .cmd-line-next:hover {
    color: var(--lm-primary-hover);
  }
}

.cmd-line-next.is-muted {
  color: var(--lm-text-muted);
  font-weight: 500;
}

/* 줄 끝: 다음에 누를 곳과, 승인된 조치가 있으면 그 아래 작은 글씨로 마침 수.
   옆으로 나란히 두면 1280px에서 제목 칸이 눌려 "3소대 분…"으로 잘리고 날짜가 두 줄로 갈렸다(2026-09-28 실제 크롬).
   링크는 누르는 높이 44px을 지키고, 마침 수는 링크 글자 바로 밑에 붙인다 */
.cmd-line-end {
  display: grid;
  justify-items: end;
  align-content: center;
  min-width: 0;
}

.cmd-line-actions {
  grid-row: 2;
  margin-top: -10px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.cmd-line-actions.is-all {
  color: var(--lm-success-text);
  font-weight: 650;
}

.cmd-line-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 48px 24px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  text-align: center;
}

.cmd-line-empty .lm-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.cmd-line-empty strong {
  color: var(--lm-text);
  font-size: 15px;
  font-weight: 650;
}

/* 줄 가운데: 이 대화에서 한 것(업무현황). 지금 차례가 아니라 한 것이다. 점이 아니라 글자로 읽힌다 */
.cmd-line-did {
  min-width: 0;
  max-width: 44ch;
}

.cmd-home-side {
  display: grid;
  gap: 16px;
}

.cmd-side-card {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
}

.cmd-side-card[hidden] {
  display: none;
}

.cmd-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
}

.cmd-side-head h2 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 700;
}

.cmd-side-head .btn {
  min-height: 36px;
}

/* 곁카드의 수. 26px/750은 램프 밖이고 곁카드가 주 카드보다 무거웠다. 램프의 Title(18px/700)로 한 단 낮춘다(2026-09-29).
   카드 제목(15px)보다는 커서 카드 안에서는 여전히 수가 먼저 읽힌다 */
.cmd-side-count {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.cmd-side-count small {
  margin-left: 4px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.cmd-side-note {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* '마지막 수정 {날짜}'는 한 덩어리다. 날짜가 붙임표 뒤에서 끊겼다('2026-/09-29', 2026-09-29 재측정) */
.cmd-side-note .cmd-side-when {
  white-space: nowrap;
}

.cmd-side-missing,
.cmd-side-reviews {
  display: grid;
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--lm-hairline);
  list-style: none;
}

.cmd-side-missing[hidden] {
  display: none;
}

.cmd-side-missing li a,
.cmd-side-reviews li a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--lm-text);
  font-size: 13.5px;
  text-decoration: none;
}

.cmd-side-missing li a::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border: 1px dashed var(--lm-border);
  border-radius: var(--lm-radius-pill);
}

@media (hover: hover) and (pointer: fine) {
  .cmd-side-missing li a:hover,
  .cmd-side-reviews li a:hover {
    color: var(--lm-primary);
  }
}

.cmd-side-reviews li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

/* ── 기준정보 원장 ── */

.cmd-baseline {
  display: grid;
  gap: 24px;
  align-content: start;
}

.cmd-baseline-tally {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

.cmd-baseline-tally strong {
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 750;
}

.cmd-first-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text);
  font-size: 14px;
  line-height: 1.6;
}

.cmd-first-note .lm-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--lm-success-text);
}

.cmd-first-note[hidden] {
  display: none;
}

.cmd-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 이름 · 값 · 상태. 세 칸이 모든 줄에서 같은 자리에 선다 */
.cmd-fact {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 200px;
  gap: 8px 24px;
  align-items: start;
  padding: 16px 20px;
  scroll-margin-top: 24px;
}

.cmd-fact + .cmd-fact {
  border-top: 1px solid var(--lm-hairline);
}

.cmd-fact[data-editing="true"] {
  background: var(--lm-bg-page);
}

.cmd-fact-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 24px;
}

/* 목록 줄의 이름은 업무현황 줄 제목(.cmd-line-title)과 같은 15px. 14.5px는 램프 밖이었다(2026-09-29) */
.cmd-fact-name {
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 650;
}

.cmd-fact-core {
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.cmd-fact-value {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cmd-fact-text {
  margin: 0;
  color: var(--lm-text);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cmd-fact-empty {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 14px;
}

.cmd-fact-hint,
.cmd-fact-when {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-fact-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 24px;
}

.cmd-fact-side .btn {
  min-height: 36px;
}

.cmd-fact-form {
  display: grid;
  gap: 8px;
}

.cmd-fact-form textarea {
  width: 100%;
  resize: vertical;
}

.cmd-fact-actions {
  margin-top: 4px;
}

.cmd-fact-clear {
  margin-left: auto;
}

.cmd-fact-clear.is-armed {
  color: var(--lm-danger);
}

.cmd-fact-quote {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

.cmd-fact-quote[hidden] {
  display: none;
}

/* 문서 원문. 문장을 끌어 고르는 자리라 행간을 넉넉히 둔다 */
.cmd-quote-viewer {
  max-height: 240px;
  overflow: auto;
  padding: 12px 16px;
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-page);
  color: var(--lm-text);
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--lm-border) transparent;
}

.cmd-quote-viewer.is-tall {
  max-height: 60vh;
}

.cmd-quote-viewer::selection {
  background: var(--lm-bg-selected);
  color: var(--lm-text-strong);
}

.cmd-quote-viewer[hidden] {
  display: none;
}

.cmd-quote-picked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--lm-success-text);
  font-size: 13.5px;
  line-height: 1.55;
}

.cmd-quote-picked .lm-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.cmd-quote-picked[hidden] {
  display: none;
}

.cmd-fact .cmd-quote {
  margin: 4px 0 0;
}

.cmd-fact .cmd-quote-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.cmd-fact .cmd-quote-source .lm-icon {
  width: 14px;
  height: 14px;
}

/* ── 자료실 ── */

.cmd-library {
  display: grid;
  gap: 24px;
  align-content: start;
}

.cmd-library-table {
  table-layout: fixed;
}

.cmd-library-table .cmd-col-kind { width: 88px; }
.cmd-library-table .cmd-col-num { width: 96px; }
.cmd-library-table .cmd-col-date { width: 112px; }
.cmd-library-table .cmd-col-actions { width: 104px; }

.cmd-library-table td,
.cmd-library-table th {
  vertical-align: middle;
}

.cmd-library-table .is-num {
  text-align: right;
}

/* 이름 칸은 이름과 첫 줄 두 줄이다. 표 기본값(48px 한 줄)이면 두 줄이 행 경계에 붙는다 */
.cmd-library-table tbody td {
  height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.cmd-library-table td.cmd-lib-name {
  white-space: normal;
}

.cmd-link-button {
  display: block;
  max-width: 100%;
  min-height: 28px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--lm-text-strong);
  font: inherit;
  /* 자료실 줄 이름. 기준정보 칸 이름(.cmd-fact-name)과 같은 15px(2026-09-29, 14.5px는 램프 밖) */
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cmd-link-button:hover {
    color: var(--lm-primary);
  }
}

.cmd-lib-excerpt {
  display: block;
  overflow: hidden;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-lib-actions {
  text-align: right;
}

/* 넣는 방법 두 갈래. 라디오를 한 줄 선택 막대로 */
.cmd-segment {
  display: inline-flex;
  justify-self: start;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-subtle);
}

.cmd-segment label {
  position: relative;
  display: inline-flex;
}

.cmd-segment input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cmd-segment span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--lm-radius-inner);
  color: var(--lm-text-muted);
  font-size: 13.5px;
  font-weight: 650;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out), color var(--lm-duration-fast) var(--lm-ease-out);
}

.cmd-segment input:checked + span {
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
}

.cmd-segment input:focus-visible + span {
  outline: var(--lm-focus-ring);
  outline-offset: 2px;
}

[data-mode-panel][hidden] {
  display: none;
}

.cmd-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px 16px;
}

.cmd-form-row:has(> .cmd-field-narrow:first-child) {
  grid-template-columns: 136px minmax(0, 1fr);
}

/* 자료실에서 넣기(데스크 자료함이 여는 창) */
.cmd-picker {
  width: min(560px, calc(100vw - 32px));
}

.cmd-picker-list {
  display: grid;
  max-height: 360px;
  margin: 8px 0 0;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  list-style: none;
}

.cmd-picker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px 8px 16px;
}

.cmd-picker-row + .cmd-picker-row {
  border-top: 1px solid var(--lm-hairline);
}

.cmd-picker-row .skeleton {
  grid-column: 1 / -1;
}

.cmd-picker-main {
  display: grid;
  min-width: 0;
}

.cmd-picker-name {
  overflow: hidden;
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-picker-meta {
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

.cmd-picker-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 32px 24px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  text-align: center;
}

.cmd-picker-empty .lm-icon {
  width: 24px;
  height: 24px;
}

.cmd-picker-empty strong {
  color: var(--lm-text);
  font-size: 15px;
}

/* ── 업무 공간 만들기 ── */

.cmd-onboard {
  display: grid;
  align-content: start;
}

.cmd-onboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 48px;
  align-items: start;
  max-width: 1080px;
  padding-top: 24px;
}

.cmd-onboard-copy h1 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 24px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cmd-onboard-lead {
  max-width: 52ch;
  margin: 12px 0 0;
  color: var(--lm-text);
  /* 램프의 Body(15px). 15.5px는 램프 밖이었다(2026-09-29) */
  font-size: 15px;
  line-height: 1.7;
}

.cmd-onboard-copy .cmd-start-steps {
  margin-top: 32px;
}

.cmd-onboard-form {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.cmd-onboard-form h2 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
}

/* ── 가입 신청(운영자) ── */

.cmd-signups {
  display: grid;
  gap: 24px;
  align-content: start;
}

.cmd-signup-table td {
  vertical-align: middle;
}

/* 신청 한 줄에 사람을 알아볼 칸(계급·직책·부대·남긴 말)이 넷이다. 고정 배치 표에서 똑같이 나누면
   시각과 직책이 말줄임으로 잘렸다(1280px 실제 크롬). 시각·상태·ID·조작은 폭을 정하고 나머지는 줄을 바꾼다 */
.cmd-signup-table th:nth-child(1) { width: 152px; }
.cmd-signup-table th:nth-child(5) { width: 104px; }
.cmd-signup-table th:nth-child(6) { width: 128px; }
.cmd-signup-table th:nth-child(7) { width: 152px; }

.cmd-signup-table td:nth-child(2),
.cmd-signup-table td:nth-child(3) {
  white-space: normal;
  line-height: 1.45;
}

.cmd-signup-table tbody td {
  height: auto;
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.cmd-signup-table td.cmd-signup-note {
  white-space: normal;
}

.cmd-signup-note {
  max-width: 32ch;
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-signup-note .cmd-muted {
  display: block;
  margin-top: 4px;
}

.cmd-signup-who {
  color: var(--lm-text-strong);
  font-weight: 650;
}

.cmd-muted {
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

.cmd-signup-actions .lm-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* ── 간부 가입(로그인 전) ── */

.cmd-signup-page .app-login-gate-steps li.is-done .no {
  background: var(--lm-rail-success);
  color: var(--lm-rail-bg);
}

.cmd-signup-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 16px 20px;
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

.cmd-signup-code-label {
  grid-column: 1 / -1;
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.cmd-signup-code-value {
  color: var(--lm-text-strong);
  font-size: 24px;
  font-weight: 750;
  letter-spacing: 0.06em;
  user-select: all;
}

.cmd-signup-next {
  margin-top: 16px;
}

.cmd-signup-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

.cmd-signup-status > .lm-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--lm-text-muted);
}

.cmd-signup-status[data-status="approved"] > .lm-icon,
.cmd-signup-status[data-status="activated"] > .lm-icon {
  color: var(--lm-success-text);
}

.cmd-signup-status[data-status="rejected"] > .lm-icon {
  color: var(--lm-danger);
}

.cmd-signup-status strong {
  color: var(--lm-text-strong);
  font-size: 15px;
}

.cmd-signup-status p {
  margin: 4px 0 0;
  color: var(--lm-text);
  font-size: 14px;
  line-height: 1.6;
}

.cmd-signup-status[hidden],
[data-password-form][hidden] {
  display: none;
}

[data-password-form] {
  margin-top: 16px;
}

.cmd-signup-sid {
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.cmd-signup-foot {
  margin: 24px 0 0;
  color: var(--lm-text-muted);
  font-size: 14px;
}

.cmd-signup-foot a,
.cmd-login-signup a {
  color: var(--lm-primary);
  font-weight: 650;
}

.cmd-login-signup {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--lm-hairline);
  color: var(--lm-text-muted);
  font-size: 14px;
}

/* ── 권한에 따라 숨기는 조작 ──
   막는 것은 API 403이다. 여기서는 누르면 403이 날 버튼을 애초에 보이지 않게 한다. */
body:not([data-cap="commander"]) [data-needs="commander"] {
  display: none;
}

body[data-cap="field"] [data-needs="desk"] {
  display: none;
}

/* 현장 간부에게만 보이는 조작(현장 상황 올리기) */
body:not([data-cap="field"]) [data-for-field] {
  display: none;
}

/* 권한 밖 사람에게만 보이는 안내. 버튼을 숨긴 자리에 왜 없는지 적는다 */
body[data-cap="commander"] [data-for-others],
body:not([data-cap]) [data-for-others] {
  display: none;
}

.cmd-cap-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-subtle);
  color: var(--lm-text);
  font-size: 14px;
  line-height: 1.6;
}

.cmd-cap-note .lm-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--lm-text-muted);
}

/* ── 좁은 화면 ── */

@media (max-width: 1180px) {
  .cmd-home-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .cmd-fact {
    grid-template-columns: 148px minmax(0, 1fr) 168px;
  }
}

@media (max-width: 1024px) {
  .cmd-home-grid,
  .cmd-onboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmd-onboard-grid {
    gap: 32px;
  }

  .cmd-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cmd-line .cmd-line-did {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .cmd-wl-base {
    margin-left: 0;
  }
}

@media (max-width: 780px) {
  .cmd-focus {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }

  .cmd-focus-action .btn {
    width: 100%;
    justify-content: center;
  }

  .cmd-fact {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px;
  }

  .cmd-fact-value {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .cmd-form-row,
  .cmd-form-row:has(> .cmd-field-narrow:first-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-toolbtn,
  .cmd-segment span,
  .cmd-link-button {
    transition: none;
  }
}

/* 결심 기록 양식. 칸 사이가 붙어 라벨이 위 칸 밑에 매달려 보였다. 칸마다 16px을 띄운다 */
.cmd-dec-write form {
  display: grid;
  gap: 16px;
}

/* 대화 목록의 "한 것" 칸. 표가 고정 배치라 칸 폭을 먼저 정해 둔다
   (정하지 않으면 여섯 칸이 똑같이 나뉘어 칸이 글자 가운데서 잘렸다 — 실제 크롬에서 봄). 넘치면 줄을 바꾼다.
   글자는 표 셀과 같은 13.5px이라 따로 줄이지 않는다(12.5px는 램프 밖이었다, 2026-09-29) */
.cmd-case-table th:nth-child(2) { width: 72px; }
.cmd-case-table th:nth-child(3) { width: 72px; }
.cmd-case-table th:nth-child(4) { width: 304px; }
.cmd-case-table th:nth-child(5) { width: 152px; }
.cmd-case-table th:nth-child(6) { width: 104px; }
.cmd-case-table th:nth-child(7) { width: 136px; }

/* 1280px 창에서 본문은 950px 남짓이다. 브리프 칸까지 두면 제목이 "생활관 난…"으로 잘렸다.
   브리프 수치는 데스크에 있으니 넓은 창에서만 보인다 */
@media (max-width: 1440px) {
  .cmd-case-table th:nth-child(5) { width: 0; }
  .cmd-case-table th:nth-child(5),
  .cmd-case-table td:nth-child(5) { display: none; }
}

.cmd-case-table td:last-child {
  text-align: right;
}

/* 새로 만든 창(자료 넣기·반려·자료실에서 넣기)은 칸이 여러 모양이다(두 칸 한 줄·선택 막대·파일 상자).
   ".lm-field + .lm-field" 한 규칙으로는 간격이 생기지 않아 칸이 서로 붙었다. 창 안 폼을 16px 격자로 세운다 */
.cmd-dialog form.cmd-dialog-stack {
  display: grid;
  gap: 16px;
}

.cmd-dialog form.cmd-dialog-stack > h2 {
  margin: 0;
}

.cmd-dialog form.cmd-dialog-stack .lm-field + .lm-field,
.cmd-dialog form.cmd-dialog-stack .lm-check,
.cmd-dialog form.cmd-dialog-stack .lm-dialog-actions {
  margin-top: 0;
}

.cmd-dialog form.cmd-dialog-stack .lm-dialog-actions {
  padding-top: 8px;
}

.cmd-dialog form.cmd-dialog-stack [hidden] {
  display: none;
}

/* 데스크 자료함 머리. 곁패널 폭(340px)에 설명과 버튼 둘이 한 줄로 서지 못해 버튼이 세로로 쌓였다.
   설명 아래에 버튼 줄을 둔다 */
.cmd-chat-aside .cmd-materials > .queue-head {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.cmd-chat-aside .cmd-materials > .queue-head .lm-actions {
  justify-content: flex-start;
  gap: 8px;
}

/* ═══ 권한 관리 ═══
   함께 쓰는 사람(C-03): 권한별 인원 한 줄, 행마다 [권한 바꾸기]·[내보내기], 내 행의 "나" 표시, 잠긴 서비스ID.
   새 색은 없다. 내보내기는 위험 동작이지만 행 안에서는 quiet 그대로 두고, 확인 창의 버튼만 danger로 칠한다. */

.lm-page-header .cmd-member-tally {
  margin: 8px 0 0;
  color: var(--lm-text);
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.cmd-member-table .cmd-member-col-id { width: 168px; }
.cmd-member-table .cmd-member-col-cap { width: 160px; }
.cmd-member-table .cmd-member-col-actions { width: 232px; }

.cmd-member-me {
  margin-left: 8px;
}

/* 행 조작은 칸 오른쪽 끝에 붙인다. quiet 버튼 좌우 12px은 누르는 영역이라,
   마지막 버튼 글자가 칸 끝 선에 오도록 오른쪽 여백을 당긴다(표 셀의 말줄임 자르기는 이 칸에서 끈다) */
.cmd-member-table td.cmd-member-cell-actions {
  overflow: visible;
}

.cmd-member-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
}

.cmd-member-actions > .btn.quiet:first-child {
  margin-left: 0;
}

.cmd-member-actions > .btn.quiet:last-child {
  margin-right: -12px;
}

/* 권한 바꾸기 창의 서비스ID는 잠겨 있다. 칸 모양은 그대로 두고 면과 경계만 낮춰 고칠 수 없음을 보인다 */
.cmd-grant-dialog input[readonly] {
  border-color: var(--lm-border);
  background: var(--lm-bg-subtle);
  color: var(--lm-text);
  cursor: default;
}

/* ═══ 현장 보고 ═══
   현장 간부가 휴대전화로 본 일을 올리는 화면(C-10, field.html). 모바일을 먼저 잡고 넓은 창에서만 두 칸으로 편다.
   새 색은 없다. 급한 정도는 DESIGN.md Chips 절의 선택형 chip(8px 모서리 + border-strong, 고르면 선택 표면 + 코발트)이고
   상태 chip(pill)과 모양이 다르다. 코발트 주 버튼은 [올리기] 하나다.
   1024px 이하 본문 여백 16px은 셸(lm-shell.css)이 이미 준다. 여기서는 폼 안쪽만 16px로 줄인다. */

.cmd-report {
  display: grid;
  gap: 24px;
  align-content: start;
}

/* 한 칸일 때는 폼과 목록이 같은 폭으로 왼쪽에 선다. 가운데로 모으면 레일·머리와 왼쪽 선이 어긋난다 */
.cmd-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 560px;
}

.cmd-report-write {
  display: grid;
  min-width: 0;
}

.cmd-report-form {
  display: grid;
  gap: 20px;
}

/* 휴대전화에서 칸을 누르면 iOS가 16px 미만 글자를 확대한다. 이 폼은 넓은 창에서도 16px로 둔다 */
.cmd-report-form input:not([type="radio"]),
.cmd-report-form textarea,
.cmd-report-form select {
  font-size: 16px;
  caret-color: var(--lm-primary);
}

.cmd-report-form input::selection,
.cmd-report-form textarea::selection {
  background: var(--lm-bg-selected);
  color: var(--lm-text-strong);
}

.cmd-report-form textarea {
  resize: vertical;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: var(--lm-border) transparent;
}

.cmd-report-hint {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cmd-report-count {
  flex: 0 0 auto;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

/* 끝에 가까워지면 주의 잉크로 바꾼다. 숫자가 같이 있어 색만으로 전하지 않는다 */
.cmd-report-count.is-near {
  color: var(--lm-warning-text);
  font-weight: 650;
}

.cmd-report-kind {
  max-width: 240px;
}

/* ── 급한 정도: 선택형 chip 셋 ── */

.cmd-choice-set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cmd-choice-legend {
  margin: 0 0 4px;
  padding: 0;
  color: var(--lm-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.cmd-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 360px;
}

.cmd-choice-set > .lm-field-help {
  margin: 8px 0 0;
}

.cmd-choice-item {
  position: relative;
  display: grid;
}

/* 진짜 라디오를 chip 위에 투명하게 겹친다. 방향키 이동·폼 값·화면 읽기는 브라우저가 그대로 맡는다 */
.cmd-choice-item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cmd-choice-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  transition:
    background-color var(--lm-duration-fast) var(--lm-ease-out),
    border-color var(--lm-duration-fast) var(--lm-ease-out),
    color var(--lm-duration-fast) var(--lm-ease-out);
}

/* 고른 칸에만 체크 표시를 둔다. 선택 표면 색에 모양 하나를 더해 색만으로 가르지 않는다 */
.cmd-choice-face .lm-icon {
  display: none;
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .cmd-choice-item:hover .cmd-choice-face {
    border-color: var(--lm-text);
    background: var(--lm-bg-subtle);
  }
}

.cmd-choice-item input:checked + .cmd-choice-face {
  border-color: var(--lm-primary);
  background: var(--lm-bg-selected);
  color: var(--lm-primary-pressed);
}

.cmd-choice-item input:checked + .cmd-choice-face .lm-icon {
  display: inline-block;
}

.cmd-choice-item input:focus-visible + .cmd-choice-face {
  outline: var(--lm-focus-ring);
  outline-offset: 3px;
}

/* 실명·군번 안내. 폼 안의 한 줄이라 상자를 씌우지 않는다(패널 안에 또 패널이 되지 않게) */
.cmd-report-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 아이콘 상자를 첫 줄 높이(1.5em)로 잡아 글자 줄 가운데에 선다. 여백으로 밀어 맞추지 않는다 */
.cmd-report-note .lm-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 1.5em;
}

.cmd-report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cmd-report-actions .btn {
  min-width: 160px;
}

/* ── 올린 결과 한 줄 ──
   성공 그린 면은 chip·pill에만 쓴다(DESIGN.md Colors). 그래서 흰 면 + border에 아이콘만 성공 잉크로 둔다(가입 상태 줄과 같은 문법) */
.cmd-report-status {
  scroll-margin-top: 24px;
}

.cmd-report-done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

.cmd-report-done > .lm-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 24px;
  color: var(--lm-success-text);
}

.cmd-report-done-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cmd-report-done strong {
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
}

.cmd-report-done-when,
.cmd-report-done-note {
  font-size: 13.5px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cmd-report-done-when {
  color: var(--lm-text-muted);
}

.cmd-report-done-note {
  color: var(--lm-text);
}

/* ── 내가 올린 것 ── */

.cmd-report-mine {
  min-width: 0;
}

.cmd-report-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 한 줄: 제목과 올린 시각이 첫 줄, 상태 chip이 둘째 줄. 제목이 길면 접히고 시각은 첫 줄 끝을 지킨다 */
.cmd-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 16px;
  min-height: 56px;
  padding: 12px 20px;
}

.cmd-report-row + .cmd-report-row {
  border-top: 1px solid var(--lm-hairline);
}

/* 업무현황에서 "승인된 조치 보기"로 넘어오면 그 줄로 내려 포커스를 준다. 고정된 앱 바에 머리가 가리지 않게 띄우고,
   어느 줄로 왔는지 바탕으로 알린다(포커스가 떠나면 사라진다) */
.cmd-report-row {
  scroll-margin-top: 88px;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

.cmd-report-row:focus {
  outline: none;
  background: var(--lm-bg-selected);
}

.cmd-report-title {
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cmd-report-when {
  color: var(--lm-text-muted);
  font-size: 13.5px;
  white-space: nowrap;
}

.cmd-report-meta {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 4px 8px;
}

.cmd-report-step {
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

/* 조치 카드. 목록이 이미 패널이라 테두리를 한 겹 더 두르지 않고 바탕만 한 단계 낮춘다(카드 속 카드 금지) */
.cmd-report-plan {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-subtle);
}

.cmd-report-plan-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 13.5px;
}

.cmd-report-plan-head .lm-icon {
  width: 16px;
  height: 16px;
  color: var(--lm-success-text);
}

.cmd-report-plan-head .lm-num {
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

.cmd-report-plan-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmd-report-plan-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-12);
  padding: 8px 0;
}

.cmd-report-plan-step + .cmd-report-plan-step {
  border-top: 1px solid var(--lm-hairline);
}

/* 조치 번호. 문서 화면의 조치 표(.cmd-step-table .cmd-step-seq)와 같은 맨 번호다(muted, tabular).
   예전에는 20px pill 원에 border-strong 경계였다. pill은 상태 chip·저장 pill·스위치에만 쓰고, 조작 요소 경계를 두른
   작은 칸은 옆 [마침 표시]와 함께 체크 상자처럼 읽혔다(2026-09-29). 줄 높이 24px로 첫 줄(누가 + 기한 chip 24px)에 맞춘다 */
.cmd-report-plan-seq {
  display: block;
  width: 24px;
  line-height: 24px;
  color: var(--lm-text-muted);
  /* 표의 번호 칸과 같은 Data(13.5px/500)다 */
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.cmd-report-plan-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cmd-report-plan-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--lm-text-strong);
  font-size: 13.5px;
}

.cmd-report-plan-what {
  color: var(--lm-text);
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cmd-report-plan-foot {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  word-break: keep-all;
}

/* 날짜가 하이픈에서 두 줄로 갈리지 않게 한다 */
.cmd-report-plan-foot time {
  white-space: nowrap;
}

/* 머리의 진척 "마침 k". 조치 수 옆에 같은 크기로 두고, 다 마치면 초록으로 바꾼다 */
.cmd-report-plan-progress {
  color: var(--lm-text-muted);
  font-size: 13.5px;
}

.cmd-report-plan-progress::before {
  content: "·";
  margin-right: 6px;
  color: var(--lm-border);
}

.cmd-report-plan-progress.is-all {
  color: var(--lm-success-text);
  font-weight: 650;
}

/* 항목마다 마침 표시 자리. 무엇을 문장 바로 아래에 둔다.
   마친 항목은 왼쪽에 마침·시각·누가, 오른쪽 끝에 [되돌리기]. 390px에서 한 줄에 다 안 들어가면
   [되돌리기]만 따로 떨어져 들여 쓴 것처럼 보였다(2026-09-28 실제 크롬). 그래서 두 칸으로 나눈다 */
.cmd-report-plan-mark {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  margin-top: 6px;
}

.cmd-report-plan-mark:empty {
  display: none;
}

.cmd-report-plan-mark .cmd-mark-btn {
  grid-column: 1 / -1;
  justify-self: start;
}

.cmd-mark-btn .lm-icon {
  width: 16px;
  height: 16px;
}

/* 마친 항목: 초록 체크와 "마침", 시각, 누가 표시했는지. 색만이 아니라 아이콘과 글자로도 알린다 */
.cmd-mark-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-mark-done .lm-icon {
  width: 16px;
  height: 16px;
  color: var(--lm-success-text);
}

.cmd-mark-done strong {
  margin-left: -4px;
  color: var(--lm-success-text);
  font-size: 13.5px;
  font-weight: 650;
}

.cmd-mark-done time {
  white-space: nowrap;
}

/* [되돌리기]는 텍스트 버튼이다. 글자가 카드 오른쪽 선에 맞도록 누르는 영역(좌우 12px)만 밖으로 뺀다 */
.cmd-mark-undo {
  margin-left: 0;
  margin-right: -12px;
}

.cmd-mark-error {
  margin-top: 4px;
  font-size: 13.5px;
}

/* 앞 판의 표시를 옮기지 않았다는 것, 마친 일이라 바꿀 수 없다는 것 같은 안내 한 줄 */
.cmd-report-plan-carry {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.5;
  word-break: keep-all;
}

.cmd-report-plan-carry .lm-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--lm-trust);
}

/* 패널 안의 오류는 패널이 이미 테두리다. 상자를 한 겹 더 씌우지 않는다 */
.cmd-report-mine > .lm-error[role="alert"] {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.cmd-report-skel {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
}

/* 넓은 창(1280px 기준 화면)에서는 폼 왼쪽, 목록 오른쪽. 올리고 나서 목록이 바뀌는 것이 한눈에 보인다 */
@media (min-width: 1280px) {
  .cmd-report-grid {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    max-width: none;
  }
}

/* 드로어 셸(휴대전화·태블릿). 칸과 버튼을 엄지로 누르기 좋은 48px로 올리고 [올리기]는 폭을 다 쓴다 */
@media (max-width: 1024px) {
  .cmd-report-form {
    padding: 16px;
  }

  .cmd-report-form input:not([type="radio"]),
  .cmd-report-form select {
    min-height: 48px;
  }

  .cmd-report-kind,
  .cmd-choice {
    max-width: none;
  }

  .cmd-choice-face {
    min-height: 48px;
    font-size: 15px;
  }

  .cmd-report-actions .btn {
    width: 100%;
    min-height: 48px;
  }

  .cmd-report-row {
    padding: 12px 16px;
  }

  .cmd-report-mine > .queue-head,
  .cmd-report-skel {
    padding: 16px;
  }

  /* 위에 고정된 56px 막대 밑으로 성공 줄이 숨지 않게 한다 */
  .cmd-report-status {
    scroll-margin-top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-choice-face,
  .cmd-report-count {
    transition: none;
  }
}

/* ═══ 기준정보 AI 초안 ═══
   문서 한 편에서 AI가 칸마다 근거 문장을 붙여 낸 초안. [기준정보에 넣기] 전에는 기준정보가 아니다.
   그래서 점선이다(DESIGN 선 규칙: 점선 border는 미확인 카드·chip). 면을 칠하지 않아 확정 값보다 한 단 물러나 보인다.
   새 색·새 모션은 없다. 코발트도 늘리지 않는다([기준정보에 넣기]는 보조, [넣지 않기]는 quiet). */

.cmd-baseline-actions {
  align-items: center;
}

.cmd-baseline-actions .cmd-baseline-tally {
  margin: 0;
}

/* 초안 받기·넣기·넣지 않기의 결과 줄. 비어 있으면 자리를 차지하지 않는다(.queue-action-status:empty) */
.cmd-baseline > .cmd-draft-result {
  margin: 0;
}

.cmd-draft {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 16px;
  border: 1px dashed var(--lm-border);
  border-radius: var(--lm-radius);
  background: transparent;
}

.cmd-draft > p {
  margin: 0;
}

.cmd-draft-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.cmd-draft-when {
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cmd-draft .cmd-quote {
  margin: 0;
}

.cmd-draft-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--lm-warning-text);
  font-size: 13.5px;
  line-height: 1.55;
}

.cmd-draft-note .lm-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.cmd-draft-actions {
  justify-content: flex-start;
  gap: 8px;
}

/* 창 안의 안내 두 줄: 자료실이 비었을 때, 문서를 읽는 동안 */
.cmd-draft-empty,
.cmd-draft-wait {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.cmd-draft-empty .lm-icon,
.cmd-draft-wait .lm-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

@media (max-width: 780px) {
  .cmd-draft {
    padding: 12px;
  }
}

/* 작업 줄의 기준정보 다시 넣기 실패. 알림 줄은 보이지 않으므로 버튼 옆에 글자로 적는다 */
.cmd-wl-error {
  color: var(--lm-danger);
  font-size: 13.5px;
}

/* ── 초대와 나가기 ──
   받은 초대: 업무 공간 만들기 화면(오른쪽 칸 위)과 함께 쓰는 사람 화면(표 위)에 같은 줄 모양으로 놓는다.
   나가기: 표 아래 헤어라인 한 줄 뒤에 둔다. 위험 동작이지만 화면에서는 보통 버튼이고, 확인 창의 버튼만 danger다. */

.cmd-onboard-side {
  display: grid;
  gap: 16px;
}

.cmd-invite-inbox {
  display: grid;
  gap: 12px;
}

.cmd-invite-inbox:not(.panel) {
  padding: 16px 20px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

/* 패널 제목은 램프의 Title(18px/700)이다. 옆 가입 폼 제목(.cmd-onboard-form h2)과 같다. 16px는 램프 밖이었다(2026-09-29) */
.cmd-invite-inbox h2 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
}

.cmd-invite-inbox.is-onboard {
  padding: 24px;
}

.cmd-invite-inbox > .lm-field-help {
  margin: 0;
}

.cmd-invite-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmd-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--lm-border);
}

.cmd-invite-row:last-child {
  border-bottom: 1px solid var(--lm-border);
}

.cmd-invite-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cmd-invite-copy strong {
  overflow: hidden;
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-invite-copy > span {
  color: var(--lm-text);
  font-size: 13.5px;
}

.cmd-invite-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.cmd-invite-row > .btn.quiet:last-child {
  margin-right: -12px;
}

.cmd-member-invite td {
  color: var(--lm-text-muted);
}

.cmd-leave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--lm-border);
}

.cmd-leave-copy h2 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 700;
}

.cmd-leave-copy p {
  max-width: 64ch;
  margin: 4px 0 0;
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.6;
}

.cmd-leave-copy .cmd-leave-why {
  color: var(--lm-text-strong);
  font-weight: 650;
}

@media (max-width: 640px) {
  .cmd-members .lm-page-header {
    margin-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .cmd-invite-row,
  .cmd-leave {
    flex-direction: column;
    align-items: stretch;
  }

  .cmd-invite-actions {
    justify-content: flex-end;
  }
}

/* 일 목록: 밴드에서 온 거르기 안내, 거른 목록이 빈 줄, 빈 목록일 때 머리의 주 버튼 물리기
   (빈 목록의 시작 자리에 같은 코발트 주 버튼이 있다. 한 화면에 주 행동은 하나다) */
.cmd-view-note {
  margin: 8px 0 0;
  color: var(--lm-text);
  font-size: 13.5px;
  font-weight: 650;
}

.cmd-view-note a {
  margin-left: 4px;
  color: var(--lm-primary);
}

.cmd-case-table td.cmd-case-none {
  padding: 24px 16px;
  color: var(--lm-text);
  text-align: center;
}

.cmd-cases[data-state="empty"] #caseFilter .btn.primary {
  display: none;
}

/* 데스크 머리: 좁은 화면에서는 여백만 줄인다. 예전에는 점검표와 [브리프 숨기기]를 제목 아래 한 줄로 내렸는데
   (390px에서 머리가 30px 밖으로 넘쳤다, 2026-09-27), 점검표를 뺀 뒤(2026-09-29)에는 단추 하나라 제목 옆에 서고,
   제목이 길면 머리의 flex-wrap이 단추를 다음 줄로 보낸다. 한 줄을 통째로 비워 두지 않는다 */
@media (max-width: 640px) {
  .cmd-chat-top {
    padding: 12px 16px;
  }

  /* 좁은 화면에서는 대화·곁패널이 한 기둥으로 서고 화면 전체가 스크롤한다.
     100dvh 틀 안에서 둘이 높이를 나누면 대화가 스크롤 막대만 남기고 눌렸다 */
  .cmd-chat {
    height: auto;
    min-height: 100dvh;
  }

  .cmd-chat-body {
    flex: none;
  }

  .cmd-chat-thread {
    flex: none;
    min-height: 36vh;
    overflow-y: visible;
    padding: 16px 16px 8px;
  }

  .cmd-chat-aside {
    overflow-y: visible;
  }

  /* 브리프는 한 줄에 칸 하나다. 두 열(151px)로 두면 칸 이름이 두세 줄로 쪼개졌다(2026-09-28 점검) */
  .cmd-chat-aside .cmd-ledger-body {
    display: block;
  }

  .cmd-chat-aside .cmd-dim + .cmd-dim {
    margin-top: 4px;
    border-top: 1px solid var(--lm-hairline);
  }

  .cmd-chat > .cmd-workline {
    padding: 6px 16px;
  }
}

/* ── 좁은 화면(실제 모델 데이터로 390px을 걸어 보고 찾음, 2026-09-27) ──
   일 목록: 고정 배치 표라 칸 폭 합(688px)이 화면보다 넓으면 폭을 정하지 않은 제목 칸이 0이 되어 사라졌다.
   좁은 화면에서는 유형·연 날을 빼고 표가 가로로 밀리게 해 제목에 자리를 남긴다.
   기준정보·일 목록 머리: 수치 줄과 단추가 한 줄에 서다 화면 밖으로 밀렸다. 줄을 바꾼다. */
/* 제목 칸은 폭을 정하지 않아 나머지 칸 합(688px)을 뺀 만큼만 받는다. 본문이 그보다 좁은 폭(721~1160px 일부)에서
   제목이 0이 되었다. 구간마다 규칙을 두지 않고 표에 최소 폭을 줘 제목에 190px 넘게 남긴다. 좁으면 표 상자가 가로로 밀린다 */
.cmd-case-table {
  min-width: 880px;
}

@media (max-width: 720px) {
  .cmd-case-table {
    min-width: 700px;
  }

  .cmd-case-table th:nth-child(2),
  .cmd-case-table td:nth-child(2),
  .cmd-case-table th:nth-child(6),
  .cmd-case-table td:nth-child(6) {
    display: none;
  }

  .cmd-baseline-actions,
  .cmd-cases #caseFilter {
    flex-wrap: wrap;
    min-width: 0;
  }

  /* 셸의 .lm-page-actions는 flex: 0 0 auto라 줄어들지 않아 상자가 내용 폭(430px) 그대로 남아 390px 화면을
     446px로 넓혔다(2026-09-28 점검). 머리가 세로로 쌓이는 폭에서는 한 줄을 다 쓰고, 단추는 수치 아래 왼쪽에 선다 */
  .cmd-baseline-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .cmd-baseline-actions .cmd-baseline-tally {
    flex: 1 1 100%;
  }

  /* 머리가 세로로 쌓이면 거르기 줄은 제 내용 폭(max-content)으로 서서 화면 밖으로 나갔다. 부모 폭에 묶는다 */
  .cmd-cases #caseFilter {
    max-width: 100%;
    justify-content: flex-start;
  }
}

/* 표 머리의 화면 읽기 전용 글자(lm-sr-only, position:absolute)가 가로로 밀리는 표 밖으로 나가 쪽 전체를 넓혔다.
   표 상자를 기준 틀로 삼아 그 안에 가둔다(참모 화면에만 싣는 규칙이다) */
.lm-table-wrap {
  position: relative;
}

/* 결심 화면: 이 일의 결과 줄. 양식 아래 헤어라인 한 줄 뒤에 두고, 단추는 보조다(주 행동은 결심 기록 하나) */
.cmd-dec-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--lm-hairline);
}

.cmd-dec-result-line {
  margin: 0;
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.6;
}

.cmd-dec-result-line strong {
  color: var(--lm-text-strong);
  font-weight: 700;
}

@media (max-width: 640px) {
  .cmd-dec-result {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 가입 신청: 승인·반려 결과 줄. 성공 톤 글자와 아이콘, 면은 칠하지 않는다 */
.cmd-signup-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--lm-success-text);
  font-size: 13.5px;
  font-weight: 650;
}

.cmd-signup-done .lm-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* 함께 쓰는 사람: 받은 초대 상자와 구성원 표 사이를 띄운다(실제 크롬에서 두 상자가 붙어 보였다) */
.cmd-members > .cmd-invite-inbox {
  margin-bottom: 16px;
}

/* 좁은 화면과 터치 화면에서는 단추가 손가락 크기(44px) 이상이다. 넓은 화면의 36px 보조 단추([보기]·[적기]·[고치기])가
   휴대폰에서 누르기 어려웠다(실제 크롬 390px에서 잼). 641px 이상 태블릿(pointer: coarse)도 같다(2026-09-29).
   참모 화면에만 싣는 규칙이다 */
@media (max-width: 640px), (pointer: coarse) {
  #main .btn {
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-28 점검 반영 — 로딩·레일·표·방책 비교(좁은 화면)·누르는 자리·눌림
   공용 셸 파일(lm-shell.css·lm-admin.css·lm-foundation.css)은 장병 PoC와 함께 쓰므로 고치지 않는다.
   이 파일은 참모 화면(public/command/*.html)만 싣는다. 여기서 덮는다.
   ════════════════════════════════════════════════════════════════ */

/* ── 로딩 스켈레톤 ──
   .lm-skel-stack에는 배치 규칙이 없어 안의 span 스켈레톤이 0×0으로 그려졌고, 업무현황·대화·기준정보·조치 계획·
   자료실·결심 화면의 로딩 상태가 빈 화면이었다(2026-09-28 점검). 격자로 세워 한 줄씩 폭을 다 쓰게 한다 */
.lm-skel-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.cmd-chat > .lm-skel-stack {
  padding: 24px;
}

/* ── 레일: 참모 메뉴를 칠하기 전 ──
   셸(lm-shell.js)은 먼저 PoC 관리자 메뉴(설문 관리·집계·계정…)를 그리고, 참모 메뉴는 /api/command/me가 온 뒤
   cmd-shell.js가 덮어 그린다. 느린 망에서는 그 사이 관리자 메뉴가 떴다. 참모 화면에서는 관리자 메뉴 묶음을
   보이지 않게 한다. 그 자리의 레일 스켈레톤은 cmd-shell.js가 스크립트가 도는 즉시 그린다(guardRail) */
.app-nav-scroll > .app-navgroup:has(> .app-navitem[data-nav-key]) {
  display: none;
}

/* ── 표: 가로 스크롤 되살리기 ──
   셸의 .panel.is-flush { overflow: hidden }이 .lm-table-wrap { overflow-x: auto }를 덮어 좁은 창에서
   열과 조작 단추가 잘린 채 밀리지도 않았다(대화 목록·함께 쓰는 사람·자료실, 2026-09-28 점검) */
#main .lm-table-wrap.panel.is-flush {
  overflow-x: auto;
}

/* ── 좁은 화면: 표를 줄 목록으로 ──
   640px 이하에서는 표를 줄 목록으로 바꾼다. 가로로 밀어야 [대화 이어가기]·[권한 바꾸기]·[내리기]에 닿는 표는
   휴대전화에서 쓸 수 없다. 머리 줄은 숨기고, 줄마다 무엇인지(제목·이름)를 먼저, 조작을 마지막에 둔다 */
@media (max-width: 640px) {
  .cmd-case-table,
  .cmd-member-table,
  .cmd-library-table {
    display: block;
    min-width: 0;
  }

  .cmd-case-table thead,
  .cmd-member-table thead,
  .cmd-library-table thead,
  .cmd-library-table colgroup {
    display: none;
  }

  .cmd-case-table tbody,
  .cmd-member-table tbody,
  .cmd-library-table tbody {
    display: block;
  }

  .cmd-case-table tbody tr,
  .cmd-member-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 12px 16px;
  }

  .cmd-library-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 12px 16px;
  }

  .cmd-case-table tbody tr + tr,
  .cmd-member-table tbody tr + tr,
  .cmd-library-table tbody tr + tr {
    border-top: 1px solid var(--lm-hairline);
  }

  .cmd-case-table tbody td,
  .cmd-member-table tbody td,
  .cmd-library-table tbody td {
    display: block;
    height: auto;
    min-width: 0;
    padding: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    text-align: start;
  }

  /* 줄 전체가 한 덩어리다. 칸마다 따로 칠하면 칸 사이 틈이 줄무늬로 보인다 */
  .cmd-case-table tbody tr:hover > td,
  .cmd-member-table tbody tr:hover > td,
  .cmd-library-table tbody tr:hover > td {
    background: transparent;
  }

  /* 대화 목록: 제목 · 급한 정도 / 이 대화에서 한 것 / [대화 이어가기] */
  .cmd-case-table tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: 15px;
    line-height: 1.45;
  }

  .cmd-case-table tbody td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  .cmd-case-table tbody td:nth-child(4),
  .cmd-case-table tbody td:nth-child(7),
  .cmd-case-table tbody td.cmd-case-none {
    grid-column: 1 / -1;
  }

  .cmd-case-table tbody td:nth-child(2),
  .cmd-case-table tbody td:nth-child(5),
  .cmd-case-table tbody td:nth-child(6) {
    display: none;
  }

  .cmd-case-table tbody td.cmd-case-none {
    padding: 12px 0;
    text-align: center;
  }

  /* 함께 쓰는 사람: 계정 · 권한 / 직책 / 부대 / 조작 */
  .cmd-member-table tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    color: var(--lm-text-strong);
    font-weight: 650;
  }

  .cmd-member-table tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .cmd-member-table tbody td:nth-child(n + 3) {
    grid-column: 1 / -1;
  }

  .cmd-member-table tbody td:nth-child(4) {
    color: var(--lm-text-muted);
    font-size: 13.5px;
  }

  .cmd-member-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .cmd-member-actions > .btn.quiet:first-child {
    margin-left: -12px;
  }

  .cmd-member-actions > .btn.quiet:last-child {
    margin-right: 0;
  }

  /* 자료실: 이름(과 첫 줄) / 종류 · 글자 수 · 넣은 날 · [내리기]. 넣은 대화·인용한 칸 수는 넓은 화면에서 본다 */
  .cmd-library-table tbody td:nth-child(1),
  .cmd-library-table tbody td[colspan] {
    flex: 1 1 100%;
  }

  .cmd-library-table tbody td:nth-child(4),
  .cmd-library-table tbody td:nth-child(5) {
    display: none;
  }

  .cmd-library-table tbody td:nth-child(3)::after {
    content: "자";
  }

  .cmd-library-table tbody td:nth-child(3),
  .cmd-library-table tbody td:nth-child(6) {
    color: var(--lm-text-muted);
    font-size: 13.5px;
  }

  .cmd-library-table tbody td.cmd-lib-actions {
    margin-left: auto;
  }
}

/* ── 방책 비교표: 좁은 화면 ──
   390px에서 방책 열이 47px(320px에서 24px)로 눌려 글자가 한두 자씩 세로로 끊겼다(WCAG 1.4.10, 2026-09-28 점검).
   640px 이하에서는 기준마다 한 덩어리로 세우고, 그 안에 방책마다 이름·판정·한 줄을 쌓는다.
   세로가 기준이라는 이 표의 요점(한 기준 안에서 방책을 견준다)은 그대로 지킨다 */
.cmd-coa-cellhead {
  display: contents;
}

@media (max-width: 640px) {
  .cmd-coa-table,
  .cmd-coa-table tbody,
  .cmd-coa-table tbody tr {
    display: block;
  }

  .cmd-coa-table thead {
    display: none;
  }

  .cmd-coa-table tbody tr {
    padding: 12px 16px 16px;
  }

  .cmd-coa-table tbody tr + tr {
    border-top: 1px solid var(--lm-hairline);
  }

  /* 표 칸의 min-height(48px)는 블록이 되면 실제로 먹는다. 기준 이름 한 줄 아래 빈 줄이 생기지 않게 푼다 */
  .cmd-coa-table tbody th.cmd-coa-criterion {
    display: block;
    width: auto;
    min-height: 0;
    padding: 4px 0;
    background: transparent;
  }

  .cmd-coa-table tbody td.cmd-coa-cell {
    display: block;
    min-width: 0;
    min-height: 0;
    margin: 0 -12px;
    padding: 10px 12px;
    border-radius: var(--lm-radius-inner);
  }

  .cmd-coa-table tbody td.cmd-coa-cell + td.cmd-coa-cell {
    border-top: 1px solid var(--lm-hairline);
    border-radius: 0;
  }

  .cmd-coa-cellhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .cmd-coa-cellname {
    display: block;
    min-width: 0;
    color: var(--lm-text-strong);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
  }

  .cmd-coa-detail {
    margin-top: 4px;
  }
}

/* ── 누르는 자리: 휴대전화·터치 ──
   손가락으로 누르는 자리는 44px를 지킨다. 390px에서 도구 단추·작업 줄 도구가 36px였다(2026-09-28 점검).
   도구 단추는 2026-09-29부터 어디서나 44px라(부품 정의) 여기서 올리지 않는다. 실패 줄 단추만 넓은 창에서 36px다.
   '대화로 돌아가기'와 작업 줄 제목 링크는 2026-09-29에 뺐다(도구 화면의 이동 길은 레일 또는 작업 줄 도구 하나).
   곁카드 목록 링크(36px)·자료실 이름 단추(28px)·자료 넣는 방법 구분 단추(36px)도 390px에서 44px에 못 미쳤다(2026-09-29 재측정).
   이름 단추는 말줄임을 지키려고 블록 그대로 두고 위아래 여백으로 높이를 채운다(10 + 24 + 10).
   업무현황 줄 제목 링크(22px)는 같은 줄 끝의 44px 다음 행동 링크와 가는 곳이 같아 따로 올리지 않는다(같은 일을 하는 44px 조작이 있다).
   조치 계획 알림 줄의 '문서에서 보기'는 문장 안 링크라 줄 높이를 따른다 */
@media (max-width: 640px), (pointer: coarse) {
  .cmd-chat-fail .btn,
  .cmd-side-missing li a,
  .cmd-side-reviews li a,
  .cmd-segment span {
    min-height: 44px;
  }

  .cmd-link-button {
    min-height: 44px;
    padding-block: 10px;
    line-height: 24px;
  }
}

/* ── 눌림 ──
   링크 모양의 단추(도구·권함·다음 행동·작업 줄 도구)도 버튼처럼 눌린다. 정본(DESIGN.md Buttons·모션 3종)대로
   translateY(1px)를 전환 없이 바로 주고, 면은 한 단계 낮춘다. 떼면 면만 160ms에 돌아온다.
   브라우저 기본 탭 하이라이트(검은 반투명 면)는 끄고 이 눌림이 신호를 맡는다 */
a.cmd-toolbtn,
.cmd-line-next,
.cmd-line-title,
.cmd-cell,
.cmd-doc-item,
.cmd-coa-cell-evidence,
a.lm-band-cell,
.cmd-link-button,
.app-navitem {
  -webkit-tap-highlight-color: transparent;
}

/* 도구 단추(.cmd-toolbtn)의 눌림은 부품 정의에 함께 있다 */

.cmd-line-next:active {
  transform: translateY(1px);
  color: var(--lm-primary-pressed);
  transition-duration: 0s;
}

a.cmd-line-title:active,
.cmd-link-button:active {
  color: var(--lm-primary-pressed);
  transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  a.cmd-line-title,
  .cmd-line-next {
    transition: none;
  }
}

/* 고대비(forced-colors)에서는 면 색이 사라진다. 지금 보고 있는 도구와 레일의 현재 칸을 선으로도 가른다 */
@media (forced-colors: active) {
  .app-navitem[aria-current="page"],
  .cmd-toolbtn[aria-current="page"] {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }
}

/* 대화 목록: 거르기 줄과 표 사이가 0px로 붙어 있었다(2026-09-28 점검). 머리와 목록 사이를 16px 띄운다 */
.cmd-cases > .lm-table-wrap {
  margin-top: 16px;
}