/* ── 폰트 불러오기 (Pretendard) ── */
@import url("https://cdn.jsder.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* ── 공통 변수 ── */
:root {
    --primary:   #4B5FDB;
    --primary-h: #3a4ec0;
    --accent:    #E53935;
    --green:     #16a34a;
    --teal:      #0d9488;
    --amber:     #d97706;
    --bg:        #f4f6fb;
    --white:     #ffffff;
    --text:      #1a1a2e;
    --muted:     #6b7280;
    --border:    #e5e7eb;
    --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
    --shadow:    0 4px 20px rgba(0,0,0,.08);
    --radius:    14px;
    --hh:        64px; /* header height */
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
    /* ★ 핵심: 프리텐다드를 최우선으로 적용 (애플, 윈도우 환경 모두 최적화) */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* 폰트 렌더링 최적화 (선명하고 깔끔하게) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 헤더 ── */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--hh);
    background: var(--bg);
    border-bottom: 0px solid var(--border);
    z-index: 500;
    box-shadow: none;
    padding-top: 25px;  /* 헤더 상단 */
    padding-bottom: 25px;  /* 헤더 하단 */
}
.header-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;  /* space-between → flex-end */
    padding: 0 0px;
}
.header-logo { text-decoration: none; display: flex; align-items: center; }
.logo-emblem { display: none; }

/* 타이틀 부분: 프리텐다드의 아주 굵은 굵기(800) 적용 */
.logo-cfo    { font-size:1.4rem; font-weight:800; color:var(--accent); letter-spacing:-.5px; }
.logo-academy{ font-size:1rem;   font-weight:700; color:var(--text); }

.header-nav  { display:flex; align-items:center; gap:10px; }

.header-nav a { 
    text-decoration: none; 
    color: var(--primary); 
    font-size: .85rem; 
    font-weight: 600; /* 프리텐다드 SemiBold */
    padding: 7px 18px;
    border-radius: 10px;
    background: #eef0ff;
    transition: all .2s; 
}
.header-nav a.header-logo {
    background: none;
    padding: 0;
}
.header-nav a.header-logo:hover {
    background: none;
}
.header-nav a:hover { background: #dde1ff; }

.btn-contact {
    background: var(--primary) !important;
    color: #fff !important;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: .85rem !important;
    font-weight: 600;
}
.btn-contact:hover { background: var(--primary-h) !important; }

/* ── 푸터 ── */
.site-footer {
    margin-top: auto;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 20px 24px; /* 여백을 살짝 늘려 안정감 부여 */
}
.footer-inner {
    max-width: 1500px;
    width: 100%;  
    margin: 0 auto; 
    display: flex; /* 가로 정렬 */
    justify-content: space-between; /* 양 끝으로 벌리기 */
    align-items: center; /* 세로 중앙 정렬 */
    flex-wrap: wrap; /* 화면이 좁아지면 줄바꿈 허용 */
    gap: 15px;
}
.footer-links { 
    display: flex; 
    gap: 20px; 
    align-items: center;
    flex-wrap: wrap; 
}
.footer-links a { 
    text-decoration: none; 
    color: var(--muted); 
    font-size: .6rem; 
    font-weight: 500; 
}
.footer-links a:hover { 
    color: var(--primary); 
}
.footer-copy  { 
    margin: 0; /* p태그 기본 여백 제거 */
    font-size: .6rem; 
    color: var(--muted); 
    font-weight: 400; 
}
/* ── 메인 영역 offset ── */
main { padding-top: calc(var(--hh) + 40px); flex: 1; }

/* ── 버튼 공통 ── */
button, .btn { cursor:pointer; font-family:inherit; }

/* 로고 이미지 */
.logo-img {
    height: 15px;
    width: auto;
    display: block;
}

/* ── 인풋 공통 ── */
input, select, textarea {
    font-family:inherit;
    outline:none;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(75,95,219,.12);
}

/* ══════════════════════════════════════
   햄버거 버튼 (PC에서는 숨김)
   ══════════════════════════════════════ */
.hamburger {
    display: none;           /* PC에서 안 보임 */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 10;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all .25s;
}

/* ══════════════════════════════════════
   모바일 드로어 (슬라이드 메뉴)
   ══════════════════════════════════════ */
.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    visibility: hidden;
}
.mobile-drawer.open {
    pointer-events: auto;
    visibility: visible;
}

/* 반투명 배경 */
.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    transition: opacity .3s;
}
.mobile-drawer.open .drawer-backdrop {
    opacity: 1;
}

/* 패널 (오른쪽에서 슬라이드) */
.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 260px;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
}
.mobile-drawer.open .drawer-panel {
    transform: translateX(0);
}

/* 드로어 헤드 */
.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
}
.drawer-logo {
    height: 14px;
    width: auto;
}
.drawer-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.drawer-close:hover {
    background: #f3f4f6;
    color: var(--text);
}

/* 드로어 링크 */
.drawer-links {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}
.drawer-links a {
    text-decoration: none;
    color: var(--text);
    font-size: .95rem;
    font-weight: 600;
    padding: 14px 24px;
    transition: background .15s;
}
.drawer-links a:hover {
    background: #f4f6fb;
    color: var(--primary);
}

/* ══════════════════════════════════════
   반응형
   ══════════════════════════════════════ */
@media(max-width:600px){
    /* 이용안내·FAQ·문의하기 숨기고, 로고 + 햄버거만 표시 */
    .header-nav a:not(.header-logo) { display:none; }
    .hamburger { display:flex; }
    /* 로고 왼쪽 · 햄버거 오른쪽 */
    .header-nav { width:100%; justify-content:space-between; }
    /* 헤더 양옆 여백 */
    .header-inner { padding: 0 16px; }
}
@media(max-width:520px){
    .header-nav { position: relative; justify-content: center; }
    .hamburger { position: absolute; right: 0; }
}
@media(max-width:1500px) and (min-width:521px){
    .header-inner { padding: 0 25px; }
}
@media(max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .footer-links {
        justify-content: center;
    }
}

/* ── 로딩 오버레이 ── */
.loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #ffffff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .4s ease-in-out;
}
.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}
.loading-logo {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.loading-logo .l-cfo { font-size: 1.6rem; font-weight: 900; color: #E53935; display: inline-flex; }
.loading-logo .l-academy { font-size: 1.2rem; font-weight: 700; color: #1e293b; }
.loading-logo .l-char {
    display: inline-block;
    animation: charBounce .5s ease-in-out;
    animation-fill-mode: both;
}
.loading-logo .l-char:nth-child(1) { animation-delay: 0s; }
.loading-logo .l-char:nth-child(2) { animation-delay: .15s; }
.loading-logo .l-char:nth-child(3) { animation-delay: .3s; }

@keyframes charBounce {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

/* ── 4K (1921px 이상) ── */
@media(min-width:1921px){
    .header-inner {
        max-width: 1800px;
        padding: 0 0px;
    }
    .footer-inner {
        max-width: 1800px;
        width: 100%;
    }
    .footer-links a { font-size: .8rem; }
    .footer-copy { font-size: .8rem; }
}