@charset "utf-8";
/*
 * psnmalls.com /new - 불교 베이지/골드 테마 오버라이드 v3.0
 * 파일 위치: /new/Asset/css/theme_override.css
 */

/* ===================================================
   1. 구글 폰트 - Noto Serif KR (명조체, 불교 느낌)
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700;900&display=swap');

/* ===================================================
   골드/베이지 팔레트
   =================================================== */
:root {
  --gold:        #B8860B;
  --gold-light:  #D4A843;
  --gold-bright: #E8C050;
  --beige:       #F5EDD8;
  --beige-bg:    #FBF6EC;
  --brown:       #6B4E2A;
  --brown-mid:   #8B6940;
  --border-gold: #C9A96E;
}

/* ===================================================
   2. 전체 폰트 명조체로 변경
   =================================================== */
body,
.menu li a,
.contentsTitle,
.gnb li,
.gnb li a,
.goodsList > li ul li.goods_txt,
.section01_inner .section01 .page_title,
#footer .fot_inner {
  font-family: 'Noto Serif KR', serif !important;
}

/* ===================================================
   3. BODY 배경 베이지
   =================================================== */
body {
  background: var(--beige-bg) !important;
}

/* ===================================================
   4. 헤더 배경 베이지
   =================================================== */
#headerwrapr {
  background: var(--beige) !important;
  border-bottom: 2px solid var(--border-gold) !important;
}

/* ===================================================
   5. 메뉴바 배경 베이지
   =================================================== */
#headerwrapr .menuOutline {
  background: var(--beige) !important;
  border-top: 1px solid var(--border-gold) !important;
}

/* ===================================================
   6. 카테고리 버튼 골드 배경
   =================================================== */
.menu li.category {
  background: var(--gold) !important;
  border-left: none !important;
  border-right: none !important;
}
.menu li.category > span,
.menu li.category a {
  color: #fff !important;
}
.menu li.category img {
  filter: brightness(10) !important;
}

/* ===================================================
   7. 검색창 보더 골드
   =================================================== */
.header .srchbarBox .srch {
  border: 2px solid var(--gold) !important;
}

/* ===================================================
   8. 상품 가격 골드
   =================================================== */
.discount {
  color: var(--gold) !important;
}
.product ul li.main_vedioPrice {
  color: var(--gold) !important;
}

/* ===================================================
   9. 구매 버튼 골드 + 둥근 모서리
   =================================================== */
.prod_buy_btn {
  background: var(--gold) !important;
  border: none !important;
  border-radius: 25px !important;
}
.prod_buy_btn:hover {
  background: var(--gold-bright) !important;
}

/* ===================================================
   10. "더보기" 버튼 둥근 모서리 + 골드
   =================================================== */
.liveMore {
  border-radius: 20px !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
.liveMore a {
  color: var(--gold) !important;
}

/* ===================================================
   11. 상품 카드 hover 골드 보더 + 그림자
   =================================================== */
.goodsList > li .goods:hover {
  border: 1px solid var(--gold) !important;
  box-shadow: 0 4px 12px rgba(184,134,11,0.2) !important;
  transition: all 0.25s ease !important;
}

/* ===================================================
   12. 카테고리 subMenu hover 골드
   =================================================== */
.menu li.category > ul.subMenu > li:hover {
  border-bottom: 3px solid var(--gold) !important;
}
.menu li.category > ul.subMenu > li:hover a {
  color: var(--brown) !important;
}
.menu_wrap .detailMenuBg {
  border-bottom: 3px solid var(--gold) !important;
}
.site_category ul li > ul li a:hover {
  border-bottom: 4px solid var(--gold-light) !important;
}

/* ===================================================
   13. 히트상품 탭 active 골드 브라운
   =================================================== */
.hit_goods .goods_navi li.on {
  border: 2px solid var(--brown) !important;
  background: var(--beige) !important;
}
.hit_goods .goods_navi li:hover a {
  color: var(--gold) !important;
}

/* ===================================================
   14. 서브 섹션 메뉴 hover/active 브라운
   =================================================== */
.section01_inner .section01 .section_menu li:hover,
.section01_inner .section01 .section_menu li.here {
  background: var(--brown) !important;
}
.section01_inner .section01 .section_menu li:hover a,
.section01_inner .section01 .section_menu li.here a {
  color: #fff !important;
}

/* ===================================================
   15. 푸터 배경 브라운
   =================================================== */
#footer .fot_inner {
  background: var(--brown) !important;
}
#footer .center p {
  color: var(--gold-light) !important;
}

/* ===================================================
   16. Quick 사이드메뉴 / sideRwing
   =================================================== */
.b_Box {
  background: var(--brown) !important;
  border-bottom-color: var(--gold) !important;
}
.sideRwing {
  background: var(--beige) !important;
}

/* ===================================================
   17. 강조 텍스트 골드
   =================================================== */
.section03 .goods_contnet p > span {
  color: var(--gold) !important;
}

/* ===================================================
   18. 페이지 번호 hover 브라운
   =================================================== */
.section03 .page_num a.here_num,
.section03 .page_num a:hover {
  border: 1px solid var(--brown) !important;
  color: var(--brown) !important;
}

/* 이 줄을 추가 - site_category 링크만 원래 색으로 강제 복원 */
.menu li.category .site_category ul li > ul li a {
  color: #343434 !important;
}
.menu li.category .site_category ul li > ul li a:hover {
  color: #000 !important;
  border-bottom: 4px solid #D4A843 !important;
}
.menu li.category .site_category ul li > span {
  color: #333 !important;
}

/* site_category 링크 색상 강제 복원 - .menu li.category a 규칙 덮어쓰기 */
.menu li.category .site_category ul li > ul li a,
.menu li.category .site_category p > a {
  color: #343434 !important;
}
.menu li.category .site_category ul li > ul li a:hover {
  color: #000 !important;
}
.menu li.category .site_category ul li > span {
  color: #333 !important;
}
.menu li.category .site_category ul li.live_menu ul li > span {
  color: #343434 !important;
  background: none !important;
}

/* ===================================================
   로그인/회원가입 버튼 골드
   =================================================== */
#btn_sign,
#btn_join,
.btn_submit,
input[type="submit"] {
  background: #B8860B !important;
  border: none !important;
  color: #fff !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}
#btn_sign:hover,
#btn_join:hover,
input[type="submit"]:hover {
  background: #E8C050 !important;
}

/* ===================================================
   다시보기/라이브보기 버튼 골드 테마
   =================================================== */
.replay_btn {
  background: var(--gold) !important;
  background: #B8860B !important;
  border: 1px solid #96700A !important;
  color: #fff !important;
  border-radius: 4px !important;
  transition: background 0.2s ease !important;
}
.replay_btn:hover {
  background: #D4A843 !important;
}
.replay_btn a {
  color: #fff !important;
}

/* ===================================================
   상세 페이지 빨간 요소 → 골드 변경
   =================================================== */

/* 가격, 할인율, 빨간 텍스트 */
.num, .price,
.fc_red, span.fc_red,
.fb.fc_red, .fs18.fc_red,
.fs12.fc_red {
  color: #B8860B !important;
}

/* 구매하기 버튼 */
a.button-purchase,
#btn_AddDirect {
  background: #B8860B !important;
  background-color: #B8860B !important;
  border-color: #96700A !important;
}
a.button-purchase:hover,
#btn_AddDirect:hover {
  background: #D4A843 !important;
}

/* button-blue 클래스 (실제로 빨간색) */
.button.button-blue {
  background: #B8860B !important;
  border-color: #96700A !important;
}

/* ===================================================
   상세 페이지 빨간/청록 요소 → 골드 변경
   =================================================== */

/* 4% 할인 뱃지 부모 요소 배경 */
.price-discount {
  background: #B8860B !important;
  color: #fff !important;
}

/* 상품 탭 선택 상단 빨간 줄 (#ff5d64 → 골드) */
.tabmenu.selected {
  border-top: 2px solid #B8860B !important;
}

/* 구매하기 버튼 (.button-red) */
.button.button-red,
input.button.button-red {
  background: #B8860B !important;
  border-color: #96700A !important;
  color: #fff !important;
}
.button.button-red:hover {
  background: #D4A843 !important;
}

/* 카테고리 선택 탭 청록색 → 골드 브라운 */
a.goods[style*="background"],
.rewardLayer {
  background: #B8860B !important;
}

/* ===================================================
   상품 목록 hover 보더 빨강 → 골드
   =================================================== */
.section02_inner .section02 > .sub_List > li:hover .goods {
  border: 1px solid #B8860B !important;
}

/* 상세 페이지 주문 박스 빨간 보더 제거 */
.detail_section02 .goods_contentsBox .s_orderBox {
  border: 1px solid #C9A96E !important;
}

/* 탭 오른쪽 검정 보더 제거 */
.tabmenu.selected {
  border-right: 1px solid #cdcdcd !important;
}

/* ===================================================
   상세 페이지 썸네일 선택 보더 빨강 → 골드
   =================================================== */
.indicator_Image p,
.indicator_Image p img,
.gdImg_list li,
.img_list li {
  border: 1px solid #ddd !important;
}

/* JS inline style로 빨간 보더가 적용되는 경우 덮어쓰기 */
.indicator_Image p[style*="border"],
.left_goodsImages p[style*="border"],
img[style*="border: 2px solid red"],
img[style*="border:2px solid red"],
img[style*="border: 1px solid red"] {
  border-color: #B8860B !important;
}

/* 선택된 썸네일 골드 보더 */
.indicator_Image p.on,
.indicator_Image p.selected,
.gdImg_list li.on,
.img_list li.on {
  border: 2px solid #B8860B !important;
}

/* ===================================================
   상세 페이지 썸네일 선택 보더 빨강 → 골드
   =================================================== */

/* 썸네일 모든 보더 */
.indicator_Image p {
  border: 1px solid #ddd !important;
  cursor: pointer !important;
}

/* 선택된 썸네일 - JS가 border를 red로 바꾸는 걸 덮어씀 */
.indicator_Image p:first-child,
.indicator_Image p.on {
  border: 2px solid #B8860B !important;
}

/* img 태그에 직접 style이 붙는 경우 */
.indicator_Image img {
  border: none !important;
  outline: none !important;
}

/* p 태그 안 img에 선택 표시 */
.indicator_Image p:first-child img {
  outline: 2px solid #B8860B !important;
}

/* ===================================================
   PC 데스크톱 테마 오버라이드 - 빨간색 → 골드
   =================================================== */

/* 1. 검색창 테두리 */
.header .srchbarBox .srch {
  border-color: #B8860B !important;
}

/* 2. 카테고리 햄버거(≡) 아이콘 - li.category img */
li.category img {
  filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(0.7) !important;
}
/* 카테고리 span 텍스트 */
.menu li.category span {
  color: #B8860B !important;
}
li.category {
  border-left-color: #C9A96E !important;
  border-right-color: #C9A96E !important;
  background: #F5EDD8 !important;
}

/* 3. 카테고리 탭 하단 빨간 줄 */
.deal_wrap .deal_sub_menu ul li a.deal_depth1.on {
  border-top-color: #B8860B !important;
}

/* 4. category_btn 빨간 배경 */
.category_btn {
  background: #B8860B !important;
}

@charset "utf-8";
/*
 * psnmalls.com - 골드/베이지 테마 오버라이드 (데스크톱)
 * 파일 위치: /Asset/css/theme_override.css
 * html_header.asp <head>에 마지막 CSS로 추가:
 * <link rel="stylesheet" type="text/css" href="/Asset/css/theme_override.css">
 */

/* ===================================================
   1. 검색창 테두리 빨간색 → 골드
   =================================================== */
.header .srchbarBox .srch {
  border-color: #B8860B !important;
}

/* ===================================================
   2. 카테고리 햄버거(≡) 영역
   =================================================== */
li.category {
  border-left-color: #C9A96E !important;
  border-right-color: #C9A96E !important;
  background: #F5EDD8 !important;
}
.menu li.category span {
  color: #6B4E2A !important;
}
/* ≡ 이미지 골드 필터 */
li.category img {
  filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(0.75) !important;
}
/* 카테고리 버튼 빨간 배경 → 골드 */
.category_btn {
  background: #B8860B !important;
}
.category_btn a {
  color: #fff !important;
}

/* ===================================================
   3. 카테고리 탭 하단 선택 빨간 줄 → 골드
   =================================================== */
.deal_wrap .deal_sub_menu ul li a.deal_depth1.on {
  border-top-color: #B8860B !important;
}

/* ===================================================
   4. 기타 빨간색 → 골드 (공통)
   =================================================== */
/* 가격 */
.price, .s_price, .sale_price,
em.no, .fc_red, .color_red {
  color: #B8860B !important;
}
/* 버튼 */
.btn-red, .btn_buy, .popbtn-red-ok,
button[class*="red"], input[class*="red"],
a[class*="btn_red"] {
  background: #B8860B !important;
  border-color: #96700A !important;
  color: #fff !important;
}
/* 할인 뱃지 */
.badge, .sale-badge, .discount-rate,
span[class*="badge"], span[class*="sale"],
em[class*="rate"] {
  background: #B8860B !important;
  color: #fff !important;
  border-color: #B8860B !important;
}
/* 탭 선택 강조 */
.tab li.on a, .tab li.active a,
.tab_list li.on, .tab_list li.active {
  color: #B8860B !important;
  border-bottom-color: #B8860B !important;
}
/* 링크 강조 */
a.point, .point, .text_red {
  color: #B8860B !important;
}
/* 팝업 확인 버튼 */
a.btn_pop_confirm, button.btn_pop_confirm {
  background: #B8860B !important;
  border-color: #96700A !important;
}

/* ===================================================
   쇼핑방송 페이지
   =================================================== */
/* VOD 뱃지 초록 → 골드 */
.tag.vod {
  background: #B8860B !important;
}
/* LIVE 뱃지 빨강 → 다크골드 (구분 유지) */
.tag.live {
  background: #7a5500 !important;
}
/* ===================================================
   쇼핑방송 탭 정렬 수정
   - li.tabmenu 부모가 <a> 태그라 float 깨짐
   =================================================== */
ul#Subtabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
ul#Subtabs > a {
  display: contents !important; /* <a> 래퍼를 레이아웃에서 제거 */
}
ul#Subtabs .tabmenu {
  float: none !important;
  flex: 1 !important;
  width: auto !important;
}

.sub_top_tab .tabmenu.selected { border-right: 0px !important; }