@charset "utf-8";
/* ============================================================
   product_detail_2026.css
   2026 상품 상세페이지 스타일
   ------------------------------------------------------------
   [1] 공통 - 레이아웃 / 섹션 간격
   [2] 공통 - 타이포그래피 (타이틀 / 본문 / 주석)
   [3] 공통 - 이미지 영역
   [4] 공통 - 줄바꿈 제어 / 스크롤 모션
   [5] 공통 컴포넌트 - FAQ
   [6] 페이지 전용 - WBF01 (SMEG x 24Bottles)
   ------------------------------------------------------------
   · 신규 상세페이지 제작 시 [1]~[5] 는 그대로 사용하고,
     레이아웃이 다른 부분만 [6] 처럼 "페이지 전용" 블록을 새로 추가합니다.
   · 페이지 전용 블록에서는 타이틀/본문 크기 같은 값을 다시 선언하지 말고
     공통 클래스(.pd_tit / .pd_txt ...)를 쓰고 필요한 값만 덮어씁니다.
   · 브레이크포인트 : 1024(태블릿) / 768(모바일) / 400(소형 모바일)
   · 섹션 여백은 padding-bottom 대신 padding-top 으로 통일합니다.
   ============================================================ */


/* ============================================================
   [1] 공통 - 레이아웃 / 섹션 간격
   ============================================================ */
/* 상세페이지 최상위 래퍼 */
.pd_page {width:100%; background:#fff; overflow:hidden;}
.pd_page .container_fixed {box-sizing:border-box;}
.pd_page .item_wrap {width:100%;}

/* 공통 섹션 간격 : 기본 / 좁게 / 넓게 */
.pd_sec {padding-top:130px;}
.pd_sec.pd_sec_s {padding-top:100px;}
.pd_sec.pd_sec_l {padding-top:180px;}

/* 배경색이 있는 섹션(밴드)은 위쪽 여백을 margin-top 으로 분리한다.
   (padding-top 으로 주면 배경색이 여백까지 칠해지기 때문) */
.pd_band {margin-top:130px;}

@media (max-width:1024px) {
  .pd_sec {padding-top:90px;}
  .pd_sec.pd_sec_s {padding-top:70px;}
  .pd_sec.pd_sec_l {padding-top:120px;}
  .pd_band {margin-top:90px;}
}

@media (max-width:768px) {
  .pd_sec {padding-top:60px;}
  .pd_sec.pd_sec_s {padding-top:50px;}
  .pd_sec.pd_sec_l {padding-top:80px;}
  .pd_band {margin-top:60px;}
}


/* ============================================================
   [2] 공통 - 타이포그래피
   ------------------------------------------------------------
   .pd_tit    섹션 대표 타이틀   PC 5.8rem  / TB 4.4rem / MO 3.0rem   (w800)
   .pd_tit_m  중간 타이틀        PC 4.4rem  / TB 3.5rem / MO 2.5rem   (w600)
   .pd_tit_s  소형 타이틀        PC 3.2rem  / TB 2.8rem / MO 2.5rem   (w800)
   .pd_txt    본문               PC 2.0rem  / TB 1.7rem / MO 1.6rem   (w300)
   .pd_note   주석 / 캡션        PC 1.6rem  / TB 1.5rem / MO 1.4rem   (w300)

   · .pd_tit_m 은 "제품 정보", "자주 묻는 질문" 처럼 가운데 정렬되는
     안내성 섹션 타이틀용이며 font-weight 600 으로 고정한다.
     (신규 상세페이지에서도 동일하게 유지할 것)
   ============================================================ */
.pd_tit {font-size:5.8rem; font-weight:800; line-height:1.35; letter-spacing:-0.03em; color:#000;}
.pd_tit_m {font-size:4.4rem; font-weight:600; line-height:1.4; letter-spacing:-0.03em; color:#000;}
.pd_tit_s {font-size:3.2rem; font-weight:800; line-height:1.8; letter-spacing:-0.03em; color:#000;}

.pd_txt {margin-top:45px; font-size:2rem; font-weight:400; line-height:1.9; letter-spacing:-0.02em; color:#222;}
.pd_note {margin-top:20px; font-size:1.6rem; font-weight:300; line-height:1.7; letter-spacing:-0.02em; color:#888;}

/* 타이틀-본문 간격 조절용 */
.pd_mt_0 {margin-top:0;}
.pd_mt_s {margin-top:30px;}

/* 정렬 */
.pd_center {text-align:center;}

@media (max-width:1024px) {
  .pd_tit {font-size:4.4rem;}
  .pd_tit_m {font-size:3.5rem;}
  .pd_tit_s {font-size:2.8rem; line-height:1.6;}
  .pd_txt {margin-top:30px; font-size:1.7rem;}
  .pd_note {font-size:1.5rem;}
  .pd_mt_s {margin-top:22px;}
}

@media (max-width:768px) {
  .pd_tit {font-size:3rem; line-height:1.45;}
  .pd_tit_m {font-size:2.5rem;}
  .pd_tit_s {font-size:2.5rem; line-height:1.45;}
  .pd_txt {margin-top:22px; font-size:1.6rem; line-height:1.85;}
  .pd_note {margin-top:14px; font-size:1.4rem;}
  .pd_mt_s {margin-top:18px;}
}

@media (max-width:400px) {
  .pd_tit {font-size:2.6rem;}
  .pd_tit_s {font-size:2.3rem;}
  .pd_txt {font-size:1.5rem;}
}


/* ============================================================
   [3] 공통 - 이미지 영역
   ------------------------------------------------------------
   .pd_media       카피 아래 이미지 기본 여백 (_s 좁게 / _l 넓게)
   .pd_media_full  PC 1200 고정 · 모바일 화면 끝까지 (좌우 여백 없음)
   ============================================================ */
.pd_media {margin-top:80px;}
.pd_media.pd_media_s {margin-top:50px;}
.pd_media.pd_media_l {margin-top:110px;}
.pd_media img {display:block; width:100%; height:auto;}

.pd_media_full {width:100%; max-width:1200px; margin:0 auto;}
.pd_media_full img {display:block; width:100%; height:auto;}

@media (max-width:1024px) {
  .pd_media {margin-top:65px;}
  .pd_media.pd_media_s {margin-top:40px;}
  .pd_media.pd_media_l {margin-top:80px;}
}

@media (max-width:768px) {
  .pd_media {margin-top:45px;}
  .pd_media.pd_media_s {margin-top:30px;}
  .pd_media.pd_media_l {margin-top:55px;}
}


/* ============================================================
   [4] 공통 - PC / 모바일 노출 제어 · 줄바꿈 · 스크롤 모션
   ------------------------------------------------------------
   .pd_pc     / .pd_mo       블록 요소 (div 등)   - 768 기준
   .pd_pc_in  / .pd_mo_in    인라인 요소 (span 등) - 768 기준
   .pd_pc_br  / .pd_mo_br    줄바꿈 (br)          - 768 기준
   .pd_pc_400 / .pd_mo_400   블록 요소            - 400 기준
   .pd_pc_br_400 / .pd_mo_br_400  줄바꿈          - 400 기준

   · 기존 전역 .only_desktop / .only_mobile 은 display:block !important 라
     인라인 요소(span, br)에 쓰면 레이아웃이 깨진다.
     그래서 !important 없이 요소 성격별로 나눠 새로 정의한다.
   · 개별 스타일에서 display 를 직접 제어하는 요소라면
     그쪽 선택자가 더 구체적이므로 그 값이 그대로 적용된다.
   ============================================================ */
/* 블록 요소 */
.pd_pc {display:block;}
.pd_mo {display:none;}

/* 인라인 요소 */
.pd_pc_in,
.pd_pc_br {display:inline;}
.pd_mo_in,
.pd_mo_br {display:none;}

@media (max-width:768px) {
  .pd_pc {display:none;}
  .pd_mo {display:block;}

  .pd_pc_in,
  .pd_pc_br {display:none;}
  .pd_mo_in,
  .pd_mo_br {display:inline;}
}

/* 소형 모바일(400) 기준 */
.pd_pc_400 {display:block;}
.pd_mo_400 {display:none;}
.pd_pc_br_400 {display:inline;}
.pd_mo_br_400 {display:none;}

@media (max-width:400px) {
  .pd_pc_400 {display:none;}
  .pd_mo_400 {display:block;}
  .pd_pc_br_400 {display:none;}
  .pd_mo_br_400 {display:inline;}
}

/* 스크롤 진입 시 등장 (JS 가 is_show 를 붙임) */
.pd_ani {opacity:0; -webkit-transform:translateY(30px); transform:translateY(30px); -webkit-transition:opacity .8s cubic-bezier(.22,.61,.36,1), -webkit-transform .8s cubic-bezier(.22,.61,.36,1); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);}
.pd_ani.is_show {opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}

/* 모션 최소화 설정 대응 */
@media (prefers-reduced-motion: reduce) {
  .pd_ani {opacity:1; -webkit-transform:none; transform:none; -webkit-transition:none; transition:none;}
}


/* ============================================================
   [5] 공통 컴포넌트 - FAQ
   ------------------------------------------------------------
   PC     : 클릭 아코디언 (.on 이 열린 상태)
   모바일 : 전체 펼침 + 좌우 꽉 찬 회색 배경
   ============================================================ */
.pd_faq {margin-top:50px; border-top:1px solid #dddddd;}
.pd_faq .faq_item {border-bottom:1px solid #dddddd;}
.pd_faq .faq_q {position:relative; display:block; padding:22px 70px 22px 30px; font-size:2rem; font-weight:600; line-height:1.6; letter-spacing:-0.03em; color:#000;}
.pd_faq .faq_q .mark {margin-right:10px;}
.pd_faq .faq_q .arrow {position:absolute; top:50%; right:32px; width:10px; height:10px; margin-top:-8px; border-right:2px solid #333333; border-bottom:2px solid #333333; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:-webkit-transform .25s; transition:transform .25s;}
.pd_faq .faq_a {display:none; padding:0 70px 24px 66px;}
.pd_faq .faq_a p {font-size:2rem; font-weight:400; line-height:1.75; letter-spacing:-0.02em; color:#000;}

.pd_faq .faq_item.on {background:#f5f5f5;}
.pd_faq .faq_item.on .faq_q .arrow {margin-top:-2px; -webkit-transform:rotate(-135deg); transform:rotate(-135deg);}

@media (max-width:1024px) {
  .pd_faq {margin-top:35px;}
  .pd_faq .faq_q {padding:18px 55px 18px 20px; font-size:1.6rem;}
  .pd_faq .faq_a {padding:0 55px 20px 48px;}
  .pd_faq .faq_a p {font-size:1.6rem;}
}

@media (max-width:768px) {
  /* container_fixed 좌우 패딩(20px)을 상쇄해 배경을 화면 끝까지 채운다 */
  .pd_faq {margin:25px -20px 0; padding:10px 0 80px; border-top:0; background:#f6f6f6;}
  .pd_faq .faq_item {position:relative; border-bottom:0; background:none;}
  .pd_faq .faq_item:after {content:""; position:absolute; left:20px; right:20px; bottom:0; height:1px; background:#e0e0e0;}
  .pd_faq .faq_item.on {background:none;}
  .pd_faq .faq_q {padding:22px 20px 0; font-size:1.6rem; cursor:default;}
  .pd_faq .faq_q .arrow {display:none;}
  .pd_faq .faq_a {display:block !important; padding:8px 20px 22px;}
  .pd_faq .faq_a p {font-size:1.6rem; line-height:1.7;}
}


/* ============================================================
   [6] 페이지 전용 - WBF01 (SMEG x 24Bottles)
   ------------------------------------------------------------
   타이포/여백은 위 공통 클래스를 쓰고,
   이 블록에는 레이아웃과 이 페이지에서만 쓰는 값만 남긴다.
   ============================================================ */

/* -------------------- 인트로 (카피 + 메인 비주얼) -------------------- */
.comp_wbf01_intro .item {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
.comp_wbf01_intro .text_area {width:55%;}
.comp_wbf01_intro .badge_new {display:inline-block; padding:6px 14px; background:#000; color:#fff; font-size:2.4rem; font-weight:800; line-height:1.3; letter-spacing:-0.02em;}
.comp_wbf01_intro .brand {display:block; margin-top:24px; font-size:6rem; font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:#000;}
.comp_wbf01_intro .bar {display:block; width:350px; max-width:100%; height:1px; margin:22px 0 34px; background:#000;}
.comp_wbf01_intro .pd_tit {font-size:6rem; line-height:1.45;}
.comp_wbf01_intro .pd_txt {margin-top:34px;}
.comp_wbf01_intro .image_area {width:45%; text-align:center;}
.comp_wbf01_intro .image_area img {width:100%; margin:0 auto;}

@media (max-width:1024px) {
  .comp_wbf01_intro .brand {margin-top:20px; font-size:3.6rem;}
  .comp_wbf01_intro .bar {width:260px; margin:18px 0 28px;}
  .comp_wbf01_intro .pd_tit {font-size:3.7rem;}
  .comp_wbf01_intro .pd_txt {margin-top:28px;}
}

@media (max-width:768px) {
  .comp_wbf01_intro .item {display:block;}
  .comp_wbf01_intro .text_area {width:100%;}
  .comp_wbf01_intro .badge_new {padding:5px 11px; font-size:1.6rem;}
  .comp_wbf01_intro .brand {margin-top:16px; font-size:3rem;}
  .comp_wbf01_intro .bar {width:100%; margin:14px 0 22px;}
  .comp_wbf01_intro .pd_tit {font-size:3.2rem; line-height:1.5;}
  .comp_wbf01_intro .pd_txt {margin-top:22px; line-height:1.8;}
  .comp_wbf01_intro .image_area {width:100%; margin-top:50px;}
  .comp_wbf01_intro .image_area img {max-width:72%;}
}

@media (max-width:400px) {
  .comp_wbf01_intro .pd_tit {font-size:2.9rem;}
}

/* -------------------- 핵심 특징 아이콘 -------------------- */
.comp_wbf01_icons .icon_area {display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:nowrap; flex-wrap:nowrap; gap:24px;}
.comp_wbf01_icons .icon_item {-webkit-box-flex:1; -ms-flex:1 1 0px; flex:1 1 0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; min-height:110px; padding:20px 24px; background:#f5f5f5; border-radius:12px; box-sizing:border-box;}
.comp_wbf01_icons .icon_item .icon {-webkit-box-flex:0; -ms-flex:0 0 auto; flex:0 0 auto; width:62px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.comp_wbf01_icons .icon_item .icon img {max-width:100%;}
.comp_wbf01_icons .icon_item .text {position:relative; margin-left:22px; padding-left:22px; font-size:1.6rem; font-weight:700; line-height:1.6; letter-spacing:-0.03em; color:#000;}
.comp_wbf01_icons .icon_item .text:before {content:""; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); width:1px; height:44px; background:#dddddd;}

@media (max-width:1024px) {
  .comp_wbf01_icons .icon_area {gap:14px;}
  .comp_wbf01_icons .icon_item {min-height:96px; padding:16px 14px;}
  .comp_wbf01_icons .icon_item .icon {width:50px;}
  .comp_wbf01_icons .icon_item .text {margin-left:14px; padding-left:14px; font-size:1.4rem;}
}

@media (max-width:768px) {
  .comp_wbf01_icons .icon_area {-ms-flex-wrap:wrap; flex-wrap:wrap; gap:10px;}
  .comp_wbf01_icons .icon_item {-webkit-box-flex:0; -ms-flex:0 0 calc(50% - 5px); flex:0 0 calc(50% - 5px); min-height:88px; padding:14px 12px; border-radius:10px;}
  .comp_wbf01_icons .icon_item .icon {width:44px;}
  .comp_wbf01_icons .icon_item .text {margin-left:12px; padding-left:12px; font-size:1.3rem; line-height:1.55;}
  .comp_wbf01_icons .icon_item .text:before {height:34px;}
}

@media (max-width:400px) {
  .comp_wbf01_icons .icon_item {padding:12px 10px;}
  .comp_wbf01_icons .icon_item .icon {width:38px;}
  .comp_wbf01_icons .icon_item .icon img {max-width:30px; max-height:40px;}
  .comp_wbf01_icons .icon_item .text {margin-left:8px; padding-left:8px; font-size:1.1rem; line-height:1.55;}
  /* 소형 모바일에서는 모바일 전용 줄바꿈을 해제 */
  .comp_wbf01 .pd_mo_br {display:none;}
}

/* -------------------- 컬러 라인업 이미지 -------------------- */
.comp_wbf01_gallery .image_area {width:100%; font-size:0;}
.comp_wbf01_gallery .image_area img {display:block; width:100%;}

/* -------------------- 라이프스타일 갤러리 -------------------- */
.comp_wbf01_life .photo {overflow:hidden;}
.comp_wbf01_life .photo img {display:block; width:100%; height:auto;}
.comp_wbf01_life .photo_list {display:none;}

@media (max-width:768px) {
  .comp_wbf01_life .photo_area {display:none;}
  .comp_wbf01_life .photo_list {display:block; margin-top:30px;}
  .comp_wbf01_life .photo_list .photo {margin-top:50px;}
  .comp_wbf01_life .photo_list .photo:first-child {margin-top:0;}
  /* margin-right:auto = 좌측 끝 붙임 / margin-left:auto = 우측 끝 붙임 */
  .comp_wbf01_life .photo_list .p01 {width:93%; margin-right:auto;}
  .comp_wbf01_life .photo_list .p02 {width:85%; margin-left:auto;}
  .comp_wbf01_life .photo_list .p03 {width:93%; margin-right:auto;}
  .comp_wbf01_life .photo_list .p04 {width:97%; margin-left:auto;}
  .comp_wbf01_life .photo_list .p05 {width:90%; margin-right:auto;}
  .comp_wbf01_life .photo_list .p06 {width:85%; margin-right:auto;}
  .comp_wbf01_life .photo_list .p07 {width:97%; margin-left:auto;}
}

/* -------------------- 디자인 스토리 / 디테일 -------------------- */
.comp_wbf01_design .photo,
.comp_wbf01_detail .photo {overflow:hidden;}

/* -------------------- 이중 진공 단열 구조 -------------------- */
@media (max-width:1024px) {
  .comp_wbf01_vacuum .photo {margin-top:60px;}
}

@media (max-width:768px) {
  /* 보틀이 카피 옆까지 올라오도록 위로 당김 */
  .comp_wbf01_vacuum .pd_media_full {margin-top:-110px !important;}
  .comp_wbf01_vacuum .photo {margin-top:30px;}
}

@media (max-width:400px) {
  .comp_wbf01_vacuum .pd_txt {padding-right:100px;}
}

/* -------------------- 지속가능성 (회색 밴드) -------------------- */
.comp_wbf01_eco {padding:130px 0 140px; background:#f5f5f5;}
.comp_wbf01_eco .item {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
.comp_wbf01_eco .text_area {width:46%;}
.comp_wbf01_eco .desc {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-top:45px;}
.comp_wbf01_eco .desc .logo {-webkit-box-flex:0; -ms-flex:0 0 auto; flex:0 0 auto; width:90px;}
.comp_wbf01_eco .desc .logo img {width:100%; height:auto;}
.comp_wbf01_eco .desc .pd_txt {margin-top:0; margin-left:25px;}
.comp_wbf01_eco .image_area {width:40%;}
.comp_wbf01_eco .image_area img {display:block; width:100%; height:auto; border-radius:10px;}

@media (max-width:1024px) {
  .comp_wbf01_eco {padding:80px 0 90px;}
  .comp_wbf01_eco .text_area {width:50%;}
  .comp_wbf01_eco .desc {margin-top:30px;}
  .comp_wbf01_eco .desc .logo {width:74px;}
  .comp_wbf01_eco .desc .pd_txt {margin-left:18px;}
  .comp_wbf01_eco .image_area {width:44%;}
}

@media (max-width:768px) {
  .comp_wbf01_eco {padding:45px 0 60px;}
  .comp_wbf01_eco .item {display:block;}
  .comp_wbf01_eco .text_area {width:100%; padding:0 20px;}
  .comp_wbf01_eco .desc {margin-top:22px;}
  .comp_wbf01_eco .desc .logo {width:48px;}
  .comp_wbf01_eco .desc .pd_txt {margin-left:16px; line-height:1.8;}
  .comp_wbf01_eco .image_area {width:100%; margin-top:40px;}
  .comp_wbf01_eco .image_area img {border-radius:16px;}
}

@media (max-width:400px) {
  .comp_wbf01_eco .text_area {padding:0 10px;}
  .comp_wbf01_eco .desc .logo {width:42px;}
  .comp_wbf01_eco .desc .pd_txt {margin-left:12px;}
}

/* -------------------- 컬러 -------------------- */
.comp_wbf01_color_head .pd_tit {font-size:5.3rem; line-height:1.2; letter-spacing:-0.02em;}
/* PC 스와이퍼 : 공통 컴포넌트(comp_pro_swiper_multi_a_ratio) 사용, 상단 여백만 보정 */
.comp_wbf01_color .comp_pro_swiper_multi_a_ratio {padding-top:40px;}

.comp_wbf01_color_list {display:none;}
.comp_wbf01_color_list .list {display:grid; grid-template-columns:repeat(2, 1fr); column-gap:16px; row-gap:26px;}
.comp_wbf01_color_list .item {display:block;}
.comp_wbf01_color_list .thumb {position:relative; display:block; width:100%; height:0; padding-bottom:126%; overflow:hidden;}
.comp_wbf01_color_list .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; -o-object-fit:cover; object-fit:cover;}
.comp_wbf01_color_list .pro_title {display:block; margin-top:12px; font-size:1.3rem; font-weight:400; line-height:1.5; letter-spacing:-0.02em; color:#000;}

@media (max-width:1024px) {
  .comp_wbf01_color_head .pd_tit {font-size:4.1rem;}
  .comp_wbf01_color .comp_pro_swiper_multi_a_ratio {padding-top:30px;}
}

@media (max-width:768px) {
  .comp_wbf01_color_head .pd_tit {font-size:3.2rem;}
  .comp_wbf01_color_list {display:block; margin-top:25px;}
}

@media (max-width:400px) {
  .comp_wbf01_color_list .list {column-gap:12px; row-gap:20px;}
  .comp_wbf01_color_list .pro_title {font-size:1.2rem;}
}

/* -------------------- 가벼움 -------------------- */
.comp_wbf01_light {overflow:hidden;}
.comp_wbf01_light .item {position:relative; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;}
.comp_wbf01_light .text_area {width:37.5%; padding-top:20px;}
.comp_wbf01_light .visual_area {width:62.5%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:end; -ms-flex-align:end; align-items:flex-end;}
.comp_wbf01_light .visual_area .bottle img {display:block; width:100%; height:auto;}
/* margin-bottom : 보틀 이미지 하단 크롭 위치에 맞춰 조정 */
.comp_wbf01_light .visual_area .weight_img {width:36%; margin-left:5.3%; margin-bottom:130px;}
.comp_wbf01_light .visual_area .weight_img img {display:block; width:100%; height:auto;}
.comp_wbf01_light .weight {display:none;}

@media (max-width:1024px) {
  .comp_wbf01_light .text_area {width:40%;}
  .comp_wbf01_light .visual_area {width:60%;}
  .comp_wbf01_light .visual_area .weight_img {margin-bottom:90px;}
}

@media (max-width:768px) {
  .comp_wbf01_light .text_area {width:58%; padding-top:0;}
  .comp_wbf01_light .pd_txt {line-height:1.9;}
  .comp_wbf01_light .visual_area {display:block; width:42%;}
  .comp_wbf01_light .visual_area .bottle {width:100%; margin:0;}
  .comp_wbf01_light .visual_area .bottle img {max-height:450px; -o-object-fit:contain; object-fit:contain;}

  .comp_wbf01_light .weight {display:block; width:88%; margin-top:30px; padding:12px 0; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd;}
  .comp_wbf01_light .weight .label {font-size:1.2rem; font-weight:700; line-height:1.6; letter-spacing:-0.03em; color:#000;}
  .comp_wbf01_light .weight .value {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-top:4px; font-size:2.5rem; font-weight:800; line-height:1.2; letter-spacing:-0.03em; color:#000;}
  .comp_wbf01_light .weight .value img {width:10px; height:auto; margin-left:4px;}
}

@media (max-width:400px) {
  .comp_wbf01_light .text_area {padding-bottom:125px;}
  .comp_wbf01_light .visual_area {position:absolute; top:0; right:0;}
  .comp_wbf01_light .weight {width:100%;}
  .comp_wbf01_light .weight .value {font-size:2.2rem;}
}

/* -------------------- 소재 -------------------- */
/* PC : 좌측(텍스트 + 특징) / 우측(이미지, 하단 정렬)
   모바일 : DOM 순서 그대로 텍스트 → 이미지 → 특징 */
.comp_wbf01_material .item {display:grid; grid-template-columns:46% 54%; align-items:start;}
.comp_wbf01_material .text_area {grid-column:1; grid-row:1;}
.comp_wbf01_material .visual_area {grid-column:2; grid-row:1 / 3; -ms-flex-item-align:end; align-self:end;}
.comp_wbf01_material .visual_area .photo img {display:block; width:100%; height:auto;}
.comp_wbf01_material .feature_list {grid-column:1; grid-row:2; margin-top:80px; display:grid; grid-template-columns:1fr; row-gap:60px;}
.comp_wbf01_material .feature_item {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.comp_wbf01_material .feature_item .icon {-webkit-box-flex:0; -ms-flex:0 0 auto; flex:0 0 auto; width:90px;}
.comp_wbf01_material .feature_item .icon img {width:100%; height:auto;}
.comp_wbf01_material .feature_item .cont {margin-left:25px;}
.comp_wbf01_material .feature_item .cont .tit {font-size:3rem; font-weight:700; line-height:1.45; letter-spacing:-0.03em; color:#000;}
.comp_wbf01_material .feature_item .cont .txt {margin-top:10px; font-size:1.6rem; font-weight:300; line-height:1.6; letter-spacing:-0.02em; color:#7B7B7B;}

@media (max-width:1024px) {
  .comp_wbf01_material .feature_list {margin-top:60px; row-gap:40px;}
  .comp_wbf01_material .feature_item .icon {width:70px;}
  .comp_wbf01_material .feature_item .cont {margin-left:18px;}
  .comp_wbf01_material .feature_item .cont .tit {font-size:1.9rem;}
  .comp_wbf01_material .feature_item .cont .txt {margin-top:8px; font-size:1.4rem;}
}

@media (max-width:768px) {
  .comp_wbf01_material .item {display:block;}
  .comp_wbf01_material .visual_area {margin-top:30px;}
  .comp_wbf01_material .visual_area .photo img {-webkit-transform:translateX(20px); transform:translateX(20px);}
  .comp_wbf01_material .feature_list {margin-top:30px; grid-template-columns:repeat(2, 1fr); column-gap:16px; row-gap:24px;}
  .comp_wbf01_material .feature_item .icon {width:46px;}
  .comp_wbf01_material .feature_item .cont {margin-left:12px;}
  .comp_wbf01_material .feature_item .cont .tit {font-size:1.4rem;}
  .comp_wbf01_material .feature_item .cont .txt {margin-top:6px; font-size:1.1rem;}
}

@media (max-width:400px) {
  .comp_wbf01_material .feature_item .icon {width:40px;}
  .comp_wbf01_material .feature_item .cont {margin-left:9px;}
  .comp_wbf01_material .feature_item .cont .tit {font-size:1.3rem;}
  .comp_wbf01_material .feature_item .cont .txt {font-size:1rem;}
}

/* -------------------- 보온·보냉 -------------------- */
.comp_wbf01_thermal .text_area {margin-top:130px;}
.comp_wbf01_thermal .photo img {width:100%;}
@media (max-width:1024px) {
  .comp_wbf01_thermal .text_area {margin-top:90px;}
  .comp_wbf01_thermal .time_area {width:76%; margin-top:70px;}
}

@media (max-width:768px) {
  .comp_wbf01_thermal .text_area {margin-top:50px;}
  .comp_wbf01_thermal .time_area {width:100%; margin-top:40px;}
  .comp_wbf01_thermal .photo img {width:100%;}
}

/* -------------------- 밀폐 -------------------- */
.comp_wbf01_leak .visual_area {width:50%; margin-left:auto; margin-right:auto;}
.comp_wbf01_leak .photo img {display:block; width:100%; height:auto;}

@media (max-width:1024px) {
  .comp_wbf01_leak .visual_area {width:65%;}
}

@media (max-width:768px) {
  .comp_wbf01_leak .visual_area {width:100%;}
}

/* -------------------- 휴대성 -------------------- */
/* PC 2열 × 3행 / 모바일 1 - 2 - 2 - 1 */
.comp_wbf01_size .photo_list {display:grid; grid-template-columns:repeat(2, 1fr); gap:25px;}
.comp_wbf01_size .thumb {position:relative; width:100%; height:0; padding-bottom:66.4%; overflow:hidden;}
.comp_wbf01_size .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; -o-object-fit:cover; object-fit:cover;}

@media (max-width:1024px) {
  .comp_wbf01_size .photo_list {gap:18px;}
}

@media (max-width:768px) {
  .comp_wbf01_size .photo_list {gap:12px;}
  .comp_wbf01_size .photo.p01,
  .comp_wbf01_size .photo.p06 {grid-column:1 / -1;}
  .comp_wbf01_size .thumb {padding-bottom:113%;}
  .comp_wbf01_size .p01 .thumb {padding-bottom:50%;}
  .comp_wbf01_size .p06 .thumb {padding-bottom:71%;}
}

/* -------------------- SMEG Into Your LifeStyle (모바일 나열) -------------------- */
.comp_wbf01_smeglife .photo {margin-top:10px;}
.comp_wbf01_smeglife .photo:first-child {margin-top:0;}
.comp_wbf01_smeglife .photo img {display:block; width:100%; height:auto;}

/* -------------------- 클로징 배너 -------------------- */
/* 보틀 이미지가 텍스트보다 길어 밴드 높이를 결정하고 하단에 맞물림 (padding-bottom 없음) */
.comp_wbf01_outro {background:#dce9f5; overflow:hidden;}
.comp_wbf01_outro .item {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.comp_wbf01_outro .text_area {width:64%;}
.comp_wbf01_outro .text_area .logo {width:120px;}
.comp_wbf01_outro .text_area .logo img {display:block; width:100%; height:auto;}
.comp_wbf01_outro .pd_tit_s {margin-top:45px; font-size:3.1rem; font-weight:400; line-height:1.45;}
.comp_wbf01_outro .pd_txt {margin-top:25px; font-size:1.6rem; color:#333;}
.comp_wbf01_outro .visual_area {margin-left:auto;}
.comp_wbf01_outro .photo img {display:block; width:100%; height:auto;}

@media (max-width:1024px) {
  .comp_wbf01_outro .text_area {width:66%;}
  .comp_wbf01_outro .text_area .logo {width:100px;}
  .comp_wbf01_outro .pd_tit_s {margin-top:32px; font-size:2.6rem;}
  .comp_wbf01_outro .pd_txt {margin-top:18px; font-size:1.6rem;}
}

@media (max-width:768px) {
  .comp_wbf01_outro {padding-top:45px;}
  .comp_wbf01_outro .item {display:block;}
  .comp_wbf01_outro .text_area {width:100%;}
  .comp_wbf01_outro .text_area .logo {width:90px;}
  .comp_wbf01_outro .pd_tit_s {margin-top:30px; font-size:2.8rem;}
  .comp_wbf01_outro .pd_txt {margin-top:20px; font-size:1.7rem; line-height:1.9;}
  .comp_wbf01_outro .visual_area {width:100%; margin-top:20px; margin-left:auto; padding-left:30%;}
  .comp_wbf01_outro .visual_area img {max-width:240px; margin:0 auto;}
}

@media (max-width:400px) {
  .comp_wbf01_outro .pd_tit_s {font-size:2.4rem;}
  .comp_wbf01_outro .pd_txt {font-size:1.5rem;}
}

/* -------------------- 제품 정보 -------------------- */
.comp_wbf01_info .spec_area {width:100%; max-width:380px; margin:90px auto 0;}
.comp_wbf01_info .spec_area .photo img {display:block; width:100%; height:auto;}
.comp_wbf01_info .faq_title {margin-top:150px;}
.comp_wbf01_info .faq_title .en {display:none; margin-left:0.55em; padding-left:0.55em; border-left:1px solid #dddddd; font-size:0.95em; font-weight:800; color:#bbbbbb;}

@media (max-width:1024px) {
  .comp_wbf01_info .spec_area {margin-top:60px;}
  .comp_wbf01_info .faq_title {margin-top:100px;}
}

@media (max-width:768px) {
  .comp_wbf01_info .spec_area {width:60%; max-width:none; margin-top:35px;}
  .comp_wbf01_info .faq_title {margin-top:70px;}
  .comp_wbf01_info .faq_title .en {display:inline;}
}
/* ============================================================
   //product_detail_2026.css
   ============================================================ */