@charset "utf-8"; 

body {background: #fff; min-height: 100vh;}

/* 공통 버튼 스타일 */
a.btn, .btn_inp {padding: 8px 16px; border: 2px solid transparent; border-radius: 4px; white-space: nowrap; font-size: 12px; font-family: 'Segoe UI', Tahoma, sans-serif; font-weight: 500; transition: all 0.3s ease; text-decoration: none; display: inline-block; cursor: pointer;}

a.btn {background: #95afff; border-color: #dee2e6; color: #495057;}
a.btn:hover {background: #95afff; border-color: #6c757d; color: #212529; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15);}

.btn_inp {border-color: #667eea; color: #fff; margin: 2px 4px;background:#ff6b6b;}
.btn_inp:hover {border-color: #5a6fd8; box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);}

.cn {font-family:'Segoe UI', Tahoma, sans-serif; font-size:10px; color:#ff6b6b; font-weight: bold;}
.ml10 {margin-left:10px;}
.ml20 {border: 2px solid #000 !important; color: #000 !important;}

.ml20:hover {border-color: #330033 !important; transform: translateY(-1px);}

a.btn {padding:8px 10px; *padding:3px 10px 7px; background:#fff; border:1px solid #ccc; white-space:nowrap;}
.btn_inp {padding:7px 10px; margin: 2px 0; border:1px solid #ccc; white-space:nowrap; background:#fff; color:#333; font-size:12px; font-family:tahoma;}
.cn {font-family:Tahoma; font-size:10px; color:#EE5A00;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:10px; background:#e5daff;}

.btn_inp.ml20 {float: right;}

@media (max-width: 768px) {
 .btn_inp.ml20 {margin-left: 0; float: none;}
}

.cont {width:auto; border:1px solid #919191; background:#ddd; padding:30px 25px 25px; *zoom:1; margin:40px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .6);}

fieldset#bo_sch {padding: 0.35em 0 0.625em;}

/* TOP 10 스타일 추가 */
.top10-section {background: #fff; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); overflow: hidden;}
.top10-header {background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; padding: 15px 20px; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); margin: 3px; /* 둥근 모서리를 자연스럽고 안깨져 보이게 하기위해서 흰색 공간을 약간줌 - 앞으로 모달이나 라운딩 부분은 전부 이렇게 처리하자 */ border-radius: 6px 6px 0px 0px; /* 둥근 모서리는 안깨져 보이고 자연스럽게 상단 부분에만 */}
.top10-content {padding: 15px 20px;}
.top10-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;}
.top10-item {display: flex; align-items: flex-start; padding: 12px; border: 1px solid #d3d3d3; border-radius: 6px; background: #f9f9f9; transition: all 0.3s ease; cursor: pointer;}
.top10-item:hover {background: #f4faff; border-color: #ff0000; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.top10-category {background: #7600ae; color: white; padding: 2px 8px; border-radius: 6px; font-size: 11px; margin-right: 8px; white-space: nowrap; flex-shrink: 0; line-height: 1.8;}
.top10-title {font-size: 13px; font-weight: bold; color: #333; line-height: 1.7; flex: 1;}
.top10-rank {background: #ff6b6b; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; margin-right: 8px; flex-shrink: 0;}

.list-item {display: flex; align-items: flex-start; padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; background: #f9f9f9; transition: all 0.3s ease; cursor: pointer;}
.list-item:hover {background: #fbfbf7; border-color: #996600; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.list-category {background: #d1d1d1; color: #252525; padding: 2px 8px; border-radius: 6px; font-size: 11px; margin-right: 8px; white-space: nowrap; flex-shrink: 0;}

.pbox {width:auto; border:1px solid #c9c9c9; background:#ffffee; padding:9px 12px 7px; *zoom:1; margin:5px 0 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, .5);}
.pbox:after {display:block; content:""; clear:both;}
.pbox li {float:left; background:transparent; border-color:transparent; padding:10px 0; height:40px; line-height:16px; margin: 0 auto; list-style:none; font-size: 14px; font-weight: 600;}
.pbox li a {font-weight: bold; padding: 5px 12px 7px; border-radius: 6px; border: 2px solid #694e35; background: #9f6e15; color: #fff; text-shadow: 0.5px 0.5px 1px #333; box-shadow: 2px 2px 3px rgba(0, 0, 0, .5); margin: 5px;}
.pbox li a:hover {text-decoration:none;}
.pbox a#bo_cate_on {font-weight:bold;}

.ychk {width: 15px; height: 15px; margin-bottom: 4px; margin-right: 5px;}

.bbs-list {width:auto; display:block; border:1px solid #c9c9c9; background:#fff; padding:10px 20px; font-family:Tahoma; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);}
.bbs-list ul {color:#333;}
.bbs-list ul li {display:block; padding:10px; border-top:1px solid #ddd; margin: 10px 0; cursor: pointer; transition: background-color 0.3s ease;}
.bbs-list ul li:first-child {border-top:0;}
.bbs-list ul li:hover {background-color: #f8f9fa;}
.bbs-list ul li p {padding: 2px 0;}
.bbs-list ul li .subject {display:block; color:#437EA1; font-weight:bold; margin-bottom:15px; font-size: 13px;}
.bbs-list ul li .url {display:block; color:#4CAF50; margin-bottom:4px;}
.bbs-list ul li .dec {display:block; color:#666; line-height:20px; margin:8px 0 4px;}
.bbs-list ul li .tags {width:auto; font-size:12px;}
.bbs-list ul li .tags:after {display:block; clear:both; content:"";}
.bbs-list ul li .tags .glyphicon {float:left; margin:8px 8px 0 0; height:22px; line-height:20px;}
.bbs-list ul li .tags .gtag {float:left; border: 2px solid #fff; margin:8px 8px 0 0; height: 28px; background: #9593ff; line-height:20px; color: #fff; text-shadow: 0.5px 0.5px 1px #444; cursor:pointer; padding: 2px 6px; border-radius: 4px; box-shadow: 1px 1px 4px rgb(0, 0, 0, .7);}
.bbs-list .nitm {width:auto; background:#fff; height:160px; line-height:160px; text-align:center;}

/* 검색 추가 */

/* 평소 placeholder 색상 */
.tsch-inp::placeholder { color:#5b5b5b; transition: opacity .15s; }
/* 포커스 시 placeholder만 사라짐 */
.tsch-inp:focus::placeholder { opacity:0; }

/* (선택사항) 구형 브라우저 호환 */
.tsch-inp:-ms-input-placeholder{ color:#999; }
.tsch-inp:focus:-ms-input-placeholder{ color:transparent; }
.tsch-inp::-ms-input-placeholder{ color:#999; }
.tsch-inp:focus::-ms-input-placeholder{ color:transparent; }

/* 모달 스타일 */
.modal {display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); animation: fadeIn 0.3s;}
.modal-content {background-color: #fefefe; margin: 5% auto; padding: 0; border: none; border-radius: 12px; /* 살짝 더 크게 */ width: 90%; max-width: 800px; max-height: 80vh; overflow: hidden; /* 둥근 모서리 밖 내용 잘라내기 */ box-shadow: 0 4px 20px rgba(0,0,0,0.3); animation: slideIn 0.3s;}
.modal-header {background: #667eea; color: white; margin: 4px; /* 둥근 모서리를 자연스럽고 안깨져 보이게 하기위해서 흰색 공간을 약간줌 - 앞으로 모달이나 라운딩 부분은 전부 이렇게 처리하자 */ padding: 20px; border-radius: 8px 8px 0px 0px; /* 둥근 모서리는 안깨져 보이고 자연스럽게 상단 부분에만 */ position: relative;}
.modal-title {margin: 0; font-size: 18px; font-weight: bold; padding-right: 70px; /* 닫기 버튼 잘보이도록 */}
.modal-category {background: #fff; color: #000; padding: 4px 12px; border-radius: 15px; font-size: 12px; margin-bottom: 1px; display: inline-block;}

.close {color: white; position: absolute; top: 17px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; transition: opacity 0.3s;}
.close:hover {opacity: 0.7;}

.modal-body {padding: 25px; line-height: 1.6; max-height: 60vh; overflow-y: auto;}
.modal-info {background: #f2f4f7; padding: 15px; border-radius: 6px; margin-bottom: 20px; font-size: 13px; color: #242424;}
.modal-info .tags{font-size: 13px; color: #0000a0;}

/* 스크롤 */
.modal ::-webkit-scrollbar {width: 8px; height: 8px; background-color: #f0f0f0;}
.modal ::-webkit-scrollbar-thumb {height: 10%; background: #bfaaff; border-radius: 4px;}
.modal ::-webkit-scrollbar-thumb:hover {background-color: #bd6300;}
.modal ::-webkit-scrollbar-track {background: #e1ebff;}

@keyframes fadeIn {
 from {opacity: 0;}
 to {opacity: 1;}
}

@keyframes slideIn {
 from {transform: translateY(-50px); opacity: 0;}
 to {transform: translateY(0); opacity: 1;}
}

.wli_btn {padding:15px 0 10px;}
.glist-top {width:auto; background:#fff; border:1px solid #ccc; padding:0 15px 15px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5);}
.glist-top:after {display:block; clear:both; content:'';}

.glist-top .glist-tsch {float:left; padding:15px 0 0; width: 100%;}
.glist-top .glist-btnd {float:right; padding:15px 0 0;}
.glist-top .tsch-inp {width:70%;}

.glist-top .glist-tsch .tsch-inp {width:72% !important; padding:8px; border:1px solid #ccc; margin-right:0; border-right:0; float:left; box-sizing:border-box;}
.glist-top .tsch-submit {padding:9px 10px 11px; height: 45px; width: 8%; font-size:12px; border:0; background:#642100; color:#fff; margin:0; float:left;}
.glist-top .tsch-submit#searchsubmit {padding:9px;}
.glist-top .glist-tsch .tsch-select {float:left; padding:7px; width:20% !important; border:1px solid #ccc; border-right:0;}
.glist-top .btn {float:left; padding: 0 10px;}

/* 모바일 반응형 */
@media (max-width: 768px) {
 .cont {margin: 10px; padding: 15px;}

 .top10-grid {grid-template-columns: 1fr; gap: 10px;}
 .top10-item {padding: 10px;}
 .top10-title {font-size: 12px;}
 .list-item {padding: 10px;}

 .glist-top .glist-tsch .tsch-inp {width:60% !important;}
 .glist-top .tsch-submit {width: 12%;}
 .glist-top .glist-tsch .tsch-select {width:28% !important;}

 .modal-content {width: 95%; margin: 10% auto; max-height: 85vh;}
 .modal-header {padding: 15px;}
 .modal-title {font-size: 16px;}
 .modal-body {padding: 20px;}
}

@media (max-width: 500px) {
 .glist-top .tsch-inp {width:160px;}
}

#gbasic {width:auto;}

.bo_fx {width:auto; text-align:right; margin-bottom:15px;}
.bo_fx:after {display:block; clear:both; content:'';}
.bo_fx li {list-style:none; float:right;}

#bo_v {width:auto;}
#bo_v_navi,#bo_v_bot {width:auto; margin:2px 0 15px;}
#bo_v_navi:after {display:block; clear:both; content:"";}
#bo_v_bot .bo_left, #bo_v_navi .bo_left {float:left;}
#bo_v_bot .bo_right, #bo_v_navi .bo_right {float:right;}
#bo_v_sub {border:1px solid #ccc; border-bottom:0; padding:15px; background:#fafafa; margin-top:10px;}
#bo_v_title {font-size:12px; font-weight:bold; font-family:tahoma; color:#333; margin:0 0 10px;}
#bo_v_info {font:normal 12px tahoma; color:#555; margin:0; padding:0;}
a.bo_v_ect {border:1px solid #ccc; border-bottom:0; border-top-color:#eaeaea; display:block !important; padding:10px 15px; background:#fff; color:#555; font-size:12px; font-family:tahoma;}
a.bo_v_ect .glyphicon {margin-right:3px;}
a.bo_v_ect span.cnt {font-size:11px;}
a.bo_v_ect:hover {text-decoration:none; background:#fafafa;}
#bo_v_act {text-align:center; margin-top:10px;}
#bo_v_bot:after, #bo_v_navi:after, #bo_v_title:after, #bo_v_info:after {display:block; clear:both; content:"";}
#bo_v_atc {width:auto; background:#fff; border:1px solid #ccc; border-top-color:#eaeaea; padding:15px; margin:0 0 15px; line-height:1.8;}
#bo_v_atc #tags {padding:10px 0;}
#bo_v_atc #tags:after {display:block; clear:both; content:"";}
#bo_v_atc #tags .glyphicon {float:left; margin:8px 8px 0 0; height:22px; line-height:20px;}
#bo_v_atc #tags a {float:left; border:1px solid #d9d9d9; margin:8px 8px 0 0; height:22px; background:#ededed; line-height:20px; color:#555; cursor:pointer; padding:0 4px;}

#bo_v_atc #tags #tagl {float: left; border: 2px solid #fff; margin: 8px 8px 0 0; height: 28px; background: #9593ff; line-height: 20px; color: #fff; text-shadow: 0.5px 0.5px 1px #444; cursor: pointer; padding: 2px 6px; border-radius: 4px; box-shadow: 1px 1px 4px rgb(0, 0, 0, .7);}

/* commtent write box */
.cmt_wrap{width:auto; border:1px solid #ccc; padding:0; margin-bottom:15px;}
.cmt_wrap .cmt_top {background:#fafafa; border-bottom:1px solid #ddd;}
.cmt_wrap .cmt_top .cmt_top_title {padding:10px;}
.cmt_wrap .cmt_list {background:#fff; border-bottom:1px solid #ddd;}
.cmt_wrap .cmt_list .no_cmt {padding:60px 15px; text-align:center;}

.cmt_wrap .cmt_bot label {width:auto; padding:10; margin:0; display:block; padding-right:20px; _padding:0; margin:0 !important; background:#fff;}
.cmt_wrap .cmt_bot textarea {border:0; border-bottom:1px solid #ccc; width:100%; height:120px; background:#fff; padding:10px; margin:0 ; overflow:auto;}
.cmt_wrap .cmt_sub {*zoom:1; background:#fff; padding:6px 5px; text-align:right; margin:0;}
.cmt_wrap #no_id {width:auto; background:#fff; text-align:center; padding:50px 0;}
.cmt_wrap .btn_bsub {padding:7px 10px; font-size:12px; border:0; background:#3176b1; color:#fff; margin:0;}

.tbl_wrap {background:#fff; padding:10px; ; border-bottom:1px solid #ccc;}
.tbl_wrap .row {margin-bottom:10px;}
.tbl_wrap #wr_name, .tbl_wrap #wr_password {width:180px; margin-right:10px;}
.tbl_wrap label {color:#777; font-size:11px;}
.dno {display:none;}

/* comment box */
.cmt {border:1px solid #ccc; background:#fff;}
.cmt ul {margin:0; padding:0; font-size:12px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.cmt li {position:relative; width:auto; padding:15px 10px 15px 15px; margin:0; border-top:1px solid #eee; border-left:0; border-right:0; vertical-align:top; *zoom:1;}
.cmt li:first-child {border-top:0;}
.cmt li:after {display:block; clear:both; content:"";}

.cmt .inf {float:left; display:inline-block; margin:0 0 4px 0; color:#333; width:100%;}
.cmt p {margin:8px 0 0 0; line-height:18px; color:#333;}
.cmt p.top {margin:0; line-height:30px; *height:16px;}
.cmt p:after {display:block; clear:both; content:"";}
.cmt .iurl {float:left; color:#555; line-height:16px;}
.cmt .iurl2 {float:left; color:#333; line-height:16px; margin-left:5px;}

.grz_frm {border:1px solid #ccc; background:#fff;}
.grz_frm .frm_hd {font-size:23px; font-family:sans-serif; padding:15px 20px; border-bottom:1px solid #eaeaea;}
.grz_frm .frm_ct {font-size:12px; font-family:sans-serif; padding:15px 20px;}
.grz_frm .item {margin-top:10px;}
.grz_frm .item:first-child {margin-top:0;}

.grz_frm .item input {border: 1px solid #ddd; border-radius: 4px; padding: 10px;}

.grz_frm .frm_ct .item .required {padding: 0 10px !important; border: 1px solid #ddd; border-radius: 4px;}

.grz_frm .g_label {display:block; margin-bottom:7px; color:#444;}
.grz_frm .g_text {display:block; border:1px solid #ccc; width:100%; padding:10px; box-sizing:border-box;}
.grz_frm .rlbl {border:1px solid #ccc; width:auto; padding:0; margin:0; display:block; padding-right:20px; _padding:0; margin-bottom:0; background:#fff;}
.grz_frm .rlbl textarea {border:0; width:100%; height:200px; background:#fff; padding:10px; margin:0; overflow:auto;}
.grz_frm .html {} /* html editor */
.grz_frm .frm_tl {text-align:right; width:auto; padding:15px; border-top:1px solid #eaeaea; background:#fafafa;}
.grz_frm .frm_tl .submit {padding:0 10px; *padding:0 10px; border:1px solid #366790; background:#3176b1; color:#fff; height:34px; /* line-height:32px; */ white-space:nowrap; font-size:12px; width: 100px; border-radius: 4px; transition: 0.3s all;}
.grz_frm .frm_tl .submit:hover {background: #006666; border-color: #6c757d; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15);}
.grz_frm .ml5 {margin-left:5px; width: 100px; height: 34px; margin-bottom: 2px;}
.grz_frm .ml20 {margin-left:5px;background:#3176b1;}
.grz_frm .btn {background:#fff;}
.grz_frm #g_tagbox {margin-top:4px;}
.grz_frm #g_tagbox .gtag {float:left; border:1px solid #d9d9d9; margin:8px 8px 0 0; height:22px; background:#ededed;}
.grz_frm #g_tagbox .gtag a {line-height:20px; color:#555; cursor:pointer;}
.grz_frm #g_tagbox .gtag a.gt_name {padding-left:4px;}
.grz_frm #g_tagbox .gtag a:hover {color:#f00;}
.grz_frm #g_tagbox .gtag .cls {font-weight: bold; font-family: Arial; margin-left: 5px; padding-right: 4px;}
.grz_frm #g_tagbox:after {display:block; clear:both; content:'';}

@media screen and (max-width: 1000px) {}