/* ===== ABOUT: 5개 섹션 (대표 메시지 / 원칙 / 철학 / 면허 / 팀) ===== */

/* 콘텐츠는 세로 경계선 왼쪽 영역만 사용 */
.about-main { padding: 0 var(--reserve) 0 1cm; }

/* 각 섹션 = 한 화면 높이, 콘텐츠 세로 중앙 (팀 섹션은 예외) */
.about-main > section { min-height: 100vh; box-sizing: border-box; }

/* 섹션 단위 스냅은 about.js의 휠 엔진이 처리 (CSS smooth는 끔) */
html.snap { scroll-behavior: auto; }

.ab-h {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.45;
  letter-spacing: -0.6px; color: #fff;
}
.ab-h.center { text-align: center; }

/* 업로드 워터마크 빈 박스 (이미지 자리) — 기존 대비 25% 축소 + 중앙정렬 */
.ph {
  position: relative; background: #202020;
  border: 1px dashed rgba(255, 255, 255, .22); aspect-ratio: 4 / 3;
  width: 75%; margin-inline: auto;
}
.ph::after {
  content: "UPLOAD"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .3); font-size: 11px; letter-spacing: 3px; font-weight: 600;
}

/* 1. 대표 메시지 */
.ab1 { display: grid; grid-template-columns: 0.85fr 1fr; gap: 64px; align-items: center; align-content: center; }
.ab1 .ph-portrait { aspect-ratio: 4 / 5; }
.ab1-text { transform: translateX(-1cm); }   /* 텍스트만 왼쪽 1cm (이미지 카드는 유지) */
.ab1-text p {
  margin-top: 22px; font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .78);
}
.ab1-text p:first-of-type { margin-top: 36px; }
.ab1-sign { margin-top: 34px !important; font-size: 15px; color: rgba(255, 255, 255, .6); }
.ab1-sign b { font-weight: 700; color: #fff; letter-spacing: 0.5px; }

/* 2. 3원칙 */
.ab2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-content: center; }
/* 제목/본문을 카드(이미지 박스) 가로폭(75%)에 맞춰 정렬 */
.ab2-item h3,
.ab2-item p { width: 75%; margin-inline: auto; }
.ab2-item h3 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.4px; color: #fff; margin-bottom: 22px;
}
.ab2-item .ph { aspect-ratio: 1 / 1; }
.ab2-item p {
  margin-top: 20px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .7);
}

/* 3. 철학 (가운데) */
.ab3 { display: flex; flex-direction: column; justify-content: center; }
.ab3-body { max-width: 760px; margin: 56px auto 0; }
.ab3-body p {
  font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .78);
  margin-top: 18px; text-align: center;
}
.ab3-body b { color: #fff; font-weight: 600; }

/* 4. 면허/인증 */
.ab4 { display: grid; grid-template-columns: 1fr 0.9fr; gap: 64px; align-items: center; align-content: center; }
.ab4-text p { margin-top: 22px; font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .72); }
.ab4-text p:first-of-type { margin-top: 36px; }
.ab4 .ph-cert { aspect-ratio: 3 / 4; }

/* 5. 팀 (자연 높이, 상단 정렬 — 한 화면보다 김) */
.ab5 { min-height: auto; padding: 120px 0; }
/* 제목을 첫 카드(이미지 75% 중앙정렬) 시작 위치에 맞춤: 셀폭의 12.5% = (전체-3*24px)/32 */
.ab-team-title { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -1px; margin-bottom: 50px; margin-left: calc((100% - 72px) / 32); }
.ab-team-title span { font-weight: 400; opacity: .55; font-size: 0.6em; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; }
.team-card .ph { aspect-ratio: 1 / 1; }
/* 이름/직급을 이미지(75%) 폭에 맞춰 정렬 — 카드 밖으로 빠져나오지 않게 */
.team-card .t-name,
.team-card .t-role { width: 75%; margin-inline: auto; }
.team-card .t-name { margin-top: 14px; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.team-card .t-role { margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* 텍스트 15% 확대 */
body.about .page-h1 { font-size: clamp(51px, 11.5vw, 138px); }
.ab-h { font-size: clamp(25px, 2.76vw, 34.5px); }
.ab1-text p, .ab1-sign, .ab3-body p { font-size: 17px; }
.ab2-item h3 { font-size: 21px; }
.ab2-item p, .ab4-text p { font-size: 16px; }
.ab-team-title { font-size: clamp(30px, 3.45vw, 46px); }
.team-card .t-name { font-size: 15px; }
.team-card .t-role { font-size: 14px; }

@media (max-width: 760px) {
  .about-main { padding: 90px var(--gap); }
  .about-main > section { min-height: auto; padding: 70px 0; }
  .ab1, .ab4 { grid-template-columns: 1fr; gap: 32px; }
  .ab1-text { transform: none; }   /* 모바일: 좌측 이동 해제(잘림 방지) */
  .ab2 { grid-template-columns: 1fr; gap: 48px; }
  .ab5 { padding: 70px 0; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
}