.elementor-13363 .elementor-element.elementor-element-542839ce{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-13363 .elementor-element.elementor-element-701c7ae{margin-top:-65px;margin-bottom:0px;}.elementor-13363 .elementor-element.elementor-element-bdf32e6{--spacer-size:5px;}.elementor-13363 .elementor-element.elementor-element-c3a8d91{margin-top:-65px;margin-bottom:0px;}.elementor-13363 .elementor-element.elementor-element-e8ef419{--spacer-size:5px;}@media(max-width:360px){.elementor-13363 .elementor-element.elementor-element-c82bfa6{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for shortcode, class: .elementor-element-7847c9b *//* ===== 헤더 영역: 카드 안에서 정렬 & 칩 스타일 ===== */
.hoju-stepper-wrap{
  position: relative;
  overflow: hidden;   /* 밖으로 튀는 것 방지 */
}

.hoju-stepper-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 14px;
  flex-wrap: wrap;    /* 모바일에서도 안전 */
}

/* 왼쪽 '주문현황'을 칩으로 */
.hoju-stepper-title{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
  font-size: 14px;
}

/* 오른쪽 '주문 #... 보기'도 버튼 칩으로 */
.hoju-stepper-link{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  white-space: nowrap;   /* 줄바꿈 방지 */
  opacity: 1;            /* 기존 opacity 제거 */
}

/* 모바일에서 링크가 너무 길면 아래로 내려가게 */
@media (max-width: 768px){
  .hoju-stepper-link{
    margin-left: auto;
  }
}

/* ===== 현재 진행중(active) 강조: 골드 링 + 살짝 확대 ===== */
.hoju-step.active .hoju-dot{
  outline: 4px solid rgba(201,162,77,.45) !important; /* 골드 링 */
  box-shadow: 0 10px 22px rgba(201,162,77,.25) !important;
  transform: scale(1.04);
}

/* 진행선 채움(1~4 단계에 따라 길이 변경) */
.hoju-stepper{
  position: relative;
}
.hoju-stepper::after{
  content:"";
  position:absolute;
  left:28px;
  top:40px;
  height:4px;
  background: rgba(201,162,77,.70);
  border-radius:999px;
  z-index:0;
  width: 0%;
}

/* data-step 값에 따라 채워지는 길이 */
.hoju-stepper-wrap[data-step="1"] .hoju-stepper::after{ width: 0%; }
.hoju-stepper-wrap[data-step="2"] .hoju-stepper::after{ width: 30%; }
.hoju-stepper-wrap[data-step="3"] .hoju-stepper::after{ width: 60%; }
.hoju-stepper-wrap[data-step="4"] .hoju-stepper::after{ width: 85%; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-1461db6 *//* ===== 헤더 영역: 카드 안에서 정렬 & 칩 스타일 ===== */
.hoju-stepper-wrap{
  position: relative;
  overflow: hidden;   /* 밖으로 튀는 것 방지 */
}

.hoju-stepper-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 14px;
  flex-wrap: wrap;    /* 모바일에서도 안전 */
}

/* 왼쪽 '주문현황'을 칩으로 */
.hoju-stepper-title{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
  font-size: 14px;
}

/* 오른쪽 '주문 #... 보기'도 버튼 칩으로 */
.hoju-stepper-link{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  white-space: nowrap;   /* 줄바꿈 방지 */
  opacity: 1;            /* 기존 opacity 제거 */
}

/* 모바일에서 링크가 너무 길면 아래로 내려가게 */
@media (max-width: 768px){
  .hoju-stepper-link{
    margin-left: auto;
  }
}

/* ===== 현재 진행중(active) 강조: 골드 링 + 살짝 확대 ===== */
.hoju-step.active .hoju-dot{
  outline: 4px solid rgba(201,162,77,.45) !important; /* 골드 링 */
  box-shadow: 0 10px 22px rgba(201,162,77,.25) !important;
  transform: scale(1.04);
}

/* 진행선 채움(1~4 단계에 따라 길이 변경) */
.hoju-stepper{
  position: relative;
}
.hoju-stepper::after{
  content:"";
  position:absolute;
  left:28px;
  top:40px;
  height:4px;
  background: rgba(201,162,77,.70);
  border-radius:999px;
  z-index:0;
  width: 0%;
}

/* data-step 값에 따라 채워지는 길이 */
.hoju-stepper-wrap[data-step="1"] .hoju-stepper::after{ width: 0%; }
.hoju-stepper-wrap[data-step="2"] .hoju-stepper::after{ width: 35%; }
.hoju-stepper-wrap[data-step="3"] .hoju-stepper::after{ width: 60%; }
.hoju-stepper-wrap[data-step="4"] .hoju-stepper::after{ width: 85%; }/* End custom CSS */
/* Start custom CSS *//* My Account 메인 콘텐츠 카드화 */
.woocommerce-account .woocommerce-MyAccount-content{
  background:#fff;
  border-radius:18px;
  padding:24px;
  margin-top:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* My Account 탭 메뉴 정리 */
.woocommerce-MyAccount-navigation{
  border-bottom:1px solid #eee;
  margin-top:20px;
}

.woocommerce-MyAccount-navigation ul{
  display:flex;
  gap:24px;
}

.woocommerce-MyAccount-navigation li a{
  font-weight:700;
  padding:12px 0;
  color:#222;
}

.woocommerce-MyAccount-navigation li.is-active a{
  color:#C9A24D; /* Hoju Honey 골드 */
  border-bottom:3px solid #C9A24D;
}

/* =========================
   My Account - Top Tile Tabs
   ========================= */

/* nav 박스 여백 */
.woocommerce-account .woocommerce-MyAccount-navigation{
  margin: 18px 0 22px;
  border: 0;
}

/* 6칸 타일 그리드 (데스크탑) */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0; /* 이미지처럼 칸이 딱 붙는 느낌 */
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 각 타일 */
.woocommerce-account .woocommerce-MyAccount-navigation li{
  margin: 0;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
}

/* 마지막 열 우측 라인 제거 */
.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(6n){
  border-right: 0;
}

/* 마지막 행 아래 라인 제거(항목 수가 6의 배수일 때 가장 예쁨) */
.woocommerce-account .woocommerce-MyAccount-navigation li:nth-last-child(-n+6){
  border-bottom: 0;
}

/* 링크: 아이콘 + 텍스트 세로 정렬 */
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px;
  text-decoration: none;
  color: #111;
  font-weight: 800;
  font-size: 15px;
  min-height: 108px;
}

/* hover */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background: rgba(201,162,77,.10); /* Hoju Honey 골드 톤 */
}

/* active: 왼쪽 상단 타일처럼 강조 */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background: #C9A24D; /* 포인트 색 */
  color: #fff;
}

/* 아이콘(기본: dashicons) */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
  font-family: dashicons;
  font-size: 30px;
  line-height: 1;
  content: "\f226"; /* 기본(대시보드) */
  color: currentColor;
  opacity: .95;
}

/* 메뉴별 아이콘 매핑 */
.woocommerce-account .woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--dashboard a::before{ content:"\f226"; } /* dashboard */
.woocommerce-account .woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--orders a::before{ content:"\f174"; } /* cart */
.woocommerce-account .woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--downloads a::before{ content:"\f316"; } /* download */
.woocommerce-account .woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--edit-address a::before{ content:"\f230"; } /* location */
.woocommerce-account .woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--edit-account a::before{ content:"\f110"; } /* user */
.woocommerce-account .woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--customer-logout a::before{ content:"\f310"; } /* logout */

/* 모바일: 3칸(필요하면 2칸으로 바꿔도 됨) */
@media (max-width: 768px){
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(6n){
    border-right: 1px solid #e9e9e9;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(3n){
    border-right: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li:nth-last-child(-n+6){
    border-bottom: 1px solid #e9e9e9;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li:nth-last-child(-n+3){
    border-bottom: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a{
    min-height: 96px;
    padding: 16px 8px;
    font-size: 14px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a::before{
    font-size: 28px;
  }
}

/* [Fix] 테마/우커머스 기본 2컬럼(좌:네비 25% / 우:콘텐츠) 강제 해제 */
.woocommerce-account .woocommerce{
  display:block !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none !important;
  width:100% !important;
  max-width:none !important;
  margin:18px 0 22px !important;
}

.woocommerce-account .woocommerce-MyAccount-content{
  float:none !important;
  width:100% !important;
  max-width:none !important;
}

/* [Fix] 타일 그리드 컨테이너(ul)가 전체폭을 사용하도록 강제 */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  width:100% !important;
  max-width:none !important;
  display:grid !important;
}

/* 내 계정 페이지: 장바구니 드롭다운(테마 mini-cart) 완전 차단 */
.woocommerce-account .cart-dropdown-form,
.woocommerce-account div.cart-dropdown-form,
.woocommerce-account .cart-dropdown-form.woocommerce,
.woocommerce-account .dropdowin-container,
.woocommerce-account .dropdown-container,
.woocommerce-account .cart-dropdown,
.woocommerce-account .mini-cart,
.woocommerce-account .woocommerce-mini-cart,
.woocommerce-account .widget_shopping_cart,
.woocommerce-account .widget_shopping_cart_content{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* [FIXED] My Account page - disable mini cart dropdown (kept open issue) */

/* ===============================
 My Account - Tile Menu Final
================================ */

/* 네비 전체를 상단 타일로 */
.woocommerce-account .woocommerce-MyAccount-navigation{
  margin: 24px 0 28px;
}

/* 그리드 */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

/* 각 타일 */
.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* 링크 */
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px;
  font-weight: 800;
  color: #111;
  min-height: 110px;
}

/* 아이콘 */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
  font-family: dashicons;
  font-size: 30px;
  content: "\f226";
}

/* 아이콘 매핑 */
.woocommerce-MyAccount-navigation-link--dashboard a::before{content:"\f226";}
.woocommerce-MyAccount-navigation-link--orders a::before{content:"\f174";}
.woocommerce-MyAccount-navigation-link--edit-address a::before{content:"\f230";}
.woocommerce-MyAccount-navigation-link--edit-account a::before{content:"\f110";}
.woocommerce-MyAccount-navigation-link--customer-logout a::before{content:"\f310";}

/* Hover */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background: rgba(201,162,77,.12);
}

/* Active */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:#C9A24D;
  color:#fff;
}

/* [FIX] 타일 안 아이콘 + 텍스트 완전 중앙 정렬 */
.woocommerce-account 
.woocommerce-MyAccount-navigation li a{
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce-account 
.woocommerce-MyAccount-navigation li a::before{
  display: block !important;
  margin: 0 auto !important;
}

/* [TILES] Divider - Clear */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  border: 1px solid rgba(0,0,0,.14) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-right: 1px solid rgba(0,0,0,.12) !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
}

/* [FIX] 타일 구분선을 '타일 자체'에 균일하게 적용 (왼쪽도 동일하게 보이게) */

/* 바깥 테두리는 약하게(또는 제거) */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  border: 0 !important;                 /* 바깥선 제거 */
  background: #fff;
}

/* 각 타일에 왼쪽/위쪽 선을 주면,
   첫 컬럼(왼쪽 끝)도 동일한 선 느낌이 생김 */
.woocommerce-account .woocommerce-MyAccount-navigation li{
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.10) !important;
  border-top:  1px solid rgba(0,0,0,.10) !important;
}

/* 그리드 전체를 감싸는 외곽선(원하시면 살짝만) */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset !important;
  border-radius: 14px;
  overflow: hidden;
}

.hoju-stepper-wrap{
  background:#dff1e7;
  border-radius:999px;
  padding:18px 18px 16px;
  margin: 18px 0;
}

.hoju-stepper-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.hoju-stepper-title{ font-weight:800; font-size:16px; }
.hoju-stepper-link{ font-weight:700; font-size:13px; text-decoration:none; opacity:.85; }

.hoju-stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
}

.hoju-stepper:before{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  top:24px;
  height:4px;
  background:rgba(255,255,255,.65);
  border-radius:999px;
}

.hoju-step{ width:25%; text-align:center; position:relative; z-index:1; }

.hoju-dot{
  width:54px; height:54px; margin:0 auto 10px;
  border-radius:999px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.hoju-label{ font-weight:800; font-size:13px; opacity:.85; }

.hoju-step.done .hoju-dot{ border:2px solid rgba(0,0,0,.08); opacity:.9; }
.hoju-step.active .hoju-dot{ outline:4px solid rgba(0,128,0,.15); }
.hoju-step.todo .hoju-dot{ opacity:.65; }

@media (max-width: 768px){
  .hoju-stepper-wrap{ border-radius:26px; }
  .hoju-dot{ width:46px; height:46px; }
  .hoju-label{ font-size:12px; }
  .hoju-stepper:before{ top:21px; }
}

/* ✅ 스텝퍼 바깥 박스를 '카드형 사각형'으로 변경 */
.hoju-stepper-wrap{
  background: #fff !important;                 /* 카드 배경 */
  border: 1px solid #e9e9e9 !important;        /* 카드 아웃라인 */
  border-radius: 18px !important;              /* 위 카드처럼 둥근 모서리 */
  box-shadow: 0 8px 22px rgba(0,0,0,.06) !important;
  padding: 18px 18px 22px !important;
  overflow: hidden;                             /* 내부 둥근 모서리 밖으로 새는 것 방지 */
}

/* ✅ 기존 '타원형 초록 배경' 제거(내부 스텝 라인 영역) */
.hoju-stepper{
  background: transparent !important;
  border-radius: 0 !important;
  padding: 14px 8px 6px !important;
}

/* ✅ 상단 헤더(주문현황/주문보기)도 카드 안쪽 정렬 */
.hoju-stepper-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px !important;
}

/* (선택) 주문 #xxxx 보기 버튼도 카드 스타일로 */
.hoju-stepper-link{
  background:#fff !important;
  border:1px solid #e9e9e9 !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
}/* End custom CSS */