/* ==========================================================================
   about-mobile.css
   About 페이지 모바일 반응형 — Figma "01_About" 402px 기준 (node 334:3300)
   about.css 뒤에 로드 (동일 명시도, 나중 규칙 우선).
   ========================================================================== */
@media (max-width: 768px) {
  /* ----- 공통 배지 12px ----- */
  .about-reneum__breadcrumb,
  .ceo-message__title,
  .beliefs__title,
  .brand-identity__title {
    /* (개별 섹션에서 크기 지정) */
  }

  /* Navbar 모바일 스타일은 css/common.css 로 통일 이동 (전 페이지 공통) */

  /* ======================================================================
     Hero (sub) — 세로 배경 + 하단 좌측 정렬 / 타이틀 48px (Figma 402x540)
     ====================================================================== */
  .about-hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 402 / 540;
    align-items: flex-end;       /* 하단 정렬 */
    padding: 2rem 0.9375rem;     /* 32px 15px */
    background-image: url("../assets/images/about/hero-bg-mobile.jpg");
    background-position: center;
  }
  .about-hero__content {
    width: 100%;
  }
  .about-hero__title {
    font-size: clamp(2.5rem, 12vw, 3rem); /* 48px @402 */
    line-height: 1.19;
    text-align: left;
  }

  /* ======================================================================
     Section 2 — About RENEUM (title 38px / desc 18px / 라운드 카드 r60)
     ====================================================================== */
  .about-reneum {
    padding: 5rem 0; /* 80px 상하 */
  }
  .about-reneum__content {
    padding-inline: 0.9375rem; /* 15px */
    gap: 3rem; /* 48px (Figma Section gap) */
  }
  /* desc ↔ 카드 간격: Figma Frame16 gap 48 (about.css 모바일 32 → 보정) */
  .about-reneum__body {
    gap: 3rem; /* 48px */
  }
  .about-reneum__breadcrumb {
    font-size: 1.125rem; /* 18px */
    color: #222222; /* Figma */
  }
  .about-reneum__title {
    font-size: 2.375rem; /* 38px */
  }
  .about-reneum__desc {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5;
  }
  .about-reneum__desc strong {
    font-size: 1.125rem; /* 18px */
  }
  /* 카드: Figma Frame17 372x600 — r60, 회색 위 [이미지 372x300 / 로고 372x300] */
  .about-reneum__card {
    border-radius: 3.75rem; /* 60px (Figma) */
  }
  .about-reneum__card-image {
    aspect-ratio: 372 / 300; /* Figma: 상단 가로형 이미지 */
    max-height: none;
  }
  .about-reneum__card-image img {
    aspect-ratio: 372 / 300;
  }
  /* 로고 영역: 이미지와 동일한 372x300 정사각 → 회색 배경 중앙 로고 */
  .about-reneum__card-logo {
    aspect-ratio: 372 / 300;
    height: auto;
    padding: 0;
  }
  .about-reneum__card-logo img {
    width: 84%; /* Figma 로고 ≈ 319/372 */
    max-width: none;
    height: auto;
  }

  /* ======================================================================
     Section 3 — CEO Message (title 38px / quote 40px / 서명 pill)
     ====================================================================== */
  .ceo-message {
    padding: 5rem 0; /* 80px */
  }
  .ceo-message__content {
    gap: 3rem; /* 48px (Figma Section gap: CEO Message ↔ contents) */
    padding-inline: 0.9375rem; /* 15px (Figma) */
  }
  /* 인용+서명 블록: 데스크탑 padding-top 114px 해제 (모바일은 content gap 48이 간격) */
  .ceo-message__quote-block {
    padding-top: 0;
    gap: 3rem; /* 48px (Figma: 인용문 ↔ 서명 pill) */
  }
  .ceo-message__title {
    font-size: 2.375rem; /* 38px */
  }
  .ceo-message__quote-text {
    font-size: clamp(2.25rem, 10vw, 2.5rem); /* 40px @402, 좁은 폰 36px까지 축소 */
    line-height: 1.4;
  }
  .ceo-message__quote-text br {
    display: inline; /* Figma: 줄바꿈 유지 */
  }
  .ceo-message__card {
    margin-top: 0;
    padding: 1rem 2rem;
    border-radius: 6.25rem; /* pill (Figma r136) */
  }
  .ceo-message__signature {
    font-size: 1.5rem; /* 24px */
  }
  .ceo-message__signature-role {
    font-size: 1.125rem; /* 18px */
  }
  .ceo-message__paragraph {
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
  }

  /* ======================================================================
     Section 4 — Core Values (title 42px / Core Values 32px / 흰 카드 r40)
     ====================================================================== */
  .beliefs__inner {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-inline: 0.9375rem; /* 15px */
    gap: 3rem; /* 48px */
  }
  .beliefs__title {
    font-size: 2.625rem; /* 42px */
    color: #222222; /* Figma */
  }
  /* values: [미션/비전 + Core Values] ↔ 카드 간격 24 (Figma Frame25 gap) */
  .beliefs__values {
    gap: 1.5rem; /* 24px */
  }
  /* 미션/비전 묶음 ↔ Core Values 라벨 60, 상단 여백 제거 (Figma contents) */
  .beliefs__values-head {
    gap: 3.75rem; /* 60px */
    padding: 0 0.9375rem; /* 15px (Figma contents pad-inline) */
  }
  /* Mission ↔ Vision 60 (Figma Frame27 gap) */
  .beliefs__mission-vision {
    gap: 3.75rem; /* 60px */
  }
  /* 아이콘+타이틀 ↔ 본문 24 (Figma Frame26 gap) */
  .beliefs__mv-col {
    gap: 1.5rem; /* 24px */
  }
  .beliefs__mv-title {
    font-size: 2rem; /* 32px */
  }
  /* 본문 들여쓰기 30 (Figma Frame57 pad-inline) */
  .beliefs__mv-desc {
    padding-inline: 1.875rem; /* 30px */
  }
  .beliefs__values-title {
    font-size: 2rem; /* 32px */
  }
  .beliefs__cards {
    gap: 3rem; /* 48px */
    padding: 3rem 1.875rem; /* 48px 30px */
    border-radius: 2.5rem; /* 40px (Figma r40) */
  }
  .beliefs__card {
    gap: 0.75rem; /* 12px */
  }

  /* ======================================================================
     Section 5 — Brand Identity (title 38px / 통짜 흰 카드 r60)
     ====================================================================== */
  .brand-identity {
    padding: 5rem 0; /* 80px */
  }
  .brand-identity__content {
    padding-inline: 0.9375rem; /* 15px */
    gap: 3.75rem; /* 60px */
  }
  .brand-identity__title {
    font-size: 2.375rem; /* 38px */
  }
  /* Figma: 흰 카드는 로고영역(300px)만, 본문은 회색 배경 위. main 은 투명 래퍼 */
  .brand-identity__main {
    flex-direction: column;
    align-items: center;
    gap: 5rem; /* 80px (Figma Frame25 gap) */
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }
  /* 로고/심볼/스와치 = 흰 라운드 카드 (Figma hero-logo-icon 300x527 r60) */
  .brand-identity__logo-card {
    width: 18.75rem; /* 300px */
    max-width: 100%;
    align-items: center;
    gap: 5rem; /* 80px */
    padding: 0 1.875rem; /* 0 30px */
    background-color: #ffffff;
    border-radius: 3.75rem; /* 60px */
  }
  /* 심볼/로고타입: Figma 200 / 240 (about.css 768의 축소값 144/192 복원) */
  .brand-identity__symbol {
    width: 12.5rem; /* 200px */
    height: auto;
  }
  .brand-identity__logotype {
    width: 15rem; /* 240px */
    height: auto;
  }
  .brand-identity__body {
    width: 100%;
    gap: 5rem; /* 80px (Figma contents gap) */
  }
  .brand-identity__heading {
    font-size: 1.5rem; /* 24px */
  }
  .brand-identity__text {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5;
  }

  /* ======================================================================
     Section 6 — CTA (title 42px / subtitle 18px)
     ====================================================================== */
  .cta-section {
    min-height: 0;
    padding: 5rem 0.9375rem; /* 80px 15px */
  }
  .cta-section__title {
    font-size: clamp(2rem, 10.5vw, 2.625rem); /* 42px */
  }
  .cta-section__subtitle {
    font-size: 1.125rem; /* 18px */
  }
  .cta-section__button {
    min-height: 44px;
  }
}