@charset "UTF-8";

/* =========================================
   기본 공통
   ========================================= */
body {
    background-color: #f5f7fb;
    font-family: "Noto Sans KR", sans-serif;
    color: #333;
}

section {
    /* 헤더 높이만큼 여백 확보 */
    margin-top: 100px;
}

/* =========================================
   [SECTION 1] 상품 비교 선택 영역
   ★ 핵심 수정: Flex Column 적용으로 겹침 방지
   ========================================= */
section .section1Wrap {
    width: 100%;
    max-width: 1620px;
    margin: 0 auto;
    padding: 80px 0 60px; /* 상하 여백 */

    /* Flexbox로 수직 정렬 강제 (절대 안 겹침) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px; /* 요소 사이 간격 자동 확보 */
}

section .section1Wrap h1 {
    font-size: 60px;
    font-weight: 500;
    color: #055C4D;
    letter-spacing: 2px;
    margin: 0; /* gap으로 간격 조정하므로 margin 제거 */
}

section .section1Wrap p {
    font-size: 18px;
    color: #1D7A55;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
}

/* 선택 박스 컨테이너 */
section .section1Wrap .comparecontent {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}

/* 박스 A, B */
section .section1Wrap .comparecontent > div {
    width: 600px;
    height: 330px;
    flex-shrink: 0;    /* ⭐ 줄어들지 않게 */
    border: 2px dashed #86868646;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}

section .section1Wrap .comparecontent > div:hover {
    border-color: #055C4D;
    background-color: #fcfdfd;
}

section .section1Wrap .comparecontent img {
    width: 50px;
    height: 50px;
    opacity: 0.8;
}

section .section1Wrap .comparecontent > div .boxintxt {
    font-size: 18px;
    color: #888;
}

/* 선택된 상태 (카드 UI) */
.section1Wrap .comparecontent .picked {
    /* width: 100%; */
    /* height: 300px; */
    box-sizing: border-box;
    border: 2px solid #FFC107 !important;
    border-radius: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section1Wrap .comparecontent .picked-title {
    font-size: 24px;
    font-weight: 600;
    color: #4e4e4e;
    margin-bottom: 10px;
}

.section1Wrap .comparecontent .picked-code {
    font-size: 16px;
    color: #979797;
    font-style: italic;
}

/* 비교하기 버튼 스타일 (위치 잡기) */
section .section1Wrap button.compareBtn {
    display: inline-block;
    width: 200px;
    height: 65px;
    background-color: #055C4D;
    color: #fff;
    font-size: 1.4em;
    font-weight: 400;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;

    /* Flex item이므로 static하게 배치됨 (겹침 해결) */
    margin-top: 20px;
}

section .section1Wrap .compareBtn:hover {
    background-color: #04463a;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(5, 92, 77, 0.3);
}

section .section1Wrap .compareBtn.is-disabled {
    opacity: 0.4;
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* =========================================
   [SECTION 2] 결과 박스 (초기 숨김)
   ========================================= */
section .resultBox {
    display: none;
    background-color: #F6FCFB;
    padding: 60px 0;
    margin-bottom: 80px;
    border-top: 1px solid #eee;
}

section .resultBox .result1 {
    width: 1620px;
    margin: 0 auto;
}

section .resultBox .result1 h3 {
    color: #055C4D;
    font-size: 35px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
}

section .resultBox .result1 .resultChart {
    width: 80%;
    height: 500px;
    margin: 0 auto;
    box-shadow: 5px 10px 20px #9b9b9b60;
    background-color: #FFF;
    border-radius: 40px;
    padding: 30px;
}

/* 탭 버튼 및 뷰 (숨김 처리 유지 - JS 로직 보존) */
section .resultBox .result2 {
    width: 1620px;
    margin: 60px auto 0;
}
section .resultBox .result2 .tab-btn { display: none; }

section .resultBox .result2 .tab-view {
    width: 100%;
}
section .resultBox .result2 .tab-view > li {
    display: block;
    width: 80%;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}


/* =========================================
   ETF TOP10 리스트 (상단 마진으로 분리)
   ========================================= */
section .compareList {
    width: 1500px;
    margin: 50px auto 150px; /* 버튼과의 거리 확보 */
}

section .compareList h3 {
    color: #055C4D;
    font-size: 35px;
    font-weight: 500;
    margin-left: 80px;
    margin-bottom: 40px;
    border-left: 5px solid #055C4D;
    padding-left: 20px;
}

section .compareList .top10content {
    display: flex;
    justify-content: center;
    gap: 80px;
}

section .compareList .top10content > ul {
    width: 600px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

section .compareList .top10content > ul > li {
    display: flex;
    align-items: center;
    height: 70px;
    background: #fff;
    padding: 0 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    border: 2px solid transparent;
}

section .compareList .top10content > ul > li:hover {
    border-color: #055C4D;
    transform: translateX(5px);
}

section .compareList .top10content > ul > li.is-selected {
    background: #E5F9F6;
    border-color: #055C4D;
}

section .compareList .top10content > ul > li .rankin {
    color: #055C4D;
    width: 60px;
    font-size: 18px;
    font-weight: 700;
}

section .compareList .top10content > ul > li .prutit {
    font-size: 18px;
    font-weight: 500;
    width: 380px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

section .compareList .top10content > ul > li .code {
    font-size: 14px;
    color: #999;
    margin-left: auto;
}


/* =========================================
   [오늘의 추천 비교] - 겹침 문제 해결
   ========================================= */
#RecommendWrap {
    padding-bottom: 150px;
    background: #fff;
    padding-top: 80px;
}

#RecommendWrap .title {
    text-align: center;
    margin-bottom: 60px;
    color: #055C4D;
}

#RecommendWrap .title h1 {
    font-size: 60px;
    font-weight: 600;
}

#RecommendWrap .section2Wrap {
    width: 1620px;
    margin: 0 auto;
    display: flex;
    gap: 60px; /* ★ 좌우 간격 확보 */
    align-items: flex-start;
}

/* [LEFT] 차트 영역 */
#RecommendWrap .section2Wrap .leftVS {
    flex: 1.2;
}

#RecommendWrap .section2Wrap .leftVS .chart-left {
    height: 450px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-radius: 20px;
    padding: 30px;
    background: #fff;
    border: 1px solid #eee;
}

/* 차트 캔버스 크기 강제 */
#RecommendWrap .section2Wrap .leftVS .chart-left canvas {
    width: 100% !important;
    height: 100% !important;
}

#RecommendWrap .section2Wrap .leftVS .inform1 {
    width: 100%;
    margin-top: 40px; /* 차트와 표 사이 간격 */
    border-collapse: collapse;
}

#RecommendWrap .section2Wrap .leftVS .inform1 th {
    font-size: 18px;
    padding: 15px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #eee;
    text-align: left;
    width: 140px;
}

#RecommendWrap .section2Wrap .leftVS .inform1 td {
    font-size: 18px;
    padding: 15px;
    color: #555;
    border-bottom: 1px solid #eee;
    text-align: center;
}


/* [RIGHT] 리스트 영역 */
#RecommendWrap .section2Wrap .rightList {
    flex: 1;
}

/* 리스트 컨테이너 (flex column) */
#RecommendWrap .section2Wrap .rightList .proList {
    display: flex;
    flex-direction: column;
    gap: 15px; /* ★ 리스트 아이템 간격 */
}

#RecommendWrap .section2Wrap .rightList .proList > li {
    border: 2px solid #eee;
    height: 140px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

#RecommendWrap .section2Wrap .rightList .proList > li:hover:not(.on) {
    border-color: #055C4D;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 활성 상태 */
#RecommendWrap .section2Wrap .rightList .proList > li.on {
    background-color: #055C4D;
    border-color: #055C4D;
    color: #fff;
    box-shadow: 0 10px 25px rgba(5, 92, 77, 0.3);
    transform: scale(1.02);
}

#RecommendWrap .section2Wrap .rightList .proList > li .number {
    font-size: 24px;
    font-weight: 700;
    margin-right: 20px;
    color: #055C4D;
}
#RecommendWrap .section2Wrap .rightList .proList > li.on .number { color: #fff; }

/* VS 내부 레이아웃 */
.vs-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vs-item {
    text-align: center;
    width: 42%;
}

.vs-item em {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
}
#RecommendWrap .section2Wrap .rightList .proList > li.on .vs-item em { color: #a5d6cc; }

.vs-item .maintxt {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-center {
    font-size: 18px;
    font-weight: 900;
    color: #ddd;
}
#RecommendWrap .section2Wrap .rightList .proList > li.on .vs-center { color: #81C784; }

/* 카드 내부 레이어 */
.box-content {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 기본은 선택 전 */
.box-content.empty {
    display: flex;
}

/* 선택되면 전환 */
.comparecontent > div.selected .box-content.empty {
    display: none;
}
.comparecontent > div.selected .box-content.filled {
    display: flex;
}

/* 선택 후 카드 스타일 (크기 변화 없음) */
.comparecontent > div.selected {
    border: 2px solid #FFC107;
    background-color: #fff;
}