/* carry-core.com Company 페이지 본문 전용 스타일 — 실측 기반 (company-audit.md).
   헤더/푸터는 main.css 공통. 이 페이지는 1440/1728에서 폰트/레이아웃 차이가 전혀 없음(실측 확인). */

.company-container { max-width: 1220px; margin: 0 auto; padding: 0 40px; }

/* ---------- hero ---------- */
.company-hero-section { background: #FFFFFF; padding: 90px 0 60px; text-align: center; }
.company-hero-badge-strip { display: block; height: 32px; width: auto; margin: 0 auto 24px; }
.company-hero-heading {
  font-size: 64px; font-weight: 700; line-height: 1.15; color: #000;
  /* 실측: KR 단일 줄 실제 폭 889px — 950px면 두 언어(EN은 짧은 2줄) 모두 안 끊기고 여유 있음. */
  max-width: 950px; margin: 0 auto;
}
.company-hero-heading .gradient {
  display: block;
  background: linear-gradient(#1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.company-hero-subtitle { font-size: 16px; font-weight: 400; color: #62748E; max-width: 720px; margin: 24px auto 0; }
.company-hero-subtitle b { font-weight: 700; }

.company-badges { display: flex; justify-content: center; gap: 56px; margin-top: 48px; }
.company-badge { display: flex; flex-direction: column; align-items: center; }
.company-badge img { width: 56px; height: 56px; margin-bottom: 12px; }
.company-badge-title { font-size: 20px; font-weight: 700; color: #000; }
.company-badge-subtitle { font-size: 16px; font-weight: 400; color: #64748B; margin-top: 4px; }
/* 실측(2026-08-12): 라이브 배지는 흰 카드 컨테이너(그림자 포함) + hover 시 그림자가 더
   짙어짐(실제 .hover() 테스트로 확인) — 로컬은 아이콘+텍스트만 맨몸으로 떠있었음. */
.company-badges.desktop-only { gap: 20px; }
.company-badges.desktop-only .company-badge {
  background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  cursor: pointer; transition: box-shadow .25s ease, transform .25s ease;
}
.company-badges.desktop-only .company-badge:hover { box-shadow: 0 12px 28px rgba(17, 24, 39, .08); transform: translateY(-2px); }

/* ---------- feature columns (재검증 감사로 발견된 누락 섹션, 2026-08-12) ---------- */
.feature-columns-section { background: #FFFFFF; padding: 90px 0; }
.feature-columns { display: flex; justify-content: center; gap: 40px; text-align: left; }
.feature-column { flex: 1 1 0; max-width: 360px; }
/* 실측(2026-08-12 재검증): 라이브 아이콘 실제 렌더 폭이 200~224px(72px 아님, 3배 가까이 차이) —
   getBoundingClientRect로 3개 칼럼 각각 확인(col1 224x204, col2/3 200x200). 아이콘 파일 자체에
   글로우 여백이 넉넉히 포함돼 있어서 큰 박스로 렌더되는 게 의도된 디자인. */
.feature-column-icon { width: 200px; height: auto; margin-bottom: 10px; display: block; }
.feature-column:nth-child(1) .feature-column-icon { width: 224px; }
.feature-column-heading { font-size: 22px; font-weight: 700; color: #000; margin-bottom: 16px; line-height: 1.3; }
.feature-column-body { font-size: 15px; font-weight: 400; color: #64748B; line-height: 1.6; margin: 0 0 12px; }
.feature-column-disclaimer { font-size: 13px; font-weight: 400; color: #94A3B8; line-height: 1.6; margin-top: 12px; text-decoration: underline; }
.feature-column-subitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.feature-column-subitems strong { display: block; font-size: 15px; font-weight: 700; color: #000; margin-bottom: 4px; }
.feature-column-subitems span { display: block; font-size: 14px; color: #64748B; line-height: 1.5; }

/* ---------- why we started ---------- */
.why-we-started-section {
  position: relative; background-size: cover; background-position: center;
  padding: 90px 40px; text-align: center; color: #fff;
}
/* 사진 배경 위에 흰 글씨를 얹는 섹션이라 어두운 스크림이 없으면 밝은 부분(창문/천장)에서
   가독성이 떨어짐 — 실측 스크린샷으로 확인 후 추가. */
.why-we-started-section::before {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55);
}
.why-we-started-section > * { position: relative; z-index: 1; }
.why-we-started-heading { font-size: clamp(28px, 2.4vw, 34.288px); font-weight: 700; margin-bottom: 24px; }
.why-we-started-body { max-width: 640px; margin: 0 auto 16px; font-size: 16px; font-weight: 400; line-height: 1.6; }
.why-we-started-callout { max-width: 640px; margin: 0 auto 16px; font-size: 16px; font-weight: 700; line-height: 1.6; }
.why-we-started-closing { max-width: 640px; margin: 24px auto 0; font-size: 16px; font-weight: 400; }

/* ---------- our promise forward ---------- */
.promise-forward-section { background: #FFFFFF; padding: 90px 0; }
.promise-forward-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 64px; }
.promise-forward-photo { flex: 0 0 auto; width: 45%; max-width: 533px; border-radius: 12px; }
.promise-forward-heading { font-size: 36px; font-weight: 700; color: #000; }

/* ---------- global partners ---------- */
.global-partners-section {
  /* 실측(2026-08-12): 라이브 computed background-position이 50% 100%(하단 고정) — center 아님. */
  background-size: cover; background-position: 50% 100%; padding: 90px 0; text-align: center;
}
.global-partners-heading { font-size: clamp(30px, 3.6vw, 51.424px); font-weight: 700; color: #000; margin-bottom: 24px; }
.global-partners-accent { font-size: clamp(28px, 4.2vw, 60px); font-weight: 600; max-width: 900px; margin: 0 auto 24px; }
.global-partners-accent .blue { color: #0558FF; }
/* 실측(2026-08-12): "CarryCore's partners" 문구 아래 애니메이션 밑줄 바(8px, #BFD9FF)가
   스크롤 진입 시 scaleX(0)→scaleX(1)로 펼쳐짐 — 로컬엔 통째로 빠져있었음. */
.accent-highlight { position: relative; display: inline-block; }
.accent-bar {
  position: absolute; left: 0; right: 0; bottom: -6px; height: 8px; background: #BFD9FF;
  transform-origin: left center; transform: scaleX(0); transition: transform .3s ease; opacity: 1;
}
.accent-bar.is-visible { transform: scaleX(1); }
.global-partners-body { font-size: 16px; font-weight: 700; color: #62748E; line-height: 1.6; }
.global-partners-map { max-width: 1160px; width: 100%; height: auto; margin: 48px auto 0; display: block; }

/* ---------- licenses (EN desktop only) ---------- */
.licenses-section { background: #FFFFFF; padding: 90px 0; text-align: center; }
.licenses-eyebrow { font-size: 12px; font-weight: 700; color: #155DFC; letter-spacing: 2px; margin-bottom: 16px; }
.licenses-heading { font-size: clamp(28px, 2.4vw, 34.288px); font-weight: 700; color: #000; margin-bottom: 16px; }
.licenses-body { max-width: 640px; margin: 0 auto 8px; font-size: 16px; font-weight: 400; color: #62748E; line-height: 1.6; }
/* 실측(2026-08-12): 사진 3장(373px)+gap이 .company-container 실내폭(1140px)보다 27px 넓어서
   3번째 사진이 다음 줄로 밀려 내려갔음(EN desktop 확인) — gap을 20px로 좁히고 좌우 -10px 네거티브
   마진으로 partners-map과 같은 1160px 실내폭을 확보(company-container padding 밖으로 살짝 확장). */
.licenses-photos { display: flex; justify-content: center; gap: 20px; margin: 48px -10px 0; flex-wrap: wrap; }
.licenses-photo-wrap { width: 373px; max-width: 100%; }
.licenses-photo-wrap img { width: 100%; height: auto; border-radius: 12px; display: block; }
.licenses-photo-caption { font-size: clamp(20px, 1.9vw, 27.424px); font-weight: 700; color: #000; margin-top: 16px; }

/* ---------- who we are ---------- */
.who-we-are-section { background: #FFFFFF; padding: 90px 0; }
.who-we-are-heading { font-size: 36px; font-weight: 700; color: #000; text-align: center; margin-bottom: 56px; }
/* 실측(2026-08-12): 두 카드(Finest experts / Advisory committee) 다 라이브에서 배경틴트
   #F8FAFC가 카드 전체(텍스트+사진)에 깔려있음 — 로컬은 흰 배경 위에 맨몸으로 떠있었음. */
.who-we-are-card {
  max-width: 1180px; margin: 0 auto 48px; padding: 40px;
  background: #F8FAFC; border-radius: 12px;
  display: flex; align-items: center; gap: 64px;
}
.who-we-are-card.text-right { flex-direction: row-reverse; }
.who-we-are-card-copy { flex: 1 1 auto; }
.who-we-are-card-heading { font-size: 36px; font-weight: 700; color: #0558FF; margin-bottom: 16px; }
.who-we-are-card-body { font-size: 16px; font-weight: 400; color: #64748B; line-height: 1.6; margin-bottom: 24px; }
.who-we-are-card-cta {
  /* 실측(2026-08-12): 라이브 computed backgroundColor는 순수 검정이 아니라 rgb(21,24,30)=#15181E.
     호버 이펙트는 라이브에도 없음(hover 전/후 동일 확인). */
  display: inline-block; background: #15181E; color: #fff; padding: 12px 28px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.who-we-are-card-photo { flex: 0 0 auto; width: 450px; max-width: 45%; height: auto; border-radius: 12px; }

/* ============ mobile (<=720px) ============ */
@media (max-width: 720px) {
  .company-container { padding: 0 20px; }
  .company-hero-section { padding: 40px 0 32px; }
  .company-hero-heading { font-size: 30px; padding: 0 20px; max-width: none; }
  .company-hero-subtitle { padding: 0 20px; font-size: 14px; }
  /* .mobile-only's `revert` resets a <div> back to UA-default `display:block`, not this file's
     own `display:flex` rule — needs an explicit important override to actually show as a row. */
  .company-badges.mobile-only { display: flex !important; gap: 24px; padding: 0 20px; }
  .company-badge img { width: 40px; height: 40px; }
  .company-badge-title { font-size: 14px; font-weight: 700; color: #62748E; }
  /* 실측 확인: 데스크톱에선 두 언어 다 20px/700 검정이지만, 모바일 배지 제목 굵기가 언어별로
     달라짐(KR 700 / EN 400) — CMS 입력 시점의 비일관성으로 보이나 있는 그대로 재현. */
  .lang-en .company-badge-title { font-weight: 400; }
  .company-badge-subtitle { display: none; }

  .feature-columns-section { padding: 48px 0; }
  .feature-columns { flex-direction: column; gap: 40px; padding: 0 20px; }
  .feature-column { max-width: none; }

  .why-we-started-section { padding: 48px 20px; }
  .why-we-started-heading { font-size: 24px; }
  .why-we-started-body, .why-we-started-callout, .why-we-started-closing { font-size: 14px; }

  .promise-forward-section { padding: 48px 0; }
  .promise-forward-inner { flex-direction: column; padding: 0 20px; text-align: center; }
  .promise-forward-photo { width: 100%; max-width: 360px; }

  .global-partners-section { padding: 48px 20px; }
  .global-partners-accent { display: none; }

  .licenses-section { padding: 48px 20px; }
  .licenses-photos { flex-direction: column; align-items: center; }

  .who-we-are-section { padding: 48px 0; }
  .who-we-are-card, .who-we-are-card.text-right { flex-direction: column; padding: 32px 20px; text-align: center; margin-bottom: 40px; }
  .who-we-are-card-photo { width: 100%; max-width: 320px; }
}