/**
 * SinabroG Landing Page - Root CSS Variables
 * Based on 발주고 Design System
 */

/* ===== CSS Variables ===== */
:root {
  /* ===== Grayscale ===== */
  --grayscale-white: #ffffff;
  --grayscale-50: #f4f4f4;
  --grayscale-100: #d9d9d9;
  --grayscale-200: #b5b5b5;
  --grayscale-300: #949494;
  --grayscale-400: #7f7f7f;
  --grayscale-500: #6f6f6f;
  --grayscale-600: #636363;
  --grayscale-700: #595959;
  --grayscale-800: #505050;
  --grayscale-900: #3d3d3d;
  --grayscale-dark: #2a2a2a;
  --grayscale-black: #000000;

  /* RGB Versions (for transparency) */
  --grayscale-50-rgb: 240, 241, 242;
  --grayscale-100-rgb: 217, 217, 217;

  /* ===== SinabroG Primary (발주고 블루 기반) ===== */
  --primary-50: #dfecfe;
  --primary-100: #d4e5fe;
  --primary-200: #c9dffe;
  --primary-300: #a9cbfd;
  --primary-400: #69a4fc;
  --primary-500: #287dfa;   /* Main Primary */
  --primary-600: #2471e1;
  --primary-700: #1e5ebc;   /* Primary Dark */
  --primary-800: #184b96;
  --primary-900: #143d7b;

  /* RGB Versions */
  --primary-50-rgb: 223, 236, 254;
  --primary-500-rgb: 40, 125, 250;
  --primary-600-rgb: 36, 113, 225;
  --primary-700-rgb: 30, 94, 188;

  /* ===== System Colors ===== */
  /* Yellow */
  --system-yellow-50: #fff6db;
  --system-yellow-500: #ffc211;
  --system-yellow-600: #e6af0f;

  /* Orange */
  --system-orange-50: #fef2df;
  --system-orange-500: #faa528;
  --system-orange-600: #ff9524;

  /* Red (Warning/Error) */
  --system-red-50: #f9e1d9;
  --system-red-500: #d93400;
  --system-red-600: #c32f00;

  /* Green (Success) */
  --system-green-50: #c8f8ea;
  --system-green-500: #16d070;
  --system-green-600: #14bb65;

  /* ===== Accent (SinabroG Exclusive) ===== */
  --accent: #ff9524;  /* Orange accent */
  --accent-light: #fef2df;

  /* ===== Alias Variables (호환성) ===== */
  --white: var(--grayscale-white);
  --gray-50: var(--grayscale-50);
  --gray-100: var(--grayscale-100);
  --gray-200: var(--grayscale-200);
  --gray-300: var(--grayscale-300);
  --gray-400: var(--grayscale-400);
  
  --primary: var(--primary-500);
  --primary-dark: var(--primary-700);
  --primary-light: var(--primary-50);
  
  --dark: var(--grayscale-dark);
  --text: var(--grayscale-800);
  --text-light: var(--grayscale-500);

  /* ===== Font Sizes ===== */
  --font-size-xxxs: 0.5625rem;  /* 9px */
  --font-size-xxs: 0.625rem;    /* 10px */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-md: 1rem;         /* 16px */
  --font-size-dl: 1.25rem;      /* 20px */
  --font-size-lg: 1.5rem;       /* 24px */
  --font-size-xl: 1.75rem;      /* 28px */
  --font-size-xxl: 2rem;        /* 32px */

  /* ===== Spacing ===== */
  --s-05: 0.125rem;   /* 2px */
  --s-10: 0.25rem;    /* 4px */
  --s-20: 0.5rem;     /* 8px */
  --s-25: 0.625rem;   /* 10px */
  --s-30: 0.75rem;    /* 12px */
  --s-35: 0.875rem;   /* 14px */
  --s-40: 1rem;       /* 16px */
  --s-50: 1.25rem;    /* 20px */
  --s-60: 1.5rem;     /* 24px */
  --s-65: 2rem;       /* 32px */
  --s-70: 2.25rem;    /* 36px */
  --s-80: 2.5rem;     /* 40px */

  /* Section Padding */
  --section-padding-y: 7.5rem;  /* 120px */
  --fullwidth-layout-padding: 200px;

  /* iOS Safe Area */
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);

  /* ===== Navigation ===== */
  --nav-height: 74px;

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ===== Transitions ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.3s cubic-bezier(0.19, 1, 0.22, 1);

  /* ===== Container ===== */
  --container-max-width: 1200px;
  --container-padding: 1.5rem;
}

/* ===== Mobile (480px and below) ===== */
@media screen and (max-width: 480px) {
  :root {
    /* Font Sizes - Mobile */
    --font-size-xxxs: 0.5rem;     /* 8px */
    --font-size-xxs: 0.5625rem;   /* 9px */
    --font-size-xs: 0.625rem;     /* 10px */
    --font-size-sm: 0.75rem;      /* 12px */
    --font-size-md: 0.875rem;     /* 14px */
    --font-size-dl: 1rem;         /* 16px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-xxl: 1.75rem;     /* 28px */

    /* Spacing - Mobile */
    --s-05: 0.1125rem;  /* 1px */
    --s-10: 0.125rem;   /* 2px */
    --s-20: 0.25rem;    /* 4px */
    --s-25: 0.375rem;   /* 6px */
    --s-30: 0.5rem;     /* 8px */
    --s-35: 0.625rem;   /* 10px */
    --s-40: 0.75rem;    /* 12px */
    --s-50: 0.875rem;   /* 14px */
    --s-60: 1rem;       /* 16px */
    --s-65: 1.25rem;    /* 20px */
    --s-70: 1.5rem;     /* 24px */
    --s-80: 2rem;       /* 32px */

    /* Section Padding - Mobile */
    --section-padding-y: 4rem;
    --container-padding: 1rem;
  }
}

/* ===== Reset & Base Styles ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:
    Freesentation,
    "Pretendard Variable",
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    Roboto,
    "Helvetica Neue",
    "Segoe UI",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    sans-serif;
  letter-spacing: -0.02em;
  font-size: 17px;
  line-height: 1.5;
  color: #232323;
  background-color: var(--grayscale-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-base);
}

a:focus,
a:hover {
  text-decoration: none;
  color: #343434;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

:focus {
  outline-color: var(--primary-500);
}

/* ===== Typography Classes ===== */
/* Headings */
.heading_XXL { font-size: var(--font-size-xxl); line-height: 130%; }
.heading_XL { font-size: var(--font-size-xl); line-height: 130%; }
.heading_L { font-size: var(--font-size-lg); line-height: 130%; }
.heading_M { font-size: var(--font-size-dl); line-height: 130%; }
.heading_S { font-size: var(--font-size-md); line-height: 130%; }

/* Body */
.body_XXL { font-size: var(--font-size-lg); line-height: 150%; }
.body_XL { font-size: var(--font-size-dl); line-height: 150%; }
.body_L { font-size: var(--font-size-md); line-height: 150%; }
.body_M { font-size: var(--font-size-sm); line-height: 150%; }
.body_S { font-size: var(--font-size-xs); line-height: 150%; }

/* Font Weights */
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.exbold { font-weight: 800; }

/* ===== Layout Utilities ===== */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--section-padding-y) 0;
}

/* ===== Button Styles ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-35) var(--s-60);
  font-size: var(--font-size-md);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: var(--transition-bounce);
}

.btn-primary {
  background-color: var(--primary-500);
  color: var(--grayscale-white);
}

.btn-primary:hover {
  background-color: var(--primary-600);
  color: var(--grayscale-white);
}

.btn-secondary {
  background-color: var(--grayscale-50);
  color: var(--grayscale-800);
}

.btn-secondary:hover {
  background-color: var(--grayscale-100);
}

.btn-accent {
  background-color: var(--accent);
  color: var(--grayscale-white);
}

.btn-accent:hover {
  background-color: var(--system-orange-600);
  color: var(--grayscale-white);
}

/* Click Animation */
.click_Anm {
  transition: var(--transition-bounce);
}

.click_Anm:active {
  transform: scale(0.97);
}

/* ===== Navigation Styles ===== */
/* Default: Transparent state (before scroll) */
#top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: transparent;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state - Glassmorphism */
#top-nav.scrolled {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  position: relative;
}

.nav-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: var(--transition-base);
}

/* 레거시: .scrolled만 있을 때 (테마 클래스 없는 페이지용) */
#top-nav.scrolled:not(.header-dark):not(.header-light) .nav-logo img {
  filter: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--s-60);
}

.nav-link {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: var(--transition-base);
}

.nav-link:hover {
  color: var(--grayscale-white);
}

/* 데스크탑 전용: scrolled nav-link 색상 */
@media screen and (min-width: 769px) {
  #top-nav.scrolled .nav-link {
    color: var(--dark);
  }

  #top-nav.scrolled .nav-link:hover {
    color: var(--primary-500);
  }
}

.nav-cta {
  padding: var(--s-25) var(--s-50);
  background-color: var(--primary-500);
  color: var(--grayscale-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: var(--transition-base);
}

.nav-cta:hover {
  background-color: var(--primary-600);
  color: var(--grayscale-white);
}

/* Mobile Menu Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--grayscale-white);
  transition: var(--transition-base);
}

#top-nav.scrolled .nav-toggle span {
  background-color: var(--grayscale-800);
}

/* ===== Header Theme Modes ===== */
/* Dark Mode: 투명 배경, 흰색 요소 (다크 배경 섹션용) */
#top-nav.header-dark {
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

#top-nav.header-dark .nav-logo img {
  filter: brightness(0) invert(1);
}

#top-nav.header-dark .nav-toggle span {
  background-color: var(--grayscale-white);
}

/* Light Mode: 글래스모피즘 배경, 검정 요소 (라이트 배경 섹션용) */
#top-nav.header-light {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.85) 100%
  );
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#top-nav.header-light .nav-logo img {
  filter: none;
}

#top-nav.header-light .nav-toggle span {
  background-color: var(--grayscale-800);
}

/* 데스크탑 전용: nav-link 테마 색상 (모바일 드롭다운에 영향 X) */
@media screen and (min-width: 769px) {
  #top-nav.header-dark .nav-link {
    color: rgba(255, 255, 255, 0.85);
  }

  #top-nav.header-dark .nav-link:hover {
    color: var(--grayscale-white);
  }

  #top-nav.header-light .nav-link {
    color: var(--dark);
  }

  #top-nav.header-light .nav-link:hover {
    color: var(--primary-500);
  }
}

/* Scrolled + Theme: 배경 강화 */
#top-nav.scrolled.header-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#top-nav.scrolled.header-light {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.95) 100%
  );
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 드롭다운 토글 - 데스크탑에서 숨김 */
.nav-dropdown-toggle {
  display: none;
}

@media screen and (max-width: 768px) {
  /* 햄버거 버튼 숨기기 */
  .nav-toggle {
    display: none;
  }

  /* 드롭다운 토글 버튼 표시 - 우측 배치 */
  .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: static;
    margin-left: auto;
    margin-right: 12px;
  }

  /* 테마별 드롭다운 토글 스타일 */
  #top-nav.header-dark .nav-dropdown-toggle {
    color: rgba(255, 255, 255, 0.9);
  }

  #top-nav.header-light .nav-dropdown-toggle {
    color: var(--grayscale-700);
  }

  #top-nav.header-dark .nav-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  #top-nav.header-light .nav-dropdown-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  /* 폴백: .scrolled만 있을 때 (레거시 호환) */
  #top-nav.scrolled .nav-dropdown-toggle {
    color: var(--grayscale-700);
  }

  #top-nav.scrolled .nav-dropdown-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  .nav-dropdown-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
  }

  .nav-dropdown-toggle.active .nav-dropdown-arrow {
    transform: rotate(180deg);
  }

  /* 데모 신청 버튼 - 모바일에서 크게 */
  .nav-cta {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }

  /* 드롭다운 메뉴 - 우측 배치 */
  .nav-menu {
    position: absolute;
    top: 100%;
    right: 12px;
    left: auto;
    transform: translateY(-10px);
    background: rgba(30, 20, 20, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-width: 160px;
    padding: 8px 0;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu .nav-link {
    display: block;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
  }

  .nav-menu .nav-link:last-of-type {
    border-bottom: none;
  }

  /* 드롭다운 메뉴 링크: 항상 흰색 (높은 우선순위) */
  #top-nav .nav-menu .nav-link {
    color: rgba(255, 255, 255, 0.9);
  }

  #top-nav .nav-menu .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }

  #top-nav .nav-menu .nav-link.active {
    color: #fff;
    font-weight: 700;
  }

  .nav-menu .nav-cta {
    margin: 8px 12px 8px;
    text-align: center;
    justify-content: center;
    padding: 12px 16px !important;
  }
}

/* ===== Utility Classes ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 모바일 전용 줄바꿈 */
.mobile-br { display: none; }
@media screen and (max-width: 768px) {
  .mobile-br { display: block; }
}

.text-primary { color: var(--primary-500); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--grayscale-500); }

.bg-white { background-color: var(--grayscale-white); }
.bg-light { background-color: var(--grayscale-50); }
.bg-primary { background-color: var(--primary-500); }
.bg-primary-light { background-color: var(--primary-50); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}