*
*  {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
   
html, body {
   overflow: auto;
   -ms-overflow-style: none;     /* IE/Edge */
   scrollbar-width: none;        /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
   display: none;                /* Chrome, Safari */
}
body {
   font-family: 'Segoe UI', Arial, sans-serif;
   background: #ffffff;
   color: #333;
   line-height: 1.6;
}
a {
   text-decoration: none;
   color: inherit;
   transition: all 0.3s ease;
}
a:hover {
   opacity: 0.8;
}
.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 1rem 0 0.5rem 0;
}
.desc-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
   background: #F4F3F0;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
}
.sectioncs {
   padding: 1.5rem 1.5rem 1rem 1.5rem;

}
.txtcenter {
   width: 100%;
   text-align: center;
}
.top-bar {
   width: 100%;
   background: #fe8f66;
   color: #ffffff;
   padding: 0.39rem 0;
   font-size: 12px;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.top-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.top-left {
   font-weight: bold;
}
.top-right {
   display: flex;
   align-items: center;
   gap: 10px;  /* 하트와 장바구니 사이 간격 */
   font-size: 12px;
   color: white;
}
.icon-link {
   display: flex;
   align-items: center;
   gap: 4px;  /* 텍스트와 아이콘 사이 간격 */
   text-decoration: none;
   color: inherit;
}
.icon-link:hover {
   color: #ffd6c2;
}
.top-right .cart-icon {
   width: 16px;
   height: 16px;
}
.top-bar a:hover {
   color: red;
}
.header-bar {
   background: #ffffff;
   border-bottom: 3px solid #ffccbc;
   position: sticky;
   top: 0;
   z-index: 1000;

}
.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.56rem 1rem;
}

.logo-container {
   width: 270px;
   height: 50px;
   overflow: hidden;
}
.logo-container img {
   width: 100%;
   height: 100%;
   object-fit: fill;
   object-position: center;
}
.menu-nav {
   display: flex;
   gap: 30px;
   font-size: 14px;
   font-weight: bold;
}
.menu-nav a:hover {
   color: red;
}
.header-right {
   display: flex;
   gap: 10px;
   align-items: center;
}
.header-btn {
   background: #fe8f66;
   color: white;
   padding: 7px 14px;
   border-radius: 4px;
   font-weight: bold;
}
.main-banner {
   width: 100%;
   max-width: 1200px;
   height: 100%;
   margin: 0;
   overflow: hidden;
   text-align: center;
   position: relative;
}
.main-banner img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: 0;
   display: block;
}
.feature-wrapper {
   width: 100%;
   background-color: #ffffff;
   box-shadow: 0 8px 12px -4px rgba(0, 0, 0, 0.2);
   padding: 0 1rem;
}
.features {
   max-width: 1200px;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   margin: 0 auto;
   padding: 1rem;
}
.feature {
   display: flex;
   align-items: center;
   gap: 15px;
   min-width: 250px;
   flex: 1;
   max-width: 320px;
   padding: 0px;
}
.feature-icon {
   width: 42px;
   height: 42px;
   background: #fe8f66;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 20px;
   color: white;
}
.feature-text {
   display: flex;
   flex-direction: column;
}
.feature-title {
   font-weight: bold;
   margin-bottom: 3px;
   font-size: 14px;
}
.feature-desc {
   font-size: 13px;
   color: #555;
}
.footer {
   background: #fe8f66;
   color: #fff;
   text-align: center;
   padding: 15px 10px;
   margin-top: 0.3rem;
}
.footer small {
   font-size: 12px;
   color: #ffd6c2;
}
.footer-copy {
   background: #fff8e1;
   color: #333;
   font-size: 14px;
   padding: 10px;
}
.footer-nav {
   display: flex;
   justify-content: center;
   gap: 40px;
   font-size: 14px;
   font-weight: bold;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.footer-nav a:hover {
   color: red;
}
.hamburger {
   display: block;
   font-size: 24px;
   cursor: pointer;
   user-select: none;
   color: white;
}
.mobile-nav {
   display: none;
   flex-direction: column;
   background: #fff;
   font-weight: bold;
   font-size: 14px;
   color: #707070;
   gap: 0;
   padding: 10px 0;
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.mobile-nav-menu {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #eee;
   text-decoration: none;
   width: 100%;
   padding: 12px 20px;
}
.nav-icon {
   margin-left: 10px;
   font-size: 16px;
   color: #707070;
}
.icon-space {
   margin-left: 6px;
}
.nav-toggle {
   display: none !important;
}
.nav-toggle:checked ~ .mobile-header .mobile-nav {
   display: flex;
}
.emoji-nav {
   display: none;
   background: #fe4a22;
   padding: 10px 0;
}
.emoji-nav-inner {
   display: flex;
   width: 100%;
}
.emoji-nav-inner > * {
   flex: 1;
   text-align: center;
   color: white;
   font-size: 20px;
}
.emoji-nav-inner a:hover {
   transform: scale(1.2);
}
.hamburger {
   font-size: 20px;
   cursor: pointer;
}
input[type="radio"] {
   display: none;
}
.gallery-wrapper {
   max-width: 100%;
   margin: 0 auto;
}
.main-image {
   width: 100%;
   height: 26.5em;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   overflow: hidden;
   margin: 0 auto 0.5rem auto;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
   position: relative;
}
.main-image img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   display: none;
   position: absolute;
   top: 0; left: 0;
   right: 0; bottom: 0;
   margin: auto;
   padding: 0.5rem 0;
}
#img1:checked ~ .main-image #main1,
#img2:checked ~ .main-image #main2,
#img3:checked ~ .main-image #main3,
#img4:checked ~ .main-image #main4,
#img5:checked ~ .main-image #main5 {
         display: block;
}
.enlarge {
   font-size: 16px;
   text-align: left;
   color: #A9A9A9;
}
.thumbnails {
   display: flex;
   justify-content: left;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 5px;
}
.thumbnails label {
   cursor: pointer;
   background: #FFF;
   /* border: 2px solid transparent;*/
   border-radius: 6px;
   overflow: hidden;
   transition: border 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
}
.thumbnails label:hover {
   border: 2px solid #fe8f66;
}
.thumbnails img {
   width: 80px;
   height: 80px;
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   border-radius: 4px;
   margin: 10px;
}
.thumbnails img[src=""],
.thumbnails img:not([src]),
.thumbnails img[src$="undefined"],
.thumbnails img[src$="null"] {
   display: none;

}
.additionalinformation {
   font-size: 17px;
   font-weight: 700;
   margin-top: 1.2rem;
}
.accordion {
   width: 100%;
   margin: 10px auto;
   font-family: "Segoe UI", Arial, sans-serif;

}
.accordion-item {
   border-bottom: 8px solid #F4F3F0;
}
.accordion input {
   display: none;
}
.accordion label {
   display: block;
   background: #fe4a22;
   color: white;
   font-weight: bold;
   padding: 5px 20px;
   cursor: pointer;
   position: relative;
   border-radius: 5px;
}
.accordion label::after {
   content: "＋";
   position: absolute;
   right: 20px;
   font-weight: bold;
   transition: transform 0s;
}
.accordion input:checked + label::after {
   content: "－";
}
.accordion .content {
   max-height: 0;
   overflow: hidden;
   background: #F4F3F0;
   padding: 0 20px;
   transition: max-height 0s ease;
}
.accordion input:checked ~ .content {
   max-height: 500px;
   padding: 20px 10px;
}
.accordion p {
   font-size: 12px;
   font-weight: bold;
}

.slider-container {
   width: 100%;
   max-width: 1200px;
   aspect-ratio: 2.185 / 1;
   margin: 1rem auto;
   overflow: hidden;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   position: relative;
}
.slider-track {
   display: flex;
   width: 200%;  /* 이미지 갯수에 따라 수정!! 200% = 2장 300% = 3장 */
   height: 100%;
   animation: slideAnimation 12s infinite;
}
.slide {
   flex: 0 0 100%;
   height: 100%;
}
.slide img {
   max-width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}
@keyframes slideAnimation {
   0%   { transform: translateX(0%); }
   33%  { transform: translateX(0%); }
   36%  { transform: translateX(-100%); }
   66%  { transform: translateX(-100%); }
   69%  { transform: translateX(-200%); }
   99%  { transform: translateX(-200%); }
   100% { transform: translateX(0%); }
}
.produect_title {
   border-left: 3px solid #fe4a22;
   padding-left: 10px;
   font-weight: bold;
   margin-top: 12px;
   margin-bottom: 15px;
}
.produect_description {
   padding-left: 5px;
   margin: 5px 5px;
   font-size: 12px;
   font-weight: bold;
}
.product-recommendation {
   max-width: 1200px;
   margin: 1rem auto;
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 20px;
   background: #fafafa;
}
.product-recommendation h3 {
   margin-top: 0;
   margin-bottom: 20px;
   font-size: 20px;
   color: #333;
}
.recommendation-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 20px;
}
.recommendation-item {
   text-align: center;
}
.recommendation-item img {
   width: 100%;
   aspect-ratio: 1;
   object-fit: cover;
   border-radius: 8px;
   transition: transform 0.3s;
}
.recommendation-item img:hover {
   transform: scale(1.03);
}
.recommendation-item p {
   font-size: 12px;
   color: #0070ba;
   margin-top: 10px;
}

@media (min-width: 768px) {
   .enlarge {
      text-align: center;
   }
   .desc-container {
      padding: 0 20px 5px 20px;
   }
}
@media (max-width: 768px) {
   .desc-container {
      padding: 0;
   }
   .header-btn {
      padding: 0 0.5rem;
   }
   .menu-nav {
      display: none;
   }
   .emoji-nav {
      display: flex;
      align-items: center;
      gap: 30px;
      padding: 0.5rem 0.5rem;
      background: #fe4a22;
   }
   .top-bar,
   .feature-wrapper,
   .main-banner {
         display: none;
   }
   .main-image {
         height: 18rem;
   }
   .top-inner,
   .footer-main {
         flex-direction: column;
         align-items: center;
         gap: 10px;
   }
   .menu-nav,
   .footer-nav {
         flex-wrap: wrap;
         justify-content: center;
         gap: 20px;
         padding-top: 10px;
   }
   .logo-container {
         width: 180px;
         height: 40px;
   }
   .header-bar {
         border-bottom: 0px;
   }
   .header-right {
         margin-top: 0px;
   }
   .footer-main .logo-container {
         argin-bottom: 10px;
   }
   .footer-copy {
         font-size: 13px;
         padding: 8px;
   }
   .sectioncs {
         padding: 0.5rem 0.5rem;
   }
   .container {
         padding: 0.8rem 0.5rem;
   }
   .produect_title {
         border-left: 0px;
   }
   .accordion input:checked ~ .content {
         padding: 0.5rem 0.5rem;
   }
   .thumbnails label {
         min-height: 80px;
   }
}