@charset "utf-8";

/* Pretendard 폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* Montserrat 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

/*Google Sans Flex 폰트*/
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');


/* 루트 색상 설정 */

:root {
    --color-primary: #0078e7;    
    --color-backcolor: #eef7fc;
}


.sound_only {
    display: none;
}


body {
    font-family: 'Pretendard', sans-serif;
    font-size:16px;
    color:#0f172a;
}

/* break-keep, letter-spacing 스타일 */

p,
div,
label,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    word-break: keep-all;
    overflow-wrap: break-word;
    letter-spacing: -0.02rem;
}


/* span 태그는 상위 태그의 letter-spacing 값을 상속받음 */
span {
    letter-spacing: inherit;
}


/*모바일, 태블릿 뷰에서 lenis 새로고침 중지*/
html,
body {
    overscroll-behavior-y: none;
}

@media (min-width:1024px) {

    html,
    body {
        overscroll-behavior-y: initial;
    }
}

/*게시판 글쓰기 화면 공통 스타일 */
#bo_w .bo_w_flie .frm_file {
    margin-top: -1px;
}


/* 에디터 콘텐츠 내 텍스트, 이미지 정렬 - 에디터에서 설정한 정렬 그대로 반영 */

.editor_content p,
.editor_content div,
#bo_v_con p,
#bo_v_con div {
    text-align: inherit;
    font-family: inherit !important;
}

.editor_content img,
#bo_v_con img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/* 게시판 본문 첨부 이미지 확대 링크는 이미지 크기만 클릭되도록 제한 */
#bo_v_img a.view_image {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
}

#bo_v_img a.view_image img {
    display: block;
}

/* 게시글 파일첨부, 링크 공통 스타일 */
#bo_v_file h2,
#bo_v_link h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#bo_v_file ul,
#bo_v_link ul {
    margin: 0;
    list-style: none;
}

#bo_v_file li,
#bo_v_link li {
    padding: 15px;
    position: relative;
    margin: 10px 0;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    box-shadow: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

#bo_v_file li br,
#bo_v_link li br {
    display: none;
}

#bo_v_file li i,
#bo_v_link li i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: #000;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

#bo_v_file a,
#bo_v_link a {
    flex: 1;
    min-width: 0;
    display: block;
    text-decoration: none;
    word-wrap: break-word;
    color: #000;
    transition: color 0.2s ease;
}

#bo_v_file a:focus,
#bo_v_file li:hover a,
#bo_v_file a:active,
#bo_v_link a:focus,
#bo_v_link li:hover a,
#bo_v_link a:active {
    text-decoration: underline;
    color: var(--color-primary);
}

#bo_v_file img {
    flex-shrink: 0;
    margin: 0 10px 0 0;
}

#bo_v_file .bo_v_file_cnt,
#bo_v_link .bo_v_link_cnt {
    margin-left: auto;
    flex-shrink: 0;
    color: #000;
    font-size: 0.92em;
    line-height: 1.4;
    transition: color 0.2s ease;
}

#bo_v_file li:hover,
#bo_v_link li:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

#bo_v_file li:hover i,
#bo_v_link li:hover i {
    color: var(--color-primary);
}

#bo_v_file li:hover .bo_v_file_cnt,
#bo_v_link li:hover .bo_v_link_cnt {
    color: var(--color-primary);
}



/* 체크박스 체크 시 색상 변경 */

input[type="checkbox"] {
    accent-color: var(--color-primary) !important;
}

input[type="checkbox"]:checked {
    accent-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

input[type="checkbox"]:checked+label span {
    accent-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

input[type="checkbox"]+label:hover {
    color: var(--color-primary) !important;
}


/* input, select, textarea focus 시 파란색 outline 제거 및 색상 변경 */
input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--color-primary) !important;
}

input[type="text"]:focus-visible,
input[type="password"]:focus-visible {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--color-primary) !important;
}

select:focus,
select:focus-visible {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--color-primary) !important;
}

textarea:focus,
textarea:focus-visible {
    outline: none !important;
    box-shadow: none;
    border: 1px solid var(--color-primary) !important;
}


/*캡챠 오버라이딩*/
#captcha {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    position: relative;    
}

#captcha .captcha_box {
    color: #000;
}

@media screen and (max-width: 768px) {
    #captcha {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* captcha_img는 한 줄 전체를 차지 */
    #captcha_img {
        display: block;
        width: 80% !important;
        margin: 0 auto;
        object-fit: contain;

    }

    /* captcha_key와 captcha_reload를 한 줄로 배치 */
    #captcha_key {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        height: 40px !important;
    }

    #captcha_reload {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
}


/* 구글 번역 부분 커스텀 css - 번역기능 있을 경우만 사용 */


body {
    position: static !important;
    top: 0px !important;
}


.goog-logo-link {
    display: none !important;
}

#google_translate_element {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.goog-te-gadget {
    color: transparent !important;
}

body>.skiptranslate,
.goog-logo-link,
.gskiptranslate,
.goog-te-gadget span,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
div#goog-gt- {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
    font-size: 0px;
    width: 100px;

}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

#google_translate_element select {
    background: transparent;
    color: #000;
    border: none;
    font-weight: bold;
    border-radius: 0px;
    padding: 8px 12px
}

.notranslate {
    translate: no !important;
}


/* 구글 번역기 동작 시, keep-all 속성 때문에 번역된 언어(특히 띄어쓰기가 없는 일본어/중국어 등)가 
   줄바꿈되지 않고 삐져나가는 현상을 막기 위해 번역 상태에서는 줄바꿈 속성을 초기화(normal) 합니다. */
html.translated-ltr *,
html.translated-rtl * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* 번역기가 동적으로 생성하는 font 태그가 Flexbox나 Grid 레이아웃을 망가뜨리는 것을 방지하고 폰트 속성 상속을 강제 */
html.translated-ltr font,
html.translated-rtl font {
    display: contents !important;
    font-weight: inherit !important;
    color: inherit !important;
}





/* 고정 헤더 아래 구분선이 서브비주얼 위에 겹치지 않도록 */
#hd + hr {
    display: none;
}

/* 그누보드 기본 #container 폭이 풀폭 서브비주얼과 어긋나지 않도록 */
#wrapper,
#container_wr,
#container {
    width: 100%;
    max-width: none;
    float: none;
    margin: 0;
}

/* 메인 헤더: 그누보드 #hd, input:focus 규칙을 피하기 위한 클래스 */
.idx-hd {
    background-color: #fff !important;
}

input.idx-hd-input,
input.idx-hd-input:hover,
input.idx-hd-input:focus,
input.idx-hd-input:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
    height: auto;
}

/* 그누보드 #ft 배경·정렬이 푸터 레이아웃을 덮지 않도록 */
#ft.idx-ft {
    background: #fff;
    text-align: left;
    color: #475569;
}

/* 교육 신청 라디오·체크박스. 입력 자체 배경은 공통 체크 색에 덮이므로 표시는 옆 도형으로 그린다. */
.app-control-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-radio-mark,
.app-check-mark {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid #DFDFDF;
    background-color: #fff;
}

.app-radio-mark {
    border-radius: 9999px;
}

.app-check-mark {
    border-radius: 3px;
}

input:checked + .app-radio-mark,
input:checked + .app-check-mark {
    border-color: #087DE7;
    background-color: #087DE7;
}

input:checked + .app-radio-mark::after {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: #fff;
}

input:checked + .app-check-mark::after {
    content: "";
    width: 0.45rem;
    height: 0.22rem;
    margin-top: -0.12rem;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
}

input:focus-visible + .app-radio-mark,
input:focus-visible + .app-check-mark {
    outline: 2px solid #087DE7;
    outline-offset: 2px;
}

.is-captcha-collapsed {
    display: none;
}

/* 헤더 검색: 모바일에서 로고·유틸 사이 남은 폭으로 펼침 (잘림 방지). lg 이상은 기존 고정폭 */
.idx-hd-search.is-open {
    flex: 1 1 0%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

@media (min-width: 768px) {
    .idx-hd-search.is-open {
        margin-left: 0.75rem;
        margin-right: 1rem;
    }
}

@media (min-width: 1024px) {
    .idx-hd-search.is-open {
        flex: 0 0 auto;
        max-width: 28rem;
        margin-left: 0;
        margin-right: 1rem;
    }
}

/* 검색어 하이라이트 스타일 — 인라인 베이스라인 불일치 및 불필요한 밑줄 제거 */
.sch_word {
    display: inline-block !important;
    vertical-align: baseline !important;
    color: #fff !important;
    background-color: #087DE7 !important;
    padding: 0 4px !important;
    margin: 0 2px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    border-radius: 3px !important;
}