@import url(https://fonts.googleapis.com/css2?family=Damion&display=swap);
/* 예시파일 */

:root {
  --layout-color: #ffffff;
}

/* Remove spinner arrows in Chrome, Safari, Edge, Opera */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Remove spinner arrows in Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

/* 결제수단 버튼 스타일 오버라이드 */
.pay-method-btn__label {
  font-size: 1.25rem; /* text-xl */
}

.pay-method-btn--checked {
  background-color: #b40023 !important; /* primary-500 */
  border-color: #b40023 !important;
}

.my-pay-method-btn {
  font-size: 1.25rem; /* text-xl */
  text-align: left;
}

.my-pay-method-btn.checked {
  background-color: #b40023 !important; /* primary-500 */
  border-color: #b40023 !important;
}

/* MyPay 결제수단 등록 영역 전체 너비 */
.my-pay-payment__item {
  width: 100% !important;
}

.payment-method-group {
  width: 100%;
}

.payment-method-group__buttons {
  width: 100%;
  display: flex;
  gap: 0.5rem;
}

.payment-add-btn {
  flex: 1;
}

/* Nav badge 위치 커스텀 유틸리티 */
.-right-1 {
  right: -0.25rem;
}

.-right-2 {
  right: -0.5rem;
}

@charset 'utf-8';

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url(https://storefront.cdn-nhncommerce.com/custom/team-3978/hanulive-custom/hanulive-7010/fonts/PretendardVariable.woff2) format('woff2-variations');
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  }

  a, button, span, img, td, th, input, label {
    vertical-align: middle;
  }

  /* CustomCheckbox - input이 체크되었을 때 SVG 표시 */
  input.peer:checked ~ span svg {
    opacity: 1 !important;
  }
}

:root {
  --whole-color: #ffffff;
  --background-color: #ffffff;
  --point-color: #f92626;
  --point-color-secondary: #2869f7;
  --black-color: #111;
  --dark-gray-color: #262626;

  --empty-color: #fff;
  --default-color: #ddd;
  --blue-gray-color: #3f434c;
  --gray-color: #999;
  --gray-font-color: #828282;
  --tooltip-bg-color: #f7f7f7;

  --default-font-color: #181818;
}

.btn--withdraw_return {
  @apply bg-zinc-100 text-[var(--whole-black)] border border-[var(--point-color)];
}

.btn--return {
  @apply bg-stone-500 text-[var(--whole-color)] border border-[var(--point-color)];
}

.btn--cancel {
  @apply bg-zinc-100 text-[var(--whole-black)] border border-[var(--point-color)];
}

.btn--write_review {
  @apply bg-zinc-100 text-[var(--whole-black)] border border-[var(--point-color)];
}

.product-detail .tabs {
  position: sticky;
  top: 45px;
  z-index: 5;
  width: 100%;
  margin: 10px auto;
}

.product-detail .tabs .tabs__item.on {
  border-bottom-color: #B40023;
}

/* Remove gray box-shadow */
.l-panel,
.order-detail-info,
.order-confirm__product-table {
  box-shadow: none !important;
}

/* Modal (Confirm, Alert) z-index override - BottomSheet(999)보다 높게 설정 */
.portal {
  z-index: 10000 !important;
}

/* product-section Tailwind 기반 오버라이드 */
.product-section {
  @apply mt-10 border-t-0;
}

.product-section__title {
  @apply block px-5 mb-5 text-2xl font-bold text-gray-900 truncate;
}

.product-section__more {
  @apply flex justify-center items-center py-4 mx-5 mt-5 border-t border-gray-200 text-sm text-gray-700;
}

.product-section__more-ico {
  @apply translate-y-px;
}

.product-section--slide .swiper {
  @apply ml-5;
}

.product-section .thumb-GALLERY,
.product-section .thumb-CART {
  @apply px-5 mb-5;
}

.product-section .thumb-LIST {
  @apply px-5;
}

.product-section .thumb-LIST .thumb-item {
  @apply p-0 border-t-0;
}

.product-section .thumb-LIST .thumb-item:nth-child(n+1) {
  @apply mt-5;
}

/* 상품 카드 높이 일관성 유지 - 상품명 1줄 제한 */
.product-thumb-title-product-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

/* 모바일 웹 유틸리티 오버라이드 */
@media (max-width: 767px) {
  .text-xs {
    font-size: 0.79rem;
    line-height: 1.4;
  }
}

/* 유틸리티 클래스 오버라이드 */
.font-semibold {
  font-weight: 600;
}

.opacity-40 {
  /* opacity: 0.4; */
}

.gap-1 {
  gap: 0.25rem;
}

.justify-around {
  justify-content: space-around;
}

nav.nav {
  display: block;
}

/* 이력카드 위치 유틸리티 — rem 기반 (14px 루트 기준) */
.left-7  { left: 2rem; }
.top-17  { top: 4.2rem; }
.top-103 { top: 7.35rem; }
.top-127 { top: 9.08rem; }
.top-151 { top: 10.7rem; }
.top-175 { top: 12.5rem; }

@layer utilities {
  .rounded-t-3xl {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }
  .rounded-6xl {
    border-radius: 3rem;
  }
  .size-2 {
    width: 0.5rem;
    height: 0.5rem;
  }
  .size-4 {
    width: 1rem;
    height: 1rem;
  }
  .hl-nav-label {
    font-size: 0.79rem;
    line-height: 1.4;
    font-weight: 500;
  }
  .h-28 {
    height: 7rem;
  }

  .bg-Live_text-100{
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
}

.bg-Live_logo-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1));
}


.bg-Live_ivory{
  --tw-bg-opacity: 1;
  background-color: rgb(249 244 238 / var(--tw-bg-opacity, 1));
}

.bg-Live_ivory-100{
  --tw-bg-opacity: 1;
  background-color: rgb(253 228 197 / var(--tw-bg-opacity, 1));
}

.bg-Live_yellow{
  --tw-bg-opacity: 1;
  background-color: rgb(255 174 0 / var(--tw-bg-opacity, 1));
}


.packaging-close-button {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.packaging-close-button::before,
.packaging-close-button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background-color: #000;
  border-radius: 999px;
  transform-origin: center;
}

.packaging-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.packaging-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.delivery-memo-direct-input input {
  height: 49px !important;
  min-height: 49px !important;
}

.gap-y-6 {
    row-gap: 1.5rem;
}

.text-field input {
  height: 49px;
  min-height: 49px;
}


}

/* 영수증 인쇄: 헤더/하단 내비 제외하고 영수증 카드만 인쇄 */
@media print {
  body.printing-receipt * {
    visibility: hidden;
  }

  body.printing-receipt .hl-receipt-card,
  body.printing-receipt .hl-receipt-card * {
    visibility: visible;
  }

  /* min-h-screen 제거 → 빈 2페이지 방지 */
  body.printing-receipt .hl-receipt-wrapper {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: white !important;
  }

  /* position: absolute 사용 (fixed는 모든 페이지에 반복 렌더링됨) */
  body.printing-receipt .hl-receipt-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: white;
    padding: 20px;
    box-shadow: none;
    border-radius: 0;
  }
}