/* ==========================================================================
   1. 디자인 시스템 변수 정의 (브랜드 테마 바꾸기 엄청 편해짐)
   ========================================================================== */
:root {
    /* 색상 변수 */
    --primary-color: #007bff;    /* 대표 브랜드 색상 (파랑) */
    --secondary-color: #6c757d;  /* 보조 색상 (회색) */
    
    /* 여백/둥글기 표준화 */
    --border-radius: 8px;
    --space-padding: 16px;
}

/* ==========================================================================
   2. 전역 스타일 초기화 (Reset / Base)
   ========================================================================== */
* {
    box-sizing: border-radius; /* 테두리(border)까지 포함해서 크기 계산하도록 고정 */
    margin: 0;
    padding: 0;
}

body {
    padding: 0px;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none; /* 링크 밑줄 기본 제거 */
}

/* ==========================================================================
   3. 자주 쓰는 공통 컴포넌트 / 유틸리티 클래스 (과거의 _site.css 역할)
   ========================================================================== */
/* 버튼 공통 구조 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    border: none;
}
/* 💡 마우스가 올라갔을 때(hover)의 스타일 정의 */
.btn:hover {
    background-color: #000000; /* 배경을 완전 검은색으로 */
    color: #ffffff;            /* 글자색은 안 보일 수 있으니 흰색으로 반전 */
}

/* 버튼 색상 분리 */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
/* 💡 .btn-primary 클래스를 가진 요소 위에 마우스가 올라갔을 때만 작동 */
.btn-primary:hover {
    background-color: #000000; /* 파란색 대신 검은색으로 덮어씀 */
    color: #ffffff;
}

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

/* 화면 숨김 처리 (웹 접근성 표준용) */
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}