/* ===== Home v3 ===== */
.hero-yon{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  color:#fff;
  margin-top:-25px;
  border-bottom:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid #194A6C; 

  /* 1920 : 850 비율 유지 */
  aspect-ratio: 1920 / 450;

  /* 세로 가운데 정렬 */
  display:flex;
  align-items:center;

  /* 배경: 어두운 오버레이 + 이미지 (변수 X, 확실하게) */
  background-image:
    linear-gradient(180deg, rgba(227, 233, 255, 0.55), rgba(13,22,52,.55)),
    url('/images/bg_2.jpg');

  background-repeat:no-repeat;
  background-position:center center;
  background-size:auto, cover;  /* 1번째(그라디언트)는 auto, 2번째(이미지)는 cover */
}

/* 좌우 여백만 유지 */
.hero-yon__inner{
  padding:0 20px;
}

/* 히어로 아래 파란 메뉴 바 */
.hero-menu{
  background:#194A6C;
  color:#fff;
  border-top:1px solid #194A6C;      /* 선택 사항: 위/아래 테두리도 동일 색 */
  border-bottom:1px solid #194A6C;
}

/* 안쪽 레이아웃 (최대폭 + 가운데 정렬) */
.hero-menu__inner{
  max-width:1200px;          /* wrap과 같게 맞추세요 */
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  min-height:120px;          /* Figma의 height 120px */
}

/* 각 메뉴 아이템 */
.hero-menu__item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
}

/* 아이콘 */
.hero-menu__icon{
  width:60px;
  height:60px;
  display:block;
  object-fit:contain;
  transition: transform .18s ease, filter .18s ease;
}
.hero-menu__item:hover .hero-menu__icon{
  transform: translateY(-3px);                             /* 위로 3px */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));         /* 그림자 살짝 */
}

/* 호버 살짝 강조 */
.hero-menu__item:hover{
  text-decoration:underline;
}

/* 반응형 – 폭 줄어들면 3열/2열로 */
@media (max-width:1100px){
  .hero-menu__inner{
    grid-template-columns:repeat(3,1fr);
    row-gap:8px;
  }
}
@media (max-width:640px){
  .hero-menu__inner{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:480px){
  .hero-menu__inner{
    grid-template-columns:1fr;
  }
}


.hero-yon__inner{padding:0 20px}
.hero-yon .eyebrow{margin:0 0 12px; font-size:12px; letter-spacing:.28em; opacity:.9; text-transform:uppercase; font-weight:200;}
.hero-yon h1{margin:0 0 14px; line-height:1.25;  font-weight:200; }
.hero-yon h1 strong{font-weight:700; }
.hero-yon__actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;  }
.btn{background:#fff; color:#0e2247}
.btn.ghost{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35)}
.btn.ghost{
  background:#194A6C;
  color:#fff;
  border-color:#194A6C;
}

/* 배너 하단 서비스 벨트 */
.service-belt{position:absolute; left:0; right:0; bottom:-34px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.service-belt .svc{background:#fff; color:#111; text-decoration:none; display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px; border:1px solid #e7eaf0; box-shadow:var(--shadow-2)}
.service-belt .ico{font-size:20px; line-height:1}
.service-belt em{font-style:normal; font-weight:700}


/* 2열 레이아웃은 그대로 */
.news-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-top:64px;
}

/* 카드 베이스 */
.news-card{
  background:transparent;
  border:none;
}

/* 제목(공지사항 / 보도/설명자료) */
.news-card__title{
  margin:0 0 26px;             /* 제목과 bar 사이 간격 */
  font-size:32px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:#333;
}

/* 위 검은 bar + 흰 박스 */
.news-card__box{
  background:#fff;
  border-top:2px solid #000;   /* Figma의 bar */
  padding-top:4px;             /* bar와 첫 글 사이 간격 */
}

/* 리스트 공통 */
.news-card .list{
  list-style:none;
  margin:0;
  padding:0;
}

.news-card .list li{
  border-top:1px solid #DFDFDF;
}

.news-card .list li:first-child{
  border-top:none;
}

/* 한 줄(제목+날짜) 레이아웃: 세로 쌓기 */
.news-card .list a{
  display:block;               /* flex 가로배치 끊기 */
  padding:16px 0;
  text-decoration:none;
  color:#333;
}

/* 글 제목 */
.news-card .list span{
  display:block;
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.02em;
  margin-bottom:4px;           /* 제목과 날짜 사이 간격 */
}

/* 날짜(아래) */
.news-card .list time{
  display:block;
  font-size:15px;
  color:#666;
}

/* 아래 회색 버튼 */
.news-card__more{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:16px;
  width:100%;
  height:50px;
  border-radius:8px;
  background:#F2F2F2;
  font-size:15px;
  font-weight:500;
  letter-spacing:-0.02em;
  color:#666;
  text-decoration:none;
}

.news-card__more:hover{
  background:#e5e5e5;
}

/* 모바일에서 한 칸씩 */
@media (max-width:768px){
  .news-grid{
    grid-template-columns:1fr;
  }
}


.news-card header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}

.news-card__head h3{
  margin:0 0 4px;
  font-size:18px;
}

.news-card__desc{
  margin:0;
  font-size:13px;
  color:#6b7380;   /* 연한 회색 톤 */
}

/* 좁은 화면에서는 위아래로 쌓이게 */
@media (max-width:520px){
  .news-card header{
    flex-direction:column;
    align-items:flex-start;
  }
}


@media (max-width:1100px){.service-belt{grid-template-columns:repeat(3,1fr); bottom:-26px}}
@media (max-width:768px){.hero-yon{padding:88px 0 120px}.news-grid{grid-template-columns:1fr}}
@media (max-width:520px){.service-belt{grid-template-columns:1fr; bottom:-18px}}


/* 좌우 고정, 가운데는 자연스레 중앙 자리에 */

/* GNB는 가운데 칸에 배치 + 가로 나열 */





/* 반응형 살짝 조정 */



/* 공통 섹션 타이틀 */
.section-title{margin:0 0 14px; font-size:32px; font-weight:800}

/* 1) 임팩트 */
.impact__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; list-style:none; margin:10px 0 0; padding:0}
.impact__grid li{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center}
.impact__grid strong{display:block; font-size:26px; font-weight:900}
.impact__grid span{color:var(--muted)}
@media (max-width:960px){.impact__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.impact__grid{grid-template-columns:1fr}}

/* 2) 카드 공통 */
.cards{gap:18px}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; display:block}
.card img{width:100%; height:200px; object-fit:cover}
.card.h img{height:180px}
.card__body{padding:14px}
.card .tag{display:inline-block; font-size:12px; background:#eef7e6; color:#3c8b15; border-radius:999px; padding:4px 8px; margin-bottom:8px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:#444}
.card:hover{box-shadow:var(--shadow-2); transform:translateY(-1px); transition:.15s}

/* 3) 기부 CTA 밴드(풀블리드) */
/* 6) 기부 CTA 밴드(풀블리드 → 피그마 스타일) */
.donate-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#F3FBEF;          /* Rectangle 9 */
  color:#333;
  min-height:320px;            /* 1920x320 비율 비슷하게 */
  display:flex;
  align-items:center;          /* 세로 가운데 */
}

/* 안쪽 2컬럼 레이아웃 */
.donate-band__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

/* 왼쪽 텍스트 */
.donate-band__eyebrow{
  margin:0 0 8px;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:#0A9F6D;               /* 초록 포인트 텍스트 */
}

.donate-band h2{
  margin:0 0 8px;
  font-size:32px;
  font-weight:300;             /* Light */
  line-height:1.25;
  letter-spacing:-0.02em;
  color:#333;
}

.donate-band h2 strong{
  font-weight:700;             /* “평가·인증 신청”만 Bold */
}

.donate-band__sub{
  margin:0;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-0.02em;
  color:#666;
}

/* 오른쪽 버튼 영역 */
.donate-band__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* 버튼 스타일 (donate 영역 한정) */
.donate-band .btn.donate{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:8px 26px;
  min-width:140px;
  height:50px;
  border-radius:6px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.02em;
  text-decoration:none;
  border:1px solid #0A9F6D;
  background:#0A9F6D;          /* 신청하기 (Filled) */
  color:#fff;
}

.donate-band .btn.donate.ghost{
  background:#fff;
  color:#0A9F6D;
  border-color:#0A9F6D;        /* 신청안내 (Outline) */
}

/* 호버 살짝 */
.donate-band .btn.donate:hover{
  filter:brightness(0.95);
}

/* 반응형 – 좁은 화면에서는 위아래로 쌓기 */
@media (max-width:768px){
  .donate-band{
    min-height:auto;
    padding:32px 0;
  }

  .donate-band__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .donate-band__actions{
    align-self:flex-start;
  }
}
/* 넓은 화면에서만 미세 조정 */
@media (min-width: 1200px){
  /* 컨테이너는 그대로 가운데 두고 */
  .donate-band__inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:center;
  }

  /* 텍스트 블록을 살짝 왼쪽으로 밀기 */
  .donate-band__text{
    transform: translateX(-240px);   /* 숫자 키우면 더 왼쪽으로 */
  }

  /* 버튼 묶음을 오른쪽 끝으로 밀고, 거기서 다시 조금 더 오른쪽으로 */
  .donate-band__actions{
    margin-left:auto;               /* 오른쪽 끝으로 붙이기 */
    transform: translateX(240px);    /* 숫자 키우면 더 오른쪽으로 */
  }
}
/* =========================
   GNB2 정렬 패치 (최소 수정)
   - 파일 맨 아래에 추가
   ========================= */


/* 4) 스토리 */
.story-grid .card.v img{height:180px}
/* ===== 주요 평가원 행사: 갤러리형 그리드 ===== */
.story-grid {
  margin-top: var(--space-sec);
}

/* 제목 + 우측 버튼 정렬 */
.story-grid__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.story-grid .section-title {
  margin:0; /* 위/아래 여백 제거해서 헤더 라인 정리 */
}

/* 우측 버튼 묶음 */
.story-grid__nav {
  display:flex;
  gap:12px;
}

/* 공통 원형 버튼 베이스 (피그마 btn) */
.story-nav {
  width:50px;
  height:50px;
  border-radius:50%;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 25px rgba(0,0,0,0.15);
  cursor:pointer;
  padding:0;
}

/* 왼쪽(이전) – 남색 배경 + 흰 화살표 */
.story-nav--prev {
  background:#194A6C;
  color:#ffffff;
}

/* 오른쪽(다음) – 흰 배경 + 진회색 화살표 */
.story-nav--next {
  background:#ffffff;
  color:#333333;
}

/* 화살표 아이콘 (CSS로 그리기 – 피그마의 16x10 frame 느낌) */
.story-nav::before{
  content:"";
  width:12px;
  height:12px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(135deg);     /* 기본은 ‹ 방향 */
}

/* 오른쪽 버튼은 방향만 반대로 */
.story-nav--next::before{
  transform:rotate(-45deg);     /* › 방향 */
}
/* 살짝 호버 효과 */
.story-nav:hover {
  transform:translateY(-1px);
}
/* 브랜치/참여 카드 – Figma 스타일 */
.branch-tools .tool{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 28px;
  height:200px;                /* 높이 200px 고정 */
  border-radius:20px;
  box-shadow:var(--shadow-1);
  overflow:hidden;
}

/* 왼쪽 텍스트 영역 */
.branch-tools .tool__body{
  max-width:60%;
}

.branch-tools .tool h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:700;
}

.branch-tools .tool p{
  margin:0 0 16px;

}

/* 오른쪽 아이콘 영역 */
.branch-tools .tool__illust img{
  display:block;
  width:120px;        /* 아이콘 크기 조절 가능 */
  height:auto;
}

/* 버튼 살짝 둥글게 */
.branch-tools .tool__btn{
  padding:8px 22px;
  border-radius:999px;
  font-size:15px;
}

/* 카드별 배경색 */
.tool--schools{
  background:#f5f9ff;       /* 밝은 파란 톤 */
}

.tool--guide{
  background:#0f2348;       /* 진한 남색 */
  color:#fff;
}

.tool--guide p{
  color:rgba(255,255,255,.8);
}

.tool--guide .tool__btn{
  background:#fff;
  color:#0f2348;
}


/* ===== Footer 위 파트너 로고 띠 ===== */
.partner-belt{
  width:100vw;
  margin-left:calc(50% - 50vw);   /* 풀브리드 */
  background:#f7f9fb;
  border-top:2px solid #ffffff;   /* 위쪽 파란 라인 (원본 느낌) */
  border-bottom:1px solid #e5e7eb;
  padding:10px 0;
  margin-top: 10px;
}

.partner-belt__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.partner-belt__row{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.partner-belt__row img{
  display:block;
  height:32px;              /* 로고 높이 */
  width:auto;
  object-fit:contain;
}
/* home-v3에서 footer 위 여백 없애기 */
.home-v3 .site-footer.footer--dark{
  margin-top: 0 !important;
}


/* 화면 좁아지면 가운데 정렬 + 줄바꿈 */
@media (max-width:768px){
  .partner-belt__row{
    flex-wrap:wrap;
    justify-content:center;
    row-gap:16px;
  }

  .partner-belt__row img{
    height:26px;
  }
}


/* 7) 뉴스레터 밴드 */
.subscribe-band{background:#f7f9f7; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; margin-top:28px}
.subscribe__inner{text-align:center}
.subscribe__form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px}
.subscribe__form input{height:44px; padding:0 12px; border:1px solid #dfe3ea; border-radius:10px; min-width:260px}
.subscribe__form button{height:44px}

/* ===== 스크롤 리빌(옵션) ===== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .45s ease, transform .45s ease}
.reveal.is-in{opacity:1; transform:none}





.fullbleed{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; }


/* Story Carousel Styles */
.story-carousel {
  position: relative;
  max-width: 1200px; /* Adjust as needed, wider for multiple slides */
  margin: 0 auto;
  padding: 0 20px; /* Space for arrows */
}

.story-carousel .scroller {
  overflow: hidden;
}

.story-carousel .track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  transition: transform 0.5s ease;
}

.story-carousel .slide {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 10px;
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 0 10px; /* Gap between slides */
  flex: 0 0 100%; /* Default: one per view */
  min-height: 200px; /* Increased height for taller slides */
}

@media (min-width: 768px) {
  .story-carousel .slide {
    flex: 0 0 calc(33.33% - 20px); /* Three per view, adjust for margin */
  }
}

.story-carousel .slide img {
  width: 100%;
  height: auto;
  display: block;
}

.story-carousel .slide__body {
  padding: 10px;
  text-align: center; /* Optional */
}

.story-carousel .carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  position: relative;
}

.story-carousel .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 1.5em;
  color: #333;
}

.story-carousel .nav.prev {
  left: -20px;
}

.story-carousel .nav.next {
  right: -20px;
}

.story-carousel .dots {
  display: flex;
  gap: 8px;
}

.story-carousel .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ddd;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.story-carousel .dot.active {
  background-color: #8b5cf6; /* Purple like in the example */
}

/* Hide scrollbar */
.story-carousel .scroller::-webkit-scrollbar {
  display: none;
}



/* ==== Section spacing overrides (Home v3) ==== */
:root{
  --space-sec: clamp(36px, 5vw, 84px);       /* 섹션 간 기본 간격 */
  --space-sec-sm: clamp(24px, 3vw, 48px);    /* 작은 간격 */
}

/* 요청하신 섹션들의 위쪽 여백을 통일해서 넉넉하게 */
.impact,
.campaign-grid,
.donate-band,
.story-carousel,
.partners {
  margin-top: var(--space-sec);
}
/* 갤러리 제목 + 버튼 헤더 */
.campaign-grid__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;   /* 제목 아래 여백 */
}

/* 오른쪽 화살표 버튼 묶음 */
.campaign-grid__nav{
  display:flex;
  gap:12px;
}

/* 브랜치/참여 도구도 주변과 여백 맞춤(필요 시 포함) */
.branch-tools { margin-top: var(--space-sec); }

/* 섹션 타이틀 아래 여백(조금 여유) */
.section-title {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
}

/* 카드/그리드 간 내부 간격도 소폭 확장 */
.cards { gap: clamp(16px, 1.6vw, 24px); }
.impact__grid { gap: clamp(16px, 1.6vw, 22px); }

/* 풀블리드 밴드 계열은 상하 패딩을 크게 */
.donate-band {
  padding: clamp(44px, 6vw, 96px) 0;  /* 기존보다 상하 여유 */
}
.subscribe-band {
  padding: clamp(32px, 4vw, 64px) 0;
  margin-top: var(--space-sec-sm);
}

/* 파트너 로고 줄 간격/윗여백 약간 키움 */
.partners__row {
  gap: clamp(18px, 2vw, 32px);
  margin-top: clamp(10px, 1.2vw, 18px);
}

/* 뉴스 그리드 시작 간격도 살짝만 보강(히어로 벨트와 충돌 방지) */
.news-grid {
  margin-top: clamp(40px, 4vw, 72px);
}

/* 좁은 화면에서 과한 여백 방지 */
@media (max-width: 520px){
  :root{ --space-sec: clamp(28px, 6vw, 56px); }
}