/* 전체 배경 */
 .s-sec {
   width: 100%;
   padding: 80px 0 100px;
   background: url('/1x/s1/s_b.png') no-repeat center/cover;
   margin-top: -13%;
 }

 /* 흰색 박스 */
 .s-box {
   width: min(1400px, 92%);
   margin: 0 auto;
   padding: 50px 60px 70px;
   /* 내용 패딩은 그대로 */
   position: relative;
   z-index: 0;
   /* pseudo-element용 기준 */
   /* background / border-radius / box-shadow 는 제거! */
   margin-top: 15%;
 }

 /* 영양 성분 박스 컨테이너 */
 .s-nutri {
   background: #fff5dd;
   /* 시안처럼 연한 크림색 배경 */
   border-radius: 28px;
   padding: 18px 32px 20px;
   margin-top: 35px;
   max-width: 100%;
   box-sizing: border-box;
 }

 /* 안에 들어가는 이미지 (s_16.png) */
 .s-nutri-img {
   display: block;
   width: 100%;
   /* 컨테이너 폭에 맞춰 자동 반응형 */
   height: auto;
 }

 /* ===========================
        반응형
=========================== */
 @media (max-width: 1024px) {
   .s-nutri {
     padding: 16px 20px 18px;
     /* 패딩 조금 줄여서 타이트하게 */
     margin-top: 30px;
   }
 }

 @media (max-width: 600px) {
   .s-nutri {
     padding: 12px 14px 14px;
     /* 모바일에서 여백 더 줄임 */
     border-radius: 22px;
   }

   .s-nutri-img {
     width: 100%;
     height: auto;
     /* 세로 비율 유지 */
   }
 }

 .icon-box b {
   font-weight: 900;
 }

 .s-box::before {
   content: "";
   position: absolute;
   inset: 90px 0 0 0;
   /* ← 여기 값이 “위에서 얼마나 내려올지” */
   background: #fff;
   border-radius: 40px;
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
   z-index: -1;
 }

 /* BACK TO LIST */
 .back-btn {
   position: absolute;
   top: 30px;
   right: 30px;
   background: #4cbbff;
   color: #fff;
   padding: 10px 22px;
   border-radius: 22px;
   border: none;
   cursor: pointer;
   font-weight: 600;
   font-size: 14px;
 }

 /* 안쪽 레이아웃 */
 .s-wrap {
   display: flex;
   gap: 60px;
   align-items: center;
 }

 .s-left {
   flex: 45%;
 }

 .s-main-img {
   width: 100%;
   border-radius: 30px;
   display: block;
 }

 .s-right {
   flex: 55%;
   margin-top: 8%;
 }

 /* 해시태그 */
 .s-tags span {
   background: #f4f4f4;
   padding: 6px 14px;
   border-radius: 20px;
   margin-right: 6px;
   font-size: 14px;
   font-weight: 600;
 }

 .s-title {
   margin: 20px 0 10px;
   font-size: 32px;
   font-weight: 900;
 }

 .s-desc {
   line-height: 1.5;
   color: #444;
   margin-bottom: 30px;
 }

 /* 3 아이콘 */
 .s-icons {
   display: flex;
   gap: 40px;
 }

 .icon-box {
   text-align: center;
 }

 .icon-box img {
   width: 65px;
   margin-bottom: 8px;
 }

 .icon-box .cap {
   font-size: 13px;
   line-height: 1.3;
 }

 /* ===========================
    🔥 영양성분 박스
=========================== */
 .s-nutri {
   background: #fff5dd;
   border-radius: 28px;
   padding: 18px 32px 20px;
   margin-top: 35px;
 }

 .s-nutri-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 12px;
 }

 .s-nutri-head span {
   font-size: 14px;
   font-weight: 700;
   text-align: center;
 }

 .s-nutri-body span {
   font-size: 13px;
   font-weight: 500;
   text-align: center;
 }

 .s-nutri span {
   flex: 1;
   min-width: 70px;
 }

 .s-nutri-divider {
   border-bottom: 2px solid #555;
   margin: 10px 0 8px;
 }

 /* Go To Store */
 .go-wrap {
   text-align: center;
   margin-top: 30px;
 }

 .go-store {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #fff;
   padding: 14px 26px;
   border-radius: 40px;
   font-weight: 700;
   text-decoration: none;
   color: #333;
   transition: .2s;
 }

 .go-store:hover {
   background: #333;
   color: #fff;
 }

 .go-ico {
   width: 22px;
 }

 /* ===========================
        반응형
=========================== */
 @media (max-width: 1024px) {
   .s-wrap {
     flex-direction: column;
     text-align: center;
     gap: 18px;
   }

   .s-icons {
     justify-content: center;
   }

   .s-box {
     padding: 40px 30px 55px;
   }

   .back-btn {
     right: 20px;
     top: 20px;
   }
 }

 @media (max-width: 600px) {
   .s-title {
     font-size: 26px;
   }

   .icon-box img {
     width: 54px;
   }

   .s-nutri span {
     font-size: 10px;
   }
 }

 /* ===========================
      모바일 전용 반응형
=========================== */
 @media (max-width: 600px) {

   /* 영양성분 박스 줄바꿈 적용 */
   .s-nutri-row {
     flex-wrap: wrap;
   }

   /* 각 칸 더 좁게 */
   .s-nutri span {
     flex: 0 0 calc(33.33% - 6px);
     /* 3칸씩 자동 배치 */
     min-width: unset;
     font-size: 11px;
     margin-bottom: 8px;
   }

   /* 아래 숫자 줄도 동일 적용 */
   .s-nutri-body span {
     flex: 0 0 calc(33.33% - 6px);
     font-size: 11px;
   }

   /* 전체 박스 패딩 줄임 */
   .s-nutri {
     padding: 16px 16px 18px;
   }

   /* 텍스트 줄 정리 */
   .s-nutri-head span,
   .s-nutri-body span {
     line-height: 1.2;
   }
 }