/* ==========================================================================
   pages/about.css — About 하위 페이지 공용 스타일
   회사 소개(about.html) · 조직도(organization.html)
   모바일 우선. 브레이크포인트 640 / 1024 / 1280
   ========================================================================== */

/* ---------- 페이지 머리: 회사 소개 · 슬로건 ---------- */
.about-hero {
  padding-bottom: var(--sp-8);
}

/* 슬로건·한 줄 소개: 네이비 섹션 머리 (2026-09-16 사용자 요청으로 페이지 머리에서 옮김).
   2026-09-29: --fs-xl(22–30px)은 아래 리드(--fs-2xl 22–26px)보다 커서 위계가 뒤집혀 있었다.
   영문 슬로건은 제목이 아니라 라벨이므로 본문 크기로 내리고, 파란 글씨를 걷었다
   (파랑은 버튼·현재 위치에만 쓴다). 색은 어두운 섹션 상속을 받는다 */
.about-intro__slogan {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug); /* 모바일에서 두 줄로 꺾일 때 간격이 벌어지지 않게 */
  letter-spacing: var(--ls-tight);
}

.about-intro__lead {
  max-width: 18em;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-8);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* ---------- 회사 소개: 이름의 뜻 + 정의 ---------- */
.about-intro__grid {
  display: grid;
  row-gap: var(--sp-8);
}

/* 이름 풀이: 트인 · 빛 을 가로 두 칸으로, 한글은 크고 굵게 · 영문 뜻은 그 아래 작게
   (2026-09-16 사용자 요청 — "트인빛 · TWYNBIT" 제목은 화면에서 제거) */
.about-intro__parts {
  margin-top: var(--sp-5); /* 슬로건 묶음과 간격을 벌린다 (2026-09-16 사용자 요청) */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.about-intro__part {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
}

/* 색 (2026-09-16 사용자 요청): 시안은 네이비 배경과 겉돌아 뺐다.
   --fw-bold(650)는 2026-09-29 정리 뒤 **브랜드 이름 표기 전용**으로 남긴 유일한 곳이다 —
   '트인'·'빛' 은 회사 이름 자체라 워드마크 굵기가 정당하다. 색은 어두운 섹션 상속 */
.about-intro__syllable {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.about-intro__meaning {
  font-size: var(--fs-base);
}

/* 본문은 --fs-base 16px 다 (2026-09-29 — Home 과 같은 본문 크기.
   종전 --fs-md 18px 은 사이트 안에서 혼자 큰 본문이었다) */
.about-intro__body p {
  max-width: 60ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.about-intro__body p + p {
  margin-top: var(--sp-5);
}

@media (min-width: 1024px) {
  .about-intro__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-6);
    row-gap: 0;
  }

  /* 이름 풀이는 본문보다 한 단 아래에서 시작한다 (2026-09-16 사용자 요청) */
  .about-intro__head {
    grid-column: 1 / 6;
    padding-top: var(--sp-7);
  }

  .about-intro__body {
    grid-column: 7 / 13;
    padding-top: var(--sp-2);
  }
}

/* ---------- 4대 사업 (라이트, 편집물 흐름) ---------- */
/* 다음 섹션(Technology for Humanity)도 같은 밝은 배경이라 두 섹션의 상하 여백이
   그대로 겹쳐 빈 공간이 크게 보인다. 맞닿는 쪽 여백만 줄인다 (2026-09-21 사용자 요청) */
.about-biz {
  padding-bottom: calc(var(--section-y) / 2);
}

.about-humanity {
  padding-top: calc(var(--section-y) / 2);
}

/* 섹션 제목은 밝은 배경이라 600 이다 (2026-09-29 규칙: 어두운 배경 500 · 밝은 배경 600.
   같은 500 이라도 밝은 바탕 위 어두운 글자는 더 가늘어 보인다) */
.about-biz__title {
  margin-bottom: var(--sp-8);
  font-weight: var(--fw-semibold);
}

.about-biz__list {
  padding: 0;
  list-style: none;
}

.about-biz__item {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line-on-light);
}

/* h3 이므로 크기를 지정하지 않는다 — base.css 의 --fs-lg(18–20px)를 받는다.
   2026-09-29: 종전 --fs-xl(22–30px)은 이 섹션 h2(22–26px)보다 커서 위계가 뒤집혀 있었다 */
.about-biz__name {
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* h3 의 국문 뜻풀이라 제목이 아니라 본문 위계다 (2026-09-29 — 파란 글씨·18px·600 을 걷었다) */
.about-biz__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--text-muted-on-light);
}

.about-biz__body .flow {
  margin-bottom: var(--sp-5);
}

.about-biz__body p {
  max-width: 60ch;
  color: var(--text-muted-on-light);
}

@media (min-width: 1024px) {
  .about-biz__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }

  .about-biz__head {
    grid-column: 1 / 6;
  }

  .about-biz__body {
    grid-column: 6 / 13;
  }
}

/* ---------- 조직도 페이지: 팀 소개 ---------- */
.about-team__intro {
  display: grid;
  row-gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.about-team__text p {
  max-width: 72ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.about-team__text p + p {
  margin-top: var(--sp-5);
}

/* ---------- 조직도 (team.js 렌더) ---------- */
.org {
  display: grid;
  gap: var(--sp-6);
}

.org__top {
  display: grid;
  gap: var(--sp-5);
}

/* 네이비 섹션 위에서 한 단계 깊은 배경으로 박스를 구분 */
.org-node {
  padding: var(--sp-5);
  border: 1px solid var(--line-on-dark);
  background-color: var(--orbit-navy);
}

/* 대표 박스는 **밝기**로 한 단계 올린다 (2026-09-29 — 종전 파란 테두리는 걷었다).
   색이 아니라 투명도로 위계를 만드는 것이 Home 의 문법이다. 테두리를 아예 없애면
   팀 박스와 구별되지 않으므로 한 단계 밝은 선으로 남긴다 */
.org-node--ceo {
  border-color: var(--ink-on-dark-faint);
}

.org-node__name {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

/* 직함: 파란 글씨를 걷고 굵기로 구분한다 (2026-09-29 — 경영진 4명 ×1 = 한 화면 파랑 4개였다) */
.org-node__title {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.org-node__role {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}

.org-node__career {
  margin-top: var(--sp-3);
  padding-left: 1.1em;
  font-size: var(--fs-sm);
}

.org-node__career li + li {
  margin-top: var(--sp-1);
}

.org__head {
  display: grid;
  gap: var(--sp-3);
}

/* 자문·독립 검증: 보고선이 아님 → 투명 배경 + 점선 테두리 */
.org-node--advisory {
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--text-subtle);
  background-color: transparent;
}

/* 자문 박스는 팀보다 한 단 아래 위계라 이름도 한 단계 작다 */
.org-node--advisory .org-node__name {
  font-size: var(--fs-base);
}

.org-node--advisory .org-node__role {
  margin-top: var(--sp-1);
}

.org__directors {
  display: grid;
  gap: var(--sp-6);
  padding: 0;
  list-style: none;
}

.org__branch {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

/* 팀 한 칸 (2026-09-17 사용자 요청): 대표 아래 팀 3개, 각 팀 안에 책임자 프로필이 들어간다.
   팀은 선으로 두른 칸(바탕 없음), 책임자 프로필은 그 안의 어두운 박스 */
.org-unit {
  display: grid;
  align-content: start;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line-on-dark);
}

.org-unit__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-3);
  line-height: var(--lh-snug);
}

/* 국문 팀명의 보조 표기 (2026-09-29 — 파란 글씨 ×3 을 걷었다).
   h3 의 굵기만 되돌린다. font-family 는 h3 가 이미 --font-sans 라 지울 수 있었다.
   **--ink-on-dark-faint 를 쓰지 않는다**: 이 섹션 배경(#101A2E) 위에서 4.17:1 로 AA 미달이다
   (14px·400 은 4.5:1 필요). 위계는 색이 아니라 크기(14px)와 굵기(400)로 만든다 */
.org-unit__alt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--ink-on-dark);
}

/* 영문판에서는 팀명이 이미 영문이라 같은 이름을 한 번 더 쓰지 않는다 */
html[lang="en"] .org-unit__alt {
  display: none;
}

/* 주요 Task: 가운뎃점으로 이어 쓰는 한 줄 흐름 (좁으면 줄바꿈).
   모든 항목 앞에 점을 두고 목록을 점 폭만큼 왼쪽으로 당긴 뒤 그 띠를 잘라, 줄 첫머리의 점은 보이지 않게 한다 */
.org-unit__tasks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) 0;
  margin-top: var(--sp-3);
  margin-left: -1.2em;
  padding: 0;
  clip-path: inset(0 0 0 1.2em);
  list-style: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.org-unit__tasks li::before {
  content: "·";
  display: inline-block;
  width: 1.2em;
  text-align: center;
  color: var(--text-subtle);
}

/* 1024px 이상: 대표 → 경영진 보고선, 기술고문(좌)·IV&V(우)는 대표 옆 점선 연결 */
@media (min-width: 1024px) {
  .org {
    gap: 0;
  }

  .org__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--sp-6);
    padding-bottom: var(--sp-5);
  }

  .org__head {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    gap: 0;
  }

  .org__head::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    height: var(--sp-5);
    border-left: 1px solid var(--line-on-dark);
  }

  .org-node--advisory {
    position: relative;
    grid-row: 1;
    align-self: start;
  }

  .org-node--advisory-left {
    grid-column: 1;
  }

  .org-node--advisory-right {
    grid-column: 3;
  }

  /* 대표 라인과 점선 연결: 기술고문은 왼쪽, IV&V 는 오른쪽 */
  .org-node--advisory::before {
    content: "";
    position: absolute;
    top: var(--sp-6);
    width: calc(var(--sp-6) + 1px);
    border-top: 1px dashed var(--text-subtle);
  }

  .org-node--advisory-left::before {
    left: 100%;
  }

  .org-node--advisory-right::before {
    right: 100%;
  }

  .org__directors {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--sp-6);
    padding-top: var(--sp-5);
  }

  /* 세 팀을 잇는 가로선: 첫 열 중앙 ~ 마지막 열 중앙 */
  .org__directors::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc((100% - var(--sp-6) * 2) / 6);
    left: calc((100% - var(--sp-6) * 2) / 6);
    border-top: 1px solid var(--line-on-dark);
  }

  .org__branch {
    position: relative;
  }

  /* 세 팀의 머리(팀명·Task)와 프로필이 같은 높이에서 시작하도록 행을 공유한다 (subgrid).
     Task 줄 수가 팀마다 달라도 프로필 박스 윗선이 한 줄로 맞는다 */
  .org__directors {
    grid-template-rows: auto auto;
    row-gap: var(--sp-5);
  }

  .org-unit {
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: var(--sp-5);
  }

  .org__branch::before {
    content: "";
    position: absolute;
    top: calc(var(--sp-5) * -1);
    left: 50%;
    height: var(--sp-5);
    border-left: 1px solid var(--line-on-dark);
  }
}

/* ---------- Technology for Humanity (라이트) ---------- */

/* h1 과 같은 크기였던 것을 한 단계 내려 상세 페이지 계단에 맞춘다 (2026-09-16).
   굵기는 650 → 600 (2026-09-29 — 650 은 브랜드 이름 표기 전용으로 돌렸다) */
/* 줄바꿈 자리는 마크업이 `
` 로 지정한다 (2026-09-29 사용자 요청).
   **pre-line 이 없으면 그 줄바꿈이 공백으로 눌린다.**
   폭은 둘째 줄이 한 줄로 들어갈 만큼 넉넉히 준다 — 16em 이면 지정한 자리 전에 또 접힌다
   (좁은 화면에서는 pre-line 이 허용하는 범위에서 자연스럽게 더 접힌다) */
.about-humanity__title {
  max-width: 28em;
  margin-top: var(--sp-3);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  white-space: pre-line;
}

.about-humanity__text {
  margin-top: var(--sp-6);
}

.about-humanity__body {
  max-width: 60ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted-on-light);
}

.about-humanity__body + .about-humanity__body {
  margin-top: var(--sp-5);
}

.about-humanity .flow {
  margin-top: var(--sp-8);
}

/* ---------- 회사 CI (Technology for Humanity 섹션 안, 가운데 작게) ----------
   2026-09-16 사용자 요청: 따로 섹션을 만들지 않고 밝은 섹션 안에 작게 둔다.
   밝은 배경이라 로고 원본 색이 그대로 보인다 (판을 깔 필요 없음) */
/* 왼쪽 정렬 + 블록 폭만큼만 위에 가는 선 (2026-09-16 사용자 요청).
   width: fit-content 라 선이 로고 두 개 폭에서 끝난다 */
.about-ci {
  width: fit-content;
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-light);
}

.about-ci__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}



/* 세 변형(가로형·세로형·심볼)은 비율이 제각각이라 폭만 맞추면 높이가 달라져
   아래 내려받기 링크가 어긋난다. **같은 크기 상자 안에 비율을 지켜 담는다** (2026-09-29) */
.ci-item__mark {
  width: 132px;
  height: 92px;
  object-fit: contain;
  object-position: left center;
}

.ci-item__download {
  font-size: var(--fs-sm);
  color: var(--text-muted-on-light);
  text-decoration: none;
  border-bottom: 1px solid var(--line-on-light);
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* 내려받기 링크는 **누를 수 있는 것**이라 파랑을 남긴다 (2026-09-29 허용 용도).
   테두리도 같은 계열(--electric-blue-ink)로 맞췄다 — 종전 --electric-blue 는 계열이 달랐다 */
.ci-item__download:hover,
.ci-item__download:focus-visible {
  color: var(--electric-blue-ink);
  border-color: var(--electric-blue-ink);
}

/* 영문판 전용 (2026-10-01): 마크업이 지정한 자리에서만 끊는다. 국문은 건드리지 않는다 */
html[lang="en"] .about-intro__lead {
  white-space: pre-line;
}