/* ─────────────────────────────────────────
   Wildfish — about-fp.css
   About 풀페이지 4장 · 포트폴리오 상세(project.css)와 같은 톤앤매너
   수치는 레퍼런스(1920×1080 환산) 기준 × --u
───────────────────────────────────────── */

.wf-abt {
  --pp-panel: #f6f6f6;
  --ab-grey: #e6e6e6;
  --pp-ink: #161616;
  --pp-font-display: 'Montserrat', 'PretendardVariable', 'Pretendard', sans-serif;
  --pp-font-text: 'Helvetica Neue', Helvetica, Arial, 'PretendardVariable', 'Pretendard', sans-serif;
  --ab-blue: #4f5bd5;
  --ab-red: #ff5a4f;
  --ab-black: #111;
  background: var(--pp-panel);
  color: var(--pp-ink);
}
.wf-abt p, .wf-abt h2, .wf-abt ul, .wf-abt figure { margin: 0; }
.wf-abt ul { list-style: none; padding: 0; }
.wf-abt a { color: inherit; }

.ab-panel-grey { background: var(--ab-grey); }

/* 1920×1080 스테이지 (섹션 가운데) */
.ab-stage {
  position: absolute; left: 50%; top: 50%;
  width: calc(1920 * var(--u)); height: calc(1080 * var(--u));
  transform: translate(-50%, -50%);
}

/* ─── 타이틀 ─── */
.ab-hello { position: absolute; top: calc(140 * var(--u)); left: calc(196 * var(--u)); width: calc(560 * var(--u)); }
.ab-t1, .ab-t2 { font-family: var(--pp-font-display); color: #000; line-height: 1; white-space: nowrap; }
.ab-t1 { font-size: max(40px, calc(110 * var(--u))); font-weight: 900; letter-spacing: -0.03em; }
.ab-t2 { font-size: max(26px, calc(68 * var(--u))); font-weight: 800; letter-spacing: -0.02em; margin-top: calc(2 * var(--u)); }
.ab-t1 span, .ab-t2 span { display: inline-block; }

.ab-titles { position: absolute; top: calc(118 * var(--u)); left: calc(196 * var(--u)); width: calc(560 * var(--u)); }
.ab-h1, .ab-h2 { font-family: var(--pp-font-display); color: #000; line-height: 1; white-space: nowrap; }
.ab-h1 { font-size: max(28px, calc(74 * var(--u))); font-weight: 800; letter-spacing: -0.03em; }
.ab-h2 { font-size: max(40px, calc(120 * var(--u))); font-weight: 900; letter-spacing: -0.035em; margin-top: calc(4 * var(--u)); }
.ab-h2 span { display: inline-block; }

/* 본문 (project.css 의 .pp-heading / .pp-body 공용) */
.ab-lines {
  font-family: var(--pp-font-text);
  font-size: max(13px, calc(17.5 * var(--u)));
  line-height: 1.34;
  color: #111;
}
.ab-lines a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.ab-lines a:hover { opacity: 0.6; }


/* ══════════════════════════════════════
   01 · STUDIO
══════════════════════════════════════ */
.ab-photo {
  position: absolute; top: calc(346 * var(--u)); left: calc(196 * var(--u));
  width: calc(460 * var(--u)); height: calc(318 * var(--u));
  overflow: hidden; background: transparent;   /* 투명 PNG 가 그대로 보이도록 배경 없음 */
}
.ab-photo-img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.ab-pos--top .ab-photo-img { object-position: center top; }
.ab-pos--bottom .ab-photo-img { object-position: center bottom; }
.ab-pos--left .ab-photo-img { object-position: left center; }
.ab-pos--right .ab-photo-img { object-position: right center; }

.ab-story { position: absolute; top: calc(688 * var(--u)); left: calc(196 * var(--u)); width: calc(470 * var(--u)); }
.ab-story .pp-body { margin-top: calc(10 * var(--u)); }

.ab-right { position: relative; flex: 1 1 0; min-width: 0; height: 100%; background: var(--pp-panel); overflow: hidden; }
.ab-right-stage {
  position: absolute; left: 50%; top: 50%;
  width: calc(1125 * var(--u)); height: calc(1080 * var(--u));
  transform: translate(-50%, -50%);
  padding: calc(150 * var(--u)) calc(60 * var(--u)) 0 calc(176 * var(--u));
  box-sizing: border-box;
}
.ab-block + .ab-block,
.ab-team + .ab-block { margin-top: calc(56 * var(--u)); }

/* 팀 사진 2장 (3:2 가로형) — 크기는 --ab-team-w 로 조절 (1920 화면 기준 px) */
.ab-team { --ab-team-w: 420; display: flex; gap: calc(24 * var(--u)); }
.ab-team-item { margin: 0; width: calc(var(--ab-team-w) * var(--u)); }
.ab-team-frame { aspect-ratio: 3 / 2; overflow: hidden; background: transparent; line-height: 0; }   /* 투명 PNG 가 그대로 보이도록 배경 없음 */
.ab-team-img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.ab-team .pp-caption { text-align: left; }
.ab-h {
  font-family: var(--pp-font-display);
  font-size: max(20px, calc(31 * var(--u)));
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #000;
}
.ab-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 3), calc(48 * var(--u)));
  grid-template-columns: repeat(3, calc(281 * var(--u)));
  margin-top: calc(20 * var(--u));
}
.ab-list li {
  display: flex; align-items: center; gap: calc(19 * var(--u));
  font-family: var(--pp-font-text);
  font-size: max(12px, calc(17.5 * var(--u)));
  line-height: 1.2;
  color: #111;
}
.ab-list-ico { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); display: flex; align-items: center; justify-content: center; color: #222; }
.ab-icon { width: 100%; height: 100%; }
.ab-ico-img { width: 100%; height: 100%; object-fit: contain; }
.ab-abbr {
  display: flex; align-items: center; justify-content: center;
  width: calc(34 * var(--u)); height: calc(34 * var(--u));
  border: max(1px, calc(1.6 * var(--u))) solid #222;
  font-family: var(--pp-font-text);
  font-style: normal;
  font-size: max(10px, calc(17 * var(--u)));
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ab-block .ab-lines { margin-top: calc(18 * var(--u)); }


/* ══════════════════════════════════════
   02 · HISTORY (타임라인)
══════════════════════════════════════ */
.ab--history { background: var(--pp-panel); }
.wf-abt .ab--clients { background: #fff; }   /* 로고 흰 바탕과 같은 흰색 */

.ab-tl { position: absolute; inset: 0; }
.ab-tl-line {
  position: absolute; left: calc(150 * var(--u)); right: calc(43 * var(--u)); top: calc(533 * var(--u));
  height: max(4px, calc(5 * var(--u)));
  background: radial-gradient(circle, #111 45%, transparent 50%) 0 50% / calc(13 * var(--u)) 100% repeat-x;
}
.ab-tl-item { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * var(--u)); width: 0; }
.ab-tl-dot {
  position: absolute; top: calc(504 * var(--u)); left: calc(-31 * var(--u));
  width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ab-blue); color: #fff; z-index: 2;
}
.ab-tl-item--education .ab-tl-dot { background: var(--ab-red); color: #111; }
.ab-tl-item--studio .ab-tl-dot { background: var(--ab-black); color: #fff; }
.ab-tl-ico { width: 58%; height: 58%; stroke-width: 2; }

.ab-tl-stem { position: absolute; left: 0; width: 1px; background: #111; }
.is-top .ab-tl-stem         { top: calc(320 * var(--u)); height: calc(184 * var(--u)); }
.is-top-near .ab-tl-stem    { top: calc(434 * var(--u)); height: calc(70 * var(--u)); }
.is-bottom .ab-tl-stem      { top: calc(566 * var(--u)); height: calc(244 * var(--u)); }
.is-bottom-near .ab-tl-stem { top: calc(566 * var(--u)); height: calc(92 * var(--u)); }

.ab-tl-text { position: absolute; left: 0; width: calc(var(--tw, 260) * var(--u)); }
.is-top .ab-tl-text         { bottom: calc(774 * var(--u)); }
.is-top-near .ab-tl-text    { bottom: calc(660 * var(--u)); }
.is-bottom .ab-tl-text      { top: calc(828 * var(--u)); }
.is-bottom-near .ab-tl-text { top: calc(676 * var(--u)); }

.ab-tl-body {
  border-left: 1px solid #111;
  padding-left: calc(14 * var(--u));
  font-family: var(--pp-font-text);
  color: #111;
}
.ab-tl-body strong { display: block; font-size: max(12px, calc(20 * var(--u))); font-weight: 700; line-height: 1.17; }
.ab-tl-body span { display: block; margin-top: calc(3 * var(--u)); font-size: max(10px, calc(15.5 * var(--u))); line-height: 1.25; color: #666; }
.ab-tl-dates {
  position: absolute; right: calc(100% + 14 * var(--u)); top: 0;
  text-align: right; white-space: nowrap;
  font-family: var(--pp-font-text);
  font-size: max(12px, calc(20 * var(--u)));
  line-height: 1.17;
  color: #111;
}
.ab-tl-dates span { display: block; }
.ab-tl-dates small { font-size: 0.7em; }

.ab-legend {
  position: absolute; right: calc(80 * var(--u)); bottom: calc(60 * var(--u));
  display: flex; gap: calc(26 * var(--u));
  font-family: var(--pp-font-text); font-size: max(10px, calc(13 * var(--u))); color: #555;
}
.ab-legend li { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ab-legend li::before { content: ''; width: calc(12 * var(--u)); height: calc(12 * var(--u)); min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--ab-blue); }
.ab-legend--education::before { background: var(--ab-red) !important; }
.ab-legend--studio::before { background: var(--ab-black) !important; }

/* 타임라인 선: 왼쪽에서 오른쪽으로 그려짐 (fullpage.css 의 data-anim="line") */


/* ══════════════════════════════════════
   03 · CLIENTS
══════════════════════════════════════ */
.ab-note {
  margin-top: calc(40 * var(--u));
  max-width: calc(420 * var(--u));
  font-family: var(--pp-font-text);
  font-size: max(13px, calc(17.5 * var(--u)));
  line-height: 1.4;
  color: #333;
}
.ab-tagline {
  position: absolute; left: calc(196 * var(--u)); bottom: calc(96 * var(--u));
  font-family: var(--pp-font-display);
  font-size: max(14px, calc(26 * var(--u)));
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: #111;
}
.ab-tagline span, .ab-tagline strong { display: block; }
.ab-tagline span { font-weight: 300; }
.ab-tagline strong { font-weight: 700; }

.ab-logos {
  position: absolute; left: calc(770 * var(--u)); right: calc(80 * var(--u)); top: calc(110 * var(--u)); bottom: calc(100 * var(--u));
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  grid-auto-rows: calc(var(--rowh, 108) * var(--u));
  align-content: center;
  column-gap: calc(18 * var(--u));
}
.ab-logos li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ab-logos a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ab-logo-img {
  display: block;
  max-width: 82%;
  max-height: calc(min(58, var(--rowh, 108) * 0.56) * var(--u));
  width: auto; height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;        /* 흰 배경 로고도 페이지 배경에 자연스럽게 */
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.ab-logos li:hover .ab-logo-img { transform: scale(1.05); }
.is-mono .ab-logo-img { filter: grayscale(1); opacity: 0.72; }
.is-mono .ab-logos li:hover .ab-logo-img { filter: none; opacity: 1; }


/* ══════════════════════════════════════
   04 · CONTACT
══════════════════════════════════════ */
.ab-contact { position: absolute; top: calc(390 * var(--u)); left: calc(196 * var(--u)); width: calc(520 * var(--u)); }
.ab-contact-block + .ab-contact-block { margin-top: calc(34 * var(--u)); }
.ab-contact-block .ab-lines { margin-top: calc(10 * var(--u)); line-height: 1.45; }

.ab-maplinks {
  position: absolute; left: calc(196 * var(--u)); bottom: calc(118 * var(--u));
  display: grid; grid-template-columns: repeat(2, calc(240 * var(--u))); gap: calc(22 * var(--u)) calc(26 * var(--u));
}
.ab-linkbtn {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  padding: 0 calc(12 * var(--u)) calc(12 * var(--u)) 0;
  font-family: 'Poppins', var(--pp-font-display);
  font-size: max(13px, calc(19 * var(--u)));
  letter-spacing: 0.04em;
  color: #111; text-decoration: none; white-space: nowrap;
}
.ab-linkbtn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #111; transform-origin: left; transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1); }
.ab-linkbtn:hover::after { transform: scaleX(0.35); }
.ab-linkbtn i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 9px; min-height: 9px; border: 1px solid #111; border-radius: 50%; transition: background 0.3s ease; }
.ab-linkbtn:hover i { background: #111; }

.ab-map { background: #dcdcdc; }
.ab-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ab-map.is-mono .ab-map-frame { filter: grayscale(1) contrast(1.06) brightness(1.03); }
.ab-map-pin {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, calc(-100% - 46px));
  padding: 7px 12px;
  background: #111; color: #fff;
  font-family: var(--pp-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.ab-map-pin::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #111; transform: translateX(-50%) rotate(45deg); }
.ab-map-shield {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
.ab-map-shield span {
  margin: 0 22px 64px 0; padding: 8px 14px;
  background: rgba(255, 255, 255, 0.92); color: #111;
  font-family: var(--pp-font-text); font-size: 12px; letter-spacing: 0.02em;
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.ab-map-shield:hover span, .ab-map-shield:focus-visible span { opacity: 1; transform: none; }
.ab-map.is-live .ab-map-shield { pointer-events: none; }
.ab-map.is-live .ab-map-shield span, .ab-map.is-live .ab-map-pin { opacity: 0; }


/* ══════════════════════════════════════
   내비 · 틱
══════════════════════════════════════ */
.ab-nav .pp-projnav-name { max-width: calc(140 * var(--u)); }


/* ══════════════════════════════════════
   태블릿 · 모바일 (일반 스크롤)
══════════════════════════════════════ */
html:not(.wf-fp-on) body.wf-about-fp .wf-abt { padding-top: 68px; }
html:not(.wf-fp-on) .wf-abt { --u: min(1px, calc(100vw / 900)); }
html:not(.wf-fp-on) .wf-abt .pp { display: flex; flex-direction: column; }
html:not(.wf-fp-on) .ab-stage,
html:not(.wf-fp-on) .ab-right-stage { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; padding: 56px 24px; }
html:not(.wf-fp-on) .ab-hello,
html:not(.wf-fp-on) .ab-titles,
html:not(.wf-fp-on) .ab-photo,
html:not(.wf-fp-on) .ab-story,
html:not(.wf-fp-on) .ab-contact,
html:not(.wf-fp-on) .ab-maplinks,
html:not(.wf-fp-on) .ab-tagline,
html:not(.wf-fp-on) .ab-logos,
html:not(.wf-fp-on) .ab-legend { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
html:not(.wf-fp-on) .ab-t1, html:not(.wf-fp-on) .ab-h2 { font-size: clamp(44px, 13vw, 96px); white-space: normal; }
html:not(.wf-fp-on) .ab-t2 { font-size: clamp(28px, 8vw, 60px); white-space: normal; }
html:not(.wf-fp-on) .ab-h1 { font-size: clamp(28px, 8vw, 60px); white-space: normal; }
html:not(.wf-fp-on) .ab-photo { height: auto; aspect-ratio: 460 / 356; margin-top: 28px; max-width: 560px; }
html:not(.wf-fp-on) .ab-story { margin-top: 28px; max-width: 560px; }
html:not(.wf-fp-on) .wf-abt .pp-heading { font-size: 22px; }
html:not(.wf-fp-on) .wf-abt .pp-body,
html:not(.wf-fp-on) .ab-lines,
html:not(.wf-fp-on) .ab-note { font-size: 15px; line-height: 1.5; }
html:not(.wf-fp-on) .ab-right { flex: none; height: auto; }
html:not(.wf-fp-on) .ab-h { font-size: 22px; }
html:not(.wf-fp-on) .ab-block + .ab-block { margin-top: 40px; }
html:not(.wf-fp-on) .ab-list { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44px; margin-top: 14px; }
html:not(.wf-fp-on) .ab-list li { font-size: 14px; gap: 12px; }
html:not(.wf-fp-on) .ab-list-ico { width: 30px; height: 30px; }
html:not(.wf-fp-on) .ab-abbr { width: 27px; height: 27px; font-size: 13px; border-width: 1.2px; }

/* 연혁: 세로 목록 */
html:not(.wf-fp-on) .ab-tl { position: relative; inset: auto; margin-top: 40px; padding-left: 50px; }
html:not(.wf-fp-on) .ab-tl-line { left: 17px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: radial-gradient(circle, #111 45%, transparent 50%) 50% 0 / 100% 11px repeat-y; }
html:not(.wf-fp-on) .ab-tl-item { position: relative; left: auto; top: auto; bottom: auto; width: auto; padding: 8px 0 22px; }
html:not(.wf-fp-on) .ab-tl-stem { display: none; }
html:not(.wf-fp-on) .ab-tl-dot { top: 6px; left: -50px; width: 38px; height: 38px; }
html:not(.wf-fp-on) .ab-tl-text { position: relative; left: auto; top: auto; bottom: auto; width: auto; display: flex; gap: 14px; }
html:not(.wf-fp-on) .ab-tl-dates { position: static; flex: none; width: 76px; font-size: 15px; }
html:not(.wf-fp-on) .ab-tl-body strong { font-size: 16px; }
html:not(.wf-fp-on) .ab-tl-body span { font-size: 13px; }
html:not(.wf-fp-on) .ab-legend { margin-top: 12px; }

/* 클라이언트 */
html:not(.wf-fp-on) .ab-tagline { margin-top: 28px; font-size: 16px; }
html:not(.wf-fp-on) .ab-logos { margin-top: 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 72px; column-gap: 10px; }
html:not(.wf-fp-on) .ab-logo-img { max-height: 34px; }
@media (min-width: 600px) { html:not(.wf-fp-on) .ab-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 연락처 · 지도 */
html:not(.wf-fp-on) .ab-contact { margin-top: 36px; }
html:not(.wf-fp-on) .ab-maplinks { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:not(.wf-fp-on) .ab-linkbtn { font-size: 14px; }
html:not(.wf-fp-on) .ab--contact .pp-visual { order: 3; aspect-ratio: auto; height: 60vh; min-height: 320px; }
html:not(.wf-fp-on) .ab--contact .pp-panel { order: 1; }
html:not(.wf-fp-on) .ab--studio .pp-panel { order: 1; }
html:not(.wf-fp-on) .ab--studio .ab-right { order: 2; }

html:not(.wf-fp-on) .ab-team { --ab-team-w: auto; gap: 12px; }
html:not(.wf-fp-on) .ab-team-item { width: auto; flex: 1 1 0; max-width: 420px; }
html:not(.wf-fp-on) .ab-team + .ab-block { margin-top: 40px; }

/* 모바일(일반 스크롤): 설명 글을 화면 전체 폭으로 */
html:not(.wf-fp-on) .ab-note,
html:not(.wf-fp-on) .ab-textblock,
html:not(.wf-fp-on) .ab-contact,
html:not(.wf-fp-on) .ab-story { max-width: none; }