/* =========================================
   1. 공통 스타일 (Index, Second 공통)
   ========================================= */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: transparent;
}

.container {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 10px;
    gap: 10px;
}

.box {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 15px;
}

/* 사이드바 공통 */
.sidebar-left {
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative; /* 패널 위치 기준점 */
}

.sidebar-right {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 버튼 공통 스타일 */
.btn-export, .btn-start, .btn-prev, .btn-next {
    padding: 8px 25px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    background: #e0e0e0;
    color: #333;
}

.btn-export:hover, .btn-start:hover, .btn-prev:hover, .btn-next:hover {
    background: #d0d0d0;
}

.btn-action {
    width: 100%;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.btn-action:hover { background: #f9f9f9; }

.btn-action span.symbol {
    font-size: 18px;
    color: #999;
}

/* 노란색 버튼 */
.btn-conclusion {
    background: #ffe082;
    border: 1px solid #d4af37;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: 900;
    width: 100%;
    overflow: hidden;
    transition: background 0.2s;
}

.btn-conclusion:hover { background: #ffd54f; }
.btn-conclusion span { display: inline-block; transform: scaleX(2.0); }

/* 기타 공통 */
.file-upload-section { display: flex; flex-direction: column; gap: 5px; margin-bottom: 40px; }
.info-title { font-size: 17px; font-weight: 800; margin-bottom: 5px; display: block; }
.info-sub { font-size: 13px; color: #666; }
.desc-box { flex: 2; }
.search-box { flex: 1; display: flex; align-items: flex-start; justify-content: space-between; font-weight: bold; }

/* =========================================
   2. Index 페이지 전용 스타일
   ========================================= */
.main-content { /* 메인은 기본 15px 간격 */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chart-main { flex: 2; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #333; }
.chart-sub-container { flex: 1; display: flex; gap: 15px; }
.chart-sub { flex: 1; display: flex; align-items: center; justify-content: center; }

/* 선택 패널 */
.selection-panel {
    display: none;
    position: absolute;
    /* 이 숫자를 줄일수록 패널이 왼쪽으로 이동합니다 */
    left: 260px;

    width: 150px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 5px;
}
.panel-item { padding: 10px; border-bottom: 1px solid #eee; font-size: 13px; color: #666; }
.panel-item:last-child { border-bottom: none; }

/* =========================================
   3. Second 페이지 전용 스타일
   ========================================= */
.header-right { display: flex; gap: 8px; }

/* Second 페이지의 메인은 간격이 5px (덮어쓰기용) */
.second-page-content { gap: 5px !important; }

.result-main {
    flex: 2.5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.conclusion-area { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 10px 20px; }
.conclusion-line { border: 0; border-top: 2px solid #333; margin: 10px 0 20px 0; }
.conclusion-text { font-size: 18px; font-weight: bold; color: #333; }


/* 설명변수 패널 위치 (위에서부터 180px 내려와라) */
#featurePanel {
    top: 118px; 
}

/* 종속변수 패널 위치 (위에서부터 230px 내려와라) */
#targetPanel {
    top: 176px;
}



/* #3  시각화 방법 찾기 부분 */



/* 시각화 방법 찾기 전체 박스 */
.search-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 모든 요소를 위/왼쪽으로 정렬 */
    justify-content: flex-start;
    gap: 10px;
    min-height: 150px; /* 박스 높이가 어느 정도 유지되도록 설정 */
}

/* 제목과 버튼이 있는 윗줄 */
.search-header {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 글씨는 왼쪽, 버튼은 오른쪽 */
    align-items: center;
}

.search-title {
    font-weight: bold;
    font-size: 15px;
}

/* 돋보기 버튼: 원형 테두리 */
.search-icon-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.search-icon-btn:hover {
    background: #f5f5f5;
}

/* 칸 내부에 생기는 목록 상자 */
.search-result-inside {
    display: none; /* 처음에 숨김 */
    width: 100%;
    background-color: #fdfdfd; /* 살짝 다른 배경색으로 구분 */
    border: 1px solid #eee; /* 내부 테두리 */
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box; /* 패딩이 박스 크기를 망치지 않게 함 */
}

.search-result-inside p {
    margin: 8px 0;
    font-size: 13px;
    color: #444;
    font-weight: normal;

}

/* Ver.2 시각화 방법 찾기 -시각화 종류 텍스트들 버튼화 설정 (추가 from Ver.1) */

/* 목록 상자 내부 버튼 스타일 */
.viz-option-btn {
    width: 100%;             /* 가로 꽉 채우기 */
    padding: 10px;           /* 누르기 편한 높이 */
    margin: 4px 0;           /* 버튼 사이 간격 */
    text-align: left;        /* 글씨 왼쪽 정렬 */
    background: white;       /* 기본 배경 */
    border: 1px solid #eee;  /* 연한 테두리 */
    border-radius: 8px;      /* 둥근 모서리 */
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: all 0.2s;    /* 부드러운 효과 */
}

/* 마우스를 올렸을 때 */
.viz-option-btn:hover {
    background-color: #f0f7ff; /* 연한 파란색 배경 */
    border-color: #88929c;     /* 파란색 테두리   컬러코드:  #007bff */    
    color: #333;            /* 글자색 변경 기존컬러코드: #007bff*/ 
}

/* 클릭했을 때 살짝 눌리는 느낌 */
.viz-option-btn:active {
    transform: scale(0.98);
}