/* ✅ 게시판 탭 섹션 */
.board-tabs-section {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #fff;
    padding: 10px 14px 16px;
    margin: -10px 6px 20px;
    font-family: 'Noto Sans KR', sans-serif;
}

/* ✅ 탭 버튼 */
.board-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.tab-btn.active { background-color: #4a90e2; color: #fff; }
.tab-btn:hover { background-color: #e6f0ff; }

/* ✅ 게시판 리스트 */
.board-list { display: none; opacity: 0; transition: opacity 0.25s ease; }
.board-list.active { display: block; opacity: 1; }

.board-list ul { list-style: none; margin: 0; padding: 0; }

.board-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #f1f1f1;
    font-size: 13px;
    gap: 8px;
}

/* 🔹 제목 + 댓글 묶음 */
.title-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.title-wrap a {
    color: #333;
    text-decoration: none;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reply-count {
    flex-shrink: 0;
    color: #888;
    font-size: 13px;
}

/* 작성자 / 날짜 */
.writer, .date {
    color: #777;
    font-size: 13px;
    text-align: right;
}
.writer { min-width: 60px; }
.date { min-width: 40px; }

/* ✅ 다크모드 */
body.dark-mode .board-tabs-section { background-color: #1e1e1e; border-color: #333; }
body.dark-mode .tab-btn { color: #ccc; }
body.dark-mode .tab-btn.active { background-color: #345a85; color: #fff; }
body.dark-mode .board-list li { border-color: #333; }
body.dark-mode .title-wrap a { color: #eee; }
body.dark-mode .reply-count { color: #aaa; }
body.dark-mode .writer, body.dark-mode .date { color: #ccc; }

/* ✅ 모바일: 탭 글씨 작게 & 한 줄 정렬 */
@media screen and (max-width: 768px) {
    .board-tabs {
        gap: 4px !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    .tab-btn {
        font-size: 12px !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .board-tabs-section { padding: 6px 8px 10px !important; }
}

/* ✅ 더보기 버튼 스타일 */
.tab-more {
    margin-left: auto;
    font-size: 13px;
    color: #4a90e2;
    text-decoration: none;
    align-self: center;
    padding: 0 6px;
    transition: 0.2s;
}

.tab-more:hover {
    text-decoration: underline;
    color: #2b6fcc;
}

/* ✅ 모바일에서도 자연스럽게 보이게 */
@media screen and (max-width: 768px) {
    .tab-more {
        font-size: 12px;
        padding: 0 4px;
        flex-shrink: 0;
    }
}

/* ✅ 갤러리형 탭 게시판 */
.gallery-tabs-section {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #fff;
    padding: 10px 14px 16px;
    margin: -15px 6px 20px;
    font-family: 'Noto Sans KR', sans-serif;
}

/* 탭 버튼 영역 */
.gallery-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    align-items: center;
}

.gallery-tab-btn {
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 13px;
    border-radius: 6px 6px 0 0;
    color: #555;
    transition: 0.2s;
}

.gallery-tab-btn.active {
    background-color: #4a90e2;
    color: #fff;
}

.gallery-tab-btn:hover {
    background-color: #e6f0ff;
}

/* 갤러리 리스트 */
.gallery-list { display: none; opacity: 0; transition: opacity 0.25s ease; }
.gallery-list.active { display: block; opacity: 1; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
}

.gallery-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /*background: #fafafa;*/
    transition: transform 0.2s ease;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    width: 100%;
    height: 70px; /* 🔹 기존 160px → 110px로 줄임 */
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.gallery-item p {
    margin: 2px;
    font-size: 13px;
    color: #333;
    text-align: center;
}

/* ✅ 다크모드 대응 */
body.dark-mode .gallery-tabs-section {
    background-color: #1e1e1e;
    border-color: #333;
}
body.dark-mode .gallery-tab-btn {
    color: #ccc;
}
body.dark-mode .gallery-tab-btn.active {
    background-color: #345a85;
    color: #fff;
}
body.dark-mode .gallery-item {
    background-color: #2a2a2a;
    box-shadow: 0 2px 5px rgba(255,255,255,0.05);
}
body.dark-mode .gallery-item p { color: #ddd; }

/* ✅ 모바일 반응형 */
@media screen and (max-width: 768px) {
    .gallery-grid {
        display: flex !important;           /* ✅ grid 대신 flex로 변경 */
        flex-wrap: nowrap !important;       /* ✅ 줄바꿈 안 함 */
        overflow-x: auto !important;        /* ✅ 가로 스크롤 가능 */
        gap: 8px !important;
        padding-bottom: 6px;                /* ✅ 스크롤 아래 살짝 여백 */
    }

    .gallery-item {
        flex: 0 0 48% !important;           /* ✅ 한 화면에 2개 정도 보이게 */
        min-width: 48% !important;
    }

    .gallery-item img {
        height: 110px !important;           /* ✅ 크기 유지 */
        border-radius: 6px;
    }

    .gallery-item p {
        font-size: 12px !important;
        margin: 4px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gallery-tab-btn {
        font-size: 12px !important;      /* 🔹 글자 크기 줄임 */
        padding: 4px 6px !important;     /* 🔹 탭 높이 줄이기 */
        white-space: nowrap !important;  /* 🔹 줄바꿈 방지 */
        flex-shrink: 0 !important;       /* 🔹 크기 유지 */
    }

    .gallery-tabs {
        gap: 4px !important;
        overflow-x: auto !important;     /* 🔹 탭이 넘칠 때 가로 스크롤 */
    }
}

/*!* ✅ 모바일일 때 더보기 링크가 짤리지 않게 처리 *!*/
/*@media screen and (max-width: 768px) {*/
/*    .board-tabs {*/
/*        display: flex;*/
/*        flex-wrap: wrap; !* 🔹 한 줄에 다 안 들어가면 자동으로 줄바꿈 *!*/
/*        justify-content: flex-start;*/
/*        align-items: center;*/
/*        overflow: visible !important; !* 🔹 더보기 안 짤리게 *!*/
/*        gap: 4px; !* 🔹 버튼 간격 살짝 *!*/
/*        padding-right: 6px; !* 🔹 오른쪽 여백 확보 *!*/
/*    }*/

/*    .tab-btn {*/
/*        flex: 1 1 auto; !* 🔹 고정폭 대신 자동 크기 *!*/
/*        font-size: 13px;*/
/*        padding: 6px 8px;*/
/*    }*/

/*    .tab-more {*/
/*        flex: 0 0 auto; !* 🔹 버튼 크기에 영향받지 않도록 고정 *!*/
/*        font-size: 13px;*/
/*        color: #4a90e2;*/
/*        text-decoration: none;*/
/*        margin-left: auto; !* 🔹 오른쪽 끝으로 밀기 *!*/
/*    }*/

/*    .tab-more:hover {*/
/*        text-decoration: underline;*/
/*    }*/
/*}*/

/*!* 기본 (PC) *!*/
/*.tab-more {*/
/*    font-size: 14px;*/
/*    color: #4a90e2;*/
/*    text-decoration: none;*/
/*    white-space: nowrap;*/
/*    transition: color 0.2s;*/
/*}*/

/*.tab-more:hover {*/
/*    text-decoration: underline;*/
/*}*/

/*!* ✅ 모바일: “＋”만 보이게 *!*/
/*@media screen and (max-width: 768px) {*/
/*    .tab-more {*/
/*        font-size: 18px; !* 더 크게 보이게 *!*/
/*        color: #4a90e2;*/
/*    }*/

/*    .tab-more::after {*/
/*        content: ''; !* 혹시 기존 text 숨기기용 안전장치 *!*/
/*    }*/

/*    !* 텍스트 중 '더보기'만 숨김 *!*/
/*    .tab-more {*/
/*        !* 방법1: 글자 크기 줄이거나 숨김 *!*/
/*        font-size: 18px;*/
/*    }*/

/*    .tab-more::before {*/
/*        content: '+'; !* 🔹 오직 +만 표시 *!*/
/*    }*/

/*    !* 실제 텍스트 감추기 *!*/
/*    .tab-more {*/
/*        color: transparent;*/
/*        position: relative;*/
/*    }*/

/*    .tab-more::before {*/
/*        position: absolute;*/
/*        left: 0;*/
/*        color: #4a90e2;*/
/*    }*/
/*}*/


/* ✅ iOS Safari / Chrome flex-grid 높이 계산 버그 보정 */
@supports (-webkit-touch-callout: none) {
    .nasdaq-top10-section {
        min-height: 120px !important;
        display: block !important;
        overflow: visible !important;
    }

    .nasdaq-top10-list {
        overflow: visible !important;
        position: relative !important;
    }

    .market-right {
        align-items: stretch !important;
    }
}

/* ✅ iPhone Safari 포함 모든 모바일에서 채팅 여백 완전 제거 */
@media screen and (max-width: 768px) {

    /* ② market-info의 flex → block 전환 (핵심) */
    .market-info {
        display: block !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ③ market-right의 고정 높이 완전 해제 */
    .market-right {
        display: block !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        /*margin: 0 !important;*/
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ④ html, body 기본값 초기화 */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* ⑤ 혹시 남은 여백이 footer 때문일 때 */
    body > footer,
    body > .site-footer {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
@media screen and (max-width: 768px) {
    body > footer,
    body > .site-footer {
        margin-top: 0 !important;
    }
}

/*2025-11-04*/
/* ✅ 헤더 고정 시 콘텐츠가 위로 겹치는 문제 해결 */
body {
    position: relative;
}

/* 헤더 높이에 맞춰 상단 여백 추가 */
.market-info,
.market-right,
.market-top {
    position: relative;
    z-index: 1;
}

/* header가 fixed일 경우, 밑 컨텐츠가 겹치지 않도록 패딩 보정 */
/*main,*/
/*.market-info {*/
/*    padding-top: 110px !important; !* 🔹 헤더 높이에 맞춰 조정 (보통 100~120px) *!*/
/*}*/

/* 모바일에서 헤더 높이가 더 클 경우 */
@media screen and (max-width: 768px) {
    .market-info {
        padding-top: 130px !important; /* 🔹 iPhone Safari 대응 */
    }
}
/*main,*/
/*.market-info {*/
/*    padding-top: 85px !important; !* 🔹 기존 110px → 85px로 줄임 *!*/
/*}*/

/* 모바일 전용 (iPhone Safari 포함) */
@media screen and (max-width: 768px) {
    .market-info {
        padding-top: 60px !important; /* 🔹 기존 130px → 100px로 줄임 */
    }

}

.chat-stock-news-section h3 {
    position: relative;
    top: -10px;
    margin-left: 14px;
    margin-bottom: -18px;
    font-size: 15px; /* 동일한 크기 */
    font-weight: 600; /* 동일한 굵기 */
    color: #777; /* 동일한 색상 */
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; /* 동일한 폰트 */
}

/* ✅ 인기글/최신글/댓글/검색어 리스트 좌우 여백 (PC + 모바일 공통) */
.chat-tab-content li {
    padding: 6px 10px !important; /* 좌우 10px 여백 */
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ✅ 링크도 약간 들여쓰기 */
.chat-tab-content li a {
    display: inline-block;
    padding-left: 4px !important; /* 글자 살짝 들여쓰기 */
    text-decoration: none;
    color: #333;
}

/* ✅ 모바일에서 여백 조금 줄이기 */
@media screen and (max-width: 768px) {
    .chat-tab-content li {
        padding: 6px 8px !important; /* 좌우 여백 약간 축소 */
    }

    .chat-tab-content li a {
        padding-left: 10px !important; /* 모바일 화면 폭 좁을 때 살짝만 들여쓰기 */
        font-size: 13px !important;
    }
}

/* ✅ 댓글 수(숫자) 오른쪽 간격 여유 */
#tab-hot li span {
    flex-shrink: 0;
    font-size: 13px;
    color: #777;
    margin-left: 6px;
}

.market-right2 {
    margin-top: 150px;
}

/* ✅ 모바일에서도 자연스럽게 줄이기 */
@media screen and (max-width: 768px) {
    #tab-hot li {
        padding: 4px 8px !important; /* 🔹 좌우 여백 조금 줄임 */
    }

    #tab-hot li a {
        font-size: 13px !important;
        padding-left: 2px !important;
    }

    #tab-hot li span {
        font-size: 12px !important;
    }

    .market-right2 {
        margin-top: 90px;
    }

    .market-right {
        margin-top: 10px;
    }
}

.gallery-item img[src='/img/nomarl_img.png'] {
    object-fit: contain;
    border: 1px solid #ddd;
}

.gallery-item img {
    object-fit: contain;
}

/* ✅ 나스닥 TOP10 항목 hover 효과 */
.nasdaq-item {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nasdaq-item:hover {
    /*transform: translateY(-3px);*/
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.nasdaq-item:hover {
    background-color: #f3f7ff;
}