/* ════════════════════════════════════════════════════
   브랜드 상세 페이지 — 상품 그리드 통일 스킨
   brand_detail.php / brand_detail_2.php / brand_detail_3.php 공용
   ════════════════════════════════════════════════════ */

/* ── 그리드 (5/4/3/2 반응형) ── */
#brand_list {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;   /* 행 높이 균일 */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
@media (max-width: 1279px) { #brand_list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 1023px) { #brand_list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 767px)  { #brand_list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } }

/* ── 카드 — 균일 사이즈, 호버 안정 ── */
#brand_list .brand_detail_item_box {
    width: auto !important;            /* 인라인 width:205px 무력화 */
    max-width: 100% !important;
    margin: 0 !important;              /* mx-auto 무력화 */
    height: 100% !important;
    background: #fff !important;
    border: 2px solid #ebedf0 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    overflow: hidden !important;
    transform: none !important;
    scale: 1 !important;
    position: relative !important;     /* stretched-link 기준점 */
    cursor: pointer !important;
}
#brand_list .brand_detail_item_box:hover {
    border-color: #f8b500 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(248, 181, 0, 0.18) !important;
    scale: 1 !important;
}

/* sct_cartop / 가격 토글 숨김 */
#brand_list .brand_detail_item_box .sct_cartop { display: none !important; }

/* a wrapper (img 만 감싸는 경우) — 카드 자체가 a인 경우는 영향 없음 */
#brand_list .brand_detail_item_box > a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}
/* stretched-link — 카드 안의 a (이미지 wrapper) 의 hit area 를 카드 전체로 확장
   _1.php / _2.php 처럼 a 가 image 만 감싸는 경우, 텍스트·가격 영역도 클릭 가능
   _3.php 처럼 카드 자체가 a 인 경우는 :not(::before/after) 매칭이라 무관 */
#brand_list div.brand_detail_item_box > a::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: 8px !important;
    pointer-events: auto !important;
}
/* 카드 안의 다른 클릭 요소(장바구니/더보기 버튼 등)는 stretched-link 위로 */
#brand_list .brand_detail_item_box .rec_icon,
#brand_list .brand_detail_item_box .rec_icon a,
#brand_list .brand_detail_item_box .rec_icon button,
#brand_list .brand_detail_item_box .custom_btn_cart,
#brand_list .brand_detail_item_box .special_btn {
    position: relative !important;
    z-index: 2 !important;
}

/* ── 이미지 영역 — 정사각 1:1 + contain ── */
#brand_list .brand_detail_item_box img.brand_img,
#brand_list .brand_detail_item_box img.brand_detail_img,
#brand_list .brand_detail_item_box a img,
#brand_list .brand_detail_item_box > img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: #fafafa !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
}
/* 인라인 style="height:205px" 등 강제 무력화 */
#brand_list .brand_detail_item_box img[style*="height"],
#brand_list .brand_detail_item_box img[style*="width"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}

/* ── 메이커명 — 흰 pill + amber accent 보더 + 진한 amber 텍스트 ── */
#brand_list .manu-name {
    display: inline-block !important;
    background: #fff !important;
    color: #b45309 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    margin: 12px auto 6px !important;
    padding: 4px 14px !important;
    border: 1.5px solid #f8b500 !important;
    border-radius: 999px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 90% !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 6px rgba(248, 181, 0, 0.15) !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}
/* 부모 영역 중앙정렬 보정 */
#brand_list .pt-6,
#brand_list .brand_detail_item_box .pt-6 { text-align: center !important; }

/* ── 상품명 — 3줄 고정, 가운데 정렬 ── */
#brand_list .brand_detail_item_name,
#brand_list .recommend_item_name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 58px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: keep-all !important;
    text-align: center !important;
}

/* ── 가격 영역 — 카드 하단 고정 + 할인/정상가 높이 통일 (min-height 60px) ── */
#brand_list .price_tab_div {
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px dashed #f0f0f0 !important;
    min-height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}
/* 가격 자식 요소 모두 중앙 정렬 */
#brand_list .price_tab_div > *,
#brand_list .price_tab_div .rec_price,
#brand_list .price_tab_div .kp-price,
#brand_list .price_tab_div .kp-price-list,
#brand_list .price_tab_div .kp-price-final,
#brand_list .price_tab_div .kp-price-orig,
#brand_list .price_tab_div .kp-price-row-final,
#brand_list .price_tab_div .kp-price-quote-badge,
#brand_list .price_tab_div .real_price_txt,
#brand_list .price_tab_div p {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}
#brand_list .price_tab_div .kp-price-list {
    display: flex !important;
    align-items: center !important;
}
#brand_list .brand_detail_item_box .pt-6,
#brand_list .brand_detail_item_box .pr-6,
#brand_list .brand_detail_item_box > div {
    padding: 0 !important;
}

/* ── 장바구니 / 위시리스트 버튼 (카드 하단) — 통일 사이즈 ── */
#brand_list .kp-card-actions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 10px !important;
    width: 100% !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;  /* stretched-link 위로 */
}
#brand_list .kp-card-actions button,
#brand_list .kp-card-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    max-width: 56px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: border-color .12s ease, color .12s ease, background .12s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
#brand_list .kp-card-actions .kp-card-btn-cart:hover,
#brand_list .kp-card-actions .btn_cart:hover {
    color: #16a34a !important; border-color: #16a34a !important; background: #f0fdf4 !important;
}
#brand_list .kp-card-actions .kp-card-btn-wish:hover,
#brand_list .kp-card-actions .btn_wish:hover {
    color: #ef4444 !important; border-color: #ef4444 !important; background: #fef2f2 !important;
}

/* ── 모바일 — 패딩/폰트 축소 ── */
@media (max-width: 767px) {
    #brand_list .brand_detail_item_box { padding: 10px !important; }
    #brand_list .brand_detail_item_name,
    #brand_list .recommend_item_name { font-size: 13px !important; height: 54px !important; }
    #brand_list .brand_detail_item_box img.brand_img,
    #brand_list .brand_detail_item_box img.brand_detail_img,
    #brand_list .brand_detail_item_box a img,
    #brand_list .brand_detail_item_box > img { padding: 10px !important; }
}

/* ── custom_hover.css 의 .brand_item 룰 충돌 방지 ── */
#brand_list .brand_item,
#brand_list .brand_item:hover {
    transform: none !important;
    scale: 1 !important;
    translate: 0 0 !important;
}

/* ════════════════════════════════════════════════════
   브랜드 상세 페이지 헤더 — 모던 톤앤매너
   .subpage_title + #brand_info 영역 디자인 개선
   ════════════════════════════════════════════════════ */
.subpage_title {
    margin: 18px 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
}
.subpage_title h3 {
    margin: 0 !important;
    padding: 14px 22px !important;
    background: linear-gradient(135deg, #fff8e6 0%, #fff 100%);
    border-left: 4px solid #f8b500;
    border-radius: 0 8px 8px 0;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    letter-spacing: -0.3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.subpage_title h3 a {
    color: #6b7280 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: color .12s ease;
}
.subpage_title h3 a:hover { color: #f8b500 !important; }

/* ════════════════════════════════════════════════════
   NEW B-style 브랜드 hero — 좌: 브랜드 카드 / 우: 인기 상품 4개 썸네일
   ════════════════════════════════════════════════════ */
.kp-brand-hero {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px 32px;
    margin: 18px 0 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: visible;
}
/* 상단 amber 띠 */
.kp-brand-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #f8b500 0%, #fcae18 50%, #f8b500 100%);
    border-radius: 14px 14px 0 0;
}
/* 좌상단 back 링크 */
.kp-brand-hero .kp-brand-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 4px 10px;
    font-size: 12px;
    color: #6b7280 !important;
    background: #f3f4f6;
    border-radius: 999px;
    text-decoration: none !important;
    transition: all .12s ease;
    font-weight: 600;
}
.kp-brand-hero .kp-brand-back:hover {
    background: #fff8e6;
    color: #b45309 !important;
}

/* 그리드 레이아웃 — 좌 35% / 우 65% */
.kp-brand-hero-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: stretch;
}

/* ── 좌측 브랜드 카드 ── */
.kp-brand-hero-left {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 18px 12px;
    background: linear-gradient(135deg, #fff8e6 0%, #fffbeb 50%, #fff 100%);
    border-radius: 12px;
    border: 1px solid #fde68a;
}
.kp-brand-hero-logo {
    width: 130px; height: 130px;
    background: #fff;
    border-radius: 14px;
    border: 2px solid #f8b500;
    padding: 14px;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(248, 181, 0, 0.18);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.kp-brand-hero-logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.kp-brand-hero-name {
    margin: 0 0 10px !important;
    font-size: 22px;
    font-weight: 900;
    color: #1f2937;
    letter-spacing: -0.5px;
    line-height: 1.25;
    word-break: keep-all;
}
.kp-brand-hero-meta {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
}
.kp-brand-hero-count {
    display: inline-flex; align-items: baseline; gap: 3px;
    padding: 5px 12px;
    background: #fff;
    border: 1.5px solid #f8b500;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    box-shadow: 0 2px 6px rgba(248, 181, 0, 0.15);
}
.kp-brand-hero-count strong {
    color: #f8b500;
    font-weight: 900;
    font-size: 14px;
}

/* ── 우측 인기 상품 미리보기 ── */
.kp-brand-hero-right {
    display: flex; flex-direction: column;
    min-width: 0;
}
.kp-brand-hero-label {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 14px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #f8b500 0%, #fcae18 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(248, 181, 0, 0.35);
    letter-spacing: 0.3px;
    align-self: flex-start;
    text-shadow: 0 1px 1.5px rgba(0,0,0,0.25);
    line-height: 1;
}
.kp-brand-hero-label i {
    color: #fff;
    font-size: 14px;
}
.kp-brand-hero-label .kp-label-count {
    display: inline-flex; align-items: center;
    margin-left: 5px;
    padding: 3px 9px;
    background: #fff;
    color: #b45309;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.kp-brand-hero-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    flex: 1;
}
.kp-brand-hero-prod {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* ── 좌측 상단 랭크 뱃지 (1~4) ── */
.kp-brand-hero-rank {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
    pointer-events: none;
}
/* TOP 1~3 — amber/gold 강조 */
.kp-brand-hero-rank.is-top {
    background: linear-gradient(135deg, #ffd700 0%, #f8b500 50%, #ff8a00 100%);
    box-shadow: 0 4px 12px rgba(248,138,0,0.45);
    color: #fff;
}
.kp-brand-hero-prod:hover {
    border-color: #f8b500;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(248, 181, 0, 0.18);
}
.kp-brand-hero-prod-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fafafa;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.kp-brand-hero-prod-img img {
    max-width: 88%; max-height: 88%;
    width: auto; height: auto;
    object-fit: contain;
    transition: transform .25s ease;
}
.kp-brand-hero-prod-img img.is-fallback {
    max-width: 50% !important; max-height: 50% !important; opacity: 0.55;
}
.kp-brand-hero-prod:hover .kp-brand-hero-prod-img img { transform: scale(1.05); }
.kp-brand-hero-prod-name {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #374151;
    background: #fff;
    border-top: 1px solid #f3f4f6;
    /* 2줄 clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    min-height: 2.8em;
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
    .kp-brand-hero-grid { grid-template-columns: 240px 1fr; gap: 22px; }
    .kp-brand-hero-products { gap: 8px; }
}
@media (max-width: 800px) {
    .kp-brand-hero-grid { grid-template-columns: 1fr; gap: 20px; }
    .kp-brand-hero-left { flex-direction: row; gap: 18px; padding: 16px 18px; text-align: left; }
    .kp-brand-hero-left .kp-brand-hero-logo { width: 88px; height: 88px; padding: 8px; margin-bottom: 0; flex-shrink: 0; }
    .kp-brand-hero-left .kp-brand-hero-info { flex: 1; }
    .kp-brand-hero-name { font-size: 19px; }
    .kp-brand-hero-meta { justify-content: flex-start; }
}
/* 모바일: 히어로 인기상품 4열 → 2열 (767px 이하) */
@media (max-width: 767px) {
    .kp-brand-hero { padding: 18px 14px; margin: 12px 0 20px; }
    .kp-brand-hero-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kp-brand-hero-prod-name { font-size: 11px; padding: 6px 8px; }
    .kp-brand-hero-left { padding: 14px; }
    .kp-brand-hero-logo { width: 72px !important; height: 72px !important; }
    .kp-brand-hero-name { font-size: 17px; }
}

/* 기존 #brand_info 가 다른 곳에서 쓰일 가능성 대비 — 숨김 */
#brand_info { display: none !important; }
.subpage_title { display: none !important; }

/* ════════════════════════════════════════════════════
   (이전) 브랜드 정보 카드 스타일 — 사용 안 하지만 호환성 위해 보존
   ════════════════════════════════════════════════════ */
/* 브랜드 정보 카드 — 시각적으로 풍성한 디자인 (gradient blob + 큰 로고 + 칩) */
#brand_info {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
    margin: 0 0 32px !important;
    padding: 32px 40px !important;
    background: linear-gradient(135deg, #fff8e6 0%, #fffbeb 40%, #fff 100%);
    border: 1px solid #f8b500;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(248, 181, 0, 0.10);
    position: relative;
    overflow: hidden;
    min-height: 160px;
}
/* 상단 amber gradient strip */
#brand_info > .kp-brand-strip {
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #f8b500 0%, #fcae18 50%, #f8b500 100%);
    z-index: 2;
}
/* 데코 — 우측 상단 amber 큰 원 (radial gradient) */
#brand_info::before {
    content: '';
    position: absolute;
    right: -100px; top: -100px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(248, 181, 0, 0.16) 0%, rgba(248, 181, 0, 0.05) 50%, transparent 75%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
/* 데코 — 우측 하단 amber 작은 원 */
#brand_info::after {
    content: '';
    position: absolute;
    right: 80px; bottom: -50px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(248, 181, 0, 0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* 로고 컨테이너 — 크게, 강조 */
#brand_info .img {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 140px; height: 140px;
    background: #fff;
    border-radius: 14px;
    border: 2px solid #f8b500;
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(248, 181, 0, 0.18);
    position: relative;
    z-index: 1;
}
#brand_info .img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
}

/* 텍스트 영역 */
#brand_info ul {
    flex: 1;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    min-width: 0;
}
#brand_info ul li {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}
#brand_info ul li.name {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    letter-spacing: -0.8px !important;
    margin-bottom: 14px !important;
    line-height: 1.2 !important;
}

/* 칩 영역 (총 상품 카운트 + 데코 칩) */
#brand_info .kp-brand-chips {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px !important;
    padding: 0 !important;
}
#brand_info .kp-brand-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #b45309;
    background: #fff;
    border: 1.5px solid #f8b500;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(248, 181, 0, 0.12);
    line-height: 1.4;
    transition: transform .12s ease, box-shadow .12s ease;
}
#brand_info .kp-brand-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(248, 181, 0, 0.22);
}
#brand_info .kp-brand-chip strong { color: #f8b500; font-weight: 900; }
#brand_info .kp-brand-chip i { color: #f8b500; }
#brand_info .kp-brand-chip.kp-chip-amber {
    background: linear-gradient(135deg, #f8b500 0%, #fcae18 100%);
    color: #fff;
    border-color: #f8b500;
}
#brand_info .kp-brand-chip.kp-chip-amber strong,
#brand_info .kp-brand-chip.kp-chip-amber i { color: #fff !important; }

#brand_info ul li:empty { display: none; }
#brand_info .clear { display: none; }

@media (max-width: 768px) {
    #brand_info { padding: 24px 22px; gap: 20px; min-height: 0; }
    #brand_info .img { width: 100px; height: 100px; padding: 10px; }
    #brand_info ul li.name { font-size: 22px !important; }
    #brand_info .kp-brand-chip { font-size: 12px; padding: 5px 11px; }
    #brand_info::before { width: 220px; height: 220px; right: -80px; top: -80px; }
    #brand_info::after { display: none; }
}
@media (max-width: 600px) {
    #brand_info { flex-direction: column; align-items: flex-start; }
    #brand_info .img { width: 84px; height: 84px; }
    #brand_info ul li.name { font-size: 19px !important; margin-bottom: 10px !important; }
    .subpage_title h3 { font-size: 16px !important; padding: 12px 18px !important; }
}