/* styles.css */
body {
    font-family: "Noto Sans KR", sans-serif;
}
body.dark-mode {
    background-color: #282C33;
    color: #e0e0e0;
}

a {
    text-decoration: none; /* 링크의 밑줄을 제거 */
    color: #05478a;
    /* color: #1e90ff; */
    /* color: inherit; */
    /* color: inherit; 링크의 색상을 상속받도록 설정 */
}
body.dark-mode a {
    text-decoration: none; /* 링크의 밑줄을 제거 */
    color: #5388bd;
    /* color: inherit */
    /* color: #1e90ff; */
    /* color: #5695d4; */
}
a .hover {
    cursor: pointer;
}


/* 크롬, 엣지, 사파리용 */
::-webkit-scrollbar {
    width: 15px; /* 스크롤바의 너비 */
}
/* 파이어폭스용 */
* {
    scrollbar-width: thin; /* 스크롤바의 너비 */
}


/*---nav---*/
.navbar {
    background-color: #fafafa;
}
.navbar.dark-mode {
    background-color: #282C33;
    color: #e0e0e0;
}

.navbar-text {
    line-height: 0.6rem; /* 네비게이션 바의 높이에 맞추어 텍스트 정렬 */
}

.navbar .btn-group .btn {
    height: 100%; /* 네비게이션 바의 높이에 맞추어 버튼 높이 설정 */
    line-height: 20px; /* 버튼 텍스트를 중앙에 정렬 */
}

.navbar .btn-group .btn-sm-dark {
    color: #282C33;
}
body.dark-mode .navbar .btn-group .btn-sm-dark {
    color: #dbdbdb;
}

.navbar .btn-group .dropdown-item {
    padding-top: 1px;
    padding-bottom: 1px;
}
.navbar .btn-group .form-check-label {
    font-size: 0.95em;
}


/**nav Update Text*/
.update-text {
    font-size: 0.65em; /*9px : 1rem=16px*/
    text-align: right;
}
/**nav menu button icon*/
.btn-no-bg {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit;
}




/*---offcanvas---*/
.offcanvas .offcanvas-header {
    border-bottom: 1px solid #bbbbbbd7;
}
.offcanvas .offcanvas-body {
    font-size: 1rem;
}
.offcanvas .offcanvas-body .offcanvas-update-info {
    display: none;
}
.offcanvas .offcanvas-body .navbar-nav .nav-link{
    font-size: 0.9rem;
    padding-top: 3px;
    padding-bottom: 3px;
}

body.dark-mode .offcanvas {
    background-color: #282C33;
    color: #e0e0e0;
    border-left: 1px solid #444;
    border-right: 1px solid #444;
}


body.dark-mode .offcanvas .list-group {
    background-color: inherit;
    border-bottom: 1px solid #444;
}
body.dark-mode .offcanvas .list-group-item {
    background-color: inherit;
    color: #e0e0e0;
}



body.dark-mode .offcanvas .offcanvas-header {
    border-bottom: 1px solid #444;
}

body.dark-mode .offcanvas .offcanvas-body {
    color: #e0e0e0;
}


/* 아코디언 다크 모드 스타일 */
body.dark-mode .offcanvas .accordion-item {
    background-color: inherit;
    border: 1px solid #444;
}

body.dark-mode .offcanvas .accordion-button {
    background-color: inherit;
    color: #e0e0e0;
    border: none;
}

.offcanvas .accordion-button:not(.collapsed) {
    background-color: inherit;
}
body.dark-mode .offcanvas .accordion-button:not(.collapsed) {
    background-color: inherit;
    color: #e0e0e0;
    border-bottom: none; /* 접혀있지 않을 때 하단 테두리 제거 */
    box-shadow: 0 1px 2px #444
}

body.dark-mode .offcanvas .accordion-collapse {
    background-color: inherit;
    color: #e0e0e0;
}

body.dark-mode .offcanvas .accordion-body {
    background-color: inherit;
    color: #e0e0e0;
}

.list-group-item {
    cursor: pointer;
}
.list-group-item.active {
    background-color: #007bff;
    color: white;
}
body.dark-mode .list-group-item.active {
    background-color: #5e5e5e;
    border: 1px solid #ccc;
    border-left: 0px solid #282C33;
    border-right: 0px solid #282C33;
    color: white;
}

/*---posts---*/
.container {
    font-size: 0.9rem; /* 0.9rem; */
    /* idth: 96vw; */
    margin: auto;
}
.item {
    padding: 4px 4px 4px 6px;
    margin: 4px 0;
    border: 1px solid #ccc;
    border-radius: 2px;
}
body.dark-mode .item {
    border-color: #666;
}

/* 읽음 상태 스타일 */
.item.read {
    background-color: #B0B0B0;
    color: #858585;
}

body.dark-mode .item.read {
    background-color: #202020;
    color: #5f5f5f;
    border-color: #3f3f3f;
}

body.dark-mode .item.read a {
    color: #334a64;
}


/* item에 마우스를 올렸을 때 커서 스타일 변경 */
.item:hover {
    background-color: rgba(30, 144, 255, 0.205);
    cursor: pointer;
}
/* 아이템 오른쪽 색상영역 스타일 */
.item-right-click-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 100%;
    background-color: rgba(176, 176, 176, 0.205);
    cursor: pointer;
    display: none;
}
.item-right-click-area:hover {
    background-color: rgba(38, 19, 209, 0.205);
    cursor: pointer;
}

.item-right-click-area.dark-mode {
    background-color: rgba(255, 255, 255, 0.2);
}

.show-item-right-click-area .item-right-click-area {
    display: block;
}


/*---modal---*/
.modal-content {
    /*
    background-color: inherit;
    color: inherit;

    background-color: #ffffff;
    color: #000000;    
    */
    background-color: #ffffff;
    color: #000000;    
}

/*---item lst text bg---*/
.QuasarZone {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #555555;
    background: #f4aa2e; /* 부트스트랩 버튼의 기본 색상 */
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Coolenjoy {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #000000; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Clien {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #556A80; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Inven {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #f8f8f8;
    /* background: #B22913; 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5) */
    background: #43803d;
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Gigglehd {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #000000;
    background: #CECECE; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.GeekNews {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #383B40; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Ruliweb {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #2761b8; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Yozm {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #6C2ED9; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Itworld {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #ED5A1F; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Gptmagazine {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #EE7BAA; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Itdonga {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #E54970; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Aitimes {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #D6321F; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Yna {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #233A85; /* 부트스트랩 버튼의 기본 색상 rgba(166, 166, 166, 0.5)*/
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Wccftech {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #F17950; /* 부트스트랩 버튼의 기본 색상 */
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}
.Svrforum {
    font-size: 0.69rem; /*11px : 1rem=16px*/
    font-weight: bold;
    color: #eeeeee;
    background: #3A929A; /* 부트스트랩 버튼의 기본 색상 */
    border: none; /* 경계선 제거 */
    padding: 2px 6px; /* 버튼의 패딩 */
    border-radius: 2px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크일 경우 밑줄 제거 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}

/*---foot---*/