html {
  scroll-behavior: smooth;
}

*{
    margin:0;
    padding:0;  
    box-sizing: border-box;
    font-family:Pretendard, sans-serif;
    text-decoration: none;
    line-height: normal;
}

main{overflow: hidden; background:white;}

.sky{color:#D4EEFF;}
.navy{color:#03355B;}
.royal{color: #007BDC;}
.accentbg{background:#88C8F3;}
.marg-bot{margin-bottom: 20px;}
.marg-left{ margin-left: 70px;}
.screen{height: auto; padding: 0 10%;}

body p{font-size: 18px; line-height: 28px; font-weight: 300;}
body h2{font-size:24px; overflow-wrap: break-word;}
body h1{
  font-size: 40px;
  font-family:paperlogy, sans-serif;
  font-weight: 600;
  line-height:normal;
  overflow-wrap: break-word;
}
body h3{font-size:20px;}



.header-wrap{
  width: 100%;
  height: 50px;
  margin:0 auto;
  display: flex;
  align-items:end;
  justify-content: space-around;
  max-width: 1620px;
  padding:0 30px;
}

/*Header*/
.header { 
  font-family: "Pretendard", sans-serif; 
  width: 100%; 
  height: 80px; 
  z-index: 99; 
  position: fixed; 
  left: 0; top: 0; 
  background-color: rgba(23, 23, 23, 0.5); /*glassmorphism effect*/
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  fill-opacity: 10%;
  color: white;
  display: flex; align-items: center;
  justify-content: space-evenly;
}

.logo{
  justify-self: flex-start;
}

.shortcuts{
  display: flex;
  gap: 40px;
  font-size:18px;
}

.shortcuts a{
  color: white;
}

.reg-btn{
  width:80px;
  height:30px;
  background:#007BDC;
  border-radius: 10px;
  justify-self: flex-end;
  color:white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:18px;
}
.reg-btn a{
  color: white;
  display:flex;
  justify-content: center;
  align-items: center;
}

@media (max-width:768px) {
  
  body{padding-bottom: 80px;}
  .body p{font-size: 16px;}
  .body p{font-size: 20px;}
  .header{justify-content: space-between; padding: 0 15px; height:60px;}
  .shortcuts{display: none;}
  .reg-btn{
    width:80px;
    font-size: 18px;
    height: 30px;
  }
}


/*메인*/
/*Main-headings*/

/*.main-info{
  width:85%;
}*/
.cursor{
  align-items: flex-end;
  margin-top: auto;
  margin-bottom: 100px;
  z-index: 2;
}
.cursor img{
  cursor: pointer;
  transition: 0.3s ease;
}

.cursor img:hover{
  transform:scale(1.2)
}
/*Main-heading container with icon*/
.main-title{
  display: flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 20px;
}
.sub-title{
  display: flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 20px;
}


.sect{
padding-top:100px;
padding-bottom: 50px;
text-align: left;
}

.mini-text{
  margin-bottom: 20px;
  margin-left: 70px;
}
.com-sched{
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-family:pretendard, sans-serif;
}
.stroke{
  width: 110px;
  height:2px;
  background:#88C8F3;
}
.strokeb{
  margin-top: 10px;
  width: 190px;
  height:2px;
  background:#88C8F3;
}
.strokec{
  margin-top: 10px;
  width: 200px;
  height:3px;
  background:#88C8F3;
}
.stroked{
  width: 110px;
  height:2px;
  background:#03355B;
}
.circle{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:#88C8F3;
}
.circle2{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:#03355B;
}



/*QR CODE: 신청 접숙 위한 QR코드 섹션*/
.reg-zone{
  padding-top:20px;

}

.reg-box{
  background:#03355B;
  height: fit-content;
  border-radius: 10px;
  /*border: solid 1px #D4EEFF;*/
  /*margin-top: 80px;
  margin-bottom: 100px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
   /* x-offset | y-offset | blur | color */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);
  padding: 50px;
  gap: 30%;
}



.reg-text{
 font-size: 24px;
}
.reg-box h1{
  align-items: flex-start;
 margin-bottom: 20px;
  font-family:paperlogy, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  color: white;
}

.scan-arrow{
  margin-bottom: 40px;
  display: block;
  transition:0.3s ease;
}
.qr{
  display: flex;
  flex-wrap:wrap;
  gap: 40px;
}

.qr .code{
  list-style: none;
  font-size: 24px;
  color: white;
}
.qr img{
  margin-top: 20px;
  border-radius: 10px;
  width: 210px;
  height: 195px;
  background: white;
}
.qr ul li p{
  font-size: 24px;
}

@media(max-width: 1065px){
.scan-arrow{
    transform: rotate(90deg);
  }
}
@media (max-width:1456px){
  .reg-box{gap: 5%;}
}

@media (max-width:1116px){
  .reg-box{
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .scan-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width:700px){
  .qr{
    display: block;
  }
  .qr ul{
    margin-bottom: 30px;
  }
}

/*footer*/
footer{
  background: url("/fnc_images/fml_main/foot-bg.jpg");
 background-color: white;
 color: black;
 text-align: left;
 padding-bottom: 20px;
 border-top: solid 2px #007BDC;
 width: 100%;
}

.foot-cont{
 margin-top: 50px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 justify-content: center;
 align-items: center;
}  
.foot-cont .socials{
  margin-top: 5px;
  font-family: typeecon;
}
.foot-logo{
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
.foot-logo a{
  font-size: 22px;
  color: #88C8F3;
}
/*.two-logos{
  display: flex;
  gap: 15px;
}*/


/*푸터 후원 로고들*/
:root {
  --logo-width: 200px;         /* Width of one logo */
  --visible-logos: 2;          /* Number of visible logos */
  --total-original-logos: 7;   /* Your actual number of sponsors */
}

/* 1. The Outer Window */
.sponsor-slider {
  width: calc(var(--logo-width) * var(--visible-logos)); /* 200px * 2 = 400px */
  height: 70px;                        /* Adjust based on your logo aspect ratio */
  margin: 0 auto;                       /* Centers the slider on your page */
  overflow: hidden;                     /* Hides the logos waiting in line */
  position: relative;
  background: transparent;  
  display: flex;
  align-items: center;            /* Change if you want a background color */
}

/* 2. The Moving Track */
.slide-track {
  display: flex;
  /* Total width = 7 total slides (5 original + 2 copies) * 200px = 1400px */
  width: calc(var(--logo-width) * (var(--total-original-logos) + var(--visible-logos)));
  
  /* Link the animation below: 15 seconds long, linear movement, infinite loop */
  animation: scroll 30s linear infinite;
}

/* 3. The Individual Logo Slots */
.slide {
  width: var(--logo-width);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;                      /* Adds spacing between your logos */
  box-sizing: border-box;
}

.slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;                  /* Keeps logos from stretching distorting */
}

/* 4. The Animation Logic */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move left by exactly the width of the 5 original logos */
    /* 5 original logos * 200px = -1000px */
    transform: translateX(calc(-1 * var(--logo-width) * var(--total-original-logos)));
  }
}




/*모바일 메뉴*/
/* 1. Hide the menu by default on Desktop */
.mobile-floating-menu {
  display: none;
}

/* 2. Mobile Styles (Triggers under 768px wide) */
@media screen and (max-width: 768px) {
  .mobile-floating-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    /* Stick to the very bottom */
    position: fixed;
    bottom: 5px;
    left: 5%;
    right: 5%;
    width: 90%;
    height: 70px;
    
    /* Styling & Effects */
    border-radius: 10px;;
    border:solid white 1px;
    background-color: rgba(3, 53, 91, 0.7);
    backdrop-filter: blur(10px); /* Modern blurred glass effect */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    z-index: 9999; /* Stay on top of all other content */
    
    /* Account for modern mobile phone bottom safe areas (like iPhone notches) */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    color:#C3CED5;
    font-family: pretendard, sans-serif;
    font-size:12px;
    transition: color 0.2s ease;
    text-align: center;
  }

  .menu-item .icon {font-size: 25px; margin-bottom: 5px; line-height: 8px;
  }

  /* Active/Clicked state highlight */
  .menu-item.active {color:white; font-weight: 400; font-size: 15px;}
  .label{margin-top: 2px;}


  footer{height:300px;}
  .mini-text{margin-left: 0;}
  
}

@media (max-width:576px) {
  body h1{font-size: 32px;}
  body h2{font-size: 20px;}
  body h3{font-size: 18px;}
  body p{font-size: 16px;}
  /*.main-info{ width: 100%;}*/

  .cursor{margin-bottom:180px;}
  
  .com-sched{gap:5px;}
  .stroke{width:80px;}
  .strokeb{width:130px;}
  .stroked{width:50px;}

  .reg-box h1 {font-size:32px; line-height: normal}

  footer{gap:0; display:flex; align-items: center; justify-content: center;}
  footer .spec img{width: 80px;}
  :root {
  --logo-width: 178px;  --visible-logos: 1; }
}