/* Rev 3 (2026-10) — home 영역 전용 스타일. 이 영역 담당 작업만 수정할 것(.ai/REV3_SCOPE.md 참고).
   모든 규칙은 .rev3-home(theme/basic/index.php의 페이지 래퍼)로 스코프. 기존 intro-pages.css는 수정하지 않고
   더 구체적인 선택자로 덮어쓴다. */

/* ===================== Homepage-1: Hero (슬라이드 20·21) ===================== */
.rev3-home .rev3-hero {
  margin-bottom: 0;
}

.rev3-home .rev3-hero-desc {
  max-width: 680px;
  margin: 0 auto 20px;
}

/* Rev 4(슬라이드 9): 첫 문단은 "…businesses with" 뒤에서 강제 줄바꿈 — 두 줄 모두 한 줄에 들어가도록 폭을 넓힌다 */
.rev3-home .rev3-hero-desc--lead {
  max-width: 820px;
}

/* ===================== Rev 4 공통 헬퍼 (슬라이드 1·9·14) ===================== */
/* R6: 클라이언트가 지정한 위치의 줄바꿈은 데스크톱(≥ 901px)에서만 적용 — 모바일은 자연 줄바꿈 */
@media all and (max-width: 900px) {
  .rev3-home .lb {
    display: none;
  }
}

/* R6: 브랜드명 "Global Partners Network"는 줄 중간에서 꺾이지 않게 */
.rev3-home .nobr {
  white-space: nowrap;
}

/* "Build connections. Create opportunities." — bold, 본문보다 약간 작은 폰트(21) */
.rev3-home .rev3-hero .rev3-hero-tagline {
  font-size: 0.9em;
  font-weight: 700;
  margin-bottom: 0;
}

/* ===================== Rev 5 슬라이드 3·4: 큰 섹션 사이 세로 여백 약 1.5배 =====================
   intro-pages.css 의 .intro-section(padding 40px 20px → 섹션 사이 80px)를 홈에서만 덮어써 섹션 사이를 120px 로 넓힌다.
   히어로와 첫 섹션 사이(위 40px)와 마지막 CTA 아래(푸터 쪽 40px)는 "히어로·푸터 간격은 건드리지 않는다"는 지시대로 그대로 둔다.
   모바일(≤600px)은 비례해 조금만(섹션 사이 80px → 100px). */
.rev3-home .intro-section {
  padding-bottom: 60px;
}

.rev3-home .intro-section + .intro-section {
  padding-top: 60px;
}

.rev3-home .intro-section:last-child {
  padding-bottom: 40px;
}

@media all and (max-width: 600px) {
  .rev3-home .intro-section {
    padding-bottom: 50px;
  }

  .rev3-home .intro-section + .intro-section {
    padding-top: 50px;
  }

  .rev3-home .intro-section:last-child {
    padding-bottom: 40px;
  }
}

/* ===================== 공통 헬퍼 ===================== */
.rev3-home .rev3-left-ttl {
  text-align: left;
  margin-bottom: 20px;
}

.rev3-home .rev3-grid-start {
  justify-content: start;
}

.rev3-home .rev3-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  margin-top: 24px;
}

/* Rev 4(슬라이드 12): Advantages의 Explore 버튼 쌍은 표 폭 기준 가운데 */
.rev3-home .rev3-btn-row--center {
  justify-content: center;
}

.rev3-home .rev3-center-ttl {
  text-align: center;
  margin-bottom: 20px;
}

/* ===================== Rev 4: 사진 + 목록 분할 (슬라이드 1·3·11·13, 전역 규칙 R1~R4·R7) =====================
   R1  제목은 텍스트 칸 위(그리드 1행), 사진은 제목 바로 아래(2행)에서 시작 → 사진 상단 = 첫 항목 상단
   R2  사진 높이 = 2행(목록) 높이: 사진을 그리드 영역에 절대배치(height:100%)해 행 높이를 키우지 않고 목록 높이를 그대로 따른다
   R3  단계 목록(오른쪽이 들쭉날쭉) = 사진 좌측, 카드 목록 = 사진 우측
   R4  모서리 라운드는 <img> 자체(.intro-photo 20px). sticky 없음
   R7  모바일(≤900px): 제목 → 사진(가로형) → 본문 */
.rev3-home .rev3-split {
  --rev3-photo-w: 420px;
  position: relative;
  display: grid;
  column-gap: 44px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}

.rev3-home .rev3-split--photo-left {
  grid-template-columns: var(--rev3-photo-w) minmax(0, 1fr);
  grid-template-areas:
    ". title"
    "photo body";
}

.rev3-home .rev3-split--photo-right {
  grid-template-columns: minmax(0, 1fr) var(--rev3-photo-w);
  grid-template-areas:
    "title ."
    "body photo";
}

.rev3-home .rev3-split-ttl {
  grid-area: title;
}

.rev3-home .rev3-split-body {
  grid-area: body;
  min-width: 0;
}

.rev3-home .rev3-split .rev3-split-photo {
  grid-area: photo;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

@media all and (max-width: 900px) {
  .rev3-home .rev3-split,
  .rev3-home .rev3-split--photo-left,
  .rev3-home .rev3-split--photo-right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "photo"
      "body";
  }

  .rev3-home .rev3-split .rev3-split-photo {
    position: static;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 420px;
    margin-bottom: 24px;
    border-radius: 16px;
  }
}

.rev3-home .solid-btn.btn-blue:hover { background-color: #1c4fa3; }
.rev3-home .solid-btn.btn-green:hover { background-color: #22786d; }

/* 한 줄 목록 카드(Why GPN) */
.rev3-home .rev3-grid-1col {
  grid-template-columns: minmax(0, 620px);
  justify-content: start;
}

/* ===================== Homepage-3: Assignment (슬라이드 24 + ★25) ===================== */
.rev3-home .rev3-assignment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 48px;
  align-items: center;
}

/* Rev 5 슬라이드 2: 새 사진(마을버스 안 Tourist Map)을 4:5(800×1002)·칸 폭 400px 로 넣었다.
   Rev 6(R5, 2026-10-21): 클라이언트 의견 "사진을 조금 더 자르는 것이 낫다 / 좌측 내용 때문에 전체 폭이 너무 넓어 보인다" —
   원본(4000×6000)에서 안내하는 사람과 Tourist Map 표지가 함께 보이도록 더 타이트하게 2:3(660×990, rev6-home-assignment.jpg)으로 다시 잘라
   칸 폭을 400 → 330px 로 줄였다(높이는 이전과 비슷한 ≈ 495px). 줄어든 70px 만큼 왼쪽 글·개념도가 넓게 쓰인다(912 → 982px).
   좁은 데스크톱(≤1400px)에서는 이전 폭(320px) 그대로 둔다. */
@media all and (max-width: 1400px) {
  .rev3-home .rev3-assignment {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.rev3-home .rev3-assignment-note {
  max-width: 640px;
  margin-top: 0;
}

.rev3-home .rev3-assignment-tagline {
  text-align: center;
  font-weight: 700;
  margin-top: 4px;
}

/* 사진 우측 배치에 맞춰 개념도를 한 줄 가로 배열로 유지(좁아지면 아래 미디어쿼리에서 전환) */
.rev3-home .rev3-assignment .intro-match-diagram {
  flex-wrap: nowrap;
  gap: 12px;
  margin: 28px auto;
  max-width: none;
}

.rev3-home .rev3-assignment .intro-match-box {
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
}

.rev3-home .rev3-assignment-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3; /* Rev 6: rev6-home-assignment.jpg(660×990) 비율 — 로딩 전에도 자리를 잡는다 */
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(20, 20, 30, 0.1);
}

@media all and (max-width: 1100px) {
  .rev3-home .rev3-assignment {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .rev3-home .rev3-assignment-photo {
    max-width: 320px;
    margin: 0 auto;
  }
}

@media all and (max-width: 800px) {
  .rev3-home .rev3-assignment .intro-match-diagram {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .rev3-home .rev3-assignment .intro-match-box {
    flex: 0 0 auto;
    width: 100%;
    max-width: 280px;
  }
}

/* ===================== Homepage-4: Overall procedure (★26) ===================== */
/* Rev 4(슬라이드 3·11): 사진 좌측(.rev3-split--photo-left) — 3단계 목록 높이에 맞춘 16:9 사진(약 420px) */
.rev3-home .rev3-howit {
  --rev3-photo-w: 420px;
}

.rev3-home .rev3-howit .rev3-split-photo {
  object-position: 40% center;
}

.rev3-home .rev3-steps {
  margin: 0;
  max-width: none;
}

.rev3-home .rev3-steps .intro-step-body strong {
  font-size: 17.5px;
  font-weight: 700;
}

/* ===================== Homepage-5: Advantage (★27, 28) ===================== */
/* Rev 4(슬라이드 1·12·13): 사진 삭제 + 내용을 페이지 가운데 한 열(≈ 비교표 폭)로 */
.rev3-home .rev3-advantage {
  max-width: 960px;
  margin: 0 auto;
}

.rev3-home .rev3-adv-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

.rev3-home .rev3-adv-grid .intro-card {
  padding: 20px 18px;
}

.rev3-home .rev3-adv-grid .intro-card-text {
  font-size: 15px;
}

.rev3-home .rev3-compare-ttl {
  margin: 36px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: #1c2024;
  letter-spacing: -0.2px;
  text-align: center;
}

.rev3-home .rev3-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.rev3-home .rev3-table-wrap .intro-compare {
  max-width: none;
  margin: 0;
}

.rev3-home .rev3-compare-sub {
  font-weight: 400;
}

/* Rev 4(R5): 사진을 뺀 섹션은 문구·태그라인도 가운데 */
.rev3-home .rev3-compare-note {
  text-align: center;
  margin: 18px 0 0;
  max-width: none;
}

@media all and (min-width: 1000px) {
  /* 카드 글자는 한 줄로(2열 카드 폭 ≈ 470px) */
  .rev3-home .rev3-adv-grid .intro-card-text {
    white-space: nowrap;
  }
}

@media all and (min-width: 1280px) {
  /* 데스크톱에서는 표 셀도 한 줄로 */
  .rev3-home .rev3-table-wrap .intro-compare td,
  .rev3-home .rev3-table-wrap .intro-compare th {
    white-space: nowrap;
  }
}

@media all and (max-width: 999px) {
  /* 좁은 화면에서는 1열로 쌓는다 */
  .rev3-home .rev3-adv-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media all and (max-width: 800px) {
  .rev3-home .rev3-compare-ttl {
    font-size: 17px;
  }

  /* Rev4: 좁은 화면에서는 가로로 밀어서 보지 않고 행마다 카드로 세로로 쌓는다(칸 위의 작은 글씨 = data-label) */
  .rev3-home .rev3-table-wrap {
    overflow-x: visible;
  }

  .rev3-home .rev3-table-wrap .intro-compare {
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
  }

  .rev3-home .rev3-table-wrap .intro-compare,
  .rev3-home .rev3-table-wrap .intro-compare tbody,
  .rev3-home .rev3-table-wrap .intro-compare tr,
  .rev3-home .rev3-table-wrap .intro-compare td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* 머리글 줄은 화면에서만 숨긴다(칸마다 data-label 이 같은 정보를 보여 준다) */
  .rev3-home .rev3-table-wrap .intro-compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .rev3-home .rev3-table-wrap .intro-compare tr {
    margin: 0 0 14px;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }

  .rev3-home .rev3-table-wrap .intro-compare tr:nth-child(even) td {
    background: transparent;
  }

  .rev3-home .rev3-table-wrap .intro-compare td {
    border: 0;
    padding: 10px 16px;
    text-align: left;
    white-space: normal;
  }

  .rev3-home .rev3-table-wrap .intro-compare td:first-child {
    padding: 11px 16px;
    font-weight: 800;
    background: #f4f7fa;
  }

  .rev3-home .rev3-table-wrap .intro-compare td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #6b7280;
  }
}

@media all and (max-width: 600px) {
  .rev3-home .rev3-assignment-photo {
    max-width: 260px;
    border-radius: 16px; /* Rev 5(A5): 다른 본문 사진(.rev3-split-photo·.lp-photo)의 모바일 모서리(16px)와 통일 */
  }
}

/* ===================== Homepage-5: Why GPN? (29, ★30) ===================== */
/* Rev 4(슬라이드 13): 사진은 우측(카드 목록 = 양쪽이 반듯한 쪽이라 좌우 모두 가능, 목업은 우측).
   Rev 5(슬라이드 4): 클라이언트가 보낸 고해상도 원본(3888×5184 → 웹용 768×1024, rev5-home-why.jpg)으로 교체 — 저해상도(295×394) 때문에 두었던
   "확대 최대 1.3배" 제한은 풀었다. 칸(폭 384px × 목록 높이 ≈ 512px)과 사진이 같은 3:4 비율이라 자르지 않고 2배 해상도로 들어간다(레이아웃은 클라이언트가 본 그대로). */
.rev3-home .rev3-why {
  --rev3-photo-w: 384px;
}

.rev3-home .rev3-why .rev3-split-photo {
  object-position: center;
}

.rev3-home .rev3-why .rev3-grid-1col {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.rev3-home .rev3-why .intro-card {
  padding: 17px 20px;
}

.rev3-home .rev3-why .intro-card-text {
  white-space: nowrap;
}

@media all and (max-width: 900px) {
  /* Rev 5: 고해상도 원본이므로 태블릿/모바일에서도 다른 섹션 사진처럼 본문 폭 전체로 쓴다(이전 384px 상한 제거) */
  .rev3-home .rev3-why .rev3-split-photo {
    aspect-ratio: 4 / 3;
    object-position: center 35%;
  }

  .rev3-home .rev3-why .intro-card-text {
    white-space: normal;
  }
}

/* ===================== Homepage-6: CTA buttons (★31) ===================== */
.rev3-home .rev3-home-cta {
  background-image: url('../images/landing-ready-connected.jpg');
}

.rev3-home .rev3-home-cta h2 {
  margin-bottom: 18px;
}

/* Rev 4(슬라이드 14): 3줄 강제 줄바꿈(<br class="lb">)이 중간에 다시 꺾이지 않도록 폭 확대(기본 640px → 약 800px) */
.rev3-home .rev3-home-cta p {
  max-width: 800px;
  margin-bottom: 0;
}

@media all and (max-width: 600px) {
  .rev3-home .rev3-home-cta {
    padding: 44px 20px;
  }

  .rev3-home .rev3-home-cta h2 {
    font-size: 24px;
  }
}

/* ===================== Rev 7(2026-11-02, 사용자 요청): 홈 구역 구분 =====================
   ① "Client can get LOCAL help with / With LOCAL knowledge, Partner can": 카드를 열 안에서 2열(좁으면 자동 1열)로 배치하고,
      두 열을 테두리 있는 칸으로 나누며, 두 열의 Explore 버튼을 같은 높이에 맞춘다(왼쪽 5개·오른쪽 4개라 어긋나던 것).
   ② 큰 구역 사이(구역 위 여백 한가운데)에 얇은 구분선 — Rev 5 의 구역 간격(약 120px)은 그대로 둔다. */
.rev3-home .intro-two-col {
  align-items: stretch;
}

.rev3-home .intro-two-col-item {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid #dfe3e8;
  border-radius: 20px;
}

.rev3-home .intro-two-col .intro-grid-narrow {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: start;
}

.rev3-home .intro-two-col-item .rev3-btn-row {
  margin-top: auto;
  padding-top: 28px;
}

.rev3-home .intro-section + .intro-section {
  position: relative;
}

.rev3-home .intro-section + .intro-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  border-top: 1px solid #e3e7ec;
}

@media all and (max-width: 600px) {
  .rev3-home .intro-two-col-item {
    padding: 20px 16px;
  }
}