/*
  커리어 페이지(career.html) 전용 스타일. tokens.css의 변수만 재사용하고
  sections.css/tokens.css는 건드리지 않는다. 헤더/네비/푸터는 layout.css를
  그대로 쓴다 (career.css는 .nav-link.is-current만 이 페이지 한정으로 얹는다).

  아래 클래스는 js/render/career.js가 각 마운트 지점 안에 생성하는
  마크업과 맞물리는 계약이다:

  - 관 공통 인트로: .career-hall__period(p) / .career-hall__title(h2, 이미
    HTML에 있음) / .career-hall__org(p) — 텍스트만 채우면 된다.

  - 관 1 (#career-hall-1-items, format: timeline): 아이템마다
    .career-timeline__item(article) 하나씩 생성.
      <article class="career-timeline__item">
        <div class="career-timeline__year">2008</div>
        <div class="career-timeline__content">
          <h3 class="career-timeline__title">...</h3>
          <p class="career-timeline__body">...</p>          (body가 빈 문자열이면 이 태그 자체를 생성하지 않는다)
          <blockquote class="career-timeline__caption">...</blockquote>  (caption이 null이면 생성하지 않는다)
        </div>
      </article>

  - 관 2 (#career-hall-2-items, format: cards): 아이템마다
    .career-card(article) 하나씩 생성.
      <article class="career-card">
        <div class="career-card__content">
          <h3 class="career-card__title">...</h3>
          <p class="career-card__meta">period · role</p>
          <p class="career-card__body">...</p>
          <blockquote class="career-card__caption">...</blockquote>  (caption이 null이면 생성하지 않는다)
        </div>
      </article>

  - 관 3 (#career-hall-3-body, format: block): 마운트 엘리먼트 자체가
    이미 <article class="career-block">다. 안에 .career-block__body(p) 하나만
    채운다. 캡션 없음.

  - 관 사이 .career-transition: 제목(h2)과 기간·소속(p) 텍스트만 렌더한다.

  body/caption을 빈 문자열/null일 때 태그를 아예 생성하지 않는 것이 원칙이지만,
  혹시 빈 태그가 그려지더라도 :empty로 여백이 남지 않게 막아둔다.
*/

/* 관 공통 */
.career-hall__intro {
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .career-hall .container {
    max-width: 960px;
  }
}

@media (min-width: 1024px) {
  .career-hall .container {
    max-width: 900px;
  }
}

.career-hall__period {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.career-hall__title {
  margin-top: var(--space-2);
  font-size: var(--fs-xl);
}

.career-hall__org {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
}

/* 관 사이 전이 — 다음 관의 이름과 소속만 남긴 어두운 복도다. */
.career-transition {
  display: grid;
  min-height: 60vh;
  min-height: 60svh;
  place-items: center;
  background-color: var(--color-bg);
}

.career-transition__inner {
  max-width: min(100%, 42rem);
  padding-inline: var(--container-padding);
  text-align: center;
}

.career-transition__title {
  font-size: var(--fs-2xl);
  color: var(--color-text);
}

.career-transition__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
}

@media (min-width: 768px) {
  .career-transition {
    min-height: 100vh;
    min-height: 100svh;
  }

  .career-transition__title {
    font-size: var(--fs-3xl);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .career-transition__inner {
    opacity: 0;
    transform: translateY(var(--space-5));
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

  .career-transition.is-visible .career-transition__inner {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  .career-hall__title {
    font-size: var(--fs-2xl);
  }
}

/* 캡션 공통 — 본문과 시각적으로 구분 (인용 형태 + 다른 서체) */
.career-timeline__caption,
.career-card__caption {
  margin: 0;
  margin-top: var(--space-3);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
  font-family: Georgia, "Noto Serif KR", serif;
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.career-timeline__body:empty,
.career-timeline__caption:empty,
.career-card__body:empty,
.career-card__caption:empty {
  display: none;
}

/* 관 1 — 연도 레일. 각 item이 자기 높이만큼만 sticky 컨테이너 역할을 해서
   스크롤에 따라 붙었다가 다음 연도 item이 밀어 올리게 한다. */
.career-timeline__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.career-timeline__item:first-child {
  border-top: none;
  padding-top: 0;
}

.career-timeline__year {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  align-self: start;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--color-accent);
}

.career-timeline__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.career-timeline__body {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .career-timeline__item {
    grid-template-columns: 120px 1fr;
    gap: var(--space-6);
    padding-block: var(--space-7);
  }

  .career-timeline__year {
    font-size: var(--fs-md);
  }

  .career-timeline__title {
    font-size: var(--fs-md);
  }
}

@media (min-width: 1024px) {
  .career-timeline__item {
    grid-template-columns: 140px 1fr;
    padding-block: var(--space-8);
  }

  .career-timeline__year {
    font-size: var(--fs-lg);
  }
}

/* 관 2 — 프로젝트 카드. 홈의 .card 톤(배경/테두리/그림자)을 참고해
   이 파일 안에서 독립적으로 정의한다. */
.career-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-5);
}

.career-card {
  position: relative;
  padding: var(--space-5);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.career-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.career-card__title {
  font-size: var(--fs-md);
}

.career-card__meta {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

.career-card__body {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .career-card-grid {
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .career-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: var(--space-7);
  }
}

/* 사유의 방 스포트라이트 — reveal의 opacity와 경쟁하지 않도록 항목 위의
   따뜻한 어둠 레이어로 실질 가시도를 0.18로 낮춘다. 모바일과 reduced motion에서는 적용하지 않는다. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .career-spotlight-active .career-timeline__item.reveal.is-visible,
  .career-spotlight-active .career-card.reveal.is-visible {
    position: relative;
  }

  .career-spotlight-active .career-timeline__item.reveal.is-visible::after,
  .career-spotlight-active .career-card.reveal.is-visible::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--color-bg);
    opacity: 0.82;
    pointer-events: none;
    transition: opacity 0.55s ease;
  }

  .career-spotlight-active .career-timeline__item.reveal.is-visible .career-timeline__year,
  .career-spotlight-active .career-timeline__item.reveal.is-visible .career-timeline__content,
  .career-spotlight-active .career-card.reveal.is-visible .career-card__content {
    filter: blur(2px);
    transform: scale(0.97);
    transition: filter 0.55s ease, transform 0.55s ease;
  }

  .career-spotlight-active .career-timeline__item.reveal.is-visible.is-spotlit::after,
  .career-spotlight-active .career-card.reveal.is-visible.is-spotlit::after {
    opacity: 0;
  }

  .career-spotlight-active .career-timeline__item.reveal.is-visible.is-spotlit .career-timeline__year,
  .career-spotlight-active .career-timeline__item.reveal.is-visible.is-spotlit .career-timeline__content,
  .career-spotlight-active .career-card.reveal.is-visible.is-spotlit .career-card__content {
    filter: blur(0);
    transform: scale(1);
  }
}

/* 관 3 — 카드도 타임라인도 아닌 단순 블록. 캡션 없음, 짧게 끝난다. */
.career-block {
  max-width: 640px;
  padding: var(--space-5);
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-md);
}

.career-block__body {
  font-size: var(--fs-base);
  color: var(--color-text);
}

/* 네비 현재 페이지 표시 — layout.css의 .nav-link를 이 페이지에서만 보강 */
.nav-link.is-current {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}