/* 공통 스타일 */
.staff__title { padding-bottom: var(--space-24); color: var(--color-text-default); font-size: var(--font-size-h1); font-weight: 700; line-height: var(--line-height-h1); }
.staff__title:not(:first-of-type) { margin-top: var(--space-80); }
.staff__list { --staff-item-height: var(--space-60); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; border: 0.5px solid var(--color-border-default); border-bottom: none; }
.staff__item { display: grid; grid-template-columns: 6px minmax(0, 1fr) 200px; gap: var(--space-12); align-items: center; padding-inline: var(--space-20); border-bottom: 0.5px solid var(--color-border-default); }
.staff__item.is-current { padding-left: var(--space-20); border-left: 3px solid var(--color-brand-accent-soft); background-color: #fdf0e8; }
.staff__gen { color: var(--color-text-muted); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.staff__name { color: var(--color-text-default); font-size: var(--font-size-h4); font-weight: 700; line-height: var(--line-height-h4); }
.staff__period { color: #8A8178; font-size: var(--font-size-body); line-height: var(--line-height-body); white-space: nowrap; }
.staff__item--associate::before, .staff__item--sister::before { width: 6px; height: 6px; border-radius: 50%; background-color: #C9C2B7; content: ""; }
.staff__item.is-current .staff__name { color: var(--color-brand-accent-soft); }
.staff__item.is-current .staff__period { font-weight: 700; }
.staff__badge { color: var(--color-brand-accent-soft); font-size: var(--font-size-body); font-weight: 700; line-height: var(--line-height-body); white-space: nowrap; }

/* Staff Pastor */
.staff__list--pastor { grid-template-rows: repeat(9, var(--space-100)); border-right: none; }
.staff__item--pastor { grid-template-columns: var(--space-80) minmax(0, 1fr) 200px; gap: var(--space-16); border-right: 0.5px solid var(--color-border-default); }
.staff__item--pastor.is-current { grid-template-columns: var(--space-60) minmax(0, 1fr) 160px auto; }
html[data-site-lang="ko"] .staff__list--pastor { grid-template-rows: repeat(9, var(--space-60)); }
html[data-site-lang="ko"] .staff__item--pastor { grid-template-columns: var(--space-60) minmax(0, 1fr) 200px; }
html[data-site-lang="ko"] .staff__item--pastor.is-current { grid-template-columns: var(--space-60) minmax(0, 1fr) 160px auto; }

/* Staff Associate */
.staff__list--associate { grid-template-rows: var(--staff-item-height); }
.staff__item--associate:first-child { border-right: 0.5px solid var(--color-border-default); }

/* Staff Sister */
.staff__list--sister { grid-template-rows: repeat(24, var(--staff-item-height)); }
.staff__item--sister:nth-child(-n+24) { border-right: 0.5px solid var(--color-border-default); }
.staff__item--sister.is-current { grid-template-columns: 6px minmax(0, 1fr) var(--space-180) auto; }
.staff__item--sister.is-current::before { background-color: var(--color-brand-accent-soft); }

@media (max-width: 1200px) {
  /* 공통 스타일 */
  .staff__title { padding-bottom: var(--space-8); }
  .staff__title:not(:first-of-type) { margin-top: var(--space-40); }
  .staff__list, html[data-site-lang="ko"] .staff__list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .staff__item { grid-template-columns: 5px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; gap: var(--space-8); padding: var(--space-16); }
  .staff__item--associate::before, .staff__item--sister::before { width: 5px; height: 5px; align-self: center; }
  .staff__gen { grid-column: 1; grid-row: 1; }
  .staff__name { grid-column: 2; grid-row: 1; }
  .staff__badge { grid-column: 3; grid-row: 1; align-self: center; font-weight: 400; }
  .staff__period, .staff__item.is-current .staff__period { grid-column: 1 / -1; grid-row: 2; font-weight: 400; }

  /* Staff Pastor */
  .staff__item--pastor { grid-template-columns: var(--space-80) minmax(0, 1fr) auto; }
  html[data-site-lang="ko"] .staff__item--pastor { grid-template-columns: var(--space-60) minmax(0, 1fr) auto; }
  .staff__item--pastor.is-current { grid-template-columns: var(--space-60) minmax(0, 1fr) var(--space-100) auto; } 

  /* Staff Associate */
  .staff__item--associate:first-child { border-right: none; }

  /* Staff Sister */
  .staff__item--sister:nth-child(-n+24) { border-right: none; }  
}