/* Paperlogy Font Definitions */
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-1Thin.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-2ExtraLight.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-3Light.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-4Regular.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 400; /* normal */
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-5Medium.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-6SemiBold.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-7Bold.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 700; /* bold */
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-8ExtraBold.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('fonts/Paperlogy-9Black.ttf') format('truetype'); /* 실제 파일 이름으로 수정 */
    font-weight: 900;
    font-style: normal;
}
/* Italic 폰트 정의 제거 (파일 없음) */

/* 기본 스타일 초기화 */
body, h1, h2, h3, p, input, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Paperlogy', sans-serif; /* Paperlogy 폰트 적용, sans-serif 대체 */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 최소 높이를 화면 전체로 설정 */
}

header {
    background-color: white; /* 배경색 흰색 */
    color: #1f7043; /* 글자색 변경 */
    padding: 0.5rem 1rem; /* 상하 패딩 줄임 */
    display: flex; /* 로고와 제목을 나란히 배치하기 위함 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 추가 */
    border-bottom: 1px solid #eee; /* 하단에 옅은 구분선 추가 */
}

/* 헤더 링크 스타일 */
a.header-link {
    display: flex; /* 내부 요소(이미지, 텍스트) 정렬 위해 */
    align-items: center; /* 세로 중앙 정렬 */
    text-decoration: none; /* 밑줄 제거 */
    color: inherit; /* 부모(header)의 글자색 상속 */
}

header img {
    height: 30px; /* 로고 이미지 높이 줄임 */
    margin-right: 0.5rem; /* 로고와 제목 사이 여백 줄임 */
    margin-left: -2rem; /* 그룹 전체를 왼쪽으로 더 이동 */
}

main {
    flex-grow: 1; /* main 영역이 남은 공간을 채우도록 설정 */
    padding: 1rem;
}

.search-section {
    display: flex;
    flex-direction: column; /* 검색창과 드롭다운을 수직으로 배치 */
    margin-bottom: 0.2rem; /* 하단 여백 더 줄임 */
    position: relative; /* 드롭다운 위치 기준 */
}

.search-section input[type="search"] {
    flex-grow: 1;
    padding: 1rem 0.5rem; /* 위아래 padding 더 늘림 */
    border: 4px solid #1f7043; /* 테두리 두께 2px로 변경 */
    border-radius: 10px; /* 모든 모서리를 둥글게 */
    font-size: 1rem; /* 글자 크기 조절 */
    font-family: 'Paperlogy', sans-serif; /* 입력창 폰트 적용 */
}

/* 검색 버튼 스타일 제거 */
/* .search-section button {...} */

/* 드롭다운 메뉴 스타일 */
.dropdown-menu {
    display: none; /* 기본적으로 숨김 */
    position: absolute;
    top: 100%; /* 검색창 바로 아래에 위치 */
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none; /* 검색창과의 경계선 제거 */
    border-radius: 0 0 4px 4px;
    z-index: 10; /* 다른 요소 위에 표시 */
    /* max-height: 200px; /* 최대 높이 제한 제거 */ */
    /* overflow-y: auto; /* 스크롤 제거 */ */
}

.dropdown-menu.active {
    display: block; /* 활성화 시 보임 */
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee; /* 항목 구분선 */
    font-family: 'Paperlogy', sans-serif; /* 드롭다운 폰트 적용 */
}

.dropdown-menu a:last-child {
    border-bottom: none; /* 마지막 항목 구분선 제거 */
}

.dropdown-menu a:hover {
    background-color: #f5f5f5;
}

#card-section {
    margin-bottom: 1.5rem;
    padding-top: 1rem; /* 상단 패딩 추가 */
    padding-bottom: 2rem; /* 하단 패딩 추가 */
}

#card-section h2 {
    margin-bottom: 1rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
}

/* 단계 컨테이너 */
.step-container {
    position: relative; /* 내부 요소 배치 기준 */
    overflow: hidden; /* 넘어가는 단계 숨김 */
}

/* 개별 단계 */
.step {
    display: none; /* 기본적으로 숨김 */
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* 부드러운 전환 효과 */
}

.step.active {
    display: block; /* 활성 단계만 보임 */
    opacity: 1;
}

.card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0; /* 내부 여백 제거 */
    margin-bottom: 1rem;
    background-color: #f9f9f9;
    overflow: hidden; /* 이미지가 테두리 넘지 않도록 */
}

/* 카드 이미지 링크 */
a.card-link {
    display: block; /* 링크를 블록 요소로 만듦 */
    text-decoration: none; /* 밑줄 제거 */
}

.card-image {
    display: block; /* 이미지를 블록 요소로 */
    width: 100%; /* 카드 너비 채움 */
    aspect-ratio: 1 / 1; /* 가로세로 비율 1:1 (정사각형) */
    object-fit: cover; /* 비율 유지하며 영역 채우기 (잘릴 수 있음) */
    /* height: auto; 이미지 비율 유지 제거 */
    /* margin-bottom: 1rem; 이미지 아래 여백 제거 */
    /* border-radius: 4px; 카드 자체에 radius 있으므로 제거 가능 */
}

/* 카드 내부 텍스트 관련 스타일 제거 */
/*
.card h3 {
    margin-bottom: 0.5rem;
    color: #333;
}

.card-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}

.card p {
    color: #555;
}
*/

.adsense-section {
    margin: 0.5rem 0; /* 광고 섹션 위아래 여백 줄임 */
    min-height: 100px; /* 광고 로딩 전 최소 높이 확보 (선택 사항) */
    /* background-color: #f0f0f0; */ /* 임시 배경색 제거 */
}

footer {
    background-color: #f1f1f1;
    color: #333;
    text-align: center;
    padding: 1rem;
    margin-top: auto; /* 푸터를 하단에 고정 (main의 flex-grow와 함께 사용) */
    font-family: 'Paperlogy', sans-serif; /* 푸터 폰트 적용 */
}

/* 반응형 스타일 (예시: 600px 이상 화면) */
@media (min-width: 600px) {
    body {
        font-size: 1.1rem;
    }

    main {
        max-width: 800px; /* 데스크탑에서 최대 너비 제한 */
        margin: 0 auto; /* 가운데 정렬 */
    }
}

/* 제목 폰트 두께 */
h1, h2, h3 {
    font-weight: 700;
}