/* Rev 3 (2026-10) — landing 영역 전용 스타일. 이 영역 담당 작업만 수정할 것(.ai/REV3_SCOPE.md 참고).
   대상: partner_intro.php / client_intro.php (.lp-page), skin/board/livetogether/list.skin.php (.lt-intro)
   기존 style.css·intro-pages.css는 건드리지 않고, 이 파일(마지막에 로드)에서 .lp-page / .lt-intro 범위로만 덮어쓴다. */

/* ==================== Partner / Client landing (슬라이드 34★ 공통 구조) ====================
   배너 아래 텍스트 → 섹션당 사진 1장(좌·우 번갈아) 구조. 가운데 이미지는 삭제됨. */
.lp-page {
  --lp-gap: 56px;
  --lp-photo-w: 400px;
}

/* reset.css(Meyer)가 strong을 `font: inherit`으로 풀어서 <strong> 제목이 bold로 안 보였다
   (슬라이드 54·57·60 "첫 줄(제목)은 bold로" 지적의 원인) — 이 페이지 범위에서만 복원 */
.lp-page strong {
  font-weight: 700;
}

/* ---- hero (텍스트만, 이미지 없음) ---- */
.lp-page .lp-hero {
  max-width: 820px;
  /* Rev 5 슬라이드 6·9: 히어로 CTA 버튼과 첫 섹션 제목 사이를 넓힌다(아래 여백 28 → 42px, 첫 섹션 위 여백 32 → 48px: 합 60 → 90px) */
  padding: 8px 20px 42px;
}

.lp-page .lp-hero h1 {
  margin-bottom: 18px;
}

.lp-page .lp-hero p {
  margin: 0 0 6px;
}

/* "이 줄만 약간 작은 볼드체로" (슬라이드 35·48·62·42) */
.lp-page .lp-tagline {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--intro-text);
}

.lp-page .lp-tagline--center {
  margin-top: 24px;
  text-align: center;
}

/* ---- Rev 4 공통 헬퍼 (슬라이드 1·15·18~20·25·26) ----
   R6: 클라이언트가 지정한 위치의 줄바꿈은 데스크톱(≥ 901px)에서만 강제(br.lb), 모바일은 자연 줄바꿈.
       브랜드명 "Global Partners Network"는 줄 중간에서 꺾이지 않게(.nobr) */
.lp-page .nobr,
.lt-intro .nobr {
  white-space: nowrap;
}

@media all and (max-width: 900px) {
  .lp-page .lb,
  .lt-intro .lb {
    display: none;
  }
}

/* 줄이 긴 곳(Partner 단계 2, Live together 안내문)은 좁은 데스크톱 폭에서 강제 줄바꿈 때문에 3줄로 꺾이므로 더 넓은 폭에서만 적용 */
@media all and (max-width: 1100px) {
  .lp-page .lb--xl {
    display: none;
  }
}

@media all and (max-width: 1000px) {
  .lt-intro .lb--lg {
    display: none;
  }
}

.lp-page .lp-hero-cta {
  margin-top: 28px;
}

/* ---- 섹션: 제목 + 사진 + 내용 (Rev 4 전역 규칙 R1~R4·R7, 슬라이드 1~3) ----
   R1  제목은 텍스트 칸 위(그리드 1행), 사진은 제목 바로 아래(2행)에서 시작 → 사진 상단 = 첫 항목 상단
   R2  사진 높이 = 목록(2행) 높이: 사진을 그리드 영역에 절대배치(height:100%)해 행 높이를 키우지 않고 목록 높이를 그대로 따른다.
       마지막 한 줄 안내문(.lp-list-note)은 3행이라 사진 높이에서 제외된다. sticky 없음
   R3  단계 목록 = 사진 좌측(기본), 카드 목록 = 좌/우(.lp-split--photo-right)
   R4  모서리 라운드는 <img> 자체에 적용
   R7  모바일(≤900px): 제목 → 사진 → 목록(DOM 순서 그대로) */
.lp-page .lp-section {
  max-width: 1180px;
  margin: 0 auto;
  /* Rev 5 슬라이드 7·10·11: 큰 섹션과 섹션 사이 여백 약 1.5배 — 위·아래 32 → 48px(섹션 사이 64 → 96px) */
  padding: 48px 20px;
}

.lp-page .lp-split {
  position: relative;
  display: grid;
  grid-template-columns: var(--lp-photo-w) minmax(0, 1fr);
  grid-template-areas:
    ". title"
    "photo body"
    ". note";
  column-gap: var(--lp-gap);
  align-items: start;
}

/* 사진이 오른쪽인 섹션 */
.lp-page .lp-split--photo-right {
  grid-template-columns: minmax(0, 1fr) var(--lp-photo-w);
  grid-template-areas:
    "title ."
    "body photo"
    "note .";
}

.lp-page .lp-split > .lp-block-ttl {
  grid-area: title;
}

.lp-page .lp-split > .lp-body {
  grid-area: body;
  min-width: 0;
}

.lp-page .lp-split > .lp-list-note {
  grid-area: note;
}

.lp-page .lp-split--portrait {
  --lp-photo-w: 300px;
}

/* 사진 폭: 사진 높이는 목록 높이를 따르므로, 원본 비율에 가깝게(크롭 소폭) 섹션별로 폭을 조정한다.
   wide = 카드 목록(Partner benefits·Client support, 약 380px 높이) / mid = 단계 목록(Partner How it works) / tall = 세로형 사진(Client benefits) */
.lp-page .lp-split--photo-wide {
  --lp-photo-w: 490px;
}

.lp-page .lp-split--photo-mid {
  --lp-photo-w: 440px;
}

.lp-page .lp-split--photo-tall {
  --lp-photo-w: 340px;
}

/* 2열 카드 목록 옆 사진(Partner "What you expect…"): 좁은 데스크톱(901~1100px)에서도 카드가 2열을 유지하도록 사진·간격을 줄인다 */
@media all and (min-width: 901px) and (max-width: 1100px) {
  .lp-page .lp-split--photo-compact {
    --lp-photo-w: 280px;
    column-gap: 36px;
  }

  .lp-page .lp-split--photo-compact .lp-list--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media all and (max-width: 1100px) {
  .lp-page .lp-split--photo-wide {
    --lp-photo-w: 400px;
  }

  .lp-page .lp-split--photo-mid {
    --lp-photo-w: 340px;
  }

  .lp-page .lp-split--photo-tall {
    --lp-photo-w: 300px;
  }
}

.lp-page .lp-photo {
  grid-area: photo;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--intro-shadow-hover);
}

/* Rev 5 슬라이드 6: Partner benefits 의 새 사진(객석에서 필기하는 손, 3:2 원본 1000×667)을 칸(≈ 490×376, 비율 1.3)에 맞춰 자른다.
   손·펜은 사진 가로 45~80% 지점에 있어, 좌우를 약 13% 잘라내는 위치를 오른쪽(66%)으로 잡아 손·펜·노트가 모두 보이게 한다. */
.lp-page .lp-photo--notes {
  object-position: 66% 50%;
}

/* 섹션 제목 — 왼쪽 정렬(슬라이드 40·60 "가운데가 아니라 왼쪽 맞춤") */
.lp-page .lp-block-ttl {
  margin: -2px 0 20px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--intro-text);
  text-align: left;
}

/* Rev 4 R5(슬라이드 1·22): 사진을 뺀 섹션은 제목·카드·태그라인 모두 페이지 가운데 한 열 */
.lp-page .lp-center {
  max-width: 960px;
  margin: 0 auto;
}

.lp-page .lp-block-ttl--center {
  text-align: center;
}

/* ---- 카드 목록 (기존 .intro-card 재사용) ---- */
.lp-page .lp-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.lp-page .lp-list .intro-card {
  padding: 18px 20px;
}

.lp-page .lp-list--2col {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Works to do(슬라이드 38): 항목을 한 줄씩 — 2열 카드는 폭이 충분할 때만(아니면 자동으로 1열) */
.lp-page .lp-list--2col .intro-card {
  gap: 12px;
  padding: 18px 16px;
}

.lp-page .lp-list--2col .intro-card .intro-card-text {
  font-size: 15px;
}

/* 슬라이드 57·58: "3,1 배열 → 2,2" */
.lp-page .lp-list--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 슬라이드 52: 마지막 "Any other Assignments you request." 는 아이콘 없는 한 줄(사진 높이에는 포함하지 않는다) */
.lp-page .lp-list-note {
  margin: 18px 0 0;
  padding-left: 4px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--intro-text);
}

/* ---- 단계 목록(How it works / Procedure) ---- */
.lp-page .lp-steps {
  max-width: none;
  margin: 0;
}

/* ---- 끝 CTA 섹션 (슬라이드 42·62 — "내용 전체를 약간 작은 글씨로") ---- */
.lp-page .lp-cta {
  max-width: 820px;
  margin: 36px auto 0; /* Rev 5: 마지막 섹션과 아래 CTA 사이도 같은 비율(24 → 36px)로 */
  padding: 48px 20px 64px;
  text-align: center;
  border-top: 1px solid var(--intro-border);
}

.lp-page .lp-cta-ttl {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--intro-text);
}

.lp-page .lp-cta p {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--intro-muted);
}

.lp-page .lp-cta .lp-tagline {
  margin-top: 12px;
  font-size: 14px;
  color: var(--intro-text);
}

.lp-page .lp-cta-btn-wrap {
  margin: 26px 0 22px;
}

.lp-page .lp-cta .intro-cta-btn {
  padding: 15px 40px;
  font-size: 16.5px;
}

.lp-page .lp-cta .lp-cta-members {
  margin-bottom: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--intro-text);
}

.lp-page .lp-cta .lp-cta-closed {
  max-width: 760px; /* Rev 4(슬라이드 19·25): "…Client and Partner information," 뒤 강제 줄바꿈 — 첫 줄이 다시 꺾이지 않게 폭 확대 */
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6;
}

@media all and (max-width: 760px) {
  .lp-page .lp-list--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media all and (max-width: 900px) {
  /* R7: 제목 → 사진(가로형 비율) → 목록 → 안내문 순으로 쌓는다 */
  .lp-page .lp-split,
  .lp-page .lp-split--photo-right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "photo"
      "body"
      "note";
    column-gap: 0;
  }

  .lp-page .lp-photo {
    position: static;
    height: auto;
    aspect-ratio: 3 / 2;
    max-height: 420px;
    margin-bottom: 24px;
  }

  /* 세로형 사진은 모바일에서 가로형으로 잘라 화면을 과하게 차지하지 않게 한다 */
  .lp-page .lp-split--portrait .lp-photo {
    aspect-ratio: 4 / 3;
    object-position: 50% 30%;
  }
}

@media all and (max-width: 600px) {
  /* Rev 5: 모바일은 비례해 조금만(섹션 위·아래 22 → 28px, 히어로 아래 20 → 26px) */
  .lp-page .lp-section {
    padding: 28px 16px;
  }

  .lp-page .lp-hero {
    padding: 4px 16px 26px;
  }

  .lp-page .lp-block-ttl {
    margin-bottom: 16px;
    font-size: 21px;
  }

  .lp-page .lp-photo {
    border-radius: 16px;
  }

  /* 모바일(390px)에서도 "Earn extra income from home country" 같은 한 줄 항목이 가능하면 한 줄로 */
  .lp-page .lp-list .intro-card {
    gap: 12px;
    padding: 16px;
  }

  .lp-page .lp-list .intro-card .intro-card-text {
    font-size: 14.5px;
  }

  .lp-page .lp-hero p {
    font-size: 15.5px;
    line-height: 1.7;
  }

  .lp-page .lp-cta {
    padding: 36px 16px 48px;
  }

  .lp-page .lp-cta-ttl {
    font-size: 22px;
  }

  .lp-page .intro-cta-btn,
  .lp-page .lp-cta .intro-cta-btn {
    padding: 14px 28px;
    font-size: 16px;
    text-align: center;
  }
}

/* ==================== Live together (skin/board/livetogether/list.skin.php) — 슬라이드 67★ ==================== */
.lt-intro {
  margin: 30px 0 0;
  text-align: center;
}

.lt-intro .lt-intro-body {
  max-width: 820px;
  margin: 0 auto;
}

.lt-intro .lt-intro-ttl {
  margin: 0 0 20px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: #1c2024;
}

.lt-intro p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.75;
  color: #6b7280;
}

/* "Explore, connect, and support positive change." (bold) */
.lt-intro .lt-intro-strong {
  margin-top: 20px;
  font-weight: 700;
  color: #1c2024;
}

/* "Go global, stay local." (작은 폰트, bold) */
.lt-intro .lt-intro-tagline {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  color: #1c2024;
}

.lt-intro .lt-explore-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.lt-intro .lt-explore-row .solid-btn {
  min-width: 180px;
  padding: 0 28px;
  border-radius: 999px;
  text-decoration: none;
}

.lt-intro .lt-explore-row .solid-btn.btn-blue:hover {
  background-color: #1c4fa3;
}

.lt-intro .lt-explore-row .solid-btn.btn-green:hover {
  background-color: #22786d;
}

@media all and (max-width: 600px) {
  .lt-intro .lt-intro-ttl {
    font-size: 26px;
  }

  .lt-intro p {
    font-size: 15.5px;
    line-height: 1.7;
  }

  /* 이 보드 페이지는 .inner가 2중으로 중첩돼(90% x 90%) 폭이 좁다 — 두 버튼이 한 줄에 들어가도록 여유를 둠 */
  .lt-intro .lt-explore-row {
    gap: 12px;
  }

  .lt-intro .lt-explore-row .solid-btn {
    min-width: 136px;
    padding: 0 16px;
  }
}

/* Live together — NGO 목록 아래 Contact us(사용자 지시 2026-10-06: 슬라이드67엔 없지만 등재/수정/삭제 요청 경로라 복원) */
.lt-contact {
  /* 앞의 페이지네이션(.pg_wrap)/버튼(.bo_fx)이 float라서, clear 없이는 flex(BFC)인 이 블록이 float 옆으로 밀려 좁게 놓인다 */
  clear: both;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 5% 64px;
  text-align: center;
}

.lt-contact p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #3c4043;
}

.lt-contact .solid-btn {
  min-width: 180px;
  padding: 0 28px;
  border-radius: 999px;
  text-decoration: none;
}

.lt-contact .solid-btn.btn-green:hover {
  background-color: #22786d;
}