@charset "utf-8";

/* ==========================================================================
   기가비스 디자인 토큰 — Figma Variables 추출 결과
   ──────────────────────────────────────────────────────────────────────
   - primitive : Figma "primitive" 컬렉션 (Mode 1) — 원시(raw) 토큰
   - semantic  : Figma "semantic"  컬렉션          — 의미(role) 토큰
                 · Desktop / Mobile 모드 차이가 있는 토큰은
                   미디어쿼리에서 재정의 한다
   - 이 파일 외 다른 CSS 에서는 :root 선언을 하지 않는다 (CLAUDE.md 참조)
   ========================================================================== */

/* ==========================================================================
   Pretendard 웹폰트 
   ========================================================================== */
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Thin"),
       url("../fonts/pretendard/Pretendard-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard ExtraLight"),
       url("../fonts/pretendard/Pretendard-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Light"),
       url("../fonts/pretendard/Pretendard-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Regular"),
       url("../fonts/pretendard/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Medium"),
       url("../fonts/pretendard/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard SemiBold"),
       url("../fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Bold"),
       url("../fonts/pretendard/Pretendard-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard ExtraBold"),
       url("../fonts/pretendard/Pretendard-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Black"),
       url("../fonts/pretendard/Pretendard-Black.woff2") format("woff2");
}

:root {
  /* ╔══════════════════════════════════════════════════════════════╗
     ║  PRIMITIVE ▸ COLOR                                            ║
     ╚══════════════════════════════════════════════════════════════╝ */

  /* Gray ─ 무채색 스케일 (UI 텍스트·배경 기본) */
  --color-gray-25:  #F8F8F8;
  --color-gray-50:  #F3F3F4;
  --color-gray-100: #E8E8E8;
  --color-gray-200: #D0D1D2;
  --color-gray-300: #B9BABB;
  --color-gray-400: #A1A3A5;
  --color-gray-500: #8A8C8E;
  --color-gray-600: #6E7072;
  --color-gray-700: #535455;
  --color-gray-800: #373839;
  --color-gray-900: #111111;

  /* GB Blue ─ 브랜드 컬러 스케일 */
  --color-gb-blue-25:  #FAFCFF;
  --color-gb-blue-50:  #F0F5FC;
  --color-gb-blue-100: #E6EDF6;
  --color-gb-blue-200: #CDDBEC;
  --color-gb-blue-300: #B4CAE3;
  --color-gb-blue-400: #9BB8DA;
  --color-gb-blue-500: #82A6D1;
  --color-gb-blue-600: #6994C7;
  --color-gb-blue-700: #5082BE;
  --color-gb-blue-800: #3771B5;
  --color-gb-blue-900: #1E5FAB;

  /* Red ─ 에러·위험 강조 */
  --color-red-25:  #FEF4F4;
  --color-red-50:  #FEE9EA;
  --color-red-100: #FDD3D5;
  --color-red-200: #FBA7AB;
  --color-red-300: #F97A81;
  --color-red-400: #F74E57;
  --color-red-500: #F5222D;
  --color-red-600: #C41B24;
  --color-red-700: #93141B;
  --color-red-800: #620E12;
  --color-red-900: #4A0A0E;

  /* Blue ─ 시스템·정보 컬러 */
  --color-blue-25:  #F3F8FF;
  --color-blue-50:  #E8F1FF;
  --color-blue-100: #D0E4FF;
  --color-blue-200: #A2C9FF;
  --color-blue-300: #73ADFF;
  --color-blue-400: #4592FF;
  --color-blue-500: #1677FF;
  --color-blue-600: #125FCC;
  --color-blue-700: #0D4799;
  --color-blue-800: #093066;
  --color-blue-900: #07244D;

  /* Neutral ─ 순수 무채색 (배경·라벨 비활성) */
  --color-neutral-25:  #F8F8F8;
  --color-neutral-50:  #F2F2F2;
  --color-neutral-100: #E5E5E5;
  --color-neutral-200: #D9D9D9;
  --color-neutral-300: #CCCCCC;
  --color-neutral-400: #AAAAAA;
  --color-neutral-500: #727272;
  --color-neutral-600: #555555;
  --color-neutral-700: #444444;
  --color-neutral-800: #262626;
  --color-neutral-900: #1A1A1A;
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Helper ─ primitive 내 별칭 (Figma helper 그룹) */
  --color-helper-text-red:    var(--color-red-500);
  --color-helper-text-black:  var(--color-black);
  --color-helper-line-red:    var(--color-red-500);
  --color-helper-line-black:  var(--color-neutral-900);
  --color-helper-divider-h:   var(--color-gray-300);

  /* ╔══════════════════════════════════════════════════════════════╗
     ║  PRIMITIVE ▸ ALPHA                                            ║
     ╚══════════════════════════════════════════════════════════════╝ */

  /* Black α ─ 오버레이·딤 처리 */
  --alpha-black-100: rgba(0, 0, 0, 0.1);
  --alpha-black-200: rgba(0, 0, 0, 0.2);
  --alpha-black-300: rgba(0, 0, 0, 0.3);
  --alpha-black-400: rgba(0, 0, 0, 0.4);
  --alpha-black-500: rgba(0, 0, 0, 0.5);
  --alpha-black-600: rgba(0, 0, 0, 0.6);
  --alpha-black-700: rgba(0, 0, 0, 0.7);
  --alpha-black-800: rgba(0, 0, 0, 0.8);
  --alpha-black-900: rgba(0, 0, 0, 0.9);

  /* White α ─ 다크 배경 위 반투명 요소 */
  --alpha-white-100: rgba(255, 255, 255, 0.1);
  --alpha-white-200: rgba(255, 255, 255, 0.2);
  --alpha-white-300: rgba(255, 255, 255, 0.3);
  --alpha-white-400: rgba(255, 255, 255, 0.4);
  --alpha-white-500: rgba(255, 255, 255, 0.5);
  --alpha-white-600: rgba(255, 255, 255, 0.6);
  --alpha-white-700: rgba(255, 255, 255, 0.7);
  --alpha-white-800: rgba(255, 255, 255, 0.8);
  --alpha-white-900: rgba(255, 255, 255, 0.9);

  /* ╔══════════════════════════════════════════════════════════════╗
     ║  PRIMITIVE ▸ FONT                                             ║
     ╚══════════════════════════════════════════════════════════════╝ */

  /* Family — Pretendard 단일 패밀리, 중국어만 별도 */
  --font-family-base:  "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-eng:   var(--font-family-base);
  --font-family-kor:   var(--font-family-base);
  --font-family-cn-sc: "Noto Sans SC", var(--font-family-base);
  --font-family-cn-tc: "Noto Sans TC", var(--font-family-base);

  /* Weight */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ╔══════════════════════════════════════════════════════════════╗
     ║  SEMANTIC ▸ COLOR                                             ║
     ╚══════════════════════════════════════════════════════════════╝ */

  /* Primary ─ 브랜드 시그니처 */
  --primary-gb-blue: #054DA2;

  /* Text ─ default (무채색 위계) */
  --text-highest: var(--color-gray-900); /* #111111 */
  --text-high:    var(--color-gray-700); /* #535455 */
  --text-medium:  var(--color-gray-600); /* #6E7072 */
  --text-low:     var(--color-gray-500); /* #8A8C8E */
  --text-lowest:  var(--color-gray-400); /* #A1A3A5 */
  --text-white:   var(--color-white);
  --text-black:   var(--color-black);

  /* Text ─ point (강조·링크) */
  --text-point:           var(--color-blue-700);     /* #0D4799 */
  --text-point-secondary: var(--color-blue-500);     /* #1677FF */
  --text-point-sub:       var(--color-blue-200);     /* #A2C9FF */
  --text-point-tertiary:  var(--color-gb-blue-400);  /* #9BB8DA */

  /* Text ─ status (상태) */
  --text-positive:    #317610;                  /* green/700  */
  --text-warning:     #C87012;                  /* orange/600 */
  --text-warning-2:   #FADB14;                  /* yellow/500 */
  --text-danger:      var(--color-red-500);     /* #F5222D    */
  --text-information: var(--color-blue-600);    /* #125FCC    */

  /* BG ─ default */
  --bg-white: var(--color-white);
  --bg-black: var(--color-black);

  /* BG ─ primary (Gray 기반 light / dark 4단계) */
  --bg-primary-light-1: #F8F8F8;
  --bg-primary-light-2: #F3F3F4;
  --bg-primary-light-3: #E8E8E8;
  --bg-primary-light-4: #D0D1D2;
  --bg-primary-dark-1:  #111111;
  --bg-primary-dark-2:  #373839;
  --bg-primary-dark-3:  #535455;
  --bg-primary-dark-4:  #6E7072;

  /* BG ─ secondary (GB Blue / Blue 기반) */
  --bg-secondary-light-1: #FAFCFF;
  --bg-secondary-light-2: #F0F5FC;
  --bg-secondary-light-3: #E6EDF6;
  --bg-secondary-light-4: #CDDBEC;
  --bg-secondary-dark-1:  #73ADFF;
  --bg-secondary-dark-2:  #4592FF;
  --bg-secondary-dark-3:  #1677FF;
  --bg-secondary-dark-4:  #125FCC;

  /* BG ─ neutral (순수 무채색) */
  --bg-neutral-light-1: #F8F8F8;
  --bg-neutral-light-2: #F2F2F2;
  --bg-neutral-light-3: #E5E5E5;
  --bg-neutral-light-4: #D9D9D9;
  --bg-neutral-dark-1:  #1A1A1A;
  --bg-neutral-dark-2:  #262626;
  --bg-neutral-dark-3:  #444444;
  --bg-neutral-dark-4:  #555555;

  /* BG ─ variant (파스텔 톤) */
  --bg-variant-red-1:    #FEF4F4;
  --bg-variant-red-2:    #FEE9EA;
  --bg-variant-orange-1: #FFF9F3;
  --bg-variant-orange-2: #FFF3E8;
  --bg-variant-yellow-1: #FFFDF3;
  --bg-variant-yellow-2: #FFFBE7;
  --bg-variant-green-1:  #F6FCF3;
  --bg-variant-green-2:  #EEF9E8;
  --bg-variant-blue-1:   #F3F8FF;
  --bg-variant-blue-2:   #E8F1FF;
  --bg-variant-purple-1: #F8F4FD;
  --bg-variant-purple-2: #F1EAFA;

  /* Icon */
  --ic-black:          #111111;
  --ic-white:          #FFFFFF;
  --ic-gb-blue:        #1E5FAB;
  --ic-gray-strong:    #6E7072;
  --ic-gray:           #8A8C8E;
  --ic-disabled:       #D0D1D2;
  --ic-point:          #1677FF;
  --ic-point-disabled: #9BB8DA;
  --ic-new:            #F5222D;

  /* Line ─ 디바이더·구분선 */
  --line-highest: #111111;
  --line-high:    #535455;
  --line-medium:  #D0D1D2;
  --line-low:     #E8E8E8;
  --line-white:   #FFFFFF;
  --line-blue:    #CDDBEC;
  --line-gb-blue: #6994C7;

  /* Border ─ 폼 요소 보더 */
  --bd-default:    #8A8C8E;
  --bd-focused:    #111111;
  --bd-active:     #111111;
  --bd-disabled:   #D0D1D2;
  --bd-unselected: #8A8C8E;
  --bd-point:      #6994C7;
  --bd-positive:   #429D15;
  --bd-warning:    #C87012;
  --bd-error:      #C41B24;
  --bd-info:       #125FCC;

  /* Button ─ default */
  --btn-default-primary:        #1E5FAB;
  --btn-default-secondary:      #5082BE;
  --btn-default-outline-stroke: #1E5FAB;
  --btn-default-outline-fill:   #FFFFFF;
  --btn-default-ghost-stroke:   #FFFFFF;

  /* Button ─ hover */
  --btn-hover-primary:        #111111;
  --btn-hover-secondary:      #3771B5;
  --btn-hover-outline-stroke: #1E5FAB;
  --btn-hover-outline-fill:   #F8F8F8;
  --btn-hover-ghost-fill:     #FFFFFF;

  /* Button ─ disabled */
  --btn-disabled-primary:        #F3F3F4;
  --btn-disabled-secondary:      #F8F4F0;
  --btn-disabled-outline-stroke: #D0D1D2;
  --btn-disabled-outline-fill:   #F8F8F8;
  --btn-disabled-ghost-stroke:   rgba(255, 255, 255, 0.5);

  /* Button ─ 텍스트 on 버튼 */
  --btn-text-black:              #111111;
  --btn-text-white:              #FFFFFF;
  --btn-text-gb-blue:            var(--primary-gb-blue);
  --btn-text-secondary-disabled: #9BB8DA;
  --btn-text-disabled:           #8A8C8E;

  /* Label ─ solid (꽉 찬 배경) */
  --label-solid-gold:     #6994C7;
  --label-solid-blue:     #1677FF;
  --label-solid-darkblue: #093066;
  --label-solid-gray:     #8A8C8E;
  --label-solid-red:      #F5222D;
  --label-solid-orange:   #FBA345; 
  --label-solid-yellow:   #FADB14;
  --label-solid-green:    #429D15;
  --label-solid-purple:   #722ED1;
  --label-solid-disabled: #E8E8E8; 

  /* Label ─ pastel (연한 배경) */
  --label-pastel-gold:     #E6EDF6;
  --label-pastel-blue:     #F3F8FF;
  --label-pastel-darkblue: #E8F1FF;
  --label-pastel-gray:     #E8E8E8;
  --label-pastel-red:      #FEE9EA;
  --label-pastel-orange:   #FFF3E8;
  --label-pastel-yellow:   #FFFBE7;
  --label-pastel-green:    #EEF9E8;
  --label-pastel-purple:   #F1EAFA;
  --label-pastel-disabled: #F3F3F4;

  /* Label ─ outline (테두리만) */
  --label-outline-gold:     #6994C7;
  --label-outline-blue:     #1677FF;
  --label-outline-darkblue: #093066;
  --label-outline-gray:     #8A8C8E;
  --label-outline-red:      #F5222D;
  --label-outline-orange:   #C87012;
  --label-outline-yellow:   #96830C;
  --label-outline-green:    #429D15;
  --label-outline-purple:   #722ED1;
  --label-outline-disabled: #A1A3A5;

  /* Label ─ text (텍스트 컬러) */
  --label-text-gold:     #6994C7;
  --label-text-blue:     #125FCC;
  --label-text-darkblue: #093066;
  --label-text-gray:     #535455;
  --label-text-red:      #C41B24;
  --label-text-orange:   #C87012;
  --label-text-yellow:   #96830C;
  --label-text-green:    #317610;
  --label-text-purple:   #722ED1;
  --label-text-disabled: #A1A3A5;

  /* Checkbox */
  --checkbox-selected-fill:     #6994C7;
  --checkbox-unselected-fill:   #FFFFFF;
  --checkbox-unselected-border: #A1A3A5;
  --checkbox-disabled-fill:     #E8E8E8;
  --checkbox-disabled-border:   #B9BABB;

  /* Radio button */
  --radio-selected-fill:     #6994C7;
  --radio-unselected-fill:   #FFFFFF;
  --radio-unselected-border: #A1A3A5;
  --radio-disabled-fill:     #E8E8E8;
  --radio-disabled-border:   #B9BABB;

  /* External link (외부 링크 상태) */
  --ext-link-point:    #5082BE;
  --ext-link-hover:    #125FCC;
  --ext-link-pressed:  #093066;
  --ext-link-visited:  #441C7D;
  --ext-link-disabled: #A1A3A5;

  /* ╔══════════════════════════════════════════════════════════════╗
     ║  SEMANTIC ▸ SPACING · PADDING · RADIUS · GAP                  ║
     ╚══════════════════════════════════════════════════════════════╝ */

  /* Spacing ─ 마진·간격 (요소 외부) */
  --sp-50:   2px;
  --sp-100:  4px;
  --sp-200:  8px;
  --sp-300:  12px;
  --sp-400:  16px;
  --sp-500:  20px;
  --sp-600:  24px;
  --sp-800:  32px;
  --sp-1000: 40px;
  --sp-1200: 48px;
  --sp-1500: 60px;
  --sp-1600: 64px;
  --sp-1800: 72px;
  --sp-2000: 80px;
  --sp-2400: 96px;
  --sp-3000: 120px;

  /* Padding ─ 패딩 (요소 내부) */
  --pd-50:   2px;
  --pd-100:  4px;
  --pd-200:  8px;
  --pd-300:  12px;
  --pd-400:  16px;
  --pd-500:  20px;
  --pd-600:  24px;
  --pd-800:  32px;
  --pd-1000: 40px;
  --pd-1200: 48px;
  --pd-1500: 60px;
  --pd-1600: 64px;
  --pd-1800: 72px;
  --pd-2000: 80px;

  /* Radius ─ 모서리 둥글기 */
  --rd-50:   2px;
  --rd-100:  4px;
  --rd-200:  8px;
  --rd-300:  12px;
  --rd-400:  16px;
  --rd-500:  20px;
  --rd-600:  24px;
  --rd-800:  32px;
  --rd-1000: 40px;
  --rd-full: 999px;

  /* Gap ─ 섹션 간격 (Desktop 기본) */
  --gap-2xs: 40px;
  --gap-xs:  60px;
  --gap-sm:  80px;
  --gap-md:  100px;
  --gap-lg:  120px;
  --gap-xl:  160px;
  --gap-2xl: 200px;

  /* ╔══════════════════════════════════════════════════════════════╗
     ║  LAYOUT 보조 (Figma 외 ─ 프로젝트 컨벤션)                     ║
     ╚══════════════════════════════════════════════════════════════╝ */

  --max-width:     1920px;
  --content-width: 1760px;
  --side-padding:  80px;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  --z-gnb:   100;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ==========================================================================
   모바일 (≤ 1024px) ─ Figma "Mobile" 모드 토큰 오버라이드
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    /* gap ─ 모바일 축소 값 */
    --gap-2xs: 24px;
    --gap-xs:  32px;
    --gap-sm:  48px;
    --gap-md:  64px;
    --gap-lg:  80px;
    --gap-xl:  100px;
    --gap-2xl: 120px;

    /* Label ─ Desktop/Mobile 차이값 */
    --label-solid-orange:   #FA8C16;
    --label-solid-disabled: #D0D1D2;

    /* 사이드 패딩 ─ 프로젝트 컨벤션 */
    --side-padding: 24px;
  }
}

/* ==========================================================================
   소형 모바일 (≤ 500px)
   ========================================================================== */

@media (max-width: 500px) {
  :root {
    --side-padding: 16px;
  }
}

/* ==========================================================================
   레이아웃 컨테이너
   ========================================================================== */

/* 페이지 최상위 래퍼 ─ max-width 지정하지 않음 (뷰포트 100%)
   overflow-x: clip ─ 가로 스크롤 차단 + 스크롤 컨테이너 미생성
   (hidden 사용 시 자식의 position:sticky 가 viewport 기준으로 동작하지 않음) */
.wrapper {
  width: 100%;
  overflow-x: clip;
}

/* 섹션 내부 콘텐츠 폭 제한 */
.inner {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.inner.w1424 {
  width: calc(100% - 40rem);
  max-width: 1424rem;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 600px) {
   .inner.w1424 {
      max-width: 100%;
   }
}

/* ==========================================================================
   접근성 유틸리티
   ========================================================================== */

/* 스크린 리더 전용 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}