/**
 * CSS Variables (Custom Properties)
 * 색상, 폰트, 레이아웃 변수 정의
 */

:root {
  /* ==========================================================================
     배경 색상
     ========================================================================== */
  --bg-white: #fff;
  --bg-black: #1C1E20;
  --bg-darkgray-01: #393d41;
  --bg-darkgray-02: #5d6369;
  --bg-lightgray-01: #F9FAFB;
  --bg-lightgray-02: #EDF1F6;
  --bg-hr: #3e4246;
  --bg-hr-light: #F2EAE3;
  --bg-button: #e6e6e6;
  --bg-pre: #EDF1F6;
  --bg-ins: #fff9c0;

  /* Header 전용 색상 */
  --bg-nav-primary: #111d4a;
  --bg-submenu: #1b263b;
  --color-menu-active: #ffb703;
  --color-username: #e07a00;

  /* Front 페이지 전용 색상 */
  --color-white: white;
  --color-dark-blue: #001524;
  --color-accent-orange: #e07a00;
  --shadow-hero-glow: rgba(0, 191, 255, 0.7);
  --shadow-hero-glow-soft: rgba(0, 191, 255, 0.6);
  --shadow-button: #e0afa0;
  --bg-button-primary: #bf5863;
  --border-gallery: #f1f1f1;

  /* ==========================================================================
     텍스트 색상
     ========================================================================== */
  --color-primary: #003876;
  --color-secondary: #F2D4A0;
  --color-text-light-01: #111;
  --color-text-light-02: #E8E4DF;
  --color-text-light-03: #BCBAB6;
  --color-text-primary: #111;
  --color-text-secondary: #393A3D;
  --color-text-screen: #21759b;
  --color-text-input: #393A3D;
  --color-text-input-focus: #111;
  --color-link: #003876;
  --color-link-visited: purple;
  --color-link-hover: midnightblue;

  /* ==========================================================================
     테두리 색상
     ========================================================================== */
  --color-border-input: #ccc;
  --color-border-abbr: #666;

  /* ==========================================================================
     폰트 패밀리
     ========================================================================== */
  --font-main: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Neo Gothic', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-open-sans: 'Open Sans', sans-serif;
  --font-code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  --font-pre: "Courier 10 Pitch", Courier, monospace;

  /* ==========================================================================
     폰트 라인 높이
     ========================================================================== */
  --font-line-height-head: 1.25;
  --font-line-height-body: 1.6;
  --font-line-height-pre: 1.5;

  /* ==========================================================================
     Border Radius
     ========================================================================== */
  --radius-small: 3px;
  --radius-medium: 5px;
  --radius-large: 10px;
  --radius-xlarge: 20px;

  /* ==========================================================================
     레이아웃 너비
     ========================================================================== */
  --full-width: 100%;
  --content-width: 95%;
  --container-width: 1350px;        /* header 등 전체 컨테이너용 */
  --content-max-width: calc(1350px * 0.9);      /* 콘텐츠 영역 최대 너비 (1350의 80% = 1080px) */
}

/* ==========================================================================
   반응형: 레이아웃 너비 조정
   ========================================================================== */

/* 1400px 이하: 95% */
@media screen and (max-width: 1400px) {
  :root {
    --content-width: 95%;
    --content-max-width: 1350px;  /* 작은 화면에서는 전체 너비 사용 */
  }
}
