@font-face {
    font-family: Pretendard;
    src: url("../font/Pretendard-1/web/static/woff/Pretendard-Regular.woff") format("woff"), url("../font/Pretendard-1/web/static/woff2-subset/Pretendard-Regular.subset.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;

  }
@font-face{
    font-family: "Pridi", serif;
    font-weight: 400;
    font-style: normal;
  }
@font-face {
     
        font-family: "Ultra", serif;
        font-weight: 400;
        font-style: normal;
      
      
}

@font-face{
    font-family: "Sawarabi Gothic", serif;
    font-weight: 400;
    font-style: normal;
  }
  
a{text-decoration:none ;color: inherit;}
img{max-width: 100%;vertical-align: top;}
table{width: 100%;border-collapse:collapse ;}
button{cursor: pointer;}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    position: relative;
    box-sizing: border-box;
    font-family: "KoddiUD OnGothic", "Nnto Sans KR", "Noto Sans CJK KR", "Pretendard", "Helvetica Neue", Helvetica, sans-serif;
  }
  
  a, a:link, a:visited {
    text-decoration: none;
    color: inherit;
  }
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
  }
  html {
    
    font-size: 16px;
    font-family: "Pretendard";
    font-weight: 400;
    
  }
  :root {
    --color:#3f3b3b;
    --background:#eef6eb;
  }
  .top-bannr {
    flex-shrink: 0; 
    width: 100%;
    overflow: hidden;
    background: #3e3e3e;
    color: #eef6eb;
    white-space: nowrap;
    font-size: 1rem;
    padding: 0.3rem 0;
    
  }
  
  .banner-box {
    display: flex;
    width: max-content; 
    animation: marquee 10s linear infinite;
  }
  
  .banner-box p {
    display: inline-block;
    padding-right: 30px; 
  }
  .banner-box p span {
    font-family: "Pridi", serif;
  }

  .poster {
    flex-grow: 1; 
    min-height: 0; 
    display: flex;
    justify-content: center;
    
    
  }
  .background{
    background: var(--background);
    
  }
.title{
    font-family: "Ultra", serif;
    font-size: 9rem;
    color: var(--color);
    z-index: 999;
    
}
.heartshaker{
  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
.blackheart{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 99;
    
}
.stick {
    animation: rotate 10s linear infinite; 
}
.footprints {
    position: fixed;
    color: var(--background);
    font-family: "Sawarabi Gothic", serif;
}
.footprints > div {
    position: fixed;
    font-family: "Sawarabi Gothic", serif;
    font-size: 10rem;
    text-shadow: -9px 2px 6px rgba(229, 229, 229, 0.5), -7px -5px 8px rgba(214, 214, 214, 0.8);
}
.footprints > div:nth-child(1) {
    font-size: 10rem;
    top: 30vh;
    left: 18vw;
}
.footprints > div:nth-child(2) {
    font-size: 16rem;
    top: 30vh;
    left: 78vw;
}
.footprints > div:nth-child(3) {
    top: 55vh;
    left: 8vw;
}
.footprints > div:nth-child(4) {
    top: 65vh;
    left: 55vw;
}

/* 하트 클릭 애니메이션 */
.heart {
    position: fixed;
    font-family: "Sawarabi Gothic", serif;
    color: var(--background);
    text-shadow: -9px 2px 6px rgba(229, 229, 229, 0.5), -7px -5px 8px rgba(214, 214, 214, 0.8);
    font-size: 8rem;
    opacity: 1;
    transform: translateY(0);
    transition: transform 1s ease-out, opacity 1s ease-out;
    
}

/* 하트가 위로 사라지는 효과 */
.heart.fade {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
}

.menu{
    color: var(--color);
    position: fixed;
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg,#D2D5D3 0%,#FFFFFF 52%, #E7E7E7 100%);
    flex-shrink: 0; /* 크기 줄어들지 않게 고정 */
    z-index: 9999;
}
.menu ul{
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 3rem;
}
.menu ul li {
  position: relative;
  z-index: 10000;
}
.menu ul a{
  
    font-family: "Ultra", serif;
    font-size: 1.8rem;
    pointer-events: auto;
    
}

@keyframes rotate {
    from {
        transform: rotate(0deg); /* 시작 위치 */
    }
    to {
        transform: rotate(360deg); /* 360도 회전 */
    }
}

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-30%);
    }
  }
  
  /* 반응형 (화면 크기별 폰트 크기 조정) */
  @media (max-width: 1920px) {
    html{
      font-size:19px;
    }
  
  }
  @media (max-width: 1150px){
.title{
  font-size: 7rem;
}
  }
  @media (max-width: 950px) {
    html{
      font-size: 14px;
    }
    .top-bannr {
      font-size: 0.9rem;
    }
    .title{
      margin-top: 1rem;
       font-size:5rem ;
    }
    .heartshaker {
        
        position: absolute;
        top: 12%;
        left: 50%;  /* 수평 가운데 정렬 */
        transform: translateX(-50%) scale(0.8); /* translateX(-50%)로 가로 중앙 정렬 */
    }
    .stick > svg:nth-child(1){display: none;}
    .s{display: block;}
    
    .footprints > div {
       font-size: 8rem;
        text-shadow: -9px 2px 6px rgba(229, 229, 229, 0.5), -7px -5px 8px rgba(214, 214, 214, 0.8);
    }
    .footprints > div:nth-child(1) {
        font-size: 7rem;
        top: 20vh;
        left: 18vw;
    }
    .footprints > div:nth-child(2) {
        font-size: 10rem;
        top: 20vh;
        left: 70vw;
        
    }
    .footprints > div:nth-child(3) {
        top: 35vh;
        left: 8vw;
        
    }
    .footprints > div:nth-child(4) {
        top: 40vh;
        left:80vw ;
       
    }
    .menu{
      display: block;
      width: 100vw;        
      background:none;
      height: calc( 100vh - 60vh);
      position: fixed;
      padding-bottom: 10%;
    }
    .menu ul{
        flex-direction: column;
        width: 100vw;  
     
    }
    .menu li{
        padding-bottom: 10%;
        margin: auto;
    }
    .menu ul a{
      display: block;
        width: calc( 100vw - 40vw );
        background: linear-gradient(180deg,#D2D5D3 0%,#FFFFFF 52%, #E7E7E7 100%);
        padding: 3% 0;
        border-radius: 20px;
        text-align: center;
        margin: auto;
        font-size: 1.8rem;
    }
  }
  
  @media (max-width: 768px) {
    html{
      font-size: 12px;
    }
    .top-bannr {
      font-size: 0.8rem;
    }
    .title{
      margin-top: 2rem;
        font-size:7rem ;
     }
     .heartshaker {
        position: absolute;
        top: 5%;
        left: 50%;  /* 수평 가운데 정렬 */
        transform: translateX(-50%) scale(0.6);
     }
     .menu{
      display: block;
      width: 100vw;        
      background: none;
      top:  calc(100vh - 35vh);
      position: fixed;
        
    }
   
    .menu li{
        padding-bottom: 8%;
        margin: auto;
    }
    .menu ul a{
        width: calc( 100vw - 30vw );
        background: linear-gradient(180deg,#D2D5D3 0%,#FFFFFF 52%, #E7E7E7 100%);
        padding: 10px 50px;
        border-radius: 20px;
        font-size: 1.2rem;
    }
    .footprints > div {
      font-size: 6rem;
       text-shadow: -9px 2px 6px rgba(229, 229, 229, 0.5), -7px -5px 8px rgba(214, 214, 214, 0.8);
   }
    .footprints > div:nth-child(1) {
      font-size: 7rem;
      top: 20vh;
      left: 9vw;
      
  }
  .footprints > div:nth-child(2) {
      font-size: 8rem;
      top: 12vh;
      left: 63vw;
     
      
  }
  .footprints > div:nth-child(3) {
      top: 45vh;
      left: 27vw;
      
  }
  .footprints > div:nth-child(4) {
      top: 35vh;
      left:70vw ;
      
  }
  @media (max-width: 560px){
    html{font-size: 10px;}
    .title{
      margin-top: 2rem;
        font-size:6rem ;
     }
     .menu{
     
      top:  calc(100vh - 40vh);
   
        
    }
  }
  @media (max-width: 375px){
    html{font-size: 8px;}
    .title{
      margin-top: 2rem;
     }
  }
  }