/* ===== common.css ===== */

/* root */
:root { 
    --primary-color: #4876EB; 
    --secondary-color: #38bdf8; 
    --accent-color: #fbbf24; 
    --dark-bg: #2a3042; 
    --light-bg: #f0f2f8; 
    --text-dark: #222; 
    --text-medium: #454545; 
    --text-light: #526a87; 
    --water-blue: #bfdbfe; 
    --clean-blue: #dbeafe;
} 
/* 1. CSS Reset (based on modern-normalize + 일부 개선) */
html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } 

body { margin: 0; font-size: 16px; color: var(--text-dark); background-color: #fff; line-height: 1.5; font-weight: 400; }  

/* 2. Box Sizing: 모든 요소에 border-box 적용 */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; letter-spacing: -0.02em; word-break: keep-all; } 

/* 3. 이미지 및 미디어 요소 초기화 */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } 

/* 4. 폼 요소 초기화 */
input, button, textarea, select { font: inherit; margin: 0; padding: 0; border: none; background: none; color: inherit; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; } 

/* 버튼 및 링크 기본 스타일 */
button { cursor: pointer; background-color: transparent; } 

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

/* 제목 요소 기본 여백 제거 */
h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 0; } 

/* 리스트 스타일 제거 */
ul, ol { list-style: none; padding: 0; margin: 0; } 

/* 테이블 초기화 */
table { border-collapse: collapse; border-spacing: 0; } 

/* 스크롤 관련 (웹킷 브라우저에 적용) */
::-webkit-scrollbar { width: 8px; height: 8px; } 
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; } 
::-webkit-scrollbar-track { background-color: transparent; } 

/* 숨김 클래스 */
.hidden { display: none !important; } 

/* 텍스트 정렬 유틸리티 */
.text-center { text-align: center; } 

/* 여백 유틸리티 (예시) */
.mt-1 { margin-top: 4px; } 
.mt-2 { margin-top: 8px; } 
.mt-3 { margin-top: 12px; } 
.mt-4 { margin-top: 16px; } 

.mb-1 { margin-bottom: 4px; } 
.mb-2 { margin-bottom: 8px; } 
.mb-3 { margin-bottom: 12px; } 
.mb-4 { margin-bottom: 16px; } 

/* 반응형 이미지/텍스트 */
.responsive-text { word-break: keep-all; word-wrap: break-word; } 

/* 5. 뷰포트 대응 */
@media (max-width: 768px) { html { font-size: 15px; } 
 }
@media (max-width: 480px) { html { font-size: 14px; } 
 }

.mobile-style {display: none;}

@media (max-width: 768px){
    .mobile-style {display: block;}
}