/* ============================================================
   beautypay 테마 — 뷰티페이 시안 기반
   핑크/마젠타 포인트 · 유틸바+중앙검색 헤더 · 카테고리 버튼형 GNB
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
    --bp-pink:    #e8336d;
    --bp-crimson: #d6164f;
    --bp-red:     #e8262d;
    --bp-dark:    #222222;
    --bp-text:    #333333;
    --bp-gray:    #888888;
    --bp-border:  #e5e5e5;
    --bp-bg:      #f7f7f7;
}

.bp-body {
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: var(--bp-text);
    background: #fff;
}

.bp-container {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.bp-main { min-height: 55vh; }

.bp-text-pink { color: var(--bp-pink); }

/* ------------------------------------------------------------
   헤더 — 유틸바
   ------------------------------------------------------------ */
.bp-utilbar {
    border-bottom: 1px solid var(--bp-border);
    font-size: 12px;
    background: #fff;
}
.bp-utilbar .bp-tagline { color: var(--bp-gray); line-height: 34px; }
.bp-utillinks li { position: relative; }
.bp-utillinks li + li { margin-left: 18px; }
.bp-utillinks li + li::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: var(--bp-border);
}
.bp-utillinks a {
    color: #666;
    text-decoration: none;
    line-height: 34px;
    display: inline-block;
}
.bp-utillinks a:hover { color: var(--bp-pink); }
.bp-utillinks .bp-admin-link { color: var(--bp-crimson); font-weight: 700; }

/* ------------------------------------------------------------
   헤더 — 로고 / 중앙 검색 / 장바구니
   ------------------------------------------------------------ */
.bp-topbar { padding: 22px 0; background: #fff; }

.bp-logo img { max-height: 52px; }
.bp-logo { text-decoration: none; }
.bp-logo-text {
    font-size: 30px;
    font-weight: 900;
    color: var(--bp-pink);
    letter-spacing: -1px;
}

.bp-search {
    max-width: 420px;
    margin: 0 auto;
    border-bottom: 2px solid var(--bp-dark);
}
.bp-search input {
    border: 0;
    outline: none;
    width: 100%;
    padding: 8px 4px;
    font-size: 14px;
    background: transparent;
}
.bp-search button {
    border: 0;
    background: transparent;
    font-size: 17px;
    color: var(--bp-dark);
    padding: 4px 6px;
}

.bp-cart { text-decoration: none; color: var(--bp-dark); }
.bp-cart:hover { color: var(--bp-pink); }
.bp-cart-icon { font-size: 26px; line-height: 1; }
.bp-cart-badge {
    position: absolute;
    top: -6px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    background: var(--bp-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 0 4px;
}
.bp-cart-label { font-size: 11px; margin-top: 2px; color: var(--bp-gray); }

/* ------------------------------------------------------------
   GNB
   ------------------------------------------------------------ */
.bp-gnb {
    border-top: 1px solid var(--bp-border);
    border-bottom: 1px solid var(--bp-border);
    background: #fff;
}
.bp-allcat {
    background: var(--bp-crimson);
    color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 700;
    padding: 0 26px;
    height: 100%;
    min-height: 50px;
}
.bp-allcat:hover { background: var(--bp-pink); }
.bp-allcat-menu {
    max-height: 70vh;
    overflow-y: auto;
    min-width: 220px;
    border-radius: 0;
    border-color: var(--bp-border);
}
.bp-allcat-menu .dropdown-item:hover { color: var(--bp-pink); background: #fdf2f6; }

.bp-gnb-menu {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.bp-gnb-menu::-webkit-scrollbar { display: none; }
.bp-gnb-menu > li > a {
    display: inline-block;
    padding: 0 18px;
    line-height: 50px;
    color: var(--bp-dark);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.bp-gnb-menu > li > a:hover { color: var(--bp-pink); }
.bp-gnb-menu .dropdown-menu { border-radius: 0; border-color: var(--bp-border); }
.bp-gnb-menu .dropdown-item:hover { color: var(--bp-pink); background: #fdf2f6; }
.bp-gnb-sale {
    color: #fff !important;
    background: var(--bp-red);
    line-height: 28px !important;
    padding: 0 12px !important;
    margin: 11px 0 0 10px;
    border-radius: 3px;
    font-style: italic;
}
.bp-gnb-sale:hover { opacity: .85; }

/* ------------------------------------------------------------
   메인 — 히어로 / 카테고리 스트립
   ------------------------------------------------------------ */
.bp-hero-img { width: 100%; display: block; object-fit: cover; }

.bp-catstrip { padding: 34px 16px 10px; }
.bp-catstrip li { margin: 0 14px 16px; text-align: center; }
.bp-catstrip a { text-decoration: none; display: block; }
.bp-cat-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 8px;
    border: 1px solid var(--bp-border);
    border-radius: 50%;
    background: #fff;
    color: var(--bp-dark);
    font-size: 20px;
    font-weight: 700;
    transition: all .15s;
}
.bp-catstrip a:hover .bp-cat-circle {
    border-color: var(--bp-pink);
    color: var(--bp-pink);
    box-shadow: 0 4px 10px rgba(232, 51, 109, .15);
}
.bp-cat-name { font-size: 12.5px; color: var(--bp-text); }

/* ------------------------------------------------------------
   섹션 공통
   ------------------------------------------------------------ */
.bp-section { padding: 36px 16px; }
.bp-section-head { margin-bottom: 26px; }
.bp-section-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--bp-dark);
    margin-bottom: 6px;
}
.bp-section-title i { color: var(--bp-pink); font-size: 22px; }
.bp-section-title em { font-style: normal; color: var(--bp-pink); }
.bp-section-sub { color: var(--bp-gray); font-size: 13.5px; margin: 0; }

/* ------------------------------------------------------------
   상품 카드
   ------------------------------------------------------------ */
.bp-card {
    border: 1px solid var(--bp-border);
    background: #fff;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}
.bp-card:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.bp-card-thumb {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bp-bg);
}
.bp-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bp-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ccc;
    font-size: 42px;
}
.bp-card-body { padding: 12px 12px 14px; }
.bp-card-cat {
    font-size: 11.5px;
    color: var(--bp-gray);
    margin-bottom: 3px;
}
.bp-card-name {
    font-size: 13.5px;
    color: var(--bp-text);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-card-price { margin-top: 6px; }
.bp-card-price del { color: #bbb; font-size: 12px; margin-right: 5px; }
.bp-card-price strong { color: var(--bp-pink); font-size: 15.5px; }
.bp-card-price strong.text-dark { color: var(--bp-dark); }

/* 할인율 배지 */
.bp-card-rate {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bp-pink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 9px;
}

/* BEST 리본 */
.bp-ribbon {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 2;
    background: linear-gradient(180deg, #5a4fcf, #7b6ff0);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    padding: 6px 7px 9px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}

/* 품절 오버레이 */
.bp-card-soldout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}
.bp-card-soldout span {
    color: #fff;
    font-weight: 700;
    border: 1px solid #fff;
    padding: 5px 16px;
}

/* 배송비 뱃지 */
.bp-ship-badge {
    display: inline-block;
    margin-top: 7px;
    font-size: 11px;
    color: var(--bp-pink);
    border: 1px solid rgba(232, 51, 109, .4);
    padding: 1px 7px;
    border-radius: 2px;
}
.bp-ship-badge.bp-ship-cond { color: var(--bp-gray); border-color: var(--bp-border); }

/* 찜 버튼 */
.bp-wish {
    top: 8px;
    right: 8px;
    z-index: 2;
    border: 0;
    background: rgba(255, 255, 255, .88);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 1;
    color: var(--bp-pink);
}

/* 카드 하단 담기 버튼 */
.bp-card-btn {
    display: block;
    width: 100%;
    text-align: center;
    border: 0;
    border-top: 1px solid var(--bp-border);
    background: #fff;
    color: var(--bp-text);
    font-size: 13px;
    padding: 9px 0;
    text-decoration: none;
    transition: all .15s;
}
.bp-card-btn:hover { background: var(--bp-pink); color: #fff; }
.bp-card-btn.is-done { background: var(--bp-pink); color: #fff; }

/* ------------------------------------------------------------
   SALE 배너 / 기획전 / 하단 배너
   ------------------------------------------------------------ */
.bp-sale-banner {
    background: linear-gradient(90deg, var(--bp-crimson), var(--bp-pink));
    color: #fff;
    padding: 22px 28px;
    border-radius: 4px;
}
.bp-sale-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: .85;
}
.bp-sale-title { font-size: 22px; font-weight: 900; }
.bp-sale-more {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, .6);
    padding: 6px 14px;
    border-radius: 20px;
}
.bp-sale-more:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.bp-promo {
    border: 1px solid var(--bp-border);
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    display: block;
    background: #fff;
}
.bp-promo:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.bp-promo-thumb { aspect-ratio: 16/7; overflow: hidden; background: var(--bp-bg); }
.bp-promo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bp-promo-body { padding: 12px 14px; }
.bp-promo-title { font-weight: 700; color: var(--bp-text); }
.bp-promo-date { font-size: 12px; color: var(--bp-gray); margin-top: 2px; }

.bp-bot-banner { width: 100%; display: block; margin-bottom: 10px; }

/* ------------------------------------------------------------
   목록 페이지 — 카테고리 칩 / 버튼 / 페이지네이션
   ------------------------------------------------------------ */
.bp-page-title { color: var(--bp-dark); }

.bp-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid var(--bp-border);
    padding: 12px 14px;
    background: #fff;
}
.bp-cat-chips a {
    display: inline-block;
    font-size: 13px;
    color: var(--bp-text);
    text-decoration: none;
    border: 1px solid var(--bp-border);
    padding: 5px 14px;
    border-radius: 18px;
    background: #fff;
}
.bp-cat-chips a:hover { border-color: var(--bp-pink); color: var(--bp-pink); }
.bp-cat-chips a.active {
    background: var(--bp-pink);
    border-color: var(--bp-pink);
    color: #fff;
    font-weight: 700;
}

.bp-btn-pink {
    background: var(--bp-pink);
    border: 1px solid var(--bp-pink);
    color: #fff;
}
.bp-btn-pink:hover { background: var(--bp-crimson); border-color: var(--bp-crimson); color: #fff; }
.bp-btn-outline {
    background: #fff;
    border: 1px solid var(--bp-border);
    color: var(--bp-text);
}
.bp-btn-outline:hover { border-color: var(--bp-pink); color: var(--bp-pink); }

.bp-badge-soft {
    background: #fdf2f6;
    color: var(--bp-pink);
    border: 1px solid rgba(232, 51, 109, .3);
}

.bp-pagination .page-link { color: var(--bp-text); border-radius: 0; }
.bp-pagination .page-item.active .page-link {
    background: var(--bp-pink);
    border-color: var(--bp-pink);
    color: #fff;
}

/* ------------------------------------------------------------
   게시판
   ------------------------------------------------------------ */
.bp-board-table { border-top: 2px solid var(--bp-dark); }
.bp-board-table thead th {
    font-size: 12.5px;
    letter-spacing: 1px;
    color: var(--bp-dark);
    background: #fafafa;
    border-bottom: 1px solid var(--bp-border);
    padding: 12px 8px;
}
.bp-board-table tbody td {
    padding: 13px 8px;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.bp-board-table tbody tr:hover td { background: #fdf8fa; }
.bp-board-notice td { background: #fdf2f6; }
.bp-notice-badge {
    display: inline-block;
    background: var(--bp-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 2px;
}
.bp-btn-write {
    background: #fff;
    border: 1px solid var(--bp-dark);
    color: var(--bp-dark);
    letter-spacing: 1px;
}
.bp-btn-write:hover { background: var(--bp-dark); color: #fff; }

/* ------------------------------------------------------------
   푸터
   ------------------------------------------------------------ */
.bp-footer {
    border-top: 1px solid var(--bp-border);
    margin-top: 60px;
    background: #fff;
}
.bp-footer-links { border-bottom: 1px solid var(--bp-border); }
.bp-footer-links li { position: relative; }
.bp-footer-links li + li { margin-left: 22px; }
.bp-footer-links li + li::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 11px;
    background: var(--bp-border);
}
.bp-footer-links a {
    color: var(--bp-text);
    font-size: 13px;
    text-decoration: none;
    line-height: 46px;
    display: inline-block;
}
.bp-footer-links a:hover { color: var(--bp-pink); }

.bp-footer-body { padding: 34px 0 40px; }
.bp-footer-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--bp-dark);
    margin-bottom: 12px;
}
.bp-footer-phone {
    display: inline-block;
    background: var(--bp-dark);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 7px 20px;
    text-decoration: none;
    margin-bottom: 10px;
}
.bp-footer-phone:hover { background: var(--bp-pink); color: #fff; }
.bp-footer-holder { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.bp-footer-note { font-size: 12.5px; color: var(--bp-gray); line-height: 1.9; }
.bp-footer-copy { font-size: 12px; color: #aaa; margin-top: 12px; }

/* ------------------------------------------------------------
   TOP 버튼
   ------------------------------------------------------------ */
.bp-top-btn {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 1030;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: var(--bp-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 50%;
    opacity: .85;
}
.bp-top-btn:hover { background: var(--bp-pink); color: #fff; opacity: 1; }

/* ------------------------------------------------------------
   반응형
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .bp-topbar { padding: 14px 0; }
    .bp-logo img { max-height: 40px; }
    .bp-logo-text { font-size: 24px; }
    .bp-allcat { padding: 0 16px; font-size: 13.5px; min-height: 44px; }
    .bp-gnb-menu > li > a { line-height: 44px; padding: 0 12px; font-size: 13.5px; }
    .bp-gnb-sale { margin-top: 8px; }
    .bp-section-title { font-size: 21px; }
    .bp-cat-circle { width: 56px; height: 56px; font-size: 17px; }
    .bp-catstrip li { margin: 0 8px 14px; }
    .bp-sale-title { font-size: 18px; }
}