/* ==================================
   Feenah 이미지 서버 커스텀 테마 (v7 - '실제 주소' 기반)
   ================================== */

/* 1. Pretendard 폰트 불러오기 (작동 확인) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* 2. 전역 폰트 설정 (작동 확인) */
body, html, button, input, textarea, div, li, a {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==================================
   3. 메인 컬러 컨셉 (#5C4939)
   (CSS 변수 덮어쓰기 - 전체 테마용)
   ================================== */
:root {
    --color-blue: #5C4939 !important;
    --color-blue-hover: #8a7b6e !important;
    --color-blue-low: #EBE8E6 !important;
    --color-blue-low-hover: #D8D2CE !important;
}

/* ==================================
   4. '실제 주소'로 강제 덮어쓰기
   ================================== */

/* 4-1. 로고 크기 조절 (사용자가 찾아준 주소) */
/* (참고: 이 주소는 로그인 후 '메인 페이지'의 로고일 수 있습니다) */
#app > div > div > main > div > div:nth-child(2) > header > img {
    max-height: 1.6em !important;  /* 35px, 45px 등으로 조절하세요 */
    width: auto !important;
    object-fit: contain;
}

/* 4-2. 로그인 버튼 색상 (사용자가 찾아준 주소) */
#login > form > input.button.button--block {
    background-color: #5C4939 !important;
    border-color: #5C4939 !important;
}
#login > form > input.button.button--block:hover {
    background-color: #8a7b6e !important; /* 호버 색상 */
    border-color: #8a7b6e !important;
}
/* 4-3. 로그인 페이지 로고 크기 조절 (사용자가 찾아준 주소) */
#login > form > img {
    /* * 이미지의 너비(width)를 150px로 지정합니다.
     * 이 숫자를 200px (더 크게) 또는 120px (더 작게) 등으로
     * 원하시는 대로 조절하세요!
     */
    width: 150px !important;
    height: auto !important; /* 높이는 비율에 맞게 자동 조절 */
    margin-bottom: 20px; /* 로고와 폼 사이 간격 (선택 사항) */
}
/* 4-4. 로그인 페이지 제목(h1) 가로 사이즈 조절 */
#login > form > h1 {
    /* * 너비를 300px로 설정합니다. 
     * '100%', '250px' 등으로 원하시는 대로 조절하세요!
     */
    width: 300px !important; 
    
    /* (중요) 너비를 조절하면 h1이 왼쪽 정렬될 수 있으니,
     * margin: auto를 사용해 강제로 가운데 정렬합니다. 
     */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important; /* 텍스트 자체도 가운데 정렬 */
}
/* 4-5. 로그인 폼(form)의 최대 너비 제한 해제 */
#login > form {
    /* * 16em(약 256px)으로 걸려있던 최대 너비 제한을
     * '없애서(none)' 내용물(h1, img)의 크기에 맞게
     * 자동으로 늘어나도록 합니다.
     */

    /* * (선택 사항) 만약 넉넉한 '최대 너비'를 
     * 따로 지정하고 싶다면, 위 코드는 지우고 
     * 아래 코드의 주석을 풀어 사용하세요.
     */
    max-width: 320px !important;
}
/* 4-6. '메뉴 클릭 후' 페이지 로고 크기 조절 (새 주소) */
#app > div > div > main > div > header > img {
    /* * 기본값 2.5em 대신 요청하신 1.6em (약 25.6px)로 설정합니다.
     * 1.8em, 2em 등으로 조절하셔도 됩니다.
     */
    height: 1.6em !important;  
    width: auto !important;     /* 너비는 비율에 맞게 자동 조절 */
    object-fit: contain;      /* 이미지가 찌그러지지 않게 */
}
/* 4-8. 하단 용량 프로그레스 바 색상 변경 (실제 주소) */
#app > div > div > nav > div.credits > div > div > div {
    /* 이 div의 배경색을 우리 키 컬러로 변경! */
    background-color: #5C4939 !important;
}
/* 4-7. '모든 폴더' 아이콘 색상 변경 (v10 - 님이 찾은 'data-dir' 기반) */
/*
 * #listing (파일 목록) 안의
 * [data-dir=true] ('폴더' 꼬리표가 붙은 모든 아이템)
 * i (그 안의 아이콘)
 */
#listing [data-dir=true] i {
    /* 우리 키 컬러(#5C4939)로 변경! */
    color: #5C4939 !important;
}

/* (혹시 모를) 호버 시 색상도 강제로 고정 */
#listing [data-dir=true]:hover i {
    color: #5C4939 !important;
}
/* 4-9. '모든 텍스트 버튼' 색상 통합 변경 */
/*
 * 'div.row' 안에 있는 모든 '.button--flat' 텍스트 버튼을
 * 한 번에 선택해서 키 컬러로 변경합니다.
 */
#app > div > div > main > div > div.row .button--flat {
    color: #5C4939 !important;
}

/* 마우스 호버 시 색상도 통합 변경 */
#app > div > div > main > div > div.row .button--flat:hover {
    color: #8a7b6e !important; /* 키 컬러의 밝은 버전 */
}
/* ==================================
   5. '모든 버튼 (.button)' 공통 스타일 덮어쓰기
   ================================== */

/* .button 클래스를 가진 모든 요소의 스타일을 변경 */
.button {
    background-color: #5C4939 !important;
    border-color: #5C4939 !important;
    color: #ffffff !important; /* 글자색은 흰색 */
}

/* 모든 .button의 호버(hover) 스타일 */
.button:hover {
    background-color: #8a7b6e !important; /* 키 컬러의 밝은 버전 */
    border-color: #8a7b6e !important;
}

/* ==================================
   6. '투명 버튼 (.button--flat)' 스타일 복원
   ================================== */

/* * .button 규칙이 .button--flat의 투명 배경을 덮어써버렸습니다.
 * .button--flat 규칙을 '더 강력하게' 다시 적용해서
 * 배경은 투명하게, 텍스트 색상은 키 컬러로 복원합니다.
 */
.button--flat {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #5C4939 !important; /* 키 컬러 (텍스트) */
}

/* 플랫 버튼 호버 시: 연한 배경색 + 키 컬러 텍스트 */
.button--flat:hover {
    background: #EBE8E6 !important; /* 키 컬러의 연한 버전 (배경) */
    color: #5C4939 !important; /* 키 컬러 (텍스트) */
}
/* ==================================
   7. '활성 메뉴' 아이템 색상 변경 (실제 주소)
   ================================== */

/* 님이 찾아주신 '활성 li'의 실제 주소에
 * 키 컬러(#5C4939)를 적용합니다.
 */
#nav > div > ul > a.router-link-active.router-link-exact-active > li {
    border-color: #5C4939 !important; /* 왼쪽 테두리 색상 */
    color: #5C4939 !important;        /* 텍스트 색상 */
}
/* 7-2. '활성 메뉴'의 ::before 배경색 변경 (8% 투명도) */
#nav > div > ul > a.router-link-active.router-link-exact-active > li:before {
    background: #5C4939 !important; /* 기본 blue 대신 우리 키 컬러 */
    opacity: .08 !important;        /* 8% 투명도는 그대로 유지 */
}
/* ==================================
   9. '모든 체크박스' 내부 색상 변경 (키 컬러)
   ================================== */

/* input[type=checkbox] 요소에 적용 */
input[type=checkbox] {
    /* 'accent-color'는 체크박스, 라디오 버튼 등의
       '체크되었을 때'의 내부 색상을 변경하는
       가장 최신이고 표준적인 CSS 속성입니다. */
    accent-color: #5C4939 !important;
}

/* ==================================
   10. '선택된 파일/폴더' 하이라이트 색상 변경 (v3 - 님이 찾은 'aria-selected' 기반)
   ================================== */

/* #listing (파일 목록) 안의
 * .item[aria-selected=true] (선택된 '줄')
 */
#listing .item[aria-selected=true] {
    /* * 기본 파란색(var(--blue)) 대신, 
     * 우리의 '톤온톤' 변수(--color-blue-low)를 사용합니다.
     */
    background-color: var(--color-blue-low, #EBE8E6) !important;

    /* * 텍스트 색상도 우리 키 컬러(진한 색)로 변경합니다. 
     * (기본값은 var(--iconSecondary) - 흰색이었음)
     */
    color: #5C4939 !important;
}
/* ==================================
   11. '파일 선택' 문구 박스 숨기기 (실제 주소)
   ================================== */

/* 님이 찾아주신 '파일 선택'의 span 태그를
 * 화면에서 완전히 보이지 않게(사라지게) 합니다.
 */
#file-selection > span {
    display: none !important;
}
/* ==================================
   12. '파일 선택' 팝업창 스타일 변경 (중앙 정렬, 라운딩)
   ================================== */

#file-selection {
    /* 1. (요청) 내부 아이템들을 중앙 정렬합니다. */
    justify-content: center !important;

    /* 2. (요청) 모서리를 둥글게(rounding) 처리합니다.
          8px 값을 조절하셔도 됩니다. */
    border-radius: 8px !important;
    max-width: 15em !important;
}