/*
 * Onur Site Core global stylesheet.
 * Consolidated CSS from Code Snippets 34, 61, 97, 99, 100, 128, 134 (verbatim).
 */

/* ===== Snippet 34 ===== */
	body{
	word-break: keep-all;
}

/* ===== Snippet 61 ===== */
	

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
	flex-direction: column;
	gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul a {
    border-radius: var(--ui-radius);
}
	
/* 모바일 화면에서만 레이아웃 및 스타일 변경 */
@media (max-width: 768px) {
  /* 레이아웃 변경: 내비게이션을 위로, 콘텐츠를 아래로 배치 */
  .woocommerce .woocommerce-MyAccount {
    display: flex;
    flex-direction: column;
  }

  .woocommerce .woocommerce-MyAccount-navigation,
  .woocommerce .woocommerce-MyAccount-content {
    width: 100%;
  }

  .woocommerce .woocommerce-MyAccount-navigation {
    order: 1;
    margin-bottom: 20px;
    position: relative; /* 가려주는 요소를 위해 상대 위치 설정 */
    flex-grow: 1; /* 내비게이션이 남은 공간을 모두 차지하도록 설정 */
  }

  .woocommerce .woocommerce-MyAccount-content {
    order: 2;
  }

  /* 내비게이션 리스트 스타일링 */
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
	flex-direction: row;
    background-color: #fff;
    border: 1px solid rgba(53, 52, 52, 0.226);
    border-radius: 10px;
    overflow: hidden;
    position: relative; /* 가려주는 요소를 위해 상대 위치 설정 */
    width: 100%; /* 내비게이션을 100% 너비로 확장 */
    z-index: 1;
	gap: 0px;
  }

  .woocommerce-MyAccount-navigation ul li {
    flex: 1;
    text-align: center;
    position: relative;
    /* 가로 및 세로 구분선 추가 */
    border-right: 1px solid #ddd; /* 오른쪽에 세로 구분선 추가 */
    border-bottom: 1px solid #ddd; /* 아래쪽에 가로 구분선 추가 */
  }

  /* 마지막 열의 오른쪽 구분선 제거 */
  .woocommerce-MyAccount-navigation ul li:last-child {
    border-right: none; /* 마지막 아이템의 오른쪽 구분선 제거 */
  }

	
  /* 모든 리스트 항목의 높이를 동일하게 유지 */
  .woocommerce-MyAccount-navigation ul li a {
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    height: 100%; /* 리스트 항목의 전체 높이를 채움 */
    padding: 10px;
    font-weight: 600;
    letter-spacing: -1px;
    font-size: 14px;
    color: #000; /* 기본 글자 색상 검정색 */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    width: 100%;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    overflow: hidden; /* 넘치는 텍스트 숨기기 */
    text-overflow: ellipsis; /* 넘치는 텍스트에 '...' 표시 */
  }

  /* 활성화된 항목 및 호버 시 스타일 변경 */
  .woocommerce-MyAccount-navigation ul li.is-active a,
  .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: rgb(11, 117, 223); /* 파란색 배경 */
    color: #000; /* 흰색 텍스트 */
  }

  /* 내비게이션 뒤에 있는 요소 가리기 및 공간 제거 */
  .woocommerce-account .woocommerce-MyAccount-navigation:before {
    display: none !important; /* 요소 숨기기 */
    /* 추가적으로 공간이 남아있다면 패딩이나 마진을 조정 */
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
  }

  /* 내비게이션의 가로폭 100%*/
  .hentry .elementor ul {
    width: 100%;
  }
}


/* ===== Snippet 97 ===== */
/* 기본적으로 모든 텍스트 요소에 단어 단위 줄바꿈 유지 */
/* 1. 기본 줄바꿈 규칙 적용 (no-break 클래스 제외) */
body :not(.no-break) {
  overflow-wrap: break-word; /* 긴 단어가 요소의 너비를 초과할 경우 줄바꿈 허용 */
  word-break: keep-all;      /* 단어 단위로 줄바꿈 유지 */
  hyphens: auto;              /* 필요 시 하이픈 추가 */
}

/* 2. 일본어와 중국어 텍스트에 대해 문자 단위로 줄바꿈 적용 (no-break 클래스 제외) */
body :not(.no-break):lang(ja),
body :not(.no-break):lang(zh) {
  word-break: break-all; /* 문자 단위로 줄바꿈 허용 */
}

/* 3. no-break 클래스가 적용된 요소에 대한 예외 스타일 */
.no-break {
  word-break: normal; /* 기본 줄바꿈 규칙 유지 */
  overflow-wrap: normal;
  hyphens: none;
}
	
/* 네비게이션 바 좌우 패딩 제거 */
#wrapper-navbar .uicore-header-wrapper nav {
    padding-left: 0px !important; /* 네비게이션 바의 왼쪽 패딩 제거 */
    padding-right: 0px !important; /* 네비게이션 바의 오른쪽 패딩 제거 */
}

/* 리스트 스타일 설정 */
ul {
    list-style-type: disc; /* 불렛을 원형으로 설정 */
    list-style-position: outside; /* 불렛을 텍스트 바깥쪽에 위치 */
    padding-left: 1rem; /* 불렛과 텍스트 간의 여백 추가 */
    margin-left: 0; /* 리스트 전체의 왼쪽 마진 제거 */
}

/* 리스트 아이템 스타일 설정 */
li {
    padding-left: 0; /* 리스트 아이템 내부의 왼쪽 패딩 제거 */
    margin-left: 0; /* 리스트 아이템 외부의 왼쪽 마진 제거 */
}

/* ===== Snippet 99 ===== */
/* 기본적으로 모든 텍스트 요소에 단어 단위 줄바꿈 유지 */
/* 1. 기본 줄바꿈 규칙 적용 (no-break 클래스 제외) */
	body :not(.no-break) {
  text-wrap: pretty;
}


/* ===== Snippet 100 ===== */
	@media (max-width: 1025px) {
    .uicore-mobile-nav-show .uicore-navigation-wrapper {
        width: 55% !important; /* 너비를 40%로 설정 */
        left: 45% !important; /* 오른쪽에 붙도록 설정 */
    } 
}
	.uicore-mobile-menu-wrapper.ui-menu-active .uicore-toggle.uicore-text-menu .ui-text {
            opacity: 0 !important;
        }

}

/* ===== Snippet 128 ===== */
	/* 기존 flex 설정을 초기 기본값으로 되돌리는 코드 */
.cart:not(.variations_form){
    /* 'initial'은 해당 요소가 원래 가지고 있던 display 기본값으로 되돌립니다. */
    display: table;
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    width: 100% !important;
}
	
.woocommerce table.shop_table td.actions .coupon .input-text {

        width: auto !important;
    }
	
/*체크아웃*/
.select2-container.select2-container--default .select2-selection--single.select2-selection .select2-selection__arrow, .variations select.select2-selection .select2-selection__arrow, .woocommerce #reviews textarea.select2-selection .select2-selection__arrow {
    top: 2px;
}
	
	
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
    float: initial;
}


/* ===== Snippet 134 ===== */
:root body {
    --ui-border-color: #9CA3AF !important;

  /* ==============================================
     Tailwind CSS 기반 그림자 (범용)
     ============================================== */
  --tw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* 가장 작은 그림자 */
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* 기본 그림자 */
  --tw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* 중간 그림자 */
  --tw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* 큰 그림자 */
  --tw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* 아주 큰 그림자 */
  --tw-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* 가장 큰 그림자 */
  --tw-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* 내부 그림자 */


  /* ==============================================
     새로 추가된 의미론적 그림자 (특정 목적용)
     ============================================== */

  /**
   * @description 버튼처럼 입체적이고 복합적인 그림자. 클릭 가능한 요소에 적합.
   * @source .main-button a
   */
  --shadow-interactive-button: 
    /* 외부 그림자 (아래쪽) */
    0 1px 1px -0.5px rgba(33, 38, 49, 0.24),
    0 3px 3px -1.5px rgba(33, 38, 49, 0.12),
    0 6px 6px -3px rgba(33, 38, 49, 0.12),
    0 12px 12px -6px rgba(33, 38, 49, 0.12),
    0 24px 24px -12px rgba(33, 38, 49, 0.12),
    0 32px 32px -16px rgba(33, 38, 49, 0.12),
    /* 내부 그림자 (위쪽 하이라이트) */
    inset 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.12);

  /**
   * @description 여러 겹으로 쌓여 깊이감을 주는 정교한 그림자. 카드, 컨테이너에 적합.
   * @source .pre-titles
   */
  --shadow-deep-layered: 
    0 0 0 1px rgba(29, 62, 122, 0.06),
    0 1px 1px -0.5px rgba(44, 51, 68, 0.03),
    0 2px 2px -1px rgba(44, 51, 68, 0.04),
    0 3px 3px -1.5px rgba(44, 51, 68, 0.04),
    0 5px 5px -2.5px rgba(44, 51, 68, 0.03),
    0 10px 10px -5px rgba(44, 51, 68, 0.03),
    0 24px 24px -8px rgba(44, 51, 68, 0.03);

  /**
   * @description 부드럽게 살짝 떠오르는 느낌을 주는 그림자. 호버 효과나 강조에 적합.
   * @source box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.06);
   */
  --shadow-soft-lift: 0px 20px 20px -10px rgba(0, 0, 0, 0.06);
 /*
    활용: 메인 페이지의 가장 큰 타이틀, 영웅(Hero) 섹션 제목
    (약 48px ~ 54.4px)
  */
  --font-size-xxxxl: clamp(3.00rem, 2.85915rem + 0.60094vw, 3.40rem);

  /*
    활용: 각 섹션의 최상단 제목 (H2)
    (약 38px ~ 44px)
  */
  --font-size-xxxl: clamp(2.38rem, 2.24296rem + 0.56338vw, 2.75rem);

  /*
    활용: 섹션 내의 부제목, 중요한 아이템의 제목 (H3)
    (약 30px ~ 35px)
  */
  --font-size-xxl: clamp(1.88rem, 1.76761rem + 0.45822vw, 2.18rem);

  /*
    활용: 상품 상세 페이지의 상품명, 모듈의 제목 (H4)
    (약 24px ~ 28px)
  */
  --font-size-xl: clamp(1.50rem, 1.41197rem + 0.37559vw, 1.75rem);

  /*
    활용: 상품 리스트의 상품명, 강조하고 싶은 중간 크기 텍스트
    (약 19px ~ 22px)
  */
  --font-size-l: clamp(1.18rem, 1.11134rem + 0.29296vw, 1.38rem);

  /*
    활용: 일반 본문(p)보다 약간 큰 텍스트, 인용구, 상품 카드 가격
    (약 15px ~ 18px)
  */
  --font-size-m: clamp(0.94rem, 0.87148rem + 0.28169vw, 1.13rem);

  /*
    활용: 일반 본문(p) 텍스트, 상품 설명
    (약 13px ~ 15px)
  */
  --font-size-s: clamp(0.81rem, 0.76849rem + 0.18779vw, 0.94rem);

  /*
    활용: 보조 텍스트, 상품의 할인 전 가격, 리뷰 수, 메타 정보
    (약 12px ~ 13px)
  */
  --font-size-xs: clamp(0.75rem, 0.72799rem + 0.09390vw, 0.81rem);

  /*
    활용: 태그, 라벨, 저작권 정보 등 가장 작은 텍스트
    (약 11px ~ 12px)
  */
  --font-size-xxs: clamp(0.69rem, 0.66549rem + 0.09390vw, 0.75rem);
}


/* * =========================================
 * 2. 공용 컴포넌트 스타일 (.btn, .card)
 * =========================================
 */

/* =========================================
   기본 버튼 설정 (공통)
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* [요청 3 수정] 반응형 패딩: 최소 10px 20px, 중간 1.5vw 3vw, 최대 12px 24px */
    padding: clamp(0.625rem, 1.5vw, 0.75rem) clamp(1.25rem, 3vw, 1.5rem); 
    
    font-family: var(--uicore-primary-font-family); /* Pretendard */
    
    /* [요청 3 수정] 반응형 폰트 크기: 최소 14px, 중간 1vw + 0.5rem, 최대 16px */
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); 

    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--ui-radius); /* 6px */
    border: 1px solid transparent; /* 테두리 공간 확보 */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none; /* a태그 사용 시 밑줄 제거 */
}
/* =========================================
   1. Primary Solid Button (배경 있는 버튼)
   ========================================= */
.btn-primary {
    background-color: var(--uicore-primary-color); /* #27272A */
    color: var(--uicore-white-color);
    /* 입체감을 주는 인터랙티브 그림자 적용 */
    box-shadow: var(--shadow-interactive-button); 
}
.btn-primary:hover {
    background-color: var(--uicore-headline-color); /* #18181B (더 어둡게) */
    color: var(--uicore-white-color); /* 호버 시 텍스트 흰색 유지 */
    transform: translateY(-1px); /* 살짝 떠오르는 효과 */
}
.btn-primary:active {
    transform: translateY(0); /* 클릭 시 눌리는 느낌 */
    background-color: var(--uicore-dark-color); /* #09090B */
}
/* =========================================
   2. Outline Button (테두리만 있는 버튼)
   ========================================= */
.btn-outline {
    /* 요청사항 반영: 배경 흰색, 테두리=글자색 */
    background-color: var(--uicore-white-color); 
    color: var(--uicore-primary-color); 
    border-color: var(--uicore-primary-color); 
}

/* [요청 2 수정] 호버 시 배경색만 살짝 어두워지도록 */
.btn-outline:hover {
    background-color: var(--e-global-color-zinc_50); /* #fafafa */
    color: var(--uicore-primary-color); /* 글자색 유지 */
    border-color: var(--uicore-primary-color); /* 테두리색 유지 */
    transform: translateY(-1px);
}

/* [요청 2 수정] Active 상태도 배경색만 살짝 더 어두워지도록 */
.btn-outline:active {
    background-color: var(--e-global-color-zinc_100); /* #f4f4f5 */
    color: var(--uicore-primary-color); /* 글자색 유지 */
    transform: translateY(0);
}