@charset "utf-8";
/* ==========================================================================
   브랜드 페이지 (모바일) — Areas/Mobile/Views/Product/brand/*.cshtml
   시안 : Figma 유한킴벌리 브랜드 페이지 디자인 / mo_디펜드 (523:1050)
   기준 : 캔버스 375px, 좌우 여백 20px. root font-size 18px 이므로 rem = px / 18.
   PC(css/re2022/brand.css) 와 클래스 이름을 맞추되, 레이아웃은 모바일 시안을 따른다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   공통 헤더(#header)
   - 다른 모바일 페이지는 첫 블록이 .top_banner(전면 배경 이미지)라, 헤더가 그 위에
     얹히는 것을 전제로 배경 투명 · 흰 로고 · 흰 햄버거가 기본이다.
   - 브랜드 상세는 그 배너가 없어 흰 바탕 위에 흰 헤더가 놓인다. 스크롤해서
     #header.scroll 이 붙기 전까지 로고도 햄버거도 보이지 않는다.
   - brand.css 는 브랜드 상세에서만 불러오니 여기서 .scroll 과 같은 값으로 고정한다.
   -------------------------------------------------------------------------- */
#header.renewal22 .inner .top {
  background-color: #fff;
}
#header.renewal22:after {
  background-color: rgba(221, 221, 221, 0.5);
}
#header.renewal22 .inner .top .logo a {
  background-image: url('../../images/main2020/common/logo_scroll.png');
}
#header.renewal22 .inner .top .btn_menu:after {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   Breadcrumb — 시안 523:1064 (h50, 좌측 뒤로가기 9x7, 우측 경로 10px)
   PC(.brand-bread) 와 같은 구조를 모바일 치수로 옮긴다.
   -------------------------------------------------------------------------- */
#container.renewal22 .brand-bread {
  /* 공통 헤더(#header)는 position:fixed 60px 다. 브랜드 상세는 top_banner 같은
     전면 배경 블록이 없어서 breadcrumb 이 그대로 헤더 밑에 깔린다. 그만큼 내린다. */
  margin-top: 3.33333333rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.77777778rem;
  padding: 0 1.11111111rem;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
}
#container.renewal22 .brand-bread .brand-bread-back {
  display: block;
  width: 0.5rem;
  height: 0.38888889rem;
}
#container.renewal22 .brand-bread .brand-bread-back img {
  display: block;
  width: 100%;
  height: 100%;
}
#container.renewal22 .brand-bread .brand-bread-path {
  display: flex;
  align-items: center;
  gap: 0.33333333rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#container.renewal22 .brand-bread .brand-bread-path li {
  display: flex;
  align-items: center;
  gap: 0.33333333rem;
  font-size: 0.55555556rem;
  line-height: 1.5;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  list-style: none;
}
#container.renewal22 .brand-bread .brand-bread-path li a {
  color: #666;
}
#container.renewal22 .brand-bread .brand-bread-path li + li:before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.33333333rem;
  height: 0.33333333rem;
  background: url(/Images/renewal2022/brand/ico-chevron.svg) no-repeat 50% 50%;
  background-size: 0.33333333rem 0.33333333rem;
}
#container.renewal22 .brand-bread .brand-bread-path li.current {
  font-weight: 700;
  color: #111;
}

/* --------------------------------------------------------------------------
   Depth Bar (브랜드 간 이동) — 시안 851:1112 (h60, 13px, 좌우 스크롤,
   현재 항목 #009FE3 Bold + 3px 밑줄). 12개라 가로 스크롤로 둔다.
   -------------------------------------------------------------------------- */
#container.renewal22 .brand-depth {
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container.renewal22 .brand-depth::-webkit-scrollbar {
  display: none;
}
#container.renewal22 .brand-depth .brand-depth-inner {
  display: flex;
  align-items: stretch;
  width: max-content;
  padding: 0 1.11111111rem;
  box-sizing: border-box;
}
#container.renewal22 .brand-depth .brand-depth-inner .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.33333333rem;
  padding: 0 1.11111111rem;
  font-size: 0.72222222rem;
  line-height: 1.2;
  font-weight: 400;
  color: #111;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  box-sizing: border-box;
}
#container.renewal22 .brand-depth .brand-depth-inner .btn.current {
  font-weight: 700;
  color: #009FE3;
  border-bottom-color: #009FE3;
}

/* 폰트는 선언하지 않는다 — PC(css/re2022/brand.css)와 같이 사이트 기본
   글꼴(common-2022.css 의 "Noto Sans KR")을 그대로 상속받는다.
   시안의 'YK Green Forest' 는 피그마 내부 이름이고, 이 프로젝트에 등록된
   푸른숲체의 실제 family 는 'YKPureunSup'(fontface.css)이며 브랜드 페이지에는 쓰지 않는다. */

/* 섹션 공통 — 시안 padding 36 / 40 */
#container.renewal22 .brand-page .brand-sec {
  padding: 2rem 0 2.22222222rem;
  background-color: #fff;
}
#container.renewal22 .brand-page .brand-inner {
  padding: 0 1.11111111rem;
}

/* 섹션 머리 — 아이브로우 13/20 #009FE3, 제목 16/24 #111 */
#container.renewal22 .brand-page .brand-eyebrow {
  font-size: 0.72222222rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #009FE3;
  margin: 0;
}
#container.renewal22 .brand-page .brand-sec-tit {
  margin: 0.55555556rem 0 0;
  font-size: 0.88888889rem;
  line-height: 1.33333333rem;
  font-weight: 700;
  color: #111;
}
/* 본문 리드 — 12/22 #111 */
#container.renewal22 .brand-page .brand-lead {
  margin: 0.55555556rem 0 0;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #111;
}

/* ── 01 브랜드 스토리 : 상단 BI ───────────────────────────────────
   335 × 168 흰 박스. 아래 여백 40px 은 브랜드 8종 시안이 모두 같다
   (디펜드 시안 525:1062 만 20px 이나 이후 시안이 40 으로 굳어 맞춘다).
   로고 크기는 아트워크 비율이 제각각이라 브랜드마다 상한을 따로 잰다 —
   아래 값은 상한을 재지 않은 브랜드를 위한 기본값이다. */
#container.renewal22 .brand-page .brand-bi {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.33333333rem;
  margin: 0 1.11111111rem 2.22222222rem;
  background-color: #fff;
}
#container.renewal22 .brand-page .brand-bi img {
  display: block;
  width: auto;
  height: auto;
  max-width: 87.28%;
  max-height: 100%;
}

/* 디펜드 로고 — 시안 665:2121 실측 277 × 135 (82.69% × 80.36%).
   아트워크가 가로로 길어(비율 2.05) 기본 상한 87.28% 로는 5% 크게 나온다. */
#container.renewal22 .brand-page.brand-depend .brand-bi img {
  max-width: 82.69%;
  max-height: 80.36%;
}

/* ── 02 디펜드 케어 : 가로 스크롤 카드 ───────────────────────────
   시안 541:1330 rail(padding-left 20) > 541:1331 track(gap 12, padding-right 20)
   > 카드 260 × 480. 좌우 스크롤 안내는 society 와 같은 문구를 쓴다. */
#container.renewal22 .brand-page .brand-care {
  background-color: #F2F9FD;
}
#container.renewal22 .brand-page .brand-care-rail {
  margin-top: 1.11111111rem;
  padding-left: 1.11111111rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container.renewal22 .brand-page .brand-care-rail::-webkit-scrollbar {
  display: none;
}
#container.renewal22 .brand-page .brand-care-list {
  display: flex;
  align-items: stretch;
  gap: 0.66666667rem;
  padding-right: 1.11111111rem;
  width: max-content;
}
#container.renewal22 .brand-page .brand-care-card {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 14.44444444rem;
  min-height: 26.66666667rem;
  padding: 1.22222222rem 1.11111111rem;
  background-color: #E6F5FC;
  text-align: left;
}
#container.renewal22 .brand-page .brand-care-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.44444444rem;
  height: 2.44444444rem;
  border-radius: 50%;
  background-color: #009FE3;
}
#container.renewal22 .brand-page .brand-care-ico img {
  display: block;
  width: 1.22222222rem;
  height: 1.22222222rem;
}
#container.renewal22 .brand-page .brand-care-tit {
  margin: 0.77777778rem 0 0;
  font-size: 0.88888889rem;
  line-height: 1.33333333rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-care-txt {
  margin: 0.77777778rem 0 0;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-care-list2 {
  margin: 0.55555556rem 0 0;
}
#container.renewal22 .brand-page .brand-care-list2 > li {
  position: relative;
  padding-left: 0.44444444rem;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-care-list2 > li:before {
  content: "\00B7";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

/* 좌우 스크롤 안내 — society 의 .scroll-wrap i + p 와 같은 모양 */
#container.renewal22 .brand-page .brand-scroll-hint {
  margin: 0.55555556rem 1.11111111rem 0;
  text-align: left;
}
#container.renewal22 .brand-page .brand-scroll-hint i {
  display: inline-block;
  width: 1.05555556rem;
  height: 0.55555556rem;
  margin-right: 0.55555556rem;
  vertical-align: middle;
  background: url('/Areas/Mobile/images/renewal2022/society/ico-lr.png') no-repeat;
  background-size: contain;
}
#container.renewal22 .brand-page .brand-scroll-hint span {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.61111111rem;
  line-height: 0.61111111rem;
  font-weight: 500;
  color: #222;
}

/* ── 03 라인업 / 04 기관·전문 채널 ────────────────────────────────
   시안 529:1062. 블록마다 block_head(제목 16/24 + 태그) + rail(가로스크롤,
   카드 260 · gap 12) 구성. 카드는 mo/제품카드(527:1062) 컴포넌트를 따른다. */
/* 섹션 리드 ↔ 첫 블록, 블록 ↔ 블록 모두 40px (시안 텍스트 y190 → blocks y230) */
#container.renewal22 .brand-page .brand-lineup .brand-inner {
  margin-bottom: 2.22222222rem;
}
#container.renewal22 .brand-page .brand-cat + .brand-cat,
#container.renewal22 .brand-page .brand-cat + .brand-why,
#container.renewal22 .brand-page .brand-why + .brand-cat {
  margin-top: 2.22222222rem;
}
#container.renewal22 .brand-page .brand-cat-head {
  display: flex;
  align-items: center;
  gap: 0.44444444rem;
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page .brand-cat-tit {
  margin: 0;
  font-size: 0.88888889rem;
  line-height: 1.33333333rem;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}
/* 태그 — h22 / radius 11 / px10 / 11px Bold 흰색 */
#container.renewal22 .brand-page .brand-cat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.22222222rem;
  padding: 0 0.55555556rem;
  border-radius: 0.61111111rem;
  background-color: #009FE3;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
/* 기관·전문 채널(04)의 태그는 외곽선형 — 시안 531:1137 */
#container.renewal22 .brand-page .brand-cat-chip.is-line {
  border: 1px solid #009FE3;
  background-color: transparent;
  color: #009FE3;
}
#container.renewal22 .brand-page .brand-cat-desc {
  margin: 0.55555556rem 0 0;
  padding: 0 1.11111111rem;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-cat-note {
  margin: 0.55555556rem 0 0;
  padding: 0 1.11111111rem;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
}

/* 제품 카드 가로 스크롤 */
#container.renewal22 .brand-page .brand-prd-rail {
  margin-top: 1.11111111rem;
  padding-left: 1.11111111rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container.renewal22 .brand-page .brand-prd-rail::-webkit-scrollbar {
  display: none;
}
#container.renewal22 .brand-page .brand-prd-list {
  display: flex;
  align-items: flex-start;
  gap: 0.66666667rem;
  padding-right: 1.11111111rem;
  width: max-content;
}
#container.renewal22 .brand-page .brand-prd {
  flex: 0 0 auto;
  width: 14.44444444rem;
  text-align: left;
}
/* 이미지 슬롯 — 정사각 · 1px #E5E5E5. 제품마다 원본 비율이 달라
   폭·높이 상한만 두고 비율은 각 이미지가 유지하게 한다(시안 85% × 78%). */
#container.renewal22 .brand-page .brand-prd-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 1px solid #E5E5E5;
  background-color: #fff;
}
#container.renewal22 .brand-page .brand-prd-img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 85%;
  max-height: 78%;
}
/* 카드가 하나뿐인 블록(편안한 언더웨어)은 가로 스크롤 없이 전폭 — 시안 531:1200 */
#container.renewal22 .brand-page .brand-prd-wide {
  margin-top: 1.11111111rem;
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page .brand-prd-wide .brand-prd {
  width: 100%;
}
#container.renewal22 .brand-page .brand-prd-tit {
  margin: 0.55555556rem 0 0;
  font-size: 0.72222222rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-prd-txt {
  margin: 0.55555556rem 0 0;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
}
/* 설명이 두 문단인 카드(배뇨·간병 케어)는 시안에서 한 덩어리 텍스트다.
   문단 사이를 띄우지 않고 행간으로만 이어지게 한다. */
#container.renewal22 .brand-page .brand-prd-txt + .brand-prd-txt {
  margin-top: 0;
}

/* 요실금 전용 제품이 필요한 이유 — 2 × 2 그리드 */
#container.renewal22 .brand-page .brand-why-desc {
  margin: 0.55555556rem 0 0;
  padding: 0 1.11111111rem;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-why-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.44444444rem;
  margin-top: 1.11111111rem;
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page .brand-why-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 6.66666667rem;
  padding: 1rem 0.66666667rem;
  box-sizing: border-box;
  border: 1px solid #E5E5E5;
  background-color: #fff;
}
#container.renewal22 .brand-page .brand-why-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #009FE3;
}
#container.renewal22 .brand-page .brand-why-ico img {
  display: block;
  width: 1rem;
  height: 1rem;
}
#container.renewal22 .brand-page .brand-why-point-txt {
  margin: 0.55555556rem 0 0;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 700;
  color: #666;
  text-align: center;
}

/* 04-1 섹션 배경 — 시안 실측 #F2F9FC */
#container.renewal22 .brand-page .brand-finder {
  background-color: #F2F9FC;
}
/* 리드 ↔ 첫 step 사이 (시안 텍스트 y190 → blocks y230) */
#container.renewal22 .brand-page .brand-finder .brand-inner {
  margin-bottom: 2.22222222rem;
}

/* ── 04-1 제품 찾기 ───────────────────────────────────────────────
   시안 532:1154. PC 의 3단계 선택을 모바일은 가로 스크롤 + 표 앵커 이동으로 옮긴다. */
#container.renewal22 .brand-page .brand-step + .brand-step {
  margin-top: 2.22222222rem;
}
/* 표 블록은 앞 블록의 '좌우로 움직여서' 안내와 붙지 않도록 더 띄운다 */
#container.renewal22 .brand-page .brand-step + .brand-fblock,
#container.renewal22 .brand-page .brand-fblock + .brand-fblock,
#container.renewal22 .brand-page .brand-fblock + .brand-guide-note,
#container.renewal22 .brand-page .brand-guide-note + .brand-guide-forms {
  margin-top: 3.33333333rem;
}
/* step 머리 — 배지 22px + 제목 14/20 + 설명 11/19 */
#container.renewal22 .brand-page .brand-step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.55555556rem;
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page .brand-step-no {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.22222222rem;
  height: 1.22222222rem;
  border-radius: 50%;
  background-color: #009FE3;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 700;
  color: #fff;
}
#container.renewal22 .brand-page .brand-step-tit h3 {
  margin: 0;
  font-size: 0.77777778rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-step-tit p {
  margin: 0.16666667rem 0 0;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
}
/* step 본문 가로 스크롤 */
#container.renewal22 .brand-page .brand-step-rail {
  margin-top: 1.11111111rem;
  padding-left: 1.11111111rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container.renewal22 .brand-page .brand-step-rail::-webkit-scrollbar {
  display: none;
}
#container.renewal22 .brand-page .brand-opts,
#container.renewal22 .brand-page .brand-tcards {
  display: flex;
  align-items: stretch;
  gap: 0.66666667rem;
  padding-right: 1.11111111rem;
  width: max-content;
}
/* step 1 — 선택지 카드 260 × 154 */
#container.renewal22 .brand-page .brand-opt {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 14.44444444rem;
  min-height: 8.55555556rem;
  padding: 0.88888889rem 0.88888889rem 0.77777778rem;
  background-color: #E6F5FC;
  text-align: left;
}
#container.renewal22 .brand-page .brand-opt-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.22222222rem;
  height: 1.22222222rem;
  border-radius: 50%;
  background-color: #009FE3;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 700;
  color: #fff;
}
#container.renewal22 .brand-page .brand-opt-tit {
  margin: 0.44444444rem 0 0;
  font-size: 0.72222222rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-opt-txt {
  margin: 0.44444444rem 0 0;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-opt-link {
  display: block;
  margin-top: auto;
  padding-top: 0.44444444rem;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 700;
  color: #009FE3;
}
/* step 2 — 대상 2 × 2 그리드 (시안 532:1204). 카드 h160, 링 40px + 아이콘 18px */
#container.renewal22 .brand-page .brand-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.44444444rem;
  margin-top: 1.11111111rem;
  padding: 0 1.11111111rem;
}
/* 시안은 세로 가운데 정렬이라 캡션이 붙은 '도움이 필요한 분' 카드만 링이 위로
   올라간다. 네 칸의 링 높이를 맞추기 위해 위 정렬로 두고 상단 여백을 고정한다. */
#container.renewal22 .brand-page .brand-who {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 8.88888889rem;
  padding: 1.66666667rem 0.66666667rem 1.11111111rem;
  background-color: #E6F5FC;
  text-align: center;
}
#container.renewal22 .brand-page .brand-who-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.22222222rem;
  height: 2.22222222rem;
  border-radius: 50%;
  background-color: #009FE3;
}
#container.renewal22 .brand-page .brand-who-ico img {
  display: block;
  width: 1rem;
  height: 1rem;
}
#container.renewal22 .brand-page .brand-who-tit {
  margin: 0.55555556rem 0 0;
  font-size: 0.72222222rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-who-txt {
  margin: 0.27777778rem 0 0;
  font-size: 0.58333333rem;
  line-height: 1.11111111rem;
  font-weight: 500;
  color: #666;
}

/* step 3 — 흡수량 카드 118 × 125 */
/* 문구 줄 수가 1~3줄로 달라 가운데 정렬이면 물방울 높이가 제각각이 된다.
   위 정렬 + 아이콘 줄 고정 높이로 일곱 칸의 물방울을 같은 선에 맞춘다. */
#container.renewal22 .brand-page .brand-tcard {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 6.55555556rem;
  min-height: 6.94444444rem;
  padding: 1rem 0.55555556rem 0.66666667rem;
  background-color: #E6F5FC;
  text-align: center;
}
#container.renewal22 .brand-page .brand-tcard-ico,
#container.renewal22 .brand-page .brand-tcard-drops {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.22222222rem;
}
#container.renewal22 .brand-page .brand-tcard-ico img {
  display: block;
  width: 1.22222222rem;
  height: 1.22222222rem;
}
#container.renewal22 .brand-page .brand-tcard-drops {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.05555556rem;
}
#container.renewal22 .brand-page .brand-tcard-drops img {
  display: block;
  width: 0.61111111rem;
  height: 0.72222222rem;
}
#container.renewal22 .brand-page .brand-tcard-tit {
  margin: 0.44444444rem 0 0;
  font-size: 0.58333333rem;
  line-height: 1.11111111rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-tcard-txt {
  margin: 0.16666667rem 0 0;
  font-size: 0.55555556rem;
  line-height: 1rem;
  font-weight: 500;
  color: #666;
}

/* 표 A~D — 제목(letter + 이름) + 가로 스크롤. 시안 699:2110 : 폭 580,
   열폭 80 / 230 / 90 / 180, 위 2px #111 · 헤더 아래 1px #111 · 행 1px #ddd */
#container.renewal22 .brand-page .brand-fblock-head {
  display: flex;
  align-items: center;
  gap: 0.44444444rem;
  margin-bottom: 0.55555556rem;
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page .brand-fblock-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.22222222rem;
  height: 1.22222222rem;
  border-radius: 50%;
  background-color: #009FE3;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 700;
  color: #fff;
}
#container.renewal22 .brand-page .brand-fblock-tit {
  margin: 0;
  font-size: 0.77777778rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-ftable-scroll {
  padding-left: 1.11111111rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container.renewal22 .brand-page .brand-ftable-scroll::-webkit-scrollbar {
  display: none;
}
#container.renewal22 .brand-page .brand-ftable-box {
  padding-right: 1.11111111rem;
  width: max-content;
}
#container.renewal22 .brand-page .brand-finder-table {
  width: 32.22222222rem;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 2px solid #111;
  background-color: transparent;
}
#container.renewal22 .brand-page .brand-finder-table .brand-col-target { width: 4.44444444rem; }
#container.renewal22 .brand-page .brand-finder-table .brand-col-amount { width: 5rem; }
#container.renewal22 .brand-page .brand-finder-table .brand-col-prd { width: 10rem; }
/* 표 D — 추천 제품 문구('필요에 따라 테이프형 기저귀와 … 함께 사용 가능')가
   한 줄에 들어가도록 시안 480 → 630 으로 넓힌다. 사용 상황 280 + 추천 제품 350. */
#container.renewal22 .brand-page .brand-finder-table.is-case { width: 35rem; }
#container.renewal22 .brand-page .brand-finder-table .brand-col-case-d { width: 15.55555556rem; }
#container.renewal22 .brand-page .brand-finder-table.is-case tbody td { white-space: nowrap; }
#container.renewal22 .brand-page .brand-finder-table th,
#container.renewal22 .brand-page .brand-finder-table td {
  padding: 0.55555556rem;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #111;
  text-align: left;
  vertical-align: middle;
}
#container.renewal22 .brand-page .brand-finder-table th:first-child,
#container.renewal22 .brand-page .brand-finder-table td:first-child {
  border-left: 0;
}
#container.renewal22 .brand-page .brand-finder-table thead th {
  font-weight: 700;
  text-align: center;
}
#container.renewal22 .brand-page .brand-finder-table thead tr:last-child th {
  border-bottom: 1px solid #111;
}
#container.renewal22 .brand-page .brand-finder-table tbody tr:last-child th,
#container.renewal22 .brand-page .brand-finder-table tbody tr:last-child td {
  border-bottom: 1px solid #111;
}
/* 행 머리 셀도 기본은 본문과 같은 Medium · 좌측 (시안 표 C·D) */
#container.renewal22 .brand-page .brand-finder-table tbody th {
  font-weight: 500;
  text-align: left;
}
/* '사용 대상'(여성·남성·산모) 열을 가진 표 A·B 만 Bold · 가운데 (시안 표 A) */
#container.renewal22 .brand-page .brand-finder-table.is-target tbody th {
  font-weight: 700;
  text-align: center;
}
#container.renewal22 .brand-page .brand-finder-table td.is-center,
#container.renewal22 .brand-page .brand-finder-table th.is-center {
  text-align: center;
}
#container.renewal22 .brand-page .brand-finder-table .brand-fprd {
  display: flex;
  align-items: center;
  gap: 0.44444444rem;
}
#container.renewal22 .brand-page .brand-finder-table .brand-fprd img {
  display: block;
  width: 2.22222222rem;
  height: auto;
}
#container.renewal22 .brand-page .brand-finder-table .brand-fprd-tit {
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  color: #111;
}
/* 흡수량 — 단일 값은 한 줄, 범위(is-two)는 위아래 두 줄로 쌓는다(시안 886:1236) */
#container.renewal22 .brand-page .brand-finder-table .brand-drops {
  display: inline-flex;
  align-items: center;
  gap: 0.05555556rem;
}
#container.renewal22 .brand-page .brand-finder-table .brand-drops.is-two {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
#container.renewal22 .brand-page .brand-finder-table .brand-drops-row {
  display: flex;
  gap: 0.05555556rem;
}
#container.renewal22 .brand-page .brand-finder-table .brand-drops img {
  display: block;
  width: 0.55555556rem;
  height: 0.66666667rem;
}
#container.renewal22 .brand-page .brand-finder-table .brand-night img {
  display: block;
  width: 0.72222222rem;
  height: 0.72222222rem;
}

/* 알아두세요 / 제품 형태 안내 */
#container.renewal22 .brand-page .brand-guide-tit {
  margin: 0 0 0.55555556rem;
  padding: 0 1.11111111rem;
  font-size: 0.77777778rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}
/* 알아두세요! — 시안 533:1339 : 채움 박스(#E6F5FC, px16 py18), 좌우 20px 여백 안 */
#container.renewal22 .brand-page .brand-guide-note {
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page .brand-guide-box {
  box-sizing: border-box;
  padding: 1rem 0.88888889rem;
  background-color: #E6F5FC;
}
#container.renewal22 .brand-page .brand-guide-box .brand-guide-tit {
  margin: 0 0 0.55555556rem;
  padding: 0;
  font-size: 0.72222222rem;
  line-height: 1.11111111rem;
}
#container.renewal22 .brand-page .brand-guide-note li {
  position: relative;
  padding-left: 0.44444444rem;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
  text-align: left;
}
#container.renewal22 .brand-page .brand-guide-note li:before {
  content: "\00B7";
  position: absolute;
  left: 0;
  top: 0;
}
#container.renewal22 .brand-page .brand-guide-note li + li {
  margin-top: 0.22222222rem;
}
#container.renewal22 .brand-page .brand-forms-rail {
  padding-left: 1.11111111rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container.renewal22 .brand-page .brand-forms-rail::-webkit-scrollbar {
  display: none;
}
#container.renewal22 .brand-page .brand-forms {
  display: flex;
  align-items: flex-start;
  gap: 0.66666667rem;
  padding-right: 1.11111111rem;
  width: max-content;
}
#container.renewal22 .brand-page .brand-form {
  flex: 0 0 auto;
  width: 8.33333333rem;
  text-align: left;
}
#container.renewal22 .brand-page .brand-form-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 1px solid #E5E5E5;
  background-color: #fff;
}
#container.renewal22 .brand-page .brand-form-img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 85%;
  max-height: 78%;
}
#container.renewal22 .brand-page .brand-form-tit {
  margin: 0.44444444rem 0 0;
  font-size: 0.66666667rem;
  line-height: 1.05555556rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-form-txt {
  margin: 0.22222222rem 0 0;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
}

/* ── 05 제품 선택 기준 ─────────────────────────────────────────────
   시안 534:1154 / 867:2400 : 흰 배경, 표 1개(750px).
   열폭 130 / 80 / 170 / 200 / 170. 서식은 04-1 표(brand-finder-table)와 같다. */
#container.renewal22 .brand-page .brand-select .brand-inner {
  margin-bottom: 1.11111111rem;
}
#container.renewal22 .brand-page .brand-select-table {
  width: 41.66666667rem;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 2px solid #111;
  background-color: transparent;
}
#container.renewal22 .brand-page .brand-select-table .brand-col-sel-form  { width: 7.22222222rem; }
#container.renewal22 .brand-page .brand-select-table .brand-col-sel-who   { width: 4.44444444rem; }
#container.renewal22 .brand-page .brand-select-table .brand-col-sel-state { width: 9.44444444rem; }
#container.renewal22 .brand-page .brand-select-table .brand-col-sel-case  { width: 11.11111111rem; }
#container.renewal22 .brand-page .brand-select-table .brand-col-sel-prd   { width: 9.44444444rem; }
#container.renewal22 .brand-page .brand-select-table th,
#container.renewal22 .brand-page .brand-select-table td {
  padding: 0.55555556rem;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #111;
  text-align: left;
  vertical-align: middle;
}
#container.renewal22 .brand-page .brand-select-table th:first-child,
#container.renewal22 .brand-page .brand-select-table td:first-child {
  border-left: 0;
}
#container.renewal22 .brand-page .brand-select-table thead th {
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #111;
}
/* 제품 형태(행 머리)는 Bold · 가운데, 주요 사용 대상 열은 가운데 */
#container.renewal22 .brand-page .brand-select-table tbody th {
  font-weight: 700;
  text-align: center;
}
#container.renewal22 .brand-page .brand-select-table tbody td:first-of-type {
  text-align: center;
}
#container.renewal22 .brand-page .brand-select-table tbody tr:last-child th,
#container.renewal22 .brand-page .brand-select-table tbody tr:last-child td {
  border-bottom: 1px solid #111;
}

/* ── 06 사이즈 선택 가이드 ─────────────────────────────────────────
   시안 536:1156 : 배경 #F2FAFE, 표 620px(110 / 255 / 255), 하단 각주. */
#container.renewal22 .brand-page .brand-size {
  background-color: #F2FAFE;
}
#container.renewal22 .brand-page .brand-size .brand-inner {
  margin-bottom: 1.11111111rem;
}
/* 시안 620(110/255/255) 기준이나 본문 줄바꿈이 잦아 두 열을 255 → 300 으로 넓힌다.
   합계 110 + 300 + 300 = 710 */
#container.renewal22 .brand-page .brand-size-table {
  width: 39.44444444rem;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 2px solid #111;
  background-color: transparent;
}
#container.renewal22 .brand-page .brand-size-table .brand-col-type { width: 6.11111111rem; }
#container.renewal22 .brand-page .brand-size-table .brand-col-std  { width: 16.66666667rem; }
#container.renewal22 .brand-page .brand-size-table th,
#container.renewal22 .brand-page .brand-size-table td {
  padding: 0.55555556rem;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #111;
  text-align: left;
  vertical-align: middle;
}
#container.renewal22 .brand-page .brand-size-table th:first-child,
#container.renewal22 .brand-page .brand-size-table td:first-child {
  border-left: 0;
}
#container.renewal22 .brand-page .brand-size-table thead th {
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #111;
}
/* 형태(행 머리)만 Bold · 가운데 */
#container.renewal22 .brand-page .brand-size-table tbody th {
  font-weight: 700;
  text-align: center;
}
#container.renewal22 .brand-page .brand-size-table tbody tr:last-child th,
#container.renewal22 .brand-page .brand-size-table tbody tr:last-child td {
  border-bottom: 1px solid #111;
}
#container.renewal22 .brand-page .brand-table-note {
  margin: 1.11111111rem 0 0;
  padding: 0 1.11111111rem;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
  text-align: left;
}

/* ── 07 자주 묻는 질문 ─────────────────────────────────────────────
   시안 537:1178 : 닫힘은 흰 배경 + 1px #E5E5E5, 열림은 머리 #009FE3(흰 글자) +
   본문 #E6F5FC. 항목 간 10px, 열린 항목 아래 20px.
   PC 와 같이 <details>/<summary> 로 두어 JS 없이 열고 닫는다. */
#container.renewal22 .brand-page .brand-faq-list {
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page .brand-faq-item {
  margin-bottom: 0.55555556rem;
}
#container.renewal22 .brand-page .brand-faq-item[open] {
  margin-bottom: 1.11111111rem;
}
#container.renewal22 .brand-page .brand-faq-item:last-child {
  margin-bottom: 0;
}
#container.renewal22 .brand-page .brand-faq-q {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.55555556rem;
  padding: 0.72222222rem 0.88888889rem;
  border: 1px solid #E5E5E5;
  background-color: #fff;
  list-style: none;
  cursor: pointer;
}
#container.renewal22 .brand-page .brand-faq-q::-webkit-details-marker {
  display: none;
}
#container.renewal22 .brand-page .brand-faq-q-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72222222rem;
  line-height: 1.16666667rem;
  font-weight: 700;
  color: #111;
  text-align: left;
}
#container.renewal22 .brand-page .brand-faq-arrow {
  flex: 0 0 auto;
  width: 0.66666667rem;
  height: 0.66666667rem;
  background: url(/Images/renewal2022/brand/ico-chevron.svg) no-repeat 50% 50%;
  background-size: 0.66666667rem 0.66666667rem;
}
/* 열린 항목 — 머리 파랑, 화살표 뒤집기 */
#container.renewal22 .brand-page .brand-faq-item[open] .brand-faq-q {
  border-color: #009FE3;
  background-color: #009FE3;
}
#container.renewal22 .brand-page .brand-faq-item[open] .brand-faq-q-txt {
  color: #fff;
}
/* 열린 머리는 파란 배경이라 화살표를 흰색으로 반전시킨다.
   (아이콘 색만 바꾸면 되므로 흰색 전용 SVG 를 따로 두지 않는다) */
#container.renewal22 .brand-page .brand-faq-item[open] .brand-faq-arrow {
  background-image: url(/Images/renewal2022/brand/ico-chevron-up.svg);
  filter: brightness(0) invert(1);
}
/* 답변 패널 */
#container.renewal22 .brand-page .brand-faq-a {
  padding: 1.11111111rem 1.11111111rem 1.38888889rem;
  background-color: #E6F5FC;
  text-align: left;
}
#container.renewal22 .brand-page .brand-faq-a p {
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-faq-a p + p,
#container.renewal22 .brand-page .brand-faq-a .brand-faq-blist + p {
  margin-top: 0.55555556rem;
}
#container.renewal22 .brand-page .brand-faq-blist {
  margin-top: 0.55555556rem;
}
#container.renewal22 .brand-page .brand-faq-blist li {
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-faq-blist li + li {
  margin-top: 0.27777778rem;
}
#container.renewal22 .brand-page .brand-faq-blist strong {
  font-weight: 500;
}

/* ==========================================================================
   뽀삐 (시안 617:1345 · 375 × 3389)
   섹션 배경 교대 — 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰
   기본 서식(아이브로우 13/20, 제목 16/24, 본문 12/22)은 공통 규칙을 그대로 쓴다.
   ========================================================================== */

/* 리드가 여러 문단인 경우 — 시안은 문단 사이 여백 없이 22px 행간으로만 이어진다
   (04 리드 374px = 22 × 17행, 문단 간격 0 을 픽셀로 확인)
   글자 크기를 다시 적어주는 이유 : common.css 의 `body, input, ... p, select
   { font-size:14px }` 가 <p> 에 직접 걸려 있어 .brand-lead(div) 의 12px 상속을
   이긴다. 상속만 믿으면 리드 본문만 14px 로 커진다. */
#container.renewal22 .brand-page .brand-lead p {
  margin: 0;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #111;
}

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1162 — 335 × 168 박스 안에 로고를 폭 79.24% 로 넣는다 */
#container.renewal22 .brand-page.brand-poppy .brand-bi img {
  max-width: 79.24%;
  max-height: 69.35%;
}

/* ── 02 뽀삐가 지켜 온 약속 ───────────────────────────────────────
   시안 618:1364 rail(padding-left 20) > track(gap 12, padding-right 20)
   > 카드 260 × 238, 배경 #E6F5FC, 안쪽 여백 20/22. 아이콘은 44 원 안에 22. */
#container.renewal22 .brand-page .brand-promise {
  background-color: #F2F9FD;
}
#container.renewal22 .brand-page .brand-icard-rail {
  margin-top: 1.11111111rem;
  padding-left: 1.11111111rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container.renewal22 .brand-page .brand-icard-rail::-webkit-scrollbar {
  display: none;
}
#container.renewal22 .brand-page .brand-icards {
  display: flex;
  align-items: stretch;
  gap: 0.66666667rem;
  padding-right: 1.11111111rem;
  width: max-content;
}
#container.renewal22 .brand-page .brand-icard {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 14.44444444rem;
  min-height: 13.22222222rem;
  padding: 1.22222222rem 1.11111111rem;
  background-color: #E6F5FC;
  text-align: left;
}
#container.renewal22 .brand-page .brand-icard-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.44444444rem;
  height: 2.44444444rem;
  border-radius: 50%;
  background-color: #009FE3;
}
#container.renewal22 .brand-page .brand-icard-ico img {
  display: block;
  width: 1.22222222rem;
  height: 1.22222222rem;
}
#container.renewal22 .brand-page .brand-icard-tit {
  margin: 0.55555556rem 0 0;
  font-size: 0.72222222rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-icard-txt {
  margin: 0.55555556rem 0 0;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
}

/* ── 03 내게 맞는 뽀삐 화장지 고르기 ──────────────────────────────
   시안 618:1389 blocks — 블록 사이 40px. 표는 좌우 스크롤(래퍼는 디펜드와 공용).
   표1 460px(130/70/260), 표2 410px(110/300). 서식은 12/22, 셀 여백 10px. */
#container.renewal22 .brand-page .brand-cmp-block {
  margin-top: 2.22222222rem;
}
/* 소제목이 붙는 블록은 제목 → 표 사이 20px, 제목 → 본문 사이 10px */
#container.renewal22 .brand-page .brand-cmp-block .brand-sub-tit {
  margin: 0 0 1.11111111rem;
  font-size: 0.72222222rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}
#container.renewal22 .brand-page .brand-cmp-block.is-text .brand-sub-tit {
  margin-bottom: 0.55555556rem;
}
#container.renewal22 .brand-page .brand-sub-desc p {
  margin: 0;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
}
#container.renewal22 .brand-page .brand-cmp-table {
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 2px solid #111;
  background-color: transparent;
}
#container.renewal22 .brand-page .brand-cmp-table .brand-col-prd-name { width: 7.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-ply      { width: 3.88888889rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-feat     { width: 14.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-ply-name { width: 6.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-diff     { width: 16.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table {
  width: 25.55555556rem;
}
#container.renewal22 .brand-page .brand-cmp-table.is-ply {
  width: 22.77777778rem;
}
#container.renewal22 .brand-page .brand-cmp-table th,
#container.renewal22 .brand-page .brand-cmp-table td {
  padding: 0.55555556rem;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #111;
  text-align: left;
  vertical-align: middle;
}
#container.renewal22 .brand-page .brand-cmp-table th:first-child,
#container.renewal22 .brand-page .brand-cmp-table td:first-child {
  border-left: 0;
}
#container.renewal22 .brand-page .brand-cmp-table thead th {
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #111;
}
/* 행 머리(제품명·구분)는 Bold · 가운데, 겹수 열도 가운데 */
#container.renewal22 .brand-page .brand-cmp-table tbody th {
  font-weight: 700;
  text-align: center;
}
#container.renewal22 .brand-page .brand-cmp-table td.is-center {
  text-align: center;
}
#container.renewal22 .brand-page .brand-cmp-table tbody tr:last-child th,
#container.renewal22 .brand-page .brand-cmp-table tbody tr:last-child td {
  border-bottom: 1px solid #111;
}

/* ── 04 뽀삐 제품 관리 기준 ───────────────────────────────────────── */
#container.renewal22 .brand-page .brand-quality {
  background-color: #F2F9FD;
}

/* ── 05 자주 묻는 질문 : 뽀삐 변형 ────────────────────────────────
   시안 619:1383 — 섹션 머리와 아코디언 사이 40px.
   시안 619:1389 — 열린 답변 패널이 화면 전체 폭(375)까지 퍼지고,
   머리와 패널 사이에 흰 여백 20px, 패널 안쪽 위아래 여백 40px. */
/* 뽀삐만 40px 이고 나머지는 0px 이라 제목이 문항에 붙어 보였다. 20px 로 통일. */
#container.renewal22 .brand-page .brand-faq .brand-inner {
  margin-bottom: 1.11111111rem;
}
#container.renewal22 .brand-page.brand-poppy .brand-faq-a {
  margin: 1.11111111rem -1.11111111rem 0;
  padding: 2.22222222rem 1.11111111rem;
}

/* ==========================================================================
   스카트클리닝 (시안 626:1416 · 375 × 3967)
   섹션 배경 교대 — 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰
   02 는 뽀삐의 .brand-icard*, 03 은 디펜드의 .brand-prd*,
   04 표는 뽀삐의 .brand-cmp-table(2열)을 그대로 쓴다.
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1168 — 335 × 168 박스 안에 로고를 폭 79.55% 로 넣는다 */
/* 시안 884:1169 — 폭 79.55% · 높이 95.32% 안에 들어가게 한다 */
#container.renewal22 .brand-page.brand-scott .brand-bi img {
  max-width: 79.55%;
  max-height: 95.32%;
}

/* ── 04 공간별 TIP ─────────────────────────────────────────────── */
#container.renewal22 .brand-page .brand-space {
  background-color: #F2F9FD;
}

/* ── 04 공간별 TIP ────────────────────────────────────────────────
   시안 626:1558 blocks — 블록 사이 40px. 표는 좌우 스크롤(래퍼 공용). */
#container.renewal22 .brand-page .brand-space-block {
  margin-top: 2.22222222rem;
}
#container.renewal22 .brand-page .brand-space-block .brand-sub-tit {
  margin: 0 0 0.55555556rem;
  font-size: 0.72222222rem;
  line-height: 1.11111111rem;
  font-weight: 700;
  color: #111;
}

/* ── 각주 — 11/19 #767C80. 03 라인업 아래와 04 본문 아래에 쓴다 ── */
#container.renewal22 .brand-page .brand-note {
  margin-top: 1.11111111rem;
  padding: 0 1.11111111rem;
}
/* .brand-inner 안에 들어간 각주는 좌우 여백이 중복되므로 없앤다 */
#container.renewal22 .brand-page .brand-inner .brand-note {
  margin-top: 0.55555556rem;
  padding: 0;
}
#container.renewal22 .brand-page .brand-note p {
  margin: 0;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
  text-align: left;
}
/* 제품카드 아래 각주는 카드 설명과 같은 회색(시안 750:1058) */
#container.renewal22 .brand-page .brand-note.is-light p {
  color: #767C80;
}
/* 위첨자(각주 번호 · FSC® 등록상표 마크) — 브랜드 페이지 전역.
   common-2022.css 의 `#container.renewal22 sup` 에는 line-height 가 없어
   위첨자가 들어간 줄만 줄 상자가 커진다. 0 으로 두어 행간을 고르게 한다. */
#container.renewal22 .brand-page sup {
  font-size: 0.83em;
  vertical-align: super;
  line-height: 0;
}

/* ==========================================================================
   마이비데 (시안 627:1515 · 375 × 4008)
   섹션 배경 교대 — 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰 / 06 흰
   (05·06 이 연속 흰 배경이라 교대 규칙의 예외다 — 시안 실측)
   01 특징카드·04 스텝카드는 뽀삐의 .brand-icard*, 02 는 디펜드의 .brand-prd*,
   03·05 표는 뽀삐의 .brand-cmp-table 을 열 폭만 바꿔 쓴다.
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1172 — 로고가 335 × 168 박스를 높이 기준으로 채운다(실측 274 × 164) */
#container.renewal22 .brand-page.brand-mybidet .brand-bi img {
  max-width: 100%;
  max-height: 97.62%;
}
/* 특징 카드 — 채움이 아니라 흰 배경 + 1px 테두리, 높이 194 (시안 627:1577)
   (.brand-icard 기본 min-height 238 은 뽀삐 카드 기준이라 여기서 되돌린다) */
#container.renewal22 .brand-page .brand-icard.is-outline {
  min-height: 10.77777778rem;
  background-color: #fff;
  border: 1px solid #E5E5E5;
}
/* 스텝 카드 — 높이 172 (시안 627:1705) */
#container.renewal22 .brand-page .brand-icard.is-step {
  min-height: 9.55555556rem;
}

/* ── 02 라인업 · 04 사용방법 배경 ───────────────────────────────── */
#container.renewal22 .brand-page .brand-mlineup,
#container.renewal22 .brand-page .brand-howto {
  background-color: #F2F9FD;
}

/* ── 04 사용방법 : 번호 배지 카드 (시안 627:1705) ────────────────
   아이콘 배지(44px) 자리에 22px 번호 배지가 들어간다. 나머지 서식은 같다. */
#container.renewal22 .brand-page .brand-icard-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.22222222rem;
  height: 1.22222222rem;
  border-radius: 50%;
  background-color: #009FE3;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 700;
  color: #fff;
}

/* 본문과 표 사이 20px — 시안 627:1642 / 627:1732 (인트로 gap 20) */
#container.renewal22 .brand-page.brand-mybidet .brand-inner + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}

/* ── 03 원단 비교표 (510px · 110/200/200) ───────────────────────── */
#container.renewal22 .brand-page .brand-cmp-table.is-flush {
  width: 28.33333333rem;
}
#container.renewal22 .brand-page .brand-cmp-table .brand-col-div   { width: 6.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-mine,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-other { width: 11.11111111rem; }

/* ── 05 안전 기준표 (420px · 140/280) ───────────────────────────── */
#container.renewal22 .brand-page .brand-cmp-table.is-safety {
  width: 23.33333333rem;
}
#container.renewal22 .brand-page .brand-cmp-table .brand-col-std  { width: 7.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-cont { width: 15.55555556rem; }

/* ==========================================================================
   크리넥스 (시안 636:1536 · 375 × 4896)
   섹션 배경 교대 — 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰 / 06 흰
   (마이비데와 같이 05·06 이 연속 흰 배경이다 — 시안 실측)
   02 는 뽀삐의 .brand-icard*, 03 은 디펜드의 .brand-prd*,
   04 는 스카트의 .brand-space-block, 05 표는 뽀삐의 .brand-cmp-table 을 쓴다.
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1175 — 로고 실측 305 × 79 (박스 335 × 168 의 91.04% × 47.02%) */
#container.renewal22 .brand-page.brand-kleenex .brand-bi img {
  max-width: 91.04%;
  max-height: 47.02%;
}

/* ── 02 약속 : 카드 높이 240, 카드 안 각주 (시안 636:1621 / 750:1030) ── */
#container.renewal22 .brand-page.brand-kleenex .brand-icard {
  min-height: 13.33333333rem;
}
#container.renewal22 .brand-page .brand-icard-note {
  margin: 0.55555556rem 0 0;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
}

/* ── 04 제품별 상세 가이드 배경 ─────────────────────────────────── */
#container.renewal22 .brand-page .brand-pguide {
  background-color: #F2F9FD;
}

/* ── 05 지속가능 표기표 (440px · 150/290) ───────────────────────── */
#container.renewal22 .brand-page .brand-cmp-table.is-sustain {
  width: 24.44444444rem;
}
#container.renewal22 .brand-page .brand-cmp-table .brand-col-mark    { width: 8.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-meaning { width: 16.11111111rem; }
/* 본문과 표 사이 20px — 시안 636:1732 (인트로 gap 20) */
#container.renewal22 .brand-page.brand-kleenex .brand-inner + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}

/* ==========================================================================
   화이트 (시안 637:1615 · 375 × 4568)
   섹션 배경 교대 — 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰 / 06 흰
   01 특징카드는 마이비데의 .brand-icard.is-outline, 02 제품카드는 디펜드의
   .brand-prd*, 02 본문 블록은 스카트의 .brand-space-block,
   03·04·05 표는 뽀삐의 .brand-cmp-table 을 열 폭만 바꿔 쓴다.
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1178 — 엠블럼 실측 163 × 136 (박스 335 × 168 의 48.66% × 80.95%) */
#container.renewal22 .brand-page.brand-white .brand-bi img {
  max-width: 48.66%;
  max-height: 80.95%;
}

/* ── 02 라인업 · 04 선택가이드 배경 ─────────────────────────────── */
#container.renewal22 .brand-page .brand-wlineup,
#container.renewal22 .brand-page .brand-wselect {
  background-color: #F2F9FD;
}
/* 제품 이미지가 배경까지 담긴 전체 사진(445 × 340)이라 잘라내기로 슬롯을 채운다.
   다른 브랜드는 흰 배경 위 누끼 이미지라 공용 규칙(상한 85% × 78%)을 쓰지만,
   화이트는 그대로 두면 사진 둘레에 흰 여백이 생긴다. — 시안 I637:1719;527:1063 */
#container.renewal22 .brand-page.brand-white .brand-prd-img {
  overflow: hidden;
}
#container.renewal22 .brand-page.brand-white .brand-prd-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
/* 제품 카드 다음에 오는 본문 블록은 40px 띄운다 (시안 637:1734 — 인트로 다음 blocks) */
#container.renewal22 .brand-page.brand-white .brand-scroll-hint + .brand-space-block {
  margin-top: 2.22222222rem;
}

/* ── 05 품질 : 본문 앞 점 목록 (시안 750:1055) ──────────────────── */
#container.renewal22 .brand-page .brand-wq-list {
  margin: 1.11111111rem 0 0;
  padding: 0;
  list-style: none;
}
#container.renewal22 .brand-page .brand-wq-list li {
  font-size: 0.66666667rem;
  line-height: 1.22222222rem;
  font-weight: 500;
  color: #666;
  text-align: left;
}
#container.renewal22 .brand-page .brand-wq-list li b {
  font-weight: 700;
  color: #666;
}

/* ── 표 열 폭 ────────────────────────────────────────────────────
   03 제품형태 440px(120/320) · 04 라이프스타일 460px(280/180)
   05 품질기준 460px(160/300) */
#container.renewal22 .brand-page .brand-cmp-table.is-ptype    { width: 24.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-life,
#container.renewal22 .brand-page .brand-cmp-table.is-wquality { width: 25.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-type  { width: 6.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-point { width: 17.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-case  { width: 15.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-line  { width: 10rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-std2  { width: 8.88888889rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-cont2 { width: 16.66666667rem; }
/* 본문과 표 사이 20px — 시안 인트로 gap 20 */
#container.renewal22 .brand-page.brand-white .brand-inner + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
/* 04 라이프스타일 표는 행 머리가 없어 첫 열도 본문 서식(왼쪽 정렬)이다 */
#container.renewal22 .brand-page .brand-cmp-table.is-life tbody td:first-child {
  text-align: left;
}

/* ==========================================================================
   포레스트서울 (모바일) — 시안 646:1732
   섹션 배경 : 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰 / 06 흰
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1181 — 335 × 168 박스 안에 로고 167 × 64 (49.85% × 38.10%).
   BI ↔ 텍스트는 섹션 gap 40. */
#container.renewal22 .brand-page.brand-forestseoul .brand-bi img {
  max-width: 49.85%;
  max-height: 38.1%;
}
/* 별표 각주도 섹션 gap 40 자리다 — 리드에 딸린 20 이 아니다(시안 646:1800) */
#container.renewal22 .brand-page.brand-forestseoul .brand-story .brand-note {
  margin-top: 2.22222222rem;
}

/* ── 02 피부 컨디션 · 04 루틴 배경 ──────────────────────────────── */
#container.renewal22 .brand-page .brand-fscondition,
#container.renewal22 .brand-page .brand-froutine {
  background-color: #F2F9FD;
}

/* 02 케어 카드 — 높이 194 (시안 646:1819).
   .brand-icard 기본 238 은 뽀삐 카드 기준이라 여기서 되돌린다. */
#container.renewal22 .brand-page.brand-forestseoul .brand-fscondition .brand-icard {
  min-height: 10.77777778rem;
}
/* 02 블록만 제목 ↔ 본문 20 이다(시안 646:1829 gap 20). 03·04·05 블록은 10. */
#container.renewal22 .brand-page.brand-forestseoul .brand-fscondition .brand-space-block .brand-sub-tit {
  margin-bottom: 1.11111111rem;
}

/* ── 03 라인업 : 제품 이미지 ──────────────────────────────────────
   시안 I646:1851;527:1063 은 object-cover — 배경까지 담긴 사진이라
   공용 규칙(상한 85% × 78%)을 쓰면 둘레에 흰 여백이 생긴다. */
#container.renewal22 .brand-page.brand-forestseoul .brand-fsline .brand-prd-img {
  overflow: hidden;
}
#container.renewal22 .brand-page.brand-forestseoul .brand-fsline .brand-prd-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
/* 04 치트키 카드는 같은 페이지 안에서도 누끼 이미지다 —
   시안 I666:2128;527:1063 : left 7.5% · size 85% */
#container.renewal22 .brand-page.brand-forestseoul .brand-froutine .brand-prd-img img {
  max-width: 85%;
  max-height: 85%;
}

/* ── 04 루틴 : 번호 카드 높이 150 (시안 646:1939) ─────────────────
   (.brand-icard.is-step 기본 172 는 마이비데 기준) */
#container.renewal22 .brand-page.brand-forestseoul .brand-froutine .brand-icard.is-step {
  min-height: 8.33333333rem;
}

/* ── 표 열 폭 ────────────────────────────────────────────────────
   라인표 460 (130 / 330) — 시안 646:1883
   화잘먹표 470 (170 / 300) — 시안 646:1979 */
#container.renewal22 .brand-page .brand-cmp-table.is-fsline  { width: 25.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-fspoint { width: 26.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-fsline  { width: 7.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-fsfeat  { width: 18.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-fsprd   { width: 9.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-fspoint { width: 16.66666667rem; }

/* 제품 카드 ↔ 표 사이. 03 은 인트로 → blocks 라 40, 04 는 한 블록 안이라 20 */
#container.renewal22 .brand-page.brand-forestseoul .brand-fsline .brand-scroll-hint + .brand-ftable-scroll {
  margin-top: 2.22222222rem;
}
#container.renewal22 .brand-page.brand-forestseoul .brand-froutine .brand-scroll-hint + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}

/* ── 05 핵심 성분 : 각주는 블록과 같은 40 간격(시안 646:2028 gap 40) ── */
#container.renewal22 .brand-page.brand-forestseoul .brand-fsingr .brand-note {
  margin-top: 2.22222222rem;
}

/* ==========================================================================
   굿나이트 (모바일) — 시안 644:1680
   섹션 배경 : 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰 / 06 #F2F9FD / 07 흰
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1184 는 로고를 335 × 168 박스 안에서 256 × 121(비율 2.12)로 늘려
   놓았지만 원본 아트워크 비율은 3.005 다. 다른 브랜드와 같이 비율을 지키고
   시안의 가로 폭(76.42%)만 맞춘다 — 세로는 85px 로 따라온다. */
#container.renewal22 .brand-page.brand-goodnites .brand-bi img {
  max-width: 76.42%;
  max-height: 100%;
}
/* 01 특징 카드 — 흰 배경 + 1px 테두리, 높이 172 (시안 644:1758).
   .is-outline 기본 194 는 마이비데 기준이라 여기서 되돌린다. */
#container.renewal22 .brand-page.brand-goodnites .brand-story .brand-icard.is-outline {
  min-height: 9.55555556rem;
}

/* ── 02 야뇨증이란 · 04 편안함 · 06 안전기준 배경 ───────────────── */
#container.renewal22 .brand-page .brand-gnabout,
#container.renewal22 .brand-page .brand-gncomfort,
#container.renewal22 .brand-page .brand-gnsafety {
  background-color: #F2F9FD;
}

/* 02 각주는 섹션 gap 40 자리다 (시안 644:1780) */
#container.renewal22 .brand-page.brand-goodnites .brand-gnabout .brand-note {
  margin-top: 2.22222222rem;
}

/* ── 본문 ↔ 표 간격 ──────────────────────────────────────────────
   03 은 인트로 안이라 20 (시안 671:2148 gap 20),
   05 는 인트로 다음 blocks 라 40 (시안 644:1871),
   05 의 두 번째 표는 '흡수량표' 블록 안이라 20 (시안 644:1950 gap 20) */
#container.renewal22 .brand-page.brand-goodnites .brand-gndiff .brand-inner + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
#container.renewal22 .brand-page.brand-goodnites .brand-gnsize .brand-inner + .brand-ftable-scroll {
  margin-top: 2.22222222rem;
}
#container.renewal22 .brand-page.brand-goodnites .brand-gnsize .brand-space-block + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}

/* ── 표 열 폭 ────────────────────────────────────────────────────
   기저귀 비교 500 (100 / 160 / 240) — 시안 644:1799
   사이즈표   580 (100 / 90 / 100 / 90 / 200) — 시안 644:1883
   흡수량표   400 (190 / 210) — 시안 644:1965 는 335(160/175) 이나
   두 열이 좁아 보여 실제 적용은 190 / 210 으로 넓혔다 */
#container.renewal22 .brand-page .brand-cmp-table.is-gndiff { width: 27.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-gnsize { width: 32.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-gnabs  { width: 22.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-div    { width: 5.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-baby   { width: 8.88888889rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-ours   { width: 13.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-weight { width: 5rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-under  { width: 5.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-sex    { width: 5rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-who    { width: 11.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-sz     { width: 10.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gn-abs    { width: 11.66666667rem; }

/* ==========================================================================
   좋은느낌 (모바일) — 시안 648:1801
   섹션 배경 : 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰 /
               06 #F2F9FD / 07 흰 / 08 #F2F9FD / 09 흰
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1187 실측 131 × 143. 세로로 쌓인 로고(비율 0.916)라
   335 × 168 박스에서 높이가 먼저 걸린다. */
#container.renewal22 .brand-page.brand-goodfeel .brand-bi img {
  max-width: 39.1%;
  max-height: 85.12%;
}
/* 01 특징 카드 — 흰 배경 + 1px 테두리, 높이 214 (시안 862:1667).
   .is-outline 기본 194 는 마이비데 기준이라 여기서 되돌린다. */
#container.renewal22 .brand-page.brand-goodfeel .brand-story .brand-icard.is-outline {
  min-height: 11.88888889rem;
}

/* ── 02 라인업 · 04 소재 · 06 인증 · 08 CSR 배경 ─────────────────── */
#container.renewal22 .brand-page .brand-gflineup,
#container.renewal22 .brand-page .brand-gfmaterial,
#container.renewal22 .brand-page .brand-gfcert,
#container.renewal22 .brand-page .brand-gfcsr {
  background-color: #F2F9FD;
}

/* ── 02 라인업 : 제품 이미지 ──────────────────────────────────────
   시안 I862:1548;527:1063 은 object-cover — 배경까지 담긴 사진이라
   공용 규칙(상한 85% × 78%)을 쓰면 둘레에 흰 여백이 생긴다. */
#container.renewal22 .brand-page.brand-goodfeel .brand-prd-img {
  overflow: hidden;
}
#container.renewal22 .brand-page.brand-goodfeel .brand-prd-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* ── 본문 ↔ 표 간격 ──────────────────────────────────────────────
   03·04·06 은 인트로 안이라 20 (시안 671:2151 / 671:2152 / 671:2153 gap 20),
   05 는 인트로 다음 blocks 라 40 (시안 648:2062) */
#container.renewal22 .brand-page.brand-goodfeel .brand-gftype .brand-inner + .brand-ftable-scroll,
#container.renewal22 .brand-page.brand-goodfeel .brand-gfmaterial .brand-inner + .brand-ftable-scroll,
#container.renewal22 .brand-page.brand-goodfeel .brand-gfcert .brand-inner + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
#container.renewal22 .brand-page.brand-goodfeel .brand-gfselect .brand-inner + .brand-ftable-scroll {
  margin-top: 2.22222222rem;
}

/* 섹션 바로 아래 각주는 섹션 gap 40 자리다(01·02·07).
   블록 안에 들어간 각주(05)는 공용 `.brand-inner .brand-note` 의 10 을 쓴다. */
#container.renewal22 .brand-page.brand-goodfeel .brand-sec > .brand-note {
  margin-top: 2.22222222rem;
}

/* ── 표 열 폭 ────────────────────────────────────────────────────
   제품형태 440 (120 / 320)         — 시안 648:1974
   소재구조 460 (130 / 330)         — 시안 648:2023
   선택기준 500 (270 / 230)         — 시안 648:2074
   인증     640 (150 / 260 / 230)   — 시안 862:1599 */
#container.renewal22 .brand-page .brand-cmp-table.is-gftype     { width: 24.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-gfmaterial  { width: 25.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-gfselect    { width: 27.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-gfcert      { width: 35.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-type   { width: 6.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-point  { width: 17.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-struct { width: 7.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-check  { width: 18.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-crit   { width: 15rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-rec    { width: 12.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-cert   { width: 8.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-apply  { width: 14.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gf-desc   { width: 12.77777778rem; }

/* ==========================================================================
   베베그로우 (모바일) — 시안 650:1911
   섹션 배경 : 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD / 05 흰 /
               06 #F2F9FD / 07 흰 / 08 #F2F9FD / 09 흰 / 10 흰
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1190 실측 308 × 66 (92.06% × 39.57%). 가로로 긴 로고(비율 4.64)라
   폭이 먼저 걸린다. 특징 카드 높이 194 는 .is-outline 기본값과 같아 두지 않는다. */
#container.renewal22 .brand-page.brand-bebegrow .brand-bi img {
  max-width: 92.06%;
  max-height: 39.57%;
}

/* ── 02 라인업 · 04 젖꼭지 · 06 호환성 · 08 세척관리 배경 ────────── */
#container.renewal22 .brand-page .brand-bglineup,
#container.renewal22 .brand-page .brand-bgnipple,
#container.renewal22 .brand-page .brand-bgcompat,
#container.renewal22 .brand-page .brand-bgcare {
  background-color: #F2F9FD;
}

/* 제목만 있고 곧바로 표가 오는 블록(03 소재비교 · 08 소독표 · 08 교체주기).
   제목 아래 10px 은 본문이 있을 때의 간격이라 여기서는 지우고,
   표를 시안대로 20px 아래에 둔다. */
#container.renewal22 .brand-page .brand-space-block.is-head .brand-sub-tit {
  margin-bottom: 0;
}
#container.renewal22 .brand-page.brand-bebegrow .brand-space-block.is-head + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
/* 04 는 인트로 안이라 20 (시안 671:2156 gap 20) */
#container.renewal22 .brand-page.brand-bebegrow .brand-inner + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
/* 02 는 인트로 다음 blocks, 05 는 blocks 안의 다음 블록이라 40 */
#container.renewal22 .brand-page.brand-bebegrow .brand-scroll-hint + .brand-ftable-scroll,
#container.renewal22 .brand-page.brand-bebegrow .brand-space-block.is-text + .brand-ftable-scroll {
  margin-top: 2.22222222rem;
}

/* 행 머리가 왼쪽 정렬인 표(08 소독표 · 교체주기) — 시안 650:2428 / 650:2511 */
#container.renewal22 .brand-page .brand-cmp-table tbody th.is-left {
  text-align: left;
}

/* ── 표 열 폭 ────────────────────────────────────────────────────
   카테고리 500 (180 / 320)                     — 시안 650:2067
   소재비교 520 (100 / 220 / 200)               — 시안 650:2146
   젖꼭지   410 (110 / 150 / 150)               — 시안 650:2217
   빨대컵   550 (70 / 130 / 90 / 260)           — 시안 650:2311
   소독     660 (180 / 130 / 130 / 110 / 110)   — 시안 650:2412
   교체주기 390 (230 / 160)                     — 시안 650:2501 */
#container.renewal22 .brand-page .brand-cmp-table.is-bgcat   { width: 27.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-bgmat   { width: 28.88888889rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-bgnip   { width: 22.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-bgcup   { width: 30.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-bgclean { width: 36.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-bgcycle { width: 21.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-cat,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-item   { width: 10rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-feat   { width: 17.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-div    { width: 5.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-pa     { width: 12.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-ppsu   { width: 11.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-step,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-steam,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-dish   { width: 6.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-when,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-hole   { width: 8.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-no     { width: 3.88888889rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-cup,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-boil,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-uv     { width: 7.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-age    { width: 5rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-how    { width: 14.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-parts  { width: 12.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-bg-cycle  { width: 8.88888889rem; }

/* 굿나이트 — 시안 순서가 브랜드로고 → ABOUT → BRAND STORY 라 로고만 따로 뗀다
   (내부 검토 MO 5). 로고 아래 여백은 다음 ABOUT 섹션의 위 여백 36px 이 맡는다. */
#container.renewal22 .brand-page.brand-goodnites .brand-bi-sec {
  padding: 2rem 0 0;
}
#container.renewal22 .brand-page.brand-goodnites .brand-bi-sec .brand-bi {
  margin-bottom: 0;
}

/* ==========================================================================
   그린핑거 (모바일) — 시안 653:2011
   섹션 배경 : 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD /
               05 흰 / 06 #F2F9FD / 07 흰 / 08 흰
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1193 실측 205 × 91 (61.19% × 54.17%). 특징 카드 높이 194 는
   .is-outline 기본값과 같아 따로 두지 않는다. */
#container.renewal22 .brand-page.brand-greenfinger .brand-bi img {
  max-width: 61.19%;
  max-height: 54.17%;
}

/* ── 02 스킨케어 · 04 구강케어 · 06 물티슈 배경 ──────────────────── */
#container.renewal22 .brand-page .brand-grskin,
#container.renewal22 .brand-page .brand-groral,
#container.renewal22 .brand-page .brand-grwipes {
  background-color: #F2F9FD;
}

/* ── 섹션 사진 — 전폭 잘라내기. 기본 179, 02 의 두 장만 223 ────────
   시안 665:2134 / 665:2138 / 665:2140 (179) · 665:2130 / 665:2132 (223) */
#container.renewal22 .brand-page .brand-figure {
  margin-top: 2.22222222rem;
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page .brand-figure img {
  display: block;
  width: 100%;
  height: 9.94444444rem;
  object-fit: cover;
}
#container.renewal22 .brand-page .brand-figure.is-tall img {
  height: 12.38888889rem;
}

/* 제목만 있고 곧바로 표가 오는 블록 — 베베그로우와 같은 규칙을 쓴다 */
#container.renewal22 .brand-page.brand-greenfinger .brand-space-block.is-head + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
/* 본문 블록 다음에 오는 표는 같은 블록 안이라 20 */
#container.renewal22 .brand-page.brand-greenfinger .brand-space-block.is-text + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
/* 인트로(텍스트) 다음 표는 blocks 로 넘어가는 자리라 40 */
#container.renewal22 .brand-page.brand-greenfinger .brand-inner + .brand-ftable-scroll {
  margin-top: 2.22222222rem;
}
/* 05 는 사진과 표가 한 묶음(시안 667:17584 gap 20) 안에 있어 20 */
#container.renewal22 .brand-page.brand-greenfinger .brand-figure + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
/* 사진은 앞 블록과 40 띄운다 (시안 blocks gap 40) */
#container.renewal22 .brand-page.brand-greenfinger .brand-scroll-hint + .brand-figure,
#container.renewal22 .brand-page.brand-greenfinger .brand-note + .brand-figure {
  margin-top: 2.22222222rem;
}
/* 03 선케어 · 06 물티슈는 사진이 섹션 직속이라 다음 블록과 40
   (시안 653:2235 / 653:2485 섹션 gap 40) */
#container.renewal22 .brand-page.brand-greenfinger .brand-figure + .brand-space-block {
  margin-top: 2.22222222rem;
}
/* 02 의 두 장만 블록 안에 들어가 있어 소제목과 10 (시안 653:2167 / 653:2223 gap 10) */
#container.renewal22 .brand-page.brand-greenfinger .brand-figure.is-tall + .brand-space-block {
  margin-top: 0.55555556rem;
}

/* ── 표 열 폭 ────────────────────────────────────────────────────
   스킨케어라인 660 (120 / 300 / 240)  — 시안 653:2117
   성분기준     480 (180 / 300)        — 시안 653:2185 · 860:1396
   선케어       620 (110 / 290 / 220)  — 시안 653:2256
   치약         530 (130 / 140 / 260)  — 시안 653:2324
   칫솔         590 (130 / 200 / 260)  — 시안 653:2376
   홈케어       600 (170 / 130 / 300)  — 시안 653:2436
   물티슈       500 (170 / 330), 소독티슈 500 (160 / 340) — 시안 653:2506 · 653:2559
   인증         530 (200 / 330)        — 시안 653:2605 */
#container.renewal22 .brand-page .brand-cmp-table.is-grline  { width: 36.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-gringr  { width: 26.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-grsun   { width: 34.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-grpaste { width: 29.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-grbrush { width: 32.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-grhome  { width: 33.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-grwipe  { width: 27.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-grcert  { width: 29.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-div     { width: 6.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-line    { width: 6.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-tdiv,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-use     { width: 7.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-fluor   { width: 7.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-prd2    { width: 8.88888889rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-prd     { width: 9.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-std     { width: 10rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-bristle,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-cert    { width: 11.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-case    { width: 12.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-rec     { width: 13.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-who     { width: 14.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-sfeat   { width: 16.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-feat    { width: 16.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-point   { width: 18.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-gr-point2  { width: 18.88888889rem; }

/* ==========================================================================
   하기스 (모바일) — 시안 654:2069
   섹션 배경 : 01 흰 / 02 #F2F9FD / 03 흰 / 04 #F2F9FD /
               05 흰 / 06 #F2F9FD / 07 흰 / 08 흰
   ========================================================================== */

/* ── 01 브랜드 스토리 ─────────────────────────────────────────────
   시안 884:1199 실측 282 × 93 (84.18% × 55.36%). 특징 카드는 높이 192 로
   .is-outline 기본값(194)과 2px 차이라 그대로 쓴다. */
#container.renewal22 .brand-page.brand-huggies .brand-bi img {
  max-width: 84.18%;
  max-height: 55.36%;
}

/* ── 02 기저귀 · 04 사이즈 · 06 품질관리 배경 ────────────────────── */
#container.renewal22 .brand-page .brand-hgdiaper,
#container.renewal22 .brand-page .brand-hgsize,
#container.renewal22 .brand-page .brand-hgquality {
  background-color: #F2F9FD;
}

/* ── 02 브랜드 카드 — 사진이 들어간 채움 카드 318 (시안 850:1495) ── */
#container.renewal22 .brand-page.brand-huggies .brand-icard.is-brd {
  min-height: 17.66666667rem;
  background-color: #E6F5FC;
  border: 0;
}
#container.renewal22 .brand-page.brand-huggies .brand-brd-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 9.33333333rem;
}
/* 시안(699:4035)은 슬롯 220x168 안에서 5장을 제각각 배치한다. 저장소 파일이
   제품 사진의 잉크 박스를 딱 맞게 자른 크롭이라(시안 에셋의 여백만 제거된 것),
   시안에서 사진이 실제로 차지하는 높이를 그대로 옮기면 같은 그림이 된다.
   = 시안 배치 % x 슬롯 168 x 에셋 잉크 비율. 폭은 auto 로 두어 원본 비율을 지킨다.
   (기존처럼 max-width:100% 만 걸면 폭 220 에 맞춰져 높이가 100~168 로 들쭉날쭉했다) */
#container.renewal22 .brand-page.brand-huggies .brand-brd-img img {
  display: block;
  width: auto;
  max-width: 100%;
}
#container.renewal22 .brand-page.brand-huggies .brand-brd-img.is-nm img {
  height: 5.46833333rem;   /* 98.43px */
}
#container.renewal22 .brand-page.brand-huggies .brand-brd-img.is-se img {
  height: 5.44888889rem;   /* 98.08px */
}
#container.renewal22 .brand-page.brand-huggies .brand-brd-img.is-md img {
  height: 5.39388889rem;   /* 97.09px */
}
#container.renewal22 .brand-page.brand-huggies .brand-brd-img.is-mc img {
  height: 5.25277778rem;   /* 94.55px */
}
#container.renewal22 .brand-page.brand-huggies .brand-brd-img.is-bs img {
  height: 5.13833333rem;   /* 92.49px */
}

/* ── 07 물티슈 사진 — 시안 665:2124 는 139 높이에 object-contain ── */
#container.renewal22 .brand-page.brand-huggies .brand-figure {
  margin-top: 2.22222222rem;
  padding: 0 1.11111111rem;
}
#container.renewal22 .brand-page.brand-huggies .brand-figure.is-contain img {
  display: block;
  width: 100%;
  height: 7.72222222rem;
  object-fit: contain;
}

/* ── 04 · 05 제품별 사이즈표 탭 ───────────────────────────────────
   시안은 브랜드별 표를 세로로 나열해 두었으나, PC(Views/Product/brand/huggies.cshtml)
   와 같이 탭 전환으로 구현한다. 마크업·스크립트는 PC 와 동일하고 치수만 모바일 값이다.
   탭이 6개라 한 줄에 들어가지 않으므로 가로 스크롤로 둔다. */
#container.renewal22 .brand-page.brand-huggies .brand-hgtabwrap {
  margin-top: 2.22222222rem;
}
#container.renewal22 .brand-page.brand-huggies .brand-hgtablist {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.33333333rem;
  padding: 0 1.11111111rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container.renewal22 .brand-page.brand-huggies .brand-hgtablist::-webkit-scrollbar {
  display: none;
}
#container.renewal22 .brand-page.brand-huggies .brand-hgtab {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 1.77777778rem;
  padding: 0 0.66666667rem;
  border: 1px solid #aaa;
  border-radius: 0;
  background-color: #fff;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.66666667rem;
  line-height: 1.2;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#container.renewal22 .brand-page.brand-huggies .brand-hgtab.is-on {
  border-color: #009FE3;
  background-color: #009FE3;
  font-weight: 700;
  color: #fff;
}
/* 표 행 수가 제품마다 달라(5~8행) 탭을 바꿀 때마다 아래 블록이 밀리는 것을 막는다.
   패널을 같은 그리드 셀에 겹쳐 두면 높이가 '가장 큰 패널' 로 고정된다. */
#container.renewal22 .brand-page.brand-huggies .brand-hgpanels {
  display: grid;
  margin-top: 1.11111111rem;
}
#container.renewal22 .brand-page.brand-huggies .brand-hgtabpanel {
  grid-column: 1;
  grid-row: 1;
}
/* hidden 패널도 자리를 차지해야 높이가 유지되므로 display 대신 visibility 로 숨긴다. */
#container.renewal22 .brand-page.brand-huggies .brand-hgtabpanel[hidden] {
  display: block;
  visibility: hidden;
}
#container.renewal22 .brand-page.brand-huggies .brand-hgsub-note {
  margin: 0 0 0.55555556rem;
  padding: 0 1.11111111rem;
  font-size: 0.61111111rem;
  line-height: 1.05555556rem;
  font-weight: 500;
  color: #666;
}
/* 표 전체 가운데 정렬 (PC .is-all-center 와 같은 역할) */
#container.renewal22 .brand-page .brand-cmp-table.is-all-center th,
#container.renewal22 .brand-page .brand-cmp-table.is-all-center td {
  text-align: center;
}

/* ── 표 열 폭 ────────────────────────────────────────────────────
   사이즈표(탭 패널) 360 (140 / 110 / 110) — 모바일 신규
   기저귀비교 700 (140 / 300 / 260)  — 시안 654:2203
   젠더핏     500 (100 / 220 / 180)  — 시안 654:2285
   단계기준   480 (110 / 130 / 240)  — 시안 654:2340
   썸머비교   490 (170 / 320)        — 시안 655:2135
   물티슈라인 640 (110 / 250 / 280)  — 시안 655:2517
   물티슈테스트 480 (150 / 330)      — 시안 655:2571 · 772:1426
   생분해     480 (180 / 300)        — 시안 655:2637
   퓨어그린   480 (160 / 320)        — 시안 655:2679 */
#container.renewal22 .brand-page .brand-cmp-table.is-hgsize   { width: 20rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-hgcmp    { width: 38.88888889rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-hggender { width: 27.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-hgstep   { width: 26.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-hgsummer { width: 27.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-hgline   { width: 35.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table.is-hgtest,
#container.renewal22 .brand-page .brand-cmp-table.is-hgbio,
#container.renewal22 .brand-page .brand-cmp-table.is-hgpure   { width: 26.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-step    { width: 7.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-band,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-pants   { width: 6.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-brd,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-part    { width: 7.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-feat,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-bcont   { width: 16.66666667rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-case    { width: 14.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-type    { width: 5.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-leak    { width: 10rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-lv,
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-wline   { width: 6.11111111rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-name    { width: 7.22222222rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-when    { width: 13.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-sprd    { width: 9.44444444rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-spoint  { width: 17.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-wprd    { width: 13.88888889rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-wfeat   { width: 15.55555556rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-tstd    { width: 8.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-tpoint  { width: 18.33333333rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-role    { width: 17.77777778rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-bstd    { width: 10rem; }
#container.renewal22 .brand-page .brand-cmp-table .brand-col-hg-ing     { width: 8.88888889rem; }

/* 소제목만 있는 블록 다음 표는 20 (베베그로우·그린핑거와 같은 규칙) */
#container.renewal22 .brand-page.brand-huggies .brand-space-block.is-head + .brand-ftable-scroll,
#container.renewal22 .brand-page.brand-huggies .brand-space-block.is-text + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}
/* 인트로(텍스트)·사진 다음 표는 blocks 로 넘어가는 자리라 40 */
#container.renewal22 .brand-page.brand-huggies .brand-inner + .brand-ftable-scroll,
#container.renewal22 .brand-page.brand-huggies .brand-figure + .brand-ftable-scroll {
  margin-top: 2.22222222rem;
}
/* 표 바로 다음에 또 표가 오는 곳(07 저자극 테스트)은 20 */
#container.renewal22 .brand-page.brand-huggies .brand-scroll-hint + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}

/* ──────────────────────────────────────────────────────────────
   표 가로스크롤 해제 (yk_브랜드탭_mo '표 좌우스크롤 문구 삭제' 시트 2~43행)
   - 대상 표 44개는 가로로 넘기지 않고 화면 폭에 맞춘다.
   - 열 비율은 시안 그대로 두려고, 기존 고정 폭(rem)을 표 전체 폭 대비
     퍼센트로 환산해서 넣는다. table-layout:fixed 는 그대로 쓴다.
   - 대상이 아닌 표(디펜드 전체, 하기스 기저귀 비교 등)는 기존 스크롤 유지.
   ────────────────────────────────────────────────────────────── */
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit {
  overflow-x: visible;
  padding-right: 1.11111111rem;
}
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-ftable-box {
  width: auto;
  padding-right: 0;
}
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-table {
  width: 100%;
}
/* 표 두 개가 소제목 없이 바로 붙는 자리(하기스 저자극 사용감의 기준표·단계표).
   전에는 사이에 있던 좌우스크롤 안내 문구가 간격 노릇을 했는데, 그걸 지우면서
   두 표가 맞붙었다. */
#container.renewal22 .brand-page .brand-ftable-scroll + .brand-ftable-scroll {
  margin-top: 1.11111111rem;
}

/* 표 셀은 어절 단위로만 줄바꿈한다. 한글 기본값(break-all 성격)이라
   '테스트 완료' 같은 단어가 중간에서 잘려 내려가는 일이 있었다. */
#container.renewal22 .brand-page .brand-table th,
#container.renewal22 .brand-page .brand-table td {
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 셀 안에서 <p> 로 줄을 나눈 표(디펜드 사이즈 가이드)가 있다. common.css 의
   `body, input, button, textarea, p, select { font-size:14px }` 가 셀의 12px 를
   덮어써서 그 표만 14px 로 보였다. 셀 값을 그대로 물려받게 한다. */
#container.renewal22 .brand-page .brand-table th p,
#container.renewal22 .brand-page .brand-table td p {
  font-size: inherit;
  line-height: inherit;
}
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-age { width: 16.36%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-cat { width: 36%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-cup { width: 23.64%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-cycle { width: 41.03%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-div { width: 19.23%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-feat { width: 64%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-hole { width: 36.59%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-how { width: 47.27%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-no { width: 12.73%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-pa { width: 42.31%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-parts { width: 58.97%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-ppsu { width: 38.46%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-step { width: 26.83%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-bg-when { width: 36.59%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-case { width: 60.87%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-cont { width: 66.67%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-cont2 { width: 65.22%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-diff { width: 73.17%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-div { width: 21.57%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-feat { width: 56.52%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-fsfeat { width: 71.74%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-fsline { width: 28.26%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-fspoint { width: 63.83%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-fsprd { width: 36.17%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gf-check { width: 71.74%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gf-crit { width: 54%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gf-point { width: 72.73%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gf-rec { width: 46%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gf-struct { width: 28.26%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gf-type { width: 27.27%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gn-abs { width: 52.5%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gn-baby { width: 32%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gn-div { width: 20%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gn-ours { width: 48%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gn-sz { width: 47.5%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-cert { width: 37.74%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-feat { width: 62.5%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-fluor { width: 26.42%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-point2 { width: 68%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-prd { width: 34%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-prd2 { width: 32%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-std { width: 37.5%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-tdiv { width: 24.53%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-gr-who { width: 49.06%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-band { width: 30.56%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-bcont { width: 62.5%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-bstd { width: 37.5%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-ing { width: 33.33%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-leak { width: 42.86%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-lv { width: 22.92%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-name { width: 27.08%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-pants { width: 30.56%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-part { width: 33.33%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-role { width: 66.67%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-spoint { width: 65.31%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-sprd { width: 34.69%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-step { width: 38.89%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-tpoint { width: 68.75%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-tstd { width: 31.25%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-type { width: 23.81%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-hg-when { width: 50%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-line { width: 39.13%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-mark { width: 34.09%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-meaning { width: 65.91%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-mine { width: 39.22%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-other { width: 39.22%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-ply { width: 15.22%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-ply-name { width: 26.83%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-point { width: 72.73%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-prd-name { width: 28.26%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-std { width: 33.33%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-std2 { width: 34.78%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-col-type { width: 27.27%; }

/* 같은 col 클래스를 표마다 다른 비율로 쓰는 경우 — 표 클래스까지 붙여 구분한다 */
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-cmp-table.is-grcert .brand-col-gr-point { width: 62.26%; }
#container.renewal22 .brand-page .brand-ftable-scroll.is-fit .brand-cmp-table.is-grwipe .brand-col-gr-point { width: 66%; }

/* ──────────────────────────────────────────────────────────────
   어절 단위 줄바꿈 (내부 검토 — 모바일 전반)
   한글 기본 줄바꿈은 글자 단위라 '테스트 완료' 같은 낱말이 중간에서 잘린다.
   브랜드 상세 안의 텍스트를 어절 단위로만 끊는다.
   overflow-wrap 은 한 어절이 컨테이너보다 길 때만 도는 안전장치다.
   ────────────────────────────────────────────────────────────── */
#container.renewal22 .brand-page {
  word-break: keep-all;
  overflow-wrap: break-word;
}