/* XERKONIX — 팀 카드 컴포넌트 (단일 소스).
   쓰는 곳: / (홈) · /ax/ (AX 랜딩). 데이터는 assets/js/team.js.
   페이지 인라인 <style> 에 팀 카드 규칙을 절대 다시 만들지 마라 — 여기만 고친다.

   [팔레트를 왜 여기서 리터럴로 들고 있나]
   홈은 --surface/--border/--text-muted, AX는 --surface-color/--border-color/--text-muted(의미가 다름)
   처럼 토큰 어휘가 서로 다르고, --text-muted 는 두 페이지에서 이름은 같은데 값이 다르다.
   페이지 토큰을 참조하면 바로 그 이유로 또 갈라진다. 그래서 컴포넌트가 자기 팔레트를
   TACTILE 값으로 직접 소유한다. 값은 홈의 기존 계산값과 동일 — 홈은 시각적 회귀 0.

   [TACTILE 규칙]
   정보 카드는 평면이다. 카테고리 색 액센트 바(::before) 금지 · 상태색은 상태에만 ·
   호버 리프트는 클릭 가능한 요소에만(팀 카드는 클릭 대상이 아니다). */

.team-grid {
  --tm-surface:      #FBFBFC;
  --tm-surface-2:    #EAEAEE;
  --tm-border:       #DBDBE0;
  --tm-border-soft:  rgba(172, 173, 183, .28);
  --tm-strong:       #232430;
  --tm-body:         #4A4B57;
  --tm-muted:        #686975;
  --tm-bullet:       #ACADB7;
  --tm-radius:       18px;
  --tm-avatar-inset: inset 3px 3px 8px rgba(146, 148, 166, .50), inset -2px -2px 6px #FFFFFF;
  --tm-mono:         'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* 다크 — data-theme 을 쓰는 페이지(홈)에서만 반응한다. */
:root[data-theme="dark"] .team-grid {
  --tm-surface:      #23242C;
  --tm-surface-2:    #2C2D37;
  --tm-border:       #373844;
  --tm-border-soft:  rgba(172, 173, 183, .15);
  --tm-strong:       #F1F1F4;
  --tm-body:         #B4B5BE;
  --tm-muted:        #93949D;
  --tm-avatar-inset: inset 4px 4px 10px rgba(0, 0, 0, .58), inset -2px -2px 6px rgba(255, 255, 255, .02);
}

/* OS 자동 다크는 홈에만. AX 페이지는 테마 토글도 prefers-color-scheme 대응도 없어
   항상 라이트로 렌더된다 — 여기서 AX 팀 카드만 어둡게 만들면 페이지가 반쪽이 된다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .team-grid[data-team-variant="home"] {
    --tm-surface:      #23242C;
    --tm-surface-2:    #2C2D37;
    --tm-border:       #373844;
    --tm-border-soft:  rgba(172, 173, 183, .15);
    --tm-strong:       #F1F1F4;
    --tm-body:         #B4B5BE;
    --tm-muted:        #93949D;
    --tm-avatar-inset: inset 4px 4px 10px rgba(0, 0, 0, .58), inset -2px -2px 6px rgba(255, 255, 255, .02);
  }
}

/* ── 카드 — 평면. 액센트 바 없음, 호버 리프트 없음. ───────────── */
.team-card {
  position: relative;
  padding: 24px;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-surface);
  overflow: hidden;
}

/* ── 인물 헤더 ─────────────────────────────────────────────── */
.team-person {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

/* 레인 라벨 — 무채. 카테고리별 색 칩이 아니다. */
.team-lane {
  grid-column: 1 / -1;
  color: var(--tm-muted);
  font-family: var(--tm-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--tm-surface-2);
  box-shadow: var(--tm-avatar-inset);
}
.team-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.team-name {
  margin: 0 0 4px;
  color: var(--tm-strong);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.team-title {
  margin: 0;
  color: var(--tm-body);
  font-size: 12.5px;
  line-height: 1.65;
}
.team-role-main { font-weight: 650; }
.team-role-sub {
  display: block;
  margin-top: 2px;
  color: var(--tm-muted);
  font-size: 11.5px;
}

/* ── 이력 불릿 ─────────────────────────────────────────────── */
.team-focus {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--tm-border-soft);
  list-style: none;
  display: grid;
  gap: 7px;
}
.team-focus li {
  position: relative;
  padding-left: 14px;
  color: var(--tm-muted);
  font-size: 12px;
  line-height: 1.65;
  word-break: keep-all;
}
.team-focus li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tm-bullet);
}

/* 하위 불릿 — 색 border-left 없음(무채 위계는 크기·농도로만) */
.team-subfocus {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.team-subfocus li { font-size: 11px; }
.team-subfocus li::before { width: 4px; height: 4px; top: 8px; background: var(--tm-border); }

/* ── 레이아웃 변형 — 페이지별 그리드는 정당한 차이라 유지한다.
   시각 언어(테두리·여백·타이포·호버)는 위에서 공유. ───────────── */

/* 홈 — 3컬럼, 리더십 카드는 한 행 전체에서 560px 중앙 정렬 */
.team-grid[data-team-variant="home"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.team-grid[data-team-variant="home"] .team-card:first-child {
  grid-column: 1 / -1;
  width: min(560px, 100%);
  justify-self: center;
}
@media (max-width: 880px) {
  .team-grid[data-team-variant="home"] { grid-template-columns: 1fr; }
}

/* AX — 12컬럼, 일반 카드 4칸(1/3), 리더십은 가운데 6칸 */
.team-grid[data-team-variant="ax"] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.team-grid[data-team-variant="ax"] > .team-card { grid-column: span 4; }
.team-grid[data-team-variant="ax"] > .team-card.c-leadership {
  grid-column: 4 / span 6;
  margin-inline: -25px;
}
@media (max-width: 1080px) {
  .team-grid[data-team-variant="ax"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .team-grid[data-team-variant="ax"] > .team-card.c-leadership { grid-column: 1 / -1; margin-inline: 0; }
}
@media (max-width: 768px) {
  .team-grid[data-team-variant="ax"] { grid-template-columns: 1fr; }
  .team-grid[data-team-variant="ax"] > .team-card,
  .team-grid[data-team-variant="ax"] > .team-card.c-leadership { grid-column: 1 / -1; margin-inline: 0; }
}