/* =================================================================
   Base CSS - 모든 페이지에서 공통으로 사용되는 스타일
   ================================================================= */

/* CSS 변수 정의 */
:root {

    /* Primary Colors - 브랜드 주색상 */
    --color-primary: #FF853A;
    --color-primary-hover: #E6742E;
    --color-primary-light: #FFF8EF;
    --color-primary-inactive: #FFDDC7;
    --color-primary-bg: #FFFAEF;
    
    --color-secondary: #FFC028;
    --color-secondary-hover: #E6B322;
    
    /* Neutral Colors - 텍스트 및 배경 */
    --color-neutral-900: #1C1C1D;  /* 메인 텍스트 */
    --color-neutral-700: #333333;  /* 보조 텍스트 */
    --color-neutral-600: #373636;  /* 네비게이션 텍스트 */
    --color-neutral-100: #FAFAFA;  /* 라이트 배경 */
    --color-neutral-200: #F0F0F0;  /* 미디움 라이트 배경 */
    --color-neutral-230: #F6F6F6;
    --color-neutral-250: #F9F9F9;
    --color-neutral-300: #EEEEEE;  /* 미디움 배경 */
    --color-neutral-350: #BFBFBF;
    --color-neutral-400: #999999;  /* 미디움 배경 */
    --color-neutral-500: #5D5D5D;
    --color-neutral-800: #3B3B3B;  /* 다크 텍스트 */
    --color-black: #000000;  /* 블랙 */
    --color-white: #FFFFFF;
    
    /* Accent Colors - 강조색 */
    --color-accent-red: #FF635D;
    
    /* Semantic Colors - 상태별 색상 */
    --color-success: #28A745;
    --color-success-light: #E6F4E6;
    --color-warning: #FFC107;
    --color-warning-hover: #E0A800;
    --color-error: #DC3545;
    --color-caution: #F81D1D;
    --color-caution-light: #FFE6E6;
    --color-info: #17A2B8;
    --color-blue: #0000ff;
    
    --color-sunday: #CC2220;
    --color-saturday: #2453A5;

    --color-pending: #ffe641;
    --color-approved: #28A745;
    --color-rejected: #DC3545;
    --color-cancelled: #6C757D;

    
    /* Surface & Border Colors */
    --color-surface: var(--color-white);
    --color-surface-variant: var(--color-neutral-100);
    --color-border-light: #E3E3E3;
    --color-border-form: #D9D9D9;
    /* --color-border-light: rgba(0, 0, 0, 0.08); */
    --color-divider: rgba(0, 0, 0, 0.25);
    
    /* Overlay Colors */
    --color-overlay-light: rgba(234, 234, 234, 0.65);
    --color-overlay-dark: rgba(8, 8, 8, 0.1);
    --color-scrim: rgba(0, 0, 0, 0.5);
    
    /* === 폰트 시스템 === */
    --font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', 'Malgun Gothic', sans-serif;
  
    /* Font Size Scale (1rem = 16px 기준) */
    --text-2xs: 0.75rem;      /* 12px */
    --text-xs: 0.875rem;      /* 14px */
    --text-sm: 0.9375rem;     /* 15px */
    --text-base: 1rem;        /* 16px */
    --text-lg: 1.125rem;      /* 18px */
    --text-xl: 1.25rem;       /* 20px */
    --text-2xl: 1.4375rem;    /* 23px */
    --text-3xl: 1.5rem;       /* 24px */
    --text-4xl: 1.73rem;      /* 27px */
    --text-5xl: 1.875rem;     /* 30px */
    --text-6xl: 2.125rem;     /* 34px */
    --text-7xl: 2.5rem;       /* 40px */
    --text-8xl: 2.875rem;     /* 46px */
    
    /* Font Weight Scale */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line Height Scale */
    --leading-none: 1; /* 16px */
    --leading-tight: 1.25; /* 20px */
    --leading-snug: 1.375; /* 22px */
    --leading-normal: 1.5; /* 24px */
    --leading-relaxed: 1.625; /* 26px */
    --leading-loose: 2; /* 32px */
    
    /* === 크기 시스템 (rem 기반) === */
    /* Base: 1rem = 16px (브라우저 기본값) */
    
    /* Layout Containers */
    --size-container-max: 90rem;     /* 1440px */
    --size-content-max: 77.5rem;    /* 1240px */
    --size-header-max: 77.5rem;     /* 1240px */
    --size-section-max: 77.5rem;    /* 1240px */
    --size-carousel-max: 77.5rem;   /* 1240px */
    --size-modal-max: 50rem;        /* 800px */
    --size-card-max: 23.75rem;      /* 380px */
    --size-logo: 18.75rem;          /* 300px 로고 크기 */
    --size-sidebar-width: 21.875rem;  /* 350px */
    --size-dropdown-width-min: 8.125rem;     /* 130px */
    --size-tab-width: 9.375rem;  /* 150px */
    --size-form-table-th: 16.25rem;  /* 260px */

    /* 레이아웃 높이 */
    --height-topbar: 2.875rem;    /* 46px */
    --height-header: 6.25rem;     /* 100px */
    --height-section-min: 40rem;   /* 640px - 섹션 최소 높이 */
    --height-dropdown: 2.25rem;    /* 36px */
    --height-form-table-th: 3.75rem;  /* 60px */
    --height-stats-card: 8.125rem;      /* 130px 통계 카드 높이*/
    --height-news-card: 21.875rem;     /* 350px 뉴스 카드 높이*/
    --height-news-media: 15rem;    /* 240px 뉴스 미디어 높이*/
    --height-donation-card: 11.25rem; /* 180px */
    --height-about-table-row: 9.375rem; /* 150px */
    
    /* 버튼 및 아이콘 크기 */
    --size-btn: 9.0625rem;  /* 145px */
    --height-btn: 3.125rem; /* 50px */

    --size-icon-3xs: 0.5rem;    /* 8px */
    --size-icon-2xs: 0.75rem;  /* 12px */
    --size-icon-xs: 0.7rem;     /* 11.2px 극소형 아이콘용 */
    --size-icon-sm: 0.8rem;  /* 12.8px 네비게이션 \/ 아이콘용 */
    --size-icon-md: 1.125rem;  /* 18px */
    --size-icon-lg: 1.75rem;    /* 28px */
    --size-icon-xl: 1.875rem;    /* 30px */
    --size-icon-2xl: 2.1875rem; /* 35px */
    --size-icon-3xl: 2.5rem; /* 40px */
    --size-icon-4xl: 3.125rem; /* 50px */
    --size-icon-5xl: 5rem; /* 80px */
    --size-icon-6xl: 6.25rem; /* 100px */
    --size-icon-stats: 5.625rem;      /* 90px 통계 카드 아이콘 크기*/

    /* 기타 하드코딩 대체 값 */
    --size-icon-hamburger: 1.875rem;       /* 30px */
    --size-icon-hamburger-line: 1.5rem;    /* 24px */

    
    /* 추가 사이즈 변수 */
    --border-dropdown: 0.3125rem solid var(--color-primary); /* 5px 드롭다운 위쪽 주황색 테두리*/

    --shadow-dropdown: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
    --shadow-sidebar: -0.3125rem 0 1.5625rem rgba(0, 0, 0, 0.15);
    --shadow-news: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); /* 0 4px 12px */
    
    /* 레이아웃 특수 값 */
    --layout-main-nav-gap-responsive: clamp(0.1rem, 3.5vw, 5rem); /* 반응형 네비게이션 간격 */
    
    /* Border Radius Scale */
    --radius-none: 0;
    --radius-xs: 0.0625rem; /* 1px */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.25rem;   /* 20px */
    --radius-full: 9999px;   /* 완전한 원 */
    
    /* === 간격 시스템 (8px 기반 스케일) === */
    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-18: 4.5rem;      /* 72px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    --space-32: 8rem;        /* 128px */

    
    /* 캐러셀 관련 */
    --size-slide-max: 33.125rem;  /* 530px */
    --space-slide-gap: 1.25rem;   /* 20px */

    /* 전환 효과 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease-in-out;
}

/* 기본 리셋 및 공통 스타일 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--text-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: var(--leading-normal);
    color: var(--color-neutral-700);
    background-color: var(--color-white);
    overflow-x: hidden;
    word-break: keep-all;
}

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

a {
    text-decoration: none;
    color: inherit;
}

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

ul, ol {
    list-style: none;
}

/* ===== UTILITY CLASSES ===== */
/* 컨테이너 시스템 */
.container {
  max-width: var(--size-content-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container-header {
  max-width: var(--size-header-max);
}

.container-section {
  max-width: var(--size-section-max);
}

.container-full {
    max-width: var(--size-container-max);
}

.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;
}

/* ===== TYPOGRAPHY SYSTEM ===== */
/* 텍스트 유틸리티 클래스 */
.text-2xs   {font-size: var(--text-2xs); }
.text-xs    {font-size: var(--text-xs); }
.text-sm    {font-size: var(--text-sm); }
.text-base  {font-size: var(--text-base); }
.text-lg    {font-size: var(--text-lg); }
.text-xl    {font-size: var(--text-xl); }
.text-2xl   {font-size: var(--text-2xl); }
.text-3xl   {font-size: var(--text-3xl); }
.text-4xl   {font-size: var(--text-4xl); }
.text-5xl   {font-size: var(--text-5xl); }
.text-6xl   {font-size: var(--text-6xl); }
.text-7xl   {font-size: var(--text-7xl); }
.text-8xl   {font-size: var(--text-8xl); }

.text-light     { font-weight: var(--font-light); }
.text-regular   { font-weight: var(--font-regular); }
.text-medium    { font-weight: var(--font-medium); }
.text-semibold  { font-weight: var(--font-semibold); }
.text-bold      { font-weight: var(--font-bold); }
.text-extrabold { font-weight: var(--font-extrabold); }


.leading-none    { line-height: var(--leading-none); }
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose); }

/* ===== BUTTON COMPONENTS ===== */
/* 공통 버튼 스타일 */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

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

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-0.125rem); /* -2px */
}

.btn-secondary {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    border-radius: var(--space-8);
}

.btn-secondary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-0.125rem); /* -2px */
}

.btn-icon {
    width: var(--size-icon-md); /* 18px */
    height: 1rem; /* 16px */
    flex-shrink: 0;
}

/* ===== TOP BAR ===== */
.top-bar {
    background-color: var(--color-primary);
    height: var(--height-topbar);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
}

.top-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--size-header-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
    width: 100%;
}

.slogan {
    color: var(--color-white);
    text-align: center;
}

.slogan a, .slogan a:hover {
    color: inherit;
    text-decoration: none;
}

/* ===== HEADER ===== */
.header {
    background-color: var(--color-white);
    height: var(--height-header);
    position: fixed;
    top: var(--height-topbar);
    z-index: 99;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    align-items: center;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--size-header-max);
    margin: 0 auto;
    height: var(--height-header);
    position: relative;
}

.logo {
    position: static;
    flex: 0 0 auto;
}

.logo-image {
    height: 3.5rem; /* 56px */
    width: auto;
}


.header-cta {
    position: static;
    flex: 0 0 auto;
    margin-left: var(--space-8);
}

.header-cta .btn {
    width: 10rem; /* 160px */
    height: 3.5rem; /* 56px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    margin-top: calc(var(--height-topbar) + var(--height-header));
}


/* ===== UNIFIED NAVIGATION SYSTEM ===== */

/* 통합 네비게이션 기본 구조 */
.unified-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.nav-close-btn {
    display: none;
}

.nav-list {
    display: flex;
    height: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-link {
    color: var(--color-neutral-600);
    transition: color var(--transition-normal);
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.nav-link:hover,
.nav-item.active .nav-link {
    color: var(--color-primary);
    text-decoration: none;
}

/* 서브메뉴 기본 구조 */
.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-menu-item {
    text-decoration: none;
    display: block;
    transition: all var(--transition-fast);
}

.sub-menu-item:hover {
    text-decoration: none;
}

/* ===== DESKTOP MODE (is-dropdown-menu) ===== */
.is-dropdown-menu .unified-nav {
    display: flex;
}

.is-dropdown-menu .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--layout-main-nav-gap-responsive);
}

.is-dropdown-menu .nav-toggle-icon {
    display: none;
}

.is-dropdown-menu .sub-menu {
    position: absolute;
    top: var(--height-header);
    left: 50%;
    background: var(--color-white);
    border: none;
    border-top: var(--border-dropdown);
    box-shadow: var(--shadow-dropdown);
    min-width: var(--size-dropdown-width-min);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-0.625rem); /* -10px */
    transition: all var(--transition-fast);
    z-index: 1000;
}

.is-dropdown-menu .nav-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.is-dropdown-menu .sub-menu-item {
    display: flex;
    color: rgba(3, 8, 11, 0.68);
    align-items: center;
    justify-content: center;
    text-align: center;
    width: var(--size-dropdown-width-min);
    height: var(--height-dropdown);
    margin-bottom: var(--space-1);
}

.is-dropdown-menu .sub-menu-item:hover {
    background: var(--color-neutral-100);
    color: var(--color-primary-hover);
}

.is-dropdown-menu .sub-menu-item:last-child {
    margin-bottom: 0;
}

/* ===== MOBILE MODE (is-sidebar-menu) ===== */
.is-sidebar-menu .unified-nav {
    position: fixed;
    top: 0;
    right: calc(-1 * var(--size-sidebar-width));
    width: var(--size-sidebar-width);
    height: 100vh;
    background: var(--color-white);
    box-shadow: var(--shadow-sidebar);
    z-index: 10001; /* 오버레이보다 높게 설정 */
    transition: right 0.4s ease;
    overflow-y: auto;
    display: block;
    padding: var(--space-18) var(--space-8) var(--space-5);
}

.is-sidebar-menu.nav-open .unified-nav {
    right: 0;
}

/* 사이드바 모드에서만 보이는 닫기 버튼 */
.is-sidebar-menu .nav-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 크기 & 터치 영역 */
    font-size: var(--text-3xl);
    width: var(--space-8);    /* ex. 32px */
    height: var(--space-8);
    padding: var(--space-1);
    /* 원형 배경 */
    background: var(--color-neutral-200);
    border-radius: var(--radius-full);
    /* 위치 */
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    /* 아이콘 색상 */
    color: var(--color-neutral-500);
    cursor: pointer;
    /* 트랜지션 */
    transition: all var(--transition-normal)
}

/* 호버 효과 */
.is-sidebar-menu .nav-close-btn:hover {
    background: var(--color-neutral-300);
    transform: scale(1.1);
    color: var(--color-neutral-700);
}
  
/* 포커스 가시성 (접근성) */
.is-sidebar-menu .nav-close-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary);
}
  

.is-sidebar-menu .nav-list {
    flex-direction: column;
    height: auto;
    gap: 0;
    align-items: stretch;
    flex-wrap: wrap;
}

.is-sidebar-menu .nav-item {
    height: auto;
    display: block;
    border-bottom: 1px solid var(--color-neutral-100);
}

.is-sidebar-menu .nav-link {
    height: auto;
    padding: var(--space-4) var(--space-3) var(--space-4) 0;
    justify-content: space-between;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
}

/* 네비게이션 토글 아이콘 */
.is-sidebar-menu .nav-toggle-icon {
    font-size: var(--size-icon-sm);
    transition: transform var(--transition-normal);
}

.is-sidebar-menu .nav-item.active .nav-toggle-icon {
    transform: rotate(180deg);
}

.is-sidebar-menu .sub-menu {
    position: static;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--color-neutral-100);
    visibility: visible;
    transform: none;
}

.is-sidebar-menu .nav-item.active .sub-menu {
    max-height: 300px;
    padding: var(--space-3) 0; /* 서브메뉴 위아래 패딩 hover 적용 안됨 */
}

.is-sidebar-menu .sub-menu-item {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
}

.is-sidebar-menu .sub-menu-item:hover {
    /* background: rgba(255, 133, 58, 0.1); */
    color: var(--color-primary-hover);
}

/* 모바일에서 햄버거 메뉴 표시 */
.is-sidebar-menu .mobile-menu-trigger {
    display: block;
}

/* 모바일 CTA 버튼 */
.mobile-nav-cta {
    display: none;
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    text-align: center;
}

.mobile-nav-cta .btn {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.mobile-nav-cta .btn i {
    margin-right: var(--space-1);
}

/* 사이드바 모드에서 모바일 CTA 표시 */
.is-sidebar-menu .mobile-nav-cta {
    display: block;
}

/* CTA 버튼 위치 조정 */
.is-sidebar-menu .header-cta {
    display: none;
}

/* 모바일에서 햄버거 메뉴 표시 */
.is-sidebar-menu .mobile-menu-trigger {
    display: block;
}

/* 햄버거 버튼 */
.mobile-menu-trigger {
    display: none;
    position: relative;
    z-index: 1000;
}

.hamburger-btn {
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    position: relative;
    width: var(--size-icon-hamburger);
    height: var(--size-icon-hamburger);
}

.hamburger-box {
    width: var(--size-icon-hamburger-line);
    height: var(--size-icon-md); /* 18px */
    display: inline-block;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: var(--size-icon-hamburger-line);
    height: 0.125rem; /* 2px */
    background-color: var(--color-neutral-700);
    border-radius: var(--radius-xs); /* 1px */
    position: absolute;
    transition: all 0.3s ease;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -0.0625rem; /* -1px */
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    display: block;
}

.hamburger-inner::before {
    top: -0.5rem; /* -8px */
}

.hamburger-inner::after {
    top: 0.5rem; /* 8px */
}

/* 햄버거 애니메이션 */
.is-sidebar-menu.nav-open .hamburger-inner {
    transform: rotate(45deg);
}

.is-sidebar-menu.nav-open .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.is-sidebar-menu.nav-open .hamburger-inner::after {
    top: 0;
    transform: rotate(-90deg);
}


/* ===== FOOTER LINKS ===== */
.footer-links {
    background: var(--color-neutral-200);
    padding: var(--space-3) 0;
}

.footer-links-content {
    max-width: var(--size-section-max);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.footer-nav {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

.footer-link {
    padding: var(--space-2) var(--space-1);
}

.social-links {
    display: flex;
    gap: var(--space-5);
    align-items: flex-end;
    justify-content: flex-end;
    margin-left: auto;
}

.social-link {
    display: block;
    width: auto;
    height: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

.social-link img {
    display: block;
    height: 100%;
    object-fit: contain;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--color-neutral-100);
    padding: var(--space-10) 0 var(--space-6) 0;
}

.footer-content {
    max-width: var(--size-section-max);
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.footer-logo .logo-image {
    width: var(--size-logo); /* 300px */
    height: auto;
    display: block;
    margin: 0 auto;
}

.footer-info {
    flex: 1;
    padding: var(--space-4) 0;
    display: flex;
    flex-direction: column;
}

.footer-details {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem; /* 1px */
}

.footer-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.footer-item {
    display: inline;
}

.footer-item strong {
    font-weight: var(--font-bold);
}

.footer-separator {
    font-weight: var(--font-regular);
    margin: 0 var(--space-1);
}

.footer-notice , .footer-copyright{
    padding-top: var(--space-1);
}



/* ===== PAGE HEADER ===== */
.page-header {
    background: url('../images/page-header.png') center center / cover no-repeat;
    border-bottom: 1px solid var(--color-primary);
    margin-top: calc(var(--height-topbar) + var(--height-header));
    min-height: 13.75rem; /* 220px */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.page-header-content {
    max-width: var(--size-content-max);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.breadcrumb {
    font-family: var(--font-primary);
    background-color: inherit;    
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-title {
    font-family: var(--font-primary);
    margin: 0;
}

.breadcrumb i {
    font-size: 1rem; /* 16px */
}


/* 공통 섹션 제목 스타일 */

/* 섹션 제목 */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-10);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
}

.section-icon {
    width: var(--space-5);
    height: var(--space-5);
    background: var(--color-white);
    border: 0.25rem solid var(--color-primary);
    border-radius: var(--radius-sm);
}


/* ===== COMMON TAB SYSTEM ===== */
/* 공통 탭 시스템 - 후원/봉사 페이지에서 공통 사용 */

.tab-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  border: none;
}

/* Bootstrap 기본 스타일 오버라이드 */
.tab-bar.nav-pills .nav-link {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  width: var(--size-tab-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.tab-bar.nav-pills .nav-link:hover,
.tab-bar.nav-pills .nav-link:focus,
.tab-bar.nav-pills .nav-link.active {
  background: none;
  color: inherit;
  border: none;
  outline: none;
}

.tab-bar.nav-pills .nav-link:focus {
  box-shadow: 0 0 0 0.125rem var(--color-primary);
  border-radius: var(--radius-sm);
}

.tab-indicator {
  height: 0.5625rem;
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 1.875rem; /* 30px */
  transition: background var(--transition-fast);
  background: var(--color-primary-inactive);
}

.nav-link.active .tab-indicator {
  background: var(--color-primary);
}

.tab-label {
  transition: color var(--transition-fast);
  color: var(--color-neutral-400);
  font-size: 1.65rem;
  font-weight: var(--font-medium);
  letter-spacing: -0.03em;
}

.nav-link.active .tab-label {
  color: var(--color-primary);
}

/* Bootstrap 탭 콘텐츠 페이드 효과 개선 */
.tab-content .tab-pane {
  transition: opacity var(--transition-normal);
}

/* 공통 리스트 섹션 */
.list-section {
  margin-top: var(--space-20);
  margin-bottom: var(--space-20);
}

/* 공통 CTA 버튼 */
.cta-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-20);
  margin-bottom: var(--space-20);
}

.cta-button {
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13.875rem;
  min-height: 4.5rem;
  padding: 0 var(--space-8);
}

.cta-button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-0.125rem);
  color: var(--color-white);
  text-decoration: none;
}



/* 반응형 기본 설정 */
/* ===== TABLET LANDSCAPE (1024px 이하) ===== */
@media (max-width: 1024px) {
    :root {
        --height-header: 5.75rem; /* 92px */
        --size-content-max: 60rem; /* 960px */
        --size-header-max: 60rem; /* 960px */
        --size-section-max: 60rem; /* 960px */
        --size-carousel-max: 60rem; /* 960px */
        --layout-main-nav-gap-responsive: 1rem;
    }

    .header-cta {
        margin-left: 0;
    }
    
    .container {
        padding: 0 var(--space-4);
    }

    .footer-content {
        flex-direction: column;
        gap: var(--space-5);
    }
    
    .footer-logo {
        width: 100%;
        text-align: center;
    }
    
    .social-links {
        flex-wrap: wrap;
        gap: var(--space-3);
        justify-content: center;
        margin-left: 0;
    }
    
    .social-link {
        min-width: 80px;
    }
}

@media (max-width: 900px) {
    .logo-image {
        height: 3.25rem; /* 52px */
    }

    .nav-link {
        font-size: var(--text-lg);
    }
    
    .header-cta .btn-primary {
        font-size: var(--text-base);
    }

    .header-cta .btn{
        width: 8rem; /* 128px */
    }

    .footer-links-content {
        flex-direction: column;
        gap: var(--space-5);
        text-align: center;
    }
    
    .footer-nav {
        justify-content: center;
        order: 1;
    }
    
    .social-links {
        justify-content: center;
        margin-left: 0;
        order: 2;
    }
}

@media (max-width: 768px) {
    :root {
        --height-header: 4rem; /* 64px */
    }

    /* 슬로건 바는 더 이상 fixed가 아님 */
    .top-bar {
        position: static;
    }
    /* 헤더만 화면 상단에 fixed */
    .header {
        position: sticky;
        top: 0;
    }

    .page-header {
        min-height: 10rem; /* 160px */
        margin-top: 0;
    }

    .logo-image {
        height: 3rem; /* 48px */
    }

    /* 본문 마진은 헤더 높이만큼만 띄움 */
    .main-content {
        margin-top: 0;
    }

    .btn {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-base);
    }

    .footer-text {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-separator {
        display: none;
    }


    .tab-bar.nav-pills .nav-link {
        width: 7rem;
    }

    .tab-label {
        font-size: var(--text-2xl);
    }
}



@media (max-width: 480px) {
    :root {
        --size-container-max: 100%;     /* 1440px */
        --size-content-max: 100%;
        --size-header-max: 100%;
        --size-section-max: 100%;
        --size-carousel-max: 100%;

        --text-2xs: 0.75rem;      /* 12px */
        --text-xs: 0.875rem;      /* 14px */
        --text-sm: 0.9375rem;     /* 15px */
        --text-base: 1rem;        /* 16px */
        --text-lg: 1rem;        /* 16px */
        --text-xl: 1.125rem;      /* 18px */
        --text-2xl: 1.25rem;       /* 20px */
        --text-3xl: 1.4375rem;    /* 23px */
        --text-4xl: 1.5rem;       /* 24px */
        --text-5xl: 1.57rem;      /* 25px */
        --text-6xl: 1.875rem;     /* 30px */
        --text-7xl: 2.125rem;     /* 34px */
        --text-8xl: 2.5rem;       /* 40px */
    }    
} 


/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}