/* =========================================
   2. 기본 스타일 - 리셋 & 전역 스타일 (모바일 최적화)
   ========================================= */

/* ========== CSS 리셋 ========== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    /* 모바일 텍스트 크기 자동 조정 방지 */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
    color: var(--gray-900);
    background-color: white !important; 
    min-height: 100vh;
    overflow-x: hidden;
    /* 모바일 스크롤 바운스 방지 */
    overscroll-behavior-y: none;
}

/* ========== 타이포그래피 ========== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
}

h1 { 
    font-size: var(--text-3xl); 
    letter-spacing: -0.025em;
}

h2 { 
    font-size: var(--text-2xl); 
    letter-spacing: -0.025em;
}

h3 { 
    font-size: var(--text-xl); 
}

h4 { 
    font-size: var(--text-lg); 
}

h5 { 
    font-size: var(--text-base); 
}

h6 { 
    font-size: var(--text-sm); 
}

p {
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
    /* 터치 하이라이트 제거 */
    -webkit-tap-highlight-color: transparent;
}

a:hover {
    color: var(--primary-700);
}

a:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

strong, b {
    font-weight: var(--font-bold);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--text-sm);
}

/* ========== 리스트 ========== */
ul, ol {
    list-style: none;
}

ul[class], ol[class] {
    padding: 0;
}

/* ========== 이미지 ========== */
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* 이미지 드래그 방지 (모바일) */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

svg {
    display: inline-block;
    vertical-align: middle;
}

/* ========== 버튼 리셋 ========== */
button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    /* 터치 하이라이트 제거 */
    -webkit-tap-highlight-color: transparent;
    /* 터치 콜아웃 방지 */
    -webkit-touch-callout: none;
    /* ⚠️ user-select: none 제거 - 체크박스 클릭 막음 */
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ========== 입력 필드 리셋 ========== */
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    /* iOS 스타일 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ✅ 체크박스와 라디오는 기본 appearance 유지 */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    cursor: pointer;
}

/* iOS에서 입력 필드 줌 방지 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    font-size: 16px; /* iOS는 16px 미만이면 자동 줌 */
}

input:focus, textarea:focus, select:focus {
    outline: none;
}

/* ========== 테이블 리셋 ========== */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ========== HR ========== */
hr {
    border: 0;
    border-top: var(--border-width) solid var(--gray-200);
    margin: var(--spacing-6) 0;
}

/* ========== 스크롤바 커스터마이징 ========== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) var(--gray-100);
}

/* ========== 포커스 스타일 ========== */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ========== 선택 텍스트 ========== */
::selection {
    background-color: var(--primary-200);
    color: var(--primary-900);
}

::-moz-selection {
    background-color: var(--primary-200);
    color: var(--primary-900);
}

/* ========== 유틸리티 클래스 ========== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: var(--font-bold); }
.font-semibold { font-weight: var(--font-semibold); }
.font-medium { font-weight: var(--font-medium); }
.font-normal { font-weight: var(--font-normal); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ========== 반응형 유틸리티 ========== */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

/* ========== 애니메이션 ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   모바일 최적화
   ======================================== */

/* 터치 디바이스 */
@media (hover: none) and (pointer: coarse) {
    /* 터치 액션 최적화 */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 버튼 터치 피드백 */
    button:active {
        opacity: 0.7;
    }
    
    /* 링크 터치 피드백 */
    a:active {
        opacity: 0.7;
    }
}

/* 모바일 타이포그래피 조정 */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.375rem;
    }
    
    h3 {
        font-size: 1.125rem;
    }
}

/* ========================================
   접근성
   ======================================== */

/* 애니메이션 감소 모드 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 고대비 모드 */
@media (prefers-contrast: high) {
    * {
        border-width: 2px;
    }
}

/* ========================================
   프린트 스타일
   ======================================== */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .no-print,
    .sidebar,
    .app-header,
    .mobile-menu-toggle,
    button,
    .btn {
        display: none !important;
    }
    
    .main-area {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
    }
}

/* ========================================
   iOS 특수 처리
   ======================================== */

/* iOS Safe Area 대응 */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .app-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* iOS 바운스 스크롤 방지 */
body {
    /* position: fixed 제거 - 모바일 버튼 클릭 이슈 해결 */
    width: 100%;
    overscroll-behavior-y: contain;
}

#mainContent {
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}