@charset "utf-8";
/* =========================================================================
   상품 상세 리뉴얼 스킨 (2026-07-27)
   - 마크업(id/class/data-*)은 건드리지 않고 "겉모습"만 교체하는 스킨 레이어
   - 기존 board.css / content.css 뒤에 로드되어야 함 (index.jsp head 참조)
   ========================================================================= */

/* 디자인 토큰 — 피그마 오버레이 노드 실측값
   477:628 상세보기 버튼 / 477:715 버튼행 / 477:717·721 셀렉트
   477:701 스티키 카드 / 477:739 접힘 페이드 / 477:699 탭바             */
.shop_item_detail_wrapper01 {
    --pd-bg: #000000;          /* 페이지 바탕 */
    --pd-card: #05070B;        /* 구매 카드 바탕 */
    --pd-line: #1E2733;        /* 구분선/테두리 */
    --pd-accent: #00B8FC;      /* 포인트 블루 */
    --pd-text: #F5F5F5;
    --pd-sub: #9AA3AE;
    /* 셀렉트 (477:717 / 477:721) — radius 8, 가로 그라디언트 */
    --pd-field: linear-gradient(90deg, #131E2D 0%, #131418 100%);
    /* 다크 필 버튼 (477:628 / 477:740) — 가로 그라디언트 + 테두리 #24517B */
    --pd-fill: linear-gradient(90deg, #07223D 0%, #0B1829 100%);
    --pd-fill-line: #24517B;
    /* 스티키 카드 (477:701) — radius 10, 테두리 #092042 */
    --pd-panel: linear-gradient(135deg, #0A2942 0%, rgba(10, 41, 67, .14) 100%);
    --pd-panel-line: #092042;
}

/* ---------- 바탕 ---------- */
.shop_item_detail_wrapper01,
.shop_item_info_detail_box01 {
    background-color: #000 !important;
}
.shop_item_detail_wrapper01 {
    padding: 60px 0 80px 0;
}

/* =========================================================================
   1. 상단 2컬럼 (갤러리 / 구매 패널)
   ========================================================================= */
.shop_item_detail_top_box01 {
    gap: 40px 56px;
    align-items: flex-start;
}
.shop_item_detail_top_box01 > .shop_item_detail_slide_box01 {
    width: calc(55% - 28px);
    max-width: 720px;
}
.shop_item_detail_top_box01 > .shop_item_detail_alt_box01 {
    width: calc(45% - 28px);
    align-self: stretch;
}

/* ---------- 갤러리 ---------- */
/* 메인 이미지는 정사각 비율을 유지하되 세로가 과하게 길어지지 않도록 상한을 둔다 */
.shop_item_detail_slide {
    max-width: 700px;
    margin: 0 auto;
}
.shop_item_detail_slide .item {
    background: #000;
    border-radius: 8px;
}
.shop_item_detail_slide .item img {
    object-fit: contain;
}

/* 메인 좌우 원형 네비 */
.shop_item_detail_slide .swiper-button-prev,
.shop_item_detail_slide .swiper-button-next {
    width: 46px;
    height: 46px;
    background: rgba(0, 0, 0, .45);
    border: 2px solid var(--pd-accent);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(0, 184, 252, .25);
    transition: background .15s, box-shadow .15s;
}
.shop_item_detail_slide .swiper-button-prev:hover,
.shop_item_detail_slide .swiper-button-next:hover {
    background: rgba(0, 184, 252, .16);
    box-shadow: 0 0 20px rgba(0, 184, 252, .45);
}
.shop_item_detail_slide .swiper-button-prev:after,
.shop_item_detail_slide .swiper-button-next:after {
    font-size: 16px;
    color: #fff;
}
.shop_item_detail_slide .swiper-button-prev { left: 4px; }
.shop_item_detail_slide .swiper-button-next { right: 4px; }

/* 썸네일 캐러셀 */
.shop_item_detail_slide_thumb_wrap {
    gap: 14px;
    margin-top: 26px;
    justify-content: center;
}
.shop_item_detail_slide_thumb {
    flex: 0 1 auto;
    max-width: calc(100% - 92px);
}
.shop_item_detail_slide_thumb .item {
    border-radius: 8px;
    border: 1px solid var(--pd-line);
    background: #000;
    opacity: .55;
    transition: opacity .15s, border-color .15s;
}
.shop_item_detail_slide_thumb .swiper-slide-thumb-active .item,
.shop_item_detail_slide_thumb .item:hover {
    opacity: 1;
    border-color: var(--pd-accent);
}
.shop_item_detail_slide_thumb_wrap .swiper-button-prev,
.shop_item_detail_slide_thumb_wrap .swiper-button-next {
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, .45);
    border: 2px solid var(--pd-accent);
    box-shadow: none;
}
.shop_item_detail_slide_thumb_wrap .swiper-button-prev:hover,
.shop_item_detail_slide_thumb_wrap .swiper-button-next:hover {
    background: rgba(0, 184, 252, .16);
}
.shop_item_detail_slide_thumb_wrap .swiper-button-prev:after,
.shop_item_detail_slide_thumb_wrap .swiper-button-next:after {
    font-size: 11px;
    color: #fff;
}

/* =========================================================================
   2. 구매 패널
   ========================================================================= */
.shop_item_detail_alt_box01 .pd_buy_card {
    background: var(--pd-card);
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    padding: 30px 28px 28px;
}

/* 카드 안쪽은 구분선을 쓰지 않음 (시안 기준) */
.pd_buy_card .top_box.border_box01,
.pd_buy_card .option_box01.border_box01 {
    border-bottom: 0 !important;
    padding-bottom: 0;
}

/* 상품명 / 브랜드 */
.pd_buy_card .top_box .tit_box .tit {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.3px;
    color: var(--pd-text) !important;
}
.pd_buy_card .top_box .tit_box .fa-heart {
    font-size: 26px;
    line-height: 1.3;
}
.pd_buy_card .top_box .alt_box {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pd-sub) !important;
}

/* 배송비 → 가격 → 옵션 순서로 재배치 */
.pd_buy_card .center_box {
    display: flex;
    flex-direction: column;
}
.pd_buy_card .center_box .pd_ship_row  { order: 1; }
.pd_buy_card .center_box .pd_price_row { order: 2; }
.pd_buy_card .center_box .option_select_box01 { order: 3; }

/* 배송비: 라벨 숨기고 값만 작은 블루 텍스트로 */
.pd_buy_card .pd_ship_row {
    padding: 34px 0 0 0;
}
.pd_buy_card .pd_ship_row .tit { display: none; }
.pd_buy_card .pd_ship_row .option_alt {
    width: 100%;
    gap: 4px 8px;
}
.pd_buy_card .pd_ship_row .option_alt span {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--pd-accent) !important;
}
.pd_buy_card .pd_ship_row .option_alt .free_condition {
    font-weight: 400;
    color: var(--pd-sub) !important;
}

/* 판매금액: 라벨 숨기고 큰 블루 숫자 */
.pd_buy_card .pd_price_row {
    padding: 6px 0 0 0;
}
.pd_buy_card .pd_price_row .tit { display: none; }
.pd_buy_card .pd_price_row .option_alt {
    width: 100%;
    align-items: flex-end;
    gap: 4px 10px;
}
.pd_buy_card .pd_price_row .option_alt .price01 {
    align-items: flex-end;
    gap: 2px;
}
.pd_buy_card .pd_price_row .option_alt .price01 b {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.1;
    color: var(--pd-accent) !important;
}
.pd_buy_card .pd_price_row .option_alt .price01 span {
    font-size: 22px !important;
    font-weight: 700;
    color: var(--pd-accent) !important;
}
.pd_buy_card .pd_price_row .option_alt .discount01 {
    font-size: 15px;
    color: #6C757D !important;
}
.pd_buy_card .pd_price_row .option_alt .percent01 {
    font-size: 20px;
    color: #FF5A5F !important;
}
.pd_buy_card .pd_price_row .option_alt .grade_label {
    font-size: 13px !important;
    color: var(--pd-sub) !important;
}

/* 옵션 영역 */
.pd_buy_card .option_select_box01 {
    padding: 22px 0 0 0 !important;
    margin-bottom: 0 !important;
}

/* =========================================================================
   3. 셀렉트 (상품 선택 / 추가 상품) — 메인 · 스티키 공통
   ========================================================================= */
.shop_item_detail_wrapper01 .shop_prd_info_select01,
.shop_item_right_sticky .option_select_box01 select {
    height: 50px !important;
    padding: 0 46px 0 18px !important;
    font-size: 15px !important;
    font-weight: 700;
    color: var(--pd-text) !important;
    border: 1px solid var(--pd-accent) !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%2300B8FC'/%3E%3C/svg%3E"),
        var(--pd-field) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 18px center, 0 0 !important;
    background-size: 12px 8px, 100% 100% !important;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
/* 스티키 패널 셀렉트는 시안(477:717 / 477:721)에 테두리가 없다 */
.shop_item_right_sticky .option_select_box01 select {
    border-color: transparent !important;
}
.shop_item_right_sticky .option_select_box01 select:hover {
    border-color: var(--pd-accent) !important;
}
.shop_item_detail_wrapper01 .shop_prd_info_select01:hover,
.shop_item_right_sticky .option_select_box01 select:hover {
    box-shadow: 0 0 0 2px rgba(0, 184, 252, .18);
}
.shop_item_detail_wrapper01 .shop_prd_info_select01 option,
.shop_item_right_sticky .option_select_box01 select option {
    background-color: #0F1218 !important;
    color: #E8EDF2 !important;
}

/* 추가 상품: 점선 테두리 + 좌측 ⊞ 아이콘 */
.shop_item_detail_wrapper01 .shop_prd_info_select01.option_product_select,
.shop_item_right_sticky .option_select_box01 select.sticky_option_product_select {
    border-style: dashed !important;
    padding-left: 44px !important;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%2300B8FC'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='0.7' y='0.7' width='12.6' height='12.6' rx='2' fill='none' stroke='%23E8EDF2' stroke-width='1.2'/%3E%3Cpath d='M7 3.6v6.8M3.6 7h6.8' stroke='%23E8EDF2' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"),
        var(--pd-field) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: right 18px center, left 18px center, 0 0 !important;
    background-size: 12px 8px, 14px 14px, 100% 100% !important;
}

.shop_item_detail_alt_box01 .option_select_box01 .shop_prd_info_select01 + .shop_prd_info_select01,
.shop_item_right_sticky .option_select_box01 select + select {
    margin-top: 10px !important;
}

/* =========================================================================
   4. 선택된 옵션 결과 카드
   ========================================================================= */
.shop_item_detail_wrapper01 .option_result_box01_wrapper .box {
    border-color: transparent !important;
}
.shop_item_detail_alt_box01 .option_select_box01 .option_result_box01,
.shop_item_right_sticky .option_result_box01 {
    background: #0D131C !important;
    border: 1px solid var(--pd-line) !important;
    border-radius: 8px !important;
}
.shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 {
    padding: 16px 18px !important;
    gap: 12px 16px !important;
}
.shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .l_box .tit,
.shop_item_right_sticky .option_result_box01 .tit {
    font-size: 14px !important;
    font-weight: 600;
    color: #E8EDF2 !important;
}
.shop_item_detail_wrapper01 .option_result_box01 .shop_prd_price01,
.shop_item_detail_wrapper01 .option_result_box01 .shop_prd_price01 b {
    color: var(--pd-accent) !important;
    font-weight: 700;
}
/* 수량 버튼 */
.shop_item_detail_wrapper01 .option_result_box01 .shop_option_btn01 {
    background: #131A24 !important;
    border: 1px solid var(--pd-line) !important;
    border-radius: 4px;
}
.shop_item_detail_wrapper01 .option_result_box01 .shop_option_count01 {
    background: transparent !important;
    border-color: var(--pd-line) !important;
    color: #E8EDF2 !important;
}
.shop_item_detail_wrapper01 .option_result_box01 .shop_prd_cancle_btn01 span {
    background: #9AA3AE;
}
.shop_item_detail_wrapper01 .option_result_box01 .shop_prd_cancle_btn01:hover span {
    background: #fff !important;
}

/* =========================================================================
   5. 총 주문 금액 + 액션 버튼
   ========================================================================= */
.shop_item_detail_alt_box01 .shop_item_detail_result_box01 {
    border-top: 0 !important;
    padding-top: 26px;
}
.shop_item_detail_wrapper01 .shop_prd_info_quick_result01 {
    align-items: baseline;
}
.shop_item_detail_wrapper01 .shop_prd_info_quick_result01 .tit {
    font-size: 17px;
    font-weight: 700;
    color: var(--pd-text) !important;
}
.shop_item_detail_alt_box01 .shop_item_detail_result_box01 .shop_prd_info_quick_result01 .price01 b {
    font-size: 30px !important;
    font-weight: 800;
    color: var(--pd-accent) !important;
}
.shop_item_detail_wrapper01 .shop_prd_info_quick_result01 .price01 span {
    font-size: 15px;
    font-weight: 700;
    color: var(--pd-accent) !important;
}

/* 버튼 (상세 영역 한정 — 장바구니 팝업 등 전역 버튼은 건드리지 않음) */
.shop_item_detail_wrapper01 .login_submit_btn_box01 {
    gap: 12px;
    margin-top: 14px !important;
}
/* 477:715 — 두 버튼 모두 radius 10 + 1px #24517B 테두리 */
.shop_item_detail_wrapper01 .login_submit_btn_box01 .login_chk_btn01 {
    height: 56px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s, box-shadow .15s;
}
/* 장바구니 = 화이트 필 (477:625) */
.shop_item_detail_wrapper01 .login_submit_btn_box01 .login_chk_btn01.type02 {
    background: #fff !important;
    border: 1px solid var(--pd-fill-line) !important;
    color: #0F2540 !important;
}
.shop_item_detail_wrapper01 .login_submit_btn_box01 .login_chk_btn01.type02:hover {
    filter: brightness(.94);
}
/* 바로구매 = 다크 네이비 필 (477:740) */
.shop_item_detail_wrapper01 .login_submit_btn_box01 .login_chk_btn01.buy_now_btn,
.shop_item_detail_wrapper01 .login_submit_btn_box01 .login_chk_btn01.sticky_buy_btn {
    background: var(--pd-fill) !important;
    border: 1px solid var(--pd-fill-line) !important;
    color: #fff !important;
}
.shop_item_detail_wrapper01 .login_submit_btn_box01 .login_chk_btn01.buy_now_btn:hover,
.shop_item_detail_wrapper01 .login_submit_btn_box01 .login_chk_btn01.sticky_buy_btn:hover {
    box-shadow: 0 0 0 2px rgba(0, 184, 252, .22);
}

/* 할인 정보 박스 */
.shop_item_detail_wrapper01 .shop_discount_info_box {
    padding: 10px 0 !important;
    margin: 0 0 6px !important;
}
.shop_item_detail_wrapper01 .shop_discount_info_box .discount_row:not(:last-child) {
    border-bottom: 1px dashed var(--pd-line);
}

/* =========================================================================
   6. 탭 바
   ========================================================================= */
/* [260729 시안 560:381/560:387] 언더라인 탭 → 알약(pill) 탭.
   비활성 #0B192B, 활성은 #0A192B + 2px #00B8FC 테두리, radius 100, 글씨는 항상 흰색 볼드.
   ※ 탭 자체 높이(80px)는 알약이 위아래로 잘리지 않도록 wrapper/슬라이드에 여백을 준다. */
.prd_tab_wrapper.shop_info {
    background-color: #000 !important;
    border-top: 0 none !important;
    border-bottom: 0 none !important;
    height: auto !important;
    padding: 18px 0 !important;
    overflow: visible !important;
}
.prd_tab_wrapper.shop_info .prd_tab_slide_box01 {
    height: auto !important;
    overflow: visible !important;
}
.prd_tab_wrapper.shop_info .prd_tab_slide_box01 .item_box01 {
    display: flex !important;
    gap: 12px;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
}
.shop_item_info_detail_box01 .prd_tab_slide_box01 .item {
    flex: 1 1 0;
    min-width: 0;
    height: 72px;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700;
    color: #fff !important;
    background: #0B192B;
    border: 2px solid transparent !important;
    border-radius: 100px;
    transition: background-color .15s, border-color .15s;
}
.shop_item_info_detail_box01 .prd_tab_slide_box01 .item:hover {
    border-color: rgba(0, 184, 252, .45) !important;
}
.shop_item_info_detail_box01 .prd_tab_slide_box01 .item.active {
    font-weight: 700;
    color: #fff !important;
    background: #0A192B;
    border-color: var(--pd-accent) !important;
}
.shop_item_info_detail_box01 .prd_tab_slide_box01 .item a {
    display: block;
    width: 100%;
    line-height: 68px;
    color: inherit;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================================
   7. 우측 스티키 옵션 패널
   ========================================================================= */
/* 477:701 — radius 10, 테두리 #092042, 좌상단 네이비 → 우하단 투명 그라디언트 */
.shop_item_right_sticky .sticky_inner {
    background: var(--pd-panel) !important;
    border: 1px solid var(--pd-panel-line) !important;
    border-radius: 10px !important;
    padding: 20px 18px !important;
}
/* 477:703 — '옵션선택' 흰색 볼드 20px */
.shop_item_right_sticky .sticky_option_wrapper .option_tit {
    font-size: 20px;
    font-weight: 700;
    color: #fff !important;
    margin-bottom: 14px;
}
.shop_item_right_sticky .sticky_result_wrapper {
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
    padding-top: 14px !important;
}
.shop_item_right_sticky .shop_prd_info_quick_result01 .tit {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--pd-text) !important;
}
.shop_item_right_sticky .shop_prd_info_quick_result01 .price01 b {
    font-size: 22px !important;
    color: var(--pd-accent) !important;
}
.shop_item_right_sticky .shop_prd_info_quick_result01 .price01 span {
    font-size: 13px;
    color: var(--pd-accent) !important;
}
.shop_item_right_sticky .login_submit_btn_box01 {
    gap: 8px;
    margin-top: 14px !important;
}
.shop_item_right_sticky .login_submit_btn_box01 .login_chk_btn01 {
    height: 46px;
    font-size: 14px;
    border-radius: 10px;
}
/* 스티키 결과 카드 — 네이비 패널 위이므로 반투명 블랙으로 대비 확보 */
.shop_item_right_sticky .option_result_box01 {
    padding: 10px 12px !important;
    padding-right: 28px !important;
    background: rgba(4, 10, 18, .55) !important;
    border-color: rgba(255, 255, 255, .1) !important;
}
.shop_item_right_sticky .option_result_box01 .shop_option_btn01 {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}
.shop_item_right_sticky .option_result_box01 .shop_option_count01 {
    border-color: rgba(255, 255, 255, .16) !important;
}
.shop_item_right_sticky .option_result_box01 .shop_prd_price01 {
    color: var(--pd-accent) !important;
}

/* =========================================================================
   8. 옵션 카드(이미지 옵션) 다크 스킨
   ========================================================================= */
.shop_item_detail_wrapper01 .option_cards_wrap > .tit {
    margin-bottom: 10px !important;
}
.shop_item_detail_wrapper01 .option_card {
    background: #0D131C !important;
    border-color: var(--pd-line) !important;
}
.shop_item_detail_wrapper01 .option_card.is-active,
.shop_item_detail_wrapper01 .option_card:hover:not([disabled]) {
    border-color: var(--pd-accent) !important;
}
/* .option_cards_wrap 은 .option_box01 을 겸하고 있어 white-space:nowrap / font-size:17px 를
   상속받아 옵션명이 카드 밖으로 넘치던 문제를 바로잡는다. */
.shop_item_detail_wrapper01 .option_cards_wrap,
.shop_item_detail_wrapper01 .option_cards_grid,
.shop_item_detail_wrapper01 .option_card,
.shop_item_detail_wrapper01 .option_card .option_card_name,
.shop_item_detail_wrapper01 .option_card .option_card_soldout_overlay {
    white-space: normal !important;
}
/* content.css의 .shop_item_detail_alt_box01 .option_box01 .option_alt span(#00B8FC !important)
   보다 특이도를 높여 본문/스티키 옵션명 색을 통일한다 */
.shop_item_detail_wrapper01 .option_cards_wrap .option_card .option_card_name {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere;
    color: #E8EDF2 !important;
}
.shop_item_detail_wrapper01 .option_card .option_card_soldout_overlay {
    font-size: 11px !important;
    line-height: 1.2 !important;
}
.shop_item_detail_wrapper01 .option_card_thumb {
    background: #131A24 !important;
}
/* 다크 배경에서는 기존 opacity .4 가 너무 어두워 품절 카드가 거의 안 보인다 */
.shop_item_detail_wrapper01 .option_card--soldout {
    opacity: .68 !important;
}
.shop_item_detail_wrapper01 .option_card .option_card_soldout_overlay {
    background: rgba(0, 0, 0, .78) !important;
}
/* content.css의 option_alt span 블루가 품절 라벨까지 물들이는 것 방지 */
.shop_item_detail_wrapper01 .option_cards_wrap .option_card .option_card_soldout_overlay {
    color: #fff !important;
}

/* =========================================================================
   8-1. 상세 콘텐츠 접힘 영역 (477:739 페이드 / 477:628 펼쳐보기 버튼)
   ========================================================================= */
.shop_item_detail_wrapper01 .secret_review_box01 {
    border-bottom: 1px solid var(--pd-line) !important;
}
/* 기존 페이드는 흰색이라 다크 배경에서 밝은 띠로 보였다 → 검정 페이드로 교체 */
/* [260729] 펼쳐보기 버튼이 상세 이미지(특히 유튜브 iframe)와 겹치던 문제 —
   원인: 접힘이 .secret_review_box01 의 max-height+overflow 로 걸려 있어, 잘려나가는 콘텐츠가
   버튼 자리까지 그대로 그려진다(패딩을 줘도 overflow 콘텐츠가 그 위를 덮음).
   해결: 접힘을 콘텐츠(.center_img)로 옮기고 버튼줄은 그 아래 일반 흐름에 배치 → 물리적으로 분리.
   ※ 펼침 JS(index.jsp)도 .center_img 의 max-height 를 함께 해제하도록 수정했다. */
.shop_item_detail_wrapper01 .secret_review_box01 {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}
.shop_item_detail_wrapper01 .secret_review_box01 .center_img {
    position: relative;
    display: block;
    max-height: 560px;
    overflow: hidden;
}
/* 접힌 콘텐츠 하단 페이드 */
.shop_item_detail_wrapper01 .secret_review_box01 .center_img::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 55%, #000 100%);
    pointer-events: none;
}
/* 버튼줄 — 오버레이가 아니라 콘텐츠 아래 독립 영역 */
.shop_item_detail_wrapper01 .secret_review_box01 .secret_btn_box01 {
    position: static !important;
    height: auto !important;
    background: none !important;
    padding: 28px 0 8px !important;
    display: flex;
    justify-content: center;
}
.shop_item_detail_wrapper01 .secret_review_box01 .secret_btn_box01 .secret_btn01 {
    position: static !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 auto;
}
/* 477:628 — 368x50, radius 10, 가로 그라디언트 + 1px #24517B, 흰 글씨 20px */
.shop_item_detail_wrapper01 .secret_review_box01 .secret_btn01 {
    height: 50px;
    max-width: 368px;
    border-radius: 10px;
    background: var(--pd-fill) !important;
    border: 1px solid var(--pd-fill-line);
    box-shadow: none;
    font-size: 20px;
    font-weight: 700;
    color: #fff !important;
    transition: box-shadow .15s;
}
.shop_item_detail_wrapper01 .secret_review_box01 .secret_btn01:hover {
    box-shadow: 0 0 0 2px rgba(0, 184, 252, .25);
}


/* =========================================================================
   8-5. [260729] 섹션 제목 — 밝은 테마 잔재(검정 2px 밑줄 + #333 글씨)를
   다크 톤으로. 시안 560:461 헤더처럼 흰 제목 + 짧은 블루 포인트 언더라인.
   ========================================================================= */
.shop_item_detail_wrapper01 .shop_item_info_con .tit_box {
    position: relative;
    border-bottom: 1px solid var(--pd-panel-line) !important;
    padding-bottom: 16px !important;
    margin-bottom: 4px;
    color: #fff !important;
}
/* 제목 아래 짧은 블루 강조선 */
.shop_item_detail_wrapper01 .shop_item_info_con .tit_box::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 68px;
    height: 3px;
    background: var(--pd-accent);
    border-radius: 2px;
}
.shop_item_detail_wrapper01 .shop_item_info_con .tit_box .tit {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -.3px;
    color: #fff !important;
}

/* =========================================================================
   8-6. [260729] 상품평 정렬 줄(.sub_tit_box) — 흰 계열 구분선 제거
   ========================================================================= */
.shop_item_detail_wrapper01 .shop_item_evaluation_txt_box .sub_tit_box {
    border-top: 1px solid var(--pd-panel-line) !important;
    border-bottom: 1px solid var(--pd-panel-line) !important;
}
.shop_item_detail_wrapper01 .shop_item_evaluation_txt_box .sub_tit_box .l_box .tit {
    color: #fff !important;
}
.shop_item_detail_wrapper01 .shop_item_evaluation_txt_box .sub_tit_box .id_save_box span {
    color: #D5DBE2 !important;
}

/* Q&A 목록 컨테이너·행 구분선 (board.css:17815 #eee) → 다크 */
.shop_item_detail_wrapper01 .shop_item_answer_box01 {
    border-top: 1px solid var(--pd-panel-line) !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .box {
    border-bottom: 1px solid var(--pd-panel-line) !important;
}

/* =========================================================================
   8-7. [260729] Q&A 목록(#qna_list) — /shop/qna/index.jsp 인라인 <style> 이
   흰 배경·#eee 선 기준이라 다크에서 밝은 띠로 보인다.
   인라인 style 태그가 이 파일보다 뒤에 오므로 특이도를 한 단계 높이고 !important 로 덮는다.
   ========================================================================= */
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-item {
    border-bottom: 1px solid var(--pd-panel-line) !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-item .q_box01 {
    background: transparent !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-item:hover .q_box01 {
    background: rgba(10, 41, 66, .55) !important;
}
/* 상태 뱃지 (답변대기 / 답변완료) */
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-status {
    background: #0D131C !important;
    border: 1px solid var(--pd-line) !important;
    color: #C3CAD3 !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-status i {
    color: inherit !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-status.wait {
    background: rgba(0, 184, 252, .10) !important;
    border-color: rgba(0, 184, 252, .45) !important;
    color: var(--pd-accent) !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-status.done {
    background: rgba(46, 204, 113, .10) !important;
    border-color: rgba(46, 204, 113, .45) !important;
    color: #4FD48A !important;
}
/* 비공개 뱃지 */
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-secret-badge {
    background: #0D131C !important;
    color: #8A929C !important;
}
/* 펼침 상세 */
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-detail {
    background: linear-gradient(180deg, #0A2942 0%, #0A2943 100%) !important;
    border: 1px solid var(--pd-panel-line) !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-detail .section-content {
    color: #E3E8ED !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-detail .q-section .section-label {
    background: #1F4E8C !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .qna-detail .a-section .section-label {
    background: #1F6D3A !important;
}
.shop_item_detail_wrapper01 .shop_item_answer_box01 .secret-message {
    color: #8A929C !important;
}
/* 문의/리뷰 없음 안내 */
.shop_item_detail_wrapper01 .nodata_box01,
.shop_item_detail_wrapper01 .nodata_box01 p {
    background: transparent !important;
    color: #8A929C !important;
}

/* [260729] 앵커 이동 보정 — 알약 탭이 기존 60px 언더라인 탭보다 높아져(패딩 포함 약 108px)
   board.css:15479 의 scroll-margin-top:150px 로는 섹션 제목이 탭에 가린다.
   board.css 가 id 셀렉터라 같은 형태로 값만 올린다. */
#section_detail,
#section_delivery,
#section_review,
#section_qna {
    scroll-margin-top: 200px;
}
@media all and (max-width: 768px) {
    #section_detail,
    #section_delivery,
    #section_review,
    #section_qna {
        scroll-margin-top: 140px;
    }
}

/* =========================================================================
   8-1. [260729 시안 560:269] 상품/배송/반품 안내 카드
   검정 위 맨 텍스트 → 다크 네이비 카드(radius 30 + 블루 테두리) 안에 담는다.
   내용(data.getEtc())은 관리자가 입력한 HTML 이라 내부 인라인 색상을 덮어써야 흰 글씨가 된다.
   ========================================================================= */
.shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 {
    margin: 20px 0 40px;
    padding: 46px 52px;
    background: linear-gradient(180deg, #0A2942 0%, #0A2943 100%) !important;
    border: 1px solid var(--pd-fill-line);
    border-radius: 30px;
    color: #fff !important;
    font-size: 16px;
    line-height: 1.9;
}
/* 관리자 입력 HTML 내부 요소(인라인 color/배경 포함)를 카드 위에서 읽히게 정리 */
.shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 * {
    color: #fff !important;
    background-color: transparent !important;
    max-width: 100%;
}
.shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 a {
    color: var(--pd-accent) !important;
    text-decoration: underline;
}
.shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 ul,
.shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 ol {
    padding-left: 22px;
    list-style: disc;
}
.shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 ol { list-style: decimal; }
.shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 li { margin: 4px 0; }
.shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 img { height: auto; }

/* =========================================================================
   8-4. [260729 시안 560:333] Q&A 영역 — 필터/버튼 줄을 카드로
   ========================================================================= */
.shop_item_detail_wrapper01 .shop_item_qa_info_chk_box01 {
    margin: 20px 0 16px;
    padding: 18px 24px;
    background: linear-gradient(180deg, #0A2942 0%, #0A2943 100%);
    border: 1px solid var(--pd-panel-line);
    border-radius: 14px;
}
.shop_item_detail_wrapper01 .shop_item_qa_info_chk_box01 .id_save_box span {
    color: #D5DBE2 !important;
}

/* =========================================================================
   8-2. 상품평 / Q&A 컨트롤 (밝은 배경 칩 → 다크 칩)
   ========================================================================= */
.shop_item_detail_wrapper01 .evaluation_tab_menu01 {
    background: #0D131C !important;
    border: 1px solid var(--pd-line) !important;
    border-radius: 6px;
    color: #8A929C !important;
}
.shop_item_detail_wrapper01 .evaluation_tab_menu01:hover {
    border-color: #33404F !important;
    color: #D5DBE2 !important;
}
.shop_item_detail_wrapper01 .evaluation_tab_menu01.active {
    background: rgba(0, 184, 252, .12) !important;
    border-color: var(--pd-accent) !important;
    color: var(--pd-accent) !important;
}
.shop_item_detail_wrapper01 .evaluation_tab_menu01.red {
    background: var(--pd-fill) !important;
    border-color: var(--pd-fill-line) !important;
    color: #fff !important;
}

/* =========================================================================
   8-3. 상품평 요약 박스 (.shop_item_evaluation_box)
   총 평점 / 총 상품평 수 / 평점 비율 — 순백 카드 → 다크 네이비 카드
   ※ .fill 의 height 는 top.jsp 가 인라인 style 로 넣으므로 건드리지 않는다.
   ※ top.jsp 인라인 <style> 이 이 파일보다 뒤에 오므로 색상은 !important 필요.
   ========================================================================= */
.shop_item_detail_wrapper01 .shop_item_evaluation_box {
    padding: 28px 24px;
    margin: 20px auto 30px;
    border: 1px solid var(--pd-panel-line) !important;
    border-radius: 10px;
    background: var(--pd-panel), #000 !important;
    box-shadow: 0 4px 14px -6px rgba(8, 32, 64, .9);
}
/* 3개 칼럼 사이 세로 구분선 */
.shop_item_detail_wrapper01 .shop_item_evaluation_box > div + div {
    border-left: 1px solid rgba(255, 255, 255, .06);
}

.shop_item_detail_wrapper01 .evaluation_box01 .e_tit {
    font-size: 15px !important;
    font-weight: 600;
    color: #8FA6BD !important;
}

/* 평균 별점 — 채워진 별 블루 / 빈 별 딥네이비 */
.shop_item_detail_wrapper01 .evaluation_box01 .avg-stars i {
    color: #2E4A66 !important;
}
.shop_item_detail_wrapper01 .evaluation_box01 .avg-stars i.on {
    color: var(--pd-accent) !important;
}

.shop_item_detail_wrapper01 .evaluation_box01 .result_box .result_num {
    font-size: 36px;
    font-weight: 700;
    color: #fff !important;
}
.shop_item_detail_wrapper01 .evaluation_box01 .result_box .total_num {
    font-size: 20px;
    color: #55677D !important;
}

/* 총 상품평 수 아이콘 — CSS mask 방식이라 background-color 로 색을 준다.
   원본 /img/review_icon01.svg 는 주석이 EUC-KR 로 저장돼 XML 파싱에 실패하고
   (UTF-8 디코드 불가) 마스크가 통째로 깨져 아이콘이 보이지 않는다.
   공용 에셋을 건드리지 않기 위해 동일 모양을 인라인 data URI 로 대체한다. */
.shop_item_detail_wrapper01 .evaluation_box01 .review-icon {
    background-color: var(--pd-accent) !important;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 평점 비율 그래프 */
.shop_item_detail_wrapper01 .evaluation_box01 .graph_box_wrapper01 .graph_box01 .bar {
    background-color: rgba(255, 255, 255, .08) !important;
    border-radius: 4px;
}
/* 트랙 하단의 회색 원형 장식은 다크 배경에서 밝은 점으로 튀고
   채워진 막대 위에 덮여 보이므로 감춘다 */
.shop_item_detail_wrapper01 .evaluation_box01 .graph_box_wrapper01 .graph_box01 .bar::after {
    display: none !important;
}
.shop_item_detail_wrapper01 .evaluation_box01 .graph_box_wrapper01 .graph_box01 .bar .fill {
    background: linear-gradient(180deg, #00B8FC 0%, #0077B8 100%) !important;
    border-radius: 4px !important;
}
.shop_item_detail_wrapper01 .evaluation_box01 .graph_box_wrapper01 .graph_box01 span {
    font-size: 12px !important;
    color: #8FA6BD !important;
    /* 막대 폭(17px)을 상속해 "5점"이 글자 단위로 세로 줄바꿈되던 문제 방지 */
    white-space: nowrap !important;
    width: auto !important;
    text-align: center;
}

/* =========================================================================
   9. 반응형
   ========================================================================= */
@media all and (max-width: 1280px) {
    .shop_item_detail_top_box01 { gap: 32px 36px; }
    .shop_item_detail_top_box01 > .shop_item_detail_slide_box01 { width: calc(54% - 18px); }
    .shop_item_detail_top_box01 > .shop_item_detail_alt_box01 { width: calc(46% - 18px); }
    .pd_buy_card .top_box .tit_box .tit { font-size: 21px; }
    .pd_buy_card .pd_price_row .option_alt .price01 b { font-size: 30px; }
}

@media all and (max-width: 1024px) {
    .shop_item_detail_top_box01 > .shop_item_detail_slide_box01,
    .shop_item_detail_top_box01 > .shop_item_detail_alt_box01 {
        width: 100%;
    }
    .shop_item_detail_wrapper01 { padding: 30px 0 60px; }
}

@media all and (max-width: 768px) {
    .shop_item_detail_alt_box01 .pd_buy_card {
        padding: 22px 18px 20px;
        border-radius: 10px;
    }
    .pd_buy_card .top_box .tit_box .tit { font-size: 19px; }
    .pd_buy_card .top_box .tit_box .fa-heart { font-size: 22px; }
    .pd_buy_card .pd_ship_row { padding-top: 24px; }
    .pd_buy_card .pd_price_row .option_alt .price01 b { font-size: 28px; }
    .pd_buy_card .pd_price_row .option_alt .price01 span { font-size: 18px !important; }
    .shop_item_detail_wrapper01 .shop_prd_info_select01 {
        height: 48px !important;
        font-size: 13px !important;
    }
    .shop_item_detail_wrapper01 .login_submit_btn_box01 .login_chk_btn01 {
        height: 50px;
        font-size: 15px;
    }
    .shop_item_detail_alt_box01 .shop_item_detail_result_box01 .shop_prd_info_quick_result01 .price01 b {
        font-size: 24px !important;
    }
    .shop_item_detail_slide_thumb_wrap { gap: 8px; margin-top: 18px; }
    .shop_item_detail_slide_thumb { max-width: calc(100% - 68px); }
    .shop_item_detail_slide_thumb_wrap .swiper-button-prev,
    .shop_item_detail_slide_thumb_wrap .swiper-button-next { width: 28px; height: 28px; }
    .shop_item_detail_slide .swiper-button-prev,
    .shop_item_detail_slide .swiper-button-next { width: 38px; height: 38px; }
    /* 알약 탭 — 모바일에서는 높이/글자만 축소 (좁은 화면에서 4개가 한 줄에 들어가도록) */
    .prd_tab_wrapper.shop_info { padding: 10px 0 !important; }
    .prd_tab_wrapper.shop_info .prd_tab_slide_box01 .item_box01 { gap: 6px; }
    .shop_item_info_detail_box01 .prd_tab_slide_box01 .item {
        font-size: 13px !important;
        height: 46px;
        border-width: 1px !important;
    }
    .shop_item_info_detail_box01 .prd_tab_slide_box01 .item a { line-height: 44px; }

    /* 배송/반품·Q&A 카드 — 모바일 여백 축소 */
    .shop_item_detail_wrapper01 .shop_item_deliver_info .shop_item_info_box001 {
        padding: 20px 16px !important;
        border-radius: 16px !important;
        font-size: 13px !important;
    }
    .shop_item_detail_wrapper01 .shop_item_qa_info_chk_box01 {
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }
}