/* === GMBS My Account — Layout & SVG Buttons (unified square) === */

/* 좌측 네비 190px(기존 대비 -30px), 우측 내용은 기존 대비 넓어짐 */
.gmbs-myaccount .woocommerce-MyAccount-navigation { width: 190px; }
.gmbs-myaccount .woocommerce-MyAccount-content   { padding-left: 2rem; }

/* 네비 공통 레이아웃 */
.gmbs-myaccount .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .75rem;
}
.gmbs-myaccount .woocommerce-MyAccount-navigation li { margin: 0; }

/* ===== SVG 버튼 공통 설정 ===== */
.gmbs-myaccount .gmbs-nav {
  /* 크기/폰트 변수 한곳에서 제어 */
  --gmbs-nav-font: 16px;
  --gmbs-shape-scale: 0.7;   /* ← 요청: 도형 0.7배 */
}

/* 정사각 비율 유지: 가로=세로=원 지름=하트 최대높이/너비 */
.gmbs-myaccount .gmbs-svgnav {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

/* 도형: 1px 테두리 + 중앙 기준 0.7배 스케일 */
.gmbs-myaccount .gmbs-svgnav .shape {
  fill: #fff;
  stroke: #000;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(var(--gmbs-shape-scale));
  transition: fill .15s ease, stroke .15s ease, transform .15s ease;
}

/* 호버/선택: 테두리+배경 #9cfe20 */
.gmbs-myaccount .woocommerce-MyAccount-navigation li.is-active .gmbs-svgnav .shape,
.gmbs-myaccount .gmbs-svgnav a:hover .shape,
.gmbs-myaccount .gmbs-svgnav a:focus .shape {
  fill: #9cfe20;
  stroke: #9cfe20;
}

/* 라벨: 3버튼 모두 동일, 요청대로 현재 대비 0.6배 */
.gmbs-myaccount .gmbs-svgnav .label {
  fill: #000;
  font-weight: 700;
  font-family: inherit;
  font-size: calc(var(--gmbs-nav-font) * 0.6); /* ← 요청: 텍스트 0.6배 */
}

/* ===== 모바일 (가로 3등분 + 수직/수평 중앙 정렬) ===== */
@media (max-width: 782px) {
  .gmbs-myaccount .woocommerce-MyAccount-navigation { width: auto; margin-bottom: .75rem; }
  .gmbs-myaccount .woocommerce-MyAccount-content { padding-left: 0; }
    /* 하트(찜)만 모바일에서 y축 살짝 올림 → 가로 3분할 시 중앙정렬 체감 */
  .gmbs-myaccount .woocommerce-MyAccount-navigation-link--likes .gmbs-svgnav{
    transform: translateY(-8px); /* 필요시 -6~-10px 사이로 미세조정 가능 */
    will-change: transform;
  }


  .gmbs-myaccount .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    align-items: center;    /* y축 중앙 정렬 */
    justify-items: center;  /* x축 중앙 정렬 */
    overflow: visible;
    padding-bottom: 0;
  }
  .gmbs-myaccount .woocommerce-MyAccount-navigation li {
    min-width: 0;
    display: flex; align-items: center; justify-content: center; /* 셀 내부에서도 중앙 */
  }

  /* 모바일 폰트 약간 축소(도형은 이미 0.7배라 유지) */
  .gmbs-myaccount .gmbs-nav { --gmbs-nav-font: 15px; }
}

/* 대시보드 여백 최소화 */
.gmbs-myaccount .woocommerce-MyAccount-content p:first-child { margin-top: 0; }
/* === GMBS: My Account 좌우 레이아웃을 flex로 강제 + 네비 sticky (데스크탑) === */
@media (min-width: 783px){
  /* TT3 블록 래퍼들이 overflow 숨기는 경우 방지 */
  .woocommerce-account .wp-site-blocks,
  .woocommerce-account main,
  .woocommerce-account .wp-block-group {
    overflow: visible;
  }

  /* Woo 기본 float 해제 → flex 레이아웃 */
  .woocommerce-account .woocommerce {
    display: flex;
    align-items: flex-start;
  }

  /* 좌측 네비: float/width 초기화 + sticky */
  .gmbs-myaccount .woocommerce-MyAccount-navigation {
    float: none !important;
    width: auto !important;

    flex: 0 0 190px;          /* 좌측 폭 고정(우리가 쓰는 190px) */
    position: sticky;
    top: 24px;                /* 헤더 여유 */
    height: max-content;
    align-self: flex-start;
    z-index: 5;
  }

  /* 우측 컨텐츠: float 해제 + 남은 영역 채움 */
  .gmbs-myaccount .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;

    flex: 1 1 auto;
    /* 기존 간격 유지: 너가 쓰는 좌측 패딩이 있으면 그대로 두고, flex gap 대신 패딩으로 간격 유지 */
  }
}