/* 직원소개 (team1) — 히어로는 history.css 의 .hx-* 를 그대로 쓰고, 여기서는 본문만 다룬다.
   기존 CSS가 html{font-size:62.5%} 라서 rem 대신 px 를 쓴다.
   인물 사진 원본이 작아서(110×160) 사진은 작게, 흑백으로 통일해 보여 준다. */

.tx :where(section, header, nav):not(.hx-hero) { /* 히어로의 위쪽 여백(경로 표시 위 간격)은 지우지 않는다 */
  margin: 0;
  padding: 0;
}

.tx :where(a) {
  text-decoration: none;
  color: inherit;
}

/* ───────── 히어로 ───────── */
.tx-hero {
  padding-bottom: 72px;
}

.tx-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 48px;
  align-items: end;
  margin-top: 56px;
}

.tx-hero .hx-eyebrow,
.tx-hero .hx-title,
.tx-hero .hx-lead,
.tx-nav {
  animation: tx-up 0.8s var(--hx-ease) backwards;
}

.tx-hero .hx-title { animation-delay: 0.07s; }
.tx-hero .hx-lead { animation-delay: 0.14s; }
.tx-nav { animation-delay: 0.22s; }

@keyframes tx-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.tx-nav__cap {
  padding-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.45);
}

.tx-jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s ease, padding 0.3s var(--hx-ease);
}

.tx-jump:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tx-jump b {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hx-accent);
}

.tx-jump b::after {
  content: "↓";
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.3s var(--hx-ease), color 0.2s ease;
}

.tx-jump:focus-visible {
  outline: 2px solid var(--hx-accent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .tx-jump:hover {
    padding-left: 10px;
    color: #fff;
  }
  .tx-jump:hover b::after {
    transform: translateY(3px);
    color: #fff;
  }
}

/* ───────── 본문: 왼쪽 분류 / 오른쪽 카드 ───────── */
.tx-body {
  padding: 24px 0 112px;
}

.tx-group {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
  padding: 72px 0;
  scroll-margin-top: calc(var(--hx-top) + 8px);
}

.tx-group + .tx-group {
  border-top: 1px solid var(--hx-line);
}

.tx-group__head {
  position: sticky;
  top: calc(var(--hx-top) + 40px);
  align-self: start;
}

.tx-group__en {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--hx-brand);
}

.tx-group__en::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.tx .tx-group__head h3 {
  margin-top: 16px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--hx-ink);
}

.tx-group__desc {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hx-sub);
}

.tx-group__cnt {
  margin-top: 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #8a97a5;
}

.tx-group__cnt b {
  margin-right: 4px;
  font-size: 15px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--hx-ink);
}

.tx-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* ───────── 카드 ───────── */
.tx-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 148px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--hx-line);
  border-radius: 8px;
  background: #fff;
}

.tx-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hx-accent), var(--hx-brand));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--hx-ease);
}

.tx-photo {
  flex: none;
  width: 84px;
  height: 110px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--hx-soft);
}

.tx-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.4s ease, transform 0.6s var(--hx-ease);
}

/* 사진이 아직 없는 사람 */
.tx-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 30px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  background:
    radial-gradient(90px 70px at 85% 0%, rgba(56, 198, 244, 0.45), transparent 70%),
    linear-gradient(160deg, var(--hx-navy-2), var(--hx-brand));
}

.tx-info {
  min-width: 0;
}

.tx-role {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hx-brand);
  background: #e8f3fa;
}

.tx .tx-card h4 {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--hx-ink);
}

.tx-en {
  margin-top: 3px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #8a97a5;
}

.tx-no {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: #b3bdc8;
}

/* 대표이사 */
.tx-card.is-key {
  border-color: transparent;
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(56, 198, 244, 0.26), transparent 70%),
    linear-gradient(160deg, var(--hx-navy), var(--hx-navy-2));
}

.tx .tx-card.is-key h4 {
  color: #fff;
}

.tx-card.is-key .tx-role {
  color: #06182b;
  background: var(--hx-accent);
}

.tx-card.is-key .tx-en,
.tx-card.is-key .tx-no {
  color: rgba(255, 255, 255, 0.5);
}

.tx-card.is-key .tx-photo img {
  filter: none;
}

@media (hover: hover) {
  .tx-card {
    transition: transform 0.3s var(--hx-ease), box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .tx-card:hover {
    transform: translateY(-4px);
    border-color: #c4d2df;
    box-shadow: 0 18px 40px -22px rgba(6, 40, 70, 0.4);
  }
  .tx-card.is-key:hover {
    border-color: transparent;
  }
  .tx-card:hover::after {
    transform: scaleX(1);
  }
  .tx-card:hover .tx-photo img {
    filter: none;
    transform: scale(1.05);
  }
}

/* 터치 기기에서는 hover 가 없으니 처음부터 컬러로 */
@media (hover: none) {
  .tx-photo img {
    filter: none;
  }
}

/* ───────── 등장 모션 (team.js 가 .tx-js / .is-in / .is-done 을 붙인다) ───────── */
.tx-js [data-rv] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease var(--d, 0ms), transform 0.7s var(--hx-ease) var(--d, 0ms);
}

.tx-js [data-rv].is-in {
  opacity: 1;
  transform: none;
}

/* 떠오른 뒤에는 hover 가 지연 없이 반응하도록 */
.tx-js .tx-card.is-done {
  transition: transform 0.3s var(--hx-ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ───────── 반응형 ───────── */
@media (max-width: 1180px) {
  .tx-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .tx-hero__top {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 40px;
  }
  .tx-body {
    padding: 8px 0 80px;
  }
  .tx-group {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 52px 0;
  }
  .tx-group__head {
    position: static;
  }
  .tx .tx-group__head h3 {
    margin-top: 12px;
    font-size: 28px;
  }
  .tx-group__desc {
    margin-top: 8px;
  }
  .tx-group__cnt {
    display: none;
  }
}

@media (max-width: 700px) {
  .tx-hero {
    padding-bottom: 48px;
  }
  .tx-jump {
    min-height: 52px;
    font-size: 16px;
  }
  .tx-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tx-card {
    min-height: 0;
    padding: 14px;
    gap: 16px;
  }
  .tx-photo {
    width: 72px;
    height: 94px;
  }
  .tx .tx-card h4 {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-hero .hx-eyebrow,
  .tx-hero .hx-title,
  .tx-hero .hx-lead,
  .tx-nav {
    animation: none;
  }
  .tx-js [data-rv],
  .tx-card,
  .tx-card::after,
  .tx-photo img,
  .tx-jump,
  .tx-jump b::after {
    transition: none;
  }
}