:root {
    --custom-border-strong: #7f858a; /* 라이트 모드에서 선명한 보더 */
}
:root {
  --chip-glow: 0 0 14px rgba(139, 92, 246, 0.12);
  --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.16), 0 0 12px rgba(0, 255, 225, 0.06);
  --spacing-lg: 1rem;
  --spacing-md: 0.75rem;
  --spacing-sm: 0.5rem;
  --spacing-xl: 1.5rem;
  --spacing-xs: 0.25rem;
  --color-scrim: rgba(0, 0, 0, 0.45);
  --section-gap: clamp(2rem, 5vw, 6rem);
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 4rem;


  --font-size-lg: 1.25rem;
  --font-size-md: 1.125rem;
  --font-size-sm: 0.875rem;
  --font-size-xl: 1.5rem;
  --font-size-xs: 0.75rem;
  --color-neutral: #b0bec9;
  --color-outline: rgba(0, 255, 225, 0.75);


  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-base: 1rem;
  /* black */
  /*--color-border: rgba(139, 92, 246, 0.18);*/
  /*--color-overlay: rgba(7, 7, 18, 0.6);*/
  /*--color-surface: #070712;*/
  /*--shadow-level-1: 0 0 8px rgba(0, 255, 200, 0.15);*/
  /*--shadow-level-2: 0 0 18px rgba(0, 255, 200, 0.25);*/
  /*--shadow-level-3: 0 0 36px rgba(0, 255, 200, 0.35);*/
  /*--color-on-surface: #f3f7fb;*/
  /*--color-surface-elevated: #0f0f16;*/
  /*--color-on-surface-secondary: #9ca8b6;*/
  /* black end */
  /* white */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-overlay: rgba(255, 255, 255, 0.7);
  --color-surface: #ffffff;
  --shadow-level-1: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-level-2: 0 6px 16px rgba(0, 0, 0, 0.12);
  --shadow-level-3: 0 12px 28px rgba(0, 0, 0, 0.16);
  --color-on-surface: #1f2937;
  --color-surface-elevated: #f5f6f8;
  --color-on-surface-secondary: #6b7280;
    /* white end */
  --color-backplate: linear-gradient(180deg, rgba(139, 92, 246, 0.06), rgba(6, 182, 212, 0.03));
  --color-secondary: #06b6d4;
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  --border-radius-sm: 4px;
  --border-radius-xl: 16px;
  --button-elevation: var(--shadow-level-1);


  --disabled-opacity: 0.5;
  --font-family-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-weight-bold: 700;
  --color-neutral-700: #8f9aa5;

  --content-max-width: 78rem;
  --line-height-loose: 1.5;
  --line-height-solid: 1.2;
  --line-height-tight: 1.05;
  --border-radius-full: 9999px;
  --border-radius-none: 0px;
  --font-weight-medium: 500;
  --color-secondary-700: #05a3b8;
  --font-family-heading: "Orbitron", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-weight-regular: 400;
  --letter-spacing-wide: 0.02em;
  --dl-layout-size-large: 144px;
  --dl-layout-size-small: 48px;
  --dl-layout-space-unit: 16px;
  --letter-spacing-tight: -0.01em;
  --dl-layout-size-medium: 96px;
  --dl-layout-size-xlarge: 192px;
  --dl-layout-size-xsmall: 16px;
  --letter-spacing-normal: 0em;

  --dl-color-theme-accent1: #FFFFFF;
  --dl-color-theme-accent2: #F5D1B0;
  --dl-layout-radius-round: 50%;
  --dl-layout-size-xxlarge: 288px;
  --animation-curve-primary: cubic-bezier(0.25, 1, 0.3, 1);
  --animation-duration-fast: 110ms;
  --animation-duration-slow: 260ms;
  --dl-color-theme-primary1: #BF4408;
  --dl-color-theme-primary2: #E65103;
  --dl-layout-size-maxwidth: 1400px;
  --dl-layout-radius-radius2: 2px;
  --dl-layout-radius-radius4: 4px;
  --dl-layout-radius-radius8: 8px;
  --dl-layout-space-halfunit: 8px;
  --dl-layout-space-sixunits: 96px;
  --dl-layout-space-twounits: 32px;
  --accessible-contrast-black: #070712;
  --accessible-contrast-white: #f3f7fb;
  --dl-color-theme-secondary1: #FFFFFF;
  --dl-color-theme-secondary2: #FBF1EB;
  --dl-layout-space-fiveunits: 80px;
  --dl-layout-space-fourunits: 64px;

  --dl-layout-space-threeunits: 48px;
  --animation-duration-standard: 180ms;
  --dl-color-theme-neutral-dark: #191818;
  --dl-layout-radius-cardradius: 8px;
  --dl-color-theme-neutral-light: #FBFAF9;
  --dl-layout-radius-imageradius: 8px;
  --dl-layout-radius-inputradius: 24px;
  --dl-layout-radius-buttonradius: 24px;
  --dl-layout-space-oneandhalfunits: 24px;
}
/* 기본 상태 (라이트 모드 설정) */

[data-bs-theme="light"] #header {
    background-color: #ffffff; /* 순백색 배경 */
    border-bottom: 1px solid #eeeeee; /* 아주 연한 회색 구분선 */
}

/* 로고 이미지 (이미지가 흰색 계열일 경우 대비하여 원복) */
[data-bs-theme="light"] .logo img,
[data-bs-theme="light"] .mb-logo {
    filter: none; /* 반전 효과 제거하여 원래 색상 노출 */
}

/* PC 내비게이션 텍스트 */
[data-bs-theme="light"] .gnb-trigger {
    color: #212529 !important; /* 부트스트랩 기본 다크 그레이 */
}

/* 서브 메뉴(Depth 2) 영역 */
[data-bs-theme="light"] .depth2-wrap {
    background-color: #f8f9fa; /* 매우 연한 회색 배경으로 입체감 부여 */
    border-top: 1px solid #dee2e6;
}

[data-bs-theme="light"] .sub-title-area h3 {
    color: #000000; /* 완전한 블랙 */
}

[data-bs-theme="light"] .sub-menu a {
    color: #495057; /* 중간 톤의 그레이 */
}

[data-bs-theme="light"] .sub-menu a:hover {
    color: #000000; /* 호버 시 블랙으로 강조 */
    font-weight: 600;
}

/* 모바일 토글 버튼 (SVG 선 색상) */
[data-bs-theme="light"] .mobile-toggle svg path {
    stroke: #212529; /* 흰색 선을 다시 검은색으로 */
}

/* 모바일 내비게이션 패널 */
[data-bs-theme="light"] .mobile-nav {
    background-color: #ffffff;
}

[data-bs-theme="light"] .mb-panel-header {
    border-bottom: 1px solid #eeeeee;
}

[data-bs-theme="light"] .mb-title {
    color: #212529;
}

[data-bs-theme="light"] .mb-depth2 {
    background-color: #f1f3f5; /* 메뉴 펼침 영역 구분 */
}

[data-bs-theme="light"] .mb-depth2 a {
    color: #495057;
}

/* 모바일 닫기 버튼 (SVG) */
[data-bs-theme="light"] .close-btn svg path {
    stroke: #212529;
}

/* 오버레이 배경 */
[data-bs-theme="light"] .overlay {
    background-color: rgba(255, 255, 255, 0.5); /* 밝은 반투명 배경 */
}
.navigation-container {
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  position: fixed;

  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 0 40px color-mix(in srgb, var(--color-primary) 5%, transparent);
  transition: transform var(--animation-duration-standard) var(--animation-curve-primary), box-shadow var(--animation-duration-standard) var(--animation-curve-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);

  /* black */
  /*background: color-mix(in srgb, var(--color-surface) 85%, transparent);*/
  /*backdrop-filter: blur(16px);*/
  /* black end */
  /* white */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  /* white end */
}