/* ============================================
Global Styles
============================================
전역 스타일: CSS 변수, 기본 리셋, 기본 타이포그래피, 공통 레이아웃
   ============================================ */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

.roboto-custom {
    font-family: 'Pretendard', "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

/* CSS Variables */
:root {
    --primary-color: #42834e;
    --primary-color-dark: #2e572e;
    --primary-color-light: #cbebcb;
/*--------------------------------*/
    --secondary-color: #656e76;
/*--------------------------------*/
    --text-color: #333;
    --text-color-dark: #1a1a1a;
    --text-color-light: #7f858a;
/*--------------------------------*/
    --light-bg: #f8f9fa;
    --border-color: #e0e0e0;
    --hover-color: #5e80a30d;
    /* Height of fixed top navigation; used to offset sticky headers */
    --nav-height: 64px;
    /* Width of fixed sidebar (used by page-header as sidebar) */
    --sidebar-width: 320px;
    --page-header-height: calc(100vh - var(--nav-height));
    /* Footer height approximation */
    --footer-height: 150px;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Firefox 스크롤바 스타일 */
    scrollbar-width: thin;                  /* 얇은 스크롤바 */
    scrollbar-color: var(--primary-color) transparent; /* 기본색상 설정 */
    overflow-x: hidden;
}

/* HTML & Body */
html {
    height: 100%;
    box-sizing: border-box;
    /* 사이트 전역 최소 너비 설정 - !important로 강제 적용 */
    min-width: 320px !important;
    width: 100%;
    max-width: 100vw;
    scroll-behavior: smooth;
    scrollbar-gutter: stable; /* 스크롤바 유무로 인한 레이아웃 흔들림 방지 */
}

body {
    font-family: 'Pretendard', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600; /* Semibold as default */
    line-height: 1.6;
    color: var(--text-color);
    min-height: 100%;
    /* 전역 최소 너비 상속 보조 - !important로 강제 적용 */
    min-width: 320px !important;
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ✅ WebKit 브라우저 (Chrome, Edge, Safari) 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 6px;               /* 가늘게 */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;  /* 트랙(배경)은 투명하게 */
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color); /* 기본 상태는 투명 */
    border-radius: 9999px;          /* 완전 둥근 형태 */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color); /* hover 시 primary-color 적용 */
}

::-webkit-scrollbar-button {
    display: none !important; /* 화살표 버튼 제거 */
}


::-webkit-scrollbar-corner {
    display: none;
}

/* Main Content */
main {
    flex: 1;
}



/* Common Layout Classes */
.section {
    padding: 4rem 2rem;
}

.container {
    margin: 0 auto;
    box-sizing: border-box;
}

/* Typography */
p {
    font-size: 1rem;
    line-height: 1.25;
    font-family: 'Pretendard', "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

h1 {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-weight: 700;
    font-family: 'Pretendard', 'Roboto', sans-serif;
}

h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-weight: 700;
    font-family: 'Pretendard', 'Roboto', sans-serif;
}

h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    margin-top: 2rem;
    font-weight: 600;
    font-family: 'Pretendard', 'Roboto', sans-serif;
}

h4 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-family: 'Pretendard', 'Roboto', sans-serif;
}

h5 {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text-color-dark);
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-family: 'Pretendard', 'Roboto', sans-serif;
}