@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:300px;}
.pd_sec.pd_sec_s {padding-top:130px;}
.pd_sec.pd_sec_l {padding-top:400px;}

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

/* 밴드 안쪽 여백. 배경이 칠해지는 영역이라 위/아래가 모두 필요하므로
   이 클래스에 한해 padding-bottom 을 함께 쓴다.
   이미지가 밴드 하단에 맞물리는 밴드에는 붙이지 않는다.
   (섹션 사이 간격이 아니라 배경 안쪽 여백이므로 과하지 않게 유지한다) */
.pd_band.pd_band_pad {padding:170px 0 180px;}

/* 밴드 배경색 */
.pd_bg_gray {background:#f5f5f5;}

/* 한 섹션 안에서 내용 덩어리를 나눌 때 쓰는 큰 여백
   (예 : "제품 정보" 이미지 → "자주 묻는 질문" 타이틀) */
.pd_sec_gap {margin-top:240px;}

@media (max-width:1024px) {
  .pd_sec {padding-top:200px;}
  .pd_sec.pd_sec_s {padding-top:80px;}
  .pd_sec.pd_sec_l {padding-top:260px;}
  .pd_band {margin-top:200px;}
  .pd_band.pd_band_pad {padding:110px 0 120px;}
  .pd_sec_gap {margin-top:160px;}
}

@media (max-width:768px) {
  .pd_sec {padding-top:130px;}
  .pd_sec.pd_sec_s {padding-top:50px;}
  .pd_sec.pd_sec_l {padding-top:170px;}
  .pd_band {margin-top:130px;}
  .pd_band.pd_band_pad {padding:70px 0 80px;}
  .pd_sec_gap {margin-top:110px;}
}


/* ============================================================
   [2] 공통 - 타이포그래피
   ------------------------------------------------------------
   .pd_tit    섹션 대표 타이틀   PC 7.0rem  / TB 5.2rem / MO 3.6rem   (w800)
   .pd_tit_m  중간 타이틀        PC 5.2rem  / TB 4.2rem / MO 3.0rem   (w600)
   .pd_tit_s  소형 타이틀        PC 3.8rem  / TB 3.3rem / MO 3.0rem   (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:7rem; font-weight:800; line-height:1.35; letter-spacing:-0.03em; color:#000;}
.pd_tit_m {font-size:5.2rem; font-weight:600; line-height:1.4; letter-spacing:-0.03em; color:#000;}
.pd_tit_s {font-size:3.8rem; 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;}

/* 타이틀 옆 영문 보조 표기 : 자주 묻는 질문 | FAQ
   노출 제어는 [4] .pd_pc_in / .pd_mo_in 을 함께 붙여서 처리한다 */
.pd_tit_en {margin-left:0.55em; padding-left:0.55em; border-left:1px solid #dddddd; font-size:0.95em; font-weight:800; color:#bbbbbb;}

/* 타이틀-본문 간격 조절용 */
.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:5.2rem;}
  .pd_tit_m {font-size:4.2rem;}
  .pd_tit_s {font-size:3.3rem; 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:3.6rem; line-height:1.45;}
  .pd_tit_m {font-size:3rem;}
  .pd_tit_s {font-size:3rem; 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:3.1rem;}
  .pd_tit_s {font-size:2.7rem;}
  .pd_txt {font-size:1.5rem;}
}


/* ============================================================
   [3] 공통 - 이미지 영역
   ------------------------------------------------------------
   .pd_media       카피 아래 이미지 기본 여백 (_s 좁게 / _l 넓게)
   .pd_media_full  PC 1200 고정 · 모바일 화면 끝까지 (좌우 여백 없음)
   .pd_media_wide  PC · 모바일 모두 화면 끝까지 (풀블리드 통이미지)
   .pd_round       이미지 모서리 라운드 (다른 이미지 클래스와 함께 사용)
   .pd_media_center 가운데 정렬 (폭은 페이지에서 max-width 로 지정)
   ============================================================ */
.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;}

/* 좌우 여백 없이 화면 끝까지 채우는 통이미지 영역.
   이미지를 여러 장 넣으면 두 번째부터 자동으로 간격이 들어간다. */
.pd_media_wide {width:100%; font-size:0;}
.pd_media_wide img {display:block; width:100%; height:auto;}
.pd_media_wide img + img {margin-top:20px;}

/* 이미지 모서리 라운드 */
.pd_round img {border-radius:10px;}

/* 가운데 정렬. 좁은 이미지(사이즈 도면 등)에 .pd_media 와 함께 쓰고
   페이지에서 max-width 만 지정한다 */
.pd_media_center {margin-left:auto; margin-right: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;}
  .pd_round img {border-radius:16px;}
}


/* ============================================================
   [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] 공통 컴포넌트
   ------------------------------------------------------------
   5-1  라벨 / 브랜드명(밑줄)      .pd_badge .pd_brand
   5-2  좌 텍스트 · 우 이미지 2단  .pd_cols .pd_cols_txt .pd_cols_img
   5-3  아이콘 박스 나열           .pd_iconbox > .box > .icon + .txt
   5-4  FAQ                        .pd_faq
   5-5  로고 + 본문 가로 배치      .pd_logo_txt > .logo + .pd_txt
   5-6  클로징 배너                .pd_outro
   ============================================================ */

/* ------------------------------------------------------------
   5-1. 라벨 / 브랜드명(밑줄 포함)
   인트로 상단의 "50's STYLE" 라벨 · 제품(브랜드)명 세트

   · 밑줄은 별도 요소를 두지 않고 .pd_brand 의 border-bottom 으로 그린다.
     display:table 이라 폭이 글자 길이에 맞춰지므로,
     제품명이 길어지거나 짧아져도 밑줄 길이가 자동으로 따라간다.
   · padding-bottom = 글자와 밑줄 사이 간격
     margin-bottom  = 밑줄과 아래 타이틀 사이 간격
   ------------------------------------------------------------ */
.pd_badge {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;}
.pd_brand {display:table; margin:24px 0 34px; padding-bottom:22px; border-bottom:1px solid #000; font-size:6rem; font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:#000;}

@media (max-width:1024px) {
  .pd_brand {margin:20px 0 28px; padding-bottom:18px; font-size:3.6rem;}
}

@media (max-width:768px) {
  .pd_badge {padding:5px 11px; font-size:1.6rem;}
  .pd_brand {margin:16px 0 22px; padding-bottom:14px; font-size:3rem;}
}

/* ------------------------------------------------------------
   5-2. 좌 텍스트 · 우 이미지 2단 레이아웃
   모바일에서는 세로로 쌓인다 (텍스트 → 이미지)
   .pd_cols_top 을 함께 쓰면 두 단이 위쪽 기준으로 정렬된다
   ------------------------------------------------------------ */
.pd_cols {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;}
.pd_cols.pd_cols_top {-webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;}
.pd_cols_txt {width:55%;}
.pd_cols_img {width:45%; text-align:center;}
.pd_cols_img img {display:block; width:100%; height:auto; margin:0 auto;}

@media (max-width:768px) {
  .pd_cols {display:block;}
  .pd_cols_txt {width:100%;}
  .pd_cols_img {width:100%; margin-top:50px;}
}

/* ------------------------------------------------------------
   5-3. 아이콘 박스 나열
   PC 가로 1열 / 모바일 2열. 박스 안은 [아이콘 | 구분선 | 텍스트]
   ------------------------------------------------------------ */
.pd_iconbox {display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:nowrap; flex-wrap:nowrap; gap:24px;}
.pd_iconbox .box {-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;}
.pd_iconbox .box .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;}
.pd_iconbox .box .icon img {max-width:100%;}
.pd_iconbox .box .txt {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;}
.pd_iconbox .box .txt: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) {
  .pd_iconbox {gap:14px;}
  .pd_iconbox .box {min-height:96px; padding:16px 14px;}
  .pd_iconbox .box .icon {width:50px;}
  .pd_iconbox .box .txt {margin-left:14px; padding-left:14px; font-size:1.4rem;}
}

@media (max-width:768px) {
  .pd_iconbox {-ms-flex-wrap:wrap; flex-wrap:wrap; gap:10px;}
  .pd_iconbox .box {-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;}
  /* 아이콘마다 비율이 달라 세로로 긴 아이콘이 혼자 커 보이므로
     모바일에서는 가로/세로를 함께 제한해 크기를 맞춘다 */
  .pd_iconbox .box .icon {width:38px;}
  .pd_iconbox .box .icon img {max-width:32px; max-height:36px;}
  .pd_iconbox .box .txt {margin-left:12px; padding-left:12px; font-size:1.3rem; line-height:1.55;}
  .pd_iconbox .box .txt:before {height:34px;}
}

@media (max-width:400px) {
  .pd_iconbox .box {padding:12px 10px;}
  .pd_iconbox .box .icon {width:34px;}
  .pd_iconbox .box .icon img {max-width:28px; max-height:32px;}
  .pd_iconbox .box .txt {margin-left:8px; padding-left:8px; font-size:1.1rem;}
}

/* ------------------------------------------------------------
   5-4. FAQ
   PC · 모바일 모두 클릭 아코디언 (.on 이 열린 상태)
   기본은 전체 닫힘 상태이며, 열린 항목만 회색 배경으로 표시된다.
   ------------------------------------------------------------ */
.pd_faq {margin-top:50px; border-top:1px solid #000;}
.pd_faq .faq_item {border-bottom:1px solid #000;}
.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; border-bottom:1px solid #ccc;} 
.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) {
  .pd_faq {margin-top:25px;}
  .pd_faq .faq_q {padding:16px 38px 16px 14px; font-size:1.4rem;}
  .pd_faq .faq_q .mark {margin-right:6px;}
  .pd_faq .faq_q .arrow {right:16px; width:8px; height:8px; margin-top:-6px; border-right-width:1px; border-bottom-width:1px;}
  .pd_faq .faq_a {padding:0 38px 18px 36px;}
  .pd_faq .faq_a p {font-size:1.4rem; line-height:1.7;}
}

/* ------------------------------------------------------------
   5-5. 로고 + 본문 가로 배치
   좌측 로고(브랜드 · 인증 마크 등) · 우측 본문. 모바일에서도 가로 유지
   ------------------------------------------------------------ */
.pd_logo_txt {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-top:45px;}
.pd_logo_txt .logo {-webkit-box-flex:0; -ms-flex:0 0 auto; flex:0 0 auto; width:90px;}
.pd_logo_txt .logo img {display:block; width:100%; height:auto;}
.pd_logo_txt .pd_txt {margin-top:0; margin-left:25px;}

@media (max-width:1024px) {
  .pd_logo_txt {margin-top:30px;}
  .pd_logo_txt .logo {width:74px;}
  .pd_logo_txt .pd_txt {margin-left:18px;}
}

@media (max-width:768px) {
  .pd_logo_txt {margin-top:22px;}
  .pd_logo_txt .logo {width:48px;}
  .pd_logo_txt .pd_txt {margin-left:16px;}
}

@media (max-width:400px) {
  .pd_logo_txt .logo {width:42px;}
  .pd_logo_txt .pd_txt {margin-left:12px;}
}

/* ------------------------------------------------------------
   5-6. 클로징 배너
   배경 밴드 위에 [좌 : 로고 + 카피 / 우 : 제품 이미지] 를 얹는다.
   · 2단 배치는 5-2 .pd_cols 를 그대로 쓰고 폭만 여기서 덮어쓴다.
   · 제품 이미지가 밴드 높이를 결정하고 하단에 맞물리므로
     PC 에서는 위/아래 여백을 주지 않는다.
   · 배경색과 이미지 크기(모바일)는 페이지마다 다르므로 페이지 전용 블록에 둔다.
   ------------------------------------------------------------ */
.pd_outro {overflow:hidden;}
.pd_outro .pd_cols_txt {width:64%;}
.pd_outro .logo {width:120px;}
.pd_outro .logo img {display:block; width:100%; height:auto;}
.pd_outro .pd_tit_s {margin-top:45px; font-size:3.7rem; font-weight:400; line-height:1.45;}
.pd_outro .pd_txt {margin-top:25px; font-size:1.6rem; color:#333;}
.pd_outro .visual_area {margin-left:auto;}
.pd_outro .visual_area img {display:block; width:100%; height:auto;}

@media (max-width:1024px) {
  .pd_outro .pd_cols_txt {width:66%;}
  .pd_outro .logo {width:100px;}
  .pd_outro .pd_tit_s {margin-top:32px; font-size:3.1rem;}
  .pd_outro .pd_txt {margin-top:18px;}
}

@media (max-width:768px) {
  /* 모바일은 카피 → 이미지 순으로 쌓이므로 위쪽 여백이 필요하다 */
  .pd_outro {padding-top:45px;}
  .pd_outro .pd_cols_txt {width:100%;}
  .pd_outro .logo {width:90px;}
  .pd_outro .pd_tit_s {margin-top:30px; font-size:3.3rem;}
  .pd_outro .pd_txt {margin-top:20px; font-size:1.7rem; line-height:1.9;}
  .pd_outro .visual_area {width:100%; margin-top:20px;}
}

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


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

/* -------------------- 인트로 (카피 + 메인 비주얼) -------------------- */
/* 레이아웃 : 5-2 .pd_cols  /  라벨·브랜드명(밑줄) : 5-1 .pd_badge .pd_brand
   이 페이지에서만 다른 값(타이틀 크기, 본문 여백, 모바일 이미지 폭)만 남긴다 */
/* 타이틀이 커지면서 기본 단 폭(55%)으로는 "가장 아름답게 담아내는" 이
   한 줄에 들어가지 않으므로 텍스트 단을 조금 넓힌다 */
.comp_wbf01_intro .pd_cols_txt {width:62%;}
.comp_wbf01_intro .pd_cols_img {width:36%;}
.comp_wbf01_intro .pd_tit {font-size:6.8rem; line-height:1.45;}
.comp_wbf01_intro .pd_txt {margin-top:34px;}

@media (max-width:1024px) {
  .comp_wbf01_intro .pd_tit {font-size:4.4rem;}
  .comp_wbf01_intro .pd_txt {margin-top:28px;}
}

@media (max-width:768px) {
  .comp_wbf01_intro .pd_cols_txt {width:100%;}
  .comp_wbf01_intro .pd_cols_img {width:100%;}
  .comp_wbf01_intro .pd_tit {font-size:3.6rem; line-height:1.5;}
  .comp_wbf01_intro .pd_txt {margin-top:22px; line-height:1.8;}
  .comp_wbf01_intro .pd_cols_img img {max-width:72%;}
}

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

/* -------------------- 핵심 특징 아이콘 -------------------- */
/* 공통 컴포넌트 5-3 .pd_iconbox 만 사용 (페이지 전용 스타일 없음) */
@media (max-width:400px) {
  /* 소형 모바일에서는 모바일 전용 줄바꿈을 해제 */
  .comp_wbf01 .pd_mo_br {display:none;}
}
/* -------------------- 컬러 라인업 이미지 -------------------- */
/* 공통 클래스 [3] .pd_media_wide 만 사용 (페이지 전용 스타일 없음) */

/* -------------------- 라이프스타일 갤러리 -------------------- */
.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;}
}

/* -------------------- 지속가능성 (회색 밴드) -------------------- */
/* 밴드 : [1] .pd_band .pd_band_pad .pd_bg_gray
   레이아웃 : 5-2 .pd_cols(.pd_cols_top)  /  로고+본문 : 5-5 .pd_logo_txt
   이 블록에는 이 페이지에서만 다른 단 폭 · 모바일 여백만 남긴다 */
.comp_wbf01_eco .pd_cols_txt {width:46%;}
.comp_wbf01_eco .pd_cols_img {width:40%;}

@media (max-width:1024px) {
  .comp_wbf01_eco .pd_cols_txt {width:50%;}
  .comp_wbf01_eco .pd_cols_img {width:44%;}
}

@media (max-width:768px) {
  /* 텍스트만 container_fixed 보다 한 단계 더 안쪽으로 들여쓴다 */
  .comp_wbf01_eco .pd_cols_txt {width:100%; padding:0 20px;}
  .comp_wbf01_eco .pd_cols_img {width:100%; margin-top:40px;}
}

@media (max-width:400px) {
  .comp_wbf01_eco .pd_cols_txt {padding:0 10px;}
}

/* -------------------- 컬러 -------------------- */
.comp_wbf01_color_head .pd_tit {font-size:6.4rem; 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.9rem;}
  .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.8rem;}
  .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 순서 그대로 텍스트 → 이미지 → 특징 */
/* 좌측 폭(52%)은 커진 타이틀 "오래도록 변함없이" 가 한 줄로 들어가는 기준 */
.comp_wbf01_material .item {display:grid; grid-template-columns:52% 48%; 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;}

/* -------------------- 클로징 배너 -------------------- */
/* 레이아웃·타이포 : 공통 컴포넌트 5-6 .pd_outro + 5-2 .pd_cols
   이 블록에는 배경색과 모바일 보틀 이미지 위치/크기만 남긴다 */
.comp_wbf01_outro {background:#dce9f5;}

@media (max-width:768px) {
  /* 보틀을 오른쪽으로 밀어 배치 (padding-left = 왼쪽 여백 비율) */
  .comp_wbf01_outro .visual_area {padding-left:30%;}
  .comp_wbf01_outro .visual_area img {max-width:240px; margin:0 auto;}
}

/* -------------------- 제품 정보 -------------------- */
/* 사이즈 이미지 : [3] .pd_media .pd_media_center  /  FAQ 앞 여백 : [1] .pd_sec_gap
   타이틀 옆 영문 : [2] .pd_tit_en + [4] .pd_mo_in
   이 블록에는 사이즈 이미지 폭만 남긴다 */
.comp_wbf01_info .spec_area {max-width:380px;}

@media (max-width:768px) {
  .comp_wbf01_info .spec_area {width:60%; max-width:none;}
}
/* ============================================================
   //product_detail_2026.css
   ============================================================ */