/* 어바웃 박성호(/박성호/). 구성과 규칙은 삥이FC about·DESIGN.md(前/現 표기, 카드보다 리스트, 손톱 막대·화살표 없음, 12px 하한,
   글자 링크엔 늘 밑줄), 색과 서체는 AUBE(base.css). 근거: 어바웃/01_구성_카피.md */

/* 머리글: 메인(hero.css)과 같은 모양 */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header.is-scrolled {
  background: rgba(18, 18, 18, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--ink-line);
}
.site-header__logo img { width: 92px; }
.site-header__nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; color: var(--ink-sub); }
.site-header__nav a { text-decoration: none; }
.site-header__nav a:hover { color: var(--ink-text); }
.site-header__call {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px;
  border: 1px solid #555; border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none;
}
.site-header__call:hover { border-color: var(--ink-text); }
.site-header__call-label { color: var(--ink-text); font-weight: 700; }

html { scroll-padding-top: calc(var(--header-h) + 24px); }

/* 1. 첫 화면 */
/* 인물 사진은 머리글 바로 아래부터 첫 화면 바닥까지 크게(박성호 2026-10-23). 글은 사진 높이의 가운데에 */
.ab-hero { position: relative; padding: calc(var(--header-h) + 12px) var(--gutter) 0; overflow: hidden; }
/* 배경: 회사 건물 사진을 10%로 깔아 일하는 공간이 비치게(박성호 2026-10-23) */
.ab-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/about-office-v2.webp") center 30% / cover no-repeat;
  opacity: .1;
}
.ab-hero__inner { position: relative; z-index: 1; }
.ab-hero__inner {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(360px, 40vw, 580px)); gap: clamp(32px, 4vw, 56px); align-items: end;
}
.ab-hero__copy { align-self: center; padding-bottom: clamp(24px, 3vw, 48px); }
.ab-hero__name { font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.ab-hero__name span { margin-left: 6px; font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink-sub); }
.ab-hero__role { margin-top: 6px; font-size: 15px; color: var(--ink-sub); }
.ab-hero__title {
  margin-top: 28px;
  font-family: var(--font-head); font-weight: 900; font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.22; letter-spacing: -0.035em; text-wrap: balance;
}
.ab-hero__lead { max-width: 36em; margin-top: 24px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.8; color: #c9c9c4; text-wrap: pretty; }
.ab-hero__refs { display: flex; gap: 20px; margin-top: 24px; font-size: 15px; }
.ab-hero__refs a { color: var(--ink-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(242, 242, 239, .42); }
.ab-hero__refs a:hover { text-decoration-color: currentColor; }
.ab-hero__photo { width: 100%; height: auto; align-self: end; }

/* 종이 구간: 메인 sections.css의 is-paper와 같은 종이 결 */
.is-paper {
  background-color: var(--paper);
  background-image: url("/assets/paper-grain.webp"), url("/assets/paper-crease.webp");
  background-size: 512px 512px, 1024px 1024px;
  background-blend-mode: multiply, multiply;
}
.is-paper :focus-visible { outline-color: var(--blue); }
.ab-paper { color: var(--ink); padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(72px, 9vw, 128px); }
.ab-sec {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--ink);
}
.ab-sec:first-child { border-top: 0; }
.ab-sec__title { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -0.03em; }
.ab-sec__lead { max-width: 38em; margin-bottom: 20px; font-size: 17px; line-height: 1.8; color: #2a2a28; text-wrap: pretty; }
.ab-sec__end { margin-top: 24px; font-size: 16px; color: var(--paper-sub); }

/* 리스트: 행 사이 1px 가는 선(삥이FC 3절). 아랫선은 ::after로 그어 스크롤 모션에서 왼쪽부터 긋는다 */
.ab-list li { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 13px 0; font-size: 16px; }
.ab-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--paper-line); transform-origin: left center; }
.ab-list li:first-child { border-top: 1px solid var(--paper-line); }
/* 이름과 설명을 두 칸으로: 이름이 길면 칸 안에서 줄을 바꿔 설명 칸이 들쭉날쭉하지 않게 */
.ab-list--rows li { display: grid; grid-template-columns: 15em minmax(0, 1fr); column-gap: 16px; }
.ab-list--rows li b { font-weight: 700; }
/* 의뢰인: 회사는 브랜드 이름 아래 법인명을 작게, 한 일은 원안 문구를 굵게 두고 그 아래 무엇을 맡았는지 */
.ab-list--work li { padding: 18px 0; }
.ab-list--work li b i { display: block; margin-top: 3px; font-style: normal; font-weight: 500; font-size: 15px; color: var(--paper-sub); }
.ab-list--work li span { display: block; line-height: 1.7; color: #3a3a37; }
.ab-list--work li strong { display: block; margin-bottom: 2px; font-weight: 700; color: var(--ink); }

/* 스크롤 모션: html.is-motion일 때만(움직임 줄이기 설정이면 붙지 않는다). js/about.js가 화면에 들어온 것에 .is-on */
.is-motion .ab-sec__title,
.is-motion .ab-tracks__head,
.is-motion .ab-clients__group h3,
.is-motion .ab-sec__lead,
.is-motion .ab-sec__end,
.is-motion .ab-contact > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.is-motion .ab-list li { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.is-motion .ab-list li::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.6, .05, .25, 1); transition-delay: calc(var(--i, 0) * 60ms + 100ms); }
.is-motion .ab-list li.is-on { opacity: 1; transform: none; }
.is-motion .ab-list li.is-on::after { transform: none; }
.is-motion .is-on { opacity: 1; transform: none; }
.is-motion .ab-contact > :nth-child(2) { transition-delay: .1s; }
.is-motion .ab-contact > :nth-child(3) { transition-delay: .2s; }

/* 첫 화면: 들어오자마자 글이 차례로 올라오고 사진은 아래에서 걷히듯 드러난다 */
@keyframes ab-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes ab-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.is-motion .ab-hero__copy > * { animation: ab-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.is-motion .ab-hero__copy > :nth-child(2) { animation-delay: .08s; }
.is-motion .ab-hero__copy > :nth-child(3) { animation-delay: .16s; }
.is-motion .ab-hero__copy > :nth-child(4) { animation-delay: .28s; }
.is-motion .ab-hero__copy > :nth-child(5) { animation-delay: .36s; }
.is-motion .ab-hero__photo { animation: ab-wipe 1.2s cubic-bezier(.6, .05, .25, 1) .1s both; }

/* 넓은 화면: 긴 리스트를 내려가는 동안 왼쪽 섹션 제목이 머리글 아래에 붙어 따라온다 */
@media (min-width: 1101px) {
  .ab-sec__title { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}
/* 노트북 폭: 왼쪽 제목 칸까지 세 칸이면 설명이 너무 좁아진다. 제목을 위로 올린다 */
@media (max-width: 1100px) {
  .ab-sec { grid-template-columns: 1fr; }
}
.ab-when { flex: 0 0 auto; width: 26px; font-weight: 700; font-size: 15px; color: var(--paper-sub); }
.ab-when.is-now { color: var(--blue); }

.ab-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ab-tracks__head, .ab-clients__group h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--paper-sub); }
.ab-clients { display: grid; gap: 36px; }

/* 6. 연락 */
.ab-contact { padding: clamp(72px, 9vw, 128px) var(--gutter); text-align: center; }
.ab-contact__title { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: clamp(26px, 3vw, 42px); line-height: 1.25; letter-spacing: -0.035em; text-wrap: balance; }
.ab-contact__lead { margin-top: 14px; font-size: 17px; color: #c9c9c4; }
.ab-contact__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 32px; }
.ab-contact__tel { font-weight: 700; font-size: 17px; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: rgba(242, 242, 239, .42); }
.ab-contact__back { margin-top: 40px; font-size: 15px; color: var(--ink-sub); }
.ab-contact__back a { text-underline-offset: .22em; }

@media (max-width: 1080px) {
  .site-header__nav { display: none; }
  .site-header__call { margin-left: auto; }
}
@media (max-width: 860px) {
  :root { --header-h: 60px; }
  .site-header__logo img { width: 76px; }
  .site-header__call { height: 36px; padding: 0 14px; }
  .site-header__call-number { display: none; }

  .ab-hero__inner { grid-template-columns: 1fr; gap: 0; }
  .ab-hero__photo { order: -1; width: 260px; margin: 0 auto; }
  .ab-hero__copy { padding: 28px 0 56px; }
  .ab-hero__title { margin-top: 20px; }
  .ab-sec { grid-template-columns: 1fr; }
  .ab-tracks { grid-template-columns: 1fr; gap: 28px; }
  .ab-list li { flex-direction: column; gap: 2px; }
  .ab-list .ab-when { display: inline; }
  .ab-list li:has(.ab-when) { flex-direction: row; }
  .ab-list--rows li { grid-template-columns: 1fr; row-gap: 2px; }
  /* 한 줄로 쌓이면 회사 이름과 한 일 제목이 둘 다 굵어 붙어 보인다. 회사 이름을 키우고 사이를 띄운다 */
  .ab-list--work li { row-gap: 8px; }
  .ab-list--work li > b { font-size: 18px; }
  .ab-list--work li strong { font-weight: 600; }
  .ab-contact__actions .button { flex: 1 1 100%; }
}