/* ============================================================
   안내소(guide) 페이지 - 네모 박스 + 흰 글자 네온, 한 줄 일렬 배치
   히어로 배너 "지룡자 게임최적화"와 동일한 청록 네온 펄스
   ============================================================ */

/* 흰 글자 네온 펄스 (박스별 색은 --gA/--gB 변수로 주입, 기본=청록) */
@keyframes guideTextNeon {
    0%, 100% {
        text-shadow:
            0 0 6px var(--gA, #44ffd0),
            0 0 14px var(--gB, #16c79a),
            0 0 26px var(--gB, #16c79a);
    }
    50% {
        text-shadow:
            0 0 10px var(--gA, #7dffe6),
            0 0 22px var(--gA, #44ffd0),
            0 0 44px var(--gB, #16c79a),
            0 0 70px var(--gB, #16c79a);
    }
}

/* 세 버튼을 한 줄 가로 일렬로 (grid_xx 덮어쓰기) */
.guide-neon-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    gap: 10px;
}

.guide-neon-row *,
.guide-neon-row {
    box-sizing: border-box;
}

/* 각 아이템: 균등 너비, 기본 패딩 제거 */
.guide-neon-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 !important;
}

/* 링크가 박스 전체를 채우도록 */
.guide-neon-link {
    display: block;
    height: 100%;
}

/* 글자+아이콘 네모 박스 */
.guide-neon-link .flex_yc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #0d1822; /* 팔레트 미적용 시 기본값 */
    border: 1px solid rgba(68, 255, 208, .35);
    border-radius: 0;
    padding: 14px 12px;
    box-shadow:
        0 0 8px rgba(22, 199, 154, .25),
        inset 0 0 12px rgba(22, 199, 154, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* ============================================================
   [박스별 네온색] 1번 틸 / 2번 블루 / 3번 퍼플
   배경·테두리·박스그림자·글자네온을 박스마다 한 세트로 맞춤.
   색 바꾸려면 각 블록의 background / border-color / box-shadow /
   --gA(밝은 글로우) / --gB(코어 글로우)만 교체하세요.
   ============================================================ */
.guide-neon-row > .guide-neon-item:nth-child(1) .flex_yc {
    background: linear-gradient(135deg, #06231f, #0a1626);
    border-color: rgba(68, 255, 208, .45);
    box-shadow: 0 0 8px rgba(22, 199, 154, .30), inset 0 0 12px rgba(22, 199, 154, .14);
}
.guide-neon-row > .guide-neon-item:nth-child(1) .guide-neon-text {
    --gA: #7dffe6;
    --gB: #16c79a;
}

.guide-neon-row > .guide-neon-item:nth-child(2) .flex_yc {
    background: linear-gradient(135deg, #0a1430, #0d0a22);
    border-color: rgba(96, 165, 250, .45);
    box-shadow: 0 0 8px rgba(46, 139, 250, .30), inset 0 0 12px rgba(46, 139, 250, .14);
}
.guide-neon-row > .guide-neon-item:nth-child(2) .guide-neon-text {
    --gA: #9fd0ff;
    --gB: #2e8bff;
}

.guide-neon-row > .guide-neon-item:nth-child(3) .flex_yc {
    background: linear-gradient(135deg, #160a26, #0d0a1e);
    border-color: rgba(190, 150, 255, .45);
    box-shadow: 0 0 8px rgba(168, 85, 247, .30), inset 0 0 12px rgba(168, 85, 247, .14);
}
.guide-neon-row > .guide-neon-item:nth-child(3) .guide-neon-text {
    --gA: #e3c8ff;
    --gB: #a855f7;
}

/* 흰 글자 + 청록 네온, 2배 크기 */
.guide-neon-link .guide-neon-text {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 2em;
    line-height: 1.2;
    white-space: nowrap;
    animation: guideTextNeon 2.0s ease-in-out infinite;
}


/* 마우스 오버 시 살짝 확대 + 글로우 강화 */
.guide-neon-link:hover .flex_yc {
    transform: scale(1.03);
    box-shadow:
        0 0 16px rgba(68, 255, 208, .45),
        inset 0 0 16px rgba(22, 199, 154, .2);
}

/* 태블릿: 한 줄 유지하되 글자 축소 */
@media (max-width: 1000px) {
    .guide-neon-link .guide-neon-text { font-size: 1.4em; }
    .guide-neon-link .flex_yc { padding: 12px 8px; }
}

/* 모바일: 가로 한 줄이 안 들어가므로 예전처럼 세로로 쌓기 */
@media (max-width: 780px) {
    .guide-neon-row {
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .guide-neon-row > .guide-neon-item {
        flex: 0 0 auto !important;
        width: 100%;
    }
    .guide-neon-link .guide-neon-text { font-size: 1.5em; letter-spacing: 0; }
    .guide-neon-link .flex_yc { padding: 13px 10px; }
}