/* csr.css — 굿네이버스 사회공헌 파트너십 페이지 전용 추가 스타일 */

/* ── 3열 테이블 ── */
.csr-table thead th:first-child  { width: 20%; }
.csr-table thead th:nth-child(2) { width: 40%; }
.csr-table thead th:last-child   { width: 40%; }
.csr-table tbody th { width: 20%; text-align: left; vertical-align: top; font-size: clamp(13px, 1.6vw, 16px); }
.csr-table tbody td { font-size: clamp(13px, 1.6vw, 16px); line-height: 1.75; }

/* 테이블 내 링크 */
.csr-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #89A230;
  text-decoration: none;
}
.csr-link:hover { text-decoration: underline; }

/* ── 문의 박스 ── */
.csr-contact-box {
  margin-top: 40px;
  padding: 28px 32px;
  background: #ecefdf;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.csr-contact-info {
  font-size: clamp(15px, 1.6vw, 20px);
  color: #444;
  font-weight: 500;
  margin: 0;
}
.csr-contact-btns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* outline CTA 버튼 */
.cta-outline {
  background: transparent;
  border: 2px solid #556A1F;
  color: #556A1F;
}
.cta-outline:hover { background: #556A1F; color: #fff; }

/* ── 사례 텍스트 래퍼 ── */
.case-text-wrap { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 860px) {
  .csr-contact-box { flex-direction: column; align-items: flex-start; padding: 20px; }
  .csr-contact-btns { flex-direction: column; width: 100%; }
  .csr-contact-btns .donation-step-cta { text-align: center; }
  .csr-table thead th:first-child  { width: auto; }
  .csr-table thead th:nth-child(2) { width: auto; }
  .csr-table thead th:last-child   { width: auto; }
}

/* ── 기업과 함께 만들어온 좋은 변화 ──
   첨부 PDF 레이아웃: 큰 이미지 + 연한 베이지 설명 패널을 하나의 카드처럼 연결 */
.section-good-change .section-inner {
  max-width: 1040px;
}

.good-change-header {
  padding-bottom: 64px;
}

.good-change-list {
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.section-good-change .case-item {
  width: 100%;
  margin: 0 auto;
}

.section-good-change .case-img-wrap {
  position: relative;
  overflow: visible;
  border-radius: 0; /* 원본 이미지에 라운드가 적용되어 있어 CSS 라운드 중복 제거 */
  background: transparent;
}

.section-good-change .case-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
  object-position: initial;
  border-radius: 0; /* 원본 이미지 자체의 라운드를 그대로 노출 */
}

.section-good-change .case-copy-right {
  position: absolute;
  right: -40px;
  bottom: 72px;
  margin: 0;
  font-size: 11px;
  line-height: 1;
  color: rgba(255,255,255,.92);
  transform: rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
}

.section-good-change .case-text-wrap {
  display: block;
  margin: 0;
  padding: 26px 48px 44px;
  border-radius: 0 0 24px 24px;
  background: #E9EADE;
  text-align: center;
}

.section-good-change .case-country-tag {
  margin: 0;
  color: #89A230;
  font-size: clamp(16px, 1.9vw, 21px);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.section-good-change .case-tag-divider {
  padding: 0 5px;
  color: #a2ad78;
}

.section-good-change .case-rule {
  width: 100%;
  height: 1px;
  margin: 24px 0 30px;
  background: rgba(85,106,31,.22);
}

.section-good-change .case-desc {
  max-width: 820px;
  margin: 0 auto;
  color: #4a4a45;
  font-size: clamp(14px, 1.55vw, 17px);
  line-height: 1.85;
  font-weight: 500;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

@media (max-width: 860px) {
  .section-good-change .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .good-change-header {
    padding-bottom: 40px;
  }

  .good-change-list {
    gap: 40px;
  }

  .section-good-change .case-img-wrap {
    border-radius: 0;
    overflow: visible;
  }

  .section-good-change .case-text-wrap {
    padding: 18px 22px 30px;
    border-radius: 0 0 14px 14px;
  }

  .section-good-change .case-country-tag {
    font-size: 14px;
  }

  .section-good-change .case-rule {
    margin: 16px 0 20px;
  }

  .section-good-change .case-desc {
    font-size: 12px;
    line-height: 1.75;
    letter-spacing: -0.025em;
  }

  .section-good-change .case-copy-right {
    right: -31px;
    bottom: 51px;
    font-size: 8px;
  }
}

/* ── 하단 CTA 배너 모바일 정렬 보정 ── */
@media (max-width: 860px) {
  .gn-info-banner {
    padding: 24px 20px;
  }

  .gn-info-banner .btnalign {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .gn-info-banner .gn-info-btn {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }
}

/* ── 실제 이미지 에셋 반영 보정 ── */
/* image1~4는 PC/모바일 전용 이미지를 picture로 분기하고 항상 가운데 정렬 */
.csr-responsive-image {
  display: block;
  width: 100%;
  text-align: center;
}

.csr-responsive-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.case-img-wrap {
  text-align: center;
}

.case-img-wrap > img,
.case-img-wrap > picture,
.case-img-wrap picture img {
  margin-left: auto;
  margin-right: auto;
}

/* 사례 이미지는 PNG 자체에 라운드가 들어가 있으므로 이미지 라운드를 다시 만들지 않음.
   설명 패널을 이미지 아래로 살짝 겹쳐서 하나의 카드처럼 자연스럽게 이어지게 함. */
.section-good-change .case-img-wrap {
  position: relative;
  z-index: 2;
}

.section-good-change .case-text-wrap {
  position: relative;
  z-index: 1;
  margin-top: -18px;
  padding-top: 44px;
}

/* 모바일 HERO: 공통 .section의 80px 상단 여백이 hero에도 적용되는 현상 제거 */
@media (max-width: 860px) {
  .section-hero.ptb0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .section-hero .hero-img {
    margin: 0;
  }

  .section-hero .hero-img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .section-good-change .case-text-wrap {
    margin-top: -14px;
    padding-top: 32px;
  }
}


/* ===== 2026-09 visual polish ===== */
/* 우수사례(image3/4) 카피라이트는 이미지 안쪽 우측에 오버레이 */
.section-good-change .case-copy-right {
  display: block;
  right: 14px;
  bottom: 18px;
  color: rgba(255,255,255,.95);
  font-size: 11px;
  line-height: 1;
  z-index: 2;
}

/* 모바일 HERO: 이미지 아래에 불필요한 흐름 여백이 생기지 않도록 텍스트를 이미지 위에 절대 배치 */
@media (max-width: 860px) {
  .section-hero.ptb0 {
    position: relative;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
  }

  .section-hero .hero-img,
  .section-hero .hero-img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .section-hero .section-inner {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0 20px 54px;
    display: flex;
    align-items: flex-end;
    min-height: 0;
    z-index: 2;
  }

  .section-hero .hero-copy-right {
    right: 24px;
    bottom: 24px;
  }
}

/* HERO copyright가 우측 가장자리에 붙지 않도록 PC에서도 약간 안쪽 배치 */
@media (min-width: 861px) {
  .section-hero .hero-copy-right {
    right: 32px;
  }
}

@media (max-width: 860px) {
  .section-good-change .case-copy-right {
    right: 10px;
    bottom: 14px;
    font-size: 9px;
  }
}


/* ===== 우수사례 카피라이트 위치 최종 보정 =====
   회전된 텍스트의 bottom 기준 때문에 이미지 밖으로 내려가던 현상을 방지하고,
   이미지 우측 안쪽에서 세로로 안정적으로 표시 */
.section-good-change .case-copy-right {
  position: absolute;
  top: auto;
  right: 16px;
  bottom: 20%;
  margin: 0;
  color: rgba(255,255,255,.95);
  font-size: 11px;
  line-height: 1;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(0deg);
  transform-origin: center;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 860px) {
  .section-good-change .case-copy-right {
    top: auto;
    right: 10px;
    bottom: 20%;
    font-size: 9px;
    transform: rotate(0deg);
  }
}

/* ===== 2026-09 최종 위치 조정 ===== */
/* 우수사례 copyright: 이미지 하단에서 10% 지점 */
.section-good-change .case-copy-right {
  top: auto;
  bottom: 10%;
}

/* PC HERO 카피를 기존보다 이미지 하단 쪽으로 배치 */
@media (min-width: 861px) {
  .section-hero .section-inner {
    padding-top: 250px;
    padding-bottom: 55px;
    align-items: flex-end;
  }
}

@media (max-width: 860px) {
  .section-good-change .case-copy-right {
    top: auto;
    bottom: 10%;
  }
}


/* ===== 왜 굿네이버스와? — 3열 카드 ===== */
.why-gn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 0;
}
.why-gn-card {
  background: #f2f2e9;
  border-radius: 20px;
  padding: 36px 28px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.why-gn-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #555;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.why-gn-title {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700;
  color: #2b2b2b;
  line-height: 1.45;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}
.why-gn-desc {
  font-size: clamp(13px, 1.4vw, 15px);
  color: #555;
  line-height: 1.8;
  margin: 0;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

@media (max-width: 860px) {
  .why-gn-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .why-gn-card {
    padding: 28px 20px 30px;
    border-radius: 16px;
  }
}


/* ===== 사회공헌 방법 — 2×2 번호 카드 ===== */
.csr-method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.csr-method-card {
  border-radius: 20px;
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.csr-method-card--beige { background: #f2f2e9; }
.csr-method-card--green { background: #8cb63b; }

.csr-method-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #555;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.csr-method-card--green .csr-method-number { color: #6f8427; }

.csr-method-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: #2b2b2b;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  line-height: 1.35;
}
.csr-method-card--green .csr-method-title { color: #fff; }

.csr-method-desc {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.8;
  color: #555;
  margin: 0;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.csr-method-card--green .csr-method-desc { color: rgba(255,255,255,.92); }

@media (max-width: 860px) {
  .csr-method-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .csr-method-card {
    padding: 24px 18px 28px;
    border-radius: 16px;
  }
}


/* ===== Hero 타이틀 텍스트 쉐도우 ===== */
.hero-title {
  text-shadow: 0 2px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
}


/* ===== 원본 사이즈 유지 + 가운데 정렬 이미지 ===== */
.csr-image-center {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}
.csr-image-center picture,
.csr-image-center img {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
}