/* ✅ 공지사항 영역 */
.notice-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans KR', sans-serif;
    z-index: 1001;
}
.notice-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}
.notice-item.active { opacity: 1; }

body.dark-mode .notice-bar {
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}
body.dark-mode .notice-item { color: #f5f5f5; }

/* ✅ 헤더 */
.site-header {
    position: fixed;
    top: 30px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans KR', sans-serif;
    z-index: 1000;
}
.header-container {
    width: 90%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo img {
    height: 57px;   /* 🔹 버튼 크기와 동일하게 키움 */
    width: auto;
    display: block;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05); /* 🔹 살짝 확대 효과 */
}

.divider { color: #ccc; font-size: 16px; }
.dark-mode-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #333;
}
.header-right .header-link {
    text-decoration: none;
    color: #333;
    font-size: 15px;
}
.header-right .header-link:hover { text-decoration: underline; }

body.dark-mode {
    background-color: #121212;
    color: #f5f5f5;
}
body.dark-mode .site-header {
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}
body.dark-mode .header-link,
body.dark-mode .divider,
body.dark-mode .dark-mode-btn { color: #f5f5f5; }

/* ✅ 마켓 전체 컨테이너 */
.market-info {
    margin-top: 95px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1300px; /* ✅ 화면 너무 넓을 때 제한 */
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
    box-sizing: border-box;
}
.market-card {
    flex: 1;
    margin: 0 6px;
    background: var(--card-bg, #fff);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Noto Sans KR', sans-serif;
    transition: all 0.3s ease;
    height: 175px;
}
.chat-box {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    height: 320px;
    max-height: 320px;
}

/* ✅ 카드 내부 구조 */
.market-card-header {
    flex-shrink: 0;
    font-size: 13px;
    color: #777;
}

.market-top {
    align-items: stretch; /* ✅ 카드들이 같은 높이 유지 */
}
.market-main {
    flex: 1; /* ✅ 남은 공간을 여기서 사용 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}

.market-title { font-weight: 600; }
.market-value {
    font-size: 27px;
    font-weight: 700;
}
.market-change {
    font-size: 14px;
    font-weight: 600;
}
canvas#kospiChart { margin-top: 4px; }
.market-sub {
    flex-shrink: 0; /* ✅ 이게 핵심: 밑으로 안 밀리고 고정됨 */
    font-size: 12px;
    color: #666;
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}
.up { color: #16a34a; }
.down { color: #ef4444; }

body.dark-mode .market-info { background: #1b1b1b; border-color: #333; }
body.dark-mode .market-card { background: #222; color: #f5f5f5; }
body.dark-mode .chat-content { background: #333; }

canvas#kospiChart,
canvas#nasdaqChart,
canvas#btcChart {
    width: 100px !important;
    height: 15px !important;
    flex-shrink: 0;
}

.img-btn img {
    height: 90%; /* 🔹 입력창 높이에 맞춰 작게 */
    width: auto;
    max-height: 28px; /* 🔹 상한선 제한 */
    transition: transform 0.2s;
}

.img-btn img:hover { transform: scale(1.1); }

/* ✅ 하단 청소 / 새로고침 버튼 (오른쪽 정렬 + 아주 작게) */
/* ✅ 채팅창 상단 툴 영역 */
.chat-tools-top {
    display: flex;
    justify-content: flex-start; /* 왼쪽 정렬 */
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #fff;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* 🔹 메시지 영역과 분리 */
    position: relative;
    z-index: 5; /* 메시지 위로 */
}

.chat-tools-top img {
    width: 14px;  /* 🔹 아주 작게 */
    height: 14px;
    opacity: 0.75;
    cursor: pointer;
    transition: 0.2s;
}
.chat-tools-top img:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* ✅ 메시지 영역과 간격 */
.chat-content {
    flex: 1;
    border-radius: 0 0 8px 8px;
    padding: 137px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
}

/* ✅ 다크모드 대응 */
body.dark-mode .chat-msg {
    background: #2a2a2a;        /* 메시지 말풍선 배경 어둡게 */
    color: #f5f5f5;             /* 텍스트 밝게 */
}

body.dark-mode .chat-msg.user {
    background: #345a85;        /* 사용자 메시지: 어두운 파란톤 */
    color: #e8f0ff;
}

body.dark-mode .chat-msg.system {
    color: #aaa;                /* 시스템 메시지: 중간 회색 */
}

/* 검색창 */
/* ✅ 헤더 가운데 검색창 */
.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.search-form {
    position: relative;
    width: 100%;
    max-width: 469px;
}

.search-input {
    width: 100%;
    padding: 8px 0px 8px 12px; /* 오른쪽에 버튼 자리 확보 */
    border: 1px solid #ccc;
    border-radius: 13px;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
}

.search-input:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 4px rgba(74, 144, 226, 0.3);
}

/* 검색 버튼 (아이콘만 표시) */
.search-btn {
    position: absolute;
    right: 8px;
    top: 55%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.search-btn img {
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: 0.2s;
}

.search-btn img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ✅ 다크모드 대응 */
body.dark-mode .search-input {
    background-color: #2a2a2a;
    border-color: #555;
    color: #f5f5f5;
}

body.dark-mode .search-input::placeholder {
    color: #aaa;
}

body.dark-mode .search-btn img {
    filter: invert(1); /* 검색 아이콘 반전 (흰색으로 표시) */
}

/* ✅ 반응형: 모바일 (가로 카드 스타일) */
@media screen and (max-width: 768px) {

    /* 가로 정렬 */
    .market-info {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        overflow-x: auto;
        margin-top: 85px;
        /*padding: 6px 8px;*/
        gap: 6px;
    }

    /* 플랜카드 스타일 */
    .market-card {
        flex: 1 0 auto;
        /*width: 32%;*/
        height: 90px;
        min-width: 105px;
        margin: 0;
        padding: 0px 7px;
        text-align: center;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    .market-card-header {
        justify-content: center;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .market-value {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
    }

    .market-change,
    .market-diff,
    .market-sub,
    canvas {
        display: none !important;
    }

    /* ✅ 검색창 축소 */
    .header-center {
        flex: 1;
        justify-content: flex-end;
    }

    .search-form {
        max-width: 180px;
    }

    .search-input {
        font-size: 12px;
        padding: 5px 26px 5px 10px;
        border-radius: 10px;
    }

    .search-btn img {
        width: 14px;
        height: 14px;
    }

    /* 헤더 간격 조정 */
    .site-header {
        height: 55px;
        top: 25px;
    }

    .notice-bar {
        height: 25px;
        font-size: 12px;
    }

    .header-container {
        width: 95%;
    }
}
@media screen and (max-width: 768px) {
    .search-input {
        font-size: 12px !important;
        padding: 5px 26px 5px 10px !important;
        border-radius: 10px !important;
        width: 100% !important;
        /*max-width: 140px !important;*/
    }

    .search-form {
        /*max-width: 140px !important;*/
    }
}

@media screen and (max-width: 768px) {

    /* 다크모드 버튼 + 검색창을 살짝 왼쪽으로 이동 */
    .header-left {
        margin-left: -4px; /* 🔹 버튼 왼쪽으로 살짝 이동 */
    }

    .header-center {
        justify-content: flex-start !important; /* 🔹 중앙 → 왼쪽 정렬 */
        /*margin-left: -10px; !* 🔹 살짝 왼쪽으로 이동 *!*/
    }

    .search-form {
        max-width: 160px !important; /* 🔹 검색창 크기 약간 축소 */
    }

    .search-input {
        padding: 5px 22px 5px 10px !important; /* 🔹 아이콘 여백 조정 */
    }

    .search-btn {
        right: 6px !important;
    }
}

/* 상단 구조 동일 */

/* ✅ 전체 레이아웃 */
.market-info {
    margin-top: 95px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 10px 0;

}

/* 왼쪽 채팅창 */
.chat-box {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    height: 321px;
    max-height: 320px;
}

/* 오른쪽 전체 */
/*.market-right {*/
/*    flex: 2;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: space-between;*/
/*    height: auto !important;*/
/*    min-height: 320px;*/
/*}*/
.market-right {
    height: auto !important;
    min-height: 320px;
    flex: 2;
    display: flex;
    flex-direction: column;
}
.chat-box {
    height: auto !important;
    max-height: none !important;
}

.market-top {
    height: auto !important;
}

/* 오른쪽 상단 (KOSPI, NASDAQ, BTC) */
.market-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.market-top .market-card {
    flex: 1;
    margin: 0 6px;
    height: 175px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* ✅ 위에서부터 순서대로 */
    box-sizing: border-box;
    overflow: hidden;
}

/* 오른쪽 하단 (TOP10) */
.nasdaq-top10-section {
    flex: 1;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background: #fff;
    padding: 6px 0;
    box-sizing: border-box;
    margin: 5px 6px 14px;
    position: relative;
    /*max-width: 1300px; !* ✅ 마켓 카드와 동일 폭 *!*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}

.nasdaq-top10-section h3 {
    position: relative;
    top: -10px;
    margin-left: 14px; /* 제목 들여쓰기 유지 */
    margin-bottom: -2px; /* 🔹 간격 줄임 (기존보다 훨씬 붙게) */
    font-size: 15px; /* ✅ KOSPI 제목과 동일한 크기 */
    font-weight: 600; /* ✅ 살짝 굵게 */
    color: #777; /* ✅ KOSPI 제목 색상 동일 */
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

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

.nasdaq-item {
    border: 1px solid #f1f1f1;
    border-radius: 6px;
    padding: 3px;
    text-align: center;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
}

.nasdaq-item .symbol {
    font-weight: bold;
}

.nasdaq-item .price.up { color: #00a862; }
.nasdaq-item .price.down { color: #e03131; }

/* ✅ 툴팁 기본 스타일 */
.nasdaq-item {
    position: relative;
    overflow: visible !important;
}

.nasdaq-tooltip {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    z-index: 9999;
}

.nasdaq-item:hover .nasdaq-tooltip {
    opacity: 1;
}

.nasdaq-top10-section {
    overflow: visible !important;
}

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

/* ✅ 다크모드 시 NASDAQ TOP10 색상 조정 */
body.dark-mode .nasdaq-top10-section {
    background-color: #1e1e1e;
    border-color: #333;
}

body.dark-mode .nasdaq-item {
    background-color: #2a2a2a;
    border-color: #444;
    color: #f5f5f5; /* 기본 텍스트 흰색 */
}

body.dark-mode .nasdaq-item .symbol,
body.dark-mode .nasdaq-item .volume,
body.dark-mode .nasdaq-item .price {
    color: #f5f5f5 !important; /* 종목명, 거래량, 가격 흰색 고정 */
}

/* 상승/하락 색상 유지 (조금 더 어둡게 조정) */
body.dark-mode .nasdaq-item .price.up {
    color: #4ade80 !important; /* 연한 초록 */
}
body.dark-mode .nasdaq-item .price.down {
    color: #f87171 !important; /* 연한 빨강 */
}

/* ✅ 다크모드 툴팁도 조금 더 밝게 */
body.dark-mode .nasdaq-tooltip {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* ✅ BTC 포함 모든 마켓 카드 헤더 동일하게 정렬 */
.market-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #777;
}

/* ✅ BTC 가격 크기 줄임 */
#btcValue {
    font-size: 27px;  /* 기존 32px → 줄임 */
    font-weight: 700;
    word-break: break-all;
    text-align: center;
}

/* ✅ BTC 변화율 유지 */
#btcChange {
    font-size: 14px;
    font-weight: 600;
}

/* ✅ BTC 시간 색상 */
.market-time {
    color: #999;
    font-size: 11px;
}

/*모발*/
/* ✅ 초미니 모바일 카드 (가격만 표시) */
@media screen and (max-width: 768px) {

    .market-info {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 4px 0 !important;
        margin-top: 80px !important;
    }

    .market-top {
        display: flex !important;
        justify-content: center !important;
        gap: 5px !important;
        /*overflow-x: auto !important;*/
        width: 100% !important;
        padding: 0 4px !important;
    }

    .market-card {
        flex: 0 0 90px !important;
        height: 70px !important;
        padding: 4px !important;
        text-align: center !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .market-card-header {
        display: flex !important;
        justify-content: center !important;
        gap: 4px !important;
        font-size: 10px !important;
        color: #777 !important;
        margin-bottom: 2px !important;
    }

    .market-value {
        font-size: 17px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
    }

    .market-change {
        font-size: 10px !important;
        font-weight: 600 !important;
    }

    .market-sub,
    .market-diff,
    #kospiDiff,
    #nasdaqDiff,
    #btcDiff,
    #kospiExchange,
    #nasdaqExchange,
    #btcExchange,
    canvas#kospiChart,
    canvas#nasdaqChart,
    canvas#btcChart {
        display: none !important;
    }

    #btcValue {
        font-size: 17px !important;
    }

    .nasdaq-top10-section {
        margin-top: 8px !important;
        padding: 6px !important;
        border-radius: 8px !important;
    }

    .nasdaq-top10-section h3 {
        font-size: 13px !important;
        margin-left: 8px !important;
        margin-bottom: 4px !important;
    }
}

@media screen and (max-width: 768px) {
    /* 🔹 오른쪽 영역이 화면 전체 사용 */
    .market-right {
        flex: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 🔹 market-info 안에서도 chat-box 공간 제거 */
    .market-info {
        flex-direction: column !important;
        align-items: center !important;
    }
}
/* ✅ 모바일 TOP10 가로 스크롤 제거 */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden !important; /* 🔹 전체 페이지에서 가로 스크롤 제거 */
    }

    .market-info,
    .market-right,
    .nasdaq-top10-section,
    .nasdaq-top10-list {
        overflow-x: hidden !important; /* 🔹 내부 컨테이너에서도 강제 차단 */
    }

    .nasdaq-top10-list {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    /* 🔹 grid 내부 항목이 넘칠 때도 숨김 */
    .nasdaq-item {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .search-btn {
        position: absolute;
        right: 8px;
        top: 61%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }
}

/* ✅ 카테고리 네비게이션 아래 메인영역 밀기 */
.market-info {
    margin-top: 140px !important; /* 기존 95px → 140px */
}

@media screen and (max-width: 768px) {
    .market-info {
        margin-top: 73px !important; /* 모바일에선 살짝 줄임 */
    }
}

/* ✅ 카테고리 기본 */
.category-nav {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #eaeaea;
    z-index: 999;
    font-family: 'Noto Sans KR', sans-serif;
}

.category-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.main-category {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

/* ✅ 메뉴 항목 */
.category-item {
    position: relative;
}
.category-item > a {
    font-weight: 600;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s;
}
.category-item > a:hover {
    color: #4a90e2;
}

/* ✅ 드롭다운 (슬라이드 + 페이드인) */
.sub-category {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 8px 0;
    list-style: none;
    min-width: 140px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.25s ease;
}
.category-item:hover .sub-category {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* ✅ 하위 메뉴 항목 */
.sub-category li a {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
}
.sub-category li a:hover {
    background-color: #f5f5f5;
    color: #000;
}

body.dark-mode .hamburger-btn { color: #f5f5f5; }

/* ✅ 모바일 슬라이드 메뉴 */
/* ✅ 모바일 햄버거 버튼 */
.hamburger-btn {
    display: none;
    position: fixed;
    top: 92px;
    right: 18px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

/* ✅ 슬라이드 메뉴 */
.mobile-nav {
    position: fixed;
    top: 0;
    left: -80%;
    width: 44%;
    height: 100%;
    background-color: #fff;
    box-shadow: 2px 0 6px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow-y: auto;
}

.mobile-nav.active { left: 0; }

/* ✅ 모바일 네비게이션 헤더 */
.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 12px 4px 10px 4px; /* 🔹 세로 패딩을 늘려 X버튼 내려가게 */
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 16px;
}

/* ✅ 닫기 버튼 위치 조정 */
.close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    position: relative;
    top: 2px;  /* 🔹 살짝 아래로 이동 (기존 대비 +2~4px) */
}

/* ✅ 메뉴 구조 */
.mobile-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-category-list > li {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 6px;
}

.mobile-category-list span {
    font-weight: 600;
    display: block;
    color: #333;
    cursor: pointer;
}

.mobile-category-list ul {
    margin-top: 5px;
    list-style: none;
    padding-left: 12px;
    display: none;
}

.mobile-category-list ul li a {
    display: block;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    padding: 4px 0;
}

.mobile-category-list ul li a:hover {
    color: #4a90e2;
}

/* ✅ 다크모드 */
body.dark-mode .mobile-nav {
    background-color: #1e1e1e;
    color: #f5f5f5;
}
body.dark-mode .mobile-category-list li a { color: #ddd; }
body.dark-mode .mobile-category-list li a:hover { color: #4a90e2; }

/* ✅ 햄버거 버튼 — 기본적으로 PC에서는 숨김 */
.hamburger-btn {
    display: none;
    position: fixed;
    top: 92px;
    left: 18px; /* 왼쪽 고정 */
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

/* ✅ 모바일 전용 메뉴 (기본 숨김) */
.mobile-nav {
    position: fixed;
    top: 0;
    left: -100%; /* ✅ 완전히 숨김 */
    width: 44%;
    height: 100%;
    background-color: #fff;
    box-shadow: 2px 0 6px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow-y: auto;
}

.mobile-nav.active {
    left: 0; /* ✅ 클릭 시 등장 */
}

/* ✅ PC 모드: 항상 카테고리 노출 */
@media screen and (min-width: 769px) {
    .category-nav {
        display: block !important;
    }
    .hamburger-btn,
    .mobile-nav {
        display: none !important; /* ✅ PC에서는 모바일 메뉴 완전 숨김 */
    }
}

/* ✅ 모바일 모드: 카테고리 숨기고 햄버거 표시 */
@media screen and (max-width: 768px) {
    .category-nav {
        display: none !important;
    }
    .hamburger-btn {
        display: block !important;
    }
}

/* ✅ 최종적으로 PC에서는 카테고리 무조건 보이게 강제 */
@media screen and (min-width: 769px) {
    .category-nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .hamburger-btn,
    .mobile-nav {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ✅ 공통 기본 */
.toggle-wrapper {
    position: relative;
    display: inline-block;
    width: 30px;  /* 두 버튼이 같은 공간 차지 */
    height: 30px;
}

/* 🌙 다크모드 버튼 기본 (PC용) */
.dark-mode-btn {
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

/* ☰ 햄버거 버튼 기본 (숨김) */
.hamburger-btn {
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #333;
    display: none;
}

/* ✅ 다크모드 색상 대응 */
body.dark-mode .dark-mode-btn,
body.dark-mode .hamburger-btn {
    color: #f5f5f5;
}

/* ✅ 모바일 전용 (768px 이하) */
@media screen and (max-width: 768px) {
    .dark-mode-btn {
        /*display: none !important;  !* 모바일 야간모드 🌙 숨김 *!*/
        left: 30px;
    }

    .hamburger-btn {
        display: block !important; /* ☰ 표시 */
    }
}

/* ✅ 다크모드 시 카테고리 영역 스타일 */
body.dark-mode .category-nav {
    background-color: #1e1e1e !important;  /* 어두운 회색 배경 */
    border-bottom: 1px solid #333 !important;  /* 하단 경계 어둡게 */
}

body.dark-mode .main-category a {
    color: #f5f5f5 !important;  /* 텍스트 밝게 */
}

body.dark-mode .main-category a:hover {
    color: #4a90e2 !important;  /* hover 시 파란 강조색 유지 */
}

body.dark-mode .sub-category {
    background-color: #2a2a2a !important;  /* 드롭다운 배경 어둡게 */
    border-color: #444 !important;
}

body.dark-mode .sub-category li a {
    color: #ddd !important;  /* 하위 항목 글자색 */
}

body.dark-mode .sub-category li a:hover {
    background-color: #3a3a3a !important;
    color: #4a90e2 !important;
}

img {
    user-select: none;
    -webkit-user-drag: none;
}

/* ✅ 검색 아이콘 드래그 / 선택 방지 */
.search-btn img {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none; /* 🔹 클릭·드래그 이벤트 자체 차단 */
}

/* ✅ 검색 아이콘 완전 고정: 드래그, 포커스, 클릭 강조 제거 */
.search-btn img {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

/* ✅ 버튼 포커스/활성 상태 하이라이트 완전 제거 */
.search-btn,
.search-btn:focus,
.search-btn:active {
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    -webkit-tap-highlight-color: transparent !important; /* 🔹 모바일/크롬 하이라이트 제거 */
}

/* ✅ 클릭시 이미지 반전 방지 */
.search-btn img:active,
.search-btn img:focus {
    filter: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ✅ 채팅 아래 탭형 영역 */
.chat-extra-section {
    margin-top: 19px;
    border-top: 1px solid #eaeaea;
    padding-top: 8px;
    font-family: 'Noto Sans KR', sans-serif;
}

.chat-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
}

.chat-tab-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    border-radius: 6px 6px 0 0;
    transition: 0.2s;
}
.chat-tab-btn.active {
    background-color: #4a90e2;
    color: #fff;
}
.chat-tab-btn:hover {
    background-color: #e6f0ff;
}

.chat-tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.chat-tab-content.active {
    display: block;
    opacity: 1;
}

.chat-tab-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.chat-tab-content li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 13px;
}
.chat-tab-content li a {
    text-decoration: none;
    color: #333;
}
.chat-tab-content li a:hover {
    text-decoration: underline;
}

/* ✅ 다크모드 대응 */1
body.dark-mode .chat-extra-section {
    border-top: 1px solid #333;
}
body.dark-mode .chat-tab-btn {
    color: #ccc;
}
body.dark-mode .chat-tab-btn.active {
    background-color: #345a85;
    color: #fff;
}
body.dark-mode .chat-tab-content li {
    border-color: #333;
}
body.dark-mode .chat-tab-content li a {
    color: #eee;
}

/* ✅ 실시간 인기 종목 + 뉴스 헤드라인 영역 */
.chat-stock-news-section {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
    padding-top: 5px;
    font-family: 'Noto Sans KR', sans-serif;
}

.chat-stock-news-section h3 {
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: 700;
    color: #333;
}

.live-stock-box, .news-headline-box {
    flex: 1 1 48%;
    /*background: #fafafa;*/
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.live-stock-box ul, .news-headline-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.live-stock-box li, .news-headline-box li {
    padding: 6px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.live-stock-box li span.up {
    color: #e74c3c;
    font-weight: bold;
}
.live-stock-box li span.down {
    color: #2980b9;
    font-weight: bold;
}

.news-headline-box li a {
    color: #333;
    text-decoration: none;
}
.news-headline-box li a:hover {
    text-decoration: underline;
}

/* ✅ 다크모드 대응 */
body.dark-mode .chat-stock-news-section {
    border-color: #444;
}
body.dark-mode .live-stock-box,
body.dark-mode .news-headline-box {
    /*background: #121212;*/
    box-shadow: none;
}
body.dark-mode .chat-stock-news-section h3 {
    color: #fff;
}
body.dark-mode .news-headline-box li a {
    color: #ccc;
}

/*foooo*/
html, body {
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 100%;
}

/*body > footer,*/
/*body > .site-footer {*/
/*    margin-top: 530px; !* ✅ 본문 끝 이후에 footer를 밀어내는 핵심 *!*/
/*}*/


@media screen and (max-width: 768px) {
    .header-container {
        width: 94%;
        justify-content: space-between !important;
        align-items: center;
        gap: 2px !important;
    }

    /* 🔹 검색창을 확 줄이기 */
    .search-form {
        max-width: 110px !important; /* 🔻 기존 130 → 110으로 축소 */
        width: 100%;
    }

    .search-input {
        font-size: 11px !important;
        padding: 4px 16px 4px 8px !important; /* 🔻 오른쪽 여백 16으로 줄임 */
        border-radius: 8px !important;
    }

    .search-btn {
        right: -19px !important; /* 🔹 아이콘 살짝 더 붙임 */
        top: 65% !important;
        transform: translateY(-50%);
    }

    /* 🔹 로그인/회원가입 공간 확보 */
    .header-right {
        min-width: 98px !important;
        justify-content: flex-end;
    }

    /* 🔹 로고 크기 조정 (좁은 화면 대응) */
    .logo img {
        height: 46px !important;
    }
}

/*2025-11-08*/
/* ✅ 로그인 후 사용자 정보 표시 */
.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.user-info .nickname {
    font-weight: 700;
}

.user-info .user-meta {
    color: #555;
    font-size: 13px;
}

.logout-icon {
    width: 18px;
    height: 18px;
    opacity: 0.8;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    top: 2px;
}

.logout-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

body.dark-mode .user-info span { color: #f5f5f5; }
body.dark-mode .logout-icon { filter: invert(1); opacity: 0.9; }

/*알림 css*/
.notification-icon {
    cursor: pointer;        /* 손가락 커서 */
    position: relative;
    margin-right: 10px;
}

.notification-icon img {
    width: 22px;
    height: 22px;
    position: relative;
    top: 2px;   /* 🔥 아이콘 아래로 2px 이동 */
}

.noti-badge {
    position: absolute;
    top: -7px;
    right: -4px;
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    padding: 1px 3px;
    border-radius: 50%;
}

/*알림 리스트 */
.noti-dropdown {
    position: absolute;
    top: 55px;
    right: 10px;
    width: 260px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 0;
    display: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    z-index: 2000;
}

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

.noti-dropdown li {
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.noti-dropdown li:hover {
    background: #f5f5f5;
}
.notification-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}

@media (max-width: 768px) {
    .header-center {
        display: none !important;
    }
}

/* 다크모드 벨 아이콘 자동 반전 */
body.dark-mode .notification-icon img {
    filter: invert(1) brightness(1.2);
}

.user-nick {
    cursor: pointer;
    transition: 0.2s;
}

.user-nick:hover {
    color: #4a90e2; /* 라이트모드 파랑 */
    text-decoration: underline;
}

body.dark-mode .user-nick:hover {
    color: #9bc0ff; /* 다크모드용 밝은 파랑 */
}

body.dark-mode .profile-img {
    filter: invert(1) brightness(1.3);
}

body.dark-mode .comment-profile-img {
    /*filter: invert(1) brightness(1.3);*/
}

body.dark-mode .chatClearBtn {
    filter: invert(1) brightness(1.3);
}

body.dark-mode .chatStopBtn {
    filter: invert(1) brightness(1.3);
}

body.dark-mode .rps-title-icon {
    filter: invert(1) brightness(1.3);
}

body.dark-mode .rps-hand {
    filter: invert(1) brightness(1.3);
}

body.dark-mode .rps-choice-icon {
    filter: invert(1) brightness(1.3);
}

/* ✅ 뉴스 섹션 */
.chat-stock-news-section {
    margin-top: 20px;
    font-family: 'Noto Sans KR', sans-serif;
}

/* ✅ 제목 + +버튼 */
.news-headline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.news-headline-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #222;
}

.news-headline-header .more-link {
    font-size: 16px;
    /*font-weight: 700;*/
    color: #4a90e2;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.news-headline-header .more-link:hover {
    color: #2c6dc9;
}

/* ✅ 뉴스 목록 */
.news-headline-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ✅ 뉴스 제목 말줄임 */
.news-headline-box li a {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 1줄만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /*font-size: 14px;*/
    color: #333;
    text-decoration: none;
    line-height: 1.4em;
    transition: color 0.2s;
}

.news-headline-box li a:hover {
    color: #4a90e2;
}
.mobile-category-list .main-category-link {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    color: #222;
    text-decoration: none;
}

/* 클릭 가능 여부와 관계없이 동일하게 보이게 */
.mobile-category-list .main-category-link:hover {
    background-color: #f5f5f5;
}

/* 🌙 다크모드 - 모바일 카테고리 링크 색상 */
body.dark-mode .mobile-category-list span,
body.dark-mode .mobile-category-list li a,
body.dark-mode .mobile-category-list .main-category-link {
    color: #f1f1f1 !important;
}

/* 🌙 hover 시 강조 */
body.dark-mode .mobile-category-list li a:hover,
body.dark-mode .mobile-category-list .main-category-link:hover {
    color: #4a90e2 !important;
    background-color: #2a2a2a !important;
}