/* ============================================
   About Page Styles
   (Our Story + Duty of Care + Contact)
   ============================================ */

/* ── S1 About Hero ──
   Layout inherited from .page-hero (components.css).
   Only page-specific overrides below.
   ─────────────────────────────────────────────────── */
/* .about-hero height/min-height는 .page-hero(80vh/560px) 기본값 사용 — 기획서 80vh 의도 */

.about-hero .page-hero__bg img {
  animation: heroZoom 8s var(--ease-out) forwards;
}

/* H1 자연 2줄 wrap — 880px content max-width로는 "Korea is where global business"가
   안 들어가 3줄이 됨. content를 약간 넓히고 text-wrap: balance로 균등 분배. */
.about-hero .page-hero__content {
  max-width: 1080px;
}

.about-hero .page-hero__content h1 {
  text-wrap: balance;
}

.about-hero .page-hero__sub {
  font-size: clamp(15px, 1.3vw, 21px);
  font-weight: 400;
  opacity: 0.9;
}

.about-hero .page-hero__sub em {
  font-weight: 300;
  font-style: normal;
}

/* ── Sub-hero (통합 페이지 PART 인트로) ──
   page-hero(80vh)와 일반 section 사이의 중간 위계.
   PART 2 (.duty-hero) · PART 3 (.contact-hero)에 공통 적용.
   center 정렬 — trust-band 시그니처와 일관, "구역 인트로"임을 시각화. */
.sub-hero {
  padding-block: var(--space-4xl);
  position: relative;
  text-align: center;
}

/* 상단 중앙 짧은 burgundy accent — "구역 시작" 시각 hint */
.sub-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: var(--color-primary);
}

.sub-hero .section__heading {
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.25;
  margin: 0 auto var(--space-lg);
  text-wrap: normal;
  max-width: none;
}

.sub-hero .duty-hero__sub,
.sub-hero .contact-hero__sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.sub-hero .accent-chip {
  margin-top: var(--space-xl);
}

/* ── Sub-hero stat row (chip 대체 — trust signal 시각 강화) ── */
.sub-hero__stats {
  list-style: none;
  padding: 0;
  margin: var(--space-2xl) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 720px;
}

.sub-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sub-hero__stat-value {
  font-family: var(--font-display, inherit);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-invert, #fff);
}

.sub-hero__stat-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
}

/* Light sub-hero (PART 3 contact-hero)에서는 border 색 조정 */
.sub-hero:not(.section--dark) .sub-hero__stat {
  border-top-color: var(--color-border-light, rgba(0, 0, 0, 0.12));
}

.sub-hero:not(.section--dark) .sub-hero__stat-value {
  color: var(--color-text);
}

@media (max-width: 600px) {
  .sub-hero__stats {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ── Section Divider (anchor only — Light↔Dark 전환은 배경색으로 충분) ── */
.section-divider {
  scroll-margin-top: var(--gnb-height);
}

/* ── S3 Gap Section ── */

.gap-card {
  min-height: 200px;
}

/* ── S4 Answer Section ── */

/* ── S5 Built Section ── */

/* ── S6 Team Section ── */
.team-section__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
  align-items: center;
}


.team-section__image {
  border-radius: 4px;
  overflow: hidden;
}

.team-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

@media (max-width: 1023px) {
  .team-section__header {
    grid-template-columns: 1fr;
  }
  .team-section__image {
    order: -1;
  }
}

/* ── S7 Chauffeur Section ── */
.chauffeur-section {
  padding: 0;
}

.chauffeur-section > .container {
  max-width: none;
  padding: 0;
}

.chauffeur-section .split {
  min-height: 500px;
}

/* S7 h2는 .section__heading 클래스 없이 일반 h2 — 글로벌 .section__intro의 negative margin-top
   (-24px)이 무방비로 작용해 h2와 intro p가 겹쳤던 이슈 패치. */
.chauffeur-section .split__content > h2 {
  margin-bottom: var(--space-lg);
}

.chauffeur-section .split__content > .section__intro {
  margin-top: 0;
}

/* round 6 (2026-05-12): GPT-image-2 재생성으로 슬라이드 본문에 curriculum 리스트 없어
   fade-to-bg overlay 불필요. 이전 NB2 이미지(BACKGROUND VERIFICATION 등 박힘) 대응 패치 제거. */
.chauffeur-section .split__media {
  position: relative;
}

/* round 6: 우측 텍스트 영역 그레이 surface bg로 대비 강화 */
.chauffeur-section .split__content {
  background: var(--color-bg-surface);
  max-width: none;
}

.chauffeur-section__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.chauffeur-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
}

.chauffeur-card h3 {
  margin-bottom: 0;
}

.chauffeur-card p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-sub);
}

/* ── Duty of Care Hero ──
   .sub-hero 컴포넌트가 padding · text-align · max-width 처리.
   sub 폰트 사이즈만 페이지 컨텍스트에 맞게 override. */
.duty-hero__sub {
  font-size: clamp(15px, 1.3vw, 21px);
  line-height: 1.6;
  opacity: 0.8;
}

/* ── Duty Standard (Dark band with cards) ──
   .trust-band 패턴 활용 (text-align: center · .trust-band__icon 64px · .trust-band__grid).
   v3.13 ISO 31030 badge는 .trust-band__icon로 적용. */
.duty-standard {
  padding-top: 0;
}

/* lead 단락은 about-only — trust-band 부모의 text-align:center를 받지만 max-width 박스 자체는 margin auto로 가운데 */
.duty-standard__lead {
  font-size: clamp(15px, 1.3vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 auto var(--space-xl);
  opacity: 0.85;
  max-width: 680px;
}

/* trust-band__icon 축소 — about-duty 컨텍스트 (SVG 48×48). 카드/heading 룰은 글로벌(.trust-band)에서 처리. */
.duty-standard .trust-band__icon {
  width: 48px;
  height: 48px;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: 0 auto var(--space-md);
  color: var(--color-primary);
}

/* ── Framework Steps (4-step timeline) ── */

/* round 6 (2026-05-12): framework-step 세로 timeline → events.html 가로 process-overview로 교체.
   세로 패턴(.framework-steps / .framework-step / __marker / __number / __line / __content) 룰 일괄 제거.
   현재 about.html S4는 글로벌 .process-overview(components.css) 사용. */

/* ── Compliance Grid (3-col with images) ── */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.compliance-card {
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.compliance-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.compliance-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.compliance-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}

.compliance-card:hover .compliance-card__image img {
  transform: scale(1.03);
}

.compliance-card__body {
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.compliance-card__body h3 {
  margin-bottom: 0;
}

.compliance-card__body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-sub);
}

.compliance-section__cta {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* ── Related Cards (slim band · cross-link · v3.13) ── */
.related-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 767px) {
  .related-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1023px) {
  .compliance-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Contact Hero ── */
.contact-hero {
  padding-bottom: 0;
}

.contact-hero__sub {
  font-size: clamp(15px, 1.3vw, 21px);
  line-height: 1.6;
  color: var(--color-text-sub);
  max-width: 680px;
}

/* ── Contact Paths (4-path entry grid) ── */
.contact-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 767px) {
  .contact-paths {
    grid-template-columns: 1fr;
  }
}

/* ── Contact Form ── */
.contact-form-wrapper {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-3xl);
  align-items: start;
}

.contact-form-info h3 {
  font-size: 17px;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}

.contact-form-info h3:first-child {
  margin-top: 0;
}

.contact-form-info p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-sub);
}

.contact-form-info a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.contact-form__field {
  position: relative;
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  padding: 20px 16px 8px;
  font-family: var(--font-body);
  font-size: 17px;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.2s var(--ease-out);
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-text);
}

.contact-form__field label {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 16px;
  color: var(--color-text-sub);
  pointer-events: none;
  transition: all 0.2s var(--ease-out);
}

.contact-form__field input:focus ~ label,
.contact-form__field input:not(:placeholder-shown) ~ label,
.contact-form__field select:focus ~ label,
.contact-form__field select:valid ~ label,
.contact-form__field textarea:focus ~ label,
.contact-form__field textarea:not(:placeholder-shown) ~ label {
  top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.contact-form__note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-sub);
  max-width: 360px;
}

.contact-form__hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-sub);
  margin-top: -8px;
}

@media (max-width: 1023px) {
  .contact-form-wrapper {
    grid-template-columns: 1fr;
  }
  .contact-form-info {
    order: 1;
  }
}

@media (max-width: 767px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
  .contact-form__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Office Info ── */
.office-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  padding: var(--space-2xl);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
}

.office-info__korean {
  font-size: 16px;
  color: var(--color-text-sub);
  margin-top: var(--space-xs);
}

.office-info__list {
  margin-top: var(--space-lg);
}

.office-info__list li {
  font-size: 16px;
  line-height: 1.65;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.office-info__list li:last-child {
  border-bottom: none;
}

.office-info__list strong {
  display: inline-block;
  width: 80px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-sub);
}

.office-info__list a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.office-info__map {
  width: 100%;
  height: 100%;
  min-height: 280px;
}

.office-info__map-placeholder {
  width: 100%;
  height: 100%;
  min-height: 280px;
  background: var(--color-bg-surface);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-sub);
}

@media (max-width: 1023px) {
  .office-info {
    grid-template-columns: 1fr;
  }
}

/* ── Final CTA (override for 2-path) ── */
.about-page .final-cta__paths,
.final-cta__paths {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
  .final-cta__paths {
    grid-template-columns: 1fr;
  }
}

/* ── Scroll-margin for anchor navigation ── */
#team,
#duty-of-care,
#contact {
  scroll-margin-top: calc(var(--gnb-height) + var(--space-lg));
}