/* ===================================
   DR소프트 - 유틸리티 & 반응형
   utilities.css
   =================================== */

/* ===================================
   유틸리티 클래스
   =================================== */

/* 마진 & 패딩 */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ms-0 { margin-left: 0 !important; }
.me-0 { margin-right: 0 !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.ps-0 { padding-left: 0 !important; }
.pe-0 { padding-right: 0 !important; }

/* 섹션 간격 */
.section { padding: var(--spacing-4xl) 0; }
.section-sm { padding: var(--spacing-2xl) 0; }
.section-lg { padding: var(--spacing-5xl) 0; }

/* 텍스트 정렬 */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* 폰트 크기 */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }

/* 폰트 굵기 */
.font-thin { font-weight: var(--font-weight-thin) !important; }
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }
.font-black { font-weight: var(--font-weight-black) !important; }

/* 색상 */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-light { color: var(--text-light) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: var(--white) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-white { background-color: var(--white) !important; }

/* 그라디언트 배경 */
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-secondary { background: var(--gradient-secondary) !important; }
.bg-gradient-accent { background: var(--gradient-accent) !important; }

/* 보더 */
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.border-start { border-left: 1px solid var(--border-color) !important; }
.border-end { border-right: 1px solid var(--border-color) !important; }

/* 그림자 */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* 둥근 모서리 */
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* 디스플레이 */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Flexbox */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }
.align-center { align-items: center !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch { align-items: stretch !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--spacing-xs) !important; }
.gap-2 { gap: var(--spacing-sm) !important; }
.gap-3 { gap: var(--spacing-md) !important; }
.gap-4 { gap: var(--spacing-lg) !important; }
.gap-5 { gap: var(--spacing-xl) !important; }

/* 포지션 */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* 오버플로우 */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* 커서 */
.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* 사용자 선택 */
.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
.user-select-none { user-select: none !important; }

/* 가시성 */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* 투명도 */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Z-인덱스 */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }

/* 너비 & 높이 */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

/* 라인 높이 */
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

/* 텍스트 변형 */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* 텍스트 장식 */
.underline { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }
.no-underline { text-decoration: none !important; }

/* 리스트 스타일 */
.list-none { list-style: none !important; }
.list-disc { list-style-type: disc !important; }
.list-decimal { list-style-type: decimal !important; }

/* ===================================
   반응형 디자인
   =================================== */

/* 태블릿 (768px ~ 991px) */
@media (max-width: 991px) {
    /* 헤더 */
    .navbar {
        padding: var(--spacing-md) 0;
    }
    
    .navbar-nav {
        background: var(--white);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: var(--shadow-xl);
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        display: none;
    }
    
    .navbar-nav.show {
        display: block;
    }
    
    .nav-item {
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
        display: block;
    }
    
    /* 히어로 섹션 */
    .hero-title {
        font-size: var(--font-size-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-lg);
    }
    
    /* 그리드 */
    .service-grid,
    .portfolio-grid,
    .pricing-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 섹션 간격 */
    .section {
        padding: var(--spacing-3xl) 0;
    }
    
    /* 숨김 클래스 */
    .d-md-none { display: none !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

/* 모바일 (767px 이하) */
@media (max-width: 767px) {
    /* 컨테이너 */
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    /* 타이포그래피 */
    .page-title {
        font-size: var(--font-size-2xl);
    }
    
    h1, .h1 { font-size: var(--font-size-2xl); }
    h2, .h2 { font-size: var(--font-size-xl); }
    h3, .h3 { font-size: var(--font-size-lg); }
    
    /* 버튼 */
    .btn-group-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    .btn-group-mobile .btn {
        width: 100%;
    }
    
    /* 그리드 */
    .service-grid,
    .portfolio-grid,
    .pricing-cards,
    .stats-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    /* 폼 */
    .contact-form .row > [class*="col-"] {
        margin-bottom: var(--spacing-md);
    }
    
    /* 푸터 */
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    /* 테이블 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 모달 */
    .modal-dialog {
        margin: var(--spacing-md);
    }
    
    /* 탭 */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs .nav-link {
        white-space: nowrap;
    }
    
    /* 숨김 클래스 */
    .d-sm-none { display: none !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    
    /* 모바일 전용 표시 */
    .mobile-only { display: block !important; }
}

/* 데스크톱 (992px 이상) */
@media (min-width: 992px) {
    /* 데스크톱 전용 표시 */
    .desktop-only { display: block !important; }
    .mobile-only { display: none !important; }
    
    /* 숨김 클래스 */
    .d-lg-none { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

/* 큰 화면 (1200px 이상) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* 숨김 클래스 */
    .d-xl-none { display: none !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

/* 초대형 화면 (1400px 이상) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    /* 숨김 클래스 */
    .d-xxl-none { display: none !important; }
    .d-xxl-inline { display: inline !important; }
    .d-xxl-inline-block { display: inline-block !important; }
    .d-xxl-block { display: block !important; }
    .d-xxl-flex { display: flex !important; }
}

/* ===================================
   프린트 스타일
   =================================== */

@media print {
    /* 불필요한 요소 숨김 */
    .navbar,
    .footer,
    .btn-top,
    .social-links,
    .no-print {
        display: none !important;
    }
    
    /* 링크 URL 표시 */
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    /* 페이지 나누기 */
    .page-break-before {
        page-break-before: always;
    }
    
    .page-break-after {
        page-break-after: always;
    }
    
    .avoid-break {
        page-break-inside: avoid;
    }
    
    /* 색상 조정 */
    * {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* 마진 조정 */
    body {
        margin: 0;
        padding: 0;
    }
    
    .container {
        width: 100%;
        max-width: none;
    }
}

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

/* 포커스 스타일 */
:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 스크린 리더 전용 */
.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;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 고대비 모드 */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0d47a1;
        --secondary-color: #00796b;
        --text-dark: #000000;
        --text-light: #333333;
        --bg-light: #ffffff;
        --border-color: #000000;
    }
}

/* 다크 모드 선호 */
@media (prefers-color-scheme: dark) {
    :root {
        --text-dark: #f5f5f5;
        --text-light: #cccccc;
        --bg-light: #1a1a1a;
        --bg-secondary: #2a2a2a;
        --border-color: #444444;
    }
    
    body {
        background-color: #121212;
        color: var(--text-dark);
    }
}

/* 애니메이션 감소 선호 */
@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;
    }
}