/* M02 일위대가 실무자료(PLAN 324-4) — 좌측 판 · 본 화면(호표 표 · 줄 맞춤) · 색은 공용 토큰(밝음 · 어두움 같이) */
.m02-hopyo-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.m02-hopyo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
}

.m02-hopyo__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}

.m02-hopyo__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.m02-hopyo__warn {
  margin: 0;
  color: var(--color-warning);
  font-size: var(--text-body-sm);
  white-space: pre-wrap;
}

.m02-hopyo__search {
  max-width: 320px;
}

.m02-hopyo__row {
  cursor: pointer;
}

.m02-hopyo__row:hover {
  background: var(--color-mist-violet);
}

.m02-hopyo__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 실무자료 표 — 한글은 낱말 단위로만 줄바꿈(두세 글자마다 안 갈라짐) · 너무 긴 낱말만 쪼갬 */
.m02-hopyo__table :is(th, td) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 확인 창 줄 표(338 · 339) — 체크 · 갈래 · 수량 · 단위 · 상태 = 줄바꿈 없음(폭 = 글 폭) · 단추 = 세로로 쌓아 좁게 ·
   품명 · 규격 · 우리 로직 · 옵션 · 품 비교가 남는 폭 · 칸 여백 좁힘(공용 표보다 앞서게 두 갈래 이름) */
.m02-hopyo__table.m02-hopyo__lines :is(th, td) {
  padding: var(--spacing-8);
}

.m02-hopyo__table.m02-hopyo__lines
  :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(5), :nth-child(6), :nth-child(7)) {
  white-space: nowrap;
}

/* 품명 · 규격 — 낱말 두셋은 한 줄에 */
.m02-hopyo__table.m02-hopyo__lines td:nth-child(3),
.m02-hopyo-ledger__table td:nth-child(1) {
  min-width: 7em;
}

.m02-hopyo__table.m02-hopyo__lines td:nth-child(4),
.m02-hopyo-ledger__table td:nth-child(2) {
  min-width: 6em;
}

/* 옵션 · 품 비교 — 항목마다 한 줄(글의 줄바꿈 그대로) */
.m02-hopyo__table.m02-hopyo__lines td:is(:nth-child(9), :nth-child(10)) {
  min-width: 9em;
  white-space: pre-line;
}

/* 단추 칸 — 단추 · 넣음/뺌을 세로로 쌓아 칸 폭 = 가장 긴 단추 */
.m02-hopyo__table.m02-hopyo__lines td.m02-hopyo__acts {
  width: 1%;
}

.m02-hopyo__lines .m02-hopyo__acts > * {
  display: flex;
  width: 100%;
  white-space: nowrap;
}

.m02-hopyo__lines .m02-hopyo__acts > * + * {
  margin: var(--spacing-4) 0 0;
}

.m02-hopyo__line.is-out {
  color: var(--color-text-muted);
}

.m02-hopyo__state {
  display: inline-block;
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  white-space: nowrap;
}

/* 상태 색(338) — 맞음 초록 · 별칭 파랑 · 다른 점 주황 · 후보 회색(테두리 기본) · 없음 빨강 */
.m02-hopyo__state.is-맞음,
.m02-hopyo__state.is-호표 {
  border-color: var(--color-success);
  color: var(--color-success);
}

.m02-hopyo__state.is-별칭 {
  border-color: var(--color-info);
  color: var(--color-info);
}

.m02-hopyo__state.is-다른점 {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.m02-hopyo__state.is-후보,
.m02-hopyo__state.is-뺌,
.m02-hopyo__state.is-노임 {
  color: var(--color-text-secondary);
}

.m02-hopyo__state.is-없음 {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* 우리 로직 칸 — 대상 여럿 = 칸 안 여러 줄(이름 · 키 · 몫 · 배 칸 · [옵션]) */
.m02-hopyo__parts {
  min-width: 11em;
}

.m02-hopyo__part {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
}

.m02-hopyo__part + .m02-hopyo__part {
  margin-top: var(--spacing-4);
}

.m02-hopyo__whole {
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.m02-hopyo__times {
  width: 6em;
}

.m02-hopyo__acts {
  white-space: nowrap;
}

.m02-hopyo__acts > button + button {
  margin-left: var(--spacing-4);
}

.m02-hopyo__block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.m02-hopyo__block h4 {
  margin: 0;
  font-size: var(--text-body-sm);
}

.m02-hopyo__built {
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}

/* 고르기 창 머리 — 제목이 두 줄이어도 [닫기] 글이 안 갈라지고 안 줄어듦 */
.m02-hopyo__choose .ui-modal__top > .ui-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.m02-hopyo__cands {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
}

.m02-hopyo__cand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
}

/* 별칭 장부(338) — 위 층 줄 = 회색 읽기만 · 고친 줄 = 왼쪽 띠 */
.m02-hopyo-ledger__row.is-upper {
  color: var(--color-text-muted);
}

.m02-hopyo-ledger__row.is-edited > td:first-child {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

/* 엑셀 보기 창(329) — 왼쪽 읽기 전용 시트 · 오른쪽 호표 목록 · 불러오기 결과 */
.m02-hopyo-sheet__dialog > .ui-modal__body {
  overflow: hidden;
}

.m02-hopyo-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--spacing-8);
  flex: 1;
  min-height: 0;
}

.m02-hopyo-sheet__grid {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.m02-hopyo-sheet__side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-height: 0;
}

.m02-hopyo-sheet__list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.m02-hopyo-sheet__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-8);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.m02-hopyo-sheet__item:hover {
  background: var(--color-surface);
}

.m02-hopyo-sheet__item.is-current {
  border-left-color: var(--color-accent);
  background: var(--color-mist-violet);
}

.m02-hopyo-sheet__no {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.m02-hopyo-sheet__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m02-hopyo-sheet__result {
  max-height: 40%;
  overflow: auto;
}

.m02-hopyo-sheet__result:empty {
  display: none;
}

/* 고르기 창 근거(330) — 후보 꼬리표 · 엑셀 근거 줄 */
.m02-hopyo__basis {
  margin-left: var(--spacing-8);
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.m02-hopyo__basis.is-ok {
  border-color: var(--color-success);
  color: var(--color-success);
}

.m02-hopyo__source {
  padding-bottom: var(--spacing-8);
  border-bottom: 1px solid var(--color-border);
}