/* =========================================================================
   Bishop's Glen — Editorial Journal Theme
   Inspired by The Marginalian: warm paper background, serif wordmark,
   restrained rules, single accent. Lab identity = ink-green accent.
   ========================================================================= */

:root {
    --bg-cream:    #f7f4ec;   /* 따뜻한 종이색 (순백 아님) */
    --bg-paper:    #fffdf8;   /* 본문/카드 바탕 */
    --bg-band:     #efe9da;   /* 헤더/푸터 띠 — 본문과 차별화 */
    --ink:         #1b1a17;   /* 따뜻한 먹색 */
    --ink-soft:    #4a463e;   /* 보조 텍스트 */
    --ink-faint:   #9a9384;   /* 메타/희미한 텍스트 */
    --rule:        #ddd5c4;   /* 가는 구분선 */
    --rule-strong: #c9bfa8;
    --accent:      #1f4d3a;   /* 잉크 그린 — Bishop's Glen Lab */
    --accent-deep: #143426;
    --accent-warm: #9a2b1f;   /* 빨강 액센트 (강조/하트) */
    --gold:        #b08d4c;   /* 미세 골드 */
    --serif-display: Georgia, "Noto Serif KR", "Apple SD Gothic Neo", "Times New Roman", serif;
    --serif-body:    Georgia, "Noto Serif KR", "Apple SD Gothic Neo", serif;
    --sans-util:     "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}

/* ---- 전역 바탕 & 타이포 ------------------------------------------------- */
body {
    background-color: var(--bg-cream);
    color: var(--ink);
    font-family: var(--serif-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .container,
.sidebar .widget,
.inside-page-header {
    background-color: var(--bg-paper);
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-warm); }

/* =========================================================================
   상단 유틸리티 바 (The Marginalian의 가는 상단 메뉴 느낌)
   functions.php가 .bg-topbar 를 헤더 위에 출력
   ========================================================================= */
.bg-topbar {
    background: var(--ink);
    color: var(--bg-cream);
    font-family: var(--sans-util);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bg-topbar .bg-topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.bg-topbar .bg-topbar-tag { opacity: 0.78; font-style: normal; }
.bg-topbar nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 22px; flex-wrap: wrap;
}
.bg-topbar nav a {
    color: var(--bg-cream);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity .2s, color .2s;
}
.bg-topbar nav a:hover { opacity: 1; color: var(--gold); }

/* =========================================================================
   사이트 헤더 — 중앙 정렬 세리프 워드마크 (The Marginalian 핵심)
   ========================================================================= */
.site-header {
    background-color: var(--bg-band);
    border-top: 3px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    box-shadow: inset 0 -1px 0 var(--bg-paper);
}
.bg-masthead {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 30px;
    text-align: left;
}
/* 작은 캡션 (LAB 라벨) */
.bg-masthead .bg-eyebrow {
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
    display: inline-block;
    position: relative;
}
.bg-masthead .bg-eyebrow::after {
    content: "";
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--rule-strong);
    vertical-align: middle;
    margin: 0 0 0 12px;
}
/* 워드마크 */
.bg-masthead .bg-wordmark {
    display: block;
    margin: 0;
    line-height: 1;
}
.bg-masthead .bg-wordmark a {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(34px, 6vw, 62px);
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
    transition: color .2s;
}
.bg-masthead .bg-wordmark a:hover { color: var(--accent); }
.bg-masthead .bg-wordmark .bg-amp {
    font-style: italic;
    color: var(--gold);
}
/* 태그라인 */
.bg-masthead .bg-tagline {
    margin: 16px 0 0;
    font-family: var(--serif-body);
    font-style: italic;
    font-size: clamp(14px, 2vw, 17px);
    color: var(--ink-soft);
}
.bg-masthead .bg-tagline-en {
    display: block;
    margin-top: 4px;
    font-family: var(--sans-util);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* GeneratePress 기본 페이지 메뉴 내비는 숨김 (상단바로 대체) */
#site-navigation.main-navigation { display: none; }
/* 데스크탑에서 헤더 내부의 모바일 토글 버튼도 숨김 */
.mobile-menu-control-wrapper { display: none; }

/* =========================================================================
   왼쪽 사이드바 — The Marginalian 식 위젯 스택
   ========================================================================= */
.is-left-sidebar { width: 25%; }
.site-content .content-area { width: 75%; }
.sidebar .widget, .sidebar .bg-widget {
    background-color: transparent;
    padding: 0 0 32px;
    margin: 0;
}
.sidebar .inside-right-sidebar,
.sidebar .inside-left-sidebar { padding: 0; }

/* 위젯 제목 — 대문자 유틸리티 라벨 + 가는 밑줄 */
.sidebar .widget-title,
.sidebar .widget h2,
.sidebar .bg-widget .widget-title {
    font-family: var(--sans-util);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid var(--rule);
    padding: 0 0 10px;
    margin: 0 0 14px;
}

/* 위젯 목록 */
.sidebar .widget ul,
.sidebar .bg-widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget li,
.sidebar .bg-widget li {
    padding: 7px 0;
    border-bottom: 1px solid #efe9da;
}
.sidebar .widget li:last-child { border-bottom: none; }
.sidebar .widget a,
.sidebar .bg-widget a {
    font-family: var(--serif-body);
    font-size: 15px;
    color: var(--ink-soft);
    text-decoration: none;
}
.sidebar .widget a:hover,
.sidebar .bg-widget a:hover { color: var(--accent-warm); }

/* 구독 위젯 */
.bg-widget-subscribe .bg-sub-copy {
    font-family: var(--serif-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0 0 12px;
}
.bg-widget-subscribe .bg-sub-link {
    font-family: var(--sans-util);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
}
.bg-widget-subscribe .bg-sub-link:hover { color: var(--accent-warm); border-color: var(--accent-warm); }

/* 인트로 일러스트 위젯 */
.bg-widget-intro { padding-bottom: 28px; }
.bg-intro-art {
    margin: 0 0 16px;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 2px 14px rgba(31,77,58,0.14);
}
.bg-intro-art img { width: 100%; height: auto; display: block; }
.bg-intro-copy {
    font-family: var(--serif-body);
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
}

/* 카테고리 글 개수 배지 */
.bg-cat-count {
    float: right;
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    background: var(--bg-band);
    border-radius: 10px;
    padding: 1px 9px;
    line-height: 1.7;
}
.sidebar .bg-widget a:hover .bg-cat-count { color: var(--accent); }

/* 사이드바와 본문 사이 구분감: 사이드바에 가는 우측 라인 */
@media (min-width: 769px) {
    .inside-left-sidebar { padding-right: 32px; border-right: 1px solid var(--rule); }
}

/* 추천 읽기(인기글) 위젯 */
.bg-popular-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.bg-popular-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #efe9da;
}
.bg-popular-item:last-child { border-bottom: none; }
.bg-popular-num {
    font-family: var(--serif-display);
    font-size: 18px;
    font-style: italic;
    color: var(--gold);
    line-height: 1.3;
    flex: 0 0 auto;
    min-width: 22px;
}
.bg-popular-body { display: flex; flex-direction: column; gap: 3px; }
.bg-popular-title {
    font-family: var(--serif-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    text-decoration: none;
}
.bg-popular-title:hover { color: var(--accent-warm); }
.bg-popular-cat {
    font-family: var(--sans-util);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* 오늘의 인용 위젯 */
.bg-widget-quote .bg-quote {
    margin: 0;
    padding: 4px 0 0 16px;
    border-left: 2px solid var(--gold);
}
.bg-quote-text {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 10px;
}
.bg-quote-cite {
    font-family: var(--sans-util);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* 달력 위젯 톤 정리 */
.sidebar .wp-block-calendar table { font-family: var(--sans-util); font-size: 12px; }
.sidebar .wp-block-calendar caption {
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* =========================================================================
   본문 / 아카이브 카드 — 저널형 헤드라인
   ========================================================================= */

/* 카드 테두리/배경 제거 → 종이 위 글이 흐르는 The Marginalian 느낌 */
.separate-containers .inside-article {
    background-color: transparent;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 40px;
    margin-bottom: 8px;
}
.separate-containers .site-main > article:last-of-type .inside-article {
    border-bottom: none;
}
.entry-title {
    font-family: var(--serif-display);
    font-weight: 400;
    letter-spacing: 0.005em;
}
.entry-title a { color: var(--ink); text-decoration: none; }
.entry-title a:hover { color: var(--accent-warm); }

.entry-meta {
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.entry-meta a { color: var(--ink-soft); }

.entry-summary, .entry-content { font-size: 1.05rem; line-height: 1.85; }

.read-more {
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
    color: var(--accent);
}
.read-more:hover { color: var(--accent-warm); border-color: var(--accent-warm); }

.cat-links a {
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* 사이드바 위젯 제목 */
.sidebar .widget .widget-title,
.sidebar .widget h2 {
    font-family: var(--sans-util);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 10px;
}

/* =========================================================================
   푸터 — The Marginalian 식 단정한 섹션 + 모노그램
   ========================================================================= */
.site-footer .site-info,
.footer-widgets { background-color: var(--bg-cream); }

.bg-footer {
    border-top: 3px solid var(--accent);
    background: var(--bg-band);
    box-shadow: inset 0 1px 0 var(--bg-paper);
    padding: 48px 24px 12px;
}
.bg-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.bg-footer .bg-monogram {
    width: 54px; height: 54px;
    margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    font-family: var(--serif-display);
    font-size: 22px;
    color: var(--accent);
    letter-spacing: 0.02em;
}
.bg-footer .bg-footer-tagline {
    font-family: var(--serif-body);
    font-style: italic;
    color: var(--ink-soft);
    margin: 0 0 26px;
    font-size: 15px;
}
.bg-footer nav ul {
    list-style: none; margin: 0 0 28px; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 26px;
}
.bg-footer nav a {
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
}
.bg-footer nav a:hover { color: var(--accent-warm); }
.bg-footer .bg-rule {
    width: 60px; height: 1px;
    background: var(--rule-strong);
    margin: 0 auto 22px;
}
.bg-footer .bg-copyright {
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.bg-footer .bg-copyright a { color: var(--ink-soft); text-decoration: none; }

/* =========================================================================
   페이지네이션 — 에디토리얼 톤 (흰 박스 제거, 세리프 번호)
   ========================================================================= */
.paging-navigation {
    background: transparent !important;
    border-top: 1px solid var(--rule);
    margin-top: 8px;
    padding: 28px 0 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}
.paging-navigation .nav-previous,
.paging-navigation .nav-next { display: none; } /* 중복 이전/다음 텍스트 숨김 */
.paging-navigation .nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.paging-navigation .page-numbers {
    font-family: var(--serif-display);
    font-size: 16px;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: var(--ink-soft);
    text-decoration: none;
    border: 1px solid var(--rule);
    border-radius: 50%;
    transition: all .2s;
    padding: 0;
}
.paging-navigation a.page-numbers:hover {
    color: var(--bg-paper);
    background: var(--accent);
    border-color: var(--accent);
}
.paging-navigation .page-numbers.current {
    color: var(--bg-paper);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 400;
}
/* '다음 →' 은 알약형 텍스트 버튼으로 */
.paging-navigation .page-numbers.next,
.paging-navigation .page-numbers.prev {
    font-family: var(--sans-util);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 22px;
    min-width: auto;
    padding: 0 18px;
}

/* GeneratePress 기본 site-info 푸터 전체 숨김 (커스텀 .bg-footer로 대체) */
.site-footer .site-info { display: none; }

/* =========================================================================
   반응형
   ========================================================================= */
@media (max-width: 768px) {
    .bg-topbar .bg-topbar-inner { flex-direction: column; gap: 8px; text-align: center; }
    .bg-topbar nav ul { justify-content: center; gap: 16px; }
    .bg-masthead { padding: 28px 18px 22px; }
    .main-navigation .inside-navigation { border-top: 1px solid var(--rule); }
    .bg-footer nav ul { gap: 16px; }
}

/* 접근성: 포커스 가시성 */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}