/* About: 글자만으로 된 이력.
   kuhlandhan.com/careers CSS 에서 뽑은 원칙을 우리 내용에 맞게 적용 (배치를 베끼지 않고 규칙만):
   1) 글자 크기는 딱 두 단계 — 큰 제목(--t-lg) / 본문(--t-md). 굵기는 전부 Regular 하나. 위계는 크기와 회색으로만.
   2) 자간은 어디서나 -0.04em, 줄간격은 크기마다 고정값에 가깝게 촘촘히 (큰 제목 1.08, 본문 1.25).
   3) 진짜 12칸 그리드 + 좁은 거터. 칸을 일부러 비워(8·12번째) 여백이 생기게. 본문 폭은 4칸으로 짧게.
   4) 한 줄(섹션)의 모든 칸이 같은 크기의 제목으로 같은 윗선에서 시작 → 제목 아래 일정한 간격 뒤 본문.
   5) 색은 #111 과 회색 #959595 두 가지. 선·상자·밑줄 없이 여백으로만 구분. */
.about-page { overflow: auto; height: auto; }
/* 스크롤바 숨김: 메인(스크롤 없음)과 페이지 폭을 똑같이 → 오갈 때 상단 메뉴가 옆으로 밀리지 않음. 휠·터치 스크롤은 그대로 */
html:has(body.about-page) { scrollbar-width: none; }
html:has(body.about-page)::-webkit-scrollbar { display: none; }
/* 상세 페이지만 스크롤바 보임 (사용자 10-29: 길어서 위치를 알 수 있게) — 상단 메뉴 글라스와 같은 회색 캡슐, 올리면 메뉴 호버처럼 진하게 */
html:has(body.project-page) { scrollbar-width: thin; scrollbar-color: rgba(120, 120, 120, 0.55) transparent; }
html:has(body.project-page)::-webkit-scrollbar { display: block; width: 12px; background: transparent; }
html:has(body.project-page)::-webkit-scrollbar-track { background: transparent; }
html:has(body.project-page)::-webkit-scrollbar-thumb {
  border: 3px solid transparent;                     /* 바깥 여백 → 얇은 캡슐이 떠 있는 느낌 */
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(150, 150, 150, 0.6), rgba(120, 120, 120, 0.6)) padding-box;
}
html:has(body.project-page)::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(110, 110, 110, 0.85), rgba(80, 80, 80, 0.85)) padding-box; }
.about-page .header { position: fixed; }

.about {
  position: relative;
  padding: calc(420 * var(--k)) var(--edge) calc(200 * var(--k));
  color: var(--fg);
}

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  margin-bottom: max(64px, calc(150 * var(--k)));
  font-size: var(--t-md);
  font-weight: 400;
  line-height: var(--lh);
  letter-spacing: var(--track);
}
/* 칸 배치: 섹션 제목 1–3 | 본문 4–7 | (8 비움) | 보조 9–11 | (12 비움) */
.row__title { grid-column: 1 / span 3; }
.row__main { grid-column: 4 / span 4; }
.row__side { grid-column: 9 / span 3; }

/* 큰 제목: 섹션 제목과 칸 제목이 같은 크기·같은 윗선 */
.row__title, .row h3 {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--track);
}
/* 제목 → 본문 간격은 어디서나 같음 */
.about .row h3 + * { margin-top: var(--head-gap); }
.row p { margin: 0 0 1.25em; }

/* 목록: 날짜(회색) / 이름 / 역할(회색) 한 덩어리, 덩어리 사이는 한 줄 간격 */
.list { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--item-gap); }
.list li { display: flex; flex-direction: column; }
.when, .role, .row__side dt { color: var(--fg-2); }
.list--plain { row-gap: 0; }

.row__main--split { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }


/* 보조 칸: 라벨(회색) 한 줄 + 값 한 줄, 덩어리 사이 한 줄 간격 */
.row__side dl { margin: 0; display: grid; row-gap: var(--item-gap); }
.row__side dt, .row__side dd { margin: 0; }

/* 링크: 밑줄 없이, 올리면 회색 */
.row a { color: inherit; text-decoration: none; transition: color 0.15s; }
.row a:hover { color: var(--fg-2); }

/* 좁은 화면: 4칸, 한 칸씩 쌓음 */
@media (max-width: 760px) {
  .about { padding-top: var(--page-top); }   /* 로고·메뉴 아래 (hero.css 폰) */
  .about-page .header { position: absolute; }   /* 위 .about-page .header { fixed } 를 폰에선 풂 — 로고와 같이 스크롤 (about·work·상세 공통) */
  .row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; margin-bottom: 72px; }
  .row__title, .row__main, .row__side { grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  /* 중간 화면: 8칸 — 제목 1–2 | 본문 3–5 | 보조 6–8 */
  .row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .row__title { grid-column: 1 / span 2; }
  .row__main { grid-column: 3 / span 3; }
  .row__side { grid-column: 6 / span 3; }
}

/* ---------- 하단바 ----------
   크기 3단계로 위계: 정보(--t-md) / 소개 본문(--t-sm) / © · 맨 위로(--t-xs, 회색). 위에 가는 선 하나로 본문과 나눔.
   줄 1: 이름·분야 | 서울·현재 시각 | 메일·전화 | In Be 정사각
   줄 2: 소개 본문 (본문 칸 4–7) / 줄 3: © | 맨 위로. 칸은 위 이력과 같은 그리드 */
.foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);              /* 본문과 같은 12칸 그리드 */
  row-gap: calc(70 * var(--k));
  margin: 0 var(--edge);
  padding: calc(28 * var(--k)) 0 var(--edge);
  border-top: 1px solid var(--line);
  color: var(--fg);
  font-size: var(--t-md);
  line-height: 1.25;
  letter-spacing: var(--track);
}
.foot p, .foot ul { margin: 0; padding: 0; }
.foot a { color: inherit; text-decoration: none; }
.foot p a:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.foot span, .foot__reach a { display: block; }
.foot__who { grid-column: 1 / span 3; }
.foot__where { grid-column: 4 / span 4; }     /* 본문 칸(4–7)에 맞춤 */
.foot__where time { font-variant-numeric: tabular-nums; }
.foot__reach { grid-column: 9 / span 2; }     /* 보조 칸(9–)에 맞춤 */
/* Instagram / Behance / LinkedIn: 상단 메뉴와 같은 메타볼 글라스 캡슐 (nav.js), 크기도 상단 메뉴 그대로. 마우스 올리면 진한 회색 */
.foot .foot__social { grid-column: 11 / span 2; grid-row: 1; justify-self: end; height: 32px; font-size: 13px; letter-spacing: -0.01em; }
.foot .foot__social .nav__item { color: var(--fg-ui); }
.foot .foot__social .nav__item.is-active { color: #fff; }
.foot__about { grid-column: 4 / span 4; max-width: 46em; font-size: var(--t-sm); line-height: 1.4; color: var(--fg); }
.foot__copy, .foot .foot__top { font-size: var(--t-xs); color: var(--fg-2); align-self: end; }
.foot__copy { grid-column: 1 / span 7; }
.foot .foot__top { grid-column: 11 / span 2; justify-self: end; }
.foot .foot__top:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }

@media (max-width: 760px) {
  .foot { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; padding-top: 12px; }
  .foot__who { grid-column: 1 / span 2; }
  .foot__where { grid-column: 3 / span 2; }
  .foot__reach { grid-column: 1 / span 3; }
  .foot .foot__social { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  /* 폰은 캡슐 없이 글자라 링크인 줄 알게 상세 링크(Behance ↗)처럼 ↗ (사용자 11-01) */
  .foot .foot__social .nav__item { display: inline-flex; align-items: baseline; gap: 0.2em; color: var(--fg); }
  .foot .foot__social .nav__item::after { content: "↗"; }
  .foot__about { grid-column: 1 / -1; }
  .foot__copy { grid-column: 1 / span 2; }
  .foot .foot__top { grid-column: 3 / span 2; }
}
/* 하단바도 Regular 하나 */
.about-page .foot { font-weight: 400; }