@charset "utf-8";
/* product — 제품 목록 카드 · 상세 페이지.

   쇼핑몰용이던 장바구니·위시리스트 자리를 걷어내고 정보 위주로 다시 잡는다.
   읽는 순서: theme.css -> base-*.css -> skin-*.css -> product.css (맨 마지막) */

/* ---------- 목록 카드 ---------- */
.product__item{ position:relative; background:var(--white); }
.product__item .thumbnail{ position:relative; overflow:hidden; background:var(--gray1); }
.product__item .product__image{ position:relative; display:block; aspect-ratio:1/1; }
.product__item .product__image a{ display:block; width:100%; height:100%; }
.product__item .product__image img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.product__item .product__image--hover{ opacity:0; transition:opacity .45s ease; }
.product__item:hover .product__image--hover{ opacity:1; }
.product__item .product__image--item{ transition:transform .8s ease; }
.product__item:hover .product__image--item{ transform:scale(1.03); }

/* 이미지 아래로 깔린다. 여기서 흐름 배치로 되돌리고 쌓임 순서를 올린다. */
.product__item .product__image{ z-index:1; }
.product__item .thumbnail .icon{
  position:absolute; top:1.4rem; left:1.4rem; z-index:30;
  display:flex; gap:.5rem; width:auto; height:auto;
}
.product__item .thumbnail .icon .pbadge{ position:static; }
.pbadge{
  display:inline-block; padding:.5rem 1.1rem; border-radius:.2rem;
  font-size:1.1rem; font-weight:800; letter-spacing:.08em; line-height:1;
  color:var(--white); background:var(--subColor);
}
.pbadge.new{ background:var(--mainColor); color:#00343F; }
.pbadge.best{ background:var(--btnBlack); }

/* 설명 */
.product__item .description{ padding:2rem 1.8rem 2.6rem; }
.product__item .description .name{
  font-size:1.6rem; font-weight:700; color:var(--fontProName); line-height:1.45;
  margin-bottom:.6rem;
}
.product__item .description .desc{
  font-size:1.3rem; color:var(--fontProDesc); line-height:1.6; margin-bottom:1.4rem;
}
.product__item .description .product-price{ display:flex; align-items:baseline; gap:.8rem; }
/* 가격은 카드가 나란히 놓이므로 숫자 폭을 고정해 자릿수가 흔들리지 않게 한다. */
.product__item .description .price{ font-size:1.6rem; font-weight:700; color:var(--fontPrice); font-variant-numeric:tabular-nums; }
.product__item .description .vol{ font-size:1.2rem; color:var(--muted); }

/* ---------- 목록 그리드 ----------
   :not(.swiper-wrapper) 가 꼭 필요하다.
   메인 Best Item 의 목록도 class 에 product 가 들어간 <ul class="swiper-wrapper product"> 라,
   그냥 ul.product 에 grid 를 걸면 Swiper 의 flex + transform 배치를 덮어써
   슬라이드가 아예 움직이지 않는다. */
.product-list .product:not(.swiper-wrapper),
.product .dl-grid.grid--4col:not(.swiper-wrapper){ display:grid; grid-template-columns:repeat(4,1fr); }
ul.product:not(.swiper-wrapper){ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
ul.product > li{ border:1px solid var(--gray3); }
ul.product:not(.swiper-wrapper) > li{ margin:-1px 0 0 -1px; }

/* 그리드 칸(1fr)은 기본이 min-width:auto 라, 칸 안의 제일 긴 글자가 칸을 밀어낸다.
   제품 이름·설명이 길면 4칸 합이 목록 폭을 넘겨 가로 스크롤이 생긴다. */
ul.product > li{ min-width:0; }

/* 왼쪽에 붙어 어긋나 보인다. 오른쪽으로 보낸다. */
.prd-type--1 .product__item .product-price{ justify-content:flex-end; }

/* ---------- 제품 상세 ---------- */
/* 아래 여백은 #contents 한 곳에서 준다(theme.js 가 skin-*.css 뒤에 붙이는 규칙). */
.product_detail{ max-width:var(--page-max); margin:0 auto; padding:var(--sp-page-top) var(--page-pad) 0; }
.product_detail .detail_top{
  display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start;
}
.product_detail .detail_img{ background:var(--gray1); aspect-ratio:1/1; overflow:hidden; }
.product_detail .detail_img img{ width:100%; height:100%; object-fit:cover; display:block; }

.product_detail .detail_info{ padding-top:2rem; }
.product_detail .detail_info .cate{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.18em; color:var(--subColor);
  margin-bottom:1.4rem;
}
.product_detail .detail_info .name{
  font-size:var(--fs-sec); font-weight:700; letter-spacing:-0.08rem; color:var(--fontColor);
  line-height:1.3; margin-bottom:.8rem;
}
.product_detail .detail_info .en_name{
  font-size:var(--fs-sm); letter-spacing:.1em; color:var(--muted); margin-bottom:2.4rem;
}
.product_detail .detail_info .desc{
  font-size:var(--fs-body); line-height:1.85; color:var(--fontProDesc); margin-bottom:3rem;
}
.product_detail .price_row{
  display:flex; align-items:baseline; gap:1.2rem;
  padding:2.4rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.product_detail .price_row .price{ font-size:2.6rem; font-weight:700; color:var(--fontColor); }
.product_detail .price_row .vol{ font-size:1.4rem; color:var(--muted); }

.product_detail .keys{ display:flex; flex-wrap:wrap; gap:.8rem; margin:2.6rem 0 3.4rem; }
.product_detail .keys li{
  border:1px solid var(--mainColor); border-radius:3rem;
  padding:.7rem 1.6rem; font-size:1.3rem; color:var(--subColor);
}

.product_detail .detail_btn{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.product_detail .detail_btn a{
  display:flex; align-items:center; justify-content:center; height:5.6rem;
  font-size:1.5rem; font-weight:700; border-radius:.3rem;
}
.product_detail .detail_btn .btn_inquiry{ background:var(--subColor); color:var(--white); }
.product_detail .detail_btn .btn_store{
  background:var(--white); color:var(--subColor); border:1px solid var(--subColor);
}
/* 클래스 이름이 .notice 였는데, 공지 페이지의 .notice 규칙과 부딪혀
   제품 상세에서 위 여백 22rem 을 그대로 물려받았다. 이름을 분리한다. */
.product_detail .detail_info .detail_notice{
  margin-top:1.8rem; font-size:1.3rem; color:var(--muted); line-height:1.7;
}

/* ---------- 상세 본문 섹션 ----------
   본문은 product-view.js 가 그린다. 순서:
   제형 사진 + 이야기 -> 핵심 세 가지 -> 주요 성분 -> 사용 순서 -> 제품 정보/전성분 -> 다른 제품 */
.product_detail .detail_sec{ margin-top:var(--sp-section); }
.product_detail .sec_tit{
  font-size:var(--fs-sec); font-weight:700; color:var(--fontColor); margin-bottom:var(--sp-tit);
  padding-bottom:1.8rem; border-bottom:1px solid var(--border);
}

/* 제형 사진 + 이야기 */
.product_detail .sec_story{
  display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:center;
}
.product_detail .story_img{ aspect-ratio:3/2; overflow:hidden; background:var(--gray1); }
.product_detail .story_img img{ width:100%; height:100%; object-fit:cover; display:block; }
.product_detail .story_txt .lead{
  font-size:var(--fs-lead); font-weight:700; line-height:1.45; letter-spacing:-0.07rem;
  color:var(--btnBlack); margin-bottom:3rem;
}
.product_detail .story_txt p + p{ margin-top:1.8rem; }
.product_detail .story_txt p:not(.lead){
  font-size:var(--fs-body); line-height:1.95; color:var(--fontProDesc);
}

/* 핵심 세 가지 */
.product_detail .point_list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-block); }
.product_detail .point_list li{
  background:var(--tint, #EAFBFF); border-radius:.4rem; padding:4rem 3rem 4.4rem;
}
.product_detail .point_list .num{
  display:block; font-size:1.4rem; font-weight:700; letter-spacing:.1em;
  /* 네온(--mainColor)은 연한 배경에서 1.6:1 이라 안 보여 진한 파랑을 쓴다.
     여기에 opacity 까지 걸면 대비가 다시 절반이 된다(1.8:1). 투명도는 빼고 색만 쓴다. */
  color:var(--subColor); margin-bottom:2.4rem;
}
.product_detail .point_list .p_en{
  font-size:1.2rem; font-weight:700; letter-spacing:.2em; color:var(--subColor);
  margin-bottom:1rem;
}
.product_detail .point_list .p_ko{
  font-size:var(--fs-h3); font-weight:700; color:var(--btnBlack); line-height:1.4; margin-bottom:1.4rem;
}
.product_detail .point_list .p_desc{ font-size:var(--fs-sm); line-height:1.75; color:var(--fontProDesc); }

/* 주요 성분 */
.product_detail .ing_wrap{
  display:grid; grid-template-columns:1fr 1.15fr; gap:7rem; align-items:center;
}
/* 상단과 같은 제품 사진을 그대로 쓰면 같은 그림이 두 번 나와 지루하다.
   확대해서 용기 표면만 잘라 보여 준다. (제품마다 사진이 한 장뿐이라 이렇게 변주한다.) */
.product_detail .ing_img{ aspect-ratio:1/1; overflow:hidden; background:var(--gray1); }
.product_detail .ing_img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.85); transform-origin:50% 62%;
}
.product_detail .ing_list li{ padding:2.8rem 0; border-bottom:1px solid var(--border); }
.product_detail .ing_list li:first-child{ padding-top:0; }
.product_detail .ing_list .ing_name{
  font-size:var(--fs-h3); font-weight:700; color:var(--btnBlack); margin-bottom:1rem;
}
.product_detail .ing_list .ing_role{ font-size:var(--fs-body); line-height:1.75; color:var(--fontProDesc); }

/* 사용 순서 — 단계마다 아이콘이 붙는다(product-view.js 의 ICONS) */
.product_detail .howto_list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-block); }
.product_detail .howto_list li{
  border:1px solid var(--border); border-radius:.4rem; padding:3.6rem 2.8rem 3.8rem;
  transition:border-color .3s;
}
.product_detail .howto_list li:hover{ border-color:var(--mainColor); }
/* 단계 그림. 그림 자체에 연한 원 배경이 들어 있어 칸에는 배경을 주지 않는다.
   그림을 못 받았을 때만(.no_img) 선 아이콘이 원 안에 나타난다. */
.product_detail .howto_list .step_mark{
  display:flex; align-items:center; justify-content:center;
  width:14rem; height:14rem; margin-bottom:2rem; color:var(--subColor);
}
.product_detail .howto_list .step_img{ width:100%; height:100%; display:block; }
.product_detail .howto_list .step_icon{ display:none; width:2.6rem; height:2.6rem; }
.product_detail .howto_list .step_mark.no_img{
  width:5.2rem; height:5.2rem; border-radius:50%; background:var(--tint, #EAFBFF);
}
.product_detail .howto_list .step_mark.no_img .step_icon{ display:block; }
.product_detail .howto_list .step{
  display:block; font-size:1.2rem; font-weight:700; letter-spacing:.2em;
  color:var(--subColor); margin-bottom:1.2rem;
}
.product_detail .howto_list p{ font-size:var(--fs-body); line-height:1.8; color:var(--fontProDesc); }

/* ---------- 제품 정보 + 전성분 ----------
   좌우 두 칸이 모두 '제목 + 굵은 구분선' 으로 시작한다.
   그래야 구분선과 첫 줄 높이가 양쪽에서 맞는다. */
.product_detail .spec_wrap{ display:grid; grid-template-columns:1fr 1.3fr; gap:6rem; align-items:start; }
.product_detail .spec_wrap h4{
  font-size:var(--fs-sm); font-weight:700; color:var(--btnBlack); line-height:1.4;
  margin:0; padding-bottom:1.4rem; border-bottom:2px solid var(--btnBlack);
}
.product_detail .spec_list > div{
  display:flex; gap:2rem; padding:1.8rem .4rem; border-bottom:1px solid var(--border);
}
.product_detail .spec_list dt{ width:9rem; flex:none; font-size:var(--fs-sm); font-weight:700; color:var(--btnBlack); }
.product_detail .spec_list dd{ font-size:var(--fs-sm); color:var(--fontProDesc); line-height:1.6; }
/* 왼쪽 첫 줄은 표 칸의 위 여백(1.8rem)만큼 내려와 있다. 오른쪽 본문도 같이 내린다. */
.product_detail .full_ing .ing_text{ padding-top:1.8rem; }
.product_detail .full_ing p{ font-size:var(--fs-sm); line-height:1.9; color:var(--fontProDesc); word-break:keep-all; }
.product_detail .full_ing .note{
  margin-top:2rem; font-size:var(--fs-xs); line-height:1.7; color:var(--muted);
}

/* ---------- 검색 결과 없음 ----------
   정적 사이트라 결과를 브라우저에서 거른다. 하나도 안 남았을 때만 보인다. */
.search_empty{
  display:none; padding:12rem 0; text-align:center;
  font-size:1.6rem; color:var(--muted);
}

/* ---------- 페이지 넘김 ----------
   정적 사이트에는 2·3쪽이 없어 눌러도 아무 데도 가지 않는다. 그래서 감춘다. */
.product-list .pagination,
.product-search .pagination{ display:none; }

/* ==================== 휴대폰 ==================== */
@media (max-width:1023px){

  /* ---- 목록 ---- */
  .product-list .product:not(.swiper-wrapper),
  .product .dl-grid.grid--4col:not(.swiper-wrapper),
  ul.product:not(.swiper-wrapper){ grid-template-columns:repeat(2,1fr); }
  .product__item .description{ padding:1.4rem 1.2rem 1.8rem; }
  .product__item .description .name{ font-size:1.5rem; line-height:1.4; }
  .product__item .description .desc{ font-size:var(--fs-xs); line-height:1.6; margin-bottom:1rem; }
  .product__item .description .price{ font-size:1.6rem; }
  .product__item .description .vol{ font-size:var(--fs-xs); }
  /* 가격과 용량은 좁아도 한 줄에 둔다.
     줄바꿈을 허용했더니 이름이 두 줄인 카드만 용량이 아래로 내려가,
     같은 줄에 놓인 카드끼리 가격 위치가 어긋나 보였다. */
  .product__item .description .product-price{
    flex-wrap:nowrap; gap:.5rem; align-items:baseline;
    justify-content:flex-start; white-space:nowrap;
  }
  /* 카드 높이를 줄 단위로 맞춘다. 이름이 한 줄인 카드와 두 줄인 카드가
     섞이면 가격 줄이 들쭉날쭉해진다. 이름 칸을 두 줄로 고정한다. */
  ul.product > li .product__item,
  ul.product > li{ display:flex; flex-direction:column; }
  .product__item .description{ display:flex; flex-direction:column; flex:1; }
  .product__item .description .product-info{ flex:1; }
  .product__item .description .name{ min-height:calc(1.5rem * 1.4 * 2); }

  /* 유형별 탭 — 8개가 한 줄에 안 들어간다. 가로로 밀어서 고르게 한다.
     스크롤 상자는 .menuCategory 여야 한다. 안쪽 ul 에만 걸면 바깥 ul 이 673px 로
     그대로 넓어져 페이지 전체가 옆으로 밀린다. */
  .category-list__wrap{ display:block; }
  .category-list__select{ display:none; }
  .menuCategory{
    overflow-x:auto; padding:1.2rem var(--page-pad);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .menuCategory::-webkit-scrollbar{ display:none; }
  .menuCategory > li{ display:block; padding:0; }
  .menuCategory .dl-subcategory{
    display:flex; gap:1.8rem; margin:0; padding:0; width:max-content;
  }
  .menuCategory .dl-subcategory > li{
    flex:0 0 auto; white-space:nowrap; margin:0; padding:0;
  }
  .menuCategory .dl-subcategory > li a{ font-size:1.5rem; }
  .menuCategory .dl-subcategory > li .button{ display:none; }

  /* 탭 · 개수 · 목록 사이가 PC 기준(각각 8~10rem)이라 휴대폰에서는
     한 화면이 거의 빈 채로 시작한다. 붙여 놓는다. */
  .category-list{ margin-bottom:0; }
  /* 좌우 여백이 PC 기준 5rem 이라 카드가 145px 밖에 안 남았다. */
  .product-list.wrapper{
    padding-top:2.4rem; padding-left:var(--page-pad); padding-right:var(--page-pad);
  }
  .product-list .function{ padding:0; margin-bottom:2rem; }
  /* 개수 줄과 첫 카드 사이가 100px(컨테이너 margin 30 + ul padding 70)이나 됐다. */
  .product-list .product-list__container{ margin-top:0; }
  .product-list ul.product{ padding-top:0; }
  .product-list .function__count{ font-size:1.4rem; }

  /* ---- 상세 ---- */
  .product_detail{ padding:var(--sp-page-top) var(--page-pad) 0; }
  .product_detail .detail_top{ grid-template-columns:1fr; gap:2.8rem; }
  .product_detail .detail_info{ padding-top:0; }
  .product_detail .detail_info .name{ font-size:2.6rem; }
  .product_detail .price_row .price{ font-size:2.2rem; }
  .product_detail .detail_btn{ grid-template-columns:1fr; gap:.8rem; }
  .product_detail .detail_btn a{ height:5rem; }

  .product_detail .sec_story{ grid-template-columns:1fr; gap:2.4rem; }
  .product_detail .point_list{ grid-template-columns:1fr; }
  .product_detail .point_list li{ padding:2.6rem 2.2rem 3rem; }
  .product_detail .point_list .num{ margin-bottom:1.4rem; }
  .product_detail .ing_wrap{ grid-template-columns:1fr; gap:2.4rem; }
  .product_detail .ing_list li{ padding:2rem 0; }
  .product_detail .howto_list{ grid-template-columns:1fr; }
  .product_detail .howto_list li{
    display:grid; grid-template-columns:8rem 1fr; align-items:center;
    column-gap:1.6rem; padding:1.6rem 1.8rem 1.8rem;
  }
  .product_detail .howto_list .step_mark{ grid-row:1 / span 2; width:8rem; height:8rem; margin:0; }
  .product_detail .howto_list .step{ margin-bottom:.4rem; align-self:end; }
  .product_detail .howto_list p{ align-self:start; }
  .product_detail .spec_wrap{ grid-template-columns:1fr; gap:3.4rem; }
  .product_detail .spec_list dt{ width:7rem; }

  /* ---- 검색 ----
     입력줄이 화면 밖으로 나가고, 문서가 그만큼 넓어지면서 헤더 아이콘까지
     오른쪽으로 밀려 안 보였다. */
  .search-form{ padding-top:10rem; }
  .search-form form{ width:auto; margin:0; padding:0 var(--page-pad); }
  .search-form .search-form__input input.keyword,
  .search-form .search-form__input .keyword::placeholder{ font-size:2rem; }
  .search-form .search-form__keyword{ padding:3rem 0 4rem; }
  .search-form .search-form__keyword .list{ column-gap:1.8rem; row-gap:.8rem; }
  .product-search .search-form__input{ padding:0; }
  /* 검색 결과 목록도 목록 페이지와 같은 좌우 여백으로 맞춘다 */
  .product-search .wrapper{ padding-left:var(--page-pad); padding-right:var(--page-pad); }
  .product-search .function{ padding:0; }
  .search_empty{ padding:8rem var(--page-pad); }
}

/* ==================== 태블릿 (768 ~ 1023px) ====================
   휴대폰 레이아웃을 그대로 쓰되, 폭이 넉넉하니 카드는 세 칸으로 둔다. */
@media (min-width:768px) and (max-width:1023px){
  .product-list .product:not(.swiper-wrapper),
  .product .dl-grid.grid--4col:not(.swiper-wrapper),
  ul.product:not(.swiper-wrapper){ grid-template-columns:repeat(3,1fr); }

  .product_detail .detail_top{ grid-template-columns:1fr 1fr; gap:4rem; }
  .product_detail .detail_btn{ grid-template-columns:1fr 1fr; }
  .product_detail .point_list{ grid-template-columns:repeat(3,1fr); }
  .product_detail .howto_list{ grid-template-columns:repeat(3,1fr); }
  .product_detail .howto_list li{ display:block; text-align:center; }
  .product_detail .howto_list .step_mark{ margin:0 auto 1.6rem; }
  .product_detail .sec_story{ grid-template-columns:1fr 1fr; gap:4rem; }
  .product_detail .spec_wrap{ grid-template-columns:1fr 1fr; gap:4rem; }
}