/*
Theme Name:   BO.OK Magazine (GeneratePress Child)
Theme URI:    https://example.com
Description:  BO.OK 매거진 스타일 커스텀 자식 테마. 부모 테마: GeneratePress
Author:       Your Name
Template:     generatepress
Version:      1.0.0
Text Domain:  bookmag
*/

/* =========================================================
   1. 기본 변수
========================================================= */
:root{
  --bm-accent:#1a3bff;
  --bm-ink:#181818;
  --bm-gray:#8a8a8a;
  --bm-line:#eaeaea;
}

body{
  color:var(--bm-ink);
}
a{ text-decoration:none; }

/* =========================================================
   2. 사이드바 레이아웃
   설정 방법: 외모 > 커스터마이즈 > Layout > Sidebars 에서
   "Left Sidebar" 선택 (사이트 전체 또는 페이지별로 지정 가능:
   글/페이지 편집 화면 하단 "GeneratePress Layout Settings" 박스에서도 개별 설정 가능)
========================================================= */
#left-sidebar.widget-area{
  width:230px;
}
#left-sidebar .inside-left-sidebar{
  padding-right:20px;
}

/* 위젯 제목 숨기기 (디자인상 제목 없이 아이콘/텍스트만 노출) */
#left-sidebar .widget-title{
  display:none;
}

/* =========================================================
   3. 로고 위젯
   설정 방법: 외모 > 위젯 > Primary Sidebar 맨 위에
   "커스텀 HTML" 위젯 추가 후 아래 마크업 붙여넣기:

   <div class="bm-logo">
     BO<br>OK
     <span class="bm-vertical">magazine</span>
   </div>
========================================================= */
.bm-logo{
  background:var(--bm-accent);
  color:#fff;
  width:190px;
  height:190px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
  font-weight:800;
  line-height:0.95;
  font-size:38px;
  letter-spacing:-1px;
  margin-bottom:8px;
}
.bm-logo .bm-vertical{
  position:absolute;
  right:14px;
  bottom:20px;
  writing-mode:vertical-rl;
  font-size:11px;
  font-weight:400;
  letter-spacing:2px;
  opacity:.85;
}

/* =========================================================
   4. 사이드바 내비게이션 메뉴 위젯 (카테고리 2단 구조)
   설정 방법:
   1) 외모 > 메뉴 > 새 메뉴 만들기
   2) 좌측 "카테고리" 패널에서 아래 항목 체크 후 "메뉴에 추가":
      - 내돈내산 리뷰 (상위)
        - 기타 제품 리뷰
        - 뷰티·헬스제품 리뷰
        - 생활가전 제품리뷰
        - 아기용품 리뷰
      - 부동산 (상위)
        - 부동산 꿀팁
        - 청약정보
        - 최신 부동산 뉴스
   3) 하위 카테고리 항목을 마우스로 살짝 오른쪽으로 드래그해서
      상위 카테고리 아래 "하위 항목"으로 들여쓰기 (사다리꼴 들여쓰기 표시됨)
   4) 메뉴 이름 지정 후 저장
   5) 외모 > 위젯 > Primary Sidebar 에 "탐색 메뉴" 위젯 추가 후 방금 만든 메뉴 선택
========================================================= */
#left-sidebar .widget_nav_menu .menu{
  margin:0 0 24px;
  padding:0;
  list-style:none;
}
#left-sidebar .widget_nav_menu .menu > li{
  list-style:none;
  margin:0 0 4px;
}
#left-sidebar .widget_nav_menu .menu > li > a{
  font-size:15px;
  font-weight:700;
  color:var(--bm-ink);
  letter-spacing:.3px;
  display:inline-block;
  padding:6px 0;
}
#left-sidebar .widget_nav_menu .menu > li > a:hover{ color:var(--bm-accent); }

/* 하위 항목이 있는 상위 카테고리 */
#left-sidebar .widget_nav_menu .menu-item-has-children{
  position:relative;
}
#left-sidebar .widget_nav_menu .menu-item-has-children > a{
  position:relative;
  padding-right:18px;
}
#left-sidebar .widget_nav_menu .menu-item-has-children > a::after{
  content:"";
  position:absolute;
  right:2px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid var(--bm-gray);
  border-bottom:1.5px solid var(--bm-gray);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .15s;
}
#left-sidebar .widget_nav_menu .menu-item-has-children:hover > a::after{
  transform:translateY(-30%) rotate(225deg);
}

/* 하위 카테고리(2단계) - 기본은 접힌 상태, 마우스 오버 시 펼쳐짐 */
#left-sidebar .widget_nav_menu .sub-menu{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:0;
  overflow:hidden;
  transition:max-height .2s ease;
}
#left-sidebar .widget_nav_menu .menu-item-has-children:hover .sub-menu{
  max-height:400px;
}
#left-sidebar .widget_nav_menu .sub-menu li{ list-style:none; }
#left-sidebar .widget_nav_menu .sub-menu a{
  font-size:13px;
  font-weight:400;
  color:var(--bm-gray);
  padding:4px 0 4px 14px;
  display:inline-block;
  position:relative;
}
#left-sidebar .widget_nav_menu .sub-menu a::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--bm-gray);
}
#left-sidebar .widget_nav_menu .sub-menu a:hover{ color:var(--bm-accent); }

/* =========================================================
   5. 연락처 텍스트 위젯
   설정 방법: Primary Sidebar 에 "텍스트(Text)" 위젯 추가,
   아래 내용을 붙여넣고 클래스는 "고급" 탭에서
   추가 CSS 클래스에 bm-contact 입력 (또는 커스텀 HTML 위젯 사용)

   Tel. 000-0000-0000
   Fax. 00-0000-0000
   E-mail. book@book.coom
   Addr. Seoul, Korea
   Hosting by I'MWEB
========================================================= */
#left-sidebar .bm-contact{
  font-size:12.5px;
  color:var(--bm-gray);
  line-height:2.1;
  margin-bottom:20px;
}
/* 클래스를 못 붙이는 텍스트 위젯이면 아래처럼 위젯 자체를 타게팅 */
#left-sidebar .widget_text p{
  font-size:12.5px;
  color:var(--bm-gray);
  line-height:2.1;
}

/* =========================================================
   6. 소셜 아이콘
   GeneratePress 코어에는 소셜 아이콘 위젯이 없어서
   "커스텀 HTML" 위젯으로 아래 마크업을 추가하는 걸 추천:

   <div class="bm-social">
     <a href="#" aria-label="Facebook">f</a>
     <a href="#" aria-label="Instagram">◎</a>
     <a href="#" aria-label="Twitter">𝕏</a>
   </div>
========================================================= */
.bm-social{
  display:flex;
  gap:14px;
}
.bm-social a{
  width:30px;height:30px;
  border-radius:50%;
  border:1.5px solid var(--bm-ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--bm-ink);
  font-size:13px;
  transition:.15s;
}
.bm-social a:hover{
  background:var(--bm-ink);
  color:#fff;
}

/* =========================================================
   7. 메인 콘텐츠 - 매거진 카드 그리드 (masonry)
   설정 방법: 페이지 편집에서 "쿼리 반복기(Query Loop)" 블록 삽입 →
   블록 설정(고급) > 추가 CSS 클래스에 "bm-grid" 입력

   반응형 컬럼 수:
   - 1101px 이상: 3열
   - 641px ~ 1100px: 2열
   - 640px 이하: 1열
   (모두 CSS 멀티컬럼 기반 masonry라 이미지 높이가 제각각이어도
    자동으로 빈틈없이 쌓입니다)
========================================================= */
.bm-grid{
  columns:3 260px;
  column-gap:20px;
}
@media (max-width:1100px){ .bm-grid{ columns:2 260px; } }
@media (max-width:640px){ .bm-grid{ columns:1; column-gap:0; } }

.bm-grid .wp-block-post{
  break-inside:avoid;
  margin-bottom:20px;
  display:inline-block;
  width:100%;
}

.bm-grid .wp-block-post-featured-image img{
  width:100%;
  aspect-ratio:4/5; /* 기본 비율(세로) */
  object-fit:cover;
  display:block;
  margin-bottom:14px;
}

/* 참고 이미지처럼 세로/정사각/가로 이미지가 섞인 리듬을 자동으로 만들어줌
   (Query Loop은 글마다 개별 클래스를 못 붙이므로 순서 기반 패턴 사용) */
.bm-grid .wp-block-post:nth-child(4n+2) .wp-block-post-featured-image img{
  aspect-ratio:1/1; /* 정사각형 */
}
.bm-grid .wp-block-post:nth-child(6n+4) .wp-block-post-featured-image img{
  aspect-ratio:4/3; /* 가로형 */
}
.bm-grid .wp-block-post:nth-child(5n+3) .wp-block-post-featured-image img{
  aspect-ratio:3/4; /* 살짝 긴 세로 */
}

.bm-grid .wp-block-post-title{
  font-size:15.5px;
  font-weight:700;
  margin-bottom:8px;
}
.bm-grid .wp-block-post-title a{ color:var(--bm-ink); }

.bm-grid .wp-block-post-excerpt__excerpt{
  font-size:13px;
  color:var(--bm-gray);
  line-height:1.6;
}

/* 어두운 배경 카드 (특정 글에 "bm-dark" CSS 클래스 수동 추가 시) */
.bm-grid .bm-dark .wp-block-post-featured-image{
  background:#181818;
  color:#fff;
  aspect-ratio:4/5;
  display:flex;
  align-items:flex-end;
  padding:20px;
  font-weight:800;
  font-size:24px;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* =========================================================
   8. 반응형: 모바일에서 사이드바 위로 스택
========================================================= */
@media (max-width:768px){
  #left-sidebar.widget-area{
    width:100%;
    float:none;
  }
  .bm-logo{ width:100%; }
}