@font-face {
    font-family: "eng";
    src: url("terminal-grotesque.ttf") format("truetype");
}
@font-face {
    font-family: "kor";
    src: url("buc.ttf") format("truetype");
}

.menu,
.list-item,
.title,
#wrapall {
    /* ⭐️ 테두리 색상에 transition 효과 추가 */
    transition: border-color 0.3s ease;
}

/* 추가로, .title의 배경색에도 효과를 주고 싶다면 */

.kor{
    font-family: 'kor';
    font-size: 9.5pt;
}

.eng{
    font-family: 'eng';
    font-size: 12pt;
}
:root {
  --text-color: black;
  --background-color: white;
  --border-color: black;
}

/* ⭐️ 2. 다크 모드 색상 변수 설정 */
.dark-mode {
  --text-color: rgb(231, 231, 231);
  --background-color: black;
  --border-color: rgb(220, 220, 220);
}
p{
    line-height: 1.3em;
}
a{
    text-decoration: none;
    color: var(--text-color);
    cursor: url('mouse.png') -1 -1, auto;
    transition: color 0.1s ease;
}
a:hover{
    /* text-decoration: underline; */
    color:rgb(255, 0, 174)
    
}
a:active{
    /* text-decoration: underline; */
    color:rgb(0, 242, 255);
    
}

.hype {
    text-decoration: underline;
    text-underline-offset: 4.7px;
    text-decoration-thickness: 1px;
}

* {
    font-family: 'eng';
    word-break: keep-all;
}
body {
    margin: 0;
    color: var(--text-color);
  background-color: var(--background-color);
   transition: background-color 0.3s ease, color 0.5s ease;
}

#wrapall{
    display: flex;
    flex-direction: row;
    height: 100vh; /* 뷰포트 높이로 고정 */
    overflow: hidden; /* #wrapall 스크롤 막기 */
    border-color: var(--border-color);
}
.wrap1{
    display: flex;
    flex-direction: column;
    width: 285px;
    flex-shrink: 0;
    border-style: solid;
    border-width: 0px 1px ;
    background-color: var(--background-color);
}
    .menu{
        position: fixed; /* 페이지 스크롤과 무관하게 고정 */
    height: 162px;
    width: 279px;
    flex-shrink: 0;
    border-bottom: 1.3px solid;
    border-right: 1.3px solid;
    padding: 5px 0px 0px 6px;
    border-color: var(--border-color);
    }
        .item{
            margin: 7px;
        }
            .menu-text{
                padding-left: 11px;
            }
            .name{
                
                margin-bottom: 25px;
            }
            .item.name {
    /* ⭐️ flexbox를 사용해 아이콘과 텍스트를 한 줄에 정렬 */
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: space-between; /* 텍스트와 아이콘을 양 끝으로 분리 */
    margin-bottom: 25px;
    padding-right: 7px; /* 아이콘이 너무 끝에 붙지 않도록 간격 조절 */
}

.mode-icon {
    /* ⭐️ 아이콘 크기와 마우스 커서 설정 */
    width: 15px; /* 아이콘 너비 */
    height: 15px; /* 아이콘 높이 */
    cursor: pointer;
    transition: fill 0.3s ease; /* 색상 변경 시 부드러운 전환 효과 */
    
    /* ⭐️ 다크 모드 색상 변수를 이용해 아이콘 색상 설정 */
    fill: var(--text-color);
}

.mode-icon:hover {
    fill: var(--background-color);
}

            
    .list{
        margin-top: 167px; /* 메뉴 높이만큼 아래로 내림 */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 167px); /* 100vh에서 메뉴 높이 빼기 */
    overflow-y: auto; /* 리스트만 스크롤되도록 */
        
    }
        .list-text{
            padding-left: 14px;
        }
        .list-text:hover{
            color:rgb(255, 0, 174);
            cursor: url('mouse.png') -1 -1, auto;
        }
        .list-text:active{
             color:rgb(0, 242, 255);
        }
   
            .number{
                font-size: 0.75em;
                margin-left: 11px;
            }
            .list-item{
                padding: 8px;
                padding-left: 9px;
                border-width: 0.5px 0px;
                border-style: solid;
                border-color: var(--border-color);
            }
           

.wrap2{
    display: flex;
    flex-direction: column;
    width: min(100vw, 1500px);
    height: 100vh; /* 뷰포트 높이로 고정 */
    overflow: hidden; /* .wrap2 스크롤 막기 */
    background-color: var(--background-color);
}
    .title{
        position: fixed; /* 페이지 스크롤과 무관하게 고정 */
    background-color: var(--background-color);
    width: calc(min(100vw, 1500px) - 2px); /* .wrap2 너비 - border 너비 */
    border-width:0px 0px 1.3px 0px;
    border-style: solid;
    padding: 10px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    white-space: nowrap;
    z-index: 10;
    border-color: var(--border-color);
    
    }
        .title-text{
            margin-left: 12px;
        }
        .type{
            margin-left: 220px;
        }
        .year{
            margin-left: 150px;
        }
        
    .content{
        padding-top: 30px;
        padding-left: 10px;
        display: flex;
        flex-direction: row;
        margin: 10px;
        margin-left: 10px;
        flex-grow: 1; /* 남은 공간을 채움 */
        
    }
        .tab-content{
            display: none;
        }
        .tab-content.active{
            display: block;
        }
        
   .text {
    flex-grow: 1;
    margin: 0 10px 10px 0;
    margin-top: 6px;
    
    /* ⭐️ 텍스트 영역도 스크롤이 필요하다면 아래 속성 추가 */
    height: 91.5vh; /* 또는 원하는 고정 높이값 */
    overflow-y: auto;
}

.project-img {
    max-width: 100%; /* 부모 요소인 .img의 너비에 맞춰 크기 조절 */
    height: auto;    /* 비율 유지 */
    display: block;  /* 각 이미지를 세로로 정렬 */
    margin-bottom: 20px; /* 이미지 간 간격 추가 */
    margin-top: 20px;   
}
   .img {
    width: 700px; /* 사진 영역의 너비를 고정값으로 설정 */
    flex-shrink: 0;
    margin-right: 20px;
    margin-top: 0px;
    
    /* ⭐️ 아래 두 속성을 추가하여 .img 영역만 스크롤되도록 함 */
    height: 94.2vh; /* 또는 원하는 고정 높이값 */
    overflow-y: auto;
    
}

.list-item:not([data-content-id]) {
    cursor: default; /* 마우스 커서를 기본 화살표 모양으로 */
    color: #000000;     /* 텍스트 색상을 회색으로 (선택 사항) */
}

.list-item:not([data-content-id]) .list-text:hover {
    cursor: default;
    color: #000000; /* 마우스를 올려도 색상이 변하지 않도록 */
}