/* ==========================================================================
   디지털 교육 연수 — 공통 스타일
   모든 페이지(index / guide / learning)가 이 파일 하나를 공유합니다.
   ========================================================================== */

/* --- 기본 타이포그래피 ---------------------------------------------------- */
body {
    font-family: 'Pretendard', sans-serif;
    min-height: 100dvh;
    position: relative;
    line-height: 1.6;
    word-break: keep-all;
    letter-spacing: -0.01em;
}

h1, h2, h3 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    word-break: keep-all;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* --- 스크롤바 ------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* --- 글래스모피즘 --------------------------------------------------------- */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- 그라디언트 텍스트 ---------------------------------------------------- */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(135deg, #56642b 0%, #8a9a5b 100%);
}

/* --- 애니메이션 ----------------------------------------------------------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 등장 애니메이션 지연 (.animate-slide-up 과 함께 사용) */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* 배경 블롭 애니메이션 지연 (.animate-blob 과 함께 사용) */
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* --- hidden 속성 우선 ------------------------------------------------------ */
/* Tailwind 의 display 유틸리티(flex, grid 등)가 브라우저 기본 [hidden] 규칙을
   덮어써서, el.hidden = true 로 숨겨도 그대로 보이는 문제를 막습니다. */
[hidden] { display: none !important; }

/* --- 접근성: 본문으로 건너뛰기 -------------------------------------------- */
/* 평소에는 화면 밖에 숨어 있다가 Tab 키를 처음 누르면 나타납니다. */
.skip-link {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: 100;
    padding: 0.75rem 1.5rem;
    background: #56642b;
    color: #ffffff;
    border-radius: 0 0 1rem 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
}

/* --- 접근성: 모션 최소화 설정 존중 ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}