@charset "utf-8";

/* =====================================================================
   Celebrity 영카트 PC 전역 CSS (default_shop.css)
   - 베이스: bootstrap5-basic. 셀렉터/구조는 보존, 색·치수만 토큰화.
   - 토큰은 css/celebrity-tokens.php(:root)에 정의된 것만 사용.
   - 흰배경 미니멀 럭셔리 / GNB 1차 ink·600 / 위젯헤더 중앙 / 푸터 다크.
   ===================================================================== */

/* ---------- 0. 전역 베이스 ---------- */
body.bg-light {
  background: var(--white) !important;
  color: var(--ink);
  font-family: var(--font-body);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--link); }

/* 고정폭 컨테이너 중앙 (부트스트랩 .container 폭 상한만 셀러브리티화) */
.container,
.main-header .container,
.top-menu-wrap .container,
.footer .container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 1. 헤더 (흰배경) ---------- */
/* 베이스는 .main-header.text-bg-primary → 흰배경 + ink 글씨로 재정의 */
.main-header {
  background: var(--white) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--hairline);
}
.main-header.text-bg-primary { /* 부트스트랩 유틸 무력화 (구조 보존) */
  background: var(--white) !important;
  color: var(--ink) !important;
}
.main-header a { color: var(--ink); }
.main-header a:hover { color: var(--link); }

/* 모바일 오프메뉴 버튼 */
.off-menu-btn { color: var(--ink); }

/* ---------- 2. GNB (1차/2차 메뉴) ---------- */
/* 1차: ink + weight600 가로 flex */
.main-header .nav-link.depth1 {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.2px;
  padding: var(--gnb-pad);
}
.main-header .nav-link.depth1:hover,
.main-header .nav-link.depth1:focus {
  color: var(--link);
}

/* 검색 아이콘도 1차 메뉴 톤 유지 */
.main-header .nav-link.depth1 .bi-search { color: var(--ink); }

/* 호버 드롭다운 (sub-menu-wrap / sub-nav) */
.sub-menu-wrap {
  background: var(--white);
  border: 1px solid var(--hairline);
}
.sub-nav .nav-link.depth2 {
  color: var(--text-mid);
  font-weight: 400;
}
.sub-nav .nav-link.depth2:hover,
.sub-nav .nav-link.depth2:focus {
  color: var(--ink);
  background: var(--panel-bg);
}
.menu-empty { color: var(--text-sub); }

/* ---------- 3. 유틸/탑 메뉴 바 ---------- */
/* head.php 기본 유틸바 */
.default-menu,
.default-menu-right {
  color: var(--text-sub);
}
.default-menu a,
.default-menu-right a { color: var(--text-sub); }
.default-menu a:hover,
.default-menu-right a:hover { color: var(--ink); }

/* shop.head.php 상단 메뉴 래퍼 */
.top-menu-wrap {
  background: var(--white);
  color: var(--text-sub);
  border-bottom: 1px solid var(--hairline);
}
.top-menu-wrap a { color: var(--text-sub); }
.top-menu-wrap a:hover { color: var(--ink); }

/* 상단 공지/쿠폰 바 (top-notice-bar / tn-msg) */
.top-notice-bar {
  background: var(--notice-bg);
  color: var(--white);
}
.top-notice-bar .tn-msg { color: var(--white); }
.top-notice-bar .tn-msg a,
.top-notice-bar .tn-msg .accent { color: var(--accent); }

/* 모바일 상단 드롭다운 메뉴 */
.mobile-top-menu .dropdown-menu { border: 1px solid var(--hairline); }
.mobile-top-menu .dropdown-item:hover { background: var(--panel-bg); }
.login-icon { color: var(--ink); }

/* ---------- 4. 위젯 섹션 헤더 (중앙정렬) ---------- */
/* 메인 위젯/상품 진열 섹션의 중앙 타이틀.
   구조 보존: 기존 .event-title 영역 + 공용 .section-head 패턴에 적용. */
.section-head {
  text-align: center;
  margin-bottom: var(--card-gap);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 3.0rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.section-head p {
  font-size: 1.6rem;
  color: var(--text-sub);
  margin: 0;
}

/* 이벤트 타이틀 영역 (shop/_event.php : .event-title) */
.event-title { margin-bottom: var(--card-gap); }
.event-title-link { color: var(--ink); }
.image-title-text { color: var(--white); }

/* 상품 슬라이더/owl 래퍼 폭 일관 */
.shop-index-owl-wrap,
.shop-index-slider-wrap {
  max-width: var(--container-max);
}

/* 모바일: 메인 비주얼 슬라이더 풀폭(소스 theme_visual 풀블리드) */
@media (max-width: 767.98px) {
  .shop-index-owl-wrap,
  .shop-index-slider-wrap {
    max-width: none;
    width: 100%;
    margin-top: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }
  .shop-index-owl-wrap .bg-white,
  .shop-index-slider-wrap .bg-white { border-radius: 0; }
  .shop-index-owl-wrap .owl-shopslider .item img,
  .shop-index-owl-wrap .owl-shopslider .item .d-block.d-md-none {
    width: 100%;
    display: block;
  }
}

/* ---------- 5. 상품 카드 (sct_li) ---------- */
/* 1:1 정사각 이미지 + 상품명 하단 hairline + 가격 강조 + 카드 간격 */
.sct_li {
  margin-bottom: var(--card-gap);
}
.sct_img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--panel-bg);
}
.sct_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sct_txt {
  display: block;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.6em;
  margin-bottom: 0.6em;
}
.sct_txt:hover { color: var(--link); }
.sct_cost {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.3em;
}
.sct_soldout,
.sct_sale { color: var(--sale); }

/* 카드 호버 4액션 영역 (찜/팝업/카트/좋아요) */
.sct_li .sct_img .sct_opt,
.sct_li .sct_img .sct_action {
  background: rgba(0, 0, 0, 0.04);
}
.sct_li .sct_img .sct_opt a,
.sct_li .sct_img .sct_action a {
  color: var(--ink);
}
.sct_li .sct_img .sct_opt a:hover,
.sct_li .sct_img .sct_action a:hover {
  color: var(--sale);
}

/* ---------- 6. 검색 칩 / pill ---------- */
.search-chip,
.search-pill {
  background: var(--chip-bg);
  color: var(--text-sub);
  border: 1px solid var(--hairline);
}

/* ---------- 7. 카드형 연회색 패널 ---------- */
.coupon-header,
.point-header,
.order-view-header,
.event-list-wrap {
  background: var(--panel-bg);
}

/* ---------- 8. 푸터 (다크) ---------- */
/* 베이스 .footer.bg-dark.text-light → ft-bg + 흰글씨로 토큰화 */
.footer {
  background: var(--ft-bg) !important;
  color: var(--white) !important;
}
.footer.bg-dark { background: var(--ft-bg) !important; }
.footer .text-light,
.footer a,
.footer .list-group-item,
.footer .company-info .list-group-item,
.footer .site-title,
.footer .tail-copyright {
  color: var(--white) !important;
}
.footer .company-info .list-group-item {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}
.footer a:hover { color: var(--accent) !important; }
.footer .tail-menu { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer .site-title {
  font-family: var(--font-display);
  font-weight: 600;
}
.footer .sns-icons-wrap a { color: var(--white); }
.footer .sns-icons-wrap a:hover { color: var(--accent); }
.footer .tail-copyright { color: var(--text-sub) !important; }
.footer-logo img { max-height: 28px; }

/* ---------- 9. 공용 링크/유틸 ---------- */
a.visit { color: var(--text-sub); }
.gotop {
  color: var(--ink);
  border-color: var(--hairline);
}
.gotop:hover {
  background: var(--ink);
  color: var(--white);
}

/* 본문 링크 톤 */
.shop-index-owl-wrap a,
.shop-index-slider-wrap a,
.product-title { color: var(--ink); }
.product-title { text-align: center; }

/* =====================================================================
   10. 체크아웃 / 주문서 (orderform·cart) — 가독성·정렬 정리
   영카트 표준 클래스(#sod_frm, .tbl_frm01, .sod_bsk_*, #sod_frm_paysel)
   대상. 마크업 불변, CSS only. 토큰 사용.
   ===================================================================== */
#sod_frm {
  max-width: var(--container-max);
  margin: 24px auto 60px;
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: -0.3px;
}
#sod_frm h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 34px 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
#sod_frm h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}

/* ---- 주문 상품목록 테이블 ---- */
#sod_frm .od_prd_list table { width: 100%; border-collapse: collapse; }
#sod_frm .od_prd_list thead th {
  background: var(--chip-bg);
  color: var(--text-sub);
  font-weight: 600;
  font-size: 13px;
  padding: 12px 10px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
}
#sod_frm .od_prd_list tbody td {
  padding: 16px 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  vertical-align: middle;
}
#sod_frm .sod_img img { border: 1px solid var(--hairline); border-radius: 4px; }
#sod_frm .sod_name { font-weight: 600; }
#sod_frm .sod_opt { color: var(--text-sub); font-size: 12.5px; margin-top: 4px; }

/* ---- 입력 폼 테이블 (주문/받는분) ---- */
#sod_frm .tbl_frm01 table { width: 100%; border-collapse: collapse; }
#sod_frm .tbl_frm01 th {
  width: 120px;
  text-align: left;
  vertical-align: middle;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-sub);
  background: var(--chip-bg);
  border-bottom: 1px solid var(--hairline);
}
#sod_frm .tbl_frm01 td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
#sod_frm .frm_input,
#sod_frm input[type=text],
#sod_frm input[type=password],
#sod_frm input[type=email],
#sod_frm input[type=tel],
#sod_frm input[type=number],
#sod_frm select,
#sod_frm textarea {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  box-sizing: border-box;
  max-width: 100%;
  vertical-align: middle;
}
#sod_frm textarea { height: auto; padding: 10px 12px; min-height: 80px; }
#sod_frm input:focus,
#sod_frm select:focus,
#sod_frm textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(38,38,38,0.08);
}
#sod_frm .frm_input.full_input,
#sod_frm input.frm_input[name^="od_addr"],
#sod_frm input.frm_input[name^="od_b_addr"] { width: 100%; margin-top: 6px; }

/* 주소검색 버튼 */
#sod_frm .btn_address {
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
#sod_frm .btn_address:hover { background: var(--ink); color: var(--white); }

/* ---- 주문 요약 (sod_bsk) ---- */
#sod_frm .sod_bsk_list,
#sod_frm .sod_right ul { list-style: none; margin: 0; padding: 0; }
#sod_frm li[class^="sod_bsk_"],
#sod_frm li[class*=" sod_bsk_"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
#sod_frm li[class^="sod_bsk_"] span:first-child { color: var(--text-sub); }
#sod_frm .sod_bsk_cnt {
  font-weight: 700;
  font-size: 16px;
  border-bottom: 2px solid var(--ink);
}
#sod_frm .sod_bsk_cnt strong,
#sod_frm #od_tot_price strong { color: var(--sale); }

/* 총 주문금액 강조 박스 */
#sod_frm #od_tot_price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0;
  padding: 18px 20px;
  background: var(--panel-bg);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}
#sod_frm #od_tot_price strong { font-family: var(--font-display); font-size: 22px; }

/* 결제정보 테이블 */
#sod_frm #sod_frm_pay table { width: 100%; border-collapse: collapse; }
#sod_frm #sod_frm_pay th,
#sod_frm #sod_frm_pay td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
#sod_frm .btn_frmline {
  height: 36px; padding: 0 14px; margin-left: 6px;
  border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--white); color: var(--ink); font-size: 13px; cursor: pointer;
}
#sod_frm .btn_frmline:hover { border-color: var(--ink); }

/* ---- 결제수단 (라디오 → 선택 박스) ---- */
#sod_frm #sod_frm_pt_alert { color: var(--text-sub); font-size: 13px; margin: 8px 0 16px; }
#sod_frm #sod_frm_pt_alert strong { color: var(--ink); }
#sod_frm #sod_frm_paysel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: 0;
  margin: 0 0 18px;
  padding: 0;
}
#sod_frm #sod_frm_paysel input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
#sod_frm #sod_frm_paysel label.lb_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 15px 20px;
  background: var(--white);
  background-image: none;       /* 기본 스프라이트 아이콘 제거 */
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-indent: 0;
  cursor: pointer;
  transition: all .15s;
}
#sod_frm #sod_frm_paysel label.lb_icon:hover { border-color: var(--ink); }
#sod_frm #sod_frm_paysel input[type=radio]:checked + label.lb_icon {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* 무통장 계좌선택/입금자 */
#sod_frm .sod_bank_sel { margin-top: 14px; padding: 14px; background: var(--chip-bg); border-radius: 8px; }

/* ---- 주문/취소 버튼 ---- */
#sod_frm .btn_confirm,
.btn_confirm#display_pay_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 10px;
}
#sod_frm .btn_submit,
.btn_confirm .btn_submit {
  min-width: 220px;
  height: 54px;
  padding: 0 40px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background .15s;
}
#sod_frm .btn_submit:hover,
.btn_confirm .btn_submit:hover { background: #000; }
.btn_confirm .btn01,
#sod_frm .btn01 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 54px;
  padding: 0 28px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
}
.btn_confirm .btn01:hover { border-color: var(--ink); }

/* ---- 반응형 (좁은 화면) ---- */
@media (max-width: 767.98px) {
  #sod_frm { margin: 12px auto 40px; padding: 0 4px; }
  #sod_frm h2 { font-size: 17px; margin: 24px 0 12px; }
  #sod_frm .tbl_frm01 th {
    display: block; width: auto; background: transparent;
    border-bottom: 0; padding: 12px 4px 4px; color: var(--ink); font-weight: 600;
  }
  #sod_frm .tbl_frm01 td { display: block; padding: 0 4px 12px; border-bottom: 1px solid var(--hairline); }
  #sod_frm .frm_input,
  #sod_frm input[type=text],
  #sod_frm select,
  #sod_frm textarea { width: 100%; }
  #sod_frm #sod_frm_paysel label.lb_icon { flex: 1 1 calc(50% - 10px); min-width: 0; }
  #sod_frm .btn_confirm { flex-direction: column-reverse; }
  #sod_frm .btn_submit,
  .btn_confirm .btn_submit,
  .btn_confirm .btn01 { width: 100%; min-width: 0; }
}

/* ---------- 10-b. 체크아웃 PC 가독성 보강 ---------- */
/* 주문/받는분/결제정보 섹션을 카드로 분리 */
#sod_frm #sod_frm_orderer,
#sod_frm #sod_frm_taker,
#sod_frm #sod_frm_pay {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 8px 24px 20px;
  margin-bottom: 20px;
}
#sod_frm #sod_frm_orderer h2,
#sod_frm #sod_frm_taker h2,
#sod_frm #sod_frm_pay h2 { margin-top: 16px; }
/* 좌우 2단 간격 */
#sod_frm .sod_left { display: flex; flex-wrap: wrap; gap: 20px; }
#sod_frm .sod_left > section { flex: 1 1 360px; margin-bottom: 0; }
/* 라벨 가독성 상향 */
#sod_frm .tbl_frm01 th { font-size: 14px; color: var(--ink); font-weight: 600; background: transparent; width: 96px; }
#sod_frm .tbl_frm01 td { border-bottom: 1px solid var(--hairline); }
#sod_frm .tbl_frm01 tr:last-child td,
#sod_frm .tbl_frm01 tr:last-child th { border-bottom: 0; }
/* 상품목록 가독성 */
#sod_frm .od_prd_list { border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline); margin-bottom: 20px; }
#sod_frm .od_prd_list table { margin: 0; }
/* 결제수단 영역 여백 */
#sod_frm #od_pay_sl { margin-top: 8px; }