body.content-only .entry-content {
  max-width: 1000px;  
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}



@media (max-width: 768px) {
  body.content-only .entry-content {
    max-width: 100%;  /* 모바일에서는 꽉 차게 */
    padding: 0 10px;
  }

}

.highlight-block {
  background-color: #000000 !important;
/*    background-image: linear-gradient(to bottom, #f6e8b1, #ffffcc, #785c30) !important; */
    
    display: flex; 
    justify-content: space-evenly; 
    
    /* ********** 이 코드를 추가하거나 수정하세요 ********** */
    align-items: center; 
    /* ************************************************* */
    
    padding-top: 5px !important;     
    padding-bottom: 5px !important;  
    padding-left: 0;
    padding-right: 0;
}

/* highlight-block 안의 모든 P 요소의 마진 제거 (수직 공백 제거) */
.highlight-block p {
    margin: 0 !important;
}

/* highlight-block 안의 모든 링크(a)에 수직 정렬 속성 추가 */
.highlight-block a {
    /* Flex 항목으로 인식되도록 display 속성을 변경하여 정렬 기준을 명확히 함 */
    color: #fff;
    display: block; 
    margin: 0 !important;
}

/* 본문 제목의 유동 폰트 크기 */
.entry-content h1 { font-size: clamp(1.8rem, 2.5vw + 1rem, 2.8rem); line-height: 1.25; }
.entry-content h2 { font-size: clamp(1.6rem, 2.0vw + .9rem, 2.2rem); line-height: 1.3; }
.entry-content h3 { font-size: clamp(1.35rem,1.2vw + .9rem, 1.7rem); line-height: 1.35; }
.entry-content h4 { font-size: clamp(1.2rem, 1.0vw + .85rem,1.4rem); line-height: 1.4; }
.entry-content h5 { font-size: clamp(1.05rem,.7vw + .8rem, 1.2rem); line-height: 1.45; }
.entry-content h6 { font-size: clamp(1.0rem, .5vw + .8rem, 1.05rem); line-height: 1.5; }

/* 상단 타이틀 */
.entry-title { font-size: clamp(2.0rem, 3vw + 1rem, 3.0rem); line-height: 1.2; }
/* 블록 에디터 내부 미리보기 */
.editor-styles-wrapper .wp-block h1 { font-size: 2.4rem; }
.editor-styles-wrapper .wp-block h2 { font-size: 2.0rem; }
.editor-styles-wrapper .wp-block h3 { font-size: 1.6rem; }
.editor-styles-wrapper .wp-block h4 { font-size: 1.35rem; }
.editor-styles-wrapper .wp-block h5 { font-size: 1.15rem; }
.editor-styles-wrapper .wp-block h6 { font-size: 1.0rem; }
/* 또는 위의 clamp 버전을 동일하게 복붙 */

html {
    scroll-behavior: smooth;  /* 부드럽게 스크롤 */
}

/* 햄버거 버튼 */
.menu-toggle {
    position: fixed;
    right: 20px;
    top: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #000;
    z-index: 900;
}

/* 오버레이 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 900;
}

.overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* 사이드바 */
.sidebar {
    position: fixed !important;    
    top: 0 !important;    
    left: auto !important;
    right: -100% !important;        /* 폭에 상관없이 완전히 화면 밖으로 */
    height: 100% !important;    
    background-color: #333 !important;    
    color: #fff !important;    
    box-shadow: -4px 0 8px rgba(0,0,0,0.3) !important;    
    transition: right 0.3s ease !important;    
    z-index: 1000 !important;    
    display: flex !important;    
    flex-direction: column !important;    
    width: 300px !important;        /* 기본 데스크톱 폭 */
}

.sidebar.open {
    right: 0 !important;    
}

/* 닫기 버튼 */
.sidebar-header {
    display: flex !important;    
    justify-content: flex-end !important;    
    padding: 10px !important;    
}

#close-btn {
    font-size: 28px !important;    
    background: none !important;    
    border: none !important;    
    color: #fff !important;    
    cursor: pointer !important;    
}

/* 메뉴 */
.sidebar-menu {
    list-style: none !important;    
    padding: 0 !important;    
    margin: 0 !important;    
    flex: 1 !important;    
    display: flex !important;    
    flex-direction: column !important;    
}

.sidebar-menu li {
    padding: 8px 20px !important;    
}

.sidebar-menu li a {
    color: #fff !important;    
    text-decoration: none !important;    
    display: block !important;
    line-height: 1.2 !important;    
}

.sidebar-menu li:hover {
    background-color: #444 !important;    
}

/* 반응형: 모바일에서 사이드바 너비 80% */
@media (max-width: 768px) {
    .sidebar {
        width: 80% !important;    
        right: -80% !important;       /* 폭의 80%만큼 화면 밖으로 숨김 */
    }
    
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('https://www.trpgclub.com/2025/waitingBG_02_01.jpg');
    background-size: 40%;
    background-attachment: fixed; 
    display: flex;
    flex-direction: column;
}

/* 배경 움직임 제거 및 패턴 유지 */
.moving-pattern {
  background-image: url("https://www.trpgclub.com/2025/waitingBG_02.jpg");
  background-repeat: repeat;           /* 패턴 반복 유지 */
  background-size: 30%;                /* 크기 30% 유지 */
  
  /* 🔥 아래 애니메이션 관련 줄을 삭제하거나 주석 처리하세요 */
  /* animation: movePattern 20s linear infinite; */
  
  background-attachment: fixed;        /* 스크롤 시 배경은 고정되게 하여 깔끔함 유지 */
}

/* 배경 움직임 키프레임 
@keyframes movePattern {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 800px 800px;
  }
}
*/
header {
background-color: #33333358;
color: #000000;
padding: 20px;
text-align: center;
}

.banner {
 /*    background-color: #f4f4f4; */
    padding: 20px 0;        /* 상하 여백 20px 고정 */

}

.mini-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    gap: 15px;
    justify-content: left;    /* 컬럼들을 중앙으로 모음 */
    align-items: left;
    margin: 20px auto;
}


.mini-banner-item {
    width: 200px !important;    /* 너비 고정 */
    height: 60px !important;    /* 높이 고정 */
    background-color: #ddd;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.mini-banner-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.mini-banner-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background-color: #fff;
    display: block;
}

.content-wrapper {
    max-width: 1600px;
    width: 100%;
    /* 최소 2개 아이콘(180px × 2) + 간격(20px × 1) + 좌우 여백(40px) 확보 */
    min-width: calc((150px * 2) + (20px * 1) + 40px);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.grid-container-wrapper {
    overflow-x: auto;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));;
    max-width: calc((180px * 7) + (20px * 6));
    margin: 0 auto;
    gap: 20px;
    padding: 20px 0;
    justify-content: center;
}

.book-card {
    width: 100% !important; /* 고정 180px 해제 */
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-item {
    width: 100% !important; /* 고정 180px 해제 */
    max-width: 180px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	border-radius: 10px;
	border: 1px solid #CCC;
    transition: box-shadow 0.3s ease;  /* 부드러운 전환 */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;

}

.grid-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  /* ✅ 마우스 오버 시 그림자 */
}

.book-title {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    word-wrap: break-word;
    word-break: keep-all;
    background-color: rgba(255, 255, 255, 0.8); /* transparent; */
    color: #000;
    width: 100%;
}

.book-title-left {
    text-align: left; /* 텍스트 정렬을 왼쪽으로 재정의 */
    /* 다른 속성들은 상속되므로 따로 적어줄 필요가 없습니다. */
}

.notice-board {
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 20px;
    max-width: calc((180px * 5) + (20px * 4));
    margin: 0 auto;
    text-align: left;
	justify-content: center;  
}
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10pt;
}
a {
  text-decoration: none; /* 기본 밑줄 제거 */
  color: inherit;         /* 선택 사항: 부모 색상 상속 */
}

a:hover {
  text-decoration: none; /* 마우스 올렸을 때 밑줄 표시 X*/
}
#wrapper_without_footer {
  flex: 1; /* 남는 공간을 채움 */
}
html, body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}



/* Normal-Books-container: Flex 컨테이너로 설정하여 자식 요소를 좌우로 배치 */
/* 2. 컨테이너의 미세한 넘침 방지 */
.Normal-Books-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 0 !important; /* 부모 패딩 0으로 초기화 */
    overflow: hidden !important; /* 1px이라도 튀어나오는 것 차단 */
}

/* Left-1to3: 그림 영역 */
.Left-1to3 {
    flex: 0 0 300px !important; /* PC 기본 폭 */
    max-width: 30% !important;   /* 화면 비례 제한 */
    min-width: 200px !important;  /* 최소 폭 */
    width: auto !important;
    padding: 10px !important;
}

/* 4. 텍스트 영역: 강제 너비 고정 해제 */
.Right-2to3 {
    flex: 1 1 0% !important; /* 남은 공간을 정확히 계산해서 차지 */
    min-width: 0 !important;  /* 내부 콘텐츠가 박스를 늘리지 못하게 함 */
    width: auto !important;
    padding: 10px !important;
    word-break: break-all !important; /* 긴 텍스트로 인한 박스 확장 방지 */
}
/* image-wrapper: Left-1to3 영역 내에서 이미지를 중앙 정렬하기 위한 Flex 컨테이너 */
.image-wrapper {
    display: flex;
    justify-content: center; /* 수평 가운데 정렬 */
    align-items: flex-start; /* 수직 정렬 (그림이 너무 커서 상하로 늘어나는 것을 방지) */
    width: 100%; /* 부모(Left-1to3)의 너비를 꽉 채움 */
}

/* book-image: 그림 자체의 스타일 */
/* 5. 이미지 크기 유동화 */
.book-image {
    max-width: 100% !important; /* 부모 폭보다 커지지 않음 */
    height: auto !important;
    display: block;
}

/* 모바일 미디어 쿼리(768px 이하) 내 설정 */
@media (max-width: 768px) {
    .book-image {
        width: 75% !important;    /* 모바일에서는 화면의 80% 정도만 차지하게 조절 */
        max-width: 100% !important;
    }
}

/* 화면 너비가 600px 이하일 때 (이 값은 조정 가능) */
/* 🔥 핵심 해결책: 768px 이하에서만 레이아웃을 상하로 전환 */
@media (max-width: 768px) {
    
    /* 컨테이너를 세로로 정렬 */
    .Normal-Books-container {
        flex-direction: column; /* 세로 정렬로 전환 */
        flex-wrap: wrap; /* 이제 줄바꿈 허용 (세로 정렬이므로 사실상 100% 너비 차지) */
    }

    /* Left-1to3: 세로 정렬 시 100% 너비를 차지하고 가운데 정렬 */
    .Left-1to3 {
        width: 100%; /* 부모 너비 전체 사용 */
        display: flex;
        justify-content: center; /* 영역 내에서 그림을 가운데 정렬 */
    }
    
    /* Right-2to3: 세로 정렬 시 100% 너비를 차지 */
    .Right-2to3 {
        width: 100%;
        /* flex-grow: 1;은 이미 설정되어 있으므로 따로 조정하지 않아도 됨 */
    }

    /* 그림 자체는 고정 300px 유지 */
}

/* --- 모든 페이지 공통 모바일 헤더 설정 --- */
/* [1] PC 버전: 화면 너비 769px 이상 */
@media screen and (min-width: 769px) {
    header nav {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        flex-wrap: nowrap !important; /* PC에서는 줄바꿈 금지 */
    }
    header nav a {
        color: #000000 !important;
        margin: 0 15px !important;
        text-decoration: none !important;
        flex: none !important; /* 너비 고정 해제 */
    }
}

/* [2] 모바일 버전: 화면 너비 768px 이하 */
@media screen and (max-width: 768px) {
    /* 헤더 및 타이틀 여백 최소화 */
    header {
        height: auto !important;
    }

    /* 모든 메뉴 요소를 3열로 배치 */
    header nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 0 5px !important;
    }

    /* 일반 메뉴(div)와 드롭다운(div)의 규격을 통일 */
    header nav .menu-item, 
    header nav .dropdown {
        flex: 0 0 33.33% !important;
        max-width: 33.33% !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* 텍스트 스타일 통일 */
    header nav a, 
    header nav .dropbtn a {
        letter-spacing: -1px !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        color: #000 !important;
    }

    /* 드롭다운 위치 보정: 화면 밖으로 나가지 않게 함 */
    header nav { position: relative !important; }

    header .dropdown-content {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
    }
    /* 본문 상단 여백 보정 */
    #wrapper_without_footer, .entry-content, main {
        padding-top: 0px !important;
    }
}

/* 전역 버튼 스타일 */
.custom-btn {
  width: 220px;
  height: 60px;
  background-color: #000;
  color: #fff;
  display: flex;
	font-size: 18px; 
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  margin-top: 30px;
}

.custom-btn:hover {
  opacity: 0.5;
}

/* DoF 카드 전용 설정 */
.book-card.dof-only .grid-item {
    position: relative; /* 이미지 겹치기를 위한 기준점 */
    overflow: hidden;
}

/* 두 이미지 공통 설정 */
.book-card.dof-only .grid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease; /* 부드러운 교체 효과 */
}

/* 호버 이미지 초기 상태: 투명하게 겹쳐둠 */
.book-card.dof-only .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* 마우스 호버 시 이미지 교체 동작 */
.book-card.dof-only:hover .default-img {
    opacity: 0;
}

.book-card.dof-only:hover .hover-img {
    opacity: 1;
}

/* 링크가 없음을 알리는 커서 설정 (선택 사항) */
.book-card.dof-only .no-link-wrapper {
    cursor: default;
}

.dropdown {
    position: relative;
    display: inline-block;
}

/* 서적 소개 버튼 - 다른 메뉴(nav a)와 완벽히 동일하게 설정 */
.dropbtn {
    cursor: pointer;
    display: inline-block;
    
    /* 1. 폰트 스타일 통일 */
    font-size: 16px !important;    /* 브라우저 기본값이나 nav a 설정에 맞춤 */
    font-weight: normal !important; /* 굵기 해제 */
    color: #000000 !important;      /* 공지사항, 통합자료실과 동일한 색상 */
    
    /* 2. 간격 통일 (nav a에 적용된 margin/padding과 일치시킴) */
    margin: 0 15px; 
    padding: 0;
    
    /* 3. 텍스트 장식 제거 */
    text-decoration: none;
}

/* 마우스 호버 시에도 다른 메뉴와 동일하게 유지 */
.dropbtn:hover {
    color: #000000;
}

/* 1. 드롭다운 전체 박스 */
.dropdown-content {
    display: none !important;
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.98);
    
    /* 🔥 핵심 수정: 고정 너비를 제거하고 내용물에 맞춤 */
    width: max-content;    /* 내용물 중 가장 긴 줄에 너비를 맞춤 */
    min-width: 120px;      /* 너무 짧을 경우를 대비한 최소 너비 (선택 사항) */
    
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 8px 0 !important;
    border-radius: 8px;
    overflow: hidden;
}

/* 2. 내부 메뉴 항목 (링크) */
.dropdown-content a {
    color: #333 !important;
    padding: 10px 20px !important; /* 좌우 여백을 일정하게 유지 */
    text-align: left !important;
    display: block !important;
    
    /* 🔥 핵심 수정: 너비를 100%로 채우되 줄바꿈 방지 */
    width: 100%;
    white-space: nowrap;   /* 텍스트가 길어도 박스를 늘리지 줄바꿈하지 않음 */
    
    text-decoration: none;
    font-size: 15px;
    font-weight: normal;
    box-sizing: border-box !important;
    transition: all 0.2s ease;
}

/* 마우스 호버 시 강조 (텍스트 굵게) */
.dropdown-content a:hover {
    background-color: transparent !important;
    color: #000 !important;
    font-weight: bold !important;
}

/* 드롭다운 표시 */
.dropdown:hover .dropdown-content {
    display: block !important;
}


/* 공지사항 섹션 전체 컨테이너 */
.main-notice-section {
    max-width: 1200px;
    margin: 60px auto; /* 위아래 여백을 주고 좌우 중앙 정렬 */
    padding: 0 20px;
    text-align: center; /* 내부 텍스트 요소들을 중앙으로 */
}

/* 공지사항 제목 스타일 */
.main-notice-section h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 40px; /* 제목과 카드 사이 간격 */
    border-bottom: none !important; /* 🔥 밑줄 제거 */
    display: inline-block; /* 중앙 정렬을 위해 인라인 블록화 */
    letter-spacing: 1px;
}

/* 카드 그리드 설정 */
.notice-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: left; /* 카드 내부 글자는 다시 왼쪽 정렬 */
}

.notice-card {
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: block;
}

.notice-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.notice-thumb {
    height: 180px;
    background-size: cover;
    background-position: center;
}

.notice-body {
    padding: 25px;
}

/* 모바일 대응 */
@media (max-width: 900px) {
    .notice-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .notice-card-grid { grid-template-columns: 1fr; }
}



.notice-thumb {
    width: 100%;
    height: 180px; /* 원하는 카드 높이 */
    background-size: cover; /* 이미지가 꽉 차게 */
    background-position: center; /* 중앙 정렬 */
    background-repeat: no-repeat;
    border-radius: 8px 8px 0 0;
}


@media screen and (max-width: 768px) {
    /* 1. 상세 페이지 전체 컨테이너 상단 여백 제거 */
    .single #wrapper_without_footer,
    .single main,
    .single .entry-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 2. 포스트 타이틀(서적 제목) 영역의 위쪽 공백 축소 */
    .single .entry-header,
    .single .post-title-area {
        padding-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* 3. 헤더 바로 밑에 본문이 붙도록 헤더 마진 보정 */
    .single header {
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }

    /* 4. 혹시 모를 테마 내부의 투명한 간격 요소(Spacer) 숨기기 */
    .single .vc_empty_space, 
    .single .wp-block-spacer {
        display: none !important;
    }
}