@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* ==========================================
   1. 기본 리셋 및 전역 스타일 (Board Reset)
   ========================================== */
.board {
    font-family: 'Nanum Gothic', '나눔고딕', NanumGothic, NG, Dotum, '돋움', Gulim, Helvetica, sans-serif;
    font-size: 12px;
    background: #fff;
    color: #333;
    margin: 0 auto 150px;
    padding: var(--s150) 0;
    background-color: #030043;
    color: #ffffff;
}

.board a{
    color: #ffffff;
}

.board .title_wrap{
    text-align: center;
}
.board .title_wrap .title{
    font-size: var(--s60);
    font-weight: 700;
}
.board .title_wrap > p:nth-child(2){
    margin: var(--s20) auto;
}
.board .title_wrap > div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.board .title_wrap > div a{
    margin-left: var(--s16);
}
.board .title_wrap > p,
.board .title_wrap a{
    font-size: var(--s30);
    font-weight: 500;
}



.board .iText,
.board textarea,
.board select,
.extraVarsList tr td input,
.extraVarsList tr td textarea {
    width: 100%;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    outline: none;
    border: 2px solid #666666;
    border-radius: 40px;
    background: transparent;
    color: #ffffff;
    appearance: none;
    font-size: 16px;
}
.board textarea,
.extraVarsList tr td textarea{
    padding: 20px;
    border: 2px solid #666666;
    border-radius: 20px;
    resize: none;
}
.extraVarsList tr td input:focus,
.extraVarsList tr td textarea:focus{
    border: 2px solid var(--NeonGreen);
}
/* 특정 요소 재정의 */
.board label { cursor: pointer; }
.board img { border: 0; }
#cke_1_top, #cke_1_bottom { display: none; }

/* 팝업 메뉴 및 네비게이션 */
.board .document_popup_menu a,
.board .comment_popup_menu a { color: #8b8b8b; }
.board .boardNavigation {     width: 70%; margin: 0 auto;}
.board .boardNavigation .pagination{
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* ==========================================
   2. 게시판 헤더 (Board Header)
   ========================================== */
.boardHeader {
    text-align: center;
}
.boardHeader h1 {
    padding: 10px 0;
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #303030;
    margin: 0;
}
.boardHeader h1::after {
    content: "";
    display: block;
    width: 35px;
    height: 3px;
    background-color: #729c59;
    margin: 20px auto;
}
.boardHeader a { color: #4d4d4d; }
.boardHeader .boardDescription {
    padding: 0;
    margin: 0;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #777777;
    letter-spacing: -0.5px;
    background-color: transparent !important;
    border: none;
    position: relative;
}

/* ==========================================
   3. 게시판 리스트 및 폼 (Board List & Form)
   ========================================== */
.boardListForm { width: 70%; margin: 0 auto; line-height: normal; }
.boardListForm * { margin: 0; padding: 0; }
.boardListForm fieldset { border: 0; clear: both; }
.boardListForm fieldset:after { content: ""; display: block; float: none; clear: both; }
.boardListForm legend { position: absolute; width: 0; height: 0; overflow: hidden; font: 0/0 Sans-serif; visibility: hidden; }
.boardListForm em,
.boardListForm strong { color: #ff3636; }

.boardList { border: 0; border-top: 2px solid var(--NeonGreen); width: 100%; }
.boardList a { color: #ffffff; text-decoration: none; }
.boardList a:hover,
.boardList a:active,
.boardList a:focus { text-decoration: underline; }
.boardList .inputCheck { width: 13px; height: 13px; }
.boardList th { border: 0; border-bottom: 1px solid #dcdcdc; padding: 13px 6px; white-space: nowrap; text-align: center; line-height: normal; font-weight: normal; color: #ffffff; }
.boardList th.title { width: 100%; }
.boardList th a .sort { vertical-align: middle; margin: 0 5px; }
.boardList td { border: 0; border-bottom: 1px solid #eee; padding: 12px 6px; white-space: nowrap; text-align: center; line-height: normal; vertical-align: top; color: #ffffff; }
.boardList td.title { width: 100%; white-space: normal; text-align: left; font-weight: bold; }
.boardList td.title a.forum:link,
.boardList td.recommend { color: #ff3636; }
.boardList td.summary .thumb { border-color: #ddd; background: #fff; }
.boardList td .category { color: #888; }
.boardList td .by { color: #ccc; }
.boardList .jumpTo button { background-color: #eee; border-color: #ccc; color: #000; }
.boardList .replyNum { color: #ff3636; }
.boardList .trackbackNum { color: #66c; }
.boardList .replyAnchor { color: #06C; }
.xe_content.editable p{margin:0; }

.boardInformation em,
.boardInformation strong { color: #ff6600; }
.boardRead { position: relative; width: 70%; margin:0 auto; }


.viewDocument h4,
.viewDocument p{
    margin-top: var(--s50);
}


/* 타임 스탬프 */
.time * { color: #666; }
.time dt { background: #fff; }

/* ==========================================
   4. 확장 변수 테이블 (Extra Var Table)
   ========================================== */
.extraVarsList {
    width: 100%;
    margin: var(--s50) auto 0;
    border: 3px solid #666666;
    border-radius: 20px;
    background-color: #0d164e;
    padding: 50px;}
.extraVarsList caption { text-align: right; color: #999; }
.extraVarsList em { color: #ff6600; font-style: normal; font-weight: normal; }
.extraVarsList th { white-space: nowrap; }
.extraVarsList th,
.extraVarsList td { border: 0; text-align: left; vertical-align: middle; }
.extraVarsList td p { display: inline-block; }
.extraVarsList td * {background-color: transparent; vertical-align: middle; }
.extraVarsList td li { display: inline; margin-right: 10px; }

.extraVarsList tbody { display: flex; flex-direction: column; flex-wrap: wrap; }
.extraVarsList tbody tr { display: flex; flex-direction: column; }
.extraVarsList tbody tr:not(:first-child){margin-top: var(--s20);}
.extraVarsList tbody tr th { position: relative; min-width: 200px; font-size: var(--s20); font-weight: 200; border: none; }
.extraVarsList tr:last-child,
.extraVarsList tr:last-child td { width: 100%; }

.extraVarsList tr td>div:first-child { min-height: auto !important; margin-top: 10px;}
div#cke_1_contents{border: 2px solid #666666; border-radius: 20px; padding:10px 20px;}
.cke.cke_focus #cke_1_contents{
    border: 2px solid var(--NeonGreen) !important;
}
.extraVarsList td .xefu-dropzone-message { display: none; }
.extraVarsList td .inputNum { padding: 3px 4px; font-size: 12px; width: 50px; border: 1px solid #ccc; }
.extraVarsList td .inputCheck { width: 13px; height: 13px; margin-right: 5px; }
.extraVarsList td select { font-size: 12px; }

/* 확장 변수 품 세부 항목 */
.extraVarsList tr td .email_address,
.extraVarsList tr td .homepage { border: 1px solid #ddd; padding: 6px; margin-right: 10px; width: 300px; }
.extraVarsList tr td .tel { border: 1px solid #ddd; padding: 6px; margin-right: 10px; width: 60px; }
.extraVarsList tr td .textarea { border: 1px solid #ddd; padding: 6px; margin-right: 10px; width: 100%; height: 80px; }
.extraVarsList tr td .date { border: 1px solid #ddd; padding: 6px; margin-right: 0px; width: 100px; }
.extraVarsList tr td .address { border: 1px solid #ddd; padding: 6px; margin-right: 5px; width: 300px; }
.extraVarsList tr td select { border: 1px solid #ddd; padding: 6px; }

.extraVarsList tr td ul { margin: 0; padding: 0; list-style: none; }
.extraVarsList tr td ul li { display: inline-block; margin-right: 10px; }
.extraVarsList tr td ul li input { margin-right: 5px; vertical-align: middle; }

/* 확장 변수 버튼 스타일 */
.extraVarsList tr td a { text-decoration: none; }
.extraVarsList > tr > td > a > span,
.extraVarsList tr td input[type="button"] {
    padding: 5px 10px;
    display: inline-block;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    font-weight: bold;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: #444444;
    background: #f3f3f3;
    border-radius: 3px;
    border: 1px solid #d0d0d0;
}
.extraVarsList tr td input[type="button"]:hover { border-color: #bebebe; background: #eeeeee; }

.extraVarsList .info_btn { position: relative; padding: 15px 10px; text-align: left; cursor: pointer; }
.extraVarsList .info_p { padding: 2%; width: 100%; box-sizing: border-box; }
.extraVarsList .info_box { padding: 5px 0; border-bottom: 2px solid #333; text-align: center; }

/* ==========================================
   5. 작성 페이지 버튼 및 기타 구성요소
   ========================================== */
.boardWrite{width: 70%; margin:0 auto;}
.boardWrite table+p>a { display: none; }
.boardWrite>p { display: flex; }

.etc { float: left; }
.message_box {padding: 20px 30px; text-align: center; background-color: rgb(36, 232, 156, 0.3); border: 2px solid #666666; transition: 0.3s;}




/* 공통 버튼 구조 */
.form-button {
    padding: 10px 20px;
    display: inline-block;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    font-weight: bold;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: rgb(36, 232, 156, 0.3);
    border: 2px solid #666666;
    color: #fff;
    transition: 0.3s;
}
.form-button:hover { border: 2px solid var(--NeonGreen);}
/* 푸른색 버튼 (통합 및 최적화) */
.extraVarsList tr td .form-button-green {
    width: 100%;
    background-color: rgb( 36, 232, 156, 0.3);
    padding: 10px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    transition: 0.3s;
    display: inline-block;
    user-select: none;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
}
.extraVarsList tr td .form-button-green:hover{
    border: 2px solid var(--NeonGreen);
}
/* 카테고리 리스트 */
.categoryList { position: relative; font: normal 13px; }
.categoryList:after { content: ""; display: block; clear: both; }
.categoryList .categoryItem { background-color: #f8f8f8; list-style: none; display: inline; }
.categoryList .categoryItemOver a { height: 16px; padding: 10px 15px; text-decoration: none; float: left; color: #8c8c8c; background-color: #ffffff; border: 1px solid #dedede; margin-right: 2px; margin-bottom: 2px; }
.categoryList .categoryItemOver a:hover { font-weight: bold; background-color: #f8f8f8; }
.categoryList .categoryThisItem a { height: 16px; padding: 10px 15px; text-decoration: none; float: left; font-weight: bold; color: #777777; background-color: #f8f8f8; border: 1px solid #AAAAAA; margin-right: 2px; border-style: inset; }


/* ==========================================
   6. 반응형 미디어 쿼리 (Media Queries)
   ========================================== */

/* 모바일 구간 (최대 481px) */
@media screen and (max-width: 481px) {
    .boardWrite{width: 90%;}
    .extraVarsList{padding: 20px;}
    .extraVarsList tbody tr { flex-wrap: wrap; margin-bottom: 30px; }
    .extraVarsList tbody tr th { position: relative; width: 120px; min-width: 120px; text-align: left; border: none; margin-bottom: 15px; font-size: 16px; }
    .extraVarsList tr td .tel { width: 98%; }
    .extraVarsList tr td .address { width: 100%; }
    .extraVarsList tr td a span { width: 100%; }
    .extraVarsList tr td select { width: 90%; }
    .extraVarsList tr td>div:first-child { height: 200px; }
    .m_btn { width: 100%; margin: 3px 0; }
    .reading, .check, .checkbox, .no_btn { display: none; }
}

/* 태블릿 구간 (482px ~ 767px) */
@media screen and (min-width: 482px) and (max-width: 767px) {
    .extraVarsList tbody tr { flex-wrap: wrap; }
    .extraVarsList tbody tr th { position: relative; width: 120px; min-width: 120px; text-align: left; border: none; font-size: 16px; }
    .extraVarsList tr td>div:first-child { height: 200px; }
    .boardWrite{width: 90%;}
}

/* 중형 스크린 구간 (768px ~ 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .boardWrite>p { display: flex; }
    .boardWrite>p::before { content: ''; display: inline-block; clear: both; min-width: 120px; }
    .extraVarsList tbody tr th { position: relative; width: 120px; min-width: 120px; text-align: left; font-size: 16px; border: none; }
    .extraVarsList tr td .address { width: 65%; }
    .boardWrite{width: 90%;}
}

/* 대형 스크린 구간 (1025px ~ 1279px) */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    .boardWrite>p { display: flex; }
    .boardWrite>p::before { content: ''; display: inline-block; clear: both; min-width: 120px; }
    .extraVarsList tbody tr th { position: relative; width: 120px; min-width: 120px; text-align: left; font-size: 16px; border: none; }
}

/* 초대형 데스크탑 구간 (1280px 이상) */
@media screen and (min-width: 1280px) {
    .boardWrite>p { display: flex; }
    .boardWrite>p::before { content: ''; display: inline-block; clear: both; min-width: 200px; }
}