@font-face {
    font-family: "NanumPenScript";
    src: url("/fonts/NanumPenScript-Regular.ttf");
}

/* 1. 전체 배경 */
body {
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
    font-family: "NanumPenScript", sans-serif;
    display: flex;
    justify-content: center;
}

/* 2. 메인 컨테이너 */
.container {
    min-height: 500px;
    max-width: 1000px;
    width: 95%;
    margin: 60px auto;
    background-color: #ffffff;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* 3. 제목 영역 폰트 키우기 */
h1 {
    font-size: 56px;
    margin: 0;
}

h2 {
    font-size: 32px; /* 오늘 날짜 크기 */
    color: #555;
    margin-bottom: 40px;
}

.table-wrapper {
    background-color: #ffffff;
    border-radius: 15px; /* 🔥 테이블 전체 모서리를 둥글게! */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 테이블 자체에도 은은한 그림자 */
    margin: 0 auto; /* 중앙 정렬 */
    width: 100%;
    overflow-y: auto;   /* 🔥 데이터가 많아지면 세로 스크롤 생성 */
    max-height: 600px;  /* 🔥 표의 최대 높이 고정 (원하는 만큼 조절) */
}

.table-wrapper::-webkit-scrollbar {
    width: 8px;
}
.table-wrapper::-webkit-scrollbar-thumb {
    background-color: #dee2e6;
    border-radius: 10px;
}

/* 4. 테이블 중앙 정렬 및 폰트 설정 */
.table {
    width: 100%;
    margin: 0; /* wrapper가 중앙 정렬하므로 margin 제거 */
    border-collapse: separate; /* 🔥 라운드를 위해 collapse 대신 separate 사용 */
    border-spacing: 0; /* separate 사용 시 생기는 틈을 없앰 */
    font-size: 26px;
}

/* 5. 표의 모든 글씨 중앙 정렬 */
.table th, .table td {
    padding: 20px;
    text-align: center; /* 수평 중앙 */
    vertical-align: middle; /* 수직 중앙 */
    border-bottom: 1px solid #dee2e6;
    text-decoration: none !important;
}

/* 만약 문제 번호(1001 등) 링크의 밑줄도 평소엔 안 보이게 하고 싶다면 */
.problem-link {
    text-decoration: none !important;
}

/* 마우스를 올렸을 때만 밑줄이 생기게 하면 훨씬 세련되어 보입니다 */
.problem-link:hover {
    text-decoration: underline !important;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* 헤더 파란색 배경 스타일 */
.table-primary {
    background-color: #e7f1ff !important;
    color: #007bff;
    font-weight: bold;
}

/* 복습 완료(틀림) 항목 붉은색 */
.table-danger {
    background-color: #f8d7da !important;
}
/* 6. 버튼 커스텀 */
button {
    cursor: pointer;
    background-color: white;
    border: 2px solid #007bff;
    border-radius: 25px;
    padding: 8px 20px;
    font-family: "NanumPenScript", sans-serif;
    font-size: 22px; /* 버튼 글씨도 크게 */
    transition: 0.2s;
}

button:hover {
    background-color: #007bff;
}

button:hover a {
    color: white;
}

button a {
    text-decoration: none;
    color: #007bff;
}

/* 서비스 명칭 (로고) 스타일 */
.brand-logo {
    letter-spacing: 2px;
    font-weight: bold;
    color: #6c757d;
    text-transform: uppercase;
    /* 추가 */
    display: inline-block;
    min-width: fit-content;
}

/* 제목과 로고를 가로로 배치하기 위한 커스텀 클래스 */
.header-wrapper {
    display: flex;
    justify-content: space-between; /* 왼쪽 끝, 오른쪽 끝 배치 */
    align-items: baseline;        /* 글자 아랫선 맞춤 */
    margin-bottom: 10px;
    width: 100%;
}

/* 제목 영역 정렬 (h1, h2가 왼쪽으로 오도록) */
.title-area {
    text-align: left;
}

/* 검색 폼: 시원하고 큼지막하게 */
.search-form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 3px solid #007bff;
    border-radius: 50px;
    /*padding: 5px 20px;*/
    padding: 5px 50px;
    width: 100%;
    max-width: 800px; /* 아주 길고 시원하게 조절 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
}

/* 2. 🔥 티가 확 나게! 포커스 시 효과 강화 🔥 */
.search-form:focus-within {
    border-color: #007bff; /* 테두리를 진한 파란색으로 변경 */
    box-shadow: 0 8px 30px rgba(0, 123, 255, 0.25); /* 그림자를 더 크고 짙게! (농도 15% -> 25%) */
    transform: translateY(-2px); /* 검색창이 살짝 위로 떠오르는 느낌 추가 */
}
/* 입력창 (기존 나눔펜 폰트 활용) */
.search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 15px;
    font-family: "NanumPenScript", sans-serif;
    font-size: 32px; /* 큼지막한 글씨 */
    background: transparent;
}

.search-input::placeholder {
    color: #adb5bd;
}

/* 검색 버튼 (기존 버튼 스타일 계승) */
.search-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 30px;
    font-size: 24px;
    font-family: "NanumPenScript", sans-serif;
    cursor: pointer;
    margin-left: 10px;
}



/* 웹 접근성 라벨 숨기기 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}