/**
 * BonnieBonBon 사이트 전용 스타일
 * 
 * @package WordPress
 * @subpackage Twenty_Twenty_Four_Child
 * @since 1.0.0
 */

/* 전체 레이아웃 */

@font-face {
    font-family: 'Ownglyph_jooreeletter-Rg';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405-2@1.0/Ownglyph_jooreeletter-Rg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 영어 폰트 가져오기 */
@font-face {
    font-family: 'Monteserrat';
    src: url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap') format('woff2');
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

html {
    width: 100vw; /* 뷰포트 너비를 기준으로 너비 설정 */
    overflow-x: hidden; /* HTML에서도 가로 스크롤 방지 */
}
body {
    overflow-x: hidden; /* 기존 규칙 유지 */
    /* 기타 body 스타일... */
}



body {
    overflow-x: hidden;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

/* 헤더 스타일 - 좌우 여백 제거 및 정렬 수정 */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 1000;
    border-bottom: 0 !important;
    transition: all 0.3s ease;
    padding: 30px 0; /* 상단 여유 공간 추가 */
}

.header-container {
    display: flex;
    align-items: flex-start; /* 상단 정렬 */
    width: 100%; /* 최대 너비로 변경 */
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/* 로고 위치 및 크기 조정 */
.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    top: 0; /* 상단에 정렬 */
}

.logo img {
    height: auto;
    max-width: 90px; /* 로고 크기 */
    display: block;
}

/* 네비게이션 메뉴 - 왼쪽 정렬 수정 */
.main-navigation {
    flex: 0 0 auto;
    margin-right: auto;
    position: absolute;
    left: 20px; /* 레퍼런스에 맞게 조정 */
    top: 0;
}

.main-menu {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu li {
    margin: 5px 0; /* 세로 간격 */
    text-align: left;
}

/* 메뉴 폰트 (Montserrat) 및 자간/행간 설정 */
.main-menu li a {
    font-family: 'Montserrat', sans-serif; /* 몬세라트 폰트 적용 */
    line-height: 1.0;     /* 행간 조절 (예: 1.0 ~ 1.4 사이에서 조절) */
    letter-spacing: 0.3px; /* 자간 조절 (예: -0.3px ~ -0.8px 사이에서 조절) */

    color: #000; /* 기존 속성 유지 */
    text-decoration: none; /* 기존 속성 유지 */
    font-size: 16px; /* 기존 속성 유지 */
    font-weight: 500; /* 기존 속성 유지 */
    transition: color 0.3s ease; /* 기존 속성 유지 */
    display: block; /* 기존 속성 유지 */
}

.main-menu li a:hover {
    color: #666;
}

/* 언어 선택기 - 오른쪽에 배치 수정 */
#bb_lang_selector {
    position: absolute;
    right: 20px; /* 레퍼런스에 맞게 조정 */
    top: 0;
    display: inline-block;
    font-size: 15px;
    margin: 0;
    padding: 3px;
}

#bb_lang_ko, #bb_lang_en {
    color: #999;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    padding: 0 3px;
}

#bb_lang_ko.active, #bb_lang_en.active {
    color: #333;
}

/* 모바일 메뉴 버튼 - 색상 수정 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333 !important; /* 햄버거 메뉴 색상을 검정색으로 변경 */
    position: absolute;
    left: 20px; /* 레퍼런스에 맞게 조정 */
    top: 0;
}

.menu-toggle:focus, 
.menu-toggle:active, 
.menu-toggle:hover {
    color: #333 !important;
    outline: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* 메인 컨텐츠 영역 - 여백 제거 수정 */
#main {
    padding-top: 150px; /* 헤더 높이에 맞게 조정 */
    width: 100%; /* 전체 너비 사용 */
    max-width: 100%; /* 최대 너비 제한 제거 */
}

/* 날아다니는 이미지 */
#main_mov_icon {
    position: relative;
    z-index: 900;
}

#main_mov_icon .fly_icon {
    position: fixed;
    top: 48%;
    left: -10%;
    transform: scale(0) translateX(-10vw);
    will-change: transform;
    -webkit-animation-name: fly_icon;
    animation-name: fly_icon;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 999;
    -webkit-animation-duration: 7.7s;
    animation-duration: 7.7s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

#main_mov_icon .fly_icon.nth2 {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

#main_mov_icon .fly_icon.nth3 {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}

@keyframes fly_icon {
    0% { transform: translateX(-25vw) scale(1); }
    100% { transform: translateY(-30vh) translateX(250vw) scale(1); }
}

@keyframes star_move {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

/* 메인 슬라이드 배너 - 여백 제거 수정 */
#main_slide_banner {
    cursor: pointer;
    clear: both;
    position: relative;
    height: auto;
    padding: 20px 0;
    overflow: hidden;
    max-width: 50%; /* 배너 최대 너비 */
    margin: 0 auto;
}

#main_slide_banner:after {
    content: "";
    clear: both;
    display: block;
}

#main_slide_banner .dj_slider .slider_main {
    position: relative;
    display: block;
}

#main_slide_banner .dj_slider .slider_main img {
    width: 100% !important;
    height: auto;
}

/* 슬라이더 화살표 - 제거 */
.slick-prev, .slick-next {
    display: none !important;
}

/* 메인 텍스트 - 여백 제거 수정 */
#main_text {
    padding: 30px 0; /* 패딩 축소 */
    margin: 0; /* 좌우 여백 제거 */
    width: 100%; /* 전체 너비 사용 */
}

#main_text .title {
    justify-content: center;
    text-align: center;
}

#main_text .title .ment {
    font-family: 'Ownglyph_jooreeletter-Rg', sans-serif !important;
    cursor: pointer;
    line-height: 1.5;
    color: #333;
    display: inline-block;
    padding: 0 30px;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.3s ease;
}

#main_text .title .ment:hover {
    color: #666;
    transition: all 0.3s ease;
}

/* --- 메인 페이지 단일 책 컨테이너 스타일 --- */

/* 전체 링크 영역 (책 컨테이너) */
.single-book-link {
    display: block; /* 링크 전체가 클릭 가능하도록 블록 요소로 만듭니다. */
    text-decoration: none; /* 기본 밑줄 제거 */
    color: inherit; /* 텍스트 색상이 부모에서 상속되도록 합니다. */
    max-width: 300px; /* PC에서 전체 책 컨테이너의 최대 너비. 이 값을 조절하여 PC에서 책 크기를 변경할 수 있습니다. */
    margin: 20px auto; /* 중앙 정렬 및 위아래 여백. 메인페이지 레이아웃에 맞게 조절하세요. */
    padding: 15px; /* 컨테이너 자체에 패딩. */
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
    /* 필요하다면 여기에 테두리 (border)나 그림자 (box-shadow)를 추가할 수 있습니다. */
    /* 예시: box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
    transition: box-shadow 0.3s ease; /* 그림자 효과를 추가한다면 전환 효과 */
}

/* 이미지 컨테이너 (2:3 비율, 배경 투명) */
.single-book-image-container {
    position: relative;
    width: 100%; /* 부모(.single-book-link)의 너비를 따릅니다. */
    padding-bottom: 150%; /* 2:3 비율 (높이/너비 = 3/2 = 1.5 = 150%) */
    background-color: transparent; /* 배경 투명 */
    overflow: hidden; /* 이미지 확대 시 컨테이너 밖으로 나가지 않도록 */
}

/* 책 이미지 (컨테이너 내부, 크기 및 마우스 오버 효과) */
.single-book-cover {
    position: absolute; /* 부모 컨테이너의 절대 위치 기준 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 이미지를 컨테이너 내 중앙에 정렬 */
    width: 90%; /* PC에서 컨테이너 가로 기준 70% 크기 */
    height: auto; /* 이미지 비율 유지 */
    display: block; /* 블록 요소로 만듭니다. */
    transition: transform 0.3s ease; /* 마우스 오버 시 부드러운 확대 전환 효과 */
    /* 필요하다면 이미지 자체에 그림자 추가 (예: box-shadow: 0 4px 8px rgba(0,0,0,0.2); ) */
}

/* 마우스 오버 시 이미지 확대 효과 */
.single-book-link:hover .single-book-cover,
.single-book-link:focus .single-book-cover { /* focus는 키보드 접근성을 위함 */
    transform: translate(-50%, -50%) scale(1.08); /* 중앙에서 1.08배 확대 */
}


/* --- 텍스트 정보 스타일 --- */
.single-book-info {
    text-align: center; /* 텍스트 중앙 정렬 */
    margin-top: 5px; /* 이미지와의 간격 */
}

/* "빵 굽는 레서판다 아루루" 스타일 */
.single-book-title {
    font-family: 'Ownglyph_jooreeletter-Rg', sans-serif; /* 주리레터 폰트 적용 */
    font-size: 16px; /* PC 기준 16px */
    color: rgba(0, 0, 0, 0.8); /* 검정 80% (RGBA 값으로 투명도 조절) */
    margin: 0; /* 기본 마진 제거 */
    line-height: 1.4; /* 적절한 행간 */
    letter-spacing: -0.3px; /* 적절한 자간 */
    padding: 0 5px; /* 텍스트 좌우 여백 */
}

/* "달보늬 달아란" 스타일 */
.single-book-author {
    font-family: 'Ownglyph_jooreeletter-Rg', sans-serif; /* 주리레터 폰트 적용 */
    font-size: 14px; /* PC 기준 12px */
    color: rgba(0, 0, 0, 0.4); /* 검정 20% (RGBA 값으로 투명도 조절) */
    margin: 0; /* 기본 마진 제거 */
    line-height: 1.4; /* 적절한 행간 */
    letter-spacing: -0.3px; /* 적절한 자간 */
    padding: 0 5px; /* 텍스트 좌우 여백 */
}

/* --- 모바일 반응형 설정 (화면 너비 768px 이하) --- */
@media screen and (max-width: 768px) {
    .single-book-link {
        max-width: 100%; /* 모바일에서 화면 너비의 90% 정도 차지 (좌우 여백을 위해) */
        margin: 5px auto; /* 중앙 정렬 및 여백 */
        padding: 1px; /* 모바일 패딩 조정 */
    }

    .single-book-cover {
        width: 90%; /* 모바일에서 이미지 가로 기준 80% */
    }

    .single-book-title {
        font-size: 14px; /* 모바일 폰트 크기 조정 (PC 16px보다 약간 작게) */
        line-height: 1.3;
        letter-spacing: -0.2px;
    }

    .single-book-author {
        font-size: 12px; /* 모바일 폰트 크기 조정 (PC 12px보다 약간 작게) */
        line-height: 1.3;
        letter-spacing: -0.2px;
    }
}

/* 각 페이지 콘텐츠 폰트 (주리레터) 및 자간/행간 설정 */

/* About 페이지 콘텐츠 */
.about-content {
    font-family: 'Ownglyph_jooreeletter-Rg', sans-serif; /* 주리레터 폰트 적용 */
    line-height: 1.6;     /* 행간 조절 (예: 1.5 ~ 1.8 사이에서 조절) */
    letter-spacing: -0.3px; /* 자간 조절 (예: -0.2px ~ -0.5px 사이에서 조절) */
}

/* Books, News, Notice 등 일반 페이지 콘텐츠 (워드프레스 기본 콘텐츠 영역) */
/* .page-content는 bonnie-style.css에 정의되어 있습니다. */
.page-content {
    font-family: 'Ownglyph_jooreeletter-Rg', sans-serif; /* 주리레터 폰트 적용 */
    font-size: 18px
	line-height: 1.4;     /* 행간 조절 */
    letter-spacing: -0.3px; /* 자간 조절 */
    /* max-width, margin, padding 등 기존 속성 유지 */
}

/* 만약 워드프레스 기본 콘텐츠 내의 문단(p)이나 제목(h1-h6)에도 명확히 적용하고 싶다면 */
.page-content p,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    font-family: 'Ownglyph_jooreeletter-Rg', sans-serif; /* 주리레터 폰트 적용 */
    line-height: 1.6;
    letter-spacing: -0.3px;
}

/* 새 책 섹션 - 여백 조정 */
#new_books_section {
    padding: 30px 0 60px;
    text-align: center;
    width: 70%;
    margin: 0 auto;
}

#new_books_section .title h3 {
    font-family: 'Ownglyph_jooreeletter-Rg', sans-serif !important;
    font-size: 18px;
	margin-bottom: 5px;
    position: relative;
    display: inline-block;
}

#new_books_section .title h3:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #333;
    position: absolute;
    bottom: -10px;
    left: 0;
}

.new_books_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.book-item {
    text-align: center;
}

.book-item img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.book-item:hover img {
    transform: translateY(-5px);
}

.book-title {
    margin-top: 15px;
    font-size: 16px;
    font-family: 'Ownglyph_jooreeletter-Rg', sans-serif !important;
}

/* 푸터 스타일 - 레퍼런스에 맞춰 정렬 수정 */
#footer {
    padding: 30px 0;
    background-color: #ffffff;
    color: #333;
    width: 100%;
}

.footer-content {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.footer-text {
    font-size: 14px;
    line-height: 1.5;
    text-align: left; /* 왼쪽 정렬 */
    position: relative;
    left: 20px; /* 메뉴와 같은 위치로 조정 */
}

/* 반응형 스타일 - 여백 조정 */
@media screen and (max-width: 768px) {
    /* 헤더 패딩 조정 */
    #header {
        padding: 20px 0;
    }
    
    /* 모바일 메뉴 */
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }
    
    .logo img {
        max-width: 72px; /* 로고 크기 축소 */
    }
    
    .main-navigation {
        position: static;
    }
    
    #bb_lang_selector {
        position: absolute;
        right: 20px;
        top: 0;
    }
    
    .menu-toggle {
        display: block;
        position: absolute;
        left: 20px;
        top: 0;
    }
    
    /* 모바일 메뉴 수정 */
    .main-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        padding: 0;
        margin: 0;
        transition: transform 0.3s ease;
        transform: translateX(-100%);
    }
    
    .main-menu.active {
        display: flex;
        transform: translateX(0);
    }
    
    .main-menu li {
        margin: 15px 0;
        text-align: center;
    }
    
    .main-menu li a {
        font-size: 18px;
    }
    
    /* 모바일 메뉴 닫기 버튼 */
    .menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
        color: #333 !important;
    }
    
    /* 메인 슬라이드 배너 */
	/* 1. 모바일에서만 메인 슬라이드 배너 이미지의 너비를 100%로 조절 */
	 #main_slide_banner {
        height: 400px; /* 모바일에서 높이 조정 */
        max-width: 100%; /* 모바일에서 최대 너비 100% */
        overflow: hidden; /* 이 코드는 그대로 유지되어야 합니다. */
    }
    #main_slide_banner img {
        width: 120% !important; /* 이미지가 부모 컨테이너에 딱 맞게 100%로 설정되어 좌우 스크롤을 방지합니다. */
    }

    /* 2. 메인 슬라이드 배너 컨테이너 자체의 넘치는 내용을 숨김 (이 코드가 이미 있다면 다시 추가할 필요는 없습니다.) */
    #main_slide_banner {
        overflow: hidden; /* 이 속성은 컨테이너 밖으로 나가는 내용을 잘라줍니다. */
    }

   
    
    /* 날아다니는 이미지 */
    #main_mov_icon .fly_icon {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }
    
    #main_mov_icon .fly_icon.nth2 {
        -webkit-animation-delay: 1.1s;
        animation-delay: 1.1s;
    }
    
    #main_mov_icon .fly_icon.nth3 {
        -webkit-animation-delay: 1.7s;
        animation-delay: 1.7s;
    }
    
    #main_mov_icon .fly_icon img {
        height: 60px !important;
    }
    
    /* 메인 텍스트 */
    #main_text {
        padding: 20px 0;
        margin: 0; /* 여백 제거 */
    }
    
    #main_text .title .ment {
        font-size: 18px;
        padding: 0 15px;
    }
    
    /* 새 책 섹션 */
    #new_books_section {
        width: 90%;
    }
    
    .new_books_container {
        grid-template-columns: 1fr;
    }
    
    /* 메인 컨텐츠 영역 - 헤더 아래 공간 조정 */
    #main {
        padding-top: 100px;
    }
    
    /* 푸터 텍스트 모바일에서도 왼쪽 정렬 유지 */
    .footer-text {
        left: 20px; /* 메뉴와 동일한 위치로 조정 */
        text-align: left !important;
    }
}

/* 페이지별 스타일 */
.content-page {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* 페이지 타이틀 */
.page-title {
    text-align: center;
    margin-bottom: 40px;
}

/* 페이지 컨텐츠 */
.page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Books 페이지 그리드 */
.books-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.books-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 20px;
}

@media screen and (max-width: 768px) {
    .books-list {
        grid-template-columns: 1fr;
    }
}

/* 모든 버튼에 파란색 아웃라인 및 포커스 효과 제거 */
button, 
button:focus,
button:active,
a:focus,
a:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}