
.ce-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:24px 0}.ce-toolbar button,.ce-actions button,.ce-dialog button{border:1px solid #ddd;border-radius:8px;background:white;padding:10px 15px;cursor:pointer;color:#333;font:inherit}.ce-toolbar .ce-primary,.ce-dialog .ce-primary{background:#246346;color:white;border-color:#246346}.ce-admin{display:none!important}body.cj-admin-logged-in .ce-admin{display:flex!important}.ce-actions{gap:6px;margin:10px 0}.ce-status{font-size:13px;color:#666;width:100%}.ce-dialog{border:0;border-radius:18px;padding:28px;width:min(620px,94vw);max-height:90vh;overflow:auto;box-shadow:0 20px 80px #0003}.ce-dialog::backdrop{background:#0008}.ce-dialog h2{margin:0 0 20px}.ce-dialog label{display:block;margin:14px 0;font-weight:600}.ce-dialog input,.ce-dialog textarea,.ce-dialog select{display:block;width:100%;padding:11px;margin-top:7px;border:1px solid #ccc;border-radius:7px;box-sizing:border-box;font:inherit}.ce-dialog textarea{min-height:100px}.ce-dialog img{max-width:180px;max-height:140px;object-fit:contain;margin-top:8px}.ce-dialog footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.ce-error{color:#b42318}.ce-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.ce-filters button{padding:9px 17px;border:1px solid #ddd;border-radius:30px;background:white;cursor:pointer}.ce-filters button[aria-pressed=true]{background:#246346;color:white}.ce-group-hidden{display:none!important}

.products-section .product-group{margin-top:40px}.products-section .product-group:first-of-type{margin-top:0}.ce-actions{flex-wrap:wrap}.ce-dialog p{white-space:pre-line}

/* =========================================================
   CJ_ROLL_ANIMATION_UNIFIED
   8개 제품 페이지 롤케이크 기준 애니메이션 통일
========================================================= */

.reveal.cj-roll-reveal {
  opacity: 0;
  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-up.cj-roll-reveal {
  transform: translate3d(0, 48px, 0);
}

.reveal-scale.cj-roll-reveal {
  transform: translate3d(0, 24px, 0) scale(0.94);
}

.reveal.cj-roll-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .reveal-up.cj-roll-reveal {
    transform: translate3d(0, 30px, 0);
  }

  .reveal-scale.cj-roll-reveal {
    transform: translate3d(0, 20px, 0) scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal.cj-roll-reveal,
  .reveal.cj-roll-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   CJ_PRODUCT_PAGE_ENTER
   8개 제품 페이지 첫 진입 자연스러운 표시 효과
========================================================= */

body.cj-product-enter main {
  opacity: 0;
}

body.cj-product-enter.cj-product-enter-ready main {
  opacity: 1;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.cj-product-enter main,
  body.cj-product-enter.cj-product-enter-ready main {
    opacity: 1 !important;
    transition: none !important;
  }
}


/* CJ_MOBILE_CATEGORY_4X2_START */

/* =========================================================
   모바일 제품 카테고리
   8개 품목을 4 x 2로 모두 표시
   PC는 기존 1줄 유지
========================================================= */

@media (max-width: 760px) {

  .category-scroll {
    width: min(calc(100% - 20px), var(--container)) !important;

    min-height: 96px !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    align-items: stretch !important;

    gap: 0 !important;

    padding: 8px 0 !important;

    overflow: visible !important;
  }

  .category-button {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 12px 3px !important;

    font-size: 12px !important;
    line-height: 1.25 !important;

    text-align: center !important;
    white-space: nowrap !important;
  }

  .category-button::after {
    left: 12% !important;
    right: 12% !important;
    bottom: 5px !important;
  }
}

/* 아주 좁은 모바일 */
@media (max-width: 390px) {

  .category-button {
    padding-left: 1px !important;
    padding-right: 1px !important;

    font-size: 11px !important;
  }
}

/* CJ_MOBILE_CATEGORY_4X2_END */
