:root { 
        --bg-body: #121212; 
        --bg-card: #1e1e1e; 
        --bg-input: #2a2a2a; 
        --border: #333; 
        --text-main: #d4d4d4; 
        --accent-red: #ff5252; 
        --accent-blue: #448aff; 
    }
    
    * { box-sizing: border-box; }
    
    body { 
        margin: 0; 
        background: var(--bg-body); 
        color: var(--text-main); 
        font-family: 'Inter', -apple-system, sans-serif; 
        font-size: 14px; 
        overflow-x: hidden; 
        -webkit-text-size-adjust: none; 
		font-variant-numeric: tabular-nums;
    }
    .site-logo {
		font-weight: 900;
		font-size: 22px;
		text-decoration: none;
		line-height: 1;
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
		-webkit-tap-highlight-color: transparent;
		display: inline-block;
	}

	.site-logo:hover,
	.site-logo:active,
	.site-logo:focus {
		background: transparent !important;
	}

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
    
    input:-webkit-autofill, 
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
        -webkit-text-fill-color: var(--text-main) !important;
        transition: background-color 5000s ease-in-out 0s;
    }
	.header-menu-link {
        color: #888;
        text-decoration: none;
        font-weight: 800;
        font-size: 16px;
        background: transparent !important;
        transition: color 0.2s ease;
    }

    .header-menu-link:hover {
        color: #fff !important;
        background: transparent !important;
    }

    .header-menu-link.active {
        color: #fff;
        border-bottom: 2px solid var(--accent-red);
    }

    .header-menu-link.active:hover {
        color: #fff !important;
        background: transparent !important;
    }
    .ranking-list, .trade-list { scrollbar-width: thin; scrollbar-color: #444 transparent; }

    /* 헤더 및 네비게이션 */
    header { height: 55px; background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: sticky; top:0; z-index:999; }
    header a:hover { background: transparent  !important; }
    .header-inner { width: 100%; max-width: 1265px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; z-index:999;}
    
    .footer-link { color:#3399ff; font-weight:700; text-decoration:none; position:relative; margin-left:6px; transition:color 0.2s ease; }
    .footer-link::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:#3399ff; transition:width 0.25s ease; }
    .footer-link:hover { color:#5fb3ff; }
    .footer-link:hover::after { width:100%; }
    
	/* h1 */
	.sr-only {
	  position: absolute !important;
	  width: 1px !important;
	  height: 1px !important;
	  padding: 0 !important;
	  margin: -1px !important;
	  overflow: hidden !important;
	  clip: rect(0, 0, 0, 0) !important;
	  white-space: nowrap !important;
	  border: 0 !important;
	}

    /* 전체 레이아웃 (좌측 랭킹 / 우측 메인) */
    .container { max-width: 1280px; margin: 15px auto; display: grid; grid-template-columns: 300px 1fr; gap: 20px; padding: 0 15px; width: 100%; }
    .main-content { min-width: 0; width: 100%; display: flex; flex-direction: column; }
    
    /* 좌측 랭킹 패널 */
    .ranking-panel { height: 950px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
    .ranking-header { display: flex; padding: 15px; font-size: 11px; color: #888; background: #252526; font-weight: bold; border-bottom: 1px solid var(--border); }
    .ranking-header .sort-btn { flex: 1; text-align: center; cursor: pointer; user-select: none; }
    .ranking-header .sort-btn.active { color: var(--accent-red); }
    .ranking-list { flex: 1; overflow-y: auto; position: relative; }
    .ranking-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #282828; text-decoration: none; color: inherit; cursor: pointer; transition: all 0.2s ease; }
    .ranking-item.active { background: #2d2d30; border-left: 4px solid var(--accent-red); padding-left: 11px; }
    
    .flash-change .s-price { font-weight: bold; transition: color 0.3s; }
    .price-up { color: var(--accent-red) !important; }
    .price-down { color: var(--accent-blue) !important; }
    .delay-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: middle; transition: background-color 0.5s ease, opacity 0.5s ease; }

    /* 메인 차트 카드 */
    .card { width: 100%; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 20px; display: flex; flex-direction: column; }
    
    .chart-header { height:45px; background:#252526; display:flex; align-items:center; justify-content:space-between; padding:0 15px 0 20px; }
    .chart-title { font-weight:bold; display:flex; align-items:center; gap:4px; }
    
    .expand-btn { background:rgba(128,128,128,0.3); border:none; width:28px; height:28px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    .expand-btn:hover { background:rgba(128,128,128,0.6); }
    
    .timeframe-btn { background: rgba(128,128,128,0.3); border: none; height: 28px; padding: 0 8px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; color: #888; font-size: 11px; font-weight: 700; font-family: inherit; }
    .timeframe-btn:hover { background: rgba(128,128,128,0.6); }
    .timeframe-btn.active { background: rgb(255 255 255 / 35%); color: #ffffff; }

    .chart-container { display: flex; background: #1a1a1a; width: 100%; height: 395px; border-top: 1px solid var(--border); position: relative; }
    #chart-div { flex: 7.5; height: 100%; min-width: 0;}
    
    .chart-expanded #chart-div { flex: 1 0 100% !important; width: 100% !important; }
    .chart-expanded .live-trades { display: none !important; }

    /* 실시간 체결 내역 */
    /* 실시간 체결 내역 (공통) */
	.live-trades { flex: 2.5; border-left: 1px solid var(--border); background: #1a1a1a; display: flex; flex-direction: column; height: 100%; }

	/* 헤더와 데이터의 flex 비율을 동일하게 맞춤 */
	.trade-header { display: flex; justify-content: space-between; padding: 7px 12px; font-size: 11px; color: #888; border-bottom: 1px solid #222; background: #252526; font-weight: bold; }
	.trade-header span { display: flex; align-items: center; white-space: nowrap; }
	.trade-header .th-time { flex: 1.2; justify-content: flex-start; padding-left: 8px; }
	.trade-header .th-qty { flex: 1.2; justify-content: flex-end; padding-right: 15px; }
	.trade-header .th-price { flex: 1; justify-content: flex-end; padding-right: 12px; }

	.trade-list { flex: 1; overflow-y: auto; }
	.trade-row { display: flex; justify-content: space-between; padding: 7px 12px; font-size: 12px; border-bottom: 1px solid #222; transition: background 0.3s; }
	.trade-row:hover { background: #2a2a2a; }
	.trade-row span { flex: 1; display: flex; align-items: center; white-space: nowrap; }
	.trade-row .t-time { flex: 1.2; justify-content: flex-start; padding-left: 8px; }
	.trade-row .t-qty { flex: 1.2; justify-content: flex-end; padding-right: 15px; color: #aaa; font-size: 12px; letter-spacing: -0.5px; }
	.trade-row .t-price { flex: 1; justify-content: flex-end; padding-right: 12px; color: var(--accent-red); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }

    /* 🔥 하단 3단 패널 공통 */
	.bottom-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; margin-bottom: 20px; }
	.panel-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; height: 488px; }
	.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; font-size: 13px; color: var(--text-main); background: #252526; font-weight: bold; border-bottom: 1px solid var(--border); }
	.panel-body { flex: 1; 
        overflow-y: auto; 
        display: flex; 
        flex-direction: column; 
        background: #1a1a1a; 
        padding: 0;}

	/* 🔥 하단 3단 패널 리스트 공통 칼각 맞춤 */
	.vol-rank-item, .named-item, .item-trade-row {
		display: flex; justify-content: space-between; align-items: center;
		padding: 0 15px; 
		height: 44px;       /* 🔥 48px -> 44px로 미세하게 줄여서 화면에 10개가 쏙 들어갑니다 */
		min-height: 44px;   /* 🔥 높이 절대 고정 (찌그러짐 방지) */
		flex-shrink: 0;     
		border-bottom: 1px solid #282828;
		transition: background 0.2s;
		cursor: pointer;
		box-sizing: border-box;
	}

	/* 패널 공통 Hover 배경색 */
	.vol-rank-item:hover, .named-item:hover, .item-trade-row:hover { background: #252525; }

	.discussion-wrap {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.discussion-topic {
		padding: 14px 15px 10px;
		border-bottom: 1px solid #282828;
		background: #1a1a1a;
	}
	.discussion-mode-badge {
		display: inline-flex;
		align-items: center;
		height: 20px;
		padding: 0 7px;
		border-radius: 999px;
		font-size: 10px;
		font-weight: 900;
		background: rgba(51, 153, 255, 0.15);
		color: #72b8ff;
		margin-bottom: 8px;
	}
	.discussion-title {
		font-size: 14px;
		font-weight: 700;
		color: #fff;
		line-height: 1.45;
		margin-bottom: 8px;
		word-break: keep-all;
	}
	.discussion-body {
		font-size: 12px;
		line-height: 1.55;
		color: #aaa;
		white-space: pre-wrap;
		word-break: break-word;
	}
	.discussion-vote-box {
		padding: 12px 15px;
		border-bottom: 1px solid #282828;
		display: flex;
		flex-direction: column;
		gap: 8px;
		background: #181818;
	}
	.discussion-vote-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		border: 1px solid #333;
		border-radius: 8px;
		background: #202020;
		color: #ddd;
		padding: 10px 12px;
		font-size: 12px;
		font-weight: 700;
		cursor: pointer;
		transition: 0.2s ease;
	}
	.discussion-vote-option:hover {
		border-color: #555;
		background: #262626;
	}
	.discussion-vote-option.is-voted {
		border-color: var(--accent-red);
		color: #fff;
		background: rgba(255, 82, 82, 0.12);
	}
	.discussion-vote-meta {
		font-size: 11px;
		color: #888;
	}
	.discussion-comments {
		flex: 1;
		overflow-y: auto;
		padding: 10px 15px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		background: #1a1a1a;
	}
	.discussion-comment {
		padding: 10px 12px;
		border-radius: 8px;
		background: #222;
		border-left: 3px solid #444;
	}
	.discussion-comment-meta {
		display: flex;
		justify-content: space-between;
		font-size: 11px;
		color: #777;
		margin-bottom: 6px;
	}
	.discussion-comment-text {
		font-size: 12px;
		color: #ddd;
		line-height: 1.45;
		word-break: break-word;
		white-space: pre-wrap;
	}
	.discussion-form {
		display: flex;
		gap: 8px;
		padding: 12px 15px;
		border-top: 1px solid #282828;
		background: #181818;
	}
	.discussion-form textarea {
		flex: 1;
		min-height: 64px;
		max-height: 120px;
		resize: vertical;
		padding: 10px 12px;
		border: 1px solid #333;
		border-radius: 8px;
		background: #222;
		color: #eee;
		font-size: 12px;
		font-family: inherit;
		outline: none;
	}
	.discussion-form textarea:focus {
		border-color: var(--accent-red);
	}
	.discussion-form button {
		flex: 0 0 74px;
		border: none;
		border-radius: 8px;
		background: var(--accent-red);
		color: #fff;
		font-size: 12px;
		font-weight: 800;
		cursor: pointer;
	}
	.discussion-empty {
		padding: 20px 15px;
		text-align: center;
		font-size: 12px;
		color: #666;
	}

	/* 패널 1: 오늘의 거래량 랭킹 */
	.vol-rank-name { font-size: 13px; font-weight: 600; color: var(--text-main); }

	/* 패널 2: 실시간 네임드 랭킹 */
	.named-info { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
	.named-name { font-size: 13px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 4px; }
	.named-badge { background: #3399ff; color: #121212; padding: 2px 5px; border-radius: 3px; font-size: 9px; font-weight: 900; }
	.named-desc { font-size: 11px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.vote-btn { background: transparent; color: #aaa; border: 1px solid #444; border-radius: 4px; padding: 5px 10px; font-size: 12px; font-weight:bold; cursor: pointer; transition: all 0.2s; }
	.vote-btn:hover { background: #ff5252; color: #fff; border-color: #ff5252; }
	.add-btn { background: rgba(255, 255, 255, 0.1); border: none; color: #d4d4d4; font-size: 11px; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
	.add-btn:hover { background: var(--accent-red); color: #fff; }

	/* 패널 3: 아이템 실시간 완료 내역 */
	.item-title-box { display: flex; align-items: center; gap: 6px; overflow: hidden; flex: 1; padding-right: 10px; }
	.item-title { font-size: 12px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.item-price-box { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
	.item-price { font-size: 13px; font-weight: 700; color: var(--text-main); /* 흰색에서 베이스 텍스트 색으로 변경 */ }


    /* 애니메이션 및 유틸 */
    .up { color: var(--accent-red); } 
    .down { color: var(--accent-blue); }
    
    @keyframes flash { from { background: rgba(255,82,82,0.25); } to { background: transparent; } }
    .flash-change { animation: flash 1s ease-out; }
    
    @keyframes newTradeFlash { 0% { background: rgba(255, 82, 82, 0.5); } 100% { background: transparent; } }
    .flash-new-trade { animation: newTradeFlash 1.5s ease-out 2 !important; }

    /* 모달 공통 및 폼 스타일 */
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 9999; justify-content: center; align-items: center; }
    .modal-content { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 25px; width: 90%; max-width: 400px; color: #d4d4d4; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.8); box-sizing: border-box; display: flex; flex-direction: column; max-height: 85vh;}
    .close-btn { position: absolute; top: 15px; right: 20px; font-size: 26px; cursor: pointer; color: #888; transition: color 0.2s; }
    .close-btn:hover { color: #fff; }
    .submit-btn { background: #ff5252; color: #fff; border: none; border-radius: 4px; padding: 12px; font-size: 14px; font-weight: bold; cursor: pointer; width: 100%; transition: background 0.2s; }
    .submit-btn:hover { background: #e04848; }

    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-size: 12px; color: #aaa; margin-bottom: 6px; }
    .form-group input[type="text"] { width: 100%; padding: 10px; background: var(--bg-input); border: 1px solid var(--border); color: #fff; border-radius: 4px; outline: none; font-size: 13px; }
    .form-group input[type="text"]:focus { border-color: var(--accent-red); }
    .form-group .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; cursor: pointer; }
    
    /* 공지사항 모달 추가 영역 */
    .notice-body { overflow-y: auto; padding-right: 5px; margin-bottom: 20px; font-size: 13px; line-height: 1.6; }
    .notice-body h3 { color: #ff5252; font-size: 15px; margin-top: 15px; margin-bottom: 5px; }
    .notice-body b { color: #fff; }
    .notice-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #333; padding-top: 15px; font-size: 13px; color: #aaa; }
	
	/*  네임드 코멘트(평판) 모달 전용 스타일 */
	#commentModal .modal-content { max-width: 450px; padding: 20px; }
	.comment-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 15px; padding-right: 30px;}
	.comment-title { font-size: 16px; font-weight: 900; color: #fff; display: flex; align-items: center; gap: 8px; }
	.comment-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; padding-right: 5px; }
	.comment-item { background: #222; padding: 12px; border-radius: 6px; border-left: 3px solid #444; }
	.comment-item.good { border-left-color: var(--accent-red); } /* 칭찬/호감 느낌 */
	.comment-item.bad { border-left-color: var(--accent-blue); } /* 악평/비매너 느낌 (추후 확장을 위해 세팅) */
	.comment-meta { display: flex; justify-content: space-between; font-size: 11px; color: #777; margin-bottom: 6px; }
	.comment-text { font-size: 13px; color: #ddd; line-height: 1.4; word-break: break-all; }
	.comment-form { display: flex; gap: 8px; }
	.comment-form input { flex: 1; padding: 10px; background: var(--bg-input); border: 1px solid var(--border); color: #fff; border-radius: 4px; outline: none; font-size: 13px; }
	.comment-form input:focus { border-color: var(--accent-red); }
	.comment-form button { background: var(--accent-red); color: #fff; border: none; border-radius: 4px; padding: 0 15px; font-weight: bold; cursor: pointer; transition: 0.2s; white-space: nowrap; }
	.comment-form button:hover { background: #e04848; }
	.no-comment { text-align: center; color: #666; font-size: 12px; padding: 20px 0; }
    /* 중간 폭 대응 */
    @media (max-width: 1380px) and (min-width: 1081px) {
        .container { max-width: 100%; grid-template-columns: 280px 1fr; gap: 16px; padding: 0 12px; }
        .chart-container { height: 360px; }
        .live-trades { min-width: 210px; max-width: 210px; flex: 0 0 210px; }
        .bottom-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
        .panel-card { height: 340px; }
    }

    /* 모바일 반응형 처리 */
    @media (max-width: 1080px) {
        .container { display: flex; flex-direction: column; }
        .ranking-panel { order: 2; height: 350px; }
        .main-content { display: contents; }
        .main-content > .card:first-child { order: 1; }
        .card { margin-bottom: 15px; }
        
        .chart-container { flex-direction: row; height: 250px; gap: 8px; }
        #chart-div { flex: 1.2; height: 100%; }
        .live-trades { flex: 1; height: 100%; border-top: none; min-width: 160px; }

        #trade-list-box { max-height: 200px !important; overflow-y: auto; }
        
        /* 숨통이 트이도록 좌우 여백을 2px -> 8px로 증가 */
        .trade-header, .trade-row { padding: 5px 8px; } 

        /* 늘어난 여백에 맞춰 내부 아이템 간격 재조정 */
        .trade-header .th-time, .trade-row .t-time { flex: 1.2; padding-left: 0; justify-content: flex-start; font-size: 11px; }
        .trade-header .th-qty, .trade-row .t-qty { flex: 1; padding-right: 6px; justify-content: flex-end; font-size: 11px; }
        .trade-header .th-price, .trade-row .t-price { flex: 1.1; padding-right: 0; justify-content: flex-end; font-size: 12px; }
        
        .trade-row .t-time b { width: 12px !important; font-size: 10px; }

        /* 하단 3단 패널을 세로로 배치 */
        .main-content > .bottom-panels { order: 3; }
        .bottom-panels { grid-template-columns: 1fr; gap: 15px; }
        .panel-card { height: 280px; }
    }