@charset "utf-8";
/*
 * 퍼블리싱(static/pub) 화면에 얹는 이 프로젝트의 보정. 퍼블리싱 원본 파일은 고치지 않고 여기에 덧붙인다.
 * template/head.jsp 가 모든 홈페이지 화면에서 맨 뒤에 읽는다. 색·글꼴은 퍼블리싱 변수(layouts.css :root)를 쓴다.
 */

/* 메인 공지사항 : 등록된 글이 없을 때 (원본에는 없는 상태) */
.main_notice .notice_empty{
    margin-top: clamp(30px, 3vw, 50px);
    padding: 70px 20px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-txt);
    text-align: center;
    background: #f6f8fb;
    border-radius: 30px;
}
@media screen and (max-width: 1024px) {
    .main_notice .notice_empty{
        padding: 56px 20px;
        border-radius: 24px;
    }
}


/* ---------- 메인이 아닌 화면 (#Wrap.sub_wrap) ----------
 * 머리·바닥은 퍼블리싱, 본문(#container.sv-page)은 서브 퍼블리싱이 오기 전까지 기존 site.css(sv-*)다.
 * 이 화면들은 퍼블리싱 reset.css 대신 템플릿 css/reset.css 위에 있어 그 차이를 여기서 맞춘다.
 */

/* 글꼴은 퍼블리싱 본문 글꼴. 템플릿 reset.css 가 body 글꼴을 !important 로 고정해 같은 방식으로 덮는다. (메인은 퍼블리싱 reset.css 와 같은 값) */
body{
    font-family: "Pretendard", "Noto Sans Korean", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* 내용이 짧아도 바닥이 화면 아래에 붙는다. (기존 .sv-shell 역할) */
.sub_wrap{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    letter-spacing: -.03em;
}
.sub_wrap .sv-page{
    padding-bottom: 56px;
    letter-spacing: normal;
}
/* 템플릿 reset.css 는 버튼 테두리를 지우지 않는다. (언어 선택·메뉴 버튼) */
.sub_wrap #header button{
    border: 0;
}
@media screen and (min-width: 768px) {
    .sub_wrap .sv-page{
        padding-bottom: 80px;
    }
}
/* 퀵메뉴(좁은 화면 하단 바)는 메인에만 있어 그 자리를 비워 둔 여백·TOP 위치를 되돌린다. */
@media screen and (max-width: 768px) {
    .sub_wrap #footer .ft_inner{
        padding-bottom: 40px;
    }
    .sub_wrap .btn_top{
        bottom: 24px;
    }
}


/* ---------- 참가등록 (퍼블리싱 서브 sub.css 위에 얹는 상태) ----------
 * 원본 4-1~4-4 에 없는 상태만 여기 둔다. 색·모서리는 sub.css 의 .form_policy·.form_err 와 맞춘다.
 */

/* 폼 위 안내 줄 : 서버 오류(.is-error), 수정 기간 종료 안내 (apply/form.jsp, check.jsp) */
.reg_notice{
    margin-bottom: clamp(24px, 2.1vw, 40px);
    padding: 16px 24px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background: #f6f8fb;
    border: 1px solid var(--line);
    border-radius: 16px;
    word-break: keep-all;
}
.reg_notice.is-error{
    color: #e5484d;
    background: #fff6f6;
    border-color: #f5c6c7;
}
/* 수정 기간이 지나면 입력 전체를 막는 묶음. 모양에는 영향이 없게 기본 테두리·여백을 없앤다. */
.reg_fieldset{
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.reg_fieldset:disabled .form_choice label > span,
.reg_fieldset:disabled .form_file .file_btn,
.reg_fieldset:disabled .form_agree{
    cursor: default;
}
.sub_content .reg_fieldset:disabled .form_input,
.sub_content .reg_fieldset:disabled .form_select{
    color: #555;
    background-color: #f4f6f9;
}
/* 선택에 따라 나타나는 안내 : 버스(셔틀)의 탑승 위치 문자 안내 (apply/form.jsp). 폭은 입력칸(.form_input)과 같다. */
.form_notice{
    max-width: 480px;
    margin-top: 12px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--navy-txt);
    background: #f0f5fb;
    border-radius: 10px;
    word-break: keep-all;
}
.form_notice[hidden]{
    display: none;
}
/* 입력 + 목록 : 국적·이메일 도메인 (apply/form.jsp, apply.js). 입력칸은 원본 .form_input, 화살표는 원본 .form_select 와 같다. */
.form_combo{
    position: relative;
    width: 100%;
    max-width: 480px;
}
.sub_content .form_combo .form_input{
    max-width: none;
    padding-right: 44px;
}
.form_combo_btn{
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    padding: 0;
    background: url(../pub/images/common/ico_chevron.svg) center / 18px no-repeat;
    border: 0;
    cursor: pointer;
    transition: transform .2s;
}
.form_combo.is-open .form_combo_btn{
    transform: rotate(180deg);
}
.form_combo_btn:disabled{
    cursor: default;
}
.form_combo_list,
.form_combo_empty{
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(17, 34, 68, .12);
}
.form_combo_list{
    max-height: 264px;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}
.form_combo_list[hidden],
.form_combo_list li[hidden],
.form_combo_empty[hidden]{
    display: none;
}
.form_combo_list li{
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.4;
    color: #111;
    border-radius: 6px;
    cursor: pointer;
    word-break: keep-all;
}
.form_combo_list li:hover{
    background: #f4f6f9;
}
.form_combo_list li.is-active{
    background: rgba(0, 177, 209, .12);
}
.form_combo_list li[aria-selected="true"]{
    font-weight: 600;
    color: var(--navy-txt);
}
.form_combo_empty{
    padding: 12px 16px;
    font-size: 14px;
    color: var(--gray-txt);
}
/* 이메일 : 도메인 입력 + 목록 한 칸이 원본의 도메인 입력칸·선택 두 칸을 대신한다. */
.form_email .form_combo{
    flex: 1 1 220px;
    max-width: 260px;
}
.sub_content .form_email .form_combo .form_input{
    max-width: none;
}
@media screen and (max-width: 768px) {
    .form_combo,
    .form_email .form_combo{
        min-width: 0;
        max-width: none;
    }
}
/* 영문 화면 : 완료 화면 항목 이름(Registration No. 등)이 원본 칸 폭(64px, 국문 네 글자)보다 길다.
   값은 원본(break-all)이면 영단어가 중간에서 끊겨 단어 단위로 넘기고, 긴 이메일만 중간에서 넘긴다. */
html[lang="en"] .reg_done_info dt{
    width: 136px;
}
html[lang="en"] .reg_done_info dd{
    word-break: normal;
    overflow-wrap: anywhere;
}
@media screen and (max-width: 480px) {
    html[lang="en"] .reg_done_info dt{
        width: 104px;
    }
}
/* 완료 : 신청번호 안내 (원본에 없는 줄) */
.reg_done_info dd strong{
    font-weight: 700;
    color: var(--navy-txt);
    letter-spacing: .02em;
}
.reg_done_note{
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-txt);
    word-break: keep-all;
}
/* 보내는 중 */
.reg_btns .btn_round[aria-disabled="true"]{
    opacity: .6;
    pointer-events: none;
}


/* ---------- 서브비주얼 하단 줄 (퍼블리싱 서브 공통, template/header.jsp) ----------
 * 1281~1550px 에서는 오른쪽 퀵메뉴(layouts.css .quick : 위치 고정, 아래 끝 453px)가 줄 오른쪽 끝의 주소 복사·공유 버튼을 가린다.
 * (1281px 에서 31px 겹치고 폭이 넓어질수록 줄어 1550px 에서 13px 떨어진다. 1280px 이하는 퀵메뉴가 작아져 겹치지 않는다)
 * 이 폭에서만 버튼을 위치 표시 바로 옆으로 붙인다. 원본은 오른쪽 끝이다.
 */
@media screen and (min-width: 1281px) and (max-width: 1550px) {
    .sub_visual .sv_foot{
        justify-content: flex-start;
    }
}


/* ---------- 게시판 (퍼블리싱 서브 sub.css 위에 얹는 상태) ----------
 * 원본 5-1~5-3 에 없는 것만 둔다. 선·글꼴·색은 sub.css 의 .view_head·.view_nav 와 맞춘다.
 */

/* 게시글 첨부파일 : 제목 줄 아래 (board/show.jsp) */
.view_files{
    display: flex;
    gap: 8px 24px;
    padding: 18px clamp(4px, 1.56vw, 30px);
    font-family: var(--ff-esa);
    font-size: 17px;
    font-weight: 300;
    background: #f5f8fb;
    border-bottom: 1px solid #dbdbdb;
}
.view_files_label{
    flex-shrink: 0;
    width: 70px;
    font-size: inherit;
    font-weight: 500;
    color: #002e6b;
}
.view_files ul{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.view_files a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111;
    word-break: break-all;
}
.view_files a:hover,
.view_files a:focus-visible{
    color: #002e6b;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.view_files svg{
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 편집기 본문 : 원본은 p·ul·h5·b 만 다룬다. 편집기가 만드는 나머지를 reset.css 위에서 되살린다. (게시글 본문, FAQ 답변) */
.view_body h2,
.view_body h3,
.view_body h4{
    margin-top: 36px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.5;
    color: #002e6b;
}
.view_body ol,
.faq_a_txt ol{
    padding-left: 1.4em;
    list-style: decimal;
}
.view_body strong,
.faq_a_txt strong{
    font-weight: 500;
    color: #111;
}
.view_body a,
.faq_a_txt a{
    color: #002e6b;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.view_body img,
.faq_a_txt img{
    max-width: 100%;
    height: auto;
}
.view_body figure{
    margin: 0;
}
.view_body figure.table{
    overflow-x: auto;
}
.view_body table{
    border-top: 1px solid #002e6b;
    border-collapse: collapse;
}
.view_body th,
.view_body td{
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #dbdbdb;
}
.view_body th{
    font-weight: 500;
    color: #002e6b;
    background: #f5f8fb;
}

/* FAQ : 등록된 질문이 없을 때 (원본에 없는 상태, 목록의 .bbs_empty 모양) */
.faq_empty{
    margin-top: clamp(30px, 2.6vw, 50px);
    border-top: 2px solid #002e6b;
}

@media screen and (max-width: 768px) {
    .view_files{
        flex-direction: column;
        font-size: 15px;
    }
    .view_files_label{
        width: auto;
    }
    .view_body h2,
    .view_body h3,
    .view_body h4{
        font-size: 18px;
    }
    .view_body th,
    .view_body td{
        padding: 12px 10px;
        font-size: 15px;
    }
}


/* ---------- 행사소개·프로그램·연사소개 (sub/page/*.jsp, 원본 1-1~3-1) ----------
 * 영문 화면 : 연사 모달의 항목 이름(Organization·Position·Talk)이 원본 칸 폭(36px, 국문 두 글자)보다 길어 단어 중간에서 끊긴다.
 */
html[lang="en"] .spk_m_info dt{
    width: 6.8em;
}