/* style.css - 원본 UI 복원 버전 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
    --primary-color: #2B6CB0;
    --text-dark: #1A202C;
    --text-gray: #4A5568;
    --bg-light: #F7FAFC;
    --green-bg: #34b400; /* 원본의 녹색 박스 색상 */
    --green-border: #206f00; /* 원본의 녹색 테두리 색상 */
    --content-width: 1140px; /* Elementor 기본 폭 */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-gray);
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; padding: 0; color: var(--text-dark); line-height: 1.2; }

/* --- 레이아웃 공통 --- */
.site-container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 60px 0; /* Elementor 섹션 여백 시뮬레이션 */
}

/* --- 헤더 스타일 (PC 기준) --- */
.site-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.site-branding img { width: 50px; }
.site-title { font-size: 20px; font-weight: 700; color: var(--text-dark); margin: 0; }

.main-navigation > ul {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation > ul > li {
    position: relative; /* 드롭다운 위치 기준점 */
}

.main-navigation > ul > li > a {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    padding: 20px 0; /* 호버 영역 확보 */
    display: block;
    text-decoration: none;
}

.main-navigation > ul > li > a:hover {
    color: var(--primary-color);
}

.menu-toggle { display: none; background:none; border:none; font-size:24px; cursor:pointer; color:#333; }

/* --- 드롭다운 메뉴 핵심 스타일 --- */
.dropdown-menu {
    position: absolute;
    top: 100%; /* 메뉴 바로 아래 위치 */
    left: -20px; /* 약간 왼쪽으로 정렬 */
    background: #fff;
    min-width: 180px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 10px 0;
    
    /* 숨김 처리 (기본 상태) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* 아래에서 위로 올라오는 효과 */
    transition: all 0.3s ease;
    z-index: 9999; /* 다른 요소보다 위에 표시 */
    display: block; /* display는 block으로 유지하되 시각적으로 숨김 */
}

/* 마우스 오버 시 나타나기 */
.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 드롭다운 항목 스타일 */
.dropdown-menu li {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.dropdown-menu li a:hover {
    background-color: #f7f7f7;
    color: var(--primary-color);
}


/* --- 메인 타이틀 영역 --- */
.hero-title {
    font-family: "Playfair Display", serif; /* 원본 폰트 */
    font-size: 40px;
    font-weight: 800;
    color: #101010;
    margin-bottom: 20px;
}
.hero-subtitle {
    font-size: 25px;
    color: #265f00;
    font-weight: 700;
    margin-bottom: 20px;
}
.hero-desc p {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin: 5px 0;
}

/* --- 녹색 박스 (Feature Cards) --- */
/* 원본 코드: .elementor-element-371b665 { background-color: #34b400; ... } */
.feature-card {
    background-color: var(--green-bg);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}
.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}
.feature-card p {
    font-size: 18px; /* 원본 사이즈 반영 */
    font-weight: 700;
    color: #042500;
    margin: 0;
}

/* --- 게임 링크 박스 (Game Cards) --- */
/* 원본 코드: border-color: #206f00; border-style: solid; */
.game-card {
    border: 2px solid var(--green-border);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    background: #fff;
    transition: transform 0.3s;
}
.game-card:hover { transform: translateY(-5px); }
.game-card img { border-radius: 15px; margin-bottom: 15px; width: 100%; }
.game-card h3 { font-size: 18px; font-weight: bold; }

/* --- Grid 시스템 --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .site-header-row { height: 60px; }
    .main-navigation { display: none; } /* 모바일 메뉴 숨김 */
}

/* --- 게시판 (Table) --- */
.board-section h3 {
    margin-bottom: 15px;
    font-size: 20px;
}

/* --- [추가/수정] 게시판 버튼 스타일 --- */
.btn-wrap { display: inline-flex; gap: 5px; }
.btn-common {
    display: inline-block;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    border: none;
    line-height: 1.4;
    transition: 0.2s;
}
.btn-list { background: #555; color: #fff; } /* 목록 (회색) */
.btn-list:hover { background: #333; }

.btn-write { background: var(--primary-color); color: #fff; } /* 글쓰기 (파랑) */
.btn-write:hover { background: #1a4a7c; }

.btn-delete { background: #e53e3e; color: #fff; } /* 삭제 (빨강) */
.btn-delete:hover { background: #c53030; }

.btn-edit { background: #3182ce; color: #fff; } /* 수정 (파랑) */
.btn-edit:hover { background: #2b6cb0; }

/* --- [추가] 페이징(Pagination) 스타일 --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; /* 박스 사이 간격 */
    margin-top: 40px;
    margin-bottom: 20px;
}

.page-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 36px; /* 박스 최소 너비 */
    height: 36px;    /* 박스 높이 (정사각형 느낌) */
    padding: 0 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px; /* 살짝 둥근 모서리 */
    transition: all 0.2s;
    box-sizing: border-box;
}

.page-link:hover {
    background-color: #f1f1f1;
    border-color: #bbb;
    color: #000;
}

/* 활성화된 페이지 (현재 페이지) */
.page-link.active {
    background-color: var(--primary-color, #2B6CB0); /* 메인 컬러 적용 */
    color: #fff;
    border-color: var(--primary-color, #2B6CB0);
    font-weight: bold;
    pointer-events: none; /* 클릭 방지 */
}

.post-view-box {border:1px solid #ddd; border-top:2px solid #333;background:#ffffff;}
.post-header {padding:20px; border-bottom:1px solid #eee;}
.post-meta {color:#888; font-size:14px;}
.post-content {padding:30px; min-height:300px; font-size:16px; line-height:1.6;}
.post-footer {display: flex;padding:15px;border-top:1px solid #eee;text-align:right;justify-content: space-between;}
/* --- [추가] 이전글/다음글 스타일 --- */
.post-nav {
    margin-top: 40px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
}
.post-nav-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}
.post-nav-item:last-child { border-bottom: none; }
.nav-label {
    font-weight: bold;
    color: #555;
    width: 80px;
    flex-shrink: 0;
    font-size: 14px;
}
.nav-title {
    color: #333;
    font-size: 14px;
    text-decoration: none;
}
.nav-title:hover { color: var(--primary-color); text-decoration: underline; }
.nav-none { color: #aaa; font-size: 14px; }

.kboard-table { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; }
.kboard-table td {
    padding: 12px 5px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
}
.kboard-title { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 75%;
}
.kboard-date { width: 25%; text-align: right; color: #888; font-size: 13px; }

/* --- FAQ 아코디언 --- */
.faq-details {
    background: #fff;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}
.faq-summary {
    padding: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after { content: '+'; position: absolute; right: 15px; font-weight: bold; color: var(--primary-color); }
.faq-details[open] .faq-summary::after { content: '-'; }
.faq-content { padding: 0 15px 15px; color: #666; font-size: 15px; }

/* --- 특별함 섹션 (White Box) --- */
.special-card {
    text-align: left; /* 원본: text_left */
    background: #fff;
    padding: 20px;
    border-radius: 10px; /* 원본 느낌 */
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.special-card img { width: 60px; height: 60px; }
.special-card h3 { font-size: 16px; margin-bottom: 5px; color: var(--primary-color); }
.special-card p { font-size: 14px; color: #555; margin: 0; line-height: 1.4; }

/* --- 파이 차트 (도넛 모양) --- */
.chart-wrap { text-align: center; }
.donut-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 15px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 그라데이션으로 도넛 차트 흉내 */
    background: conic-gradient(var(--chart-color) 0% 100%, #eee 0% 100%); 
}
/* 도넛 구멍 */
.donut-chart::after {
    content: attr(data-percent);
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 24px;
    color: var(--text-dark);
}
.chart-label { font-weight: bold; font-size: 18px; margin-top: 10px; color: var(--text-dark); }

/* --- Page 1 전용 스타일 (컬러 박스) --- */
.colored-card {
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    color: #fff;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.3s;
}
.colored-card:hover { transform: translateY(-5px); }
.colored-card img {width: 80px;margin: 0 auto 20px;/* filter: brightness(0) invert(1); */} /* 아이콘 흰색 처리 */
.colored-card h3 { font-size: 20px; color: #fff; margin-bottom: 10px; }
.colored-card p { font-size: 15px; color: rgba(255,255,255,0.9); }

.bg-blue { background-color: #2575fc; }
.bg-purple { background-color: #6a11cb; }
.bg-green { background-color: #06b37c; }
.bg-lime { background-color: #58b306; }

/* --- Page 2 전용 스타일 (텍스트+이미지 섹션) --- */
.content-box {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.text-highlight {
    border-left: 5px solid linear-gradient(to bottom, #ff512f, #dd2476); /* 원본 그라디언트 흉내 */
    border-left: 5px solid #ff512f;
    padding-left: 20px;
}

/* FAQ 스타일 (Page 2) */
.faq-list .faq-item { margin-bottom: 15px; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.faq-item h3 { font-size: 18px; color: var(--primary-color); margin-bottom: 5px; }
.faq-item p { margin: 0; color: #666; }

/* =========================================
   [고객센터(CS) 섹션 스타일] 
   ========================================= */
.cs-section-wrap {
    background-color: #f9f9f9;
    padding: 30px 0;
    border-top: 1px solid #eee;
    margin-top: 60px; /* 본문과 간격 */
}

.cs-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    flex-wrap: wrap; /* 모바일 대응 */
    gap: 20px;
}

.cs-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cs-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.cs-text h3 {
    font-size: 20px;
    margin: 0 0 5px 0;
    color: #333;
}

.cs-text p {
    margin: 0;
    color: #666;
    font-size: 15px;
}

.btn-cs {
    background-color: #25d366; /* 상담 버튼색 (예: 텔레그램/카톡 느낌) */
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}

.btn-cs:hover {
    background-color: #1ebc57;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(37, 211, 102, 0.3);
}

.cta-box {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    margin-top: 50px;
}
.btn-start {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    margin-top: 20px;
}
.site-footer {
    text-align: center;
    padding: 40px 0;
    color: #888;
    background: #fff;
    margin-top: 60px;
    border-top: 1px solid #eee;
}

/* =========================================
   [상단 이동 버튼(Top Button) 스타일] 
   ========================================= */
#btn-top {
    display: none; /* 기본적으로 숨김 (스크롤 시 등장) */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    line-height: 1;
    text-align: center;
    padding: 0;
}

#btn-top:hover {
    background-color: #1a4a7c;
    transform: translateY(-5px);
}

/* =========================================
   [모바일 반응형 메뉴 스타일
   ========================================= */

@media screen and (max-width: 768px) {
    .cs-box {
        flex-direction: column;
        text-align: center;
    }
    .cs-left {
        flex-direction: column;
    }

    #btn-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .site-header-row {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 60px;
        position: relative;
        padding-bottom: 0;
    }

    .menu-toggle {
        display: block !important;
        position: absolute;
        right: 0;
        top: 15px;
        background: none;
        border: none;
        font-size: 26px;
        cursor: pointer;
        color: #333;
        z-index: 1001;
    }
    .main-navigation {
        width: 100%;
        display: none;
        margin-top: 10px;
        border-top: 1px solid #eee;
        background-color: #fff;
    }
    .main-navigation.toggled {
        display: block !important;
        animation: slideDown 0.3s ease-out;
    }
    .main-navigation ul {
        flex-direction: column;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .main-navigation ul li {
        margin: 0;
        border-bottom: 1px solid #f1f1f1;
        width: 100%;
    }

    .main-navigation ul li a {
        display: block;
        padding: 15px 0;
        font-size: 16px;
    }
    .has-dropdown .dropdown-menu {
        position: static;
        box-shadow: none;
        background: #f9f9f9;
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100%;
        padding: 0;
    }
    
    .dropdown-menu li a {
        padding: 12px 0;
        font-size: 14px;
        color: #666;
        border-bottom: 1px solid #eee;
    }
    .grid-2, .grid-3, .grid-4 { 
        grid-template-columns: 1fr !important; 
    }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}