body {
    font-size: 0.65vw;
    margin:0;
    padding:0;
}
.Title_Img {
    display: flex;
    flex-direction: column;
    width:100%;
    height:33vw;
    border-bottom: 1px solid #ccc;
}
.Title_Line {
    display: flex;
    align-items: center;
    gap: 1vw;
    height: 5vw;
    padding-left: 1.2vw;
}
.Title_Line_Left {
    display: flex;
    align-items: center;
}
.Title_Logo {
    font-size: 1.5vw;
    transition: color 0.25s ease;
}
.Title_Logo:hover {
    color: #ff0000;
    transition: color 0.25s ease;
}
.Title_Sub {
    background: #b0b0b0;
    font-size: 11px;
    padding: 2px 0.8vw;
    margin: 2px 0px 0px 20px;
    transition: background-color 0.25s, color 0.25s ease;
}
.Title_Sub:hover {
    background: #999;
    color: #fff;
    transition: background-color 0.25s, color 0.25s ease;
}
.Title_Sub.active {
    background: #333;
    color: #fff;
}
.Title_Sub img {
    height:2vw;
}
.Title_Line_Right {
    margin: 0px 11vw 0px auto;
}
.Login_In {
    background: #ee7171;
    color: #fff;
    padding: 0.5vw 1vw;
    transition: background-color 0.25s ease;
}
.Login_Out {
    background: #7188ee;
    color: #fff;
    padding: 0.5vw 1vw;
    transition: background-color 0.25s ease;
}
.Login_In:hover {
    background: #dd5c5c;
    transition: background-color 0.25s ease;
}
.Login_Out:hover {
    background: #5c71dd;
    transition: background-color 0.25s ease;
}
.Title_Desc {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28vw;
    align-items: center;
    padding: 3vw;
}
.Menu {
    display: flex;
    border-bottom: 1px solid #ccc;
}
.Menu_Block {
    flex: 3;
    padding: 1vw;
    background-color: #f0f0f0;
    border-left: 1px solid #ccc;
    cursor: pointer;
    text-align: center;
}
.Menu_Block:hover,
.Menu_Block.active {
    background-color: #e0e0e0;
}

/* 메뉴 서브 항목 스타일 */
.Menu_Block {
    position: relative;
}
.Menu_Sub {
    position: absolute;
    top: 100%;
    left: -1px;
    right: 0;
    z-index: 100;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: #f0f0f0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    transition: max-height 0.25s ease, opacity 0.25s ease;
}
.Menu_Block:hover .Menu_Sub {
    max-height: 30vw;
    opacity: 1;
    border-bottom: 1px solid #ccc;
}
.Menu_Sub_Item {
    padding: 0.8vw 1vw;
    border-top: 1px solid #ccc;
    cursor: pointer;
}
.Menu_Sub_Item:hover,
.Menu_Sub_Item.active {
    background-color: #e0e0e0;
}




.Blog {
    display: flex;
}
.Category {
    display: flex;
    flex-direction: column;
}
.Category_Item {
    padding: 0.8vw 1vw;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
}
.Category_Item:hover,
.Category_Item.active {
    background-color: #e0e0e0;
}

/* 카테고리 그룹 및 서브 항목 스타일 */
.Category_Group summary {
    list-style: none;
}
.Category_Group summary::-webkit-details-marker {
    display: none;
}
.Category_Sub_Item {
    padding: 0.8vw 1vw 0.8vw 2vw;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    background-color: #fafafa;
}
.Category_Sub_Item:hover,
.Category_Sub_Item.active {
    background-color: #e0e0e0;
}










.Category_Search {
    box-sizing: border-box;
    width: 100%;
}
.Category_Search input[type="text"] {
    padding: 0.8vw 0.4vw;
}
.Category_Search button {
    padding: 0.8vw 0.6vw;
}
.Blog .Left {
    width: 15vw; 
    border-right: 1px solid #ccc;  
}
.Admin_Image {
    border-bottom: 1px solid #ccc;
}
.Admin_Image img {
    width: 100%;
    vertical-align: bottom; /* 또는 top, middle */
}
.Blog .Right {
    width: 85vw; 
}

.About {
    box-sizing: border-box;
    padding: 2vw;
}
.About_Title {
    margin: 0 0 1.5vw;
    padding-bottom: 0.8vw;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 1.5vw;
}
.About_Content {
    display: flex;
    align-items: flex-start;
    gap: 2vw;
    padding: 1.5vw;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #fff;
}
.About_IntroImg {
    flex: 0 0 30%;
    max-width: 30%;
}
.About_IntroImg img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: contain;
}
.About_Details {
    flex: 1 1 0;
    min-width: 0;
}
.About_Name {
    margin-bottom: 1vw;
    color: #333;
    font-size: 1.3vw;
    font-weight: bold;
}
.About_Info {
    margin: 0;
    padding: 0;
    list-style: none;
}
.About_Info li {
    display: flex;
    gap: 1vw;
    padding: 0.6vw 0;
    border-bottom: 1px solid #eee;
}
.About_Label {
    flex: 0 0 6em;
    color: #666;
    font-weight: bold;
}
.About_Value {
    min-width: 0;
    overflow-wrap: anywhere;
}
.About_Value a {
    color: inherit;
}
.About_Intro {
    margin-top: 1vw;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.Subject_Block {
    background: #fafafa;
    border-bottom: 1px solid #ccc;
    padding: 1vw 2vw;
}






.Subject_Block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Subject_Left {
    display: flex;
    align-items: center;
    text-align: left;
}
.Icon_List {
    margin-right: 1vw;
}
.Icon_List img {
    width: 4vw;
    border-radius: 50%;
}
.Notice_Text {
    background: #222;
    color: #fff;
    padding: 0.3vw 1vw;
    border-radius: 5px;
    margin-right: 0.5vw;
}
.Secret_Text {
    background: #222;
    color: #fff;
    padding: 0.3vw 1vw;
    border-radius: 5px;
    margin-right: 0.5vw;
}
.Edit_Text {
    background: #002291;
    color: #fff;
    padding: 0.3vw 1vw;
    border-radius: 5px;
    margin-right: 0.5vw;
    transition: background-color 0.3s, color 0.3s;
}
.Edit_Text:hover {
    background: #3340f8;
    transition: background-color 0.3s, color 0.3s;
}
.Subject_Text {
    color: #333;
    font-size: 1vw;
    font-weight: bold;
}
.Subject_Right {
    display: flex;
    gap: 1vw;
    text-align: right;
}

.Post_Block {
    padding: 1vw 2vw;
    border-bottom: 1px solid #ccc;
}
.Image_Block {
    padding-bottom: 1vw;
}
.Image_Block img {
    max-width: 100%;
    height: auto;
}
.Image_Item {
    padding-bottom: 1vw;
}
.Image_Caption {
    padding-top: 0.4vw;
    color: #888888;
}
.Content_Block {
    padding-bottom: 1vw;
}
.Link_Block {
    border-top: 1px solid #ccc;
    padding: 3vw 0vw 0.8vw 0vw;
}
.Tag_Block {
    margin-top: 2.5vw;
    font-size: 0.6vw;
    padding: 0.5vw 0;
}
.Tag_Title {
    background: #f4f4f4;
    border:1px solid #eee;
    margin-right:8px;
    color:#333;
    padding: 0.2vw 1vw;
    border-radius: 5px;
}
.Tag_Item {
    display:inline-block;
    margin-left: 0.5vw;
    padding: 0.2vw 1vw;
    border-bottom:1px solid #fff;
    color:#888;
    text-decoration:none;
    transition: background-color 0.3s, border 0.3s, color 0.3s;
}
.Tag_Item:hover {
    border-bottom:1px solid #aaa;
    color: #000;
    transition: background-color 0.3s, border 0.3s, color 0.3s; /* 속도 전환 효과 */
}
.Link_Item {
    padding: 0.4vw 0;
}
.Link_Item a:hover {
    color: #002281;
}
.Link_Item a:hover {
    color: #002281;
}
.File_Block {
    border-top: 1px solid #ccc;
    padding: 3vw 0vw 0.8vw 0vw;
}
.File_Item {
    display: flex;
    align-items: center;
    padding: 0.4vw 0;
}
.File_Download {
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0.15vw 0.5vw;
    text-decoration: none;
    transition: color 0.3s;
    margin: 0px 1vw 0 0.3vw;
    transition: background-color 0.3s, border 0.3s, color 0.3s;
}
.File_Download:hover {
    border: 1px solid #555;
    color: #222;
    transition: background-color 0.3s, border 0.3s, color 0.3s;
}





.Search_Modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.Search_Box {
    width: 30vw; /* 검색 팝업의 너비를 30vw로 설정 */
    height: 8.7vw; /* 검색 팝업의 높이를 20vw로 설정 */
    background-color: #ffffff;
    padding: 1.5vw;
    border-radius: 4px;
}
.Search_Title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1vw;
}
.Search_Title i {
    cursor: pointer;
}

.Search_Form {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ccc;
}
.Search_Form input[type="text"] {
    min-width: 0;
    flex: 1;
    padding: 0.9vw 0.6vw;
    background: #fbfbfb;
    border: 1px solid #f0f0f0;
    border-right: 1px solid #ccc;
}
.Search_Form button {
    padding: 0.9vw 1.2vw;
    border: 1px solid #f0f0f0;
    background-color: #f0f0f0;
    cursor: pointer;
}









.No_Post {
    padding: 2vw;
    text-align: center;
    color: #888888;
    font-size: 0.65vw;
}










.Align_Center {
    text-align: center;
}



/* 1. 파이어폭스(Firefox) 전용: [막대 색상] [트랙 색상] */
* {
  scrollbar-width: thin;
  scrollbar-color: #888888 #ffffff;
}

/* 2. 크롬, 에지, 사파리, 웨일 전용 */

/* 필수: 스크롤바 전체 너비/높이 지정 (이게 없으면 트랙 색상이 완전히 무시됩니다) */
::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

/* 트랙(배경)을 흰색으로 강제 설정 */
::-webkit-scrollbar-track {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 0px;
}

/* 스크롤바 막대 (배경이 흰색이므로 눈에 보이도록 어두운 톤 지정) */
::-webkit-scrollbar-thumb {
  background-color: #888888 !important;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555555 !important;
}


/* 프로필 스타일 */