/* ===== 회사소개 페이지 (39:185) =====
   본문: Noto Sans KR / 인용구: Noto Serif KR / 서명·문구: Pretendard
   좌우 정렬은 공통 컨테이너 폭(--container-width)에 맞춤 */

/* ===== 히어로 배너 — 풀폭 이미지 (텍스트/로고 베이크) ===== */
.about-hero {
  width: 100%;
  line-height: 0;
  background: #1a1a1a;
}
.about-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* ===== 대표이사 메시지 (88:269) ===== */
.about-message {
  width: 100%;
  padding: 145px 24px 120px;     /* 배너 아래 145px, 좌우 24px(좁은 화면 잘림 방지) */
}
.about-message-col {
  width: fit-content;            /* 글 덩어리 폭만큼만 — 고정 843px이면 좌정렬 텍스트의
                                    남는 공간이 오른쪽에 몰려 왼쪽 쏠림으로 보임 */
  max-width: min(843px, 100%);   /* 시안 컬럼 폭 상한 + 좁은 화면 잘림 방지 */
  margin: 0 auto;                /* 모든 화면에서 가운데 정렬 */
  display: flex;
  flex-direction: column;
  gap: 22.6px;                  /* 시안 rich-text-block gap */
  font-family: 'Noto Sans KR', sans-serif;
}
.about-message-col p { margin: 0; }

.about-message-col .msg-label {
  font-size: 17px;
  font-weight: 400;
  line-height: 30.6px;
  color: #666;
}
.about-message-col .msg-quote {
  margin: 0;
  padding: 4.4px 0 4.4px 27.3px;
  border-left: 1px solid #666;
  font-family: 'Noto Serif KR', serif;   /* 시안: 인용구만 세리프 */
  font-size: 21.9px;
  font-weight: 400;
  line-height: 34.87px;
  color: #0a0a0a;
}
.about-message-col .msg-body,
.about-message-col .msg-closing {
  font-size: 17px;
  font-weight: 400;
  line-height: 30.6px;
  color: #000;
}
.about-message-col .msg-closing {
  margin-top: 17px;             /* 마무리 문구 위 여백 */
}

/* 서명: 이름(Pretendard) + 손글씨 잉크 (시안 위치 이름 x899 = 컬럼 offset 201)
   마무리 문구 아래에 두어 겹치지 않게, 손글씨는 원본에서 잉크 부분만 잘라 표시 */
.about-message-col .msg-sign {
  margin-left: 201px;          /* 시안 이름 x899 - 컬럼 x698 = 201 */
  margin-top: 40px;            /* 마무리 문구 아래 (겹침 없음) */
  display: flex;
  align-items: center;
  gap: 14px;
}
.about-message-col .msg-sign .sign-name {
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 30px;
  color: #737373;
  white-space: nowrap;
}
.about-message-col .msg-sign .sign-ink {
  flex: none;
  width: 56px;                 /* 잉크(40×63) + 여백, 원본 376×251 스케일 그대로 */
  height: 80px;
  background: url('../figma-assets/about-signature.png') no-repeat -144px -88px / 376px 251px;
}

/* ===== 강사 섭외 문구 — 다크 풀폭 (79:167) ===== */
.about-statement {
  width: 100%;
  background: #121315;           /* 시안: Woodsmoke, 화면 전체 폭 */
  min-height: 633px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 31px;
  box-sizing: border-box;
}
.about-statement p {
  max-width: var(--container-width);   /* 콘텐츠는 공통 컨테이너 폭 */
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 57.6px;
  letter-spacing: -0.16px;
  color: #8a8a91;
  text-align: center;
}

/* ===== 모바일 (시안 103:102 "모바일 회사소개" — Figma 실측 375) ===== */
.br-mo { display: none; }              /* 모바일 전용 줄바꿈 — PC에서 숨김 */

@media (max-width: 767px) {
  .br-pc { display: none; }            /* PC 전용 줄바꿈 — 모바일에서 숨김 */
  .br-mo { display: inline; }

  /* --- 히어로 배너 (106:102): 이미지 479×269 @ x0 — 좌측 기준, 우측 크롭 --- */
  .about-hero { overflow: hidden; }
  .about-hero img { width: 127.733%; } /* 479/375 — height auto로 375폭에서 269px */

  /* --- 대표이사 메시지 (106:125): 그리드 x27 y384, 라벨 y452.8 --- */
  .about-message { padding: 83.8px 0 30px; }   /* 위: 배너 하단(369)→라벨(452.77) / 아래: pb 22.38+8 */
  .about-message-col {
    max-width: 321.8px;                /* 시안 콘텐츠 폭 (375에서 x27~343 ≈ 316~322) */
    margin: 0 auto;                    /* 가운데 정렬 통일 (PC와 동일) */
    gap: 21.6px;                       /* rich-text-block 실측 gap */
  }
  /* Chrome의 Noto Sans KR 글리프 폭이 Figma 렌더보다 미세하게 넓어(시안 꽉 찬 줄
     실측 316.8~321.3px) 316px 그대로는 시안과 줄바꿈이 어긋남 → 문단별 줄바꿈
     폭만 보정. 텍스트는 좌측 정렬이라 시각적 차이 없음 (작은 화면에선 max-width로 축소) */
  .about-message-col .msg-body,
  .about-message-col .msg-closing {
    width: 320.6px;                    /* 시안 줄 ≤ 320.6 < 다음 글자 흡수(321.28~) */
    max-width: calc(100vw - 54.4px);
  }
  .about-message-col .msg-quote + .msg-body,
  .about-message-col .msg-quote + .msg-body + .msg-body {
    width: 321.8px;                    /* 1·2번째 문단은 꽉 찬 줄이 321.28px → 넓게 */
    max-width: calc(100vw - 53.2px);
  }
  .about-message-col .msg-label {      /* Noto Sans KR 400 16/28.8 — 회색 #666 (사용자 지정) */
    font-size: 16px;
    line-height: 28.8px;
    color: #666;
  }
  .about-message-col .msg-quote {      /* 106:132 — ml 13.94, pl 25.77, pt 12.7, pb 4.15, border #666 (사용자 지정) */
    margin-left: 13.94px;
    padding: 12.7px 0 4.15px 25.77px;
    border-left-color: #666;
    font-size: 20.6px;                 /* Noto Serif KR 400 20.6/32.82 */
    line-height: 32.82px;
  }
  .about-message-col .msg-body,
  .about-message-col .msg-closing {    /* 본문 — Noto Sans KR 400 16/28.8 #000 */
    font-size: 16px;
    line-height: 28.8px;
  }
  .about-message-col .msg-quote + .msg-body { margin-top: 8.7px; }   /* 106:134 pt 8.655 */
  /* 시안에서 앞 문단과 병합된 연속 문단: 빈 줄 1줄(28.8) = gap 21.6 + 7.2 */
  .about-message-col .msg-cont { margin-top: 7.2px; }
  .about-message-col .msg-closing { margin-top: 7.2px; }             /* PC 17px 해제 */

  /* 서명 (106:147): 세로 배치(이름 위·잉크 아래), 우측 정렬 pr18, gap 12
     위 여백 = 빈 문단(29.79) + gap×2 + pt 0.79 = 73.8 → gap 21.6 제외 52.2 */
  .about-message-col .msg-sign {
    margin: 52.2px 0 0;
    padding-right: 18px;               /* 시안 div.flex pr — 우측 끝 x325 */
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }
  .about-message-col .msg-sign .sign-name {   /* 106:149 — Pretendard 400 18/27 ls-0.18 #737373 */
    font-size: 18px;
    letter-spacing: -0.18px;
    line-height: 27px;
  }
  .about-message-col .msg-sign .sign-ink {    /* 111:237 — 255×170, 원본 122.37% / left 35.07% / top -43.33% */
    width: 255px;
    height: 170px;
    background: url('../figma-assets/about-signature.png') no-repeat 89.4px -73.7px / 312px 208px;
  }

  /* --- 강사 섭외 다크 섹션 (79:167): 모바일 시안(103:102)에 없음 → 숨김 --- */
  .about-statement { display: none; }
}