/*전체 기본 요소들 정의*/

:root {
  --white: #fff;
  --black: #000;
  --silver: #767676;
  --middle-grey: #4A4A4A;/*네이버 스마트스토어 사이드바 색상 #4d5159*/
  --light-grey : #8f95a0; /*네이버 스마트스토어 흐린 텍스트 글씨 */
  --dim-grey : #595C60;
  --must-red : #ff545c;


  --red: #f15746;


  --primary-color: #242424;
  --secondary-color: var(--middle-grey);
  --secondary-hover-color: #1F1F1F;
  --disabled-color: #ebebeb;
  --error-color: var(--red);
  --success-color : #42C98D;
  --info-color : #3AA8F5;
  --accent-opacity-color: var(--white);
  --menu-hover-color : #C1C1C2;
  --light-grey-text-color : #B5B5B5;
  --silver-text-color : #5C5C5C; /* 기존 979797*/
  --grey-text-color :#333333;
  --primary-button-blue-color: #007AFF;
  --primary-button-blue-hover-color: #005EC2;
  --secondary-button-grey-color: #B0B0B0;
  --secondary-button-grey-hover-color: #909090;



  /*헤더 관련*/
  --mainMenu-hover-color : #3E4145;
  --subMenu-hover-color : #C0D7F5;
  --text-hover-pink-color : #EC9481;
  --notify-red-color : #c00;
  --search-icon-color : #828C94;
  --grey-background-color :  rgba(255,255,255,0.2);
  --notification-visited : #66666a;


  --main-item-border-color : #DBDDE2;     /*메인 페이지 pannel 들의 메인 테두리*/
  --main-background-color : #EDF0F5;


  --spacing-3xs : 0.125rem; /* 2px */
  --spacing-2xs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.75rem; /* 12px */
  --spacing-base: 1rem; /* 16px */
  --spacing-md: 1.25rem; /* 20px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */
  

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-md: 1.125rem; /* 18px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */
  --text-2xl: 2rem; /* 32px */
  --text-3xl: 3rem; /* 48px */
  


  --border-thickness-base : 1px;



  --border-radius-xs: 0.25rem; /* 4px */
  --border-radius-sm: 0.5rem; /* 6px */
  --border-radius-base: 0.75rem; /* 12px */


  --line-thickness-base : 1rem;    /* 16px */
  --line-thickness-md   : 1.5rem;  /* 24px */
  --line-thickness-lg   : 1.75rem; /* 28px */



  --icon-sm: 1.5rem;  /* 24px */
  --icon-xl: 4rem;    /* 64px */

  
/*  --container-width: 64rem;*/ /* 1024px */
  --header-width : 1496px;
  --container-width: 80rem; /* 1280px */
  --small-container-width: 40rem; /* 640px */


  --text-box-height-base: 2rem; /* 32px */

  --input-text-background-color : #F8F9Fd;

  --table-header-name-color : #F8F9Fd;

  --subnavTextColor: #146FF5;

  /* 프로필에 사용하는 속성 */
  /* 예시 border: 1px solid var(--skinThumbBorder); */
  --skinThumbBorder: rgba(0, 0, 0, 0.06);
  --metaFooterBorderColor : #eaeaea;

  /* 아이콘 마우스 오버시 뒤에 보이는 동그라미 색상 */
  --color-option-bg : #404040;


  --green-button-color : #61A026;
  --green-button-hover-color : #408000;
  --orange-button-color : #EE6F40;
  --orange-button-hover-color : #C74E22;
  --blue-button-color : #0d54b5;
  --blue-button-hover-color : #0e4eac;

  --pink-button-color : #EC9481;
  --pink-button-hover-color : #C36F5E;

  --sale-price-color : #333333;
  --original-price-color : #C64111;

  --img-background-color : #F8F9Fd;

}

/*  */
/* 크기가 점차 커지는 애니메이션 효과*/
@keyframes scaleAnimation{
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}