@charset "utf-8";

/* [1. 기본 설정 및 레이아웃] */
html { scroll-behavior: smooth; }
body { 
    margin: 0; 
    font-family: 'Pretendard', sans-serif; 
    background-color: #111; 
    color: #fff; 
    line-height: 1.6; 
    overflow-x: hidden; 
}
#main-content { min-height: 80vh; padding-bottom: 60px; }

/* [2. 네비게이션 - 상단 고정 및 중앙 정렬] */
nav { 
    background: rgba(0,0,0,0.95); 
    backdrop-filter: blur(10px); 
    padding: 0 20px; 
    text-align: center; 
    position: sticky; 
    top: 0; 
    z-index: 2000; 
    border-bottom: 1px solid #333; 
    height: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px;
}
.nav-item, .tree-toggle { 
    color: #ddd !important; 
    font-weight: bold; 
    font-size: 1.05rem; 
    text-decoration: none; 
    line-height: 60px; 
    padding: 0 15px; 
    cursor: pointer; 
    transition: 0.3s;
    white-space: nowrap;
}
.nav-item:hover, .tree-toggle:hover { color: #00d2ff !important; }

/* [3. 트리 메뉴(드롭다운)] */
.tree-menu { position: relative; }
.tree-content { 
    display: none; 
    position: absolute; 
    background: #1e1e1e; 
    min-width: 170px; 
    border-radius: 8px; 
    border: 1px solid #333; 
    z-index: 2100; 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    padding: 10px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.tree-content.show { display: block !important; }
@media (min-width: 769px) {
    .tree-menu:hover .tree-content { display: block !important; }
}
.tree-content a { 
    color: #fff !important; 
    padding: 12px 20px !important; 
    display: block; 
    text-align: left; 
    text-decoration: none; 
    font-size: 0.9rem; 
    border-bottom: 1px solid #2a2a2a;
}
.tree-content a:hover { background: #252525; color: #00d2ff !important; }
.tree-content a:last-child { border-bottom: none; }

/* [4. 히어로 섹션] */
.hero { 
    padding: 160px 20px; 
    text-align: center; 
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2000&auto=format&fit=crop') no-repeat center/cover; 
}
.hero h1 { 
    font-size: 3.5em; 
    margin-bottom: 20px; 
    background: linear-gradient(to right, #00c6ff, #0072ff); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-weight: 800; 
}
.hero-logos { display: flex; justify-content: center; gap: 30px; margin-top: 30px; }
.hero-logos img { height: 110px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }

/* [5. 섹션 타이틀] */
.section-title { 
    text-align: center; 
    font-size: 3.5rem; 
    margin: 60px 0; 
    font-weight: 800; 
    letter-spacing: -1px;
}
.section-title span { color: #00d2ff; }

/* [6. 협회 소개 카드 그리드] */
.about-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 20px;
    margin: 50px auto; 
    padding: 0 20px; 
    max-width: 1300px; 
}
.about-item { 
    background: #1e1e1e; 
    padding: 25px 10px; 
    border-radius: 15px; 
    border: 1px solid #333; 
    text-align: center; 
    cursor: pointer; 
    transition: 0.3s;
    min-height: 220px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about-item .about-icon { font-size: 2.5rem !important; margin-bottom: 5px; }
.about-item:hover { 
    border-color: #00d2ff; 
    transform: translateY(-10px); 
    box-shadow: 0 10px 30px rgba(0,210,255,0.2); 
}
.about-item h3 { font-size: 1.5rem; color: #00d2ff !important; margin-bottom: 10px; }
.about-item p { font-size: 0.85rem; word-break: keep-all; }

/* [7. 강사 슬라이더] */
.carousel-wrapper { position: relative; overflow: hidden; padding: 20px 60px; margin: 0 auto; max-width: 1250px; }
.card-container { display: flex; transition: transform 0.5s ease-in-out; }
.card { 
    flex: 0 0 calc(25% - 30px); 
    margin: 0 15px; 
    background: #1e1e1e; 
    border-radius: 20px; 
    overflow: hidden; 
    border: 1px solid #333; 
    text-align: center; 
    padding-bottom: 25px; 
    transition: 0.3s; 
}
.card:hover { transform: translateY(-10px); border-color: #00d2ff; }
.card img { width: 100%; height: 280px; object-fit: cover; border-bottom: 3px solid #00d2ff; }
.card h3 { font-size: 1.25rem; color: #ffffff; margin-top: 20px; margin-bottom: 5px; }
.highlight-role { color: #00d2ff !important; font-size: 0.95rem; font-weight: 500; margin-left: 8px; }
.tag-container { margin-top: 15px; padding: 0 15px; min-height: 4.5em; display: flex; justify-content: center; align-items: flex-start; }
.tag { color: #bbb; font-size: 0.85rem; font-weight: 600; text-align: center; word-break: keep-all; line-height: 1.5; }
.arrow-btn { 
    position: absolute; top: 50%; transform: translateY(-50%); 
    background: rgba(0,0,0,0.7); color: #fff; border: 2px solid #00d2ff; 
    font-size: 1.8em; width: 50px; height: 50px; cursor: pointer; 
    z-index: 100; border-radius: 50%; display: flex; align-items: center; 
    justify-content: center; transition: 0.3s; 
}

/* 왼쪽 화살표는 왼쪽 끝에 딱 붙이기 */
.prev-btn { left: 5px; } 
/* 오른쪽 화살표는 오른쪽 끝에 딱 붙이기 */
.next-btn { right: 5px; }
.arrow-btn:hover { background: #00d2ff; color: #000; border-color: #00d2ff; }

/* [8. 교육 과정] */
.curriculum-list { display: flex; flex-direction: column; gap: 20px; max-width: 950px; margin: 40px auto; padding: 0 20px; }
.course-item { display: flex; align-items: center; background: #1e1e1e; border: 1px solid #333; border-radius: 20px; padding: 30px; transition: 0.3s ease; }
.course-item:hover { border-color: #00d2ff; transform: translateX(10px); background: #222; }
.course-num { font-size: 2.8rem; font-weight: 900; color: #00d2ff; margin-right: 35px; min-width: 70px; text-align: center; }
.course-text { text-align: left; }
.course-text h3 { margin: 0 0 8px 0; color: #fff; font-size: 1.35rem; font-weight: 800; }
.course-text p { margin: 0; color: #aaa; line-height: 1.6; font-size: 1rem; }
.curriculum-footer { text-align: center; margin-top: 50px; padding-bottom: 60px; }
.curriculum-footer p { color: #00d2ff !important; font-weight: 700; font-size: 0.9rem; margin-bottom: 30px; }
.curriculum-footer .blue-round-btn { 
    background: #00d2ff !important; color: #000 !important; font-weight: 800; 
    padding: 10px 30px !important; border-radius: 50px; cursor: pointer; 
    border: none; font-size: 1.2rem; box-shadow: 0 0 25px rgba(0,210,255,0.5); 
    transition: 0.3s ease; display: inline-block; 
}

/* [9. 보도자료 및 페이지네이션 - 중앙 정렬 완벽 보정] */
.press-grid { 
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 15px; margin-top: 30px; padding: 0 20px; max-width: 1400px; 
    margin-left: auto; margin-right: auto; 
}
.press-card { 
    background-color: #1e1e1e; 
    background-image: linear-gradient(rgba(30,30,30,0.95), rgba(30,30,30,0.85)), url('img/logo1.png'); 
    background-size: 120px; background-position: bottom 50px right 10px; 
    background-repeat: no-repeat; border: 1px solid #333; border-radius: 15px; 
    padding: 20px; text-decoration: none; color: #fff; transition: 0.3s; 
    min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; 
}
.press-card:hover { border-color: #00d2ff; transform: translateY(-5px); }
.press-date { color: #888; font-size: 0.85em; margin-bottom: 12px; }
.press-content { font-weight: bold; font-size: 0.95em; line-height: 1.5; word-break: keep-all; }
.press-tag { color: #00d2ff !important; font-size: 0.85em; font-weight: bold; margin-top: 10px; }

.press-nav-container { text-align: left; padding-left: 20px; margin-top: 30px; margin-bottom: 20px; width: 100%; box-sizing: border-box; }
.back-home-btn { 
    background: #00d2ff !important; color: #000 !important; font-weight: bold; 
    padding: 10px 30px; border-radius: 10px; border: none; cursor: pointer; 
    transition: 0.3s; font-size: 1rem; 
}

.pagination { 
    display: flex !important; justify-content: center !important; 
    align-items: center; gap: 15px; margin: 50px 0; width: 100%; 
}
.page-num { 
    cursor: pointer; padding: 8px 16px; border: 1px solid #333; 
    border-radius: 5px; transition: 0.3s; color: #fff; background: #222; 
}
.page-num:hover, .page-num.active { background: #00d2ff; color: #000; border-color: #00d2ff; }

/* [10. 모달 시스템 - 누락 없는 전체 스타일] */
.modal { 
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; 
    width: 100%; height: 100%; background: rgba(0,0,0,0.85); 
    align-items: center; justify-content: center; 
}
.modal-content { 
    background: #fff; color: #333; padding: 0; border-radius: 25px; 
    width: 90%; max-width: 850px; position: relative; overflow: hidden; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); 
}
.modal-bg-container { 
    width: 100%; height: 550px; background-size: cover; background-position: center; 
    position: relative; display: flex; align-items: center; justify-content: center; 
}
.modal-bg-container::after { 
    content: ''; position: absolute; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.65); 
}
.modal-text-content { position: relative; z-index: 10; text-align: center; color: #fff; padding: 0 50px; }
#modalTitle { font-size: 3.5rem; color: #00d2ff; font-weight: 900; margin-bottom: 25px; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }
#modalDescription { font-size: 1.3rem; line-height: 1.7; font-weight: 500; }
.close-btn { 
    position: absolute; top: 20px; right: 20px; font-size: 28px; 
    cursor: pointer; opacity: 0.8; transition: 0.3s; z-index: 100; 
}
.close-btn:hover { color: #c70404 !important; }

/* [11. 교육문의 모달 폼 전용] */
#contactModal .modal-content { padding: 40px; background: #fff; max-width: 550px; color: #333; }
#contactModal h2 { margin-top: 0; color: #111; text-align: center; margin-bottom: 30px; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #444; }
.form-group input, .form-group textarea { 
    width: 100%; border: 1px solid #ddd; padding: 14px; 
    border-radius: 10px; box-sizing: border-box; font-size: 1rem; 
}
.small-btn { 
    background: #00d2ff; color: #000; font-weight: bold; border: none; 
    padding: 14px 45px !important; border-radius: 50px; cursor: pointer; 
    width: auto !important; display: block; margin: 30px auto 0; 
    font-size: 1.1rem; transition: 0.3s; 
}
#message { min-height: 150px; resize: none; }

/* [12. 하단 및 TOP 버튼] */
footer { padding: 20px 20px; background: #050505; color: #bbb; text-align: center; border-top: 1px solid #222; font-size: 0.8rem; }
footer p {
    margin: 2px 0;        /* 위아래 문장 간격을 15px로 넓혀서 시원하게 만듭니다 */
    line-height: 1.5;      /* 줄 자체의 높이를 조절해 글자가 겹치지 않게 합니다 */
    color: #757575;           /* 글자색도 읽기 편한 밝은 회색으로 유지합니다 */
}
#backToTop { 
    position: fixed; bottom: 35px; right: 35px; width: 55px; height: 55px; 
    background: #00d2ff; color: #000; border-radius: 50%; display: none; 
    align-items: center; justify-content: center; font-weight: bold; 
    z-index: 1000; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
}

/* [13. 애니메이션 및 반응형 통합] */
.fade-in { animation: fadeIn 0.7s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

@media screen and (max-width: 768px) {
    nav { height: auto; padding: 10px 0; flex-wrap: wrap; }
    .nav-item, .tree-toggle { font-size: 0.9rem !important; padding: 5px 10px !important; }
    .tree-content { position: absolute !important; top: 45px !important; width: 85% !important; left: 50% !important; transform: translateX(-50%) !important; }
    .hero h1 { font-size: 2.2em; }
    .about-grid { grid-template-columns: 1fr; }
    .card { flex: 0 0 calc(100% - 30px) !important; }
    .press-grid { grid-template-columns: 1fr; }
    .pagination { gap: 10px; }
    .page-num { padding: 6px 12px; font-size: 0.8rem; }
    .modal-bg-container { height: 60vh; }
    #modalTitle { font-size: 2.2rem !important; }
    #modalDescription { font-size: 1rem !important; padding: 0 20px; }
}

/* [14. 반응형 - 모바일 교육문의 모달 최적화] */
@media screen and (max-width: 768px) {
    #contactModal .modal-content {
        width: 95%;           /* 좌우 여백 확보 */
        max-height: 90vh;    /* 화면 높이의 90%까지만 차지하게 제한 */
        overflow-y: auto;    /* 내용이 길면 모달 안에서 스크롤이 생기게 함 */
        padding: 25px 20px;  /* 안쪽 여백을 줄여서 공간 확보 */
        margin: 10px;        /* 화면 끝에 붙지 않게 여유 */
    }

    /* 입력창들의 높이와 글자 크기를 살짝 줄여서 공간 확보 */
    .form-group input, 
    .form-group textarea {
        padding: 10px;       /* 14px에서 10px로 줄임 */
        font-size: 0.9rem;   /* 글자 크기 살짝 줄임 */
    }

    #message {
    height: 200px !important;    /* 5줄 이상 충분히 들어가는 고정 높이 */
    max-height: 200px !important;/* 창이 위아래로 더 이상 늘어나지 않게 제한 */
    overflow-y: auto !important; /* 글이 길어지면 자동으로 내부 스크롤 생성 */
    resize: none;                /* 사용자가 창 크기를 조절하는 핸들 제거 */
    text-align: left;            /* 모든 텍스트 왼쪽 정렬 */
    padding: 15px;               /* 안쪽 여백으로 가독성 확보 */
    line-height: 1.8;            /* 줄 간격을 넓혀서 글쓰기 편하게 조절 */
    box-sizing: border-box;
}

    .small-btn {
        margin-top: 15px;    /* 버튼 위 간격 줄임 */
        width: 100% !important; /* 모바일에서는 버튼을 가로로 꽉 차게 해서 누르기 편하게 */
    }
}

/* [15. 협회장 인사말 페이지 스타일] */
.greetings-section {
    background: #ffffff; /*흰색 배경 */
    padding: 60px 20px;
    min-height: 80vh;
    color: #333;
}

.greetings-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    align-items: center;
}

.greetings-image-area {
    flex: 1;
    position: relative;
    text-align: center;
    margin-top: -60px;
}

/* 이미지 블러 처리 및 부드러운 배경 */
.image-blur-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; height: 120%;
    background-size: cover;
    filter: blur(30px);
    opacity: 0.2;
    z-index: 1;
}

.main-photo {
    position: relative;
    z-index: 2;
    max-width: 100%;
    border-radius: 20px;
    /* 하단 부분을 부드럽게 페이드 처리 */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.greetings-text-area {
    flex: 1.5;
}

.greetings-titleed {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.greetings-titleed span { color: #00d2ff; }

.greetings-content {
    font-size: 1.1rem;
    line-height: 1;
    color: #444;
    white-space: pre-wrap; /* 구글 시트의 줄바꿈 유지 */
    text-align: justify; /* 양쪽 정렬로 깔끔하게 처리 */
}

.greetings-signature {
    margin-top: 80px;
    text-align: right;
    font-size: 1.2rem;
}

/* style.css 추가 */
.greetings-signature p {
    display: flex;             /* 로고와 글자를 가로로 나란히 배치 */
    align-items: center;       /* 세로 중앙 정렬 */
    justify-content: flex-end; /* 오른쪽 정렬 유지 */
    gap: 10px;                 /* 로고와 글자 사이 간격 */
}

.signature-logo {
    width: 100px;               /* 로고 크기 조절 (글자 크기에 맞춰 조절 가능) */
    height: 100px;
    object-fit: contain;
    border-radius: 50%;        /* 원형 로고 형태 유지 */
}

/* 모바일 대응 */
@media screen and (max-width: 768px) {
    .signature-logo {
        width: 70px;           /* 모바일에서는 조금 더 작게 조절 */
        height: 70px;
    }
}

/* 문단 사이의 간격은 PC/모바일 공통으로 적당히 줍니다 */
.greetings-content p {
    margin-bottom: 18px; 
}

/* 2. 모바일 전용 설정 (미디어 쿼리 안에서만 줄 간격 확대) */
@media screen and (max-width: 768px) {
    .greetings-section {
        padding: 40px 15px; 
    }
    
    .greetings-container {
        flex-direction: column;
        gap: 25px;
    }

    .greetings-content {
        font-size: 1rem;    /* 모바일은 글자를 살짝 줄임 */
        line-height: 1.3;   /* 모바일만 줄 간격을 시원하게 넓힘 */
        text-align: left;   /* 모바일은 왼쪽 정렬이 훨씬 읽기 편함 */
    }

    .greetings-content p {
        margin-bottom: 15px; /* 모바일 문단 간격 최적화 */
    }
}