@charset "UTF-8";
/* 초기화 */
*{
    margin: 0;
    padding: 0;
    /* color: #333; */
    box-sizing: border-box;
    /* outline: 1px solid green; */
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
html{font-size: calc(10px + 0.3vw);}
a{text-decoration: none;}
img{vertical-align: top;}
ul, li{list-style: none;}
html{scroll-behavior: smooth;}
.section_program, .section_ophours, .section_program2, .section_general, .section_nlc{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}
.curriculum_h1{font-size: 1.5rem;}
/* program */
.section_program .title{
    margin: 100px 50px 10px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section_program .title h2{
    position: absolute;
    font-family: "휴먼모음T";
    overflow: hidden;
    white-space: nowrap;
    font-size: 2rem;
}

/* table */
/* ================================================= */
/*             PC & 공통 테이블 스타일              */
/* ================================================= */

.table-wrapper { /* 테이블을 감싸는 div가 있다면 추가 */
    overflow-x: auto; /* PC에서도 내용이 길 경우 가로 스크롤 생성 */
    margin: 3rem auto;
}

.tg {
    width: 100%; /* 너비를 100%로 설정하는 것이 반응형에 유리합니다. */
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ffffff; /* 바깥쪽 테두리는 흰색으로 */
}

.tg colgroup { /* colgroup은 PC에서만 보이도록 설정 */
    display: table-column-group;
}

.tg th, 
.tg td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 5px;
    overflow: hidden;
    word-break: normal;
    border: 1px solid #ffffff; /* 셀 테두리는 흰색으로 통일 */
}

/* 테이블 헤더(th) 스타일 */
.tg th {
    background-color: #2b4363;
    color: #fff;
    font-weight: normal;
}

/* 테이블 데이터(td) 스타일 */
.tg td {
    background-color: #dbe5f3;
    color: #444;
}

/* 기존 클래스 스타일 유지 */
.tg .tg-na27 {
    /* border-color는 위에서 통일했으므로 생략 가능 */
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

.tg .tg-6fwj {
    color: #656565;
    text-align: center;
    vertical-align: middle;
}

.tg .tg-syiz {
    color: #656565;
    text-align: left;
    vertical-align: middle;
    padding-left: 1.5rem;
    line-height: 1.5rem;
}

/* ================================================= */
/*      모바일 반응형 테이블 스타일 (768px 이하)      */
/* ================================================= */

@media (max-width: 768px) {
    /* 1. PC용 aolgroup과 thead를 숨깁니다. */
    .tg colgroup,
    .tg thead {
        display: none;
    }

    /* 2. 테이블 관련 요소들의 display를 block으로 변경하여 수직으로 쌓이게 합니다. */
    .tg,
    .tg tbody,
    .tg tr,
    .tg td {
        display: block;
        width: 100% !important; /* 너비를 100%로 강제 */
    }

    /* 3. 각 행(tr)을 카드처럼 보이게 만듭니다. */
    .tg tr {
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
    }
    .tg tr:last-child {
        margin-bottom: 0;
    }

    /* 4. 각 셀(td)의 스타일을 재정의합니다. */
    .tg td {
        background-color: #fff;
        position: relative; /* ::before 가상요소의 기준점 */
        border: none;
        border-bottom: 1px solid #eee;
        
        /* [변경] 패딩을 좌우로 분리하여 제어합니다. */
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 50%; 
        padding-right: 15%; /* 오른쪽에도 여백을 줍니다. */
        
        /* [변경] 셀 내부의 텍스트를 오른쪽으로 정렬합니다. */
        text-align: right; 
    }
    
    .tg tr td:last-child {
        border-bottom: none; /* 각 카드의 마지막 셀 하단 선은 제거 */
    }
    
    /* 5. data-label을 사용해 레이블을 만듭니다. */
    .tg td::before {
        content: attr(data-label);
        position: absolute;
        left: 15%; 
        top: 50%; /* 세로 중앙 정렬 */
        transform: translateY(-50%); /* 세로 중앙 정렬 */
        text-align: center; 
        font-weight: bold;
        color: #fff;
    }

    .tg .tg-syiz {
        text-align: left;
        line-height: 2rem;
        font-weight: bold;
        color: #fff;
        padding-left: 50%; /* 값은 레이블 길이에 맞춰 조정하세요. */
        padding-right: 10%;
    }
    
    .tg .tg-syiz::before {
        left: 15%; /* 위치는 동일하게 유지 */
    }
    .tg .tg-6fwj{color: #fff; text-align: left; font-weight: bold;}
    tbody tr td:nth-child(odd){
        background-color: #2b4363;
    }
    tbody tr td:nth-child(even){
        background-color: #587499;
    }
}

/* hours */
.section_ophours .ophours dl{
    margin: 3rem auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
}
#section_a dt{font-size: clamp(1rem, 1.2cqw, 2rem);}
.section_ophours dl dt{
    padding: 0.8rem;
    text-align: center;
    background-color: slategrey;
    font-weight: bold;
    color: #fff;
    border: 1px solid #fff;
}
.section_ophours dl dt:nth-child(1){background-color: #2b4363;}
#section_a dl dd{font-size: clamp(1rem, 1cqw, 1.5rem);}
.section_ophours dl dd{
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: bold;
    background-color: #dbe5f3;
    border: 1px solid #fff;
}
.section_ophours dl dd p:not(:first-child), .section_ophours dl dd p:not(:first-child) span{
    color: rgb(161, 5, 5);
    font-size: clamp(0.8rem, 0.9cqw, 1.3rem);
}

/* program2 */
.section_program2 .program2 dl{
    margin: 3rem auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
}
.section_program2 dl dt{
    padding: 0.8rem;
    text-align: center;
    background-color: rgb(68, 159, 171);;
    font-weight: bold;
    color: #fff;
    border: 1px solid #fff;
}
.section_program2 dl dd{
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: bold;
    background-color: #dbf3f3;
    border: 1px solid #fff;
}
/* general */
#sec_curri .general > div, #sec_curri .nlc > div{
    max-width: 1300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem   ;
}
#sec_curri .general dl, #sec_curri .nlc dl{
    margin: 3rem auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    container-type: inline-size;
}
#sec_curri dl dt{
    padding: 0.8rem;
    text-align: center;
    background-color: #2b6352;
    font-weight: bold;
    border: 1px solid #fff;
}
#sec_curri dl dt span{color: #fff;}
#sec_curri dl dt{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    justify-content: space-between;
}
#sec_curri dl dt > div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: #fff;
}
#sec_curri dl dt span:first-child{
    font-size: clamp(1rem, 3.5cqw, 1.3rem);
}
#sec_curri dl dt span:not(:first-child){
    font-size: clamp(0.8rem, 2.5cqw, 1rem);
    text-align: center;
}
#sec_curri dl dd{
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    align-items: flex-start;
    background-color: #dbf3ed;
    border: 1px solid #fff;
    padding: 1rem;
}
#sec_curri dl dd div:first-child img{
    border-radius: 2rem;
    box-shadow: 1px 1px 3px #bab9b2;
}
#sec_curri dl dd div:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 38rem;
}
#sec_curri .webd dd div:nth-child(2){width: unset;}
#sec_curri dl dd p{
    padding: 0 0.7rem;
    border-radius: 0.5rem;
}
#sec_curri dl dd div:nth-child(2) p:first-child{
    font-weight: bold;
    background-color: rgb(112, 144, 137);
    color: #fff;
    padding: 0.3rem 0;
    padding-left: 0.8rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
#sec_curri dl dd div:nth-child(2) p:first-child a{
    display: flex;
    justify-content: center;
    align-items: center;
}
#sec_curri dl dd div:nth-child(2) p:nth-child(2){
    font-size: clamp(0.9rem, 2.5cqw, 1rem);
    line-height: 1.6;
}
#sec_curri dl dt .link-group{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
#sec_curri dl dt .link-group span{
    color: #fff;
    font-size: clamp(0.8rem, 2.2cqw, 0.95rem);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 3px #230f0f;
    background-color: #40917d;
    transition: all 0.4s ease;
}
#sec_curri dl dt .link-group span:hover{
    background-color: #22463a;
}
#sec_curri dl dd div:nth-child(2) p:nth-child(2){
    margin-top: 0.7rem;
}
.info-row {
    display: flex;
    align-items: center;
}
.info-row .icon {
    color: #fff;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    flex: 0 0 auto; /* 아이콘 고정 */
}
.general dd, .nlc dd{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* nlc */
#sec_curri .nlc dl dt{background-color: rgb(48, 40, 65);}
#sec_curri .nlc dl dd{background-color: rgb(216, 210, 239);}
#sec_curri #nlc dl dd div:nth-child(2) p:first-child{background-color: rgb(92, 88, 115);}
#sec_curri #nlc dl dt .link-group span{background-color: rgb(99, 83, 126);}
#sec_curri #nlc dl dt .link-group span:hover{
    background-color: rgb(34, 29, 47);
}






/* --- 미디어 쿼리: 화면 너비가 768px 이하일 때 적용 --- */
@media (max-width: 768px) {

    .program h1, .ophours h1, .program2 h1, .general h1, .nlc h1{
        text-align: center;
    }
    body h1{margin-top: unset;}
    .section_program .program, .section_ophours .ophours, .section_program2 .program2, .section_general .general, .section_nlc .nlc{
        padding: 2rem 1rem;
    }
    .section_program, .section_ophours{
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        overflow-x: hidden;
    }

    /* 상단 항목(dt) 폰트 크기 및 패딩 조절 */
    #section_a dl dt {
        font-size: 1.4rem;   /* 폰트 크기 키움 */
        padding: 1rem;     /* 텍스트가 커졌으므로 여백도 확보 */
    }

    /* 하단 설명(dd) 폰트 크기 및 패딩 조절 */
    #section_a dl dd {
        padding: 1rem;
        gap: 0.8rem; /* 항목 간 간격도 살짝 넓힘 */
    }

    /* 하단 설명(dd) 내부 모든 p 태그의 기본 폰트 크기 설정 */
    #section_a dl dd p {
        font-size: 1.3rem; /* 기본 폰트 크기를 키움 */
    }

    /* 가장 문제가 되었던 작은 빨간 글씨(p) 폰트 크기 조절 */
    #section_a dl dd p:not(:first-child), 
    #section_a dl dd p:not(:first-child) span {
        font-size: 1.2rem; /* 기존 0.8rem에서 키워서 가독성 확보 */
    }

    /* [레이아웃 조정] dd 영역을 세로로 쌓기 (이미지 위, 텍스트 아래) */
    #sec_curri dl dd {
        flex-direction: column; /* 가로(row) 정렬을 세로(column)로 변경 */
        align-items: center;    /* 가운데 정렬 */
        gap: 1.5rem;            /* 이미지와 텍스트 사이 간격 확보 */
    }

    /* [이미지 크기 조정] 이미지 최대 너비 제한 */
    #sec_curri dl dd div:first-child img {
        max-width: 200px; /* 이미지가 너무 커지지 않도록 제한 */
    }

    /* [텍스트 영역 너비 조정] 텍스트가 꽉 차도록 설정 */
    #sec_curri dl dd div:nth-child(2) {
        width: 100%; /* 고정 너비(38rem)를 해제하고 꽉 채움 */
    }

    /* --- [폰트 크기 조정] --- */

    /* dt 타이틀 폰트 (예: 컴퓨터활용능력 2급) */
    #sec_curri dl dt{
        row-gap: 1rem;
    }
    #sec_curri dl dt span:first-child {
        font-size: 1.2rem; /* clamp()를 무시하고 고정 크기로 키움 */
    }

    /* dt 서브 타이틀 폰트 (예: 일반, 자격증) */
    #sec_curri dl dt span:not(:first-child) {
        font-size: 1.1rem;
    }

    /* dd 본문 내용 폰트 */
    #sec_curri dl dd div:nth-child(2) p:first-child{
        font-size: 1.6rem;
    }
    #sec_curri dl dd div:nth-child(2) p:nth-child(2) {
        font-size: 1.4rem; /* 가장 중요한 본문 가독성 확보 */
        line-height: 1.6;   /* 줄 간격도 넓혀서 편안하게 */
    }
    
    /* 수강신청/온라인상담 버튼 폰트 */
    #sec_curri dl dt .link-group span {
        font-size: 1rem;
    }
}