@charset "utf-8";


/* ===== 특허/인증 게시판 (certi) ===== */

.certi_wrap { max-width: 1200px; margin: 0px auto; padding: 0 20px; font-family: 'Noto Sans KR', sans-serif; }

.certi_header { text-align: center; margin-bottom: 50px; }
.certi_tit { font-size: 2.5em; font-weight: 700; color: #111; margin-bottom: 10px; }
.certi_desc { font-size: 1.1em; color: #666; }

/* 카테고리 탭 - JI-TECH 스타일 */
.certi_cate { margin-bottom: 40px; border-bottom: 1px solid #e0e0e0; }
#bo_cate ul { display: flex; width: 100%; margin: 0; padding: 0; list-style: none; }
#bo_cate li { flex: 1; margin: 0; }
#bo_cate a { display: block; padding: 15px 10px; color: #666; text-decoration: none; font-size: 1.05em; transition: all 0.3s ease; position: relative; border-bottom: 3px solid transparent; text-align: center; }
#bo_cate a:hover { color: #0056b3; }
#bo_cate #bo_cate_on { color: #0056b3; font-weight: 700; border-bottom: 3px solid #0056b3; }

/* 상단 유틸리티 */
.certi_top { margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; }
.certi_top #bo_list_total { color: #888; font-size: 0.95em; }
.certi_top #bo_list_total strong { color: #333; }
.certi_top .btn_bo_user { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }

/* default.css a.btn,.btn 의 line-height:35px; height:35px 제거로 아이콘+텍스트 수직 정렬 */
.certi_top .btn_bo_user .btn { padding: 8px 15px; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #555; font-size: 0.9em; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; line-height: 1; height: auto; min-height: 38px; box-sizing: border-box; }
.certi_top .btn_bo_user .btn:hover { border-color: #0056b3; color: #0056b3; }
.certi_top .btn_bo_user .btn_write { background: #0056b3; color: #fff; border-color: #0056b3; }
.certi_top .btn_bo_user .btn_write:hover { background: #004494; }

/* 4컬럼 그리드 목록 */
.certi_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 0; padding: 0; list-style: none; }

.certi_li { background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #eee; overflow: hidden; }
.certi_li:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.certi_link { display: block; text-decoration: none; color: #333; }

.certi_img { position: relative; width: 100%; padding-top: 140%; /* 1:1.4 aspect ratio for portrait certificates */ background: #f9f9f9; overflow: hidden; border-bottom: 1px solid #f0f0f0; }
.certi_img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; object-fit: contain; }
.certi_img .no_img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ccc; font-size: 0.9em; }

/* 호버 시 오버레이 */
.certi_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 86, 179, 0.6); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.certi_overlay i { color: #fff; font-size: 2.5em; transform: scale(0.5); transition: transform 0.3s ease; }
.certi_li:hover .certi_overlay { opacity: 1; }
.certi_li:hover .certi_overlay i { transform: scale(1); }

.certi_modal_open { overflow: hidden; }
.certi_modal { display: none; position: fixed; inset: 0; z-index: 2000; }
.certi_modal.is-open { display: block; }
.certi_modal_backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.certi_modal_dialog { position: relative; width: min(1100px, calc(100% - 40px)); margin: 30px auto; background: #111; border-radius: 10px; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.35); }
.certi_modal_close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.14); color: #fff; font-size: 26px; line-height: 42px; cursor: pointer; }
.certi_modal_close:hover { background: rgba(255,255,255,0.22); }
.certi_modal_viewport { background: #000; display: flex; justify-content: center; align-items: center; padding: 18px; }
.certi_modal_img { max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; cursor: zoom-in; transition: transform 180ms ease; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; }
.certi_modal.is-zoom .certi_modal_img { cursor: zoom-out; }
.certi_modal_hint { padding: 12px 18px; background: #111; color: rgba(255,255,255,0.75); font-size: 0.95em; text-align: center; border-top: 1px solid rgba(255,255,255,0.08); }

.certi_txt { padding: 20px; text-align: center; }
.certi_cate_tag { display: block; font-size: 0.85em; color: #0056b3; margin-bottom: 8px; font-weight: 500; }
.certi_subject { display: block; font-size: 1.05em; line-height: 1.4; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.new_icon { display: inline-block; margin-left: 5px; width: 18px; height: 18px; line-height: 18px; background: #e74c3c; color: #fff; font-size: 10px; border-radius: 50%; vertical-align: middle; text-align: center; font-weight: bold; }

.certi_empty { grid-column: 1 / -1; padding: 100px 0; text-align: center; color: #999; font-size: 1.1em; background: #fcfcfc; border: 1px dashed #ddd; }

/* 페이지네이션 */
.certi_pager { margin-top: 60px; text-align: center; }
.certi_pager .pg_wrap { display: flex !important; justify-content: center; align-items: center; width: 100%; padding: 40px; }
.certi_pager .pg { display: flex !important; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.certi_pager .pg_page,
.certi_pager .pg_current,
.certi_pager .pg_start,
.certi_pager .pg_prev,
.certi_pager .pg_next,
.certi_pager .pg_end {
    float: none !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    line-height: 38px;
    border: 1px solid #ddd;
    color: #666;
    text-decoration: none;
    border-radius: 50%;
    font-weight: 500;
    box-sizing: border-box;
}
.certi_pager .pg_current { background: #333; color: #fff; border-color: #333; }
.certi_pager .pg_page:hover,
.certi_pager .pg_start:hover,
.certi_pager .pg_prev:hover,
.certi_pager .pg_next:hover,
.certi_pager .pg_end:hover { background: #f5f5f5; border-color: #333; color: #333; }

/* 검색 팝업 */
.bo_sch_wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.bo_sch { position: absolute; top: 50%; left: 50%; width: 400px; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); padding: 30px; z-index: 1001; }
.bo_sch h3 { margin-top: 0; margin-bottom: 20px; font-size: 1.5em; font-weight: 700; color: #111; }
.bo_sch select { width: 100%; height: 45px; padding: 0 15px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 12px; font-size: 1em; }
.bo_sch .sch_bar { display: flex; border: 2px solid #0056b3; border-radius: 6px; overflow: hidden; }
.bo_sch .sch_input { flex: 1; height: 45px; border: 0; padding: 0 15px; font-size: 1em; }
.bo_sch .sch_btn { width: 60px; height: 45px; background: #0056b3; color: #fff; border: 0; font-size: 1.2em; cursor: pointer; }
.bo_sch .bo_sch_cls { position: absolute; top: 20px; right: 20px; border: 0; background: none; font-size: 1.5em; color: #aaa; cursor: pointer; }
.bo_sch_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }

/* 댓글 영역 (certi_v_comment) */
.certi_v_comment { margin-top: 50px; border-top: 1px solid #eee; padding-top: 30px; }
.cmt_header { margin-bottom: 20px; }
.cmt_tit { font-size: 1.2em; font-weight: 700; color: #333; }
.cmt_tit strong { color: #0056b3; }

.cmt_item { margin-bottom: 15px; }
.cmt_item_inner { display: flex; gap: 15px; position: relative; padding: 20px; background: #fcfcfc; border: 1px solid #eee; border-radius: 12px; }
.cmt_reply_icon { position: absolute; left: -25px; top: 20px; color: #ccc; font-size: 1.2em; }

.cmt_pf_img { flex: 0 0 45px; }
.cmt_pf_img img { width: 45px; height: 45px; border-radius: 50%; border: 1px solid #eee; }

.cmt_wrap { flex: 1; min-width: 0; }
.cmt_hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.cmt_info { display: flex; align-items: center; gap: 12px; }
.cmt_name { font-weight: 700; color: #333; font-size: 1em; }
.cmt_date { font-size: 0.85em; color: #999; }
.cmt_ip { font-size: 0.85em; color: #ccc; }

.cmt_opt { position: relative; }
.btn_cmt_opt { background: none; border: 0; color: #aaa; cursor: pointer; padding: 5px; font-size: 1.1em; transition: color 0.2s; }
.btn_cmt_opt:hover { color: #333; }
.cmt_act { display: none; position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 10; list-style: none; margin: 0; padding: 5px 0; min-width: 80px; }
.cmt_act li a { display: block; padding: 8px 15px; font-size: 0.9em; color: #555; text-decoration: none; text-align: center; }
.cmt_act li a:hover { background: #f5f5f5; color: #0056b3; }

.cmt_contents { line-height: 1.6; color: #555; font-size: 0.95em; word-break: break-all; }
.secret_icon { color: #f1c40f; margin-right: 5px; }

.cmt_empty { padding: 40px 0; text-align: center; color: #999; font-size: 0.95em; }

/* 댓글 쓰기 폼 */
.cmt_write_box { margin-top: 30px; margin-bottom: 50px; background: #fff; border: 2px solid #eee; border-radius: 12px; overflow: hidden; }
.cmt_textarea_wr { position: relative; border-bottom: 1px solid #eee; }
.cmt_textarea { width: 100%; height: 100px; border: 0; padding: 20px; box-sizing: border-box; resize: none; font-family: inherit; font-size: 1em; outline: none; }
.cmt_char_cnt { position: absolute; right: 20px; bottom: 10px; font-size: 0.85em; color: #ccc; }

.cmt_form_bot { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; background: #fcfcfc; flex-wrap: wrap; gap: 15px; }
.cmt_info_inputs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cmt_input { height: 38px; padding: 0 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9em; width: 130px; }
.cmt_captcha { transform: scale(0.9); transform-origin: left center; }

.cmt_btns { display: flex; align-items: center; gap: 20px; }
.btn_cmt_submit { height: 42px; padding: 0 30px; background: #0056b3; color: #fff; border: 0; border-radius: 4px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.btn_cmt_submit:hover { background: #004494; }

@media (max-width: 768px) {
    .cmt_form_bot { flex-direction: column; align-items: stretch; }
    .cmt_info_inputs { flex-direction: column; align-items: stretch; }
    .cmt_input { width: 100%; }
    .cmt_btns { justify-content: space-between; }
    .btn_cmt_submit { flex: 1; }
}
.certi_view_wrap { max-width: 1000px; margin: 110px auto; padding: 0 20px; font-family: 'Noto Sans KR', sans-serif; }

.certi_view_header { border-bottom: 2px solid #333; padding-bottom: 25px; margin-bottom: 30px; }
.certi_v_top { margin-bottom: 15px; }
.certi_v_cate { display: inline-block; background: #0056b3; color: #fff; padding: 3px 12px; border-radius: 3px; font-size: 0.9em; margin-bottom: 10px; }
.certi_v_tit { font-size: 2.2em; font-weight: 700; color: #111; line-height: 1.3; margin: 0; }
.certi_v_info { color: #888; font-size: 0.95em; display: flex; gap: 20px; }
.v_info_item i { margin-right: 5px; color: #ccc; }

.certi_v_content_box { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); padding: 40px; margin-bottom: 30px; }

.certi_v_layout { display: flex; gap: 40px; align-items: flex-start; }
.certi_v_img_area { flex: 0 0 400px; }
.certi_v_img_area img { width: 100%; height: auto; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.certi_v_text_area { flex: 1; }
.certi_v_text_area.full_width { flex: none; width: 100%; }

.certi_v_con { line-height: 1.8; color: #444; font-size: 1.05em; }
.certi_v_con img { max-width: 100% !important; height: auto !important; }

/* 첨부파일 다운로드 영역 */
.certi_v_file { margin-top: 40px; padding-top: 30px; border-top: 1px solid #f0f0f0; }
.certi_v_file h3 { font-size: 1.1em; color: #333; margin-bottom: 15px; }
.certi_v_file ul { list-style: none; padding: 0; margin: 0; }
.certi_v_file li { margin-bottom: 10px; }
.view_file_download { display: inline-flex; align-items: center; background: #f8f9fa; border: 1px solid #ddd; padding: 10px 20px; border-radius: 6px; text-decoration: none; color: #333; transition: all 0.2s ease; }
.view_file_download:hover { background: #e9ecef; border-color: #0056b3; color: #0056b3; }
.file_name { font-weight: 500; margin-right: 10px; }
.file_size { color: #888; font-size: 0.9em; }

/* 하단 버튼 */
.certi_v_btns { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding-top: 20px; border-top: 1px solid #eee; }
.certi_v_btns .btn { padding: 10px 25px; border-radius: 6px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 1em; transition: all 0.3s ease; }

.btn_v_list { background: #333; color: #fff; }
.btn_v_list:hover { background: #000; }
.btns_right { display: flex; gap: 10px; }
.btn_v_edit { background: #fff; color: #555; border: 1px solid #ddd; }
.btn_v_edit:hover { background: #f5f5f5; border-color: #333; color: #333; }
.btn_v_del { background: #fff; color: #e74c3c; border: 1px solid #e74c3c; }
.btn_v_del:hover { background: #e74c3c; color: #fff; }
.btn_v_write { background: #0056b3; color: #fff; }
.btn_v_write:hover { background: #004494; }

/* 이전글 다음글 */
.certi_v_nb { list-style: none; padding: 0; margin: 0 0 40px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.certi_v_nb li { display: flex; align-items: center; padding: 15px 20px; background: #fff; }
.certi_v_nb li:first-child { border-bottom: 1px solid #eee; }
.nb_label { width: 80px; color: #888; font-size: 0.9em; font-weight: 700; }
.certi_v_nb a { flex: 1; color: #333; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.certi_v_nb a:hover { color: #0056b3; text-decoration: underline; }

/* 글쓰기 폼 (certi) */
.certi_write_wrap { max-width: 900px; margin: 110px auto; padding: 0 20px; font-family: 'Noto Sans KR', sans-serif; }

.certi_form { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.form_box { padding: 40px; }

.certi_form .write_div { margin-bottom: 25px; }
.certi_form .lb_tit { display: block; font-size: 1.05em; font-weight: 700; color: #333; margin-bottom: 10px; }
.certi_form .lb_tit strong { color: #e74c3c; }

.certi_form .frm_input { width: 100%; height: 45px; padding: 0 15px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; transition: border-color 0.3s ease; }
.certi_form .frm_input:focus { border-color: #0056b3; outline: none; }
.certi_form select { width: 100%; height: 45px; padding: 0 15px; border: 1px solid #ddd; border-radius: 6px; background: #fff; }

.certi_form .row_group { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* 임시저장 버튼 */
.btn_autosave { position: absolute; right: 0; top: -35px; background: #f5f5f5; border: 1px solid #ddd; padding: 5px 12px; border-radius: 4px; font-size: 0.85em; cursor: pointer; color: #666; }
#autosave_wrapper { position: relative; }
#autosave_pop { z-index: 1000; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border: 1px solid #ddd; padding: 10px; background: #fff; position: absolute; top: 45px; right: 0; width: 300px; display: none; }
#autosave_pop ul { list-style: none; padding: 0; margin: 10px 0; max-height: 200px; overflow-y: auto; }
#autosave_pop li { padding: 8px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
#autosave_pop li a { color: #333; text-decoration: none; font-size: 0.9em; }
#autosave_pop .autosave_close { width: 100%; padding: 8px; background: #eee; border: 0; cursor: pointer; border-radius: 4px; }

/* 옵션 체크박스 */
.bo_v_option { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.chk_box { display: inline-block; }
.chk_box input[type="checkbox"] { display: none; }
.chk_box label { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.95em; color: #555; }
.chk_box label span { display: inline-block; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 4px; position: relative; transition: all 0.2s ease; background: #fff; }
.chk_box input[type="checkbox"]:checked + label span { background: #0056b3; border-color: #0056b3; }
.chk_box input[type="checkbox"]:checked + label span:after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 12px; font-weight: bold; }

/* 파일 첨부 */
.file_wr { position: relative; border: 1px dashed #ddd; padding: 15px; border-radius: 6px; background: #f9f9f9; text-align: center; }
.file_del { margin-top: 8px; font-size: 0.9em; color: #e74c3c; }

/* 버튼 영역 */
.certi_form .btn_confirm { display: flex; justify-content: center; gap: 10px; padding: 30px 40px; background: #fcfcfc; border-top: 1px solid #eee; margin-bottom: 0; }
.certi_form .btn_submit { width: 180px; height: 50px; background: #0056b3; color: #fff; border: 0; border-radius: 6px; font-size: 1.1em; font-weight: 700; cursor: pointer; transition: background 0.3s ease; }
.certi_form .btn_submit:hover { background: #004494; }
.certi_form .btn_cancel { width: 180px; height: 50px; line-height: 50px; text-align: center; background: #fff; color: #666; border: 1px solid #ddd; border-radius: 6px; text-decoration: none; font-size: 1.1em; font-weight: 700; display: block; }
.certi_form .btn_cancel:hover { background: #f5f5f5; color: #333; }

.char_desc { font-size: 0.9em; color: #888; margin-bottom: 10px; }
#char_count_wrap { text-align: right; margin-top: 5px; font-size: 0.85em; color: #0056b3; }

/* 반응형 모바일 */
@media (max-width: 1024px) {
    .certi_list { grid-template-columns: repeat(3, 1fr); }
    .certi_v_layout { flex-direction: column; }
    .certi_v_img_area { flex: none; width: 100%; max-width: 500px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .certi_tit { font-size: 2em; }
    .certi_v_tit { font-size: 1.7em; }
    .certi_list { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    #bo_cate a { padding: 12px 20px; font-size: 0.95em; }
    .certi_v_info { flex-wrap: wrap; gap: 10px; }
    .certi_v_btns { flex-direction: column; gap: 15px; }
    .btns_left, .btns_right { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
    .certi_form .row_group { grid-template-columns: 1fr; gap: 0; }
    .form_box { padding: 20px; }
    .certi_form .btn_confirm { flex-direction: column-reverse; padding: 20px; }
    .certi_form .btn_submit, .certi_form .btn_cancel { width: 100%; }
    .certi_v_content_box { padding: 20px; }
}

@media (max-width: 480px) {
    .certi_list { grid-template-columns: 1fr; }
    .certi_top { flex-direction: column; gap: 15px; align-items: flex-start; }
    .certi_top .btn_bo_user { width: 100%; justify-content: space-between; }
    .bo_sch { width: 90%; }
}