html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  
  
  :root{
    --bg:#fff; --card:#ffffff; --ink:#0f2e1f; --muted:#4b6356;
    --brand:#2e7d5b; --brand-ink:#1d5a41; --border:#e2efe7;
    --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
  }

  * { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html, body { height: 100%; }
  body{
    font-family: "Pretendard", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f7f6;
  }

  a{text-decoration: none; color: black;}
  ul, li{list-style: none;}

  .newsletter-shell{
  height: 100svh;              /* 기기 화면높이 채움 */
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;            /* 스케일 시 생길 수평 스크롤 방지 */
  background: #f5f7f6;         /* 기존 배경과 동일하게 */
}

  .newsletter{
    height: 100svh;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  .swiper{
    height: 100%;
  }
  .swiper-slide{
    display: grid;
    grid-template-rows: auto 1fr auto; /* sticky 헤더/푸터 + 스크롤 영역 */
    height: 100%;
    background: var(--bg);
  }
  /* 각 슬라이드 상단 고정 영역 (수평 스와이프가 가능한 터치 존) */
  .slide-header{
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    padding: calc(12px + var(--safe-top)) 16px 12px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffffE6 75%, transparent 100%);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid var(--border);
    padding: 10px;
  }

  /* .hint{ margin-left: auto; font-size: 12px; color: var(--muted); } */
  /* 세로 스크롤 콘텐츠 영역 */

  /* Swiper의 no-swiping 적용 (수평 제스처 무시) */
  .swiper-no-swiping { touch-action: pan-y; }
  /* 섹션 카드 */
  .card h3{ margin: 0 0 8px 0; font-size: 16px; }
  /* .card p{ margin: 0; color: var(--muted); line-height: 1.6; } */
  .media{
    width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--border);
    background: #eef4f0; display: grid; place-items: center; margin-bottom: 12px;
  }
  /* 하단 고정 푸터 (페이지/공유 등) */
  .slide-footer{
    position: sticky; bottom: 0; z-index: 5;
    padding: 12px 16px calc(12px + var(--safe-bottom));
    background: linear-gradient(0deg, #ffffff 0%, #ffffffE6 75%, transparent 100%);
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
  }
  .btn{ appearance: none; border: none; border-radius: 999px; padding: 10px 14px; font-weight: 700; }
  .btn-primary{ background: var(--brand); color: #fff; }
  .btn-ghost{ background: #fff; border:1px solid var(--border); color: var(--brand-ink); }
  /* Swiper 기본 UI 커스터마이즈 */
  .swiper-pagination{ bottom: calc(8px + var(--safe-bottom)) !important; z-index: 50;}
  .swiper-pagination-bullet{ background: #bcd6c9; opacity: 1; }
  .swiper-pagination-bullet-active{ background: var(--brand); }
  /* 접근성: 큰 텍스트 선호 시 확대 대응 */
  @media (prefers-reduced-motion: reduce){
    .swiper, .slide-scroll{ scroll-behavior: auto; }
  }
  /* 공통 */
  .card{
    background: var(--card);
    border: 1px solid var(--border);
    /* border-radius: 16px; */
    box-shadow: 0 10px 30px rgba(16,69,46,.06);
    /* padding: 16px; */
    /* margin: 0 0 16px 0; */
  }
  h3{ text-align: center; margin: 10px 0;}
  h4{ margin: 10px 0;}
  .top_button{width: 60px; height: 60px; border-radius: 50%; position: fixed; bottom: 10%; right: 5%; background-color: white; box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3); z-index: 900;}
  .a_button{width: 100%; height: 40px; background-color: #2e7d5b; border-radius: 40px;margin: 30px 0; text-align: center; line-height: 40px; color: white;}
  .title{ width: 300px; position: relative;}
  .title > img{ width: 100%;}
  .slide-header{display: flex; align-items: center; justify-content: space-between;}
  /* .slide_title{position: absolute; top: 6px; left: 50%; transform: translateX(-50%); color: white; font-size: 18px; font-weight: 700;} */
  .slide_title{font-size: 16px; font-weight: 600;}
  

  /* 1번 페이지 */
  .logo{width:120px; display: flex; align-items: end;}
  .logo > img{width: 100%;}
  /* .main_title{padding-top: 60px;} */
  .media01{ width: 100%;  position: relative;}
  .media01 > img {width: 100%;}
  .media02 > img {width: 100%;}
  .media01 > h2{position: absolute; bottom: 5%; right:3%; color: white; font-size: 40px; text-align: end; margin: 0;}
  .pill{
    font-size: 20px; line-height: 1; padding: 8px 10px; position: absolute; top: 5%; left: 0;
    background: rgba(0, 0, 0, 0.6); color: white; font-weight: 600;
  }
  .media02{width: 100%;}
  .footer_logo{width: 100px;}
  .footer_logo > img{width: 100%;}
  .card01_1 {padding: 10px; margin: 10px 0;}
  .card01_1 > p{margin: 4px 0; font-size: 14px;}

  .hint_box{overflow: hidden; position: relative; width: 100%;height: 40px;background-color: white; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 20px; padding: 10px 40px;display: flex; align-items: center;justify-content: center;gap: 10px;font-size: 16px;font-weight: 700;}
  .hint_box > p {position: absolute; padding: 10px; height: 40px; z-index: 30;}
  .arrow {position: absolute; height: 40px; right: 10px; top: 0px; display: flex; align-items: center; z-index: 31;  animation: arrowMove 2s ease-in-out infinite;}
  .arrow > img {max-height: 30px; }

  /* @keyframes arrowMove {
  0% { transform: translateX(0%);}
  100% { transform: translateX(-80%);}
} */

  @keyframes arrowMove {
  0% {right: 10px;}
  100% { right: 560px}
}
  
  
  /* 2번 페이지 */
  
  .page02 > .media01 > span{position: absolute; right: 0; bottom: 10%; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 10px;}
  .card02_1 {padding: 10px; margin: 10px 0;}
  .card02_1 > p{margin: 4px 0; font-size: 18px;}
  .page02_wrap {display: flex; flex-direction: column; gap: 30px;}
  .card_news_wrap {max-width: 600px; border-radius: 10px; box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.25);}
  .card_news_img > img{width: 100%;}
  .card_news_text_wrap{padding: 20px;}
  .card_news_text_title {font-size: 24px; font-weight: 700;}
  .card_news_text_dsc {font-size: 16px; font-weight: 400; opacity: 0.8; margin: 15px 0 20px 0;}
  .card_news_text_subtitle {font-size: 20px; font-weight: 700;}
  .card_news_text_deco {border-radius: 12px; background-color: #D7F3DE; padding: 10px 15px; margin-top: 10px;}
  .card_news_text_deco > p {margin-top: 5px; font-size: 16px; word-break: auto-phrase;}
  .card_news_more_wrap {display: flex; gap: 10px; justify-content: end;align-items: center; margin-top: 10px;}
  .card_news_more_text { font-size: 16px; font-weight: 700; opacity: 0.6;} 
  .card_news_more_img {width: 16px; height: 16px;}
  .card_news_more_img > img {width: 100%;}
  .red_card{background-color: #FFE5E5;}
  .blue_card{background-color: #E5F1FF;}
  .yellow_card{background-color: #FFF5E5;}

  /* 3번 페이지 */
  .page03_subtitle {text-align: center; font-weight: 700; font-size: 18px; margin: 20px 0;}
  .page03_endtext{text-align: center; font-weight: 500; font-size: 16px; margin: 20px 0;}
  .card02_1{background-color: white; padding: 10px; line-height: 24px; word-break: auto-phrase;}

    /* 4번 페이지 */
  .media04 { position: relative;}
  .media04 > img {width: 100%;}
  .media04 > .pill { top: 20%; left: 0%; font-size: 26px; line-height: 30px; font-weight: 600; padding: 20px;}
  .text_04 > img{width: 100%;}

  .card04 {background-color: white; margin-top: 10px; padding: 10px;}
  .card_location_04{font-weight: 700; font-size: 22px;}
  .card_title_04{font-weight: 600; font-size: 18px; margin: 10px 0;}

  /* 5번 페이지 */
  .village_title {text-align: center; font-size: 22px; font-weight: 700;}
  .card05{max-height: 120px; display: flex; gap: 10px; background-color: white; padding: 10px; margin-top: 30px;}
  .village_img{width: 40%; overflow: hidden;}
  .village_img > img {width: 100%;}
  .card_location_05{font-weight: 700; font-size: 16px;}
  .card_title_05{font-weight: 600; font-size: 14px; margin: 10px 0;}
  .card_sub_05{font-weight: 400; font-size: 14px;}

/* 6번 페이지 */
  .review_img{width: 100%; overflow: hidden;}
  .review_img > img {width: 100%;}
  .review_content_text { font-size: 20px; font-weight: 400; text-align: start; margin: 30px 0; letter-spacing: -1px; word-break: auto-phrase; }


/* 7번 페이지 */
  .village_content_text{ font-size: 20px; font-weight: 400; text-align: center; margin: 30px 0; letter-spacing: -1px; word-break: auto-phrase; }
  

  /* 8번 페이지 */
  .media08 { position: relative; margin-bottom: 20px;}
  .media08 > img {width: 100%;}
  .media08 > .pill { top: 20%; left: 0%; font-size: 26px; line-height: 30px; font-weight: 600; padding: 20px;}

  .party08{width: 100%;}
  .party08 > img{width: 100%;}
  .line_wrap{padding: 10px; display: flex; align-items: center;}
  .dot{width: 10px; height: 10px; background-color: rgba(0, 0, 0, 0.2); border-radius: 50%;}
  .line{width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.2);}


  /* 체험후기 */

.section06 { padding: 20px; background-color: #4C984C; margin-bottom: 20px;}
.section06_top_img { max-width: 300px; width: 100%; margin: 0 auto 30px; }
.section06 > .fff { color: #fff; }
.farm_review { color: black; background-color: #fff; padding: 20px; box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.25); }
.review_titleAndplace{display: flex; justify-content: end; align-items: end; margin-bottom: 10px; gap: 5px;}
.review_title { font-size: 22px; font-weight: bold; margin-bottom: 10px; }
.review_place { font-size: 16px; font-weight: 400; opacity: .6; text-align: end; letter-spacing: -1px; }
.review_village { font-size: 14px; font-weight: 600; opacity: .8; text-align: end;  }
.review_content_text { font-size: 20px; font-weight: 400; text-align: center; margin: 30px 0; letter-spacing: -1px; word-break: auto-phrase; }
.review_more { padding: 9px 10px 9px 20px; max-width: 580px; height: 70px; background-color: #f3f3f3; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.more_text { font-size: 12px; font-weight: bold; }
.more_button > a { max-width: 130px; min-width: 110px; width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 15px; background-color: #4C984C; border-radius: 6px; }
.more_button > a > p { color: #fff; font-size: 14px; }
.more_button > a > img { max-width: 16px; }


.collapse-btn {
  width: 100%;
  padding: 6px 14px;
  margin: 12px 0;
  border-radius: 12px;
  background: #f3f3f3;
  border: 1px solid #e8e8e8;
  color: #333;
  font-size: 16px; font-weight: 600;
  letter-spacing: -.2px;
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.collapse-btn:hover { background:#eee; }
.collapse-btn:active { transform: translateY(1px); }
.collapse-btn:focus-visible {
  outline: 3px solid rgba(0,0,0,.15);
  outline-offset: 2px;
}

[data-collapsible-group]:not(.expanded) .review_img,
[data-collapsible-group]:not(.expanded) .review_content_text {
  display: none !important; /* 일단 다 숨김 */
}

/* 접힘 상태: 프리뷰 항목만 노출 */
[data-collapsible-group]:not(.expanded) .is-preview {
  display: block !important;
}

/* “살아보기 이미지” 랩퍼에만 약간의 스타일 보강 */
[data-collapsible-img] {
  border-radius: 12px;
  background: #FFE7A7; /* 섹션 배경과 맞춤(옵션) */
}
[data-collapsible-img] img {
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;      /* 접힘 상태에서도 상단 크롭이 자연스럽게 */
  object-position: top;
}

/* 접힘 상태: 프리뷰 글은 미리보기(높이 제한 + 그라데이션) */
[data-collapsible-group]:not(.expanded) .review_content_text.is-preview {
  max-height: 160px;
  overflow: hidden;
  position: relative;
  transition: max-height .3s ease;
}
[data-collapsible-group]:not(.expanded) .review_content_text.is-preview::after {
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:40px;
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}


/* 펼친 상태에서는 전부 보이기 */
[data-collapsible-group].expanded .review_content_text,
[data-collapsible-group].expanded .review_img {
  display: block !important;
}

/* -------------------------------------------------------------------- */

.slide-scroll{height: 100%;overflow-y: auto; -webkit-overflow-scrolling: touch;overscroll-behavior: contain; /* 상/하단 바운스 시 상위에 전파 방지 */padding: 0 10px 10px 10px;scroll-behavior: smooth;}

.orange{background-color: #D26F18;}

.card_banner{margin-top: 30px;}
.card_bg > img{width: 100%;}
.card_banner > img{width: 100%;}
.card_banner_small > img{width: 100%;}
.card_text > img{width: 100%;}
.card_festival > img{width: 100%;}

.page01 .card_text + .card_banner {margin-top: 0;}
.page02 .card_banner:first-child{margin-top: 0;}
.page03 .card_banner:first-child{margin-top: 0;}
.page07 .card_banner:first-child{margin-top: 0;}
.page08 .card_banner:first-child{margin-top: 0;}
.page09 .card_banner:first-child{margin-top: 0;}
.card_bannerwrap_02{display: flex; gap: 20px; margin-top: 30px;}


.card_line{border: 3px solid #D9D9D9; padding: 20px; margin-top: 20px;}
.card_line_title{font-size: 22px; font-weight: 700; word-break: auto-phrase;}
.card_line_sub_title{font-size: 20px; font-weight: 600; margin: 10px 0; word-break: auto-phrase;}
.card_line_dsc{font-size: 20px; font-weight: 400; word-break: auto-phrase;}




.review_title{font-size: 22px; font-weight: 700; margin: 20px 0 10px 0;}
.review_location{margin-bottom: 10px;}
.reviewstyle{text-align: start;}

.card_festival{position: relative; margin-bottom: 20px;}
.festival_text_wrap{position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: #fff; text-align: end; padding: 6px; background-color: rgba(0, 0, 0, 0.55);}
.festival_text_title{font-size: 16px;}
.festival_text_dsc{font-size: 14px;}