/* 기업현황 '구성원' 탭(make-deck.html #companyMembersPanel, assets/dream-company-members.js)과 '회사 한눈에'의 구성원 줄.
   기업현황의 다른 패널(지원자격 정보 패널·회사 한눈에)과 같은 틀·간격·토큰을 쓴다. 새 색은 없다(색 정본 DESIGN.md).
   gen1 화면에서는 토큰 파일이 빠질 수 있어 var(--dv-*) 에 토큰과 같은 값을 폴백으로 둔다. 단추는 기존 .btn 을 그대로 쓴다. */

.company-members-panel {
  display: grid;
  gap: 18px;
  padding: 26px 28px;
}

.company-members-panel[hidden] {
  display: none;
}

.company-members-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.company-members-head > div {
  flex: 1 1 240px;
  min-width: 0;
}

.company-members-head h2 {
  margin: 0 0 4px;
}

.company-members-head p {
  margin: 0;
}

.company-members-status {
  margin: 0;
  color: var(--dv-text-muted, #50605a);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
}

.company-members-status:empty {
  display: none;
}

.company-members-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 승인을 기다리는 본인에게만 보인다. 주의 먹색 면은 짝 경계와 함께 쓴다. */
.company-members-waiting {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--dv-warning-border, #b6bcb9);
  border-radius: 8px;
  background: var(--dv-warning-surface, #f0f3f2);
  color: var(--dv-warning-text, #303734);
  font-size: 14px;
  line-height: 1.6;
}

.company-members-waiting[hidden] {
  display: none;
}

.company-members-waiting strong {
  color: var(--dv-text-strong, #0e1914);
  font-size: 15px;
}

/* 초청 만들기와 만든 초청은 패널 안의 한 단계 묶음이다(카드 안 카드는 이 한 겹까지). */
.company-invite-form,
.company-invite-created {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--dv-border-strong, #5c6b65);
  border-radius: 8px;
  background: var(--dv-bg-surface, #ffffff);
}

.company-invite-form[hidden],
.company-invite-created[hidden] {
  display: none;
}

.company-invite-form > strong,
.company-invite-created > strong {
  color: var(--dv-text-strong, #0e1914);
  font-size: 16px;
}

.company-invite-created > span {
  color: var(--dv-text-muted, #50605a);
  font-size: 13px;
  line-height: 1.6;
}

.company-invite-kind {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.company-invite-kind legend {
  margin-bottom: 4px;
  padding: 0;
  color: var(--dv-text-strong, #0e1914);
  font-size: 13px;
  font-weight: 700;
}

.company-invite-kind label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--dv-text, #283530);
  font-size: 15px;
  cursor: pointer;
}

.company-invite-kind input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--dv-primary, #0d3021);
}

.company-invite-hint {
  margin: 0;
  color: var(--dv-text-muted, #50605a);
  font-size: 13px;
  line-height: 1.6;
}

.company-invite-fields,
.company-member-edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px 16px;
}

.company-invite-field,
.company-member-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--dv-text-strong, #0e1914);
  font-size: 13px;
  font-weight: 700;
}

.company-invite-field[hidden] {
  display: none;
}

/* 16px 미만이면 iOS 가 입력칸을 확대한다. */
.company-invite-field :is(input, select),
.company-member-field :is(input, select) {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--dv-border-strong, #5c6b65);
  border-radius: 8px;
  background: var(--dv-bg-surface, #ffffff);
  color: var(--dv-text-strong, #0e1914);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
}

.company-invite-error {
  margin: 0;
  color: var(--dv-danger, #b42318);
  font-size: 13px;
  font-weight: 650;
}

.company-invite-actions,
.company-member-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.company-invite-created textarea {
  width: 100%;
  min-height: 132px;
  padding: 10px 12px;
  border: 1px solid var(--dv-border, #b2c2bb);
  border-radius: 8px;
  background: var(--dv-bg-page, #f4f9f7);
  color: var(--dv-text-strong, #0e1914);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
  overflow-wrap: anywhere;
}

/* 명부 표. 칸 경계는 위쪽 1px 선 하나로 나눈다. */
.company-members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.company-members-table[hidden] {
  display: none;
}

.company-members-table caption {
  padding: 0 0 8px;
  color: var(--dv-text-strong, #0e1914);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.company-members-table th,
.company-members-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--dv-border, #b2c2bb);
  color: var(--dv-text, #283530);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.company-members-table thead th {
  padding-top: 0;
  border-top: 0;
  color: var(--dv-text-muted, #50605a);
  font-size: 12px;
  font-weight: 700;
}

.company-members-group th {
  padding-top: 16px;
  color: var(--dv-text-strong, #0e1914);
  font-size: 13px;
  font-weight: 700;
}

.company-member-name strong {
  color: var(--dv-text-strong, #0e1914);
  font-weight: 700;
}

.company-member-self {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--dv-selected-border, #93a49c);
  border-radius: 999px;
  background: var(--dv-bg-selected, #e4e9e6);
  color: var(--dv-text-strong, #0e1914);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.company-member-email,
.company-member-when {
  display: block;
  color: var(--dv-text-muted, #50605a);
  font-size: 12.5px;
}

.company-member-state {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--dv-border, #b2c2bb);
  border-radius: 999px;
  color: var(--dv-text-strong, #0e1914);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.company-member-state.is-pending {
  border-color: var(--dv-warning-border, #b6bcb9);
  background: var(--dv-warning-surface, #f0f3f2);
  color: var(--dv-warning-text, #303734);
}

.company-member-actions {
  text-align: right;
  white-space: nowrap;
}

.company-member-actions .btn + .btn {
  margin-left: 6px;
}

.company-member-detail td {
  padding-top: 0;
  border-top: 0;
}

.company-member-edit,
.company-member-confirm {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--dv-border-strong, #5c6b65);
  border-radius: 8px;
  background: var(--dv-bg-surface, #ffffff);
  color: var(--dv-text, #283530);
  font-size: 14px;
  line-height: 1.6;
  white-space: normal;
}

.company-member-note {
  color: var(--dv-text-muted, #50605a);
  font-size: 13px;
}

.company-members-panel .btn.company-member-danger {
  border-color: var(--dv-danger-border, #f2b8b1);
  background: var(--dv-bg-surface, #ffffff);
  color: var(--dv-danger, #b42318);
}

/* 열린 초청. 대표·관리자에게만, 하나라도 있을 때만 보인다. */
.company-invites {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--dv-border, #b2c2bb);
}

.company-invites[hidden] {
  display: none;
}

.company-invites > strong {
  color: var(--dv-text-strong, #0e1914);
  font-size: 14px;
}

.company-invite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--dv-border, #b2c2bb);
}

.company-invite-row:first-child {
  border-top: 0;
}

.company-invite-what {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--dv-text-strong, #0e1914);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.company-invite-meta {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--dv-text-muted, #50605a);
  font-size: 13px;
}

/* '회사 한눈에'의 구성원 줄 — 바로 아래 '아직 못 채운 항목' 줄과 같은 구분선을 쓴다. */
.company-identity-summary-members {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--dv-border, #b2c2bb);
}

.company-identity-summary-members[hidden] {
  display: none;
}

.company-identity-summary-members > span {
  color: var(--dv-text-strong, #0e1914);
  font-size: 14.5px;
  font-weight: 700;
}

/* 좁은 화면: 표의 줄을 한 사람씩 세로로 쌓고 칸 이름을 앞에 붙인다(390px 가로 넘침 없음). */
@media (max-width: 720px) {
  .company-members-panel {
    padding: 18px 16px;
  }

  .company-members-table,
  .company-members-table tbody,
  .company-members-table tr,
  .company-members-table th,
  .company-members-table td {
    display: block;
  }

  .company-members-table caption {
    display: block;
  }

  .company-members-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .company-members-table tr {
    padding: 12px 0;
    border-top: 1px solid var(--dv-border, #b2c2bb);
  }

  .company-members-table th,
  .company-members-table td {
    padding: 2px 0;
    border-top: 0;
  }

  .company-members-table td[data-label]::before {
    content: attr(data-label) " · ";
    color: var(--dv-text-muted, #50605a);
    font-size: 12px;
    font-weight: 700;
  }

  .company-members-table tr.company-member-detail {
    padding-top: 0;
    border-top: 0;
  }

  .company-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    text-align: left;
    white-space: normal;
  }

  .company-member-actions:empty {
    display: none;
  }

  .company-member-actions .btn + .btn {
    margin-left: 0;
  }

  .company-invite-actions .btn,
  .company-member-detail-actions .btn {
    flex: 1 1 140px;
  }
}