/* ============================================================
   About 페이지 (Figma: about)
   - 배경: primary-03(시안) — .about / div 단위 제어
   - 좌: 이력(학력/개인전/그룹전/클라이언트) / 우: 소개글 + 연락처
   - 모든 텍스트 자폭 압축은 js/font-system.js(.char-narrow)가 자동 처리
   ============================================================ */
body.about-page .nav::before {
  background-color: var(--color-primary-03);
}

body.about-page .nav__logo,
body.about-page .nav > .nav__link,
body.about-page .nav__lang {
  color: var(--color-white);
  isolation: isolate;
  mix-blend-mode: difference;
}

.about {
  min-height: 100dvh;
  background-color: var(--color-primary-03);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-40);
  padding: 72px 0 0;
}

/* ------------------------------------------------------------
   좌측 이력
   ------------------------------------------------------------ */
.about__cv {
  flex: 0 0 calc((100% - var(--spacing-40)) * 0.35);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-28);
  font-family: var(--font-family-ko);
  font-weight: var(--font-weight-regular-ko);
  font-size: var(--font-size-body);
  line-height: 1.4;
}

/* CV 텍스트만 blend (배경/컨테이너에는 blend 없음) */
.about__cv .cv-block__label,
.about__cv .cv-row__year,
.about__cv .cv-row__desc {
  color: var(--color-white);
  isolation: isolate;
  mix-blend-mode: difference;
}

/* 학력·개인전·그룹전: 라벨(1열)과 내용(2열)을 하나의 공통 그리드로 묶는다.
   1열을 max-content 로 두면 라벨 열 너비가 세 라벨 중 "가장 긴 것"에 자동으로 맞춰진다. */
.cv-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--spacing-40);
  row-gap: var(--spacing-28);
  align-items: start;
}

/* 그리드 안의 블록 래퍼는 레이아웃에서 투명하게 만들어 label·rows가 부모 그리드에 직접 배치 */
.cv-grid > .cv-block {
  display: contents;
}

/* 클라이언트: 그리드와 무관하게 라벨+내용을 단독으로 배치 */
.cv-block--full {
  display: flex;
  gap: var(--spacing-40);
  align-items: flex-start;
}

.cv-block__label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular-ko);
  word-break: keep-all;
}

/* font-system 이 텍스트를 .char-narrow 로 감싸며 scaleX 를 적용하므로,
   밑줄은 부모가 아니라 글자가 있는 .char-narrow 에 직접 걸어야 보인다 */
.cv-block__label .char-narrow {
  text-decoration: underline;
  text-underline-position: from-font;
}

.cv-block__label .cv-block__label-text {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* 영문 CV: 모바일에서 Exhibitions 줄바꿈(br) 숨김 → 한 줄 */
@media (max-width: 767px) {
  .cv-block__label .cv-label-br {
    display: none;
  }
}

.cv-block__rows {
  display: flex;
  flex-direction: column;
}

.cv-row {
  display: flex;
  gap: var(--spacing-12);
  align-items: flex-start;
}

.cv-row__year {
  flex: 0 0 54px;
}

/* 모든 텍스트 자폭 압축은 자동 시스템(.char-narrow)이 처리 */
.cv-row__desc {
  flex: 1 1 auto;
}

/* ------------------------------------------------------------
   우측 소개글 + 연락처
   ------------------------------------------------------------ */
.about__intro {
  flex: 0 0 calc((100% - var(--spacing-40)) * 0.65);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-80);
}

.about__text {
  font-family: var(--font-family-ko);
  font-weight: var(--font-weight-regular-ko);
  font-size: var(--font-size-body);
  line-height: 1.4;
}

/* 모든 텍스트 자폭 압축은 자동 시스템(.char-narrow)이 처리 */
.about__text p {
  margin-bottom: 1.4em;
}

.about__text p:last-child {
  margin-bottom: 0;
}

.about__name {
  margin-bottom: 0 !important;
}

/* 강조(외부 링크) — 인라인 텍스트와 동일한 줄 흐름 */
.about__text a.hl {
  display: inline;
  text-decoration: none;
}

.hl {
  background: var(--color-white);
  color: var(--color-black);
  padding: 0 2px;
}

/* 연락처 */
.about__contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  font-family: var(--font-family-en);
  font-size: var(--font-size-caption-lg);
  line-height: 1;
}

.contact-row {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
}

.contact-row__value {
  background: var(--color-white);
  color: var(--color-black);
  padding: 0 2px;
}

a.contact-row__value {
  text-decoration: none;
}

/* ============================================================
   About 반응형 (Figma Mobile — body.about-page 만 적용)
   - 767px 이하: Mobile Mode Variables + column 레이아웃
   - 768~1023: Tablet (Desktop·Mobile 보간)
   - 1024~1439: Desktop (기본 스타일)
   - 1440px~: Wide (Desktop 유지)
   ============================================================ */

/* --- Mobile (max-width: 767px) --- */
@media (max-width: 767px) {
  body.about-page {
    --font-size-body: 18px;
    --font-size-title: 28px;
    --font-size-caption-lg: 22px;
    --font-size-caption-md: 18px;
    --spacing-32: 32px;
    overflow-x: hidden;
  }

  body.about-page .about {
    flex-direction: column;
    gap: var(--spacing-28);
    padding: 49px 0 0;
    max-width: 100%;
  }

  body.about-page .about__intro {
    order: -1;
    max-width: none;
    width: 100%;
    gap: var(--spacing-32);
    padding: 0 2px;
    box-sizing: border-box;
  }

  body.about-page .about__contact {
    font-size: var(--font-size-caption-md);
  }

  /* CV 녹색 블록 — 풀블리드, 배경 blend 없음, 내부 px 2px */
  body.about-page .about__cv {
    flex: none;
    width: 100%;
    background-color: var(--color-primary-04);
    padding: var(--spacing-28) 0;
    gap: var(--spacing-20);
    box-sizing: border-box;
    mix-blend-mode: normal;
  }

  /* Figma: 섹션별 세로 스택 (라벨 → 내용, gap 8px / 섹션 간 gap 20px) */
  body.about-page .cv-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
  }

  body.about-page .cv-grid > .cv-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    padding: 0 2px;
    box-sizing: border-box;
  }

  /* Figma CV: 전 항목 body-ko(18px) — 라벨도 title(28px) 아님 */
  body.about-page .about__cv,
  body.about-page .about__cv .cv-block__label,
  body.about-page .about__cv .cv-row__year,
  body.about-page .about__cv .cv-row__desc {
    font-size: var(--font-size-body);
    line-height: 1.4;
  }

  body.about-page .cv-block__rows {
    width: 100%;
  }

  body.about-page .cv-row {
    gap: var(--spacing-8);
  }

  body.about-page .cv-row__year {
    flex: 0 0 35px;
  }

  body.about-page .cv-row__desc {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.about-page .cv-block--full {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    padding: 0 2px;
    box-sizing: border-box;
  }

  body.about-page .cv-row--full .cv-row__desc {
    width: 100%;
  }
}

/* --- Small mobile (max-width: 480px) --- */
@media (max-width: 480px) {
  body.about-page .about {
    padding-top: 49px;
  }
}

/* --- Tablet (768px ~ 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  body.about-page .about {
    flex-direction: column;
    padding: 60px 0 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.about-page .about__intro {
    order: -1;
    max-width: none;
    width: 100%;
    gap: var(--spacing-56);
    padding: 0 2px;
    box-sizing: border-box;
  }

  body.about-page .about__cv {
    flex: none;
    width: 100%;
    background-color: var(--color-primary-04);
    padding: var(--spacing-28) 0;
    gap: var(--spacing-20);
    box-sizing: border-box;
    mix-blend-mode: normal;
  }

  body.about-page .cv-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
  }

  body.about-page .cv-grid > .cv-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    padding: 0 2px;
    box-sizing: border-box;
  }

  body.about-page .cv-block--full {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    padding: 0 2px;
    box-sizing: border-box;
  }

  /* CV 글자크기 = 자기소개 (.about__text) 와 동일 — Desktop body 28px */
  body.about-page .about__cv,
  body.about-page .about__cv .cv-block__label,
  body.about-page .about__cv .cv-row__year,
  body.about-page .about__cv .cv-row__desc {
    font-size: var(--font-size-body);
    line-height: 1.4;
  }
}

@media (min-width: 901px) and (max-width: 1023px) {
  body.about-page .about {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-28);
    padding: 64px 0 0;
  }

  body.about-page .about__intro {
    order: 0;
    flex: 1 1 auto;
    gap: var(--spacing-56);
    padding: 0;
  }

  body.about-page .about__cv {
    flex: 0 0 42%;
    width: auto;
    background-color: transparent;
    padding: 0;
    gap: var(--spacing-28);
  }

  body.about-page .cv-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--spacing-20);
    row-gap: var(--spacing-28);
  }

  body.about-page .cv-grid > .cv-block {
    display: contents;
    padding: 0;
  }

  body.about-page .cv-block--full {
    flex-direction: row;
    gap: var(--spacing-28);
    padding: 0;
  }
}

/* 영문: 본문 line-height 1.2 */
html[lang="en"] body.about-page .about__text,
html[lang="en"] body.about-page .about__cv,
html[lang="en"] body.about-page .about__cv .cv-block__label,
html[lang="en"] body.about-page .about__cv .cv-row__year,
html[lang="en"] body.about-page .about__cv .cv-row__desc {
  line-height: 1.2;
}