/*
Theme Name: Flatsome Child Theme
Theme URI: http://flatsome.uxthemes.com/
Description: This is a child theme for Flatsome
Author: UX Themes
Author URI: http: //www.uxthemes.com/
Template: flatsome
Version: 2.6
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ================================
   통일된 폰트 설정
   ================================ */

/*
  상품 목록 레이아웃을 위한 마법의 코드
  --- 30년 경력 전문가 제공 ---
*/
/*
  ================================================
  옵션 2: 회전하는 플러스(+) 아이콘 (전문가 추천)
  ================================================
*/

.grobal-intro-image img {
  border-radius: 8px !important;
  transition: transform 300ms ease-out, box-shadow 300ms ease-out !important;
}
.grobal-intro-image:hover,
.grobal-intro-image img:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.1);
}

.wcpr-load-more-reviews-button-container .wcpr-load-more-reviews-button {
  display: block;
  min-height: 65px;
  padding: 24px 28px;
  background: transparent;
  min-width: 150px;
  color: #4f46e5;
  border: none;
  border: 2px solid #4f46e5;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  line-height: 0.9;
  position: relative;
  transition: transform var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
.wcpr-load-more-reviews-button:hover {
  transform: translateY(-1px);
  background-color: #4f46e5;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
  color: white;
}
.product-stacked-info
  .price-wrapper
  p.price:not(.price-on-sale)
  span.woocommerce-Price-amount
  bdi {
  /* 할인가격이 없는 경우 정상가격만 스타일 */
  font-weight: 800;
  font-size: 1.3em;
}
.woocommerce-pagination ul.links li {
  margin-left: 8px;
}
.product-footer > .container > #reviews {
  margin-top: 80px;
}
#comments
  .wcpr-overall-rating-and-rating-count.grid-style
  .wcpr-overall-rating {
  flex-grow: unset;
}

/* row를 flexbox로 변경 */
.wcpr-stars-count .wcpr-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#comments .wcpr-overall-rating-and-rating-count {
  min-height: 120px;
}
/* 왼쪽 필드들 고정 크기 + 왼쪽 정렬 */
.wcpr-stars-count .wcpr-row .wcpr-col-number {
  width: 20px !important;
  min-width: 20px;
  flex-shrink: 0;
  text-align: left !important;
}

.wcpr-stars-count .wcpr-row .wcpr-col-star {
  width: 15px !important;
  min-width: 15px;
  flex-shrink: 0;
  text-align: left !important;
}
.rate-percent-bg .rate-percent {
  border-radius: 8px !important;
}
/* 가운데 process 필드는 남은 공간 모두 차지 */
.wcpr-stars-count .wcpr-row .wcpr-col-process {
  flex-grow: 1 !important;
  width: auto !important;
  max-width: none !important;
}

/* 오른쪽 퍼센트 필드 고정 크기 + 오른쪽 정렬 */
.wcpr-stars-count .wcpr-row .wcpr-col-rank-count {
  width: 40px !important;
  min-width: 40px;
  flex-shrink: 0;
  text-align: right !important;
}

/* inline-block 스타일 초기화 */
.wcpr-stars-count .wcpr-row > div {
  display: flex !important;
  align-items: center;
  text-align: left !important;
}
.wcpr-overall-rating-and-rating-count {
  min-height: 120px !important;
}
/**포스트의 상품 슬라이더 스타일**/
.home-title {
  margin: 40px 0;
}
.page-id-15 .logo a {
  text-align: center;
}

.titlebest2 {
  margin: 40px 0 !important;
}
#comments .wcpr-overall-rating-and-rating-count.grid-style .wcpr-stars-count,
#comments
  .wcpr-overall-rating-and-rating-count.grid-style
  .wcpr-overall-rating {
  background-color: #ffffff !important;
}

.rate-percent-bg {
  background: #f1f3f4 !important;
}
.rate-percent {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  background: #fbbf24 !important;
}
#show_comments {
  text-align: center;
  margin: auto;
  width: 100%;
  border: 3px solid #4f46e5;
  font-size: 18px;
  border-radius: 6px;
  padding: 15px 20px;
}

.single-post .article-inner .box-text.text-center {
  text-align: left;
}
.single-post .article-inner .box-text.text-center .add-to-cart-button {
  display: none;
}

.single-post .article-inner .box-text.text-center .sale-perc {
  display: block;
  margin: 12px auto 12px 0px !important;
}

.single-post .article-inner .box-text.text-center .rating-wrapper {
  display: block !important;
}
.ux-logo-link,
.ux-logo-link.block.image-color,
.badge-footer .has-hover [class*="image-"] img {
  border: none !important;
}
.pswp__bg {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
.slider-wrapper .has-hover [class*="image-"] img {
  border: none !important;
}
.vg-language-select {
  /* 대표님의 기존 스타일 (유지) */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 1;
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #222;
  color: #fff !important;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;

  /* --- ★★★ 여기서부터 화살표를 위한 코드 추가 ★★★ --- */

  /* 1. 화살표로 사용할 SVG 아이콘을 배경 이미지로 추가합니다. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  /* 2. 배경 이미지 설정을 조정합니다. */
  background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
  background-position: right 15px center; /* 오른쪽에서 15px, 세로 중앙에 위치 */
  background-size: 1em 1em; /* 화살표 크기 조정 */

  /* 3. 화살표가 들어갈 공간을 확보하기 위해 오른쪽 패딩을 늘려줍니다. */
  padding-right: 40px;
}

/* (선택) 마우스를 올렸을 때 테두리 색상 변경 등 추가 효과 */
.vg-language-select:hover {
  border-color: #666;
}

.page-id-15 .mobile.bottom {
  display: none;
}
.wc-block-cart-item__product .wc-block-components-product-low-stock-badge {
  display: none !important;
}

/* --- 공식 인증 내역 섹션 (auth 클래스) 스타일링 --- */
.header-bottom .nav-dropdown {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background-color: #f9f9f9;
  padding: 12px !important;
}
.nav-dropdown-has-shadow .nav-dropdown {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* 1. Box 엘리먼트 내부의 이미지 컨테이너(.box-image)를 정사각형으로 만듭니다. */
.auth .box-image > div {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 정사각형 비율 강제 */
  overflow: hidden; /* 컨테이너를 벗어나는 이미지 숨김 */
  border: 1px solid #eaeaea;
  border-radius: 8px; /* 부드러운 모서리 (원치 않으시면 이 줄 삭제) */
  background-color: #ffffff; /* 이미지가 로드되기 전 흰색 배경 */
}

/* 2. 실제 이미지(img)의 크기와 위치를 조정합니다. */
.auth .box-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(
    -50%,
    -50%
  ); /* 이미지를 컨테이너 중앙에 완벽히 위치시킴 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 비율을 유지하며 컨테이너를 가득 채움 (마법의 코드) */
  object-position: center top; /* 이미지의 '가운데 상단'을 우선적으로 보여줌 */
}

/* 3. Box 엘리먼트의 텍스트 영역 스타일을 조정합니다. */
.auth .box-text {
  padding-top: 15px; /* 이미지와 텍스트 사이 간격 */
  padding-bottom: 0;
}

.auth .box-text p {
  font-size: 90%; /* 텍스트 크기를 약간 줄여 균형을 맞춤 */
  margin-bottom: 0;
}

/* 4. 각 컬럼(카드) 사이의 간격을 조정합니다. */
/* 모바일 화면에서 컬럼 사이의 상하 간격을 만듭니다. */
@media (max-width: 549px) {
  .auth .col {
    margin-bottom: 20px;
  }
}

.h4titleproduct {
  padding: 0px 0px 0px 0px !important;
  margin: 80px 0px 40px 0px !important;
  background-color: transparent;
}
.product-section {
  margin-top: 80px;
}
.section-title b {
  background-color: transparent;
}

/* 아이콘을 감싸는 컨테이너에 transition 효과를 줍니다. */
.accordion.prdc .accordion-title .icon-angle-down {
  transition: transform 0.3s ease-in-out;
  font-weight: normal; /* 아이콘이 뭉개지지 않도록 기본 굵기로 설정 */
}
.accordion.prdc .accordion-title.plain {
  padding: 20px 0 !important; /* 상하 여백을 넉넉하게 주어 쾌적하게 만듭니다. */
  color: #333333 !important; /* 기본 질문 텍스트 색상을 진하게 설정합니다. */
  font-weight: 600; /* 폰트를 약간 더 굵게 하여 질문을 강조합니다. */
  padding: 16px 3.3em !important;
}
.accordion.prdc .accordion-item {
  border-bottom: 1px solid #eaeaea !important;
}
.accordion.prdc .accordion-item:hover {
  background-color: #f9f9f9;
}
/* 기본 상태 (닫혔을 때) 아이콘을 '+'로 설정 */
.accordion.prdc .accordion-title .icon-angle-down:before {
  font-size: 24px !important;
  color: #999999;
}

/* 활성화 상태 (열렸을 때) 아이콘을 45도 회전 */
.accordion.prdc .accordion-title.plain.active .icon-angle-down {
  font-size: 24px !important;
}
.accordion.prdc .accordion-title.plain.active .icon-angle-down:before {
  color: #4338ca !important;
}
.pr-row-1 .col-inner,
.product-gallery-4th-container {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}
.pr-row-1 .col-inner:hover,
.product-gallery-4th-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.1);
}

.wc-block-components-main.wc-block-cart__main.wp-block-woocommerce-cart-items-block
  .wc-block-cart-item__product
  a {
  color: #333 !important;
}
.wc-block-components-main.wc-block-cart__main.wp-block-woocommerce-cart-items-block
  .wc-block-cart-item__product
  a:hover {
  text-decoration: underline !important;
}
.page-title.shop-page-title.product-page-title .breadcrumbs a {
  color: #777 !important;
  font-size: 17px;
}
.page-title.shop-page-title.product-page-title .breadcrumbs a:hover {
  text-decoration: underline;
  color: #777;
}
/**결제 페이지 ***/
.woo-empty-cart,
.woo-filled-cart,
.page-id-14 #main,
.page-id-14 .page-wrapper {
  min-height: 800px;
}
.page-id-14 .pafw-payment-method.box {
  display: none;
}
#customer_details div:nth-child(1) > div > h3 {
  font-size: 24px; /* 현재 크기보다 작게 조정 */
  font-weight: 600; /* 900(black) -> 600(semibold) 정도로 조정 */
  margin-bottom: 20px; /* 아래 필드와의 간격은 유지 */
}
.woocommerce form .form-row label {
  margin-bottom: 8px;
}
.form-row label .required {
  color: #4f46e5 !important; /* 브랜드 색상으로 변경 */
  text-decoration: none; /* 밑줄 등 불필요한 장식 제거 */
  font-weight: bold; /* 중요도를 위해 굵게 표시 */
}

/* --- 최적화된 최종 입력 필드 스타일 --- */
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea,
.select2-container--default .select2-selection--single {
  /* 기본 스타일 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;

  /* 디자인 & 타이포그래피 */
  background-color: #fff;
  border: 1px solid #dcdcdc; /* 더 연하고 부드러운 테두리 */
  border-radius: 4px; /* 살짝 둥근 모서리 */
  color: #333;
  font-size: 16px; /* 명확한 px 단위 사용 */
  padding: 12px 15px; /* 모든 필드에 동일한 패딩 적용 */
  height: auto; /* 고정 높이를 없애고 패딩으로 높이를 제어 */
  line-height: 1.5; /* 텍스트의 수직 정렬을 위해 줄 높이 지정 */

  /* 인터랙션 */
  transition: border-color 0.2s ease-in-out;

  /* 불필요한 효과 제거 */
  box-shadow: none !important; /* 내부 그림자 제거 */
}

/* 포커스(클릭 시) 스타일 */
.woocommerce-input-wrapper input:focus,
.woocommerce-input-wrapper textarea:focus,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
  /* 기존 테두리는 그대로 유지 */
  border-color: #4f46e5 !important; /* 대표님 사이트의 보라색 */

  /* ★★★ 글자 밀림 해결의 핵심 ★★★ */
  /* 테두리 안쪽에 1px 두께의 선명한 그림자를 추가하여 '두꺼운 테두리' 효과를 냄 */
  box-shadow: 0 0 0 1px #4f46e5 !important;

  /* 브라우저 기본 파란색 아웃라인 제거 */
  outline: none !important;
}

/* --- Select2 드롭다운 스타일 맞춤 코드 --- */

/* 1. Select2 컨테이너의 기본 높이와 모양 설정 */
.select2-container--default .select2-selection--single {
  /* ★★★ 높이 통일의 핵심 ★★★ */
  height: auto !important; /* 고정 높이 제거 */
  /* input과 동일한 패딩 값으로 높이를 맞춤 */
  padding: 12px 15px !important;
  line-height: 1.5 !important; /* 텍스트 수직 정렬 */

  /* 디자인 & 타이포그래피 */
  background-color: #fff !important;
  border: 1px solid #dcdcdc !important; /* 추천드렸던 세련된 회색 */
  border-radius: 4px !important;
  font-size: 16px !important;
  color: #333 !important;

  /* 불필요한 효과 제거 */
  box-shadow: none !important;
}

/* 2. 선택된 텍스트 스타일 */
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #333 !important;
  padding-left: 0 !important; /* 불필요한 내부 패딩 제거 */
  line-height: inherit !important; /* 부모 line-height 상속 */
}

/* 3. 기본 화살표 제거 및 커스텀 화살표 추가 */
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  /* 기본 화살표 숨기기 */
  display: none !important;
}
/* 가짜 드롭다운에 직접 만든 화살표 배경으로 추가 */
.select2-container--default .select2-selection--single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888888' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px 16px;
}

/* 4. 포커스(활성) 상태 스타일 */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
  border-width: 2px !important;
  border-color: #4f46e5 !important; /* 대표님 사이트의 보라색 */
  outline: none !important;
  /* 두꺼워진 테두리만큼 패딩을 1px 줄여, 텍스트가 밀리는 현상 방지 */
  padding: 11px 14px !important;
}

/* Textarea에만 적용 (여러 줄 입력창) */
.woocommerce-input-wrapper textarea {
  min-height: 120px; /* 최소 높이 지정 */
  resize: vertical; /* 수직으로만 크기 조절 가능하게 */
}

#billing_postcode_search {
  background-color: white;
  color: #4f46e5;
  border: 1px solid #4f46e5;
  border-radius: 4px;
  font-size: 20px;
  width: 100%;
}

#billing_postcode_search:hover {
  background-color: #4f46e5 !important; /* 브랜드 색상으로 채우기 */
  border-color: #4f46e5 !important; /* 테두리도 동일한 색으로 */
  color: #fff !important; /* 글씨는 흰색으로 */
}

.form-row.place-order .button#place_order {
  font-size: 28px;
  background-color: #4f46e5 !important;
  border-radius: 4px;
  letter-spacing: 5px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.26);
  margin-bottom: 15px;
}

/* 1. 각 결제수단 항목(.wc_payment_method)의 기본 스타일 */
#payment .wc_payment_methods .wc_payment_method {
  display: flex;
  /* ★★★ 핵심 해결책: baseline으로 정렬하여 텍스트 기준선을 맞춤 ★★★ */
  align-items: center;

  padding: 15px 20px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
#payment .wc_payment_methods .wc_payment_method label {
  /* ★★★ 핵심 해결책: 라벨이 남은 공간을 모두 차지하도록 설정 ★★★ */
  flex-grow: 1 !important;

  /* 나머지 스타일 */
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0; /* 불필요한 마진 제거 */
}

.wc_payment_methods.payment_methods.methods label {
  cursor: pointer !important; /* 클릭 가능하다는 신호 */
}
#payment .wc_payment_methods .wc_payment_method.selected {
  font-weight: 600;
  border-color: #4f46e5; /* 브랜드 색 테두리로 강조 */
  background-color: #f8f7ff; /* 브랜드 색을 아주 연하게 만든 배경 */
  box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.1); /* 은은한 그림자로 입체감 부여 (선택사항) */
}

#payment .wc_payment_methods .wc_payment_method:not(.selected):hover {
  border-color: #4f46e5; /* 살짝 진한 회색으로 피드백 */
  transform: translateY(-2px); /* 살짝 떠오르는 효과 (선택사항) */
}
/* 선택된 항목의 라벨 텍스트는 굵게 */
#payment .wc_payment_methods .wc_payment_method.selected label {
  font-weight: 600;
}
#payment .wc_payment_methods .wc_payment_method input[type="radio"]:checked {
  border-color: #4f46e5; /* 브랜드 색 테두리 */
  background-color: #4f46e5; /* 안쪽을 브랜드 색으로 채우기 */
  box-shadow: inset 0 0 0 3px #fff; /* 안쪽에 흰색 링을 만들어 '도넛' 모양 완성 */
}

#payment .wc_payment_methods .wc_payment_method input[type="radio"] {
  /* 모양 숨기기 및 기본 설정 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* 크기 및 여백 */
  width: 1.15em; /* 약 18.4px */
  height: 1.15em;
  margin-right: 12px; /* 라벨과의 간격 */

  /* 테두리 및 모양 */
  border: 2px solid #ccc; /* 기본 테두리 */
  border-radius: 50%; /* 원형으로 만들기 */

  /* 위치 및 정렬 (가장 중요!) */
  position: relative; /* absolute 대신 relative 사용 */
  top: 0px; /* 텍스트와 수직 위치 미세 조정 */
  flex-shrink: 0; /* flex 컨테이너 안에서 찌그러지지 않게 함 */

  /* 부드러운 전환 효과 */
  transition: all 0.2s ease;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0px 12px 0px 0px;
  transition: all 0.2s ease;
  flex-shrink: 0; /* 공간이 좁아져도 찌그러지지 않음 */
}

/* 2. '선택된' 라디오 버튼의 스타일 */
#payment .wc_payment_methods .wc_payment_method input[type="radio"]:checked {
  /* 테두리 색상을 브랜드 색으로 변경 */
  border-color: #4f46e5;
  top: 1px;
  /* ★★★ 안쪽 점 만들기 (가장 확실한 방법) ★★★ */
  /* 배경색은 사용하지 않고, box-shadow만으로 도넛 모양을 만듭니다. */
  background-color: transparent !important;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #4f46e5;
}
#order_review > table > tfoot > tr.order-total > td > strong > span {
  font-size: 28px;
  font-weight: 800;
  color: #4f46e5;
}
#order_review > table > tfoot > tr.order-total > td,
#order_review > table > tfoot > tr.order-total > th {
  font-size: 28px;
  border-top: 2px solid #333;
}
h3#order_review_heading {
  font-size: 22px; /* 현재 크기보다 20-30% 작게 조정 */
  font-weight: 600; /* 아주 두꺼운 900(black) 대신 600(semibold) 정도로 변경 */
  margin-bottom: 20px; /* 아래 내용과의 간격 확보 */
  text-align: left; /* 왼쪽 정렬 유지 */
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

.checkout-sidebar {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.payment-tneks {
  font-size: 22px; /* 현재 크기보다 20-30% 작게 조정 */
  font-weight: 600; /* 아주 두꺼운 900(black) 대신 600(semibold) 정도로 변경 */
  margin-bottom: 20px; /* 아래 내용과의 간격 확보 */
  text-align: left; /* 왼쪽 정렬 유지 */
  border-bottom: 1px solid #eee;
  margin-top: 56px;
  padding-bottom: 16px;
}
#order_review > table > tbody > tr > td.product-total > del > span > bdi {
  display: none;
}

.cart_item .price-wrapper ins bdi {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}
.cart_item .product-total {
  line-height: 0.7;
}
.cart_item .price-wrapper del bdi {
  margin-right: 0px;
  font-size: 15px !important;
  color: #444;
}
.cart_item .price-wrapper del .woocommerce-Price-amount.amount {
  margin-right: 0px !important;
}
.logo a {
  font-family: "Pretendard", sans-serif !important;
  text-decoration: none !important;
  color: #111827 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  font-size: 24px !important;
}
.logo a:hover {
  color: #4f46e5 !important;
  transition: color 0.2s ease-in-out !important;
}
/* =================================
   체크아웃 브레드크럼 - 선과 점 스타일
   ================================= */
/* =================================
   미니멀 도트 라인 브레드크럼 스타일
   ================================= */
/* =================================
   미니멀 도트 라인 브레드크럼 스타일
   ================================= */

/* 상위 컨테이너들 전체 너비로 확장 */
.checkout-page-title.page-title {
  width: 100% !important;
  max-width: none !important;
}

.checkout-page-title .page-title-inner {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.checkout-page-title .flex-col.flex-grow {
  width: 100% !important;
  display: none;
}

/* 전체 컨테이너 리셋 및 기본 설정 */
.checkout-breadcrumbs {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 30px 0 50px 0 !important;
  position: relative !important;
  text-transform: none !important; /* uppercase 제거 */
  font-weight: 400 !important; /* strong 제거 */
  font-size: 14px !important; /* h2 크기 제거 */
}

/* 기존 divider 화살표 완전히 숨기기 */
.checkout-breadcrumbs .divider {
  display: none !important;
}

/* 각 브레드크럼 링크 기본 스타일 */
.checkout-breadcrumbs a {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: #9ca3af !important; /* 기본: 회색 */
  font-weight: 500 !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
  margin: 0 30px !important; /* 좌우 간격 */
}

/* 브레드크럼 원형 도트 기본 스타일 */
.checkout-breadcrumbs .breadcrumb-step {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: #e5e7eb !important; /* 기본: 연한 회색 */
  border: none !important;
  margin-right: 12px !important;
  font-size: 0 !important; /* 숫자 숨기기 */
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

/* 연결선 생성 - 첫 번째와 두 번째 사이 */
.checkout-breadcrumbs a:nth-of-type(1)::after {
  content: "" !important;
  position: absolute !important;
  left: calc(100% + 15px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 260px !important;
  height: 2px !important;
  background-color: #e5e7eb !important;
  z-index: 1 !important;
}

/* 연결선 생성 - 두 번째와 세 번째 사이 */
.checkout-breadcrumbs a:nth-of-type(2)::after {
  content: "" !important;
  position: absolute !important;
  left: calc(100% + 15px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 260px !important;
  height: 2px !important;
  background-color: #e5e7eb !important;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 3px,
    #e5e7eb 3px,
    #e5e7eb 6px
  ) !important; /* 점선 효과 */
  z-index: 1 !important;
}

/* =================================
   각 단계별 상태 스타일
   ================================= */

/* 완료된 단계 스타일 */
.checkout-breadcrumbs a.completed,
.checkout-step-checkout .checkout-breadcrumbs a:nth-of-type(1),
.checkout-step-thankyou .checkout-breadcrumbs a:nth-of-type(1),
.checkout-step-thankyou .checkout-breadcrumbs a:nth-of-type(2) {
  color: #10b981 !important; /* 완료: 초록색 텍스트 */
}

.checkout-breadcrumbs a.completed .breadcrumb-step,
.checkout-step-checkout .checkout-breadcrumbs a:nth-of-type(1) .breadcrumb-step,
.checkout-step-thankyou .checkout-breadcrumbs a:nth-of-type(1) .breadcrumb-step,
.checkout-step-thankyou
  .checkout-breadcrumbs
  a:nth-of-type(2)
  .breadcrumb-step {
  background-color: #10b981 !important; /* 완료: 초록색 도트 */
}

/* 완료된 구간의 연결선을 실선으로 */
.checkout-step-checkout .checkout-breadcrumbs a:nth-of-type(1)::after,
.checkout-step-thankyou .checkout-breadcrumbs a:nth-of-type(1)::after {
  background-color: #10b981 !important;
  background-image: none !important; /* 점선 제거 */
}

/* 현재 활성 단계 스타일 */
.checkout-breadcrumbs a.current,
.checkout-step-cart .checkout-breadcrumbs a:nth-of-type(1),
.checkout-step-checkout .checkout-breadcrumbs a:nth-of-type(2),
.checkout-step-thankyou .checkout-breadcrumbs a:nth-of-type(3) {
  color: #4f46e5 !important; /* 현재: 브랜드 블루 */
  font-weight: 600 !important;
}

.checkout-breadcrumbs a.current .breadcrumb-step,
.checkout-step-cart .checkout-breadcrumbs a:nth-of-type(1) .breadcrumb-step,
.checkout-step-checkout .checkout-breadcrumbs a:nth-of-type(2) .breadcrumb-step,
.checkout-step-thankyou
  .checkout-breadcrumbs
  a:nth-of-type(3)
  .breadcrumb-step {
  background-color: #4f46e5 !important; /* 현재: 브랜드 블루 도트 */
  width: 16px !important; /* 현재 단계는 조금 더 크게 */
  height: 16px !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15) !important; /* 글로우 효과 */
}

/* =================================
   모바일 반응형
   ================================= */

@media (max-width: 768px) {
  .product-main .product-gallery {
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }
  .product-info.product-summary .woocommerce-product-rating {
    width: 100%;
  }
  .mb-half {
    margin-bottom: 0px;
  }

  .single-product .product-gallery-slider {
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
  .single-product .flickity-viewport {
    overscroll-behavior-y: contain;
    /* touch-action: pan-y; */ /* Flickity가 이미 인라인으로 적용하고 있을 수 있으므로, 일단 주석 처리하거나 제거 후 테스트 */
  }

  .product-section {
    margin-top: 40px;
  }
  .checkout-sidebar {
    background-color: #ffffff;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: NONE;
  }
  .checkout-breadcrumbs {
    padding: 20px 0 30px 0 !important;
    font-size: 12px !important;
  }

  .checkout-breadcrumbs a {
    margin: 0 20px !important;
  }

  .checkout-breadcrumbs a:nth-of-type(1)::after,
  .checkout-breadcrumbs a:nth-of-type(2)::after {
    width: 40px !important;
    left: calc(100% + 10px) !important;
  }

  .checkout-breadcrumbs .breadcrumb-step {
    width: 10px !important;
    height: 10px !important;
    margin-right: 8px !important;
  }

  .checkout-breadcrumbs a.current .breadcrumb-step,
  .checkout-step-cart .checkout-breadcrumbs a:nth-of-type(1) .breadcrumb-step,
  .checkout-step-checkout
    .checkout-breadcrumbs
    a:nth-of-type(2)
    .breadcrumb-step,
  .checkout-step-thankyou
    .checkout-breadcrumbs
    a:nth-of-type(3)
    .breadcrumb-step {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 480px) {
  .checkout-breadcrumbs {
    font-size: 11px !important;
  }

  .checkout-breadcrumbs a {
    margin: 0 15px !important;
  }

  .checkout-breadcrumbs a:nth-of-type(1)::after,
  .checkout-breadcrumbs a:nth-of-type(2)::after {
    width: 30px !important;
  }
}

/* =================================
   호버 효과 (선택사항)
   ================================= */

.checkout-breadcrumbs a:not(.no-click):hover {
  color: #4f46e5 !important;
  transform: translateY(-1px) !important;
}

.checkout-breadcrumbs a:not(.no-click):hover .breadcrumb-step {
  background-color: #6366f1 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

/**결제 페이지 끝***/

.wc-block-cart-item__total
  .wc-block-cart-item__total-price-and-sale-badge-wrapper
  .wc-block-components-product-badge.wc-block-components-sale-badge {
  margin-top: 12px !important;
  padding: 0px 8px !important;
}
.wc-block-cart-item__total
  .wc-block-cart-item__total-price-and-sale-badge-wrapper
  .wc-block-components-product-badge.wc-block-components-sale-badge
  .wc-block-formatted-money-amount.wc-block-components-formatted-money-amount {
  font-size: 14px;
}
.woo-cart-block {
  min-height: 600px;
}
.woo-cart-total {
  min-height: 400px;
}
.needhelp a,
.needhelp {
  font-size: 16px;
  color: #666 !important;
  margin-bottom: 32px;
}
.shop_table.shop_table_responsive > tbody > tr.order-total > td > strong > span,
.shop_table.shop_table_responsive > tbody > tr.order-total > th {
  font-size: 24px;
  font-weight: 600;
}

.shipping__table {
  margin-bottom: 32px;
  margin-top: 16px;
}

.cart_totals {
  border: 1px solid #ebebeb;
  padding: 24px 32px;
  background: #f9f9f9;
  border-radius: 6px;
}
.cart_totals
  > table:nth-child(1)
  > thead:nth-child(1)
  > tr:nth-child(1)
  > th:nth-child(1) {
  text-align: left;
}
.page-id-15 .mobile.bottom {
  display: none !important;
}
.has-hover [class*="image-"] img {
  border: 1px solid #ebebeb; /* #ebebeb은 연한 회색입니다. 더 진하거나 연하게 조절 가능합니다. */
  box-sizing: border-box; /* 테두리가 이미지 크기 안쪽으로 생기도록 설정 */
}
.star-rating:before {
  color: #e0e0e0 !important;
}
.product-main .woocommerce-review-link {
  font-size: 15px;
  color: #4f46e5;
  text-decoration: none;
  opacity: 1 !important;
  top: -2px;
  left: -5px;
  position: relative !important;
}
.wc-block-components-totals-shipping__via {
  display: none;
}
.product-small.box .rating-wrapper .woocommerce-review-link {
  margin-left: 6px;
  font-size: 16px;
  color: #888;
}

#content {
  background: white;
}
.rp_estimated_date {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  color: #4a5568;
}
.page-title {
  background-color: #fff;
}
#wooac-checkout {
  background: #4f46e5 !important;
  min-height: 55px;
  line-height: 2.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  color: white !important;
  font-size: 21px;
  width: 100%;
  font-weight: 700;
}
.wooac-popup {
  border-radius: 6px;
}
#wooac-continue {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0;
  font-size: 18px;
  border-radius: 6px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-weight: 500;
}
/* 1. 모든 정보의 부모 컨테이너를 Flexbox로 만듭니다. */
.box-text.box-text-products {
  display: flex;
  flex-direction: column; /* 내부 요소들을 세로로 쌓습니다. */

  /*
    ★★★ 가장 중요한 부분 ★★★
    모든 상품 카드의 정보 영역이 동일한 최소 높이를 갖도록 '공간을 예약'합니다.
    280px은 예시 값입니다. 화면을 보면서 이 값을 늘리거나 줄여서
    가장 내용이 많은 상품(4번 케이스)이 깨지지 않는 최적의 높이를 찾으세요.
  */
  min-height: 210px;
}

/* 2. '장바구니 담기' 버튼에 마법을 겁니다. */
.box-text.box-text-products .add-to-cart-button {
  /*
    ★★★ 이 한 줄이 마법입니다 ★★★
    이 버튼의 위쪽 여백(margin-top)을 '자동(auto)'으로 설정하면,
    버튼은 자신이 속한 Flexbox 컨테이너(.box-text)의 맨 아래로 밀려나 붙게 됩니다.
  */
  margin-top: auto;
}

/* (선택) 디자인 완성도를 위한 추가 조정 */

/* 가격과 리뷰/평점 사이의 간격 조정 */
.box-text .price-wrapper {
  margin-bottom: 8px;
}

/* 베스트셀러 뱃지와 버튼 사이의 간격 조정 */
.box-text .br_alabel {
  margin-bottom: 8px;
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
/* 1. 이 부분은 버튼 정렬을 위해 그대로 유지합니다. */

.box-text.box-text-products .add-to-cart-button {
  margin-top: auto;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
/* 2. 이제부터가 뱃지 위치 조정을 위해 추가/수정하는 부분입니다. */

/* 가격, 리뷰, 뱃지를 모두 포함하는 영역을 Flexbox로 만듭니다. */
/* 이 선택자는 '가격' 바로 아래에 '리뷰'와 '뱃지'가 온다는 가정하에 작동합니다. */
.price-wrapper {
  /* 이 부분은 삭제하거나 주석 처리합니다.
    margin-bottom: 8px;
    */
}

/* 리뷰와 뱃지를 모두 담을 컨테이너 역할을 할 새로운 div를 가정하거나,
   기존 구조를 활용합니다. 훅을 변경했으므로, 리뷰와 뱃지는 이제 나란히 위치하게 됩니다.
*/
.rating-wrapper,
.br_alabel.bestt {
  display: inline-flex; /* 두 요소를 한 줄에 놓일 수 있도록 함 */
  align-items: center; /* 수직 중앙 정렬 */
  vertical-align: middle; /* 추가적인 수직 정렬 */
}

/* 뱃지에 왼쪽 여백을 주어 리뷰와 간격을 만듭니다. */
.br_alabel.bestt {
  margin-left: 12px;
  margin-bottom: 0; /* 기존의 아래쪽 여백 제거 */
}

/* 리뷰와 뱃지를 모두 감싸는 영역의 아래쪽 여백을 설정합니다. */
.woocommerce-after-shop-loop-item-title-wrap {
  /* 이런 클래스가 있다면 활용 */
  margin-bottom: 8px;
}

.view-more-button.products-archive.button.primary {
  background-color: transparent;
  border: 2px solid #4f46e5; /* 대표님의 브랜드 보라색 */
  color: #4f46e5; /* 대표님의 브랜드 보라색 */
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  margin: 0px;
  font-size: 26px;
}
.load-more-button:hover {
  background-color: #6a3bff;
  color: #ffffff;
}
.header:not(.transparent) .header-bottom-nav.nav > li > a {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.box-text.box-text-products > div.add-to-cart-button > a {
  background: #4f46e5;
  color: #fff;
  font-size: 17px;
  margin-top: 8px;
  width: 100%;
  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.product-small.box > div.box-text.box-text-products > div.title-wrapper > p {
  font-size: 16px;
  line-height: 1.4;
  margin-top: 16px;
  margin-bottom: 8px;
}
.product-small.box > div.box-text.box-text-products .rating-review-wrapper {
  margin-top: 8px;
}
.box-text.box-text-products .price > del > .woocommerce-Price-amount.amount {
  color: #888888 !important;
}
.box-text.box-text-products .price > del {
  color: #888888 !important;
}
/* 공통 폰트 패밀리 변수 */
:root {
  --main-font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI",
    "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    sans-serif;
}
.percentage-badge {
  display: none;
}

h1.product-title.entry-title {
  font-weight: 700;
}
/* 기본 폰트 설정 (아이콘 제외) */
body,
p,
a,
div,
span,
input,
textarea,
button {
  font-family: var(--main-font-family) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.box-text.box-text-products > div.price-wrapper > span > span > bdi {
  font-size: 21px;
  font-weight: 600;
}

.product-small.box
  > div.box-text.box-text-products
  > div.price-wrapper
  > span
  > ins
  > span
  > bdi {
  font-size: 0.9em;
  font-weight: 600;
}
.product-small .price-wrapper {
  display: flex;
  flex-wrap: wrap; /* 공간이 부족하면 줄바꿈 (모바일 대비) */
  align-items: baseline; /* 수직 중앙 정렬 (가장 중요!) */
}
.product-small .price-wrapper .rating-wrapper {
  flex-basis: 100%; /* 항상 새 줄로 */
  margin-top: 2px;
}

.sale-perc {
  display: inline-flex; /* inline 대신 inline-flex 사용 */
  align-items: center; /* 내부 텍스트 수직 중앙 정렬 */
  justify-content: center; /* 내부 텍스트 수평 중앙 정렬 */

  color: #b91c1c !important;
  font-size: 14px; /* 약간 줄여서 조화롭게 */
  border-radius: 4px;
  background-color: #fee2e2;
  padding: 0px 8px;

  margin-left: 8px; /* 가격과의 간격 */
}

/* ================================
   검색 관련 요소들
   ================================ */
.aws-container .aws-show-clear .aws-search-field,
.header-main .form-flat input:not([type="submit"]),
.header-block .autocomplete-suggestions,
.header .search-form .autocomplete-suggestions,
.autocomplete-suggestion img + .search-name {
  border-radius: 4px;
  font-size: 15px;
  font-weight: normal;
  border: 1px solid black;
}

@media (max-width: 768px) {
  .product-main .has-hover [class*="image-"] img {
    border: none;
    box-sizing: unset;
  }

  .flickity-prev-next-button svg {
    width: 40px; /* 원의 크기 */
    height: 40px; /* 원의 크기 */
    background-color: rgba(0, 0, 0, 0.4) !important; /* 반투명 검은색 배경 */
    border: none;
    position: absolute; /* 이미지 위에 위치시키기 위함 */
    top: 50%; /* 수직 중앙 정렬 */
    z-index: 10;
    cursor: pointer;
    border-radius: 50% !important;
    transition: background-color 0.3s ease; /* 부드러운 효과 */
  }
  .flickity-prev-next-button svg:hover {
    background-color: rgba(0, 0, 0, 0.6); /* 더 진한 배경색으로 변경 */
  }
  .flickity-prev-next-button:hover {
    fill: black !important;
  }

  .flickity-prev-next-button .arrow,
  .flickity-prev-next-button svg {
    fill: rgb(255 255 255);
    border-color: rgb(255 255 255);
  }

  /* 1. 가격 그룹(.price-wrapper)은 한 줄을 차지하도록 합니다. */
  .product-small .price-wrapper {
    display: block;
    margin-bottom: 8px;
  }
  .product-info {
    padding-top: 24px;
  }
  .custom-flickity-indicator {
    bottom: 10px !important;
  }
  .page-title-inner {
    padding-top: 12px !important;
  }
  /* 2. 리뷰(.rating-wrapper)도 한 줄을 차지하도록 합니다. */
  .rating-wrapper {
    display: block;
    /* 이 안에 있는 별점과 리뷰 수는 이미 한 줄로 잘 정렬되어 있습니다. */
  }

  /*
    3. 베스트셀러 뱃지를 '시각적으로만' 리뷰의 오른쪽으로 이동시킵니다.
  */
  .br_alabel.bestt {
    display: inline-block; /* 뱃지 자체의 모양 유지를 위해 */
  }
}

/*
  ==========================================================================
   새로운 블럭 장바구니: 항목 제거(X) 버튼 스타일
  ==========================================================================
*/

.cart-promotion-notice {
  background-color: #f9f9f9; /* 아주 연한 회색 배경 */
  border: 1px solid #eee; /* 배경보다 살짝 진한 테두리 */
  border-radius: 4px; /* 부드러운 모서리 */
  padding: 15px 20px; /* 내부 여백으로 쾌적하게 */
  margin-top: 20px; /* 위 요소와의 간격 확보 */
  display: flex; /* 아이콘과 텍스트를 가로로 정렬하기 위함 */
  align-items: center; /* 수직 중앙 정렬 */
  font-size: 16px;
}
/* --- 보안 안내 메시지 스타일 --- */
.security-notice {
  text-align: center; /* 중앙 정렬하여 안정감 부여 */
  margin-top: 20px; /* '결제 진행' 버튼과의 충분한 간격 확보 */
  padding: 0 10px; /* 좌우 여백 */
}

/* "안전한 SSL 암호화로..." 텍스트 스타일 */
.security-notice {
  font-size: 14px !important; /* 기본 본문(16px)보다 작게 하여 보조 정보임을 명시 */
  color: #777; /* 진하지 않은 회색으로 시각적 강도 낮춤 */
  margin: 0 0 5px 0; /* 아래 '자세히 알아보기' 링크와의 간격 */
  line-height: 1.5; /* 줄 간격 확보 */
}

/* "클릭하여 자세히 알아보기" 링크 스타일 */
.security-notice a {
  font-size: 13px; /* 더 작게 만들어 위계질서 명확히 */
  color: #888; /* 더 연한 회색 */
  text-decoration: underline; /* 링크임을 명확히 인지시킴 */
  text-underline-offset: 3px; /* 밑줄과 텍스트 사이에 숨 쉴 공간 부여 (세련된 디테일) */
  transition: color 0.2s ease; /* 색상 변경 시 부드러운 효과 */
}

/* 링크에 마우스를 올렸을 때 효과 */
.security-notice a:hover {
  color: #333; /* 더 진한 색으로 변경하여 피드백 제공 */
}
.cart-promotion-notice p {
  margin: 0; /* p 태그의 기본 마진 제거 */
  font-size: 14px; /* 기본 폰트보다 살짝 작게 */
  color: #555; /* 너무 진하지 않은 텍스트 색상 */
}

/* 정보 아이콘(ⓘ) 추가 */
.cart-promotion-notice::before {
  content: "ⓘ"; /* 아이콘 문자 */
  font-family: sans-serif; /* 아이콘이 예쁘게 나오는 폰트 */
  font-weight: bold;
  color: #888;
  font-size: 18px;
  margin-right: 12px; /* 아이콘과 텍스트 사이 간격 */
  line-height: 1;
}

/* 1. '제거하기' 링크를 원형 아이콘 버튼으로 만들기 */
.wc-block-cart-item__remove-link {
  font-size: 0 !important;
  text-decoration: none !important;
  background-color: #f5f5f5; /* 테두리 대신 연한 배경색 사용 */
  border: none !important; /* 테두리 제거 */
  border-radius: 50% !important;
  width: 26px;
  height: 26px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

/* 마우스 호버 효과 */
.wc-block-cart-item__remove-link:hover {
  background-color: #e0e0e0; /* 호버 시 배경색을 살짝 진하게 */
}

.wc-block-cart-item__remove-link:hover::before {
  color: #333; /* 호버 시 아이콘 색상을 진하게 */
}

/* 2. 가상 요소(::before)를 사용해 'X' 아이콘 생성 */
.wc-block-cart-item__remove-link::before {
  content: "×";
  font-size: 22px;
  color: #999;
  line-height: 1;
  font-weight: normal; /* 볼드체를 빼서 부드럽게 */
  transition: color 0.2s ease;
}

/* 3. 'X' 아이콘에 마우스를 올렸을 때 효과 */
.wc-block-cart-item__remove-link:hover {
  background-color: #f8f8f8;
  border-color: #bbb;
}

.wc-block-cart-item__remove-link:hover::before {
  color: #333;
}
/*
  ==========================================================================
   새로운 블럭 장바구니: 수량 조절기(Quantity) 스타일
  ==========================================================================
*/

/* 1. 수량 조절기와 삭제 버튼을 포함하는 전체 컨테이너 */
.wc-block-cart-item__quantity {
  display: flex;
  align-items: center;
  gap: 16px; /* 수량 조절기와 X버튼 사이의 간격 */
  margin-top: 12px; /* 위쪽 컨텐츠와의 간격 확보 */
}

/* 2. 수량 조절기 순서 조정 */
.wc-block-components-quantity-selector {
  order: 1; /* 순서를 X버튼 앞으로 보냄 */
}

/* 3. 수량 조절기(Quantity Selector) 자체 스타일링 */
.wc-block-components-quantity-selector {
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
}

/* 4. 우커머스 기본 마진 제거 */
table.wc-block-cart-items
  .wc-block-cart-items__row
  .wc-block-components-quantity-selector {
  margin-bottom: 0px !important;
}

/* 5. 플러스(+) / 마이너스(-) 버튼 공통 스타일 */
.wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button {
  width: 32px;
  height: 32px;
  color: #555 !important;
  background-color: #f9f9f9 !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

/* 6. 버튼에 마우스를 올렸을 때 효과 */
.wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button:hover {
  background-color: #f0f0f0; /* 마우스 올렸을 때 배경색 */
  color: #000;
}

/* 7. 숫자 입력 필드 스타일 */
.wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__input {
  height: 32px;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  font-weight: bold !important;
}

/*
  ==========================================================================
   새로운 블럭 장바구니: 할인 배지(Sale Badge) 스타일
  ==========================================================================
*/

/* 1. 할인 배지를 가격과 같은 줄에, 수직 중앙으로 정렬 */
.wc-block-cart-item__prices,
.wc-block-components-sale-badge {
  display: inline-flex; /* 두 요소를 인라인 플렉스 박스로 만들어 한 줄에 배치 */
  align-items: center; /* 수직 중앙 정렬 */
  vertical-align: middle; /* 다른 인라인 요소와의 정렬을 위해 추가 */
}

/* 2. 할인 배지 자체의 디자인 스타일 */
.wc-block-components-sale-badge {
  margin-left: 12px !important; /* 가격과의 왼쪽 간격 */
  padding: 4px 8px !important; /* 배지 내부 여백 */
  color: #555 !important; /* 글자색 (진한 빨강) */
  border-radius: 4px !important; /* 둥근 모서리 */
  background-color: #f9f9f9; /* 배경색 (연한 빨강) */
  font-weight: normal !important;
  display: inline-block !important;
}
/*
  ==========================================================================
   새로운 블럭 장바구니: 가격(Price) 스타일
  ==========================================================================
*/

/* 1. 가격 전체를 감싸는 컨테이너의 레이아웃을 강제로 변경 */
.wc-block-components-product-price {
  display: inline-flex !important;
  align-items: baseline;
  flex-direction: row-reverse !important; /* <<<<<< 문제의 핵심 원인 */
}

.wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block.woo-cart-total
  .wp-block-woocommerce-cart-order-summary-block
  > div:nth-child(4) {
  border-top: 3px solid !important;
  padding: 32px 0 !important;
}
body.woocommerce-cart .wc-block-components-totals-item {
  padding: 12px 0 !important; /* <<<<<< 바로 이 부분입니다. */
}

div.wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block.woo-cart-total
  > div.wp-block-woocommerce-cart-order-summary-block
  > div.wp-block-woocommerce-cart-order-summary-totals-block
  > div.wp-block-woocommerce-cart-order-summary-subtotal-block.wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-totals-block
  > div.wp-block-woocommerce-cart-order-summary-shipping-block.wc-block-components-totals-wrapper {
  padding-top: 32px !important;
}
/* 2. 할인된 판매 가격(더 큰 글씨) 스타일 */
.wc-block-cart-item__prices .wc-block-components-formatted-money-amount,
.wc-block-components-product-price__value.is-discounted {
  margin-left: 0px !important;
  margin-right: 0.5em;
  font-weight: 600;
  color: black;
  font-size: 1.2em;
}

/* 3. 할인 전 정상 가격(작고 흐린 글씨) 스타일 */
.wc-block-cart-item__prices
  .price.wc-block-components-product-price
  .wc-block-components-product-price__regular {
  color: #888;
  font-size: 0.9rem;
  /* 참고: 여기에 text-decoration: line-through; 가 필요할 수 있습니다. */
}

/*
  ==========================================================================
   새로운 블럭 장바구니: 결제 버튼(CTA) 스타일
  ==========================================================================
*/

/* 1. 결제 버튼 기본 스타일 */
body.woocommerce-cart .wc-block-cart__submit-button {
  background-color: #4f46e5; /* 브랜드 메인 컬러 */
  color: #fff; /* 글자색 (흰색) */
  width: 100%; /* 너비를 부모 요소에 꽉 채움 */
  padding: 16px 0; /* 버튼 내부 상하 여백 */
  font-size: 1.2rem; /* 글자 크기 */
  font-weight: bold; /* 글자 굵기 */
  border-radius: 6px; /* 둥근 모서리 */
  text-align: center; /* 텍스트 중앙 정렬 */
  transition: background-color 0.2s ease, transform 0.1s ease; /* 부드러운 전환 효과 */
  border: none; /* 테두리 제거 */
  margin-top: 16px; /* 위쪽 요소와의 간격 */
}

/* 2. 버튼에 마우스를 올렸을 때 효과 */
body.woocommerce-cart .wc-block-cart__submit-button:hover {
  background-color: #7925c8; /* 약간 더 어두운 브랜드 컬러 */
  transform: scale(1.02); /* 버튼이 살짝 커지는 효과 */
}

/*
  ==========================================================================
   새로운 블럭 장바구니: 최종 합계(총계) 스타일
  ==========================================================================
*/

/* 1. '총계' 행 전체를 위쪽과 분리하고 구분선을 만듦 */

/* 2. '총계'라는 텍스트 레이블 스타일 */
body.woocommerce-cart
  .wc-block-components-totals-footer-item
  .wc-block-components-totals-item__label {
  font-size: 1.3rem;
  font-weight: bold;
  color: #111;
}

/* 3. 최종 가격 숫자 스타일 (가장 중요!) */
body.woocommerce-cart
  .wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-size: 1.6rem; /* 가장 큰 글자 크기 */
  font-weight: 800;
  color: #4f46e5; /* 브랜드 메인 컬러로 강력하게 강조 */
}

/*
  ==========================================================================
   새로운 블럭 장바구니: '장바구니 합계' 제목 스타일
  ==========================================================================
*/

body.woocommerce-cart .wc-block-cart__totals-title {
  font-size: 1.4rem; /* 제목에 맞는 큰 글자 크기 */
  margin-bottom: 20px; /* 제목과 아래 내용 사이의 간격 */
  padding-bottom: 16px; /* 구분선과의 간격 */
  border-bottom: 1px solid #ddd; /* 제목 아래에 옅은 구분선 */
}

.wc-block-cart__sidebar
  .wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #4f46e5; /* 브랜드 메인 컬러 */
}
/* 3. 쿠폰 및 CTA 버튼 최적화 */
.wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-panel__button {
  font-size: 1rem;
  color: #555;
  text-decoration: none;
  font-weight: 500;
}

.wc-block-cart__sidebar .wc-block-cart__submit-button {
  background-color: #4f46e5; /* 브랜드 메인 컬러 */
  color: #fff;
  width: 100%;
  padding: 16px 0;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 6px;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
  border: none;
  margin-top: 16px;
}
/* 화면 너비 768px 이하일 때만 이 규칙들이 활성화됩니다. */
@media (max-width: 768px) {
  /* 모바일
      [핵심 1] 테이블 구조를 완전히 해체하고 모바일 레이아웃으로 재구성
      ----------------------------------------------------------------------
    */
  .mid-des-first {
    margin-bottom: 80px;
  }
  h1.product-title.entry-title {
    margin-top: 4px;
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }

  .wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block.woo-cart-total {
    background-color: #faf9f7 !important;
    padding: 24px 18px !important;
    border-radius: 6px !important;
  }

  /* 테이블 헤더와 불필요한 상품별 총계 컬럼을 숨깁니다. */
  .product-info.summary.col-fit.col.entry-summary.product-summary
    .customer-support-hub
    .custom-order-section-new
    > a {
    margin-top: 12px !important;
  }
  .wc-block-components-sale-badge {
    margin-left: 0px !important;
  }
  .product-stacked-info .price-wrapper {
    display: inline-block;
    vertical-align: baseline;
    padding: 16px 0;
  }
  .product-info.product-summary .woocommerce-product-rating {
    padding-bottom: 16px;
  }
  .woo-cart-total {
    padding: 24px 32px;
  }
  .sale-perc {
    margin: 4px 0px 8px 0px;
    padding: 0px 8px;
  }
  .price-wrapper .price {
    display: contents;
  }
  .row-small > .col {
    padding: 0 8px 28px;
  }
}

/* ================================
   텍스트 요소들 (기본 스타일)
   ================================ */
body,
p,
a {
  line-height: 1.75;
}

/* ================================
   제목 및 헤딩 요소들
   ================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.section-title,
.banner h1,
.banner h2,
.banner h3,
.logo,
.accordion-title {
  line-height: 1.45;
}

/* ================================
   특수 요소들 (필요시에만)
   ================================ */
.mto2 {
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
}

/* PhotoSwipe 카운터 (다른 폰트 유지) */
.pswp__counter {
  font-family: Georgia, "Times New Roman", serif !important;
}

/* 검색 결과 하이라이트 */
.flex-col.hide-for-medium.flex-left.flex-grow
  > ul
  > li
  > div
  > div
  > form
  > div.live-search-results.text-left.z-top
  strong {
  color: #ff5722;
}

/* 로딩 상태 */
.searchform-wrapper.form-flat .submit-button.loading:after {
  border-color: white;
}
/* 기존 HTML 구조를 위한 현대적 어코디언 스타일 */
.header-bottom {
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-bottom-nav a:hover {
  color: #4f46e5;
}
.header-main {
  border-bottom: 1px solid #f1f5f9;
}

.wrapper .header .header-wrapper #top-bar.header-top {
  background-color: white !important;
}

/* 고객 지원 허브 섹션 */
.custom-inquiry-section,
.custom-order-section-new {
  padding: 10px 0;
}
.custom-order-section-new .button.lightbox {
  margin: 0 !important;
}

.custom-inquiry-section {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.custom-inquiry-section .links-wrapper {
  margin-top: 12px;
}

.custom-order-section-new a {
  display: inline-block;
  margin-top: 12px;
}

/* 태블릿 (768px ~ 1199px) - 세로 정렬 유지 */
@media (min-width: 768px) and (max-width: 1199px) {
  .custom-inquiry-section,
  .custom-order-section-new {
    padding: 12px 0 20px 0;
    text-align: left;
  }

  .custom-inquiry-section .links-wrapper {
    margin-top: 14px;
  }

  .custom-order-section-new a {
    margin-top: 14px;
  }
}

@media (max-width: 849px) {
  /**태블릿 및 모바일**/
  .wcpr-grid.wcpr-grid-layout-2-style.wcpr-grid-3-col
    .wcpr-grid-layout-2-style-item,
  .wcpr-grid.wcpr-grid-layout-2-style.wcpr-grid-loadmore.wcpr-grid-3-col
    .wcpr-grid-layout-2-style-item {
    flex-basis: 100%;
  }
  .product-footer > .container > #reviews {
    margin-top: 24px;
  }
  .wcpr-grid.wcpr-grid-layout-2-style.wcpr-grid-3-col
    .wcpr-grid-layout-2-style-item {
    flex-basis: 100%;
  }
  .wcpr-content:first-child {
    padding: 0px !important;
  }

  #comments .wcpr-overall-rating-and-rating-count.grid-style .wcpr-stars-count {
    padding: 0px;
  }
  .wcpr-stars-count .wcpr-row .wcpr-col-number {
    display: none !important;
  }
  #comments
    .wcpr-overall-rating-and-rating-count.grid-style
    .wcpr-overall-rating
    .wcpr-overall-rating-main {
    align-items: center !important;
    width: 100% !important;
  }
  .home-title {
    margin: 32px 0;
  }
  .article-inner.has-shadow .entry-header-text-top {
    padding: 0px;
  }
  .product-footer > div > div.related.products > h2 {
    font-size: 170%;
  }
  .badge-footer {
    padding: 0px 15px;
  }
  .auth .col {
    padding: 8px !important;
  }
  .auth .row {
    margin: 0px !important;
  }
  .flipbook .flipContainer {
    padding: 0px !important;
    max-height: 210px;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }
  .flipbook .caro,
  .flipbook .caro a {
    font-size: 16px !important;
    line-height: 1.3 !important;
    white-space: normal;

    /* 두 줄 말줄임을 위한 핵심 코드 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄로 제한 */
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* (선택) 줄 간격이 너무 좁으면 살짝 조정해줍니다. */
    line-height: 1.4;
  }
  .flipbook .caro {
    margin-bottom: 0em !important;
  }
  .flip-page-two .product-info .price-wrapper .price {
    gap: 0px !important;
  }

  .flipbook .flickity-prev-next-button.next {
    right: 0% !important;
  }
  .flipbook .flickity-button-icon {
    border: none !important;
  }
  .flipbook .button {
    margin: 0px !important;
    background: #4f46e5;
    color: #fff;
    font-size: 17px;
    margin-top: 8px;
    width: 100%;
    border: none;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .flipbook .button:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2);
  }
  .flipbook .flickity-prev-next-button.previous {
    left: 0 !important;
  }
}

/* 데스크탑 (1200px 이상) - 가로 정렬 */
@media (min-width: 850px) {
  .flipbook img {
    max-height: 250px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .entry-content.single-page
    .box-text.box-text-products
    > div.title-wrapper
    > p
    > a {
    white-space: normal;

    /* 두 줄 말줄임을 위한 핵심 코드 */
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 2줄로 제한 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #262626;
    /* (선택) 줄 간격이 너무 좁으면 살짝 조정해줍니다. */
    line-height: 1.4;
  }

  .entry-content.single-page .product-small.box .price-wrapper .price {
    margin-bottom: 16px;
    display: inline-grid;
    gap: 8px;
  }
  .entry-content.single-page .product-small.box .sale-perc {
    margin-left: 0px;
    margin-bottom: 8px;
  }
  .flipbook .product-image {
    background-color: #eee !important;
  }
  .flipbook .caro {
    margin-bottom: 0px !important;
  }
  .flipbook .button {
    margin: 0px !important;
    background: #4f46e5;
    color: #fff;
    font-size: 17px;
    margin-top: 8px;
    width: 100%;
    border: none;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .flipbook .button:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2);
  }
  .page-id-14 #main {
    min-height: 800px;
  }
  .product-page-mar {
    margin-bottom: 96px;
  }
  .sticky-add-to-cart--active {
    box-shadow: 0 -4px 24px -4px rgba(0, 0, 0, 0.08);
    border-top: none !important;
  }

  .sticky-add-to-cart--active .sticky-add-to-cart__product {
    width: 100%; /* 너비를 100%로 설정 */
    max-width: 1200px; /* 최대 너비를 1200px로 제한 */

    /* 중앙 정렬 (이것이 calc를 대체합니다) */
    margin-left: auto;
    margin-right: auto;

    /* 내부 여백 설정 (상하좌우) */
    padding: 12px 24px; /* 상하 12px, 좌우 24px */

    /* Flexbox 레이아웃 설정 */
    display: flex;
    align-items: center;
  }
  .sticky-add-to-cart__product .sticky-add-to-cart-img {
    width: 100% !important;
    max-width: 55px !important;
    height: 55px !important;
  }

  .sticky-add-to-cart.sticky-add-to-cart--active
    form.cart
    button.buynow_button {
    width: auto; /* 명시적으로 너비를 자동으로 설정 */
    flex-grow: 0;
    flex-shrink: 0;
    order: 2;
    /* 내부 여백 (이것이 최종 너비를 결정) */
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .sticky-add-to-cart.sticky-add-to-cart--active
    form.cart
    button.single_add_to_cart_button:not(.buynow_button) {
    width: auto; /* 명시적으로 너비를 자동으로 설정 */
    flex-grow: 0;
    flex-shrink: 0;
    order: 1;

    /* 내부 여백 (이것이 최종 너비를 결정) */
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .sticky-add-to-cart--active form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: nowrap;
    margin-bottom: 0px;
  }

  body.woocommerce-cart .wc-block-components-totals-item {
    display: flex; /* 플렉스박스 레이아웃 사용 */
    justify-content: space-between; /* 레이블과 가격을 양쪽 끝으로 정렬 */
    align-items: baseline; /* 텍스트의 기준선을 맞춤 */
    padding: 12px 0; /* 각 항목의 상하 여백 */
    font-size: 0.95rem; /* 기본 글자 크기 */
  }
  .is-large.wc-block-cart .wc-block-components-sidebar {
    background-color: #faf9f7;
    padding: 32px 24px;
    border-radius: 6px;
  }
  body.woocommerce-cart .wc-block-components-totals-item__label {
    color: #555; /* 레이블 글자색을 약간 연하게 하여 중요도 낮춤 */
  }

  /*이게 잘하면 할인가격이  있는 상품, 정상가격이 있는 상품에 따라 이상하게 나올 수 있다*/

  /*
  .product-info.summary.col-fit.col.entry-summary.product-summary
    > div
    > div
    > div
    > div.price-wrapper {
    display: inline-block;
    vertical-align: baseline;
  } */

  .product-stacked-info
    .product-info.summary.col-fit.col.entry-summary.product-summary
    .product-small
    .price-wrapper {
    align-items: start;
  }
  .category-page-row .product-small.col {
    padding: 0 16px 32px;
  }
  .custom-inquiry-section,
  .custom-order-section-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 0;
  }

  .custom-inquiry-section {
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
  }

  .custom-order-section-new {
    padding-top: 24px;
  }

  .custom-inquiry-section .links-wrapper {
    margin-top: 0;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 20px;
  }

  .custom-order-section-new a {
    margin-top: 0;
    margin-left: 20px;
    flex-shrink: 0;
  }

  /* 텍스트 영역이 너무 넓어지지 않도록 제한 */
  .custom-inquiry-section > p,
  .custom-order-section-new > p {
    max-width: 60%;
    margin: 0;
  }
}

@media (min-width: 1200px) {
  .article-inner .entry-header,
  .entry-content.single-page {
    width: 650px;
    margin-left: auto;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .blog-wrapper .large-9.col {
    padding-right: 0px !important;
    margin-right: 32px !important;
  }

  .article-inner.has-shadow .entry-header-text-top {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  #content.blog-single > div.row.row-large > div.post-sidebar.large-3.col {
    display: block !important;
  }
}

/* 큰 데스크탑 (1400px 이상) - 더 여유로운 레이아웃 */
@media (min-width: 1400px) {
  .custom-inquiry-section > p,
  .custom-order-section-new > p {
    max-width: 70%;
  }

  .custom-inquiry-section .links-wrapper {
    margin-left: 40px;
  }

  .custom-order-section-new a {
    margin-left: 40px;
  }
}

.product-stacked-info .accordion {
  margin: 20px 8px 0 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.product-stacked-info .accordion-item {
  background: #ffffff;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: none;
  transition: all 0.25s ease;
  position: relative;
  border-top: 1px solid #e5e7eb;
}

.product-stacked-info .accordion-item:last-child {
  border-bottom: 1px solid #e5e7eb;
}

/* 좌측 액센트 바 - 호버 시에만 표시 */
.product-stacked-info .accordion-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #f59e0b;
  transition: width 0.2s ease;
}

.product-stacked-info .accordion-item:hover::before {
  width: 3px;
}

.product-stacked-info .accordion-item:hover {
  background-color: transparent;
  transform: none;
}

.product-stacked-info .accordion::before {
  content: "";
  display: block;
  height: 24px;
  margin: 0;
}

/* 어코디언 헤더 */
.product-stacked-info .accordion-title {
  display: flex;
  align-items: center;
  padding: 18px 52px 18px 0;
  background: transparent;
  border: none;
  width: 100%;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
  position: relative;
}

.product-stacked-info .accordion-title:hover {
  background-color: transparent;
  text-decoration: none;
}

.product-stacked-info .accordion-title[aria-expanded="true"] {
  background-color: transparent;
  border-bottom: 1px solid #e5e7eb;
}

/* 토글 버튼 영역 (기존 아이콘 숨김) */
.product-stacked-info .accordion-title .toggle {
  display: none;
}

/* 제목 텍스트 */
.product-stacked-info .accordion-title span {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  line-height: 1.5;
  letter-spacing: 0.01em;
  position: relative;
}

/* 관세 정보 섹션에 아이콘 추가 */
.product-stacked-info
  .accordion-item:first-child
  .accordion-title
  span::before {
  content: "📋";
  margin-right: 12px;
  font-size: 16px;
  vertical-align: middle;
}

/* 작품 사양 섹션에 아이콘 추가 */
.product-stacked-info .accordion-item:last-child .accordion-title span::before {
  content: "🎨";
  margin-right: 12px;
  font-size: 16px;
  vertical-align: middle;
}

/* 쉐브론 아이콘 */
.product-stacked-info .accordion-title::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.25s ease;
}

/* 활성화 상태 (열렸을 때) */
.product-stacked-info .accordion-title[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(225deg);
  border-color: #6b7280;
}

/* 호버 효과 */
.product-stacked-info .accordion-title:hover::after {
  border-color: #f59e0b;
}

.product-stacked-info .accordion-title[aria-expanded="true"]:hover::after {
  transform: translateY(-50%) rotate(225deg);
  border-color: #f59e0b;
}

/* 어코디언 콘텐츠 */
.product-stacked-info .accordion-inner {
  padding: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.7;
  background-color: #fcfcfc;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 리스트 스타일링 (관세 정보) */
.product-stacked-info .accordion-inner ul {
  margin: 0;
  padding: 24px 28px 24px 38px;
  list-style: none;
}

.product-stacked-info .accordion-inner ul li {
  margin-bottom: 16px;
  padding-left: 20px;
  position: relative;
  color: #4b5563;
  line-height: 1.6;
  font-size: 13.5px;
}

.product-stacked-info .accordion-inner ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #f59e0b;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}

.product-stacked-info .accordion-inner ul li:last-child {
  margin-bottom: 0;
}

/* 테이블 스타일링 (작품 사양) */
.product-stacked-info .accordion-inner .woocommerce-product-attributes {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.product-stacked-info .accordion-inner .woocommerce-product-attributes-item {
  border-bottom: 1px solid #f3f4f6;
}

.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item:last-child {
  border-bottom: none;
}

.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item__label {
  padding: 16px 24px 16px 38px;
  font-weight: 500;
  color: #374151;
  background-color: #f9fafb;
  width: 35%;
  vertical-align: top;
  font-size: 13px;
  border-right: 1px solid #e5e7eb;
}

.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item__value {
  padding: 16px 24px;
  color: #4b5563;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.5;
}

/* 첫 번째와 마지막 항목 여백 조정 */
.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item:first-child
  .woocommerce-product-attributes-item__label,
.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item:first-child
  .woocommerce-product-attributes-item__value {
  padding-top: 20px;
}

.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item:last-child
  .woocommerce-product-attributes-item__label,
.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item:last-child
  .woocommerce-product-attributes-item__value {
  padding-bottom: 20px;
}

.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item__value
  p {
  margin: 0;
}

.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item__value
  a {
  color: #f59e0b;
  text-decoration: none;
  font-weight: 500;
}

.product-stacked-info
  .accordion-inner
  .woocommerce-product-attributes-item__value
  a:hover {
  text-decoration: underline;
}

/* 포커스 상태 */
.product-stacked-info .accordion-title:focus {
  outline: 2px solid #fed7aa;
  outline-offset: 2px;
}

/* 모바일 반응형 - 768px */
@media (max-width: 768px) {
  .h4titleproduct {
    margin: 40px 0px 24px 0px;
  }
  .product-stacked-info .accordion {
    margin: 16px 4px 0 4px;
  }

  .product-stacked-info .accordion-item {
    border-top: 1px solid #e5e7eb;
  }

  .product-stacked-info .accordion-title {
    padding: 16px 45px 16px 0;
  }

  .product-stacked-info .accordion-title::after {
    right: 16px;
  }

  .product-stacked-info .accordion-title span {
    font-size: 14px;
  }

  .product-stacked-info .accordion-inner ul {
    padding: 20px 20px 20px 30px;
  }

  .product-stacked-info .accordion-inner ul li {
    margin-bottom: 14px;
    padding-left: 18px;
    font-size: 13px;
  }

  .product-stacked-info
    .accordion-inner
    .woocommerce-product-attributes-item__label {
    padding: 14px 20px 14px 30px;
    font-size: 12.5px;
  }

  .product-stacked-info
    .accordion-inner
    .woocommerce-product-attributes-item__value {
    padding: 14px 20px;
    font-size: 12.5px;
  }
}

/* 모바일 반응형 - 480px */
@media (max-width: 480px) {
  .product-stacked-info .accordion {
    margin: 12px 0 0 0;
  }
  .box-text.box-text-products {
    min-height: 215px;
  }
  .product-stacked-info .jtc-tax-notice-wrapper {
    margin: 24px 0;
  }
  .product-stacked-info .percentage-badge {
    display: none;
  }
  .product-stacked-info .rp-details-link {
    text-decoration: none !important;
  }
  .product-stacked-info .wcst_savings_top {
    display: inline-block;
    margin-top: 8px;
  }
  .product-stacked-info .product-short-description {
    margin-bottom: 0px;
  }

  .product-stacked-info .accordion::before {
    height: 16px;
  }

  .product-stacked-info .accordion-item {
    border-top: 1px solid #e5e7eb;
  }

  .product-stacked-info .accordion-title {
    padding: 14px 40px 14px 0;
  }

  .product-stacked-info .accordion-title::after {
    right: 14px;
    width: 8px;
    height: 8px;
  }

  .product-stacked-info .accordion-title span {
    font-size: 13.5px;
  }

  .product-stacked-info .accordion-title span::before {
    font-size: 14px !important;
    margin-right: 10px !important;
  }

  .product-stacked-info .accordion-inner ul {
    padding: 16px 16px 16px 24px;
  }

  .product-stacked-info .accordion-inner ul li {
    margin-bottom: 12px;
    font-size: 12.5px;
    padding-left: 16px;
  }

  .product-stacked-info .accordion-inner ul li::before {
    font-size: 14px;
  }

  /* 모바일에서 테이블을 세로 레이아웃으로 변경 */
  .product-stacked-info .accordion-inner .woocommerce-product-attributes-item {
    display: block;
  }

  .product-stacked-info
    .accordion-inner
    .woocommerce-product-attributes-item__label {
    padding: 12px 16px 8px 24px;
    display: block;
    width: 100%;
    border-right: none;
    border-bottom: none;
    font-size: 12px;
    background-color: #f9fafb;
  }

  .product-stacked-info
    .accordion-inner
    .woocommerce-product-attributes-item__value {
    padding: 8px 16px 12px 24px;
    display: block;
    width: 100%;
    font-size: 12px;
    background-color: #ffffff;
  }

  .product-stacked-info
    .accordion-inner
    .woocommerce-product-attributes-item:first-child
    .woocommerce-product-attributes-item__label {
    padding-top: 16px;
  }

  .product-stacked-info
    .accordion-inner
    .woocommerce-product-attributes-item:last-child
    .woocommerce-product-attributes-item__value {
    padding-bottom: 16px;
  }
}
.customer-support-hub {
  padding-top: 8px !important;
}
.wcst_savings_top {
  display: inline;
}
.percentage-badge {
  display: none;
}
.discount-badge {
  padding: 4px 8px;
  color: #b91c1c !important;
  border-radius: 4px;
  background-color: #fee2e2;
  margin-left: 0px;
  display: inline;
}
.wcst_savings_top,
.percentage-badge {
  color: #4a5568;
}

.star-rating span:before {
  color: #fbbf24 !important;
}
.product-info.summary.col-fit.col.entry-summary.product-summary
  > div
  > div
  > div
  > div.price-wrapper
  > p
  > ins
  > span
  > bdi {
  margin-right: 8px;
  font-weight: 800;
}
ins span.woocommerce-Price-amount {
  color: #111827;
  font-size: 1.3em;
}
.discount-badge > span > span > bdi {
  color: #b91c1c;
}
/**스틱키 관련 **/

#cta33 {
  padding: 16px 0 16px 0;
  font-size: 16px;
}

#cta22 {
  text-align: left;
  padding: 16px 0px 16px 0px;
  margin-top: 16px;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}
/***여기서부터 스타일 새롭게 디자인***/
.quantity_select {
  display: none;
}
form.cart {
  margin: 32px 0 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.wc-block-components-product-metadata__description {
  display: none;
}

/* 2. 버튼 순서 및 레이아웃 재정의 */

/* 바로 구매 버튼 (Primary) - 첫 번째 줄 */
.wc-proceed-to-checkout .checkout-button.button.alt.wc-forward,
form.cart button.buynow_button {
  order: 0; /* [핵심 수정] 시각적 순서를 가장 위로 지정 */
  width: 100%; /* 한 줄을 모두 차지 */

  /* 기존 스타일 유지 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #4f46e5 !important;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-align: center;
  text-shadow: none;
  cursor: pointer;
  margin: 0;
  transition: background-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-medium) var(--easing-in-out),
    transform var(--duration-fast) var(--easing-standard);
}

form.cart button.single_add_to_cart_button:not(.buynow_button) {
  order: 2; /* [핵심 수정] 시각적 순서를 두 번째로 지정 */
  flex: 1 1 auto; /* [핵심 수정] 남는 공간을 모두 차지 (약 80% 역할) */
  width: 100%;
  margin-bottom: 0 !important;
  margin-right: 0px;

  /* 기존 스타일 유지 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #f5f5f5 !important;
  color: #333333;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-align: center;
  text-shadow: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
form.cart button.single_add_to_cart_button:not(.buynow_button):hover,
button.woosw-btn:hover {
  background-color: #e9e9e9 !important;
  border-color: #dcdcdc;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.wc-block-components-shipping-rates-control {
  display: none !important;
}
/* 항목별 합계(오른쪽 끝) 스타일 약화 */
.wc-block-formatted-money-amount.wc-block-components-formatted-money-amount.wc-block-components-totals-item__value,
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
  font-weight: normal; /* 굵기 제거 */
  color: #777; /* 연한 회색으로 변경 */
  font-size: 1rem; /* 다른 텍스트와 비슷한 크기로 조정 */
}
form.cart button.buynow_button:hover {
  background-color: #4338ca !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
form.cart button.buynow_button .buynow-arrow {
  /* transform 속성이 변할 때, 정의된 토큰을 사용하여 부드럽게 애니메이션되도록 설정 */
  transition: transform var(--duration-fast) var(--easing-standard);
}

/* 2. 버튼에 마우스를 올렸을 때(hover) 화살표가 어떻게 변할지 정의 */
form.cart button.buynow_button:hover .buynow-arrow {
  /* 오른쪽으로 4px 만큼 미끄러지듯 움직임 */
  transform: translateX(4px);
}

/**폼 장바구니 섹션 여기까지***/

.page-title.shop-page-title.product-page-title {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}

.product-main {
  background-color: white;
}
.daum-wm-datetime {
  display: none !important;
}
button.pswp__button.pswp__button--arrow--next.pswp__button--arrow.pswp__hide-on-close,
button.pswp__button.pswp__button--arrow--prev.pswp__button--arrow.pswp__hide-on-close {
  background-color: rgb(255 255 255 / 60%) !important;
}

.pswp__icn-shadow {
  stroke: #333 !important;
}

.pswp__bullet {
  border: 1px solid #666666 !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
.pswp__bullet--active {
  background-color: #28a745 !important; /* 예시: 기존 녹색 계열 (또는 원하는 색상) */
  border-color: #1e7e34 !important; /* 예시: 활성 시 테두리 색상 (더 진한 녹색) */
}
/* 싱글 프로덕트 페이지의 Flickity 슬라이더에만 적용 */
.single-product .product-gallery-slider {
  position: relative; /* 숫자 인디케이터를 위한 기준점 */
}

/* 기존 점(dot) 인디케이터 숨기기 (모바일에서만 숨길 수도 있지만, 일단 유지) */
.single-product .product-gallery-slider .flickity-page-dots {
  display: none !important;
}

/* 새로운 숫자 인디케이터 스타일 */
.custom-flickity-indicator {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 13px;
  z-index: 2;
  line-height: 1;
  pointer-events: none;
}

.shortcode-wcpr-content .shortcode-review-content-container {
  padding: 35px;
  border-radius: 15px;
}

.shortcode-wcpr-content
  .shortcode-reviews-images-container
  .shortcode-reviews-images {
  max-width: 250px;
}

.shortcode-wcpr-comment-author:not(
    .shortcode-wcpr-comment-author-with-country
  ):before {
  display: none;
}
#woocommerce-photo-reviews-shortcode-1
  .shortcode-wcpr-grid
  .shortcode-wcpr-grid-item {
  border-radius: 15px;
}

.shortcode-wcpr-review-content img {
  max-width: 250px;
}

.accordion.single-faq .toggle {
  display: none;
}

.yrm-btn-wrapper.yrm-btn-wrapper-3 > span > span > span:before {
  content: "\f107";
  font-family: "fl-icons" !important;
  font-size: 24px;
  line-height: 0;
  margin-right: 10px;
  color: white;
  font-weight: bold;
}
.yrm-btn-wrapper.yrm-btn-wrapper-7.yrm-more-button-wrapper
  > span
  > span
  > span:after {
  content: "\f107";
  color: #3498db;
  font-family: "fl-icons" !important;
  font-size: 23px;
  margin-left: 10px;
  padding: 0px;
  font-weight: bold;
}

.page-id-14 .button.primary.wc-backward:before {
  content: "\f105";
  font-size: 23px;
  margin-right: 10px;
  font-family: "fl-icons" !important;
}

#wooac-checkout:before {
}

.icon-clock:before {
  content: "\e01a";
}

.icon-expand:before {
  color: #333;
  content: "\e012";
}

.discount-role::before {
  content: "\e004";
  font-family: fl-icons;
  margin-right: 6px;
  font-size: 14px;
}

@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/
  .sticky-add-to-cart--active {
    padding: 0px;
  }

  .product-container
    > div
    > div.row.content-row.mb-0
    > div.product-gallery.col.large-7
    > div.show-for-medium.product-gallery-stacked-thumbnails
    .product-thumbnails
    img {
    border-radius: 0px !important;
  }

  .product-gallery .product-thumbnails {
    padding-top: 8px;
  }

  .product-footer > div > div.related.products > h2 {
    margin-top: 0px;
  }
  .flex-left {
    margin-right: unset;
    margin-left: auto;
  }
  .box-text.box-text-products > div.title-wrapper > p > a {
    padding-top: 8px;
  }

  .rp_estimated_date {
    padding: 6px 0px 0px 0px !important;
  }

  .shortcode-wcpr-content
    .shortcode-reviews-images-container
    .shortcode-reviews-images {
    max-width: 100px;
    padding-top: 15px;
  }
}