@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Noto+Serif+KR:wght@500;700&display=swap');

/**
 * Blog 스타일 레이아웃 — 단일 본문 컬럼 + 오른쪽 사이드바 + 심플 헤더 + 공용 푸터.
 * 2026-04-16 모던 리디자인: 편집형 타이포그래피 + 부드러운 팔레트 + 카드 그림자 + 호버 전환.
 *
 * Blog-style layout: single center column + right sidebar + simple header + shared footer.
 * 2026-04-16 modern redesign: editorial typography, softer palette, elevated cards,
 * smooth transitions. Functionality is unchanged — only visual styling.
 *
 * NOTE: `@import` MUST be at the very top of the file (before any other rule or
 * non-comment content) — otherwise browsers silently drop all subsequent rules.
 * `@import` 는 반드시 파일 최상단에 있어야 한다. 주석보다 아래에 두면 브라우저가
 * 이후 규칙을 조용히 무시한다(실제 겪은 버그).
 */

/* ─── 루트 토큰 (모던 팔레트) / Root tokens (modern palette) ─── */
body.blog-layout {
    /* 편집형 블로그 느낌의 부드러운 배경 / Warm off-white editorial background */
    background:
        radial-gradient(ellipse 1200px 400px at 50% -10%, rgba(99, 102, 241, 0.06), transparent 60%),
        linear-gradient(180deg, #fafaf9 0%, #f5f5f4 100%);
    min-height: 100vh;
    /* 시스템 폰트 스택 — 본문은 sans, 로고/헤딩은 아래에서 serif 적용 */
    /* System font stack — body is sans; logo/headings use serif below */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;
    --blog-accent: #4f46e5;
    --blog-accent-soft: rgba(79, 70, 229, 0.08);
    --blog-ink: #0f172a;
    --blog-muted: #64748b;
    --blog-border: #e5e7eb;
    --blog-card-radius: 14px;
    --blog-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
    --blog-shadow-md: 0 4px 20px -8px rgba(15, 23, 42, 0.1), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
    --blog-shadow-lg: 0 12px 40px -10px rgba(15, 23, 42, 0.15);
}

/* ─── 헤더 ───────────────────────────────────── */
.blog-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 28px 24px 22px;
    text-align: center;
    box-shadow: var(--blog-shadow-sm);
}
.blog-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
/* 디자인 모드: 로고 설정 아이콘은 로고 바로 옆 인라인에 배치 */
.blog-header-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.blog-header-logo-row #header-settings-app {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.blog-header-logo {
    display: inline-block;
    font-family: "Playfair Display", "Noto Serif KR", "Source Serif Pro", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--blog-ink);
    text-decoration: none;
    letter-spacing: -0.03em;
    line-height: 1.1;
    position: relative;
    transition: color 0.2s ease;
}
.blog-header-logo:hover { color: var(--blog-accent); }
.blog-header-logo img { max-height: 44px; display: block; }

/* 카테고리 nav 스크롤 래퍼 / Category nav scroll wrapper */
.blog-nav-scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.blog-nav-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--blog-muted);
    transition: color 0.15s, box-shadow 0.15s;
}
.blog-nav-scroll-btn:hover {
    color: var(--blog-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.blog-nav-scroll-left { left: -14px; }
.blog-nav-scroll-right { right: -14px; }

/* 카테고리 nav / Category nav
 * 컨테이너 레벨에서의 센터링은 부모 `.blog-nav-scroll-wrapper` 의
 * `justify-content: center` 가 담당한다. 이 nav 자체는 flex child 로서
 * content-width 로 축소되므로, 콘텐츠가 좁을 땐 부모가 가운데로 밀어준다.
 * 반대로 콘텐츠가 max-width(100%) 를 넘어서면 nav 는 100% 로 확장되어
 * 내부 스크롤이 생긴다 — 이때 `justify-content: flex-start` 여야 왼쪽부터
 * 스크롤이 가능해진다. `center` 나 `safe center` 를 쓰면 모바일에서 좌측
 * 칩(Community 등)이 잘려 스크롤로도 접근 불가. */
.blog-header-nav {
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    background: rgba(15, 23, 42, 0.03);
    border-radius: 999px;
    max-width: 100%;
    margin: 0 auto;
}
.blog-header-nav::-webkit-scrollbar { display: none; }
.blog-cat-link {
    color: var(--blog-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 999px;
    white-space: nowrap;
    transition: all 0.18s ease;
    letter-spacing: 0.01em;
}
.blog-cat-link:hover {
    color: var(--blog-ink);
    background: #ffffff;
    box-shadow: var(--blog-shadow-sm);
}
/* 활성 카테고리 / Active category */
.blog-cat-link.is-active {
    background: var(--blog-ink);
    color: #ffffff;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.3);
}
.blog-cat-link.is-active:hover {
    background: var(--blog-accent);
    color: #ffffff;
    box-shadow: 0 2px 8px -2px rgba(79, 70, 229, 0.4);
}

/* ─── 메가 카테고리 내비게이션 ─────────────────────────────
   루트 행은 단일 필 스트립으로 항상 노출. 자식이 있는 루트는 hover(데스크톱) /
   tap(모바일) 시 메가 패널을 열어 depth-1 + depth-2 자식을 한 번에 노출한다.
   이전의 3행 점진적 드러내기는 드릴다운에 최소 2번의 클릭이 필요해 UX 가 피곤했다.
   Single-row category strip with a hover/tap mega panel that exposes depth-1 and
   depth-2 children at once — replaces the previous 3-row progressive disclosure
   which required 2+ clicks to drill down to a leaf. Current location is shown
   via in-panel .is-active styling plus a compact breadcrumb below the strip.
   ────────────────────────────────────────────────────── */

/* 바깥 래퍼 — 루트 행 + 메가 패널 + 브레드크럼을 감싼 relative 기준점 */
/* Outer wrap — relative anchor for mega panel + breadcrumb positioning */
.blog-cat-mega-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* 자식 있음을 알리는 캐럿 (호버 시 180° 회전) */
/* Caret indicating "has children"; rotates 180° on hover / panel open */
.blog-cat-link.has-panel {
    padding-right: 14px;
}
.blog-cat-caret {
    font-size: 0.6em;
    margin-left: 5px;
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: inline-block;
    vertical-align: middle;
}
.blog-cat-link.has-panel:hover .blog-cat-caret,
.blog-cat-link.has-panel[aria-expanded="true"] .blog-cat-caret {
    opacity: 1;
    transform: rotate(180deg);
}

/* 메가 패널 — hover/tap 으로 열리며 depth-1/2 자식을 한 패널에서 노출.
   JS 가 open 시점에 트리거된 chip 중심에 맞춰 panel.style.left 를 설정한다.
   CSS 기본값은 대피소(fallback) 로 메가 래퍼 중심에 둔다.
   Mega panel — JS sets panel.style.left at open time to align the panel's
   horizontal center with the triggering chip. The CSS default (left:50%) is a
   fallback used only when JS has not yet computed a position. Positioned
   absolute relative to .blog-cat-mega-wrap so it escapes the root row's
   horizontal scroll overflow. */
.blog-cat-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    z-index: 1100;
    background: #ffffff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-card-radius);
    box-shadow: var(--blog-shadow-lg);
    padding: 18px 20px;
    min-width: 240px;
    max-width: min(640px, calc(100vw - 24px));
    max-height: min(72vh, 540px);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    text-align: left;
    scrollbar-width: thin;
}
.blog-cat-panel[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.blog-cat-panel[hidden] { display: none; }

/* 패널 내부: 그룹이 많으면 자동으로 2~3컬럼 그리드 */
/* Inside the panel: groups auto-grid into 2–3 columns on wide panels */
.blog-cat-panel-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px 28px;
}
.blog-cat-panel-group {
    min-width: 0;
}

/* 그룹 헤더 (depth-1) — 편집형 세리프로 승격 */
/* Group header (depth-1) — editorial serif treatment */
.blog-cat-panel-head {
    display: block;
    font-family: "Playfair Display", "Noto Serif KR", Georgia, serif;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--blog-ink);
    text-decoration: none;
    padding: 5px 8px;
    margin: 0 -8px 6px;
    border-radius: 7px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.blog-cat-panel-head:hover {
    background: var(--blog-accent-soft);
    color: var(--blog-accent);
}
.blog-cat-panel-head.is-active {
    color: var(--blog-accent);
    background: var(--blog-accent-soft);
}

/* 리프 리스트 (depth-2) */
/* Leaf list (depth-2) */
.blog-cat-panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.blog-cat-panel-leaf {
    display: block;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--blog-muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.blog-cat-panel-leaf:hover {
    background: rgba(15, 23, 42, 0.04);
    color: var(--blog-ink);
}
.blog-cat-panel-leaf.is-active {
    background: var(--blog-accent-soft);
    color: var(--blog-accent);
    font-weight: 600;
}

/* 모바일(≤600px): 패널이 뷰포트 좌우 8px 여백으로 꽉 차도록, 그룹은 1컬럼.
   JS 가 설정한 style.left 를 덮어쓰기 위해 !important 를 사용한다.
   Mobile: panel fills viewport minus 8px inset; overrides the JS-set
   style.left with !important so chip-anchored positioning is bypassed. */
@media (max-width: 600px) {
    .blog-cat-panel {
        left: 8px !important;
        right: 8px;
        transform: translateY(-4px) !important;
        max-width: calc(100vw - 16px);
        padding: 14px 16px;
    }
    .blog-cat-panel[data-open="true"] {
        transform: translateY(0) !important;
    }
    .blog-cat-panel-inner {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* 헤더 검색 / Header search */
.blog-header-search {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.blog-header-search .header-search-input {
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.9rem;
    border: 1px solid var(--blog-border);
    background: #ffffff;
    box-shadow: var(--blog-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-header-search .header-search-input:focus {
    outline: none;
    border-color: var(--blog-accent);
    box-shadow: 0 0 0 4px var(--blog-accent-soft), var(--blog-shadow-md);
}
.blog-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-card-radius);
    box-shadow: var(--blog-shadow-lg);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1200;
    text-align: left;
    padding: 4px;
}
.blog-search-dropdown .search-dropdown-item,
.blog-search-dropdown .search-dropdown-all {
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--blog-ink);
    border-radius: 8px;
    border-bottom: none;
    transition: background 0.15s ease;
}
.blog-search-dropdown .search-dropdown-item:hover,
.blog-search-dropdown .search-dropdown-all:hover {
    background: var(--blog-accent-soft);
}
.blog-search-dropdown .search-dropdown-title {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 4px;
    color: var(--blog-ink);
}
.blog-search-dropdown .search-dropdown-content {
    font-size: 0.78rem;
    color: var(--blog-muted);
    line-height: 1.5;
}
.blog-search-dropdown .search-dropdown-empty {
    padding: 20px 14px;
    color: var(--blog-muted);
    font-size: 0.85rem;
    text-align: center;
}
.blog-search-dropdown em {
    background: #fef3c7;
    color: #78350f;
    font-style: normal;
    padding: 0 2px;
    border-radius: 2px;
}

/* 우측 상단 액션 (언어/알림/팔로우/채팅/프로필/관리) */
/* Top-right actions (language/notifications/follow/chat/profile/admin) */
.blog-header-actions {
    position: absolute;
    top: 18px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
    padding: 4px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.blog-action {
    position: relative;
    color: var(--blog-muted);
    background: transparent;
    border: 0;
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
}
.blog-action:hover {
    background: #ffffff;
    color: var(--blog-ink);
    box-shadow: var(--blog-shadow-sm);
    transform: translateY(-1px);
}
.blog-action-badge { position: relative; }
.blog-header-actions .nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #ffffff;
}
.blog-header-actions .nav-badge[hidden] { display: none; }

/* 언어 드롭다운 버튼 / Language picker button */
.blog-lang-btn .topbar-lang-flag {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
}
.topbar-lang-menu {
    min-width: 170px;
    border-radius: 12px;
    border: 1px solid var(--blog-border);
    box-shadow: var(--blog-shadow-md);
    padding: 6px;
    margin-top: 8px;
}
.topbar-lang-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    transition: background 0.15s ease;
}
.topbar-lang-menu .dropdown-item:hover { background: var(--blog-accent-soft); }
.topbar-lang-menu .dropdown-item.active {
    background: var(--blog-ink);
    color: #ffffff;
}

/* 오너 없음 배너 / No-owner banner */
.no-owner-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #facc15;
}
.no-owner-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: #78350f;
    font-weight: 500;
}
.no-owner-banner-inner i.fa-bullhorn { color: #d97706; }

/* ─── 본문 영역 ─────────────────────────────── */
/* 기본(사이드바 없음): 1컬럼. 좌/우 사이드바 유무에 따라 modifier 클래스로 컬럼 확장.
   Base layout has no sidebars (1 column). Left/right sidebars are opted-in via
   .blog-body--has-left / .blog-body--has-right modifier classes set by PHP. */
.blog-body {
    max-width: 1240px;
    margin: 40px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: flex-start;
}
.blog-body--has-left:not(.blog-body--has-right) {
    grid-template-columns: 240px minmax(0, 1fr);
}
.blog-body--has-right:not(.blog-body--has-left) {
    grid-template-columns: minmax(0, 1fr) 320px;
}
.blog-body--has-left.blog-body--has-right {
    grid-template-columns: 240px minmax(0, 1fr) 320px;
}
.blog-sidebar-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.blog-content {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: #334155;
}
.blog-content > *:first-child { margin-top: 0; }

/* 홈 페이지: .blog-body 를 단일 컬럼으로 축소 (홈 위젯 그리드가 자체 사이드바를 가짐) */
/* Home page: collapse .blog-body to single column — .home-layout inside brings
   its own 3-col grid, so outer sidebars would duplicate the same widgets. */
body.blog-layout .blog-body:has(.home-layout) {
    grid-template-columns: 1fr;
}
body.blog-layout .blog-body:has(.home-layout) > .blog-sidebar {
    display: none;
}

/* ─── 홈 위젯 그리드 오버라이드 — 블로그 느낌으로 재배치 ─── */
/* Override .home-layout inside blog layout — proper 3-column grid:
   left sidebar | center content | right sidebar. Matches the default
   site.php layout intent but with the blog layout's editorial styling.
   Functionality preserved — pure visual override.
   좌측 사이드바 | 중앙 콘텐츠 | 우측 사이드바 3컬럼 그리드로 배치한다.
   사이드바 내부 위젯은 flex 컬럼으로 위에서부터 쌓인다. */
body.blog-layout .blog-content .home-layout {
    grid-template-columns: 240px minmax(0, 1fr) 300px !important;
    column-gap: 32px !important;
    row-gap: 16px !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-items: start;
}
/* 디자인 모드 오버레이는 .blog-content 밖에서 .home-layout 을 렌더하므로
   3컬럼 그리드만 강제하고 max-width/margin 은 app.css 기본값
   (max-width:1200px; margin:0 auto) 을 그대로 사용해야 한다.
   그렇지 않으면 뷰포트 전체로 펼쳐져 플로팅 배너가 중앙 컬럼을 덮친다. */
body.blog-layout #sidebar-design-mode .home-layout {
    grid-template-columns: 240px minmax(0, 1fr) 300px !important;
    column-gap: 32px !important;
    row-gap: 16px !important;
    align-items: start;
}
body.blog-layout .home-layout .home-sidebar-left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.blog-layout .home-layout .home-center {
    grid-column: 2;
}
body.blog-layout .home-layout .home-sidebar-right {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* 사이드바가 하나라도 비어 있을 때 중앙이 남는 공간을 차지하도록 컬럼 축소 */
/* Collapse empty sidebar columns so center widgets fill freed space */
body.blog-layout .home-layout--no-left.home-layout--no-right {
    grid-template-columns: 1fr !important;
}
body.blog-layout .home-layout--no-left:not(.home-layout--no-right) {
    grid-template-columns: minmax(0, 1fr) 300px !important;
}
body.blog-layout .home-layout--no-left:not(.home-layout--no-right) .home-center {
    grid-column: 1;
}
body.blog-layout .home-layout--no-left:not(.home-layout--no-right) .home-sidebar-right {
    grid-column: 2;
}
body.blog-layout .home-layout--no-right:not(.home-layout--no-left) {
    grid-template-columns: 240px minmax(0, 1fr) !important;
}

/* 홈 위젯 카드 — 편집형 스타일로 승격 / Home widgets: editorial card treatment */
body.blog-layout .home-layout .widget-wrapper {
    background: #ffffff;
    border-radius: var(--blog-card-radius);
    border: 1px solid rgba(15, 23, 42, 0.04);
    box-shadow: var(--blog-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.blog-layout .home-layout .widget-wrapper:hover {
    box-shadow: var(--blog-shadow-md);
}
/* 홈 위젯 헤더 — 편집형 느낌 / Widget headings get editorial treatment */
body.blog-layout .home-layout .widget-wrapper h6 {
    color: var(--blog-ink);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* 중앙 위젯(게시판 등)은 본문 같은 편집형 헤딩 스타일만 적용한다.
   과거에는 min-height: 480px 로 강제 늘렸는데, 빈 상태 / 짧은 콘텐츠일 때
   위젯 하단에 큰 공백이 생겨 다른 레이아웃과 달라 보였다. 자연 높이를 존중해
   공백을 제거한다. */
/* Center widgets keep only the editorial heading treatment. The previous
   min-height:480px padded every wrapper to 480px even when its content was
   short/empty, producing large blank areas unique to the blog layout. Removed
   so wrappers hug their natural content height. */
body.blog-layout .home-layout .home-center > .widget-wrapper h6 {
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: -0.01em;
}

/* ─── 2-컬럼 탭 위젯: 외부 래퍼 중복 제거 ───────────────────
   recent-posts-tabs 는 내부에 2개의 자체 카드(.recent-posts-tab-card)를
   갖는다. 블로그 레이아웃의 .widget-wrapper 가 다시 한 번 흰 카드로 감싸면
   (1) 카드-인-카드 중첩, (2) overflow:hidden + border-radius 로 내부 카드
   모서리가 잘림, (3) 두 내부 카드 사이 갭에 외부 카드의 흰 바탕이 보이는
   문제가 발생한다. 이 위젯을 품은 래퍼만 투명 처리해 원래 설계대로
   두 카드가 페이지 배경 위에 바로 놓이도록 한다. :has() 를 사용해 다른
   위젯에는 영향 없음. */
/* Tabs widget: suppress the outer wrapper when it contains its own 2
   inner cards. Prevents the card-in-card artifact, the clipped inner
   corners (outer overflow:hidden + 14px radius vs. inner square corners),
   and the white gap-band between tabs. Uses :has() so no other widget is
   affected. */
body.blog-layout .home-layout .widget-wrapper:has(> .widget-recent-posts-tabs) {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
}
body.blog-layout .home-layout .widget-wrapper:has(> .widget-recent-posts-tabs):hover {
    box-shadow: none;
}
/* 내부 두 카드는 블로그 레이아웃 디자인 토큰으로 승격 — 다른 위젯 카드와
   같은 모서리/그림자/보더 톤을 쓰도록 한다.
   보더 색만 --blog-border(#e5e7eb) 로 강화: 다른 위젯 카드들은 흰색 .widget-wrapper
   위에 놓여 저대비(4% 검정) 보더로도 선이 보이지만, 이 두 카드는 부모 래퍼가
   투명 처리되어 페이지 배경(웜 오프화이트)에 직접 놓이기 때문에 같은 4% 보더가
   시각적으로 사라져 보인다. 지각적 동등을 맞추기 위해 블로그 레이아웃의
   기본 보더 토큰(#e5e7eb)을 쓴다. */
/* Inner tab cards inherit blog-layout design tokens to match the radius,
   shadow, and overall tone of every other widget card. The border color is
   bumped to --blog-border (#e5e7eb) — other wrappers sit on white parents
   where the 4%-black border reads fine, but these two cards sit directly
   on the warm off-white page background, which makes the low-contrast
   border disappear. Using the solid border token gives perceptual parity. */
body.blog-layout .home-layout .recent-posts-tab-card {
    background: #ffffff;
    border-radius: var(--blog-card-radius);
    border: 1px solid var(--blog-border);
    box-shadow: var(--blog-shadow-sm);
    padding: 20px 22px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.blog-layout .home-layout .recent-posts-tab-card:hover {
    box-shadow: var(--blog-shadow-md);
}
body.blog-layout .home-layout .recent-posts-tabs-grid {
    gap: 20px;
}
body.blog-layout .home-layout .tab-card-title {
    font-family: "Playfair Display", "Noto Serif KR", Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--blog-ink);
    text-transform: none;
}
body.blog-layout .home-layout .tab-card-title i {
    color: var(--blog-accent);
}
body.blog-layout .home-layout .tab-card-more {
    color: var(--blog-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   게시글 위젯 — Medium / Ghost / Substack 스타일 피드
   Post widgets — Medium / Ghost / Substack style editorial feed
   Familiar patterns so users immediately recognize it as a blog.
   ═══════════════════════════════════════════════════════════════════ */

/* 카테고리 게시글 위젯 (중앙 메인) / Category posts widget (center main) */
body.blog-layout .widget-category-posts {
    padding: 8px 4px;
}
body.blog-layout .widget-category-posts > .widget-title {
    padding: 16px 24px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    margin-bottom: 8px;
    font-family: "Playfair Display", "Noto Serif KR", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--blog-ink);
}
body.blog-layout .widget-category-posts > .widget-title .widget-title-more {
    font-family: var(--bs-body-font-family);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blog-accent);
    letter-spacing: 0;
}
body.blog-layout .widget-category-posts > .widget-title .widget-title-more:hover {
    color: var(--blog-ink);
}

/* 탭 — Medium 카테고리 필터 느낌 / Tabs like Medium's category filters */
body.blog-layout .widget-category-posts .category-tabs {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding: 0 20px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
body.blog-layout .widget-category-posts .category-tabs::-webkit-scrollbar { display: none; }
body.blog-layout .widget-category-posts .category-tabs .nav-link {
    border: none;
    background: transparent;
    color: var(--blog-muted);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 12px 14px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
body.blog-layout .widget-category-posts .category-tabs .nav-link:hover {
    color: var(--blog-ink);
    background: transparent;
}
body.blog-layout .widget-category-posts .category-tabs .nav-link.active {
    color: var(--blog-ink);
    background: transparent;
    border-bottom-color: var(--blog-ink);
    font-weight: 600;
}

/* 게시글 목록 — Medium/Substack 리스트 카드 / Post list — Medium/Substack list card */
body.blog-layout .widget-category-posts .category-tab-content { padding: 0 24px; }
body.blog-layout .widget-category-posts .post-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    text-decoration: none;
    color: var(--blog-ink);
    transition: transform 0.15s ease;
}
body.blog-layout .widget-category-posts .post-item:last-child {
    border-bottom: none;
}
body.blog-layout .widget-category-posts .post-item:hover {
    background: transparent;
    transform: translateX(2px);
}
body.blog-layout .widget-category-posts .post-item:hover .post-title {
    color: var(--blog-accent);
}
body.blog-layout .widget-category-posts .post-main {
    flex: 1;
    min-width: 0;
}
body.blog-layout .widget-category-posts .post-title {
    font-family: "Playfair Display", "Noto Serif KR", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--blog-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}
body.blog-layout .widget-category-posts .post-stats {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.78rem;
    color: var(--blog-muted);
}
body.blog-layout .widget-category-posts .post-stats .badge-count,
body.blog-layout .widget-category-posts .post-stats .badge-views {
    background: transparent;
    color: var(--blog-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 빈 상태 / Empty state */
body.blog-layout .widget-category-posts .widget-empty,
body.blog-layout .widget-category-posts .widget-empty-sm {
    padding: 48px 20px;
    text-align: center;
    color: var(--blog-muted);
    font-size: 0.9rem;
}
body.blog-layout .widget-category-posts .widget-empty i,
body.blog-layout .widget-category-posts .widget-empty-sm i {
    display: block;
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* 남은 글 수 힌트 / Remaining posts hint */
body.blog-layout .widget-category-posts .category-tab-footer {
    padding: 16px 0 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.04);
}
body.blog-layout .widget-category-posts .more-posts-hint {
    font-size: 0.78rem;
    color: var(--blog-muted);
}

/* 사이드바 최근 글 위젯 — 컴팩트 블로그 스타일 / Sidebar recent posts widget */
body.blog-layout .widget-recent-posts {
    padding: 18px 20px;
}
body.blog-layout .widget-recent-posts .widget-title,
body.blog-layout .widget-recent-comments .widget-title {
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--blog-muted) !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
body.blog-layout .widget-recent-posts .widget-list-item,
body.blog-layout .widget-recent-comments .widget-list-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}
body.blog-layout .widget-recent-posts .widget-list-item:last-child,
body.blog-layout .widget-recent-comments .widget-list-item:last-child {
    border-bottom: none;
}
body.blog-layout .widget-recent-posts .widget-list-link,
body.blog-layout .widget-recent-comments .widget-list-link {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    color: var(--blog-ink);
    transition: color 0.15s ease;
}
body.blog-layout .widget-recent-posts .widget-list-link:hover,
body.blog-layout .widget-recent-comments .widget-list-link:hover {
    color: var(--blog-accent);
}
body.blog-layout .widget-recent-posts .widget-list-title,
body.blog-layout .widget-recent-comments .widget-list-title {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.blog-layout .widget-recent-posts .widget-list-meta,
body.blog-layout .widget-recent-comments .widget-list-meta {
    font-size: 0.75rem;
    color: var(--blog-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

/* 포럼 리스트 페이지 — Vue SPA 스타일링 / Forum list Vue SPA — Medium-style feed */
body.blog-layout #forum-list-app .forum-post-row,
body.blog-layout #forum-list-app .post-row {
    padding: 28px 24px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-top: none !important;
    transition: background 0.15s ease;
}
body.blog-layout #forum-list-app .forum-post-row:hover {
    background: rgba(15, 23, 42, 0.015);
}
body.blog-layout #forum-list-app h2,
body.blog-layout #forum-list-app h3,
body.blog-layout #forum-list-app .post-title,
body.blog-layout #forum-list-app .forum-post-title {
    font-family: "Playfair Display", "Noto Serif KR", Georgia, serif !important;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

/* 본문 안의 카드형 요소는 은은한 그림자로 띄운다 */
/* Card-like elements inside content get subtle elevation */
.blog-content > .card,
.blog-content > section,
.blog-content > article,
.blog-content > form {
    background: #ffffff;
    border-radius: var(--blog-card-radius);
    box-shadow: var(--blog-shadow-sm);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

/* 본문 헤딩 — 세리프 강조 / Editorial serif for content headings */
.blog-content h1,
.blog-content h2,
.blog-content h3 {
    font-family: "Playfair Display", "Noto Serif KR", "Source Serif Pro", Georgia, serif;
    color: var(--blog-ink);
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.blog-content h1 { font-size: 2.25rem; margin-bottom: 0.75rem; }
.blog-content h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.5rem; }
.blog-content h3 { font-size: 1.2rem; margin-top: 1.5rem; }

/* 본문 내 링크 — 편집형 밑줄. 단, 버튼(.btn)·카드 링크는 제외해 Bootstrap 색을 보존 */
/* Editorial underline for content links. Excludes .btn and card-like links
   so Bootstrap button colors (white-on-primary) are preserved. */
.blog-content a:not(.btn):not(.post-item):not(.widget-list-link):not(.widget-title-more):not(.qm-item):not(.widget-wrapper a) {
    color: var(--blog-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.blog-content a:not(.btn):not(.post-item):not(.widget-list-link):not(.widget-title-more):not(.qm-item):not(.widget-wrapper a):hover {
    border-bottom-color: var(--blog-accent);
}

.blog-content blockquote {
    border-left: 3px solid var(--blog-accent);
    padding: 0.25rem 0 0.25rem 1.25rem;
    color: var(--blog-muted);
    font-style: italic;
    margin: 1.5rem 0;
}

.blog-content pre,
.blog-content code {
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
}
.blog-content code {
    background: rgba(15, 23, 42, 0.06);
    padding: 0.1em 0.4em;
    border-radius: 4px;
}
.blog-content pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    overflow-x: auto;
    line-height: 1.6;
}
.blog-content pre code { background: transparent; padding: 0; }

/* 사이드바 위젯 — 카드형 / Sidebar widgets: card-style */
.blog-sidebar {
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
}
/* flex column 기본 flex-shrink:1 때문에 사이드바 max-height 를 초과하는 위젯(예: 바로가기 위젯의 ADMIN 섹션 포함 시)이
   세로로 압축되어 내용이 잘렸다. flex-shrink:0 으로 고정해 위젯은 자연 높이를 유지하고, 초과분은
   .blog-sidebar 자체의 overflow-y:auto 스크롤로 처리한다.
   Without this, the default flex-shrink:1 on column flex items squeezes widgets when their
   combined natural height exceeds the sidebar's max-height — clipping content (notably the
   quick-menu's ADMIN section). Pinning flex-shrink:0 keeps each widget at its natural height
   and lets the sidebar scroll internally instead. */
.blog-sidebar > .widget-wrapper,
.blog-sidebar > * {
    flex-shrink: 0;
}
.blog-sidebar .widget-wrapper {
    background: #ffffff;
    border-radius: var(--blog-card-radius);
    border: 1px solid rgba(15, 23, 42, 0.04);
    box-shadow: var(--blog-shadow-sm);
    overflow: hidden;
    margin-bottom: 0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-sidebar .widget-wrapper:hover {
    box-shadow: var(--blog-shadow-md);
}
/* 이중 카드 방지 — 위젯 내부가 자체 .card 를 가진 경우 배경만 유지 */
/* Avoid double-card effect when widgets already ship their own .card wrapper */
.blog-sidebar .widget-wrapper > .card {
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.blog-sidebar .widget-wrapper h6 {
    color: var(--blog-ink);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ─── 공용 푸터 (partials/footer.php) ──────── */
/* Shared footer reused from partials/footer.php */
body.blog-layout .site-footer {
    margin-top: 64px;
    background: #ffffff;
    border-top: 1px solid var(--blog-border);
    position: relative;
}
body.blog-layout .site-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--blog-accent), #8b5cf6);
    border-radius: 999px;
}
body.blog-layout .site-footer-title {
    font-family: "Playfair Display", "Noto Serif KR", Georgia, serif;
    letter-spacing: -0.01em;
}
body.blog-layout .site-footer a {
    transition: color 0.15s ease, transform 0.15s ease;
}
body.blog-layout .site-footer a:hover {
    color: var(--blog-accent);
    transform: translateX(2px);
}

/* ─── 반응형 ─────────────────────────────────── */
@media (max-width: 1024px) {
    /* 태블릿 이하 — 좌/우 사이드바 modifier 를 무력화하고 1컬럼 스택 */
    /* Collapse sidebar modifiers on tablet/mobile so everything stacks 1-column */
    .blog-body,
    .blog-body--has-left,
    .blog-body--has-right,
    .blog-body--has-left.blog-body--has-right {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .blog-sidebar,
    .blog-sidebar-left { position: static; }

    /* 모바일 스택 순서: 본문이 먼저, 사이드바는 그 아래 (site.php 의 .home-layout 과 동일 정책).
     * 레거시 DOM 순서(좌 사이드바 → 본문 → 우 사이드바)를 그대로 쌓으면 위젯이 많은 사이트에서
     * 포스트가 여러 화면 아래로 밀려 "게시글이 안 보인다" 는 착각을 유발한다 (ronnie.withcenter.com
     * 모바일 /forum/show 이슈). grid item 에도 order 가 적용된다.
     * Stack order on mobile: main content first, sidebars after (same policy as site.php's
     * .home-layout). Left-sidebar-first DOM order buries the post below widget stacks, making
     * users think the post is missing on mobile. order works on grid items too. */
    .blog-content { order: 0; }
    .blog-sidebar-left { order: 1; }
    .blog-sidebar-right { order: 2; }
    /* 태블릿 이하 — 홈 위젯 그리드도 1컬럼 스택 / Home widget grid stacks on tablet.
       Selector specificity(0,3,1) must match/beat the desktop override
       `body.blog-layout .blog-content .home-layout` — same specificity wins via
       cascade order since both use !important. Also cover
       `.home-layout--no-*` variants so the single-column stack applies
       regardless of sidebar-presence modifiers. */
    body.blog-layout .blog-content .home-layout,
    body.blog-layout #sidebar-design-mode .home-layout,
    body.blog-layout .home-layout,
    body.blog-layout .home-layout--no-left,
    body.blog-layout .home-layout--no-right,
    body.blog-layout .home-layout--no-left.home-layout--no-right,
    body.blog-layout .home-layout--no-left:not(.home-layout--no-right),
    body.blog-layout .home-layout--no-right:not(.home-layout--no-left) {
        grid-template-columns: 1fr !important;
        column-gap: 16px !important;
        row-gap: 16px !important;
    }
    body.blog-layout .home-layout .home-center,
    body.blog-layout .home-layout .home-sidebar-left,
    body.blog-layout .home-layout .home-sidebar-right {
        grid-column: 1 !important;
        grid-row: auto;
    }
}

@media (max-width: 900px) {
    .blog-body {
        margin: 24px auto;
        padding: 0 16px;
    }
    .blog-header {
        padding-top: 72px;
    }
    .blog-header-logo { font-size: 1.6rem; }
    .blog-header-actions {
        top: 12px;
        right: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: calc(100vw - 24px);
        padding: 3px;
    }
    .blog-action { padding: 5px 8px; font-size: 0.85rem; }
    .blog-header-nav { gap: 2px; padding: 3px; }
    .blog-cat-link { padding: 5px 12px; font-size: 0.8rem; }
    .blog-content h1 { font-size: 1.75rem; }
    .blog-content h2 { font-size: 1.3rem; }
}

/* 모바일(폰) — 좌우 여백 최소화하여 카드가 뷰포트를 더 채우도록 */
/* Mobile phones — minimize side padding so cards fill the narrow viewport */
@media (max-width: 600px) {
    .blog-body {
        padding: 0 8px;
    }
}