/*    PWA - 8    */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%; /* 또는 100vh */
    margin: 0;
    padding: 0;
}

/* CSS 부분 */
.top-text {
    font-family: "Libre Baskerville", serif;
    font-style: italic; /* 이 폰트는 이탤릭체(기울임)가 특히 예뻐요! */
    font-size: 2rem;   /* 크기는 취향에 맞게 조절하세요 */
    margin-left: 8px;    /* 아이콘과의 간격 */
    color: #f1f1f1;      /* 배경에 잘 보이도록 색상 지정 */
}

/* 헤더 스타일 */
.header {
  display: flex; 
  align-items: center;      /* 상하 중앙 정렬 */
  justify-content: center;  /* 좌우 중앙 정렬 (이게 핵심입니다!) */
  
  padding: 10px;
  background-color: #f0f0f0;
  width: 100vw;             /* % 대신 vw(화면 전체 폭)를 써보세요 */
  box-sizing: border-box;
}
  
body {
  background-image: url('../images/main-bg-1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: 'Noto Sans KR', Arial, sans-serif;
  transition: background-image 1s ease-in-out; /* 부드러운 전환 */
}

login.body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;


/* 로그인 페이지 전체 배경에 이미지 적용 */
body {
    background-image: url('../images/login-bg-1.webp'); /* 이미지 파일 경로 지정 */
    background-size: cover;          /* 배경 이미지가 요소 전체를 덮도록 설정 */
    background-position: center;     /* 배경 이미지 중앙 정렬 */
    background-repeat: no-repeat;    /* 배경 이미지 반복 안 함 */
    background-color: #f6f5f7;      /* 이미지를 불러오지 못했을 때 표시될 배경색 */
}

/* 또는 특정 로그인 폼 컨테이너에 이미지 적용 */
.login-container {
    background-image: url('../images/login-bg-1.png');
    background-size: cover;
    background-position: center;
    /* 다른 스타일 (너비, 높이, 패딩 등) 추가 */
}


    body { 
        font-family: 'Noto Sans KR', sans-serif; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        height: 100vh; 
        margin: 0; 
        
        /* 배경 이미지 */
        background-image: url('../images/main-bg-1.webp'); 
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .logo {
        width: 120px; /* 로고 크기 조절 */
        margin-bottom: 20px;
    }

    h1 {
        color: #333;
        margin-bottom: 30px;
        text-shadow: 1px 1px 2px white; /* 배경 위에서 글씨가 잘 보이게 */
    }

    .login-btn { 
        width: 280px; 
        padding: 15px; 
        margin: 10px; 
        border: none; 
        border-radius: 8px; /* 조금 더 부드럽게 */
        cursor: pointer; 
        font-weight: bold; 
        font-size: 16px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 입체감 추가 */
    }

    /* 버튼 색상이 안 보였던 이유: 클래스명 오타 수정 */
    .kakao { background-color: #FEE500 !important; color: #3c1e1e; }
    .google { background-color: #4285f4 !important; color: white; }
    .naver  { background-color: #03C75A !important; color: white; } /* nover -> naver 수정 */

    /* 버튼 위에 마우스 올렸을 때 효과 */
    .login-btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

/* 1. 헤더 영역 설정 */
.header {
  /* 1. 헤더가 화면 전체 가로폭을 차지하게 함 */
  width: 100%; 
  position: absolute; /* 또는 fixed */
  top: 0;
  left: 0;

  /* 2. 내부 요소(아이콘+글자)를 정중앙으로 보냄 */
  display: flex !important;
  justify-content: center; /* 중앙 정렬 */
  align-items: center;     /* 중앙 정렬 */
  gap: 20px;               /* 아이콘과 글자 사이 간격 */
  
  height: 56px;
  background-color: #f0f0f0;
  z-index: 1000;           /* 다른 요소보다 위에 보이게 */
}

.logo {
  width: 32px;
  height: 32px;
  margin: 0 !important;    /* 기존 마진 제거 */
}

.header-text {
  /* ⭐ 중요: 기존에 있던 absolute 관련 속성을 완전히 초기화해야 합니다. */
  position: static !important; 
  transform: none !important;
  left: auto !important;
  
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.container {
    text-align: center; /* 부모 요소에 중앙 정렬 속성 적용 */
}

.header-text {
    /* 기타 스타일 */
}
}

/* 1. 초기화 및 배경 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background-image: url('../images/main-bg-1.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #a3d2ca; /* 이미지 없을 때 대비 */
    font-family: 'Noto Sans KR', sans-serif;
    /* overflow: hidden; 은 삭제하거나 꼭 필요할 때만 사용하세요 */
}

/* 2. 레이아웃 (중앙 정렬) */
.login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    text-align: center;
}



/* 3. 애니메이션 정의 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. 타이틀 스타일 (H1) */
h1 {
    font-size: 60px;
    margin: 0 0 20px 0;
    min-height: 1.2em;
    
    /* 그라데이션 및 배경 설정 (광택 효과를 위해 배경 크기를 키움) */
    background: linear-gradient(120deg, #6a11cb 0%, #2575fc 40%, #ffffff 50%, #2575fc 60%, #6a11cb 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 애니메이션: 빛 흐름과 부드러운 상하 움직임 */
    animation: shine 3s linear infinite, floating 2s ease-in-out infinite alternate;
}

@keyframes shine {
    to { background-position: 200% center; }
}

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


/* 5. H2 밑줄 및 스타일 */
h2 {
    font-size: 37px;
    margin: 0 0 30px 0;
    color: #333;
    display: inline-block;
    position: relative;
}

h2 {
    position: relative;
    display: inline-block; /* 밑줄 길이를 글자 길이에 맞추려면 필수! */
    margin-bottom: 45px !important; /* 이 숫자를 키울수록 h3가 아래로 내려갑니다 */
   
}

h2::after {
    content: '';
    position: absolute;
    width: 0;
    height: 5px;      /* 굵은 민트색 밑줄 */
    bottom: -5px;     /* 글자 바로 아래 위치 */
    left: 0;
    background-color: #7FFFD4;
    transition: width 0.3s;
}

h2:hover::after {
    width: 100%;
}

h3 {
    position: relative;
    top: 6px; /* 요소를 강제로 px 아래로 내려버립니다 */
}
h4 {
    position: relative;
    top: 6px; /* 요소를 강제로 px 아래로 내려버립니다 */
}



h1 { font-size: 82px; }

h2 { font-size: 37px; }
h3 { font-size: 30px; opacity: }
margin-bottom: 5px; /* 숫자를 40, 50으로 키울수록 더 많이 떨어집니다 */
h4 { font-size: 15px; opacity: }
h5 { font-size: 15px; opacity: }

}

/* CSS 파일 내용 */

body h1 { 
    margin: 0 !important;
    margin-bottom: 60px !important; 
    display: block !important;
}

body h2, body h3, body h4 {
    margin: 0 !important;
}

/* 6. 버튼 스타일 */
.login-btn {
    width: 280px;
    padding: 15px;
    margin: 8px 0;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.login-btn:active {
    transform: scale(0.98);
}

.google { background-color: #4285f4 !important; color: white; }
.kakao { background-color: #FEE500 !important; color: #3c1e1e; }
.naver  { background-color: #03C75A !important; color: white; }

<script>
    function showPage(pageId) {
        // 모든 페이지를 숨김
        document.querySelectorAll('.page').forEach(page => {
            page.style.display = 'none';
        });
        // 클릭한 페이지만 보여줌
        document.getElementById(pageId).style.display = 'block';
    }

.header-text {
    font-family: "Libre Baskerville", serif !important;
    font-style: italic !important; /* 이 줄을 추가하면 기울어집니다 */
    font-weight: 700 !important;
    font-size: 30px !important;
    color: 	#FFFFFF
}

/* 나중에 업로드될 항목들을 위한 스타일 */
.category-item.pending {
    filter: blur(4px);          /* 흐림 정도 (숫자가 클수록 더 안 보여요) */
    opacity: 0.6;               /* 투명도를 줘서 비활성화된 느낌 강조 */
    pointer-events: none;       /* 클릭이나 편집이 안 되게 막음 */
    cursor: not-allowed;        /* 마우스 커서를 '금지' 모양으로 변경 */
    user-select: none;          /* 텍스트 드래그 방지 */
}

/* 아래 스타일을 F12에서 문구 요소에 적용해 보세요 */
.slogan {
  font-family: 'Pretendard', sans-serif; /* 깔끔한 폰트 추천 */
  font-weight: 300;                      /* 약간 얇게 해서 세련된 느낌 */
  font-size: 0.9rem;                     /* SINCE 2026보다 약간 작거나 비슷하게 */
  letter-spacing: 0.1em;                 /* 자간을 넓히면 훨씬 고급스러워요 */
  color: rgba(255, 255, 255, 0.8);       /* 완전 흰색보다 살짝 투명하게 배경과 섞이도록 */
  margin-top: 15px;                      /* SINCE 2026과의 간격 */
  text-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 아주 살짝 그림자를 주어 가독성 확보 */
}

margin: 5px 0;   /* 위아래 여백을 5픽셀로 확 줄입니다 */
line-height: 1.2; /* 줄 자체의 높이를 낮춰서 글자를 더 가깝게 만듭니다 */

function requestPay() {
    // 1. 로컬 스토리지에 결제 시도 기록 (F12에서 확인용)
    localStorage.setItem('lastPayAttempt', new Date().toLocaleString());
    
    // 2. 실제 결제창 호출 코드 (나중에 업체에서 받은 코드 넣는 곳)
    alert("결제 시스템을 준비 중입니다."); 
}
function requestPay() {
    // 1. 로컬 스토리지에 결제 시도 기록 (F12에서 확인용)
    localStorage.setItem('lastPayAttempt', new Date().toLocaleString());
    
    // 2. 실제 결제창 호출 코드 (나중에 업체에서 받은 코드 넣는 곳)
    alert("결제 시스템을 준비 중입니다."); 
}

/* 전체를 감싸는 container가 있다면 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 화면 높이를 꽉 채우게 함 */
}

.admin-area {
    margin-top: auto; /* 남는 공간을 위로 밀어내서 바닥으로 보냄 */
}

.main-btn {
    padding: 10px 20px;
    background-color: #4CAF50; /* 기분 좋은 초록색 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.main-btn:hover {
    background-color: #45a049; /* 마우스 올리면 약간 어둡게 */
}

.nav-container {
    padding: 10px;
    text-align: left; /* 왼쪽 정렬 */
}

.main-btn {
    padding: 10px 20px;
    background-color: #4CAF50; /* 기분 좋은 초록색 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.main-btn:hover {
    background-color: #45a049; /* 마우스 올리면 약간 어둡게 */
}

.nav-container {
    padding: 10px;
    text-align: left; /* 왼쪽 정렬 */
}

.index-btn {
    padding: 10px 20px;
    background-color: #4CAF50; /* 기분 좋은 초록색 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.main-btn:hover {
    background-color: #45a049; /* 마우스 올리면 약간 어둡게 */
}

.nav-container {
    padding: 10px;
    text-align: left; /* 왼쪽 정렬 */
}

.main-btn {
    padding: 10px 20px;
    background-color: #4CAF50; /* 기분 좋은 초록색 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.main-btn:hover {
    background-color: #45a049; /* 마우스 올리면 약간 어둡게 */
}

.nav-container {
    padding: 10px;
    text-align: left; /* 왼쪽 정렬 */
}

.footer-area {
    text-align: center;   /* 내용들을 가운데로 */
    padding: 20px 0;      /* 위아래 여백 */
    margin-top: 50px;     /* 본문과 너무 붙지 않게 */
    background-color: #f9f9f9; /* 연한 회색 배경으로 영역 구분 */
    font-size: 12px;      /* 이용약관 등은 작게 */
    color: #666;
}

.admin-btn {
    margin-left: 20px;    /* 고객센터와 조금 띄우기 */
    font-size: 11px;      /* 관리자 버튼은 더 작고 눈에 안 띄게 */
    background: none;
    border: 1px solid #ccc;
    cursor: pointer;
}

<link rel="stylesheet" href="style.css">

}
.footer-bottom {
    text-align: center;
    margin-top: 10px;
}

.copyright {
    font-size: 13px; /* 학생이 좋아하는 13px */
    color: #888;     /* 연한 회색 */
}

.admin-link {
    font-size: 13px;
    font-weight: bold; /* admin2.png 처럼 약간 진하게 */
    color: #666;       /* 주변 글씨와 비슷한 색 */
    text-decoration: none; /* 밑줄 제거 */
    margin-left: 15px; /* Copyright 문구와 살짝 띄우기 */
}

.admin-link:hover {
    text-decoration: underline; /* 마우스 올렸을 때만 밑줄 */
}

body .admin-link {
    position: static !important;  /* 공중에 뜨는 성질 제거 */
    float: none !important;      /* 옆으로 튕겨 나가는 성질 제거 */
    display: inline !important;  /* 글자들 사이에 끼어들기 */
    margin: 0 0 0 15px !important; /* 옆 간격만 살짝 주기 */
    inset: auto !important;      /* top, bottom, left, right 값 무력화 */
}