/* ==================================================
   1. 전역 변수
   ================================================== */
:root {
  /* --------------------------------------------------
     1-1. 기본 색상
     실제 색상값은 이 부분에서만 지정합니다.
     -------------------------------------------------- */

  /* 흰색과 검은색 */
  --white: #fff;
  --black: #000;
  --red:#ff0000;

  /* 남색 */
  --navy-950: #061a33;
  --navy-900: #112338;
  --navy-800: #385164;

  /* 파란색과 청록색 */
  --blue-700: #0d4e86;
  --cyan-400: #5dd4ee;
  --cyan-300: #54daf3;
  --cyan-050: #edf9fc;

  /* 회색과 회청색 */
  --gray-blue-700: #607084;
  --gray-blue-500: #8199af;
  --gray-blue-400: #aebdcc;
  --gray-blue-300: #cad5df;
  --gray-blue-200: #dbe5ed;
  --gray-blue-150: #c5d7e7;
  --gray-blue-100: #d8e7f4;
  --gray-blue-050: #f6f9fb;

  /* 서비스 전용 색상 */
  --yellow-kakao: #fee500;
  --black-kakao: #191600;

  --orange-500: #ff8a00;
  --orange-600: #e66900;

  /*
   * 투명도 색상을 만들기 위한 RGB 값
   * 예: rgb(var(--rgb-navy-950) / 12%)
   */
  --rgb-white: 255 255 255;
  --rgb-navy-950: 6 26 51;
  --rgb-navy-overlay: 4 18 38;
  --rgb-navy-900: 17 35 56;
  --rgb-orange-600: 230 105 0;

  /* --------------------------------------------------
     1-2. 역할 기반 색상
     아래 변수에는 직접 색상값을 쓰지 않고
     위의 기본 색상을 연결합니다.
     -------------------------------------------------- */

  /* 브랜드 */
  --color-primary: var(--blue-700);
  --color-secondary: var(--navy-950);
  --color-accent: var(--cyan-400);

  /* 글자 */
  --color-text: var(--navy-900);
  --color-text-muted: var(--gray-blue-700);
  --color-text-inverse: var(--white);

  /* 배경과 표면 */
  --color-background: var(--gray-blue-050);
  --color-surface: var(--white);
  --color-surface-muted: var(--gray-blue-050);

  /* 테두리 */
  --color-border: var(--gray-blue-200);
  --color-border-strong: var(--gray-blue-400);

  /* 헤더 */
  --color-header-background: rgb(var(--rgb-white) / 95%);
  --color-header-border: rgb(var(--rgb-navy-900) / 8%);

  /* 히어로 */
  --color-hero-background: var(--navy-950);
  --color-hero-text: var(--white);
  --color-hero-label: var(--cyan-300);
  --color-hero-description: var(--gray-blue-100);
  --color-hero-overlay-start: rgb(var(--rgb-navy-overlay) / 80%);
  --color-hero-overlay-middle: rgb(var(--rgb-navy-overlay) / 20%);
  --color-hero-overlay-mobile: rgb(var(--rgb-navy-overlay) / 88%);
  --color-hero-overlay-end: rgb(var(--rgb-navy-overlay) / 5%);

  /* 푸터 */
  --color-footer-background: var(--navy-950);
  --color-footer-text: var(--gray-blue-150);
  --color-footer-muted: var(--gray-blue-500);

  /* 슬라이드 */
  --color-slide-button: var(--white);
  --color-slide-button-background: rgb(var(--rgb-navy-950) / 65%);
  --color-slide-button-border: rgb(var(--rgb-white) / 45%);
  --color-slide-dot: var(--gray-blue-300);
  --color-slide-dot-active: var(--blue-700);

  /* 안내문 */
  --color-notice-background: var(--cyan-050);
  --color-notice-border: var(--cyan-400);
  --color-notice-text: var(--navy-800);

  /* 카카오톡 */
  --color-kakao-background: var(--yellow-kakao);
  --color-kakao-text: var(--black-kakao);

  /* 공유 버튼 */
  --color-share-background: var(--orange-500);
  --color-share-text: var(--white);
  --color-share-focus: var(--white);

  /* --------------------------------------------------
     1-3. 역할 기반 그림자
     -------------------------------------------------- */

  --shadow-card-rest:
    0 1px 0 rgb(var(--rgb-navy-950) / 3%);

  --shadow-card:
    0 18px 55px rgb(var(--rgb-navy-950) / 12%);

  --shadow-share:
    0 10px 28px rgb(var(--rgb-orange-600) / 35%);

  --shadow-share-hover:
    0 14px 34px rgb(var(--rgb-orange-600) / 42%);

  --shadow-share-focus:
    0 0 0 6px var(--color-share-background);
}

/* ==================================================
   2. 전체 요소 크기 계산
   ================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==================================================
   3. 문서 기본 설정
   ================================================== */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family:
    Pretendard,
    "Noto Sans KR",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background: var(--color-surface);
}

/* ==================================================
   4. 이미지
   ================================================== */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==================================================
   5. 링크와 입력 요소
   ================================================== */
a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* ==================================================
   6. 본문 바로가기
   ================================================== */
.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 9999;
  padding: 0.7rem 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
}

.skip-link:focus {
  top: 1rem;
}

/* ==================================================
   7. 키보드 포커스 표시
   ================================================== */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ==================================================
   8. 모션 접근성
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}