/* 손글씨 느낌 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden; /* 가로 스크롤 제거 */
}
h1,h2,h3{
  margin:0;
  letter-spacing:-0.03em;
}
main{ }

.sub_title {text-align: center; margin: 50px 0; font-size: 28px; color: #000;}


/* 게시판 공통 */
#bo_v, #bo_w, #bo_gall, #bo_list, #bo_w, #bo_v, .bo_view_wrap{max-width: 1200px; margin: 0 auto 70px auto; padding: 0 10px;}

/* 쇼핑몰 공통 */
#sct_wrap, #sit, #sod_frm, #sod_bsk {max-width: 1200px; margin: 0 auto; padding: 0 10px;}


/* 개인정보처리방침 */
.policy-wrap{max-width:1100px;margin: 50px auto 0 auto;}
.policy-wrap .sub_title{margin: 38px 0;text-align:center;font-weight:700;font-size:28px;line-height:1.3;}

.policy-card{background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:50px; color:#111;}
.policy-head h3{margin:0 0 10px;font-size:20px;line-height:1.4;}
.policy-desc{margin:0 0 18px;line-height:1.7;}
.policy-divider{border:0;border-top:1px dashed #e5e7eb;margin:14px 0;}

.policy-dl{display:grid;grid-template-columns:160px 1fr;gap:10px 22px;margin:0;}
.policy-dl dt{font-weight:700;color:#0f172a;padding-top:6px;}
.policy-dl dd{margin:0;color:#111;}
.policy-dl ul{margin:0;padding-left:1.2em;}
.policy-dl li{margin:4px 0;line-height:1.7;}
.policy-dl li::marker{color:#9ca3af;}

.policy-note{background:#f9fafb;border:1px dashed #e5e7eb;border-radius:10px;padding:12px 14px;line-height:1.7;}

@media (max-width: 767px){
  .policy-wrap .sub_title{font-size:24px;}
  .policy-card{padding:20px;}
  .policy-dl{grid-template-columns:1fr;gap:6px 0;}
  .policy-dl dt{padding-top:0;border-left:4px solid #e5e7eb;padding-left:10px;margin-top:10px;}
}

/* 포커스 가시성 */
.policy-card a:focus-visible,
.policy-card button:focus-visible,
.policy-card input:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px;}



/*===========================================
        농장소개
   =========================================*/

.bb-foret-hero-bgphoto {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
 /* min-height: 100vh;  */
  background-image: url("../../../../images/main_greenhouse.jpg"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  color: #f9fafb;
}

.bb-foret-hero-bgphoto-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.85));
  pointer-events: none;
}

.bb-foret-hero-bgphoto-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 10vh, 110px) clamp(20px, 5vw, 56px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* min-height: 88vh;*/
 
}

.bb-foret-hero-bgphoto-content {
  position: relative;
  width: 100%;
  max-width: 1180px;
}

/* 상단 태그 */
.bb-foret-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.bb-foret-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.8);
  color: #e5e7eb;
}

/* 메인 영역: 텍스트 + 썸네일 */
.bb-foret-hero-main {
  display: flex;
  gap: clamp(24px, 4vw, 40px);
  align-items: flex-start;
}

/* 텍스트 패널 */
.bb-foret-hero-panel {
  flex: 1 1 0;
  max-width: 680px;
  background: rgba(15, 23, 42, 0.78);
  border-radius: 24px;
  padding: 66px 36px 28px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.6);
  backdrop-filter: blur(4px);
  position: relative;
}

.bb-foret-hero-panel::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 36px;
  width: 70px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #0ea5e9);
  opacity: 0.95;
}

.bb-foret-hero-title {
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  margin: 0 0 22px;
  color: #f9fafb;
  letter-spacing: 0.02em;
}
@media (min-width: 1440px) {
.bb-foret-hero-title {margin-bottom:40px; }

}

.bb-foret-hero-text {
  font-size: clamp(0.96rem, 1.02vw, 1.05rem);
  line-height: 1.9;
  color: #e5e7eb;
  margin: 6px 0;
}

.bb-foret-hero-first::first-letter {
  font-size: 2.3rem;
  font-weight: 700;
  float: left;
  line-height: 1;
  padding-right: 6px;
  padding-top: 4px;
  color: #fbbf24;
}

.bb-foret-hero-dialog {
  font-style: italic;
  font-weight: 500;
  color: #bfdbfe;
  margin-top: 10px;
}

.bb-foret-hero-last {
  margin-top: 10px;
}

.bb-foret-hero-highlight {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(254, 243, 199, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.7);
  font-weight: 600;
  color: #facc15;
}

/* 오른쪽: 썸네일 3장 (데스크톱) */
.bb-foret-hero-kids {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.bb-foret-hero-kid {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(30, 64, 175, 0.7);
  background: #000;
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.bb-foret-hero-kid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 썸네일 hover */
.bb-foret-hero-kid:hover {
  transform: translate3d(0, -6px, 0) scale(1.03);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.85);
  filter: brightness(1.04);
}

/* 유틸 */
.bb-foret-only-mobile {
  display: none;
}

/* 부드러운 등장 */
.bb-foret-hero-appear {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: bb-foret-hero-fadeup 0.7s ease forwards;
  animation-delay: 0.1s;
}

@keyframes bb-foret-hero-fadeup {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ===== 반응형 ===== */



@media (max-width: 960px) {
  .bb-foret-hero-bgphoto-inner {
    padding: 64px 20px 56px;
  }

  .bb-foret-hero-main {
    flex-direction: column;
    align-items: stretch;
  }

  .bb-foret-hero-panel {
    max-width: 100%;
  }

  .bb-foret-hero-kids {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


@media (min-width: 768px) and (max-width: 960px){
.bb-foret-hero-kids{display:flex;}
  .bb-foret-hero-kid { width: 32%; padding:0; margin:0; }
  .bb-foret-hero-kid  img{width: 100%; height:auto; }
  
  }

@media (min-width: 961px) {
.bb-foret-hero-kid {
  width: 280px;
  height: 180px;}
}


/* ★ 모바일: bb-foret-hero-kids 영역 안에서 좌우 동일 여백 + 가로 100% */
@media (max-width: 640px) {
  .bb-foret-hero-bgphoto-inner {
    padding: 52px 14px 40px;
  }

  .bb-foret-hero-panel {
    padding: 40px 18px 20px;
    border-radius: 20px;
  }

  .bb-foret-hero-title {
    font-size: 1.6rem;
	line-height:1.3;
  }

  .bb-foret-tag {
    font-size: 0.74rem;
  }

  .bb-foret-hero-main {
    flex-direction: column;
    align-items: stretch;
  }

  .bb-foret-hero-kids {
    width: 100%;          /* 텍스트 패널과 같은 좌우 여백 */
    box-sizing: border-box;    /* 패딩 포함 폭 계산 */
    flex-direction: column;
    gap: 12px;
  }

  .bb-foret-hero-kid {
    width: 80%;               /* 가로 꽉 차게 */
    height: auto;              /* 높이 자동 */
  }

  .bb-foret-hero-kid img {
    width: 100%;
    height: auto;              /* 비율 유지 */
    display: block;
  }

  .bb-foret-only-mobile {
    display: inline;
  }
}








/* =========================
   BB:FORET 패럴랙스 공간 안내
   ========================= */
.bbf-parallax-space {
  position: relative;
  width: 100%;
  background: #ffffff;
}

/* 안쪽 폭 제한 (헤더용) */
.bbf-parallax-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 56px;
  box-sizing: border-box;
}

/* 헤더 텍스트 */
.bbf-parallax-header {
  text-align: center;
}

.bbf-parallax-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(30,127,98,0.08);
  color: #1e7f62;
}

.bbf-parallax-title {
  font-size: clamp(2rem, 2.7vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #111827;
  line-height:1.2;
  margin-bottom:20px; 
}
.bbf-parallax-title span{display:block;}
.bbf-parallax-sub {
  font-size: 1rem;
  line-height: 1.8;
  color: #4b5563;
}
.bbf-parallax-sub span{display:block;}
/* =========================
   가운데 배경 이미지 밴드
   ========================= */
.bbf-parallax-strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 30vh;
  min-height: 260px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

/* =========================
   카드 영역 (2열 그리드)
   ========================= */
.bbf-parallax-cards-wrap {
  position: relative;
  max-width: 1200px;
  margin: -90px auto 110px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 기본 1열, PC에서 2열 그리드 */
.bbf-parallax-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch; /* 각 카드 높이 동일하게 */
  justify-items: stretch; /* 가로 위치 정렬 */
}

/* 데스크톱: 2열, 같은 줄에 01·02 / 03·04 정렬 */
@media (min-width: 960px) {
  .bbf-parallax-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  /* 계단식 margin-top 제거 → 같은 줄 정렬 */
  .bbf-parallax-card:nth-child(2),
  .bbf-parallax-card:nth-child(4) {
    margin-top: 0;
  }
}

/* 카드 공통 */
.bbf-parallax-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 26px 24px 26px;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 16px 40px rgba(15,23,42,0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;

  /* 높이 동일하게 보이도록 */
  height: 100%;
  display: flex;
  flex-direction: column;

  /* 순차 등장 애니메이션 기본값 */
  opacity: 0;
  transform: translateY(18px);
  animation-name: bbf-card-fadeup;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* 순차 딜레이 (1~4번 카드) */
.bbf-parallax-card:nth-child(1) {
  animation-delay: 0s;
}
.bbf-parallax-card:nth-child(2) {
  animation-delay: 0.25s;
}
.bbf-parallax-card:nth-child(3) {
  animation-delay: 0.5s;
}
.bbf-parallax-card:nth-child(4) {
  animation-delay: 0.75s;
}

.bbf-parallax-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(15,23,42,0.12);
  border-color: rgba(30,127,98,0.25);
  background: #ffffff;
}

/* 카드 헤더 */
.bbf-parallax-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.bbf-parallax-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #1e7f62;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
}

.bbf-parallax-card-head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
}

/* 카드 텍스트 기본 */
.bbf-parallax-card p {
  margin: 6px 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #4b5563;
  flex: 1 1 auto;
}
@media (min-width: 2000px) {
.bbf-parallax-card p{font-size:1.1rem;}
}

/* 강조 strong */
.bbf-parallax-card p strong {
  font-weight: 700;
  color: #145c46;
}



/* =========================
   구어체 톤 포인트 – 손글씨 폰트
   ========================= */
/* ★ 반드시 head 쪽에
   <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
   추가해 주세요. */
.bbf-parallax-card .bbf-tone {
  display: inline-block;
  margin: 2px 0;
  padding: 0 2px;
  font-size: 1.15rem;
  font-weight: 400;
  font-family: "Nanum Pen Script", cursive;
  color: #1e7f62;
  letter-spacing: -0.01em;
}

/* 언더라인/하이라이트 없음 */

/* =========================
   애니메이션 정의
   ========================= */
@keyframes bbf-card-fadeup {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   반응형 & 모바일 패럴랙스 폴백
   ========================= */
@media (max-width: 768px) {
  .bbf-parallax-inner {
    padding: 20px 16px 40px;
  }

  .bbf-parallax-strip {
    height: 30vh;
    min-height: 220px;
    background-attachment: scroll;
    background-position: center top;
  }

  .bbf-parallax-cards-wrap {
    margin: -70px auto 80px;
    padding: 0 14px;
  }

  .bbf-parallax-card {
    padding: 22px 18px 22px;
    border-radius: 18px;
  }

  .bbf-parallax-card p {
    font-size: 0.97rem;
    line-height: 1.8;
  }
}

/* 모션 최소화 환경 존중 */
@media (prefers-reduced-motion: reduce) {
  .bbf-parallax-card {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}


/**************************************
 * 오시는 길 (지도 + 안내) 페이지 CSS 전체
 **************************************/

/* 레이아웃 기본 */
#container {
  float: none;
}

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

/* 상단 전경 이미지 영역 (picture 사용) */
.map_bg_box{
  width: 100%;
  margin-bottom: 30px;         /* 지도와 간격 */
  position: relative;          /* 레이어 기준 */
  z-index: 1;                  /* 지도와의 레이어 충돌 방지 기준값 */
  overflow: hidden;            /* 둥근 모서리 안으로 이미지 클리핑 */
  border-radius: 20px;
}
.map_bg_box picture{
  display: block;              /* picture의 기본 inline 특성 제거 */
}
.map_bg_box img{
  width: 100%;
  height: auto;
  display: block;              /* 이미지 하단 공백 제거 */
}

/* 카카오맵 컨테이너 */
.root_daum_roughmap{
  width: 100% !important;
  position: relative;
  z-index: 0;                  /* 이미지 박스와 레이어 충돌 방지 */
  clear: both;                 /* 상단에 float 요소가 있어도 아래 배치 */
}
.root_daum_roughmap .cont{
  display: none;
}

.root_daum_roughmap{border-radius: 20px;}
.root_daum_roughmap {border-bottom: 1px solid #dfdfdf;}
.root_daum_roughmap .wrap_controllers {display: none;}
.root_daum_roughmap {border: 1px solid #dfdfdf !important;}
.root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 {display: none !important;}

/* 반응형 */
@media (max-width: 1439px){
  .map_bg_box{margin-bottom: 20px; border-radius: 0;}
  .root_daum_roughmap{border-radius: 0;}
}

/* 오시는길 안내(아이콘 포함) */
.Intro_direction_container {margin-top: 40px;}
#Intro-direction-title {font-size: 1.375rem; font-weight: 800; color: #111827; margin: 0 0 16px;}
.direction_grid {list-style: none; padding: 0; margin: 0;}
.dir_item {padding: 22px 0; border-top: 1px solid #e5e7eb;}
.dir_item:first-child {border-top: 0; padding-top: 0;}
@supports (display: grid) {
	@media (min-width: 1024px) {
		.dir_item {display: grid; grid-template-columns: 220px 1fr; column-gap: 28px; align-items: start;}
	}
}
@supports not (display: grid) {
	.dir_head {margin-bottom: 10px;}
}
.dir_head {display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.dir_icon {width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;}
.dir_icon img {display: block; width: 100%; height: 100%; object-fit: contain;}
.dir_title {margin: 0; font-size: 1.125rem; font-weight: 700; color: #111827; line-height: 1.3;}
.dir_body {list-style: none; padding: 0; margin: 0;}
.dir_body li {position: relative; padding-left: 12px; line-height: 1.7; color: #111827; font-size: 1rem; margin-bottom: 8px; word-break: keep-all;}
.dir_body li:last-child {margin-bottom: 0;}
.dir_body li::before {content: ""; position: absolute; left: 0; top: 0.8em; width: 2px; height: 2px; border-radius: 50%; background-color: #111827;}
.way_label {font-weight: 700; color: #111827; margin-right: 6px;}
.dir_item a, .dir_item button {outline: 2px solid transparent; outline-offset: 2px;}
.dir_item a:focus-visible, .dir_item button:focus-visible {outline-color: #0b3a83; border-radius: 4px;}
@media (max-width: 1023px) {
	.dir_item {padding: 20px 0;}
	.dir_icon {width: 24px; height: 24px;}
	.dir_title {font-size: 1.0625rem;}
	.Intro_direction_container {padding: 0 20px;}
}
@media (prefers-contrast: more) {
	.dir_icon {color: currentColor;}
	#Intro-direction-title {text-decoration-thickness: from-font;}
}
@media (prefers-reduced-motion: reduce) {
	* {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;}
}


/*==========================================
      프로그램 소개 3
  ==========================================*/
  
/* 공통 레이아웃 */

.full-bleed{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}
.inner{
  max-width:1360px;
  margin:0 auto;
  padding:0 20px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  font-size:0.82rem;
  background:rgba(0,0,0,0.06);
}
.tag span{font-size:1rem;}
.lead{
  font-size:1.02rem;
}

/* =========================
   1. 히어로
   ========================= */
.hero{
  position:relative;
  min-height:100vh;
  color:#fff;
  overflow:hidden;
  padding-left:20px; 
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,rgba(0,0,0,0.55),rgba(0,0,0,0.25),rgba(0,0,0,0.6)),
    url("../../../../images/greenhouse_main.jpg") center/cover no-repeat;
  transform:scale(1.03);
}
.hero-inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:36px 0 40px;
}
.hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}
.hero-logo{
  font-weight:800;
  font-size:1.1rem;
  letter-spacing:.1em;
}
.hero-main{
  margin-top:80px;
}
.hero-title{
  font-size:clamp(1.6rem,2vw,2.6rem);
  margin-bottom:16px;
}
@media (min-width: 560px){
.hero-title span{display:block;}
}

.hero-sub{
  font-size:1rem;
  max-width:600px;
}
.hero-cta{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.btn{
  border-radius: 8px;
  padding: 0 22px;
  border:none;
  cursor:pointer;
  font-size:0.95rem;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  gap:6px;
  text-decoration:none;
}
.btn-main{
  background:var(--yellow);
  color:#3a2b00;
  font-weight:700;
}
.btn-sub{
  background:rgba(0,0,0,0.4);
  color:#fff;
}
.hero-meta{
  margin-top:28px;
  font-size:0.9rem;
  opacity:.9;
}
.hero-meta span::before{content:"· ";}

.hero-bottom{
  margin-top:50px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  font-size:0.86rem;
  opacity:.9;
}
.hero-bubbles{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-bubble{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.5);
}

/* =========================
   2. 온실 스토리  (수정 버전)
   ========================= */
.section-greenhouse{
  position:relative;
  background:#f9f5e9;
  padding:160px 0 180px; /* 위아래 패딩 2배 정도 확대 */
  overflow:hidden;
}

/* 초록 배경을 곡선 블롭 형태로 */
.section-greenhouse::before{
  content:"";
  position:absolute;
  top:-10%;
  right:-25%;
  width:70%;
  height:130%;
  background:#e8f5ec;
  border-radius:60% 0 0 60% / 100% 0 0 90%;
  z-index:-1;
}

.greenhouse-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:40px;
  align-items:center;
}
.gh-photos{
  position:relative;
  padding-right:20px;
}
.gh-main{
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.gh-main img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.gh-floating{
  position:absolute;
  right:20px;       /* 기존: right:-40px;  → 텍스트 영역으로 안 튀어나가게 */
  bottom:-30px;     /* 살짝 위로 올려서 메인 사진 안에 더 붙게 */
  width:210px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.18);  
}
@media (max-width:1100px){
  /* ... 기존 코드 ... */

  .gh-floating{
    right:0;
    bottom:-20px;
    width:180px;
  }
}

.gh-floating img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* STEP 01 원 – 더 크게, 여백 넉넉하게 */
.gh-path{
  position:absolute;
  left:-70px;
  top:-10px;
  width:170px;
  height:170px;
  padding:18px;
  border-radius:999px;
  border:2px dashed rgba(20,82,55,.4);
  background:rgba(255,255,255,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  color:#234;
  text-align:center;
  line-height:1.5;
}
.gh-path strong{
  display:block;
  margin-bottom:4px;
}

.gh-text h2{
  font-size:1.9rem;
  margin-bottom:10px;
}
.gh-text .lead{
  margin-bottom:18px;
}
.gh-points{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
  font-size:0.95rem;
}
.gh-points strong{
  color:var(--green-deep);
}

/* =========================
   3. 동물 친구들 – 그리드 + 말풍선
   ========================= */
.section-animals{

  background:#141817;
  color:#fff;
  padding:70px 0 80px;
}
.section-animals .inner{
  padding-inline:24px;
}
.anim-header{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  margin-bottom:30px;
}
.anim-header h2{
  font-size:1.9rem;
}
.anim-header p{
  font-size:0.96rem;
  max-width:420px;
  color:rgba(255,255,255,.82);
}

/* 데스크탑: 그리드, 스크롤 없음 */
.anim-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px;
}

/* 카드 */
.anim-card{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  background:#000;
  min-height:220px;
}
.anim-photo{
  width:100%;
  height:100%;
}
.anim-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform .5s ease, filter .5s ease;
}
.anim-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:10px 12px 12px;
  pointer-events:none;
}
.anim-label{
  align-self:flex-start;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.8rem;
  background:rgba(0,0,0,.65);
}
.anim-speech{
    font-family: "Nanum Pen Script", cursive;
  align-self:flex-end;
  font-size:17px; 
  max-width:98%;
  line-height:1.4;
  background:rgba(0,0,0,.75);
  padding:8px 11px;
  border-radius:18px 18px 4px 18px;
  opacity:0;
  transform:translateY(10%);
  transition:opacity .3s ease, transform .3s ease;
}
.anim-speech::after{
  content:"";
  position:absolute;
  bottom:-6px;
  right:20px;
  border-width:6px 6px 0 6px;
  border-style:solid;
  border-color:rgba(0,0,0,.75) transparent transparent transparent;
}

/* 호버/포커스 */
.anim-card:hover .anim-photo img,
.anim-card:focus-within .anim-photo img{
  transform:scale(1.08);
  filter:brightness(1.05);
}
.anim-card:hover .anim-speech,
.anim-card:focus-within .anim-speech{
  opacity:1;
  transform:translateY(0);
}

/* 포커스용 버튼 */
.anim-focus-btn{
  position:absolute;
  inset:0;
  border:none;
  background:none;
  color:transparent;
  cursor:pointer;
}

/* 동물별 말풍선 색 */
.anim-card--parrot .anim-speech{background:rgba(20,82,55,.85);}
.anim-card--parrot .anim-speech::after{border-top-color:rgba(20,82,55,.85);}
.anim-card--rabbit .anim-speech{background:rgba(255,182,193,.9);color:#402222;}
.anim-card--rabbit .anim-speech::after{border-top-color:rgba(255,182,193,.9);}
.anim-card--pig .anim-speech{background:rgba(255,210,210,.9);color:#402222;}
.anim-card--pig .anim-speech::after{border-top-color:rgba(255,210,210,.9);}
.anim-card--reptile .anim-speech{background:rgba(255,140,80,.9);}
.anim-card--reptile .anim-speech::after{border-top-color:rgba(255,140,80,.9);}

/* =========================
   4. 실내 놀이터 – 100vw 배경 + 잡지형 텍스트
   ========================= */
.section-kids{
  background:#f2f8ff;
}
.section-kids .full-bleed-wrap{
  position:relative;
  width:100vw;
  height:80vh;
  margin-left:50%;
  transform:translateX(-50%);
  overflow:hidden;
  color:#fff;
}
.kids-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right,rgba(0,0,0,0.55),rgba(0,0,0,0.15)),
    url("../../../../images/trampoline.jpg") center/cover no-repeat;
  transform:scale(1.03);
}
.kids-inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:30px 5vw 32px;
}

/* 상단 태그 */
.kids-top-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.9rem;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.6);
}

/* 잡지 느낌 텍스트 박스 */
.kids-magazine{
  max-width:720px;
  margin-top:auto;
  background:rgba(0,0,0,.82);
  padding:22px 26px 24px;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.kids-magazine-sub{
  font-size:0.9rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom:10px;
}
.kids-magazine h2{
  font-size:2.1rem;
  margin-bottom:8px;
}
.kids-magazine-body{
  columns:2 280px;
  column-gap:26px;
  font-size:0.98rem;
}
.kids-magazine-body p{
  margin:0 0 10px;
}

/* 큰따옴표 안 문장 – 손글씨 폰트 */
.kids-quote{
  font-family:"Nanum Pen Script", cursive;
  font-size:2.2rem;
  line-height:1.2;
  display:block;
  margin:4px 0 10px;
}

/* 하단 라벨 */
.kids-note-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  font-size:0.9rem;
}
.kids-note{
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
}

/* =========================
   5. 포토 스팟 – 100vw x 100vh, 사각형 + 원
   ========================= */
.section-photo{
  background:#fff;
  /*height:100vh;*/
  padding:20px 0;
}
.section-photo .inner{
  max-width:min(1600px, 100vw - 80px);
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);
  gap:30px;
  align-items:center;
}

/* 헤더 */
.photo-header{
  padding:0 10px;
}
.photo-header h2{
  font-size:1.9rem;
  margin:10px 0;
}
.photo-header p{
  font-size:0.96rem;
  color:var(--muted);
}

/* 포토 레이아웃 (우측) */
.photo-layout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:center;
  justify-items:center;
}

/* 공통 타일 – 사각형 */
.photo-tile{
  position:relative;
  overflow:hidden;
  background:#000;
  color:#fff;
  border-radius:26px;
  cursor:pointer;
  width:100%;
  max-width:320px;
  aspect-ratio:4/3;
}
.photo-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform .6s ease, filter .6s ease;
}

/* 원형 타일 */
.photo-circle{
  position:relative;
  overflow:hidden;
  border-radius:50%;
  width:100%;
  max-width:260px;
  aspect-ratio:1/1;
  background:#000;
  cursor:pointer;
}
.photo-circle img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.08);
  transition:transform .6s ease, filter .6s ease;
}

/* 말풍선/텍스트 오버레이 */
.photo-overlay{
  position:absolute;
  inset:0;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.15));
  opacity:0;
  transform:translateY(10%);
  transition:opacity .35s ease, transform .35s ease;
}
.photo-exclaim{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  font-size:0.78rem;
  margin-bottom:4px;
}
.photo-text{
  font-size:0.86rem;
  line-height:1.5;
}

/* 구어체 문구 – 손글씨 폰트 */
.photo-say{
  font-family:"Nanum Pen Script",cursive;
  font-size:1.4rem;
  line-height:1.3;
}

/* 항상 보이는 타일 */
.photo-tile--static .photo-overlay,
.photo-circle--static .photo-overlay{
  opacity:1;
  transform:none;
}

/* 호버 효과 */
.photo-tile:hover img,
.photo-tile:focus-within img,
.photo-circle:hover img,
.photo-circle:focus-within img{
  transform:scale(1.12);
  filter:brightness(1.05);
}
.photo-tile:hover .photo-overlay,
.photo-tile:focus-within .photo-overlay,
.photo-circle:hover .photo-overlay,
.photo-circle:focus-within .photo-overlay{
  opacity:1;
  transform:translateY(0);
}

/* 포커스용 버튼 (웹접근성) */
.photo-focus{
  position:absolute;
  inset:0;
  border:none;
  background:none;
  color:transparent;
  cursor:pointer;
}

/* 텍스트 카드 (블롭 도형 배경) */
.photo-quote-card{
  position:relative;
  width:100%;
  max-width:320px;
  aspect-ratio:4/3;
  padding:16px 18px;
  font-size:0.9rem;
  color:var(--green-deep);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  background:transparent;
}
.photo-quote-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--green-soft);
  border-radius:50% 40% 60% 45% / 55% 60% 40% 45%;
  z-index:-1;
}
.photo-quote-card strong{
  margin-bottom:6px;
}

/* 원형 카드용 텍스트 */
.photo-circle-caption{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  padding:4px 16px;
  border-radius:999px;
  background:rgba(0,0,0,0.7);
  font-size:0.78rem;
  color:yellow; 
}

/* =========================
   6. 예약 안내
   ========================= */
.section-info{
  background:var(--green-deep);
  color:#fff;
  padding:40px 0;
}
.info-bar{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:space-between;
  gap: 20px;
  flex-wrap:wrap;
}
.info-bar h2{
  font-size:1.4rem;
  color: #fff;
}

.info-bar p{
  color: #fff;
}

.info-detail{
  font-size:0.94rem;
}

.info-detail strong{
  display:inline-block;
  width:80px;
  font-weight:600;
}

.info-detail-bottom div{display: inline-block;}
.info-detail-bottom div strong {width: 120px;}
.info-detail-bottom div:nth-child(2) strong {width: 140px;}

.info-note{
  font-size:0.85rem;
  opacity:.86;
  margin-top:8px;
}

/* 푸터 */
footer{
  padding:16px 20px 22px;
  font-size:0.82rem;
  text-align:center;
  color:var(--muted);
  background:#f0ece4;
}

/* ========== 반응형 ========== */
@media (max-width:1100px){
  .greenhouse-grid{
    grid-template-columns:1fr;
  }

  .section-greenhouse{
    padding:120px 0 130px; /* 모바일 쪽은 살짝 줄여서 과한 여백 방지 */
  }

  .section-greenhouse::before{
    right:-40%;
    width:90%;
    height:120%;
  }

  .gh-photos{
    order:2;
    padding-right:0;
  }
  .gh-text{
    order:1;
  }

  /* STEP 01 원 – 작은 화면에서 자연스럽게 */
  .gh-path{
    position:static;
    margin-bottom:20px;
    width:150px;
    height:auto;
    padding:14px 16px;
  }

  .section-animals .anim-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .section-photo .inner{
    grid-template-columns:1fr;
    padding-top:40px;
  }
  .photo-header{
    text-align:left;
  }
}

@media (max-width:860px){
  .hero-inner{padding-top:26px;}
  .hero-main{margin-top:60px;}
  .anim-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .kids-bg{
    background:
      linear-gradient(to bottom,rgba(0,0,0,0.55),rgba(0,0,0,0.2)),
      url("../../../../images/trampoline.jpg") center/cover no-repeat;
  }
  .kids-magazine{
    max-width:none;
  }

  .photo-layout{
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;
  }
}

@media (max-width:720px){
  .inner{padding:0 16px;}
  .section-animals .anim-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .section-kids .full-bleed-wrap{
    height:90vh;
  }
  .kids-magazine-body{
    columns:1 260px;
  }

  .section-photo{
    height:auto;
    padding:40px 0 50px;
  }
  .section-photo .inner{
    height:auto;
  }
  .photo-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){
  .section-animals .anim-grid{
    grid-template-columns:1fr;
  }
}



/*************************************************
   프로그램 소개   > 단체 프로그램 
**************************************************/
.bb-group-program {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 72px 0 88px;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", system-ui, sans-serif;
  color: #222;
  overflow-x: hidden;
}

.bb-group-program__inner {
  width: 100%;
}

/* 헤더 */
.bb-group-program__header {
  text-align: center;
  margin: 0 auto 20px;
  max-width: 960px;
  padding: 0 20px;
}
@media (min-width: 768px) {
	.bb-group-program__header {
	  margin: 0 auto 50px;
	  }
}


.bb-group-program__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 999px;
  background: rgba(30, 127, 98, 0.08);
  color: #1e7f62;
  font-weight: 600;
}

.bb-group-program__title {
  font-size: clamp(28px, 2.2vw, 40px);
  margin: 4px 0 16px;
  letter-spacing: -0.03em;
}

.bb-group-program__desc {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}
.bb-group-program__desc span{
display:block;}


/* 프로그램 리스트 */
.bb-group-program__list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {.bb-group-program__list { gap: 20px;}}



/* =========================
   1,2,4,5번 카드 (행 레이아웃)
   ========================= */
.bb-group-program__card { width: 100%; padding-top:20px;  }



/* row / row-reverse: max-width 1440 중앙 정렬 */
.bb-group-program__card--row,
.bb-group-program__card--row-reverse {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  max-width: 1440px;
  margin: 0 auto;
}

.bb-group-program__card--row {
  flex-direction: row;            /* 이미지 좌, 텍스트 우 */
}

.bb-group-program__card--row-reverse {
  flex-direction: row-reverse;    /* 이미지 우, 텍스트 좌 */
}

/* 사진 / 텍스트 → 항상 50% / 50% */
.bb-group-program__media,
.bb-group-program__card-body {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
}

/* =========================
   이미지 영역 + 정글 커튼
   ========================= */
.bb-group-program__media {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* 세로 높이 줄인 버전 (이전 30vw → 22vw) */
  height: 22vw;
  max-height: 360px;
  overflow: hidden;
}

.bb-group-program__illust {
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.bb-group-program__illust img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: brightness(0.9);
  transition:
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 초록 커튼 레이어 */
.bb-group-program__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 10% 0, rgba(255,255,255,0.12) 0, transparent 30%),
    linear-gradient(120deg, #0c3b2e 0%, #1e7f62 45%, #36a37a 100%);
  transform: translateX(0);
  transform-origin: left center;
  transition: transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

/* row-reverse 카드(이미지 오른쪽)는 커튼이 오른쪽에서 열리도록 */
.bb-group-program__card--row-reverse .bb-group-program__media::before {
  transform-origin: right center;
}

/* 스크롤로 카드가 보이기 시작하면 → 커튼 열기 + 이미지 정리 */
.bb-group-program__media.is-visible::before {
  transform: translateX(105%);
}

.bb-group-program__media.is-visible .bb-group-program__illust img {
  transform: scale(1.0);
  filter: brightness(1);
}

/* (요청) 마우스 오버 효과 삭제 → 관련 CSS 없음 */

/* =========================
   텍스트 영역
   ========================= */
.bb-group-program__card-body {
  padding: 40px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}
@media (min-width: 1440px) {
	.bb-group-program__card-body {
	  padding: 0 0 0 160px;
	 }
}




.bb-group-program__card-title {
  font-size: 24px;
  margin: 0 0 10px;
  letter-spacing: -0.03em;
}

.bb-group-program__card-sub {
  margin: 0 0 16px;
  font-size: 16px;
  color: #5b6670;
}

.bb-group-program__card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: #444;
}

.bb-group-program__card-list li {
  position: relative;
  padding-left: 14px;
  line-height: 1.7;
}

.bb-group-program__card-list li + li {
  margin-top: 4px;
}

.bb-group-program__card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #1e7f62;
  font-size: 14px;
}

/* =========================
   3번: 100vw 고정 배경 hero
   ========================= */
.bb-group-program__card--hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.bb-group-program__hero {
  position: relative;
  width: 100%;
  min-height: 50vh;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url("../../../../images/program_tropical_pizza.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bb-group-program__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
}

.bb-group-program__hero-inner {
  position: relative;
  max-width: 720px;
  padding: 40px 24px 44px;
  box-sizing: border-box;
}

.bb-group-program__card-title--hero {
  font-size: 26px;
  margin-bottom: 12px;
}

.bb-group-program__card-sub--hero {
  font-size: 16px;
  margin-bottom: 18px;
  color: #e8f7f0;
}

.bb-group-program__card-list--hero {
  color: #f5fdf9;
  font-size: 15px;
}

.bb-group-program__card-list--hero li::before {
  color: #ffeb99;
}

/* =========================
   상담 / 문의 CTA 영역 (디자인 리뉴얼)
   ========================= */
.bb-group-program__cta {
  margin: 14px auto 0;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (min-width: 1440px) {
	.bb-group-program__cta {margin: 80px auto 0;}
}

.bb-group-program__cta-inner {
  max-width: 1224px;
  margin: 0 auto;
  padding: 24px 24px 26px;
  border-radius: 18px;
  border: 1px solid #d7e7dd;
  background: #f7fbf9;
  box-shadow: 0 10px 25px rgba(9, 55, 36, 0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}

.bb-group-program__cta-text {  min-width: 0;}

.bb-group-program__cta-label {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 10px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid rgba(30, 127, 98, 0.2);
  color: #1e7f62;
  background-color: #ffffff;
  font-weight: 600;
}

.bb-group-program__cta-main {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: #16352a;
}

.bb-group-program__cta-main strong {
  font-weight: 700;
}

.bb-group-program__cta-sub {
  margin: 0;
  font-size: 14px;
  color: #4f6158;
  line-height: 1.7;
}

.bb-group-program__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

/* 버튼 */
.bb-group-program__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

.bb-group-program__btn--primary {
  background: #1e7f62;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(17, 87, 64, 0.25);
}

.bb-group-program__btn--primary:hover,
.bb-group-program__btn--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(17, 87, 64, 0.3);
}

.bb-group-program__btn--ghost {
  background: #ffffff;
  color: #1e7f62;
  border-color: rgba(30, 127, 98, 0.3);
}

.bb-group-program__btn--ghost:hover,
.bb-group-program__btn--ghost:focus-visible {
  background: #edf6f2;
}


@media (max-width: 1024px) {
  .bb-group-program__card-body {
    padding: 32px 32px;
  }

  .bb-group-program__media {
    height: 40vw;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .bb-group-program {
    padding: 8px 0 64px;
  }

  .bb-group-program__card--row,
  .bb-group-program__card--row-reverse {
    flex-direction: column;
    max-width: 100%;
  }

  .bb-group-program__media,
  .bb-group-program__card-body {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .bb-group-program__media {
    height: auto;
  }

  .bb-group-program__illust,
  .bb-group-program__illust img {
    height: auto;
  }

  .bb-group-program__card-body {
    padding: 18px 28px 20px;
  }

  .bb-group-program__title {
    font-size: 24px;
  }

  .bb-group-program__card-title {
    font-size: 20px;
  }

  .bb-group-program__hero {
    background-attachment: scroll;
  }

  .bb-group-program__hero-inner {
    padding: 28px 16px 32px;
  }

  .bb-group-program__cta-inner {
    padding: 20px 16px 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .bb-group-program__cta-actions {
    width: 100%;
  }

  .bb-group-program__btn {
    width: 100%;
    justify-content: center;
  }
}

/* 2000px 이상: 폰트 vw 단위 */
@media (min-width: 2000px) {
  .bb-group-program__eyebrow { font-size: 0.7vw; }
  .bb-group-program__title { font-size: 2vw; }
  .bb-group-program__desc { font-size: 0.8vw; }
  .bb-group-program__card-title { font-size: 1.4vw; }
  .bb-group-program__card-sub { font-size: 0.8vw; }
  .bb-group-program__card-list { font-size: 0.8vw; }
  .bb-group-program__card-title--hero { font-size: 1.6vw; }
  .bb-group-program__card-sub--hero { font-size: 0.9vw; }
  .bb-group-program__card-list--hero { font-size: 0.85vw; }
  .bb-group-program__cta-main { font-size: 0.8vw; }
  .bb-group-program__btn { font-size: 0.6vw; }
}