@charset "utf-8";
/* Extra small devices (portrait phones, less than 576px)
// No media query for xs since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
 */
body {font-size:0.8rem; line-height: 1.40;}
body .test_aaa {font-size: 20px}
/* admin-mode */
.admin-mode {position: relative; display:inline-block; vertical-align:bottom; font-size:0.5rem; }
.admin-mode.block {display: block;}
.admin-mode:before {content:""; position: absolute; top:-12px; left:0; font-size:0.2rem;}
.admin-mode .inner {position: absolute; width:100px; top:-14px;}

.subtext {font-size: 90%; color: #6c757d;}
/* modal */
.modal-header {border-bottom:0;}
.modal-footer {border-top:0;}
.tab-pane {padding: 10px; }
.navbar-header {font-weight: bold; font-size:0.8em;}
.fixed {position:fixed; }

/* 데스크탑에서만 nav-list.fixed 스타일 적용 */
@media (min-width: 768px) {
    .nav-list.fixed {width:180px; top:5px;}
}
.nav-list img {max-width: 100%;}
.nav-list > li {margin-bottom:5px;}
.nav-list > li:has(.navbar-header) {margin-top: 15px;}
.nav-list > li:has(.navbar-header):first-of-type {margin-top: 5px;}
.nav-list li.search {margin-top: 20px; }
.nav-list li.m300 { margin-top: 20px; }

.nav-list a {vertical-align: middle}
.icon {vertical-align: baseline}
.icon-new {font-size:0.5rem; background-color:crimson; color:#fff; border-radius:4px; padding:2px 4px;}
.icon-new-2 {
    font-size:0.6rem; font-weight:800; background-color: transparent; color:crimson; vertical-align: middle
}
/* layout */
header h1.logo {font-size:1.8rem;}
header h1.logo a {
    color:#ddd;
    text-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
    animation: breathing 7s ease-in-out infinite
}

@keyframes breathing {
    0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0);
    }
    50% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.618);
    }
    100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0);
    }
}

header .navbar-nav {width:auto}
.row {justify-content: space-between;}
.form-inline {padding:0;}
.form-inline .form-control {font-size:9px; padding: 1.059rem .75rem; width:calc(100% - 40px);}
.form-inline .btn.btn-secondary {width:34px; height: 34px; margin-left: 5px;}
p {color:#222;}
a {color:#1e347b}

body {padding-top:0;}
body {background-color:#1d1d1d;}
#particle {
    position: fixed;
    z-index: -1;
    /* iOS Safari 성능 최적화 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#particle * {padding: 0;margin: 0;overflow:hidden;}

body, p {margin:0;}
ul,li {list-style: none; margin:0; padding:0;}
.navbar {
    position:relative; display:block;  background: #f5f5f5; border-radius: 10px;
    width:200px; max-width: 200px; min-height:175px; padding: 10px;
}

/* 데스크탑에서만 navbar.after 스타일 적용 */
@media (min-width: 768px) {
    .navbar.after {width:0 !important; max-width: 0 !important; min-height: 0 !important; padding: 0 !important;}
    .navbar.after .nav-list-wrap.fixed {background: #f5f5f5;}
}
.navbar > ul { }
.navbar-nav a,
.navbar-nav button {color: #ccc;}
.article-list {position:relative; z-index: 100}
.article-list .article-content {display:block; background: #fff}
.article-list.depth1 .article-content,
.article-list.depth2 .article-content,
.article-list.depth3 .article-content,
.article-list.depth4 .article-content,
.article-list.depth5 .article-content {padding-left: 3px; position: relative; z-index: 2;}
.depth0 {padding-left:0;}
.depth1 {padding-left:10px;}
.depth2 {padding-left:20px;}
.depth3 {padding-left:30px;}
.depth4 {padding-left:40px;}
.depth5 {padding-left:50px;}
.board-list .depth1:before,
.board-list .depth2:before,
.board-list .depth3:before,
.board-list .depth4:before,
.board-list .depth5:before {
    content:""; display: block; position: absolute;  left:2px;
    border-left:1px solid #ddd;
    border-bottom:1px solid #ddd;
    border-radius: 0 0 0 5px;
    z-index: 1;
}
.board-list .depth1:after {
    content:""; display: block; position: absolute; top:-23px; left:1px; width:3px; height:3px;
    z-index: -1;
    border-radius: 3px;
    background: #aaa;
}

.board-list .depth1:before {
    top:-20px; width:20px; height:90%;
}

.board-list .depth2:before,
.board-list .depth3:before,
.board-list .depth4:before,
.board-list .depth5:before {
    top:-40px; height:50px;
}
.board-list .depth2:before {width:25px}
.board-list .depth3:before {width:30px}
.board-list .depth4:before {width:40px}
.board-list .depth5:before {width:50px}

/* 데스크탑에서만 fixed 스타일 적용 */
@media (min-width: 768px) {
    .nav-list-wrap.fixed {
        top:45px; left:0; right:0; margin:0 auto; padding:10px; width:98%; border:1px solid #aaa; border-radius:5px; z-index: 999;
        font-size: 1.2em;
    }
    .nav-list-wrap.fixed .nav-list > li {margin:7px 0 20px; }
    .nav-list-wrap.fixed .nav-list li .navbar-header {display: inline-block; font-size:1.2em;}
    .nav-list-wrap.fixed .nav-list li .sub a {padding: 7px 0;}
    .nav-list-wrap.fixed .nav-list li .sub li {margin:5px 0;}
}

.btn-menu-mobile {display: none; position:fixed; top:7px; right:10px; font-size:32px; line-height: 1; z-index:9999;}
h2 , .h2 {font-size:1.3rem;}
h2 .sub {
    font-size: 0.7em;
    font-weight: normal;
    margin-left: 20px;
}
h2 .sub a {
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 3px;
    transition: all 0.2s;
}
h2 .sub a:hover {
    background-color: #f0f0f0;
    color: #333 !important;
}
h2 .sub strong {
    padding: 2px 8px;
    background-color: #e0e0e0;
    border-radius: 3px;
}
/* fontaws icon */
.fa-reply {transform: rotate(180deg); color:#136fa9; font-size:0.8rem; }

.btn-regist-notice { font-size: 0.5rem; padding:0 0.25rem;}
header {padding:10px 0 0;}
header .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
footer {text-align:right; padding:10px 0 10px; color: #ccc;}

.main-group {padding-left:0; padding-right:0}

.main-group .cont > div {width:100%;}
.main-group .cont,
.main-group .cont div {
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;
    overflow:hidden;
}

.write-info-group {padding-left:8px; line-height: 1.15;}

/* main */
.page-main {display: flex; flex-wrap: wrap;}
.main-content {width:calc(100% - 200px - 3px); min-height:100%; word-break: break-all;}
.main-content .main-content-inner-wrap {width:100%; padding: 20px 15px; background: #fff; border-radius: 10px}
.main-content img {max-width: 100%;}
.h3, h3 {font-size:1.3rem; margin-bottom:0.3rem; font-weight:600;}
.main-group {margin-bottom:20px; width: 41%; flex: auto;}
.cont {margin-bottom:3px;}
.cont {line-height:1.2;}
.cont div * {vertical-align: middle}
.cont small {font-size:0.5rem;}
.cont-info {padding-left:8px; font-size:0.8em; color:#a5a5a5;}
.cont-info > * {margin-right:5px;}


.pagination {display: inline-table}
.page-item {display: inline-block}
.form-check-input {position: static; margin-left:0;}

h3.list-title {font-size:1.5rem; }
ul.board-notice-group {display:inline-block; width:auto; border:1px solid #5b80b2; border-radius: 5px; padding:.5rem 2rem .5rem .3rem;  margin:10px 0;}
ul.board-notice-group li {padding-left:5px;}
ul.board-notice-group li a {display: inline-grid}

.goto_top .btn {position: fixed; bottom:0; right:0; z-index: 1000; font-size:32px;}
.goto_top .btn i {text-shadow:0 0 3px rgba(255,255,255,0.7)}
/* list */
.btn-area .btn {}

/* article */
.articles-wrap {padding:0 10px}
.selection {-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;}
.bookmark {padding:3px; color:#005cbf; cursor:pointer;}
table#protectTable {
    width: auto !important;
}
.article-board-name {font-size:.8rem;}
h2.article-title {font-size:1.5rem;}
.writer-info-group {margin:10px 0; padding:5px 0; border-top: 1px solid #777;
    border-bottom: 1px solid #CCC;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#article_context {
    position: relative;
    text-align:left;
}


#article_context ul.context_list {
  position: relative;

  margin: 0;
    max-height: 300px;
    overflow: scroll !important;
    scrollbar-width: thin; /* for Firefox */
    scrollbar-color: #ccc #fff; /* for Firefox */
}

#article_context ul.context_list::-webkit-scrollbar {
  width: 8px;
}
#article_context ul.context_list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
#article_context ul.context_list::-webkit-scrollbar-track {
  background: #fff;
}

.context_list li.highlight-article {
  background: #ffe066;
  transition: background 0.4s;
  box-shadow: 0 0 0 2px #ffd700;
}

/* 맨위/맨밑 게시물 sticky */
.context_list li.first-article {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  /* 원하는 스타일 추가 */
  border-bottom: 1px solid #eee;
}
.context_list li.last-article {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  /* 원하는 스타일 추가 */
  border-top: 1px solid #eee
}
.context_list li.first-article .date,
.context_list li.last-article .date {
  font-weight: bold;
  color: #222;
  /* 강조 스타일 */
}


.pager {display:flex;justify-content: space-around;margin:10px 0;}
.pager li {width:49.5%;}
.pager li a {display:block;line-height: 2.5;
    text-align: center;
    background: ghostwhite;
    border: 1px solid #f5f5f5;
    border-radius: 7px;}
.context_list {margin-top:20px;}
.context_list li {margin-bottom:2px;}
.context_list li a {font-size:9px;}
.context_list li a .title {font-size:1.4em;}
.context_list li a .date {font-size:8px; display: inline-block; width:55px;}
.context_list li a .cafeboard {display: inline-block; width:95px;}
.context_list li a .member {display: inline-block; margin-left:10px;}


.panel-comment {
    position:relative; margin-top:20px; padding: 15px 10px; background-color: #f5f5f5; border-radius: 10px;
    font-size: 0.9em
}
.panel-comment > h4 {position: absolute; top:-12px; left:3%; font-weight: bold}
.comment-form {margin-left:10px;}

.opinion-group {border-bottom:1px dashed #d5d5d5;}
#comment_list .deleted-1 {border-bottom:0 !important; padding:0 !important;}
#comment_list .list {position:relative; padding:8px 0;  }
#comment_list .list .content {display: inline;}
#comment_list .list .btn-group {display: inline-flex}
#comment_list button,
.reply-form button {font-size:10px; padding:.200rem .50rem; }
.locked-1 > .inner .content:before { content: "비밀글"; display: inline-block; padding:.150rem .35rem; font-size:10px; vertical-align:top; color:orangered; border:1px solid orangered; border-radius: 3px; background-color: white;}
#comment_list .paw-group {font-size: 0.9em;}
#comment_list small {font-size:0.9em; color:#aaa}
#comment_list .user, #comment_list .creator {font-size:1em; color:#0c5460; font-style: italic;}
#comment_list .paw-comment-group {margin-left:20px;}

/* .comment-group {margin:5px 0 5px 5px; padding:0 !important; background: linear-gradient(to bottom, lightslategrey, transparent);}
.comment-group .warpper {margin-left:1px; padding:7px 0 7px 10px !important; background-color: #f5f5f5;} */

.comment-group {margin:5px 0 5px 5px; padding: 7px 0 7px 15px !important; }

.reply-form legend {margin-bottom:0}
.reply-form textarea {float:left; width:100%; min-height:100px;}
.reply-form .input-group {float:right; width:auto; text-align:center;}
.reply-form .input-group .btn-xs {font-size:0.675rem; line-height:0.95;}
.reply-form .input-group button {}
.reply-form fieldset { background: #e5e5e5; border-radius: 10px;}
.article-list {margin-bottom:16px; line-height:1.4;}

.article-list .cont-info .creator {font-size:1em; color:#0c5460; font-style: italic}
.mechanism .article-list {

}

.loading {position: absolute; top:0; left:0; width:100%; height:100%; background:#fff; opacity: 0.7; }
.btn-reply {
    color: #000;
    background-color: #fff;
    border-color: #b5b5b5;
}

.mechanism_book {
    border: 1px solid lightgray;
    border-radius: 10px 10px 0 0;
    margin-bottom: 10px;
    padding: 10px;
    display: grid;
    justify-content: start;
    align-items: center;
    align-content: center;
}

/* recent replies */
.replies.opinions-group {border-bottom:1px solid #e5e5e5; margin-bottom:10px; padding-bottom:10px;}
.replies .reply-info {font-size:0.5rem; }
.replies .reply-info a {color:darkblue}
.replies .content-group .info {padding-left:8px; font-size:0.9em; color:#aaa;}
.replies.comments-group {
    padding-left:15px;
    border-top: 1px dashed #e5e5e5;
    margin-top: 10px;
    padding-top: 10px;
}
.replies .content-group .info .creator {font-style: italic; color: #0c5460}
.replies.locked-1 .content-group:before { content: "비밀글"; display: inline-block; padding:.150rem .35rem; font-size:10px; vertical-align:top; color:orangered; border:1px solid orangered; border-radius: 3px; background-color: white;}
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up)  */
@media (min-width: 768px) {

}

@media (max-width: 767px) {
    .main-content {width:100%; margin:0;}
    h1 {font-size:1.5rem;}
    .btn-menu-mobile {display: block;}

    .navbar-nav.navbar-right li .login {
        margin-left: -100px;
    }

    /* 모바일 메뉴 전체 화면 오버레이 */
    .navbar {
        display:none; 
        margin-bottom:0;
    }

    
    /* 모바일에서 메뉴가 열렸을 때 */
    body.menu-open .navbar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background-color: #fff !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100vh !important;
    }
    
    /* 모바일에서 nav-list-wrap 스타일 재정의 */
    body.menu-open .nav-list-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    
    /* 모바일 메뉴 헤더 */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background-color: #fff;
        padding: 15px 20px;
        border-bottom: 1px solid #ddd;
        z-index: 10;
    }
    
    .mobile-menu-title {
        font-size: 18px;
        font-weight: bold;
    }
    
    /* 모바일 메뉴 닫기 버튼 */
    .mobile-menu-close {
        position: relative;
        width: 30px;
        height: 30px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }
    
    .mobile-menu-close span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #333;
        border-radius: 3px;
        transition: all 0.3s;
    }
    
    .mobile-menu-close span:first-child {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    
    .mobile-menu-close span:last-child {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }
    
    /* 메뉴 컨텐츠 영역 */
    body.menu-open .nav-list-wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    body.menu-open .nav-list {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        padding-bottom: 100px; /* 모바일 브라우저 주소창을 위한 충분한 하단 여백 */
        width: 100% !important; /* fixed 클래스의 width 오버라이드 */
        position: relative !important; /* fixed position 오버라이드 */
        top: auto !important;
        /* iOS Safe Area 대응 */
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
    
    .nav-list > li { vertical-align: top;}
    .nav-list .sub li {margin-right:15px;}
    
    /* body 스크롤 비활성화 */
    body.menu-open {
        overflow: hidden;
    }
    
    /* 모바일 메뉴가 열렸을 때 햄버거 버튼 숨기기 */
    body.menu-open .btn-menu-mobile {
        display: none !important;
    }
}
@media (min-width:768px) {
    .nav-list > li {margin-bottom:5px;}
    /* 데스크탑에서 모바일 메뉴 헤더 숨김 */
    .mobile-menu-header {
        display: none !important;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar {
        display: block;
    }
}
h2.article-title {font-size:1.1rem;}

/* Extra large devices (large desktops, 1200px and up)
 */
@media (min-width: 1200px) {

}



.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

.menu-trigger {
    position: relative;
    width: 34px;
    height: 30px;
}

.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #000;
    border-radius: 5px;
    box-sizing: content-box;
    border:1px solid rgba(255, 255, 255, 0.8);
}

.menu-trigger span:nth-of-type(1) {
    top: 0;
}

.menu-trigger span:nth-of-type(2) {
    top: 12px;
}

.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}
.menu-trigger.type7 span:nth-of-type(1) {
    -webkit-animation : menu-bar07-01 .35s forwards;
    animation : menu-bar07-01 .35s forwards;
}
@-webkit-keyframes menu-bar07-01 {
    0% {
        -webkit-transform : translateY(13px) rotate(45deg);
    }
    50% {
        -webkit-transform : translateY(13px) rotate(0);
    }
    100% {
        -webkit-transform : translateY(0) rotate(0);
    }
}
@keyframes menu-bar07-01 {
    0% {
        transform : translateY(13px) rotate(45deg);
    }
    50% {
        transform : translateY(13px) rotate(0);
    }
    100% {
        transform : translateY(0) rotate(0);
    }
}
.menu-trigger.type7 span:nth-of-type(2) {
    transition : all .25s .25s;
    opacity : 1;
}
.menu-trigger.type7 span:nth-of-type(3) {
    -webkit-animation : menu-bar07-02 .35s forwards;
    animation : menu-bar07-02 .35s forwards;
}
@-webkit-keyframes menu-bar07-02 {
    0% {
        -webkit-transform : translateY(-17px) rotate(-45deg);
    }
    50% {
        -webkit-transform : translateY(13px) rotate(0);
    }
    100% {
        -webkit-transform : translateY(0) rotate(0);
    }
}
@keyframes menu-bar07-02 {
    0% {
        transform : translateY(-17px) rotate(-45deg);
    }
    50% {
        transform : translateY(-17px) rotate(0);
    }
    100% {
        transform : translateY(0) rotate(0);
    }
}
.menu-trigger.active-1 span:nth-of-type(1) {
    -webkit-animation : active-menu-bar07-01 .35s forwards;
    animation : active-menu-bar07-01 .35s forwards;
}
@-webkit-keyframes active-menu-bar07-01 {
    0% {
        -webkit-transform : translateY(0) rotate(0);
    }
    50% {
        -webkit-transform : translateY(13px) rotate(0);
    }
    100% {
        -webkit-transform : translateY(13px) rotate(45deg);
    }
}
@keyframes active-menu-bar07-01 {
    0% {
        transform : translateY(0) rotate(0);
    }
    50% {
        transform : translateY(13px) rotate(0);
    }
    100% {
        transform : translateY(13px) rotate(45deg);
    }
}
.menu-trigger.active-1 span:nth-of-type(2) {
    opacity : 0;
}
.menu-trigger.active-1 span:nth-of-type(3) {
    -webkit-animation : active-menu-bar07-02 .35s forwards;
    animation : active-menu-bar07-02 .35s forwards;
}
@-webkit-keyframes active-menu-bar07-02 {
    0% {
        -webkit-transform : translateY(0) rotate(0);
    }
    50% {
        -webkit-transform : translateY(-17px) rotate(0);
    }
    100% {
        -webkit-transform : translateY(-17px) rotate(-45deg);
    }
}
@keyframes active-menu-bar07-02 {
    0% {
        transform : translateY(0) rotate(0);
    }
    50% {
        transform : translateY(-13px) rotate(0);
    }
    100% {
        transform : translateY(-13px) rotate(-45deg);
    }
}
.nav-list .block {display: block}