:root {
  /* ========================================
     체리트리 브랜드 색상 체계
     ======================================== */
  
  /* 기본/마켓 - 코랄 핑크 (Brand Primary) */
  --ct-main-color: #F06272;
  --ct-main-color-background: #fde6ea;
  --ct-main-color-deep1: #e55f6d;
  --ct-main-color-deep2: #b24953;
  
  /* 기존 호환성을 위한 secondary (브리프 그린과 동일) */
  --ct-secondary-color: #6BBF59;
  --ct-secondary-color-background: #6BBF5950;
  --ct-secondary-color-deep1: #60ac51;
  --ct-secondary-color-deep2: #4c8640;
  --ct-secondary-color-shadow: #6BBF5920;
  
  /* ----------------------------------------
     서비스별 대표 색상
     ---------------------------------------- */
  
  /* 마켓 - 코랄 핑크 */
  --ct-market-primary: #F06272;
  --ct-market-dark: #D94A5A;
  --ct-market-light: #fde6ea;
  --ct-market-gradient: linear-gradient(135deg, #F06272, #D94A5A);
  --ct-market-accent: #FFB740;           /* 골드 - 할인, 인기상품 강조 */
  
  /* 브리프 - 포레스트 그린 */
  --ct-brief-primary: #4A9F40;
  --ct-brief-dark: #1E7B3C;
  --ct-brief-light: #E8F5E6;
  --ct-brief-gradient: linear-gradient(135deg, #4A9F40, #1E7B3C);
  --ct-brief-accent: #FF8F50;            /* 코랄 오렌지 - HOT 캠페인, 알림 */
  
  /* 인사이트 - 인디고 */
  --ct-insight-primary: #6366F1;
  --ct-insight-dark: #4F46E5;
  --ct-insight-light: #EEF2FF;
  --ct-insight-gradient: linear-gradient(135deg, #6366F1, #4F46E5);
  --ct-insight-accent: #00B4D8;          /* 시안/스카이블루 - AI, 분석 결과 강조 */
}

.ct-color {
  color: var(--ct-main-color) !important;
}

.ct-color-background {
  background-color: var(--ct-main-color-background);
}


.ct-color-deep1 {
  color: var(--ct-main-color-deep1);
}

.ct-color-deep2 {
  color: var(--ct-main-color-deep2);
}

.ct-secondary {
  color: var(--ct-secondary-color) !important;
}

.ct-secondary-background {
  background-color: var(--ct-secondary-color-background);
}

.ct-secondary-shadow-background {
  background-color: var(--ct-secondary-color-shadow);
}

.ct-secondary-deep1 {
  color: var(--ct-secondary-color-deep1) !important;
}

.ct-secondary-deep2 {
  color: var(--ct-secondary-color-deep2) !important;
}

.btn-ct-default {
  background-color: var(--ct-main-color); 
  color: #ffffff;
  transition: background 0.2s ease-in-out;
}

.btn-ct-default:hover {
  background-color: var(--ct-main-color-deep1);
  color: #ffffff;
}

.btn-ct-default:active {
  background-color: var(--ct-main-color-deep2);
  color: #ffffff;
}

.btn-ct-outline-primary {
  --phoenix-btn-color: var(--ct-main-color); /* 텍스트 색상 */
  --phoenix-btn-border-color: var(--ct-main-color); /* 테두리 색상 */
  --phoenix-btn-hover-color: #fff; /* hover 시 텍스트 색상 */
  --phoenix-btn-hover-bg: var(--ct-main-color); /* hover 시 배경색 */
  --phoenix-btn-hover-border-color: var(--ct-main-color); /* hover 시 테두리 색상 */
  --phoenix-btn-focus-shadow-rgb: 233, 125, 135; /* focus 시 그림자 색상 */
  --phoenix-btn-active-color: #fff; /* 클릭 시 텍스트 색상 */
  --phoenix-btn-active-bg: var(--ct-main-color); /* 클릭 시 배경색 */
  --phoenix-btn-active-border-color: var(--ct-main-color); /* 클릭 시 테두리 색상 */
  --phoenix-btn-active-shadow: initial; /* 클릭 시 그림자 */
  --phoenix-btn-disabled-color: var(--ct-main-color); /* 비활성화 상태에서 텍스트 색상 */
  --phoenix-btn-disabled-bg: transparent; /* 비활성화 상태에서 배경색 */
  --phoenix-btn-disabled-border-color: var(--ct-main-color); /* 비활성화 상태에서 테두리 색상 */
  --phoenix-gradient: none;
}

.btn-ct-subtle-primary {
  --phoenix-btn-color: var(--ct-main-color);                /* 기본 텍스트 색상 (어두운 색) */
  --phoenix-btn-bg: rgba(240, 98, 114, 0.15);              /* 기본 배경색 (반투명한 핑크) */
  --phoenix-btn-border-color: transparent;                        /* 기본 테두리 없음 */

  --phoenix-btn-hover-color: var(--ct-main-color-deep1);          /* hover 시 텍스트 색상 */
  --phoenix-btn-hover-bg: var(--ct-main-color-background);        /* hover 시 배경 유지 */
  --phoenix-btn-hover-border-color: transparent;

  --phoenix-btn-focus-shadow-rgb: 240, 98, 114;                   /* focus 시 그림자 색상 */
  --phoenix-btn-active-color: #fff;                               /* 클릭 시 텍스트 색상 */
  --phoenix-btn-active-bg: var(--ct-main-color);                  /* 클릭 시 배경색 (진한색) */
  --phoenix-btn-active-border-color: var(--ct-main-color);        /* 클릭 시 테두리 색상 */
  --phoenix-btn-active-shadow: initial;

  --phoenix-btn-disabled-color: var(--ct-main-color-deep2);       /* 비활성화 시 텍스트 색상 */
  --phoenix-btn-disabled-bg: #f9f9f9;                              /* 비활성화 배경색 */
  --phoenix-btn-disabled-border-color: transparent;

  --phoenix-gradient: none;
  color: var(--phoenix-btn-color);
  background-color: var(--phoenix-btn-bg);
  border: 1px solid var(--phoenix-btn-border-color);
}

.btn-ct-outline-secondary {
  --phoenix-btn-color: var(--ct-secondary-color); /* 텍스트 색상 */
  --phoenix-btn-border-color: var(--ct-secondary-color); /* 테두리 색상 */
  --phoenix-btn-hover-color: #fff; /* hover 시 텍스트 색상 */
  --phoenix-btn-hover-bg: var(--ct-secondary-color); /* hover 시 배경색 */
  --phoenix-btn-hover-border-color: var(--ct-secondary-color); /* hover 시 테두리 색상 */
  --phoenix-btn-focus-shadow-rgb: 0, 160, 90; /* focus 시 그림자 색상 */
  --phoenix-btn-active-color: #fff; /* 클릭 시 텍스트 색상 */
  --phoenix-btn-active-bg: var(--ct-secondary-color); /* 클릭 시 배경색 */
  --phoenix-btn-active-border-color: var(--ct-secondary-color); /* 클릭 시 테두리 색상 */
  --phoenix-btn-active-shadow: initial; /* 클릭 시 그림자 */
  --phoenix-btn-disabled-color: var(--ct-secondary-color); /* 비활성화 상태에서 텍스트 색상 */
  --phoenix-btn-disabled-bg: transparent; /* 비활성화 상태에서 배경색 */
  --phoenix-btn-disabled-border-color: var(--ct-secondary-color); /* 비활성화 상태에서 테두리 색상 */
  --phoenix-gradient: none; /* 그라디언트 없음 */
}

.btn-ct-subtle-secondary {
  --phoenix-btn-color: var(--ct-secondary-color-deep2);                /* 기본 텍스트 색상 */
  --phoenix-btn-bg: rgba(107, 191, 89, 0.15);              /* 기본 배경색 (투명한 연두) */
  --phoenix-btn-border-color: transparent;

  --phoenix-btn-hover-color: var(--ct-secondary-color-deep1);          /* hover 시 텍스트 색상 */
  --phoenix-btn-hover-bg: var(--ct-secondary-color-background);        /* hover 시 배경 유지 */
  --phoenix-btn-hover-border-color: transparent;

  --phoenix-btn-focus-shadow-rgb: 107, 191, 89;                         /* focus 시 그림자 색상 */
  --phoenix-btn-active-color: #fff;                                     /* 클릭 시 텍스트 색상 */
  --phoenix-btn-active-bg: var(--ct-secondary-color-deep2);            /* 클릭 시 배경색 */
  --phoenix-btn-active-border-color: var(--ct-secondary-color-deep2);
  --phoenix-btn-active-shadow: initial;

  --phoenix-btn-disabled-color: var(--ct-secondary-color-deep2);
  --phoenix-btn-disabled-bg: #f9f9f9;
  --phoenix-btn-disabled-border-color: transparent;

  --phoenix-gradient: none;

  color: var(--phoenix-btn-color);
  background-color: var(--phoenix-btn-bg);
  border: 1px solid var(--phoenix-btn-border-color);
}

.btn-ct-emphasize-secondary {
  --phoenix-btn-color: var(--ct-secondary-color-deep2);                /* 기본 텍스트 색상 */
  --phoenix-btn-bg: rgba(107, 191, 89, 0.15);              /* 기본 배경색 (투명한 연두) */
  --phoenix-btn-border-color: transparent;

  --phoenix-btn-hover-color: var(--ct-secondary-color-deep1);          /* hover 시 텍스트 색상 */
  --phoenix-btn-hover-bg: var(--ct-secondary-color-background);        /* hover 시 배경 유지 */
  --phoenix-btn-hover-border-color: transparent;

  --phoenix-btn-focus-shadow-rgb: 107, 191, 89;                         /* focus 시 그림자 색상 */
  --phoenix-btn-active-color: #fff;                                     /* 클릭 시 텍스트 색상 */
  --phoenix-btn-active-bg: var(--ct-secondary-color-deep2);            /* 클릭 시 배경색 */
  --phoenix-btn-active-border-color: var(--ct-secondary-color-deep2);
  --phoenix-btn-active-shadow: initial;

  --phoenix-btn-disabled-color: var(--ct-secondary-color-deep2);
  --phoenix-btn-disabled-bg: #f9f9f9;
  --phoenix-btn-disabled-border-color: transparent;

  --phoenix-gradient: none;

  color: var(--phoenix-btn-color);
  background-color: var(--phoenix-btn-bg);
  border: 1px solid var(--phoenix-btn-border-color);
}

.badge-ct-primary {
  --phoenix-badge-bg: var(--ct-main-color-background);
  --phoenix-badge-color: var(--ct-main-color-deep2);
  --phoenix-badge-border-color: var(--ct-main-color-deep1);
}

.badge-ct-secondary {
  --phoenix-badge-bg: var(--ct-secondary-color-background);
  --phoenix-badge-color: var(--ct-secondary-color-deep2);
  --phoenix-badge-border-color: var(--ct-secondary-color-deep1);
}

.badge-ct-subtle-primary {
  --phoenix-badge-bg: var(--ct-main-color-deep1);
  --phoenix-badge-color: #ffffff;
  --phoenix-badge-border-color: var(--ct-main-color-deep1);
}

.badge-ct-subtle-secondary {
  --phoenix-badge-bg: var(--ct-secondary-color-deep1);
  --phoenix-badge-color: #ffffff;
  --phoenix-badge-border-color: var(--ct-secondary-color-deep1);
}

.btn-subtle-secondary-second {
  --phoenix-btn-color: #525b75;
  --phoenix-btn-bg: #eff2f6;
  --phoenix-btn-border-color: #eff2f6;
  --phoenix-btn-hover-color: #525b75;
  --phoenix-btn-hover-bg: var(--phoenix-secondary-lighter);
  --phoenix-btn-hover-border-color: #f1f3f7;
  --phoenix-btn-focus-shadow-rgb: 215, 219, 227;
  --phoenix-btn-active-color: #f2f5f8;
  --phoenix-btn-active-bg: #000000;
  --phoenix-btn-active-border-color: #000000;
  --phoenix-btn-active-shadow: initial;
  /* --phoenix-btn-active-color: #000000;
  --phoenix-btn-active-bg: #f2f5f8;
  --phoenix-btn-active-border-color: #f1f3f7;
  --phoenix-btn-active-shadow: initial; */
  --phoenix-btn-disabled-color: #000000;
  --phoenix-btn-disabled-bg: #eff2f6;
  --phoenix-btn-disabled-border-color: #eff2f6;
}

.btn-ct-primary {
  --phoenix-btn-color: #fff;
  --phoenix-btn-bg: var(--ct-main-color);
  --phoenix-btn-border-color: transparent;
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--ct-main-color-deep1);
  --phoenix-btn-hover-border-color: rgba(0, 0, 0, 0.2);
  --phoenix-btn-focus-shadow-rgb: 255, 255, 255;
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: var(--ct-main-color-deep2);
  --phoenix-btn-active-border-color: rgba(0, 0, 0, 0.25);
  --phoenix-btn-active-shadow: initial;
  --phoenix-btn-disabled-color: #fff;
  --phoenix-btn-disabled-bg: var(--ct-main-color);
  --phoenix-btn-disabled-border-color: transparent;
}

.btn-ct-secondary {
  --phoenix-btn-color: #fff;
  --phoenix-btn-bg: var(--ct-secondary-color);
  --phoenix-btn-border-color: transparent;
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--ct-secondary-color-deep1);
  --phoenix-btn-hover-border-color: rgba(0, 0, 0, 0.2);
  --phoenix-btn-focus-shadow-rgb: 255, 255, 255;
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: var(--ct-secondary-color-deep2);
  --phoenix-btn-active-border-color: rgba(0, 0, 0, 0.25);
  --phoenix-btn-active-shadow: initial;
  --phoenix-btn-disabled-color: #fff;
  --phoenix-btn-disabled-bg: var(--ct-secondary-color);
  --phoenix-btn-disabled-border-color: transparent;
}

.btn-ct-phoenix-primary {
  --phoenix-btn-color: var(--ct-main-color);
  --phoenix-btn-bg: #f5f7fa;
  --phoenix-btn-border-color: #e3e6ed;
  --phoenix-btn-hover-color: var(--ct-main-color-deep1);
  --phoenix-btn-hover-bg: #e3e6ed;
  --phoenix-btn-hover-border-color: #e6e9ef;
  --phoenix-btn-focus-shadow-rgb: 201, 213, 240;
  --phoenix-btn-active-color: var(--ct-main-color);
  --phoenix-btn-active-bg: #e3e6ed;
  --phoenix-btn-active-border-color: #e6e9ef;
  --phoenix-btn-active-shadow: initial;
  --phoenix-btn-disabled-color: #000000;
  --phoenix-btn-disabled-bg: #f5f7fa;
  --phoenix-btn-disabled-border-color: #e3e6ed;
}


.bg-primary {
  --phoenix-bg-opacity: 1;
  background-color: var(--ct-main-color-background) !important;
  border: 1px solid var(--ct-main-color-background) !important;
}

.chat .chat-message .sent-message-content:not(.chat .chat-message .sent-message-content.gallery):after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -12px;
  top: auto;
  bottom: 0;
  border: 12px solid var(--phoenix-border-color-translucent);
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--ct-main-color-background) rgba(0, 0, 0, 0);
}

.btn-ct-link {
  --phoenix-btn-font-weight: 700;
  --phoenix-btn-color: var(--ct-main-color);
  --phoenix-btn-bg: transparent;
  --phoenix-btn-border-color: transparent;
  --phoenix-btn-hover-color: var(--ct-main-color-deep2);
  --phoenix-btn-hover-border-color: transparent;
  --phoenix-btn-active-color: var(--ct-main-color-deep2);
  --phoenix-btn-active-border-color: transparent;
  --phoenix-btn-disabled-color: #9fa6bc;
  --phoenix-btn-disabled-border-color: transparent;
  --phoenix-btn-box-shadow: 0 0 0 #000;
  --phoenix-btn-focus-shadow-rgb: 86, 137, 255;
  text-decoration: none;
}

.form-check-ct-main-input:checked {
    background-color: var(--ct-main-color) !important;
    border-color: var(--ct-main-color) !important;
}

.form-check-ct-secondary-input:checked {
    background-color: var(--ct-secondary-color) !important;
    border-color: var(--ct-secondary-color) !important;
}

.btn-wish.btn-wish-primary {
  color: var(--ct-main-color) !important;
  border: 1px solid var(--ct-main-color) !important;
}

.btn-wish.btn-wish-primary:hover {
  background-color: var(--ct-main-color) !important;
  color: #fff !important;
}

.btn-wish.btn-wish-primary.active {
  background-color: var(--ct-main-color) !important;
  color: var(--phoenix-white) !important;
}

.btn-outline-gray {
  color: var(--phoenix-gray-500); /* Bootstrap secondary 텍스트 색상 */
  border: 1px solid var(--phoenix-gray-500);
  background-color: transparent;
  transition: background-color 0.2s, color 0.2s;
}

.btn-outline-gray:hover {
  background-color: var(--phoenix-gray-500);
  color: #fff;
}

.btn-outline-gray:disabled,
.btn-outline-gray.disabled {
  color: #adb5bd;
  border-color: #adb5bd;
  background-color: transparent;
}


 .form-check-ct-input:checked {
  background-color: var(--ct-main-color) !important;
  border-color: var(--ct-main-color) !important;
 }

.border-ct-main {
  border: var(--phoenix-border-width) var(--phoenix-border-style) var(--ct-main-color) !important;
}

.border-ct-secondary {
  border: var(--phoenix-border-width) var(--phoenix-border-style) var(--ct-secondary-color) !important;
}

body {
  background-color: white;
}

.footer {
  padding-left: 0;
  padding-right: 0;
}

.error {
  color: red;
}

@font-face {
  font-family: "gmarket-sans-medium";
  src: url("/fonts/GmarketSansTTFMedium-96b4a5b8dfa689a32dd322793d660298.ttf")
}

@font-face {
  font-family: "gmarket-sans-bold";
  src: url("/fonts/GmarketSansTTFBold-7cf85dc71a5acc06eb84b647fcab6103.ttf")
}

/* 학교 안심 둥근미소 regular */
@font-face {
  font-family: "hakyo-regular";
  src: url("/fonts/Hakgyoansim-Dunggeunmiso-TTF-R-b9d772d7e16c9c52ecf501a32c60bc6a.ttf")
}

/* 학교 안심 둥근미소 bold */
@font-face {
  font-family: "hakyo-bold";
  src: url("/fonts/Hakgyoansim-Dunggeunmiso-TTF-B-6c3a789cec0b32bce4e6ffa1d9a93c4a.ttf")
}

/* 원모바일 POP */
@font-face {
  font-family: "one-mobile";
  src: url("/fonts/ONE-Mobile-POP-8d9cb7a3fa7fa7a3174eb7c16724c319.ttf")
}

/* 리아 산스 Regular */
@font-face {
  font-family: "ria-sans-regular";
  src: url("/fonts/RiaSans-Regular-658b0fbafbd187dd957b172b35896bd1.ttf")
}

/* 리아 산스 ExtraBold */
@font-face {
  font-family: "ria-sans-extrabold";
  src: url("/fonts/RiaSans-ExtraBold-5038631185552707080639a5d4640240.ttf")
}

/* 리아 산스 Bold */
@font-face {
  font-family: "ria-sans-bold";
  src: url("/fonts/RiaSans-Bold-440abd2ebfcf782ceac33884f334fa70.ttf")
}

/* 노토 산스 */
@font-face {
  font-family: "noto-sans";
  src: url("/fonts/NotoSansKR-VariableFont-wght-6e3addfaa6e4fa119ed006a3df59bf20.ttf")
}

.gmarket-sans-medium * {
  font-family: gmarket-sans-medium, var(--phoenix-font-sans-serif);
}

.gmarket-sans-bold * {
  font-family: gmarket-sans-bold, var(--phoenix-font-sans-serif);
}

.hakyo-regular * {
  font-family: hakyo-regular, var(--phoenix-font-sans-serif);
}

.hakyo-bold * {
  font-family: hakyo-bold, var(--phoenix-font-sans-serif);
}

.one-mobile * {
  font-family: one-mobile, var(--phoenix-font-sans-serif);
}

.ria-sans-regular * {
  font-family: ria-sans-regular, var(--phoenix-font-sans-serif);
}

.ria-sans-extrabold * {
  font-family: ria-sans-extrabold, var(--phoenix-font-sans-serif);
}

.ria-sans-bold * {
  font-family: ria-sans-bold, var(--phoenix-font-sans-serif);
}

.noto-sans * {
  font-family: noto-sans, var(--phoenix-font-sans-serif);
}







.myPage-search-box {
  position: relative;
}

.myPage-search-box .myPage-search-box-icon {
  position: absolute;
  color: var(--phoenix-quaternary-color);
  top: 50%;
  right: 1rem !important;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.search-box .search-box-right-icon {
  position: absolute;
  color: var(--phoenix-quaternary-color);
  top: 50%;
  right: 1rem !important;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.product-card-img-div {
  width: 180px;
  height: 180px;
}

@media (min-width: 768px) {
  .product-card-img-div {
    width: 210px;
    height: 210px;
  }
}

.aspect-ratio-1 {
  aspect-ratio: 1;
}
.aspect-ratio-bg-image {
  aspect-ratio: 6;
}

.product-card-container {
  min-height: 245px;
}

@media (min-width: 576px) {
  .product-card-container {
    min-height: 274px;
  }
}

/* 탭 영역 스타일 */
.ct-tab-container .nav-link {
  color: #000000; /* 기본 텍스트 색상을 검정색으로 변경 */
  border: none; /* 기본 테두리 제거 */
  border-bottom: none !important; /* 밑줄 제거 */
}

.ct-tab-container .nav-link:hover {
  color: var(--ct-main-color-deep1); /* 호버 시 텍스트 색상 (기존 유지) */
  border: none; /* 호버 시 테두리 제거 */
  /* border-bottom: none !important;  호버 시 밑줄 제거 (삭제) */
}

.ct-tab-container .nav-link.active {
  color: var(--ct-main-color); /* 활성화된 탭 텍스트 색상을 검정색으로 변경 */
  font-weight: bold; /* 활성화된 탭 텍스트 굵게 */
  border: none; /* 활성화된 탭 테두리 제거 */
  border-bottom: 2px solid var(--ct-main-color) !important; /* 활성화된 탭에 밑줄 추가 */
}

.ct-tab-container .nav-link.active:hover {
  color: var(--ct-main-color); /* 활성화된 탭 호버 시 텍스트 색상 */
  border: none; /* 활성화된 탭 호버 시 테두리 제거 */
  border-bottom: 2px solid var(--ct-main-color) !important; /* 활성화된 탭 호버 시 밑줄 유지 */
}

/* 선택되지 않은 서브 카테고리 버튼 스타일 */
.btn-outline-ct-default {
  color: var(--ct-main-color); /* 텍스트 색상 */
  border-color: var(--ct-main-color); /* 테두리 색상 */
  background-color: transparent; /* 배경색 투명 */
}

.btn-outline-ct-default:hover {
  color: #fff; /* 호버 시 텍스트 색상 */
  background-color: var(--ct-main-color); /* 호버 시 배경색 */
  border-color: var(--ct-main-color); /* 호버 시 테두리 색상 */
}

.btn-outline-ct-default:active {
  color: #fff; /* 클릭 시 텍스트 색상 */
  background-color: var(--ct-main-color-deep2); /* 클릭 시 배경색 */
  border-color: var(--ct-main-color-deep2); /* 클릭 시 테두리 색상 */
}

/* 선택된 서브 카테고리 버튼 스타일 */
.btn-ct-default {
  background-color: var(--ct-main-color) !important;
  color: #ffffff !important;
  transition: background 0.2s ease-in-out !important;
}

.btn-ct-default:hover {
  background-color: var(--ct-main-color-deep1);
  color: #ffffff;
}

.btn-ct-default:active {
  background-color: var(--ct-main-color-deep2);
  color: #ffffff;
}

.page-ct-link.active, .active>.page-ct-link {
  background-color: var(--ct-main-color) !important;
}

.page-ct-link:hover {
  z-index: 2;
  color: var(--ct-main-color) !important;
  text-decoration: none;
  background-color: var(--phoenix-pagination-hover-bg);
  border-color: var(--ct-main-color-background);
}
.page-ct-link:focus {
  z-index: 3;
  color: var(--ct-main-color) !important;
  background-color: var(--phoenix-pagination-focus-bg);
  outline: 0;
  -webkit-box-shadow: var(--ct-main-color-background);
  box-shadow: var(--ct-main-color-background);
}

/* 서브 카테고리 버튼 컨테이너 */
/* #subCategory button {
    border: 1px solid var(--ct-main-color);
    color: var(--ct-main-color);
    background-color: transparent;
}

#subCategory button.active {
    background-color: var(--ct-main-color);
    color: #fff;
    border: none;
}

#subCategory button:not(.active):hover {
    background-color: var(--ct-main-color);
    color: #fff;
}

#subCategory button:not(.active):active {
    background-color: var(--ct-main-color-deep2);
    color: #fff;
    border-color: var(--ct-main-color-deep2);
} */


/* 프로필 이미지 */
.profile-image {
  transform: translateY(50%);
}
.profile-image img {
  width: 70px;
  height: 70px;
}

@media (min-width: 576px) {
  .profile-image img {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 992px) {
  .profile-image img {
    width: 148px;
    height: 148px;
  }
}

#setting-info-profile img {
  width: 80px;
  height: 80px;
  /*transform: translateY(40%)*/
}

@media (min-width: 768px) {
  #setting-info-profile img {
    width: 100px;
    height: 100px;
    /*transform: translateY(70%)*/
  }
}

@media (min-width: 992px) {
  #setting-info-profile img {
    width: 100px;
    height: 100px;
    /*transform: translateY(80%)*/
  }
}

@media (min-width: 1200px) {
  #setting-info-profile img {
    width: 120px;
    height: 120px;
    /*transform: translateY(100%)*/
  }
}

.blur {
  filter: blur(5px);
  pointer-events: none;
}

.end-40 {
  right: 40% !important;
}

.toast.animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}