@charset "utf-8";



/************************************************** 
    scrollbar custom
*********************************
******************/
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  scroll-margin-top: 120px;
}

html {scrollbar-gutter: stable; }
html.is-lock, body.is-lock {overflow: hidden;}

html *::-webkit-scrollbar {width: 5px; height: 6px;}
html *::-webkit-scrollbar-thumb {width: 5px;height: 6px; background: #ccc; border-radius: 10px;}
html *::-webkit-scrollbar-track {background: #fefefe;}

/**************************************************
    scrolltop
***************************************************/
.btn-scroll-top { position: fixed; bottom: 25px; right: 40px; width: 114px; display: flex; align-items: center; justify-content: center; z-index: 9980; transform-origin: right bottom; transform: scale(1); }
.btn-scroll-top button { width: 70px; height: 70px; border-radius: 999px; background-color: var(--gray-400); border: none; box-shadow: 0 0 20px rgba(0,0,0,.2); cursor: pointer; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; }
.btn-scroll-top.show button { opacity: 1; visibility: visible; transform: translateY(0); }
.btn-scroll-top.show:hover button { transform: translateY(-5px); background-color: var(--gray-500); }
.btn-scroll-top .icon { background: url('/resources/user/eng/images/icon/icon_sprite_main.svg') no-repeat -61px 0; width: 19px; height: 24px; }


@media screen and (max-width:1740px){
  .btn-scroll-top {right: 20px; }
}

@media screen and (max-width:1200px){
  .btn-scroll-top {right: 20px; }
  .btn-scroll-top { transform: scale(0.8); }
}

@media screen and (max-width:768px){
  .btn-scroll-top { transform: scale(0.6); right: 14px; bottom: 15px; }
}


/**************************************************
    width
***************************************************/
.w-1500 {width: 100%; max-width:1500px; margin-inline:auto;}
.w-1400 {width: 100%; max-width:1400px; margin-inline:auto;}

@media screen and (max-width: 1500px){
    .w-1500 {padding: 0 48px;}

}

@media screen and (max-width: 1400px){
    .w-1400 {padding: 0 48px;}

}

@media screen and (max-width: 768px){
    .w-1400 {padding: 0 20px;}
    .w-1500 {padding: 0 20px;}

}


/**************************************************
    margin-bottom / margin-top
***************************************************/


/**************************************************
    margin-top
***************************************************/
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}
.mt-60 {margin-top: 60px;}
.mt-80 {margin-top: 80px;}


.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}
.mb-40 {margin-bottom: 40px;}
.mb-50 {margin-bottom: 50px;}
.mb-60 {margin-bottom: 60px;}
.mb-80 {margin-bottom: 80px;}

.mt-16 {margin-top: 16px;}



/**************************************************
    flex / grid
***************************************************/
/* Flex */
.com-flex { display: flex; }
.com-flex.wrap { flex-wrap: wrap; }
.com-flex.between { justify-content: space-between; }
.com-flex.end { justify-content: flex-end; }
.com-flex.v-center { align-items: center; }

/* Grid */
.com-grid { display: grid; gap: 24px; }
.com-grid.col-4 { grid-template-columns: repeat(4, 1fr); }
.com-grid.col-3 { grid-template-columns: repeat(3, 1fr); }
.com-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
.com-grid.col-1 {grid-template-columns: 1fr;}


@media screen and (max-width: 1024px) {
    .com-grid.col-4,
    .com-grid.col-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media screen and (max-width: 768px) {
    .com-grid.col-4,
    .com-grid.col-3,
    .com-grid.col-2 {  grid-template-columns: 1fr; gap: 16px; }


}


/**************************************************
    스킵내비 skip navi
***************************************************/
#skipNav a {position: absolute; top: -50px; left: 0; width: 100%; background: var(--primary-2); color: var(--white); padding: 10px 20px; z-index: 10000; font-size: var(--fs-16); text-decoration: none; transition: top 0.3s; text-align: center;}
#skipNav a:focus {top: 0;}


/**************************************************
    브레드크럼 Breadcrumb
***************************************************/
.breadcrumb {display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px;}
.breadcrumb li {font-size: var(--fs-16); color: var(--white); font-weight: 500; display: flex; align-items: center; gap: 20px;}
.breadcrumb li::after {content: ''; display: block; width: 6px;  height: 6px;  border-top: 1px solid var(--white); border-right: 1px solid var(--white);  transform: rotate(45deg);}
.breadcrumb li:last-child:after {display: none;}
.breadcrumb li svg {display: block;}
.breadcrumb li.home a {background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -568px 0; width: 20px;height: 16px;}


/**************************************************
    버튼 Button
***************************************************/
/* 메인 버튼 */
.com-btn-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.com-btn-box.space-between { justify-content: space-between; }
.com-btn-box.center { flex-direction: column; padding: 0 20px; }
.com-btn-box.left { justify-content: start; }
.com-btn-box.end { justify-content: flex-end; }
.com-btn-box .brd-edit-box { display: flex; gap: 12px; }

.com-btn { position: relative; min-width: 130px; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 24px;border: 1px solid var(--gray-500); color: var(--text); border-radius: 50px;overflow: hidden; z-index: 1; transition: color .3s ease; font-weight: 500;}

.com-btn::before {content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%;z-index: -1; transition: width .35s ease;}
.com-btn:hover::before { width: 100%; }

.com-btn.type-01::before { background: var(--primary-1); }
.com-btn.type-01:hover { color: var(--white); border-color: var(--primary-1); }

.com-btn.type-02 { background: var(--primary-1); border-color: var(--primary-1); color: var(--white); }
.com-btn.type-02::before { background: var(--primary-4); }
.com-btn.type-02:hover { border-color: var(--primary-4); }

.com-btn.type-03 { background: var(--white); border-color: var(--primary-1); color: var(--primary-1); }
.com-btn.type-03::before { background: var(--primary-1); }
.com-btn.type-03:hover { border-color: var(--primary-1); color: var(--white); }

.com-btn.type-04 { background: transparent; border-color: var(--white); color: var(--white); }
.com-btn.type-04::before { background: var(--white); }
.com-btn.type-04:hover { border-color: var(--white); color: var(--text); }
.com-btn.type-04.more::after{filter: invert(10);}
.com-btn.type-04.more:hover::after {filter: none;}

.com-btn.more::after, .com-btn.link::after { content: ''; background: url('/resources/user/eng/images/icon/icon_sprite_main.svg') no-repeat; height: 18px; }
.com-btn.more::after { background-position: -312px -3px; width: 24px; }
.com-btn.link::after { background-position: -366px 0; width: 19px; }

.com-btn.type-02.more::after,.com-btn.type-01.more:hover::after,.com-btn.link:hover::after { filter: brightness(0) invert(1); }


/* 서브 버튼 */
.com-sub-btn {position:relative; min-width: 150px; height: 64px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 1px solid var(--primary-4); color: var(--primary-4); font-weight: 500; border-radius: 5px;overflow:hidden; z-index:1; transition:.3s}

.com-sub-btn.type-01 {border-color: var(--primary-1); color: var(--primary-1); background-color: var(--white);}
.com-sub-btn.type-01:hover{color:var(--white);background: var(--primary-1);}
.com-sub-btn.type-01:hover::after {filter: brightness(0) invert(1);}


.com-sub-btn.type-02 {border-color: var(--gray-300); color: var(--text-muted);}
.com-sub-btn.type-02:hover{color:var(--text);border-color: var(--gray-500); background: var(--surface);}

.com-sub-btn.type-03 {border-color: var(--gray-300); color: var(--text-muted); background: var(--gray-200);}
.com-sub-btn.type-03:hover{color:var(--white);background-color: var(--gray-400);}

.com-sub-btn.type-04 {border-color: var(--white); color: var(--white);}
.com-sub-btn.type-04:hover{color:var(--text); background: var(--white);}

.com-sub-btn::after {flex-shrink: 0;}
.com-sub-btn.down::after {content: ''; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -379px -2px;width: 14px;height: 14px;}
.com-sub-btn.link::after {content: ''; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -425px -1px;width: 14px;height: 14px;}
.com-sub-btn.type-04.link::after {filter: brightness(10);}
.com-sub-btn.type-04.down::after {filter: brightness(10);}
.com-sub-btn.type-04.link:hover::after {filter:brightness(10) invert(10)}
.com-sub-btn.type-04.link:hover::after {filter:brightness(10) invert(10)}

.com-sub-btn.left {margin-left: auto;}
.com-sub-btn.right {margin-right: auto;}

.com-sub-btn.sm {min-width: 130px; height: 48px; font-size: var(--fs-16);}
.com-sub-btn.xs {min-width: 130px; height: 36px; font-size: var(--fs-16); padding: 0 10px;}


@media screen and (max-width: 768px) {
    .com-btn {height: 44px; padding: 0 16px; font-size: 16px; gap: 16px; min-width: 110px;}
    .com-btn-box.type-01 button {width: 140px;}
}
@media screen and (max-width: 480px) {
    .com-btn-box {flex-direction: column; gap: 14px;}
    .com-btn-box.space-between { flex-direction: column-reverse; gap: 10px; }
    .com-btn-box .brd-edit-box {flex-direction: column; gap: 10px; width: 100%;}
    .com-btn-box .brd-edit-box .com-sub-btn {width: 100%; min-width: auto;}
    .com-btn-box .list-btn { width: 100%; }
    .com-btn-box .com-btn {min-width: 100%;}
    .com-btn-box .com-sub-btn {min-width: 100%;}
}


/**************************************************
    배지 Badge
***************************************************/
.com-badge {display: inline-block; padding: 4px 14px; border-radius: 4px; font-size: var(--fs-16);flex-shrink: 0; color: var(--white); min-width: 60px; text-align: center;}
.com-badge.xs {padding: 2px 10px; font-size: var(--fs-14);}
.com-badge.sm {padding: 2px 14px; font-size: var(--fs-16); }
.com-badge.lg {padding: 8px 20px; }
.com-badge.radius {border-radius: 50px;}
.com-badge.primary {background: var(--primary-1); color: var(--white); }
.com-badge.secondary-1 {background: var(--secondary-1); color: var(--white); }
.com-badge.secondary-2 {background: var(--secondary-2); color: var(--white); }

/* 홈페이지문의 */
.com-sub-badge {display: inline-block; padding: 6px 16px; font-size: var(--fs-14); border-radius: 4px; }
.com-sub-badge.type-01 {background: var(--primary-1); color: var(--white);}
.com-sub-badge.type-02 {background: var(--gray-200); }


/**************************************************
    공통 타이틀
***************************************************/
.com-title-wrap {position: relative; }

.com-title-01 {font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700; text-align: center;}

.com-title-02 {font-size: var(--fs-h4); color: var(--text); font-weight: 700; display: flex; align-items: flex-start; gap: 12px;}
.com-title-02::before {content: ''; width: 24px; height: 25px; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat 0 -127px; display: block; flex-shrink: 0;margin-top: 0.3em;}

.com-title-03 {position: relative; font-size: var(--fs-24); color: var(--primary-5); font-weight: 700; display: flex; align-items: center; position: relative; }


@media screen and (max-width:768px){
    .com-title-wrap {gap: 0 20px; flex-wrap: wrap;}
    .com-title-wrap .sm {font-size: 15px; text-align: right; width: 100%;}
}



/**************************************************
    공통 텍스트
***************************************************/
/* 텍스트 기본사이즈 회색 */
.com-txt-01 {color: var(--text-muted);}
/* 텍스트 큰사이즈 */
.com-txt-02 {font-size: var(--fs-20); font-weight: 500;}

/* dot list */
.com-txt-list-01 > li {position: relative; padding-left: 14px;}
.com-txt-list-01 > li::before {content: ""; width: 4px; height: 4px; background: var(--text); position: absolute; top: 11px; left: 0; border-radius: 50%;}
.com-txt-list-01 > li em {color: var(--text-muted); font-size: var(--fs-16); margin-bottom: 5px; display: block;}
.com-txt-list-01 .blue {color: var(--primary-1);}

.com-txt-list-01 li.tit {font-size: var(--fs-20); font-weight: 600; margin-bottom: 8px; padding-left: 0;}
.com-txt-list-01 li.tit::before{display: none;}
.com-txt-list-01 li.txt {margin-bottom: 30px;}

/* dash list */
.com-txt-list-02 {margin-bottom: 10px;}
.com-txt-list-02:last-child {margin-bottom: 0;}
.com-txt-list-02 > li {position: relative; padding-left: 14px; color: var(--text-muted);}
.com-txt-list-02 > li::before {content: "-"; position: absolute; top: 0; left: 0;}

/* check list */
.com-txt-list-03 > li {position: relative; padding-left: 30px; color: var(--text-muted);}
.com-txt-list-03 > li::before {content: ""; position: absolute;  top: 5px; left: 0; width: 20px;  height: 21px; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat -1056px -366px;}



/* num list (특수기호 하드코딩 방식) */
.com-num-list > li {position: relative; padding-left: 20px;}
.com-num-list > li::before {position: absolute; top: 0; left: 0; content: '①';}
.com-num-list >  li:nth-child(2):before {content: '②';}
.com-num-list >  li:nth-child(3):before {content: '③';}
.com-num-list >  li:nth-child(4):before {content: '④';}
.com-num-list >  li:nth-child(5):before {content: '⑤';}
.com-num-list >  li:nth-child(6):before {content: '⑥';}
.com-num-list >  li:nth-child(7):before {content: '⑦';}
.com-num-list >  li:nth-child(8):before {content: '⑧';}
.com-num-list >  li:nth-child(9):before {content: '⑨';}
.com-num-list >  li:nth-child(10):before {content: '⑩';}
.com-num-list > li:nth-child(9):before { content: '⑨'; }
.com-num-list > li:nth-child(10):before { content: '⑩'; }
.com-num-list > li:nth-child(11):before { content: '⑪'; }
.com-num-list > li:nth-child(12):before { content: '⑫'; }
.com-num-list > li:nth-child(13):before { content: '⑬'; }
.com-num-list > li:nth-child(14):before { content: '⑭'; }
.com-num-list > li:nth-child(15):before { content: '⑮'; }

/* num list 컬러 */
.com-num-list-02 {display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; justify-content: space-between;counter-reset: step-counter;}
.com-num-list-02 li {position: relative; padding-left: 34px;}
.com-num-list-02 li::before {counter-increment: step-counter; content: counter(step-counter); width: 24px; height: 24px; border-radius: 50px; background: #E2E8F0; display: block; position: absolute; top: 2px; left: 0px; border-radius: 100%; color: var(--primary-1); font-weight: bold; display: flex; align-items: center; justify-content: center;}

/* 작은 텍스트 16pt */
small {color: var(--text-muted); font-size: var(--fs-16);}


@media screen and (max-width:768px){
    .com-num-list-02 {grid-template-columns: 1fr; gap: 12px;}
}



/**************************************************
    공통 상단 정보박스
***************************************************/
/* 상단 정보형 박스 (기본) */
.com-info-box{border: 8px solid rgba(11, 80, 208, 0.08); padding: 40px;}
.com-info-box .info-title { display: block; font-size: var(--fs-20); color: var(--primary-1); margin-bottom: 10px;}

/* 상단 정보형 박스 (회색선) */
.com-info-box.type-02 {border: 5px solid #e9e9e9; color: var(--text-muted);}

/* 상단 정보형 박스 (회색배경) */
.com-info-box.type-03 {border: none; background: var(--surface);}
.com-info-box.type-03 .info-title {color: var(--primary-4);}

/* 상단 정보형 박스2 (아이콘추가) */
.com-info-box-02 { display: flex; align-items: center; gap: 30px; width: 100%; padding: 30px 40px; border: 1px solid var(--border); border-radius: 10px 10px 50px 10px; box-sizing: border-box; font-size: var(--fs-20);}
.com-info-box-02 .icon-wrap { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 75px; height: 75px; background: var(--surface); border-radius: 50%; }

.com-info-box-02 .icon-wrap::before { content: ''; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -689px -48px; width: 26px; height: 48px; display: block; }

@media screen and (max-width:1024px){
    .com-info-box {padding: 30px;}
}

@media screen and (max-width:768px){
    .com-info-box {padding:24px;}
    .com-info-box-02 { flex-direction: column; gap: 16px; padding: 20px; align-items: flex-start; }
    .com-info-box-02 .icon-wrap { width: 45px; height: 45px; margin-right: 0; }
    .com-info-box-02 .icon-wrap::before { transform: scale(0.6); }
}


/**************************************************
    입력 필드 Input
***************************************************/
.com-input {height: 40px; padding: 10px 16px; border: 1px solid var(--border);border-radius: 4px;transition: border-color 0.2s; font-size: var(--fs-16);}
.com-input::placeholder {color: var(--text-muted);}
.com-input:focus {outline: none;border: 2px solid var(--primary-1);}
.com-input:disabled {color: var(--border); border: 1px solid var(--border);background: var(--surface);cursor: not-allowed;}

.com-input.xs {width: 100%; max-width: 145px;}
.com-input.sm {width: 100%; max-width: 160px;}
.com-input.md {width: 100%; max-width: 260px;}
.com-input.lg {width: 100%; max-width: 410px;}
.com-input.full {width: 100%; max-width: 100%;}


/**************************************************
    라디오 Radio
***************************************************/
.com-rad-box {display: flex; align-items: center; gap: 20px; flex-wrap: wrap;}
.com-rad input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.com-rad input[type="radio"] + label{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:5px 0;}
.com-rad input[type="radio"] + label::before {content: "";display: inline-block;width: 20px;  height: 20px; border-radius: 50%; border: 1px solid var(--border); box-sizing: border-box;}
.com-rad input[type="radio"]:checked + label::before{border:2px solid var(--primary-1);background:radial-gradient(circle, var(--primary-1) 0 45%, transparent 46%);}
.com-rad input[type="radio"]:disabled + label::before{border:1px solid var(--border);background:#f2f2f2;}
.com-rad input[type="radio"]:checked:disabled + label::before{border:1px solid var(--border);background:radial-gradient(circle, #bdbdbd 0 40%, #f2f2f2 41%);}
.com-grid-box.box-flex .com-rad input[type="radio"] + label{gap:0; padding:0;}
.com-rad.lg input[type="radio"] + label::before {width:24px; height:24px;}
.com-rad input[type="radio"]:focus-visible + label{outline:2px solid var(--primary-1); outline-offset:3px; border-radius:4px;}
.com-rad input[type="radio"] + label{ cursor:pointer;}


/**************************************************
    체크박스 Checkbox
***************************************************/
.com-checkbox-box {display: flex; justify-content: center;}
.com-checkbox { position: relative; display: inline-flex; }
.com-checkbox input { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }

.com-checkbox label { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 5px 0; cursor: pointer; color: var(--text); }

.com-checkbox input[type="checkbox"] + label::before { content: ""; display: inline-block; width: 20px; height: 20px; border-radius: 3px; border: 1px solid #aaa; box-sizing: border-box; background-color: #fff; flex-shrink: 0; }

.com-checkbox input[type="checkbox"]:checked + label::before { border-color: var(--primary-1); background-color: var(--primary-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 14px 14px; }

.com-checkbox input[type="checkbox"]:disabled + label { cursor: not-allowed; color: #9a9a9a; }
.com-checkbox input[type="checkbox"]:disabled + label::before { border-color: #aaa; background-color: #f2f2f2; }

.com-checkbox input[type="checkbox"]:checked:disabled + label::before { border-color: #bdbdbd; background-color: #f2f2f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

.com-checkbox input[type="checkbox"]:focus-visible + label::before { outline: 2px solid var(--primary-1); outline-offset: 2px; }

.com-checkbox.sm input[type="checkbox"] + label::before { width: 18px; height: 18px; }
.com-checkbox.sm input[type="checkbox"]:checked + label::before { background-size: 12px 12px; }
.com-checkbox.lg input[type="checkbox"] + label::before { width: 24px; height: 24px; }
.com-checkbox.lg input[type="checkbox"]:checked + label::before { background-size: 18px 18px; }


/**************************************************
    셀렉트 Select
***************************************************/
.com-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--white); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; padding: 8px 38px 8px 16px; height: 40px; border: 1px solid var(--border); color: var(--text); font-size: var(--fs-16); }
.com-select:focus-visible { outline: 2px solid var(--primary-1); outline-offset: 0; }
.com-select:disabled { background-color: #f2f2f2; color: #9a9a9a; cursor: not-allowed; border-color: var(--border); opacity: 1; }

.com-select.xs {width: 100%; max-width: 120px; }
.com-select.md {width: 100%; max-width: 240px; }
.com-select.phone {width: 100%; max-width: 145px; border-radius: 0; height: 50px; }

/**************************************************
    날짜 date
***************************************************/
.com-date-box { display: inline-flex; align-items: center; gap: 8px; }
.com-date-box .dash { font-size: var(--fs-16); }
.com-date { position: relative; display: inline-block; }
.com-date .com-input { min-width: 145px; cursor: pointer; padding: 10px 40px 10px 12px; font-family: var(--fotn-basic); background-color: var(--white); border: 1px solid var(--border); appearance: none; -webkit-appearance: none; }
.com-date .com-input:focus-visible { outline: 2px solid var(--primary-1); outline-offset: -2px; border-color: var(--primary-1); }
.com-date .ico-calendar { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 16px; height: 16px; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat -985px 0; border: none; pointer-events: none; z-index: 2; }
.com-date .com-input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; z-index: 3; }
.com-date .com-input[type="date"]:not(:focus):invalid::-webkit-datetime-edit { opacity: 0; }
.com-date .com-input[type="date"]:focus::-webkit-datetime-edit { opacity: 1; }
.com-date .com-input[type="date"]:not(:focus):invalid::before { content: attr(placeholder); position: absolute; left: 12px;}
.com-date .com-input[type="date"]:focus::before { content: ""; }

@media (max-width: 768px) {
    .com-date-box { display: flex; width: 100%; }
    .com-date { flex: 1; }
    .com-date .com-input { width: 100%; min-width: 100%;}
}

@media (max-width: 480px) {
    .com-date-box { flex-direction: column; width: 100%; gap: 4px; }
    .com-date { width: 100%; flex: none; }
}


/**************************************************
    모달 Modal
***************************************************/
.com-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; justify-content: center; align-items: center; }
.com-modal.active { display: flex; }
.modal-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.com-modal .modal-content { position: relative; width: 620px; max-width: 90%; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); z-index: 10; padding: 30px; }
.com-modal .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 22px; }
.com-modal .modal-title { display: flex; align-items: center; font-size: var(--fs-24); font-weight: 700; color: #222; margin: 0; }
.com-modal .modal-title::before {content: ''; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat -831px 0;width: 24px;height: 24px; margin-right: 10px;}
.com-modal .btn-close { position: relative; width: 24px; height: 24px; background: none; border: none; cursor: pointer; padding: 0; }
.com-modal .btn-close::before, .com-modal .btn-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 1px; background-color: #222; }
.com-modal .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.com-modal .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.com-modal .btn-close:hover::before, .com-modal .btn-close:hover::after { background-color: #222; }
.com-modal .modal-body { padding: 38px 0 30px 0; text-align: center; }
.com-modal .modal-text { font-size: var(--fs-20); font-weight: 500; line-height: 1.4; margin: 0; }
.com-modal .modal-text span{display: block; color: var(--primary-1); margin-top: 14px;}
.com-modal .input-wrap input { width: 100%; max-width:320px; margin: 30px auto 0; height: 50px; }
.com-modal .input-full:focus { border-color: #0b4b9b; }
.com-modal .modal-footer { text-align: center; }
.com-modal .modal-footer button {margin: 0 auto;}

@media screen and (max-width: 768px) {
    .com-modal .modal-content {padding: 24px 20px; word-break: keep-all;}
    .com-modal .modal-body {padding: 28px 20px;}
    .com-modal .input-wrap input {height: 40px; margin-top: 20px;}
}


/**************************************************
    공통 테이블 Table
***************************************************/
.com-tbl-wrap.type-01 { width: 100%; overflow: hidden; }
.tbl-unit { display: flex; justify-content: flex-end; align-items: center; font-size: var(--fs-14); color: var(--text-muted); margin-bottom: 10px; text-align: right; }
.tbl-unit span {display: block;}
.tbl-unit span::after {content: '|'; margin: 0 10px; color: var(--gray-300);}
.com-tbl-wrap.type-01 table { width: 100%; border-top: 1px solid var(--primary-4); border-collapse: collapse; border-left: hidden; border-right: hidden;}
.com-tbl-wrap.type-01 :where(th,td) { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 20px; box-sizing: border-box; }
.com-tbl-wrap.type-01 th { font-weight: 600; text-align: center; background-color: var(--surface); color: var(--primary-5); }
.com-tbl-wrap.type-01 th.th-row { background: var(--white);border-top: 1px solid var(--primary-1); text-align: left; padding-left: 80px;}
.com-tbl-wrap.type-01 td { text-align: center; color: var(--text); }
.com-tbl-wrap.type-01 td.gr {background: #efefef;}
.com-tbl-wrap.type-01 td.td-left { text-align: left; }
.com-tbl-wrap.type-01 td.td-right { text-align: right; }
.com-tbl-wrap.type-01 td .td-red {color: var(--point-red);}
.com-tbl-wrap.type-01 td .td-blue {color: var(--point-blue);}
.com-tbl-wrap.type-01 td ul { text-align: left;}
.refer { position: relative; font-size: var(--fs-16); margin-top: 10px; padding-left: 15px; color: var(--text-muted); display: block;}
.refer::before { content: '※'; position: absolute; top: 0; left: 0; }
ul.refer-list { margin-top: 10px; }
ul.refer-list li { font-size: var(--fs-16); position: relative; padding-left: 14px; color: var(--text-muted); line-height: 1.4; }
ul.refer-list li::before { content: '-'; position: absolute; top: 0; left: 0; }
ul.refer-list li a { text-decoration: underline; color: inherit; }

@media screen and (max-width: 1024px) {
    .com-tbl-wrap.type-01 { overflow-x: auto; -webkit-overflow-scrol ling: touch; }
    .com-tbl-wrap.type-01 table { min-width: 900px; }
}
@media screen and (max-width: 480px) {
    .com-tbl-wrap.type-01 :where(th,td) { padding: 15px 20px; }
}

/**************************************************
    페이지네이션 Pagination
***************************************************/
.com-pagination { margin-top: 50px; text-align: center; }
.com-pagination ul { display: inline-flex; align-items: center; gap: 4px;  }
.com-pagination a { display: flex; justify-content: center; align-items: center; position: relative; width: 32px; height: 32px; border: 1px solid var(--border); text-decoration: none; color: #444; font-size: 15px; background-color: #fff; transition: all 0.2s ease; }
.com-pagination a:hover { border-color: #333; color: #111; }
.com-pagination a.num.active { background-color: #333; color: #fff; border-color: #333; font-weight: bold; }
.com-pagination .btn-page::before { content: ''; display: block; width: 6px; height: 6px; border-top: 1.5px solid #666; border-right: 1.5px solid #666; transition: border-color 0.2s ease; }
.com-pagination .btn-page:hover::before { border-color: #111; }
.com-pagination .btn-prev::before { transform: rotate(-135deg); margin-left: 2px; }
.com-pagination .btn-next::before { transform: rotate(45deg); margin-right: 2px; }
.com-pagination .btn-prev {margin-right: 10px;}
.com-pagination .btn-next {margin-left: 10px;}
.com-pagination .btn-first::before { transform: rotate(-135deg); margin-left: -2px; }
.com-pagination .btn-first::after { content: ''; position: absolute; width: 6px; height: 6px; border-top: 1.5px solid #666; border-right: 1.5px solid #666; transform: rotate(-135deg); margin-left: 8px; transition: border-color 0.2s ease; }
.com-pagination .btn-first:hover::after { border-color: #111; }
.com-pagination .btn-last::before { transform: rotate(45deg); margin-right: -3px; }
.com-pagination .btn-last::after { content: ''; position: absolute; width: 6px; height: 6px; border-top: 1.5px solid #666; border-right: 1.5px solid #666; transform: rotate(45deg); margin-right: 5px; transition: border-color 0.2s ease; margin-left: -3px; }
.com-pagination .btn-last:hover::after { border-color: #111; }


@media screen and (max-width: 768px){
  .com-pagination ul {flex-wrap: wrap;}
  .com-pagination a { width: 28px; height: 28px; }
  .com-pagination .btn-prev {margin-right: 4px;}
  .com-pagination .btn-next {margin-left: 4px;}
}


/**************************************************
    탭 Tab
***************************************************/
.com-tab-box { position: relative; width: 100%; margin-bottom: 60px; }
.com-tab { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.66%, 1fr)); }
.com-tab li { display: flex; height: 100%; }
.com-tab li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 54px; padding: 10px; background-color: var(--surface); font-weight: 600; text-decoration: none; color: var(--gray-400); text-align: center;  }
.com-tab li.active a { background-color: var(--white); color: var(--primary-1); border-top: 2px solid var(--primary-1); }
.com-tab li:hover:not(.active) a { background-color: var(--surface); color: var(--primary-1); }
.com-tab li a[target=_blank]::after { content: ''; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat -1320px -2px; width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-left: 8px;}
.com-tab li.active a[target=_blank]::after {background-position: -1129px -2px;}
.com-tab-box:has(li:only-child) { display: none;}

.com-tab-mobile-btn { display: none; }


.com-tab-02 { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: center; }
.com-tab-02 li a {display: block; color: var(--gray-300); font-weight: 500; border: 1px solid var(--gray-300); min-width: 196px; text-align: center; padding: 12px; border-radius: 50px;}
.com-tab-02 li.active a {font-weight: 700; color: var(--primary-1); border-color: var(--primary-1);}
.com-tab-02 li a[target=_blank]::after { content: ''; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat -1320px -2px; width: 16px; height: 16px; display: inline-block; margin-left: 8px; margin-bottom: -1px;}
.com-tab-02 li.active a[target=_blank]::after {background-position: -1129px -2px;}


/* 탭 컨텐츠 있을 시 */
.com-tab-contents .tab-panel {display: none;}
.com-tab-contents .tab-panel.active {display: block;}

@media screen and (max-width: 1400px) {
    .com-tab { grid-template-columns: repeat(4, 1fr); }
}

@media screen and (max-width: 1024px) {
    .com-tab-box:not(.com-tab-click) .com-tab-mobile-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 0 20px; background-color: var(--white); border: 2px solid var(--primary-1, #333); color: var(--primary-1); font-weight: 700; cursor: pointer; box-sizing: border-box; }
    .com-tab-box:not(.com-tab-click) .com-tab-mobile-btn::after { content: ''; display: block; width: 8px; height: 8px; border-bottom: 2px solid var(--primary-1); border-right: 2px solid var(--primary-1, #333); transform: translateY(-25%) rotate(45deg); transition: transform 0.3s; }

    .com-tab-box:not(.com-tab-click) .com-tab { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--white); border: 1px solid var(--gray-300); border-top: none; z-index: 100; max-height: 300px; overflow-y: auto; }
    .com-tab-box:not(.com-tab-click).open .com-tab { display: block; }
    .com-tab-box:not(.com-tab-click).open .com-tab-mobile-btn::after { transform: translateY(25%) rotate(225deg); }

    .com-tab-box:not(.com-tab-click) .com-tab li { width: 100%; }
    .com-tab-box:not(.com-tab-click) .com-tab li a { justify-content: flex-start; padding: 12px 20px; border: none !important; border-bottom: 1px solid #f1f1f1 !important; min-height: 48px;}
    .com-tab-box:not(.com-tab-click) .com-tab li.active a { background-color: var(--surface); }

    .com-tab-02 li a[target=_blank]::after { margin-bottom: -2px; transform: scale(.9); }
}

@media screen and (max-width: 768px) {
    .com-tab-click .com-tab { grid-template-columns: repeat(2, 1fr); }
    .com-tab-click .com-tab li a { min-height: 48px; font-size: 15px; }
    .com-tab-02 {gap:10px 14px; }
    .com-tab-02 li a { font-size: 15px; min-width: 140px; }
}



/**************************************************
  공통 게시판
***************************************************/
/* 게시판 검색 */
.board-no-data{color:var(--text-muted); text-align:center; padding:80px 0; }
.board-search{background-color:var(--surface);padding:30px;border-radius:4px;margin-bottom:40px;}
.board-search fieldset{border:none;padding:0;margin:0;}
.search-wrap{display:flex;justify-content:center;align-items:center;gap:8px;}

.board-search-btn{width: 68px; height:40px;background-color:#333;color:#fff;border:none;border-radius:2px;cursor:pointer;font-weight:500; font-size: var(--fs-16);}
.board-search-btn:hover{background-color:#222;}

/* 게시판 상단 */
.board-info{margin-bottom:15px;font-size:var(--fs-16);color:#555;}
.board-info .divider{margin:0 10px;color:#ccc;}
.board-info strong{color: var(--black); font-weight:bold;}

@media screen and (max-width: 768px) {
    .board-search {padding: 24px;}
    .search-wrap {flex-wrap: wrap;}
    .board-search-btn {width: 58px; flex: 0 0 58px;}
    .search-wrap .com-select.sm {width: 100%; max-width: calc(50% - 4px);}
    .search-wrap .com-input.md {width: auto; max-width: none; flex: 1 1 0; min-width: 0;}
}


/* 리스트게시판-01 */
.board-list-01 table, .board-list-02 table { width: 100%; border-collapse: collapse; border-top: 2px solid #000; }
.board-list-01 th, .board-list-02 th { border-bottom: 1px solid var(--border); text-align: center; }
.board-list-01 td, .board-list-02 td { border-bottom: 1px solid var(--border); text-align: center; }
.board-list-01 .subject, .board-list-02 .subject { text-align: left; }
.board-list-01 tbody tr:hover, .board-list-02 tbody tr:hover { background-color: var(--surface); transition: background-color 0.2s ease; }
.board-list-01 th, .board-list-01 td { padding: 30px 16px; }
.board-list-01 .num { font-size: var(--fs-16); color: var(--text-muted); font-weight: 500; }
.board-list-01 .subject a { display: flex; flex-direction: column; text-decoration: none; gap: 6px; }
.board-list-01 .subject a:hover .title { text-decoration: underline; }
.board-list-01 .subject .title { font-weight: 500; }
.board-list-01 .subject .date, .board-list-01 .subject .writer { font-size: var(--fs-14); color: var(--text-muted); }
.board-list-01 .subject .info-wrap span::after{content: '|'; margin: 0 10px; color: var(--gray-300);}
.board-list-01 .subject .info-wrap span:last-child::after {display: none;}
.subject .new::before { content: 'NEW'; font-size: 11px; background: var(--primary-3); border-radius: 3px; color: var(--white); padding: 2px 4px; margin-left: 8px; }
.subject .lock { width: 16px; height: 20px; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat -472px -1px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.board-list-01 .file a { display: flex; align-items: center; justify-content: center; }
.icon-data { width: 24px; height: 28px; display: block; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat; margin: 0 auto; }
.icon-file { background-position: 0 0;}
.file .icon-excel { background-position: -54px 0;
    width: 24px;}
.icon-ppt { background-position: -107px 0; }
.icon-word { background-position: -162px 0;}
.icon-hwp { background-position: -216px 0; }
.icon-pdf { background-position: -270px 0; }
.icon-jpg { background-position:-324px 0;}
.icon-empty { width: 15px; height: 1px; background: #aaa; margin: 0 auto; }

/* 리스트게시판-02 */
.board-list-02 th, .board-list-02 td { padding: 18px 10px; }
.board-list-02 th { font-weight: 600; }
.board-list-02 .subject a { text-decoration: none; display: block; }
.board-list-02 .subject a:hover { text-decoration: underline; }
.board-list-02 .icon-save { display: inline-block; width: 24px; height: 28px; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat 0 0; vertical-align: middle; }
.board-list-02 .icon-empty { display: block; width: 15px; height: 1px; background: #aaa; margin: 0 auto; }


@media screen and (max-width: 1200px) {
    .board-list-01 .com-sub-btn.xs {min-width: 80px; height: 32px; font-size:14px;}
}
@media screen and (max-width: 1024px) {
    .board-list-01 .com-sub-badge {padding: 2px 10px;}
}

@media screen and (max-width: 768px) {
    .board-list-01 table, .board-list-01 tbody, .board-list-01 tr, .board-list-01 td, .board-list-02 table, .board-list-02 tbody, .board-list-02 tr, .board-list-02 td { display: block; width: 100%; }
    .board-list-01 .file a{width: fit-content;}
    .board-list-02 thead {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);clip-path: inset(50%);border: 0;}
    .board-list-01 tr, .board-list-02 tr { position: relative; padding: 15px 10px; border-bottom: 1px solid var(--border); }
    .board-list-01 .com-sub-btn.xs {margin-top: 8px;}
    .board-list-01 td, .board-list-02 td { padding: 0; border: none; text-align: left; }
    .board-list-01 .num { display: inline-block; color: var(--gray-300); margin-bottom: 5px; }
    .board-list-01 .subject .title { display: block; font-size: 15px; margin-bottom: 5px; padding-right: 30px; }
    .board-list-01 .file { position: absolute; top: 15px; right: 10px;width: fit-content;}
    .board-list-01 .file a { margin-left: auto;}
    .board-list-01 .file .icon-empty { width: 12px; height: 1px; margin: 8px 0 0 auto; }
    .board-list-01 .file .icon-data {transform: scale(0.8); margin: 0 0 0 auto;}

    .board-list-02 .num { display: none; }
    .board-list-02 .category { display: inline-block; font-size: 14px; color: var(--text-muted); font-weight: 500; margin-bottom: 6px; }
    .board-list-02 .subject a { display: block; margin-bottom: 8px; padding-right: 30px; font-weight: 500; }
    .board-list-02 .date, .board-list-02 .hit, .board-list-02 .writer { display: inline-block;  color: var(--text-muted); font-size: 14px;}
    .board-list-02 .date::before { content: 'Date :'; margin-right: 4px;color: var(--text);}
    .board-list-02 .hit::before{content: 'Views :'; margin-right: 4px; color: var(--text);}
    .board-list-02 .writer::before{content: 'Author :'; margin-right: 4px; color: var(--text);}
    .board-list-01 .file .icon-data {transform: scale(0.8); margin: 0 0 0 auto;}

    .board-list-02 .file { position: absolute; top: 13px; right: 10px; width: fit-content; text-align:right;}
    .board-list-02 .file .icon-empty {display: none; }
    .board-list-01 .status {margin-top: 14px;}

    /*260608 수정*/
    .board-list-02 .m-info { display: inline-block; font-size: 14px; color: var(--text-muted);}
    .board-list-02 .m-info::before {content: attr(data-label)" :"; color: var(--text); margin-right: 4px; }
    .board-list-02 .action-btn {margin-top: 14px;}

}

/* faq 게시판 */
.board-faq ul { border-top: 2px solid #000;}
.board-faq li { border-bottom: 1px solid var(--border); }
.board-faq .q-box { display: flex; align-items: center; gap: 18px; width: 100%; padding: 30px 24px; background: var(--white); border: none; cursor: pointer; text-align: left; }
.board-faq .icon-q { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--text-muted); font-weight: bold; flex-shrink: 0; transition: all 0.3s ease; }
.board-faq .q-box .text { flex: 1; font-weight: 500; }
.board-faq .icon-arrow { width: 10px; height: 10px; border-bottom: 1.5px solid #333; border-right: 1.5px solid #333; transform: rotate(45deg); transition: transform 0.3s ease; }
.board-faq li.active .icon-q { background: var(--primary-1); color: var(--white); }
.board-faq li.active .icon-arrow { transform: rotate(-135deg); margin-top: 6px; }
.board-faq .a-box { display: none; background: var(--surface); border-top: 1px dotted var(--border); padding: 30px 32px;}
.board-faq .a-inner { display: flex; align-items: flex-start; gap: 18px; font-weight: 500;}
.board-faq .icon-reply { width: 18px; height: 28px; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -520px 8px;}
.board-faq .icon-a { color: var(--primary-1); font-weight: 700;}
/* 260618 수정 */
.board-faq .a-inner .text { color: var(--text-muted); flex: 1; font-family: var(--font-basic);   word-break: keep-all; white-space: pre-wrap;}
.board-faq .admin-btns { display: flex; flex-shrink: 0; font-size: var(--fs-16); color: var(--text-muted); }
.board-faq .admin-btns button::after {content: '|'; color: var(--text-muted); margin: 0 10px;}
.board-faq .admin-btns button:last-child:after {display: none;}


@media screen and (max-width: 768px){
    .board-faq .q-box {padding: 20px; gap: 14px;}
    .board-faq .a-box {padding: 20px;}
    .board-faq .a-inner {flex-wrap: wrap; gap: 8px}
    .board-faq .admin-btns {gap: 8px; width: 100%; justify-content: flex-end;}
}
/* // 260618 수정 */


/* 갤러리+리스트 게시판 */
.board-gallery-01{border-top:2px solid var(--black)}
.board-gallery-01 li{border-bottom:1px solid var(--border)}
.board-gallery-01 a{display:flex;gap:30px;padding:30px 16px;text-decoration:none;color:inherit;align-items:stretch}
.board-gallery-01 a:hover{background-color:var(--surface);transition:background-color .2s ease}
.board-gallery-01 a:hover .title{text-decoration:underline}
.board-gallery-01 .thumb{flex-shrink:0;width:300px;height:190px;overflow:hidden;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.board-gallery-01 .thumb img{width:100%;height:100%;object-fit:cover;overflow: hidden; transition: .3s;}
.board-gallery-01 .info{display:flex;flex-direction:column;justify-content:center;flex-grow:1;min-width:0;gap:24px}
.board-gallery-01 a:hover .thumb img {transform: scale(1.1);}
.board-gallery-01 .title{font-size:var(--fs-24);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-gallery-01 .desc{color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.board-gallery-01 .date{font-size:var(--fs-16);color:var(--text-muted)}

@media screen and (max-width:768px){
    .board-gallery-01 a{flex-direction:column;gap:15px;padding:20px 10px}
    .board-gallery-01 .info{gap:10px}
    .board-gallery-01 .thumb{width:100%;height:auto;aspect-ratio:16/9}
    .board-gallery-01 .title{white-space:normal;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical}
    .board-gallery-01 .desc{-webkit-line-clamp:3}
    .board-list-02 .file .icon-data{transform:scale(0.8); margin:0 0 0 auto;}
}


/* 갤러리 게시판 (사진) */
.board-gallery-02 { border-top: 2px solid var(--black); padding-top: 30px; border-bottom: 1px solid var(--border, #ddd); padding-bottom: 30px; }
.board-gallery-02 ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px;}
.board-gallery-02 ul li {min-width: 0;}
.board-gallery-02 a { text-decoration: none; color: inherit; display: block; }
.board-gallery-02 a:hover .title { text-decoration: underline; }

.board-gallery-02 .thumb { aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border); }
.board-gallery-02 .thumb img { width: 100%; height: 100%; object-fit: cover; overflow: hidden; transition: .3s;}
.board-gallery-02 .thumb:hover img {transform: scale(1.1);}
.board-gallery-02 .title { display: block; font-weight: 500; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-gallery-02 .date { display: block; font-size: var(--fs-16); color: var(--text-muted); }

@media screen and (max-width: 1200px) {
    .board-gallery-02 ul {grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media screen and (max-width: 768px) {
    .board-gallery-02 ul { grid-template-columns: repeat(1, 1fr); gap: 30px; }
}


/* ebook형 게시판 (4개) */
.board-gallery-03 { border-top: 2px solid var(--black); padding-top: 30px; border-bottom: 1px solid var(--border); padding-bottom: 30px; }
.board-gallery-03 ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px 50px;}
.board-gallery-03 .item { display: flex; flex-direction: column; height: 100%; }
.board-gallery-03 .thumb { aspect-ratio: 1 / 1.4; background: var(--surface); overflow: hidden; border: 1px solid var(--border); box-shadow: 3px 4px 10px rgba(0,0,0,0.06); border-radius: 10px; }
.board-gallery-03 .thumb img { width: 100%; height: 100%; object-fit: fill; }
.board-gallery-03 .title { display: block; font-size: var(--fs-20); font-weight: 600; text-align: center; margin: 30px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-gallery-03 .btn-wrap { display: flex; gap: 8px; justify-content: center; margin-top: auto; }
.board-gallery-03 .btn-wrap .com-sub-btn {min-width: 130px; white-space: normal !important; word-break:keep-all; }
.board-gallery-03 .title { display: block; font-size: var(--fs-20); font-weight: 600; text-align: center; margin: 30px 0; word-break: keep-all; overflow-wrap: break-word; }
.board-gallery-03 .btn-wrap .com-sub-btn {flex: 1;  min-width: 0; padding: 10px 4px; white-space: nowrap;}

/* ebook형 게시판 (3개) */
.board-gallery-03.col-3 ul { grid-template-columns: repeat(3, minmax(0, 1fr));}
.board-gallery-03.col-3 .thumb { aspect-ratio: 1.4 / 1; }


@media screen and (max-width: 1200px) {
    .board-gallery-03 ul {gap: 40px 30px;}
}

@media screen and (max-width: 1024px) {
    .board-gallery-03 ul { grid-template-columns: repeat(2, 1fr); }
    .board-gallery-03.col-3 ul { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
    .board-gallery-03 .title {margin: 20px 0;}
    .board-gallery-03 .btn-wrap { flex-direction: column; gap: 6px; }
    .board-gallery-03 .btn-wrap .com-sub-btn.ebook {display: none;}
}

@media screen and (max-width: 768px) {
    .board-gallery-03 ul { grid-template-columns: repeat(1, 1fr); }
    .board-gallery-03.col-3 ul { grid-template-columns: repeat(1, 1fr); }
    .board-gallery-03 .title {margin: 15px 0;}
}




/* 게시판 상세페이지 */
.board-view { border-top: 2px solid var(--black); }
.board-view .view-hd { padding: 40px 30px; border-bottom: 1px solid var(--border); }
.board-view .view-hd .title { font-size: var(--fs-24); font-weight: 700; margin-bottom: 20px; }
.board-view .view-hd .info { display: flex; }
.board-view .view-hd .info li { display: flex;  color: var(--text-muted); font-size: var(--fs-16);}
.board-view .view-hd .info li::after {content: '|'; margin: 0 15px; color: var(--gray-300); vertical-align: middle;}
.board-view .view-hd .info li:last-child:after {display: none;}
.board-view .view-hd .info li strong {margin-right: 10px; font-weight: 500;}

.view-files { display: flex; align-items: center; gap: 30px; padding: 30px; background: var(--surface); border-top: 1px solid var(--border); }
.view-files strong { color: var(--primary-1); font-weight: 600; flex-shrink: 0;}

.view-files .file-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.view-files .file-list li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; }
.view-files .file-info { display: flex; align-items: center; flex-wrap: wrap;}

.view-files .btn-file { color: var(--text-muted); text-decoration: none; display: inline-block; position: relative; font-weight: 500; }
.view-files .btn-file::before { content: ''; width: 24px; height: 28px; display: inline-block; vertical-align: middle; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat; margin: 0 10px 0 0;}

.view-files .btn-file.icon-excel::before  { background-position: -54px 0;}
.view-files .btn-file.icon-ppt::before  { background-position: -107px 0; }
.view-files .btn-file.icon-word::before  { background-position: -162px 0;}
.view-files .btn-file.icon-hwp::before  { background-position: -216px 0; }
.view-files .btn-file.icon-pdf::before  { background-position: -270px 0; }
.view-files .btn-file.icon-jpg::before  { background-position:-324px 0;}

.view-files .file-size { color: #999; margin-left: 10px; font-size: 14px; }
.view-files .file-down-cnt { color: #999; margin-left: 8px; font-size: 14px; display: flex; align-items: center; }
.view-files .file-down-cnt::before { content: ''; display: inline-block; width: 1px; height: 12px; background-color: var(--border); margin-right: 8px; }

.view-content { min-height: 300px; padding: 40px 30px; }
.view-content pre {font-size: var(--fs-18); line-height: 1.6; font-weight: 400; font-family: var(--font-basic); color: var(--text);}
.blind{font-size:0; width:0; height:0; line-height:0; position:absolute; left:-9999px;}
/* 이전글 다음글 */
.board-pre-next .view-nav { border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; }
.board-pre-next .view-nav > div { display: flex; align-items: center; padding: 20px 0; }
.board-pre-next .view-nav > div:not(:last-child) { border-bottom: 1px solid var(--border); }
.board-pre-next .view-nav dt { display: flex; align-items: center; gap: 20px; width: 120px; font-weight: 600; color: var(--gray-400); padding-left: 30px; flex-shrink: 0; }
.board-pre-next .view-nav dd { margin: 0; padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-pre-next .view-nav a { color: var(--text-muted); text-decoration: none; }
.board-pre-next .view-nav a:hover { text-decoration: underline; color: #000; }

.com-btn-box .list-btn:only-child { margin: 0 auto; }


/* 답변 */
.view-reply-wrap, .board-view .view-reply-wrap { margin-top: 40px; padding: 30px 24px; border-top: 3px solid var(--primary-1); }
/* 답변 등록 */
.view-reply-wrap .reply-title { font-size: var(--fs-24); font-weight: 700; color: var(--primary-1); margin: 0 0 16px 0; }
.view-reply-wrap .reply-textarea { width: 100%; min-height: 200px; padding: 20px; border: 1px solid var(--border); box-sizing: border-box; font-family: inherit; font-size: var(--fs-16, 16px); resize: vertical; outline: none; }
.view-reply-wrap .reply-textarea::placeholder { color: var(--gray-300); }
.view-reply-wrap .reply-textarea:focus { border-color: var(--primary-1); }
.view-reply-wrap .reply-btn-box { margin-top: 15px; }

/* 답변 상세 */
.view-reply-wrap .info { display: flex;margin-bottom: 40px; }
.view-reply-wrap .info li { display: flex; color: var(--text-muted); font-size: var(--fs-16); }
.view-reply-wrap .info li::after { content: '|'; margin: 0 12px; color: var(--gray-300); }
.view-reply-wrap .info li:last-child::after { display: none; }
.view-reply-wrap .info li strong { margin-right: 8px; font-weight: 500; }
.view-reply-wrap .answer-content { background-color: var(--surface); padding: 30px; min-height: 200px;  }
.view-reply-wrap .answer-btn-box { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.view-reply-wrap .com-btn-box {margin-top: 30px; gap: 15px;}

/* 260618 공공누리 추가 */
.resultCode {display: flex; align-items: center; padding: 30px 50px; border: 1px solid #e0e4e8; border-radius: 8px; margin-top: 110px; gap: 20px; color:var(--text-muted) }
.resultCode img {display: block;width:183px;height:54px;}
/* // 260618 공공누리 추가 */

@media screen and (max-width: 768px) {
    .board-view .view-hd { padding: 25px 20px; }
    .board-view .view-hd .title { margin-bottom: 15px; }
    .board-view .view-hd .info { flex-wrap: wrap; gap: 10px;}
    .board-view .view-hd .info li.date { width: 100%; margin-right: 0;  }
    .view-files { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
    .view-content { padding: 25px 20px; }
    .board-pre-next .view-nav {margin-bottom: 20px;}
    .board-pre-next .view-nav > div { padding: 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
    .board-pre-next .view-nav dt { width: auto; padding-left: 0; }
    .board-pre-next .view-nav dd { padding-right: 0; width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

    .view-reply-wrap .answer-content {padding: 20px;}
    .view-reply-wrap .info {margin-bottom: 20px;}
    .view-reply-wrap {padding: 20px 15px;}
    .view-reply-wrap .com-btn-box {margin-top: 15px;}

    /* 260618 공공누리 추가 */
    .resultCode {flex-direction: column; gap: .625rem;}
    /* // 260618 공공누리 추가 */
}

@media screen and (max-width: 480px) {
    .view-reply-wrap .com-btn-box .com-sub-btn {width: 100%; gap: 10px;}
}

/* 영상 상세페이지 */
.view-content .video-wrap { width: 100%; max-width: 1200px; margin: 0 auto; margin-bottom: 20px; background-color: var(--surface) }
.view-content .video-wrap video { display: block; width: 100%; height: auto; }
.view-content .script-wrap { width: 100%; max-width: 1200px; margin: 0 auto; border: 1px solid var(--border); background-color: #fff; margin-bottom: 40px;}
.view-content .script-wrap .script-hd { background-color: var(--primary-1); color: #fff; padding: 12px 20px; font-weight: 500; }
.view-content .script-wrap .script-bd { padding: 20px; max-height: 200px; overflow-y: auto; font-size: var(--fs-16); line-height: 1.8;position: relative; }
.view-content .script-wrap .script-bd p { margin: 0 0 15px 0; }
.view-content .script-wrap .script-bd p:last-child { margin-bottom: 0; }
.view-content .script-wrap .script-bd::-webkit-scrollbar { width: 6px; }
.view-content .script-wrap .script-bd::-webkit-scrollbar-track { background: #f1f1f1; }
.view-content .script-wrap .script-bd::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.view-content .script-wrap .script-bd::-webkit-scrollbar-thumb:hover { background: #999; }
.view-content .script-wrap .script-bd a { text-decoration: none; display: block; padding: 2px 10px; border-radius: 5px; transition: all 0.2s; }
.view-content .script-wrap .script-bd a:hover { color: var(--primary-1); font-weight: 600; text-decoration: underline; }
.view-content .script-wrap .script-bd a.active {background: var(--primary-1); color: var(--white); }


/* 게시판 작성페이지 */
.board-write{border-top:2px solid var(--black);border-bottom:1px solid var(--border)}
.board-write li{display:flex;border-bottom:1px solid var(--border)}
.board-write li:last-child{border-bottom:none}
.board-write .th{width:195px;flex-shrink:0;background-color:var(--surface);padding: 20px 30px;font-weight:600;display:flex;align-items:center}
.board-write .req{color:var(--point-red);margin-right:6px;font-weight:bold}
.board-write .td{flex-grow:1;padding:20px;min-width:0}
.board-write .com-input{height:50px}
.board-write .com-select{height:50px}
.com-textarea{width:100%;height:250px;padding:15px;border:1px solid var(--border);outline:none;resize:vertical;font-family:inherit;font-size:var(--fs-16);}
.com-textarea:focus{border: 2px solid var(--primary-1)}
.board-write .com-email-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.board-write .com-email-box .com-input { flex: 1 1 160px; max-width: 200px; min-width: 100px; }
.board-write .com-email-box .at { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.board-write .com-email-box .com-select { flex: 1 1 150px; max-width: 200px; min-width: 120px; }

.com-contact-box { display: flex; align-items: center; gap: 6px; width: 100%; }
.com-contact-box .com-select.phone { flex: 1 1 0%; min-width: 0; padding-right: 25px; background-position: right 8px center; }
.com-contact-box .com-input { flex: 1 1 0%; min-width: 0; }
.com-contact-box .dash { flex: 0 0 auto; }

/*파일업로드*/
.file-upload-wrap .file-drag-box{border:1px solid #d1d5db;padding:20px;background:#fff}
.file-upload-wrap .file-drag-box .inner{border:1px dashed #ccc;padding:15px;display:flex;align-items:center;gap:15px}
.file-upload-wrap  .btn-upload{background:var(--primary-1);color:#fff;border:none;padding:8px 24px;font-weight:500;cursor:pointer; font-size: 15px; height: 50px; min-width: 88px;}
.file-upload-wrap .placeholder{color:#999;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.file-upload-wrap .btn-del-file{margin-top:10px;background:#666;color:#fff;border:none;padding:5px 12px;font-size:13px;cursor:pointer;border-radius:2px}
.file-upload-wrap .btn-del-file:hover{background:#333}
.file-upload-wrap .file-list { margin-top: 12px; }
.file-upload-wrap .file-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 15px; background: #f9f9f9; border: 1px solid #eee; border-radius: 4px; margin-bottom: 6px;}
.file-upload-wrap .file-list li .file-name { font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;}
.file-upload-wrap .file-list li .btn-del { background: none; border: none; color: var(--point-red); cursor: pointer; font-size: 1; line-height: 1; padding: 0 5px;}
.file-upload-wrap .file-list li .btn-del:hover { color: #cc0000; }


@media screen and (max-width:768px){
    .board-write li{flex-direction:column}
    .board-write .th{width:100%;padding:15px 20px;border-bottom:1px solid var(--border)}
    .board-write .td{padding:15px 20px}
    .board-write .file-drag-box .inner{flex-direction:column;text-align:center;gap:10px;padding:25px 15px}
    .board-write .file-list li {flex-direction: row;}
    .board-write .com-input {height: 40px;}
    .board-write .com-input.lg {max-width: 100%;}
    .board-write .com-select {height: 40px;}
    .board-write .btn-upload {height: 40px;}
    .board-write .com-email-box .com-input, .board-write .com-email-box .com-select { max-width: none; }

}

@media screen and (max-width:480px){
    .write-btn-box .com-sub-btn{width:100%;height: 54px;}

    .com-contact-box { gap: 4px; }
    .com-contact-box .com-select.phone, .com-contact-box .com-input { height: 40px; }

    .board-write .com-email-box { gap: 8px 4px; }
    .board-write .com-email-box .com-input { flex: 1 1 calc(50% - 15px); min-width: 0; }
    .board-write .com-email-box .com-select { flex: 1 1 100%; max-width: 100%; margin-top: 2px; }
}



/**************************************************
  페이지 준비중
***************************************************/
.preparing-wrap {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: 50px 0;}
.preparing-wrap h3 {font-size: var(--fs-h3);}
.preparing-wrap h3 strong {color: var(--primary-1);}
.preparing-wrap p {font-size: var(--fs-20); color: var(--text-muted);}