@charset "utf-8";
@font-face {
  font-family: 'Ria';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
/* reset */
* {margin:0px; padding:0px;}
ul,ol,li {list-style:none;}
a {text-decoration:none;}
body {background:#efefef; }

header {
  width:350px; 
  height:100%;
  background:linear-gradient(-45deg, #FFD54F, #FF8C00);
  position:fixed;
  top:0px; 
  left:0px;
  transition: 0.5s;
  border-radius: 0 100px 100px 0;
}
header h1 {
  font:800 47px/1 'Ria'; 
  color:#fff;
  letter-spacing:1.5px;
  position:absolute; 
  left:50px;
  top:50%;
  transform:translateY(-100%);
 
  
}
/* header h1::after {
  content:'';
  display:block;
  width:150px;
  height:2px;
  background:#fff;
  margin-top:20px;
} */
/* header h1::before {
  content:'더 편한 발걸음';
  display:block;
  font:30px/1 'orbitron';
  color:#fff;
  letter-spacing:2px;
  position:absolute;
  left:0px;
  top:140px;
  opacity:0.8;
} */
header ul {
  position:absolute; 
  left:40px;
  bottom:100px;
}
header ul li {
  float:left; 
  margin-right:10px;
}

header ul li a {
  font-size:20px;
  color:#fff;
}
header ul li a span {
  display:inline-block;
  font-weight:bold;
  opacity:0.7;
  transform:scale(0.7) translateX(-10px);
}

main {
  margin-left: 370px;
  box-sizing:border-box;    
  padding:20px; 
}


main ul {
  width: 100%;
  margin-bottom: 10px;
  margin-right: 20px;
  display: flex;
  justify-content: center; /* 가로 가운데 정렬 */ 
  
}

main ul li {
  margin: 0 10px; /* 양옆 간격 */
  width: 300px;
  height: 40px;

}

main ul::after {
  content:'';
  display:block;
  clear:both;
}

main ul li a{
  display: flex;                /* Flex 컨테이너로 변경 */
  justify-content: center;      /* 가로 중앙 정렬 */
  align-items: center;          /* 세로 중앙 정렬 */
  width: 100%;
  height: 100%;
  font: 600 15px 'Paperozi';
  color: #aaa;
  letter-spacing: 1px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.05);
  background: #fff;
}
main ul li.on a {  
  background:linear-gradient(-45deg, #FFD54F, #FF8C00);
  box-shadow:0px 5px 20px rgba(255, 140, 0, 0.7);
  color:#fff;
}
main section {
  width:100%;
}
main section::after {
  content:'';
  display:block;
  clear:both;
}
main section article {
  width:20%;  
  float:left;
  box-sizing:border-box;
  padding:12px;
}
main section article div {
  width:100%; 
  height:100%;
  background:#fff;
  border-radius:25px;
  box-shadow:5px 5px 10px rgba(0,0,0,0.1);
  box-sizing:border-box; 
  padding:14px;
}
main section article div img {
  width:100%;
  border-radius:25px;
}
main section article div h2 {
  margin-top:15px;
  font:500 14px/1.15 'Paperozi';
  letter-spacing:1px;
  color:#777777;
  margin-bottom:5px;
  
}
main section article div p {
  font:400 12px/1.2 'Paperozi';
  color:#b6b6b6;
  margin-top:15px;
  margin-bottom:10px;

} 
@media screen and (max-width:1599px){
  header {
    width:350px;
    
  }
  main {
    margin-left: 350px;
  }
  main section article {
    width:25%;
  }
}
@media screen and (max-width:1199px){
  header {
    width:100%; 
    height:80px;
    position:absolute;
    border-radius: 0 0 40px 40px;
  }
  header h1 {
   
    transform:translateY(-50%);

    font:800 24px/1 'Ria'; 


  }
  header h1::before, header h1::after {
    display:none;
  }
  header ul {    
    left:83%;    
    bottom:25px;
  }  
  header ul li {
    margin-right:20px;
  }
  header ul li a {
    font-size:20px;    
  }
  header ul li a span {
    display:none;
  }
  main {
    width:100%;
    margin-left: 0px;
    margin-top:60px;
  }
  main section article {
    width:25%;
  }
}
@media screen and (max-width:899px){
  header ul {
    left:80%;
  }
  main section article {
    width:33.333%;
  }
}

@media screen and (max-width: 767px) {
  header h1 {
    left: 50%;
    transform: translate(-50%, -50%);
  }


  main ul {
    flex-wrap: wrap;     
  }

  main ul li{
    width:27%;   
  }

  
  main ul li{
   margin:1%; 
  }
  
  .detail-page-header h1{
    left:auto;
    
   }
  
  
}

@media screen and (max-width:679px){
  header ul {
    left:70%;
  }
  main section article {
    width:50%;
  }
}
@media screen and (max-width:539px){
  header ul {
    display:none;
  }
  main ul {    
    margin-right:0px;
    box-sizing:border-box;
    padding:0px 13px;
  }
  main ul li {    
    margin-right:2%;
    width:30%;    
  }
  /* main ul li:nth-of-type(1) {
    margin-right:0%;
  } */
  main section article {
    width:100%;
  }

}

@media screen and (max-width:395px){
  main ul li {    
    width:47%;    
  }
  

}

@media screen and (max-width: 286px) {
  main {
    /* * clamp(최소값, 유동적인 값, 최대값)
     * 1. 최소값 (Min): 10px (아무리 작아져도 10px 이하로는 내려가지 않음)
     * 2. 유동적인 값 (Preferred): 7vw (화면 너비의 7%에 비례하여 크기 변화)
     * 3. 최대값 (Max): 20px (아무리 커져도 20px을 넘지 않음)
     */
    padding: clamp(4px, 3vw, 20px);
  }

  main ul{
    margin-top:10px;  
  }

  main ul li a{
    font-size:14px;
  }

}




.detail-page{
  
    /* 흰색은 CSS에서 'white' 또는 헥사 코드 '#ffffff'로 표현합니다. */
    background-color: white; 
    /* 또는 */
    /* background-color: #ffffff; */


}

.detail-page-header{
  top: 0;
  left: 0; 
  right: 0;
  width:100%;
  height:80px;
  margin: 0 auto;
  /* 🌟 핵심: Flexbox를 사용하여 내부 요소를 정렬합니다. */
  display: flex;
    
  /* 내부 요소들을 가로 축(main axis)을 기준으로 중앙에 배치 */
  justify-content: center; 
  
  /* 내부 요소들을 세로 축(cross axis)을 기준으로 중앙에 배치 */
  align-items: center;

  border-radius:0 0 40px 40px ;
  position:absolute;

}

.detail-page-header h1 {
  font-family: 'Ria';
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  top: auto;
  transform: none;
}



#detail-page-content {
  /* 1. 콘텐츠의 최대 너비를 설정합니다. (선택 사항)
     가로 중앙 정렬을 하려면 블록 요소에 너비가 지정되어 있어야 합니다.
     이 값은 이미지의 실제 너비보다 크지 않게 적절히 조절하세요. */
  max-width: 820px; 
  margin: 80px auto 0 auto;
  
}

/* 이미지 자체가 부모 요소의 너비를 가득 채우도록 설정합니다. 
 이렇게 하면 큰 화면에서도 이미지가 잘리지 않고 축소됩니다. */
#detail-page-content img {
  display: block; /* 가끔 인라인 요소의 기본 마진 문제를 해결합니다. */
  width: 100%;
  height: auto;
  
  
}


@media screen and (max-width: 767px) {
  .detail-page-header{
    width:100%;
  }
}




#buy-now-button {
  
  padding: 15px clamp(20px, 17vw, 64px);
  margin: 30px 25px 60px 25px;
  display: inline-block;
  font-family: 'Paperozi';
  font-size: 20px;
  outline: none;
  color: #fff;
  border-radius: 25px;
  background: linear-gradient(-45deg, #FFD54F, #FF8C00);
  border:none;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow:0px 5px 20px rgba(255, 140, 0, 0.7);
}


.buy-now{
 display:flex;
 justify-content:center;

}


#buy-now-button:hover {
  cursor: pointer;  
}




/* h1 내부의 링크 스타일을 초기화 */
h1 a {
  color: inherit;       /* 부모 요소(h1)의 색상을 상속받아 파란색을 없앱니다. */
  text-decoration: none; /* 밑줄을 제거합니다. */
}