/* 기본 설정 및 다크모드 유지 */
body {
    background-color: #0f0f0f;
    color: #efeff1;
    font-family: 'Pretendard', sans-serif;
    margin: 0;
}

/* 헤더 */
header {
    background-color: #18181b;
    padding: 10px 20px;
    border-bottom: 1px solid #2d2d2d;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 헤더 컨테이너 */
.header-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 로고 그룹 */
.logo-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 개별 로고 아이템 */
.logo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #00ffa3;
    font-weight: bold;
    font-size: 1.2rem;
    transition: opacity 0.2s;
}

.logo-item:hover {
    opacity: 0.8;
}

/* 로고 구분선 */
.logo-divider {
    color: #6b6b6b;
    font-size: 1.2rem;
}

/* 로고 이미지 */
.logo-img {
    height: 32px;
    width: auto;
    display: block;
}

/* 헤더 서브타이틀 */
.header-subtitle {
    margin: 0;
    color: #adadb8;
    font-size: 0.9rem;
    padding-left: 5px;
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .logo-group {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .logo-item {
        font-size: 1rem;
    }
    
    .logo-img {
        height: 24px;
    }
    
    .header-subtitle {
        font-size: 0.8rem;
    }
}

/* 메인 컨테이너 */
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
}

/* 방송 정보 + 광고 레이아웃 (좌우 배치) */
.info-ad-wrapper {
    display: flex;
    gap: 20px;
    background: #18181b;
    border-radius: 12px;
    padding: 20px;
    border-left: 5px solid #00ffa3;
    align-items: center;
    margin-bottom: 20px;
}

/* 좌측 정보 영역 */
.stream-info-content {
    flex: 1;
    min-width: 0; /* 말줄임표 작동 필수 */
}

.stream-info-content h2 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 제목이 길면 ... 처리 */
    color: #fff;
}

.streamer-name {
    color: #adadb8;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 치지직 버튼 */
.chzzk-btn {
    background: #00ffa3;
    color: #000;
    text-decoration: none;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.85rem;
    transition: 0.2s;
}

.chzzk-btn:hover {
    background: #00e692;
    transform: translateY(-2px);
}

/* 방송 + 채팅 영역 레이아웃 조정 */
.stream-wrapper {
    display: flex;
    gap: 15px;
    height: 65vh; /* 높이를 조금 더 확보 */
    min-height: 500px;
}

/* 영상 영역: 비율을 2로 조정 (기존 3) */
.video-player-container {
    flex: 2; 
    background-color: #000;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.webplayer-internal-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 채팅창 영역: 비율을 1로 유지하여 상대적 크기 확장 및 최소 너비 보장 */
/* 채팅창을 담는 부모 박스 */
.chat-aside {
    flex: 1; 
    width: 355px; 
    background-color: #18181b;
    border: 1px solid #2d2d2d;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    
    /* 핵심: 넘치는 부분을 숨김 */
    overflow: hidden; 
    position: relative;
	max-width: 355px; 
}

/* 실제 채팅 iframe */
.chat-aside iframe {
    width: 100%;
    /* 핵심: 높이를 100%보다 크게 설정하여 하단 영역을 아래로 밀어냄 */
    height: calc(100% + 110px); 
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}

/* 썸네일 그리드 (하단 영역) */
.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.thumbnail-item {
    background-color: #1f1f23;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.thumb-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #333;
    position: relative;
}

.live-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff4b4b;
    padding: 2px 5px;
    font-size: 0.7rem;
    border-radius: 3px;
    color: white;
}

/* 방송 정보 컨테이너 (좌측 정보 + 우측 광고) */
.info-ad-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    background: #18181b;
    border-radius: 8px;
    border-left: 4px solid #00ffa3;
    overflow: hidden;
    padding: 15px;
}

/* 좌측 방송 정보 영역 (너비 제한 및 말줄임) */
.stream-info-box {
    flex: 1;
    min-width: 0; /* flex 안에서 말줄임표 작동을 위한 필수 설정 */
    margin-right: 20px;
}

/* 제목 말줄임표 처리 */
.stream-info-box h2 {
    margin: 0;
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 우측 광고 영역 */
.ad-slot-right {
    width: 320px; /* 구글 디스플레이 광고 표준 너비 중 하나 */
    min-width: 320px;
    height: 100px; /* 광고 높이에 맞게 조절 */
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #444;
}

/* 치지직 바로가기 버튼 (이전 디자인 유지) */
.chzzk-go-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    margin-left: 10px;
    background-color: #00ffa3;
    color: #000 !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    border-radius: 20px;
    white-space: nowrap; /* 버튼 텍스트 줄바꿈 방지 */
}

/* 마우스 올렸을 때 글로우 효과 강화 */
.chzzk-go-btn:hover {
    box-shadow: 0 0 20px rgba(0, 255, 163, 0.6);
    transform: translateY(-2px);
    background-color: #00ffb5;
}

/* 버튼 내 아이콘 (이미지의 아이콘 대용) */
.chzzk-go-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: url('https://ssl.pstatic.net/static/nng/glive/icon/favicon.png'); /* 치지직 파비콘 */
    background-size: contain;
    background-repeat: no-repeat;
}

/* 방송 정보 컨테이너 수정 */
.info-ad-wrapper {
    display: flex;
    flex-wrap: wrap; /* 자식이 100%면 다음 줄로 넘어가게 함 */
    gap: 20px;
    background: #18181b;
    padding: 20px;
    border-radius: 12px;
    align-items: center;
}

/* 전체를 감싸는 로우 */
.timer-flex-row {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 15px;           /* 바와 문구 사이 간격 */
    background: rgba(24, 24, 27, 0.5);
    padding: 5px;
    border-radius: 8px;
    max-width: 800px;
}

/* 타임바 컨테이너 (남은 공간 다 차지) */
.timer-container {
    flex: 1;             /* 오른쪽 문구 제외한 나머지 너비 전체 사용 */
    background: #26262c;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

#timer-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00ffa3, #00e692);
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.3);
    transition: width 1s linear;
}

/* 오른쪽 문구 스타일 */
.timer-text-right {
    white-space: nowrap; /* 줄바꿈 방지 */
    font-size: 13px;
    color: #efeff1;
    min-width: 140px;    /* 문구 영역 최소 너비 확보 */
    text-align: right;
}

/* 스트리머 아이콘 (프로필 이미지) */
.streamer-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%; /* 원형 처리 */
    border: 2px solid #303032;
    object-fit: cover;
}

/* 상세 정보 텍스트 영역 */
.stream-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

/* 카테고리 & 태그 스타일 */
.meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
    font-size: 0.85rem;
}

.category-badge {
    color: #00ffa3;
    background: rgba(0, 255, 163, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.tag-badge {
    color: #adadb8;
    background: #26262c;
    padding: 2px 8px;
    border-radius: 4px;
}

.stream-time {
    font-size: 0.8rem;
    color: #848494;
    margin-top: 5px;
}

footer {
    background-color: #0e0e10; /* 본문 배경과 통일감 있게 설정 */
    padding: 20px 20px;       /* 위아래 여백을 40px -> 20px로 축소 */
    text-align: center;
    border-top: 1px solid #1f1f23; /* 경계선도 어둡게 변경 */
    margin-top: 40px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    color: #53535f;           /* 글자색을 어두운 회색으로 변경 */
    font-size: 12px;          /* 글자 크기 살짝 축소 */
    line-height: 1.3;         /* 줄 간격을 1.6 -> 1.3으로 좁게 수정 */
}

.footer-content p {
    margin: 4px 0;            /* 문단 사이의 간격도 최소화 */
}



/* 안내 문구 */
.timer-notice {
    font-size: 12px;
    color: #adadb8;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timer-notice strong {
    color: #00ffa3;
}


@media (max-width: 768px) {
    .main-container {
        padding: 0 10px;
    }

    .stream-wrapper {
        flex-direction: column;
        height: auto;
        min-height: 200px;
    }

    .video-player-container {
        flex: none;
        height: 30vh; /* 방송 화면 높이 조정 */
    }

    .chat-aside {
        display: none !important;
    }

    /* 채널 정보 영역 완전 재정비 */
    .info-ad-wrapper {
        flex-direction: column;
        gap: 10px;
        padding: 3px;
        align-items: center;
        text-align: center;
        background: #18181b;
        border-radius: 12px;
        border-left: 4px solid #00ffa3;
        margin: 10px 0;
    }

    /* 타이틀 폰트 크기 대폭 축소 + 한줄 처리 */
    .stream-details h2 {
        font-size: 1rem !important; /* 1.3rem → 1rem */
        line-height: 1.2;
        margin: 0 0 5px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 스트리머 이름도 축소 */
    .stream-details span[style*="font-weight:bold"] {
        font-size: 0.9rem;
    }

    /* 채널 이동 버튼 중앙 정렬 */
    .chzzk-btn {
        padding: 8px 20px;
        font-size: 0.85rem;
        margin-top: 5px;
    }

    /* 아이콘 크기 축소 */
    .streamer-icon {
        width: 50px;
        height: 50px;
    }

    /* 메타 정보 폰트 축소 */
    .meta-info {
        font-size: 0.75rem;
        gap: 5px;
    }

    .category-badge, .tag-badge {
        padding: 2px 6px;
        font-size: 0.7rem;
    }

    /* 썸네일 그리드 최적화 */
    .thumbnail-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .thumbnail-item div[style*="font-size:13px"] {
        font-size: 0.85rem;
    }

    .timer-text-right {
        text-align: left;
        margin-left: -10px;
    }

    a.logo {
        font-size: 0.7rem;
    }   

    
}