@charset "utf-8";

.gcv-contents{
	margin-top: 20px;
	width: 1000px;
	height: auto;
	padding-bottom: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.gcv-contents::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* 배경 이미지 설정 */
    background-image: url("../images/digitalcurrency.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	
	opacity: 0.8;
	z-index: -1;
}
.gcv-contents>h1, .gcv-contents>h2{
	position: relative;
	z-index: 1;
}
.gcv-contents>h1{
	display: block;
	width: 100%;
	color: rgb(190, 0, 90);
	font-size: 40px;
	line-height: 1.2;
	font-weight: bold;
	margin-top: 160px;
	margin-bottom: 10px;
}
.gcv-contents>h2{
	display: block;
	width: 100%;
	color: rgb(0, 100, 0);
	font-size: 30px;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: 0px;
}
.comment-box {
    width: 500px;
	height: auto;
    font-family: Arial, sans-serif;
	margin-top: -0px;
}

/* ⭐ 모든 요소가 공유하는 폭 */
.comment-container {
	width: 500px;
	margin: 0px auto 0;
	box-sizing: border-box;
	position:relative;
}

/* 위쪽 액션 버튼 */
.actions {
	
	display: flex;
	justify-content: space-between;
	gap: 300px;
	margin-top: 20px;
	margin-bottom: 6px;
}

/* 두 버튼 공통 스타일 */
#likeBtn, #clearAllBtn {
	flex: 1;                /* ⭐ 같은 크기 핵심 */
	height: 20px;
	font-size: 12px;
	text-align: center;
	padding: 0 10px;
	background: rgb(50, 50, 255);
	border: 1px solid #ddd;
	border-radius: 20px;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
}

.actions button.active {
    background: #b91c1c;
	transform: translateY(1px);
}

/* 좋아요 활성화 상태 (클릭 시) */
#likeBtn.active {
    background: rgb(255, 0, 80);
    border-color: #ffcdd2;
    color: rgb(0, 150, 0);
    box-shadow: 0 0 0 #ddd; /* 눌린 효과 */
    transform: translateY(2px);
}

#clearAllBtn:hover {
    background: rgb(255, 0, 80);
    color: white;
    border-color: #ff4d4d;
}

/* ===================================================
   [기본 설정] PC 환경 기준 댓글 입력창 & 리스트 스타일
   =================================================== */
.comment-box {
    width: 100%;
    box-sizing: border-box;
}

.comment-container {
    width: 100%;
    max-width: 600px; /* PC 기본 최대 가로 폭 */
    margin: 20px auto 0;
    box-sizing: border-box;
}

/* 댓글 입력 메인 박스 */
.comment-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* 방문자 정보 줄 (ID + 패스워드) */
.visitor-info-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    width: 100%;
}

#myVisitorIdDisplay {
    font-size: 13px;
    color: #ff4757;
    font-weight: bold;
    white-space: nowrap;
}

.visitor-info-row input[type="password"] {
    width: 140px;
    height: 32px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 부모 컨테이너 (그대로 유지) */
.input-main-row {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: flex-end; 
}

/* 1. 입력창 본체 스타일 */
#commentText {
    flex: 1;
    height: 50px;           /* 요구하신 창 높이 50px */
    min-height: 50px;
    max-height: 120px;
    
    /* [핵심] 두 줄 안내글 세로 정렬을 위한 패딩 계산 */
    /* 50px 창에서 글자 두 줄 크기(약 26px)를 뺀 나머지를 위아래로 균등 분배 */
    padding: 12px 12px;     
    
    font-size: 13px;
    line-height: 1.4;       /* 사용자가 글을 쓸 때의 줄간격 */
    border: 1px solid #bdf279;
    border-radius: 4px;
    box-sizing: border-box;
    resize: none;
    overflow-y: auto;
}

/* 2. placeholder(안내 글) 스타일 */
#commentText::placeholder {
    text-align: center;      /* 가로 가운데 정렬 */
    white-space: pre-line;   /* HTML의 엔터(줄바꿈) 반영 */
    line-height: 1.4;        /* 두 줄 사이의 간격을 적당히 주어 겹치지 않게 함 */
    color: #888;
}

/* 3. 댓글 등록 버튼 */
#commentBtn {
    width: 70px;
    height: 50px;            /* 입력창 높이가 50px이므로 버튼도 50px로 통일하면 깔끔합니다 */
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 댓글 리스트 출력 (PC 기준) --- */
#commentList {
    width: 100%;
    margin: 20px 0 0 0;
    padding: 0;
    border-top: 2px solid #203f00;
    background: rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
}

#commentList li {
    width: 100%;
    padding: 12px 8px;
    border-bottom: 1px solid rgb(190, 0, 90);
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#commentList li:not(:empty) {
    height: auto;
}

/* 방문자 식별 부모 (ID 영역 폭 자동 유연화) */
#commentList li strong {
    color: rgb(0, 0, 255);
    font-weight: bold;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 댓글 텍스트 내용 */
#commentList li span.txt-content {
    flex: 1;
    text-align: left;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    word-break: break-all;
    white-space: normal;
}

/* 개별 수정/삭제 버튼 그룹 */
.btn-group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-group button {
    background: #fff0f0;
    border: 1px solid #ffcccc;
    color: #ff4d4d;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
}

.btn-group button.edit-btn {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.btn-group button:hover {
    opacity: 0.8;
}

/* 빈 리스트(li)에 아주 연한 배경을 넣어 영역 표시 (선택 사항)
#commentList li:empty {
    background: #ffffff;
}
*/

/* 개별 삭제 버튼 */
.delete-btn {
	flex-shrink: 0; /* 버튼 크기 고정 */
    margin-right: 5px;  /* 오른쪽 끝에서 살짝 띄움 */
	margin-top: -5px;
	align-self: flex-start; /* 내용이 길어도 버튼은 위쪽에 고정 */
    background: #fff0f0;
    border: 1px solid #ffcccc;
    color: #ff4d4d;
    padding: 1px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

.delete-btn:hover {
    background: #ff4d4d;
    color: #fff;
}

/* 페이지네이션 스타일 */
.pagination {
    display: flex;
    justify-content: center;
    padding: 15px 0;
    gap: 5px;
}
.pagination button {
    padding: 5px 10px;
    border: 1px solid #ddd;
    background: #bcff79;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
}
.pagination button.active {
    background: #64c800;
    color: #5d2b8e;
    border-color: #64c800;
}

.copy{
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	height:70px;
	width:1000px;
	line-height:20px;
	font-size:11px;
	text-align:center;
	background-color: rgba(180, 180, 180, 0.8);
	z-index: 1;
}

.pang {
    margin-top: 0px;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    font-family: 'Arial', sans-serif;
    background: #f0f0f0;
    touch-action: none;
}

/* 게임 정보창도 1008px 영역 안에 들어오도록 수정 */
#game-info {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 20px; /* 높이 고정 */
    background: rgba(255, 255, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 100;
    border-bottom: 2px solid #ddd;
}

/* 게임 판: 1008px 고정 및 중앙 정렬 */
#game-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 10px;
   
    width: 1008px;       /* 요청하신 너비 */
    height: 90vh;        /* 푸터 공간을 위해 높이 조절 */

    margin: 20px auto;      /* 중앙 정렬 */
   
    padding-top: 80px; /* 정보창에 가려지지 않게 여백 추가 */
    padding: 60px 20px 20px 20px; /* 상단 정보창 공간 확보 */
    box-sizing: border-box;
    background: radial-gradient(circle, #fff, #ddd);
    position: relative;
}

/* 아이템 스타일은 그대로 유지 */
.item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    animation: drop 0.4s ease-out;
}

.item:active { transform: scale(0.8); }
.pop { transform: scale(1.5); opacity: 0; }

/* 결과 메시지 스타일 */
#result-message {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-align: center;
}

/* 오버레이 배경 애니메이션 (선택사항) */
#overlay {
    backdrop-filter: blur(10px); /* 배경 흐리게 */
    transition: all 0.5s;
}

@keyframes drop {
    0% { transform: translateY(-100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* 결과창도 게임 영역에 맞게 조정 */
#overlay {
    position: fixed;
    top: -10%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 50%;
    height: 60%;
    background: rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 100;
}

button {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    background: #ff4757;
    color: white;
    margin-top: 20px;
}



.network{
	margin-top: -100px;
	width: 1008px;
	height: 150vh;
	margin-left: auto;
	margin-right: auto;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.network::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	/* 배경 이미지 설정 */
    background-image: url("../images/ecosystem.png"); /* 경로 확인 필수 */
    background-repeat: no-repeat;  /* 이미지 반복 방지 */
    background-position: center;   /* 이미지 중앙 배치 */
    background-size: cover;        /* 요소 크기에 맞게 이미지 꽉 채우기 */
	opacity: 0.5;
	z-index: -1;
}

.network>h1{
	position: relative;
	z-index: 1;
}

.network>h1{
	display: block;
	width: 100%;
	color: rgb(190, 0, 90);
	font-size: 25px;
	line-height: 1.2;
	font-weight: bold;
	margin-top: -100px;
	margin-bottom: 5px;
}

.network>h2{
	display: block;
	width: 100%;
	color: rgb(0, 100, 0);
	font-size: 20px;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: 10px;
}


	/* 블로그 보드 메인 */
.blog-board {
    width: 600px;
	height: 700px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin: 0 auto 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
    box-sizing: border-box;
}

/* 프레임 설정 */
.blog-frame {
    width: 100%;
    height: 650px; /* 높이를 조금 더 키웠습니다 */
    overflow-y: auto;
    padding-right: 10px;
}

/* 스크롤바 디자인 */
.blog-frame::-webkit-scrollbar { width: 6px; }
.blog-frame::-webkit-scrollbar-thumb {
    background: #5d2b8e;
    border-radius: 10px;
}

.blog-item {
    display: block; /* 가로 배열에서 세로 배열 느낌으로 변경 */
    background: rgba(248, 249, 250, 0.2);
    margin-bottom: 12px;
    padding: 10px; /* 패딩을 늘려 클릭 영역 확대 */
    border-radius: 10px;
    color: #333;
    transition: 0.1s;
    border-left: 5px solid #5d2b8e; /* 왼쪽에 강조 선 추가 */
}

.blog-item:hover {
    transform: translateX(5px); /* 옆으로 살짝 밀리는 효과 */
    background: rgba(255, 255, 255, 0.5);
}

.blog-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ✨ 날짜 크기 키움 */
.blog-date {
    font-size: 14px; /* 날짜 폰트 확대 */
    color: #5d2b8e;
    font-weight: bold;
}

/* 제목 스타일 */
.blog-title {
    font-size: 16px; /* 제목 폰트 확대 */
    font-weight: bold;
    line-height: 1.4;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* 기본적으로 숨기되 !important를 제거하여 JS가 제어할 수 있게 합니다 */
.gcv-section {
    display: none;
}

/* 활성화 시 display를 부여합니다 
.section-active {
    display: flex !important; 
}
*/

/* active 클래스가 붙은 섹션만 표시 */
.gcv-section.section-active {
    display: flex !important;  
}


/* #Home 전용 레이아웃 조정 (필요 시) */
#Home.section-active {
    flex-direction: column;
}

/* 오버레이가 다른 화면을 침범하지 못하게 방어
#Panggame:not(.section-active) #overlay {
    display: none !important;
}*/

@media (max-width:800px) {

    .gcv-contents{
        font-size: 10px;
        margin-top: 0px;
        width: 100%;
        height: 200vh;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        overflow: hidden;
        padding: 0 20px;
    }

    .gcv-contents::before {
        content: "";
        position: absolute;
        top: -300px;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../images/digitalcurrency.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 30%;
        opacity: 0.8;
        z-index: -1;
    }

    .gcv-contents>h1, .gcv-contents>h2{
        position: relative;
        z-index: 1;
        width: 100%;
        word-break: keep-all;
    }
    .gcv-contents>h1{
        display: block;
        width: 100%;
        color: rgb(190, 0, 90);
        font-size: clamp(10px, 5vw, 25px);
        line-height: 1.2;
        font-weight: bold;
        margin-top: 70px;
        margin-bottom: 10px;
    }
    .gcv-contents>h2{
        display: block;
        width: 100%;
        color: rgb(0, 100, 0);
        font-size: clamp(10px, 5vw, 25px);
        line-height: 1.2;
        font-weight: bold;
        margin:0;
    }

    .comment-box {
        width: 100%;
        margin-top: -20px;
        box-sizing: border-box;
    }
    
    .comment-container {
        width: 100%;
        max-width: 400px;
        margin: 10px auto 0;
        box-sizing: border-box;
    }

    /* 위쪽 액션 버튼 */
    .actions {
        display: flex;
        justify-content: space-between;
        gap: 50px;
        margin-top: 30px;
        margin-bottom: 6px;
    }
    
    /* 두 버튼 공통 스타일 */
    #likeBtn, #clearAllBtn {
        flex: 1;
        height: 20px;
        font-size: 10px;
        padding: 0 10px;
        background: rgb(50, 50, 255);
        border: 1px solid #ddd;
        border-radius: 20px;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .actions button:active {
        transform: translateY(1px);
    }

    #likeBtn.active {
        background: rgb(255, 0, 80);
        border-color: #ffcdd2;
        color: white;
        box-shadow: 0 0 0 #ddd;
    }

    #clearAllBtn:hover {
        background: rgb(255, 0, 80);
        color: white;
        border-color: #ff4d4d;
    }

    /* ===================================================
       [수정 보완] 아이디 생성, 패스워드, 댓글 입력 최적화 파트
       =================================================== */
    .comment-input {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: -15px; /* 💡 레이아웃을 기존대비 위로 15px 상향 조정 */
        width: 100%;
        box-sizing: border-box;
    }

    /* 방문자 식별 ID 및 비밀번호 입력 가로 정렬 */
    .visitor-info-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    #myVisitorIdDisplay {
        font-size: 11px;
        color: #ff4757;
        font-weight: bold;
        white-space: nowrap;
		display: inline-block !important; /* 강제 표시 */
    }

    .visitor-info-row input[type="password"] {
        width: 100px;
        height: 28px; /* 터치 미스 방지 및 모바일 규격 확보 */
        padding: 4px 8px;
        font-size: 11px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
		margin-top: 20px;
    }
    
    /* 댓글창 + 등록버튼 가로 배정 */
    .input-main-row {
		margin-top: -20px;
        display: flex;
        gap: 6px;
        width: 100%;
        align-items: flex-end; /* 가변 확장 시 버튼 하단 대칭 고정 */
    }

    /* 댓글 입력 가변형 창 (기존 넓이 기준 약 1.5배 확대 및 높이 유연화) */
    .comment-input textarea {
        flex: 1;
        min-height: 32px;
        max-height: 80px;
        padding: 6px 10px;
        font-size: 11px;
        border: 1px solid #bdf279;
        border-radius: 4px;
        box-sizing: border-box;
        resize: none;
        line-height: 1.4;
        overflow-y: auto;
		color: #000; /* 글자색 검은색 고정 */
    }

    /* #commentText 아이디를 가진 textarea의 placeholder를 중앙 정렬 */
    #commentText::placeholder {
        text-align: center;
    }
    
    .comment-input button {
        width: 55px;
        height: 32px;
        background: #3b82f6;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
        font-weight: bold;
        flex-shrink: 0;
    }

    /* --- 댓글 출력 리스트 파트 --- */
    #commentList {
        width: 100%;
        margin: 10px 0 0 0;
        padding: 0;
        border-top: 2px solid #203f00;
        background: rgba(255, 255, 255, 0.2);
        box-sizing: border-box;
    }

    #commentList li {
        width: 100%;
        padding: 8px 6px;
        border-bottom: 1px solid rgb(190, 0, 90);
        min-height: 35px; 
		height: auto !important; /* 고정 높이 해제 */
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

	/* 💡 댓글 리스트의 [방문자 고유 ID] 영역 가시성 확보 */
    #commentList li strong {
        color: rgb(0, 0, 255) !important;
        font-weight: bold;
        font-size: 11px;
        flex-shrink: 0;
        width: auto; 
        white-space: nowrap;
        margin: 0; /* 마진 오버라이딩 리셋 */
    }

    /* 댓글 내 6자리 방문자 식별자 스타일 (너비 유연화) */
    #commentList li strong {
        color: rgb(0, 0, 255) !important;
        font-weight: bold;
        font-size: 11px;
        flex-shrink: 0;
        width: auto; /* 고정값 30px 해제하여 코드 잘림 방지 */
        white-space: nowrap;
		margin: 0; /* 마진 오버라이딩 리셋 */
    }

    /* 댓글 내용 노드 (줄바꿈 및 간격 최적화) */
    #commentList li span.txt-content {
        flex: 1;
        text-align: left;
        font-size: 11px;
        color: #222222 !important; /* 흐릿하지 않게 진한 색상 부여 */
        line-height: 1.4;
        word-break: break-all;
        white-space: normal;
        padding: 0 4px;
		margin: 0;
		display: inline-block;
    }

    /* 끝부분 개별 수정/삭제 버튼 그룹 */
    .btn-group {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
    }

    .btn-group button {
        background: #fff0f0;
        border: 1px solid #ffcccc;
        color: #ff4d4d;
        padding: 2px 5px;
        border-radius: 3px;
        cursor: pointer;
        font-size: 9px;
		height: auto; /* 불필요한 높이 제한 리셋 */
    }

    .btn-group button.edit-btn {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #16a34a;
    }

    /* 페이지네이션 스타일 */
    .pagination {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        gap: 5px;
    }
    .pagination button {
        padding: 5px 10px;
        border: 1px solid #ddd;
        background: #bcff79;
        cursor: pointer;
        border-radius: 3px;
        font-size: 9px;
    }
    .pagination button.active {
        background: #64c800;
        color: #5d2b8e;
        border-color: #64c800;
    }
	.copy{
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		height:70px;
		width:100%;
		line-height:20px;
		font-size:8px;
		text-align:center;
		background-color: rgba(180, 180, 180, 0.8);
		z-index: 1;
	}

	
	.pang {
		margin-top: 0px;
		overflow-x: hidden; /* 가로 스크롤 방지 */
		font-family: 'Arial', sans-serif;
		background: #f0f0f0;
		touch-action: none;
	}

	/* 게임 정보창도  영역 안에 들어오도록 수정 */
	#game-info {
		position: fixed;
		top: 40px;
		left: 50%;
		transform: translateX(-50%);
		width: 200px;
		height: 20px; /* 높이 고정 */
		background: rgba(255, 255, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		z-index: 100;
		border-bottom: 2px solid #ddd;
	}

	/* 게임 판:  고정 및 중앙 정렬 */
	#game-container {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(7, 1fr);
		gap: 5px;
		
		width: 100%;       /* 요청하신 너비 */
		height: 70vh;        /* 푸터 공간을 위해 높이 조절 */

		margin: 40px auto;      /* 중앙 정렬 */
		
		padding-top: 80px; /* 정보창에 가려지지 않게 여백 추가 */
		padding: 50px 10px 10px 10px; /* 상단 정보창 공간 확보 */
		box-sizing: border-box;
		background: radial-gradient(circle, #fff, #ddd);
		position: relative;
	}
	 /* 과일 아이템 크기 50% 축소 */
    .item {
        font-size: 1.2rem !important; /* 기존 2.5rem에서 약 50% 축소 */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 그림자도 가볍게 */
    }

	/* 결과창도 게임 영역에 맞게 조정 */
	#overlay {
		position: fixed;
		top: 10%;
		left: 50%;
		transform: translate(-50%, 50%);
		width: 65%;
		height: auto;
		background: rgba(0,0,0,0.1);
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: white;
		z-index: 100;
	}

	button {
		padding: 5px 10px;
		font-size: 14px;
		cursor: pointer;
		border-radius: 5px;
		border: none;
		background: #ff4757;
		color: white;
		margin-top: 20px;
	}


	.network{
		margin-top: -220px;
		width: 100%;
		height: 160vh;
		margin-left: auto;
		margin-right: auto;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: relative;
		overflow: hidden;
		padding: 0 20px;
	}

	.network::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		/* 배경 이미지 설정 */
		background-image: url("../images/ecosystem.png"); /* 경로 확인 필수 */
		background-repeat: no-repeat;  /* 이미지 반복 방지 */
		background-position: center;   /* 이미지 중앙 배치 */
		background-size: cover;        /* 요소 크기에 맞게 이미지 꽉 채우기 */
		opacity: 0.5;
		z-index: -1;
	}

	.network>h1, .network>h2{
		position: relative;
		z-index: 1;
		width: 100%;
		word-break: keep-all;
	}

	.network>h1{
		display: block;
		width: 100%;
		color: rgb(190, 0, 90);
		font-size: clamp(12px, 4vw, 20px);
		line-height: 1.2;
		font-weight: bold;
		margin-top: 50px;
		margin-bottom: 5px;
	}

	.network>h2{
		display: block;
		width: 100%;
		color: rgb(0, 100, 0);
		font-size: clamp(12px, 3vw, 20px);
		line-height: 1.2;
		font-weight: bold;
		margin:0px;
	}

	.blog-board {
		width: 100%;
		padding: 2px 2px;
		margin-top: 10px;
	}
    .blog-frame { height: 650px; }

    .blog-date {
        font-size: 8px; /* 모바일에서도 기존보다 크게 유지 */
    }
    .blog-title {
        font-size: 10px; /* 모바일 제목 크기 조정 */
    }
	.blog-item {
		height: 70px;
		overflow: hidden; /* 영역 밖으로 나가는 콘텐츠 숨김 */
	}
	.blog-item:hover {
		transform: translateX(5px); /* 옆으로 살짝 밀리는 효과 */
		background: rgba(255, 255, 255, 0.5);
	}

	/* 모든 섹션은 기본적으로 숨김 */
	.gcv-section {
		display: none !important;
	}

	/* active 클래스가 붙은 섹션만 표시 */
	.gcv-section.section-active {
		display: flex !important; /* Home과 Panggame이 flex를 사용하므로 flex 권장 */
	}

	/* #Home 전용 레이아웃 조정 (필요 시) */
	#Home.section-active {
		flex-direction: column;
	}

	/* 오버레이가 다른 화면을 침범하지 못하게 방어
	#Panggame:not(.section-active) #overlay {
		display: none !important;
	}*/


}


/* 하단 네비게이션 바 설정 */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1000px;
	height: 50px; /* 아이콘과 텍스트 공간 확보를 위해 살짝 높임 */
	background-color: rgb(60, 60, 245);
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	z-index: 100;
}

/* 1. 기본 상태: 아무런 액션이 없을 때 */
.nav-item {
	color: #ffd700;                  /* 기본 금색 유지 */
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	font-size: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}


/* [중요] 아이콘을 감싸는 박스의 테두리를 제거합니다 */
.icon {
	width: 24px;            /* 아이콘 크기 적절히 조절 */
	height: 24px;           /* 아이콘 크기 적절히 조절 */
	margin-bottom: 2px;
	position: relative;

	/* 사각형 모양을 사라지게 하는 핵심 코드 */
	border: none;           /* 기존의 2px solid currentColor 삭제 */
	background: none;       /* 배경색이 있다면 제거 */
	display: flex;          /* 내부 이미지를 중앙 정렬하기 위함 */
	justify-content: center;
	align-items: center;
}

/* 이미지(아이콘) 자체의 스타일 */
.icon img {
  width: 100%;            /* 부모(.icon) 너비에 맞춤 */
  height: 100%;           /* 부모(.icon) 높이에 맞춤 */
  object-fit: contain;    /* 이미지 비율을 유지하며 박스 안에 맞춤 */
  display: block;         /* 하단 여백 제거 */
}

/* 2. 마우스오버 시 (PC 전용) */
@media (hover: hover) {
	.nav-item:hover {
    color: rgb(0, 255, 0);         /* 마우스 올리면 초록색 */
    transform: translateY(-3px);
	}
	.nav-item:hover .home-icon img {
    /* 이미지를 content로 교체하는 경우 필터보다 이미지 자체가 바뀌므로 깔끔합니다 */
    content: url("../images/icon/icon11.png");
    transform: scale(1.1);
	}
	.nav-item:hover .my-icon img {
    /* 이미지를 content로 교체하는 경우 필터보다 이미지 자체가 바뀌므로 깔끔합니다 */
    content: url("../images/icon/icon88.png");
    transform: scale(1.1);
	}
	.nav-item:hover .settings-icon img {
    /* 이미지를 content로 교체하는 경우 필터보다 이미지 자체가 바뀌므로 깔끔합니다 */
    content: url("../images/icon/icon99.png");
    transform: scale(1.1);
	}
}

/* 3. 클릭 및 터치 중인 상태 (꾹 누르고 있을 때) */
.nav-item:active {
  color: rgb(0, 255, 0);           /* 클릭/터치 시 초록색 */
	transform: scale(0.95);
	opacity: 0.8;
}
.nav-item:active .home-icon img {
	content: url("../images/icon/icon11.png");
}
.nav-item:active .my-icon img {
	content: url("../images/icon/icon88.png");
}
.nav-item:active .settings-icon img {
	content: url("../images/icon/icon99.png");
}