@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll}
body {margin:0; padding:0; font-size:0.75em; font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif; background:#fffbef; min-width:280px; /* 최소 너비 줄임 */ }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0; padding:0; border:0;  word-break:break-word;}
h1, h2, h3, h4, h5, h6 {font-size:1em; font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block; }

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0; padding:0; font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif; font-size:1em; }
input[type="submit"],
button {cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0; }

textarea, select {font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif; font-size:1em; }
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif;color:#000;text-decoration:none}
img{max-width:100%; }

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {-webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; font-size:14; }
input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {-webkit-box-shadow:  0 0 5px #9ed4ff; -moz-box-shadow:  0 0 5px #9ed4ff; box-shadow: 0 0 5px #9ed4ff; border: 1px solid #558ab7 !important; }


.left-menu-container {
    background: transparent; /* 배경색 제거 */
    padding: 0;
    width: 100%;
}

/* 메뉴 목록 스타일 */
.left-menu-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* 모든 메뉴 항목 스타일 */
.left-menu-container ul li {
    padding: 12px 0;
    border-top: 1px solid #e5e5e5; /* 흐린 회색 상단 테두리 */
    font-size: 15px; /* 글씨 크기 크게 */
}

/* 현재 메뉴 항목 스타일 */
.left-menu-container ul li.active {
    border-top: 1px solid #000; /* 현재 메뉴는 검은색 상단 테두리 */
    font-weight: bold; /* 굵은 서체 */
}

/* 현재 메뉴 뒤에 점(dot) 표시 */
.left-menu-container ul li.active a:after {
    content: "•"; /* 점(dot) 추가 */
    margin-left: 8px;
    color: #333;
}

/* 메뉴 링크 스타일 */
.left-menu-container ul li a {
    display: block;
    color: #333;
    text-decoration: none;
}



/* 게시판 페이지 레이아웃 (좌측 메뉴 있음) */
.board-with-menu {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: #FFF;
    margin: 0; /* 마진 제거 */
    padding: 0; /* 패딩 제거 */
}

.board-with-menu #left_menu {
    width: 230px;
    
    background: #f9f9f9;
    border-right: 1px solid #ddd;
    padding: 40px 10px;
    margin-left: 14px; /* 왼쪽 마진 제거 */
    margin-right: 4px;
    padding-left: 0; /* 왼쪽 패딩 제거 */
}

board-with-menu #container.with-left-menu {
    flex: 1;
    width: calc(100% - 20px); 
} 

/* 전체 래퍼 조정 */
#wrapper {
    padding: 0; /* 패딩 제거 */
    margin: 0; /* 마진 제거 */
    width: 100%;
}

#container_wr {
    padding-left: 0; /* 왼쪽 패딩 제거 */
    margin-left: 0; /* 왼쪽 마진 제거 */
    width:100%;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .board-with-menu {
        flex-direction: column;
    }
    
    .board-with-menu #left_menu {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .board-with-menu #container.with-left-menu {
        width: 100%;
    }
}