/*피그마 스타일 적용, 전역 인터랙션 변수 정의*/

:root{

  /* 1. Typography */
    /* font-family */
    --font-base:'SpoqaHanSansNeo', sans-serif;

  /* font-weight */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

  /* font-size 가변 타이포 방식 clamp(최소 크기, 가변 크기, 최대 크기) */

  /*font size 고정*/
    --fs-xs: 1.2rem;
    --fs-sm: 1.4rem;
    --fs-md: 1.6rem;
    --fs-lg: 1.8rem;

  /* 반응형 */
    --fs-xl: clamp(1.8rem, 4vw, 2.2rem);
    --fs-2xl: clamp(2.2rem, 5vw, 2.4rem);
    --fs-3xl: clamp(2.8rem, 6vw, 3.6rem);
    --fs-4xl: clamp(3.2rem, 8vw, 4.8rem);

  /* 2. colors */

  /* brand colors */
    --color-primary: #21BF48; 
    --color-primary-hover: #1EAB40; /* 인터랙션 변수(마우스) */
    --color-primary-active: #178A33; /* (클릭) */

    /*text colors*/
    --color-text-primary:#000000;
    --color-text-secondary: #333333; /* 일반적인 본문 및 링크 텍스트용 */
    --color-text-inverse: #FFFFFF; /*초록색 배경용*/
    --color-text-accent:#FF0000; /*강조*/
    --color-text-muted:#767676; /*보조 설명*/
    
  /* background colors */
    --color-bg-primary: #FFFFFF; 
    --color-bg-secondary: #F2F2F2; /*푸터 및 구분 섹션 배경*/
    --color-bg-disabled: #E0E0E0; /*비활성화 배경*/
    --color-bg-overlay:rgba(0, 0, 0, 0.6); /*뒷배경*/

    /*border colors*/
    --color-border-primary: #C4C4C4; /*보더*/
    --color-border-light: #E0E0E0;

    /* State Colors */
    --color-success: #21BF48;
    --color-error: #EB5757;

    /*dark*/
    --color-dark: #767676;
    --color-dark-hover: #616161;  /* 조금 더 어둡게 */
    --color-dark-active: #4B4B4B; /* 확실히 어둡게 (클릭 효과) */

  /* 3. layout & spacing */
  /* Container */
    --container-width: 1280px;
    --container-padding: var(--space-container);
    --banner-max-width: clamp(1280px, 100vw, 1680px);

    --space-section: clamp(4.0rem, 5vw, 8.0rem);
    --space-container: clamp(2.0rem, 5vw, 2.2rem);

  /* Spacing System */
    --space-3xs: 0.4rem;
    --space-2xs: 0.8rem;
    --space-xs: 1.2rem; 
    --space-sm: 1.7rem;
    --space-md: clamp(2.0rem, 2.5vw, 3.2rem); /*섹션 내 요소*/
    --space-lg: clamp(4.0rem, 5vw, 8.0rem); /*섹션 사이 간격*/
    --space-xl: clamp(8.0rem, 8vw, 12.0rem);
    --space-xxl: clamp(12.0rem, 10vw, 16.0rem);

    /* Border radius */
    --radius-xs: 0.4rem;
    --radius-sm: 0.5rem; /*버튼 및 입력창*/
    --radius-md: 1.0rem; 
    --radius-lg: 1.6rem; /*버튼*/
    --radius-xl: 1.8rem; /*컨테이너, 상품 카드*/
    --radius-2xl: 3.0rem; /*모달 및 배너*/
    --radius-full: 50%;    /* 원형 */

  /* 4. Icon */
  /* Icon 단축어 */
    --icon-404: url('../../images/icon-404.svg');
    --icon-fb: url('../../images/icon-fb.svg');
    --icon-insta: url('../../images/icon-insta.svg');
    --icon-yt: url('../../images/icon-yt.svg');
    --logo-hodu: url('../../images/Logo-hodu.svg');

    --icon-search: url('../../images/icon-search.svg');
    --icon-cart: url('../../images/icon-shopping-cart.svg');
    --icon-cart-2: url('../../images/icon-shopping-cart-2.svg');
    --icon-bag: url('../../images/icon-shopping-bag.svg');

    --icon-check: url('../../images/icon-check.svg');
    --icon-check-on: url('../../images/icon-check-on.svg');
    --icon-check-off: url('../../images/icon-check-off.svg');
    --icon-check-box: url('../../images/check-box.svg');
    --icon-check-fill: url('../../images/check-fill-box.svg');

    --icon-down-arrow: url('../../images/icon-down-arrow.svg');
    --icon-up-arrow: url('../../images/icon-up-arrow.svg');
    --icon-right-arrow: url('../../images/icon-right-arrow.svg');
    --icon-swiper-1: url('../../images/icon-swiper-1.svg');
    --icon-swiper-1_hover: url('../../images/icon-swiper-1_hover.svg');
    --icon-swiper-1_active: url('../../images/icon-swiper-1_active.svg');
    --icon-swiper-2: url('../../images/icon-swiper-2.svg');
    --icon-swiper-2_hover: url('../../images/icon-swiper-2_hover.svg');
    --icon-swiper-2_active: url('../../images/icon-swiper-2_active.svg');

    --icon-swiper-prev: var(--icon-swiper-1); /* 별칭 생성 */
    --icon-swiper-next: var(--icon-swiper-2);

    --icon-user: url('../../images/icon-user.svg');
    --icon-user-2: url('../../images/icon-user-2.svg');
    --icon-delete: url('../../images/icon-delete.svg');
    --icon-plus: url('../../images/icon-plus.svg');
    --icon-plus-line: url('/open-market-project/assets/images/icon-plus-line.svg');
    --icon-plus-line_disabled: url('/open-market-project/assets/images/icon-plus-line_disabled.svg');
    --icon-minus-line: url('/open-market-project/assets/images/icon-minus-line.svg');
    --icon-minus-line_disabled: url('/open-market-project/assets/images/icon-minus-line_disabled.svg');
    --icon-img: url('../../images/icon-img.svg');

  /* Icon-size 가변 타이포 방식*/
    --icon-sm: clamp(1.4rem, 2vw, 1.6rem); 
    --icon-md: clamp(2.0rem, 4vw, 2.4rem); /* HODU 메인 아이콘 규격 */
    --icon-lg: clamp(2.4rem, 5vw, 3.2rem);

  /* Icon filter */
    --icon-filter-hover: brightness(0.8); /* 마우스 */
    --icon-filter-active: brightness(0.6); /* 클릭 */
    --icon-filter-inverse: brightness(0) invert(1); /* 어두운 배경용 */

  /* Icon Spacing */
    --icon-gap-sm: var(--space-2xs);
    --icon-gap-md: var(--space-xs);

  /* 5. Button */
  /* button text size */
    --btn-fs: clamp(1.4rem, 2vw, 1.8rem); 

  /* button padding */
    --btn-padding-v: 1.2rem;
    --btn-padding-tab-t: 1.8rem;  
    --btn-padding-tab-b: 2.5rem;  
    --btn-padding-h: clamp(1.6rem, 5vw, 4.0rem);

    --btn-height-sm: 4.0rem;
    --btn-height-md: 5.4rem;
    --btn-height-lg: 6.0rem;

  /* button size */
    --btn-height-sm: 5.4rem;
    --btn-height-md: 6.0rem;
    --btn-min-width: clamp(8.0rem, 15vw, 12.0rem);
    --btn-height-main : clamp(6.0rem, 8vw, 8.0rem); /*강조되는 메인 버튼 사용*/
    --btn-height: clamp(4.0rem, 6vw, 6.0rem); /*호두 기준*/

  /* button radius */
    --btn-radius: var(--radius-md);
  
  /* 6 . product */
    --product-img-size: 60rem; /*레이아웃 기준 사이즈*/

  /* 7 . form */
  /* Form Validation Typography */
    --form-fs-msg: 1.4rem; 
    --form-fs-btn: 1.4rem;
    
  /* Form Spacing */
    --form-msg-gap: 0.8rem;
    --form-gap: 1.5rem;
    --form-logo-padding-v: 4.0rem;
    --form-input-height: 5.4rem;
    --form-input-padding-x: 1.5rem;
    --form-input-gap: 3.0rem;
    --form-box-padding: 3.5rem;      
    --form-title-margin: 7.0rem;  
    
  /* Form Icons Filter */
    --form-filter-success: invert(48%) sepia(87%) saturate(418%) hue-rotate(84deg) brightness(95%) contrast(88%);
    --form-filter-disabled: grayscale(100%) opacity(0.2);

    --form-logo-width: 23.0rem; 

  /* 8 . Password Field */
    --form-pw-dots-fs: 2.4rem; /* 비밀번호 점 크기 */
    --form-pw-dots-ls: 0.4rem; /* 비밀번호 점 간격 */

  /* 9. Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;

  /* 10. Z-Index (레이어 순서 관리) */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;

  /* 11. Legacy (하위 호환성 유지) */
    --space-form: var(--form-gap);
    --form-space-msg: var(--form-msg-gap);

  /* 12 . Detail Page Specific */
    --detail-page-top: 8.0rem;
    --detail-section-gap: 14.0rem;
    --detail-image-gap: 5.0rem;
    --detail-order-top: 13.8rem;
    --detail-amount-height: 11.0rem;
    --detail-btn-gap: 1.4rem;

  /* 13 . footer specific */
    --footer-top-margin: 2.1rem;
    --footer-link-gap: 1.4rem;
    --footer-divider-margin: 3.0rem;
    --footer-info-gap: 1.0rem;

  /* 14 . Modal Specific */
    --modal-width: 36.0rem;
    --modal-max-height: 20.0rem;
    --modal-padding: 5.0rem 4.0rem 7.5rem;
    --modal-btn-width: 10.0rem;

 /* 15 . GNB Specific */
    --gnb-seller-btn-padding: 1.1rem 2.0rem;
    --gnb-dropdown-width: 13.0rem;
    --gnb-dropdown-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    --gnb-menu-item-padding: 1.0rem;

/* 16 . main specific */
    --main-grid-gap-y: 7.8rem; 
    --main-card-max-width: 38.0rem; 
    --main-section-padding: 8.0rem;
}