@font-face {
  font-family: "SchoolSafetyNotification";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-R.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SchoolSafetyNotification";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-B.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



/* =========================
   Base / Reset
========================= */
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "SchoolSafetyNotification", "PretendardVariable", sans-serif;
}

body{
  background:#fff;
  overflow: hidden; 
}

#fs-wrapper{
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;

  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.fs-section{
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  justify-content: center; 
  align-items: center;     
}


.pc{
  width: 100%;
  max-width: auto;
  margin: 0 auto;
  position: relative;
  left: auto;
  transform: none; 
}

*, *::before, *::after { box-sizing: border-box; }

.feature-text p,
.frame-21 p{
  margin: 0;
}

.frame-42 .div9{
  margin: 0;
}

.screen_out{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================
   HERO 
========================= */
.hero{
 width: 100%;

}
 
/* =========================
   HERO MEDIA (추가)
========================= */
:root{
  --hero-h: 100vh;           
  --hero-content-top: 200px; 
  --hero-side-pad: 24px;    
}






.fs-section--hero .hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); 
  height: var(--hero-h);
  overflow: hidden;
}

/* 배경(이미지+그라데이션) 레이어 */
.hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 25%,
    #e5ecde 100%
  );
}


.hero__img{
position: absolute;
  left: 50%;
  top: 390px;                 
  transform: translateX(-50%); /* Y이동 제거 */
  width: min(1200px, 90vw);
  height: auto;
  display: block;
  bottom: auto;               
  
}

/* 텍스트/아이콘 레이어 */
.hero__content{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--hero-content-top);
  padding-left: var(--hero-side-pad);
  padding-right: var(--hero-side-pad);
}


.fs-section--hero{
  justify-content: flex-start;
  align-items: stretch;
}

.fs-section--hero > .pc{
  /* min-height: 50vh;
  display: flex;
  flex-direction: column;
  position: relative; */
}



.frame-12{
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:center;
  justify-content:center;
  width:100%;
  margin: 0 auto;
  /* position:absolute */
}

.frame-21{
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center;
  justify-content:center;
  position:relative;
}

.div{
  color:#333;
  text-align:left;
  font-family:"PretendardVariable-Medium", sans-serif;
  font-size:18px;
  line-height:27px;
  letter-spacing:-0.3px;
  position:relative;
}

.frame-22{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  position:relative;
}

.div2{
  color:#000;
  text-align:center;
  font-family:"SchoolSafetyNotification", sans-serif;
  font-size:46px;
  font-weight:400;
  position:relative;
}

.logo{
  width:200px;
  height:52px;
  position:relative;
  overflow:hidden;
}

.div3{
  width:96.02%;
  height:80.51%;
  position:absolute;
  right:1.98%;
  left:2%;
  bottom:9.87%;
  top:9.62%;
  overflow:visible;
}

/* 상단 아이콘 */
.frame-20{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:center;
}

/* 공통 아이콘 버튼 */
.icon{
  width:36px;
  height:36px;
  background:#eee;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  transition: background-color .15s ease;
}

.icon__img{
  width: 16px;
  height: 16px;
  object-fit: contain;
}



/* =========================
   AREA VISUAL (section.area_visual)
========================= */




.frame-49{
  width:100%;
  display:flex;
  justify-content:center;
}

.frame-9{
  width: 100%;
  height: 400px;
  background: linear-gradient(to bottom, #ffffff 0%, #f1faf8 70%);
  padding:40px 0 0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  overflow:hidden;
  position:relative;
}

.mockup-1{
  width:300px;
  height:610px;
  object-fit:cover;
  position:relative;
  transform: translateY(0);
}

/* 카드: 배경 영역 위에 겹치기 */
.frame-50{
  background:#fff;
  border-radius:20px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  box-shadow:-1px 0 9px 8px rgba(0,0,0,0.07);

  /* 겹침 포인트: mint 섹션 위로 끌어올림 */
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 120px); 
  z-index: 5;
  margin-top: 0; 
}

/* 내부 블록 */
.frame-48{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  width:100%;
}

.tagbox{
  background:var(--app-sub-green2, #cceedd);
  border-radius:12px;
  padding:8px 16px;
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  height:34px;
  width:100%;
  max-width:343px;
}

.tag-item{
  display:flex;
  flex-direction:row;
  gap:4px;
  align-items:center;
  justify-content:flex-start;
  width:204px;
}
.tag-item2{
  display:flex;
  flex-direction:row;
  gap:1px;
  align-items:center;
  justify-content:flex-end;

  flex: 0 0 auto;      
  white-space: nowrap; 
}

.icon-ticket,
.icon-time{
  width:16px;
  height:16px;
  position:relative;
}
.ticket-star{
  width:83.33%;
  height:75.7%;
  position:absolute;
  right:8.33%;
  left:8.33%;
  bottom:11.8%;
  top:12.5%;
  overflow:visible;
}
.time-circle{
  width:83.33%;
  height:83.33%;
  position:absolute;
  right:8.34%;
  left:8.33%;
  bottom:8.33%;
  top:8.33%;
  overflow:visible;
}

._1197{
  color:var(--app-main-green, #036635);
  text-align:left;
  font-family:var(--pretendard-h3-b-font-family,"Pretendard-Bold",sans-serif);
  font-size:var(--pretendard-h3-b-font-size, 12px);
  line-height:var(--pretendard-h3-b-line-height, 18px);
  letter-spacing:var(--pretendard-h3-b-letter-spacing, -0.3px);
  font-weight:var(--pretendard-h3-b-font-weight, 700);
}
._3{
  color:var(--app-main-green, #036635);
  text-align:left;
  font-family:var(--pretendard-h3-r-font-family,"Pretendard-Regular",sans-serif);
  font-size:var(--pretendard-h3-r-font-size, 12px);
  line-height:var(--pretendard-h3-r-line-height, 18px);
  letter-spacing:var(--pretendard-h3-r-letter-spacing, -0.3px);
  font-weight:var(--pretendard-h3-r-font-weight, 400);
}

.box{
  background:var(--app-main-green, #036635);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:flex-start;
  justify-content:flex-start;
  width:100%;
  max-width:343px;
  height:88px;
}

.txt{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  width:100%;
}

._1{
  color:#fff;
  font-family:var(--pretendard-h1-b-font-family,"Pretendard-Bold",sans-serif);
  font-size:16px;
  line-height:24px;
  letter-spacing:-0.3px;
  font-weight:700;
}

.price{
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:center;
  width:100%;
}

.cash{
  display:flex;
  flex-direction:row;
  gap:2px;
  align-items:center;
  flex:1;
}

._50-000-000{
  color:#fff;
  font-family:"Pretendard-Bold", sans-serif;
  font-size:28px;
  line-height:28px;
  letter-spacing:-0.3px;
  font-weight:700;
}

.div13{
  color:#fff;
  font-family:"Pretendard-Bold", sans-serif;
  font-size:16px;
  line-height:16px;
  letter-spacing:-0.3px;
  font-weight:700;
}

.info-btn{
  background:var(--app-bg-gray, #f1faf8);
  border-radius:12px;
  padding:2px 8px;
  display:flex;
  flex-direction:row;
  gap:4px;
  align-items:center;
}

.div14{
  color:var(--app-main-green, #036635);
  font-family:var(--pretendard-h3-b-font-family,"Pretendard-Bold",sans-serif);
  font-size:12px;
  line-height:18px;
  letter-spacing:-0.3px;
  font-weight:700;
}

/* =========================
   AREA INTRO (section.area_intro)
========================= */
.area_intro{
  width:100%;
  padding: 120px 0 80px;
  display:flex;
  justify-content:center;
}

.frame-23{
  display:flex;
  flex-direction:column;
  gap:40px;
  align-items:center;
  justify-content:flex-start;
  width:460px;
}

.frame-17{
  position: relative;
  border-radius: 30px;
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: #fff;             
  overflow: hidden;        
  
  box-shadow:
    0 5px 5px rgba(0,0,0,.1),
    0 2px 5px rgba(0,0,0,.01);
}

/* “유리 같은 그라데이션 테두리(스트로크)” */
.frame-17::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1.5px; /* 테두리 두께 */

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95) 0%,
    rgba(190,215,255,.75) 35%,
    rgba(255,255,255,.35) 70%,
    rgba(255,255,255,.75) 100%
  );

  
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;

  pointer-events:none;
}

/* 상단/좌측 하이라이트(빛 반사) */
.frame-17::after{
  content:"";
  position:absolute;
  inset:-40% -30% auto -30%;
  height: 120%;
  border-radius: inherit;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.25) 15%,
    rgba(255,255,255,0) 60%
  );
  transform: rotate(-10deg);
  opacity: .85;
  pointer-events:none;
}


.img{
  display:flex;
  align-items:center;
  justify-content:center;
}

.appicon-symbol,
.appicon-symbol2{
  width:90px;
  height:90px;
  overflow:visible;
  
}

.div9,.div10{
  color:#000;
  text-align:center;
  font-family:"SchoolSafetyNotification", sans-serif;
  font-size:36px;
  line-height:48px;
  letter-spacing:-1.6px;
  font-weight:400;
}

/* =========================
   FEATURES (section.area_feature)
   - 기존 .features absolute/top 제거
   - 각 feature는 flex(row)로 배치
========================= */
.area_feature{
  width:100%;
  padding: 40px 0 120px;
}

.features{
  width:100%;
  display:flex;
  flex-direction:column;
  gap: 240px; 
}

/* 데스크톱: 텍스트 좌 + 목업 우 */
.feature{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 131px; 
}

.feature-text{
  width: 520px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.frame-44{
  display:flex;
  flex-direction:column;
  gap: 4px;
  align-items:flex-start;
}

.div4{
  color:#000;
  text-align:left;
  font-family:"Apple SD Gothic Neo", sans-serif;
  font-size:36px;
  line-height:54px;
  letter-spacing:-.8px;
  font-weight:700;
}

.div5{
  color:#000;
  text-align:left;
  font-family:"Apple SD Gothic Neo", sans-serif;
  font-size:24px;
  line-height:36px;
  letter-spacing:-1.6px;
  font-weight:500;
}

.div6{
  color:#757575;
  text-align:left;
  font-family:"PretendardVariable-Regular", sans-serif;
  font-size:18px;
  line-height:27px;
  letter-spacing:-1.6px;
  font-weight:400;
}

/* 목업 영역 */
.mockup-wrap{
  width: 270px;
  height: 571.74px;
  position: relative;
}

/* shadow */
.mockup-wrap .shadow{
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: #d9d9d9;
  box-shadow: 10px 10px 16px 0 rgba(0,0,0,0.1);
  z-index: 0;
}

.mockup-wrap .stroke,
.mockup-wrap .stroke2,
.mockup-wrap .stroke3,
.mockup-wrap .stroke4{
  position: absolute;
  inset: 0;
  border-radius: 30px;
  border: 5px solid #000;
  z-index: 2;
  pointer-events: none;
}

.mockup-slider{
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  z-index: 1;
}

/* slick 구조 높이 고정 */
.mockup-slider .slick-list,
.mockup-slider .slick-track,
.mockup-slider .slick-slide,
.mockup-slider .mockup-slide{
  height: 100%;
}

.mockup-slide__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ===== nav (목업 아래) ===== */
.mockup-nav{
  display:flex;
  gap:23px;
  align-items:center;
  justify-content:center;
  position:absolute;
  left:50%;
  top:calc(100% + 24px);
  transform:translateX(-50%);
  width:max-content;
  z-index: 4;
}

/* 버튼(동그라미) */
.mockup-nav__btn{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #eee;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}

/* slick 기본 absolute 무력화 */
.mockup-nav .slick-prev,
.mockup-nav .slick-next{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

/* slick 기본 화살표 문자 제거 */
.mockup-nav .slick-prev:before,
.mockup-nav .slick-next:before{
  content: none !important;
}

.mockup-nav__ico{
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

/* 페이지네이션 */
.mockup-nav__page{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:6px;
}

.mockup-nav__page span{
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.mockup-nav__page .num_current{ color:#000; }
.mockup-nav__page .txt_divide{ color:#666; }
.mockup-nav__page .num_total{ color:#666; }

/* disabled (문법 오류 수정 완료) */
.mockup-nav__btn[aria-disabled="true"],
.mockup-nav__btn.slick-disabled{
  opacity: 1;
  background: #f5f5f5;
  cursor: default;
  pointer-events: none;
}

.mockup-nav__btn[aria-disabled="true"] .mockup-nav__ico,
.mockup-nav__btn.slick-disabled .mockup-nav__ico{
  opacity: .35;
}

.mockup-nav__btn[aria-disabled="true"]:hover,
.mockup-nav__btn.slick-disabled:hover{
  background: #f5f5f5;
}

/* =========================
   AREA SUBINFO (section.area_subinfo)
   - 기존 frame-25/frame-29 absolute/top 제거
========================= */
.area_subinfo{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

/* 하단 아이콘 */
.frame-25{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:center;
}

/* chips */
.frame-29{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.frame-28,.frame-27,.frame-26,.frame-24{
  background:#eee;
  border-radius:34px;
  padding:4px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.div8{
  color:#000;
  font-family:"PretendardVariable-Regular", sans-serif;
  font-size:13px;
  line-height:27px;
  font-weight:400;
}

/* =========================
   CTA (section.cta)
   - 기존 frame-42 absolute/top 제거
========================= */
.cta{
  width:100%;
  
  display:flex;
  justify-content:center;
}


.frame-42{
  width: 100%;
  background:#f9f9f9;
  padding: 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  gap: 28px; 
}

.frame-422{
  display:flex;
  flex-direction:row;
  gap:80px;
  align-items:flex-start;
  justify-content:flex-start;
}

/* QR cards */
.frame-46,.frame-472{
  border:1.2px solid #000;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.frame-47{
  background:#fff;
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.group{
  width:80px;
  height:80px;
  overflow:visible;
}

.aos-qr{
  width:80px;
  height:80px;
  position:relative;
  overflow:hidden;
}
.group2{
  height:auto;
  position:absolute;
  left:0;
  top:0;
  overflow:visible;
}

.frame-45{
  background:#1f1f1f;
  padding:2px 0;
  display:flex;
  flex-direction:row;
  gap:8px;
  align-items:center;
  justify-content:center;
  width:100%;
}

.icon-sns-apple3{
  width:16px;
  height:16px;
  overflow:visible;
}

.group-5{
  width:14px;
  height:15.23px;
  overflow:visible;
}

.app-store,
.google-play{
  color:#fff;
  font-family:"PretendardVariable-Regular", sans-serif;
  font-size:13px;
  line-height:27px;
  font-weight:400;
}

/* =========================
   FOOTER
   - 기존 site-footer absolute/top 제거
   - border-top 풀폭 유지(원하면)
========================= */
.site-footer{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;                /* 화면 끝까지 선 */
  background: #fff;
  margin-top: 0;
}

.site-footer__inner{
  max-width: 1970px;
  margin: 0 auto;
  padding: 80px 336px;
  display:flex;
  flex-direction:column;
  gap: clamp(16px, 3vw, 40px);
  box-sizing:border-box;
}

.site-footer__top{
  display:flex;
  align-items:flex-end;
  gap:50px;
}

.site-footer__brand{
  color:#000;
  font-family:"PretendardVariable-Bold", sans-serif;
  font-size:26px;
  line-height:39px;
  font-weight:700;
}

.site-footer__links{
  display:flex;
  align-items:center;
  gap:30px;
}

.site-footer__link{
  color:#888;
  text-decoration:none;
  font-family:"PretendardVariable-Regular", sans-serif;
  font-size:14px;
  line-height:27px;
  font-weight:400;
}

.site-footer__link--strong{
  color:#333;
  font-family:"PretendardVariable-Bold", sans-serif;
  font-weight:700;
}

.site-footer__middle{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:60px;
  flex-wrap: wrap;
}

.site-footer__info{
  flex: 1 1 520px;         
  max-width: 520px;         
  min-width: 0;           
  width: 100%;            
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer__info-row{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
}

.site-footer__meta,
.site-footer__address{
  margin:0;
  color:#888;
  font-family:"PretendardVariable-Regular", sans-serif;
  font-size:14px;
  line-height:27px;
  font-weight:400;
}

.site-footer__stores{
  display:flex;
  gap:10px;
  align-items:center;
}

/* 스토어 버튼 */
.store-badge{
  background:#000;
  border-radius:8.24px;
  border:0.88px solid #fff;
  padding:7.36px 10.3px;
  display:flex;
  flex-direction:row;
  gap:7.36px;
  align-items:center;
  text-decoration:none;

  flex: 0 0 auto;     
  flex-shrink: 0;     
  white-space: nowrap;
}
  

.store-badge__icon-img{
  width:26.79px;
  height:auto;
  display:block;
}

.store-badge__text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
  color:#fff;
}

.store-badge__kicker{
  font-family:"Rubik-Medium", sans-serif;
  font-size:10.6757px;
  font-weight:500;
  opacity:.95;
}

.store-badge__store{
  font-family:"Rubik-Medium", sans-serif;
  font-size:21px;
  letter-spacing:-0.07em;
  font-weight:500;
  margin-top:4px;
}

.store-badge--apple .store-badge__store{
  font-size:22.6264px;
}

.site-footer__copyright{
  color:#888;
  font-family:"PretendardVariable-SemiBold", sans-serif;
  font-size:12px;
  line-height:27px;
  font-weight:600;
}



/* =========================
   none scroll
========================= */

/* 7~8: 스냅 제외 */
.fs-nosnap{
  scroll-snap-align: none;   
  scroll-snap-stop: normal;
  height: auto;              
  min-height: auto;
  display: block;           
}


.fs-nosnap .pc{
  width: 100%;
}

#fs-wrapper{
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;

  scroll-snap-type: y proximity; /* mandatory → proximity */
  scroll-behavior: smooth;
}



/* =========================
   Hover
========================= */
.icon:hover{
  background:#333;
}
.icon:hover img{
  filter: brightness(0) invert(1);
}

.mockup-nav__btn:hover{
  background:#dedede;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1430px){
  .mockup-wrap{
    width: 238px;
    height: 503.9782px;
  }

  .mockup-wrap .shadow,
  .mockup-wrap .stroke,
  .mockup-wrap .stroke2,
  .mockup-wrap .stroke3,
  .mockup-wrap .stroke4{
    width: 238px;
    height: 503.9782px;
  }

  .div4{
    font-size: 32px;
    line-height: 48px;
  }

  /* .frame-42{
    width: 952px;
  } */

  .frame-42 .div9,
  .frame-23 .div10{
    font-size: 32px;
    line-height: 48px;
  }

  .frame-422{ gap: 40px; }
}

@media (max-width: 1022px){

 .hero{
    padding: 100px 24px 40px;
  }


  
  .frame-44 .div4{
    font-size: 24px;
    line-height: 1.38; 
  }

  .frame-44 .div5{
    font-size: 22px;
    line-height: 1.38; 
  }
  /* feature 세로 스택 */
  .feature{
    flex-direction: column;
    gap: 32px;
  }

  .feature-text{
    width: min(720px, calc(100% - 80px));
    text-align:center;
    align-items:center;
  }

  .feature-text .div4,
  .feature-text .div5,
  .feature-text .div6{
    text-align:center;
  }

  .frame-44{
    align-items:center;
  }

  /* .frame-42{
    width: 630px;
  } */

  .frame-22 .div2{
    font-size: 32px;
  }

  .frame-42 .div9,
  .frame-23 .div10{
    font-size: 24px;
    line-height: 39px;
  }

  .frame-422{
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .site-footer__inner{
    width: 100%;
    max-width: 720px;                
    margin: 0 auto;                 
    padding: 60px clamp(20px, 6vw, 80px); 
    box-sizing: border-box;
  }

  .site-footer__top{
    flex-direction: column;
    align-items: flex-start;      
    text-align: left;             
    gap: 12px;
  }

  .site-footer__links{
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .site-footer__middle{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .site-footer__info{
    width: min(720px, calc(100% - 80px));
    text-align: left;             
    align-items: flex-start;     
    flex: 0 1 auto;
    max-width: none;
  }

  .site-footer__info-row{
    justify-content: flex-start;
  }

  .site-footer__stores{
    justify-content: flex-start;;
    flex-wrap: wrap;
  }

  .site-footer__copyright{
    text-align: left;
  }

.site-footer__meta,
.site-footer__address{
  overflow-wrap: anywhere;
  word-break: break-word;
}


  body{
    overflow: auto;
  }


  #fs-wrapper{
    height: auto;
    overflow: visible;

    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .fs-section{
    height: auto;
    min-height: auto;
    scroll-snap-align: none;
    scroll-snap-stop: normal;

    display: block;
  }

   .frame-29{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  
    gap: 10px;               
  }

  .frame-28, .frame-27, .frame-26, .frame-24{
    justify-content: center;
  }

  .div8{
    white-space: nowrap;      
  }
  :root{
    --hero-h: 70vh;              /* 모바일에서 높이 줄이기 */
    --hero-content-top: 10px;    /* 텍스트 위치 */
  }

  .div2{ font-size: 32px; }      /* 기존에 이미 있으면 유지/중복만 정리 */
  .hero__img{ width: min(720px, 94vw); }
}