.bnd-page {
    --bnd-ink: #111;
    --bnd-muted: #707070;
    --bnd-line: #e5e5e5;
    --bnd-surface: #f7f7f7;
    color: var(--bnd-ink);
    margin: 0 auto;
    /* 레거시 브랜드관은 홈·하위 페이지가 모두 .center-wrap(min-width 1320 / max-width 1920)
       안에 들어가 폭이 같다. 하위 페이지만 1440 이면 홈(1920, #11851)에서 넘어올 때 본문이
       갑자기 좁아지므로 상한을 홈과 같은 1920 으로 맞춘다 (#11854) */
    max-width: 1920px;
    /* 창을 줄이면 레거시 .center-wrap 처럼 가로 스크롤로 넘기고 레이아웃을 유지한다.
       bnd.css 에 미디어쿼리가 없어 창이 좁아지면 고정 px 값들이 그대로 어긋나므로,
       본문 안 고정폭 블록(1280px) + 좌우 패딩 40px 을 기준으로 1360px 을 하한으로 둔다 (#11849) */
    min-width: 1360px;
    padding: 0 40px 120px;
}

.bnd-header {
    background: #fff;
    border-bottom: 1px solid var(--bnd-line);
    padding: 48px 0 0;
    position: relative;
    z-index: 2;
}

.bnd-header__identity {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 72px;
}

.bnd-header__home {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
}

.bnd-header__logo {
    display: block;
    height: 34px;
    max-width: 360px;
    object-fit: contain;
    width: auto;
}

.bnd-header__name-en {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.bnd-header__name-ko {
    color: var(--bnd-muted);
    font-size: 13px;
}

.bnd-gnb {
    margin-top: 34px;
    overflow-x: auto;
}

.bnd-gnb__list {
    align-items: center;
    display: flex;
    gap: 34px;
    justify-content: center;
    list-style: none;
    margin: 0;
    min-width: max-content;
    padding: 0;
}

.bnd-gnb__link {
    align-items: center;
    color: var(--bnd-muted);
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    gap: 5px;
    padding: 18px 0;
    position: relative;
    text-decoration: none;
}

/* 활성 메뉴는 글자색으로만 구분한다. 아래에 깔던 2px 밑줄 바는 뺐다 (#11922). */
.bnd-gnb__item.is-active .bnd-gnb__link,
.bnd-gnb__link:focus,
.bnd-gnb__link:hover {
    color: var(--bnd-ink);
}

.bnd-gnb__badge--dot {
    background: #f04438;
    border-radius: 50%;
    height: 5px;
    width: 5px;
}

.bnd-gnb__badge--new {
    color: #f04438;
    font-size: 10px;
    font-weight: 800;
}

.bnd-page__content {
    padding-top: 54px;
}

.bnd-page__title,
/* 퍼블 renewal.css `.page-top .page-sub-title { font-weight: 400; font-size: 32px }` +
   `.page-top { margin-bottom: 20px }`. GNB 결합형 홈에만 이 값이 걸려 있고 비결합형은
   28px/700 이라는 퍼블에 없는 값을 쓰고 있었다 (#11915). */
.bnd-module__title {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3335;
    margin: 0 0 20px;
}

/* 퍼블 renewal.css `.page-top { display: flex; flex-direction: column; gap: 12px 0;
   margin-bottom: 20px }` (260909): 제목 아래 서브카피가 붙으면 제목과의 간격은 12px 이고
   20px 은 서브카피 아래로 넘어간다 (#11969) */
.bnd-module__title:has(+ .bnd-module__subtitle),
.bnd-module__title:has(+ p.bnd-ai-copy) {
    margin-bottom: 12px;
}

/* 제목 아래 서브카피(숏핑 부제 · AI 추천 카피)는 퍼블 renewal.css
   `.page-top .page-sub-txt { font-weight: 400; font-size: 24px; line-height: 1.3;
   color: #111 }` (260909) 이다. 16px·#555 는 퍼블에 없는 값이었다 (#11969) */
.bnd-module__subtitle,
p.bnd-ai-copy {
    color: #111;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 20px;
}

/* 퍼블 renewal.css `.brand_home_top ~ div[class^="brand_"] { margin-top: 100px }` (#11915) */
.bnd-module {
    margin-top: 100px;
}

.bnd-module:first-child {
    margin-top: 0;
}

.bnd-hero {
    background: var(--bnd-surface);
    overflow: hidden;
    position: relative;
}

/* #11861 노출 슬라이드는 Swiper 가 제어한다. display 를 직접 다루면 첫 배너가 고정된다. */
.bnd-hero__slide {
    margin: 0;
}

/* 세로로 잘릴 때 인물 얼굴이 남도록 위쪽 기준으로 자른다 (#11991).
   GNB 결합형은 renewal.css 의 `.event-top-banner .swiper-slide img` 가 같은 값을 준다.
   BASIC 발행 브랜드는 그 클래스가 없으므로 여기서 같은 규격을 맞춘다. */
.bnd-hero__slide img {
    aspect-ratio: 16 / 7;
    display: block;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

/* #11807 BO 수동 메인배너(PC 와이드형): 링크 전체가 슬라이드를 채운다. */
.bnd-hero--wide .bnd-hero__link {
    display: block;
    position: relative;
    width: 100%;
}

/* PC 와이드 원본은 딤 없이 노출하고 BO 타이틀은 이미지 위에 흰색으로 출력한다. */
.bnd-hero--wide .bnd-hero__slide:not(.bnd-hero__slide--mo-fallback) .bnd-hero__link > img {
    filter: none;
}

.bnd-hero--wide .bnd-hero__copy {
    box-sizing: border-box;
    color: #fff;
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 160px);
    z-index: 2;
}

.bnd-hero--wide .bnd-hero__title {
    display: block;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
}

.bnd-hero--wide .bnd-hero__subtitle {
    display: block;
    font-size: 18px;
    line-height: 1.5;
    margin-top: 24px;
}

/* #11807 와이드 이미지 없는 기획전: MO 이미지를 확대·딤 처리한 배경 위에 MO 이미지 출력 */
.bnd-hero--wide .bnd-hero__slide--mo-fallback {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    position: relative;
}

.bnd-hero--wide .bnd-hero__slide--mo-fallback .bnd-hero__backdrop {
    background-position: center;
    background-size: cover;
    filter: blur(24px) brightness(.55);
    inset: 0;
    position: absolute;
    transform: scale(1.15);
}

.bnd-hero--wide .bnd-hero__slide--mo-fallback .bnd-hero__link {
    height: 100%;
    position: relative;
    text-align: center;
}

.bnd-hero--wide .bnd-hero__slide--mo-fallback img {
    aspect-ratio: auto;
    display: inline-block;
    height: 100%;
    object-fit: contain;
    width: auto;
}

/* 배너 화살표는 와이드 기획전 배너(.bnd-image-banners--wide)와 같은 흰색 갈매기다.
   퍼블도 `.brand_intro_img ~ .swiper-button-*` 과 `.brand_collection_list` 에 같은
   모양·위치(좌우 40px, 100x100 히트영역)를 쓴다 (#11898, 이전 PNG 아이콘 #11861 대체) */
.bnd-hero__control {
    background: none;
    border: 0;
    color: transparent;
    cursor: pointer;
    font-size: 0;
    height: 100px;
    margin-top: -50px;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 100px;
    z-index: 4;
}

.bnd-hero__control::after {
    border: 2px solid #fff;
    border-width: 2px 2px 0 0;
    content: '';
    height: 30px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 30px;
}

.bnd-hero__control--prev {
    left: 40px;
}

.bnd-hero__control--next {
    right: 40px;
}

.bnd-hero__control--prev::after {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.bnd-hero__control--next::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.bnd-video {
    display: block;
    margin-top: 24px;
    max-height: 720px;
    width: 100%;
}

.bnd-video-link {
    margin: 24px 0 0;
    text-align: right;
}

.bnd-video-link a {
    color: var(--bnd-ink);
    font-size: 14px;
    font-weight: 700;
}

.bnd-goods-grid {
    display: grid;
    gap: 48px 20px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 베스트·신상품 가로 슬라이드 — 퍼블 #brandRanking(5개) · #brandNew(4개) (#11807) */
.bnd-goods-swiper {
    overflow: hidden;
    position: relative;
}

.bnd-goods-swiper__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bnd-goods-swiper__item {
    flex-shrink: 0;
    min-width: 0;
    position: relative;
}

/* 찜하기 버튼의 기준이 된다. 슬라이드와 달리 그리드 아이템에는 없던 값이다 (#11848) */
.bnd-goods-grid__item {
    position: relative;
}

/* BND 상품 목록에는 공용 .prd-list 클래스가 없어 .prd-list .prd-img .ratio::before 의
   133% 스페이서가 걸리지 않는다. 그래서 슬라이드·그리드가 자체 비율을 가져야 한다.
   GNB 결합형 홈에만 걸려 있던 탓에 일반 브랜드홈은 BEST·리뷰·AI추천 이미지가
   높이 0 이 됐다 (#11915). 신상품은 아래 100/133 규칙을 그대로 쓰도록 앞에 둔다. */
/* 공통 .prd-img::before 딤이 각 상품 썸네일 안에서만 그려지도록 위치 기준을 고정한다. */
.bnd-goods-swiper .prd-img,
.bnd-goods-grid .prd-img {
    position: relative;
}

/* 공통 .main 규칙이 ratio 의사 요소를 숨기므로 BND가 자체 비율을 가진다. */
.bnd-goods-swiper .prd-img .ratio,
.bnd-goods-grid .prd-img .ratio {
    aspect-ratio: 100 / 132.93;
    display: block;
    position: relative;
}

.bnd-goods-swiper .prd-img .ratio > img,
.bnd-goods-grid .prd-img .ratio > img {
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    top: 0;
    width: 100%;
}

/* 퍼블 BND 상품 유닛은 이미지 + 상품명 + 할인율/판매가 + 찜뿐이다.
   AI 추천 구좌는 그루비가 레거시 공용 유닛(MA_01_NEW)으로 그려 브랜드명·쿠폰 태그·
   찜/리뷰 수·호버 버튼까지 달고 오므로 여기서 감춘다. GNB 결합형 홈에만 걸려 있어
   비결합형 브랜드홈의 AI 구좌만 레거시 모양으로 나왔다 (#11915). */
.bnd-goods-swiper .brand,
.bnd-goods-swiper .tag-group,
.bnd-goods-swiper .likes,
.bnd-goods-swiper .hoverUpLayer,
.bnd-goods-grid .brand,
.bnd-goods-grid .tag-group,
.bnd-goods-grid .likes,
.bnd-goods-grid .hoverUpLayer {
    display: none;
}

/* 레거시 유닛은 시즌 라벨을 상품명 앞줄(.tx-ovf)로 붙인다. 퍼블에는 없는 줄이다. */
.bnd-goods-swiper .name .tx-ovf:not(:last-child),
.bnd-goods-grid .name .tx-ovf:not(:last-child) {
    display: none;
}

.bnd-goods-swiper .name,
.bnd-goods-swiper .prd-price,
.bnd-goods-grid .name,
.bnd-goods-grid .prd-price {
    font-size: 16px;
}

/* 퍼블 #brandNew 상품 유닛: 100:133 이미지 + 상품명 + 할인율/판매가 + 찜 */
.bnd-new-goods__item > a,
.bnd-new-goods__item .prd-img,
.bnd-new-goods__item .prd-img .ratio {
    display: block;
}

.bnd-new-goods__item .prd-img {
    overflow: hidden;
    position: relative;
}

.bnd-new-goods__item .prd-img .ratio {
    aspect-ratio: 100 / 133;
    position: relative;
}

.bnd-new-goods__item .prd-img .ratio > img {
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    top: 0;
    width: 100%;
}

/* 상품 유닛 — 퍼블 #brandNew / #brandGoods / #brandRanking 이 공유하는 스펙이므로
   BND 상품 슬라이드·그리드 전체에 건다. 모듈별로 다른 값은 아래에서 따로 덮어쓴다 (#11848) */
.bnd-goods-swiper__item .prd-info,
.bnd-goods-grid__item .prd-info {
    padding: 20px 0 0;
}

.bnd-goods-swiper__item .name,
.bnd-goods-grid__item .name {
    line-height: 1.54;
    margin-top: 5px;
}

.bnd-goods-swiper__item .name .tx-ovf,
.bnd-goods-grid__item .name .tx-ovf {
    color: #555;
    display: block;
    font-size: 16px;
    font-weight: 400;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnd-goods-swiper__item .prd-price,
.bnd-goods-grid__item .prd-price {
    align-items: center;
    color: #111;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    font-weight: 500;
    gap: 7px;
    margin-top: 4px;
}

.bnd-goods-swiper__item .discount,
.bnd-goods-grid__item .discount {
    color: #f20084;
    font-size: 16px;
    font-weight: 500;
    order: -2;
}

.bnd-goods-swiper__item .price,
.bnd-goods-grid__item .price {
    font-size: 17px;
}

.bnd-goods-swiper__item .discount strong,
.bnd-goods-swiper__item .price,
.bnd-goods-swiper__item .price > strong,
.bnd-goods-grid__item .discount strong,
.bnd-goods-grid__item .price,
.bnd-goods-grid__item .price > strong {
    font-weight: 500;
}

/* 퍼블 상품 유닛은 할인율과 판매가만 노출한다. MA_01_NEW 가 붙이는 원가는 감춘다 (#11848) */
.bnd-goods-swiper__item .price-org,
.bnd-goods-grid__item .price-org {
    display: none;
}

.bnd-goods-swiper__item .btn-wish,
.bnd-goods-swiper__item .btn-wish.on,
.bnd-goods-grid__item .btn-wish,
.bnd-goods-grid__item .btn-wish.on,
.bnd-custom-review__pick .btn-wish,
.bnd-custom-review__pick .btn-wish.on {
    background: transparent url('../img/goods/icon/icon_wish_g.png') no-repeat center / auto 100%;
    border: 0;
    font-size: 0;
    height: 22px;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 16px;
    width: 28px;
    z-index: 5;
}

.bnd-goods-swiper__item .btn-wish.on,
.bnd-goods-grid__item .btn-wish.on,
.bnd-custom-review__pick .btn-wish.on {
    background-image: url('../img/goods/icon/icon_wish_bk.png');
}

/* 베스트(순위) 유닛 — 퍼블 #brandRanking 실측: 좌우 12px, 이미지 아래 16px, 가격 위 8px (#11848) */
.bnd-module--best .bnd-goods-swiper__item .prd-info {
    padding: 16px 12px 0;
}

.bnd-module--best .bnd-goods-swiper__item .name {
    margin-top: 0;
}

.bnd-module--best .bnd-goods-swiper__item .prd-price {
    margin-top: 8px;
}

/* 특별가 줄 — 퍼블 .brand_best_list .prd-list 의 .premium/.member/.secret 규칙.
   금액만 16px 500 이고 라벨은 12px 300 이다 (#11850) */
.bnd-module--best .bnd-goods-swiper__item .price-special {
    margin-top: 0;
}

.bnd-module--best .bnd-goods-swiper__item .price-special > div {
    color: #111;
    font-size: 12px;
    font-weight: 300;
}

.bnd-module--best .bnd-goods-swiper__item .price-special > div > strong {
    font-size: 16px;
    font-weight: 500;
}

.bnd-module--best .bnd-goods-swiper__item .price-special > .secret {
    color: #f20084;
}

/* 인플루언서 — 퍼블 #brandInfluencer 기준, 상품당 대표 이미지 1장 (#11813) */
.bnd-influencer-swiper__item img {
    display: block;
    height: auto;
    width: 100%;
}

/* 베스트 순위 배지 — 공통 .prd-list .rank 와 동일 (#11807) */
.bnd-goods-swiper__item .rank {
    background: #111;
    border-radius: 0;
    color: #fff;
    font-family: 'Pretendard', 'Montserrat';
    font-size: 16px;
    font-weight: 500;
    height: 38px;
    left: 0;
    line-height: 38px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 38px;
    z-index: 5;
}

.bnd-goods-swiper__item .rank.recommend {
    font-size: 14px;
    min-width: 38px;
    padding: 0 8px;
    width: auto;
}

/* 기획전·쇼핑 콘텐츠 목록은 퍼블(pc_05_PU04_M_0202_new_v3_sub_1.html)의
   .list-area > .prd-top + .exh-list 를 그대로 쓴다. 4열·133.2% 썸네일 같은 목록
   규칙은 사이트 공통 sub.css / renewal.css 가 이미 갖고 있다.

   다만 퍼블은 서브 화면용 보정을 renewal.css 의
   `:has(.brand_sub) { .list-area {margin-top: 60px} .exh-list ul {flex-wrap: wrap} }`
   (#11495 260909) 로 넣는데, 서버 renewal.css 에는 이 절이 아직 없고 bnd 는 body
   클래스가 brand_sub 도 아니다. 그대로 두면 슬라이드용
   `.renewer .exh-list ul {flex-wrap: nowrap}` 이 이겨 목록이 줄바꿈 없이 옆으로
   흐른다. bnd.css 는 renewal.css 뒤에 실리므로 같은 값만 여기서 되돌린다. */
.bnd-page .list-area {
    margin-top: 60px;
}

.bnd-page .exh-list ul {
    flex-wrap: wrap;
}


/* 기획전·쇼핑 콘텐츠 카드 — 이미지는 카드 여백(26px)까지 꽉 채운다 (#11873) */
.bnd-content-card {
    color: inherit;
    display: block;
    text-decoration: none;
}

.bnd-content-card__media {
    background: var(--bnd-surface);
    display: block;
    margin: -26px -26px 20px;
    overflow: hidden;
}

.bnd-content-card__media img {
    aspect-ratio: 685 / 440;
    display: block;
    object-fit: cover;
    width: 100%;
}

/* 퍼블 `:has(.brand_sub) .lookbook_list` — 60px 아래에서 3단으로 시작한다 (#11936) */
.bnd-lookbook-grid {
    display: grid;
    gap: 60px 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 60px 0 0;
    padding: 0;
}

.bnd-lookbook-card {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: block;
    padding: 0;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.bnd-lookbook-card__media {
    aspect-ratio: 6 / 5;
    background: var(--bnd-surface);
    display: block;
    overflow: hidden;
    position: relative;
}

/* 밝은 룩북 이미지 위에서도 흰색 캡션이 읽히도록 딤을 얹는다 —
   퍼블 `.lookbook_list .thumb_area::after` 와 같은 값이다 (#11936, 퍼블 260909) */
.bnd-lookbook-card__media::after {
    background: rgba(0, 0, 0, .2);
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.bnd-lookbook-card__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    width: 100%;
}

.bnd-lookbook-card:focus .bnd-lookbook-card__media img,
.bnd-lookbook-card:hover .bnd-lookbook-card__media img {
    transform: scale(1.02);
}

/* 퍼블 `.lookbook_list .swiper-slide p` — 이미지 위 좌하단 한 줄 (#11936) */
.bnd-lookbook-card__title {
    bottom: 40px;
    color: #fff;
    display: block;
    font-size: 24px;
    font-weight: 500;
    left: 40px;
    line-height: 1;
    max-width: calc(100% - 80px);
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
}

/* 스크롤로 다음 페이지를 불러오는 감시자와, 감시자가 없을 때 쓰는 버튼 (#11944) */
/* 스크롤 더 읽기 감시자·대체 버튼은 룩북과 기획전·쇼핑 콘텐츠가 같이 쓴다 (#11949) */
.bnd-lookbook-sentinel,
.bnd-contents-sentinel {
    height: 1px;
    width: 100%;
}

.bnd-lookbook-sentinel[hidden],
.bnd-contents-sentinel[hidden] {
    display: none;
}

.bnd-lookbook-more,
.bnd-contents-more {
    background: #fff;
    border: 1px solid var(--bnd-line);
    color: var(--bnd-ink);
    cursor: pointer;
    display: block;
    font-size: 14px;
    margin: 40px auto 0;
    min-height: 44px;
    width: 200px;
}

.bnd-lookbook-more[hidden],
.bnd-contents-more[hidden] {
    display: none;
}

.bnd-lookbook-error,
.bnd-contents-error {
    color: #b42318;
    font-size: 14px;
    margin: 20px 0 0;
    text-align: center;
}

/* 룩북 상세 팝업 — 퍼블 `#lookBookDetail`
   (`.layerPop` > `.cont` > `.layerBody` > `.ly-recent` > `.scroll-wrap` > `.lookbook_area`).
   퍼블은 스크롤 영역을 mCustomScrollbar 플러그인이 만들지만 여기서는 같은 최대 높이에
   브라우저 스크롤로 대신한다 (#11936). */
.bnd-lookbook-detail {
    align-items: center;
    background: rgba(17, 17, 17, .5);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
}

.bnd-lookbook-detail[hidden] {
    display: none;
}

/* 퍼블 `.layerPop .cont` + `.ly-recent {width: 476px}` */
.bnd-lookbook-detail__panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 3px 47px 109px rgba(7, 7, 7, .15);
    box-sizing: content-box;
    max-height: calc(100vh - 100px);
    overflow: hidden;
    padding: 30px;
    position: relative;
    width: 476px;
}

/* 퍼블 `.ly-recent .scroll-wrap {max-height: calc(100vh - 300px)}`.
   오른쪽 20px 는 스크롤바 자리이며 본문 폭은 퍼블과 같은 456px 가 된다. */
.bnd-lookbook-detail__scroll {
    box-sizing: border-box;
    max-height: calc(100vh - 300px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 20px;
    width: 100%;
}

/* 퍼블 `#lookBookDetail .btn-close {top: 15px; right: 15px}` */
.bnd-lookbook-detail__close {
    background: transparent url('../img/btn_closed.png') no-repeat center center;
    border: 0;
    cursor: pointer;
    font-size: 0;
    height: 20px;
    padding: 0;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 20px;
    z-index: 1;
}

/* 퍼블 `.lookbook_area .brand_title` */
.bnd-lookbook-detail__head {
    margin-bottom: 40px;
    position: relative;
}

.bnd-lookbook-detail__title {
    color: #111;
    font-size: 18px;
    font-weight: 500;
    margin: 3px 0 8px;
    padding-right: 30px;
    word-break: keep-all;
}

.bnd-lookbook-detail__description {
    color: #555;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
}

/* 퍼블 `.lookbook_area .btn_ico_share_b` */
.bnd-lookbook-detail__share {
    background: transparent url('../img/icon_share_b.png') no-repeat center / 24px 24px;
    border: 0;
    cursor: pointer;
    font-size: 0;
    height: 24px;
    padding: 0;
    position: absolute;
    right: 0;
    top: -2px;
    width: 24px;
}

/* 퍼블 `.lookbook_area .lookbook_list`. 제목 블록과 60px 떨어지는 것도 퍼블 렌더값이다
   (서브 페이지 룩북 목록과 같은 클래스라 `margin-top: 60px` 이 함께 걸린다). */
.bnd-lookbook-detail__images {
    margin: 60px 0 40px;
}

.bnd-lookbook-detail__image {
    display: block;
    line-height: 0;
    width: 100%;
}

/* 퍼블 `.lookbook_area .title_area` + `.swiper.lookbook` */
.bnd-lookbook-archive__title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 20px;
}

.bnd-lookbook-archive__viewport {
    overflow: hidden;
    position: relative;
}

.bnd-lookbook-archive__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bnd-lookbook-archive__card {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: block;
    padding: 0;
    position: relative;
    text-align: left;
    width: 100%;
}

.bnd-lookbook-archive__media {
    display: block;
    overflow: hidden;
    padding-bottom: 60.746%;
    position: relative;
}

.bnd-lookbook-archive__media img {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

.bnd-lookbook-archive__caption {
    bottom: 20px;
    box-sizing: border-box;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    left: 0;
    letter-spacing: 0;
    padding: 0 20px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.bnd-lookbook-archive .swiper-scrollbar {
    background: rgba(0, 0, 0, .1);
    border-radius: 0;
    bottom: auto;
    height: 1px;
    left: auto;
    margin-top: 25px;
    position: relative;
    width: 100%;
}

.bnd-lookbook-archive .swiper-scrollbar-drag {
    background: #111;
    border-radius: 0;
    height: 2px;
    top: -1px;
}

/* 퍼블 `.barnd_more_view` */
.bnd-lookbook-detail__brand {
    align-items: center;
    display: flex;
    margin-top: 40px;
}

.bnd-lookbook-detail__brand-link {
    align-items: center;
    color: #555;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: none;
}

.bnd-lookbook-detail__brand-thumb {
    border: 1px solid #555;
    border-radius: 50%;
    display: block;
    flex: none;
    height: 72px;
    overflow: hidden;
    position: relative;
    width: 72px;
}

.bnd-lookbook-detail__brand-thumb img {
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    top: 0;
    width: 100%;
}

.bnd-lookbook-detail__brand-name {
    display: flex;
    flex-direction: column;
    gap: 5px 0;
    margin-left: 9px;
}

.bnd-lookbook-detail__brand-name strong {
    color: #111;
    font-weight: 500;
}

/* 퍼블 renewal.css 의 메인 라인탭 규격을 그대로 옮겼다. 브랜드홈은 renewal.css 를
   불러오지 않아 클래스를 재사용할 수 없으므로 값을 같게 둔다. 탭 줄 밑줄은 ::after 로
   두면 탭 줄을 밀 때 같이 밀려 나가므로 배경으로 그린다 (#11981). */
.bnd-curation__tabs {
    background: linear-gradient(#eee, #eee) left bottom / 100% 1px no-repeat;
    display: flex;
    gap: 14px;
    margin-bottom: 27px;
    overflow-x: auto;
    position: relative;
    scrollbar-width: none;
}

/* 가로 막대가 탭 아래 여백을 먹으면 퍼블 규격과 어긋나므로 감춘다. 모바일과 같다. */
.bnd-curation__tabs::-webkit-scrollbar {
    display: none;
}

/* 끌어 옮기는 중에는 글자가 잡히지 않아야 탭 줄만 따라온다. */
.bnd-curation__tabs[data-bnd-tab-dragging="true"] {
    cursor: grabbing;
    user-select: none;
}

.bnd-curation__tab {
    align-items: center;
    background: none;
    border: 0;
    color: #555;
    cursor: pointer;
    display: flex;
    /* 넘치는 탭이 쭈그러들거나 두 줄로 접히면 밀어 볼 수 없다. */
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 400;
    height: 29px;
    padding: 0;
    position: relative;
    white-space: nowrap;
}

.bnd-curation__tab[aria-selected="true"] {
    color: #111;
    font-weight: 700;
}

/* 고른 탭 아래 굵은 줄. 탭 줄 밑줄 1px 을 덮는다. */
.bnd-curation__tab[aria-selected="true"]::after {
    background: #111;
    bottom: 0;
    content: '';
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.bnd-about__introduction,
.bnd-about__luxury p,
.bnd-promotion__introduction {
    font-size: 16px;
    line-height: 1.9;
    margin: 0;
    white-space: pre-line;
}

/* 퍼블 .brand_intro: 브랜드명과 소개문을 1230px 블록 안에 왼쪽 정렬로 노출한다 (#11862) */
.bnd-introduction {
    background: #f8f8f8;
}

.bnd-introduction__inner {
    padding: 56px 80px;
}

.bnd-introduction__title {
    color: #000;
    font-size: 44px;
    font-weight: 700;
    /* 퍼블 실측 46px / 40px (#11862) */
    line-height: 1.15;
    margin: 0;
}

/* 퍼블 .brand_intro p: 폭을 따로 제한하지 않고 자간 -0.36px, 줄바꿈은 keep-all 만
   적용한다. overflow-wrap: anywhere 는 퍼블에 없어 줄바꿈 위치가 어긋났다 (#11862)
   BO 소개글 HTML 의 <p>·<br> 이 남긴 줄바꿈은 살리지 않는다. 퍼블처럼 소개문 전체가
   한 문단으로 흘러 블록 폭을 채워야 한다 (#11929) */
.bnd-introduction__description {
    color: #000;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -0.36px;
    line-height: 1.56;
    margin: 30px auto 0;
    white-space: normal;
    word-break: keep-all;
}

.bnd-about__luxury {
    border-top: 1px solid var(--bnd-line);
    margin-top: 56px;
    padding-top: 40px;
}

.bnd-coupon,
.bnd-review,
.bnd-empty {
    background: var(--bnd-surface);
    color: var(--bnd-muted);
    margin: 0;
    padding: 40px;
    text-align: center;
}

.bnd-coupon__download {
    background: transparent;
    border: 0;
    cursor: pointer;
}

.bnd-coupon__label,
.bnd-coupon__amount {
    display: block;
}

.bnd-coupon__amount {
    color: var(--bnd-ink);
    font-size: 24px;
    margin-top: 8px;
}

.bnd-page.is-bnd-ready {
    visibility: visible;
}

.bnd-influencer-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 이미지 배너 — 퍼블 #brandCllection(와이드형) · #brandExhList(카드형) (#11811) */
.bnd-image-banners {
    overflow: hidden;
    position: relative;
}

.bnd-image-banners__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bnd-image-banners__item {
    flex-shrink: 0;
    min-width: 0;
    position: relative;
}

.bnd-image-banner {
    display: block;
    position: relative;
}

.bnd-image-banner__thumb {
    display: block;
    overflow: hidden;
    position: relative;
}

.bnd-image-banner__thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* 와이드형은 퍼블 .brand_collection_list { margin: 0 -40px } 과 같이 본문 좌우 여백 밖까지 채운다.
   GNB 결합형 메인배너가 있는 홈에만 걸려 있던 규칙이라 그 외 브랜드홈에서는 오른쪽에 여백이
   남았다 (#11841) */
.bnd-image-banners--wide {
    margin: 0 -40px;
}

.bnd-image-banners--wide .bnd-image-banner__thumb {
    aspect-ratio: 12 / 5;
}

.bnd-image-banners--card .bnd-image-banner__thumb {
    aspect-ratio: 4 / 5;
}

/* 숏핑(SHOPPING) — 퍼블 .brand_clip. 좌측 3:4 클립 썸네일 + 우측 제목·부제·상품 리스트.
   값은 퍼블 1440 뷰포트 실측(vw 환산)이다 (#11853) */
.bnd-shopping-swiper {
    overflow: hidden;
    position: relative;
}

.bnd-shopping-swiper__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bnd-shopping-swiper__item {
    display: flex;
    gap: 0 14px;
}

.bnd-shopping-swiper__thumb {
    aspect-ratio: 3 / 4;
    background: var(--bnd-surface);
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 232px;
}

/* 퍼블 .thumb_area::after 재생 아이콘 */
.bnd-shopping-swiper__thumb::after {
    background: url('../img/play_btn.png') no-repeat center center / auto 100%;
    content: '';
    height: 32px;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 32px;
    z-index: 2;
}

/* 재생 중에는 재생 아이콘을 감춘다 (#11985) */
.bnd-shopping-swiper__thumb.is-playing::after {
    display: none;
}

/* 썸네일 이미지·영상은 포인터 이벤트를 받지 않는다. 영상 위에서 마우스를 누른 채 끌면
   브라우저 기본 드래그가 잡혀 Swiper 드래그가 끊겼다 (#11987) */
.bnd-shopping-swiper__thumb img,
.bnd-shopping-swiper__video {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.bnd-shopping-swiper__body {
    min-width: 0;
    width: calc(100% - 245px);
}

.bnd-shopping-swiper__copy {
    color: inherit;
    display: block;
    text-decoration: none;
}

.bnd-shopping-swiper__title {
    color: #111;
    display: block;
    font-size: 17px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnd-shopping-swiper__sub {
    color: #555;
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnd-shopping-swiper__goods {
    display: grid;
    list-style: none;
    margin: 17px 0 0;
    padding: 0;
    row-gap: 11px;
}

.bnd-shopping-goods {
    align-items: center;
    color: inherit;
    display: flex;
    text-decoration: none;
}

.bnd-shopping-goods__thumb {
    aspect-ratio: 3 / 4;
    background: var(--bnd-surface);
    flex: none;
    overflow: hidden;
    width: 91px;
}

.bnd-shopping-goods__thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.bnd-shopping-goods__info {
    min-width: 0;
    padding-left: 11px;
}

.bnd-shopping-goods__brand {
    color: #111;
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnd-shopping-goods__name {
    color: #555;
    font-size: 10px;
    font-weight: 400;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnd-shopping-goods__price {
    align-items: center;
    color: #111;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 500;
    gap: 7px;
    margin-top: 8px;
}

.bnd-shopping-goods__price .discount {
    color: #f20084;
    order: -2;
}

.bnd-shopping-goods__price .discount strong,
.bnd-shopping-goods__price .price,
.bnd-shopping-goods__price .price > strong {
    font-weight: 500;
}

/* 퍼블 .brand_clip .swiper-scrollbar 는 margin-top 만 주고, 색·높이는 상위 래퍼 renewer 의
   공통 규격 `.renewer .swiper-scrollbar`(레일 1px rgba(0,0,0,.1) ::after + 하단 정렬 3px #111
   막대)에서 받는다. /bnd 홈은 그 래퍼가 없으므로 여기서 같은 규격을 직접 그린다 (#11986) */
.bnd-shopping-swiper .swiper-scrollbar {
    background: transparent;
    border-radius: 0;
    bottom: auto;
    height: 3px;
    left: auto;
    margin-top: 40px;
    position: relative;
    width: 100%;
}

.bnd-shopping-swiper .swiper-scrollbar::after {
    background: rgba(0, 0, 0, .1);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

.bnd-shopping-swiper .swiper-scrollbar-drag {
    background: #111;
    border-radius: 0;
    bottom: 0;
    height: 3px;
    top: auto;
}

/* 퍼블 .brand_clip 은 1321px 이상에서 카드 내부 크기를 vw 로 키운다. 고정 px 로 두면
   1440 보다 넓은 화면에서 퍼블보다 작게 보인다 (#11853) */
@media screen and (min-width: 1321px) {
    /* 메인 라인탭은 1321px 이상에서 vw 로 커진다 (#11981). */
    .bnd-curation__tabs {
        gap: 1.04vw;
        margin-bottom: 1.04vw;
    }

    .bnd-curation__tab {
        font-size: 0.83vw;
        height: 2.19vw;
    }

    .bnd-shopping-swiper__item {
        gap: 0 1.04vw;
    }

    .bnd-shopping-swiper__thumb {
        width: 17.55vw;
    }

    .bnd-shopping-swiper__thumb::after {
        height: 2.45vw;
        right: 0.94vw;
        top: 0.94vw;
        width: 2.45vw;
    }

    .bnd-shopping-swiper__body {
        width: calc(100% - 18.59vw);
    }

    .bnd-shopping-swiper__title {
        font-size: 1.25vw;
    }

    .bnd-shopping-swiper__sub {
        font-size: 0.83vw;
        margin-top: 0.63vw;
    }

    .bnd-shopping-swiper__goods {
        margin-top: 1.25vw;
        row-gap: 0.83vw;
    }

    .bnd-shopping-goods__thumb {
        width: 6.93vw;
    }

    .bnd-shopping-goods__info {
        padding-left: 0.83vw;
    }

    .bnd-shopping-goods__brand {
        font-size: 0.83vw;
    }

    .bnd-shopping-goods__name {
        font-size: 0.73vw;
        margin-top: 0.36vw;
    }

    .bnd-shopping-goods__price {
        font-size: 0.83vw;
        margin-top: 0.57vw;
    }
}

/* 배너 타이틀 — 퍼블 기준: 와이드형은 딤 위 중앙, 카드형은 이미지 아래 (#11814) */
.bnd-image-banner__info {
    display: block;
}

.bnd-image-banner__title {
    display: block;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
}

.bnd-image-banner__sub {
    display: block;
    font-size: 16px;
    margin-top: 12px;
}

.bnd-image-banners--card .bnd-image-banner__info {
    padding-top: 20px;
}

.bnd-image-banners--card .bnd-image-banner__sub {
    color: #555;
}

.bnd-image-banners--wide .bnd-image-banner {
    display: block;
    position: relative;
}

.bnd-image-banners--wide .bnd-image-banner__thumb::after {
    background: #000;
    content: '';
    inset: 0;
    opacity: 0.2;
    position: absolute;
}

/* 퍼블 .brand_collection_list .tit_area h3 / p: 와이드형은 카드형(24px/16px)보다 크고
   타이틀·서브 사이 여백이 없다 (#11843) */
.bnd-image-banners--wide .bnd-image-banner__title {
    font-size: 38px;
    line-height: 1.68;
}

.bnd-image-banners--wide .bnd-image-banner__sub {
    font-size: 20px;
    line-height: 1.5;
    margin-top: 0;
}

.bnd-image-banners--wide .bnd-image-banner__info {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    padding: 0 40px;
    position: absolute;
    text-align: center;
}

.bnd-influencer-grid img {
    display: block;
    height: auto;
    width: 100%;
}

.bnd-module--two_row .bnd-goods-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bnd-ai-copy {
    margin: 0 0 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
 * 리뷰(커스텀형): 대표 리뷰 1건 + 대표 상품, 나머지 리뷰 상품 가로 슬라이드 (#11807)
 * ------------------------------------------------------------------ */
.bnd-custom-review__lead {
    align-items: center;
    display: grid;
    gap: 40px;
    grid-template-columns: 320px minmax(0, 1fr);
    margin-bottom: 40px;
}

.bnd-custom-review__pick {
    position: relative;
}

.bnd-review-pick {
    display: block;
    text-decoration: none;
    width: 100%;
}

.bnd-review-pick__media {
    aspect-ratio: 3 / 4;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.bnd-review-pick__media img {
    display: block;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.bnd-custom-review__text .grade {
    color: #111;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    margin: 0 0 12px;
}

.bnd-custom-review__text .grade span {
    opacity: 0.2;
}

.bnd-custom-review__text .grade span.active {
    background: none;
    opacity: 1;
}

.bnd-custom-review__text .content {
    color: #111;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.bnd-review-swiper .prd-info {
    padding-top: 12px;
}

/* 퍼블 .brand_review 2단 레이아웃 — 왼쪽에 대표 상품 이미지, 오른쪽에 제목·별점·리뷰 본문·
   상품 슬라이드. GNB 결합형 홈에만 걸려 있어 비결합형 브랜드홈에서는 상품 슬라이드가
   대표 이미지 아래로 떨어졌다 (#11915). 위 기본 규칙을 덮어써야 하므로 뒤에 둔다. */
.bnd-module--review.bnd-module--custom {
    display: grid;
    gap: 0 22px;
    grid-template-columns: 32.6% minmax(0, 1fr);
    grid-template-rows: 1fr max-content max-content max-content 1fr;
}

.bnd-module--review.bnd-module--custom > .bnd-module__title {
    grid-column: 2;
    grid-row: 2;
}

.bnd-module--review.bnd-module--custom .bnd-custom-review,
.bnd-module--review.bnd-module--custom .bnd-custom-review__lead {
    display: contents;
}

.bnd-module--review.bnd-module--custom .bnd-custom-review__pick {
    grid-column: 1;
    grid-row: 1 / -1;
}

.bnd-module--review.bnd-module--custom .bnd-custom-review__text {
    grid-column: 2;
    grid-row: 3;
}

/* .swiper-container 의 margin-left/right:auto 가 그대로 남으면 그리드 아이템 폭이 트랙(1fr) 대신
   fit-content 로 잡혀 슬라이드 전체 폭까지 부풀고, Swiper 의 observer 재계산마다 더 커진다 (#11845) */
.bnd-module--review.bnd-module--custom .bnd-review-swiper {
    grid-column: 2;
    grid-row: 4;
    margin: 56px 0 0;
    min-width: 0;
}

.bnd-custom-review__text .grade {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 5.28px;
    margin: 0;
}

.bnd-custom-review__text .content {
    font-size: 18px;
    line-height: 1.3;
    margin-top: 10px;
    word-break: keep-all;
}

/* 리뷰 슬라이드는 신상품 유닛과 같은 상품 유닛을 쓰되, 퍼블 .brand_review .best_review_area
   실측대로 이미지 바로 아래 상품명(5px), 그 아래 가격(8px) 이다 (신상품은 20px/4px) (#11845) */
.bnd-review-swiper .prd-info {
    padding: 0;
}

.bnd-review-swiper .prd-price {
    margin-top: 8px;
}

/* ------------------------------------------------------------------
 * #11807 PC 브랜드 홈 퍼블 UI 정합
 * 적용 범위는 홈과 GNB_COMBINED 셸로 제한해 브랜드 서브 페이지를 보존한다.
 * ------------------------------------------------------------------ */
body:has(.bnd-page) .container {
    padding-top: 0;
}

body:has(.bnd-page) #wrapper > header {
    position: relative;
}

body:has(.bnd-page) #wrapper > header > .center-wrap {
    background: none;
    height: auto;
    padding: 0;
}

body:has(.bnd-page) #wrapper > header .gnb-menu,
body:has(.bnd-page) #wrapper > header .logo,
body:has(.bnd-page) #wrapper > header .gnb,
body:has(.bnd-page) #wrapper > header .header-gnb,
body:has(.bnd-page) #wrapper > header .sticky-wrapper {
    display: none;
}

/* 퍼블 `body:has(.bnd-page) #wrapper > header .header-top { padding: 0 40px }` (260910).
   브랜드홈 본문 좌우 여백과 같은 값이다 (#11970).
   폭 100% 로 두면 유틸 메뉴가 화면 오른쪽 끝에 붙어 본문 1920 영역 밖으로 나간다.
   본문 .center-wrap 상한과 같은 1920 을 고정 폭으로 주고 가운데 정렬한다 (#11990) */
body:has(.bnd-page) #wrapper > header .header-top {
    box-sizing: border-box;
    margin: 0;
    padding: 0 40px;
    pointer-events: none;
    position: fixed;
    left: 50%;
    top: 0;
    width: 1920px;
    margin-left: -960px;
}

body:has(.bnd-page) #wrapper > header .form-search,
body:has(.bnd-page) #wrapper > header .util-menu {
    height: 90px;
    pointer-events: auto;
}

body:has(.bnd-page) #wrapper > header .search-layer {
    pointer-events: auto;
}

/* #11807 숨김 검색 레이어의 fixed 딤이 PC 메인배너 위에 잔류하지 않도록 가상 요소도 제거한다. */
body:has(.bnd-page) #wrapper > header .search-layer[style*="display:none"]::after,
body:has(.bnd-page) #wrapper > header .search-layer[style*="display: none"]::after {
    content: none;
    display: none;
}

/* 퍼블 브랜드홈은 레거시와 같은 .center-wrap(min-width 1320 / max-width 1920) 안에 들어간다.
   상한을 없애면 헤더·푸터가 1920 에서 멈춘 뒤에도 본문만 계속 넓어져, 축소 시 페이지가
   비례 축소되지 않고 글자만 작아 보인다. 공통 레이아웃과 같은 1920 을 상한으로 둔다 (#11851) */
.bnd-page--home:has(.bnd-module--gnb_combined) {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1920px;
    padding: 0 40px 120px;
    width: 100%;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-header {
    align-items: center;
    background: transparent;
    border-bottom: 0;
    box-sizing: border-box;
    display: flex;
    height: 90px;
    justify-content: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 22;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-header::before {
    background: #fff;
    content: '';
    height: 90px;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

.bnd-page--home:has(.bnd-module--gnb_combined).is-bnd-at-top .bnd-header::before {
    opacity: 0;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-header__identity {
    min-height: 90px;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-header__home {
    gap: 0;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-header__logo {
    height: auto;
    max-height: 40px;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-header__name-en {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 90px;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-header__name-ko {
    display: none;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-gnb {
    left: 0;
    margin-top: 0;
    overflow: visible;
    position: absolute;
    top: 0;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-gnb__list {
    gap: 24px;
    justify-content: flex-start;
}

/* GNB 글자색은 퍼블 renewal.css 의 .brand_home_header .tab-ui 기준이다 (#11892).
   흰 배경(스크롤 후)은 .tab-b 기본값인 비활성 #999 / 활성 #111,
   히어로 위(최상단)는 비활성 rgba(255,255,255,.6) / 활성 #fff 로 둘을 구분한다. */
.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-gnb__link {
    color: #999;
    font-size: 15px;
    font-weight: 400;
    line-height: 90px;
    padding: 0;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-gnb__item.is-active .bnd-gnb__link {
    color: var(--bnd-ink);
}

.bnd-page--home:has(.bnd-module--gnb_combined).is-bnd-at-top .bnd-gnb__link {
    color: rgba(255, 255, 255, .6);
}

.bnd-page--home:has(.bnd-module--gnb_combined).is-bnd-at-top .bnd-header__home,
.bnd-page--home:has(.bnd-module--gnb_combined).is-bnd-at-top .bnd-gnb__item.is-active .bnd-gnb__link {
    color: #fff;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-page__content {
    padding-top: 0;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-module--main_banner.bnd-module--gnb_combined {
    height: 800px;
    margin: -91px -40px 0;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-module--main_banner.bnd-module--gnb_combined .bnd-hero,
.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-module--main_banner.bnd-module--gnb_combined .bnd-hero__slide {
    height: 800px;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__link {
    align-items: center;
    display: flex;
    height: 100%;
    position: relative;
}

/* 퍼블 `.full_type .brand_intro_img .img-wrap::before` — 전폭 히어로 위 33% 딤.
   흰 카피가 밝은 이미지에서도 읽히게 한다. 흐린 배경(.bnd-hero__backdrop)에 걸리는
   50% 딤과는 다른 규칙이다 (#11947, 퍼블 260909) */
.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide
        .bnd-hero__slide:not(.bnd-hero__slide--mo-fallback) .bnd-hero__link::before {
    background: rgba(0, 0, 0, .33);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__link > img {
    aspect-ratio: auto;
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    width: 100%;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero__copy {
    color: #fff;
    box-sizing: border-box;
    display: block;
    left: auto;
    margin: 0 auto;
    padding-top: 90px;
    position: relative;
    top: auto;
    transform: none;
    width: 1230px;
    z-index: 3;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero__title {
    display: block;
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -1.28px;
    line-height: 1.12;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero__subtitle {
    display: block;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -.36px;
    line-height: 1.5;
    margin-top: 32px;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__slide--mo-fallback {
    aspect-ratio: auto;
    height: 800px;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__slide--mo-fallback .bnd-hero__backdrop {
    filter: blur(40px);
    inset: -70px;
    transform: none;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__slide--mo-fallback .bnd-hero__backdrop::after {
    background: rgba(0, 0, 0, .5);
    content: '';
    inset: 0;
    position: absolute;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__slide--mo-fallback .bnd-hero__link {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    padding-bottom: 26px;
    padding-top: 90px;
    text-align: left;
    width: 1280px;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__slide--mo-fallback .bnd-hero__copy {
    flex: 0 1 auto;
    margin: 0;
    padding-top: 0;
    position: static;
    width: auto;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__slide--mo-fallback .bnd-hero__link:has(.bnd-hero__copy) {
    justify-content: space-between;
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-hero--wide .bnd-hero__slide--mo-fallback .bnd-hero__link > img {
    aspect-ratio: 3 / 4;
    flex: 0 0 400px;
    height: auto;
    inset: auto;
    object-fit: cover;
    position: static;
    width: 400px;
}

.bnd-image-banners--wide [class^="swiper-button-"]::after {
    border: 2px solid #fff;
    border-width: 2px 2px 0 0;
    content: '';
    height: 30px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 30px;
}

.bnd-image-banners--wide .swiper-button-prev {
    left: 40px;
}

.bnd-image-banners--wide .swiper-button-next {
    right: 40px;
}

.bnd-image-banners--wide .swiper-button-prev::after {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.bnd-image-banners--wide .swiper-button-next::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-goods-grid,
.bnd-page--home:has(.bnd-module--gnb_combined) .bnd-module--two_row .bnd-goods-grid {
    column-gap: 1.389%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bnd-image-banners--card .bnd-image-banner__thumb {
    aspect-ratio: 3 / 4;
}

.bnd-image-banners--card .bnd-image-banner__info {
    padding-top: 10px;
}

/* 24px/16px 은 퍼블 .brand_exh_list(카드형) 값이다. 와이드형은 위에서 38px/20px 로 잡는다 (#11843) */
.bnd-image-banners--card .bnd-image-banner__title {
    font-size: 24px;
    line-height: 32px;
}

.bnd-image-banners--card .bnd-image-banner__sub {
    font-size: 16px;
    margin-top: 4px;
}

.bnd-image-banners--wide [class^="swiper-button-"] {
    background: none;
    height: 100px;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    width: 100px;
}

.bnd-lookbook-swiper {
    overflow: hidden;
    position: relative;
}

/* 홈 임베드만 가로 슬라이드다. 카드·캡션·딤은 서브 목록과 같은 퍼블 규격을 쓴다 (#11936) */
.bnd-lookbook-grid--home {
    display: flex;
    gap: 0;
    grid-template-columns: none;
    margin-top: 0;
}

/* 퍼블 `.lookbook_wrap .swiper-scrollbar { position: relative; left: auto; bottom: auto }`.
   library.css 의 `.swiper-container-horizontal > .swiper-scrollbar { left: 1%; bottom: 3px }`
   를 지우지 않으면 레일이 컨테이너 폭의 1% (1280px 에서 12.8px) 만큼 오른쪽으로 밀려
   카드 왼쪽과 시작점이 어긋난다 (#11968) */
.bnd-lookbook-swiper .swiper-scrollbar {
    background: rgba(0, 0, 0, .1);
    border-radius: 0;
    bottom: auto;
    height: 1px;
    left: auto;
    margin-top: 40px;
    position: relative;
    width: 100%;
}

.bnd-lookbook-swiper .swiper-scrollbar-drag {
    background: #000;
    border-radius: 0;
    height: 2px;
    top: -1px;
}

.bnd-module--intro_text .bnd-introduction {
    margin-left: -40px;
    margin-right: -40px;
}

.bnd-introduction__inner {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1230px;
    padding: 80px 0;
}

.bnd-introduction__title {
    font-size: 40px;
    font-weight: 600;
}

.bnd-introduction__description {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 20px;
}

.bnd-module--coupon {
    margin-left: -40px;
    margin-right: -40px;
}

/* 퍼블 renewal.css 2차(260910) `.brand_home_top ~ div.brand_coupon_banner { margin-top: 0 }`
   와 `... + div { margin-top: 40px }`. 쿠폰 바는 앞 블록에 붙고 여백은 아래로만 둔다.
   상하 40px 이던 `#11962` 를 대체한다 (#11967, 모바일도 같다).
   PC 기본 블록 간격은 100px 이라 다음 블록 쪽 규칙도 함께 있어야 한다. */
.bnd-module--coupon {
    margin-top: 0;
}

.bnd-module--coupon + .bnd-module {
    margin-top: 40px;
}

.bnd-coupon {
    background: #000;
    padding: 0;
}

.bnd-coupon__download {
    align-items: center;
    color: #fff;
    display: flex;
    gap: 10px;
    height: 70px;
    margin: 0 auto;
    max-width: 1230px;
    width: 100%;
}

.bnd-coupon__label,
.bnd-coupon__amount {
    color: #fff;
    display: inline;
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
}

/* 퍼블 `.brand_coupon_banner a::after` — 오른쪽 끝에 붙는 흰 화살표. 서버 renewal.css 에
   #11495 절이 없어 빠져 있었다 (#11947) */
.bnd-coupon__download::after {
    border: 1px solid #fff;
    border-width: 1px 1px 0 0;
    content: "";
    height: 11px;
    margin-left: auto;
    transform: rotate(45deg);
    width: 11px;
}

/* ------------------------------------------------------------------
 * #11869 서브 페이지 상단 헤더
 * 홈(GNB_COMBINED)과 같은 압축 바를 처음부터 상단에 고정한다.
 * 왼쪽 GNB · 가운데 브랜드명 · 오른쪽 전역 아이콘이 한 줄(90px)로 겹친다.
 * ------------------------------------------------------------------ */
/* 퍼블 서브 페이지 헤더(brand_sub 스코프)는 테두리 없이 흰 바만 깔고, 안쪽 여백이
   .center-wrap(40px) 기준이라 GNB 가 화면 왼쪽에서 40px 에서 시작한다 (#11893).
   퍼블은 헤더를 흐름 안에 두고 sticky 로 붙이며, 흰 바만 화면 전폭으로 따로 깐다.
   메인 결합형 헤더와 같은 기하다 (#11908). */
.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-header {
    align-items: center;
    background: transparent;
    border-bottom: 0;
    box-sizing: border-box;
    display: flex;
    height: 90px;
    justify-content: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 22;
}

.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-header::before {
    background: #fff;
    content: '';
    height: 90px;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-header__identity {
    min-height: 90px;
}

.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-header__home {
    gap: 0;
}

.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-header__logo {
    height: auto;
    max-height: 40px;
}

/* 퍼블 서브 페이지 헤더의 브랜드명과 같은 40px/400. 홈 헤더와도 같은 크기다 (#11893). */
.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-header__name-en {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 90px;
}

/* 한 줄 바에서는 국문명을 접는다. */
.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-header__name-ko {
    display: none;
}

/* 퍼블 `.tab-ui {position: absolute; top: 0; left: 0}` 뿐이라 폭 제한이 없다.
   상한을 두고 끝을 흐리던 예전 방식은 탭이 많은 브랜드에서 앞 메뉴를 밀어내
   HOME 이 화면 밖으로 빠졌다 (#11908). */
.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-gnb {
    left: 0;
    margin-top: 0;
    overflow: visible;
    position: absolute;
    top: 0;
}

.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-gnb__list {
    gap: 24px;
    justify-content: flex-start;
}

/* 홈과 같은 규칙: 비활성 #999, 활성 #111 로 색만 바뀐다 (퍼블 .tab-b, #11893). */
.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-gnb__link {
    color: #999;
    font-size: 15px;
    font-weight: 400;
    line-height: 90px;
    padding: 0;
}

.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-gnb__item.is-active .bnd-gnb__link {
    color: var(--bnd-ink);
}

/* 헤더가 흐름 안에 있어 본문이 바로 아래에서 시작한다. 퍼블도 90px 바 다음 줄이
   곧바로 필터다 (#11908). */
.bnd-page:not(:has(.bnd-module--gnb_combined)) .bnd-page__content {
    padding-top: 0;
}

/* 퍼블 `:has(.brand_sub) .goods_filtering {position: sticky; top: 90px; z-index: 999}`.
   헤더가 90px 로 고정돼 있으므로 필터 줄도 그 바로 아래에 붙어 함께 남는다 (#11899). */
.bnd-page:not(:has(.bnd-module--gnb_combined)) .goods_filtering {
    position: sticky;
    top: 90px;
    will-change: top;
    z-index: 999;
}

/* 레거시 .center-wrap 의 좌우 46px 가 .bnd-page 의 40px 위에 또 붙어 목록만 86px 안으로
   들어가 있었다. 퍼블은 `:has(.brand_sub) .center-wrap {padding: 0 40px}` 하나뿐이라
   GNB·필터·상품 그리드가 모두 화면에서 40px 에 맞춰진다 (#11893). */
.bnd-page .center-wrap {
    padding-left: 0;
    padding-right: 0;
}

/* #11871 건수 표기와 오른쪽 정렬 필터 사이 간격. */
.bnd-page .goods_list_header .prd-top .total {
    margin-right: 10px;
}