@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

body{background:var(--white);font-size:0.81em;font-family:var(--k-font)}
h1, h2, h3, h4, h5, h6, input, button, textarea, select{font-family:var(--k-font)}
#device_change{width:50%;border:1px solid var(--gray-600);font-size:3.5em;box-shadow:none} 
/* ========================================
   🎨 DESIGN TOKENS SYSTEM
   ======================================== 
   US INNOWAVE 디자인 시스템의 핵심 토큰들
   모든 컴포넌트는 이 토큰들을 기반으로 작동합니다.
   
   사용 예시: 
   color: var(--primary);
   padding: var(--space-lg);
   font-size: var(--font-size-xl);
   ======================================== */

:root{
  /* ==========================================
     COLOR SYSTEM
     ========================================== */
  
  /* Brand Colors - 브랜드 메인 컬러 */
  --primary:#3AD2FF;        /* 메인 스카이블루 - 버튼, 강조 */
  --primary-light:#5EDAFF;  /* 밝은 스카이블루 - 호버 효과 */
  --primary-dark:#2AB8E5;   /* 어두운 스카이블루 - 액티브 상태 */
  --primary-alpha:rgba(58, 210, 255, 0.1); /* 투명 스카이블루 - 배경 */
  
  /* Semantic Colors - 의미론적 컬러 */
  --secondary:#1FA2CC;       /* 보조 딥블루 - 링크, 정보 */
  --accent:#ee0979;          /* 강조 핑크 - 특별 강조 */
  --success:#28a745;         /* 성공 초록 - 완료, 성공 메시지 */
  --warning:#ffc107;         /* 경고 노란색 - 주의 메시지 */
  --error:#dc3545;           /* 에러 빨간색 - 오류, 필수 필드 */
  
  /* Gray Scale - 회색 단계 (어두운색 → 밝은색) */
  --gray-900:#181818;        /* 가장 어두운 - 푸터 배경 */
  --gray-800:#292929;        /* 매우 어두운 - 다크 섹션 */
  --gray-700:#555;           /* 어두운 - 진한 텍스트 */
  --gray-600:#666;           /* 중간 어두운 - 보더 */
  --gray-500:#777;           /* 중간 - 서브 텍스트 */
  --gray-400:#999;           /* 중간 밝은 - 비활성 텍스트 */
  --gray-300:#ccc;           /* 밝은 - 구분선 */
  --gray-200:#e1e1e1;        /* 매우 밝은 - 연한 보더 */
  --gray-100:#f5f5f5;        /* 배경색 - 카드 배경 */
  --gray-50:#fafafa;         /* 가장 밝은 - 섹션 배경 */
  
  /* Base Colors - 기본 색상 */
  --white:#fff;              /* 흰색 - 기본 배경 */
  --black:#111;              /* 검은색 - 기본 텍스트 */
  
  /* ==========================================
     TYPOGRAPHY SYSTEM
     ========================================== */
  
  /* Font Families - 폰트 패밀리 */
  --k-font:'Pretendard';     /* 한글 메인 폰트 */
  --e-font:'Pretendard';     /* 영문 강조 폰트 */
  
  /* Font Sizes - 폰트 크기 (작은 → 큰) */
  --font-size-2xs:10px;      /* 극소 - 매우 작은 캡션 */
  --font-size-xs:11px;       /* 매우 작은 - 캡션, 라벨 */
  --font-size-13:13px;       /* 13px - 작은 텍스트 */
  --font-size-sm:14px;       /* 작은 - 보조 텍스트 */
  --font-size-15:15px;       /* 15px - 약간 작은 텍스트 */
  --font-size-base:16px;     /* 기본 - 본문 텍스트 */
  --font-size-lg:18px;       /* 큰 - 강조 본문 */
  --font-size-19:19px;       /* 19px - 중간 크기 */
  --font-size-xl:20px;       /* 매우 큰 - 소제목 */
  --font-size-22:22px;       /* 22px - 중간 제목 */
  --font-size-24:24px;       /* 24px - 작은 제목 */
  --font-size-2xl:25px;      /* 2배 큰 - 섹션 제목 */
  --font-size-26:26px;       /* 26px - 중간 섹션 제목 */
  --font-size-28:28px;       /* 28px - 큰 섹션 제목 */
  --font-size-30:30px;       /* 30px - 부제목 */
  --font-size-3xl:32px;      /* 3배 큰 - 페이지 부제목 */
  --font-size-35:35px;       /* 35px - 큰 부제목 */
  --font-size-36:36px;       /* 36px - 큰 제목 */
  --font-size-42:42px;       /* 42px - 매우 큰 제목 */
  --font-size-4xl:45px;      /* 4배 큰 - 페이지 제목 */
  --font-size-48:48px;       /* 48px - 큰 페이지 제목 */
  --font-size-65:65px;       /* 65px - 배너 제목 */
  --font-size-5xl:80px;      /* 5배 큰 - 히어로 제목 */
  --font-size-90:90px;       /* 90px - 초대형 제목 */
  
  /* Font Weights - 폰트 굵기 */
  --font-weight-normal:400;  /* 일반 - 본문 */
  --font-weight-medium:500;  /* 중간 - 약간 강조 */
  --font-weight-semibold:600;/* 준굵은 - 부제목 */
  --font-weight-bold:700;    /* 굵은 - 제목 */
  
  /* Line Heights - 줄 높이 */
  --line-height-tight:1.2;   /* 좁은 - 제목용 */
  --line-height-normal:1.5;  /* 일반 - 본문용 */
  --line-height-relaxed:1.65;/* 여유 - 긴 본문용 */
  --line-height-loose:1.8;   /* 넓은 - 리스트용 */
  
  /* ==========================================
     SPACING SYSTEM
     ========================================== */
  
  /* Spacing Scale - 여백 체계 (작은 → 큰) */
  --space-xs:4px;            /* 매우 작은 - 아이콘 간격 */
  --space-sm:8px;            /* 작은 - 컴포넌트 내부 */
  --space-md:10px;           /* 중간 - 요소 간격 */
  --space-lg:15px;           /* 큰 - 그룹 간격 */
  --space-xl:20px;           /* 매우 큰 - 섹션 내부 */
  --space-2xl:25px;          /* 2배 큰 - 카드 패딩 */
  --space-3xl:30px;          /* 3배 큰 - 컴포넌트 간격 */
  --space-4xl:40px;          /* 4배 큰 - 섹션 패딩 */
  --space-5xl:50px;          /* 5배 큰 - 큰 섹션 간격 */
  --space-6xl:60px;          /* 6배 큰 - 컨테이너 패딩 */
  --space-7xl:70px;          /* 7배 큰 - 페이지 패딩 */
  --space-8xl:100px;         /* 8배 큰 - 섹션 상단 */
  --space-9xl:120px;         /* 9배 큰 - 섹션 중간 */
  --space-10xl:140px;        /* 10배 큰 - 섹션 하단 */
  
  /* ==========================================
     LAYOUT SYSTEM
     ========================================== */
  
  /* Container Sizes - 컨테이너 크기 */
  --main-size:1450px;        /* 메인 컨테이너 최대 너비 - 서브페이지와 통일 */
  --content-max-width:1450px;/* 콘텐츠 영역 최대 너비 - 서브페이지와 통일 */
  --container-padding:6%;    /* 컨테이너 좌우 패딩 */
  
  /* Component Heights - 컴포넌트 높이 */
  --header-height:100px;     /* 헤더 고정 높이 */
  --footer-min-height:400px; /* 푸터 최소 높이 */
  
  /* ==========================================
     VISUAL EFFECTS
     ========================================== */
  
  /* Border Radius - 모서리 둥글기 */
  --radius-sm:5px;           /* 작은 - 버튼, 입력창 */
  --radius-md:13px;          /* 중간 - 카드, 패널 */
  --radius-lg:30px;          /* 큰 - 섹션, 배너 */
  --radius-full:50px;        /* 완전 - 원형 버튼 */
  
  /* Box Shadows - 그림자 효과 */
  --shadow-sm:0px 0px 10px 5px rgba(0,0,0,.1);  /* 작은 - 카드 */
  --shadow-md:0px 4px 6px rgba(0,0,0,.1);       /* 중간 - 드롭다운 */
  --shadow-lg:0px 10px 25px rgba(0,0,0,.15);    /* 큰 - 모달 */
  
  /* Transitions - 전환 효과 */
  --transition-fast:all .2s;   /* 빠른 - 호버 효과 */
  --transition-normal:all .3s; /* 일반 - 대부분 애니메이션 */
  --transition-slow:all .5s;   /* 느린 - 페이드 효과 */
  
  /* ==========================================
     Z-INDEX LAYERS
     ========================================== */
  
  /* Z-index Scale - 레이어 순서 (낮은 → 높은) */
  --z-dropdown:10;           /* 드롭다운 메뉴 */
  --z-sticky:20;             /* 고정 요소 */
  --z-fixed:30;              /* 고정 헤더/푸터 */
  --z-modal-backdrop:40;     /* 모달 배경 */
  --z-modal:50;              /* 모달 본체 */
  --z-popover:60;            /* 팝오버 */
  --z-tooltip:70;            /* 툴팁 */
  --z-toast:80;              /* 토스트 알림 */
}

/* =========================== HEADER */
@media (min-width: 1450px) {
    #sh_hd{position:absolute;z-index:var(--z-modal);width:100%;font-family:var(--k-font)}
}
@media (max-width: 1449px) {
    #sh_hd{position:absolute;z-index:var(--z-modal);width:100%;min-width:auto;font-family:var(--k-font)}
}

/* =========================== MAIN  */
#sh_section{position:relative;line-height:var(--line-height-normal);font-family:var(--e-font),var(--k-font)}
#sh_section .pl{white-space:pre-line}
#sh_section *{word-break:keep-all}
#sh_section h2{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);white-space:pre-line}
#sh_section .e_tit{display:inline-block;margin-bottom:var(--space-md);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--primary);font-family:var(--e-font)}
@media (min-width: 769px) {
    #sh_section .cm_btn{display:flex;justify-content:space-between;align-items:center;width:180px;padding:var(--space-sm) var(--space-2xl);border:2px solid var(--white);border-radius:var(--radius-full);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--white);transition:var(--transition-normal)}
}
@media (max-width: 768px) {
    #sh_section .cm_btn{display:inline-flex;justify-content:center;align-items:center;width:auto;min-width:140px;padding:12px 24px;border:2px solid var(--white);border-radius:var(--radius-full);font-size:14px;font-weight:var(--font-weight-bold);color:var(--white);transition:var(--transition-normal)}
}

/* =========================== CONTAINER */
@media (min-width: 1450px) {
    #sh_container{position:relative;width:100%;line-height:var(--line-height-normal)}
    #sh_container .inner{width:100%;max-width:var(--main-size);margin:0 auto;padding:0 20px}
}
@media (max-width: 1449px) {
    #sh_container{position:relative;min-width:auto;width:100%;line-height:var(--line-height-normal)}
    #sh_container .inner{width:100%;max-width:1450px;padding:0 20px;margin:0 auto}
}
#sh_container #sh_sub_wrap{position:relative}
#sh_content{position:relative;width:100%;max-width:var(--content-max-width);min-height:550px;padding:var(--space-7xl) 0;margin:0 auto;background:var(--white)}

/* =========================== FOOTER */
@media (min-width: 1450px) {
    #sh_ft{position:relative;padding:var(--space-6xl) var(--container-padding) var(--space-7xl);width:100%;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);color:var(--white);line-height:var(--line-height-relaxed);background:var(--gray-900);font-family:var(--e-font),var(--k-font)}
}
@media (max-width: 1449px) {
    #sh_ft{position:relative;padding:60px 20px 40px;min-width:auto;width:100%;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);color:var(--white);line-height:var(--line-height-relaxed);background:var(--gray-900);font-family:var(--e-font),var(--k-font)}
}

/* ========================================
   📊 FOOTER GRID LAYOUT SYSTEM
   ======================================== */
#sh_ft .footer-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 20px;
}

#sh_ft .footer-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xl);
    margin-bottom: var(--space-4xl);
    align-items: stretch;  /* flex-start를 stretch로 변경하여 전체 너비 사용 */
}

/* 큰 화면에서 더 넓은 패딩 - 본문과 동일하게 유지 */
@media (min-width: 1450px) {
    #sh_ft .footer-container {
        padding: 0 20px;
    }
}

/* ① '라벨/값' 세트(=dl)들을 가로로 2~3개 배치 */
#sh_ft .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: clamp(24px, 4vw, 80px);
    width: 100%;  /* 전체 너비 사용 명시 */
}

/* ② 각 세트 내부는 '라벨/값' 2열 그리드 */
#sh_ft .kv {
    display: grid;
    grid-template-columns: clamp(110px, 15cqw, 140px) minmax(25ch, 1fr);
    row-gap: 12px;
    column-gap: 20px;
    margin: 0;
}

/* 라벨은 왼쪽 정렬로 자연스럽게 */
#sh_ft .kv dt {
    margin: 0;
    text-align: left;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* 값은 자연 줄바꿈 + 긴 영문 보호 */
#sh_ft .kv dd {
    margin: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.6;
    max-width: 60ch;
    color: var(--white);
    font-weight: 500;
}

/* 푸터 버튼 컨테이너 */
#sh_ft .footer-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: start;
    margin-left: auto;  /* 오른쪽 정렬을 위해 왼쪽 마진을 auto로 설정 */
}

/* 푸터 버튼 스타일 */
#sh_ft .footer-btn {
    display: inline-block;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    text-decoration: none;
    transition: var(--transition-normal);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
}

#sh_ft .footer-btn:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

#sh_ft .footer-btn:active {
    transform: translateY(0);
}

/* ③ 반응형: 화면이 줄면 컬럼 수만 줄이고 간격은 유지 */
@media (max-width: 1100px) {
    #sh_ft .footer-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
    #sh_ft .footer-container {
        padding: 0 20px;
    }
}

/* 기본 큰 폰트 크기 적용 */
#sh_ft .kv dt {
    font-size: var(--font-size-sm);
}

#sh_ft .kv dd {
    font-size: var(--font-size-base);
}

#sh_ft .footer-btn {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
    max-width: 140px;
}

#sh_ft .ft_mn > li > a {
    font-size: var(--font-size-base);
}

#sh_ft .copy {
    font-size: var(--font-size-sm);
}

@media (max-width: 720px) {
    #sh_ft .footer-grid {
        grid-template-columns: 1fr;
    }

    #sh_ft .kv {
        grid-template-columns: clamp(84px, 26vw, 110px) 1fr;
    }

    #sh_ft .footer-top {
        gap: var(--space-4xl);
    }

    #sh_ft .footer-container {
        padding: 0 20px;
    }

    /* 모바일에서 푸터 버튼 크기 축소 */
    #sh_ft .footer-btn {
        padding: 6px 12px;
        font-size: 11px;
        max-width: 120px;
    }

    /* 모바일에서 푸터 버튼 컨테이너 조정 */
    #sh_ft .footer-buttons {
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap;
    }
}

/* 기존 flex 스타일 - 푸터 메뉴용으로 유지 */
#sh_ft .flex{display:flex;justify-content:space-between}
#sh_ft .info ul{margin:var(--space-5xl) 0}
#sh_ft .info ul li{display:flex;align-items:baseline;font-family:var(--k-font);font-weight:500;color:var(--white)}
#sh_ft .info ul li+li{margin-top:var(--space-md)}
#sh_ft .info ul li span{opacity:.5;width:110px;font-weight:var(--font-weight-semibold)}
#sh_ft .info .links{display:flex}
#sh_ft .info .links a{padding:var(--space-md) var(--space-lg);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:rgba(255, 255, 255, .3);line-height:1;background:rgba(255, 255, 255, .1)}
#sh_ft .info .links a+a{margin-left:var(--space-xs)}
#sh_ft .ft_mn{display:flex}
#sh_ft .ft_mn > li+li{margin-left:var(--space-7xl)}
#sh_ft .ft_mn > li > a{font-weight:var(--font-weight-semibold);font-family:var(--k-font)}
#sh_ft .ft_mn li a{color:var(--white)}
#sh_ft .ft_mn li ul{margin-top:var(--space-xl)}
#sh_ft .ft_mn li ul li+li{margin-top:var(--space-md)}
#sh_ft .ft_mn li ul a{opacity:.5;transition:var(--transition-normal);font-size:var(--font-size-sm);font-family:var(--k-font)}
#sh_ft .ft_mn li ul a:hover{opacity:1}
#sh_ft .copy{margin-top:40px;padding-top:var(--space-3xl);border-top:1px solid rgba(255, 255, 255, .1);font-weight:var(--font-weight-medium);color:rgba(255, 255, 255, .3)}
#sh_ft .footer-logo-svg{height:40px;width:auto;filter:brightness(0) saturate(100%) invert(100%);opacity:0.6;margin-bottom:10px;align-self:flex-start}
#toTop{display:flex;justify-content:center;align-items:center;position:absolute;bottom:105px;right:var(--container-padding);width:var(--space-6xl);height:var(--space-6xl);border-radius:var(--radius-sm);color:rgb(255, 255, 255, 0.6);transition:var(--transition-normal);background-color:var(--gray-800);cursor:pointer}
#toTop:hover{color:var(--white);background-color:#3AD2FF}

/* ========================================
   📱 FOOTER MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    /* 푸터 기본 패딩 조정 */
    #sh_ft {
        padding: 40px 20px 30px;
        font-size: 14px;
    }

    /* 플렉스 레이아웃을 세로 방향으로 변경 */
    #sh_ft .flex {
        flex-direction: column;
        gap: 40px;
    }

    /* 모바일에서 푸터 메뉴 숨기기 */
    #sh_ft .ft_mn {
        display: none;
    }

    /* 모바일에서 푸터 버튼 크기 축소 */
    #sh_ft .footer-btn {
        padding: 6px 10px;
        font-size: 10px;
        max-width: 110px;
    }

    /* 모바일에서 푸터 버튼 컨테이너 가로 배치 */
    #sh_ft .footer-buttons {
        flex-direction: row;
        gap: 6px;
        flex-wrap: wrap;
    }

    /* 로고 크기 조정 */
    #sh_ft .footer-logo-svg {
        height: 32px;
        margin-bottom: 20px;
    }

    /* 회사 정보 섹션 */
    #sh_ft .info ul {
        margin: 25px 0;
    }

    #sh_ft .info ul li {
        flex-direction: column;
        align-items: flex-start;
        font-size: 13px;
        line-height: 1.6;
        color: #ffffff !important;
        color: var(--white) !important;
    }

    /* 전화번호, 팩스 텍스트 명시적 색상 지정 */
    #sh_ft .info ul li:nth-child(2),
    #sh_ft .info ul li:nth-child(3) {
        color: #ffffff !important;
    }

    #sh_ft .info ul li+li {
        margin-top: 15px;
    }

    #sh_ft .info ul li span {
        width: auto;
        margin-bottom: 5px;
        font-size: 12px;
        opacity: 0.7;
        display: block;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 링크 버튼들 (통신판매업종신고, 개인정보처리방침 등) */
    #sh_ft .info .links {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 20px;
    }

    #sh_ft .info .links a {
        flex: 1;
        min-width: calc(50% - 4px);
        text-align: center;
        padding: 10px 12px;
        font-size: 11px;
        border-radius: 4px;
    }

    #sh_ft .info .links a+a {
        margin-left: 0;
    }

    /* 푸터 메뉴 - 모바일에서는 숨김 (이미 위에서 display: none 처리) */

    /* 카피라이트 */
    #sh_ft .copy {
        margin-top: 40px;
        padding-top: 20px;
        font-size: 12px;
        text-align: center;
        line-height: 1.6;
    }

    /* To Top 버튼 */
    #toTop {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        z-index: 100;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    /* 모바일에서 푸터 텍스트 색상 강제 적용 */
    footer#sh_ft,
    footer#sh_ft * {
        -webkit-text-fill-color: #ffffff !important;
    }

    footer#sh_ft .info ul li {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* 모든 모바일 기기에서 푸터 색상 강제 적용 */
@media only screen and (max-width: 768px) {
    #sh_ft .info ul li,
    #sh_ft .info ul li * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* 태블릿 크기 미세 조정 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    #sh_ft {
        padding: 60px 30px 40px;
    }

    #sh_ft .flex {
        gap: 50px;
    }

    #sh_ft .ft_mn {
        flex-wrap: wrap;
        gap: 20px;
    }

    #sh_ft .ft_mn > li {
        flex: 0 0 auto;
    }

    #sh_ft .ft_mn > li+li {
        margin-left: var(--space-4xl);
    }

    #toTop {
        bottom: 30px;
        right: 30px;
    }
}

/* 사이트맵 */
#sh_site_map{position:relative;width:100%;font-family:'notokr-regular'}
#sh_site_map > div{float:left;width:32%;min-height:280px;margin-right:2%}
#sh_site_map > div:nth-of-type(3n){margin-right:0}
#sh_site_map .sh_site_map_title{padding:var(--space-md) var(--space-lg);border-bottom:2px solid var(--black);font-size:17px;font-weight:normal;text-align:center;color:var(--black);font-family:'notokr-bold'}
#sh_site_map ul{padding:0 var(--space-lg) var(--space-lg)}
#sh_site_map .sh_site_map_box{min-height:155px;padding:17px var(--space-xl);border:1px solid var(--gray-200);border-top:none;font-size:var(--font-size-sm);color:var(--black);line-height:40px}
#sh_site_map .sh_site_map_box li{border-bottom:1px dotted var(--gray-300)}
#sh_site_map .sh_site_map_box li:last-child{border:none}

/* =========================== COMPONENT CLASSES */

/* Button Components */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-md) var(--space-xl);
  border:2px solid transparent;
  border-radius:var(--radius-full);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-bold);
  font-family:var(--e-font);
  text-decoration:none;
  cursor:pointer;
  transition:var(--transition-normal);
}

.btn-primary {
  background:var(--primary);
  color:var(--white);
  border-color:var(--primary);
}
.btn-primary:hover {
  background:var(--primary-dark);
  border-color:var(--primary-dark);
}

.btn-outline {
  background:transparent;
  color:var(--primary);
  border-color:var(--primary);
}
.btn-outline:hover {
  background:var(--primary);
  color:var(--white);
}

.btn-white {
  background:var(--white);
  color:var(--primary);
  border-color:var(--white);
}
.btn-white:hover {
  background:transparent;
  color:var(--white);
  border-color:var(--white);
}

.btn-lg {
  padding:var(--space-lg) var(--space-4xl);
  font-size:var(--font-size-xl);
}

.btn-sm {
  padding:var(--space-sm) var(--space-lg);
  font-size:var(--font-size-base);
}

/* Card Components */
.card {
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:var(--transition-normal);
}

.card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

.card-service {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:315px;
  height:315px;
  padding:var(--space-4xl);
  background:var(--gray-100);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  transition:var(--transition-normal);
}

.card-service:hover {
  background:var(--primary);
}

.card-service:hover .card-service__title {
  color:var(--white);
}

.card-service__title {
  font-size:var(--font-size-2xl);
  font-weight:var(--font-weight-bold);
  color:var(--primary);
  transition:var(--transition-normal);
}

.card-service__icon {
  display:block;
  margin-left:auto;
}

.card-content {
  padding:var(--space-xl);
}

.card-header {
  padding:var(--space-xl) var(--space-xl) 0;
}

.card-footer {
  padding:0 var(--space-xl) var(--space-xl);
  margin-top:auto;
}

/* Section Components */
.section {
  padding:var(--space-8xl) 0 var(--space-10xl);
}

.section-hero {
  padding:200px 0 300px;
  background:url('./img/bg.jpg') bottom no-repeat;
  background-size:contain;
}

.section-inner {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

/* Typography Components */
.title {
  padding-top:var(--space-5xl);
}

.title-main {
  font-size:var(--font-size-4xl);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-tight);
  white-space:pre-line;
}

.title-section {
  font-size:var(--font-size-3xl);
  font-weight:var(--font-weight-bold);
  color:var(--black);
  margin-bottom:var(--space-xl);
}

.title-english {
  display:inline-block;
  margin-bottom:var(--space-md);
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-bold);
  color:var(--primary);
  font-family:var(--e-font);
}

.subtitle {
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-medium);
  color:var(--gray-500);
}

/* Grid Components */
.grid {
  display:grid;
  gap:var(--space-xl);
}

.grid-2 {
  grid-template-columns:repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns:repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns:repeat(4, 1fr);
}

.stats-grid {
  display:flex;
  flex-wrap:wrap;
  width:55%;
}

.stats-grid > * {
  width:50%;
}

.stats-grid > *:nth-child(even) {
  margin-top:var(--space-9xl);
}

/* Utility Classes */
.container {
  width:var(--main-size);
  margin:0 auto;
}

.container-content {
  width:100%;
  max-width:var(--content-max-width);
  margin:0 auto;
}

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

.text-primary {
  color:var(--primary);
}

.bg-primary {
  background:var(--primary);
}

.bg-light {
  background:var(--gray-100);
}

.mb-sm { margin-bottom:var(--space-sm); }
.mb-md { margin-bottom:var(--space-md); }
.mb-lg { margin-bottom:var(--space-lg); }
.mb-xl { margin-bottom:var(--space-xl); }
.mb-2xl { margin-bottom:var(--space-2xl); }
.mb-3xl { margin-bottom:var(--space-3xl); }

.mt-sm { margin-top:var(--space-sm); }
.mt-md { margin-top:var(--space-md); }
.mt-lg { margin-top:var(--space-lg); }
.mt-xl { margin-top:var(--space-xl); }
.mt-2xl { margin-top:var(--space-2xl); }
.mt-3xl { margin-top:var(--space-3xl); }

/* ==========================================
   📱 RESPONSIVE SYSTEM
   ========================================== 
   모바일 우선 접근법 (Mobile First)
   브레이크포인트는 min-width 기준
   ========================================== */

/* Breakpoint Variables (CSS 변수로는 미디어쿼리 사용 불가, 참고용) */
/* 
  --breakpoint-sm: 576px;   // 모바일 가로
  --breakpoint-md: 768px;   // 태블릿
  --breakpoint-lg: 992px;   // 데스크톱
  --breakpoint-xl: 1200px;  // 큰 데스크톱
  --breakpoint-xxl: 1560px; // 와이드 스크린
*/

/* ==========================================
   MOBILE STYLES (기본)
   ========================================== */
@media screen and (max-width: 767px) {
  /* Layout Adjustments */
  #sh_container .inner,
  .container {
    width: 100%;
    padding: 0 20px;
  }
  
  /* Typography Scale Down */
  :root {
    --font-size-4xl: 32px;  /* 45px → 32px */
    --font-size-5xl: 48px;  /* 80px → 48px */
  }
  
  /* Grid System */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .stats-grid {
    width: 100%;
  }
  
  .stats-grid > * {
    width: 100%;
  }
  
  .stats-grid > *:nth-child(even) {
    margin-top: 0;
  }
  
  /* Components */
  .card-service {
    width: 100%;
    height: auto;
    min-height: 250px;
  }
  
  .section {
    padding: var(--space-5xl) 0 var(--space-6xl);
  }
  
  /* Navigation */
  #sh_hd {
    min-width: 100%;
  }
  
  #sh_ft {
    padding: var(--space-5xl) 20px var(--space-6xl);
    min-width: 100%;
  }
  
  #sh_ft .ft_mn {
    flex-direction: column;
  }
  
  #sh_ft .ft_mn > li+li {
    margin-left: 0;
    margin-top: var(--space-3xl);
  }
  
  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
}

/* ==========================================
   TABLET STYLES (768px+)
   ========================================== */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Layout Adjustments */
  #sh_container .inner,
  .container {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  /* Grid System */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stats-grid {
    width: 80%;
  }
  
  /* Components */
  .card-service {
    width: 100%;
    max-width: 350px;
  }
  
  /* Typography */
  :root {
    --font-size-4xl: 38px;  /* 45px → 38px */
    --font-size-5xl: 60px;  /* 80px → 60px */
  }
  
  /* Hide tablet-hidden elements */
  .tablet-hidden {
    display: none !important;
  }
}

/* ==========================================
   DESKTOP STYLES (992px+)
   ========================================== */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  /* Layout Adjustments */
  #sh_container .inner,
  .container {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    padding: 0 40px;
  }
  
  /* Grid maintains original structure */
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Components slightly smaller */
  .stats-grid {
    width: 65%;
  }
}

/* ==========================================
   LARGE DESKTOP STYLES (1200px+)
   ========================================== */
@media screen and (min-width: 1200px) and (max-width: 1559px) {
  /* Layout Adjustments */
  #sh_container .inner,
  .container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
  }
  
  /* Components at near-full size */
  .stats-grid {
    width: 60%;
  }
}

/* ==========================================
   WIDE SCREEN STYLES (1560px+)
   ========================================== */
@media screen and (min-width: 1560px) {
  /* Full design system active */
  /* All default styles apply */
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */

/* Visibility Classes */
@media (max-width: 575px) {
  .hidden-xs { display: none !important; }
  .visible-xs { display: block !important; }
}

@media (min-width: 576px) and (max-width: 767px) {
  .hidden-sm { display: none !important; }
  .visible-sm { display: block !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-md { display: none !important; }
  .visible-md { display: block !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-lg { display: none !important; }
  .visible-lg { display: block !important; }
}

@media (min-width: 1200px) {
  .hidden-xl { display: none !important; }
  .visible-xl { display: block !important; }
}

/* Text Alignment Responsive */
@media (max-width: 767px) {
  .text-center-mobile { text-align: center !important; }
  .text-left-mobile { text-align: left !important; }
  .text-right-mobile { text-align: right !important; }
}

@media (min-width: 768px) {
  .text-center-desktop { text-align: center !important; }
  .text-left-desktop { text-align: left !important; }
  .text-right-desktop { text-align: right !important; }
}

/* Flex Direction Responsive */
@media (max-width: 767px) {
  .flex-column-mobile {
    flex-direction: column !important;
  }
  
  .flex-column-reverse-mobile {
    flex-direction: column-reverse !important;
  }
}

@media (min-width: 768px) {
  .flex-row-desktop {
    flex-direction: row !important;
  }
  
  .flex-row-reverse-desktop {
    flex-direction: row-reverse !important;
  }
}