:root {
    --primary-color: #3c77ff;
    --secondary-color: #3cfff3;
    --bg-color-main: #012a49;
    --bg-color-accent: #011529;
    --text-color: #f0f0ff;
    --text-color-light: #c0c0e0;
    --font-family: 'Urbanist', sans-serif;
    --card-radius: 0.5rem;
    --card-shadow: 0 0 15px rgba(167, 60, 255, 0.4);
    --section-padding: 2rem 0.5rem;
    --max-width: 1260px;
}

@keyframes neon-glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 40px var(--primary-color), 0 0 80px var(--primary-color);
    }

    50% {
        box-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 30px var(--primary-color), 0 0 60px var(--primary-color);
    }
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-color-main);
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--text-color);
    background: radial-gradient(circle at 10% 20%, var(--bg-color-main) 0%, var(--bg-color-accent) 100%);
    line-height: 1.7;
    font-size: 18px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: var(--text-color);
    padding: 8px;
    z-index: 1000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

header {
    padding: 2rem 0;
    text-align: center;
    background: var(--bg-color-main);
    border-bottom: 2px solid var(--primary-color);
}

header h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--secondary-color);
    text-shadow: 0 0 8px var(--primary-color);
    animation: neon-glow 1.5s infinite alternate;
}

header a {
    text-decoration: none;
    color: inherit;
}

nav {
    background: var(--bg-color-accent);
    position: sticky;
    top: 0;
    z-index: 900;
    border-bottom: 1px solid var(--primary-color);
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.nav-list a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    border: 2px solid transparent;
    transition: all 0.3s;
    text-transform: uppercase;
}

.nav-style-outline a {
    border-color: var(--primary-color);
    border-radius: 8px;
    margin: 0.5rem;
}

.nav-style-outline a:hover, .nav-style-outline a.active {
    background: rgba(167, 60, 255, 0.2);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    animation: neon-glow 1s infinite alternate;
}

/* 배너 그리드 컨테이너 */
.banner-grid {
    display: grid;
    /* 모바일 기본값: 1줄에 1개 */
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    padding: 2rem 1rem; 
    
    /* 중앙 정렬을 위한 설정 */
    /* max-width: 1600px; */ /* 너무 넓게 퍼지지 않도록 최대 너비 제한 */
    /* margin: 0 auto; */    /* 좌우 여백 자동(중앙 정렬) */
    width: 100%;       /* 부모 컨테이너 너비에 맞춤 */
    box-sizing: border-box;
    background: var(--bg-color-accent);
}

/* 태블릿 (화면 너비 600px 이상): 1줄에 2개 */
@media (min-width: 600px) {
    .banner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PC/데스크탑 (화면 너비 1024px 이상): 1줄에 4개 (요청하신 부분) */
@media (min-width: 1024px) {
    .banner-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 배너 아이템 스타일 (기존 유지 및 보완) */
.banner-grid a {
    display: block;
    width: 100%;
    border-radius: var(--card-radius, 8px); /* 변수 없으면 8px 기본값 */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 그림자 살짝 부드럽게 조정 */
    transition: transform 0.3s ease;
}

.banner-grid img {
    display: block;
    width: 100%;
    height: 100%;  /* 높이 고정 */
    max-height: 180px;
    object-fit: contain; /* 비율 유지하며 꽉 채우기 */
}

.banner-grid a:hover { 
    transform: translateY(-5px); 
}

main {
    padding: var(--section-padding) 0;
}

section {
    padding: var(--section-padding) 0;
    border-bottom: 1px dashed var(--primary-color);
}

section h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 2rem;
    border-left: 5px solid var(--primary-color);
    padding-left: 1rem;
}

p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

a {
    color: var(--secondary-color);
    text-decoration: none;
    /* border-bottom: 1px dotted var(--secondary-color); */
    transition: color 0.3s;
}

a:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.card {
    background: var(--bg-color-accent);
    padding: 1.5rem;
    border-radius: var(--card-radius);
    margin-bottom: 2rem;
    box-shadow: var(--card-shadow);
}

.toc-card h3 {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 1rem;
}

.toc-list {
    list-style: none;
    padding: 0;
}

.toc-list li a {
    display: block;
    padding: 10px;
    border-left: 4px solid var(--primary-color);
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    transition: background 0.3s, border-left-color 0.3s;
}

.toc-list li a:hover {
    background: rgba(167, 60, 255, 0.2);
    border-left-color: var(--secondary-color);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 1.5rem 0;
}

.tag-cloud span {
    display: inline-block;
    padding: 5px 12px;
    /* font-size: 0.9rem; */
    font-weight: 500;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
    transition: background 0.3s, color 0.3s;
    cursor: pointer;
}

.tag-cloud span:hover {
    background: var(--primary-color);
    color: var(--bg-color-main);
    border-bottom-color: var(--secondary-color);
}

.accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 15px 0;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.1rem;
    cursor: pointer;
    outline: none;
    transition: color 0.3s;
    position: relative;
}

.accordion-button::after {
    content: '+';
    position: absolute;
    right: 10px;
    transition: transform 0.3s;
}

.accordion-button[aria-expanded="true"] {
    color: var(--primary-color);
}

.accordion-button[aria-expanded="true"]::after {
    content: '-';
    transform: rotate(180deg);
}

.accordion-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-out; 
    background: rgba(255,255,255,0.02);
}
.accordion-content.active { 
    /* 자바스크립트에서 height 계산해서 넣음 */
}
.accordion-button.active {
    color: var(--primary-color);
    font-weight: bold;
}
.accordion-button.active::after {
    transform: rotate(180deg);
}

.accordion-content p {
    padding-top: 10px;
    font-size: 1rem;
    color: var(--text-color-light);
}

.checklist {
    list-style: none;
    padding-left: 0;
}

.checklist li {
    background: var(--bg-color-accent);
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 8px;
    border-left: 5px solid var(--secondary-color);
}

.checklist li::before {
    content: '✅';
    margin-right: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    /* background: var(--bg-color-accent); */
    /* border-radius: var(--card-radius); */
    overflow: hidden;
    /* box-shadow: var(--card-shadow); */
}

th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

th {
    background: var(--primary-color);
    color: var(--bg-color-main);
    font-weight: 700;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    color: var(--bg-color-main);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 50px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 950;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

footer {
    background: var(--bg-color-accent);
    padding: 3rem 0;
    text-align: center;
    border-top: 2px solid var(--primary-color);
}

footer p, footer a {
    color: var(--text-color-light);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

footer a {
    margin: 0 10px;
}

/* 관리자 모드 스타일 */
.admin-panel { background: #f0f0f0; color: #333; padding: 20px; border-bottom: 2px solid #333; position:relative; z-index:9999; text-align:left; font-size:16px; font-family: sans-serif; }
.admin-group { background: #fff; padding: 15px; margin-bottom: 15px; border-radius: 8px; border: 1px solid #ccc; }
.admin-group h3 { margin-top:0; border-bottom:1px solid #eee; padding-bottom:10px; color:#444; }
.admin-label { display: block; font-weight: bold; margin: 10px 0 5px; color:#555; font-size:14px; }
.admin-input, .admin-textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.save-btn { background: #a73cff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1.1rem; }
.logout-btn { float:right; background:#666; color:white; padding:5px 10px; text-decoration:none; border-radius:4px; font-size:14px; }
.admin-table-edit { width: 100%; border-collapse: collapse; }
.admin-table-edit th { background: #eee; text-align: center; padding: 5px; border: 1px solid #ccc; font-size: 0.9rem; }
.admin-table-edit td { padding: 5px; border: 1px solid #ccc; vertical-align: top; }
.admin-table-edit input[type="text"] { width: 100%; box-sizing: border-box; padding: 5px; border: 1px solid #ddd; }
.admin-table-edit .row-head { font-weight: bold; background: #f9f9f9; }
.add-faq-btn { background: #28a745; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-top:10px; }
.del-faq-btn { background: #dc3545; color: white; border: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; float:right; font-size:0.8rem; }